【一文学会 HTML5】

HTML概述
- 基本概念
- HTML 发展历程
- HTML 基本结构
网页基本标签
- 标题标签（`<h1>` - `<h6>`）
- 段落标签（`<p>`）
- 换行标签（`<br>`）
- 水平线标签（`<hr>`）
- 注释（``）
- 特殊符号
图像标签
- 基本语法
- 主要属性
- 图像的对齐和样式
- 响应式图像
链接标签
- 基本语法
- 重要属性
- - `href` 属性
  - `target` 属性
  - `title` 属性
  - `rel` 属性
  - `download` 属性
- 链接样式
- - 示例代码
- 特殊链接形式
- - 图像链接
  - 按钮链接
块元素和行内元素
- 块元素（Block Elements）
- - 特点
  - 常见的块元素
- 行内元素（Inline Elements）
- - 特点
  - 常见的行内元素
- 元素的转换
- - 示例
列表
- 无序列表（Unordered List）
- - 概述
  - 语法
  - 示例
  - 自定义项目符号样式
- 有序列表（Ordered List）
- - 概述
  - 语法
  - 示例
  - 自定义编号样式
- 定义列表（Definition List）
- - 概述
  - 语法
  - 示例
- 嵌套列表
表格
- 基本结构标签
- 表格的属性
- 表格的跨行和跨列
- 表格的分组标签
媒体元素
- `<audio>` 元素
- - 功能
  - 基本语法
  - 示例
  - 其他常用属性
  - 支持多种音频格式
- `<video>` 元素
- - 功能
  - 基本语法
  - 示例
  - 其他常用属性
  - 支持多种视频格式
网页的简单布局
- 整体框架
- 头部信息（`<head>`）
- 主体内容（`<body>`）
- 辅助结构
内联框架 iframe
- 基本语法
- 示例代码
- 常用属性
- - `src`
  - `width` 和 `height`
  - `frameborder`
  - `allowfullscreen`
  - `sandbox`
表单
- 表单基础
- - 表单的定义
  - 基本结构
  - 提交方式
  - 表单提交的目标
- 表单元素
- - `<input>` 元素
  - `<textarea>` 元素
  - `<select>` 和 `<option>` 元素
  - `<datalist>` 元素
- 表单属性
- - 通用属性
  - HTML5 新增属性
- 表单验证

HTML概述

HTML 即超文本标记语言（HyperText Markup Language），它是用于创建网页的标准标记语言

基本概念

HTML 通过一系列的标记（标签）来描述网页的结构和内容。这些标签就像是建筑中的砖块和蓝图，告诉浏览器如何显示网页的各个部分，比如文本、图像、链接、表格等。浏览器（如 Chrome、Firefox 等）会读取 HTML 文件，并根据其中的标签将网页内容呈现给用户

HTML 发展历程

HTML（超文本标记语言）是构建万维网的核心技术之一，其发展历程反映了互联网技术的演进和标准化进程。以下是HTML的主要发展阶段：

起源与HTML 1.0（1991-1993）

创始人：蒂姆·伯纳斯-李（Tim Berners-Lee）于1991年在欧洲核子研究中心（CERN）提出，旨在实现科学文档的共享。
HTML 1.0：未正式标准化，支持基本文本格式（标题、段落、超链接），仅包含约20个标签。

HTML 2.0（1995）

首个官方标准：由IETF（互联网工程任务组）于1995年发布，定义了HTML的基础结构。
功能增强：支持表单（<form>）、图像（<img>）、列表等，成为早期网页的通用标准。

HTML 3.2（1997）

W3C接管：万维网联盟（W3C）开始主导标准化，1997年发布HTML 3.2。
新特性：引入表格（<table>）、字体样式、脚本支持（JavaScript）等，推动网页动态化。

HTML 4.01（1999）

里程碑版本：1999年发布，成为长期主流标准。
关键改进：
- 分离结构与样式：鼓励使用CSS（层叠样式表）。
- 框架（<frame>）、多媒体支持（需插件如Flash）。
- 国际化支持（字符编码规范）。
三种变体：严格模式（Strict）、过渡模式（Transitional）、框架集（Frameset）。

XHTML（2000-2009）

XML化尝试：W3C于2000年推出XHTML 1.0，强制要求语法严格性（如标签闭合、小写标签）。
目标：提高代码规范性和跨平台兼容性。
争议：严格的语法规则导致开发复杂度上升，浏览器兼容性不足，最终未全面普及。

HTML5（2014至今）

现代Web基石：由W3C与WHATWG（网页超文本应用技术工作小组）合作开发，2014年正式定稿。
核心特性：
- 语义化标签：<header>, <article>, <nav>等，提升可访问性和SEO。
- 原生多媒体支持：<video>, <audio>标签取代Flash。
- 图形与动画：<canvas>和SVG支持动态绘图。
- 离线与存储：LocalStorage、IndexedDB、Service Worker。
- 设备API：地理位置（Geolocation）、摄像头访问。
- 响应式设计：<picture>、<meta viewport>适配多端。
持续演进：HTML5不再以版本号迭代，而是通过模块化标准持续更新（如HTML Living Standard）。

HTML发展特点

标准化与开放：从IETF到W3C/WHATWG，推动技术统一。
功能扩展：从静态文档到富媒体、复杂应用（如WebGL、WebAssembly）。
生态协同：依赖CSS、JavaScript共同构建现代Web技术栈。
移动优先：HTML5助力移动互联网爆发，支持跨平台开发。

