二、HTML 标签元素

1、标题标签 Heading
h1~h6

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

特点：

• 独占一行
• 文字加粗
• 文字变大

h1->h6 文字逐渐变小
2、段落标签 Paragraph

<p>内容</p>

内容

特点：
段落之间存在间隙
独占一行
3、排版标签
（1）换行符 Line Break

第一行文本<br />第二行文本

第一行文本
第二行文本
特点

单标签
让文字强制换行
（1）水平分割线 Horizontal Rule

<hr />

---

4、文本格式化标签
推荐使用后者

b/strong 加粗
u/ins 下划线
i/em 倾斜
s/del 删除线

<b>加粗</b>
<strong>加粗</strong>

<u>下划线</u>
<ins>下划线</ins>

<i>倾斜</i>
<em>倾斜</em>

<s>删除线</s>
<del>删除线</del>

加粗
加粗

下划线
下划线

倾斜
倾斜

删除线
删除线

5、媒体标签
（1）图片标签 Image

<img
  src="图片地址"
  alt="替换文本"
  title="提示文本"
  width="宽度"
  height="高度"
/>

标签属性：属性名=属性值

6、资源路径
（1）当前路径

<`img src="image.png" />`
<!-- 推荐使用./ -->
<img src="./image.png" />

（2）下级路径

<img src="./img/image.png" />

（3）上级路径

<img src="../image.png" />

7、音频标签

<audio
  src="音频地址"
  controls 显示播放控件
  autoplay 自动播放（部分浏览器不支持）
  loop 循环播放
</audio>

支持的格式 mp3 wav

8、视频标签

<video src="视频地址"
  controls 显示播放控件
  autoplay 自动播放（谷歌浏览器需要配合muted静音播放）
  muted 静音播放
  loop 循环播放
</video>

支持的格式 mp4

9、链接标签 Anchor

<a href="目标地址">文字内容</a>

<a href="https://www.baidu.com/">百度</a>

百度
属性：

target: _self 当前窗口打开（默认） / _blank 新窗口打开
Tips: chrome 地址栏双击可以看到完整地址

网站的默认首页 index.html

10、列表
无序列表
有序列表
自定义列表
（1）无序列表 Unordered List

列表项 List Item

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>桃子</li>
</ul>

• 苹果
• 香蕉
• 桃子

（2）有序列表 Ordered List

<ol>
  <li>苹果</li>
  <li>香蕉</li>
  <li>桃子</li>
</ol>

1. 苹果
2. 香蕉
3. 桃子

（3）自定义列表 Description List

<dl>
  <dt>水果</dt>
  <dd>苹果</dd>
  <dd>香蕉</dd>
  <dd>桃子</dd>
</dl>

水果

苹果

香蕉

桃子

标签含义

dt Description Term
dd Description Details

11、表格
（1）基本元素

标签含义

tr Table Row
th Table Header
td Table Data
table 属性：

border 边框宽度
width 表格宽度
height 表格高度

<table border="1">
    <caption>
        表格大标题
    </caption>
    
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>23</td>
    </tr>
    <tr>
        <td>Jack</td>
        <td>24</td>
    </tr>
</table>

（2）表格结构，可以省略

thead 表格头部
tbody 表格主体
tfoot 表格底部

<table border="1">
    <caption>
        表格大标题
    </caption>

    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Tom</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Jack</td>
            <td>24</td>
        </tr>
    </tbody>
    
    <tfoot>
        <tr>
            <td>求和</td>
            <td>57</td>
        </tr>
    </tfoot>
</table>

（3）合并单元格

跨行合并（垂直）rowspan
跨列合并（水平）colspan
左上原则

上下合并，保留最上
左右合并，保留最左
Tips: 不能跨结构合并

<table border="1">
    <caption>
        表格大标题
    </caption>

    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>Tom</td>
            <td rowspan="2">23</td>
        </tr>
        <tr>
            <td>Jack</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td colspan="2">求和: 57</td>
        </tr>
    </tfoot>
</table>

12、表单
输入框 input

type 属性 输入框类型
text 文本框
password 密码框
radio 单选框
checkbox 多选框
file 文件选择
submit 提交按钮
reset 重置按钮
button 普通按钮
（1）text 文本框

placeholder 占位符

<input type="text" placeholder="文本框内的文字" />

文本框占位符
（2）password 密码框

placeholder 占位符

<input type="password" placeholder="密码框占位符" />

密码框占位符
（3）radio 单选框

name 属性分组，一个分组只能有一个值被选中

checked 默认选中

<input type="radio" name="sex" value="1" />男
<input type="radio" name="sex" value="2" checked />女

男
女

（4）checkbox 多选框

checked 默认选中

<input type="checkbox" name="city" value="beijing" />北京
<input type="checkbox" name="city" value="shanghai" checked />上海

北京
上海

（5）file 文件选择

multiple 多选(按住 ctrl 多选)

<input type="file" /> <input type="file" multiple />

（6）按钮

submit 提交按钮
reset 重置按钮
button 普通按钮
需要配合 form 表单域使用

属性 value 修改按钮显示的值

<input type="submit" />
<input type="reset" />
<input type="button" value="普通按钮" />

button 按钮标签
type 取值

submit 提交按钮
reset 重置按钮
button 普通按钮(默认)

<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
<button>普通按钮</button>

提交按钮 重置按钮 普通按钮 普通按钮

select 下拉菜单

<select>
  <option>北京</option>
  <option>上海</option>
  <option selected>广州</option>
  <select></select>
</select>

广州
option 选项

默认选中第一项，可以指定默认选中 selected

textarea 多行文本域
属性

cols 宽度 列数
rows 高度 行数

<textarea></textarea>

label 标签
点击文字也可选中选项

两种使用方式等效

<input type="radio" name="sex" id="man" />
<label for="man">男</label>

<label><input type="radio" name="sex" />女</label>

男 女
无语义标签
div 块级标签，独占一行
span 行内标签
语义化标签
手机端常用

header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章
以上标签和 div 等效，多了语义化

字符实体
在网页中显示特殊字符

空格