HTML 文本格式化

什么是文本格式化

HTML 提供了多种标签用于格式化文本，这些标签可以改变文本的外观或表达特定的语义含义。文本格式化标签主要分为两类：语义化标签和样式标签。

重要性和强调标签

1. <strong> - 重要文本

表示内容的重要性，通常显示为粗体：

<p>这是<strong>非常重要</strong>的信息。</p>
<p><strong>注意：</strong>请仔细阅读以下内容。</p>

2. <em> - 强调文本

表示强调，通常显示为斜体：

<p>我<em>真的</em>很喜欢这个设计。</p>
<p>请<em>务必</em>在截止日期前提交。</p>

3. <mark> - 高亮文本

用于突出显示文本，通常有背景色：

<p>搜索结果：HTML 是<mark>超文本标记语言</mark>。</p>
<p>重要提醒：<mark>会议时间已更改</mark>。</p>

视觉效果标签

1. <b> - 粗体文本

纯粹的视觉效果，没有语义含义：

<p>产品名称：<b>超级笔记本电脑</b></p>
<p><b>价格：</b>￥5999</p>

2. <i> - 斜体文本

纯粹的视觉效果，通常用于外文、术语等：

<p>这是一个<i>拉丁语</i>词汇。</p>
<p>著名小说<i>《三体》</i>获得了雨果奖。</p>

3. <u> - 下划线文本

为文本添加下划线：

<p><u>下划线文本</u>通常用于标记拼写错误。</p>

4. <s> - 删除线文本

表示不再准确或相关的内容：

<p>原价：<s>￥199</s> 现价：￥99</p>
<p><s>这个信息已经过时了。</s></p>

上标和下标

1. <sup> - 上标

用于指数、序数等：

<p>水的化学式是H<sup>2</sup>O。</p>
<p>爱因斯坦的质能方程：E=mc<sup>2</sup></p>
<p>这是第1<sup>st</sup>名。</p>

2. <sub> - 下标

用于化学公式、数学公式等：

<p>葡萄糖的分子式：C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>
<p>数学中的对数：log<sub>2</sub>8 = 3</p>

文本大小标签

1. <small> - 小号文本

表示不太重要的信息，如版权声明、免责声明等：

<p>购买我们的产品 <small>（需年满18岁）</small></p>
<p>© 2024 公司名称 <small>保留所有权利</small></p>

2. <big> - 大号文本（已废弃）

注意：<big> 标签在 HTML5 中已被废弃，应使用 CSS 来控制文字大小。

<!-- 不推荐 -->
<big>大号文本</big>

<!-- 推荐 -->
<span style="font-size: larger;">大号文本</span>

插入和删除标签

1. <ins> - 插入文本

表示新增的内容，通常显示为下划线：

<p>会议时间：<del>周三下午2点</del> <ins>周四上午10点</ins></p>
<p>价格已更新：<ins>现在只要￥199</ins></p>

2. <del> - 删除文本

表示已删除的内容，通常显示为删除线：

<p><del>旧的联系电话：123-456-7890</del></p>
<p>新的联系电话：098-765-4321</p>

引用相关标签

1. <q> - 短引用

用于短的内联引用，浏览器会自动添加引号：

<p>孔子说过：<q>学而时习之，不亦说乎。</q></p>
<p>正如某位智者所言：<q>知识就是力量。</q></p>

2. <blockquote> - 长引用

用于较长的引用内容，通常独立成段：

<blockquote>
    <p>这是一段较长的引用文本。它可能包含多个句子，
    甚至多个段落。通常用于引用他人的观点或重要声明。</p>
</blockquote>

<blockquote cite="https://example.com">
    <p>互联网是我们这个时代最伟大的发明之一，
    它改变了人们交流、学习和工作的方式。</p>
    <footer>—— <cite>某位技术专家</cite></footer>
</blockquote>

3. <cite> - 引用来源

用于标记作品的标题（书籍、电影、歌曲等）：

<p>我最喜欢的电影是<cite>《肖申克的救赎》</cite>。</p>
<p>根据<cite>《HTML5 权威指南》</cite>一书的说明...</p>

代码相关标签

1. <code> - 内联代码

用于标记单行代码或代码片段：

