正在加载...

HTML 文本格式

你已经用过 style 属性改变文字外观。格式化标签回答的是另一个问题：这段文字意味着什么？重要警告、口语式强调、高亮、修订、小字说明，以及 H₂O 这类上下标，都属于专用的 HTML 元素。浏览器常常默认把它们显示成粗体或斜体，但辅助工具和搜索系统也能利用这种含义——单靠颜色做不到这一点。把这些标签与 style 对照着学，能在进入完整 CSS 之前先分清「看起来怎样」和「表示什么」。

什么是 HTML 文本格式化？

文本格式化元素把一个词或短语包在段落（或类似文本）里，标出角色：重要性、强调、高亮、删除、插入等等。它们是行内元素。不会像 p 或 h1 那样开启新块。你把它们放在真正承担该角色的那段文字周围，再闭合，这样句子其余部分就恢复正常。

直接回答

用语义化格式化标签表达含义：strong 表示强烈重要性，em 表示重音强调（就像说话时加重某个词），mark 表示相关高亮，small 表示小字或旁注，del 与 ins 表示删去或插入的文字，sub / sup 表示下标与上标。含义重要时优先用这些标签。若只想要粗体或斜体外观、没有额外含义，请用 CSS——包括上一课的行内 style 思路——而不要误用 strong 或 em。

标签速查

📊 常见格式化标签

标签 典型含义 默认外观（常见）
strong 强烈重要性 粗体
em 强调 / 重音 斜体
mark 高亮 / 相关 偏黄背景
small 旁注 / 小字 更小文字
del 已删除文字 删除线
ins 已添加文字 下划线
sub 下标 更低更小的文字
sup 上标 更高更小的文字

先学 strong 与 em

strong 和 em 是你最常用的一对。内容重要时用 strong——关键词、警告、正文里的必填字段标签。说话时会加重某个词时用 em。默认的粗体和斜体只是常见呈现方式；即便样式表稍后改变外观，这些标签仍然携带含义。

重要性与强调

html
HTML Code 
<p>
The <strong>final price</strong> includes tax.
Please read the refund rules <em>before</em> you pay.
</p>

解读示例

  • strong 包住 “final price”，因为该短语在句中重要
  • em 包住 “before”，因为时间点是被强调的意思
  • 两个标签都在同一个段落里；它们并不替代 p
  • 若只想要深蓝色文字、没有重要性含义，用 style（或之后的 CSS）更合适

一个段落里的更多格式化标签

当 strong 和 em 用起来自然之后，再加入高亮、修订、小字与上下标这些帮手。嵌套保持浅层：只包住需要该角色的那些词。

多种格式化标签合用

html
HTML Code 
<p>
Water is H<sub>2</sub>O. The safety note is <strong>important</strong>.
Please read this <em>carefully</em>.
The deadline moved from <del>Friday</del> to <ins>Monday</ins>.
Note: <small>prices may change</small>.
Search hit: <mark>HTML</mark> formatting.
Area: 12<sup>2</sup> square meters.
</p>

每个帮手在做什么

  • sub 把水分子式里的 “2” 压低；sup 把 12² 里的指数抬高
  • del 与 ins 显示修订痕迹——旧值去掉、新值加入
  • small 标记次要小字，而不是主论点
  • mark 高亮相关命中，类似搜索高亮
  • strong 与 em 仍在同一段落里标记重要性与重音
    不必每个句子都塞满所有标签。只选与文字真实含义相符的那些。两三个用得准的标签，往往比一行里每隔几个词就包一层标签更易读。

含义标签 vs 仅外观样式

旧页面有时用 b 和 i 做粗体与斜体，却没有强烈含义。本课程中：内容重要时优先 strong，说话时会加重某个词时优先 em。只要外观时用 CSS。这个习惯让 HTML 更诚实：格式化标签描述内容，样式表描述呈现。即便以后设计师改了字体，语义标签仍能告诉读屏软件和搜索工具：什么重要、什么是口语式强调。

在编辑器中练习

  1. 写一段关于产品价格的普通段落。
  2. 用 strong 包住产品名。
  3. 用 em 包住一个警告词。
  4. 用 del 标旧价，用 ins 标新价。
  5. 可选：用 small 加一行脚注式说明，或用 sub / sup 加一小段公式。
  6. 保存并打开页面。确认标签已闭合，含义读起来清楚。
  7. 故意漏掉一个结束标签，刷新，观察样式如何“漏”到行末，再修好。
    看到未闭合标签把样式“泄漏”到整段，比只复制完美示例更能训练谨慎嵌套。修好后再核对源码：开始标签与结束标签的名称和顺序必须一致。

削弱格式化的错误

  • 词确实重要时只用 style="font-weight: bold"——含义上优先 strong
  • 到处用 strong 只为了加粗——会稀释重要性
  • 无必要地嵌套五个格式化标签
  • 把 sup / sub 当装饰，而不是真正的上下标（数学、化学、脚注）
  • 忘记结束标签，导致页面其余部分继承粗体、斜体或高亮
  • 把 mark 当成整段无关文字的通用黄色颜料
  • 没有真正的修订历史时，把 del/ins 当成纯设计用的删除线效果

小结

  • 格式化标签在文字内添加含义，而不只是装饰
  • 从 strong 和 em 开始，需要时再加 mark、small、del、ins、sub 与 sup
  • 重要性、强调、修订或上下标重要时，优先语义标签
  • 只要外观、没有额外含义时用 CSS
  • 嵌套保持简单，打开的每个标签都要闭合
  • 按句子含义选标签，不要习惯性地把一切都加粗

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Html 教程