文本格式化

文本格式化概述

文本格式化标签用于改变文本的外观和语义，使内容更具表现力和可读性。

东巴文（db-w.cn） 认为：文本格式化不仅是视觉呈现，更是语义表达，合理使用可以提升内容的可访问性和SEO效果。

文本格式化标签分类

分类概览

东巴文文本格式化分类：

粗体标签

<strong>标签

<strong>标签表示重要文本，浏览器默认显示为粗体。

<p>
    <strong>重要提示：</strong>请仔细阅读以下内容。
</p>

<p>
    学习HTML是<strong>非常重要</strong>的第一步。
</p>

<p>
    <strong>警告：</strong>操作不可逆，请谨慎！
</p>

东巴文说明：

• 表示内容的重要性、严重性或紧迫性
• 具有语义化含义
• 屏幕阅读器会加重语气朗读
• 有助于SEO

东巴文使用场景：

<!-- 警告信息 -->
<p><strong>警告：</strong>此操作将删除所有数据！</p>

<!-- 重要提示 -->
<p><strong>注意：</strong>请确保已保存所有更改。</p>

<!-- 关键信息 -->
<p>密码必须包含<strong>大写字母</strong>、<strong>小写字母</strong>和<strong>数字</strong>。</p>

<b>标签

<b>标签仅用于视觉上的粗体，没有语义含义。

<p>
    产品名称：<b>东巴文</b>
</p>

<p>
    关键词：<b>HTML</b>、<b>CSS</b>、<b>JavaScript</b>
</p>

<p>
    文章摘要：这是一篇关于<b>HTML教程</b>的文章。
</p>

东巴文说明：

• 仅表示视觉粗体
• 无语义含义
• 不影响屏幕阅读器
• 不影响SEO

<strong> vs <b>

东巴文对比：

东巴文建议：优先使用<strong>，仅在无语义需求时使用<b>。

斜体标签

<em>标签

<em>标签表示强调文本，浏览器默认显示为斜体。

<p>
    我<em>真的</em>很喜欢编程。
</p>

<p>
    请<em>务必</em>按时完成任务。
</p>

<p>
    这本书<em>非常</em>有趣。
</p>

东巴文说明：

• 表示强调或重读
• 具有语义化含义
• 屏幕阅读器会改变语调
• 有助于SEO

东巴文使用场景：

<!-- 语气强调 -->
<p>我<em>真的</em>不想去。</p>

<!-- 重读 -->
<p>这不是<em>我的</em>错。</p>

<!-- 对比强调 -->
<p>这是<em>东巴文</em>，不是其他网站。</p>

<i>标签

<i>标签仅用于视觉上的斜体，没有语义含义。

<p>
    书名：<i>HTML教程</i>
</p>

<p>
    外来语：<i>HTML</i>是HyperText Markup Language的缩写。
</p>

<p>
    术语：<i>标签</i>是HTML的基本组成单位。
</p>

东巴文说明：

• 仅表示视觉斜体
• 无语义含义
• 不影响屏幕阅读器
• 不影响SEO

<cite>标签

<cite>标签表示引用的来源或作者。

<p>
    根据<cite>《HTML教程》</cite>的介绍，HTML是构建网页的基础语言。
</p>

<blockquote>
    <p>学习编程改变生活。</p>
    <footer>— <cite>东巴文</cite></footer>
</blockquote>

东巴文说明：

• 表示作品标题或作者
• 默认显示斜体
• 具有语义化含义
• 有助于SEO

<em> vs <i> vs <cite>

东巴文对比：

东巴文建议：

• 强调文本使用<em>
• 引用来源使用<cite>
• 其他情况使用<i>

标记标签

<mark>标签

<mark>标签用于标记或高亮文本。

<p>
    搜索结果中会<mark>高亮显示</mark>关键词。
</p>

<p>
    注意：<mark>这部分内容很重要</mark>。
</p>

<p>
    东巴文（db-w.cn）是一个<mark>编程学习</mark>平台。
</p>

东巴文说明：

• 默认显示黄色背景
• 表示相关性或重要性
• 常用于搜索结果高亮
• HTML5新增标签

东巴文使用场景：

<!-- 搜索结果高亮 -->
<p>
    东巴文（db-w.cn）是一个专注于<mark>编程教育</mark>的在线学习平台。
</p>

<!-- 重点标记 -->
<p>
    请注意：<mark>考试时间为2024年6月15日</mark>。
</p>

<!-- 引用高亮 -->
<blockquote>
    <p>
        学习编程最好的方法就是动手实践。<mark>不要害怕犯错</mark>，每一个错误都是学习的机会。
    </p>
</blockquote>

删除标签

<del>标签

<del>标签表示删除的文本。

<p>
    原价：<del>¥999</del> 现价：¥599