HTML 基本结构

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例网页标题</title>
</head>

<body>
    <h1>这是一个一级标题</h1>
    <p>这是一个段落。</p>
</body>

</html>

结构解释：

<!DOCTYPE html>
这是文档类型声明，它位于 HTML 文档的第一行，告诉浏览器当前文档使用的是 HTML5 标准。不同的 HTML 版本有不同的文档类型声明，而 <!DOCTYPE html>是 HTML5 特有的简洁声明方式。
<html> 标签
- <html> 标签是 HTML 文档的根标签，所有其他的 HTML 元素都必须包含在 <html> 和 </html> 标签之间。
- lang="zh-CN" 是一个属性，用于指定文档的语言为中文（中国大陆地区），有助于搜索引擎和屏幕阅读器等工具更好地理解和处理页面内容。
<head> 标签
- <head>标签包含了文档的元数据，这些数据不会直接显示在网页上，但对网页的运行和搜索引擎优化等方面起着重要作用。
  - <meta charset="UTF-8">：设置文档的字符编码为 UTF - 8，这样可以正确显示各种语言的字符，避免出现乱码问题。
  - <meta name="viewport" content="width=device-width, initial-scale=1.0">：这是一个针对移动设备的元标签，width=device-width 表示页面宽度等于设备的屏幕宽度，initial-scale=1.0 表示初始缩放比例为 1.0，确保网页在移动设备上能正确显示和缩放。
  - <title> 标签：定义了网页的标题，它会显示在浏览器的标题栏或标签页上，同时也是搜索引擎优化的重要元素之一。
<body> 标签
- <body>标签包含了网页的可见内容，如文本、图像、链接、表格等。所有用户在浏览器中看到的内容都应该放在<body>和</body>标签之间。
  - <h1> 标签：表示一级标题，HTML 提供了从 <h1> 到 <h6> 共六级标题，用于组织页面内容的层次结构。
  - <p> 标签：用于定义段落，将文本内容划分为不同的段落，使页面结构更清晰。

网页基本标签

标题标签（`<h1>` - `<h6>`）

功能：

用于定义网页中不同级别的标题，从 <h1> 到 <h6> 重要性依次降低，字号也逐渐变小。<h1> 通常用于页面的主标题，而 <h6> 用于最低级别的子标题。

示例：

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

注意事项：

搜索引擎会根据标题标签来理解页面的结构和内容重点，因此合理使用标题标签对 SEO 很重要。
一般一个页面应该只有一个 <h1> 标签，用于突出页面的核心主题。

段落标签（`<p>`）

功能：

用于将文本内容组织成段落。浏览器会自动在段落前后添加一定的间距，使页面内容更具可读性。

示例：

<p>这是一个段落的内容。它可以包含多行文本，并且浏览器会自动处理段落之间的间距。</p>
<p>这是另一个段落，与上一个段落会有明显的分隔。</p>

注意事项：

段落标签是块级元素，会独占一行，并且在前后产生换行效果。
可以通过 CSS 对段落的样式（如字体、颜色、行高、边距等）进行进一步的定制。

换行标签（`<br>`）

功能：

单标签，用于在文本中强制换行，使后续内容显示在下一行，但不会像段落标签那样产生额外的间距。

示例：

这是第一行文本<br>这是第二行文本，它紧跟在第一行之后，只是进行了换行。

注意事项：

不要过度使用 <br> 标签来分隔内容，对于有逻辑的段落划分，应该使用 <p> 标签。
<br> 标签在 HTML 中是单标签，不需要闭合。

水平线标签（`<hr>`）

功能：

单标签，在网页中创建一条水平线，用于分隔不同的内容区域，视觉上起到划分页面板块的作用。

示例：

<p>这是第一段内容。</p>
<hr>
<p>这是第二段内容，与第一段通过水平线分隔开来。</p>

注意事项：

<hr> 标签的样式（如颜色、粗细、长度等）可以通过 CSS 进行修改。
同样，它也是单标签，无需闭合。

注释（``）

功能：

用于在 HTML 代码中添加注释，注释内容不会在浏览器中显示，主要是为开发者提供代码说明，方便后续的代码维护和团队协作。

示例：

<!-- 这是一个注释，用于解释下面的段落是关于产品介绍的 -->
<p>这款产品具有多种功能，能满足您的不同需求。</p>

注意事项：

注释可以跨越多行，只要在  之间的内容都会被视为注释。
合理使用注释可以提高代码的可读性，但不要添加过多无意义的注释。

特殊符号

功能：

在 HTML 中，有些字符具有特殊的含义（如 <、> 用于表示标签），如果要在页面中显示这些字符本身，就需要使用特殊符号（也称为 HTML 实体）。此外，还有一些常用的符号（如版权符号 ©、注册商标符号 ® 等）也可以通过特殊符号来表示。

示例：

特殊符号	描述	HTML 实体
`<`	小于号	`<`
`>`	大于号	`>`
`&`	和号	`&`
`"`	引号	`"`
`'`	单引号	`'`
`©`	版权符号	`©`
`®`	注册商标符号	`®`
`™`	商标符号	`™`
`空格`	多个连续空格在 HTML 中会被合并为一个，使用可以显示多个连续空格

<p>这是一个小于号：&lt;，这是一个大于号：&gt;。</p>
<p>这是版权符号：&copy; 2025 公司名称。</p>

注意事项：

