recursal/MDN huggingface dataset:
构建网页内容
======

* 上一页
* Overview: Introduction to HTML

构建页面内容是一项重要技能，页面构建清晰才能顺利交付进行 CSS 布局。本测验将测试你是否能构思出页面的最终外观，以及是否会选用适当的结构语义。

|  |  |
| --- | --- |
| 前提： | 
 完成本章之前的全部课程，特别是
 文档和站点结构。
  |
| 学习目标： | 测验网页结构知识和用标记呈现预期布局设计的方法。 |

起点
--

开始测验前，请先下载 assets.zip。其中包含：

* 需要补充结构标记的 HTML 文件。
* 给标记添加样式的 CSS 文件。
* 页面中使用的图片。

可在电脑上创建示例，也可以用 JSBin 或 Glitch 等网站来完成测验。

项目简介
----

本项目的任务是为“观鸟网”的主页添加结构化的元素，使其可以进行布局设计。需要添加的有：

* 页眉（`<header>`），应充满页面宽度，并包含网站主标题、网站 logo 和导航栏菜单。样式生效后标题和 logo 应显示在在两边，导航栏在它们下方。
* 主内容区域（`<main>`），应有两栏，其中主区域显示欢迎信息，侧边栏包含一些缩略图。
* 页脚（`<footer>`），包含版权信息和鸣谢。

你应该为以下内容添加合适的标签：

* 页眉
* 导航菜单
* 主要内容
* 欢迎语
* 图片侧边栏
* 页脚

还应：

* 添加一个 `<link>` 元素把现成的 CSS 文件引入页面。
提示
--

* 可用 W3C HTML 验证器 来验证 HTML；验证通过有额外加分。(有两行包含“googleapis”的 `<link>` 元素用于从 Google Fonts 服务引入自定义字体到页面；它们不会被验证，所以不用担心。)
* 本测验不需要任何 CSS 知识；只需用 HTML 元素添加现成的 CSS 即可。
* 现成的 CSS 已经设计好布局，使用正确的结构元素，页面就会渲染成绿色。
* 如果你遇到困难不知道应该把添加元素到哪里，通常一个好的做法是：画一个简单的页面布局模块图，然后为每个块记录下恰当的元素。
示例
--

以下截图展示了添加标记后主页可能的外观：（可 在线查看）

![测试示例。一个简单的“观鸟网”主页，由页眉、页脚、欢迎信息、收藏照片等部分组成。](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content/example-page.png)

测验
--

如果你是在课堂上进行这个测验，你可以把作品交给导师或教授去打分了。如果你是在自学，也可以在 本节测验的讨论页 或者 Mozilla 聊天室 的 #mdn 频道取得帮助。要自己先尝试，作弊是不会有收获的！

* 上一页
* Overview: Introduction to HTML
标记信件
====

* 上一页
* Overview: Introduction to HTML
* 下一页

写信是每个人的必备技能，它也是测验文本格式化技能的一个不错的办法呀！本次测验要求你为你一封写好的信做出标记，以测验你基础和高级的 HTML 文本格式化技能，包括超链接等等。此外将测验你对一些 HTML `<head>` 内容的熟悉程度。

|  |  |
| --- | --- |
| 前提： | 阅读并掌握以下文章的内容：开始学习 HTML、“头”里有什么？HTML 元信息、HTML 文字处理初步、创建超链接和高级文字格式。 |
| 学习目标： | 测验对 HTML 文本格式和超链接基本和高级用法、HTML `<head>` 内容的理解程度。 |

起点
--

开始测验之前，请先下载信件的原始文本和 CSS 代码。然后用文本编辑器（用 CodePen、jsFiddle 或 Glitch 等在线编辑工具亦可）创建一个新的 `.html` 文件来进行测验。

**备注：** 如果你遇到了困难，请联系我们以寻求帮助——见本页面底部的评估或进一步帮助。

项目概要
----

本项目中，你的任务为对一封大学内网信件进行标记，这封信是研究人员对一名学生有关申请博士学位问题的回复。

### 块/结构语义

* 你应该使用适当的结构来构造整体文档，包括 doctype、`<html>`、`<head>` 和 `<body>` 元素。
* 除下面提到的几点之外，这封信应该被标记成有着段落和标题的结构。这封信有 1 个顶级标题（“Re:”那行）和 3 个二级标题。
* 使用适当类型的列表标记该学期的开学时间（the semester start dates）、学习科目（study subjects）和异域舞蹈（exotic dances）。
* 两个地址应该放在 `<address>` 元素下。每行的地址应该放在新的一行而不是新的段落。
### 内联语义

* 应着重显示发信人和收信人的姓名（以及“电话”（*Tel*）和“电子邮件”（*Email*）字样）。
* 用适当的元素把文档中的四个日期标记成机器可读的日期。
* 为信中第一个地址和第一个日期设置一个类属性“*sender-column*”，这样就能通过添加 CSS 来使它们右对齐，以符合经典信件的布局。
* 信件正文中有 5 个首字母缩略词/缩写词（PhD、HTML、CSS、BC、Esq），给出这些词语的英文全称。
* 正确标注 6 个下标/上标（位于化学方程式、科学计数法中）。
* 试着标记至少对两个单词进行着重（`<strong>`）/ 强调（`<em>`）显示。
* 有两个地方应加上超链接，要为它们添加适当的标题。链接指向 `https://example.com/` 即可。
* 用适当的元素标记校训和引文。
### 文档的头部

* 用适当的元标签把文档的字符集声明为 utf-8。
* 用适当的元标签说明信件的作者。
* 用适当的标签引入我们提供的 CSS 代码。
提示和技巧
-----

* 使用 W3C HTML 验证器来验证 HTML，验证通过有额外加分。
* 完成这个测验不需要任何 CSS 知识，只需把现成的 CSS 放到 HTML 元素里就好。
示例
--

以下截图展示了这封信标记完成后可能的外观。

![Example](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter/letter-update.png)

评估或进一步帮助
--------

如果你希望对自己的工作成果进行打分评估，或者遇到了困难并希望寻求帮助：

