From 40c56cec4a878c904b3235f979d3c7d3073a9bd3 Mon Sep 17 00:00:00 2001 From: PocketZ <45301505+pocketdr@users.noreply.github.com> Date: Fri, 28 Jul 2023 18:13:19 +0800 Subject: [PATCH] fix: sync content --- .../dealing_with_files/index.md | 3 +- .../html_basics/index.md | 14 +++--- .../what_will_your_website_look_like/index.md | 45 ++++++++++++------- 3 files changed, 39 insertions(+), 23 deletions(-) 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 c830daf6cc0286..6e8dcc2202c66a 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 @@ -43,9 +43,10 @@ slug: Learn/Getting_started_with_the_web/Dealing_with_files ```html - + + My test page 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 cb70e07abb027a..99932c2635ce33 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 @@ -82,9 +82,10 @@ My cat is very grumpy ```html - + + My test page @@ -95,12 +96,13 @@ My cat is very grumpy 这里有： -- `` — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，`DOCTYPE` 用来链接一些 HTML 编写守则，比如自动查错之类。`DOCTYPE` 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。 -- `` — {{htmlelement("html")}} 元素。该元素包含整个页面的内容，也称作根元素。 -- `` — {{htmlelement("head")}} 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（{{Glossary("keyword", "keywords")}}）、页面描述、CSS 样式表和字符编码声明等。 -- `` — 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。 +- `` — [文档类型](/zh-CN/docs/Glossary/Doctype)。这是必不可少的开头。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，这个元素用来关联 HTML 编写规范，以供自动查错等功能所用。而在当今，它作用有限，可以说仅用于保证文档正常读取。现在知道这些就足够了。 +- `` — {{htmlelement("html")}} 元素。该元素包含整个页面的所有内容，有时候也称作根元素。里面也包含了 `lang` 属性，写明了页面的主要语种。 +- `` — {{htmlelement("head")}} 元素。所有那些你加到页面中，且*不*向看客展示的页面成员，都以这个元素为容器。其中包含诸如提供给搜索引擎的{{Glossary("keyword", "关键字")}}和页面描述、用作风格化页面的 CSS、字符集声明等等。 +- `` — 该元素指明你的文档使用 UTF-8 字符编码，UTF-8 包括世界绝大多数书写语言的字符。它基本上可以处理任何文本内容。以它为编码还可以避免以后出现某些问题，没有理由再选用其他编码。 +- `` — [视口元素](/zh-CN/docs/Web/CSS/Viewport_concepts#mobile_viewports)可以确保页面以视口宽度进行渲染，避免移动端浏览器上因页面过宽导致缩放。 - `` — {{htmlelement("title")}} 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。 -- `` — {{htmlelement("body")}} 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。 +- `` — {{htmlelement("body")}} 元素。该元素包含期望让用户在访问页面时看到的*全部*内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。 ## 图像 diff --git a/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md index ada10639b7a50e..c6a26e7ebb2405 100644 --- a/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md +++ b/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md @@ -5,25 +5,25 @@ 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 技术建立数字模拟图。 > @@ -31,7 +31,7 @@ _设计网站外观？_ 在为网站编写代码之前必须进行规划和设 ## 选定内容 -此时可以开始组织网页上的内容了。 +此时，就可以开始组织网页上的内容了。 ### 文本 @@ -41,27 +41,40 @@ _设计网站外观？_ 在为网站编写代码之前必须进行规划和设 使用[色彩选择器](/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. 下载字体文件到你的系统内，自行挂载这个文件，并在你网站的代码中使用。 + +> **备注：**在你的网站使用从 Google 服务器加载的字体可能会违反欧盟的数据隐私规定 [GDPR](https://gdpr.eu/what-is-gdpr/) ，因为加载字体时会暴露用户的 IP 地址。如果你遇到这种潜在风险，需要选择第二种方式。 + +另一个选择是使用 [安全 Web 字体](https://web.mit.edu/jmorzins/www/fonts.html)，如 Arial、Times New Roman、Courier New。 -1. 访问 [Google Fonts](https://www.google.com/fonts) 选择一种喜欢的字体。 -2. 将谷歌给你的代码行复制至文本编辑器中，以保存备用。 -3. 关于使用谷歌字体的更多细节，请参见[本页面](https://developers.google.com/fonts/docs/getting_started) +> **备注：**（译注） +> * 同上所述，你可能无法访问 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")}}