【一文学会 HTML】
目录
- 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>这是一个小于号：<，这是一个大于号：>。</p>
<p>这是版权符号：© 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">