每周摸鱼日
分享大家都周五摸鱼小技巧
上午论坛、玩手机、带薪拉 💩、发呆
下午 14:00 睡醒后缓一缓
14:30 咖啡，15:00
论坛、贴吧、知乎、手机、带薪拉 💩、楼下抽烟
论坛、手机、论坛、发呆、下班
新手写网页，为了让字变粗，随手就是一个 <b>，为了倾斜就是一个 <i>。但这在现代前端开发中是一个巨大的坑。
在 HTML 的早期，没有 CSS，标签确实是用来控制样式的。但随着标准演进，HTML 只负责声明“语义（这是什么）”，长什么样全部交给了 CSS。如果你还在用标签来做“纯视觉展示”，不仅会破坏代码规范，还会导致屏幕阅读器（视障用户工具）和搜索引擎（SEO）无法正确识别网页的重点。
💡 核心定律：永远不要为了改变字体样式（加粗、斜体）去使用 HTML 标签。如果你只想改变外观，请使用 CSS。
一、语气强调：<em> (Emphasis)
<em> 用于改变句子的重音位置，从而改变句子的确切含义。默认表现为斜体。
就像我们日常说话，加重不同的字，意思就截然不同：
- 原句：我没有说他偷了钱。
- 强调“我”：
<em>我</em>没有说他偷了钱。（潜台词：可能是别人说的。） - 强调“偷”：
我没有说他<em>偷</em>了钱。（潜台词：他可能是借的。）
二、重要性强调：<strong>
<strong> 用于标记极其重要、严重警告的信息。默认表现为加粗。
屏幕阅读器遇到 <strong> 时，会明显加重语气朗读，提醒用户这部分绝对不能忽略。
<!-- ✅ 正确做法：必须重视的安全警告 -->
<p>这个液体<strong>有剧毒</strong>，千万别碰！</p>
<!-- ✅ 正确做法：重要信息嵌套语气强调，双层重音 -->
<p>这个液体<strong>有剧毒——喝了会<em>死</em></strong>！</p>三、被降级的“视觉/语境”标签：<i>、<b>、<u>
这三个标签曾经代表纯样式的斜体、加粗和下划线。在 HTML5 中，它们被赋予了新的、更微弱的语义，不再代表重点或强调。
1. <i>：语境切换 (Idiomatic Text)
不再是单纯斜体，而是表示这段文本属于另一种语境，与周围的文字区分开来。
适用场景：外文单词、科学学名、人物内心的想法。
<!-- ✅ 正确做法：标记外文语境 -->
<p>菜单上有<i lang="fr">soupe à l'oignon</i>（法语：洋葱汤）。</p>
<!-- ❌ 错误示范：为了强调语气使用 i -->
<p>我<i>真的很开心</i>。</p>2. <b>：单纯视觉突出 (Bring Attention To)
不再是重要警告，而是表示需要视觉上醒目，但不具备任何额外的重要权重。
适用场景：文档里的关键词、产品名、摘要里的导读词。
<!-- ✅ 正确做法：普通的关键词高亮 -->
<p>我买了新电脑：<b>MacBook Air M2</b>。</p>
<!-- ❌ 错误示范：把警告信息写成 b（读屏软件会像读废话一样读过去） -->
<p>前方施工，<b>请绕行</b>！</p>3. <u>：特殊异常标记 (Unarticulated Annotation)
不再是普通的下划线，而是用于指出文本中存在某种非正常的特殊情况。
适用场景：拼写错误的单词。
⚠️ 注意事项：在网页中，带下划线的文字约定俗成代表“超链接”。除非是标记拼写错误，否则绝对不要使用 <u> 或者给普通文字加下划线，这会误导用户认为这是一个可点击的链接。<!-- ❌ 错误示范：为了强调随便加下划线，用户点击没反应被气死 -->
<p>今天超市的鸡蛋<u>全部免费送</u>！</p>
<!-- ✅ 正确做法：用来标示“错别字”这种非正常文本，并配合 CSS 改成红色波浪线 -->
<p>我昨天<u style="text-decoration: wavy red underline;">网</u>记带伞了（注：作者打错字了，原意是“忘”）。</p>
效果：
四、已被废弃的“纯样式标签”
以下标签因为百分之百只有样式、毫无语义，已经被 HTML 标准彻底废弃。现在开发中严禁使用。
| 废弃标签 | 旧作用 | 现代替代方案（CSS 或语义标签） |
|---|---|---|
<big> | 字变大 | font-size: 1.2em |
<font> | 改字号颜色 | color: red; font-size: 16px |
<strike> | 加删除线 | <s> (表示已过期信息) 或 text-decoration: line-through |
五、总结与下一步
📝 速记总结：
<strong>= 真的非常重要（必须警惕/重视）。<em>= 改变句子的重音位置（从而改变含义）。<b>/<i>= 仅仅需要视觉高亮或标明特殊语境，但不改变重要性。- 想改样式（变大、加粗），一律使用 CSS。
到目前为止，我们一直在死抠“单段文字”的细节：用 h1 写标题，用 p 写段落，用 strong 抓重点。
但是，如果在网页上遇到“一大串同类信息”该怎么排版？比如，教用户做菜的 10 个步骤，或是电商网站顶部的 5 个导航按钮？难道就是敲 10 个段落标签然后再手动标上 1. 2. 3. 吗？
当然不是。在下一章《07. HTML的 3 种列表：ul、ol、dl》中，我们将讲解如何用最纯粹的机器语言，去管理网页里的“步骤逻辑”和“并列数据”。