1. 将你完成的内容放到在线、可分享的编辑器，如：CodePen、jsFiddle 或 Glitch。
2. 在 MDN Discourse forum Learning category 中发贴寻求打分评估或帮助。你的贴子需要包含：
    * 一个描述的标题，如：“Assessment wanted for Marking up a letter”。
    * 你尝试的详细过程，以及你希望我们能够做什么，例如：你遇到了困难，想要寻求帮助；或希望得到打分评估。
    * 一个指向用于打分评估或寻求帮助的示例代码的链接（使用上文中提到的任意一种在线的、可分享的编辑器）。这是一种很好的形式——如果别人没法看到你的代码，他们很难对你提供代码上的帮助。
    * 一个指向实际任务或评估页面的链接，以便我们找到你需要得到帮助的问题。
* 上一页
* Overview: Introduction to HTML
* 下一页
作业：构建行星数据
=========

* 上一页
* Overview: Tables

在我们的表格评定中，我们为你提供有关太阳系中行星的一些数据，并让你将其结构化成 HTML 表。

|  |  |
| --- | --- |
| 前提： | 在尝试这个评定之前，你应该已经把这个模块的所有文章都学习完成了。 |
| 目标： | 检测对 HTML 表格及相关功能的理解。 |

起点
--

要进行本测验，将 blank-template.html, minimal-table.css 和 planets-data.txt 拷贝到本地。

**备注：** 另外，你可以使用 JSBin 或 Glitch 来做你的测验。你可以把 HTML, CSS 和 JavaScript 粘贴到其中一个网上编辑器里。如果你使用的网上编辑器不支持 JavaScript/CSS 文件链接到 HTML 中使用，那么也可以使用 `<script>`/`<style>` 元素将它们直接写在你的 HTML 页面里。

项目概要
----

你在学校工作; 目前，你的学生正在学习太阳系的行星，然后你想为他们提供一份简单的易于追踪的数据集合，来查找有关行星的数字和情况。一张 HTML 数据表将是理想的，你需要先获得可用的数据，然后把它变成一张表格，跟着下面的步骤。

完成后的表格看上去应该是这样的：

![](/zh-CN/docs/Learn/HTML/Tables/Structuring_planet_data/assessment-table.png)

你也可以 在线查看 (不要偷看源代码，不要作弊哦 !)

要完成的步骤
------

下面的步骤描述了：为了完成这个示例的表格，你所要做的事情。所有你需要的数据都包含在`planets-data.txt` 文件中。如果你在获得这些数据时遇到了问题，也看看上面的实例，或者尝试绘制一个图。

1. 打开在你本地环境中的 `blank-template.html`副本，提供一个外部容器来初始化表格，一个表格 header，一个表格 body。在这个例子中，你不需要表格 footer。
2. 为你的表格添加我们提供的标题。
3. 在表格的 header 中添加一行，用来包括所有列的标题。
4. 在表格的 body 部分创建所有内容行，记住要让所有是行标题的单元格语义化。
5. 确保所有内容都插入了正确的单元格，在原始数据中，每行行星数据都显示在其相关行星的旁边。
6. 添加一些属性，让行标题和列标题更加明确地与和它们有关的单元格进行关联，使用 rowgroups 让子标题和父标题也进行关联。
7. 为包含所有行星标题的行标题的那一列数据，添加一个黑色边框
要点和提示
-----

* 标题行的第一个单元格需要是空白的，然后宽度为 2 个单元格。
* 行的主标题 (e.g. *Jovian planets*) 以及放置在行星名称行左侧的标题 (e.g. *Saturn*) 整理出来有点麻烦， — 你需要确保每个单元格都有正确的高度和宽度。(即横跨正确的行数和列数)
* 将标题与其行/列相关联的一种方法比其他方法容易得多。
评定
--

如果你将此评估作为有组织的课程的一部分，你应该能够将你的工作交给你的老师/导师进行评改。如果你是自学习的，那么你可以通过询问 Learning Area Discourse thread, 或在 #mdn的 IRC 频道 Mozilla IRC 中轻松获得标记指南。首先尝试练习 - 作弊对你没有益处！

* 上一页
* Overview: Tables
Add a hit map on top of an image
================================

现在我们将学习如何设置图像映射，先讨论他的缺点。

|  |  |
| --- | --- |
| 前提： | 
 你应该已经知道如何create a basic HTML document
 以及add accessible images to a webpage. |
| 目标： | 学习如何将一张图片的不同区域链接到不同页面。 |

**警告：** 本文仅讨论客户端图像映射。不要使用服务器端图像映射，这需要用户拥有鼠标。

图像映射和它的缺点
---------

当你在`<a>`标签中嵌套图像，整个图像是链接到一个网页的。但在图像映射中，包含多个活动区域（称为“热点”），可以链接到不同的资源地址。

图像映射原本非常流行于导航策略，但是前提需要考虑它的性能和无障碍。

Text links (perhaps styled with CSS) 比图像映射更具优势：文本链接更轻量级、好维护、更易于 SEO，而且支持更多形式需求的访问（如，屏幕阅读器、纯文本浏览器、翻译服务等）。

如何正确的插入一张图像映射
-------------

### 步骤 1: 图片

不是所有图片都合适。

* 图片必须明确表明当用户跟随图片链接时会发生什么。`alt` 属性是必须的，但很多人注意不到。
* 图片必须明确指出热点的开始和结束位置。
* 在任何尺寸的视口下，热点都需要足够大，方便用户可以点击。多大足够呢？72 × 72 CSS pixels 是一个推荐的最小尺寸， 包括触摸目标之间额外的间隙。在 50languages.com (as of time of writing) 上的世界地图可以完美诠释这一点。用户点击 Russia 或 North America 要比 Albania 或 Estonia 容易得多。

插入图片的方式 和通常一样 (用 `<img>` 标签 和 `alt` 文本). 如果图片只是用作导航容器，你可以设置图片的 `alt=""`，改在后面 `<area>` 的 `alt` 中提供合适的文本。

你将需要一个特殊的 `usemap` 属性。为图像映射提供一个唯一标识，这个标识不能包含空格。将这个标识 (preceded by a hash) 作为 `usemap` 属性的值：


```html
<img src="image-map.png" alt="" usemap="#example-map-1" />
```

