1- 元素与样式的分离：内容优先，样式其次

1.1- 问题的提出：效果 vs. 语义

• 问题： 你想要让一段文字又大又粗，你会怎么做？
• 错误的做法： 直接使用 <h1> 元素，即使这段文字并不是真正的标题。
• 原因： 你关注的是显示效果（大而粗），而不是内容含义（是否是标题）。
• 核心概念： HTML 的作用是描述内容结构，而不是显示样式。

1.2- HTML 的职责：定义内容结构

• HTML 元素应该根据其内容含义来选择，而不是根据其显示效果来选择。
• 例如：
  • <h1> - <h6>： 用于标记不同级别的标题。
  • <p>： 用于标记段落。
  • <a>： 用于标记链接。

1.3- CSS 的职责：控制显示样式

• 显示样式（例如：字体大小、颜色、布局）应该完全由 CSS 来控制。
• CSS 允许我们灵活地改变元素的显示效果，而不会影响其语义。

1.4- 示例对比

• 错误示例：

  <!-- 不好的做法，因为 <h1> 不是真正的标题 -->
  <h1 style="font-size: 20px;">这是一段很重要的文字，需要放大加粗</h1>
  

• 正确示例：

  <!-- 正确的做法：使用 <h1> 标记标题 -->
  <h1>这是一级标题</h1>
  
  <!-- 使用 CSS 控制段落样式 -->
  <p style="font-size: 16px; font-weight: bold;">这是一段重要文字，放大加粗</p>
  

• 小结： HTML 负责内容结构，CSS 负责样式呈现。内容优先，样式其次。

2- 浏览器的默认样式：只是 " 默认 " 而已

2.1- 浏览器与默认 CSS

• 默认样式： 在没有 CSS 的情况下，浏览器会应用默认的 CSS 样式来显示 HTML 元素。
• <h1> 的默认样式： 通常会显示得较大且加粗。但这仅仅是浏览器的默认行为。
• 关键： 元素的显示样式是由 CSS 控制的，而不是元素本身。

2.2- 查看与修改默认样式

• 开发者工具： 你可以使用浏览器的开发者工具（通常按 F12 键打开）来查看和修改元素的默认 CSS 样式。

• 尝试修改： 修改 <h1> 元素的 font-size、font-weight 和 display 属性，你会发现元素的显示效果可以完全改变。

• 示例：

  <!--  这是一个 <h1> 元素，但显示效果完全由 CSS 控制-->
  <h1 style="font-size: 1em; font-weight: normal; display: none;">
    我是一个隐藏的一级标题
  </h1>
  

2.3- 小结：元素本身不决定样式

• 元素本质： HTML 元素的本质是其语义（例如，<h1> 表示一级标题），而不是其显示效果。
• 灵活控制： 通过 CSS，你可以完全控制元素的显示效果，包括字体、颜色、布局等。

3- 为什么要语义化？三大理由

3.1- 理由一：良好的裸页面结构

• 网络不佳： 在网络不佳，或者 CSS 文件未加载的情况下，语义化的 HTML 仍然可以呈现清晰的内容结构。
• 默认样式： 浏览器默认样式（例如标题变大，段落前后空行）可以帮助用户理解页面结构。
• 体验提升： 良好的裸页面结构可以提升用户在网络不佳情况下的浏览体验。

3.2- 理由二：更好的搜索引擎优化 (SEO)

• 搜索引擎： 搜索引擎（如 Google, 百度等）会抓取网页代码，并分析网页内容。
• 理解内容： 语义化的 HTML 有助于搜索引擎更好地理解网页的内容，从而提高网页在搜索结果中的排名。
• SEO 优势： 使用正确的 HTML 元素，可以提高网页的 SEO 表现。

3.3- 理由三：更好的浏览器解析

• 辅助功能： 现代浏览器具有阅读模式、朗读模式、辅助功能等，这些功能依赖于语义化的 HTML 结构。
• 内容提取： 浏览器能够识别标题、正文等内容，并提供更好的用户体验，例如自动提取文章内容或实现朗读功能。
• 更好体验： 使用语义化的 HTML 可以为用户提供更好的浏览体验。

3.4- 反例：不使用语义化的后果

• <div> 的滥用： 如果所有内容都用无语义的 <div> 元素包裹，浏览器将难以理解网页内容。
• 功能受限： 一些浏览器功能，如阅读模式、朗读模式，可能会无法正常工作。
• 内容丢失： 在特殊模式下，没有语义的内容可能会被浏览器过滤掉。

4- 总结与思考

• 核心原则： 选择 HTML 元素时，永远要优先考虑元素的语义，而不是其样式。
• CSS 控制： 所有的样式控制，都应该使用 CSS 来实现。
• 重要性： 语义化的 HTML 代码可以提高网站的可读性、可访问性、SEO 表现，并能够让你的网站在各种环境下都能够良好运行。
• 思考： 在编写 HTML 代码时，你是否习惯性地使用了 <div> 或其他无语义的元素？你是否真正理解了每个 HTML 元素的含义？

记住，代码不仅仅是给机器看的，也是给人看的！