Article

HTML 文档

更新于：2026-07-08

一、HTML基础概念

HTML定义与作用

HTML是什么（HyperText Markup Language）

HyperText（超文本）：指可以包含链接（Link）的文本，允许用户从一个页面跳转到另一个页面，打破线性阅读模式。
Markup（标记）：使用标签（Tags）对内容进行标注，告诉浏览器如何解释和展示信息。
Language（语言）：是一种由预定义标签组成的标记语言，并非编程语言（无逻辑控制如if/else、循环等）。

HTML在Web开发中的角色

核心职责：定义内容结构与语义
作为Web内容的基础载体
支持多媒体与交互入口
提升可访问性（Accessibility）与SEO

HTML与CSS、JavaScript的关系

技术	中文名称	主要职责	类比
HTML	超文本标记语言	结构（Structure）	房屋的梁柱与墙体搭建网页内容骨架定义”有什么”
CSS	层叠样式表	表现（Presentation）	房屋的装修与装饰美化页面外观控制颜色、字体、布局、动画
JavaScript	脚本语言	行为（Behavior）	房屋的电器与自动化系统实现动态交互响应用户操作（点击、滚动等）

HTML、CSS、JavaScript的最小示例：

<!--HTML页面-->
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>测试按钮</title>
    <link rel="stylesheet" href="css/style.css" >
</head>
<body>
    <button id="loginBtn">Send</button>
    <script src="js/main.js"></script>
</body>

/* CSS代码：css/style.css */
#loginBtn{
    background-color: brown;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#loginBtn:hover{
    background-color: lightcoral;
}

// JavaScript脚本：js/main.js
document
  .getElementById("loginBtn")
  .addEventListener("click", function(){
    alert("Hello");
  })

HTML文档结构

名称	语法	作用说明	使用示例	注意事项
文档类型声明	`<!DOCTYPE html>`	告诉浏览器这是一个HTML5文档，避免进入”怪异模式”（Quirks Mode），确保按标准模式渲染。	`<!DOCTYPE html>`	必须放在文档最顶部，前面不能有任何内容（包括空格和注释）。大小写不敏感，但推荐小写。
根元素	`<html> ... </html>`	所有其他HTML元素的容器，是整个文档的根节点。`lang` 属性用于指定页面语言，有助于SEO和可访问性。	`<html lang="zh-CN"> ... </html>`	`lang="zh-CN"` 表示中文（简体）。整个文档只能有一个 `<html>` 标签。应包裹 `<head>` 和 `<body>`。
头部信息区	`<head> ... </head>`	包含页面的元数据（metadata），这些内容不会直接显示在页面上，但对浏览器、搜索引擎和用户设备至关重要。	`<head> ... </head>`	放置 `<title>`、`<meta>`、`<link>`、`<style>`、`<script>`（通常放`<body>`底部）等。不应包含可见内容（如 `<h1>`、`<p>`）。
页面标题	`<title> ... </title>`	定义网页在浏览器标签页、收藏夹中显示的标题，也是SEO的关键因素。	`<title>我的第一个网页</title>`	每个页面应有唯一且描述性强的标题。长度建议控制在50-60字符以内。
字符编码	`<meta charset="UTF-8">`	声明文档使用的字符编码为UTF-8，支持全球大多数字符（包括中文），防止乱码。	`<meta charset="UTF-8">`	应放在 `<head>` 的前几行，越早越好。 UTF-8 是现代Web的标准选择。
视口设置	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`	控制移动设备上的布局视口，实现响应式设计的基础。	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`	`width=device-width`：视口宽度等于设备屏幕宽度。 `initial-scale=1.0`：初始缩放比例为1。对移动端适配至关重要。
外部资源链接	`<link rel="..." href="...">`	引入外部资源，主要是CSS样式表。	见下方示例	`rel="stylesheet"` 表示链接的是样式表。路径可以是相对路径或绝对路径。
内联样式	`<style> ... </style>`	在HTML内部定义CSS样式，适用于少量或特定页面的样式。	`<style> body { font-family: Arial; } </style>`	不利于维护，推荐将样式写在外部CSS文件中。可用于快速原型或动态生成样式。
头部脚本	`<script> ... </script>`	在`<body>`底部引入JavaScript。	`<script src="js/analytics.js"></script>`	通常用于加载不依赖DOM的脚本（如统计代码）。一般推荐将 `<script>` 放在 `</body>` 底部，避免阻塞。
主体内容区	`<body> ... </body>`	包含所有在网页上可见的内容，如文本、图片、链接、按钮、表单等。用户看到和交互的一切都在此区域。	见下方示例	所有可见内容必须放在 `<body>` 内。结构应清晰，使用语义化标签。是JavaScript操作DOM的主要目标区域。

外部资源链接示例：

<!-- 引入CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- 图标 -->
<link rel="icon" href="favicon.ico">

主体内容区示例：

<body>
  <h1>欢迎来到我的网站</h1>
  <p>这是第一段文字。</p>
</body>

一个完整的标准HTML5模板示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标准HTML5页面</title>
    
    <!-- 外部CSS样式表 -->
    <link rel="stylesheet" href="css/style.css">
    
    <!-- 可选：内联样式 -->
    <style>
        .highlight { background-color: yellow; }
    </style>
</head>
<body>
    <!-- 可见内容 -->
    <h1 class="highlight">Hello World!</h1>
    <p>这是一个标准的HTML5文档结构。</p>
    <!-- 推荐：JS脚本放在body底部 -->
    <script src="js/script.js"></script>
</body>
</html>

教学重点与常见错误提醒

问题	正确做法	错误示例
忘记 DOCTYPE	第一行必须写 `<!DOCTYPE html>`	直接从 `<html>` 开始
字符编码缺失	`<meta charset="UTF-8">` 放在 `<head>` 顶部	没有该标签，导致中文乱码
忽略视口设置	移动端开发必须添加视口meta标签	页面在手机上显示过小或被缩放
title标签缺失	每个页面都应有 `<title>`	浏览器标签显示”未命名”
JS阻塞渲染	将 `<script>` 放在 `</body>` 前	在 `<head>` 加载大型JS，导致页面白屏

二、常用HTML标签与语义化

文本与段落标签

标签名称	语法	作用说明	使用示例	注意事项与最佳实践
一级标题	`<h1>内容</h1>`	定义最高级别的标题，通常用于页面主标题。一个页面建议只使用一个 `<h1>`。	`<h1>网页设计入门指南</h1>`	遵循从 `<h1>` 到 `<h6>` 的逻辑层级，不要跳级使用。 `<h1>` 对SEO至关重要，应包含关键词。
二级标题	`<h2>内容</h2>`	次级标题，用于划分大章节。	`<h2>HTML基础结构</h2>`	可在一个页面中使用多个 `<h2>`。应作为 `<h1>` 的子级内容。
三级标题	`<h3>内容</h3>`	三级标题，用于细分 `<h2>` 下的内容。	`<h3>文档类型声明</h3>`	继续向下构建内容层级。保持标题层级的连贯性。
四级标题	`<h4>内容</h4>`	四级标题，用于更细粒度的内容划分。	`<h4>字符编码设置</h4>`	层级越低，重要性越低。避免过度嵌套。
五级标题	`<h5>内容</h5>`	五级标题，较少使用，用于特殊细分。	`<h5>注意事项</h5>`	实际项目中使用频率较低。
六级标题	`<h6>内容</h6>`	最低级别的标题。	`<h6>版权信息</h6>`	几乎不使用，可用CSS实现类似效果。
段落	`<p>段落内容</p>`	定义一个文本段落，浏览器会自动在段落前后添加空白（外边距）。	`<p>这是一段介绍性的文字。</p>`	不要用多个 `<p>` 标签来制造垂直间距，应使用CSS。块级元素，独占一行。
强调（语义化粗体）	`<strong>重要内容</strong>`	表示重要性强调，浏览器通常显示为粗体。具有语义意义，屏幕阅读器会加重语气。	`<p>请<strong>立即保存</strong>你的工作。</p>`	优先使用 `<strong>` 而非 `<b>`，因为它是语义化的。 `<b>` 仅表示视觉加粗，无语义。
斜体强调（语义化）	`<em>需要强调</em>`	表示强调或重点，浏览器通常显示为斜体。具有语义，影响可访问性。	`<p>她说：<em>我真的很喜欢这个设计</em>。</p>`	优先使用 `<em>` 而非 `<i>`。 `<i>` 仅用于斜体展示（如物种名、外来词），无强调语义。
高亮标记	`<mark>高亮文本</mark>`	表示需要被突出显示或标记的文本，常用于搜索结果中的关键词高亮。	`<p>在文档中找到 <mark>HTML</mark> 相关内容。</p>`	默认背景色为黄色（可通过CSS修改）。具有明确的语义”标记”。
小号字体	`<small>辅助信息</small>`	表示旁注、版权信息、法律文本等次要内容，字体较小。	`<small>© 2025 版权所有</small>`	语义上表示”次要”，不仅仅是字体大小。常用于 `<footer>` 中。
删除线	`<del>被删除的内容</del>`	表示已被删除的文本，通常显示为带删除线。可用于显示修订记录。	`<p>原价<del>999元</del> 现价299元</p>`	语义为”已删除”，区别于 `<s>`（过时内容）。适合价格变动、内容修订场景。
下划线（插入）	`<ins>新插入的内容</ins>`	表示新添加的文本，通常显示为下划线。常与 `<del>` 配合使用展示修改。	`<p><del>旧内容</del><ins>新内容</ins></p>`	语义为”已插入”，区别于 `<u>`（纯下划线装饰）。提升可访问性，屏幕阅读器可识别。
下标	`<sub>下标内容</sub>`	将文本显示为下标，常用于化学式、数学公式。	`H<sub>2</sub>O → H₂O`	仅改变视觉位置，不影响语义权重。如：CO₂、xₙ
上标	`<sup>上标内容</sup>`	将文本显示为上标，常用于脚注、数学指数、版权符号。	`E = mc<sup>2</sup> → E = mc²` `第3<sup>rd</sup>章`	如：aⁿ、®、™
换行符	`<br>`	在文本中插入一个强制换行，不产生新段落（无额外空白）。是自闭合标签。	`<p>第一行<br>第二行<br>第三行</p>`	仅用于诗歌、地址等需要精确换行的场景。不要用 `<br>` 来制造段落间距，应使用 `<p>` 或CSS。
水平分割线	`<hr>`	插入一条水平线，表示主题或内容的分隔。是自闭合标签，具有语义（主题变化）。	`<p>第一部分内容...</p> <hr> <p>第二部分内容...</p>`	是语义化分隔符，不是装饰线。外观可通过CSS完全定制（颜色、粗细、样式）。区别于用CSS边框模拟的线条。