### 步骤 2: 激活你的热点

在这一步中，将所有代码放置 `<map>` 标签中。`<map>` 只需要一个属性，设置 `name` 和上面 `usemap` 属性一样的 map 值：


```html
<map name="example-map-1"> </map>
```


`在<map>` 元素中，我们需要嵌套 `<area>` 元素。一个 `<area>` 元素对应一个热点.。为保持键盘导航的直观，请确保`<area>` 的源顺序和视觉上的热点顺序一致。

`<area>` 元素是空元素，但是需要包含 4 个属性：

`shape` `coords`

`shape` 有 4 个值：`circle`, `rect`, `poly`, and `default`. ( `default` `<area>` 表示除去你定义的其他热点的剩余空间.) 根据你选择的形状需要在 `coords` 中提供对应的坐标信息。

* 对于 circle, 提供中心的 x、y 坐标，还需要提供半径。
* 对于 rectangle, 提供左上角和右下角的 x、y 坐标。
* 对于 polygon, 提供每个角的 x、y 坐标（至少 6 个值）。

坐标用 CSS 像素 px 表示。

In case of overlap, source order carries the day.

`href`

你需要链接的资源地址。如果你不希望当前区域链接到任何地方 (比方说，如果你正在创建一个空心圆)，你可以将这个属性保留为空。

`alt`

一个必选属性，告诉用户链接的指向或功能说明。`alt` 文本仅在图像不可用时显示。请参阅我们的guidelines for writing accessible link text。如果 `href` 属性为空并且整个图像已经具备了 `alt` 属性，则可以设置 `alt=""`。


```html
<map name="example-map-1">
  <area
 shape="circle"
 coords="200,250,25"
 href="page-2.html"
 alt="circle example" />

  <area
 shape="rect"
 coords="10, 5, 20, 15"
 href="page-3.html"
 alt="rectangle example" />
</map>
```

### 步骤 3: 确保它的可用范围

你还并没有完成除非你很严格的在多个浏览器和终端测试图像映射功能。尝试仅用键盘操作。尝试关掉图片。

如果你的图像映射宽度大于 240px，你将需要进一步调整来适应网站的响应式。仅调整小屏幕下的图片是不够的，因为不变的坐标无法适应这样的图像。

如果必须使用图像映射，你可以看看Matt Stow's jQuery plugin.。另外，Dudley Storey 示范了一种方法 use SVG for an image map effect，以及后来的ombined SVG-raster hack for bitmap images.

Learn more
----------

* `<img>`
* `<map>`
* `<area>`
* Online image map editor
* Advice on handling email clients
使用数据属性
======

HTML 是具有扩展性的设计，它初衷是数据应与特定的元素相关联，但不需要任何定义。data-\* 属性允许我们在标准、语义化的 HTML 元素中存储额外的信息，而不需要使用类似于非标准属性或者 DOM 额外属性之类的技巧。

HTML 语法
-------

语法非常简单。所有在元素上以`data-`开头的属性为数据属性。比如说你有一篇文章，而你又想要存储一些不需要显示在浏览器上的额外信息。请使用 data 属性：


```html
<article
 id="electriccars"
 data-columns="3"
 data-index-number="12314"
 data-parent="cars">
  ...
</article>
```

JavaScript 访问
-------------

在外部使用JavaScript去访问这些属性的值同样非常简单。你可以使用`getAttribute()`配合它们完整的 HTML 名称去读取它们，但标准定义了一个更简单的方法：`DOMStringMap`你可以使用`dataset`读取到数据。

为了使用`dataset`对象去获取到数据属性，需要获取属性名中`data-`之后的部分 (要注意的是破折号连接的名称需要改写为骆驼拼写法 (如"index-number"转换为"indexNumber"))。


```js
var article = document.querySelector("#electriccars");

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
```


每一个属性都是一个可读写的字符串。在上面的例子中，`article.dataset.columns = 5`.将会调整属性的值为 5。

CSS 访问
------

注意，data 设定为 HTML 属性，他们同样能被CSS访问。比如你可以通过generated content使用函数`attr()`来显示 data-parent 的内容：


```css
article::before {
  content: attr(data-parent);
}
```


你也同样可以在 CSS 中使用属性选择器根据 data 来改变样式：


```css
article[data-columns="3"] {
  width: 400px;
}
article[data-columns="4"] {
  width: 600px;
}
```


你可以在这个JSBin 里看到全部演示。

Data 属性同样可以存储不断变化的信息，比如游戏的得分。使用 CSS 选择器与 JavaScript 去访问可以让你得到花俏的效果，这里你并不需要用常规的编写方案来编写代码。有关使用生成内容和 CSS 转换（JSBin 示例）的示例，请参阅此视频。

数据值是字符串。必须在选择器中引用数值才能使样式生效。

Issues
------

不要在 data attribute 里储存需要显示及访问的内容，因为一些其他的技术可能访问不到它们。另外爬虫不能将 data attribute 的值编入索引中。

IE 的支持度及显示效果是最主要讨论的问题。IE11+ 支持这个标准，但所有更早期的版本都不支持 dataset。为了支持 IE10 及以下的版本，你必须使用 `getAttribute()` 来访问。另外，读取 data-attributes 的行为相比 JS 存储数据会慢。使用 dataset 会比使用 getAttribute() 读取数据来得慢。

尽管如此，对于那些与元素相关的数据，这依然是一个很好的解决方案。

在 FireFox 49.0.2(其他版本也有可能) 中，javascript 将无法读出包含 1022 个及以上字符的 data 属性 (EcmaScript 4).

参见
--

* 该文章源自 Using data attributes in JavaScript and CSS on hacks.mozilla.org.
* 在 SVG 2 中也同样支持自定义 data 属性; 请参看`SVGElement.dataset` 和`data-\* (en-US)`.
* How to use HTML5 data attributes (Sitepoint)
理解客户端 web 开发工具
==============

客户端工具可能让人望而生畏，不过这个系列的文章主要目的在于展示一些最常见的客户端工具的用途，阐明可以被你链接使用的工具，如何使用包管理器安装这些工具，以及如何使用命令行操控它们。我们将以一个完整的工具链示例收尾，示例会向你展示如何变得更具生产力。

