Web 基础知识：HTML本系列将通过一步或几步的学习方式指导您掌握 CSS、HTML 和 JavaScript 的基础

本文是系列文章的一部分：Web 基础知识

本系列将通过一步或几步的学习方式指导您掌握 CSS、HTML 和 JavaScript 的基础知识。

在第一章中，我们将稍微（好吧，不止一点）谈论一下 HTML 的盒子模型以及构成今天所见的网络的元素。

盒子模型

HTML 是页面的骨架。它定义了页面的显示结构，但没有任何“实质内容”。话虽如此，该骨架的每个部分都遵循一个通用约定：它们都有一个盒子模型。

盒子模型是通过一组盒子来表示文档元素的模型。它们通常在浏览器检查工具中显示如下：

四个盒子，每个盒子都包含另一个盒子。这些盒子从大到小依次为：“边距”、“边框”、“填充”和“内容”

Margin：将所有边框、填充和内容包装为空白。
Border：包装所有填充和内容。
Padding：再次将所有内容包装为空格。
内容：包含文字、图像、视频等。

为了更好地理解这一点，让我们看下面的例子；单击按钮切换模式并观察框如何转换为真实世界的布局。这种结构是 HTML 的基础，用于构建您在屏幕上看到的一切。事实上，一些组件已经内置在 Web 中供您使用。

现在让我们看看它们。

简介`<div>`

A<div>是最纯粹的容器形式。它没有默认样式或特殊行为。除了作为一个简单的空白容器之外，它没有任何指定的功能。检查任何布局时，你会发现几乎所有内容都被包裹在中<div>。

然而，了解何时使用它们非常重要。虽然您可以使用<div>，但 HTML 引入了几个提供相同功能但更易于开发人员和用户访问的元素。

这就是我们通常所说的“语义元素”。

这些元素之所以重要，是因为使用屏幕阅读器的用户必须了解屏幕上当前显示的内容，才能有效地进行导航。屏幕阅读器无法像人类一样解读屏幕内容，因此必须依赖*无障碍树**来理解层级结构和导航模式，从而完成其工作。

问题是，当不使用语义元素时，用户无法获得应用程序或网页特定部分的适当上下文，并且使用屏幕阅读器浏览它会变得更加困难。

重要的是要理解，语义元素之所以成为最佳实践，是有原因的，并且可访问性始终应该放在首位。如果您想了解更多信息，我们有一篇关于 Web 可访问性的精彩文章。

无障碍功能简介

无障碍设计能让尽可能多的人使用你的产品。这反过来又能带来更多利润。以下是如何在网页端提升无障碍设计。

现在让我们深入了解一下这些元素，好吗？

语义元素和默认值

HTML 中有很多现成的元素，每个元素都有其存在的位置和用途。了解 HTML 默认设置非常重要，这样在设计文档样式时，你才能更好地利用它们，而不是违背它们。

一些 HTML 元素严格用于对内容进行分组，通常称为容器，而其他 HTML 元素则用于文本、图像等。

这些元素都具有一些称为 HTML 默认的浏览器样式。这些样式可能会根据浏览器的渲染引擎而变化。

输入元素

这是一组输入元素的示例，可帮助用户与网站进行交互。

<html>
<head>
  <link href="stylesheet.css" rel="stylesheet" />
</head>
<body>
  <div class="elements">
    <section>
      <input placeholder="Input field" style="width: 192px" />
      <input type="date" style="width: 192px; margin-bottom: 16px" />
    </section>
    <section>
      <span style="display: flex;flex-direction: row;width: fit-content;gap: 24px;align-items: center;">
        <button>Submit</button>
        <fieldset>
          <input type="checkbox" />
          <input type="checkbox" />
        </fieldset>
        <fieldset>
          <input type="radio" name="selection" />
          <input type="radio" name="selection" />
        </fieldset>
      </span>
      <input type="range" min="1" max="100" value="50" class="slider" style="width: 192px" />
    </section>
  </div>
</body>

</html>

这些元素包含控件、输入字段、日期选择器以及通常可以帮助用户执行操作或向特定屏幕添加数据的任何东西。

容器元素

现在，我们来看一下您可以访问的语义容器元素。与输入元素不同，这些元素本身没有任何视觉表示或样式，它们的作用是告诉开发人员和屏幕阅读器每个容器的功能和用途。