核心要点总结

语义化优先：
- 使用 <strong> 和 <em> 代替 <b> 和 <i>。
- 使用 <del> 和 <ins> 代替纯样式的删除线/下划线。
- 让标签传达内容的含义，而不仅仅是外观。
标题层级清晰：
- 一个页面一个 <h1>。
- 按 <h1> → <h2> → <h3>… 的顺序使用，不可跳跃。
合理使用 <br> 和 <hr>：
- <br> 用于行内换行（如诗、地址）。
- <hr> 用于主题分隔，而非单纯画线。
避免滥用：
- 不要用 <p><br><br></p> 来制造空行，使用CSS的 margin。
- 不要为了样式而使用标签，样式交给CSS。

链接与锚点

链接类型	语法	作用说明	使用示例	注意事项与最佳实践
超链接（通用）	`<a href="URL">链接文本</a>`	创建一个可点击的超链接，`href` 属性指定目标地址。是实现页面跳转的核心标签。	`<a href="https://www.example.com">访问示例网站</a>`	`href` 是必需属性。链接文本应具有描述性，避免使用”点击这里”等模糊文字。块级或内联元素均可包裹。
href 属性	`href="目标地址"`	指定链接的目标资源位置。可以是绝对URL、相对路径、锚点ID、特殊协议等。	见下方示例	绝对URL：以 `http://` 或 `https://` 开头，指向外部网站。相对路径：相对于当前HTML文件的位置，用于站内页面跳转。锚点：以 `#` 开头，后跟目标元素的 `id`。
target 属性	`target="_blank"` `target="_self"` `target="_parent"` `target="_top"`	定义链接在何处打开目标文档。	见下方示例	`target="_blank"` 最常用，但必须配合 `rel="noopener"` 使用，以防安全漏洞。 `_self` 是默认行为，通常无需显式写出。 `_parent` 和 `_top` 用于框架集（frameset），现已少用。
rel 属性	`rel="关系类型"`	定义当前页面与目标页面之间的关系，影响SEO、安全性和浏览器行为。	见下方示例	`rel="noopener"`：当使用 `target="_blank"` 时必须添加，防止新页面通过 `window.opener` 访问原页面，提升安全性和性能。 `rel="noreferrer"`：比 `noopener` 更严格，还会阻止HTTP Referer头发送。 `rel="nofollow"`：告诉搜索引擎不要追踪此链接，不传递”权重”，常用于用户生成内容或广告链接。
内部链接（锚点跳转）	`<a href="#section-id">跳转</a>` `<div id="section-id">目标内容</div>`	实现页面内的快速跳转，常用于长页面的目录导航。	`<a href="#intro">简介</a>`	-
外部链接	`<a href="https://www.external.com" target="_blank" rel="noopener">外部网站</a>`	指向本站点之外的其他网站。	`<a href="https://github.com" target="_blank" rel="noopener">GitHub</a>`	务必使用 `target="_blank" rel="noopener"` 组合。考虑用户体验，可添加图标或文字提示（如”（新窗口）”）。
邮件链接	`<a href="mailto:email@address.com">发送邮件</a>`	点击后调用系统默认邮件客户端，自动填写收件人、主题、正文等。	见下方示例	`mailto:` 协议依赖本地邮件软件（Outlook, Mail等）。参数使用URL编码，多个参数用 `&` 连接。不保证所有用户都能使用，重要联系方式应提供备用方式。
电话链接	`<a href="tel:+8613800138000">拨打 138-0013-8000</a>`	在移动设备上点击可直接拨打电话。	`<a href="tel:+1-555-123-4567">Call Us</a>`	格式：`tel:+[国家代码][号码]`，可加连字符 `-` 提高可读性。仅在移动端有意义，桌面端可能无反应或报错。确保号码正确，错误号码影响用户体验。

href 属性示例：

<!-- 外部网址 -->
<a href="https://google.com">Google</a>
<!-- 相对路径 -->
<a href="about.html">关于我们</a>
<!-- 锚点 -->
<a href="#section1">跳转到第一部分</a>
<!-- 邮件 -->
<a href="mailto:contact@example.com">发送邮件</a>
<!-- 电话 -->
<a href="tel:+8613800138000">拨打电话</a>

target 属性示例：

<!-- 新窗口/标签页 -->
<a href="https://google.com" target="_blank">新窗口打开</a>
<!-- 当前窗口（默认） -->
<a href="page.html" target="_self">当前页打开</a>

rel 属性示例：

<!-- 新窗口链接必备 -->
<a href="https://external-site.com" target="_blank" rel="noopener">外部链接</a>
<!-- 推荐链接（SEO） -->
<a href="https://trusted-site.com" rel="nofollow">不传递权重</a>
<!-- 友情链接 -->
<a href="https://partner.com" rel="friend">合作伙伴</a>

邮件链接示例：

<!-- 基础 -->
<a href="mailto:support@company.com">联系我们</a>
<!-- 高级 -->
<a href="mailto:info@site.com?subject=咨询&body=您好，我想了解...">咨询</a>

核心要点总结

安全第一：
- 所有 target="_blank" 的外部链接必须加上 rel="noopener"。
- 公开的邮箱地址使用 mailto: 可能被爬虫抓取，考虑用图片或JavaScript混淆。
语义清晰：
- 链接文本应明确告知用户点击后的结果（如”下载PDF手册”优于”点击下载”）。
- 邮件和电话链接应有视觉提示（如📧、📞图标）。
锚点跳转实用技巧：
- 为标题（<h2>, <h3>）设置 id，可直接作为锚点目标。
- 使用 scroll-behavior: smooth 实现平滑滚动，提升用户体验。
兼容性考虑：
- mailto: 和 tel: 在桌面浏览器中可能无法正常工作，需有备选方案。
- 测试不同设备上的电话链接效果。

图像与多媒体

标签/概念	语法	作用说明	使用示例	注意事项与最佳实践
图像标签 `<img>`	`<img src="图片路径" alt="替代文本">`	在网页中嵌入图像。是自闭合标签（无结束标签）。	`<img src="images/logo.png" alt="公司Logo">`	`src` 和 `alt` 是必需属性。图像路径可以是相对路径或绝对URL。默认为内联元素。
src 属性	`src="图片URL"`	指定图像文件的源地址（Source）。	见下方示例	确保路径正确，文件存在。使用相对路径便于项目迁移。
alt 属性	`alt="描述性文本"`	提供图像的替代文本，在图像无法加载、屏幕阅读器读取或SEO时使用。	`<img src="chart.png" alt="2025年销售额增长趋势图">`	必须填写，不可为空（除非是纯装饰图，可写 `alt=""`）。内容应简洁描述图像信息或功能。对可访问性（Accessibility）至关重要。
width 和 height 属性	`width="像素值" height="像素值"`	设置图像的显示宽度和高度（单位：像素）。有助于浏览器提前分配空间，防止布局偏移（CLS）。	`<img src="avatar.jpg" alt="用户头像" width="100" height="100">`	保持宽高比，避免图像拉伸变形。推荐在HTML中设置，或使用CSS `aspect-ratio` 防止布局抖动。值为纯数字（无单位）。
loading 属性	`loading="lazy"` `loading="eager"`	控制图像的加载策略。	见下方示例	`lazy`：延迟加载，当图像进入视口附近时才加载，提升首屏性能。 `eager`：立即加载（默认行为）。对非首屏大图强烈推荐 `loading="lazy"`。
图像格式：JPEG	`.jpg` 或 `.jpeg`	有损压缩格式，文件小，适合照片、复杂色彩图像。不支持透明度。	`src="photo.jpg"`	调整压缩质量平衡文件大小与画质。不适合有文字或线条的图像（会模糊）。
图像格式：PNG	`.png`	无损压缩格式，支持透明背景（Alpha通道），适合Logo、图标、带透明效果的图像。文件通常比JPEG大。	`src="logo.png"`	PNG-8：颜色少，文件小（适合简单图形）。 PNG-24：颜色丰富，支持半透明。优先用于需要透明度的场景。
图像格式：WebP	`.webp`	谷歌开发的现代格式，支持有损/无损压缩和透明度，相同质量下文件比JPEG/PNG小25-35%。	`src="image.webp"`	现代浏览器广泛支持，是性能优化首选。需提供JPEG/PNG后备方案（通过 `<picture>` 标签）。使用工具（如Squoosh）转换格式。
图像格式：SVG	`.svg`	矢量图形格式，基于XML描述，无限缩放不失真，文件小，适合图标、Logo、简单图形。可直接内联或用CSS/JS控制。	`<img src="icon.svg" alt="图标">` 或内联：`<svg>...</svg>`	用文本编辑器即可编辑。适合响应式设计。复杂图形可能导致文件过大。
语义化图像 `<figure>`	`<figure>` `<img src="..." alt="...">` `<figcaption>说明文字</figcaption>` `</figure>`	将图像（或代码、图表等）及其标题/说明组合成一个独立的语义单元。	见下方示例	`<figure>` 是块级元素。 `<figcaption>` 是可选的，用于提供标题，必须是 `<figure>` 的第一个或最后一个子元素。提升文档结构清晰度和可访问性。
音频 `<audio>`	`<audio controls>` `<source src="audio.mp3" type="audio/mpeg">` 您的浏览器不支持 audio 标签。 `</audio>`	在网页中嵌入音频播放器。支持多种格式后备。	见下方示例	`controls` 属性显示播放控件。推荐提供多种格式（MP3, OGG）以兼容不同浏览器。避免滥用 `autoplay`，可能被浏览器阻止。
视频 `<video>`	`<video controls width="400">` `<source src="movie.mp4" type="video/mp4">` 您的浏览器不支持 video 标签。 `</video>`	在网页中嵌入视频播放器。支持多种格式后备。	见下方示例	`controls` 显示播放控件。 `poster` 属性指定视频封面图。推荐提供MP4 (H.264) 和 WebM 格式后备。考虑使用流媒体（如HLS/DASH）处理大视频。
多媒体常用属性	`controls` `autoplay` `loop` `muted`	控制音视频播放行为。	见上例	`controls`：显示播放/暂停、音量等控件。 `autoplay`：自动播放。现代浏览器通常要求 `muted` 才能自动播放。 `loop`：循环播放。 `muted`：静音播放。`autoplay muted` 是实现自动播放的可靠方式。

