HTML5学习笔记一、文本样式标签 HTML 提供了多种文本样式标签，用于对文字进行不同的样式设置，同时分为有语义标签和

一、文本样式标签

HTML 提供了多种文本样式标签，用于对文字进行不同的样式设置，同时分为有语义标签和无语义标签：

有语义标签：不仅能改变文字样式，还带有明确的语义，更推荐使用。

- <strong>：使文字加粗，强调重要性。
- <em>：使文字倾斜，用于强调。
- <ins>：为文字添加下划线，表示插入的内容。
- <del>：为文字添加删除线，表示删除的内容。

无语义标签：仅能改变文字样式，无额外语义，除非特殊情况，不推荐使用。

- <b>：使文字加粗。
- <i>：使文字倾斜。
- <u>：为文字添加下划线。
- <s>：为文字添加删除线。

二、注释标签

格式：，快捷键为 ctrl + /。
特点：

- 注释内容不会显示在网页上。
- 可以跨越多行。
- 常用于代码说明、临时禁用代码或给其他开发者留言。

三、元素分类

HTML 标签分为块级元素和内联元素：

块级元素：

- 独占一行。
- 可以嵌套其他元素。
- 常见的如 p、h（h1 - h6）、div 等。

内联元素：

- 可以一行放多个，通常与文本一起使用。
- 不能嵌套块级元素，可以嵌套其他内联元素。
- 常见的如 strong、em、a 等。

注意事项：段落 p 标签里面不要放其他块级元素，段落里面主要放文字相关的内联元素。

四、图像标签

语法：<img src="" alt="">，是单标签（空元素），默认包含 src 和 alt 两个属性。
属性：

- src：指向要插入到页面的图像地址。
- alt：备选文本，用于在图片无法显示或者因为网速慢等情况下显示的文字。
- width：设置图片宽度（建议用 CSS 修改）。
- height：设置图片高度（建议用 CSS 修改）。
- title：图像标题，鼠标悬停时显示的文本。

注意：属性采取键值对形式（属性 = "值"）；属性之间没有必要的先后顺序，但必须有空格分隔。

五、常见图片格式

jpeg / jpg：采用有损压缩技术，放大缩小会变得模糊或有锯齿，适用于摄影照片、网页图片（非透明背景）。
png：无损压缩，支持透明度，适用于 Logo、网页图形、需要透明度的图像。
gif：支持动画，最多 256 色（索引色），支持简单动画和透明背景，适用于简单动画、表情包、低色彩图形。
webp：Google 开发的现代格式，支持有损 / 无损压缩、透明度和动画，适用于网页优化（替代 JPEG / PNG / GIF），像淘宝等平台使用较多。
avif：基于 AVI 视频编码，支持高压缩率和 HDR，压缩效率优于 WebP，适用于未来网页优化，需高性能压缩的场景（如 B 站、京东等）。
总结：

- 网页优化：优先 WebP / AVIF（兼容时），备选 JPEG / PNG。
- 透明图像：PNG（静态）或 WebP（动态）。
- 动画：WebP / GIF（简单动画）。
- 其他格式：还有 svg、HEIC 等格式，开发中设计师提供图片，直接使用即可。

六、路径

用于指定图像等资源的位置，分为相对路径和绝对路径：

相对路径：相对于当前文件位置的路径，即图片相对于 HTML 文件的位置，说明 HTML 如何找到图片。

- 同一目录：直接使用文件名即可，./ 表示当前文件夹，如 <img src="pig.jpg" alt="这是佩奇"> 或 <img src="./pig.jpg" alt="这是佩奇">。
- 下级子目录（重点）：使用目录名 / 文件名，如 <img src="img/pig.jpg" alt="这是佩奇">。
- 上级目录：使用 ../ 返回上一级，如 <img src="../pig.jpg" alt="这是佩奇">。