特殊符号以 & 开头，以 ; 结尾，中间是特定的字符实体名称或编号。
记住常用的特殊符号可以避免在页面中出现字符显示错误的问题。

图像标签

在 HTML 中，<img> 标签用于在网页上显示图像。以下是关于 <img> 标签的详细介绍：

基本语法

<img> 是一个空标签，即它只需要开始标签，不需要结束标签。其基本语法如下：

<img src="图像文件的路径或 URL" alt="替代文本">

主要属性

src 属性

作用：src（source 的缩写）属性是 <img> 标签必须的属性，它指定了要显示的图像的路径或 URL。
示例
- 本地图像：如果图像文件与 HTML 文件在同一目录下，直接写文件名即可。

<img src="example.jpg" alt="示例图片">

指定子目录：若图像在子目录中，需要指定相对路径。

<img src="images/example.jpg" alt="示例图片">

远程图像：可以使用完整的 URL 引用互联网上的图像。

<img src="https://example.com/images/example.jpg" alt="示例图片">

alt 属性

作用：alt（alternative text 的缩写）属性提供了图像的替代文本。当图像无法显示时（如网络问题、文件路径错误等），浏览器会显示 alt 属性中的文本；同时，搜索引擎也会读取 alt 属性内容，有助于 SEO；对于使用屏幕阅读器的盲人用户，屏幕阅读器会朗读 alt 属性的内容。
示例

<img src="nonexistent.jpg" alt="这是一张本应显示但未成功加载的图片">

width 和 height 属性

作用：这两个属性用于指定图像显示的宽度和高度，单位可以是像素（px）或百分比（%）。如果只设置其中一个属性，浏览器会按比例自动调整另一个属性的值，以保持图像的原始宽高比；如果同时设置两个属性，图像可能会被拉伸或压缩。
示例

<!-- 指定像素宽度和高度 -->
<img src="example.jpg" alt="示例图片" width="300" height="200">
<!-- 指定百分比宽度，高度自动按比例调整 -->
<img src="example.jpg" alt="示例图片" width="50%">

title 属性

作用：title 属性为图像提供额外的提示信息。当用户将鼠标悬停在图像上时，会显示 title 属性中的文本。
示例

<img src="example.jpg" alt="示例图片" title="点击查看大图">

图像的对齐和样式

虽然 <img> 标签本身也有一些用于对齐的属性（如 align），但现在更推荐使用 CSS 来控制图像的对齐和样式。

使用 CSS 控制对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      .center-img {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
      .right-img {
            float: right;
        }
    </style>
</head>
<body>
    <!-- 居中对齐 -->
    <img src="example.jpg" alt="示例图片" class="center-img">
    <!-- 右对齐 -->
    <img src="example.jpg" alt="示例图片" class="right-img">
</body>
</html>

响应式图像

为了使图像在不同设备和屏幕尺寸上都能良好显示，可以使用 srcset 和 sizes 属性。

srcset 和 sizes 属性

srcset：允许提供多个不同分辨率的图像文件，浏览器会根据设备的屏幕分辨率和视口大小选择合适的图像。
sizes：定义不同视口宽度下图像的显示宽度。

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 500px) 100vw, (max-width: 1000px) 50vw, 33vw"
     alt="响应式示例图片">

在上述示例中：

srcset 列出了不同分辨率的图像文件及其对应的宽度（以像素为单位，后面跟 w）。
sizes 定义了在不同视口宽度下图像的显示宽度。例如，当视口宽度小于等于 500px 时，图像宽度为视口宽度的 100%；当视口宽度小于等于 1000px 时，图像宽度为视口宽度的 50%；否则，图像宽度为视口宽度的 33%。浏览器会根据这些信息选择最合适的图像来显示。

链接标签

在 HTML 里，链接标签主要是 <a>（锚点标签），它能创建超链接，把当前网页与其他网页、文件、同一页面不同位置、电子邮件地址等连接起来。以下是对 <a> 标签的详细解析：

基本语法

标签属于双标签，要有开始标签 <a> 和结束标签 </a>，中间可包含链接文本或其他可点击元素。其基本语法如下：

<a href="目标地址">链接文本</a>

重要属性

`href` 属性

作用：href（hypertext reference 的缩写）是 <a> 标签核心属性，用于指定链接的目标地址，它可以是网页 URL、文件路径、电子邮件地址、同一页面内的锚点等。
示例
- 外部网页链接：能链接到其他网站的页面。

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

内部网页链接：可链接到同一网站内的其他页面，采用相对路径。

<a href="products.html">产品展示</a>

文件下载链接：链接到一个文件，点击后会触发文件下载。

<a href="report.docx">下载报告</a>

电子邮件链接：使用 mailto: 协议，点击链接会打开用户默认邮件客户端并填写收件人地址。

<a href="mailto:support@example.com">联系客服</a>

同一页面内的锚点链接：先在目标位置设置 id 属性，然后在链接的 href 属性中用 # 加上该 id 值。

<a href="#section3">跳至第三部分</a>
<h2 id="section3">第三部分内容</h2>

`target` 属性

作用：target 属性用来指定链接的打开方式，即链接在哪个窗口或框架中打开。
常见取值及示例
- _self：这是默认值，会在当前窗口或框架中打开链接。

<a href="page.html" target="_self">在当前窗口打开</a>

_blank：会在新窗口或新标签页中打开链接。

<a href="https://www.google.com" target="_blank">在新窗口打开谷歌</a>