src 属性示例：

<!-- 相对路径 -->
<img src="photos/sunset.jpg">
<!-- 绝对URL -->
<img src="https://example.com/images/banner.webp">

loading 属性示例：

<!-- 懒加载（推荐） -->
<img src="large-image.jpg" alt="大图" loading="lazy">
<!-- 立即加载 -->
<img src="logo.png" alt="Logo" loading="eager">

语义化图像示例：

<figure>
  <img src="chart.png" alt="销售数据">
  <figcaption>图1：2025年第一季度数据</figcaption>
</figure>

音频示例：

<audio controls autoplay loop>
  <source src="bg.mp3" type="audio/mpeg">
  <source src="bg.ogg" type="audio/ogg">
  您的浏览器不支持 audio 元素。
</audio>

视频示例：

<video width="640" height="360" controls poster="preview.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持 video 标签。
</video>

核心要点总结

图像三要素：src, alt, loading
- src 定位资源
- alt 保障可访问性
- loading="lazy" 优化性能
格式选择原则：
- 照片/复杂图 → JPEG
- 透明图/Logo → PNG
- 现代项目优先 → WebP（带后备）
- 图标/矢量图 → SVG
语义化优先：
- 带说明的图像使用 <figure> + <figcaption>，提升结构语义。
多媒体用户体验：
- 音视频必须提供 controls，让用户控制播放。
- 慎用 autoplay，避免干扰用户，如需使用务必 muted。
- 提供多种格式后备，确保跨浏览器兼容。

列表

列表类型	标签名称	语法	作用说明	使用示例	注意事项与最佳实践
无序列表	`<ul>`	`<ul>` `<li>项目1</li>` `<li>项目2</li>` `</ul>`	创建一个无顺序要求的项目列表，通常以圆点（•）作为项目符号。用于表示并列、集合类信息。	`<ul>` `<li>苹果</li>` `<li>香蕉</li>` `<li>橙子</li>` `</ul>`	`<ul>` 内部只能直接包含 `<li>` 元素。项目顺序不重要，如购物清单、功能特性列表。项目符号样式可通过CSS `list-style-type` 修改（如 `disc`, `circle`, `square`）。
列表项	`<li>`	`<li>列表项内容</li>`	定义列表中的单个项目，是 `<ul>` 和 `<ol>` 的子元素。	见上例	必须嵌套在 `<ul>` 或 `<ol>` 内部。可以包含文本、链接、其他HTML元素（甚至嵌套列表）。是块级元素。
有序列表	`<ol>`	`<ol>` `<li>第一步</li>` `<li>第二步</li>` `</ol>`	创建一个有顺序要求的项目列表，通常以数字（1, 2, 3…）或字母编号。用于表示步骤、排名等。	`<ol>` `<li>打开电脑</li>` `<li>启动浏览器</li>` `<li>访问网站</li>` `</ol>`	项目顺序具有逻辑或时间上的先后关系。编号样式可通过CSS `list-style-type` 修改（如 `decimal`, `lower-alpha`, `upper-roman`）。可通过 `start="5"` 属性指定起始编号，`reversed` 属性倒序排列。
定义列表	`<dl>`	`<dl>` `<dt>术语1</dt>` `<dd>解释1</dd>` `<dt>术语2</dt>` `<dd>解释2</dd>` `</dl>`	创建一个术语与定义的关联列表，用于词汇表、配置项说明、问答等场景。	`<dl>` `<dt>HTML</dt>` `<dd>超文本标记语言</dd>` `<dt>CSS</dt>` `<dd>层叠样式表</dd>` `</dl>`	结构更复杂，用于成对出现的”名词-解释”内容。不是简单的项目列表，而是键值对的语义化表达。一个 `<dt>` 可对应多个 `<dd>`，或多个 `<dt>` 对应一个 `<dd>`。
定义术语	`<dt>`	`<dt>术语名称</dt>`	定义列表中的术语、名称或关键词。	见上例	必须作为 `<dl>` 的直接子元素。通常显示为加粗或左对齐。不要添加项目符号（可通过CSS控制）。
定义描述	`<dd>`	`<dd>描述内容</dd>`	提供 `<dt>` 术语的解释、定义或描述。	见上例	必须紧跟在 `<dt>` 之后（或一组 `<dt>` 之后）。通常有缩进，与 `<dt>` 形成视觉分组。可包含段落、列表等复杂内容。

核心要点总结

语义决定选择：
- 并列项 → <ul>（如菜单、功能列表）
- 有序步骤 → <ol>（如教程步骤、排行榜）
- 术语解释 → <dl>（如词典、产品参数）
结构必须正确：
- <li> 只能出现在 <ul> 或 <ol> 内。
- <dt> 和 <dd> 只能出现在 <dl> 内。
- <dt> 后面应紧跟 <dd>。
避免常见错误：
- ❌ 不要用多个 <p> + • 字符模拟无序列表。
- ❌ 不要用 <br> 分隔列表项。
- ❌ 不要在 <dl> 中使用 <li>。
可访问性优势：
- 屏幕阅读器能识别列表结构，用户可通过快捷键快速导航列表。
- <dl> 特别有助于视障用户理解术语与定义的对应关系。
样式由CSS控制：
- 默认样式（如项目符号、编号、缩进）均可通过CSS完全自定义。
- 例如：list-style: none; 去除项目符号，创建自定义导航菜单。

表格

标签/属性	语法	作用说明	使用示例	注意事项与最佳实践
表格容器	`<table> ... </table>`	定义一个表格的根元素，包裹所有表格内容。	`<table>...</table>`	仅用于展示数据，不可用于页面布局（应使用CSS Flex/Grid）。可添加 `border` 属性（不推荐，样式由CSS控制）。应配合 `<caption>` 提供标题。
表格标题	`<caption>表格标题</caption>`	为表格提供描述性标题，通常显示在表格上方，是表格的一部分。	`<table> <caption>2025年第一季度销售数据</caption> ... </table>`	强烈推荐使用，提升可访问性和语义。必须作为 `<table>` 的第一个子元素。屏幕阅读器会优先朗读标题。
表头区域	`<thead> ... </thead>`	定义表格的头部区域，通常包含列标题（`<th>`）。该区域在打印时可能每页重复。	见下方示例	包含一行或多行描述列信息的 `<tr>`。视觉上常加粗或背景色区分。不是必需的，但强烈推荐用于复杂表格。
表主体区域	`<tbody> ... </tbody>`	定义表格的主体数据区域，包含大部分数据行。	见下方示例	可省略，浏览器会自动创建。但显式使用有助于：① CSS样式定位 ② JavaScript操作 ③ 打印分页控制。
表尾区域	`<tfoot> ... </tfoot>`	定义表格的尾部区域，通常包含汇总行（如总计、平均值）。必须放在 `<tbody>` 前。	见下方示例	即使写在HTML代码的后面，浏览器也会将其渲染在表格底部。常用于放置统计信息。在长表格分页时，`<tfoot>` 可能出现在最后一页。
表格行	`<tr> ... </tr>`	定义表格中的一行（table row）。是 `<thead>`、`<tbody>`、`<tfoot>` 的子元素。	`<tr> <td>数据1</td> <td>数据2</td> </tr>`	每个 `<tr>` 代表表格中的一行。行内可包含 `<th>`（表头单元格）或 `<td>`（标准单元格）。
表头单元格	`<th>内容</th>`	定义一个表头单元格，通常用于第一行或第一列，表示该行/列的数据类别。默认加粗居中。	`<th>产品名称</th>`	语义上表示”这是一个标题”。应配合 `scope` 属性使用以明确关联范围。
标准单元格	`<td>内容</td>`	定义一个标准数据单元格，包含具体的表格数据。	`<td>笔记本电脑</td>`	表格中最常见的单元格类型。默认左对齐。
跨列属性	`colspan="数字"`	使一个单元格横向跨越多个列。	`<tr> <th colspan="2">季度汇总</th> </tr>`	常用于合并表头或创建全宽的汇总行。跨越后，后续行的单元格数量需相应减少，保持总列数一致。
跨行属性	`rowspan="数字"`	使一个单元格纵向跨越多个行。	`<tr> <td rowspan="2">长期项目</td> <td>Q1进度</td> </tr>` `<tr> <td>Q2进度</td> </tr>`	适用于需要垂直合并的场景（如分类名称）。需仔细规划结构，避免错乱。
作用域属性	`scope="row"` `scope="col"` `scope="rowgroup"` `scope="colgroup"`	明确 `<th>` 单元格所关联的数据范围，极大提升屏幕阅读器用户的体验。	`<th scope="col">销售额</th>` `<th scope="row">张三</th>`	`scope="col"`：此表头关联其下方整列数据。 `scope="row"`：此表头关联其右侧整行数据。对复杂表格至关重要，是可访问性的关键。

表格结构示例：

<thead>
  <tr>
    <th>姓名</th>
    <th>部门</th>
    <th>薪资</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>张三</td>
    <td>技术部</td>
    <td>15000</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>市场部</td>
    <td>12000</td>
  </tr>
</tbody>

<tfoot>
  <tr>
    <td colspan="2">总计</td>
    <td>27000</td>
  </tr>
</tfoot>

核心要点总结