绝对路径：从根目录开始的完整路径，包含完整的 URL 地址（了解即可）。例如从盘符开始：<img src="E:\HTML5\代码\pic.jpg" alt="示例图片">；或者完整地址：<img src="https://www.example.com/images/pic.jpg" alt="示例图片">。

七、视频标签（`<video>`）

基础语法：<video src="视频地址"></video>，示例：<video src="video.mp4" controls width="300"></video>。
主要属性：

- src：指向要插入到页面的视频地址。
- controls：显示浏览器自带的播放控件（如播放 / 暂停、音量调节等）。
- width/height：设置视频的宽度和高度。
- autoplay：视频自动播放（注意：部分浏览器要求视频静音才能自动播放）。
- loop：视频循环播放。
- muted：视频静音。
- poster：设置视频的预览图像，在视频未播放时显示。

兼容性写法：由于不同浏览器对视频格式支持有差异（如 Internet Explorer、Safari 对 WebM、Ogg 支持差，Chrome、Firefox 等支持较好），可通过<source>标签指定多个格式的视频源，浏览器会播放第一个匹配的格式。示例：

html

预览

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  <source src="video.webm" type="video/webm">
  <p>您的浏览器不支持 HTML 5 Video 标签，请升级浏览器。</p>
</video>

开发写法：不同场景有不同写法，像 OPPO、VIVO 等场景可直接用<video src="video.mp4" poster=""></video>；小米、京东等场景可结合自动播放和<source>标签，如：

html

预览

<video autoplay poster="">
  <source src="video.mp4" type="video/mp4">
  <p>您的浏览器不支持 HTML 5 Video 标签，请升级浏览器。</p>
</video>

支持的主要格式：MP4、Ogg、WebM，其中主要使用 MP4 格式。

八、音频标签（`<audio>`）

兼容性写法：不同浏览器对音频格式支持不同（如 Internet Explorer 9 + 主要支持 MP3，Chrome 6+、Firefox 3.6 + 等对 MP3、Wav、Ogg 支持较好，Safari 5 + 对 Ogg 支持差），可通过<source>标签指定多个格式的音频源。示例：

html

预览

<audio autoplay>
  <source src="audio.mp3" type="audio/mp3">
  <p>您的浏览器不支持 HTML 5 Audio 标签，请升级浏览器。</p>
</audio>

也可结合控件等属性，如：

html

预览

<audio controls>
  <source src="./media/ldh.mp3" type="audio/mp3">
  <p> 您的浏览器不支持音频播放 </p>
</audio>

注意：音频标签在很多浏览器中默认不让自动播放，后续可通过 JavaScript 实现自动播放等更灵活的控制。

九、超链接基础

超链接能将文档链接到其他文档、资源或文档指定部分，用 <a> 标签创建。

语法：<a href="链接地址">链接文本</a>，示例：<a href="https://www.deepseek.com/">DeepSeek官网</a>。
href ****属性：指定链接目标地址，是超链接核心属性。
可包含元素：链接可包含文字、标题、图片、视频等元素。
其他属性：

- title：鼠标悬停时显示的提示文字，示例：<a href="https://www.deepseek.com/" title="DeepSeek人工智能">DeepSeek官网</a>。
- target：设置页面打开方式，_self（默认，当前窗口打开）、_blank（新窗口打开），示例：<a href="https://www.deepseek.com/" target="_blank">DeepSeek官网</a>。

特殊类型链接

空链接：无实际目标的超链接，用 # 表示，示例：<a href="#">商品列表</a>。
下载链接：若链接是 .exe 或压缩包等文件，点击会触发下载，示例：<a href="download.exe">下载window版本</a>。
邮件链接：用于打开邮件客户端发送邮件，公司或大流量网站慎用（有垃圾邮件风险），示例：<a href="mailto:pig@mozilla.org">给我发邮件</a>。

锚点链接

允许在同一页面内跳转到指定位置，适合长页面导航。

步骤：

