文本格式化标签：掌握 HTML 文本样式的艺术

什么是文本格式化标签?

文本格式化标签是 HTML 中用于改变文本外观和强调重要性的标签。就像我们在文档编辑器中使用粗体、斜体来强调内容一样，HTML 也提供了丰富的标签来实现这些效果。

为什么需要文本格式化?

想象你在阅读一篇技术文档，所有文字都是同一种样式，没有任何强调或区分。你很难快速找到重点,也无法理解哪些内容更重要。文本格式化的作用是:

强调重要内容:让读者注意到关键信息
传达语义信息:不仅仅是视觉效果,还表达内容的含义
提升可读性:通过视觉层次让内容更易理解
增强可访问性:帮助屏幕阅读器用户理解内容的重要性

html

<!-- 没有格式化的文本 -->
<p>
  Warning: The server will be down for maintenance from 2 PM to 4 PM. All users
  must save their work before 2 PM. Contact [email protected] for questions.
</p>

<!-- 有格式化的文本 -->
<p>
  <strong>Warning:</strong> The server will be down for maintenance from
  <mark>2 PM to 4 PM</mark>.
  <em>All users must save their work before 2 PM.</em> Contact
  <code>[email protected]</code> for questions.
</p>

第二个例子通过格式化清楚地传达了信息的重要性和层次。

语义化格式标签

strong 和 em: 强调的正确方式

 和  是 HTML5 推荐使用的语义化强调标签。

strong 标签 - 强烈重要性

html

<!-- strong表示内容非常重要 -->
<p>
  <strong>Important:</strong> Please read the entire document before proceeding.
</p>

<p>
  The deadline for submission is <strong>December 31, 2025</strong>. Late
  submissions will not be accepted.
</p>

<p>
  <strong>Security Alert:</strong> Your password will expire in 3 days. Please
  update it immediately.
</p>

 标签的含义:

表示内容具有强烈的重要性、严重性或紧迫性
默认显示为粗体,但这只是浏览器的默认样式
可以嵌套使用,表示更强的重要性

em 标签 - 语气强调

html

<!-- em表示语气上的强调 -->
<p>I <em>really</em> need to finish this project today.</p>

<p>You should <em>never</em> share your password with others.</p>

<p>This is <em>not</em> the correct approach.</p>

 标签的含义:

表示语气上的强调,改变句子的重点
默认显示为斜体
可以嵌套使用,表示更强的强调

strong vs em 的区别

html

<!-- 对比两者的使用场景 -->
<p><strong>Warning:</strong> System maintenance in progress.</p>
<p>This is <em>extremely</em> important to understand.</p>

<p><strong>Do not</strong> enter the restricted area.</p>
<p>You <em>must</em> complete the training before starting.</p>

<!-- 可以组合使用 -->
<p>
  <strong>Critical Update:</strong> The system will <em>permanently</em> delete
  all data in <strong><em>24 hours</em></strong
  >.
</p>

mark 标签 - 高亮标记

 标签用于突出显示文本,通常表示与用户当前活动相关的内容。

html

<!-- 搜索结果中高亮关键词 -->
<p>We found 3 results for "<mark>JavaScript</mark>":</p>
<ul>
  <li>Introduction to <mark>JavaScript</mark> Programming</li>
  <li>Advanced <mark>JavaScript</mark> Concepts</li>
  <li><mark>JavaScript</mark> Best Practices</li>
</ul>

<!-- 文档中标记重点 -->
<p>
  The function accepts three parameters: <mark>name</mark>, <mark>age</mark>,
  and <mark>email</mark>.
</p>

<!-- 标记引用中的关键部分 -->
<blockquote>
  <p>
    The future of web development lies in
    <mark>component-based architecture</mark> and
    <mark>progressive web applications</mark>.
  </p>
</blockquote>

code、kbd、samp、var - 计算机相关文本

这些标签用于标记与计算机相关的文本内容。

code 标签 - 代码片段

html

<!-- 行内代码 -->
<p>Use the <code>console.log()</code> function to debug your code.</p>