**现在就从我们的“客户端工具概览”开始吧**

前提
--

在尝试使用这里列举的工具之前，你应该先好好学习一下 HTML, CSS, 和 JavaScript 的核心基础知识。

### 渴望成为一名前端开发人员？

我们已经把你实现目标所需要的所有必要信息都放在了一个课程里面。

开始

指南
--

1. 客户端工具概览

在这篇文章中，我们会简要介绍现代 web 工具：在 web 应用开发的生命周期中的何时使用何种工具，以及如何寻求帮助。

2. 命令行速成课程

毫无疑问，在开发过程中，你需要在终端（或者在“命令行”，它们其实是同一个东西）中运行一些命令。这篇文章将会提供对终端的介绍，包括一些你需要输入的基本命令，如何将命令链接在一起，以及何如添加你自己的命令行（CLI）工具。

3. 包管理基础

在这篇文章中，我们将会详细看一看包管理器，从而理解如何在我们自己的工程中使用它们——安装工程工具依赖、更新等等。

4. 一个完整的工具链

在这个系列的最后几篇文章中，我们将会带你构建一个工具链样例，从而帮你巩固前面学到的知识。我们将从设立一个实际的开发环境开始，一路在 Netlify 上相应的位置放置发布你的应用所需要的转换工具。在这篇文章里，我们将介绍一个设立我们的开发环境以及代码转换工具的例子。

5. 发布你的应用 (en-US)

在我们系列的最后一篇文章中，我们将会使用我们在前篇文章中构建的示例工具链，以便我们能够发布我们的样例应用。我们将代码推到 Github，使用 Netlify 进行发布，甚至还会向你展示如何在这个过程中加入一个简单的测试。
跨浏览器测试
======

本模块的重点是在不同的浏览器上测试 web 项目。我们研究确定你的目标受众（例如，你最需要担心哪些用户、浏览器和设备），如何去做测试，不同类型的代码中会面临的主要问题以及如何缓解这些问题，哪些工具在帮助你测试和解决问题方面最有用，以及如何使用自动化来加速测试。

#### 想成为一名前端网页开发者？

我们整理了一个课程，其中包含实现目标所需的所有基本内容。

**开始使用**

前提
--

在你尝试使用这里详细介绍的工具时，你需要已经学习核心 HTML、CSS 和 JavaScript 语言。

指南
--

跨浏览器测试简介

本文通过提供跨浏览器测试主题的概述，回答诸如“什么是跨浏览器测试？”、“将遇到的最常见类型的问题是什么？”和“什么是测试，识别和解决问题的主要方法？”等问题。

测试策略

接下来，我们深入了解测试，寻找目标受众（例如：你需要确定测试的浏览器，设备和其他部分），低成本测试策略（必要时对各种设备和一些虚拟机进行 adhoc 测试），更高科技策略（自动化，使用专用测试 app）和用户组测试。

处理常见的 HTML 和 CSS 问题

现在，我们着重考虑你在 HTML 和 CSS 代码中可能遇到的一些常见的跨浏览器问题，以及哪些工具可以用来防止问题发生和解决问题。这包括代码检查，处理 CSS 前缀，使用浏览器开发工具找出问题，使用 polyfill 添加浏览器支持，解决响应式问题等。

处理常见的 JavaScript 问题

现在我们来看看常见的跨浏览器 JavaScript 问题，以及怎么解决它们。这会包括使用浏览器开发工具跟踪和解决问题的信息，使用 polyfill 和库来解决问题，让现代的 JavaScript 特性在老浏览器中工作等等。

处理常见的无障碍问题

然后，我们把注意力转向无障碍上，提供常见问题的信息，怎么做简单的测试，和怎么使用审计/自动化工具找到无障碍问题。

实现特性检查

特性检查包括确定浏览器是否支持确定的代码块，据此运行不同的代码，让浏览器能一直正常工作，而不是在一些浏览器上崩溃/报错。本文详细介绍了如何编写简单的特性检查代码，怎么使用库来加速实现，利用一些像 `@supports` 的原生特性来进行特性检查。

自动测试简介

每天多次在几个浏览器和设备上手动运行可能会枯燥，浪费时间。有效处理这个问题，你需要熟悉自动化工具。在本文中，我们介绍可用的方法，怎么使用任务运行程序，以及学习如何使用商业浏览器自动化测试工具（如 Sauce Labs 和 Browser Stack）。

建立你自己的自动化测试环境

在本文中，我们会教你怎么安装你自己的自动化环境，并使用 Selenium / WebDriver 和测试库（如 selenium-webdriver for Node）运行自己的测试。我们还将介绍如何将本地测试环境与商业应用程序集成在一起，正如上一篇文章所讨论的。
Git 和 GitHub
============

所有开发者都将使用到**版本控制系统**（**V**ersion **C**ontrol **S**ystem，简称 **VCS**），这种工具让他们在分工合作时避免了不必要的重复与冲突，如果遇到什么问题，也可以及时回退到之前的版本。当今最流行的**版本控制系统**（至少在网络开发者中是这样的）是 **Git**，和与之关联的编程社区网站 **GitHub**。这篇短文将带你简单地了解他们。

主要介绍
----

版本控制系统在软件开发过程中是必不可少的：

* 我们很少独自完成一个项目，而在分工合作的同时我们都会有与他人的工作相冲突的风险：尤其是当两个人同时尝试修改同一段代码的时候。所以我们需要有相应的机制用以避免这种情况。
* 在开发一个项目的时候，我们希望能将代码及时保存，这样就可以避免像电脑突然崩溃辛苦全部白费这样的尴尬局面。
* 如果后期发现了问题，我们可能还会需要退回更早的版本。有的小朋友也许想到可以通过创建一堆 `myCode.js`、`myCode_v2.js`、`myCode_v3.js`、`myCode_final.js`、`myCode_really_really_final.js` 之类的文件用于保存历史版本，但这个方法不妥，容易出错。
* 不同的团队成员也会需要创建他们自己的独特的版本（在 Git 中叫做**分支**（branch）），他们在这里添加一些新的功能特性，然后通过一些可控的方法（在 GitHub 中我们使用**拉取请求**（pull request））将它们贡献到原来的主干项目中。