<p>使用<code>console.log()</code>输出调试信息。</p>
<p>HTML标签<code>&lt;p&gt;</code>用于创建段落。</p>

2. <pre> - 预格式化文本

保留空格和换行，常用于代码块：

<pre>
function greet(name) {
    console.log("Hello, " + name + "!");
}

greet("World");
</pre>

3. <kbd> - 键盘输入

表示用户输入，如键盘按键：

<p>按<kbd>Ctrl</kbd> + <kbd>C</kbd>复制文本。</p>
<p>输入命令<kbd>npm install</kbd>安装依赖。</p>

4. <samp> - 程序输出

表示程序的输出结果：

<p>运行结果：<samp>Hello, World!</samp></p>
<p>错误信息：<samp>Error: File not found</samp></p>

5. <var> - 变量

表示数学公式或程序中的变量：

<p>在公式 <var>y</var> = <var>mx</var> + <var>b</var> 中...</p>
<p>变量<var>userName</var>存储用户名。</p>

其他格式化标签

1. <abbr> - 缩写

定义缩写词，可以提供完整形式：

<p><abbr title="HyperText Markup Language">HTML</abbr>是网页的基础语言。</p>
<p><abbr title="Cascading Style Sheets">CSS</abbr>用于网页样式。</p>

2. <dfn> - 定义术语

标记术语的定义：

<p><dfn>HTML</dfn>是一种用于创建网页的标记语言。</p>
<p><dfn title="响应式设计">响应式设计</dfn>是指网页能够适应不同设备屏幕的设计方法。</p>

3. <time> - 时间

表示时间或日期：

<p>文章发表于<time datetime="2024-02-03">2024年2月3日</time>。</p>
<p>会议时间：<time datetime="2024-02-03T14:00">下午2点</time>。</p>

语义 vs 样式

语义标签 vs 样式标签

理解语义标签和纯样式标签的区别很重要：

语义标签（推荐使用）：

<strong>重要信息</strong>    <!-- 语义上重要 -->
<em>强调内容</em>           <!-- 语义上强调 -->
<mark>高亮文本</mark>       <!-- 语义上需要注意 -->
<code>代码片段</code>        <!-- 语义上是代码 -->

样式标签（谨慎使用）：

<b>粗体文本</b>            <!-- 仅仅是粗体样式 -->
<i>斜体文本</i>            <!-- 仅仅是斜体样式 -->
<u>下划线文本</u>          <!-- 仅仅是下划线样式 -->

实际应用示例

技术文档格式化

<article>
    <h1>JavaScript 基础教程</h1>
    
    <p><strong>注意：</strong>本教程适合<em>初学者</em>阅读。</p>
    
    <h2>变量声明</h2>
    <p>使用<code>let</code>关键字声明变量：</p>
    
    <pre><code>
let <var>userName</var> = "张三";
let <var>age</var> = 25;
    </code></pre>
    
    <p>输出结果为：<samp>张三, 25岁</samp></p>
    
    <p><abbr title="ECMAScript 2015">ES6</abbr>引入了许多新特性。</p>
</article>

商品信息格式化

<div class="product">
    <h2>智能手机 <small>（限时优惠）</small></h2>
    
    <p><strong>产品特点：</strong></p>
    <ul>
        <li><mark>高性能</mark>处理器</li>
        <li><em>超长</em>续航时间</li>
        <li>专业级摄影功能</li>
    </ul>
    
    <p>原价：<s>￥3999</s> <strong>现价：￥2999</strong></p>
    
    <p><small>* 活动时间有限，数量有限</small></p>
</div>

学术文章格式化

<article>
    <h1>化学反应原理</h1>
    
    <p>水分子的化学式为H<sub>2</sub>O，表示由2个氢原子和1个氧原子组成。</p>
    
    <p>根据爱因斯坦的理论，E=mc<sup>2</sup>，质量可以转化为能量。</p>
    
    <blockquote>
        <p>科学研究表明，水是地球上最重要的化合物之一。</p>
        <cite>—— 《化学基础》第三版</cite>
    </blockquote>
    
    <p><time datetime="2024-02-03">2024年2月3日</time>更新</p>
</article>

CSS 样式控制

虽然 HTML 提供了格式化标签，但现代web开发中通常使用 CSS 来控制样式：

