设计网页文本内容
标题文字
标题文字用 <h1>～<h6> 进行区分。默认情况下标题左对齐、粗体并带有上/下外边距，不同级别会生成隐式大纲（Outline）结构
| 标签 | 典型作用 | 推荐用法 | 注意事项 |
|---|---|---|---|
<h1> | 页面主标题 | 页面内唯一，对应 <title> | 避免使用多个 <h1>（除非在单页应用的不同 View 中） |
<h2> | 二级章节标题 | 主要内容区块的标题 | 保持层级连续，不要跳级 |
<h3> | 三级章节标题 | 子区块标题 | 可多次使用 |
<h4> | 四级标题 | 详情/组件标题 | 避免层级过深 |
<h5> | 五级标题 | 次要信息标题 | 此时字号通常已小于正文 |
<h6> | 六级标题 | 脚注/版权/元数据标题 | 仅在极少数深层结构使用 |
常见误区：
- 误区 1：为了调整字体大小而使用标题标签（如为了让文字变小而使用
<h6>）。正解：应使用 CSSfont-size控制视觉大小，标题标签仅用于构建文档大纲。 - 误区 2：跳级使用标题（如
<h1>直接接<h3>）。正解：这会破坏屏幕阅读器的导航逻辑，应严格按h1 -> h2 -> h3顺序使用。
性能提示：
- 尽量避免在 DOM 树过深的地方嵌套标题，这会增加样式计算（Style Recalculation）的复杂度
文本格式与语义化
现代 HTML5 更注重语义表达，视觉样式应完全交由 CSS 控制
<h4>011-text-formatting.html</h4>html
<!-- 来源：2-设计网页文本内容.md - 文本格式化标签示例 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【011】文本格式化标签</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 20px; background: #f5f5f5; }
.container { max-width: 850px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
h1 { color: #333; margin-bottom: 25px; font-size: 24px; }
.demo-section {
margin-bottom: 28px;
padding: 20px;
border: 1px solid #e9ecef;
border-radius: 8px;
background-color: #fafbfc;
}
.demo-section h2 { color: #495057; margin-bottom: 15px; font-size: 17px; border-bottom: 2px solid #dee2e6; padding-bottom: 8px; }
.demo-section p { line-height: 1.9; font-size: 15px; color: #333; }
code {
background-color: #f5f5f5;
padding: 3px 7px;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
color: #d63384;
border: 1px solid #e9ecef;
}
pre {
background-color: #282c34;
color: #abb2bf;
padding: 16px 20px;
border-radius: 6px;
overflow-x: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 14px;
line-height: 1.6;
}
mark {
background: linear-gradient(120deg, #ffeaa7 0%, #fdcb6e 100%);
padding: 2px 4px;
border-radius: 3px;
}
del { background-color: #ffe6e6; color: #c0392b; text-decoration: line-through; }
ins { background-color: #e8f8f5; color: #27ae60; text-decoration: none; border-bottom: 2px solid #27ae60; font-weight: 500; }
s { color: #999; text-decoration: line-through; }
kbd {
display: inline-block;
padding: 3px 8px;
font-size: 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background: white;
border: 1px solid #ccc;
border-bottom-width: 3px;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
var { font-style: italic; color: #0066cc; font-weight: 600; }
.tag-ref {
display: inline-block;
background: #667eea;
color: white;
font-size: 11px;
padding: 2px 8px;
border-radius: 10px;
font-family: ui-monospace, monospace;
margin-left: 8px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<h1>📝 HTML5 文本格式化标签</h1>
<!-- 基本格式化 -->
<div class="demo-section">
<h2>基本格式化<span class="tag-ref"><strong></span><span class="tag-ref"><em></span><span class="tag-ref"><mark></span><span class="tag-ref"><small></span></h2>
<p><strong>这是重要内容（strong）</strong>，需要特别注意，比如警告信息或关键数据。</p>
<p><em>这是需要强调的内容（em）</em>，会有不同的语调，改变句子意思。</p>
<p>这是一个<mark>高亮标记（mark）</mark>的文本，常用于搜索结果高亮。</p>
<p>小号文本：<small>版权所有 © 2024 我的网站 — 保留所有权利</small></p>
</div>
<!-- 代码相关 -->
<div class="demo-section">
<h2>代码相关<span class="tag-ref"><code></span><span class="tag-ref"><kbd></span><span class="tag-ref"><samp></span><span class="tag-ref"><pre></span></h2>
<p>短代码片段：<code>console.log("Hello, World!")</code></p>
<p>请按下 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制内容。</p>
<p>程序输出结果：<samp>Error: File not found</samp></p>
<pre><code>function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('World'));</code></pre>
</div>
<!-- 数学公式与上下标 -->
<div class="demo-section">
<h2>数学公式与上下标<span class="tag-ref"><sub></span><span class="tag-ref"><sup></span><span class="tag-ref"><var></span></h2>
<p>水的化学式：H<sub>2</sub>O | 二氧化碳：CO<sub>2</sub></p>
<p>爱因斯坦质能方程：<var>E</var> = <var>m</var><var>c</var><sup>2</sup></p>
<p>勾股定理：<var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup></p>
<p>如果变量 <var>x</var> 的值为 5，那么 <var>y</var> = <var>x</var> + 3 的结果为 8。</p>
</div>
<!-- 删除线与插入 -->
<div class="demo-section">
<h2>删除线与插入文本<span class="tag-ref"><del></span><span class="tag-ref"><ins></span><span class="tag-ref"><s></span></h2>
<p>商品促销：</p>
<p style="font-size: 18px;">
<s>原价：¥299</s>
<strong style="color: #e53935;">现价：<ins>¥199</ins></strong>
</p>
<p style="margin-top: 10px;">
文档修订：<del>旧版内容已过时</del>
<ins>新版内容已更新</ins>
</p>
<p style="margin-top: 8px;">
过期提示：<s>限时优惠活动已结束</s>
</p>
</div>
<!-- 引用与缩写 -->
<div class="demo-section">
<h2>引用与缩写<span class="tag-ref"><q></span><span class="tag-ref"><abbr></span><span class="tag-ref"><cite></span></h2>
<p>正如 Tim Berners-Lee 所说：</p>
<blockquote style="border-left: 4px solid #007bff; padding-left: 16px; margin: 12px 0; color: #555; font-style: italic;">
"The Web does not just connect machines, it connects people."
<footer style="margin-top: 6px; font-style: normal;">— <cite>Tim Berners-Lee</cite>, W3C Director</footer>
</blockquote>
<p>
我正在学习 <abbr title="HyperText Markup Language">HTML</abbr> 和
<abbr title="Cascading Style Sheets">CSS</abbr> 来构建网站。
</p>
<p>行内短引用：<q>学而不思则罔，思而不学则殆</q>——孔子</p>
</div>
<!-- 时间标签 -->
<div class="demo-section">
<h2>机器可读时间<span class="tag-ref"><time></span></h2>
<p>发布时间：<time datetime="2024-06-12T19:00">今天晚上 7 点</time></p>
<p>活动持续：<time datetime="PT4H30M">4 小时 30 分钟</time></p>
<p>截止日期：<time datetime="2024-12-31">2024年最后一天</time></p>
</div>
<!-- 软换行 -->
<div class="demo-section">
<h2>软换行<span class="tag-ref"><wbr></span></h2>
<p>很长的链接地址：</p>
<p style="word-break: break-all; font-family: ui-monospace, monospace; font-size: 13px; background: #f5f5f5; padding: 10px; border-radius: 4px;">
https://www.example.com/very/<wbr />long/<wbr />url/<wbr />path/<wbr />that/<wbr />needs/<wbr />breaking
</p>
</div>
</div>
</body>
</html>文本格式标签速查表
| 标签 | 语义 | 默认样式 | 适用场景 |
|---|---|---|---|
<strong> | 重要性（Importance） | 粗体 | 警告、错误提示、关键数据 |
<em> | 强调（Emphasis） | 斜体 | 改变句子语气的词语 |
<mark> | 标记（Marked） | 黄背景 | 搜索结果高亮、上下文关联提示 |
<time> | 时间（Time） | 无 | 机器可读的日期/时间 |
<code> | 代码（Code） | 等宽 | 短代码片段 |
<kbd> | 键盘输入（Keyboard） | 等宽 | 用户按键说明 |
<samp> | 样本输出（Sample） | 等宽 | 程序输出结果 |
<var> | 变量（Variable） | 斜体 | 数学公式或代码变量 |
<abbr> | 缩写（Abbreviation） | 虚下划线 | 专有名词缩写 |
<cite> | 引用源（Citation） | 斜体 | 作品标题（书名、电影名） |
<q> | 短引用（Quote） | 自动引号 | 行内短句引用 |
<sub>/<sup> | 下标/上标 | 缩小偏移 | 化学式、脚注、数学公式 |
时间标签 <time> 用于标记时间，通过 datetime 属性提供机器可读格式
html
<p>
发布时间：
<time datetime="2023-10-15T19:00">昨天晚上 7 点</time>
</p>
<p>
活动持续：
<time datetime="PT4H30M">4 小时 30 分钟</time>
</p>软换行 <wbr>，建议浏览器在此处换行，适合处理长单词或 URL
html
<p>很长的链接：https://www.example.com/very/<wbr />long/<wbr />url/<wbr />path</p>示例：
html
<!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>
<style>
code {
background-color: #f5f5f5;
padding: 2px 4px;
border-radius: 3px;
}
pre {
background-color: #f5f5f5;
padding: 10px;
border-radius: 5px;
overflow-x: auto;
}
body {
display: flex;
}
section {
margin-right: 20px;
}
</style>
</head>
<body>
<section>
<h2>基本格式化</h2>
<p><strong>这是重要内容</strong>，需要特别注意。</p>
<p><em>这是需要强调的内容</em>，会有不同的语调。</p>
<p>这是一个<mark>高亮标记</mark>的文本。</p>
<p>小号文本：<small>版权所有 © 2023</small></p>
</section>
<section>
<h2>代码相关</h2>
<p>短代码示例：<code>console.log("Hello")</code></p>
<pre><code>function add(a, b) {
return a + b;
}</code></pre>
</section>
<section>
<h2>数学公式</h2>
<p>水的化学式：H<sub>2</sub>O</p>
<p>爱因斯坦质能方程：E=mc<sup>2</sup></p>
</section>
<section>
<h2>删除线</h2>
<p>原价：<del>100元</del> 现价：<ins>80元</ins></p>
<p>已过期内容：<s>限时优惠</s></p>
</section>
</body>
</html>排版最佳实践
- 控制行长与行距：建议正文最大宽度为 65 ～ 80 个字符，可通过
max-width与line-height: 1.6左右获得良好可读性 - 合理使用字体：优先选择系统字体栈，或通过
font-display: swap减少 FOUT；必要时使用可变字体提升加载性能 - 响应式字号：利用
clamp()、vw等单位实现标题/正文的流式缩放，避免在移动端过大或过小 - 强调方式多样化：除粗体斜体外，还可结合
color、background-color、font-variant等属性；确保对比度符合 WCAG 要求 - 语言标记：在需要切换语言时使用
lang属性（如<span lang="en">design system</span>），辅助技术可正确发音 - 文本装饰：通过
text-decoration、text-underline-offset、text-decoration-thickness自定义下划线距离与粗细，不必依赖旧式标签
段落与排版结构
<h4>012-hr-divider-styles.html</h4>html
<!-- 来源：2-设计网页文本内容.md - HR 水平分隔线样式 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【012】HR 水平分隔线样式</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 20px; background: #f5f5f5; }
.container { max-width: 750px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
h1 { color: #333; margin-bottom: 25px; font-size: 24px; }
section { margin-bottom: 25px; }
section h2 { color: #555; font-size: 18px; margin-bottom: 10px; }
section p { color: #666; font-size: 14px; line-height: 1.6; }
/* 渐变分隔线 */
.section-divider {
margin-block: 2rem;
border: 0;
height: 2px;
background: linear-gradient(90deg, #e0e7ff 0%, #6366f1 100%);
}
/* 虚线分隔线 */
.dashed-divider {
margin: 2rem 0;
border: 0;
border-top: 2px dashed #cbd5e1;
}
/* 点状分隔线 */
.dotted-divider {
margin: 2rem 0;
border: 0;
border-top: 3px dotted #94a3b8;
}
/* 双线分隔线 */
.double-divider {
margin: 2rem 0;
border: 0;
border-top: 3px double #6366f1;
}
/* 渐变透明分隔线 */
.fade-divider {
margin: 2rem 0;
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(99, 102, 241, 0), rgba(99, 102, 241, 0.75), rgba(99, 102, 241, 0));
}
/* 文字分隔线 */
.text-divider {
display: flex;
align-items: center;
text-align: center;
margin: 2rem 0;
color: #94a3b8;
font-size: 14px;
}
.text-divider::before,
.text-divider::after {
content: '';
flex: 1;
border-top: 1px solid #e2e8f0;
}
.text-divider span {
padding: 0 1rem;
color: #64748b;
}
/* 装饰性分隔线 */
.decorative-divider {
margin: 2rem 0;
border: 0;
text-align: center;
&::before {
content: '✦ ✦ ✦';
letter-spacing: 1rem;
color: #cbd5e1;
}
}
/* 粗体分隔线 */
.thick-divider {
margin: 2rem 0;
border: 0;
height: 4px;
background: linear-gradient(90deg, #f472b6 0%, #a78bfa 50%, #60a5fa 100%);
border-radius: 2px;
}
.style-card {
background: #f8fafc;
padding: 15px 18px;
border-radius: 6px;
margin-bottom: 12px;
border-left: 3px solid #6366f1;
}
.style-card h3 { font-size: 14px; color: #334155; margin-bottom: 6px; }
.style-card code {
display: block;
background: white;
padding: 8px 12px;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
line-height: 1.6;
color: #475569;
border: 1px solid #e2e8f0;
overflow-x: auto;
white-space: pre;
}
</style>
</head>
<body>
<div class="container">
<h1>➖ HR 水平分隔线样式</h1>
<p style="color: #666; margin-bottom: 25px; font-size: 14px;">
HTML5 中 <code><hr></code> 的 width、size、color、align、noshade 等属性已废弃，
应改用 CSS 控制外观。以下是多种实用的分隔线样式：
</p>
<section>
<h2>第一章 基础概念</h2>
<p>这是第一章的内容段落，介绍 HTML 分隔线的基本用法和语义含义。</p>
<hr class="section-divider" />
</section>
<section>
<h2>第二章 样式定制</h2>
<p>这是第二章的内容，演示如何使用 CSS 自定义分隔线的视觉效果。</p>
<hr class="dashed-divider" />
</section>
<section>
<h2>第三章 高级技巧</h2>
<p>这是第三章的内容，展示更多创意性的分隔线设计方案。</p>
<hr class="dotted-divider" />
</section>
<hr class="double-divider" />
<section>
<h2>第四章 实战案例</h2>
<p>结合实际项目场景，学习如何在页面中合理运用各种分隔线样式。</p>
</section>
<hr class="fade-divider" />
<div class="text-divider"><span>或者这样</span></div>
<hr class="decorative-divider" />
<hr class="thick-divider" />
<h2 style="margin-top: 30px; font-size: 18px; color: #555;">📋 CSS 代码参考</h2>
<div class="style-card">
<h3>渐变分隔线</h3>
<code>.section-divider {
border: 0;
height: 2px;
background: linear-gradient(90deg, #e0e7ff 0%, #6366f1 100%);
}</code>
</div>
<div class="style-card">
<h3>虚线 / 点状分隔线</h3>
<code>.dashed-divider { border: 0; border-top: 2px dashed #ccc; }
.dotted-divider { border: 0; border-top: 3px dotted #999; }</code>
</div>
<div class="style-card">
<h3>文字居中分隔线（CSS 伪元素）</h3>
<code>.text-divider {
display: flex; align-items: center;
}
.text-divider::before,
.text-divider::after {
content: ''; flex: 1; border-top: 1px solid #eee;
}
.text-divider span { padding: 0 1rem; }</code>
</div>
</div>
</body>
</html>基础排版标签
<p>：段落。浏览器会自动添加上下外边距<br>：强制换行。注意：不要用多个<br>来制造垂直间距，应使用 CSSmargin<hr>：段落级的主题转换（水平分割线）<pre>：预格式化文本，保留空格和换行<blockquote>：引用块。用于标记从其他来源引用的较长文本内容（通常是段落级别的引用）
用于长篇引用，浏览器通常会缩进显示
html
<pre><code>function hello() {
console.log("Hello, World!")
}</code></pre>
<figure>
<blockquote cite="https://www.w3.org/People/Berners-Lee/">
<p>The Web does not just connect machines, it connects people.</p>
</blockquote>
<figcaption>— Tim Berners-Lee, <cite>W3C Director</cite></figcaption>
</figure>常见误区：
- 误区 1：在
<p>标签内嵌套块级元素（如<div>、<h1>）。正解：这是非法 HTML，浏览器会自动闭合<p>，导致 DOM 结构混乱 - 误区 2：滥用
进行缩进。正解：应使用 CSStext-indent: 2em;
性能提示：
- 避免在
<pre>标签中放入过大的文本内容，这可能导致布局抖动（Layout Thrashing）和内存占用增加
设置水平线 <hr>
<hr> 表示主题间的分隔符。默认情况下它占据整行、厚度为浏览器默认值，并带有浅色边线。HTML5 中 width、size、color、align、noshade 等属性已废弃，应改用 CSS：
基本用法：
html
<hr class="section-divider" />样式自定义：
css
.section-divider {
margin-block: 2.5rem;
border: 0;
height: 2px;
background: linear-gradient(90deg, #e0e7ff 0%, #6366f1 100%);
}完整示例：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HR 标签示例</title>
<style>
.section-divider {
margin-block: 2.5rem;
border: 0;
height: 2px;
background: linear-gradient(90deg, #e0e7ff 0%, #6366f1 100%);
}
.dashed-divider {
margin: 2rem 0;
border: 0;
border-top: 2px dashed #ccc;
}
.dotted-divider {
margin: 2rem 0;
border: 0;
border-top: 3px dotted #999;
}
</style>
</head>
<body>
<section>
<h2>第一章</h2>
<p>这是第一章的内容...</p>
<hr class="section-divider" />
</section>
<section>
<h2>第二章</h2>
<p>这是第二章的内容...</p>
<hr class="dashed-divider" />
</section>
<section>
<h2>第三章</h2>
<p>这是第三章的内容...</p>
<hr class="dotted-divider" />
</section>
</body>
</html>注意事项：
- 语义：强调主题转换或内容分割
- 可访问性：屏幕阅读器会读出"分隔符"，避免用
<hr>作为纯装饰线 - 替代方案：若仅需装饰线，可使用伪元素（如
::before、::after）或边框实现，减少无意义的结构元素
<blockquote>
<blockquote> 用于标记从其他来源引用的较长文本内容（通常是段落级别的引用）。浏览器通常会通过缩进或其他视觉方式区分这些引用内容
- 语义化标记：明确表示内容是引用自其他来源
- 块级元素：默认独占一行，前后有换行
- 可嵌套：可以在
<blockquote>内部再嵌套其他<blockquote> - 可扩展：常与
<cite>标签配合使用标注引用来源
html
<blockquote cite="https://example.com/source">
这里是被引用的较长文本内容...
</blockquote>属性：
- cite（可选）：指定引用内容的来源 URL
- title（非标准，但部分浏览器支持）：可以为引用添加提示信息
使用示例：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<article>
<h2>关于Web开发的思考</h2>
<p>正如Tim Berners-Lee所说：</p>
<blockquote cite="https://www.w3.org/People/Berners-Lee/">
<p>万维网是一个开放的平台，任何人都可以贡献内容。</p>
<footer>— <cite>Tim Berners-Lee</cite>, 万维网发明者</footer>
</blockquote>
<p>这句话深刻影响了现代互联网的发展方向。</p>
</article>
</body>
</html>页面显示增强标签
交互与展示标签：
| 标签 | 用途 | 说明 |
|---|---|---|
<figure> | 独立流内容 | 包含图片、图表、代码，常与 <figcaption> 搭配 |
<details> | 折叠面板 | 原生实现的展开/收起功能，配合 <summary> |
<progress> | 进度条 | 显示任务完成度 |
<meter> | 标量测量 | 显示已知范围内的值（如磁盘使用率） |
常见误区：
- 误区 1：使用
<progress>制作可拖动的滑块。正解：应使用<input type="range"> - 误区 2：在
<summary>中放置块级元素（如<h3>）。正解：虽然现代浏览器支持，但部分旧版辅助技术可能无法正确朗读，建议仅放置行内元素
性能提示：
<details>的展开动画若涉及大量 DOM 重排（Reflow），建议使用 CSSwill-change或content-visibility进行优化
html
<!-- 来源：2-设计网页文本内容.md - 页面显示增强标签 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【013】页面显示增强标签</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 20px; background: #f5f5f5; }
.container { max-width: 800px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
h1 { color: #333; margin-bottom: 8px; font-size: 24px; }
.subtitle { color: #888; margin-bottom: 30px; font-size: 14px; }
h2 { color: #495057; margin: 30px 0 15px; font-size: 18px; padding-bottom: 8px; border-bottom: 2px solid #e9ecef; }
/* ===== details/summary 折叠面板 ===== */
details {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
margin-bottom: 12px;
overflow: hidden;
transition: all 0.3s ease;
}
summary {
padding: 14px 18px;
cursor: pointer;
font-weight: 600;
color: #495057;
user-select: none;
list-style: none;
display: flex;
align-items: center;
gap: 10px;
transition: background 0.2s;
}
summary::-webkit-details-marker { display: none; }
summary::before {
content: '▶';
font-size: 11px;
transition: transform 0.2s;
color: #6366f1;
}
details[open] > summary { background: #eef2ff; color: #4338ca; border-bottom: 1px solid #dee2e6; }
details[open] > summary::before { transform: rotate(90deg); }
summary:hover { background: #f1f3f5; }
details > div { padding: 16px 18px; line-height: 1.7; color: #495057; font-size: 14px; }
/* ===== progress 进度条 ===== */
.progress-demo { margin: 15px 0; }
.progress-label { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13px; color: #666; }
progress {
width: 100%;
height: 20px;
border: none;
border-radius: 10px;
overflow: hidden;
}
progress::-webkit-progress-bar { background: #e9ecef; border-radius: 10px; }
progress::-webkit-progress-value {
background: linear-gradient(90deg, #6366f1, #a78bfa);
border-radius: 10px;
transition: width 0.5s ease;
}
progress::-moz-progress-bar {
background: linear-gradient(90deg, #6366f1, #a78bfa);
border-radius: 10px;
}
/* 不确定进度条动画 */
progress[indeterminate]::-webkit-progress-value {
width: 30% !important;
animation: indeterminate 1.5s infinite linear;
background: linear-gradient(90deg, transparent, #6366f1, transparent);
}
@keyframes indeterminate {
0% { transform: translateX(-100%); }
100% { transform: translateX(400%); }
}
/* ===== meter 测量值 ===== */
meter {
width: 100%;
height: 22px;
margin: 8px 0;
}
.meter-row { margin: 12px 0; }
.meter-label { font-size: 14px; color: #495057; margin-bottom: 4px; display: flex; justify-content: space-between; }
/* ===== figure 图片说明 ===== */
figure {
margin: 20px 0;
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 20px;
text-align: center;
}
figure img {
max-width: 100%;
border-radius: 6px;
margin-bottom: 12px;
}
figcaption {
font-size: 13px;
color: #6c757d;
font-style: italic;
line-height: 1.5;
}
/* 代码卡片 */
.code-card {
background: #1e1e2e;
color: #cdd6f4;
padding: 16px 20px;
border-radius: 8px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
line-height: 1.6;
overflow-x: auto;
margin: 10px 0;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 15px;
margin-top: 20px;
}
.info-item {
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 8px;
padding: 16px;
}
.info-item h4 { color: #166534; font-size: 14px; margin-bottom: 6px; }
.info-item p { color: #15803d; font-size: 13px; line-height: 1.6; }
.info-item code { background: rgba(22,101,52,0.1); padding: 2px 6px; border-radius: 3px; font-size: 12px; }
</style>
</head>
<body>
<div class="container">
<h1>🎛️ 页面显示增强标签</h1>
<p class="subtitle">details/summary · progress · meter · figure/figcaption</p>
<!-- ========== 1. details/summary 折叠面板 ========== -->
<h2>1️⃣ 折叠面板 <details> & <summary></h2>
<p style="color: #666; font-size: 14px; margin-bottom: 12px;">原生实现的展开/收起功能，无需 JavaScript：</p>
<details open>
<summary>📖 什么是 HTML5？</summary>
<div>
HTML5 是超文本标记语言的第五个版本，代表了现代 Web 平台的一整套技术规范。
它引入了大量新特性，包括语义化标签、多媒体支持、Canvas 绘图、本地存储等。
</div>
</details>
<details>
<summary>⚡ 核心特性有哪些？</summary>
<div>
<ul style="margin-left: 20px; margin-top: 8px;">
<li><strong>语义化</strong>：header, nav, article, section, aside, footer</li>
<li><strong>多媒体</strong>：原生 video/audio 支持，告别 Flash</li>
<li><strong>图形</strong>：canvas 2D 绑图、SVG、WebGL</li>
<li><strong>存储</strong>：localStorage、sessionStorage、IndexedDB</li>
<li><strong>API</strong>：Geolocation、Web Workers、WebSocket</li>
</ul>
</div>
</details>
<details>
<summary>❓ 常见问题解答</summary>
<div>
<p><strong>Q: HTML5 需要特殊的浏览器吗？</strong><br>
A: 所有现代浏览器都支持 HTML5，包括 Chrome、Firefox、Safari、Edge 等。</p>
<p style="margin-top: 10px;"><strong>Q: XHTML 还在使用吗？</strong><br>
A: XHTML 已被 HTML5 取代，不再推荐在新项目中使用。</p>
</div>
</details>
<!-- ========== 2. progress 进度条 ========== -->
<h2>2️⃣ 进度条 <progress></h2>
<div class="progress-demo">
<div class="progress-label">
<span>文件上传进度</span>
<span id="progress-text">72%</span>
</div>
<progress id="file-progress" value="72" max="100"></progress>
</div>
<div class="progress-demo">
<div class="progress-label">
<span>任务完成度</span>
<span>45%</span>
</div>
<progress value="45" max="100"></progress>
</div>
<div class="progress-demo">
<div class="progress-label">
<span>加载中...（不确定进度）</span>
<span>⏳</span>
</div>
<progress indeterminate max="100"></progress>
</div>
<div style="display: flex; gap: 10px; margin-top: 15px;">
<button onclick="updateProgress()" style="padding: 8px 16px; background: #6366f1; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 13px;">
模拟进度增长
</button>
<button onclick="resetProgress()" style="padding: 8px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 13px;">
重置
</button>
</div>
<!-- ========== 3. meter 测量值 ========== -->
<h2>3️⃣ 标量测量 <meter></h2>
<p style="color: #666; font-size: 14px; margin-bottom: 12px;">显示已知范围内的值（不同于 progress 的动态进度）：</p>
<div class="meter-row">
<div class="meter-label">
<span>磁盘使用量</span>
<span>65GB / 100GB</span>
</div>
<meter min="0" max="100" value="65" low="20" high="80" optimum="50"></meter>
</div>
<div class="meter-row">
<div class="meter-label">
<span>内存占用</span>
<span>8.2GB / 16GB</span>
</div>
<meter min="0" max="16" value="8.2" low="4" high="12" optimum="6"></meter>
</div>
<div class="meter-row">
<div class="meter-label">
<span>考试分数</span>
<span>92 / 100</span>
</div>
<meter min="0" max="100" value="92" low="60" high="80" optimum="90"></meter>
</div>
<div class="meter-row">
<div class="meter-label">
<span>库存预警</span>
<span>15 / 100</span>
</div>
<meter min="0" max="100" value="15" low="20" high="80" optimum="60"></meter>
</div>
<!-- ========== 4. figure 图片说明 ========== -->
<h2>4️⃣ 图文组合 <figure> & <figcaption></h2>
<figure>
<img src="https://picsum.photos/seed/html5-semantics/600/280.jpg" alt="HTML5 语义化结构示意图" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';" />
<div style="display:none; padding: 40px; color: #94a3b8;">图片加载失败（演示占位符效果）</div>
<figcaption>
图 1：HTML5 语义化布局结构示意图，展示了 header、nav、main、article、aside、footer 等语义元素的位置关系。
</figcaption>
</figure>
<!-- 说明卡片 -->
<div class="info-grid">
<div class="info-item">
<h4><details> 折叠面板</h4>
<p>原生可折叠区域，<code>open</code> 属性控制默认状态。<code><summary></code> 作为标题触发器。</p>
</div>
<div class="info-item">
<h4><progress> 进度条</h4>
<p>表示任务完成度。<code>value/max</code> 设置确定进度；不加 value 则为不确定动画模式。</p>
</div>
<div class="info-item">
<h4><meter> 测量值</h4>
<p>表示已知范围内的标量值。<code>low/high/optimum</code> 可设置阈值区间，浏览器自动变色。</p>
</div>
<div class="info-item">
<h4><figure> 自包含媒体</h4>
<p>用于包裹独立的媒体内容（图片/图表/代码），配合 <code><figcaption></code> 提供说明文字。</p>
</div>
</div>
</div>
<script>
let currentProgress = 72;
function updateProgress() {
const bar = document.getElementById('file-progress');
const text = document.getElementById('progress-text');
if (currentProgress >= 100) {
currentProgress = 0;
} else {
currentProgress += Math.floor(Math.random() * 15) + 5;
if (currentProgress > 100) currentProgress = 100;
}
bar.value = currentProgress;
text.textContent = currentProgress + '%';
}
function resetProgress() {
const bar = document.getElementById('file-progress');
const text = document.getElementById('progress-text');
currentProgress = 0;
bar.value = 0;
text.textContent = '0%';
}
</script>
</body>
</html>块级内容标签 <figure>
<figure> 标签用于包裹具有自包含性质的媒体内容（如图片、图表、代码片段、视频等），并通常与 <figcaption> 标签配合使用来提供标题或说明
- 语义化标记：明确表示内容是一个独立的、自描述的媒体元素
- 可移动性：内容可以从文档流中移除而不影响上下文理解
- 常与
<figcaption>配合：为媒体内容提供标题或说明 - 块级元素：默认独占一行
基本语法：
html
<figure>
<img src="example.jpg" alt="示例图片" />
<!-- 可选的标题/说明 -->
<figcaption>这是图片的说明文字</figcaption>
</figure>注意事项：
- 语义化优先：仅在内容确实具有自包含性质时使用
<figure> - 替代文本：对于图片等媒体，务必提供有意义的
alt属性 - 可访问性：确保屏幕阅读器能正确识别
<figure>和<figcaption> - 不滥用：不是所有图片都需要放在
<figure>中，只有具有自包含性质的才使用
展开收缩区域标签 <details>
<details> 标签用于创建可折叠的内容区域。它允许用户通过点击来展开或收起内容，非常适合用于显示附加信息、帮助文本、设置选项等场景
- 交互式折叠/展开：用户可以点击切换内容的显示状态
- 语义化标记：明确表示内容是可折叠的
- 原生支持：无需 JavaScript 即可实现折叠效果
- 可访问性：屏幕阅读器能正确识别折叠状态
- 可自定义样式：可以通过 CSS 修改外观
基本语法：
html
<details>
<summary>点击查看详情</summary>
这里是要显示的详细内容...
</details>进度标签 <progress>
<progress> 标签用于表示任务的进度（如文件上传、下载进度、任务完成百分比等）。提供可视化的方式来展示进度信息，比传统的文本百分比更具表现力：
- 语义化标记：明确表示内容是进度指示器
- 原生支持：无需 JavaScript 即可显示基本进度条
- 可访问性：屏幕阅读器能识别进度状态
- 可自定义样式：可通过 CSS 修改外观
- 双类型支持：
- 确定进度（有具体数值）
- 不确定进度（会显示动画效果）
基本语法：
html
<!-- 确定进度 -->
<progress value="当前值" max="最大值"></progress>
<!-- 不确定进度（动画效果） -->
<progress></progress>度量数量值标签 <meter>
<meter> 标签用于表示已知范围内的标量测量值或分数值。它通常用于显示度量衡（如磁盘使用率、查询结果的相关性评分等），<meter> 表示的是一个特定范围内的值，而不是动态变化的进度
- 语义化标记：明确表示内容是一个测量值
- 范围可视化：直观显示值在指定范围内的位置
- 可访问性：屏幕阅读器能识别测量值及其范围
- 可自定义样式：可通过 CSS 修改外观
- 多种显示模式：支持不同类型的测量值显示
html
<meter min="最小值" max="最大值" value="当前值"></meter>核心属性：
| 属性 | 描述 | 示例 | 是否必需 |
|---|---|---|---|
value | 当前测量值 | value="65" | 是（除非使用form关联） |
min | 范围的最小值 | min="0" | 否（默认为 0） |
max | 范围的最大值 | max="100" | 否（默认为 1） |
low | 低值阈值 | low="20" | 否 |
high | 高值阈值 | high="80" | 否 |
optimum | 最佳值 | optimum="90" | 否 |
form | 关联的表单 | form="form1" | 否 |
文本编辑标签
<h4>014-document-revision.html</h4>html
<!-- 来源：2-设计网页文本内容.md - 文档修订标签（del/ins/s） -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【014】文档修订标签系统</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
}
h1 { color: #333; margin-bottom: 6px; font-size: 26px; }
.subtitle { color: #888; margin-bottom: 30px; font-size: 14px; }
h2 { color: #495057; margin: 25px 0 15px; font-size: 19px; }
del {
background-color: #ffe6e6;
color: #c0392b;
text-decoration: line-through;
}
ins {
background-color: #e8f8f5;
color: #27ae60;
text-decoration: none;
border-bottom: 2px solid #27ae60;
font-weight: 500;
}
s {
color: #999;
text-decoration: line-through;
}
.document {
background-color: #fff;
padding: 24px;
border-radius: 8px;
margin: 18px 0;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
border-left: 4px solid #6366f1;
}
.document h3 { color: #4338ca; margin-bottom: 12px; font-size: 17px; }
.document p { margin-bottom: 10px; color: #374151; font-size: 15px; line-height: 1.8; }
.document .price-old {
font-size: 18px;
}
.document .price-new {
font-size: 24px;
color: #dc2626;
font-weight: bold;
}
.meta {
font-size: 0.85em;
color: #6b7280;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #e5e7eb;
}
.legend {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 25px;
padding: 15px 20px;
background: #fff;
border-radius: 8px;
font-size: 14px;
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-del { background: #ffe6e6; color: #c0392b; text-decoration: line-through; padding: 2px 8px; border-radius: 3px; }
.legend-ins { background: #e8f8f5; color: #27ae60; border-bottom: 2px solid #27ae60; padding: 2px 8px; border-radius: 3px; }
.legend-s { color: #999; text-decoration: line-through; padding: 2px 8px; border-radius: 3px; }
.comparison-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 14px;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.comparison-table th,
.comparison-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.comparison-table th {
background: #f8f9fa;
font-weight: 600;
color: #374151;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.comparison-table td:first-child { font-weight: 600; color: #4338ca; font-family: ui-monospace, monospace; font-size: 13px; }
</style>
</head>
<body>
<h1>📝 文档修订标签系统</h1>
<p class="subtitle">del · ins · s — 用于标记文档变更、价格调整、过期内容</p>
<!-- 图例 -->
<div class="legend">
<div class="legend-item"><span class="legend-del">删除的内容</span> <del></div>
<div class="legend-item"><span class="legend-ins">新增的内容</span> <ins></div>
<div class="legend-item"><span class="legend-s">过时的内容</span> <s></div>
</div>
<!-- 示例1：商品促销 -->
<h2>🏷️ 场景一：商品促销</h2>
<div class="document">
<h3>🔥 限时特惠</h3>
<p>
<s class="price-old">原价：¥599</s><br /><br />
<span class="price-new">现价：<ins>¥399</ins></span>
</p>
<p class="meta">📅 活动截止：2024年12月31日 | 💾 库存紧张，仅剩 23 件</p>
</div>
<!-- 示例2：文档修订 -->
<h2>📄 场景二：文档修订记录</h2>
<div class="document">
<h3>HTML5 新特性说明</h3>
<p>
HTML5 引入了许多新的语义化元素。
<del datetime="2024-01-15T10:00:00" cite="https://example.com/changelog">
其中包括新的表单类型和验证功能。
</del>
<ins datetime="2024-01-15T10:00:00" cite="https://example.com/changelog">
其中包括新的表单类型、验证功能以及多媒体支持。
</ins>
</p>
<p>
<del>这些特性在所有浏览器中都已得到完美支持。</del>
<ins>
大部分特性在现代浏览器中得到了良好支持，建议检查特定功能的兼容性。
</ins>
</p>
<p class="meta">📝 最后更新：2024年1月15日 | 👤 编辑者：张三</p>
</div>
<!-- 示例3：API 版本更新 -->
<h2>🔧 场景三：API 版本更新通知</h2>
<div class="document">
<h3>API 版本更新说明</h3>
<p>
<del cite="https://api.example.com/v1">
⚠️ v1.0 接口将于 2024年6月30日 下线。
</del>
<ins cite="https://api.example.com/v2">
✅ v2.0 接口现已上线，提供更好的性能和安全性。
</ins>
</p>
<p class="meta">
📎 版本更新详情：
<a href="#" style="color: #4338ca;" onclick="return false;">查看完整更新日志 →</a>
</p>
</div>
<!-- 对比表 -->
<h2>📊 三种标签的区别</h2>
<table class="comparison-table">
<thead>
<tr>
<th>标签</th>
<th>语义含义</th>
<th>典型场景</th>
<th>默认样式</th>
</tr>
</thead>
<tbody>
<tr>
<td><del></td>
<td>文档中被删除的内容</td>
<td>版本控制、修订历史、法律文件修改</td>
<td><span class="legend-del">删除线</span></td>
</tr>
<tr>
<td><ins></td>
<td>文档中新插入的内容</td>
<td>版本更新、补充说明、修正内容</td>
<td><span class="legend-ins">下划线</span></td>
</tr>
<tr>
<td><s></td>
<td>不再准确或相关的内容</td>
<td>促销原价、过期公告、失效声明</td>
<td><span class="legend-s">删除线</span></td>
</tr>
</tbody>
</table>
</body>
</html>插入文本标签 <ins>
<ins> 标签表示文档中添加的文本，通常用于标记文档修订或更新内容。浏览器通常会以带下划线的形式显示。
特点：
- 语义化标记：明确表示插入的内容
- 默认样式：通常显示为下划线文本
- 可选属性：
cite（引用 URL）和datetime（修改时间） - 文档修订：常与
<del>标签配合使用
html
<p>原价：<del>¥199</del> 现价：<ins>¥149</ins></p>
<p>
HTML5 新增了许多语义化标签，
<ins cite="https://html.spec.whatwg.org/" datetime="2024-01-15">
如 header、nav、article 等
</ins>
</p>删除文本标签 <del>
<del> 标签表示文档中删除的文本，通常用于标记已废弃或不再准确的内容。浏览器通常会以删除线显示。
特点：
- 语义化标记：明确表示删除的内容
- 默认样式：通常显示为删除线文本
- 可选属性：
cite（引用 URL）和datetime（删除时间） - 版本控制：帮助用户了解文档的修改历史
html
<p>
<del datetime="2024-01-15" cite="https://example.com/update-log">
旧版浏览器支持已停止
</del>
</p>
<p>
项目截止日期：<del>2024-01-01</del>
<ins>2024-02-01</ins>（延期一个月）
</p>不再准确的文本标签 <s>
<s> 标签表示不再准确或不再相关的内容，但不表示文档的删除或插入。与 <del> 不同，<s> 不表示文档修订，而是表示内容已过时。
区别对比：
| 标签 | 含义 | 使用场景 | 默认样式 |
|---|---|---|---|
<del> | 文档删除的内容 | 文档修订、版本更新 | 删除线 |
<ins> | 文档插入的内容 | 文档修订、版本更新 | 下划线 |
<s> | 不再准确的内容 | 促销信息、过期内容、不相关的内容 | 删除线 |
html
<p>促销商品：<s>原价 ¥299</s> 现价 ¥199</p>
<p><s>IE 浏览器已不再推荐使用</s>，建议使用现代浏览器。</p>综合示例：文档修订系统
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>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
del {
background-color: #ffe6e6;
color: #d32f2f;
text-decoration: line-through;
}
ins {
background-color: #e6ffe6;
color: #388e3c;
text-decoration: none;
border-bottom: 2px solid #388e3c;
}
s {
color: #999;
text-decoration: line-through;
}
.document {
background-color: #f9f9f9;
padding: 20px;
border-radius: 5px;
margin: 20px 0;
}
.meta {
font-size: 0.9em;
color: #666;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #ddd;
}
</style>
</head>
<body>
<h1>文档修订标签示例</h1>
<h2>1. 商品促销示例</h2>
<div class="document">
<h3>限时特惠</h3>
<p>
<s>原价：¥599</s><br />
<strong style="font-size: 1.5em; color: #e53935;">现价：¥399</strong>
</p>
<p class="meta">活动截止：2024年12月31日</p>
</div>
<h2>2. 文档修订示例</h2>
<div class="document">
<h3>HTML5 新特性说明</h3>
<p>
HTML5 引入了许多新的语义化元素。
<del datetime="2024-01-15" cite="https://example.com/changelog">
其中包括新的表单类型和验证功能。
</del>
<ins datetime="2024-01-15" cite="https://example.com/changelog">
其中包括新的表单类型、验证功能以及多媒体支持。
</ins>
</p>
<p>
<del>这些特性在所有浏览器中都已得到完美支持。</del>
<ins>
大部分特性在现代浏览器中得到了良好支持，建议检查特定功能的兼容性。
</ins>
</p>
<p class="meta">最后更新：2024年1月15日</p>
</div>
<h2>3. 技术文档示例</h2>
<div class="document">
<h3>API 版本更新说明</h3>
<p>
<del cite="https://api.example.com/v1">
v1.0 接口将于 2024年6月30日 下线。
</del>
<ins cite="https://api.example.com/v2">
v2.0 接口现已上线，提供更好的性能和安全性。
</ins>
</p>
<p class="meta">
版本更新详情：
<a href="https://api.example.com/changelog">查看完整更新日志</a>
</p>
</div>
</body>
</html>最佳实践：
- 区分用途：使用
<del>和<ins>表示文档修订，使用<s>表示过时信息 - 提供上下文：为
<del>和<ins>添加cite和datetime属性，说明修改原因和时间 - 可访问性：确保颜色不是唯一的标识方式，使用背景色或下划线等辅助视觉提示
- CSS 增强：通过 CSS 为插入和删除的文本提供更明显的视觉区分
其他标签
<h4>015-other-text-tags.html</h4>html
<!-- 来源：2-设计网页文本内容.md - 其他文本标签综合示例 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【015】其他文本标签综合示例</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
}
h1 { color: #333; margin-bottom: 6px; font-size: 26px; }
.subtitle { color: #888; margin-bottom: 30px; font-size: 14px; }
ruby rt { font-size: 0.75em; color: #6366f1; }
rp { display: none; }
var { font-style: italic; color: #0066cc; font-weight: 600; }
dfn { font-style: italic; font-weight: bold; color: #333; border-bottom: 1px dotted #6366f1; }
address {
font-style: normal;
display: block;
margin: 1em 0;
padding: 1.2em 1.5em;
background-color: #f0f9ff;
border-left: 4px solid #0ea5e9;
border-radius: 0 8px 8px 0;
color: #334155;
line-height: 1.8;
}
address a { color: #0ea5e9; text-decoration: none; }
address a:hover { text-decoration: underline; }
.demo-section {
margin: 2em 0;
padding: 1.3em 1.5em;
border: 1px solid #e2e8f0;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.demo-section h2 { color: #4338ca; margin-bottom: 12px; font-size: 17px; }
.demo-section h3 { color: #64748b; margin: 12px 0 8px; font-size: 15px; }
.demo-section p { color: #374151; margin-bottom: 8px; font-size: 15px; line-height: 1.8; }
.demo-section ul { margin-left: 20px; margin-top: 8px; }
.demo-section li { color: #374151; margin: 5px 0; line-height: 1.6; }
bdi { background: #fef3c7; padding: 2px 4px; border-radius: 3px; }
bdo[dir="rtl"] { background: #ede9fe; padding: 4px 8px; border-radius: 4px; display: inline-block; }
data { font-weight: 600; color: #059669; }
.tag-badge {
display: inline-block;
background: #6366f1;
color: white;
font-size: 11px;
padding: 2px 8px;
border-radius: 10px;
font-family: ui-monospace, monospace;
margin-left: 6px;
vertical-align: middle;
}
.info-panel {
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-radius: 8px;
padding: 16px 20px;
margin-top: 25px;
font-size: 14px;
line-height: 1.8;
}
.info-panel strong { color: #047857; }
.info-panel code { background: rgba(4,120,87,0.1); padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 13px; }
</style>
</head>
<body>
<h1>📖 其他文本标签综合示例</h1>
<p class="subtitle">ruby · var · address · dfn · data · bdi · bdo</p>
<!-- ===== ruby 注音 ===== -->
<div class="demo-section">
<h2>文字标注 <span class="tag-badge"><ruby></span></h2>
<p style="font-size: 20px; text-align: center; padding: 15px; background: #f8fafc; border-radius: 6px;">
<ruby>梦<rt>mèng</rt></ruby>
<ruby>在<rt>zài</rt></ruby>
<ruby>远<rt>yuǎn</rt></ruby>
<ruby>方<rt>fāng</rt></ruby>，
<ruby>路<rt>lù</rt></ruby>
<ruby>在<rt>zài</rt></ruby>
<ruby>脚<rt>jiǎo</rt></ruby>
<ruby>下<rt>xià</rt></ruby>
</p>
<p style="margin-top: 12px; color: #64748b; font-size: 13px;">
<code><ruby></code> 标签用于东亚文字的注音或注释，<code><rt></code> 为注音文本，<code><rp></code> 为不支持浏览器的兼容括号。
</p>
</div>
<!-- ===== var 变量 ===== -->
<div class="demo-section">
<h2>声明变量 <span class="tag-badge"><var></span></h2>
<p>例如定义变量 <var>x</var> 的值为 <var>y + 6</var>，可以表示为：</p>
<p style="font-size: 18px; padding: 10px; background: #f8fafc; border-radius: 6px; text-align: center;">
<var>x</var> = <var>y</var> + 6
</p>
<p>爱因斯坦质能方程：</p>
<p style="font-size: 18px; padding: 10px; background: #f8fafc; border-radius: 6px; text-align: center;">
<var>E</var> = <var>m</var><var>c</var><sup>2</sup>
</p>
</div>
<!-- ===== address 联系信息 ===== -->
<div class="demo-section">
<h2>联系信息 <span class="tag-badge"><address></span></h2>
<p>如有任何技术问题或合作意向，欢迎联系我们：</p>
<address>
<strong>📧 电子邮件：</strong><a href="mailto:support@example.com">support@example.com</a><br />
<strong>🌐 官方网站：</strong><a href="#">www.example.com</a><br />
<strong>📍 公司地址：</strong>北京市朝阳区建国路 88 号<br />
<strong>📞 联系电话：</strong>+86 10 8888-8888<br />
<strong>🕐 工作时间：</strong>周一至周五 9:00 - 18:00
</address>
</div>
<!-- ===== dfn 定义术语 ===== -->
<div class="demo-section">
<h2>定义术语 <span class="tag-badge"><dfn></span></h2>
<p>
<dfn id="def-frontend">前端开发</dfn>是指创建 Web 页面或应用程序前端界面的过程，
主要涉及 HTML、CSS 和 JavaScript 三大核心技术。
</p>
<p>
<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>
是构建网页的标准标记语言，用于定义页面的结构和内容。
</p>
<p>
现代 Web 开发中，<a href="#def-frontend" style="color:#4338ca;">前端开发</a>
的技能要求越来越全面，需要掌握框架、构建工具、性能优化等多方面知识。
</p>
</div>
<!-- ===== data 机器可读数据 ===== -->
<div class="demo-section">
<h2>机器可读数据 <span class="tag-badge"><data></span></h2>
<p>产品列表（data 属性提供机器可读的 SKU 编号）：</p>
<ul>
<li><data value="SKU-001">基础版</data> — ¥99/年</li>
<li><data value="SKU-002">专业版</data> — ¥299/年</li>
<li><data value="SKU-003">企业版</data> — ¥999/年</li>
<li><data value="SKU-004-ULTIMATE">旗舰版</data> — ¥2999/年</li>
</ul>
<p style="margin-top: 10px; color: #64748b; font-size: 13px;">
书籍信息：<data value="978-7-115-54628-5">JavaScript 高级程序设计（第4版）</data>
</p>
</div>
<!-- ===== bdi / bdo 双向文本 ===== -->
<div class="demo-section">
<h2>双向文本 <span class="tag-badge"><bdi></span> <span class="tag-badge"><bdo></span></h2>
<h3>bdi 示例（自动隔离方向）</h3>
<p>用户排行榜：</p>
<ul>
<li>User <bdi>إيان</bdi>: 90 points 🥇</li>
<li>User <bdi>Julia</bdi>: 80 points 🥈</li>
<li>User <bdi>مريم</bdi>: 70 points 🥉</li>
<li>User <bdi>张三</bdi>: 65 points</li>
</ul>
<h3>bdo 示例（手动覆盖方向）</h3>
<p>正常文本：<bdo dir="rtl">这段文字会从右到左显示</bdo></p>
<p>阿拉伯语：<bdo dir="rtl">مرحبا بالعالم</bdo>（你好世界）</p>
</div>
<div class="info-panel">
<strong>💡 使用要点总结：</strong><br>
• <code><ruby></code> 用于拼音注音，<code><rt></code> 注音文本，<code><rp></code> 兼容性括号<br>
• <code><var></code> 表示数学/编程中的变量名，浏览器默认斜体显示<br>
• <code><address></code> 专用于联系信息，通常放在 footer 或 article 内<br>
• <code><dfn></code> 标记首次定义的术语，配合 <code>id</code> 可建立引用关系<br>
• <code><data value="..."></code> 提供机器可读格式，适合产品编号/SKU<br>
• <code><bdi></code> 自动检测文本方向；<code><bdo dir="rtl"></code> 手动指定 RTL 显示
</div>
</body>
</html>文字标注标签 <ruby>
<ruby> 标签用于东亚文字的注音或注释，常用于显示汉字的拼音或日语假名。在默认情况下，标注文字会比正常文字小，但在 HTML 中可以像设置其他文字一样调整标注文字的大小、颜色等。
特点：
- 语义化标记：明确表示注音内容
- 支持嵌套：可以在 ruby 元素内部使用多个
<rt>元素 - 浏览器支持：现代浏览器支持良好，不支持的浏览器会显示为普通文本
- 可自定义样式：可以通过 CSS 调整注音的大小、位置等
子元素：
<rt>：ruby text，注音文本<rp>：ruby parenthesis，括号（用于不支持 ruby 的浏览器）
html
<!-- 基本用法 -->
<ruby>
汉<rt>hàn</rt>
字<rt>zì</rt>
</ruby>
<!-- 带括号兼容性写法 -->
<ruby>
汉字
<rp>(</rp><rt>hàn zì</rt><rp>)</rp>
</ruby>
<!-- 日语示例 -->
<ruby>
漢字
<rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>声明变量标签 <var>
<var> 标签表示数学表达式或编程上下文中的变量。浏览器通常将其显示为斜体。当通过网页展示某些知识时，为了统一突出变量（如数学公式等），常常将其设置为斜体。
特点：
- 语义化标记：明确表示变量名称
- 默认样式：通常为斜体
- 可自定义：可通过 CSS 调整样式
- 适用场景：数学公式、编程代码中的变量
html
<p>计算公式：<var>E</var> = <var>m</var><var>c</var><sup>2</sup></p>
<p>如果变量 <var>x</var> 的值为 5，那么 <var>y</var> = <var>x</var> + 3 的结果为 8。</p>设置地址文字标签 <address>
<address> 标签用于定义联系信息，如作者、组织或文档的所有者信息。它可以包含电子邮件地址、电话号码、物理地址、网站链接等信息。
特点：
- 语义化标记：明确表示联系信息
- 块级元素：默认独占一行
- 默认样式：通常为斜体
- 可访问性：帮助搜索引擎和辅助技术识别联系信息
注意事项：
- 不应包含邮政地址以外的信息（如发布日期）
- 通常用在
<footer>、<article>或<body>中 - 不应嵌套使用
html
<address>
作者：<a href="mailto:example@email.com">张三</a><br />
地址：北京市朝阳区某某街道<br />
电话：+86 10 12345678
</address>定义术语标签 <dfn>
<dfn> 标签用于标记被定义的术语。它表示一个术语的定义实例，通常在文档中首次出现该术语时使用。
特点：
- 语义化标记：明确表示术语的定义
- 默认样式：通常为斜体
- 与
<abbr>配合：常用于缩写词的定义 - 可访问性：帮助用户理解专业术语
html
<p>
<dfn>HTML</dfn>（HyperText Markup Language）是一种用于创建网页的标准标记语言。
</p>
<p>
<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>
是一种用来为结构化文档添加样式的计算机语言。
</p>
<!-- 使用 id 属性建立引用关系 -->
<p>
<dfn id="def-api">API</dfn> 是应用程序编程接口的缩写。
</p>
<p>
现代 Web 开发中，<a href="#def-api">API</a> 的使用非常广泛。
</p>机器可读数据标签 <data>
<data> 标签将给定内容与机器可读的翻译联系起来。如果内容是时间或日期相关的，应使用 <time> 标签。
特点：
- 语义化标记：提供机器可读的数据格式
- value 属性：必需，提供机器可读的数据
- 适用场景：产品编号、版本号、SKU 等需要机器解析的数据
- SEO 友好：帮助搜索引擎理解内容
html
<p>
产品名称：<data value="PROD-12345">高级版</data>
</p>
<ul>
<li><data value="3967381398">Gamer Headset</data></li>
<li><data value="3967381399">Laptop Stand</data></li>
<li><data value="3967381400">Desk Lamp</data></li>
</ul>双向文本标签 <bdi> 和 <bdo>
<bdi>（Bi-Directional Isolation）标签用于隔离可能以不同方向编写的文本，防止文本方向影响周围的文本。<bdo>（Bi-Directional Override）标签用于覆盖文本的当前方向。
特点：
- 多语言支持：处理从右到左（RTL）和从左到右（LTR）的混合文本
- 自动检测：
<bdi>会自动检测文本方向 - 手动指定：
<bdo>需要通过dir属性指定方向 - 国际化必需：在支持多语言的网站中非常重要
html
<!-- bdi 示例：隔离用户名方向 -->
<ul>
<li>User <bdi>إيان</bdi>: 90 points</li>
<li>User <bdi>Julia</bdi>: 80 points</li>
<li>User <bdi>مريم</bdi>: 70 points</li>
</ul>
<!-- bdo 示例：手动覆盖文本方向 -->
<p>
正常文本：<bdo dir="rtl">这段文字会从右到左显示</bdo>
</p>
<p>
English text: <bdo dir="rtl">مرحبا بالعالم</bdo>
</p>综合示例
html
<!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>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
ruby rt {
font-size: 0.8em;
color: #666;
}
var {
font-style: italic;
color: #0066cc;
}
dfn {
font-style: italic;
font-weight: bold;
color: #333;
}
address {
font-style: italic;
color: #333;
display: block;
margin: 1em 0;
padding: 1em;
background-color: #f5f5f5;
border-left: 3px solid #007bff;
}
.demo-section {
margin: 2em 0;
padding: 1em;
border: 1px solid #eee;
border-radius: 5px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>HTML5 文本标签示例</h1>
<section class="demo-section">
<h2>文字标注标签 <ruby></h2>
<ruby>
梦在远方，路在脚下
<rt>mèng zài yuǎn fāng, lù zài jiǎo xià</rt>
</ruby>
</section>
<section class="demo-section">
<h2>声明变量标签 <var></h2>
<p>例如定义变量 <var>x</var> 的值为 <var>y + 6</var>，可以表示为：</p>
<p><var>x</var> = <var>y</var> + 6</p>
<p>质能方程：<var>E</var> = <var>m</var><var>c</var><sup>2</sup></p>
</section>
<section class="demo-section">
<h2>设置地址文字标签 <address></h2>
<p>如有技术问题请访问：</p>
<address>
官方网站：www.example.com<br />
技术支持：support@example.com<br />
地址：北京市朝阳区某某街道
</address>
</section>
<section class="demo-section">
<h2>定义术语标签 <dfn></h2>
<p>
<dfn id="def-frontend">前端开发</dfn>是指创建 Web 页面或 app 等
前端界面给用户的过程。
</p>
<p>
<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>
是构建网页的标准标记语言。
</p>
</section>
<section class="demo-section">
<h2>机器可读数据标签 <data></h2>
<ul>
<li><data value="SKU-001">基础版</data> - ¥99</li>
<li><data value="SKU-002">专业版</data> - ¥299</li>
<li><data value="SKU-003">企业版</data> - ¥999</li>
</ul>
</section>
<section class="demo-section">
<h2>双向文本标签 <bdi> 和 <bdo></h2>
<h3>bdi 示例（自动检测方向）</h3>
<ul>
<li>User <bdi>إيان</bdi>: 90 points</li>
<li>User <bdi>Julia</bdi>: 80 points</li>
<li>User <bdi>مريم</bdi>: 70 points</li>
</ul>
<h3>bdo 示例（手动指定方向）</h3>
<p>正常文本：<bdo dir="rtl">这段文字会从右到左显示</bdo></p>
</section>
</body>
</html>主体结构标签
主体结构元素定义文档的主要内容区块，创建明确的层次结构和导航上下文。这些元素会生成隐式的标题和大纲级别，影响文档的语义结构：
<article>>标签表示网页中独立的自包含内容，如论坛帖子、博客条目、用户评论等。另外<article>标签可以嵌套使用，内层的内容在原则上需要与外层的内容相关联<section>标签定义文档中的节或区段，如章节、页眉、页脚或文档中的其他部分，它通常与<h>标签一起使用<nav>标签用来定义网页导航链接的部分。一个页面中可以有多个<nav>标签，作为页面整体或不同部分的导航<aside>标签用来定义其所处内容之外的内容，其内容应该与附近的内容相关，例如用于文章的侧栏等
主体结构的特点：
- 创建大纲级别：这些元素会参与文档的大纲结构
- 语义明确：明确表示内容的组织方式
- 可独立存在：
<article>等元素可以独立于页面其他部分 - 影响 SEO：良好的主题结构有助于搜索引擎理解内容
html
<section>
<h1~h6>设置标题</h1~h6>
<p>段落文字</p>
</section>在 HTML 中，<article> 标签可被看作一种特殊的 <section> 标签，它比 <section>标签更强调独立性，即 <section>标签强调分段或分块，而 <article> 标签强调独立性。
总结来说：如果一块内容相对比较独立、完整，则应该使用 <article> 标签；如果想将一块内容分成几段，则应该使用 <section> 标签；如果一个内容区块中没有标题，则尽量不要使用 <section> 标签
非主体结构标签
非主体结构元素不创建新的大纲级别，主要用于辅助性内容展示或分组
| 元素 | 描述 | 要点/用途 |
|---|---|---|
<div> | 通用容器 | 无特定语义的块级容器，常用于样式化或脚本操作。 |
<span> | 通用内联容器 | 无特定语义的内联容器，常用于样式化或脚本操作。 |
<header> | 页眉/节头 | 包含标题、logo、导航等。不创建新的大纲级别。 |
<footer> | 页脚/节尾 | 包含版权信息、联系方式等。不创建新的大纲级别。 |
<figure> | 自包含内容 | 用于图片、图表、代码等自包含内容。通常与<figcaption>配合使用。 |
<main> | 主要内容区域 | 文档的主要内容。不应包含重复内容（如站点导航）。 |
现代文本相关元素
<search> 搜索区域
<search> 元素（2023 年所有主流浏览器支持）用于标识搜索或过滤功能的区域，比 <div> 或 <form> 更具语义：
html
<search>
<form action="/search" method="get">
<label for="q">搜索</label>
<input type="search" id="q" name="q" placeholder="输入关键词" />
<button type="submit">搜索</button>
</form>
</search>
<header>
<nav>
<a href="/">首页</a>
<search>
<input type="search" placeholder="站内搜索" />
</search>
</nav>
</header>与 <form> 的区别： <search> 强调语义（"这是搜索区域"），<form> 强调行为（"提交数据"）。搜索功能可以不涉及表单提交（如 JS 过滤），此时用 <search> 更合适。
<dialog> 对话框
<dialog> 元素提供原生对话框能力，详见 4-Dialog与Popover：
html
<dialog id="infoDialog">
<h2>操作提示</h2>
<p>确定要继续吗？</p>
<form method="dialog">
<button value="cancel">取消</button>
<button value="confirm">确认</button>
</form>
</dialog><data> 和 <time> 机器可读标注
html
<data value="978-7-115-54628-5">JavaScript 高级程序设计（第4版）</data>
<time datetime="2026-05-22">2026年5月22日</time>
<time datetime="2026-05-22T14:30">下午2:30</time>
<time datetime="P3DT2H">3天2小时</time>用途： 搜索引擎和辅助技术可以解析 datetime/value 属性中的机器可读格式，提升内容的结构化程度。
现代文本排版 CSS
text-wrap 属性
CSS 新增的 text-wrap 属性提供了更精细的文本换行控制：
css
h1, h2, h3 {
text-wrap: balance;
}
p {
text-wrap: pretty;
}| 值 | 说明 | 适用场景 |
|---|---|---|
balance | 平衡各行文本长度，减少最后一行过短 | 标题、卡片标题、图注 |
pretty | 避免孤词（orphan），将最后一个短词拉到上一行 | 段落正文 |
stable | 编辑时保持行数稳定，减少布局跳动 | contenteditable 区域 |
wrap | 默认换行行为 | 默认 |
TIP
text-wrap: balance 是近年来最实用的 CSS 新特性之一，特别适合标题和短文本区域。它自动计算最优换行点，使每行长度尽量接近，避免出现最后一行只有一两个词的情况。
text-wrap-mode 和 text-wrap-style
css
.no-wrap {
text-wrap-mode: nowrap;
}
.fancy {
text-wrap-style: balance;
}文本可访问性与 SEO
标题结构与可读性
- 保持每个页面仅有一个语义上的主标题（通常为
<h1>） - 按层级递进使用
<h2>～<h6>，避免跳级（从<h2>直接跳到<h4>） - 在使用
<section>时尽量保证内部存在标题，有利于辅助技术理解结构 - 为长文档添加"目录"区域（可用普通链接列表实现），提升导航体验
文本替代与辅助信息
- 为非文本内容（图片、图标）提供有意义的
alt文本，而不是简单的"图片""logo" - 对纯装饰性的图片可以使用空
alt=""，避免对屏幕阅读器造成干扰 - 使用
<abbr>的title属性解释缩写，如<abbr title="HyperText Markup Language">HTML</abbr> - 为时间、日期使用
<time datetime="...">，方便搜索引擎与机器解析
国际化与多语言
- 在
html标签上设置正确的lang属性，如<html lang="zh-CN"> - 对局部不同语言文本使用
<span lang="en">User Experience</span>之类的局部标记 - 使用
<bdi>和<bdo>处理从右到左方向的语言，确保昵称、短语在混排场景下顺序正确 - 避免通过图片展示关键文本内容，尽量使用真实文本配合 CSS
文本与 SEO 的关系
- 合理使用标题、列表和段落，帮助搜索引擎理解文档结构
- 用
<strong>表示真正重要的关键词，不要滥用，否则会降低权重 - URL、标题、
<title>和主标题内容保持相对一致，表达清晰主题 - 避免在重要信息中使用过于艺术化或难以辨认的字体
最佳实践与性能优化
性能优化策略
1. 字体加载优化
html
<!-- 使用 font-display: swap 避免 FOIT (Flash of Invisible Text) -->
<style>
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: swap; /* 立即显示后备字体，字体加载后替换 */
}
</style>
<!-- 使用可变字体减少字体文件数量 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" />2. 文本渲染优化
css
/* 优化文本渲染性能 */
body {
text-rendering: optimizeSpeed; /* 优先考虑渲染速度 */
-webkit-font-smoothing: antialiased; /* 平滑字体渲染 */
-moz-osx-font-smoothing: grayscale;
}
/* 避免使用 text-rendering: optimizeLegibility 在大段文本中 */
/* 它会增加布局计算的开销 */3. 避免布局抖动（Layout Thrashing）
html
<!-- 避免：在循环中反复读取和修改 DOM -->
<script>
// ❌ 不好的做法
for (let i = 0; i < elements.length; i++) {
elements[i].textContent = 'text';
console.log(elements[i].offsetHeight); // 强制重排
}
// ✅ 好的做法：批量读取，批量修改
const heights = [];
elements.forEach(el => heights.push(el.offsetHeight)); // 批量读取
elements.forEach(el => el.textContent = 'text'); // 批量修改
</script>4. 使用 CSS containment
css
/* 限制浏览器重排范围 */
.article {
contain: content; /* 告诉浏览器该元素内容不影响外部布局 */
}
.aside {
contain: layout style; /* 更严格的隔离 */
}响应式文本设计
1. 流体排版（Fluid Typography）
css
/* 使用 clamp() 实现响应式字号 */
h1 {
/* 最小 2rem，首选值根据视口宽度计算，最大 4rem */
font-size: clamp(2rem, 5vw + 1rem, 4rem);
}
p {
/* 正文字号：最小 1rem，最大 1.25rem */
font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem);
/* 优化行高 */
line-height: clamp(1.5, 1.5em + 0.2vw, 1.8);
}2. 文本截断处理
css
/* 单行文本截断 */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 多行文本截断 */
.truncate-multiline {
display: -webkit-box;
-webkit-line-clamp: 3; /* 显示 3 行 */
-webkit-box-orient: vertical;
overflow: hidden;
}可访问性增强
1. 焦点管理
css
/* 确保键盘焦点可见 */
:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
/* 移除默认焦点样式时提供替代方案 */
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: 2px solid #007bff;
outline-offset: 2px;
}2. 高对比度模式支持
css
/* 确保在高对比度模式下可见 */
@media (prefers-contrast: high) {
.button {
border: 2px solid currentColor;
}
.link {
text-decoration: underline;
}
}3. 减少动画偏好
css
/* 尊重用户的减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}内容安全与编码
1. 特殊字符处理
html
<!-- 使用字符实体避免解析错误 -->
<p>价格 < 100元</p> <!-- 小于号 -->
<p>价格 > 100元</p> <!-- 大于号 -->
<p>版权所有 © 2024</p> <!-- 版权符号 -->
<p>注册商标 ®</p> <!-- 注册商标符号 -->2. XSS 防护
javascript
// 用户输入的文本内容必须进行转义
function escapeHtml(text) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, m => map[m]);
}
// 使用 textContent 而非 innerHTML
element.textContent = userInput; // ✅ 安全
element.innerHTML = userInput; // ❌ 危险语义化最佳实践清单
文档结构：
- 页面有且仅有一个
<h1>标题 - 标题层级连续，不跳级（h1 → h2 → h3）
- 使用
<main>标记主要内容区域 - 使用
<nav>标记导航区域 - 使用
<article>包裹独立内容单元 - 使用
<section>分组相关内容
文本语义：
- 使用
<strong>表示重要性，而非仅为了加粗 - 使用
<em>表示强调，而非仅为了斜体 - 使用
<code>标记代码片段 - 使用
<time>标记时间，并提供datetime属性 - 使用
<abbr>标记缩写，并提供title属性 - 使用
<blockquote>标记引用块
可访问性：
- 图片提供有意义的
alt文本 - 链接文本清晰描述目标（避免"点击这里"）
- 表单控件关联
<label> - 文本颜色对比度符合 WCAG AA 标准（至少 4.5:1）
- 页面可以通过键盘完全访问
常见问题解答（FAQ）
1. 标题相关问题
Q: 一个页面可以有多个 <h1> 标签吗？
A: HTML5 规范允许在 <article>、<section> 等结构元素中使用多个 <h1>，但从 SEO 和可访问性角度，建议整个文档仅使用一个顶级 <h1>。多 <h1> 可能导致文档大纲混乱，影响搜索引擎理解和屏幕阅读器导航。
Q: 如何处理标题层级跳级问题？
A: 应该严格遵循层级顺序。如果视觉设计需要调整字号，使用 CSS 而非跳级标题。
html
<!-- ❌ 不好的做法 -->
<h1>主标题</h1>
<h3>副标题</h3> <!-- 跳过了 h2 -->
<!-- ✅ 好的做法 -->
<h1>主标题</h1>
<h2>副标题</h2>
<!-- 通过 CSS 调整视觉大小 -->
<style>
h2 {
font-size: 1.2em; /* 视觉上较小，但语义正确 */
}
</style>2. 文本格式问题
Q: <strong>、<b> 和 CSS font-weight: bold 有什么区别？
A: 主要区别在于语义层面：
<strong>：语义化标签，表示内容重要性强，屏幕阅读器会改变语调<b>：纯视觉标签，仅表示粗体样式，无语义含义- CSS
font-weight: bold：纯样式控制，无语义
推荐使用 <strong> 表示重要性，使用 CSS 控制纯视觉的粗体效果。
Q: <em>、<i> 和 CSS font-style: italic 有什么区别？
A: 类似于粗体：
<em>：语义化标签，表示强调，屏幕阅读器会改变语调<i>：传统斜体标签，HTML5 中表示"不同语气的文本"（如外来语、术语）- CSS
font-style: italic：纯样式控制
html
<p><em>不要</em>点击那个按钮</p> <!-- 强调 -->
<p>这是<i lang="la">et cetera</i>的缩写</p> <!-- 外来语 -->3. 性能问题
Q: 大量文本内容会影响页面性能吗？
A: 是的，特别是以下情况：
- DOM 节点过多：数万个文本节点会增加内存占用和渲染时间
- 复杂字体：加载多个自定义字体文件会增加网络传输和解析时间
- 文本阴影和特效：大量使用
text-shadow会增加 GPU 负担
解决方案：
html
<!-- 使用虚拟滚动处理长列表 -->
<div id="virtual-list" style="height: 400px; overflow-y: auto;">
<!-- 只渲染可见区域的文本 -->
</div>
<!-- 使用系统字体减少加载 -->
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
</style>Q: 如何优化大量文本内容的渲染？
A:
- 使用 CSS containment：限制浏览器重排范围
- 延迟加载：非关键文本内容延迟加载
- 分页或虚拟滚动：避免一次性渲染过多文本
- 减少字体变体：限制自定义字体数量
4. 可访问性问题
Q: 如何确保文本内容对所有用户都可访问？
A:
- 颜色对比度：文本与背景对比度至少 4.5:1（AA 标准）
- 字号控制：正文至少 16px，避免用户无法调整
- 行高设置：建议 1.5 倍以上，提升可读性
- 语义化标记：使用正确的 HTML 标签而非仅依赖样式
- 键盘导航：确保所有交互元素可通过键盘访问
html
<!-- ✅ 良好的可访问性实践 -->
<style>
body {
font-size: 16px; /* 最小字号 */
line-height: 1.6; /* 舒适的行高 */
color: #333;
background-color: #fff;
}
/* 确保对比度 */
a {
color: #0066cc; /* 对比度 > 4.5:1 */
}
</style>Q: 如何处理不同语言的文本混排？
A:
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
</head>
<body>
<p>
我们提倡
<span lang="en">Responsive Web Design</span>
的设计理念。
</p>
<!-- 阿拉伯语（从右到左） -->
<p>
中文文本中插入阿拉伯语：
<span lang="ar" dir="rtl">مرحبا</span>
</p>
<!-- 使用 bdi 隔离可能影响方向的文本 -->
<ul>
<li>用户 <bdi>إيان</bdi> 得分：90</li>
<li>用户 <bdi>张三</bdi> 得分：85</li>
</ul>
</body>
</html>5. SEO 相关问题
Q: 如何优化文本内容以提升 SEO？
A:
- 合理使用标题层级：帮助搜索引擎理解内容结构
- 关键词自然分布：在标题、首段、小标题中自然出现关键词
- 语义化标签：使用
<strong>、<em>标记重点内容 - 结构化数据：使用 Schema.org 标记帮助搜索引擎理解内容
- 避免重复内容：同一内容不要在多处重复
html
<article itemscope itemtype="https://schema.org/Article">
<h1 itemprop="headline">HTML5 文本标签完整指南</h1>
<p itemprop="description">
<strong>HTML5</strong> 提供了丰富的语义化文本标签，
帮助开发者构建结构清晰、易于理解的网页内容。
</p>
<time itemprop="datePublished" datetime="2024-01-15">
2024年1月15日
</time>
</article>Q: meta 标签的 description 应该多长？
A:
- 推荐长度：120-160 个字符（中文字符约 80-110 个）
- 最佳实践：包含主要关键词，准确概括页面内容
- 避免：重复标题内容、堆砌关键词
html
<head>
<meta
name="description"
content="HTML5文本标签完整指南，涵盖标题、段落、格式化、语义化标签的使用方法和最佳实践，帮助开发者构建结构清晰的网页内容。"
/>
</head>6. 技术实现问题
Q: 如何实现文本内容的复制功能？
A:
html
<button onclick="copyText()">复制文本</button>
<p id="text-to-copy">这是要复制的文本内容。</p>
<script>
function copyText() {
const text = document.getElementById('text-to-copy').textContent;
navigator.clipboard.writeText(text).then(() => {
alert('文本已复制到剪贴板');
}).catch(err => {
console.error('复制失败:', err);
});
}
</script>Q: 如何限制文本输入的字数？
A:
html
<!-- 方法 1: 使用 maxlength 属性 -->
<textarea maxlength="200" placeholder="最多输入200个字符"></textarea>
<!-- 方法 2: 使用 JavaScript 动态控制并显示字数 -->
<textarea
id="limited-textarea"
oninput="updateCount()"
maxlength="200"
placeholder="最多输入200个字符"
></textarea>
<span id="char-count">0/200</span>
<script>
function updateCount() {
const textarea = document.getElementById('limited-textarea');
const count = document.getElementById('char-count');
count.textContent = `${textarea.value.length}/200`;
}
</script>附录 A：中英术语对照表
| 英文术语 | 中文翻译 | 定义/说明 |
|---|---|---|
| A11y (Accessibility) | 无障碍/可访问性 | 使残障人士也能使用 Web 内容的设计原则 |
| ARIA (Accessible Rich Internet Applications) | 可访问富互联网应用 | 一组属性，用于使 Web 内容和 Web 应用（特别是那些由 Ajax 和 JavaScript 开发的）具备可访问性 |
| Baseline | 基线 | 文本排版中字母底部对齐的假想线 |
| BDI (Bi-directional Isolation) | 双向隔离 | HTML 标签，用于隔离一段可能与周围文本方向不同的文本 |
| Block-level Element | 块级元素 | 默认独占一行的元素，如 <div>, <p> |
| Character Entity | 字符实体 | 以 & 开头 ; 结尾的编码，用于显示保留字符（如 <） |
| Citation | 引用源 | 对作品、书籍或来源的提及 |
| Code Point | 码点 | Unicode 中分配给每个字符的数字 |
| Content Flow | 内容流 | 元素在页面布局中的自然排列顺序 |
| Deprecated | 已废弃 | 标准中不再推荐使用，可能会在未来版本中移除的特性 |
| DOM (Document Object Model) | 文档对象模型 | HTML 和 XML 文档的编程接口 |
| Emphasis | 强调 | 改变句子语气的文本样式，通常对应 <em> |
| Figure | 图示 | 自包含的内容单元，可选带有标题 |
| Fluid Typography | 流体排版 | 字体大小随视口宽度平滑缩放的技术 |
| Glyph | 字形 | 字符的视觉表现形式 |
| Heading | 标题 | 定义文档结构的层级标签 (h1-h6) |
| Inline Element | 行内元素 | 不换行、仅占据必要宽度的元素，如 <span> |
| Kerning | 字距调整 | 调整特定字符对之间的间距 |
| Leading | 行距 | 文本行基线之间的垂直距离，CSS 中用 line-height 控制 |
| Ligature | 连字 | 将两个或多个字符组合成单个字形的排版特性 |
| Microdata | 微数据 | HTML5 规范的一部分，用于在网页中嵌入机器可读数据 |
| Outline | 大纲 | 由标题元素生成的文档层级结构 |
| Progressive Enhancement | 渐进增强 | 从基础功能开始构建，为支持更高级特性的浏览器添加交互和样式 |
| Ruby | 注音标示 | 用于东亚排版，显示字符上方的发音（如拼音） |
| Semantic HTML | 语义化 HTML | 使用具有正确含义的标签来描述内容 |
| Screen Reader | 屏幕阅读器 | 辅助视障用户阅读屏幕内容的软件 |
| SEO (Search Engine Optimization) | 搜索引擎优化 | 提高网站在搜索引擎结果页排名的技术 |
| Tag | 标签 | HTML 的基本构建块，如 <p> |
| User Agent | 用户代理 | 代表用户检索和呈现 Web 内容的软件（如浏览器） |
| Validation | 校验 | 检查代码是否符合 W3C 标准的过程 |
| Viewport | 视口 | 浏览器中用于查看网页的区域 |
| WCAG (Web Content Accessibility Guidelines) | 网页内容无障碍指南 | 确保 Web 内容可访问的国际标准 |
| Whitespace | 空白字符 | 空格、制表符、换行符等不可见字符 |
| Word Break | 断词 | 指定文本在行尾换行的规则 |
补充示例
<h4>016-text-content-complete.html</h4>html
<!DOCTYPE html>
<!--
来源：基础知识/2-设计网页文本内容.md
演示：HTML 文本内容标签完整展示
-->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML 文本内容标签完整展示</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, sans-serif; padding: 30px; background: #f5f7fa; max-width: 900px; margin: 0 auto; line-height: 1.7; }
h1 { color: #1a1a1a; margin-bottom: 25px; }
.section { background: white; padding: 25px; margin-bottom: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
h2 { color: #333; font-size: 17px; margin-bottom: 15px; border-bottom: 2px solid #eee; padding-bottom: 8px; }
h3 { color: #555; font-size: 15px; margin: 20px 0 12px; }
/* 标签样式高亮 */
mark { background: linear-gradient(120deg, #fef08a 0%, #fde047 100%); padding: 2px 4px; border-radius: 3px; }
del { text-decoration: line-through; color: #999; }
ins { text-decoration: underline; background: #d1fae5; color: #065f46; }
s { text-decoration: line-through; color: #bbb; }
u { text-decoration: underline; text-underline-offset: 3px; }
small { font-size: 0.83em; color: #888; }
sub { vertical-align: sub; font-size: 0.75em; color: #e74c3c; }
sup { vertical-align: super; font-size: 0.75em; color: #3498db; }
code {
background: #f4f4f4; padding: 2px 6px; border-radius: 4px;
font-family: 'SF Mono', Consolas, monospace; font-size: 0.9em; color: #e74c3c;
}
pre {
background: #1e1e1e; color: #d4d4d4; padding: 16px; border-radius: 8px;
overflow-x: auto; font-size: 13px; line-height: 1.6;
}
pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
kbd {
background: #eee; border: 1px solid #ccc; border-radius: 4px;
box-shadow: 0 2px 0 #ccc; padding: 2px 6px; font-size: 0.85em;
font-family: monospace;
}
var { font-style: italic; color: #6f42c1; font-family: 'Georgia', serif; }
samp { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 0.88em; color: #d63384; }
abbr { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
abbr[title]:hover { position: relative; }
address { font-style: normal; background: #f8f9fa; border-left: 3px solid #3498db; padding: 12px 16px; border-radius: 0 8px 8px 0; }
time { background: #fff3cd; padding: 2px 6px; border-radius: 3px; font-weight: 500; }
blockquote {
border-left: 4px solid #3498db; margin: 15px 0; padding: 12px 20px;
background: #f0f7ff; border-radius: 0 8px 8px 0; font-style: italic; color: #555;
}
blockquote cite { display: block; margin-top: 8px; font-style: normal; font-size: 0.9em; color: #888; }
q { font-style: italic; color: #555; }
q::before { content: '"'; color: #3498db; font-weight: bold; }
q::after { content: '"'; color: #3498db; font-weight: bold; }
ruby { font-size: 1.1em; }
rt { font-size: 0.5em; color: #e74c3c; }
bdo { display: inline-block; padding: 4px 8px; background: #fce4ec; border-radius: 4px; }
hr { border: none; height: 2px; background: linear-gradient(to right, transparent, #ccc, transparent); margin: 25px 0; }
.tag-ref { display: inline-block; background: #e8f4fd; color: #1976d2; padding: 1px 7px; border-radius: 3px; font-size: 11px; font-family: monospace; margin-left: 4px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 15px 0; }
th, td { padding: 10px 12px; text-align: left; border: 1px solid #dee2e6; }
th { background: #f8f9fa; font-weight: 600; }
</style>
</head>
<body>
<h1>📝 HTML 文本内容标签完整展示</h1>
<!-- ========== 标题层级 ========== -->
<div class="section">
<h2>1. 标题层级 h1 ~ h6</h2>
<h1>一级标题 H1 — 页面主标题</h1>
<h2>二级标题 H2 — 章节标题</h2>
<h3>三级标题 H3 — 小节标题</h3>
<h4>四级标题 H4 — 子小节标题</h4>
<h5>五级标题 H5 — 更细分类</h5>
<h6>六级标题 H6 — 最细粒度</h6>
<p style="margin-top:12px;font-size:13px;color:#666;">
💡 提示：每个页面通常只有一个 <h1>，标题应按层级顺序使用，不要跳跃。
</p>
</div>
<!-- ========== 段落与换行 ========== -->
<div class="section">
<h2>2. 段落 <p> 与换行 <br></h2>
<p>这是一个段落（paragraph）。段落是 HTML 中最基本的文本组织单位，浏览器会自动在段落前后添加空白边距。</p>
<p>这是另一个段落。<br>这里使用了强制换行标签 <br>，<br>它会在不创建新段落的情况下换行。<br>适用于地址、诗歌等需要精确控制换行的场景。</p>
<pre><p>普通段落文本</p>
<p>第一行<br>第二行（强制换行）<br>第三行</p></pre>
</div>
<!-- ========== 强调与标记 ========== -->
<div class="section">
<h2>3. 强调与语义标记</h2>
<h3>重要性与强调</h3>
<p>
<strong>strong</strong> — 表示<strong>重要性</strong>、严肃性或紧急性（默认加粗渲染）
</p>
<p>
<em>em</em> — 表示<em>强调</em>的语气变化（默认斜体渲染），可以嵌套表示更强的强调
</p>
<p>
<b>b</b> — <b>纯样式加粗</b>，无语义含义（仅为了视觉效果）
</p>
<p>
<i>i</i> — <i>纯样式斜体</i>，无语义含义（常用于术语、外来词）
</p>
<h3>文本标记类</h3>
<p>
<mark>mark</mark> — <mark>高亮标记</mark>文本，用于突出显示搜索结果或重点内容
</p>
<p>
<del>del</del> — <del>删除的内容</del>（表示已删除或不再准确）
</p>
<p>
<ins>ins</ins> — <ins>插入的内容</ins>（表示新增或修正的内容）
</p>
<p>
<s>s</s> — <s>不再准确或不再相关</s>的内容（与 del 类似但更轻量）
</p>
<p>
<u>u</u> — <u>非文本性的下划线标注</u>（如中文人名、拼写错误标注）
</p>
<p>
<small>small</small> — <small>附属细则、版权声明、法律免责</small>等辅助信息
</p>
<p>
上标<sup>sup</sup> 和 下标<sub>sub</sub> 用于化学公式 H<sub>2</sub>O、数学 x<sup>2</sup>+y<sup>2</sup>=z<sup>2</sup>
</p>
<table>
<thead><tr><th>标签</th><th>语义</th><th>默认样式</th><th>典型用法</th></tr></thead>
<tbody>
<tr><td><code><strong></code></td><td>重要性</td><td>加粗</td><td>警告、关键步骤</td></tr>
<tr><td><code><em></code></td><td>强调语气</td><td>斜体</td><td>重读、反语</td></tr>
<tr><td><code><mark></code></td><td>高亮</td><td>黄色背景</td><td>搜索结果</td></tr>
<tr><td><code><del></code></td><td>已删除</td><td>删除线</td><td>价格修改</td></tr>
<tr><td><code><ins></code></td><td>新增</td><td>下划线</td><td>文档修订</td></tr>
<tr><td><code><s></code></td><td>过时</td><td>删除线</td><td>旧价格</td></tr>
<tr><td><code><small></code></td><td>附属</td><td>小字</td><td>版权、注释</td></tr>
<tr><td><code><sup></code></td><td>上标</td><td>上移</td><td>脚注、数学</td></tr>
<tr><td><code><sub></code></td><td>下标</td><td>下移</td><td>化学公式</td></tr>
</tbody>
</table>
</div>
<!-- ========== 引用 ========== -->
<div class="section">
<h2>4. 引用：blockquote / q / cite</h2>
<h3>blockquote — 块级引用（长引用）</h3>
<blockquote>
任何可以被 JavaScript 表达的东西，最终都会被 JavaScript 表达出来。
<cite>— Jeff Atwood, Stack Overflow 联合创始人</cite>
</blockquote>
<h3>q — 行内引用（短引用）</h3>
<p>
正如 Tim Berners-Lee 所说，
<q cite="https://www.w3.org/People/Berners-Lee/">Web 的最初构想是一个协作信息共享的工具</q>。
</p>
<h3>cite — 引用来源</h3>
<p>
推荐书籍：<cite>The Pragmatic Programmer</cite>（程序员修炼之道）
</p>
</div>
<!-- ========== 代码相关 ========== -->
<div class="section">
<h2>5. 代码相关标签：code / pre / kbd / var / samp</h2>
<p>
<code>code</code> — 行内代码片段，如 <code>const arr = [];</code>
</p>
<p>
<kbd>kbd</kbd> — 键盘按键，如按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制
</p>
<p>
<var>var</var> — 变量/参数名，如函数接受参数 <var>username</var> 和 <var>age</var>
</p>
<p>
<samp>samp</samp> — 程序输出示例，如终端显示 <samp>Error: file not found</samp>
</p>
<h3>pre — 预格式化文本（保留空白和换行）</h3>
<pre><code>// 这是 pre + code 组合
function hello(name) {
return `Hello, ${name}!`;
}
console.log(hello("World"));</code></pre>
<p style="font-size:13px;color:#666;margin-top:8px;">
💡 <code><pre></code> 会保留所有的空格、制表符和换行符，适合显示代码、ASCII 艺术等。
</p>
</div>
<!-- ========== 缩略语 / 地址 / 时间 ========== -->
<div class="section">
<h2>6. abbr / address / time</h2>
<h3>abbr — 缩略语</h3>
<p>
<abbr title="HyperText Markup Language">HTML</abbr> 是构建网页的基础技术。
<abbr title="Application Programming Interface">API</abbr> 让不同软件之间能够通信。
<abbr title="Cascading Style Sheets">CSS</abbr> 负责页面的视觉呈现。
（鼠标悬停在缩写上查看完整形式）
</p>
<h3>address — 联系信息</h3>
<address>
<strong>作者联系方式</strong><br>
📧 email: <a href="mailto:author@example.com">author@example.com</a><br>
🌐 web: <a href="#">https://example.com</a><br>
📍 地址：北京市海淀区中关村大街 1 号
</address>
<h3>time — 机器可读的时间</h3>
<p>
文章发布于 <time datetime="2024-06-15T09:30:00+08:00">2024年6月15日 上午</time>，
最后更新于 <time datetime="2024-06-20">6月20日</time>。
</p>
<p style="font-size:13px;color:#666;">
💡 <code>datetime</code> 属性让搜索引擎和日历应用能识别时间信息。
</p>
</div>
<!-- ========== Ruby 注音 / BDO 方向 ========== -->
<div class="section">
<h2>7. Ruby 注音 & BDO 文本方向</h2>
<h3>ruby / rt — 日文注音（也适用于中文拼音）</h3>
<p style="font-size:18px;">
<ruby>
超<rt>chāo</rt>
文<rt>wén</rt>
本<rt>běn</rt>
协<rt>xié</rt>
议<rt>yì</rt>
</ruby>
</p>
<p style="font-size:18px;">
<ruby>
HTML<rt>エイチティーエムエル</rt>
</ruby>
是
<ruby>
Web<rt>ウェブ</rt>
</ruby>
开发的核心技术。
</p>
<h3>bdo — 覆盖文本方向</h3>
<p>正常文本方向（ltr）：</p>
<p><bdo dir="ltr">这段文字从左到右排列 (Left to Right)</bdo></p>
<p>反转文本方向（rtl）：</p>
<p><bdo dir="rtl">这段文字从右到左排列 (Right to Left)</bdo></p>
</div>
</body>
</html>html
<!DOCTYPE html>
<!--
来源：基础知识/2-设计网页文本内容.md
演示：语义化 HTML 文本标签 — 引用、代码、地址、时间、特殊格式化
-->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>语义化文本标签实战演示</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, sans-serif; padding: 30px; background: #f5f7fa; max-width: 900px; margin: 0 auto; line-height: 1.7; }
h1 { color: #1a1a1a; margin-bottom: 25px; }
.demo-card { background: white; padding: 24px; margin-bottom: 20px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
h2 { color: #2c3e50; font-size: 17px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid #ecf0f1; }
blockquote {
border-left: 4px solid #3498db; margin: 16px 0; padding: 14px 20px;
background: linear-gradient(to right, #ebf5fb, transparent); border-radius: 0 10px 10px 0;
font-style: italic; color: #444;
}
blockquote cite { display: block; margin-top: 10px; font-style: normal; font-size: 0.9em; color: #888; }
blockquote cite::before { content: '— '; color: #3498db; }
q { font-style: italic; color: #555; quotes: '«' '»'; }
q::before { content: open-quote; color: #3498db; font-weight: bold; }
q::after { content: close-quote; color: #3498db; font-weight: bold; }
address {
font-style: normal; background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-left: 4px solid #27ae60; padding: 16px 20px; border-radius: 0 10px 10px 0;
}
time {
background: #fff3cd; padding: 2px 8px; border-radius: 4px;
font-weight: 500; font-size: 0.92em; border-bottom: 2px solid #ffc107;
}
abbr {
text-decoration: underline dotted; text-underline-offset: 3px;
cursor: help; border-bottom: 1px dashed #999;
}
abbr[title]:hover { position: relative; color: #2980b9; }
code {
background: #f1f3f5; padding: 3px 7px; border-radius: 5px;
font-family: 'SF Mono', Consolas, monospace; font-size: 0.88em; color: #e74c3c;
border: 1px solid #e1e4e8;
}
pre {
background: #282c34; color: #abb2bf; padding: 18px; border-radius: 10px;
overflow-x: auto; font-size: 13px; line-height: 1.65; margin: 14px 0;
}
pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }
kbd {
background: linear-gradient(180deg, #fafafa, #e8e8e8); border: 1px solid #ccc;
border-bottom-width: 2px; border-radius: 5px; box-shadow: 0 1px 0 rgba(0,0,0,0.08);
padding: 3px 7px; font-size: 0.82em; font-family: 'SF Mono', Consolas, monospace;
margin: 0 2px;
}
var { font-family: 'Georgia', 'Palatino', serif; font-style: italic; color: #6f42c1; }
samp {
background: #fce4ec; color: #c2185b; padding: 2px 7px;
border-radius: 4px; font-size: 0.88em; font-family: monospace;
}
mark {
background: linear-gradient(120deg, #fef08a 0%, #fde047 100%);
padding: 2px 5px; border-radius: 3px;
}
del { text-decoration: line-through; color: #bbb; text-decoration-thickness: 2px; }
ins {
text-decoration: none; background: #d1fae5; color: #065f46;
border-bottom: 2px solid #10b981; padding: 1px 3px;
}
s { text-decoration: line-through; color: #ccc; }
u {
text-decoration: underline; text-decoration-color: #e74c3c;
text-decoration-style: wavy; text-underline-offset: 4px;
}
small { font-size: 0.82em; color: #888; }
sub { vertical-align: sub; font-size: 0.72em; color: #e74c3c; }
sup { vertical-align: super; font-size: 0.72em; color: #3498db; }
ruby { font-size: 1.15em; }
rt { font-size: 0.48em; color: #e74c3c; font-weight: bold; }
bdo { display: inline-block; padding: 4px 10px; background: #fff0f6; border: 1px dashed #db2777; border-radius: 6px; }
hr { border: none; height: 2px; background: linear-gradient(to right, transparent 0%, #ddd 20%, #ddd 80%, transparent 100%); margin: 22px 0; }
.tag-ref {
display: inline-block; background: #e8f4fd; color: #1976d2;
padding: 2px 8px; border-radius: 4px; font-size: 11px; font-family: monospace;
margin-left: 4px;
}
.example-box {
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
padding: 16px; margin: 12px 0; line-height: 1.8;
}
</style>
</head>
<body>
<h1>📖 语义化 HTML 文本标签实战</h1>
<!-- ========== 引用系统 ========== -->
<div class="demo-card">
<h2>引用系统：blockquote / q / cite</h2>
<div class="example-box">
<h3 style="font-size:15px;color:#2c3e50;margin-bottom:10px;">📑 块级引用 <blockquote></h3>
<blockquote>
任何可以被 JavaScript 表达的东西，最终都会被 JavaScript 表达出来。这不是预言，
这只是对过去三十年技术发展轨迹的简单外推。
<cite>Jeff Atwood，Stack Overflow 联合创始人</cite>
</blockquote>
</div>
<div class="example-box">
<h3 style="font-size:15px;color:#2c3e50;margin-bottom:10px;">💬 行内引用 <q></h3>
<p>
正如 Tim Berners-Lee 在万维网诞生之初所设想的，
<q cite="https://www.w3.org/Consortium/mission">Web 的最初构想是一个协作信息共享的工具</q>，
这个愿景在今天已经远远超出了最初的预期。
</p>
</div>
<div class="example-box">
<h3 style="font-size:15px;color:#2c3e50;margin-bottom:10px;">📚 引用来源 <cite></h3>
<p>
推荐阅读书籍：<cite>The Pragmatic Programmer</cite>（程序员修炼之道），
这本书是每个软件开发者的必读经典。另外，
<cite>MDN Web Docs</cite> 是学习 Web 技术的最佳在线资源。
</p>
</div>
</div>
<!-- ========== 代码相关标签 ========== -->
<div class="demo-card">
<h2>代码展示：code / pre / kbd / var / samp</h2>
<div class="example-box">
<p>
在 HTML 中，<code><div></code> 是最常用的容器元素，
<code>document.querySelector()</code> 用于选择 DOM 元素，
而 <code>console.log()</code> 是调试时最常用的方法。
</p>
<p>
常用快捷键：<kbd>Ctrl</kbd> + <kbd>C</kbd> 复制、
<kbd>Ctrl</kbd> + <kbd>V</kbd> 粘贴、
<kbd>Cmd</kbd> + <kbd>S</kbd> 保存（Mac）、
<kbd>F12</kbd> 打开开发者工具。
</p>
<p>
函数接受参数 <var>username</var> 和 <var>age</var>，
返回值存储在变量 <var>result</var> 中。
当输入无效时，终端输出 <samp>Error: invalid input</samp>。
</p>
</div>
<h3 style="margin-top:18px;font-size:15px;">📝 预格式化代码块 <pre> + <code></h3>
<pre><code>// 示例：计算斐波那契数列
function fibonacci(n) {
if (n <= 1) return n;
let a = 0, b = 1;
for (let i = 2; i <= n; i++) {
[a, b] = [b, a + b];
}
return b;
}
// 输出前 10 项
for (let i = 0; i < 10; i++) {
console.log(`F(${i}) = ${fibonacci(i)}`);
}</code></pre>
</div>
<!-- ========== 特殊格式化 ========== -->
<div class="demo-card">
<h2>文本标记与格式化标签</h2>
<div class="example-box">
<h3 style="font-size:15px;color:#2c3e50;">✏️ 编辑标记类</h3>
<p>
原价 <del>¥999</del>，现价 <ins>¥599</ins>（限时优惠！）。
此价格 <s>已过期</s>，请以实际页面为准。
</p>
<p>
<u>下划线标注</u>通常用于中文人名拼写检查提示，
或表示需要用户注意但非强调的内容。
</p>
<p>
这是<mark>高亮标记的文本</mark>，
通常用于搜索结果中的关键词匹配或文档中的重点内容。
</p>
</div>
<div class="example-box">
<h3 style="font-size:15px;color:#2c3e50;">📐 上下标与小型文本</h3>
<p>
化学公式：H<sub>2</sub>O（水）、CO<sub>2</sub>（二氧化碳）、
C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>（葡萄糖）
</p>
<p>
数学表达式：E = mc<sup>2</sup>、x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>、
a<sup>n</sup> + b<sup>n</sup> ≠ c<sup>n</sup> （n > 2 时）
</p>
<p>
上标也常用于脚注引用<sup>[1]</sup>和参考文献标注<sup>[2]</sup>。
<small>这是使用 small 标签的小型附属文字，适合版权声明、法律条款等内容。</small>
</p>
</div>
</div>
<!-- ========== 缩略语 / 地址 / 时间 ========== -->
<div class="demo-card">
<h2>元数据标签：abbr / address / time</h2>
<div class="example-box">
<h3 style="font-size:15px;color:#2c3e50;">🔤 缩略语 <abbr></h3>
<p>
<abbr title="HyperText Markup Language">HTML</abbr> 是构建网页的基础；
<abbr title="Cascading Style Sheets">CSS</abbr> 负责视觉呈现；
<abbr title="Application Programming Interface">API</abbr> 定义软件间的接口规范；
<abbr title="Document Object Model">DOM</abbr> 将 HTML 表示为可操作的节点树。
</p>
<p style="font-size:12px;color:#888;">
💡 提示：鼠标悬停在缩写上查看完整形式。屏幕阅读器也会朗读完整形式。
</p>
</div>
<div class="example-box">
<h3 style="font-size:15px;color:#2c3e50;">📍 联系地址 <address></h3>
<address>
<strong>📧 文档作者联系方式</strong><br>
作者：前端开发工程师<br>
📮 电子邮箱：<a href="mailto:dev@example.com" style="color:#3498db;text-decoration:none;">dev@example.com</a><br>
🌐 个人主页：<a href="#" style="color:#3498db;text-decoration:none;">https://developer.example.com</a><br>
🏢 工作单位：XX 科技有限公司 · 前端技术部<br>
📍 地址：北京市海淀区中关村科技园区
</address>
</div>
<div class="example-box">
<h3 style="font-size:15px;color:#2c3e50;">⏰ 机器可读时间 <time></h3>
<p>
本文发布于 <time datetime="2024-06-15T09:30:00+08:00">2024年6月15日 上午 9:30</time>，
最后修改于 <time datetime="2024-06-20T18:00:00">6月20日傍晚</time>。
</p>
<p>
会议安排在 <time datetime="2024-07-01">今年七月一日</time> 举行，
活动持续时间为 <time datetime="PT2H30M">2 小时 30 分钟</time>。
</p>
<p style="font-size:12px;color:#888;">
💡 datetime 属性让搜索引擎和日历应用能准确解析时间信息，
可用于生成事件提醒、排序时间线等功能。
</p>
</div>
</div>
<!-- ========== 国际化文本 ========== -->
<div class="demo-card">
<h2>国际化文本：ruby 注音 / bdo 方向</h2>
<div class="example-box">
<h3 style="font-size:15px;color:#2c3e50;">🔣 Ruby 注音标签</h3>
<p style="font-size:17px;">
中文拼音注音：<br>
<ruby>
超<rt>chāo</rt>
文<rt>wén</rt>
本<rt>běn</rt>
协<rt>xié</rt>
议<rt>yì</rt>
</ruby>
是构建现代网站的核心标准。
</p>
<p style="font-size:17px;">
日文假名注音：<br>
<ruby>
HTML<rt>エイチティーエムエル</rt>
</ruby>
と
<ruby>
CSS<rt>シーエスエス</rt>
</ruby>
を学習します。
</p>
</div>
<div class="example-box">
<h3 style="font-size:15px;color:#2c3e50;">↔️ BDO 文本方向覆盖</h3>
<p>正常方向（从左到右）：</p>
<p><bdo dir="ltr">Hello World! This is Left-to-Right text.</bdo></p>
<p>反转方向（从右到左）：</p>
<p><bdo dir="rtl">Hello World! This will display Right-to-Left.</bdo></p>
<p style="font-size:12px;color:#888;">
💡 bdo (Bi-Directional Override) 强制覆盖文本方向，
常用于多语言混排场景中需要精确控制文字排列顺序的情况。
</p>
</div>
</div>
<hr>
<footer style="text-align:center;padding:20px;color:#888;font-size:13px;">
<p>本页面展示了 HTML 所有主要文本内容标签的实际渲染效果。</p>
<p>所有标签均具有语义含义，有助于 SEO 和无障碍访问。</p>
</footer>
</body>
</html>html
<!DOCTYPE html>
<!--
来源：基础知识/2-设计网页文本内容.md
演示：HTML 文档大纲与语义化结构（h1-h6、section、article、nav、aside、header、footer）
-->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML 文档大纲与语义化结构</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, sans-serif; padding: 30px; background: #f0f2f5; max-width: 900px; margin: 0 auto; line-height: 1.7; }
/* 文档主体模拟 */
.document-body {
background: white; border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08); overflow: hidden;
max-width: 800px; margin: 0 auto;
}
/* 语义化区域样式 */
header.site-header {
background: linear-gradient(135deg, #667eea, #764ba2); color: white;
padding: 28px 32px; text-align: center;
}
header.site-header h1 { font-size: 26px; margin-bottom: 6px; }
header.site-header p { opacity: 0.85; font-size: 14px; }
nav.main-nav {
background: #2c3e50; padding: 10px 24px;
display: flex; gap: 24px; flex-wrap: wrap;
}
nav.main-nav a { color: #bdc3c7; text-decoration: none; font-size: 14px; transition: color 0.2s; }
nav.main-nav a:hover { color: #3498db; }
main { display: flex; gap: 24px; padding: 24px; }
main > article { flex: 1; min-width: 0; }
aside.sidebar { width: 220px; flex-shrink: 0; }
article h1, article h2, article h3, article h4, article h5, article h6 {
margin: 18px 0 10px; line-height: 1.35;
}
article h1 { font-size: 26px; color: #1a1a1a; border-bottom: 3px solid #3498db; padding-bottom: 8px; }
article h2 { font-size: 21px; color: #2c3e50; border-left: 4px solid #3498db; padding-left: 14px; }
article h3 { font-size: 17px; color: #34495e; }
article h4 { font-size: 15px; color: #555; }
article h5 { font-size: 14px; color: #777; }
article h6 { font-size: 13px; color: #999; font-weight: normal; }
article p { margin-bottom: 14px; color: #444; font-size: 15px; }
aside.sidebar {
background: #f8f9fa; border-radius: 10px; padding: 18px;
border: 1px solid #e8e8e8;
}
aside.sidebar h3 { font-size: 14px; color: #333; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #ddd; }
aside.sidebar ul { list-style: none; padding-left: 0; }
aside.sidebar li {
padding: 8px 0; border-bottom: 1px solid #eee; font-size: 13px; color: #555;
cursor: pointer; transition: all 0.15s;
}
aside.sidebar li:hover { color: #3498db; padding-left: 6px; }
footer.site-footer {
background: #34495e; color: #bdc3c7; padding: 20px 32px;
text-align: center; font-size: 13px;
}
/* 大纲可视化 */
.outline-panel {
background: #f0f4f8; border: 2px solid #d0d7de; border-radius: 10px;
padding: 20px; margin: 25px auto; max-width: 600px;
}
.outline-panel h3 { font-size: 16px; color: #2c3e50; margin-bottom: 14px; text-align: center; }
.outline-tree { font-family: monospace; font-size: 13px; line-height: 1.9; }
.outline-tree .level-h1 { color: #e74c3c; font-weight: bold; }
.outline-tree .level-h2 { color: #e67e22; padding-left: 20px; }
.outline-tree .level-h3 { color: #f39c12; padding-left: 40px; }
.outline-tree .level-h4 { color: #27ae60; padding-left: 60px; font-size: 12px; }
.outline-tree .level-h5 { color: #3498db; padding-left: 80px; font-size: 12px; }
.outline-tree .level-h6 { color: #9b59b6; padding-left: 100px; font-size: 11px; }
pre { background: #282c34; color: #abb2bf; padding: 14px; border-radius: 8px; overflow-x: auto; font-size: 12px; line-height: 1.6; margin: 14px 0; }
code { background: #f1f3f5; padding: 2px 6px; border-radius: 4px; font-size: 0.88em; color: #e74c3c; }
</style>
</head>
<body>
<h1 style="text-align:center;color:#1a1a1a;margin-bottom:25px;">📄 HTML 文档大纲与语义化结构演示</h1>
<!-- ========== 完整文档结构演示 ========== -->
<div class="document-body">
<header class="site-header" role="banner">
<h1>我的技术博客</h1>
<p>分享前端开发经验与技术心得</p>
</header>
<nav class="main-nav" role="navigation" aria-label="主导航">
<a href="#">首页</a>
<a href="#">文章</a>
<a href="#">关于</a>
<a href="#">联系</a>
<a href="#">RSS 订阅</a>
</nav>
<main role="main">
<article itemscope itemtype="https://schema.org/Article">
<h1 itemprop="headline">深入理解 HTML5 语义化标签</h1>
<p><time datetime="2024-06-15" itemprop="datePublished">2024年6月15日</time> ·
阅读约 8 分钟 · 作者：<span itemprop="author">前端工程师</span></p>
<h2>一、什么是语义化？</h2>
<p>语义化 HTML 是指使用具有明确含义的标签来构建网页结构。与单纯使用 <div> 和 <span> 不同，
语义化标签能让浏览器、搜索引擎和辅助技术更好地理解页面的内容和结构。</p>
<h3>1.1 为什么需要语义化？</h3>
<p>语义化带来的好处是多方面的：</p>
<p>对于<strong>搜索引擎</strong>来说，语义化标签能帮助爬虫理解页面结构，提升 SEO 排名。
对于<strong>屏幕阅读器</strong>用户，语义化标签提供了清晰的导航路径。
对于<strong>开发者</strong>自身，语义化代码更易维护和理解。</p>
<h4>1.1.1 SEO 方面的优势</h4>
<p>Google 等搜索引擎会根据语义化标签来理解内容的层次结构和重要性。
正确使用 <h1>~<h6> 标题层级可以让搜索引擎准确识别文章的主题。</p>
<h3>1.2 常用的语义化标签</h3>
<p>HTML5 引入了大量新的语义化标签，主要包括以下几类：</p>
<h2>二、文档结构类标签</h2>
<h3>2.1 页面级语义化</h3>
<p><header> 定义页面或区块的头部区域；<nav> 定义导航链接集合；
<main> 包含页面的主要内容；<footer> 定义页脚信息；
<aside> 定义与主内容相关的附属信息。</p>
<h3>2.2 内容级语义化</h3>
<p><article> 表示独立的完整内容块；<section> 表示文档中的一个主题分区；
<figure> 和 <figcaption> 组合用于图片及其说明。</p>
<h4>2.2.1 figure 的使用场景</h4>
<p><figure> 不仅限于图片，还可以包裹代码块、表格、引用等多种独立内容单元。</p>
<h5>代码示例：</h5>
<pre><figure>
<code>// 示例代码</code>
<figcaption>图 1: 代码示例</figcaption>
</figure></pre>
<h6>小注：figcaption 可以省略</h6>
<p>如果不需要说明文字，也可以单独使用 figure 或直接使用其他容器。</p>
<h2>三、最佳实践总结</h2>
<ul style="padding-left:24px;font-size:14px;line-height:2;">
<li>每页只使用一个 <h1>，作为页面主标题</li>
<li>标题按层级顺序递进，不要跳级</li>
<li>使用 <nav> 包裹导航链接组</li>
<li>使用 <article> 包裹可独立分发的内容</li>
<li>合理使用 ARIA 属性增强无障碍性</li>
</ul>
</article>
<aside class="sidebar" role="complementary">
<h3>📑 目录</h3>
<ul>
<li onclick="scrollToId('h2-1')">一、什么是语义化？</li>
<li onclick="scrollToId('h2-2')">二、文档结构类标签</li>
<li onclick="scrollToId('h2-3')">三、最佳实践总结</li>
</ul>
<h3 style="margin-top:24px;">🏷️ 相关文章</h3>
<ul>
<li>CSS Grid 完全指南</li>
<li>JavaScript 异步编程</li>
<li>Web 性能优化策略</li>
<li>TypeScript 入门教程</li>
</ul>
</aside>
</main>
<footer class="site-footer" contentinfo="contentinfo">
<p>© 2024 我的技术博客 | 基于 HTML5 语义化标签构建</p>
<p style="margin-top:6px;font-size:12px;">
使用标签：header / nav / main / article / section / aside / footer / h1-h6 / time
</p>
</footer>
</div>
<!-- ========== 大纲可视化 ========== -->
<div class="outline-panel">
<h3>🗂️ 上方文档的 HTML 大纲结构</h3>
<div class="outline-tree">
<div class="level-h1">⟨h1⟩ 我的技术博客 (header)</div>
<div class="level-h1">⟨h1⟩ 深入理解 HTML5 语义化标签 (article)</div>
<div class="level-h2">⟨h2⟩ 一、什么是语义化？</div>
<div class="level-h3">⟨h3⟩ 1.1 为什么需要语义化？</div>
<div class="level-h4">⟨h4⟩ 1.1.1 SEO 方面的优势</div>
<div class="level-h3">⟨h3⟩ 1.2 常用的语义化标签</div>
<div class="level-h2">⟨h2⟩ 二、文档结构类标签</div>
<div class="level-h3">⟨h3⟩ 2.1 页面级语义化</div>
<div class="level-h3">⟨h3⟩ 2.2 内容级语义化</div>
<div class="level-h4">⟨h4⟩ 2.2.1 figure 的使用场景</div>
<div class="level-h5">⟨h5⟩ 代码示例</div>
<div class="level-h6">⟨h6⟩ 小注：figcaption 可以省略</div>
<div class="level-h2">⟨h2⟩ 三、最佳实践总结</div>
<div class="level-h1">⟨h1⟩ 页脚 (footer)</div>
</div>
</div>
<script>
function scrollToId(id) {
// 在实际应用中这里会滚动到对应的 h2 元素
alert(`演示功能：将滚动到 "${id}" 对应的章节`);
}
</script>
</body>
</html>