HTML-101 #5. 文本格式化、引用和代码格式化
发布: (2026年1月11日 GMT+8 13:00)
8 min read
原文: Dev.to
Source: Dev.to
👋 简短介绍（我写这篇的原因）
我目前正在学习 HTML，并决定通过记录我的学习过程来 公开学习。
这篇博客是我的 HTML‑101 系列的一部分，我正从零开始一步步学习 HTML。
该系列 不是专家撰写——而是一个初学者大声学习、分享：
- 我所理解的，
- 让我困惑的，
- 以及我在过程中学到的。
目标是建立一致性、清晰度，并邀请讨论。
📌 本博客涵盖内容
在本篇文章中，我将介绍：
- HTML 中的文本格式化标签
- 语义化与非语义化格式化（
<strong>与<b>，<em>与<i>） - 下划线、突出显示、小号文本、删除文本
- 上标和下标的使用
- 使用
<blockquote>和<q>引用内容 - 使用
<code>和<pre>进行代码格式化
📂 GitHub 仓库
我的所有笔记、示例和练习代码都在这里：
[GitHub repo link]
该仓库会随着我的学习持续更新。
📚 学习笔记
1. HTML 文本格式化标签
| Tag | 可视效果 | 语义含义 | 屏幕阅读器 |
|---|---|---|---|
<strong> | 粗体 | ✅ 有（表示重要性） | 强调 |
<b> | 粗体 | ❌ 无 | 正常 |
<em> | 斜体 | ✅ 有（表示强调） | 强调 |
<i> | 斜体 | ❌ 无 | 正常 |
<strong>
- 目的： 语义上表示重要性；浏览器会渲染为粗体。
- 语法：
<strong>Warning</strong> - 何时使用： 当文本具有重要意义，而不仅仅是想让它看起来粗体时。
<em>
- 目的： 表示重音或强调；屏幕阅读器会改变语调。渲染为斜体。
- 语法：
I <em>really</em> sorry - 何时使用： 当你想传达强调，而不仅仅是斜体时。
<b>
- 目的： 仅提供视觉上的粗体，没有语义含义。
- 语法：
<b>Hi There!</b> - 何时使用： 需要粗体样式但不表示重要性时。
<i>
- 目的： 仅提供视觉上的斜体，没有语义含义。
- 语法：
<i>Hi There!</i> - 何时使用： 需要斜体样式但不表示强调时。
<u>
- 目的： 为文本添加下划线。
- 语法：
<u>This is underlined</u> - 何时使用： 用于注释、拼写错误或纯粹的装饰性目的，不 用来表示重要性。
<mark>
- 目的： 用黄色背景高亮文本。
- 语法：
<mark>This is a highlighted word</mark> - 何时使用： 用于吸引对相关或匹配文本的注意（例如搜索结果）。
<small>
- 目的： 减小字体大小。
- 语法：
<small>Terms and conditions apply</small> - 何时使用： 用于免责声明、法律说明或细小文字。
<del>
- 目的： 显示删除线（已删除）文本。
- 语法：
<del>$50</del> <ins>$30</ins> - 何时使用： 表示已移除/过时的内容、降价、版本变更或更正。
<sup> / <sub>
- 上标（Superscript）：
<sup>将文本提升。例：x<sup>2</sup>（用于指数）。 - 下标（Subscript）：
<sub>将文本降低。例：H<sub>2</sub>O（用于化学式）。
<abbr>
- 目的： 标记缩写，并通过
title提供完整形式。 - 语法：
<abbr title="HyperText Markup Language">HTML</abbr> - 何时使用： 提升可访问性，并在悬停时显示含义。
2. HTML 中的引用
<blockquote>
- 目的： 用于长引用或需要独立显示的引文块。默认以块级元素呈现，带缩进，并另起新行。
- 语法：
<blockquote>
This is a long quoted section from another source.
</blockquote>- 可选
cite属性：
<blockquote cite="source-url">
The future belongs to those who believe in the beauty of their dreams.
— Eleanor Roosevelt
</blockquote>- 何时使用： 用于引用较长的段落或来源。
<cite>
- 目的： 标明引用或创作作品的来源。
- 语法：
<cite>— Eleanor Roosevelt</cite> - 何时使用： 为引用、书籍、文章或作者提供出处。
<q>
- 目的： 行内短引用；浏览器会自动添加引号。
- 语法：
<p>He said, <q>HTML is easy to learn</q> and smiled.</p>- 何时使用： 当引用是句子的一部分且不应打断文本流时。
关键区别
| 特性 | <blockquote> | <q> |
|---|---|---|
| 显示方式 | 块级元素 | 行内元素 |
| 典型用途 | 长引用 | 短引用 |
| 换行 | 是 | 否 |
| 默认样式 | 缩进 | 自动添加引号 |
| 语义含义 | 引用段落 | 引用短语 |
3. 代码格式化标签
<code>
- 目的： 表示与周围文本一起出现的短代码片段。
- 语法：
Use the <code>console.log()</code> function to output messages to the console.Source: …
继续调试。
- **何时使用：** 用于段落中出现的短命令、文件名、变量名等。
#### `<code>`
- **目的：** 为短代码片段提供语义标记，通常在行内使用。
- **语法：**
```html
<code>example</code>- 何时使用： 用于短命令、文件名、变量名等出现在段落中的情况。
<pre>
- 目的： 精确显示预格式化的多行内容（保留空白、缩进和换行）。
- 语法：
<pre>
function greet(){
console.log("Hello World");
}
</pre>- 何时使用： 用于多行代码块或任何对格式要求严格的内容。
将 <pre> 与 <code> 结合
对于真实的代码块，将 <code> 嵌套在 <pre> 中：
<pre><code>
function add(a, b) {
return a + b;
}
</code></pre><pre>保留格式；<code>添加语义意义。
## ⚠️ 我遇到的挑战 / 错误
最初我只了解 `<strong>`、`<em>`、`<b>` 和 `<i>`。我没有意识到语义标签的重要性、`<strong>` 与 `<b>` 的区别，或者如何使用 `<code>` 和 `<pre>` 正确地格式化代码。（本节其余部分在原稿中被截断。）
**Cleaned Markdown**
```markdown
, , , as they are. -->
So that was something new I learned while going through this topic.
If you faced any issues or have any questions, do let me know in the comments 🙂 💬 反馈与讨论
💡 我很期待你的反馈！
如果你注意到：
- 有错误的地方，
- 更好的解释，
- 或者有改进我理解的建议，
请在下方评论。我乐于学习并纠正错误。
⭐ 支持学习之旅
如果你觉得这些笔记有用：
⭐ 考虑给 GitHub 仓库点个星 —— 这真的能激励我继续学习并公开分享。
🐦 保持更新（Twitter / X）
我会定期分享学习更新、笔记和进展。
🔜 接下来
在下一篇文章中，我将介绍：
👉 路径、锚点标签、邮件和电话链接
我也会在进展中继续更新 GitHub 仓库。
🙌 最后思考
感谢阅读！
如果你也在学习 HTML，欢迎：
- 继续跟随，
- 分享你的经验，
- 或在评论中提出问题 👋