<p>
  The <code>Array.map()</code> method creates a new array with the results of
  calling a function.
</p>

<p>To install the package, run <code>npm install react</code>.</p>

<!-- 代码块(通常配合pre标签) -->
<pre><code>function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Alice"));</code></pre>

kbd 标签 - 键盘输入

html

<!-- 标记键盘按键 -->
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

<p>Save your work by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>

<p>
  To open developer tools, press <kbd>F12</kbd> or <kbd>Ctrl</kbd> +
  <kbd>Shift</kbd> + <kbd>I</kbd>.
</p>

<p>Navigate to the next tab with <kbd>Ctrl</kbd> + <kbd>Tab</kbd>.</p>

samp 标签 - 程序输出

html

<!-- 标记程序输出结果 -->
<p>The command returned: <samp>Error: File not found</samp></p>

<p>Server response: <samp>200 OK</samp></p>

<p>
  After running the script, you should see: <samp>Installation complete!</samp>
</p>

var 标签 - 变量名

html

<!-- 标记变量 -->
<p>The value of <var>x</var> is calculated as <var>a</var> + <var>b</var>.</p>

<p>
  In the formula <var>E</var> = <var>mc</var><sup>2</sup>,
  <var>E</var> represents energy.
</p>

传统格式标签

b 和 i: 样式标签

虽然 HTML5 更推荐使用语义化标签,但  和  在特定场景下仍然有用。

b 标签 - 视觉上引人注意

html

<!-- 产品名称 -->
<p>The new <b>ProMax 5000</b> features advanced cooling technology.</p>

<!-- 文章中的关键词但不强调重要性 -->
<p>
  The ingredients include <b>flour</b>, <b>sugar</b>, <b>eggs</b>, and
  <b>butter</b>.
</p>

<!-- 对比:没有语义重要性时使用b -->
<p><b>Chapter 1:</b> Introduction to Web Development</p>
<!-- 有语义重要性时使用strong -->
<p><strong>Warning:</strong> Do not proceed without backup.</p>

i 标签 - 替代语态或语气

html

<!-- 技术术语 -->
<p>The <i>Document Object Model</i> (DOM) is a programming interface.</p>

<!-- 外语词汇 -->
<p>The restaurant's signature dish is <i>coq au vin</i>.</p>

<!-- 思想或内心独白 -->
<p>Sarah thought, <i>This is going to be harder than I expected.</i></p>

<!-- 对比:语气强调时使用em -->
<p>I <em>absolutely</em> need to finish this today.</p>
<!-- 外语或术语时使用i -->
<p>The term <i>cache</i> comes from the French word for "hiding place".</p>

特殊格式标签

sub 和 sup - 上标和下标

html

<!-- 下标:化学式 -->
<p>Water's chemical formula is H<sub>2</sub>O.</p>
<p>Carbon dioxide is represented as CO<sub>2</sub>.</p>
<p>
  The molecular formula for glucose is C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>.
</p>

<!-- 上标:数学公式 -->
<p>The area of a circle is πr<sup>2</sup>.</p>
<p>Einstein's famous equation: E = mc<sup>2</sup></p>
<p>2<sup>10</sup> equals 1024.</p>

<!-- 脚注引用 -->
<p>
  According to recent research<sup>1</sup>, web performance significantly
  impacts user engagement<sup>2</sup>.
</p>

small - 附属细则

html

<!-- 版权声明 -->
<p>&copy; 2025 TechCorp. <small>All rights reserved.</small></p>

<!-- 免责声明 -->
<p>
  Product availability may vary by region.
  <small>Terms and conditions apply.</small>
</p>

<!-- 附加信息 -->
<h2>Premium Subscription $99/month</h2>
<p><small>Billed annually at $1,188. Cancel anytime.</small></p>

del 和 ins - 修订标记

html

<!-- 价格修改 -->
<p>Original price: <del>$199</del> Now: <ins>$149</ins></p>

<!-- 文档修订 -->
<p>
  The meeting is scheduled for <del>Tuesday</del> <ins>Wednesday</ins> at 3 PM.
</p>