版本控制系统提供了能够满足以上需求的工具。Git 是版本控制系统的典范，而 GitHub 是一个为个人或团队操作 Git 仓库（repository）提供了 Git 服务器和一系列非常实用的工具的网站 + 基础设施。它提供了报告代码错误、检查工具以及分配任务和任务状态等项目管理工具等等。

**备注：** Git 实际上是一个分散式的版本控制系统，这意味你和其他所有人的电脑上都可以有一个这个复制了这个项目所有源代码的储存库的副本。你在自己的副本上进行了修改，然后提交给服务器，在那里将由这个项目的管理者来决定是否将你的修改添加到主本中。

事先准备
----

为了使用 Git 和 GitHub，你首先需要：

* 安装了 Git 的台式电脑（详见 Git 下载网址）。
* 用于使用 Git 的工具。你可以使用一个 Git 图形操作界面客户端（我们推荐 GitHub Desktop、SourceTree 或者 Git Kraken）或者也可以直接使用命令行，这取决于你的喜好。事实上，尽管你打算使用图形界面进行操作，了解一些基本的 Git 命令行指令也或许会比较有用。
* GitHub 账户。如果还没有的话，现在就通过这个链接去注册一个吧！

在此之前你并不一定要有关于网络开发、Git 和 GitHub 或者版本控制系统的任何知识。但是最好还是能有一点基础的计算机使用技能并且懂一点编程，以及有一些可以存放进储存库的代码。

建议你最好还能够有一些基础的命令行终端的知识，例如：切换目录、新建文件以及修改系统路径（`PATH`）。

**备注：** Github 并不是使用 Git 的唯一途径。还有很多像 GitLab 这样的选择值得你去尝试。你也可以尝试着去构建你自己的 Git 服务器来代替 Github 的功能。在这里我们只是将 Github 作为一种可行的途径进行介绍。

指南
--

先提醒一下这些链接将会带你去访问一些外部资源。我们最终将致力于开发我们专属的 Git 和 GitHub 教程，但现在，这些资料将会带你轻松入门。

Hello World（来自 GitHub）

这里是开始使用 GitHub 的正大门，在这里你可以学到 Git 的基础操作，例如：创建**仓库**和**分支** 、**创建提交**以及打开和合并**拉取请求**。

Git 使用手册（来自 GitHub）

这个 Git 使用手册就稍微更深入一点了，它解释了什么是**版本控制系统**、什么是**仓库**、**GitHub 模型**如何运行、**Git 指令**和示例等。

复刻项目（来自 GitHub）

当你想要对别人的代码做出贡献时，**复刻**（fork）项目是必不可少的步骤。这个指南将告诉你如何操作。

关于拉取请求（来自 GitHub）

这是一个管理拉取请求的有用的指南：你所修改的代码需要通过拉取请求来让项目的管理者决定是否采纳。

掌握议题（来自 GitHub）

**议题**（issue）就像是一个关于你这个 GitHub 项目的论坛，在这里人们可以提问题和报告错误，你可以管理更新（例如给人们分配需要解决的问题、澄清问题以及告知问题已经解决）。这篇文章会让你知道所需要的一些关于问题区的知识。


**备注：** 在 Git 和 GitHub 上面你还可以做一大堆事情，但我们认为，如果你想要有效地使用 Git，上面的这些知识是至少应该具备的。当你更深入地了解 Git 时，你将会意识到，当你开始使用更加复杂的指令时会更容易出错。但不要担心，即使是专业的网络工程师有时都会感到困惑，并通过网络检索或 Git 飞行规则和 Dangit, git! 这样的网站来寻找答案。

参见
--

* 理解 GitHub 流程
* Git 指令列表
* 掌握 Markdown 格式（在网页上、评论区常用的格式以及 `.md` 文件所使用的格式）。
* Github Pages 快速入门 （如何在 GitHub 上发布示例和网站）。
* 学习 Git 的分支结构
* Git 飞行规则 （在 Git 中实现特定功能的非常有用的方法介绍纲要，包括如何在出错时纠错等）。
* Dangit, git!（另一个十分有用的方法介绍纲要，特别是在出错的时候进行纠正的方法）。
Vue 中的计算属性
==========

* 上一页
* Overview: Client-side JavaScript frameworks
* 下一页

在本文中，我们将使用 Vue 中的计算属性实现一个计数器，来显示已完成待办事项的数量。计算属性的工作原理类似于方法，但只有在它的依赖项发生变化时才重新运行。

|  |  |
| --- | --- |
| 预备条件： | 熟悉核心的 HTML、CSS 和 JavaScript 语言，了解终端/命令行知识。

 Vue 组件是由管理应用程序数据的 JavaScript 对象和映射到基础 DOM
 结构的基于 HTML 的模板语法组成的。为了进行安装并使用 Vue
 的一些更高级的功能（例如“单文件组件（SFC）”或渲染功能），你将需要一个装有
 node + npm 的终端。
  |
| 目标： | 学习如何使用 Vue 中的计算属性。 |

使用计算属性
------

现在我们想为待办事项列表添加一个摘要计数器。这在为用户提供帮助的同时，也保留了列表的标签作为辅助。如果我们在待办事项列表中完成了 5 项中的 2 项，那么我们的摘要可以是“已完成 2/5”。似乎我们应该这样做：


```html
<h2>
  {{ToDoItems.filter(item => item.done).length}} out of
  {{ToDoItems.length}} items completed
</h2>
```


这个值将在每次渲染时重新计算。对于像当前这样较小的应用程序，这可能并不不会产生什么影响。但是对于更大的应用程序，或者当表达式更复杂时，这可能会导致严重的性能问题。

更好的解决方案是使用 Vue 的计算属性。计算属性的工作原理与方法类似，但仅在它们的一个依赖项发生变化时重新运行。在我们的例子中，这只会在 `ToDoItems` 数组改变时重新运行。

要创建计算属性，我们需要向组件对象添加一个 `computed` 属性，就像我们之前使用的 `methods` 属性一样。

添加摘要计数器
-------

将以下代码添加到 `App` 组件对象中 `methods` 属性的下方。这里的 `listSummary()` 方法将获取已完成的 `ToDoItems` 数量，并返回一个字符串作为摘要的内容。


