diff --git a/.prettierignore b/.prettierignore
index 9030ef035119b9..ceb86c0ffbdbe5 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -119,7 +119,6 @@ build/
/files/ru/webassembly/**/*.md
# zh-cn
-/files/zh-cn/learn/**/*.md
/files/zh-cn/learn/css/**/*.md
/files/zh-cn/learn/html/**/*.md
/files/zh-cn/learn/javascript/**/*.md
diff --git a/files/zh-cn/learn/accessibility/css_and_javascript/index.md b/files/zh-cn/learn/accessibility/css_and_javascript/index.md
index cabbf54f269a93..c1cd3489f3481d 100644
--- a/files/zh-cn/learn/accessibility/css_and_javascript/index.md
+++ b/files/zh-cn/learn/accessibility/css_and_javascript/index.md
@@ -64,7 +64,8 @@ h1 {
font-size: 5rem;
}
-p, li {
+p,
+li {
line-height: 1.5;
font-size: 1.6rem;
}
@@ -85,13 +86,16 @@ p, li {
```html
The water is very hot .
-Water droplets collecting on surfaces is called condensation .
+
+ Water droplets collecting on surfaces is called condensation .
+
```
你可能希望向强调的文本添加一些简单的颜色：
```css
-strong, em {
+strong,
+em {
color: #a60000;
}
```
@@ -103,7 +107,10 @@ strong, em {
允许缩写、首字母缩略词或初始化与其扩展关联的元素：
```html
-Web content is marked up using HTML .
+
+ Web content is marked up using
+ HTML .
+
```
同样，你可能希望以某种简单方式设置样式：
@@ -131,7 +138,9 @@ a {
color: #ff0000;
}
-a:hover, a:visited, a:focus {
+a:hover,
+a:visited,
+a:focus {
color: #a60000;
text-decoration: none;
}
@@ -157,7 +166,7 @@ a:active {
```html
Enter your name
-
```
@@ -248,7 +257,7 @@ JavaScript 还可能会中断无障碍，具体取决于其使用方式。
```html
Enter your name:
-My subheading
-This is the first subsection of my document. I'd love people to be able to find this content!
+
+ This is the first subsection of my document. I'd love people to be able to
+ find this content!
+
My 2nd subheading
-This is the second subsection of my content. I think is more interesting than the last one.
+
+ This is the second subsection of my content. I think is more interesting than
+ the last one.
+
```
我们已经准备了一个更长的文本版本，供您试用于屏幕阅读器（请查看 [good-semantics.html](http://mdn.github.io/learning-area/accessibility/html/good-semantics.html)）。如果您尝试在此过程中导航，您将看到这非常容易导航：
@@ -100,25 +106,26 @@ slug: Learn/Accessibility/HTML
人们有时会使用表现性 HTML 和换行符来编写标题，段落等，如下所示：
```html
-My heading
-My heading My subheading
-My 2nd subheading
-
-
Header
-
@@ -165,7 +170,7 @@ This is the second subsection of my content. I think is more interesting than th
@@ -174,28 +179,22 @@ This is the second subsection of my content. I think is more interesting than th
-
-
-
+
-
Related
-
-
-
-
+
```
@@ -361,10 +358,10 @@ slug: Learn/Forms/How_to_build_custom_form_controls
- 要么我们将 body 的 class 设置为"widget"，隐藏真实的{{HTMLElement("select")}}元素
- 或是我们没有改变 body 的 class，这样 body 的 class 还是"no-widget",
因此 class 为"select"的元素需要被隐藏 */
- position : absolute;
- left : -5000em;
- height : 0;
- overflow : hidden;
+ position: absolute;
+ left: -5000em;
+ height: 0;
+ overflow: hidden;
}
```
@@ -424,18 +421,17 @@ window.addEventListener("load", function () {
// 它需要一个参数：
// select :要停用的带有 'select' 类的节点
function deactivateSelect(select) {
-
// 如果组件没有运行，不用进行任何操作
- if (!select.classList.contains('active')) return;
+ if (!select.classList.contains("active")) return;
// 我们需要获取自定义组件的选项列表
- var optList = select.querySelector('.optList');
+ var optList = select.querySelector(".optList");
// 关闭选项列表
- optList.classList.add('hidden');
+ optList.classList.add("hidden");
// 然后停用组件本身
- select.classList.remove('active');
+ select.classList.remove("active");
}
// 每当用户想要激活（或停用）这个组件的时候，会调用这个函数
@@ -443,9 +439,8 @@ function deactivateSelect(select) {
// select : 要激活的带有'select'类的 DOM 节点
// selectList : 包含所有带'select'类的 DOM 节点的列表
function activeSelect(select, selectList) {
-
// 如果组件已经激活了，不进行任何操作
- if (select.classList.contains('active')) return;
+ if (select.classList.contains("active")) return;
// 我们需要关闭所有自定义组件的活动状态
// 因为 deactiveselect 函数满足 forEach 回调函数的所有请求，
@@ -453,19 +448,18 @@ function activeSelect(select, selectList) {
selectList.forEach(deactivateSelect);
// 然后我们激活特定的组件
- select.classList.add('active');
+ select.classList.add("active");
}
// 每当用户想要打开/关闭选项列表的时候，会调用这个函数
// 它需要一个参数：
// select : 要触发的列表的 DOM 节点
function toggleOptList(select) {
-
// 该列表不包含在组件中
- var optList = select.querySelector('.optList');
+ var optList = select.querySelector(".optList");
// 我们改变列表的class去显示/隐藏它
- optList.classList.toggle('hidden');
+ optList.classList.toggle("hidden");
}
// 每当我们要高亮一个选项的时候，会调用该函数
@@ -473,18 +467,17 @@ function toggleOptList(select) {
// select : 带有'select'类的 DOM 节点，包含了需要高亮强调的选项
// option : 需要高亮强调的带有'option'类的 DOM 节点
function highlightOption(select, option) {
-
// 为我们的自定义 select 元素获取所有有效选项的列表
- var optionList = select.querySelectorAll('.option');
+ var optionList = select.querySelectorAll(".option");
// 我们移除所有选项的高亮强调
optionList.forEach(function (other) {
- other.classList.remove('highlight');
+ other.classList.remove("highlight");
});
// 我们高亮强调正确的选项
- option.classList.add('highlight');
-};
+ option.classList.add("highlight");
+}
```
这是你需要用来处理组件不同状态的所有代码。
@@ -493,25 +486,24 @@ function highlightOption(select, option) {
```js
// 我们处理文档加载时的事件绑定。
-window.addEventListener('load', function () {
- var selectList = document.querySelectorAll('.select');
+window.addEventListener("load", function () {
+ var selectList = document.querySelectorAll(".select");
// 每个自定义组件都需要初始化
selectList.forEach(function (select) {
-
// 它的'option'元素也需要
- var optionList = select.querySelectorAll('.option');
+ var optionList = select.querySelectorAll(".option");
// 每当用户的鼠标悬停在一个选项上时，我们高亮这个指定的选项
optionList.forEach(function (option) {
- option.addEventListener('mouseover', function () {
+ option.addEventListener("mouseover", function () {
// 注意:'select'和'option'变量是我们函数调用范围内有效的闭包。
highlightOption(select, option);
});
});
// 每当用户点击一个自定义的 select 元素时
- select.addEventListener('click', function (event) {
+ select.addEventListener("click", function (event) {
// 注意:'select'变量是我们函数调用范围内有效的闭包。
// 我们改变选项列表的可见性
@@ -520,7 +512,7 @@ window.addEventListener('load', function () {
// 如果组件获得了焦点
// 每当用户点击它或是用 tab 键访问这个组件时，组件获得焦点
- select.addEventListener('focus', function (event) {
+ select.addEventListener("focus", function (event) {
// 注意:'select'和'selectlist'变量是我们函数调用范围内有效的闭包。
// 我们激活这个组件
@@ -528,7 +520,7 @@ window.addEventListener('load', function () {
});
// 如果组件失去焦点
- select.addEventListener('blur', function (event) {
+ select.addEventListener("blur", function (event) {
// 注意:'select'变量是我们函数调用范围内有效的闭包。
// 我们关闭这个组件
@@ -540,10 +532,10 @@ window.addEventListener('load', function () {
此时，我们的组件会根据我们的设计改变状态，但是它的值仍然没有更新。我们接下来会处理这件事。
-| 实时示例 |
-| ----------------------------------------------------------------------------------------------------------- |
+| 实时示例 |
+| ------------------------------------------------------------------------------------------------------ |
| {{EmbedLiveSample("改变状态",120,130, "", "Learn/Forms/How_to_build_custom_form_controls/Example_3")}} |
-| [查看源代码](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls/Example_3) |
+| [查看源代码](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls/Example_3) |
### 处理组件的值
@@ -564,10 +556,10 @@ function updateValue(select, index) {
var nativeWidget = select.previousElementSibling;
// 我们也需要得到自定义组件的值占位符，
- var value = select.querySelector('.value');
+ var value = select.querySelector(".value");
// 还有整个选项列表。
- var optionList = select.querySelectorAll('.option');
+ var optionList = select.querySelectorAll(".option");
// 我们将被选择的索引设定为我们的选择的索引
nativeWidget.selectedIndex = index;
@@ -577,7 +569,7 @@ function updateValue(select, index) {
// 然后高亮我们自定义组件里对应的选项
highlightOption(select, optionList[index]);
-};
+}
// 这个函数返回原生组件里当前选定的索引
// 它需要 1 个参数：
@@ -588,20 +580,20 @@ function getIndex(select) {
var nativeWidget = select.previousElementSibling;
return nativeWidget.selectedIndex;
-};
+}
```
通过这两个函数，我们可以将原生组件绑定到自定义的组件上。
```js
// 我们在文档加载时处理事件的绑定。
-window.addEventListener('load', function () {
- var selectList = document.querySelectorAll('.select');
+window.addEventListener("load", function () {
+ var selectList = document.querySelectorAll(".select");
// 每个自定义组件都需要初始化
selectList.forEach(function (select) {
- var optionList = select.querySelectorAll('.option'),
- selectedIndex = getIndex(select);
+ var optionList = select.querySelectorAll(".option"),
+ selectedIndex = getIndex(select);
// 使我们的自定义组件可以获得焦点
select.tabIndex = 0;
@@ -614,21 +606,25 @@ window.addEventListener('load', function () {
// 每当用户点击一个选项的时候，更新相应的值
optionList.forEach(function (option, index) {
- option.addEventListener('click', function (event) {
+ option.addEventListener("click", function (event) {
updateValue(select, index);
});
});
// 每当用户在获得焦点的组件上用键盘操作时，更新相应的值
- select.addEventListener('keyup', function (event) {
+ select.addEventListener("keyup", function (event) {
var length = optionList.length,
- index = getIndex(select);
+ index = getIndex(select);
// 当用户点击向下箭头时，跳转到下一个选项
- if (event.keyCode === 40 && index < length - 1) { index++; }
+ if (event.keyCode === 40 && index < length - 1) {
+ index++;
+ }
// 当用户点击向上箭头时，跳转到上一个选项
- if (event.keyCode === 38 && index > 0) { index--; }
+ if (event.keyCode === 38 && index > 0) {
+ index--;
+ }
updateValue(select, index);
});
@@ -640,10 +636,10 @@ window.addEventListener('load', function () {
做完上面这些后，我们就完成了！下面是结果：
-| 实时示例 |
-| ----------------------------------------------------------------------------------------------------------- |
+| 实时示例 |
+| ------------------------------------------------------------------------------------------------------ |
| {{EmbedLiveSample("改变状态",120,130, "", "Learn/Forms/How_to_build_custom_form_controls/Example_4")}} |
-| [查看源代码](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls/Example_4) |
+| [查看源代码](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls/Example_4) |
但是等等，我们真的做完了嘛？
@@ -688,29 +684,29 @@ window.addEventListener('load', function () {
```js
function updateValue(select, index) {
var nativeWidget = select.previousElementSibling;
- var value = select.querySelector('.value');
- var optionList = select.querySelectorAll('.option');
+ var value = select.querySelector(".value");
+ var optionList = select.querySelectorAll(".option");
// 我们确保所有的选项都没有被选中
optionList.forEach(function (other) {
- other.setAttribute('aria-selected', 'false');
+ other.setAttribute("aria-selected", "false");
});
// 我们确保选定的选项被选中了
- optionList[index].setAttribute('aria-selected', 'true');
+ optionList[index].setAttribute("aria-selected", "true");
nativeWidget.selectedIndex = index;
value.innerHTML = optionList[index].innerHTML;
highlightOption(select, optionList[index]);
-};
+}
```
这是经过所有的改变之后的最终结果。（藉由 [NVDA](https://www.nvaccess.org/) 或 [VoiceOver](https://www.apple.com/accessibility/vision/) 这样的辅助技术尝试它，你会对此有更好的体会)：
-| 实时示例 |
-| ----------------------------------------------------------------------------------------------------------- |
+| 实时示例 |
+| ------------------------------------------------------------------------------------------------------ |
| {{EmbedLiveSample("改变状态",120,130, "", "Learn/Forms/How_to_build_custom_form_controls/Example_5")}} |
-| [查看最终源代码](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls/Example_5) |
+| [查看最终源代码](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls/Example_5) |
## 总结
diff --git a/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.md b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.md
index f8ea9300bdcef7..7a6c371248af93 100644
--- a/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.md
+++ b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.md
@@ -53,15 +53,15 @@ HTML 表单的灵活性使它们成为 HTML 中最复杂的结构之一;您可