<!-- 带时间戳的修订 -->
<p>
  Status: <del datetime="2025-11-29">In Progress</del>
  <ins datetime="2025-11-30">Completed</ins>
</p>

<!-- 编辑历史 -->
<p>We offer <del>three</del> <ins>four</ins> different subscription plans.</p>

abbr - 缩写和首字母缩略词

html

<!-- 带说明的缩写 -->
<p>
  The <abbr title="World Wide Web">WWW</abbr> was invented by Tim Berners-Lee.
</p>

<p>
  Use <abbr title="HyperText Markup Language">HTML</abbr> for structure and
  <abbr title="Cascading Style Sheets">CSS</abbr> for styling.
</p>

<p>
  Our <abbr title="Application Programming Interface">API</abbr> supports
  <abbr title="REpresentational State Transfer">REST</abbr> architecture.
</p>

<!-- 技术术语 -->
<p>
  <abbr title="Search Engine Optimization">SEO</abbr> is crucial for website
  visibility.
</p>

q 和 blockquote - 引用

html

<!-- 短引用(行内) -->
<p>
  As Steve Jobs said,
  <q>Design is not just what it looks like, design is how it works.</q>
</p>

<p>
  The documentation states:
  <q>All API calls must include authentication tokens.</q>
</p>

<!-- 块引用 -->
<blockquote>
  <p>The best way to predict the future is to invent it.</p>
  <footer>— <cite>Alan Kay</cite></footer>
</blockquote>

<blockquote cite="https://example.com/article">
  <p>
    Modern web development requires understanding of multiple technologies
    including HTML, CSS, JavaScript, and various frameworks.
  </p>
  <p>
    Each technology plays a crucial role in creating robust web applications.
  </p>
</blockquote>

实际应用案例

技术文档示例

html

<article>
  <h1>Getting Started with React Hooks</h1>

  <section>
    <h2>Introduction</h2>
    <p>
      <strong>React Hooks</strong> are functions that let you use state and
      other React features in <em>functional components</em>.
    </p>

    <p>
      The most commonly used hooks are <code>useState</code> and
      <code>useEffect</code>. Before hooks, you could only use state in
      <i>class components</i>.
    </p>
  </section>

  <section>
    <h2>Basic Usage</h2>
    <p>
      <strong>Important:</strong> Hooks must be called at the
      <mark>top level</mark> of your function component.
    </p>

    <p>To use <code>useState</code>, import it from React:</p>
    <pre><code>import { useState } from 'react';</code></pre>

    <p>
      The syntax is:
      <code
        >const [<var>state</var>, <var>setState</var>] =
        useState(<var>initialValue</var>);</code
      >
    </p>
  </section>

  <section>
    <h2>Common Mistakes</h2>
    <p>
      <strong>Never</strong> call hooks inside loops, conditions, or nested
      functions.
    </p>

    <p><del>Incorrect:</del></p>
    <pre><code>if (condition) {
  useState(0); // ❌ Wrong!
}</code></pre>

    <p><ins>Correct:</ins></p>
    <pre><code>const [count, setCount] = useState(0); // ✅ Right!
if (condition) {
  setCount(1);
}</code></pre>
  </section>
</article>

产品说明页面

html

<article>
  <h1>CloudMax Pro Subscription</h1>

  <section>
    <h2>Pricing</h2>
    <p><strong>Special Launch Offer:</strong></p>
    <p><del>$299/month</del> <ins>$199/month</ins></p>
    <p>
      <small>Limited time offer. Price valid until December 31, 2025.</small>
    </p>
  </section>

  <section>
    <h2>Features</h2>
    <ul>
      <li><mark>Unlimited storage</mark> - Store as much as you need</li>
      <li><strong>99.99% uptime</strong> guarantee</li>
      <li><em>Priority</em> customer support</li>
      <li><abbr title="Application Programming Interface">API</abbr> access</li>
    </ul>
  </section>

  <section>
    <h2>System Requirements</h2>
    <p>
      Operating System: Windows<sup>®</sup> 10 or later, macOS<sup>®</sup> 11+,
      or Linux
    </p>
    <p>Browser: Latest version of Chrome, Firefox, Safari, or Edge</p>
    <p>RAM: <em>Minimum</em> 4GB, <strong>Recommended</strong> 8GB+</p>
  </section>

  <section>
    <h2>Quick Start</h2>
    <ol>
      <li>Install the application: <code>npm install cloudmax-cli</code></li>
      <li>Initialize your project: <code>cloudmax init</code></li>
      <li>Deploy: <code>cloudmax deploy</code></li>
    </ol>
    <p>
      For help, press <kbd>Ctrl</kbd> + <kbd>H</kbd> or type
      <code>cloudmax --help</code>
    </p>
  </section>
