mdn · jasonren0403 · Jul 30, 2023 · Jul 28, 2023 · Jul 28, 2023 · Jul 28, 2023
@@ -43,9 +43,10 @@ slug: Learn/Getting_started_with_the_web/Dealing_with_files
 
    ```html
    <!doctype html>
-   <html>
+   <html lang="en-US">
      <head>
        <meta charset="utf-8" />
+       <meta name="viewport" content="width=device-width" />
        <title>My test page</title>
      </head>
      <body>

@@ -82,9 +82,10 @@ My cat is very grumpy
 
 ```html
 <!doctype html>
-<html>
+<html lang="en-US">
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
     <title>My test page</title>
   </head>
   <body>
@@ -95,12 +96,13 @@ My cat is very grumpy
 
 这里有：
 
-- `<!DOCTYPE html>` — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，`DOCTYPE` 用来链接一些 HTML 编写守则，比如自动查错之类。`DOCTYPE` 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。
-- `<html></html>` — {{htmlelement("html")}} 元素。该元素包含整个页面的内容，也称作根元素。
-- `<head></head>` — {{htmlelement("head")}} 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（{{Glossary("keyword", "keywords")}}）、页面描述、CSS 样式表和字符编码声明等。
-- `<meta charset="utf-8">` — 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
+- `<!DOCTYPE html>` — [文档类型](/zh-CN/docs/Glossary/Doctype)。这是必不可少的开头。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，这个元素用来关联 HTML 编写规范，以供自动查错等功能所用。而在当今，它作用有限，可以说仅用于保证文档正常读取。现在知道这些就足够了。
+- `<html></html>` — {{htmlelement("html")}} 元素。该元素包含整个页面的所有内容，有时候也称作根元素。里面也包含了 `lang` 属性，写明了页面的主要语种。
+- `<head></head>` — {{htmlelement("head")}} 元素。所有那些你加到页面中，且*不*向看客展示的页面成员，都以这个元素为容器。其中包含诸如提供给搜索引擎的{{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#mobile_viewports)可以确保页面以视口宽度进行渲染，避免移动端浏览器上因页面过宽导致缩放。
 - `<title></title>` — {{htmlelement("title")}} 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
-- `<body></body>` — {{htmlelement("body")}} 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。
+- `<body></body>` — {{htmlelement("body")}} 元素。该元素包含期望让用户在访问页面时看到的*全部*内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。
 
 ## 图像
 

@@ -5,33 +5,33 @@ slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
 
 {{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
 
-_设计网站外观？_ 在为网站编写代码之前必须进行规划和设计工作，包括“网站提供什么信息？”、“想要什么字体和颜色？”、“网站是做什么的？”
+*你的网站会是什么样子？*在编写网站代码之前，需要先进行规划和设计工作，包括“网站提供哪些信息？”、“用哪些字体和颜色？”、“网站是做什么的？”等。
 
 ## 第一步：计划
 
-在做任何事情之前都需要一些想法。网站要达到哪种目的？一个网站基本上可以做任何事情，但对于第一次尝试，应该保持简单。我们将从创建一个包含一个标题、一张图片和几个段落的简单网页开始。
+做任何事情之前，都要先有一些想法。你的网站到底是做什么的？一个网站基本上可以做任何事情，但对于第一个网站来说，最好简单一些。我们将从创建一个简单网页开始，它包含一个标题、一张图片和几个段落。
 
 首先，请考虑以下问题：
 
 1. **网站的主题是什么？** 你喜欢狗、上海、还是吃豆人？
-2. **基于所选主题要展示哪些信息？** 写下标题和几段文字，构思一个用于展示的图像。
+2. **基于所选主题要展示哪些信息？** 写下标题和几段文字，再找个你想在网站上展示的图像。
 3. **网站采用怎样的外观？** 用高阶术语来说，背景颜色是什么？使用哪种字体比较合适：正式的、卡通的、粗体、瘦体？
 
-> **备注：** 复杂项目需要更详细的指引，深入到颜色、字体、页面上项目之间的间距、适当的书写风格等所有细节。这有时被称为设计指南、设计系统或品牌手册，参见：[Firefox Photon Design System](https://design.firefox.com/photon/)。
+> **备注：** 复杂的网站需要更详细的指引，深入到颜色、字体、页面上元素的间距、适当的书写风格等等以及其他细节。这有时被称为设计指南、设计系统或品牌手册，参见：[Firefox Photon Design System](https://design.firefox.com/photon/)。
 
 ## 绘制草图
 
-接下来，拿起笔和纸，大致勾勒出你所希望的网站样子。虽然第一个简单的网页没有太多的草图，但你现在应该养成这样做的习惯。画草图很有用——并且不需要梵高的手法！
+接下来，拿起笔和纸，大致勾勒出你所希望的网站样子。当然，这个简单的网页不需要太复杂的草图，但你现在应该养成这样做的习惯。画草图很有用——并且不需要梵高的手法！
 
-![](website-drawing-scan.png)
+![画在纸上的一个粗略的网站草图](website-drawing-scan.png)
 
 > **备注：** 即使在实际的复杂网站中，设计团队通常也是从粗略的草图开始设计的，再使用图形编辑器或 Web 技术建立数字模拟图。
 >
 > Web 团队通常包括一个平面设计师和一个{{Glossary("UX", "用户体验")}} (UX) 设计师。平面设计师把网站的视觉效果放在一起。用户体验设计师则以一种更抽象的模式来解决用户如何体验及与网站交互方面的问题。
 
 ## 选定内容
 
-此时可以开始组织网页上的内容了。
+此时，就可以开始组织网页上的内容了。
 
 ### 文本
 
@@ -41,27 +41,41 @@ _设计网站外观？_ 在为网站编写代码之前必须进行规划和设
 
 使用[色彩选择器](/zh-CN/docs/Web/CSS/CSS_colors/Color_picker_tool)挑选心仪的颜色。当选中某种颜色时，会显示一个六位神秘代码，类似于`#660066`。它是一个*十六进制数*，用于表示颜色。将其复制并暂存。
 
-![](color-picker.png)
+![MDN 网站上的颜色选择器，包含 RGB、HSL、HEX 格式](color-picker.png)
 
 ### 图像
 
 访问 [Google 图像搜索](https://www.google.com/imghp?gws_rd=ssl) 来搜索合适的图片。
 
 1. 当找到你想要的图像时，点击该图像以获得其放大的视图。
-2. 右键单击图像（Mac 上为 Ctrl + 单击），选择*将图像另存为...*，并选择一个安全的地方来保存你的图像。或者，从浏览器地址栏中复制图片的网址，以便以后使用。
+2. 右键单击图像（Mac 上为 Ctrl + 单击），选择*将图像另存为...*，并选择一个可靠的位置来保存你的图像。或者，从浏览器地址栏中复制图片的网址，以便以后使用。
 
-![](updated-google-images.png)
+![Google 图像搜索中的搜索结果](updated-google-images.png)
 
-请注意，网络上的大多数图片，包括谷歌图片中的图片，都是有版权的。为了减少侵权的可能性，可以使用谷歌的许可证过滤器。点击*工具*按钮，然后点击下面出现的*使用权限*选项。你应该选择*知识共享许可*这个选项。
+请注意，网络上的大多数图片，包括谷歌图像中的图片，都是有版权的。为了减少侵权的可能性，可以使用谷歌的许可证过滤器。点击*工具*按钮，然后点击下面出现的*使用权限*选项。你应该选择*知识共享许可*这个选项。
 
-![](updated-google-images-licensing.png)
+![经知识共享许可过滤后的 Google 图像搜索结果](updated-google-images-licensing.png)
+
+> **备注：**（译注）因为某些原因，你可能无法访问 Google，可以改为使用[百度图片搜索](https://image.baidu.com/)或[搜狗图片搜索](https://pic.sogou.com/)，并且同样需要注意图片的版权问题。
 
 ### 字体
 
-要选择一种字体：
+和图片一样，很多字体都受版权保护，也就是说，你不可以在你的网站上随意使用它们。[Google Fonts](https://developers.google.com/fonts)是 Google 旗下的网络服务，提供了许多字体许可。
+
+选好字体后，你有两种方式使用它：
+
+1. 在你的代码中添加一个引用，从 Google 服务器加载这个字体。
+2. 下载字体文件到你的系统内，自行挂载这个文件，并在你网站的代码中使用。
 
-1. 访问 [Google Fonts](https://www.google.com/fonts) 选择一种喜欢的字体。
-2. 将谷歌给你的代码行复制至文本编辑器中，以保存备用。
-3. 关于使用谷歌字体的更多细节，请参见[本页面](https://developers.google.com/fonts/docs/getting_started)
+> **备注：**在你的网站使用从 Google 服务器加载的字体可能会违反欧盟的数据隐私规定 [GDPR](https://gdpr.eu/what-is-gdpr/) ，因为加载字体时会暴露用户的 IP 地址。如果你遇到这种潜在风险，需要选择第二种方式。
+
+另一个选择是使用 [安全 Web 字体](https://web.mit.edu/jmorzins/www/fonts.html)，如 Arial、Times New Roman、Courier New。
+
+> **备注：**（译注）
+>
+> - 同上所述，你可能无法访问 Google Fonts，你可以选择其他可用的在线字体服务，或采用第二种方式，下载后再使用你选择的字体。
+> - 相比英语，汉语的“安全字体”是不太一样的复杂问题，可以认为黑体、宋体是相对“安全”的一类字体，但仍需要精确到具体的字族，下面是一些参考链接
+>   - [如何保证网页的字体在各平台都尽量显示为最高质量的黑体？](https://www.zhihu.com/question/19911793)
+>   - [常用 Web 安全字体显示测试](https://feeshy.github.io/tech/web_safe_fonts.html)
 
 {{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}