2.1 文本格式化标签

HTML5 提供了丰富的文本格式化标签，用于对文本内容进行结构化和语义化标记。这些标签不仅影响文本的视觉呈现，更重要的是为内容赋予语义价值，有助于搜索引擎理解和屏幕阅读器解析。

基础文本标签

1. 段落与换行

<p>这是一个段落标签，用于包含独立段落文本。</p>
<br> <!-- 强制换行（空标签，无需闭合） -->

2. 标题等级

<h1>主标题（页面通常只用一个）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
...
<h6>六级标题</h6>

语义化文本标签

3. 强调文本

<em>表示语义强调（通常斜体显示）</em>
<strong>表示重要性更强的内容（通常粗体显示）</strong>
<mark>高亮标记文本（默认黄色背景）</mark>

4. 引用相关

<blockquote cite="来源URL">块级引用（会缩进显示）</blockquote>
<q>短内联引用（自动加引号）</q>
<cite>作品标题引用（如书籍、电影名）</cite>

文字修饰标签

5. 样式化文本

<b>视觉加粗（无语义）</b>
<i>视觉斜体（技术术语/外语短语）</i>
<u>下划线文本（谨慎使用，易与链接混淆）</u>
<s>删除线文本（不再准确的内容）</s>
<del>被删除文本（有语义）</del>
<ins>新增文本（通常带下划线）</ins>

6. 技术文本

<code>代码片段（等宽字体）</code>
<kbd>键盘输入（如 Ctrl+C）</kbd>
<samp>程序输出示例</samp>
<var>变量名称（通常斜体）</var>
<pre>预格式化文本（保留空格和换行）</pre>

特殊文本标签

7. 文字方向

<bdo dir="rtl">从右向左的文字方向</bdo>

8. 注音标注

<ruby>
  汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
  字 <rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>

9. 其他特殊用途

<small>免责声明/法律条款等小字</small>
<time datetime="2023-11-20">11月20日</time>
<abbr title="HyperText Markup Language">HTML</abbr>
<dfn>术语定义（首次出现时使用）</dfn>

现代实践建议

1. 语义优先原则：

   • 优先使用<strong>而非<b>
   • 优先使用<em>而非<i>
   • 优先使用<del>/<ins>而非<s>

2. 可访问性注意事项：

   <!-- 为缩写添加title属性 -->
   <abbr title="World Wide Web">WWW</abbr>
   
   <!-- 为时间标记添加机器可读格式 -->
   <time datetime="2023-11-20T19:30">今晚7:30</time>
   

3. 响应式排版技巧：

   <!-- 使用span配合CSS实现精细控制 -->
   <p>这段文字包含<span class="highlight">关键内容</span></p>
   

完整示例：学术文章片段

<article>
  <h1>HTML5语义化研究</h1>
  <p>
    在<abbr title="HyperText Markup Language">HTML</abbr>5中，
    <strong>语义化标签</strong>的使用变得比以往任何时候都重要。
    根据<cite>Web内容可访问性指南(WCAG)</cite>：
  </p>
  
  <blockquote>
    <p>"开发者应该优先使用能准确描述内容语义的HTML元素。"</p>
  </blockquote>
  
  <p>
    例如表示<em>强调</em>应该使用<code>&lt;em&gt;</code>标签，
    而不是简单地使用<code>&lt;i&gt;</code>实现斜体效果。
    实验数据<del>显示90%</del><ins>表明85%</ins>的屏幕阅读器能正确处理语义标签。
  </p>
  
  <pre><code>
  // 代码示例
  function showSemantic() {
    console.log("Hello Semantic World!");
  }
  </code></pre>
  
  <footer>
    <p><small>最后更新: <time datetime="2023-11-20">2023年11月20日</time></small></p>
  </footer>
</article>

兼容性提示

1. HTML5新标签兼容：

   <!-- 兼容旧版IE -->
   <!--[if lt IE 9]>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
   <![endif]-->
   

2. CSS重置建议：

   /* 统一标签样式 */
   strong, b { font-weight: bold; }
   em, i { font-style: italic; }
   mark { background: yellow; padding: 0 0.2em; }
   

通过合理使用这些文本格式化标签，开发者可以创建出结构清晰、语义明确且易于维护的HTML文档，同时为SEO优化和无障碍访问打下良好基础。