当前位置：首页 > news >正文

【一文学会 HTML5】

news 来源：原创 2025/8/26 3:19:51

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">

目录

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

基本语法

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

段落标签（`<p>`）

换行标签（`<br>`）

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

注释（``）

`href` 属性

`target` 属性

`title` 属性

`rel` 属性

`download` 属性

`<audio>` 元素

`<video>` 元素

头部信息（`<head>`）

主体内容（`<body>`）

`src`

`width` 和 `height`

`frameborder`

`allowfullscreen`

`sandbox`

`<input>` 元素

`<textarea>` 元素

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

`<datalist>` 元素