语义化结构：
- 使用 <thead>、<tbody>、<tfoot> 显式划分表格逻辑区域。
- 使用 <caption> 提供表格标题。
可访问性为王：
- 必须使用 scope 属性在 <th> 上，帮助屏幕阅读器理解数据关系。
- 避免使用纯视觉手段（如颜色）传达信息，确保色盲用户也能理解。
正确使用跨列/跨行：
- colspan 和 rowspan 是强大的工具，但过度使用会使表格难以理解和维护。
- 设计时先画草图，确保结构清晰。
数据，而非布局：
- 永远不要用表格做页面布局（如两栏布局）。这是过时且不灵活的做法。
- 使用CSS Flexbox或Grid进行布局，表格仅用于展示二维数据集（如成绩表、价格表、日程安排）。
响应式挑战：
- 复杂表格在小屏幕上可能难以阅读。
- 解决方案：CSS媒体查询隐藏次要列、水平滚动、转换为卡片布局等。

表单

标签/属性	语法	作用说明	使用示例	注意事项与最佳实践
表单容器	`<form> ... </form>`	定义一个表单区域，包裹所有表单控件。用户提交时，其中的数据会被发送到服务器。	`<form action="/submit" method="post"> ... <button type="submit">提交</button> </form>`	必须包含至少一个提交按钮（`type="submit"`）。可嵌套，但不能相互交叉。
action 属性	`action="URL"`	指定表单数据提交的目标URL（服务器端处理程序）。	`action="/api/register"`	可以是相对路径或绝对URL。若为空或省略，表单提交给当前页面URL。
method 属性	`method="get"` `method="post"`	定义发送表单数据的HTTP方法。	见下方示例	`get`：数据附加在URL后（`?key=value`），有长度限制，不安全，可书签。 `post`：数据在请求体中，更安全，无长度限制，不可书签。推荐用于敏感或大量数据。
enctype 属性	`enctype="值"`	定义表单数据在发送前的编码类型，影响服务器如何解析数据。	见下方示例	`application/x-www-form-urlencoded`：默认值，普通文本数据。 `multipart/form-data`：上传文件时必须设置此值。 `text/plain`：纯文本，很少用。
autocomplete 属性	`autocomplete="on"` `autocomplete="off"` `autocomplete="email"` `autocomplete="new-password"`	控制浏览器是否对表单或特定字段启用自动填充功能。	见下方示例	提升用户体验，减少输入。对敏感信息（如一次性验证码）可设为 `off`。使用具体值（如 `email`, `tel`, `address-line1`）比 `on/off` 更精确。
输入框 `<input>`	`<input type="类型" ...>`	最通用的表单控件，通过 `type` 属性定义不同输入类型。	见下文具体类型	是自闭合标签。必须有 `name` 属性才能提交数据。大部分类型支持 `placeholder`, `required` 等属性。
├─ 文本	`type="text"`	单行文本输入。	`<input type="text" name="username" placeholder="请输入用户名">`	默认类型，`type="text"` 可省略。
├─ 密码	`type="password"`	输入密码，字符显示为圆点或星号。	`<input type="password" name="pwd" required>`	传输必须使用HTTPS，否则仍不安全。避免提供”显示密码”功能除非必要。
├─ 邮箱	`type="email"`	输入邮箱地址，浏览器会进行基本格式验证。	`<input type="email" name="email" required>`	提交时自动检查是否包含 `@` 和有效域名结构。仍需服务器端验证。
├─ 数字	`type="number"`	输入数字，通常带上下调节箭头。	`<input type="number" name="age" min="18" max="100">`	支持 `min`, `max`, `step` 属性控制范围。
├─ 日期	`type="date"`	提供日期选择器（年-月-日）。	`<input type="date" name="birthday">`	浏览器兼容性良好，用户体验优于手动输入。值格式为 `YYYY-MM-DD`。
├─ 复选框	`type="checkbox"`	多选控件，可选择多个选项。	`<input type="checkbox" id="news" name="interest" value="news">` `<label for="news">新闻</label>`	相同 `name` 的复选框构成一组。必须设置 `value`，否则提交值为 `on`。可通过 `checked` 设置默认选中。
├─ 单选按钮	`type="radio"`	单选控件，同一组内只能选一个。	`<input type="radio" id="male" name="gender" value="male">` `<label for="male">男</label>`	同一组单选按钮必须有相同的 `name` 属性。通过 `id` 与 `<label>` 关联。
├─ 文件	`type="file"`	上传文件。	`<input type="file" name="avatar" accept="image/*">`	必须配合 `enctype="multipart/form-data"`。 `accept` 属性可限制文件类型（如 `image/*`, `.pdf`）。
├─ 隐藏域	`type="hidden"`	包含用户不可见但需要提交的数据。	`<input type="hidden" name="token" value="abc123">`	用于传递CSRF Token、用户ID等后台需要但用户无需修改的信息。
多行文本框	`<textarea>默认内容</textarea>`	多行文本输入，适合长文本（如评论、描述）。	`<textarea name="message" rows="5" cols="30" placeholder="请输入留言..."></textarea>`	`rows` 和 `cols` 设置初始大小，但优先使用CSS控制尺寸。默认可拖拽调整大小（可通过CSS `resize` 控制）。
下拉选择框	`<select name="..."> <option value="val1">选项1</option> <option value="val2" selected>选项2</option> </select>`	创建下拉列表供用户选择。	见下方示例	`name` 在 `<select>` 上，而非 `<option>`。 `selected` 属性设置默认选项。 `multiple` 属性允许多选（配合Ctrl/Shift）。
选项	`<option value="值">显示文本</option>`	定义 `<select>` 中的一个可选项。	见上例	`value` 是提交的值，显示文本是用户看到的。 `value` 可省略，此时值等于显示文本。
按钮	`<button type="类型">按钮文本</button>`	创建可点击的按钮。`type` 决定行为。	见下方示例	强烈建议显式指定 `type`。 `type="submit"`：提交表单（`<input type="submit">` 的现代替代）。 `type="button"`：无默认行为，需JS绑定事件。
name 属性	`name="字段名"`	定义表单控件的名称，是数据提交时的键（Key）。	`<input type="text" name="full_name">`	至关重要！没有 `name` 的控件数据不会被提交。服务器通过 `name` 获取值（如 `$_POST['full_name']`）。
value 属性	`value="值"`	定义表单控件的初始值或提交值。	`<input type="text" value="默认文本">` `<input type="checkbox" value="coding" checked>`	对于 `<input>`、`<option>`、`<button>` 等非常关键。用户输入会覆盖初始 `value`。
placeholder 属性	`placeholder="提示文字"`	提供输入框内的浅色提示文本，在用户输入后消失。	`<input type="text" placeholder="请输入搜索关键词">`	不是替代 `<label>` 的理由！它只是辅助提示。内容不应是必填说明或重要指令。
required 属性	`required`	标记该字段为必填项。提交时若为空，浏览器会阻止提交并提示。	`<input type="text" name="username" required>`	HTML5内置验证，无需JS即可实现基础必填校验。应结合视觉提示（如红色星号*）。
disabled 属性	`disabled`	使控件禁用（变灰，不可交互），其值不会被提交。	`<input type="text" disabled value="不可编辑">`	用于临时锁定控件。与 `readonly` 的关键区别在于不提交数据。
readonly 属性	`readonly`	使控件只读（内容可见但不可编辑），其值会被提交。	`<input type="text" readonly value="订单号：12345">`	适用于显示计算结果或系统生成的ID。数据会随表单一起提交。
checked 属性	`checked`	用于 `<input type="checkbox">` 或 `radio`，表示默认选中。	`<input type="checkbox" checked>`	布尔属性，存在即生效，可写 `checked="checked"` 或简写 `checked`。
selected 属性	`selected`	用于 `<option>`，表示该选项为 `<select>` 的默认选中项。	`<option value="sh" selected>上海</option>`	布尔属性，存在即生效。
表单分组	`<fieldset> ... </fieldset>`	将一组相关的表单控件分组，增强语义和可访问性。常配合 `<legend>` 使用。	见下方示例	视觉上通常带边框。极大提升复杂表单的可读性和屏幕阅读器体验。
分组标题	`<legend>标题</legend>`	为 `<fieldset>` 提供分组标题，描述该组控件的用途。	见上例	必须作为 `<fieldset>` 的第一个子元素。类似于表格的 `<caption>`。
标签 `<label>`	`<label for="id">文本</label>` `<input id="id" ...>`	为表单控件定义标签。点击标签文本可聚焦/激活对应控件，提升可用性和可访问性。	`<label for="email">邮箱：</label> <input type="email" id="email" name="email">`	必须使用 `for` 属性连接到控件的 `id`。或将控件直接嵌套在 `<label>` 内部：`<label><input type="checkbox"> 我同意条款</label>` 大幅提升点击区域和辅助技术体验。
HTML5验证	`required`, `pattern`, `min`, `max`, `minlength`, `maxlength` 等	利用HTML5属性实现客户端基础验证，无需JavaScript即可提供即时反馈。	`<input type="text" minlength="6" maxlength="12" pattern="[A-Za-z]+" required>` `<input type="number" min="1" max="100">`	便捷但不安全！仅作用户体验优化，服务器端必须再次验证。 `pattern` 使用正则表达式进行格式校验。浏览器会显示默认错误提示，可通过JS自定义。

method 属性示例：

<!-- 数据在URL中可见 -->
<form method="get">
<!-- 数据在请求体中 -->
<form method="post">

enctype 属性示例：

<!-- 默认，适用于文本 -->
<form enctype="application/x-www-form-urlencoded">
<!-- 上传文件必需 -->
<form enctype="multipart/form-data">

autocomplete 属性示例：

<!-- 整个表单关闭 -->
<form autocomplete="off">
<!-- 邮箱字段开启 -->
<input type="email" autocomplete="email">
<!-- 密码字段（新密码） -->
<input type="password" autocomplete="new-password">

下拉选择框示例：

<select name="city">
  <option value="">请选择城市</option>
  <option value="bj">北京</option>
  <option value="sh">上海</option>
</select>

按钮示例：