```js
computed: {
  listSummary() {
    const numberFinishedItems = this.ToDoItems.filter((item) =>item.done).length
    return `${numberFinishedItems} out of ${this.ToDoItems.length} items completed`
  }
}
```


现在我们可以直接将 `{{listSummary}}` 添加到模板中。我们把它添加到一个 `<h2>` 元素中，放在 `<ul>` 上。我们还添加了一个 `id` 和一个 `aria-labelledby` 属性，将 `<h2>` 的内容指定为 `<ul>` 元素的标签。

添加用于展示摘要的 `<h2>`，并更新 `App` 模板中的 `<ul>`，如下所示：


```html
<h2 id="list-summary">{{listSummary}}</h2>
<ul aria-labelledby="list-summary" class="stack-large">
  <li v-for="item in ToDoItems" :key="item.id">
    <to-do-item
 :label="item.label"
 :done="item.done"
 :id="item.id"></to-do-item>
  </li>
</ul>
```


你现在应该可以在你的应用程序中，看到列表的摘要。并且当你添加更多的待办事项时，项目的总数也会同步更新！但是，如果你尝试勾选和取消勾选某些项，就会发现一个错误：到目前为止，我们并没有以任何方式跟踪“done”的数据，因此已完成项目的数量不会改变。

追踪“done”的变化
-----------

我们可以捕获复选框更新的事件，并相应地管理列表。

由于我们不依赖于按下按钮来触发更新，我们可以为每个复选框附加一个 `@change` 事件处理方法，而不是使用 `v-model`。

把 `ToDoItem.vue` 中的 `<input>` 元素改成下面这样：


```html
<input
 type="checkbox"
 class="checkbox"
 :id="id"
 :checked="isDone"
 @change="$emit('checkbox-changed')" />
```


因为我们只需要触发 `checkbox-changed` 事件，所以我们可以在标签中内联使用 `$emit()` 方法。

在 `App.vue` 中 `addToDo()` 方法下面，添加一个名为 `updateDoneStatus()` 的新方法。这个方法应该有一个参数：待办事项的 *id*。我们想要找到与 `id` 匹配的项目，并翻转它的 `done` 状态：


```js
updateDoneStatus(toDoId) {
  const toDoToUpdate = this.ToDoItems.find((item) => item.id === toDoId)
  toDoToUpdate.done = !toDoToUpdate.done
}
```


我们想在 `ToDoItem` 触发 `checkbox-changed` 事件时运行此方法，并传入它的 `item.id` 作为参数。将你的 `<to-do-item></to-do-item>` 标签改成下面这样：


```html
<to-do-item
 :label="item.label"
 :done="item.done"
 :id="item.id"
 @checkbox-changed="updateDoneStatus(item.id)">
</to-do-item>
```


现在如果你勾选了一个 `ToDoItem`，你应该会看到摘要更新了！

![我们的应用程序，添加了一个已完成待办的计数器。目前它显示已完成 5 项中的 3 项](/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties/todo-counter.png)

总结
--

在本文中，我们使用计算属性为我们的应用程序添加了一个漂亮的小功能。然而，我们还有更重要的事情要做：在下一篇文章中，我们将学习条件渲染，以及当我们想编辑现有的待办事项时，如何使用它来显示编辑表单。

* 上一页
* Overview: Client-side JavaScript frameworks
* 下一页
Vue 资源
======

* 上一页
* Overview: Client-side JavaScript frameworks
* 下一页

现在，我们将为我们的 Vue 学习画上句号，这里将给你一个资源清单，你可以用它来进一步学习，还有一些其他有用的提示。

|  |  |
| --- | --- |
| 预备条件： | 
 熟悉核心 HTML、CSS 和 JavaScript
 语言，了解终端/命令行知识。

Vue 组件是由管理应用程序数据的 JavaScript 对象和映射到基础 DOM 结构的基于 HTML 的模板语法组成的。为了进行安装并使用 Vue 的一些更高级的功能（例如“单文件组件（SFC）”或渲染功能），你将需要一个装有 node + npm 的终端。 |
| 目标： | 要了解去哪里寻找关于 Vue 的进一步信息，以继续学习。 |

更多资源
----

这里可以学到更多 Vue 知识：

* Vue 文档——Vue 网站主页，包含全面的文档，包括示例、指导手册和参考资料。这是开始深入学习 Vue 的最好地方。
* Vue Github 仓库——Vue 源码仓库。在这里你可以报告问题和/或直接对 Vue 代码库做出贡献。研究 Vue 的源代码可以帮助你更好地理解该框架的工作原理，并写出更好的代码。
* Vue 论坛——获取帮助的 Vue 官方论坛。
* Vue CLI 文档——Vue CLI 文档。这包含了关于定制和扩展你通过 CLI 生成的输出的信息。
* NuxtJS——NuxtJS 是服务器端 Vue 框架，它的一些架构意见对创建可维护的应用程序很有用，即使你不使用它提供的任何服务器端渲染功能。这个网站提供了关于使用 NuxtJS 的详细文档。
* Vue Mastery——一个 Vue 付费学习平台，也包含一些免费课程。
* Vue School——也是一个 Vue 付费学习平台。
构建并发布你的 Vue app
---------------

Vue CLI 还为我们提供了准备向网络发布应用程序的工具。你可以像这样做：

* 如果你的本地服务仍然正在运行，在控制台按下 `Ctrl` + `C` 停止它。
* 之后，在控制台运行 `npm run build`（或者 `yarn build`）。

这将创建一个新的 `dist` 目录，包含所有准备好的生产文件。要把你的网站发布到网上，请把这个文件夹的内容复制到你的主机环境中。

**备注：** Vue CLI 文档也包含一个专门的指导手册，可以帮助你将应用发布到很多常见的托管平台。

Vue 2
-----

Vue 2 的支持将于 2023 年 12 月 31 日结束，所有 CLI 工具的默认 Vue 版本为 3 及以上版本。组合式 API作为基于属性的 API 的替代，`setup()` 函数将作用于组件上。只有你从这个函数返回的东西在你的 `<template>` 中可用。在使用这个 API 时，你需要对“响应式”的属性进行明确说明。Vue 使用选项式 API为你处理这个问题。这使得新的 API 通常被认为是一个更高级的用例。