- 定义锚点目标：给目标元素添加 id 属性，示例：<h2 id="part1">第一部分</h2>。
- 创建跳转链接：用 # 标记锚点目标，示例：<a href="#part1">跳转到第一部分</a>。

页面滑动效果

要让点击锚点链接后页面有滑动效果，可在 <head> 标签中添加 CSS 代码：

html

预览

<head>
  <style>
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>

完整代码案例

下面是一个包含多种超链接类型的完整 HTML 示例：

html

预览

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>超链接示例</title>
  <style>
    html {
      scroll-behavior: smooth;
    }
    /* 为了让页面有足够长度，便于展示锚点链接滑动效果 */
    section {
      height: 500px;
      margin: 20px;
      border: 1px solid #ccc;
      padding: 20px;
    }
  </style>
</head>
<body>
  <!-- 内部链接 -->
  <a href="./inner.html">内部页面链接</a>
  <br><br>
  <!-- 外部链接 -->
  <a href="https://www.deepseek.com/" title="DeepSeek人工智能" target="_blank">DeepSeek官网</a>
  <br><br>
  <!-- 空链接 -->
  <a href="#">空链接</a>
  <br><br>
  <!-- 下载链接 -->
  <a href="example.zip">下载示例文件</a>
  <br><br>
  <!-- 邮件链接 -->
  <a href="mailto:example@example.com">联系我们</a>
  <br><br>
  <!-- 锚点链接相关 -->
  <a href="#section1">跳转到第一部分</a>
  <a href="#section2">跳转到第二部分</a>
  <a href="#section3">跳转到第三部分</a>

  <section id="section1">
    <h2>第一部分</h2>
    <p>这里是第一部分的内容...</p>
  </section>

  <section id="section2">
    <h2>第二部分</h2>
    <p>这里是第二部分的内容...</p>
  </section>

  <section id="section3">
    <h2>第三部分</h2>
    <p>这里是第三部分的内容...</p>
  </section>
</body>
</html>

十、网站结构标签

网页通常包含页眉、导航栏、主内容、侧边栏、页脚等部分，对应有语义的结构标签，能让页面结构更清晰，也利于搜索引擎优化和无障碍访问。

标签	作用
`<header>`	网页页眉（头部）
`<main>`	网页内容，每个页面只能有一个
`<nav>`	导航栏
`<article>`	文章相关内容
`<section>`	对页面内容进行分块
`<aside>`	侧边栏
`<footer>`	页面页脚（底部）

十一、无语义标签

当没有合适的语义标签时，可使用 div 和 span 进行布局。

div ****标签：

- 块级元素，默认独占一行，前后会自动换行。
- 常用于布局结构，作为其他元素的容器。
- 可以包含其他块级或行内元素。
- 默认没有语义。

span ****标签：

- 行内元素，不会换行，仅包裹内容的一部分。
- 用于对文本或行内元素进行局部样式或操作。
- 默认没有语义。

代码案例

下面是一个包含网站结构标签和 div、span 标签的完整 HTML 示例：

html

预览

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>布局标签示例</title>
  <style>
    /* 为了更直观看到布局效果，添加简单样式 */
    header, nav, main, aside, article, footer, section, div {
      border: 1px solid #ccc;
      margin: 5px;
      padding: 10px;
    }
    div {
      background-color: #f0f0f0;
    }
    span {
      color: blue;
    }
  </style>
</head>
<body>
  <h2>网页结构标签</h2>
  <header>网页头部标签</header>
  <nav>导航栏标签</nav>
  <main>
    <aside>侧边栏标签</aside>
    <article>主要内容区域标签</article>
  </main>
  <footer>页面底部标签</footer>
  <section>区块标签</section>

  <h2>div和span标签</h2>
  <div>我是div标签，是块级元素</div>
  <div>我是div标签，是块级元素</div>
  <div>我是div标签，是块级元素<span>我是span标签，是行内元素</span></div>
  <span>我是span标签，是行内元素</span>