<body> <!-- 只能有一个body。它包含文档的所有内容 --></body>
<nav> <!-- 包含用于导航到当前或相关文档的链接 --></nav>
<header> <!-- header表示给定容器的第一个子元素 --></header>
<main> <!-- 在主体容器内包含主要内容 --></main>
<section> <!-- 包含一个独立的内容片段 --></section>
<aside> <!-- 表示与文档内容间接相关的任何内容 --></aside>
<footer> <!-- 页脚表示给定容器的最后一个子元素 --></footer>

查看所有元素

此列表并非详尽无遗。HTML 是一套复杂的工具，因此花些时间深入研究其文档以了解更多有关其小部件的信息非常重要。您可以访问下方所有剩余元素的列表。

了解有关 HTML 及其元素的更多信息

要查看所有 HTML 元素的完整列表，请单击下面的链接。

📚 MDN: HTML

HTML 属性

HTML 元素具有原生属性，用于定义其功能、样式或添加重要信息。这些属性可以是必需属性（即元素在没有这些属性的情况下无法显示或运行），也可以是可选属性，具体取决于开发人员的需求。

HTML 属性的示例如下：

三个 HTML 元素及其相应的属性。首先是一张图片，然后是一段视频，最后是一个标准的 div。

全局属性

全局属性可以应用于任何 HTML 元素。一些最常用的属性包括：

属性	功能
`id`	指定该元素唯一的字符串 ID。与 CSS 和/或 JavaScript 结合使用时非常有用，可以对特定元素应用样式或行为。
`title`	指定元素的标题。标题有助于提高可访问性，因为它可以告诉屏幕阅读器特定对象的内容是什么。
`class`	指定用于设置元素样式的 CSS 类。这是前端开发的核心功能，允许你通过应用相同的类将相同的样式复用到多个不同的元素上。
`style`	允许在 HTML 元素中使用内联 CSS 代码。适用于快速且特定的 CSS 覆盖，且不打算将其普遍应用于特定元素或类。

查看所有全局属性

要查看全局属性的完整列表，请单击下面的链接。

📚 MDN：全局属性

强制属性

HTML 元素需要特定的属性才能发挥作用，具体属性取决于所使用的元素。让我们来看一个例子，使用一个<img>标签来定义 HTML 中的图像块。

img 标签的表示，显示 src 属性和 alt 属性。

属性	功能
`src`	这是一个必需属性。它告诉`<img>`标签要加载哪个源文件。如果没有它，则不会显示任何内容。
`alt`	这并非强制属性，但也不妨设为强制属性。这对于屏幕阅读器至关重要，因为它能够告诉视障用户当前屏幕上显示的内容。

可选属性

img 标签的表示，显示 src 属性和loading属性。

属性	功能
`loading`	这是一个可选属性。它告诉浏览器何时加载图像。告诉浏览器仅当图像接近或在视口内时才 `lazy`加载图像。这有助于加快网页加载速度，但如果图像太大而无法立即加载，则可能导致用户等待。告诉浏览器尽快加载图像。** `eager`**

由于每个元素的可选属性和强制属性不同，因此在使用现有 HTML 元素时检查文档非常重要。

使用 CSS 来设置 HTML 样式

现在我们已经了解了 HTML 的一些组件，您可能想知道如何控制它们的美感并使其成为您自己的。

为此，我们将使用CSS （ 层叠样式表的缩写）。它们与 HTML 元素相结合，允许您更改其属性。

初始值

大多数组件都包含其自己的样式默认值。但这些值可以使用 CSS 进行自定义。

以表单为例，只需简单修改 CSS 中的几个值，就能轻松获得全新的外观和感觉。

财产	初始值	自定义值
`background-color`	`#FFF`	`#E5FEFF`
`border`	`2px inset #767676`	`2px solid #55B4ED`
`padding`	`2px`	`16px` `12px`
`font-weight`	`400`	`700`

默认值不一致！

此处显示的值是 Chrome 中的默认值。HTML 组件的默认样式可能会根据其显示平台而发生巨大变化。

让我们进一步了解 CSS！

CSS 极其强大，值得专门写一篇文章！我们将探讨属性、值、变量、选择器等等！

跟随我进入下面的下一章！

Web 基础知识：HTML