<style>
/* 重写默认样式 */
strong {
    color: #d63031;
    font-weight: bold;
}

em {
    color: #0984e3;
    font-style: italic;
}

mark {
    background-color: #fdcb6e;
    padding: 2px 4px;
}

code {
    background-color: #f1f2f6;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
}

.highlight {
    background-color: yellow;
    font-weight: bold;
}
</style>

<p><strong>重要信息</strong>使用红色显示</p>
<p><em>强调内容</em>使用蓝色显示</p>
<p><mark>高亮文本</mark>有黄色背景</p>
<p>这是<code>代码片段</code>的样式</p>

实践练习

创建一个包含各种文本格式化的文档：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML 文本格式化练习</title>
    <style>
        body {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        
        .note {
            background-color: #e8f4fd;
            border-left: 4px solid #007acc;
            padding: 15px;
            margin: 20px 0;
        }
        
        pre {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <h1>Web 开发技术指南</h1>
    
    <p><strong>重要说明：</strong>本文档介绍了现代 web 开发的<em>核心技术</em>。</p>
    
    <h2>HTML 基础</h2>
    <p><dfn>HTML</dfn>（<abbr title="HyperText Markup Language">HTML</abbr>）
    是构建网页的<mark>标准标记语言</mark>。</p>
    
    <div class="note">
        <p><strong>提示：</strong>学习 HTML 时，建议从<code>&lt;html&gt;</code>、
        <code>&lt;head&gt;</code>和<code>&lt;body&gt;</code>标签开始。</p>
    </div>
    
    <h3>基本语法</h3>
    <p>HTML 标签的基本语法如下：</p>
    
    <pre><code>&lt;标签名 属性="值"&gt;内容&lt;/标签名&gt;</code></pre>
    
    <p>例如：<code>&lt;p class="intro"&gt;这是段落&lt;/p&gt;</code></p>
    
    <h2>数学公式示例</h2>
    <p>勾股定理：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
    <p>化学方程式：2H<sub>2</sub> + O<sub>2</sub> → 2H<sub>2</sub>O</p>
    
    <h2>引用示例</h2>
    <blockquote>
        <p>学而时习之，不亦说乎？有朋自远方来，不亦乐乎？
        人不知而不愠，不亦君子乎？</p>
        <cite>—— 《论语·学而》</cite>
    </blockquote>
    
    <h2>编辑历史</h2>
    <p>文档创建时间：<time datetime="2024-02-03T10:00">2024年2月3日上午10点</time></p>
    <p>价格更新：<del>原价 ￥199</del> <ins>现价 ￥99</ins></p>
    
    <h2>操作说明</h2>
    <p>要保存文件，请按<kbd>Ctrl</kbd> + <kbd>S</kbd>。</p>
    <p>程序执行后输出：<samp>Hello, World!</samp></p>
    
    <footer>
        <p><small>© 2024 Web开发教程 - 版权所有 | 
        最后更新：<time datetime="2024-02-03">2024年2月3日</time></small></p>
    </footer>
</body>
</html>

常见错误

1. 混淆语义和样式

<!-- 错误：仅为了加粗而使用 strong -->
<strong>普通加粗文本</strong>

<!-- 正确：使用 CSS 或 b 标签 -->
<span style="font-weight: bold;">普通加粗文本</span>
<!-- 或 -->
<b>普通加粗文本</b>

2. 嵌套错误

<!-- 错误：不当嵌套 -->
<strong><strong>双重加粗</strong></strong>

<!-- 正确：避免重复嵌套 -->
<strong>重要文本</strong>

3. 滥用格式化标签

<!-- 错误：滥用标签做布局 -->
<u><i><b>过度格式化</b></i></u>

<!-- 正确：适度使用 -->
<strong>重要信息</strong>

小结

• 选择语义化标签比纯样式标签更好
• <strong> 和 <em> 用于重要性和强调
• <code>、<pre>、<kbd> 等用于代码相关内容
• <sup> 和 <sub> 用于上标和下标
• 引用相关标签增强内容的可信度
• 现代开发中优先使用 CSS 控制样式
• 避免过度格式化，保持内容的清晰性

下一章我们将学习 HTML 链接的创建和使用。