</p>

<p>
    <del>旧内容</del>
    <ins>新内容</ins>
</p>

<p>
    <del>错误的内容</del>已被删除。
</p>

东巴文说明：

• 默认显示删除线
• 表示已删除的内容
• 具有语义化含义
• 可配合<ins>标签使用

东巴文属性：

<p>
    <del cite="https://example.com/change-log" datetime="2024-01-15">
        旧价格：¥999
    </del>
    <ins cite="https://example.com/change-log" datetime="2024-01-15">
        新价格：¥599
    </ins>
</p>

东巴文说明：

• cite属性：指定删除原因的文档URL
• datetime属性：指定删除的时间

<s>标签

<s>标签表示不再相关或不再准确的文本。

<p>
    <s>原价：¥999</s> 现价：¥599
</p>

<p>
    <s>已售罄</s> 重新上架
</p>

东巴文说明：

• 默认显示删除线
• 表示不再相关的内容
• 无语义含义

<del> vs <s>

东巴文对比：

东巴文建议：

• 文档修订使用<del>
• 过期信息使用<s>

插入标签

<ins>标签

<ins>标签表示插入的文本。

<p>
    <del>旧价格：¥999</del>
    <ins>新价格：¥599</ins>
</p>

<p>
    原文：<ins>新增内容</ins>
</p>

东巴文说明：

• 默认显示下划线
• 表示新增的内容
• 具有语义化含义
• 可配合<del>标签使用

东巴文属性：

<p>
    <ins cite="https://example.com/change-log" datetime="2024-01-15">
        新增内容
    </ins>
</p>

东巴文说明：

• cite属性：指定插入原因的文档URL
• datetime属性：指定插入的时间

<u>标签

<u>标签表示非文本注释的下划线。

<p>
    这段文本有<u>拼写错误</u>。
</p>

<p>
    请注意<u>下划线部分</u>。
</p>

东巴文说明：

• 默认显示下划线
• 表示某种标注
• 容易与链接混淆，慎用

<ins> vs <u>

东巴文对比：

东巴文建议：

• 文档修订使用<ins>
• 其他情况避免使用<u>（容易与链接混淆）

小号文本标签

<small>标签

<small>标签表示小号文本，常用于注释、版权信息等。

<p>
    东巴文（db-w.cn）- 让编程学习更有趣、更高效！
    <small>版权所有 &copy; 2024</small>
</p>

<footer>
    <small>
        本网站所有内容仅供学习参考，未经授权禁止转载。
    </small>
</footer>

<p>
    价格：¥999 <small>（不含税）</small>
</p>

东巴文说明：

• 默认显示小号字体
• 表示附属信息、注释、版权
• 具有语义化含义
• 常用于页脚、注释

东巴文使用场景：

<!-- 版权信息 -->
<footer>
    <small>版权所有 &copy; 2024 东巴文（db-w.cn）</small>
</footer>

<!-- 注释说明 -->
<p>
    课程价格：¥999 <small>（限时优惠，原价¥1299）</small>
</p>

<!-- 法律声明 -->
<p>
    <small>本活动最终解释权归东巴文所有。</small>
</p>

<!-- 免责声明 -->
<footer>
    <small>
        免责声明：本网站内容仅供参考，不构成任何投资建议。
    </small>
</footer>

上标和下标

上标标签 <sup>

<sup>标签表示上标文本。

<p>
    数学公式：E = mc<sup>2</sup>
</p>

<p>
    脚注引用：东巴文<sup>[1]</sup>是一个学习平台。
</p>

<p>
    指数运算：2<sup>10</sup> = 1024
</p>

东巴文说明：

• 显示为上标
• 常用于数学公式、脚注、指数

东巴文使用场景：

<!-- 数学公式 -->
<p>
    勾股定理：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
</p>

<p>
    质能方程：E = mc<sup>2</sup>
</p>

<!-- 脚注 -->
<p>
    东巴文<sup>[1]</sup>是一个编程学习平台。
</p>

<p>
    参考文献<sup>[2]</sup>提供了详细信息。
</p>

<!-- 指数 -->
<p>
    2<sup>10</sup> = 1024
</p>

<p>
    10<sup>6</sup> = 1,000,000
</p>

<!-- 序数词 -->
<p>
    1<sup>st</sup> 第一
    2<sup>nd</sup> 第二
    3<sup>rd</sup> 第三
</p>

下标标签 <sub>

<sub>标签表示下标文本。

<p>
    化学式：H<sub>2</sub>O
</p>

<p>
    化学式：CO<sub>2</sub>
</p>

<p>
    数学变量：x<sub>1</sub>, x<sub>2</sub>, x<sub>3</sub>
</p>

东巴文说明：

• 显示为下标
• 常用于化学式、数学变量