</article>

博客文章示例

html

<article>
  <h1>Understanding JavaScript Closures</h1>
  <p><small>Posted on November 30, 2025 by Emily Chen</small></p>

  <section>
    <h2>What Are Closures?</h2>
    <p>
      A <strong>closure</strong> is a function that has access to variables in
      its <em>outer lexical scope</em>, even after the outer function has
      returned.
    </p>

    <p>
      As Douglas Crockford said,
      <q>Closures are one of the most powerful features of JavaScript.</q>
    </p>
  </section>

  <section>
    <h2>Why This Matters</h2>
    <p>Understanding closures is <em>essential</em> for:</p>
    <ul>
      <li><mark>Data privacy</mark> and encapsulation</li>
      <li>Creating <i>factory functions</i></li>
      <li>Event handlers and callbacks</li>
      <li>
        <abbr title="Immediately Invoked Function Expression">IIFE</abbr>
        patterns
      </li>
    </ul>
  </section>

  <section>
    <h2>Example</h2>
    <p>
      Consider this code where <var>counter</var> is preserved through closure:
    </p>
    <pre><code>function createCounter() {
  let count = 0;  // Private variable
  return function() {
    return ++count;
  };
}</code></pre>
    <p>
      The inner function <em>remembers</em> the <var>count</var> variable even
      after <code>createCounter()</code> finishes.
    </p>
  </section>

  <section>
    <h2>Common Pitfall</h2>
    <p><strong>Warning:</strong> Be careful with closures in loops!</p>
    <p><del>This won't work as expected:</del></p>
    <pre><code>for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Output: 3, 3, 3</code></pre>

    <p><ins>Solution using let:</ins></p>
    <pre><code>for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Output: 0, 1, 2</code></pre>
  </section>
</article>

语义化 vs 样式化：如何选择?

决策树

html

<!-- 内容真的很重要吗? -->
<strong>Yes → use strong</strong>
<b>No, just visually distinct → use b</b>

<!-- 是语气强调吗? -->
<em>Yes → use em</em>
<i>No, foreign word/technical term → use i</i>

<!-- 是代码吗? -->
<code>Yes → use code</code>
<samp>Is it output? → use samp</samp>
<kbd>Is it input? → use kbd</kbd>
<var>Is it a variable? → use var</var>

<!-- 需要高亮吗? -->
<mark>Relevant to current context → use mark</mark>
<span class="highlight">Just decoration → use span with CSS</span>

最佳实践对比

html

<!-- ❌ 不推荐:过度使用样式标签 -->
<p>
  <b
    ><i><u>Important announcement!</u></i></b
  >
</p>

<!-- ✅ 推荐:使用语义化标签 -->
<p><strong>Important announcement!</strong></p>

<!-- ❌ 不推荐:用格式标签代替CSS -->
<p>
  <b><font color="red">Error message</font></b>
</p>

<!-- ✅ 推荐:用CSS控制样式 -->
<p class="error-message"><strong>Error message</strong></p>

<!-- ❌ 不推荐:混淆语义 -->
<em>Warning:</em> System error

<!-- ✅ 推荐:正确使用语义 -->
<strong>Warning:</strong> System error

可访问性考虑

html

<!-- 为屏幕阅读器提供上下文 -->
<p>
  Price: <del><span class="sr-only">was </span>$299</del>
  <ins><span class="sr-only">now </span>$199</ins>
</p>