<!-- 提交表单（默认） -->
<button type="submit">注册</button>
<!-- 重置表单 -->
<button type="reset">重置</button>
<!-- 自定义操作 -->
<button type="button">点击我</button>

表单分组示例：

<fieldset>
  <legend>个人信息</legend>
  <input type="text" name="name">
  <input type="email" name="email">
</fieldset>

核心要点总结

name 是灵魂：没有 name 的控件，其数据无法提交到服务器。
<label> 不可少：显著提升可用性和可访问性，是专业表单的标志。
语义化分组：复杂表单务必使用 <fieldset> + <legend> 进行逻辑分组。
验证双保险：HTML5验证改善用户体验，但服务器端验证必不可少。
安全传输：包含密码等敏感信息的表单，action URL 必须使用 https://。
文件上传注意：记得设置 enctype="multipart/form-data" 和 method="post"。

三、HTML5 新增语义化标签

页面结构标签

标签名称	语法	作用说明	使用示例	注意事项与最佳实践
页眉	`<header> ... </header>`	定义页面或一个内容区块的头部。通常包含Logo、网站标题、主导航、搜索框等。	`<header>` `<h1>网站名称</h1>` `<nav>...</nav>` `</header>`	可用于整个页面，也可用于 `<article>` 或 `<section>` 内部。一个页面可有多个 `<header>`（如文章页的页面头部和每篇文章的头部）。不要与 `<head>` 标签混淆（`<head>` 在 `<html>` 内，包含元数据）。
页脚	`<footer> ... </footer>`	定义页面或一个内容区块的尾部。通常包含版权信息、联系方式、相关链接、返回顶部按钮等。	`<footer>` `<p>© 2025 公司版权所有</p>` `<a href="#top">回到顶部</a>` `</footer>`	同样可用于整个页面或特定区块（如文章末尾的作者信息）。一个页面可有多个 `<footer>`。内容应与所在区块相关。
导航	`<nav> ... </nav>`	定义页面的主要导航链接区块。如主导航菜单、侧边栏导航、分页链接、面包屑导航等。	`<nav>` `<ul>` `<li>` `<a href="/">首页</a>` `</li>` `<li>` `<a href="/about">关于</a>` `</li>` `</ul>` `</nav>`	不要滥用：仅用于主要的导航链接集合。一个页面可有多个 `<nav>`（如顶部主导航和页脚快速链接）。对屏幕阅读器用户至关重要，可快速跳转到导航区。
主内容	`<main> ... </main>`	定义页面的主要、独特内容。该内容应直接关联当前页面的核心主题，不包含重复元素（如页眉、页脚、全局导航、广告等）。	见下方示例	一个页面有且仅有一个 `<main>`。不能是 `<article>`, `<aside>`, `<footer>`, `<header>` 或 `<nav>` 的子元素。是可访问性的关键区域，屏幕阅读器可直接跳转。
章节	`<section> ... </section>`	定义文档中的一个普通章节或区块。通常包含一个标题（`<h1>-<h6>`）和相关内容。用于组织主题相关的部分。	`<section>` `<h2>产品特性</h2>` `<p>我们的产品具有以下优点...</p>` `</section>` `<section>` `<h2>用户评价</h2>` `<p>用户反馈非常积极...</p>` `</section>`	强调”主题分组”。如果内容可以加上一个标题并独立成块，就适合用 `<section>`。不要仅仅为了样式或JS挂钩而使用，应有语义目的。与 `<div>` 的区别：`<section>` 有明确的语义”这是一个章节”，而 `<div>` 是无语义的通用容器。
文章	`<article> ... </article>`	定义一个独立的、可复用的内容单元。该内容本身具有完整的意义，脱离上下文也能理解。如博客文章、新闻报道、论坛帖子、产品卡片等。	`<article>` `<h2>HTML5新特性发布</h2>` `<p>近日，W3C发布了...</p>` `<footer>作者：张三发布时间：2025-01-01</footer>` `</article>`	内容应是自包含的。可嵌套：一篇博客文章 (`<article>`) 内的评论也可以是 `<article>`。常包含自己的 `<header>`, `<footer>`, `<section>`。适合被聚合、重用或 syndicated（内容分发）。
侧边栏/附属内容	`<aside> ... </aside>`	定义与页面主要内容相关但可分离的内容。通常作为侧边栏，包含广告、相关链接、引用、作者信息、侧边导航等。	见下方示例	内容应与主内容有间接关联，移除后不影响主内容的理解。可出现在 `<main>` 内部（作为侧边栏），也可作为页面级的独立区块。不要用于括号内的注释文本，那是 `<small>` 或 `<cite>` 的职责。

主内容标签示例：

<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <h2>文章标题</h2>
    <p>这是文章的主要内容...</p>
  </main>
  <aside>...</aside>
  <footer>...</footer>
</body>

侧边栏/附属内容示例：

<main>
  <article>...</article>
  <aside>
    <h3>推荐阅读</h3>
    <ul>
      <li><a href="#">相关文章1</a></li>
    </ul>
  </aside>
</main>

核心要点总结

语义化是核心：
- 选择标签不是为了”看起来像什么”，而是”它是什么”。
- 用 <nav> 代替 <div class="nav">，用 <article> 代替 <div class="post">。
可访问性 (Accessibility) 提升：
- 屏幕阅读器能识别这些语义标签，用户可通过快捷键快速导航到 <header>, <nav>, <main>, <footer> 等区域。
- <main> 标签让视障用户能一键跳转到核心内容。
SEO 优化：
- 搜索引擎更易理解页面结构和内容层次，有助于提高排名。
- <article> 标签的内容可能被优先索引或用于富摘要（Rich Snippets）。
代码可维护性：
- 语义化标签让代码更易读、更易维护，团队协作更高效。
- 减少对CSS类名的依赖来表达结构。
避免常见错误：
- ❌ 不要用 <div> 滥用代替所有语义标签。
- ❌ 不要在 <main> 内放置多个互不相关的 <article> 而没有 <section> 或其他容器组织。
- ❌ 不要为了一个图标或小元素就创建一个 <section>。
与CSS的关系：
- 语义化标签不负责样式，默认可能有少许样式（如块级），但布局和视觉效果应由CSS（Flexbox, Grid）实现。
- 语义结构 + CSS样式 = 现代Web开发最佳实践。

其他语义化元素

标签名称	语法	作用说明	使用示例	注意事项与最佳实践
时间	`<time datetime="机器可读时间">可读时间</time>`	定义日期或时间。`datetime` 属性提供机器可读的格式，内容为人类可读格式。	见下方示例	`datetime` 属性是关键，用于搜索引擎、日历应用等。内容（可读时间）可以是相对描述（如”昨天”、“下周”）。提升结构化数据（Schema.org）的兼容性。
高亮/标记	`<mark>被高亮的文本</mark>`	表示一段需要被突出显示或标记的文本，通常用于搜索结果中的关键词、引用中的重点部分。	`<p>搜索结果：<mark>HTML</mark>是一种标记语言...</p>` `<blockquote> <p><mark>知识就是力量</mark>——培根</p> </blockquote>`	默认样式通常是黄色背景（类似荧光笔）。语义上强调”这段文本因某种原因被标记”，不同于 `<strong>`（重要性）或 `<em>`（强调）。避免滥用，仅用于真正需要视觉突出的上下文。
进度条	`<progress value="当前值" max="最大值">...</progress>`	表示一个任务的完成进度（如文件上传、加载过程）。是动态的，值会随时间变化。	见下方示例	必须有 `max` 属性（默认为1）。 `value` 必须在 0 到 `max` 之间。用于实时进度，值由JavaScript动态更新。若进度未知，可省略 `value`，浏览器显示不确定进度动画。
计量条	`<meter value="当前值" min="最小值" max="最大值" low="低阈值" high="高阈值" optimum="最优值">说明文本</meter>`	表示一个已知范围内的标量测量值或分数（如磁盘使用率、投票结果、考试分数）。是静态的，表示某个时刻的测量结果。	见下方示例	`min`, `max`, `value` 定义范围和当前值。 `low`, `high`, `optimum` 用于定义颜色区间（浏览器自动着色）。用于测量值，而非任务进度。`<progress>` 是”正在做”，`<meter>` 是”结果是”。
详情容器	`<details> <summary>标题</summary> 隐藏的详细内容 </details>`	创建一个可展开/折叠的交互式控件。默认折叠，点击 `<summary>` 可展开内容。	`<details>` `<summary>点击查看常见问题</summary>` `<p>Q: 如何重置密码？` `<br>A: 请访问设置页面...</p>` `</details>`	提供原生的”展开/收起”功能，无需JavaScript。 `<summary>` 是必须的，作为标题/触发器。默认样式在不同浏览器中略有差异，可通过CSS定制。
摘要/标题	`<summary>标题文本</summary>`	作为 `<details>` 元素的可见标题或摘要，用户点击它来展开或折叠详细内容。	见上例	必须是 `<details>` 的第一个子元素。可包含文本和内联HTML元素。浏览器通常在其前添加一个三角形指示符。

时间标签示例：

<!-- 日期 -->
<time datetime="2025-09-11">2025年9月11日</time>
<!-- 日期时间 -->
<time datetime="2025-09-11T14:55">今天下午</time>
<!-- 相对时间 -->
<time datetime="PT2H30M">2小时30分钟后</time>

进度条示例：

<!-- 上传进度 -->
<progress value="70" max="100">70%</progress>
<!-- 不确定进度 -->
<progress max="100"></progress>

计量条示例：

<!-- 磁盘使用率 -->
<meter value="80" min="0" max="100" low="30" high="70" optimum="50">80% 已用</meter>
<!-- 投票支持率 -->
<meter value="0.75" max="1.0">75% 支持</meter>

核心要点总结

