• HTML使用

    目录

    一、HTML 简介

    1、网页的组成部分

    2、HTML是什么

    3、创建HTML

    二、HTML的使用

    1、书写规范

    2、font 字体标签

    3、标题标签

    4、超链接

    5、列表标签

    6、img 标签

    7、表格标签

    8、跨行跨列表格

    9、iframe 框架标签 (内嵌窗口)

    10、表单标签

    11、其他标签

    一、HTML 简介

    1、网页的组成部分

    页面由三部分内容组成

    分别是内容（结构）、表现、行为。

    • 内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容    我们使用 html 技术来展示。
    • 表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用 CSS 技术实现
    • 行为，指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现

    2、HTML是什么

    Hyper  Text Markup Language   （超文本标记语言）    简写：HTML

    HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

    3、创建HTML

    1、创建一个  web 工程（静态的  web 工程）

    2、在工程下创建  html  页面 

    二、HTML的使用

    1、书写规范

    1. <html>                                表示整个html页面的开始
    2.     <head>                            头信息
    3.         <title>标题title>           标题
    4.     head>
    5.     <body>
    6.         页面主体内容                   body 是页面的主体内容 
    7.     body>
    8. html>                               表示整个html面的结束

    注：Java 文件是需要先编译，再由  java  虚拟机跑起来。但  HTML  文件它不需要编译，直接由浏览器进行解析执行。

    2、font 字体标签

    1. <body>
    2.     
    3.     <font color="red" face="宋体" size="7">我是字体标签font> 
    4. body>

    3、标题标签

    1. <body>
    2.     
    3.     <h1 align="left">标题  1h1> 
    4.     <h2 align="center">标题  2h2> 
    5.     <h3 align="right">标题  3h3> 
    6.     <h4>标题  4h4>
    7.     <h5>标题 5h5> 
    8.     <h6>标题 6h6> 
    9.     <h7>标题 7h7>
    10. body>

    4、超链接

    1. <body>
    2.     
    3.     <a href="http://localhost:8080">百度a><br/>
    4.     <a href="http://localhost:8080" target="_self">百度_selfa><br/> 
    5.     <a href="http://localhost:8080" target="_blank">百度_blanka><br/>
    6. body>

    5、列表标签

    1. <body>
    2.     
    3.     <ul type="none"> 
    4.         <li>赵四li> 
    5.         <li>刘能li> 
    6.         <li>小沈阳li> 
    7.         <li>宋小宝li>
    8.     ul> 
    9. body>

    6、img 标签

    1. <body>
    2.     
    3. <img src="1.jpg" width="200" height="260" border="1" alt="美女找不到"/> 
    4. <img src="../2.jpg" width="200" height="260" />
    5. <img src="../imgs/3.jpg" width="200" height="260" /> 
    6. <img src="../imgs/4.jpg" width="200" height="260" /> 
    7. <img src="../imgs/5.jpg" width="200" height="260" /> 
    8. <img src="../imgs/6.jpg" width="200" height="260" />
    9. body>

    7、表格标签

    1. <body> 
    2.     
    3.     <table align="center" border="1" width="300" height="300" cellspacing="0">
    4.         <tr>
    5.             <th>1.1th> 
    6.             <th>1.2th>
    7.             <th>1.3th> 
    8.         tr>
    9.         <tr>
    10.             <td>2.1td> 
    11.             <td>2.2td> 
    12.             <td>2.3td>
    13.         tr> 
    14.         <tr>
    15.         <td>3.1td> 
    16.         <td>3.2td> 
    17.         <td>3.3td>
    18.         tr>
    19.     table> 
    20. body>

    8、跨行跨列表格

    1. <body>
    2.     
    3.     <table width="500" height="500" cellspacing="0" border="1">
    4.         <tr>
    5.             <td colspan="2">1.1td> 
    6.             <td>1.3td>
    7.             <td>1.4td> 
    8.             <td>1.5td>
    9.         tr> 
    10.         <tr>
    11.             <td rowspan="2">2.1td> 
    12.             <td>2.2td>
    13.             <td>2.3td> 
    14.             <td>2.4td> 
    15.             <td>2.5td>
    16.         tr> 
    17.         <tr>
    18.             <td>3.2td> 
    19.             <td>3.3td> 
    20.             <td>3.4td> 
    21.             <td>3.5td>
    22.         tr> 
    23.         <tr>
    24.             <td>4.1td> 
    25.             <td>4.2td> 
    26.             <td>4.3td>
    27.             <td colspan="2" rowspan="2">4.4td> 
    28.         tr>
    29.         <tr>
    30.             <td>5.1td> 
    31.             <td>5.2td> 
    32.             <td>5.3td>
    33.         tr>
    34.     table> 
    35. body>

    9、iframe 框架标签 (内嵌窗口)

    1. <body>
    2.  
    3.     我是一个单独的完整的页面<br/><br/>
    4.  
    5.     
    6.  
    7.     <iframe src="3.标题标签.html" width="500" height="400" name="abc">iframe> 
    8.     <br/>
    9.  
    10.     <ul>
    11.         <li><a href="0-标签语法.html" target="abc">0-标签语法.htmla>li> 
    12.         <li><a href="1.font标签.html" target="abc">1.font标签.htmla>li> 
    13.         <li><a href="2.特殊字符.html" target="abc">2.特殊字符.htmla>li>
    14.     ul> 
    15. body>

    10、表单标签

    1. <body>
    2.      
    3.  
    4.     <form>
    5.         用户名称：<input type="text" value="默认值"/><br/> 
    6.         用户密码：<input type="password" value="abc"/><br/> 
    7.         确认密码：<input type="password" value="abc"/><br/>
    8.         性别：<input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked" />女<br/> 
    9.         兴趣爱好：<input type="checkbox" checked="checked" />Java
    10.                  <input type="checkbox" />JavaScript
    11.                  C++<br/> 
    12.         国籍：<select>
    13.                 <option>--请选择国籍--option>
    14.                 <option selected="selected">中国option> 
    15.                 <option>马来西亚option>
    16.                 <option>俄罗斯option> 
    17.              select><br/>
    18.         自我评价：<textarea rows="10" cols="20">我才是默认值textarea><br/> 
    19.         <input type="reset" value="重置" />
    20.         <input type="submit"/> 
    21.     form>
    22. body>

    表单提交细节

    1. <body>
    2.     
    3.     <form action="http://localhost:8080" method="post"> 
    4.         <input type="hidden" name="action" value="login" /> 
    5.         <h1 align="center">用户注册h1>
    6.         
    7.         <table align="center">
    8.             <tr>
    9.                 <td> 用户名称：td> 
    10.                 <td>
    11.                     <input type="text" name="username" value="默认值"/> 
    12.                 td>
    13.             tr> 
    14.             <tr>
    15.                 <td> 用户密码：td>
    16.                 <td>
    17.                     <input type="password" name="password" value="abc"/>
    18.                 td> 
    19.             tr>
    20.             <tr>
    21.                 <td>性别：td> 
    22.                 <td>
    23.                     <input type="radio" name="sex" value="boy"/>男
    24.                     <input type="radio" name="sex" checked="checked" value="girl" />女 
    25.                 td>
    26.             tr> 
    27.             <tr>
    28.                 <td> 兴趣爱好：td> 
    29.                 <td>
    30.                     <input name="hobby" type="checkbox" checked="checked" value="java"/>Java 
    31.                     <input name="hobby" type="checkbox" value="js"/>JavaScript
    32.                     <input name="hobby" type="checkbox" value="cpp"/>C++ 
    33.                 td>
    34.             tr> 
    35.             <tr>
    36.                 <td>国籍：td> 
    37.                 <td>
    38.                     <select name="country">
    39.                         <option value="none">--请选择国籍--option>
    40.                         <option value="cn" selected="selected">中国option> 
    41.                         <option value="usa">马来西亚option>
    42.                         <option value="jp">俄罗斯option> 
    43.                     select>
    44.                 td> 
    45.             tr> 
    46.             <tr>
    47.                 <td>自我评价：td>
    48.                 <td>
    49.                     <textarea name="desc" rows="10" cols="20">我才是默认值textarea>
    50.                 td> 
    51.             tr>
    52.             <tr>
    53.                 <td>
    54.                     <input type="reset" />
    55.                 td>
    56.                 <td align="center">
    57.                     <input type="submit"/>
    58.                 td> 
    59.             tr>
    60.         table> 
    61.     form>
    62. body>

    11、其他标签

    1. <body>
    2.     
    3.     <div>div标签  1div> 
    4.     <div>div标签  2div> 
    5.     <span>span标签  1span> 
    6.     <span>span标签  2span> 
    7.     <p>p段落标签  1p>
    8.     <p>p段落标签  2p> 
    9. body>

  • 相关阅读:
    APP备案您清楚了吗？
    四.pandas数据处理
    命题和逻辑连接词
    python+vue+django城市公交车辆调度运营管理系统flask-pycharm毕业设计项目lw
    AUTOSAR 包 MC-ISAR 安装指南
    神经网络在通信中的应用,神经网络技术及其应用
    【C++】继承 ⑫ ( 继承的二义性 | virtual 虚继承 )
    智慧公厕高精尖技术揭秘，让卫生管理更智能、更舒适
    C#：winform 检查DataGridView单元格是否为空
    基于Python的书店销售管理系统
  • 原文地址：https://blog.csdn.net/qq_51409098/article/details/126171022