如果要从 Vue 2 升级，建议看一下 Vue 3 迁移指南。

* 上一页
* Overview: Client-side JavaScript frameworks
* 下一页
设计与无障碍
======

本节列出了与美学、页面结构、辅助功能等相关的问题。

我该怎样开始设计我的网站？

本文涵盖了每个项目的所有重要的第一步：定义你想要完成的任务。

一般的网页布局是怎样的？

在为你的网站设计网页时，最好了解最常见的布局。这篇文章说明一些典型的网页布局，看看组成每一个的部分。

何为无障碍？

这篇文章介绍了 web 无障碍背后的一些基本概念。

怎么设计才能适用于所有用户？ (en-US)

这篇文章提供了基本的技术，帮助你为任何类型的用户设计网站——快速的无障碍技巧，以及其他类似的事情。

什么样的 HTML 特性可以提升无障碍性？ (en-US)

本文介绍了 HTML 的特定功能，可用于使不同残疾人更容易访问网页。
工具和安装
=====

本部分列出了与可用于构建网站的工具/软件相关的问题。

你需要什么软件用来造一个网站？

在本文中，我们将解释在编辑，上传或查看网站时需要使用哪些软件组件。

在网上做点什么需要花多少钱？

当你推出网站时，你可能没有花费，或者你的费用可能会爆表。在这篇文章中，我们讨论了每一件事的成本和你付出成本（或不付出）后能得到的东西。

什么文本编辑器比较好用？

在本文中，我们重点介绍在选择和安装用于 Web 开发的文本编辑器时需要考虑的一些事项。

什么是浏览器开发者工具？

每个浏览器都有一组用于调试 HTML、CSS 和其他 Web 代码的开发者工具。本文解释如何使用浏览器的开发者工具的基本功能。

你怎么来确保你的网站顺利的运行？

所以你已经在网上发布了你的网站——非常好！但你确定它工作正常吗？本文提供一些基本的故障排除步骤。

怎么搭建一个基础的开发环境？

在本文中，我们将解释如何在本地搭建一个测试服务器，以及基本的使用方法。

怎么将文件上传到服务器？

本文介绍如何使用 FTP 工具在线发布你的网站——这是一种常见的网站发布方法，以便其他人可以通过计算机访问网站。

怎么使用 GitHub Pages?

本文提供了使用 GitHub 的 gh-pages 功能发布内容的基本指南。

如何在 Google App Engine 上托管你的网站？

寻找一个托管网站的地方？以下是在 Google App Engine 上托管网站的分步指南。

有哪些工具可用于调试和提高网站性能？

这组文章向你展示了如何使用 Firefox 中的开发工具来调试和提高网站性能，使用工具检查内存使用情况、JavaScript 调用树、渲染的 DOM 节点数量等。
Web 机制
======

本部分涵盖与 Web 生态系统的一般知识及其工作原理相关的问题。

互联网是怎么工作的？

**互联网**是 Web 的基石，是让 Web 变得可能的基础设施。本质上来说，互联网是一个大型的相互交流的计算机网络。本文讨论了它在底层是如何工作的。

网页、网站、网络服务器和搜索引擎的区别是什么？

本文中我们讲述了各种和 Web 相关的概念：网页、网站、网络服务器，以及搜索引擎。这些概念常常被网络新手混淆，或者被误用。让我们看看它们到底代指的是什么吧！

什么是超链接？

在本文中，我们将讨论超链接是什么，以及它们为什么重要。

什么是 URL？

有了超文本和 HTTP，当涉及到互联网时，URL 是一个关键概念。它是浏览器用来在网络上检索任何已经发布的资源的主要机制。

什么是域名？

域名是互联网基础架构的关键部分。它们为互联网上任何可用的网络服务器提供了人类可读的地址。

什么是 web 服务器？

术语“Web 服务器”可以指在 Web 上向客户端提供网站的硬件或软件，或者两者一起工作。在本文中，我们将讨论 Web 服务器如何工作，以及为什么它们是重要的。
如何在 Google App Engine 上托管你的网站？
==============================

Google App Engine 是一个功能强大的平台，它能让你在谷歌的 infrastructure 上构建并运行应用，你可以在这上面：从头构建多层 WEB 应用，或建立一个静态网站。

接下来是手把手入门的教程：

创建一个谷歌云平台项目
-----------

为了在你自己的网站或者 app 使用谷歌的工具，你需要在谷歌云平台上创建一个新项目 ( a new project ) 当然，需要谷歌账号。

1. 打开谷歌云平台控制台（Google Cloud Platform Console），再打开 App Engine dashboard 页面 并点击 *Create* .
2. 如果从未创建过项目 (project)，会提示你是否选择接收邮箱升级，并需要同意团队服务条款才能继续。
3. 键入项目名，并编辑项目 ID(请记下你的项目 ID)
 本教程的示例值：
    * Project Name: *GAE Sample Site*
    * Project ID: *gaesamplesite*
4. *点击 Create* 以创建工程
创建一个应用 (application)
--------------------

每个云平台项目都可以包含一个 APP 引擎应用，所以我们来为自己的项目准备一个 app

1. 我们需要一个样例应用来发布。如果你还没有，请下载 sample app 并解压。
2. 看一下这个样例应用的结构—`website`文件夹包括你的网站内`容，app.yaml`文件是你的应用配置文件
    * 你的网站内容必须放在`website`文件夹下，并且入口文件必须取名为`index.html`，其他部分可以自行定义。
    * `app.yaml` 文件是一个配置文件，它高速应用引擎怎么映射 UR 到你的静态文件，你不需要编辑它。
发布你的应用
------

现在我们已经制作了我们的项目并将示例应用程序文件收集在一起，下面发布应用程序。

1. 打开Google Cloud Shell.
2. 把 `sample-app`目录拖拽到代码编辑器左边
3. 在命令行中键入如下命令选择你的项目：

```bash
gcloud config set project gaesamplesite
```

4. 键入如下命令 进入到 app 的 目录：

```bash
cd sample-app
```