<time>：机器与人类的桥梁
- 让时间信息对机器（搜索引擎、日历）可解析，同时保持对人类友好。
- 是实现富摘要（Rich Snippets）的基础。
<mark>：上下文高亮
- 语义明确，用于”标记”而非”强调”。
- 在搜索结果页、文档引用中非常实用。
<progress> vs <meter>：动态 vs 静态
- <progress>：任务进度（如”文件上传中：70%”），值会变。
- <meter>：测量结果（如”电池电量：80%”），表示一个静态的测量值。
- 混淆使用会误导用户和辅助技术。
<details> + <summary>：原生交互组件
- 提供开箱即用的”手风琴”或”FAQ”效果。
- 极大提升内容组织性，避免信息过载。
- 完全可访问，键盘用户可操作。
可访问性 (Accessibility) 优势：
- 屏幕阅读器能识别 <time> 的机器可读格式。
- <progress> 和 <meter> 会被朗读为”进度条”和”计量条”，并读出当前值。
- <details> 提供明确的展开/折叠状态。
SEO 与结构化数据：
- 正确使用这些标签有助于生成更丰富的搜索结果（如评分、时间、进度）。

四、HTML属性与全局属性

常用属性

属性名称	语法	作用说明	使用示例	注意事项与最佳实践
ID	`id="唯一标识符"`	定义元素的唯一标识符。在一个页面中，`id` 值必须是唯一的。用于CSS样式、JavaScript操作或页面内锚点跳转。	见下方示例	一个页面内 `id` 值必须唯一，重复使用会导致不可预测的行为。命名应见名知意（如 `mainNav`, `userForm`），避免使用纯数字或保留字。在CSS中用 `#id名` 选择，在JS中用 `getElementById()` 获取。
类 (Class)	`class="类名1 类名2 ..."`	定义元素的一个或多个类别。同一页面中可有多个元素拥有相同的 `class`。是CSS样式和JavaScript操作最常用的连接点。	`<p class="intro highlight">这是简介段落</p>` `<button class="btn btn-primary">提交</button>`	支持空格分隔的多个类名，实现样式组合。是复用和模块化的核心，优于过度使用 `id`。命名推荐使用语义化或BEM等规范（如 `card-header`, `is-active`）。在CSS中用 `.类名` 选择。
行内样式	`style="CSS声明"`	为单个元素直接定义CSS样式。样式优先级最高，会覆盖外部和内部样式表。	`<p style="color: red; font-size: 16px;">这段文字是红色的。</p>`	仅用于临时调试或动态样式（由JS生成）。禁止在生产环境大量使用，因为它将内容与表现耦合，违背了分离原则，难以维护。优先级过高，后期难以覆盖。
标题	`title="提示文本"`	为元素提供额外的辅助信息或提示。通常当用户鼠标悬停时，浏览器会显示一个工具提示（tooltip）。	`<abbr title="HyperText Markup Language">HTML</abbr>` `<link rel="stylesheet" href="theme.css" title="深色主题">` `<input type="text" title="请输入您的全名">`	提升可访问性和用户体验，解释缩写、图标含义或输入要求。内容对屏幕阅读器可见，但不是替代 `<label>` 的理由。避免放置重要操作指令，因为移动设备上可能无法触发。
语言	`lang="语言代码"`	定义元素内容所使用的语言。对搜索引擎、屏幕阅读器（按正确发音朗读）和浏览器翻译功能至关重要。	见下方示例	应设置在 `<html>` 标签上作为默认语言。可嵌套，子元素继承父元素语言，除非显式覆盖。使用标准语言标签（如 `zh`, `zh-CN`, `en`, `en-US`, `ja`, `es`）。极大提升多语言网站的可访问性和SEO。
文本方向	`dir="ltr" 或 dir="rtl"`	定义元素内容的文本书写方向。`ltr` (left-to-right) 为默认（如中文、英文），`rtl` (right-to-left) 用于阿拉伯文、希伯来文等。	见下方示例	通常与 `lang` 属性配合使用。浏览器和操作系统会根据 `lang` 自动推断 `dir`，但显式设置更可靠。影响文本对齐、标点符号位置和布局流（需配合CSS `direction` 和 `unicode-bidi`）。

ID 属性示例：

<!-- CSS选择 -->
<div id="header">...</div>
<!-- JS获取 -->
<script>document.getElementById('mainContent')</script>
<!-- 锚点链接 -->
<a href="#section1">跳转到章节1</a>
<h2 id="section1">章节1</h2>

语言属性示例：

<!-- 整个页面 -->
<html lang="zh-CN">
<!-- 特定内容 -->
<p>这是一段中文。</p>
<p lang="en">This is an English sentence.</p>

文本方向示例：

<!-- 阿拉伯文内容 -->
<p dir="rtl" lang="ar">مرحبا بالعالم</p>
<!-- 强制左对齐 -->
<div dir="ltr">...</div>

核心要点总结

id vs class：
- id：唯一性，用于精确控制单个元素（锚点、JS操作）。
- class：复用性，用于批量控制样式和行为，是CSS框架和组件化的基础。
style 属性慎用：
- 行内样式是”紧急出口”，不应成为常规手段。
- 坚持 “结构(HTML) - 样式(CSS) - 行为(JS)” 分离原则。
title 增强体验：
- 为用户提供上下文帮助，特别是对非文本内容（图标、缩写）的解释。
- 是无障碍设计的重要一环。
lang 和 dir 实现国际化：
- 不仅仅是美观，更是功能需求。确保全球用户都能正确理解和使用你的网站。
- 对SEO友好，搜索引擎能更好地索引多语言内容。
全局属性的力量：
- 这些属性几乎可以应用于所有HTML元素，是连接HTML、CSS、JavaScript和辅助技术的”通用接口”。

全局属性（HTML5）

属性名称	语法	作用说明	使用示例	注意事项与最佳实践
自定义数据属性	`data-="值"`（`` 为自定义名称）	允许在HTML元素上存储私有、自定义的数据。这些数据对用户不可见，但可通过JavaScript读取和操作，用于配置组件或传递信息。	见下方示例	`data-` 后接自定义名称，推荐使用小写字母和连字符（如 `data-user-role`）。 JavaScript通过 `element.dataset` 对象访问，名称自动转为驼峰式（`data-user-name` → `dataset.userName`）。不要用于存储敏感信息（客户端可见）。是组件化开发中传递配置的优雅方式。
内容可编辑	`contenteditable="true"` `contenteditable="false"` `contenteditable`（等价于 true）	使一个元素（及其子元素）的文本内容可被用户直接编辑。常用于富文本编辑器、笔记应用。	见下方示例	值为 `"true"` 或 `"false"`，默认继承父级。编辑后的内容是DOM的一部分，可通过 `innerHTML` 获取。需注意XSS风险，用户可能输入恶意脚本，提交前必须严格过滤和转义。可访问性较好，键盘用户可直接编辑。
可拖拽	`draggable="true"` `draggable="false"` `draggable="auto"`	定义元素是否可以被拖动。配合 `dragstart`, `dragover`, `drop` 等事件实现拖放功能。	见下方示例	大多数元素默认 `draggable="auto"`（如图片、链接可拖，普通元素不可拖）。设为 `"true"` 可使任何元素可拖。必须配合JavaScript事件才能实现完整的拖放逻辑。提供视觉反馈（如光标变化）提升用户体验。
隐藏	`hidden`	表示该元素当前不相关、不重要或未满足显示条件，应被隐藏。浏览器会应用 `display: none` 样式。	`<div hidden>这是一条初始隐藏的消息</div>` `<button onclick="document.querySelector('div').hidden = false">显示</button>`	布尔属性，存在即生效。与CSS `display: none` 效果类似，但语义更明确——“这个元素现在不应该被看到”。屏幕阅读器不会朗读 `hidden` 元素，提升可访问性。不要用于需要动画隐藏的场景（可用CSS类切换）。
拼写检查	`spellcheck="true"` `spellcheck="false"`	指示浏览器是否应对元素内的文本进行拼写和语法检查。对 `<input>`, `<textarea>` 和 `contenteditable` 元素有效。	`<input type="text" spellcheck="true">` `<textarea spellcheck="false"></textarea>`	默认行为因浏览器和输入类型而异。在技术性内容（如代码、专业术语）中建议关闭，避免干扰。用户可在浏览器设置中覆盖此属性。
翻译	`translate="yes"` `translate="no"`	向浏览器翻译工具（如Google Translate）提供提示，建议是否翻译该元素的内容。	`<pre translate="no">function hello() { ... }</pre>` `<p translate="yes">欢迎来到我们的网站</p>`	非强制，浏览器翻译工具可以选择忽略。对包含专有名词、代码、品牌名的内容非常有用，防止错误翻译。默认为 `"yes"`。
Tab键索引	`tabindex="数字"`	定义元素在使用Tab键进行键盘导航时的顺序，以及是否可获得焦点。	见下方示例	`tabindex="0"`：元素可被Tab键聚焦，顺序按DOM流。最常用且推荐。 `tabindex="正数"`：按数值从小到大聚焦。避免使用，易打乱自然顺序，损害可访问性。 `tabindex="-1"`：不能通过Tab键聚焦，但可通过JS `focus()` 方法获得焦点。可访问性关键：确保所有交互元素（按钮、链接、表单）都能通过键盘访问。

自定义数据属性示例：

<div id="product1" data-product-id="123" data-price="99.99" data-in-stock="true">商品A</div>
<script>
  const product = document.getElementById('product1');
  console.log(product.dataset.productId); // "123"
  console.log(product.dataset.price); // "99.99"
</script>

内容可编辑示例：

<!-- 使整个段落可编辑 -->
<p contenteditable="true">点击这里编辑文本...</p>
<!-- 仅根元素可编辑，子元素不可 -->
<div contenteditable="true">
  <p>这段可编辑</p>
  <p contenteditable="false">但这段不行</p>
</div>

可拖拽示例：

<!-- 图片可拖拽 -->
<img src="logo.png" draggable="true" alt="Logo">
<!-- 链接默认可拖拽，禁止 -->
<a href="#" draggable="false">不可拖拽的链接</a>

Tab键索引示例：

<!-- 按1,2,3顺序聚焦 -->
<input tabindex="1">
<button tabindex="2">按钮</button>
<a href="#" tabindex="3">链接</a>
<!-- 使div可获得焦点（如绑定快捷键） -->
<div tabindex="0" onclick="...">可聚焦区域</div>
<!-- 移除链接的默认焦点（谨慎使用） -->
<a href="#" tabindex="-1">临时禁用</a>