</body>
</html>

在这个示例中，你可以看到网站结构标签如何划分页面不同区域，以及 div（块级，独占一行）和 span（行内，在一行内）的布局表现。

十二、列表标签分类及特点

HTML 中有三种列表标签，用于不同场景组织内容，使内容更整齐有序。

无序列表（ ul ）：列表项顺序无关紧要，常用于展示一组无顺序的条目，默认以圆点等符号作为项目符号。
有序列表（ ol ）：列表项顺序有关紧要，会自动为列表项添加数字等有序的编号。
描述列表（ dl ）：用于标记一组项目及相关描述，由术语（dt）和描述（dd）组成，一个 dt 可对应多个 dd。

代码案例

下面是包含三种列表标签的完整 HTML 示例：

html

预览

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>列表标签示例</title>
  <style>
    /* 为了更直观看到列表效果，添加简单样式 */
    ul, ol, dl {
      margin: 10px;
      padding: 10px;
      border: 1px solid #ccc;
    }
    li, dt, dd {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <h2>无序列表</h2>
  <ul>
    <li>猪爸爸</li>
    <li>猪妈妈</li>
    <li>佩奇</li>
    <li>乔治</li>
  </ul>

  <h2>有序列表</h2>
  <ol>
    <li>看视频</li>
    <li>写代码</li>
    <li>做笔记</li>
    <li>多复习</li>
  </ol>

  <h2>描述列表</h2>
  <dl>
    <dt>家电</dt>
    <dd>电视</dd>
    <dd>冰箱</dd>
    <dd>空调</dd>
    <dd>烟灶</dd>
  </dl>
</body>
</html>

十三、表格基本组成

表格主要由以下标签构成，用于组织和展示数据：

标签	作用
`<table>`	表格容器标签，包裹整个表格
`<tr>`	行标签，定义表格中的一行
`<td>`	单元格标签，定义表格中的一个单元格
`<th>`	表头单元格标签，文字默认加粗且水平垂直居中，常用于第一行或第一列

表格结构标签

这些标签用于增强表格语义，让表格结构更清晰：

标签	作用
`<thead>`	定义表格的头部区域
`<tbody>`	定义表格的主体内容区域
`<tfoot>`	定义表格的底部区域

合并单元格

表格开发中很少使用合并，因为会导致表格难以维护，且可能影响响应式适配（尤其在移动端）。若特殊情况需要合并，遵循以下原理：

确定是跨行合并（ rowspan ）还是 跨列合并（ colspan ）。
找到目标单元格（遵循左上原则），设置合并数量。
删除多余的单元格。

代码案例

下面是一个包含表格基本组成、结构标签以及合并单元格示例的完整 HTML 代码：

html

预览

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格示例</title>
  <style>
    /* 为了更直观看到表格效果，添加简单样式 */
    table {
      border-collapse: collapse; /* 合并边框 */
      width: 500px;
      margin: 20px auto;
    }
    th, td {
      border: 1px solid #000;
      padding: 10px;
      text-align: center;
    }
    th {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <h2>基本表格</h2>
  <table border="1">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>成绩</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>100</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>90</td>
    </tr>
  </table>

  <h2>带结构的表格</h2>
  <table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>成绩</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>小美</td>
        <td>100</td>
      </tr>
      <tr>
        <td>大壮</td>
        <td>98</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>平均分</td>
        <td>92.6</td>
      </tr>
    </tfoot>
  </table>

  <h2>合并单元格的表格</h2>
  <table border="1">
    <tr>
      <td rowspan="2">跨行合并</td>
      <td>单元格1</td>
      <td>单元格2</td>
    </tr>
    <tr>
      <td>单元格3</td>
      <td>单元格4</td>
    </tr>
    <tr>
      <td>单元格5</td>
      <td colspan="2">跨列合并</td>
    </tr>
  </table>
</body>
</html>

在这个示例中，你可以看到基本表格的组成、带结构标签的表格（头部、主体、底部清晰划分）以及合并单元格（跨行、跨列）的效果。同时要注意，美化表格主要是 CSS 的工作，HTML 中只需关注表格的结构和数据组织。

十四、表单的作用与场景

表单用于收集用户输入数据，并将数据提交到后端进行处理。常见场景有用户登录 / 注册、搜索框、联系表单、问卷调查、订单支付、文件上传等。

表单核心组成

表单由三部分核心标签组成：

表单容器（ <form> ）：定义表单的容器，包裹所有表单控件，默认包含 action 属性，用于指定提交表单时数据发送到的 URL（目前暂不涉及数据交互，可先留空）。
表单控件：包含多种用于收集不同类型数据的控件。

- <input>：通用输入控件，可创建文本输入框、密码框、单选框、复选框、文件域等，通过 type 属性定义输入框类型。
- <textarea>：多行文本输入框。
- <select>：下拉选择框。
- <button>：自定义按钮。

辅助标签（ <label> ）：关联输入控件的文本标签，提升可访问性（点击标签可聚焦输入框），改善表单用户体验。

`input` 控件及属性

（一）`type` 属性（定义输入框类型）

`type`****属性值	说明
`text`	单行文本框
`password`	密码框（输入内容隐藏）
`radio`	单选框
`checkbox`	复选框
`file`	文件域（用于文件上传）

（二）其他常用属性

属性	说明
`placeholder`	输入框内的提示信息
`name`	元素的名称，用于后端识别不同表单元素
`maxlength`	允许输入的最大字符数
`accesskey`	使元素获得焦点的快捷键
`autocomplete`	控制表单自动填充行为，取值 `on`（开启）或 `off`（关闭），帮助浏览器根据用户历史输入自动填充字段值

代码案例

下面是一个包含多种表单控件的登录表单示例：

html

预览

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录表单示例</title>
  <style>
    /* 简单样式，让表单更美观 */
    form {
      width: 300px;
      margin: 50px auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    ul {
      list-style: none;
      padding: 0;
    }
    li {
      margin-bottom: 15px;
    }
    label {
      display: inline-block;
      width: 60px;
    }
    input[type="text"],
    input[type="password"] {
      width: 200px;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
    button {
      padding: 6px 15px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }
    button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <form action="">
    <ul>
      <li>
        <label for="username">账号：</label>
        <input type="text" id="username" placeholder="请输入账号" name="username" accesskey="s" autocomplete="off">
      </li>
      <li>
        <label for="pwd">密码：</label>
        <input type="password" id="pwd" placeholder="请输入密码" name="pwd" maxlength="6">
      </li>
      <li>
        <label>性别：</label>
        <input type="radio" name="gender" id="male" value="male">
        <label for="male">男</label>
        <input type="radio" name="gender" id="female" value="female">
        <label for="female">女</label>
      </li>
      <li>
        <label>爱好：</label>
        <input type="checkbox" name="hobby" id="reading" value="reading">
        <label for="reading">阅读</label>
        <input type="checkbox" name="hobby" id="music" value="music">
        <label for="music">音乐</label>
        <input type="checkbox" name="hobby" id="sports" value="sports">
        <label for="sports">运动</label>
      </li>
      <li>
        <label>个人简介：</label>
        <textarea name="intro" rows="4" cols="25" placeholder="请输入个人简介"></textarea>
      </li>
      <li>
        <label>所在城市：</label>
        <select name="city">
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="guangzhou">广州</option>
          <option value="shenzhen">深圳</option>
        </select>
      </li>
      <li>
        <label>头像上传：</label>
        <input type="file" name="avatar">
      </li>
      <li>
        <button type="submit">登录</button>
      </li>
    </ul>
  </form>
</body>
</html>

在这个示例中，你可以看到：

表单容器 <form> 包裹了所有表单控件。
利用 <input> 实现了单行文本框（账号）、密码框（密码）、单选框（性别）、复选框（爱好）、文件域（头像上传）。
用 <textarea> 实现多行文本输入（个人简介）。
用 <select> 实现下拉选择（所在城市）。
用 <label> 关联输入控件，提升可访问性，比如点击 “男” 标签可选中对应单选框。
还使用了 placeholder、name、maxlength、accesskey、autocomplete 等属性来增强表单功能和用户体验。

十五、单选框（`radio`）

作用：用于在一组选项中选择唯一的一个。
相关属性：

- name：表单名称，用于实现分组，同一组（name 值相同）的单选框只能选一个。
- value：表单值，用于标识选中的选项，提交表单时传递给后端。
- checked：设置单选框默认选中状态。

十六、复选框（`checkbox`）

作用：用于在一组选项中选择多个。
相关属性：

- name：表单名称，用于分组。
- value：表单值，标识选中的选项。
- checked：设置复选框默认选中状态。

十七、文件域（`file`）

作用：用于上传文件。
相关属性：

- multiple：允许选择多个文件。
- accept：规定选择的文件类型，多个类型中间用逗号分割（如 .exe,.jpg,.mp4）。

代码案例

html

预览

<!DOCTYPE html>
<html lang="en">
<body>
  <form action="">
    <ul>
      <!-- 单选框 -->
      <li>
        性别：
        <input type="radio" name="gender" value="0" checked> 女
        <input type="radio" name="gender" value="1"> 男
      </li>
      <!-- 复选框 -->
      <li>
        爱好：
        <input type="checkbox" name="hobby" value="0" checked> 足球
        <input type="checkbox" name="hobby" value="1"> 篮球
        <input type="checkbox" name="hobby" value="2"> 双色球
      </li>
      <!-- 文件域 -->
      <li>
        头像：
        <input type="file" name="file" multiple accept=".exe,.jpg,.mp4">
      </li>
      <li>
        <button type="submit">提交</button>
      </li>
    </ul>
  </form>
</body>
</html>

在这个示例中：

单选框部分，name 都为 gender，所以 “女” 和 “男” 只能选一个，且 “女” 默认选中。
复选框部分，name 都为 hobby，“足球” 默认选中，可同时选多个爱好。
文件域部分，设置了 multiple 允许选多个文件，accept 限制只能选 .exe、.jpg、.mp4 类型的文件。

十八、`<textarea>` 控件

作用：是多行纯文本编辑控件，适用于用户输入大量自由格式文本的场景，如评论、反馈表单等，也称为文本域。
常见属性：

- name：表单名称，用于后端识别。
- placeholder：输入框内的提示信息。
- rows：设置文本行数，正整数，默认值为 2。
- cols：设置文本列数，正整数，默认值为 20。

十九、`<select>` 控件

作用：表示提供选项菜单的控件，用于从一组选项中选择一个。
结构：<select> 是容器，<option> 是每个选项标签，每个 <option> 需设置 value 属性（提交表单时传递给后端的值）。
默认选中：给 <option> 添加 selected 属性，可设置该选项默认选中。
补充：由于 <select> 样式难自定义，大部分下拉列表可通过其他标签模拟实现。

二十、`<button>` 控件

作用：定义一个按钮，元素内部可放置文本或图像等内容。
禁用按钮：通过 disabled 属性可禁用按钮，使其无法点击。

代码案例

html

预览

<!DOCTYPE html>
<html lang="en">
<body>
  <form action="">
    <!-- textarea 控件 -->
    <p>
      个人简介：<br>
      <textarea name="intro" placeholder="请输入个人简介" rows="5" cols="30"></textarea>
    </p>

    <!-- select 控件 -->
    <p>
      选择城市：
      <select name="city">
        <option value="beijing" selected>北京</option>
        <option value="shenzhen">深圳</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
      </select>
    </p>

    <!-- button 控件 -->
    <p>
      <button type="submit">提交</button>
      <button type="button" disabled>禁用按钮</button>
    </p>
  </form>
</body>
</html>

在这个示例中：

<textarea> 部分，设置了提示信息 “请输入个人简介”，行数为 5，列数为 30。
<select> 部分，“北京” 选项通过 selected 属性默认选中，用户可从北京、深圳、上海、广州中选择城市。
<button> 部分，有一个可点击的 “提交” 按钮，还有一个因 disabled 属性而禁用的 “禁用按钮”。

二十一、`<label>` 标签

作用：表示用户界面中某个元素的说明，提升可访问性，点击标签可聚焦对应的输入框。
两种使用方式：

- 方式一：利用 for 和 id 相关联。<label> 的 for 属性值与对应输入元素的 id 属性值相同。示例：html预览

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

- 方式二：直接包含输入元素。将输入元素放在 <label> 标签内部。示例：html预览

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

二十二、字符实体

定义：是一段以连字号（&）开头、以分号（;）结尾的文本（字符串），常用于显示保留字符和不可见的字符（如 “不换行空格”）。
常用字符实体示例：

字符	实体	说明
`&`	`&`	解析为实体或字符引用的开头
`<`	`<`	解析为 tag 的开头
`>`	`>`	解析为 tag 的结尾
`"`	`"`	解析为 attribute 的值的开头和结尾
	` `	解析为不换行空格
`©`	`©`	解析为版权符号
`®`	`®`	解析为注册商标符号

代码案例

html

预览

<!DOCTYPE html>
<html lang="en">
<body>
  <form action="">
    <!-- label 方式一：for 和 id 关联 -->
    <p>
      <input type="radio" name="gender" value="0" checked id="nv">
      <label for="nv">女</label>
      <input type="radio" name="gender" value="1" id="nan">
      <label for="nan">男</label>
    </p>

    <!-- label 方式二：直接包含 -->
    <p>
      <label>
        <input type="checkbox" name="hobby" value="0" checked> 足球
      </label>
      <label>
        <input type="checkbox" name="hobby" value="1"> 篮球
      </label>
    </p>

    <!-- 字符实体示例 -->
    <p>
      显示小于号：&lt;<br>
      显示大于号：&gt;<br>
      显示版权符号：&copy;<br>
      不换行空格：Hello&nbsp;&nbsp;&nbsp;World
    </p>
  </form>
</body>
</html>

在这个示例中：

<label> 部分，“女” 单选框通过 for 和 id 与 <label> 关联，“足球”“篮球” 复选框通过 <label> 直接包含输入框的方式关联，点击标签都可聚焦对应输入框。

HTML5学习笔记

一、文本样式标签

二、注释标签

三、元素分类

四、图像标签

五、常见图片格式

六、路径

七、视频标签（<video>）

八、音频标签（<audio>）

九、超链接基础

特殊类型链接

锚点链接

页面滑动效果

完整代码案例

十、网站结构标签

十一、无语义标签

代码案例

十二、列表标签分类及特点

代码案例

十三、表格基本组成

表格结构标签

合并单元格

代码案例

十四、表单的作用与场景

表单核心组成

input 控件及属性

（一）type 属性（定义输入框类型）

（二）其他常用属性

代码案例

十五、单选框（radio）

十六、复选框（checkbox）

十七、文件域（file）

代码案例

十八、<textarea> 控件

十九、<select> 控件

二十、<button> 控件

代码案例

二十一、<label> 标签

二十二、字符实体

代码案例

七、视频标签（`<video>`）

八、音频标签（`<audio>`）

`input` 控件及属性

（一）`type` 属性（定义输入框类型）

十五、单选框（`radio`）

十六、复选框（`checkbox`）

十七、文件域（`file`）

十八、`<textarea>` 控件

十九、`<select>` 控件

二十、`<button>` 控件

二十一、`<label>` 标签