语义 HTML、CSS 选择器和特异性。

第一天是在书里，这意味着是时候写一篇博文了。 如果标题没有泄露，这篇文章将涵盖：

1. 语义 HTML
2. CSS 选择器和特异性（二合一交易！）

1.语义HTML

它是什么？： 语义 HTML 是在 HTML 编码时使用更具描述性和意义的标签的做法。 标签就是你用来包装内容的任何东西。一些最常见的是

, , , , , ， 和 . 上面提供的六个标签中有五个可以被认为是语义化的，你能识别出哪个不是吗？ 如果你猜对了 标记你是完全正确的。 原因是，与其他标签相比， 不提供它所拥有的内容的描述。 然而，如果您使用 我们知道这是一段内容或一段 是一段内容。 正是这种差异突出了语义 HTML 的优势； 在查看页面之前了解页面的内容。 为什么重要？： 使用语义 HTML 很重要有几个原因。 匹配标准： 您知道我们可以使用我们想要的任何单词创建自定义 HTML 标签吗？ 例如，我们可以制作一个 标签，它会被我们的本地 解释 IDE 或浏览器 为普通的 HTML。 虽然这看起来很整洁，但在 HTML 的早期，这是一个巨大的问题。 许多公司使用自定义标签来构建他们的产品，以便他们的独特内容由标签表示。 听起来很语义化，但这导致了浏览器兼容性、新员工理解和 SEO 最大化方面的很多问题。 那时引入了一套标准。 这些 标准 帮助浏览器、新员工和公司专注于几乎在任何地方都能理解的通用标签。 浏览器理解和搜索引擎优化： 上面稍微提到，当搜索引擎解析你的页面时，他们正在寻找内容。 简而言之，当您使用语义 HTML 标签时，搜索引擎会立即将其识别为内容。 例如，H1 标签是您最强大的标签。 因此，确保它包含最重要的文本将有助于搜索引擎了解您的产品。 如何实现： 使用语义 HTML 很容易！ 除了我们使用 之外，这就像在 HTML 中编码其他任何东西一样 语义标签 来定义我们的内容 。 下面是两组代码的示例，向您展示两者之间的区别。 语义导航： 非语义导航： 从这些示例中，您可以看到语义版本使用定义内容的标签。 虽然非语义虽然准确，但体积更大，更难以立即理解。 其他资源： W3C标准 上网难：语义HTML W3School 语义元素 2. CSS 选择器和特性 它们是什么？： CSS 选择器是我们将 CSS 样式应用于我们的 HTML 的目标 HTML 项（元素、类、ID）。 这些选择器中的每一个都具有一定程度的特异性。 这意味着与其他选择器相比，一些选择器具有更大的影响力。 部分特殊性是选择器的设计，另一半是 CSS 的级联特性。 我的导师告诉我们将特异性可视化为瀑布。 在顶部，我们有更多的通用选择器，随着我们逐渐向下，特异性变得越来越……具体。 下图说明了这种关系： 当我们走下“瀑布”时，我们的特殊性被放大了。 为什么它们很重要？： 选择器是 CSS 的支柱。 它们使我们能够定位和设计网页上的所有内容。 如果我们没有它们，我们将依靠内联样式技术。 虽然内联样式对某些 Javascript 框架很有用，但最佳做法是链接外部 .css 文件或将标记嵌入