核心要点总结

data-*：数据与逻辑的桥梁
- 安全地将数据从HTML传递给JavaScript。
- 实现声明式组件配置，提升代码清晰度。
contenteditable：原生富文本
- 快速实现内容可编辑，但需警惕安全风险。
- 结合 designMode 可创建完整编辑器。
draggable + JS = 拖放
- 提供拖放能力的基础，完整功能依赖JavaScript事件处理。
hidden：语义化隐藏
- 比 style="display:none" 更具语义，明确表达”不应显示”的意图。
- 自动排除在辅助技术之外。
spellcheck & translate：提升国际化体验
- 细粒度控制浏览器辅助功能，避免对特定内容的误操作。
tabindex：键盘导航的生命线
- tabindex="0" 是让非标准元素（如<div>按钮）支持键盘访问的关键。
- 避免正数 tabindex，它会破坏页面的自然阅读和导航流，对键盘用户极不友好。

五、HTML与可访问性（Accessibility）

ARIA（Accessible Rich Internet Applications）

ARIA是一套W3C标准，通过添加 role 和 aria-* 属性，为HTML元素提供额外的语义信息，帮助辅助技术（如屏幕阅读器）理解动态、复杂的Web应用。

核心原则：“先用语义化HTML，再用ARIA补充”。能用 <button> 就不要用 <div role="button">。

ARIA 属性	作用与语法	使用示例	注意事项
role	定义元素的抽象UI角色（如按钮、导航、对话框）。 `role="值"`	见下方示例	当无法使用标准语义标签时使用。必须配合 `tabindex` 和键盘事件（如Enter, Space）实现完整交互。常见角色：`button`, `link`, `navigation`, `main`, `alert`, `dialog`, `menu`, `tablist` 等。
aria-label	为元素提供一个可访问的名称，当其可见文本不足以描述功能时使用（如图标按钮）。 `aria-label="描述文本"`	`<button aria-label="搜索">🔍</button>` `<button aria-label="关闭">×</button>`	如果元素有可见文本，优先使用 `<label>` 或让文本本身有意义。 `aria-label` 会覆盖元素的可见文本作为可访问名称。
aria-labelledby	将元素的可访问名称关联到一个或多个其他元素的ID。常用于表单、图表、复杂组件。 `aria-labelledby="id1 id2..."`	见下方示例	比 `aria-label` 更灵活，可组合多个文本片段。建立元素间的语义关联。
aria-describedby	将元素的描述信息关联到另一个元素的ID。用于提供额外的帮助文本。 `aria-describedby="id"`	`<label for="pwd">密码</label>` `<input type="password" id="pwd" aria-describedby="pwdHelp">` `<p id="pwdHelp">密码需包含字母和数字，至少8位。</p>`	为屏幕阅读器用户提供上下文帮助，类似 `title` 属性但更可靠。不应包含关键操作指令。
aria-hidden	指示该元素是否对辅助技术隐藏。`true` 表示隐藏，`false`（默认）表示不隐藏。 `aria-hidden="true"` `aria-hidden="false"`	`<span aria-hidden="true">★</span>` `<span>评分：5分</span>` `<div id="modal" aria-hidden="true">...</div>`	不影响视觉显示，仅影响辅助技术。用于纯装饰性内容或暂时不可见但仍在DOM中的内容（需配合CSS隐藏视觉）。谨慎使用，不要隐藏重要内容。
aria-expanded	表示一个可折叠/展开的元素（如手风琴、下拉菜单）的当前状态。 `aria-expanded="true/false"`	见下方示例	必须通过JavaScript动态更新状态。让屏幕阅读器用户知道”点击后会发生什么”。

role 属性示例：

<!-- 使div具有按钮角色 -->
<div role="button" tabindex="0" onclick="...">点击我</div>
<!-- 导航区域 -->
<nav role="navigation">...</nav>
<!-- 对话框 -->
<div role="dialog" aria-labelledby="dlgTitle">...</div>

aria-labelledby 示例：

<!-- 输入框关联到其标题 -->
<h3 id="nameTitle">姓名</h3>
<input type="text" aria-labelledby="nameTitle">
<!-- 对话框标题 -->
<div role="dialog" aria-labelledby="dlgTitle">
  <h2 id="dlgTitle">确认删除</h2>
  ...
</div>

aria-expanded 示例：

<button aria-expanded="false" onclick="toggle()">详情</button>
<div id="details" hidden>隐藏的详细内容</div>
<script>
  function toggle() {
    const btn = document.querySelector('button');
    const details = document.getElementById('details');
    const isExpanded = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', !isExpanded);
    details.hidden = isExpanded;
  }
</script>

强调：ARIA不改变元素的默认行为！必须用JavaScript实现交互逻辑，并用 tabindex 确保键盘可访问。

语义化标签的正确使用

使用正确的标签：用 <button> 做按钮，用 <a href="..."> 做链接，用 <h1>-<h6> 构建标题层级。
避免滥用 <div> 和 <span>：不要用它们代替语义化标签。
标题层级清晰：h1 → h2 → h3...，不要跳级（如 h1 后直接 h3）。

表单可访问性（`<label>` 关联、fieldset/legend）

1. `<label>` 的强制关联

屏幕阅读器在聚焦输入框时，会朗读其 <label> 文本，用户才知道”这个框要填什么”。

两种方式：

<!-- 方式1：for + id -->
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">

<!-- 方式2：嵌套 -->
<label>
  <input type="checkbox" name="agree"> 我同意条款
</label>

最佳实践：每个 <input>, <textarea>, <select> 都应有 <label>。

2. `<fieldset>` 和 `<legend>`

为一组相关的控件（如单选按钮、复选框）提供分组和标题。

作用：屏幕阅读器会为组内每个控件重复朗读 <legend> 文本，提供上下文。

示例：

<fieldset>
  <legend>您喜欢的水果？</legend>
  <input type="checkbox" id="apple" name="fruit" value="apple">
  <label for="apple">苹果</label>
  <input type="checkbox" id="banana" name="fruit" value="banana">
  <label for="banana">香蕉</label>
</fieldset>

屏幕阅读器朗读：“您喜欢的水果？复选框，苹果，未选中。您喜欢的水果？复选框，香蕉，未选中。“

图像的 alt 属性

alt 属性：
- 作用：为图像提供文本替代。当图像无法加载或用户使用屏幕阅读器时，alt 文本会被朗读或显示。
- 编写原则：
  - 功能性图像：描述其功能。<img src="search.png" alt="搜索">
  - 信息性图像：简洁描述内容。<img src="chart.png" alt="2025年销售额柱状图，Q1: 100万, Q2: 120万">
  - 装饰性图像：alt=""（空字符串）。告诉屏幕阅读器忽略它。<img src="divider.png" alt="">
- 绝对避免：alt="图片"、alt="image123.jpg"。
其他多媒体：
- 视频：提供字幕（Subtitles）和音频描述（Audio Description）。
- 音频：提供文字稿（Transcript）。

键盘导航支持

Tab键顺序：
- 用户按Tab键在可聚焦元素间移动（<a>, <button>, <input>, tabindex="0" 的元素）。
- 顺序应遵循DOM流和视觉流，从左到右，从上到下。
tabindex 正确使用：
- tabindex="0"：使元素进入Tab键顺序，顺序由DOM位置决定。推荐用于自定义组件。
- tabindex="-1"：元素不能通过Tab键聚焦，但可通过 element.focus() 获得焦点（如模态框打开后自动聚焦关闭按钮）。
- tabindex="正数"：强烈不推荐！会打乱自然顺序，导致混乱。
焦点可见性：
- 确保聚焦状态有清晰的视觉反馈（如高亮边框）。避免使用 outline: none 而不提供替代样式。
常用快捷键：
- Enter / Space：激活按钮、链接、复选框。
- Arrow Keys：在单选按钮、下拉菜单中选择。
- Esc：关闭模态框、下拉菜单。

六、HTML性能与最佳实践

语义化与结构清晰

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>语义化页面</title>
</head>
<body>
    <!-- 使用 header 定义页眉 -->
    <header>
        <h1>网站标题</h1>
        <!-- 使用 nav 定义主导航 -->
        <nav aria-label="主菜单">
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/about">关于</a></li>
            </ul>
        </nav>
    </header>

    <!-- 使用 main 定义主内容区 -->
    <main>
        <!-- 使用 article 表示独立文章 -->
        <article>
            <h2>文章标题</h2>
            <p>这是文章的主要内容...</p>
        </article>
        
        <!-- 使用 aside 表示侧边栏 -->
        <aside>
            <h3>相关链接</h3>
            <ul>
                <li><a href="#">相关文章1</a></li>
            </ul>
        </aside>
    </main>

    <!-- 使用 footer 定义页脚 -->
    <footer>
        <p>&copy; 2025 公司版权所有</p>
    </footer>
</body>
</html>

减少不必要的标签

反面示例（冗余）：

<div class="container">
    <div class="row">
        <div class="col">
            <div class="content-wrapper">
                <p>一段简单的文本。</p>
            </div>
        </div>
    </div>
</div>

正面示例（精简）：

<!-- 如果仅需样式或JS钩子，且无语义需求，直接使用 -->
<p class="text-content">一段简单的文本。</p>

<!-- 或者，如果结构简单，无需额外容器 -->
<main>
    <p>这是核心内容，无需包裹在多余的div中。</p>
</main>

正确使用 `<meta>` 标签优化

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- SEO优化：描述页面内容 -->
    <meta name="description" content="这是一个关于HTML最佳实践的教程页面。">
    <!-- SEO优化：关键词（现代SEO中权重较低，但仍可使用） -->
    <meta name="keywords" content="HTML, 性能, 最佳实践, 教程">
    <!-- 社交媒体分享：Open Graph 协议 -->
    <meta property="og:title" content="HTML性能与最佳实践">
    <meta property="og:description" content="学习如何优化HTML以提升性能。">
    <meta property="og:type" content="website">
    <!-- 告诉IE使用最新渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Meta标签优化</title>