_parent：在父框架中打开链接，若没有父框架，则等同于 _self。
_top：在整个浏览器窗口中打开链接，会取消所有框架。

`title` 属性

作用：title 属性为链接提供额外提示信息。当用户将鼠标悬停在链接上时，会显示 title 属性中的文本。
示例

<a href="about.html" title="了解我们的公司历史和团队">关于我们</a>

`rel` 属性

作用：rel（relationship 的缩写）属性用于指定当前文档与链接文档之间的关系，常见用途包括搜索引擎优化和安全提示。
常见取值及示例
- nofollow：告知搜索引擎不要追踪该链接，常用于用户可提交内容的页面（如评论区），防止垃圾链接影响网站排名。

<a href="https://untrusted-site.com" rel="nofollow">不可信网站链接</a>

noopener：当使用 target="_blank" 打开外部链接时，添加 rel="noopener" 可提高安全性，防止新窗口的脚本访问当前窗口的 window.opener 对象，避免潜在安全风险。

<a href="https://external-site.com" target="_blank" rel="noopener">安全打开外部网站</a>

`download` 属性

作用：当链接指向一个文件时，添加 download 属性会强制浏览器下载该文件，而不是尝试打开它。
示例

<a href="image.jpg" download>下载图片</a>

链接样式

可以运用 CSS 改变链接的外观，如颜色、下划线、鼠标悬停效果等。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* 未访问的链接 */
        a:link {
            color: #007BFF;
            text-decoration: none;
        }
        /* 已访问的链接 */
        a:visited {
            color: #6C757D;
        }
        /* 鼠标悬停的链接 */
        a:hover {
            color: #FFC107;
            text-decoration: underline;
        }
        /* 激活的链接（鼠标按下时） */
        a:active {
            color: #DC3545;
        }
    </style>
</head>
<body>
    <a href="#">示例链接</a>
</body>
</html>

特殊链接形式

图像链接

<a> 标签不仅能包含文本，还能包含图像，将图像转变为可点击的链接。

<a href="https://example.com">
    <img src="image.jpg" alt="示例图片">
</a>

按钮链接

可以把 <button> 元素放在 <a> 标签内，实现按钮样式的链接。

<a href="https://example.com">
    <button>点击访问</button>
</a>

块元素和行内元素

在 HTML 中，元素根据其显示方式主要分为行内元素（Inline Elements）和块元素（Block Elements），它们在布局和呈现上有显著的差异。以下详细介绍这两种元素：

块元素（Block Elements）

特点

独占一行：块元素在页面中会独自占据一行，无论其内容多少，后续元素会自动换行显示在其下方。
可设置宽高：可以通过 CSS 显式地设置块元素的宽度（width）和高度（height）属性。如果不设置宽度，默认情况下，块元素会扩展到其父元素的宽度。
可包含其他元素：块元素通常可以包含行内元素和其他块元素，用于构建页面的整体结构。

常见的块元素

<div>：是最常用的块元素之一，本身没有特定的语义，主要用于将页面内容进行分组，方便进行样式设置和布局控制。

<div style="background-color: lightgray; padding: 10px;">
    <p>这是一个包含在 div 中的段落。</p>
</div>

<p>：用于定义段落，浏览器会自动在段落前后添加一定的间距。

<p>这是一个段落的文本内容。</p>

<h1> - <h6>：用于定义不同级别的标题，<h1> 级别最高，字号最大，<h6> 级别最低，字号最小。

<h1>这是一级标题</h1>

<ul>、<ol> 和 <li>：<ul> 定义无序列表，<ol> 定义有序列表，<li> 定义列表项。

<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
</ul>

<form>：用于创建 HTML 表单，用户可以在表单中输入数据并提交到服务器。

<form action="submit.php" method="post">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

行内元素（Inline Elements）

特点

不独占一行：行内元素会在同一行内显示，不会强制换行，直到当前行空间不足才会换行。
宽度和高度由内容决定：行内元素的宽度和高度是由其内容的大小决定的，无法通过 CSS 直接设置其宽度和高度（但某些行内元素如 <img> 除外）。
只能包含行内元素：一般情况下，行内元素只能包含其他行内元素，不能包含块元素。

常见的行内元素

<a>：用于创建超链接，可以链接到其他网页、文件、电子邮件地址等。

<a href="https://www.example.com">访问示例网站</a>

<img>：用于在网页中插入图像。虽然它是行内元素，但可以设置宽度和高度属性。

<img src="example.jpg" alt="示例图片" width="200" height="150">

<input>：用于创建各种输入字段，如文本框、密码框、复选框、单选框等。

<input type="text" placeholder="请输入内容">

<label>：用于为表单元素定义标签，提高表单的可用性和可访问性。

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<span>：是一个通用的行内元素，本身没有特定的语义，主要用于对文本的一部分进行分组和样式设置。

<p>这是一段 <span style="color: red;">红色</span> 的文本。</p>

元素的转换

通过 CSS 的 display 属性，可以将块元素转换为行内元素，或将行内元素转换为块元素。

示例

将块元素转换为行内元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            display: inline;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div>这是一个转换为行内元素的 div。</div>
    <div>这是另一个转换为行内元素的 div。</div>
</body>
</html>

