1. HTML 的介绍

  • HTML 全称：HyperText Mark-up Language，即超文本标记语言

  • 超文本，有两层含义

    • 可以是图片、视频、音频等内容（超越文本限制）
    • 一个网页跳转到另一个网页，与世界各地主机的网页链接（即超链接文本）

2. HTML 的基本结构

  • 网页文件的后缀是.html或者.htm
1
2
3
4
5
6
7
8
9
10
11
12
<!--文档声明，指定页面所使用的html的版本-->
<!DOCTYPE html>
<html>
    <!--设置网页标题、编码格式以及引入css和js文件-->
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

3. 常用 HTML 标签

  • 标签不区分大小写，但是推荐使用小写

  • 根据标签的书写形式，标签分为双标签（闭合标签）和单标签（空标签）

    • 双标签可以嵌套其它标签和承载文本内容
    • 单标签没有标签内容
标签 说明

标题标签，分别对应 h1 标题到 h6 标题

段落标签
div标签

换行标签
分割线标签
图片标签，标签属性： src（图片地址）、alt（鼠标悬停时的显示文字）
超链接标签，标签属性：href（链接地址） 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 1、成对出现的标签：-->

<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>


<!-- 2、单个出现的标签： -->
<br>
<img src="images/pic.jpg" alt="图片">
<hr>

<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>

<!-- 4、标签的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="图片">
    <a href="http://www.baidu.com">百度网</a>
</div>

4. 列表标签

1、无序列表

1
2
3
4
5
6
7
<!-- ul标签定义无序列表 -->
<ul>
    <!-- li标签定义列表项目 -->
    <li>列表标题一</li>
    <li>列表标题二</li>
    <li>列表标题三</li>
</ul>

2、有序列表

1
2
3
4
5
6
7
<!-- ol标签定义有序列表 -->
<ol>
    <!-- li标签定义列表项目 -->
    <li><a href="#">列表标题一</a></li>
    <li><a href="#">列表标题二</a></li>
    <li><a href="#">列表标题三</a></li>
</ol>

5. 表格标签

标签 说明
表格
行
列
表头 
1
2
3
4
5
6
7
8
9
10
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td> 
    </tr>
</table>

6. 表单标签

  • 表单用于搜集用户输入的数据，然后提交到web服务器
标签 说明 标签属性
定义整体表单区域 action：设置表单数据提交地址method：设置表单提交方式（get、post）
定义文字标注
定义不同类型的用户输入数据方式 name：设置表单元素名（参数名）value：设置表单元素值（参数值）type：设置数据输入格式type=”text” 定义单行文本输入框type=”password” 定义密码输入框type=”radio” 定义单选框type=”checkbox” 定义复选框type=”file” 定义上传文件type=”submit” 定义提交按钮type=”reset” 定义重置按钮type=”button” 定义一个普通按钮