5. 你现在可以部署应用程序，即将应用程序上传到 App Engine：

```bash
gcloud app deploy
```

6. 输入一个数字以选择你希望应用程序所在的区域。.
7. 键入 `Y` 确认。
8. 现在你可以在浏览器中访问你的站点了，比如对于项目 ID 是*gaesamplesite 的网站*, go 输入 *gaesamplesite*.appspot.com访问。
更多信息
----

请访问Google App Engine Documentation.
如何设置一个本地测试服务器？
==============

本文将会介绍如何在你的计算机上安装一个简单的本地测试服务器，以及它的基本用法。

|  |  |
| --- | --- |
| 前提： | 你需要知道互联网是怎么工作的，以及什么是 web 服务器。 |
| 目标： | 你将学习如何配置本地测试服务器。 |

本地文件与远程文件
---------

在大多数示例中，我们告诉你只需在浏览器中直接打开你的示例，有很多方法可以实现这一点，你可以通过双击 HTML 文件或将其拖拽到浏览器窗口中，或者在浏览器中选择 *文件 > 打开...* 选择 HTML 文件等。

如果你打开的是本地示例的话，你可以在地址栏看到这个地址是以 `file://` 开头的，接着本地硬盘上该示例文件的路径。相比之下，如果你查看的是我们在 GitHub 上托管的示例（或其他远程服务器上的示例），web 地址会以 `http://` 或 `https://` 开头，说明该文件是通过 HTTP 传输的。

测试本地文件存在的问题
-----------

如果你将某些示例作为本地文件打开的话，它将不会运行。这可能是由于各种原因，最有可能是：

* **它们具有异步请求**。如果你只是从本地文件运行示例，一些浏览器（包括 Chrome）将不会运行异步请求（请参阅从服务器获取数据）。这是因为安全限制（更多关于 Web 安全的信息，请参阅站点安全）。
* **它们具有服务端代码**。服务器端语言（如 PHP 或 Python）需要一个特殊的服务器来解释代码并提供结果。
* **它们引用其他文件**。浏览器通常将使用 `file://` 协议加载资源的请求视为跨域请求。所以，如果你加载了一个引用了其他本地文件的本地文件，就有可能会导致 CORS 的问题。
运行一个简单的本地 HTTP 服务器
------------------

### 在代码编辑器中使用扩展

如果你只需要 HTML、CSS 和 JavaScript，并且不需要服务器端的语言，那么最简单的方法可能是在你的代码编辑器中查找扩展。除了自动化安装和设置本地 HTTP 服务器之外，它们还能很好地与你的代码编辑器集成。在 HTTP 服务器中测试本地文件可能仅需一键即可。

对于 VSCode，你可以查看以下免费的扩展：

* `vscode-preview-server`。你可以在其主页上查看。
### 使用 Python

实现这一目标的另一种方法是使用 Python 的 `http.server` 模块。

**备注：** 旧版本的 Python（直到版本 2.7）提供了一个类似的模块，名为 `SimpleHTTPServer`。如果你正在使用 Python 2.x，你可以通过将所有的 `http.server` 替换为 `SimpleHTTPServer` 来遵循这个指南。然而，我们建议你使用 Python 的最新版本。

要做到这一点：

1. 安装 Python。如果你正在使用 Linux 或 macOS，那么它应该已经在你的系统上。如果你是 Windows 用户，你可以从 Python 主页获取安装程序，然后按照说明来安装它：
    * 访问 python.org
    * 在下载部分，点击 Python“3.xxx”的链接。
    * 在页面底部，点击 *Windows 安装程序*链接来下载安装文件。
    * 下载完成后，运行它。
    * 在第一个安装程序页面，确保你勾选了“Add Python 3.xxx to PATH”（添加 Python 3.xxx 到系统路径）的复选框。
    * 点击*安装*，然后在安装完成后点击*关闭*。
2. 打开你的命令提示符（Windows）/终端（macOS/ Linux）。要检查 Python 是否已安装，输入以下命令：

```bash
python -V
# 如果以上命令失败，尝试：
python3 -V
# 或者，如果“py”命令可用，尝试：
py -V
```

3. 它应该返回版本号。如果运行正常，请使用 `cd` 命令导航到你的示例所在的目录。

```bash
# 包含目录名字以进入它，例如
cd Desktop
# 如果需要的话，使用两个点来跳出一个目录级别
cd ..
```

4. 在该目录下输入命令启动服务器：

```bash
# 如果上面返回的 Python 版本是 3.X
# 在 Windows 上，尝试“python -m http.server”或“py -3 -m http.server”
python3 -m http.server
# 如果上面返回的 Python 版本是 2.X
python -m SimpleHTTPServer
```

5. 默认情况下，这会在 8000 端口上启动本地服务器，以提供文件夹中的内容。你可以在浏览器中访问 URL `http://localhost:8000` 来访问服务器。你将在此处看到列出的目录内容——点击你要运行的 HTML 文件即可。

**备注：** 如果你已经在端口 8000 上运行了一些内容，你可以通过在运行服务器的命令后面加上备用端口号来选择另一个端口，例如 `python3 -m http.server 7800`（Python 3.x）或 `python -m SimpleHTTPServer 7800`（Python 2.x）。然后你可以在 `localhost:7800` 访问你的内容。

在本地运行服务器端语言
-----------

Python 的 `http.server`（或 Python 2 的 `SimpleHTTPServer`）模块很有用，但它仅仅是一个*静态*文件服务器，不知道如何运行用 Python、PHP 或 JavaScript 等语言编写的代码。为了处理这个问题，你需要更多的东西——你需要的东西取决于你尝试运行的服务器端语言。这里有几个例子：

* 要运行 Python 服务器端代码，你需要使用 Python web 框架。Python 有很多流行的 web 框架，例如 Django（有一个指南可供参考）、Flask 和 Pyramid。
* 要运行 Node.js（JavaScript）服务器端代码，你可以直接使用 Node 或选择构建于其上的框架。Express 是一个不错的选择——请参阅 Express Web 框架（Node.js/JavaScript）。
* 要运行 PHP 服务器端代码，启动 PHP 的内置开发服务器：

```bash
cd path/to/your/php/code
php -S localhost:8000
```