diff --git a/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
index 74b0956e0bb0d0..6a4bcc9adf9911 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
@@ -1,46 +1,55 @@
 ---
 title: 处理文件
 slug: Learn/Getting_started_with_the_web/Dealing_with_files
+l10n:
+  sourceCommit: 865acb22b74a49927b98267566369d4677414f53
 ---
 
 {{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
 
-一个网站包含许多文件：文本内容、代码、样式表、媒体内容，等等。当你建立一个网站时，你需要在计算机上将这些文件以合理的结构组织起来，确保文件之间交互畅通，并在你最终[将它们上传到服务器](/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website)之前使你的所有内容看起来正确。*处理文件*讨论了一些你应该注意的问题，以便你能为你的网站建立一个合理的文件结构。
+一个网站包含许多文件：文本内容、代码、样式表、媒体内容，等等。在建立一个网站时，你需要在计算机上将这些文件以合理的结构组织起来，确保文件之间交互畅通，并在最终[将它们上传到服务器](/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website)之前使所有内容看起来正确。*处理文件*讨论了一些你应该注意的问题，以便你能为你的网站建立一个合理的文件结构。
 
 ## 网站应该保存在何处？
 
-对于本地网站，应将所有相关文件放在一个单独文件夹中，可以映射出服务器端站点文件结构。这个文件夹可以放在任何你喜欢的地方，但你应该把它放在你能轻易找到的地方，也许是在你的桌面上，在你的主页文件夹里，或者在你的硬盘根目录下。
+当你在本地计算机上构建网站时，应该将所有的相关文件放在一个映射出服务器端线上站点文件结构的单独文件夹中。这个文件夹可以放在你喜欢的任何地方，但你应该把它放在能轻易找到的地方，也许是在桌面上，在家目录里，或者在硬盘根目录下。
 
-1. 选择一个地方来存储你的网站项目。在你选择的地方，创建一个名为 `web-projects`（或类似）的新文件夹。这是你所有的网站项目的存放地。
-2. 在这个文件夹中，创建另一个文件夹来存放你的第一个网站。称之为 `test-site`（或更有想象力的东西）。
+1. 选择一个存放网站项目的地方。在你选择的地方，创建一个名为 `web-projects`（或类似）的新文件夹。这是你所有的网站项目的存放地。
+2. 在这个文件夹中，创建另一个存放你的第一个网站的文件夹。称之为 `test-site`（或更有想象力的名字）。
 
 ## 关于大小写和空格的提示
 
-你会注意到，在这篇文章中，我们要求你完全用小写字母命名文件夹和文件，没有空格。这是因为：
+你会注意到，在本文中，我们要求你完全用小写字母且不带空格命名文件夹和文件。这是因为：
 
-1. 许多计算机，特别是网络服务器，是区分大小写的。因此，假如你把一张图片放在你的网站上 `test-site/MyImage.jpg`，然后在一个不同的文件中，你试图以 `test-site/myimage.jpg` 来调用该图片，它可能无法工作。
-2. 浏览器、网络服务器和编程语言对空格的处理并不一致。例如，如果你在文件名中使用空格，一些系统可能将其视为两个文件名。一些服务器会用“%20”（URL 中空格的字符代码）替换文件名中的区域，导致所有链接被破坏。最好用连字符而不是下划线来分隔单词。对比 `my-file.html` 与 `my_file.html`。
+1. 许多计算机，特别是 Web 服务器，是区分大小写的。因此，假如把你的网站上的一张图片放在 `test-site/MyImage.jpg`，然后在一个不同的文件中，你试图以 `test-site/myimage.jpg` 调用该图片，它可能无法工作。
+2. 许多情况下，带有空格的文件名会出现问题：
 
-简言之，文件名中应使用连字符。谷歌搜索引擎把连字符当作单词的分隔符，但不会识别下划线。基于此，最好在一开始就养成习惯，文件夹和文件名使用小写，用短横线来分隔。这可以避免许多问题。
+   - 在终端中调用命令时，你不得不在带有空格的文件名的周围包裹引号，否则这个路径会解释成两个不同的项。
+   - 一些编程语言（如 Python）在导入模块文件时，不能很好地处理文件名中的空格。
+
+文件名也会映射为 URL。例如，假设在你的服务器提供服务的根目录下有一个名为 `my_file.html` 的文件，根据大多数 Web 服务器的默认行为，一般是可以通过 `https://example.com/my_file.html` 访问这个文件。一些服务器会将文件名中的空格替换为“%20”（URL 中空格的字符代码），在假定文件名和 URL 完全匹配的情况下，会出现一些难以捉摸的服务器端逻辑错误。
+
+也建议文件名使用连字符分割单词，而不是下划线：对比 `my-file.html` 和 `my_file.html`。[谷歌搜索引擎把连字符当作单词的分隔符，但不会把下划线当作单词的分隔符](https://developers.google.com/search/docs/crawling-indexing/url-structure)。通过服务器配置将下划线替换为连字符能避免这种情况，但那是额外的工作并且文件名和 URL 不一致更容易出错。
+
+基于这些原因，最好养成文件夹名和文件名使用小写、不带空格、用连字符分隔单词的习惯，至少直到你清楚自己在做什么的那个时候。那样的话，在接下来的旅程中，你遇到的问题会更少。
 
 ## 网站应该使用什么结构？
 
-接下来，让我们看看我们的测试网站应该是什么结构。在我们创建的任何网站项目中，最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹。现在让我们来创建这些：
+接下来，让我们看看测试网站应该使用什么结构。在我们创建的任何网站项目中，最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹。现在让我们创建这些：
 
-1. **`index.html`**：这个文件一般会包含主页内容，也就是人们第一次进入网站时看到的文字和图片。使用文本编辑器，创建一个名为`index.html`的新文件，并将其保存在`test-site`文件夹内。
+1. **`index.html`**：这个文件一般包含主页内容，也就是用户第一次访问网站时看到的文字和图片。使用文本编辑器，创建一个名为 `index.html` 的新文件，并将其保存在 `test-site` 文件夹内。
 2. **`images` 文件夹**：这个文件夹包含网站上使用的所有图片。在 `test-site` 文件夹内创建一个名为 `images` 的文件夹。
-3. **`styles` 文件夹**：这个文件夹包含用于设置内容样式的 CSS 代码（例如，设置文本和背景颜色）。在你的 `test-site` 文件夹内创建一个名为 `styles` 的文件夹。
+3. **`styles` 文件夹**：这个文件夹包含为内容提供样式的 CSS 代码（例如，设置文本和背景的颜色）。在 `test-site` 文件夹内创建一个名为 `styles` 的文件夹。
 4. **`scripts` 文件夹**：这个文件夹包含所有用于向网站添加交互功能的 JavaScript 代码（例如，点击时加载数据的按钮）。在 `test-site` 文件夹内创建一个名为 `scripts` 的文件夹。
 
 > [!NOTE]
-> 在 Windows 上你可能看不到文件扩展名，因为 Windows 有一个默认开启的**隐藏已知文件类型的扩展名**的选项。一般来说，你可以通过 Windows 资源管理器，选择**文件夹选项**选项，取消勾选**隐藏已知文件类型的扩展名**复选框，然后点击**确认**将其关闭。对于涉及你的 Windows 版本的更多具体信息，你可以在网上搜索。
+> 在 Windows 上你可能看不到文件扩展名，因为 Windows 有一个默认开启的**隐藏已知文件类型的扩展名**的选项。一般来说，你可以通过 Windows 资源管理器，选择**文件夹选项**选项，取消勾选**隐藏已知文件类型的扩展名**复选框，然后点击**确认**将其关闭。你可以在网上搜索涉及你的 Windows 版本的更多具体信息。
 
 ## 文件路径
 
-为使文件间正常交互，应为每个文件提供访问路径，所以一个文件知道另一个文件的位置。为作为演示，我们将在 `index.html` 中插入一小段 HTML，并使其显示你在[“你的网站会是什么样？“](/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)一文中选择的图片。或者，你可以在你的电脑上或从网上选择一个现有的图片，并在下面的步骤中使用它：
+为使文件之间交互通畅，你必须提供一个文件间的文件路径，让一个文件知道另一个文件的位置。作为演示，我们将在 `index.html` 中插入一小段 HTML，显示在[“你的网站会是什么样子？“](/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)一文中选择的图片。或者，你可以在电脑上或从网上选择一张现有的图片，并在下面的步骤中使用它：
 
-1. 将你之前选择的图片复制到你的 `images` 文件夹。
-2. 打开你的 `index.html` 文件，并准确地将以下代码插入该文件中。当下不要对其感到困惑——我们将在本系列的后面更详细地研究这些结构。
+1. 将前面选择的图片复制到 `images` 文件夹。
+2. 打开 `index.html` 文件，准确无误地将下列代码插入该文件中。现在不用担心它是什么意思——我们将在本系列后面的文章中更详细地研究这些结构。
 
    ```html
    <!doctype html>
@@ -56,17 +65,18 @@ slug: Learn/Getting_started_with_the_web/Dealing_with_files
    </html>
    ```
 
-3. 该行代码 `<img src="" alt="My test image">` 用于向页面中插入图片。我们需要告知 HTML 图片的位置。这张图片位于 _images_ 目录下，与 `index.html` 处于同一目录。为了从 `index.html` 访问到我们的图像，我们需要的文件路径是 `images/your-image-filename`。例如，这里的图像叫做 `firefox-icon.png`，那么文件路径就是 `images/firefox-icon.png`。
-4. 在 HTML 代码 `src=""` 的双引号之间插入文件路径。
-5. 保存 HTML 文件，然后使用浏览器打开（双击该文件）。你应该看到新网页显示了新的图像！
+3. 该行 HTML 代码 `<img src="" alt="My test image">` 用于向页面插入图片。我们需要告知 HTML 图片的位置。这张图片位于与 `index.html` 处于同一目录的 _images_ 目录下。为了从 `index.html` 访问到图片，我们需要的文件路径是 `images/your-image-filename`。假如图片叫做 `firefox-icon.png`，那么文件路径就是 `images/firefox-icon.png`。
+4. 在代码 `src=""` 的双引号之间插入文件路径。
+5. 将 `alt` 属性的内容改成引入的[图片的描述信息](/zh-CN/docs/Web/HTML/Element/img#使用有实际意义的备用描述)。在这个例子中，就是 `alt="Firefox 标志：一只盘旋在地球上的火狐"`。
+6. 保存 HTML 文件，然后使用浏览器打开（双击该文件）。你应该看到显示图片的新网页！
 
-![A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world](website-screenshot.png)
+![一张只显示 firefox 标志的基础网站的截图——一只盘旋在地球上的火狐](website-screenshot.png)
 
-文件路径的一些通用规则：
+一些通用的文件路径规则：
 
 - 若引用的目标文件与 HTML 文件同级，只需直接使用文件名，例如：`my-image.jpg`。
 - 要引用子目录中的文件，请在路径前面写上目录名，再加上一个正斜杠。例如：`subdirectory/my-image.jpg`。
-- 若引用的目标文件位于 HTML 文件的**上级**，需要加上两个点。举个例子，如果 `index.html` 在 `test-site` 的一个子文件夹内，而 `my-image.jpg` 在 `test-site` 内，你可以使用`../my-image.jpg` 从 `index.html` 引用 `my-image.jpg`。
+- 若引用的目标文件位于 HTML 文件的**上级**，需要加上两个点。举个例子，如果 `index.html` 在 `test-site` 的一个子文件夹内，而 `my-image.jpg` 在 `test-site` 内，你可以使用 `../my-image.jpg` 从 `index.html` 引用 `my-image.jpg`。
 - 以上方法可以随意组合，比如：`../subdirectory/another-subdirectory/my-image.jpg`。
 
 这是你目前需要知道的全部内容。
@@ -76,8 +86,8 @@ slug: Learn/Getting_started_with_the_web/Dealing_with_files
 
 ## 还应该做些什么？
 
-现在你的文件夹结构应该看起来像这样：
+这就是本文目前的全部内容。现在你的文件夹结构应该看起来像这样：
 
-![A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file](file-structure.png)
+![macOS 访达中的文件结构，包含：有一张图片的 images 文件夹，空的 scripts 和 styles 文件夹和一个 index.html 文件](file-structure.png)
 
 {{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
diff --git a/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md b/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md
index 0de0e4c75e43ba..a9655b09e09c47 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md
@@ -1,23 +1,25 @@
 ---
 title: HTML 基础
 slug: Learn/Getting_started_with_the_web/HTML_basics
+l10n:
+  sourceCommit: 88467d31d2ad7bdfade8b38ec69f6702fee080d1
 ---
 
 {{LearnSidebar}}
 
 {{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
 
-超文本标记语言（英语：**H**yper**T**ext **M**arkup **L**anguage，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。
+超文本标记语言（英语：**H**yper**T**ext **M**arkup **L**anguage，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表格。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。
 
 ## HTML 到底是什么？
 
-HTML 不是一门编程语言，而是一种用于定义内容结构的*标记语言*。HTML 由一系列的{{Glossary("element", "元素")}}组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对{{Glossary("tag", "标签")}}可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。例如，键入下面一行内容：
+HTML 是一种用于定义内容结构的*标记语言*。HTML 由一系列的[**元素**](/zh-CN/docs/Glossary/Element)组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对{{Glossary("tag", "标签")}}可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。例如，键入下面一行内容：
 
 ```plain
 My cat is very grumpy
 ```
 
-可以将这行文字封装成一个段落元素来使其在单独一行呈现：
+可以将这行文字封装成一个段落元素来使其独立成行：
 
 ```html
 <p>My cat is very grumpy</p>
@@ -27,59 +29,59 @@ My cat is very grumpy
 
 让我们深入探索一下这个段落元素。
 
-![HTML 元素](grumpy-cat-small.png)
+![段落元素，包含：开始标签，‘my cat is very grumpy’的内容，结束标签](grumpy-cat-small.png)
 
 这个元素的主要部分有：
 
-1. **开始标签**（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用——在本例中即段落由此开始。
-2. **结束标签**（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾——在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
+1. **开始标签**（Opening tag）：包含元素的名称（本例为 p），及一对包围名称的**尖括号**。这表示元素从这里开始或者开始起作用——在本例中即段落由此开始。
+2. **结束标签**（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个*正斜杠*。这表示元素到这里结束——在本例中即段落在此结束。初学者常常会犯忘记添加结束标签的错误，这可能会产生一些奇怪的结果。
 3. **内容**（Content）：元素的内容，本例中就是所输入的文本本身。
 4. **元素**（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
 
-元素也可以有属性（Attribute）：
+元素也可以有下图中那样的属性（Attribute）：
 
-![HTML 属性](grumpy-cat-attribute-small.png)
+![段落开始标签，以及高亮的 class 属性：class=editor-note](grumpy-cat-attribute-small.png)
 
-属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，`class` 是属性名称，`editor-note` 是属性的值。`class` 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。
+属性包含的是不想在真正的内容中出现的和元素有关的额外信息。本例中，`class` 是属性*名*，`editor-note` 是属性*值*。`class` 属性是可以用于定位元素（以及任何其他有相同 `class` 值的元素）的标识名称，以便进一步为元素指定样式或进行其他操作时使用。一些属性没有值，如 [`required`](/zh-CN/docs/Web/HTML/Attributes/required)。
 
-属性应该包含：
+有值的属性应该包含：
 
-1. 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
-2. 属性的名称，并接上一个等号。
-3. 由引号所包围的属性值。
+1. 属性与元素名称（或上一个属性，如果元素有超过一个属性的话）之间的一个空格。
+2. 属性名，后接一个等号。
+3. 一对引号包围的属性值。
 
 > [!NOTE]
-> 不包含 ASCII 空格（以及 `"` `'` `` ` `` `=` `<` `>`）的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。
+> 不包含 {{Glossary("ASCII")}} 空格（以及 `"` `'` `` ` `` `=` `<` `>`）的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。
 
 ### 嵌套元素
 
-也可以将一个元素置于其他元素之中——称作**嵌套**。要表明猫咪非常暴躁，可以将“very”用 {{htmlelement("strong")}} 元素包围，“very”将突出显示：
+也可以将一个元素置于其他元素之中——称作**嵌套**。要表明猫咪**非常**暴躁，可以将“very”用 {{htmlelement("strong")}} 元素包围，“very”将突出显示：
 
 ```html
 <p>My cat is <strong>very</strong> grumpy.</p>
 ```
 
-必须保证元素嵌套次序正确：本例首先使用 {{htmlelement("p")}} 标签，然后是 {{htmlelement("strong")}} 标签，因此要先结束 {{htmlelement("strong")}} 标签，最后再结束 {{htmlelement("p")}} 标签。这样是不对的：
+必须保证元素的嵌套次序正确：在上面的例子中，首先使用 {{htmlelement("p")}} 标签，然后是 {{htmlelement("strong")}} 标签，因此要先结束 {{htmlelement("strong")}} 标签，最后再结束 {{htmlelement("p")}} 标签。这样是不对的：
 
-```html example-bad
+```html-nolint example-bad
 <p>My cat is <strong>very grumpy.</p></strong>
 ```
 
-元素必须正确地开始和结束，才能清楚地显示出正确的嵌套层次。否则浏览器就得自己猜测，虽然它会竭尽全力，但很大程度不会给你期望的结果。所以一定要避免！
+元素必须正确地开始和结束，才能清楚地显示出正确的嵌套层次。要是像上面那样交叠使用，浏览器就得自己猜测，虽然它会竭尽全力，但很大程度不会给你期望的结果。所以一定要避免！
 
 ### 空元素
 
-不包含任何内容的元素称为空元素。比如 {{htmlelement("img")}} 元素：
+不包含任何内容的元素称为[**空元素**](/zh-CN/docs/Glossary/Void_element)。我们以 HTML 页面中已有的 {{htmlelement("img")}} 元素为例：
 
 ```html
 <img src="images/firefox-icon.png" alt="My test image" />
 ```
 
-本元素包含两个属性，但是并没有 `</img>` 结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。
+本元素包含两个属性，但是并没有 `</img>` 结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一张图片。
 
 ### HTML 文档详解
 
-以上介绍了一些基本的 HTML 元素，但孤木不成林。现在来看看单个元素如何彼此协同构成一个完整的 HTML 页面。回顾 [文件处理](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files) 小节中创建的 `index.html` 示例：
+以上把 HTML 元素作为个体进行介绍，但孤木不成林。现在来看看单个元素如何彼此协同构成一个完整的 HTML 页面。回顾[处理文件](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files)文章中创建的 `index.html` 示例：
 
 ```html
 <!doctype html>
@@ -97,11 +99,11 @@ My cat is very grumpy
 
 这里有：
 
-- `<!DOCTYPE html>`——[文档类型](/zh-CN/docs/Glossary/Doctype)。这是必不可少的开头。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，这个元素用来关联 HTML 编写规范，以供自动查错等功能所用。而在当今，它作用有限，可以说仅用于保证文档正常读取。现在知道这些就足够了。
-- `<html></html>`——{{htmlelement("html")}} 元素。该元素包含整个页面的所有内容，有时候也称作根元素。里面也包含了 `lang` 属性，写明了页面的主要语种。
-- `<head></head>`——{{htmlelement("head")}} 元素。所有那些你加到页面中，且*不*向用户展示的页面内容，都以这个元素为容器。其中包含诸如提供给搜索引擎的{{Glossary("keyword", "关键字")}}和页面描述、用于设置页面样式的 CSS、字符集声明等等。
+- `<!doctype html>`——[文档类型](/zh-CN/docs/Glossary/Doctype)。这是必不可少的开头。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，这个元素用来关联 HTML 编写规范，以供自动查错等功能所用。而在当今，它作用有限，可以说仅用于保证文档正常读取。现在知道这些就足够了。
+- `<html></html>`——{{htmlelement("html")}} 元素。该元素包含整个页面的所有内容，有时候也称作根元素。它还包含 `lang` 属性，设置页面的主要语种。
+- `<head></head>`——{{htmlelement("head")}} 元素。该元素作为想在 HTML 页面中包含但不想向用户显示的内容的容器。包括想在搜索结果中显示的{{Glossary("keyword", "关键字")}}和页面描述、用于设置页面样式的 CSS、字符集声明等等。
 - `<meta charset="utf-8">`——该元素指明你的文档使用 UTF-8 字符编码，UTF-8 包括世界绝大多数书写语言的字符。它基本上可以处理任何文本内容。以它为编码还可以避免以后出现某些问题，没有理由再选用其他编码。
-- `<meta name="viewport" content="width=device-width">`——[视口元素](/zh-CN/docs/Web/CSS/Viewport_concepts#移动设备的视口)可以确保页面以视口宽度进行渲染，避免移动端浏览器上因页面过宽导致缩放。
+- `<meta name="viewport" content="width=device-width">`——[视口元素](/zh-CN/docs/Web/CSS/Viewport_concepts#移动设备的视口)可以确保页面以视口宽度进行渲染，避免移动端浏览器以比视口更宽的宽度渲染内容，导致内容缩小。
 - `<title></title>`——{{htmlelement("title")}} 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
 - `<body></body>`——{{htmlelement("body")}} 元素。该元素包含期望让用户在访问页面时看到的*全部*内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。
 
@@ -113,41 +115,45 @@ My cat is very grumpy
 <img src="images/firefox-icon.png" alt="My test image" />
 ```
 
-像之前所讲，该元素通过包含图像文件路径的地址属性 `src`，可在所在位置嵌入图像。
+正如之前讲的那样，该元素通过在属性 `src` 中包含图像文件路径的地址，可在所在位置嵌入图像。
 
-该元素还包括一个替换文字属性 `alt`，是图像的描述内容，用于当图像不能被用户看见时显示，不可见的原因可能是：
+该元素还包括一个替换文字属性 `alt`。在 [`alt` 属性](/zh-CN/docs/Web/HTML/Element/img#使用有实际意义的备用描述)中，是图像的描述内容，用于当图像不能被用户看见时显示，不可见的原因可能是：
 
-1. 用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读 `alt` 属性的内容。
+1. 用户有视觉障碍。有严重视觉障碍的用户可以使用屏幕阅读器来朗读 alt 属性的内容。
 2. 有些错误使图像无法显示。可以试着故意将 `src` 属性里的路径改错。保存并刷新页面就可以在图像位置看到：
 
 ![图片内容为文字“测试图片”](alt-text-example.png)
 
-`alt` 属性的关键字即“描述文本”。`alt` 文本应向用户完整地传递图像要表达的意思。用 "测试图片" 来描述 Firefox 标志并不合适，修改成 "Firefox 标志：一只盘旋在地球上的火狐" 就好多了。
+alt 文本的关键字即“描述文本”。alt 文本应向用户完整地传递图像要表达的意思。用“测试图片”来描述 Firefox 标志并不合适，修改成“Firefox 标志：一只盘旋在地球上的火狐”就好多了。
 
-可以试着为图像编写一些更好的 `alt` 文本。
+可以试着为图像编写一些更好的 alt 文本。
 
 > [!NOTE]
-> 更多信息请参阅 [无障碍访问](/zh-CN/docs/learn/Accessibility)。
+> 更多信息请参阅[无障碍学习模块](/zh-CN/docs/learn/Accessibility)。
 
 ## 标记文本
 
-本段包含了一些最常用的文本标记 HTML 元素。
+本小节包含了一些最常用的文本标记 HTML 元素。
 
 ### 标题（Heading）
 
-标题元素可用于指定内容的标题和子标题。就像一本书的书名、每章的大标题、小标题，等。HTML 文档也是一样。HTML 包括六个级别的标题， {{htmlelement("h1")}}–{{htmlelement("h6")}} ，一般最多用到 3-4 级标题。
+标题元素可用于指定内容的标题和子标题。就像一本书的书名、每章的大标题、小标题，等。HTML 文档也是一样。HTML 包括六个级别的标题，{{htmlelement("Heading_Elements", "&lt;h1&gt; - &lt;h6&gt;")}}，一般最多用到 3-4 级标题。
 
 ```html
+<!-- 4 个级别的标题 -->
 <h1>主标题</h1>
 <h2>顶层标题</h2>
 <h3>子标题</h3>
 <h4>次子标题</h4>
 ```
 
+> [!NOTE]
+> 在 HTML 中，`<!--` 和 `-->` 之间的任何内容都是 **HTML 注释**。浏览器在渲染代码时，会忽略掉注释。换句话说，注释在页面上不可见——仅停留在代码中。HTML 注释是你书写与代码有关的注解或逻辑的一种方式。
+
 可以尝试在 {{htmlelement("img")}} 元素上面添加一个合适的标题。
 
 > [!NOTE]
-> 你可以看到第一级标题是有隐式的主题样式。不要使用标题元素来加大、加粗字体，因为标题对于 [无障碍访问](/zh-CN/docs/learn/Accessibility) 和 [搜索引擎优化](/zh-CN/docs/learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#为什么我们需要结构化？) 等问题非常有意义。要保持页面结构清晰，标题整洁，不要发生标题级别跳跃。
+> 你可以看到第一级标题是有隐式的主题样式。不要使用标题元素来加大、加粗文本，因为标题对于[无障碍](/zh-CN/docs/Learn/Accessibility/HTML#文本内容)和[搜索引擎优化](/zh-CN/docs/learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#为什么我们需要结构化？)非常有意义。要保持页面结构清晰，标题整洁，不要发生标题级别跳跃。
 
 ### 段落（Paragraph）
 
@@ -157,7 +163,7 @@ My cat is very grumpy
 <p>这是一个段落</p>
 ```
 
-试着添加一些文本（在 [设计网站的外观](/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like) 小节）到一个或几个段落中，并把它们放在你的 {{htmlelement("img")}} 元素下方。
+试着向一个或几个段落中添加一些文本（[_你的网站会是什么样子？_](/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)文章中有这些文本），并把它们放在你的 {{htmlelement("img")}} 元素下方。
 
 ### 列表（List）
 
@@ -195,7 +201,7 @@ Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标
 
 ## 链接
 
-链接非常重要 — 它们赋予 Web 网络属性。要植入一个链接，我们需要使用一个简单的元素 — {{htmlelement("a")}} — a 是 "anchor" （锚）的缩写。要将一些文本添加到链接中，只需如下几步：
+链接非常重要 — 它们赋予 Web 网络属性。要植入一个链接，我们需要使用一个简单的元素 — {{htmlelement("a")}} — “a”是“anchor”（锚）的缩写。要将一些文本添加到链接中，只需如下几步：
 
 1. 选择一些文本。比如“Mozilla Manifesto”。
 2. 将文本包含在 {{htmlelement("a")}} 元素内，就像这样：
@@ -213,14 +219,14 @@ Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标
 4. 把属性的值设置为所需网址：
 
    ```html
-   <a href="https://www.mozilla.org/zh-CN/about/manifesto/"
-     >Mozilla Manifesto</a
-   >
+   <a href="https://www.mozilla.org/zh-CN/about/manifesto/">
+     Mozilla Manifesto
+   </a>
    ```
 
-如果网址开始部分省略了 `https://` 或者 `http://`，可能会得到错误的结果。在完成一个链接后，可以试着点击它来确保指向正确。
+如果网址开始部分省略了 `https://` 或者 `http://`（称作*协议*），可能会得到错误的结果。在完成一个链接后，可以试着点击它来确保指向正确。
 
-> **备注：** `href` 这个名字可能开始看起来有点令人费解，代表超文本引用（ **h**ypertext **ref**erence）。
+> **备注：** `href` 这个名字可能一开始看起来有点令人费解。如果它很难记忆的话，记住它代表的是超文本引用（_**h**ypertext **ref**erence_）。
 
 现在就为页面添加一个链接吧。
 
@@ -228,10 +234,10 @@ Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标
 
 如果你一直跟着这篇文章里的指导做的话，你应该完成了一个像下面这样的页面（也可以[查看这里](https://mdn.github.io/beginner-html-site/)）：
 
-![](finished-test-page-small.png)
+![一张网页截图，包含：Firefox 标志，写着 Mozilla 很酷的标题以及两个文本段落](finished-test-page-small.png)
 
-如果你遇到困难，你可以将 Github 上的[完整示例代码](https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html)与你的文件进行比较。
+如果你遇到困难，你可以将 Github 上的[完整示例代码](https://github.com/mdn/beginner-html-site/blob/main/index.html)与你的文件进行比较。
 
-在这里，我们只是介绍了一点点 HTML。要学习更多，访问我们的 [HTML 学习主题页面](/zh-CN/docs/Learn/HTML) 。
+在这里，我们只是介绍了一点点 HTML。想学习更多，访问我们的[学习 HTML](/zh-CN/docs/Learn/HTML) 主题。
 
 {{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}