<!-- 缩写要提供完整说明 -->
<p>
  Contact our <abbr title="Customer Service Team">CST</abbr> for assistance.
</p>

<!-- 引用应该提供来源 -->
<blockquote cite="https://example.com/source">
  <p>Quote content here.</p>
  <footer>— <cite>Author Name</cite>, <cite>Source Title</cite></footer>
</blockquote>

常见问题

问题 1: strong 和 b 有什么区别?

html

<!-- strong有语义,表示重要性 -->
<p><strong>Critical:</strong> Save your work immediately!</p>

<!-- b只是视觉效果,没有额外语义 -->
<p><b>Product Name:</b> UltraClean Pro 3000</p>

问题 2: 什么时候用 mark?

html

<!-- ✅ 搜索结果 -->
<p>Found "<mark>React</mark>" in 10 documents</p>

<!-- ✅ 相关内容高亮 -->
<p>The <mark>selected text</mark> will be copied</p>

<!-- ❌ 不要用于一般强调 -->
<p><mark>This is important</mark></p>
<!-- 应该用strong -->

问题 3: 如何组合使用多个标签?

html

<!-- ✅ 正确:从内到外考虑语义 -->
<p>
  <strong><em>Extremely important</em></strong> announcement
</p>

<!-- ✅ 正确:代码中的强调 -->
<p>
  Use <code><strong>const</strong></code> instead of <code>var</code>
</p>

<!-- ❌ 过度嵌套 -->
<p>
  <strong
    ><em
      ><mark><u>Don't do this</u></mark></em
    ></strong
  >
</p>

最佳实践总结

优先使用语义化标签:strong、em 而不是 b、i
根据内容含义选择标签:重要性用 strong,语气强调用 em
正确使用技术相关标签:code、kbd、samp、var 各有用途
提供缩写说明:始终为 abbr 添加 title 属性
考虑可访问性:确保格式化对屏幕阅读器用户有意义
不要过度格式化:保持简洁,避免不必要的视觉混乱
使用 CSS 控制样式:HTML 负责语义,CSS 负责外观
测试跨浏览器效果:确保格式化在不同浏览器中表现一致

通过正确使用文本格式化标签,你可以创建既美观又具有良好语义的网页内容,提升用户体验和可访问性。

文本格式化标签：掌握 HTML 文本样式的艺术 ​

什么是文本格式化标签? ​

为什么需要文本格式化? ​

语义化格式标签 ​

strong 和 em: 强调的正确方式 ​

mark 标签 - 高亮标记 ​

code、kbd、samp、var - 计算机相关文本 ​

传统格式标签 ​

b 和 i: 样式标签 ​

特殊格式标签 ​

sub 和 sup - 上标和下标 ​

small - 附属细则 ​

del 和 ins - 修订标记 ​

abbr - 缩写和首字母缩略词 ​

q 和 blockquote - 引用 ​

实际应用案例 ​

技术文档示例 ​

产品说明页面 ​

博客文章示例 ​

语义化 vs 样式化：如何选择? ​

决策树 ​

最佳实践对比 ​

可访问性考虑 ​

常见问题 ​

问题 1: strong 和 b 有什么区别? ​

问题 2: 什么时候用 mark? ​

问题 3: 如何组合使用多个标签? ​

最佳实践总结 ​

文本格式化标签：掌握 HTML 文本样式的艺术

什么是文本格式化标签?

为什么需要文本格式化?

语义化格式标签

strong 和 em: 强调的正确方式

mark 标签 - 高亮标记

code、kbd、samp、var - 计算机相关文本

传统格式标签

b 和 i: 样式标签

特殊格式标签

sub 和 sup - 上标和下标

small - 附属细则

del 和 ins - 修订标记

abbr - 缩写和首字母缩略词

q 和 blockquote - 引用

实际应用案例

技术文档示例

产品说明页面

博客文章示例

语义化 vs 样式化：如何选择?

决策树

最佳实践对比

可访问性考虑

常见问题

问题 1: strong 和 b 有什么区别?

问题 2: 什么时候用 mark?

问题 3: 如何组合使用多个标签?

最佳实践总结