</head>
<body>
    <h1>Meta标签示例</h1>
    <p>查看head中的meta标签。</p>
</body>
</html>

图像懒加载（`loading="lazy"`）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像懒加载</title>
    <style>
        /* 创建滚动内容 */
        .spacer {
            height: 100vh;
        }
    </style>
</head>
<body>
    <h1>懒加载图片示例</h1>
    
    <!-- 浏览器视口内的图片：正常加载 -->
    <img src="https://via.placeholder.com/800x400?text=首屏图片" alt="首屏内容" width="800" height="400">
    
    <!-- 视口外的图片：添加 loading="lazy" -->
    <div class="spacer"></div>
    <img src="https://via.placeholder.com/800x600?text=懒加载图片" 
         alt="这是一张延迟加载的图片" 
         loading="lazy" 
         width="800" 
         height="600">

    <p>向下滚动以触发懒加载。</p>
</body>
</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>
    
    <!-- 预连接：提前建立到关键第三方域的连接 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- 预加载：提前加载当前页面关键但发现较晚的资源 -->
    <!-- 例如：关键字体文件 -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" as="style">
    <!-- 关键Hero图片 -->
    <link rel="preload" href="https://via.placeholder.com/1200x600?text=Hero+Image" as="image">
    
    <!-- 引入预加载的样式 -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
</head>
<body>
    <h1 style="font-family: 'Roboto', sans-serif;">预加载示例</h1>
    <img src="https://via.placeholder.com/1200x600?text=Hero+Image" alt="英雄图片" width="1200" height="600">
</body>
</html>

HTML压缩与优化

原始未压缩HTML (index.html)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>未压缩页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Hello World!</h1>
    <p>这是一个用于演示压缩的简单页面。</p>
</body>
</html>

压缩后HTML (index.min.html)：

<!DOCTYPE html><html lang=en><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1"><title>压缩页面</title><style>body{font-family:Arial,sans-serif;margin:40px}h1{color:#333}</style><h1>Hello World!</h1><p>这是一个用于演示压缩的简单页面。</p>

说明：

移除空白符和换行：所有空格、制表符、换行被删除。
简化属性：lang="en" 简写为 lang=en（HTML5允许）。
合并标签：<head> 和 <body> 标签被移除（浏览器会自动补全）。
工具自动化：实际开发中使用 html-minifier, Webpack, Vite 等工具自动完成此过程。

七、HTML与其他技术的集成

与CSS集成

内联样式、内部样式表、外部样式表

文件1：styles.css（外部样式表）：

/* 外部样式表 */
.external {
    color: blue;
    font-weight: bold;
}

文件2：index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS集成示例</title>
    
    <!-- 内部样式表 -->
    <style>
        .internal {
            color: green;
            text-decoration: underline;
        }
    </style>
    
    <!-- 链接外部样式表 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 内联样式 -->
    <p style="color: red; font-style: italic;">
        这是内联样式（红色斜体）。
    </p>
    
    <!-- 使用内部样式表的类 -->
    <p class="internal">
        这是内部样式表（绿色下划线）。
    </p>
    
    <!-- 使用外部样式表的类 -->
    <p class="external">
        这是外部样式表（蓝色加粗）。
    </p>
</body>
</html>

说明：此示例展示了三种CSS引入方式。优先级：内联 > 内部/外部（同级时后定义的优先）。

class 与 id 在CSS选择器中的应用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器示例</title>
    <style>
        /* 标签选择器 */
        p {
            margin: 10px 0;
        }
        
        /* 类选择器 (.类名) */
        .highlight {
            background-color: yellow;
        }
        
        .large-text {
            font-size: 18px;
        }
        
        /* ID选择器 (#id名) - 优先级高于类 */
        #special-paragraph {
            border: 2px solid red;
            padding: 5px;
        }
        
        /* 组合选择器：同时应用多个类 */
        .highlight.large-text {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="highlight">这段文字被高亮。</p>
    <p class="large-text">这段文字较大。</p>
    <p class="highlight large-text">这段文字既高亮又大且加粗（组合类）。</p>
    <p id="special-paragraph">这个段落有红色边框（ID选择器）。</p>
</body>
</html>

说明：演示了 . (类) 和 # (ID) 选择器的用法及优先级。

与JavaScript集成

内联事件处理（不推荐）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内联事件（反面示例）</title>
</head>
<body>
    <!-- ❌ 不推荐：将JS逻辑混入HTML -->
    <button onclick="alert('按钮被点击了！')">点击我（内联事件）</button>
    
    <!-- ❌ 更差：复杂逻辑写在onclick里 -->
    <button onclick="if(confirm('确定吗？')){document.body.style.backgroundColor='lightblue'}">
        改变背景色
    </button>
</body>
</html>

说明：此方法耦合度高，难以维护和测试，应避免使用。

通过 id 或 class 获取元素进行DOM操作

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DOM操作示例</title>
</head>
<body>
    <h1 id="main-title">原始标题</h1>
    <p class="content">段落1</p>
    <p class="content">段落2</p>
    <button id="change-btn">修改内容</button>

    <script>
        // 通过 id 获取单个元素
        const title = document.getElementById('main-title');
        const button = document.getElementById('change-btn');
        
        // 通过 class 获取元素集合（返回 NodeList）
        const paragraphs = document.getElementsByClassName('content');
        // 或者使用 querySelectorAll('.content')
        
        // 添加点击事件监听器
        button.addEventListener('click', function() {
            // 修改标题
            title.textContent = '标题已更新！';
            
            // 遍历所有具有 'content' 类的段落
            for (let i = 0; i < paragraphs.length; i++) {
                paragraphs[i].textContent = `这是第 ${i+1} 个更新后的段落。`;
            }
        });
    </script>
</body>
</html>

说明：展示了现代Web开发的标准做法——分离关注点，用JS动态操作DOM。

data-* 属性在JS中的使用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>data-* 属性示例</title>
</head>
<body>
    <!-- 存储商品数据 -->
    <div id="product" 
         data-product-id="1001" 
         data-name="笔记本电脑" 
         data-price="5999.00"
         data-in-stock="true">
        商品信息（查看控制台）
    </div>
    <button id="show-data">显示商品信息</button>

    <script>
        const productDiv = document.getElementById('product');
        const showBtn = document.getElementById('show-data');
        
        showBtn.addEventListener('click', function() {
            // 通过 dataset 对象访问 data-* 属性
            const productInfo = {
                id: productDiv.dataset.productId,     // 注意驼峰命名
                name: productDiv.dataset.name,
                price: parseFloat(productDiv.dataset.price),
                inStock: productDiv.dataset.inStock === 'true' // 字符串转布尔
            };
            
            console.log('商品信息:', productInfo);
            alert(`商品: ${productInfo.name}, 价格: ¥${productInfo.price}`);
        });
    </script>
</body>
</html>

说明：data-* 属性是HTML与JS之间传递配置数据的安全桥梁。

动态内容生成与操作

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态内容示例</title>
    <style>
        .item { margin: 5px 0; padding: 5px; background: #f0f0f0; }
    </style>
</head>
<body>
    <h2>动态列表</h2>
    <ul id="dynamic-list"></ul>
    <button id="add-item">添加项目</button>
    <button id="clear-list">清空列表</button>

    <script>
        const list = document.getElementById('dynamic-list');
        const addItemBtn = document.getElementById('add-item');
        const clearListBtn = document.getElementById('clear-list');
        let itemCount = 0;
        
        // 添加新项目
        addItemBtn.addEventListener('click', function() {
            itemCount++;
            // 创建新的 li 元素
            const newItem = document.createElement('li');
            newItem.className = 'item'; // 设置类名
            newItem.textContent = `项目 ${itemCount}`;
            
            // 可选：为新项目添加删除功能
            newItem.addEventListener('click', function() {
                list.removeChild(newItem); // 点击项目将其移除
            });
            
            // 将新项目添加到 ul 中
            list.appendChild(newItem);
        });
        
        // 清空列表
        clearListBtn.addEventListener('click', function() {
            // 方法1：设置 innerHTML 为空
            // list.innerHTML = '';
            
            // 方法2：更高效，逐个移除子节点
            while(list.firstChild) {
                list.removeChild(list.firstChild);
            }
            itemCount = 0;
        });
    </script>
</body>
</html>

说明：演示了如何使用 createElement, appendChild, removeChild 等DOM API动态创建、添加和删除内容，实现交互式UI。

HTML 文档

一、HTML基础概念

HTML定义与作用

HTML是什么（HyperText Markup Language）

HTML在Web开发中的角色

HTML与CSS、JavaScript的关系

HTML文档结构

一个完整的标准HTML5模板示例

教学重点与常见错误提醒

二、常用HTML标签与语义化

文本与段落标签

核心要点总结

链接与锚点

核心要点总结

图像与多媒体

核心要点总结

列表

核心要点总结

表格

核心要点总结

表单

核心要点总结

三、HTML5 新增语义化标签

页面结构标签

核心要点总结

其他语义化元素

核心要点总结

四、HTML属性与全局属性

常用属性

核心要点总结

全局属性（HTML5）

核心要点总结

五、HTML与可访问性（Accessibility）

ARIA（Accessible Rich Internet Applications）

语义化标签的正确使用

表单可访问性（<label> 关联、fieldset/legend）

1. <label> 的强制关联

2. <fieldset> 和 <legend>

图像的 alt 属性

键盘导航支持

六、HTML性能与最佳实践

语义化与结构清晰

减少不必要的标签

正确使用 <meta> 标签优化

图像懒加载（loading="lazy"）

预加载与预连接

HTML压缩与优化

七、HTML与其他技术的集成

与CSS集成

内联样式、内部样式表、外部样式表

class 与 id 在CSS选择器中的应用

与JavaScript集成

内联事件处理（不推荐）

通过 id 或 class 获取元素进行DOM操作

data-* 属性在JS中的使用

动态内容生成与操作

表单可访问性（`<label>` 关联、fieldset/legend）

1. `<label>` 的强制关联

2. `<fieldset>` 和 `<legend>`

正确使用 `<meta>` 标签优化

图像懒加载（`loading="lazy"`）