东巴文使用场景：

<!-- 化学式 -->
<p>
    水：H<sub>2</sub>O
</p>

<p>
    二氧化碳：CO<sub>2</sub>
</p>

<p>
    甲烷：CH<sub>4</sub>
</p>

<p>
    硫酸：H<sub>2</sub>SO<sub>4</sub>
</p>

<!-- 数学变量 -->
<p>
    数列：a<sub>1</sub>, a<sub>2</sub>, a<sub>3</sub>, ..., a<sub>n</sub>
</p>

<p>
    矩阵元素：A<sub>ij</sub>
</p>

<!-- 科学符号 -->
<p>
    化学反应：2H<sub>2</sub> + O<sub>2</sub> → 2H<sub>2</sub>O
</p>

综合示例

<article>
    <h1>科学知识</h1>
    
    <h2>物理公式</h2>
    <p>
        爱因斯坦的质能方程：E = mc<sup>2</sup>，其中E表示能量，m表示质量，c表示光速。
    </p>
    
    <p>
        勾股定理：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
    </p>
    
    <h2>化学式</h2>
    <p>
        水的化学式是H<sub>2</sub>O，由两个氢原子和一个氧原子组成。
    </p>
    
    <p>
        二氧化碳的化学式是CO<sub>2</sub>，是一个碳原子和两个氧原子组成。
    </p>
    
    <p>
        化学反应：2H<sub>2</sub> + O<sub>2</sub> → 2H<sub>2</sub>O
    </p>
    
    <h2>数学变量</h2>
    <p>
        数列：a<sub>1</sub>, a<sub>2</sub>, a<sub>3</sub>, ..., a<sub>n</sub>
    </p>
    
    <p>
        求和公式：S = a<sub>1</sub> + a<sub>2</sub> + ... + a<sub>n</sub>
    </p>
</article>

代码标签

<code>标签

<code>标签用于标记计算机代码。

<p>
    使用 <code>&lt;div&gt;</code> 标签创建容器。
</p>

<p>
    JavaScript 的 <code>console.log()</code> 函数用于输出信息。
</p>

<p>
    CSS 的 <code>color</code> 属性用于设置文本颜色。
</p>

东巴文说明：

• 默认显示等宽字体
• 用于行内代码
• 特殊字符需要转义

<kbd>标签

<kbd>标签表示键盘输入。

<p>
    按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制文本。
</p>

<p>
    按 <kbd>Ctrl</kbd> + <kbd>V</kbd> 粘贴文本。
</p>

<p>
    按 <kbd>F12</kbd> 打开开发者工具。
</p>

东巴文说明：

• 默认显示等宽字体
• 表示键盘按键
• 常用于快捷键说明

<samp>标签

<samp>标签表示程序的示例输出。

<p>
    程序输出：<samp>Hello, 东巴文！</samp>
</p>

<p>
    错误信息：<samp>File not found.</samp>
</p>

<p>
    命令提示符：<samp>C:\Users></samp>
</p>

东巴文说明：

• 默认显示等宽字体
• 表示程序输出
• 常用于教程文档

<var>标签

<var>标签表示变量。

<p>
    方程 <var>x</var> + <var>y</var> = 10。
</p>

<p>
    变量 <var>count</var> 表示计数器。
</p>

<p>
    函数 <var>f</var>(<var>x</var>) = <var>x</var><sup>2</sup>
</p>

东巴文说明：

• 默认显示斜体
• 表示数学变量或编程变量
• 常用于技术文档

综合示例

<article>
    <h1>JavaScript教程</h1>
    
    <p>
        在JavaScript中，使用 <code>let</code> 关键字声明变量：
    </p>
    
    <pre><code>
let <var>message</var> = "Hello, 东巴文！";
console.log(<var>message</var>);
    </code></pre>
    
    <p>
        按 <kbd>F12</kbd> 打开开发者工具，在控制台中输入代码，输出结果为：
        <samp>Hello, 东巴文！</samp>
    </p>
    
    <p>
        常用快捷键：
    </p>
    <ul>
        <li><kbd>Ctrl</kbd> + <kbd>C</kbd>：复制</li>
        <li><kbd>Ctrl</kbd> + <kbd>V</kbd>：粘贴</li>
        <li><kbd>Ctrl</kbd> + <kbd>Z</kbd>：撤销</li>
    </ul>
</article>

其他格式化标签

<abbr>标签

<abbr>标签表示缩写词或首字母缩写。

<p>
    <abbr title="HyperText Markup Language">HTML</abbr>是构建网页的基础语言。
</p>

<p>
    <abbr title="Cascading Style Sheets">CSS</abbr>用于网页样式设计。
</p>

<p>
    <abbr title="东巴文">db-w.cn</abbr>是一个编程学习平台。