将行内元素转换为块元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        span {
            display: block;
            background-color: lightgreen;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <span>这是一个转换为块元素的 span。</span>
    <span>这是另一个转换为块元素的 span。</span>
</body>
</html>

列表

在 HTML 中，列表用于将相关信息进行分组和展示，使页面内容更加有条理。HTML 提供了三种主要类型的列表：无序列表、有序列表和定义列表。以下是对这三种列表的详细介绍：

无序列表（Unordered List）

概述

无序列表使用项目符号来标记每个列表项，列表项之间没有特定的顺序。常用于展示并列的信息，如菜单选项、要点列举等。

语法

无序列表使用 <ul> 标签作为容器，每个列表项使用 <li> 标签表示。

<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>无序列表示例</title>
</head>

<body>
  <h2>水果列表</h2>
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
  </ul>
</body>

</html>

自定义项目符号样式

可以使用 CSS 的 list-style-type 属性来改变项目符号的样式，常见取值如下：

disc：默认值，实心圆。
circle：空心圆。
square：实心方块。
none：不显示项目符号。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义无序列表样式</title>
  <style>
    ul.square {
      list-style-type: square;
    }

    ul.none {
      list-style-type: none;
    }
  </style>
</head>

<body>
  <h2>自定义项目符号样式</h2>
  <ul class="square">
    <li>项目 1</li>
    <li>项目 2</li>
  </ul>
  <ul class="none">
    <li>无项目符号 1</li>
    <li>无项目符号 2</li>
  </ul>
</body>

</html>

有序列表（Ordered List）

概述

有序列表使用数字或字母来标记每个列表项，列表项之间有明确的顺序。常用于展示步骤、排名等信息。

语法

有序列表使用 <ol> 标签作为容器，每个列表项同样使用 <li> 标签表示。

<ol>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ol>

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>有序列表示例</title>
</head>

<body>
  <h2>考试步骤</h2>
  <ol>
    <li>进入考场</li>
    <li>找到座位</li>
    <li>等待发卷</li>
  </ol>
</body>

</html>

自定义编号样式

可以使用 CSS 的 list-style-type 属性来改变编号的样式，常见取值如下：

decimal：默认值，十进制数字（1, 2, 3…）。
lower-roman：小写罗马数字（i, ii, iii…）。
upper-roman：大写罗马数字（I, II, III…）。
lower-alpha：小写字母（a, b, c…）。
upper-alpha：大写字母（A, B, C…）。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义有序列表样式</title>
  <style>
    ol.roman {
      list-style-type: lower-roman;
    }

    ol.alpha {
      list-style-type: upper-alpha;
    }
  </style>
</head>

<body>
  <h2>自定义编号样式</h2>
  <ol class="roman">
    <li>项目 1</li>
    <li>项目 2</li>
  </ol>
  <ol class="alpha">
    <li>项目 A</li>
    <li>项目 B</li>
  </ol>
</body>

</html>

定义列表（Definition List）

概述

定义列表用于展示术语及其定义，每个术语使用 <dt>（Definition Term）标签表示，对应的定义使用 <dd>（Definition Description）标签表示。

语法

定义列表使用 <dl> 标签作为容器，内部包含多个 <dt> 和 <dd> 标签对。

<dl>
  <dt>术语 1</dt>
  <dd>术语 1 的定义</dd>
  <dt>术语 2</dt>
  <dd>术语 2 的定义</dd>
</dl>

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定义列表示例</title>
</head>

<body>
  <h2>计算机术语定义</h2>
  <dl>
    <dt>CPU</dt>
    <dd>中央处理器，是计算机的核心组件，负责执行指令和处理数据。</dd>
    <dt>RAM</dt>
    <dd>随机存取存储器，用于临时存储计算机正在运行的程序和数据。</dd>
  </dl>
</body>

</html>

嵌套列表

在 HTML 中，列表可以进行嵌套，即在一个列表项中可以包含另一个列表。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>嵌套列表示例</title>
</head>

<body>
  <h2>嵌套列表</h2>
  <ul>
    <li>主列表项 1
      <ol>
        <li>子列表项 1</li>
        <li>子列表项 2</li>
      </ol>
    </li>
    <li>主列表项 2</li>
  </ul>
</body>

</html>

表格

在 HTML 中，<table> 标签用于创建表格，表格能够以结构化的方式展示数据，使信息更加清晰易读。以下是关于 HTML 表格的详细介绍：

基本结构标签

<table> 标签：这是创建表格的根元素，所有表格相关的内容都包含在 <table> 和 </table> 标签之间。

<table>
  <!-- 表格内容 -->
</table>

<tr> 标签：代表表格行（table row），一个 <tr> 标签表示表格中的一行数据，多个 <tr> 标签可以创建多行表格。

<table>
  <tr>
    <!-- 第一行的单元格内容 -->
  </tr>
  <tr>
    <!-- 第二行的单元格内容 -->
  </tr>
</table>

<td> 标签：表示表格数据单元格（table data cell），用于定义表格行中的单个数据单元格。每个 <tr> 标签内可以包含多个 <td> 标签。

<table>
  <tr>
    <td>单元格 1</td>
    <td>单元格 2</td>
  </tr>
  <tr>
    <td>单元格 3</td>
    <td>单元格 4</td>
  </tr>
</table>

<th> 标签：用于定义表头单元格（table header cell），通常位于表格的第一行，用于表示每一列的标题。<th> 标签内的文本通常会以粗体和居中的方式显示。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

表格的属性

border 属性：早期用于定义表格边框的宽度，单位是像素。虽然现在不推荐直接在 HTML 标签中使用该属性（推荐用 CSS 来设置边框样式），但了解它的作用有助于理解表格的基本外观设置。

<table border="1">
  <!-- 表格内容 -->
</table>

cellpadding 属性：指定单元格内内容与单元格边框之间的空白距离，单位是像素。

<table cellpadding="5">
  <!-- 表格内容 -->
</table>

cellspacing 属性：定义相邻单元格之间的间距，单位是像素。

<table cellspacing="2">
  <!-- 表格内容 -->
</table>

表格的跨行和跨列

rowspan 属性：用于使单元格跨行，rowspan 的值表示该单元格要跨越的行数。

<table border="1">
  <tr>
    <td rowspan="2">合并的单元格</td>
    <td>单元格 2</td>
  </tr>
  <tr>
    <td>单元格 4</td>
  </tr>
</table>

colspan 属性：用于使单元格跨列，colspan 的值表示该单元格要跨越的列数。

<table border="1">
  <tr>
    <td colspan="2">合并的单元格</td>
  </tr>
  <tr>
    <td>单元格 3</td>
    <td>单元格 4</td>
  </tr>
</table>

表格的分组标签

<thead> 标签：用于定义表格的表头部分，通常包含 <tr> 和 <th> 标签。表头部分的内容在显示时可以与表格主体部分区分开来，比如设置不同的样式。

<table>
  <thead>
    <tr>
      <th>列标题 1</th>
      <th>列标题 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据 1</td>
      <td>数据 2</td>
    </tr>
    <tr>
      <td>数据 3</td>
      <td>数据 4</td>
    </tr>
  </tbody>
</table>

<tbody> 标签：表示表格的主体部分，包含表格的实际数据行，由多个 <tr> 和 <td> 标签组成。

<tfoot> 标签：用于定义表格的表尾部分，通常用于显示表格的汇总信息等。

媒体元素

在 HTML 中，媒体元素主要用于在网页上嵌入音频、视频等多媒体内容，为用户带来更丰富的交互体验。以下是对 HTML 主要媒体元素的详细介绍：

`<audio>` 元素

功能

<audio> 元素用于在网页中嵌入音频文件，支持多种音频格式，如 MP3、WAV、OGG 等。用户可以直接在网页上播放音频，而无需跳转到其他播放器应用。

基本语法

<audio src="音频文件的 URL" controls></audio>

src 属性：指定要播放的音频文件的路径或 URL。
controls 属性：添加该属性后，浏览器会显示音频播放器的控制条，用户可以进行播放、暂停、调节音量等操作。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频示例</title>
</head>
<body>
    <audio src="example.mp3" controls></audio>
</body>
</html>

其他常用属性

autoplay：音频页面加载完成后自动播放。但由于用户体验和数据流量等问题，部分浏览器对自动播放有一定限制。

<audio src="example.mp3" controls autoplay></audio>

loop：音频播放完后自动循环播放。

<audio src="example.mp3" controls loop></audio>

preload：指定音频在页面加载时的预加载策略，有三个可选值：
- auto：浏览器会在页面加载时尽可能多地预加载音频。
- metadata：只预加载音频的元数据（如时长、比特率等）。
- none：不进行预加载。

<audio src="example.mp3" controls preload="metadata"></audio>

支持多种音频格式

为了确保在不同浏览器中都能正常播放音频，可以提供多种音频格式，使用 <source> 元素。

<audio controls>
    <source src="example.mp3" type="audio/mpeg">
    <source src="example.ogg" type="audio/ogg">
    您的浏览器不支持音频播放。
</audio>

`<video>` 元素

功能

<video> 元素用于在网页中嵌入视频文件，支持多种视频格式，如 MP4、WebM、OGG 等。用户可以在网页上直接播放视频，无需借助外部视频播放器。

基本语法

<video src="视频文件的 URL" controls width="640" height="360"></video>

src 属性：指定要播放的视频文件的路径或 URL。
controls 属性：添加该属性后，浏览器会显示视频播放器的控制条，用户可以进行播放、暂停、调节音量、快进等操作。
width 和 height 属性：用于指定视频播放器的宽度和高度。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频示例</title>
</head>
<body>
    <video src="example.mp4" controls width="640" height="360"></video>
</body>
</html>

其他常用属性

autoplay：视频页面加载完成后自动播放，同样受浏览器限制。

<video src="example.mp4" controls autoplay width="640" height="360"></video>

loop：视频播放完后自动循环播放。

<video src="example.mp4" controls loop width="640" height="360"></video>

preload：指定视频在页面加载时的预加载策略，可选值与 <audio> 元素相同。

<video src="example.mp4" controls preload="auto" width="640" height="360"></video>

poster：指定视频播放前显示的海报图片的 URL，当用户还未开始播放视频时，会显示该图片。

<video src="example.mp4" controls poster="poster.jpg" width="640" height="360"></video>

支持多种视频格式

为了兼容不同浏览器，同样可以使用 <source> 元素提供多种视频格式。

<video controls width="640" height="360">
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    您的浏览器不支持视频播放。
</video>

网页的简单布局

HTML 页面具有特定的结构，合理的页面结构有助于提升网页的可读性、可维护性，同时也有利于搜索引擎优化（SEO）。下面从整体框架、头部信息、主体内容和辅助结构等方面详细分析 HTML 页面结构。

整体框架

一个标准的 HTML 页面包含文档类型声明、HTML 根元素，HTML 根元素内又分为头部（<head>）和主体（<body>）两大部分。以下是基本结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 头部信息 -->
</head>
<body>
    <!-- 主体内容 -->
</body>
</html>

<!DOCTYPE html>：这是文档类型声明，它告诉浏览器当前页面使用的是 HTML5 标准。不同的 HTML 版本有不同的文档类型声明，HTML5 的声明最为简洁。
<html>：HTML 文档的根标签，所有的 HTML 元素都要包含在<html>和</html>之间。lang="zh-CN"表示页面语言为中文（中国大陆地区），这有助于搜索引擎和屏幕阅读器等工具更好地理解页面内容。

头部信息（`<head>`）

头部信息包含了页面的元数据，这些数据不会直接显示在页面上，但对页面的运行和搜索引擎优化等方面起着重要作用。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>

<meta>标签
- 字符编码：<meta charset="UTF-8">指定了页面的字符编码为 UTF - 8，这样可以正确显示各种语言的字符，避免出现乱码问题。
- 视口设置：<meta name="viewport" content="width=device-width, initial-scale=1.0">用于适配移动设备，width=device-width表示页面宽度等于设备的屏幕宽度，initial-scale=1.0表示初始缩放比例为 1.0。
- 其他元数据：还可以通过<meta>标签设置页面的描述、关键词等信息，例如<meta name="description" content="这是一个关于HTML页面结构的示例页面">，这些信息有助于搜索引擎了解页面内容。
<title>标签：定义了页面的标题，它会显示在浏览器的标题栏或标签页上，是搜索引擎优化的重要元素之一，应简洁明了地概括页面内容。
<link>标签：通常用于引入外部的 CSS 文件，为页面添加样式。rel="stylesheet"表示链接的是样式表，href="styles.css"指定了 CSS 文件的路径。
<script>标签：用于引入外部的 JavaScript 文件，为页面添加交互功能。src="script.js"指定了 JavaScript 文件的路径。

主体内容（`<body>`）

主体内容是用户在浏览器中实际看到的部分，包含了各种 HTML 元素，如标题、段落、图像、链接等。

<body>
    <!-- 页眉部分 -->
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">服务项目</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <!-- 主要内容部分 -->
    <main>
        <article>
            <h2>文章标题</h2>
            <p>这是文章的正文内容。可以包含多个段落，详细阐述相关主题。</p>
            <img src="example.jpg" alt="示例图片">
        </article>
    </main>
    <!-- 侧边栏部分 -->
    <aside>
        <h3>侧边栏标题</h3>
        <p>这里可以放置一些补充信息，如广告、推荐内容等。</p>
    </aside>
    <!-- 页脚部分 -->
    <footer>
        <p>版权所有 &copy; 2025</p>
    </footer>
</body>

<header>标签：通常包含网站的标题、导航菜单等信息，作为页面或页面中某个区域的页眉。
<nav>标签：用于定义导航链接，包含一组导航菜单，方便用户在页面之间进行跳转。
<main>标签：表示页面的主要内容，一个页面应该只有一个<main>元素，它不包含侧边栏、页眉页脚等内容。
<article>标签：用于表示一个独立的、完整的内容块，如一篇文章、博客帖子等，具有自己的标题和正文。
<img>标签：用于在页面中插入图像，src属性指定图像的文件路径或 URL，alt属性提供图像的替代文本，当图像无法显示时会显示该文本。
<aside>标签：通常用于放置与主要内容相关的补充信息，如侧边栏、广告等。
<footer>标签：作为页面或页面中某个区域的页脚，通常包含版权信息、联系方式等。

辅助结构

除了上述主要部分，HTML 页面还可以包含一些辅助结构，如<section>标签用于将页面内容进行分段，<div>标签用于对元素进行分组，方便进行样式设置和布局控制。

<section>
    <h2>分段标题</h2>
    <p>这是分段的内容。</p>
</section>
<div class="container">
    <p>这是一个分组的内容。</p>
</div>

<section>标签：表示页面中的一个章节或区段，通常包含一个标题和相关的内容。
<div>标签：是一个通用的块级元素，本身没有特定的语义，主要用于将页面元素进行分组，通过 CSS 对其进行样式设置和布局控制。

内联框架 iframe

HTML 内联框架 <iframe> 是一个非常实用的元素，它允许在当前 HTML 页面中嵌入另一个 HTML 页面。以下是关于 <iframe> 的详细介绍：

基本语法

<iframe>标签需要同时有开始标签 <iframe> 和结束标签 </iframe>，其基本语法如下：

<iframe src="URL" width="宽度" height="高度"></iframe>

src 属性：必需属性，指定要嵌入的网页的 URL。
width 和 height 属性：用于设置内联框架的宽度和高度，单位可以是像素（px）或百分比（%）。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iframe Example</title>
</head>
<body>
    <h1>使用 iframe 嵌入网页</h1>
    <iframe src="https://www.example.com" width="800" height="600"></iframe>
</body>
</html>

在这个例子中，一个宽度为 800 像素、高度为 600 像素的内联框架会被创建，并且在其中加载 https://www.example.com 这个网页。

常用属性

`src`

指定要嵌入的网页的 URL，可以是外部网页，也可以是同一网站内的页面。

<iframe src="local-page.html" width="500" height="300"></iframe>

`width` 和 `height`

设置内联框架的宽度和高度。可以使用像素值或者百分比。

<iframe src="https://example.com" width="50%" height="400px"></iframe>

`frameborder`

设置内联框架的边框，值为 0 表示不显示边框，1 表示显示边框。不过该属性已逐渐被 CSS 替代，现在更推荐使用 CSS 来控制边框样式。

<iframe src="page.html" frameborder="0"></iframe>

`allowfullscreen`

允许内联框架中的内容以全屏模式显示，常用于嵌入视频等场景。

<iframe src="video.html" allowfullscreen></iframe>

`sandbox`

为内联框架提供额外的安全限制，它可以限制内联框架中页面的某些行为，例如阻止脚本执行、表单提交等。

<iframe src="untrusted-page.html" sandbox></iframe>

sandbox 属性可以有多个值，如 allow-scripts 允许执行脚本，allow-forms 允许提交表单等。例如：

<iframe src="untrusted-page.html" sandbox="allow-scripts allow-forms"></iframe>

表单

表单基础

表单的定义

HTML 表单是一种用于用户输入数据的结构，通过 <form> 元素创建。表单允许用户输入文本、选择选项、上传文件等，并将这些数据发送到服务器进行处理。

基本结构

<form action="处理数据的URL" method="提交方法">
    <!-- 表单元素 -->
    <input type="text" name="字段名">
    <input type="submit" value="提交">
</form>

<form> 标签：是表单的容器，所有表单元素都应放在这个标签内部。
action 属性：指定表单数据要发送到的服务器端脚本的 URL。
method 属性：定义表单数据的提交方式，主要有 GET 和 POST。

提交方式

GET 方式
表单数据会附加在 URL 后面，以键值对的形式出现，例如 http://example.com/form.php?username=john&age=25。数据会显示在浏览器的地址栏中，不适合传输敏感信息，且传输的数据量有限。

<form action="process.php" method="GET">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

POST 方式
表单数据放在 HTTP 请求的消息体中，不会显示在 URL 中，适合传输敏感信息，且传输的数据量没有限制。

<form action="process.php" method="POST">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

表单提交的目标

可以通过 target 属性指定表单提交后响应页面的显示位置。

_self：在当前窗口打开响应页面（默认值）。
_blank：在新窗口打开响应页面。

<form action="process.php" method="POST" target="_blank">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

表单元素

`<input>` 元素

<input> 是最常用的表单元素，通过 type 属性可以定义不同类型的输入框。

文本输入框（type="text"）

<input type="text" name="username" placeholder="请输入用户名">

密码输入框（type="password"）

<input type="password" name="password" placeholder="请输入密码">

单选按钮（type="radio"）

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

同一组单选按钮需有相同的 name 属性，用户只能选择其中一个。

复选框（type="checkbox"）

<input type="checkbox" name="hobbies" value="reading"> 阅读
<input type="checkbox" name="hobbies" value="swimming"> 游泳

用户可以选择多个复选框。

文件选择框（type="file"）

<input type="file" name="avatar">

允许用户选择本地文件进行上传。

隐藏输入框（type="hidden"）

<input type="hidden" name="form_id" value="123">

用于存储一些不需要用户看到但需要随表单一起提交的数据。

提交按钮（type="submit"）

<input type="submit" value="提交">

点击该按钮会将表单数据提交到 action 指定的 URL。

重置按钮（type="reset"）

<input type="reset" value="重置">

点击该按钮会将表单中的所有输入项重置为初始值。

按钮（type="button"）

<input type="button" value="自定义按钮" onclick="customFunction()">

通常用于执行自定义的 JavaScript 函数。

`<textarea>` 元素

用于输入多行文本。

<textarea name="message" rows="5" cols="30" placeholder="请输入留言内容"></textarea>

rows 属性指定文本框的行数。
cols 属性指定文本框的列数。

`<select>` 和 `<option>` 元素

用于创建下拉列表。

<select name="country">
    <option value="china">中国</option>
    <option value="usa">美国</option>
    <option value="uk">英国</option>
</select>

可以使用 selected 属性设置默认选中项：

<select name="country">
    <option value="china" selected>中国</option>
    <option value="usa">美国</option>
    <option value="uk">英国</option>
</select>

`<datalist>` 元素

与 <input> 元素配合使用，提供一个预定义的选项列表供用户选择。

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
</datalist>

表单属性

通用属性

name 属性：用于标识表单元素，服务器通过该属性名来获取表单数据。
value 属性：设置表单元素的值，对于不同类型的元素有不同的用途。
disabled 属性：禁用表单元素，用户无法对其进行操作。

<input type="text" name="username" disabled>

readonly 属性：设置表单元素为只读，用户可以看到其值但无法修改。

<input type="text" name="email" value="example@example.com" readonly>

HTML5 新增属性

placeholder 属性：在输入框中显示提示信息，当用户输入内容时提示信息消失。

<input type="text" name="username" placeholder="请输入用户名">

autofocus 属性：使表单元素在页面加载时自动获得焦点。

<input type="text" name="username" autofocus>

required 属性：指定表单元素为必填项。

<input type="text" name="username" required>

表单验证

pattern 属性：使用正则表达式指定输入值必须匹配的模式。

<input type="text" name="phone" pattern="[0-9]{11}" placeholder="请输入 11 位手机号码">

min 和 max 属性：适用于 type="number"、type="date" 等类型的输入框，设置输入值的最小值和最大值。

<input type="number" name="age" min="18" max="100">

minlength 和 maxlength 属性：用于限制输入文本的最小和最大长度。

<input type="text" name="password" minlength="6" maxlength="20">