</p>

东巴文说明：

• title属性提供完整解释
• 鼠标悬停时显示完整内容
• 提升可访问性

<dfn>标签

<dfn>标签表示定义术语。

<p>
    <dfn>HTML</dfn>是构建网页的基础语言。
</p>

<p>
    <dfn>标签</dfn>是HTML的基本组成单位。
</p>

东巴文说明：

• 表示定义的术语
• 默认显示斜体
• 具有语义化含义

<q>标签

<q>标签用于短引用。

<p>
    东巴文的目标是：<q cite="https://db-w.cn">让编程学习更有趣、更高效！</q>
</p>

东巴文说明：

• 浏览器自动添加引号
• cite属性指定引用来源
• 用于行内引用

<bdo>标签

<bdo>标签用于覆盖文本方向。

<p>
    正常文本：东巴文
</p>

<p>
    反向文本：<bdo dir="rtl">东巴文</bdo>
</p>

东巴文说明：

• dir属性指定文本方向
• ltr：从左到右
• rtl：从右到左

<bdi>标签

<bdi>标签用于隔离文本方向。

<ul>
    <li>用户 <bdi>إيان</bdi>：90分</li>
    <li>用户 <bdi>Julia</bdi>：85分</li>
    <li>用户 <bdi>张三</bdi>：95分</li>
</ul>

东巴文说明：

• 隔离文本方向
• 防止文本方向相互影响
• HTML5新增标签

最佳实践

东巴文文本格式化法则

法则1：优先使用语义化标签

<!-- ✅ 推荐：语义化标签 -->
<p>这是<strong>重要</strong>的内容。</p>
<p>这是<em>强调</em>的内容。</p>

<!-- ❌ 不推荐：非语义化标签 -->
<p>这是<b>重要</b>的内容。</p>
<p>这是<i>强调</i>的内容。</p>

法则2：合理使用格式化标签

<!-- ✅ 推荐：合理使用 -->
<p>
    <strong>警告：</strong>此操作不可逆！
</p>

<!-- ❌ 不推荐：过度使用 -->
<p>
    <strong><em><mark>警告</mark></em></strong>：此操作不可逆！
</p>

法则3：避免嵌套格式化标签

<!-- ❌ 不推荐：嵌套格式化标签 -->
<p>
    <strong><em>重要且强调的内容</em></strong>
</p>

<!-- ✅ 推荐：使用CSS控制样式 -->
<p class="important-emphasis">重要且强调的内容</p>

法则4：考虑可访问性

<!-- ✅ 推荐：考虑可访问性 -->
<p>
    <strong>重要提示：</strong>请仔细阅读。
</p>

<!-- ❌ 不推荐：仅视觉格式化 -->
<p>
    <b style="color: red;">重要提示：</b>请仔细阅读。
</p>

学习检验

知识点测试

问题1：以下哪个标签表示重要文本？

A. <b> B. <strong> C. <em> D. <i>

答案：B

东巴文解释：<strong>标签表示重要文本，具有语义化含义。<b>仅表示粗体，无语义。<em>表示强调，<i>表示斜体。

问题2：以下哪个标签用于表示上标？

A. <sub> B. <sup> C. <small> D. <span>

答案：B

东巴文解释：<sup>标签表示上标，<sub>表示下标，<small>表示小号文本，<span>是通用行内容器。

实践任务

任务：创建一个包含以下文本格式化标签的文档：

1. <strong>和<em>
2. <mark>
3. <del>和<ins>
4. <sup>和<sub>
5. <code>和<kbd>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本格式化示例 - 东巴文</title>
</head>
<body>
    <article>
        <h1>文本格式化标签示例</h1>
        
        <h2>粗体和斜体</h2>
        <p>
            <strong>重要提示：</strong>请仔细阅读以下内容。
        </p>
        <p>
            我<em>真的</em>很喜欢编程。
        </p>
        
        <h2>标记文本</h2>
        <p>
            搜索结果中会<mark>高亮显示</mark>关键词。
        </p>
        
        <h2>删除和插入</h2>
        <p>
            原价：<del>¥999</del> 现价：<ins>¥599</ins>
        </p>
        
        <h2>上标和下标</h2>
        <p>
            数学公式：E = mc<sup>2</sup>
        </p>
        <p>
            化学式：H<sub>2</sub>O
        </p>
        
        <h2>代码和键盘</h2>
        <p>
            使用 <code>&lt;div&gt;</code> 标签创建容器。
        </p>
        <p>
            按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制文本。
        </p>
        
        <footer>
            <small>版权所有 &copy; 2024 东巴文（db-w.cn）</small>
        </footer>
    </article>
</body>
</html>

东巴文（db-w.cn） - 让编程学习更有趣、更高效！