From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- .../accessibility/css_and_javascript/index.html | 367 ++++ .../css\345\222\214javascript/index.html" | 367 ---- files/zh-cn/learn/accessibility/html/index.html | 542 ++++++ .../index.html" | 542 ------ .../learn/accessibility/multimedia/index.html | 354 ++++ .../index.html" | 354 ---- .../available_text_editors/index.html | 295 +++ .../how_does_the_internet_work/index.html | 91 + .../what_are_browser_developer_tools/index.html | 230 +++ .../index.html" | 295 --- .../building_blocks/a_cool_looking_box/index.html | 88 + .../creating_fancy_letterheaded_paper/index.html | 101 + .../fundamental_css_comprehension/index.html | 127 ++ .../handling_different_text_directions/index.html | 151 ++ .../index.html" | 151 -- .../css_layout/legacy_layout_methods/index.html | 577 ++++++ .../learn/css/css_layout/positioning/index.html | 615 ++++++ .../index.html" | 577 ------ .../\345\256\232\344\275\215/index.html" | 615 ------ .../index.html" | 162 -- .../css/first_steps/getting_started/index.html | 267 +++ .../learn/css/first_steps/how_css_works/index.html | 162 ++ .../\345\274\200\345\247\213/index.html" | 267 --- files/zh-cn/learn/css/howto/css_faq/index.html | 183 ++ .../learn/css/howto/generated_content/index.html | 160 ++ .../fundamental_css_comprehension/index.html | 127 -- .../styling_boxes/a_cool_looking_box/index.html | 88 - .../creating_fancy_letterheaded_paper/index.html | 101 - .../learn/css/styling_text/fundamentals/index.html | 727 +++++++ files/zh-cn/learn/css/styling_text/index.html | 54 + .../css/styling_text/styling_links/index.html | 431 +++++ .../css/styling_text/styling_lists/index.html | 374 ++++ .../styling_text/typesetting_a_homepage/index.html | 119 ++ .../learn/css/styling_text/web_fonts/index.html | 186 ++ .../fundamentals/index.html" | 727 ------- .../index.html" | 54 - .../styling_links/index.html" | 431 ----- .../styling_lists/index.html" | 374 ---- .../typesetting_a_homepage/index.html" | 119 -- .../web_\345\255\227\344\275\223/index.html" | 186 -- .../discover_browser_developer_tools/index.html | 230 --- .../learn/forms/advanced_form_styling/index.html | 467 +++++ .../forms/basic_native_form_controls/index.html | 683 +++++++ files/zh-cn/learn/forms/form_validation/index.html | 874 +++++++++ .../example_1/index.html | 418 ++++ .../example_2/index.html | 212 +++ .../example_3/index.html | 246 +++ .../example_4/index.html | 294 +++ .../how_to_build_custom_form_controls/index.html | 776 ++++++++ .../forms/how_to_structure_a_web_form/index.html | 290 +++ .../forms/html_forms_in_legacy_browsers/index.html | 215 +++ files/zh-cn/learn/forms/index.html | 77 + .../index.html | 1988 ++++++++++++++++++++ .../sending_and_retrieving_form_data/index.html | 369 ++++ .../sending_forms_through_javascript/index.html | 439 +++++ .../zh-cn/learn/forms/styling_web_forms/index.html | 388 ++++ files/zh-cn/learn/forms/your_first_form/index.html | 266 +++ .../zh-cn/learn/how_the_internet_works/index.html | 91 - files/zh-cn/learn/how_to_contribute/index.html | 85 - .../advanced_styling_for_html_forms/index.html | 467 ----- .../html/forms/data_form_validation/index.html | 874 --------- .../example_1/index.html | 418 ---- .../example_2/index.html | 212 --- .../example_3/index.html | 246 --- .../example_4/index.html | 294 --- .../how_to_build_custom_form_widgets/index.html | 776 -------- .../forms/how_to_structure_an_html_form/index.html | 290 --- .../forms/html_forms_in_legacy_browsers/index.html | 215 --- files/zh-cn/learn/html/forms/index.html | 77 - .../index.html | 1988 -------------------- .../sending_and_retrieving_form_data/index.html | 369 ---- .../sending_forms_through_javascript/index.html | 439 ----- .../learn/html/forms/styling_html_forms/index.html | 388 ---- .../html/forms/the_native_form_widgets/index.html | 683 ------- .../html/forms/your_first_html_form/index.html | 266 --- .../zh-cn/learn/html/forms_and_buttons/index.html | 43 - .../author_fast-loading_html_pages/index.html | 213 +++ .../html/howto/use_data_attributes/index.html | 80 + .../document_and_website_structure/index.html | 252 +++ .../index.html" | 252 --- .../other_embedding_technologies/index.html | 254 +++ .../index.html" | 254 --- .../javascript/asynchronous/async_await/index.html | 379 ++++ .../choosing_the_right_approach/index.html | 523 +++++ .../javascript/asynchronous/concepts/index.html | 162 ++ .../zh-cn/learn/javascript/asynchronous/index.html | 59 + .../javascript/asynchronous/introducing/index.html | 272 +++ .../javascript/asynchronous/promises/index.html | 599 ++++++ .../asynchronous/timeouts_and_intervals/index.html | 617 ++++++ .../building_blocks/image_gallery/index.html | 244 +++ .../index.html" | 244 --- .../adding_bouncing_balls_features/index.html | 468 +++++ .../index.html | 95 + .../index.html" | 468 ----- .../index.html" | 95 - .../async_await/index.html" | 379 ---- .../choosing_the_right_approach/index.html" | 523 ----- .../\345\274\202\346\255\245/index.html" | 59 - .../promises\350\257\255\346\263\225/index.html" | 599 ------ .../\346\246\202\345\277\265/index.html" | 162 -- .../\347\256\200\344\273\213/index.html" | 272 --- .../index.html" | 617 ------ .../performance/perceived_performance/index.html | 109 ++ .../index.html" | 109 -- .../configuring_server_mime_types/index.html | 118 ++ .../learn/server-side/django/admin_site/index.html | 339 ++++ .../django/development_environment/index.html | 406 ++++ .../learn/server-side/django/home_page/index.html | 358 ++++ .../index.html" | 358 ---- .../index.html" | 406 ---- .../index.html" | 339 ---- .../introduction/index.html | 393 ++++ .../\344\273\213\347\273\215/index.html" | 393 ---- .../cross_browser_testing/accessibility/index.html | 624 ++++++ .../testing_strategies/index.html | 367 ++++ .../index.html" | 624 ------ .../index.html" | 367 ---- .../tutorial/how_to_build_a_web_site/index.html | 172 -- files/zh-cn/learn/tutorial/index.html | 39 - files/zh-cn/learn/web_mechanics/index.html | 10 - 120 files changed, 21134 insertions(+), 20729 deletions(-) create mode 100644 files/zh-cn/learn/accessibility/css_and_javascript/index.html delete mode 100644 "files/zh-cn/learn/accessibility/css\345\222\214javascript/index.html" create mode 100644 files/zh-cn/learn/accessibility/html/index.html delete mode 100644 "files/zh-cn/learn/accessibility/html_colon_\344\270\272\345\217\257\350\256\277\351\227\256\346\200\247\346\217\220\344\276\233\344\270\200\344\270\252\350\211\257\345\245\275\347\232\204\345\237\272\347\241\200/index.html" create mode 100644 files/zh-cn/learn/accessibility/multimedia/index.html delete mode 100644 "files/zh-cn/learn/accessibility/\345\244\232\345\252\222\344\275\223/index.html" create mode 100644 files/zh-cn/learn/common_questions/available_text_editors/index.html create mode 100644 files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html create mode 100644 files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html delete mode 100644 "files/zh-cn/learn/common_questions/\345\256\236\347\224\250\346\226\207\346\234\254\347\274\226\350\276\221\345\231\250/index.html" create mode 100644 files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html create mode 100644 files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html create mode 100644 files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html create mode 100644 files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html delete mode 100644 "files/zh-cn/learn/css/building_blocks/\345\244\204\347\220\206_\344\270\215\345\220\214_\346\226\271\345\220\221\347\232\204_\346\226\207\346\234\254/index.html" create mode 100644 files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.html create mode 100644 files/zh-cn/learn/css/css_layout/positioning/index.html delete mode 100644 "files/zh-cn/learn/css/css_layout/\344\274\240\347\273\237\347\232\204\345\270\203\345\261\200\346\226\271\346\263\225/index.html" delete mode 100644 "files/zh-cn/learn/css/css_layout/\345\256\232\344\275\215/index.html" delete mode 100644 "files/zh-cn/learn/css/first_steps/css\345\246\202\344\275\225\350\277\220\350\241\214/index.html" create mode 100644 files/zh-cn/learn/css/first_steps/getting_started/index.html create mode 100644 files/zh-cn/learn/css/first_steps/how_css_works/index.html delete mode 100644 "files/zh-cn/learn/css/first_steps/\345\274\200\345\247\213/index.html" create mode 100644 files/zh-cn/learn/css/howto/css_faq/index.html create mode 100644 files/zh-cn/learn/css/howto/generated_content/index.html delete mode 100644 files/zh-cn/learn/css/introduction_to_css/fundamental_css_comprehension/index.html delete mode 100644 files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html delete mode 100644 files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html create mode 100644 files/zh-cn/learn/css/styling_text/fundamentals/index.html create mode 100644 files/zh-cn/learn/css/styling_text/index.html create mode 100644 files/zh-cn/learn/css/styling_text/styling_links/index.html create mode 100644 files/zh-cn/learn/css/styling_text/styling_lists/index.html create mode 100644 files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html create mode 100644 files/zh-cn/learn/css/styling_text/web_fonts/index.html delete mode 100644 "files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/fundamentals/index.html" delete mode 100644 "files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/index.html" delete mode 100644 "files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/styling_links/index.html" delete mode 100644 "files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/styling_lists/index.html" delete mode 100644 "files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/typesetting_a_homepage/index.html" delete mode 100644 "files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/web_\345\255\227\344\275\223/index.html" delete mode 100644 files/zh-cn/learn/discover_browser_developer_tools/index.html create mode 100644 files/zh-cn/learn/forms/advanced_form_styling/index.html create mode 100644 files/zh-cn/learn/forms/basic_native_form_controls/index.html create mode 100644 files/zh-cn/learn/forms/form_validation/index.html create mode 100644 files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_1/index.html create mode 100644 files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html create mode 100644 files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_3/index.html create mode 100644 files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_4/index.html create mode 100644 files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html create mode 100644 files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html create mode 100644 files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html create mode 100644 files/zh-cn/learn/forms/index.html create mode 100644 files/zh-cn/learn/forms/property_compatibility_table_for_form_controls/index.html create mode 100644 files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html create mode 100644 files/zh-cn/learn/forms/sending_forms_through_javascript/index.html create mode 100644 files/zh-cn/learn/forms/styling_web_forms/index.html create mode 100644 files/zh-cn/learn/forms/your_first_form/index.html delete mode 100644 files/zh-cn/learn/how_the_internet_works/index.html delete mode 100644 files/zh-cn/learn/how_to_contribute/index.html delete mode 100644 files/zh-cn/learn/html/forms/advanced_styling_for_html_forms/index.html delete mode 100644 files/zh-cn/learn/html/forms/data_form_validation/index.html delete mode 100644 files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_1/index.html delete mode 100644 files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_2/index.html delete mode 100644 files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_3/index.html delete mode 100644 files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_4/index.html delete mode 100644 files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/index.html delete mode 100644 files/zh-cn/learn/html/forms/how_to_structure_an_html_form/index.html delete mode 100644 files/zh-cn/learn/html/forms/html_forms_in_legacy_browsers/index.html delete mode 100644 files/zh-cn/learn/html/forms/index.html delete mode 100644 files/zh-cn/learn/html/forms/property_compatibility_table_for_form_widgets/index.html delete mode 100644 files/zh-cn/learn/html/forms/sending_and_retrieving_form_data/index.html delete mode 100644 files/zh-cn/learn/html/forms/sending_forms_through_javascript/index.html delete mode 100644 files/zh-cn/learn/html/forms/styling_html_forms/index.html delete mode 100644 files/zh-cn/learn/html/forms/the_native_form_widgets/index.html delete mode 100644 files/zh-cn/learn/html/forms/your_first_html_form/index.html delete mode 100644 files/zh-cn/learn/html/forms_and_buttons/index.html create mode 100644 files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html create mode 100644 files/zh-cn/learn/html/howto/use_data_attributes/index.html create mode 100644 files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.html delete mode 100644 "files/zh-cn/learn/html/introduction_to_html/\346\226\207\344\273\266\345\222\214\347\275\221\347\253\231\347\273\223\346\236\204/index.html" create mode 100644 files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html delete mode 100644 "files/zh-cn/learn/html/multimedia_and_embedding/\345\205\266\344\273\226\345\265\214\345\205\245\346\212\200\346\234\257/index.html" create mode 100644 files/zh-cn/learn/javascript/asynchronous/async_await/index.html create mode 100644 files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html create mode 100644 files/zh-cn/learn/javascript/asynchronous/concepts/index.html create mode 100644 files/zh-cn/learn/javascript/asynchronous/index.html create mode 100644 files/zh-cn/learn/javascript/asynchronous/introducing/index.html create mode 100644 files/zh-cn/learn/javascript/asynchronous/promises/index.html create mode 100644 files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html create mode 100644 files/zh-cn/learn/javascript/building_blocks/image_gallery/index.html delete mode 100644 "files/zh-cn/learn/javascript/building_blocks/\347\233\270\347\211\207\350\265\260\345\273\212/index.html" create mode 100644 files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.html create mode 100644 files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.html delete mode 100644 "files/zh-cn/learn/javascript/objects/\345\220\221\342\200\234\345\274\271\350\267\263\347\220\203\342\200\235\346\274\224\347\244\272\347\250\213\345\272\217\346\267\273\345\212\240\346\226\260\345\212\237\350\203\275/index.html" delete mode 100644 "files/zh-cn/learn/javascript/objects/\346\265\213\350\257\225\344\275\240\347\232\204\346\212\200\350\203\275_colon_\351\235\242\345\220\221\345\257\271\350\261\241\347\232\204javascript/index.html" delete mode 100644 "files/zh-cn/learn/javascript/\345\274\202\346\255\245/async_await/index.html" delete mode 100644 "files/zh-cn/learn/javascript/\345\274\202\346\255\245/choosing_the_right_approach/index.html" delete mode 100644 "files/zh-cn/learn/javascript/\345\274\202\346\255\245/index.html" delete mode 100644 "files/zh-cn/learn/javascript/\345\274\202\346\255\245/promises\350\257\255\346\263\225/index.html" delete mode 100644 "files/zh-cn/learn/javascript/\345\274\202\346\255\245/\346\246\202\345\277\265/index.html" delete mode 100644 "files/zh-cn/learn/javascript/\345\274\202\346\255\245/\347\256\200\344\273\213/index.html" delete mode 100644 "files/zh-cn/learn/javascript/\345\274\202\346\255\245/\350\266\205\346\227\266\345\222\214\351\227\264\351\232\224/index.html" create mode 100644 files/zh-cn/learn/performance/perceived_performance/index.html delete mode 100644 "files/zh-cn/learn/performance/\346\204\237\347\237\245\346\200\247\350\203\275/index.html" create mode 100644 files/zh-cn/learn/server-side/configuring_server_mime_types/index.html create mode 100644 files/zh-cn/learn/server-side/django/admin_site/index.html create mode 100644 files/zh-cn/learn/server-side/django/development_environment/index.html create mode 100644 files/zh-cn/learn/server-side/django/home_page/index.html delete mode 100644 "files/zh-cn/learn/server-side/django/\344\270\273\351\241\265\346\236\204\345\273\272/index.html" delete mode 100644 "files/zh-cn/learn/server-side/django/\345\274\200\345\217\221\347\216\257\345\242\203/index.html" delete mode 100644 "files/zh-cn/learn/server-side/django/\347\256\241\347\220\206\347\253\231\347\202\271/index.html" create mode 100644 files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html delete mode 100644 "files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/\344\273\213\347\273\215/index.html" create mode 100644 files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html create mode 100644 files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html delete mode 100644 "files/zh-cn/learn/tools_and_testing/cross_browser_testing/\345\217\257\350\256\277\351\227\256\346\200\247/index.html" delete mode 100644 "files/zh-cn/learn/tools_and_testing/cross_browser_testing/\346\265\213\350\257\225\347\255\226\347\225\245/index.html" delete mode 100644 files/zh-cn/learn/tutorial/how_to_build_a_web_site/index.html delete mode 100644 files/zh-cn/learn/tutorial/index.html delete mode 100644 files/zh-cn/learn/web_mechanics/index.html (limited to 'files/zh-cn/learn') diff --git a/files/zh-cn/learn/accessibility/css_and_javascript/index.html b/files/zh-cn/learn/accessibility/css_and_javascript/index.html new file mode 100644 index 0000000000..bdc3b01b2e --- /dev/null +++ b/files/zh-cn/learn/accessibility/css_and_javascript/index.html @@ -0,0 +1,367 @@ +--- +title: CSS 和 JavaScript 无障碍最佳实践 +slug: learn/Accessibility/CSS和JavaScript +tags: + - CSS + - hiding + - unobtursive + - 初学者 + - 对比 + - 导航 + - 文章 + - 无障碍 + - 编码脚本 + - 颜色 +translation_of: Learn/Accessibility/CSS_and_JavaScript +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
+ +

当CSS和JavaScript使用得当，很有可能改善Web访问体验，相反如果滥用的话，则会极大的损害可访问性。本文概述了一些应该被考虑的CSS和JavaScript 的最佳实践，这些实践保证了即使是复杂的内容也可以尽可能容易的被访问。

+ + + + + + + + + + + + +
准备： +

基本的计算机读写能力，对HTML、CSS和JavaScript的基本理解，以及对可访问性的理解。

+
目标：熟悉在 Web 文档中适当地使用 CSS 和 JavaScript,以最大限度地提高可访问性,并且不损害它。
+ +

CSS和JavaScript是可访问的吗？

+ +

CSS和JavaScript对于作为HTML的可访问性没有直接的重要性，但是它们仍然能够帮助或破坏可访问性，这取决于它们是如何使用的。换句话说，重要的是考虑一些最佳实践建议，以确保使用CSS和JavaScript不会破坏文档的可访问性。

+ +

CSS

+ +

让我们从CSS开始吧！

+ +

正确的语义和用户期望

+ +

可以使用 CSS 使任何 HTML 元素看起来像任何东西,但这并不意味着您应该这样做。正如我们经常提到的HTML: A good basis for accessibility,您应该尽可能为作业使用适当的语义元素。如果不这样做,它可能会导致混乱和可用性问题,对每个人,尤其是残障用户。使用正确的语义与用户期望有很大的帮助 –– 元素的外观和功能会根据它们的功能进行某些方式的显示,而且用户期望这些常见的约定。

+ +

例如,如果开发人员没有适当地使用标题元素标记内容,则屏幕阅读器用户无法通过标题元素导航页面。同样,如果对标题进行样式设置,则标题将失去其视觉目的,使其看起来不像标题。

+ +

经验法则是,您可以更新页面功能的样式以适应您的设计,但不要更改它太多,使其不再按预期的外观或活动。以下各节总结了要考虑的主要 HTML 功能。

+ +

“标准”的内容结构

+ +

标题、段落、列表和页面的核心文本内容:

+ +
<h1>Heading</h1>
+
+<p>Paragraph</p>
+
+<ul>
+  <li>My list</li>
+  <li>has two items.</li>
+</ul>
+ +

一些典型的 CSS 如下所示:

+ +
h1 {
+  font-size: 5rem;
+}
+
+p, li {
+  line-height: 1.5;
+  font-size: 1.6rem;
+}
+ +

你应该：

+ + + +

有关详细信息,请参阅 HTML text fundamentals和Styling text 。

+ +

强调的文本

+ +

内联标记,赋予其包裹的文本特别强调:

+ +
<p>The water is <em>very hot</em>.</p>
+
+<p>Water droplets collecting on surfaces is called <strong>condensation</strong>.</p>
+ +

您可能希望向强调的文本添加一些简单的颜色:

+ +
strong, em {
+  color: #a60000;
+}
+ +

但是,您很少需要以任何显著的方式设置强调元素的样式。粗体和斜体文本的标准约定非常容易识别,更改样式可能会导致混淆。有关强调的更多信息,请参阅Emphasis and importance。

+ +

缩写

+ +

允许缩写、首字母缩略词或初始化与其扩展关联的元素:

+ +
<p>Web content is marked up using <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
+ +

同样,您可能希望以某种简单方式设置样式:

+ +
abbr {
+  color: #a60000;
+}
+ +

缩写的公认样式约定是虚线下划线,偏离这一原则明显是不明智的。有关缩写的更多,请参阅Abbreviations。

+ +

链接

+ +

超链接 — 您到达新网站的方式:

+ +
<p>Visit the <a href="https://www.mozilla.org">Mozilla homepage</a>.</p>
+ +

一些非常简单的链接样式如下所示:

+ +
a {
+  color: #ff0000;
+}
+
+a:hover, a:visited, a:focus {
+  color: #a60000;
+  text-decoration: none;
+}
+
+a:active {
+  color: #000000;
+  background-color: #a60000;
+}
+ +

标准链接约定为下划线,标准状态为不同颜色(默认:蓝色),以前访问过链接时另一种颜色变化(默认:紫色),以及激活链接时的另一种颜色(默认:红色)。此外,当链接被鼠标悬停时,鼠标指针将变为指针图标,并且链接在聚焦(例如通过 tabbing)或激活时变成高亮。下图显示了 Firefox(虚线轮廓)和 Chrome(蓝色轮廓)中的高光:

+ +

+ +

+ +

您可以使用链接样式进行创意,只要用户在与链接交互时不断提供反馈即可。当状态发生变化时,确实应该发生某些情况,并且不应删除指针光标或大纲 - 对于使用键盘控件的人来说,两者都是非常重要的辅助功能。

+ +

表单元素

+ +

允许用户将数据输入到网站的元素:

+ +
<div>
+  <label for="name">Enter your name</label>
+  <input type="text" id="name" name="name">
+</div>
+ +

您可以在我们的form-css.html 示例中看到一些很好的示例 CSS(查看示例)。

+ +

您将为表单编写的大多数 CSS 将用于调整元素大小、排列标签和输入,以及让它们看起来整洁。

+ +

但是,您不应过多偏离元素在聚焦时接收的预期视觉反馈表单,这与链接基本相同(见上文)。您可以设置焦点/悬停状态样式,使这种行为在浏览器中更加一致,或者更适合您的页面设计,但不要完全摆脱它 ––同样,人们依靠这些线索来帮助他们了解发生了什么。

+ +

表格

+ +

用于显示表格数据的表。

+ +

您可以在table-css.html示例中看到表 HTML 和 CSS 的一个很好的简单示例(查看示例)。

+ +

表 的CSS 通常使表更适合您的设计,看起来不那么难看。最好确保表标题醒目(通常使用粗体),并使用斑马条带化使不同的行更易于解析。

+ +

颜色和颜色对比度

+ +

为网站选择配色方案时,请确保文本(前景)颜色与背景颜色对比度良好。您的设计可能看起来很酷,但如果有视觉障碍(如色盲)的人无法阅读您的内容,则设计就无一好可做。

+ +

有一个简单的方法来检查您的对比度是否足够大,不会引起问题。有许多对比检查工具可以在线输入您的前景和背景颜色,以检查它们。例如,WebAIM 的颜色对比度检查器易于使用,并说明了您需要满足有关颜色对比度的 WCAG 标准的内容。

+ +
+

注意：高对比度还允许任何使用带有光面屏幕的智能手机或平板电脑的人在明亮的环境中(如阳光)更好地阅读页面。

+
+ +

另一个提示是不要仅仅依靠颜色来提供路标/信息,因为对于那些看不到颜色的人来说,这没有什么用。例如,不要用红色标记所需的表单字段,而是用星号和红色标记它们。

+ +

隐藏的东西

+ +

在很多情况下,可视化设计需要并非同时显示所有内容。例如,在我们的Tabbed info box example (请参阅源码),我们有三个信息面板,但我们将它们放在彼此之上,并提供可以单击以显示每个选项卡的选项卡(也可以使用键盘 - 您也可以使用 Tab 和 Enter/Return以选择它们)。

+ +

+ +

屏幕阅读器用户并不关心这些内容 , 只要资源的顺序有意义,他们就对内容感到满意, 并且他们可以获得所有内容。绝对定位(如本示例所示)通常被视为隐藏内容以进行视觉效果的最佳机制之一,因为它不会阻止屏幕阅读器访问它。

+ +

另一方面,不应使用 {{cssxref("visibility")}}:hidden或 {{cssxref("display")}}:none,因为它们会隐藏屏幕阅读器中的内容。当然,除非您希望从屏幕阅读器中隐藏此内容,这是有充分理由的。

+ +
+

注意：Invisible Content Just for Screen Reader Users有围绕本主题的更多有用详细信息。

+
+ +

接受用户覆盖样式

+ +

接受用户覆盖您的样式

+ +

用户可以使用自己的自定义样式覆盖样式,例如:

+ + + +

用户可能出于各种原因执行此操作。视力受损的用户可能希望使其访问的所有网站上的文本变大，严重色缺乏（severe color difeciency）的用户可能希望将所有网站置于易于查看的高对比度颜色中。无论需要什么，您都应该对此感到满意，并使您的设计足够灵，以便此类更改在您的设计中起作用。例如，您可能希望确保主要内容区域可以处理较大的文本(可能它将开始滚动以允许查看所有文本)，并且不会只是隐藏它，或者完全中断。

+ +

JavaScript

+ +

JavaScript 还可能会中断可访问性，具体取决于其使用方式。

+ +

现代 JavaScript 是一种功能强大的语言,如今我们可以使用它,从简单的内容和 UI 更新到成熟的 2D 和 3D 游戏。没有任何规则规定所有内容都必须对所有人 100% 可访问 ––您只需尽力而为，并使你的应用尽可能可访问。

+ +

简单的内容和功能可以说是很容易使访问 - 例如文本,图像,表格,窗体和按钮,激活功能。正如我们在 HTML: A good basis for accessibility文中提到的,主要注意事项包括:

+ + + +

我们还查看了如何使用 JavaScript 在缺少功能的地方构建的示例 , 请参阅 Building keyboard accessibility back in。这不是理想的 - 实际上,你应该只使用正确的元素为正确的作业 –– 但它表明在情况下它是可能的,由于某种原因,你不能控制使用的标记。提高非语义 JavaScript 支持的小部件的可访问性的另一种方法是使用 WAI-ARIA 为屏幕阅读器用户提供额外的语义。下一篇文章还将详细介绍这一点。

+ +

复杂的功能,如3D游戏是不容易提高可访问性的 ––使用WebGL创建的复杂3D游戏将在 {{htmlelement("canvas")}}元素上呈现,该元素目前没有提供文本替代或其他信息的功能视障用户使用。可以说,这样的游戏并没有真正有这群人作为它的主要目标观众的一部分,这将是不合理的,期望你使它100%访问盲人,但你可以实现键盘控制,所以它可以使用非鼠标用户,并使配色方案的对比度足以让有颜色缺陷的人使用。

+ +

太多JavaScript导致的问题

+ +

过于依赖JavaScript会导致许多问题。有时你会看到一个网站，其中一切都已经用JavaScript完成 ––JavaScript生成HTML，CSS等等。随之而来，会出现各种可访问性问题，因此这样做是不建议的。

+ +

正确的工作需要使用正确的元素和技术！仔细考虑：消息框是否必须用JavaScript 3D实现，纯文本是否就刚好。仔细考虑是否需要复杂的非标准表单小部件,或者文本输入是否就行。如果可能，不要使用 JavaScript 生成所有 HTML 内容。

+ +

保持别抢眼

+ +

在创建内容时，应牢记 unobtrusive JavaScript原则。unobtrusive JavaScript 的想法是，它应该尽可能用于增强功能，而不是完全构建它 - 基本功能最好在没有 JavaScript 的情况下正常工作，尽管人们认识到，这并不总是一个选项。但同样，它的大部分是尽可能使用内置的浏览器功能。

+ +

unobtrusive JavaScript 使用的良好示例包括：

+ + + +

例如，我们编写了一个快速而糟糕的客户端客户端表单验证示例 — 请参form-validation.html(see the demo live)。在示例中，你会看到一个简单的表格；当您尝试提交一个或两个字段为空的表单时，提交将失败，并且会出现一个错误消息框，告诉您出了什么问题。

+ +

这种表单验证并不引人注目 - 在 JavaScript 不可用的情况下，您仍然可以很好的使用表单，并且任何合理的表单实现都将激活服务器端验证，因为恶意用户很容易绕过客户端验证(例如，通过在浏览器中关闭 JavaScript)。客户端验证对于报告错误仍然非常有用 ––用户可以立即了解他们所犯的错误，而不必等待到服务器的往返和页面重新加载。这是一个明确的可用性优势。

+ +
+

注意：此简单示例中尚未实现服务器端验证。

+
+ +

我们使此表单验证非常容易访问。我们使用 {{htmlelement("label")}}元素来确保表单标签明确链接到其输入，因此屏幕阅读器可以一起读取它们：

+ +
<label for="name">Enter your name:</label>
+<input type="text" name="name" id="name">
+ +

我们仅在提交表单时执行验证— 这样，我们就不会过于频繁地更新 UI，并可能混淆屏幕阅读器(可能还有其他)用户：

+ +
form.onsubmit = validate;
+
+function validate(e) {
+  errorList.innerHTML = '';
+  for(var i = 0; i < formItems.length; i++) {
+    var testItem = formItems[i];
+    if(testItem.input.value === '') {
+      errorField.style.left = '360px';
+      createLink(testItem);
+    }
+  }
+
+  if(errorList.innerHTML !== '') {
+    e.preventDefault();
+  }
+}
+ +
+

注意：在此示例中，我们使用绝对定位而不是其他方法(如可见性或显示)隐藏和显示错误消息框，因为它不会干扰屏幕阅读器从中读取内容。

+
+ +

实际表单验证会比这复杂得多 - 您需要检查输入的名称实际上看起来像一个名称，输入的年龄实际上是一个数字，并且与真实情况符合(例如，不是负数或四位数字)。在这里，我们刚刚实现了一个简单的验证，是否将值填充到每个输入字段(if(testItem.input.value === ''))。

+ +

执行验证后，如果测试通过，则提交表单。如果存在错误(if(errorList.innerHTML !== '')) ，则我们停止表单提交(使用preventDefault())，并显示已创建的任何错误消息(见下文)。此机制意味着只有存在错误时才会显示错误消息，这是一个明确的可用性优势。

+ +

对于提交表单时没有填写值的每个输入，我们创建一个包含链接的列表项，并将其插入到 errorList 中。

+ +
function createLink(testItem) {
+  var listItem = document.createElement('li');
+  var anchor = document.createElement('a');
+  anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
+  anchor.href = '#' + testItem.input.name;
+  anchor.onclick = function() {
+    testItem.input.focus();
+  };
+  listItem.appendChild(anchor);
+  errorList.appendChild(listItem);
+}
+ +

每个链接都有双重用途 - 它不仅告诉您错误是什么，而且可以单击它/激活它直接跳转到有问题的输入元素，并且更正输入。

+ +
+

注意：此示例的 focus() 部分有点棘手。Chrome 和 Edge(以及较新版本的 IE)将在单击链接时聚焦元素，而无需onclick/focus()代码块。Safari 只会突出显示表单元素，并自行显示链接，因此需要 onclick/focus()代码块来实际聚焦它。Firefox 没有在上下文中正确的聚焦输入，因此 Firefox 用户目前无法利用这一点(尽管其他一切都正常)。Firefox 问题应该尽快会得到修复 — 现在的工作是使 Firefox 行为与其他浏览器的行为相同(参见 {{bug(277178)}})。

+
+ +

此外，errorField 被放置在源顺序的顶部(与 UI 中使用 CSS时相比，位置不同)，这意味着用户可以准确找出表单提交时的问题，并通过返回到页面的开头，来获悉有问题的输入元素。

+ +

最后，我们在演示中使用了一些 WAI-ARIA 属性，以帮助解决因为内容区域不断更新而未重新加载页面，导致的辅助功能问题(默认情况下,屏幕阅读器不会选取该属性或提醒用户)：

+ +
<div class="errors" role="alert" aria-relevant="all">
+  <ul>
+  </ul>
+</div>
+ +

我们将在下一篇文章中解释这些属性，其中将更详细地介绍 WAI-ARIA 。

+ +
+

注意：一些人可能会考虑这样一个事实，即 HTML5 表单有内置的验证机制,如required， min/minlength和max/maxlength属性(详细信息，请参阅 {{htmlelement("input")}}元素引用)。我们最终没有在演示中使用这些功能，因为不是所有的浏览器都支持(例如，仅 IE10 及以上版本支持，Safari不支持)。

+
+ +
+

注意：WebAIM 的Usable and Accessible Form Validation and Error Recovery提供了一些有关可访问表单验证的更多的有用信息。

+
+ +

其他 JavaScript 可访问性问题

+ +

在实现 JavaScript 和考虑可访问性时，还有其他需要注意的事项。一旦发现将会添加更多。

+ +

鼠标特定事件

+ +

正如你所知，客户端JavaScript使用事件处理程序，实现大多数用户交互，它允许我们运行函数以响应某些事件的发生。某些事件可能有辅助功能问题。您将遇到的主要示例是鼠标特定的事件,如鼠标悬停（ mouseover）、鼠标划出（mouseout）、双击（dblclick） 等。使用其他机制(如键盘控件)无法访问为这些事件而运行的功能。

+ +

为了缓解此类问题，您应该将这些事件与可以通过其他方式(所谓的设备独立事件处理程序)激活的类似事件相结合 —— focus和blur将为键盘用户提供可访问性。

+ +

让我们看一个示例：突出显示了何时可能有用。我们想要实现一个缩略图：当鼠标悬停或聚焦在图像上，可以放大图像（正如电子商务产品目录所展示的）。

+ +

我们做了一个非常简单的示例，您可以在mouse-and-keyboard-events.html 中找到(另请参阅源码)。该代码具有显示和隐藏放大图像的两个函数；它由以下几行行实现，这些行将它们设置为事件处理程序：

+ +
imgThumb.onmouseover = showImg;
+imgThumb.onmouseout = hideImg;
+
+imgThumb.onfocus = showImg;
+imgThumb.onblur = hideImg;
+ +

当鼠标指针在缩略图上悬停或者移开，将分别调用前两行代码。此时不允许我们通过键盘访问缩略图 —— 为了允许这一点，我们调用后两行代码，它们在图像聚焦和失焦时(聚焦停止)运行函数。这可以在图像加tab键实现，因为我们为图像的属性设置tabindex="0"。

+ +

Click 事件很有趣 ––听起来它依赖于鼠标，但是大多数的浏览器，在有焦点的链接或者表单元素上，按下 enter/return 之后，或者在触屏设备上点击一个元素，都将会激活 onclick 事件处理程序。但是，当您允许非默认可聚焦事件使用 tabindex 进行焦点处理时，默认情况下不起作用 ， 在这种情况下，您需要在按下确切键时进行专门检测(请参阅Building keyboard accessibility back in)。

+ +

总结

+ +

我们希望这篇文章在网页设计中关于CSS和JavaScript的无障碍问题提供了足够多的细节。

+ +

下一篇内容是，WAI-ARIA！

+ +
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
+ +
+

在本模块中

+ + +
diff --git "a/files/zh-cn/learn/accessibility/css\345\222\214javascript/index.html" "b/files/zh-cn/learn/accessibility/css\345\222\214javascript/index.html" deleted file mode 100644 index bdc3b01b2e..0000000000 --- "a/files/zh-cn/learn/accessibility/css\345\222\214javascript/index.html" +++ /dev/null @@ -1,367 +0,0 @@ ---- -title: CSS 和 JavaScript 无障碍最佳实践 -slug: learn/Accessibility/CSS和JavaScript -tags: - - CSS - - hiding - - unobtursive - - 初学者 - - 对比 - - 导航 - - 文章 - - 无障碍 - - 编码脚本 - - 颜色 -translation_of: Learn/Accessibility/CSS_and_JavaScript ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
- -

当CSS和JavaScript使用得当，很有可能改善Web访问体验，相反如果滥用的话，则会极大的损害可访问性。本文概述了一些应该被考虑的CSS和JavaScript 的最佳实践，这些实践保证了即使是复杂的内容也可以尽可能容易的被访问。

- - - - - - - - - - - - -
准备： -

基本的计算机读写能力，对HTML、CSS和JavaScript的基本理解，以及对可访问性的理解。

-
目标：熟悉在 Web 文档中适当地使用 CSS 和 JavaScript,以最大限度地提高可访问性,并且不损害它。
- -

CSS和JavaScript是可访问的吗？

- -

CSS和JavaScript对于作为HTML的可访问性没有直接的重要性，但是它们仍然能够帮助或破坏可访问性，这取决于它们是如何使用的。换句话说，重要的是考虑一些最佳实践建议，以确保使用CSS和JavaScript不会破坏文档的可访问性。

- -

CSS

- -

让我们从CSS开始吧！

- -

正确的语义和用户期望

- -

可以使用 CSS 使任何 HTML 元素看起来像任何东西,但这并不意味着您应该这样做。正如我们经常提到的HTML: A good basis for accessibility,您应该尽可能为作业使用适当的语义元素。如果不这样做,它可能会导致混乱和可用性问题,对每个人,尤其是残障用户。使用正确的语义与用户期望有很大的帮助 –– 元素的外观和功能会根据它们的功能进行某些方式的显示,而且用户期望这些常见的约定。

- -

例如,如果开发人员没有适当地使用标题元素标记内容,则屏幕阅读器用户无法通过标题元素导航页面。同样,如果对标题进行样式设置,则标题将失去其视觉目的,使其看起来不像标题。

- -

经验法则是,您可以更新页面功能的样式以适应您的设计,但不要更改它太多,使其不再按预期的外观或活动。以下各节总结了要考虑的主要 HTML 功能。

- -

“标准”的内容结构

- -

标题、段落、列表和页面的核心文本内容:

- -
<h1>Heading</h1>
-
-<p>Paragraph</p>
-
-<ul>
-  <li>My list</li>
-  <li>has two items.</li>
-</ul>
- -

一些典型的 CSS 如下所示:

- -
h1 {
-  font-size: 5rem;
-}
-
-p, li {
-  line-height: 1.5;
-  font-size: 1.6rem;
-}
- -

你应该：

- - - -

有关详细信息,请参阅 HTML text fundamentals和Styling text 。

- -

强调的文本

- -

内联标记,赋予其包裹的文本特别强调:

- -
<p>The water is <em>very hot</em>.</p>
-
-<p>Water droplets collecting on surfaces is called <strong>condensation</strong>.</p>
- -

您可能希望向强调的文本添加一些简单的颜色:

- -
strong, em {
-  color: #a60000;
-}
- -

但是,您很少需要以任何显著的方式设置强调元素的样式。粗体和斜体文本的标准约定非常容易识别,更改样式可能会导致混淆。有关强调的更多信息,请参阅Emphasis and importance。

- -

缩写

- -

允许缩写、首字母缩略词或初始化与其扩展关联的元素:

- -
<p>Web content is marked up using <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
- -

同样,您可能希望以某种简单方式设置样式:

- -
abbr {
-  color: #a60000;
-}
- -

缩写的公认样式约定是虚线下划线,偏离这一原则明显是不明智的。有关缩写的更多,请参阅Abbreviations。

- -

链接

- -

超链接 — 您到达新网站的方式:

- -
<p>Visit the <a href="https://www.mozilla.org">Mozilla homepage</a>.</p>
- -

一些非常简单的链接样式如下所示:

- -
a {
-  color: #ff0000;
-}
-
-a:hover, a:visited, a:focus {
-  color: #a60000;
-  text-decoration: none;
-}
-
-a:active {
-  color: #000000;
-  background-color: #a60000;
-}
- -

标准链接约定为下划线,标准状态为不同颜色(默认:蓝色),以前访问过链接时另一种颜色变化(默认:紫色),以及激活链接时的另一种颜色(默认:红色)。此外,当链接被鼠标悬停时,鼠标指针将变为指针图标,并且链接在聚焦(例如通过 tabbing)或激活时变成高亮。下图显示了 Firefox(虚线轮廓)和 Chrome(蓝色轮廓)中的高光:

- -

- -

- -

您可以使用链接样式进行创意,只要用户在与链接交互时不断提供反馈即可。当状态发生变化时,确实应该发生某些情况,并且不应删除指针光标或大纲 - 对于使用键盘控件的人来说,两者都是非常重要的辅助功能。

- -

表单元素

- -

允许用户将数据输入到网站的元素:

- -
<div>
-  <label for="name">Enter your name</label>
-  <input type="text" id="name" name="name">
-</div>
- -

您可以在我们的form-css.html 示例中看到一些很好的示例 CSS(查看示例)。

- -

您将为表单编写的大多数 CSS 将用于调整元素大小、排列标签和输入,以及让它们看起来整洁。

- -

但是,您不应过多偏离元素在聚焦时接收的预期视觉反馈表单,这与链接基本相同(见上文)。您可以设置焦点/悬停状态样式,使这种行为在浏览器中更加一致,或者更适合您的页面设计,但不要完全摆脱它 ––同样,人们依靠这些线索来帮助他们了解发生了什么。

- -

表格

- -

用于显示表格数据的表。

- -

您可以在table-css.html示例中看到表 HTML 和 CSS 的一个很好的简单示例(查看示例)。

- -

表 的CSS 通常使表更适合您的设计,看起来不那么难看。最好确保表标题醒目(通常使用粗体),并使用斑马条带化使不同的行更易于解析。

- -

颜色和颜色对比度

- -

为网站选择配色方案时,请确保文本(前景)颜色与背景颜色对比度良好。您的设计可能看起来很酷,但如果有视觉障碍(如色盲)的人无法阅读您的内容,则设计就无一好可做。

- -

有一个简单的方法来检查您的对比度是否足够大,不会引起问题。有许多对比检查工具可以在线输入您的前景和背景颜色,以检查它们。例如,WebAIM 的颜色对比度检查器易于使用,并说明了您需要满足有关颜色对比度的 WCAG 标准的内容。

- -
-

注意：高对比度还允许任何使用带有光面屏幕的智能手机或平板电脑的人在明亮的环境中(如阳光)更好地阅读页面。

-
- -

另一个提示是不要仅仅依靠颜色来提供路标/信息,因为对于那些看不到颜色的人来说,这没有什么用。例如,不要用红色标记所需的表单字段,而是用星号和红色标记它们。

- -

隐藏的东西

- -

在很多情况下,可视化设计需要并非同时显示所有内容。例如,在我们的Tabbed info box example (请参阅源码),我们有三个信息面板,但我们将它们放在彼此之上,并提供可以单击以显示每个选项卡的选项卡(也可以使用键盘 - 您也可以使用 Tab 和 Enter/Return以选择它们)。

- -

- -

屏幕阅读器用户并不关心这些内容 , 只要资源的顺序有意义,他们就对内容感到满意, 并且他们可以获得所有内容。绝对定位(如本示例所示)通常被视为隐藏内容以进行视觉效果的最佳机制之一,因为它不会阻止屏幕阅读器访问它。

- -

另一方面,不应使用 {{cssxref("visibility")}}:hidden或 {{cssxref("display")}}:none,因为它们会隐藏屏幕阅读器中的内容。当然,除非您希望从屏幕阅读器中隐藏此内容,这是有充分理由的。

- -
-

注意：Invisible Content Just for Screen Reader Users有围绕本主题的更多有用详细信息。

-
- -

接受用户覆盖样式

- -

接受用户覆盖您的样式

- -

用户可以使用自己的自定义样式覆盖样式,例如:

- - - -

用户可能出于各种原因执行此操作。视力受损的用户可能希望使其访问的所有网站上的文本变大，严重色缺乏（severe color difeciency）的用户可能希望将所有网站置于易于查看的高对比度颜色中。无论需要什么，您都应该对此感到满意，并使您的设计足够灵，以便此类更改在您的设计中起作用。例如，您可能希望确保主要内容区域可以处理较大的文本(可能它将开始滚动以允许查看所有文本)，并且不会只是隐藏它，或者完全中断。

- -

JavaScript

- -

JavaScript 还可能会中断可访问性，具体取决于其使用方式。

- -

现代 JavaScript 是一种功能强大的语言,如今我们可以使用它,从简单的内容和 UI 更新到成熟的 2D 和 3D 游戏。没有任何规则规定所有内容都必须对所有人 100% 可访问 ––您只需尽力而为，并使你的应用尽可能可访问。

- -

简单的内容和功能可以说是很容易使访问 - 例如文本,图像,表格,窗体和按钮,激活功能。正如我们在 HTML: A good basis for accessibility文中提到的,主要注意事项包括:

- - - -

我们还查看了如何使用 JavaScript 在缺少功能的地方构建的示例 , 请参阅 Building keyboard accessibility back in。这不是理想的 - 实际上,你应该只使用正确的元素为正确的作业 –– 但它表明在情况下它是可能的,由于某种原因,你不能控制使用的标记。提高非语义 JavaScript 支持的小部件的可访问性的另一种方法是使用 WAI-ARIA 为屏幕阅读器用户提供额外的语义。下一篇文章还将详细介绍这一点。

- -

复杂的功能,如3D游戏是不容易提高可访问性的 ––使用WebGL创建的复杂3D游戏将在 {{htmlelement("canvas")}}元素上呈现,该元素目前没有提供文本替代或其他信息的功能视障用户使用。可以说,这样的游戏并没有真正有这群人作为它的主要目标观众的一部分,这将是不合理的,期望你使它100%访问盲人,但你可以实现键盘控制,所以它可以使用非鼠标用户,并使配色方案的对比度足以让有颜色缺陷的人使用。

- -

太多JavaScript导致的问题

- -

过于依赖JavaScript会导致许多问题。有时你会看到一个网站，其中一切都已经用JavaScript完成 ––JavaScript生成HTML，CSS等等。随之而来，会出现各种可访问性问题，因此这样做是不建议的。

- -

正确的工作需要使用正确的元素和技术！仔细考虑：消息框是否必须用JavaScript 3D实现，纯文本是否就刚好。仔细考虑是否需要复杂的非标准表单小部件,或者文本输入是否就行。如果可能，不要使用 JavaScript 生成所有 HTML 内容。

- -

保持别抢眼

- -

在创建内容时，应牢记 unobtrusive JavaScript原则。unobtrusive JavaScript 的想法是，它应该尽可能用于增强功能，而不是完全构建它 - 基本功能最好在没有 JavaScript 的情况下正常工作，尽管人们认识到，这并不总是一个选项。但同样，它的大部分是尽可能使用内置的浏览器功能。

- -

unobtrusive JavaScript 使用的良好示例包括：

- - - -

例如，我们编写了一个快速而糟糕的客户端客户端表单验证示例 — 请参form-validation.html(see the demo live)。在示例中，你会看到一个简单的表格；当您尝试提交一个或两个字段为空的表单时，提交将失败，并且会出现一个错误消息框，告诉您出了什么问题。

- -

这种表单验证并不引人注目 - 在 JavaScript 不可用的情况下，您仍然可以很好的使用表单，并且任何合理的表单实现都将激活服务器端验证，因为恶意用户很容易绕过客户端验证(例如，通过在浏览器中关闭 JavaScript)。客户端验证对于报告错误仍然非常有用 ––用户可以立即了解他们所犯的错误，而不必等待到服务器的往返和页面重新加载。这是一个明确的可用性优势。

- -
-

注意：此简单示例中尚未实现服务器端验证。

-
- -

我们使此表单验证非常容易访问。我们使用 {{htmlelement("label")}}元素来确保表单标签明确链接到其输入，因此屏幕阅读器可以一起读取它们：

- -
<label for="name">Enter your name:</label>
-<input type="text" name="name" id="name">
- -

我们仅在提交表单时执行验证— 这样，我们就不会过于频繁地更新 UI，并可能混淆屏幕阅读器(可能还有其他)用户：

- -
form.onsubmit = validate;
-
-function validate(e) {
-  errorList.innerHTML = '';
-  for(var i = 0; i < formItems.length; i++) {
-    var testItem = formItems[i];
-    if(testItem.input.value === '') {
-      errorField.style.left = '360px';
-      createLink(testItem);
-    }
-  }
-
-  if(errorList.innerHTML !== '') {
-    e.preventDefault();
-  }
-}
- -
-

注意：在此示例中，我们使用绝对定位而不是其他方法(如可见性或显示)隐藏和显示错误消息框，因为它不会干扰屏幕阅读器从中读取内容。

-
- -

实际表单验证会比这复杂得多 - 您需要检查输入的名称实际上看起来像一个名称，输入的年龄实际上是一个数字，并且与真实情况符合(例如，不是负数或四位数字)。在这里，我们刚刚实现了一个简单的验证，是否将值填充到每个输入字段(if(testItem.input.value === ''))。

- -

执行验证后，如果测试通过，则提交表单。如果存在错误(if(errorList.innerHTML !== '')) ，则我们停止表单提交(使用preventDefault())，并显示已创建的任何错误消息(见下文)。此机制意味着只有存在错误时才会显示错误消息，这是一个明确的可用性优势。

- -

对于提交表单时没有填写值的每个输入，我们创建一个包含链接的列表项，并将其插入到 errorList 中。

- -
function createLink(testItem) {
-  var listItem = document.createElement('li');
-  var anchor = document.createElement('a');
-  anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
-  anchor.href = '#' + testItem.input.name;
-  anchor.onclick = function() {
-    testItem.input.focus();
-  };
-  listItem.appendChild(anchor);
-  errorList.appendChild(listItem);
-}
- -

每个链接都有双重用途 - 它不仅告诉您错误是什么，而且可以单击它/激活它直接跳转到有问题的输入元素，并且更正输入。

- -
-

注意：此示例的 focus() 部分有点棘手。Chrome 和 Edge(以及较新版本的 IE)将在单击链接时聚焦元素，而无需onclick/focus()代码块。Safari 只会突出显示表单元素，并自行显示链接，因此需要 onclick/focus()代码块来实际聚焦它。Firefox 没有在上下文中正确的聚焦输入，因此 Firefox 用户目前无法利用这一点(尽管其他一切都正常)。Firefox 问题应该尽快会得到修复 — 现在的工作是使 Firefox 行为与其他浏览器的行为相同(参见 {{bug(277178)}})。

-
- -

此外，errorField 被放置在源顺序的顶部(与 UI 中使用 CSS时相比，位置不同)，这意味着用户可以准确找出表单提交时的问题，并通过返回到页面的开头，来获悉有问题的输入元素。

- -

最后，我们在演示中使用了一些 WAI-ARIA 属性，以帮助解决因为内容区域不断更新而未重新加载页面，导致的辅助功能问题(默认情况下,屏幕阅读器不会选取该属性或提醒用户)：

- -
<div class="errors" role="alert" aria-relevant="all">
-  <ul>
-  </ul>
-</div>
- -

我们将在下一篇文章中解释这些属性，其中将更详细地介绍 WAI-ARIA 。

- -
-

注意：一些人可能会考虑这样一个事实，即 HTML5 表单有内置的验证机制,如required， min/minlength和max/maxlength属性(详细信息，请参阅 {{htmlelement("input")}}元素引用)。我们最终没有在演示中使用这些功能，因为不是所有的浏览器都支持(例如，仅 IE10 及以上版本支持，Safari不支持)。

-
- -
-

注意：WebAIM 的Usable and Accessible Form Validation and Error Recovery提供了一些有关可访问表单验证的更多的有用信息。

-
- -

其他 JavaScript 可访问性问题

- -

在实现 JavaScript 和考虑可访问性时，还有其他需要注意的事项。一旦发现将会添加更多。

- -

鼠标特定事件

- -

正如你所知，客户端JavaScript使用事件处理程序，实现大多数用户交互，它允许我们运行函数以响应某些事件的发生。某些事件可能有辅助功能问题。您将遇到的主要示例是鼠标特定的事件,如鼠标悬停（ mouseover）、鼠标划出（mouseout）、双击（dblclick） 等。使用其他机制(如键盘控件)无法访问为这些事件而运行的功能。

- -

为了缓解此类问题，您应该将这些事件与可以通过其他方式(所谓的设备独立事件处理程序)激活的类似事件相结合 —— focus和blur将为键盘用户提供可访问性。

- -

让我们看一个示例：突出显示了何时可能有用。我们想要实现一个缩略图：当鼠标悬停或聚焦在图像上，可以放大图像（正如电子商务产品目录所展示的）。

- -

我们做了一个非常简单的示例，您可以在mouse-and-keyboard-events.html 中找到(另请参阅源码)。该代码具有显示和隐藏放大图像的两个函数；它由以下几行行实现，这些行将它们设置为事件处理程序：

- -
imgThumb.onmouseover = showImg;
-imgThumb.onmouseout = hideImg;
-
-imgThumb.onfocus = showImg;
-imgThumb.onblur = hideImg;
- -

当鼠标指针在缩略图上悬停或者移开，将分别调用前两行代码。此时不允许我们通过键盘访问缩略图 —— 为了允许这一点，我们调用后两行代码，它们在图像聚焦和失焦时(聚焦停止)运行函数。这可以在图像加tab键实现，因为我们为图像的属性设置tabindex="0"。

- -

Click 事件很有趣 ––听起来它依赖于鼠标，但是大多数的浏览器，在有焦点的链接或者表单元素上，按下 enter/return 之后，或者在触屏设备上点击一个元素，都将会激活 onclick 事件处理程序。但是，当您允许非默认可聚焦事件使用 tabindex 进行焦点处理时，默认情况下不起作用 ， 在这种情况下，您需要在按下确切键时进行专门检测(请参阅Building keyboard accessibility back in)。

- -

总结

- -

我们希望这篇文章在网页设计中关于CSS和JavaScript的无障碍问题提供了足够多的细节。

- -

下一篇内容是，WAI-ARIA！

- -
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
- -
-

在本模块中

- - -
diff --git a/files/zh-cn/learn/accessibility/html/index.html b/files/zh-cn/learn/accessibility/html/index.html new file mode 100644 index 0000000000..beeb753338 --- /dev/null +++ b/files/zh-cn/learn/accessibility/html/index.html @@ -0,0 +1,542 @@ +--- +title: 'HTML: 为可访问性提供一个良好的基础' +slug: 'learn/Accessibility/HTML:为可访问性提供一个良好的基础' +translation_of: Learn/Accessibility/HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
+ +

在网页开发的过程中，用正确的HTML标签来表达正确的意图，可以提升网页的可访问性。这篇文章将会详细介绍如何最大化地提升网页的可访问性。

+ + + + + + + + + + + + +
前提:有一定的HTML基础(可参阅 HTML入门)，理解什么是可访问性。
目标:了解可访问性为网页带来的好处和如何在网页中进行实现。
+ +

HTML 和可访问性

+ +

在学习HTML的过程当中，经常可以看到这样一个主题：HTML语义化的重要性。意思是指我们应尽可能地用正确的HTML标签来表达正确的意图。

+ +

你可能在想，为什么语义化对于一个网页来说如此重要。总的来说，正确的语义化可使 CSS 和  JavaScript 更为便利地操作网页的样式和行为。例如，一个用来操作视频播放的按钮可以写成这样一种形式:

+ +
<div>Play video</div>
+ +

接下来你将看到一种更好的写法，它使用了正确的HTML标签，看上去更加合理:

+ +
<button>Play video</button>
+ +

<button>标签不仅提供了按钮的样式（虽然有时会重新编写样式），还提供了键盘的可访问性，如：使用tab键更换按钮，使用回车键点击按钮。

+ +

如果你在项目的一开始就使用HTML语义化，不仅不会花更多的时间，而且又有以下的可访问性优点：

+ +
    +
  1. 更便于开发 — 如上所述，你可以使HTML更易于理解，并且可以毫不费力的获得一些功能。
    2. +
  2. 更适配移动端 — 语义化的HTML文件比非语义化的HTML文件更加轻便，并且更易于响应式开发。
    3. +
  3. 更便于SEO优化 — 比起使用非语义化的<div>标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。
    4. +
+ +

让我们来继续学习HTML语义化实现细则。

+ +
+

注意:在本地计算机上设置屏幕阅读器是一个不错的主意，因此您可以对下面显示的示例进行一些测试。更多内容请查阅 Screenreaders guide。

+
+ +

良好的语义

+ +

上面我们讨论了语义化的重要性以及为什么我们要使用正确的HTML标签来表达正确的意图。语义化是我们不可忽视的一部分，因为它往往决定了网页的可访问性。

+ +

在网络上，事实上人们用HTML标签做一些非常奇怪的事情。人们滥用一些即将废弃或已经废弃的标签。不管在什么情况下，我们都应该将这些错误的代码改正过来。

+ +

话虽如此，但是有些情况我们往往不能摆脱错误的标签，例如一个网页是从服务端的框架生成的，或者网页上存在第三方的内容（如广告），这些都是我们所不能控制的。

+ +

我们的目标并不是“全有或全无”，实际上，你所做的每一个改进都可以提升网页的可访问性。

+ +

文本内容

+ +

对于屏幕阅读器用户来讲，最佳辅助功能之一是拥有标题，段落，列表等内容的良好结构。一个好的语义示例可能如下所示：

+ +
<h1>My heading</h1>
+
+<p>This is the first section of my document.</p>
+
+<p>I'll add another paragraph here too.</p>
+
+<ol>
+  <li>Here is</li>
+  <li>a list for</li>
+  <li>you to read</li>
+</ol>
+
+<h2>My subheading</h2>
+
+<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>
+
+<h2>My 2nd subheading</h2>
+
+<p>This is the second subsection of my content. I think is more interesting than the last one.</p>
+ +

我们已经准备了一个更长的文本版本，供您试用于屏幕阅读器（请查看 good-semantics.html）。如果您尝试在此过程中导航，您将看到这非常容易导航：

+ +
    +
  1. 屏幕阅读器会在您浏览内容时读取每个标题，通知您标题是什么，段落是什么等。
    2. +
  2. 它在每个元素之后停止，让你以任何适合你的速度前进。
    3. +
  3. 你可以在许多屏幕阅读器中跳到下一个/上一个标题。
    4. +
  4. 你还可以在许多屏幕阅读器中显示所有标题的列表，使您可以像使用便利的目录一样使用它们以查找特定内容。
    5. +
+ +

人们有时会使用表现性 HTML 和换行符来编写标题，段落等，如下所示：

+ +
<font size="7">My heading</font>
+<br><br>
+This is the first section of my document.
+<br><br>
+I'll add another paragraph here too.
+<br><br>
+1. Here is
+<br><br>
+2. a list for
+<br><br>
+3. you to read
+<br><br>
+<font size="5">My subheading</font>
+<br><br>
+This is the first subsection of my document. I'd love people to be able to find this content!
+<br><br>
+<font size="5">My 2nd subheading</font>
+<br><br>
+This is the second subsection of my content. I think is more interesting than the last one.
+ +

如果你使用屏幕阅读器试用更长内容的版本（请查阅 bad-semantics.html），你不会有一个很好的经验 — 屏幕阅读器没有任何东西可以用作路标，所以你无法检索有用的目录，整个页面被看作一个巨大的块，所以它只是一次读出所有的内容。

+ +

除了可访问性之外，还有其他一些问题 - 使用CSS设计内容的风格更难，或者使用JavaScript来操作它比较困难，因为没有可用作选择器的元素。

+ +

使用通俗易懂的语言

+ +

你使用的语言也会影响可访问性。一般来说，你应该使用不太复杂的清晰语言，不要使用不必要的行话或俚语。这不仅有利于有认知或其他残疾的人；它有利于那些没有用母语写作的读者，年轻人...事实上是每个人！除此之外，你应该尽量避免使用没有被屏幕阅读器清楚读出的语言和字符。例如:

+ + + +

页面布局

+ +

在旧时代，人们曾经使用HTML表格创建页面布局 - 使用不同的表格单元格来包含页眉，页脚，边栏，主要内容栏等。这不是一个好主意，因为屏幕阅读器可能会读出给人造成困惑的结果，特别是如果布局复杂，并且有许多嵌套表格的话。

+ +

试试我们的例子table-layout.html，它看起来像这样：

+ +
<table width="1200">
+      <!-- main heading row -->
+      <tr id="heading">
+        <td colspan="6">
+
+          <h1 align="center">Header</h1>
+
+        </td>
+      </tr>
+      <!-- nav menu row  -->
+      <tr id="nav" bgcolor="#ffffff">
+        <td width="200">
+          <a href="#" align="center">Home</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Our team</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Projects</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Contact</a>
+        </td>
+        <td width="300">
+          <form width="300">
+            <input type="search" name="q" placeholder="Search query" width="300">
+          </form>
+        </td>
+        <td width="100">
+          <button width="100">Go!</button>
+        </td>
+      </tr>
+      <!-- spacer row -->
+      <tr id="spacer" height="10">
+        <td>
+
+        </td>
+      </tr>
+      <!-- main content and aside row -->
+      <tr id="main">
+        <td id="content" colspan="4" bgcolor="#ffffff">
+
+          <!-- main content goes here -->
+        </td>
+        <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
+          <h2>Related</h2>
+
+          <!-- aside content goes here -->
+
+        </td>
+      </tr>
+      <!-- spacer row -->
+      <tr id="spacer" height="10">
+        <td>
+
+        </td>
+      </tr>
+      <!-- footer row -->
+      <tr id="footer" bgcolor="#ffffff">
+        <td colspan="6">
+          <p>©Copyright 2050 by nobody. All rights reversed.</p>
+        </td>
+      </tr>
+    </table>
+ +

如果您尝试使用屏幕阅读器浏览此内容，它可能会告诉您需要查看一个表格（尽管某些屏幕阅读器可以猜测表格布局和数据表格之间的区别）。 然后，您可能（取决于您使用的屏幕阅读器）必须需要进入到表格对象中，并单独地查看表格的内容，然后再次离开表格，以继续浏览其他内容。

+ +

用表格布局网页是过去旧时代的遗迹 - 在“CSS”在浏览器中并不普遍被支持时，它们是有意义的，但是它们会为屏幕阅读器用户造成混淆，并且由于许多其他原因变得很糟糕（滥用表格，可能因此需要更多的标记， 使设计更不灵活）。不要这样做！

+ +

您可以通过将您之前的体验与 更现代的网站结构示例 进行比较，来验证这些声明，该示例如下所示：

+ +
<header>
+  <h1>Header</h1>
+</header>
+
+<nav>
+  <!-- main navigation in here -->
+</nav>
+
+<!-- Here is our page's main content -->
+<main>
+
+  <!-- It contains an article -->
+  <article>
+    <h2>Article heading</h2>
+
+    <!-- article content in here -->
+  </article>
+
+  <aside>
+    <h2>Related</h2>
+
+    <!-- aside content in here -->
+  </aside>
+
+</main>
+
+<!-- And here is our main footer that is used across all the pages of our website -->
+
+<footer>
+  <!-- footer content in here -->
+</footer>
+ + + +

如果您使用屏幕阅读器阅读更现代的结构示例，则会看到布局标记不再会妨碍内容的读取。 它在代码大小方面也更加精简和小巧，这意味着代码更容易维护，并且用户下载的带宽更少（特别适合慢速连接的用户）。

+ +

创建布局时的另一个考虑因素是使用HTML5语义元素，如上例所示（请参阅 此内容部分） - 您只能使用嵌套的 {{htmlelement("div")}} 元素创建布局，但最好使用适当的分段元素包裹您的主导航（{{htmlelement("nav")}}），footer ({{htmlelement("footer")}}），重复内容单元  ({{htmlelement("article")}}) 等 。这些为屏幕阅读器（和其他工具）提供额外的语义，为用户提供有关他们正在浏览的内容的额外信息（请参阅 屏幕阅读器支持的新的HTML5章节元素 ，了解屏幕阅读器的支持是什么样的原理）。

+ +
+

注意：除了您的内容具有良好的语义和有吸引力的布局之外，它的源代码顺序应该是合理的 - 您可以随时将它放在您想要使用CSS的位置，但是您应该先从源代码开始， 如此这样，屏幕阅读器读取给他们的内容将会非常便于理解。

+
+ +

UI 控制

+ +

通过UI控件，我们指的是与用户交互的Web文档的主要部分 - 通常是按钮，链接和表单控件。 在本节中，我们将介绍创建此类控件时要注意的基本可访问性问题。 稍后关于WAI-ARIA和多媒体的文章将着眼于UI可访问性的其他方面。

+ +

UI控件可访问性的一个关键方面是，默认情况下，浏览器允许用户通过键盘操作它们。 您可以使用我们的 native-keyboard-accessibility.html 示例（请参阅 源代码 ）。尝试此操作 - 在新选项卡中打开此项，然后尝试按Tab键; 几次按下后，您应该看到标签焦点开始移动到不同的元素; 在每个浏览器中，获得焦点元素都会有一个“突出显示“的默认样式（它在不同浏览器之间略有不同），以便您可以确定当前哪些元素获得焦点。

+ +

+ +

接着你可以按Enter / Return来追踪当前获得焦点的链接，或者按按钮来实现（我们已经使用JavaScript使按钮同时显示提示消息），或者开始在文本输入中输入文本（其他表单元素具有不同的控件， 例如 {{htmlelement("select")}} 元素拥有自己的显示选项， 可以使用向上和向下箭头键进行循环）。

+ +
+

注意：不同的浏览器可能有不同的键盘控制选项。 请参阅 使用本机键盘辅助功能 获取更多详细信

+
+ +

实际上，您只需使用适当的元素即可免费获得此功能，例如，

+ +
<h1>Links</h1>
+
+<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>
+
+<p>Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
+
+<h2>Buttons</h2>
+
+<p>
+  <button data-message="This is from the first button">Click me!</button>
+  <button data-message="This is from the second button">Click me too!</button>
+  <button data-message="This is from the third button">And me!</button>
+</p>
+
+<h2>Form</h2>
+
+<form>
+  <div>
+    <label for="name">Fill in your name:</label>
+    <input type="text" id="name" name="name">
+  </div>
+  <div>
+    <label for="age">Enter your age:</label>
+    <input type="text" id="age" name="age">
+  </div>
+  <div>
+    <label for="mood">Choose your mood:</label>
+    <select id="mood" name="mood">
+      <option>Happy</option>
+      <option>Sad</option>
+      <option>Angry</option>
+      <option>Worried</option>
+    </select>
+  </div>
+</form>
+ + + +

这意味着适当地使用链接，按钮，表单元素和标签（包括表单控件的 {{htmlelement("label")}} 元素）。

+ +

然而，人们有时候会用HTML做奇怪的事情。 例如，您有时会看到使用 {{htmlelement("div")}} 标记的按钮，例如：

+ +
<div data-message="This is from the first button">Click me!</div>
+<div data-message="This is from the second button">Click me too!</div>
+<div data-message="This is from the third button">And me!</div>
+ +

但是不建议使用这样的代码 - 你会立即失去本机键盘的可访问性。但如果你使用了{{htmlelement("button")}} 元素，你将可以通过键盘控制。 此外你也将不会获得任何的按钮默认拥有的CSS样式。

+ +

重新建立键盘的可访问性

+ +

重新添加这些优点需要一些工作（您可以在我们的 fake-div-buttons.html 示例中使用示例代码 - 另请参阅 源代码 ）。 在这里，我们通过赋予每个 <div> 按钮属性tabindex =“0” 来使它能够被聚焦（包括通过选项卡）：

+ +
<div data-message="This is from the first button" tabindex="0">Click me!</div>
+<div data-message="This is from the second button" tabindex="0">Click me too!</div>
+<div data-message="This is from the third button" tabindex="0">And me!</div>
+ +

基本上，{{htmlattrxref("tabindex")}} 属性主要用于允许 tabbable 元素具有自定义Tab键顺序（以正数顺序指定），而不是仅按其默认源顺序进行标记。 这几乎总是一个糟糕的主意，因为它可能会造成重大混乱。 例如，如果布局以与源代码非常不同的视觉顺序显示事物，而且你想让事情更符合逻辑。 这里 tabindex 有另外两个选项：

+ + + +

虽然上面的添加允许我们用 tab 选择按钮，但它不允许我们通过 Enter / Return 键来激活它们。 要做到这一点，我们必须添加下面的 JS 小绝招（JavaScript trickery）：

+ +
document.onkeydown = function(e) {
+  if(e.keyCode === 13) { // The Enter/Return key
+    document.activeElement.onclick(e);
+  }
+};
+ +

在这里，我们向文档对象 document 添加一个侦听器，以检测什么时候键盘上按下按钮 我们通过事件对象 event object 的 keyCode 属性,检查用户按下了哪个按钮; 如果它是与 Return / Enter 匹配的关键代码，我们通过按钮的 onclick 函数，即 document.activeElement.onclick() 。activeElement 提供给我们页面当前被focused的元素。

+ +

我们使用document.activeElement.onclick（）运行存储在按钮的onclick处理函数中的函数。 activeElement 为我们提供了当前关注页面的元素。

+ +
+

注意：您应该记住，只有通过事件处理程序属性（例如onclick）设置原始事件处理程序，此技巧才会起作用。 addEventListener 将不起作用。

+
+ +

这对于重新构建功能而言是一个额外的麻烦。而且这肯定会带来其他问题。 使用正确的元素处理正确的工作是非常重要的。（Better to just use the right element for the right job in the first place.）

+ +

有意义的文字标签

+ +

用户界面控件的 文本标签 对所有用户都非常有用，但是对于残疾用户来说，让他们正确使用尤其重要。

+ +

你应该确保你的按钮和链接文本标签是可以理解和独特的。 不要使用“点击这里”（"Click here"）此类的标签，因为屏幕阅读器用户有时会列出按钮和表格控件列表。 以下屏幕截图显示了我们的控件在Mac上由 VoiceOver 列出。

+ +

+ +

确保您的标签在上下文中有意义，可以单独阅读，也可以在他们所在的段落的上下文中进行阅读。例如，下面显示了良好链接文本的示例：

+ +
<p>Whales are really awesome creatures. <a href="whales.html">Find out more about whales</a>.</p>
+ +

但这是不好的链接文字：

+ +
<p>Whales are really awesome creatures. To find more out about whales, <a href="whales.html">click here</a>.</p>
+ +
+

注意：您可以在我们的 创建超链接 文章中找到更多关于链接实现和最佳实践的信息。 您还可以在 good-links.html 和 bad-links.html 中看到一些好的和不好的例子。

+
+ +

表单标签也很重要，可以让您了解您需要输入每个表单输入的内容。 以下似乎是一个足够合理的例子：

+ +
Fill in your name: <input type="text" id="name" name="name">
+ +

但是，这对于残疾用户来说并不是那么有用。 在上面的示例中，没有任何内容将标签与表单输入明确关联。因此如果看不到它，请让用户明确该如何填写。 如果您使用某些屏幕阅读器访问该屏幕，则只能按照“编辑文本”（“edit text”）的方式给出说明。

+ +

以下是一个更好的例子：

+ +
<div>
+  <label for="name">Fill in your name:</label>
+  <input type="text" id="name" name="name">
+</div>
+ +

通过这样的代码，标签将清晰地与输入相关联;  描述将更像如下这种形式：“填写你的姓名：编辑文本”。

+ +

+ +

作为额外的好处，在大多数将标签与表单输入相关联的浏览器中，您可以单击标签来 选择/激活 表单元素。 这给输入一个更大的可选中区域，使其更容易选择。

+ +
+

注意：您可以在 good-form.html 和 bad-form.html 中看到一些好的和不好的表单示例。

+
+ +

可访问的表格

+ +

基本的表格（译者注：“data table”被翻译成“表格”）可以用非常简单的标记来编写，例如：

+ +
<table>
+  <tr>
+    <td>Name</td>
+    <td>Age</td>
+    <td>Gender</td>
+  </tr>
+  <tr>
+    <td>Gabriel</td>
+    <td>13</td>
+    <td>Male</td>
+  </tr>
+  <tr>
+    <td>Elva</td>
+    <td>8</td>
+    <td>Female</td>
+  </tr>
+  <tr>
+    <td>Freida</td>
+    <td>5</td>
+    <td>Female</td>
+  </tr>
+</table>
+ +

但是这有问题 - 屏幕阅读器用户无法将行或列作为数据分组关联在一起。 要做到这一点，你需要知道标题行是什么，以及它们是否在行，列等标题上。这只能在上面的表中以可视化方式完成（参见 bad-table.html ，并自己尝试这个例子）。

+ +

现在看看我们的 punk bands table example  - 您可以在这里看到一些辅助工具（accessibility aids）：

+ + + +
+

注意：有关可访问数据表的更多详细信息，请参阅我们的 HTML表格高级功能和可访问性 文章。

+
+ +

文本替代品

+ +

尽管文本内容本身是可访问的，但对于多媒体内容而言也不一定是这样 - 图像/视频内容不能被视觉障碍人士看到，并且听觉障碍人士不能听到音频内容。 稍后我们将在可访问多媒体文章中详细介绍视频和音频内容，但对于本文，我们将探讨低微（humble ）的 {{htmlelement("img")}} 元素的可访问性。

+ +

我们编写了一个简单的例子， accessible-image.html ，它具有相同图像的四个副本：

+ +
<img src="dinosaur.png">
+
+<img src="dinosaur.png"
+     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
+
+<img src="dinosaur.png"
+     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
+     title="The Mozilla red dinosaur">
+
+
+<img src="dinosaur.png" aria-labelledby="dino-label">
+
+<p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p>
+
+ +

第一张图片，当用屏幕阅读器查看时，并不真正为用户提供很多帮助 - 例如VoiceOver会读出 “/dinosaur.png，image” 。 它读出文件名以尝试提供一些帮助。 在这个例子中，用户至少知道它是某种恐龙，但通常文件可以用机器生成的文件名（例如来自数码相机）上传，这些文件名可能不会提供图像内容的信息。

+ +
+

注意：这就是为什么你不应该在图像中包含文本内容 - 屏幕阅读器根本无法访问它。 还有其他的缺点 - 你不能选择它并复制/粘贴它。不要这样做！

+
+ +

当屏幕阅读器遇到第二张图像时，它会读出完整的 alt 属性 - “红色霸王龙雷克斯：一只像人一样直立的双腿恐龙，手臂小，头部大而锋利。”

+ +

这突出了不仅在所谓的替代文本不可用的情况下使用有意义的文件名的重要性，而且还确保尽可能地在替换属性 alt 中提供替代文本。 请注意，alt 属性的内容应始终提供图像的直接表示以及它在视觉上传达的内容。 任何个人知识或额外描述都不应该包含在这里，因为它对以前没有碰到过这个图像的人没有用处。

+ +

需要考虑的一件事是，你的图片是否在你的内容中有意义，或者它们纯粹是为了视觉装饰，所以没有意义。 如果它们是装饰性的，最好将它们包含在页面中作为CSS背景图像。

+ +
+

注意：请阅读 HTML中的图片 和 响应式图片 以获得更多关于图片实施和最佳做法的信息。

+
+ +

如果您确实想要提供额外的上下文信息，则应该将其放在图像周围的文本中，或放置在“标题” title 属性中，如上所示。 在这种情况下，大多数屏幕阅读器会读出替代文本，标题属性和文件名。 此外，鼠标滑过时，浏览器会将 title 的内容作为工具提示的形式显示出来。

+ + + + + +

+ +

我们再来看看第四种方法：

+ +
<img src="dinosaur.png" aria-labelledby="dino-label">
+
+<p id="dino-label">The Mozilla red Tyrannosaurus ... </p>
+ +

在这种情况下，我们不使用“alt”属性 —— 相反，我们已经将图像的描述作为常规文本段落给出，并给出它的“id”，然后使用 “aria-labelledby” 属性并链接到对应“id”，它使屏幕阅读器将该段落用作该图像的替代文本/标签。 如果您想将相同的文本用作多个图像的标签，这是特别有用的 - 这是使用“alt”不可能实现的。

+ +
+

注意：“aria-labelledby”是 WAI-ARIA 规范的一部分，它允许开发人员在其标记中添加额外的语义，以提高屏幕阅读器的可访问性。 要了解更多关于它是如何工作的，请阅读我们的 WAI-ARIA Basics 文章。

+
+ + + +

其他文字替代机制

+ +

图像还有其他机制可用于提供描述性文字。 例如，有一个 longdesc 属性用于指向包含图像的扩展描述的单独Web文档，例如：

+ +
<img src="dinosaur.png" longdesc="dino-info.html">
+ +

这听起来像个好主意，尤其是对于像大图表这样的信息图，其中有很多信息可能可以表示为可访问的数据表（请参阅上一部分）。 但是，屏幕阅读器不支持longdesc，非屏幕阅读器用户完全无法访问内容。 将长描述包含在与图像相同的页面中，或者通过常规链接链接到它可能会更好。

+ +

HTML5包含两个新元素 -  {{htmlelement("figure")}} 和{{htmlelement("figcaption")}} ，它们应该将某种形象（可以是任何东西，不一定是图像）与数字标题相关联：

+ +
<figure>
+  <img src="dinosaur.png" alt="The Mozilla Tyrannosaurus">
+  <figcaption>A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</figcaption>
+</figure>
+ +

不幸的是，大多数屏幕阅读器似乎并没有将图形标题与他们的图形相关联，但是元素结构对CSS样式非常有用，并且它提供了一种方法在源代码中将图像放置在旁边。

+ +

空alt属性

+ +
<h3>
+  <img src="article-icon.png" alt="">
+  Tyrannosaurus Rex: the king of the dinosaurs
+</h3>
+ +

可能有时候图像被包含在页面的设计中，但其主要目的是用于视觉装饰。 在上面的代码示例中，您会注意到图像的“alt”属性为空 - 这是为了让屏幕阅读器识别图像，但不试图描述图像（阅读器只是说 “图像” 等类似的语句）。

+ +

使用空白“alt”而不包含它的原因是因为如果没有提供“alt”，许多屏幕阅读器会公布整个图像URL。 在上面的示例中，图像充当与其关联的标题的视觉装饰。 在这种情况下，以及在图像只是装饰并且没有内容值的情况下，您应该在图像上放置一个空白的“alt”。 另一种选择是使用 aria role 属性 role =“presentation” - 这也会阻止屏幕阅读器读出替代文本。

+ +
+

注意：如果可能的话，你应该使用CSS来显示只有装饰的图像。

+
+ +

总结Summary

+ +

您现在应该精通编写大多数场合可访问的HTML。 我们的 WAI-ARIA 基础知识文章也将填补这些知识中的一些空白，但本文已经关注了此基础知识。 接下来，我们将探索 CSS 和 JavaScript ，以及可访问性如何受其好坏影响。

+ + + +

{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}

+ + + +

在此模块

+ + diff --git "a/files/zh-cn/learn/accessibility/html_colon_\344\270\272\345\217\257\350\256\277\351\227\256\346\200\247\346\217\220\344\276\233\344\270\200\344\270\252\350\211\257\345\245\275\347\232\204\345\237\272\347\241\200/index.html" "b/files/zh-cn/learn/accessibility/html_colon_\344\270\272\345\217\257\350\256\277\351\227\256\346\200\247\346\217\220\344\276\233\344\270\200\344\270\252\350\211\257\345\245\275\347\232\204\345\237\272\347\241\200/index.html" deleted file mode 100644 index beeb753338..0000000000 --- "a/files/zh-cn/learn/accessibility/html_colon_\344\270\272\345\217\257\350\256\277\351\227\256\346\200\247\346\217\220\344\276\233\344\270\200\344\270\252\350\211\257\345\245\275\347\232\204\345\237\272\347\241\200/index.html" +++ /dev/null @@ -1,542 +0,0 @@ ---- -title: 'HTML: 为可访问性提供一个良好的基础' -slug: 'learn/Accessibility/HTML:为可访问性提供一个良好的基础' -translation_of: Learn/Accessibility/HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
- -

在网页开发的过程中，用正确的HTML标签来表达正确的意图，可以提升网页的可访问性。这篇文章将会详细介绍如何最大化地提升网页的可访问性。

- - - - - - - - - - - - -
前提:有一定的HTML基础(可参阅 HTML入门)，理解什么是可访问性。
目标:了解可访问性为网页带来的好处和如何在网页中进行实现。
- -

HTML 和可访问性

- -

在学习HTML的过程当中，经常可以看到这样一个主题：HTML语义化的重要性。意思是指我们应尽可能地用正确的HTML标签来表达正确的意图。

- -

你可能在想，为什么语义化对于一个网页来说如此重要。总的来说，正确的语义化可使 CSS 和  JavaScript 更为便利地操作网页的样式和行为。例如，一个用来操作视频播放的按钮可以写成这样一种形式:

- -
<div>Play video</div>
- -

接下来你将看到一种更好的写法，它使用了正确的HTML标签，看上去更加合理:

- -
<button>Play video</button>
- -

<button>标签不仅提供了按钮的样式（虽然有时会重新编写样式），还提供了键盘的可访问性，如：使用tab键更换按钮，使用回车键点击按钮。

- -

如果你在项目的一开始就使用HTML语义化，不仅不会花更多的时间，而且又有以下的可访问性优点：

- -
    -
  1. 更便于开发 — 如上所述，你可以使HTML更易于理解，并且可以毫不费力的获得一些功能。
    2. -
  2. 更适配移动端 — 语义化的HTML文件比非语义化的HTML文件更加轻便，并且更易于响应式开发。
    3. -
  3. 更便于SEO优化 — 比起使用非语义化的<div>标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。
    4. -
- -

让我们来继续学习HTML语义化实现细则。

- -
-

注意:在本地计算机上设置屏幕阅读器是一个不错的主意，因此您可以对下面显示的示例进行一些测试。更多内容请查阅 Screenreaders guide。

-
- -

良好的语义

- -

上面我们讨论了语义化的重要性以及为什么我们要使用正确的HTML标签来表达正确的意图。语义化是我们不可忽视的一部分，因为它往往决定了网页的可访问性。

- -

在网络上，事实上人们用HTML标签做一些非常奇怪的事情。人们滥用一些即将废弃或已经废弃的标签。不管在什么情况下，我们都应该将这些错误的代码改正过来。

- -

话虽如此，但是有些情况我们往往不能摆脱错误的标签，例如一个网页是从服务端的框架生成的，或者网页上存在第三方的内容（如广告），这些都是我们所不能控制的。

- -

我们的目标并不是“全有或全无”，实际上，你所做的每一个改进都可以提升网页的可访问性。

- -

文本内容

- -

对于屏幕阅读器用户来讲，最佳辅助功能之一是拥有标题，段落，列表等内容的良好结构。一个好的语义示例可能如下所示：

- -
<h1>My heading</h1>
-
-<p>This is the first section of my document.</p>
-
-<p>I'll add another paragraph here too.</p>
-
-<ol>
-  <li>Here is</li>
-  <li>a list for</li>
-  <li>you to read</li>
-</ol>
-
-<h2>My subheading</h2>
-
-<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>
-
-<h2>My 2nd subheading</h2>
-
-<p>This is the second subsection of my content. I think is more interesting than the last one.</p>
- -

我们已经准备了一个更长的文本版本，供您试用于屏幕阅读器（请查看 good-semantics.html）。如果您尝试在此过程中导航，您将看到这非常容易导航：

- -
    -
  1. 屏幕阅读器会在您浏览内容时读取每个标题，通知您标题是什么，段落是什么等。
    2. -
  2. 它在每个元素之后停止，让你以任何适合你的速度前进。
    3. -
  3. 你可以在许多屏幕阅读器中跳到下一个/上一个标题。
    4. -
  4. 你还可以在许多屏幕阅读器中显示所有标题的列表，使您可以像使用便利的目录一样使用它们以查找特定内容。
    5. -
- -

人们有时会使用表现性 HTML 和换行符来编写标题，段落等，如下所示：

- -
<font size="7">My heading</font>
-<br><br>
-This is the first section of my document.
-<br><br>
-I'll add another paragraph here too.
-<br><br>
-1. Here is
-<br><br>
-2. a list for
-<br><br>
-3. you to read
-<br><br>
-<font size="5">My subheading</font>
-<br><br>
-This is the first subsection of my document. I'd love people to be able to find this content!
-<br><br>
-<font size="5">My 2nd subheading</font>
-<br><br>
-This is the second subsection of my content. I think is more interesting than the last one.
- -

如果你使用屏幕阅读器试用更长内容的版本（请查阅 bad-semantics.html），你不会有一个很好的经验 — 屏幕阅读器没有任何东西可以用作路标，所以你无法检索有用的目录，整个页面被看作一个巨大的块，所以它只是一次读出所有的内容。

- -

除了可访问性之外，还有其他一些问题 - 使用CSS设计内容的风格更难，或者使用JavaScript来操作它比较困难，因为没有可用作选择器的元素。

- -

使用通俗易懂的语言

- -

你使用的语言也会影响可访问性。一般来说，你应该使用不太复杂的清晰语言，不要使用不必要的行话或俚语。这不仅有利于有认知或其他残疾的人；它有利于那些没有用母语写作的读者，年轻人...事实上是每个人！除此之外，你应该尽量避免使用没有被屏幕阅读器清楚读出的语言和字符。例如:

- - - -

页面布局

- -

在旧时代，人们曾经使用HTML表格创建页面布局 - 使用不同的表格单元格来包含页眉，页脚，边栏，主要内容栏等。这不是一个好主意，因为屏幕阅读器可能会读出给人造成困惑的结果，特别是如果布局复杂，并且有许多嵌套表格的话。

- -

试试我们的例子table-layout.html，它看起来像这样：

- -
<table width="1200">
-      <!-- main heading row -->
-      <tr id="heading">
-        <td colspan="6">
-
-          <h1 align="center">Header</h1>
-
-        </td>
-      </tr>
-      <!-- nav menu row  -->
-      <tr id="nav" bgcolor="#ffffff">
-        <td width="200">
-          <a href="#" align="center">Home</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Our team</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Projects</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Contact</a>
-        </td>
-        <td width="300">
-          <form width="300">
-            <input type="search" name="q" placeholder="Search query" width="300">
-          </form>
-        </td>
-        <td width="100">
-          <button width="100">Go!</button>
-        </td>
-      </tr>
-      <!-- spacer row -->
-      <tr id="spacer" height="10">
-        <td>
-
-        </td>
-      </tr>
-      <!-- main content and aside row -->
-      <tr id="main">
-        <td id="content" colspan="4" bgcolor="#ffffff">
-
-          <!-- main content goes here -->
-        </td>
-        <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
-          <h2>Related</h2>
-
-          <!-- aside content goes here -->
-
-        </td>
-      </tr>
-      <!-- spacer row -->
-      <tr id="spacer" height="10">
-        <td>
-
-        </td>
-      </tr>
-      <!-- footer row -->
-      <tr id="footer" bgcolor="#ffffff">
-        <td colspan="6">
-          <p>©Copyright 2050 by nobody. All rights reversed.</p>
-        </td>
-      </tr>
-    </table>
- -

如果您尝试使用屏幕阅读器浏览此内容，它可能会告诉您需要查看一个表格（尽管某些屏幕阅读器可以猜测表格布局和数据表格之间的区别）。 然后，您可能（取决于您使用的屏幕阅读器）必须需要进入到表格对象中，并单独地查看表格的内容，然后再次离开表格，以继续浏览其他内容。

- -

用表格布局网页是过去旧时代的遗迹 - 在“CSS”在浏览器中并不普遍被支持时，它们是有意义的，但是它们会为屏幕阅读器用户造成混淆，并且由于许多其他原因变得很糟糕（滥用表格，可能因此需要更多的标记， 使设计更不灵活）。不要这样做！

- -

您可以通过将您之前的体验与 更现代的网站结构示例 进行比较，来验证这些声明，该示例如下所示：

- -
<header>
-  <h1>Header</h1>
-</header>
-
-<nav>
-  <!-- main navigation in here -->
-</nav>
-
-<!-- Here is our page's main content -->
-<main>
-
-  <!-- It contains an article -->
-  <article>
-    <h2>Article heading</h2>
-
-    <!-- article content in here -->
-  </article>
-
-  <aside>
-    <h2>Related</h2>
-
-    <!-- aside content in here -->
-  </aside>
-
-</main>
-
-<!-- And here is our main footer that is used across all the pages of our website -->
-
-<footer>
-  <!-- footer content in here -->
-</footer>
- - - -

如果您使用屏幕阅读器阅读更现代的结构示例，则会看到布局标记不再会妨碍内容的读取。 它在代码大小方面也更加精简和小巧，这意味着代码更容易维护，并且用户下载的带宽更少（特别适合慢速连接的用户）。

- -

创建布局时的另一个考虑因素是使用HTML5语义元素，如上例所示（请参阅 此内容部分） - 您只能使用嵌套的 {{htmlelement("div")}} 元素创建布局，但最好使用适当的分段元素包裹您的主导航（{{htmlelement("nav")}}），footer ({{htmlelement("footer")}}），重复内容单元  ({{htmlelement("article")}}) 等 。这些为屏幕阅读器（和其他工具）提供额外的语义，为用户提供有关他们正在浏览的内容的额外信息（请参阅 屏幕阅读器支持的新的HTML5章节元素 ，了解屏幕阅读器的支持是什么样的原理）。

- -
-

注意：除了您的内容具有良好的语义和有吸引力的布局之外，它的源代码顺序应该是合理的 - 您可以随时将它放在您想要使用CSS的位置，但是您应该先从源代码开始， 如此这样，屏幕阅读器读取给他们的内容将会非常便于理解。

-
- -

UI 控制

- -

通过UI控件，我们指的是与用户交互的Web文档的主要部分 - 通常是按钮，链接和表单控件。 在本节中，我们将介绍创建此类控件时要注意的基本可访问性问题。 稍后关于WAI-ARIA和多媒体的文章将着眼于UI可访问性的其他方面。

- -

UI控件可访问性的一个关键方面是，默认情况下，浏览器允许用户通过键盘操作它们。 您可以使用我们的 native-keyboard-accessibility.html 示例（请参阅 源代码 ）。尝试此操作 - 在新选项卡中打开此项，然后尝试按Tab键; 几次按下后，您应该看到标签焦点开始移动到不同的元素; 在每个浏览器中，获得焦点元素都会有一个“突出显示“的默认样式（它在不同浏览器之间略有不同），以便您可以确定当前哪些元素获得焦点。

- -

- -

接着你可以按Enter / Return来追踪当前获得焦点的链接，或者按按钮来实现（我们已经使用JavaScript使按钮同时显示提示消息），或者开始在文本输入中输入文本（其他表单元素具有不同的控件， 例如 {{htmlelement("select")}} 元素拥有自己的显示选项， 可以使用向上和向下箭头键进行循环）。

- -
-

注意：不同的浏览器可能有不同的键盘控制选项。 请参阅 使用本机键盘辅助功能 获取更多详细信

-
- -

实际上，您只需使用适当的元素即可免费获得此功能，例如，

- -
<h1>Links</h1>
-
-<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>
-
-<p>Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
-
-<h2>Buttons</h2>
-
-<p>
-  <button data-message="This is from the first button">Click me!</button>
-  <button data-message="This is from the second button">Click me too!</button>
-  <button data-message="This is from the third button">And me!</button>
-</p>
-
-<h2>Form</h2>
-
-<form>
-  <div>
-    <label for="name">Fill in your name:</label>
-    <input type="text" id="name" name="name">
-  </div>
-  <div>
-    <label for="age">Enter your age:</label>
-    <input type="text" id="age" name="age">
-  </div>
-  <div>
-    <label for="mood">Choose your mood:</label>
-    <select id="mood" name="mood">
-      <option>Happy</option>
-      <option>Sad</option>
-      <option>Angry</option>
-      <option>Worried</option>
-    </select>
-  </div>
-</form>
- - - -

这意味着适当地使用链接，按钮，表单元素和标签（包括表单控件的 {{htmlelement("label")}} 元素）。

- -

然而，人们有时候会用HTML做奇怪的事情。 例如，您有时会看到使用 {{htmlelement("div")}} 标记的按钮，例如：

- -
<div data-message="This is from the first button">Click me!</div>
-<div data-message="This is from the second button">Click me too!</div>
-<div data-message="This is from the third button">And me!</div>
- -

但是不建议使用这样的代码 - 你会立即失去本机键盘的可访问性。但如果你使用了{{htmlelement("button")}} 元素，你将可以通过键盘控制。 此外你也将不会获得任何的按钮默认拥有的CSS样式。

- -

重新建立键盘的可访问性

- -

重新添加这些优点需要一些工作（您可以在我们的 fake-div-buttons.html 示例中使用示例代码 - 另请参阅 源代码 ）。 在这里，我们通过赋予每个 <div> 按钮属性tabindex =“0” 来使它能够被聚焦（包括通过选项卡）：

- -
<div data-message="This is from the first button" tabindex="0">Click me!</div>
-<div data-message="This is from the second button" tabindex="0">Click me too!</div>
-<div data-message="This is from the third button" tabindex="0">And me!</div>
- -

基本上，{{htmlattrxref("tabindex")}} 属性主要用于允许 tabbable 元素具有自定义Tab键顺序（以正数顺序指定），而不是仅按其默认源顺序进行标记。 这几乎总是一个糟糕的主意，因为它可能会造成重大混乱。 例如，如果布局以与源代码非常不同的视觉顺序显示事物，而且你想让事情更符合逻辑。 这里 tabindex 有另外两个选项：

- - - -

虽然上面的添加允许我们用 tab 选择按钮，但它不允许我们通过 Enter / Return 键来激活它们。 要做到这一点，我们必须添加下面的 JS 小绝招（JavaScript trickery）：

- -
document.onkeydown = function(e) {
-  if(e.keyCode === 13) { // The Enter/Return key
-    document.activeElement.onclick(e);
-  }
-};
- -

在这里，我们向文档对象 document 添加一个侦听器，以检测什么时候键盘上按下按钮 我们通过事件对象 event object 的 keyCode 属性,检查用户按下了哪个按钮; 如果它是与 Return / Enter 匹配的关键代码，我们通过按钮的 onclick 函数，即 document.activeElement.onclick() 。activeElement 提供给我们页面当前被focused的元素。

- -

我们使用document.activeElement.onclick（）运行存储在按钮的onclick处理函数中的函数。 activeElement 为我们提供了当前关注页面的元素。

- -
-

注意：您应该记住，只有通过事件处理程序属性（例如onclick）设置原始事件处理程序，此技巧才会起作用。 addEventListener 将不起作用。

-
- -

这对于重新构建功能而言是一个额外的麻烦。而且这肯定会带来其他问题。 使用正确的元素处理正确的工作是非常重要的。（Better to just use the right element for the right job in the first place.）

- -

有意义的文字标签

- -

用户界面控件的 文本标签 对所有用户都非常有用，但是对于残疾用户来说，让他们正确使用尤其重要。

- -

你应该确保你的按钮和链接文本标签是可以理解和独特的。 不要使用“点击这里”（"Click here"）此类的标签，因为屏幕阅读器用户有时会列出按钮和表格控件列表。 以下屏幕截图显示了我们的控件在Mac上由 VoiceOver 列出。

- -

- -

确保您的标签在上下文中有意义，可以单独阅读，也可以在他们所在的段落的上下文中进行阅读。例如，下面显示了良好链接文本的示例：

- -
<p>Whales are really awesome creatures. <a href="whales.html">Find out more about whales</a>.</p>
- -

但这是不好的链接文字：

- -
<p>Whales are really awesome creatures. To find more out about whales, <a href="whales.html">click here</a>.</p>
- -
-

注意：您可以在我们的 创建超链接 文章中找到更多关于链接实现和最佳实践的信息。 您还可以在 good-links.html 和 bad-links.html 中看到一些好的和不好的例子。

-
- -

表单标签也很重要，可以让您了解您需要输入每个表单输入的内容。 以下似乎是一个足够合理的例子：

- -
Fill in your name: <input type="text" id="name" name="name">
- -

但是，这对于残疾用户来说并不是那么有用。 在上面的示例中，没有任何内容将标签与表单输入明确关联。因此如果看不到它，请让用户明确该如何填写。 如果您使用某些屏幕阅读器访问该屏幕，则只能按照“编辑文本”（“edit text”）的方式给出说明。

- -

以下是一个更好的例子：

- -
<div>
-  <label for="name">Fill in your name:</label>
-  <input type="text" id="name" name="name">
-</div>
- -

通过这样的代码，标签将清晰地与输入相关联;  描述将更像如下这种形式：“填写你的姓名：编辑文本”。

- -

- -

作为额外的好处，在大多数将标签与表单输入相关联的浏览器中，您可以单击标签来 选择/激活 表单元素。 这给输入一个更大的可选中区域，使其更容易选择。

- -
-

注意：您可以在 good-form.html 和 bad-form.html 中看到一些好的和不好的表单示例。

-
- -

可访问的表格

- -

基本的表格（译者注：“data table”被翻译成“表格”）可以用非常简单的标记来编写，例如：

- -
<table>
-  <tr>
-    <td>Name</td>
-    <td>Age</td>
-    <td>Gender</td>
-  </tr>
-  <tr>
-    <td>Gabriel</td>
-    <td>13</td>
-    <td>Male</td>
-  </tr>
-  <tr>
-    <td>Elva</td>
-    <td>8</td>
-    <td>Female</td>
-  </tr>
-  <tr>
-    <td>Freida</td>
-    <td>5</td>
-    <td>Female</td>
-  </tr>
-</table>
- -

但是这有问题 - 屏幕阅读器用户无法将行或列作为数据分组关联在一起。 要做到这一点，你需要知道标题行是什么，以及它们是否在行，列等标题上。这只能在上面的表中以可视化方式完成（参见 bad-table.html ，并自己尝试这个例子）。

- -

现在看看我们的 punk bands table example  - 您可以在这里看到一些辅助工具（accessibility aids）：

- - - -
-

注意：有关可访问数据表的更多详细信息，请参阅我们的 HTML表格高级功能和可访问性 文章。

-
- -

文本替代品

- -

尽管文本内容本身是可访问的，但对于多媒体内容而言也不一定是这样 - 图像/视频内容不能被视觉障碍人士看到，并且听觉障碍人士不能听到音频内容。 稍后我们将在可访问多媒体文章中详细介绍视频和音频内容，但对于本文，我们将探讨低微（humble ）的 {{htmlelement("img")}} 元素的可访问性。

- -

我们编写了一个简单的例子， accessible-image.html ，它具有相同图像的四个副本：

- -
<img src="dinosaur.png">
-
-<img src="dinosaur.png"
-     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
-
-<img src="dinosaur.png"
-     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
-     title="The Mozilla red dinosaur">
-
-
-<img src="dinosaur.png" aria-labelledby="dino-label">
-
-<p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p>
-
- -

第一张图片，当用屏幕阅读器查看时，并不真正为用户提供很多帮助 - 例如VoiceOver会读出 “/dinosaur.png，image” 。 它读出文件名以尝试提供一些帮助。 在这个例子中，用户至少知道它是某种恐龙，但通常文件可以用机器生成的文件名（例如来自数码相机）上传，这些文件名可能不会提供图像内容的信息。

- -
-

注意：这就是为什么你不应该在图像中包含文本内容 - 屏幕阅读器根本无法访问它。 还有其他的缺点 - 你不能选择它并复制/粘贴它。不要这样做！

-
- -

当屏幕阅读器遇到第二张图像时，它会读出完整的 alt 属性 - “红色霸王龙雷克斯：一只像人一样直立的双腿恐龙，手臂小，头部大而锋利。”

- -

这突出了不仅在所谓的替代文本不可用的情况下使用有意义的文件名的重要性，而且还确保尽可能地在替换属性 alt 中提供替代文本。 请注意，alt 属性的内容应始终提供图像的直接表示以及它在视觉上传达的内容。 任何个人知识或额外描述都不应该包含在这里，因为它对以前没有碰到过这个图像的人没有用处。

- -

需要考虑的一件事是，你的图片是否在你的内容中有意义，或者它们纯粹是为了视觉装饰，所以没有意义。 如果它们是装饰性的，最好将它们包含在页面中作为CSS背景图像。

- -
-

注意：请阅读 HTML中的图片 和 响应式图片 以获得更多关于图片实施和最佳做法的信息。

-
- -

如果您确实想要提供额外的上下文信息，则应该将其放在图像周围的文本中，或放置在“标题” title 属性中，如上所示。 在这种情况下，大多数屏幕阅读器会读出替代文本，标题属性和文件名。 此外，鼠标滑过时，浏览器会将 title 的内容作为工具提示的形式显示出来。

- - - - - -

- -

我们再来看看第四种方法：

- -
<img src="dinosaur.png" aria-labelledby="dino-label">
-
-<p id="dino-label">The Mozilla red Tyrannosaurus ... </p>
- -

在这种情况下，我们不使用“alt”属性 —— 相反，我们已经将图像的描述作为常规文本段落给出，并给出它的“id”，然后使用 “aria-labelledby” 属性并链接到对应“id”，它使屏幕阅读器将该段落用作该图像的替代文本/标签。 如果您想将相同的文本用作多个图像的标签，这是特别有用的 - 这是使用“alt”不可能实现的。

- -
-

注意：“aria-labelledby”是 WAI-ARIA 规范的一部分，它允许开发人员在其标记中添加额外的语义，以提高屏幕阅读器的可访问性。 要了解更多关于它是如何工作的，请阅读我们的 WAI-ARIA Basics 文章。

-
- - - -

其他文字替代机制

- -

图像还有其他机制可用于提供描述性文字。 例如，有一个 longdesc 属性用于指向包含图像的扩展描述的单独Web文档，例如：

- -
<img src="dinosaur.png" longdesc="dino-info.html">
- -

这听起来像个好主意，尤其是对于像大图表这样的信息图，其中有很多信息可能可以表示为可访问的数据表（请参阅上一部分）。 但是，屏幕阅读器不支持longdesc，非屏幕阅读器用户完全无法访问内容。 将长描述包含在与图像相同的页面中，或者通过常规链接链接到它可能会更好。

- -

HTML5包含两个新元素 -  {{htmlelement("figure")}} 和{{htmlelement("figcaption")}} ，它们应该将某种形象（可以是任何东西，不一定是图像）与数字标题相关联：

- -
<figure>
-  <img src="dinosaur.png" alt="The Mozilla Tyrannosaurus">
-  <figcaption>A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</figcaption>
-</figure>
- -

不幸的是，大多数屏幕阅读器似乎并没有将图形标题与他们的图形相关联，但是元素结构对CSS样式非常有用，并且它提供了一种方法在源代码中将图像放置在旁边。

- -

空alt属性

- -
<h3>
-  <img src="article-icon.png" alt="">
-  Tyrannosaurus Rex: the king of the dinosaurs
-</h3>
- -

可能有时候图像被包含在页面的设计中，但其主要目的是用于视觉装饰。 在上面的代码示例中，您会注意到图像的“alt”属性为空 - 这是为了让屏幕阅读器识别图像，但不试图描述图像（阅读器只是说 “图像” 等类似的语句）。

- -

使用空白“alt”而不包含它的原因是因为如果没有提供“alt”，许多屏幕阅读器会公布整个图像URL。 在上面的示例中，图像充当与其关联的标题的视觉装饰。 在这种情况下，以及在图像只是装饰并且没有内容值的情况下，您应该在图像上放置一个空白的“alt”。 另一种选择是使用 aria role 属性 role =“presentation” - 这也会阻止屏幕阅读器读出替代文本。

- -
-

注意：如果可能的话，你应该使用CSS来显示只有装饰的图像。

-
- -

总结Summary

- -

您现在应该精通编写大多数场合可访问的HTML。 我们的 WAI-ARIA 基础知识文章也将填补这些知识中的一些空白，但本文已经关注了此基础知识。 接下来，我们将探索 CSS 和 JavaScript ，以及可访问性如何受其好坏影响。

- - - -

{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}

- - - -

在此模块

- - diff --git a/files/zh-cn/learn/accessibility/multimedia/index.html b/files/zh-cn/learn/accessibility/multimedia/index.html new file mode 100644 index 0000000000..660ebca836 --- /dev/null +++ b/files/zh-cn/learn/accessibility/multimedia/index.html @@ -0,0 +1,354 @@ +--- +title: 多媒体的可访问性(Accessible multimedia) +slug: learn/Accessibility/多媒体 +translation_of: Learn/Accessibility/Multimedia +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}
+ +

可能导致可访问性问题（accessibility problems ）的另一类内容是多媒体 ——视频，音频和图像内容需要提供适当的文本替代方式，以便辅助技术及其用户能够理解它们。本文展示了具体内容。

+ + + + + + + + + + + + +
先决条件:基本的计算机素养，对HTML，CSS和JavaScript的基本理解，对可访问性 的理解。
目的:了解多媒体背后的可访问性问题，以及如何克服这些问题。
+ +

多媒体和可访问性

+ +

到目前为止，在这个模块中，我们已经查看了各种内容以及需要做些什么来确保其可访问性，从简单的文本内容到数据表，图像，本机控件（如表单元素和按钮）以及更复杂的标记结构（具有WAI-ARIA属性）。

+ +

另一方面，这篇文章着眼于另一个一般的内容类别，可以说它不容易确保对多媒体的可访问性。图像，视频，<canvas>元素，Flash电影等不易被屏幕阅读器理解或被键盘导航，我们需要帮助他们。

+ +

但不要绝望 - 在这里我们将帮助您浏览可用于使多媒体更容易访问的技术。

+ +

简单图像

+ +

我们已经介绍了 HTML 图像的简单文本替代HTML: A good basis for accessibility –– 您可以参考其中了解详细信息。简而言之,应确保在可能的情况下,视觉内容具有替代文本,供屏幕阅读器拾取和读取给其用户。

+ +

示例：

+ +
<img src="dinosaur.png"
+     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
+
+ +

可访问的音频和视频控件

+ +

基于 Web 的音频/视频执行控件不应该成为问题,对吗?让我们来调查一下。

+ +

本地 HTML5 控件的问题

+ +

HTML5 视频和音频实例甚至附带一组内置控件,允许您直接在盒子控制媒体。例如(请参阅本地控件.html 源代码和实时演示):

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
+</audio>
+
+<br>
+
+<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+ +

控件属性提供播放/暂停按钮、搜索栏等 - 您期望从媒体播放器获得的基本控件。它看起来像在Firefox 和 Chrome:

+ +

Screenshot of Video Controls in Firefox

+ +

Screenshot of Video Controls in Chrome

+ +

但是,这些控件存在问题:

+ + + +

为了解决这个问题,我们可以创建自己的自定义控件。让我们来看看如何。

+ +

创建自定义音频和视频控件

+ +

HTML5 视频和音频共享 API — HTML Media Element — 允许您将自定义功能映射到按钮和其他控件––这两个控件都是您自己定义的。

+ +

让我们从上面获取视频示例,并向其添加自定义控件。

+ +

基本设置

+ +

首先,获取我们的custom-controls-start.html、custom-controls.css、 rabbit320.mp4 和 rabbit320.webm文件的副本,并将它们保存在硬盘上的新目录中。

+ +

创建一个名为 main.js 的新文件并将其保存在同一目录中。

+ +

首先,让我们在 HTML 中查看视频播放器的 HTML:

+ +
<section class="player">
+  <video controls>
+    <source src="rabbit320.mp4" type="video/mp4">
+    <source src="rabbit320.webm" type="video/webm">
+    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+  </video>
+
+  <div class="controls">
+    <button class="playpause">Play</button>
+    <button class="stop">Stop</button>
+    <button class="rwd">Rwd</button>
+    <button class="fwd">Fwd</button>
+    <div class="time">00:00</div>
+  </div>
+</section>
+ +

JavaScript基本设置

+ +

我们在视频下方插入了一些简单的控制按钮。当然,这些控件在默认情况下不会执行任何操作。要添加功能,我们将使用 JavaScript。

+ +

我们首先需要存储对每个控件的引用––将以下内容添加到 JavaScript 文件的顶部:

+ +
var playPauseBtn = document.querySelector('.playpause');
+var stopBtn = document.querySelector('.stop');
+var rwdBtn = document.querySelector('.rwd');
+var fwdBtn = document.querySelector('.fwd');
+var timeLabel = document.querySelector('.time');
+ +

接下来,我们需要获取对视频/音频播放器本身的引用––在前面的代码行下方添加此行代码:

+ +
var player = document.querySelector('video');
+ +

这包含对{{domxref("HTMLMediaElement")}}对象的引用,该对象具有几个有用的属性和方法,可用于将功能连接到我们的按钮。

+ +

在开始创建按钮功能之前,让我们删除本地控件,以免它们妨碍我们的自定义控件。在 JavaScript 的底部再次添加以下内容:

+ +
player.removeAttribute('controls');
+ +

这样做,而不是仅仅不包括控件属性摆在首位有一个优势,如果我们的JavaScript失败,用户仍然有一些控件可用。

+ +

连接按钮

+ +

首先,让我们设置播放/暂停按钮。我们可以使用一个简单的条件函数在播放和暂停之间切换,如下所示。将其添加到代码底部:

+ +
playPauseBtn.onclick = function() {
+  if(player.paused) {
+    player.play();
+    playPauseBtn.textContent = 'Pause';
+  } else {
+    player.pause();
+    playPauseBtn.textContent = 'Play';
+  }
+};
+ +

接下来,将此代码添加到底部,该代码控制停止按钮:

+ +
stopBtn.onclick = function() {
+  player.pause();
+  player.currentTime = 0;
+  playPauseBtn.textContent = 'Play';
+};
+ +

在 {{domxref("HTMLMediaElement")}}s上没有可用的 stop() 函数,因此我们改为pause()它,同时将当前时间设置为 0。

+ +

接下来,我们的快退和快进按钮–– 将以下块添加到代码的底部:

+ +
rwdBtn.onclick = function() {
+  player.currentTime -= 3;
+};
+
+fwdBtn.onclick = function() {
+  player.currentTime += 3;
+  if(player.currentTime >= player.duration || player.paused) {
+    player.pause();
+    player.currentTime = 0;
+    playPauseBtn.textContent = 'Play';
+  }
+};
+ +

这些非常简单,每次单击它们时,只需将 3 秒添加到currentTime。在真正的视频播放器中,您可能想要一个更精细的查找栏或类似功能。

+ +

请注意,当按下 Fwd 按钮时,我们还会检查currentTime是否超过总媒体的duration,或者媒体是否未播放。如果任一条件为 true,我们只需停止视频,以避免用户界面出错,如果他们试图在视频未播放时快进,或快进通过视频结束。

+ +

最后,将以下内容添加到代码末尾,以控制显示的时间:

+ +
player.ontimeupdate = function() {
+  var minutes = Math.floor(player.currentTime / 60);
+  var seconds = Math.floor(player.currentTime - minutes * 60);
+  var minuteValue;
+  var secondValue;
+
+  if (minutes<10) {
+    minuteValue = "0" + minutes;
+  } else {
+    minuteValue = minutes;
+  }
+
+  if (seconds<10) {
+    secondValue = "0" + seconds;
+  } else {
+    secondValue = seconds;
+  }
+
+  mediaTime = minuteValue + ":" + secondValue;
+  timeLabel.textContent = mediaTime;
+};
+ +

每次更新时间(每秒一次)时,我们都会触发此功能。它算出给定的当前时间值(以秒为单位)的分钟和秒数,如果分钟或秒值小于 10,则添加前导 0,然后创建显示读出并将其添加到时间标签。

+ +

阅读延伸

+ +

这为您提供了如何向视频/音频播放器实例添加自定义播放器功能的基本想法。有关如何向视频/音频播放器添加更复杂的功能(包括旧版浏览器的 Flash 回退)的详细信息,请参阅:

+ + + +

我们还创建了一个高级示例,以演示如何创建面向对象的系统,该系统可查找页面上的每个视频和音频播放器(无论有多少个视频和音频播放器),并将自定义控件添加到其中。请参阅custom-controls-oojs(see the source code)。

+ +

音频脚本

+ +

要为聋人提供访问音频内容的机会,您确实需要创建文本脚本。这些可以以某种方式与音频一样包含在与音频相同的页面上,也可以包含在单独的页面上并链接到

+ +

在实际创建脚本方面,您的选项包括:

+ + + +

和生活中的大多数事情一样,你倾向于得到你所付出的;不同的服务在准确性和制作成绩单所花时间方面会有所不同。如果你支付一个有信誉的公司做转录,你可能会得到它迅速和高质量的。如果你不想付钱,你很可能会以较低的质量完成,并且/或缓慢完成。

+ +

发布音频资源是不行的,但承诺稍后会发布脚本 - 此类承诺通常不会兑现,这将削弱您和您的用户之间的信任。如果您演示的音频类似于面对面会议或现场演讲表演,则可以在演出期间做笔记,与音频一起完整发布笔记,然后寻求帮助,以便稍后清理笔记。

+ +

脚本示例

+ +

如果使用自动服务,则可能需要使用该工具提供的用户界面。例如,查看Audio Transcription Sample 1并选择" More > Transcript"。

+ +

如果要创建自己的用户界面来显示音频和相关脚本,您可以随心所欲地执行此操作,但将其包含在可显示/可隐藏面板中可能有意义;请参阅我们的audio-transcript-ui 示例(另请参阅source code)。

+ +

音频描述

+ +

在音频附带视频的情况下,您需要提供某种音频说明来描述该额外内容。

+ +

在许多情况下,这只会采取视频的形式,在这种情况下,您可以使用本文下一节中介绍的技术实现字幕。

+ +

但是,有一些边缘情况。例如,您可能有一个会议的音频录制,该录音引用了附带的资源,如电子表格或图表。在这种情况下,应确保资源与音频和脚本一起提供,并在成绩单中提及它们的位置专门链接到这些资源。这当然会帮助所有用户,而不仅仅是聋人。

+ +
+

注意:音频脚本通常有助于多个用户组。除了让聋人用户访问音频中包含的信息外,还考虑一个带宽连接较低的用户,他们会发现下载音频不方便。还要考虑在嘈杂的环境中(如酒吧或酒吧)中的用户,他们试图访问信息,但无法通过噪音听到信息。

+
+ +

视频文本轨道

+ +

要使聋人、盲人甚至其他用户组(如低带宽用户或不理解视频录制的语言的用户)可以访问视频,您需要在视频内容中包括文本轨道。

+ +
+

注意:文本轨道对于潜在的任何用户也很有用,而不仅仅是那些残障用户。例如,有些用户可能无法听到音频,因为他们处于嘈杂的环境中(如显示体育游戏时的拥挤的酒吧),或者如果其他人在安静的地方(如图书馆),则可能不想打扰其他人。

+
+ +

这不是一个新概念 ––电视服务已经关闭了字幕相当长的时间了:

+ +

Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"

+ +

许多国家/地区提供以英语为母语的字幕的英语电影,例如,DVD 上通常提供不同的语言字幕

+ +

An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"

+ +

不同类型的文本轨道具有不同的目的。你遇到的主要情况是:

+ + + +

实现 HTML5 视频文本轨道

+ +

使用 HTML5 视频显示的文本轨道需要用 WebVTT 编写,WebVTT 是一种文本格式,其中包含多个文本字符串以及元数据,例如您希望在视频中显示每个文本字符串的时间,甚至限制样式/定位信息。这些文本字符串称为提示。

+ +

典型的 WebVTT 文件如下所示:

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --> 00:00:34.074
+This is the second.
+
+  ...
+ +

要将此信息与 HTML 媒体播放一起显示,您需要:

+ + + +

下面是一个示例:

+ +
<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+ +

这将产生显示字幕的视频,如下所示:

+ +

Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

+ +

有关详细信息,请阅读Adding captions and subtitles to HTML5 video。您可以找到与本文一起使用本文的the example,本文由 Ian Devlin 编写(请参阅source code)。此示例使用一些 JavaScript 允许用户在不同的字幕之间进行选择。请注意,要打开字幕,您需要按"CC"按钮并选择一个选项 - 英语、德语或西班牙语。

+ +
+

注意:文本轨道和转录也可以帮助您使用{{glossary("SEO")}},因为搜索引擎在文本上尤其繁荣。文本轨道甚至允许搜索引擎通过视频直接链接到一个点部分。

+
+ +

其他多媒体内容

+ +

以上各节未涵盖您可能要放在网页上的所有类型的多媒体内容。您可能还需要处理使用其他可用技术创建的游戏、动画、幻灯片、嵌入式视频和内容,例如:

+ + + +

对于此类内容,您需要根据案例处理辅助功能问题。在某些情况下,它不是那么糟糕,例如:

+ + + +

然而,其他多媒体不是那么容易使访问。例如,如果您正在处理沉浸式 3D 游戏或虚拟现实应用,那么为此类体验提供文本替代方案确实非常困难,您可能会认为盲人用户实际上并不在此类应用的目标受众范围内。

+ +

但是,您可以确保此类应用具有足够的颜色对比度和清晰的显示,以便对视力低下/色盲的人来说可以感知,并且还可以使其键盘可访问。请记住,辅助功能就是尽可能多地做,而不是一直追求 100% 的可访问性,这通常是不可能的。

+ +

总结

+ +

本章概述了多媒体内容的可访问性问题,以及一些实用的解决方案。

+ +

{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}

+ +

In this module

+ + diff --git "a/files/zh-cn/learn/accessibility/\345\244\232\345\252\222\344\275\223/index.html" "b/files/zh-cn/learn/accessibility/\345\244\232\345\252\222\344\275\223/index.html" deleted file mode 100644 index 660ebca836..0000000000 --- "a/files/zh-cn/learn/accessibility/\345\244\232\345\252\222\344\275\223/index.html" +++ /dev/null @@ -1,354 +0,0 @@ ---- -title: 多媒体的可访问性(Accessible multimedia) -slug: learn/Accessibility/多媒体 -translation_of: Learn/Accessibility/Multimedia ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}
- -

可能导致可访问性问题（accessibility problems ）的另一类内容是多媒体 ——视频，音频和图像内容需要提供适当的文本替代方式，以便辅助技术及其用户能够理解它们。本文展示了具体内容。

- - - - - - - - - - - - -
先决条件:基本的计算机素养，对HTML，CSS和JavaScript的基本理解，对可访问性 的理解。
目的:了解多媒体背后的可访问性问题，以及如何克服这些问题。
- -

多媒体和可访问性

- -

到目前为止，在这个模块中，我们已经查看了各种内容以及需要做些什么来确保其可访问性，从简单的文本内容到数据表，图像，本机控件（如表单元素和按钮）以及更复杂的标记结构（具有WAI-ARIA属性）。

- -

另一方面，这篇文章着眼于另一个一般的内容类别，可以说它不容易确保对多媒体的可访问性。图像，视频，<canvas>元素，Flash电影等不易被屏幕阅读器理解或被键盘导航，我们需要帮助他们。

- -

但不要绝望 - 在这里我们将帮助您浏览可用于使多媒体更容易访问的技术。

- -

简单图像

- -

我们已经介绍了 HTML 图像的简单文本替代HTML: A good basis for accessibility –– 您可以参考其中了解详细信息。简而言之,应确保在可能的情况下,视觉内容具有替代文本,供屏幕阅读器拾取和读取给其用户。

- -

示例：

- -
<img src="dinosaur.png"
-     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
-
- -

可访问的音频和视频控件

- -

基于 Web 的音频/视频执行控件不应该成为问题,对吗?让我们来调查一下。

- -

本地 HTML5 控件的问题

- -

HTML5 视频和音频实例甚至附带一组内置控件,允许您直接在盒子控制媒体。例如(请参阅本地控件.html 源代码和实时演示):

- -
<audio controls>
-  <source src="viper.mp3" type="audio/mp3">
-  <source src="viper.ogg" type="audio/ogg">
-  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
-</audio>
-
-<br>
-
-<video controls>
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-</video>
- -

控件属性提供播放/暂停按钮、搜索栏等 - 您期望从媒体播放器获得的基本控件。它看起来像在Firefox 和 Chrome:

- -

Screenshot of Video Controls in Firefox

- -

Screenshot of Video Controls in Chrome

- -

但是,这些控件存在问题:

- - - -

为了解决这个问题,我们可以创建自己的自定义控件。让我们来看看如何。

- -

创建自定义音频和视频控件

- -

HTML5 视频和音频共享 API — HTML Media Element — 允许您将自定义功能映射到按钮和其他控件––这两个控件都是您自己定义的。

- -

让我们从上面获取视频示例,并向其添加自定义控件。

- -

基本设置

- -

首先,获取我们的custom-controls-start.html、custom-controls.css、 rabbit320.mp4 和 rabbit320.webm文件的副本,并将它们保存在硬盘上的新目录中。

- -

创建一个名为 main.js 的新文件并将其保存在同一目录中。

- -

首先,让我们在 HTML 中查看视频播放器的 HTML:

- -
<section class="player">
-  <video controls>
-    <source src="rabbit320.mp4" type="video/mp4">
-    <source src="rabbit320.webm" type="video/webm">
-    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-  </video>
-
-  <div class="controls">
-    <button class="playpause">Play</button>
-    <button class="stop">Stop</button>
-    <button class="rwd">Rwd</button>
-    <button class="fwd">Fwd</button>
-    <div class="time">00:00</div>
-  </div>
-</section>
- -

JavaScript基本设置

- -

我们在视频下方插入了一些简单的控制按钮。当然,这些控件在默认情况下不会执行任何操作。要添加功能,我们将使用 JavaScript。

- -

我们首先需要存储对每个控件的引用––将以下内容添加到 JavaScript 文件的顶部:

- -
var playPauseBtn = document.querySelector('.playpause');
-var stopBtn = document.querySelector('.stop');
-var rwdBtn = document.querySelector('.rwd');
-var fwdBtn = document.querySelector('.fwd');
-var timeLabel = document.querySelector('.time');
- -

接下来,我们需要获取对视频/音频播放器本身的引用––在前面的代码行下方添加此行代码:

- -
var player = document.querySelector('video');
- -

这包含对{{domxref("HTMLMediaElement")}}对象的引用,该对象具有几个有用的属性和方法,可用于将功能连接到我们的按钮。

- -

在开始创建按钮功能之前,让我们删除本地控件,以免它们妨碍我们的自定义控件。在 JavaScript 的底部再次添加以下内容:

- -
player.removeAttribute('controls');
- -

这样做,而不是仅仅不包括控件属性摆在首位有一个优势,如果我们的JavaScript失败,用户仍然有一些控件可用。

- -

连接按钮

- -

首先,让我们设置播放/暂停按钮。我们可以使用一个简单的条件函数在播放和暂停之间切换,如下所示。将其添加到代码底部:

- -
playPauseBtn.onclick = function() {
-  if(player.paused) {
-    player.play();
-    playPauseBtn.textContent = 'Pause';
-  } else {
-    player.pause();
-    playPauseBtn.textContent = 'Play';
-  }
-};
- -

接下来,将此代码添加到底部,该代码控制停止按钮:

- -
stopBtn.onclick = function() {
-  player.pause();
-  player.currentTime = 0;
-  playPauseBtn.textContent = 'Play';
-};
- -

在 {{domxref("HTMLMediaElement")}}s上没有可用的 stop() 函数,因此我们改为pause()它,同时将当前时间设置为 0。

- -

接下来,我们的快退和快进按钮–– 将以下块添加到代码的底部:

- -
rwdBtn.onclick = function() {
-  player.currentTime -= 3;
-};
-
-fwdBtn.onclick = function() {
-  player.currentTime += 3;
-  if(player.currentTime >= player.duration || player.paused) {
-    player.pause();
-    player.currentTime = 0;
-    playPauseBtn.textContent = 'Play';
-  }
-};
- -

这些非常简单,每次单击它们时,只需将 3 秒添加到currentTime。在真正的视频播放器中,您可能想要一个更精细的查找栏或类似功能。

- -

请注意,当按下 Fwd 按钮时,我们还会检查currentTime是否超过总媒体的duration,或者媒体是否未播放。如果任一条件为 true,我们只需停止视频,以避免用户界面出错,如果他们试图在视频未播放时快进,或快进通过视频结束。

- -

最后,将以下内容添加到代码末尾,以控制显示的时间:

- -
player.ontimeupdate = function() {
-  var minutes = Math.floor(player.currentTime / 60);
-  var seconds = Math.floor(player.currentTime - minutes * 60);
-  var minuteValue;
-  var secondValue;
-
-  if (minutes<10) {
-    minuteValue = "0" + minutes;
-  } else {
-    minuteValue = minutes;
-  }
-
-  if (seconds<10) {
-    secondValue = "0" + seconds;
-  } else {
-    secondValue = seconds;
-  }
-
-  mediaTime = minuteValue + ":" + secondValue;
-  timeLabel.textContent = mediaTime;
-};
- -

每次更新时间(每秒一次)时,我们都会触发此功能。它算出给定的当前时间值(以秒为单位)的分钟和秒数,如果分钟或秒值小于 10,则添加前导 0,然后创建显示读出并将其添加到时间标签。

- -

阅读延伸

- -

这为您提供了如何向视频/音频播放器实例添加自定义播放器功能的基本想法。有关如何向视频/音频播放器添加更复杂的功能(包括旧版浏览器的 Flash 回退)的详细信息,请参阅:

- - - -

我们还创建了一个高级示例,以演示如何创建面向对象的系统,该系统可查找页面上的每个视频和音频播放器(无论有多少个视频和音频播放器),并将自定义控件添加到其中。请参阅custom-controls-oojs(see the source code)。

- -

音频脚本

- -

要为聋人提供访问音频内容的机会,您确实需要创建文本脚本。这些可以以某种方式与音频一样包含在与音频相同的页面上,也可以包含在单独的页面上并链接到

- -

在实际创建脚本方面,您的选项包括:

- - - -

和生活中的大多数事情一样,你倾向于得到你所付出的;不同的服务在准确性和制作成绩单所花时间方面会有所不同。如果你支付一个有信誉的公司做转录,你可能会得到它迅速和高质量的。如果你不想付钱,你很可能会以较低的质量完成,并且/或缓慢完成。

- -

发布音频资源是不行的,但承诺稍后会发布脚本 - 此类承诺通常不会兑现,这将削弱您和您的用户之间的信任。如果您演示的音频类似于面对面会议或现场演讲表演,则可以在演出期间做笔记,与音频一起完整发布笔记,然后寻求帮助,以便稍后清理笔记。

- -

脚本示例

- -

如果使用自动服务,则可能需要使用该工具提供的用户界面。例如,查看Audio Transcription Sample 1并选择" More > Transcript"。

- -

如果要创建自己的用户界面来显示音频和相关脚本,您可以随心所欲地执行此操作,但将其包含在可显示/可隐藏面板中可能有意义;请参阅我们的audio-transcript-ui 示例(另请参阅source code)。

- -

音频描述

- -

在音频附带视频的情况下,您需要提供某种音频说明来描述该额外内容。

- -

在许多情况下,这只会采取视频的形式,在这种情况下,您可以使用本文下一节中介绍的技术实现字幕。

- -

但是,有一些边缘情况。例如,您可能有一个会议的音频录制,该录音引用了附带的资源,如电子表格或图表。在这种情况下,应确保资源与音频和脚本一起提供,并在成绩单中提及它们的位置专门链接到这些资源。这当然会帮助所有用户,而不仅仅是聋人。

- -
-

注意:音频脚本通常有助于多个用户组。除了让聋人用户访问音频中包含的信息外,还考虑一个带宽连接较低的用户,他们会发现下载音频不方便。还要考虑在嘈杂的环境中(如酒吧或酒吧)中的用户,他们试图访问信息,但无法通过噪音听到信息。

-
- -

视频文本轨道

- -

要使聋人、盲人甚至其他用户组(如低带宽用户或不理解视频录制的语言的用户)可以访问视频,您需要在视频内容中包括文本轨道。

- -
-

注意:文本轨道对于潜在的任何用户也很有用,而不仅仅是那些残障用户。例如,有些用户可能无法听到音频,因为他们处于嘈杂的环境中(如显示体育游戏时的拥挤的酒吧),或者如果其他人在安静的地方(如图书馆),则可能不想打扰其他人。

-
- -

这不是一个新概念 ––电视服务已经关闭了字幕相当长的时间了:

- -

Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"

- -

许多国家/地区提供以英语为母语的字幕的英语电影,例如,DVD 上通常提供不同的语言字幕

- -

An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"

- -

不同类型的文本轨道具有不同的目的。你遇到的主要情况是:

- - - -

实现 HTML5 视频文本轨道

- -

使用 HTML5 视频显示的文本轨道需要用 WebVTT 编写,WebVTT 是一种文本格式,其中包含多个文本字符串以及元数据,例如您希望在视频中显示每个文本字符串的时间,甚至限制样式/定位信息。这些文本字符串称为提示。

- -

典型的 WebVTT 文件如下所示:

- -
WEBVTT
-
-1
-00:00:22.230 --> 00:00:24.606
-This is the first subtitle.
-
-2
-00:00:30.739 --> 00:00:34.074
-This is the second.
-
-  ...
- -

要将此信息与 HTML 媒体播放一起显示,您需要:

- - - -

下面是一个示例:

- -
<video controls>
-    <source src="example.mp4" type="video/mp4">
-    <source src="example.webm" type="video/webm">
-    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
-</video>
- -

这将产生显示字幕的视频,如下所示:

- -

Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

- -

有关详细信息,请阅读Adding captions and subtitles to HTML5 video。您可以找到与本文一起使用本文的the example,本文由 Ian Devlin 编写(请参阅source code)。此示例使用一些 JavaScript 允许用户在不同的字幕之间进行选择。请注意,要打开字幕,您需要按"CC"按钮并选择一个选项 - 英语、德语或西班牙语。

- -
-

注意:文本轨道和转录也可以帮助您使用{{glossary("SEO")}},因为搜索引擎在文本上尤其繁荣。文本轨道甚至允许搜索引擎通过视频直接链接到一个点部分。

-
- -

其他多媒体内容

- -

以上各节未涵盖您可能要放在网页上的所有类型的多媒体内容。您可能还需要处理使用其他可用技术创建的游戏、动画、幻灯片、嵌入式视频和内容,例如:

- - - -

对于此类内容,您需要根据案例处理辅助功能问题。在某些情况下,它不是那么糟糕,例如:

- - - -

然而,其他多媒体不是那么容易使访问。例如,如果您正在处理沉浸式 3D 游戏或虚拟现实应用,那么为此类体验提供文本替代方案确实非常困难,您可能会认为盲人用户实际上并不在此类应用的目标受众范围内。

- -

但是,您可以确保此类应用具有足够的颜色对比度和清晰的显示,以便对视力低下/色盲的人来说可以感知,并且还可以使其键盘可访问。请记住,辅助功能就是尽可能多地做,而不是一直追求 100% 的可访问性,这通常是不可能的。

- -

总结

- -

本章概述了多媒体内容的可访问性问题,以及一些实用的解决方案。

- -

{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}

- -

In this module

- - diff --git a/files/zh-cn/learn/common_questions/available_text_editors/index.html b/files/zh-cn/learn/common_questions/available_text_editors/index.html new file mode 100644 index 0000000000..f8f394191d --- /dev/null +++ b/files/zh-cn/learn/common_questions/available_text_editors/index.html @@ -0,0 +1,295 @@ +--- +title: 什么文本编辑器比较好用？ +slug: Learn/Common_questions/实用文本编辑器 +translation_of: Learn/Common_questions/Available_text_editors +--- +
{{IncludeSubnav("/en-US/Learn")}}
+ +
+

在这篇文章中我们强调了关于web开发者安装文本编辑器的一些考虑事项。

+
+ + + + + + + + + + + + +
前提条件:你应该已经知晓了  为了建立一个网站所需的各种软件。
目标:学习作为一个web开发者如何选择一个最适合自己需求的文本编辑器。
+ +

概要

+ +

一个网站包括很多文本文件， 所以为了拥有一个有趣的，令人愉快的开发经历你应该明智地选择你的文本编辑器。 

+ +

可做选择的文本编辑器数量实在是太多了，因为文本编辑器对于计算机科学来说是如此基础（是的，web开发是计算机科学）。按理想来说，你应该尽你可能的尝试足够多的编辑器然后感受出来哪一款适合你的工作流程。但是我们将会给予你一些初学者的建议。

+ +

以下是一些你应该考虑的基本问题：

+ + + +

注意我们没有提及价格。显然，这也是要注意的，但一件产品的成本和它的质量或性能几乎没有关系。很大概率下，你能找到一个合适的免费文本编辑器。

+ +

以下是一些流行的编辑器：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
编辑器授权条款价格操作系统支持文档可延展性
AtomMIT/BSD免费Windows, Mac, Linux论坛在线指南是
BracketsMIT/BSD免费Windows, Mac, Linux论坛， IRCGitHub Wiki是
Coda闭源$99Mac推特, 论坛, 电子邮件电子书是
EmacsGPL 3免费Windows, Mac, Linux常见问题, 邮件清单, 新闻组在线指南是
Espresso闭源$75Mac常见问题, 电子邮件没有终端用户文档，但有插件文档是
GeditGPL免费Windows, Mac, Linux邮件清单, IRC在线指南是
Komodo EditMPL免费Windows, Mac, Linux论坛在线指南是
Notepad++GPL免费Windows论坛Wiki是
PSPad闭源免费Windows常见问题, 论坛在线帮助是
Sublime Text闭源$70Windows, Mac, Linux论坛官方文档， 非官方文档是
TextMate闭源$50Mac推特, IRC, 邮件清单, 电子邮件在线指南， Wiki是
TextWrangler闭源免费Mac常见问题, 论坛PDF指南否
Vim特殊开放式许可证免费Windows, Mac, Linux邮件清单在线指南是
Visual Studio CodeMIT许可下的开放源码/ 产品的具体许可证免费Windows, Mac, Linux常见问题     文件是
+ +

主动学习

+ +

还没有主动学习。 请考虑投稿贡献。

+ +

深入挖掘

+ +

选择标准

+ +

所以，更详细地说，你在选择文本编辑器时应该怎么考虑？

+ +

我想在哪个操作系统上工作？

+ +

当然这是你的选择。然而，一些编辑器只支持特定的操作系统，所以如果你喜欢切换系统，这将会缩小你的选择范围。只要在你的系统上运行了，任何文本编辑器都能 完成工作，但跨平台的编辑器可以轻松的在操作系统间迁移。

+ +

所以首先找出你使用的操作系统，然后检查指定的编辑器是否支持你的操作系统。大多数编辑器在他们的网站上指定了是否支持Windows或Mac，尽管一些编辑器只支持某些版本（比如说只有Windows 7或更高版本而不是Vista）。如果正在运行Ubuntu，最好的方法是在Ubuntu软件中心内进行搜索。当然，一般来说，Linux / UNIX系列是一个相当多元化的地方，其中不同的发行版与不同的不兼容的包装系统配合使用。这意味着，如果你强烈地（而不是微弱的）想使用某些未经编译的文本编辑器，则可能需要下载源码自己编译它。

+ +

我想使用什么样的技术?

+ +

一般来说，任何文本编辑器都可以打开任意文本文件。这对于自己写笔记来说是非常有用的，但是当你使用HTML，CSS和JavaScript进行Web开发和编写时，你将生产出很大的复杂文件。通过选择一个适用你使用的技术的文本编辑器，可以使你更轻松自如。许多文本编辑器可以帮助你实现如下功能

+ + + +

大多数文本编辑器现在都支持代码着色，但不一定是支持其他两个功能。尤其确保你的文本编辑器会对HTML，CSS和JavaScript进行颜色编码。

+ +

我希望我的文本编辑器具备哪些基本功能?

+ +

这取决于你的需求和计划。以下功能通常是很有帮助的：

+ + + +

我想为我的文本编辑器添加额外功能吗?

+ +

可扩展的编辑器具有较少的内置功能，但可以根据你的需要进行扩展。

+ +

如果你不确定要使用哪些功能，或者你最喜欢的编辑器缺少这些功能，使用可扩展编辑器吧。最好的编辑器将会提供许多插件，理想的方法是自动查找和安装新的插件。

+ +

如果你喜欢的功能很多 ，并且你的编辑器因为安装的插件而变慢，请尝试使用IDE（集成开发环境）。IDE在一个界面中提供了许多工具，对于初学者来说，这是一个令人望而生畏的工作，但是如果你感觉你的文本编辑器功能有限，这是一个不错的选项。以下是一些流行的IDE：

+ + + +

当使用文本编辑器时我需要支持或者帮助吗?

+ +

如果在使用软件时可以获得帮助总是令人高兴的。对于文本编辑器，请检查两种不同类型的支持：

+ +
    +
  1. 面向用户的内容（常见问题，指南，在线帮助）
    2. +
  2. 与开发者和其他用户讨论（论坛，电子邮件，IRC）
    3. +
+ +

在学习如何使用编辑器时使用书面文档。如果在安装或使用编辑器时遇到了疑难问题，请与其他用户联系。

+ +

对我来说文本编辑器的外观和感觉重要吗?

+ +

这个问题在于个人品味，但有些人喜欢自定义UI（用户界面）的每一个细节，从颜色到按钮位置。编辑器的灵活性差异很大，所以选择前先检查一下。找到一个可以改变配色方案的文本编辑器并不难，但是如果你想要大量的自定义，你可能最好使用IDE。

+ +

安装并设置

+ +

安装文本编辑器通常很简单。方法根据您的平台而有所不同，但都不难：

+ + + +

当您安装新的文本编辑器时，您的操作系统可能会继续使用其默认编辑器打开文本文件，直到您更改文件关联。这些说明将帮助您在指定操作系统中双击打开文件时选定首选编辑器：

+ + + +

下一步

+ +

现在你已经选择了一个合适的文本编辑器，现在你可以花一些时间来搭建你的基本工作环境，或者你想立即使用它，你可以写下你的第一个网页。

diff --git a/files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html b/files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html new file mode 100644 index 0000000000..ab8eee6e1a --- /dev/null +++ b/files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html @@ -0,0 +1,91 @@ +--- +title: 互联网是如何工作的 +slug: learn/How_the_Internet_works +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +
+

 这篇文章讨论什么是互联网以及它是如何工作的.

+
+ + + + + + + + + + + + +
前提:无，但是鼓励先去阅读 关于设定项目目标的文章
目标:你将会学习到网络的基础技术，以及它与互联网的区别.
+ +

概述

+ +

互联网是网络的支柱，以这种技术为基础使网络成为可能。作为基础，互联网是把电脑互相连接起来的一个巨大网络。

+ +

互联网的历史有些模糊不清。它始于1960年美国军方资助的研究项目。1980年在许多公共大学和公司的支持下，它演变为一种公共基础设施。随着时间的变化，各种各样的技术支持着互联网的发展，但是它的工作方式却没有改变多少：互联网确保所有的电脑之间的连接，无论发生什么他们依旧保持连接。

+ +

自主学习

+ + + +

深入探索

+ +

一个简单的网络

+ +

当两台电脑需要通信的时候，你必须要连接他们，无论通过有线方式(通常是网线) 还是无线方式（比如 WiFi 或 蓝牙 )。所有现代电脑都支持这些连接。

+ +
+

提示: 接下来的内容，我们将只谈论有线连接， 而无线连接的原理与此相同。

+
+ +

Two computers linked together

+ +

通常一个网络不仅限于两台电脑。你可以尽你所想地连接电脑，但是情况立刻变得复杂了。如果你尝试连接，比如说十台电脑，每台电脑有九个插头，总共需要45条网线。

+ +

Ten computers all together

+ +

为了解决这个问题，网络上的每台电脑需要链接到一个叫做路由器（router）的特殊小电脑。路由器只干一件事：就像火车站的信号员，它要确保从一台电脑上发出的一条信息可以到达正确的电脑。为了把信息发送给电脑B，电脑A必须把信息发送给路由器，路由器将收到的信息转发给电脑B，并且确保信息不会发送给电脑C。

+ +

一旦我们把路由器加入到这个系统，我们的网络中便只需要十条网线：每台电脑一个插口，路由器上十个插口。

+ +

Ten computers with a router

+ +

网络中的网

+ +

到目前为止一切都很好 . 但是我们要连接成百上千，上亿台电脑呢? 当然一台路由器覆盖不了这么远, 但是,如果你阅读得比较认真，我们曾提到路由器像其他电脑一样,所以我们为什么不把两个路由器彼此连接呢?

+ +

Two routers linked together

+ +

我们把电脑连接路由器, 接着路由器连接路由器,我们就会有无穷的规模。

+ +

Routers linked to routers

+ +

这样网络越来越接近我们所说的互联网 ，但是我们遗漏了一些东西。我们建立网络是为了我们自己的目的。所以不同的人会建立不同的网络：你的朋友，你的邻居，每个人都可以拥有自己的计算机网络。在你的房子和世界其它地方之间架设电缆将这些不同的网络连接起来是不可能的，那么你该如何处理这件事呢？其实已经有电缆连接到你的房子了，比如，电线和电话。电话基础设施已经可以把你家连接到世界的任何角落，所以它就是我们需要的线。为了连接电话这种网络我们需要一种基础设备叫做调制解调器（modem），调制解调器可以把网络信息变成电话设施可以处理的信息，反之亦然。

+ +

A router linked to a modem

+ +

这样，我们可以通过电话基础设施相互连接。下一步是把信息从我们的网络发送到我们想要到达的地方。为了做这些，我们需要把我们的网络连接到互联网服务提供商（ISP）。ISP是一家可以管理一些特殊的路由器的公司，这些路由器连接其他ISP的路由器. 你的网络消息可以被ISP捕获并发送到相应的网络。互联网就是由这些所有的网络设施所组成。

+ +

Full Internet stack

+ +

寻找电脑

+ +

如果你想给一台电脑发送一条信息，你必须指明它是哪台电脑。因此，任何连接到网络中的电脑都需要有一个唯一的地址来标记它，叫做 "IP 地址" （IP代表网络协议）。这个地址由四部分被点分隔的数字序列组成，比如：192.168.2.10。

+ +

对于电脑这样已经很好了,但是人类却很难记忆这一串地址。为了简单处理，我们给IP地址取一个容易阅读的别名：域名。比如，google.com 被用于IP地址 172.217.7.14。这样我们通过这些域名可以很容易的通过网络连接到电脑.

+ +

互联网（Internet）和网络（web）

+ +

你可能注意到了, 当我们通过浏览器上网的时候，我们通常是用域名去到达一个网站。这是否意味着互联网（Internet）和网络（Web）是一样的？事实并非这么简单。正如向我们所见，互联网是一种基础的技术，它允许我们把成千上万的电脑连接在一起。在这些电脑中，有 一些电脑（我们称之为网络服务器（Web servers））可以发送一些浏览器可以理解的信息。互联网是基础设施，网络是建立在这种基础设施之上的服务。值得注意的是，一些其他服务运行在互联网之上，比如邮箱和{{Glossary("IRC")}}.

+ +

下一步

+ + diff --git a/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html b/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html new file mode 100644 index 0000000000..69081b9745 --- /dev/null +++ b/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html @@ -0,0 +1,230 @@ +--- +title: 什么是浏览器开发者工具？ +slug: Learn/Discover_browser_developer_tools +tags: + - 开发工具 + - 调试 +translation_of: Learn/Common_questions/What_are_browser_developer_tools +--- +
+

每一个现代网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的HTML、CSS和JavaScript，显示每个资源页面的请求以及载入所花费的时间。本文阐述了如何利用浏览器的开发工具的基本功能。

+
+ +
+

注意：在你运行下面的例子之前，打开我们在Web开发入门系列文章中建立的初学者示例网站。你应该按照下面的步骤打开。

+
+ +

如何在浏览器中打开开发者工具

+ +

开发者工具内置在您的浏览器的子窗口之中，大概像这样：

+ +

+ +

如何打开它？有三种方式：

+ + + +

+ +

检查器（Inspector）：DOM 浏览器和CSS编辑器

+ +

开发者工具在打开时默认为检查器页面，如下图所示。这个工具可以让你看到你的网页的HTML运行时的样子，以及哪些CSS规则被应用到了页面上元素。它还允许您立即修改HTML和CSS并在浏览器中实时观察修改的结果。

+ +

+ +

如果你看不到调试器，

+ + + +

探索DOM检查器

+ +

首先在DOM检查器中右键单击（按Ctrl点击）一个HTML元素，看上下文菜单。菜单选项各不相同，但主要功能是相同的：

+ +

+ + + +

现在试着编辑一些你的DOM。双击元素，或在页面内容里右键单击它并选择编辑HTML。你可以做出任何你想要的改变，但你不能保存。

+ +

探索CSS编辑器

+ +

默认情况下，CSS编辑器显示当前所选元素应用的CSS规则：

+ +

这些功能特别有用：

+ + + +

您会注意到CSS查看器顶部的一些可点击的选项卡：

+ + + +

了解更多

+ +

了解更多Inspector在不同的浏览器中的细节：

+ + + +

JavaScript调试器

+ +

你可在JavaScript调试器中查看变量的值，或者设置断点。断点的作用是让程序在你指定的位置暂停，以便你来调试程序并确定问题所在。

+ +

+ +

如何打开调试器：

+ +

火狐，谷歌，IE，Edge：F12

+ +

Safari：开打开发者工具，然后选择 "Debugger" 标签。

+ +

尝一尝调试器的味

+ +

火狐的调试器有三个面板

+ +

文件列表

+ +

第一个面板位于左边，它包涵着你正在调试的网页的文件列表。从列表中选中你要操作的文件。通过点击选中一个文件，可以在调试中间的面板看到它的内容。

+ +

+ + + +

源码

+ +

在你想要停止执行的位置设置间断点。在下面图片中，高亮的第18行就是被设置的断点。

+ +

+ +

“监视表达示”和“断点”

+ +

右边的面板会显示你添加的监视表达示与断点。

+ +

在下图中，第一个区域，监视表达示，显示了变量 listItem 已经被添加，你可以展开列表查看里面的值。

+ +

接下来的部分，断点 标签，列出了页面上设置的断点。在 example.js（上上个图中）中，一个断点被定位在语句 listItems.push(inputNewItem.value); 上。

+ +

最后两个部分，只在代码运行时才出现。

+ +

调用栈 区向你显示哪个代码执行后会达到当前行。你能看到代码处理了一次鼠标点击后，停在了断点处。

+ +

最后一部分，Scopes，显示了在代码执行过程中，可见变量值的变化。例如，在下面图片中，你可以看到对像在addItemClick函数中是如何变化的。

+ + + +

+ +

再了解一些

+ +

了解不同浏览器中的JavaScript调试器：

+ + + +

JavaScript控制台  

+ +

JavaScript控制台是一个非常有用的工具，用于调试没有按预期运行的JavaScript。它允许您针对浏览器当前加载的页面运行JavaScript行，并报告浏览器尝试执行代码时遇到的错误。要在任何浏览器中访问控制台，只需按控制台按钮。 （在Internet Explorer中，按Ctrl + 2.）这将给你一个如下所示的窗口:

+ +

+ +

要查看会发生什么，请尝试逐个输入以下代码片段（然后按Enter键）:

+ +
    +
  1. + 
    alert('hello!');
    +
    2. +
  2. + 
    document.querySelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    var my_image = document.createElement('img');
+
+//下面的url已经不再可用，这里注释掉，后面补上了一个可以url
+//且myImage在文章开始给的“初学者示例网址”存在声明冲突，所以改为my_image
+//myImage.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
+my_image.setAttribute('src','https://media.giphy.com/media/3o6ozhxFlr4Ung40RG/giphy.gif');
+
+document.querySelector('h1').appendChild(my_image);
    +
    4. +
+ +

现在尝试输入以下错误的代码版本，看看你得到什么。

+ +
    +
  1. + 
    alert('hello!);
    +
    2. +
  2. + 
    document.cheeseSelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    var my_Image = document.createElement('img');
+myBanana.setAttribute('src','https://media.giphy.com/media/3o6ozhxFlr4Ung40RG/giphy.gif');
+document.querySelector('h1').appendChild(my_Image);
    +
    4. +
+ +

您将开始看到浏览器返回的错误类型。通常这些错误是相当神秘的，但是应该很简单的把这些问题解决出来！

+ +

了解更多

+ +

了解更多JavaScript控制台在不同浏览器中的细节:

+ + + +

 参见

+ + diff --git "a/files/zh-cn/learn/common_questions/\345\256\236\347\224\250\346\226\207\346\234\254\347\274\226\350\276\221\345\231\250/index.html" "b/files/zh-cn/learn/common_questions/\345\256\236\347\224\250\346\226\207\346\234\254\347\274\226\350\276\221\345\231\250/index.html" deleted file mode 100644 index f8f394191d..0000000000 --- "a/files/zh-cn/learn/common_questions/\345\256\236\347\224\250\346\226\207\346\234\254\347\274\226\350\276\221\345\231\250/index.html" +++ /dev/null @@ -1,295 +0,0 @@ ---- -title: 什么文本编辑器比较好用？ -slug: Learn/Common_questions/实用文本编辑器 -translation_of: Learn/Common_questions/Available_text_editors ---- -
{{IncludeSubnav("/en-US/Learn")}}
- -
-

在这篇文章中我们强调了关于web开发者安装文本编辑器的一些考虑事项。

-
- - - - - - - - - - - - -
前提条件:你应该已经知晓了  为了建立一个网站所需的各种软件。
目标:学习作为一个web开发者如何选择一个最适合自己需求的文本编辑器。
- -

概要

- -

一个网站包括很多文本文件， 所以为了拥有一个有趣的，令人愉快的开发经历你应该明智地选择你的文本编辑器。 

- -

可做选择的文本编辑器数量实在是太多了，因为文本编辑器对于计算机科学来说是如此基础（是的，web开发是计算机科学）。按理想来说，你应该尽你可能的尝试足够多的编辑器然后感受出来哪一款适合你的工作流程。但是我们将会给予你一些初学者的建议。

- -

以下是一些你应该考虑的基本问题：

- - - -

注意我们没有提及价格。显然，这也是要注意的，但一件产品的成本和它的质量或性能几乎没有关系。很大概率下，你能找到一个合适的免费文本编辑器。

- -

以下是一些流行的编辑器：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
编辑器授权条款价格操作系统支持文档可延展性
AtomMIT/BSD免费Windows, Mac, Linux论坛在线指南是
BracketsMIT/BSD免费Windows, Mac, Linux论坛， IRCGitHub Wiki是
Coda闭源$99Mac推特, 论坛, 电子邮件电子书是
EmacsGPL 3免费Windows, Mac, Linux常见问题, 邮件清单, 新闻组在线指南是
Espresso闭源$75Mac常见问题, 电子邮件没有终端用户文档，但有插件文档是
GeditGPL免费Windows, Mac, Linux邮件清单, IRC在线指南是
Komodo EditMPL免费Windows, Mac, Linux论坛在线指南是
Notepad++GPL免费Windows论坛Wiki是
PSPad闭源免费Windows常见问题, 论坛在线帮助是
Sublime Text闭源$70Windows, Mac, Linux论坛官方文档， 非官方文档是
TextMate闭源$50Mac推特, IRC, 邮件清单, 电子邮件在线指南， Wiki是
TextWrangler闭源免费Mac常见问题, 论坛PDF指南否
Vim特殊开放式许可证免费Windows, Mac, Linux邮件清单在线指南是
Visual Studio CodeMIT许可下的开放源码/ 产品的具体许可证免费Windows, Mac, Linux常见问题     文件是
- -

主动学习

- -

还没有主动学习。 请考虑投稿贡献。

- -

深入挖掘

- -

选择标准

- -

所以，更详细地说，你在选择文本编辑器时应该怎么考虑？

- -

我想在哪个操作系统上工作？

- -

当然这是你的选择。然而，一些编辑器只支持特定的操作系统，所以如果你喜欢切换系统，这将会缩小你的选择范围。只要在你的系统上运行了，任何文本编辑器都能 完成工作，但跨平台的编辑器可以轻松的在操作系统间迁移。

- -

所以首先找出你使用的操作系统，然后检查指定的编辑器是否支持你的操作系统。大多数编辑器在他们的网站上指定了是否支持Windows或Mac，尽管一些编辑器只支持某些版本（比如说只有Windows 7或更高版本而不是Vista）。如果正在运行Ubuntu，最好的方法是在Ubuntu软件中心内进行搜索。当然，一般来说，Linux / UNIX系列是一个相当多元化的地方，其中不同的发行版与不同的不兼容的包装系统配合使用。这意味着，如果你强烈地（而不是微弱的）想使用某些未经编译的文本编辑器，则可能需要下载源码自己编译它。

- -

我想使用什么样的技术?

- -

一般来说，任何文本编辑器都可以打开任意文本文件。这对于自己写笔记来说是非常有用的，但是当你使用HTML，CSS和JavaScript进行Web开发和编写时，你将生产出很大的复杂文件。通过选择一个适用你使用的技术的文本编辑器，可以使你更轻松自如。许多文本编辑器可以帮助你实现如下功能

- - - -

大多数文本编辑器现在都支持代码着色，但不一定是支持其他两个功能。尤其确保你的文本编辑器会对HTML，CSS和JavaScript进行颜色编码。

- -

我希望我的文本编辑器具备哪些基本功能?

- -

这取决于你的需求和计划。以下功能通常是很有帮助的：

- - - -

我想为我的文本编辑器添加额外功能吗?

- -

可扩展的编辑器具有较少的内置功能，但可以根据你的需要进行扩展。

- -

如果你不确定要使用哪些功能，或者你最喜欢的编辑器缺少这些功能，使用可扩展编辑器吧。最好的编辑器将会提供许多插件，理想的方法是自动查找和安装新的插件。

- -

如果你喜欢的功能很多 ，并且你的编辑器因为安装的插件而变慢，请尝试使用IDE（集成开发环境）。IDE在一个界面中提供了许多工具，对于初学者来说，这是一个令人望而生畏的工作，但是如果你感觉你的文本编辑器功能有限，这是一个不错的选项。以下是一些流行的IDE：

- - - -

当使用文本编辑器时我需要支持或者帮助吗?

- -

如果在使用软件时可以获得帮助总是令人高兴的。对于文本编辑器，请检查两种不同类型的支持：

- -
    -
  1. 面向用户的内容（常见问题，指南，在线帮助）
    2. -
  2. 与开发者和其他用户讨论（论坛，电子邮件，IRC）
    3. -
- -

在学习如何使用编辑器时使用书面文档。如果在安装或使用编辑器时遇到了疑难问题，请与其他用户联系。

- -

对我来说文本编辑器的外观和感觉重要吗?

- -

这个问题在于个人品味，但有些人喜欢自定义UI（用户界面）的每一个细节，从颜色到按钮位置。编辑器的灵活性差异很大，所以选择前先检查一下。找到一个可以改变配色方案的文本编辑器并不难，但是如果你想要大量的自定义，你可能最好使用IDE。

- -

安装并设置

- -

安装文本编辑器通常很简单。方法根据您的平台而有所不同，但都不难：

- - - -

当您安装新的文本编辑器时，您的操作系统可能会继续使用其默认编辑器打开文本文件，直到您更改文件关联。这些说明将帮助您在指定操作系统中双击打开文件时选定首选编辑器：

- - - -

下一步

- -

现在你已经选择了一个合适的文本编辑器，现在你可以花一些时间来搭建你的基本工作环境，或者你想立即使用它，你可以写下你的第一个网页。

diff --git a/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html new file mode 100644 index 0000000000..6ddd1d114b --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html @@ -0,0 +1,88 @@ +--- +title: 一个漂亮的盒子 +slug: Learn/CSS/Styling_boxes/A_cool_looking_box +translation_of: Learn/CSS/Building_blocks/A_cool_looking_box +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
+ +

在这个评估里，通过尝试创造一个引人瞩目的盒子，你将得到更多关于如何创造酷炫盒子的练习。

+ + + + + + + + + + + + +
前提条件：在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。
目的：测试对CSS盒模型和其他盒相关特性的掌握程度，比如背景和边框。
+ +

起点

+ +

在开始评估之前，你需要：

+ + + +
+

提醒：或者你也可以用JSBin或Thimble这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<style>元素里就好。

+
+ +

项目简介

+ +

你的任务是创建一个酷炫的盒子，并探索CSS的乐趣。

+ +

一般任务

+ + + +

样式化盒子

+ +

给{{htmlelement("p")}}添加样式：

+ + + +

范例

+ +

完成之后的盒子可能会像下面的截图这样：

+ +

+ +

评估

+ +

如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在Learning Area Discourse thread或Mozilla IRC的#mdn IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！

+ +

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

+ +

在这个模块里

+ + + +

​​​ 

diff --git a/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html new file mode 100644 index 0000000000..692071dfde --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html @@ -0,0 +1,101 @@ +--- +title: 创建精美的信纸 +slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper +translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}
+ +

如果你想给人留下好印象，把信写在一张精美的信纸上会是个不错的开始，在这个评估里我们希望你能创建一个在线模版来达到这样的效果。

+ + + + + + + + + + + + +
前提条件：在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。
目的：测试对CSS盒模型和其他盒相关特性的掌握程度，比如实现背景等。
+ +

起点

+ +

在开始评估之前，你需要：

+ + + +
+

提醒：或者你也可以用JSBin或Thimble这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<style>元素里就好。

+
+ +

项目简介

+ +

你已经有了创建一个信纸模版所需的所有文件，只需把它们放到一起就好。为了达到目标，你需要：

+ +

信纸主体

+ + + +

标志

+ + + +

提示和技巧

+ + + +

范例

+ +

完成之后的信纸可能会像下面的截图这样：

+ +

+ +

 

+ +

评估

+ +

如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在 discussion thread for this exercise 或Mozilla IRC的#mdn IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

+ +

 

+ +

在这个模块里

+ + + +

 

diff --git a/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..b246af87fe --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -0,0 +1,127 @@ +--- +title: 基本的CSS理解 +slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension +tags: + - 初学者 + - 盒模型 + - 评估 + - 选择器 +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+ +

你已经在这个模块中了解到了很多内容, 所以当你达到这个模块的最后一篇文章的时候，感觉一定非常不错吧！在你继续之前的最后一步，就是完成对于这个模块的测验。本次测验涉及到几个相关的练习，你必须按顺序完成，这样你才能设计出最终的成品：一张名片/游戏玩家卡片/社交媒体的简介。

+ + + + + + + + + + + + +
学习本章的前提条件:在尝试这个测验之前，你应该已经完成了这个模块中所有文章的学习。
目标：来测试对 CSS 理论、语法、功能性的基本理解。
+ +

起点

+ +

在开始测验之前，你应该:

+ + + +
+

注意: 另外, 你可以使用一个网站比如 JSBin 或 Thimble 来做你的测验。你可以复制 HTML 和 CSS 到其中一个在线编辑器中，以及使用这个 this URL 来让 <img> 显示图片。如果你使用的在线编辑器无法让你链接 CSS 文件 (没有单独的 CSS 面板)，你也可以将 CSS 直接放入<style> 元素中。

+
+ +

项目概要

+ +

我们已经为你提供了一些原始的 HTML 和一张图片，然后需要编写必要的 CSS 来让其成为一个漂亮的网上小名片，可能大小是游戏玩家卡片或社交媒体简介的两倍。下面的段落描述了你需要做的事情。

+ +

基本设置:

+ + + +

关注我们为你提供的选择器和规则集：

+ + + +

你需要写的新规则：

+ + + +
+

注意: 记住第二条规则集会将 font-size: 10px; 设置在 <html> 元素上 — 这意味着 <html> 的任何后代中，一个em将会等于10px而不是默认的 16px 。(这是当然的，如果在层次结构中，有不同的 font-size 设置于其上，问题中的后代没有任何的祖先位于 em元素和 <html> 之间。这可能会影响您所需要的值，尽管在这个简单的示例中，这不是问题。)

+
+ +

其他事情要考虑：

+ + + +

注意和提示

+ + + +

示例

+ +

完成的设计应如下图所示：

+ +

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+ +

评估

+ +

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

+ +

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

+ +

在本单元中

+ + diff --git a/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html new file mode 100644 index 0000000000..f907c93a3c --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html @@ -0,0 +1,151 @@ +--- +title: 处理不同方向的文本 +slug: Learn/CSS/Building_blocks/处理_不同_方向的_文本 +translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
+ +

目前为止我们在CSS学习中遇到的许多属性和属性值与显示器的物理尺度紧密相关。例如，我们会在上、右、下、左设置边框。这些物理尺寸与水平排布的文本相得益彰，并且，默认浏览器对方向从左到右的文本（如英文或法文）的支持，要优于从右到左的文本（如阿拉伯语）的支持。

+ +

然而，CSS在最近几年得到了改进，以更好地支持不同方向的文本，包括从右到左，也包括从上到下的文本（如日文）——这些不同的方向属性被称为书写模式。随着学习的深入，当你开始试着对页面进行布局时，对书写模式的了解将会对你很有帮助，为此我们在这里加以介绍。

+ + + + + + + + + + + + +
先决条件：计算机基础知识，基本软件（参见basic software installed），文件管理的基本知识（参见working with files），HTML基础（HTML 学习Introduction to HTML）以及CSS基础（学习CSS first steps）。
目标：了解书写模式对现代CSS的重要
+ +

什么是书写模式

+ +

CSS中的书写模式是指文本的排列方向是横向还是纵向的。{{cssxref("writing-mode")}} 属性使我们从一种模式切换到另一种模式。为此，你不必使用一种竖向的语言——你还可以更改部分文字的方向以实现创新性的布局。

+ +

下面的例子中，我们使用writing-mode: vertical-rl对一个标题的显示进行设置。现在，标题文本是竖向的了。竖向文本在平面设计中很常见，也可以为你的网页设计增添更加有趣的外观。

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}

+ +

writing-mode的三个值分别是：

+ + + +

因此，writing-mode属性实际上设定的是页面上块级元素的显示方向——要么是从上到下，要么是从右到左，要么是从左到右。而这决定了文本的方向。

+ +

书写模式、块级布局和内联布局

+ +

我们已经讨论了块级布局和内联布局（block and inline layout），也知道外部显示类型元素分为块级元素和内联元素。如上所述，块级显示和内联显示与文本的书写模式（而非屏幕的物理显示）密切相关。如果你使用书写模式的显示是横向的，如英文，那么块在页面上的显示就是从上到下的。

+ +

用一个例子可以更清楚地说明这一点。下一个例子中有两个盒子，分别包含一个标题和一个段落。第一个盒子应用的是writing-mode: horizontal-tb，这是一个从上到下的横向的书写模式。第二个盒子应用的是writing-mode: vertical-rl，这是一个从右到左的纵向的书写模式。

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}

+ +

当我们切换书写模式时，我们也在改变块和内联文本的方向。horizontal-tb书写模式下块的方向是从上到下的横向的，而 vertical-rl书写模式下块的方向是从右到左的纵向的。因此，块维度指的总是块在页面书写模式下的显示方向。而内联维度指的总是文本方向。 

+ +

这张图展示了在水平书写模式下的两种维度。

+ +

这张图片展示了纵向书写模式下的两种维度。

+ +

+ +

一旦你开始接触CSS布局，尤其是更新的布局方法，这些关于块级元素和内联元素的概念会变得非常重要。我之后会返回来再看。

+ +

方向

+ +

除了书写模式，我们还可以设置文本方向。正如上面所言，有些语言（如阿拉伯语）是横向书写的，但是是从右向左。当你在对页面布局进行创新时，你可能不这么使用——如果你只是想讲某部分内容放到右边排列下来，还有其他方法可以选择——然而，重要的是能意识到，这其实是CSS本身功能的一部分。网页可不仅限于从左向右排列的语言！

+ +

由于书写模式和文本方向都是可变的，新的CSS布局方法不再定义从左到右和从上到下，而是将这些连同内联元素和块级元素的开头和结尾一起考量。现在不必过于担心，但是带着这些概念开始你的布局，你会发现这对你掌握CSS非常有用。

+ +

逻辑属性和逻辑值

+ +

我们之所以要在这里探讨书写模式和方向，是因为目前为止我们已经了解了很多与屏幕的物理显示密切相关的很多属性，而书写模式和方向在水平书写模式下会很有意义。

+ +

让我们再来看看那两个盒子——一个用horizontal-tb设定了书写模式，一个用vertical-rl设定了书写模式。我为这两个盒子分别设定了宽度（ {{cssxref("width")}}）。可以看到，当盒子处于纵向书写模式下时，宽度也发生了变化，从而导致文本超出了盒子的范围。

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}

+ +

通过这一些列调整，我们想要的实际上是使宽和高随着书写模式一起变化。当处于纵向书写模式之下时，我们希望盒子可以向横向模式下一样得到拓宽。

+ +

为了更容易实现这样的转变，CSS最近开发了一系列映射属性。这些属性用逻辑（logical）和相对变化（flow relative）代替了像宽width和高height一样的物理属性。

+ +

横向书写模式下，映射到width的属性被称作内联尺寸（{{cssxref("inline-size")}}）——内联维度的尺寸。而映射height的属性被称为块级尺寸（{{cssxref("block-size")}}），这是块级维度的尺寸。下面的例子展示了替换掉width的inline-size是如何生效的。

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}

+ +

逻辑外边距、边框和内边距属性

+ +

我们在前面两节中学习了CSS的盒模型和CSS边框。在外边距、边框和内边距属性中，你会发现许多物理属性，例如 {{cssxref("margin-top")}}、 {{cssxref("padding-left")}}和 {{cssxref("border-bottom")}}。就像width和height有映射，这些属性也有相应的映射。

+ +

margin-top属性的映射是{{cssxref("margin-block-start")}}——总是指向块级维度开始处的边距。

+ +

{{cssxref("padding-left")}}属性映射到 {{cssxref("padding-inline-start")}}，这是应用到内联开始方向（这是该书写模式文本开始的地方）上的内边距。{{cssxref("border-bottom")}}属性映射到的是{{cssxref("border-block-end")}}，也就是块级维度结尾处的边框。

+ +

下面是物理和逻辑属性之间的对比。

+ +

如果你用writing-mode把盒子.box的书写模式改为vertical-rl，你将会看到尽管盒子的物理方向变了，盒子的物理属性仍然没变，然而逻辑属性会随着书写模式一起改变。

+ +

你还可以看到，二级标题{{htmlelement("h2")}}有一个黑色的底部边框border-bottom。你知道如何使得底部边框无论在那种书写模式下都位于文本的下方吗？

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}

+ +

对于每一个普通边距，都有许多属性可以参考，你可以在MDN页面（Logical Properties and Values）查看所有映射属性。

+ +

逻辑值

+ +

目前为止我们看到的都是逻辑属性的名称。还有一些属性的取值是一些物理值（如top、right、bottom和left）。这些值同样拥有逻辑值映射（block-start、inline-end、block-end和inline-start）。

+ +

例如，你可以将一张图片移到左边，并使文本环绕图片。你可以将left替换为inline-start ，就像下面的例子中一样。

+ +

将这个例子的书写模式改为vertical-rl，看看图片会发生什么。将inline-start改为inline-end来改变图片的移动。

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}

+ +

之类，我们同样使用逻辑边距值来保证在任何书写模式下边距的位置都是对的。

+ +
+

译者注：float的逻辑值暂时只有Firefox和Firefox for Android支持，上面的例子可能无法生效。

+
+ +

应该使用物理属性还是逻辑属性呢？

+ +

逻辑属性是在物理属性之后出现的，因而最近才开始在浏览器中应用。你可以通过查看MDN的属性页面来了解浏览器对逻辑属性的支持情况。如果你并没有应用多种书写模式，那么现在你可能更倾向于使用物理属性，因为这些在你使用弹性布局和网格布局时非常有用。

+ +

总结

+ +

本章介绍的概念在CSS的重要性越来越大。了解块级方向和内联方向，以及文本的排列方向如何随书写模式发生变化，将来会非常有用。即便你仅使用横向的书写模式，这也能帮助你了解。

+ +

在下一部分，我们将会看一下CSS中的溢出。

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}

+ +

模块目录

+ +
    +
  1. 层叠与继承
    2. +
  2. CSS选择器 + +
    3. +
  3. 盒模型
    4. +
  4. 背景与边框
    5. +
  5. 处理不同文字方向的文本
    6. +
  6. 溢出的内容
    7. +
  7. 值和单位
    8. +
  8. 在CSS中调整大小
    9. +
  9. 图像、媒体和表单元素
    10. +
  10. 样式化表格
    11. +
  11. 调试CSS
    12. +
  12. 组织CSS
    13. +
diff --git "a/files/zh-cn/learn/css/building_blocks/\345\244\204\347\220\206_\344\270\215\345\220\214_\346\226\271\345\220\221\347\232\204_\346\226\207\346\234\254/index.html" "b/files/zh-cn/learn/css/building_blocks/\345\244\204\347\220\206_\344\270\215\345\220\214_\346\226\271\345\220\221\347\232\204_\346\226\207\346\234\254/index.html" deleted file mode 100644 index f907c93a3c..0000000000 --- "a/files/zh-cn/learn/css/building_blocks/\345\244\204\347\220\206_\344\270\215\345\220\214_\346\226\271\345\220\221\347\232\204_\346\226\207\346\234\254/index.html" +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: 处理不同方向的文本 -slug: Learn/CSS/Building_blocks/处理_不同_方向的_文本 -translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
- -

目前为止我们在CSS学习中遇到的许多属性和属性值与显示器的物理尺度紧密相关。例如，我们会在上、右、下、左设置边框。这些物理尺寸与水平排布的文本相得益彰，并且，默认浏览器对方向从左到右的文本（如英文或法文）的支持，要优于从右到左的文本（如阿拉伯语）的支持。

- -

然而，CSS在最近几年得到了改进，以更好地支持不同方向的文本，包括从右到左，也包括从上到下的文本（如日文）——这些不同的方向属性被称为书写模式。随着学习的深入，当你开始试着对页面进行布局时，对书写模式的了解将会对你很有帮助，为此我们在这里加以介绍。

- - - - - - - - - - - - -
先决条件：计算机基础知识，基本软件（参见basic software installed），文件管理的基本知识（参见working with files），HTML基础（HTML 学习Introduction to HTML）以及CSS基础（学习CSS first steps）。
目标：了解书写模式对现代CSS的重要
- -

什么是书写模式

- -

CSS中的书写模式是指文本的排列方向是横向还是纵向的。{{cssxref("writing-mode")}} 属性使我们从一种模式切换到另一种模式。为此，你不必使用一种竖向的语言——你还可以更改部分文字的方向以实现创新性的布局。

- -

下面的例子中，我们使用writing-mode: vertical-rl对一个标题的显示进行设置。现在，标题文本是竖向的了。竖向文本在平面设计中很常见，也可以为你的网页设计增添更加有趣的外观。

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}

- -

writing-mode的三个值分别是：

- - - -

因此，writing-mode属性实际上设定的是页面上块级元素的显示方向——要么是从上到下，要么是从右到左，要么是从左到右。而这决定了文本的方向。

- -

书写模式、块级布局和内联布局

- -

我们已经讨论了块级布局和内联布局（block and inline layout），也知道外部显示类型元素分为块级元素和内联元素。如上所述，块级显示和内联显示与文本的书写模式（而非屏幕的物理显示）密切相关。如果你使用书写模式的显示是横向的，如英文，那么块在页面上的显示就是从上到下的。

- -

用一个例子可以更清楚地说明这一点。下一个例子中有两个盒子，分别包含一个标题和一个段落。第一个盒子应用的是writing-mode: horizontal-tb，这是一个从上到下的横向的书写模式。第二个盒子应用的是writing-mode: vertical-rl，这是一个从右到左的纵向的书写模式。

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}

- -

当我们切换书写模式时，我们也在改变块和内联文本的方向。horizontal-tb书写模式下块的方向是从上到下的横向的，而 vertical-rl书写模式下块的方向是从右到左的纵向的。因此，块维度指的总是块在页面书写模式下的显示方向。而内联维度指的总是文本方向。 

- -

这张图展示了在水平书写模式下的两种维度。

- -

这张图片展示了纵向书写模式下的两种维度。

- -

- -

一旦你开始接触CSS布局，尤其是更新的布局方法，这些关于块级元素和内联元素的概念会变得非常重要。我之后会返回来再看。

- -

方向

- -

除了书写模式，我们还可以设置文本方向。正如上面所言，有些语言（如阿拉伯语）是横向书写的，但是是从右向左。当你在对页面布局进行创新时，你可能不这么使用——如果你只是想讲某部分内容放到右边排列下来，还有其他方法可以选择——然而，重要的是能意识到，这其实是CSS本身功能的一部分。网页可不仅限于从左向右排列的语言！

- -

由于书写模式和文本方向都是可变的，新的CSS布局方法不再定义从左到右和从上到下，而是将这些连同内联元素和块级元素的开头和结尾一起考量。现在不必过于担心，但是带着这些概念开始你的布局，你会发现这对你掌握CSS非常有用。

- -

逻辑属性和逻辑值

- -

我们之所以要在这里探讨书写模式和方向，是因为目前为止我们已经了解了很多与屏幕的物理显示密切相关的很多属性，而书写模式和方向在水平书写模式下会很有意义。

- -

让我们再来看看那两个盒子——一个用horizontal-tb设定了书写模式，一个用vertical-rl设定了书写模式。我为这两个盒子分别设定了宽度（ {{cssxref("width")}}）。可以看到，当盒子处于纵向书写模式下时，宽度也发生了变化，从而导致文本超出了盒子的范围。

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}

- -

通过这一些列调整，我们想要的实际上是使宽和高随着书写模式一起变化。当处于纵向书写模式之下时，我们希望盒子可以向横向模式下一样得到拓宽。

- -

为了更容易实现这样的转变，CSS最近开发了一系列映射属性。这些属性用逻辑（logical）和相对变化（flow relative）代替了像宽width和高height一样的物理属性。

- -

横向书写模式下，映射到width的属性被称作内联尺寸（{{cssxref("inline-size")}}）——内联维度的尺寸。而映射height的属性被称为块级尺寸（{{cssxref("block-size")}}），这是块级维度的尺寸。下面的例子展示了替换掉width的inline-size是如何生效的。

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}

- -

逻辑外边距、边框和内边距属性

- -

我们在前面两节中学习了CSS的盒模型和CSS边框。在外边距、边框和内边距属性中，你会发现许多物理属性，例如 {{cssxref("margin-top")}}、 {{cssxref("padding-left")}}和 {{cssxref("border-bottom")}}。就像width和height有映射，这些属性也有相应的映射。

- -

margin-top属性的映射是{{cssxref("margin-block-start")}}——总是指向块级维度开始处的边距。

- -

{{cssxref("padding-left")}}属性映射到 {{cssxref("padding-inline-start")}}，这是应用到内联开始方向（这是该书写模式文本开始的地方）上的内边距。{{cssxref("border-bottom")}}属性映射到的是{{cssxref("border-block-end")}}，也就是块级维度结尾处的边框。

- -

下面是物理和逻辑属性之间的对比。

- -

如果你用writing-mode把盒子.box的书写模式改为vertical-rl，你将会看到尽管盒子的物理方向变了，盒子的物理属性仍然没变，然而逻辑属性会随着书写模式一起改变。

- -

你还可以看到，二级标题{{htmlelement("h2")}}有一个黑色的底部边框border-bottom。你知道如何使得底部边框无论在那种书写模式下都位于文本的下方吗？

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}

- -

对于每一个普通边距，都有许多属性可以参考，你可以在MDN页面（Logical Properties and Values）查看所有映射属性。

- -

逻辑值

- -

目前为止我们看到的都是逻辑属性的名称。还有一些属性的取值是一些物理值（如top、right、bottom和left）。这些值同样拥有逻辑值映射（block-start、inline-end、block-end和inline-start）。

- -

例如，你可以将一张图片移到左边，并使文本环绕图片。你可以将left替换为inline-start ，就像下面的例子中一样。

- -

将这个例子的书写模式改为vertical-rl，看看图片会发生什么。将inline-start改为inline-end来改变图片的移动。

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}

- -

之类，我们同样使用逻辑边距值来保证在任何书写模式下边距的位置都是对的。

- -
-

译者注：float的逻辑值暂时只有Firefox和Firefox for Android支持，上面的例子可能无法生效。

-
- -

应该使用物理属性还是逻辑属性呢？

- -

逻辑属性是在物理属性之后出现的，因而最近才开始在浏览器中应用。你可以通过查看MDN的属性页面来了解浏览器对逻辑属性的支持情况。如果你并没有应用多种书写模式，那么现在你可能更倾向于使用物理属性，因为这些在你使用弹性布局和网格布局时非常有用。

- -

总结

- -

本章介绍的概念在CSS的重要性越来越大。了解块级方向和内联方向，以及文本的排列方向如何随书写模式发生变化，将来会非常有用。即便你仅使用横向的书写模式，这也能帮助你了解。

- -

在下一部分，我们将会看一下CSS中的溢出。

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}

- -

模块目录

- -
    -
  1. 层叠与继承
    2. -
  2. CSS选择器 - -
    3. -
  3. 盒模型
    4. -
  4. 背景与边框
    5. -
  5. 处理不同文字方向的文本
    6. -
  6. 溢出的内容
    7. -
  7. 值和单位
    8. -
  8. 在CSS中调整大小
    9. -
  9. 图像、媒体和表单元素
    10. -
  10. 样式化表格
    11. -
  11. 调试CSS
    12. -
  12. 组织CSS
    13. -
diff --git a/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.html b/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.html new file mode 100644 index 0000000000..58313b6fdd --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.html @@ -0,0 +1,577 @@ +--- +title: 传统的布局方法 +slug: Learn/CSS/CSS_layout/传统的布局方法 +translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

+ +

在CSS布局中，网格系统是一种非常常见的布局方式，并且在CSS 网格布局之前，它们倾向于由浮动和其他的布局功能实现。假想你的布局是一组数字标注的列（例如4、6或者12），然后把你的内容填充到这些想象的列中。这篇文章将要探讨这种早期的方法是怎么实现的，来帮助你在旧项目工作时更好地理解他们。

+ + + + + + + + + + + + +
学习前提：HTML 基础(学习 Introduction to HTML),并且了解CSS是怎么工作的(学习 Introduction to CSS and Styling boxes.)
目标：了解浏览器CSS网格布局系统的基本概念。
+ +

CSS网格布局之前的布局与网格系统

+ +

一个来自设计领域的人或许会惊讶，CSS直到最近才有网格系统，不仅如此，我们还用了许多次优方法来建立类网格设计。我们现在把这些称为“古老”的方法。

+ +

对于新项目来说，大多数情况下CSS网格布局（CSS Grid Layout）被用来和其他一个或多个现代的布局方法结合，以形成布局的基础。但是你会时不时的遇到采用这种古老方法的“网格系统”。值得了解它们是如何工作的，以及为什么它们和CSS网格布局不同。

+ +

这个课程将会解释基于float和flexbox的网格系统和网格框架是如何工作的。学习过网格布局之后，你可能会惊讶，这些看起来真的好复杂！如果你需要为不支持新技术的老浏览器上创建后备代码的话，这些知识将会变的十分有用，而且你也可以在使用这些类别系统的已有工程上工作。

+ +

值得铭记在心的是，在我们探索这些系统时，它们里面没有哪个的建立方式是像通过CSS网格布局创建网格那样，真的建立一个网格。他们通过给目标一个大小， 然后推动它们，让它们看起来像网格一样排列成一条线。

+ +

两列布局

+ +

让我们从最简单的实例开始——一个两列布局。你可以按照步骤在你的电脑上创建一个新的 index.html，先用一个简单HTML模板填充它，然后在适当的位置填充下面的代码。在这节底部，你可以看到一个展示最终代码样貌的实时实例。

+ +

首先，我们需要在我们的栏中放入一些内容。把现在在body中的内容替换成下面的代码：

+ +
<h1>2 column layout example</h1>
+<div>
+  <h2>First column</h2>
+  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+</div>
+
+<div>
+  <h2>Second column</h2>
+  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+</div>
+ +

每一列都需要一个上一级元素来包含内容，这样我们可以一次性操作所有内容。在这个例子中我们选择了{{htmlelement("div")}}， 但是你可以选择其他更合适的，例如{{htmlelement("article")}}, {{htmlelement("section")}}, 和 {{htmlelement("aside")}}，或者是任何别的元素。

+ +

现在我们来看CSS。首先，应用以下的代码来对HTML进行基本设置：

+ +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+}
+ +

body将会占据90%的视口宽度，直到达到900像素，在这种情况下，它将固定并保持在视口正中。 默认情况下，它的子项（the {{htmlelement("h1")}} 和两个 {{htmlelement("div")}}）将会达到正文宽度的100%。如果我们希望两个{{htmlelement("div")}}，一个浮在窗口的一边，另一个浮动在另一边的话， 我们需要将它们的宽度设置为其父元素的100%或者更小，以便他们可以并排放置。将下面的代码加在CSS的底部：

+ +
div:nth-of-type(1) {
+  width: 48%;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+}
+ +

这里我们将它们都设置为了父元素宽度的48%——总共是96%，在两栏之间留4%的空隙，为它们提供一些宽松的空间。现在我们只需要将让列浮动，像这样：

+ +
div:nth-of-type(1) {
+  width: 48%;
+  float: left;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+  float: right;
+}
+ +

将这些都放在一起，会得到这样的结果：

+ +
+ +
+ +

{{ EmbedLiveSample('Floated_Two_Col', '100%', 520) }}

+ +

你有没有注意到我们在宽度的表示上都用的是百分比——这是一个很好的策略，这创建了一个流动布局（liquid layout），能够适应不同的屏幕大小，在小一些的屏幕上也能使列保持一样的比例。试一试自己来调整浏览器窗口的宽度，这是响应式网页非常有价值的一个工具。

+ +
+

备注：你可以在 0_two-column-layout.html 实时查看这个实例（另见源代码）。

+
+ +

创建简单的传统网格框架

+ +

大多数传统的框架使用{{cssxref("float")}}属性来使列相邻排列，让它们看起来像是一个网格。以用float创建网格的流程工作，可以向你展示它们工作的原理，并介绍一些更高级的概念，并在浮动和清除这节课中学到的内容之上搭建更多的东西。

+ +

最简单的一类网格创建是固定宽度的——我们只需要计算设计中总的宽度、列的数目、每一列和间隔的宽度。但是，如果我们决定设计的网格是可以根据浏览器宽度缩放的，我们则需要计算每一列和间距的所占的宽度的百分比。

+ +

下一部分我们将学习如何创建这两种方式的网格。我们会构建一个有12列的表格——我们选择了12这个常见的数字，来看它对不同情景的适应情况，因为12可以被6，4，3，和2完全整除。

+ +

一个简单的固定宽度网格

+ +

让我们先来创建一个固定列宽度的网格系统吧。

+ +

首先，把 simple-grid.html下载储存下来，其body中包含以下的标记：

+ +
<div class="wrapper">
+  <div class="row">
+    <div class="col">1</div>
+    <div class="col">2</div>
+    <div class="col">3</div>
+    <div class="col">4</div>
+    <div class="col">5</div>
+    <div class="col">6</div>
+    <div class="col">7</div>
+    <div class="col">8</div>
+    <div class="col">9</div>
+    <div class="col">10</div>
+    <div class="col">11</div>
+    <div class="col">12</div>
+  </div>
+  <div class="row">
+    <div class="col span1">13</div>
+    <div class="col span6">14</div>
+    <div class="col span3">15</div>
+    <div class="col span2">16</div>
+  </div>
+</div>
+ +

我们的目标是把它变成一个有两行十二列的演示网格——第一行显示各列的大小，第二行显示网格上不同大小的区域。

+ +

+ +

在{{htmlelement("style")}}中，加入下面的代码，使容器右侧的内边距为20像素，总的宽度变为980像素。这样给我们留出960像素可以放置列和它们的间隔——这种情况下，内边距会被从总的内容宽度中减去，因为我们在{{cssxref("box-sizing")}}中将站点上所有的元素设置成了border-box （可以查看完全改变盒模型，获得更多解释）。

+ +
* {
+  box-sizing: border-box;
+}
+
+body {
+  width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 20px;
+}
+ +

现在使用包装了网格每行的列容器，清除网格中每行的浮动，在你前面的规则里加入下面的规则：

+ +
.row {
+  clear: both;
+}
+ +

应用这条清除规则，意味着我们不用在每行上都填充12列元素。行与行之间不会互相干扰，并保持分隔。

+ +

列与列之间保持20像素的间隔。我们使用每列元素的左外边框来实现这个间隔。然后我们一共有12个间隔 — 12 x 20 = 240。

+ +

我们需要从960px的总宽减去这个间隔，然后剩下720像素给我们的列。如果用720除以12，我们知道每列有60个像素宽。

+ +

接下来我们给.col类写一个规则,  让它向左浮动，给它设置20像素的{{cssxref("margin-left")}}来实现一个间隔，再设置60像素的{{cssxref("width")}}。把下面的规则加到你的CSS底部：

+ +
.col {
+  float: left;
+  margin-left: 20px;
+  width: 60px;
+  background: rgb(255, 150, 150);
+}
+ +

单个列的最上面一行现在铺开成为了一个排列整齐的网格。

+ +
+

备注：我们也已经让每列变成亮红色，这样你就能准确看到每列占据了多少空间。

+
+ +

如果我们想让布局容器横跨多列，必须要给它设置特殊的类，来适应列的数量的{{cssxref("width")}} 值（加上间隔的值）。我们需要新建额外的类来允许横跨2-12列。每个宽度是将该列数的列宽加上间隔宽度相加的结果，这些宽度总是比列数少一个。

+ +

在你的CSS底部加入下面的内容：

+ +
/* Two column widths (120px) plus one gutter width (20px) */
+.col.span2 { width: 140px; }
+/* Three column widths (180px) plus two gutter widths (40px) */
+.col.span3 { width: 220px; }
+/* And so on... */
+.col.span4 { width: 300px; }
+.col.span5 { width: 380px; }
+.col.span6 { width: 460px; }
+.col.span7 { width: 540px; }
+.col.span8 { width: 620px; }
+.col.span9 { width: 700px; }
+.col.span10 { width: 780px; }
+.col.span11 { width: 860px; }
+.col.span12 { width: 940px; }
+ +

创建了这些类以后，我们可以在网格上布局不同宽度的列。试试保存并在你的浏览器上加载这个页面，来查看效果。

+ +
+

备注： 如果你在让上面的示例实现的时候正遇到麻烦，尝试将它和我们在GitHub上的完成版进行比较（再看下实时的示例）。

+
+ +

试试修改这些类，甚至添加、删除一些容器，来看看你能怎么改变这个布局。例如，你可以把第二行写成这样：

+ +
<div class="row">
+  <div class="col span8">13</div>
+  <div class="col span4">14</div>
+</div>
+ +

现在你的网格布局生效了。你可以简单的定义这些行，和每行的列数，然后给他们添加你想要的内容。真棒！

+ +

创建液态网格

+ +

这个网格表现的不错，但是它长度固定。 我们实际却想要一个弹性（流体）的网格，它可以随着浏览器的{{Glossary("viewport")}}大小的变化自动伸缩。为了达成这个目标，我们需要把相应的像素的长度变为百分比长度。

+ +

把固定宽度转为伸缩的基于百分比宽度的算式在下面：

+ +
target / context = result
+ +

在我们的列宽里，我们的目标列长度是60像素，我们的上下文是960像素的包装。我们可以这么计算百分比：

+ +
60 / 960 = 0.0625
+ +

然后我们挪动小数点两位，得到百分数6.25%。所以在CSS里面，我们可以用6.25%代替60像素。

+ +

我们需要同样这么算间隔：

+ +
20 / 960 = 0.02083333333
+ +

所以我们需要用2.08333333%代替.col里{{cssxref("margin-left")}}的20像素，和.wrapper里{{cssxref("padding-right")}}的20像素。

+ +

更新我们的网格

+ +

创建一个之前例子网页的副本。然后开始这个章节，或者制作一个simple-grid-finished.html代码的本地副本，以将其作为入手点。

+ +

更新第二个CSS规则（有着.wrapper选择器），像下面这样：

+ +
body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}
+ +

我们不仅给它一个百分比的{{cssxref("width")}}，还添加了{{cssxref("max-width")}}属性，来确保布局不过于宽。

+ +

下一步，更新第四条CSS规则（有.col选择器），像这样：

+ +
.col {
+  float: left;
+  margin-left: 2.08333333%;
+  width: 6.25%;
+  background: rgb(255, 150, 150);
+}
+ +

现在做些稍微麻烦的事 — 我们需要更新所有 .col.span 规则来把像素变为百分比。这需要点时间计算；为节省你的功夫，我们在下面替你做了。

+ +

像下面这样更新CSS规则的底部块：

+ +
/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
+.col.span2 { width: 14.58333333%; }
+/* Three column widths (18.75%) plus two gutter widths (4.1666666) */
+.col.span3 { width: 22.91666666%; }
+/* And so on... */
+.col.span4 { width: 31.24999999%; }
+.col.span5 { width: 39.58333332%; }
+.col.span6 { width: 47.91666665%; }
+.col.span7 { width: 56.24999998%; }
+.col.span8 { width: 64.58333331%; }
+.col.span9 { width: 72.91666664%; }
+.col.span10 { width: 81.24999997%; }
+.col.span11 { width: 89.5833333%; }
+.col.span12 { width: 97.91666663%; }
+ +

现在保存你的代码，从浏览器里加载它，尝试改变视口长度——你应该可以看到网格完美地适配了。

+ +
+

备注：如果你在让上面的示例实现的时候正遇到困难，试着把它和我们GitHub上的完成版比较（另见实时的示例）。

+
+ +

使用calc()函数的更简单计算

+ +

你可以用 {{cssxref("calc()")}} 函数来在CSS里面做数学方面的计算——这允许你在CSS里插入简单的算式，来计算那些值。这个会很有用，特别当你有个复杂计算的时候，甚至你还可以在算式里用不同的单位，比如“我想要这个元素一直比它父元素少50像素”。看下这个来自MediaRecorder API教程的示例。

+ +

言归正传, 来讲我们的网格！我们网格里跨越超过一列的列，它的总长是6.45%乘跨越的列数加 2.08333333%，乘间隔数（间隔数总等于行数减一）。calc() 函数允许我们就在宽度值里面这么计算，所以对跨越4列的列我们可以这么算：

+ +
.col.span4 {
+  width: calc((6.25%*4) + (2.08333333%*3));
+}
+ +

试着用下面的内容替换你底部的规则块，然后在浏览器中重载，看看你是否能得到相同的结果：

+ +
.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
+.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
+.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
+.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
+.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
+.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
+.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
+.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
+.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
+.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
+.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
+ +
+

备注：你能在fluid-grid-calc.html里看到我们的完成版（另见实时版）。

+
+ +
+

备注：如果你不能让这个正常工作，可能是你的浏览器不支持calc()函数，尽管各浏览器对它的支持相当好——远至IE9那样老。

+
+ +

语义vs.“无语义”网格系统

+ +

在标记中添加类以定义布局，意味着您的内容和标记与您的可视化表示相关联。你将会偶尔听到，这种使用CSS类的方式，被描绘成“无语义”：描述了内容的外观，而不是描述内容的语义性的类的使用。这是我们的span2、span3等类所面临的情况。

+ +

这些并不是唯一的方法，你或许会转头决定使用网格，然后向已有的语义类里面加入尺寸信息。例如，如果你有一个带有content类的{{htmlelement("div")}}，而且你想让它横跨8列，你可以从span8类里面复制整个关于宽度的规则，结果是像这样的一条规则：

+ +
.content {
+  width: calc((6.25%*8) + (2.08333333%*7));
+}
+ +
+

备注： 如果你要用预处理工具，如Sass，你可以建立一个简单的类（mixin）以插入那个值。

+
+ +

在我们的网格里启用偏移容器

+ +

我们创造的网格很有效。只要我们想把所有容器都从网格的左手边对齐。如果我们想在第一个容器前来个空列，或者容器之间来个空列，我们需要新建一个偏移类，为站点加上左外边距，来可见地推动网格。再来点数学计算！

+ +

让我们实际试试吧。

+ +

从你以前的代码开始，或者把我们的fluid-grid.html文件用作起始点。

+ +

我们在CSS上搞一个类，它会给一个容器元素来个一列宽度的偏移。将下面的内容加到你的CSS的底部：

+ +
.offset-by-one {
+  margin-left: calc(6.25% + (2.08333333%*2));
+}
+ +

或者假如你更愿意自己算百分比，用下面这个：

+ +
.offset-by-one {
+  margin-left: 10.41666666%;
+}
+ +

想要给一个容器的左边加个有一列宽的空白的话，你可以在容器上添加这个类。例如，如果你在HTML中有这个内容的时候：

+ +
<div class="col span6">14</div>
+ +

试着用下面的替换：

+ +
<div class="col span5 offset-by-one">14</div>
+ +
+

备注： 注意你需要别让横跨多列的列太多，给偏移留点空间！

+
+ +

试着载入，刷新来查看区别，或者查看我们的fluid-grid-offset.html示例（另见实时示例）。完成的示例应该看起来像这样：

+ +

+ +
+

备注：作为额外练习，你能实现一个offset-by-two类吗？

+
+ +

浮动网格的限制

+ +

当你想用这个网格系统时，你得仔细看看你的总长是否正确，并且每行中的元素所横跨的列数不超过这一行可容纳的列数。由于浮动布局实现的方式，如果网格列的数目对与网格来说太大，在最后边的元素会跑到下一行去，搞坏了布局 。

+ +

还要记住，如果元素内容比行宽，它会溢出，看起来一团糟。

+ +

这个系统的最大限制是，它本质上是一维的。我们在处理列、让元素跨越列，但是处理不了行。如果不设置一个确定的高度，用老方法很难控制元素高。这个方法很不灵活 —它只有在你确定你的内容有个明确的高的情况下有用。

+ +

弹性盒网格？

+ +

如果你读了之前关于flexbox的文章，你大概会想，弹性布局是个写网格布局的好办法。现在有很多基于弹性布局的网格布局，并且弹性布局可以解决很多上面讲的问题。

+ +

但是，弹性布局不是为网格布局而设的，把它当网格布局来用也有新的挑战。举个简单的例子，我们可以使用我们在上面使用过的同样的示例标记，用下面的CSS样式化wrapper、row和col类：

+ +
body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}
+
+
+.row {
+  display: flex;
+}
+
+.col {
+  margin-left: 2.08333333%;
+  margin-bottom: 1em;
+  width: 6.25%;
+  flex: 1 1 auto;
+  background: rgb(255,150,150);
+}
+ +

你可以试着在你自己的示例里做这些替换，或者看下我们的flexbox-grid.html示例代码（另见实时版）。

+ +

这里，我们会把每行变成一个弹性容器。有了弹性盒为基础的网格，我们仍然需要行，以让我们的元素加起来能不超过100%。我们将容器设为display: flex。

+ +

在.col上。我们设定{{cssxref("flex")}}属性的第一个值（{{cssxref("flex-grow")}}）为1，这样我们的物件可以变大；第二个值（{{cssxref("flex-shrink")}}）为1，这样我们的物件可以缩小；第三个值（{{cssxref("flex-basis")}}）为auto。因为我们的元素的{{cssxref("width")}}被设定了， auto将会使用和flex-basis 值一样的宽度。

+ +

在顶行，我们有十二个整齐的盒子，它们在视口宽度改变时同等地放大缩小。可是在下一行，我们只有四个物件，它们也从六十像素的基础上变大变小。因为它们只有四个，它们可以长得比上一行的物件更快，结果是它们都占据了第二行的相同宽度。

+ +

+ +

为了解决这个问题，我们仍然需要包含span类，以提供一个用于那个元素的，可以替换掉为 flex-basis所使用的值的宽度。

+ +

它们也不遵从上面的物件使用的网格，因为它们对它一无所知。

+ +

弹性盒设计上是一维。它处理单个维度，行的或者列的。我们不能创建一个对行列严格要求的网格，意即如果我们要在我们的网格上使用弹性盒的话，我们仍然需要计算浮动布局的百分比。

+ +

在你的工程中，由于弹性盒相比浮动能提供附加的对齐和空间分布能力，你可能仍然选择使用弹性盒“网格”。但是你应该清楚，你仍然是在使用一个被设计用来做其他事情的工具。所以你可能觉得，这就像是在你抵达你想要的结果之前，让你跳过额外的坑。

+ +

第三方网格系统

+ +

既然我们理解了我们的网格计算背后的数学了，我们现在该看看一些常用的第三方网格系统了。如果你在互联网上搜索“CSS网格框架”的话，你会发现一个包含了可选项的庞大列表。流行的框架，例如Bootstrap和Foundation，就包含了网格系统。此外还有独立的网格系统，不是用CSS开发的就是用预处理器开发的。

+ +

让我们看下这些独立系统其中的一个，它阐释了利用网格框架工作的常见技术。我们将要使用的网格是Skeleton的一部分，它是一种简单的CSS框架。

+ +

访问Skeleton网站以开始，选择“Download”下载ZIP文件。解压文件，把skeleton.css和normalize.css复制到一个新路径下。

+ +

制作一个html-skeleton.html文件的副本，在同skeleton和normalize CSS相同的路径下保存副本。

+ +

在HTML页面包含skeleton和normalize CSS，通过把以下内容加到文件头部的方式：

+ +
<link href="normalize.css" rel="stylesheet">
+<link href="skeleton.css" rel="stylesheet">
+ +

Skeleton不仅包含了网格系统，它还包含了用于排版和其他能作为起始点的页面元素上的CSS。我们现在把这些部分留作默认值，我们在这里真正感兴趣的是网格。

+ +
+

备注：Normalize是由Nicolas Gallagher编写的一个很有用的小CSS库，它自动做了一些有用的基础布局修正，让元素默认的样式化在不同浏览器中更加协调。

+
+ +

我们将会使用和在前面的示例中相似的HTML。将下面的内容加到你的HTML body中：

+ +
<div class="container">
+  <div class="row">
+    <div class="col">1</div>
+    <div class="col">2</div>
+    <div class="col">3</div>
+    <div class="col">4</div>
+    <div class="col">5</div>
+    <div class="col">6</div>
+    <div class="col">7</div>
+    <div class="col">8</div>
+    <div class="col">9</div>
+    <div class="col">10</div>
+    <div class="col">11</div>
+    <div class="col">12</div>
+  </div>
+  <div class="row">
+    <div class="col">13</div>
+    <div class="col">14</div>
+    <div class="col">15</div>
+    <div class="col">16</div>
+  </div>
+</div>
+ +


+ 要开始使用Skeleton，我们需要给包装的{{htmlelement("div")}}一个container类——这已经包含在了我们的HTML里面。这让最大宽度为960像素的内容居中了。你可以看看盒子现在是怎么不会宽于960像素的。

+ +

你可以看看skeleton.css文件里，CSS在我们应用这个类的时候是如何使用的。<div>用值为auto的左右外边距居中，左边和右边还应用了20像素的内边距。同我们前面做过的那样，Skeleton同时把Skeleton{{cssxref("box-sizing")}}属性设为border-box值，所以这个元素的内边距和边框将会被包含在整个width里面。

+ +
.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+ +

如果它们在行里面的话，元素只会是网格的一部分，所以对于前面的示例，我们需要一个额外的<div>或者其他带有row类的、内嵌到content <div>和我们实际的内容容器的<div>之间的元素。我们也已经做了这件事。

+ +

现在让我们铺开容器盒子。Skeleton基于一个12列的网格。顶端一行的盒子都需要加上one column的类，以让它们横跨一列。

+ +

现在加上这些，像是在下面的节录里面显示的那样：

+ +
<div class="container">
+  <div class="row">
+    <div class="one column">1</div>
+    <div class="one column">2</div>
+    <div class="one column">3</div>
+    /* and so on */
+  </div>
+</div>
+ +

然后，给第二行的容器加上解释它们应该横跨几个列的类，像这样：

+ +
<div class="row">
+  <div class="one column">13</div>
+  <div class="six columns">14</div>
+  <div class="three columns">15</div>
+  <div class="two columns">16</div>
+</div>
+ +

试着保存你的HTML，在你的浏览器里面载入，看下效果。

+ +
+

备注：如果你在实现这个示例的时候遇到麻烦，试着拿它和我们的html-skeleton-finished.html文件进行比较（另见实时运行版）。

+
+ +

如果你看下skeleton.css文件的内容，你能理解这是如何实现的。例如，Skeleton有下面的定义内容，用于样式化加入了“three colomns”类的元素。

+ +
.three.columns { width: 22%; }
+ +

Skeleton（或者其他任何网格框架）正在做的所有事情是，设定一个预定义的类，你可以通过把它们加到你的标记文件里面的方式使用这些框架，和你自己做计算这些百分数的工作完全是一样的。

+ +

正如你所看到的这样，我们使用Skeleton的时候，几乎不需要写多少CSS。它在我们向标记文本里面加类的时候，替我们处理了所有的浮动。正是把布局的责任甩给其他人的可能性，使得使用用于网格系统的框架成为了一个强制性的选择！但是现在来看，有了CSS网格布局，许多开发者正在停止使用这些框架，转而使用CSS提供的内建的原生网格。

+ +

小结

+ +

你现在理解了多种网格系统是如何建立的。这将会在处理老网站的时候，以及理解CSS网格布局的原生网格和那些老系统的不同的时候帮到你。

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

+ +

模块目录

+ + diff --git a/files/zh-cn/learn/css/css_layout/positioning/index.html b/files/zh-cn/learn/css/css_layout/positioning/index.html new file mode 100644 index 0000000000..cbfa094300 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/positioning/index.html @@ -0,0 +1,615 @@ +--- +title: 定位 +slug: Learn/CSS/CSS_layout/定位 +tags: + - CSS + - 初学者 + - 定位 + - 布局 + - 指南 + - 相对定位 + - 绝对定位 +translation_of: Learn/CSS/CSS_layout/Positioning +--- +
+

{{LearnSidebar}}

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}

+
+ +

定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。 本文解释的是定位({{cssxref("position")}})的各种不同值，以及如何使用它们。

+ + + + + + + + + + + + +
预备知识:HTML 基础 (学习 HTML导学)和CSS怎样工作的 (学习 CSS导学)
目的:了解CSS定位的工作原理
+ +

文档流

+ +

定位是一个相当复杂的话题，所以我们深入了解代码之前，让我们审视一下布局理论，并让我们了解它的工作原理。

+ +

首先，围绕元素内容添加任何内边距、边界和外边距来布置单个元素盒子——这就是 盒模型 ，我们前面看过。 默认情况下，块级元素的内容宽度是其父元素的宽度的100％，并且与其内容一样高。内联元素高宽与他们的内容高宽一样。您不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。 如果要以这种方式控制内联元素的大小，则需要将其设置为类似块级元素 display: block;。

+ +

这只是解释了单个元素，但是元素相互之间如何交互呢？ 正常的布局流（在布局介绍文章中提到）是将元素放置在浏览器视口内的系统。默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。

+ +

内联元素表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。

+ +

如果两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的一个消失——这叫外边距折叠, 我们之前也遇到过。

+ +

让我们来看一个简单的例子来解析这一切：

+ +
<h1>Basic document flow</h1>
+
+<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
+
+<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
+
+<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
+
+<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+ +

{{ EmbedLiveSample('文档流', '100%', 500) }}

+ +

在我们阅读本文时，我们将多次重复这个例子，因为我们要展示不同定位选项的效果。

+ +

如果可能，我们希望您在本地计算机上跟随练习 — 从GitHub仓库下载一个0_basic-flow.html (源代码) 然后用它作为我们的起步点。

+ +

介绍定位

+ +

定位的整个想法是允许我们覆盖上面描述的基本文档流行为，以产生有趣的效果。如果你想稍微改变布局中一些盒子的位置，使它们的默认布局流程位置稍微有点古怪，不舒服的感觉呢？定位是你的工具。或者，如果您想要创建一个浮动在页面其他部分顶部的UI元素，并且/或者始终停留在浏览器窗口内的相同位置，无论页面滚动多少？定位使这种布局工作成为可能。

+ +

有许多不同类型的定位，您可以对HTML元素生效。要使某个元素上的特定类型的定位，我们使用{{cssxref("position")}}属性。

+ +

静态定位

+ +

静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。

+ +

为了演示这一点，并为以后的部分设置示例，首先在HTML中添加一个positioned 的 class 到第二个{{htmlelement("p")}}：

+ +
<p class="positioned"> ... </p>
+ +

现在，将以下规则添加到CSS的底部：

+ +
.positioned {
+  position: static;
+  background: yellow;
+}
+ +

如果现在保存和刷新，除了第2段的更新的背景颜色，根本没有差别。这很好——正如我们之前所说，静态定位是默认行为！

+ +
+

注意：你可以在 1_static-positioning.html 查看这个例子 (see source code)。

+
+ +

相对定位

+ +

相对定位是我们将要看的第一个位置类型。 它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。 让我们继续并更新代码中的 position 属性：

+ +
position: relative;
+ +

如果您在此阶段保存并刷新，则结果根本不会发生变化。那么如何修改元素的位置呢？ 您需要使用{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}}属性 ，我们将在下一节中解释。

+ +

介绍 top, bottom, left,  right

+ +

{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, 和 {{cssxref("right")}} 来精确指定要将定位元素移动到的位置。 要尝试这样做，请在CSS中的 .positioned 规则中添加以下声明：

+ +
top: 30px;
+left: 30px;
+ +
+

注意：这些属性的值可以采用逻辑上期望的任何单位 ——px，mm，rems，％等。

+
+ +

如果你现在保存和刷新，你会得到一个这样的结果：

+ + + +

{{ EmbedLiveSample('介绍_top_bottom_left_right', '100%', 500) }}

+ +

酷，是吗？ 好吧，所以这个结果这可能不是你期待的——为什么它移动到底部和右边，但我们指定顶部和左边？ 听起来不合逻辑，但这只是相对定位工作的方式——你需要考虑一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。 所以例如，如果你指定 top: 30px;一个力推动框的顶部，使它向下移动30px。

+ +
+

注意： 你可以在 2_relative-positioning.html 查看这个例子 (see source code)。

+
+ +

绝对定位

+ +

绝对定位带来了非常不同的结果。让我们尝试改变代码中的位置声明如下：

+ +
position: absolute;
+ +

如果你现在保存和刷新，你应该看到这样：

+ + + +

{{ EmbedLiveSample('绝对定位', '100%', 420) }}

+ +

首先，请注意，定位的元素应该在文档流中的间隙不再存在——第一和第三元素已经靠在一起，就像第二个元素不再存在！好吧，在某种程度上，这是真的。绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……

+ +

第二，注意元素的位置已经改变——这是因为{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}}以不同的方式在绝对定位。 它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。 所以在这种情况下，我们说的绝对定位元素应该位于从“包含元素”的顶部30px，从左边30px。

+ +
+

注意：如果需要，您可以使用{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}} 调整元素大小。 尝试设置 top: 0; bottom: 0; left: 0; right: 0; 和 margin: 0; 对你定位的元素，看看会发生什么！ 之后再回来

+
+ +
+

注意：是的，margins 仍会影响定位的元素。 然而margin collapsing不会。

+
+ +
+

注意：你可以在3_absolute-positioning.html 查看这个例子(see source code)。

+
+ +

定位上下文

+ +

哪个元素是绝对定位元素的“包含元素“？这取决于绝对定位元素的父元素的position属性。(参见 Identifying the containing block).

+ +

如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且<html>元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。

+ +

绝对定位元素在HTML源代码中，是被放在<body>中的，但是在最终的布局里面，它离页面(而不是<body>)的左边界、上边界有30px的距离。我们可以改变定位上下文 —— 绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）。 为了演示这一点，将以下声明添加到您的body规则中：

+ +
position: relative;
+ +

应该得到以下结果：

+ + + +

{{ EmbedLiveSample('定位上下文', '100%', 420) }}

+ +

定位的元素现在相对于{{htmlelement("body")}}元素。

+ +
+

注意：你可以在这里看到这个例子 4_positioning-context.html (see source code).

+
+ +

介绍 z-index

+ +

所有这些绝对定位很有趣，但还有另一件事我们还没有考虑到 ——当元素开始重叠，什么决定哪些元素出现在其他元素的顶部？ 在我们已经看到的示例中，我们在定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素胜过未定位的元素。 当我们有不止一个的时候呢？

+ +

尝试添加以下到您的CSS，使第一段也是绝对定位：

+ +
p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}
+ +

此时，您将看到第一段的颜色为绿色，移出文档流程，并位于原始位置上方一点。它也堆叠在原始的 .positioned 段落下，其中两个重叠。这是因为 .positioned 段落是源顺序(HTML标记)中的第二个段落，并且源顺序中后定位的元素将赢得先定位的元素。

+ +

您可以更改堆叠顺序吗？是的，您可以使用{{cssxref("z-index")}}属性。 “z-index”是对z轴的参考。你可以从源代码中的上一点回想一下，我们使用水平（x轴）和垂直（y轴）坐标来讨论网页，以确定像背景图像和阴影偏移之类的东西的位置。 （0,0）位于页面（或元素）的左上角，x和y轴跨页面向右和向下（适合从左到右的语言，无论如何）。

+ +

网页也有一个z轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。{{cssxref("z-index")}} 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。

+ +

要更改堆叠顺序，请尝试将以下声明添加到 p:nth-of-type(1) 规则中：

+ +
z-index: 1;
+ +

你现在应该可以看到完成的例子：

+ + + +

{{ EmbedLiveSample('介绍_z-index', '100%', 400) }}

+ +

请注意，z-index只接受无单位索引值；你不能指定你想要一个元素是Z轴上23像素—— 它不这样工作。 较高的值将高于较低的值，这取决于您使用的值。 使用2和3将产生与300和40000相同的效果。

+ +
+

注意：你可以在这里看到这个例子 5_z-index.html (see source code).

+
+ +

固定定位

+ +

还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 {{htmlelement("html")}} 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。

+ +

让我们举一个简单的例子来说明我们的意思。首先，从CSS中删除现有的 p:nth-of-type(1) 和.positioned 规则。

+ +

现在，更新 body 规则以删除position: relative; 声明并添加固定高度，如此：

+ +
body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+ +

现在我们要给{{htmlelement("h1")}}元素 position: fixed;，并让它坐在视口的顶部中心。将以下规则添加到CSS：

+ +
h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+ +

 top: 0;是要使它贴在屏幕的顶部；我们然后给出标题与内容列相同的宽度，并使用可靠的老技巧 margin: 0 auto; 使它居中。 然后我们给它一个白色背景和一些内边距，所以内容将不会在它下面可见。

+ +

如果您现在保存并刷新，您会看到一个有趣的小效果，标题保持固定，内容显示向上滚动并消失在其下。 但是我们可以改进这一点——目前标题下面挡住一些内容的开头。这是因为定位的标题不再出现在文档流中，所以其他内容向上移动到顶部。 我们要把它向下移动一点；我们可以通过在第一段设置一些顶部边距来做到这一点。添加：

+ +
p:nth-of-type(1) {
+  margin-top: 60px;
+}
+ +

你现在应该看到完成的例子：

+ + + +

{{ EmbedLiveSample('固定定位', '100%', 400) }}

+ +
+

注意：你可以在这里看到这个例子6_fixed-positioning.html (see source code).

+
+ +

position: sticky

+ +

还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起1​​0像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。

+ + + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+ +

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

+ +

position: sticky 的另一种有趣且常用的用法，是创建一个滚动索引页面。在此页面上，不同的标题会停留在页面顶部。这样的示例的标记可能如下所示：

+ +
<h1>Sticky positioning</h1>
+
+<dl>
+    <dt>A</dt>
+    <dd>Apple</dd>
+    <dd>Ant</dd>
+    <dd>Altimeter</dd>
+    <dd>Airplane</dd>
+    <dt>B</dt>
+    <dd>Bird</dd>
+    <dd>Buzzard</dd>
+    <dd>Bee</dd>
+    <dd>Banana</dd>
+    <dd>Beanstalk</dd>
+    <dt>C</dt>
+    <dd>Calculator</dd>
+    <dd>Cane</dd>
+    <dd>Camera</dd>
+    <dd>Camel</dd>
+    <dt>D</dt>
+    <dd>Duck</dd>
+    <dd>Dime</dd>
+    <dd>Dipstick</dd>
+    <dd>Drone</dd>
+    <dt>E</dt>
+    <dd>Egg</dd>
+    <dd>Elephant</dd>
+    <dd>Egret</dd>
+</dl>
+ +

CSS可能如下所示。在正常布局流中，{{htmlelement("dt")}}元素将随内容滚动。当我们在{{htmlelement("dt")}}元素上添加position: sticky，并将{{cssxref("top")}}的值设置为0，当标题滚动到视口的顶部时，支持此属性的浏览器会将标题粘贴到那个位置。随后，每个后续标题将替换前一个标题，直到它向上滚动到该位置。

+ +
dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+
+ + + +

{{ EmbedLiveSample('Sticky_2', '100%', 200) }}

+ +
+

注意：你可以在 7_sticky-positioning.html 查看这个例子(see source code)。

+
+ +

试试你的技术!

+ +

这篇文章到此为止了，但你们能记住最重要的信息吗？在继续之前，您可以找到一些进一步的测试来验证是否完全掌握了这个知识：试试你的技术。

+ +

总结

+ +

我相信你用基本定位愉快地玩耍；它是创建复杂的CSS布局和UI功能背后的基本工具之一。 考虑到这一点，在下一篇文章中，我们将更有趣的定位——我们将进一步，开始建立一些真实世界有用的东西。

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}

+ +

在本单元中

+ + diff --git "a/files/zh-cn/learn/css/css_layout/\344\274\240\347\273\237\347\232\204\345\270\203\345\261\200\346\226\271\346\263\225/index.html" "b/files/zh-cn/learn/css/css_layout/\344\274\240\347\273\237\347\232\204\345\270\203\345\261\200\346\226\271\346\263\225/index.html" deleted file mode 100644 index 58313b6fdd..0000000000 --- "a/files/zh-cn/learn/css/css_layout/\344\274\240\347\273\237\347\232\204\345\270\203\345\261\200\346\226\271\346\263\225/index.html" +++ /dev/null @@ -1,577 +0,0 @@ ---- -title: 传统的布局方法 -slug: Learn/CSS/CSS_layout/传统的布局方法 -translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

- -

在CSS布局中，网格系统是一种非常常见的布局方式，并且在CSS 网格布局之前，它们倾向于由浮动和其他的布局功能实现。假想你的布局是一组数字标注的列（例如4、6或者12），然后把你的内容填充到这些想象的列中。这篇文章将要探讨这种早期的方法是怎么实现的，来帮助你在旧项目工作时更好地理解他们。

- - - - - - - - - - - - -
学习前提：HTML 基础(学习 Introduction to HTML),并且了解CSS是怎么工作的(学习 Introduction to CSS and Styling boxes.)
目标：了解浏览器CSS网格布局系统的基本概念。
- -

CSS网格布局之前的布局与网格系统

- -

一个来自设计领域的人或许会惊讶，CSS直到最近才有网格系统，不仅如此，我们还用了许多次优方法来建立类网格设计。我们现在把这些称为“古老”的方法。

- -

对于新项目来说，大多数情况下CSS网格布局（CSS Grid Layout）被用来和其他一个或多个现代的布局方法结合，以形成布局的基础。但是你会时不时的遇到采用这种古老方法的“网格系统”。值得了解它们是如何工作的，以及为什么它们和CSS网格布局不同。

- -

这个课程将会解释基于float和flexbox的网格系统和网格框架是如何工作的。学习过网格布局之后，你可能会惊讶，这些看起来真的好复杂！如果你需要为不支持新技术的老浏览器上创建后备代码的话，这些知识将会变的十分有用，而且你也可以在使用这些类别系统的已有工程上工作。

- -

值得铭记在心的是，在我们探索这些系统时，它们里面没有哪个的建立方式是像通过CSS网格布局创建网格那样，真的建立一个网格。他们通过给目标一个大小， 然后推动它们，让它们看起来像网格一样排列成一条线。

- -

两列布局

- -

让我们从最简单的实例开始——一个两列布局。你可以按照步骤在你的电脑上创建一个新的 index.html，先用一个简单HTML模板填充它，然后在适当的位置填充下面的代码。在这节底部，你可以看到一个展示最终代码样貌的实时实例。

- -

首先，我们需要在我们的栏中放入一些内容。把现在在body中的内容替换成下面的代码：

- -
<h1>2 column layout example</h1>
-<div>
-  <h2>First column</h2>
-  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-</div>
-
-<div>
-  <h2>Second column</h2>
-  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
-</div>
- -

每一列都需要一个上一级元素来包含内容，这样我们可以一次性操作所有内容。在这个例子中我们选择了{{htmlelement("div")}}， 但是你可以选择其他更合适的，例如{{htmlelement("article")}}, {{htmlelement("section")}}, 和 {{htmlelement("aside")}}，或者是任何别的元素。

- -

现在我们来看CSS。首先，应用以下的代码来对HTML进行基本设置：

- -
body {
-  width: 90%;
-  max-width: 900px;
-  margin: 0 auto;
-}
- -

body将会占据90%的视口宽度，直到达到900像素，在这种情况下，它将固定并保持在视口正中。 默认情况下，它的子项（the {{htmlelement("h1")}} 和两个 {{htmlelement("div")}}）将会达到正文宽度的100%。如果我们希望两个{{htmlelement("div")}}，一个浮在窗口的一边，另一个浮动在另一边的话， 我们需要将它们的宽度设置为其父元素的100%或者更小，以便他们可以并排放置。将下面的代码加在CSS的底部：

- -
div:nth-of-type(1) {
-  width: 48%;
-}
-
-div:nth-of-type(2) {
-  width: 48%;
-}
- -

这里我们将它们都设置为了父元素宽度的48%——总共是96%，在两栏之间留4%的空隙，为它们提供一些宽松的空间。现在我们只需要将让列浮动，像这样：

- -
div:nth-of-type(1) {
-  width: 48%;
-  float: left;
-}
-
-div:nth-of-type(2) {
-  width: 48%;
-  float: right;
-}
- -

将这些都放在一起，会得到这样的结果：

- -
- -
- -

{{ EmbedLiveSample('Floated_Two_Col', '100%', 520) }}

- -

你有没有注意到我们在宽度的表示上都用的是百分比——这是一个很好的策略，这创建了一个流动布局（liquid layout），能够适应不同的屏幕大小，在小一些的屏幕上也能使列保持一样的比例。试一试自己来调整浏览器窗口的宽度，这是响应式网页非常有价值的一个工具。

- -
-

备注：你可以在 0_two-column-layout.html 实时查看这个实例（另见源代码）。

-
- -

创建简单的传统网格框架

- -

大多数传统的框架使用{{cssxref("float")}}属性来使列相邻排列，让它们看起来像是一个网格。以用float创建网格的流程工作，可以向你展示它们工作的原理，并介绍一些更高级的概念，并在浮动和清除这节课中学到的内容之上搭建更多的东西。

- -

最简单的一类网格创建是固定宽度的——我们只需要计算设计中总的宽度、列的数目、每一列和间隔的宽度。但是，如果我们决定设计的网格是可以根据浏览器宽度缩放的，我们则需要计算每一列和间距的所占的宽度的百分比。

- -

下一部分我们将学习如何创建这两种方式的网格。我们会构建一个有12列的表格——我们选择了12这个常见的数字，来看它对不同情景的适应情况，因为12可以被6，4，3，和2完全整除。

- -

一个简单的固定宽度网格

- -

让我们先来创建一个固定列宽度的网格系统吧。

- -

首先，把 simple-grid.html下载储存下来，其body中包含以下的标记：

- -
<div class="wrapper">
-  <div class="row">
-    <div class="col">1</div>
-    <div class="col">2</div>
-    <div class="col">3</div>
-    <div class="col">4</div>
-    <div class="col">5</div>
-    <div class="col">6</div>
-    <div class="col">7</div>
-    <div class="col">8</div>
-    <div class="col">9</div>
-    <div class="col">10</div>
-    <div class="col">11</div>
-    <div class="col">12</div>
-  </div>
-  <div class="row">
-    <div class="col span1">13</div>
-    <div class="col span6">14</div>
-    <div class="col span3">15</div>
-    <div class="col span2">16</div>
-  </div>
-</div>
- -

我们的目标是把它变成一个有两行十二列的演示网格——第一行显示各列的大小，第二行显示网格上不同大小的区域。

- -

- -

在{{htmlelement("style")}}中，加入下面的代码，使容器右侧的内边距为20像素，总的宽度变为980像素。这样给我们留出960像素可以放置列和它们的间隔——这种情况下，内边距会被从总的内容宽度中减去，因为我们在{{cssxref("box-sizing")}}中将站点上所有的元素设置成了border-box （可以查看完全改变盒模型，获得更多解释）。

- -
* {
-  box-sizing: border-box;
-}
-
-body {
-  width: 980px;
-  margin: 0 auto;
-}
-
-.wrapper {
-  padding-right: 20px;
-}
- -

现在使用包装了网格每行的列容器，清除网格中每行的浮动，在你前面的规则里加入下面的规则：

- -
.row {
-  clear: both;
-}
- -

应用这条清除规则，意味着我们不用在每行上都填充12列元素。行与行之间不会互相干扰，并保持分隔。

- -

列与列之间保持20像素的间隔。我们使用每列元素的左外边框来实现这个间隔。然后我们一共有12个间隔 — 12 x 20 = 240。

- -

我们需要从960px的总宽减去这个间隔，然后剩下720像素给我们的列。如果用720除以12，我们知道每列有60个像素宽。

- -

接下来我们给.col类写一个规则,  让它向左浮动，给它设置20像素的{{cssxref("margin-left")}}来实现一个间隔，再设置60像素的{{cssxref("width")}}。把下面的规则加到你的CSS底部：

- -
.col {
-  float: left;
-  margin-left: 20px;
-  width: 60px;
-  background: rgb(255, 150, 150);
-}
- -

单个列的最上面一行现在铺开成为了一个排列整齐的网格。

- -
-

备注：我们也已经让每列变成亮红色，这样你就能准确看到每列占据了多少空间。

-
- -

如果我们想让布局容器横跨多列，必须要给它设置特殊的类，来适应列的数量的{{cssxref("width")}} 值（加上间隔的值）。我们需要新建额外的类来允许横跨2-12列。每个宽度是将该列数的列宽加上间隔宽度相加的结果，这些宽度总是比列数少一个。

- -

在你的CSS底部加入下面的内容：

- -
/* Two column widths (120px) plus one gutter width (20px) */
-.col.span2 { width: 140px; }
-/* Three column widths (180px) plus two gutter widths (40px) */
-.col.span3 { width: 220px; }
-/* And so on... */
-.col.span4 { width: 300px; }
-.col.span5 { width: 380px; }
-.col.span6 { width: 460px; }
-.col.span7 { width: 540px; }
-.col.span8 { width: 620px; }
-.col.span9 { width: 700px; }
-.col.span10 { width: 780px; }
-.col.span11 { width: 860px; }
-.col.span12 { width: 940px; }
- -

创建了这些类以后，我们可以在网格上布局不同宽度的列。试试保存并在你的浏览器上加载这个页面，来查看效果。

- -
-

备注： 如果你在让上面的示例实现的时候正遇到麻烦，尝试将它和我们在GitHub上的完成版进行比较（再看下实时的示例）。

-
- -

试试修改这些类，甚至添加、删除一些容器，来看看你能怎么改变这个布局。例如，你可以把第二行写成这样：

- -
<div class="row">
-  <div class="col span8">13</div>
-  <div class="col span4">14</div>
-</div>
- -

现在你的网格布局生效了。你可以简单的定义这些行，和每行的列数，然后给他们添加你想要的内容。真棒！

- -

创建液态网格

- -

这个网格表现的不错，但是它长度固定。 我们实际却想要一个弹性（流体）的网格，它可以随着浏览器的{{Glossary("viewport")}}大小的变化自动伸缩。为了达成这个目标，我们需要把相应的像素的长度变为百分比长度。

- -

把固定宽度转为伸缩的基于百分比宽度的算式在下面：

- -
target / context = result
- -

在我们的列宽里，我们的目标列长度是60像素，我们的上下文是960像素的包装。我们可以这么计算百分比：

- -
60 / 960 = 0.0625
- -

然后我们挪动小数点两位，得到百分数6.25%。所以在CSS里面，我们可以用6.25%代替60像素。

- -

我们需要同样这么算间隔：

- -
20 / 960 = 0.02083333333
- -

所以我们需要用2.08333333%代替.col里{{cssxref("margin-left")}}的20像素，和.wrapper里{{cssxref("padding-right")}}的20像素。

- -

更新我们的网格

- -

创建一个之前例子网页的副本。然后开始这个章节，或者制作一个simple-grid-finished.html代码的本地副本，以将其作为入手点。

- -

更新第二个CSS规则（有着.wrapper选择器），像下面这样：

- -
body {
-  width: 90%;
-  max-width: 980px;
-  margin: 0 auto;
-}
-
-.wrapper {
-  padding-right: 2.08333333%;
-}
- -

我们不仅给它一个百分比的{{cssxref("width")}}，还添加了{{cssxref("max-width")}}属性，来确保布局不过于宽。

- -

下一步，更新第四条CSS规则（有.col选择器），像这样：

- -
.col {
-  float: left;
-  margin-left: 2.08333333%;
-  width: 6.25%;
-  background: rgb(255, 150, 150);
-}
- -

现在做些稍微麻烦的事 — 我们需要更新所有 .col.span 规则来把像素变为百分比。这需要点时间计算；为节省你的功夫，我们在下面替你做了。

- -

像下面这样更新CSS规则的底部块：

- -
/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
-.col.span2 { width: 14.58333333%; }
-/* Three column widths (18.75%) plus two gutter widths (4.1666666) */
-.col.span3 { width: 22.91666666%; }
-/* And so on... */
-.col.span4 { width: 31.24999999%; }
-.col.span5 { width: 39.58333332%; }
-.col.span6 { width: 47.91666665%; }
-.col.span7 { width: 56.24999998%; }
-.col.span8 { width: 64.58333331%; }
-.col.span9 { width: 72.91666664%; }
-.col.span10 { width: 81.24999997%; }
-.col.span11 { width: 89.5833333%; }
-.col.span12 { width: 97.91666663%; }
- -

现在保存你的代码，从浏览器里加载它，尝试改变视口长度——你应该可以看到网格完美地适配了。

- -
-

备注：如果你在让上面的示例实现的时候正遇到困难，试着把它和我们GitHub上的完成版比较（另见实时的示例）。

-
- -

使用calc()函数的更简单计算

- -

你可以用 {{cssxref("calc()")}} 函数来在CSS里面做数学方面的计算——这允许你在CSS里插入简单的算式，来计算那些值。这个会很有用，特别当你有个复杂计算的时候，甚至你还可以在算式里用不同的单位，比如“我想要这个元素一直比它父元素少50像素”。看下这个来自MediaRecorder API教程的示例。

- -

言归正传, 来讲我们的网格！我们网格里跨越超过一列的列，它的总长是6.45%乘跨越的列数加 2.08333333%，乘间隔数（间隔数总等于行数减一）。calc() 函数允许我们就在宽度值里面这么计算，所以对跨越4列的列我们可以这么算：

- -
.col.span4 {
-  width: calc((6.25%*4) + (2.08333333%*3));
-}
- -

试着用下面的内容替换你底部的规则块，然后在浏览器中重载，看看你是否能得到相同的结果：

- -
.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
-.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
-.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
-.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
-.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
-.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
-.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
-.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
-.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
-.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
-.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
- -
-

备注：你能在fluid-grid-calc.html里看到我们的完成版（另见实时版）。

-
- -
-

备注：如果你不能让这个正常工作，可能是你的浏览器不支持calc()函数，尽管各浏览器对它的支持相当好——远至IE9那样老。

-
- -

语义vs.“无语义”网格系统

- -

在标记中添加类以定义布局，意味着您的内容和标记与您的可视化表示相关联。你将会偶尔听到，这种使用CSS类的方式，被描绘成“无语义”：描述了内容的外观，而不是描述内容的语义性的类的使用。这是我们的span2、span3等类所面临的情况。

- -

这些并不是唯一的方法，你或许会转头决定使用网格，然后向已有的语义类里面加入尺寸信息。例如，如果你有一个带有content类的{{htmlelement("div")}}，而且你想让它横跨8列，你可以从span8类里面复制整个关于宽度的规则，结果是像这样的一条规则：

- -
.content {
-  width: calc((6.25%*8) + (2.08333333%*7));
-}
- -
-

备注： 如果你要用预处理工具，如Sass，你可以建立一个简单的类（mixin）以插入那个值。

-
- -

在我们的网格里启用偏移容器

- -

我们创造的网格很有效。只要我们想把所有容器都从网格的左手边对齐。如果我们想在第一个容器前来个空列，或者容器之间来个空列，我们需要新建一个偏移类，为站点加上左外边距，来可见地推动网格。再来点数学计算！

- -

让我们实际试试吧。

- -

从你以前的代码开始，或者把我们的fluid-grid.html文件用作起始点。

- -

我们在CSS上搞一个类，它会给一个容器元素来个一列宽度的偏移。将下面的内容加到你的CSS的底部：

- -
.offset-by-one {
-  margin-left: calc(6.25% + (2.08333333%*2));
-}
- -

或者假如你更愿意自己算百分比，用下面这个：

- -
.offset-by-one {
-  margin-left: 10.41666666%;
-}
- -

想要给一个容器的左边加个有一列宽的空白的话，你可以在容器上添加这个类。例如，如果你在HTML中有这个内容的时候：

- -
<div class="col span6">14</div>
- -

试着用下面的替换：

- -
<div class="col span5 offset-by-one">14</div>
- -
-

备注： 注意你需要别让横跨多列的列太多，给偏移留点空间！

-
- -

试着载入，刷新来查看区别，或者查看我们的fluid-grid-offset.html示例（另见实时示例）。完成的示例应该看起来像这样：

- -

- -
-

备注：作为额外练习，你能实现一个offset-by-two类吗？

-
- -

浮动网格的限制

- -

当你想用这个网格系统时，你得仔细看看你的总长是否正确，并且每行中的元素所横跨的列数不超过这一行可容纳的列数。由于浮动布局实现的方式，如果网格列的数目对与网格来说太大，在最后边的元素会跑到下一行去，搞坏了布局 。

- -

还要记住，如果元素内容比行宽，它会溢出，看起来一团糟。

- -

这个系统的最大限制是，它本质上是一维的。我们在处理列、让元素跨越列，但是处理不了行。如果不设置一个确定的高度，用老方法很难控制元素高。这个方法很不灵活 —它只有在你确定你的内容有个明确的高的情况下有用。

- -

弹性盒网格？

- -

如果你读了之前关于flexbox的文章，你大概会想，弹性布局是个写网格布局的好办法。现在有很多基于弹性布局的网格布局，并且弹性布局可以解决很多上面讲的问题。

- -

但是，弹性布局不是为网格布局而设的，把它当网格布局来用也有新的挑战。举个简单的例子，我们可以使用我们在上面使用过的同样的示例标记，用下面的CSS样式化wrapper、row和col类：

- -
body {
-  width: 90%;
-  max-width: 980px;
-  margin: 0 auto;
-}
-
-.wrapper {
-  padding-right: 2.08333333%;
-}
-
-
-.row {
-  display: flex;
-}
-
-.col {
-  margin-left: 2.08333333%;
-  margin-bottom: 1em;
-  width: 6.25%;
-  flex: 1 1 auto;
-  background: rgb(255,150,150);
-}
- -

你可以试着在你自己的示例里做这些替换，或者看下我们的flexbox-grid.html示例代码（另见实时版）。

- -

这里，我们会把每行变成一个弹性容器。有了弹性盒为基础的网格，我们仍然需要行，以让我们的元素加起来能不超过100%。我们将容器设为display: flex。

- -

在.col上。我们设定{{cssxref("flex")}}属性的第一个值（{{cssxref("flex-grow")}}）为1，这样我们的物件可以变大；第二个值（{{cssxref("flex-shrink")}}）为1，这样我们的物件可以缩小；第三个值（{{cssxref("flex-basis")}}）为auto。因为我们的元素的{{cssxref("width")}}被设定了， auto将会使用和flex-basis 值一样的宽度。

- -

在顶行，我们有十二个整齐的盒子，它们在视口宽度改变时同等地放大缩小。可是在下一行，我们只有四个物件，它们也从六十像素的基础上变大变小。因为它们只有四个，它们可以长得比上一行的物件更快，结果是它们都占据了第二行的相同宽度。

- -

- -

为了解决这个问题，我们仍然需要包含span类，以提供一个用于那个元素的，可以替换掉为 flex-basis所使用的值的宽度。

- -

它们也不遵从上面的物件使用的网格，因为它们对它一无所知。

- -

弹性盒设计上是一维。它处理单个维度，行的或者列的。我们不能创建一个对行列严格要求的网格，意即如果我们要在我们的网格上使用弹性盒的话，我们仍然需要计算浮动布局的百分比。

- -

在你的工程中，由于弹性盒相比浮动能提供附加的对齐和空间分布能力，你可能仍然选择使用弹性盒“网格”。但是你应该清楚，你仍然是在使用一个被设计用来做其他事情的工具。所以你可能觉得，这就像是在你抵达你想要的结果之前，让你跳过额外的坑。

- -

第三方网格系统

- -

既然我们理解了我们的网格计算背后的数学了，我们现在该看看一些常用的第三方网格系统了。如果你在互联网上搜索“CSS网格框架”的话，你会发现一个包含了可选项的庞大列表。流行的框架，例如Bootstrap和Foundation，就包含了网格系统。此外还有独立的网格系统，不是用CSS开发的就是用预处理器开发的。

- -

让我们看下这些独立系统其中的一个，它阐释了利用网格框架工作的常见技术。我们将要使用的网格是Skeleton的一部分，它是一种简单的CSS框架。

- -

访问Skeleton网站以开始，选择“Download”下载ZIP文件。解压文件，把skeleton.css和normalize.css复制到一个新路径下。

- -

制作一个html-skeleton.html文件的副本，在同skeleton和normalize CSS相同的路径下保存副本。

- -

在HTML页面包含skeleton和normalize CSS，通过把以下内容加到文件头部的方式：

- -
<link href="normalize.css" rel="stylesheet">
-<link href="skeleton.css" rel="stylesheet">
- -

Skeleton不仅包含了网格系统，它还包含了用于排版和其他能作为起始点的页面元素上的CSS。我们现在把这些部分留作默认值，我们在这里真正感兴趣的是网格。

- -
-

备注：Normalize是由Nicolas Gallagher编写的一个很有用的小CSS库，它自动做了一些有用的基础布局修正，让元素默认的样式化在不同浏览器中更加协调。

-
- -

我们将会使用和在前面的示例中相似的HTML。将下面的内容加到你的HTML body中：

- -
<div class="container">
-  <div class="row">
-    <div class="col">1</div>
-    <div class="col">2</div>
-    <div class="col">3</div>
-    <div class="col">4</div>
-    <div class="col">5</div>
-    <div class="col">6</div>
-    <div class="col">7</div>
-    <div class="col">8</div>
-    <div class="col">9</div>
-    <div class="col">10</div>
-    <div class="col">11</div>
-    <div class="col">12</div>
-  </div>
-  <div class="row">
-    <div class="col">13</div>
-    <div class="col">14</div>
-    <div class="col">15</div>
-    <div class="col">16</div>
-  </div>
-</div>
- -


- 要开始使用Skeleton，我们需要给包装的{{htmlelement("div")}}一个container类——这已经包含在了我们的HTML里面。这让最大宽度为960像素的内容居中了。你可以看看盒子现在是怎么不会宽于960像素的。

- -

你可以看看skeleton.css文件里，CSS在我们应用这个类的时候是如何使用的。<div>用值为auto的左右外边距居中，左边和右边还应用了20像素的内边距。同我们前面做过的那样，Skeleton同时把Skeleton{{cssxref("box-sizing")}}属性设为border-box值，所以这个元素的内边距和边框将会被包含在整个width里面。

- -
.container {
-  position: relative;
-  width: 100%;
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 0 20px;
-  box-sizing: border-box;
-}
- -

如果它们在行里面的话，元素只会是网格的一部分，所以对于前面的示例，我们需要一个额外的<div>或者其他带有row类的、内嵌到content <div>和我们实际的内容容器的<div>之间的元素。我们也已经做了这件事。

- -

现在让我们铺开容器盒子。Skeleton基于一个12列的网格。顶端一行的盒子都需要加上one column的类，以让它们横跨一列。

- -

现在加上这些，像是在下面的节录里面显示的那样：

- -
<div class="container">
-  <div class="row">
-    <div class="one column">1</div>
-    <div class="one column">2</div>
-    <div class="one column">3</div>
-    /* and so on */
-  </div>
-</div>
- -

然后，给第二行的容器加上解释它们应该横跨几个列的类，像这样：

- -
<div class="row">
-  <div class="one column">13</div>
-  <div class="six columns">14</div>
-  <div class="three columns">15</div>
-  <div class="two columns">16</div>
-</div>
- -

试着保存你的HTML，在你的浏览器里面载入，看下效果。

- -
-

备注：如果你在实现这个示例的时候遇到麻烦，试着拿它和我们的html-skeleton-finished.html文件进行比较（另见实时运行版）。

-
- -

如果你看下skeleton.css文件的内容，你能理解这是如何实现的。例如，Skeleton有下面的定义内容，用于样式化加入了“three colomns”类的元素。

- -
.three.columns { width: 22%; }
- -

Skeleton（或者其他任何网格框架）正在做的所有事情是，设定一个预定义的类，你可以通过把它们加到你的标记文件里面的方式使用这些框架，和你自己做计算这些百分数的工作完全是一样的。

- -

正如你所看到的这样，我们使用Skeleton的时候，几乎不需要写多少CSS。它在我们向标记文本里面加类的时候，替我们处理了所有的浮动。正是把布局的责任甩给其他人的可能性，使得使用用于网格系统的框架成为了一个强制性的选择！但是现在来看，有了CSS网格布局，许多开发者正在停止使用这些框架，转而使用CSS提供的内建的原生网格。

- -

小结

- -

你现在理解了多种网格系统是如何建立的。这将会在处理老网站的时候，以及理解CSS网格布局的原生网格和那些老系统的不同的时候帮到你。

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

- -

模块目录

- - diff --git "a/files/zh-cn/learn/css/css_layout/\345\256\232\344\275\215/index.html" "b/files/zh-cn/learn/css/css_layout/\345\256\232\344\275\215/index.html" deleted file mode 100644 index cbfa094300..0000000000 --- "a/files/zh-cn/learn/css/css_layout/\345\256\232\344\275\215/index.html" +++ /dev/null @@ -1,615 +0,0 @@ ---- -title: 定位 -slug: Learn/CSS/CSS_layout/定位 -tags: - - CSS - - 初学者 - - 定位 - - 布局 - - 指南 - - 相对定位 - - 绝对定位 -translation_of: Learn/CSS/CSS_layout/Positioning ---- -
-

{{LearnSidebar}}

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}

-
- -

定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。 本文解释的是定位({{cssxref("position")}})的各种不同值，以及如何使用它们。

- - - - - - - - - - - - -
预备知识:HTML 基础 (学习 HTML导学)和CSS怎样工作的 (学习 CSS导学)
目的:了解CSS定位的工作原理
- -

文档流

- -

定位是一个相当复杂的话题，所以我们深入了解代码之前，让我们审视一下布局理论，并让我们了解它的工作原理。

- -

首先，围绕元素内容添加任何内边距、边界和外边距来布置单个元素盒子——这就是 盒模型 ，我们前面看过。 默认情况下，块级元素的内容宽度是其父元素的宽度的100％，并且与其内容一样高。内联元素高宽与他们的内容高宽一样。您不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。 如果要以这种方式控制内联元素的大小，则需要将其设置为类似块级元素 display: block;。

- -

这只是解释了单个元素，但是元素相互之间如何交互呢？ 正常的布局流（在布局介绍文章中提到）是将元素放置在浏览器视口内的系统。默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。

- -

内联元素表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。

- -

如果两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的一个消失——这叫外边距折叠, 我们之前也遇到过。

- -

让我们来看一个简单的例子来解析这一切：

- -
<h1>Basic document flow</h1>
-
-<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
-
-<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
-
-<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
-
-<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-  background: aqua;
-  border: 3px solid blue;
-  padding: 10px;
-  margin: 10px;
-}
-
-span {
-  background: red;
-  border: 1px solid black;
-}
- -

{{ EmbedLiveSample('文档流', '100%', 500) }}

- -

在我们阅读本文时，我们将多次重复这个例子，因为我们要展示不同定位选项的效果。

- -

如果可能，我们希望您在本地计算机上跟随练习 — 从GitHub仓库下载一个0_basic-flow.html (源代码) 然后用它作为我们的起步点。

- -

介绍定位

- -

定位的整个想法是允许我们覆盖上面描述的基本文档流行为，以产生有趣的效果。如果你想稍微改变布局中一些盒子的位置，使它们的默认布局流程位置稍微有点古怪，不舒服的感觉呢？定位是你的工具。或者，如果您想要创建一个浮动在页面其他部分顶部的UI元素，并且/或者始终停留在浏览器窗口内的相同位置，无论页面滚动多少？定位使这种布局工作成为可能。

- -

有许多不同类型的定位，您可以对HTML元素生效。要使某个元素上的特定类型的定位，我们使用{{cssxref("position")}}属性。

- -

静态定位

- -

静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。

- -

为了演示这一点，并为以后的部分设置示例，首先在HTML中添加一个positioned 的 class 到第二个{{htmlelement("p")}}：

- -
<p class="positioned"> ... </p>
- -

现在，将以下规则添加到CSS的底部：

- -
.positioned {
-  position: static;
-  background: yellow;
-}
- -

如果现在保存和刷新，除了第2段的更新的背景颜色，根本没有差别。这很好——正如我们之前所说，静态定位是默认行为！

- -
-

注意：你可以在 1_static-positioning.html 查看这个例子 (see source code)。

-
- -

相对定位

- -

相对定位是我们将要看的第一个位置类型。 它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。 让我们继续并更新代码中的 position 属性：

- -
position: relative;
- -

如果您在此阶段保存并刷新，则结果根本不会发生变化。那么如何修改元素的位置呢？ 您需要使用{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}}属性 ，我们将在下一节中解释。

- -

介绍 top, bottom, left,  right

- -

{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, 和 {{cssxref("right")}} 来精确指定要将定位元素移动到的位置。 要尝试这样做，请在CSS中的 .positioned 规则中添加以下声明：

- -
top: 30px;
-left: 30px;
- -
-

注意：这些属性的值可以采用逻辑上期望的任何单位 ——px，mm，rems，％等。

-
- -

如果你现在保存和刷新，你会得到一个这样的结果：

- - - -

{{ EmbedLiveSample('介绍_top_bottom_left_right', '100%', 500) }}

- -

酷，是吗？ 好吧，所以这个结果这可能不是你期待的——为什么它移动到底部和右边，但我们指定顶部和左边？ 听起来不合逻辑，但这只是相对定位工作的方式——你需要考虑一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。 所以例如，如果你指定 top: 30px;一个力推动框的顶部，使它向下移动30px。

- -
-

注意： 你可以在 2_relative-positioning.html 查看这个例子 (see source code)。

-
- -

绝对定位

- -

绝对定位带来了非常不同的结果。让我们尝试改变代码中的位置声明如下：

- -
position: absolute;
- -

如果你现在保存和刷新，你应该看到这样：

- - - -

{{ EmbedLiveSample('绝对定位', '100%', 420) }}

- -

首先，请注意，定位的元素应该在文档流中的间隙不再存在——第一和第三元素已经靠在一起，就像第二个元素不再存在！好吧，在某种程度上，这是真的。绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……

- -

第二，注意元素的位置已经改变——这是因为{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}}以不同的方式在绝对定位。 它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。 所以在这种情况下，我们说的绝对定位元素应该位于从“包含元素”的顶部30px，从左边30px。

- -
-

注意：如果需要，您可以使用{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}} 调整元素大小。 尝试设置 top: 0; bottom: 0; left: 0; right: 0; 和 margin: 0; 对你定位的元素，看看会发生什么！ 之后再回来

-
- -
-

注意：是的，margins 仍会影响定位的元素。 然而margin collapsing不会。

-
- -
-

注意：你可以在3_absolute-positioning.html 查看这个例子(see source code)。

-
- -

定位上下文

- -

哪个元素是绝对定位元素的“包含元素“？这取决于绝对定位元素的父元素的position属性。(参见 Identifying the containing block).

- -

如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且<html>元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。

- -

绝对定位元素在HTML源代码中，是被放在<body>中的，但是在最终的布局里面，它离页面(而不是<body>)的左边界、上边界有30px的距离。我们可以改变定位上下文 —— 绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）。 为了演示这一点，将以下声明添加到您的body规则中：

- -
position: relative;
- -

应该得到以下结果：

- - - -

{{ EmbedLiveSample('定位上下文', '100%', 420) }}

- -

定位的元素现在相对于{{htmlelement("body")}}元素。

- -
-

注意：你可以在这里看到这个例子 4_positioning-context.html (see source code).

-
- -

介绍 z-index

- -

所有这些绝对定位很有趣，但还有另一件事我们还没有考虑到 ——当元素开始重叠，什么决定哪些元素出现在其他元素的顶部？ 在我们已经看到的示例中，我们在定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素胜过未定位的元素。 当我们有不止一个的时候呢？

- -

尝试添加以下到您的CSS，使第一段也是绝对定位：

- -
p:nth-of-type(1) {
-  position: absolute;
-  background: lime;
-  top: 10px;
-  right: 30px;
-}
- -

此时，您将看到第一段的颜色为绿色，移出文档流程，并位于原始位置上方一点。它也堆叠在原始的 .positioned 段落下，其中两个重叠。这是因为 .positioned 段落是源顺序(HTML标记)中的第二个段落，并且源顺序中后定位的元素将赢得先定位的元素。

- -

您可以更改堆叠顺序吗？是的，您可以使用{{cssxref("z-index")}}属性。 “z-index”是对z轴的参考。你可以从源代码中的上一点回想一下，我们使用水平（x轴）和垂直（y轴）坐标来讨论网页，以确定像背景图像和阴影偏移之类的东西的位置。 （0,0）位于页面（或元素）的左上角，x和y轴跨页面向右和向下（适合从左到右的语言，无论如何）。

- -

网页也有一个z轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。{{cssxref("z-index")}} 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。

- -

要更改堆叠顺序，请尝试将以下声明添加到 p:nth-of-type(1) 规则中：

- -
z-index: 1;
- -

你现在应该可以看到完成的例子：

- - - -

{{ EmbedLiveSample('介绍_z-index', '100%', 400) }}

- -

请注意，z-index只接受无单位索引值；你不能指定你想要一个元素是Z轴上23像素—— 它不这样工作。 较高的值将高于较低的值，这取决于您使用的值。 使用2和3将产生与300和40000相同的效果。

- -
-

注意：你可以在这里看到这个例子 5_z-index.html (see source code).

-
- -

固定定位

- -

还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 {{htmlelement("html")}} 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。

- -

让我们举一个简单的例子来说明我们的意思。首先，从CSS中删除现有的 p:nth-of-type(1) 和.positioned 规则。

- -

现在，更新 body 规则以删除position: relative; 声明并添加固定高度，如此：

- -
body {
-  width: 500px;
-  height: 1400px;
-  margin: 0 auto;
-}
- -

现在我们要给{{htmlelement("h1")}}元素 position: fixed;，并让它坐在视口的顶部中心。将以下规则添加到CSS：

- -
h1 {
-  position: fixed;
-  top: 0;
-  width: 500px;
-  margin: 0 auto;
-  background: white;
-  padding: 10px;
-}
- -

 top: 0;是要使它贴在屏幕的顶部；我们然后给出标题与内容列相同的宽度，并使用可靠的老技巧 margin: 0 auto; 使它居中。 然后我们给它一个白色背景和一些内边距，所以内容将不会在它下面可见。

- -

如果您现在保存并刷新，您会看到一个有趣的小效果，标题保持固定，内容显示向上滚动并消失在其下。 但是我们可以改进这一点——目前标题下面挡住一些内容的开头。这是因为定位的标题不再出现在文档流中，所以其他内容向上移动到顶部。 我们要把它向下移动一点；我们可以通过在第一段设置一些顶部边距来做到这一点。添加：

- -
p:nth-of-type(1) {
-  margin-top: 60px;
-}
- -

你现在应该看到完成的例子：

- - - -

{{ EmbedLiveSample('固定定位', '100%', 400) }}

- -
-

注意：你可以在这里看到这个例子6_fixed-positioning.html (see source code).

-
- -

position: sticky

- -

还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起1​​0像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。

- - - -
.positioned {
-  position: sticky;
-  top: 30px;
-  left: 30px;
-}
- -

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

- -

position: sticky 的另一种有趣且常用的用法，是创建一个滚动索引页面。在此页面上，不同的标题会停留在页面顶部。这样的示例的标记可能如下所示：

- -
<h1>Sticky positioning</h1>
-
-<dl>
-    <dt>A</dt>
-    <dd>Apple</dd>
-    <dd>Ant</dd>
-    <dd>Altimeter</dd>
-    <dd>Airplane</dd>
-    <dt>B</dt>
-    <dd>Bird</dd>
-    <dd>Buzzard</dd>
-    <dd>Bee</dd>
-    <dd>Banana</dd>
-    <dd>Beanstalk</dd>
-    <dt>C</dt>
-    <dd>Calculator</dd>
-    <dd>Cane</dd>
-    <dd>Camera</dd>
-    <dd>Camel</dd>
-    <dt>D</dt>
-    <dd>Duck</dd>
-    <dd>Dime</dd>
-    <dd>Dipstick</dd>
-    <dd>Drone</dd>
-    <dt>E</dt>
-    <dd>Egg</dd>
-    <dd>Elephant</dd>
-    <dd>Egret</dd>
-</dl>
- -

CSS可能如下所示。在正常布局流中，{{htmlelement("dt")}}元素将随内容滚动。当我们在{{htmlelement("dt")}}元素上添加position: sticky，并将{{cssxref("top")}}的值设置为0，当标题滚动到视口的顶部时，支持此属性的浏览器会将标题粘贴到那个位置。随后，每个后续标题将替换前一个标题，直到它向上滚动到该位置。

- -
dt {
-  background-color: black;
-  color: white;
-  padding: 10px;
-  position: sticky;
-  top: 0;
-  left: 0;
-  margin: 1em 0;
-}
-
- - - -

{{ EmbedLiveSample('Sticky_2', '100%', 200) }}

- -
-

注意：你可以在 7_sticky-positioning.html 查看这个例子(see source code)。

-
- -

试试你的技术!

- -

这篇文章到此为止了，但你们能记住最重要的信息吗？在继续之前，您可以找到一些进一步的测试来验证是否完全掌握了这个知识：试试你的技术。

- -

总结

- -

我相信你用基本定位愉快地玩耍；它是创建复杂的CSS布局和UI功能背后的基本工具之一。 考虑到这一点，在下一篇文章中，我们将更有趣的定位——我们将进一步，开始建立一些真实世界有用的东西。

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}

- -

在本单元中

- - diff --git "a/files/zh-cn/learn/css/first_steps/css\345\246\202\344\275\225\350\277\220\350\241\214/index.html" "b/files/zh-cn/learn/css/first_steps/css\345\246\202\344\275\225\350\277\220\350\241\214/index.html" deleted file mode 100644 index 7aafcf481f..0000000000 --- "a/files/zh-cn/learn/css/first_steps/css\345\246\202\344\275\225\350\277\220\350\241\214/index.html" +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: CSS如何运行 -slug: Learn/CSS/First_steps/CSS如何运行 -tags: - - CSS - - DOM - - 入门 - - 无效的CSS代码 - - 解析 -translation_of: Learn/CSS/First_steps/How_CSS_works ---- -

{{LearnSidebar}}
- {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

- -

我们已经知道了CSS是做什么的以及怎么写简单的样式这样基础的CSS，接下来我将了解到浏览器如何获取CSS、HTML和将他们加载成网页。

- - - - - - - - - - - - -
前置知识:基础计算机知识、基本软件安装、简单文件知识、HTML基础
目标:理解浏览器如何加载CSS和HTML、浏览器遇到无法解析的CSS会发生什么
- -

CSS究竟是怎么工作的？

- -

当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。

- -
    -
  1. 浏览器载入HTML文件（比如从网络上获取）。
    2. -
  2. 将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式，下一节将更加详细的解释DOM。
    3. -
  3. 接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理，简单起见，同时此节主讲CSS，所以这里对如何加载JavaScript不会展开叙述。
    4. -
  4. 浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
    5. -
  5. 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
    6. -
  6. 网页展示在屏幕上（这一步被称为着色）。
    7. -
- -

结合下面的图示更形象：

- -

- -

关于DOM

- -

一个DOM有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM或DOM node）。节点由节点本身和其他DOM节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）。

- -

对于DOM的理解会很大程度上帮助你设计、调试和维护你的CSS，因为DOM是你的CSS样式和文件内容的结合。当你使用浏览器F12调试的时候你需要操作DOM以查看使用了哪些规则。

- -

一个真实的DOM案例

- -

不同于很长且枯燥的案例，这里我们通过一个HTML片段来了解HTML怎么转化成DOM

- -

以下列HTML代码为例：

- -
<p>
-  Let's use:
-  <span>Cascading</span>
-  <span>Style</span>
-  <span>Sheets</span>
-</p>
-
- -

在这个DOM中，<p>元素对应了父节点，它的子节点是一个text节点和三个对应了<span>元素的节点，SPAN节点同时也是他们中的Text节点的父节点。

- -
P
-├─ "Let's use:"
-├─ SPAN
-|  └─ "Cascading"
-├─ SPAN
-|  └─ "Style"
-└─ SPAN
-   └─ "Sheets"
-
- -

上图就是浏览器怎么解析之前那个HTML片段——它生成上图的DOM树形结构并将它按照如下输出到浏览器：

- -

{{EmbedLiveSample('一个真实的DOM案例', '100%', 55)}}

- - - -

应用CSS到DOM

- -

接下来让我们看看添加一些CSS到文件里加以渲染，同样的HTML代码：

- -
<p>
-  Let's use:
-  <span>Cascading</span>
-  <span>Style</span>
-  <span>Sheets</span>
-</p>
- -

以下为CSS代码：

- -
span {
-  border: 1px solid black;
-  background-color: lime;
-}
- -

浏览器会解析HTML并创造一个DOM，然后解析CSS。可以看到唯一的选择器就是span元素选择器，浏览器处理规则会非常快！把同样的规则直接使用在三个<span>标签上，然后渲染出图像到屏幕。

- -

现在的显示如下：

- -

{{EmbedLiveSample('应用CSS到DOM', '100%', 55)}}

- -

在我们下一个模块的 Debugging CSS 文章中我们将会使用F12调试CSS的问题并且更进一步的了解浏览器如何解析CSS。

- -

当浏览器遇到无法解析的CSS代码会发生什么

- -

在之前的文章中我们提到了浏览器并不会同时实现所有的新CSS，此外很多人也不会使用最新版本的浏览器。鉴于CSS一直不断的开发，因此领先于浏览器可以识别的范围，那么你也许会好奇当浏览器遇到无法解析的CSS选择器或声明的时候会发生什么呢？

- -

答案就是浏览器什么也不会做，继续解析下一个CSS样式！

- -

如果一个浏览器在解析你所书写的CSS规则的过程中遇到了无法理解的属性或者值，它会忽略这些并继续解析下面的CSS声明。在你书写了错误的CSS代码（或者误拼写），又或者当浏览器遇到对于它来说很新的还没有支持的CSS代码的时候上述的情况同样会发生（直接忽略）。

- -

相似的，当浏览器遇到无法解析的选择器的时候，他会直接忽略整个选择器规则，然后解析下一个CSS选择器。

- -

在下面的案例中，我使用会导致属性错误的英式拼写来书写"color"，所以我的段落没有被渲染成蓝色，而其他的CSS代码会正常执行，只有错误的部分会被忽略。

- -
-
<p> I want this text to be large, bold and blue.</p>
- -
p {
-  font-weight: bold;
-  colour: blue; /* incorrect spelling of the color property */
-  font-size: 200%;
-}
-
- -

{{EmbedLiveSample('Skipping_example', '100%', 200)}}

- -

这样做好处多多，代表着你使用最新的CSS优化的过程中浏览器遇到无法解析的规则也不会报错。当你为一个元素指定多个CSS样式的时候，浏览器会加载样式表中的最后的CSS代码进行渲染（样式表，优先级等请读者自行了解），也正因为如此，你可以为同一个元素指定多个CSS样式来解决有些浏览器不兼容新特性的问题（比如指定两个width）。

- -

这一特点在你想使用一个很新的CSS特性但是不是所有浏览器都支持的时候（浏览器兼容）非常有用，举例来说，一些老的浏览器不接收calc()(calculate的缩写，CSS3新增，为元素指定动态宽度、长度等，注意此处的动态是计算之后得一个值)作为一个值。我可能使用它结合像素为一个元素设置了动态宽度（如下），老式的浏览器由于无法解析忽略这一行；新式的浏览器则会把这一行解析成像素值，并且覆盖第一行指定的宽度。

- -
.box {
-  width: 500px;
-  width: calc(100% - 50px);
-}
- -

后面的课程我们会讨论更多关于浏览器兼容的问题。

- -

最后

- -

恭喜你完成本模块，下面的文章你将会使用你的新知识来完成覆盖样式的案例，在这个过程中测试一些CSS样式。

- -

{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

- -

模块目标

- -
    -
  1. 什么是CSS
    2. -
  2. 入门CSS
    3. -
  3. CSS的结构
    4. -
  4. CSS如何运行
    5. -
  5. 使用新知识
    6. -
diff --git a/files/zh-cn/learn/css/first_steps/getting_started/index.html b/files/zh-cn/learn/css/first_steps/getting_started/index.html new file mode 100644 index 0000000000..0a6087ee12 --- /dev/null +++ b/files/zh-cn/learn/css/first_steps/getting_started/index.html @@ -0,0 +1,267 @@ +--- +title: 让我们开始CSS的学习之旅 +slug: Learn/CSS/First_steps/开始 +tags: + - CSS + - 元素 + - 初学者 + - 学习 + - 类 + - 选择器 +translation_of: Learn/CSS/First_steps/Getting_started +--- +
+

{{LearnSidebar}}

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

+
+ +

在这篇文章中，我们将会拿一个简单的HTML文档做例子，并且在上边使用CSS样式，期待你能在此过程中学会更多有关CSS的实战性知识。

+ +

前置知识

+ +

在开始本单元之前，您应该：

+ + + +

目标

+ + + +

先从HTML开始吧

+ +

我们先以HTML文档展开叙述。如果想在自己电脑试一试，可以copy下面的代码。在你的电脑上，将代码以文件名： index.html 的形式保存下来。

+ +
<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>开始学习CSS</title>
+</head>
+
+<body>
+
+    <h1>我是一级标题</h1>
+
+    <p>这是一个段落文本. 在文本中有一个 <span>span element</span>
+并且还有一个 <a href="http://example.com">链接</a>.</p>
+
+    <p>这是第二段. 包含了一个 <em>强调</em> 元素.</p>
+
+    <ul>
+        <li>项目1</li>
+        <li>项目2</li>
+        <li>项目 <em>三</em></li>
+    </ul>
+
+</body>
+
+</html>
+
+ +
+

温馨提示：假设你电脑操作环境不方便创建文件运行代码，别担心，可以用我们下方给出的在线实时代码编辑器。

+
+ +

添加CSS试试看？

+ +

我们最想做的就是让HTML文档能够遵守我们给它的CSS规则。 其实有三种方式可以实现，而目前我们更倾向于利用最普遍且有用的方式——在文档的开头链接CSS。

+ +

在与之前所说的HTML文档的相同目录创建一个文件，保存并命名为 styles.css 。（看后缀知道此文件就是CSS文件）

+ +

为了把 styles.css 和 index.html 联结起来，可以在HTML文档中，{{htmlelement("head")}}语句模块里面加上下面的代码：

+ +
<link rel="stylesheet" href="styles.css">
+ +

 {{htmlelement("link")}} 语句块里面，我们用属性rel，让浏览器知道有CSS文档存在（所以需要遵守CSS样式的规定），并利用属性 href 指定，寻找CSS文件的位置。 你可以做测试来验证CSS是否有效：在 styles.css 里面加上CSS样式并观察显示的结果。下面，用你的编辑器打出下面的代码。

+ +
h1 {
+  color: red;
+}
+ +

保存HTML和CSS文档，刷新浏览器网页，不出意外你将看到网页顶层的大标题变成红色了。如果看到这个现象，我得恭喜你：你已经成功将某些CSS样式运用到HTML上了。当然假设没有达到预想结果，可以仔细检查每句代码是否正确，加油：）

+ +

你可以一直在本地编辑器练习 styles.css ，或者采用我们教程下面的交互式智能编辑器。这个编辑器会默认把第一个面板里面的CSS代码联结到旁边的HTML文档，就好像我们上面得两个文档一样互相联结。

+ +

样式化 HTML 元素

+ +

通过上一节将大标题变成红色的例子，我们已经展示了我们可以选中并且样式化 HTML 元素。我们通过触发元素选择器实现这一点——元素选择器，即直接匹配 HTML 元素的选择器。例如，若要样式化一个文档中所有的段落，只需使用选择器 p。若要将所有段落变成绿色，你可以利用如下方式：

+ +
p {
+  color: green;
+}
+ +

用逗号将不同选择器隔开，即可一次使用多个选择器。譬如，若要将所有段落与列表变成绿色，只需：

+ +
p, li {
+    color: green;
+}
+ +

您可以在下面的互动式文本编辑器上试试看，当然您也可以在本地的 CSS 文档上尝试。

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

+ +

改变元素的默认行为

+ +

只要一个 HTML 文档标记正确，即使像我们的例子那么简单，浏览器都会尽全力将其渲染至可读状态。标题默认使用大号粗体；列表旁总有项目符号。这是因为浏览器自带一个包含默认样式的样式表，默认对任何页面有效。没有了它们，所有文本会夹杂在一起变得一团糟，我们只得从头开始规定，好糟糕。话说回来，所有现代浏览器的默认样式都没什么差距。

+ +

不过你可能对浏览器的默认样式不太满意。没关系，只需选定那个元素，加一条 CSS 规则即可。就拿我们的无序列表 <ul>举个例子吧，它自带项目符号，不过要是你跟它有仇，你就可以这样移除它们：

+ +
li {
+  list-style-type: none;
+}
+ +

把上述代码加到你的 CSS 里面试一试！

+ +

欢迎参阅 MDN 上的 list-style-type 属性，看看到底有哪些值被支持。 list-style-type 页首提供互动性示例，您可以输入不同的值来瞅一瞅它们到底有什么用。关于每个值的详细描述都规规整整地列在下面。

+ +

通过参阅上述页面，你会发现你不仅能移除项目符号——你甚至能改变它们。赶快试试 square，它能把默认的小黑球变成方框框。

+ +

使用类名

+ +

目前为止，我们通过 HTML 元素名规定样式。如果你愿意所有元素都一个样，也不是不可以，但大多数情况下，我估计你都不愿意。我知道你想干啥，你想用这种方式样式化这一片元素，又想用那种方式样式化那一片元素，真贪心。不过没关系，你可以给 HTML 元素加个类名（class），再选中那个类名，这样就可以了，大家基本上都这么用。

+ +

举个例子吧，咱们把 class 属性加到表里面第二个对象。你的列表看起来应该是这样的：

+ +
<ul>
+  <li>项目一</li>
+  <li class="special">项目二</li>
+  <li>项目 <em>三</em></li>
+</ul>
+ +

在 CSS 中，要选中这个 special 类，只需在选择器的开头加个西文句点（.）。在你的 CSS 文档里加上如下代码：

+ +
.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

保存再刷新，就可以看到变化。

+ +

这个 special 类型可不局限于列表，它可以应用到各种元素上。举个例子，你可能也想让段落里边的 <span> 一起又橙又粗起来。试试把special 类属性加上去，保存，刷新，哇，生活就是这么美好。

+ +

有时你会发现选择器中，HTML 元素选择器跟类一起出现：

+ +
li.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

这个意思是说，“选中每个 special 类的 li 元素”。 你真要这样，好了，它对 <span> 还有其它元素不起作用了。你可以把这个元素再添上去就是了：

+ +
li.special,
+span.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

你们都是懒人，肯定不想每加一个 special 类的元素就改一遍 CSS 表，你肯定想把一个类的属性应用到多个元素上。所以说，有时还是别管元素，光看类就完事了，除非你意志坚定，坚持对这个类的某一种元素创造规则，还不让其它元素用。

+ +

根据元素在文档中的位置确定样式

+ +

有时候，您希望某些内容根据它在文档中的位置而有所不同。这里有很多选择器可以为您提供帮助，但现在我们只介绍几个选择器。在我们的文档中有两个 <em>元素 ——一个在段落内，另一个在列表项内。仅选择嵌套在<li> 元素内的<em>我们可以使用一个称为包含选择符的选择器，它只是单纯地在两个选择器之间加上一个空格。

+ +

将以下规则添加到样式表。

+ +
li em {
+  color: rebeccapurple;
+}
+ +

该选择器将选择<li>内部的任何<em>元素（<li>的后代）。因此在示例文档中，您应该发现第三个列表项内的<em>现在是紫色，但是在段落内的那个没发生变化。

+ +

另一些可能想尝试的事情是在HTML文档中设置直接出现在标题后面并且与标题具有相同层级的段落样式，为此需在两个选择器之间添加一个 + 号 (成为 相邻选择符) 

+ +

也将这个规则添加到样式表中：

+ +
h1 + p {
+  font-size: 200%;
+}
+ +

下面的示例包含了上面的两个规则。 尝试添加规则使位于段落中的span变为红色。如果正确您将看到在第一段中的span会变为红色，但是第一个列表项中的span不会改变颜色。

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

+ +
+

Note: 如你所见，CSS 给我们提供了几种定位元素的方法。到目前为止，我们只触及了皮毛！我们将对这些选择器进行适当的研究，更多的内容将在我们后面的Selectors章节中介绍。

+
+ +

根据状态确定样式

+ +

在这篇教程中我们最后要看的一种修改样式的方法就是根据标签的状态确定样式。一个直观的例子就是当我们修改链接的样式时。 当我们修改一个链接的样式时我们需要定位（针对） <a> （锚）标签。取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的，亦或是正在被点击当中的状态，这个标签有着不同的状态。你可以使用CSS去定位或者说针对这些不同的状态进行修饰——下面的CSS代码使得没有被访问的链接颜色变为粉色、访问过的链接变为绿色。

+ +
a:link {
+  color: pink;
+}
+
+a:visited {
+  color: green;
+}
+ +

你可以改变链接被鼠标悬停的时候的样式，例如移除下划线，下面的代码就实现了这个功能。

+ +
a:hover {
+  text-decoration: none;
+}
+ +

在下面的例子中，你可以对超链接的不同状态尝试各种各样的值。我已经编写了一些规则，然而你肯定已经发现粉色看上去太浅以至于不好辨认。— 换个更好的颜色吧。你能将链接变为黑体吗?

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

+ +

我们对鼠标悬停于链接上的情况删除了下划线。你当然可以让超链接在任何情况下都没有下划线.。但需要注意的是，对一个实际的站点，需要让浏览者知道“链接是链接”。为了让浏览者注意到一段文字中的某些部分是可点击的，最好保留link状态下的下划线。— 这是下划线的本来作用。不管你用CSS来做什么，都应当使得变化后的文档看上去更加清晰明了。— 在后面，当我们遇到类似的情况时，我们将适时指出。

+ +
+

注: 在本教程以及整个MDN站点中，你会经常看到“无障碍”这个词。“无障碍”一词的意思是，我们的网页应当每一个访客都能够理解、使用。

+ +

你的访客可能在一台使用鼠标和键盘操作的计算机前，也可能正在使用带有触摸屏的手机，或者正在使用屏幕阅读软件读出文档内容，或者他们需要使用更大的字体，或者仅仅使用键盘浏览站点。

+ +

一个朴素的HTML文档一般来说对任何人都是可以无障碍访问的 ，当你开始为它添加样式，记得不要破坏这种可访问性。

+
+ +

将选择子和关系选择器组合起来

+ +

你可以将多个选择子和关系选择器组合起来。来看一些例子：

+ +
/* selects any <span> that is inside a <p>, which is inside an <article>  */
+article p span { ... }
+
+/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
+h1 + ul + p { ... }
+ +

你可以将多种类型组合在一起。试试将下面的代码添加到你的代码里：

+ +
body h1 + p .special {
+  color: yellow;
+  background-color: black;
+  padding: 5px;
+}
+ +

上面的代码为以下元素建立样式：在<body>之内，紧接在<h1>后面的<p>元素的内部，类名为special。

+ +

在我们提供的原始HTML文档中，与之符合的元素只有<span class="special">.

+ +

如果你现在觉得这份代码太复杂了，别担心，— 一旦你开始编写更多的CSS代码，你很快就能找到窍门。

+ +

总结

+ +

在本教程中，我们学习了使用CSS为文档添加样式的几种方法。在教程的剩下部分，我们将继续这个话题。不过，你现在已经有了足够的知识为文本建立样式；根据目标元素的不同用不同的方式应用样式；在MDN文档中查找属性和值。

+ +

在下一节中，我们将看到样式表的结构是什么样的。

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

+ +

在此模块

+ +
    +
  1. 什么是CSS?
    2. +
  2. 开始学习CSS
    3. +
  3. CSS代码是如何组织的
    4. +
  4. CSS是如何工作的
    5. +
  5. 开始使用你的新知识
    6. +
diff --git a/files/zh-cn/learn/css/first_steps/how_css_works/index.html b/files/zh-cn/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..7aafcf481f --- /dev/null +++ b/files/zh-cn/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,162 @@ +--- +title: CSS如何运行 +slug: Learn/CSS/First_steps/CSS如何运行 +tags: + - CSS + - DOM + - 入门 + - 无效的CSS代码 + - 解析 +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{LearnSidebar}}
+ {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+ +

我们已经知道了CSS是做什么的以及怎么写简单的样式这样基础的CSS，接下来我将了解到浏览器如何获取CSS、HTML和将他们加载成网页。

+ + + + + + + + + + + + +
前置知识:基础计算机知识、基本软件安装、简单文件知识、HTML基础
目标:理解浏览器如何加载CSS和HTML、浏览器遇到无法解析的CSS会发生什么
+ +

CSS究竟是怎么工作的？

+ +

当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。

+ +
    +
  1. 浏览器载入HTML文件（比如从网络上获取）。
    2. +
  2. 将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式，下一节将更加详细的解释DOM。
    3. +
  3. 接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理，简单起见，同时此节主讲CSS，所以这里对如何加载JavaScript不会展开叙述。
    4. +
  4. 浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
    5. +
  5. 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
    6. +
  6. 网页展示在屏幕上（这一步被称为着色）。
    7. +
+ +

结合下面的图示更形象：

+ +

+ +

关于DOM

+ +

一个DOM有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM或DOM node）。节点由节点本身和其他DOM节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）。

+ +

对于DOM的理解会很大程度上帮助你设计、调试和维护你的CSS，因为DOM是你的CSS样式和文件内容的结合。当你使用浏览器F12调试的时候你需要操作DOM以查看使用了哪些规则。

+ +

一个真实的DOM案例

+ +

不同于很长且枯燥的案例，这里我们通过一个HTML片段来了解HTML怎么转化成DOM

+ +

以下列HTML代码为例：

+ +
<p>
+  Let's use:
+  <span>Cascading</span>
+  <span>Style</span>
+  <span>Sheets</span>
+</p>
+
+ +

在这个DOM中，<p>元素对应了父节点，它的子节点是一个text节点和三个对应了<span>元素的节点，SPAN节点同时也是他们中的Text节点的父节点。

+ +
P
+├─ "Let's use:"
+├─ SPAN
+|  └─ "Cascading"
+├─ SPAN
+|  └─ "Style"
+└─ SPAN
+   └─ "Sheets"
+
+ +

上图就是浏览器怎么解析之前那个HTML片段——它生成上图的DOM树形结构并将它按照如下输出到浏览器：

+ +

{{EmbedLiveSample('一个真实的DOM案例', '100%', 55)}}

+ + + +

应用CSS到DOM

+ +

接下来让我们看看添加一些CSS到文件里加以渲染，同样的HTML代码：

+ +
<p>
+  Let's use:
+  <span>Cascading</span>
+  <span>Style</span>
+  <span>Sheets</span>
+</p>
+ +

以下为CSS代码：

+ +
span {
+  border: 1px solid black;
+  background-color: lime;
+}
+ +

浏览器会解析HTML并创造一个DOM，然后解析CSS。可以看到唯一的选择器就是span元素选择器，浏览器处理规则会非常快！把同样的规则直接使用在三个<span>标签上，然后渲染出图像到屏幕。

+ +

现在的显示如下：

+ +

{{EmbedLiveSample('应用CSS到DOM', '100%', 55)}}

+ +

在我们下一个模块的 Debugging CSS 文章中我们将会使用F12调试CSS的问题并且更进一步的了解浏览器如何解析CSS。

+ +

当浏览器遇到无法解析的CSS代码会发生什么

+ +

在之前的文章中我们提到了浏览器并不会同时实现所有的新CSS，此外很多人也不会使用最新版本的浏览器。鉴于CSS一直不断的开发，因此领先于浏览器可以识别的范围，那么你也许会好奇当浏览器遇到无法解析的CSS选择器或声明的时候会发生什么呢？

+ +

答案就是浏览器什么也不会做，继续解析下一个CSS样式！

+ +

如果一个浏览器在解析你所书写的CSS规则的过程中遇到了无法理解的属性或者值，它会忽略这些并继续解析下面的CSS声明。在你书写了错误的CSS代码（或者误拼写），又或者当浏览器遇到对于它来说很新的还没有支持的CSS代码的时候上述的情况同样会发生（直接忽略）。

+ +

相似的，当浏览器遇到无法解析的选择器的时候，他会直接忽略整个选择器规则，然后解析下一个CSS选择器。

+ +

在下面的案例中，我使用会导致属性错误的英式拼写来书写"color"，所以我的段落没有被渲染成蓝色，而其他的CSS代码会正常执行，只有错误的部分会被忽略。

+ +
+
<p> I want this text to be large, bold and blue.</p>
+ +
p {
+  font-weight: bold;
+  colour: blue; /* incorrect spelling of the color property */
+  font-size: 200%;
+}
+
+ +

{{EmbedLiveSample('Skipping_example', '100%', 200)}}

+ +

这样做好处多多，代表着你使用最新的CSS优化的过程中浏览器遇到无法解析的规则也不会报错。当你为一个元素指定多个CSS样式的时候，浏览器会加载样式表中的最后的CSS代码进行渲染（样式表，优先级等请读者自行了解），也正因为如此，你可以为同一个元素指定多个CSS样式来解决有些浏览器不兼容新特性的问题（比如指定两个width）。

+ +

这一特点在你想使用一个很新的CSS特性但是不是所有浏览器都支持的时候（浏览器兼容）非常有用，举例来说，一些老的浏览器不接收calc()(calculate的缩写，CSS3新增，为元素指定动态宽度、长度等，注意此处的动态是计算之后得一个值)作为一个值。我可能使用它结合像素为一个元素设置了动态宽度（如下），老式的浏览器由于无法解析忽略这一行；新式的浏览器则会把这一行解析成像素值，并且覆盖第一行指定的宽度。

+ +
.box {
+  width: 500px;
+  width: calc(100% - 50px);
+}
+ +

后面的课程我们会讨论更多关于浏览器兼容的问题。

+ +

最后

+ +

恭喜你完成本模块，下面的文章你将会使用你的新知识来完成覆盖样式的案例，在这个过程中测试一些CSS样式。

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+ +

模块目标

+ +
    +
  1. 什么是CSS
    2. +
  2. 入门CSS
    3. +
  3. CSS的结构
    4. +
  4. CSS如何运行
    5. +
  5. 使用新知识
    6. +
diff --git "a/files/zh-cn/learn/css/first_steps/\345\274\200\345\247\213/index.html" "b/files/zh-cn/learn/css/first_steps/\345\274\200\345\247\213/index.html" deleted file mode 100644 index 0a6087ee12..0000000000 --- "a/files/zh-cn/learn/css/first_steps/\345\274\200\345\247\213/index.html" +++ /dev/null @@ -1,267 +0,0 @@ ---- -title: 让我们开始CSS的学习之旅 -slug: Learn/CSS/First_steps/开始 -tags: - - CSS - - 元素 - - 初学者 - - 学习 - - 类 - - 选择器 -translation_of: Learn/CSS/First_steps/Getting_started ---- -
-

{{LearnSidebar}}

- -

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

-
- -

在这篇文章中，我们将会拿一个简单的HTML文档做例子，并且在上边使用CSS样式，期待你能在此过程中学会更多有关CSS的实战性知识。

- -

前置知识

- -

在开始本单元之前，您应该：

- - - -

目标

- - - -

先从HTML开始吧

- -

我们先以HTML文档展开叙述。如果想在自己电脑试一试，可以copy下面的代码。在你的电脑上，将代码以文件名： index.html 的形式保存下来。

- -
<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <title>开始学习CSS</title>
-</head>
-
-<body>
-
-    <h1>我是一级标题</h1>
-
-    <p>这是一个段落文本. 在文本中有一个 <span>span element</span>
-并且还有一个 <a href="http://example.com">链接</a>.</p>
-
-    <p>这是第二段. 包含了一个 <em>强调</em> 元素.</p>
-
-    <ul>
-        <li>项目1</li>
-        <li>项目2</li>
-        <li>项目 <em>三</em></li>
-    </ul>
-
-</body>
-
-</html>
-
- -
-

温馨提示：假设你电脑操作环境不方便创建文件运行代码，别担心，可以用我们下方给出的在线实时代码编辑器。

-
- -

添加CSS试试看？

- -

我们最想做的就是让HTML文档能够遵守我们给它的CSS规则。 其实有三种方式可以实现，而目前我们更倾向于利用最普遍且有用的方式——在文档的开头链接CSS。

- -

在与之前所说的HTML文档的相同目录创建一个文件，保存并命名为 styles.css 。（看后缀知道此文件就是CSS文件）

- -

为了把 styles.css 和 index.html 联结起来，可以在HTML文档中，{{htmlelement("head")}}语句模块里面加上下面的代码：

- -
<link rel="stylesheet" href="styles.css">
- -

 {{htmlelement("link")}} 语句块里面，我们用属性rel，让浏览器知道有CSS文档存在（所以需要遵守CSS样式的规定），并利用属性 href 指定，寻找CSS文件的位置。 你可以做测试来验证CSS是否有效：在 styles.css 里面加上CSS样式并观察显示的结果。下面，用你的编辑器打出下面的代码。

- -
h1 {
-  color: red;
-}
- -

保存HTML和CSS文档，刷新浏览器网页，不出意外你将看到网页顶层的大标题变成红色了。如果看到这个现象，我得恭喜你：你已经成功将某些CSS样式运用到HTML上了。当然假设没有达到预想结果，可以仔细检查每句代码是否正确，加油：）

- -

你可以一直在本地编辑器练习 styles.css ，或者采用我们教程下面的交互式智能编辑器。这个编辑器会默认把第一个面板里面的CSS代码联结到旁边的HTML文档，就好像我们上面得两个文档一样互相联结。

- -

样式化 HTML 元素

- -

通过上一节将大标题变成红色的例子，我们已经展示了我们可以选中并且样式化 HTML 元素。我们通过触发元素选择器实现这一点——元素选择器，即直接匹配 HTML 元素的选择器。例如，若要样式化一个文档中所有的段落，只需使用选择器 p。若要将所有段落变成绿色，你可以利用如下方式：

- -
p {
-  color: green;
-}
- -

用逗号将不同选择器隔开，即可一次使用多个选择器。譬如，若要将所有段落与列表变成绿色，只需：

- -
p, li {
-    color: green;
-}
- -

您可以在下面的互动式文本编辑器上试试看，当然您也可以在本地的 CSS 文档上尝试。

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

- -

改变元素的默认行为

- -

只要一个 HTML 文档标记正确，即使像我们的例子那么简单，浏览器都会尽全力将其渲染至可读状态。标题默认使用大号粗体；列表旁总有项目符号。这是因为浏览器自带一个包含默认样式的样式表，默认对任何页面有效。没有了它们，所有文本会夹杂在一起变得一团糟，我们只得从头开始规定，好糟糕。话说回来，所有现代浏览器的默认样式都没什么差距。

- -

不过你可能对浏览器的默认样式不太满意。没关系，只需选定那个元素，加一条 CSS 规则即可。就拿我们的无序列表 <ul>举个例子吧，它自带项目符号，不过要是你跟它有仇，你就可以这样移除它们：

- -
li {
-  list-style-type: none;
-}
- -

把上述代码加到你的 CSS 里面试一试！

- -

欢迎参阅 MDN 上的 list-style-type 属性，看看到底有哪些值被支持。 list-style-type 页首提供互动性示例，您可以输入不同的值来瞅一瞅它们到底有什么用。关于每个值的详细描述都规规整整地列在下面。

- -

通过参阅上述页面，你会发现你不仅能移除项目符号——你甚至能改变它们。赶快试试 square，它能把默认的小黑球变成方框框。

- -

使用类名

- -

目前为止，我们通过 HTML 元素名规定样式。如果你愿意所有元素都一个样，也不是不可以，但大多数情况下，我估计你都不愿意。我知道你想干啥，你想用这种方式样式化这一片元素，又想用那种方式样式化那一片元素，真贪心。不过没关系，你可以给 HTML 元素加个类名（class），再选中那个类名，这样就可以了，大家基本上都这么用。

- -

举个例子吧，咱们把 class 属性加到表里面第二个对象。你的列表看起来应该是这样的：

- -
<ul>
-  <li>项目一</li>
-  <li class="special">项目二</li>
-  <li>项目 <em>三</em></li>
-</ul>
- -

在 CSS 中，要选中这个 special 类，只需在选择器的开头加个西文句点（.）。在你的 CSS 文档里加上如下代码：

- -
.special {
-  color: orange;
-  font-weight: bold;
-}
- -

保存再刷新，就可以看到变化。

- -

这个 special 类型可不局限于列表，它可以应用到各种元素上。举个例子，你可能也想让段落里边的 <span> 一起又橙又粗起来。试试把special 类属性加上去，保存，刷新，哇，生活就是这么美好。

- -

有时你会发现选择器中，HTML 元素选择器跟类一起出现：

- -
li.special {
-  color: orange;
-  font-weight: bold;
-}
- -

这个意思是说，“选中每个 special 类的 li 元素”。 你真要这样，好了，它对 <span> 还有其它元素不起作用了。你可以把这个元素再添上去就是了：

- -
li.special,
-span.special {
-  color: orange;
-  font-weight: bold;
-}
- -

你们都是懒人，肯定不想每加一个 special 类的元素就改一遍 CSS 表，你肯定想把一个类的属性应用到多个元素上。所以说，有时还是别管元素，光看类就完事了，除非你意志坚定，坚持对这个类的某一种元素创造规则，还不让其它元素用。

- -

根据元素在文档中的位置确定样式

- -

有时候，您希望某些内容根据它在文档中的位置而有所不同。这里有很多选择器可以为您提供帮助，但现在我们只介绍几个选择器。在我们的文档中有两个 <em>元素 ——一个在段落内，另一个在列表项内。仅选择嵌套在<li> 元素内的<em>我们可以使用一个称为包含选择符的选择器，它只是单纯地在两个选择器之间加上一个空格。

- -

将以下规则添加到样式表。

- -
li em {
-  color: rebeccapurple;
-}
- -

该选择器将选择<li>内部的任何<em>元素（<li>的后代）。因此在示例文档中，您应该发现第三个列表项内的<em>现在是紫色，但是在段落内的那个没发生变化。

- -

另一些可能想尝试的事情是在HTML文档中设置直接出现在标题后面并且与标题具有相同层级的段落样式，为此需在两个选择器之间添加一个 + 号 (成为 相邻选择符) 

- -

也将这个规则添加到样式表中：

- -
h1 + p {
-  font-size: 200%;
-}
- -

下面的示例包含了上面的两个规则。 尝试添加规则使位于段落中的span变为红色。如果正确您将看到在第一段中的span会变为红色，但是第一个列表项中的span不会改变颜色。

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

- -
-

Note: 如你所见，CSS 给我们提供了几种定位元素的方法。到目前为止，我们只触及了皮毛！我们将对这些选择器进行适当的研究，更多的内容将在我们后面的Selectors章节中介绍。

-
- -

根据状态确定样式

- -

在这篇教程中我们最后要看的一种修改样式的方法就是根据标签的状态确定样式。一个直观的例子就是当我们修改链接的样式时。 当我们修改一个链接的样式时我们需要定位（针对） <a> （锚）标签。取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的，亦或是正在被点击当中的状态，这个标签有着不同的状态。你可以使用CSS去定位或者说针对这些不同的状态进行修饰——下面的CSS代码使得没有被访问的链接颜色变为粉色、访问过的链接变为绿色。

- -
a:link {
-  color: pink;
-}
-
-a:visited {
-  color: green;
-}
- -

你可以改变链接被鼠标悬停的时候的样式，例如移除下划线，下面的代码就实现了这个功能。

- -
a:hover {
-  text-decoration: none;
-}
- -

在下面的例子中，你可以对超链接的不同状态尝试各种各样的值。我已经编写了一些规则，然而你肯定已经发现粉色看上去太浅以至于不好辨认。— 换个更好的颜色吧。你能将链接变为黑体吗?

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

- -

我们对鼠标悬停于链接上的情况删除了下划线。你当然可以让超链接在任何情况下都没有下划线.。但需要注意的是，对一个实际的站点，需要让浏览者知道“链接是链接”。为了让浏览者注意到一段文字中的某些部分是可点击的，最好保留link状态下的下划线。— 这是下划线的本来作用。不管你用CSS来做什么，都应当使得变化后的文档看上去更加清晰明了。— 在后面，当我们遇到类似的情况时，我们将适时指出。

- -
-

注: 在本教程以及整个MDN站点中，你会经常看到“无障碍”这个词。“无障碍”一词的意思是，我们的网页应当每一个访客都能够理解、使用。

- -

你的访客可能在一台使用鼠标和键盘操作的计算机前，也可能正在使用带有触摸屏的手机，或者正在使用屏幕阅读软件读出文档内容，或者他们需要使用更大的字体，或者仅仅使用键盘浏览站点。

- -

一个朴素的HTML文档一般来说对任何人都是可以无障碍访问的 ，当你开始为它添加样式，记得不要破坏这种可访问性。

-
- -

将选择子和关系选择器组合起来

- -

你可以将多个选择子和关系选择器组合起来。来看一些例子：

- -
/* selects any <span> that is inside a <p>, which is inside an <article>  */
-article p span { ... }
-
-/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
-h1 + ul + p { ... }
- -

你可以将多种类型组合在一起。试试将下面的代码添加到你的代码里：

- -
body h1 + p .special {
-  color: yellow;
-  background-color: black;
-  padding: 5px;
-}
- -

上面的代码为以下元素建立样式：在<body>之内，紧接在<h1>后面的<p>元素的内部，类名为special。

- -

在我们提供的原始HTML文档中，与之符合的元素只有<span class="special">.

- -

如果你现在觉得这份代码太复杂了，别担心，— 一旦你开始编写更多的CSS代码，你很快就能找到窍门。

- -

总结

- -

在本教程中，我们学习了使用CSS为文档添加样式的几种方法。在教程的剩下部分，我们将继续这个话题。不过，你现在已经有了足够的知识为文本建立样式；根据目标元素的不同用不同的方式应用样式；在MDN文档中查找属性和值。

- -

在下一节中，我们将看到样式表的结构是什么样的。

- -

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

- -

在此模块

- -
    -
  1. 什么是CSS?
    2. -
  2. 开始学习CSS
    3. -
  3. CSS代码是如何组织的
    4. -
  4. CSS是如何工作的
    5. -
  5. 开始使用你的新知识
    6. -
diff --git a/files/zh-cn/learn/css/howto/css_faq/index.html b/files/zh-cn/learn/css/howto/css_faq/index.html new file mode 100644 index 0000000000..0e0593054b --- /dev/null +++ b/files/zh-cn/learn/css/howto/css_faq/index.html @@ -0,0 +1,183 @@ +--- +title: CSS 常见问题 +slug: Web/CSS/Common_CSS_Questions +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

为什么我有效的CSS没有正确的渲染？

+ +

浏览器使用DOCTYPE声明来选择是否使用更符合Web标准或兼容旧浏览器的bug的模式。在你的HTML的开始使用一个正确的和现代的DOCTYPE声明将改善浏览器标准执行。

+ +

现代浏览器主要有两种渲染模式：

+ + + +

基于Gecko的浏览器， 有三分之一 Almost Standards Mode， 只有一些小怪癖。

+ +

这是最常用的触发标准模式或准标准模式的DOCTYPE声明列表：

+ +
<!DOCTYPE html> /* 这一行是 HTML5 的 doctype 声明。，使用该声明会使现代浏览器使用
+                   HTML5 解析器处理页面，这是推荐的 doctype 声明。*/
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+ +

为什么我有效的css完全没有被渲染？ 

+ +

为了使浏览器渲染样式文件，CSS样式表必须用text/css的MIME。如果Web服务器不服务于这种类型，则CSS也不会被应用。

+ +

id和class有什么不同？

+ +

HTML元素可以拥有一个id/或class属性。 id属性为元素指定应用一个有效名称，只能有一个具有该名称的元素。class属性指定一个类名的元素，而这个名称可以被页面内的许多元素被使用。 CSS允许你可以对特定的id和/或类名的元素应用样式。
+
+ 当你想给一个特定元素或块应用样式规则时就使用ID选择符。此样式将只用于与该特定id匹配的元素。

+ +


+ 当你想要将样式规则应用于多个块和元素时，你应该使用class选择符。

+ +

较少样式的样式表通常性能更高。因此建议尽可能多地使用类， 保留id作为特定用途 (比如链接label标签和form元素或者为语义上唯一的元素应用样式)。

+ +

查看 CSS selectors

+ +

我如何还原属性的默认值？

+ +

最初CSS没有提供“defaule”关键字和还原默认属性的值，唯一途径是显式地重新声明该属性。

+ +

与CSS2相比，已经发生了改变。 关键字 initial 现在是一个有效的CSS属性。它将给定的CSS属性值重置为默认值。

+ +

我如何才可以从一个样式中衍生出另一种样式?

+ +

CSS 不允许这样做。(See Eric Meyer's note about the Working Group's stance). 但是，将多个类分配给单个元素，可以提供相同的效果。

+ +

我该如何给一个元素分配多个类？

+ +

HTML元素可以通过列出的类属性，用空格分开它们。

+ +
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... content of today's news ...
+</div>
+
+ +

如果相同的属性中声明的规则，解决冲突首先通过特异性，然后根据CSS声明的顺序。在class属性类的顺序是不相关的。

+ +

为什么我的样式规则不能正确地工作？

+ +

在语法上正确的样式规则可能在某些情况下不适用。你可以使用 DOM Inspector's CSS Style Rules 调试这类问题。 下面列出了最常见的忽略样式规则的实例：

+ +

HTML元素层次结构

+ +

The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.

+ +
.news { color: black; }
+.corpName { font-weight: bold; color: red; }
+
+<!-- news item text is black, but corporate name is red and in bold -->
+<div class="news">
+   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
+</div>
+
+ +

In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.

+ +

显式重定义样式规则

+ +

In CSS stylesheets, order is important. If you define a rule and then you re-define the same rule, the last definition is used.

+ +
#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  other rules             */
+/*  other rules             */
+/*  other rules             */
+.stockSymbol { font-weight: normal; }
+
+<!-- most text is in bold, except "GE", which is red and not bold -->
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.

+ +

使用便捷属性

+ +

Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.

+ +
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order is important.

+ +
#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight is now normal */
+}
+
+ +

使用 * 选择器

+ +

The * wildcard selector refers to any element, and it has to be used with particular care.

+ +
body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+<div id="section">
+   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
+</div>
+
+ +

In this example the body * selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So font-weight: bold; applied to the .corpName class is overridden by font-weight: normal; applied to all elements in the body.

+ +

The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.

+ +

CSS 中的优先级

+ +

When multiples rules apply to a certain element, the rule chosen depends on its style specificity. Inline style (in HTML style attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.

+ +
div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+<div id="orange" class="green" style="color: red;">This is red</div>
+
+ +

The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the CSS 2.1 Specification chapter 6.4.3

+ +

 -moz-*， -ms-*， -webkit-*， -o-* 以及 -khtml-* 属性有什么用？

+ +

These  properties, called prefixed properties, are extension to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.

+ +

The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolve.

+ +

Please see the Mozilla CSS Extensions page for more information on the Mozilla-prefixed CSS properties.

+ +

z-index 属性与定位有什么关系？

+ +

z-index属性指定了元素的栈序。

+ +

有较高z-index/栈序的元素总是在有着较低z-index/栈序的元素之前。

+ +

z-index只会在有着指定position (position:absolute, position:relative, or position:fixed)的元素上工作。

diff --git a/files/zh-cn/learn/css/howto/generated_content/index.html b/files/zh-cn/learn/css/howto/generated_content/index.html new file mode 100644 index 0000000000..f3f9a0797b --- /dev/null +++ b/files/zh-cn/learn/css/howto/generated_content/index.html @@ -0,0 +1,160 @@ +--- +title: Content +slug: Web/Guide/CSS/Getting_started/Content +translation_of: Learn/CSS/Howto/Generated_content +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Color", "颜色") }}这是 CSS 入门教程的第9部分，介绍了一些通过CSS改变文档内容的方法。这样，仅修改样式表你就能把文本内容及图片添加到文档。

+ +

信息: 内容

+ +

CSS的一个重要优势是它可以帮助你将文档内容和其样式分离。但是有时候在样式而非文档中定义一些内容也是很有用的。

+ +

在样式中可以定义文本内容和图片内容。当内容与文档结构紧密相关的时候，你可以在样式表中指定内容。

+ +
+
更多细节
+ +

在样式表中指定内容会使事情变得复杂：你可能有多个语言版本的文档共享同一个样式表。如果样式表的一部分需要翻译，这就意味着你需要将这部分单独保存在多个样式表中，并在不同语言的文档中引用。

+ +

如果你指定的内容由通用符号和图片组成的话，就不存在这个问题。

+ +

样式表中指定的内容不会成为DOM的一部分。

+
+ +

文本内容

+ +

CSS可以在元素的前后插入文本：在选择器的后面加上{{ cssxref("::before") }} 或者 {{ cssxref("::after") }} 。在声明中，指定 {{ cssxref("content") }} 属性，并设置文本内容。

+ +
+
例
+ +

下面这条规则在所有类名包含 ref的元素前面加上 Reference:

+ +
.ref::before {
+  font-weight: bold;
+  color: navy;
+  content: "Reference: ";
+}
+
+
+ +
+
更多细节
+ +

样式表默认使用UTF-8字符集。也可以通过link属性或样式表以及其他方式指定。 参见 CSS规范中 4.4 CSS style sheet representation

+ +

还可以通过转义机制（通过反斜杠转义）指定单个字符。比如， \265B 是国际象棋黑皇后的符号 ♛。更多参见 Referring to characters not represented in a character encoding 和CSS规范中的 Characters and case。

+
+ +

图片内容

+ +

可以通过将{{ cssxref("content") }} 属性值设置为某个图片的URL，可以将图片插到元素的前面或后面。

+ +
+
例
+ +

下面这条规则在所有类名包含glossary的a标签后面插入一个空格和一个图标：

+ +
a.glossary::after {content: " " url("../images/glossary-icon.gif");}
+
+
+ +

将图片设置成元素的背景图：将 {{ cssxref("background") }} 的值设为图片的URL。这是同时设置背景颜色，背景图，图片如何重复等的快捷写法。

+ +
+
例
+ +

这条规则通过指定图片URL设置特定元素的背景。

+ +

这是一个ID选择器；no-repeat表示背景图只出现一次，不重复:

+ +
#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
+
+
+ +
+
更多细节
+ +

了解更多影响背景图的属性，以及其他背景图选项，参见 {{ cssxref("background") }} 。

+
+ +

实践: 添加背景图片

+ +

这幅图是一个白方块，底部有一条蓝色实线:

+ + + + + + + +
Image:Blue-rule.png
+ +
    +
  1. 下载上图放到CSS同目录下
    2. +
  2. 编辑CSS文件，为body设置背景图. + 
    background: url("Blue-rule.png");
+
    + +

    背景图默认是 repeat（重复）的，无需明确指出。图片在水平和垂直方向重复，最终呈现出横格纸的效果：

    + +
    +

    Image:Blue-rule-ground.png

    + +
    +
    +

    Cascading Style Sheets

    +
    + +
    +

    Cascading Style Sheets

    +
    +
    +
    +
    3. +
+ +
+
挑战
+ +

下载图片:

+ + + + + + + +
Image:Yellow-pin.png
+ +

在样式表中增加一条规则，使得每行前面显示上面的图标

+ +
+

Image:Blue-rule-ground.png

+ +
+
image:Yellow-pin.png Cascading Style Sheets
+ +
image:Yellow-pin.png Cascading Style Sheets
+
+
+ +
+
Possible solution
+ +

Add this rule to your stylesheet:

+ +
p:before{
+  content: url("yellow-pin.png");
+}
+
+ +

 

+Hide solution
+答案.
+ +

接下来?

+ +

{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists", "列表") }}列表是一种常见的为列表元素添加内容的方式。下节将介绍如何 为列表元素指定样式。

diff --git a/files/zh-cn/learn/css/introduction_to_css/fundamental_css_comprehension/index.html b/files/zh-cn/learn/css/introduction_to_css/fundamental_css_comprehension/index.html deleted file mode 100644 index b246af87fe..0000000000 --- a/files/zh-cn/learn/css/introduction_to_css/fundamental_css_comprehension/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: 基本的CSS理解 -slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension -tags: - - 初学者 - - 盒模型 - - 评估 - - 选择器 -translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
- -

你已经在这个模块中了解到了很多内容, 所以当你达到这个模块的最后一篇文章的时候，感觉一定非常不错吧！在你继续之前的最后一步，就是完成对于这个模块的测验。本次测验涉及到几个相关的练习，你必须按顺序完成，这样你才能设计出最终的成品：一张名片/游戏玩家卡片/社交媒体的简介。

- - - - - - - - - - - - -
学习本章的前提条件:在尝试这个测验之前，你应该已经完成了这个模块中所有文章的学习。
目标：来测试对 CSS 理论、语法、功能性的基本理解。
- -

起点

- -

在开始测验之前，你应该:

- - - -
-

注意: 另外, 你可以使用一个网站比如 JSBin 或 Thimble 来做你的测验。你可以复制 HTML 和 CSS 到其中一个在线编辑器中，以及使用这个 this URL 来让 <img> 显示图片。如果你使用的在线编辑器无法让你链接 CSS 文件 (没有单独的 CSS 面板)，你也可以将 CSS 直接放入<style> 元素中。

-
- -

项目概要

- -

我们已经为你提供了一些原始的 HTML 和一张图片，然后需要编写必要的 CSS 来让其成为一个漂亮的网上小名片，可能大小是游戏玩家卡片或社交媒体简介的两倍。下面的段落描述了你需要做的事情。

- -

基本设置:

- - - -

关注我们为你提供的选择器和规则集：

- - - -

你需要写的新规则：

- - - -
-

注意: 记住第二条规则集会将 font-size: 10px; 设置在 <html> 元素上 — 这意味着 <html> 的任何后代中，一个em将会等于10px而不是默认的 16px 。(这是当然的，如果在层次结构中，有不同的 font-size 设置于其上，问题中的后代没有任何的祖先位于 em元素和 <html> 之间。这可能会影响您所需要的值，尽管在这个简单的示例中，这不是问题。)

-
- -

其他事情要考虑：

- - - -

注意和提示

- - - -

示例

- -

完成的设计应如下图所示：

- -

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

- -

评估

- -

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

- -

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

- -

在本单元中

- - diff --git a/files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html b/files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html deleted file mode 100644 index 6ddd1d114b..0000000000 --- a/files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 一个漂亮的盒子 -slug: Learn/CSS/Styling_boxes/A_cool_looking_box -translation_of: Learn/CSS/Building_blocks/A_cool_looking_box ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
- -

在这个评估里，通过尝试创造一个引人瞩目的盒子，你将得到更多关于如何创造酷炫盒子的练习。

- - - - - - - - - - - - -
前提条件：在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。
目的：测试对CSS盒模型和其他盒相关特性的掌握程度，比如背景和边框。
- -

起点

- -

在开始评估之前，你需要：

- - - -
-

提醒：或者你也可以用JSBin或Thimble这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<style>元素里就好。

-
- -

项目简介

- -

你的任务是创建一个酷炫的盒子，并探索CSS的乐趣。

- -

一般任务

- - - -

样式化盒子

- -

给{{htmlelement("p")}}添加样式：

- - - -

范例

- -

完成之后的盒子可能会像下面的截图这样：

- -

- -

评估

- -

如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在Learning Area Discourse thread或Mozilla IRC的#mdn IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！

- -

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

- -

在这个模块里

- - - -

​​​ 

diff --git a/files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html b/files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html deleted file mode 100644 index 692071dfde..0000000000 --- a/files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: 创建精美的信纸 -slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper -translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}
- -

如果你想给人留下好印象，把信写在一张精美的信纸上会是个不错的开始，在这个评估里我们希望你能创建一个在线模版来达到这样的效果。

- - - - - - - - - - - - -
前提条件：在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。
目的：测试对CSS盒模型和其他盒相关特性的掌握程度，比如实现背景等。
- -

起点

- -

在开始评估之前，你需要：

- - - -
-

提醒：或者你也可以用JSBin或Thimble这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<style>元素里就好。

-
- -

项目简介

- -

你已经有了创建一个信纸模版所需的所有文件，只需把它们放到一起就好。为了达到目标，你需要：

- -

信纸主体

- - - -

标志

- - - -

提示和技巧

- - - -

范例

- -

完成之后的信纸可能会像下面的截图这样：

- -

- -

 

- -

评估

- -

如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在 discussion thread for this exercise 或Mozilla IRC的#mdn IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！

- -

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

- -

 

- -

在这个模块里

- - - -

 

diff --git a/files/zh-cn/learn/css/styling_text/fundamentals/index.html b/files/zh-cn/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..45660a9532 --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,727 @@ +--- +title: 基本文本和字体样式 +slug: Learn/CSS/为文本添加样式/Fundamentals +tags: + - 初学者 + - 对齐 + - 文本 + - 样式 + - 间距 +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
+ +

在这篇文章中，我们将带你开始掌握 {{glossary("CSS")}} 的文字样式的旅程。这里我们将详细介绍文本/字体样式的所有基本原理，包括设置文字的粗细，字体和样式，文字的属性简写，文字的对齐，和其他效果，以及行和字母间距。

+ + + + + + + + + + + + +
先决条件：基本的电脑操作，HTML 基础 (学习 Introduction to HTML)，CSS 基础 (学习 Introduction to CSS).
目的:了解在网页上设计文本所需的基本属性和技术。
+ +

CSS中的文字样式涉及什么？

+ +

正如你已经在你使用 HTML 和 CSS 完成工作时所经历的一样，元素中的文本是布置在元素的内容框中。以内容区域的左上角作为起点 (或者是右上角，是在 RTL 语言的情况下)，一直延续到行的结束部分。一旦达到行的尽头，它就会进到下一行，然后继续，再接着下一行，直到所有内容都放入了盒子中。文本内容表现地像一些内联元素，被布置到相邻的行上，除非到达了行的尽头，否则不会换行，或者你想强制地，手动地造成换行的话，你可以使用 {{htmlelement("br")}} 元素。

+ +
+

注意: 如果上面的段落让你感到困惑，没关系，在继续之前，可以重新看看我们的 Box model 文件，复习框模型的理论。

+
+ +

用于样式文本的 CSS 属性通常可以分为两类，我们将在本文中分别观察。

+ + + +
+

注意: 请记住，包含在元素中的文本是作为一个单一的实体。你不能将文字其中一部分选中或添加样式，如果你要这么做，那么你必须要用适合的元素来包装它们，比如 ( {{htmlelement("span")}} 或者 {{htmlelement("strong")}}), 或者使用伪元素，像::first-letter (选中元素文本的第一个字母), ::first-line (选中元素文本的第一行), 或者 ::selection (当前光标双击选中的文本)

+
+ +

字体

+ +

我们直接来看看样式字体的属性。在这个例子中，我们会在一个相同的 HTML 示例中应用一些不同的 CSS 属性，就像这样：

+ +
<h1>Tommy the cat</h1>
+
+<p>I remember as if it were a meal ago...</p>
+
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.</p>
+ +

你可以在这找到完成版本 finished example on Github (也可以看源码 the source code.)

+ +

颜色

+ +

{{cssxref("color")}} 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 {{cssxref("text-decoration")}} 属性放置在文本下方或上方的线 (underline overline)。

+ +

color 也可以接受任何合法的 CSS 颜色单位, 比如:

+ +
p {
+  color: red;
+}
+ +

这将导致段落变为红色，而不是标准的浏览器默认的黑色，如下所示：

+ + + +

{{ EmbedLiveSample('颜色', '100%', 220) }}

+ +

字体种类

+ +

要在你的文本上设置一个不同的字体，你可以使用 {{cssxref("font-family")}}  属性，这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 {{anch("Default fonts", "default font")}}. 下面是一个简单的例子:

+ +
p {
+  font-family: arial;
+}
+ +

这段语句使所有在页面上的段落都采用 arial 字体，这个字体可在任何电脑上找到。

+ +

网页安全字体

+ +

说到字体可用性，只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。这些都是所谓的 网页安全字体。

+ +

大多数时候，作为网页开发者，我们希望对用于显示我们的文本内容的字体有更具体的控制。问题在于，需要一个方法来知道当前正在浏览我们的网站网页的电脑，它有哪些可用字体。我们并不是总能在每种情况下都知道这一点，但是网络安全字体在几乎所有最常用的操作系统（Windows，Mac，最常见的Linux发行版，Android和iOS版本）中都可用。

+ +

实际的Web安全字体列表将随着操作系统的发展而改变，但是可以认为下面的字体是网页安全的，至少对于现在来说 (它们中的许多都非常流行，这要感谢微软在90年代末和21世纪初期的倡议Core fonts for the Web )：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
字体名称泛型注意
Arialsans-serif通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品，尽管它们的字体面几乎相同，但 Helvetica 被认为具有更好的形状，即使Arial更广泛地可用。
Courier Newmonospace某些操作系统有一个 Courier New 字体的替代（可能较旧的）版本叫Courier。使用Courier New作为Courier的首选替代方案，被认为是最佳做法。
Georgiaserif
Times New Romanserif某些操作系统有一个 Times New Roman 字体的替代（可能较旧的）版本叫 Times。使用Times作为Times New Roman的首选替代方案，被认为是最佳做法。
Trebuchet MSsans-serif您应该小心使用这种字体——它在移动操作系统上并不广泛。
Verdanasans-serif
+ +
+

注意: 在各种资源中，cssfontstack.com 网站维护了一个可用在 Windows 和 Mac 操作系统上使用的网页安全字体的列表，这可以帮助决策网站的安全性。

+
+ +
+

注意: 有一个可以下载来自一个网页的自定义字体的方法，允许你通过任何你想要的方法来定制你使用的字体：网页字体。这个有一点复杂，我们将在这个模块中的另一篇文章中讨论这一点。

+
+ +

默认字体

+ +

CSS 定义了 5 个常用的字体名称:  serif, sans-serif, monospace, cursive,和 fantasy. 这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器，而且它们所运行的每个操作系统也会有所不同。这是一种糟糕的情况，浏览器会尽力提供一个看上去合适的字体。 serif, sans-serif 和 monospace 是比较好预测的，默认的情况应该比较合理，另一方面，cursive 和 fantasy 是不太好预测的，我们建议使用它们的时候应该稍微注意一些，多多测试。

+ +

五个名称定义如下：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名称定义示例
serif有衬线的字体 （衬线一词是指字体笔画尾端的小装饰，存在于某些印刷体字体中）My big red elephant
sans-serif没有衬线的字体。My big red elephant
monospace每个字符具有相同宽度的字体，通常用于代码列表。My big red elephant
cursive用于模拟笔迹的字体，具有流动的连接笔画。My big red elephant
fantasy用来装饰的字体My big red elephant
+ +

字体栈

+ +

由于你无法保证你想在你的网页上使用的字体的可用性 (甚至一个网络字体可能由于某些原因而出错), 你可以提供一个字体栈 (font stack)，这样的话，浏览器就有多种字体可以选择了。只需包含一个font-family属性，其值由几个用逗号分离的字体名称组成。比如

+ +
p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}
+ +

在这种情况下，浏览器从列表的第一个开始，然后查看在当前机器中，这个字体是否可用。如果可用，就把这个字体应用到选中的元素中。如果不可用，它就移到列表中的下一个字体，然后再检查。

+ +

在字体栈的最后提供一个合适的通用的字体名称是个不错的办法，这样的话，即使列出的字体都无法使用，浏览器至少可以提供一个还算合适的选择。为了强调这一点，如果没有其他选项可用，那么段落将被赋予浏览器的默认衬线字体 - 通常是Time New Roman - 这对于 sans-serif 字体是不利的！

+ +
+

注意: 有一些字体名称不止一个单词，比如Trebuchet MS ，那么就需要用引号包裹。

+
+ +

一个使用 font-family 的例子

+ +

让我们把它添加到之前的例子上，给段落一个 sans-serif 的字体。

+ +
p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

这给我们以下结果：

+ + + +

{{ EmbedLiveSample('一个使用_font-family_的例子', '100%', 220) }}

+ +

字体大小

+ +

在我们之前的模块中的CSS values and units 文章，我们回顾了length and size units. 字体大小 (通过 {{cssxref("font-size")}} 属性设置) 可以取大多数这些单位的值 (以及其他，比如百分比 percentages)，然而你在调整字体大小时，最常用的单位是：

+ + + +

元素的 font-size 属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素——{{htmlelement("html")}}开始，浏览器的 font-size 标准设置的值为 16px。在根元素中的任何段落 (或者那些浏览器没有设置默认大小的元素)，会有一个最终的大小值：16px。其他元素也许有默认的大小，比如 {{htmlelement("h1")}} 元素有一个 2em 的默认值，所以它的最终大小值为 32px。当你开始更改嵌套元素的字体大小时，事情会变得棘手。比如，如果你有一个 {{htmlelement("article")}} 元素在你的页面上，然后设置它的 font-size 为 1.5em (通过计算，可以得到大小为 24px)，然后想让 <article> 元素中的段落获得一个计算值为 20px 的大小，那么你应该使用多少 em。

+ +
<!-- document base font-size is 16px -->
+<article> <!-- If my font-size is 1.5em -->
+  <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
+</article>
+ +

你需要将 em 的值设置为 20/24, 或者 0.83333333em. 这个计算可能比较复杂，所以当你设置的时候，你需要仔细一些。如果可以使用 rem 的话，那实现起来就变得简单不少，避免在可能的情况下设置容器元素的字体大小。

+ +

一个简单的 size 示例

+ +

当调整你的文本大小时，将文档(document)的基础  font-size 设置为10px往往是个不错的主意，这样之后的计算会变得简单，所需要的 (r)em 值就是想得到的像素的值除以 10，而不是 16。做完这个之后，你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有font-size的规则集是一个好主意，这样它们就可以很容易被找到。

+ +

我们的新结果是这样的:

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('字体大小', '100%', 220) }}

+ +

字体样式，字体粗细，文本转换和文本装饰

+ +

CSS 提供了 4 种常用的属性来改变文本的样子：

+ + + +

我们来看一下这几个属性添加到我们的例子中：

+ +

我们的新结果是这样的：

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('字体样式，字体粗细，文本转换和文本装饰', '100%', 220) }}

+ +

文字阴影

+ +

你可以为你的文本应用阴影，使用 {{cssxref("text-shadow")}} 属性。这最多需要 4 个值，如下例所示：

+ +
text-shadow: 4px 4px 5px red;
+ +

4 个属性如下:

+ +
    +
  1. 阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位 length and size units, 但是 px 是比较合适的。这个值必须指定。
    2. +
  2. 阴影与原始文本的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移动阴影，而不是左/右。这个值必须指定。
    3. +
  3. 模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为0，这意味着没有模糊。可以使用大多数的 CSS 单位 length and size units.
    4. +
  4. 阴影的基础颜色，可以使用大多数的 CSS 颜色单位 CSS color unit. 如果没有指定，默认为 black.
    5. +
+ +
+

注意: 正偏移值可以向右移动阴影，但也可以使用负偏移值来左右移动阴影，例如 -1px -1px.

+
+ +

多种阴影

+ +

您可以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本，例如：

+ +
text-shadow: -1px -1px 1px #aaa,
+             0px 4px 1px rgba(0,0,0,0.5),
+             4px 4px 5px rgba(0,0,0,0.7),
+             0px 0px 7px rgba(0,0,0,0.4);
+ +

如果我们把这个样式应用到我们 "Tommy the cat" 示例中的 {{htmlelement("h1")}} 元素，就像这样：

+ + + +

{{ EmbedLiveSample('多种阴影', '100%', 220) }}

+ +
+

注意: 你可以看到更多有趣的关于 text-shadow 使用的示例在 Moonlighting with CSS text-shadow.

+
+ +

文本布局

+ +

有了基本的字体属性，我们来看看我们可以用来影响文本布局的属性。

+ +

文本对齐

+ +

 {{cssxref("text-align")}} 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下，并且在与常规文字处理器应用程序中的工作方式几乎相同：

+ + + +

如果我们应用 text-align: center; 到我们例子中的 {{htmlelement("h1")}} 元素中，结果如下：

+ + + +

{{ EmbedLiveSample('文本对齐', '100%', 220) }}

+ +

行高

+ +

 {{cssxref("line-height")}} 属性设置文本每行之间的高，可以接受大多数单位 length and size units，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 {{cssxref("font-size")}} 来获得 line-height。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍，你可以使用这个:

+ +
line-height: 1.5;
+ +

把这个样式应用到我们示例中的 {{htmlelement("p")}} 元素，结果如下：

+ + + +

{{ EmbedLiveSample('行高', '100%', 250) }}

+ +

字母和单词间距

+ +

{{cssxref("letter-spacing")}} 和 {{cssxref("word-spacing")}} 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位 length and size units.

+ +

所以作为例子，如果我们把这个样式应用到我们的示例中的 {{htmlelement("p")}} 段落的第一行：

+ +
p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}
+ +

我们会得到下面的结果：

+ + + +

{{ EmbedLiveSample('字母和字间距', '100%', 250) }}

+ +

其他一些值得看一下的属性

+ +

以上属性让你了解如何开始在网页上设置文本， 但是你可以使用更多的属性。我们只是想介绍最重要的。一旦你习惯使用上面的内容，你还应该探索以下几点：

+ +

Font 样式:

+ + + +

文本布局样式：

+ + + +

Font 简写

+ +

许多字体的属性也可以通过 {{cssxref("font")}} 的简写方式来设置 . 这些是按照以下顺序来写的：  {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.

+ +

如果你想要使用 font 的简写形式，在所有这些属性中，只有 font-size 和 font-family 是一定要指定的。

+ +

{{cssxref("font-size")}} 和 {{cssxref("line-height")}} 属性之间必须放一个正斜杠。

+ +

一个完整的例子如下所示：

+ +
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+ +

动手练习: 使用样式文本

+ +

在这个动手练习中，我们没有任何具体的练习来做：我们只是希望你和一些字体/文本布局属性相处地愉快，看看你可以制作什么！你可以使用离线HTML / CSS文件进行此操作，也可以将代码输入到下面的实时可编辑示例中。

+ +

如果你犯了错误，你可以使用 Reset 按钮来复原。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

小结

+ +

我们希望你在本篇文章中享受与文本在一起的时光！下篇文章会介绍所有你需要知道的关于 HTML 列表的样式。

+ +

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

diff --git a/files/zh-cn/learn/css/styling_text/index.html b/files/zh-cn/learn/css/styling_text/index.html new file mode 100644 index 0000000000..ec4822b9ad --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/index.html @@ -0,0 +1,54 @@ +--- +title: 为文本添加样式（样式化文本） +slug: Learn/CSS/为文本添加样式 +tags: + - CSS + - 代码脚步 + - 列表lists + - 初学者 + - 字体Fonts + - 字母letter + - 文字font + - 文本Text + - 模块化Module + - 网络字体 web fonts + - 行line + - 链接Links + - 阴影shadow +translation_of: Learn/CSS/Styling_text +--- +
{{LearnSidebar}}
+ +

掌握了 CSS 语言的基础之后，对于您来说，下一个需要关心的 CSS 主题就是为文本添加样式——一个您将会最经常使用 CSS 做的事情。在这里，我们专注于为文本样式的基础，包括设置字体、粗细、斜体、行还有字符间距、阴影以及文本的其他特征。我们将会通过在您的网页中应用自定义字体、样式化列表以及链接来圆满地结束本模块。

+ +

前提

+ +

在开始这一模块之前，您应当像 HTML 介绍 模块中所探讨的，已经熟悉了基本的HTML，以及像 CSS 介绍 中所详述的，对自己的 CSS 基础感觉还满意。

+ +
+

注意: 如果您所使用的是不能创建自己的文件的电脑、平板电脑或其他设备的话，您可以在一个在线编码程序 JSBin 或 Thimble 中尝试（大部分的）代码例子。

+
+ +

导引

+ +

这个模块包括了以下文章，这些文章将教会您所有的基本功以支持您为 HTML 文本内容添加样式。

+ +
+
基本的文本以及字体样式
+
在本文章中，我们将通篇了解文本、字体样式的所有基础，包括设置字体粗细（ font weight ）、字体系列及样式（ family and style ）、字体缩写（ font shorthand ）、文本排列（ text alignment ）和其他的效果，还有行（ line ）以及字符间距（ letter spacing ）。
+
样式化列表
+
对于大部分内容来说，列表的行为表现跟其他任何文本其实差不多，但您也需要了解还有一些专门用于列表的 CSS 样式以及考虑一些最好的实践方式。本文章将阐释这一切。
+
样式化链接
+
当您为链接添加样式时，很重要的一点是要去理解怎样有效地使用伪类去修饰链接的状态，以及怎么去修饰不同的接口功能例如导航菜单和面板中所使用的链接。我们将会在这篇文章中讨论这些话题。
+
网络字体
+
在这里我们将会详细地探索网络字体——这会允许您与您的网页一同下载自定义字体，来实现更为不同的个性化字体样式。
+
+ +

评估

+ +

以下的评估将会评测您对以上导引所涵盖的为文本添加样式的技术的理解。

+ +
+
对一个社区学校的主页进行排版
+
在这个评估中，我们通过让您为一个社区学校的主页添加文本样式来测试您对文本样式的理解程度。
+
diff --git a/files/zh-cn/learn/css/styling_text/styling_links/index.html b/files/zh-cn/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..df2e7c6093 --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,431 @@ +--- +title: 样式化链接 +slug: Learn/CSS/为文本添加样式/Styling_links +tags: + - 伪类 + - 悬浮 + - 标签 + - 聚焦 + - 菜单 + - 超链接 + - 链接 +translation_of: Learn/CSS/Styling_text/Styling_links +--- +
+

{{LearnSidebar}}

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+
+ +

当为 links 添加样式时, 理解利用伪类有效地建立链接状态是很重要的，以及如何为链接添加样式来实现常用的功能，比如说导航栏、选项卡。我们将在本文中关注所有这些主题。

+ + + + + + + + + + + + +
学习本章节的前提:基本的计算机使用能力，HTML 基础 (学习 Introduction to HTML), CSS 基础 (学习 Introduction to CSS), CSS text and font fundamentals.
目的:学习如何将样式应用到链接状态，以及如何使用链接实现常见的 UI 功能，比如导航菜单。
+ +

让我们来看一些链接

+ +

根据最佳实践  创建超链接 中的练习，我们看到了如何在你的 HTML 中实现链接。在本篇文章中，我们会以这个知识为基础，向你展示将样式应用到链接的最佳实践。

+ +

链接状态

+ +

第一件需要理解的事情是链接状态的概念，链接存在时处于不同的状态，每一个状态都可以用对应的 伪类 来应用样式:

+ + + +

默认的样式

+ +

下面的例子说明了一个链接的默认行为表现 (这里的 CSS 仅仅是为了放大和居中文本，使内容更加突出)

+ +
<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>
+
+ +
p {
+  font-size: 2rem;
+  text-align: center;
+}
+ +

{{ EmbedLiveSample('默认的样式', '100%', 120) }}

+ +

当你观察默认样式的时候，你也许会注意到一些东西:

+ + + +

有趣的是，这些默认的样式与20世纪90年代中期浏览器早期的风格几乎相同。这是因为用户知道以及期待链接就是这样变化的，如果链接的样式不同，就会让一些人感到奇怪。不过这不意味着你不应该为链接添加任何样式，只是你的样式不应该与用户预期的相差太大，你应该至少：

+ + + +
+

注意: 你不仅仅只限于上述属性来把样式应用到你的链接上，你可以用任何你喜欢的属性，就是不要搞得太疯狂！

+
+ +

将样式应用到一些链接

+ +

现在我们已经详细地看了默认的状态，让我们看一下典型的链接样式的设置。

+ +

开始之前，我们先写出我们的空规则集：

+ +
a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}
+ +

这几个规则的顺序是有意义的，因为链接的样式是建立在另一个样式之上的，比如，第一个规则的样式也会在后面的规则中生效，一个链接被激活 (activated) 的时候，它也是处于悬停 (hover) 状态的。如果你搞错了顺序，那么就可能不会产生正确的效果。要记住这个顺序，你可以尝试这样帮助记忆：LoVe Fears HAte.

+ +

现在让我们再添加一些信息，得到正确的样式：

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}
+ +

这里还提供了一些示例HTML，供你应用CSS：

+ +
<p>There are several browsers available, such as <a href="https://www.mozilla.org/zh-CN/firefox/">Mozilla
+Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
+<a href="https://www.microsoft.com/zh-CN/windows/microsoft-edge">Microsoft Edge</a>.</p>
+ +

把这两个放在一起，我们得到这样的结果：

+ +

{{ EmbedLiveSample('将样式应用到一些链接', '100%', 150) }}

+ +

那么我们在这里做了什么? 这个看起来肯定和默认的样式不同，但仍然提供了一个熟悉的体验，好让用户知道发生了什么：

+ + + +

动手练习: 为你的链接添加样式

+ +

在这个动手练习部分，我们希望你使用我们的空规则集，然后添加你自定义的规则，从而使链接看上去比较酷。发挥你的想象力，大胆地做吧。我们相信你可以想出一些更酷的东西，就像我们上面的例子一样。

+ +

如果你犯了错误，你都可以使用 Reset 按钮来重置。 如果你遇到了困难，可以按 Show solution 按钮来显示我们上文中的例子。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

在链接中包含图标

+ +

常见的做法是在链接中包含图标，使链接提供更多关于链接指向的内容的信息。让我们来看一个简单的例子，例子中为一个外部链接 (链接指向的不是本站，而是外部站点)。这样的图标通常看起来像一个指向盒子的小箭头，比如, 我们会使用icons8.com上的这个优秀的范例。

+ +

让我们来看一些能给我们这个效果的 HTML 和 CSS。先是一些简单的等待你样式化的 HTML ：

+ +
<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
+look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
+out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>
+ +

接着是 CSS:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}
+ +

{{ EmbedLiveSample('在链接中包含图标', '100%', 150) }}

+ +

那么这里发生了什么? 我们将跳过大部分的 CSS，因为那些只是你之前看过的相同的信息。最后一条规则很有趣，这里，我们在外部链接上插入了一个自定义背景图片，这和上篇自定义列表项目符号文章的做法很像。这次，我们使用了 {{cssxref("background")}} 简写，而不是分别使用多个属性。我们设置了我们想要插入的图片的路径，指定了 no-repeat ，这样我们只插入了一次图片，然后指定位置为100%，使其出现在内容的右边，距离上方是0px。

+ +

我们也使用 {{cssxref("background-size")}} 来指定要显示的背景图像的大小，为了满足响应式网站设计的需要，在图标更大，需要再重新调整它的大小的时候，这样做是很有帮助的。但是，这仅适用于IE 9及更高版本。所以你如果需要支持那些老的浏览器，只能调整图像的原始大小，然后插入。

+ +

最后，我们在链接上设置 {{cssxref("padding-right")}} ，为背景图片留出空间，这样就不会让它和文本重叠了。

+ +

最后的问题，我们是如何只选中了外部链接的？如果你正确编写你的HTML链接 ，你应该只会在外部链接上使用绝对 URL，如果链接是链接你的站点的其他部分，那么使用相对链接是更加高效的。因此“http”文本应该只出现在外部链接上，为此我们可以使用一个属性选择器——a[href*="http"] ——选中 {{htmlelement("a")}} 元素，但是这样只会选中那些拥有 {{htmlattrxref("href","a")}} 属性，且属性的值包含 "http" 的 {{htmlelement("a")}}的元素。

+ +

就这样啦，尝试重新审视上面的动手练习部分，尝试这种新技术！

+ +
+

注意: 不要担心，如果你目前不熟悉 backgrounds 和 responsive web design ; 这些会在其他地方解释。

+
+ +

样式化链接为按钮

+ +

目前在本文中探索的用法也可以用在其他方面。比如，悬停 (hover) 的状态可以为不同的元素应用样式，不只是链接，你也许会想添加悬停状态的样式到段落、列表项、或者是其他东西。

+ +

此外，在某些情况下，链接通常会应用样式，使它看上去的效果和按钮差不多，一个网站导航菜单通常是标记为一个列表，列表中包含链接，这可以很容易地被设计为看起来像一组控制按钮或是选项卡，主要是用于让用户可以访问站点的其他部分，现在让我们来看一看。

+ +

首先，一些 HTML:

+ +
<ul>
+  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
+</ul>
+ +

接着，是我们的 CSS:

+ +
body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}
+ +

这给我们以下结果：

+ +

{{ EmbedLiveSample('样式化链接为按钮', '100%', 100) }}

+ +

让我们来解释一下这里发生了什么，主要是几个有趣的部分:

+ + + +
+

注意: 你也许会注意到 HTML 中的列表的每项内容都在同一行上，这是因为 inline-block 元素在页面上创建的空格换行符，就像几个字之间的空格，这样的空隙也许会破坏我们的水平导航菜单布局。所以我们删除了空格。你可以在  Fighting the space between inline block elements 找到有关此问题的更多信息（和解决方案）。

+
+ +

测试你的技巧！

+ +

你已经到了本文结尾，并且在我们的交互学习部分已经做了一些技巧测试。但是你在继续之前记住了最重要的信息了吗？你可以在模块末尾找到一个用于验证你已掌握知识的评估——见给一个社区大学的主页排版。

+ +

这个评估测试了这个模块讨论到的所有知识，这样你可能在读下一篇文章之前想看一下它。

+ +

小结

+ +

我们希望本文为你提供有关链接的所有知识——目前！我们的样式文本模块中的最后一篇文章详细介绍了如何在你的网站上使用自定义字体，或者更熟悉网络字体。

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

diff --git a/files/zh-cn/learn/css/styling_text/styling_lists/index.html b/files/zh-cn/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..075b457836 --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,374 @@ +--- +title: 样式列表 +slug: Learn/CSS/为文本添加样式/Styling_lists +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
+ +

List列表 大体上和其他文本一样，但是仍有一些你需要知道的特殊CSS属性，和一些可供参考的最佳实践，这篇文章将阐述这一切。

+ + + + + + + + + + + + +
前置知识:Basic computer literacy, HTML basics (study Introduction to HTML), CSS basics (study Introduction to CSS), 基本文本和字体样式.
目标:熟悉与列表相关的样式和最佳实践
+ +

一个简单的例子

+ +

首先，让我们看一个简单的例子。文章中我们将看到无序，有序和描述列表——它们都具有相似的样式特性，而某些特性却又各不相同。Github上有未加载样式的例子（也可以查看源码。）

+ +

例子中列表的HTML代码如下：

+ +
<h2>Shopping (unordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ul>
+  <li>Humous</li>
+  <li>Pitta</li>
+  <li>Green salad</li>
+  <li>Halloumi</li>
+</ul>
+
+<h2>Recipe (ordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ol>
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+
+<h2>Ingredient description list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<dl>
+  <dt>Humous</dt>
+  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
+  <dt>Pitta</dt>
+  <dd>A soft, slightly leavened flatbread.</dd>
+  <dt>Halloumi</dt>
+  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
+  <dt>Green salad</dt>
+  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
+</dl>
+ +

现在，如果你去到例子的展示页面，并使用浏览器开发者工具查看那些列表元素，你会注意到若干个默认的样式预设值：

+ + + +

处理列表间距

+ +

当您创建样式列表时，您需要调整样式，使其保持与周围元素相同的垂直间距（例如段落和图片，有时称为垂直节奏））和相互间的水平间距（您可以在 Github 上参考完成的样式示例 ，也可以找到源代码。）

+ +

用于文本样式和间距的CSS如下所示：

+ +
/* General styles */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Description list styles */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1.5rem;
+}
+
+ + + +

列表特定样式

+ +

现在我们来看一下列表的一般间距，我们来研究一些列表具有的特定属性。 我们从三个属性开始了解，这三个属性可以在 {{htmlelement("ul")}} 或  {{htmlelement("ol")}} 元素上设置：

+ + + +

符号样式

+ +

像上面所提及的， {{cssxref("list-style-type")}}  属性允许你设置项目符号点的类型，在我们的例子中，我们在有序列表上设置了大写罗马数字：

+ +
ol {
+  list-style-type: upper-roman;
+}
+ +

效果显示如下：

+ +

an ordered list with the bullet points set to appear outside the list item text.

+ +

您可以通过  {{cssxref("list-style-type")}}  参考页面查找到更多选项。

+ +

项目符号位置

+ +

{{cssxref("list-style-position")}} 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。 如上所示，默认值为 outside，这使项目符号位于列表项之外。

+ +

如果值设置为 inside，项目条目则位于行内。

+ +
ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}
+ +

an ordered list with the bullet points set to appear inside the list item text.

+ +

使用自定义的项目符号图片

+ +

{{cssxref("list-style-image")}} 属性允许对于项目符号使用自定义图片。其语法相当简单：

+ +
ul {
+  list-style-image: url(star.svg);
+}
+ +

然而，这个属性在控制项目符号的位置，大小等方面是有限的。 您最好使用{{cssxref("background")}} 系列属性，您将在 Styling boxes 模块中了解更多信息。在这里我们仅做一点尝试！

+ +

结束我们的例子，我们样式化无序列表像这样（放到您之前所见的顶部）：

+ +
ul {
+  padding-left: 2rem;
+  list-style-type: none;
+}
+
+ul li {
+  padding-left: 2rem;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}
+ +

我们的所做如下：

+ + + +

效果显示如下：

+ +

an unordered list with the bullet points set as little star images

+ +

list-style 速记

+ +

上述提到的三种属性可以用一个单独的速记属性 {{cssxref("list-style")}} 来设置。例如：

+ +
ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}
+ +

可以被如下方式代替：

+ +
ul {
+  list-style: square url(example.png) inside;
+}
+ +

属性值可以任意顺序排列，你可以设置一个，两个或者三个值（该属性的默认值为 disc, none, outside），如果指定了 type 和 image，如果由于某种原因导致图像无法加载，则 type 将用作回退。

+ +

管理列表计数

+ +

有时，您可能想在有序列表上进行不同的计数方式。例如： 从1以外的数字开始，或向后倒数，或者按步或多于1计数。HTML和CSS有一些工具可以帮助您

+ +

start

+ +

{{htmlattrxref("start","ol")}} 属性允许你从1 以外的数字开始计数。示例如下：

+ +
<ol start="4">
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

输出的结果如下：

+ +

{{ EmbedLiveSample('start', '100%', 150) }}

+ +

reversed

+ +

{{htmlattrxref("reversed","ol")}} 属性将启动列表倒计数。示例如下：

+ +
<ol start="4" reversed>
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

输出的结果如下：

+ +

{{ EmbedLiveSample('reversed', '100%', 150) }}

+ +

value

+ +

{{htmlattrxref("value","ol")}} 属性允许设置列表项指定数值，示例如下:

+ +
<ol>
+  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
+  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li value="6">Wash and chop the salad.</li>
+  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

输出的结果如下：

+ +

{{ EmbedLiveSample('value', '100%', 150) }}

+ +
+

注意: 纵然你使用非数字的 {{cssxref("list-style-type")}}, 你仍需要使用与数值同等意义的值作为 value 的属性。

+
+ +

主动学习: 为嵌套式列表添加样式

+ +

在该学习环节，我们希望你使用如上所学尝试为一个嵌套式列表添加样式。我们已经提供了 HTML , 在此之上请完成如下：

+ +
    +
  1. 为该无序列表提供方形项目符号。
    2. +
  2. 为该无序列表项和有序列表项提供基于其字体大小 1.5 的行高。
    3. +
  3. 为有序列表提供小写字母的项目符号。
    4. +
  4. 对列表进行自由发挥，尝试不同的项目符号类型，间距，以及其他的各种属性。
    5. +
+ +

如果犯了错误，可以随时点击 Reset（重置） 按钮进行重新设置。如果你真的遇到困难无法继续下去，点击 Show solution（显示解决方案）按钮查看可行的解决方案。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

另请参阅

+ +

CSS计数器提供用于自定义列表计数和样式的高级工具，但它们相当复杂。 如果你想更深入了解，请查看如下资源：

+ + + +

总结

+ +

一旦你掌握一些相关的基础原则和特定属性，列表的样式还是相对容易理解的。在下篇文章中我们将转到另一话题——为链接提供样式的各种技巧。

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

diff --git a/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html b/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html new file mode 100644 index 0000000000..98f86f125f --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html @@ -0,0 +1,119 @@ +--- +title: 作业：排版社区大学首页 +slug: Learn/CSS/为文本添加样式/Typesetting_a_homepage +tags: + - CSS + - 初学者 + - 字体 + - 样式化文本 + - 网络字体 + - 链接 +translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

在本测评中，通过对社区学校主页的文本样式化，我们会测试你对所有本模块涉及到的文本样式化技术的理解。你或许也会从中获得乐趣。

+ + + + + + + + + + + + +
预备条件:在本次测评前，你应该完成了本模块所有章节。
目标:测试对CSS文本样式化技术的理解。
+ +

开始

+ +

在本测评开始前，你应该:

+ + + +
+

注意: 或者，你可以使用像 JSBin 或 Thimble 的网站完成你的测评。你可以把HTML和CSS粘贴到在线编辑器中，并使用this URL指定背景图像。如果你使用的在线编辑器没有单独的CSS面板，你可以将其放在HTML文件的<style>元素中。

+
+ +

项目简介

+ +

你有一个虚构的社区大学主页的未处理HTML文件和一些CSS文件。这些CSS文件把网页分成两栏布局，提供了一些简单的样式化。你将在CSS文件底部的comment下写你的CSS，这样可以方便地标出你的工作。不要担心选择器一直重复；我们会帮你跳过这个问题。

+ +

字体：

+ + + +

文本样式化基础：

+ + + +

链接：

+ + + +

列表：

+ + + +

导航栏菜单:

+ + + +

提示与技巧

+ + + +

实例

+ +

下图展示了其中一种设计完成后的例子。

+ +

+ +

测评

+ +

如果你将本测评作为课程的一部分，你应该能够将你的作品交给你的老师/指导员打分。如果你是自学的，你可以很轻松地在discussion thread for this exercise，或者Mozilla IRC的#mdn IRC 频道上获得打分。先尝试完成本次练习——作弊是学不到任何东西的！

+ +

{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+ +

在本单元中

+ + diff --git a/files/zh-cn/learn/css/styling_text/web_fonts/index.html b/files/zh-cn/learn/css/styling_text/web_fonts/index.html new file mode 100644 index 0000000000..ad9691cb00 --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/web_fonts/index.html @@ -0,0 +1,186 @@ +--- +title: Web 字体 +slug: Learn/CSS/为文本添加样式/Web_字体 +translation_of: Learn/CSS/Styling_text/Web_fonts +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
+ +

在模块的第一篇文章中，我们探讨了用于样式化字体和文本的基本CSS特性。在这篇文章中，我们将更进一步，详细地探索web字体——它们允许您下载自定义字体和您的web页面，以允许更多不同的、自定义的文本样式。

+ + + + + + + + + + + + +
预备知识:基本计算机素养，HTML 基础 (学习 Introduction to HTML), CSS 基础 (学习Introduction to CSS), CSS文本和字体基础 。
目标:学习如何将web字体应用到web页面，使用第三方服务，或者编写自己的代码。
+ +

字体种类回顾

+ +

正如我们在基本文本和字体样式中所看到的那样，应用到您的HTML的字体可以使用 {{cssxref("font-family")}}属性来控制。您需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。

+ +
p {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}
+ +

这个系统运行良好，但是对于传统的web开发人员来说，字体选择是有限的。只有少数几种字体可以保证兼容所有流行的操作系统——这就是所谓的 Web-safe 字体。您可以使用字体堆栈来指定可选择的字体，后面是Web-safe的替代选项，然后是默认的系统字体，但是为了确保您的设计在每种字体中都显示正常，这样增加了测试的开销。

+ +

Web 字体

+ +

但是还有一种选择，它非常有效，回到IE版本6。Web字体是一种CSS特性，允许您指定在访问时随您的网站一起下载的字体文件，这意味着任何支持Web字体的浏览器都可以使用您指定的字体。太酷啦！所需的语法如下所示：

+ +

首先，在CSS的开始处有一个{{cssxref("@font-face")}}块，它指定要下载的字体文件：

+ +
@font-face {
+  font-family: "myFont";
+  src: url("myFont.ttf");
+}
+
+ +

在这个下面，你可以使用@font-face中指定的字体种类名称来将你的定制字体应用到你喜欢的任何东西上，比如说：

+ +
html {
+  font-family: "myFont", "Bitstream Vera Serif", serif;
+}
+ +

语法确实比这更复杂，下面我们将详细介绍。

+ +

关于网页字体有两件重要的事情要记住：

+ +
    +
  1. 浏览器支持不同的字体格式，因此您需要多种字体格式以获得良好的跨浏览器支持。例如,大多数现代浏览器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web开放字体格式版本1和2)，它是最有效的格式，但是旧版本IE只支持EOT (Embedded Open Type，嵌入式开放类型)的字体,你可能需要包括一个SVG版本的字体支持旧版本的iPhone和Android浏览器。我们将向您展示如何生成所需的代码。
    2. +
  2. 字体一般都不能自由使用。您必须为他们付费，或者遵循其他许可条件，比如在代码中(或者在您的站点上)提供字体创建者。你不应该在没有适当的授权的情况下偷窃字体。
    3. +
+ +
+

注意： Web字体作为一种技术从 Internet Explorer 4 开始就得到了的支持！

+
+ +

自主学习:web字体示例

+ +

记住这一点，让我们从最初的原则构建一个基本的web字体示例。使用嵌入的live示例很难演示这一点，因此，我们希望您按照下面几节中详细介绍的步骤来了解这个过程。

+ +

你应该使用 web-font-start.html 和 web-font-start.css 文件作为开始添加到你的代码中（又见预览版。）现在，在你的电脑上的一个新目录中复制这些文件。在 web-font-start.css文件中，您将找到一些最小的CSS来处理这个示例的基本布局和排版。

+ +

查找字体

+ +

对于本例，我们将使用两种web字体，一种用于标题，另一种用于正文文本。首先，我们需要找到包含字体的字体文件。字体是由字体铸造厂创建的，并且存储在不同的文件格式中。
+ 通常有三种类型的网站可以获得字体：

+ + + +

让我们找到一些字体！前往Font Squirrel 并选择两种字体——一种用于标题的有趣的字体(可能是一种不错的显示字体或无衬线字体)，和一种用于段落，稍微不那么华丽，更易于阅读的字体。当您找到每种字体时，按下下载按钮，并将该文件保存在与您先前保存的HTML和CSS文件相同的目录中。无论它们是TTF(True Type Fonts))还是OTF(Open Type字体)都不重要。

+ +

在每种情况下，都要解压字体包(Web字体通常分布在包含字体文件和许可信息的ZIP文件中。)您可能会在包中发现多个字体文件，一些字体是作为一个具有不同变体的家庭分布的，例如，瘦、中、粗体、斜体、斜体等等。对于这个例子，我们只是想让您自己考虑一个单一的字体文件。

+ +
+

注意： 在右边栏的“查找字体”部分中，您可以单击不同的标记和分类来筛选显示的选项。

+
+ +

生成所需代码

+ +

现在您需要生成所需的代码(以及字体格式)。对于每种字体，遵循以下步骤：

+ +
    +
  1. 确保您已经满足了任何许可证的要求，如果您打算在一个商业和/或Web项目中使用它。
    2. +
  2. 前往 Fontsquirrel Webfont Generator.
    3. +
  3. 使用上传字体按钮上传你的两个字体文件。
    4. +
  4. 勾选复选框，“是的，我上传的字体符合网络嵌入的合法条件。
    5. +
  5. 点击下载你的套件（kit）。
    6. +
+ +

在生成器完成处理之后，您应该得到一个ZIP文件，将它保存在与HTML和CSS相同的目录中。

+ +

在演示中实现代码

+ +

在这一点上解压您刚刚生成的webfont套件。在解压的目录中，您将看到三个有用的条目：

+ + + +

要在演示中实现这些字体，请遵循以下步骤：

+ +
    +
  1. 将解压缩的目录重命名为简易的目录，比如fonts
    2. +
  2. 打开 stylesheet.css 文件，把包含在你的网页中的 @font-face块复制到你的 web-font-start.css 文件—— 你需要把它们放在最上面，在你的CSS之前，因为字体需要导入才能在你的网站上使用。
    3. +
  3. 每个url()函数指向一个我们想要导入到我们的CSS中的字体文件——我们需要确保文件的路径是正确的，因此，在每个路径的开头添加fonts/ （必要时进行调整）。
    4. +
  4. 现在，您可以在字体栈中使用这些字体，就像任何web安全或默认的系统字体一样。
    + 例如： + 
    font-family: 'zantrokeregular', serif;
    +
    5. +
+ +

你应该得到一个演示页面，上面有一些漂亮的字体。因为不同字体的字体大小不同，你可能需要调整大小、间距等，以区分外观和感觉。

+ +

+ +
+

注意：如果对于要让它正常工作您有任何问题，可以自由地将您的版本与我们完成的文件进行比较——见 web-font-finished.html 和 web-font-finished.css (运行完成的示例)。

+
+ +

使用在线字体服务

+ +

在线字体服务通常会为你存储和服务字体，这样你就不用担心写@font-face代码了，通常只需要在你的网站上插入一两行代码就可以让一切都运行。例子包括Typekit 和Cloud.typography。大多数这些服务都是基于订阅的，除了Google Fonts，这是一个有用的免费服务，特别是对于快速的测试工作和编写演示。

+ +

大多数这些服务都很容易使用，所以我们不会详细地介绍它们。让我们快速浏览一下Google Fonts，这样你就能明白它的意思了。再次的，使用web-font-start.html 和 web-font-start.css a的副本作为你的开始。

+ +
    +
  1. 前往 Google Fonts.
    2. +
  2. 使用左边的过滤器来显示你想要选择的字体类型，并选择一些你喜欢的字体。
    3. +
  3. 要选择字体种类，按下按钮旁边的 ⊕ 按钮。
    4. +
  4. 当您选择好字体种类时，按下页面底部的[Number] 种类选择。
    5. +
  5. 在生成的屏幕中，首先需要复制所显示的HTML代码行，并将其粘贴到HTML文件的头部。将其置于现有的{{htmlelement("link")}}元素之上，使得字体是导入的，然后在你的CSS中使用它。
    6. +
  6. 然后，您需要将CSS声明复制到您的CSS中，以便将自定义字体应用到您的HTML。
    7. +
+ +
+

注意：如果你需要对比我们的，你可以在 google-font.html和google-font.css找到完整版本的。（见预览版）

+
+ +

关于@font-face的更多细节

+ +

让我们来探索由fontsquirrel为您生成的@font-face语法。这是其中一个块的样子：

+ +
@font-face {
+  font-family: 'ciclefina';
+  src: url('fonts/cicle_fina-webfont.eot');
+  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
+         url('fonts/cicle_fina-webfont.woff') format('woff'),
+         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
+         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+ +

这被称为"bulletproof @font-face syntax（刀枪不入的@font-face语法）", 这是 Paul Irish早期的一篇文章提及后@font-face开始流行起来 (Bulletproof @font-face Syntax。让我们来看看它是怎么做的：

+ + + +
+

注意：您还可以为您的web字体指定特定的{{cssxref("font-variant")}} 和 {{cssxref("font-stretch")}} )值。在较新的浏览器中，您还可以指定一个{{cssxref("unicode-range")}}值，这是一个您需要使用什么web字体的特定范围的字符——在支持浏览器中，只有指定的字符才会被下载，省去了不必要的下载。Drew McLellan写的Creating Custom Font Stacks with Unicode-Range在如何利用这个问题上提供了一些有用的建议。

+
+ +

总结

+ +

既然您已经完成了我们关于文本样式基础的文章，现在是时候用我们对模块的评估来测试您的理解了，为社区学校的主页进行排版。

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

diff --git "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/fundamentals/index.html" "b/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/fundamentals/index.html" deleted file mode 100644 index 45660a9532..0000000000 --- "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/fundamentals/index.html" +++ /dev/null @@ -1,727 +0,0 @@ ---- -title: 基本文本和字体样式 -slug: Learn/CSS/为文本添加样式/Fundamentals -tags: - - 初学者 - - 对齐 - - 文本 - - 样式 - - 间距 -translation_of: Learn/CSS/Styling_text/Fundamentals ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
- -

在这篇文章中，我们将带你开始掌握 {{glossary("CSS")}} 的文字样式的旅程。这里我们将详细介绍文本/字体样式的所有基本原理，包括设置文字的粗细，字体和样式，文字的属性简写，文字的对齐，和其他效果，以及行和字母间距。

- - - - - - - - - - - - -
先决条件：基本的电脑操作，HTML 基础 (学习 Introduction to HTML)，CSS 基础 (学习 Introduction to CSS).
目的:了解在网页上设计文本所需的基本属性和技术。
- -

CSS中的文字样式涉及什么？

- -

正如你已经在你使用 HTML 和 CSS 完成工作时所经历的一样，元素中的文本是布置在元素的内容框中。以内容区域的左上角作为起点 (或者是右上角，是在 RTL 语言的情况下)，一直延续到行的结束部分。一旦达到行的尽头，它就会进到下一行，然后继续，再接着下一行，直到所有内容都放入了盒子中。文本内容表现地像一些内联元素，被布置到相邻的行上，除非到达了行的尽头，否则不会换行，或者你想强制地，手动地造成换行的话，你可以使用 {{htmlelement("br")}} 元素。

- -
-

注意: 如果上面的段落让你感到困惑，没关系，在继续之前，可以重新看看我们的 Box model 文件，复习框模型的理论。

-
- -

用于样式文本的 CSS 属性通常可以分为两类，我们将在本文中分别观察。

- - - -
-

注意: 请记住，包含在元素中的文本是作为一个单一的实体。你不能将文字其中一部分选中或添加样式，如果你要这么做，那么你必须要用适合的元素来包装它们，比如 ( {{htmlelement("span")}} 或者 {{htmlelement("strong")}}), 或者使用伪元素，像::first-letter (选中元素文本的第一个字母), ::first-line (选中元素文本的第一行), 或者 ::selection (当前光标双击选中的文本)

-
- -

字体

- -

我们直接来看看样式字体的属性。在这个例子中，我们会在一个相同的 HTML 示例中应用一些不同的 CSS 属性，就像这样：

- -
<h1>Tommy the cat</h1>
-
-<p>I remember as if it were a meal ago...</p>
-
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
- -

你可以在这找到完成版本 finished example on Github (也可以看源码 the source code.)

- -

颜色

- -

{{cssxref("color")}} 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 {{cssxref("text-decoration")}} 属性放置在文本下方或上方的线 (underline overline)。

- -

color 也可以接受任何合法的 CSS 颜色单位, 比如:

- -
p {
-  color: red;
-}
- -

这将导致段落变为红色，而不是标准的浏览器默认的黑色，如下所示：

- - - -

{{ EmbedLiveSample('颜色', '100%', 220) }}

- -

字体种类

- -

要在你的文本上设置一个不同的字体，你可以使用 {{cssxref("font-family")}}  属性，这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 {{anch("Default fonts", "default font")}}. 下面是一个简单的例子:

- -
p {
-  font-family: arial;
-}
- -

这段语句使所有在页面上的段落都采用 arial 字体，这个字体可在任何电脑上找到。

- -

网页安全字体

- -

说到字体可用性，只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。这些都是所谓的 网页安全字体。

- -

大多数时候，作为网页开发者，我们希望对用于显示我们的文本内容的字体有更具体的控制。问题在于，需要一个方法来知道当前正在浏览我们的网站网页的电脑，它有哪些可用字体。我们并不是总能在每种情况下都知道这一点，但是网络安全字体在几乎所有最常用的操作系统（Windows，Mac，最常见的Linux发行版，Android和iOS版本）中都可用。

- -

实际的Web安全字体列表将随着操作系统的发展而改变，但是可以认为下面的字体是网页安全的，至少对于现在来说 (它们中的许多都非常流行，这要感谢微软在90年代末和21世纪初期的倡议Core fonts for the Web )：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
字体名称泛型注意
Arialsans-serif通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品，尽管它们的字体面几乎相同，但 Helvetica 被认为具有更好的形状，即使Arial更广泛地可用。
Courier Newmonospace某些操作系统有一个 Courier New 字体的替代（可能较旧的）版本叫Courier。使用Courier New作为Courier的首选替代方案，被认为是最佳做法。
Georgiaserif
Times New Romanserif某些操作系统有一个 Times New Roman 字体的替代（可能较旧的）版本叫 Times。使用Times作为Times New Roman的首选替代方案，被认为是最佳做法。
Trebuchet MSsans-serif您应该小心使用这种字体——它在移动操作系统上并不广泛。
Verdanasans-serif
- -
-

注意: 在各种资源中，cssfontstack.com 网站维护了一个可用在 Windows 和 Mac 操作系统上使用的网页安全字体的列表，这可以帮助决策网站的安全性。

-
- -
-

注意: 有一个可以下载来自一个网页的自定义字体的方法，允许你通过任何你想要的方法来定制你使用的字体：网页字体。这个有一点复杂，我们将在这个模块中的另一篇文章中讨论这一点。

-
- -

默认字体

- -

CSS 定义了 5 个常用的字体名称:  serif, sans-serif, monospace, cursive,和 fantasy. 这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器，而且它们所运行的每个操作系统也会有所不同。这是一种糟糕的情况，浏览器会尽力提供一个看上去合适的字体。 serif, sans-serif 和 monospace 是比较好预测的，默认的情况应该比较合理，另一方面，cursive 和 fantasy 是不太好预测的，我们建议使用它们的时候应该稍微注意一些，多多测试。

- -

五个名称定义如下：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
名称定义示例
serif有衬线的字体 （衬线一词是指字体笔画尾端的小装饰，存在于某些印刷体字体中）My big red elephant
sans-serif没有衬线的字体。My big red elephant
monospace每个字符具有相同宽度的字体，通常用于代码列表。My big red elephant
cursive用于模拟笔迹的字体，具有流动的连接笔画。My big red elephant
fantasy用来装饰的字体My big red elephant
- -

字体栈

- -

由于你无法保证你想在你的网页上使用的字体的可用性 (甚至一个网络字体可能由于某些原因而出错), 你可以提供一个字体栈 (font stack)，这样的话，浏览器就有多种字体可以选择了。只需包含一个font-family属性，其值由几个用逗号分离的字体名称组成。比如

- -
p {
-  font-family: "Trebuchet MS", Verdana, sans-serif;
-}
- -

在这种情况下，浏览器从列表的第一个开始，然后查看在当前机器中，这个字体是否可用。如果可用，就把这个字体应用到选中的元素中。如果不可用，它就移到列表中的下一个字体，然后再检查。

- -

在字体栈的最后提供一个合适的通用的字体名称是个不错的办法，这样的话，即使列出的字体都无法使用，浏览器至少可以提供一个还算合适的选择。为了强调这一点，如果没有其他选项可用，那么段落将被赋予浏览器的默认衬线字体 - 通常是Time New Roman - 这对于 sans-serif 字体是不利的！

- -
-

注意: 有一些字体名称不止一个单词，比如Trebuchet MS ，那么就需要用引号包裹。

-
- -

一个使用 font-family 的例子

- -

让我们把它添加到之前的例子上，给段落一个 sans-serif 的字体。

- -
p {
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

这给我们以下结果：

- - - -

{{ EmbedLiveSample('一个使用_font-family_的例子', '100%', 220) }}

- -

字体大小

- -

在我们之前的模块中的CSS values and units 文章，我们回顾了length and size units. 字体大小 (通过 {{cssxref("font-size")}} 属性设置) 可以取大多数这些单位的值 (以及其他，比如百分比 percentages)，然而你在调整字体大小时，最常用的单位是：

- - - -

元素的 font-size 属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素——{{htmlelement("html")}}开始，浏览器的 font-size 标准设置的值为 16px。在根元素中的任何段落 (或者那些浏览器没有设置默认大小的元素)，会有一个最终的大小值：16px。其他元素也许有默认的大小，比如 {{htmlelement("h1")}} 元素有一个 2em 的默认值，所以它的最终大小值为 32px。当你开始更改嵌套元素的字体大小时，事情会变得棘手。比如，如果你有一个 {{htmlelement("article")}} 元素在你的页面上，然后设置它的 font-size 为 1.5em (通过计算，可以得到大小为 24px)，然后想让 <article> 元素中的段落获得一个计算值为 20px 的大小，那么你应该使用多少 em。

- -
<!-- document base font-size is 16px -->
-<article> <!-- If my font-size is 1.5em -->
-  <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
-</article>
- -

你需要将 em 的值设置为 20/24, 或者 0.83333333em. 这个计算可能比较复杂，所以当你设置的时候，你需要仔细一些。如果可以使用 rem 的话，那实现起来就变得简单不少，避免在可能的情况下设置容器元素的字体大小。

- -

一个简单的 size 示例

- -

当调整你的文本大小时，将文档(document)的基础  font-size 设置为10px往往是个不错的主意，这样之后的计算会变得简单，所需要的 (r)em 值就是想得到的像素的值除以 10，而不是 16。做完这个之后，你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有font-size的规则集是一个好主意，这样它们就可以很容易被找到。

- -

我们的新结果是这样的:

- - - -
html {
-  font-size: 10px;
-}
-
-h1 {
-  font-size: 2.6rem;
-}
-
-p {
-  font-size: 1.4rem;
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ EmbedLiveSample('字体大小', '100%', 220) }}

- -

字体样式，字体粗细，文本转换和文本装饰

- -

CSS 提供了 4 种常用的属性来改变文本的样子：

- - - -

我们来看一下这几个属性添加到我们的例子中：

- -

我们的新结果是这样的：

- - - -
html {
-  font-size: 10px;
-}
-
-h1 {
-  font-size: 2.6rem;
-  text-transform: capitalize;
-}
-
-h1 + p {
-  font-weight: bold;
-}
-
-p {
-  font-size: 1.4rem;
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ EmbedLiveSample('字体样式，字体粗细，文本转换和文本装饰', '100%', 220) }}

- -

文字阴影

- -

你可以为你的文本应用阴影，使用 {{cssxref("text-shadow")}} 属性。这最多需要 4 个值，如下例所示：

- -
text-shadow: 4px 4px 5px red;
- -

4 个属性如下:

- -
    -
  1. 阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位 length and size units, 但是 px 是比较合适的。这个值必须指定。
    2. -
  2. 阴影与原始文本的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移动阴影，而不是左/右。这个值必须指定。
    3. -
  3. 模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为0，这意味着没有模糊。可以使用大多数的 CSS 单位 length and size units.
    4. -
  4. 阴影的基础颜色，可以使用大多数的 CSS 颜色单位 CSS color unit. 如果没有指定，默认为 black.
    5. -
- -
-

注意: 正偏移值可以向右移动阴影，但也可以使用负偏移值来左右移动阴影，例如 -1px -1px.

-
- -

多种阴影

- -

您可以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本，例如：

- -
text-shadow: -1px -1px 1px #aaa,
-             0px 4px 1px rgba(0,0,0,0.5),
-             4px 4px 5px rgba(0,0,0,0.7),
-             0px 0px 7px rgba(0,0,0,0.4);
- -

如果我们把这个样式应用到我们 "Tommy the cat" 示例中的 {{htmlelement("h1")}} 元素，就像这样：

- - - -

{{ EmbedLiveSample('多种阴影', '100%', 220) }}

- -
-

注意: 你可以看到更多有趣的关于 text-shadow 使用的示例在 Moonlighting with CSS text-shadow.

-
- -

文本布局

- -

有了基本的字体属性，我们来看看我们可以用来影响文本布局的属性。

- -

文本对齐

- -

 {{cssxref("text-align")}} 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下，并且在与常规文字处理器应用程序中的工作方式几乎相同：

- - - -

如果我们应用 text-align: center; 到我们例子中的 {{htmlelement("h1")}} 元素中，结果如下：

- - - -

{{ EmbedLiveSample('文本对齐', '100%', 220) }}

- -

行高

- -

 {{cssxref("line-height")}} 属性设置文本每行之间的高，可以接受大多数单位 length and size units，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 {{cssxref("font-size")}} 来获得 line-height。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍，你可以使用这个:

- -
line-height: 1.5;
- -

把这个样式应用到我们示例中的 {{htmlelement("p")}} 元素，结果如下：

- - - -

{{ EmbedLiveSample('行高', '100%', 250) }}

- -

字母和单词间距

- -

{{cssxref("letter-spacing")}} 和 {{cssxref("word-spacing")}} 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位 length and size units.

- -

所以作为例子，如果我们把这个样式应用到我们的示例中的 {{htmlelement("p")}} 段落的第一行：

- -
p::first-line {
-  letter-spacing: 2px;
-  word-spacing: 4px;
-}
- -

我们会得到下面的结果：

- - - -

{{ EmbedLiveSample('字母和字间距', '100%', 250) }}

- -

其他一些值得看一下的属性

- -

以上属性让你了解如何开始在网页上设置文本， 但是你可以使用更多的属性。我们只是想介绍最重要的。一旦你习惯使用上面的内容，你还应该探索以下几点：

- -

Font 样式:

- - - -

文本布局样式：

- - - -

Font 简写

- -

许多字体的属性也可以通过 {{cssxref("font")}} 的简写方式来设置 . 这些是按照以下顺序来写的：  {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.

- -

如果你想要使用 font 的简写形式，在所有这些属性中，只有 font-size 和 font-family 是一定要指定的。

- -

{{cssxref("font-size")}} 和 {{cssxref("line-height")}} 属性之间必须放一个正斜杠。

- -

一个完整的例子如下所示：

- -
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
- -

动手练习: 使用样式文本

- -

在这个动手练习中，我们没有任何具体的练习来做：我们只是希望你和一些字体/文本布局属性相处地愉快，看看你可以制作什么！你可以使用离线HTML / CSS文件进行此操作，也可以将代码输入到下面的实时可编辑示例中。

- -

如果你犯了错误，你可以使用 Reset 按钮来复原。

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

小结

- -

我们希望你在本篇文章中享受与文本在一起的时光！下篇文章会介绍所有你需要知道的关于 HTML 列表的样式。

- -

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

diff --git "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/index.html" "b/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/index.html" deleted file mode 100644 index ec4822b9ad..0000000000 --- "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/index.html" +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: 为文本添加样式（样式化文本） -slug: Learn/CSS/为文本添加样式 -tags: - - CSS - - 代码脚步 - - 列表lists - - 初学者 - - 字体Fonts - - 字母letter - - 文字font - - 文本Text - - 模块化Module - - 网络字体 web fonts - - 行line - - 链接Links - - 阴影shadow -translation_of: Learn/CSS/Styling_text ---- -
{{LearnSidebar}}
- -

掌握了 CSS 语言的基础之后，对于您来说，下一个需要关心的 CSS 主题就是为文本添加样式——一个您将会最经常使用 CSS 做的事情。在这里，我们专注于为文本样式的基础，包括设置字体、粗细、斜体、行还有字符间距、阴影以及文本的其他特征。我们将会通过在您的网页中应用自定义字体、样式化列表以及链接来圆满地结束本模块。

- -

前提

- -

在开始这一模块之前，您应当像 HTML 介绍 模块中所探讨的，已经熟悉了基本的HTML，以及像 CSS 介绍 中所详述的，对自己的 CSS 基础感觉还满意。

- -
-

注意: 如果您所使用的是不能创建自己的文件的电脑、平板电脑或其他设备的话，您可以在一个在线编码程序 JSBin 或 Thimble 中尝试（大部分的）代码例子。

-
- -

导引

- -

这个模块包括了以下文章，这些文章将教会您所有的基本功以支持您为 HTML 文本内容添加样式。

- -
-
基本的文本以及字体样式
-
在本文章中，我们将通篇了解文本、字体样式的所有基础，包括设置字体粗细（ font weight ）、字体系列及样式（ family and style ）、字体缩写（ font shorthand ）、文本排列（ text alignment ）和其他的效果，还有行（ line ）以及字符间距（ letter spacing ）。
-
样式化列表
-
对于大部分内容来说，列表的行为表现跟其他任何文本其实差不多，但您也需要了解还有一些专门用于列表的 CSS 样式以及考虑一些最好的实践方式。本文章将阐释这一切。
-
样式化链接
-
当您为链接添加样式时，很重要的一点是要去理解怎样有效地使用伪类去修饰链接的状态，以及怎么去修饰不同的接口功能例如导航菜单和面板中所使用的链接。我们将会在这篇文章中讨论这些话题。
-
网络字体
-
在这里我们将会详细地探索网络字体——这会允许您与您的网页一同下载自定义字体，来实现更为不同的个性化字体样式。
-
- -

评估

- -

以下的评估将会评测您对以上导引所涵盖的为文本添加样式的技术的理解。

- -
-
对一个社区学校的主页进行排版
-
在这个评估中，我们通过让您为一个社区学校的主页添加文本样式来测试您对文本样式的理解程度。
-
diff --git "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/styling_links/index.html" "b/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/styling_links/index.html" deleted file mode 100644 index df2e7c6093..0000000000 --- "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/styling_links/index.html" +++ /dev/null @@ -1,431 +0,0 @@ ---- -title: 样式化链接 -slug: Learn/CSS/为文本添加样式/Styling_links -tags: - - 伪类 - - 悬浮 - - 标签 - - 聚焦 - - 菜单 - - 超链接 - - 链接 -translation_of: Learn/CSS/Styling_text/Styling_links ---- -
-

{{LearnSidebar}}

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

-
- -

当为 links 添加样式时, 理解利用伪类有效地建立链接状态是很重要的，以及如何为链接添加样式来实现常用的功能，比如说导航栏、选项卡。我们将在本文中关注所有这些主题。

- - - - - - - - - - - - -
学习本章节的前提:基本的计算机使用能力，HTML 基础 (学习 Introduction to HTML), CSS 基础 (学习 Introduction to CSS), CSS text and font fundamentals.
目的:学习如何将样式应用到链接状态，以及如何使用链接实现常见的 UI 功能，比如导航菜单。
- -

让我们来看一些链接

- -

根据最佳实践  创建超链接 中的练习，我们看到了如何在你的 HTML 中实现链接。在本篇文章中，我们会以这个知识为基础，向你展示将样式应用到链接的最佳实践。

- -

链接状态

- -

第一件需要理解的事情是链接状态的概念，链接存在时处于不同的状态，每一个状态都可以用对应的 伪类 来应用样式:

- - - -

默认的样式

- -

下面的例子说明了一个链接的默认行为表现 (这里的 CSS 仅仅是为了放大和居中文本，使内容更加突出)

- -
<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>
-
- -
p {
-  font-size: 2rem;
-  text-align: center;
-}
- -

{{ EmbedLiveSample('默认的样式', '100%', 120) }}

- -

当你观察默认样式的时候，你也许会注意到一些东西:

- - - -

有趣的是，这些默认的样式与20世纪90年代中期浏览器早期的风格几乎相同。这是因为用户知道以及期待链接就是这样变化的，如果链接的样式不同，就会让一些人感到奇怪。不过这不意味着你不应该为链接添加任何样式，只是你的样式不应该与用户预期的相差太大，你应该至少：

- - - -
-

注意: 你不仅仅只限于上述属性来把样式应用到你的链接上，你可以用任何你喜欢的属性，就是不要搞得太疯狂！

-
- -

将样式应用到一些链接

- -

现在我们已经详细地看了默认的状态，让我们看一下典型的链接样式的设置。

- -

开始之前，我们先写出我们的空规则集：

- -
a {
-
-}
-
-
-a:link {
-
-}
-
-a:visited {
-
-}
-
-a:focus {
-
-}
-
-a:hover {
-
-}
-
-a:active {
-
-}
- -

这几个规则的顺序是有意义的，因为链接的样式是建立在另一个样式之上的，比如，第一个规则的样式也会在后面的规则中生效，一个链接被激活 (activated) 的时候，它也是处于悬停 (hover) 状态的。如果你搞错了顺序，那么就可能不会产生正确的效果。要记住这个顺序，你可以尝试这样帮助记忆：LoVe Fears HAte.

- -

现在让我们再添加一些信息，得到正确的样式：

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-size: 1.2rem;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: #265301;
-}
-
-a:visited {
-  color: #437A16;
-}
-
-a:focus {
-  border-bottom: 1px solid;
-  background: #BAE498;
-}
-
-a:hover {
-  border-bottom: 1px solid;
-  background: #CDFEAA;
-}
-
-a:active {
-  background: #265301;
-  color: #CDFEAA;
-}
- -

这里还提供了一些示例HTML，供你应用CSS：

- -
<p>There are several browsers available, such as <a href="https://www.mozilla.org/zh-CN/firefox/">Mozilla
-Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
-<a href="https://www.microsoft.com/zh-CN/windows/microsoft-edge">Microsoft Edge</a>.</p>
- -

把这两个放在一起，我们得到这样的结果：

- -

{{ EmbedLiveSample('将样式应用到一些链接', '100%', 150) }}

- -

那么我们在这里做了什么? 这个看起来肯定和默认的样式不同，但仍然提供了一个熟悉的体验，好让用户知道发生了什么：

- - - -

动手练习: 为你的链接添加样式

- -

在这个动手练习部分，我们希望你使用我们的空规则集，然后添加你自定义的规则，从而使链接看上去比较酷。发挥你的想象力，大胆地做吧。我们相信你可以想出一些更酷的东西，就像我们上面的例子一样。

- -

如果你犯了错误，你都可以使用 Reset 按钮来重置。 如果你遇到了困难，可以按 Show solution 按钮来显示我们上文中的例子。

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

在链接中包含图标

- -

常见的做法是在链接中包含图标，使链接提供更多关于链接指向的内容的信息。让我们来看一个简单的例子，例子中为一个外部链接 (链接指向的不是本站，而是外部站点)。这样的图标通常看起来像一个指向盒子的小箭头，比如, 我们会使用icons8.com上的这个优秀的范例。

- -

让我们来看一些能给我们这个效果的 HTML 和 CSS。先是一些简单的等待你样式化的 HTML ：

- -
<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
-look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
-out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>
- -

接着是 CSS:

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: blue;
-}
-
-a:visited {
-  color: purple;
-}
-
-a:focus, a:hover {
-  border-bottom: 1px solid;
-}
-
-a:active {
-  color: red;
-}
-
-a[href*="http"] {
-  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
-  background-size: 16px 16px;
-  padding-right: 19px;
-}
- -

{{ EmbedLiveSample('在链接中包含图标', '100%', 150) }}

- -

那么这里发生了什么? 我们将跳过大部分的 CSS，因为那些只是你之前看过的相同的信息。最后一条规则很有趣，这里，我们在外部链接上插入了一个自定义背景图片，这和上篇自定义列表项目符号文章的做法很像。这次，我们使用了 {{cssxref("background")}} 简写，而不是分别使用多个属性。我们设置了我们想要插入的图片的路径，指定了 no-repeat ，这样我们只插入了一次图片，然后指定位置为100%，使其出现在内容的右边，距离上方是0px。

- -

我们也使用 {{cssxref("background-size")}} 来指定要显示的背景图像的大小，为了满足响应式网站设计的需要，在图标更大，需要再重新调整它的大小的时候，这样做是很有帮助的。但是，这仅适用于IE 9及更高版本。所以你如果需要支持那些老的浏览器，只能调整图像的原始大小，然后插入。

- -

最后，我们在链接上设置 {{cssxref("padding-right")}} ，为背景图片留出空间，这样就不会让它和文本重叠了。

- -

最后的问题，我们是如何只选中了外部链接的？如果你正确编写你的HTML链接 ，你应该只会在外部链接上使用绝对 URL，如果链接是链接你的站点的其他部分，那么使用相对链接是更加高效的。因此“http”文本应该只出现在外部链接上，为此我们可以使用一个属性选择器——a[href*="http"] ——选中 {{htmlelement("a")}} 元素，但是这样只会选中那些拥有 {{htmlattrxref("href","a")}} 属性，且属性的值包含 "http" 的 {{htmlelement("a")}}的元素。

- -

就这样啦，尝试重新审视上面的动手练习部分，尝试这种新技术！

- -
-

注意: 不要担心，如果你目前不熟悉 backgrounds 和 responsive web design ; 这些会在其他地方解释。

-
- -

样式化链接为按钮

- -

目前在本文中探索的用法也可以用在其他方面。比如，悬停 (hover) 的状态可以为不同的元素应用样式，不只是链接，你也许会想添加悬停状态的样式到段落、列表项、或者是其他东西。

- -

此外，在某些情况下，链接通常会应用样式，使它看上去的效果和按钮差不多，一个网站导航菜单通常是标记为一个列表，列表中包含链接，这可以很容易地被设计为看起来像一组控制按钮或是选项卡，主要是用于让用户可以访问站点的其他部分，现在让我们来看一看。

- -

首先，一些 HTML:

- -
<ul>
-  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
-</ul>
- -

接着，是我们的 CSS:

- -
body,html {
-  margin: 0;
-  font-family: sans-serif;
-}
-
-ul {
-  padding: 0;
-  width: 100%;
-}
-
-li {
-  display: inline;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  display: inline-block;
-  width: 19.5%;
-  margin-right: 0.625%;
-  text-align: center;
-  line-height: 3;
-  color: black;
-}
-
-li:last-child a {
-  margin-right: 0;
-}
-
-a:link, a:visited, a:focus {
-  background: yellow;
-}
-
-a:hover {
-  background: orange;
-}
-
-a:active {
-  background: red;
-  color: white;
-}
- -

这给我们以下结果：

- -

{{ EmbedLiveSample('样式化链接为按钮', '100%', 100) }}

- -

让我们来解释一下这里发生了什么，主要是几个有趣的部分:

- - - -
-

注意: 你也许会注意到 HTML 中的列表的每项内容都在同一行上，这是因为 inline-block 元素在页面上创建的空格换行符，就像几个字之间的空格，这样的空隙也许会破坏我们的水平导航菜单布局。所以我们删除了空格。你可以在  Fighting the space between inline block elements 找到有关此问题的更多信息（和解决方案）。

-
- -

测试你的技巧！

- -

你已经到了本文结尾，并且在我们的交互学习部分已经做了一些技巧测试。但是你在继续之前记住了最重要的信息了吗？你可以在模块末尾找到一个用于验证你已掌握知识的评估——见给一个社区大学的主页排版。

- -

这个评估测试了这个模块讨论到的所有知识，这样你可能在读下一篇文章之前想看一下它。

- -

小结

- -

我们希望本文为你提供有关链接的所有知识——目前！我们的样式文本模块中的最后一篇文章详细介绍了如何在你的网站上使用自定义字体，或者更熟悉网络字体。

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

diff --git "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/styling_lists/index.html" "b/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/styling_lists/index.html" deleted file mode 100644 index 075b457836..0000000000 --- "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/styling_lists/index.html" +++ /dev/null @@ -1,374 +0,0 @@ ---- -title: 样式列表 -slug: Learn/CSS/为文本添加样式/Styling_lists -translation_of: Learn/CSS/Styling_text/Styling_lists ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
- -

List列表 大体上和其他文本一样，但是仍有一些你需要知道的特殊CSS属性，和一些可供参考的最佳实践，这篇文章将阐述这一切。

- - - - - - - - - - - - -
前置知识:Basic computer literacy, HTML basics (study Introduction to HTML), CSS basics (study Introduction to CSS), 基本文本和字体样式.
目标:熟悉与列表相关的样式和最佳实践
- -

一个简单的例子

- -

首先，让我们看一个简单的例子。文章中我们将看到无序，有序和描述列表——它们都具有相似的样式特性，而某些特性却又各不相同。Github上有未加载样式的例子（也可以查看源码。）

- -

例子中列表的HTML代码如下：

- -
<h2>Shopping (unordered) list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<ul>
-  <li>Humous</li>
-  <li>Pitta</li>
-  <li>Green salad</li>
-  <li>Halloumi</li>
-</ul>
-
-<h2>Recipe (ordered) list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<ol>
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
-
-<h2>Ingredient description list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<dl>
-  <dt>Humous</dt>
-  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
-  <dt>Pitta</dt>
-  <dd>A soft, slightly leavened flatbread.</dd>
-  <dt>Halloumi</dt>
-  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
-  <dt>Green salad</dt>
-  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
-</dl>
- -

现在，如果你去到例子的展示页面，并使用浏览器开发者工具查看那些列表元素，你会注意到若干个默认的样式预设值：

- - - -

处理列表间距

- -

当您创建样式列表时，您需要调整样式，使其保持与周围元素相同的垂直间距（例如段落和图片，有时称为垂直节奏））和相互间的水平间距（您可以在 Github 上参考完成的样式示例 ，也可以找到源代码。）

- -

用于文本样式和间距的CSS如下所示：

- -
/* General styles */
-
-html {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 10px;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-ul,ol,dl,p {
-  font-size: 1.5rem;
-}
-
-li, p {
-  line-height: 1.5;
-}
-
-/* Description list styles */
-
-
-dd, dt {
-  line-height: 1.5;
-}
-
-dt {
-  font-weight: bold;
-}
-
-dd {
-  margin-bottom: 1.5rem;
-}
-
- - - -

列表特定样式

- -

现在我们来看一下列表的一般间距，我们来研究一些列表具有的特定属性。 我们从三个属性开始了解，这三个属性可以在 {{htmlelement("ul")}} 或  {{htmlelement("ol")}} 元素上设置：

- - - -

符号样式

- -

像上面所提及的， {{cssxref("list-style-type")}}  属性允许你设置项目符号点的类型，在我们的例子中，我们在有序列表上设置了大写罗马数字：

- -
ol {
-  list-style-type: upper-roman;
-}
- -

效果显示如下：

- -

an ordered list with the bullet points set to appear outside the list item text.

- -

您可以通过  {{cssxref("list-style-type")}}  参考页面查找到更多选项。

- -

项目符号位置

- -

{{cssxref("list-style-position")}} 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。 如上所示，默认值为 outside，这使项目符号位于列表项之外。

- -

如果值设置为 inside，项目条目则位于行内。

- -
ol {
-  list-style-type: upper-roman;
-  list-style-position: inside;
-}
- -

an ordered list with the bullet points set to appear inside the list item text.

- -

使用自定义的项目符号图片

- -

{{cssxref("list-style-image")}} 属性允许对于项目符号使用自定义图片。其语法相当简单：

- -
ul {
-  list-style-image: url(star.svg);
-}
- -

然而，这个属性在控制项目符号的位置，大小等方面是有限的。 您最好使用{{cssxref("background")}} 系列属性，您将在 Styling boxes 模块中了解更多信息。在这里我们仅做一点尝试！

- -

结束我们的例子，我们样式化无序列表像这样（放到您之前所见的顶部）：

- -
ul {
-  padding-left: 2rem;
-  list-style-type: none;
-}
-
-ul li {
-  padding-left: 2rem;
-  background-image: url(star.svg);
-  background-position: 0 0;
-  background-size: 1.6rem 1.6rem;
-  background-repeat: no-repeat;
-}
- -

我们的所做如下：

- - - -

效果显示如下：

- -

an unordered list with the bullet points set as little star images

- -

list-style 速记

- -

上述提到的三种属性可以用一个单独的速记属性 {{cssxref("list-style")}} 来设置。例如：

- -
ul {
-  list-style-type: square;
-  list-style-image: url(example.png);
-  list-style-position: inside;
-}
- -

可以被如下方式代替：

- -
ul {
-  list-style: square url(example.png) inside;
-}
- -

属性值可以任意顺序排列，你可以设置一个，两个或者三个值（该属性的默认值为 disc, none, outside），如果指定了 type 和 image，如果由于某种原因导致图像无法加载，则 type 将用作回退。

- -

管理列表计数

- -

有时，您可能想在有序列表上进行不同的计数方式。例如： 从1以外的数字开始，或向后倒数，或者按步或多于1计数。HTML和CSS有一些工具可以帮助您

- -

start

- -

{{htmlattrxref("start","ol")}} 属性允许你从1 以外的数字开始计数。示例如下：

- -
<ol start="4">
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

输出的结果如下：

- -

{{ EmbedLiveSample('start', '100%', 150) }}

- -

reversed

- -

{{htmlattrxref("reversed","ol")}} 属性将启动列表倒计数。示例如下：

- -
<ol start="4" reversed>
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

输出的结果如下：

- -

{{ EmbedLiveSample('reversed', '100%', 150) }}

- -

value

- -

{{htmlattrxref("value","ol")}} 属性允许设置列表项指定数值，示例如下:

- -
<ol>
-  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
-  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li value="6">Wash and chop the salad.</li>
-  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

输出的结果如下：

- -

{{ EmbedLiveSample('value', '100%', 150) }}

- -
-

注意: 纵然你使用非数字的 {{cssxref("list-style-type")}}, 你仍需要使用与数值同等意义的值作为 value 的属性。

-
- -

主动学习: 为嵌套式列表添加样式

- -

在该学习环节，我们希望你使用如上所学尝试为一个嵌套式列表添加样式。我们已经提供了 HTML , 在此之上请完成如下：

- -
    -
  1. 为该无序列表提供方形项目符号。
    2. -
  2. 为该无序列表项和有序列表项提供基于其字体大小 1.5 的行高。
    3. -
  3. 为有序列表提供小写字母的项目符号。
    4. -
  4. 对列表进行自由发挥，尝试不同的项目符号类型，间距，以及其他的各种属性。
    5. -
- -

如果犯了错误，可以随时点击 Reset（重置） 按钮进行重新设置。如果你真的遇到困难无法继续下去，点击 Show solution（显示解决方案）按钮查看可行的解决方案。

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

另请参阅

- -

CSS计数器提供用于自定义列表计数和样式的高级工具，但它们相当复杂。 如果你想更深入了解，请查看如下资源：

- - - -

总结

- -

一旦你掌握一些相关的基础原则和特定属性，列表的样式还是相对容易理解的。在下篇文章中我们将转到另一话题——为链接提供样式的各种技巧。

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

diff --git "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/typesetting_a_homepage/index.html" "b/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/typesetting_a_homepage/index.html" deleted file mode 100644 index 98f86f125f..0000000000 --- "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/typesetting_a_homepage/index.html" +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: 作业：排版社区大学首页 -slug: Learn/CSS/为文本添加样式/Typesetting_a_homepage -tags: - - CSS - - 初学者 - - 字体 - - 样式化文本 - - 网络字体 - - 链接 -translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
- -

在本测评中，通过对社区学校主页的文本样式化，我们会测试你对所有本模块涉及到的文本样式化技术的理解。你或许也会从中获得乐趣。

- - - - - - - - - - - - -
预备条件:在本次测评前，你应该完成了本模块所有章节。
目标:测试对CSS文本样式化技术的理解。
- -

开始

- -

在本测评开始前，你应该:

- - - -
-

注意: 或者，你可以使用像 JSBin 或 Thimble 的网站完成你的测评。你可以把HTML和CSS粘贴到在线编辑器中，并使用this URL指定背景图像。如果你使用的在线编辑器没有单独的CSS面板，你可以将其放在HTML文件的<style>元素中。

-
- -

项目简介

- -

你有一个虚构的社区大学主页的未处理HTML文件和一些CSS文件。这些CSS文件把网页分成两栏布局，提供了一些简单的样式化。你将在CSS文件底部的comment下写你的CSS，这样可以方便地标出你的工作。不要担心选择器一直重复；我们会帮你跳过这个问题。

- -

字体：

- - - -

文本样式化基础：

- - - -

链接：

- - - -

列表：

- - - -

导航栏菜单:

- - - -

提示与技巧

- - - -

实例

- -

下图展示了其中一种设计完成后的例子。

- -

- -

测评

- -

如果你将本测评作为课程的一部分，你应该能够将你的作品交给你的老师/指导员打分。如果你是自学的，你可以很轻松地在discussion thread for this exercise，或者Mozilla IRC的#mdn IRC 频道上获得打分。先尝试完成本次练习——作弊是学不到任何东西的！

- -

{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

- -

在本单元中

- - diff --git "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/web_\345\255\227\344\275\223/index.html" "b/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/web_\345\255\227\344\275\223/index.html" deleted file mode 100644 index ad9691cb00..0000000000 --- "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/web_\345\255\227\344\275\223/index.html" +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Web 字体 -slug: Learn/CSS/为文本添加样式/Web_字体 -translation_of: Learn/CSS/Styling_text/Web_fonts ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
- -

在模块的第一篇文章中，我们探讨了用于样式化字体和文本的基本CSS特性。在这篇文章中，我们将更进一步，详细地探索web字体——它们允许您下载自定义字体和您的web页面，以允许更多不同的、自定义的文本样式。

- - - - - - - - - - - - -
预备知识:基本计算机素养，HTML 基础 (学习 Introduction to HTML), CSS 基础 (学习Introduction to CSS), CSS文本和字体基础 。
目标:学习如何将web字体应用到web页面，使用第三方服务，或者编写自己的代码。
- -

字体种类回顾

- -

正如我们在基本文本和字体样式中所看到的那样，应用到您的HTML的字体可以使用 {{cssxref("font-family")}}属性来控制。您需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。

- -
p {
-  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
-}
- -

这个系统运行良好，但是对于传统的web开发人员来说，字体选择是有限的。只有少数几种字体可以保证兼容所有流行的操作系统——这就是所谓的 Web-safe 字体。您可以使用字体堆栈来指定可选择的字体，后面是Web-safe的替代选项，然后是默认的系统字体，但是为了确保您的设计在每种字体中都显示正常，这样增加了测试的开销。

- -

Web 字体

- -

但是还有一种选择，它非常有效，回到IE版本6。Web字体是一种CSS特性，允许您指定在访问时随您的网站一起下载的字体文件，这意味着任何支持Web字体的浏览器都可以使用您指定的字体。太酷啦！所需的语法如下所示：

- -

首先，在CSS的开始处有一个{{cssxref("@font-face")}}块，它指定要下载的字体文件：

- -
@font-face {
-  font-family: "myFont";
-  src: url("myFont.ttf");
-}
-
- -

在这个下面，你可以使用@font-face中指定的字体种类名称来将你的定制字体应用到你喜欢的任何东西上，比如说：

- -
html {
-  font-family: "myFont", "Bitstream Vera Serif", serif;
-}
- -

语法确实比这更复杂，下面我们将详细介绍。

- -

关于网页字体有两件重要的事情要记住：

- -
    -
  1. 浏览器支持不同的字体格式，因此您需要多种字体格式以获得良好的跨浏览器支持。例如,大多数现代浏览器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web开放字体格式版本1和2)，它是最有效的格式，但是旧版本IE只支持EOT (Embedded Open Type，嵌入式开放类型)的字体,你可能需要包括一个SVG版本的字体支持旧版本的iPhone和Android浏览器。我们将向您展示如何生成所需的代码。
    2. -
  2. 字体一般都不能自由使用。您必须为他们付费，或者遵循其他许可条件，比如在代码中(或者在您的站点上)提供字体创建者。你不应该在没有适当的授权的情况下偷窃字体。
    3. -
- -
-

注意： Web字体作为一种技术从 Internet Explorer 4 开始就得到了的支持！

-
- -

自主学习:web字体示例

- -

记住这一点，让我们从最初的原则构建一个基本的web字体示例。使用嵌入的live示例很难演示这一点，因此，我们希望您按照下面几节中详细介绍的步骤来了解这个过程。

- -

你应该使用 web-font-start.html 和 web-font-start.css 文件作为开始添加到你的代码中（又见预览版。）现在，在你的电脑上的一个新目录中复制这些文件。在 web-font-start.css文件中，您将找到一些最小的CSS来处理这个示例的基本布局和排版。

- -

查找字体

- -

对于本例，我们将使用两种web字体，一种用于标题，另一种用于正文文本。首先，我们需要找到包含字体的字体文件。字体是由字体铸造厂创建的，并且存储在不同的文件格式中。
- 通常有三种类型的网站可以获得字体：

- - - -

让我们找到一些字体！前往Font Squirrel 并选择两种字体——一种用于标题的有趣的字体(可能是一种不错的显示字体或无衬线字体)，和一种用于段落，稍微不那么华丽，更易于阅读的字体。当您找到每种字体时，按下下载按钮，并将该文件保存在与您先前保存的HTML和CSS文件相同的目录中。无论它们是TTF(True Type Fonts))还是OTF(Open Type字体)都不重要。

- -

在每种情况下，都要解压字体包(Web字体通常分布在包含字体文件和许可信息的ZIP文件中。)您可能会在包中发现多个字体文件，一些字体是作为一个具有不同变体的家庭分布的，例如，瘦、中、粗体、斜体、斜体等等。对于这个例子，我们只是想让您自己考虑一个单一的字体文件。

- -
-

注意： 在右边栏的“查找字体”部分中，您可以单击不同的标记和分类来筛选显示的选项。

-
- -

生成所需代码

- -

现在您需要生成所需的代码(以及字体格式)。对于每种字体，遵循以下步骤：

- -
    -
  1. 确保您已经满足了任何许可证的要求，如果您打算在一个商业和/或Web项目中使用它。
    2. -
  2. 前往 Fontsquirrel Webfont Generator.
    3. -
  3. 使用上传字体按钮上传你的两个字体文件。
    4. -
  4. 勾选复选框，“是的，我上传的字体符合网络嵌入的合法条件。
    5. -
  5. 点击下载你的套件（kit）。
    6. -
- -

在生成器完成处理之后，您应该得到一个ZIP文件，将它保存在与HTML和CSS相同的目录中。

- -

在演示中实现代码

- -

在这一点上解压您刚刚生成的webfont套件。在解压的目录中，您将看到三个有用的条目：

- - - -

要在演示中实现这些字体，请遵循以下步骤：

- -
    -
  1. 将解压缩的目录重命名为简易的目录，比如fonts
    2. -
  2. 打开 stylesheet.css 文件，把包含在你的网页中的 @font-face块复制到你的 web-font-start.css 文件—— 你需要把它们放在最上面，在你的CSS之前，因为字体需要导入才能在你的网站上使用。
    3. -
  3. 每个url()函数指向一个我们想要导入到我们的CSS中的字体文件——我们需要确保文件的路径是正确的，因此，在每个路径的开头添加fonts/ （必要时进行调整）。
    4. -
  4. 现在，您可以在字体栈中使用这些字体，就像任何web安全或默认的系统字体一样。
    - 例如： - 
    font-family: 'zantrokeregular', serif;
    -
    5. -
- -

你应该得到一个演示页面，上面有一些漂亮的字体。因为不同字体的字体大小不同，你可能需要调整大小、间距等，以区分外观和感觉。

- -

- -
-

注意：如果对于要让它正常工作您有任何问题，可以自由地将您的版本与我们完成的文件进行比较——见 web-font-finished.html 和 web-font-finished.css (运行完成的示例)。

-
- -

使用在线字体服务

- -

在线字体服务通常会为你存储和服务字体，这样你就不用担心写@font-face代码了，通常只需要在你的网站上插入一两行代码就可以让一切都运行。例子包括Typekit 和Cloud.typography。大多数这些服务都是基于订阅的，除了Google Fonts，这是一个有用的免费服务，特别是对于快速的测试工作和编写演示。

- -

大多数这些服务都很容易使用，所以我们不会详细地介绍它们。让我们快速浏览一下Google Fonts，这样你就能明白它的意思了。再次的，使用web-font-start.html 和 web-font-start.css a的副本作为你的开始。

- -
    -
  1. 前往 Google Fonts.
    2. -
  2. 使用左边的过滤器来显示你想要选择的字体类型，并选择一些你喜欢的字体。
    3. -
  3. 要选择字体种类，按下按钮旁边的 ⊕ 按钮。
    4. -
  4. 当您选择好字体种类时，按下页面底部的[Number] 种类选择。
    5. -
  5. 在生成的屏幕中，首先需要复制所显示的HTML代码行，并将其粘贴到HTML文件的头部。将其置于现有的{{htmlelement("link")}}元素之上，使得字体是导入的，然后在你的CSS中使用它。
    6. -
  6. 然后，您需要将CSS声明复制到您的CSS中，以便将自定义字体应用到您的HTML。
    7. -
- -
-

注意：如果你需要对比我们的，你可以在 google-font.html和google-font.css找到完整版本的。（见预览版）

-
- -

关于@font-face的更多细节

- -

让我们来探索由fontsquirrel为您生成的@font-face语法。这是其中一个块的样子：

- -
@font-face {
-  font-family: 'ciclefina';
-  src: url('fonts/cicle_fina-webfont.eot');
-  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
-         url('fonts/cicle_fina-webfont.woff') format('woff'),
-         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
-         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
- -

这被称为"bulletproof @font-face syntax（刀枪不入的@font-face语法）", 这是 Paul Irish早期的一篇文章提及后@font-face开始流行起来 (Bulletproof @font-face Syntax。让我们来看看它是怎么做的：

- - - -
-

注意：您还可以为您的web字体指定特定的{{cssxref("font-variant")}} 和 {{cssxref("font-stretch")}} )值。在较新的浏览器中，您还可以指定一个{{cssxref("unicode-range")}}值，这是一个您需要使用什么web字体的特定范围的字符——在支持浏览器中，只有指定的字符才会被下载，省去了不必要的下载。Drew McLellan写的Creating Custom Font Stacks with Unicode-Range在如何利用这个问题上提供了一些有用的建议。

-
- -

总结

- -

既然您已经完成了我们关于文本样式基础的文章，现在是时候用我们对模块的评估来测试您的理解了，为社区学校的主页进行排版。

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

diff --git a/files/zh-cn/learn/discover_browser_developer_tools/index.html b/files/zh-cn/learn/discover_browser_developer_tools/index.html deleted file mode 100644 index 69081b9745..0000000000 --- a/files/zh-cn/learn/discover_browser_developer_tools/index.html +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: 什么是浏览器开发者工具？ -slug: Learn/Discover_browser_developer_tools -tags: - - 开发工具 - - 调试 -translation_of: Learn/Common_questions/What_are_browser_developer_tools ---- -
-

每一个现代网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的HTML、CSS和JavaScript，显示每个资源页面的请求以及载入所花费的时间。本文阐述了如何利用浏览器的开发工具的基本功能。

-
- -
-

注意：在你运行下面的例子之前，打开我们在Web开发入门系列文章中建立的初学者示例网站。你应该按照下面的步骤打开。

-
- -

如何在浏览器中打开开发者工具

- -

开发者工具内置在您的浏览器的子窗口之中，大概像这样：

- -

- -

如何打开它？有三种方式：

- - - -

- -

检查器（Inspector）：DOM 浏览器和CSS编辑器

- -

开发者工具在打开时默认为检查器页面，如下图所示。这个工具可以让你看到你的网页的HTML运行时的样子，以及哪些CSS规则被应用到了页面上元素。它还允许您立即修改HTML和CSS并在浏览器中实时观察修改的结果。

- -

- -

如果你看不到调试器，

- - - -

探索DOM检查器

- -

首先在DOM检查器中右键单击（按Ctrl点击）一个HTML元素，看上下文菜单。菜单选项各不相同，但主要功能是相同的：

- -

- - - -

现在试着编辑一些你的DOM。双击元素，或在页面内容里右键单击它并选择编辑HTML。你可以做出任何你想要的改变，但你不能保存。

- -

探索CSS编辑器

- -

默认情况下，CSS编辑器显示当前所选元素应用的CSS规则：

- -

这些功能特别有用：

- - - -

您会注意到CSS查看器顶部的一些可点击的选项卡：

- - - -

了解更多

- -

了解更多Inspector在不同的浏览器中的细节：

- - - -

JavaScript调试器

- -

你可在JavaScript调试器中查看变量的值，或者设置断点。断点的作用是让程序在你指定的位置暂停，以便你来调试程序并确定问题所在。

- -

- -

如何打开调试器：

- -

火狐，谷歌，IE，Edge：F12

- -

Safari：开打开发者工具，然后选择 "Debugger" 标签。

- -

尝一尝调试器的味

- -

火狐的调试器有三个面板

- -

文件列表

- -

第一个面板位于左边，它包涵着你正在调试的网页的文件列表。从列表中选中你要操作的文件。通过点击选中一个文件，可以在调试中间的面板看到它的内容。

- -

- - - -

源码

- -

在你想要停止执行的位置设置间断点。在下面图片中，高亮的第18行就是被设置的断点。

- -

- -

“监视表达示”和“断点”

- -

右边的面板会显示你添加的监视表达示与断点。

- -

在下图中，第一个区域，监视表达示，显示了变量 listItem 已经被添加，你可以展开列表查看里面的值。

- -

接下来的部分，断点 标签，列出了页面上设置的断点。在 example.js（上上个图中）中，一个断点被定位在语句 listItems.push(inputNewItem.value); 上。

- -

最后两个部分，只在代码运行时才出现。

- -

调用栈 区向你显示哪个代码执行后会达到当前行。你能看到代码处理了一次鼠标点击后，停在了断点处。

- -

最后一部分，Scopes，显示了在代码执行过程中，可见变量值的变化。例如，在下面图片中，你可以看到对像在addItemClick函数中是如何变化的。

- - - -

- -

再了解一些

- -

了解不同浏览器中的JavaScript调试器：

- - - -

JavaScript控制台  

- -

JavaScript控制台是一个非常有用的工具，用于调试没有按预期运行的JavaScript。它允许您针对浏览器当前加载的页面运行JavaScript行，并报告浏览器尝试执行代码时遇到的错误。要在任何浏览器中访问控制台，只需按控制台按钮。 （在Internet Explorer中，按Ctrl + 2.）这将给你一个如下所示的窗口:

- -

- -

要查看会发生什么，请尝试逐个输入以下代码片段（然后按Enter键）:

- -
    -
  1. - 
    alert('hello!');
    -
    2. -
  2. - 
    document.querySelector('html').style.backgroundColor = 'purple';
    -
    3. -
  3. - 
    var my_image = document.createElement('img');
-
-//下面的url已经不再可用，这里注释掉，后面补上了一个可以url
-//且myImage在文章开始给的“初学者示例网址”存在声明冲突，所以改为my_image
-//myImage.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
-my_image.setAttribute('src','https://media.giphy.com/media/3o6ozhxFlr4Ung40RG/giphy.gif');
-
-document.querySelector('h1').appendChild(my_image);
    -
    4. -
- -

现在尝试输入以下错误的代码版本，看看你得到什么。

- -
    -
  1. - 
    alert('hello!);
    -
    2. -
  2. - 
    document.cheeseSelector('html').style.backgroundColor = 'purple';
    -
    3. -
  3. - 
    var my_Image = document.createElement('img');
-myBanana.setAttribute('src','https://media.giphy.com/media/3o6ozhxFlr4Ung40RG/giphy.gif');
-document.querySelector('h1').appendChild(my_Image);
    -
    4. -
- -

您将开始看到浏览器返回的错误类型。通常这些错误是相当神秘的，但是应该很简单的把这些问题解决出来！

- -

了解更多

- -

了解更多JavaScript控制台在不同浏览器中的细节:

- - - -

 参见

- - diff --git a/files/zh-cn/learn/forms/advanced_form_styling/index.html b/files/zh-cn/learn/forms/advanced_form_styling/index.html new file mode 100644 index 0000000000..94128b7229 --- /dev/null +++ b/files/zh-cn/learn/forms/advanced_form_styling/index.html @@ -0,0 +1,467 @@ +--- +title: 高级设计 HTML 表单 +slug: Learn/HTML/Forms/Advanced_styling_for_HTML_forms +translation_of: Learn/Forms/Advanced_form_styling +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms/Property_compatibility_table_for_form_widgets", "Learn/HTML/Forms")}}
+ +

在本文中，我们将看到HTML表单怎样使用CSS装饰难以定制的表单小部件。如前面章节所示，文本域和按钮完全可以使用CSS，现在我们将深入探索HTML表单样式。

+ +

在继续之前，让我们回忆一下两种表单小部件：

+ +
+
bad
+
这个元素很难设计，需要一些复杂的技巧，有时还涉及到高级的CSS3的知识。
+
ugly
+
忘记使用CSS来设计这些元素吧。你最多能做一点点事情，还不能保证可以跨浏览器，而且在它们出现时永远不能做到完全的受控。
+
+ +

CSS表现力

+ +

除了文本框和按钮之外，使用其他表单小部件的主要问题是在许多情况下，CSS的表现不能满足设计复杂的小部件的要求。

+ +

HTML和CSS最新的发展扩展了CSS的表现力：

+ + + +

所有这一切是一个好的开端，但是有两个问题。首先，一些浏览器不需要实现CSS 2.1之上的特性。其次在设计像日期选择器这样的复杂的小部件时，这些实在不够好。

+ +

浏览器厂家在CSS表现力在表单方面的扩展做了一些尝试，在某些情况下，知道什么可用也挺不错的。

+ +
+

警告： 尽管 这些尝试很有趣，但它们是非标准的，也就是不可靠的。. 如果你使用它们(也许你并不常用)，你要自己承担风险，使用非标准的属性对于Web并不是好事 。

+
+ + + +

控制表单元素的外观

+ +

基于WebKit(Chrome, Safari)和 Gecko(Firefox)的浏览器提供更高级的HTML部件定制。它们也实现了跨平台，因此需要一种方式把原生小部件转换为用户可设置样式的小部件。

+ +

为此，它们使用了专有属性：{{cssxref("-webkit-appearance")}}或{{cssxref("-moz-appearance")}}。这些属性是非标准的，不应该使用。事实上，它们在WebKit 和Gecko中的表现也是不相同的。然而，有一个值很好用：none，用这个值，你（几乎完全）能控制一个已知小部件的样式。

+ +

因此，如果你在应用一个元素的样式时遇到麻烦，可以尝试使用那些专有属性。我们下面有一些例子，这个属性最成功的例子是WebKit浏览器中的搜索域的样式：

+ +
<form>
+    <input type="search">
+</form>
+ +
<style>
+input[type=search] {
+    border: 1px dotted #999;
+    border-radius: 0;
+
+    -webkit-appearance: none;
+}
+</style>
+ +

{{EmbedLiveSample("Controlling_the_appearance_of_form_elements", 250, 40)}}

+ +
+

注意：当我们谈及Web技术的时总是很难预测未来。扩展CSS表现力是很困难的，其他规范也做了一些探索性的工作，如Shadow DOM提供了一些观点。可完全设置样式的表单的问题还远未结束。

+
+ +

举例

+ +

复选框和单选按钮

+ +

独自设计复选框或单选按钮的样式是让人抓狂的。例如由于浏览器反应各不相同，在修改复选框和单选按钮的大小时，并不保证确实能改变它们。

+ +

一个简单的测试用例

+ +

让我们研究一下下面的测试用例：

+ +
<span><input type="checkbox"></span>
+ +
span {
+    display: inline-block;
+    background: red;
+}
+
+input[type=checkbox] {
+    width : 100px;
+    height: 100px;
+}
+ +

这里是不同的浏览器的处理方式：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
浏览器视图
Firefox 57 (Mac OSX)
Firefox 57 (Windows 10)
Chrome 63 (Mac OSX)
Chrome 63 (Windows 10)
Opera 49 (Mac OSX)
Internet Explorer 11 (Windows 10)
Edge 16 (Windows 10)
+ +

更复杂的例子

+ +

由于Opera和Internet Explorer没有像{{cssxref("-webkit-appearance")}}或{{cssxref("-moz-appearance")}}这样的特性，使用它们是不合适的。幸运的是，CSS有足够多的表现方式可以找到解决方法。让我们做一个很普通的例子：

+ +
<form>
+  <fieldset>
+    <p>
+      <input type="checkbox" id="first" name="fruit-1" value="cherry">
+      <label for="first">I like cherry</label>
+    </p>
+    <p>
+      <input type="checkbox" id="second" name="fruit-2" value="banana" disabled>
+      <label for="second">I can't like banana</label>
+    </p>
+    <p>
+      <input type="checkbox" id="third" name="fruit-3" value="strawberry">
+      <label for="third">I like strawberry</label>
+    </p>
+  </fieldset>
+</form>
+ +

带有一些基本的样式：

+ +
body {
+  font: 1em sans-serif;
+}
+
+form {
+  display: inline-block;
+
+  padding: 0;
+  margin : 0;
+}
+
+fieldset {
+  border : 1px solid #CCC;
+  border-radius: 5px;
+  margin : 0;
+  padding: 1em;
+}
+
+label {
+  cursor : pointer;
+}
+
+p {
+  margin : 0;
+}
+
+p+p {
+  margin : .5em 0 0;
+}
+ +
+

注：下面的内容（仅限样式化 checkbox 部分）与英文版出入极大，猜测已经是过时内容

+
+ +

现在，让我们设计一个定制复选框的样式

+ +

计划用自己的图像替换原生的复选框，首先需要准备复选框在所有状态下的图像，那些状态是：未选、已选、禁用不选、禁用已选。该图像将用作CSS精灵：

+ +

Check box CSS Sprite

+ +

一开始要隐藏初始复选框。可以简单的把它们从页面视图中拿开。这里要考虑两个重要的事情：

+ + + +
:root input[type=checkbox] {
+  /* original check box are push outside the viexport */
+  position: absolute;
+  left: -1000em;
+}
+ +

现在加上自己的图像就可以摆脱原来的复选框了，为此，要在初始的复选框后面加上{{HTMLElement("label")}}元素，并使用它的{{cssxref(":before")}}伪元素。因此在下面章节中，要使用selector属性来选择复选框，然后使用adjacent sibling selector来选择原有复选框后面的label。最后，访问{{cssxref(":before")}}伪元素来设计复选框显示定制样式。

+ +
:root input[type=checkbox] + label:before {
+  content: "";
+  display: inline-block;
+  width  : 16px;
+  height : 16px;
+  margin : 0 .5em 0 0;
+  background: url("https://developer.mozilla.org/files/4173/checkbox-sprite.png") no-repeat 0 0;
+
+/* The following is used to adjust the position of
+   the check boxes on the text baseline */
+
+  vertical-align: bottom;
+  position: relative;
+  bottom: 2px;
+}
+ +

在初始复选框上使用{{cssxref(":checked")}}和{{cssxref(":disabled")}}伪类来改变定制复选框的状态。因为使用了CSS精灵，我们需要做的只是修改背景的位置。

+ +
:root input[type=checkbox]:checked + label:before {
+  background-position: 0 -16px;
+}
+
+:root input[type=checkbox]:disabled + label:before {
+  background-position: 0 -32px;
+}
+
+:root input[type=checkbox]:checked:disabled + label:before {
+  background-position: 0 -48px;
+}
+ +

最后一件（但是很重要的）事情：当用户使用键盘从一个表单小部件导航到另一个表单小部件时，每个小部件都应该被显式聚焦。因为我们隐藏了初始的复选框，我们必须自己实现这个特性，让用户知道定制复选框在表单中的位置，下列的CSS实现了它们聚焦。

+ +
:root input[type=checkbox]:focus + label:before {
+  outline: 1px dotted black;
+}
+ +

你可以在线查看结果：

+ +

{{EmbedLiveSample("A_more_complex_example", 250, 130)}}

+ +

Dealing with the select nightmare

+ +

{{HTMLElement("select")}} 元素被认为是一个 "丑陋的" 组件，因为不可能保证它在跨平台时样式化的一致性。然而，有些事情是可能的。废话少说，让我们来看一个例子：

+ +
<select>
+  <option>Cherry</option>
+  <option>Banana</option>
+  <option>Strawberry</option>
+</select>
+ +
select {
+  width   : 80px;
+  padding : 10px;
+}
+
+option {
+  padding : 5px;
+  color   : red;
+}
+ +

下面的表格显示了在两种情况下不同浏览器的处理方式。头两列就是上面的例子。后面两列使用了其他的定制CSS，可以对小部件的外观进行更多的控制：

+ +
select, option {
+  -webkit-appearance : none; /* To gain control over the appearance on WebKit/Chromium */
+  -moz-appearance : none; /* To gain control over the appearance on Gecko */
+
+  /* To gain control over the appearance on and Trident (IE)
+     Note that it also works on Gecko and has partial effects on WebKit */
+  background : none;
+}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserRegular renderingTweaked rendering
closedopenclosedopen
Firefox 57 (Mac OSX)
Firefox 57 (Windows 10)
Chrome 63 (Mac OSX)
Chrome 63 (Windows 10)
Opera 49 (Mac OSX)
IE11 (Windows 10)
Edge 16 (Windows 10)
+ +

如你所见，计时使用了-*-appearance属性的帮助，任然有一些遗留的问题：

+ + + +

在我们的例子中，只使用了三个CSS属性，在考虑使用更多CSS属性时，可以想象是很混乱的。正如我们看到的，CSS始终不适合用来修改这些小部件的外观，但是仍然可以用来稍微做一些事情。如果愿意的话，可以演示一下在不同操作系统和浏览器之间的区别。

+ +

我们也可以帮助了解在下一章节中哪个属性更合适：Properties compatibility table for form widgets

+ +

走向更完美表单之路：有用的库和polyfills（腻子）

+ +

虽然对于复选框和单选按钮而言，CSS的表示方式足够丰富，但是对更高级的小部件来说差距仍然很大。即使可以用{{HTMLElement("select")}}元素作一些事情，但是对file小部件的样式完全没用。对于日期选择器也同样如此。

+ +

要实现对表单小部件的完全控制，你别无选择，只能选择依靠JavaScript。在文章How to build custom form widgets中，我们将看到具体的做法，其中还有一些非常有用的库：

+ + + +

下面的库不止应用于表单，他们在处理HTML表单时是非常有趣的：

+ + + +

记住，使用CSS和JavaScript是有副作用的。所以在选择使用那些库时，应该在脚本失败的情况下能回滚样式表。脚本失败的原因很多，尤其在手机应用中，因此你需要尽可能好的设计你的Web站点或应用。

+ +

相关链接

+ +

虽然HTML表单使用CSS仍有一些黑洞，但通常也有方法绕过它们。即使没有清楚的，通用的解决方案，但新式的浏览器也提供了新的可能性。目前最好的方法是更多的学习不同浏览器支持CSS的方式，并应用于HTML表单小部件。

+ +

在本指南的下一章节中，我们将探讨不同的HTML表单小部件怎样很好的支持更重要的CSS属性：Properties compatibility table for form widgets.

+ +

相关链接

+ + + +

{{PreviousMenuNext("Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms/Property_compatibility_table_for_form_widgets", "Learn/HTML/Forms")}}

+ +

在本单元中

+ + + +

+ +

diff --git a/files/zh-cn/learn/forms/basic_native_form_controls/index.html b/files/zh-cn/learn/forms/basic_native_form_controls/index.html new file mode 100644 index 0000000000..8ef67a2f7a --- /dev/null +++ b/files/zh-cn/learn/forms/basic_native_form_controls/index.html @@ -0,0 +1,683 @@ +--- +title: 原生表单部件 +slug: Learn/HTML/Forms/The_native_form_widgets +translation_of: Learn/Forms/Basic_native_form_controls +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
+ +

现在，我们将详细研究不同表单部件的功能，查看了哪些选项可用于收集不同类型的数据。这个指南有些详尽，涵盖了所有可用的原生表单小部件。

+ + + + + + + + + + + + +
预备知识:计算机基础知识和对于HTML的基本理解。
目标:要了解在浏览器中可以使用什么类型的原生表单小部件来收集数据，以及如何使用HTML实现它们。
+ +

这里我们将关注浏览器内置的表单部件，但是因为HTML表单仍然相当有限并且实现的特性在不同的浏览器中可能是相当不同的，web开发人员有时会建立自己的表单部件——关于这个的更多想法，参见本模块后面的如何构建自定义表单部件。

+ +
+

译者注：widget在本页面中被统一翻译为部件，但在其他地方可能也被译为组件。

+
+ +
+

注意：本文中讨论的大多数特性都在浏览器中得到了广泛的支持;我们会注意到例外的情况。如果您想要更准确的细节，您应该参考我们的HTML表单元素参考，特别是我们的广泛的 <input>类型参考。

+
+ +

通用属性

+ +

大部分用来定义表单小部件的元素都有一些他们自己的属性。然而，在所有表单元素中都有一组通用属性，它们可以对这些小部件进行控制。下面是这些通用属性的列表:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性名称默认值描述
autofocus(false)这个布尔属性允许您指定当页面加载时元素应该自动具有输入焦点，除非用户覆盖它，例如通过键入不同的控件。文档中只有一个与表单相关的元素可以指定这个属性。
disabled(false) +

这个布尔属性表示用户不能与元素交互。如果没有指定这个属性，元素将从包含它的元素继承设置，例如{{HTMLElement("fieldset")}};如果没有包含在设定了disabled属性的元素里，那么这个元素就是可用的。

+
form +

小部件与之相关联的表单元素。属性值必需是同个文档中的{{HTMLElement("form")}} 元素的 id属性。理论上，它允许您在{{HTMLElement("form")}}元素之外设置一个表单小部件。然而，在实践中，没有任何支持该特性的浏览器。

+
name元素的名称;这是跟表单数据一起提交的。
value元素的初始值。
+ +

文本输入框

+ +

文本输入框 {{htmlelement("input")}} 是最基本的表单小部件。 这是一种非常方便的方式，可以让用户输入任何类型的数据。但是，一些文本字段可以专门用于满足特定的需求。我们已经看到了几个简单的例子。

+ +
+

注意: HTML表单文本字段是简单的纯文本输入控件。 这意味着您不能使用它们执行富文本编辑(粗体、斜体等)。你遇到的所有富文本编辑器（rich text editors）都是使用HTML、CSS和JavaScript所创建的自定义小部件。

+
+ +

所有文本框都有一些通用规范：

+ + + +
+

注意：  {{htmlelement("input")}}元素是如此特别因为它几乎可以是任何东西。通过简单设置 type 属性，它可以彻底的改变，它用于创建大多数类型的表单小部件，包括单行文本字段、没有文本输入的控件、时间和日期控件和按钮。 然而，也有一些例外，比如用来多行输入的 {{htmlelement("textarea")}}。阅读这篇文章时，要注意这些。

+
+ +

单行文本框

+ +

使用{{htmlattrxref("type","input")}}属性值被设置为text 的{{HTMLElement("input")}}元素创建一个单行文本框（同样的，如果你不提供{{htmlattrxref("type","input")}}属性，text 是默认值）。在你指定的{{htmlattrxref("type","input")}}属性的值在浏览器中是未知的情况下（比如你指定 type="date"，但是浏览器不支持原生日期选择器），属性值text也是备用值。

+ +
+

注意： 你可以在Github上的 single-line-text-fields.html找到所有单行文本框类型。(你也可以直接看预览版)。

+
+ +

这是一个基本的单行文本框示例：

+ +
<input type="text" id="comment" name="comment" value="I'm a text field">
+ +

单行文本框只有一个真正的约束：如果您输入带有换行符的文本，浏览器会在发送数据之前删除这些换行符。

+ +

Screenshots of single line text fields on several platforms.

+ +

HTML5通过为{{htmlattrxref("type","input")}}属性增加特殊值增强了基本单行文本框。这些值仍然将{{HTMLElement("input")}}元素转换为单行文本框，但它们为字段添加了一些额外的约束和特性。

+ +

E-mail 地址框

+ +

该类型的框将 {{htmlattrxref("type","input")}}属性设置为  email 值：

+ +
<input type="email" id="email" name="email" multiple>
+ +

当使用 type时， 用户需要在框中输入有效的电子邮件地址；任何其他内容都会导致浏览器在提交表单时显示错误。注意，这是客户端错误验证，由浏览器执行：

+ +

An invalid email input showing the message Please enter an email address.

+ +

通过包括{{htmlattrxref("multiple","input")}}属性，它还可以让用户将多个电子邮件地址输入相同的输入(以逗号分隔)。

+ +

在一些设备上(特别是在移动设备上)，可能会出现一个不同的虚拟键盘，更适合输入电子邮件地址。

+ +
+

注意: 您可以在表单数据验证文中找到关于表单验证的更多信息。

+
+ +

密码框

+ +

通过设置{{htmlattrxref("type","input")}} 属性值为password来设置该类型框：

+ +
<input type="password" id="pwd" name="pwd">
+ +

它不会为输入的文本添加任何特殊的约束，但是它会模糊输入到字段中的值(例如，用点或小行星)，这样它就不能被其他人读取。

+ +

请记住，这只是一个用户界面特性;除非你安全地提交你的表单，否则它会以明文发送，这不利于安全——恶意的一方可能会截获你的数据，窃取你的密码、信用卡信息，或者你提交的其他任何东西。保护用户不受此影响的最佳方式是在安全连接上托管任何涉及表单的页面(例如:https://……地址)，使得数据在发送之前就已加密。

+ +

现代浏览器认识到在不安全的连接上发送表单数据所带来的安全影响，并且已经实现了警告，以阻止用户使用不安全的表单。有关Firefox实现的更多信息，请参见不安全的密码。

+ +

搜索框

+ +

通过设置 {{htmlattrxref("type","input")}}属性值为 search 来设置该类型框：

+ +
<input type="search" id="search" name="search">
+ +

文本框和搜索框之间的主要区别是浏览器的样式——通常，搜索框是渲染成圆角的，并且/可能给定一个“x”来清除输入的值。然而，还有另外一个值得注意的特性:它们的值可以被自动保存用来在同一站点上的多个页面上自动补全。

+ +

Screenshots of search fields on several platforms.

+ +

电话号码栏：

+ +

通过 {{htmlattrxref("type","input")}}属性的 tel 值设置该类型框：

+ +
<input type="tel" id="tel" name="tel">
+ +

由于世界范围内各种各样的电话号码格式，这种类型的字段不会对用户输入的值执行任何限制(包括字母，等等)。这主要是在语义上的区分，尽管在一些设备上(特别是在移动设备上)，可能会出现一个不同的虚拟键盘，更适合输入电话号码。

+ +

URL 栏

+ +

通过{{htmlattrxref("type","input")}}属性的url 值设置该类型框：

+ +
<input type="url" id="url" name="url">
+ +

它为字段添加了特殊的验证约束，如果输入无效的url，浏览器就会报告错误。

+ +
注意：URL格式良好并不一定意味着它引用了一个实际存在的位置。
+ +
+

注意：有特殊约束并出错了的输入框可以防止表单被发送；此外，还可以将它们设置为使错误更清晰。我们将在数据表单验证中详细讨论这个问题。

+
+ +

多行文本框

+ +

多行文本框专指使用 {{HTMLElement("textarea")}}元素，而不是使用{{HTMLElement("input")}} 元素。

+ +
<textarea cols="30" rows="10"></textarea>
+ +

textarea和常规的单行文本字段之间的主要区别是，允许用户输入包含硬换行符(即按回车)的文本。

+ +

Screenshots of multi-lines text fields on several platforms.

+ +
+

注意：你可以在Github上的multi-line-text-field.html看到本例（你也可以看预览版）。注意到在大多数浏览器中，文本区域在右下角有一个拖放操作，允许用户调整它的大小。这种调整能力可以通过使用CSS设置文本区域的{{cssxref("resize")}}性质为 none 来关闭。

+
+ +

{{htmlelement("textarea")}} 还接受了一些额外的属性，以控制它在几行代码中呈现的效果 (除此以外还有其他几个)：

+ +

{{HTMLElement("textarea")}} 元素属性

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
属性名默认值描述
{{htmlattrxref("cols","textarea")}}20文本控件的可见宽度，平均字符宽度。
{{htmlattrxref("rows","textarea")}}控制的可见文本行数。
{{htmlattrxref("wrap","textarea")}}soft表示控件是如何包装文本的。可能的值：hard 或 soft
+ +

注意，{{HTMLElement("textarea")}}元素与{{HTMLElement("input")}}元素的编写略有不同。{{HTMLElement("input")}}元素是一个空元素，这意味着它不能包含任何子元素。另一方面，{{HTMLElement("textarea")}}元素是一个常规元素，可以包含文本内容的子元素。

+ +

这里有两个关键点需要注意：

+ + + +

下拉内容

+ +

下拉窗口小部件是一种简单的方法，可以让用户选择众多选项中的一个，而不需要占用用户界面的太多空间。HTML有两种类型的下拉内容:select box和autocomplete box。在这两种情况下，交互都是相同的——一旦控件被激活，浏览器就会显示用户可以选择的值列表。

+ +
+

注意：你可以在Github上的drop-down-content.html看到本例（你也可以看预览版）。

+
+ +

选择框

+ +

一个选择框是用{{HTMLElement("select")}}元素创建的，其中有一个或多个{{HTMLElement("option")}}元素作为子元素，每个元素都指定了其中一个可能的值。

+ +
<select id="simple" name="simple">
+  <option>Banana</option>
+  <option>Cherry</option>
+  <option>Lemon</option>
+</select>
+ +

如果需要，可以使用{{htmlattrxref("selected","option")}}属性在所需的{{HTMLElement("option")}}元素上设置选择框的默认值---在页面加载时会默认选择该选项。{{HTMLElement("option")}}元素也可以嵌套在{{HTMLElement("optgroup")}}元素中，以创建视觉关联的组值：

+ +
<select id="groups" name="groups">
+  <optgroup label="fruits">
+    <option>Banana</option>
+    <option selected>Cherry</option>
+    <option>Lemon</option>
+  </optgroup>
+  <optgroup label="vegetables">
+    <option>Carrot</option>
+    <option>Eggplant</option>
+    <option>Potato</option>
+  </optgroup>
+</select>
+ +

Screenshots of single line select box on several platforms.

+ +

如果一个{{HTMLElement("option")}}元素设置了value属性，那么当提交表单时该属性的值就会被发送。如果忽略了value属性，则使用{{HTMLElement("option")}}元素的内容作为选择框的值。

+ +

在{{HTMLElement("optgroup")}}元素中，label属性显示在值之前，但即使它看起来有点像一个选项，它也不是可选的。

+ +

多选选择框

+ +

默认情况下，选择框只允许用户选择一个值。通过将{{htmlattrxref("multiple","select")}}属性添加到{{HTMLElement("select")}}元素，您可以允许用户通过操作系统提供的默认机制来选择几个值。 (如， 同时按下 Cmd/Ctrl 并点击多个值).

+ +

注意：在多个选项选择框的情况下，选择框不再显示值为下拉内容——相反，它们都显示在一个列表中。

+ +
<select multiple id="multi" name="multi">
+  <option>Banana</option>
+  <option>Cherry</option>
+  <option>Lemon</option>
+</select>
+ +

Screenshots of multi-lines select box on several platforms.

+ +
注意：所有支持 {{HTMLElement("select")}} 元素的浏览器也支持 {{htmlattrxref("multiple","select")}} 。
+ +

自动补全输入框

+ +

您可以使用{{HTMLElement("datalist")}}元素来为表单小部件提供建议的、自动完成的值，并使用一些{{HTMLElement("option")}}子元素来指定要显示的值。

+ +

然后使用{{htmlattrxref("list","input")}}属性将数据列表绑定到一个文本框(通常是一个 <input> 元素)。

+ +

一旦数据列表与表单小部件相关联，它的选项用于自动完成用户输入的文本;通常，这是作为一个下拉框提供给用户的，匹配在输入框中输入了的内容。

+ +
<label for="myFruit">What's your favorite fruit?</label>
+<input type="text" name="myFruit" id="myFruit" list="mySuggestion">
+<datalist id="mySuggestion">
+  <option>Apple</option>
+  <option>Banana</option>
+  <option>Blackberry</option>
+  <option>Blueberry</option>
+  <option>Lemon</option>
+  <option>Lychee</option>
+  <option>Peach</option>
+  <option>Pear</option>
+</datalist>
+ +
注意： 根据HTML规范，{{htmlattrxref("list","input")}} 属性和{{HTMLElement("datalist")}}元素元素可以用于任何需要用户输入的小部件。但是，除了文本控件外(例如颜色或日期)，还不清楚它会如何工作，不同的浏览器在不同的情况下会有不同的表现。正因为如此，除了文本字段以外，要小心使用这个特性。
+ +
Screenshots of datalist on several platforms.
+ +
+ +

数据列表支持和后备

+ +

{{HTMLElement("datalist")}}元素是HTML表单的最新补充，因此浏览器的支持比我们之前看到的要少一些。最值得注意的是，它在版本小于10的IE中不受支持，同时在版本小于12的Safari中不受支持。

+ +

为了处理这个问题，这里有一个小技巧，可以为这些浏览器提供一个不错的备用：

+ +
<label for="myFruit">What is your favorite fruit? (With fallback)</label>
+<input type="text" id="myFruit" name="fruit" list="fruitList">
+
+<datalist id="fruitList">
+  <label for="suggestion">or pick a fruit</label>
+  <select id="suggestion" name="altFruit">
+    <option>Apple</option>
+    <option>Banana</option>
+    <option>Blackberry</option>
+    <option>Blueberry</option>
+    <option>Lemon</option>
+    <option>Lychee</option>
+    <option>Peach</option>
+    <option>Pear</option>
+  </select>
+</datalist>
+
+ +

支持{{HTMLElement("datalist")}}元素的浏览器将忽略所有不是{{HTMLElement("option")}}元素的元素，并按照预期工作。另一方面，不支持{{HTMLElement("datalist")}}元素的浏览器将显示标签和选择框。当然，还有其他方法可以处理对{{HTMLElement("datalist")}}元素支持的不足，但这是最简单的(其他方法往往需要JavaScript)。

+ + + + + + + + + + + + +
Safari 6Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18Screenshot of the datalist element with Firefox on Mac OS
+ +

可选中项

+ +

可选中项是可以通过单击它们来更改状态的小部件。有两种可选中项：复选框和单选按钮。两者都使用{{htmlattrxref("checked","input")}}属性，以指示该部件的默认状态: "选中"或"未选中"。

+ +

值得注意的是，这些小部件与其他表单小部件不一样。对于大多数表单部件，一旦表单提交，所有具有{{htmlattrxref("name","input")}}属性的小部件都会被发送，即使没有任何值被填。对于可选中项，只有在勾选时才发送它们的值。如果他们没有被勾选，就不会发送任何东西，甚至连他们的名字也没有。

+ +
+

注意: 你可以在Github上看到 checkable-items.html (你也可以看预览版)。

+
+ +

为了获得最大的可用性和可访问性，建议您在{{htmlelement("fieldset")}}中包围每个相关项目的列表，并使用{{htmlelement("legend")}}提供对列表的全面描述。每个单独的{{htmlelement("label")}}/{{htmlelement("input")}}元素都应该包含在它自己的列表项中(或者类似的)。正如在示例中显示的。

+ +

您还需要为这些类型的输入提供value属性，如果您想让它们具有意义——如果没有提供任何值，则复选框和单选按钮被赋予一个 on值。

+ +

复选框

+ +

使用{{htmlattrxref("type","input")}}属性值为checkbox的 {{HTMLElement("input")}}元素来创建一个复选框。

+ +
<input type="checkbox" checked id="carrots" name="carrots" value="carrots">
+
+ +

包含checked属性使复选框在页面加载时自动被选中。

+ +

Screenshots of check boxes on several platforms.

+ +

单选按钮

+ +

使用{{htmlattrxref("type","input")}}属性值为radio的 {{HTMLElement("input")}}元素来创建一个单选按钮。

+ +
<input type="radio" checked id="soup" name="meal">
+ +

几个单选按钮可以连接在一起。如果它们的{{htmlattrxref("name","input")}}属性共享相同的值，那么它们将被认为属于同一组的按钮。同一组中只有一个按钮可以同时被选；这意味着当其中一个被选中时，所有其他的都将自动未选中。如果没有选中任何一个，那么整个单选按钮池就被认为处于未知状态，并且没有以表单的形式发送任何值。

+ +
<fieldset>
+  <legend>What is your favorite meal?</legend>
+  <ul>
+    <li>
+      <label for="soup">Soup</label>
+      <input type="radio" checked id="soup" name="meal" value="soup">
+    </li>
+    <li>
+      <label for="curry">Curry</label>
+      <input type="radio" id="curry" name="meal" value="curry">
+    </li>
+    <li>
+      <label for="pizza">Pizza</label>
+      <input type="radio" id="pizza" name="meal" value="pizza">
+    </li>
+  </ul>
+</fieldset>
+ +

Screenshots of radio buttons on several platforms.

+ +

按钮

+ +

在HTML表单中，有三种按钮：

+ +
+
Submit
+
将表单数据发送到服务器。对于{{HTMLElement("button")}} 元素, 省略 type 属性 (或是一个无效的 type 值) 的结果就是一个提交按钮.
+
Reset
+
将所有表单小部件重新设置为它们的默认值。
+
Anonymous
+
没有自动生效的按钮，但是可以使用JavaScript代码进行定制。
+
+ +
+

注意: 你可以在Github上看到button-examples.html (你也可以看预览版)。

+
+ +

使用 {{HTMLElement("button")}}元素或者{{HTMLElement("input")}}元素来创建一个按钮。{{htmlattrxref("type","input")}}属性的值指定显示什么类型的按钮。

+ +

submit

+ +
<button type="submit">
+    This a <br><strong>submit button</strong>
+</button>
+
+<input type="submit" value="This is a submit button">
+ +

reset

+ +
<button type="reset">
+    This a <br><strong>reset button</strong>
+</button>
+
+<input type="reset" value="This is a reset button">
+ +

button

+ +
<button type="button">
+    This an <br><strong>anonymous button</strong>
+</button>
+
+<input type="button" value="This is an anonymous button">
+ +

不管您使用的是{{HTMLElement("button")}}元素还是{{HTMLElement("input")}}元素，按钮的行为都是一样的。然而，有一些显著的不同之处：

+ + + +

Screenshots of buttons on several platforms.

+ +

从技术上讲，使用{{HTMLElement("button")}}元素或{{HTMLElement("input")}}元素定义的按钮几乎没有区别。唯一值得注意的区别是按钮本身的标签。在{{HTMLElement("input")}}元素中，标签只能是字符数据，而在{{HTMLElement("button")}}元素中，标签可以是HTML，因此可以相应地进行样式化。

+ +

高级表单部件

+ +

在本节中，我们将介绍那些让用户输入复杂或不寻常数据的小部件。这包括精确的或近似的数字，日期和时间，或颜色。

+ +
+

注意: 你可以在Github上看到advanced-examples.html (你也可以看预览版)。

+
+ +

数字

+ +

用于数字的小部件是用{{htmlattrxref("type","input")}}属性设置为number{{HTMLElement("input")}}的元素创建的。这个控件看起来像一个文本框，但是只允许浮点数，并且通常提供一些按钮来增加或减少小部件的值。

+ +

也可以：

+ + + +

例子

+ +
<input type="number" name="age" id="age" min="1" max="10" step="2">
+ +

这将创建一个数字小部件，其值被限制为1到10之间的任何值，而其增加和减少按钮的步进值将更改为2。

+ +

在10以下的Internet Explorer版本中不支持number 输入。

+ +

滑块

+ +

另一种选择数字的方法是使用滑块。从视觉上讲，滑块没有文本字段准确，因此它们被用来选择一个确切值并不重要的数字。

+ +

滑块是通过把{{HTMLElement("input")}}元素的{{htmlattrxref("type","input")}}属性值设置为range来创建的。正确配置滑块是很重要的；为了达到这个目的，我们强烈建议您设置{{htmlattrxref("min","input")}}、{{htmlattrxref("max","input")}}和{{htmlattrxref("step","input")}}属性。

+ +

例子

+ +
<input type="range" name="beans" id="beans" min="0" max="500" step="10">
+ +

这个例子创建了一个滑块，它可能的值在0到500之间，而它的递增/递减按钮以+10和-10来改变值。

+ +

滑块的一个问题是，它们不提供任何形式的视觉反馈，以了解当前的值是什么。您需要使用JavaScript来添加这一点，但这相对来说比较容易。在本例中，我们添加了一个空的{{htmlelement("span")}}元素，其中我们将写入滑块的当前值，并随着更改实时更新它。

+ +
<label for="beans">How many beans can you eat?</label>
+<input type="range" name="beans" id="beans" min="0" max="500" step="10">
+<span class="beancount"></span>
+ +

可以使用一些简单的JavaScript实现

+ +
var beans = document.querySelector('#beans');
+var count = document.querySelector('.beancount');
+
+count.textContent = beans.value;
+
+beans.oninput = function() {
+  count.textContent = beans.value;
+}
+ +

这里我们将对范围输入值和span的引用存储在两个变量里，然后我们立即将span的textContent设置为输入的当前value。最后，我们设置了一个oninput事件处理程序，以便每次移动范围滑块时，都会将span textContent更新为新的输入值。

+ +

在10以下的Internet Explorer版本中不支持range 。

+ +

日期时间选择器

+ +

对于web开发人员来说，收集日期和时间值一直是一场噩梦。HTML5通过提供一种特殊的控制来处理这种特殊的数据，从而带来了一些增强。

+ +

使用{{HTMLElement("input")}}元素和一个适当的值的{{htmlattrxref("type","input")}}属性来创建日期和时间控制，这取决于您是否希望收集日期、时间或两者都。

+ +

本地时间

+ +

这将创建一个小部件来显示和选择一个日期，但是没有任何特定的时区信息。

+ +
<input type="datetime-local" name="datetime" id="datetime">
+ +

月

+ +

这就创建了一个小部件来显示和挑选一个月。

+ +
<input type="month" name="month" id="month">
+ +

时间

+ +

这将创建一个小部件来显示并选择一个时间值。

+ +
<input type="time" name="time" id="time">
+ +

星期

+ +

这将创建一个小部件来显示并挑选一个星期号和它的年份。

+ +
<input type="week" name="week" id="week">
+ +

所有日期和时间控制都可以使用{{htmlattrxref("min","input")}}和{{htmlattrxref("max","input")}}属性来约束。

+ +
<label for="myDate">When are you available this summer?</label>
+<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">
+ +

警告——日期和时间窗口小部件仍然很不受支持。目前，Chrome、Edge和Opera都支持它们，但IE浏览器没有支持，Firefox和Safari对这些都没有太大的支持。

+ +

拾色器

+ +

颜色总是有点难处理。有很多方式来表达它们:RGB值(十进制或十六进制)、HSL值、关键字等等。颜色小部件允许用户在文本和可视的方式中选择颜色。

+ +

一个颜色小部件是使用{{htmlattrxref("type","input")}}属性设置为值color{{HTMLElement("input")}}的元素创建的。

+ +
<input type="color" name="color" id="color">
+ +

警告——并不是所有浏览器都支持拾色器。IE中没有支持，Safari目前也不支持它。其他主要的浏览器都支持它。

+ +

其他小部件

+ +

还有一些其他的小部件由于它们非常特殊的行为而不能很容易地分类，但是它们仍然非常有用。

+ +
+

注意: 你可以在Github上看到other-examples.html(你也可以看预览版)。

+
+ +

文件选择器

+ +

HTML表单能够将文件发送到服务器；在发送和检索表单数据的文章中详细描述了这个特定的操作。文件选择器小部件是用户如何选择一个或多个文件来发送的。

+ +

要创建一个文件选择器小部件，您可以使用{{HTMLElement("input")}}元素，将它的{{htmlattrxref("type","input")}}属性设置为file。被接受的文件类型可以使用{{htmlattrxref("accept","input")}}属性来约束。此外，如果您想让用户选择多个文件，那么可以通过添加{{htmlattrxref("multiple","input")}}属性来实现。

+ +

例子

+ +

在本例中，创建一个文件选择器，请求图形图像文件。在本例中，允许用户选择多个文件。

+ +
<input type="file" name="file" id="file" accept="image/*" multiple>
+ +

隐藏内容

+ +

有时候，由于为了方便技术原因，有些数据是用表单发送的，但不显示给用户。要做到这一点，您可以在表单中添加一个不可见的元素。要做到这一点，需要使用{{HTMLElement("input")}}将它的{{htmlattrxref("type","input")}}属性设置为hidden值。

+ +

如果您创建了这样一个元素，就需要设置它的name和value属性：

+ +
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
+ +

图像按钮

+ +

图像按钮控件是一个与{{HTMLElement("img")}}元素完全相同的元素，除了当用户点击它时，它的行为就像一个提交按钮(见上面)。

+ +

图像按钮是使用{{htmlattrxref("type","input")}}属性值设置为image{{HTMLElement("input")}}的元素创建的。这个元素支持与{{HTMLElement("img")}}元素相同的属性，和其他表单按钮支持的所有属性。

+ +
<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
+ +

如果使用图像按钮来提交表单，这个小部件不会提交它的值；相反，提交的是在图像上单击处的X和Y坐标(坐标是相对于图像的，这意味着图像的左上角表示坐标0，0)，坐标被发送为两个键/值对：

+ + + +

例如，当您点击这个小部件的图像时，您将被发送到一个URL，如下所显示的

+ +
http://foo.com?pos.x=123&pos.y=456
+ +

这是构建“热图”的一种非常方便的方式。如何发送和检索这些值在发送和检索表单数据文章中详细说明。

+ +

仪表和进度条

+ +

仪表和进度条是数值的可视化表示。

+ +

进度条

+ +

一个进度条表示一个值，它会随着时间的变化而变化到最大的值，这个值由{{htmlattrxref("max","progress")}}属性指定。这样的一个bar是使用{{ HTMLElement("progress")}}元素创建的。

+ +
<progress max="100" value="75">75/100</progress>
+ +

这是为了实现任何需要进度报告的内容，例如下载的总文件的百分比，或者问卷中填写的问题的数量。

+ +

{{HTMLElement("progress")}}元素中的内容用于不支持该元素的浏览器的回退，以及辅助技术对其朗读。

+ +

仪表

+ +

一个仪表表示一个固定值，这个值由一个{{htmlattrxref("min","meter")}}和一个{{htmlattrxref("max","meter")}}值所界定。这个值是作为一个条形显示的，并且为了知道这个工具条是什么样子的，我们将这个值与其他一些设置值进行比较

+ + + +

所有实现{{HTMLElement("meter")}}元素的浏览器都使用这些值来改变米尺的颜色。

+ + + +

这样的一个工具栏是使用{{HTMLElement("meter")}}元素创建的。这是用于实现任何类型的仪表，例如一个显示磁盘上使用的总空间的条，当它开始满时，它会变成红色。

+ +
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
+ +

{{HTMLElement("meter")}}元素中的内容是不支持该元素的浏览器的回退，以及辅助技术对其发出的声音。

+ +

对进度条和仪表的支持是相当不错的，在Internet Explorer中没有支持，但是其他浏览器都可以很好的支持它。

+ +

总结

+ +

正如您在上面看到的，有许多不同类型的可用表单元素——您不需要一次性记住所有细节，可以随时返回本文查看详细信息。

+ +

另见

+ +

要深入了解不同的表单小部件，您需要了解一些有用的外部资源:

+ + + +

{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

diff --git a/files/zh-cn/learn/forms/form_validation/index.html b/files/zh-cn/learn/forms/form_validation/index.html new file mode 100644 index 0000000000..62758a26e6 --- /dev/null +++ b/files/zh-cn/learn/forms/form_validation/index.html @@ -0,0 +1,874 @@ +--- +title: 表单数据校验 +slug: Learn/HTML/Forms/Data_form_validation +tags: + - HTML +translation_of: Learn/Forms/Form_validation +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}

+ +

表单校验帮助我们确保用户以正确格式填写表单数据，确保提交的数据能使我们的应用程序正常工作。本文将告诉您需要了解的有关表单校验的内容。

+ + + + + + + + + + + + +
预备知识：计算机基础能力，对 HTML、CSS 和 JavaScript 有一定的理解。
目标：理解表单校验是什么，为什么它很重要，以及如何实现它。
+ +

什么是表单数据校验？

+ +

访问任何一个带注册表单的网站，你都会发现，当你提交了没有输入符合预期格式的信息的表单时，注册页面都会给你一个反馈，这些信息可能看起来像下面这样的：

+ + + +

这就是表单校验 —— 当你向 Web 应用输入数据时，应用会验证你输入的数据是否是正确的。如果验证通过，应用允许提交这些数据到服务器并储存到数据库中（通常情况下），如果验证未通过，则 Web 应用会提示你有错误的数据，并且一般都会明确的告诉你错误发生在哪里。表单校验可以通过许多不同的方式实现。

+ +
+

译者注：下面一段在英文原文中已经删除

+
+ +

(事实上，没有人愿意填写表单 —— 很多证据表明，用户对填写表单这件事情都感到很烦恼，如果他们在填写表单的过程中遇到一些自己无法理解的问题，通常都会导致他们直接离开你的 Web 应用，简而言之，表单是一个很烦人的东西。)

+ +

我们希望把填写表单变的越简单越好。那么，为什么我们还坚持进行表单的数据校验呢？这有三个最主要的原因：

+ + + +
+

警告： 永远不要相信从客户端传递到服务器的数据。 即使您的表单正确验证并防止输入格式错误，恶意用户仍然可以更改网络请求。

+
+ +

不同类型的表单数据校验

+ +

在 Web 中，你可能会遇见各种不同的表单校验：

+ + + +

在真实的项目开发过程中，开发者一般都倾向于使用客户端校验与服务器端校验的组合校验方式以更好的保证数据的正确性与安全性。

+ +

使用内置表单数据校验

+ +

HTML5 一个特别有用的新功能就是，可以在不写一行脚本代码的情况下，即对用户的输入进行数据校验，这都是通过表单元素的校验属性实现的，这些属性可以让你定义一些规则，用于限定用户的输入，比如某个输入框是否必须输入，或者某个输入框的字符串的最小最大长度限制，或者某个输入框必须输入一个数字、邮箱地址等；还有数据必须匹配的模式。如果表单中输入的数据都符合这些限定规则，那么表示这个表单校验通过，否则则认为校验未通过。

+ +

当一个元素校验通过时：

+ + + +

如果一个元素未校验通过：

+ + + +

input 元素的校验约束 — starting simple

+ +

在这一节，我们将会看到一些用于{{HTMLElement("input")}}元素校验的HTML5的特性。

+ +

让我们用一个简单的例子开始 — 一个可以让你从香蕉或樱桃中选择你最喜欢的水果的input。 这个包含了一个简单的文本{{HTMLElement("input")}} 和一个与之匹配的label，还有一个 submit {{htmlelement("button")}}。你可以在GitHub fruit-start.html找到源码，在线例子如下:

+ + + +

{{EmbedLiveSample("Hidden_code", "100%", 50)}}

+ +

开始之前，先拷贝一份 fruit-start.html 放在你硬盘上的新目录里。

+ +

required 属性

+ +

最简单的HTML5校验功能是 {{htmlattrxref("required", "input")}}属性 — 如果要使输入成为必需的，则可以使用此属性标记元素。 当设置此属性时，如果输入为空，该表单将不会提交（并将显示错误消息），输入也将被视为无效。

+ +

添加一个 required 属性到你的 input 元素, 如下所示:

+ +
<form>
+  <label for="choose">Would you prefer a banana or cherry?</label>
+  <input id="choose" name="i_like" required>
+  <button>Submit</button>
+</form>
+ +

同时注意在示例文件中包含的 CSS :

+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}
+ +

以上样式效果为：在校验失败时 输入框会有一个亮红色的虚线边框, 在校验通过时会有一个更微妙的黑色边框。在以下示例中尝试新的行为：

+ +

{{EmbedLiveSample("required_属性", "100%", 50)}}

+ +

使用正则表达式校验

+ +

另一个常用的校验功能是 {{htmlattrxref("pattern","input")}} 属性, 以 Regular Expression 作为 value 值. 正则表达式 (regex) 是一个可以用来匹配文本字符串中字符的组合的模式，所以它们是理想的表单校验器，也可以支持 JavaScript 中许多其它的用途。

+ +

正则表达式相当复杂，我们不打算在本文中详尽地教你。

+ +

下面是一些例子，让你对它们的工作原理有个基本的了解：

+ + + +

你也可以在这些表达式中使用数字和其他字符, 例如:

+ + + +

你可以任意地组合这些，你可以任意指定不同的部分:

+ + + +

不管怎么说, 让我们来实现这些例子 — 更新你的html文档表单增加一个 pattern 属性, 如下:

+ +
<form>
+  <label for="choose">Would you prefer a banana or a cherry?</label>
+  <input id="choose" name="i_like" required pattern="banana|cherry">
+  <button>Submit</button>
+</form>
+ + + +

{{EmbedLiveSample("使用正则表达式校验", "100%", 50)}}

+ +

这个例子中, 该 {{HTMLElement("input")}} 元素接受两个值中的一个: 字符串 "banana" 或者字符串"cherry".

+ +

在这个基础上, 尝试把pattern 属性内部的表达式改变成上面的几个例子, 然后看看这些表达式如何影响您可以输入的值以使输入值有效. 尝试写一些你自己设计的,看看它如何工作。尽量让他们与水果有关这样你的例子才会有意义.

+ +
+

注意: 一些 {{HTMLElement("input")}} 元素类型不需要{{htmlattrxref("pattern","input")}} 属性进行校验. 指定特定 email 类型 就会使用匹配电子邮件格式的正则表达式来校验(如果有 {{htmlattrxref("multiple","input")}} 属性请用逗号来分割多个邮箱). 进一步来说, 字段 url 类型则会自动校验输入的是否为一个合法的链接.

+
+ +
+

注意: 该 {{HTMLElement("textarea")}} 元素不支持{{htmlattrxref("pattern","input")}} 属性.

+
+ +

限制输入的长度

+ +

所有文本框 ({{HTMLElement("input")}} 或 {{HTMLElement("textarea")}}) 都可以使用{{htmlattrxref("minlength","input")}} 和 {{htmlattrxref("maxlength","input")}} 属性来限制长度. 如果输入的字段长度小于 {{htmlattrxref("minlength","input")}} 的值或大于 {{htmlattrxref("maxlength","input")}} 值则无效. 浏览器通常不会让用户在文本字段中键入比预期更长的值，不过更精细的设置总归是更好的。

+ +

在数字条目中 (i.e. <input type="number">), 该 {{htmlattrxref("min","input")}} 和 {{htmlattrxref("max","input")}} 属性同样提供校验约束.如果字段的值小于{{htmlattrxref("min","input")}} 属性的值或大于 {{htmlattrxref("max","input")}} 属性的值,该字段则无效.

+ +

让我来看看另外一个例子. 创建一个 fruit-start.html 文件副本.

+ +

现在删除 <body> 元素中的内容, 替换成下面的代码:

+ +
<form>
+  <div>
+    <label for="choose">Would you prefer a banana or a cherry?</label>
+    <input id="choose" name="i_like" required minlength="6" maxlength="6">
+  </div>
+  <div>
+    <label for="number">How many would you like?</label>
+    <input type="number" id="number" name="amount" value="1" min="1" max="10">
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+ + + + + +

这里是运行的例子:

+ +

{{EmbedLiveSample("限制输入的长度", "100%", 70)}}

+ +
+

注意: <input type="number"> (或者其他类型, 像 range) 也可以获取到一个{{htmlattrxref("step", "input")}} 属性, 指定了值在增减过程固定改变的值 (如向上增加和向下减少的按钮).

+
+ +

完整的例子

+ +

这里就是一个完整的展示 HTML 中使用校验属性的例子:

+ +
<form>
+  <p>
+    <fieldset>
+      <legend>Title<abbr title="This field is mandatory">*</abbr></legend>
+      <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">Mr.</label>
+      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Ms.</label>
+    </fieldset>
+  </p>
+  <p>
+    <label for="n1">How old are you?</label>
+    <!-- 这里的pattern属性可以用作不支持number类input浏览器的备用方法
+         请注意当与数字输入框一起使用时，支持pattern属性的浏览器会使它沉默失效。
+         它仅仅是在这里用作备用 -->
+    <input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+">
+  </p>
+  <p>
+    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory">*</abbr></label>
+    <input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
+    <datalist id="l1">
+      <option>Banana</option>
+      <option>Cherry</option>
+      <option>Apple</option>
+      <option>Strawberry</option>
+      <option>Lemon</option>
+      <option>Orange</option>
+    </datalist>
+  </p>
+  <p>
+    <label for="t2">What's your e-mail?</label>
+    <input type="email" id="t2" name="email">
+  </p>
+  <p>
+    <label for="t3">Leave a short message</label>
+    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
+  </p>
+  <p>
+    <button>Submit</button>
+  </p>
+</form>
+ +
body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+  margin: 0;
+  padding: 0 5px;
+}
+
+p > label {
+  display: block;
+}
+
+input[type=text],
+input[type=email],
+input[type=number],
+textarea,
+fieldset {
+/* 需要在基于WebKit的浏览器上对表单元素进行恰当的样式设置 */
+  -webkit-appearance: none;
+
+  width : 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+input:invalid {
+  box-shadow: 0 0 5px 1px red;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+ +

{{EmbedLiveSample("完整的例子", "100%", 420)}}

+ +

自定义错误信息

+ +

正如我们上面所看到的例子, 每次我们提交无效的表单数据时, 浏览器总会显示错误信息. 但是显示的信息取决于你所使用的浏览器.

+ +

这些自动生成的错误有两个缺点:

+ + + + + + + + + + + + + + + + + + + + + + + + + +
在英文页面上的法语反馈信息版本
浏览器渲染
Firefox 17 (Windows 7)Example of an error message with Firefox in French on an English page
Chrome 22 (Windows 7)Example of an error message with Chrome in French on an English page
Opera 12.10 (Mac OSX)Example of an error message with Opera in French on an English page
+ +

要自定义这些消息的外观和文本, 你必须使用 JavaScript; 不能使用 HTML 和 CSS 来改变.

+ +

HTML5 提供 constraint validation API 来检测和自定义表单元素的状态. 除此之外,他可以改变错误信息的文本. 让我们快速的看一个例子:

+ +
<form>
+  <label for="mail">I would like you to provide me an e-mail</label>
+  <input type="email" id="mail" name="mail">
+  <button>Submit</button>
+</form>
+ +

在JavaScript 中, 你调用 setCustomValidity() 方法:

+ +
var email = document.getElementById("mail");
+
+email.addEventListener("input", function (event) {
+  if (email.validity.typeMismatch) {
+    email.setCustomValidity("I expect an e-mail, darling!");
+  } else {
+    email.setCustomValidity("");
+  }
+});
+ +

{{EmbedLiveSample("自定义错误信息", "100%", 50)}}

+ +

 使用 JavaScript校验表单

+ +

如果你想控制原生错误信息的界面外观，或者你想处理不支持HTML内置表单校验的浏览器，则必须使用 Javascript。

+ +

约束校验的 API

+ +

越来越多的浏览器支持限制校验API，并且这逐渐变得可靠。这些 API 由成组的方法和属性构成，可在特定的表单元素接口上调用：

+ + + +

约束校验的 API 及属性

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性描述
validationMessage一个本地化消息，描述元素不满足校验条件时（如果有的话）的文本信息。如果元素无需校验（willValidate 为 false），或元素的值满足校验条件时，为空字符串。
validity一个 {{domxref("ValidityState")}} 对象，描述元素的验证状态。详见有关可能的验证状态的文章。
validity.customError如果元素设置了自定义错误，返回 true ；否则返回false。
validity.patternMismatch如果元素的值不匹配所设置的正则表达式，返回 true，否则返回 false。
+
+ 当此属性为 true 时，元素将命中  {{cssxref(":invalid")}} CSS 伪类。
validity.rangeOverflow如果元素的值高于所设置的最大值，返回 true，否则返回 false。
+
+ 当此属性为 true 时，元素将命中  {{cssxref(":invalid")}} CSS 伪类。
validity.rangeUnderflow如果元素的值低于所设置的最小值，返回 true，否则返回 false。
+
+ 当此属性为 true 时，元素将命中  {{cssxref(":invalid")}} CSS 伪类。
validity.stepMismatch如果元素的值不符合 step 属性的规则，返回 true，否则返回 false。
+
+ 当此属性为 true 时，元素将命中  {{cssxref(":invalid")}} CSS 伪类。
validity.tooLong如果元素的值超过所设置的最大长度，返回 true，否则返回 false。
+
+ 当此属性为 true 时，元素将命中  {{cssxref(":invalid")}} CSS 伪类。
validity.typeMismatch如果元素的值出现语法错误，返回 true，否则返回 false。
+
+ 当此属性为 true 时，元素将命中  {{cssxref(":invalid")}} CSS 伪类。
validity.valid如果元素的值不存在校验问题，返回 true，否则返回 false。
+
+ 当此属性为 true 时，元素将命中  {{cssxref(":valid")}} CSS 伪类，否则命中 {{cssxref(":invalid")}} CSS 伪类。
validity.valueMissing如果元素设置了 required 属性且值为空，返回 true，否则返回 false。
+
+ 当此属性为 true 时，元素将命中  {{cssxref(":invalid")}} CSS 伪类。
willValidate如果元素在表单提交时将被校验，返回 true，否则返回 false。
+ +

约束校验 API 的方法

+ + + + + + + + + + + + + + + + + + + + + + +
方法描述
checkValidity()如果元素的值不存在校验问题，返回 true，否则返回 false。如果元素校验失败，此方法会触发{{event("invalid")}} 事件。
{{domxref("HTMLFormElement.reportValidity()")}}如果元素或它的子元素控件符合校验的限制，返回 true . 当返回为 false 时, 对每个无效元素可撤销 {{event("invalid")}} 事件会被唤起并且校验错误会报告给用户 。
+

setCustomValidity(message)

+ 		为元素添加一个自定义的错误消息；如果设置了自定义错误消息，该元素被认为是无效的，则显示指定的错误。这允许你使用 JavaScript 代码来建立校验失败，而不是用标准约束校验 API 所提供的。这些自定义信息将在向用户报告错误时显示。
+
+ 如果参数为空，则清空自定义错误。
+ +

对于旧版浏览器，可以使用 polyfill（例如 Hyperform），来弥补其对约束校验 API 支持的不足。既然你已经使用 JavaScript，在您的网站或 Web 应用程序的设计和实现中使用 polyfill 并不是累赘。

+ +

使用约束校验 API 的例子

+ +

让我们看看如何使用这个 API 来构建自定义错误消息。首先，HTML：

+ +
<form novalidate>
+  <p>
+    <label for="mail">
+      <span>Please enter an email address:</span>
+      <input type="email" id="mail" name="mail">
+      <span class="error" aria-live="polite"></span>
+    </label>
+  </p>
+  <button>Submit</button>
+</form>
+ +

这个简单的表单使用 {{htmlattrxref("novalidate","form")}} 属性关闭浏览器的自动校验；这允许我们使用脚本控制表单校验。但是，这并不禁止对约束校验 API的支持或是以下 CSS 伪类：{{cssxref(":valid")}}、{{cssxref(":invalid")}}、{{cssxref(":in-range")}} 、{{cssxref(":out-of-range")}} 的应用。这意味着，即使浏览器在发送数据之前没有自动检查表单的有效性，您仍然可以自己做，并相应地设置表单的样式。

+ +

aria-live 属性确保我们的自定义错误信息将呈现给所有人，包括使用屏幕阅读器等辅助技术的人。

+ +
CSS
+ +

以下 CSS 样式使我们的表单和其错误输出看起来更有吸引力。

+ +
/* 仅为了使示例更好看 */
+body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input[type=email]{
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* 校验失败的元素样式 */
+input:invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+
+/* 错误消息的样式 */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +
JavaScript
+ +

以下 JavaScript 代码演示如何设置自定义错误校验。

+ +
// 有许多方式可以获取 DOM 节点；在此我们获取表单本身和
+// email 输入框，以及我们将放置错误信息的 span 元素。
+
+var form  = document.getElementsByTagName('form')[0];
+var email = document.getElementById('mail');
+var error = document.querySelector('.error');
+
+email.addEventListener("input", function (event) {
+  // 当用户输入信息时，校验 email 字段
+  if (email.validity.valid) {
+    // 如果校验通过，清除已显示的错误消息
+    error.innerHTML = ""; // 重置消息的内容
+    error.className = "error"; // 重置消息的显示状态
+  }
+}, false);
+form.addEventListener("submit", function (event) {
+  // 当用户提交表单时，校验 email 字段
+  if (!email.validity.valid) {
+
+    // 如果校验失败，显示一个自定义错误
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+    // 还需要阻止表单提交事件，以取消数据传送
+    event.preventDefault();
+  }
+}, false);
+ +

这是运行结果：

+ +

{{EmbedLiveSample("使用校验约束_API_的例子", "100%", 130)}}

+ +

约束校验 API 为您提供了一个强大的工具来处理表单校验，让您可以对用户界面进行远超过仅仅使用 HTML 和 CSS所能得到的控制。

+ +

不使用内建 API 时的表单校验

+ +

有时，例如使用旧版浏览器或自定义小部件，您将无法（或不希望）使用约束校验API。 在这种情况下，您仍然可以使用 JavaScript 来校验您的表单。 校验表单比起真实数据校验更像是一个用户界面问题。

+ +

要校验表单，您必须问自己几个问题：

+ +
+
我应该进行什么样的校验？
+
你需要确定如何校验你的数据：字符串操作，类型转换，正则表达式等。这取决于你。 只要记住，表单数据一般都是文本，并总是以字符串形式提供给脚本。
+
如果表单校验失败，我该怎么办?
+
这显然是一个 UI 问题。 您必须决定表单的行为方式：表单是否发送数据？ 是否突出显示错误的字段？是否显示错误消息？
+
如何帮助用户纠正无效数据?
+
为了减少用户的挫折感，提供尽可能多的有用的信息是非常重要的，以便引导他们纠正他们的输入。 您应该提供前期建议，以便他们知道预期的输入是什么以及明确的错误消息。 如果您想深入了解表单校验用户界面要求，那么您应该阅读一些有用的文章： + +
+
+ +

不使用约束校验API 的例子

+ +

为了说明这一点，让我们重构一下前面的例子，以便它可以在旧版浏览器中使用：

+ +
<form>
+  <p>
+    <label for="mail">
+        <span>Please enter an email address:</span>
+        <input type="text" class="mail" id="mail" name="mail">
+        <span class="error" aria-live="polite"></span>
+    </label>
+  <p>
+  <!-- Some legacy browsers need to have the `type` attribute
+       explicitly set to `submit` on the `button`element -->
+  <button type="submit">Submit</button>
+</form>
+ +

正如你所看到的，HTML 几乎是一样的；我们只是关闭了 HTML 校验功能。 请注意，ARIA 是与 HTML5 无关的独立规范。

+ +
CSS
+ +

同样的，CSS也不需要太多的改动， 我们只需将 {{cssxref(":invalid")}} 伪类变成真实的类，并避免使用不适用于 Internet Explorer 6 的属性选择器。

+ +
/* 仅为了使示例更好看 */
+body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input.mail {
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* 校验失败的元素样式 */
+input.invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus.invalid {
+  outline: none;
+}
+
+/* 错误消息的样式 */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +
JavaScript
+ +

JavaScript 代码有很大的变化，需要做更多的工作。

+ +
// 使用旧版浏览器选择 DOM 节点的方法较少
+var form  = document.getElementsByTagName('form')[0];
+var email = document.getElementById('mail');
+
+// 以下是在 DOM 中访问下一个兄弟元素的技巧
+// 这比较危险，很容易引起无限循环
+// 在现代浏览器中，应该使用 element.nextElementSibling
+var error = email;
+while ((error = error.nextSibling).nodeType != 1);
+
+// 按照 HTML5 规范
+var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// 许多旧版浏览器不支持 addEventListener 方法
+// 这只是其中一种简单的处理方法
+function addEvent(element, event, callback) {
+  var previousEventCallBack = element["on"+event];
+  element["on"+event] = function (e) {
+    var output = callback(e);
+
+    // 返回 `false` 来停止回调链，并中断事件的执行
+    if (output === false) return false;
+
+    if (typeof previousEventCallBack === 'function') {
+      output = previousEventCallBack(e);
+      if(output === false) return false;
+    }
+  }
+};
+
+// 现在我们可以重构字段的约束校验了
+// 由于不使用 CSS 伪类, 我们必须明确地设置 valid 或 invalid 类到 email 字段上
+addEvent(window, "load", function () {
+  // 在这里验证字段是否为空（请记住，该字段不是必需的）
+  // 如果非空，检查它的内容格式是不是合格的 e-mail 地址
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  email.className = test ? "valid" : "invalid";
+});
+
+// 处理用户输入事件
+addEvent(email, "input", function () {
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+  if (test) {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  } else {
+    email.className = "invalid";
+  }
+});
+
+// 处理表单提交事件
+addEvent(form, "submit", function () {
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  if (!test) {
+    email.className = "invalid";
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+
+    // 某些旧版浏览器不支持 event.preventDefault() 方法
+    return false;
+  } else {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  }
+});
+ +

该结果如下:

+ +

{{EmbedLiveSample("不使用内建_API_时的表单校验", "100%", 130)}}

+ +

正如你所看到的，建立自己的校验系统并不难。 困难的部分是使其足够通用，以跨平台和任何形式使用它可以创建。 有许多库可用于执行表单校验; 你应该毫不犹豫地使用它们。 这里有一些例子：

+ + + +

 远程校验

+ +

在某些情况下，执行一些远程校验可能很有用。 当用户输入的数据与存储在应用程序服务器端的附加数据绑定时，这种校验是必要的。 一个应用实例就是注册表单，在这里你需要一个用户名。 为了避免重复，执行一个 AJAX 请求来检查用户名的可用性，要比让先用户发送数据，然后因为表单重复了返回错误信息要好得多。

+ +

执行这样的校验需要采取一些预防措施：

+ + + +

结论

+ +

表单校验并不需要复杂的 JavaScript，但它需要对用户的仔细考虑。 一定要记住帮助您的用户更正他提供的数据。 为此，请务必：

+ + + +

{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}

diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_1/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_1/index.html new file mode 100644 index 0000000000..93cf5069c2 --- /dev/null +++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_1/index.html @@ -0,0 +1,418 @@ +--- +title: Example 1 +slug: Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_1 +tags: + - HTML + - 表单 +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_1 +--- +

这是第一个如果构建自定义表单小部件的代码解释事例。

+ +

基本状态

+ +

HTML

+ +
<div class="select">
+  <span class="value">Cherry</span>
+  <ul class="optList hidden">
+    <li class="option">Cherry</li>
+    <li class="option">Lemon</li>
+    <li class="option">Banana</li>
+    <li class="option">Strawberry</li>
+    <li class="option">Apple</li>
+  </ul>
+</div>
+ +

CSS

+ +
/* --------------- */
+/* Required Styles */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Fancy Styles */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+
+ +

基本状态结果

+ +
{{ EmbedLiveSample('Basic_state', 120, 130) }}
+ +

活动状态

+ +

HTML

+ +
<div class="select active">
+  <span class="value">Cherry</span>
+  <ul class="optList hidden">
+    <li class="option">Cherry</li>
+    <li class="option">Lemon</li>
+    <li class="option">Banana</li>
+    <li class="option">Strawberry</li>
+    <li class="option">Apple</li>
+  </ul>
+</div>
+ +

CSS

+ +
/* --------------- */
+/* Required Styles */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Fancy Styles */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

活动状态结果

+ +
{{ EmbedLiveSample('Active_state', 120, 130) }}
+ +

展开状态

+ +

HTML

+ +
<div class="select active">
+  <span class="value">Cherry</span>
+  <ul class="optList">
+    <li class="option highlight">Cherry</li>
+    <li class="option">Lemon</li>
+    <li class="option">Banana</li>
+    <li class="option">Strawberry</li>
+    <li class="option">Apple</li>
+  </ul>
+</div>
+ +

CSS

+ +
/* --------------- */
+/* Required Styles */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Fancy Styles */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0, 0, 0, .45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFF;
+}
+ +

展开状态结果

+ +
{{ EmbedLiveSample('Open_state', 120, 130) }}
diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html new file mode 100644 index 0000000000..3a9546631f --- /dev/null +++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html @@ -0,0 +1,212 @@ +--- +title: Example 2 +slug: Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_2 +tags: + - HTML + - 表单 +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_2 +--- +

这是解释 如何构建自定义表单小部件的第二个示例。

+ +

使用JS

+ +

HTML 内容

+ +
<form class="no-widget">
+  <select name="myFruit">
+      <option>Cherry</option>
+      <option>Lemon</option>
+      <option>Banana</option>
+      <option>Strawberry</option>
+      <option>Apple</option>
+  </select>
+
+  <div class="select">
+    <span class="value">Cherry</span>
+    <ul class="optList hidden">
+      <li class="option">Cherry</li>
+      <li class="option">Lemon</li>
+      <li class="option">Banana</li>
+      <li class="option">Strawberry</li>
+      <li class="option">Apple</li>
+    </ul>
+  </div>
+<form>
+
+ +

CSS 内容

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Required Styles */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Fancy Styles */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

JavaScript 内容

+ +
window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+ +

使用JS的结果

+ +

{{ EmbedLiveSample('JS', 120, 130) }}

+ +

不使用JS

+ +

HTML 内容

+ +
<form class="no-widget">
+  <select name="myFruit">
+      <option>Cherry</option>
+      <option>Lemon</option>
+      <option>Banana</option>
+      <option>Strawberry</option>
+      <option>Apple</option>
+  </select>
+
+  <div class="select">
+    <span class="value">Cherry</span>
+    <ul class="optList hidden">
+      <li class="option">Cherry</li>
+      <li class="option">Lemon</li>
+      <li class="option">Banana</li>
+      <li class="option">Strawberry</li>
+      <li class="option">Apple</li>
+    </ul>
+  </div>
+<form>
+ +

CSS 内容

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+ +

不使用JS的结果

+ +

{{ EmbedLiveSample('No_JS', 120, 130) }}

diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_3/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_3/index.html new file mode 100644 index 0000000000..a4a58880e4 --- /dev/null +++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_3/index.html @@ -0,0 +1,246 @@ +--- +title: Example 3 +slug: Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_3 +tags: + - HTML + - 表单 +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_3 +--- +

这是解释 如何构建自定义表单小部件 的第三个示例。

+ +

Change states

+ +

HTML 内容

+ +
<form class="no-widget">
+  <select name="myFruit" tabindex="-1">
+      <option>Cherry</option>
+      <option>Lemon</option>
+      <option>Banana</option>
+      <option>Strawberry</option>
+      <option>Apple</option>
+  </select>
+
+  <div class="select" tabindex="0">
+    <span class="value">Cherry</span>
+    <ul class="optList hidden">
+      <li class="option">Cherry</li>
+      <li class="option">Lemon</li>
+      <li class="option">Banana</li>
+      <li class="option">Strawberry</li>
+      <li class="option">Apple</li>
+    </ul>
+  </div>
+</form>
+ +

CSS 内容

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Required Styles */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Fancy Styles */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

JavaScript 内容

+ +
// ------- //
+// HELPERS //
+// ------- //
+
+NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+
+// -------------------- //
+// Function definitions //
+// -------------------- //
+
+function deactivateSelect(select) {
+  if (!select.classList.contains('active')) return;
+
+  var optList = select.querySelector('.optList');
+
+  optList.classList.add('hidden');
+  select.classList.remove('active');
+}
+
+function activeSelect(select, selectList) {
+  if (select.classList.contains('active')) return;
+
+  selectList.forEach(deactivateSelect);
+  select.classList.add('active');
+};
+
+function toggleOptList(select, show) {
+  var optList = select.querySelector('.optList');
+
+  optList.classList.toggle('hidden');
+}
+
+function highlightOption(select, option) {
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  option.classList.add('highlight');
+};
+
+// ------------- //
+// Event binding //
+// ------------- //
+
+window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option');
+
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        highlightOption(select, option);
+      });
+    });
+
+    select.addEventListener('click', function (event) {
+      toggleOptList(select);
+    },  false);
+
+    select.addEventListener('focus', function (event) {
+      activeSelect(select, selectList);
+    });
+
+    select.addEventListener('blur', function (event) {
+      deactivateSelect(select);
+    });
+  });
+});
+ +

结果

+ +

{{ EmbedLiveSample('Change_states') }}

diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_4/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_4/index.html new file mode 100644 index 0000000000..472102adb2 --- /dev/null +++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_4/index.html @@ -0,0 +1,294 @@ +--- +title: Example 4 +slug: Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_4 +tags: + - HTML + - Web + - 表单 + - 高级 +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_4 +--- +

这是解释 如何构建自定义表单小部件 的第四个示例。

+ +

改变状态

+ +

HTML 内容

+ +
<form class="no-widget">
+  <select name="myFruit">
+    <option>Cherry</option>
+    <option>Lemon</option>
+    <option>Banana</option>
+    <option>Strawberry</option>
+    <option>Apple</option>
+  </select>
+
+  <div class="select">
+    <span class="value">Cherry</span>
+    <ul class="optList hidden">
+      <li class="option">Cherry</li>
+      <li class="option">Lemon</li>
+      <li class="option">Banana</li>
+      <li class="option">Strawberry</li>
+      <li class="option">Apple</li>
+    </ul>
+  </div>
+</form>
+ +

CSS 内容

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Required Styles */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Fancy Styles */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

JavaScript 内容

+ +
// ------- //
+// HELPERS //
+// ------- //
+
+NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+
+// -------------------- //
+// Function definitions //
+// -------------------- //
+
+function deactivateSelect(select) {
+  if (!select.classList.contains('active')) return;
+
+  var optList = select.querySelector('.optList');
+
+  optList.classList.add('hidden');
+  select.classList.remove('active');
+}
+
+function activeSelect(select, selectList) {
+  if (select.classList.contains('active')) return;
+
+  selectList.forEach(deactivateSelect);
+  select.classList.add('active');
+};
+
+function toggleOptList(select, show) {
+  var optList = select.querySelector('.optList');
+
+  optList.classList.toggle('hidden');
+}
+
+function highlightOption(select, option) {
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  option.classList.add('highlight');
+};
+
+function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+
+function getIndex(select) {
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+
+// ------------- //
+// Event binding //
+// ------------- //
+
+window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option');
+
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        highlightOption(select, option);
+      });
+    });
+
+    select.addEventListener('click', function (event) {
+      toggleOptList(select);
+    });
+
+    select.addEventListener('focus', function (event) {
+      activeSelect(select, selectList);
+    });
+
+    select.addEventListener('blur', function (event) {
+      deactivateSelect(select);
+    });
+  });
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    select.tabIndex = 0;
+    select.previousElementSibling.tabIndex = -1;
+
+    updateValue(select, selectedIndex);
+
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      if (event.keyCode === 40 && index < length - 1) { index++; }
+      if (event.keyCode === 38 && index > 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});
+ +

结果

+ +

{{ EmbedLiveSample('Change_states') }}

diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html new file mode 100644 index 0000000000..24636e7858 --- /dev/null +++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html @@ -0,0 +1,776 @@ +--- +title: 如何构建表单小工具 +slug: Learn/HTML/Forms/How_to_build_custom_form_widgets +tags: + - HTML + - 例子 + - 表单 + - 高级 +translation_of: Learn/Forms/How_to_build_custom_form_controls +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
+ +

在许多情况下，可用的 HTML 表单小组件是不够的。如果要在某些小部件（例如 {{HTMLElement("select")}}元素）上执行高级样式，或者如果要提供自定义表现，则别无选择，只能构建自己的小部件。

+ +

在本文中，我们会看到如何构建这样的组件。为此，我们将使用这样一个例子：重建 {{HTMLElement("select")}}元素。

+ +
+

注意: 我们将专注于构建小部件，而不是怎样让代码更通用或可复用；那会涉及一些非基础的JavaScript代码和未知环境下的DOM操作，这超过了这篇文章的范围。

+
+ +

设计, 结构, 和语义

+ +

在构建一个自定义控件之前，首先你要确切的知道你要什么。 这将为您节省宝贵的时间。 特别地，清楚地定义控件的所有状态非常重要。 为了做到这一点，从状态和行为表现都众所周知的现有小控件开始是很好的选择，这样你可以轻松的尽量模仿这些控件。

+ +

在我们的示例中，我们将重建HTML<select>元素，这是我们希望实现的结果：

+ +

The three states of a select box

+ +

上面图片显示了我们控件的三个主要状态：正常状态（左）; 活动状态（中）和打开状态（右）。

+ +

在行为方面，我们希望我们的控件像任何原生控件一样对鼠标和键盘都可用。 让我们从定义控件如何到达每个状态开始：

+ +
+
以下情况控件将会呈现正常状态：
+
+
    +
  • 页面加载
    • +
  • 控件处于活动状态，但用户点击控件以外的任何位置
    • +
  • 控件是活动状态，但用户使用键盘将焦点移动到另一个小部件
    • +
+ +
+

注意: 在页面上移动焦点通常是通过按Tab键来完成的，但这并不是哪都通用的标准。 例如，在Safari中页面上的链接间的循环切换默认下是通过使用组合键Option + Tab完成的。

+
+
+
以下情况控件将会呈现活动状态：
+
+
    +
  • 用户点击
    • +
  • 用户按下tab让控件获得了焦点。
    • +
  • 控件呈现打开状态然后用户点击控件。
    • +
+
+
以下情况控件将会呈现打开状态：
+
+
    +
  • 控件在非打开状态时被用户点击。
    • +
+
+
+ +

我们知道如何改变状态后,定义如何改变小工具的值还很重要:

+ +
+
以下情况控件的值将会被改变:
+
+
    +
  • 控件在打开状态下用户点击一个选项
    • +
  • 控件在活动状态下用户按下键盘上方向键或者下方向键
    • +
+
+
+ +

最后，让我们定义控件的选项将要怎么表现:

+ + + +

对于我们的例子的目的，我们将就此结束；但是，如果你是一个认真的读者，你会注意到我们省略了一些东西，例如，你认为用户在小部件处于打开状态时点击tab键会发生什么？答案是：什么也不会发生。好吧，似乎很明显这就是正确的行为，但事实是，因为在我们的规范中没有定义这种情况，我们很容易忽略这种行为。在团队环境中尤其是这样，因为设计小部件行为的人与实现的人通常是不同的。

+ +

另外一个有趣的例子是：当小部件处于打开状态时，用户按下键盘上方向键和下方向键将会发生什么？这个问题有些棘手，如果你认为活动状态和打开状态是完全不同的，那么答案就是“什么都不会发生”，因为我们没有定义任何在打开状态下键盘的交互行为。从另一个方面看，如果你认为活动状态和打开状态是有重叠的部分，那么控件的值可能会改变，但是被选中的选项肯定不会相应的进行突出显示，同样是因为我们没有定义在控件打开状态下的任何键盘交互事件（我们仅仅定义了控件打开会发生什么，而没有定义在其打开后会发生什么）

+ +

在我们的例子中，缺失的规范是显而易见的，所以我们将着手处理他们，但是对于一些没有人想到去定义正确行为的小部件而言，这的确是一个问题。所以在设计阶段花费时间是值得的，因为如果你定义的行为不够好，或者忘记定义了一个行为，那么在用户开始实际使用时，将会很难去重新定义它们。如果你在定义时有疑问，请征询他人的意见，如果你有预算，请不要犹豫的去进行用户可行性测试，这个过程被称为UX design (User Experience Design用户体验设计）,如果你想要深入的学习相关的内容，请查阅下面这些有用资源：

+ + + +
+

注意: 另外， 在绝大多数系统中，还有一种方法能够打开{{HTMLElement("select")}}元素来观察其所有的选项（这和用鼠标点击{{HTMLElement("select")}}元素是一样的）。通过Windows下的Alt + 向下箭头实现，在我们的例子中没有实现---但是这样做会很方便，因为鼠标点击事件就是由该原理实现的。

+
+ +

定义语义化的 HTML 结构

+ +

现在控件的基本功能已经决定了，可以开始构建自定义控件了。第一步是要确定 HTML 结构并给予一些基本的语义规则。第一步就是去确定它的HTML结构并给予一些基本的语义。重构{{HTMLElement("select")}}元素需要怎么做如下：

+ +
<!-- 这是我们小部件的主要容器.
+     tabindex属性是用来让用户聚焦在小部件上的.
+     稍后我们会发现最好通过JavaScript来设定它的值. -->
+<div class="select" tabindex="0">
+
+  <!-- 这个容器用来显示组件现在的值 -->
+  <span class="value">Cherry</span>
+
+  <!-- 这个容器包含我们的组件的所有可用选项.
+       因为他是一个列表，用ul元素是有意义的. -->
+  <ul class="optList">
+    <!-- 每个选项只包含用来显示的值，
+         稍后我们会知道如何处理和表单一起发送的真实值 -->
+    <li class="option">Cherry</li>
+    <li class="option">Lemon</li>
+    <li class="option">Banana</li>
+    <li class="option">Strawberry</li>
+    <li class="option">Apple</li>
+  </ul>
+
+</div>
+ +

注意类名的使用：不管实际使用了哪种底层HTML元素，它们都标识每个相关的部分。这很重要，因为这样做能确保我们的CSS和JavaScript不会和HTML结构强绑定，这样我们就可以在不破坏使用小部件的代码的情况下进行实现更改。比如，如果你希望增加一个等价的{{HTMLElement("optgroup")}}元素。

+ +

使用 CSS 创建外观

+ +

现在我们有了控件结构，我们可以开始设计我们的控件了。构建自定义控件的重点是能够完全按照我们的期望设置它的样式。为了达到这个目的，我们将 CSS部分的工作分为两部分：第一部分是让我们的控件表现得像一个{{HTMLElement("select")}}元素所必需的的CSS规则，第二部分包含了让组件看起来像我们所希望那样的精妙样式。

+ +

所需的样式

+ +

所需的样式是那些用以处理我们组件的三种状态的必须样式。

+ +
.select {
+  /* 这将为选项列表创建一个上下文定位 */
+  position: relative;
+
+  /* 这将使我们的组件成为文本流的一部分，同时又可以调整大小 */
+  display : inline-block;
+}
+ +

我们需要一个额外的类 active 来定义我们的组件处于其激活状态时的的界面外观。因为我们的组件是可以聚焦的, 我们通过{{cssxref(":focus")}} 伪类重复自定义样式来确保它们表现得一样。

+ +
.select .active,
+.select:focus {
+  outline: none;
+
+  /* 这里的 box-shadow 属性并非必须，但确保活动状态能看出来非常重要---我们
+ 将其作为一个默认值，你可以随意地覆盖掉它. */
+  box-shadow: 0 0 3px 1px #227755;
+}
+ +

现在，让我们处理选项列表：

+ +
/* 这里的 .select 选择器是一个糖衣语法，用来确保我们定义的类是
+   在我们的组件里的那个。 */
+.select .optList {
+  /* 这可以确保我们的选项列表将会显示在值的下面，并且会处在
+     HTML 流之外*/
+  position : absolute;
+  top      : 100%;
+  left     : 0;
+}
+ +

我们需要一个额外的类来处理选项列表隐藏时的情况。为了管理没有完全匹配的活动状态和打开状态之间的差异，这是有必要的。

+ +
.select .optList.hidden {
+  /* 这是一个以可访问形式隐藏列表的简单方法,
+     对可访问性我们将在最后进一步拓展 */
+  max-height: 0;
+  visibility: hidden;
+}
+ +

美化

+ +

所以现在我们的基本功能已经就位，有趣的事情就可以开始了。下面是一个可行的简单的例子，和本文开头的截图是相对应的。不管怎样，你可以随意的体验一下看看能收获什么。

+ +
.select {
+  /* 出于可访问性方面的原因，所有尺寸都会由em值表示
+     (用来确保用户在文本模式下使用浏览器缩放时组件的可缩放性).
+     在大多数浏览器下的默认换算是1em == 16px.
+     如果你对em和px的转换感到疑惑, 请参考http://riddle.pl/emcalc/ */
+  font-size   : 0.625em; /* 这个（=10px）是以em方式表达的这个环境里的字体大小 */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* 我们需要为将要添加的向下箭头准备一些额外的空间 */
+  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : .2em solid #000; /* 2px */
+  border-radius : .4em; /* 4px */
+  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  /* 第一段声明是为了不支持线性梯度填充的浏览器准备的。
+     第二段声明是因为基于WebKit的浏览器没有预先定义它。
+     如果你想为过时的浏览器提供支持, 请参阅 http://www.colorzilla.com/gradient-editor/ */
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  /* 因为值的宽度可能超过组件的宽度，我们需要确保他不会改变组件的宽度 */
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  vertical-align: top;
+
+  /* 如果内容溢出了, 最好有一个恰当的缩写. */
+  white-space  : nowrap;
+  text-overflow: ellipsis;
+}
+ +

我们不需要一个额外的元素来设计向下的箭头，而使用{{cssxref(":after")}} 伪类来替代。然而，这也可以通过使用一张加在select class上的简单的背景图像来实现。

+ +
.select:after {
+  content : "▼"; /* 我们使用了unicode 编码的字符 U+25BC; 参阅 http://www.utf8-chartable.de */
+  position: absolute;
+  z-index : 1; /* 这对于防止箭头覆盖选项列表很重要 */
+  top     : 0;
+  right   : 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  height  : 100%;
+  width   : 2em;  /* 20px */
+  padding-top : .1em; /* 1px */
+
+  border-left  : .2em solid #000; /* 2px */
+  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
+
+  background-color : #000;
+  color : #FFF;
+  text-align : center;
+}
+ +

接下来，让我们定义选项列表的样式。

+ +
.select .optList {
+  z-index : 2; /* 我们明确的表示选项列表会始终与向下箭头重叠 */
+
+  /* 这会重置ul元素的默认样式 */
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* 这会确保即使数值比组件小，选项列表仍能变得跟组件自身一样大*/
+  min-width : 100%;
+
+  /* 万一列表太长了, 它的内容会从垂直方向溢出(会自动添加一个竖向滚动条)
+     但是水平方向不会(因为我们没有设定宽度, 列表会自适应宽度. 如果不能的话，内容会被截断) */
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  border: .2em solid #000; /* 2px */
+  border-top-width : .1em; /* 1px */
+  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
+  background: #f0f0f0;
+}
+ +

对于选项，我们需要添加一个 highlight 类以便能标明用户将要选择的值或者已经选择的值。

+ +
.select .option {
+  padding: .2em .3em; /* 2px 3px */
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

这是三种状态的结果:

+ + + + + + + + + + + + + + + + + + + +
基本状态活动状态打开状态
{{EmbedLiveSample("Basic_state",120,130, "", "/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Active_state",120,130, "", "/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Open_state",120,130, "", "/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}
Check out the source code
+ +

通过JavaScript让您的小部件动起来

+ +

现在我们的设计和结构已经完成了。我们可以写些JavaScript代码来让这个部件真正生效。

+ +
+

警告：下面的代码仅仅是教学性质的，并且不应该照搬使用。在许多方面，正如我们所看到的，这种方案不具有前瞻性，而且可能在旧浏览器上会不工作。这里面还有冗余的部分，在生产环境下，代码需要优化。

+
+ +
+

注意：创建可复用的组件可能是一件需要些技巧的事情。W3C 网络组件草案 是对这类特定问题的答案之一。X-Tag 项目 是对这一规格的实验性实现；我们建议你看看它。

+
+ +

它为什么不生效？

+ +

在我们开始之前，要记住一件和 JavaScript 有关的非常重要的事情：在浏览器中，这是一种不可靠的技术。当你构建一个自定义组件时，你会不得不得依赖于 JavaScript，因为这是将所有的东西联系在一起的线索。但是，很多情况下，JavaScript 不能在浏览器中运行。

+ + + +

因为这些风险，认真考虑 JavaScript 不生效时会发生什么是很重要的。处理这个问题的细节超出了这篇文章的范围，因为这与你有多么想使你的脚本具有通用性和可复用性更加相关，不过我们将在我们的例子中考虑与其相关的基本内容。

+ +

在我们的例子中，如果JavaScript代码没有运行，我们会回退到显示一个标准的 {{HTMLElement("select")}} 元素。为了实现这一点，我们需要两样东西。

+ +

首先，在每次使用我们的自定义部件前，我们需要添加一个标准的 {{HTMLElement("select")}} 元素。实际上，为了能将来自我们自定义的表单组件和以及其他部分的表单数据发送出去，这个元素也是需要的。我们随后会详细的解释这一点。

+ +
<body class="no-widget">
+  <form>
+    <select name="myFruit">
+      <option>Cherry</option>
+      <option>Lemon</option>
+      <option>Banana</option>
+      <option>Strawberry</option>
+      <option>Apple</option>
+    </select>
+
+    <div class="select">
+      <span class="value">Cherry</span>
+      <ul class="optList hidden">
+        <li class="option">Cherry</li>
+        <li class="option">Lemon</li>
+        <li class="option">Banana</li>
+        <li class="option">Strawberry</li>
+        <li class="option">Apple</li>
+      </ul>
+    </div>
+  </form>
+
+</body>
+ +

第二，我们需要两个新的 classes 来隐藏不需要的元素(即，当我们的脚本没有运行时的自定义组件, 或是脚本正常运行时的"真正的" {{HTMLElement("select")}} 元素)。注意默认情况下，我们的 HTML 代码会隐藏我们的自定义组件。

+ +
.widget select,
+.no-widget .select {
+  /* 这个CSS选择器大体上说的是：
+     - 要么我们将body的class设置为"widget"，隐藏真实的{{HTMLElement("select")}}元素
+     - 或是我们没有改变body的class,这样body的class还是"no-widget",
+       因此class为"select"的元素需要被隐藏 */
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+ +

接下来我们需要一个 JavaScript 开关来决定脚本是否运行。这个开关非常简单：如果页面加载时，我们的脚本运行了，它将会移除 no-widget class ，并添加  widget class，由此切换 {{HTMLElement("select")}} 元素和自定义组件的可视性。

+ +
window.addEventListener("load", function () {
+  document.body.classList.remove("no-widget");
+  document.body.classList.add("widget");
+});
+ + + + + + + + + + + + + + + + + +
无 JS有 JS
{{EmbedLiveSample("No_JS",120,130, "", "/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}{{EmbedLiveSample("JS",120,130, "", "/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}
Check out the source code
+ +
+

注意: 如果你真的想让你的代码变得通用和可重用，最好不要做一个 class 选择器开关，而是通过添加一个组件 class 的方式来隐藏{{HTMLElement("select")}} 元素，并且动态地在每一个{{HTMLElement("select")}} 元素后面添加代表页面中自定义组件的 DOM 树。

+
+ +

让工作变得更简单

+ +

在我们将要构建的代码之中，我们将会使用标准的 DOM API 来完成我们所要做的所有工作。尽管 DOM API 在浏览器中得到了更好支持，但是在旧的浏览器上还是会出现问题。( 特别是非常老的 Internet Explorer）。

+ +

如果你想要避免旧浏览器带来的麻烦，这儿有两种解决方案：使用专门的框架，比如 jQuery, $dom, prototype, Dojo, YUI, 或者类似的框架，或者通过填充你想使用的缺失的特性 （这可以通过条件加载轻松完成——例如使用 yepnope 这样的库。

+ +

我们打算使用的特性如下所示（按照风险程度从高到低排列）：

+ +
    +
  1. {{domxref("element.classList","classList")}}
    2. +
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. +
  3. forEach (这不是 DOM而是现代 JavaScript )
    4. +
  4. {{domxref("element.querySelector","querySelector")}} 和 {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. +
+ +

除了那些特定特性的的可用性以外，在开始之前，仍然存在一个问题。由函数{{domxref("element.querySelectorAll","querySelectorAll()")}} 返回的对象是一个{{domxref("NodeList")}} 而不是  Array。这一点非常重要，因为 Array  对象支持 forEach 函数，但是 {{domxref("NodeList")}} 不支持。由于 {{domxref("NodeList")}} 看起来实在是像一个 Array 并且因为 forEach 是这样的便于使用。我们可以轻易地添加对 {{domxref("NodeList")}}的支持，使我们的生活更轻松一些，像这样：

+ +
NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+ +

我们没有开玩笑，这真的很容易实现。

+ +

构造事件回调

+ +

基础已经准备好了，我们现在可以开始定义用户每次同我们的组件交互时会用到的所有函数了。

+ +
// 这个函数会用在每当我们想要停用一个自定义组件的时候
+// 它需要一个参数：
+// select :要停用的带有 'select' 类的节点
+function deactivateSelect(select) {
+
+  // 如果组件没有运行，不用进行任何操作
+  if (!select.classList.contains('active')) return;
+
+  // 我们需要获取自定义组件的选项列表
+  var optList = select.querySelector('.optList');
+
+  // 关闭选项列表
+  optList.classList.add('hidden');
+
+  // 然后停用组件本身
+  select.classList.remove('active');
+}
+
+// 每当用户想要激活（或停用）这个组件的时候，会调用这个函数
+// 它需要2个参数：
+// select : 要激活的带有'select'类的DOM节点
+// selectList : 包含所有带'select'类的DOM节点的列表
+function activeSelect(select, selectList) {
+
+  // 如果组件已经激活了，不进行任何操作
+  if (select.classList.contains('active')) return;
+
+  // 我们需要关闭所有自定义组件的活动状态
+  // 因为deactiveselect函数满足forEach回调函数的所有请求，
+  // 我们直接使用它，不使用中间匿名函数
+  selectList.forEach(deactivateSelect);
+
+  // 然后我们激活特定的组件
+  select.classList.add('active');
+}
+
+// 每当用户想要打开/关闭选项列表的时候，会调用这个函数
+// 它需要一个参数:
+// select : 要触发的列表的DOM节点
+function toggleOptList(select) {
+
+  // 该列表不包含在组件中
+  var optList = select.querySelector('.optList');
+
+  // 我们改变列表的class去显示/隐藏它
+  optList.classList.toggle('hidden');
+}
+
+// 每当我们要高亮一个选项的时候，会调用该函数
+// 它需要两个参数:
+// select : 带有'select'类的DOM节点，包含了需要高亮强调的选项
+// option : 需要高亮强调的带有'option'类的DOM节点
+function highlightOption(select, option) {
+
+  // 为我们的自定义select元素获取所有有效选项的列表
+  var optionList = select.querySelectorAll('.option');
+
+  // 我们移除所有选项的高亮强调
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  // 我们高亮强调正确的选项
+  option.classList.add('highlight');
+};
+ +

这是你需要用来处理组件不同状态的所有代码。

+ +

接下来，我们将这些函数绑定到合适的事件上：

+ +
// 我们处理文档加载时的事件绑定。
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // 每个自定义组件都需要初始化
+  selectList.forEach(function (select) {
+
+    // 它的'option'元素也需要
+    var optionList = select.querySelectorAll('.option');
+
+    // 每当用户的鼠标悬停在一个选项上时，我们高亮这个指定的选项
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        // 注意:'select'和'option'变量是我们函数调用范围内有效的闭包 。
+        highlightOption(select, option);
+      });
+    });
+
+    // 每当用户点击一个自定义的select元素时
+    select.addEventListener('click', function (event) {
+      // 注意:'select'变量是我们函数调用范围内有效的闭包。
+
+      // 我们改变选项列表的可见性
+      toggleOptList(select);
+    });
+
+    // 如果组件获得了焦点
+    // 每当用户点击它或是用tab键访问这个组件时，组件获得焦点
+    select.addEventListener('focus', function (event) {
+      // 注意:'select'和'selectlist'变量是我们函数调用范围内有效的闭包 。
+
+      // 我们激活这个组件
+      activeSelect(select, selectList);
+    });
+
+    // 如果组件失去焦点
+    select.addEventListener('blur', function (event) {
+      // 注意:'select'变量是我们函数调用范围内有效的闭包。
+
+      // 我们关闭这个组件
+      deactivateSelect(select);
+    });
+  });
+});
+ +

此时，我们的组件会根据我们的设计改变状态，但是它的值仍然没有更新。我们接下来会处理这件事。

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}
Check out the source code
+ +

处理组件的值

+ +

既然我们的组件已经开始工作了，我们必须添加代码，使其能够根据用户的输入更新取值，并且能将取值随表单数据一同发送。

+ +

实现这一点最简单的方法是使用后台原生组件。这样的一个组件会使用浏览器提供的所有内置控件跟踪值，并且在表单提交时，取值也会像往常一样发送。当有现成的功能时，我们再做重复工作就毫无意义了。

+ +

像前面所看到的那样，出于可访问性的原因，我们已经使用了一个原生的选择组件作为后备显示内容；我们可轻松的将它的值与我们的自定义组件之间的值同步。

+ +
// 这个函数更新显示的值并将其通过原生组件同步
+// 它需要2个参数:
+// select : 含有要更新的值的'select'类的DOM节点
+// index  : 要被选择的值的索引
+function updateValue(select, index) {
+  // 我们需要为了给定的自定义组件获取原生组件
+  // 在我们的例子中, 原生组件是自定义组件的‘同胞’
+  var nativeWidget = select.previousElementSibling;
+
+  // 我们也需要得到自定义组件的值占位符，
+  var value = select.querySelector('.value');
+
+  // 还有整个选项列表。
+  var optionList = select.querySelectorAll('.option');
+
+  // 我们将被选择的索引设定为我们的选择的索引
+  nativeWidget.selectedIndex = index;
+
+  // 更新相应的值占位符
+  value.innerHTML = optionList[index].innerHTML;
+
+  // 然后高亮我们自定义组件里对应的选项
+  highlightOption(select, optionList[index]);
+};
+
+// 这个函数返回原生组件里当前选定的索引
+// 它需要1个参数:
+// select : 跟原生组件有关的'select'类DOM节点
+function getIndex(select) {
+  // 我们需要为了给定的自定义组件访问原生组件
+  // 在我们的例子中, 原生组件是自定义组件的一个“同胞”
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+ +

通过这两个函数，我们可以将原生组件绑定到自定义的组件上。

+ +
// 我们在文档加载时处理事件的绑定。
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // 每个自定义组件都需要初始化
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    // 使我们的自定义组件可以获得焦点
+    select.tabIndex = 0;
+
+    // 我们让原生组件无法获得焦点
+    select.previousElementSibling.tabIndex = -1;
+
+    // 确保默认选中的值正确显示
+    updateValue(select, selectedIndex);
+
+    // 每当用户点击一个选项的时候，更新相应的值
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    // 每当用户在获得焦点的组件上用键盘操作时，更新相应的值
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      // 当用户点击向下箭头时，跳转到下一个选项
+      if (event.keyCode === 40 && index < length - 1) { index++; }
+
+      // 当用户点击向上箭头时，跳转到上一个选项
+      if (event.keyCode === 38 && index > 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});
+ +

在上面的代码里，值得注意的是 tabIndex 属性的使用。使用这个属性是很有必要的，这可以确保原生组件将永远不会获得焦点，而且还可以确保当用户用户使用键盘和鼠标时，我们的自定义组件能够获得焦点。

+ +

做完上面这些后，我们就完成了！下面是结果：

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}
Check out the source code
+ +

但是等等，我们真的做完了嘛？

+ +

使其具有可访问性

+ +

我们构建了一个能够生效的东西，尽管这离一个特性齐全的选择框还差得远，但是它效果不错。但是我们已经完成的事情只不过是摆弄DOM。这个组件并没有真正的语义，即使它看起来像一个选择框，但是从浏览器的角度来看并不是，所以辅助技术并不能明白这是一个选择框。简单来说，这个全新的选择框并不具备可访问性！

+ +

幸运的是，有一种解决方案叫做 ARIA。ARIA代表"无障碍富互联网应用"。这是一个专为我们现在做的事情设计的 W3C 规范：使网络应用和自定义组件易于访问，它本质上是一组用来拓展 HTML 的属性集，以便我们能够更好的描述角色，状态和属性，就像我们刚才设计的元素是是它试图传递的原生元素一样。使用这些属性非常简单，所以让我们来试试看。

+ +

 role 属性

+ +

ARIA 使用的关键属性是 role 属性。role 属性接受一个值，该值定义了一个元素的用途。每一个 role 定义了它自己的需求和行为。在我们的例子中，我们会使用 listbox 这一 role。这是一个 "合成角色"，表示具有该role的元素应该有子元素，每个子元素都有特定的角色。（在这个案例中，至少有一个具有option 角色的子元素）。

+ +

同样值得注意的是，ARIA定义了默认应用于标准 HTML 标记的角色。例如，{{HTMLElement("table")}} 元素与角色 grid 相匹配，而 {{HTMLElement("ul")}} 元素与角色 list 相匹配。由于我们使用了一个 {{HTMLElement("ul")}} 元素，我们想要确保我们组件的 listbox 角色能替代 {{HTMLElement("ul")}} 元素的list 角色。为此，我们会使用角色 presentation。这个角色被设计成让我们来表示一个元素没有特殊的含义，并且仅仅用于提供信息。我们会将其应用到{{HTMLElement("ul")}} 元素上。

+ +

为了支持 listbox 角色，我们只需要将我们 HTML 改成这样：

+ +
<!-- 我们把role="listbox" 属性添加到我们的顶部元素 -->
+<div class="select" role="listbox">
+  <span class="value">Cherry</span>
+  <!-- 我们也把 role="presentation" 添加到ul元素中 -->
+  <ul class="optList" role="presentation">
+    <!-- 然后把role="option" 属性添加到所有li元素里 -->
+    <li role="option" class="option">Cherry</li>
+    <li role="option" class="option">Lemon</li>
+    <li role="option" class="option">Banana</li>
+    <li role="option" class="option">Strawberry</li>
+    <li role="option" class="option">Apple</li>
+  </ul>
+</div>
+ +
+

注意：只有当你想要为不支持 CSS 属性选择器的旧浏览器提供支持时，才有必要同时包含 role 属性和一个class 属性。

+
+ +

 aria-selected 属性

+ +

仅仅使用 role 属性是不够的。 ARIA 还提供了许多状态和属性的内部特征。你能更好更充分的利用它们，你的组件就会能够被辅助技术更好的理解。在我们的例子中，我们会把使用限制在一个属性上：aria-selected。

+ +

aria-selected 属性被用来标记当前被选中的选项；这可以让辅助技术告知用户当前的选项是什么。我们会通过 JavaScript 动态地使用该属性，每当用户选择一个选项时标记选中的选项。为了达到这一目的，我们需要修正我们的 updateValue() 函数：

+ +
function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  // 我们确保所有的选项都没有被选中
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  // 我们确保选定的选项被选中了
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+ +

这是经过所有的改变之后的最终结果。 ( 藉由 NVDA or VoiceOver 这样的辅助技术尝试它，你会对此有更好的体会)：

+ + + + + + + + + + + + + + + +
在线示例
{{EmbedLiveSample("Change_states",120,130, "", "/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}
Check out the final source code
+ +

总结

+ +

我们已经了解了所有和构建一个自定义表单组件相关的基础知识，但是如你所见做这件事非常繁琐，并且通常情况下依赖第三方库，而不是自己从头写起会更容易 ，也更好(当然，除非你的目的就是构建一个这样的库）。

+ +

这儿有一些库，在你编写自己的之前应该了解一下：

+ + + +

如果你想更进一步, 本例中的代码需要一些改进，才能变得更加通用和可重用。这是一个你可以尝试去做的练习。这里有两个提示可以帮到你：我们所有函数的第一个参数是相同的，这意味着这些函数需要相同的上下文。构建一个对象来共享那些上下文是更聪明的做法。还有，你需要让它的特性适用性更好；也就是说，它要能在一系列对Web标准的兼容性不同的浏览器上工作良好。祝愉快！

+ +

{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}

+ +

在本单元中

+ + diff --git a/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html new file mode 100644 index 0000000000..eda4b201da --- /dev/null +++ b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html @@ -0,0 +1,290 @@ +--- +title: 如何构造HTML表单 +slug: Learn/HTML/Forms/How_to_structure_an_HTML_form +translation_of: Learn/Forms/How_to_structure_a_web_form +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}
+ +

有了基础知识，我们现在更详细地了解了用于为表单的不同部分提供结构和意义的元素。

+ + + + + + + + + + + + +
前提条件:基本的计算机能力, 和基本的 对HTML的理解。
目标:要理解如何构造HTML表单并赋予它们语义，以便它们是可用的和可访问的。
+ +

HTML表单的灵活性使它们成为HTML中最复杂的结构之一;您可以使用专用的表单元素和属性构建任何类型的基本表单。在构建HTML表单时使用正确的结构将有助于确保表单可用性和可访问性。

+ +

 <form> 元素

+ +

 {{HTMLElement("form")}} 元素按照一定的格式定义了表单和确定表单行为的属性。当您想要创建一个HTML表单时，都必须从这个元素开始，然后把所有内容都放在里面。许多辅助技术或浏览器插件可以发现{{HTMLElement("form")}}元素并实现特殊的钩子，使它们更易于使用。 

+ +

我们早在之前的文章中就遇见过它了。

+ +
注意: 严格禁止在一个表单内嵌套另一个表单。嵌套会使表单的行为不可预知，而这取决于正在使用的浏览器。
+ +

请注意，在{{HTMLElement("form")}}元素之外使用表单小部件是可以的，但是如果您这样做了，那么表单小部件与任何表单都没有任何关系。这样的小部件可以在表单之外使用，但是您应该对于这些小部件有特别的计划，因为它们自己什么也不做。您将不得不使用JavaScript定制他们的行为。

+ +
+

注意: HTML5在HTML表单元素中引入form属性。它让您显式地将元素与表单绑定在一起，即使元素不在{{ HTMLElement("form") }}中。不幸的是，就目前而言，跨浏览器对这个特性的实现还不足以使用。

+
+ +

 <fieldset> 和 <legend> 元素

+ +

{{HTMLElement("fieldset")}}元素是一种方便的用于创建具有相同目的的小部件组的方式，出于样式和语义目的。 你可以在<fieldset>开口标签后加上一个 {{HTMLElement("legend")}}元素来给{{HTMLElement("fieldset")}} 标上标签。 {{HTMLElement("legend")}}的文本内容正式地描述了{{HTMLElement("fieldset")}}里所含有部件的用途。

+ +

许多辅助技术将使用{{HTMLElement("legend")}} 元素，就好像它是相应的 {{HTMLElement("fieldset")}} 元素里每个部件的标签的一部分。例如，在说出每个小部件的标签之前，像Jaws或NVDA这样的屏幕阅读器会朗读出legend的内容。

+ +

这里有一个小例子:

+ +
<form>
+  <fieldset>
+    <legend>Fruit juice size</legend>
+    <p>
+      <input type="radio" name="size" id="size_1" value="small">
+      <label for="size_1">Small</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_2" value="medium">
+      <label for="size_2">Medium</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_3" value="large">
+      <label for="size_3">Large</label>
+    </p>
+  </fieldset>
+</form>
+ +
+

注意: 你可以在 fieldset-legend.html (你也可以看预览版) 看到该例。

+
+ +

当阅读上述表格时，屏幕阅读器将会读第一个小部件“Fruit juice size small”，“Fruit juice size medium”为第二个，“Fruit juice size large”为第三个。

+ +

本例中的用例是最重要的。每当您有一组单选按钮时，您应该将它们嵌套在{{HTMLElement("fieldset")}}元素中。还有其他用例，一般来说，{{HTMLElement("fieldset")}}元素也可以用来对表单进行分段。理想情况下，长表单应该在拆分为多个页面，但是如果表单很长，却必须在单个页面上，那么将以不同的关联关系划分的分段，分别放在不同的fieldset里，可以提高可用性。

+ +

因为它对辅助技术的影响， {{HTMLElement("fieldset")}} 元素是构建可访问表单的关键元素之一。无论如何，你有责任不去滥用它。如果可能，每次构建表单时，尝试侦听屏幕阅读器如何解释它。如果听起来很奇怪，试着改进表单结构。

+ +

 <label> 元素

+ +

正如我们在前一篇文章中看到的， {{HTMLElement("label")}} 元素是为HTML表单小部件定义标签的正式方法。如果你想构建可访问的表单，这是最重要的元素——当实现的恰当时，屏幕阅读器会连同有关的说明和表单元素的标签一起朗读。以我们在上一篇文章中看到的例子为例:

+ +
<label for="name">Name:</label> <input type="text" id="name" name="user_name">
+ +

<label> 标签与 <input> 通过他们各自的for 属性和 id 属性正确相关联（label的for属性和它对应的小部件的id属性），这样，屏幕阅读器会读出诸如“Name, edit text”之类的东西。

+ +

如果标签没有正确设置，屏幕阅读器只会读出“Edit text blank”之类的东西，这样会没什么帮助。

+ +

注意，一个小部件可以嵌套在它的{{HTMLElement("label")}}元素中，就像这样：

+ +
<label for="name">
+  Name: <input type="text" id="name" name="user_name">
+</label>
+ +

尽管可以这样做，但人们认为设置for属性才是最好的做法，因为一些辅助技术不理解标签和小部件之间的隐式关系。

+ +

标签也可点击!

+ +

正确设置标签的另一个好处是可以在所有浏览器中单击标签来激活相应的小部件。这对于像文本输入这样的例子很有用，这样你可以通过点击标签，和点击输入区效果一样，来聚焦于它，这对于单选按钮和复选框尤其有用——这种控件的可点击区域可能非常小，设置标签来使它们可点击区域变大是非常有用的。

+ +

举个例子：

+ +
<form>
+  <p>
+    <label for="taste_1">I like cherry</label>
+    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
+  </p>
+  <p>
+    <label for="taste_2">I like banana</label>
+    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
+  </p>
+</form>
+ +
+

注意: 你可以在 checkbox-label.html (你也可以看预览版) 看到该例。

+
+ +

多个标签

+ +

严格地说，您可以在一个小部件上放置多个标签，但是这不是一个好主意，因为一些辅助技术可能难以处理它们。在多个标签的情况下，您应该将一个小部件和它的标签嵌套在一个{{HTMLElement("label")}}元素中。

+ +

让我们考虑下面这个例子：

+ +
<p>Required fields are followed by <abbr title="required">*</abbr>.</p>
+
+<!--这样写：-->
+<div>
+  <label for="username">Name:</label>
+  <input type="text" name="username">
+  <label for="username"><abbr title="required">*</abbr></label>
+</div>
+
+<!--但是这样写会更好：-->
+<div>
+  <label for="username">
+    <span>Name:</span>
+    <input id="username" type="text" name="username">
+    <abbr title="required">*</abbr>
+  </label>
+</div>
+
+<!--但最好的可能是这样：-->
+<div>
+  <label for="username">Name: <abbr title="required">*</abbr></label>
+  <input id="username" type="text" name="username">
+</div>
+ +

顶部的段落定义了所需元素的规则。它必须在开始时确保像屏幕阅读器这样的辅助技术在用户找到必需的元素之前显示或念出它们。这样，他们就知道星号表达的是什么意思了。根据屏幕阅读器的设置，屏幕阅读器会把星号读为“star”或“required”，取决于屏幕阅读器的设置——不管怎样，要念出来的都会在第一段清楚的呈现出来。

+ + + +
+

注意：你可能会得到一些不同的结果，这取决于你的屏幕阅读器。这是在VoiceOver上测试的（NVDA的行为也类似）。我们也乐于听听你的试验结果。

+
+ +
+

注意: 你可以在 GitHub 上看到 required-labels.html (你也可以看预览版)。不要运行2个或3个未注释版本的示例—— 如果您有多个标签和多个输入相同的ID，那么屏幕阅读器肯定会感到困惑！

+
+ +

用于表单的通用HTML结构

+ +

除了特定于HTML表单的结构之外，还应该记住表单同样是HTML。这意味着您可以使用HTML的所有强大功能来构造一个HTML表单。

+ +

正如您在示例中可以看到的，用{{HTMLElement("div")}}元素包装标签和它的小部件是很常见的做法。{{HTMLElement("p")}}元素也经常被使用，HTML列表也是如此（后者在构造多个复选框或单选按钮时最为常见）。

+ +

除了{{HTMLElement("fieldset")}}元素之外，使用HTML标题（例如，{{htmlelement("h1")}}、{{htmlelement("h2")}}）和分段（如{{htmlelement("section")}}）来构造一个复杂的表单也是一种常见的做法。

+ +

最重要的是，你要找到一种你觉得很舒服的风格去码代码，而且它也能带来可访问的、可用的形式。

+ +

它包含了从功能上划分开并分别包含在{{htmlelement("section")}}元素中的部分，以及一个{{htmlelement("fieldset")}}来包含单选按钮。

+ +

自主学习:构建一个表单结构

+ +

让我们把这些想法付诸实践，建立一个稍微复杂一点的表单结构——一个支付表单。这个表单将包含许多您可能还不了解的小部件类型—现在不要担心这个；在下一篇文章（原生表单小部件）中，您将了解它们是如何工作的。现在，当您遵循下面的指令时，请仔细阅读这些描述，并开始理解我们使用的包装器元素是如何构造表单的，以及为什么这么做。

+ +
    +
  1. 在开始之前，在计算机上的一个新目录中，创建一个空白模板文件和我们的支付表单的CSS样式的本地副本。
    2. +
  2. 首先，通过添加下面这行代码到你的HTML{{htmlelement("head")}}使你的HTML应用CSS。 + 
    <link href="payment-form.css" rel="stylesheet">
    +
    3. +
  3. 接下来，通过添加外部{{htmlelement("form")}}元素来开始一张表单： + 
    <form>
+
+</form>
    +
    4. +
  4. 在 <form> 标签内，以添加一个标题和段落开始，告诉用户必需的字段是如何标记的: + 
    <h1>Payment form</h1>
+<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
    +
    5. +
  5. 接下来，我们将在表单中添加一个更大的代码段，在我们之前的代码下面。在这里，您将看到，我们正在将联系人信息字段包装在一个单独的{{htmlelement("section")}}元素中。此外，我们有一组两个单选按钮，每个单选按钮都放在自己的列表中({{htmlelement("li")}}))元素。最后，我们有两个标准文本{{htmlelement("input")}}和它们相关的{{htmlelement("label")}}元素，每个元素包含在{{htmlelement("p")}}中，加上输入密码的密码输入。现在将这些代码添加到您的表单中: + 
    <section>
+    <h2>Contact information</h2>
+    <fieldset>
+      <legend>Title</legend>
+      <ul>
+          <li>
+            <label for="title_1">
+              <input type="radio" id="title_1" name="title" value="K" >
+              King
+            </label>
+          </li>
+          <li>
+            <label for="title_2">
+              <input type="radio" id="title_2" name="title" value="Q">
+              Queen
+            </label>
+          </li>
+          <li>
+            <label for="title_3">
+              <input type="radio" id="title_3" name="title" value="J">
+              Joker
+            </label>
+          </li>
+      </ul>
+    </fieldset>
+    <p>
+      <label for="name">
+        <span>Name: </span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="text" id="name" name="username">
+    </p>
+    <p>
+      <label for="mail">
+        <span>E-mail: </span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="email" id="mail" name="usermail">
+    </p>
+    <p>
+      <label for="pwd">
+        <span>Password: </span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="password" id="pwd" name="password">
+    </p>
+</section>
    +
    6. +
  6. 现在，我们将转到表单的第二个<section>——支付信息。在这里，我们有三个不同的小部件以及它们的标签，每个都包含在一个<p>中。第一个是选择信用卡类型的下拉菜单({{htmlelement("select")}})。第二个是输入一个信用卡号的类型编号的 <input> 元素。最后一个是输入date类型的<input> 元素，用来输入卡片的过期日期（这将在支持的浏览器中出现一个日期选择器小部件，并在非支持的浏览器中回退到普通的文本输入）。同样，在之前的代码后面输入以下内容： + 
    <section>
+    <h2>Payment information</h2>
+    <p>
+      <label for="card">
+        <span>Card type:</span>
+      </label>
+      <select id="card" name="usercard">
+        <option value="visa">Visa</option>
+        <option value="mc">Mastercard</option>
+        <option value="amex">American Express</option>
+      </select>
+    </p>
+    <p>
+      <label for="number">
+        <span>Card number:</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+        <input type="number" id="number" name="cardnumber">
+    </p>
+    <p>
+      <label for="date">
+        <span>Expiration date:</span>
+        <strong><abbr title="required">*</abbr></strong>
+        <em>formatted as mm/yy</em>
+      </label>
+      <input type="date" id="date" name="expiration">
+    </p>
+</section>
    +
    7. +
  7. 我们要添加的最后一个部分要简单得多，它只包含了一个submit类型的 {{htmlelement("button")}} ，用于提交表单数据。现在把这个添加到你的表单的底部: + 
    <p> <button type="submit">Validate the payment</button> </p>
    +
    8. +
+ +

您可以在下面看到已完成的表单 (你可以在Github上看到源码和预览版）：

+ +

{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}

+ +

总结

+ +

现在，您已经具备了正确地构造HTML表单所需的所有知识;下一篇文章将深入介绍各种不同类型的表单小部件，您将希望从用户那里收集信息。

+ +

另见

+ + + +

{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}

diff --git a/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html b/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html new file mode 100644 index 0000000000..d6045e0d70 --- /dev/null +++ b/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html @@ -0,0 +1,215 @@ +--- +title: 旧式浏览器中的HTML 表单 +slug: Learn/HTML/Forms/HTML_forms_in_legacy_browsers +translation_of: Learn/Forms/HTML_forms_in_legacy_browsers +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms")}}
+ +

所有 web 开发者很快就会（有时候是痛苦地）发现网络是一个令人不快的地方。我们碰到的最恶毒的诅咒是旧式浏览器。好吧，让我们承认吧，当我们提到 “旧式浏览器” 时，脑海中出现就是 老版本的 Internet Explorer ……但是，这远远不是全部。只发布一年的 Firefox 比如 the ESR version 也是旧式浏览器。那么，在移动世界呢？当浏览器和 OS（操作系统） 都不能更新时？是的，有非常多老版本的 Android 手机或 iPhone 没有更新到最新的浏览器。它们同样是旧式浏览器。

+ +

可悲的是，处理这些传统浏览器的问题是工作的一部分。幸运的是，有一些技巧可以帮助您解决旧式浏览器导致的大约80％的问题。

+ +

了解这些问题

+ +

实际上，最重要的事情是阅读那些浏览器的文档，并尝试理解通用的（解决）模式。例如，在许多情况下，HTML表单是否支持CSS是最大的问题。这是正确的开始，只需要检查你想用的元素或接口是否支持CSS即可。MDN有一个关于包含HTML中可用的元素、属性或API的兼容表单可查。 此外，仍有其他一些非常有用的资源：

+ +

浏览器厂商的文档

+ + + +

独立文档

+ + + +

让事情变得更简单

+ +

由于HTML forms 包含复杂的交互，所以有一条法则: keep it as simple as possible。很多时候，我们想让表单更美观或想使用更高级的技术，然而，构建高效的HTML表单不只是设计和技术问题。记得花时间读一下这篇文章t forms usability on UX For The Masses.

+ +

优雅地降级(Graceful degradation)是web开发者最好的朋友

+ +

Graceful degradation and progressive enhancement 是一个开发模式，它允许你通过同时支持多种浏览器来构建优秀内容。当你为现代浏览器构建内容时，你想确保它能在旧式浏览器中以某种方式工作，这就是优雅地降级（graceful degradation）.

+ +

让我们看一些关于HTML表单的例子：

+ +

HTML input 类型

+ +

HTML5引入的新input类型十分酷，因为他们的降级(degrade)是高度可预测的。如果一个浏览器不能理解  {{HTMLElement("input")}}元素的 {{htmlattrxref("type","input")}} 属性, 它将会后退到text一样的行为。

+ +
<label for="myColor">
+  Pick a color
+  <input type="color" id="myColor" name="color">
+</label>
+ + + + + + + + + + + + + + +
Chrome 24Firefox 18
Screen shot of the color input on Chrome for Mac OSXScreen shot of the color input on Firefox for Mac OSX
+ +

CSS 属性选择器

+ +

CSS属性选择器  在 HTML Forms 中十分有用，然而旧式浏览器不支持. 在那种情形下，一般会习惯性使用等价的class:

+ +
<input type="number" class="number">
+ +
input[type=number] {
+  /* 这在一些浏览器中是不能执行的 */
+}
+
+input.number {
+  /* 可以在任何浏览器中执行 */
+}
+ +

注意下面的写法没有用（由于它是重复的），在某些浏览器中会失败:

+ +
input[type=number],
+input.number {
+  /* 在某些浏览器中，这可能会失败，因为如果他们不理解其中任何一个选择器，则跳过整个规则 */
+}
+ +

表单按钮

+ +

有两种定义HTML表单按钮的方式:

+ + + +

如果你想通过元素选择器在按钮上应用CSS的话，采用 {{HTMLElement("input")}} 元素的方式会让事情变得稍微有点复杂:

+ +
<input type="button" class="button" value="click me">
+ +
input {
+  /* 此规则关闭了input元素定义的按钮的默认渲染样式 */
+  border: 1px solid #CCC;
+}
+
+input.button {
+  /* 这条规则不会恢复默认渲染*/
+  border: none;
+}
+
+input.button {
+  /* 这条也不会(恢复)! 实际上在浏览器中没有标准方式实现这一目标 */
+  border: auto;
+}
+ +

{{HTMLElement("button")}} 元素有两个问题令人困扰:

+ + + +
<!-- 某些情形下，点击按钮将发送 "<em>Do A</em>" 而不是值"A" -->
+<button type="submit" name="IWantTo" value="A">
+  <em>Do A</em>
+</button>
+ +

给予你的工程限制来选择上述任一种解决方案。

+ +

让我们过一遍CSS

+ +

HTML表单和旧式浏览器最大的问题是CSS的兼容性。正如你可以从这篇文章 Property compatibility table for form widgets 中看到的复杂性, 它非常的困难。即使仍然可以对文本元素（如大小、字体颜色等）进行一些调整，但那样做会有副作用。最好的办法还是不要美化HTML表单小组件。但你仍然可以将样式应用到表单周围的项目上。如果你是一个专业人士，并且你的客户需要那么做，在这种情况下，你可以研究一些硬技能，如 rebuilding widgets with JavaScript。但在那种情况下，最好还是毫不犹豫的让客户收回这些愚蠢的决定。

+ +

功能检测和模拟(polyfills)

+ +

尽管JavaScript在现代浏览中是非常棒的技术，但在旧式浏览器中可能存在很多的问题。

+ +

Unobtrusive JavaScript

+ +

API的兼容性是最大的问题。由于这个原因，与"不引人注意的（unobtrusive）" JavaScript一起工作被认为是最佳实践（译者注：此处意思是说没有/忽略JS或JS出了问题也能工作）。这个开发模式定义了两个需求：

+ + + +

The principles of unobtrusive JavaScript (最早是由Peter-Paul Koch为 Dev.Opera.com 所撰写，现在已转移到 Docs.WebPlatform.org) 同样阐述了上述观点。

+ +

Modernizr 库

+ +

有很多情形，好的"polyfill"能通过提供缺少的API以提供帮助。一个 polyfill 是一些JavaScript(脚本) 用于填补旧式浏览器中的功能缺失。虽然它们可以用来改进对任何功能的支持，并且使用它们Nederland风险小于CSS和HTML，然而，JS仍然会在很多情况下不工作（网络问题，脚本冲突等）。但是对于JavaScript，如果你总是记住和unobetructive的Javascript一起工作，不适用polyfill也没什么大不了。

+ +

最好的polyfill缺失API的方式是使用Modernizr 库以及它的子项目 YepNope. Modernizr 库允许您测试功能可用性，以便采取相应的行动。YepNope 是一个条件加载库。

+ +

下面是一个例子:

+ +
Modernizr.load({
+  // 这会测试您的浏览器是否支持HTML5表单验证API
+  test : Modernizr.formvalidation,
+
+  // 如果浏览器不支持它，则会加载以下polyfill
+  nope : form-validation-API-polyfill.js,
+
+  // 无论如何，你的核心App文件依赖于该API被加载
+  both : app.js,
+
+  // 一旦加载了这两个文件，就会调用该函数来初始化应用程序
+  complete : function () {
+    app.init();
+  }
+});
+ +

Modernizr 团队按照惯例维护着a list of great polyfills。仅仅按需使用即可。

+ +
+

Note: Modernizr还有其他很棒的功能可以帮助您处理unobstructive的JavaScript和优雅的降级技术。请阅读 Modernizr documentation.

+
+ +

注意性能

+ +

尽管像Modernizr这样的脚本对性能非常敏感，但加载200千字节的polyfill仍然会影响程序的性能。这对旧式浏览器来说尤其重要，这些浏览器有处理速度非常慢的JavaScript引擎，让polyfills的执行对于用户来说变得很痛苦。性能本身就是一个主题，但旧式浏览器对它非常敏感：基本上，它们速度慢，需要的poliyfill越多，它们需要处理的JavaScript越多。与现代浏览器相比，它们承受双重负担。使用旧版浏览器测试你的代码，了解它们的实际表现。有时，放弃某些功能会带来更好的用户体验，而不是在所有浏览器中具有完全相同的功能。作为最后提醒，总是优先考虑用户。

+ +

总结

+ +

正如你所看到的，处理旧式浏览器不仅仅是表单问题。而是一整套技术;但是掌握所有这些技术超出了本文的范围。

+ +

如果你阅读了HTML Forms guide中的所有文章，你应该可以放心的使用表单了。如果你想探索新技术，请帮助improve the guide.

+ +

{{PreviousMenuNext("Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git a/files/zh-cn/learn/forms/index.html b/files/zh-cn/learn/forms/index.html new file mode 100644 index 0000000000..ad51eafa35 --- /dev/null +++ b/files/zh-cn/learn/forms/index.html @@ -0,0 +1,77 @@ +--- +title: HTML表单指南 +slug: Learn/HTML/Forms +tags: + - Forms + - HTML + - NeedsTranslation + - TopicStub +translation_of: Learn/Forms +--- +
{{LearnSidebar}}
+ +

这个模块提供了一系列帮助您掌握HTML表单的文章。HTML表单是与用户交互的强大工具;然而，由于历史和技术上的原因，如何充分发挥它们的潜力并不总是显而易见的。在本指南中，我们将介绍HTML表单的所有方面，从结构到样式，从数据处理到自定义小部件。

+ +

预备知识

+ +

在开始这个模块之前，您至少应该完成我们对HTML的介绍。此时此刻，您应该会发现{{anch("基本指南")}}很容易理解，并且能够使用我们的原生表单小部件指南。

+ +

但是模块的其余部分更高级一些，很容易将表单小部件放在页面上，但是如果不使用高级表单特性、CSS和JavaScript，就不能对它们做太多的工作。因此，在您查看其他部分之前，我们建议您先离开，先学习一些CSS和JavaScript。

+ +
+

注意：如果您正在使用一个不能让您创建自己的文件的计算机/平板电脑/其它设备，那么您可以尝试(大多数)在线编码程序中的代码示例，例如JSBin或Thimble。

+
+ +

基本指南

+ +
+
你的第一个HTML表单
+
本系列的第一篇文章提供了您第一次创建HTML表单的经验，包括设计一个简单表单，使用正确的HTML元素实现它，通过CSS添加一些非常简单的样式，以及如何将数据发送到服务器。
+
如何构造HTML表单
+
有了基础知识，我们现在更详细地了解了用于为表单的不同部分提供结构和意义的元素。
+
+ +

什么表单小部件可用?

+ +
+
原生表单小部件
+
现在，我们详细研究了不同表单部件的功能，查看了哪些选项可用于收集不同类型的数据。
+
+ +

验证和提交表单数据

+ +
+
发送表单数据
+
本文讨论当用户提交一个表单时，会发生什么情况——表单数据的去向以及当表单数据到达指定位置时我们如何处理？我们还研究了与发送表单数据相关的一些安全问题。
+
表单数据验证
+
发送数据还不够，我们还需要确保数据用户填写表单的格式是正确的，我们需要成功地处理它，而且它不会破坏我们的应用程序。我们还希望帮助用户正确填写表单，在使用应用程序时不要感到沮丧。表单验证帮助我们实现这些目标，本文将告诉您需要了解的内容。
+
+ +

高级指南

+ +
+
如何构建自定表单小组件
+
在某些情况下，原生表单部件无法提供您需要的东西，例如，由于样式或功能。在这种情况下，您可能需要使用原生HTML构建自己的表单小部件。本文将说明您是如何做到这一点的，以及在实际案例研究中需要注意的事项。
+
通过JavaScript发送表单
+
本文将讨论如何使用表单来组装HTTP请求，并通过定制的JavaScript发送它，而不是标准的表单提交。它还研究了为什么要这么做，以及这样做的意义。（请参阅使用FormData对象。）
+
遗留浏览器中的HTML表单
+
文章覆盖特性检测等。这应该被重定向到跨浏览器测试模块，因为相同的东西在那里被更好地覆盖。
+
+ +

表单样式指南

+ +
+
HTML表单样式
+
本文介绍了使用CSS的样式表单，包括您可能需要了解的基本样式任务的所有基础知识。
+
高级HTML表单样式
+
在这里，我们将看到一些更高级的表单样式技术，这些技术需要在处理一些更难以风格的元素时使用。
+
表单部件的属性兼容性表
+
这最后一篇文章提供了一个方便的参考，允许您查看哪些CSS属性与哪些表单元素是兼容的。
+
+ +

另见

+ + diff --git a/files/zh-cn/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/zh-cn/learn/forms/property_compatibility_table_for_form_controls/index.html new file mode 100644 index 0000000000..31f8075f5b --- /dev/null +++ b/files/zh-cn/learn/forms/property_compatibility_table_for_form_controls/index.html @@ -0,0 +1,1988 @@ +--- +title: 表单组件兼容性列表 +slug: Learn/HTML/Forms/Property_compatibility_table_for_form_widgets +translation_of: Learn/Forms/Property_compatibility_table_for_form_controls +--- +
{{learnsidebar}}{{PreviousMenu("Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}
+ +

下面的兼容性表格尝试总结 HTML 表单的 CSS 支持状况。由于 CSS 和 HTML 表单的复杂性，不能把这些表格当作完善的参考。但是，它们可以让你很好地洞察什么能做什么不能做，这将会对你学习使用有很好地帮助。

+ +

如何阅读表格

+ +

值

+ +

对于每个属性，有四种可能地取值：

+ +
+
YES
+
此属性具有相当一致的跨浏览器支持。在某些极端情况下，你可能仍然会面临奇怪的副作用。
+
PARTIAL
+
尽管这个属性会生效，你还是会经常面对奇怪的副作用和不一致性。你应该尽力避免这些属性，除非你已经深知那些副作用。
+
NO
+
此属性就是不工作或者表现得非常不一致，所以并不可靠。
+
N.A.
+
此属性对这种类型的组件没有意义。
+
+ +

渲染

+ +

对于每个属性有两种可能的渲染方式：

+ +
+
N (Normal)
+
表示这个属性会像设置的那样应用。
+
T (Tweaked)
+
表示这个属性需要通过下列的额外规则来使用：
+
+ +
* {
+/* This turn off the native look and feel on WebKit based browsers */
+  -webkit-appearance: none;
+
+/* This turn off the native look and feel on Gecko based browsers */
+  -moz-appearance: none;
+
+/* This turn off the native look and feel on several different browsers
+   including Opera, Internet Explorer and Firefox */
+  background: none;
+}
+ +

兼容性表格

+ +

Global behaviors

+ +

对许多浏览器来说，许多行为在全局范围内都是通用的：

+ +
+
{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}
+
任意属性可能影响组件部分或全部的原生外观。小心使用。
+
{{cssxref("line-height")}}
+
不同浏览器支持不同，避免使用
+
{{cssxref("text-decoration")}}
+
Opera表单不支持
+
{{cssxref("text-overflow")}}
+
Opera, Safari,  IE9 表单不支持
+
{{cssxref("text-shadow")}}
+
Opera 和 IE9 不支持
+
+ +

Text fields

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes 
{{cssxref("height")}}Partial[1][2]Yes +
    +
  1. WebKit 浏览器 (主要在 Mac OSX and iOS 上) 的搜索域使用原生的样式和行为。因此，需要使用 -webkit-appearance:none 才能将这个属性应用到搜索域上。
    2. +
  2. 在 Windows 7, Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
    3. +
+
{{cssxref("border")}}Partial[1][2]Yes +
    +
  1. WebKit 浏览器 (主要在 Mac OSX and iOS 上) 的搜索域使用原生的样式和行为。因此，需要使用 -webkit-appearance:none 才能将这个属性应用到搜索域上。
    2. +
  2. 在 Windows 7, Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
    3. +
+
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}Partial[1][2]Yes +
    +
  1. WebKit 浏览器 (主要在 Mac OSX and iOS 上) 的搜索域使用原生的样式和行为。因此，需要使用 -webkit-appearance:none 才能将这个属性应用到搜索域上。
    2. +
  2. 在 Windows 7, Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
    3. +
+
Text and font
{{cssxref("color")}}[1]YesYes +
    +
  1. 如果 {{cssxref("border-color")}} 属性没有设置，一些基于 WebKit 的浏览器会将 {{cssxref("color")}} 属性应用到边框上，颜色和 {{HTMLElement("textarea")}} 的字体颜色一样。
    2. +
+
{{cssxref("font")}}YesYes查看有关 {{cssxref("line-height")}} 的注释
{{cssxref("letter-spacing")}}YesYes 
{{cssxref("text-align")}}YesYes 
{{cssxref("text-decoration")}}PartialPartial查看有关 Opera 的注释
{{cssxref("text-indent")}}Partial[1]Partial[1] +
    +
  1. IE9 只在 {{HTMLElement("textarea")}} 上支持这个属性，而 Opera 只在单行文本域中支持。
    2. +
+
{{cssxref("text-overflow")}}PartialPartial 
{{cssxref("text-shadow")}}PartialPartial 
{{cssxref("text-transform")}}YesYes 
Border and background
{{cssxref("background")}}Partial[1]Yes +
    +
  1. WebKit 浏览器 (主要在 Mac OSX and iOS 上) 的搜索域使用原生的样式和行为。因此，需要使用 -webkit-appearance:none 才能将这个属性应用到搜索域上。
    2. +
  2. 在 Windows 7上, Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
    3. +
+
{{cssxref("border-radius")}}Partial[1][2]Yes +
    +
  1. WebKit 浏览器 (主要在 Mac OSX and iOS 上) 的搜索域使用原生的样式和行为。因此，需要使用 -webkit-appearance:none 才能将这个属性应用到搜索域上。
    2. +
  2. 在 Windows 7上, Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
    3. +
  3. 在 Opera 上，只有当边框明确设定时 {{cssxref("border-radius")}} 属性才会应用
    4. +
+
{{cssxref("box-shadow")}}NoPartial[1] +
    +
  1. IE9 不支持这个属性
    2. +
+
+ +

Buttons

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes 
{{cssxref("height")}}Partial[1]Yes +
    +
  1. 这个属性不能应用于 Mac OSX or iOS 上基于 WebKit 的浏览器。
    2. +
+
{{cssxref("border")}}PartialYes 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}Partial[1]Yes +
    +
  1. 这个属性不能应用于 Mac OSX or iOS 上基于 WebKit 的浏览器。
    2. +
+
Text and font
{{cssxref("color")}}YesYes 
{{cssxref("font")}}YesYes查看{{cssxref("line-height")}} 的注意事项。
{{cssxref("letter-spacing")}}YesYes 
{{cssxref("text-align")}}NoNo 
{{cssxref("text-decoration")}}PartialYes 
{{cssxref("text-indent")}}YesYes 
{{cssxref("text-overflow")}}NoNo 
{{cssxref("text-shadow")}}PartialPartial 
{{cssxref("text-transform")}}YesYes 
Border and background
{{cssxref("background")}}YesYes 
{{cssxref("border-radius")}}Yes[1]Yes[1] +
    +
  1. 在 Opera 上，只有当边框明确设定时 {{cssxref("border-radius")}} 属性才会应用
    2. +
+
{{cssxref("box-shadow")}}NoPartial[1] +
    +
  1. IE9 不支持这个属性
    2. +
+
+ +

Number

+ +

在实现了 number 组件的浏览器上，并没有一种标准的方式改变数字组件的样式，值得注意的是 Safari 上的数字输入框不在这个范围内。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes 
{{cssxref("height")}}Partial[1]Partial[1] +
    +
  1. 在 Opera 上，数字选择器缩小时，可能会隐藏域中内容。
    2. +
+
{{cssxref("border")}}YesYes 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}Partial[1]Partial[1] +
    +
  1. 在 Opera 上，数字选择器缩小时，可能会隐藏域中内容。
    2. +
+
Text and font
{{cssxref("color")}}YesYes 
{{cssxref("font")}}YesYes查看{{cssxref("line-height")}} 的注意事项。
{{cssxref("letter-spacing")}}YesYes 
{{cssxref("text-align")}}YesYes 
{{cssxref("text-decoration")}}PartialPartial 
{{cssxref("text-indent")}}YesYes 
{{cssxref("text-overflow")}}NoNo 
{{cssxref("text-shadow")}}PartialPartial 
{{cssxref("text-transform")}}N.A.N.A. 
Border and background
{{cssxref("background")}}NoNo +

支持，但浏览器之间的不一致性太多，所以并不可靠。

+
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
+ +

Check boxes and radio buttons

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}No[1]No[1] +
    +
  1. 一些浏览器会添加额外的边缘，另一些会拉伸组件。
    2. +
+
{{cssxref("height")}}No[1]No[1] +
    +
  1. 一些浏览器会添加额外的边缘，另一些会拉伸组件。
    2. +
+
{{cssxref("border")}}NoNo 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}NoNo 
Text and font
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Border and background
{{cssxref("background")}}NoNo 
{{cssxref("border-radius")}}NoNo 
{{cssxref("box-shadow")}}NoNo 
+ +

Select boxes (single line)

+ +

Firefox 不提供任何方式改变 {{HTMLElement("select")}} 元素的下箭头。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}Partial[1]Partial[1] +
    +
  1. 这个属性在 {{HTMLElement("select")}} 元素上一切正常，但不能用于 {{HTMLElement("option")}} 或者 {{HTMLElement("optgroup")}} 元素。
    2. +
+
{{cssxref("height")}}NoYes 
{{cssxref("border")}}PartialYes 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}No[1]Partial[2] +
    +
  1. 属性可以应用，但 Mac OSX 上浏览器之间的以不一致的方向显示，所以并不可靠。
    2. +
  2. 这个属性在 {{HTMLElement("select")}} 元素上一切正常，但不能用于 {{HTMLElement("option")}} 或者 {{HTMLElement("optgroup")}} 元素。
    3. +
+
Text and font
{{cssxref("color")}}Partial[1]Partial[1] +
    +
  1. 在 Mac OSX 上， 基于 WebKit 的浏览器 不支持将这个属性用于原生组件。它们和 Opera, 在 {{HTMLElement("option")}} 和 {{HTMLElement("optgroup")}} 元素上根本不支持这个属性。
    2. +
+
{{cssxref("font")}}Partial[1]Partial[1] +
    +
  1. 在 Mac OSX 上， 基于 WebKit 的浏览器 不支持将这个属性用于原生组件。它们和 Opera, 在 {{HTMLElement("option")}} 和 {{HTMLElement("optgroup")}} 元素上根本不支持这个属性。
    2. +
+
{{cssxref("letter-spacing")}}Partial[1]Partial[1] +
    +
  1. IE9 不支持将这个属性用于 {{HTMLElement("select")}}, {{HTMLElement("option")}}, 和 {{HTMLElement("optgroup")}} 元素；Mac OSX 上基于 WebKit 的浏览器不支持将这个属性应用于 {{HTMLElement("option")}} 和 {{HTMLElement("optgroup")}} 元素。
    2. +
+
{{cssxref("text-align")}}No[1]No[1] +
    +
  1. Windows 7 上的 IE9 和 Mac OSX 上基于 WebKit 的浏览器，不支持这个组件上的这个属性。
    2. +
+
{{cssxref("text-decoration")}}Partial[1]Partial[1] +
    +
  1. 只有 Firefox 提供了对这个属性的完全支持。Opera 根本不支持这个属性，而其他浏览器只提供了对 {{HTMLElement("select")}} 元素的支持。
    2. +
+
{{cssxref("text-indent")}}Partial[1][2]Partial[1][2] +
    +
  1. 大部分浏览器仅仅支持将这个属性用于 {{HTMLElement("select")}} 元素。
    2. +
  2. IE9 不支持这个属性
    3. +
+
{{cssxref("text-overflow")}}NoNo 
{{cssxref("text-shadow")}}Partial[1][2]Partial[1][2] +
    +
  1. 大部分浏览器仅仅支持将这个属性用于 {{HTMLElement("select")}} 元素。
    2. +
  2. IE9 不支持这个属性
    3. +
+
{{cssxref("text-transform")}}Partial[1]Partial[1] +
    +
  1. 大部分浏览器仅仅支持将这个属性用于 {{HTMLElement("select")}} 元素。
    2. +
+
Border and background
{{cssxref("background")}}Partial[1]Partial[1] +
    +
  1. 大部分浏览器仅仅支持将这个属性用于 {{HTMLElement("select")}} 元素。
    2. +
+
{{cssxref("border-radius")}}Partial[1]Partial[1]
{{cssxref("box-shadow")}}NoPartial[1]
+ +

Select boxes (multiline)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes 
{{cssxref("height")}}YesYes 
{{cssxref("border")}}YesYes 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}Partial[1]Partial[1] +
    +
  1. Opera 在 {{HTMLElement("select")}} 元素上 不支持 {{cssxref("padding-top")}} 和 {{cssxref("padding-bottom")}} 。
    2. +
+
Text and font
{{cssxref("color")}}YesYes 
{{cssxref("font")}}YesYes查看{{cssxref("line-height")}} 的注意事项。
{{cssxref("letter-spacing")}}Partial[1]Partial[1] +
    +
  1. IE9 在 {{HTMLElement("select")}}, {{HTMLElement("option")}}, 和{{HTMLElement("optgroup")}} 元素上不支持这个属性；Mac OSX 上基于 WebKit 的浏览器在 {{HTMLElement("option")}} 和{{HTMLElement("optgroup")}} 元素上不支持这个属性。
    2. +
+
{{cssxref("text-align")}}No[1]No[1] +
    +
  1. Windows 7 上的 IE9 和 Mac OSX 上基于 WebKit 的浏览器，不支持这个组件上的这个属性。
    2. +
+
{{cssxref("text-decoration")}}No[1]No[1] +
    +
  1. 只被 Firefox and IE9+ 支持。
    2. +
+
{{cssxref("text-indent")}}NoNo 
{{cssxref("text-overflow")}}NoNo 
{{cssxref("text-shadow")}}NoNo 
{{cssxref("text-transform")}}Partial[1]Partial[1] +
    +
  1. 大部分浏览器仅仅支持将这个属性用于 {{HTMLElement("select")}} 元素。
    2. +
+
Border and background
{{cssxref("background")}}YesYes 
{{cssxref("border-radius")}}Yes[1]Yes[1] +
    +
  1. 在 Opera 上，只有当边框明确设定时 {{cssxref("border-radius")}} 属性才会应用
    2. +
+
{{cssxref("box-shadow")}}NoPartial[1] +
    +
  1. IE9 不支持这个属性
    2. +
+
+ +

Datalist

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}NoNo 
{{cssxref("height")}}NoNo 
{{cssxref("border")}}NoNo 
{{cssxref("margin")}}NoNo 
{{cssxref("padding")}}NoNo 
Text and font
{{cssxref("color")}}NoNo 
{{cssxref("font")}}NoNo 
{{cssxref("letter-spacing")}}NoNo 
{{cssxref("text-align")}}NoNo 
{{cssxref("text-decoration")}}NoNo 
{{cssxref("text-indent")}}NoNo 
{{cssxref("text-overflow")}}NoNo 
{{cssxref("text-shadow")}}NoNo 
{{cssxref("text-transform")}}NoNo 
Border and background
{{cssxref("background")}}NoNo 
{{cssxref("border-radius")}}NoNo 
{{cssxref("box-shadow")}}NoNo 
+ +

File picker

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}NoNo 
{{cssxref("height")}}NoNo 
{{cssxref("border")}}NoNo 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}NoNo 
Text and font
{{cssxref("color")}}YesYes 
{{cssxref("font")}}No[1]No[1] +
    +
  1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
    2. +
+
{{cssxref("letter-spacing")}}Partial[1]Partial[1] +
    +
  1. 许多浏览器将这个属性应用到选择按钮上。
    2. +
+
{{cssxref("text-align")}}NoNo 
{{cssxref("text-decoration")}}NoNo 
{{cssxref("text-indent")}}Partial[1]Partial[1] +
    +
  1. 它表现的或多或少的像一个组件左侧的边缘。
    2. +
+
{{cssxref("text-overflow")}}NoNo 
{{cssxref("text-shadow")}}NoNo 
{{cssxref("text-transform")}}NoNo 
Border and background
{{cssxref("background")}}No[1]No[1] +
    +
  1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
    2. +
+
{{cssxref("border-radius")}}NoNo 
{{cssxref("box-shadow")}}NoPartial[1] +
    +
  1. IE9 不支持这个属性
    2. +
+
+ +

Date pickers

+ +

许多属性都支持但是浏览器之间的不一致性太多，所以并不可靠。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}NoNo 
{{cssxref("height")}}NoNo 
{{cssxref("border")}}NoNo 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}NoNo 
Text and font
{{cssxref("color")}}NoNo 
{{cssxref("font")}}NoNo 
{{cssxref("letter-spacing")}}NoNo 
{{cssxref("text-align")}}NoNo 
{{cssxref("text-decoration")}}NoNo 
{{cssxref("text-indent")}}NoNo 
{{cssxref("text-overflow")}}NoNo 
{{cssxref("text-shadow")}}NoNo 
{{cssxref("text-transform")}}NoNo 
Border and background
{{cssxref("background")}}NoNo 
{{cssxref("border-radius")}}NoNo 
{{cssxref("box-shadow")}}NoNo 
+ +

Color pickers

+ +

There is currently not enough implementation to get realiable behaviors.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes 
{{cssxref("height")}}No[1]Yes +
    +
  1. Opera 将它像一个选择组件一样，以同样的限制处理。
    2. +
+
{{cssxref("border")}}YesYes 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}No[1]Yes +
    +
  1. Opera 将它像一个选择组件一样，以同样的限制处理。
    2. +
+
Text and font
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Border and background
{{cssxref("background")}}No[1]No[1] +
    +
  1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
    2. +
+
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
+ +

Meters and progress

+ +

There is currently not enough implementation to get realiable behaviors.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes 
{{cssxref("height")}}YesYes 
{{cssxref("border")}}PartialYes 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}YesPartial[1] +
    +
  1. 当 {{cssxref("padding")}} 属性应用于一个 tweaked 元素时，Chrome 会隐藏 {{HTMLElement("progress")}} 和{{HTMLElement("meter")}} 元素。
    2. +
+
Text and font
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Border and background
{{cssxref("background")}}No[1]No[1] +
    +
  1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
    2. +
+
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
+ +

Range

+ +

There is no standard way to change the style of the range grip and Opera has no way to tweak the default rendering of the range widget.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes 
{{cssxref("height")}}Partial[1]Partial[1] +
    +
  1. Chrome 和 Opera 在组件周围添加了一些额外的空白，而 Windows 7 上的 Opera 则拉伸范围选择器的滑块。
    2. +
+
{{cssxref("border")}}NoYes 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}Partial[1]Yes +
    +
  1.  {{cssxref("padding")}} 属性被运用，但是没有任何的视觉效果。
    2. +
+
Text and font
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Border and background
{{cssxref("background")}}No[1]No[1] +
    +
  1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
    2. +
+
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
+ +

Image buttons

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes 
{{cssxref("height")}}YesYes 
{{cssxref("border")}}YesYes 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}YesYes 
Text and font
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Border and background
{{cssxref("background")}}YesYes 
{{cssxref("border-radius")}}Partial[1]Partial[1] +
    +
  1. IE9 不支持这个属性
    2. +
+
{{cssxref("box-shadow")}}Partial[1]Partial[1] +
    +
  1. IE9 不支持这个属性
    2. +
+
+ +

{{PreviousMenu("Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}

+ +

 

+ +

在本单元中

+ + + +

 

diff --git a/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html new file mode 100644 index 0000000000..ed3a4ef0ef --- /dev/null +++ b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html @@ -0,0 +1,369 @@ +--- +title: 发送表单数据 +slug: Learn/HTML/Forms/Sending_and_retrieving_form_data +tags: + - HTML + - HTTP + - Web + - request + - 安全 + - 表单 +translation_of: Learn/Forms/Sending_and_retrieving_form_data +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}

+ +

本文将讨论当用户提交表单时发生了什么——数据去了哪，以及当它到达时该如何处理?我们还研究了与发送表单数据相关的一些安全问题。

+ + + + + + + + + + + + +
预备知识： +

基本计算机素养，对HTML的理解，对HTTP 和服务器端编程的基础知识。

+
目标：了解表单数据提交时发生了什么，包括服务器上如何处理数据的基本概念。
+ +

数据都去哪儿了？

+ +

在这里，我们将讨论在提交表单时数据会发生什么。

+ +

客户端/服务器体系结构

+ +

web基于非常基本的客户端/服务器体系结构，可以总结如下:客户端(通常是web浏览器)向服务器发送请求(大多数情况下是Apache、Nginx、IIS、Tomcat等web服务器)，使用HTTP 协议。服务器使用相同的协议来回答请求。

+ +

A basic schema of the Web client/server architecture

+ +

在客户端，HTML表单只不过是一种方便的用户友好的方式，可以配置HTTP请求将数据发送到服务器。这使用户能够提供在HTTP请求中传递的信息。

+ +
+

注意：为了更好地了解客户端—服务器架构是如何工作的，请阅读我们的服务器端网站编程的第一个步骤模块。

+
+ +

在客户端:定义如何发送数据

+ +

{{HTMLElement("form")}}元素定义了如何发送数据。它的所有属性都是为了让您配置当用户点击提交按钮时发送的请求。两个最重要的属性是{{htmlattrxref("action","form")}}和{{htmlattrxref("method","form")}}。

+ +

 {{htmlattrxref("action","form")}} 属性

+ +

这个属性定义了发送数据要去的位置。它的值必须是一个有效的URL。如果没有提供此属性，则数据将被发送到包含这个表单的页面的URL。

+ +

在这个例子中，数据被发送到一个绝对URL —— http://foo.com：

+ +
<form action="http://foo.com">
+ +

这里，我们使用相对URL——数据被发送到服务器上的不同URL

+ +
<form action="/somewhere_else">
+
+ +

在没有属性的情况下，像下面一样，{{HTMLElement("form")}}数据被发送到表单出现的相同页面上：

+ +
<form>
+ +

许多较老的页面使用下面的符号表示数据应该被发送到包含表单的相同页面；这是必需的，因为直到HTML5{{htmlattrxref("action", "form")}}属性都需要该符号。现在，这不再需要了。

+ +
<form action="#">
+ +
+

注意：可以指定使用HTTPS(安全HTTP)协议的URL。当您这样做时，数据将与请求的其余部分一起加密，即使表单本身是托管在使用HTTP访问的不安全页面上。另一方面，如果表单是在安全页面上托管的，但是您指定了一个不安全的HTTP URL，它带有{{htmlattrxref("action","form")}}属性，所有的浏览器都会在每次尝试发送数据时向用户显示一个安全警告，因为数据不会被加密。

+
+ +

 {{htmlattrxref("method","form")}}属性

+ +

该属性定义了如何发送数据。HTTP协议提供了几种执行请求的方法；HTML表单数据可以通过许多不同的方法进行数据传输，其中最常见的是GET方法和POST方法。

+ +

为了理解这两种方法之间的区别，让我们回过头来看看HTTP是如何工作的。
+ 每当您想要访问Web上的资源时，浏览器都会向URL发送一个请求。
+ HTTP请求由两个部分组成：一个包含关于浏览器功能的全局元数据集的头部，和一个包含服务器处理特定请求所需信息的主体。

+ +
GET 方法
+ +

GET方法是浏览器使用的方法，请求服务器返回给定的资源:“嘿，服务器，我想要得到这个资源。”在这种情况下，浏览器发送一个空的主体。由于主体是空的，如果使用该方法发送一个表单，那么发送到服务器的数据将被追加到URL。

+ +

考虑下面这个表单：

+ +
<form action="http://foo.com" method="get">
+  <div>
+    <label for="say">What greeting do you want to say?</label>
+    <input name="say" id="say" value="Hi">
+  </div>
+  <div>
+    <label for="to">Who do you want to say it to?</label>
+    <input name="to" id="to" value="Mom">
+  </div>
+  <div>
+    <button>Send my greetings</button>
+  </div>
+</form>
+ +

由于已经使用了GET方法，当你提交表单的时候，您将看到www.foo.com/?say=Hi&to=Mom在浏览器地址栏里。

+ +

数据作为一系列的名称/值对被附加到URL。在URL web地址结束之后，我们得到一个问号(?)，后面跟着由一个与符号(&)互相分隔开的名称/值对。在本例中，我们将两个数据传递给服务器。

+ + + +

HTTP请求如下：

+ +
GET /?say=Hi&to=Mom HTTP/2.0
+Host: foo.com
+ +
+

注意：你可以在GitHub 上看到本例子——见 get-method.html (预览版).

+
+ +
POST 方法
+ +

POST方法略有不同。这是浏览器在询问响应时使用与服务器通信的方法，该响应考虑了HTTP请求正文中提供的数据:“嘿，服务器，看一下这些数据，然后给我回一个适当的结果。”如果使用该方法发送表单，则将数据追加到HTTP请求的主体中。

+ +

让我们来看一个例子，这是我们在上面的GET部分中所看到的相同的形式，但是使用{{htmlattrxref("method","form")}}属性设置为post。

+ +
<form action="http://foo.com" method="post">
+  <div>
+    <label for="say">What greeting do you want to say?</label>
+    <input name="say" id="say" value="Hi">
+  </div>
+  <div>
+    <label for="to">Who do you want to say it to?</label>
+    <input name="to" id="to" value="Mom">
+  </div>
+  <div>
+    <button>Send my greetings</button>
+  </div>
+</form>
+ +

当使用POST方法提交表单时，没有数据会附加到URL，HTTP请求看起来是这样的，而请求主体中包含的数据是这样的：

+ +
POST / HTTP/2.0
+Host: foo.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 13
+
+say=Hi&to=Mom
+ +

Content-Length数据头表示主体的大小，Content-Type数据头表示发送到服务器的资源类型。稍后我们将讨论这些标头。

+ +
+

注意：你可以在 GitHub 上看到本例—— 见 post-method.html (预览版).

+
+ +

查看HTTP请求

+ +

HTTP请求永远不会显示给用户(如果您想要看到它们，您需要使用诸如Firefox Network Monitor或Chrome Developer Tools之类的工具)。例如，您的表单数据将显示在Chrome网络选项卡中：

+ +
    +
  1. 按下 F12
    2. +
  2. 选择 "Network"
    3. +
  3. 选择 "All"
    4. +
  4. 在 "Name" 标签页选择 "foo.com"
    5. +
  5. 选择 "Headers"
    6. +
+ +

你可以获得表单数据，像下图显示的那样

+ +

+ +

唯一显示给用户的是被调用的URL。正如我们上面提到的，使用GET请求用户将在他们的URL栏中看到数据，但是使用POST请求用户将不会看到。这一点很重要，有两个原因：

+ +
    +
  1. 如果您需要发送一个密码(或其他敏感数据)，永远不要使用GET方法否则数据会在URL栏中显示，这将非常不安全。
    2. +
  2. 如果您需要发送大量的数据，那么POST方法是首选的，因为一些浏览器限制了URL的大小。此外，许多服务器限制它们接受的URL的长度。
    3. +
+ +

在服务器端:检索数据

+ +

无论选择哪种HTTP方法，服务器都会接收一个字符串并解析，以便将数据作为键/值对序列获取。您访问这个序列的方式取决于您使用的开发平台以及您可能使用的任何特定框架。您使用的技术也决定了如何处理密钥副本；通常，最近收到的密钥的值是优先的。

+ +

例如：原始PHP

+ +

PHP提供了一些全局对象来访问数据。假设您已经使用了POST方法，那么下面的示例将获取数据并将其显示给用户。当然，你对数据的处理取决于你自己。您可以显示它，将它存储到数据库中，通过电子邮件发送它，或者以其他方式处理它。

+ +
<?php
+  // The global $_POST variable allows you to access the data sent with the POST method by name
+  // To access the data sent with the GET method, you can use $_GET
+  $say = htmlspecialchars($_POST['say']);
+  $to  = htmlspecialchars($_POST['to']);
+
+  echo  $say, ' ', $to;
+?>
+ +

这个例子显示了一个带有我们发送的数据的页面。您可以在我们的示例php-example.html中看到这一点——该文件包含与我们之前看到的相同的示例表单，它使用了post的method和php-example.php的action。当提交时，它将表单数据发送到php-example.php，其中包含了上述代码块中所见的php代码。当执行此代码时，浏览器中的输出是Hi Mom。

+ +

+ +
+

注意：当您将本例加载到本地浏览器中时，这个示例将无法工作---浏览器无法解析PHP代码，因此当提交表单时，浏览器只会为您提供下载PHP文件。为了让它生效，您需要通过某种类型的PHP服务器运行这个示例。本地PHP测试的好选择有MAMP(Mac和Windows)和AMPPS(Mac、Windows、Linux)。

+
+ +

例子： Python

+ +

这个例子展示了如何使用Python完成同样的事情——在web页面上显示提交的数据。
+ 这将使用Flask framework来呈现模板、处理表单数据提交等(参见python-example.py)。

+ +
from flask import Flask, render_template, request
+app = Flask(__name__)
+
+@app.route('/', methods=['GET', 'POST'])
+def form():
+    return render_template('form.html')
+
+@app.route('/hello', methods=['GET', 'POST'])
+def hello():
+    return render_template('greeting.html', say=request.form['say'], to=request.form['to'])
+
+if __name__ == "__main__":
+    app.run()
+ +

以上代码中引用的两个模板如下：

+ + + +
+

注意：同样，如果您只是尝试将其直接加载到浏览器中，那么这段代码将无法工作。Python的工作方式与PHP略有不同——要在本地运行此代码，您需要安装Python/pip，然后使用pip3 install flask安装Flask。此时，您应该能够使用python3 python-example.py来运行这个示例，然后在浏览器中导航到localhost:5000。

+
+ +

其他语言和框架

+ +

还有许多其他的服务器端技术可以用于表单处理，包括Perl、Java、 .Net、Ruby等。只挑你最喜欢的用就好。话虽如此，但值得注意的是，直接使用这些技术并不常见，因为这可能很棘手。更常见的是使用许多优秀的框架，这些框架使处理表单变得更容易，例如：

+ + + +

要注意的是，即使使用这些框架，使用表单也不一定很容易。但这比从头开始编写所有功能要简单得多，而且会节省很多时间。

+ +
+

注意：向您介绍任何服务器端语言或框架超出了本文的范围。如果你想要学习这些它们，上面的链接会给你一些帮助。

+
+ +

特殊案例:发送文件

+ +

用HTML表单发送文件是一个特殊的例子。文件是二进制数据——或者被认为是这样的——而所有其他数据都是文本数据。由于HTTP是一种文本协议，所以处理二进制数据有特殊的要求。

+ +

{{htmlattrxref("enctype","form")}} 属性

+ +

该属性允许您指定在提交表单时所生成的请求中的Content-Type的HTTP数据头的值。这个数据头非常重要，因为它告诉服务器正在发送什么样的数据。默认情况下，它的值是application/x-www-form-urlencoded。它的意思是：“这是已编码为URL参数的表单数据。”

+ +

如果你想要发送文件，你需要额外的三个步骤：

+ + + +

例如：

+ +
<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="file">Choose a file</label>
+    <input type="file" id="file" name="myFile">
+  </div>
+  <div>
+    <button>Send the file</button>
+  </div>
+</form>
+ +
+

注意：一些浏览器支持{{HTMLElement("input")}}的{{htmlattrxref("multiple","input")}}属性，它允许只用一个 <input> 元素选择一个以上的文件上传。服务器如何处理这些文件取决于服务器上使用的技术。如前所述，使用框架将使您的生活更轻松。

+
+ +
+

警告：为了防止滥用，许多服务器配置了文件和HTTP请求的大小限制。在发送文件之前，先检查服务器管理员的权限是很重要的。

+
+ +

常见的安全问题

+ +

每次向服务器发送数据时，都需要考虑安全性。到目前为止，HTML表单是最常见的攻击路径(可能发生攻击的地方)。这些问题从来都不是来自HTML表单本身，它们来自于服务器如何处理数据。

+ +

根据你所做的事情，你会遇到一些非常有名的安全问题：

+ +

XSS 和 CSRF

+ +

跨站脚本(XSS)和跨站点请求伪造(CSRF)是常见的攻击类型，它们发生在当您将用户发送的数据显示给这个用户或另一个用户时。

+ +

XSS允许攻击者将客户端脚本注入到其他用户查看的Web页面中。攻击者可以使用跨站点脚本攻击的漏洞来绕过诸如同源策略之类的访问控制。这些攻击的影响可能从一个小麻烦到一个重大的安全风险。

+ +

CSRF攻击类似于XSS攻击，因为它们以相同的方式开始攻击——向Web页面中注入客户端脚本——但它们的目标是不同的。CSRF攻击者试图将权限升级到特权用户(比如站点管理员)的级别，以执行他们不应该执行的操作(例如，将数据发送给一个不受信任的用户)。

+ +

XSS攻击利用用户对web站点的信任，而CSRF攻击则利用网站对其用户的信任。

+ +

为了防止这些攻击，您应该始终检查用户发送给服务器的数据(如果需要显示)，尽量不要显示用户提供的HTML内容。相反，您应该对用户提供的数据进行处理，这样您就不会逐字地显示它。当今市场上几乎所有的框架都实现了一个最小的过滤器，它可以从任何用户发送的数据中删除HTML{{HTMLElement("script")}}、{{HTMLElement("iframe")}} 和{{HTMLElement("object")}} 元素。这有助于降低风险，但并不一定会消除风险。

+ +

SQL注入

+ +

SQL 注入是一种试图在目标web站点使用的数据库上执行操作的攻击类型。这通常包括发送一个SQL请求，希望服务器能够执行它（通常发生在应用服务器试图存储由用户发送的数据时）。这实际上是攻击网站的主要途径之一。 

+ +

其后果可能是可怕的，从数据丢失到通过使用特权升级控制整个网站基础设施的攻击。这是一个非常严重的威胁，您永远不应该存储用户发送的数据，而不执行一些清理工作(例如，在php/mysql基础设施上使用mysql_real_escape_string()。

+ +

HTTP数据头注入和电子邮件注入

+ +

这种类型的攻击出现在当您的应用程序基于表单上用户的数据输入构建HTTP头部或电子邮件时。这些不会直接损害您的服务器或影响您的用户，但它们会引发一个更深入的问题，例如会话劫持或网络钓鱼攻击。

+ +

这些攻击大多是无声的，并且可以将您的服务器变成僵尸。

+ +

偏执:永远不要相信你的用户

+ +

那么，你如何应对这些威胁呢?这是一个远远超出本指南的主题，不过有一些规则需要牢记。最重要的原则是:永远不要相信你的用户，包括你自己；即使是一个值得信赖的用户也可能被劫持。

+ +

所有到达服务器的数据都必须经过检查和消毒。总是这样。没有例外。

+ + + +

如果你遵循这三条规则，你应该避免很多问题，但是如果你想要得到一个有能力的第三方执行的安全检查，这是一个好主意。不要以为你已经看到了所有可能的问题。

+ +
+

注意：我们的服务器端学习主题的网站安全性文章更详细地讨论了上述威胁和潜在的解决方案。

+
+ +

结论

+ +

如您所见，发送表单数据很容易，但要确保应用程序的安全性是很棘手的。请记住，前端开发人员不是应该定义数据安全模型的人。是的，我们将看到，执行客户端数据验证是可能的，但是服务器不能信任这种验证，因为它无法真正知道客户端到底发生了什么。

+ +

相关链接

+ +

如果您想了解更多关于保护web应用程序的信息，您可以深入了解这些资源：

+ + + +

{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}

+ +

在本单元中

+ + diff --git a/files/zh-cn/learn/forms/sending_forms_through_javascript/index.html b/files/zh-cn/learn/forms/sending_forms_through_javascript/index.html new file mode 100644 index 0000000000..8489ff2243 --- /dev/null +++ b/files/zh-cn/learn/forms/sending_forms_through_javascript/index.html @@ -0,0 +1,439 @@ +--- +title: 使用 JavaScript 发送表单 +slug: Learn/HTML/Forms/Sending_forms_through_JavaScript +tags: + - HTML + - HTML表单 + - JavaScript + - Web 表单 + - 示例 + - 表单 + - 高级 +translation_of: Learn/Forms/Sending_forms_through_JavaScript +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms")}}
+ +

正如在前面的文章中讲到的，HTML 表单可以声明式地发送一个 HTTP 请求。 但也可以通过 JavaScript 来为表单准备用于发送的 HTTP 请求。 本文探讨如何做到这一点。

+ +

表单不总是表单

+ +

在开放式Web应用程序中，使用 HTML form 而不是文字表单让人们来填写变得越来越普遍了 — 越来越多的开发人员正致力于控制传输数据。

+ +

获得整体界面的控制

+ +

标准的 HTML 表单提交会加载数据要发送到的URL，这意味着浏览器窗口以整页加载进行导航。 可以通过隐藏闪烁和网络滞后来避免整页加载以提供更平滑的体验。

+ +

许多现代用户界面只使用HTML表单来收集用户的输入。 当用户尝试发送数据时，应用程序将在后台采取控制并且异步地传输数据，只更新UI中需要更改的部分。

+ +

异步地发送任何数据被称为 AJAX，它代表 "Asynchronous JavaScript And XML"。

+ +

表单提交和 AJAX 请求之间的区别?

+ +

AJAX 技术主要依靠 {{domxref("XMLHttpRequest")}} (XHR) DOM 对象。它可以构造 HTTP 请求、发送它们，并获取请求结果。

+ +
+

注意: 老旧的 AJAX 技术可能不依赖 {{domxref("XMLHttpRequest")}}。例如 JSONP 加 eval() 函数。这也行得通，但是有严重的安全问题，不推荐使用它。使用它的唯一原因是为了不支持 {{domxref("XMLHttpRequest")}} 或 JSON的过时浏览器；但是那些浏览器实在是太古老了！避免使用这种技术。

+
+ +

创建之初, {{domxref("XMLHttpRequest")}} 被设计用来将 XML 作为传输数据的格式获取和发送。不过，如今 JSON 已经取代了 XML，而且要常用的多，无论这是不是一件好事。

+ +

但是 XML 和 JSON 都不适合对表单数据请求编码。 表单数据（application/x-www-form-urlencoded）由 URL编码的键/值对列表组成。为了传输二进制数据，HTTP请求被重新整合成multipart/form-data形式。

+ +

如果您控制前端（在浏览器中执行的代码）和后端（在服务器上执行的代码），则可以发送JSON / XML并根据需要处理它们。

+ +

但是，如果你想使用第三方服务，没有那么简单。 有些服务只接受表单数据。 也有使用表单数据更简单的情况。 如果数据是键/值对，或是原始二进制数据，以现有的后端工具不需要额外的代码就可以处理它。

+ +

那么如何发送这样的数据呢？

+ +

发送表单数据

+ +

一共有三种方式来发送表单数据：包括两种传统的方法和一种利用 {{domxref("XMLHttpRequest/FormData","formData")}}对象的新方法.让我们仔细看一下:

+ +

构建 XMLHttpRequest

+ +

{{domxref("XMLHttpRequest")}} 是进行 HTTP 请求的最安全和最可靠的方式。 要使用{{domxref("XMLHttpRequest")}}发送表单数据，请通过对其进行URL编码来准备数据，并遵守表单数据请求的具体细节。

+ +
+

备注：如果想要了解更多关于 XMLHttpRequest 的知识，你可能会对两篇文章感兴趣:An introductory article to AJAX 和更高级点的using XMLHttpRequest.

+
+ +

让我们重建之前的这个例子:

+ +
<button type="button" onclick="sendData({test:'ok'})">点击我！</button>
+ +

正如你所看到的，HTML实际上没什么改变。 不过，JavaScript变得截然不同了：

+ +
function sendData(data) {
+  var XHR = new XMLHttpRequest();
+  var urlEncodedData = "";
+  var urlEncodedDataPairs = [];
+  var name;
+
+  // 将数据对象转换为URL编码的键/值对数组。
+  for(name in data) {
+    urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
+  }
+
+  // 将配对合并为单个字符串，并将所有%编码的空格替换为
+  // “+”字符；匹配浏览器表单提交的行为。
+  urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
+
+  // 定义成功数据提交时发生的情况
+  XHR.addEventListener('load', function(event) {
+    alert('耶! 已发送数据并加载响应。');
+  });
+
+  // 定义错误提示
+  XHR.addEventListener('error', function(event) {
+    alert('哎呀！出问题了。');
+  });
+
+  // 建立我们的请求
+  XHR.open('POST', 'https://example.com/cors.php');
+
+  // 为表单数据POST请求添加所需的HTTP头
+  XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+  // 最后，发送我们的数据。
+  XHR.send(urlEncodedData);
+}
+ +

在线演示：

+ +

{{EmbedLiveSample("手动构建XMLHttpRequest", "100%", 50)}}

+ +
+

注: 当你想要往第三方网站传输数据时，使用{{domxref("XMLHttpRequest")}}会受到同源策略的影响。如果你需要执行跨域请求,你需要熟悉一下CORS和HTTP访问控制.

+
+ +

使用 XMLHttpRequest 和 the FormData object（表单数据对象）

+ +

手动建立一个 HTTP 请求非常困难。 幸运的是，最近的 XMLHttpRequest 规范提供了一种方便简单的方法 — 利用{{domxref("XMLHttpRequest/FormData","FormData")}}对象来处理表单数据请求。

+ +

{{domxref("XMLHttpRequest/FormData","FormData")}} 对象可以用来构建用于传输的表单数据，或是获取表单元素中的数据来管理它的发送方式。 请注意，{{domxref("XMLHttpRequest/FormData","FormData")}} 对象是“只写”的，这意味着您可以更改它们，但不能检索其内容。

+ +

使用这个对象在Using FormData Objects中有详细的介绍，不过这里有两个例子：

+ +

使用一个独立的 FormData 对象

+ +
<button type="button" onclick="sendData({test:'ok'})">点我！</button>
+ +

你应该会觉得那个HTML示例很熟悉。

+ +
function sendData(data) {
+  var XHR = new XMLHttpRequest();
+  var FD  = new FormData();
+
+  // 把我们的数据添加到这个FormData对象中
+  for(name in data) {
+    FD.append(name, data[name]);
+  }
+
+  // 定义数据成功发送并返回后执行的操作
+  XHR.addEventListener('load', function(event) {
+    alert('Yeah! 已发送数据并加载响应。');
+  });
+
+  // 定义发生错误时执行的操作
+  XHR.addEventListener('error', function(event) {
+    alert('Oops! 出错了。');
+  });
+
+  // 设置请求地址和方法
+  XHR.open('POST', 'https://example.com/cors.php');
+
+  // 发送这个formData对象,HTTP请求头会自动设置
+  XHR.send(FD);
+}
+ +

在线演示：

+ +

{{EmbedLiveSample("向FormData对象中手动添加数据", "100%", 50)}}

+ +

使用绑定到表单元素上的 FormData

+ +

你也可以把一个 FormData 对象绑定到一个 {{HTMLElement("form")}} 元素上。这会创建一个代表表单中包含元素的 FormData 。

+ +

这段HTML是典型的情况：

+ +
<form id="myForm">
+  <label for="myName">告诉我你的名字：</label>
+  <input id="myName" name="name" value="John">
+  <input type="submit" value="提交">
+</form>
+ +

但是 JavaScript 接管了这个表单：

+ +
window.addEventListener("load", function () {
+  function sendData() {
+    var XHR = new XMLHttpRequest();
+
+    // 我们把这个 FormData 和表单元素绑定在一起。
+    var FD  = new FormData(form);
+
+    // 我们定义了数据成功发送时会发生的事。
+    XHR.addEventListener("load", function(event) {
+      alert(event.target.responseText);
+    });
+
+    // 我们定义了失败的情形下会发生的事
+    XHR.addEventListener("error", function(event) {
+      alert('哎呀！出了一些问题。');
+    });
+
+    // 我们设置了我们的请求
+    XHR.open("POST", "https://example.com/cors.php");
+
+    // 发送的数据是由用户在表单中提供的
+    XHR.send(FD);
+  }
+
+  // 我们需要获取表单元素
+  var form = document.getElementById("myForm");
+
+  // ...然后接管表单的提交事件
+  form.addEventListener("submit", function (event) {
+    event.preventDefault();
+
+    sendData();
+  });
+});
+ +

在线演示：

+ +

{{EmbedLiveSample("使用绑定到表单元素上的_FormData", "100%", 50)}}

+ +

你甚至可以通过使用表单的{{domxref("HTMLFormElement.elements", "elements")}} 属性来更多的参与此过程，来得到一个包含表单里所有数据元素的列表，并且逐一手动管理他们。想了解更多，请参阅这里的例子：{{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}

+ +

在隐藏的iframe中构建DOM

+ +

最古老的异步发送表单数据方法是用 DOM API 构建表单，然后将其数据发送到隐藏的 {{HTMLElement("iframe")}}。 要获得提交的结果，请获取{{HTMLElement("iframe")}}的内容。

+ +
+

警告：不要使用这项技术。有第三方服务的安全风险，因为它会使你暴露在 脚本注入攻击 中. 如果你使用 HTTPS，它会影响 同源策略, 这可以使 {{HTMLElement("iframe")}} 内容无法访问。然而，该方法可能是你需要支持很古老的浏览器的唯一选择。

+
+ +

下面是个简单的例子:

+ +
<button onclick="sendData({test:'ok'})">点击我！</button>
+ +

所有操作都在下面这段脚本里:

+ +
// 首先创建一个用来发送数据的iframe.
+var iframe = document.createElement("iframe");
+iframe.name = "myTarget";
+
+// 然后，将iframe附加到主文档
+window.addEventListener("load", function () {
+  iframe.style.display = "none";
+  document.body.appendChild(iframe);
+});
+
+// 下面这个函数是真正用来发送数据的.
+// 它只有一个参数,一个由键值对填充的对象.
+function sendData(data) {
+  var name,
+      form = document.createElement("form"),
+      node = document.createElement("input");
+
+  // 定义响应时发生的事件
+  iframe.addEventListener("load", function () {
+    alert("Yeah! Data sent.");
+  });
+
+  form.action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi";
+  form.target = iframe.name;
+
+  for(name in data) {
+    node.name  = name;
+    node.value = data[name].toString();
+    form.appendChild(node.cloneNode());
+  }
+
+  // 表单元素需要附加到主文档中，才可以被发送。
+  form.style.display = "none";
+  document.body.appendChild(form);
+
+  form.submit();
+
+  // 表单提交后，就可以删除这个表单，不影响下次的数据发送。
+  document.body.removeChild(form);
+}
+ +

在线演示：

+ +

{{EmbedLiveSample("在DOM中构建一个隐藏的iframe", "100%", 50)}}

+ +

处理二进制数据

+ +

如果你使用一个含有 <input type="file"> 组件的表格的 {{domxref("XMLHttpRequest/FormData","FormData")}} 对象，传给代码的数据会被自动处理。但是要手动发送二进制数据的话，还有额外的工作要做。

+ +

在现代网络上，二进制数据有很多来源：例如{{domxref("FileReader")}} API、{{domxref("HTMLCanvasElement","Canvas")}} API、WebRTC API，等等。不幸的是，一些过时的浏览器无法访问二进制数据，或是需要非常复杂的工作环境。这些遗留问题已经超出了本文的涵盖范围。如果你想了解更多关于 FileReader API的知识，参阅：如何在web应用程序中使用文件。

+ +

在 {{domxref("XMLHttpRequest/FormData","formData")}} 的帮助下，发送二进制数据非常简单，使用 append() 方法就可以了。如果你必须手动进行，那确实会有一些棘手。

+ +

在下面的例子中，我们使用了{{domxref("FileReader")}} API来访问二进制数据，然后手动构建多重表单数据请求：

+ +
<form id="myForm">
+  <p>
+    <label for="i1">文本数据：</label>
+    <input id="i1" name="myText" value="一些文本数据">
+  </p>
+  <p>
+    <label for="i2">文件数据：</label>
+    <input id="i2" name="myFile" type="file">
+  </p>
+  <button>提交！</button>
+</form>
+ +

如你所见，这个 HTML 只是一个标准的 <form>。没有什么神奇的事情发生。“魔法”都在 JavaScript 里：

+ +
// 因为我们想获取 DOM 节点,
+// 我们在页面加载时初始化我们的脚本.
+window.addEventListener('load', function () {
+
+  // 这些变量用于存储表单数据
+  var text = document.getElementById("i1");
+  var file = {
+        dom    : document.getElementById("i2"),
+        binary : null
+      };
+
+  // 使用 FileReader API 获取文件内容
+  var reader = new FileReader();
+
+  // 因为 FileReader 是异步的, 会在完成读取文件时存储结果
+  reader.addEventListener("load", function () {
+    file.binary = reader.result;
+  });
+
+  // 页面加载时, 如果一个文件已经被选择, 那么读取该文件.
+  if(file.dom.files[0]) {
+    reader.readAsBinaryString(file.dom.files[0]);
+  }
+
+  // 如果没有被选择，一旦用户选择了它，就读取文件。
+  file.dom.addEventListener("change", function () {
+    if(reader.readyState === FileReader.LOADING) {
+      reader.abort();
+    }
+
+    reader.readAsBinaryString(file.dom.files[0]);
+  });
+
+  // 发送数据是我们需要的主要功能
+  function sendData() {
+    // 如果存在被选择的文件，等待它读取完成
+    // 如果没有, 延迟函数的执行
+    if(!file.binary && file.dom.files.length > 0) {
+      setTimeout(sendData, 10);
+      return;
+    }
+
+    // 要构建我们的多重表单数据请求,
+    // 我们需要一个XMLHttpRequest 实例
+    var XHR = new XMLHttpRequest();
+
+    // 我们需要一个分隔符来定义请求的每一部分。
+    var boundary = "blob";
+
+    // 将我们的主体请求存储于一个字符串中
+    var data = "";
+
+    // 所以，如果用户已经选择了一个文件
+    if (file.dom.files[0]) {
+      // 在请求体中开始新的一部分
+      data += "--" + boundary + "\r\n";
+
+      // 把它描述成表单数据
+      data += 'content-disposition: form-data; '
+      // 定义表单数据的名称
+            + 'name="'         + file.dom.name          + '"; '
+      // 提供文件的真实名字
+            + 'filename="'     + file.dom.files[0].name + '"\r\n';
+      // 和文件的MIME类型
+      data += 'Content-Type: ' + file.dom.files[0].type + '\r\n';
+
+      // 元数据和数据之间有一条空行。
+      data += '\r\n';
+
+      // 将二进制数据添加到主体请求中
+      data += file.binary + '\r\n';
+    }
+
+    // 文本数据更简单一些
+    // 在主体请求中开始一个新的部分
+    data += "--" + boundary + "\r\n";
+
+    // 声明它是表单数据，并命名它
+    data += 'content-disposition: form-data; name="' + text.name + '"\r\n';
+    // 元数据和数据之间有一条空行。
+    data += '\r\n';
+
+    // 添加文本数据到主体请求中
+    data += text.value + "\r\n";
+
+    // 一旦完成，“关闭”主体请求
+    data += "--" + boundary + "--";
+
+    // 定义成功提交数据执行的语句
+    XHR.addEventListener('load', function(event) {
+      alert('✌！数据已发送且响应已加载。');
+    });
+
+    // 定义发生错误时做的事
+    XHR.addEventListener('error', function(event) {
+      alert('哎呀！出现了一些问题。');
+    });
+
+    // 建立请求
+    XHR.open('POST', 'https://example.com/cors.php');
+
+    // 添加需要的HTTP头部来处理多重表单数据POST请求
+    XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary);
+
+    // 最后，发送数据。
+    XHR.send(data);
+  }
+
+  // 访问表单…
+  var form = document.getElementById("myForm");
+
+  // …接管提交事件
+  form.addEventListener('submit', function (event) {
+    event.preventDefault();
+    sendData();
+  });
+});
+ +

在线演示：

+ +

{{EmbedLiveSample("发送二进制数据", "100%", 150)}}

+ +

总结

+ +

取决于不同的浏览器，通过 JavaScript 发送数据可能会很简单，也可能会很困难。{{domxref("XMLHttpRequest/FormData","FormData")}} 对象是通用的答案, 所以请毫不犹豫的在旧浏览器上通过polyfill使用它:

+ + + +

{{PreviousMenuNext("Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms")}}

+ +

In this module

+ + diff --git a/files/zh-cn/learn/forms/styling_web_forms/index.html b/files/zh-cn/learn/forms/styling_web_forms/index.html new file mode 100644 index 0000000000..26b94e94e8 --- /dev/null +++ b/files/zh-cn/learn/forms/styling_web_forms/index.html @@ -0,0 +1,388 @@ +--- +title: 样式化 HTML 表单 +slug: Learn/HTML/Forms/Styling_HTML_forms +tags: + - CSS + - Web + - 例子 + - 指导 + - 样式 + - 表单 +translation_of: Learn/Forms/Styling_web_forms +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}

+ +

在这篇文章中，用户将学习如何使用HTML表单和CSS以使页面更加美观。令人惊讶的是，这可能有点棘手。由于历史和技术的原因，表单部件不能很好地与CSS配合工作。 由于这些困难，许多开发人员选择构建自己的HTML小部件以获得更好的控制和视觉观感。 然而，在现代浏览器中，web设计者越来越多地控制表单元素的设计。让我们深入研究。

+ +

为什么使用CSS美化表单组件这么困难？

+ +

在1995年左右的Web早期，表单组件(或控件)在 HTML 2规范中被添加到HTML。由于表单组件的复杂性，实现者选择依靠底层操作系统来管理和渲染它们。

+ +

若干年后，CSS被创建出来了，那么技术上的必要性，就是使用原生组件来实现表单控制，这是因为风格的要求。在CSS的早期，表单样式控制不是优先事项。

+ +

由于用户习惯于各自平台的视觉外观，浏览器厂商不愿意对表单控件样式进行调整;到目前为止，要重建所有控件以使它们可美化仍然是非常困难的。

+ +

即使在今天，仍然没有一个浏览器完全实现了CSS 2.1。然而，随着时间的推移，浏览器厂商已经改进了对表单元素的CSS支持，尽管可用性的声誉不好，但现在已经可以使用CSS来设计HTML表单。

+ +

涉及到CSS，并非所有组件都是平等的

+ +

目前，在使用表单时使用CSS仍然有一些困难。这些问题可以分为三类： 

+ +

好的

+ +

有些元素在跨平台上时很少出现问题。包括以下结构元素：

+ +
    +
  1. {{HTMLElement("form")}}
    2. +
  2. {{HTMLElement("fieldset")}}
    3. +
  3. {{HTMLElement("label")}}
    4. +
  4. {{HTMLElement("output")}}
    5. +
+ +

这还包括所有文本字段小部件（单行和多行）和按钮。

+ +

不好的

+ +

一些元素难以被美化，并且可能需要一些复杂的技巧，偶尔需要高级的CSS3知识。

+ +

这些包括{{HTMLElement("legend")}}元素，但不能在所有平台上正确定位。 Checkbox和radio按钮也不能直接应用样式，但是，感谢CSS3，你可以解决这个问题。{{htmlattrxref("placeholder", "input")}} 的内容不能以任何标准方式应用样式，但是实现它的所有浏览器也都实现了私有的CSS伪元素或伪类，让你可以对其定义样式。

+ +

我们会在如何构建自定义表单挂件一文中讲述如何处理更多特定的问题。

+ +

丑陋的

+ +

有些元素根本不能用应用CSS样式。 这些包括：所有高级用户界面小部件，如范围，颜色或日期控件; 和所有下拉小部件，包括{{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}}和{{HTMLElement("datalist")}} 元素。 文件选择器小部件也被称为不可样式化。 新的{{HTMLElement("progress")}}和{{HTMLElement("meter")}} 元素也属于这个类别。

+ +

所有这些小部件的主要问题来自于它们具有非常复杂的结构，而CSS目前还不足以表达这些小部件的所有细微部分。 如果你想定制这些小部件，你必须依靠JavaScript来构建一个你能够应用样式的DOM树。我们会在 How to build custom form widgets一文中探索如何实现这一点。

+ +

基本样式美化

+ +

为了使用CSS美化容易被美化的元素，你并不会碰到任何困难，因为它们的大部分行为同其他HTML元素差不多。但是，每个浏览器的用户代理样式表可能会有点不一致，所以有一些技巧可以帮助您更轻松地设计它们。

+ +

Search字段

+ +

搜索框是唯一一种应用CSS样式有点棘手的文本字段。 在基于WebKit的浏览器（Chrome，Safari等）上，您必须使用-webkit-appearance专有属性来调整它。 我们在文章中进一步讨论这个属性：HTML表单的高级样式。

+ +

Example

+ +
<form>
+  <input type="search">
+</form>
+
+ +
input[type=search] {
+  border: 1px dotted #999;
+  border-radius: 0;
+
+  -webkit-appearance: none;
+}
+ +

This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance

+ +

截图中是 Chrome 浏览器中的两个搜索框，在我们的例子中，两个搜索框均被设置为有边框。第一个没有使用-webkit-appearance渲染，而第二个使用了 -webkit-appearance:none. 两者的不同显而易见。

+ +

字体和文本

+ +

CSS font和text功能能被很容易的应用到任何组件上（当然你可以在form组件上使用{{cssxref("@font-face")}} ）。然而，浏览器的行为经常不一致。默认情况下，一些组件不会从它们的父元素继承 {{cssxref("font-family")}}和 {{cssxref("font-size")}} 。相反，许多浏览器使用系统默认的字体和文本。为了让form表单的外观和其他内容保持一致，你可以在你的样式表中增加以下内容:

+ +
button, input, select, textarea {
+  font-family : inherit;
+  font-size   : 100%;
+}
+ +

下面的截图显示了不同之处; 左边是Mac OS X上Firefox中元素的默认渲染，其中使用了平台的默认字体样式。 在右边是相同的元素，应用了我们的字体统一样式规则。

+ +

This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization

+ +

关于使用系统默认样式的表单还是使用设计用于匹配内容的自定义样式表单，有很多争议。 作为网站或Web应用程序的设计者，您可以自己做出决定。

+ +

盒子模型

+ +

所有文本字段都完全支持与CSS盒模型相关的每个属性({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, 和 {{cssxref("border")}})。 但是，像以前一样，浏览器在显示这些小部件时依赖于系统默认的样式。 您需要定义如何将其融入到您的内容中。 如果你既想保持小部件的原生外观和感觉，又想给他们一个一致的尺寸，那么你会遇到一些困难(如果你想保持组件的原生观感，又想给它们一致的大小，你会面临一些困难)。

+ +

这是因为每个小部件都有自己的边框，填充和边距的规则。 所以如果你想给几个不同的小部件相同的大小，你必须使用{{cssxref("box-sizing")}} 属性：

+ +
input, textarea, select, button {
+  width : 150px;
+  margin: 0;
+
+  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
+     -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
+          box-sizing: border-box;
+}
+ +

This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing.

+ +

在上面的屏幕截图中，左侧的列没有{{cssxref("box-sizing")}}，而右侧的列使用了这个属性和border-box。 请注意我们是怎样确保所有元素都占用相同的空间量，尽管平台对每种窗口小部件都有默认规则。

+ +

定位（Positioning）

+ +

HTML表单部件的定位通常不是问题; 但是，您应该特别注意两点：

+ +

legend

+ +

{{HTMLElement("legend")}}元素易于应用CSS，除了定位。在所有浏览器中， {{HTMLElement("legend")}} 元素定位是其 {{HTMLElement("fieldset")}} 父元素的上边框的最顶端。在HTML流中无法改变它的绝对位置，无法让其远离顶部边框。然而，你可以使用 {{cssxref("position")}} 属性将其位置设置为绝对或相对。除此之外，它近几年是fieldset边框的一部分。

+ +

由于{{HTMLElement("legend")}}元素对可访问性非常重要，因为它能被无障碍技术作为每个fieldset中的表单元素的标签读出来，它通常与标题配对，并且在无障碍中被隐藏 。例如:

+ +
HTML
+ +
<fieldset>
+  <legend>Hi!</legend>
+  <h1>Hello</h1>
+</fieldset>
+ +
CSS
+ +
legend {
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+ +

textarea

+ +

默认情况下，所有浏览器都认为{{HTMLElement("textarea")}} 元素是inline block，与文本底线对齐。 这很少是我们真正想看到的。 要将内联(inline-block)块更改为块(block)，使用{{cssxref("display")}}属性非常简单。 但是如果你想以inline方式使用它，通常改变垂直对齐方式：

+ +
textarea {
+  vertical-align: top;
+}
+ +

示例

+ +

让我们来看一个样式化 HTML 表单的实际的案例。这有助于理清这里面的许多概念。我们将构建下面的"明信片" 联系人表单：

+ +

This is what we want to achieve with HTML and CSS

+ +

如果你想继续关注这个例子，复制我们的 postcard-start.html 文件，并遵循接下来的指导操作。

+ +

The HTML

+ +

HTML 只比我们在 the first article of this guide 中涉及到的多一些；它只有一些额外的 id 和 title。

+ +
<form>
+  <h1>to: Mozilla</h1>
+
+  <div id="from">
+    <label for="name">from:</label>
+    <input type="text" id="name" name="user_name">
+  </div>
+
+  <div id="reply">
+    <label for="mail">reply:</label>
+    <input type="email" id="mail" name="user_email">
+  </div>
+
+  <div id="message">
+    <label for="msg">Your message:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </div>
+
+  <div class="button">
+    <button type="submit">Send your message</button>
+  </div>
+</form>
+ +

将上面的代码添加到你 HTML 的 body 中。

+ +

组织你的静态文件

+ +

好戏要开始了! 在开始写代码之前，我们需要三个额外的静态文件：

+ +
    +
  1. 明信片的背景——下载这幅图片，把它和你的 HTML 文件保存在相同目录下。
    2. +
  2. 打字机字体：源自 fontsquirrel.com 的 "Secret Typewriter“ 字体——将TTF文件下载到和上面相同的文件夹里。
    3. +
  3. 手绘字体：源自 fontsquirrel.com 的 The "Journal" 字体  —— 将TTF文件下载到和上面相同的文件夹里。
    4. +
+ +

在你开始之前需要对字体做一些处理：

+ +
    +
  1. 打开 fontsquirrel 网络字体生成器.
    2. +
  2. 使用表单，上传你的字体文件并生成一个网络字体包，将这个包下载到你的电脑上。
    3. +
  3. 解压提供的 zip 文件。
    4. +
  4. 再解压后的文件内容里你会找到两个  .woff 文件和两个.woff2 文件。将这四个文件拷贝到一个叫 fonts 的文件夹里，而fonts 文件夹位于和上面相同的文件夹里。我们为每种字体使用两个不同的文件以最大限度地保证浏览器兼容性。查看我们的 Web 字体 一文获取更多信息。
    5. +
+ +

CSS

+ +

现在我们可以深入探究本例的 CSS 了。将下面所有的代码块一个接一个地加到{{htmlelement("style")}} 元素里。

+ +

首先，我们要准备一些基础。这需要定义 {{cssxref("@font-face")}} 规则，以及所有的 {{HTMLElement("body")}} 元素和 {{HTMLElement("form")}} 元素基本规则：

+ +
@font-face {
+    font-family: 'handwriting';
+    src: url('fonts/journal-webfont.woff2') format('woff2'),
+         url('fonts/journal-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'typewriter';
+    src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
+         url('fonts/veteran_typewriter-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+body {
+  font  : 21px sans-serif;
+
+  padding : 2em;
+  margin  : 0;
+
+  background : #222;
+}
+
+form {
+  position: relative;
+
+  width  : 740px;
+  height : 498px;
+  margin : 0 auto;
+
+  background: #FFF url(background.jpg);
+}
+ +

现在我们可以定位我们的元素，包括标题和其他表单元素：

+ +
h1 {
+  position : absolute;
+  left : 415px;
+  top  : 185px;
+
+  font : 1em "typewriter", sans-serif;
+}
+
+#from {
+  position: absolute;
+  left : 398px;
+  top  : 235px;
+}
+
+#reply {
+  position: absolute;
+  left : 390px;
+  top  : 285px;
+}
+
+#message {
+  position: absolute;
+  left : 20px;
+  top  : 70px;
+}
+ +

现在我们开始处理表单元素本身。首先，让我们确保 {{HTMLElement("label")}} 被赋予了正确的字体：

+ +
label {
+  font : .8em "typewriter", sans-serif;
+}
+ +

文本域需要一些通用的规则，我们只需简单的移除 {{cssxref("border","borders")}} 和 {{cssxref("background","backgrounds")}}, 并重新定义其{{cssxref("padding")}} 和 {{cssxref("margin")}}：

+ +
input, textarea {
+  font    : .9em/1.5em "handwriting", sans-serif;
+
+  border  : none;
+  padding : 0 10px;
+  margin  : 0;
+  width   : 240px;
+
+  background: none;
+}
+ +

当其中的一个域获得焦点后，我们用浅灰色、半透明的背景高亮它们，注意添加{{cssxref("outline")}} 属性非常重要，这样可以移除由某些浏览器添加的默认高亮效果：

+ +
input:focus, textarea:focus {
+  background   : rgba(0,0,0,.1);
+  border-radius: 5px;
+  outline      : none;
+}
+ +

现在我们的文本域已经完成了，我们需要调整单行和多行文本域的显示，使其能够匹配，因为通常情况下它们不会以默认的设置而具有一样的外观。

+ +

单行文本需要一些调整才能在 Internet Explorer 中渲染良好。Internet Explorer 没有基于字体的自然高度来定义文本域的高度（而这是所有其他浏览器都有的行为）。为了修正这个问题，我们需要给域添加一个确定的高度，像下面这样：

+ +
input {
+    height: 2.5em; /* for IE */
+    vertical-align: middle; /* This is optional but it makes legacy IEs look better */
+}
+ +

{{HTMLElement("textarea")}} 元素默认地被渲染成一个块级元素。这里有重要地两点是 {{cssxref("resize")}} 和 {{cssxref("overflow")}} 属性。因为我们的设计是一个固定大小的设计，所以我们会使用 resize 属性来防止用户调整我们的多行文本域的大小。{{cssxref("overflow")}} 属性是用来让域在不同的浏览器上渲染得更一致。一些浏览器默认值为 auto，而一些将默认值设为 scroll。在我们得例子中，最好确定每个浏览器都使用 auto：

+ +
textarea {
+  display : block;
+
+  padding : 10px;
+  margin  : 10px 0 0 -10px;
+  width   : 340px;
+  height  : 360px;
+
+  resize  : none;
+  overflow: auto;
+}
+ +

{{HTMLElement("button")}} 元素上使用 CSS 非常方便；你可以做你任何想做得事情，甚至包括使用 伪元素：

+ +
button {
+  position     : absolute;
+  left         : 440px;
+  top          : 360px;
+
+  padding      : 5px;
+
+  font         : bold .6em sans-serif;
+  border       : 2px solid #333;
+  border-radius: 5px;
+  background   : none;
+
+  cursor       : pointer;
+
+-webkit-transform: rotate(-1.5deg);
+   -moz-transform: rotate(-1.5deg);
+    -ms-transform: rotate(-1.5deg);
+     -o-transform: rotate(-1.5deg);
+        transform: rotate(-1.5deg);
+}
+
+button:after {
+  content: " >>>";
+}
+
+button:hover,
+button:focus {
+  outline   : none;
+  background: #000;
+  color   : #FFF;
+}
+ +

瞧！

+ +
+

注意：如果你的例子没有像你预期的那样工作，你想将它同我们的版本检查对比，你可以在Github 上找到它 —— 查看 在线演示 (也可以查看源代码)。

+
+ +

总结

+ +

如你所见，若我们想构建只包含文本域和按钮的表单，用 CSS 美化它们非常容易。如果你想要知道更多能够让你的处理表单组件时更轻松的 CSS 小技巧，看一看 normalize.css 项目的表单部分。

+ +

下一篇文章中，我们将会看到如何处理落入"不好的" 和"丑陋的" 分类的表单组件。

+ +

{{PreviousMenuNext("Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}

+ +

在本单元中

+ + diff --git a/files/zh-cn/learn/forms/your_first_form/index.html b/files/zh-cn/learn/forms/your_first_form/index.html new file mode 100644 index 0000000000..5b0adc1480 --- /dev/null +++ b/files/zh-cn/learn/forms/your_first_form/index.html @@ -0,0 +1,266 @@ +--- +title: 创建我的第一个表单 +slug: Learn/HTML/Forms/Your_first_HTML_form +translation_of: Learn/Forms/Your_first_form +--- +

{{LearnSidebar}}{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}

+ +

本系列的第一篇文章提供了您第一次创建HTML表单的经验，包括设计一个简单表单，使用正确的HTML元素实现它，通过CSS添加一些非常简单的样式，以及如何将数据发送到服务器。

+ + + + + + + + + + + + +
预备知识： +

基本计算机素养和对HTML的基本理解。

+
目标：为了熟悉HTML表单是什么，它们被用来做什么，如何设计它们，以及简单情况下需要的基本HTML元素。
+ +

HTML表单是什么？

+ +

HTML表单是用户和web站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到web站点。大多数情况下，数据被发送到web服务器，但是web页面也可以自己拦截它并使用它。

+ +

HTML表单是由一个或多个小部件组成的。这些小部件可以是文本字段(单行或多行)、选择框、按钮、复选框或单选按钮。大多数情况下，这些小部件与描述其目的的标签配对——正确实现的标签能够清楚地指示视力正常的用户和盲人用户输入表单所需的内容。

+ +

HTML表单和常规HTML文档的主要区别在于，大多数情况下，表单收集的数据被发送到web服务器。在这种情况下，您需要设置一个web服务器来接收和处理数据。如何设置这样的服务器超出了本文的范围，但是如果您想了解更多，请参阅模块后面的发送表单数据。

+ +

设计表单

+ +

在开始编写代码之前，最好先退一步，花点时间考虑一下您的表单。设计一个快速的模型将帮助您定义您想要询问用户的正确的数据集。从用户体验(UX)的角度来看，要记住：表单越大，失去用户的风险就越大。保持简单，保持专注:只要求必要的数据。在构建站点或应用程序时，设计表单是非常重要的一步。这超出了本文的范围，涵盖了表单的用户体验，但是如果您想深入了解这个主题，您应该阅读下面的文章:

+ + + +

在本文中，我们将构建一个简单的联系人表单。让我们做一个粗略的草图。

+ +

The form to build, roughly sketch

+ +

我们的表单将包含三个文本字段和一个按钮。我们向用户询问他们的姓名、电子邮件和他们想要发送的信息。点击这个按钮将把他们的数据发送到一个web服务器。

+ +

主动学习:使用HTML实现我们的表单

+ +

好了，现在我们准备进入HTML代码并对表单进行编码。为了构建我们的联系人表单，我们将使用以下HTML元素:{{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, and {{HTMLElement("button")}}.

+ +

在进一步讨论之前，先创建一个简单HTML模板的本地副本—您将在这里输入您的表单HTML。

+ +

{{HTMLElement("form")}} 元素

+ +

所有HTML表单都以一个{{HTMLElement("form")}}元素开始：

+ +
<form action="/my-handling-form-page" method="post">
+
+</form>
+ +

这个元素正式定义了一个表单。就像{{HTMLElement("div")}}元素或{{HTMLElement("p")}}元素，它是一个容器元素，但它也支持一些特定的属性来配置表单的行为方式。它的所有属性都是可选的，但实践中最好至少要设置action属性和method属性。

+ + + +
+

注意:如果您想深入了解这些属性是如何工作的，那么将在发送表单数据文章中详细说明。

+
+ +

现在，将上面的{{htmlelement("form")}} 元素添加到您的HTML主体中

+ +

{{HTMLelement("label")}}, {{HTMLelement("input")}} 和 {{HTMLelement("textarea")}} 元素

+ +

我们的联系人表单非常简单，包含三个文本字段，每个字段都有一个标签。该名称的输入字段将是一个基本的单行文本字段，电子邮件的输入字段将是一个只接受电子邮件地址的单行文本字段，而消息的输入字段将是一个基本的多行文本字段。

+ +

就HTML代码而言，我们需要如下的东西来实现这些表单小部件：

+ +
<form action="/my-handling-form-page" method="post">
+  <div>
+    <label for="name">Name:</label>
+    <input type="text" id="name">
+  </div>
+  <div>
+    <label for="mail">E-mail:</label>
+    <input type="email" id="mail">
+  </div>
+  <div>
+    <label for="msg">Message:</label>
+    <textarea id="msg"></textarea>
+  </div>
+</form>
+ +

更新您的表单代码，使其看起来像上面的代码。

+ +

使用{{HTMLElement("div")}} 元素可以使我们更加方便地构造我们自己的代码，并且更容易样式化(参见本文后面的文章)。注意在所有{{HTMLElement("label")}}元素上使用for属性；它是将标签链接到表单小部件的一种正规方式。这个属性引用对应的小部件的id。这样做有一些好处。最明显的一个好处是允许用户单击标签以激活相应的小部件。如果您想更好地理解这个属性的其他好处，您可以找到如何构造HTML表单的详细信息。

+ +

在 {{HTMLElement("input")}}元素中，最重要的属性是type 属性。这个属性非常重要，因为它定义了{{HTMLElement("input")}}属性的行为方式。它可以从根本上改变元素，所以要注意它。稍后您将在原生表单控件文章中找到更多关于此的内容。

+ + + +

最后但同样重要的是，要注意<input> 和 <textarea></textarea>的语法。这是HTML的一个奇怪之处。 <input> 标签是一个空元素，这意味着它不需要关闭标签。相反， {{HTMLElement("textarea")}}不是一个空元素，因此必须使用适当的结束标记来关闭它。这对HTML表单的特定特性有影响:定义默认值的方式。要定义{{HTMLElement("input")}}的默认值，你必须使用value 属性，如下所示：

+ +
<input type="text" value="by default this element is filled with this text" />
+ +

相反，如果您想定义{{HTMLElement("textarea")}}的默认值，您只需在{{HTMLElement("textarea")}}元素的开始和结束标记之间放置默认值，就像这样:

+ +
<textarea>by default this element is filled with this text</textarea>
+ +

{{HTMLelement("button")}} 元素

+ +

我们的表格已经快准备好了，我们只需要再添加一个按钮，让用户在填写完表单后发送他们的数据。这是通过使用 {{HTMLelement("button")}} 元素完成的。在 </form>这个结束标签上方添加以下内容：

+ +
<div class="button">
+  <button type="submit">Send your message</button>
+</div>
+
+ +

您会看到{{htmlelement("button")}}元素也接受一个 type属性，它接受submit, reset或者 button 三个值中的任一个。

+ + + +
+

注意：您还可以使用相应类型的 {{HTMLElement("input")}}元素来生成一个按钮，如 <input type="submit">。{{htmlelement("button")}}元素的主要优点是， {{HTMLElement("input")}}元素只允许纯文本作为其标签，而{{htmlelement("button")}}元素允许完整的HTML内容，允许更复杂、更有创意的按钮文本。

+
+ +

基本表单样式

+ +

现在您已经完成了表单的HTML代码，尝试保存它并在浏览器中查看它。
+ 现在，你会看到它看起来很丑。

+ +

+ +
+

注意： 如果你怀疑你的HTML代码不对，试着把它和我们完成的例子进行比较 —— first-form.html (你也可以观看预览版)。

+
+ +

如何排布好表单是公认的难点。这超出了本文的讨论范围，所以现在我们只需要让您添加一些CSS来让它看起来很好。

+ +

首先，在您的HTML头部中添加一个 {{htmlelement("style")}}元素。应该是这样的：

+ +
<style>
+
+</style>
+ +

在样式标签中，添加如下的CSS，如下所示:

+ +
form {
+  /* 居中表单 */
+  margin: 0 auto;
+  width: 400px;
+  /* 显示表单的轮廓 */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+form li + li {
+  margin-top: 1em;
+}
+
+label {
+  /* 确保所有label大小相同并正确对齐 */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input, textarea {
+  /* 确保所有文本输入框字体相同
+     textarea默认是等宽字体 */
+  font: 1em sans-serif;
+
+  /* 使所有文本输入框大小相同 */
+  width: 300px;
+  box-sizing: border-box;
+
+  /* 调整文本输入框的边框样式 */
+  border: 1px solid #999;
+}
+
+input:focus, textarea:focus {
+  /* 给激活的元素一点高亮效果 */
+  border-color: #000;
+}
+
+textarea {
+  /* 使多行文本输入框和它们的label正确对齐 */
+  vertical-align: top;
+
+  /* 给文本留下足够的空间 */
+  height: 5em;
+}
+
+.button {
+  /* 把按钮放到和文本输入框一样的位置 */
+  padding-left: 90px; /* 和label的大小一样 */
+}
+
+button {
+  /* 这个外边距的大小与label和文本输入框之间的间距差不多 */
+  margin-left: .5em;
+}
+ +

现在，它看起来没那么丑了。

+ +

+ +
+

注意: 你可以在GitHub上的这里找到它 first-form-styled.html (也可以在这儿看运行结果).

+
+ +

向您的web服务器发送表单数据

+ +

最后一部分，也许是最棘手的部分，是在服务器端处理表单数据。如前所述，大多数时候HTML表单是向用户请求数据并将其发送到web服务器的一种方便的方式。

+ +

{{HTMLelement("form")}} 元素将定义如何通过action 属性和 method属性来发送数据的位置和方式。

+ +

但这还不够。我们还需要为我们的数据提供一个名称。这些名字对双方都很重要：在浏览器端，它告诉浏览器给数据各自哪个名称，在服务器端，它允许服务器按名称处理每个数据块。

+ +

要将数据命名为表单，您需要在每个表单小部件上使用 name 属性来收集特定的数据块。让我们再来看看我们的表单代码:

+ +
<form action="/my-handling-form-page" method="post">
+  <div>
+    <label for="name">Name:</label>
+    <input type="text" id="name" name="user_name">
+  </div>
+  <div>
+    <label for="mail">E-mail:</label>
+    <input type="email" id="mail" name="user_email">
+  </div>
+  <div>
+    <label for="msg">Message:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </div>
+
+  ...
+ +

在我们的例子中，表单会发送三个已命名的数据块 "user_name", "user_email", 和 "user_message"。这些数据将用使用HTTP POST 方法,把信息发送到URL为 "/my-handling-form-page"目录下。

+ +

在服务器端，位于URL"/my-handling-form-page" 上的脚本将接收的数据作为HTTP请求中包含的3个键/值项的列表。这个脚本处理这些数据的方式取决于您。每个服务器端语言(PHP、Python、Ruby、Java、c等等)都有自己的机制。深入到这个主题已经超出了本指南的范围，但是如果您想了解更多，我们已经在发送表单数据文章中提供了一些示例。 

+ +

总结

+ +

祝贺您，您已经构建了您的第一个HTML表单。它看起来就像这样:

+ +

{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/HTML/Forms/Your_first_HTML_form/Example') }}

+ +

然而，这仅仅是开始，现在是时候深入研究了。HTML表单比我们在这里看到的要强大得多，本指南的其他文章将帮助您掌握其余部分。

+ +

{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}

diff --git a/files/zh-cn/learn/how_the_internet_works/index.html b/files/zh-cn/learn/how_the_internet_works/index.html deleted file mode 100644 index ab8eee6e1a..0000000000 --- a/files/zh-cn/learn/how_the_internet_works/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: 互联网是如何工作的 -slug: learn/How_the_Internet_works -translation_of: Learn/Common_questions/How_does_the_Internet_work ---- -
-

 这篇文章讨论什么是互联网以及它是如何工作的.

-
- - - - - - - - - - - - -
前提:无，但是鼓励先去阅读 关于设定项目目标的文章
目标:你将会学习到网络的基础技术，以及它与互联网的区别.
- -

概述

- -

互联网是网络的支柱，以这种技术为基础使网络成为可能。作为基础，互联网是把电脑互相连接起来的一个巨大网络。

- -

互联网的历史有些模糊不清。它始于1960年美国军方资助的研究项目。1980年在许多公共大学和公司的支持下，它演变为一种公共基础设施。随着时间的变化，各种各样的技术支持着互联网的发展，但是它的工作方式却没有改变多少：互联网确保所有的电脑之间的连接，无论发生什么他们依旧保持连接。

- -

自主学习

- - - -

深入探索

- -

一个简单的网络

- -

当两台电脑需要通信的时候，你必须要连接他们，无论通过有线方式(通常是网线) 还是无线方式（比如 WiFi 或 蓝牙 )。所有现代电脑都支持这些连接。

- -
-

提示: 接下来的内容，我们将只谈论有线连接， 而无线连接的原理与此相同。

-
- -

Two computers linked together

- -

通常一个网络不仅限于两台电脑。你可以尽你所想地连接电脑，但是情况立刻变得复杂了。如果你尝试连接，比如说十台电脑，每台电脑有九个插头，总共需要45条网线。

- -

Ten computers all together

- -

为了解决这个问题，网络上的每台电脑需要链接到一个叫做路由器（router）的特殊小电脑。路由器只干一件事：就像火车站的信号员，它要确保从一台电脑上发出的一条信息可以到达正确的电脑。为了把信息发送给电脑B，电脑A必须把信息发送给路由器，路由器将收到的信息转发给电脑B，并且确保信息不会发送给电脑C。

- -

一旦我们把路由器加入到这个系统，我们的网络中便只需要十条网线：每台电脑一个插口，路由器上十个插口。

- -

Ten computers with a router

- -

网络中的网

- -

到目前为止一切都很好 . 但是我们要连接成百上千，上亿台电脑呢? 当然一台路由器覆盖不了这么远, 但是,如果你阅读得比较认真，我们曾提到路由器像其他电脑一样,所以我们为什么不把两个路由器彼此连接呢?

- -

Two routers linked together

- -

我们把电脑连接路由器, 接着路由器连接路由器,我们就会有无穷的规模。

- -

Routers linked to routers

- -

这样网络越来越接近我们所说的互联网 ，但是我们遗漏了一些东西。我们建立网络是为了我们自己的目的。所以不同的人会建立不同的网络：你的朋友，你的邻居，每个人都可以拥有自己的计算机网络。在你的房子和世界其它地方之间架设电缆将这些不同的网络连接起来是不可能的，那么你该如何处理这件事呢？其实已经有电缆连接到你的房子了，比如，电线和电话。电话基础设施已经可以把你家连接到世界的任何角落，所以它就是我们需要的线。为了连接电话这种网络我们需要一种基础设备叫做调制解调器（modem），调制解调器可以把网络信息变成电话设施可以处理的信息，反之亦然。

- -

A router linked to a modem

- -

这样，我们可以通过电话基础设施相互连接。下一步是把信息从我们的网络发送到我们想要到达的地方。为了做这些，我们需要把我们的网络连接到互联网服务提供商（ISP）。ISP是一家可以管理一些特殊的路由器的公司，这些路由器连接其他ISP的路由器. 你的网络消息可以被ISP捕获并发送到相应的网络。互联网就是由这些所有的网络设施所组成。

- -

Full Internet stack

- -

寻找电脑

- -

如果你想给一台电脑发送一条信息，你必须指明它是哪台电脑。因此，任何连接到网络中的电脑都需要有一个唯一的地址来标记它，叫做 "IP 地址" （IP代表网络协议）。这个地址由四部分被点分隔的数字序列组成，比如：192.168.2.10。

- -

对于电脑这样已经很好了,但是人类却很难记忆这一串地址。为了简单处理，我们给IP地址取一个容易阅读的别名：域名。比如，google.com 被用于IP地址 172.217.7.14。这样我们通过这些域名可以很容易的通过网络连接到电脑.

- -

互联网（Internet）和网络（web）

- -

你可能注意到了, 当我们通过浏览器上网的时候，我们通常是用域名去到达一个网站。这是否意味着互联网（Internet）和网络（Web）是一样的？事实并非这么简单。正如向我们所见，互联网是一种基础的技术，它允许我们把成千上万的电脑连接在一起。在这些电脑中，有 一些电脑（我们称之为网络服务器（Web servers））可以发送一些浏览器可以理解的信息。互联网是基础设施，网络是建立在这种基础设施之上的服务。值得注意的是，一些其他服务运行在互联网之上，比如邮箱和{{Glossary("IRC")}}.

- -

下一步

- - diff --git a/files/zh-cn/learn/how_to_contribute/index.html b/files/zh-cn/learn/how_to_contribute/index.html deleted file mode 100644 index 73d806a1b6..0000000000 --- a/files/zh-cn/learn/how_to_contribute/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: 如何向MDN的学习区做贡献 -slug: learn/How_to_contribute -tags: - - MDN 元信息 - - 初学者 - - 学习 - - 引导 - - 指南 - - 文档 - - 贡献 -translation_of: Learn/How_to_contribute ---- -
{{LearnSidebar}}
- -

可能您是第一次看到这个页面，也可能您经过层层搜索而来。我们猜测您找到这里，是希望向 MDN 学习区做贡献——棒极了！

- -

这篇文档将告诉您如何提高 MDN 学习区资料的质量。您可以做的事情各种各样，取决于您有多少时间，以及您的身份：初学者、Web 开发者，还是教师。

- -
-

注意：这篇指南会告诉您如何撰写文章来帮助他人学习 Web。

-
- -

寻找特定任务

- -

贡献者向学习区做出贡献的方法通常是阅读文章、修复排版错误并提出改进。我们同时欢迎您向我们的 GitHub 源 添加示例。若您还想了解需要做的其他事项，请与我们联系。

- -

在学习新知识的同时做出贡献是一件乐趣无穷的事。如果您感到迷茫或者有疑问，不用犹豫，通过邮件列表或 IRC 频道联系我们（本页底部有更详细的信息）。Chris Mills 是学习区的主题发布人——您也可以直接和他联系。

- -

以下章节为您的任务提供概要思路。

- -

我是初学者

- -

好极了！对于创建学习资源和提供反馈，初学者们至关重要。作为目标受众，您对这些文章具有独特的视角，这让您成为我们团队中的无价之宝。真的，如果您正在通过某篇文章学习知识却卡住了，或者您觉得这篇文章看起来有点令人费解，您既可以自行改正，也可以把问题告诉我们以便我们去改正它。

- -

下面是几种建议的贡献方式：

- -
-
为文章添加标签（5 分钟）
-
为文章添加标签是最简单的贡献方式。利用标签来呈现信息是我们的特色之一，因此添加标签对我们来说是非常有价值的贡献方式。您可以先从还没有标签的词汇条目和学习文章开始。
-
阅读并复核词汇条目（5 分钟）
-
我们希望，作为初学者的您能用您的视角来审视我们所写的内容。如果您感到某个词汇条目难以理解，这说明该条目需要改进。您可以做任何觉得有必要的修改。如果您感到自己的技能不足以修改词汇条目，也可以通过邮件列表告诉我们。
-
撰写词汇条目（20 分钟）
-
这是学习新知识的最有效的方式了。挑选一个想要深入了解的概念，根据您所学的，撰写关于这个概念的词汇条目。“向他人解释”，这是巩固已学知识的最佳方式之一，既帮助您深入理解，同时也帮助了他人。这就是共赢！
-
阅读并复核学习文章（2 小时）
-
这与上述“复核词汇条目”非常类似，只是由于文章更长，因此要花更多时间。
-
- -

我是 Web 开发者

- -

太棒了！我们太需要您的专业技能了，这确保我们向初学者提供的内容技术准确。考虑到这部分内容用于供他人学习，我们希望您提供的解释尽可能表述简单，但又不至于无用。我们首先考虑易于理解，而非过度精确。

- -
-
阅读并复核词汇条目（5 分钟）
-
我们希望作为 Web 开发者的您，能让我们的文章内容技术准确而又不至于太学究气息。您可以做任何认为有必要的修改。如果您想在编辑前讨论内容，可以通过邮件列表或 IRC 频道联系我们。
-
撰写词汇条目（20 分钟）
-
阐述技术词汇是一种很好的学习方法，它能帮助您用准确而简单的方式把握技术细节。初学者非常需要准确清晰的术语定义。我们有许多缺乏定义的术语需要您来完善，请放手去做吧！
-
阅读并复核学习文章 (2 小时)
-
这与上述“复核词汇条目”一样，只是由于文章更长，因此要花更多时间。
-
撰写学习文章 (4 小时或者更多)
-
MDN 缺少朴素直白的文章以介绍如何使用 Web 技术（HTML、CSS、JavaScript 等等）。我们还有很多陈旧的文档内容，需要复核或重构。发挥您的聪明才智，造福 Web 技术初学者吧！
-
创建练习、代码样例或交互式学习工具 (? 小时)
-
亲自实践的学习效果更佳，因此我们希望所有的学习文章都包含“主动学习 (active learning)”材料，比如练习、或者交互式内容。这些材料能够帮助用户熟练运用文章中详述的概念。制作“主动学习”材料的方式很多，比如使用 JSFiddle 或类似工具创建代码样例，或者使用 Thimble 构建可解析的交互式内容。总而言之，释放您的创造力吧！
-
- -

我是教师

- -

MDN 长期以来都拥有卓越的技术，但对于传授知识的最佳方法，我们仍然缺乏深刻的见解。我们需要教育工作者的参与，从而确保我们的材料为读者提供良好而实用的教育方法。

- -
-
阅读并复核词汇条目 (15 分钟)
-
检查词汇条目，并对任何您认为有必要的地方进行修改。如果您想在编辑前讨论内容，可以通过可以通过邮件列表或 IRC 频道联系我们。
-
撰写词汇条目 (1 小时)
-
为了满足初学者的需求，在词汇表中对术语进行清晰简明的定义、对概念进行基本总体的描述至关重要。您的教育经验对于创建优秀的词汇条目大有裨益；我们有许多缺乏定义的术语需要您来完善，请放手去做吧！
-
向文章中添加插图或图表 (1 小时)
-
您一定了解图表在学习材料中的价值。我们的文章内容总是缺乏图表，而您正好可以大展身手。您可以从缺少图表内容的文章中选择一些，为其创建插图。
-
阅读并复核学习文章 (2 小时)
-
这与上述“复核词汇条目”类似，只是由于文章更长，因此要花更多时间。
-
撰写学习文章 (4 小时)
-
我们需要朴素直白的文章，介绍 Web 生态体系以及其他相关的功能主题。这些文章的目标是教育性，而非领域百科。文章应当涉及什么、如何表述，您在这方面的丰富经验大有帮助。
-
创建练习、测验或者交互式学习工具 (? 小时)
-
我们希望所有的学习文章都包含“主动学习 (active learning)”材料，比如练习、或者交互式内容。这些材料能够帮助用户学习并拓展理解文章中详述的概念。您可以做很多事情——创建测验、用 Thimble 构建可解析的交互式内容——总之，释放您的创造力吧！
-
创建学习路线 (? 小时)
-
为了提供循序渐进、易于理解的教程，我们需要把学习材料组织成体系化的路线。这个过程将收集已有的材料，并找出缺失的内容，然后用新文章填补空缺。
-
diff --git a/files/zh-cn/learn/html/forms/advanced_styling_for_html_forms/index.html b/files/zh-cn/learn/html/forms/advanced_styling_for_html_forms/index.html deleted file mode 100644 index 94128b7229..0000000000 --- a/files/zh-cn/learn/html/forms/advanced_styling_for_html_forms/index.html +++ /dev/null @@ -1,467 +0,0 @@ ---- -title: 高级设计 HTML 表单 -slug: Learn/HTML/Forms/Advanced_styling_for_HTML_forms -translation_of: Learn/Forms/Advanced_form_styling ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms/Property_compatibility_table_for_form_widgets", "Learn/HTML/Forms")}}
- -

在本文中，我们将看到HTML表单怎样使用CSS装饰难以定制的表单小部件。如前面章节所示，文本域和按钮完全可以使用CSS，现在我们将深入探索HTML表单样式。

- -

在继续之前，让我们回忆一下两种表单小部件：

- -
-
bad
-
这个元素很难设计，需要一些复杂的技巧，有时还涉及到高级的CSS3的知识。
-
ugly
-
忘记使用CSS来设计这些元素吧。你最多能做一点点事情，还不能保证可以跨浏览器，而且在它们出现时永远不能做到完全的受控。
-
- -

CSS表现力

- -

除了文本框和按钮之外，使用其他表单小部件的主要问题是在许多情况下，CSS的表现不能满足设计复杂的小部件的要求。

- -

HTML和CSS最新的发展扩展了CSS的表现力：

- - - -

所有这一切是一个好的开端，但是有两个问题。首先，一些浏览器不需要实现CSS 2.1之上的特性。其次在设计像日期选择器这样的复杂的小部件时，这些实在不够好。

- -

浏览器厂家在CSS表现力在表单方面的扩展做了一些尝试，在某些情况下，知道什么可用也挺不错的。

- -
-

警告： 尽管 这些尝试很有趣，但它们是非标准的，也就是不可靠的。. 如果你使用它们(也许你并不常用)，你要自己承担风险，使用非标准的属性对于Web并不是好事 。

-
- - - -

控制表单元素的外观

- -

基于WebKit(Chrome, Safari)和 Gecko(Firefox)的浏览器提供更高级的HTML部件定制。它们也实现了跨平台，因此需要一种方式把原生小部件转换为用户可设置样式的小部件。

- -

为此，它们使用了专有属性：{{cssxref("-webkit-appearance")}}或{{cssxref("-moz-appearance")}}。这些属性是非标准的，不应该使用。事实上，它们在WebKit 和Gecko中的表现也是不相同的。然而，有一个值很好用：none，用这个值，你（几乎完全）能控制一个已知小部件的样式。

- -

因此，如果你在应用一个元素的样式时遇到麻烦，可以尝试使用那些专有属性。我们下面有一些例子，这个属性最成功的例子是WebKit浏览器中的搜索域的样式：

- -
<form>
-    <input type="search">
-</form>
- -
<style>
-input[type=search] {
-    border: 1px dotted #999;
-    border-radius: 0;
-
-    -webkit-appearance: none;
-}
-</style>
- -

{{EmbedLiveSample("Controlling_the_appearance_of_form_elements", 250, 40)}}

- -
-

注意：当我们谈及Web技术的时总是很难预测未来。扩展CSS表现力是很困难的，其他规范也做了一些探索性的工作，如Shadow DOM提供了一些观点。可完全设置样式的表单的问题还远未结束。

-
- -

举例

- -

复选框和单选按钮

- -

独自设计复选框或单选按钮的样式是让人抓狂的。例如由于浏览器反应各不相同，在修改复选框和单选按钮的大小时，并不保证确实能改变它们。

- -

一个简单的测试用例

- -

让我们研究一下下面的测试用例：

- -
<span><input type="checkbox"></span>
- -
span {
-    display: inline-block;
-    background: red;
-}
-
-input[type=checkbox] {
-    width : 100px;
-    height: 100px;
-}
- -

这里是不同的浏览器的处理方式：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
浏览器视图
Firefox 57 (Mac OSX)
Firefox 57 (Windows 10)
Chrome 63 (Mac OSX)
Chrome 63 (Windows 10)
Opera 49 (Mac OSX)
Internet Explorer 11 (Windows 10)
Edge 16 (Windows 10)
- -

更复杂的例子

- -

由于Opera和Internet Explorer没有像{{cssxref("-webkit-appearance")}}或{{cssxref("-moz-appearance")}}这样的特性，使用它们是不合适的。幸运的是，CSS有足够多的表现方式可以找到解决方法。让我们做一个很普通的例子：

- -
<form>
-  <fieldset>
-    <p>
-      <input type="checkbox" id="first" name="fruit-1" value="cherry">
-      <label for="first">I like cherry</label>
-    </p>
-    <p>
-      <input type="checkbox" id="second" name="fruit-2" value="banana" disabled>
-      <label for="second">I can't like banana</label>
-    </p>
-    <p>
-      <input type="checkbox" id="third" name="fruit-3" value="strawberry">
-      <label for="third">I like strawberry</label>
-    </p>
-  </fieldset>
-</form>
- -

带有一些基本的样式：

- -
body {
-  font: 1em sans-serif;
-}
-
-form {
-  display: inline-block;
-
-  padding: 0;
-  margin : 0;
-}
-
-fieldset {
-  border : 1px solid #CCC;
-  border-radius: 5px;
-  margin : 0;
-  padding: 1em;
-}
-
-label {
-  cursor : pointer;
-}
-
-p {
-  margin : 0;
-}
-
-p+p {
-  margin : .5em 0 0;
-}
- -
-

注：下面的内容（仅限样式化 checkbox 部分）与英文版出入极大，猜测已经是过时内容

-
- -

现在，让我们设计一个定制复选框的样式

- -

计划用自己的图像替换原生的复选框，首先需要准备复选框在所有状态下的图像，那些状态是：未选、已选、禁用不选、禁用已选。该图像将用作CSS精灵：

- -

Check box CSS Sprite

- -

一开始要隐藏初始复选框。可以简单的把它们从页面视图中拿开。这里要考虑两个重要的事情：

- - - -
:root input[type=checkbox] {
-  /* original check box are push outside the viexport */
-  position: absolute;
-  left: -1000em;
-}
- -

现在加上自己的图像就可以摆脱原来的复选框了，为此，要在初始的复选框后面加上{{HTMLElement("label")}}元素，并使用它的{{cssxref(":before")}}伪元素。因此在下面章节中，要使用selector属性来选择复选框，然后使用adjacent sibling selector来选择原有复选框后面的label。最后，访问{{cssxref(":before")}}伪元素来设计复选框显示定制样式。

- -
:root input[type=checkbox] + label:before {
-  content: "";
-  display: inline-block;
-  width  : 16px;
-  height : 16px;
-  margin : 0 .5em 0 0;
-  background: url("https://developer.mozilla.org/files/4173/checkbox-sprite.png") no-repeat 0 0;
-
-/* The following is used to adjust the position of
-   the check boxes on the text baseline */
-
-  vertical-align: bottom;
-  position: relative;
-  bottom: 2px;
-}
- -

在初始复选框上使用{{cssxref(":checked")}}和{{cssxref(":disabled")}}伪类来改变定制复选框的状态。因为使用了CSS精灵，我们需要做的只是修改背景的位置。

- -
:root input[type=checkbox]:checked + label:before {
-  background-position: 0 -16px;
-}
-
-:root input[type=checkbox]:disabled + label:before {
-  background-position: 0 -32px;
-}
-
-:root input[type=checkbox]:checked:disabled + label:before {
-  background-position: 0 -48px;
-}
- -

最后一件（但是很重要的）事情：当用户使用键盘从一个表单小部件导航到另一个表单小部件时，每个小部件都应该被显式聚焦。因为我们隐藏了初始的复选框，我们必须自己实现这个特性，让用户知道定制复选框在表单中的位置，下列的CSS实现了它们聚焦。

- -
:root input[type=checkbox]:focus + label:before {
-  outline: 1px dotted black;
-}
- -

你可以在线查看结果：

- -

{{EmbedLiveSample("A_more_complex_example", 250, 130)}}

- -

Dealing with the select nightmare

- -

{{HTMLElement("select")}} 元素被认为是一个 "丑陋的" 组件，因为不可能保证它在跨平台时样式化的一致性。然而，有些事情是可能的。废话少说，让我们来看一个例子：

- -
<select>
-  <option>Cherry</option>
-  <option>Banana</option>
-  <option>Strawberry</option>
-</select>
- -
select {
-  width   : 80px;
-  padding : 10px;
-}
-
-option {
-  padding : 5px;
-  color   : red;
-}
- -

下面的表格显示了在两种情况下不同浏览器的处理方式。头两列就是上面的例子。后面两列使用了其他的定制CSS，可以对小部件的外观进行更多的控制：

- -
select, option {
-  -webkit-appearance : none; /* To gain control over the appearance on WebKit/Chromium */
-  -moz-appearance : none; /* To gain control over the appearance on Gecko */
-
-  /* To gain control over the appearance on and Trident (IE)
-     Note that it also works on Gecko and has partial effects on WebKit */
-  background : none;
-}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BrowserRegular renderingTweaked rendering
closedopenclosedopen
Firefox 57 (Mac OSX)
Firefox 57 (Windows 10)
Chrome 63 (Mac OSX)
Chrome 63 (Windows 10)
Opera 49 (Mac OSX)
IE11 (Windows 10)
Edge 16 (Windows 10)
- -

如你所见，计时使用了-*-appearance属性的帮助，任然有一些遗留的问题：

- - - -

在我们的例子中，只使用了三个CSS属性，在考虑使用更多CSS属性时，可以想象是很混乱的。正如我们看到的，CSS始终不适合用来修改这些小部件的外观，但是仍然可以用来稍微做一些事情。如果愿意的话，可以演示一下在不同操作系统和浏览器之间的区别。

- -

我们也可以帮助了解在下一章节中哪个属性更合适：Properties compatibility table for form widgets

- -

走向更完美表单之路：有用的库和polyfills（腻子）

- -

虽然对于复选框和单选按钮而言，CSS的表示方式足够丰富，但是对更高级的小部件来说差距仍然很大。即使可以用{{HTMLElement("select")}}元素作一些事情，但是对file小部件的样式完全没用。对于日期选择器也同样如此。

- -

要实现对表单小部件的完全控制，你别无选择，只能选择依靠JavaScript。在文章How to build custom form widgets中，我们将看到具体的做法，其中还有一些非常有用的库：

- - - -

下面的库不止应用于表单，他们在处理HTML表单时是非常有趣的：

- - - -

记住，使用CSS和JavaScript是有副作用的。所以在选择使用那些库时，应该在脚本失败的情况下能回滚样式表。脚本失败的原因很多，尤其在手机应用中，因此你需要尽可能好的设计你的Web站点或应用。

- -

相关链接

- -

虽然HTML表单使用CSS仍有一些黑洞，但通常也有方法绕过它们。即使没有清楚的，通用的解决方案，但新式的浏览器也提供了新的可能性。目前最好的方法是更多的学习不同浏览器支持CSS的方式，并应用于HTML表单小部件。

- -

在本指南的下一章节中，我们将探讨不同的HTML表单小部件怎样很好的支持更重要的CSS属性：Properties compatibility table for form widgets.

- -

相关链接

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms/Property_compatibility_table_for_form_widgets", "Learn/HTML/Forms")}}

- -

在本单元中

- - - -

- -

diff --git a/files/zh-cn/learn/html/forms/data_form_validation/index.html b/files/zh-cn/learn/html/forms/data_form_validation/index.html deleted file mode 100644 index 62758a26e6..0000000000 --- a/files/zh-cn/learn/html/forms/data_form_validation/index.html +++ /dev/null @@ -1,874 +0,0 @@ ---- -title: 表单数据校验 -slug: Learn/HTML/Forms/Data_form_validation -tags: - - HTML -translation_of: Learn/Forms/Form_validation ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}

- -

表单校验帮助我们确保用户以正确格式填写表单数据，确保提交的数据能使我们的应用程序正常工作。本文将告诉您需要了解的有关表单校验的内容。

- - - - - - - - - - - - -
预备知识：计算机基础能力，对 HTML、CSS 和 JavaScript 有一定的理解。
目标：理解表单校验是什么，为什么它很重要，以及如何实现它。
- -

什么是表单数据校验？

- -

访问任何一个带注册表单的网站，你都会发现，当你提交了没有输入符合预期格式的信息的表单时，注册页面都会给你一个反馈，这些信息可能看起来像下面这样的：

- - - -

这就是表单校验 —— 当你向 Web 应用输入数据时，应用会验证你输入的数据是否是正确的。如果验证通过，应用允许提交这些数据到服务器并储存到数据库中（通常情况下），如果验证未通过，则 Web 应用会提示你有错误的数据，并且一般都会明确的告诉你错误发生在哪里。表单校验可以通过许多不同的方式实现。

- -
-

译者注：下面一段在英文原文中已经删除

-
- -

(事实上，没有人愿意填写表单 —— 很多证据表明，用户对填写表单这件事情都感到很烦恼，如果他们在填写表单的过程中遇到一些自己无法理解的问题，通常都会导致他们直接离开你的 Web 应用，简而言之，表单是一个很烦人的东西。)

- -

我们希望把填写表单变的越简单越好。那么，为什么我们还坚持进行表单的数据校验呢？这有三个最主要的原因：

- - - -
-

警告： 永远不要相信从客户端传递到服务器的数据。 即使您的表单正确验证并防止输入格式错误，恶意用户仍然可以更改网络请求。

-
- -

不同类型的表单数据校验

- -

在 Web 中，你可能会遇见各种不同的表单校验：

- - - -

在真实的项目开发过程中，开发者一般都倾向于使用客户端校验与服务器端校验的组合校验方式以更好的保证数据的正确性与安全性。

- -

使用内置表单数据校验

- -

HTML5 一个特别有用的新功能就是，可以在不写一行脚本代码的情况下，即对用户的输入进行数据校验，这都是通过表单元素的校验属性实现的，这些属性可以让你定义一些规则，用于限定用户的输入，比如某个输入框是否必须输入，或者某个输入框的字符串的最小最大长度限制，或者某个输入框必须输入一个数字、邮箱地址等；还有数据必须匹配的模式。如果表单中输入的数据都符合这些限定规则，那么表示这个表单校验通过，否则则认为校验未通过。

- -

当一个元素校验通过时：

- - - -

如果一个元素未校验通过：

- - - -

input 元素的校验约束 — starting simple

- -

在这一节，我们将会看到一些用于{{HTMLElement("input")}}元素校验的HTML5的特性。

- -

让我们用一个简单的例子开始 — 一个可以让你从香蕉或樱桃中选择你最喜欢的水果的input。 这个包含了一个简单的文本{{HTMLElement("input")}} 和一个与之匹配的label，还有一个 submit {{htmlelement("button")}}。你可以在GitHub fruit-start.html找到源码，在线例子如下:

- - - -

{{EmbedLiveSample("Hidden_code", "100%", 50)}}

- -

开始之前，先拷贝一份 fruit-start.html 放在你硬盘上的新目录里。

- -

required 属性

- -

最简单的HTML5校验功能是 {{htmlattrxref("required", "input")}}属性 — 如果要使输入成为必需的，则可以使用此属性标记元素。 当设置此属性时，如果输入为空，该表单将不会提交（并将显示错误消息），输入也将被视为无效。

- -

添加一个 required 属性到你的 input 元素, 如下所示:

- -
<form>
-  <label for="choose">Would you prefer a banana or cherry?</label>
-  <input id="choose" name="i_like" required>
-  <button>Submit</button>
-</form>
- -

同时注意在示例文件中包含的 CSS :

- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:valid {
-  border: 2px solid black;
-}
- -

以上样式效果为：在校验失败时 输入框会有一个亮红色的虚线边框, 在校验通过时会有一个更微妙的黑色边框。在以下示例中尝试新的行为：

- -

{{EmbedLiveSample("required_属性", "100%", 50)}}

- -

使用正则表达式校验

- -

另一个常用的校验功能是 {{htmlattrxref("pattern","input")}} 属性, 以 Regular Expression 作为 value 值. 正则表达式 (regex) 是一个可以用来匹配文本字符串中字符的组合的模式，所以它们是理想的表单校验器，也可以支持 JavaScript 中许多其它的用途。

- -

正则表达式相当复杂，我们不打算在本文中详尽地教你。

- -

下面是一些例子，让你对它们的工作原理有个基本的了解：

- - - -

你也可以在这些表达式中使用数字和其他字符, 例如:

- - - -

你可以任意地组合这些，你可以任意指定不同的部分:

- - - -

不管怎么说, 让我们来实现这些例子 — 更新你的html文档表单增加一个 pattern 属性, 如下:

- -
<form>
-  <label for="choose">Would you prefer a banana or a cherry?</label>
-  <input id="choose" name="i_like" required pattern="banana|cherry">
-  <button>Submit</button>
-</form>
- - - -

{{EmbedLiveSample("使用正则表达式校验", "100%", 50)}}

- -

这个例子中, 该 {{HTMLElement("input")}} 元素接受两个值中的一个: 字符串 "banana" 或者字符串"cherry".

- -

在这个基础上, 尝试把pattern 属性内部的表达式改变成上面的几个例子, 然后看看这些表达式如何影响您可以输入的值以使输入值有效. 尝试写一些你自己设计的,看看它如何工作。尽量让他们与水果有关这样你的例子才会有意义.

- -
-

注意: 一些 {{HTMLElement("input")}} 元素类型不需要{{htmlattrxref("pattern","input")}} 属性进行校验. 指定特定 email 类型 就会使用匹配电子邮件格式的正则表达式来校验(如果有 {{htmlattrxref("multiple","input")}} 属性请用逗号来分割多个邮箱). 进一步来说, 字段 url 类型则会自动校验输入的是否为一个合法的链接.

-
- -
-

注意: 该 {{HTMLElement("textarea")}} 元素不支持{{htmlattrxref("pattern","input")}} 属性.

-
- -

限制输入的长度

- -

所有文本框 ({{HTMLElement("input")}} 或 {{HTMLElement("textarea")}}) 都可以使用{{htmlattrxref("minlength","input")}} 和 {{htmlattrxref("maxlength","input")}} 属性来限制长度. 如果输入的字段长度小于 {{htmlattrxref("minlength","input")}} 的值或大于 {{htmlattrxref("maxlength","input")}} 值则无效. 浏览器通常不会让用户在文本字段中键入比预期更长的值，不过更精细的设置总归是更好的。

- -

在数字条目中 (i.e. <input type="number">), 该 {{htmlattrxref("min","input")}} 和 {{htmlattrxref("max","input")}} 属性同样提供校验约束.如果字段的值小于{{htmlattrxref("min","input")}} 属性的值或大于 {{htmlattrxref("max","input")}} 属性的值,该字段则无效.

- -

让我来看看另外一个例子. 创建一个 fruit-start.html 文件副本.

- -

现在删除 <body> 元素中的内容, 替换成下面的代码:

- -
<form>
-  <div>
-    <label for="choose">Would you prefer a banana or a cherry?</label>
-    <input id="choose" name="i_like" required minlength="6" maxlength="6">
-  </div>
-  <div>
-    <label for="number">How many would you like?</label>
-    <input type="number" id="number" name="amount" value="1" min="1" max="10">
-  </div>
-  <div>
-    <button>Submit</button>
-  </div>
-</form>
- - - - - -

这里是运行的例子:

- -

{{EmbedLiveSample("限制输入的长度", "100%", 70)}}

- -
-

注意: <input type="number"> (或者其他类型, 像 range) 也可以获取到一个{{htmlattrxref("step", "input")}} 属性, 指定了值在增减过程固定改变的值 (如向上增加和向下减少的按钮).

-
- -

完整的例子

- -

这里就是一个完整的展示 HTML 中使用校验属性的例子:

- -
<form>
-  <p>
-    <fieldset>
-      <legend>Title<abbr title="This field is mandatory">*</abbr></legend>
-      <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">Mr.</label>
-      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Ms.</label>
-    </fieldset>
-  </p>
-  <p>
-    <label for="n1">How old are you?</label>
-    <!-- 这里的pattern属性可以用作不支持number类input浏览器的备用方法
-         请注意当与数字输入框一起使用时，支持pattern属性的浏览器会使它沉默失效。
-         它仅仅是在这里用作备用 -->
-    <input type="number" min="12" max="120" step="1" id="n1" name="age"
-           pattern="\d+">
-  </p>
-  <p>
-    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory">*</abbr></label>
-    <input type="text" id="t1" name="fruit" list="l1" required
-           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
-    <datalist id="l1">
-      <option>Banana</option>
-      <option>Cherry</option>
-      <option>Apple</option>
-      <option>Strawberry</option>
-      <option>Lemon</option>
-      <option>Orange</option>
-    </datalist>
-  </p>
-  <p>
-    <label for="t2">What's your e-mail?</label>
-    <input type="email" id="t2" name="email">
-  </p>
-  <p>
-    <label for="t3">Leave a short message</label>
-    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
-  </p>
-  <p>
-    <button>Submit</button>
-  </p>
-</form>
- -
body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-  margin: 0;
-  padding: 0 5px;
-}
-
-p > label {
-  display: block;
-}
-
-input[type=text],
-input[type=email],
-input[type=number],
-textarea,
-fieldset {
-/* 需要在基于WebKit的浏览器上对表单元素进行恰当的样式设置 */
-  -webkit-appearance: none;
-
-  width : 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-input:invalid {
-  box-shadow: 0 0 5px 1px red;
-}
-
-input:focus:invalid {
-  outline: none;
-}
- -

{{EmbedLiveSample("完整的例子", "100%", 420)}}

- -

自定义错误信息

- -

正如我们上面所看到的例子, 每次我们提交无效的表单数据时, 浏览器总会显示错误信息. 但是显示的信息取决于你所使用的浏览器.

- -

这些自动生成的错误有两个缺点:

- - - - - - - - - - - - - - - - - - - - - - - - - -
在英文页面上的法语反馈信息版本
浏览器渲染
Firefox 17 (Windows 7)Example of an error message with Firefox in French on an English page
Chrome 22 (Windows 7)Example of an error message with Chrome in French on an English page
Opera 12.10 (Mac OSX)Example of an error message with Opera in French on an English page
- -

要自定义这些消息的外观和文本, 你必须使用 JavaScript; 不能使用 HTML 和 CSS 来改变.

- -

HTML5 提供 constraint validation API 来检测和自定义表单元素的状态. 除此之外,他可以改变错误信息的文本. 让我们快速的看一个例子:

- -
<form>
-  <label for="mail">I would like you to provide me an e-mail</label>
-  <input type="email" id="mail" name="mail">
-  <button>Submit</button>
-</form>
- -

在JavaScript 中, 你调用 setCustomValidity() 方法:

- -
var email = document.getElementById("mail");
-
-email.addEventListener("input", function (event) {
-  if (email.validity.typeMismatch) {
-    email.setCustomValidity("I expect an e-mail, darling!");
-  } else {
-    email.setCustomValidity("");
-  }
-});
- -

{{EmbedLiveSample("自定义错误信息", "100%", 50)}}

- -

 使用 JavaScript校验表单

- -

如果你想控制原生错误信息的界面外观，或者你想处理不支持HTML内置表单校验的浏览器，则必须使用 Javascript。

- -

约束校验的 API

- -

越来越多的浏览器支持限制校验API，并且这逐渐变得可靠。这些 API 由成组的方法和属性构成，可在特定的表单元素接口上调用：

- - - -

约束校验的 API 及属性

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
属性描述
validationMessage一个本地化消息，描述元素不满足校验条件时（如果有的话）的文本信息。如果元素无需校验（willValidate 为 false），或元素的值满足校验条件时，为空字符串。
validity一个 {{domxref("ValidityState")}} 对象，描述元素的验证状态。详见有关可能的验证状态的文章。
validity.customError如果元素设置了自定义错误，返回 true ；否则返回false。
validity.patternMismatch如果元素的值不匹配所设置的正则表达式，返回 true，否则返回 false。
-
- 当此属性为 true 时，元素将命中  {{cssxref(":invalid")}} CSS 伪类。
validity.rangeOverflow如果元素的值高于所设置的最大值，返回 true，否则返回 false。
-
- 当此属性为 true 时，元素将命中  {{cssxref(":invalid")}} CSS 伪类。
validity.rangeUnderflow如果元素的值低于所设置的最小值，返回 true，否则返回 false。
-
- 当此属性为 true 时，元素将命中  {{cssxref(":invalid")}} CSS 伪类。
validity.stepMismatch如果元素的值不符合 step 属性的规则，返回 true，否则返回 false。
-
- 当此属性为 true 时，元素将命中  {{cssxref(":invalid")}} CSS 伪类。
validity.tooLong如果元素的值超过所设置的最大长度，返回 true，否则返回 false。
-
- 当此属性为 true 时，元素将命中  {{cssxref(":invalid")}} CSS 伪类。
validity.typeMismatch如果元素的值出现语法错误，返回 true，否则返回 false。
-
- 当此属性为 true 时，元素将命中  {{cssxref(":invalid")}} CSS 伪类。
validity.valid如果元素的值不存在校验问题，返回 true，否则返回 false。
-
- 当此属性为 true 时，元素将命中  {{cssxref(":valid")}} CSS 伪类，否则命中 {{cssxref(":invalid")}} CSS 伪类。
validity.valueMissing如果元素设置了 required 属性且值为空，返回 true，否则返回 false。
-
- 当此属性为 true 时，元素将命中  {{cssxref(":invalid")}} CSS 伪类。
willValidate如果元素在表单提交时将被校验，返回 true，否则返回 false。
- -

约束校验 API 的方法

- - - - - - - - - - - - - - - - - - - - - - -
方法描述
checkValidity()如果元素的值不存在校验问题，返回 true，否则返回 false。如果元素校验失败，此方法会触发{{event("invalid")}} 事件。
{{domxref("HTMLFormElement.reportValidity()")}}如果元素或它的子元素控件符合校验的限制，返回 true . 当返回为 false 时, 对每个无效元素可撤销 {{event("invalid")}} 事件会被唤起并且校验错误会报告给用户 。
-

setCustomValidity(message)

- 		为元素添加一个自定义的错误消息；如果设置了自定义错误消息，该元素被认为是无效的，则显示指定的错误。这允许你使用 JavaScript 代码来建立校验失败，而不是用标准约束校验 API 所提供的。这些自定义信息将在向用户报告错误时显示。
-
- 如果参数为空，则清空自定义错误。
- -

对于旧版浏览器，可以使用 polyfill（例如 Hyperform），来弥补其对约束校验 API 支持的不足。既然你已经使用 JavaScript，在您的网站或 Web 应用程序的设计和实现中使用 polyfill 并不是累赘。

- -

使用约束校验 API 的例子

- -

让我们看看如何使用这个 API 来构建自定义错误消息。首先，HTML：

- -
<form novalidate>
-  <p>
-    <label for="mail">
-      <span>Please enter an email address:</span>
-      <input type="email" id="mail" name="mail">
-      <span class="error" aria-live="polite"></span>
-    </label>
-  </p>
-  <button>Submit</button>
-</form>
- -

这个简单的表单使用 {{htmlattrxref("novalidate","form")}} 属性关闭浏览器的自动校验；这允许我们使用脚本控制表单校验。但是，这并不禁止对约束校验 API的支持或是以下 CSS 伪类：{{cssxref(":valid")}}、{{cssxref(":invalid")}}、{{cssxref(":in-range")}} 、{{cssxref(":out-of-range")}} 的应用。这意味着，即使浏览器在发送数据之前没有自动检查表单的有效性，您仍然可以自己做，并相应地设置表单的样式。

- -

aria-live 属性确保我们的自定义错误信息将呈现给所有人，包括使用屏幕阅读器等辅助技术的人。

- -
CSS
- -

以下 CSS 样式使我们的表单和其错误输出看起来更有吸引力。

- -
/* 仅为了使示例更好看 */
-body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input[type=email]{
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* 校验失败的元素样式 */
-input:invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus:invalid {
-  outline: none;
-}
-
-/* 错误消息的样式 */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -
JavaScript
- -

以下 JavaScript 代码演示如何设置自定义错误校验。

- -
// 有许多方式可以获取 DOM 节点；在此我们获取表单本身和
-// email 输入框，以及我们将放置错误信息的 span 元素。
-
-var form  = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-var error = document.querySelector('.error');
-
-email.addEventListener("input", function (event) {
-  // 当用户输入信息时，校验 email 字段
-  if (email.validity.valid) {
-    // 如果校验通过，清除已显示的错误消息
-    error.innerHTML = ""; // 重置消息的内容
-    error.className = "error"; // 重置消息的显示状态
-  }
-}, false);
-form.addEventListener("submit", function (event) {
-  // 当用户提交表单时，校验 email 字段
-  if (!email.validity.valid) {
-
-    // 如果校验失败，显示一个自定义错误
-    error.innerHTML = "I expect an e-mail, darling!";
-    error.className = "error active";
-    // 还需要阻止表单提交事件，以取消数据传送
-    event.preventDefault();
-  }
-}, false);
- -

这是运行结果：

- -

{{EmbedLiveSample("使用校验约束_API_的例子", "100%", 130)}}

- -

约束校验 API 为您提供了一个强大的工具来处理表单校验，让您可以对用户界面进行远超过仅仅使用 HTML 和 CSS所能得到的控制。

- -

不使用内建 API 时的表单校验

- -

有时，例如使用旧版浏览器或自定义小部件，您将无法（或不希望）使用约束校验API。 在这种情况下，您仍然可以使用 JavaScript 来校验您的表单。 校验表单比起真实数据校验更像是一个用户界面问题。

- -

要校验表单，您必须问自己几个问题：

- -
-
我应该进行什么样的校验？
-
你需要确定如何校验你的数据：字符串操作，类型转换，正则表达式等。这取决于你。 只要记住，表单数据一般都是文本，并总是以字符串形式提供给脚本。
-
如果表单校验失败，我该怎么办?
-
这显然是一个 UI 问题。 您必须决定表单的行为方式：表单是否发送数据？ 是否突出显示错误的字段？是否显示错误消息？
-
如何帮助用户纠正无效数据?
-
为了减少用户的挫折感，提供尽可能多的有用的信息是非常重要的，以便引导他们纠正他们的输入。 您应该提供前期建议，以便他们知道预期的输入是什么以及明确的错误消息。 如果您想深入了解表单校验用户界面要求，那么您应该阅读一些有用的文章： - -
-
- -

不使用约束校验API 的例子

- -

为了说明这一点，让我们重构一下前面的例子，以便它可以在旧版浏览器中使用：

- -
<form>
-  <p>
-    <label for="mail">
-        <span>Please enter an email address:</span>
-        <input type="text" class="mail" id="mail" name="mail">
-        <span class="error" aria-live="polite"></span>
-    </label>
-  <p>
-  <!-- Some legacy browsers need to have the `type` attribute
-       explicitly set to `submit` on the `button`element -->
-  <button type="submit">Submit</button>
-</form>
- -

正如你所看到的，HTML 几乎是一样的；我们只是关闭了 HTML 校验功能。 请注意，ARIA 是与 HTML5 无关的独立规范。

- -
CSS
- -

同样的，CSS也不需要太多的改动， 我们只需将 {{cssxref(":invalid")}} 伪类变成真实的类，并避免使用不适用于 Internet Explorer 6 的属性选择器。

- -
/* 仅为了使示例更好看 */
-body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input.mail {
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* 校验失败的元素样式 */
-input.invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus.invalid {
-  outline: none;
-}
-
-/* 错误消息的样式 */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -
JavaScript
- -

JavaScript 代码有很大的变化，需要做更多的工作。

- -
// 使用旧版浏览器选择 DOM 节点的方法较少
-var form  = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-
-// 以下是在 DOM 中访问下一个兄弟元素的技巧
-// 这比较危险，很容易引起无限循环
-// 在现代浏览器中，应该使用 element.nextElementSibling
-var error = email;
-while ((error = error.nextSibling).nodeType != 1);
-
-// 按照 HTML5 规范
-var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-
-// 许多旧版浏览器不支持 addEventListener 方法
-// 这只是其中一种简单的处理方法
-function addEvent(element, event, callback) {
-  var previousEventCallBack = element["on"+event];
-  element["on"+event] = function (e) {
-    var output = callback(e);
-
-    // 返回 `false` 来停止回调链，并中断事件的执行
-    if (output === false) return false;
-
-    if (typeof previousEventCallBack === 'function') {
-      output = previousEventCallBack(e);
-      if(output === false) return false;
-    }
-  }
-};
-
-// 现在我们可以重构字段的约束校验了
-// 由于不使用 CSS 伪类, 我们必须明确地设置 valid 或 invalid 类到 email 字段上
-addEvent(window, "load", function () {
-  // 在这里验证字段是否为空（请记住，该字段不是必需的）
-  // 如果非空，检查它的内容格式是不是合格的 e-mail 地址
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  email.className = test ? "valid" : "invalid";
-});
-
-// 处理用户输入事件
-addEvent(email, "input", function () {
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-  if (test) {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  } else {
-    email.className = "invalid";
-  }
-});
-
-// 处理表单提交事件
-addEvent(form, "submit", function () {
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  if (!test) {
-    email.className = "invalid";
-    error.innerHTML = "I expect an e-mail, darling!";
-    error.className = "error active";
-
-    // 某些旧版浏览器不支持 event.preventDefault() 方法
-    return false;
-  } else {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  }
-});
- -

该结果如下:

- -

{{EmbedLiveSample("不使用内建_API_时的表单校验", "100%", 130)}}

- -

正如你所看到的，建立自己的校验系统并不难。 困难的部分是使其足够通用，以跨平台和任何形式使用它可以创建。 有许多库可用于执行表单校验; 你应该毫不犹豫地使用它们。 这里有一些例子：

- - - -

 远程校验

- -

在某些情况下，执行一些远程校验可能很有用。 当用户输入的数据与存储在应用程序服务器端的附加数据绑定时，这种校验是必要的。 一个应用实例就是注册表单，在这里你需要一个用户名。 为了避免重复，执行一个 AJAX 请求来检查用户名的可用性，要比让先用户发送数据，然后因为表单重复了返回错误信息要好得多。

- -

执行这样的校验需要采取一些预防措施：

- - - -

结论

- -

表单校验并不需要复杂的 JavaScript，但它需要对用户的仔细考虑。 一定要记住帮助您的用户更正他提供的数据。 为此，请务必：

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}

diff --git a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_1/index.html b/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_1/index.html deleted file mode 100644 index 93cf5069c2..0000000000 --- a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_1/index.html +++ /dev/null @@ -1,418 +0,0 @@ ---- -title: Example 1 -slug: Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_1 -tags: - - HTML - - 表单 -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_1 ---- -

这是第一个如果构建自定义表单小部件的代码解释事例。

- -

基本状态

- -

HTML

- -
<div class="select">
-  <span class="value">Cherry</span>
-  <ul class="optList hidden">
-    <li class="option">Cherry</li>
-    <li class="option">Lemon</li>
-    <li class="option">Banana</li>
-    <li class="option">Strawberry</li>
-    <li class="option">Apple</li>
-  </ul>
-</div>
- -

CSS

- -
/* --------------- */
-/* Required Styles */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Fancy Styles */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
-
- -

基本状态结果

- -
{{ EmbedLiveSample('Basic_state', 120, 130) }}
- -

活动状态

- -

HTML

- -
<div class="select active">
-  <span class="value">Cherry</span>
-  <ul class="optList hidden">
-    <li class="option">Cherry</li>
-    <li class="option">Lemon</li>
-    <li class="option">Banana</li>
-    <li class="option">Strawberry</li>
-    <li class="option">Apple</li>
-  </ul>
-</div>
- -

CSS

- -
/* --------------- */
-/* Required Styles */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Fancy Styles */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

活动状态结果

- -
{{ EmbedLiveSample('Active_state', 120, 130) }}
- -

展开状态

- -

HTML

- -
<div class="select active">
-  <span class="value">Cherry</span>
-  <ul class="optList">
-    <li class="option highlight">Cherry</li>
-    <li class="option">Lemon</li>
-    <li class="option">Banana</li>
-    <li class="option">Strawberry</li>
-    <li class="option">Apple</li>
-  </ul>
-</div>
- -

CSS

- -
/* --------------- */
-/* Required Styles */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Fancy Styles */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0, 0, 0, .45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFF;
-}
- -

展开状态结果

- -
{{ EmbedLiveSample('Open_state', 120, 130) }}
diff --git a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_2/index.html b/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_2/index.html deleted file mode 100644 index 3a9546631f..0000000000 --- a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_2/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: Example 2 -slug: Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_2 -tags: - - HTML - - 表单 -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_2 ---- -

这是解释 如何构建自定义表单小部件的第二个示例。

- -

使用JS

- -

HTML 内容

- -
<form class="no-widget">
-  <select name="myFruit">
-      <option>Cherry</option>
-      <option>Lemon</option>
-      <option>Banana</option>
-      <option>Strawberry</option>
-      <option>Apple</option>
-  </select>
-
-  <div class="select">
-    <span class="value">Cherry</span>
-    <ul class="optList hidden">
-      <li class="option">Cherry</li>
-      <li class="option">Lemon</li>
-      <li class="option">Banana</li>
-      <li class="option">Strawberry</li>
-      <li class="option">Apple</li>
-    </ul>
-  </div>
-<form>
-
- -

CSS 内容

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
-
-/* --------------- */
-/* Required Styles */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Fancy Styles */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

JavaScript 内容

- -
window.addEventListener("load", function () {
-  var form = document.querySelector('form');
-
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
- -

使用JS的结果

- -

{{ EmbedLiveSample('JS', 120, 130) }}

- -

不使用JS

- -

HTML 内容

- -
<form class="no-widget">
-  <select name="myFruit">
-      <option>Cherry</option>
-      <option>Lemon</option>
-      <option>Banana</option>
-      <option>Strawberry</option>
-      <option>Apple</option>
-  </select>
-
-  <div class="select">
-    <span class="value">Cherry</span>
-    <ul class="optList hidden">
-      <li class="option">Cherry</li>
-      <li class="option">Lemon</li>
-      <li class="option">Banana</li>
-      <li class="option">Strawberry</li>
-      <li class="option">Apple</li>
-    </ul>
-  </div>
-<form>
- -

CSS 内容

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
- -

不使用JS的结果

- -

{{ EmbedLiveSample('No_JS', 120, 130) }}

diff --git a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_3/index.html b/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_3/index.html deleted file mode 100644 index a4a58880e4..0000000000 --- a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_3/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: Example 3 -slug: Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_3 -tags: - - HTML - - 表单 -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_3 ---- -

这是解释 如何构建自定义表单小部件 的第三个示例。

- -

Change states

- -

HTML 内容

- -
<form class="no-widget">
-  <select name="myFruit" tabindex="-1">
-      <option>Cherry</option>
-      <option>Lemon</option>
-      <option>Banana</option>
-      <option>Strawberry</option>
-      <option>Apple</option>
-  </select>
-
-  <div class="select" tabindex="0">
-    <span class="value">Cherry</span>
-    <ul class="optList hidden">
-      <li class="option">Cherry</li>
-      <li class="option">Lemon</li>
-      <li class="option">Banana</li>
-      <li class="option">Strawberry</li>
-      <li class="option">Apple</li>
-    </ul>
-  </div>
-</form>
- -

CSS 内容

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
-
-/* --------------- */
-/* Required Styles */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Fancy Styles */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

JavaScript 内容

- -
// ------- //
-// HELPERS //
-// ------- //
-
-NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
-
-// -------------------- //
-// Function definitions //
-// -------------------- //
-
-function deactivateSelect(select) {
-  if (!select.classList.contains('active')) return;
-
-  var optList = select.querySelector('.optList');
-
-  optList.classList.add('hidden');
-  select.classList.remove('active');
-}
-
-function activeSelect(select, selectList) {
-  if (select.classList.contains('active')) return;
-
-  selectList.forEach(deactivateSelect);
-  select.classList.add('active');
-};
-
-function toggleOptList(select, show) {
-  var optList = select.querySelector('.optList');
-
-  optList.classList.toggle('hidden');
-}
-
-function highlightOption(select, option) {
-  var optionList = select.querySelectorAll('.option');
-
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  option.classList.add('highlight');
-};
-
-// ------------- //
-// Event binding //
-// ------------- //
-
-window.addEventListener("load", function () {
-  var form = document.querySelector('form');
-
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
-
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option');
-
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        highlightOption(select, option);
-      });
-    });
-
-    select.addEventListener('click', function (event) {
-      toggleOptList(select);
-    },  false);
-
-    select.addEventListener('focus', function (event) {
-      activeSelect(select, selectList);
-    });
-
-    select.addEventListener('blur', function (event) {
-      deactivateSelect(select);
-    });
-  });
-});
- -

结果

- -

{{ EmbedLiveSample('Change_states') }}

diff --git a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_4/index.html b/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_4/index.html deleted file mode 100644 index 472102adb2..0000000000 --- a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_4/index.html +++ /dev/null @@ -1,294 +0,0 @@ ---- -title: Example 4 -slug: Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_4 -tags: - - HTML - - Web - - 表单 - - 高级 -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_4 ---- -

这是解释 如何构建自定义表单小部件 的第四个示例。

- -

改变状态

- -

HTML 内容

- -
<form class="no-widget">
-  <select name="myFruit">
-    <option>Cherry</option>
-    <option>Lemon</option>
-    <option>Banana</option>
-    <option>Strawberry</option>
-    <option>Apple</option>
-  </select>
-
-  <div class="select">
-    <span class="value">Cherry</span>
-    <ul class="optList hidden">
-      <li class="option">Cherry</li>
-      <li class="option">Lemon</li>
-      <li class="option">Banana</li>
-      <li class="option">Strawberry</li>
-      <li class="option">Apple</li>
-    </ul>
-  </div>
-</form>
- -

CSS 内容

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
-
-/* --------------- */
-/* Required Styles */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Fancy Styles */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

JavaScript 内容

- -
// ------- //
-// HELPERS //
-// ------- //
-
-NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
-
-// -------------------- //
-// Function definitions //
-// -------------------- //
-
-function deactivateSelect(select) {
-  if (!select.classList.contains('active')) return;
-
-  var optList = select.querySelector('.optList');
-
-  optList.classList.add('hidden');
-  select.classList.remove('active');
-}
-
-function activeSelect(select, selectList) {
-  if (select.classList.contains('active')) return;
-
-  selectList.forEach(deactivateSelect);
-  select.classList.add('active');
-};
-
-function toggleOptList(select, show) {
-  var optList = select.querySelector('.optList');
-
-  optList.classList.toggle('hidden');
-}
-
-function highlightOption(select, option) {
-  var optionList = select.querySelectorAll('.option');
-
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  option.classList.add('highlight');
-};
-
-function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};
-
-function getIndex(select) {
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};
-
-// ------------- //
-// Event binding //
-// ------------- //
-
-window.addEventListener("load", function () {
-  var form = document.querySelector('form');
-
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
-
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option');
-
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        highlightOption(select, option);
-      });
-    });
-
-    select.addEventListener('click', function (event) {
-      toggleOptList(select);
-    });
-
-    select.addEventListener('focus', function (event) {
-      activeSelect(select, selectList);
-    });
-
-    select.addEventListener('blur', function (event) {
-      deactivateSelect(select);
-    });
-  });
-});
-
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    select.tabIndex = 0;
-    select.previousElementSibling.tabIndex = -1;
-
-    updateValue(select, selectedIndex);
-
-    optionList.forEach(function (option, index) {
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-      if (event.keyCode === 40 && index < length - 1) { index++; }
-      if (event.keyCode === 38 && index > 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});
- -

结果

- -

{{ EmbedLiveSample('Change_states') }}

diff --git a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/index.html b/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/index.html deleted file mode 100644 index 24636e7858..0000000000 --- a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/index.html +++ /dev/null @@ -1,776 +0,0 @@ ---- -title: 如何构建表单小工具 -slug: Learn/HTML/Forms/How_to_build_custom_form_widgets -tags: - - HTML - - 例子 - - 表单 - - 高级 -translation_of: Learn/Forms/How_to_build_custom_form_controls ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
- -

在许多情况下，可用的 HTML 表单小组件是不够的。如果要在某些小部件（例如 {{HTMLElement("select")}}元素）上执行高级样式，或者如果要提供自定义表现，则别无选择，只能构建自己的小部件。

- -

在本文中，我们会看到如何构建这样的组件。为此，我们将使用这样一个例子：重建 {{HTMLElement("select")}}元素。

- -
-

注意: 我们将专注于构建小部件，而不是怎样让代码更通用或可复用；那会涉及一些非基础的JavaScript代码和未知环境下的DOM操作，这超过了这篇文章的范围。

-
- -

设计, 结构, 和语义

- -

在构建一个自定义控件之前，首先你要确切的知道你要什么。 这将为您节省宝贵的时间。 特别地，清楚地定义控件的所有状态非常重要。 为了做到这一点，从状态和行为表现都众所周知的现有小控件开始是很好的选择，这样你可以轻松的尽量模仿这些控件。

- -

在我们的示例中，我们将重建HTML<select>元素，这是我们希望实现的结果：

- -

The three states of a select box

- -

上面图片显示了我们控件的三个主要状态：正常状态（左）; 活动状态（中）和打开状态（右）。

- -

在行为方面，我们希望我们的控件像任何原生控件一样对鼠标和键盘都可用。 让我们从定义控件如何到达每个状态开始：

- -
-
以下情况控件将会呈现正常状态：
-
-
    -
  • 页面加载
    • -
  • 控件处于活动状态，但用户点击控件以外的任何位置
    • -
  • 控件是活动状态，但用户使用键盘将焦点移动到另一个小部件
    • -
- -
-

注意: 在页面上移动焦点通常是通过按Tab键来完成的，但这并不是哪都通用的标准。 例如，在Safari中页面上的链接间的循环切换默认下是通过使用组合键Option + Tab完成的。

-
-
-
以下情况控件将会呈现活动状态：
-
-
    -
  • 用户点击
    • -
  • 用户按下tab让控件获得了焦点。
    • -
  • 控件呈现打开状态然后用户点击控件。
    • -
-
-
以下情况控件将会呈现打开状态：
-
-
    -
  • 控件在非打开状态时被用户点击。
    • -
-
-
- -

我们知道如何改变状态后,定义如何改变小工具的值还很重要:

- -
-
以下情况控件的值将会被改变:
-
-
    -
  • 控件在打开状态下用户点击一个选项
    • -
  • 控件在活动状态下用户按下键盘上方向键或者下方向键
    • -
-
-
- -

最后，让我们定义控件的选项将要怎么表现:

- - - -

对于我们的例子的目的，我们将就此结束；但是，如果你是一个认真的读者，你会注意到我们省略了一些东西，例如，你认为用户在小部件处于打开状态时点击tab键会发生什么？答案是：什么也不会发生。好吧，似乎很明显这就是正确的行为，但事实是，因为在我们的规范中没有定义这种情况，我们很容易忽略这种行为。在团队环境中尤其是这样，因为设计小部件行为的人与实现的人通常是不同的。

- -

另外一个有趣的例子是：当小部件处于打开状态时，用户按下键盘上方向键和下方向键将会发生什么？这个问题有些棘手，如果你认为活动状态和打开状态是完全不同的，那么答案就是“什么都不会发生”，因为我们没有定义任何在打开状态下键盘的交互行为。从另一个方面看，如果你认为活动状态和打开状态是有重叠的部分，那么控件的值可能会改变，但是被选中的选项肯定不会相应的进行突出显示，同样是因为我们没有定义在控件打开状态下的任何键盘交互事件（我们仅仅定义了控件打开会发生什么，而没有定义在其打开后会发生什么）

- -

在我们的例子中，缺失的规范是显而易见的，所以我们将着手处理他们，但是对于一些没有人想到去定义正确行为的小部件而言，这的确是一个问题。所以在设计阶段花费时间是值得的，因为如果你定义的行为不够好，或者忘记定义了一个行为，那么在用户开始实际使用时，将会很难去重新定义它们。如果你在定义时有疑问，请征询他人的意见，如果你有预算，请不要犹豫的去进行用户可行性测试，这个过程被称为UX design (User Experience Design用户体验设计）,如果你想要深入的学习相关的内容，请查阅下面这些有用资源：

- - - -
-

注意: 另外， 在绝大多数系统中，还有一种方法能够打开{{HTMLElement("select")}}元素来观察其所有的选项（这和用鼠标点击{{HTMLElement("select")}}元素是一样的）。通过Windows下的Alt + 向下箭头实现，在我们的例子中没有实现---但是这样做会很方便，因为鼠标点击事件就是由该原理实现的。

-
- -

定义语义化的 HTML 结构

- -

现在控件的基本功能已经决定了，可以开始构建自定义控件了。第一步是要确定 HTML 结构并给予一些基本的语义规则。第一步就是去确定它的HTML结构并给予一些基本的语义。重构{{HTMLElement("select")}}元素需要怎么做如下：

- -
<!-- 这是我们小部件的主要容器.
-     tabindex属性是用来让用户聚焦在小部件上的.
-     稍后我们会发现最好通过JavaScript来设定它的值. -->
-<div class="select" tabindex="0">
-
-  <!-- 这个容器用来显示组件现在的值 -->
-  <span class="value">Cherry</span>
-
-  <!-- 这个容器包含我们的组件的所有可用选项.
-       因为他是一个列表，用ul元素是有意义的. -->
-  <ul class="optList">
-    <!-- 每个选项只包含用来显示的值，
-         稍后我们会知道如何处理和表单一起发送的真实值 -->
-    <li class="option">Cherry</li>
-    <li class="option">Lemon</li>
-    <li class="option">Banana</li>
-    <li class="option">Strawberry</li>
-    <li class="option">Apple</li>
-  </ul>
-
-</div>
- -

注意类名的使用：不管实际使用了哪种底层HTML元素，它们都标识每个相关的部分。这很重要，因为这样做能确保我们的CSS和JavaScript不会和HTML结构强绑定，这样我们就可以在不破坏使用小部件的代码的情况下进行实现更改。比如，如果你希望增加一个等价的{{HTMLElement("optgroup")}}元素。

- -

使用 CSS 创建外观

- -

现在我们有了控件结构，我们可以开始设计我们的控件了。构建自定义控件的重点是能够完全按照我们的期望设置它的样式。为了达到这个目的，我们将 CSS部分的工作分为两部分：第一部分是让我们的控件表现得像一个{{HTMLElement("select")}}元素所必需的的CSS规则，第二部分包含了让组件看起来像我们所希望那样的精妙样式。

- -

所需的样式

- -

所需的样式是那些用以处理我们组件的三种状态的必须样式。

- -
.select {
-  /* 这将为选项列表创建一个上下文定位 */
-  position: relative;
-
-  /* 这将使我们的组件成为文本流的一部分，同时又可以调整大小 */
-  display : inline-block;
-}
- -

我们需要一个额外的类 active 来定义我们的组件处于其激活状态时的的界面外观。因为我们的组件是可以聚焦的, 我们通过{{cssxref(":focus")}} 伪类重复自定义样式来确保它们表现得一样。

- -
.select .active,
-.select:focus {
-  outline: none;
-
-  /* 这里的 box-shadow 属性并非必须，但确保活动状态能看出来非常重要---我们
- 将其作为一个默认值，你可以随意地覆盖掉它. */
-  box-shadow: 0 0 3px 1px #227755;
-}
- -

现在，让我们处理选项列表：

- -
/* 这里的 .select 选择器是一个糖衣语法，用来确保我们定义的类是
-   在我们的组件里的那个。 */
-.select .optList {
-  /* 这可以确保我们的选项列表将会显示在值的下面，并且会处在
-     HTML 流之外*/
-  position : absolute;
-  top      : 100%;
-  left     : 0;
-}
- -

我们需要一个额外的类来处理选项列表隐藏时的情况。为了管理没有完全匹配的活动状态和打开状态之间的差异，这是有必要的。

- -
.select .optList.hidden {
-  /* 这是一个以可访问形式隐藏列表的简单方法,
-     对可访问性我们将在最后进一步拓展 */
-  max-height: 0;
-  visibility: hidden;
-}
- -

美化

- -

所以现在我们的基本功能已经就位，有趣的事情就可以开始了。下面是一个可行的简单的例子，和本文开头的截图是相对应的。不管怎样，你可以随意的体验一下看看能收获什么。

- -
.select {
-  /* 出于可访问性方面的原因，所有尺寸都会由em值表示
-     (用来确保用户在文本模式下使用浏览器缩放时组件的可缩放性).
-     在大多数浏览器下的默认换算是1em == 16px.
-     如果你对em和px的转换感到疑惑, 请参考http://riddle.pl/emcalc/ */
-  font-size   : 0.625em; /* 这个（=10px）是以em方式表达的这个环境里的字体大小 */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* 我们需要为将要添加的向下箭头准备一些额外的空间 */
-  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : .2em solid #000; /* 2px */
-  border-radius : .4em; /* 4px */
-  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  /* 第一段声明是为了不支持线性梯度填充的浏览器准备的。
-     第二段声明是因为基于WebKit的浏览器没有预先定义它。
-     如果你想为过时的浏览器提供支持, 请参阅 http://www.colorzilla.com/gradient-editor/ */
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  /* 因为值的宽度可能超过组件的宽度，我们需要确保他不会改变组件的宽度 */
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  vertical-align: top;
-
-  /* 如果内容溢出了, 最好有一个恰当的缩写. */
-  white-space  : nowrap;
-  text-overflow: ellipsis;
-}
- -

我们不需要一个额外的元素来设计向下的箭头，而使用{{cssxref(":after")}} 伪类来替代。然而，这也可以通过使用一张加在select class上的简单的背景图像来实现。

- -
.select:after {
-  content : "▼"; /* 我们使用了unicode 编码的字符 U+25BC; 参阅 http://www.utf8-chartable.de */
-  position: absolute;
-  z-index : 1; /* 这对于防止箭头覆盖选项列表很重要 */
-  top     : 0;
-  right   : 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  height  : 100%;
-  width   : 2em;  /* 20px */
-  padding-top : .1em; /* 1px */
-
-  border-left  : .2em solid #000; /* 2px */
-  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
-
-  background-color : #000;
-  color : #FFF;
-  text-align : center;
-}
- -

接下来，让我们定义选项列表的样式。

- -
.select .optList {
-  z-index : 2; /* 我们明确的表示选项列表会始终与向下箭头重叠 */
-
-  /* 这会重置ul元素的默认样式 */
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* 这会确保即使数值比组件小，选项列表仍能变得跟组件自身一样大*/
-  min-width : 100%;
-
-  /* 万一列表太长了, 它的内容会从垂直方向溢出(会自动添加一个竖向滚动条)
-     但是水平方向不会(因为我们没有设定宽度, 列表会自适应宽度. 如果不能的话，内容会被截断) */
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  border: .2em solid #000; /* 2px */
-  border-top-width : .1em; /* 1px */
-  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
-  background: #f0f0f0;
-}
- -

对于选项，我们需要添加一个 highlight 类以便能标明用户将要选择的值或者已经选择的值。

- -
.select .option {
-  padding: .2em .3em; /* 2px 3px */
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

这是三种状态的结果:

- - - - - - - - - - - - - - - - - - - -
基本状态活动状态打开状态
{{EmbedLiveSample("Basic_state",120,130, "", "/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Active_state",120,130, "", "/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Open_state",120,130, "", "/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}
Check out the source code
- -

通过JavaScript让您的小部件动起来

- -

现在我们的设计和结构已经完成了。我们可以写些JavaScript代码来让这个部件真正生效。

- -
-

警告：下面的代码仅仅是教学性质的，并且不应该照搬使用。在许多方面，正如我们所看到的，这种方案不具有前瞻性，而且可能在旧浏览器上会不工作。这里面还有冗余的部分，在生产环境下，代码需要优化。

-
- -
-

注意：创建可复用的组件可能是一件需要些技巧的事情。W3C 网络组件草案 是对这类特定问题的答案之一。X-Tag 项目 是对这一规格的实验性实现；我们建议你看看它。

-
- -

它为什么不生效？

- -

在我们开始之前，要记住一件和 JavaScript 有关的非常重要的事情：在浏览器中，这是一种不可靠的技术。当你构建一个自定义组件时，你会不得不得依赖于 JavaScript，因为这是将所有的东西联系在一起的线索。但是，很多情况下，JavaScript 不能在浏览器中运行。

- - - -

因为这些风险，认真考虑 JavaScript 不生效时会发生什么是很重要的。处理这个问题的细节超出了这篇文章的范围，因为这与你有多么想使你的脚本具有通用性和可复用性更加相关，不过我们将在我们的例子中考虑与其相关的基本内容。

- -

在我们的例子中，如果JavaScript代码没有运行，我们会回退到显示一个标准的 {{HTMLElement("select")}} 元素。为了实现这一点，我们需要两样东西。

- -

首先，在每次使用我们的自定义部件前，我们需要添加一个标准的 {{HTMLElement("select")}} 元素。实际上，为了能将来自我们自定义的表单组件和以及其他部分的表单数据发送出去，这个元素也是需要的。我们随后会详细的解释这一点。

- -
<body class="no-widget">
-  <form>
-    <select name="myFruit">
-      <option>Cherry</option>
-      <option>Lemon</option>
-      <option>Banana</option>
-      <option>Strawberry</option>
-      <option>Apple</option>
-    </select>
-
-    <div class="select">
-      <span class="value">Cherry</span>
-      <ul class="optList hidden">
-        <li class="option">Cherry</li>
-        <li class="option">Lemon</li>
-        <li class="option">Banana</li>
-        <li class="option">Strawberry</li>
-        <li class="option">Apple</li>
-      </ul>
-    </div>
-  </form>
-
-</body>
- -

第二，我们需要两个新的 classes 来隐藏不需要的元素(即，当我们的脚本没有运行时的自定义组件, 或是脚本正常运行时的"真正的" {{HTMLElement("select")}} 元素)。注意默认情况下，我们的 HTML 代码会隐藏我们的自定义组件。

- -
.widget select,
-.no-widget .select {
-  /* 这个CSS选择器大体上说的是：
-     - 要么我们将body的class设置为"widget"，隐藏真实的{{HTMLElement("select")}}元素
-     - 或是我们没有改变body的class,这样body的class还是"no-widget",
-       因此class为"select"的元素需要被隐藏 */
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
- -

接下来我们需要一个 JavaScript 开关来决定脚本是否运行。这个开关非常简单：如果页面加载时，我们的脚本运行了，它将会移除 no-widget class ，并添加  widget class，由此切换 {{HTMLElement("select")}} 元素和自定义组件的可视性。

- -
window.addEventListener("load", function () {
-  document.body.classList.remove("no-widget");
-  document.body.classList.add("widget");
-});
- - - - - - - - - - - - - - - - - -
无 JS有 JS
{{EmbedLiveSample("No_JS",120,130, "", "/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}{{EmbedLiveSample("JS",120,130, "", "/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}
Check out the source code
- -
-

注意: 如果你真的想让你的代码变得通用和可重用，最好不要做一个 class 选择器开关，而是通过添加一个组件 class 的方式来隐藏{{HTMLElement("select")}} 元素，并且动态地在每一个{{HTMLElement("select")}} 元素后面添加代表页面中自定义组件的 DOM 树。

-
- -

让工作变得更简单

- -

在我们将要构建的代码之中，我们将会使用标准的 DOM API 来完成我们所要做的所有工作。尽管 DOM API 在浏览器中得到了更好支持，但是在旧的浏览器上还是会出现问题。( 特别是非常老的 Internet Explorer）。

- -

如果你想要避免旧浏览器带来的麻烦，这儿有两种解决方案：使用专门的框架，比如 jQuery, $dom, prototype, Dojo, YUI, 或者类似的框架，或者通过填充你想使用的缺失的特性 （这可以通过条件加载轻松完成——例如使用 yepnope 这样的库。

- -

我们打算使用的特性如下所示（按照风险程度从高到低排列）：

- -
    -
  1. {{domxref("element.classList","classList")}}
    2. -
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. -
  3. forEach (这不是 DOM而是现代 JavaScript )
    4. -
  4. {{domxref("element.querySelector","querySelector")}} 和 {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. -
- -

除了那些特定特性的的可用性以外，在开始之前，仍然存在一个问题。由函数{{domxref("element.querySelectorAll","querySelectorAll()")}} 返回的对象是一个{{domxref("NodeList")}} 而不是  Array。这一点非常重要，因为 Array  对象支持 forEach 函数，但是 {{domxref("NodeList")}} 不支持。由于 {{domxref("NodeList")}} 看起来实在是像一个 Array 并且因为 forEach 是这样的便于使用。我们可以轻易地添加对 {{domxref("NodeList")}}的支持，使我们的生活更轻松一些，像这样：

- -
NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
- -

我们没有开玩笑，这真的很容易实现。

- -

构造事件回调

- -

基础已经准备好了，我们现在可以开始定义用户每次同我们的组件交互时会用到的所有函数了。

- -
// 这个函数会用在每当我们想要停用一个自定义组件的时候
-// 它需要一个参数：
-// select :要停用的带有 'select' 类的节点
-function deactivateSelect(select) {
-
-  // 如果组件没有运行，不用进行任何操作
-  if (!select.classList.contains('active')) return;
-
-  // 我们需要获取自定义组件的选项列表
-  var optList = select.querySelector('.optList');
-
-  // 关闭选项列表
-  optList.classList.add('hidden');
-
-  // 然后停用组件本身
-  select.classList.remove('active');
-}
-
-// 每当用户想要激活（或停用）这个组件的时候，会调用这个函数
-// 它需要2个参数：
-// select : 要激活的带有'select'类的DOM节点
-// selectList : 包含所有带'select'类的DOM节点的列表
-function activeSelect(select, selectList) {
-
-  // 如果组件已经激活了，不进行任何操作
-  if (select.classList.contains('active')) return;
-
-  // 我们需要关闭所有自定义组件的活动状态
-  // 因为deactiveselect函数满足forEach回调函数的所有请求，
-  // 我们直接使用它，不使用中间匿名函数
-  selectList.forEach(deactivateSelect);
-
-  // 然后我们激活特定的组件
-  select.classList.add('active');
-}
-
-// 每当用户想要打开/关闭选项列表的时候，会调用这个函数
-// 它需要一个参数:
-// select : 要触发的列表的DOM节点
-function toggleOptList(select) {
-
-  // 该列表不包含在组件中
-  var optList = select.querySelector('.optList');
-
-  // 我们改变列表的class去显示/隐藏它
-  optList.classList.toggle('hidden');
-}
-
-// 每当我们要高亮一个选项的时候，会调用该函数
-// 它需要两个参数:
-// select : 带有'select'类的DOM节点，包含了需要高亮强调的选项
-// option : 需要高亮强调的带有'option'类的DOM节点
-function highlightOption(select, option) {
-
-  // 为我们的自定义select元素获取所有有效选项的列表
-  var optionList = select.querySelectorAll('.option');
-
-  // 我们移除所有选项的高亮强调
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  // 我们高亮强调正确的选项
-  option.classList.add('highlight');
-};
- -

这是你需要用来处理组件不同状态的所有代码。

- -

接下来，我们将这些函数绑定到合适的事件上：

- -
// 我们处理文档加载时的事件绑定。
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // 每个自定义组件都需要初始化
-  selectList.forEach(function (select) {
-
-    // 它的'option'元素也需要
-    var optionList = select.querySelectorAll('.option');
-
-    // 每当用户的鼠标悬停在一个选项上时，我们高亮这个指定的选项
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        // 注意:'select'和'option'变量是我们函数调用范围内有效的闭包 。
-        highlightOption(select, option);
-      });
-    });
-
-    // 每当用户点击一个自定义的select元素时
-    select.addEventListener('click', function (event) {
-      // 注意:'select'变量是我们函数调用范围内有效的闭包。
-
-      // 我们改变选项列表的可见性
-      toggleOptList(select);
-    });
-
-    // 如果组件获得了焦点
-    // 每当用户点击它或是用tab键访问这个组件时，组件获得焦点
-    select.addEventListener('focus', function (event) {
-      // 注意:'select'和'selectlist'变量是我们函数调用范围内有效的闭包 。
-
-      // 我们激活这个组件
-      activeSelect(select, selectList);
-    });
-
-    // 如果组件失去焦点
-    select.addEventListener('blur', function (event) {
-      // 注意:'select'变量是我们函数调用范围内有效的闭包。
-
-      // 我们关闭这个组件
-      deactivateSelect(select);
-    });
-  });
-});
- -

此时，我们的组件会根据我们的设计改变状态，但是它的值仍然没有更新。我们接下来会处理这件事。

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}
Check out the source code
- -

处理组件的值

- -

既然我们的组件已经开始工作了，我们必须添加代码，使其能够根据用户的输入更新取值，并且能将取值随表单数据一同发送。

- -

实现这一点最简单的方法是使用后台原生组件。这样的一个组件会使用浏览器提供的所有内置控件跟踪值，并且在表单提交时，取值也会像往常一样发送。当有现成的功能时，我们再做重复工作就毫无意义了。

- -

像前面所看到的那样，出于可访问性的原因，我们已经使用了一个原生的选择组件作为后备显示内容；我们可轻松的将它的值与我们的自定义组件之间的值同步。

- -
// 这个函数更新显示的值并将其通过原生组件同步
-// 它需要2个参数:
-// select : 含有要更新的值的'select'类的DOM节点
-// index  : 要被选择的值的索引
-function updateValue(select, index) {
-  // 我们需要为了给定的自定义组件获取原生组件
-  // 在我们的例子中, 原生组件是自定义组件的‘同胞’
-  var nativeWidget = select.previousElementSibling;
-
-  // 我们也需要得到自定义组件的值占位符，
-  var value = select.querySelector('.value');
-
-  // 还有整个选项列表。
-  var optionList = select.querySelectorAll('.option');
-
-  // 我们将被选择的索引设定为我们的选择的索引
-  nativeWidget.selectedIndex = index;
-
-  // 更新相应的值占位符
-  value.innerHTML = optionList[index].innerHTML;
-
-  // 然后高亮我们自定义组件里对应的选项
-  highlightOption(select, optionList[index]);
-};
-
-// 这个函数返回原生组件里当前选定的索引
-// 它需要1个参数:
-// select : 跟原生组件有关的'select'类DOM节点
-function getIndex(select) {
-  // 我们需要为了给定的自定义组件访问原生组件
-  // 在我们的例子中, 原生组件是自定义组件的一个“同胞”
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};
- -

通过这两个函数，我们可以将原生组件绑定到自定义的组件上。

- -
// 我们在文档加载时处理事件的绑定。
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // 每个自定义组件都需要初始化
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    // 使我们的自定义组件可以获得焦点
-    select.tabIndex = 0;
-
-    // 我们让原生组件无法获得焦点
-    select.previousElementSibling.tabIndex = -1;
-
-    // 确保默认选中的值正确显示
-    updateValue(select, selectedIndex);
-
-    // 每当用户点击一个选项的时候，更新相应的值
-    optionList.forEach(function (option, index) {
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    // 每当用户在获得焦点的组件上用键盘操作时，更新相应的值
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-      // 当用户点击向下箭头时，跳转到下一个选项
-      if (event.keyCode === 40 && index < length - 1) { index++; }
-
-      // 当用户点击向上箭头时，跳转到上一个选项
-      if (event.keyCode === 38 && index > 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});
- -

在上面的代码里，值得注意的是 tabIndex 属性的使用。使用这个属性是很有必要的，这可以确保原生组件将永远不会获得焦点，而且还可以确保当用户用户使用键盘和鼠标时，我们的自定义组件能够获得焦点。

- -

做完上面这些后，我们就完成了！下面是结果：

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}
Check out the source code
- -

但是等等，我们真的做完了嘛？

- -

使其具有可访问性

- -

我们构建了一个能够生效的东西，尽管这离一个特性齐全的选择框还差得远，但是它效果不错。但是我们已经完成的事情只不过是摆弄DOM。这个组件并没有真正的语义，即使它看起来像一个选择框，但是从浏览器的角度来看并不是，所以辅助技术并不能明白这是一个选择框。简单来说，这个全新的选择框并不具备可访问性！

- -

幸运的是，有一种解决方案叫做 ARIA。ARIA代表"无障碍富互联网应用"。这是一个专为我们现在做的事情设计的 W3C 规范：使网络应用和自定义组件易于访问，它本质上是一组用来拓展 HTML 的属性集，以便我们能够更好的描述角色，状态和属性，就像我们刚才设计的元素是是它试图传递的原生元素一样。使用这些属性非常简单，所以让我们来试试看。

- -

 role 属性

- -

ARIA 使用的关键属性是 role 属性。role 属性接受一个值，该值定义了一个元素的用途。每一个 role 定义了它自己的需求和行为。在我们的例子中，我们会使用 listbox 这一 role。这是一个 "合成角色"，表示具有该role的元素应该有子元素，每个子元素都有特定的角色。（在这个案例中，至少有一个具有option 角色的子元素）。

- -

同样值得注意的是，ARIA定义了默认应用于标准 HTML 标记的角色。例如，{{HTMLElement("table")}} 元素与角色 grid 相匹配，而 {{HTMLElement("ul")}} 元素与角色 list 相匹配。由于我们使用了一个 {{HTMLElement("ul")}} 元素，我们想要确保我们组件的 listbox 角色能替代 {{HTMLElement("ul")}} 元素的list 角色。为此，我们会使用角色 presentation。这个角色被设计成让我们来表示一个元素没有特殊的含义，并且仅仅用于提供信息。我们会将其应用到{{HTMLElement("ul")}} 元素上。

- -

为了支持 listbox 角色，我们只需要将我们 HTML 改成这样：

- -
<!-- 我们把role="listbox" 属性添加到我们的顶部元素 -->
-<div class="select" role="listbox">
-  <span class="value">Cherry</span>
-  <!-- 我们也把 role="presentation" 添加到ul元素中 -->
-  <ul class="optList" role="presentation">
-    <!-- 然后把role="option" 属性添加到所有li元素里 -->
-    <li role="option" class="option">Cherry</li>
-    <li role="option" class="option">Lemon</li>
-    <li role="option" class="option">Banana</li>
-    <li role="option" class="option">Strawberry</li>
-    <li role="option" class="option">Apple</li>
-  </ul>
-</div>
- -
-

注意：只有当你想要为不支持 CSS 属性选择器的旧浏览器提供支持时，才有必要同时包含 role 属性和一个class 属性。

-
- -

 aria-selected 属性

- -

仅仅使用 role 属性是不够的。 ARIA 还提供了许多状态和属性的内部特征。你能更好更充分的利用它们，你的组件就会能够被辅助技术更好的理解。在我们的例子中，我们会把使用限制在一个属性上：aria-selected。

- -

aria-selected 属性被用来标记当前被选中的选项；这可以让辅助技术告知用户当前的选项是什么。我们会通过 JavaScript 动态地使用该属性，每当用户选择一个选项时标记选中的选项。为了达到这一目的，我们需要修正我们的 updateValue() 函数：

- -
function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  // 我们确保所有的选项都没有被选中
-  optionList.forEach(function (other) {
-    other.setAttribute('aria-selected', 'false');
-  });
-
-  // 我们确保选定的选项被选中了
-  optionList[index].setAttribute('aria-selected', 'true');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};
- -

这是经过所有的改变之后的最终结果。 ( 藉由 NVDA or VoiceOver 这样的辅助技术尝试它，你会对此有更好的体会)：

- - - - - - - - - - - - - - - -
在线示例
{{EmbedLiveSample("Change_states",120,130, "", "/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}
Check out the final source code
- -

总结

- -

我们已经了解了所有和构建一个自定义表单组件相关的基础知识，但是如你所见做这件事非常繁琐，并且通常情况下依赖第三方库，而不是自己从头写起会更容易 ，也更好(当然，除非你的目的就是构建一个这样的库）。

- -

这儿有一些库，在你编写自己的之前应该了解一下：

- - - -

如果你想更进一步, 本例中的代码需要一些改进，才能变得更加通用和可重用。这是一个你可以尝试去做的练习。这里有两个提示可以帮到你：我们所有函数的第一个参数是相同的，这意味着这些函数需要相同的上下文。构建一个对象来共享那些上下文是更聪明的做法。还有，你需要让它的特性适用性更好；也就是说，它要能在一系列对Web标准的兼容性不同的浏览器上工作良好。祝愉快！

- -

{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}

- -

在本单元中

- - diff --git a/files/zh-cn/learn/html/forms/how_to_structure_an_html_form/index.html b/files/zh-cn/learn/html/forms/how_to_structure_an_html_form/index.html deleted file mode 100644 index eda4b201da..0000000000 --- a/files/zh-cn/learn/html/forms/how_to_structure_an_html_form/index.html +++ /dev/null @@ -1,290 +0,0 @@ ---- -title: 如何构造HTML表单 -slug: Learn/HTML/Forms/How_to_structure_an_HTML_form -translation_of: Learn/Forms/How_to_structure_a_web_form ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}
- -

有了基础知识，我们现在更详细地了解了用于为表单的不同部分提供结构和意义的元素。

- - - - - - - - - - - - -
前提条件:基本的计算机能力, 和基本的 对HTML的理解。
目标:要理解如何构造HTML表单并赋予它们语义，以便它们是可用的和可访问的。
- -

HTML表单的灵活性使它们成为HTML中最复杂的结构之一;您可以使用专用的表单元素和属性构建任何类型的基本表单。在构建HTML表单时使用正确的结构将有助于确保表单可用性和可访问性。

- -

 <form> 元素

- -

 {{HTMLElement("form")}} 元素按照一定的格式定义了表单和确定表单行为的属性。当您想要创建一个HTML表单时，都必须从这个元素开始，然后把所有内容都放在里面。许多辅助技术或浏览器插件可以发现{{HTMLElement("form")}}元素并实现特殊的钩子，使它们更易于使用。 

- -

我们早在之前的文章中就遇见过它了。

- -
注意: 严格禁止在一个表单内嵌套另一个表单。嵌套会使表单的行为不可预知，而这取决于正在使用的浏览器。
- -

请注意，在{{HTMLElement("form")}}元素之外使用表单小部件是可以的，但是如果您这样做了，那么表单小部件与任何表单都没有任何关系。这样的小部件可以在表单之外使用，但是您应该对于这些小部件有特别的计划，因为它们自己什么也不做。您将不得不使用JavaScript定制他们的行为。

- -
-

注意: HTML5在HTML表单元素中引入form属性。它让您显式地将元素与表单绑定在一起，即使元素不在{{ HTMLElement("form") }}中。不幸的是，就目前而言，跨浏览器对这个特性的实现还不足以使用。

-
- -

 <fieldset> 和 <legend> 元素

- -

{{HTMLElement("fieldset")}}元素是一种方便的用于创建具有相同目的的小部件组的方式，出于样式和语义目的。 你可以在<fieldset>开口标签后加上一个 {{HTMLElement("legend")}}元素来给{{HTMLElement("fieldset")}} 标上标签。 {{HTMLElement("legend")}}的文本内容正式地描述了{{HTMLElement("fieldset")}}里所含有部件的用途。

- -

许多辅助技术将使用{{HTMLElement("legend")}} 元素，就好像它是相应的 {{HTMLElement("fieldset")}} 元素里每个部件的标签的一部分。例如，在说出每个小部件的标签之前，像Jaws或NVDA这样的屏幕阅读器会朗读出legend的内容。

- -

这里有一个小例子:

- -
<form>
-  <fieldset>
-    <legend>Fruit juice size</legend>
-    <p>
-      <input type="radio" name="size" id="size_1" value="small">
-      <label for="size_1">Small</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_2" value="medium">
-      <label for="size_2">Medium</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_3" value="large">
-      <label for="size_3">Large</label>
-    </p>
-  </fieldset>
-</form>
- -
-

注意: 你可以在 fieldset-legend.html (你也可以看预览版) 看到该例。

-
- -

当阅读上述表格时，屏幕阅读器将会读第一个小部件“Fruit juice size small”，“Fruit juice size medium”为第二个，“Fruit juice size large”为第三个。

- -

本例中的用例是最重要的。每当您有一组单选按钮时，您应该将它们嵌套在{{HTMLElement("fieldset")}}元素中。还有其他用例，一般来说，{{HTMLElement("fieldset")}}元素也可以用来对表单进行分段。理想情况下，长表单应该在拆分为多个页面，但是如果表单很长，却必须在单个页面上，那么将以不同的关联关系划分的分段，分别放在不同的fieldset里，可以提高可用性。

- -

因为它对辅助技术的影响， {{HTMLElement("fieldset")}} 元素是构建可访问表单的关键元素之一。无论如何，你有责任不去滥用它。如果可能，每次构建表单时，尝试侦听屏幕阅读器如何解释它。如果听起来很奇怪，试着改进表单结构。

- -

 <label> 元素

- -

正如我们在前一篇文章中看到的， {{HTMLElement("label")}} 元素是为HTML表单小部件定义标签的正式方法。如果你想构建可访问的表单，这是最重要的元素——当实现的恰当时，屏幕阅读器会连同有关的说明和表单元素的标签一起朗读。以我们在上一篇文章中看到的例子为例:

- -
<label for="name">Name:</label> <input type="text" id="name" name="user_name">
- -

<label> 标签与 <input> 通过他们各自的for 属性和 id 属性正确相关联（label的for属性和它对应的小部件的id属性），这样，屏幕阅读器会读出诸如“Name, edit text”之类的东西。

- -

如果标签没有正确设置，屏幕阅读器只会读出“Edit text blank”之类的东西，这样会没什么帮助。

- -

注意，一个小部件可以嵌套在它的{{HTMLElement("label")}}元素中，就像这样：

- -
<label for="name">
-  Name: <input type="text" id="name" name="user_name">
-</label>
- -

尽管可以这样做，但人们认为设置for属性才是最好的做法，因为一些辅助技术不理解标签和小部件之间的隐式关系。

- -

标签也可点击!

- -

正确设置标签的另一个好处是可以在所有浏览器中单击标签来激活相应的小部件。这对于像文本输入这样的例子很有用，这样你可以通过点击标签，和点击输入区效果一样，来聚焦于它，这对于单选按钮和复选框尤其有用——这种控件的可点击区域可能非常小，设置标签来使它们可点击区域变大是非常有用的。

- -

举个例子：

- -
<form>
-  <p>
-    <label for="taste_1">I like cherry</label>
-    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
-  </p>
-  <p>
-    <label for="taste_2">I like banana</label>
-    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
-  </p>
-</form>
- -
-

注意: 你可以在 checkbox-label.html (你也可以看预览版) 看到该例。

-
- -

多个标签

- -

严格地说，您可以在一个小部件上放置多个标签，但是这不是一个好主意，因为一些辅助技术可能难以处理它们。在多个标签的情况下，您应该将一个小部件和它的标签嵌套在一个{{HTMLElement("label")}}元素中。

- -

让我们考虑下面这个例子：

- -
<p>Required fields are followed by <abbr title="required">*</abbr>.</p>
-
-<!--这样写：-->
-<div>
-  <label for="username">Name:</label>
-  <input type="text" name="username">
-  <label for="username"><abbr title="required">*</abbr></label>
-</div>
-
-<!--但是这样写会更好：-->
-<div>
-  <label for="username">
-    <span>Name:</span>
-    <input id="username" type="text" name="username">
-    <abbr title="required">*</abbr>
-  </label>
-</div>
-
-<!--但最好的可能是这样：-->
-<div>
-  <label for="username">Name: <abbr title="required">*</abbr></label>
-  <input id="username" type="text" name="username">
-</div>
- -

顶部的段落定义了所需元素的规则。它必须在开始时确保像屏幕阅读器这样的辅助技术在用户找到必需的元素之前显示或念出它们。这样，他们就知道星号表达的是什么意思了。根据屏幕阅读器的设置，屏幕阅读器会把星号读为“star”或“required”，取决于屏幕阅读器的设置——不管怎样，要念出来的都会在第一段清楚的呈现出来。

- - - -
-

注意：你可能会得到一些不同的结果，这取决于你的屏幕阅读器。这是在VoiceOver上测试的（NVDA的行为也类似）。我们也乐于听听你的试验结果。

-
- -
-

注意: 你可以在 GitHub 上看到 required-labels.html (你也可以看预览版)。不要运行2个或3个未注释版本的示例—— 如果您有多个标签和多个输入相同的ID，那么屏幕阅读器肯定会感到困惑！

-
- -

用于表单的通用HTML结构

- -

除了特定于HTML表单的结构之外，还应该记住表单同样是HTML。这意味着您可以使用HTML的所有强大功能来构造一个HTML表单。

- -

正如您在示例中可以看到的，用{{HTMLElement("div")}}元素包装标签和它的小部件是很常见的做法。{{HTMLElement("p")}}元素也经常被使用，HTML列表也是如此（后者在构造多个复选框或单选按钮时最为常见）。

- -

除了{{HTMLElement("fieldset")}}元素之外，使用HTML标题（例如，{{htmlelement("h1")}}、{{htmlelement("h2")}}）和分段（如{{htmlelement("section")}}）来构造一个复杂的表单也是一种常见的做法。

- -

最重要的是，你要找到一种你觉得很舒服的风格去码代码，而且它也能带来可访问的、可用的形式。

- -

它包含了从功能上划分开并分别包含在{{htmlelement("section")}}元素中的部分，以及一个{{htmlelement("fieldset")}}来包含单选按钮。

- -

自主学习:构建一个表单结构

- -

让我们把这些想法付诸实践，建立一个稍微复杂一点的表单结构——一个支付表单。这个表单将包含许多您可能还不了解的小部件类型—现在不要担心这个；在下一篇文章（原生表单小部件）中，您将了解它们是如何工作的。现在，当您遵循下面的指令时，请仔细阅读这些描述，并开始理解我们使用的包装器元素是如何构造表单的，以及为什么这么做。

- -
    -
  1. 在开始之前，在计算机上的一个新目录中，创建一个空白模板文件和我们的支付表单的CSS样式的本地副本。
    2. -
  2. 首先，通过添加下面这行代码到你的HTML{{htmlelement("head")}}使你的HTML应用CSS。 - 
    <link href="payment-form.css" rel="stylesheet">
    -
    3. -
  3. 接下来，通过添加外部{{htmlelement("form")}}元素来开始一张表单： - 
    <form>
-
-</form>
    -
    4. -
  4. 在 <form> 标签内，以添加一个标题和段落开始，告诉用户必需的字段是如何标记的: - 
    <h1>Payment form</h1>
-<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
    -
    5. -
  5. 接下来，我们将在表单中添加一个更大的代码段，在我们之前的代码下面。在这里，您将看到，我们正在将联系人信息字段包装在一个单独的{{htmlelement("section")}}元素中。此外，我们有一组两个单选按钮，每个单选按钮都放在自己的列表中({{htmlelement("li")}}))元素。最后，我们有两个标准文本{{htmlelement("input")}}和它们相关的{{htmlelement("label")}}元素，每个元素包含在{{htmlelement("p")}}中，加上输入密码的密码输入。现在将这些代码添加到您的表单中: - 
    <section>
-    <h2>Contact information</h2>
-    <fieldset>
-      <legend>Title</legend>
-      <ul>
-          <li>
-            <label for="title_1">
-              <input type="radio" id="title_1" name="title" value="K" >
-              King
-            </label>
-          </li>
-          <li>
-            <label for="title_2">
-              <input type="radio" id="title_2" name="title" value="Q">
-              Queen
-            </label>
-          </li>
-          <li>
-            <label for="title_3">
-              <input type="radio" id="title_3" name="title" value="J">
-              Joker
-            </label>
-          </li>
-      </ul>
-    </fieldset>
-    <p>
-      <label for="name">
-        <span>Name: </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="text" id="name" name="username">
-    </p>
-    <p>
-      <label for="mail">
-        <span>E-mail: </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="email" id="mail" name="usermail">
-    </p>
-    <p>
-      <label for="pwd">
-        <span>Password: </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="password" id="pwd" name="password">
-    </p>
-</section>
    -
    6. -
  6. 现在，我们将转到表单的第二个<section>——支付信息。在这里，我们有三个不同的小部件以及它们的标签，每个都包含在一个<p>中。第一个是选择信用卡类型的下拉菜单({{htmlelement("select")}})。第二个是输入一个信用卡号的类型编号的 <input> 元素。最后一个是输入date类型的<input> 元素，用来输入卡片的过期日期（这将在支持的浏览器中出现一个日期选择器小部件，并在非支持的浏览器中回退到普通的文本输入）。同样，在之前的代码后面输入以下内容： - 
    <section>
-    <h2>Payment information</h2>
-    <p>
-      <label for="card">
-        <span>Card type:</span>
-      </label>
-      <select id="card" name="usercard">
-        <option value="visa">Visa</option>
-        <option value="mc">Mastercard</option>
-        <option value="amex">American Express</option>
-      </select>
-    </p>
-    <p>
-      <label for="number">
-        <span>Card number:</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-        <input type="number" id="number" name="cardnumber">
-    </p>
-    <p>
-      <label for="date">
-        <span>Expiration date:</span>
-        <strong><abbr title="required">*</abbr></strong>
-        <em>formatted as mm/yy</em>
-      </label>
-      <input type="date" id="date" name="expiration">
-    </p>
-</section>
    -
    7. -
  7. 我们要添加的最后一个部分要简单得多，它只包含了一个submit类型的 {{htmlelement("button")}} ，用于提交表单数据。现在把这个添加到你的表单的底部: - 
    <p> <button type="submit">Validate the payment</button> </p>
    -
    8. -
- -

您可以在下面看到已完成的表单 (你可以在Github上看到源码和预览版）：

- -

{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}

- -

总结

- -

现在，您已经具备了正确地构造HTML表单所需的所有知识;下一篇文章将深入介绍各种不同类型的表单小部件，您将希望从用户那里收集信息。

- -

另见

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}

diff --git a/files/zh-cn/learn/html/forms/html_forms_in_legacy_browsers/index.html b/files/zh-cn/learn/html/forms/html_forms_in_legacy_browsers/index.html deleted file mode 100644 index d6045e0d70..0000000000 --- a/files/zh-cn/learn/html/forms/html_forms_in_legacy_browsers/index.html +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: 旧式浏览器中的HTML 表单 -slug: Learn/HTML/Forms/HTML_forms_in_legacy_browsers -translation_of: Learn/Forms/HTML_forms_in_legacy_browsers ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms")}}
- -

所有 web 开发者很快就会（有时候是痛苦地）发现网络是一个令人不快的地方。我们碰到的最恶毒的诅咒是旧式浏览器。好吧，让我们承认吧，当我们提到 “旧式浏览器” 时，脑海中出现就是 老版本的 Internet Explorer ……但是，这远远不是全部。只发布一年的 Firefox 比如 the ESR version 也是旧式浏览器。那么，在移动世界呢？当浏览器和 OS（操作系统） 都不能更新时？是的，有非常多老版本的 Android 手机或 iPhone 没有更新到最新的浏览器。它们同样是旧式浏览器。

- -

可悲的是，处理这些传统浏览器的问题是工作的一部分。幸运的是，有一些技巧可以帮助您解决旧式浏览器导致的大约80％的问题。

- -

了解这些问题

- -

实际上，最重要的事情是阅读那些浏览器的文档，并尝试理解通用的（解决）模式。例如，在许多情况下，HTML表单是否支持CSS是最大的问题。这是正确的开始，只需要检查你想用的元素或接口是否支持CSS即可。MDN有一个关于包含HTML中可用的元素、属性或API的兼容表单可查。 此外，仍有其他一些非常有用的资源：

- -

浏览器厂商的文档

- - - -

独立文档

- - - -

让事情变得更简单

- -

由于HTML forms 包含复杂的交互，所以有一条法则: keep it as simple as possible。很多时候，我们想让表单更美观或想使用更高级的技术，然而，构建高效的HTML表单不只是设计和技术问题。记得花时间读一下这篇文章t forms usability on UX For The Masses.

- -

优雅地降级(Graceful degradation)是web开发者最好的朋友

- -

Graceful degradation and progressive enhancement 是一个开发模式，它允许你通过同时支持多种浏览器来构建优秀内容。当你为现代浏览器构建内容时，你想确保它能在旧式浏览器中以某种方式工作，这就是优雅地降级（graceful degradation）.

- -

让我们看一些关于HTML表单的例子：

- -

HTML input 类型

- -

HTML5引入的新input类型十分酷，因为他们的降级(degrade)是高度可预测的。如果一个浏览器不能理解  {{HTMLElement("input")}}元素的 {{htmlattrxref("type","input")}} 属性, 它将会后退到text一样的行为。

- -
<label for="myColor">
-  Pick a color
-  <input type="color" id="myColor" name="color">
-</label>
- - - - - - - - - - - - - - -
Chrome 24Firefox 18
Screen shot of the color input on Chrome for Mac OSXScreen shot of the color input on Firefox for Mac OSX
- -

CSS 属性选择器

- -

CSS属性选择器  在 HTML Forms 中十分有用，然而旧式浏览器不支持. 在那种情形下，一般会习惯性使用等价的class:

- -
<input type="number" class="number">
- -
input[type=number] {
-  /* 这在一些浏览器中是不能执行的 */
-}
-
-input.number {
-  /* 可以在任何浏览器中执行 */
-}
- -

注意下面的写法没有用（由于它是重复的），在某些浏览器中会失败:

- -
input[type=number],
-input.number {
-  /* 在某些浏览器中，这可能会失败，因为如果他们不理解其中任何一个选择器，则跳过整个规则 */
-}
- -

表单按钮

- -

有两种定义HTML表单按钮的方式:

- - - -

如果你想通过元素选择器在按钮上应用CSS的话，采用 {{HTMLElement("input")}} 元素的方式会让事情变得稍微有点复杂:

- -
<input type="button" class="button" value="click me">
- -
input {
-  /* 此规则关闭了input元素定义的按钮的默认渲染样式 */
-  border: 1px solid #CCC;
-}
-
-input.button {
-  /* 这条规则不会恢复默认渲染*/
-  border: none;
-}
-
-input.button {
-  /* 这条也不会(恢复)! 实际上在浏览器中没有标准方式实现这一目标 */
-  border: auto;
-}
- -

{{HTMLElement("button")}} 元素有两个问题令人困扰:

- - - -
<!-- 某些情形下，点击按钮将发送 "<em>Do A</em>" 而不是值"A" -->
-<button type="submit" name="IWantTo" value="A">
-  <em>Do A</em>
-</button>
- -

给予你的工程限制来选择上述任一种解决方案。

- -

让我们过一遍CSS

- -

HTML表单和旧式浏览器最大的问题是CSS的兼容性。正如你可以从这篇文章 Property compatibility table for form widgets 中看到的复杂性, 它非常的困难。即使仍然可以对文本元素（如大小、字体颜色等）进行一些调整，但那样做会有副作用。最好的办法还是不要美化HTML表单小组件。但你仍然可以将样式应用到表单周围的项目上。如果你是一个专业人士，并且你的客户需要那么做，在这种情况下，你可以研究一些硬技能，如 rebuilding widgets with JavaScript。但在那种情况下，最好还是毫不犹豫的让客户收回这些愚蠢的决定。

- -

功能检测和模拟(polyfills)

- -

尽管JavaScript在现代浏览中是非常棒的技术，但在旧式浏览器中可能存在很多的问题。

- -

Unobtrusive JavaScript

- -

API的兼容性是最大的问题。由于这个原因，与"不引人注意的（unobtrusive）" JavaScript一起工作被认为是最佳实践（译者注：此处意思是说没有/忽略JS或JS出了问题也能工作）。这个开发模式定义了两个需求：

- - - -

The principles of unobtrusive JavaScript (最早是由Peter-Paul Koch为 Dev.Opera.com 所撰写，现在已转移到 Docs.WebPlatform.org) 同样阐述了上述观点。

- -

Modernizr 库

- -

有很多情形，好的"polyfill"能通过提供缺少的API以提供帮助。一个 polyfill 是一些JavaScript(脚本) 用于填补旧式浏览器中的功能缺失。虽然它们可以用来改进对任何功能的支持，并且使用它们Nederland风险小于CSS和HTML，然而，JS仍然会在很多情况下不工作（网络问题，脚本冲突等）。但是对于JavaScript，如果你总是记住和unobetructive的Javascript一起工作，不适用polyfill也没什么大不了。

- -

最好的polyfill缺失API的方式是使用Modernizr 库以及它的子项目 YepNope. Modernizr 库允许您测试功能可用性，以便采取相应的行动。YepNope 是一个条件加载库。

- -

下面是一个例子:

- -
Modernizr.load({
-  // 这会测试您的浏览器是否支持HTML5表单验证API
-  test : Modernizr.formvalidation,
-
-  // 如果浏览器不支持它，则会加载以下polyfill
-  nope : form-validation-API-polyfill.js,
-
-  // 无论如何，你的核心App文件依赖于该API被加载
-  both : app.js,
-
-  // 一旦加载了这两个文件，就会调用该函数来初始化应用程序
-  complete : function () {
-    app.init();
-  }
-});
- -

Modernizr 团队按照惯例维护着a list of great polyfills。仅仅按需使用即可。

- -
-

Note: Modernizr还有其他很棒的功能可以帮助您处理unobstructive的JavaScript和优雅的降级技术。请阅读 Modernizr documentation.

-
- -

注意性能

- -

尽管像Modernizr这样的脚本对性能非常敏感，但加载200千字节的polyfill仍然会影响程序的性能。这对旧式浏览器来说尤其重要，这些浏览器有处理速度非常慢的JavaScript引擎，让polyfills的执行对于用户来说变得很痛苦。性能本身就是一个主题，但旧式浏览器对它非常敏感：基本上，它们速度慢，需要的poliyfill越多，它们需要处理的JavaScript越多。与现代浏览器相比，它们承受双重负担。使用旧版浏览器测试你的代码，了解它们的实际表现。有时，放弃某些功能会带来更好的用户体验，而不是在所有浏览器中具有完全相同的功能。作为最后提醒，总是优先考虑用户。

- -

总结

- -

正如你所看到的，处理旧式浏览器不仅仅是表单问题。而是一整套技术;但是掌握所有这些技术超出了本文的范围。

- -

如果你阅读了HTML Forms guide中的所有文章，你应该可以放心的使用表单了。如果你想探索新技术，请帮助improve the guide.

- -

{{PreviousMenuNext("Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms")}}

- -

 

- -

In this module

- - - -

 

diff --git a/files/zh-cn/learn/html/forms/index.html b/files/zh-cn/learn/html/forms/index.html deleted file mode 100644 index ad51eafa35..0000000000 --- a/files/zh-cn/learn/html/forms/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: HTML表单指南 -slug: Learn/HTML/Forms -tags: - - Forms - - HTML - - NeedsTranslation - - TopicStub -translation_of: Learn/Forms ---- -
{{LearnSidebar}}
- -

这个模块提供了一系列帮助您掌握HTML表单的文章。HTML表单是与用户交互的强大工具;然而，由于历史和技术上的原因，如何充分发挥它们的潜力并不总是显而易见的。在本指南中，我们将介绍HTML表单的所有方面，从结构到样式，从数据处理到自定义小部件。

- -

预备知识

- -

在开始这个模块之前，您至少应该完成我们对HTML的介绍。此时此刻，您应该会发现{{anch("基本指南")}}很容易理解，并且能够使用我们的原生表单小部件指南。

- -

但是模块的其余部分更高级一些，很容易将表单小部件放在页面上，但是如果不使用高级表单特性、CSS和JavaScript，就不能对它们做太多的工作。因此，在您查看其他部分之前，我们建议您先离开，先学习一些CSS和JavaScript。

- -
-

注意：如果您正在使用一个不能让您创建自己的文件的计算机/平板电脑/其它设备，那么您可以尝试(大多数)在线编码程序中的代码示例，例如JSBin或Thimble。

-
- -

基本指南

- -
-
你的第一个HTML表单
-
本系列的第一篇文章提供了您第一次创建HTML表单的经验，包括设计一个简单表单，使用正确的HTML元素实现它，通过CSS添加一些非常简单的样式，以及如何将数据发送到服务器。
-
如何构造HTML表单
-
有了基础知识，我们现在更详细地了解了用于为表单的不同部分提供结构和意义的元素。
-
- -

什么表单小部件可用?

- -
-
原生表单小部件
-
现在，我们详细研究了不同表单部件的功能，查看了哪些选项可用于收集不同类型的数据。
-
- -

验证和提交表单数据

- -
-
发送表单数据
-
本文讨论当用户提交一个表单时，会发生什么情况——表单数据的去向以及当表单数据到达指定位置时我们如何处理？我们还研究了与发送表单数据相关的一些安全问题。
-
表单数据验证
-
发送数据还不够，我们还需要确保数据用户填写表单的格式是正确的，我们需要成功地处理它，而且它不会破坏我们的应用程序。我们还希望帮助用户正确填写表单，在使用应用程序时不要感到沮丧。表单验证帮助我们实现这些目标，本文将告诉您需要了解的内容。
-
- -

高级指南

- -
-
如何构建自定表单小组件
-
在某些情况下，原生表单部件无法提供您需要的东西，例如，由于样式或功能。在这种情况下，您可能需要使用原生HTML构建自己的表单小部件。本文将说明您是如何做到这一点的，以及在实际案例研究中需要注意的事项。
-
通过JavaScript发送表单
-
本文将讨论如何使用表单来组装HTTP请求，并通过定制的JavaScript发送它，而不是标准的表单提交。它还研究了为什么要这么做，以及这样做的意义。（请参阅使用FormData对象。）
-
遗留浏览器中的HTML表单
-
文章覆盖特性检测等。这应该被重定向到跨浏览器测试模块，因为相同的东西在那里被更好地覆盖。
-
- -

表单样式指南

- -
-
HTML表单样式
-
本文介绍了使用CSS的样式表单，包括您可能需要了解的基本样式任务的所有基础知识。
-
高级HTML表单样式
-
在这里，我们将看到一些更高级的表单样式技术，这些技术需要在处理一些更难以风格的元素时使用。
-
表单部件的属性兼容性表
-
这最后一篇文章提供了一个方便的参考，允许您查看哪些CSS属性与哪些表单元素是兼容的。
-
- -

另见

- - diff --git a/files/zh-cn/learn/html/forms/property_compatibility_table_for_form_widgets/index.html b/files/zh-cn/learn/html/forms/property_compatibility_table_for_form_widgets/index.html deleted file mode 100644 index 31f8075f5b..0000000000 --- a/files/zh-cn/learn/html/forms/property_compatibility_table_for_form_widgets/index.html +++ /dev/null @@ -1,1988 +0,0 @@ ---- -title: 表单组件兼容性列表 -slug: Learn/HTML/Forms/Property_compatibility_table_for_form_widgets -translation_of: Learn/Forms/Property_compatibility_table_for_form_controls ---- -
{{learnsidebar}}{{PreviousMenu("Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}
- -

下面的兼容性表格尝试总结 HTML 表单的 CSS 支持状况。由于 CSS 和 HTML 表单的复杂性，不能把这些表格当作完善的参考。但是，它们可以让你很好地洞察什么能做什么不能做，这将会对你学习使用有很好地帮助。

- -

如何阅读表格

- -

值

- -

对于每个属性，有四种可能地取值：

- -
-
YES
-
此属性具有相当一致的跨浏览器支持。在某些极端情况下，你可能仍然会面临奇怪的副作用。
-
PARTIAL
-
尽管这个属性会生效，你还是会经常面对奇怪的副作用和不一致性。你应该尽力避免这些属性，除非你已经深知那些副作用。
-
NO
-
此属性就是不工作或者表现得非常不一致，所以并不可靠。
-
N.A.
-
此属性对这种类型的组件没有意义。
-
- -

渲染

- -

对于每个属性有两种可能的渲染方式：

- -
-
N (Normal)
-
表示这个属性会像设置的那样应用。
-
T (Tweaked)
-
表示这个属性需要通过下列的额外规则来使用：
-
- -
* {
-/* This turn off the native look and feel on WebKit based browsers */
-  -webkit-appearance: none;
-
-/* This turn off the native look and feel on Gecko based browsers */
-  -moz-appearance: none;
-
-/* This turn off the native look and feel on several different browsers
-   including Opera, Internet Explorer and Firefox */
-  background: none;
-}
- -

兼容性表格

- -

Global behaviors

- -

对许多浏览器来说，许多行为在全局范围内都是通用的：

- -
-
{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}
-
任意属性可能影响组件部分或全部的原生外观。小心使用。
-
{{cssxref("line-height")}}
-
不同浏览器支持不同，避免使用
-
{{cssxref("text-decoration")}}
-
Opera表单不支持
-
{{cssxref("text-overflow")}}
-
Opera, Safari,  IE9 表单不支持
-
{{cssxref("text-shadow")}}
-
Opera 和 IE9 不支持
-
- -

Text fields

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes 
{{cssxref("height")}}Partial[1][2]Yes -
    -
  1. WebKit 浏览器 (主要在 Mac OSX and iOS 上) 的搜索域使用原生的样式和行为。因此，需要使用 -webkit-appearance:none 才能将这个属性应用到搜索域上。
    2. -
  2. 在 Windows 7, Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
    3. -
-
{{cssxref("border")}}Partial[1][2]Yes -
    -
  1. WebKit 浏览器 (主要在 Mac OSX and iOS 上) 的搜索域使用原生的样式和行为。因此，需要使用 -webkit-appearance:none 才能将这个属性应用到搜索域上。
    2. -
  2. 在 Windows 7, Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
    3. -
-
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}Partial[1][2]Yes -
    -
  1. WebKit 浏览器 (主要在 Mac OSX and iOS 上) 的搜索域使用原生的样式和行为。因此，需要使用 -webkit-appearance:none 才能将这个属性应用到搜索域上。
    2. -
  2. 在 Windows 7, Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
    3. -
-
Text and font
{{cssxref("color")}}[1]YesYes -
    -
  1. 如果 {{cssxref("border-color")}} 属性没有设置，一些基于 WebKit 的浏览器会将 {{cssxref("color")}} 属性应用到边框上，颜色和 {{HTMLElement("textarea")}} 的字体颜色一样。
    2. -
-
{{cssxref("font")}}YesYes查看有关 {{cssxref("line-height")}} 的注释
{{cssxref("letter-spacing")}}YesYes 
{{cssxref("text-align")}}YesYes 
{{cssxref("text-decoration")}}PartialPartial查看有关 Opera 的注释
{{cssxref("text-indent")}}Partial[1]Partial[1] -
    -
  1. IE9 只在 {{HTMLElement("textarea")}} 上支持这个属性，而 Opera 只在单行文本域中支持。
    2. -
-
{{cssxref("text-overflow")}}PartialPartial 
{{cssxref("text-shadow")}}PartialPartial 
{{cssxref("text-transform")}}YesYes 
Border and background
{{cssxref("background")}}Partial[1]Yes -
    -
  1. WebKit 浏览器 (主要在 Mac OSX and iOS 上) 的搜索域使用原生的样式和行为。因此，需要使用 -webkit-appearance:none 才能将这个属性应用到搜索域上。
    2. -
  2. 在 Windows 7上, Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
    3. -
-
{{cssxref("border-radius")}}Partial[1][2]Yes -
    -
  1. WebKit 浏览器 (主要在 Mac OSX and iOS 上) 的搜索域使用原生的样式和行为。因此，需要使用 -webkit-appearance:none 才能将这个属性应用到搜索域上。
    2. -
  2. 在 Windows 7上, Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
    3. -
  3. 在 Opera 上，只有当边框明确设定时 {{cssxref("border-radius")}} 属性才会应用
    4. -
-
{{cssxref("box-shadow")}}NoPartial[1] -
    -
  1. IE9 不支持这个属性
    2. -
-
- -

Buttons

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes 
{{cssxref("height")}}Partial[1]Yes -
    -
  1. 这个属性不能应用于 Mac OSX or iOS 上基于 WebKit 的浏览器。
    2. -
-
{{cssxref("border")}}PartialYes 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}Partial[1]Yes -
    -
  1. 这个属性不能应用于 Mac OSX or iOS 上基于 WebKit 的浏览器。
    2. -
-
Text and font
{{cssxref("color")}}YesYes 
{{cssxref("font")}}YesYes查看{{cssxref("line-height")}} 的注意事项。
{{cssxref("letter-spacing")}}YesYes 
{{cssxref("text-align")}}NoNo 
{{cssxref("text-decoration")}}PartialYes 
{{cssxref("text-indent")}}YesYes 
{{cssxref("text-overflow")}}NoNo 
{{cssxref("text-shadow")}}PartialPartial 
{{cssxref("text-transform")}}YesYes 
Border and background
{{cssxref("background")}}YesYes 
{{cssxref("border-radius")}}Yes[1]Yes[1] -
    -
  1. 在 Opera 上，只有当边框明确设定时 {{cssxref("border-radius")}} 属性才会应用
    2. -
-
{{cssxref("box-shadow")}}NoPartial[1] -
    -
  1. IE9 不支持这个属性
    2. -
-
- -

Number

- -

在实现了 number 组件的浏览器上，并没有一种标准的方式改变数字组件的样式，值得注意的是 Safari 上的数字输入框不在这个范围内。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes 
{{cssxref("height")}}Partial[1]Partial[1] -
    -
  1. 在 Opera 上，数字选择器缩小时，可能会隐藏域中内容。
    2. -
-
{{cssxref("border")}}YesYes 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}Partial[1]Partial[1] -
    -
  1. 在 Opera 上，数字选择器缩小时，可能会隐藏域中内容。
    2. -
-
Text and font
{{cssxref("color")}}YesYes 
{{cssxref("font")}}YesYes查看{{cssxref("line-height")}} 的注意事项。
{{cssxref("letter-spacing")}}YesYes 
{{cssxref("text-align")}}YesYes 
{{cssxref("text-decoration")}}PartialPartial 
{{cssxref("text-indent")}}YesYes 
{{cssxref("text-overflow")}}NoNo 
{{cssxref("text-shadow")}}PartialPartial 
{{cssxref("text-transform")}}N.A.N.A. 
Border and background
{{cssxref("background")}}NoNo -

支持，但浏览器之间的不一致性太多，所以并不可靠。

-
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
- -

Check boxes and radio buttons

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}No[1]No[1] -
    -
  1. 一些浏览器会添加额外的边缘，另一些会拉伸组件。
    2. -
-
{{cssxref("height")}}No[1]No[1] -
    -
  1. 一些浏览器会添加额外的边缘，另一些会拉伸组件。
    2. -
-
{{cssxref("border")}}NoNo 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}NoNo 
Text and font
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Border and background
{{cssxref("background")}}NoNo 
{{cssxref("border-radius")}}NoNo 
{{cssxref("box-shadow")}}NoNo 
- -

Select boxes (single line)

- -

Firefox 不提供任何方式改变 {{HTMLElement("select")}} 元素的下箭头。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}Partial[1]Partial[1] -
    -
  1. 这个属性在 {{HTMLElement("select")}} 元素上一切正常，但不能用于 {{HTMLElement("option")}} 或者 {{HTMLElement("optgroup")}} 元素。
    2. -
-
{{cssxref("height")}}NoYes 
{{cssxref("border")}}PartialYes 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}No[1]Partial[2] -
    -
  1. 属性可以应用，但 Mac OSX 上浏览器之间的以不一致的方向显示，所以并不可靠。
    2. -
  2. 这个属性在 {{HTMLElement("select")}} 元素上一切正常，但不能用于 {{HTMLElement("option")}} 或者 {{HTMLElement("optgroup")}} 元素。
    3. -
-
Text and font
{{cssxref("color")}}Partial[1]Partial[1] -
    -
  1. 在 Mac OSX 上， 基于 WebKit 的浏览器 不支持将这个属性用于原生组件。它们和 Opera, 在 {{HTMLElement("option")}} 和 {{HTMLElement("optgroup")}} 元素上根本不支持这个属性。
    2. -
-
{{cssxref("font")}}Partial[1]Partial[1] -
    -
  1. 在 Mac OSX 上， 基于 WebKit 的浏览器 不支持将这个属性用于原生组件。它们和 Opera, 在 {{HTMLElement("option")}} 和 {{HTMLElement("optgroup")}} 元素上根本不支持这个属性。
    2. -
-
{{cssxref("letter-spacing")}}Partial[1]Partial[1] -
    -
  1. IE9 不支持将这个属性用于 {{HTMLElement("select")}}, {{HTMLElement("option")}}, 和 {{HTMLElement("optgroup")}} 元素；Mac OSX 上基于 WebKit 的浏览器不支持将这个属性应用于 {{HTMLElement("option")}} 和 {{HTMLElement("optgroup")}} 元素。
    2. -
-
{{cssxref("text-align")}}No[1]No[1] -
    -
  1. Windows 7 上的 IE9 和 Mac OSX 上基于 WebKit 的浏览器，不支持这个组件上的这个属性。
    2. -
-
{{cssxref("text-decoration")}}Partial[1]Partial[1] -
    -
  1. 只有 Firefox 提供了对这个属性的完全支持。Opera 根本不支持这个属性，而其他浏览器只提供了对 {{HTMLElement("select")}} 元素的支持。
    2. -
-
{{cssxref("text-indent")}}Partial[1][2]Partial[1][2] -
    -
  1. 大部分浏览器仅仅支持将这个属性用于 {{HTMLElement("select")}} 元素。
    2. -
  2. IE9 不支持这个属性
    3. -
-
{{cssxref("text-overflow")}}NoNo 
{{cssxref("text-shadow")}}Partial[1][2]Partial[1][2] -
    -
  1. 大部分浏览器仅仅支持将这个属性用于 {{HTMLElement("select")}} 元素。
    2. -
  2. IE9 不支持这个属性
    3. -
-
{{cssxref("text-transform")}}Partial[1]Partial[1] -
    -
  1. 大部分浏览器仅仅支持将这个属性用于 {{HTMLElement("select")}} 元素。
    2. -
-
Border and background
{{cssxref("background")}}Partial[1]Partial[1] -
    -
  1. 大部分浏览器仅仅支持将这个属性用于 {{HTMLElement("select")}} 元素。
    2. -
-
{{cssxref("border-radius")}}Partial[1]Partial[1]
{{cssxref("box-shadow")}}NoPartial[1]
- -

Select boxes (multiline)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes 
{{cssxref("height")}}YesYes 
{{cssxref("border")}}YesYes 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}Partial[1]Partial[1] -
    -
  1. Opera 在 {{HTMLElement("select")}} 元素上 不支持 {{cssxref("padding-top")}} 和 {{cssxref("padding-bottom")}} 。
    2. -
-
Text and font
{{cssxref("color")}}YesYes 
{{cssxref("font")}}YesYes查看{{cssxref("line-height")}} 的注意事项。
{{cssxref("letter-spacing")}}Partial[1]Partial[1] -
    -
  1. IE9 在 {{HTMLElement("select")}}, {{HTMLElement("option")}}, 和{{HTMLElement("optgroup")}} 元素上不支持这个属性；Mac OSX 上基于 WebKit 的浏览器在 {{HTMLElement("option")}} 和{{HTMLElement("optgroup")}} 元素上不支持这个属性。
    2. -
-
{{cssxref("text-align")}}No[1]No[1] -
    -
  1. Windows 7 上的 IE9 和 Mac OSX 上基于 WebKit 的浏览器，不支持这个组件上的这个属性。
    2. -
-
{{cssxref("text-decoration")}}No[1]No[1] -
    -
  1. 只被 Firefox and IE9+ 支持。
    2. -
-
{{cssxref("text-indent")}}NoNo 
{{cssxref("text-overflow")}}NoNo 
{{cssxref("text-shadow")}}NoNo 
{{cssxref("text-transform")}}Partial[1]Partial[1] -
    -
  1. 大部分浏览器仅仅支持将这个属性用于 {{HTMLElement("select")}} 元素。
    2. -
-
Border and background
{{cssxref("background")}}YesYes 
{{cssxref("border-radius")}}Yes[1]Yes[1] -
    -
  1. 在 Opera 上，只有当边框明确设定时 {{cssxref("border-radius")}} 属性才会应用
    2. -
-
{{cssxref("box-shadow")}}NoPartial[1] -
    -
  1. IE9 不支持这个属性
    2. -
-
- -

Datalist

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}NoNo 
{{cssxref("height")}}NoNo 
{{cssxref("border")}}NoNo 
{{cssxref("margin")}}NoNo 
{{cssxref("padding")}}NoNo 
Text and font
{{cssxref("color")}}NoNo 
{{cssxref("font")}}NoNo 
{{cssxref("letter-spacing")}}NoNo 
{{cssxref("text-align")}}NoNo 
{{cssxref("text-decoration")}}NoNo 
{{cssxref("text-indent")}}NoNo 
{{cssxref("text-overflow")}}NoNo 
{{cssxref("text-shadow")}}NoNo 
{{cssxref("text-transform")}}NoNo 
Border and background
{{cssxref("background")}}NoNo 
{{cssxref("border-radius")}}NoNo 
{{cssxref("box-shadow")}}NoNo 
- -

File picker

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}NoNo 
{{cssxref("height")}}NoNo 
{{cssxref("border")}}NoNo 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}NoNo 
Text and font
{{cssxref("color")}}YesYes 
{{cssxref("font")}}No[1]No[1] -
    -
  1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
    2. -
-
{{cssxref("letter-spacing")}}Partial[1]Partial[1] -
    -
  1. 许多浏览器将这个属性应用到选择按钮上。
    2. -
-
{{cssxref("text-align")}}NoNo 
{{cssxref("text-decoration")}}NoNo 
{{cssxref("text-indent")}}Partial[1]Partial[1] -
    -
  1. 它表现的或多或少的像一个组件左侧的边缘。
    2. -
-
{{cssxref("text-overflow")}}NoNo 
{{cssxref("text-shadow")}}NoNo 
{{cssxref("text-transform")}}NoNo 
Border and background
{{cssxref("background")}}No[1]No[1] -
    -
  1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
    2. -
-
{{cssxref("border-radius")}}NoNo 
{{cssxref("box-shadow")}}NoPartial[1] -
    -
  1. IE9 不支持这个属性
    2. -
-
- -

Date pickers

- -

许多属性都支持但是浏览器之间的不一致性太多，所以并不可靠。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}NoNo 
{{cssxref("height")}}NoNo 
{{cssxref("border")}}NoNo 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}NoNo 
Text and font
{{cssxref("color")}}NoNo 
{{cssxref("font")}}NoNo 
{{cssxref("letter-spacing")}}NoNo 
{{cssxref("text-align")}}NoNo 
{{cssxref("text-decoration")}}NoNo 
{{cssxref("text-indent")}}NoNo 
{{cssxref("text-overflow")}}NoNo 
{{cssxref("text-shadow")}}NoNo 
{{cssxref("text-transform")}}NoNo 
Border and background
{{cssxref("background")}}NoNo 
{{cssxref("border-radius")}}NoNo 
{{cssxref("box-shadow")}}NoNo 
- -

Color pickers

- -

There is currently not enough implementation to get realiable behaviors.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes 
{{cssxref("height")}}No[1]Yes -
    -
  1. Opera 将它像一个选择组件一样，以同样的限制处理。
    2. -
-
{{cssxref("border")}}YesYes 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}No[1]Yes -
    -
  1. Opera 将它像一个选择组件一样，以同样的限制处理。
    2. -
-
Text and font
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Border and background
{{cssxref("background")}}No[1]No[1] -
    -
  1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
    2. -
-
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
- -

Meters and progress

- -

There is currently not enough implementation to get realiable behaviors.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes 
{{cssxref("height")}}YesYes 
{{cssxref("border")}}PartialYes 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}YesPartial[1] -
    -
  1. 当 {{cssxref("padding")}} 属性应用于一个 tweaked 元素时，Chrome 会隐藏 {{HTMLElement("progress")}} 和{{HTMLElement("meter")}} 元素。
    2. -
-
Text and font
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Border and background
{{cssxref("background")}}No[1]No[1] -
    -
  1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
    2. -
-
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
- -

Range

- -

There is no standard way to change the style of the range grip and Opera has no way to tweak the default rendering of the range widget.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes 
{{cssxref("height")}}Partial[1]Partial[1] -
    -
  1. Chrome 和 Opera 在组件周围添加了一些额外的空白，而 Windows 7 上的 Opera 则拉伸范围选择器的滑块。
    2. -
-
{{cssxref("border")}}NoYes 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}Partial[1]Yes -
    -
  1.  {{cssxref("padding")}} 属性被运用，但是没有任何的视觉效果。
    2. -
-
Text and font
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Border and background
{{cssxref("background")}}No[1]No[1] -
    -
  1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
    2. -
-
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
- -

Image buttons

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes 
{{cssxref("height")}}YesYes 
{{cssxref("border")}}YesYes 
{{cssxref("margin")}}YesYes 
{{cssxref("padding")}}YesYes 
Text and font
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Border and background
{{cssxref("background")}}YesYes 
{{cssxref("border-radius")}}Partial[1]Partial[1] -
    -
  1. IE9 不支持这个属性
    2. -
-
{{cssxref("box-shadow")}}Partial[1]Partial[1] -
    -
  1. IE9 不支持这个属性
    2. -
-
- -

{{PreviousMenu("Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}

- -

 

- -

在本单元中

- - - -

 

diff --git a/files/zh-cn/learn/html/forms/sending_and_retrieving_form_data/index.html b/files/zh-cn/learn/html/forms/sending_and_retrieving_form_data/index.html deleted file mode 100644 index ed3a4ef0ef..0000000000 --- a/files/zh-cn/learn/html/forms/sending_and_retrieving_form_data/index.html +++ /dev/null @@ -1,369 +0,0 @@ ---- -title: 发送表单数据 -slug: Learn/HTML/Forms/Sending_and_retrieving_form_data -tags: - - HTML - - HTTP - - Web - - request - - 安全 - - 表单 -translation_of: Learn/Forms/Sending_and_retrieving_form_data ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}

- -

本文将讨论当用户提交表单时发生了什么——数据去了哪，以及当它到达时该如何处理?我们还研究了与发送表单数据相关的一些安全问题。

- - - - - - - - - - - - -
预备知识： -

基本计算机素养，对HTML的理解，对HTTP 和服务器端编程的基础知识。

-
目标：了解表单数据提交时发生了什么，包括服务器上如何处理数据的基本概念。
- -

数据都去哪儿了？

- -

在这里，我们将讨论在提交表单时数据会发生什么。

- -

客户端/服务器体系结构

- -

web基于非常基本的客户端/服务器体系结构，可以总结如下:客户端(通常是web浏览器)向服务器发送请求(大多数情况下是Apache、Nginx、IIS、Tomcat等web服务器)，使用HTTP 协议。服务器使用相同的协议来回答请求。

- -

A basic schema of the Web client/server architecture

- -

在客户端，HTML表单只不过是一种方便的用户友好的方式，可以配置HTTP请求将数据发送到服务器。这使用户能够提供在HTTP请求中传递的信息。

- -
-

注意：为了更好地了解客户端—服务器架构是如何工作的，请阅读我们的服务器端网站编程的第一个步骤模块。

-
- -

在客户端:定义如何发送数据

- -

{{HTMLElement("form")}}元素定义了如何发送数据。它的所有属性都是为了让您配置当用户点击提交按钮时发送的请求。两个最重要的属性是{{htmlattrxref("action","form")}}和{{htmlattrxref("method","form")}}。

- -

 {{htmlattrxref("action","form")}} 属性

- -

这个属性定义了发送数据要去的位置。它的值必须是一个有效的URL。如果没有提供此属性，则数据将被发送到包含这个表单的页面的URL。

- -

在这个例子中，数据被发送到一个绝对URL —— http://foo.com：

- -
<form action="http://foo.com">
- -

这里，我们使用相对URL——数据被发送到服务器上的不同URL

- -
<form action="/somewhere_else">
-
- -

在没有属性的情况下，像下面一样，{{HTMLElement("form")}}数据被发送到表单出现的相同页面上：

- -
<form>
- -

许多较老的页面使用下面的符号表示数据应该被发送到包含表单的相同页面；这是必需的，因为直到HTML5{{htmlattrxref("action", "form")}}属性都需要该符号。现在，这不再需要了。

- -
<form action="#">
- -
-

注意：可以指定使用HTTPS(安全HTTP)协议的URL。当您这样做时，数据将与请求的其余部分一起加密，即使表单本身是托管在使用HTTP访问的不安全页面上。另一方面，如果表单是在安全页面上托管的，但是您指定了一个不安全的HTTP URL，它带有{{htmlattrxref("action","form")}}属性，所有的浏览器都会在每次尝试发送数据时向用户显示一个安全警告，因为数据不会被加密。

-
- -

 {{htmlattrxref("method","form")}}属性

- -

该属性定义了如何发送数据。HTTP协议提供了几种执行请求的方法；HTML表单数据可以通过许多不同的方法进行数据传输，其中最常见的是GET方法和POST方法。

- -

为了理解这两种方法之间的区别，让我们回过头来看看HTTP是如何工作的。
- 每当您想要访问Web上的资源时，浏览器都会向URL发送一个请求。
- HTTP请求由两个部分组成：一个包含关于浏览器功能的全局元数据集的头部，和一个包含服务器处理特定请求所需信息的主体。

- -
GET 方法
- -

GET方法是浏览器使用的方法，请求服务器返回给定的资源:“嘿，服务器，我想要得到这个资源。”在这种情况下，浏览器发送一个空的主体。由于主体是空的，如果使用该方法发送一个表单，那么发送到服务器的数据将被追加到URL。

- -

考虑下面这个表单：

- -
<form action="http://foo.com" method="get">
-  <div>
-    <label for="say">What greeting do you want to say?</label>
-    <input name="say" id="say" value="Hi">
-  </div>
-  <div>
-    <label for="to">Who do you want to say it to?</label>
-    <input name="to" id="to" value="Mom">
-  </div>
-  <div>
-    <button>Send my greetings</button>
-  </div>
-</form>
- -

由于已经使用了GET方法，当你提交表单的时候，您将看到www.foo.com/?say=Hi&to=Mom在浏览器地址栏里。

- -

数据作为一系列的名称/值对被附加到URL。在URL web地址结束之后，我们得到一个问号(?)，后面跟着由一个与符号(&)互相分隔开的名称/值对。在本例中，我们将两个数据传递给服务器。

- - - -

HTTP请求如下：

- -
GET /?say=Hi&to=Mom HTTP/2.0
-Host: foo.com
- -
-

注意：你可以在GitHub 上看到本例子——见 get-method.html (预览版).

-
- -
POST 方法
- -

POST方法略有不同。这是浏览器在询问响应时使用与服务器通信的方法，该响应考虑了HTTP请求正文中提供的数据:“嘿，服务器，看一下这些数据，然后给我回一个适当的结果。”如果使用该方法发送表单，则将数据追加到HTTP请求的主体中。

- -

让我们来看一个例子，这是我们在上面的GET部分中所看到的相同的形式，但是使用{{htmlattrxref("method","form")}}属性设置为post。

- -
<form action="http://foo.com" method="post">
-  <div>
-    <label for="say">What greeting do you want to say?</label>
-    <input name="say" id="say" value="Hi">
-  </div>
-  <div>
-    <label for="to">Who do you want to say it to?</label>
-    <input name="to" id="to" value="Mom">
-  </div>
-  <div>
-    <button>Send my greetings</button>
-  </div>
-</form>
- -

当使用POST方法提交表单时，没有数据会附加到URL，HTTP请求看起来是这样的，而请求主体中包含的数据是这样的：

- -
POST / HTTP/2.0
-Host: foo.com
-Content-Type: application/x-www-form-urlencoded
-Content-Length: 13
-
-say=Hi&to=Mom
- -

Content-Length数据头表示主体的大小，Content-Type数据头表示发送到服务器的资源类型。稍后我们将讨论这些标头。

- -
-

注意：你可以在 GitHub 上看到本例—— 见 post-method.html (预览版).

-
- -

查看HTTP请求

- -

HTTP请求永远不会显示给用户(如果您想要看到它们，您需要使用诸如Firefox Network Monitor或Chrome Developer Tools之类的工具)。例如，您的表单数据将显示在Chrome网络选项卡中：

- -
    -
  1. 按下 F12
    2. -
  2. 选择 "Network"
    3. -
  3. 选择 "All"
    4. -
  4. 在 "Name" 标签页选择 "foo.com"
    5. -
  5. 选择 "Headers"
    6. -
- -

你可以获得表单数据，像下图显示的那样

- -

- -

唯一显示给用户的是被调用的URL。正如我们上面提到的，使用GET请求用户将在他们的URL栏中看到数据，但是使用POST请求用户将不会看到。这一点很重要，有两个原因：

- -
    -
  1. 如果您需要发送一个密码(或其他敏感数据)，永远不要使用GET方法否则数据会在URL栏中显示，这将非常不安全。
    2. -
  2. 如果您需要发送大量的数据，那么POST方法是首选的，因为一些浏览器限制了URL的大小。此外，许多服务器限制它们接受的URL的长度。
    3. -
- -

在服务器端:检索数据

- -

无论选择哪种HTTP方法，服务器都会接收一个字符串并解析，以便将数据作为键/值对序列获取。您访问这个序列的方式取决于您使用的开发平台以及您可能使用的任何特定框架。您使用的技术也决定了如何处理密钥副本；通常，最近收到的密钥的值是优先的。

- -

例如：原始PHP

- -

PHP提供了一些全局对象来访问数据。假设您已经使用了POST方法，那么下面的示例将获取数据并将其显示给用户。当然，你对数据的处理取决于你自己。您可以显示它，将它存储到数据库中，通过电子邮件发送它，或者以其他方式处理它。

- -
<?php
-  // The global $_POST variable allows you to access the data sent with the POST method by name
-  // To access the data sent with the GET method, you can use $_GET
-  $say = htmlspecialchars($_POST['say']);
-  $to  = htmlspecialchars($_POST['to']);
-
-  echo  $say, ' ', $to;
-?>
- -

这个例子显示了一个带有我们发送的数据的页面。您可以在我们的示例php-example.html中看到这一点——该文件包含与我们之前看到的相同的示例表单，它使用了post的method和php-example.php的action。当提交时，它将表单数据发送到php-example.php，其中包含了上述代码块中所见的php代码。当执行此代码时，浏览器中的输出是Hi Mom。

- -

- -
-

注意：当您将本例加载到本地浏览器中时，这个示例将无法工作---浏览器无法解析PHP代码，因此当提交表单时，浏览器只会为您提供下载PHP文件。为了让它生效，您需要通过某种类型的PHP服务器运行这个示例。本地PHP测试的好选择有MAMP(Mac和Windows)和AMPPS(Mac、Windows、Linux)。

-
- -

例子： Python

- -

这个例子展示了如何使用Python完成同样的事情——在web页面上显示提交的数据。
- 这将使用Flask framework来呈现模板、处理表单数据提交等(参见python-example.py)。

- -
from flask import Flask, render_template, request
-app = Flask(__name__)
-
-@app.route('/', methods=['GET', 'POST'])
-def form():
-    return render_template('form.html')
-
-@app.route('/hello', methods=['GET', 'POST'])
-def hello():
-    return render_template('greeting.html', say=request.form['say'], to=request.form['to'])
-
-if __name__ == "__main__":
-    app.run()
- -

以上代码中引用的两个模板如下：

- - - -
-

注意：同样，如果您只是尝试将其直接加载到浏览器中，那么这段代码将无法工作。Python的工作方式与PHP略有不同——要在本地运行此代码，您需要安装Python/pip，然后使用pip3 install flask安装Flask。此时，您应该能够使用python3 python-example.py来运行这个示例，然后在浏览器中导航到localhost:5000。

-
- -

其他语言和框架

- -

还有许多其他的服务器端技术可以用于表单处理，包括Perl、Java、 .Net、Ruby等。只挑你最喜欢的用就好。话虽如此，但值得注意的是，直接使用这些技术并不常见，因为这可能很棘手。更常见的是使用许多优秀的框架，这些框架使处理表单变得更容易，例如：

- - - -

要注意的是，即使使用这些框架，使用表单也不一定很容易。但这比从头开始编写所有功能要简单得多，而且会节省很多时间。

- -
-

注意：向您介绍任何服务器端语言或框架超出了本文的范围。如果你想要学习这些它们，上面的链接会给你一些帮助。

-
- -

特殊案例:发送文件

- -

用HTML表单发送文件是一个特殊的例子。文件是二进制数据——或者被认为是这样的——而所有其他数据都是文本数据。由于HTTP是一种文本协议，所以处理二进制数据有特殊的要求。

- -

{{htmlattrxref("enctype","form")}} 属性

- -

该属性允许您指定在提交表单时所生成的请求中的Content-Type的HTTP数据头的值。这个数据头非常重要，因为它告诉服务器正在发送什么样的数据。默认情况下，它的值是application/x-www-form-urlencoded。它的意思是：“这是已编码为URL参数的表单数据。”

- -

如果你想要发送文件，你需要额外的三个步骤：

- - - -

例如：

- -
<form method="post" enctype="multipart/form-data">
-  <div>
-    <label for="file">Choose a file</label>
-    <input type="file" id="file" name="myFile">
-  </div>
-  <div>
-    <button>Send the file</button>
-  </div>
-</form>
- -
-

注意：一些浏览器支持{{HTMLElement("input")}}的{{htmlattrxref("multiple","input")}}属性，它允许只用一个 <input> 元素选择一个以上的文件上传。服务器如何处理这些文件取决于服务器上使用的技术。如前所述，使用框架将使您的生活更轻松。

-
- -
-

警告：为了防止滥用，许多服务器配置了文件和HTTP请求的大小限制。在发送文件之前，先检查服务器管理员的权限是很重要的。

-
- -

常见的安全问题

- -

每次向服务器发送数据时，都需要考虑安全性。到目前为止，HTML表单是最常见的攻击路径(可能发生攻击的地方)。这些问题从来都不是来自HTML表单本身，它们来自于服务器如何处理数据。

- -

根据你所做的事情，你会遇到一些非常有名的安全问题：

- -

XSS 和 CSRF

- -

跨站脚本(XSS)和跨站点请求伪造(CSRF)是常见的攻击类型，它们发生在当您将用户发送的数据显示给这个用户或另一个用户时。

- -

XSS允许攻击者将客户端脚本注入到其他用户查看的Web页面中。攻击者可以使用跨站点脚本攻击的漏洞来绕过诸如同源策略之类的访问控制。这些攻击的影响可能从一个小麻烦到一个重大的安全风险。

- -

CSRF攻击类似于XSS攻击，因为它们以相同的方式开始攻击——向Web页面中注入客户端脚本——但它们的目标是不同的。CSRF攻击者试图将权限升级到特权用户(比如站点管理员)的级别，以执行他们不应该执行的操作(例如，将数据发送给一个不受信任的用户)。

- -

XSS攻击利用用户对web站点的信任，而CSRF攻击则利用网站对其用户的信任。

- -

为了防止这些攻击，您应该始终检查用户发送给服务器的数据(如果需要显示)，尽量不要显示用户提供的HTML内容。相反，您应该对用户提供的数据进行处理，这样您就不会逐字地显示它。当今市场上几乎所有的框架都实现了一个最小的过滤器，它可以从任何用户发送的数据中删除HTML{{HTMLElement("script")}}、{{HTMLElement("iframe")}} 和{{HTMLElement("object")}} 元素。这有助于降低风险，但并不一定会消除风险。

- -

SQL注入

- -

SQL 注入是一种试图在目标web站点使用的数据库上执行操作的攻击类型。这通常包括发送一个SQL请求，希望服务器能够执行它（通常发生在应用服务器试图存储由用户发送的数据时）。这实际上是攻击网站的主要途径之一。 

- -

其后果可能是可怕的，从数据丢失到通过使用特权升级控制整个网站基础设施的攻击。这是一个非常严重的威胁，您永远不应该存储用户发送的数据，而不执行一些清理工作(例如，在php/mysql基础设施上使用mysql_real_escape_string()。

- -

HTTP数据头注入和电子邮件注入

- -

这种类型的攻击出现在当您的应用程序基于表单上用户的数据输入构建HTTP头部或电子邮件时。这些不会直接损害您的服务器或影响您的用户，但它们会引发一个更深入的问题，例如会话劫持或网络钓鱼攻击。

- -

这些攻击大多是无声的，并且可以将您的服务器变成僵尸。

- -

偏执:永远不要相信你的用户

- -

那么，你如何应对这些威胁呢?这是一个远远超出本指南的主题，不过有一些规则需要牢记。最重要的原则是:永远不要相信你的用户，包括你自己；即使是一个值得信赖的用户也可能被劫持。

- -

所有到达服务器的数据都必须经过检查和消毒。总是这样。没有例外。

- - - -

如果你遵循这三条规则，你应该避免很多问题，但是如果你想要得到一个有能力的第三方执行的安全检查，这是一个好主意。不要以为你已经看到了所有可能的问题。

- -
-

注意：我们的服务器端学习主题的网站安全性文章更详细地讨论了上述威胁和潜在的解决方案。

-
- -

结论

- -

如您所见，发送表单数据很容易，但要确保应用程序的安全性是很棘手的。请记住，前端开发人员不是应该定义数据安全模型的人。是的，我们将看到，执行客户端数据验证是可能的，但是服务器不能信任这种验证，因为它无法真正知道客户端到底发生了什么。

- -

相关链接

- -

如果您想了解更多关于保护web应用程序的信息，您可以深入了解这些资源：

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}

- -

在本单元中

- - diff --git a/files/zh-cn/learn/html/forms/sending_forms_through_javascript/index.html b/files/zh-cn/learn/html/forms/sending_forms_through_javascript/index.html deleted file mode 100644 index 8489ff2243..0000000000 --- a/files/zh-cn/learn/html/forms/sending_forms_through_javascript/index.html +++ /dev/null @@ -1,439 +0,0 @@ ---- -title: 使用 JavaScript 发送表单 -slug: Learn/HTML/Forms/Sending_forms_through_JavaScript -tags: - - HTML - - HTML表单 - - JavaScript - - Web 表单 - - 示例 - - 表单 - - 高级 -translation_of: Learn/Forms/Sending_forms_through_JavaScript ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms")}}
- -

正如在前面的文章中讲到的，HTML 表单可以声明式地发送一个 HTTP 请求。 但也可以通过 JavaScript 来为表单准备用于发送的 HTTP 请求。 本文探讨如何做到这一点。

- -

表单不总是表单

- -

在开放式Web应用程序中，使用 HTML form 而不是文字表单让人们来填写变得越来越普遍了 — 越来越多的开发人员正致力于控制传输数据。

- -

获得整体界面的控制

- -

标准的 HTML 表单提交会加载数据要发送到的URL，这意味着浏览器窗口以整页加载进行导航。 可以通过隐藏闪烁和网络滞后来避免整页加载以提供更平滑的体验。

- -

许多现代用户界面只使用HTML表单来收集用户的输入。 当用户尝试发送数据时，应用程序将在后台采取控制并且异步地传输数据，只更新UI中需要更改的部分。

- -

异步地发送任何数据被称为 AJAX，它代表 "Asynchronous JavaScript And XML"。

- -

表单提交和 AJAX 请求之间的区别?

- -

AJAX 技术主要依靠 {{domxref("XMLHttpRequest")}} (XHR) DOM 对象。它可以构造 HTTP 请求、发送它们，并获取请求结果。

- -
-

注意: 老旧的 AJAX 技术可能不依赖 {{domxref("XMLHttpRequest")}}。例如 JSONP 加 eval() 函数。这也行得通，但是有严重的安全问题，不推荐使用它。使用它的唯一原因是为了不支持 {{domxref("XMLHttpRequest")}} 或 JSON的过时浏览器；但是那些浏览器实在是太古老了！避免使用这种技术。

-
- -

创建之初, {{domxref("XMLHttpRequest")}} 被设计用来将 XML 作为传输数据的格式获取和发送。不过，如今 JSON 已经取代了 XML，而且要常用的多，无论这是不是一件好事。

- -

但是 XML 和 JSON 都不适合对表单数据请求编码。 表单数据（application/x-www-form-urlencoded）由 URL编码的键/值对列表组成。为了传输二进制数据，HTTP请求被重新整合成multipart/form-data形式。

- -

如果您控制前端（在浏览器中执行的代码）和后端（在服务器上执行的代码），则可以发送JSON / XML并根据需要处理它们。

- -

但是，如果你想使用第三方服务，没有那么简单。 有些服务只接受表单数据。 也有使用表单数据更简单的情况。 如果数据是键/值对，或是原始二进制数据，以现有的后端工具不需要额外的代码就可以处理它。

- -

那么如何发送这样的数据呢？

- -

发送表单数据

- -

一共有三种方式来发送表单数据：包括两种传统的方法和一种利用 {{domxref("XMLHttpRequest/FormData","formData")}}对象的新方法.让我们仔细看一下:

- -

构建 XMLHttpRequest

- -

{{domxref("XMLHttpRequest")}} 是进行 HTTP 请求的最安全和最可靠的方式。 要使用{{domxref("XMLHttpRequest")}}发送表单数据，请通过对其进行URL编码来准备数据，并遵守表单数据请求的具体细节。

- -
-

备注：如果想要了解更多关于 XMLHttpRequest 的知识，你可能会对两篇文章感兴趣:An introductory article to AJAX 和更高级点的using XMLHttpRequest.

-
- -

让我们重建之前的这个例子:

- -
<button type="button" onclick="sendData({test:'ok'})">点击我！</button>
- -

正如你所看到的，HTML实际上没什么改变。 不过，JavaScript变得截然不同了：

- -
function sendData(data) {
-  var XHR = new XMLHttpRequest();
-  var urlEncodedData = "";
-  var urlEncodedDataPairs = [];
-  var name;
-
-  // 将数据对象转换为URL编码的键/值对数组。
-  for(name in data) {
-    urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
-  }
-
-  // 将配对合并为单个字符串，并将所有%编码的空格替换为
-  // “+”字符；匹配浏览器表单提交的行为。
-  urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
-
-  // 定义成功数据提交时发生的情况
-  XHR.addEventListener('load', function(event) {
-    alert('耶! 已发送数据并加载响应。');
-  });
-
-  // 定义错误提示
-  XHR.addEventListener('error', function(event) {
-    alert('哎呀！出问题了。');
-  });
-
-  // 建立我们的请求
-  XHR.open('POST', 'https://example.com/cors.php');
-
-  // 为表单数据POST请求添加所需的HTTP头
-  XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
-  // 最后，发送我们的数据。
-  XHR.send(urlEncodedData);
-}
- -

在线演示：

- -

{{EmbedLiveSample("手动构建XMLHttpRequest", "100%", 50)}}

- -
-

注: 当你想要往第三方网站传输数据时，使用{{domxref("XMLHttpRequest")}}会受到同源策略的影响。如果你需要执行跨域请求,你需要熟悉一下CORS和HTTP访问控制.

-
- -

使用 XMLHttpRequest 和 the FormData object（表单数据对象）

- -

手动建立一个 HTTP 请求非常困难。 幸运的是，最近的 XMLHttpRequest 规范提供了一种方便简单的方法 — 利用{{domxref("XMLHttpRequest/FormData","FormData")}}对象来处理表单数据请求。

- -

{{domxref("XMLHttpRequest/FormData","FormData")}} 对象可以用来构建用于传输的表单数据，或是获取表单元素中的数据来管理它的发送方式。 请注意，{{domxref("XMLHttpRequest/FormData","FormData")}} 对象是“只写”的，这意味着您可以更改它们，但不能检索其内容。

- -

使用这个对象在Using FormData Objects中有详细的介绍，不过这里有两个例子：

- -

使用一个独立的 FormData 对象

- -
<button type="button" onclick="sendData({test:'ok'})">点我！</button>
- -

你应该会觉得那个HTML示例很熟悉。

- -
function sendData(data) {
-  var XHR = new XMLHttpRequest();
-  var FD  = new FormData();
-
-  // 把我们的数据添加到这个FormData对象中
-  for(name in data) {
-    FD.append(name, data[name]);
-  }
-
-  // 定义数据成功发送并返回后执行的操作
-  XHR.addEventListener('load', function(event) {
-    alert('Yeah! 已发送数据并加载响应。');
-  });
-
-  // 定义发生错误时执行的操作
-  XHR.addEventListener('error', function(event) {
-    alert('Oops! 出错了。');
-  });
-
-  // 设置请求地址和方法
-  XHR.open('POST', 'https://example.com/cors.php');
-
-  // 发送这个formData对象,HTTP请求头会自动设置
-  XHR.send(FD);
-}
- -

在线演示：

- -

{{EmbedLiveSample("向FormData对象中手动添加数据", "100%", 50)}}

- -

使用绑定到表单元素上的 FormData

- -

你也可以把一个 FormData 对象绑定到一个 {{HTMLElement("form")}} 元素上。这会创建一个代表表单中包含元素的 FormData 。

- -

这段HTML是典型的情况：

- -
<form id="myForm">
-  <label for="myName">告诉我你的名字：</label>
-  <input id="myName" name="name" value="John">
-  <input type="submit" value="提交">
-</form>
- -

但是 JavaScript 接管了这个表单：

- -
window.addEventListener("load", function () {
-  function sendData() {
-    var XHR = new XMLHttpRequest();
-
-    // 我们把这个 FormData 和表单元素绑定在一起。
-    var FD  = new FormData(form);
-
-    // 我们定义了数据成功发送时会发生的事。
-    XHR.addEventListener("load", function(event) {
-      alert(event.target.responseText);
-    });
-
-    // 我们定义了失败的情形下会发生的事
-    XHR.addEventListener("error", function(event) {
-      alert('哎呀！出了一些问题。');
-    });
-
-    // 我们设置了我们的请求
-    XHR.open("POST", "https://example.com/cors.php");
-
-    // 发送的数据是由用户在表单中提供的
-    XHR.send(FD);
-  }
-
-  // 我们需要获取表单元素
-  var form = document.getElementById("myForm");
-
-  // ...然后接管表单的提交事件
-  form.addEventListener("submit", function (event) {
-    event.preventDefault();
-
-    sendData();
-  });
-});
- -

在线演示：

- -

{{EmbedLiveSample("使用绑定到表单元素上的_FormData", "100%", 50)}}

- -

你甚至可以通过使用表单的{{domxref("HTMLFormElement.elements", "elements")}} 属性来更多的参与此过程，来得到一个包含表单里所有数据元素的列表，并且逐一手动管理他们。想了解更多，请参阅这里的例子：{{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}

- -

在隐藏的iframe中构建DOM

- -

最古老的异步发送表单数据方法是用 DOM API 构建表单，然后将其数据发送到隐藏的 {{HTMLElement("iframe")}}。 要获得提交的结果，请获取{{HTMLElement("iframe")}}的内容。

- -
-

警告：不要使用这项技术。有第三方服务的安全风险，因为它会使你暴露在 脚本注入攻击 中. 如果你使用 HTTPS，它会影响 同源策略, 这可以使 {{HTMLElement("iframe")}} 内容无法访问。然而，该方法可能是你需要支持很古老的浏览器的唯一选择。

-
- -

下面是个简单的例子:

- -
<button onclick="sendData({test:'ok'})">点击我！</button>
- -

所有操作都在下面这段脚本里:

- -
// 首先创建一个用来发送数据的iframe.
-var iframe = document.createElement("iframe");
-iframe.name = "myTarget";
-
-// 然后，将iframe附加到主文档
-window.addEventListener("load", function () {
-  iframe.style.display = "none";
-  document.body.appendChild(iframe);
-});
-
-// 下面这个函数是真正用来发送数据的.
-// 它只有一个参数,一个由键值对填充的对象.
-function sendData(data) {
-  var name,
-      form = document.createElement("form"),
-      node = document.createElement("input");
-
-  // 定义响应时发生的事件
-  iframe.addEventListener("load", function () {
-    alert("Yeah! Data sent.");
-  });
-
-  form.action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi";
-  form.target = iframe.name;
-
-  for(name in data) {
-    node.name  = name;
-    node.value = data[name].toString();
-    form.appendChild(node.cloneNode());
-  }
-
-  // 表单元素需要附加到主文档中，才可以被发送。
-  form.style.display = "none";
-  document.body.appendChild(form);
-
-  form.submit();
-
-  // 表单提交后，就可以删除这个表单，不影响下次的数据发送。
-  document.body.removeChild(form);
-}
- -

在线演示：

- -

{{EmbedLiveSample("在DOM中构建一个隐藏的iframe", "100%", 50)}}

- -

处理二进制数据

- -

如果你使用一个含有 <input type="file"> 组件的表格的 {{domxref("XMLHttpRequest/FormData","FormData")}} 对象，传给代码的数据会被自动处理。但是要手动发送二进制数据的话，还有额外的工作要做。

- -

在现代网络上，二进制数据有很多来源：例如{{domxref("FileReader")}} API、{{domxref("HTMLCanvasElement","Canvas")}} API、WebRTC API，等等。不幸的是，一些过时的浏览器无法访问二进制数据，或是需要非常复杂的工作环境。这些遗留问题已经超出了本文的涵盖范围。如果你想了解更多关于 FileReader API的知识，参阅：如何在web应用程序中使用文件。

- -

在 {{domxref("XMLHttpRequest/FormData","formData")}} 的帮助下，发送二进制数据非常简单，使用 append() 方法就可以了。如果你必须手动进行，那确实会有一些棘手。

- -

在下面的例子中，我们使用了{{domxref("FileReader")}} API来访问二进制数据，然后手动构建多重表单数据请求：

- -
<form id="myForm">
-  <p>
-    <label for="i1">文本数据：</label>
-    <input id="i1" name="myText" value="一些文本数据">
-  </p>
-  <p>
-    <label for="i2">文件数据：</label>
-    <input id="i2" name="myFile" type="file">
-  </p>
-  <button>提交！</button>
-</form>
- -

如你所见，这个 HTML 只是一个标准的 <form>。没有什么神奇的事情发生。“魔法”都在 JavaScript 里：

- -
// 因为我们想获取 DOM 节点,
-// 我们在页面加载时初始化我们的脚本.
-window.addEventListener('load', function () {
-
-  // 这些变量用于存储表单数据
-  var text = document.getElementById("i1");
-  var file = {
-        dom    : document.getElementById("i2"),
-        binary : null
-      };
-
-  // 使用 FileReader API 获取文件内容
-  var reader = new FileReader();
-
-  // 因为 FileReader 是异步的, 会在完成读取文件时存储结果
-  reader.addEventListener("load", function () {
-    file.binary = reader.result;
-  });
-
-  // 页面加载时, 如果一个文件已经被选择, 那么读取该文件.
-  if(file.dom.files[0]) {
-    reader.readAsBinaryString(file.dom.files[0]);
-  }
-
-  // 如果没有被选择，一旦用户选择了它，就读取文件。
-  file.dom.addEventListener("change", function () {
-    if(reader.readyState === FileReader.LOADING) {
-      reader.abort();
-    }
-
-    reader.readAsBinaryString(file.dom.files[0]);
-  });
-
-  // 发送数据是我们需要的主要功能
-  function sendData() {
-    // 如果存在被选择的文件，等待它读取完成
-    // 如果没有, 延迟函数的执行
-    if(!file.binary && file.dom.files.length > 0) {
-      setTimeout(sendData, 10);
-      return;
-    }
-
-    // 要构建我们的多重表单数据请求,
-    // 我们需要一个XMLHttpRequest 实例
-    var XHR = new XMLHttpRequest();
-
-    // 我们需要一个分隔符来定义请求的每一部分。
-    var boundary = "blob";
-
-    // 将我们的主体请求存储于一个字符串中
-    var data = "";
-
-    // 所以，如果用户已经选择了一个文件
-    if (file.dom.files[0]) {
-      // 在请求体中开始新的一部分
-      data += "--" + boundary + "\r\n";
-
-      // 把它描述成表单数据
-      data += 'content-disposition: form-data; '
-      // 定义表单数据的名称
-            + 'name="'         + file.dom.name          + '"; '
-      // 提供文件的真实名字
-            + 'filename="'     + file.dom.files[0].name + '"\r\n';
-      // 和文件的MIME类型
-      data += 'Content-Type: ' + file.dom.files[0].type + '\r\n';
-
-      // 元数据和数据之间有一条空行。
-      data += '\r\n';
-
-      // 将二进制数据添加到主体请求中
-      data += file.binary + '\r\n';
-    }
-
-    // 文本数据更简单一些
-    // 在主体请求中开始一个新的部分
-    data += "--" + boundary + "\r\n";
-
-    // 声明它是表单数据，并命名它
-    data += 'content-disposition: form-data; name="' + text.name + '"\r\n';
-    // 元数据和数据之间有一条空行。
-    data += '\r\n';
-
-    // 添加文本数据到主体请求中
-    data += text.value + "\r\n";
-
-    // 一旦完成，“关闭”主体请求
-    data += "--" + boundary + "--";
-
-    // 定义成功提交数据执行的语句
-    XHR.addEventListener('load', function(event) {
-      alert('✌！数据已发送且响应已加载。');
-    });
-
-    // 定义发生错误时做的事
-    XHR.addEventListener('error', function(event) {
-      alert('哎呀！出现了一些问题。');
-    });
-
-    // 建立请求
-    XHR.open('POST', 'https://example.com/cors.php');
-
-    // 添加需要的HTTP头部来处理多重表单数据POST请求
-    XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary);
-
-    // 最后，发送数据。
-    XHR.send(data);
-  }
-
-  // 访问表单…
-  var form = document.getElementById("myForm");
-
-  // …接管提交事件
-  form.addEventListener('submit', function (event) {
-    event.preventDefault();
-    sendData();
-  });
-});
- -

在线演示：

- -

{{EmbedLiveSample("发送二进制数据", "100%", 150)}}

- -

总结

- -

取决于不同的浏览器，通过 JavaScript 发送数据可能会很简单，也可能会很困难。{{domxref("XMLHttpRequest/FormData","FormData")}} 对象是通用的答案, 所以请毫不犹豫的在旧浏览器上通过polyfill使用它:

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms")}}

- -

In this module

- - diff --git a/files/zh-cn/learn/html/forms/styling_html_forms/index.html b/files/zh-cn/learn/html/forms/styling_html_forms/index.html deleted file mode 100644 index 26b94e94e8..0000000000 --- a/files/zh-cn/learn/html/forms/styling_html_forms/index.html +++ /dev/null @@ -1,388 +0,0 @@ ---- -title: 样式化 HTML 表单 -slug: Learn/HTML/Forms/Styling_HTML_forms -tags: - - CSS - - Web - - 例子 - - 指导 - - 样式 - - 表单 -translation_of: Learn/Forms/Styling_web_forms ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}

- -

在这篇文章中，用户将学习如何使用HTML表单和CSS以使页面更加美观。令人惊讶的是，这可能有点棘手。由于历史和技术的原因，表单部件不能很好地与CSS配合工作。 由于这些困难，许多开发人员选择构建自己的HTML小部件以获得更好的控制和视觉观感。 然而，在现代浏览器中，web设计者越来越多地控制表单元素的设计。让我们深入研究。

- -

为什么使用CSS美化表单组件这么困难？

- -

在1995年左右的Web早期，表单组件(或控件)在 HTML 2规范中被添加到HTML。由于表单组件的复杂性，实现者选择依靠底层操作系统来管理和渲染它们。

- -

若干年后，CSS被创建出来了，那么技术上的必要性，就是使用原生组件来实现表单控制，这是因为风格的要求。在CSS的早期，表单样式控制不是优先事项。

- -

由于用户习惯于各自平台的视觉外观，浏览器厂商不愿意对表单控件样式进行调整;到目前为止，要重建所有控件以使它们可美化仍然是非常困难的。

- -

即使在今天，仍然没有一个浏览器完全实现了CSS 2.1。然而，随着时间的推移，浏览器厂商已经改进了对表单元素的CSS支持，尽管可用性的声誉不好，但现在已经可以使用CSS来设计HTML表单。

- -

涉及到CSS，并非所有组件都是平等的

- -

目前，在使用表单时使用CSS仍然有一些困难。这些问题可以分为三类： 

- -

好的

- -

有些元素在跨平台上时很少出现问题。包括以下结构元素：

- -
    -
  1. {{HTMLElement("form")}}
    2. -
  2. {{HTMLElement("fieldset")}}
    3. -
  3. {{HTMLElement("label")}}
    4. -
  4. {{HTMLElement("output")}}
    5. -
- -

这还包括所有文本字段小部件（单行和多行）和按钮。

- -

不好的

- -

一些元素难以被美化，并且可能需要一些复杂的技巧，偶尔需要高级的CSS3知识。

- -

这些包括{{HTMLElement("legend")}}元素，但不能在所有平台上正确定位。 Checkbox和radio按钮也不能直接应用样式，但是，感谢CSS3，你可以解决这个问题。{{htmlattrxref("placeholder", "input")}} 的内容不能以任何标准方式应用样式，但是实现它的所有浏览器也都实现了私有的CSS伪元素或伪类，让你可以对其定义样式。

- -

我们会在如何构建自定义表单挂件一文中讲述如何处理更多特定的问题。

- -

丑陋的

- -

有些元素根本不能用应用CSS样式。 这些包括：所有高级用户界面小部件，如范围，颜色或日期控件; 和所有下拉小部件，包括{{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}}和{{HTMLElement("datalist")}} 元素。 文件选择器小部件也被称为不可样式化。 新的{{HTMLElement("progress")}}和{{HTMLElement("meter")}} 元素也属于这个类别。

- -

所有这些小部件的主要问题来自于它们具有非常复杂的结构，而CSS目前还不足以表达这些小部件的所有细微部分。 如果你想定制这些小部件，你必须依靠JavaScript来构建一个你能够应用样式的DOM树。我们会在 How to build custom form widgets一文中探索如何实现这一点。

- -

基本样式美化

- -

为了使用CSS美化容易被美化的元素，你并不会碰到任何困难，因为它们的大部分行为同其他HTML元素差不多。但是，每个浏览器的用户代理样式表可能会有点不一致，所以有一些技巧可以帮助您更轻松地设计它们。

- -

Search字段

- -

搜索框是唯一一种应用CSS样式有点棘手的文本字段。 在基于WebKit的浏览器（Chrome，Safari等）上，您必须使用-webkit-appearance专有属性来调整它。 我们在文章中进一步讨论这个属性：HTML表单的高级样式。

- -

Example

- -
<form>
-  <input type="search">
-</form>
-
- -
input[type=search] {
-  border: 1px dotted #999;
-  border-radius: 0;
-
-  -webkit-appearance: none;
-}
- -

This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance

- -

截图中是 Chrome 浏览器中的两个搜索框，在我们的例子中，两个搜索框均被设置为有边框。第一个没有使用-webkit-appearance渲染，而第二个使用了 -webkit-appearance:none. 两者的不同显而易见。

- -

字体和文本

- -

CSS font和text功能能被很容易的应用到任何组件上（当然你可以在form组件上使用{{cssxref("@font-face")}} ）。然而，浏览器的行为经常不一致。默认情况下，一些组件不会从它们的父元素继承 {{cssxref("font-family")}}和 {{cssxref("font-size")}} 。相反，许多浏览器使用系统默认的字体和文本。为了让form表单的外观和其他内容保持一致，你可以在你的样式表中增加以下内容:

- -
button, input, select, textarea {
-  font-family : inherit;
-  font-size   : 100%;
-}
- -

下面的截图显示了不同之处; 左边是Mac OS X上Firefox中元素的默认渲染，其中使用了平台的默认字体样式。 在右边是相同的元素，应用了我们的字体统一样式规则。

- -

This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization

- -

关于使用系统默认样式的表单还是使用设计用于匹配内容的自定义样式表单，有很多争议。 作为网站或Web应用程序的设计者，您可以自己做出决定。

- -

盒子模型

- -

所有文本字段都完全支持与CSS盒模型相关的每个属性({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, 和 {{cssxref("border")}})。 但是，像以前一样，浏览器在显示这些小部件时依赖于系统默认的样式。 您需要定义如何将其融入到您的内容中。 如果你既想保持小部件的原生外观和感觉，又想给他们一个一致的尺寸，那么你会遇到一些困难(如果你想保持组件的原生观感，又想给它们一致的大小，你会面临一些困难)。

- -

这是因为每个小部件都有自己的边框，填充和边距的规则。 所以如果你想给几个不同的小部件相同的大小，你必须使用{{cssxref("box-sizing")}} 属性：

- -
input, textarea, select, button {
-  width : 150px;
-  margin: 0;
-
-  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
-     -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
-          box-sizing: border-box;
-}
- -

This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing.

- -

在上面的屏幕截图中，左侧的列没有{{cssxref("box-sizing")}}，而右侧的列使用了这个属性和border-box。 请注意我们是怎样确保所有元素都占用相同的空间量，尽管平台对每种窗口小部件都有默认规则。

- -

定位（Positioning）

- -

HTML表单部件的定位通常不是问题; 但是，您应该特别注意两点：

- -

legend

- -

{{HTMLElement("legend")}}元素易于应用CSS，除了定位。在所有浏览器中， {{HTMLElement("legend")}} 元素定位是其 {{HTMLElement("fieldset")}} 父元素的上边框的最顶端。在HTML流中无法改变它的绝对位置，无法让其远离顶部边框。然而，你可以使用 {{cssxref("position")}} 属性将其位置设置为绝对或相对。除此之外，它近几年是fieldset边框的一部分。

- -

由于{{HTMLElement("legend")}}元素对可访问性非常重要，因为它能被无障碍技术作为每个fieldset中的表单元素的标签读出来，它通常与标题配对，并且在无障碍中被隐藏 。例如:

- -
HTML
- -
<fieldset>
-  <legend>Hi!</legend>
-  <h1>Hello</h1>
-</fieldset>
- -
CSS
- -
legend {
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
- -

textarea

- -

默认情况下，所有浏览器都认为{{HTMLElement("textarea")}} 元素是inline block，与文本底线对齐。 这很少是我们真正想看到的。 要将内联(inline-block)块更改为块(block)，使用{{cssxref("display")}}属性非常简单。 但是如果你想以inline方式使用它，通常改变垂直对齐方式：

- -
textarea {
-  vertical-align: top;
-}
- -

示例

- -

让我们来看一个样式化 HTML 表单的实际的案例。这有助于理清这里面的许多概念。我们将构建下面的"明信片" 联系人表单：

- -

This is what we want to achieve with HTML and CSS

- -

如果你想继续关注这个例子，复制我们的 postcard-start.html 文件，并遵循接下来的指导操作。

- -

The HTML

- -

HTML 只比我们在 the first article of this guide 中涉及到的多一些；它只有一些额外的 id 和 title。

- -
<form>
-  <h1>to: Mozilla</h1>
-
-  <div id="from">
-    <label for="name">from:</label>
-    <input type="text" id="name" name="user_name">
-  </div>
-
-  <div id="reply">
-    <label for="mail">reply:</label>
-    <input type="email" id="mail" name="user_email">
-  </div>
-
-  <div id="message">
-    <label for="msg">Your message:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </div>
-
-  <div class="button">
-    <button type="submit">Send your message</button>
-  </div>
-</form>
- -

将上面的代码添加到你 HTML 的 body 中。

- -

组织你的静态文件

- -

好戏要开始了! 在开始写代码之前，我们需要三个额外的静态文件：

- -
    -
  1. 明信片的背景——下载这幅图片，把它和你的 HTML 文件保存在相同目录下。
    2. -
  2. 打字机字体：源自 fontsquirrel.com 的 "Secret Typewriter“ 字体——将TTF文件下载到和上面相同的文件夹里。
    3. -
  3. 手绘字体：源自 fontsquirrel.com 的 The "Journal" 字体  —— 将TTF文件下载到和上面相同的文件夹里。
    4. -
- -

在你开始之前需要对字体做一些处理：

- -
    -
  1. 打开 fontsquirrel 网络字体生成器.
    2. -
  2. 使用表单，上传你的字体文件并生成一个网络字体包，将这个包下载到你的电脑上。
    3. -
  3. 解压提供的 zip 文件。
    4. -
  4. 再解压后的文件内容里你会找到两个  .woff 文件和两个.woff2 文件。将这四个文件拷贝到一个叫 fonts 的文件夹里，而fonts 文件夹位于和上面相同的文件夹里。我们为每种字体使用两个不同的文件以最大限度地保证浏览器兼容性。查看我们的 Web 字体 一文获取更多信息。
    5. -
- -

CSS

- -

现在我们可以深入探究本例的 CSS 了。将下面所有的代码块一个接一个地加到{{htmlelement("style")}} 元素里。

- -

首先，我们要准备一些基础。这需要定义 {{cssxref("@font-face")}} 规则，以及所有的 {{HTMLElement("body")}} 元素和 {{HTMLElement("form")}} 元素基本规则：

- -
@font-face {
-    font-family: 'handwriting';
-    src: url('fonts/journal-webfont.woff2') format('woff2'),
-         url('fonts/journal-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'typewriter';
-    src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
-         url('fonts/veteran_typewriter-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-body {
-  font  : 21px sans-serif;
-
-  padding : 2em;
-  margin  : 0;
-
-  background : #222;
-}
-
-form {
-  position: relative;
-
-  width  : 740px;
-  height : 498px;
-  margin : 0 auto;
-
-  background: #FFF url(background.jpg);
-}
- -

现在我们可以定位我们的元素，包括标题和其他表单元素：

- -
h1 {
-  position : absolute;
-  left : 415px;
-  top  : 185px;
-
-  font : 1em "typewriter", sans-serif;
-}
-
-#from {
-  position: absolute;
-  left : 398px;
-  top  : 235px;
-}
-
-#reply {
-  position: absolute;
-  left : 390px;
-  top  : 285px;
-}
-
-#message {
-  position: absolute;
-  left : 20px;
-  top  : 70px;
-}
- -

现在我们开始处理表单元素本身。首先，让我们确保 {{HTMLElement("label")}} 被赋予了正确的字体：

- -
label {
-  font : .8em "typewriter", sans-serif;
-}
- -

文本域需要一些通用的规则，我们只需简单的移除 {{cssxref("border","borders")}} 和 {{cssxref("background","backgrounds")}}, 并重新定义其{{cssxref("padding")}} 和 {{cssxref("margin")}}：

- -
input, textarea {
-  font    : .9em/1.5em "handwriting", sans-serif;
-
-  border  : none;
-  padding : 0 10px;
-  margin  : 0;
-  width   : 240px;
-
-  background: none;
-}
- -

当其中的一个域获得焦点后，我们用浅灰色、半透明的背景高亮它们，注意添加{{cssxref("outline")}} 属性非常重要，这样可以移除由某些浏览器添加的默认高亮效果：

- -
input:focus, textarea:focus {
-  background   : rgba(0,0,0,.1);
-  border-radius: 5px;
-  outline      : none;
-}
- -

现在我们的文本域已经完成了，我们需要调整单行和多行文本域的显示，使其能够匹配，因为通常情况下它们不会以默认的设置而具有一样的外观。

- -

单行文本需要一些调整才能在 Internet Explorer 中渲染良好。Internet Explorer 没有基于字体的自然高度来定义文本域的高度（而这是所有其他浏览器都有的行为）。为了修正这个问题，我们需要给域添加一个确定的高度，像下面这样：

- -
input {
-    height: 2.5em; /* for IE */
-    vertical-align: middle; /* This is optional but it makes legacy IEs look better */
-}
- -

{{HTMLElement("textarea")}} 元素默认地被渲染成一个块级元素。这里有重要地两点是 {{cssxref("resize")}} 和 {{cssxref("overflow")}} 属性。因为我们的设计是一个固定大小的设计，所以我们会使用 resize 属性来防止用户调整我们的多行文本域的大小。{{cssxref("overflow")}} 属性是用来让域在不同的浏览器上渲染得更一致。一些浏览器默认值为 auto，而一些将默认值设为 scroll。在我们得例子中，最好确定每个浏览器都使用 auto：

- -
textarea {
-  display : block;
-
-  padding : 10px;
-  margin  : 10px 0 0 -10px;
-  width   : 340px;
-  height  : 360px;
-
-  resize  : none;
-  overflow: auto;
-}
- -

{{HTMLElement("button")}} 元素上使用 CSS 非常方便；你可以做你任何想做得事情，甚至包括使用 伪元素：

- -
button {
-  position     : absolute;
-  left         : 440px;
-  top          : 360px;
-
-  padding      : 5px;
-
-  font         : bold .6em sans-serif;
-  border       : 2px solid #333;
-  border-radius: 5px;
-  background   : none;
-
-  cursor       : pointer;
-
--webkit-transform: rotate(-1.5deg);
-   -moz-transform: rotate(-1.5deg);
-    -ms-transform: rotate(-1.5deg);
-     -o-transform: rotate(-1.5deg);
-        transform: rotate(-1.5deg);
-}
-
-button:after {
-  content: " >>>";
-}
-
-button:hover,
-button:focus {
-  outline   : none;
-  background: #000;
-  color   : #FFF;
-}
- -

瞧！

- -
-

注意：如果你的例子没有像你预期的那样工作，你想将它同我们的版本检查对比，你可以在Github 上找到它 —— 查看 在线演示 (也可以查看源代码)。

-
- -

总结

- -

如你所见，若我们想构建只包含文本域和按钮的表单，用 CSS 美化它们非常容易。如果你想要知道更多能够让你的处理表单组件时更轻松的 CSS 小技巧，看一看 normalize.css 项目的表单部分。

- -

下一篇文章中，我们将会看到如何处理落入"不好的" 和"丑陋的" 分类的表单组件。

- -

{{PreviousMenuNext("Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}

- -

在本单元中

- - diff --git a/files/zh-cn/learn/html/forms/the_native_form_widgets/index.html b/files/zh-cn/learn/html/forms/the_native_form_widgets/index.html deleted file mode 100644 index 8ef67a2f7a..0000000000 --- a/files/zh-cn/learn/html/forms/the_native_form_widgets/index.html +++ /dev/null @@ -1,683 +0,0 @@ ---- -title: 原生表单部件 -slug: Learn/HTML/Forms/The_native_form_widgets -translation_of: Learn/Forms/Basic_native_form_controls ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
- -

现在，我们将详细研究不同表单部件的功能，查看了哪些选项可用于收集不同类型的数据。这个指南有些详尽，涵盖了所有可用的原生表单小部件。

- - - - - - - - - - - - -
预备知识:计算机基础知识和对于HTML的基本理解。
目标:要了解在浏览器中可以使用什么类型的原生表单小部件来收集数据，以及如何使用HTML实现它们。
- -

这里我们将关注浏览器内置的表单部件，但是因为HTML表单仍然相当有限并且实现的特性在不同的浏览器中可能是相当不同的，web开发人员有时会建立自己的表单部件——关于这个的更多想法，参见本模块后面的如何构建自定义表单部件。

- -
-

译者注：widget在本页面中被统一翻译为部件，但在其他地方可能也被译为组件。

-
- -
-

注意：本文中讨论的大多数特性都在浏览器中得到了广泛的支持;我们会注意到例外的情况。如果您想要更准确的细节，您应该参考我们的HTML表单元素参考，特别是我们的广泛的 <input>类型参考。

-
- -

通用属性

- -

大部分用来定义表单小部件的元素都有一些他们自己的属性。然而，在所有表单元素中都有一组通用属性，它们可以对这些小部件进行控制。下面是这些通用属性的列表:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
属性名称默认值描述
autofocus(false)这个布尔属性允许您指定当页面加载时元素应该自动具有输入焦点，除非用户覆盖它，例如通过键入不同的控件。文档中只有一个与表单相关的元素可以指定这个属性。
disabled(false) -

这个布尔属性表示用户不能与元素交互。如果没有指定这个属性，元素将从包含它的元素继承设置，例如{{HTMLElement("fieldset")}};如果没有包含在设定了disabled属性的元素里，那么这个元素就是可用的。

-
form -

小部件与之相关联的表单元素。属性值必需是同个文档中的{{HTMLElement("form")}} 元素的 id属性。理论上，它允许您在{{HTMLElement("form")}}元素之外设置一个表单小部件。然而，在实践中，没有任何支持该特性的浏览器。

-
name元素的名称;这是跟表单数据一起提交的。
value元素的初始值。
- -

文本输入框

- -

文本输入框 {{htmlelement("input")}} 是最基本的表单小部件。 这是一种非常方便的方式，可以让用户输入任何类型的数据。但是，一些文本字段可以专门用于满足特定的需求。我们已经看到了几个简单的例子。

- -
-

注意: HTML表单文本字段是简单的纯文本输入控件。 这意味着您不能使用它们执行富文本编辑(粗体、斜体等)。你遇到的所有富文本编辑器（rich text editors）都是使用HTML、CSS和JavaScript所创建的自定义小部件。

-
- -

所有文本框都有一些通用规范：

- - - -
-

注意：  {{htmlelement("input")}}元素是如此特别因为它几乎可以是任何东西。通过简单设置 type 属性，它可以彻底的改变，它用于创建大多数类型的表单小部件，包括单行文本字段、没有文本输入的控件、时间和日期控件和按钮。 然而，也有一些例外，比如用来多行输入的 {{htmlelement("textarea")}}。阅读这篇文章时，要注意这些。

-
- -

单行文本框

- -

使用{{htmlattrxref("type","input")}}属性值被设置为text 的{{HTMLElement("input")}}元素创建一个单行文本框（同样的，如果你不提供{{htmlattrxref("type","input")}}属性，text 是默认值）。在你指定的{{htmlattrxref("type","input")}}属性的值在浏览器中是未知的情况下（比如你指定 type="date"，但是浏览器不支持原生日期选择器），属性值text也是备用值。

- -
-

注意： 你可以在Github上的 single-line-text-fields.html找到所有单行文本框类型。(你也可以直接看预览版)。

-
- -

这是一个基本的单行文本框示例：

- -
<input type="text" id="comment" name="comment" value="I'm a text field">
- -

单行文本框只有一个真正的约束：如果您输入带有换行符的文本，浏览器会在发送数据之前删除这些换行符。

- -

Screenshots of single line text fields on several platforms.

- -

HTML5通过为{{htmlattrxref("type","input")}}属性增加特殊值增强了基本单行文本框。这些值仍然将{{HTMLElement("input")}}元素转换为单行文本框，但它们为字段添加了一些额外的约束和特性。

- -

E-mail 地址框

- -

该类型的框将 {{htmlattrxref("type","input")}}属性设置为  email 值：

- -
<input type="email" id="email" name="email" multiple>
- -

当使用 type时， 用户需要在框中输入有效的电子邮件地址；任何其他内容都会导致浏览器在提交表单时显示错误。注意，这是客户端错误验证，由浏览器执行：

- -

An invalid email input showing the message Please enter an email address.

- -

通过包括{{htmlattrxref("multiple","input")}}属性，它还可以让用户将多个电子邮件地址输入相同的输入(以逗号分隔)。

- -

在一些设备上(特别是在移动设备上)，可能会出现一个不同的虚拟键盘，更适合输入电子邮件地址。

- -
-

注意: 您可以在表单数据验证文中找到关于表单验证的更多信息。

-
- -

密码框

- -

通过设置{{htmlattrxref("type","input")}} 属性值为password来设置该类型框：

- -
<input type="password" id="pwd" name="pwd">
- -

它不会为输入的文本添加任何特殊的约束，但是它会模糊输入到字段中的值(例如，用点或小行星)，这样它就不能被其他人读取。

- -

请记住，这只是一个用户界面特性;除非你安全地提交你的表单，否则它会以明文发送，这不利于安全——恶意的一方可能会截获你的数据，窃取你的密码、信用卡信息，或者你提交的其他任何东西。保护用户不受此影响的最佳方式是在安全连接上托管任何涉及表单的页面(例如:https://……地址)，使得数据在发送之前就已加密。

- -

现代浏览器认识到在不安全的连接上发送表单数据所带来的安全影响，并且已经实现了警告，以阻止用户使用不安全的表单。有关Firefox实现的更多信息，请参见不安全的密码。

- -

搜索框

- -

通过设置 {{htmlattrxref("type","input")}}属性值为 search 来设置该类型框：

- -
<input type="search" id="search" name="search">
- -

文本框和搜索框之间的主要区别是浏览器的样式——通常，搜索框是渲染成圆角的，并且/可能给定一个“x”来清除输入的值。然而，还有另外一个值得注意的特性:它们的值可以被自动保存用来在同一站点上的多个页面上自动补全。

- -

Screenshots of search fields on several platforms.

- -

电话号码栏：

- -

通过 {{htmlattrxref("type","input")}}属性的 tel 值设置该类型框：

- -
<input type="tel" id="tel" name="tel">
- -

由于世界范围内各种各样的电话号码格式，这种类型的字段不会对用户输入的值执行任何限制(包括字母，等等)。这主要是在语义上的区分，尽管在一些设备上(特别是在移动设备上)，可能会出现一个不同的虚拟键盘，更适合输入电话号码。

- -

URL 栏

- -

通过{{htmlattrxref("type","input")}}属性的url 值设置该类型框：

- -
<input type="url" id="url" name="url">
- -

它为字段添加了特殊的验证约束，如果输入无效的url，浏览器就会报告错误。

- -
注意：URL格式良好并不一定意味着它引用了一个实际存在的位置。
- -
-

注意：有特殊约束并出错了的输入框可以防止表单被发送；此外，还可以将它们设置为使错误更清晰。我们将在数据表单验证中详细讨论这个问题。

-
- -

多行文本框

- -

多行文本框专指使用 {{HTMLElement("textarea")}}元素，而不是使用{{HTMLElement("input")}} 元素。

- -
<textarea cols="30" rows="10"></textarea>
- -

textarea和常规的单行文本字段之间的主要区别是，允许用户输入包含硬换行符(即按回车)的文本。

- -

Screenshots of multi-lines text fields on several platforms.

- -
-

注意：你可以在Github上的multi-line-text-field.html看到本例（你也可以看预览版）。注意到在大多数浏览器中，文本区域在右下角有一个拖放操作，允许用户调整它的大小。这种调整能力可以通过使用CSS设置文本区域的{{cssxref("resize")}}性质为 none 来关闭。

-
- -

{{htmlelement("textarea")}} 还接受了一些额外的属性，以控制它在几行代码中呈现的效果 (除此以外还有其他几个)：

- -

{{HTMLElement("textarea")}} 元素属性

- - - - - - - - - - - - - - - - - - - - - - - - - - -
属性名默认值描述
{{htmlattrxref("cols","textarea")}}20文本控件的可见宽度，平均字符宽度。
{{htmlattrxref("rows","textarea")}}控制的可见文本行数。
{{htmlattrxref("wrap","textarea")}}soft表示控件是如何包装文本的。可能的值：hard 或 soft
- -

注意，{{HTMLElement("textarea")}}元素与{{HTMLElement("input")}}元素的编写略有不同。{{HTMLElement("input")}}元素是一个空元素，这意味着它不能包含任何子元素。另一方面，{{HTMLElement("textarea")}}元素是一个常规元素，可以包含文本内容的子元素。

- -

这里有两个关键点需要注意：

- - - -

下拉内容

- -

下拉窗口小部件是一种简单的方法，可以让用户选择众多选项中的一个，而不需要占用用户界面的太多空间。HTML有两种类型的下拉内容:select box和autocomplete box。在这两种情况下，交互都是相同的——一旦控件被激活，浏览器就会显示用户可以选择的值列表。

- -
-

注意：你可以在Github上的drop-down-content.html看到本例（你也可以看预览版）。

-
- -

选择框

- -

一个选择框是用{{HTMLElement("select")}}元素创建的，其中有一个或多个{{HTMLElement("option")}}元素作为子元素，每个元素都指定了其中一个可能的值。

- -
<select id="simple" name="simple">
-  <option>Banana</option>
-  <option>Cherry</option>
-  <option>Lemon</option>
-</select>
- -

如果需要，可以使用{{htmlattrxref("selected","option")}}属性在所需的{{HTMLElement("option")}}元素上设置选择框的默认值---在页面加载时会默认选择该选项。{{HTMLElement("option")}}元素也可以嵌套在{{HTMLElement("optgroup")}}元素中，以创建视觉关联的组值：

- -
<select id="groups" name="groups">
-  <optgroup label="fruits">
-    <option>Banana</option>
-    <option selected>Cherry</option>
-    <option>Lemon</option>
-  </optgroup>
-  <optgroup label="vegetables">
-    <option>Carrot</option>
-    <option>Eggplant</option>
-    <option>Potato</option>
-  </optgroup>
-</select>
- -

Screenshots of single line select box on several platforms.

- -

如果一个{{HTMLElement("option")}}元素设置了value属性，那么当提交表单时该属性的值就会被发送。如果忽略了value属性，则使用{{HTMLElement("option")}}元素的内容作为选择框的值。

- -

在{{HTMLElement("optgroup")}}元素中，label属性显示在值之前，但即使它看起来有点像一个选项，它也不是可选的。

- -

多选选择框

- -

默认情况下，选择框只允许用户选择一个值。通过将{{htmlattrxref("multiple","select")}}属性添加到{{HTMLElement("select")}}元素，您可以允许用户通过操作系统提供的默认机制来选择几个值。 (如， 同时按下 Cmd/Ctrl 并点击多个值).

- -

注意：在多个选项选择框的情况下，选择框不再显示值为下拉内容——相反，它们都显示在一个列表中。

- -
<select multiple id="multi" name="multi">
-  <option>Banana</option>
-  <option>Cherry</option>
-  <option>Lemon</option>
-</select>
- -

Screenshots of multi-lines select box on several platforms.

- -
注意：所有支持 {{HTMLElement("select")}} 元素的浏览器也支持 {{htmlattrxref("multiple","select")}} 。
- -

自动补全输入框

- -

您可以使用{{HTMLElement("datalist")}}元素来为表单小部件提供建议的、自动完成的值，并使用一些{{HTMLElement("option")}}子元素来指定要显示的值。

- -

然后使用{{htmlattrxref("list","input")}}属性将数据列表绑定到一个文本框(通常是一个 <input> 元素)。

- -

一旦数据列表与表单小部件相关联，它的选项用于自动完成用户输入的文本;通常，这是作为一个下拉框提供给用户的，匹配在输入框中输入了的内容。

- -
<label for="myFruit">What's your favorite fruit?</label>
-<input type="text" name="myFruit" id="myFruit" list="mySuggestion">
-<datalist id="mySuggestion">
-  <option>Apple</option>
-  <option>Banana</option>
-  <option>Blackberry</option>
-  <option>Blueberry</option>
-  <option>Lemon</option>
-  <option>Lychee</option>
-  <option>Peach</option>
-  <option>Pear</option>
-</datalist>
- -
注意： 根据HTML规范，{{htmlattrxref("list","input")}} 属性和{{HTMLElement("datalist")}}元素元素可以用于任何需要用户输入的小部件。但是，除了文本控件外(例如颜色或日期)，还不清楚它会如何工作，不同的浏览器在不同的情况下会有不同的表现。正因为如此，除了文本字段以外，要小心使用这个特性。
- -
Screenshots of datalist on several platforms.
- -
- -

数据列表支持和后备

- -

{{HTMLElement("datalist")}}元素是HTML表单的最新补充，因此浏览器的支持比我们之前看到的要少一些。最值得注意的是，它在版本小于10的IE中不受支持，同时在版本小于12的Safari中不受支持。

- -

为了处理这个问题，这里有一个小技巧，可以为这些浏览器提供一个不错的备用：

- -
<label for="myFruit">What is your favorite fruit? (With fallback)</label>
-<input type="text" id="myFruit" name="fruit" list="fruitList">
-
-<datalist id="fruitList">
-  <label for="suggestion">or pick a fruit</label>
-  <select id="suggestion" name="altFruit">
-    <option>Apple</option>
-    <option>Banana</option>
-    <option>Blackberry</option>
-    <option>Blueberry</option>
-    <option>Lemon</option>
-    <option>Lychee</option>
-    <option>Peach</option>
-    <option>Pear</option>
-  </select>
-</datalist>
-
- -

支持{{HTMLElement("datalist")}}元素的浏览器将忽略所有不是{{HTMLElement("option")}}元素的元素，并按照预期工作。另一方面，不支持{{HTMLElement("datalist")}}元素的浏览器将显示标签和选择框。当然，还有其他方法可以处理对{{HTMLElement("datalist")}}元素支持的不足，但这是最简单的(其他方法往往需要JavaScript)。

- - - - - - - - - - - - -
Safari 6Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18Screenshot of the datalist element with Firefox on Mac OS
- -

可选中项

- -

可选中项是可以通过单击它们来更改状态的小部件。有两种可选中项：复选框和单选按钮。两者都使用{{htmlattrxref("checked","input")}}属性，以指示该部件的默认状态: "选中"或"未选中"。

- -

值得注意的是，这些小部件与其他表单小部件不一样。对于大多数表单部件，一旦表单提交，所有具有{{htmlattrxref("name","input")}}属性的小部件都会被发送，即使没有任何值被填。对于可选中项，只有在勾选时才发送它们的值。如果他们没有被勾选，就不会发送任何东西，甚至连他们的名字也没有。

- -
-

注意: 你可以在Github上看到 checkable-items.html (你也可以看预览版)。

-
- -

为了获得最大的可用性和可访问性，建议您在{{htmlelement("fieldset")}}中包围每个相关项目的列表，并使用{{htmlelement("legend")}}提供对列表的全面描述。每个单独的{{htmlelement("label")}}/{{htmlelement("input")}}元素都应该包含在它自己的列表项中(或者类似的)。正如在示例中显示的。

- -

您还需要为这些类型的输入提供value属性，如果您想让它们具有意义——如果没有提供任何值，则复选框和单选按钮被赋予一个 on值。

- -

复选框

- -

使用{{htmlattrxref("type","input")}}属性值为checkbox的 {{HTMLElement("input")}}元素来创建一个复选框。

- -
<input type="checkbox" checked id="carrots" name="carrots" value="carrots">
-
- -

包含checked属性使复选框在页面加载时自动被选中。

- -

Screenshots of check boxes on several platforms.

- -

单选按钮

- -

使用{{htmlattrxref("type","input")}}属性值为radio的 {{HTMLElement("input")}}元素来创建一个单选按钮。

- -
<input type="radio" checked id="soup" name="meal">
- -

几个单选按钮可以连接在一起。如果它们的{{htmlattrxref("name","input")}}属性共享相同的值，那么它们将被认为属于同一组的按钮。同一组中只有一个按钮可以同时被选；这意味着当其中一个被选中时，所有其他的都将自动未选中。如果没有选中任何一个，那么整个单选按钮池就被认为处于未知状态，并且没有以表单的形式发送任何值。

- -
<fieldset>
-  <legend>What is your favorite meal?</legend>
-  <ul>
-    <li>
-      <label for="soup">Soup</label>
-      <input type="radio" checked id="soup" name="meal" value="soup">
-    </li>
-    <li>
-      <label for="curry">Curry</label>
-      <input type="radio" id="curry" name="meal" value="curry">
-    </li>
-    <li>
-      <label for="pizza">Pizza</label>
-      <input type="radio" id="pizza" name="meal" value="pizza">
-    </li>
-  </ul>
-</fieldset>
- -

Screenshots of radio buttons on several platforms.

- -

按钮

- -

在HTML表单中，有三种按钮：

- -
-
Submit
-
将表单数据发送到服务器。对于{{HTMLElement("button")}} 元素, 省略 type 属性 (或是一个无效的 type 值) 的结果就是一个提交按钮.
-
Reset
-
将所有表单小部件重新设置为它们的默认值。
-
Anonymous
-
没有自动生效的按钮，但是可以使用JavaScript代码进行定制。
-
- -
-

注意: 你可以在Github上看到button-examples.html (你也可以看预览版)。

-
- -

使用 {{HTMLElement("button")}}元素或者{{HTMLElement("input")}}元素来创建一个按钮。{{htmlattrxref("type","input")}}属性的值指定显示什么类型的按钮。

- -

submit

- -
<button type="submit">
-    This a <br><strong>submit button</strong>
-</button>
-
-<input type="submit" value="This is a submit button">
- -

reset

- -
<button type="reset">
-    This a <br><strong>reset button</strong>
-</button>
-
-<input type="reset" value="This is a reset button">
- -

button

- -
<button type="button">
-    This an <br><strong>anonymous button</strong>
-</button>
-
-<input type="button" value="This is an anonymous button">
- -

不管您使用的是{{HTMLElement("button")}}元素还是{{HTMLElement("input")}}元素，按钮的行为都是一样的。然而，有一些显著的不同之处：

- - - -

Screenshots of buttons on several platforms.

- -

从技术上讲，使用{{HTMLElement("button")}}元素或{{HTMLElement("input")}}元素定义的按钮几乎没有区别。唯一值得注意的区别是按钮本身的标签。在{{HTMLElement("input")}}元素中，标签只能是字符数据，而在{{HTMLElement("button")}}元素中，标签可以是HTML，因此可以相应地进行样式化。

- -

高级表单部件

- -

在本节中，我们将介绍那些让用户输入复杂或不寻常数据的小部件。这包括精确的或近似的数字，日期和时间，或颜色。

- -
-

注意: 你可以在Github上看到advanced-examples.html (你也可以看预览版)。

-
- -

数字

- -

用于数字的小部件是用{{htmlattrxref("type","input")}}属性设置为number{{HTMLElement("input")}}的元素创建的。这个控件看起来像一个文本框，但是只允许浮点数，并且通常提供一些按钮来增加或减少小部件的值。

- -

也可以：

- - - -

例子

- -
<input type="number" name="age" id="age" min="1" max="10" step="2">
- -

这将创建一个数字小部件，其值被限制为1到10之间的任何值，而其增加和减少按钮的步进值将更改为2。

- -

在10以下的Internet Explorer版本中不支持number 输入。

- -

滑块

- -

另一种选择数字的方法是使用滑块。从视觉上讲，滑块没有文本字段准确，因此它们被用来选择一个确切值并不重要的数字。

- -

滑块是通过把{{HTMLElement("input")}}元素的{{htmlattrxref("type","input")}}属性值设置为range来创建的。正确配置滑块是很重要的；为了达到这个目的，我们强烈建议您设置{{htmlattrxref("min","input")}}、{{htmlattrxref("max","input")}}和{{htmlattrxref("step","input")}}属性。

- -

例子

- -
<input type="range" name="beans" id="beans" min="0" max="500" step="10">
- -

这个例子创建了一个滑块，它可能的值在0到500之间，而它的递增/递减按钮以+10和-10来改变值。

- -

滑块的一个问题是，它们不提供任何形式的视觉反馈，以了解当前的值是什么。您需要使用JavaScript来添加这一点，但这相对来说比较容易。在本例中，我们添加了一个空的{{htmlelement("span")}}元素，其中我们将写入滑块的当前值，并随着更改实时更新它。

- -
<label for="beans">How many beans can you eat?</label>
-<input type="range" name="beans" id="beans" min="0" max="500" step="10">
-<span class="beancount"></span>
- -

可以使用一些简单的JavaScript实现

- -
var beans = document.querySelector('#beans');
-var count = document.querySelector('.beancount');
-
-count.textContent = beans.value;
-
-beans.oninput = function() {
-  count.textContent = beans.value;
-}
- -

这里我们将对范围输入值和span的引用存储在两个变量里，然后我们立即将span的textContent设置为输入的当前value。最后，我们设置了一个oninput事件处理程序，以便每次移动范围滑块时，都会将span textContent更新为新的输入值。

- -

在10以下的Internet Explorer版本中不支持range 。

- -

日期时间选择器

- -

对于web开发人员来说，收集日期和时间值一直是一场噩梦。HTML5通过提供一种特殊的控制来处理这种特殊的数据，从而带来了一些增强。

- -

使用{{HTMLElement("input")}}元素和一个适当的值的{{htmlattrxref("type","input")}}属性来创建日期和时间控制，这取决于您是否希望收集日期、时间或两者都。

- -

本地时间

- -

这将创建一个小部件来显示和选择一个日期，但是没有任何特定的时区信息。

- -
<input type="datetime-local" name="datetime" id="datetime">
- -

月

- -

这就创建了一个小部件来显示和挑选一个月。

- -
<input type="month" name="month" id="month">
- -

时间

- -

这将创建一个小部件来显示并选择一个时间值。

- -
<input type="time" name="time" id="time">
- -

星期

- -

这将创建一个小部件来显示并挑选一个星期号和它的年份。

- -
<input type="week" name="week" id="week">
- -

所有日期和时间控制都可以使用{{htmlattrxref("min","input")}}和{{htmlattrxref("max","input")}}属性来约束。

- -
<label for="myDate">When are you available this summer?</label>
-<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">
- -

警告——日期和时间窗口小部件仍然很不受支持。目前，Chrome、Edge和Opera都支持它们，但IE浏览器没有支持，Firefox和Safari对这些都没有太大的支持。

- -

拾色器

- -

颜色总是有点难处理。有很多方式来表达它们:RGB值(十进制或十六进制)、HSL值、关键字等等。颜色小部件允许用户在文本和可视的方式中选择颜色。

- -

一个颜色小部件是使用{{htmlattrxref("type","input")}}属性设置为值color{{HTMLElement("input")}}的元素创建的。

- -
<input type="color" name="color" id="color">
- -

警告——并不是所有浏览器都支持拾色器。IE中没有支持，Safari目前也不支持它。其他主要的浏览器都支持它。

- -

其他小部件

- -

还有一些其他的小部件由于它们非常特殊的行为而不能很容易地分类，但是它们仍然非常有用。

- -
-

注意: 你可以在Github上看到other-examples.html(你也可以看预览版)。

-
- -

文件选择器

- -

HTML表单能够将文件发送到服务器；在发送和检索表单数据的文章中详细描述了这个特定的操作。文件选择器小部件是用户如何选择一个或多个文件来发送的。

- -

要创建一个文件选择器小部件，您可以使用{{HTMLElement("input")}}元素，将它的{{htmlattrxref("type","input")}}属性设置为file。被接受的文件类型可以使用{{htmlattrxref("accept","input")}}属性来约束。此外，如果您想让用户选择多个文件，那么可以通过添加{{htmlattrxref("multiple","input")}}属性来实现。

- -

例子

- -

在本例中，创建一个文件选择器，请求图形图像文件。在本例中，允许用户选择多个文件。

- -
<input type="file" name="file" id="file" accept="image/*" multiple>
- -

隐藏内容

- -

有时候，由于为了方便技术原因，有些数据是用表单发送的，但不显示给用户。要做到这一点，您可以在表单中添加一个不可见的元素。要做到这一点，需要使用{{HTMLElement("input")}}将它的{{htmlattrxref("type","input")}}属性设置为hidden值。

- -

如果您创建了这样一个元素，就需要设置它的name和value属性：

- -
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
- -

图像按钮

- -

图像按钮控件是一个与{{HTMLElement("img")}}元素完全相同的元素，除了当用户点击它时，它的行为就像一个提交按钮(见上面)。

- -

图像按钮是使用{{htmlattrxref("type","input")}}属性值设置为image{{HTMLElement("input")}}的元素创建的。这个元素支持与{{HTMLElement("img")}}元素相同的属性，和其他表单按钮支持的所有属性。

- -
<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
- -

如果使用图像按钮来提交表单，这个小部件不会提交它的值；相反，提交的是在图像上单击处的X和Y坐标(坐标是相对于图像的，这意味着图像的左上角表示坐标0，0)，坐标被发送为两个键/值对：

- - - -

例如，当您点击这个小部件的图像时，您将被发送到一个URL，如下所显示的

- -
http://foo.com?pos.x=123&pos.y=456
- -

这是构建“热图”的一种非常方便的方式。如何发送和检索这些值在发送和检索表单数据文章中详细说明。

- -

仪表和进度条

- -

仪表和进度条是数值的可视化表示。

- -

进度条

- -

一个进度条表示一个值，它会随着时间的变化而变化到最大的值，这个值由{{htmlattrxref("max","progress")}}属性指定。这样的一个bar是使用{{ HTMLElement("progress")}}元素创建的。

- -
<progress max="100" value="75">75/100</progress>
- -

这是为了实现任何需要进度报告的内容，例如下载的总文件的百分比，或者问卷中填写的问题的数量。

- -

{{HTMLElement("progress")}}元素中的内容用于不支持该元素的浏览器的回退，以及辅助技术对其朗读。

- -

仪表

- -

一个仪表表示一个固定值，这个值由一个{{htmlattrxref("min","meter")}}和一个{{htmlattrxref("max","meter")}}值所界定。这个值是作为一个条形显示的，并且为了知道这个工具条是什么样子的，我们将这个值与其他一些设置值进行比较

- - - -

所有实现{{HTMLElement("meter")}}元素的浏览器都使用这些值来改变米尺的颜色。

- - - -

这样的一个工具栏是使用{{HTMLElement("meter")}}元素创建的。这是用于实现任何类型的仪表，例如一个显示磁盘上使用的总空间的条，当它开始满时，它会变成红色。

- -
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
- -

{{HTMLElement("meter")}}元素中的内容是不支持该元素的浏览器的回退，以及辅助技术对其发出的声音。

- -

对进度条和仪表的支持是相当不错的，在Internet Explorer中没有支持，但是其他浏览器都可以很好的支持它。

- -

总结

- -

正如您在上面看到的，有许多不同类型的可用表单元素——您不需要一次性记住所有细节，可以随时返回本文查看详细信息。

- -

另见

- -

要深入了解不同的表单小部件，您需要了解一些有用的外部资源:

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

diff --git a/files/zh-cn/learn/html/forms/your_first_html_form/index.html b/files/zh-cn/learn/html/forms/your_first_html_form/index.html deleted file mode 100644 index 5b0adc1480..0000000000 --- a/files/zh-cn/learn/html/forms/your_first_html_form/index.html +++ /dev/null @@ -1,266 +0,0 @@ ---- -title: 创建我的第一个表单 -slug: Learn/HTML/Forms/Your_first_HTML_form -translation_of: Learn/Forms/Your_first_form ---- -

{{LearnSidebar}}{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}

- -

本系列的第一篇文章提供了您第一次创建HTML表单的经验，包括设计一个简单表单，使用正确的HTML元素实现它，通过CSS添加一些非常简单的样式，以及如何将数据发送到服务器。

- - - - - - - - - - - - -
预备知识： -

基本计算机素养和对HTML的基本理解。

-
目标：为了熟悉HTML表单是什么，它们被用来做什么，如何设计它们，以及简单情况下需要的基本HTML元素。
- -

HTML表单是什么？

- -

HTML表单是用户和web站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到web站点。大多数情况下，数据被发送到web服务器，但是web页面也可以自己拦截它并使用它。

- -

HTML表单是由一个或多个小部件组成的。这些小部件可以是文本字段(单行或多行)、选择框、按钮、复选框或单选按钮。大多数情况下，这些小部件与描述其目的的标签配对——正确实现的标签能够清楚地指示视力正常的用户和盲人用户输入表单所需的内容。

- -

HTML表单和常规HTML文档的主要区别在于，大多数情况下，表单收集的数据被发送到web服务器。在这种情况下，您需要设置一个web服务器来接收和处理数据。如何设置这样的服务器超出了本文的范围，但是如果您想了解更多，请参阅模块后面的发送表单数据。

- -

设计表单

- -

在开始编写代码之前，最好先退一步，花点时间考虑一下您的表单。设计一个快速的模型将帮助您定义您想要询问用户的正确的数据集。从用户体验(UX)的角度来看，要记住：表单越大，失去用户的风险就越大。保持简单，保持专注:只要求必要的数据。在构建站点或应用程序时，设计表单是非常重要的一步。这超出了本文的范围，涵盖了表单的用户体验，但是如果您想深入了解这个主题，您应该阅读下面的文章:

- - - -

在本文中，我们将构建一个简单的联系人表单。让我们做一个粗略的草图。

- -

The form to build, roughly sketch

- -

我们的表单将包含三个文本字段和一个按钮。我们向用户询问他们的姓名、电子邮件和他们想要发送的信息。点击这个按钮将把他们的数据发送到一个web服务器。

- -

主动学习:使用HTML实现我们的表单

- -

好了，现在我们准备进入HTML代码并对表单进行编码。为了构建我们的联系人表单，我们将使用以下HTML元素:{{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, and {{HTMLElement("button")}}.

- -

在进一步讨论之前，先创建一个简单HTML模板的本地副本—您将在这里输入您的表单HTML。

- -

{{HTMLElement("form")}} 元素

- -

所有HTML表单都以一个{{HTMLElement("form")}}元素开始：

- -
<form action="/my-handling-form-page" method="post">
-
-</form>
- -

这个元素正式定义了一个表单。就像{{HTMLElement("div")}}元素或{{HTMLElement("p")}}元素，它是一个容器元素，但它也支持一些特定的属性来配置表单的行为方式。它的所有属性都是可选的，但实践中最好至少要设置action属性和method属性。

- - - -
-

注意:如果您想深入了解这些属性是如何工作的，那么将在发送表单数据文章中详细说明。

-
- -

现在，将上面的{{htmlelement("form")}} 元素添加到您的HTML主体中

- -

{{HTMLelement("label")}}, {{HTMLelement("input")}} 和 {{HTMLelement("textarea")}} 元素

- -

我们的联系人表单非常简单，包含三个文本字段，每个字段都有一个标签。该名称的输入字段将是一个基本的单行文本字段，电子邮件的输入字段将是一个只接受电子邮件地址的单行文本字段，而消息的输入字段将是一个基本的多行文本字段。

- -

就HTML代码而言，我们需要如下的东西来实现这些表单小部件：

- -
<form action="/my-handling-form-page" method="post">
-  <div>
-    <label for="name">Name:</label>
-    <input type="text" id="name">
-  </div>
-  <div>
-    <label for="mail">E-mail:</label>
-    <input type="email" id="mail">
-  </div>
-  <div>
-    <label for="msg">Message:</label>
-    <textarea id="msg"></textarea>
-  </div>
-</form>
- -

更新您的表单代码，使其看起来像上面的代码。

- -

使用{{HTMLElement("div")}} 元素可以使我们更加方便地构造我们自己的代码，并且更容易样式化(参见本文后面的文章)。注意在所有{{HTMLElement("label")}}元素上使用for属性；它是将标签链接到表单小部件的一种正规方式。这个属性引用对应的小部件的id。这样做有一些好处。最明显的一个好处是允许用户单击标签以激活相应的小部件。如果您想更好地理解这个属性的其他好处，您可以找到如何构造HTML表单的详细信息。

- -

在 {{HTMLElement("input")}}元素中，最重要的属性是type 属性。这个属性非常重要，因为它定义了{{HTMLElement("input")}}属性的行为方式。它可以从根本上改变元素，所以要注意它。稍后您将在原生表单控件文章中找到更多关于此的内容。

- - - -

最后但同样重要的是，要注意<input> 和 <textarea></textarea>的语法。这是HTML的一个奇怪之处。 <input> 标签是一个空元素，这意味着它不需要关闭标签。相反， {{HTMLElement("textarea")}}不是一个空元素，因此必须使用适当的结束标记来关闭它。这对HTML表单的特定特性有影响:定义默认值的方式。要定义{{HTMLElement("input")}}的默认值，你必须使用value 属性，如下所示：

- -
<input type="text" value="by default this element is filled with this text" />
- -

相反，如果您想定义{{HTMLElement("textarea")}}的默认值，您只需在{{HTMLElement("textarea")}}元素的开始和结束标记之间放置默认值，就像这样:

- -
<textarea>by default this element is filled with this text</textarea>
- -

{{HTMLelement("button")}} 元素

- -

我们的表格已经快准备好了，我们只需要再添加一个按钮，让用户在填写完表单后发送他们的数据。这是通过使用 {{HTMLelement("button")}} 元素完成的。在 </form>这个结束标签上方添加以下内容：

- -
<div class="button">
-  <button type="submit">Send your message</button>
-</div>
-
- -

您会看到{{htmlelement("button")}}元素也接受一个 type属性，它接受submit, reset或者 button 三个值中的任一个。

- - - -
-

注意：您还可以使用相应类型的 {{HTMLElement("input")}}元素来生成一个按钮，如 <input type="submit">。{{htmlelement("button")}}元素的主要优点是， {{HTMLElement("input")}}元素只允许纯文本作为其标签，而{{htmlelement("button")}}元素允许完整的HTML内容，允许更复杂、更有创意的按钮文本。

-
- -

基本表单样式

- -

现在您已经完成了表单的HTML代码，尝试保存它并在浏览器中查看它。
- 现在，你会看到它看起来很丑。

- -

- -
-

注意： 如果你怀疑你的HTML代码不对，试着把它和我们完成的例子进行比较 —— first-form.html (你也可以观看预览版)。

-
- -

如何排布好表单是公认的难点。这超出了本文的讨论范围，所以现在我们只需要让您添加一些CSS来让它看起来很好。

- -

首先，在您的HTML头部中添加一个 {{htmlelement("style")}}元素。应该是这样的：

- -
<style>
-
-</style>
- -

在样式标签中，添加如下的CSS，如下所示:

- -
form {
-  /* 居中表单 */
-  margin: 0 auto;
-  width: 400px;
-  /* 显示表单的轮廓 */
-  padding: 1em;
-  border: 1px solid #CCC;
-  border-radius: 1em;
-}
-
-ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-form li + li {
-  margin-top: 1em;
-}
-
-label {
-  /* 确保所有label大小相同并正确对齐 */
-  display: inline-block;
-  width: 90px;
-  text-align: right;
-}
-
-input, textarea {
-  /* 确保所有文本输入框字体相同
-     textarea默认是等宽字体 */
-  font: 1em sans-serif;
-
-  /* 使所有文本输入框大小相同 */
-  width: 300px;
-  box-sizing: border-box;
-
-  /* 调整文本输入框的边框样式 */
-  border: 1px solid #999;
-}
-
-input:focus, textarea:focus {
-  /* 给激活的元素一点高亮效果 */
-  border-color: #000;
-}
-
-textarea {
-  /* 使多行文本输入框和它们的label正确对齐 */
-  vertical-align: top;
-
-  /* 给文本留下足够的空间 */
-  height: 5em;
-}
-
-.button {
-  /* 把按钮放到和文本输入框一样的位置 */
-  padding-left: 90px; /* 和label的大小一样 */
-}
-
-button {
-  /* 这个外边距的大小与label和文本输入框之间的间距差不多 */
-  margin-left: .5em;
-}
- -

现在，它看起来没那么丑了。

- -

- -
-

注意: 你可以在GitHub上的这里找到它 first-form-styled.html (也可以在这儿看运行结果).

-
- -

向您的web服务器发送表单数据

- -

最后一部分，也许是最棘手的部分，是在服务器端处理表单数据。如前所述，大多数时候HTML表单是向用户请求数据并将其发送到web服务器的一种方便的方式。

- -

{{HTMLelement("form")}} 元素将定义如何通过action 属性和 method属性来发送数据的位置和方式。

- -

但这还不够。我们还需要为我们的数据提供一个名称。这些名字对双方都很重要：在浏览器端，它告诉浏览器给数据各自哪个名称，在服务器端，它允许服务器按名称处理每个数据块。

- -

要将数据命名为表单，您需要在每个表单小部件上使用 name 属性来收集特定的数据块。让我们再来看看我们的表单代码:

- -
<form action="/my-handling-form-page" method="post">
-  <div>
-    <label for="name">Name:</label>
-    <input type="text" id="name" name="user_name">
-  </div>
-  <div>
-    <label for="mail">E-mail:</label>
-    <input type="email" id="mail" name="user_email">
-  </div>
-  <div>
-    <label for="msg">Message:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </div>
-
-  ...
- -

在我们的例子中，表单会发送三个已命名的数据块 "user_name", "user_email", 和 "user_message"。这些数据将用使用HTTP POST 方法,把信息发送到URL为 "/my-handling-form-page"目录下。

- -

在服务器端，位于URL"/my-handling-form-page" 上的脚本将接收的数据作为HTTP请求中包含的3个键/值项的列表。这个脚本处理这些数据的方式取决于您。每个服务器端语言(PHP、Python、Ruby、Java、c等等)都有自己的机制。深入到这个主题已经超出了本指南的范围，但是如果您想了解更多，我们已经在发送表单数据文章中提供了一些示例。 

- -

总结

- -

祝贺您，您已经构建了您的第一个HTML表单。它看起来就像这样:

- -

{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/HTML/Forms/Your_first_HTML_form/Example') }}

- -

然而，这仅仅是开始，现在是时候深入研究了。HTML表单比我们在这里看到的要强大得多，本指南的其他文章将帮助您掌握其余部分。

- -

{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}

diff --git a/files/zh-cn/learn/html/forms_and_buttons/index.html b/files/zh-cn/learn/html/forms_and_buttons/index.html deleted file mode 100644 index a0f74f6ef1..0000000000 --- a/files/zh-cn/learn/html/forms_and_buttons/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: 表单和按钮 -slug: learn/HTML/Forms_and_buttons -tags: - - 初学者 - - 指引 - - 文章 - - 表单 -translation_of: Learn/HTML/Forms_and_buttons ---- -

{{draft}}{{LearnSidebar}}

- -

表单和按钮是Web的一个非常重要的部分 - 这些允许您的站点访问者输入数据并将其发送给您（例如注册，登录和反馈表单），并且您可以实现控制以控制复杂功能（例如提交表单） 到服务器，或暂停播放视频。）这个模块可以帮助您入门。

- -

先决条件

- -

在开始本单元之前，您应该对HTML的基础知识有一定的了解，如HTML简介中所述。 如果你没有通过这个模块（或类似的东西），先完成它，然后再回来！

- -
-

Note: 如果你是在计算机/平板电脑等其他你无法创建文件的设备上的话，你可以尝试在在线代码编辑平台上运行代码例如 JSBin 或 Thimble.

-
- -

向导

- -

本模块包含以下的文章

- -
-
表单和按钮基础知识（Form and button basics）
-
     在本文中，我们将向您介绍HTML表单的基础知识，包括它们的用途，基本功能和常用表单控件。 我们还将了解HTML按钮以及如何使用它们。
-
形成语义和结构
-
     存在许多元素，允许我们将表单结构化为更易于使用和访问 - 其中一些是专门的表单元素，其中一些是通用HTML容器。 在本文中，我们将介绍创建表单结构的最佳实践。
-
高级表单功能
-
       在这里，我们将介绍HTML表单中可用的一些更高级的功能，例如数据列表，进度条，滑块以及最小值和最大值。
-
表格验证
-
     在我们的最终表单文章中，我们将讨论表单验证，讨论为什么有必要，并查看HTML选项卡提供的一些功能，以便客户端验证表单数据。
-
- -

练习

- -
-
表单练习
-
等待完成（to be done）
-
diff --git a/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html b/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..5a07e862a0 --- /dev/null +++ b/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,213 @@ +--- +title: 小贴士：如何制作快速加载的HTML页面 +slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages +tags: + - HTML + - 全部分类 + - 教程 +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

以下技巧都是基于通用的知识和经验。

+ +

一个好的页面不仅要给访客提供一个更有交互性的站点，同时也需要降低你的服务器压力和网络请求。后者对于那些高访问量的站点，或在有爆炸性新闻出现等特殊情况下会出现流量突增的站点来说尤为关键。

+ +

页面加载性能的优化不仅仅是针对那些带宽有限的拨号上网或移动设备用户需要看的内容，对于提供给宽带用户访问的内容同样重要并且可以导致巨大的提升，哪怕对于那些拥有最快网速的访客。

+ +

Tips

+ +

减小页面的大小

+ +

直至今日，页面的大小仍是页面加载性能的最重要因素。

+ +

通过压缩——排除不必要空格，注释，和将脚本、CSS放入外部文件等减小页面的大小，可以在页面结构改变很小的情况下提高下载性能。

+ +

诸如 HTML Tidy 这类的工具可以从有效的HTML源文件中自动截去行首空格和额外的空行，其它工具则可以通过重新格式化源代码来压缩JavaScript或者通过混淆源码将长标识符替换为短标识符来减小文件大小。

+ +

最小化文件数量

+ +

减少一个页面引用的文件数量可以降低在下载一个页面的过程中需要的HTTP请求数量，从而减少这些请求的收发时间。

+ +

根据其缓存设置，浏览器可能会为每个所引用的文件发送一个带 If-Modified-Since 的请求给网络服务器，以查询这些文件自上次加载后是否有被修改。查询引用文件上次修改时间会花费太多时间，导致网页首屏延迟，这是因为在渲染页面之前浏览器必须确认每个文件的修改时间。

+ +

If you use background images a lot in your CSS, you can reduce the number of HTTP lookups needed by combining the images into one, known as an image sprite. Then you just apply the same image each time you need it for a background and adjust the x/y coordinates appropriately. This technique works best with elements that will have limited dimensions, and will not work for every use of a background image. However, the fewer HTTP requests and single image caching can help reduce page-load time.

+ +

使用 CDN

+ +

For the purposes of this article, a CDN is a means to reduce the physical distance between your server and your visitor. As the distance between your server origin and visitor increases, the load times will increase. Suppose your website server is located in the United States and it has a visitor from India; the page load time will be much higher for the Indian visitor compared to a visitor from the US.

+ +

A CDN is a geographically distributed network of servers that work together to shorten the distance between the user and your website. CDNs store cached versions of your website and serve them to visitors via the network node closest to the user, thereby reducing latency.

+ +

Further reading:

+ + + +

减少域名查找

+ +

每个独立的域名都会消耗DNS查找的时间，页面加载时间会随着独立域名数量、CSS链接数量、JavaScript还有图片资源的数量增加而增加。

+ +

这条可能算不上实用，然而，在你的页面中尽量少的使用来自不同域名的资源链接。

+ + + +

缓存重用的内容

+ +

确保任何内容可以被缓存，并且拥有一个合理的有效期。

+ +

特别要注意 Last-Modified 头，它会让页面高效的缓存。 自上次修改之后，这部分 header 指示将信息传递给用户代理（要加载这些信息的文件）。大部分网页服务器会自动追加 Last-Modified header 部分到静态页面（如 .html，.css），基于上次修改的日期储存在文件系统中。至于动态页面（如 .php，.aspx），便无法做到，这部分请求的头也就不会被发送出去。

+ +

所以，特别是动态产生的页面，花点时间研究一下这个课题会是有益的。或许有些什么关联，无论怎样，这么做在那些不能被缓存的网页中都会节省很多的页面请求。

+ +

更多信息：

+ +
    +
  1. HTTP Conditional Get for RSS Hackers
    2. +
  2. HTTP 304: Not Modified
    3. +
  3. HTTP ETag on Wikipedia
    4. +
  4. Caching in HTTP
    5. +
+ +

高效地排列页面组件

+ +

在页面最初显示时，会首先下载页面内容以及所需的CSS和JavaScript，这样在页面加载时用户可以最快获得外观的反馈。由于内容通常都是文本，有利于在传输过程中压缩，因此给用户以更快的响应。

+ +

页面中任何具有动态特性的资源需要在页面被完全加载后才可以使用，所以最好在初始化时关闭动态特性（disable dynamic features ），等页面加载完后再打开它。这样JavaScript就会在网页内容之后才加载，有助于提升页面加载的整体表现。

+ +

减少内联脚本的数量

+ +

内联脚本在页面加载过程中消耗很多资源，因为解析器认为内联脚本会改变页面结构。通常，尽量少的使用内联脚本和减少用document.write()来输出内容，在一定情况下可以加速整体页面的载入。现在浏览器中一般使用现代的 W3C DOM 方法操作页面内容，优于使用document.write()的传统方法。

+ +

使用现代CSS和合法标记

+ +

使用现代CSS减少标记（markup）的用量，可以减少对（spacer）图片的需求。在布局方面，图片通常可以用风格化的文本（text）来替代，这样会“节省”许多资源。

+ +

使用合法标记还有其它优点。首先，浏览器在解释HTML时无需做错误校正（除了一些哲理性的问题，例如，是允许用户输入格式不一致，而后再用程序“校准”或统一化呢？ 还是加强约束规则，限制用户输入的格式？）。

+ +

再者，合法标记可以让那些给你的网站做预处理的工具功能最大化。例如，HTML Tidy 可以移除空白（whitespace）和可选的末尾标记（ending tags）；然而，在有严重的错误标记的网页中这些工具便无法工作。

+ +

给内容分块

+ +

使用 table 布局是一种不应该再采用的传统方法，而应运用 floats, positioning, flexbox, 或 grids 来布局。

+ +

当然，table 仍是不失为一种有效的展示表格数据的方式。为了帮助浏览器更快速的渲染你的页面，你应该避免嵌套 table。

+ +

相较于这种深度的嵌套：

+ +
<table>
+  <table>
+    <table>
+          ...
+    </table>
+  </table>
+</table>
+ +

用下图这样的非嵌套结构更好一些：

+ +
<table>...</table>
+<table>...</table>
+<table>...</table>
+ +

可参见 CSS Flexible Box Layout 和 CSS Grid Layout 规范。

+ +

Minify and compress SVG assets

+ +

SVG produced by most drawing applications often contains unnecessary metadata which can be removed. Configure your servers, apply gzip compression for SVG assets.

+ +

Minify and compress your images

+ +

Large images cause your page to take more time to load. Consider compressing your images before adding them to your page, using compression features built into image-manipulation tools such as Photoshop, or using a specialized tool such as Compress Jpeg or Tiny PNG,.

+ +

指定图像和表格的大小

+ +

如果浏览器可以即时决定你的照片（images）和表格（tables）宽高，它在展示网页时就不必进行内容重新排版。这不仅可以加速网页的显示，还能在网页完成加载的过程中防止恼人的布局改变。因此，图片的 height 和 width 应尽可能确定下来。

+ +

表格可以使用 CSS 选择器：综合性能：

+ +
table-layout: fixed;
+ +

用 <col> 和 <colgroup> 元素来指定列宽。

+ +

合理的选择 user-agent

+ +

为使页面设计得到极大提升，应确保在工程中指定一个合理的user-agent。不要奢求你的内容在所有浏览器中都完美的展现，特别是在那些低版本的浏览器中。

+ +

理想情况下，你的页面运行的最小环境要基于现代浏览器，这个浏览器起码要支持一些相关的标准（如 html5 标准）。可以是最近版本的火狐，IE，谷歌Chrome，Opera还有Safari。

+ +

需要注意一下，这篇文章当中的许多tips都是些技术性常识，可以不必担心浏览器的支持需求而应用到任何user-agent和网页中去。

+ +

尽可能使用 async 和 defer

+ +

确保 JavaScript 脚本兼容 async 和 defer，任何时候都要尽可能使用  async ，特别是当你有较多的 script 标签时。

+ +

这样在加载 JavaScript 的过程中页面就不会重新绘制，否则，浏览器在不具有这些特性的 script 标签后就不会重绘任何东西。

+ +

注意：这些特性在页面第一次加载时会有所帮助，你可以这样用但不能指靠它在所有的浏览器中起作用。如果你遵循指南（guidelines）写出了非常优秀的 JavaScript 代码，也不必要再去修改它了。

+ +

页面结构示例

+ +

· {{htmlelement('html')}}

+ +
+
· {{htmlelement('head')}}
+
+ +
+
+
+
· {{htmlelement('link')}} ...
+ CSS 文件用来修饰页面外观。在调试维护中把不相关的 CSS 拆分在不同文件中，且尽量减少文件的数量可以提高性能。
+
+
+
+ +
+
+
+
· {{htmlelement('script')}} ...
+ JavaScript 文件用来实现页面加载时需要的函数，而避免在页面加载后才能运行的 JavaScript。
+
在调试维护中把不相关的 JavaScript 拆分在不同文件中，且尽量减少文件的数量可以提高性能。
+
+
+
+ +
+
· {{htmlelement('body')}}
+
· 用户能在完整页面下载完之前就可以看到的页面小分块 ( {{htmlelement('header')}}/ {{htmlelement('main')}}/ {{htmlelement('table')}}) 。
+
+ +
+
+
+
· {{htmlelement('script')}} ...
+
DHTML 脚本通常在页面完全加载或者所有必要的对象（objects）已初始化完毕之后才能运行。没有必要在页面内容之前加载这些脚本，这只会拖慢页面加载和初始化的体验。
+
在调试维护中把不相关的 script 拆分在不同文件中，且尽量减少文件的数量可以提高性能。
+
如有图像用到了反转效果，你应该在页面内容下载完后预加载这些图像。
+
+
+
+ + + + + +
+

文章原始信息

+ + +
+ +
+ +

{{ languages( { "en": "en/Tips_for_Authoring_Fast-loading_HTML_Pages", "ja": "ja/Tips_for_Authoring_Fast-loading_HTML_Pages", "pl": "pl/Porady_odno\u015bnie_tworzenia_szybko_\u0142aduj\u0105cych_si\u0119_stron_HTML" } ) }}

diff --git a/files/zh-cn/learn/html/howto/use_data_attributes/index.html b/files/zh-cn/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..009517f416 --- /dev/null +++ b/files/zh-cn/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,80 @@ +--- +title: 使用数据属性 +slug: Web/Guide/HTML/Using_data_attributes +tags: + - Custom Data Attributes + - HTML5 +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +

{{LearnSidebar}}

+ +

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

+ +

HTML 语法

+ +

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

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

JavaScript 访问

+ +

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

+ +

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

+ +
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使用函数{{cssxref("attr")}}来显示data-parent的内容：

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

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

+ +
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及以下的版本，你必须使用{{domxref("Element.getAttribute", "getAttribute()")}} 来访问。另外，读取 data-attributes的行为相比JS存储数据会慢。使用dataset 会比使用getAttribute()读取数据来得慢。

+ +

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

+ +

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

+ +

参阅

+ +
 
+ + diff --git a/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..63c421487b --- /dev/null +++ b/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,252 @@ +--- +title: 文档与网站架构 +slug: learn/HTML/Introduction_to_HTML/文件和网站结构 +tags: + - HTML + - 块 + - 教程 + - 新手 + - 样式 + - 站点 + - 脚本编写 + - 页面 +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

{{glossary("HTML")}} 不仅能够定义网页的单独部分（例如“段落”或“图片”），还可以使用块级元素（例如“标题栏”、“导航菜单”、“主内容列”）来定义网站中的复合区域。本文将探讨如何规划基本的网站结构，并根据规划的结构来编写 HTML。

+ + + + + + + + + + + + +
预备知识：阅读 开始学习 HTML、HTML 文字处理初步 、创建超链接，掌握相关基础知识。
学习目标：会用语义标签来构建文档，会搭建简单的网站结构。
+ +

文档的基本组成部分

+ +

网页的外观多种多样，但是除了全屏视频或游戏，或艺术作品页面，或只是结构不当的页面以外，都倾向于使用类似的标准组件：

+ +
+
页眉
+
通常横跨于整个页面顶部有一个大标题 和/或 一个标志。 这是网站的主要一般信息，通常存在于所有网页。
+
导航栏
+
指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的 无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。
+
主内容
+
中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。
+
侧边栏
+
一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。
+
页脚
+
横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。 还可以通过提供快速访问链接来进行 {{Glossary("SEO")}}。
+
+ +

一个“典型的网站”可能会这样布局：

+ +

一个简单站点首页截图

+ +

用于构建内容的 HTML

+ +

以上简单示例不是很精美，但是足够说明网站的典型布局方式了。 一些站点拥有更多列，其中一些远比这复杂，但一切在你掌握之中。通过合适的CSS， 你可以使用相当多种的任意页面元素来环绕在不同的页面区域来做成你想要的样子，但如前所述，我们要敬畏语义，做到正确选用元素。

+ +

这是因为视觉效果并不是一切。 我们可以修改最重要内容（例如导航菜单和相关链接）的颜色、字体大小来吸引用户的注意，但是这对视障人士是无效的，“粉红色”和“大字体”对他们并不奏效。

+ +
+

注：全球色盲患者比例为 4%，换句话说，每 12 名男性就有一位色盲，每 200 名女性就有一位色盲。全盲和视障人士约占世界人口（约 70 亿）的 13％（2015年 全球约有 9.4 亿人口存在视力问题）。

+
+ +

HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧义地表示上文所讲的内容区段，屏幕阅读器等辅助技术可以识别这些元素，并帮助执行“找到主导航 “或”找到主内容“等任务。参见前文所讲的 页面中元素结构和语义不佳所带来的后果。

+ +

为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：

+ + + +

主动学习：研究示例代码

+ +

上图的示例可用下面的代码表示（完整代码请参见 GitHub），请结合图片观察代码，并找出代码中可见的区段：

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>二次元俱乐部</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe" rel="stylesheet">
+    <link href="style.css" rel="stylesheet">
+  </head>
+
+  <body>
+    <header> <!-- 本站所有网页的统一主标题 -->
+      <h1>聆听电子天籁之音</h1>
+    </header>
+
+    <nav> <!-- 本站统一的导航栏 -->
+      <ul>
+        <li><a href="#">主页</a></li>
+        <!-- 共n个导航栏项目，省略…… -->
+      </ul>
+
+      <form> <!-- 搜索栏是站点内导航的一个非线性的方式。 -->
+        <input type="search" name="q" placeholder="要搜索的内容">
+        <input type="submit" value="搜索">
+      </form>
+    </nav>
+
+    <main> <!-- 网页主体内容 -->
+      <article>
+        <!-- 此处包含一个 article（一篇文章），内容略…… -->
+      </article>
+
+      <aside> <!-- 侧边栏在主内容右侧 -->
+        <h2>相关链接</h2>
+        <ul>
+          <li><a href="#">这是一个超链接</a></li>
+          <!-- 侧边栏有n个超链接，略略略…… -->
+        </ul>
+      </aside>
+    </main>
+
+    <footer> <!-- 本站所有网页的统一页脚 -->
+      <p>© 2050 某某保留所有权利</p>
+    </footer>
+  </body>
+</html>
+ +

请花一些时间来阅读，其中的注释应该能够帮助你理解这些代码。现在能够理解上面的代码就可以，因为编写一套正确的 HTML 结构是理解文档布局的前提，布局工作就交给 CSS 吧。在学习 CSS 一章时我们再展开介绍。

+ +

HTML 布局元素细节

+ +

理解所有 HTML 区段元素具体含义是很有益处的，这一点将随着个人 web 开发经验的逐渐丰富日趋显现。更多细节请查阅 HTML 元素参考。现在，你只需要理解以下主要元素的意义：

+ + + +

无语义元素

+ +

有时你会发现，对于一些要组织的项目或要包装的内容，现有的语义元素均不能很好对应。有时候你可能只想将一组元素作为一个单独的实体来修饰来响应单一的用 {{glossary("CSS")}} 或 {{glossary("JavaScript")}}。为了应对这种情况，HTML提供了 {{HTMLElement("div")}} 和 {{HTMLElement("span")}} 元素。应配合使用 {{htmlattrxref('class')}} 属性提供一些标签，使这些元素能易于查询。

+ +

{{HTMLElement("span")}} 是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。例如：

+ +
<p>国王喝得酩酊大醉，在凌晨 1 点时才回到自己的房间，踉跄地走过门口。<span class="editor-note">[编辑批注：此刻舞台灯光应变暗]</span>.</p>
+ +

这里，“编辑批注”仅仅是对舞台剧导演提供额外指引；没有具体语义。对于视力正常的用户，CSS 应将批注内容与主内容稍微隔开一些。

+ +

{{HTMLElement("div")}} 是一个块级无语义元素，应仅用于找不到更好的块级元素时，或者不想增加特定的意义时。例如，一个电子商务网站页面上有一个一直显示的购物车组件。

+ +
<div class="shopping-cart">
+  <h2>购物车</h2>
+  <ul>
+    <li>
+      <p><a href=""><strong>银耳环</strong></a>：$99.95.</p>
+      <img src="../products/3333-0985/" alt="Silver earrings">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>售价：$237.89</p>
+</div>
+ +

这里不应使用 <aside>，因为它和主内容并没有必要的联系（你想在任何地方都能看到它）。甚至不能用 <section> ，因为它也不是页面上主内容的一部分。所以在这种情况下就应使用 <div>，为满足无障碍使用特征，还应为购物车的标题设置一个可读标签。

+ +
+

警告：<div> 非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用， 否则文档的升级和维护工作会非常困难。

+
+ +

换行与水平分割线

+ +

有时会用到 {{htmlelement("br")}} 和 {{htmlelement("hr")}} 两个元素，需要介绍一下。

+ +

<br> 可在段落中进行换行；<br> 是唯一能够生成多个短行结构（例如邮寄地址或诗歌）的元素。比如：

+ +
<p>从前有个人叫小高<br>
+他说写 HTML 感觉最好<br>
+但他写的代码结构语义一团糟<br>
+他写的标签谁也懂不了。</p>
+
+ +

没有 <br> 元素，这段会直接显示在长长的一行中（如前文所讲，HTML会忽略大部分空格）；使用 <br> 元素，才使得诗看上去像诗：

+ +

从前有个人叫小高
+ 他说写 HTML 感觉最好
+ 但他写的代码结构语义一团糟
+ 他写的标签谁也懂不了。

+ +

<hr> 元素在文档中生成一条水平分割线，表示文本中主题的变化（例如话题或场景的改变）。一般就是一条水平的直线。例如：

+ +
<p>原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。</p>
+<hr>
+<p>却说那妖精，脱命升空。原来行者那一棒不曾打杀妖精，妖精出神去了。他在那云端里，咬牙切齿，暗恨行者道：“几年只闻得讲他手段，今日果然话不虚传。那唐僧已此不认得我，将要吃饭。若低头闻一闻儿，我就一把捞住，却不是我的人了。不期被他走来，弄破我这勾当，又几乎被他打了一棒。若饶了这个和尚，诚然是劳而无功也。我还下去戏他一戏。”</p>
+ +

将渲染成：

+ +

原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。

+ +
+

却说那妖精，脱命升空。原来行者那一棒不曾打杀妖精，妖精出神去了。他在那云端里，咬牙切齿，暗恨行者道：“几年只闻得讲他手段，今日果然话不虚传。那唐僧已此不认得我，将要吃饭。若低头闻一闻儿，我就一把捞住，却不是我的人了。不期被他走来，弄破我这勾当，又几乎被他打了一棒。若饶了这个和尚，诚然是劳而无功也。我还下去戏他一戏。”

+ +

规划一个简单的网站

+ +

在完成页面内容的规划后，一般应按部就班地规划整个网站的内容，要可能带给用户最好的体验，需要哪些页面、如何排列组合这些页面、如何互相链接等问题不可忽略。这些工作称为{{glossary("Information architecture", "信息架构")}}。在大型网站中，大多数规划工作都可以归结于此，而对于一个只有几个页面的简单网站，规划设计过程可以更简单，更有趣！

+ +
    +
  1. 时刻记住，大多数（不是全部）页面会使用一些相同的元素，例如导航菜单以及页脚内容。若网站为商业站点，不妨在所有页面的页脚都加上联系方式。请记录这些对所有页面都通用的内容：所有页面共有的内容，包括：站点标题、Logo、联系方式、版权声明、语言等信息。
    2. +
  2. 接下来，可为页面结构绘制草图（这里与前文那个站点页面的截图类似）。记录每一块的作用：简单的页面布局示意图，有页眉、页脚、主内容、侧边栏。
    3. +
  3. 下面，对于期望添加进站点的所有其它（通用内容以外的）内容展开头脑风暴，直接罗列出来。把假日旅行站点的所有功能罗列到一个列表中
    4. +
  4. 下一步，试着对这些内容进行分组，这样可以让你了解哪些内容可以放在同一个页面。这种做法和 {{glossary("Card sorting", "卡片分类法")}} 非常相似。假日网站的页面应分5类：搜索、特别提供、具体国家信息、搜索结果、购物。
    5. +
  5. 接下来，试着绘制一个站点地图的草图，使用一个气泡代表网站的一个页面，并绘制连线来表示页面间的一般工作流。主页面一般置于中心，且链接到其他大多数页面；小型网站的大多数页面都可以从主页的导航栏中链接跳转。也可记录下内容的显示方式。
    6. +
+ +

主动学习：创建站点地图

+ +

自己创造一个网站（什么网站呢？）并尝试执行上述步骤。

+ +
+

注：记得保存你的杰作，今后可能会用到哦。

+
+ +

小结

+ +

现在你应该对如何构建网页/站点有了更好的理解。下一节我们将学习如何调试 HTML。

+ +

另请参阅

+ + + +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

+ +

本章目录

+ + diff --git "a/files/zh-cn/learn/html/introduction_to_html/\346\226\207\344\273\266\345\222\214\347\275\221\347\253\231\347\273\223\346\236\204/index.html" "b/files/zh-cn/learn/html/introduction_to_html/\346\226\207\344\273\266\345\222\214\347\275\221\347\253\231\347\273\223\346\236\204/index.html" deleted file mode 100644 index 63c421487b..0000000000 --- "a/files/zh-cn/learn/html/introduction_to_html/\346\226\207\344\273\266\345\222\214\347\275\221\347\253\231\347\273\223\346\236\204/index.html" +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: 文档与网站架构 -slug: learn/HTML/Introduction_to_HTML/文件和网站结构 -tags: - - HTML - - 块 - - 教程 - - 新手 - - 样式 - - 站点 - - 脚本编写 - - 页面 -translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -

{{glossary("HTML")}} 不仅能够定义网页的单独部分（例如“段落”或“图片”），还可以使用块级元素（例如“标题栏”、“导航菜单”、“主内容列”）来定义网站中的复合区域。本文将探讨如何规划基本的网站结构，并根据规划的结构来编写 HTML。

- - - - - - - - - - - - -
预备知识：阅读 开始学习 HTML、HTML 文字处理初步 、创建超链接，掌握相关基础知识。
学习目标：会用语义标签来构建文档，会搭建简单的网站结构。
- -

文档的基本组成部分

- -

网页的外观多种多样，但是除了全屏视频或游戏，或艺术作品页面，或只是结构不当的页面以外，都倾向于使用类似的标准组件：

- -
-
页眉
-
通常横跨于整个页面顶部有一个大标题 和/或 一个标志。 这是网站的主要一般信息，通常存在于所有网页。
-
导航栏
-
指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的 无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。
-
主内容
-
中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。
-
侧边栏
-
一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。
-
页脚
-
横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。 还可以通过提供快速访问链接来进行 {{Glossary("SEO")}}。
-
- -

一个“典型的网站”可能会这样布局：

- -

一个简单站点首页截图

- -

用于构建内容的 HTML

- -

以上简单示例不是很精美，但是足够说明网站的典型布局方式了。 一些站点拥有更多列，其中一些远比这复杂，但一切在你掌握之中。通过合适的CSS， 你可以使用相当多种的任意页面元素来环绕在不同的页面区域来做成你想要的样子，但如前所述，我们要敬畏语义，做到正确选用元素。

- -

这是因为视觉效果并不是一切。 我们可以修改最重要内容（例如导航菜单和相关链接）的颜色、字体大小来吸引用户的注意，但是这对视障人士是无效的，“粉红色”和“大字体”对他们并不奏效。

- -
-

注：全球色盲患者比例为 4%，换句话说，每 12 名男性就有一位色盲，每 200 名女性就有一位色盲。全盲和视障人士约占世界人口（约 70 亿）的 13％（2015年 全球约有 9.4 亿人口存在视力问题）。

-
- -

HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧义地表示上文所讲的内容区段，屏幕阅读器等辅助技术可以识别这些元素，并帮助执行“找到主导航 “或”找到主内容“等任务。参见前文所讲的 页面中元素结构和语义不佳所带来的后果。

- -

为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：

- - - -

主动学习：研究示例代码

- -

上图的示例可用下面的代码表示（完整代码请参见 GitHub），请结合图片观察代码，并找出代码中可见的区段：

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>二次元俱乐部</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe" rel="stylesheet">
-    <link href="style.css" rel="stylesheet">
-  </head>
-
-  <body>
-    <header> <!-- 本站所有网页的统一主标题 -->
-      <h1>聆听电子天籁之音</h1>
-    </header>
-
-    <nav> <!-- 本站统一的导航栏 -->
-      <ul>
-        <li><a href="#">主页</a></li>
-        <!-- 共n个导航栏项目，省略…… -->
-      </ul>
-
-      <form> <!-- 搜索栏是站点内导航的一个非线性的方式。 -->
-        <input type="search" name="q" placeholder="要搜索的内容">
-        <input type="submit" value="搜索">
-      </form>
-    </nav>
-
-    <main> <!-- 网页主体内容 -->
-      <article>
-        <!-- 此处包含一个 article（一篇文章），内容略…… -->
-      </article>
-
-      <aside> <!-- 侧边栏在主内容右侧 -->
-        <h2>相关链接</h2>
-        <ul>
-          <li><a href="#">这是一个超链接</a></li>
-          <!-- 侧边栏有n个超链接，略略略…… -->
-        </ul>
-      </aside>
-    </main>
-
-    <footer> <!-- 本站所有网页的统一页脚 -->
-      <p>© 2050 某某保留所有权利</p>
-    </footer>
-  </body>
-</html>
- -

请花一些时间来阅读，其中的注释应该能够帮助你理解这些代码。现在能够理解上面的代码就可以，因为编写一套正确的 HTML 结构是理解文档布局的前提，布局工作就交给 CSS 吧。在学习 CSS 一章时我们再展开介绍。

- -

HTML 布局元素细节

- -

理解所有 HTML 区段元素具体含义是很有益处的，这一点将随着个人 web 开发经验的逐渐丰富日趋显现。更多细节请查阅 HTML 元素参考。现在，你只需要理解以下主要元素的意义：

- - - -

无语义元素

- -

有时你会发现，对于一些要组织的项目或要包装的内容，现有的语义元素均不能很好对应。有时候你可能只想将一组元素作为一个单独的实体来修饰来响应单一的用 {{glossary("CSS")}} 或 {{glossary("JavaScript")}}。为了应对这种情况，HTML提供了 {{HTMLElement("div")}} 和 {{HTMLElement("span")}} 元素。应配合使用 {{htmlattrxref('class')}} 属性提供一些标签，使这些元素能易于查询。

- -

{{HTMLElement("span")}} 是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。例如：

- -
<p>国王喝得酩酊大醉，在凌晨 1 点时才回到自己的房间，踉跄地走过门口。<span class="editor-note">[编辑批注：此刻舞台灯光应变暗]</span>.</p>
- -

这里，“编辑批注”仅仅是对舞台剧导演提供额外指引；没有具体语义。对于视力正常的用户，CSS 应将批注内容与主内容稍微隔开一些。

- -

{{HTMLElement("div")}} 是一个块级无语义元素，应仅用于找不到更好的块级元素时，或者不想增加特定的意义时。例如，一个电子商务网站页面上有一个一直显示的购物车组件。

- -
<div class="shopping-cart">
-  <h2>购物车</h2>
-  <ul>
-    <li>
-      <p><a href=""><strong>银耳环</strong></a>：$99.95.</p>
-      <img src="../products/3333-0985/" alt="Silver earrings">
-    </li>
-    <li>
-      ...
-    </li>
-  </ul>
-  <p>售价：$237.89</p>
-</div>
- -

这里不应使用 <aside>，因为它和主内容并没有必要的联系（你想在任何地方都能看到它）。甚至不能用 <section> ，因为它也不是页面上主内容的一部分。所以在这种情况下就应使用 <div>，为满足无障碍使用特征，还应为购物车的标题设置一个可读标签。

- -
-

警告：<div> 非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用， 否则文档的升级和维护工作会非常困难。

-
- -

换行与水平分割线

- -

有时会用到 {{htmlelement("br")}} 和 {{htmlelement("hr")}} 两个元素，需要介绍一下。

- -

<br> 可在段落中进行换行；<br> 是唯一能够生成多个短行结构（例如邮寄地址或诗歌）的元素。比如：

- -
<p>从前有个人叫小高<br>
-他说写 HTML 感觉最好<br>
-但他写的代码结构语义一团糟<br>
-他写的标签谁也懂不了。</p>
-
- -

没有 <br> 元素，这段会直接显示在长长的一行中（如前文所讲，HTML会忽略大部分空格）；使用 <br> 元素，才使得诗看上去像诗：

- -

从前有个人叫小高
- 他说写 HTML 感觉最好
- 但他写的代码结构语义一团糟
- 他写的标签谁也懂不了。

- -

<hr> 元素在文档中生成一条水平分割线，表示文本中主题的变化（例如话题或场景的改变）。一般就是一条水平的直线。例如：

- -
<p>原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。</p>
-<hr>
-<p>却说那妖精，脱命升空。原来行者那一棒不曾打杀妖精，妖精出神去了。他在那云端里，咬牙切齿，暗恨行者道：“几年只闻得讲他手段，今日果然话不虚传。那唐僧已此不认得我，将要吃饭。若低头闻一闻儿，我就一把捞住，却不是我的人了。不期被他走来，弄破我这勾当，又几乎被他打了一棒。若饶了这个和尚，诚然是劳而无功也。我还下去戏他一戏。”</p>
- -

将渲染成：

- -

原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。

- -
-

却说那妖精，脱命升空。原来行者那一棒不曾打杀妖精，妖精出神去了。他在那云端里，咬牙切齿，暗恨行者道：“几年只闻得讲他手段，今日果然话不虚传。那唐僧已此不认得我，将要吃饭。若低头闻一闻儿，我就一把捞住，却不是我的人了。不期被他走来，弄破我这勾当，又几乎被他打了一棒。若饶了这个和尚，诚然是劳而无功也。我还下去戏他一戏。”

- -

规划一个简单的网站

- -

在完成页面内容的规划后，一般应按部就班地规划整个网站的内容，要可能带给用户最好的体验，需要哪些页面、如何排列组合这些页面、如何互相链接等问题不可忽略。这些工作称为{{glossary("Information architecture", "信息架构")}}。在大型网站中，大多数规划工作都可以归结于此，而对于一个只有几个页面的简单网站，规划设计过程可以更简单，更有趣！

- -
    -
  1. 时刻记住，大多数（不是全部）页面会使用一些相同的元素，例如导航菜单以及页脚内容。若网站为商业站点，不妨在所有页面的页脚都加上联系方式。请记录这些对所有页面都通用的内容：所有页面共有的内容，包括：站点标题、Logo、联系方式、版权声明、语言等信息。
    2. -
  2. 接下来，可为页面结构绘制草图（这里与前文那个站点页面的截图类似）。记录每一块的作用：简单的页面布局示意图，有页眉、页脚、主内容、侧边栏。
    3. -
  3. 下面，对于期望添加进站点的所有其它（通用内容以外的）内容展开头脑风暴，直接罗列出来。把假日旅行站点的所有功能罗列到一个列表中
    4. -
  4. 下一步，试着对这些内容进行分组，这样可以让你了解哪些内容可以放在同一个页面。这种做法和 {{glossary("Card sorting", "卡片分类法")}} 非常相似。假日网站的页面应分5类：搜索、特别提供、具体国家信息、搜索结果、购物。
    5. -
  5. 接下来，试着绘制一个站点地图的草图，使用一个气泡代表网站的一个页面，并绘制连线来表示页面间的一般工作流。主页面一般置于中心，且链接到其他大多数页面；小型网站的大多数页面都可以从主页的导航栏中链接跳转。也可记录下内容的显示方式。
    6. -
- -

主动学习：创建站点地图

- -

自己创造一个网站（什么网站呢？）并尝试执行上述步骤。

- -
-

注：记得保存你的杰作，今后可能会用到哦。

-
- -

小结

- -

现在你应该对如何构建网页/站点有了更好的理解。下一节我们将学习如何调试 HTML。

- -

另请参阅

- - - -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

- -

本章目录

- - diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html new file mode 100644 index 0000000000..c66ca6499e --- /dev/null +++ b/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -0,0 +1,254 @@ +--- +title: 从对象到iframe - 其他嵌入技术 +slug: Learn/HTML/Multimedia_and_embedding/其他嵌入技术 +translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
+ +

到目前为止，您应该掌握了将图像、视频和音频嵌入到网页上的诀窍了。此刻，让我们继续深入学习，来看一些能让您在网页中嵌入各种内容类型的元素： {{htmlelement("iframe")}}, {{htmlelement("embed")}} 和{{htmlelement("object")}} 元素。<iframe>用于嵌入其他网页，另外两个元素则允许您嵌入PDF，SVG，甚至Flash — 一种正在被淘汰的技术，但您仍然会时不时的看到它。

+ + + + + + + + + + + + +
预备知识：基本的计算机知识，安装基础软件，文件处理 的基本知识，熟悉HTML基础知识（阅读 开始学习 HTML）以及本模块中以前的文章。
学习目标：要了解如何使用<object>、<embed>以及<iframe>在网页中嵌入部件，例如Flash电影或其他网页。
+ +

嵌入的简史

+ +

很久以前，很流行在网络上使用框架创建网站 — 网站的一小部分存储于单独的HTML页面中。这些被嵌入在一个称为框架集的主文档中，它允许您指定每个框架能够填充在屏幕上的区域，非常像调整表格的列和行的大小。这些做法在90年代中期至90年代后期被认为是比较酷的，有证据表明，将网页分解成较小的块，这样有利于下载速度 —尤其是在那时网络连接速度太慢的情况下更为明显。然而，这些技术有很多问题，随着网络速度越来越快，这些技术带来的问题远超过它们带来的积极因素，所以你再也看不到它们被使用了。

+ +

一小段时间之后（20世纪90年代末，21世纪初），插件技术变得非常受欢迎，例如Java Applet和Flash — 这些技术允许网络开发者将丰富的内容嵌入到网页中，例如视频和动画等，这些内容不能通过HTML单独实现。嵌入这些技术是通过诸如<object>和较少使用<embed>的元素来实现的，当时它们非常有用。由于许多问题，包括可访问性、安全性、文件大小等，它们已经过时了; 如今，大多数移动设备不再支持这些插件，桌面端也逐渐不再支持。

+ +

最后，<iframe>元素出现了（连同其他嵌入内容的方式，如<canvas>，<video>等），它提供了一种将整个web页嵌入到另一个网页的方法，看起来就像那个web页是另一个网页的一个{{htmlelement("img")}}或其他元素一样。{{htmlelement("iframe")}}现在经常被使用。

+ +

了解完历史之后，让我们继续往下看以了解如何使用它们。

+ +

自主学习：嵌入类型的使用

+ +

在这篇文章中，我们将直接进入自主学习部分，让你立即体会到嵌入技术的实用性。大家都非常熟悉Youtube，但很多人不了解它所提供的一些分享功能。让我们来看看Youtube如何让我们通过<iframe>在页面中嵌入喜欢的视频。

+ +
    +
  1. 首先，去Youtube找一个喜欢的视频。
    2. +
  2. 在视频下方，您会看到一个共享按钮 - 点击查看共享选项。
    3. +
  3. 选择“ 嵌入”选项卡，您将得到一些<iframe>代码 - 复制一下。
    4. +
  4. 粘贴到下面的输入框里，看看输出结果是什么。
    5. +
+ +

此外，您还可以试试在示例中嵌入Google地图：

+ +
    +
  1. 去Google地图找一个喜欢的地图。
    2. +
  2. 点击UI左上角的“汉堡菜单”（三条水平线）。
    3. +
  3. 选择共享或嵌入地图选项。
    4. +
  4. 选择嵌入地图选项，这将给你一些<iframe>代码 - 复制一下。
    5. +
  5. 粘贴到下面的输入框，看看输出结果是什么。
    6. +
+ +

如果你犯了某些错误，你可以点击Reset按钮以重置编辑器。如果你确实被卡住了， 按下Show solution按钮以借鉴答案。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}

+ +

Iframe详解

+ +

是不是很简单又有趣呢？<iframe>元素旨在允许您将其他Web文档嵌入到当前文档中。这很适合将第三方内容嵌入您的网站，您可能无法直接控制，也不希望实现自己的版本 - 例如来自在线视频提供商的视频，Disqus等评论系统，在线地图提供商，广告横幅等。您通过本课程使用的实时可编辑示例就是使用<iframe> 实现的。

+ +

我们会在后面提到，关于<iframe>有一些严重的{{anch("安全隐患")}}需要考虑，但这并不意味着你不应该在你的网站上使用它们 — 它只需要一些知识和仔细地思考。让我们更详细地探索这些代码。假设您想在其中一个网页上加入MDN词汇表，您可以尝试以下方式：

+ +
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
+        width="100%" height="500" frameborder="0"
+        allowfullscreen sandbox>
+  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
+    Fallback link for browsers that don't support iframes
+  </a> </p>
+</iframe>
+
+ +

此示例包括使用以下所需的<iframe>基本要素：

+ +
+
allowfullscreen
+
如果设置，<iframe>则可以通过全屏API设置为全屏模式（稍微超出本文的范围）。
+
frameborder
+
如果设置为1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0删除边框。不推荐这样设置，因为在CSS中可以更好地实现相同的效果。border: none;
+
src
+
该属性与<video>/<img>一样包含指向要嵌入文档的URL路径。
+
width 和 height
+
这些属性指定您想要的iframe的宽度和高度。
+
+ +
+
备选内容
+
与<video>等其他类似元素相同，您可以在<iframe></iframe>标签之间包含备选内容，如果浏览器不支持<iframe>，将会显示备选内容，这种情况下，我们已经添加了一个到该页面的链接。现在您几乎不可能遇到任何不支持<iframe>的浏览器。
+
sandbox
+
该属性需要在已经支持其他<iframe>功能（例如IE 10及更高版本）但稍微更现代的浏览器上才能工作，该属性可以提高安全性设置; 我们将在下一节中更加详细地谈到。
+
+ +
+

注意：为了提高速度，在主内容完成加载后，使用JavaScript设置iframe的src属性是个好主意。这使您的页面可以更快地被使用，并减少您的官方页面加载时间（重要的SEO指标）。

+
+ +

安全隐患

+ +

以上我们提到了安全问题 - 现在我们来详细介绍一下这一点。我们并不期望您第一次就能完全理解所有内容; 我们只想让您意识到这一问题，在您更有经验并开始考虑在您的实验和工作中使用<iframe>时为你提供参考。此外，没有必要害怕和不使用<iframe>—你只需要谨慎一点。继续看下去吧...

+ +

浏览器制造商和Web开发人员了解到网络上的坏人（通常被称为黑客，或更准确地说是破解者），如果他们试图恶意修改您的网页或欺骗人们进行不想做的事情时常把iframe作为共同的攻击目标（官方术语：攻击向量），例如显示用户名和密码等敏感信息。因此，规范工程师和浏览器开发人员已经开发了各种安全机制，使<iframe>更加安全，这有些最佳方案值得我们考虑 - 我们将在下面介绍其中的一些。

+ +
+

单击劫持是一种常见的iframe攻击，黑客将隐藏的iframe嵌入到您的文档中（或将您的文档嵌入到他们自己的恶意网站），并使用它来捕获用户的交互。这是误导用户或窃取敏感数据的常见方式。

+
+ +

一个快速的例子 — 尝试在浏览器中加载上面的例子 - 你也可以在Github上找到它（参见源代码）。你将不会看到任何内容，但如果你点击浏览器开发者工具中的控制台，你会看到一条消息，告诉你为什么没有显示内容。在Firefox中，您会被告知：“X-Frame-Options拒绝加载https://developer.mozilla.org/en-US/docs/Glossary”。这是因为构建MDN的开发人员已经在网站页面的服务器上设置了一个不允许被嵌入到<iframe>的设置（请参阅配置CSP指令）这是有必要的 — 整个MDN页面被嵌入在其他页面中没有多大意义，除非您想要将其嵌入到您的网站上并将其声称为自己的内容，或尝试通过单击劫持来窃取数据，这都是非常糟糕的事情。此外，如果每个人都这样做，所有额外的带宽将花费Mozilla很多资金。

+ +

只有在必要时嵌入

+ +

有时嵌入第三方内容（例如YouTube视频和地图）是有意义的，但如果您只在完全需要时嵌入第三方内容，您可以省去很多麻烦。网络安全的一个很好的经验法则是“你怎么谨慎都不为过，如果你决定要做这件事，多检查一遍；如果是别人做的，在被证明是安全的之前，都假设这是危险的。”

+ +
+

除了安全问题，你还应该意识到知识产权问题。无论在线内容还是离线内容，绝大部分内容都是有版权的，甚至是一些你没想到有版权的内容（例如，Wikimedia Commons上的大多数图片）。不要在网页上展示一些不属于你的内容，除非你是所有者或所有者给了你明确的、书面的许可。对于侵犯版权的惩罚是严厉的。再说一次，你再小心也不为过。

+ +

如果内容获得许可，你必须遵守许可条款。例如，MDN上的内容是在CC-BY-SA下许可的，这意味着，如果你要引用我们的内容，就必须用适当的方式注明来源，即使你对内容做了实质性的修改。

+
+ +

使用 HTTPS

+ +

HTTPS是HTTP的加密版本。您应该尽可能使用HTTPS为您的网站提供服务：

+ +
    +
  1. HTTPS减少了远程内容在传输过程中被篡改的机会，
    2. +
  2. HTTPS防止嵌入式内容访问您的父文档中的内容，反之亦然。
    3. +
+ +

使用HTTPS需要一个安全证书，这可能是昂贵的（尽管Let's Encrypt让这件事变得更容易），如果你没有，可以使用HTTP来为你的父文档提供服务。但是，由于HTTPS的第二个好处，无论成本如何，您绝对不能使用HTTP嵌入第三方内容（在最好的情况下，您的用户的Web浏览器会给他们一个可怕的警告）。所有有声望的公司，例如Google Maps或Youtube，当您嵌入内容时，<iframe>将通过HTTPS提供 - 查看<iframe> src属性内的URL。

+ +
+

注意：Github页面允许默认情况下通过HTTPS提供内容，因此对托管内容很有用。如果您正在使用不同的托管，并且不确定，请向您的托管服务商询问。

+
+ +

始终使用sandbox属性

+ +

想尽可能减少攻击者在你的网站上做坏事的机会，那么你应该给嵌入的内容仅能完成自己工作的权限。当然，这也适用于你自己的内容。一个允许包含在其里的代码以适当的方式执行或者用于测试，但不能对其他代码库（意外或恶意）造成任何损害的容器称为沙盒。

+ +

未沙盒化(Unsandboxed)内容可以做得太多（执行JavaScript，提交表单，弹出窗口等）默认情况下，您应该使用没有参数的sandbox属性来强制执行所有可用的限制，如我们前面的示例所示。

+ +

如果绝对需要，您可以逐个添加权限（sandbox=""属性值内） - 请参阅sandbox所有可用选项的参考条目。其中重要的一点是，你永远不应该同时添加allow-scripts和allow-same-origin到你的sandbox属性中-在这种情况下，嵌入式内容可以绕过阻止站点执行脚本的同源安全策略，并使用JavaScript完全关闭沙盒。

+ +
+

注意：如果攻击者可以欺骗人们直接访问恶意内容（在iframe之外），则沙盒无法提供保护。如果某些内容可能是恶意的（例如，用户生成的内容），请保证其是从不同的域向您的主站点提供的。

+
+ +

配置CSP指令

+ +

CSP代表内容安全策略，它提供一组HTTP标头（由web服务器发送时与元数据一起发送的元数据），旨在提高HTML文档的安全性。在<iframe>s安全性方面，您可以将服务器配置为发送适当的X-Frame-Options  标题。这样做可以防止其他网站在其网页中嵌入您的内容（这将导致点击和一系列其他攻击），正如我们之前看到的那样，MDN开发人员已经做了这些工作。

+ +
+

注意：您可以阅读Frederik Braun的帖子在X-Frame-Options安全性头上来获取有关此主题的更多背景信息。显然，在这篇文章中已经解释得很清楚了。

+
+ +

<embed>和<object>元素

+ +

<embed>和<object>元素的功能不同于<iframe>—— 这些元素是用来嵌入多种类型的外部内容的通用嵌入工具，其中包括像Java小程序和Flash，PDF（可在浏览器中显示为一个PDF插件）这样的插件技术，甚至像视频，SVG和图像的内容！

+ +
+

注意：插件是一种对浏览器原生无法读取的内容提供访问权限的软件。

+
+ +

然而，您不太可能使用这些元素 - Applet几年来一直没有被使用；由于许多原因，Flash不再受欢迎（见下面的插件案例）；PDF更倾向于被链接而不是被嵌入；其他内容，如图像和视频都有更优秀、更容易元素来处理。插件和这些嵌入方法真的是一种传统技术，我们提及它们主要是为了以防您在某些情况下遇到问题，比如内部网或企业项目等。

+ +

如果您发现自己需要嵌入插件内容，那么您至少需要一些这样的信息：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{htmlelement("embed")}}{{htmlelement("object")}}
嵌入内容的网址{{htmlattrxref('src','embed')}}{{htmlattrxref('data','object')}}
嵌入内容的准确媒体类型{{htmlattrxref('type','embed')}}{{htmlattrxref('type','object')}}
由插件控制的框的高度和宽度（以CSS像素为单位）{{htmlattrxref('height','embed')}}
+ {{htmlattrxref('width','embed')}}		{{htmlattrxref('height','object')}}
+ {{htmlattrxref('width','object')}}
名称和值，将插件作为参数提供具有这些名称和值的ad hoc属性单标签<param>元素，包含在内<object>
独立的HTML内容作为不可用资源的回退不支持（<noembed>已过时）包含在元素<object>之后<param>
+ +
+

注意：<object>需要data属性，type属性或两者。如果您同时使用这两个，您也可以使用该typemustmatch属性（仅在Firefox中实现，在本文中）。typemustmatch保持嵌入文件不运行，除非type属性提供正确的媒体类型。typemustmatch因此，当您嵌入来自不同来源的内容（可以防止攻击者通过插件运行任意脚本）时，可以赋予重要的安全优势。

+
+ +

下面是一个使用该<embed>元素嵌入Flash影片的示例（请参阅此处的Github，并检查源代码）：

+ +
<embed src="whoosh.swf" quality="medium"
+       bgcolor="#ffffff" width="550" height="400"
+       name="whoosh" align="middle" allowScriptAccess="sameDomain"
+       allowFullScreen="false" type="application/x-shockwave-flash"
+       pluginspage="http://www.macromedia.com/go/getflashplayer">
+ +

很可怕，不是吗 。Adobe Flash工具生成的HTML往往更糟糕，使用嵌入<object>元素的<embed>元素来覆盖所有的基础（查看一个例子）。甚至有一段时间，Flash被成功地用作HTML5视频的备用内容，但是这种情况越来越被认为是不必要的。

+ +

现在来看一个<object>将PDF嵌入一个页面的例子（参见实例和源代码）：

+ +
<object data="mypdf.pdf" type="application/pdf"
+        width="800" height="1200" typemustmatch>
+  <p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file.</a></p>
+</object>
+ +

PDF是纸与数据之间重要的阶梯，但它们在可访问性上有些问题，并且可能难以在小屏幕上阅读。它们在一些圈子中仍然受欢迎，我们最好是用链接指向它们，而不是将其嵌入到网页中，以便它们可以在单独的页面上被下载或被阅读。

+ +

针对插件的情况

+ +

以前，插件在网络上是不可或缺的。还记得你必须安装Adobe Flash Player才能在线观看电影的日子吗？并且你还会不断地收到关于更新Flash Player和Java运行环境的烦人警报。Web技术已经变得更加强大，那些日子已经结束了。对于大多数应用程序，现在是停止依赖插件传播内容，开始利用Web技术的时候了。

+ + + +

那你该怎么办？如果您需要交互性，HTML和JavaScript可以轻松地为您完成工作，而不需要Java小程序或过时的ActiveX / BHO技术。您可以使用HTML5视频来满足媒体需求，矢量图形SVG，以及复杂图像和动画画布。彼得·埃尔斯特（Peter Elst）几年前已经提到，对于工作Adobe Flash极少是正确的工具，除了专门的游戏和商业应用。对于ActiveX，即使微软的Edge浏览器也不再支持。

+ +

总结

+ +

在Web文档中嵌入其他内容这一主题可以很快变得非常复杂，因此在本文中，我们尝试以一种简单而熟悉的方式来介绍它，这种介绍方式将立即显示出相关性，同时仍暗示了一些涉及更高级功能的技术。刚开始，除了嵌入第三方内容（如地图和视频），您不太可能在网页上使用到嵌入技术。当你变得更有经验时，你可能会开始为他们找到更多的用途。

+ +

除了我们在这里讨论的那些外，还有许多涉及嵌入外部内容的技术。我们看到了一些在前面的文章中出现的，如<video>，<audio>和<img>，但还有其它的有待关注，如  <canvas>用于JavaScript生成的2D和3D图形，<svg>用于嵌入矢量图形。我们将在此学习模块的下一篇文章中学习SVG。

+ +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}

diff --git "a/files/zh-cn/learn/html/multimedia_and_embedding/\345\205\266\344\273\226\345\265\214\345\205\245\346\212\200\346\234\257/index.html" "b/files/zh-cn/learn/html/multimedia_and_embedding/\345\205\266\344\273\226\345\265\214\345\205\245\346\212\200\346\234\257/index.html" deleted file mode 100644 index c66ca6499e..0000000000 --- "a/files/zh-cn/learn/html/multimedia_and_embedding/\345\205\266\344\273\226\345\265\214\345\205\245\346\212\200\346\234\257/index.html" +++ /dev/null @@ -1,254 +0,0 @@ ---- -title: 从对象到iframe - 其他嵌入技术 -slug: Learn/HTML/Multimedia_and_embedding/其他嵌入技术 -translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
- -

到目前为止，您应该掌握了将图像、视频和音频嵌入到网页上的诀窍了。此刻，让我们继续深入学习，来看一些能让您在网页中嵌入各种内容类型的元素： {{htmlelement("iframe")}}, {{htmlelement("embed")}} 和{{htmlelement("object")}} 元素。<iframe>用于嵌入其他网页，另外两个元素则允许您嵌入PDF，SVG，甚至Flash — 一种正在被淘汰的技术，但您仍然会时不时的看到它。

- - - - - - - - - - - - -
预备知识：基本的计算机知识，安装基础软件，文件处理 的基本知识，熟悉HTML基础知识（阅读 开始学习 HTML）以及本模块中以前的文章。
学习目标：要了解如何使用<object>、<embed>以及<iframe>在网页中嵌入部件，例如Flash电影或其他网页。
- -

嵌入的简史

- -

很久以前，很流行在网络上使用框架创建网站 — 网站的一小部分存储于单独的HTML页面中。这些被嵌入在一个称为框架集的主文档中，它允许您指定每个框架能够填充在屏幕上的区域，非常像调整表格的列和行的大小。这些做法在90年代中期至90年代后期被认为是比较酷的，有证据表明，将网页分解成较小的块，这样有利于下载速度 —尤其是在那时网络连接速度太慢的情况下更为明显。然而，这些技术有很多问题，随着网络速度越来越快，这些技术带来的问题远超过它们带来的积极因素，所以你再也看不到它们被使用了。

- -

一小段时间之后（20世纪90年代末，21世纪初），插件技术变得非常受欢迎，例如Java Applet和Flash — 这些技术允许网络开发者将丰富的内容嵌入到网页中，例如视频和动画等，这些内容不能通过HTML单独实现。嵌入这些技术是通过诸如<object>和较少使用<embed>的元素来实现的，当时它们非常有用。由于许多问题，包括可访问性、安全性、文件大小等，它们已经过时了; 如今，大多数移动设备不再支持这些插件，桌面端也逐渐不再支持。

- -

最后，<iframe>元素出现了（连同其他嵌入内容的方式，如<canvas>，<video>等），它提供了一种将整个web页嵌入到另一个网页的方法，看起来就像那个web页是另一个网页的一个{{htmlelement("img")}}或其他元素一样。{{htmlelement("iframe")}}现在经常被使用。

- -

了解完历史之后，让我们继续往下看以了解如何使用它们。

- -

自主学习：嵌入类型的使用

- -

在这篇文章中，我们将直接进入自主学习部分，让你立即体会到嵌入技术的实用性。大家都非常熟悉Youtube，但很多人不了解它所提供的一些分享功能。让我们来看看Youtube如何让我们通过<iframe>在页面中嵌入喜欢的视频。

- -
    -
  1. 首先，去Youtube找一个喜欢的视频。
    2. -
  2. 在视频下方，您会看到一个共享按钮 - 点击查看共享选项。
    3. -
  3. 选择“ 嵌入”选项卡，您将得到一些<iframe>代码 - 复制一下。
    4. -
  4. 粘贴到下面的输入框里，看看输出结果是什么。
    5. -
- -

此外，您还可以试试在示例中嵌入Google地图：

- -
    -
  1. 去Google地图找一个喜欢的地图。
    2. -
  2. 点击UI左上角的“汉堡菜单”（三条水平线）。
    3. -
  3. 选择共享或嵌入地图选项。
    4. -
  4. 选择嵌入地图选项，这将给你一些<iframe>代码 - 复制一下。
    5. -
  5. 粘贴到下面的输入框，看看输出结果是什么。
    6. -
- -

如果你犯了某些错误，你可以点击Reset按钮以重置编辑器。如果你确实被卡住了， 按下Show solution按钮以借鉴答案。

- - - -

{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}

- -

Iframe详解

- -

是不是很简单又有趣呢？<iframe>元素旨在允许您将其他Web文档嵌入到当前文档中。这很适合将第三方内容嵌入您的网站，您可能无法直接控制，也不希望实现自己的版本 - 例如来自在线视频提供商的视频，Disqus等评论系统，在线地图提供商，广告横幅等。您通过本课程使用的实时可编辑示例就是使用<iframe> 实现的。

- -

我们会在后面提到，关于<iframe>有一些严重的{{anch("安全隐患")}}需要考虑，但这并不意味着你不应该在你的网站上使用它们 — 它只需要一些知识和仔细地思考。让我们更详细地探索这些代码。假设您想在其中一个网页上加入MDN词汇表，您可以尝试以下方式：

- -
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
-        width="100%" height="500" frameborder="0"
-        allowfullscreen sandbox>
-  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
-    Fallback link for browsers that don't support iframes
-  </a> </p>
-</iframe>
-
- -

此示例包括使用以下所需的<iframe>基本要素：

- -
-
allowfullscreen
-
如果设置，<iframe>则可以通过全屏API设置为全屏模式（稍微超出本文的范围）。
-
frameborder
-
如果设置为1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0删除边框。不推荐这样设置，因为在CSS中可以更好地实现相同的效果。border: none;
-
src
-
该属性与<video>/<img>一样包含指向要嵌入文档的URL路径。
-
width 和 height
-
这些属性指定您想要的iframe的宽度和高度。
-
- -
-
备选内容
-
与<video>等其他类似元素相同，您可以在<iframe></iframe>标签之间包含备选内容，如果浏览器不支持<iframe>，将会显示备选内容，这种情况下，我们已经添加了一个到该页面的链接。现在您几乎不可能遇到任何不支持<iframe>的浏览器。
-
sandbox
-
该属性需要在已经支持其他<iframe>功能（例如IE 10及更高版本）但稍微更现代的浏览器上才能工作，该属性可以提高安全性设置; 我们将在下一节中更加详细地谈到。
-
- -
-

注意：为了提高速度，在主内容完成加载后，使用JavaScript设置iframe的src属性是个好主意。这使您的页面可以更快地被使用，并减少您的官方页面加载时间（重要的SEO指标）。

-
- -

安全隐患

- -

以上我们提到了安全问题 - 现在我们来详细介绍一下这一点。我们并不期望您第一次就能完全理解所有内容; 我们只想让您意识到这一问题，在您更有经验并开始考虑在您的实验和工作中使用<iframe>时为你提供参考。此外，没有必要害怕和不使用<iframe>—你只需要谨慎一点。继续看下去吧...

- -

浏览器制造商和Web开发人员了解到网络上的坏人（通常被称为黑客，或更准确地说是破解者），如果他们试图恶意修改您的网页或欺骗人们进行不想做的事情时常把iframe作为共同的攻击目标（官方术语：攻击向量），例如显示用户名和密码等敏感信息。因此，规范工程师和浏览器开发人员已经开发了各种安全机制，使<iframe>更加安全，这有些最佳方案值得我们考虑 - 我们将在下面介绍其中的一些。

- -
-

单击劫持是一种常见的iframe攻击，黑客将隐藏的iframe嵌入到您的文档中（或将您的文档嵌入到他们自己的恶意网站），并使用它来捕获用户的交互。这是误导用户或窃取敏感数据的常见方式。

-
- -

一个快速的例子 — 尝试在浏览器中加载上面的例子 - 你也可以在Github上找到它（参见源代码）。你将不会看到任何内容，但如果你点击浏览器开发者工具中的控制台，你会看到一条消息，告诉你为什么没有显示内容。在Firefox中，您会被告知：“X-Frame-Options拒绝加载https://developer.mozilla.org/en-US/docs/Glossary”。这是因为构建MDN的开发人员已经在网站页面的服务器上设置了一个不允许被嵌入到<iframe>的设置（请参阅配置CSP指令）这是有必要的 — 整个MDN页面被嵌入在其他页面中没有多大意义，除非您想要将其嵌入到您的网站上并将其声称为自己的内容，或尝试通过单击劫持来窃取数据，这都是非常糟糕的事情。此外，如果每个人都这样做，所有额外的带宽将花费Mozilla很多资金。

- -

只有在必要时嵌入

- -

有时嵌入第三方内容（例如YouTube视频和地图）是有意义的，但如果您只在完全需要时嵌入第三方内容，您可以省去很多麻烦。网络安全的一个很好的经验法则是“你怎么谨慎都不为过，如果你决定要做这件事，多检查一遍；如果是别人做的，在被证明是安全的之前，都假设这是危险的。”

- -
-

除了安全问题，你还应该意识到知识产权问题。无论在线内容还是离线内容，绝大部分内容都是有版权的，甚至是一些你没想到有版权的内容（例如，Wikimedia Commons上的大多数图片）。不要在网页上展示一些不属于你的内容，除非你是所有者或所有者给了你明确的、书面的许可。对于侵犯版权的惩罚是严厉的。再说一次，你再小心也不为过。

- -

如果内容获得许可，你必须遵守许可条款。例如，MDN上的内容是在CC-BY-SA下许可的，这意味着，如果你要引用我们的内容，就必须用适当的方式注明来源，即使你对内容做了实质性的修改。

-
- -

使用 HTTPS

- -

HTTPS是HTTP的加密版本。您应该尽可能使用HTTPS为您的网站提供服务：

- -
    -
  1. HTTPS减少了远程内容在传输过程中被篡改的机会，
    2. -
  2. HTTPS防止嵌入式内容访问您的父文档中的内容，反之亦然。
    3. -
- -

使用HTTPS需要一个安全证书，这可能是昂贵的（尽管Let's Encrypt让这件事变得更容易），如果你没有，可以使用HTTP来为你的父文档提供服务。但是，由于HTTPS的第二个好处，无论成本如何，您绝对不能使用HTTP嵌入第三方内容（在最好的情况下，您的用户的Web浏览器会给他们一个可怕的警告）。所有有声望的公司，例如Google Maps或Youtube，当您嵌入内容时，<iframe>将通过HTTPS提供 - 查看<iframe> src属性内的URL。

- -
-

注意：Github页面允许默认情况下通过HTTPS提供内容，因此对托管内容很有用。如果您正在使用不同的托管，并且不确定，请向您的托管服务商询问。

-
- -

始终使用sandbox属性

- -

想尽可能减少攻击者在你的网站上做坏事的机会，那么你应该给嵌入的内容仅能完成自己工作的权限。当然，这也适用于你自己的内容。一个允许包含在其里的代码以适当的方式执行或者用于测试，但不能对其他代码库（意外或恶意）造成任何损害的容器称为沙盒。

- -

未沙盒化(Unsandboxed)内容可以做得太多（执行JavaScript，提交表单，弹出窗口等）默认情况下，您应该使用没有参数的sandbox属性来强制执行所有可用的限制，如我们前面的示例所示。

- -

如果绝对需要，您可以逐个添加权限（sandbox=""属性值内） - 请参阅sandbox所有可用选项的参考条目。其中重要的一点是，你永远不应该同时添加allow-scripts和allow-same-origin到你的sandbox属性中-在这种情况下，嵌入式内容可以绕过阻止站点执行脚本的同源安全策略，并使用JavaScript完全关闭沙盒。

- -
-

注意：如果攻击者可以欺骗人们直接访问恶意内容（在iframe之外），则沙盒无法提供保护。如果某些内容可能是恶意的（例如，用户生成的内容），请保证其是从不同的域向您的主站点提供的。

-
- -

配置CSP指令

- -

CSP代表内容安全策略，它提供一组HTTP标头（由web服务器发送时与元数据一起发送的元数据），旨在提高HTML文档的安全性。在<iframe>s安全性方面，您可以将服务器配置为发送适当的X-Frame-Options  标题。这样做可以防止其他网站在其网页中嵌入您的内容（这将导致点击和一系列其他攻击），正如我们之前看到的那样，MDN开发人员已经做了这些工作。

- -
-

注意：您可以阅读Frederik Braun的帖子在X-Frame-Options安全性头上来获取有关此主题的更多背景信息。显然，在这篇文章中已经解释得很清楚了。

-
- -

<embed>和<object>元素

- -

<embed>和<object>元素的功能不同于<iframe>—— 这些元素是用来嵌入多种类型的外部内容的通用嵌入工具，其中包括像Java小程序和Flash，PDF（可在浏览器中显示为一个PDF插件）这样的插件技术，甚至像视频，SVG和图像的内容！

- -
-

注意：插件是一种对浏览器原生无法读取的内容提供访问权限的软件。

-
- -

然而，您不太可能使用这些元素 - Applet几年来一直没有被使用；由于许多原因，Flash不再受欢迎（见下面的插件案例）；PDF更倾向于被链接而不是被嵌入；其他内容，如图像和视频都有更优秀、更容易元素来处理。插件和这些嵌入方法真的是一种传统技术，我们提及它们主要是为了以防您在某些情况下遇到问题，比如内部网或企业项目等。

- -

如果您发现自己需要嵌入插件内容，那么您至少需要一些这样的信息：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{htmlelement("embed")}}{{htmlelement("object")}}
嵌入内容的网址{{htmlattrxref('src','embed')}}{{htmlattrxref('data','object')}}
嵌入内容的准确媒体类型{{htmlattrxref('type','embed')}}{{htmlattrxref('type','object')}}
由插件控制的框的高度和宽度（以CSS像素为单位）{{htmlattrxref('height','embed')}}
- {{htmlattrxref('width','embed')}}		{{htmlattrxref('height','object')}}
- {{htmlattrxref('width','object')}}
名称和值，将插件作为参数提供具有这些名称和值的ad hoc属性单标签<param>元素，包含在内<object>
独立的HTML内容作为不可用资源的回退不支持（<noembed>已过时）包含在元素<object>之后<param>
- -
-

注意：<object>需要data属性，type属性或两者。如果您同时使用这两个，您也可以使用该typemustmatch属性（仅在Firefox中实现，在本文中）。typemustmatch保持嵌入文件不运行，除非type属性提供正确的媒体类型。typemustmatch因此，当您嵌入来自不同来源的内容（可以防止攻击者通过插件运行任意脚本）时，可以赋予重要的安全优势。

-
- -

下面是一个使用该<embed>元素嵌入Flash影片的示例（请参阅此处的Github，并检查源代码）：

- -
<embed src="whoosh.swf" quality="medium"
-       bgcolor="#ffffff" width="550" height="400"
-       name="whoosh" align="middle" allowScriptAccess="sameDomain"
-       allowFullScreen="false" type="application/x-shockwave-flash"
-       pluginspage="http://www.macromedia.com/go/getflashplayer">
- -

很可怕，不是吗 。Adobe Flash工具生成的HTML往往更糟糕，使用嵌入<object>元素的<embed>元素来覆盖所有的基础（查看一个例子）。甚至有一段时间，Flash被成功地用作HTML5视频的备用内容，但是这种情况越来越被认为是不必要的。

- -

现在来看一个<object>将PDF嵌入一个页面的例子（参见实例和源代码）：

- -
<object data="mypdf.pdf" type="application/pdf"
-        width="800" height="1200" typemustmatch>
-  <p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file.</a></p>
-</object>
- -

PDF是纸与数据之间重要的阶梯，但它们在可访问性上有些问题，并且可能难以在小屏幕上阅读。它们在一些圈子中仍然受欢迎，我们最好是用链接指向它们，而不是将其嵌入到网页中，以便它们可以在单独的页面上被下载或被阅读。

- -

针对插件的情况

- -

以前，插件在网络上是不可或缺的。还记得你必须安装Adobe Flash Player才能在线观看电影的日子吗？并且你还会不断地收到关于更新Flash Player和Java运行环境的烦人警报。Web技术已经变得更加强大，那些日子已经结束了。对于大多数应用程序，现在是停止依赖插件传播内容，开始利用Web技术的时候了。

- - - -

那你该怎么办？如果您需要交互性，HTML和JavaScript可以轻松地为您完成工作，而不需要Java小程序或过时的ActiveX / BHO技术。您可以使用HTML5视频来满足媒体需求，矢量图形SVG，以及复杂图像和动画画布。彼得·埃尔斯特（Peter Elst）几年前已经提到，对于工作Adobe Flash极少是正确的工具，除了专门的游戏和商业应用。对于ActiveX，即使微软的Edge浏览器也不再支持。

- -

总结

- -

在Web文档中嵌入其他内容这一主题可以很快变得非常复杂，因此在本文中，我们尝试以一种简单而熟悉的方式来介绍它，这种介绍方式将立即显示出相关性，同时仍暗示了一些涉及更高级功能的技术。刚开始，除了嵌入第三方内容（如地图和视频），您不太可能在网页上使用到嵌入技术。当你变得更有经验时，你可能会开始为他们找到更多的用途。

- -

除了我们在这里讨论的那些外，还有许多涉及嵌入外部内容的技术。我们看到了一些在前面的文章中出现的，如<video>，<audio>和<img>，但还有其它的有待关注，如  <canvas>用于JavaScript生成的2D和3D图形，<svg>用于嵌入矢量图形。我们将在此学习模块的下一篇文章中学习SVG。

- -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}

diff --git a/files/zh-cn/learn/javascript/asynchronous/async_await/index.html b/files/zh-cn/learn/javascript/asynchronous/async_await/index.html new file mode 100644 index 0000000000..739ab63602 --- /dev/null +++ b/files/zh-cn/learn/javascript/asynchronous/async_await/index.html @@ -0,0 +1,379 @@ +--- +title: 'async和await:让异步编程更简单' +slug: learn/JavaScript/异步/Async_await +translation_of: Learn/JavaScript/Asynchronous/Async_await +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
+ +

async functions 和 await 关键字是最近添加到JavaScript语言里面的。它们是ECMAScript 2017 JavaScript版的一部分（参见ECMAScript Next support in Mozilla）。简单来说，它们是基基于promises的语法糖，使异步代码更易于编写和阅读。通过使用它们，异步代码看起来更像是老式同步代码，因此它们非常值得学习。本文为您提供了您需要了解的内容。

+ + + + + + + + + + + + +
先决条件:基本的计算机知识，较好理解 JavaScript 基础，以及理解一般异步代码和 promises 。
目标:理解并使用 promise
+ +

async/await 基础

+ +

在代码中使用 async / await 有两个部分。

+ +

async 关键字

+ +

首先，我们使用 async 关键字，把它放在函数声明之前，使其成为 async function。异步函数是一个知道怎样使用 await 关键字调用异步代码的函数。

+ +

尝试在浏览器的JS控制台中键入以下行：

+ +
function hello() { return "Hello" };
+hello();
+ +

该函数返回“Hello” —— 没什么特别的，对吧？

+ +

如果我们将其变成异步函数呢？请尝试以下方法：

+ +
async function hello() { return "Hello" };
+hello();
+ +

哈。现在调用该函数会返回一个 promise。这是异步函数的特征之一 —— 它保证函数的返回值为 promise。

+ +

你也可以创建一个异步函数表达式（参见 async function expression ），如下所示:

+ +
let hello = async function() { return "Hello" };
+hello();
+ +

你可以使用箭头函数：

+ +
let hello = async () => { return "Hello" };
+ +

这些都基本上是一样的。

+ +

要实际使用promise完成时返回的值，我们可以使用.then()块，因为它返回的是 promise：

+ +
hello().then((value) => console.log(value))
+ +

甚至只是简写如

+ +
hello().then(console.log)
+ +

这就像我们在上一篇文章中看到的那样。

+ +

将 async 关键字加到函数申明中，可以告诉它们返回的是 promise，而不是直接返回值。此外，它避免了同步函数为支持使用 await 带来的任何潜在开销。在函数声明为 async 时，JavaScript引擎会添加必要的处理，以优化你的程序。爽！

+ +

await关键字

+ +

当 await 关键字与异步函数一起使用时，它的真正优势就变得明显了 —— 事实上， await 只在异步函数里面才起作用。它可以放在任何异步的，基于 promise 的函数之前。它会暂停代码在该行上，直到 promise 完成，然后返回结果值。在暂停的同时，其他正在等待执行的代码就有机会执行了。

+ +

您可以在调用任何返回Promise的函数时使用 await，包括Web API函数。

+ +

这是一个简单的示例：

+ +
async function hello() {
+  return greeting = await Promise.resolve("Hello");
+};
+
+hello().then(alert);
+ +

当然，上面的示例不是很有用，但它确实展示了语法。让我们继续，看一个真实示例。

+ +

 使用 async/await 重写 promise 代码

+ +

让我们回顾一下我们在上一篇文章中简单的 fetch 示例：

+ +
fetch('coffee.jpg')
+.then(response => response.blob())
+.then(myBlob => {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e => {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});
+ +

到现在为止，你应该对 promises 及其工作方式有一个较好的理解。让我们将其转换为使用async / await看看它使事情变得简单了多少：

+ +
async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch()
+.catch(e => {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});
+ +

它使代码简单多了，更容易理解 —— 去除了到处都是 .then() 代码块！

+ +

由于 async 关键字将函数转换为 promise，您可以重构以上代码 —— 使用 promise 和 await 的混合方式，将函数的后半部分抽取到新代码块中。这样做可以更灵活：

+ +
async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  return await response.blob();
+}
+
+myFetch().then((blob) => {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+});
+ +

您可以尝试自己输入示例，或运行我们的 live example （另请参阅source code）。

+ +

它到底是如何工作的？

+ +

您会注意到我们已经将代码封装在函数中，并且我们在 function 关键字之前包含了 async 关键字。这是必要的 –– 您必须创建一个异步函数来定义一个代码块，在其中运行异步代码; await 只能在异步函数内部工作。

+ +

在myFetch()函数定义中，您可以看到代码与先前的 promise 版本非常相似，但存在一些差异。不需要附加 .then() 代码块到每个promise-based方法的结尾，你只需要在方法调用前添加 await 关键字，然后把结果赋给变量。await 关键字使JavaScript运行时暂停于此行，允许其他代码在此期间执行，直到异步函数调用返回其结果。一旦完成，您的代码将继续从下一行开始执行。例如：

+ +
let response = await fetch('coffee.jpg');
+ +

解析器会在此行上暂停，直到当服务器返回的响应变得可用时。此时 fetch() 返回的 promise 将会完成（fullfilled），返回的 response 会被赋值给 response 变量。一旦服务器返回的响应可用，解析器就会移动到下一行，从而创建一个Blob。Blob这行也调用基于异步promise的方法，因此我们也在此处使用await。当操作结果返回时，我们将它从myFetch()函数中返回。

+ +

这意味着当我们调用myFetch()函数时，它会返回一个promise，因此我们可以将.then()链接到它的末尾，在其中我们处理显示在屏幕上的blob。

+ +

你可能已经觉得“这真的很酷！”，你是对的 —— 用更少的.then()块来封装代码，同时它看起来很像同步代码，所以它非常直观。

+ +

添加错误处理

+ +

如果你想添加错误处理，你有几个选择。

+ +

您可以将同步的 try...catch 结构和 async/await 一起使用 。此示例扩展了我们上面展示的第一个版本代码：

+ +
async function myFetch() {
+  try {
+    let response = await fetch('coffee.jpg');
+    let myBlob = await response.blob();
+
+    let objectURL = URL.createObjectURL(myBlob);
+    let image = document.createElement('img');
+    image.src = objectURL;
+    document.body.appendChild(image);
+  } catch(e) {
+    console.log(e);
+  }
+}
+
+myFetch();
+ +

catch() {} 代码块会接收一个错误对象 e ; 我们现在可以将其记录到控制台，它将向我们提供详细的错误消息，显示错误被抛出的代码中的位置。

+ +

如果你想使用我们上面展示的第二个（重构）代码版本，你最好继续混合方式并将 .catch() 块链接到 .then() 调用的末尾，就像这样：

+ +
async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  return await response.blob();
+}
+
+myFetch().then((blob) => {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch((e) =>
+  console.log(e)
+);
+ +

这是因为 .catch() 块将捕获来自异步函数调用和promise链中的错误。如果您在此处使用了try/catch 代码块，则在调用 myFetch() 函数时，您仍可能会收到未处理的错误。

+ +

您可以在GitHub上找到这两个示例：

+ + + +

等待Promise.all()

+ +

async / await 建立在 promises 之上，因此它与promises提供的所有功能兼容。这包括Promise.all() –– 你完全可以通过调用 await Promise.all() 将所有结果返回到变量中，就像同步代码一样。让我们再次回到上一篇中看到的例子。在单独的选项卡中打开它，以便您可以与下面显示的新版本进行比较和对比。

+ +

将其转换为 async / await（请参阅 样例 和 源码），现在看起来像这样：

+ +
async function fetchAndDecode(url, type) {
+  let response = await fetch(url);
+
+  let content;
+
+  if(type === 'blob') {
+    content = await response.blob();
+  } else if(type === 'text') {
+    content = await response.text();
+  }
+
+  return content;
+}
+
+async function displayContent() {
+  let coffee = fetchAndDecode('coffee.jpg', 'blob');
+  let tea = fetchAndDecode('tea.jpg', 'blob');
+  let description = fetchAndDecode('description.txt', 'text');
+
+  let values = await Promise.all([coffee, tea, description]);
+
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+}
+
+displayContent()
+.catch((e) =>
+  console.log(e)
+);
+ +

可以看到 fetchAndDecode() 函数只进行了一丁点的修改就转换成了异步函数。请看Promise.all() 行：

+ +
let values = await Promise.all([coffee, tea, description]);
+ +

在这里，通过使用await，我们能够在三个promise的结果都可用的时候，放入values数组中。这看起来非常像同步代码。我们需要将所有代码封装在一个新的异步函数displayContent() 中，尽管没有减少很多代码，但能够将大部分代码从 .then() 代码块移出，使代码得到了简化，更易读。

+ +

为了错误处理，我们在 displayContent() 调用中包含了一个 .catch() 代码块;这将处理两个函数中出现的错误。

+ +
+

注意: 也可以在异步函数中使用同步 finally 代码块代替 .finally() 异步代码块，以显示操作如何进行的最终报告——您可以在我们的 live example （查看源代码）中看到这一点。

+
+ +

async/await的缺陷

+ +

了解Async/await是非常有用的，但还有一些缺点需要考虑。

+ +

Async/await 让你的代码看起来是同步的，在某种程度上，也使得它的行为更加地同步。 await 关键字会阻塞其后的代码，直到promise完成，就像执行同步操作一样。它确实可以允许其他任务在此期间继续运行，但您自己的代码被阻塞。

+ +

这意味着您的代码可能会因为大量await的promises相继发生而变慢。每个await都会等待前一个完成，而你实际想要的是所有的这些promises同时开始处理（就像我们没有使用async/await时那样）。

+ +

有一种模式可以缓解这个问题——通过将 Promise 对象存储在变量中来同时开始它们，然后等待它们全部执行完毕。让我们看一些证明这个概念的例子。

+ +

我们有两个可用的例子 —— slow-async-await.html（参见source code）和fast-async-await.html（参见source code）。它们都以自定义promise函数开始，该函数使用setTimeout() 调用伪造异步进程：

+ +
function timeoutPromise(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      resolve("done");
+    }, interval);
+  });
+};
+ +

然后每个包含一个 timeTest() 异步函数，等待三个 timeoutPromise() 调用：

+ +
async function timeTest() {
+  ...
+}
+ +

每一个都以记录开始时间结束，查看 timeTest() promise 需要多长时间才能完成，然后记录结束时间并报告操作总共需要多长时间：

+ +
let startTime = Date.now();
+timeTest().then(() => {
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  alert("Time taken in milliseconds: " + timeTaken);
+})
+ +

timeTest() 函数在每种情况下都不同。

+ +

在slow-async-await.html示例中，timeTest() 如下所示：

+ +
async function timeTest() {
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+}
+ +

在这里，我们直接等待所有三个timeoutPromise（）调用，使每个调用3秒钟。后续的每一个都被迫等到最后一个完成 - 如果你运行第一个例子，你会看到弹出框报告的总运行时间大约为9秒。

+ +

在fast-async-await.html示例中，timeTest() 如下所示：

+ +
async function timeTest() {
+  const timeoutPromise1 = timeoutPromise(3000);
+  const timeoutPromise2 = timeoutPromise(3000);
+  const timeoutPromise3 = timeoutPromise(3000);
+
+  await timeoutPromise1;
+  await timeoutPromise2;
+  await timeoutPromise3;
+}
+ +

在这里，我们将三个Promise对象存储在变量中，这样可以同时启动它们关联的进程。

+ +

接下来，我们等待他们的结果 - 因为promise都在基本上同时开始处理，promise将同时完成;当您运行第二个示例时，您将看到弹出框报告总运行时间仅超过3秒！

+ +

您必须仔细测试您的代码，并在性能开始受损时牢记这一点。

+ +

另一个小小的不便是你必须将等待执行的promise封装在异步函数中。

+ +

Async/await 的类方法

+ +

最后值得一提的是，我们可以在类/对象方法前面添加async，以使它们返回promises，并await它们内部的promises。查看 ES class code we saw in our object-oriented JavaScript article，然后查看使用异步方法的修改版本：

+ +
class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  async greeting() {
+    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+
+let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
+ +

第一个实例方法可以使用如下：

+ +
han.greeting().then(console.log);
+ +

浏览器的支持

+ +

决定是否使用 async/await 时的一个考虑因素是支持旧浏览器。它们适用于大多数浏览器的现代版本，与promise相同; 主要的支持问题存在于Internet Explorer和Opera Mini。

+ +

如果你想使用async/await但是担心旧的浏览器支持，你可以考虑使用BabelJS库 —— 这允许你使用最新的JavaScript编写应用程序，让Babel找出用户浏览器需要的更改。在遇到不支持async/await 的浏览器时，Babel的 polyfill 可以自动提供适用于旧版浏览器的实现。

+ +

总结

+ +

async/await提供了一种很好的，简化的方法来编写更易于阅读和维护的异步代码。即使浏览器支持在撰写本文时比其他异步代码机制更受限制，但无论是现在还是将来，都值得学习和考虑使用。

+ +

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}

+ +

本章内容

+ + diff --git a/files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html b/files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html new file mode 100644 index 0000000000..276d815b85 --- /dev/null +++ b/files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html @@ -0,0 +1,523 @@ +--- +title: 选择正确的方法 +slug: learn/JavaScript/异步/Choosing_the_right_approach +translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
+ +

为了完成这个模块，我们将简要讨论之前章节谈论过编码技术和功能，看看你应该使用哪一个，并提供适当的建议和提醒。随着时间的推移，我们可能会添加到此资源中。

+ + + + + + + + + + + + +
预备条件:基本的计算机素养，对JavaScript基础知识的合理理解。
目标:能够在使用不同的异步编程技术时做出合理的选择。
+ +

异步回调

+ +

通常在旧式API中找到，涉及将函数作为参数传递给另一个函数，然后在异步操作完成时调用该函数，以便回调可以依次对结果执行某些操作。这是promise的前身;它不那么高效或灵活。仅在必要时使用。

+ + + + + + + + + + + + + + + + + + + +
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoYes (recursive callbacks)Yes (nested callbacks)No
+ +

代码示例

+ +

通过XMLHttpRequest API加载资源的示例（run it live，并查看see the source）：

+ +
function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);
+ +

缺陷

+ + + +

浏览器兼容性

+ +

非常好的一般支持，尽管API中回调的确切支持取决于特定的API。有关更具体的支持信息，请参阅您正在使用的API的参考文档。

+ +

更多信息

+ + + +

setTimeout()

+ +

setTimeout() 是一种允许您在经过任意时间后运行函数的方法

+ + + + + + + + + + + + + + + + + +
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
YesYes (recursive timeouts)Yes (nested timeouts)No
+ +

代码示例

+ +

这里浏览器将在执行匿名函数之前等待两秒钟，然后将显示警报消息（see it running live，see the source code）：

+ +
let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+ +

缺陷

+ +

您可以使用递归的setTimeout（）调用以类似于setInterval（）的方式重复运行函数，使用如下代码：

+ +
let i = 1;
+setTimeout(function run() {
+  console.log(i);
+  i++;
+
+  setTimeout(run, 100);
+}, 100);
+ +

递归setTimeout（）和setInterval（）之间存在差异：

+ + + +

当你的代码有可能比你分配的时间间隔更长时间运行时，最好使用递归的setTimeout（） ––这将使执行之间的时间间隔保持不变，无论代码执行多长时间，你不会得到错误。

+ +

浏览器兼容性

+ +

{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}

+ +

更多信息

+ + + +

setInterval()

+ +

setInterval()函数允许重复执行一个函数，并设置时间间隔。不如requestAnimationFrame()有效率，但允许您选择运行速率/帧速率。

+ + + + + + + + + + + + + + + + + +
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoYesNo (unless it is the same one)No
+ +

代码示例

+ +

以下函数创建一个新的Date()对象，使用toLocaleTimeString()从中提取时间字符串，然后在UI中显示它。然后我们使用setInterval（）每秒运行一次，创建每秒更新一次的数字时钟的效果（see this live，see the source）：

+ +
function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);
+ +

缺陷

+ + + +

浏览器兼容性

+ +

{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}

+ +

更多信息

+ + + +

requestAnimationFrame()

+ +

requestAnimationFrame()是一种允许您以给定当前浏览器/系统的最佳帧速率重复且高效地运行函数的方法。除非您需要特定的速率帧，否则您应该尽可能使用它而不要去使用setInterval()/recursive setTimeout()。

+ + + + + + + + + + + + + + + + + +
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoYesNo (unless it is the same one)No
+ +

代码示例

+ +

一个简单的动画旋转器;你可以查看example live on GitHub（参见 source code ）：

+ +
const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+
+function draw(timestamp) {
+  if(!startTime) {
+    startTime = timestamp;
+  }
+
+  let rotateCount = (timestamp - startTime) / 3;
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+
+  if(rotateCount > 359) {
+    rotateCount = 0;
+  }
+
+  rAF = requestAnimationFrame(draw);
+}
+
+draw();
+ +

缺陷

+ + + +

浏览器兼容性

+ +

{{Compat("api.Window.requestAnimationFrame")}}

+ +

更多信息

+ + + +

Promises

+ +

Promises 是一种JavaScript功能，允许您运行异步操作并等到它完全完成后再根据其结果运行另一个操作。 Promise是现代异步JavaScript的支柱。

+ + + + + + + + + + + + + + + + + +
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoNoYesSee Promise.all(), below
+ +

代码示例

+ +

以下代码从服务器获取图像并将其显示在 {{htmlelement("img")}} 元素中;（see it live also，the source code）：

+ +
fetch('coffee.jpg')
+.then(response => response.blob())
+.then(myBlob => {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e => {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});
+ +

缺陷

+ +

Promise链可能很复杂，难以解析。如果你嵌套了许多promises，你最终可能会遇到类似的麻烦来回调地狱。例如：

+ +
remotedb.allDocs({
+  include_docs: true,
+  attachments: true
+}).then(function (result) {
+  var docs = result.rows;
+  docs.forEach(function(element) {
+    localdb.put(element.doc).then(function(response) {
+      alert("Pulled doc with id " + element.doc._id + " and added to local db.");
+    }).catch(function (err) {
+      if (err.name == 'conflict') {
+        localdb.get(element.doc._id).then(function (resp) {
+          localdb.remove(resp._id, resp._rev).then(function (resp) {
+// et cetera...
+ +

最好使用promises的链功能，这样使用更平顺，更易于解析的结构：

+ +
remotedb.allDocs(...).then(function (resultOfAllDocs) {
+  return localdb.put(...);
+}).then(function (resultOfPut) {
+  return localdb.get(...);
+}).then(function (resultOfGet) {
+  return localdb.put(...);
+}).catch(function (err) {
+  console.log(err);
+});
+ +

乃至：

+ +
remotedb.allDocs(...)
+.then(resultOfAllDocs => {
+  return localdb.put(...);
+})
+.then(resultOfPut => {
+  return localdb.get(...);
+})
+.then(resultOfGet => {
+  return localdb.put(...);
+})
+.catch(err => console.log(err));
+ +

这涵盖了很多基础知识。对于更完整的论述，请参阅诺兰劳森的We have a problem with promises。

+ +

浏览器兼容性

+ +

{{Compat("javascript.builtins.Promise")}}

+ +

更多信息

+ + + +

Promise.all()

+ +

一种JavaScript功能，允许您等待多个promises完成，然后根据所有其他promises的结果运行进一步的操作。

+ + + + + + + + + + + + + + + + + +
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoNoNoYes
+ +

代码示例

+ +

以下示例从服务器获取多个资源，并使用Promise.all（）等待所有资源可用，然后显示所有这些资源––  see it live，并查看source code：

+ +
function fetchAndDecode(url, type) {
+  // Returning the top level promise, so the result of the entire chain is returned out of the function
+  return fetch(url).then(response => {
+    // Depending on what type of file is being fetched, use the relevant function to decode its contents
+    if(type === 'blob') {
+      return response.blob();
+    } else if(type === 'text') {
+      return response.text();
+    }
+  })
+  .catch(e => {
+    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
+  });
+}
+
+// Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
+let coffee = fetchAndDecode('coffee.jpg', 'blob');
+let tea = fetchAndDecode('tea.jpg', 'blob');
+let description = fetchAndDecode('description.txt', 'text');
+
+// Use Promise.all() to run code only when all three function calls have resolved
+Promise.all([coffee, tea, description]).then(values => {
+  console.log(values);
+  // Store each value returned from the promises in separate variables; create object URLs from the blobs
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  // Display the images in <img> elements
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  // Display the text in a paragraph
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+});
+ +

缺陷

+ + + +

浏览器兼容性

+ +

{{Compat("javascript.builtins.Promise.all")}}

+ +

更多信息

+ + + +

Async/await

+ +

构造在promises之上的语法糖，允许您使用更像编写同步回调代码的语法来运行异步操作。

+ + + + + + + + + + + + + + + + + +
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoNoYesYes (in combination with Promise.all())
+ +

代码示例

+ +

以下示例是我们之前看到的简单承诺示例的重构，该示例获取并显示图像，使用async / await编写（see it live，并查看source code）：

+ +
async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch();
+ +

缺陷

+ + + +

浏览器兼容性

+ +

{{Compat("javascript.statements.async_function")}}

+ +

更多信息

+ + + +

{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}

+ +

本章内容

+ + diff --git a/files/zh-cn/learn/javascript/asynchronous/concepts/index.html b/files/zh-cn/learn/javascript/asynchronous/concepts/index.html new file mode 100644 index 0000000000..6e59cda54b --- /dev/null +++ b/files/zh-cn/learn/javascript/asynchronous/concepts/index.html @@ -0,0 +1,162 @@ +--- +title: 通用异步编程概念 +slug: learn/JavaScript/异步/概念 +tags: + - JavaScript + - Promises + - Threads + - 学习 + - 异步 + - 阻塞 +translation_of: Learn/JavaScript/Asynchronous/Concepts +--- +
{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
+ +

在本文中，我们将介绍与异步编程相关的一些重要概念，以及它们在浏览器和JavaScript里的体现。在学习本系列的其他文章之前，你应该先理解这些概念。

+ + + + + + + + + + + + +
预备条件:拥有基本的计算机知识，对JavaScript原理有一定了解。
目标:理解异步编程的基本概念，以及异步编程在浏览器和JavaScript里面的表现。
+ +

异步?

+ +

通常来说，程序都是顺序执行，同一时刻只会发生一件事。如果一个函数依赖于另一个函数的结果，它只能等待那个函数结束才能继续执行，从用户的角度来说，整个程序才算运行完毕.

+ +

Mac 用户有时会经历过这种旋转的彩虹光标（常称为沙滩球），操作系统通过这个光标告诉用户：“现在运行的程序正在等待其他的某一件事情完成，才能继续运行，都这么长的时间了，你一定在担心到底发生了什么事情”。

+ +

multi-colored macos beachball busy spinner

+ +

这是令人沮丧的体验，没有充分利用计算机的计算能力 — 尤其是在计算机普遍都有多核CPU的时代，坐在那里等待毫无意义，你完全可以在另一个处理器内核上干其他的工作，同时计算机完成耗时任务的时候通知你。这样你可以同时完成其他工作，这就是异步编程的出发点。你正在使用的编程环境（就web开发而言，编程环境就是web浏览器）负责为你提供异步运行此类任务的API。

+ +

产生阻塞的代码

+ +

异步技术非常有用，特别是在web编程。当浏览器里面的一个web应用进行密集运算还没有把控制权返回给浏览器的时候，整个浏览器就像冻僵了一样，这叫做阻塞；这时候浏览器无法继续处理用户的输入并执行其他任务，直到web应用交回处理器的控制。

+ +

我们来看一些阻塞的例子。

+ +

例子： simple-sync.html  (see it running live), 在按钮上添加了一个事件监听器，当按钮被点击，它就开始运行一个非常耗时的任务（计算1千万个日期，并在console里显示最后一个日期），然后在DOM里面添加一个段落:

+ +
const btn = document.querySelector('button');
+btn.addEventListener('click', () => {
+  let myDate;
+  for(let i = 0; i < 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});
+ +

运行这个例子的时候，打开JavaScript console，然后点击按钮 — 你会注意到，直到日期的运算结束，最后一个日期在console上显示出来，段落才会出现在网页上。代码按照源代码的顺序执行，只有前面的代码结束运行，后面的代码才会执行。

+ +
+

Note: 这个例子不现实：在实际情况中一般不会发生，没有谁会计算1千万次日期，它仅仅提供一个非常直观的体验.

+
+ +

第二个例子, simple-sync-ui-blocking.html (see it live), 我们模拟一个在现实的网页可能遇到的情况：因为渲染UI而阻塞用户的互动，这个例子有2个按钮:

+ + + +
function expensiveOperation() {
+  for(let i = 0; i < 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =>
+  alert('You clicked me!')
+);
+ +

如果你点击第一个按钮，然后快速点击第二个，会注意到alert消息并没有出现，只有等到圆圈都画完以后，才会出现：因为第一个操作没有完成之前阻塞了第二个操作的运行.

+ +
+

Note: 当然，这个例子也很丑陋，因为我们只是在模拟阻塞效果。但在现实中，这是一个很常见的问题。开发人员们一直在努力缓解它。

+
+ +

为什么是这样? 答案是：JavaScript一般来说是单线程的（single threaded）。接着我们来介绍线程的概念。

+ +

线程

+ +

一个线程是一个基本的处理过程，程序用它来完成任务。每个线程一次只能执行一个任务:

+ +
Task A --> Task B --> Task C
+ +

每个任务顺序执行，只有前面的结束了，后面的才能开始。

+ +

正如我们之前所说，现在的计算机大都有多个内核（core），因此可以同时执行多个任务。支持多线程的编程语言可以使用计算机的多个内核，同时完成多个任务:

+ +
Thread 1: Task A --> Task B
+Thread 2: Task C --> Task D
+ +

JavaScript 是单线程的

+ +

JavaScript 传统上是单线程的。即使有多个内核，也只能在单一线程上运行多个任务，此线程称为主线程（main thread）。我们上面的例子运行如下:

+ +
Main thread: Render circles to canvas --> Display alert()
+ +

经过一段时间，JavaScript获得了一些工具来帮助解决这种问题。通过 Web workers 可以把一些任务交给一个名为worker的单独的线程，这样就可以同时运行多个JavaScript代码块。一般来说，用一个worker来运行一个耗时的任务，主线程就可以处理用户的交互（避免了阻塞）

+ +
Main thread: Task A --> Task C
+Worker thread: Expensive task B
+ +

记住这些，请查看simple-sync-worker.html (see it running live) , 再次打开浏览器的JavaScript 控制台。这个例子重写了前例：在一个单独的worker线程中计算一千万次日期，你再点击按钮，现在浏览器可以在日期计算完成之前显示段落，阻塞消失了。

+ +

异步代码

+ +

web workers相当有用，但是他们确实也有局限。主要的一个问题是他们不能访问 {{Glossary("DOM")}} — 不能让一个worker直接更新UI。我们不能在worker里面渲染1百万个蓝色圆圈，它基本上只能做算数的苦活。

+ +

其次，虽然在worker里面运行的代码不会产生阻塞，但是基本上还是同步的。当一个函数依赖于几个在它之前运行的过程的结果，这就会成为问题。考虑下面的情况:

+ +
Main thread: Task A --> Task B
+ +

在这种情况下，比如说Task A 正在从服务器上获取一个图片之类的资源，Task B 准备在图片上加一个滤镜。如果开始运行Task A 后立即尝试运行Task B，你将会得到一个错误，因为图像还没有获取到。

+ +
Main thread: Task A --> Task B --> |Task D|
+Worker thread: Task C -----------> |      |
+ +

在这种情况下，假设Task D 要同时使用 Task B 和Task C的结果，如果我们能保证这两个结果同时提供，程序可能正常运行，但是这不太可能。如果Task D 尝试在其中一个结果尚未可用的情况下就运行，程序就会抛出一个错误。

+ +

为了解决这些问题，浏览器允许我们异步运行某些操作。像Promises 这样的功能就允许让一些操作运行 (比如：从服务器上获取图片)，然后等待直到结果返回，再运行其他的操作:

+ +
Main thread: Task A                   Task B
+    Promise:      |__async operation__|
+ +

由于操作发生在其他地方，因此在处理异步操作的时候，主线程不会被阻塞。

+ +

我们将在下一篇文章中开始研究如何编写异步代码。 非常令人兴奋，对吧？ 继续阅读！

+ +

总结

+ +

围绕异步编程领域，现代软件设计正在加速旋转，就为了让程序在一个时间内做更多的事情。当你使用更新更强大的API时，你会发现在更多的情况下，使用异步编程是唯一的途径。以前写异步代码很困难，现在也需要你来适应，但是已经变容易了很多。在余下的部分，我们将进一步探讨异步代码的重要性，以及如何设计代码来防止前面已经提到过的问题。

+ +

模块大纲

+ + diff --git a/files/zh-cn/learn/javascript/asynchronous/index.html b/files/zh-cn/learn/javascript/asynchronous/index.html new file mode 100644 index 0000000000..3d89f5a060 --- /dev/null +++ b/files/zh-cn/learn/javascript/asynchronous/index.html @@ -0,0 +1,59 @@ +--- +title: 异步JavaScript +slug: learn/JavaScript/异步 +tags: + - JavaScript + - Promises + - requestAnimationFrame + - 初学者 + - 回调函数 + - 异步 + - 指南 + - 等待 + - 脚本编程 + - 设置定时器 + - 设置间隔 +translation_of: Learn/JavaScript/Asynchronous +--- +
+ +
{{LearnSidebar}}
+ +
+ +

在这个模块，我们将查看 {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}，异步为什么很重要，以及怎样使用异步来有效处理潜在的阻塞操作，比如从服务器上获取资源。

+ +

预备知识

+ +

异步JavaScript 是一个相当高级的话题，建议你先完成( JavaScript first steps 和 JavaScript building blocks) 两个模块的学习后再来学习。

+ +

如果你还不熟悉异步编程的概念，请从 通用异步编程概念开始. 如果熟悉的话，可以直接从介绍异步JavaScript 开始.

+ +
+

Note: 如果在当前阅读本文档而使用的电子设备（电脑/平板/其他）上，你没有权限生成自己的文件，你可以使用 JSBin or Thimble 在线编程工具来尝试文章里面的代码示例

+
+ +

指南

+ +
+
一般异步编程概念
+
+

浏览 异步相关的重要概念，在浏览器和JS里面的应用，学习本模块其他文章之前，你应该理解这些基本的概念。

+
+
介绍异步JS
+
这篇文章简单概括同步JS遇到的问题，首次提到一些不同的异步JS技术，他们是如何解决同步JS的问题
+
合作异步JS：Timeouts and intervals
+
在这里介绍JS传统的异步方法：在一段时间后运行 或者 在设定时间周期反复运行，看看这些技术如何使用，有什么内在的问题.
+
优雅的处理异步操作：Promises
+
Promises 是JS一个相对比较新的特性，你可以使用它来延迟一些操作直到前面的代码已经返回结果。对于时间上顺序完成的一系列操作，这个真的有用。本文展示promises 如何工作，使用WebAPIs何处会见到它, 最重要的：怎样写你自己的promises.
+
让异步编程简单: async and await
+
Promises 有点复杂, 所以现代的浏览器都实现了 async 函数和 await 操作符 —--前者允许标准函数隐式地和 promises 工作, 后者可以在async 函数里面使用，等待promises运行结束，函数再继续运行。
+
选择正确的方法
+
结束本模块之前，回顾一下已经讨论的编程技术和特性：什么时候用哪个。有推荐，也有常见的陷阱提醒。
+
+ +

参考

+ + diff --git a/files/zh-cn/learn/javascript/asynchronous/introducing/index.html b/files/zh-cn/learn/javascript/asynchronous/introducing/index.html new file mode 100644 index 0000000000..1792c0e086 --- /dev/null +++ b/files/zh-cn/learn/javascript/asynchronous/introducing/index.html @@ -0,0 +1,272 @@ +--- +title: 异步JavaScript简介 +slug: learn/JavaScript/异步/简介 +translation_of: Learn/JavaScript/Asynchronous/Introducing +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/异步/概念", "Learn/JavaScript/异步/Timeouts_and_intervals", "Learn/JavaScript/异步")}}
+ +

在本文中，我们简要回顾一下与同步JavaScript相关的问题，首次介绍你将遇到的一些不同的异步技术，并展示如何使用这些技术解决问题。

+ + + + + + + + + + + + +
预备条件:基本的计算机素养，以及对JavaScript 基础知识的较好的理解。
目标:熟悉什么是异步JavaScript，与同步JavaScript 的区别，以及使用场合。
+ +

同步JavaScript

+ +

要理解什么是{{Glossary("异步")}} JavaScript ，我们应该从确切理解{{Glossary("同步")}} JavaScript 开始。本节回顾我们在上一篇文章中看到的一些信息。

+ +

前面学的很多知识基本上都是同步的 — 运行代码，然后浏览器尽快返回结果。先看一个简单的例子 (运行它, 这是源码)：

+ +
const btn = document.querySelector('button');
+btn.addEventListener('click', () => {
+  alert('You clicked me!');
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});
+
+ +

这段代码, 一行一行的顺序执行：

+ +
    +
  1. 先取得一个在DOM里面的 {{htmlelement("button")}} 引用。
    2. +
  2. 点击按钮的时候，添加一个 click 事件监听器: +
      +
    1. alert() 消息出现。
      2. +
    2. 一旦alert 结束，创建一个{{htmlelement("p")}} 元素。
      3. +
    3. 给它的文本内容赋值。
      4. +
    4. 最后，把这个段落放进网页。
      5. +
    +
    3. +
+ +

每一个操作在执行的时候，其他任何事情都没有发生 — 网页的渲染暂停. 因为前篇文章提到过 JavaScript is single threaded. 任何时候只能做一件事情, 只有一个主线程，其他的事情都阻塞了，直到前面的操作完成。

+ +

所以上面的例子，点击了按钮以后，段落不会创建，直到在alert消息框中点击ok，段落才会出现，你可以自己试试：

+ + + +

{{EmbedLiveSample('Synchronous_JavaScript', '100%', '70px')}}

+ +
+

Note: 这很重要请记住，alert()在演示阻塞效果的时候非常有用，但是在正式代码里面，它就是一个噩梦。

+
+ +

异步JavaScript

+ +

就前面提到的种种原因（比如，和阻塞相关）很多网页API特性使用异步代码，特别是从外部的设备上获取资源，譬如，从网络获取文件，访问数据库，从网络摄像头获得视频流，或者向VR头罩广播图像。

+ +

为什么使用异步代码这么难？看一个例子，当你从服务器获取一个图像，通常你不可能立马就得到，这需要时间，虽然现在的网络很快。这意味着下面的伪代码可能不能正常工作：

+ +
var response = fetch('myImage.png');
+var blob = response.blob();
+// display your image blob in the UI somehow
+ +

因为你不知道下载图片会多久，所以第二行代码执行的时候可能报错（可能间歇的，也可能每次）因为图像还没有就绪。取代的方法就是，代码必须等到 response 返回才能继续往下执行。

+ +

在JavaScript代码中，你经常会遇到两种异步编程风格：老派callbacks，新派promise。下面就来分别介绍。

+ +

异步callbacks

+ +

异步callbacks 其实就是函数，只不过是作为参数传递给那些在后台执行的其他函数. 当那些后台运行的代码结束，就调用callbacks函数，通知你工作已经完成，或者其他有趣的事情发生了。使用callbacks 有一点老套，在一些老派但经常使用的API里面，你会经常看到这种风格。

+ +

举个例子，异步callback 就是{{domxref("EventTarget.addEventListener", "addEventListener()")}}第二个参数（前面的例子）：

+ +
btn.addEventListener('click', () => {
+  alert('You clicked me!');
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});
+ +

第一个参数是侦听的事件类型，第二个就是事件发生时调用的回调函数。.

+ +

当我们把回调函数作为一个参数传递给另一个函数时，仅仅是把回调函数定义作为参数传递过去 — 回调函数并没有立刻执行，回调函数会在包含它的函数的某个地方异步执行，包含函数负责在合适的时候执行回调函数。

+ +

你可以自己写一个容易的，包含回调函数的函数。来看另外一个例子，用 XMLHttpRequest API (运行它, 源代码) 加载资源：

+ +
function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);
+ +

创建 displayImage() 函数，简单的把blob传递给它，生成objectURL，然后再生成一个image元素，把objectURL作为image的源地址，最后显示这张图片。  然后，我们创建 loadAsset() 函数，把URL，type，和回调函数同时都作为参数。函数用 XMLHttpRequest (通常缩写 "XHR") 获取给定URL的资源，在获得资源响应后再把响应作为参数传递给回调函数去处理。 (使用 onload 事件处理) ，有点烧脑，是不是？！

+ +

回调函数用途广泛 — 他们不仅仅可以用来控制函数的执行顺序和函数之间的数据传递，还可以根据环境的不同，将数据传递给不同的函数，所以对下载好的资源，你可以采用不同的操作来处理，譬如 processJSON(), displayText(), 等等。

+ +

请注意，不是所有的回调函数都是异步的 — 有一些是同步的。一个例子就是使用 {{jsxref("Array.prototype.forEach()")}} 来遍历数组 (运行, 源代码):

+ +
const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus'];
+
+gods.forEach(function (eachName, index){
+  console.log(index + '. ' + eachName);
+});
+ +

在这个例子中，我们遍历一个希腊神的数组，并在控制台中打印索引和值。forEach() 需要的参数是一个回调函数，回调函数本身带有两个参数，数组元素和索引值。它无需等待任何事情，立即运行。

+ +

Promises

+ +

Promises 是新派的异步代码，现代的web APIs经常用到。 fetch() API就是一个很好的例子, 它基本上就是一个现代版的，更高效的 {{domxref("XMLHttpRequest")}}。看个例子，来自于文章 Fetching data from the server ：

+ +
fetch('products.json').then(function(response) {
+  return response.json();
+}).then(function(json) {
+  products = json;
+  initialize();
+}).catch(function(err) {
+  console.log('Fetch problem: ' + err.message);
+});
+ +
+

Note: 在GitHub上有完整的代码 (see the source here, and also see it running live)。

+
+ +

这里fetch() 只需要一个参数— 资源的网络 URL — 返回一个 promise. promise 是表示异步操作完成或失败的对象。可以说，它代表了一种中间状态。 本质上，这是浏览器说“我保证尽快给您答复”的方式，因此得名“promise”。

+ +

这个概念需要练习来适应;它感觉有点像运行中的{{interwiki("wikipedia", "薛定谔猫")}}。这两种可能的结果都还没有发生，因此fetch操作目前正在等待浏览器试图在将来某个时候完成该操作的结果。然后我们有三个代码块链接到fetch()的末尾：

+ + + +
+

Note: 在本模块稍后的部分中，你将学习更多关于promise的内容，所以如果你还没有完全理解这些promise，请不要担心。

+
+ +

事件队列

+ +

像promise这样的异步操作被放入事件队列中，事件队列在主线程完成处理后运行，这样它们就不会阻止后续JavaScript代码的运行。排队操作将尽快完成，然后将结果返回到JavaScript环境。

+ +

Promises 对比 callbacks

+ +

promises与旧式callbacks有一些相似之处。它们本质上是一个返回的对象，您可以将回调函数附加到该对象上，而不必将回调作为参数传递给另一个函数。

+ +

然而，Promise是专门为异步操作而设计的，与旧式回调相比具有许多优点:

+ + + +

异步代码的本质

+ +

让我们研究一个示例，它进一步说明了异步代码的本质，展示了当我们不完全了解代码执行顺序以及将异步代码视为同步代码时可能发生的问题。下面的示例与我们之前看到的非常相似( 运行它 和 源代码)。一个不同之处在于，我们包含了许多{{domxref("console.log()")}}语句，以展示代码将在其中执行的顺序。

+ +
console.log ('Starting');
+let image;
+
+fetch('coffee.jpg').then((response) => {
+  console.log('It worked :)')
+  return response.blob();
+}).then((myBlob) => {
+  let objectURL = URL.createObjectURL(myBlob);
+  image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch((error) => {
+  console.log('There has been a problem with your fetch operation: ' + error.message);
+});
+
+console.log ('All done!');
+ +

浏览器将会执行代码，看见第一个console.log() 输出(Starting) ，然后创建image 变量。

+ +

然后，它将移动到下一行并开始执行fetch()块，但是，因为fetch()是异步执行的，没有阻塞，所以在promise相关代码之后程序继续执行，从而到达最后的console.log()语句(All done!)并将其输出到控制台。

+ +

只有当fetch() 块完成运行返回结果给.then() ，我们才最后看到第二个console.log() 消息 (It worked ;)) . 所以 这些消息 可能以 和你预期不同的顺序出现：

+ + + +

如果你感到疑惑，考虑下面这个小例子：

+ +
console.log("registering click handler");
+
+button.addEventListener('click', () => {
+  console.log("get click");
+});
+
+console.log("all done");
+ +

这在行为上非常相似——第一个和第三个console.log()消息将立即显示，但是第二个消息将被阻塞，直到有人单击鼠标按钮。前面的示例以相同的方式工作，只是在这种情况下，第二个消息在promise链上被阻塞，直到获取资源后再显示在屏幕上，而不是单击。

+ +

要查看实际情况，请尝试获取示例的本地副本，并将第三个console.log()调用更改为以下命令：

+ +
console.log ('All done! ' + image.src + 'displayed.');
+ +

此时控制台将会报错，而不会显示第三个 console.log 的信息：

+ +
TypeError: image is undefined; can't access its "src" property
+ +

这是因为：浏览器运行第三个console.log()的时候，fetch() 语句块还没有完成，因此image还没有赋值。

+ +

主动学习：把代码全部异步化

+ +

要修复有问题的fetch()示例并使三个console.log()语句按期望的顺序出现，还可以让第三个console.log()语句异步运行。这可以通过将它移动到另一个then()块中来实现，然后将它链接到第二个then()块的末尾，或者简单地将它移动到第二个then()块中。现在就试试。

+ +
+

Note: 如果你困住了，你可以在这里找到答案 (这里运行)。在后面的文章：用Promises优雅的异步编程, 你将会发现更多信息。

+
+ +

小结

+ +

在最基本的形式中，JavaScript是一种同步的、阻塞的、单线程的语言，在这种语言中，一次只能执行一个操作。但web浏览器定义了函数和API，允许我们当某些事件发生时不是按照同步方式，而是异步地调用函数(比如，时间的推移，用户通过鼠标的交互，或者获取网络数据)。这意味着您的代码可以同时做几件事情，而不需要停止或阻塞主线程。

+ +

异步还是同步执行代码，取决于我们要做什么。

+ +

有些时候，我们希望事情能够立即加载并发生。例如，当将一些用户定义的样式应用到一个页面时，您希望这些样式能够尽快被应用。

+ +

但是，如果我们正在运行一个需要时间的操作，比如查询数据库并使用结果填充模板，那么最好将该操作从主线程中移开使用异步完成任务。随着时间的推移，您将了解何时选择异步技术比选择同步技术更有意义。

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}

+ +

模块大纲

+ + diff --git a/files/zh-cn/learn/javascript/asynchronous/promises/index.html b/files/zh-cn/learn/javascript/asynchronous/promises/index.html new file mode 100644 index 0000000000..665bda8129 --- /dev/null +++ b/files/zh-cn/learn/javascript/asynchronous/promises/index.html @@ -0,0 +1,599 @@ +--- +title: 优雅的异步处理 +slug: learn/JavaScript/异步/Promises语法 +translation_of: Learn/JavaScript/Asynchronous/Promises +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
+ +

Promise 是 JavaScript 语言的一个相对较新的功能，允许你推迟进一步的操作，直到上一个操作完成或响应其失败。这对于设置一系列异步操作以正常工作非常有用。本文向你展示了promises如何工作，如何在Web API中使用它们以及如何编写自己的API

+ + + + + + + + + + + + +
前提条件:基本的计算机素养，具备基础的JavaScript知识
目标:理解并使用学习如何使用Promises
+ +

什么是promises?

+ +

我们在教程的第一篇文章中简要地了解了 Promises，接下来我们将在更深层次理解Promise。

+ +

本质上，Promise 是一个对象，代表操作的中间状态 —— 正如它的单词含义 '承诺' ，它保证在未来可能返回某种结果。虽然 Promise 并不保证操作在何时完成并返回结果，但是它保证当结果可用时，你的代码能正确处理结果，当结果不可用时，你的代码同样会被执行，来优雅的处理错误。

+ +

通常你不会对一个异步操作从开始执行到返回结果所用的时间感兴趣（除非它耗时过长），你会更想在任何时候都能响应操作结果，当然它不会阻塞其余代码的执行就更好了。

+ +

你与 Promise 常见的交互之一就是 Web API 返回的 promise 对象。让我们设想一个视频聊天应用程序，该程序有一个展示用户的朋友列表的窗口，可以点击朋友旁边的按钮对朋友视频呼叫。

+ +

该按钮的处理程序调用 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} 来访问用户的摄像头和麦克风。由于 getUserMedia() 必须确保用户具有使用这些设备的权限，并询问用户要使用哪个麦克风和摄像头（或者是否仅进行语音通话，以及其他可能的选项），因此它会产生阻塞，直到用户做出所有的决定，并且摄像头和麦克风都已启用。此外，用户可能不会立即响应权限请求。所以 getUserMedia() 可能需要很长时间。

+ +

由于 getUserMedia() 是在浏览器的主线程进行调用，整个浏览器将会处于阻塞状态直到 getUserMedia() 返回，这是不应该发生的；不使用Promise，浏览器将处于不可用状态直到用户为摄像头和麦克风做出决定。因此 getUserMedia() 返回一个Promise对象，即 {{jsxref("promise")}}，一旦  {{domxref("MediaStream")}} 流可用才去解析，而不是等待用户操作、启动选中的设备并直接返回从所选资源创建的 {{domxref("MediaStream")}} 流。

+ +

上述视频聊天应用程序的代码可能像下面这样：

+ +
function handleCallButton(evt) {
+  setStatusMessage("Calling...");
+  navigator.mediaDevices.getUserMedia({video: true, audio: true})
+    .then(chatStream => {
+      selfViewElem.srcObject = chatStream;
+      chatStream.getTracks().forEach(track => myPeerConnection.addTrack(track, chatStream));
+      setStatusMessage("Connected");
+    }).catch(err => {
+      setStatusMessage("Failed to connect");
+    });
+}
+
+ +

这个函数在开头调用 setStatusMessage() 来更新状态显示信息"Calling..."， 表示正在尝试通话。接下来调用 getUserMedia()，请求具有视频及音频轨的流，一旦获得这个流，就将其显示在"selfViewElem"的video元素中。接下来将这个流的每个轨道添加到表示与另一个用户的连接的 WebRTC，参见{{domxref("RTCPeerConnection")}}。在这之后，状态显示为"Connected"。

+ +

如果getUserMedia()失败，则catch块运行。这使用setStatusMessage()更新状态框以指示发生错误。

+ +

这里重要的是getUserMedia()调用几乎立即返回，即使尚未获得相机流。即使handleCallButton()函数向调用它的代码返回结果，当getUserMedia()完成工作时，它也会调用你提供的处理程序。只要应用程序不假设流式传输已经开始，它就可以继续运行。

+ +
+

注意:  如果你有兴趣，可以在文章Signaling and video calling中了解有关此高级主题的更多信息。在该示例中使用与此类似的代码，但更完整。

+
+ +

 回调函数的麻烦

+ +

要完全理解为什么 promise 是一件好事，应该回想之前的回调函数，理解它们造成的困难。

+ +

我们来谈谈订购披萨作为类比。为了使你的订单成功，你必须按顺序执行，不按顺序执行或上一步没完成就执行下一步是不会成功的：

+ +
    +
  1. 选择配料。如果你是优柔寡断，这可能需要一段时间，如果你无法下定决心或者决定换咖喱，可能会失败。
    2. +
  2. 下订单。返回比萨饼可能需要一段时间，如果餐厅没有烹饪所需的配料，可能会失败。
    3. +
  3. 然后你收集你的披萨吃。如果你忘记了自己的钱包，那么这可能会失败，所以无法支付比萨饼的费用！
    4. +
+ +

对于旧式callbacks，上述功能的伪代码表示可能如下所示：

+ +
chooseToppings(function(toppings) {
+  placeOrder(toppings, function(order) {
+    collectOrder(order, function(pizza) {
+      eatPizza(pizza);
+    }, failureCallback);
+  }, failureCallback);
+}, failureCallback);
+ +

这很麻烦且难以阅读（通常称为“回调地狱”），需要多次调用failureCallback()（每个嵌套函数一次），还有其他问题。

+ +

使用promise改良

+ +

Promises使得上面的情况更容易编写，解析和运行。如果我们使用异步promises代表上面的伪代码，我们最终会得到这样的结果：

+ +
chooseToppings()
+.then(function(toppings) {
+  return placeOrder(toppings);
+})
+.then(function(order) {
+  return collectOrder(order);
+})
+.then(function(pizza) {
+  eatPizza(pizza);
+})
+.catch(failureCallback);
+ +

这要好得多 - 更容易看到发生了什么，我们只需要一个.catch()块来处理所有错误，它不会阻塞主线程（所以我们可以在等待时继续玩视频游戏为了准备好收集披萨），并保证每个操作在运行之前等待先前的操作完成。我们能够以这种方式一个接一个地链接多个异步操作，因为每个.then()块返回一个新的promise，当.then()块运行完毕时它会解析。聪明，对吗？

+ +

使用箭头函数，你可以进一步简化代码：

+ +
chooseToppings()
+.then(toppings =>
+  placeOrder(toppings)
+)
+.then(order =>
+  collectOrder(order)
+)
+.then(pizza =>
+  eatPizza(pizza)
+)
+.catch(failureCallback);
+ +

甚至这样：

+ +
chooseToppings()
+.then(toppings => placeOrder(toppings))
+.then(order => collectOrder(order))
+.then(pizza => eatPizza(pizza))
+.catch(failureCallback);
+ +

这是有效的，因为使用箭头函数 () => x 是 ()=> {return x;}  的有效简写; 。

+ +

你甚至可以这样做，因为函数只是直接传递它们的参数，所以不需要额外的函数层：

+ +
chooseToppings().then(placeOrder).then(collectOrder).then(eatPizza).catch(failureCallback);
+ +

但是，这并不容易阅读，如果你的块比我们在此处显示的更复杂，则此语法可能无法使用。

+ +
+

注意: 你可以使用 async/await 语法进行进一步的改进，我们将在下一篇文章中深入讨论。

+
+ +

最基本的，promise与事件监听器类似，但有一些差异：

+ + + +

 解释promise的基本语法：一个真实的例子

+ +

Promises 很重要，因为大多数现代Web API都将它们用于执行潜在冗长任务的函数。要使用现代Web技术，你需要使用promises。在本章的后面我们将看看如何编写自己的promises，但是现在我们将看一些你将在Web API中遇到的简单示例。

+ +

在第一个示例中，我们将使用fetch()方法从Web获取图像，blob() 方法来转换获取响应的原始内容到 Blob 对象，然后在 <img> 元素内显示该blob。这与我们在 first article of the series中看到的示例非常相似，但是会在构建你自己的基于 promise 的代码时有所不同。 

+ +
+

注意: 下列代码无法直接运行(i.e. via a file:// URL)。你需要本地测试服务器，或是 Glitch 和 GitHub pages 这样的在线解决方案。

+
+ +
    +
  1. +

    首先，下载我们的 simple HTML template和sample image file。

    +
    2. +
  2. +

    将 {{htmlelement("script")}} 元素添加在HTML {{htmlelement("body")}} 的底部。

    +
    3. +
  3. +

    在 {{HTMLElement("script")}} 元素内，添加以下行：

    + + 
    let promise = fetch('coffee.jpg');
    + +

    这会调用 fetch() 方法，将图像的URL作为参数从网络中提取。这也可以将options对象作为可选的第二个参数，但我们现在只使用最简单的版本。我们将 fetch() 返回的promise对象存储在一个名为promise的变量中。正如我们之前所说的，这个对象代表了一个最初既不成功也不失败的中间状态 - 这个状态下的promise的官方术语叫作pending。

    +
    4. +
  4. 为了响应成功完成操作（在这种情况下，当返回{{domxref("Response")}}时），我们调用promise对象的.then()方法。 .then()块中的回调（称为执行程序）仅在promise调用成功完成时运行并返回{{domxref("Response")}}对象 - 在promise-speak中，当它已被满足时。它将返回的{{domxref("Response")}}对象作为参数传递。
    5. +
+ +
+

注意: .then()块的工作方式类似于使用AddEventListener()向对象添加事件侦听器时的方式。它不会在事件发生之前运行（当promise履行时）。最显着的区别是.then()每次使用时只运行一次，而事件监听器可以多次调用。

+
+ +

我们立即对此响应运行blob()方法以确保响应主体完全下载，并且当它可用时将其转换为我们可以执行某些操作的Blob对象。返回的结果如下：

+ +
response => response.blob()
+ +

这是下面的简写

+ +
function(response) {
+    return response.blob();
+}
+
+ +

好的，我们还需要做点额外的工作。Fetch promises 不会产生 404 或 500错误，只有在产生像网路故障的情况时才会不工作。总的来说，Fetch promises 总是成功运行，即使response.ok 属性是 false。为了产生404错误，我们需要判断 response.ok ，如果是 false，抛出错误，否则返回 blob。就像下面的代码这样做。

+ +
let promise2 = promise.then(response => {
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    return response.blob();
+  }
+});
+ +

5. 每次调用.then()都会创建一个新的promise。这非常有用;因为blob()方法也返回一个promise，我们可以通过调用第二个promise的.then()方法来处理它在履行时返回的Blob对象。因为我们想要对blob执行一些更复杂的操作，而不仅仅运行单个方法并返回结果，这次我们需要将函数体包装成花括号（否则会抛出错误）。

+ +

将以下内容添加到代码的末尾：

+ +
let promise3 = promise2.then(myBlob => {})
+ +

6. 现在让我们填写执行程序函数的主体。在花括号内添加以下行：

+ +
let objectURL = URL.createObjectURL(myBlob);
+let image = document.createElement('img');
+image.src = objectURL;
+document.body.appendChild(image);
+ +

这里我们运行{{domxref("URL.createObjectURL()")}}方法，将其作为Blob在第二个promise实现时返回的参数传递。这将返回指向该对象的URL。然后我们创建一个{{htmlelement("img")}}元素，将其src属性设置为等于对象URL并将其附加到DOM，这样图像就会显示在页面上！

+ +

如果你保存刚刚创建的HTML文件并将其加载到浏览器中，你将看到图像按预期显示在页面中。干得好！

+ +
+

注意: 你可能会注意到这些例子有点做作。你可以取消整个fetch()和blob()链，只需创建一个<img>元素并将其src属性值设置为图像文件的URL，即coffee.jpg。然而，我们选择了这个例子，因为它以简单的方式展示了promise，而不是真实世界的适当性。

+
+ +

响应失败

+ +

缺少一些东西 - 如果其中一个promise失败（rejects，in promise-speak），目前没有什么可以明确地处理错误。我们可以通过运行前一个promise的 .catch() 方法来添加错误处理。立即添加：

+ +
let errorCase = promise3.catch(e => {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});
+ +

要查看此操作，请尝试拼错图像的URL并重新加载页面。该错误将在浏览器的开发人员工具的控制台中报告。

+ +

如果你根本不操心包括的 .catch() 块，这并没有做太多的事情，但考虑一下（指.catch()块） ––这会使我们可以完全控制错误处理方式。在真实的应用程序中，你的.catch()块可以重试获取图像，或显示默认图像，或提示用户提供不同的图像URL等等。

+ +
+

注意: 你可以参考 our version of the example live (参阅 source code ).

+
+ +

将代码块链在一起

+ +

这是写出来的一种非常简便的方式;我们故意这样做是为了帮助你清楚地了解发生了什么。如本文前面所示，你可以将.then()块（以及.catch()块）链接在一起。上面的代码也可以这样写(参阅GitHub上的simple-fetch-chained.html ):

+ +
fetch('coffee.jpg')
+.then(response => {
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    return response.blob();
+  }
+})
+.then(myBlob => {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e => {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});
+ +

请记住，履行的promise所返回的值将成为传递给下一个 .then() 块的executor函数的参数。

+ +
+

注意: promise中的.then()/catch()块基本上是同步代码中try...catch块的异步等价物。请记住，同步try ... catch在异步代码中不起作用。

+
+ +

Promise术语回顾

+ +

在上面的部分中有很多要介绍的内容，所以让我们快速回过头来给你一个简短的指南，你可以将它添加到书签中，以便将来更新你的记忆。你还应该再次阅读上述部分，以确保这些概念坚持下去。

+ +
    +
  1. 创建promise时，它既不是成功也不是失败状态。这个状态叫作pending（待定）。
    2. +
  2. 当promise返回时，称为 resolved（已解决）. +
      +
    1. 一个成功resolved的promise称为fullfilled（实现）。它返回一个值，可以通过将.then()块链接到promise链的末尾来访问该值。 .then()块中的执行程序函数将包含promise的返回值。
      2. +
    2. 一个不成功resolved的promise被称为rejected（拒绝）了。它返回一个原因（reason），一条错误消息，说明为什么拒绝promise。可以通过将.catch()块链接到promise链的末尾来访问此原因。
      3. +
    +
    3. +
+ +

 运行代码以响应多个Promises的实现

+ +

上面的例子向我们展示了使用promises的一些真正的基础知识。现在让我们看一些更高级的功能。首先，链接进程一个接一个地发生都很好，但是如果你想在一大堆Promises全部完成之后运行一些代码呢？

+ +

 你可以使用巧妙命名的Promise.all()静态方法完成此操作。这将一个promises数组作为输入参数，并返回一个新的Promise对象，只有当数组中的所有promise都满足时才会满足。它看起来像这样：

+ +
Promise.all([a, b, c]).then(values => {
+  ...
+});
+ +

如果它们都实现，那么数组中的结果将作为参数传递给.then()块中的执行器函数。如果传递给Promise.all()的任何一个 promise 拒绝，整个块将拒绝。

+ +

这非常有用。想象一下，我们正在获取信息以在内容上动态填充页面上的UI功能。在许多情况下，接收所有数据然后才显示完整内容，而不是显示部分信息。

+ +

让我们构建另一个示例来展示这一点。

+ +
    +
  1. +

    下载我们页面模板（page template）的新副本，并再次在结束</ body>标记之前放置一个<script>元素。

    +
    2. +
  2. +

    下载我们的源文件(coffee.jpg, tea.jpg和 description.txt),或者随意替换成你自己的文件。

    +
    3. +
  3. +

    在我们的脚本中，我们将首先定义一个函数，该函数返回我们要发送给Promise.all()的promise。如果我们只想运行Promise.all()块以响应三个fetch()操作完成，这将很容易。我们可以这样做：

    + + 
    let a = fetch(url1);
+let b = fetch(url2);
+let c = fetch(url3);
+
+Promise.all([a, b, c]).then(values => {
+  ...
+});
    + +

    当promise是fullfilled时，传递到履行处理程序的values将包含三个Response对象，每个对象用于已完成的每个fetch()操作。

    + +

    但是，我们不想这样做。我们的代码不关心fetch()操作何时完成。相反，我们想要的是加载的数据。这意味着当我们返回代表图像的可用blob和可用的文本字符串时，我们想要运行Promise.all()块。我们可以编写一个执行此操作的函数;在<script>元素中添加以下内容：

    + + 
    function fetchAndDecode(url, type) {
+  return fetch(url).then(response => {
+    if (type === 'blob') {
+      return response.blob();
+    } else if (type === 'text') {
+      return response.text();
+    }
+  })
+  .catch(e => {
+    console.log('There has been a problem with your fetch operation: ' + e.message);
+  });
+}
    + +

    这看起来有点复杂，所以让我们一步一步地完成它：

    + +
      +
    1. 首先，我们定义函数，向它传递一个URL和字符串，这个字符串表示资源类型。
      2. +
    2. 在函数体内部，我们有一个类似于我们在第一个例子中看到的结构 - 我们调用fetch()函数来获取指定URL处的资源，然后将其链接到另一个 promise ，它解码（或“read”）响应body。这是前一个示例中的blob()方法。
      3. +
    3. 但是，这里有两处不同： +
        +
      • 首先，我们返回的第二个promise会因类型值的不同而不同。在执行函数内部，我们包含一个简单的if ... else if语句，根据我们需要解码的文件类型返回不同的promise（在这种情况下，我们可以选择blob或text，而且很容易扩展这个以处理其他类型）。
        • +
      • 其次，我们在fetch()调用之前添加了return关键字。它的作用是运行整个链，然后运行最终结果（即blob()或text()返回的promise作为我们刚刚定义的函数的返回值）。实际上，return语句将结果从链返回到顶部。
        • +
      +
      4. +
    4. +

      在块结束时，我们链接一个.catch()调用，以处理任何可能出现在数组中传递给.all()的任何promise的错误情况。如果任何promise被拒绝，catch块将告诉你哪个promise有问题。 .all()块（见下文）仍然可以实现，但不会显示有问题的资源。如果你想要.all拒绝，你必须将.catch()块链接到那里的末尾。

      +
      5. +
    + +

    函数体内部的代码是async（异步）和基于promise的，因此实际上整个函数就像一个promise ––方便啊！

    +
    4. +
  4. +

    接下来，我们调用我们的函数三次以开始获取和解码图像和文本的过程，并将每个返回的promises存储在变量中。在以前的代码下面添加以下内容：

    + + 
    let coffee = fetchAndDecode('coffee.jpg', 'blob');
+let tea = fetchAndDecode('tea.jpg', 'blob');
+let description = fetchAndDecode('description.txt', 'text');
    +
    5. +
  5. +

    接下来，我们将定义一个Promise.all()块，仅当上面存储的所有三个promise都已成功完成时才运行一些代码。首先，在.then()调用中添加一个带有空执行程序的块，如下所示：

    + + 
    Promise.all([coffee, tea, description]).then(values => {
+
+});
    + +

    你可以看到它需要一个包含promises作为参数的数组。执行者只有在所有三个promises的状态成为resolved时才会运行;当发生这种情况时，它将被传入一个数组，其中包含来自各个promise（即解码的响应主体）的结果，类似于 [coffee-results, tea-results, description-results].

    +
    6. +
  6. +

    最后，在执行程序中添加以下内容。这里我们使用一些相当简单的同步代码将结果存储在单独的变量中（从blob创建对象URL），然后在页面上显示图像和文本。

    + + 
    console.log(values);
+// Store each value returned from the promises in separate variables; create object URLs from the blobs
+let objectURL1 = URL.createObjectURL(values[0]);
+let objectURL2 = URL.createObjectURL(values[1]);
+let descText = values[2];
+
+// Display the images in <img> elements
+let image1 = document.createElement('img');
+let image2 = document.createElement('img');
+image1.src = objectURL1;
+image2.src = objectURL2;
+document.body.appendChild(image1);
+document.body.appendChild(image2);
+
+// Display the text in a paragraph
+let para = document.createElement('p');
+para.textContent = descText;
+document.body.appendChild(para);
    +
    7. +
  7. +

    保存并刷新，你应该看到所有UI组件都已加载，尽管不是特别有吸引力！

    +
    8. +
+ +

我们在这里提供的用于显示项目的代码相当简陋，但现在作为解释器。

+ +
+

注意: 如果你遇到困难，可以将你的代码版本与我们的代码进行比较，看看它的外观 -––see it live，也可以参阅source code。

+
+ +
+

注意: 如果你正在改进这段代码，你可能想要遍历一个项目列表来显示，获取和解码每个项目，然后循环遍历Promise.all()内部的结果，运行一个不同的函数来显示每个项目取决于什么代码的类型是。这将使它适用于任何数量的项目，而不仅仅是三个。

+ +

此外，你可以确定要获取的文件类型，而无需显式类型属性。例如，你可以使用response.headers.get("content-type")检查响应的{{HTTPHeader("Content-Type")}} HTTP标头，然后做出相应的反应。

+
+ +

 在promise fullfill/reject后运行一些最终代码

+ +

在promise完成后，你可能希望运行最后一段代码，无论它是否已实现（fullfilled）或被拒绝（rejected）。此前，你必须在.then()和.catch()回调中包含相同的代码，例如：

+ +
myPromise
+.then(response => {
+  doSomething(response);
+  runFinalCode();
+})
+.catch(e => {
+  returnError(e);
+  runFinalCode();
+});
+ +

在现代浏览器中，.finally() 方法可用，它可以链接到常规promise链的末尾，允许你减少代码重复并更优雅地执行操作。上面的代码现在可以写成如下：

+ +
myPromise
+.then(response => {
+  doSomething(response);
+})
+.catch(e => {
+  returnError(e);
+})
+.finally(() => {
+  runFinalCode();
+});
+ +

有关一个真实示例，请查看我们的promise-finally.html demo（另请参阅source code）。这与我们在上面部分中看到的Promise.all()演示完全相同，除了在fetchAndDecode()函数中我们将finally()调用链接到链的末尾：

+ +
function fetchAndDecode(url, type) {
+  return fetch(url).then(response => {
+    if(!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    } else {
+      if(type === 'blob') {
+        return response.blob();
+      } else if(type === 'text') {
+        return response.text();
+      }
+    }
+  })
+  .catch(e => {
+    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
+  })
+  .finally(() => {
+    console.log(`fetch attempt for "${url}" finished.`);
+  });
+}
+ +

这会将一条简单的消息记录到控制台，告诉我们每次获取尝试的时间。

+ +
+

注意:finally()允许你在异步代码中编写异步等价物try/ catch / finally。

+
+ +

 构建自定义promise

+ +

好消息是，在某种程度上，你已经建立了自己的promise。当你使用.then()块链接多个promise时，或者将它们组合起来创建自定义函数时，你已经在创建自己的基于异步声明的自定义函数。例如，从前面的示例中获取我们的fetchAndDecode()函数。

+ +

将不同的基于promise的API组合在一起以创建自定义函数是迄今为止你使用promises进行自定义事务的最常见方式，并展示了基于相同原则的大多数现代API的灵活性和强大功能。然而，还有另一种方式。

+ +

使用Promise()构造函数

+ +

可以使用Promise() 构造函数构建自己的promise。当你需要使用现有的旧项目代码、库或框架以及基于现代promise的代码时，这会派上用场。比如，当你遇到没有使用promise的旧式异步API的代码时，你可以用promise来重构这段异步代码。

+ +

让我们看一个简单的示例来帮助你入门 —— 这里我们用 promise 包装一了个setTimeout()，它会在两秒后运行一个函数，该函数将用字符串“Success!”，解析当前promise（调用链接的resolve()）。

+ +
let timeoutPromise = new Promise((resolve, reject) => {
+  setTimeout(function(){
+    resolve('Success!');
+  }, 2000);
+});
+ +

resolve()和reject()是用来实现和拒绝新创建的promise的函数。此处，promise 成功运行通过显示字符串“Success!”。

+ +

因此，当你调用此promise时，可以将.then()块链接到它的末尾，它将传递给.then()块一串“Success!”。在下面的代码中，我们显示出该消息：

+ +
timeoutPromise
+.then((message) => {
+   alert(message);
+})
+ +

更简化的版本：

+ +
timeoutPromise.then(alert);
+
+ +

尝试 running this live 以查看结果 (可参考 source code).

+ +

上面的例子不是很灵活 - promise只能实现一个字符串，并且它没有指定任何类型的reject()条件（诚然，setTimeout()实际上没有失败条件，所以对这个简单的例子并不重要）。

+ +
+

注意: 为什么要resolve()，而不是fullfill()？我们现在给你的答案有些复杂。

+
+ +

拒绝一个自定义promise

+ +

我们可以创建一个reject() 方法拒绝promise  - 就像resolve()一样，这需要一个值，但在这种情况下，它是拒绝的原因，即将传递给.catch()的错误块。

+ +

让我们扩展前面的例子，使其具有一些reject()条件，并允许在成功时传递不同的消息。

+ +

获取previous example副本，并将现有的timeoutPromise()定义替换为：

+ +
function timeoutPromise(message, interval) {
+  return new Promise((resolve, reject) => {
+    if (message === '' || typeof message !== 'string') {
+      reject('Message is empty or not a string');
+    } else if (interval < 0 || typeof interval !== 'number') {
+      reject('Interval is negative or not a number');
+    } else {
+      setTimeout(function(){
+        resolve(message);
+      }, interval);
+    }
+  });
+};
+ +

在这里，我们将两个方法传递给一个自定义函数 - 一个用来做某事的消息，以及在做这件事之前要经过的时间间隔。在函数内部，我们返回一个新的Promise对象 - 调用该函数将返回我们想要使用的promise。

+ +

在Promise构造函数中，我们在if ... else结构中进行了一些检查：

+ +
    +
  1. 首先，我们检查消息是否适合被警告。如果它是一个空字符串或根本不是字符串，我们会使用合适的错误消息拒绝该promise。
    2. +
  2. 接下来，我们检查间隔是否是适当的间隔值。如果是负数或不是数字，我们会使用合适的错误消息拒绝promise。
    3. +
  3. 最后，如果参数看起来都正常，我们使用setTimeout()在指定的时间间隔过后，使用指定的消息解析promise。
    4. +
+ +

由于timeoutPromise()函数返回一个Promise，我们可以将.then()，.catch()等链接到它上面以利用它的功能。现在让我们使用它 - 将以前的timeoutPromise用法替换为以下值：

+ +
timeoutPromise('Hello there!', 1000)
+.then(message => {
+   alert(message);
+})
+.catch(e => {
+  console.log('Error: ' + e);
+});
+ +

当你按原样保存并运行代码时，一秒钟后你将收到消息提醒。现在尝试将消息设置为空字符串或将间隔设置为负数，例如，你将能够通过相应的错误消息查看被拒绝的promise！你还可以尝试使用已解决的消息执行其他操作，而不仅仅是提醒它。

+ +
+

注意: 你可以在GitHub上找到我们的这个示例版本custom-promise2.html（另请参阅source code）。

+
+ +

一个更真实的例子

+ +

上面的例子是故意做得简单，以使概念易于理解，但它并不是实际上完全异步。异步性质基本上是使用setTimeout()伪造的，尽管它仍然表明promises对于创建具有合理的操作流程，良好的错误处理等的自定义函数很有用

+ +

我们想邀请你学习的一个例子是Jake Archibald's idb library，它真正地显示了Promise()构造函数的有用异步应用程序。这采用了 IndexedDB API，它是一种旧式的基于回调的API，用于在客户端存储和检索数据，并允许你将其与promises一起使用。如果你查看main library file，你将看到我们在上面讨论过的相同类型的技术。以下块将许多IndexedDB方法使用的基本请求模型转换为使用promise：

+ +
function promisifyRequest(request) {
+  return new Promise(function(resolve, reject) {
+    request.onsuccess = function() {
+      resolve(request.result);
+    };
+
+    request.onerror = function() {
+      reject(request.error);
+    };
+  });
+}
+ +

这可以通过添加一些事件处理程序来实现，这些事件处理程序在适当的时候实现（fullfill）和拒绝（reject）promise。

+ + + +

总结

+ +

当我们不知道函数的返回值或返回需要多长时间时，Promises是构建异步应用程序的好方法。它们使得在没有深度嵌套回调的情况下更容易表达和推理异步操作序列，并且它们支持类似于同步try ... catch语句的错误处理方式。

+ +

Promise适用于所有现代浏览器的最新版本;promise有兼容问题的唯一情况是Opera Mini和IE11及更早版本。

+ +

本文中，我们没有涉及的所有promise的功能，只是最有趣和最有用的功能。当你开始了解有关promise的更多信息时，你会遇到更多功能和技巧。

+ +

大多数现代Web API都是基于promise的，因此你需要了解promise才能充分利用它们。这些API包括WebRTC，Web Audio API，Media Capture and Streams等等。随着时间的推移，Promises将变得越来越重要，因此学习使用和理解它们是学习现代JavaScript的重要一步。

+ +

参见

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}

+ +

 本章内容

+ + diff --git a/files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html new file mode 100644 index 0000000000..2cf83da82c --- /dev/null +++ b/files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html @@ -0,0 +1,617 @@ +--- +title: '合作异步JavaScript: 超时和间隔' +slug: learn/JavaScript/异步/超时和间隔 +translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals +--- +
{{LearnSidebar}}
+ +
+ +
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
+ +
+ +

在这里，我们将讨论传统的JavaScript方法，这些方法可以在一段时间或一段规则间隔(例如，每秒固定的次数)之后，以异步方式运行代码，并讨论它们的用处，以及它们的固有问题。

+ + + + + + + + + + + + +
预备条件:基本的计算机知识，对JavaScript基本原理有较好的理解。
目标:了解异步循环和间隔及其用途。
+ +

介绍

+ +

很长一段时间以来，web平台为JavaScript程序员提供了许多函数，这些函数允许您在一段时间间隔过后异步执行代码，或者重复异步执行代码块，直到您告诉它停止为止。这些都是:

+ +
+
setTimeout()
+
在指定的时间后执行一段代码.
+
setInterval()
+
以固定的时间间隔，重复运行一段代码.
+
requestAnimationFrame()
+
setInterval()的现代版本;在浏览器下一次重新绘制显示之前执行指定的代码块，从而允许动画在适当的帧率下运行，而不管它在什么环境中运行.
+
+ +

这些函数设置的异步代码实际上在主线程上运行（在其指定的计时器过去之后）。

+ +

在 setTimeout() 调用执行之前或 setInterval() 迭代之间可以（并且经常会）运行其他代码。根据这些操作的处理器密集程度，它们可以进一步延迟异步代码，因为任何异步代码仅在主线程可用后才执行（换句话说，当调用栈为空时）。在阅读本文时，您将学到更多关于此问题的信息。

+ +

无论如何，这些函数用于在web站点或应用程序上运行不间断的动画和其他后台处理。在下面的部分中，我们将向您展示如何使用它们。

+ +

setTimeout()

+ +

正如前述， setTimeout() 在指定的时间后执行一段特定代码. 它需要如下参数:

+ + + +
+

Note: 指定的时间（或延迟）不能保证在指定的确切时间之后执行，而是最短的延迟执行时间。在主线程上的堆栈为空之前，传递给这些函数的回调将无法运行。

+ +

结果，像 setTimeout(fn, 0) 这样的代码将在堆栈为空时立即执行，而不是立即执行。如果执行类似 setTimeout(fn, 0) 之类的代码，之后立即运行从 1 到 100亿 的循环之后，回调将在几秒后执行。 

+
+ +

在下面的示例中，浏览器将在执行匿名函数之前等待两秒钟，然后显示alert消息 (see it running live, and see the source code):

+ +
let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+ +

我们指定的函数不必是匿名的。我们可以给函数一个名称，甚至可以在其他地方定义它，并将函数引用传递给 setTimeout() 。以下两个版本的代码片段相当于第一个版本:

+ +
// With a named function
+let myGreeting = setTimeout(function sayHi() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+
+// With a function defined separately
+function sayHi() {
+  alert('Hello Mr. Universe!');
+}
+
+let myGreeting = setTimeout(sayHi, 2000);
+ +

例如，如果我们有一个函数既需要从超时调用，也需要响应某个事件，那么这将非常有用。此外它也可以帮助保持代码整洁，特别是当超时回调超过几行代码时。

+ +

setTimeout() 返回一个标志符变量用来引用这个间隔，可以稍后用来取消这个超时任务，下面就会学到 {{anch("Clearing timeouts")}} 。

+ +

传递参数给setTimeout() 

+ +

我们希望传递给setTimeout()中运行的函数的任何参数，都必须作为列表末尾的附加参数传递给它。

+ +

例如，我们可以重构之前的函数，这样无论传递给它的人的名字是什么，它都会向它打招呼：

+ +
function sayHi(who) {
+  alert('Hello ' + who + '!');
+}
+ +

人名可以通过第三个参数传进 setTimeout() ：

+ +
let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');
+ +

清除超时

+ +

最后，如果创建了 timeout，您可以通过调用clearTimeout()，将setTimeout()调用的标识符作为参数传递给它，从而在超时运行之前取消。要取消上面的超时，你需要这样做：

+ +
clearTimeout(myGreeting);
+ +
+

注意: 请参阅 greeter-app.html 以获得稍微复杂一点的演示，该演示允许您在表单中设置要打招呼的人的姓名，并使用单独的按钮取消问候语（see the source code also）。

+
+ +

setInterval()

+ +

当我们需要在一段时间之后运行一次代码时，setTimeout()可以很好地工作。但是当我们需要反复运行代码时会发生什么，例如在动画的情况下?

+ +

这就是setInterval()的作用所在。这与setTimeout()的工作方式非常相似，只是作为第一个参数传递给它的函数，重复执行的时间不少于第二个参数给出的毫秒数，而不是一次执行。您还可以将正在执行的函数所需的任何参数作为 setInterval() 调用的后续参数传递。

+ +

让我们看一个例子。下面的函数创建一个新的Date()对象，使用toLocaleTimeString()从中提取一个时间字符串，然后在UI中显示它。然后，我们使用setInterval()每秒运行该函数一次，创建一个每秒更新一次的数字时钟的效果。

+ +

(see this live, and also see the source):

+ +
function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);
+ +

像setTimeout()一样, setInterval() 返回一个确定的值，稍后你可以用它来取消间隔任务。

+ +

清除intervals

+ +

setInterval()永远保持运行任务,除非我们做点什么——我们可能会想阻止这样的任务,否则当浏览器无法完成任何进一步的任务时我们可能得到错误, 或者动画处理已经完成了。我们可以用与停止超时相同的方法来实现这一点——通过将setInterval()调用返回的标识符传递给clearInterval()函数:

+ +
const myInterval = setInterval(myFunction, 2000);
+
+clearInterval(myInterval);
+ +

主动学习：创建秒表!

+ +

话虽如此，我们还是要给你一个挑战。以我们的setInterval-clock.html为例，修改它以创建您自己的简单秒表。

+ +

你要像前面一样显示时间，但是在这里，你需要：

+ + + +

提示:

+ + + +
+

Note: 如果您在操作过程有困难，请参考 see it runing live (see the source code also).

+
+ +

关于 setTimeout() 和 setInterval() 需要注意的几点

+ +

当使用 setTimeout() 和 setInterval()的时候，有几点需要额外注意。 现在让我们回顾一下：

+ +

递归的timeouts

+ +

还有另一种方法可以使用setTimeout()：我们可以递归调用它来重复运行相同的代码，而不是使用setInterval()。

+ +

下面的示例使用递归setTimeout()每100毫秒运行传递来的函数：

+ +
let i = 1;
+
+setTimeout(function run() {
+  console.log(i);
+  i++;
+  setTimeout(run, 100);
+}, 100);
+ +

将上面的示例与下面的示例进行比较 ––这使用 setInterval() 来实现相同的效果：

+ +
let i = 1;
+
+setInterval(function run() {
+  console.log(i);
+  i++
+}, 100);
+ +

递归setTimeout()和setInterval()有何不同？

+ +

上述代码的两个版本之间的差异是微妙的。

+ + + +

当你的代码有可能比你分配的时间间隔，花费更长时间运行时，最好使用递归的 setTimeout() - 这将使执行之间的时间间隔保持不变，无论代码执行多长时间，你不会得到错误。

+ +

立即超时

+ +

使用0用作setTimeout()的回调函数会立刻执行，但是在主线程代码运行之后执行。

+ +

举个例子，下面的代码(see it live) 输出一个包含警报的"Hello"，然后在您点击第一个警报的OK之后立即弹出“world”。

+ +
setTimeout(function() {
+  alert('World');
+}, 0);
+
+alert('Hello');
+ +

如果您希望设置一个代码块以便在所有主线程完成运行后立即运行，这将很有用。将其放在异步事件循环中，这样它将随后直接运行。

+ +

使用 clearTimeout() or clearInterval()清除

+ +

clearTimeout() 和clearInterval() 都使用相同的条目列表进行清除。有趣的是，这意味着你可以使用任一一种方法来清除 setTimeout() 和 setInterval()。

+ +

但为了保持一致性，你应该使用 clearTimeout() 来清除 setTimeout() 条目，使用 clearInterval() 来清除 setInterval() 条目。 这样有助于避免混乱。

+ +

requestAnimationFrame()

+ +

requestAnimationFrame() 是一个专门的循环函数，旨在浏览器中高效运行动画。它基本上是现代版本的setInterval() —— 它在浏览器重新加载显示内容之前执行指定的代码块，从而允许动画以适当的帧速率运行，不管其运行的环境如何。

+ +

它是针对setInterval() 遇到的问题创建的，比如 setInterval()并不是针对设备优化的帧率运行，有时会丢帧。还有即使该选项卡不是活动的选项卡或动画滚出页面等问题 。

+ +

（在CreativeJS上了解有关此内容的更多信息）.

+ +
+

注意： 你可以在课程中其他地方找到requestAnimationFrame() 的使用范例—参见 Drawing graphics, 和 Object building practice。

+
+ +

该方法将重新加载页面之前要调用的回调函数作为参数。这是您将看到的常见表达：

+ +
function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();
+ +

这个想法是要定义一个函数，在其中更新动画 (例如，移动精灵，更新乐谱，刷新数据等)，然后调用它来开始这个过程。在函数的末尾，以 requestAnimationFrame() 传递的函数作为参数进行调用，这指示浏览器在下一次显示重新绘制时再次调用该函数。然后这个操作连续运行， 因为requestAnimationFrame() 是递归调用的。

+ +
+

注意: 如果要执行某种简单的常规DOM动画, CSS 动画 可能更快，因为它们是由浏览器的内部代码计算而不是JavaScript直接计算的。但是，如果您正在做一些更复杂的事情，并且涉及到在DOM中不能直接访问的对象(such as 2D Canvas API or WebGL objects), requestAnimationFrame() 在大多数情况下是更好的选择。

+
+ +

你的动画跑得有多快？

+ +

动画的平滑度直接取决于动画的帧速率，并以每秒帧数（fps）为单位进行测量。这个数字越高，动画看起来就越平滑。

+ +

由于大多数屏幕的刷新率为60Hz，因此在使用web浏览器时，可以达到的最快帧速率是每秒60帧（FPS）。然而，更多的帧意味着更多的处理，这通常会导致卡顿和跳跃-也称为丢帧或跳帧。

+ +

如果您有一个刷新率为60Hz的显示器，并且希望达到60fps，则大约有16.7毫秒（1000/60）来执行动画代码来渲染每个帧。这提醒我们，我们需要注意每次通过动画循环时要运行的代码量。

+ +

requestAnimationFrame() 总是试图尽可能接近60帧/秒的值，当然有时这是不可能的如果你有一个非常复杂的动画，你是在一个缓慢的计算机上运行它，你的帧速率将更少。requestAnimationFrame() 会尽其所能利用现有资源提升帧速率。

+ +

 requestAnimationFrame() 与 setInterval() 和 setTimeout()有什么不同?

+ +

让我们进一步讨论一下 requestAnimationFrame() 方法与前面介绍的其他方法的区别. 下面让我们看一下代码:

+ +
function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();
+ +

现在让我们看看如何使用setInterval():

+ +
function draw() {
+   // Drawing code goes here
+}
+
+setInterval(draw, 17);
+ +

如前所述，我们没有为requestAnimationFrame();指定时间间隔；它只是在当前条件下尽可能快速平稳地运行它。如果动画由于某些原因而处于屏幕外浏览器也不会浪费时间运行它。

+ +

 另一方面setInterval()需要指定间隔。我们通过公式1000毫秒/60Hz得出17的最终值，然后将其四舍五入。四舍五入是一个好主意，浏览器可能会尝试运行动画的速度超过60fps，它不会对动画的平滑度有任何影响。如前所述，60Hz是标准刷新率。

+ +

包括时间戳

+ +

传递给 requestAnimationFrame() 函数的实际回调也可以被赋予一个参数（一个时间戳值），表示自 requestAnimationFrame() 开始运行以来的时间。这是很有用的，因为它允许您在特定的时间以恒定的速度运行，而不管您的设备有多快或多慢。您将使用的一般模式如下所示：

+ +
let startTime = null;
+
+function draw(timestamp) {
+    if(!startTime) {
+      startTime = timestamp;
+    }
+
+   currentTime = timestamp - startTime;
+
+   // Do something based on current time
+
+   requestAnimationFrame(draw);
+}
+
+draw();
+ +

浏览器支持

+ +

 与setInterval()或setTimeout() 相比最近的浏览器支持requestAnimationFrame()

+ +

— requestAnimationFrame().在Internet Explorer 10及更高版本中可用。因此，除非您的代码需要支持旧版本的IE，否则没有什么理由不使用requestAnimationFrame() 。

+ +

一个简单的例子

+ +

学习上述理论已经足够了，下面让我们仔细研究并构建自己的requestAnimationFrame() 示例。我们将创建一个简单的“旋转器动画”（spinner animation），即当应用程序忙于连接到服务器时可能会显示的那种动画。

+ +
+

注意: 一般来说，像以下例子中如此简单的动画应用CSS动画来实现，这里使用requestAnimationFrame()只是为了帮助解释其用法。requestAnimationFrame()正常应用于如逐帧更新游戏画面这样的复杂动画。

+
+ +
    +
  1. +

    首先, 下载我们的网页模板。

    +
    2. +
  2. +

    放置一个空的 {{htmlelement("div")}} 元素进入 {{htmlelement("body")}}, 然后在其中加入一个 ↻ 字符.这是一个将循环的字符将在我们的例子中作为我们的旋转器（spinner）。

    +
    3. +
  3. +

    用任何你喜欢的方法应用下述的CSS到HTML模板中。这些在页面上设置了一个红色背景，将<body>的高度设置为100%<html>的高度，并将<div>水平和竖直居中。

    + + 
    html {
+  background-color: white;
+  height: 100%;
+}
+
+body {
+  height: inherit;
+  background-color: red;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div {
+  display: inline-block;
+  font-size: 10rem;
+}
    +
    4. +
  4. +

    插入一个 {{htmlelement("script")}}元素在 </body> 标签之上。

    +
    5. +
  5. +

    插入下述的JavaScript在你的 <script> 元素中。这里我们存储了一个<div>的引用在一个常量中，设置rotateCount变量为 0, 设置一个未初始化的变量之后将会用作容纳一个requestAnimationFrame() 的调用, 然后设置一个 startTime 变量为 null，它之后将会用作存储 requestAnimationFrame() 的起始时间.。

    + + 
    const spinner = document.querySelector('div');
+let rotateCount = 0;
+let rAF;
+let startTime = null;
    +
    6. +
  6. +

    在之前的代码下面, 插入一个 draw() 函数将被用作容纳我们的动画代码，并且包含了 时间戳 参数。

    + + 
    function draw(timestamp) {
+
+}
    +
    7. +
  7. +

    在draw()中, 加入下述的几行。 如果起始时间还没有被赋值的话，将timestamp 传给它（这只将发生在循环中的第一步）。 并赋值给rotateCount ，以旋转 旋转器(spinning)（此处取(当前时间戳 – 起始时间戳) / 3，以免它转得太快）:

    + + 
      if (!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
    +
    8. +
  8. +

    在draw()内我们刚刚添加的代码之后，添加以下代码 — 此处是在检查rotateCount 的值是否超过了359 (e.g. 360, 一个正圆的度数)。 如果是，与360取模（值除以 360 后剩下的余数），使得圆圈的动画能以合理的低值连续播放。需要注意的是，这样的操作并不是必要的，只是比起类似于“128000度”的值，运行在 0-359 度之间会使你的操作更容易些。

    + + 
    if (rotateCount > 359) {
+  rotateCount %= 360;
+}
    +
    9. +
  9. +

    接下来，在上一个块下面添加以下行以实际旋转 旋转(spinner)器：

    + + 
    spinner.style.transform = `rotate(${rotateCount}deg)`;
    +
    10. +
  10. +

    在函数draw()内的最下方，插入下面这行代码。这是整个操作中最关键的部分 — 我们将前面定义的变量设置为以draw()函数为参数的活动requestAnimation()调用。 这样动画就开始了，以尽可能接近60 FPS的速率不断地运行draw()函数。

    + + 
    rAF = requestAnimationFrame(draw);
    +
    11. +
  11. +

    在 draw() 函数定义下方，添加对 draw() 函数的调用以启动动画。

    +
    12. +
  12. + 
    draw();
    +
    13. +
+ +
+

Note: You can find this example live on GitHub (see the source code also).

+
+ +

撤销requestAnimationFrame()

+ +

requestAnimationFrame()可用与之对应的cancelAnimationFrame()方法“撤销”（不同于“set…”类方法的“清除”，此处更接近“撤销”之意）。

+ +

该方法以requestAnimationFrame()的返回值为参数，此处我们将该返回值存在变量 rAF 中：

+ +
cancelAnimationFrame(rAF);
+ +

主动学习： 启动和停止旋转器（spinner）

+ +

在这个练习中，我们希望你能对cancelAnimationFrame()方法做一些测试，在之前的示例中添加新内容。你需要在示例中添加一个事件监听器，用于当鼠标在页面任意位置点击时，启动或停止旋转器。 

+ +

一些提示：

+ + + +
+

Note: 先自己尝试一下，如果你确实遇到困难，可以参看我们的在线示例和源代码。

+
+ +

限制 (节流) requestAnimationFrame()动画

+ +

requestAnimationFrame() 的限制之一是无法选择帧率。在大多数情况下，这不是问题，因为通常希望动画尽可能流畅地运行。但是，当要创建老式的8位类型的动画时，怎么办？

+ +

例如，在我们的 Drawing Graphics 文章中的猴子岛行走动画中的一个问题：

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}

+ +

在此示例中，必须为角色在屏幕上的位置及显示的精灵设置动画。精灵动画中只有6帧。如果通过 requestAnimationFrame() 为屏幕上显示的每个帧显示不同的精灵帧，则 Guybrush 的四肢移动太快，动画看起来很荒谬。因此，此示例使用以下代码限制精灵循环的帧率：

+ +
if (posX % 13 === 0) {
+  if (sprite === 5) {
+    sprite = 0;
+  } else {
+    sprite++;
+  }
+}
+ +

因此，代码每13个动画帧循环一次精灵。

+ +

...实际上，大约是每 6.5 帧，因为我们将每帧更新 posX 2个单位值（角色在屏幕上的位置）

+ +
if(posX > width/2) {
+  newStartPos = -( (width / 2) + 102 );
+  posX = Math.ceil(newStartPos / 13) * 13;
+  console.log(posX);
+} else {
+  posX += 2;
+}
+ +

这是用于计算如何更新每个动画帧中的位置的代码。

+ +

用于限制动画的方法将取决于特定代码。例如，在前面的旋转器实例中，可以通过仅在每帧中增加 rotateCount 一个单位(而不是两个单位)来使其运动速度变慢。

+ +

主动学习：反应游戏

+ +

对于本文的最后部分，将创建一个 2 人反应游戏。游戏将有两个玩家，其中一个使用 A 键控制游戏，另一个使用 L 键控制游戏。

+ +

按下 开始 按钮后，像前面看到的旋转器那样的将显示 5 到 10 秒之间的随机时间。之后将出现一条消息，提示 “PLAYERS GO！！”。一旦这发生，第一个按下其控制按钮的玩家将赢得比赛。

+ +

{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}

+ +

让我们来完成以下工作：

+ +
    +
  1. +

    首先，下载 starter file for the app 。其中包含完成的 HTML 结构和 CSS 样式，为我们提供了一个游戏板，其中显示了两个玩家的信息（如上所示），但 spinner 和 结果段落重叠显示，只需要编写 JavaScript 代码。

    +
    2. +
  2. +

    在页面上空的 {{htmlelement("script")}} 元素里，首先添加以下几行代码，这些代码定义了其余代码中需要的一些常量和变量：

    + + 
    const spinner = document.querySelector('.spinner p');
+const spinnerContainer = document.querySelector('.spinner');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+const btn = document.querySelector('button');
+const result = document.querySelector('.result');
    + +

    这些是:

    + +
      +
    1. 对旋转器的引用，因此可以对其进行动画处理。
      2. +
    2. 包含旋转器 {{htmlelement("div")}} 元素的引用。用于显示和隐藏它。
      3. +
    3. 旋转计数。这确定了显示在动画每一帧上的旋转器旋转了多少。
      4. +
    4. 开始时间为null。当旋转器开始旋转时，它将赋值为 开始时间。
      5. +
    5. 一个未初始化的变量，用于之后存储使 旋转器 动画化的  {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}}  调用。
      6. +
    6. 开始按钮的引用。
      7. +
    7. 结果字段的引用。
      8. +
    +
    3. +
  3. +

    接下来，在前几行代码下方，添加以下函数。它只接收两个数字并返回一个在两个数字之间的随机数。稍后将需要它来生成随机超时间隔。

    + + 
    function random(min,max) {
+  var num = Math.floor(Math.random()*(max-min)) + min;
+  return num;
+}
    +
    4. +
  4. +

    接下来添加 draw() 函数以使 旋转器 动画化。这与之前的简单旋转器示例中的版本非常相似：

    + + 
      function draw(timestamp) {
+    if(!startTime) {
+     startTime = timestamp;
+    }
+
+    let rotateCount = (timestamp - startTime) / 3;
+
+    if(rotateCount > 359) {
+      rotateCount %= 360;
+    }
+
+    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+    rAF = requestAnimationFrame(draw);
+  }
    +
    5. +
  5. +

    现在是时候在页面首次加载时设置应用程序的初始状态了。添加以下两行，它们使用 display: none; 隐藏结果段落和旋转器容器。

    + + 
    result.style.display = 'none';
+spinnerContainer.style.display = 'none';
    +
    6. +
  6. +

    接下来，定义一个 reset() 函数。该函数在游戏结束后将游戏设置回初始状态以便再次开启游戏。在代码底部添加以下内容：

    + + 
    function reset() {
+  btn.style.display = 'block';
+  result.textContent = '';
+  result.style.display = 'none';
+}
    +
    7. +
  7. 好的，准备充分！现在该使游戏变得可玩了！将以下代码块添加到代码中。 start() 函数调用 draw() 以启动 旋转器，并在UI中显示它，隐藏“开始”按钮，这样您就无法通过同时启动多次来弄乱游戏，并运行一个经过5到10秒的随机间隔后，会运行 setEndgame() 函数的 setTimeout() 。下面的代码块还将一个事件侦听器添加到按钮上，以在单击它时运行 start() 函数。 + 
    btn.addEventListener('click', start);
+
+function start() {
+  draw();
+  spinnerContainer.style.display = 'block';
+  btn.style.display = 'none';
+  setTimeout(setEndgame, random(5000,10000));
+}
    +
    8. +
  8. 添加以下方法到代码：
    9. +
+ +
function setEndgame() {
+  cancelAnimationFrame(rAF);
+  spinnerContainer.style.display = 'none';
+  result.style.display = 'block';
+  result.textContent = 'PLAYERS GO!!';
+
+  document.addEventListener('keydown', keyHandler);
+
+  function keyHandler(e) {
+    console.log(e.key);
+    if(e.key === 'a') {
+      result.textContent = 'Player 1 won!!';
+    } else if(e.key === 'l') {
+      result.textContent = 'Player 2 won!!';
+    }
+
+    document.removeEventListener('keydown', keyHandler);
+    setTimeout(reset, 5000);
+  };
+}
+ +

逐步执行以下操作：

+ +
    +
  1. 首先通过 {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}}  取消 旋转器 动画（清理不必要的流程总是一件好事），隐藏 旋转器 容器。
    2. +
  2. 接下来，显示结果段落并将其文本内容设置为“ PLAYERS GO !!”。向玩家发出信号，表示他们现在可以按下按钮来取胜。
    3. +
  3. 将 keydown 事件侦听器附加到 document。当按下任何按钮时，keyHandler() 函数将运行。
    4. +
  4. 在 keyHandler() 里，在 keyHandler() 内部，代码包括作为参数的事件对象作为参数（用 e 表示）- 其 {{domxref("KeyboardEvent.key", "key")}} 属性包含刚刚按下的键，可以通过这个对象来对特定的操作和特定的按键做出响应。
    5. +
  5. 将变量 isOver 设置为 false ，这样我们就可以跟踪是否按下了正确的按键以使玩家1或2获胜。我们不希望游戏在按下错误的键后结束。
    6. +
  6. 将 e.key 输出到控制台，这是找出所按的不同键的键值的有用方法。
    7. +
  7. 当 e.key 为“ a”时，显示一条消息说玩家1获胜；当 e.key 为“ l”时，显示消息说玩家2获胜。 （注意：这仅适用于小写的a和l - 如果提交了大写的 A 或 L（键加上 Shift），则将其视为另一个键！）如果按下了其中一个键，请将 isOver 设置为 true 。
    8. +
  8. 仅当 isOver 为 true 时，才使用 {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} 删除 keydown 事件侦听器，以便一旦产生获胜的按键，就不再有键盘输入可以弄乱最终游戏结果。您还可以使用 setTimeout() 在5秒钟后调用 reset()－如前所述，此函数将游戏重置为原始状态，以便可以开始新游戏。
    9. +
+ +

就这样-一切都完成了！

+ +
+

Note: 如果卡住了， check out our version of the reaction game (see the source code also).

+
+ +

结论

+ +

就是这样-异步循环和间隔的所有要点在一篇文章中介绍了。您会发现这些方法在许多情况下都很有用，但请注意不要过度使用它们！因为它们仍然在主线程上运行，所以繁重的回调（尤其是那些操纵DOM的回调）会在不注意的情况下降低页面的速度。

+ +

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}

+ +

In this module

+ + diff --git a/files/zh-cn/learn/javascript/building_blocks/image_gallery/index.html b/files/zh-cn/learn/javascript/building_blocks/image_gallery/index.html new file mode 100644 index 0000000000..22101b20ba --- /dev/null +++ b/files/zh-cn/learn/javascript/building_blocks/image_gallery/index.html @@ -0,0 +1,244 @@ +--- +title: 照片库 +slug: learn/JavaScript/Building_blocks/相片走廊 +tags: + - 事件 + - 事件句柄 + - 初学者 + - 学习 + - 循环 + - 评估 +translation_of: Learn/JavaScript/Building_blocks/Image_gallery +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
+ +

我们已经学习了 JavaScript 基础的块结构，下面我们通过编写一个常见的基于 JavaScript 的照片库来测验一下你对于循环、函数、条件和事件的掌握情况。

+ + + + + + + + + + + + +
预备知识:请读完本章其它所有小节的内容后再开始这个测验。
目标:测试你对 JavaScript 的循环、函数、条件语句和事件处理的掌握程度。
+ +

起点

+ +

下载压缩包 并在本地解压。

+ +
+

注：你还可以使用类似 JSBin 或 Thimble 这些在线编辑器来完成测验。你可以把 HTML、CSS 和 JavaScript 代码复制过去。如果你选的工具没有独立的 JavaScript/CSS 板面，可以随时在 HTML 页面中添加 <script>/<style> 元素。

+
+ +

项目简介

+ +

我们提供了一些 HTML、CSS、相片和几行 JavaScript 代码。需要你来编写必要的 JavaScript 代码让这个项目运行起来。HTML 的 body 部分如下：

+ +
<h1>照片库</h1>
+
+<div class="full-img">
+  <img class="displayed-img" src="images/pic1.jpg">
+  <div class="overlay"></div>
+  <button class="dark">变暗</button>
+</div>
+
+<div class="thumb-bar">
+
+</div>
+ +

你可以尝试操作一下这个示例，也可 在线打开。（不要偷看源代码哦！）

+ + + + + +

{{ EmbedLiveSample('Image_gallery', '100%', 680, "", "", "hide-codepen-jsfiddle") }}

+ +

以下是本例中 CSS 文件最值得关注的部分：

+ + + +

你的 JavaScript 需要：

+ + + +

可以看一下 完成的示例 体会一下。（别偷看代码哦）

+ +

步骤

+ +

以下是你的工作。

+ +

遍历照片

+ +

我们提供的代码中用一个名为 thumBar 的变量用来存储 thumb-bar <div> 的引用，创建了一个新的 <img> 元素，将它的 src 属性值设置成 xxx 占位符，并且将这个新的 <img> 元素添加到 thumbBar 里。

+ +

你应该:

+ +
    +
  1. 在"遍历图片"注释下方添加一个循环来遍历 5 张图片，只需要遍历 5 个数字，每个数字代表一张图片。
    2. +
  2. 每次迭代中，用图片路径的字符串替换掉占位符 xxx。即在每次迭代中把 src 属性设置为图片的路径。记住，图片都在 images 目录下，文件名是 pic1.jpg、pic2.jpg，等等。
    3. +
+ +

给每一个缩略图添加点击处理器

+ +

每次迭代中，你需要给当前的 newImage 加上一个 onclick 事件处理函数——它应该：

+ +
    +
  1. 找到当前图片的 src 属性值。这个可以通过对当前的 <img> 用 "src" 作为参数调用 getAttribute() 函数来完成，但是如何在代码里获取图片？用 newImage 是不行的，因为在事件处理函数应用之前循环已经结束，这样每次迭代 src 的值都会是最后一张图片。因此，对于每个事件处理器，<img> 都是函数的目标。是否可以从事件对象获得相关信息呢。
    2. +
  2. 调用一个函数，取上一步返回的 src 值作为参数。可以给这个函数起一个喜欢的名字。
    3. +
  3. 事件处理器函数应该把 displayed-img <img> 的 src 属性值设为作为参数传入的 src 值。我们已经提供了一个 displayedImg 变量存储相关的 <img>。注意我们需要的是一个定义好的、有名字的函数。
    4. +
+ +

为变亮/变暗按钮编写处理器

+ +

还剩最后的变亮/变暗 <button>。我们已经提供了一个名为 btn 的变量来存储 <button> 的引用。需要添加一个 onclick 事件处理函数：

+ +
    +
  1. 检查当前 <button> 按钮的类名称，仍可用 getAttribute() 函数取得。
    2. +
  2. 如果类名的值是 "dark", 将 <button> 的类名变为 "light"（使用 setAttribute()）, 文本内容变为 "变亮"，蒙板 <div> 的{{cssxref("background-color")}} 设为 "rgba(0,0,0,0.5)"。
    3. +
  3. 如果类名的值不是 "dark", 将 <button> 的类名变为 "dark"，文本内容变为 "变暗"，蒙板 <div> 的{{cssxref("background-color")}} 设为 "rgba(0,0,0,0)"。
    4. +
+ +

以下是实现上述 2、3 点所提功能的基本代码：

+ +
btn.setAttribute('class', xxx);
+btn.textContent = xxx;
+overlay.style.backgroundColor = xxx;
+ +

提示

+ + + +

测验

+ +

如果你是在课堂上进行这个测验，你可以把作品交给导或教授去打分了。如果你是在自学，可以很容易地在 本节测验的讨论页 或 Mozilla 聊天室的 #mdn 频道回复得到批改指南。请先自己试着做，作弊学不到任何东西！

+ +

{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

+ +

本章目录

+ + diff --git "a/files/zh-cn/learn/javascript/building_blocks/\347\233\270\347\211\207\350\265\260\345\273\212/index.html" "b/files/zh-cn/learn/javascript/building_blocks/\347\233\270\347\211\207\350\265\260\345\273\212/index.html" deleted file mode 100644 index 22101b20ba..0000000000 --- "a/files/zh-cn/learn/javascript/building_blocks/\347\233\270\347\211\207\350\265\260\345\273\212/index.html" +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: 照片库 -slug: learn/JavaScript/Building_blocks/相片走廊 -tags: - - 事件 - - 事件句柄 - - 初学者 - - 学习 - - 循环 - - 评估 -translation_of: Learn/JavaScript/Building_blocks/Image_gallery ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
- -

我们已经学习了 JavaScript 基础的块结构，下面我们通过编写一个常见的基于 JavaScript 的照片库来测验一下你对于循环、函数、条件和事件的掌握情况。

- - - - - - - - - - - - -
预备知识:请读完本章其它所有小节的内容后再开始这个测验。
目标:测试你对 JavaScript 的循环、函数、条件语句和事件处理的掌握程度。
- -

起点

- -

下载压缩包 并在本地解压。

- -
-

注：你还可以使用类似 JSBin 或 Thimble 这些在线编辑器来完成测验。你可以把 HTML、CSS 和 JavaScript 代码复制过去。如果你选的工具没有独立的 JavaScript/CSS 板面，可以随时在 HTML 页面中添加 <script>/<style> 元素。

-
- -

项目简介

- -

我们提供了一些 HTML、CSS、相片和几行 JavaScript 代码。需要你来编写必要的 JavaScript 代码让这个项目运行起来。HTML 的 body 部分如下：

- -
<h1>照片库</h1>
-
-<div class="full-img">
-  <img class="displayed-img" src="images/pic1.jpg">
-  <div class="overlay"></div>
-  <button class="dark">变暗</button>
-</div>
-
-<div class="thumb-bar">
-
-</div>
- -

你可以尝试操作一下这个示例，也可 在线打开。（不要偷看源代码哦！）

- - - - - -

{{ EmbedLiveSample('Image_gallery', '100%', 680, "", "", "hide-codepen-jsfiddle") }}

- -

以下是本例中 CSS 文件最值得关注的部分：

- - - -

你的 JavaScript 需要：

- - - -

可以看一下 完成的示例 体会一下。（别偷看代码哦）

- -

步骤

- -

以下是你的工作。

- -

遍历照片

- -

我们提供的代码中用一个名为 thumBar 的变量用来存储 thumb-bar <div> 的引用，创建了一个新的 <img> 元素，将它的 src 属性值设置成 xxx 占位符，并且将这个新的 <img> 元素添加到 thumbBar 里。

- -

你应该:

- -
    -
  1. 在"遍历图片"注释下方添加一个循环来遍历 5 张图片，只需要遍历 5 个数字，每个数字代表一张图片。
    2. -
  2. 每次迭代中，用图片路径的字符串替换掉占位符 xxx。即在每次迭代中把 src 属性设置为图片的路径。记住，图片都在 images 目录下，文件名是 pic1.jpg、pic2.jpg，等等。
    3. -
- -

给每一个缩略图添加点击处理器

- -

每次迭代中，你需要给当前的 newImage 加上一个 onclick 事件处理函数——它应该：

- -
    -
  1. 找到当前图片的 src 属性值。这个可以通过对当前的 <img> 用 "src" 作为参数调用 getAttribute() 函数来完成，但是如何在代码里获取图片？用 newImage 是不行的，因为在事件处理函数应用之前循环已经结束，这样每次迭代 src 的值都会是最后一张图片。因此，对于每个事件处理器，<img> 都是函数的目标。是否可以从事件对象获得相关信息呢。
    2. -
  2. 调用一个函数，取上一步返回的 src 值作为参数。可以给这个函数起一个喜欢的名字。
    3. -
  3. 事件处理器函数应该把 displayed-img <img> 的 src 属性值设为作为参数传入的 src 值。我们已经提供了一个 displayedImg 变量存储相关的 <img>。注意我们需要的是一个定义好的、有名字的函数。
    4. -
- -

为变亮/变暗按钮编写处理器

- -

还剩最后的变亮/变暗 <button>。我们已经提供了一个名为 btn 的变量来存储 <button> 的引用。需要添加一个 onclick 事件处理函数：

- -
    -
  1. 检查当前 <button> 按钮的类名称，仍可用 getAttribute() 函数取得。
    2. -
  2. 如果类名的值是 "dark", 将 <button> 的类名变为 "light"（使用 setAttribute()）, 文本内容变为 "变亮"，蒙板 <div> 的{{cssxref("background-color")}} 设为 "rgba(0,0,0,0.5)"。
    3. -
  3. 如果类名的值不是 "dark", 将 <button> 的类名变为 "dark"，文本内容变为 "变暗"，蒙板 <div> 的{{cssxref("background-color")}} 设为 "rgba(0,0,0,0)"。
    4. -
- -

以下是实现上述 2、3 点所提功能的基本代码：

- -
btn.setAttribute('class', xxx);
-btn.textContent = xxx;
-overlay.style.backgroundColor = xxx;
- -

提示

- - - -

测验

- -

如果你是在课堂上进行这个测验，你可以把作品交给导或教授去打分了。如果你是在自学，可以很容易地在 本节测验的讨论页 或 Mozilla 聊天室的 #mdn 频道回复得到批改指南。请先自己试着做，作弊学不到任何东西！

- -

{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

- -

本章目录

- - diff --git a/files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.html new file mode 100644 index 0000000000..2730489d15 --- /dev/null +++ b/files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.html @@ -0,0 +1,468 @@ +--- +title: 为“弹球”示例添加新功能 +slug: Learn/JavaScript/Objects/向“弹跳球”演示程序添加新功能 +tags: + - JavaScript + - 初学者 + - 对象 + - 测验 + - 面向对象 +translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
+ +

在此次测验中, 你需要将上一节中的“弹球”演示程序作为模板，添加一些新的有趣的功能。

+ + + + + + + + + + + + +
预备知识:请确保完整学习本章所有内容后再开始测验。
目标:测试你对 JavaScript 对象和面向对象结构的理解。
+ +

开始

+ +

请先下载 index.html、style.css 和 main.js 三个文件。

+ +
+

注：也可以使用 JSBin 或 Thimble 这样的网站来进行测验。 你可以选择其中一个将HTML，CSS 和JavaScript 粘贴过去。 如果你的版本没有单独的 JavaScript / CSS 板块，可以把它们嵌入 HTML 页面内的 <script>/<style> 元素。

+
+ +

项目简介

+ +

我们的弹球 demo 很有趣, 但是现在我们想让它更具有互动性，我们为它添加一个由玩家控制的“恶魔圈”，如果恶魔圈抓到弹球会把它会吃掉。我们还想测验你面向对象的水平，首先创建一个通用 Shape() 对象，然后由它派生出弹球和恶魔圈。最后，我们为 demo 添加一个计分器来记录剩下的球数。

+ +

程序最终会像这样：

+ + + + + +

{{ EmbedLiveSample('Evil_circle', '100%', 480, "", "", "hide-codepen-jsfiddle") }}

+ +

可以 查看完成版本 来获得更全面的体验。（别偷看源代码哦。）

+ +

步骤

+ +

以下各节介绍你需要完成的步骤。

+ +

创建我们的新对象

+ +

首先， 改变你现有的构造器 Ball() 使其成为构造器 Shape() 并添加一个新的构造器 Ball() ：

+ +
    +
  1. 构造器 Shape() 应该像构造器 Ball() 那样的方式定义 x, y, velX, 和 velY 属性，但不包括 color 和 size 。
    2. +
  2. 还应该定义一个叫 exists 的新属性，用来标记球是否存在于程序中 （没有被恶魔圈吃掉）。这应该是一个布尔型（(true/false）。
    3. +
  3. 构造器 Ball() 应该从构造器 Shape() 继承 x, y, velX, velY,和 exists 属性。
    4. +
  4. 构造器 Ball() 还应该像最初的构造器 Ball() 那样定义一个 color 和一个size 属性。
    5. +
  5. 请记得给构造器 Ball() 的prototype 和 constructor 属性设置适当的值。
    6. +
+ +

draw(), update(), 和collisionDetect() 方法定义应保持不变。

+ +

你还需要为 new Ball() { ... } 构造器添加第五个参数—— exists， 且值为 true。

+ +

到这里， 尝试重新加载代码（运行程序），程序以及重新设计的对象都应该像之前那样工作。

+ +

定义恶魔圈 EvilCircle()

+ +

现在是时候来看看那个坏蛋了——恶魔圈 EvilCircle()! 我们的游戏中只会有一个恶魔圈，但我们仍然要使用继承自 Shape() 的构造器来定义它，这是为让你得到锻炼。 之后你可能会想再添加一个由另一个玩家控制的恶魔圈到程序中，或者有几个电脑控制的恶魔圈。你可没法通过一个恶魔圈来掌管程序中的这个世界，但这个评估中就先只这么做吧。

+ +

EvilCircle() 构造器应该从Shape() 继承 x, y, 和 exists ，velX 和 velY 要恒为 20。

+ +

可以这样做：Shape.call(this, x, y, 20, 20, exists);

+ +

它还应该定义自己的一些属性，如：

+ + + +

再次记得给你的 EvilCircle() 构造器的传递的参数中定义你继承的属性，并且给prototype 和 constructor 属性设置适当的值。

+ +

定义 EvilCircle() 的方法

+ +

EvilCircle() 应该有以下四个方法：

+ +

draw()

+ +

这个方法和 Ball()'s draw() 方法有着相同的目的：它们把都是对象的实例画在画布上（canvas） 。它们实现的方式差不多，所以你可以先复制 Ball.prototype.draw 的定义。然后你需要做下面的修改：

+ + + +

checkBounds()

+ +

这个方法和 Ball() 的 update() 函数做相同的事情—— 查看恶魔圈是否将要超出屏幕的边界， 并且禁止它超出。 同样，你可以直接复制 Ball.prototype.update 的定义, 但是你需要做一些修改：

+ + + +

setControls()

+ +

这个方法将会一个 onkeydown 的事件监听器给 window 对象，这样当特定的键盘按键按下的时候，我们就可以移动恶魔圈。下面的代码块应该放在方法的定义里：

+ +
window.onkeydown = e => {
+  switch(e.key) {
+    case 'a':
+      this.x -= this.velX;
+      break;
+    case 'd':
+      this.x += this.velX;
+      break;
+    case 'w':
+      this.y -= this.velY;
+      break;
+    case 's':
+      this.y += this.velY;
+      break;
+  }
+};
+ +

所以当一个按键按下时， 事件对象的 key 属性 就可以请求到按下的按键值。如果是代码中那四个指定的键值之一， 那么恶魔圈将会左右上下的移动。

+ +
+

译注：英文页面中使用了事件对象的 keyCode 属性，不推荐在新代码中使用该属性，应使用标准 key 属性代替。（详见介绍页面）

+
+ +
译注：这里的 window.onkeydown 用一个 箭头函数 代替了英文页面中的匿名函数，从而无需 var _this = this。
+ +

collisionDetect()

+ +

这个方法和 Ball()'s collisionDetect() 方法很相似，所以你可以从它那里复制过来作为新方法的基础。但有一些不同之处：

+ + + +

把恶魔圈带到程序中

+ +

现在我们已经定义了恶魔圈，我们需要让它显示到我们的屏幕中。为了做这件事，你需要修改一下 loop() 函数：

+ + + +

计算得分

+ +

为了计算得分，需按照以下步骤：

+ +
    +
  1. 在你的HTML文件中添加一个{{HTMLElement("p")}} 元素到 {{HTMLElement("h1")}} 元素的下面，其中包含文本 "还剩多少个球"。
    2. +
  2. 在你的CSS文件中，添加下面的代码到底部： + 
    p {
+  position: absolute;
+  margin: 0;
+  top: 35px;
+  right: 5px;
+  color: #aaa;
+}
    +
    3. +
  3. 在你的 JavaScript 文件中，做下列的修改： +
      +
    • 创建一个变量存储段落的引用。
      • +
    • 以同样的方式在屏幕上显示小球的数量。
      • +
    • 增加球数并在每次将球添加到屏幕里时显示更新的球数量。
      • +
    • 减少球数并在每次恶魔吃球时显示更新的球数（因为被吃掉的球不存在了）
      • +
    +
    4. +
+ +

提示

+ + + +

评定

+ +

如果你将此评估作为有组织的课程的一部分，你可以将你的成果交给您的老师/导师进行评分。 如果你是自学的，通过在 Learning Area Discourse thread， 或者在 Mozilla IRC 的 #mdn IRC 频道上申请，你可以十分容易地得到评分指南。首先先尝试这个练习，作弊不会有任何收获。

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}

+ +

本章目录

+ + diff --git a/files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.html b/files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.html new file mode 100644 index 0000000000..8fd0cc3256 --- /dev/null +++ b/files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.html @@ -0,0 +1,95 @@ +--- +title: 测试你的技能：面向对象的Javascript +slug: 'Learn/JavaScript/Objects/测试你的技能:面向对象的Javascript' +tags: + - JavaScript + - OOJS + - 初学者 + - 学习 + - 对象 + - 测试你的技能 +translation_of: 'Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript' +--- +
{{learnsidebar}}
+ +
这个测试的目的是为了评估你是否已经理解了我们的适合初学者的JavaScript面向对象，对象原型，和 JavaScript 中的继承文章。
+ +
+ +
+

注意: 你可以尝试在下方的交互编辑器，但是若你下载源码或是使用在线工具例如 CodePen, jsFiddle, 或 Glitch 来进行这些项目的话，会更有帮助。

+ +

如果你在过程中想不出解决方案，你可以向我们寻求帮助——查看在本页的底部章节 {{anch("Assessment or further help")}}。

+
+ +
+

注意: 在下方的例子中，如果在你的代码中有错误内容的话，错误内容将在页面的结果面板进行显示，以此来帮助你想出解决方案（若是下载的版本，请进入浏览器的 JavaScript 控制台）。

+
+ +

OOJS 1

+ +

In this task we provide you with a constructor. We want you to:

+ + + +

Try updating the live code below to recreate the finished example:

+ +

{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/oojs/oojs1.html", '100%', 400)}}

+ +
+

Download the starting point for this task to work in your own editor or in an online editor.

+
+ +

OOJS 2

+ +

Next up we want you to take the Shape class you saw in Task #1 (including the calcPerimeter() method) and recreate it using ES class syntax instead.

+ +

Test that it works by creating the square and triangle object instances as before (using new Shape() for both), and then calling their calcPerimeter() methods.

+ +

Try updating the live code below to recreate the finished example:

+ +

{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/oojs/oojs2.html", '100%', 400)}}

+ +
+

Download the starting point for this task to work in your own editor or in an online editor.

+
+ +

OOJS 3

+ +

Finally, we'd like you to start with the ES Shape class you created in the last task.

+ +

We'd like you to create a Square class that inherits from Shape, and adds a calcArea() method that calculates the square's area. Also set up the constructor so that the name property of Square object instances is automatically set to square, and the sides property is automatically set to 4. When invoking the constructor, you should therefore just need to provide the sideLength property.

+ +

Create an instance of the Square class called square with appropriate property values, and call its calcPerimeter() and calcArea() methods to show that it works ok.

+ +

Try updating the live code below to recreate the finished example:

+ +

{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/oojs/oojs3.html", '100%', 400)}}

+ +
+

Download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Assessment or further help

+ +

You can practice these examples in the Interactive Editors above.

+ +

If you would like your work assessed, or are stuck and want to ask for help:

+ +
    +
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.
    2. +
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: +
      +
    • A descriptive title such as "Assessment wanted for OOJS 1 skill test".
      • +
    • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
      • +
    • A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • +
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • +
    +
    3. +
diff --git "a/files/zh-cn/learn/javascript/objects/\345\220\221\342\200\234\345\274\271\350\267\263\347\220\203\342\200\235\346\274\224\347\244\272\347\250\213\345\272\217\346\267\273\345\212\240\346\226\260\345\212\237\350\203\275/index.html" "b/files/zh-cn/learn/javascript/objects/\345\220\221\342\200\234\345\274\271\350\267\263\347\220\203\342\200\235\346\274\224\347\244\272\347\250\213\345\272\217\346\267\273\345\212\240\346\226\260\345\212\237\350\203\275/index.html" deleted file mode 100644 index 2730489d15..0000000000 --- "a/files/zh-cn/learn/javascript/objects/\345\220\221\342\200\234\345\274\271\350\267\263\347\220\203\342\200\235\346\274\224\347\244\272\347\250\213\345\272\217\346\267\273\345\212\240\346\226\260\345\212\237\350\203\275/index.html" +++ /dev/null @@ -1,468 +0,0 @@ ---- -title: 为“弹球”示例添加新功能 -slug: Learn/JavaScript/Objects/向“弹跳球”演示程序添加新功能 -tags: - - JavaScript - - 初学者 - - 对象 - - 测验 - - 面向对象 -translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
- -

在此次测验中, 你需要将上一节中的“弹球”演示程序作为模板，添加一些新的有趣的功能。

- - - - - - - - - - - - -
预备知识:请确保完整学习本章所有内容后再开始测验。
目标:测试你对 JavaScript 对象和面向对象结构的理解。
- -

开始

- -

请先下载 index.html、style.css 和 main.js 三个文件。

- -
-

注：也可以使用 JSBin 或 Thimble 这样的网站来进行测验。 你可以选择其中一个将HTML，CSS 和JavaScript 粘贴过去。 如果你的版本没有单独的 JavaScript / CSS 板块，可以把它们嵌入 HTML 页面内的 <script>/<style> 元素。

-
- -

项目简介

- -

我们的弹球 demo 很有趣, 但是现在我们想让它更具有互动性，我们为它添加一个由玩家控制的“恶魔圈”，如果恶魔圈抓到弹球会把它会吃掉。我们还想测验你面向对象的水平，首先创建一个通用 Shape() 对象，然后由它派生出弹球和恶魔圈。最后，我们为 demo 添加一个计分器来记录剩下的球数。

- -

程序最终会像这样：

- - - - - -

{{ EmbedLiveSample('Evil_circle', '100%', 480, "", "", "hide-codepen-jsfiddle") }}

- -

可以 查看完成版本 来获得更全面的体验。（别偷看源代码哦。）

- -

步骤

- -

以下各节介绍你需要完成的步骤。

- -

创建我们的新对象

- -

首先， 改变你现有的构造器 Ball() 使其成为构造器 Shape() 并添加一个新的构造器 Ball() ：

- -
    -
  1. 构造器 Shape() 应该像构造器 Ball() 那样的方式定义 x, y, velX, 和 velY 属性，但不包括 color 和 size 。
    2. -
  2. 还应该定义一个叫 exists 的新属性，用来标记球是否存在于程序中 （没有被恶魔圈吃掉）。这应该是一个布尔型（(true/false）。
    3. -
  3. 构造器 Ball() 应该从构造器 Shape() 继承 x, y, velX, velY,和 exists 属性。
    4. -
  4. 构造器 Ball() 还应该像最初的构造器 Ball() 那样定义一个 color 和一个size 属性。
    5. -
  5. 请记得给构造器 Ball() 的prototype 和 constructor 属性设置适当的值。
    6. -
- -

draw(), update(), 和collisionDetect() 方法定义应保持不变。

- -

你还需要为 new Ball() { ... } 构造器添加第五个参数—— exists， 且值为 true。

- -

到这里， 尝试重新加载代码（运行程序），程序以及重新设计的对象都应该像之前那样工作。

- -

定义恶魔圈 EvilCircle()

- -

现在是时候来看看那个坏蛋了——恶魔圈 EvilCircle()! 我们的游戏中只会有一个恶魔圈，但我们仍然要使用继承自 Shape() 的构造器来定义它，这是为让你得到锻炼。 之后你可能会想再添加一个由另一个玩家控制的恶魔圈到程序中，或者有几个电脑控制的恶魔圈。你可没法通过一个恶魔圈来掌管程序中的这个世界，但这个评估中就先只这么做吧。

- -

EvilCircle() 构造器应该从Shape() 继承 x, y, 和 exists ，velX 和 velY 要恒为 20。

- -

可以这样做：Shape.call(this, x, y, 20, 20, exists);

- -

它还应该定义自己的一些属性，如：

- - - -

再次记得给你的 EvilCircle() 构造器的传递的参数中定义你继承的属性，并且给prototype 和 constructor 属性设置适当的值。

- -

定义 EvilCircle() 的方法

- -

EvilCircle() 应该有以下四个方法：

- -

draw()

- -

这个方法和 Ball()'s draw() 方法有着相同的目的：它们把都是对象的实例画在画布上（canvas） 。它们实现的方式差不多，所以你可以先复制 Ball.prototype.draw 的定义。然后你需要做下面的修改：

- - - -

checkBounds()

- -

这个方法和 Ball() 的 update() 函数做相同的事情—— 查看恶魔圈是否将要超出屏幕的边界， 并且禁止它超出。 同样，你可以直接复制 Ball.prototype.update 的定义, 但是你需要做一些修改：

- - - -

setControls()

- -

这个方法将会一个 onkeydown 的事件监听器给 window 对象，这样当特定的键盘按键按下的时候，我们就可以移动恶魔圈。下面的代码块应该放在方法的定义里：

- -
window.onkeydown = e => {
-  switch(e.key) {
-    case 'a':
-      this.x -= this.velX;
-      break;
-    case 'd':
-      this.x += this.velX;
-      break;
-    case 'w':
-      this.y -= this.velY;
-      break;
-    case 's':
-      this.y += this.velY;
-      break;
-  }
-};
- -

所以当一个按键按下时， 事件对象的 key 属性 就可以请求到按下的按键值。如果是代码中那四个指定的键值之一， 那么恶魔圈将会左右上下的移动。

- -
-

译注：英文页面中使用了事件对象的 keyCode 属性，不推荐在新代码中使用该属性，应使用标准 key 属性代替。（详见介绍页面）

-
- -
译注：这里的 window.onkeydown 用一个 箭头函数 代替了英文页面中的匿名函数，从而无需 var _this = this。
- -

collisionDetect()

- -

这个方法和 Ball()'s collisionDetect() 方法很相似，所以你可以从它那里复制过来作为新方法的基础。但有一些不同之处：

- - - -

把恶魔圈带到程序中

- -

现在我们已经定义了恶魔圈，我们需要让它显示到我们的屏幕中。为了做这件事，你需要修改一下 loop() 函数：

- - - -

计算得分

- -

为了计算得分，需按照以下步骤：

- -
    -
  1. 在你的HTML文件中添加一个{{HTMLElement("p")}} 元素到 {{HTMLElement("h1")}} 元素的下面，其中包含文本 "还剩多少个球"。
    2. -
  2. 在你的CSS文件中，添加下面的代码到底部： - 
    p {
-  position: absolute;
-  margin: 0;
-  top: 35px;
-  right: 5px;
-  color: #aaa;
-}
    -
    3. -
  3. 在你的 JavaScript 文件中，做下列的修改： -
      -
    • 创建一个变量存储段落的引用。
      • -
    • 以同样的方式在屏幕上显示小球的数量。
      • -
    • 增加球数并在每次将球添加到屏幕里时显示更新的球数量。
      • -
    • 减少球数并在每次恶魔吃球时显示更新的球数（因为被吃掉的球不存在了）
      • -
    -
    4. -
- -

提示

- - - -

评定

- -

如果你将此评估作为有组织的课程的一部分，你可以将你的成果交给您的老师/导师进行评分。 如果你是自学的，通过在 Learning Area Discourse thread， 或者在 Mozilla IRC 的 #mdn IRC 频道上申请，你可以十分容易地得到评分指南。首先先尝试这个练习，作弊不会有任何收获。

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}

- -

本章目录

- - diff --git "a/files/zh-cn/learn/javascript/objects/\346\265\213\350\257\225\344\275\240\347\232\204\346\212\200\350\203\275_colon_\351\235\242\345\220\221\345\257\271\350\261\241\347\232\204javascript/index.html" "b/files/zh-cn/learn/javascript/objects/\346\265\213\350\257\225\344\275\240\347\232\204\346\212\200\350\203\275_colon_\351\235\242\345\220\221\345\257\271\350\261\241\347\232\204javascript/index.html" deleted file mode 100644 index 8fd0cc3256..0000000000 --- "a/files/zh-cn/learn/javascript/objects/\346\265\213\350\257\225\344\275\240\347\232\204\346\212\200\350\203\275_colon_\351\235\242\345\220\221\345\257\271\350\261\241\347\232\204javascript/index.html" +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: 测试你的技能：面向对象的Javascript -slug: 'Learn/JavaScript/Objects/测试你的技能:面向对象的Javascript' -tags: - - JavaScript - - OOJS - - 初学者 - - 学习 - - 对象 - - 测试你的技能 -translation_of: 'Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript' ---- -
{{learnsidebar}}
- -
这个测试的目的是为了评估你是否已经理解了我们的适合初学者的JavaScript面向对象，对象原型，和 JavaScript 中的继承文章。
- -
- -
-

注意: 你可以尝试在下方的交互编辑器，但是若你下载源码或是使用在线工具例如 CodePen, jsFiddle, 或 Glitch 来进行这些项目的话，会更有帮助。

- -

如果你在过程中想不出解决方案，你可以向我们寻求帮助——查看在本页的底部章节 {{anch("Assessment or further help")}}。

-
- -
-

注意: 在下方的例子中，如果在你的代码中有错误内容的话，错误内容将在页面的结果面板进行显示，以此来帮助你想出解决方案（若是下载的版本，请进入浏览器的 JavaScript 控制台）。

-
- -

OOJS 1

- -

In this task we provide you with a constructor. We want you to:

- - - -

Try updating the live code below to recreate the finished example:

- -

{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/oojs/oojs1.html", '100%', 400)}}

- -
-

Download the starting point for this task to work in your own editor or in an online editor.

-
- -

OOJS 2

- -

Next up we want you to take the Shape class you saw in Task #1 (including the calcPerimeter() method) and recreate it using ES class syntax instead.

- -

Test that it works by creating the square and triangle object instances as before (using new Shape() for both), and then calling their calcPerimeter() methods.

- -

Try updating the live code below to recreate the finished example:

- -

{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/oojs/oojs2.html", '100%', 400)}}

- -
-

Download the starting point for this task to work in your own editor or in an online editor.

-
- -

OOJS 3

- -

Finally, we'd like you to start with the ES Shape class you created in the last task.

- -

We'd like you to create a Square class that inherits from Shape, and adds a calcArea() method that calculates the square's area. Also set up the constructor so that the name property of Square object instances is automatically set to square, and the sides property is automatically set to 4. When invoking the constructor, you should therefore just need to provide the sideLength property.

- -

Create an instance of the Square class called square with appropriate property values, and call its calcPerimeter() and calcArea() methods to show that it works ok.

- -

Try updating the live code below to recreate the finished example:

- -

{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/oojs/oojs3.html", '100%', 400)}}

- -
-

Download the starting point for this task to work in your own editor or in an online editor.

-
- -

Assessment or further help

- -

You can practice these examples in the Interactive Editors above.

- -

If you would like your work assessed, or are stuck and want to ask for help:

- -
    -
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.
    2. -
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: -
      -
    • A descriptive title such as "Assessment wanted for OOJS 1 skill test".
      • -
    • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
      • -
    • A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • -
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • -
    -
    3. -
diff --git "a/files/zh-cn/learn/javascript/\345\274\202\346\255\245/async_await/index.html" "b/files/zh-cn/learn/javascript/\345\274\202\346\255\245/async_await/index.html" deleted file mode 100644 index 739ab63602..0000000000 --- "a/files/zh-cn/learn/javascript/\345\274\202\346\255\245/async_await/index.html" +++ /dev/null @@ -1,379 +0,0 @@ ---- -title: 'async和await:让异步编程更简单' -slug: learn/JavaScript/异步/Async_await -translation_of: Learn/JavaScript/Asynchronous/Async_await ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
- -

async functions 和 await 关键字是最近添加到JavaScript语言里面的。它们是ECMAScript 2017 JavaScript版的一部分（参见ECMAScript Next support in Mozilla）。简单来说，它们是基基于promises的语法糖，使异步代码更易于编写和阅读。通过使用它们，异步代码看起来更像是老式同步代码，因此它们非常值得学习。本文为您提供了您需要了解的内容。

- - - - - - - - - - - - -
先决条件:基本的计算机知识，较好理解 JavaScript 基础，以及理解一般异步代码和 promises 。
目标:理解并使用 promise
- -

async/await 基础

- -

在代码中使用 async / await 有两个部分。

- -

async 关键字

- -

首先，我们使用 async 关键字，把它放在函数声明之前，使其成为 async function。异步函数是一个知道怎样使用 await 关键字调用异步代码的函数。

- -

尝试在浏览器的JS控制台中键入以下行：

- -
function hello() { return "Hello" };
-hello();
- -

该函数返回“Hello” —— 没什么特别的，对吧？

- -

如果我们将其变成异步函数呢？请尝试以下方法：

- -
async function hello() { return "Hello" };
-hello();
- -

哈。现在调用该函数会返回一个 promise。这是异步函数的特征之一 —— 它保证函数的返回值为 promise。

- -

你也可以创建一个异步函数表达式（参见 async function expression ），如下所示:

- -
let hello = async function() { return "Hello" };
-hello();
- -

你可以使用箭头函数：

- -
let hello = async () => { return "Hello" };
- -

这些都基本上是一样的。

- -

要实际使用promise完成时返回的值，我们可以使用.then()块，因为它返回的是 promise：

- -
hello().then((value) => console.log(value))
- -

甚至只是简写如

- -
hello().then(console.log)
- -

这就像我们在上一篇文章中看到的那样。

- -

将 async 关键字加到函数申明中，可以告诉它们返回的是 promise，而不是直接返回值。此外，它避免了同步函数为支持使用 await 带来的任何潜在开销。在函数声明为 async 时，JavaScript引擎会添加必要的处理，以优化你的程序。爽！

- -

await关键字

- -

当 await 关键字与异步函数一起使用时，它的真正优势就变得明显了 —— 事实上， await 只在异步函数里面才起作用。它可以放在任何异步的，基于 promise 的函数之前。它会暂停代码在该行上，直到 promise 完成，然后返回结果值。在暂停的同时，其他正在等待执行的代码就有机会执行了。

- -

您可以在调用任何返回Promise的函数时使用 await，包括Web API函数。

- -

这是一个简单的示例：

- -
async function hello() {
-  return greeting = await Promise.resolve("Hello");
-};
-
-hello().then(alert);
- -

当然，上面的示例不是很有用，但它确实展示了语法。让我们继续，看一个真实示例。

- -

 使用 async/await 重写 promise 代码

- -

让我们回顾一下我们在上一篇文章中简单的 fetch 示例：

- -
fetch('coffee.jpg')
-.then(response => response.blob())
-.then(myBlob => {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e => {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});
- -

到现在为止，你应该对 promises 及其工作方式有一个较好的理解。让我们将其转换为使用async / await看看它使事情变得简单了多少：

- -
async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch()
-.catch(e => {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});
- -

它使代码简单多了，更容易理解 —— 去除了到处都是 .then() 代码块！

- -

由于 async 关键字将函数转换为 promise，您可以重构以上代码 —— 使用 promise 和 await 的混合方式，将函数的后半部分抽取到新代码块中。这样做可以更灵活：

- -
async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  return await response.blob();
-}
-
-myFetch().then((blob) => {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-});
- -

您可以尝试自己输入示例，或运行我们的 live example （另请参阅source code）。

- -

它到底是如何工作的？

- -

您会注意到我们已经将代码封装在函数中，并且我们在 function 关键字之前包含了 async 关键字。这是必要的 –– 您必须创建一个异步函数来定义一个代码块，在其中运行异步代码; await 只能在异步函数内部工作。

- -

在myFetch()函数定义中，您可以看到代码与先前的 promise 版本非常相似，但存在一些差异。不需要附加 .then() 代码块到每个promise-based方法的结尾，你只需要在方法调用前添加 await 关键字，然后把结果赋给变量。await 关键字使JavaScript运行时暂停于此行，允许其他代码在此期间执行，直到异步函数调用返回其结果。一旦完成，您的代码将继续从下一行开始执行。例如：

- -
let response = await fetch('coffee.jpg');
- -

解析器会在此行上暂停，直到当服务器返回的响应变得可用时。此时 fetch() 返回的 promise 将会完成（fullfilled），返回的 response 会被赋值给 response 变量。一旦服务器返回的响应可用，解析器就会移动到下一行，从而创建一个Blob。Blob这行也调用基于异步promise的方法，因此我们也在此处使用await。当操作结果返回时，我们将它从myFetch()函数中返回。

- -

这意味着当我们调用myFetch()函数时，它会返回一个promise，因此我们可以将.then()链接到它的末尾，在其中我们处理显示在屏幕上的blob。

- -

你可能已经觉得“这真的很酷！”，你是对的 —— 用更少的.then()块来封装代码，同时它看起来很像同步代码，所以它非常直观。

- -

添加错误处理

- -

如果你想添加错误处理，你有几个选择。

- -

您可以将同步的 try...catch 结构和 async/await 一起使用 。此示例扩展了我们上面展示的第一个版本代码：

- -
async function myFetch() {
-  try {
-    let response = await fetch('coffee.jpg');
-    let myBlob = await response.blob();
-
-    let objectURL = URL.createObjectURL(myBlob);
-    let image = document.createElement('img');
-    image.src = objectURL;
-    document.body.appendChild(image);
-  } catch(e) {
-    console.log(e);
-  }
-}
-
-myFetch();
- -

catch() {} 代码块会接收一个错误对象 e ; 我们现在可以将其记录到控制台，它将向我们提供详细的错误消息，显示错误被抛出的代码中的位置。

- -

如果你想使用我们上面展示的第二个（重构）代码版本，你最好继续混合方式并将 .catch() 块链接到 .then() 调用的末尾，就像这样：

- -
async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  return await response.blob();
-}
-
-myFetch().then((blob) => {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch((e) =>
-  console.log(e)
-);
- -

这是因为 .catch() 块将捕获来自异步函数调用和promise链中的错误。如果您在此处使用了try/catch 代码块，则在调用 myFetch() 函数时，您仍可能会收到未处理的错误。

- -

您可以在GitHub上找到这两个示例：

- - - -

等待Promise.all()

- -

async / await 建立在 promises 之上，因此它与promises提供的所有功能兼容。这包括Promise.all() –– 你完全可以通过调用 await Promise.all() 将所有结果返回到变量中，就像同步代码一样。让我们再次回到上一篇中看到的例子。在单独的选项卡中打开它，以便您可以与下面显示的新版本进行比较和对比。

- -

将其转换为 async / await（请参阅 样例 和 源码），现在看起来像这样：

- -
async function fetchAndDecode(url, type) {
-  let response = await fetch(url);
-
-  let content;
-
-  if(type === 'blob') {
-    content = await response.blob();
-  } else if(type === 'text') {
-    content = await response.text();
-  }
-
-  return content;
-}
-
-async function displayContent() {
-  let coffee = fetchAndDecode('coffee.jpg', 'blob');
-  let tea = fetchAndDecode('tea.jpg', 'blob');
-  let description = fetchAndDecode('description.txt', 'text');
-
-  let values = await Promise.all([coffee, tea, description]);
-
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-}
-
-displayContent()
-.catch((e) =>
-  console.log(e)
-);
- -

可以看到 fetchAndDecode() 函数只进行了一丁点的修改就转换成了异步函数。请看Promise.all() 行：

- -
let values = await Promise.all([coffee, tea, description]);
- -

在这里，通过使用await，我们能够在三个promise的结果都可用的时候，放入values数组中。这看起来非常像同步代码。我们需要将所有代码封装在一个新的异步函数displayContent() 中，尽管没有减少很多代码，但能够将大部分代码从 .then() 代码块移出，使代码得到了简化，更易读。

- -

为了错误处理，我们在 displayContent() 调用中包含了一个 .catch() 代码块;这将处理两个函数中出现的错误。

- -
-

注意: 也可以在异步函数中使用同步 finally 代码块代替 .finally() 异步代码块，以显示操作如何进行的最终报告——您可以在我们的 live example （查看源代码）中看到这一点。

-
- -

async/await的缺陷

- -

了解Async/await是非常有用的，但还有一些缺点需要考虑。

- -

Async/await 让你的代码看起来是同步的，在某种程度上，也使得它的行为更加地同步。 await 关键字会阻塞其后的代码，直到promise完成，就像执行同步操作一样。它确实可以允许其他任务在此期间继续运行，但您自己的代码被阻塞。

- -

这意味着您的代码可能会因为大量await的promises相继发生而变慢。每个await都会等待前一个完成，而你实际想要的是所有的这些promises同时开始处理（就像我们没有使用async/await时那样）。

- -

有一种模式可以缓解这个问题——通过将 Promise 对象存储在变量中来同时开始它们，然后等待它们全部执行完毕。让我们看一些证明这个概念的例子。

- -

我们有两个可用的例子 —— slow-async-await.html（参见source code）和fast-async-await.html（参见source code）。它们都以自定义promise函数开始，该函数使用setTimeout() 调用伪造异步进程：

- -
function timeoutPromise(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      resolve("done");
-    }, interval);
-  });
-};
- -

然后每个包含一个 timeTest() 异步函数，等待三个 timeoutPromise() 调用：

- -
async function timeTest() {
-  ...
-}
- -

每一个都以记录开始时间结束，查看 timeTest() promise 需要多长时间才能完成，然后记录结束时间并报告操作总共需要多长时间：

- -
let startTime = Date.now();
-timeTest().then(() => {
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  alert("Time taken in milliseconds: " + timeTaken);
-})
- -

timeTest() 函数在每种情况下都不同。

- -

在slow-async-await.html示例中，timeTest() 如下所示：

- -
async function timeTest() {
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-}
- -

在这里，我们直接等待所有三个timeoutPromise（）调用，使每个调用3秒钟。后续的每一个都被迫等到最后一个完成 - 如果你运行第一个例子，你会看到弹出框报告的总运行时间大约为9秒。

- -

在fast-async-await.html示例中，timeTest() 如下所示：

- -
async function timeTest() {
-  const timeoutPromise1 = timeoutPromise(3000);
-  const timeoutPromise2 = timeoutPromise(3000);
-  const timeoutPromise3 = timeoutPromise(3000);
-
-  await timeoutPromise1;
-  await timeoutPromise2;
-  await timeoutPromise3;
-}
- -

在这里，我们将三个Promise对象存储在变量中，这样可以同时启动它们关联的进程。

- -

接下来，我们等待他们的结果 - 因为promise都在基本上同时开始处理，promise将同时完成;当您运行第二个示例时，您将看到弹出框报告总运行时间仅超过3秒！

- -

您必须仔细测试您的代码，并在性能开始受损时牢记这一点。

- -

另一个小小的不便是你必须将等待执行的promise封装在异步函数中。

- -

Async/await 的类方法

- -

最后值得一提的是，我们可以在类/对象方法前面添加async，以使它们返回promises，并await它们内部的promises。查看 ES class code we saw in our object-oriented JavaScript article，然后查看使用异步方法的修改版本：

- -
class Person {
-  constructor(first, last, age, gender, interests) {
-    this.name = {
-      first,
-      last
-    };
-    this.age = age;
-    this.gender = gender;
-    this.interests = interests;
-  }
-
-  async greeting() {
-    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
-  };
-
-  farewell() {
-    console.log(`${this.name.first} has left the building. Bye for now!`);
-  };
-}
-
-let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
- -

第一个实例方法可以使用如下：

- -
han.greeting().then(console.log);
- -

浏览器的支持

- -

决定是否使用 async/await 时的一个考虑因素是支持旧浏览器。它们适用于大多数浏览器的现代版本，与promise相同; 主要的支持问题存在于Internet Explorer和Opera Mini。

- -

如果你想使用async/await但是担心旧的浏览器支持，你可以考虑使用BabelJS库 —— 这允许你使用最新的JavaScript编写应用程序，让Babel找出用户浏览器需要的更改。在遇到不支持async/await 的浏览器时，Babel的 polyfill 可以自动提供适用于旧版浏览器的实现。

- -

总结

- -

async/await提供了一种很好的，简化的方法来编写更易于阅读和维护的异步代码。即使浏览器支持在撰写本文时比其他异步代码机制更受限制，但无论是现在还是将来，都值得学习和考虑使用。

- -

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}

- -

本章内容

- - diff --git "a/files/zh-cn/learn/javascript/\345\274\202\346\255\245/choosing_the_right_approach/index.html" "b/files/zh-cn/learn/javascript/\345\274\202\346\255\245/choosing_the_right_approach/index.html" deleted file mode 100644 index 276d815b85..0000000000 --- "a/files/zh-cn/learn/javascript/\345\274\202\346\255\245/choosing_the_right_approach/index.html" +++ /dev/null @@ -1,523 +0,0 @@ ---- -title: 选择正确的方法 -slug: learn/JavaScript/异步/Choosing_the_right_approach -translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
- -

为了完成这个模块，我们将简要讨论之前章节谈论过编码技术和功能，看看你应该使用哪一个，并提供适当的建议和提醒。随着时间的推移，我们可能会添加到此资源中。

- - - - - - - - - - - - -
预备条件:基本的计算机素养，对JavaScript基础知识的合理理解。
目标:能够在使用不同的异步编程技术时做出合理的选择。
- -

异步回调

- -

通常在旧式API中找到，涉及将函数作为参数传递给另一个函数，然后在异步操作完成时调用该函数，以便回调可以依次对结果执行某些操作。这是promise的前身;它不那么高效或灵活。仅在必要时使用。

- - - - - - - - - - - - - - - - - - - -
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoYes (recursive callbacks)Yes (nested callbacks)No
- -

代码示例

- -

通过XMLHttpRequest API加载资源的示例（run it live，并查看see the source）：

- -
function loadAsset(url, type, callback) {
-  let xhr = new XMLHttpRequest();
-  xhr.open('GET', url);
-  xhr.responseType = type;
-
-  xhr.onload = function() {
-    callback(xhr.response);
-  };
-
-  xhr.send();
-}
-
-function displayImage(blob) {
-  let objectURL = URL.createObjectURL(blob);
-
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-loadAsset('coffee.jpg', 'blob', displayImage);
- -

缺陷

- - - -

浏览器兼容性

- -

非常好的一般支持，尽管API中回调的确切支持取决于特定的API。有关更具体的支持信息，请参阅您正在使用的API的参考文档。

- -

更多信息

- - - -

setTimeout()

- -

setTimeout() 是一种允许您在经过任意时间后运行函数的方法

- - - - - - - - - - - - - - - - - -
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
YesYes (recursive timeouts)Yes (nested timeouts)No
- -

代码示例

- -

这里浏览器将在执行匿名函数之前等待两秒钟，然后将显示警报消息（see it running live，see the source code）：

- -
let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)
- -

缺陷

- -

您可以使用递归的setTimeout（）调用以类似于setInterval（）的方式重复运行函数，使用如下代码：

- -
let i = 1;
-setTimeout(function run() {
-  console.log(i);
-  i++;
-
-  setTimeout(run, 100);
-}, 100);
- -

递归setTimeout（）和setInterval（）之间存在差异：

- - - -

当你的代码有可能比你分配的时间间隔更长时间运行时，最好使用递归的setTimeout（） ––这将使执行之间的时间间隔保持不变，无论代码执行多长时间，你不会得到错误。

- -

浏览器兼容性

- -

{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}

- -

更多信息

- - - -

setInterval()

- -

setInterval()函数允许重复执行一个函数，并设置时间间隔。不如requestAnimationFrame()有效率，但允许您选择运行速率/帧速率。

- - - - - - - - - - - - - - - - - -
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoYesNo (unless it is the same one)No
- -

代码示例

- -

以下函数创建一个新的Date()对象，使用toLocaleTimeString()从中提取时间字符串，然后在UI中显示它。然后我们使用setInterval（）每秒运行一次，创建每秒更新一次的数字时钟的效果（see this live，see the source）：

- -
function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);
- -

缺陷

- - - -

浏览器兼容性

- -

{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}

- -

更多信息

- - - -

requestAnimationFrame()

- -

requestAnimationFrame()是一种允许您以给定当前浏览器/系统的最佳帧速率重复且高效地运行函数的方法。除非您需要特定的速率帧，否则您应该尽可能使用它而不要去使用setInterval()/recursive setTimeout()。

- - - - - - - - - - - - - - - - - -
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoYesNo (unless it is the same one)No
- -

代码示例

- -

一个简单的动画旋转器;你可以查看example live on GitHub（参见 source code ）：

- -
const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-
-function draw(timestamp) {
-  if(!startTime) {
-    startTime = timestamp;
-  }
-
-  let rotateCount = (timestamp - startTime) / 3;
-
-  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-
-  if(rotateCount > 359) {
-    rotateCount = 0;
-  }
-
-  rAF = requestAnimationFrame(draw);
-}
-
-draw();
- -

缺陷

- - - -

浏览器兼容性

- -

{{Compat("api.Window.requestAnimationFrame")}}

- -

更多信息

- - - -

Promises

- -

Promises 是一种JavaScript功能，允许您运行异步操作并等到它完全完成后再根据其结果运行另一个操作。 Promise是现代异步JavaScript的支柱。

- - - - - - - - - - - - - - - - - -
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoNoYesSee Promise.all(), below
- -

代码示例

- -

以下代码从服务器获取图像并将其显示在 {{htmlelement("img")}} 元素中;（see it live also，the source code）：

- -
fetch('coffee.jpg')
-.then(response => response.blob())
-.then(myBlob => {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e => {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});
- -

缺陷

- -

Promise链可能很复杂，难以解析。如果你嵌套了许多promises，你最终可能会遇到类似的麻烦来回调地狱。例如：

- -
remotedb.allDocs({
-  include_docs: true,
-  attachments: true
-}).then(function (result) {
-  var docs = result.rows;
-  docs.forEach(function(element) {
-    localdb.put(element.doc).then(function(response) {
-      alert("Pulled doc with id " + element.doc._id + " and added to local db.");
-    }).catch(function (err) {
-      if (err.name == 'conflict') {
-        localdb.get(element.doc._id).then(function (resp) {
-          localdb.remove(resp._id, resp._rev).then(function (resp) {
-// et cetera...
- -

最好使用promises的链功能，这样使用更平顺，更易于解析的结构：

- -
remotedb.allDocs(...).then(function (resultOfAllDocs) {
-  return localdb.put(...);
-}).then(function (resultOfPut) {
-  return localdb.get(...);
-}).then(function (resultOfGet) {
-  return localdb.put(...);
-}).catch(function (err) {
-  console.log(err);
-});
- -

乃至：

- -
remotedb.allDocs(...)
-.then(resultOfAllDocs => {
-  return localdb.put(...);
-})
-.then(resultOfPut => {
-  return localdb.get(...);
-})
-.then(resultOfGet => {
-  return localdb.put(...);
-})
-.catch(err => console.log(err));
- -

这涵盖了很多基础知识。对于更完整的论述，请参阅诺兰劳森的We have a problem with promises。

- -

浏览器兼容性

- -

{{Compat("javascript.builtins.Promise")}}

- -

更多信息

- - - -

Promise.all()

- -

一种JavaScript功能，允许您等待多个promises完成，然后根据所有其他promises的结果运行进一步的操作。

- - - - - - - - - - - - - - - - - -
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoNoNoYes
- -

代码示例

- -

以下示例从服务器获取多个资源，并使用Promise.all（）等待所有资源可用，然后显示所有这些资源––  see it live，并查看source code：

- -
function fetchAndDecode(url, type) {
-  // Returning the top level promise, so the result of the entire chain is returned out of the function
-  return fetch(url).then(response => {
-    // Depending on what type of file is being fetched, use the relevant function to decode its contents
-    if(type === 'blob') {
-      return response.blob();
-    } else if(type === 'text') {
-      return response.text();
-    }
-  })
-  .catch(e => {
-    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
-  });
-}
-
-// Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
-let coffee = fetchAndDecode('coffee.jpg', 'blob');
-let tea = fetchAndDecode('tea.jpg', 'blob');
-let description = fetchAndDecode('description.txt', 'text');
-
-// Use Promise.all() to run code only when all three function calls have resolved
-Promise.all([coffee, tea, description]).then(values => {
-  console.log(values);
-  // Store each value returned from the promises in separate variables; create object URLs from the blobs
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  // Display the images in <img> elements
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  // Display the text in a paragraph
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-});
- -

缺陷

- - - -

浏览器兼容性

- -

{{Compat("javascript.builtins.Promise.all")}}

- -

更多信息

- - - -

Async/await

- -

构造在promises之上的语法糖，允许您使用更像编写同步回调代码的语法来运行异步操作。

- - - - - - - - - - - - - - - - - -
Useful for...
Single delayed operationRepeating operationMultiple sequential operationsMultiple simultaneous operations
NoNoYesYes (in combination with Promise.all())
- -

代码示例

- -

以下示例是我们之前看到的简单承诺示例的重构，该示例获取并显示图像，使用async / await编写（see it live，并查看source code）：

- -
async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch();
- -

缺陷

- - - -

浏览器兼容性

- -

{{Compat("javascript.statements.async_function")}}

- -

更多信息

- - - -

{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}

- -

本章内容

- - diff --git "a/files/zh-cn/learn/javascript/\345\274\202\346\255\245/index.html" "b/files/zh-cn/learn/javascript/\345\274\202\346\255\245/index.html" deleted file mode 100644 index 3d89f5a060..0000000000 --- "a/files/zh-cn/learn/javascript/\345\274\202\346\255\245/index.html" +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: 异步JavaScript -slug: learn/JavaScript/异步 -tags: - - JavaScript - - Promises - - requestAnimationFrame - - 初学者 - - 回调函数 - - 异步 - - 指南 - - 等待 - - 脚本编程 - - 设置定时器 - - 设置间隔 -translation_of: Learn/JavaScript/Asynchronous ---- -
- -
{{LearnSidebar}}
- -
- -

在这个模块，我们将查看 {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}，异步为什么很重要，以及怎样使用异步来有效处理潜在的阻塞操作，比如从服务器上获取资源。

- -

预备知识

- -

异步JavaScript 是一个相当高级的话题，建议你先完成( JavaScript first steps 和 JavaScript building blocks) 两个模块的学习后再来学习。

- -

如果你还不熟悉异步编程的概念，请从 通用异步编程概念开始. 如果熟悉的话，可以直接从介绍异步JavaScript 开始.

- -
-

Note: 如果在当前阅读本文档而使用的电子设备（电脑/平板/其他）上，你没有权限生成自己的文件，你可以使用 JSBin or Thimble 在线编程工具来尝试文章里面的代码示例

-
- -

指南

- -
-
一般异步编程概念
-
-

浏览 异步相关的重要概念，在浏览器和JS里面的应用，学习本模块其他文章之前，你应该理解这些基本的概念。

-
-
介绍异步JS
-
这篇文章简单概括同步JS遇到的问题，首次提到一些不同的异步JS技术，他们是如何解决同步JS的问题
-
合作异步JS：Timeouts and intervals
-
在这里介绍JS传统的异步方法：在一段时间后运行 或者 在设定时间周期反复运行，看看这些技术如何使用，有什么内在的问题.
-
优雅的处理异步操作：Promises
-
Promises 是JS一个相对比较新的特性，你可以使用它来延迟一些操作直到前面的代码已经返回结果。对于时间上顺序完成的一系列操作，这个真的有用。本文展示promises 如何工作，使用WebAPIs何处会见到它, 最重要的：怎样写你自己的promises.
-
让异步编程简单: async and await
-
Promises 有点复杂, 所以现代的浏览器都实现了 async 函数和 await 操作符 —--前者允许标准函数隐式地和 promises 工作, 后者可以在async 函数里面使用，等待promises运行结束，函数再继续运行。
-
选择正确的方法
-
结束本模块之前，回顾一下已经讨论的编程技术和特性：什么时候用哪个。有推荐，也有常见的陷阱提醒。
-
- -

参考

- - diff --git "a/files/zh-cn/learn/javascript/\345\274\202\346\255\245/promises\350\257\255\346\263\225/index.html" "b/files/zh-cn/learn/javascript/\345\274\202\346\255\245/promises\350\257\255\346\263\225/index.html" deleted file mode 100644 index 665bda8129..0000000000 --- "a/files/zh-cn/learn/javascript/\345\274\202\346\255\245/promises\350\257\255\346\263\225/index.html" +++ /dev/null @@ -1,599 +0,0 @@ ---- -title: 优雅的异步处理 -slug: learn/JavaScript/异步/Promises语法 -translation_of: Learn/JavaScript/Asynchronous/Promises ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
- -

Promise 是 JavaScript 语言的一个相对较新的功能，允许你推迟进一步的操作，直到上一个操作完成或响应其失败。这对于设置一系列异步操作以正常工作非常有用。本文向你展示了promises如何工作，如何在Web API中使用它们以及如何编写自己的API

- - - - - - - - - - - - -
前提条件:基本的计算机素养，具备基础的JavaScript知识
目标:理解并使用学习如何使用Promises
- -

什么是promises?

- -

我们在教程的第一篇文章中简要地了解了 Promises，接下来我们将在更深层次理解Promise。

- -

本质上，Promise 是一个对象，代表操作的中间状态 —— 正如它的单词含义 '承诺' ，它保证在未来可能返回某种结果。虽然 Promise 并不保证操作在何时完成并返回结果，但是它保证当结果可用时，你的代码能正确处理结果，当结果不可用时，你的代码同样会被执行，来优雅的处理错误。

- -

通常你不会对一个异步操作从开始执行到返回结果所用的时间感兴趣（除非它耗时过长），你会更想在任何时候都能响应操作结果，当然它不会阻塞其余代码的执行就更好了。

- -

你与 Promise 常见的交互之一就是 Web API 返回的 promise 对象。让我们设想一个视频聊天应用程序，该程序有一个展示用户的朋友列表的窗口，可以点击朋友旁边的按钮对朋友视频呼叫。

- -

该按钮的处理程序调用 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} 来访问用户的摄像头和麦克风。由于 getUserMedia() 必须确保用户具有使用这些设备的权限，并询问用户要使用哪个麦克风和摄像头（或者是否仅进行语音通话，以及其他可能的选项），因此它会产生阻塞，直到用户做出所有的决定，并且摄像头和麦克风都已启用。此外，用户可能不会立即响应权限请求。所以 getUserMedia() 可能需要很长时间。

- -

由于 getUserMedia() 是在浏览器的主线程进行调用，整个浏览器将会处于阻塞状态直到 getUserMedia() 返回，这是不应该发生的；不使用Promise，浏览器将处于不可用状态直到用户为摄像头和麦克风做出决定。因此 getUserMedia() 返回一个Promise对象，即 {{jsxref("promise")}}，一旦  {{domxref("MediaStream")}} 流可用才去解析，而不是等待用户操作、启动选中的设备并直接返回从所选资源创建的 {{domxref("MediaStream")}} 流。

- -

上述视频聊天应用程序的代码可能像下面这样：

- -
function handleCallButton(evt) {
-  setStatusMessage("Calling...");
-  navigator.mediaDevices.getUserMedia({video: true, audio: true})
-    .then(chatStream => {
-      selfViewElem.srcObject = chatStream;
-      chatStream.getTracks().forEach(track => myPeerConnection.addTrack(track, chatStream));
-      setStatusMessage("Connected");
-    }).catch(err => {
-      setStatusMessage("Failed to connect");
-    });
-}
-
- -

这个函数在开头调用 setStatusMessage() 来更新状态显示信息"Calling..."， 表示正在尝试通话。接下来调用 getUserMedia()，请求具有视频及音频轨的流，一旦获得这个流，就将其显示在"selfViewElem"的video元素中。接下来将这个流的每个轨道添加到表示与另一个用户的连接的 WebRTC，参见{{domxref("RTCPeerConnection")}}。在这之后，状态显示为"Connected"。

- -

如果getUserMedia()失败，则catch块运行。这使用setStatusMessage()更新状态框以指示发生错误。

- -

这里重要的是getUserMedia()调用几乎立即返回，即使尚未获得相机流。即使handleCallButton()函数向调用它的代码返回结果，当getUserMedia()完成工作时，它也会调用你提供的处理程序。只要应用程序不假设流式传输已经开始，它就可以继续运行。

- -
-

注意:  如果你有兴趣，可以在文章Signaling and video calling中了解有关此高级主题的更多信息。在该示例中使用与此类似的代码，但更完整。

-
- -

 回调函数的麻烦

- -

要完全理解为什么 promise 是一件好事，应该回想之前的回调函数，理解它们造成的困难。

- -

我们来谈谈订购披萨作为类比。为了使你的订单成功，你必须按顺序执行，不按顺序执行或上一步没完成就执行下一步是不会成功的：

- -
    -
  1. 选择配料。如果你是优柔寡断，这可能需要一段时间，如果你无法下定决心或者决定换咖喱，可能会失败。
    2. -
  2. 下订单。返回比萨饼可能需要一段时间，如果餐厅没有烹饪所需的配料，可能会失败。
    3. -
  3. 然后你收集你的披萨吃。如果你忘记了自己的钱包，那么这可能会失败，所以无法支付比萨饼的费用！
    4. -
- -

对于旧式callbacks，上述功能的伪代码表示可能如下所示：

- -
chooseToppings(function(toppings) {
-  placeOrder(toppings, function(order) {
-    collectOrder(order, function(pizza) {
-      eatPizza(pizza);
-    }, failureCallback);
-  }, failureCallback);
-}, failureCallback);
- -

这很麻烦且难以阅读（通常称为“回调地狱”），需要多次调用failureCallback()（每个嵌套函数一次），还有其他问题。

- -

使用promise改良

- -

Promises使得上面的情况更容易编写，解析和运行。如果我们使用异步promises代表上面的伪代码，我们最终会得到这样的结果：

- -
chooseToppings()
-.then(function(toppings) {
-  return placeOrder(toppings);
-})
-.then(function(order) {
-  return collectOrder(order);
-})
-.then(function(pizza) {
-  eatPizza(pizza);
-})
-.catch(failureCallback);
- -

这要好得多 - 更容易看到发生了什么，我们只需要一个.catch()块来处理所有错误，它不会阻塞主线程（所以我们可以在等待时继续玩视频游戏为了准备好收集披萨），并保证每个操作在运行之前等待先前的操作完成。我们能够以这种方式一个接一个地链接多个异步操作，因为每个.then()块返回一个新的promise，当.then()块运行完毕时它会解析。聪明，对吗？

- -

使用箭头函数，你可以进一步简化代码：

- -
chooseToppings()
-.then(toppings =>
-  placeOrder(toppings)
-)
-.then(order =>
-  collectOrder(order)
-)
-.then(pizza =>
-  eatPizza(pizza)
-)
-.catch(failureCallback);
- -

甚至这样：

- -
chooseToppings()
-.then(toppings => placeOrder(toppings))
-.then(order => collectOrder(order))
-.then(pizza => eatPizza(pizza))
-.catch(failureCallback);
- -

这是有效的，因为使用箭头函数 () => x 是 ()=> {return x;}  的有效简写; 。

- -

你甚至可以这样做，因为函数只是直接传递它们的参数，所以不需要额外的函数层：

- -
chooseToppings().then(placeOrder).then(collectOrder).then(eatPizza).catch(failureCallback);
- -

但是，这并不容易阅读，如果你的块比我们在此处显示的更复杂，则此语法可能无法使用。

- -
-

注意: 你可以使用 async/await 语法进行进一步的改进，我们将在下一篇文章中深入讨论。

-
- -

最基本的，promise与事件监听器类似，但有一些差异：

- - - -

 解释promise的基本语法：一个真实的例子

- -

Promises 很重要，因为大多数现代Web API都将它们用于执行潜在冗长任务的函数。要使用现代Web技术，你需要使用promises。在本章的后面我们将看看如何编写自己的promises，但是现在我们将看一些你将在Web API中遇到的简单示例。

- -

在第一个示例中，我们将使用fetch()方法从Web获取图像，blob() 方法来转换获取响应的原始内容到 Blob 对象，然后在 <img> 元素内显示该blob。这与我们在 first article of the series中看到的示例非常相似，但是会在构建你自己的基于 promise 的代码时有所不同。 

- -
-

注意: 下列代码无法直接运行(i.e. via a file:// URL)。你需要本地测试服务器，或是 Glitch 和 GitHub pages 这样的在线解决方案。

-
- -
    -
  1. -

    首先，下载我们的 simple HTML template和sample image file。

    -
    2. -
  2. -

    将 {{htmlelement("script")}} 元素添加在HTML {{htmlelement("body")}} 的底部。

    -
    3. -
  3. -

    在 {{HTMLElement("script")}} 元素内，添加以下行：

    - - 
    let promise = fetch('coffee.jpg');
    - -

    这会调用 fetch() 方法，将图像的URL作为参数从网络中提取。这也可以将options对象作为可选的第二个参数，但我们现在只使用最简单的版本。我们将 fetch() 返回的promise对象存储在一个名为promise的变量中。正如我们之前所说的，这个对象代表了一个最初既不成功也不失败的中间状态 - 这个状态下的promise的官方术语叫作pending。

    -
    4. -
  4. 为了响应成功完成操作（在这种情况下，当返回{{domxref("Response")}}时），我们调用promise对象的.then()方法。 .then()块中的回调（称为执行程序）仅在promise调用成功完成时运行并返回{{domxref("Response")}}对象 - 在promise-speak中，当它已被满足时。它将返回的{{domxref("Response")}}对象作为参数传递。
    5. -
- -
-

注意: .then()块的工作方式类似于使用AddEventListener()向对象添加事件侦听器时的方式。它不会在事件发生之前运行（当promise履行时）。最显着的区别是.then()每次使用时只运行一次，而事件监听器可以多次调用。

-
- -

我们立即对此响应运行blob()方法以确保响应主体完全下载，并且当它可用时将其转换为我们可以执行某些操作的Blob对象。返回的结果如下：

- -
response => response.blob()
- -

这是下面的简写

- -
function(response) {
-    return response.blob();
-}
-
- -

好的，我们还需要做点额外的工作。Fetch promises 不会产生 404 或 500错误，只有在产生像网路故障的情况时才会不工作。总的来说，Fetch promises 总是成功运行，即使response.ok 属性是 false。为了产生404错误，我们需要判断 response.ok ，如果是 false，抛出错误，否则返回 blob。就像下面的代码这样做。

- -
let promise2 = promise.then(response => {
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    return response.blob();
-  }
-});
- -

5. 每次调用.then()都会创建一个新的promise。这非常有用;因为blob()方法也返回一个promise，我们可以通过调用第二个promise的.then()方法来处理它在履行时返回的Blob对象。因为我们想要对blob执行一些更复杂的操作，而不仅仅运行单个方法并返回结果，这次我们需要将函数体包装成花括号（否则会抛出错误）。

- -

将以下内容添加到代码的末尾：

- -
let promise3 = promise2.then(myBlob => {})
- -

6. 现在让我们填写执行程序函数的主体。在花括号内添加以下行：

- -
let objectURL = URL.createObjectURL(myBlob);
-let image = document.createElement('img');
-image.src = objectURL;
-document.body.appendChild(image);
- -

这里我们运行{{domxref("URL.createObjectURL()")}}方法，将其作为Blob在第二个promise实现时返回的参数传递。这将返回指向该对象的URL。然后我们创建一个{{htmlelement("img")}}元素，将其src属性设置为等于对象URL并将其附加到DOM，这样图像就会显示在页面上！

- -

如果你保存刚刚创建的HTML文件并将其加载到浏览器中，你将看到图像按预期显示在页面中。干得好！

- -
-

注意: 你可能会注意到这些例子有点做作。你可以取消整个fetch()和blob()链，只需创建一个<img>元素并将其src属性值设置为图像文件的URL，即coffee.jpg。然而，我们选择了这个例子，因为它以简单的方式展示了promise，而不是真实世界的适当性。

-
- -

响应失败

- -

缺少一些东西 - 如果其中一个promise失败（rejects，in promise-speak），目前没有什么可以明确地处理错误。我们可以通过运行前一个promise的 .catch() 方法来添加错误处理。立即添加：

- -
let errorCase = promise3.catch(e => {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});
- -

要查看此操作，请尝试拼错图像的URL并重新加载页面。该错误将在浏览器的开发人员工具的控制台中报告。

- -

如果你根本不操心包括的 .catch() 块，这并没有做太多的事情，但考虑一下（指.catch()块） ––这会使我们可以完全控制错误处理方式。在真实的应用程序中，你的.catch()块可以重试获取图像，或显示默认图像，或提示用户提供不同的图像URL等等。

- -
-

注意: 你可以参考 our version of the example live (参阅 source code ).

-
- -

将代码块链在一起

- -

这是写出来的一种非常简便的方式;我们故意这样做是为了帮助你清楚地了解发生了什么。如本文前面所示，你可以将.then()块（以及.catch()块）链接在一起。上面的代码也可以这样写(参阅GitHub上的simple-fetch-chained.html ):

- -
fetch('coffee.jpg')
-.then(response => {
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    return response.blob();
-  }
-})
-.then(myBlob => {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e => {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});
- -

请记住，履行的promise所返回的值将成为传递给下一个 .then() 块的executor函数的参数。

- -
-

注意: promise中的.then()/catch()块基本上是同步代码中try...catch块的异步等价物。请记住，同步try ... catch在异步代码中不起作用。

-
- -

Promise术语回顾

- -

在上面的部分中有很多要介绍的内容，所以让我们快速回过头来给你一个简短的指南，你可以将它添加到书签中，以便将来更新你的记忆。你还应该再次阅读上述部分，以确保这些概念坚持下去。

- -
    -
  1. 创建promise时，它既不是成功也不是失败状态。这个状态叫作pending（待定）。
    2. -
  2. 当promise返回时，称为 resolved（已解决）. -
      -
    1. 一个成功resolved的promise称为fullfilled（实现）。它返回一个值，可以通过将.then()块链接到promise链的末尾来访问该值。 .then()块中的执行程序函数将包含promise的返回值。
      2. -
    2. 一个不成功resolved的promise被称为rejected（拒绝）了。它返回一个原因（reason），一条错误消息，说明为什么拒绝promise。可以通过将.catch()块链接到promise链的末尾来访问此原因。
      3. -
    -
    3. -
- -

 运行代码以响应多个Promises的实现

- -

上面的例子向我们展示了使用promises的一些真正的基础知识。现在让我们看一些更高级的功能。首先，链接进程一个接一个地发生都很好，但是如果你想在一大堆Promises全部完成之后运行一些代码呢？

- -

 你可以使用巧妙命名的Promise.all()静态方法完成此操作。这将一个promises数组作为输入参数，并返回一个新的Promise对象，只有当数组中的所有promise都满足时才会满足。它看起来像这样：

- -
Promise.all([a, b, c]).then(values => {
-  ...
-});
- -

如果它们都实现，那么数组中的结果将作为参数传递给.then()块中的执行器函数。如果传递给Promise.all()的任何一个 promise 拒绝，整个块将拒绝。

- -

这非常有用。想象一下，我们正在获取信息以在内容上动态填充页面上的UI功能。在许多情况下，接收所有数据然后才显示完整内容，而不是显示部分信息。

- -

让我们构建另一个示例来展示这一点。

- -
    -
  1. -

    下载我们页面模板（page template）的新副本，并再次在结束</ body>标记之前放置一个<script>元素。

    -
    2. -
  2. -

    下载我们的源文件(coffee.jpg, tea.jpg和 description.txt),或者随意替换成你自己的文件。

    -
    3. -
  3. -

    在我们的脚本中，我们将首先定义一个函数，该函数返回我们要发送给Promise.all()的promise。如果我们只想运行Promise.all()块以响应三个fetch()操作完成，这将很容易。我们可以这样做：

    - - 
    let a = fetch(url1);
-let b = fetch(url2);
-let c = fetch(url3);
-
-Promise.all([a, b, c]).then(values => {
-  ...
-});
    - -

    当promise是fullfilled时，传递到履行处理程序的values将包含三个Response对象，每个对象用于已完成的每个fetch()操作。

    - -

    但是，我们不想这样做。我们的代码不关心fetch()操作何时完成。相反，我们想要的是加载的数据。这意味着当我们返回代表图像的可用blob和可用的文本字符串时，我们想要运行Promise.all()块。我们可以编写一个执行此操作的函数;在<script>元素中添加以下内容：

    - - 
    function fetchAndDecode(url, type) {
-  return fetch(url).then(response => {
-    if (type === 'blob') {
-      return response.blob();
-    } else if (type === 'text') {
-      return response.text();
-    }
-  })
-  .catch(e => {
-    console.log('There has been a problem with your fetch operation: ' + e.message);
-  });
-}
    - -

    这看起来有点复杂，所以让我们一步一步地完成它：

    - -
      -
    1. 首先，我们定义函数，向它传递一个URL和字符串，这个字符串表示资源类型。
      2. -
    2. 在函数体内部，我们有一个类似于我们在第一个例子中看到的结构 - 我们调用fetch()函数来获取指定URL处的资源，然后将其链接到另一个 promise ，它解码（或“read”）响应body。这是前一个示例中的blob()方法。
      3. -
    3. 但是，这里有两处不同： -
        -
      • 首先，我们返回的第二个promise会因类型值的不同而不同。在执行函数内部，我们包含一个简单的if ... else if语句，根据我们需要解码的文件类型返回不同的promise（在这种情况下，我们可以选择blob或text，而且很容易扩展这个以处理其他类型）。
        • -
      • 其次，我们在fetch()调用之前添加了return关键字。它的作用是运行整个链，然后运行最终结果（即blob()或text()返回的promise作为我们刚刚定义的函数的返回值）。实际上，return语句将结果从链返回到顶部。
        • -
      -
      4. -
    4. -

      在块结束时，我们链接一个.catch()调用，以处理任何可能出现在数组中传递给.all()的任何promise的错误情况。如果任何promise被拒绝，catch块将告诉你哪个promise有问题。 .all()块（见下文）仍然可以实现，但不会显示有问题的资源。如果你想要.all拒绝，你必须将.catch()块链接到那里的末尾。

      -
      5. -
    - -

    函数体内部的代码是async（异步）和基于promise的，因此实际上整个函数就像一个promise ––方便啊！

    -
    4. -
  4. -

    接下来，我们调用我们的函数三次以开始获取和解码图像和文本的过程，并将每个返回的promises存储在变量中。在以前的代码下面添加以下内容：

    - - 
    let coffee = fetchAndDecode('coffee.jpg', 'blob');
-let tea = fetchAndDecode('tea.jpg', 'blob');
-let description = fetchAndDecode('description.txt', 'text');
    -
    5. -
  5. -

    接下来，我们将定义一个Promise.all()块，仅当上面存储的所有三个promise都已成功完成时才运行一些代码。首先，在.then()调用中添加一个带有空执行程序的块，如下所示：

    - - 
    Promise.all([coffee, tea, description]).then(values => {
-
-});
    - -

    你可以看到它需要一个包含promises作为参数的数组。执行者只有在所有三个promises的状态成为resolved时才会运行;当发生这种情况时，它将被传入一个数组，其中包含来自各个promise（即解码的响应主体）的结果，类似于 [coffee-results, tea-results, description-results].

    -
    6. -
  6. -

    最后，在执行程序中添加以下内容。这里我们使用一些相当简单的同步代码将结果存储在单独的变量中（从blob创建对象URL），然后在页面上显示图像和文本。

    - - 
    console.log(values);
-// Store each value returned from the promises in separate variables; create object URLs from the blobs
-let objectURL1 = URL.createObjectURL(values[0]);
-let objectURL2 = URL.createObjectURL(values[1]);
-let descText = values[2];
-
-// Display the images in <img> elements
-let image1 = document.createElement('img');
-let image2 = document.createElement('img');
-image1.src = objectURL1;
-image2.src = objectURL2;
-document.body.appendChild(image1);
-document.body.appendChild(image2);
-
-// Display the text in a paragraph
-let para = document.createElement('p');
-para.textContent = descText;
-document.body.appendChild(para);
    -
    7. -
  7. -

    保存并刷新，你应该看到所有UI组件都已加载，尽管不是特别有吸引力！

    -
    8. -
- -

我们在这里提供的用于显示项目的代码相当简陋，但现在作为解释器。

- -
-

注意: 如果你遇到困难，可以将你的代码版本与我们的代码进行比较，看看它的外观 -––see it live，也可以参阅source code。

-
- -
-

注意: 如果你正在改进这段代码，你可能想要遍历一个项目列表来显示，获取和解码每个项目，然后循环遍历Promise.all()内部的结果，运行一个不同的函数来显示每个项目取决于什么代码的类型是。这将使它适用于任何数量的项目，而不仅仅是三个。

- -

此外，你可以确定要获取的文件类型，而无需显式类型属性。例如，你可以使用response.headers.get("content-type")检查响应的{{HTTPHeader("Content-Type")}} HTTP标头，然后做出相应的反应。

-
- -

 在promise fullfill/reject后运行一些最终代码

- -

在promise完成后，你可能希望运行最后一段代码，无论它是否已实现（fullfilled）或被拒绝（rejected）。此前，你必须在.then()和.catch()回调中包含相同的代码，例如：

- -
myPromise
-.then(response => {
-  doSomething(response);
-  runFinalCode();
-})
-.catch(e => {
-  returnError(e);
-  runFinalCode();
-});
- -

在现代浏览器中，.finally() 方法可用，它可以链接到常规promise链的末尾，允许你减少代码重复并更优雅地执行操作。上面的代码现在可以写成如下：

- -
myPromise
-.then(response => {
-  doSomething(response);
-})
-.catch(e => {
-  returnError(e);
-})
-.finally(() => {
-  runFinalCode();
-});
- -

有关一个真实示例，请查看我们的promise-finally.html demo（另请参阅source code）。这与我们在上面部分中看到的Promise.all()演示完全相同，除了在fetchAndDecode()函数中我们将finally()调用链接到链的末尾：

- -
function fetchAndDecode(url, type) {
-  return fetch(url).then(response => {
-    if(!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    } else {
-      if(type === 'blob') {
-        return response.blob();
-      } else if(type === 'text') {
-        return response.text();
-      }
-    }
-  })
-  .catch(e => {
-    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
-  })
-  .finally(() => {
-    console.log(`fetch attempt for "${url}" finished.`);
-  });
-}
- -

这会将一条简单的消息记录到控制台，告诉我们每次获取尝试的时间。

- -
-

注意:finally()允许你在异步代码中编写异步等价物try/ catch / finally。

-
- -

 构建自定义promise

- -

好消息是，在某种程度上，你已经建立了自己的promise。当你使用.then()块链接多个promise时，或者将它们组合起来创建自定义函数时，你已经在创建自己的基于异步声明的自定义函数。例如，从前面的示例中获取我们的fetchAndDecode()函数。

- -

将不同的基于promise的API组合在一起以创建自定义函数是迄今为止你使用promises进行自定义事务的最常见方式，并展示了基于相同原则的大多数现代API的灵活性和强大功能。然而，还有另一种方式。

- -

使用Promise()构造函数

- -

可以使用Promise() 构造函数构建自己的promise。当你需要使用现有的旧项目代码、库或框架以及基于现代promise的代码时，这会派上用场。比如，当你遇到没有使用promise的旧式异步API的代码时，你可以用promise来重构这段异步代码。

- -

让我们看一个简单的示例来帮助你入门 —— 这里我们用 promise 包装一了个setTimeout()，它会在两秒后运行一个函数，该函数将用字符串“Success!”，解析当前promise（调用链接的resolve()）。

- -
let timeoutPromise = new Promise((resolve, reject) => {
-  setTimeout(function(){
-    resolve('Success!');
-  }, 2000);
-});
- -

resolve()和reject()是用来实现和拒绝新创建的promise的函数。此处，promise 成功运行通过显示字符串“Success!”。

- -

因此，当你调用此promise时，可以将.then()块链接到它的末尾，它将传递给.then()块一串“Success!”。在下面的代码中，我们显示出该消息：

- -
timeoutPromise
-.then((message) => {
-   alert(message);
-})
- -

更简化的版本：

- -
timeoutPromise.then(alert);
-
- -

尝试 running this live 以查看结果 (可参考 source code).

- -

上面的例子不是很灵活 - promise只能实现一个字符串，并且它没有指定任何类型的reject()条件（诚然，setTimeout()实际上没有失败条件，所以对这个简单的例子并不重要）。

- -
-

注意: 为什么要resolve()，而不是fullfill()？我们现在给你的答案有些复杂。

-
- -

拒绝一个自定义promise

- -

我们可以创建一个reject() 方法拒绝promise  - 就像resolve()一样，这需要一个值，但在这种情况下，它是拒绝的原因，即将传递给.catch()的错误块。

- -

让我们扩展前面的例子，使其具有一些reject()条件，并允许在成功时传递不同的消息。

- -

获取previous example副本，并将现有的timeoutPromise()定义替换为：

- -
function timeoutPromise(message, interval) {
-  return new Promise((resolve, reject) => {
-    if (message === '' || typeof message !== 'string') {
-      reject('Message is empty or not a string');
-    } else if (interval < 0 || typeof interval !== 'number') {
-      reject('Interval is negative or not a number');
-    } else {
-      setTimeout(function(){
-        resolve(message);
-      }, interval);
-    }
-  });
-};
- -

在这里，我们将两个方法传递给一个自定义函数 - 一个用来做某事的消息，以及在做这件事之前要经过的时间间隔。在函数内部，我们返回一个新的Promise对象 - 调用该函数将返回我们想要使用的promise。

- -

在Promise构造函数中，我们在if ... else结构中进行了一些检查：

- -
    -
  1. 首先，我们检查消息是否适合被警告。如果它是一个空字符串或根本不是字符串，我们会使用合适的错误消息拒绝该promise。
    2. -
  2. 接下来，我们检查间隔是否是适当的间隔值。如果是负数或不是数字，我们会使用合适的错误消息拒绝promise。
    3. -
  3. 最后，如果参数看起来都正常，我们使用setTimeout()在指定的时间间隔过后，使用指定的消息解析promise。
    4. -
- -

由于timeoutPromise()函数返回一个Promise，我们可以将.then()，.catch()等链接到它上面以利用它的功能。现在让我们使用它 - 将以前的timeoutPromise用法替换为以下值：

- -
timeoutPromise('Hello there!', 1000)
-.then(message => {
-   alert(message);
-})
-.catch(e => {
-  console.log('Error: ' + e);
-});
- -

当你按原样保存并运行代码时，一秒钟后你将收到消息提醒。现在尝试将消息设置为空字符串或将间隔设置为负数，例如，你将能够通过相应的错误消息查看被拒绝的promise！你还可以尝试使用已解决的消息执行其他操作，而不仅仅是提醒它。

- -
-

注意: 你可以在GitHub上找到我们的这个示例版本custom-promise2.html（另请参阅source code）。

-
- -

一个更真实的例子

- -

上面的例子是故意做得简单，以使概念易于理解，但它并不是实际上完全异步。异步性质基本上是使用setTimeout()伪造的，尽管它仍然表明promises对于创建具有合理的操作流程，良好的错误处理等的自定义函数很有用

- -

我们想邀请你学习的一个例子是Jake Archibald's idb library，它真正地显示了Promise()构造函数的有用异步应用程序。这采用了 IndexedDB API，它是一种旧式的基于回调的API，用于在客户端存储和检索数据，并允许你将其与promises一起使用。如果你查看main library file，你将看到我们在上面讨论过的相同类型的技术。以下块将许多IndexedDB方法使用的基本请求模型转换为使用promise：

- -
function promisifyRequest(request) {
-  return new Promise(function(resolve, reject) {
-    request.onsuccess = function() {
-      resolve(request.result);
-    };
-
-    request.onerror = function() {
-      reject(request.error);
-    };
-  });
-}
- -

这可以通过添加一些事件处理程序来实现，这些事件处理程序在适当的时候实现（fullfill）和拒绝（reject）promise。

- - - -

总结

- -

当我们不知道函数的返回值或返回需要多长时间时，Promises是构建异步应用程序的好方法。它们使得在没有深度嵌套回调的情况下更容易表达和推理异步操作序列，并且它们支持类似于同步try ... catch语句的错误处理方式。

- -

Promise适用于所有现代浏览器的最新版本;promise有兼容问题的唯一情况是Opera Mini和IE11及更早版本。

- -

本文中，我们没有涉及的所有promise的功能，只是最有趣和最有用的功能。当你开始了解有关promise的更多信息时，你会遇到更多功能和技巧。

- -

大多数现代Web API都是基于promise的，因此你需要了解promise才能充分利用它们。这些API包括WebRTC，Web Audio API，Media Capture and Streams等等。随着时间的推移，Promises将变得越来越重要，因此学习使用和理解它们是学习现代JavaScript的重要一步。

- -

参见

- - - -

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}

- -

 本章内容

- - diff --git "a/files/zh-cn/learn/javascript/\345\274\202\346\255\245/\346\246\202\345\277\265/index.html" "b/files/zh-cn/learn/javascript/\345\274\202\346\255\245/\346\246\202\345\277\265/index.html" deleted file mode 100644 index 6e59cda54b..0000000000 --- "a/files/zh-cn/learn/javascript/\345\274\202\346\255\245/\346\246\202\345\277\265/index.html" +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: 通用异步编程概念 -slug: learn/JavaScript/异步/概念 -tags: - - JavaScript - - Promises - - Threads - - 学习 - - 异步 - - 阻塞 -translation_of: Learn/JavaScript/Asynchronous/Concepts ---- -
{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
- -

在本文中，我们将介绍与异步编程相关的一些重要概念，以及它们在浏览器和JavaScript里的体现。在学习本系列的其他文章之前，你应该先理解这些概念。

- - - - - - - - - - - - -
预备条件:拥有基本的计算机知识，对JavaScript原理有一定了解。
目标:理解异步编程的基本概念，以及异步编程在浏览器和JavaScript里面的表现。
- -

异步?

- -

通常来说，程序都是顺序执行，同一时刻只会发生一件事。如果一个函数依赖于另一个函数的结果，它只能等待那个函数结束才能继续执行，从用户的角度来说，整个程序才算运行完毕.

- -

Mac 用户有时会经历过这种旋转的彩虹光标（常称为沙滩球），操作系统通过这个光标告诉用户：“现在运行的程序正在等待其他的某一件事情完成，才能继续运行，都这么长的时间了，你一定在担心到底发生了什么事情”。

- -

multi-colored macos beachball busy spinner

- -

这是令人沮丧的体验，没有充分利用计算机的计算能力 — 尤其是在计算机普遍都有多核CPU的时代，坐在那里等待毫无意义，你完全可以在另一个处理器内核上干其他的工作，同时计算机完成耗时任务的时候通知你。这样你可以同时完成其他工作，这就是异步编程的出发点。你正在使用的编程环境（就web开发而言，编程环境就是web浏览器）负责为你提供异步运行此类任务的API。

- -

产生阻塞的代码

- -

异步技术非常有用，特别是在web编程。当浏览器里面的一个web应用进行密集运算还没有把控制权返回给浏览器的时候，整个浏览器就像冻僵了一样，这叫做阻塞；这时候浏览器无法继续处理用户的输入并执行其他任务，直到web应用交回处理器的控制。

- -

我们来看一些阻塞的例子。

- -

例子： simple-sync.html  (see it running live), 在按钮上添加了一个事件监听器，当按钮被点击，它就开始运行一个非常耗时的任务（计算1千万个日期，并在console里显示最后一个日期），然后在DOM里面添加一个段落:

- -
const btn = document.querySelector('button');
-btn.addEventListener('click', () => {
-  let myDate;
-  for(let i = 0; i < 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});
- -

运行这个例子的时候，打开JavaScript console，然后点击按钮 — 你会注意到，直到日期的运算结束，最后一个日期在console上显示出来，段落才会出现在网页上。代码按照源代码的顺序执行，只有前面的代码结束运行，后面的代码才会执行。

- -
-

Note: 这个例子不现实：在实际情况中一般不会发生，没有谁会计算1千万次日期，它仅仅提供一个非常直观的体验.

-
- -

第二个例子, simple-sync-ui-blocking.html (see it live), 我们模拟一个在现实的网页可能遇到的情况：因为渲染UI而阻塞用户的互动，这个例子有2个按钮:

- - - -
function expensiveOperation() {
-  for(let i = 0; i < 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =>
-  alert('You clicked me!')
-);
- -

如果你点击第一个按钮，然后快速点击第二个，会注意到alert消息并没有出现，只有等到圆圈都画完以后，才会出现：因为第一个操作没有完成之前阻塞了第二个操作的运行.

- -
-

Note: 当然，这个例子也很丑陋，因为我们只是在模拟阻塞效果。但在现实中，这是一个很常见的问题。开发人员们一直在努力缓解它。

-
- -

为什么是这样? 答案是：JavaScript一般来说是单线程的（single threaded）。接着我们来介绍线程的概念。

- -

线程

- -

一个线程是一个基本的处理过程，程序用它来完成任务。每个线程一次只能执行一个任务:

- -
Task A --> Task B --> Task C
- -

每个任务顺序执行，只有前面的结束了，后面的才能开始。

- -

正如我们之前所说，现在的计算机大都有多个内核（core），因此可以同时执行多个任务。支持多线程的编程语言可以使用计算机的多个内核，同时完成多个任务:

- -
Thread 1: Task A --> Task B
-Thread 2: Task C --> Task D
- -

JavaScript 是单线程的

- -

JavaScript 传统上是单线程的。即使有多个内核，也只能在单一线程上运行多个任务，此线程称为主线程（main thread）。我们上面的例子运行如下:

- -
Main thread: Render circles to canvas --> Display alert()
- -

经过一段时间，JavaScript获得了一些工具来帮助解决这种问题。通过 Web workers 可以把一些任务交给一个名为worker的单独的线程，这样就可以同时运行多个JavaScript代码块。一般来说，用一个worker来运行一个耗时的任务，主线程就可以处理用户的交互（避免了阻塞）

- -
Main thread: Task A --> Task C
-Worker thread: Expensive task B
- -

记住这些，请查看simple-sync-worker.html (see it running live) , 再次打开浏览器的JavaScript 控制台。这个例子重写了前例：在一个单独的worker线程中计算一千万次日期，你再点击按钮，现在浏览器可以在日期计算完成之前显示段落，阻塞消失了。

- -

异步代码

- -

web workers相当有用，但是他们确实也有局限。主要的一个问题是他们不能访问 {{Glossary("DOM")}} — 不能让一个worker直接更新UI。我们不能在worker里面渲染1百万个蓝色圆圈，它基本上只能做算数的苦活。

- -

其次，虽然在worker里面运行的代码不会产生阻塞，但是基本上还是同步的。当一个函数依赖于几个在它之前运行的过程的结果，这就会成为问题。考虑下面的情况:

- -
Main thread: Task A --> Task B
- -

在这种情况下，比如说Task A 正在从服务器上获取一个图片之类的资源，Task B 准备在图片上加一个滤镜。如果开始运行Task A 后立即尝试运行Task B，你将会得到一个错误，因为图像还没有获取到。

- -
Main thread: Task A --> Task B --> |Task D|
-Worker thread: Task C -----------> |      |
- -

在这种情况下，假设Task D 要同时使用 Task B 和Task C的结果，如果我们能保证这两个结果同时提供，程序可能正常运行，但是这不太可能。如果Task D 尝试在其中一个结果尚未可用的情况下就运行，程序就会抛出一个错误。

- -

为了解决这些问题，浏览器允许我们异步运行某些操作。像Promises 这样的功能就允许让一些操作运行 (比如：从服务器上获取图片)，然后等待直到结果返回，再运行其他的操作:

- -
Main thread: Task A                   Task B
-    Promise:      |__async operation__|
- -

由于操作发生在其他地方，因此在处理异步操作的时候，主线程不会被阻塞。

- -

我们将在下一篇文章中开始研究如何编写异步代码。 非常令人兴奋，对吧？ 继续阅读！

- -

总结

- -

围绕异步编程领域，现代软件设计正在加速旋转，就为了让程序在一个时间内做更多的事情。当你使用更新更强大的API时，你会发现在更多的情况下，使用异步编程是唯一的途径。以前写异步代码很困难，现在也需要你来适应，但是已经变容易了很多。在余下的部分，我们将进一步探讨异步代码的重要性，以及如何设计代码来防止前面已经提到过的问题。

- -

模块大纲

- - diff --git "a/files/zh-cn/learn/javascript/\345\274\202\346\255\245/\347\256\200\344\273\213/index.html" "b/files/zh-cn/learn/javascript/\345\274\202\346\255\245/\347\256\200\344\273\213/index.html" deleted file mode 100644 index 1792c0e086..0000000000 --- "a/files/zh-cn/learn/javascript/\345\274\202\346\255\245/\347\256\200\344\273\213/index.html" +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: 异步JavaScript简介 -slug: learn/JavaScript/异步/简介 -translation_of: Learn/JavaScript/Asynchronous/Introducing ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/异步/概念", "Learn/JavaScript/异步/Timeouts_and_intervals", "Learn/JavaScript/异步")}}
- -

在本文中，我们简要回顾一下与同步JavaScript相关的问题，首次介绍你将遇到的一些不同的异步技术，并展示如何使用这些技术解决问题。

- - - - - - - - - - - - -
预备条件:基本的计算机素养，以及对JavaScript 基础知识的较好的理解。
目标:熟悉什么是异步JavaScript，与同步JavaScript 的区别，以及使用场合。
- -

同步JavaScript

- -

要理解什么是{{Glossary("异步")}} JavaScript ，我们应该从确切理解{{Glossary("同步")}} JavaScript 开始。本节回顾我们在上一篇文章中看到的一些信息。

- -

前面学的很多知识基本上都是同步的 — 运行代码，然后浏览器尽快返回结果。先看一个简单的例子 (运行它, 这是源码)：

- -
const btn = document.querySelector('button');
-btn.addEventListener('click', () => {
-  alert('You clicked me!');
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});
-
- -

这段代码, 一行一行的顺序执行：

- -
    -
  1. 先取得一个在DOM里面的 {{htmlelement("button")}} 引用。
    2. -
  2. 点击按钮的时候，添加一个 click 事件监听器: -
      -
    1. alert() 消息出现。
      2. -
    2. 一旦alert 结束，创建一个{{htmlelement("p")}} 元素。
      3. -
    3. 给它的文本内容赋值。
      4. -
    4. 最后，把这个段落放进网页。
      5. -
    -
    3. -
- -

每一个操作在执行的时候，其他任何事情都没有发生 — 网页的渲染暂停. 因为前篇文章提到过 JavaScript is single threaded. 任何时候只能做一件事情, 只有一个主线程，其他的事情都阻塞了，直到前面的操作完成。

- -

所以上面的例子，点击了按钮以后，段落不会创建，直到在alert消息框中点击ok，段落才会出现，你可以自己试试：

- - - -

{{EmbedLiveSample('Synchronous_JavaScript', '100%', '70px')}}

- -
-

Note: 这很重要请记住，alert()在演示阻塞效果的时候非常有用，但是在正式代码里面，它就是一个噩梦。

-
- -

异步JavaScript

- -

就前面提到的种种原因（比如，和阻塞相关）很多网页API特性使用异步代码，特别是从外部的设备上获取资源，譬如，从网络获取文件，访问数据库，从网络摄像头获得视频流，或者向VR头罩广播图像。

- -

为什么使用异步代码这么难？看一个例子，当你从服务器获取一个图像，通常你不可能立马就得到，这需要时间，虽然现在的网络很快。这意味着下面的伪代码可能不能正常工作：

- -
var response = fetch('myImage.png');
-var blob = response.blob();
-// display your image blob in the UI somehow
- -

因为你不知道下载图片会多久，所以第二行代码执行的时候可能报错（可能间歇的，也可能每次）因为图像还没有就绪。取代的方法就是，代码必须等到 response 返回才能继续往下执行。

- -

在JavaScript代码中，你经常会遇到两种异步编程风格：老派callbacks，新派promise。下面就来分别介绍。

- -

异步callbacks

- -

异步callbacks 其实就是函数，只不过是作为参数传递给那些在后台执行的其他函数. 当那些后台运行的代码结束，就调用callbacks函数，通知你工作已经完成，或者其他有趣的事情发生了。使用callbacks 有一点老套，在一些老派但经常使用的API里面，你会经常看到这种风格。

- -

举个例子，异步callback 就是{{domxref("EventTarget.addEventListener", "addEventListener()")}}第二个参数（前面的例子）：

- -
btn.addEventListener('click', () => {
-  alert('You clicked me!');
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});
- -

第一个参数是侦听的事件类型，第二个就是事件发生时调用的回调函数。.

- -

当我们把回调函数作为一个参数传递给另一个函数时，仅仅是把回调函数定义作为参数传递过去 — 回调函数并没有立刻执行，回调函数会在包含它的函数的某个地方异步执行，包含函数负责在合适的时候执行回调函数。

- -

你可以自己写一个容易的，包含回调函数的函数。来看另外一个例子，用 XMLHttpRequest API (运行它, 源代码) 加载资源：

- -
function loadAsset(url, type, callback) {
-  let xhr = new XMLHttpRequest();
-  xhr.open('GET', url);
-  xhr.responseType = type;
-
-  xhr.onload = function() {
-    callback(xhr.response);
-  };
-
-  xhr.send();
-}
-
-function displayImage(blob) {
-  let objectURL = URL.createObjectURL(blob);
-
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-loadAsset('coffee.jpg', 'blob', displayImage);
- -

创建 displayImage() 函数，简单的把blob传递给它，生成objectURL，然后再生成一个image元素，把objectURL作为image的源地址，最后显示这张图片。  然后，我们创建 loadAsset() 函数，把URL，type，和回调函数同时都作为参数。函数用 XMLHttpRequest (通常缩写 "XHR") 获取给定URL的资源，在获得资源响应后再把响应作为参数传递给回调函数去处理。 (使用 onload 事件处理) ，有点烧脑，是不是？！

- -

回调函数用途广泛 — 他们不仅仅可以用来控制函数的执行顺序和函数之间的数据传递，还可以根据环境的不同，将数据传递给不同的函数，所以对下载好的资源，你可以采用不同的操作来处理，譬如 processJSON(), displayText(), 等等。

- -

请注意，不是所有的回调函数都是异步的 — 有一些是同步的。一个例子就是使用 {{jsxref("Array.prototype.forEach()")}} 来遍历数组 (运行, 源代码):

- -
const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus'];
-
-gods.forEach(function (eachName, index){
-  console.log(index + '. ' + eachName);
-});
- -

在这个例子中，我们遍历一个希腊神的数组，并在控制台中打印索引和值。forEach() 需要的参数是一个回调函数，回调函数本身带有两个参数，数组元素和索引值。它无需等待任何事情，立即运行。

- -

Promises

- -

Promises 是新派的异步代码，现代的web APIs经常用到。 fetch() API就是一个很好的例子, 它基本上就是一个现代版的，更高效的 {{domxref("XMLHttpRequest")}}。看个例子，来自于文章 Fetching data from the server ：

- -
fetch('products.json').then(function(response) {
-  return response.json();
-}).then(function(json) {
-  products = json;
-  initialize();
-}).catch(function(err) {
-  console.log('Fetch problem: ' + err.message);
-});
- -
-

Note: 在GitHub上有完整的代码 (see the source here, and also see it running live)。

-
- -

这里fetch() 只需要一个参数— 资源的网络 URL — 返回一个 promise. promise 是表示异步操作完成或失败的对象。可以说，它代表了一种中间状态。 本质上，这是浏览器说“我保证尽快给您答复”的方式，因此得名“promise”。

- -

这个概念需要练习来适应;它感觉有点像运行中的{{interwiki("wikipedia", "薛定谔猫")}}。这两种可能的结果都还没有发生，因此fetch操作目前正在等待浏览器试图在将来某个时候完成该操作的结果。然后我们有三个代码块链接到fetch()的末尾：

- - - -
-

Note: 在本模块稍后的部分中，你将学习更多关于promise的内容，所以如果你还没有完全理解这些promise，请不要担心。

-
- -

事件队列

- -

像promise这样的异步操作被放入事件队列中，事件队列在主线程完成处理后运行，这样它们就不会阻止后续JavaScript代码的运行。排队操作将尽快完成，然后将结果返回到JavaScript环境。

- -

Promises 对比 callbacks

- -

promises与旧式callbacks有一些相似之处。它们本质上是一个返回的对象，您可以将回调函数附加到该对象上，而不必将回调作为参数传递给另一个函数。

- -

然而，Promise是专门为异步操作而设计的，与旧式回调相比具有许多优点:

- - - -

异步代码的本质

- -

让我们研究一个示例，它进一步说明了异步代码的本质，展示了当我们不完全了解代码执行顺序以及将异步代码视为同步代码时可能发生的问题。下面的示例与我们之前看到的非常相似( 运行它 和 源代码)。一个不同之处在于，我们包含了许多{{domxref("console.log()")}}语句，以展示代码将在其中执行的顺序。

- -
console.log ('Starting');
-let image;
-
-fetch('coffee.jpg').then((response) => {
-  console.log('It worked :)')
-  return response.blob();
-}).then((myBlob) => {
-  let objectURL = URL.createObjectURL(myBlob);
-  image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}).catch((error) => {
-  console.log('There has been a problem with your fetch operation: ' + error.message);
-});
-
-console.log ('All done!');
- -

浏览器将会执行代码，看见第一个console.log() 输出(Starting) ，然后创建image 变量。

- -

然后，它将移动到下一行并开始执行fetch()块，但是，因为fetch()是异步执行的，没有阻塞，所以在promise相关代码之后程序继续执行，从而到达最后的console.log()语句(All done!)并将其输出到控制台。

- -

只有当fetch() 块完成运行返回结果给.then() ，我们才最后看到第二个console.log() 消息 (It worked ;)) . 所以 这些消息 可能以 和你预期不同的顺序出现：

- - - -

如果你感到疑惑，考虑下面这个小例子：

- -
console.log("registering click handler");
-
-button.addEventListener('click', () => {
-  console.log("get click");
-});
-
-console.log("all done");
- -

这在行为上非常相似——第一个和第三个console.log()消息将立即显示，但是第二个消息将被阻塞，直到有人单击鼠标按钮。前面的示例以相同的方式工作，只是在这种情况下，第二个消息在promise链上被阻塞，直到获取资源后再显示在屏幕上，而不是单击。

- -

要查看实际情况，请尝试获取示例的本地副本，并将第三个console.log()调用更改为以下命令：

- -
console.log ('All done! ' + image.src + 'displayed.');
- -

此时控制台将会报错，而不会显示第三个 console.log 的信息：

- -
TypeError: image is undefined; can't access its "src" property
- -

这是因为：浏览器运行第三个console.log()的时候，fetch() 语句块还没有完成，因此image还没有赋值。

- -

主动学习：把代码全部异步化

- -

要修复有问题的fetch()示例并使三个console.log()语句按期望的顺序出现，还可以让第三个console.log()语句异步运行。这可以通过将它移动到另一个then()块中来实现，然后将它链接到第二个then()块的末尾，或者简单地将它移动到第二个then()块中。现在就试试。

- -
-

Note: 如果你困住了，你可以在这里找到答案 (这里运行)。在后面的文章：用Promises优雅的异步编程, 你将会发现更多信息。

-
- -

小结

- -

在最基本的形式中，JavaScript是一种同步的、阻塞的、单线程的语言，在这种语言中，一次只能执行一个操作。但web浏览器定义了函数和API，允许我们当某些事件发生时不是按照同步方式，而是异步地调用函数(比如，时间的推移，用户通过鼠标的交互，或者获取网络数据)。这意味着您的代码可以同时做几件事情，而不需要停止或阻塞主线程。

- -

异步还是同步执行代码，取决于我们要做什么。

- -

有些时候，我们希望事情能够立即加载并发生。例如，当将一些用户定义的样式应用到一个页面时，您希望这些样式能够尽快被应用。

- -

但是，如果我们正在运行一个需要时间的操作，比如查询数据库并使用结果填充模板，那么最好将该操作从主线程中移开使用异步完成任务。随着时间的推移，您将了解何时选择异步技术比选择同步技术更有意义。

- - - -

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}

- -

模块大纲

- - diff --git "a/files/zh-cn/learn/javascript/\345\274\202\346\255\245/\350\266\205\346\227\266\345\222\214\351\227\264\351\232\224/index.html" "b/files/zh-cn/learn/javascript/\345\274\202\346\255\245/\350\266\205\346\227\266\345\222\214\351\227\264\351\232\224/index.html" deleted file mode 100644 index 2cf83da82c..0000000000 --- "a/files/zh-cn/learn/javascript/\345\274\202\346\255\245/\350\266\205\346\227\266\345\222\214\351\227\264\351\232\224/index.html" +++ /dev/null @@ -1,617 +0,0 @@ ---- -title: '合作异步JavaScript: 超时和间隔' -slug: learn/JavaScript/异步/超时和间隔 -translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals ---- -
{{LearnSidebar}}
- -
- -
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
- -
- -

在这里，我们将讨论传统的JavaScript方法，这些方法可以在一段时间或一段规则间隔(例如，每秒固定的次数)之后，以异步方式运行代码，并讨论它们的用处，以及它们的固有问题。

- - - - - - - - - - - - -
预备条件:基本的计算机知识，对JavaScript基本原理有较好的理解。
目标:了解异步循环和间隔及其用途。
- -

介绍

- -

很长一段时间以来，web平台为JavaScript程序员提供了许多函数，这些函数允许您在一段时间间隔过后异步执行代码，或者重复异步执行代码块，直到您告诉它停止为止。这些都是:

- -
-
setTimeout()
-
在指定的时间后执行一段代码.
-
setInterval()
-
以固定的时间间隔，重复运行一段代码.
-
requestAnimationFrame()
-
setInterval()的现代版本;在浏览器下一次重新绘制显示之前执行指定的代码块，从而允许动画在适当的帧率下运行，而不管它在什么环境中运行.
-
- -

这些函数设置的异步代码实际上在主线程上运行（在其指定的计时器过去之后）。

- -

在 setTimeout() 调用执行之前或 setInterval() 迭代之间可以（并且经常会）运行其他代码。根据这些操作的处理器密集程度，它们可以进一步延迟异步代码，因为任何异步代码仅在主线程可用后才执行（换句话说，当调用栈为空时）。在阅读本文时，您将学到更多关于此问题的信息。

- -

无论如何，这些函数用于在web站点或应用程序上运行不间断的动画和其他后台处理。在下面的部分中，我们将向您展示如何使用它们。

- -

setTimeout()

- -

正如前述， setTimeout() 在指定的时间后执行一段特定代码. 它需要如下参数:

- - - -
-

Note: 指定的时间（或延迟）不能保证在指定的确切时间之后执行，而是最短的延迟执行时间。在主线程上的堆栈为空之前，传递给这些函数的回调将无法运行。

- -

结果，像 setTimeout(fn, 0) 这样的代码将在堆栈为空时立即执行，而不是立即执行。如果执行类似 setTimeout(fn, 0) 之类的代码，之后立即运行从 1 到 100亿 的循环之后，回调将在几秒后执行。 

-
- -

在下面的示例中，浏览器将在执行匿名函数之前等待两秒钟，然后显示alert消息 (see it running live, and see the source code):

- -
let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)
- -

我们指定的函数不必是匿名的。我们可以给函数一个名称，甚至可以在其他地方定义它，并将函数引用传递给 setTimeout() 。以下两个版本的代码片段相当于第一个版本:

- -
// With a named function
-let myGreeting = setTimeout(function sayHi() {
-  alert('Hello, Mr. Universe!');
-}, 2000)
-
-// With a function defined separately
-function sayHi() {
-  alert('Hello Mr. Universe!');
-}
-
-let myGreeting = setTimeout(sayHi, 2000);
- -

例如，如果我们有一个函数既需要从超时调用，也需要响应某个事件，那么这将非常有用。此外它也可以帮助保持代码整洁，特别是当超时回调超过几行代码时。

- -

setTimeout() 返回一个标志符变量用来引用这个间隔，可以稍后用来取消这个超时任务，下面就会学到 {{anch("Clearing timeouts")}} 。

- -

传递参数给setTimeout() 

- -

我们希望传递给setTimeout()中运行的函数的任何参数，都必须作为列表末尾的附加参数传递给它。

- -

例如，我们可以重构之前的函数，这样无论传递给它的人的名字是什么，它都会向它打招呼：

- -
function sayHi(who) {
-  alert('Hello ' + who + '!');
-}
- -

人名可以通过第三个参数传进 setTimeout() ：

- -
let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');
- -

清除超时

- -

最后，如果创建了 timeout，您可以通过调用clearTimeout()，将setTimeout()调用的标识符作为参数传递给它，从而在超时运行之前取消。要取消上面的超时，你需要这样做：

- -
clearTimeout(myGreeting);
- -
-

注意: 请参阅 greeter-app.html 以获得稍微复杂一点的演示，该演示允许您在表单中设置要打招呼的人的姓名，并使用单独的按钮取消问候语（see the source code also）。

-
- -

setInterval()

- -

当我们需要在一段时间之后运行一次代码时，setTimeout()可以很好地工作。但是当我们需要反复运行代码时会发生什么，例如在动画的情况下?

- -

这就是setInterval()的作用所在。这与setTimeout()的工作方式非常相似，只是作为第一个参数传递给它的函数，重复执行的时间不少于第二个参数给出的毫秒数，而不是一次执行。您还可以将正在执行的函数所需的任何参数作为 setInterval() 调用的后续参数传递。

- -

让我们看一个例子。下面的函数创建一个新的Date()对象，使用toLocaleTimeString()从中提取一个时间字符串，然后在UI中显示它。然后，我们使用setInterval()每秒运行该函数一次，创建一个每秒更新一次的数字时钟的效果。

- -

(see this live, and also see the source):

- -
function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);
- -

像setTimeout()一样, setInterval() 返回一个确定的值，稍后你可以用它来取消间隔任务。

- -

清除intervals

- -

setInterval()永远保持运行任务,除非我们做点什么——我们可能会想阻止这样的任务,否则当浏览器无法完成任何进一步的任务时我们可能得到错误, 或者动画处理已经完成了。我们可以用与停止超时相同的方法来实现这一点——通过将setInterval()调用返回的标识符传递给clearInterval()函数:

- -
const myInterval = setInterval(myFunction, 2000);
-
-clearInterval(myInterval);
- -

主动学习：创建秒表!

- -

话虽如此，我们还是要给你一个挑战。以我们的setInterval-clock.html为例，修改它以创建您自己的简单秒表。

- -

你要像前面一样显示时间，但是在这里，你需要：

- - - -

提示:

- - - -
-

Note: 如果您在操作过程有困难，请参考 see it runing live (see the source code also).

-
- -

关于 setTimeout() 和 setInterval() 需要注意的几点

- -

当使用 setTimeout() 和 setInterval()的时候，有几点需要额外注意。 现在让我们回顾一下：

- -

递归的timeouts

- -

还有另一种方法可以使用setTimeout()：我们可以递归调用它来重复运行相同的代码，而不是使用setInterval()。

- -

下面的示例使用递归setTimeout()每100毫秒运行传递来的函数：

- -
let i = 1;
-
-setTimeout(function run() {
-  console.log(i);
-  i++;
-  setTimeout(run, 100);
-}, 100);
- -

将上面的示例与下面的示例进行比较 ––这使用 setInterval() 来实现相同的效果：

- -
let i = 1;
-
-setInterval(function run() {
-  console.log(i);
-  i++
-}, 100);
- -

递归setTimeout()和setInterval()有何不同？

- -

上述代码的两个版本之间的差异是微妙的。

- - - -

当你的代码有可能比你分配的时间间隔，花费更长时间运行时，最好使用递归的 setTimeout() - 这将使执行之间的时间间隔保持不变，无论代码执行多长时间，你不会得到错误。

- -

立即超时

- -

使用0用作setTimeout()的回调函数会立刻执行，但是在主线程代码运行之后执行。

- -

举个例子，下面的代码(see it live) 输出一个包含警报的"Hello"，然后在您点击第一个警报的OK之后立即弹出“world”。

- -
setTimeout(function() {
-  alert('World');
-}, 0);
-
-alert('Hello');
- -

如果您希望设置一个代码块以便在所有主线程完成运行后立即运行，这将很有用。将其放在异步事件循环中，这样它将随后直接运行。

- -

使用 clearTimeout() or clearInterval()清除

- -

clearTimeout() 和clearInterval() 都使用相同的条目列表进行清除。有趣的是，这意味着你可以使用任一一种方法来清除 setTimeout() 和 setInterval()。

- -

但为了保持一致性，你应该使用 clearTimeout() 来清除 setTimeout() 条目，使用 clearInterval() 来清除 setInterval() 条目。 这样有助于避免混乱。

- -

requestAnimationFrame()

- -

requestAnimationFrame() 是一个专门的循环函数，旨在浏览器中高效运行动画。它基本上是现代版本的setInterval() —— 它在浏览器重新加载显示内容之前执行指定的代码块，从而允许动画以适当的帧速率运行，不管其运行的环境如何。

- -

它是针对setInterval() 遇到的问题创建的，比如 setInterval()并不是针对设备优化的帧率运行，有时会丢帧。还有即使该选项卡不是活动的选项卡或动画滚出页面等问题 。

- -

（在CreativeJS上了解有关此内容的更多信息）.

- -
-

注意： 你可以在课程中其他地方找到requestAnimationFrame() 的使用范例—参见 Drawing graphics, 和 Object building practice。

-
- -

该方法将重新加载页面之前要调用的回调函数作为参数。这是您将看到的常见表达：

- -
function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();
- -

这个想法是要定义一个函数，在其中更新动画 (例如，移动精灵，更新乐谱，刷新数据等)，然后调用它来开始这个过程。在函数的末尾，以 requestAnimationFrame() 传递的函数作为参数进行调用，这指示浏览器在下一次显示重新绘制时再次调用该函数。然后这个操作连续运行， 因为requestAnimationFrame() 是递归调用的。

- -
-

注意: 如果要执行某种简单的常规DOM动画, CSS 动画 可能更快，因为它们是由浏览器的内部代码计算而不是JavaScript直接计算的。但是，如果您正在做一些更复杂的事情，并且涉及到在DOM中不能直接访问的对象(such as 2D Canvas API or WebGL objects), requestAnimationFrame() 在大多数情况下是更好的选择。

-
- -

你的动画跑得有多快？

- -

动画的平滑度直接取决于动画的帧速率，并以每秒帧数（fps）为单位进行测量。这个数字越高，动画看起来就越平滑。

- -

由于大多数屏幕的刷新率为60Hz，因此在使用web浏览器时，可以达到的最快帧速率是每秒60帧（FPS）。然而，更多的帧意味着更多的处理，这通常会导致卡顿和跳跃-也称为丢帧或跳帧。

- -

如果您有一个刷新率为60Hz的显示器，并且希望达到60fps，则大约有16.7毫秒（1000/60）来执行动画代码来渲染每个帧。这提醒我们，我们需要注意每次通过动画循环时要运行的代码量。

- -

requestAnimationFrame() 总是试图尽可能接近60帧/秒的值，当然有时这是不可能的如果你有一个非常复杂的动画，你是在一个缓慢的计算机上运行它，你的帧速率将更少。requestAnimationFrame() 会尽其所能利用现有资源提升帧速率。

- -

 requestAnimationFrame() 与 setInterval() 和 setTimeout()有什么不同?

- -

让我们进一步讨论一下 requestAnimationFrame() 方法与前面介绍的其他方法的区别. 下面让我们看一下代码:

- -
function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();
- -

现在让我们看看如何使用setInterval():

- -
function draw() {
-   // Drawing code goes here
-}
-
-setInterval(draw, 17);
- -

如前所述，我们没有为requestAnimationFrame();指定时间间隔；它只是在当前条件下尽可能快速平稳地运行它。如果动画由于某些原因而处于屏幕外浏览器也不会浪费时间运行它。

- -

 另一方面setInterval()需要指定间隔。我们通过公式1000毫秒/60Hz得出17的最终值，然后将其四舍五入。四舍五入是一个好主意，浏览器可能会尝试运行动画的速度超过60fps，它不会对动画的平滑度有任何影响。如前所述，60Hz是标准刷新率。

- -

包括时间戳

- -

传递给 requestAnimationFrame() 函数的实际回调也可以被赋予一个参数（一个时间戳值），表示自 requestAnimationFrame() 开始运行以来的时间。这是很有用的，因为它允许您在特定的时间以恒定的速度运行，而不管您的设备有多快或多慢。您将使用的一般模式如下所示：

- -
let startTime = null;
-
-function draw(timestamp) {
-    if(!startTime) {
-      startTime = timestamp;
-    }
-
-   currentTime = timestamp - startTime;
-
-   // Do something based on current time
-
-   requestAnimationFrame(draw);
-}
-
-draw();
- -

浏览器支持

- -

 与setInterval()或setTimeout() 相比最近的浏览器支持requestAnimationFrame()

- -

— requestAnimationFrame().在Internet Explorer 10及更高版本中可用。因此，除非您的代码需要支持旧版本的IE，否则没有什么理由不使用requestAnimationFrame() 。

- -

一个简单的例子

- -

学习上述理论已经足够了，下面让我们仔细研究并构建自己的requestAnimationFrame() 示例。我们将创建一个简单的“旋转器动画”（spinner animation），即当应用程序忙于连接到服务器时可能会显示的那种动画。

- -
-

注意: 一般来说，像以下例子中如此简单的动画应用CSS动画来实现，这里使用requestAnimationFrame()只是为了帮助解释其用法。requestAnimationFrame()正常应用于如逐帧更新游戏画面这样的复杂动画。

-
- -
    -
  1. -

    首先, 下载我们的网页模板。

    -
    2. -
  2. -

    放置一个空的 {{htmlelement("div")}} 元素进入 {{htmlelement("body")}}, 然后在其中加入一个 ↻ 字符.这是一个将循环的字符将在我们的例子中作为我们的旋转器（spinner）。

    -
    3. -
  3. -

    用任何你喜欢的方法应用下述的CSS到HTML模板中。这些在页面上设置了一个红色背景，将<body>的高度设置为100%<html>的高度，并将<div>水平和竖直居中。

    - - 
    html {
-  background-color: white;
-  height: 100%;
-}
-
-body {
-  height: inherit;
-  background-color: red;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-div {
-  display: inline-block;
-  font-size: 10rem;
-}
    -
    4. -
  4. -

    插入一个 {{htmlelement("script")}}元素在 </body> 标签之上。

    -
    5. -
  5. -

    插入下述的JavaScript在你的 <script> 元素中。这里我们存储了一个<div>的引用在一个常量中，设置rotateCount变量为 0, 设置一个未初始化的变量之后将会用作容纳一个requestAnimationFrame() 的调用, 然后设置一个 startTime 变量为 null，它之后将会用作存储 requestAnimationFrame() 的起始时间.。

    - - 
    const spinner = document.querySelector('div');
-let rotateCount = 0;
-let rAF;
-let startTime = null;
    -
    6. -
  6. -

    在之前的代码下面, 插入一个 draw() 函数将被用作容纳我们的动画代码，并且包含了 时间戳 参数。

    - - 
    function draw(timestamp) {
-
-}
    -
    7. -
  7. -

    在draw()中, 加入下述的几行。 如果起始时间还没有被赋值的话，将timestamp 传给它（这只将发生在循环中的第一步）。 并赋值给rotateCount ，以旋转 旋转器(spinning)（此处取(当前时间戳 – 起始时间戳) / 3，以免它转得太快）:

    - - 
      if (!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-
    -
    8. -
  8. -

    在draw()内我们刚刚添加的代码之后，添加以下代码 — 此处是在检查rotateCount 的值是否超过了359 (e.g. 360, 一个正圆的度数)。 如果是，与360取模（值除以 360 后剩下的余数），使得圆圈的动画能以合理的低值连续播放。需要注意的是，这样的操作并不是必要的，只是比起类似于“128000度”的值，运行在 0-359 度之间会使你的操作更容易些。

    - - 
    if (rotateCount > 359) {
-  rotateCount %= 360;
-}
    -
    9. -
  9. -

    接下来，在上一个块下面添加以下行以实际旋转 旋转(spinner)器：

    - - 
    spinner.style.transform = `rotate(${rotateCount}deg)`;
    -
    10. -
  10. -

    在函数draw()内的最下方，插入下面这行代码。这是整个操作中最关键的部分 — 我们将前面定义的变量设置为以draw()函数为参数的活动requestAnimation()调用。 这样动画就开始了，以尽可能接近60 FPS的速率不断地运行draw()函数。

    - - 
    rAF = requestAnimationFrame(draw);
    -
    11. -
  11. -

    在 draw() 函数定义下方，添加对 draw() 函数的调用以启动动画。

    -
    12. -
  12. - 
    draw();
    -
    13. -
- -
-

Note: You can find this example live on GitHub (see the source code also).

-
- -

撤销requestAnimationFrame()

- -

requestAnimationFrame()可用与之对应的cancelAnimationFrame()方法“撤销”（不同于“set…”类方法的“清除”，此处更接近“撤销”之意）。

- -

该方法以requestAnimationFrame()的返回值为参数，此处我们将该返回值存在变量 rAF 中：

- -
cancelAnimationFrame(rAF);
- -

主动学习： 启动和停止旋转器（spinner）

- -

在这个练习中，我们希望你能对cancelAnimationFrame()方法做一些测试，在之前的示例中添加新内容。你需要在示例中添加一个事件监听器，用于当鼠标在页面任意位置点击时，启动或停止旋转器。 

- -

一些提示：

- - - -
-

Note: 先自己尝试一下，如果你确实遇到困难，可以参看我们的在线示例和源代码。

-
- -

限制 (节流) requestAnimationFrame()动画

- -

requestAnimationFrame() 的限制之一是无法选择帧率。在大多数情况下，这不是问题，因为通常希望动画尽可能流畅地运行。但是，当要创建老式的8位类型的动画时，怎么办？

- -

例如，在我们的 Drawing Graphics 文章中的猴子岛行走动画中的一个问题：

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}

- -

在此示例中，必须为角色在屏幕上的位置及显示的精灵设置动画。精灵动画中只有6帧。如果通过 requestAnimationFrame() 为屏幕上显示的每个帧显示不同的精灵帧，则 Guybrush 的四肢移动太快，动画看起来很荒谬。因此，此示例使用以下代码限制精灵循环的帧率：

- -
if (posX % 13 === 0) {
-  if (sprite === 5) {
-    sprite = 0;
-  } else {
-    sprite++;
-  }
-}
- -

因此，代码每13个动画帧循环一次精灵。

- -

...实际上，大约是每 6.5 帧，因为我们将每帧更新 posX 2个单位值（角色在屏幕上的位置）

- -
if(posX > width/2) {
-  newStartPos = -( (width / 2) + 102 );
-  posX = Math.ceil(newStartPos / 13) * 13;
-  console.log(posX);
-} else {
-  posX += 2;
-}
- -

这是用于计算如何更新每个动画帧中的位置的代码。

- -

用于限制动画的方法将取决于特定代码。例如，在前面的旋转器实例中，可以通过仅在每帧中增加 rotateCount 一个单位(而不是两个单位)来使其运动速度变慢。

- -

主动学习：反应游戏

- -

对于本文的最后部分，将创建一个 2 人反应游戏。游戏将有两个玩家，其中一个使用 A 键控制游戏，另一个使用 L 键控制游戏。

- -

按下 开始 按钮后，像前面看到的旋转器那样的将显示 5 到 10 秒之间的随机时间。之后将出现一条消息，提示 “PLAYERS GO！！”。一旦这发生，第一个按下其控制按钮的玩家将赢得比赛。

- -

{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}

- -

让我们来完成以下工作：

- -
    -
  1. -

    首先，下载 starter file for the app 。其中包含完成的 HTML 结构和 CSS 样式，为我们提供了一个游戏板，其中显示了两个玩家的信息（如上所示），但 spinner 和 结果段落重叠显示，只需要编写 JavaScript 代码。

    -
    2. -
  2. -

    在页面上空的 {{htmlelement("script")}} 元素里，首先添加以下几行代码，这些代码定义了其余代码中需要的一些常量和变量：

    - - 
    const spinner = document.querySelector('.spinner p');
-const spinnerContainer = document.querySelector('.spinner');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-const btn = document.querySelector('button');
-const result = document.querySelector('.result');
    - -

    这些是:

    - -
      -
    1. 对旋转器的引用，因此可以对其进行动画处理。
      2. -
    2. 包含旋转器 {{htmlelement("div")}} 元素的引用。用于显示和隐藏它。
      3. -
    3. 旋转计数。这确定了显示在动画每一帧上的旋转器旋转了多少。
      4. -
    4. 开始时间为null。当旋转器开始旋转时，它将赋值为 开始时间。
      5. -
    5. 一个未初始化的变量，用于之后存储使 旋转器 动画化的  {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}}  调用。
      6. -
    6. 开始按钮的引用。
      7. -
    7. 结果字段的引用。
      8. -
    -
    3. -
  3. -

    接下来，在前几行代码下方，添加以下函数。它只接收两个数字并返回一个在两个数字之间的随机数。稍后将需要它来生成随机超时间隔。

    - - 
    function random(min,max) {
-  var num = Math.floor(Math.random()*(max-min)) + min;
-  return num;
-}
    -
    4. -
  4. -

    接下来添加 draw() 函数以使 旋转器 动画化。这与之前的简单旋转器示例中的版本非常相似：

    - - 
      function draw(timestamp) {
-    if(!startTime) {
-     startTime = timestamp;
-    }
-
-    let rotateCount = (timestamp - startTime) / 3;
-
-    if(rotateCount > 359) {
-      rotateCount %= 360;
-    }
-
-    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-    rAF = requestAnimationFrame(draw);
-  }
    -
    5. -
  5. -

    现在是时候在页面首次加载时设置应用程序的初始状态了。添加以下两行，它们使用 display: none; 隐藏结果段落和旋转器容器。

    - - 
    result.style.display = 'none';
-spinnerContainer.style.display = 'none';
    -
    6. -
  6. -

    接下来，定义一个 reset() 函数。该函数在游戏结束后将游戏设置回初始状态以便再次开启游戏。在代码底部添加以下内容：

    - - 
    function reset() {
-  btn.style.display = 'block';
-  result.textContent = '';
-  result.style.display = 'none';
-}
    -
    7. -
  7. 好的，准备充分！现在该使游戏变得可玩了！将以下代码块添加到代码中。 start() 函数调用 draw() 以启动 旋转器，并在UI中显示它，隐藏“开始”按钮，这样您就无法通过同时启动多次来弄乱游戏，并运行一个经过5到10秒的随机间隔后，会运行 setEndgame() 函数的 setTimeout() 。下面的代码块还将一个事件侦听器添加到按钮上，以在单击它时运行 start() 函数。 - 
    btn.addEventListener('click', start);
-
-function start() {
-  draw();
-  spinnerContainer.style.display = 'block';
-  btn.style.display = 'none';
-  setTimeout(setEndgame, random(5000,10000));
-}
    -
    8. -
  8. 添加以下方法到代码：
    9. -
- -
function setEndgame() {
-  cancelAnimationFrame(rAF);
-  spinnerContainer.style.display = 'none';
-  result.style.display = 'block';
-  result.textContent = 'PLAYERS GO!!';
-
-  document.addEventListener('keydown', keyHandler);
-
-  function keyHandler(e) {
-    console.log(e.key);
-    if(e.key === 'a') {
-      result.textContent = 'Player 1 won!!';
-    } else if(e.key === 'l') {
-      result.textContent = 'Player 2 won!!';
-    }
-
-    document.removeEventListener('keydown', keyHandler);
-    setTimeout(reset, 5000);
-  };
-}
- -

逐步执行以下操作：

- -
    -
  1. 首先通过 {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}}  取消 旋转器 动画（清理不必要的流程总是一件好事），隐藏 旋转器 容器。
    2. -
  2. 接下来，显示结果段落并将其文本内容设置为“ PLAYERS GO !!”。向玩家发出信号，表示他们现在可以按下按钮来取胜。
    3. -
  3. 将 keydown 事件侦听器附加到 document。当按下任何按钮时，keyHandler() 函数将运行。
    4. -
  4. 在 keyHandler() 里，在 keyHandler() 内部，代码包括作为参数的事件对象作为参数（用 e 表示）- 其 {{domxref("KeyboardEvent.key", "key")}} 属性包含刚刚按下的键，可以通过这个对象来对特定的操作和特定的按键做出响应。
    5. -
  5. 将变量 isOver 设置为 false ，这样我们就可以跟踪是否按下了正确的按键以使玩家1或2获胜。我们不希望游戏在按下错误的键后结束。
    6. -
  6. 将 e.key 输出到控制台，这是找出所按的不同键的键值的有用方法。
    7. -
  7. 当 e.key 为“ a”时，显示一条消息说玩家1获胜；当 e.key 为“ l”时，显示消息说玩家2获胜。 （注意：这仅适用于小写的a和l - 如果提交了大写的 A 或 L（键加上 Shift），则将其视为另一个键！）如果按下了其中一个键，请将 isOver 设置为 true 。
    8. -
  8. 仅当 isOver 为 true 时，才使用 {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} 删除 keydown 事件侦听器，以便一旦产生获胜的按键，就不再有键盘输入可以弄乱最终游戏结果。您还可以使用 setTimeout() 在5秒钟后调用 reset()－如前所述，此函数将游戏重置为原始状态，以便可以开始新游戏。
    9. -
- -

就这样-一切都完成了！

- -
-

Note: 如果卡住了， check out our version of the reaction game (see the source code also).

-
- -

结论

- -

就是这样-异步循环和间隔的所有要点在一篇文章中介绍了。您会发现这些方法在许多情况下都很有用，但请注意不要过度使用它们！因为它们仍然在主线程上运行，所以繁重的回调（尤其是那些操纵DOM的回调）会在不注意的情况下降低页面的速度。

- -

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}

- -

In this module

- - diff --git a/files/zh-cn/learn/performance/perceived_performance/index.html b/files/zh-cn/learn/performance/perceived_performance/index.html new file mode 100644 index 0000000000..3740a4c62c --- /dev/null +++ b/files/zh-cn/learn/performance/perceived_performance/index.html @@ -0,0 +1,109 @@ +--- +title: 感知性能 +slug: learn/Performance/感知性能 +tags: + - Web 性能 + - 感知性能 +translation_of: Learn/Performance/perceived_performance +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Performance/what_is_web_performance", "Learn/Performance/Measuring_performance", "Learn/Performance")}}
+ +

感知性能 是用户对网站速度的感受。 用户如何看待性能与任何客观统计数据一样重要，甚至更重要，但它是主观的，并且不易测量。感知性能是用户视角，而不是指标。

+ +

本文简要介绍了感知性能，着眼于用户的感知，以及可以使用哪些客观工具来衡量这类主观因素。

+ + + + + + + + + + + + +
预备知识：基础计算机知识，基本软件安装， 客户端 web 技术的基础知识
目标基本了解用户对Web性能的看法。
+ +

性能是关于用户视角的。 How fast a website feels like it's loading and rendering has a greater impact on user experience than how fast the website actually loads and renders. Even if an operation is going to take a long time (because of latency or or inavailability of the main thread), it is possible to keep the user engaged while they wait by showing a loading spinner, or a series of useful hints and tips (or jokes, or whatever else you think might be appropriate). Such an approach is much better than just showing nothing, which will make it feel like it is taking a lot longer and possibly lead to your users thinking it is broken and giving up.

+ +

感知性能

+ +

The perception of how fast your site loads and how responsive feels to user interaction is vitally important; even more important that actual download time but difficult to quantify. There are areas of your site that you may not be able to make faster, but you can make it feel faster even if the metrics discussed in the othser sections can't be improved.

+ +

There is no unicorn metric that can measure what the user feels, but metrics are useful in guaging improvements (and regressions). Relevant measurements include first meaningful paint (FMP), largest contentful paint (LCP), time to interactive (TTI), render start, DOM interactive, and speed index.

+ +

First paint is reported by the browser and provides the time, in ms, of when the page starts changing; but this change can be a simple background color update or something even less noticable. It doesn’t indicate completeness and may report a time when nothing visible is painted. First Contentful Paint (FCP) reports the time when the browser first rendered anything of signifigance, be that text, foreground or background image, or a canvas or SVG; capturing the very beginning of the loading experience. But, just because there's content, doesn't mean it's useful content or that the user has content to consume. The First Meaningful Paint, or FMP, is the when content appears on the screen that is actually meaningful; which is a better metric for user-perceived loading experience, but still not ideal. Largest contentful paint (LCP) metric, definited in the Largest Contentful Paint API, reports the render time of the largest content element visible in the viewport.

+ +

Speed index is also used to approximate perceived performance: it measures the average time for pixels on the visible screen to be painted. It doesn't account for jitter, nor does it weight which content important to a user more highly, so it's not a perfect metric.

+ +

These metrics have to do with initial load and render. It is also important to ensure the site feels fast once the user begins interacting with it. For this, time to interactive, is a good metric; it is the moment when the last long task of the load process finishes and the UI is available for user interaction with delay.

+ +

UI lack or responsiveness and jank both harm perceived performance. Even though a task may take a long time, though, there are ways to make it seem faster. There are several tips to improving perceived performance.

+ +

提升感知性能

+ +

Understanding networking, how the browser works, user perception of time, etc., can help you better understand how to improve the user interaction. However, you don't have to know the ins and outs of how everything, including how the human mind works, to improve the perception of speed.

+ +

How fast or slow something feels like it's taking depends a lot on whether the user is actively or passively waiting for this thing to happen. Waits can have an active and passive phase. When the user is active - moving the mouse, thinking, being entertainted, they are in an active phase. The passive phase occurs when the user is passively waiting, like staring at a monochrome screen. If both the passive and active waits time were objectively equal, users would estimate that the passive waiting period was longer than the active. If a load, render, or response time can not be objectively minimized any further, turning the wait into an active wait instead of a passive wait can make it feel faster.

+ +

There are tips and tricks to follow. Some of these quick tips have full articles if you want to dive deeper.

+ +

Displaying content, or at least some part of the page with an indication that content is loading, as quickly as possible, is essential to improving perceived performance. For example, because page render is blocked by loading and parsing CSS and JavaScript, minimizing the amount of CSS and JS that needs to be loaded on initially will have a major impact on improving perceived performance. Even though the bytes might be the same, not blocking the page from rendering makes the load feel faster.

+ +

这里有一些技巧有助于提升性能：

+ +

最小化初始加载

+ +

要提升可感知性能，请最小化页面初始加载。 换句话说，首先下载将实际显示的所有内容，但仅下载实际使用的内容，然后下载其余内容。 因为最终要下载所有资源，所以实际上资源总量并没有改善——实际上还需要增加一些代码。但因为暂不需要的资源被延后加载了，所以用户并不会感知资源量的增加，而会感受到页面加载更快了。 

+ +

为了最大程度地减少初始加载资源，请从内容中分离交互式功能，以便优先加载初始化时所需的可见内容——文本、样式和图像。 延迟加载其余资源。

+ +

不要加载初始页面未使用或看不到的图像或脚本，而在页面可用后延时加载，或在需要使用时按需加载。 在初始页面加载之后加载其他资源可提高感知性能。 在初始请求中加载基本数据，并仅根据需要逐步加载功能部件和数据，有助于改善低带宽和低规格硬件的体验。

+ +

此外，您应该优化需加载的资源。 图片和视频应以最佳格式、压缩后的大小和正确尺寸进行投放。

+ +

防止内容跳转和其他重排

+ +

Images or other assets causing content to be pushed down or jump to a different location, like the loading of third party advertisements, can make the page feel like it is still loading and is bad for perceived performance. Content reflowing is especially bad for user experience when not initiated by user interaction. If some assets are going to be slower to load than others, with elements loading after other content has already been painted to the screen, plan ahead and leave space in the layout for them so that content doesn't jump or resize, especially after the site has become interactive.

+ +

避免字体文件延迟

+ +

Font use can both help and harm user experience. Selecting the right fonts is an art form, and can greatly improve the user experience. Fonts can also harm user experience, especially if the fonts used need to be imported, and if the importing is not optimal, or if Comic Sans is used (kidding).  Flicker of unstyled text and missing text both harm performance.

+ +

Make fallback fonts the same size and weight so that when fonts load the page change is less noticeable.

+ +

交互类元素是可交互的

+ +

Make sure visible interactive elements are always interactive and responsive. If input elements are visible, the user should be able to interact with them without a lag. Users feel that something is laggy when they take more than 50ms to react. They feel that a page is janky when content repaints slower than 16.67ms (or 60 frames per second) or repaints at uneven intervals.

+ +

Make things like type-ahead a progressive enhancement: use css to display input modal, JS to add typeahead/autocomplete as it is available

+ +

使任务启动器显得更具交互性

+ +

在按下按键而不是等待按键弹起时发出请求，可以使感知的内容加载减少200毫秒。在 KEYUP 后添加一个有趣但不显眼的200毫秒动画，甚至可以再降低200毫秒的加载感知。 您并没有节省400毫秒的时间，但是用户直到真正等待内容时，才感觉到他们在等待内容。

+ +

总结

+ +

By turning as much of the download, render and wait time into active phases and reducing any passive waiting, even if the objective measurements stay the same, the user will feel like the content downloaded, rendered, and responded more quickly. Now that we know what we should be speeding up, let's take a look at some metrics and learn how we can measure these events.

+ +

{{PreviousMenuNext("Learn/Performance/what_is_web_performance", "Learn/Performance/Measuring_performance", "Learn/Performance")}}

+ +

In this module

+ + diff --git "a/files/zh-cn/learn/performance/\346\204\237\347\237\245\346\200\247\350\203\275/index.html" "b/files/zh-cn/learn/performance/\346\204\237\347\237\245\346\200\247\350\203\275/index.html" deleted file mode 100644 index 3740a4c62c..0000000000 --- "a/files/zh-cn/learn/performance/\346\204\237\347\237\245\346\200\247\350\203\275/index.html" +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: 感知性能 -slug: learn/Performance/感知性能 -tags: - - Web 性能 - - 感知性能 -translation_of: Learn/Performance/perceived_performance ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Performance/what_is_web_performance", "Learn/Performance/Measuring_performance", "Learn/Performance")}}
- -

感知性能 是用户对网站速度的感受。 用户如何看待性能与任何客观统计数据一样重要，甚至更重要，但它是主观的，并且不易测量。感知性能是用户视角，而不是指标。

- -

本文简要介绍了感知性能，着眼于用户的感知，以及可以使用哪些客观工具来衡量这类主观因素。

- - - - - - - - - - - - -
预备知识：基础计算机知识，基本软件安装， 客户端 web 技术的基础知识
目标基本了解用户对Web性能的看法。
- -

性能是关于用户视角的。 How fast a website feels like it's loading and rendering has a greater impact on user experience than how fast the website actually loads and renders. Even if an operation is going to take a long time (because of latency or or inavailability of the main thread), it is possible to keep the user engaged while they wait by showing a loading spinner, or a series of useful hints and tips (or jokes, or whatever else you think might be appropriate). Such an approach is much better than just showing nothing, which will make it feel like it is taking a lot longer and possibly lead to your users thinking it is broken and giving up.

- -

感知性能

- -

The perception of how fast your site loads and how responsive feels to user interaction is vitally important; even more important that actual download time but difficult to quantify. There are areas of your site that you may not be able to make faster, but you can make it feel faster even if the metrics discussed in the othser sections can't be improved.

- -

There is no unicorn metric that can measure what the user feels, but metrics are useful in guaging improvements (and regressions). Relevant measurements include first meaningful paint (FMP), largest contentful paint (LCP), time to interactive (TTI), render start, DOM interactive, and speed index.

- -

First paint is reported by the browser and provides the time, in ms, of when the page starts changing; but this change can be a simple background color update or something even less noticable. It doesn’t indicate completeness and may report a time when nothing visible is painted. First Contentful Paint (FCP) reports the time when the browser first rendered anything of signifigance, be that text, foreground or background image, or a canvas or SVG; capturing the very beginning of the loading experience. But, just because there's content, doesn't mean it's useful content or that the user has content to consume. The First Meaningful Paint, or FMP, is the when content appears on the screen that is actually meaningful; which is a better metric for user-perceived loading experience, but still not ideal. Largest contentful paint (LCP) metric, definited in the Largest Contentful Paint API, reports the render time of the largest content element visible in the viewport.

- -

Speed index is also used to approximate perceived performance: it measures the average time for pixels on the visible screen to be painted. It doesn't account for jitter, nor does it weight which content important to a user more highly, so it's not a perfect metric.

- -

These metrics have to do with initial load and render. It is also important to ensure the site feels fast once the user begins interacting with it. For this, time to interactive, is a good metric; it is the moment when the last long task of the load process finishes and the UI is available for user interaction with delay.

- -

UI lack or responsiveness and jank both harm perceived performance. Even though a task may take a long time, though, there are ways to make it seem faster. There are several tips to improving perceived performance.

- -

提升感知性能

- -

Understanding networking, how the browser works, user perception of time, etc., can help you better understand how to improve the user interaction. However, you don't have to know the ins and outs of how everything, including how the human mind works, to improve the perception of speed.

- -

How fast or slow something feels like it's taking depends a lot on whether the user is actively or passively waiting for this thing to happen. Waits can have an active and passive phase. When the user is active - moving the mouse, thinking, being entertainted, they are in an active phase. The passive phase occurs when the user is passively waiting, like staring at a monochrome screen. If both the passive and active waits time were objectively equal, users would estimate that the passive waiting period was longer than the active. If a load, render, or response time can not be objectively minimized any further, turning the wait into an active wait instead of a passive wait can make it feel faster.

- -

There are tips and tricks to follow. Some of these quick tips have full articles if you want to dive deeper.

- -

Displaying content, or at least some part of the page with an indication that content is loading, as quickly as possible, is essential to improving perceived performance. For example, because page render is blocked by loading and parsing CSS and JavaScript, minimizing the amount of CSS and JS that needs to be loaded on initially will have a major impact on improving perceived performance. Even though the bytes might be the same, not blocking the page from rendering makes the load feel faster.

- -

这里有一些技巧有助于提升性能：

- -

最小化初始加载

- -

要提升可感知性能，请最小化页面初始加载。 换句话说，首先下载将实际显示的所有内容，但仅下载实际使用的内容，然后下载其余内容。 因为最终要下载所有资源，所以实际上资源总量并没有改善——实际上还需要增加一些代码。但因为暂不需要的资源被延后加载了，所以用户并不会感知资源量的增加，而会感受到页面加载更快了。 

- -

为了最大程度地减少初始加载资源，请从内容中分离交互式功能，以便优先加载初始化时所需的可见内容——文本、样式和图像。 延迟加载其余资源。

- -

不要加载初始页面未使用或看不到的图像或脚本，而在页面可用后延时加载，或在需要使用时按需加载。 在初始页面加载之后加载其他资源可提高感知性能。 在初始请求中加载基本数据，并仅根据需要逐步加载功能部件和数据，有助于改善低带宽和低规格硬件的体验。

- -

此外，您应该优化需加载的资源。 图片和视频应以最佳格式、压缩后的大小和正确尺寸进行投放。

- -

防止内容跳转和其他重排

- -

Images or other assets causing content to be pushed down or jump to a different location, like the loading of third party advertisements, can make the page feel like it is still loading and is bad for perceived performance. Content reflowing is especially bad for user experience when not initiated by user interaction. If some assets are going to be slower to load than others, with elements loading after other content has already been painted to the screen, plan ahead and leave space in the layout for them so that content doesn't jump or resize, especially after the site has become interactive.

- -

避免字体文件延迟

- -

Font use can both help and harm user experience. Selecting the right fonts is an art form, and can greatly improve the user experience. Fonts can also harm user experience, especially if the fonts used need to be imported, and if the importing is not optimal, or if Comic Sans is used (kidding).  Flicker of unstyled text and missing text both harm performance.

- -

Make fallback fonts the same size and weight so that when fonts load the page change is less noticeable.

- -

交互类元素是可交互的

- -

Make sure visible interactive elements are always interactive and responsive. If input elements are visible, the user should be able to interact with them without a lag. Users feel that something is laggy when they take more than 50ms to react. They feel that a page is janky when content repaints slower than 16.67ms (or 60 frames per second) or repaints at uneven intervals.

- -

Make things like type-ahead a progressive enhancement: use css to display input modal, JS to add typeahead/autocomplete as it is available

- -

使任务启动器显得更具交互性

- -

在按下按键而不是等待按键弹起时发出请求，可以使感知的内容加载减少200毫秒。在 KEYUP 后添加一个有趣但不显眼的200毫秒动画，甚至可以再降低200毫秒的加载感知。 您并没有节省400毫秒的时间，但是用户直到真正等待内容时，才感觉到他们在等待内容。

- -

总结

- -

By turning as much of the download, render and wait time into active phases and reducing any passive waiting, even if the objective measurements stay the same, the user will feel like the content downloaded, rendered, and responded more quickly. Now that we know what we should be speeding up, let's take a look at some metrics and learn how we can measure these events.

- -

{{PreviousMenuNext("Learn/Performance/what_is_web_performance", "Learn/Performance/Measuring_performance", "Learn/Performance")}}

- -

In this module

- - diff --git a/files/zh-cn/learn/server-side/configuring_server_mime_types/index.html b/files/zh-cn/learn/server-side/configuring_server_mime_types/index.html new file mode 100644 index 0000000000..577aacfb08 --- /dev/null +++ b/files/zh-cn/learn/server-side/configuring_server_mime_types/index.html @@ -0,0 +1,118 @@ +--- +title: Properly Configuring Server MIME Types +slug: Web/Security/Securing_your_site/Configuring_server_MIME_types +tags: + - HTTP +translation_of: Learn/Server-side/Configuring_server_MIME_types +--- +

Background

+ +

默认情况下，许多web服务器会为那些未知内容类型的文件配置一个默认MIME类型text/plain 或者application/octet-stream 。当一种新的内容类型被创造或者被添加到web服务器上，web管理者在添加它到web服务器配置中可能会失败。主要原因是用户使用Gecko-based 的浏览器，而这种浏览器只相信由web服务器和web应用所发布的MIME类型

+ +

What are MIME types?

+ +

MIME类型描述了邮件或者web服务器或者web应用中的媒体内容的类型，其目的是为了指导web浏览器对媒体内容的处理和表现。MIME类型的示例如下：

+ + + +

Technical Background

+ +

完整的MIME类型列表可在 IANA | MIME Media Types 查看.

+ +

在HTTP specification 中定义了能够描述在web中使用的媒体类型的MIME超集。

+ +

Why are correct MIME types important?

+ +

Example of an incorrect MIME type result 假如web服务器或者应用报告内容的MIME类型不正确，根据HTTP规范，或许发起人想要处理和显示内容通过他所规定的MIME类型，因此web浏览器无法采取任何措施。

+ +

对于某些浏览器，例如IE，它尝试允许web服务器对于错误配置通过其源码猜测它可能的正确MIME类型。

+ +

这种做法将会避免许多由web管理员他们的错误。因为当内容的MIME类型错误，IE将会用可能正确的MIME类型来继续处理内容。例如你设置一个img的类型为text/plain ,IE可能会设置它为正确的MIME类型images/*

+ +

出于安全原因，使用正确的MIME类型的服务内容也是重要的； 恶意内容可能会影响用户的计算机，假装它是一个安全类型文档，实际上不是。

+ +
+

注意: 从历史角度, 只要HTML文档请求处理CSS文件 ，Firefox 能够正常加载CSS即使它设置了错误的MIME类型。处于安全原因, {{ gecko("2.0") }} 对于从请求文档不同来源加载的样式表，将不再这样做。如果CSS来自于不同来源，你必须设置它的正确MIME类型 (text/css).

+ +

Gecko 1.9.1.11 (Firefox 3.5.11) 和 Gecko 1.9.2.5 (Firefox 3.6.5) 同样实施这种安全措施，但是提高它的实用性。如果样式表中的第一行看起来是一个很好的CSS构造，则存在允许加载的临时启发式算法。在Firefox 4中已经删除了启发式，您必须正确设置text/css 的MIME类型，才能够识别CSS。

+
+ +

为何浏览器不应该猜测 MIME 类型

+ +

除了违返了HTTP规范，让浏览器去猜测正确的MIME类型是一个差劲的策略。原因如下

+ +

失去控制

+ +

假如浏览器忽略报告的MIME类型，web管理员和用户不在对内容如何进行处理有发言权了。

+ +

例如，面对web开发员的网址可能希望发送某些实例HTML文档，同时通希望能够以 text/html或者 text/plain 的MIME类型进行数据的处理和显示 或者 作为一个源代码。如果浏览器猜测它的正确MIME类型为 text/html 那么开发员不在有权利进行选择了。

+ +

安全性

+ +

一些内容类型，例如可执行程序，本质上是不安全的。原因是经过规范化的MIME类型都有经过严格规定浏览器如何对这类类型的文件进行操作。一个可执行程序不能够在用户的电脑浏览器上执行，但可以通过弹出会话询问是否下载这个文件

+ +

MIME类型猜测导致IE浏览器的安全漏洞（通过利用IE能够将错误的MIME类型 修改为正确的类型）。这绕过了正常的下载对话框，导致InternetExplorer猜测内容是可执行程序，然后在用户的计算机上运行。

+ +

如何确定服务器发送内容的 MIME 类型

+ +

通过开发者工具的 ContentType 查看MIME类型。

+ +

根据标准，通过一个 meta 标签来设置MIME类型 例如 <meta http-equiv="Content-Type" content="text/html"> 当包含{{HTTPHeader("Content-Type")}} 时则忽略 meta 标签

+ + + +

如何为你的内容确定正确的 MIME 类型

+ +

这里有几种方法来确定文件的正确MIME类型

+ +
    +
  1. 如果你的内容是通过供应商软件应用创建的，那么你可以阅读供应商文档确认不同媒体文件的MIME值
    2. +
  2. 通过查看完整的MIME类型表 IANA | MIME Media Types registry 
    3. +
  3. 如果使用插件netscape gecko显示媒体类型，请安装插件，然后查看“帮助”>“关于插件”菜单，以查看哪些MIME类型与媒体类型相关联。
    4. +
  4. 搜索文件扩展名 FILExt 或者File extensions reference ，确认扩展名和哪种类型的MIME相关联
    5. +
+ +

如何设置服务器以发送正确的MIME类型

+ +

基本的方法是配置你的服务器发送正确的HTTP ContentType类型给每个文档

+ + + + + + + +
+

Original Document Information

+ + +
diff --git a/files/zh-cn/learn/server-side/django/admin_site/index.html b/files/zh-cn/learn/server-side/django/admin_site/index.html new file mode 100644 index 0000000000..d3252d84c5 --- /dev/null +++ b/files/zh-cn/learn/server-side/django/admin_site/index.html @@ -0,0 +1,339 @@ +--- +title: 'Django Tutorial Part 4: Django 管理员站点' +slug: learn/Server-side/Django/管理站点 +translation_of: Learn/Server-side/Django/Admin_site +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}
+ +

好了，我们已经为本地图书馆网站 LocalLibrary 创建了模型，我们接下来使用 Django 管理站点去添加 一些 “真“书数据。首先我们展示如何用管理站点注册模型，然后展示如何登录和创建一些数据。本文最后，我们介绍你可以进一步改进管理站点的建议。

+ + + + + + + + + + + + +
前提:完成: Django Tutorial Part 3: 使用模型。
目的: +

了解关于管理站点的优点与缺点，并且可以使用它为我们模型创建一些记录。

+
+ +

综述

+ +

Django管理应用程序可以使用您的模型自动构建可用于创建，查看，更新和删除记录的站点区域。这可以在开发过程中节省大量的时间，从而很容易测试您的模型，并了解您是否拥有正确的数据。根据网站的类型，管理应用程序也可用于管理生产中的数据。Django项目建议仅用于内部数据管理（即仅供管理员或组织内部人员使用），因为以模型为中心的方法不一定是所有用户最好的界面，并且暴露了大量不必要的细节关于模型。

+ +

创建基础项目时，自动完成所有将您的网站中的管理应用程序包含在内的配置文件 （有关所需实际依赖关系的信息  (如有需要请看 Django docs here). 其结果是，你必须做你的模型添加到管理应用程序是  注册  他们。在本文末尾，我们将简要介绍如何进一步配置管理区域以更好地显示我们的模型数据。

+ +

注册模型后，我们将展示如何创建一个新的“超级用户”，登录到该网站，并创建一些书籍，作者，书籍实例和流派。这些将有助于测试我们将在下一个教程中开始创建的视图和模板。

+ +

注册模型

+ +

首先，在目录应用程序(/locallibrary/catalog/admin.py)中打开 admin.py 。此时此刻它看起来像这样—注意它已经导入了django.contrib.admin：

+ +
from django.contrib import admin
+
+# Register your models here.
+
+ +

通过将以下文本复制到文件的底部来注册模型。该代码简单地导入模型，调用 admin.site.register 来注册它们。

+ +
from .models import Author, Genre, Book, BookInstance
+
+admin.site.register(Book)
+admin.site.register(Author)
+admin.site.register(Genre)
+admin.site.register(BookInstance)
+
+ +
注意: 如果你接受创建模型以表示书籍的自然语言的挑战(see the models tutorial article), 导入并注册。
+ +

这是在网站上注册模型或多模型的简单方法，管理站点是高度可定制的，我们将进一步讨论注册模型的其他方式。

+ +

创建一个超级用户

+ +

为了登录管理员站点，我们需要启动工作人员状态的用户账户。为了查看和创建记录，我们还需要该用户具有所有对象的记录。你可以创建一个“超级用户”账号，该账号具有完全访问该站点和所有必需的权限可以使用manage.py

+ +

调用接下来的命令，在同样的目录下，manage.py 创建超级用户。你将被提示输入用户名，电子邮件地址，和强密码。

+ +
python3 manage.py createsuperuser
+
+ +

一旦命令完成，一个新超级用户将被添加到数据库。现在重新启动开发服务器，以便我们可以测试登录名：

+ +
python3 manage.py runserver
+
+ +

登入并使用该网站

+ +

登录网站，打开 /admin (e.g. http://127.0.0.1:8000/admin)
+ 和进入你的新超级用户名和密码凭据（你将被重定向到 登录页面，然后在你进入你的详细信息后回到 /admin URL

+ +

这部分网站展示我们所有的模型，按安装的应用程序分组。你可以点击模型名称来进入到 它所有相关详细记录的页面，你可以进一步点击这些记录进行编辑。你也可以直接点击每个模型旁边的添加链接，开始创建该类型的记录。

+ +

Admin Site - Home page

+ +

点击图书右侧的添加链接来新建一本书（这将显示一个类似下面的对话框）。注意每个字段标题，使用的小部件的类型以及help_text（如果有的话）你要在模型中匹配指定的值。

+ +

输入字段的值，你可以创建一个新的作者或类型通过 按 + 按钮（或者如果你已经创建选项，选择已有的值）。完成后，你可以按 保存，保存并添加另一个，或保存并继续编辑来保存记录。

+ +

Admin Site - Book Add

+ +
+

注意: 在这里，我们希望你花费一点时间添加一些书，作者，类型（如: 幻想）到你的应用。确保每个作者和类型都包含几本不同的书籍（这会是你的列表和详细视图在文章系列中后期使用时更有趣）。

+
+ +

我们完成添加书籍，在顶部标签中，点击 Home 链接将回到主管理页面。然后点击 Books 链接显示当前书籍的列表（或其他链接之一，以查看其他型号列表）。现在你已经添加了几本书，列表可能与下面的截图类似。显示每本书的标题；这是书模型 __str__() 方法返回的值，在上一文章中提到。

+ +

Admin Site - List of book objects

+ +

从该列表中，您可以通过选中不需要的图书旁边的复选框来删除图书，从“ 操作”下拉列表中选择“ 删除”操作  ，然后按Go按钮。您也可以通过按下ADD BOOK按钮添加新书。

+ +

您可以通过在链接中选择其名称来编辑书籍。一本书的编辑页面如下所示，与“添加”页面几乎相同。主要的区别是页面标题（更改书）和添加  删除，历史和VIEW ON SITE按钮（最后一个按钮出现，因为我们定义了get_absolute_url()我们的模型中的  方法）。

+ +

Admin Site - Book Edit

+ +

现在回到主页（使用主页链接的导航痕迹），然后查看作者  和类型  列表 - 您应该已经有很多创建从添加新书，但可以自由添加一些更多。

+ +

你不会有任何书籍实例，因为这些不是从图书创建的（虽然你可以从 BookInstance - 创建一个书  - 这是ForeignKey字段的性质）。返回主页，然后按关联的添加按钮显示下面的添加书实例屏幕。请注意，全球唯一的ID，可用于单独标识库中单书的副本。

+ +

Admin Site - BookInstance Add

+ +

为你的书创建一些记录。将状态设置为可用于至少一些记录，并为其他记录贷款。如果状态 不可 用，则还设置未来到期日期。

+ +

而已！您现在已经学会了如何 设置和使用管理站点。您还创建书的记录，BookInstance，Genre，和Author 我们就可以一次我们创造我们自己的观点和模板使用。

+ +

高级配置

+ +

Django 使用注册模型的信息为创建基本管理站点做了非常好的工作：

+ + + +

你可以进一步自定义界面，使它更容易使用，你可以改进的一些想法：

+ + + +

在本节中，我们将看一些改进本地图书馆界面的更改，其中包括添加更多信息Book和Author 模型列表，以及改进编辑视图的布局。我们不会改变 Language 和 Genre 模拟演示，因为它们只有一个字段，所以这样没有真正的好处。

+ +

你可以 在The Django Admin site 中找到所以管理员网站自定义选项的完整参考。

+ +

注册 一个 ModelAdmin 类

+ +

在管理界面去改变一个模型的展示方式，当你定义了 ModelAdmin 类（描述布局）和将其注册到模型中。

+ +

让我们开始作者模型。打开 admin.py 在目录应用程序(/locallibrary/catalog/admin.py)。注释你的原始注册（前缀为#）在 Author 模型

+ +
# admin.site.register(Author)
+ +

现在添加一个 AuthorAdmin 和注册，如下

+ +
# Define the admin class
+class AuthorAdmin(admin.ModelAdmin):
+    pass
+
+# Register the admin class with the associated model
+admin.site.register(Author, AuthorAdmin)
+
+ +

我们再为Book 添加 ModelAdmin 类 和 BookInstance 类。我们需要注释我们原始注册：

+ +
#admin.site.register(Book)
+#admin.site.register(BookInstance)
+ +

现在创建和注册新的模型；为了演示的目的，我们将使用@register 装饰器来注册模型（这和 admin.site.register() 语法作用一样）。

+ +
# Register the Admin classes for Book using the decorator
+
+@admin.register(Book)
+class BookAdmin(admin.ModelAdmin):
+    pass
+
+# Register the Admin classes for BookInstance using the decorator
+
+@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    pass
+
+ +

可以看到我们现在 的 类都是空的 （“pass”），所以管理操作并不会改变，我们现在对这些类进行扩展，以定义我们针对模型的管理行为。

+ +

配置列表视图

+ +

该 本地图书馆 目前列出的所以作者都使用从模型生成的对象名称的__str__() 方法。如果只是几个作者，这无关紧要。但一旦你有许多作者，这可能会重复。要区分它们，或仅仅因为你想要显示有关每个作者的更多有趣的信息，你可以使用list_display 向视图添加其他字段。

+ +

用下面的代码替代 你 AuthorAdmin 的类。在元组中声明要显示列表中的字段名称以所需的顺序排列，如图（这些和原始模型中指定的名称相同）。

+ +
class AuthorAdmin(admin.ModelAdmin):
+    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
+
+ +

重新启动站点并导航到作者列表。现在应该显示上述字段，如下所示：

+ +

Admin Site - Improved Author List

+ +

对于我们的Book模型，我们将另外显示author和genre。这author是一个ForeignKey字段（一对多）的关系，所以将由__str()__相关记录的值表示。用BookAdmin下面的版本替换课程。

+ +
class BookAdmin(admin.ModelAdmin):
+    list_display = ('title', 'author', 'display_genre')
+
+ +

不幸的是，我们不能直接指定 list_display 中的 genre 字段， 因为它是一个ManyToManyField （Django可以防止这种情况，因为在这样做时会有大量的数据库访问“成本”）。相反，我们将定义一个 display_genre 函数来获取信息作为一个字符串（这是我们上面调用的函数;下面我们将定义它）。

+ +
+

注意：在genre这里获取可能不是一个好主意，因为数据库操作的“成本”。我们向您展示了如何在模型中调用函数的其他原因非常有用 - 例如在列表中的每个项目旁边添加一个“ 删除”链接。

+
+ +

将以下代码添加到Book模型（models.py）中。这将从 genre字段的前三个值（如果存在）创建一个字符串，并创建一个short_description可以在此方法的管理站点中使用的字符串。

+ +
    def display_genre(self):
+        """
+        Creates a string for the Genre. This is required to display genre in Admin.
+        """
+        return ', '.join([ genre.name for genre in self.genre.all()[:3] ])
+    display_genre.short_description = 'Genre'
+
+ +

保存模型并更新管理员后，重新启动站点并转到图书列表页面; 你应该看到像下面这样的书籍清单：

+ +

Admin Site - Improved Book List

+ +

该Genre模型（和Language模式，如果你定义一个）都有一个单一的领域，所以没有一点为他们创造更多的显示领域的附加模型。

+ +
+

注意：值得更新BookInstance模型列表，至少显示状态和预期的返回日期。我们已经补充说，作为本文末尾的挑战！

+
+ +

添加列表过滤器

+ +

一旦列表中有很多项目，就可以过滤哪些项目被显示出来。这是通过在list_filter属性中列出字段来完成的。用BookInstanceAdmin下面的代码片段替换你当前的  类。

+ +
class BookInstanceAdmin(admin.ModelAdmin):
+    list_filter = ('status', 'due_back')
+
+ +

列表视图现在将在右侧包含一个过滤器框。请注意如何选择日期和状态来过滤值：

+ +

Admin Site - BookInstance List Filters

+ +

整理细节视图布局

+ +

默认情况下，详细视图按照其在模型中声明的顺序垂直排列所有字段。您可以更改声明的顺序，哪些字段显示（或排除），区段是否用于组织信息，字段是水平还是垂直显示，甚至是管理窗体中使用的编辑窗口小部件。

+ +
+

注意：LocalLibrary模型比较简单，因此我们不需要更改布局; 不管怎样，我们会做一些改变，只是为了向你展示如何。

+
+ +

控制哪些字段被显示和布局

+ +

更新您的  AuthorAdmin 类以添加fields行，如下所示（粗体）：

+ +
class AuthorAdmin(admin.ModelAdmin):
+    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
+    fields = ['first_name', 'last_name', ('date_of_birth', 'date_of_death')]
+
+ +

在fields 属性列表只是要显示在表格上那些领域，如此才能。字段默认情况下垂直显示，但如果您进一步将它们分组在元组中（如上述“日期”字段中所示），则会水平显示。

+ +

重新启动您的应用程序并转到作者详细信息视图 - 现在应该如下所示：

+ +

Admin Site - Improved Author Detail

+ +
+

注意：您还可以使用exclude属性来声明要从表单中排除的属性列表（将显示模型中的所有其他属性）。

+
+ +

剖切细节视图

+ +

你可以使用 fieldsets 属性添加“部分”以在详细信息表单中对相关的模型信息进行分组。

+ +

在  BookInstance模型中，我们有相关的书是什么（即信息  name，imprint和id），并且当将可用（status，due_back）。我们可以通过将粗体文本添加到我们的BookInstanceAdmin类中来将其添加到不同的部分  。

+ +
@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    list_filter = ('status', 'due_back')
+
+    fieldsets = (
+        (None, {
+            'fields': ('book','imprint', 'id')
+        }),
+        ('Availability', {
+            'fields': ('status', 'due_back')
+        }),
+    )
+ +

每个部分都有自己的标题（或者None如果你不想要一个标题）和字典中的一个相关的元组 - 描述的格式很复杂，但是如果你看上面的代码片段，那么它们很容易理解。

+ +

重新启动并导航到书籍实例视图; 表格应如下所示：

+ +

Admin Site - Improved BookInstance Detail with sections

+ +

关联记录的内联编辑

+ +

有时，可以同时添加关联记录是有意义的。例如，将书籍信息和有关您在同一详细信息页面上的特定副本的信息同时显示可能是有意义的。

+ +

你可以通过声明 inlines, 类型 TabularInline (水平布局 ) or StackedInline (垂直布局 ，就像默认布局)这样做. 您可以通过在您的以下的粗体中添加以下行，将内容中的BookInstance信息添加到我们的Book详细信息中BookAdmin：

+ +
class BooksInstanceInline(admin.TabularInline):
+    model = BookInstance
+
+@admin.register(Book)
+class BookAdmin(admin.ModelAdmin):
+    list_display = ('title', 'author', 'display_genre')
+    inlines = [BooksInstanceInline]
+
+ +

尝试重新启动您的应用程序，然后查看图书的视图 - 在底部您应该看到与本书相关的图书实例：

+ +

Admin Site - Book with Inlines

+ +

在这种情况下，我们所做的就是声明我们的tablular内联类，它只是从内联模型添加所有字段。您可以为布局指定各种附加信息，包括要显示的字段，其顺序，是否只读等。（有关详细信息，请参阅  TabularInline ). 

+ +
+

注意：这个功能有一些痛苦的限制！在上面的屏幕截图中，我们有三个现有的书籍实例，其次是新的书籍实例的三个占位符（看起来非常相似！）。默认情况下没有备用书实例会更好，只需使用“ 添加另一个书”实例链接添加它们，或者可以BookInstance从这里列出作为不可读的链接。第一个选项可以通过extra在BookInstanceInline模型中将属性设置为0 来完成，自己尝试一下。

+
+ +

挑战自己

+ +

我们在本节学到了很多东西，所以现在是时候尝试一些事情了。

+ +

1. 对于  BookInstance列表视图，添加代码以显示书籍，状态，到期日期和ID（而不是默认__str__()文本）。
+ 2. 添加的在线上市Book项目的Author使用，因为我们做了同样的做法详细视图Book/ BookInstance。

+ +

概要

+ +

而已！您现在已经了解了如何以最简单和改进的形式设置管理站点，如何创建超级用户以及如何导航管理站点以及查看，删除和更新记录。一路上，您创建了一堆书籍，BookInstances，流派和作者，一旦我们创建了自己的视图和模板，我们就可以列出和展示。

+ + + +

进阶阅读

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}

diff --git a/files/zh-cn/learn/server-side/django/development_environment/index.html b/files/zh-cn/learn/server-side/django/development_environment/index.html new file mode 100644 index 0000000000..fb6041621f --- /dev/null +++ b/files/zh-cn/learn/server-side/django/development_environment/index.html @@ -0,0 +1,406 @@ +--- +title: 设置Django开发环境 +slug: learn/Server-side/Django/开发环境 +tags: + - Python + - django +translation_of: Learn/Server-side/Django/development_environment +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}
+ +

现在，你知道什么是Django。
+ 那么我们将向你展示如何在Windows，Linux（Ubuntu）和 Mac OSX上设置和测试Django开发环境—无论你常用哪种操作系统，本文能给你开发Django应用所需的一切。

+ + + + + + + + + + + + +
先决条件:知道如何在你开发所用的计算机操作系统中，打开终端/命令行和安装软件包。
目的:在你的计算机中运行Django（1.10）开发环境。
+ +

Django 开发环境概述

+ +

Django 使你可以轻松配置自己的电脑，以便开始开发网络应用。本节解释您可以从开发环境中获得什么，并提供一些设置和配置选项的概述。本文的其余部分介绍了在Ubuntu，Mac OSX和Windows上安装Django开发环境的 推荐方法，以及如何测试。

+ +

什么是Django开发环境?

+ +

开发环境是本地计算机上的Django安装，在将Django应用程序部署到生产环境之前，您可以使用它来开发和测试Django应用程序。

+ +

Django 本身提供的主要工具是一组用于创建和使用Django项目的Python脚本，以及可在你电脑的web 浏览器中测试本地Django web应用（在你的计算机，而不是在外部的web 服务器）。

+ +

还有其他外部工具, 它们构成了开发环境的一部分, 我们将不再赘述。这些包括 文本编辑器 或编辑代码的IDE，以及像 Git 这样的源代码控制管理工具，用于安全地管理不同版本的代码。我们假设你已经安装了一个文本编辑器。

+ +

什么是Django设置选项?

+ +

Django 在安装和配置方面非常灵活。Django可以：

+ + + +

每个选项都需要略微不同的配置和设置。以下小节解释了你的一些选择。在本文的其余部分中，我们将介绍Django在几个操作系统上的设置，并且在本教程的剩余模块中将假设你已进行该设置。

+ +
+

注意: 其他可能的安装选项在官方Django文档中介绍。相应文件 点击这里.

+
+ +

支持哪些操作系统?

+ +

Django web应用程序能运行在几乎任何可以运行Python3的计算机上：Windows，Mac OSX，Linux/Unix，Solaris，仅举几例。几乎任何计算机都具备在开发期间运行Django所需的性能。

+ +

在本文中。我们将提供Windows，macOS 和Linux/Unix的说明。

+ +

你应该使用什么版本的Python?

+ +

我们建议你使用最近发行的版本，在本文档写作的时候是Python 3.8.2。

+ +

事实上，Python 3.5 以及更新的版本都可以用来开发，不过对Python 3.5的支持可能会在未来的版本更新中被移除。

+ +

我们建议你使用最新版本的Python 3，除非该站点依赖于仅适用于Python 2 的第三方库。本文将介绍如何为Python 3安装环境（Python 2 的等效设置将非常相似）。

+ + + +
+

注意: Python 2.7 无法用于当前的 Django 发行版本（Django 1.11.x 系列是最后支持 Python 2.7 的版本）。

+
+ +

我们在哪里下载Django?

+ +

有三个地方可以下载Django:

+ + + +

本文介绍如何从PyPi安装Django的最新稳定版本。

+ +

哪个数据库?

+ +

Django支持四个主要数据库（PostgreSQL，MySQL，Oracle和SQLite），还有一些社区库可以为其他流行的SQL和NOSQL数据库提供不同级别的支持。我们建议你为生产和开发选择相同的数据库（尽管Django使用其对象关系映射器（ORM）抽象了许多数据库之间的差异，但是仍然存在本可以避免的潜在问题 ).

+ +

对于本文（和本模块的大部分），我们将使用将数据存储在文件中的SQLite数据库。SQLite旨在用作轻量级数据库，不能支持高并发。然而，这确实是只读的应用程序的绝佳选择。

+ +
+

注意：当你使用标准工具（django-admin）启动你的网站项目时，Django将默认使用SQLite。用来入门时，这是一个很好的选择，因为它不需要额外的配置和设置。

+
+ +

安装本机系统还是Python虚拟环境中?

+ +

当你安装Python3时，将获得一个由所有Python3代码共享的全局环境。虽然你可以在该环境中安装任何你喜欢的Python包，但是每次只能安装每个包的一个特定版本。

+ +
+

注意：安装到全局环境的Python应用程序可能会相互冲突（例如如果它们依赖于同一包的不同版本）。

+
+ +

如果你把Django安装到默认/全局环境中，那么在该计算机上将只能定位到Django的一个版本。如果你想创建新的网站(使用最新版本的Django)，同时仍然维护依赖旧版本的网站，这可能是个问题。

+ +

因此，经验丰富的Python/Django开发人员通常在独立Python虚拟环境中运行Python应用程序。这样就可以在一台计算机上实现多个不同的Django环境。Django开发团队同样建议你使用Python虚拟环境。

+ +

本模块假设已经将Django安装到虚拟环境中，下面我们会演示如何进行。

+ +

安装 Python 3

+ +

为了使用Django，你需要在你的操作系统中安装Python。如果你使用Python3，那么你同样需要Python 包管理工具  — pip3 — 用来管理 (安装，更新和删除)被Django和其他Python应用程序使用的Python软件包／库。

+ +

本节简要介绍了如何检查有哪些版本的Python，并根据需要安装适用于 Ubuntu Linux 16.04,macOS, and Windows 10的新版本。

+ +
+

注意: 根据你的平台, 您还可以从操作系统自己的软件包管理器或其他机制安装Python / pip。对于大多数平台，您可以从https://www.python.org/downloads/下载所需的安装文件，并使用该平台特定的方法进行安装。

+
+ +

Ubuntu 18.04

+ +

Ubuntu Linux 18.04 LTS默认包含Python 3.6.6。你可以通过在Bash终端中运行以下命令来确认这一点：

+ +
python3 -V
+ Python 3.6.6
+ +

然而，在默认情况下，为Python 3（包括Django）安装软件包的Python包管理工具不可用。你可以在bash终端中使用以下命令安装pip3：

+ +
sudo apt-get install python3-pip
+
+ +

macOS

+ +

macOS 的"El Capitan" 及其他最新版本不包含Python 3。你可以通过在bash终端中运行一下命令来确认：

+ +
python3 -V
+ -bash: python3: command not found
+ +

你可以轻松地从 python.org安装Python 3（以及pip3工具）:

+ +
    +
  1. 下载所需的安装程序: +
      +
    1. 点击 https://www.python.org/downloads/
      2. +
    2. 选择 Download Python 3.8.2  (具体的版本号可能不同)。
      3. +
    +
    2. +
  2. 使用Finder找到安装包，然后双击运行，并按照提示进行安装。
    3. +
+ +

之后可以通过检查Python3版本确认是否安装成功，如下所示:

+ +
python3 -V
+Python 3.8.2
+ +

你也可以通过列出可用的包来检查pip3是否安装了：

+ +
pip3 list
+ +

Windows 10

+ +

windows默认不包含Python, 但你可以从 python.org轻松地安装它（以及pip3工具）：

+ +
    +
  1. 下载所需版本: +
      +
    1. 点击 https://www.python.org/downloads/
      2. +
    2. 选择 Download Python 3.8.2  (具体的版本号可能不同)。
      3. +
    +
    2. +
  2. 双击现在的文件并按照提示安装Python。
    3. +
  3. 确保勾选了"Add Python to PATH"选项。
    4. +
+ +

你可以在命令提示符中输入以下内容来验证是否安装了Python:

+ +
python -V
+ Python 3.8.2
+
+ +

Windows安装程序默认包含pip3 (Python包管理器)。同样在命令提示符中输入以下内容来列出已安装的包:

+ +
pip3 list
+
+ +
+

注意：安装包应该已把运行上述命令所需的一切设置完成。但如果你得到的消息是找不到Python，那么你可能忘记将Python添加到系统路径中了。你可以通过再次运行安装包，选择"Modify"，并在下一页面中勾选 "Add Python to environment variables"来修复这个问题。

+
+ +

在Python虚拟环境中使用Django

+ +

我们使用virtualenvwrapper（Linux及macOS）和 virtualenvwrapper-win（WIndows）来创建Python虚拟环境，而它们又使用了virtualenv。封装工具创建了一个一致的接口来管理各个平台上的接口。

+ +

安装虚拟环境软件

+ +

Ubuntu虚拟环境设置

+ +

安装了Python和pip之后，你就可以安装virtualenvwrapper（包括了virtualenv）。可以在这里找到正式的安装指南，或按照以下指导操作。

+ +

使用pip3安装该工具：​​​​​​

+ +
sudo pip3 install virtualenvwrapper
+ +

然后将以下代码行添加到shell启动文件的末尾(这是主目录中的一个隐藏文件，名字是.bashrc)。这些文件设置了虚拟环境应该存在的位置、开发项目目录的位置以及与这个包一起安装的脚本的位置。

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 '
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh
+ +
+

注意：VIRTUALENVWRAPPER_PYTHON 和 VIRTUALENVWRAPPER_VIRTUALENV_ARGS变量指向Python3的常规安装位置，source /usr/local/bin/virtualenvwrapper.sh指向virtualenvwrapper.sh脚本的一般安装位置。 如果您在测试时发现virtualenv无法正常工作，则要检查的一件事是Python和该脚本是否在预期的位置（然后适当更改启动文件）。

+ +

你可以使用which virtualenvwrapper.sh 和 which python3命令为你的系统找到正确的安装位置。

+
+ +

然后通过在终端中运行以下命令重载启动文件：

+ +
source ~/.bashrc
+ +

此时，你应该能看到一些脚本正在运行，如下所示：

+ +
virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details
+ +

然后你就可以使用 mkvirtualenv命令创建一个新的虚拟环境。

+ +

macOS 虚拟环境设置

+ +

在macOS上设置virtualenvwrapper 几乎和在Ubuntu上是一样的（你同样可以按照以下指导操作，或在这里找到正式的安装指南）。

+ +

使用pip安装virtualenvwrapper(并绑定virtualenv)，如下所示。

+ +
sudo pip3 install virtualenvwrapper
+ +

然后将以下代码行添加到shell启动文件的末尾：

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh
+ +
+

注意：VIRTUALENVWRAPPER_PYTHON 和 VIRTUALENVWRAPPER_VIRTUALENV_ARGS变量指向Python3的常规安装位置，source /usr/local/bin/virtualenvwrapper.sh指向virtualenvwrapper.sh脚本的一般安装位置。 如果您在测试时发现virtualenv无法正常工作，则要检查的一件事是Python和该脚本是否在预期的位置（然后适当更改启动文件）。

+ +

例如，在macOS上的一个安装测试中，启动文件中必须有以下几行代码：

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.7/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh
+ +

你可以使用which virtualenvwrapper.sh 和 which python3命令为你的系统找到正确的安装位置。

+
+ +

此处使用和Ubuntu相同的代码行，但是启动文件是主目录中叫做.bash_profile的隐藏文件。

+ +
+

注意：如果找不到.bash_profile进行编辑，也可以使用nano在终端中打开它，命令看起来类似于：

+ +
cd ~  # Navigate to my home directory
+ls -la #List the content of the directory. YOu should see .bash_profile
+nano .bash_profile # Open the file in the nano text editor, within the terminal
+# Scroll to the end of the file, and copy in the lines above
+# Use Ctrl+X to exit nano, Choose Y to save the file.
+
+ +

然后通过在终端中运行以下命令重载启动文件：

+ +
source ~/.bashrc
+ +

此时，你应该能看到一些脚本正在运行（和Ubuntu中同样的脚本）。然后你就可以使用 mkvirtualenv命令创建一个新的虚拟环境。

+ +

Windows 10 虚拟环境设置

+ +

安装 virtualenvwrapper-win 甚至比设置virtualenvwrapper 更简单，因为你无需配置工具用来存储虚拟环境信息的位置（有一个默认值）。你需要做的只是在命令提示符中运行以下命令:

+ +
pip3 install virtualenvwrapper-win
+ +

然后你就可以使用 mkvirtualenv命令创建一个新的虚拟环境。

+ +

创建虚拟环境

+ +

一旦你成功安装了virtualenvwrapper 或 virtualenvwrapper-win，那么在所有平台中使用虚拟环境的方法是非常相似的。

+ +

现在你可以使用 mkvirtualenv命令创建一个新的虚拟环境。在运行此命令时，你将看到正在设置的环境（你所看到的只略微与平台相关）。命令完成后，新的虚拟环境将被激活——你能看到提示符的开头就是括号中的环境名称（以下我们展示的是Ubuntu的，但是在Windows/macOS上，末行时相似的|）

+ +
$ mkvirtualenv my_django_environment
+
+Running virtualenv with interpreter /usr/bin/python3
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details
+(my_django_environment) ubuntu@ubuntu:~$
+ +

现在你已进入虚拟环境，可以进行Django安装并开始开发。

+ +
+

注意：从现在开始，在本文(实际上是该模块)中，请假定所有命令都在类似于我们上面设置的Python虚拟环境中运行。

+
+ +

使用一个虚拟环境

+ +

您应该知道一些其他有用的命令(在工具的文档中还有更多，但这些是您将经常使用的命令)：

+ + + +
+ +

安装Django

+ +

一旦你创建了一个虚拟环境，并且使用workon 进入了它，就可以使用pip3来安装Django。

+ +
pip3 install django
+ +

您可以通过运行以下命令来测试Django是否安装（这只是用来测试Python是否可以找到Django模块）：

+ +
# Linux/macOS
+python3 -m django --version
+ 1.10.10
+
+# Windows
+py -3 -m django --version
+ 1.10.10
+
+ +
+

注意：如果上面的Windows命令没有显示django模块，请尝试：

+ +
py -m django --version
+ +

在Windows中，Python 3脚本是通过在命令前面加上py -3来启动的，尽管该脚本可能会因您的特定安装而有所不同。 如果遇到命令问题，请尝试省略-3修饰符。 在Linux /macOS中，命令是python3。

+
+ +
+

重要提示：本模块的其余部分使用Linux命令来调用Python 3（python3）。如果您在Windows上工作，只需将此前缀替换为： py -3

+
+ +

测试你的安装

+ +

上面的测试工作并不是很有趣。一个更有趣的测试是创建一个框架项目并查看它的工作情况。要做到这一点，先在你的命令提示符/终端导航到你想存储你Django应用程序的位置。为您的测试站点创建一个文件夹并进入其中。

+ +
mkdir django_test
+cd django_test
+
+ +

然后，您可以像所展示的一样使用django-admin工具创建一个名为“ mytestsite ” 的新框架站点。创建网站后，您可以CD到此文件夹，并将在其中找到管理项目的主要脚本，名为manage.py。

+ +
django-admin startproject mytestsite
+cd mytestsite
+ +

我们可以在这个文件夹中使用manager.py和runserver命令运行开发web服务器，如下所示。

+ +
$ python3 manage.py runserver
+Performing system checks...
+
+System check identified no issues (0 silenced).
+
+You have 15 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
+Run 'python manage.py migrate' to apply them.
+
+December 16, 2018 - 07:06:30
+Django version 2.2.12, using settings 'mytestsite.settings'
+Starting development server at http://127.0.0.1:8000/
+Quit the server with CONTROL-C.
+ +
+

注意：上面的命令显示了Linux /macOS命令。您可以忽略关于“15 unapplied migration(s)”的警告！

+
+ +

一旦服务器运行，您可以通过本地Web浏览器打开http://127.0.0.1:8000/来查看该站点。你应该看到一个如下所示的网站：

+ +

The home page of the skeleton Django app.

+ + + +

概要

+ +

现在，你的计算机中已经启动并运行了一个Django开发环境。

+ +

在测试部分，您还简要地了解了如何使用django -admin startproject创建一个新的Django网站，并使用开发web服务器(python3 manager .py runserver)在浏览器中运行它。在下一篇文章中，我们将对此过程进行扩展，构建一个简单但完整的web应用程序。

+ +

看看瞧瞧

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}

diff --git a/files/zh-cn/learn/server-side/django/home_page/index.html b/files/zh-cn/learn/server-side/django/home_page/index.html new file mode 100644 index 0000000000..0527ba8731 --- /dev/null +++ b/files/zh-cn/learn/server-side/django/home_page/index.html @@ -0,0 +1,358 @@ +--- +title: 'Django Tutorial Part 5: 主页构建' +slug: learn/Server-side/Django/主页构建 +translation_of: Learn/Server-side/Django/Home_page +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}
+ +

  我们现在可以添加代码来显示我们的第一个完整页面 -  LocalLibrary 网站的主页，显示每个模型类型有多少条记录，并提供我们其他页面的侧边栏导航链接。一路上，我们将获得编写基本URL地图和视图，从数据库获取记录以及使用模板的实践经验。

+ + + + + + + + + + + + +
前提:读 the Django Introduction. 完成上章节 (including Django Tutorial Part 4: Django admin site).
目的:了解如何创建简单的URL映射和视图（没有数据编码在URL中）以及如何从模型中获取数据并创建模版。
+ +

概要

+ +

现在我们已经定义了我们的模型，并创建了一些初始库记录来处理，现在是编写代码以向用户呈现该信息的时候了。我们需要做的第一件事是确定我们希望能够在我们的页面中显示哪些信息，然后为返回这些资源定义适当的URL。那么我们将需要创建一个url映射器，视图和模板来显示这些页面。

+ +

以下图表提供了处理HTTP请求/响应时需要实现的数据和事情的主要流程。我们已经创建了这个模型，我们需要创建的主要内容是：

+ + + +

+ +

正如你将在下一节中看到的，我们将要显示5个页面，这在一篇文章中是很重要的。因此，本文的大部分内容将重点介绍如何实现主页（我们将在随后的文章中介绍其他页面）。这应该让您对URL映射器，视图和模型在实践中如何工作有一个很好的端到端的了解。

+ +

定义资源URL

+ +

由于本版本的LocalLibrary对于最终用户本质上是只读的，所以我们只需要为该网站（主页）提供一个着陆页，以及显示书籍和作者的列表和详细视图的页面。

+ +

下面这些URL 是我们页面需要的：

+ + + +

前三个URL用于列出索引，书籍和作者。这些不会对任何附加信息进行编码，而返回的结果将取决于数据库中的内容，运行获取信息的查询将始终保持一致。

+ +

相比之下，最后两个URL用于显示有关特定书籍或作者的详细信息 - 这些URL将编码要显示在URL中的项目的标识（如上所示<id>）。URL映射器可以提取编码信息并将其传递给视图，然后将动态地确定从数据库获取哪些信息。通过对我们的URL中的信息进行编码，我们只需要一个URL映射，视图和模板来处理每本书（或作者）。

+ +
+

注意：Django允许您以任何您喜欢的方式构建您的URL - 您可以如上所示编码URL正文中的信息，或使用URL GET参数（例如  /book/?id=6）。无论您使用哪种方法，URL都应保持清洁，逻辑和可读性 (check out the W3C advice here).
+
+ Django文档倾向于在URL的主体中推荐编码信息，这是他们觉得鼓励更好的URL设计的实践。

+
+ +

如概述，本文其余部分介绍如何构建索引页

+ +

创建索引页

+ +

我们创建的第一个页面将会是索引页（catalog/)。这会显示一些静态HTML，以及数据库中不同记录的一些计算的“计数“。为了使其工作，我们必须创建一个URL映射，视图和模版。

+ +
+

注意: 本节应该特别注意。一些”材料“在所有页面都通用。

+
+ +

URL 映射

+ +

在我们创建的基础网站上，更新 /locallibrary/urls.py 文件。以确保每当收到以catalog/开头的URL时，URLConf模块中的catalog.urls 会处理剩余的字符串。

+ +

打开 catalog/urls.py ，复制下面代码

+ +
urlpatterns = [
+    path('', views.index, name='index'),
+]
+ +

如果检测到URL模式''，(views.index——在view.py中函数命名index() ）将被调用。URL模式是Python 正则表达式 (RE)。我们将在本教程中进一步介绍RE。

+ +
+

注意: 在  /locallibrary/locallibrary/urls.py 

+ +
urlpatterns += [
+    path('catalog/', include('catalog.urls')),
+]
+ +

每当Django 使用 include() （django.conf.urls.include()），它排除与该点 匹配URL的任何部分，并将剩余的字符串发送到随附的 URLconf 进行一步处理。

+ +

匹配的URL 实际上是 catalog/+<空字符串> （/catalog/ 假定是因为 include()是使用的方法）。如果我们收到一个URL的HTTP请求，我们的第一个视图函数将被调用/catalog/。

+
+ +

此函数还说明了一个name参数，此唯一标识指定 URL 映射。你可以使用 "reverse" 映射—去动态创建指定映射设计处理的资源的一个URL。例如，我们现在可以通过在我们的模版中创建以下链接到我们的主页：

+ +
<a href="{% url 'index' %}">Home</a>.
+ +
+

注意: 我们当然可以硬编码上面的链接（如：<a href="/catalog/">Home</a>），但是如果我们改变了主页的模式，模版将不再正确链接，使用反向网址映射会更灵活和强大。

+
+ +

View (基于功能)

+ +

视图是处理HTTP请求的功能，根据需要从数据库获取数据，通过使用HTML模板呈现此数据生成HTML页面，然后以HTTP响应返回HTML以显示给用户。索引视图遵循此模型 - 它提取有关数据库中有多少Book，BookInstance 可用 BookInstance 和 Author 记录的信息，并将其传递给模板以进行显示。

+ +

打开catalog / views.py，并注意该文件已经导入了 使用模板和数据生成HTML文件的 render() 快捷方式函数。

+ +
from django.shortcuts import render
+
+# Create your views here.
+
+ +

复制文件底部的以下代码。第一行导入我们将用于访问所有视图中数据的模型类。

+ +
from .models import Book, Author, BookInstance, Genre
+
+def index(request):
+    """
+    View function for home page of site.
+    """
+    # Generate counts of some of the main objects
+    num_books=Book.objects.all().count()
+    num_instances=BookInstance.objects.all().count()
+    # Available books (status = 'a')
+    num_instances_available=BookInstance.objects.filter(status__exact='a').count()
+    num_authors=Author.objects.count()  # The 'all()' is implied by default.
+
+    # Render the HTML template index.html with the data in the context variable
+    return render(
+        request,
+        'index.html',
+        context={'num_books':num_books,'num_instances':num_instances,'num_instances_available':num_instances_available,'num_authors':num_authors},
+    )
+ +

视图函数的第一部分使用objects.all()模型类的属性来获取记录计数。它还会获取一个BookInstance状态字段值为“a”（可用）的对象列表。您可以在前面的教程 (Django Tutorial Part 3: Using models > Searching for records)中找到更多关于如何访问模型的信息。

+ +

在函数结束时，我们将该函数称为render()创建和返回HTML页面作为响应（此快捷方式函数包含许多其他函数，简化了这种非常常见的用例）。它将原始request对象（an HttpRequest）作为参数，具有数据占位符的HTML模板以及context变量（包含要插入到这些占位符中的数据的Python字典）。

+ +

我们将在下一节中详细介绍模板和上下文变量; 让我们创建我们的模板，以便我们可以向用户显示一些内容

+ +

模版

+ +

模版是定义一个文件（例如HTML页面）的结构与布局的文本文件，其中占位符用于表示实际内容。Django将自动在应用程序“templates”目录查找模版。所以例如，在我们刚刚加的索引页，render() 函数会期望能够找到/locallibrary/catalog/templates/index.html这个文件，如何找不到该文件，则会引发错误。如果保存以前的更改并返回到浏览器，你可以看到访问 127.0.0.1:8000 现在将提供你一个相当直观的错误信息"TemplateDoesNotExist at /catalog/“以及其他详细信息。

+ +
+

注意: Django 将根据你的项目的设置文件, 来查看模版的许多位置 (在已安装的应用程序中进行搜索是默认设置). 你可以查阅更多关于Django如何找到模版以及它支持的模版格式在（Templates ）。

+
+ +

扩展模版

+ +

索引模版将需要标准的HTML标记头部和正文，以及用于导航的部分（去我们尚为创建的网站其他的页面）以及显示一些介绍文本和我们书籍数据。我们网站上的每一页，大部分文字（HTML和导航结构）都是一样的。Django模版语言不是强制开发人员在每个页面中复制这个“样板”，而是让你声明一个基本模版，然后再扩展它，仅替换每个特定页面不同的位置。

+ +

例如，基本模版 base_generic.html 可能看起来像下面的文本。正如你所见的，它包含一些“常见“HTML”和标题，侧边栏和使用命名 block 和 endblock 模版标记（粗体显示）标记的内容部分。块可以是空的，或者包含将被派生页“默认使用”的内容。

+ +
+

注意: 模版标签就像你可以在模版中使用的函数循环列表，基于变量的值执行条件操作等。除了模版标签，模版语法允许你引用模版变量（通过从视图进入模版），并使用模版过滤器，其中重新格式化变量（例如，将字符串设置为小写）。

+
+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  {% block title %}<title>Local Library</title>{% endblock %}
+</head>
+
+<body>
+  {% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
+  {% block content %}<!-- default content text (typically empty) -->{% endblock %}
+</body>
+</html>
+
+ +

当我们要为特定视图定义一个模版时，我们首先指定基本模版（使用 extends 模版标签—查看下一个代码片段）。如果我们想要在模版中替换的章节，会使用相同的 block/endblock 部分在基本模版表明。

+ +

例如，下面我们使用 extends 模版标签，并覆盖 content 块。生成的最终HTML页面将具有基本模版中定义的所以HTML和结构（包括你在title块中定义的默认内容），但你新的 content 块插入到了默认的那块。

+ +

base_generic.html 详细会在下文中，请耐心往下看。

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+<h1>Local Library Home</h1>
+<p>Welcome to <em>LocalLibrary</em>, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.</p>
+{% endblock %}
+ +

本地图书馆-基本模版

+ +

下面就是我们计划的基本模版用于本地图书馆网站。正如所看到的，内容包括一些HTML和定义块 title ，sidebar 和 content。我们有默认的 title（当然我们可以改）和默认的所以书籍和作者的链接列表 sidebar （我们可能并不会怎么改，但需要时，我们通过把想法放入块block中，比如想法是—允许范围）。

+ +
+

注意: 我们再介绍两个额外的模版标签： url 和 load static 。下文中我们会详细介绍。

+
+ +

创建一个新的文件 — /locallibrary/catalog/templates/base_generic.html — 写入如下代码

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  {% block title %}<title>Local Library</title>{% endblock %}
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
+  <!-- Add additional CSS in static file -->
+  {% load static %}
+  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
+</head>
+
+<body>
+
+  <div class="container-fluid">
+
+    <div class="row">
+      <div class="col-sm-2">
+      {% block sidebar %}
+      <ul class="sidebar-nav">
+          <li><a href="{% url 'index' %}">Home</a></li>
+          <li><a href="">All books</a></li>
+          <li><a href="">All authors</a></li>
+      </ul>
+     {% endblock %}
+      </div>
+      <div class="col-sm-10 ">
+      {% block content %}{% endblock %}
+      </div>
+    </div>
+
+  </div>
+</body>
+</html>
+ +

该模版使用（并包含）JavaScript 和  Bootstrap  （css框架）来改进HTML页面的布局和显示，这个框架或者另一个客户端网络框架，这是快速创建一个可用页面来适应在不同浏览器尺寸和允许我们处理页面呈现且不用一点细节—我们只需要专注在服务器端。

+ +

基本模版还引用了一个本地css文件 (styles.css) ，它提供了一些额外的样式。 新建 /locallibrary/catalog/static/css/styles.css 如下：

+ +
.sidebar-nav {
+    margin-top: 20px;
+    padding: 0;
+    list-style: none;
+}
+ +

索引模版

+ +

新建HTML文件 /locallibrary/catalog/templates/index.html 写入下面代码。第一行我们扩展了我们的基本模版, 使用 content替换默认块。

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+<h1>Local Library Home</h1>
+
+  <p>Welcome to <em>LocalLibrary</em>, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.</p>
+
+<h2>Dynamic content</h2>
+
+  <p>The library has the following record counts:</p>
+  <ul>
+    <li><strong>Books:</strong> \{{ num_books }}</li>
+    <li><strong>Copies:</strong> \{{ num_instances }}</li>
+    <li><strong>Copies available:</strong> \{{ num_instances_available }}</li>
+    <li><strong>Authors:</strong> \{{ num_authors }}</li>
+  </ul>
+
+{% endblock %}
+ +
+

注意：由于本网站就是通过django 来运维，\{{ 的模版标签 在上面代码中会运行，只能通过增加 \ 来转义，而不能直接写出“双大括号”。

+
+ +

在动态内容部分，我们的占位符（模版变量），是给我们想要视图的信息声明。变量使用“双大括号“ 或者“句柄“语法进行标记。

+ +
+

注意: 你可以轻松地识别是否使用变量或模版标签（函数），因为变量具有双括号(\{{ num_books }}) 而标记被包含在带有百分比符号 ({% extends "base_generic.html" %})的单个大括号中。

+
+ +

这里要注意的重要事情是这些变量用我们视图函数render中的字典—注入 context （下面）；当渲染模版时，这些将替换为相关联的值。

+ +
return render(
+    request,
+    'index.html',
+     context={'num_books':num_books,'num_instances':num_instances,'num_instances_available':num_instances_available,'num_authors':num_authors},
+)
+ +

在模版中引用静态文件

+ +

你的项目可能会使用静态资源，包括javascript，css 和图像。由于这些文件的位置可能不知道（或者可能会发生变化），则Django允许你指定你的模版相对于这些文件的位置 STATIC_URL 全局设置（默认基本网站设置的值 STATIC_URL，以“／static／”，但你可能选择在CDN和其他地方托管内容）。

+ +

在模版中，你首先调用 load 指定“ static”去添加此模版库（如下）。静态加载后，你可以使用 static 模版标签，指定感兴趣的文件相对URL

+ +
 <!-- Add additional CSS in static file -->
+{% load static %}
+<link rel="stylesheet" href="{% static 'css/styles.css' %}">
+ +

你可以用同样的方式将图像添加到页面中：

+ +
{% load static %}
+<img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="My image" style="width:555px;height:540px;"/>
+
+ +
+

主题: 上面的更改指定文件所在的位置，但Django默认不提供它们。当我们created the website skeleton,我们在全局URL映射器r (/locallibrary/locallibrary/urls.py) 中开发Web服务器提供服务，你仍然需要安排它们在生产中投放。我们接下来看一看

+
+ +

更多内容—Managing static files (Django docs).

+ +

链接URLs

+ +

基本的模版引入 url 模版标签

+ +
<li><a href="{% url 'index' %}">Home</a></li>
+
+ +

此标记url()使用您的urls.py中调用的函数的名称 和相关视图将从该函数接收的任何参数的值，并返回可用于链接到该资源的URL。

+ +

它看起来什么样？

+ +

运行 (python3 manage.py runserver) 和在浏览器中打开 http://127.0.0.1:8000/. I如果一切都正确设置，当当当当。

+ +

Index page for LocalLibrary website

+ +
+

注意：由于尚未定义这些网页的网址，视图和模板，因此您将无法使用“ 所有图书和所有作者”链接（目前我们刚刚在base_generic.html模板中插入了这些链接的占位符）

+
+ +

挑战自己

+ +

以下是一些测试您熟悉模型查询，视图和模板的任务。

+ +

   1. 在索引模板中声明一个新的标题块，并更改页面标题以匹配此特定页面。
+    2. 修改视图以生成包含特定单词（不区分大小写）的类型计数和书数，然后将这些字段添加到模板。

+ + + +

概要

+ +

我们现在已经为我们的网站创建了主页 - 一个HTML页面，显示数据库中的一些记录数，并且链接到我们其他尚待创建的页面。一路上，我们已经学到了很多有关url映射器，视图，使用我们的模型查询数据库的基本信息，如何从您的视图传递信息到模板，以及如何创建和扩展模板。

+ +

在我们的下一篇文章中，我们将基于我们的知识来创建其他四个页面。

+ +

也可以看看

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}

diff --git "a/files/zh-cn/learn/server-side/django/\344\270\273\351\241\265\346\236\204\345\273\272/index.html" "b/files/zh-cn/learn/server-side/django/\344\270\273\351\241\265\346\236\204\345\273\272/index.html" deleted file mode 100644 index 0527ba8731..0000000000 --- "a/files/zh-cn/learn/server-side/django/\344\270\273\351\241\265\346\236\204\345\273\272/index.html" +++ /dev/null @@ -1,358 +0,0 @@ ---- -title: 'Django Tutorial Part 5: 主页构建' -slug: learn/Server-side/Django/主页构建 -translation_of: Learn/Server-side/Django/Home_page ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}
- -

  我们现在可以添加代码来显示我们的第一个完整页面 -  LocalLibrary 网站的主页，显示每个模型类型有多少条记录，并提供我们其他页面的侧边栏导航链接。一路上，我们将获得编写基本URL地图和视图，从数据库获取记录以及使用模板的实践经验。

- - - - - - - - - - - - -
前提:读 the Django Introduction. 完成上章节 (including Django Tutorial Part 4: Django admin site).
目的:了解如何创建简单的URL映射和视图（没有数据编码在URL中）以及如何从模型中获取数据并创建模版。
- -

概要

- -

现在我们已经定义了我们的模型，并创建了一些初始库记录来处理，现在是编写代码以向用户呈现该信息的时候了。我们需要做的第一件事是确定我们希望能够在我们的页面中显示哪些信息，然后为返回这些资源定义适当的URL。那么我们将需要创建一个url映射器，视图和模板来显示这些页面。

- -

以下图表提供了处理HTTP请求/响应时需要实现的数据和事情的主要流程。我们已经创建了这个模型，我们需要创建的主要内容是：

- - - -

- -

正如你将在下一节中看到的，我们将要显示5个页面，这在一篇文章中是很重要的。因此，本文的大部分内容将重点介绍如何实现主页（我们将在随后的文章中介绍其他页面）。这应该让您对URL映射器，视图和模型在实践中如何工作有一个很好的端到端的了解。

- -

定义资源URL

- -

由于本版本的LocalLibrary对于最终用户本质上是只读的，所以我们只需要为该网站（主页）提供一个着陆页，以及显示书籍和作者的列表和详细视图的页面。

- -

下面这些URL 是我们页面需要的：

- - - -

前三个URL用于列出索引，书籍和作者。这些不会对任何附加信息进行编码，而返回的结果将取决于数据库中的内容，运行获取信息的查询将始终保持一致。

- -

相比之下，最后两个URL用于显示有关特定书籍或作者的详细信息 - 这些URL将编码要显示在URL中的项目的标识（如上所示<id>）。URL映射器可以提取编码信息并将其传递给视图，然后将动态地确定从数据库获取哪些信息。通过对我们的URL中的信息进行编码，我们只需要一个URL映射，视图和模板来处理每本书（或作者）。

- -
-

注意：Django允许您以任何您喜欢的方式构建您的URL - 您可以如上所示编码URL正文中的信息，或使用URL GET参数（例如  /book/?id=6）。无论您使用哪种方法，URL都应保持清洁，逻辑和可读性 (check out the W3C advice here).
-
- Django文档倾向于在URL的主体中推荐编码信息，这是他们觉得鼓励更好的URL设计的实践。

-
- -

如概述，本文其余部分介绍如何构建索引页

- -

创建索引页

- -

我们创建的第一个页面将会是索引页（catalog/)。这会显示一些静态HTML，以及数据库中不同记录的一些计算的“计数“。为了使其工作，我们必须创建一个URL映射，视图和模版。

- -
-

注意: 本节应该特别注意。一些”材料“在所有页面都通用。

-
- -

URL 映射

- -

在我们创建的基础网站上，更新 /locallibrary/urls.py 文件。以确保每当收到以catalog/开头的URL时，URLConf模块中的catalog.urls 会处理剩余的字符串。

- -

打开 catalog/urls.py ，复制下面代码

- -
urlpatterns = [
-    path('', views.index, name='index'),
-]
- -

如果检测到URL模式''，(views.index——在view.py中函数命名index() ）将被调用。URL模式是Python 正则表达式 (RE)。我们将在本教程中进一步介绍RE。

- -
-

注意: 在  /locallibrary/locallibrary/urls.py 

- -
urlpatterns += [
-    path('catalog/', include('catalog.urls')),
-]
- -

每当Django 使用 include() （django.conf.urls.include()），它排除与该点 匹配URL的任何部分，并将剩余的字符串发送到随附的 URLconf 进行一步处理。

- -

匹配的URL 实际上是 catalog/+<空字符串> （/catalog/ 假定是因为 include()是使用的方法）。如果我们收到一个URL的HTTP请求，我们的第一个视图函数将被调用/catalog/。

-
- -

此函数还说明了一个name参数，此唯一标识指定 URL 映射。你可以使用 "reverse" 映射—去动态创建指定映射设计处理的资源的一个URL。例如，我们现在可以通过在我们的模版中创建以下链接到我们的主页：

- -
<a href="{% url 'index' %}">Home</a>.
- -
-

注意: 我们当然可以硬编码上面的链接（如：<a href="/catalog/">Home</a>），但是如果我们改变了主页的模式，模版将不再正确链接，使用反向网址映射会更灵活和强大。

-
- -

View (基于功能)

- -

视图是处理HTTP请求的功能，根据需要从数据库获取数据，通过使用HTML模板呈现此数据生成HTML页面，然后以HTTP响应返回HTML以显示给用户。索引视图遵循此模型 - 它提取有关数据库中有多少Book，BookInstance 可用 BookInstance 和 Author 记录的信息，并将其传递给模板以进行显示。

- -

打开catalog / views.py，并注意该文件已经导入了 使用模板和数据生成HTML文件的 render() 快捷方式函数。

- -
from django.shortcuts import render
-
-# Create your views here.
-
- -

复制文件底部的以下代码。第一行导入我们将用于访问所有视图中数据的模型类。

- -
from .models import Book, Author, BookInstance, Genre
-
-def index(request):
-    """
-    View function for home page of site.
-    """
-    # Generate counts of some of the main objects
-    num_books=Book.objects.all().count()
-    num_instances=BookInstance.objects.all().count()
-    # Available books (status = 'a')
-    num_instances_available=BookInstance.objects.filter(status__exact='a').count()
-    num_authors=Author.objects.count()  # The 'all()' is implied by default.
-
-    # Render the HTML template index.html with the data in the context variable
-    return render(
-        request,
-        'index.html',
-        context={'num_books':num_books,'num_instances':num_instances,'num_instances_available':num_instances_available,'num_authors':num_authors},
-    )
- -

视图函数的第一部分使用objects.all()模型类的属性来获取记录计数。它还会获取一个BookInstance状态字段值为“a”（可用）的对象列表。您可以在前面的教程 (Django Tutorial Part 3: Using models > Searching for records)中找到更多关于如何访问模型的信息。

- -

在函数结束时，我们将该函数称为render()创建和返回HTML页面作为响应（此快捷方式函数包含许多其他函数，简化了这种非常常见的用例）。它将原始request对象（an HttpRequest）作为参数，具有数据占位符的HTML模板以及context变量（包含要插入到这些占位符中的数据的Python字典）。

- -

我们将在下一节中详细介绍模板和上下文变量; 让我们创建我们的模板，以便我们可以向用户显示一些内容

- -

模版

- -

模版是定义一个文件（例如HTML页面）的结构与布局的文本文件，其中占位符用于表示实际内容。Django将自动在应用程序“templates”目录查找模版。所以例如，在我们刚刚加的索引页，render() 函数会期望能够找到/locallibrary/catalog/templates/index.html这个文件，如何找不到该文件，则会引发错误。如果保存以前的更改并返回到浏览器，你可以看到访问 127.0.0.1:8000 现在将提供你一个相当直观的错误信息"TemplateDoesNotExist at /catalog/“以及其他详细信息。

- -
-

注意: Django 将根据你的项目的设置文件, 来查看模版的许多位置 (在已安装的应用程序中进行搜索是默认设置). 你可以查阅更多关于Django如何找到模版以及它支持的模版格式在（Templates ）。

-
- -

扩展模版

- -

索引模版将需要标准的HTML标记头部和正文，以及用于导航的部分（去我们尚为创建的网站其他的页面）以及显示一些介绍文本和我们书籍数据。我们网站上的每一页，大部分文字（HTML和导航结构）都是一样的。Django模版语言不是强制开发人员在每个页面中复制这个“样板”，而是让你声明一个基本模版，然后再扩展它，仅替换每个特定页面不同的位置。

- -

例如，基本模版 base_generic.html 可能看起来像下面的文本。正如你所见的，它包含一些“常见“HTML”和标题，侧边栏和使用命名 block 和 endblock 模版标记（粗体显示）标记的内容部分。块可以是空的，或者包含将被派生页“默认使用”的内容。

- -
-

注意: 模版标签就像你可以在模版中使用的函数循环列表，基于变量的值执行条件操作等。除了模版标签，模版语法允许你引用模版变量（通过从视图进入模版），并使用模版过滤器，其中重新格式化变量（例如，将字符串设置为小写）。

-
- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-  {% block title %}<title>Local Library</title>{% endblock %}
-</head>
-
-<body>
-  {% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
-  {% block content %}<!-- default content text (typically empty) -->{% endblock %}
-</body>
-</html>
-
- -

当我们要为特定视图定义一个模版时，我们首先指定基本模版（使用 extends 模版标签—查看下一个代码片段）。如果我们想要在模版中替换的章节，会使用相同的 block/endblock 部分在基本模版表明。

- -

例如，下面我们使用 extends 模版标签，并覆盖 content 块。生成的最终HTML页面将具有基本模版中定义的所以HTML和结构（包括你在title块中定义的默认内容），但你新的 content 块插入到了默认的那块。

- -

base_generic.html 详细会在下文中，请耐心往下看。

- -
{% extends "base_generic.html" %}
-
-{% block content %}
-<h1>Local Library Home</h1>
-<p>Welcome to <em>LocalLibrary</em>, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.</p>
-{% endblock %}
- -

本地图书馆-基本模版

- -

下面就是我们计划的基本模版用于本地图书馆网站。正如所看到的，内容包括一些HTML和定义块 title ，sidebar 和 content。我们有默认的 title（当然我们可以改）和默认的所以书籍和作者的链接列表 sidebar （我们可能并不会怎么改，但需要时，我们通过把想法放入块block中，比如想法是—允许范围）。

- -
-

注意: 我们再介绍两个额外的模版标签： url 和 load static 。下文中我们会详细介绍。

-
- -

创建一个新的文件 — /locallibrary/catalog/templates/base_generic.html — 写入如下代码

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-
-  {% block title %}<title>Local Library</title>{% endblock %}
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-
-  <!-- Add additional CSS in static file -->
-  {% load static %}
-  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
-</head>
-
-<body>
-
-  <div class="container-fluid">
-
-    <div class="row">
-      <div class="col-sm-2">
-      {% block sidebar %}
-      <ul class="sidebar-nav">
-          <li><a href="{% url 'index' %}">Home</a></li>
-          <li><a href="">All books</a></li>
-          <li><a href="">All authors</a></li>
-      </ul>
-     {% endblock %}
-      </div>
-      <div class="col-sm-10 ">
-      {% block content %}{% endblock %}
-      </div>
-    </div>
-
-  </div>
-</body>
-</html>
- -

该模版使用（并包含）JavaScript 和  Bootstrap  （css框架）来改进HTML页面的布局和显示，这个框架或者另一个客户端网络框架，这是快速创建一个可用页面来适应在不同浏览器尺寸和允许我们处理页面呈现且不用一点细节—我们只需要专注在服务器端。

- -

基本模版还引用了一个本地css文件 (styles.css) ，它提供了一些额外的样式。 新建 /locallibrary/catalog/static/css/styles.css 如下：

- -
.sidebar-nav {
-    margin-top: 20px;
-    padding: 0;
-    list-style: none;
-}
- -

索引模版

- -

新建HTML文件 /locallibrary/catalog/templates/index.html 写入下面代码。第一行我们扩展了我们的基本模版, 使用 content替换默认块。

- -
{% extends "base_generic.html" %}
-
-{% block content %}
-<h1>Local Library Home</h1>
-
-  <p>Welcome to <em>LocalLibrary</em>, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.</p>
-
-<h2>Dynamic content</h2>
-
-  <p>The library has the following record counts:</p>
-  <ul>
-    <li><strong>Books:</strong> \{{ num_books }}</li>
-    <li><strong>Copies:</strong> \{{ num_instances }}</li>
-    <li><strong>Copies available:</strong> \{{ num_instances_available }}</li>
-    <li><strong>Authors:</strong> \{{ num_authors }}</li>
-  </ul>
-
-{% endblock %}
- -
-

注意：由于本网站就是通过django 来运维，\{{ 的模版标签 在上面代码中会运行，只能通过增加 \ 来转义，而不能直接写出“双大括号”。

-
- -

在动态内容部分，我们的占位符（模版变量），是给我们想要视图的信息声明。变量使用“双大括号“ 或者“句柄“语法进行标记。

- -
-

注意: 你可以轻松地识别是否使用变量或模版标签（函数），因为变量具有双括号(\{{ num_books }}) 而标记被包含在带有百分比符号 ({% extends "base_generic.html" %})的单个大括号中。

-
- -

这里要注意的重要事情是这些变量用我们视图函数render中的字典—注入 context （下面）；当渲染模版时，这些将替换为相关联的值。

- -
return render(
-    request,
-    'index.html',
-     context={'num_books':num_books,'num_instances':num_instances,'num_instances_available':num_instances_available,'num_authors':num_authors},
-)
- -

在模版中引用静态文件

- -

你的项目可能会使用静态资源，包括javascript，css 和图像。由于这些文件的位置可能不知道（或者可能会发生变化），则Django允许你指定你的模版相对于这些文件的位置 STATIC_URL 全局设置（默认基本网站设置的值 STATIC_URL，以“／static／”，但你可能选择在CDN和其他地方托管内容）。

- -

在模版中，你首先调用 load 指定“ static”去添加此模版库（如下）。静态加载后，你可以使用 static 模版标签，指定感兴趣的文件相对URL

- -
 <!-- Add additional CSS in static file -->
-{% load static %}
-<link rel="stylesheet" href="{% static 'css/styles.css' %}">
- -

你可以用同样的方式将图像添加到页面中：

- -
{% load static %}
-<img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="My image" style="width:555px;height:540px;"/>
-
- -
-

主题: 上面的更改指定文件所在的位置，但Django默认不提供它们。当我们created the website skeleton,我们在全局URL映射器r (/locallibrary/locallibrary/urls.py) 中开发Web服务器提供服务，你仍然需要安排它们在生产中投放。我们接下来看一看

-
- -

更多内容—Managing static files (Django docs).

- -

链接URLs

- -

基本的模版引入 url 模版标签

- -
<li><a href="{% url 'index' %}">Home</a></li>
-
- -

此标记url()使用您的urls.py中调用的函数的名称 和相关视图将从该函数接收的任何参数的值，并返回可用于链接到该资源的URL。

- -

它看起来什么样？

- -

运行 (python3 manage.py runserver) 和在浏览器中打开 http://127.0.0.1:8000/. I如果一切都正确设置，当当当当。

- -

Index page for LocalLibrary website

- -
-

注意：由于尚未定义这些网页的网址，视图和模板，因此您将无法使用“ 所有图书和所有作者”链接（目前我们刚刚在base_generic.html模板中插入了这些链接的占位符）

-
- -

挑战自己

- -

以下是一些测试您熟悉模型查询，视图和模板的任务。

- -

   1. 在索引模板中声明一个新的标题块，并更改页面标题以匹配此特定页面。
-    2. 修改视图以生成包含特定单词（不区分大小写）的类型计数和书数，然后将这些字段添加到模板。

- - - -

概要

- -

我们现在已经为我们的网站创建了主页 - 一个HTML页面，显示数据库中的一些记录数，并且链接到我们其他尚待创建的页面。一路上，我们已经学到了很多有关url映射器，视图，使用我们的模型查询数据库的基本信息，如何从您的视图传递信息到模板，以及如何创建和扩展模板。

- -

在我们的下一篇文章中，我们将基于我们的知识来创建其他四个页面。

- -

也可以看看

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}

diff --git "a/files/zh-cn/learn/server-side/django/\345\274\200\345\217\221\347\216\257\345\242\203/index.html" "b/files/zh-cn/learn/server-side/django/\345\274\200\345\217\221\347\216\257\345\242\203/index.html" deleted file mode 100644 index fb6041621f..0000000000 --- "a/files/zh-cn/learn/server-side/django/\345\274\200\345\217\221\347\216\257\345\242\203/index.html" +++ /dev/null @@ -1,406 +0,0 @@ ---- -title: 设置Django开发环境 -slug: learn/Server-side/Django/开发环境 -tags: - - Python - - django -translation_of: Learn/Server-side/Django/development_environment ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}
- -

现在，你知道什么是Django。
- 那么我们将向你展示如何在Windows，Linux（Ubuntu）和 Mac OSX上设置和测试Django开发环境—无论你常用哪种操作系统，本文能给你开发Django应用所需的一切。

- - - - - - - - - - - - -
先决条件:知道如何在你开发所用的计算机操作系统中，打开终端/命令行和安装软件包。
目的:在你的计算机中运行Django（1.10）开发环境。
- -

Django 开发环境概述

- -

Django 使你可以轻松配置自己的电脑，以便开始开发网络应用。本节解释您可以从开发环境中获得什么，并提供一些设置和配置选项的概述。本文的其余部分介绍了在Ubuntu，Mac OSX和Windows上安装Django开发环境的 推荐方法，以及如何测试。

- -

什么是Django开发环境?

- -

开发环境是本地计算机上的Django安装，在将Django应用程序部署到生产环境之前，您可以使用它来开发和测试Django应用程序。

- -

Django 本身提供的主要工具是一组用于创建和使用Django项目的Python脚本，以及可在你电脑的web 浏览器中测试本地Django web应用（在你的计算机，而不是在外部的web 服务器）。

- -

还有其他外部工具, 它们构成了开发环境的一部分, 我们将不再赘述。这些包括 文本编辑器 或编辑代码的IDE，以及像 Git 这样的源代码控制管理工具，用于安全地管理不同版本的代码。我们假设你已经安装了一个文本编辑器。

- -

什么是Django设置选项?

- -

Django 在安装和配置方面非常灵活。Django可以：

- - - -

每个选项都需要略微不同的配置和设置。以下小节解释了你的一些选择。在本文的其余部分中，我们将介绍Django在几个操作系统上的设置，并且在本教程的剩余模块中将假设你已进行该设置。

- -
-

注意: 其他可能的安装选项在官方Django文档中介绍。相应文件 点击这里.

-
- -

支持哪些操作系统?

- -

Django web应用程序能运行在几乎任何可以运行Python3的计算机上：Windows，Mac OSX，Linux/Unix，Solaris，仅举几例。几乎任何计算机都具备在开发期间运行Django所需的性能。

- -

在本文中。我们将提供Windows，macOS 和Linux/Unix的说明。

- -

你应该使用什么版本的Python?

- -

我们建议你使用最近发行的版本，在本文档写作的时候是Python 3.8.2。

- -

事实上，Python 3.5 以及更新的版本都可以用来开发，不过对Python 3.5的支持可能会在未来的版本更新中被移除。

- -

我们建议你使用最新版本的Python 3，除非该站点依赖于仅适用于Python 2 的第三方库。本文将介绍如何为Python 3安装环境（Python 2 的等效设置将非常相似）。

- - - -
-

注意: Python 2.7 无法用于当前的 Django 发行版本（Django 1.11.x 系列是最后支持 Python 2.7 的版本）。

-
- -

我们在哪里下载Django?

- -

有三个地方可以下载Django:

- - - -

本文介绍如何从PyPi安装Django的最新稳定版本。

- -

哪个数据库?

- -

Django支持四个主要数据库（PostgreSQL，MySQL，Oracle和SQLite），还有一些社区库可以为其他流行的SQL和NOSQL数据库提供不同级别的支持。我们建议你为生产和开发选择相同的数据库（尽管Django使用其对象关系映射器（ORM）抽象了许多数据库之间的差异，但是仍然存在本可以避免的潜在问题 ).

- -

对于本文（和本模块的大部分），我们将使用将数据存储在文件中的SQLite数据库。SQLite旨在用作轻量级数据库，不能支持高并发。然而，这确实是只读的应用程序的绝佳选择。

- -
-

注意：当你使用标准工具（django-admin）启动你的网站项目时，Django将默认使用SQLite。用来入门时，这是一个很好的选择，因为它不需要额外的配置和设置。

-
- -

安装本机系统还是Python虚拟环境中?

- -

当你安装Python3时，将获得一个由所有Python3代码共享的全局环境。虽然你可以在该环境中安装任何你喜欢的Python包，但是每次只能安装每个包的一个特定版本。

- -
-

注意：安装到全局环境的Python应用程序可能会相互冲突（例如如果它们依赖于同一包的不同版本）。

-
- -

如果你把Django安装到默认/全局环境中，那么在该计算机上将只能定位到Django的一个版本。如果你想创建新的网站(使用最新版本的Django)，同时仍然维护依赖旧版本的网站，这可能是个问题。

- -

因此，经验丰富的Python/Django开发人员通常在独立Python虚拟环境中运行Python应用程序。这样就可以在一台计算机上实现多个不同的Django环境。Django开发团队同样建议你使用Python虚拟环境。

- -

本模块假设已经将Django安装到虚拟环境中，下面我们会演示如何进行。

- -

安装 Python 3

- -

为了使用Django，你需要在你的操作系统中安装Python。如果你使用Python3，那么你同样需要Python 包管理工具  — pip3 — 用来管理 (安装，更新和删除)被Django和其他Python应用程序使用的Python软件包／库。

- -

本节简要介绍了如何检查有哪些版本的Python，并根据需要安装适用于 Ubuntu Linux 16.04,macOS, and Windows 10的新版本。

- -
-

注意: 根据你的平台, 您还可以从操作系统自己的软件包管理器或其他机制安装Python / pip。对于大多数平台，您可以从https://www.python.org/downloads/下载所需的安装文件，并使用该平台特定的方法进行安装。

-
- -

Ubuntu 18.04

- -

Ubuntu Linux 18.04 LTS默认包含Python 3.6.6。你可以通过在Bash终端中运行以下命令来确认这一点：

- -
python3 -V
- Python 3.6.6
- -

然而，在默认情况下，为Python 3（包括Django）安装软件包的Python包管理工具不可用。你可以在bash终端中使用以下命令安装pip3：

- -
sudo apt-get install python3-pip
-
- -

macOS

- -

macOS 的"El Capitan" 及其他最新版本不包含Python 3。你可以通过在bash终端中运行一下命令来确认：

- -
python3 -V
- -bash: python3: command not found
- -

你可以轻松地从 python.org安装Python 3（以及pip3工具）:

- -
    -
  1. 下载所需的安装程序: -
      -
    1. 点击 https://www.python.org/downloads/
      2. -
    2. 选择 Download Python 3.8.2  (具体的版本号可能不同)。
      3. -
    -
    2. -
  2. 使用Finder找到安装包，然后双击运行，并按照提示进行安装。
    3. -
- -

之后可以通过检查Python3版本确认是否安装成功，如下所示:

- -
python3 -V
-Python 3.8.2
- -

你也可以通过列出可用的包来检查pip3是否安装了：

- -
pip3 list
- -

Windows 10

- -

windows默认不包含Python, 但你可以从 python.org轻松地安装它（以及pip3工具）：

- -
    -
  1. 下载所需版本: -
      -
    1. 点击 https://www.python.org/downloads/
      2. -
    2. 选择 Download Python 3.8.2  (具体的版本号可能不同)。
      3. -
    -
    2. -
  2. 双击现在的文件并按照提示安装Python。
    3. -
  3. 确保勾选了"Add Python to PATH"选项。
    4. -
- -

你可以在命令提示符中输入以下内容来验证是否安装了Python:

- -
python -V
- Python 3.8.2
-
- -

Windows安装程序默认包含pip3 (Python包管理器)。同样在命令提示符中输入以下内容来列出已安装的包:

- -
pip3 list
-
- -
-

注意：安装包应该已把运行上述命令所需的一切设置完成。但如果你得到的消息是找不到Python，那么你可能忘记将Python添加到系统路径中了。你可以通过再次运行安装包，选择"Modify"，并在下一页面中勾选 "Add Python to environment variables"来修复这个问题。

-
- -

在Python虚拟环境中使用Django

- -

我们使用virtualenvwrapper（Linux及macOS）和 virtualenvwrapper-win（WIndows）来创建Python虚拟环境，而它们又使用了virtualenv。封装工具创建了一个一致的接口来管理各个平台上的接口。

- -

安装虚拟环境软件

- -

Ubuntu虚拟环境设置

- -

安装了Python和pip之后，你就可以安装virtualenvwrapper（包括了virtualenv）。可以在这里找到正式的安装指南，或按照以下指导操作。

- -

使用pip3安装该工具：​​​​​​

- -
sudo pip3 install virtualenvwrapper
- -

然后将以下代码行添加到shell启动文件的末尾(这是主目录中的一个隐藏文件，名字是.bashrc)。这些文件设置了虚拟环境应该存在的位置、开发项目目录的位置以及与这个包一起安装的脚本的位置。

- -
export WORKON_HOME=$HOME/.virtualenvs
-export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
-export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 '
-export PROJECT_HOME=$HOME/Devel
-source /usr/local/bin/virtualenvwrapper.sh
- -
-

注意：VIRTUALENVWRAPPER_PYTHON 和 VIRTUALENVWRAPPER_VIRTUALENV_ARGS变量指向Python3的常规安装位置，source /usr/local/bin/virtualenvwrapper.sh指向virtualenvwrapper.sh脚本的一般安装位置。 如果您在测试时发现virtualenv无法正常工作，则要检查的一件事是Python和该脚本是否在预期的位置（然后适当更改启动文件）。

- -

你可以使用which virtualenvwrapper.sh 和 which python3命令为你的系统找到正确的安装位置。

-
- -

然后通过在终端中运行以下命令重载启动文件：

- -
source ~/.bashrc
- -

此时，你应该能看到一些脚本正在运行，如下所示：

- -
virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject
-...
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details
- -

然后你就可以使用 mkvirtualenv命令创建一个新的虚拟环境。

- -

macOS 虚拟环境设置

- -

在macOS上设置virtualenvwrapper 几乎和在Ubuntu上是一样的（你同样可以按照以下指导操作，或在这里找到正式的安装指南）。

- -

使用pip安装virtualenvwrapper(并绑定virtualenv)，如下所示。

- -
sudo pip3 install virtualenvwrapper
- -

然后将以下代码行添加到shell启动文件的末尾：

- -
export WORKON_HOME=$HOME/.virtualenvs
-export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
-export PROJECT_HOME=$HOME/Devel
-source /usr/local/bin/virtualenvwrapper.sh
- -
-

注意：VIRTUALENVWRAPPER_PYTHON 和 VIRTUALENVWRAPPER_VIRTUALENV_ARGS变量指向Python3的常规安装位置，source /usr/local/bin/virtualenvwrapper.sh指向virtualenvwrapper.sh脚本的一般安装位置。 如果您在测试时发现virtualenv无法正常工作，则要检查的一件事是Python和该脚本是否在预期的位置（然后适当更改启动文件）。

- -

例如，在macOS上的一个安装测试中，启动文件中必须有以下几行代码：

- -
export WORKON_HOME=$HOME/.virtualenvs
-export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.7/bin/python3
-export PROJECT_HOME=$HOME/Devel
-source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh
- -

你可以使用which virtualenvwrapper.sh 和 which python3命令为你的系统找到正确的安装位置。

-
- -

此处使用和Ubuntu相同的代码行，但是启动文件是主目录中叫做.bash_profile的隐藏文件。

- -
-

注意：如果找不到.bash_profile进行编辑，也可以使用nano在终端中打开它，命令看起来类似于：

- -
cd ~  # Navigate to my home directory
-ls -la #List the content of the directory. YOu should see .bash_profile
-nano .bash_profile # Open the file in the nano text editor, within the terminal
-# Scroll to the end of the file, and copy in the lines above
-# Use Ctrl+X to exit nano, Choose Y to save the file.
-
- -

然后通过在终端中运行以下命令重载启动文件：

- -
source ~/.bashrc
- -

此时，你应该能看到一些脚本正在运行（和Ubuntu中同样的脚本）。然后你就可以使用 mkvirtualenv命令创建一个新的虚拟环境。

- -

Windows 10 虚拟环境设置

- -

安装 virtualenvwrapper-win 甚至比设置virtualenvwrapper 更简单，因为你无需配置工具用来存储虚拟环境信息的位置（有一个默认值）。你需要做的只是在命令提示符中运行以下命令:

- -
pip3 install virtualenvwrapper-win
- -

然后你就可以使用 mkvirtualenv命令创建一个新的虚拟环境。

- -

创建虚拟环境

- -

一旦你成功安装了virtualenvwrapper 或 virtualenvwrapper-win，那么在所有平台中使用虚拟环境的方法是非常相似的。

- -

现在你可以使用 mkvirtualenv命令创建一个新的虚拟环境。在运行此命令时，你将看到正在设置的环境（你所看到的只略微与平台相关）。命令完成后，新的虚拟环境将被激活——你能看到提示符的开头就是括号中的环境名称（以下我们展示的是Ubuntu的，但是在Windows/macOS上，末行时相似的|）

- -
$ mkvirtualenv my_django_environment
-
-Running virtualenv with interpreter /usr/bin/python3
-...
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details
-(my_django_environment) ubuntu@ubuntu:~$
- -

现在你已进入虚拟环境，可以进行Django安装并开始开发。

- -
-

注意：从现在开始，在本文(实际上是该模块)中，请假定所有命令都在类似于我们上面设置的Python虚拟环境中运行。

-
- -

使用一个虚拟环境

- -

您应该知道一些其他有用的命令(在工具的文档中还有更多，但这些是您将经常使用的命令)：

- - - -
- -

安装Django

- -

一旦你创建了一个虚拟环境，并且使用workon 进入了它，就可以使用pip3来安装Django。

- -
pip3 install django
- -

您可以通过运行以下命令来测试Django是否安装（这只是用来测试Python是否可以找到Django模块）：

- -
# Linux/macOS
-python3 -m django --version
- 1.10.10
-
-# Windows
-py -3 -m django --version
- 1.10.10
-
- -
-

注意：如果上面的Windows命令没有显示django模块，请尝试：

- -
py -m django --version
- -

在Windows中，Python 3脚本是通过在命令前面加上py -3来启动的，尽管该脚本可能会因您的特定安装而有所不同。 如果遇到命令问题，请尝试省略-3修饰符。 在Linux /macOS中，命令是python3。

-
- -
-

重要提示：本模块的其余部分使用Linux命令来调用Python 3（python3）。如果您在Windows上工作，只需将此前缀替换为： py -3

-
- -

测试你的安装

- -

上面的测试工作并不是很有趣。一个更有趣的测试是创建一个框架项目并查看它的工作情况。要做到这一点，先在你的命令提示符/终端导航到你想存储你Django应用程序的位置。为您的测试站点创建一个文件夹并进入其中。

- -
mkdir django_test
-cd django_test
-
- -

然后，您可以像所展示的一样使用django-admin工具创建一个名为“ mytestsite ” 的新框架站点。创建网站后，您可以CD到此文件夹，并将在其中找到管理项目的主要脚本，名为manage.py。

- -
django-admin startproject mytestsite
-cd mytestsite
- -

我们可以在这个文件夹中使用manager.py和runserver命令运行开发web服务器，如下所示。

- -
$ python3 manage.py runserver
-Performing system checks...
-
-System check identified no issues (0 silenced).
-
-You have 15 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
-Run 'python manage.py migrate' to apply them.
-
-December 16, 2018 - 07:06:30
-Django version 2.2.12, using settings 'mytestsite.settings'
-Starting development server at http://127.0.0.1:8000/
-Quit the server with CONTROL-C.
- -
-

注意：上面的命令显示了Linux /macOS命令。您可以忽略关于“15 unapplied migration(s)”的警告！

-
- -

一旦服务器运行，您可以通过本地Web浏览器打开http://127.0.0.1:8000/来查看该站点。你应该看到一个如下所示的网站：

- -

The home page of the skeleton Django app.

- - - -

概要

- -

现在，你的计算机中已经启动并运行了一个Django开发环境。

- -

在测试部分，您还简要地了解了如何使用django -admin startproject创建一个新的Django网站，并使用开发web服务器(python3 manager .py runserver)在浏览器中运行它。在下一篇文章中，我们将对此过程进行扩展，构建一个简单但完整的web应用程序。

- -

看看瞧瞧

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}

diff --git "a/files/zh-cn/learn/server-side/django/\347\256\241\347\220\206\347\253\231\347\202\271/index.html" "b/files/zh-cn/learn/server-side/django/\347\256\241\347\220\206\347\253\231\347\202\271/index.html" deleted file mode 100644 index d3252d84c5..0000000000 --- "a/files/zh-cn/learn/server-side/django/\347\256\241\347\220\206\347\253\231\347\202\271/index.html" +++ /dev/null @@ -1,339 +0,0 @@ ---- -title: 'Django Tutorial Part 4: Django 管理员站点' -slug: learn/Server-side/Django/管理站点 -translation_of: Learn/Server-side/Django/Admin_site ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}
- -

好了，我们已经为本地图书馆网站 LocalLibrary 创建了模型，我们接下来使用 Django 管理站点去添加 一些 “真“书数据。首先我们展示如何用管理站点注册模型，然后展示如何登录和创建一些数据。本文最后，我们介绍你可以进一步改进管理站点的建议。

- - - - - - - - - - - - -
前提:完成: Django Tutorial Part 3: 使用模型。
目的: -

了解关于管理站点的优点与缺点，并且可以使用它为我们模型创建一些记录。

-
- -

综述

- -

Django管理应用程序可以使用您的模型自动构建可用于创建，查看，更新和删除记录的站点区域。这可以在开发过程中节省大量的时间，从而很容易测试您的模型，并了解您是否拥有正确的数据。根据网站的类型，管理应用程序也可用于管理生产中的数据。Django项目建议仅用于内部数据管理（即仅供管理员或组织内部人员使用），因为以模型为中心的方法不一定是所有用户最好的界面，并且暴露了大量不必要的细节关于模型。

- -

创建基础项目时，自动完成所有将您的网站中的管理应用程序包含在内的配置文件 （有关所需实际依赖关系的信息  (如有需要请看 Django docs here). 其结果是，你必须做你的模型添加到管理应用程序是  注册  他们。在本文末尾，我们将简要介绍如何进一步配置管理区域以更好地显示我们的模型数据。

- -

注册模型后，我们将展示如何创建一个新的“超级用户”，登录到该网站，并创建一些书籍，作者，书籍实例和流派。这些将有助于测试我们将在下一个教程中开始创建的视图和模板。

- -

注册模型

- -

首先，在目录应用程序(/locallibrary/catalog/admin.py)中打开 admin.py 。此时此刻它看起来像这样—注意它已经导入了django.contrib.admin：

- -
from django.contrib import admin
-
-# Register your models here.
-
- -

通过将以下文本复制到文件的底部来注册模型。该代码简单地导入模型，调用 admin.site.register 来注册它们。

- -
from .models import Author, Genre, Book, BookInstance
-
-admin.site.register(Book)
-admin.site.register(Author)
-admin.site.register(Genre)
-admin.site.register(BookInstance)
-
- -
注意: 如果你接受创建模型以表示书籍的自然语言的挑战(see the models tutorial article), 导入并注册。
- -

这是在网站上注册模型或多模型的简单方法，管理站点是高度可定制的，我们将进一步讨论注册模型的其他方式。

- -

创建一个超级用户

- -

为了登录管理员站点，我们需要启动工作人员状态的用户账户。为了查看和创建记录，我们还需要该用户具有所有对象的记录。你可以创建一个“超级用户”账号，该账号具有完全访问该站点和所有必需的权限可以使用manage.py

- -

调用接下来的命令，在同样的目录下，manage.py 创建超级用户。你将被提示输入用户名，电子邮件地址，和强密码。

- -
python3 manage.py createsuperuser
-
- -

一旦命令完成，一个新超级用户将被添加到数据库。现在重新启动开发服务器，以便我们可以测试登录名：

- -
python3 manage.py runserver
-
- -

登入并使用该网站

- -

登录网站，打开 /admin (e.g. http://127.0.0.1:8000/admin)
- 和进入你的新超级用户名和密码凭据（你将被重定向到 登录页面，然后在你进入你的详细信息后回到 /admin URL

- -

这部分网站展示我们所有的模型，按安装的应用程序分组。你可以点击模型名称来进入到 它所有相关详细记录的页面，你可以进一步点击这些记录进行编辑。你也可以直接点击每个模型旁边的添加链接，开始创建该类型的记录。

- -

Admin Site - Home page

- -

点击图书右侧的添加链接来新建一本书（这将显示一个类似下面的对话框）。注意每个字段标题，使用的小部件的类型以及help_text（如果有的话）你要在模型中匹配指定的值。

- -

输入字段的值，你可以创建一个新的作者或类型通过 按 + 按钮（或者如果你已经创建选项，选择已有的值）。完成后，你可以按 保存，保存并添加另一个，或保存并继续编辑来保存记录。

- -

Admin Site - Book Add

- -
-

注意: 在这里，我们希望你花费一点时间添加一些书，作者，类型（如: 幻想）到你的应用。确保每个作者和类型都包含几本不同的书籍（这会是你的列表和详细视图在文章系列中后期使用时更有趣）。

-
- -

我们完成添加书籍，在顶部标签中，点击 Home 链接将回到主管理页面。然后点击 Books 链接显示当前书籍的列表（或其他链接之一，以查看其他型号列表）。现在你已经添加了几本书，列表可能与下面的截图类似。显示每本书的标题；这是书模型 __str__() 方法返回的值，在上一文章中提到。

- -

Admin Site - List of book objects

- -

从该列表中，您可以通过选中不需要的图书旁边的复选框来删除图书，从“ 操作”下拉列表中选择“ 删除”操作  ，然后按Go按钮。您也可以通过按下ADD BOOK按钮添加新书。

- -

您可以通过在链接中选择其名称来编辑书籍。一本书的编辑页面如下所示，与“添加”页面几乎相同。主要的区别是页面标题（更改书）和添加  删除，历史和VIEW ON SITE按钮（最后一个按钮出现，因为我们定义了get_absolute_url()我们的模型中的  方法）。

- -

Admin Site - Book Edit

- -

现在回到主页（使用主页链接的导航痕迹），然后查看作者  和类型  列表 - 您应该已经有很多创建从添加新书，但可以自由添加一些更多。

- -

你不会有任何书籍实例，因为这些不是从图书创建的（虽然你可以从 BookInstance - 创建一个书  - 这是ForeignKey字段的性质）。返回主页，然后按关联的添加按钮显示下面的添加书实例屏幕。请注意，全球唯一的ID，可用于单独标识库中单书的副本。

- -

Admin Site - BookInstance Add

- -

为你的书创建一些记录。将状态设置为可用于至少一些记录，并为其他记录贷款。如果状态 不可 用，则还设置未来到期日期。

- -

而已！您现在已经学会了如何 设置和使用管理站点。您还创建书的记录，BookInstance，Genre，和Author 我们就可以一次我们创造我们自己的观点和模板使用。

- -

高级配置

- -

Django 使用注册模型的信息为创建基本管理站点做了非常好的工作：

- - - -

你可以进一步自定义界面，使它更容易使用，你可以改进的一些想法：

- - - -

在本节中，我们将看一些改进本地图书馆界面的更改，其中包括添加更多信息Book和Author 模型列表，以及改进编辑视图的布局。我们不会改变 Language 和 Genre 模拟演示，因为它们只有一个字段，所以这样没有真正的好处。

- -

你可以 在The Django Admin site 中找到所以管理员网站自定义选项的完整参考。

- -

注册 一个 ModelAdmin 类

- -

在管理界面去改变一个模型的展示方式，当你定义了 ModelAdmin 类（描述布局）和将其注册到模型中。

- -

让我们开始作者模型。打开 admin.py 在目录应用程序(/locallibrary/catalog/admin.py)。注释你的原始注册（前缀为#）在 Author 模型

- -
# admin.site.register(Author)
- -

现在添加一个 AuthorAdmin 和注册，如下

- -
# Define the admin class
-class AuthorAdmin(admin.ModelAdmin):
-    pass
-
-# Register the admin class with the associated model
-admin.site.register(Author, AuthorAdmin)
-
- -

我们再为Book 添加 ModelAdmin 类 和 BookInstance 类。我们需要注释我们原始注册：

- -
#admin.site.register(Book)
-#admin.site.register(BookInstance)
- -

现在创建和注册新的模型；为了演示的目的，我们将使用@register 装饰器来注册模型（这和 admin.site.register() 语法作用一样）。

- -
# Register the Admin classes for Book using the decorator
-
-@admin.register(Book)
-class BookAdmin(admin.ModelAdmin):
-    pass
-
-# Register the Admin classes for BookInstance using the decorator
-
-@admin.register(BookInstance)
-class BookInstanceAdmin(admin.ModelAdmin):
-    pass
-
- -

可以看到我们现在 的 类都是空的 （“pass”），所以管理操作并不会改变，我们现在对这些类进行扩展，以定义我们针对模型的管理行为。

- -

配置列表视图

- -

该 本地图书馆 目前列出的所以作者都使用从模型生成的对象名称的__str__() 方法。如果只是几个作者，这无关紧要。但一旦你有许多作者，这可能会重复。要区分它们，或仅仅因为你想要显示有关每个作者的更多有趣的信息，你可以使用list_display 向视图添加其他字段。

- -

用下面的代码替代 你 AuthorAdmin 的类。在元组中声明要显示列表中的字段名称以所需的顺序排列，如图（这些和原始模型中指定的名称相同）。

- -
class AuthorAdmin(admin.ModelAdmin):
-    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
-
- -

重新启动站点并导航到作者列表。现在应该显示上述字段，如下所示：

- -

Admin Site - Improved Author List

- -

对于我们的Book模型，我们将另外显示author和genre。这author是一个ForeignKey字段（一对多）的关系，所以将由__str()__相关记录的值表示。用BookAdmin下面的版本替换课程。

- -
class BookAdmin(admin.ModelAdmin):
-    list_display = ('title', 'author', 'display_genre')
-
- -

不幸的是，我们不能直接指定 list_display 中的 genre 字段， 因为它是一个ManyToManyField （Django可以防止这种情况，因为在这样做时会有大量的数据库访问“成本”）。相反，我们将定义一个 display_genre 函数来获取信息作为一个字符串（这是我们上面调用的函数;下面我们将定义它）。

- -
-

注意：在genre这里获取可能不是一个好主意，因为数据库操作的“成本”。我们向您展示了如何在模型中调用函数的其他原因非常有用 - 例如在列表中的每个项目旁边添加一个“ 删除”链接。

-
- -

将以下代码添加到Book模型（models.py）中。这将从 genre字段的前三个值（如果存在）创建一个字符串，并创建一个short_description可以在此方法的管理站点中使用的字符串。

- -
    def display_genre(self):
-        """
-        Creates a string for the Genre. This is required to display genre in Admin.
-        """
-        return ', '.join([ genre.name for genre in self.genre.all()[:3] ])
-    display_genre.short_description = 'Genre'
-
- -

保存模型并更新管理员后，重新启动站点并转到图书列表页面; 你应该看到像下面这样的书籍清单：

- -

Admin Site - Improved Book List

- -

该Genre模型（和Language模式，如果你定义一个）都有一个单一的领域，所以没有一点为他们创造更多的显示领域的附加模型。

- -
-

注意：值得更新BookInstance模型列表，至少显示状态和预期的返回日期。我们已经补充说，作为本文末尾的挑战！

-
- -

添加列表过滤器

- -

一旦列表中有很多项目，就可以过滤哪些项目被显示出来。这是通过在list_filter属性中列出字段来完成的。用BookInstanceAdmin下面的代码片段替换你当前的  类。

- -
class BookInstanceAdmin(admin.ModelAdmin):
-    list_filter = ('status', 'due_back')
-
- -

列表视图现在将在右侧包含一个过滤器框。请注意如何选择日期和状态来过滤值：

- -

Admin Site - BookInstance List Filters

- -

整理细节视图布局

- -

默认情况下，详细视图按照其在模型中声明的顺序垂直排列所有字段。您可以更改声明的顺序，哪些字段显示（或排除），区段是否用于组织信息，字段是水平还是垂直显示，甚至是管理窗体中使用的编辑窗口小部件。

- -
-

注意：LocalLibrary模型比较简单，因此我们不需要更改布局; 不管怎样，我们会做一些改变，只是为了向你展示如何。

-
- -

控制哪些字段被显示和布局

- -

更新您的  AuthorAdmin 类以添加fields行，如下所示（粗体）：

- -
class AuthorAdmin(admin.ModelAdmin):
-    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
-    fields = ['first_name', 'last_name', ('date_of_birth', 'date_of_death')]
-
- -

在fields 属性列表只是要显示在表格上那些领域，如此才能。字段默认情况下垂直显示，但如果您进一步将它们分组在元组中（如上述“日期”字段中所示），则会水平显示。

- -

重新启动您的应用程序并转到作者详细信息视图 - 现在应该如下所示：

- -

Admin Site - Improved Author Detail

- -
-

注意：您还可以使用exclude属性来声明要从表单中排除的属性列表（将显示模型中的所有其他属性）。

-
- -

剖切细节视图

- -

你可以使用 fieldsets 属性添加“部分”以在详细信息表单中对相关的模型信息进行分组。

- -

在  BookInstance模型中，我们有相关的书是什么（即信息  name，imprint和id），并且当将可用（status，due_back）。我们可以通过将粗体文本添加到我们的BookInstanceAdmin类中来将其添加到不同的部分  。

- -
@admin.register(BookInstance)
-class BookInstanceAdmin(admin.ModelAdmin):
-    list_filter = ('status', 'due_back')
-
-    fieldsets = (
-        (None, {
-            'fields': ('book','imprint', 'id')
-        }),
-        ('Availability', {
-            'fields': ('status', 'due_back')
-        }),
-    )
- -

每个部分都有自己的标题（或者None如果你不想要一个标题）和字典中的一个相关的元组 - 描述的格式很复杂，但是如果你看上面的代码片段，那么它们很容易理解。

- -

重新启动并导航到书籍实例视图; 表格应如下所示：

- -

Admin Site - Improved BookInstance Detail with sections

- -

关联记录的内联编辑

- -

有时，可以同时添加关联记录是有意义的。例如，将书籍信息和有关您在同一详细信息页面上的特定副本的信息同时显示可能是有意义的。

- -

你可以通过声明 inlines, 类型 TabularInline (水平布局 ) or StackedInline (垂直布局 ，就像默认布局)这样做. 您可以通过在您的以下的粗体中添加以下行，将内容中的BookInstance信息添加到我们的Book详细信息中BookAdmin：

- -
class BooksInstanceInline(admin.TabularInline):
-    model = BookInstance
-
-@admin.register(Book)
-class BookAdmin(admin.ModelAdmin):
-    list_display = ('title', 'author', 'display_genre')
-    inlines = [BooksInstanceInline]
-
- -

尝试重新启动您的应用程序，然后查看图书的视图 - 在底部您应该看到与本书相关的图书实例：

- -

Admin Site - Book with Inlines

- -

在这种情况下，我们所做的就是声明我们的tablular内联类，它只是从内联模型添加所有字段。您可以为布局指定各种附加信息，包括要显示的字段，其顺序，是否只读等。（有关详细信息，请参阅  TabularInline ). 

- -
-

注意：这个功能有一些痛苦的限制！在上面的屏幕截图中，我们有三个现有的书籍实例，其次是新的书籍实例的三个占位符（看起来非常相似！）。默认情况下没有备用书实例会更好，只需使用“ 添加另一个书”实例链接添加它们，或者可以BookInstance从这里列出作为不可读的链接。第一个选项可以通过extra在BookInstanceInline模型中将属性设置为0 来完成，自己尝试一下。

-
- -

挑战自己

- -

我们在本节学到了很多东西，所以现在是时候尝试一些事情了。

- -

1. 对于  BookInstance列表视图，添加代码以显示书籍，状态，到期日期和ID（而不是默认__str__()文本）。
- 2. 添加的在线上市Book项目的Author使用，因为我们做了同样的做法详细视图Book/ BookInstance。

- -

概要

- -

而已！您现在已经了解了如何以最简单和改进的形式设置管理站点，如何创建超级用户以及如何导航管理站点以及查看，删除和更新记录。一路上，您创建了一堆书籍，BookInstances，流派和作者，一旦我们创建了自己的视图和模板，我们就可以列出和展示。

- - - -

进阶阅读

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}

diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html new file mode 100644 index 0000000000..3975354417 --- /dev/null +++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html @@ -0,0 +1,393 @@ +--- +title: 客户端框架介绍 +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/介绍 +tags: + - JavaScript + - 初学者 + - 学习 + - 客户端 + - 框架 +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

在本章节我们开始大致了解框架, 简要回顾JavaScript和框架的历史,为什么框架会存在以及它们提供了什么, 如何开始考虑选择一个框架并学习, 以及对于客户端框架还有什么替代方案.

+ + + + + + + + + + + + +
先决条件：熟悉 HTML, CSS, 以及 JavaScript 语言的核心.
目标:了解客户端JavaScript框架是如何存在的，它们能解决什么问题，还有哪些替代方案，以及如何选择一个框架.
+ +

简史

+ +

当JavaScript在1996被发布后, 它给网络增加了少许的交互性和乐趣, 直到那时, 网页仍由静态文档组成. 网络应该不仅仅是阅读,更是创造的地方. 随着JavaScript的流行. 使用JavaScript的开发者们创造工具来解决他们遇到的问题, 并且将其打包成称为库的可复用组件, 这样就能和他人共享解决方案. 这种共享库的体系帮助塑造了网络的增长.

+ +

现在, JavaScript是网络的基本部分, used on 95% of all websites, 而且网络又是现代生活的基本部分. 用户在网络上写文章, 管理预算, 听音乐, 看电影,  以及和相隔万里的人通过文字, 音频, 视频聊天来瞬时交流. 网络让我们能够做到那些过去只能在电脑上安装本地应用程序才能做到的事. 这些现代的, 复杂的, 具有交互性的网站通常被称为 网络应用程序.

+ +

现代JavaScript框架的到来加快了打造高度动态化和交互性强的应用程序的速度.  框架 就是提供该如何构建应用程序的意见的库。这些意见能使应用具有可预测性和同质性。可预测性让软件能在扩展到很大规模的同时仍保持可维护性。可预测性和可维护性对于一个软件的长久健康运行是十分重要的。

+ +

在现代网络中，JavaScript框架为众多令人印象深刻的软件提供支持——包括许多你可能每天都使用的网站。你正在阅读的这个MDN Web 文档页面, 就是使用React / ReactDOM框架为其前端提供动力。

+ +

有哪些框架?

+ +

有很多框架可供你选择，但以下主要介绍目前公认的“四大框架”。

+ +

Ember

+ +

Ember于2011年12月发布，最初作为SproutCore项目的延续而开始。比其新式的替代品（例如React和Vue），作为老框架它的用户人数要少得多。但因其稳定性、社区支持以及一些明智的编程原则，它仍然享有很高的知名度。

+ +

Angular

+ +

Angular 是一个开源 Web 应用程序框架，正式发布于2016年9月14日。它由构建 AngularJS 的团队完全重写，并由 Google 的 Angular 团队以及个人和公司社区共同领导。

+ +

Angular 是一种基于组件的框架，使用声明式的HTML模板。在应用构建时，框架的编译器将 HTML 模板转换为优化好的 JavaScript 指令，这一过程对开发者是透明的。Angular 使用 TypeScript，它是 JavaScript 的超集，我们将在下一章中对其进行更多介绍。

+ +

Vue

+ +

Evan You first released Vue in 2014, after working on and learning from the original AngularJS project. Vue is the youngest of the big four, but has enjoyed a recent uptick in popularity.

+ +

Vue, like AngularJS, extends HTML with some of its own code. Apart from that, it mainly relies on modern, standard JavaScript.

+ +

React

+ +

Facebook 在 2013 发布了 React。 在当时 React 已经被Facebook内部用来解决许多问题。 严格来说 React 本身并不是框架，而是一个用来渲染UI 组件的库。 React is used in combination with other libraries to make applications — React and React Native enable developers to make mobile applications; React and ReactDOM enables them to make web applications, etc.

+ +

Because React and ReactDOM are so often used together, React is colloquially understood as a JavaScript framework. As you read through this module, we will be working with that colloquial understanding.

+ +

React extends JavaScript with HTML-like syntax, known as JSX.

+ +

框架为何会存在?

+ +

我们已经讨论了因为什么契机而创造了框架，但我们仍不知道为什么开发者认为有必要创造它。要知道这个问题的答案，我们首先需要检查软件开发中的各种挑战。

+ +

设想一个很常见的软件：一个To-Do清单创建器，在接下来的章节中我们会使用各种框架来实现它。这个应用应让用户可以完成诸如呈现任务列表、添加和删除任务等操作，且在完成这些操作的同时能可靠地跟踪和更新应用程序的底层数据。在软件开发中，这种底层数据被称为状态。

+ +

上述每个目标理论上都很简单。我们可以遍历数据来列出清单，添加一个对象来创建新任务，使用标识符来查找、编辑和删除任务。需要注意的是，用户都是在浏览器中使用应用的这些功能，然而这就引出了一些问题： 每当我们修改应用的数据时，我们都需要更新用户界面以使其匹配。 

+ +

我们可以通过To-Do应用的一个功能来检验这个问题的难点：呈现任务清单。

+ +

冗长的DOM操作

+ +

Building HTML elements and rendering them in the browser at the appropriate time takes a surprising amount of code. Let's say that our state is an array of objects structured like this:

+ +
const state = [
+  {
+    id: 'todo-0',
+    name: 'Learn some frameworks!'
+  }
+]
+ +

How do we show one of those tasks to our user? We want to represent each task as a list item – an HTML <li> element inside of an unordered list element (a <ul>). How do we make it? That could look something like this:

+ +
function buildTodoItemEl(id, name) {
+  const item = document.createElement('li');
+  const span = document.createElement('span');
+  const textContent = document.createTextNode(name);
+
+  span.appendChild(textContent)
+
+  item.id = id;
+  item.appendChild(span);
+  item.appendChild(buildDeleteButtonEl(id));
+
+  return item;
+}
+ +

Here, we use the document.createElement() method to make our <li>, and several more lines of code to create the properties and children it needs.

+ +

The tenth line of this snippet references another build function: buildDeleteButtonEl(). It follows a similar pattern to the one we used to build a list item element:

+ +
function buildDeleteButtonEl(id) {
+  const button = document.createElement('button');
+  const textContent = document.createTextNode('Delete');
+
+  button.setAttribute('type', 'button');
+  button.appendChild(textContent);
+
+  return button;
+}
+ +

This button doesn't do anything yet, but it will later once we decide to implement our delete feature. The code that will render our items on the page might read something like this:

+ +
function renderTodoList() {
+  const frag = document.createDocumentFragment();
+  state.tasks.forEach(task => {
+    const item = buildTodoItemEl(task.id, task.name);
+    frag.appendChild(item);
+  });
+
+  while (todoListEl.firstChild) {
+    todoListEl.removeChild(todoListEl.firstChild);
+  }
+  todoListEl.appendChild(frag);
+}
+ +

We've now got well over thirty lines of code dedicated just to the UI – just to the step of rendering something in the DOM – and at no point do we add classes that we could use later to style our list-items!

+ +

Working directly with the DOM, as in this example, requires understanding many things about how the DOM works: how to make elements; how to change their properties; how to put elements inside of each other; how to get them on the page. None of this code actually handles user interactions, or addresses adding or deleting a task. If we add those features, we have to remember to update our UI in the right time and in the right way.

+ +

JavaScript frameworks were created to make this kind of work a little easier — they exist to provide a better developer experience. They don't bring brand-new powers to JavaScript; they give you easier access to JavaScript's powers so you can build for today's web.

+ +

If you want to see code samples from this section in action, you can check out a working version of the app on CodePen, which also allows users to add and delete new tasks.

+ +

Read more about the JavaScript used in this section:

+ + + +

另一种打造UIs的方式

+ +

Every JavaScript framework offers a way to write user interfaces more declaratively. That is, they allow you to write code that describes how your UI should look, and the framework makes it happen in the DOM behind the scenes.

+ +

The vanilla JavaScript approach to building out new DOM elements in repetition was difficult to understand at a glance.  By contrast, the following block of code illustrates the way you might use Vue to describe our list of tasks:

+ +
<ul>
+  <li v-for="task in tasks" v-bind:key="task.id">
+    <span>\{{task.name\}}</span>
+    <button type="button">Delete</button>
+  </li>
+</ul>
+ +

That's it. This snippet reduces approximately thirty-two lines of code down to six lines. If the curly braces and v- attributes here are unfamiliar to you, that's okay; you’ll learn about Vue-specific syntax later on in the module. The thing to take away here is that this code looks like the UI it represents, whereas the vanilla JavaScript code does not.

+ +

Thanks to Vue, we didn't have to write our own functions for building the UI; the framework will handle that for us in an optimized, efficient way. Our only role here was to describe to Vue what each item should look like. Developers who are familiar with Vue can join our project and quickly work out what is going on. Vue is not alone in this: using a framework improves team as well as individual efficiency.

+ +

It's possible to do things similar to this in vanilla JavaScript. Template literal strings make it easy to write strings of HTML that represent what the final element would look like. That might be a useful idea for something as simple as our to-do list application, but it's not maintainable for large applications that manage thousands of records of data, and could render just as many unique elements in a user interface.

+ +

框架提供给我们的其他功能

+ +

Let's look at some of the other advantages conferred upon us by frameworks. As we've alluded to before, the advantages of frameworks are achievable in vanilla JavaScript, but using a framework takes away all of the cognitive load of having to solve these problems yourself.

+ +

Tooling

+ +

Because each of the frameworks in this module have a large, active community, each framework's ecosystem provides tooling that Improves the developer experience. These tools make it easy to add things like testing (to ensure that your application behaves as it should) or linting (to ensure that your code is error-free and stylistically consistent).

+ +
+

Note: If you want to find out more details about web tooling concepts, have a read of our Client-side tooling overview.

+
+ +

Compartmentalization

+ +

Most major frameworks encourage developers to abstract the different parts of their user interfaces into components — maintainable, reusable chunks of code that can communicate with one another. All the code related to a given component can live in one file (or a couple of specific files), so that you as a developer know exactly where to go to make changes to that component. In a vanilla JavaScript app, you'd have to create your own set of conventions to achieve this in an efficient, scalable way. Many JavaScript developers, if left to their own devices, could end up with all the code related to one part of the UI being spread out all over a file — or in another file altogether.

+ +

Routing

+ +

The most essential feature of the web is that it allows users to navigate from one page to another – it is, after all, a network of interlinked documents. When you follow a link on this very website, your browser communicates with a server and fetches new content to display for you. As it does so, the URL in your address bar changes. You can save this new URL and come back to the page later on, or share it with others so they can easily find the same page. Your browser remembers your navigation history and allows you to navigate back and forth, too. This is called server-side routing.

+ +

Modern web applications typically do not fetch and render new HTML files — they load a single HTML shell, and continually update the DOM inside it (referred to as single page apps, or SPAs) without navigating users to new addresses on the web. Each new pseudo-webpage is usually called a view, and by default, no routing is done.

+ +

When an SPA is complex enough, and renders enough unique views, it's important to bring routing functionality into your application. People are used to being able to link to specific pages in an application, travel forward and backward in their navigation history, etc., and their experience suffers when these standard web features are broken. When routing is handled by a client application in this fashion, it is aptly called client-side routing.

+ +

It's possible to make a router using the native capabilities of JavaScript and the browser, but popular, actively developed frameworks have companion libraries that make routing a more intuitive part of the development process.

+ +

使用框架的注意事项

+ +

Being an effective web developer means using the most appropriate tools for the job. JavaScript frameworks make front-end application development easy, but they are not a silver bullet that will solve all problems. This section talks about some of the things you should consider when using frameworks. Bear in mind that you might not need a framework at all — beware that you don't end up using a framework just for the sake of it.

+ +

Familiarity with the tool

+ +

Just like vanilla JavaScript, frameworks take time to learn and have their quirks. Before you decide to use a framework for a project, be sure you have time to learn enough of its features for it to be useful to you rather than it working against you, and be sure that your teammates are comfortable with it as well.

+ +

Overengineering

+ +

If your web development project is a personal portfolio with a few pages, and those pages have little or no interactive capability, a framework (and all of its JavaScript) may not be necessary at all. That said, frameworks are not a monolith, and some of them are better-suited to small projects than others. In an article for Smashing Magazine, Sarah Drasner writes about how Vue can replace jQuery as a tool for making small portions of a webpage interactive.

+ +

Larger code base and abstraction

+ +

Frameworks allow you to write more declarative code – and sometimes less code overall – by dealing with the DOM interactions for you, behind the scenes. This abstraction is great for your experience as a developer, but it isn't free. In order to translate what you write into DOM changes, frameworks have to run their own code, which in turn makes your final piece of software larger and more computationally expensive to operate.

+ +

Some extra code is inevitable, and a framework that supports tree-shaking (removal of any code that isn't actually used in the app during the build process) will allow you to keep your applications small, but this is still a factor you need to keep in mind when considering your app's performance, especially on more network/storage-constrained devices, like mobile phones.

+ +

The abstraction of frameworks affects not only your JavaScript, but your relationship with the very nature of the web. No matter how you build for the web, the end result, the layer that your users ultimately interact with, is HTML. Writing your whole application in JavaScript can make you lose sight of HTML and the purpose of its various tags, and lead you to produce an HTML document that is un-semantic and inaccessible. In fact, it's possible to write a fragile application that depends entirely on JavaScript and will not function without it.

+ +

Frameworks are not the source of our problems. With the wrong priorities, it's possible for any application to be fragile, bloated, and inaccessible. Frameworks do, however, amplify our priorities as developers. If your priority is to make a complex web app, it's easy to do that. However, if your priorities don't carefully guard performance and accessibility, frameworks will amplify your fragility, your bloat, and your inaccessibility. Modern developer priorities, amplified by frameworks, have inverted the structure of the web in many places. Instead of a robust, content-first network of documents, the web now often puts JavaScript first and user experience last.

+ +

框架驱动页面的可访问性

+ +

Let's build on what we said in the previous section, and talk a bit more about accessibility. Making user interfaces accessible always requires some thought and effort, and frameworks can complicate that process. You often have to employ advanced framework APIs to access native browser features like ARIA live regions or focus management.

+ +

In some cases, framework applications create accessibility barriers that do not exist for traditional websites. The biggest example of this is in client-side routing, as mentioned earlier.

+ +

With traditional (server-side) routing, navigating the web has predictable results. The browser knows to set focus to the top of the page and assistive technologies will announce the title of the page. These things happen every time you navigate to a new page.

+ +

With client-side routing, your browser is not loading new web pages, so it doesn't know that it should automatically adjust focus or announce a new page title. Framework authors have devoted immense time and labor to writing JavaScript that recreates these features, and even then, no framework has done so perfectly.

+ +

The upshot is that you should consider accessibility from the very start of every web project, but bear in mind that abstracted codebases that use frameworks are more likely to suffer from major accessibility issues if you don't.

+ +

如何选择一个框架

+ +

Each of the frameworks discussed in this module take different approaches to web application development. Each is regularly improving or changing, and each has its pros and cons. Choosing the right framework is a team- and project-dependent process, and you should do your own research to uncover what suits your needs. That said, we've identified a few questions you can ask in order to research your options more effectively:

+ +
    +
  1. What browsers does the framework support?
    2. +
  2. What domain-specific languages does the framework utilize?
    3. +
  3. Does the framework have a strong community and good docs (and other support) available?
    4. +
+ +

The table in this section provides a glanceable summary of the current browser support offered by each framework, as well as the domain-specific languages with which it can be used.

+ +

Broadly, domain-specific languages (DSLs) are programming languages relevant in specific areas of software development. In the context of frameworks, DSLs are variations on JavaScript or HTML that make it easier to develop with that framework. Crucially, none of the frameworks require a developer to use a specific DSL, but they have almost all been designed with a specific DSL in mind. Choosing not to employ a framework’s preferred DSL will mean you miss out on features that would otherwise improve your developer experience.

+ +

You should seriously consider the support matrix and DSLs of a framework when making a choice for any new project. Mismatched browser support can be a barrier to your users; mismatched DSL support can be a barrier to you and your teammates.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FrameworkBrowser supportPreferred DSLSupported DSLs
AngularIE9+TypeScriptHTML-based; TypeScript
ReactModern (IE9+ with Polyfills)JSXJSX; TypeScript
VueIE9+HTML-basedHTML-based, JSX, Pug
EmberModern (IE9+ in Ember version 2.18)HandlebarsHandlebars, TypeScript
+ +
+

Note: DSLs we've described as "HTML-based" do not have official names. They are not really true DSLs, but they are non-standard HTML, so we believe they are worth highlighting.

+
+ +

Citations for this table:

+ + + +

Does the framework have a strong community?

+ +

This is perhaps the hardest metric to measure, because community size does not correlate directly to easy-to-access numbers. You can check a project's number of GitHub stars or weekly npm downloads to get an idea of its popularity, but sometimes the best thing to do is search a few forums or talk to other developers. It is not just about the community's size, but also how welcoming and inclusive it is, and how good available documentation is.

+ +

Opinions on the web

+ +

Don't just take our word on this matter — there are discussions all over the web. The Wikimedia Foundation recently chose to use Vue for its front-end, and posted a request for comments (RFC) on framework adoption. Eric Gardner, the author of the RFC, took time to outline the needs of the Wikimedia project and why certain frameworks were good choices for the team. This RFC serves as a great example of the kind of research you should do for yourself when planning to use a front-end framework.

+ +

The State of JavaScript survey is a helpful collection of feedback from JavaScript developers. It covers many topics related to JavaScript, including data about both the use of frameworks and developer sentiment toward them. Currently, there are several years of data available, allowing you to get a sense of a framework's popularity.

+ +

The Vue team has exhaustively compared Vue to other popular frameworks. There may be some bias in this comparison (which they note), but it's a valuable resource nonetheless.

+ +

客户端框架的替代方案

+ +

If you’re looking for tools to expedite the web development process, and you know your project isn’t going to require intensive client-side JavaScript, you could reach for one of a handful of other solutions for building the web:

+ + + +

Content management systems

+ +

Content-management systems (CMSes) are any tools that allow a user to create content for the web without directly writing code themselves. They're a good solution for large projects, especially projects that require input from content writers who have limited coding ability, or for programmers who want to save time. They do, however, require a significant amount of time to set up, and utilizing a CMS means that you surrender at least some measure of control over the final output of your website. For example: if your chosen CMS doesn't author accessible content by default, it's often difficult to improve this.

+ +

Popular examples include Wordpress, Joomla, and Drupal.

+ +

Server-side rendering

+ +

Server-side rendering (SSR) is an application architecture in which it is the server's job to render a single-page application. This is the opposite of client-side rendering, which is the most common and most straightforward way to build a JavaScript application. Server-side rendering is easier on the client's device, because you're only sending a rendered HTML file to them, but it can be difficult to set up compared to a client-side-rendered application.

+ +

All of the frameworks covered in this module support server-side rendering as well as client-side rendering. Check out Next.js for React, Nuxt.js for Vue (yes it is confusing, and no, these projects are not related!), FastBoot for Ember, and Angular Universal for Angular.

+ +
+

Note: Some SSR solutions are written and maintained by the community, whereas some are "official" solutions provided by the framework's maintainer.

+
+ +

Static site generators

+ +

Static site generators are programs that dynamically generate all the webpages of a multi-page website — including any relevant CSS or JavaScript — so that they can be published in any number of places. The publishing host could be a GitHub pages branch, a Netlify instance, or any private server of your choosing, for example. There are a number of advantages of this approach, mostly around performance (your user's device isn’t building the page with JavaScript; it's already complete) and security (static pages have fewer attack vectors). These sites can still utilize JavaScript where they need to, but they are not dependent upon it. Static site generators take time to learn, just like any other tool, which can be a barrier to your development process.

+ +

Static sites can have as few or as many unique pages as you want. Just as frameworks empower you to quickly write client-side JavaScript applications, static site generators allow you a way to quickly create HTML files you would otherwise have written individually. Like frameworks, static site generators allow developers to write components that define common pieces of your web pages, and to compose those components together to create a final page. In the context of static site generators, these components are called templates. Web pages built by static site generators can even be home to framework applications: if you want one specific page of your statically-generated website to boot up a React application when your user visits it for example, you can do that.

+ +

Static site generators have been around for quite a long time, but they have seen a bit of a revival in the recent history of the web. A handful of powerful options are now available, such as Hugo, Jekyll, Eleventy, and Gatsby.

+ +

If you'd like to learn more about static site generators on the whole, check out Tatiana Mac's Beginner's guide to Eleventy. In the first article of the series, she explains what a static site generator is, and how it relates to other means of publishing web content.

+ +

总结

+ +

And that brings us to the end of our introduction to frameworks — we’ve not taught you any code yet, but hopefully we've given you a useful background on why you'd use frameworks in the first place and how to go about choosing one, and made you excited to learn more and get stuck in!

+ +

Our next article goes down to a lower level, looking at the specific kinds of features frameworks tend to offer, and why they work like they do.

+ +

{{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

+ +

In this module

+ + diff --git "a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/\344\273\213\347\273\215/index.html" "b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/\344\273\213\347\273\215/index.html" deleted file mode 100644 index 3975354417..0000000000 --- "a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/\344\273\213\347\273\215/index.html" +++ /dev/null @@ -1,393 +0,0 @@ ---- -title: 客户端框架介绍 -slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/介绍 -tags: - - JavaScript - - 初学者 - - 学习 - - 客户端 - - 框架 -translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
- -

在本章节我们开始大致了解框架, 简要回顾JavaScript和框架的历史,为什么框架会存在以及它们提供了什么, 如何开始考虑选择一个框架并学习, 以及对于客户端框架还有什么替代方案.

- - - - - - - - - - - - -
先决条件：熟悉 HTML, CSS, 以及 JavaScript 语言的核心.
目标:了解客户端JavaScript框架是如何存在的，它们能解决什么问题，还有哪些替代方案，以及如何选择一个框架.
- -

简史

- -

当JavaScript在1996被发布后, 它给网络增加了少许的交互性和乐趣, 直到那时, 网页仍由静态文档组成. 网络应该不仅仅是阅读,更是创造的地方. 随着JavaScript的流行. 使用JavaScript的开发者们创造工具来解决他们遇到的问题, 并且将其打包成称为库的可复用组件, 这样就能和他人共享解决方案. 这种共享库的体系帮助塑造了网络的增长.

- -

现在, JavaScript是网络的基本部分, used on 95% of all websites, 而且网络又是现代生活的基本部分. 用户在网络上写文章, 管理预算, 听音乐, 看电影,  以及和相隔万里的人通过文字, 音频, 视频聊天来瞬时交流. 网络让我们能够做到那些过去只能在电脑上安装本地应用程序才能做到的事. 这些现代的, 复杂的, 具有交互性的网站通常被称为 网络应用程序.

- -

现代JavaScript框架的到来加快了打造高度动态化和交互性强的应用程序的速度.  框架 就是提供该如何构建应用程序的意见的库。这些意见能使应用具有可预测性和同质性。可预测性让软件能在扩展到很大规模的同时仍保持可维护性。可预测性和可维护性对于一个软件的长久健康运行是十分重要的。

- -

在现代网络中，JavaScript框架为众多令人印象深刻的软件提供支持——包括许多你可能每天都使用的网站。你正在阅读的这个MDN Web 文档页面, 就是使用React / ReactDOM框架为其前端提供动力。

- -

有哪些框架?

- -

有很多框架可供你选择，但以下主要介绍目前公认的“四大框架”。

- -

Ember

- -

Ember于2011年12月发布，最初作为SproutCore项目的延续而开始。比其新式的替代品（例如React和Vue），作为老框架它的用户人数要少得多。但因其稳定性、社区支持以及一些明智的编程原则，它仍然享有很高的知名度。

- -

Angular

- -

Angular 是一个开源 Web 应用程序框架，正式发布于2016年9月14日。它由构建 AngularJS 的团队完全重写，并由 Google 的 Angular 团队以及个人和公司社区共同领导。

- -

Angular 是一种基于组件的框架，使用声明式的HTML模板。在应用构建时，框架的编译器将 HTML 模板转换为优化好的 JavaScript 指令，这一过程对开发者是透明的。Angular 使用 TypeScript，它是 JavaScript 的超集，我们将在下一章中对其进行更多介绍。

- -

Vue

- -

Evan You first released Vue in 2014, after working on and learning from the original AngularJS project. Vue is the youngest of the big four, but has enjoyed a recent uptick in popularity.

- -

Vue, like AngularJS, extends HTML with some of its own code. Apart from that, it mainly relies on modern, standard JavaScript.

- -

React

- -

Facebook 在 2013 发布了 React。 在当时 React 已经被Facebook内部用来解决许多问题。 严格来说 React 本身并不是框架，而是一个用来渲染UI 组件的库。 React is used in combination with other libraries to make applications — React and React Native enable developers to make mobile applications; React and ReactDOM enables them to make web applications, etc.

- -

Because React and ReactDOM are so often used together, React is colloquially understood as a JavaScript framework. As you read through this module, we will be working with that colloquial understanding.

- -

React extends JavaScript with HTML-like syntax, known as JSX.

- -

框架为何会存在?

- -

我们已经讨论了因为什么契机而创造了框架，但我们仍不知道为什么开发者认为有必要创造它。要知道这个问题的答案，我们首先需要检查软件开发中的各种挑战。

- -

设想一个很常见的软件：一个To-Do清单创建器，在接下来的章节中我们会使用各种框架来实现它。这个应用应让用户可以完成诸如呈现任务列表、添加和删除任务等操作，且在完成这些操作的同时能可靠地跟踪和更新应用程序的底层数据。在软件开发中，这种底层数据被称为状态。

- -

上述每个目标理论上都很简单。我们可以遍历数据来列出清单，添加一个对象来创建新任务，使用标识符来查找、编辑和删除任务。需要注意的是，用户都是在浏览器中使用应用的这些功能，然而这就引出了一些问题： 每当我们修改应用的数据时，我们都需要更新用户界面以使其匹配。 

- -

我们可以通过To-Do应用的一个功能来检验这个问题的难点：呈现任务清单。

- -

冗长的DOM操作

- -

Building HTML elements and rendering them in the browser at the appropriate time takes a surprising amount of code. Let's say that our state is an array of objects structured like this:

- -
const state = [
-  {
-    id: 'todo-0',
-    name: 'Learn some frameworks!'
-  }
-]
- -

How do we show one of those tasks to our user? We want to represent each task as a list item – an HTML <li> element inside of an unordered list element (a <ul>). How do we make it? That could look something like this:

- -
function buildTodoItemEl(id, name) {
-  const item = document.createElement('li');
-  const span = document.createElement('span');
-  const textContent = document.createTextNode(name);
-
-  span.appendChild(textContent)
-
-  item.id = id;
-  item.appendChild(span);
-  item.appendChild(buildDeleteButtonEl(id));
-
-  return item;
-}
- -

Here, we use the document.createElement() method to make our <li>, and several more lines of code to create the properties and children it needs.

- -

The tenth line of this snippet references another build function: buildDeleteButtonEl(). It follows a similar pattern to the one we used to build a list item element:

- -
function buildDeleteButtonEl(id) {
-  const button = document.createElement('button');
-  const textContent = document.createTextNode('Delete');
-
-  button.setAttribute('type', 'button');
-  button.appendChild(textContent);
-
-  return button;
-}
- -

This button doesn't do anything yet, but it will later once we decide to implement our delete feature. The code that will render our items on the page might read something like this:

- -
function renderTodoList() {
-  const frag = document.createDocumentFragment();
-  state.tasks.forEach(task => {
-    const item = buildTodoItemEl(task.id, task.name);
-    frag.appendChild(item);
-  });
-
-  while (todoListEl.firstChild) {
-    todoListEl.removeChild(todoListEl.firstChild);
-  }
-  todoListEl.appendChild(frag);
-}
- -

We've now got well over thirty lines of code dedicated just to the UI – just to the step of rendering something in the DOM – and at no point do we add classes that we could use later to style our list-items!

- -

Working directly with the DOM, as in this example, requires understanding many things about how the DOM works: how to make elements; how to change their properties; how to put elements inside of each other; how to get them on the page. None of this code actually handles user interactions, or addresses adding or deleting a task. If we add those features, we have to remember to update our UI in the right time and in the right way.

- -

JavaScript frameworks were created to make this kind of work a little easier — they exist to provide a better developer experience. They don't bring brand-new powers to JavaScript; they give you easier access to JavaScript's powers so you can build for today's web.

- -

If you want to see code samples from this section in action, you can check out a working version of the app on CodePen, which also allows users to add and delete new tasks.

- -

Read more about the JavaScript used in this section:

- - - -

另一种打造UIs的方式

- -

Every JavaScript framework offers a way to write user interfaces more declaratively. That is, they allow you to write code that describes how your UI should look, and the framework makes it happen in the DOM behind the scenes.

- -

The vanilla JavaScript approach to building out new DOM elements in repetition was difficult to understand at a glance.  By contrast, the following block of code illustrates the way you might use Vue to describe our list of tasks:

- -
<ul>
-  <li v-for="task in tasks" v-bind:key="task.id">
-    <span>\{{task.name\}}</span>
-    <button type="button">Delete</button>
-  </li>
-</ul>
- -

That's it. This snippet reduces approximately thirty-two lines of code down to six lines. If the curly braces and v- attributes here are unfamiliar to you, that's okay; you’ll learn about Vue-specific syntax later on in the module. The thing to take away here is that this code looks like the UI it represents, whereas the vanilla JavaScript code does not.

- -

Thanks to Vue, we didn't have to write our own functions for building the UI; the framework will handle that for us in an optimized, efficient way. Our only role here was to describe to Vue what each item should look like. Developers who are familiar with Vue can join our project and quickly work out what is going on. Vue is not alone in this: using a framework improves team as well as individual efficiency.

- -

It's possible to do things similar to this in vanilla JavaScript. Template literal strings make it easy to write strings of HTML that represent what the final element would look like. That might be a useful idea for something as simple as our to-do list application, but it's not maintainable for large applications that manage thousands of records of data, and could render just as many unique elements in a user interface.

- -

框架提供给我们的其他功能

- -

Let's look at some of the other advantages conferred upon us by frameworks. As we've alluded to before, the advantages of frameworks are achievable in vanilla JavaScript, but using a framework takes away all of the cognitive load of having to solve these problems yourself.

- -

Tooling

- -

Because each of the frameworks in this module have a large, active community, each framework's ecosystem provides tooling that Improves the developer experience. These tools make it easy to add things like testing (to ensure that your application behaves as it should) or linting (to ensure that your code is error-free and stylistically consistent).

- -
-

Note: If you want to find out more details about web tooling concepts, have a read of our Client-side tooling overview.

-
- -

Compartmentalization

- -

Most major frameworks encourage developers to abstract the different parts of their user interfaces into components — maintainable, reusable chunks of code that can communicate with one another. All the code related to a given component can live in one file (or a couple of specific files), so that you as a developer know exactly where to go to make changes to that component. In a vanilla JavaScript app, you'd have to create your own set of conventions to achieve this in an efficient, scalable way. Many JavaScript developers, if left to their own devices, could end up with all the code related to one part of the UI being spread out all over a file — or in another file altogether.

- -

Routing

- -

The most essential feature of the web is that it allows users to navigate from one page to another – it is, after all, a network of interlinked documents. When you follow a link on this very website, your browser communicates with a server and fetches new content to display for you. As it does so, the URL in your address bar changes. You can save this new URL and come back to the page later on, or share it with others so they can easily find the same page. Your browser remembers your navigation history and allows you to navigate back and forth, too. This is called server-side routing.

- -

Modern web applications typically do not fetch and render new HTML files — they load a single HTML shell, and continually update the DOM inside it (referred to as single page apps, or SPAs) without navigating users to new addresses on the web. Each new pseudo-webpage is usually called a view, and by default, no routing is done.

- -

When an SPA is complex enough, and renders enough unique views, it's important to bring routing functionality into your application. People are used to being able to link to specific pages in an application, travel forward and backward in their navigation history, etc., and their experience suffers when these standard web features are broken. When routing is handled by a client application in this fashion, it is aptly called client-side routing.

- -

It's possible to make a router using the native capabilities of JavaScript and the browser, but popular, actively developed frameworks have companion libraries that make routing a more intuitive part of the development process.

- -

使用框架的注意事项

- -

Being an effective web developer means using the most appropriate tools for the job. JavaScript frameworks make front-end application development easy, but they are not a silver bullet that will solve all problems. This section talks about some of the things you should consider when using frameworks. Bear in mind that you might not need a framework at all — beware that you don't end up using a framework just for the sake of it.

- -

Familiarity with the tool

- -

Just like vanilla JavaScript, frameworks take time to learn and have their quirks. Before you decide to use a framework for a project, be sure you have time to learn enough of its features for it to be useful to you rather than it working against you, and be sure that your teammates are comfortable with it as well.

- -

Overengineering

- -

If your web development project is a personal portfolio with a few pages, and those pages have little or no interactive capability, a framework (and all of its JavaScript) may not be necessary at all. That said, frameworks are not a monolith, and some of them are better-suited to small projects than others. In an article for Smashing Magazine, Sarah Drasner writes about how Vue can replace jQuery as a tool for making small portions of a webpage interactive.

- -

Larger code base and abstraction

- -

Frameworks allow you to write more declarative code – and sometimes less code overall – by dealing with the DOM interactions for you, behind the scenes. This abstraction is great for your experience as a developer, but it isn't free. In order to translate what you write into DOM changes, frameworks have to run their own code, which in turn makes your final piece of software larger and more computationally expensive to operate.

- -

Some extra code is inevitable, and a framework that supports tree-shaking (removal of any code that isn't actually used in the app during the build process) will allow you to keep your applications small, but this is still a factor you need to keep in mind when considering your app's performance, especially on more network/storage-constrained devices, like mobile phones.

- -

The abstraction of frameworks affects not only your JavaScript, but your relationship with the very nature of the web. No matter how you build for the web, the end result, the layer that your users ultimately interact with, is HTML. Writing your whole application in JavaScript can make you lose sight of HTML and the purpose of its various tags, and lead you to produce an HTML document that is un-semantic and inaccessible. In fact, it's possible to write a fragile application that depends entirely on JavaScript and will not function without it.

- -

Frameworks are not the source of our problems. With the wrong priorities, it's possible for any application to be fragile, bloated, and inaccessible. Frameworks do, however, amplify our priorities as developers. If your priority is to make a complex web app, it's easy to do that. However, if your priorities don't carefully guard performance and accessibility, frameworks will amplify your fragility, your bloat, and your inaccessibility. Modern developer priorities, amplified by frameworks, have inverted the structure of the web in many places. Instead of a robust, content-first network of documents, the web now often puts JavaScript first and user experience last.

- -

框架驱动页面的可访问性

- -

Let's build on what we said in the previous section, and talk a bit more about accessibility. Making user interfaces accessible always requires some thought and effort, and frameworks can complicate that process. You often have to employ advanced framework APIs to access native browser features like ARIA live regions or focus management.

- -

In some cases, framework applications create accessibility barriers that do not exist for traditional websites. The biggest example of this is in client-side routing, as mentioned earlier.

- -

With traditional (server-side) routing, navigating the web has predictable results. The browser knows to set focus to the top of the page and assistive technologies will announce the title of the page. These things happen every time you navigate to a new page.

- -

With client-side routing, your browser is not loading new web pages, so it doesn't know that it should automatically adjust focus or announce a new page title. Framework authors have devoted immense time and labor to writing JavaScript that recreates these features, and even then, no framework has done so perfectly.

- -

The upshot is that you should consider accessibility from the very start of every web project, but bear in mind that abstracted codebases that use frameworks are more likely to suffer from major accessibility issues if you don't.

- -

如何选择一个框架

- -

Each of the frameworks discussed in this module take different approaches to web application development. Each is regularly improving or changing, and each has its pros and cons. Choosing the right framework is a team- and project-dependent process, and you should do your own research to uncover what suits your needs. That said, we've identified a few questions you can ask in order to research your options more effectively:

- -
    -
  1. What browsers does the framework support?
    2. -
  2. What domain-specific languages does the framework utilize?
    3. -
  3. Does the framework have a strong community and good docs (and other support) available?
    4. -
- -

The table in this section provides a glanceable summary of the current browser support offered by each framework, as well as the domain-specific languages with which it can be used.

- -

Broadly, domain-specific languages (DSLs) are programming languages relevant in specific areas of software development. In the context of frameworks, DSLs are variations on JavaScript or HTML that make it easier to develop with that framework. Crucially, none of the frameworks require a developer to use a specific DSL, but they have almost all been designed with a specific DSL in mind. Choosing not to employ a framework’s preferred DSL will mean you miss out on features that would otherwise improve your developer experience.

- -

You should seriously consider the support matrix and DSLs of a framework when making a choice for any new project. Mismatched browser support can be a barrier to your users; mismatched DSL support can be a barrier to you and your teammates.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FrameworkBrowser supportPreferred DSLSupported DSLs
AngularIE9+TypeScriptHTML-based; TypeScript
ReactModern (IE9+ with Polyfills)JSXJSX; TypeScript
VueIE9+HTML-basedHTML-based, JSX, Pug
EmberModern (IE9+ in Ember version 2.18)HandlebarsHandlebars, TypeScript
- -
-

Note: DSLs we've described as "HTML-based" do not have official names. They are not really true DSLs, but they are non-standard HTML, so we believe they are worth highlighting.

-
- -

Citations for this table:

- - - -

Does the framework have a strong community?

- -

This is perhaps the hardest metric to measure, because community size does not correlate directly to easy-to-access numbers. You can check a project's number of GitHub stars or weekly npm downloads to get an idea of its popularity, but sometimes the best thing to do is search a few forums or talk to other developers. It is not just about the community's size, but also how welcoming and inclusive it is, and how good available documentation is.

- -

Opinions on the web

- -

Don't just take our word on this matter — there are discussions all over the web. The Wikimedia Foundation recently chose to use Vue for its front-end, and posted a request for comments (RFC) on framework adoption. Eric Gardner, the author of the RFC, took time to outline the needs of the Wikimedia project and why certain frameworks were good choices for the team. This RFC serves as a great example of the kind of research you should do for yourself when planning to use a front-end framework.

- -

The State of JavaScript survey is a helpful collection of feedback from JavaScript developers. It covers many topics related to JavaScript, including data about both the use of frameworks and developer sentiment toward them. Currently, there are several years of data available, allowing you to get a sense of a framework's popularity.

- -

The Vue team has exhaustively compared Vue to other popular frameworks. There may be some bias in this comparison (which they note), but it's a valuable resource nonetheless.

- -

客户端框架的替代方案

- -

If you’re looking for tools to expedite the web development process, and you know your project isn’t going to require intensive client-side JavaScript, you could reach for one of a handful of other solutions for building the web:

- - - -

Content management systems

- -

Content-management systems (CMSes) are any tools that allow a user to create content for the web without directly writing code themselves. They're a good solution for large projects, especially projects that require input from content writers who have limited coding ability, or for programmers who want to save time. They do, however, require a significant amount of time to set up, and utilizing a CMS means that you surrender at least some measure of control over the final output of your website. For example: if your chosen CMS doesn't author accessible content by default, it's often difficult to improve this.

- -

Popular examples include Wordpress, Joomla, and Drupal.

- -

Server-side rendering

- -

Server-side rendering (SSR) is an application architecture in which it is the server's job to render a single-page application. This is the opposite of client-side rendering, which is the most common and most straightforward way to build a JavaScript application. Server-side rendering is easier on the client's device, because you're only sending a rendered HTML file to them, but it can be difficult to set up compared to a client-side-rendered application.

- -

All of the frameworks covered in this module support server-side rendering as well as client-side rendering. Check out Next.js for React, Nuxt.js for Vue (yes it is confusing, and no, these projects are not related!), FastBoot for Ember, and Angular Universal for Angular.

- -
-

Note: Some SSR solutions are written and maintained by the community, whereas some are "official" solutions provided by the framework's maintainer.

-
- -

Static site generators

- -

Static site generators are programs that dynamically generate all the webpages of a multi-page website — including any relevant CSS or JavaScript — so that they can be published in any number of places. The publishing host could be a GitHub pages branch, a Netlify instance, or any private server of your choosing, for example. There are a number of advantages of this approach, mostly around performance (your user's device isn’t building the page with JavaScript; it's already complete) and security (static pages have fewer attack vectors). These sites can still utilize JavaScript where they need to, but they are not dependent upon it. Static site generators take time to learn, just like any other tool, which can be a barrier to your development process.

- -

Static sites can have as few or as many unique pages as you want. Just as frameworks empower you to quickly write client-side JavaScript applications, static site generators allow you a way to quickly create HTML files you would otherwise have written individually. Like frameworks, static site generators allow developers to write components that define common pieces of your web pages, and to compose those components together to create a final page. In the context of static site generators, these components are called templates. Web pages built by static site generators can even be home to framework applications: if you want one specific page of your statically-generated website to boot up a React application when your user visits it for example, you can do that.

- -

Static site generators have been around for quite a long time, but they have seen a bit of a revival in the recent history of the web. A handful of powerful options are now available, such as Hugo, Jekyll, Eleventy, and Gatsby.

- -

If you'd like to learn more about static site generators on the whole, check out Tatiana Mac's Beginner's guide to Eleventy. In the first article of the series, she explains what a static site generator is, and how it relates to other means of publishing web content.

- -

总结

- -

And that brings us to the end of our introduction to frameworks — we’ve not taught you any code yet, but hopefully we've given you a useful background on why you'd use frameworks in the first place and how to go about choosing one, and made you excited to learn more and get stuck in!

- -

Our next article goes down to a lower level, looking at the specific kinds of features frameworks tend to offer, and why they work like they do.

- -

{{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

- -

In this module

- - diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html new file mode 100644 index 0000000000..704f595fb4 --- /dev/null +++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html @@ -0,0 +1,624 @@ +--- +title: 解决常见的可访问性问题 +slug: Learn/Tools_and_testing/Cross_browser_testing/可访问性 +tags: + - CSS + - CodingScripting + - HTML + - JavaScript + - 初学者 + - 可访问性 + - 学习 + - 工具 + - 文章 + - 测试 + - 跨浏览器 + - 键盘 +translation_of: Learn/Tools_and_testing/Cross_browser_testing/Accessibility +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}
+ +

接下来，我们将关注可访问性，提供关于一些常见问题的信息，如何进行简单测试以及如何使用审核/自动化工具来查找可访问性问题。

+ + + + + + + + + + + + +
前提:熟悉HTML, CSS,和JavaScript语言; 理解跨浏览器测试原理
目标:能够诊断常见的可访问性问题，并使用适当的工具和技术解决问题。
+ +

什么是可访问性？

+ +

当我们在web技术的背景下说可访问性时，大多数人立即想到确保残疾人可以使用网站/应用程序，例如：

+ + + +

但是，说可访问性仅与残疾人有关是错误的。实际上，可访问性的目的是使你的网站/应用程序在尽可能多的环境中被尽可能多的人使用，而不仅仅是那些使用高性能台式计算机的用户。极端的例子可能包括：

+ + + +

在某种程度上，本模块都是关于可访问性的 — 跨浏览器测试可确保你的网站可以被尽可能多的人使用。这篇可访问性是什么？ 更全面透彻地定义了什么是可访问性。

+ +

也就是说，本文将涵盖跨浏览器和有关残疾人的测试问题以及他们如何使用Web。我们在其他地方已经讨论过其他领域，例如响应式设计问题和性能。

+ +
+

Note: 就像Web开发中的许多事情一样，可访问性不是100%的成功或失败可以定义的；对于所有内容而言，几乎不可能实现100％的可访问性，尤其是当站点变得越来越复杂时。我们更多的是通过防御性编码并遵循最佳实践，努力使尽可能多的人可以访问尽可能多的内容。

+
+ +

常见可访问性问题

+ +

在本节中，我们将围绕Web可访问性，详细介绍与特定技术相关的一些主要问题、要遵循的最佳实践，以及可以进行的一些快速测试，以查看你的网站是否朝着正确的方向发展。

+ +
+

Note: 可访问性在道德上是正确的事情，对企业也有好处(残疾用户，移动用户等构成了重要的细分市场), 并且在世界许多地方，提供出来的网络媒体资源无法为残疾人服务也是违法的。阅读无障碍指南和法律获取更多相关信息。

+
+ +

HTML

+ +

HTML语义化 (语义化正确地使用HTML标签)对于可访问性来说是开箱即用的 — 这类内容可供无视障人士阅读（前提是你不会做任何愚蠢的事情，例如使文本变小或使用CSS隐藏它），也可被屏幕阅读器（从字面上读出网页的应用）之类的辅助技术使用，并赋予其他优势。

+ +

语义化结构

+ +

HTML语义化最重要的捷径是为你的内容使用标题和段落的结构；这是因为屏幕阅读器用户倾向于将文档标题用作导航，以更快地找到他们需要的内容。如果你的内容没有标题，那么他们将获得的是一大坨文字，没有任何可定位的标记。坏的例子和好的例子如下：

+ +
<font size="7">My heading</font>
+<br><br>
+This is the first section of my document.
+<br><br>
+I'll add another paragraph here too.
+<br><br>
+<font size="5">My subheading</font>
+<br><br>
+This is the first subsection of my document. I'd love people to be able to find this content!
+<br><br>
+<font size="5">My 2nd subheading</font>
+<br><br>
+This is the second subsection of my content. I think is more interesting than the last one.
+ +
<h1>My heading</h1>
+
+<p>This is the first section of my document.</p>
+
+<p>I'll add another paragraph here too.</p>
+
+<h2>My subheading</h2>
+
+<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>
+
+<h2>My 2nd subheading</h2>
+
+<p>This is the second subsection of my content. I think is more interesting than the last one.</p>
+ +

此外，你的内容应该在逻辑顺序上讲得通的 — 你总能在以后再为它们写CSS，但你应该在一开始就确定内容正确的顺序。

+ +

作为测试，你可以关闭网站的CSS，然后看看没有了CSS网站是否能被理解。你可以通过从代码中删除CSS来手动完成此操作，但是最简单的方法是使用浏览器功能，例如：

+ + + +

使用键盘

+ +

某些HTML功能可以使用键盘来选择 — 这是默认的，从早期web开始就是这样的。具有此功能的元素是允许用户与网页交互的常见元素，比如links, {{htmlelement("button")}}s, 以及表单元素，比如{{htmlelement("input")}}.

+ +

浏览native-keyboard-accessibility.html (查看源码) 尝试一下— 在新标签页中打开它，然后尝试按Tab键；按下几下后，你应该看到标签焦点开始在不同的可聚焦元素之间移动；在每个浏览器中，被聚焦的元素都被赋予突出的默认样式 (不同的浏览器表现略有不同) 以便你能分辨聚焦在哪个元素上。

+ +

+ +

然后，你可以按Enter / Return键来关注焦点链接，或者按一个按钮（我们已经包含一些JavaScript来使按钮提醒消息），或者在输入框开始输入文本，（其他表单元素具有不同的控件，例如{{htmlelement("select")}}元素可以使用向上和向下箭头键显示和循环显示其选项）。

+ +

请注意，不同的浏览器可能具有不同的键盘控制选项。大多数现代浏览器都遵循上述的标签模式（你也可以执行Shift + Tab来向后移动可聚焦元素），但是某些浏览器具有自己的特性：

+ + + +
+

重要: 你应该在所写的任何新页面上执行这种测试 — 确保可以通过键盘使用功能。

+
+ +

这个例子强调了正确使用语义元素的重要性。可以用CSS将任何元素的样式设置为看起来像链接或按钮，并使用JavaScript让其表现为像链接或按钮一样，但实际上它们不是链接或按钮，你将失去很多语义化元素带给你的可访问性。因此，尽量避免这样做。

+ +

另一个技巧 — 如我们的示例所示，你可以使用:focus伪类控制可聚焦元素在聚焦时的外观。最好将焦点和悬停样式加重显示，这样无论是使用鼠标还是键盘的用户，都能直观地察觉控件在被激活时将执行的操作

+ +
a:hover, input:hover, button:hover, select:hover,
+a:focus, input:focus, button:focus, select:focus {
+  font-weight: bold;
+}
+ +
+

Note: 如果你决定使用CSS删除默认的焦点样式，请确保将其替换为更适合你的设计的其他样式 — 这是一种非常有价值的可访问性工具，不应删除。

+
+ +

模拟键盘

+ +

有时可能无法使用键盘完成可访问性。你可能有一个语义不是很好的网站（也许你最终得到了一个糟糕的CMS网页，该CMS生成了由<div> 组成的按钮），或者你正在使用一个没有内置键盘可访问性的复杂控件，例如HTML5 {{htmlelement("video")}} 元素（令人惊奇的是，Opera是唯一允许你在<video>元素的默认浏览器控件之间进行制表的浏览器）。你有几种选择：

+ +
    +
  1. 使用<button>元素（默认情况下都是可以在button间使用Tab键）和JavaScript创建自定义控件，以连接其功能。有关此示例，请参见Creating a cross-browser video player。
    2. +
  2. 通过JavaScript创建键盘快捷键，因此当你按键盘上的某些键时，功能被激活。请参阅Desktop mouse and keyboard controls，以获取一些可用于任何目的（比如游戏）的例子。
    3. +
  3. 使用一些有趣的策略来伪造按钮行为。以我们的fake-div-buttons.html示例为例（查看源码）。这里我们通过为每个假按钮赋予属性tabindex="0"（请参阅​​WebAIM的tabindex文章以获取更多详细信息），使假的<div>按钮能够被聚焦（包括通过制表符）。这使我们可以跳到按钮上，但不能通过回车键激活它们。为此，我们必须添加以下JavaScript代码： + 
    document.onkeydown = function(e) {
+  if(e.keyCode === 13) { // The Enter/Return key
+    document.activeElement.onclick(e);
+  }
+};
    + 在这里，我们向document对象添加了一个监听器，以检测何时按下了键盘上的按钮。我们通过事件对象的keyCode属性检查按下了什么按钮；如果它是与回车键匹配的键码，则使用document.activeElement.onclick()运行存储在按钮的onclick处理程序中的函数。document.activeElement为我们提供了当前页面上被聚焦的元素。
    4. +
+ +
+

Note: 仅当你通过事件处理程序属性（例如onclick）设置原始事件处理程序时，此技术才有效。addEventListener将无法正常工作。重新构建功能会有很多额外的麻烦。并且肯定还有其他问题。最好能从根源解决问题，使用正确的语义化元素。

+
+ +

替代文本

+ +

替代文本对于可访问性非常重要 — 如果一个人有视觉或听觉障碍使他们无法看到或听到某些内容，那么这就是一个问题。可用的最简单的文本替代方法是alt属性，我们应该在所有包含相关内容的图像上包括该属性。其中应包含对图像的描述，该描述可在页面上成功传达其含义和内容，并由屏幕阅读器读取并读出给用户。

+ +
+

Note: 更多信息请阅读Text alternatives

+
+ +

可以通过多种方法来测试缺少的替代文本，例如，使用可访问性{{anch("审计工具")}}。

+ +

对于视频和音频内容，Alt文本稍微复杂一些。有一种方法可以定义文本轨道（例如，字幕）并在播放视频时以{{htmlelement("track")}}元素和WebVTT格式的形式显示它们（请参见Adding captions and subtitles to HTML5 video以获取详细信息）。这些功能的浏览器兼容性相当好，但是如果你想提供音频的替代文本或支持较旧的浏览器，则在页面某处或单独页面上显示一个简单的文本记录可能是个好主意。

+ +

元素关系和上下文

+ +

HTML中有某些功能和最佳实践，旨在提供元素之间的上下文和关系。三个最常见的示例是链接，表单标签和数据表。

+ +

使用屏幕阅读器的人们通常会使用一项共同的功能，即他们会拉出页面上所有链接的列表。在这种情况下，链接文本需要脱离上下文。例如，标记为“单击此处”，“单击此处”等的链接列表确实对可访问性不利。链接文本最好在上下文和上下文之外都有意义。

+ +

表单{{htmlelement("label")}}元素是允许我们使表单可访问的主要功能之一。表单的麻烦在于，你需要标签来说明应在每个表单输入中输入哪些数据。每个标签都必须包含在{{htmlelement("label")}}内，以将其明确链接到其对应的表单输入框（属性值的每个<label>的for属性值必须与表单元素id值匹配），即使源顺序不是完全合乎逻辑的，也能提供很好的可访问性。

+ +
+

Note: 更多关于链接文本和表单标签，请阅读有意义的文字标签

+
+ +

最后，简要介绍一下数据表。基本数据表可以用非常简单的标记编写（请参阅bad-table.html和源码)），但这存在问题 — 屏幕阅读器用户无法将行或列作为数据分组关联在一起，但你需要知道标题行是什么，以及标题行行的标题还是列的标题等。这些只能从可视化的表格才能知道。

+ +

相反，如果你看一下我们的punk-bands-complete.html示例（示例，源码），则可以在此处看到一些可访问性辅助，例如表头（{{htmlelement("th")}}和作用域属性），{{htmlelement("caption")}}元素等。

+ +
+

Note: 更多信息，请阅读可访问的表格

+
+ +

CSS

+ +

CSS往往提供的基本可访问性功能要比HTML少得多，但是如果使用不当，它仍然会对可访问性造成同样的损害。下面是一些涉及CSS的可访问性的点：

+ + + +

还有其他几个需要注意的地方。

+ +

颜色和颜色对比度

+ +

为你的网站选择配色方案时，应确保文本（前景）颜色与背景颜色形成鲜明对比。你的设计可能看起来很酷，但是如果视力障碍者（例如色盲）无法阅读你的内容，那就不好了。使用WebAIM的Color Contrast Checker之类的工具来检查你的方案是否有足够对比度。

+ +

另一个提示是不要仅依靠颜色来表示界标/信息，因为这对于看不见颜色的人来说是不好的。例如，不要将所需的表单字段标记为红色，而应使用星号和红色标记它们。

+ +
+

Note: 高对比度也可以让使用带有光滑屏幕的设备（例如智能手机或平板电脑）的人在明亮的环境（例如阳光）下可以更好地阅读页面。

+
+ +

隐藏的内容

+ +

在许多情况下，视觉设计要求并非一次显示所有内容。例如，在我们的Tabbed info box example“示例（查看源码）中，我们有三个信息面板，但是我们将它们放在彼此的顶部，用户可以通过单击以显示每个选项卡（也可以通过键盘访问 — 可以使用Tab键和回车键选择它们）。

+ +

+ +

屏幕阅读器用户根本不关心这些，只要源内容顺序有意义，他们就很满意，并且他们可以全部获取。绝对定位（在本示例中使用的定位）通常被视为隐藏内容以产生视觉效果的最佳机制之一，因为它不会阻止屏幕阅读器获取相关内容。

+ +

另一方面，你不应该使用{{cssxref("visibility")}}:hidden或者{{cssxref("display")}}:none, 因为它们会让屏幕阅读器取不到那些内容，除非你真的想让屏幕阅读器不读取那些内容。

+ +
+

Note: Invisible Content Just for Screen Reader Users有更多关于这个话题的详细信息

+
+ +

JavaScript

+ +

就可访问性而言，JavaScript具有与CSS相同的问题 — 如果使用不当或使用过度，可访问性可能会很糟糕。我们已经提到了与JavaScript相关的一些可访问性问题，主要是在HTML语义化那块 — 你应该始终使用适当的语义化HTML来在合适的地方实现功能，例如，适当地使用链接和按钮。尽量不要使用JavaScript代码中结合<div>元素来伪造功能 — 容易出错，并且比直接使用HTML标签还要做更多的工作。

+ +

简单的功能

+ +

通常，简单的功能只应使用HTML标签完成 — JavaScript仅用于增强功能，而不能用于实现简单功能。好的JavaScript用法包括：

+ + + +
+

Note: WebAIM的Accessible JavaScript提供了一些关于JavaScript可访问性注意事项的信息。

+
+ +

更复杂的JavaScript实现可能会带来可访问性问题 — 你需要尽力而为。例如，期望让使用WebGL编写的复杂3D游戏对盲人来说100％可访问性是不合理的，但是你可以实现键盘控件，以便非鼠标用户可以使用它，并使配色方案具有足够的对比度供有颜色分辨障碍的人使用。

+ +

复杂的功能

+ +

可访问性存在问题的主要领域之一是复杂的应用程序，其中涉及复杂的表单控件（例如日期选择器）和动态内容，内容会经常增量更新。

+ +

非自带的复杂的表单控件可能会存在问题，因为它们往往涉及大量嵌套的<div>，浏览器默认情况下不知道如何处理它们。如果你自己开发控件，则需要确保它们可以通过键盘访问。如果你使用的是某种第三方框架，请在开始使用之前仔细检查可用的选项以了解它们是否具有完备的可访问性。例如，Bootstrap就对可访问性有相当好的支持（尽管Rhiana Heath的Making Bootstrap a Little More Accessible探讨了它的一些问题（主要与色彩对比度有关），并着眼于一些解决方案）。

+ +

定期更新的动态内容可能会成为问题，因为屏幕阅读器用户可能会错过这些内容，尤其是在意外更新的情况下。如果你有一个包含主要内容面板的单页应用程序，该应用程序使用XMLHttpRequest或Fetch定期更新，那么屏幕阅读器用户可能会错过这些更新。

+ +

WAI-ARIA

+ +

你是否需要使用这种复杂的功能，或者使用普通的旧语义化HTML代替？如果确实需要复杂性，则应考虑使用WAI-ARIA（Accessible Rich Internet Applications - 可访问的互联网应用），该规范为诸如复杂的表单控件和更新面板之类的项目提供了语义（以新的HTML属性形式），这样大部分浏览器和屏幕阅读器就能理解内容。

+ +

要处理复杂的表单窗口小部件，你需要使用ARIA属性（例如roles）来声明窗口小部件中不同元素的角色（例如，它们是选项卡还是选项卡面板？），用aria-disabled来表示控件是否禁用等。

+ +

要处理内容定期更新的区域，可以使用aria-live属性，该属性标识更新区域。它的值指示屏幕阅读器如何处理更新内容：

+ + + +

例子如下：

+ +
<p><span id="LiveRegion1" aria-live="polite" aria-atomic="false"></span></p>
+ +

浏览Freedom Scientific的ARIA (Accessible Rich Internet Applications)动态更新区域示例 — 高亮显示的段落每10秒更新一次内容，屏幕阅读器应将此内容读出给用户。ARIA Live Regions - Atomic是另一个很有用的例子。

+ +

我们这里没有足够的空间来详细介绍WAI-ARIA，你可以在WAI-ARIA basics了解更多。

+ +

可访问性测试工具

+ +

现在，我们已经介绍了不同Web技术的可访问性注意事项，包括一些测试方法（例如键盘导航和颜色对比度检查器），让我们看一下在进行可访问性测试时可以使用的其他工具。

+ +

审计工具

+ +

你可以使用许多审计工具检查你的网页，这些审计工具将检查它们并返回页面上存在的可访问性问题列表。一些审计工具：

+ + + +

看下面的例子，我们用的是Tenon。

+ +
    +
  1. 访问Tenon主页。
    2. +
  2. 使用bad-semantics.html示例测试，输入链接地址并按下Analyse Your Webpage（译者注：开始分析你的网页）。
    3. +
  3. 下滑，直到你看到错误/描述部分，如下图。
    4. +
+ +

+ +

你还可以探索一些选项（请参阅页面顶部附近的Show Options（译者注：显示选项）链接），或者使用Tenon的API。

+ +
+

Note: 这些工具不足以单独解决你的所有可访问性问题。你需要将这些，知识和经验，用户测试等结合起来才能获得完整的解决方案。

+
+ +

自动化工具

+ +

Deque's aXe tool比我们上面提到的审计工具更优秀。和其他工具一样，它检查页面并返回可访问性错误。它很有用，可以提供浏览器扩展程序：

+ + + +

扩展程序将可访问性选项卡添加到浏览器开发人员工具。例如，我们安装了Firefox版本，然后使用它来审核bad-table.html示例。我们得到以下结果：

+ +

+ +

aXe也可以使用npm安装，并且可以与任务运行器（如Grunt 和Gulp），自动化框架（如Selenium和Cucumber），单元测试框架（如Jasmin）集成，以及更多其他功能（详见main aXe page ）。

+ +

屏幕阅读器

+ +

为了了解有严重视力障碍的人是如何浏览网页的，我们需要测试屏幕阅读器。有几款屏幕阅读器：

+ + + +

通常，屏幕阅读器是独立运行的应用程序，并且不仅仅支持阅读网页，也支持阅读其他应用程序。也有例外（比如ChromeVox是一个浏览器扩展程序）。不同的屏幕阅读器可能在控制键和表现上稍有不同，所以你必须查阅你选择的屏幕阅读器的文档来获取相关细节。总体来说他们是大同小异的。

+ +

一起看一下我们对几款不同的屏幕阅读器的测试。这将帮助你大致了解它们如何工作以及如何测试它们。

+ +
+

Note: WebAIM的 Designing for Screen Reader Compatibility提供了一些关于屏幕阅读器的使用和如何开发应用以最好的适用屏幕阅读器的信息。你也可以看下Screen Reader User Survey #6 Results这篇有关屏幕阅读器一些有趣的统计信息的文章。

+
+ +

VoiceOver

+ +

VoiceOver (VO)是Mac/iPhone/iPad上的免费应用，所以如果你使用苹果公司的产品，可以用VO来进行测试。 我们在Mac OS X 系统上测试了它。

+ +

按下Cmd + Fn + F5打开它。如果你之前没用过VO，将会出现一个可以选择是否开启VO的欢迎界面，并且还会有教程指导你如何使用。再次按下Cmd + Fn + F5可以关闭。

+ +
+

Note: 你应该至少看一遍教程，它对于你了解VO是非常有用的。

+
+ +

当VO开启时，你会看到一个会显示当前选中信息的黑色框在屏幕的左下角，除此之外屏幕显示大体还是相同的。当前选中的部分也会出现一个黑色的边框以进行高亮显示，这个黑色框就是VO的光标。

+ +

+ +

在使用中，你会用到"VO修饰键"，"VO修饰键"是一个单独键或组合键，当你使用VO的快捷键时，你需要额外按下这个"VO修饰键"。屏幕阅读器通常都会有修饰键，防止它们的快捷键和其他程序的快捷键冲突。VO的修饰键是CapsLock, 或Ctrl + Option。

+ +

VO有很多快捷键，我们没有全部列出来。只把测试网页可访问性常用的一些在下面列出了。表格里，"VO"代表"VO修饰键"。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
常用的VO快捷键
快捷键描述
VO + 方向键移动VO光标
VO + 空格键选择/激活高亮的部分，包括Rotor里的内容（关于Rotor见下面）
VO + Shift + 下移动到组合项目里（比如HTML表格，或表单等）。进入组合里，你能使用下面的快捷键。
VO + Shift + 上离开组合项目
VO + C(当在表格里面时) 阅读当前列的头部
VO + R(当在表格里面时) 阅读当前行的头部
VO + C + C (当在表格里面时) 阅读当前列，包括列头
VO + R + R (当在表格里面时) 阅读当前行，包括对应于每个小行的头
VO + 左, VO + 右(当在水平的选项卡里面时，比如日期选择或时间选择) 切换选项
VO + 上, VO + 下(当在垂直的选项卡里面时，比如日期选择或时间选择) 切换选项
VO + U使用Rotor。Rotor使用列表展示标题，链接，表单选项等，以便为我们提供便利的导航。
VO + 左, VO + 右(当在Rotor里) 切换到其他列表
VO + 上, VO + 下(当在Rotor里) 在当前列表里，切换到其他项
Esc(当在Rotor里) 推出Rotor
Ctrl(当VO阅读时) 暂停/继续
VO + Z重复上一句话
VO + D进入Mac的程序坞，你能选择运行哪个应用
+ +

看起来很多，但当你用起来时还好，因为VO通常会给你提醒，在哪里应该用哪个快捷键。现在试试运行VO，在{{anch("屏幕阅读器测试")}}屏幕阅读器测试章节做个测试吧。

+ +

NVDA

+ +

NVDA只能运行在Window系统，你需要安装它。

+ +
    +
  1. 在nvaccess.org下载。你能选择免费下载，或赞助后再下载；你需要在下载前提供你的邮箱地址。
    2. +
  2. 下载完成后，开始安装 - 双击安装程序，接受条款，一步步按提示来。
    3. +
  3. 双击NVDA程序或快捷方式，或者按下Ctrl + Alt + N打开它。你会看见欢迎界面。你能选择一些选项，然后按下OK继续。
    4. +
+ +

NVDA现在在你的电脑上开启了。

+ +

在使用中，你会用到"NVDA修饰键"，"NVDA修饰键"是一个单独键，当你使用NVDA的快捷键时，你需要额外按下这个"NVDA修饰键"。屏幕阅读器通常都会有修饰键，防止它们的快捷键和其他程序的快捷键冲突。NVDA的修饰键是Insert键（默认）, 或CapsLock键（在欢迎界面可以选择使用该键）。

+ +
+

Note: 关于高亮方面，NVDA比VoiceOver做的更好。当滚动过标题、列表等元素时，你选中的项目会被一个细微的边框包住以高亮，但不是对于所有元素都是这样的。如果你感觉迷失方向了，可以按Ctrl + F5刷新页面，并从顶部重新开始。

+
+ +

NVDA有很多快捷键，我们没有全部列出来。只把测试网页可访问性常用的一些在下面列出了。表格里，"NVDA"代表"NVDA修饰键"。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
常用的NVDA快捷键
快捷键描述
NVDA + Q关闭NVDA
NVDA + 上阅读当前行
NVDA + 下在当前位置开始阅读
上和下, 或者Shift + Tab 和Tab移动到上/下一项，开始阅读
左和右移动到当前项的上/下一个字符，开始阅读
Shift + H 和 H移动到上/下一标题，开始阅读
Shift + K 和 K移动到上/下一链接项，开始阅读
Shift + D 和 D移动到上/下一文档界标（比如<nav>），开始阅读
Shift + 1–6 和 1–6移动到上/下一标题（标题1 - 6），开始阅读
Shift + F 和 F移动到上/下一表单选项，聚焦
Shift + T 和 T移动到上/下一数据表，聚焦
Shift + B 和 B移动到上/下一按钮，阅读它的label
Shift + L 和 L移动到上/下一列表，阅读它的第一项
Shift + I 和 I移动到上/下一列表，开始阅读
Enter/Return(当链接或按钮或其他可激活的项选中时) 激活项
NVDA + 空格(当选中表单时) 进入表单，或如果已经在表单里的情况下，离开表单
Shift Tab 和 Tab(当在表单里面时) 切换到下一个input
上 和 下(当在表单里面时) 改变input的值(例如选择框).
空格(当在表单里面时) 选择已选中的值
Ctrl + Alt + 方向键(当选中表格时) 切换表格单元格
+ +

屏幕阅读器测试

+ +

现在你学会了如何使用屏幕阅读器，来使用它做一些可访问性测试吧。这样你才能了解屏幕阅读器在好的网页和坏的网页之间不同的表现：

+ + + +

用户测试

+ +

如上所述，你不能仅依靠自动化工具来确定网站上的可访问性问题。建议在制定测试计划时，包含一些用户测试可访问性的计划(有关更多内容，请参阅前面的用户测试部分)。尝试让一些屏幕阅读器用户，一些全键盘用户，一些有听觉障碍的用户或其他用户参与测试，以满足你的需求。

+ +

测试可访问性检查清单

+ +

以下列表提供了一个清单，供参考，以确保已对项目执行建议的可访问性测试：

+ +
    +
  1. 确保HTML尽可能是语义化的。验证是一个好方法, 就像使用审计工具。
    2. +
  2. 检查当关闭CSS时，你的内容能够被理解。
    3. +
  3. 确认功能是全键盘可访问的。使用Tab键、回车键等做测试。
    4. +
  4. 确保非文本内容有替代文本。 审计工具能够很好地发现问题。
    5. +
  5. 确保颜色和颜色对比度是可接受的，使用合适的工具测试。
    6. +
  6. 确保隐藏的内容可以被屏幕阅读器读取。
    7. +
  7. 尽可能的使功能在没有JavaScript的情况下也可以正常使用。
    8. +
  8. 在合适的地方使用ARIA来提供可访问性。
    9. +
  9. 使用审计工具测试一下你的网站。
    10. +
  10. 使用屏幕阅读器实际测试一下。
    11. +
  11. 在你的网站上可以添加可访问性策略/声明，以说明你的为可访问性做了什么。
    12. +
+ +

寻找帮助

+ +

可访问性还会遇到许多其他问题。你要学会如何在线查找答案。请查阅HTML和CSS文章的“寻找帮助”部分，以获取一些指导。 

+ +

总结

+ +

希望本文能让你了解可访问性，以及帮助你解决遇到的一些可访问性问题。

+ +

下一篇文章，我们将详细介绍特征检测。

+ +

{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}

+ +

指南

+ + diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html new file mode 100644 index 0000000000..fb01cd2843 --- /dev/null +++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html @@ -0,0 +1,367 @@ +--- +title: 进行测试的策略 +slug: Learn/Tools_and_testing/Cross_browser_testing/测试策略 +tags: + - 测试 + - 测试策略 + - 用户测试 + - 自动化测试 + - 虚拟机 仿真器 + - 跨浏览器测试 +translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Introduction","Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS", "Learn/Tools_and_testing/Cross_browser_testing")}}
+ +


+ 这篇文章主要是讨论如何进行跨浏览器测试，回答一些比较常见的疑惑，譬如：“什么是跨浏览器测试？”，“会遇到哪些常见的问题？”以及“如何测试、区分以及修复问题？”

+ + + + + + + + + + + + +
准备:熟练掌握 HTML, CSS, 和 JavaScript 语言; 了解跨浏览器测试的核心概念。
对象:了解跨浏览器测试所涉及的高级概念。
+ +

是否需要测试？

+ +

开始跨浏览器测试（cross browser testing）之前您需要确定哪些浏览器将进入被测试名单。测试所有用户可能使用的浏览器或移动设备是不可能的——数量太大，而且浏览器和设备总在不断更新。

+ +

可行的替代方案是，尝试确保您的网站适用于最常见的浏览器和设备，然后进行防御性编码，以便为您的网站提供最广泛的支持范围。

+ +

防御性编码的实质是一种智能回退措施：如果某个功能或样式在浏览器中不起作用，该网站将将降级为不太令人兴奋的东西，但仍然能提供可接受的用户体验——核心是：虽然网站看起来不那么漂亮，仍然可以访问。

+ +

本章的目的是建立一个供您在测试时参考的浏览器/设备图表。 您可以根据需要将其设置成简单或复杂版本——常见的方法是具有多个等级的支持，例如：

+ +
    +
  1. A 级：普通/现代浏览器（仍在广泛使用）：需要彻底测试并提供全面支持。
    2. +
  2. B 级：较旧/较少的浏览器 （少数用户还在使用）：测试并提供更基本的体验，以提供对核心信息和服务的完全访问。
    3. +
  3. C 级：稀有/未知浏览器 ： 不进行测试，假设网站内容可以显示。 在我们的防御性编码起效的情况下，用户可以访问到网页的全部内容。
    4. +
+ +

在以下各节中，我们将以此等级为参考构建支持图表。

+ +
+

注意：雅虎最先使这一方法流行起来，详情参见《浏览器分级支持系统》（ Graded browser Support）。

+
+ +

有根据地假设

+ +

您可以称之为“假设”或“直觉”。这不是一种准确，科学的方法，但作为具有网络行业经验的人，您至少应该对待测试的一些浏览器有些想法。这将形成一个良好的初级浏览器分级支持系统。

+ +

例如，如果您居住在西欧或北美，您会发现许多人使用 Windows 和 Mac 的台式机或笔记本电脑，主要浏览器是 Chrome，Firefox，Safari，IE 和 Edge。您可以测试前三个浏览器最近的三个版本，因为它们会定期更新。对于Edge和IE，您应当近期的多个版本。这些浏览器都应该属于A级。

+ +
+

注意：您一次只能在计算机上安装一个版本的 IE 或 Edge，因此您可能必须使用虚拟机或其他方法来执行所需的测试。稍后请参阅虚拟机部分{{anch("Virtual machines")}}。

+
+ +

很多人使用 iOS 和 Android，因此您可能还想测试最新版本的 iOS Safari，最近几个版本的 Android stock 浏览器，以及适用于 iOS 和 Android 的 Chrome 和 Firefox。理想情况下，您应该在手机和平​​板电脑上测试这些，以确保响应式设计的正常运行。

+ +

您也许知道很多人仍然在使用 IE 9。这一版本陈旧而且功能较少，所以让我们把它放在B级别。

+ +

到目前为止，这为我们提供了以下支持级别：

+ +
    +
  1. A 级：用于 Windows / Mac 的 Chrome 和 Firefox，用于 Mac 的 Safari，用于 Windows的 Edge 和 IE（每个版本的最后两个版本），用于 iPhone / iPad 的 iOS Safari，用于手机/平板电脑的 Android stock 浏览器（最后两个版本），用于手机和平板电脑上的 Chrome 和适用于 Android 的Firefox（最后两个版本）。
    2. +
  2. B 级：适用于 Windows 的 IE 9
    3. +
  3. C 级：无
    4. +
+ +

如果您居住在其他地方，或者正在开发其他地方（例如某些国家或地区）的网站，那么您可能会有不同的常用浏览器进行测试。

+ +
+

注意：“我老板用Blackberry，所以我们最好确保它看起来很好”也可以是一个有说服力的论点。

+
+ +

浏览器支持检测

+ +

您可以调用的一个有用的措施是浏览器支持统计信息,用于告知您的浏览器测试选项。有许多网站提供此类统计信息,例如:

+ + + +

这些都以北美为中心,并不特别准确,但它们可以让您了解大趋势。

+ +

例如,让我们转到 Netmarketshare。您可以看到 Opera 被列为具有小但可见的使用数字,因此,我们也应该将其添加到支持图表中,作为 C 级。

+ +

IE8 被列为重要,但它较老且不再能够。Opera Mini 非常重要,但在运行时运行复杂的 JavaScript 方面,它的能力并不大(有关详细信息,请参阅 Opera Mini and JavaScrip)。我们也应该把它放到B级。

+ +

使用分析工具

+ +

更准确的数据源,如果你能得到它,来自像Google Analytics这样的分析应用程序。这是一个应用程序,将为您提供准确的统计数据,究竟是什么浏览器的人正在使用浏览您的网站。当然,这依赖于您已经有一个网站使用它,所以它是没有多大的适合全新的网站。

+ +

但是,分析历史记录可用于查找支持统计信息以影响公司网站的新版本或要添加到现有站点的新功能。如果您有这些可用,它们比上述全球浏览器统计信息更准确。

+ +

配置Google分析

+ +
    +
  1. 首先,您需要一个谷歌帐户。使用此帐户可登录Google Analytics。 
    2. +
  2. 选择 Google Analytics (web))选项,然后单击"注册"按钮。
    3. +
  3. 在注册页面中输入您的网站/应用详细信息。这是相当直观的设置;获得正确的最重要的字段是网站 URL。这需要是您的网站/应用的根 URL。
    4. +
  4. 填写完所有内容后,按"获取跟踪 ID"按钮,然后接受显示的服务条款。
    5. +
  5. 下一页为您提供一些代码段和其他说明。对于基本网站,您需要做的是复制网站跟踪代码块,并将其粘贴到您要在网站上使用 Google Analytics 跟踪的所有不同页面。您可以在关闭</body>标记下方,也可以位于其他适当位置,以防止其与应用程序代码混淆。
    6. +
  6. 将更改上载到开发服务器,或将代码上载到其他任何位置。
    7. +
+ +

就是这样！您的网站现在应该准备好开始报告分析数据。

+ +

学习分析数据

+ +

现在,您应该能够返回 Analytics Web主页,并开始查看您收集的有关网站的数据(当然,您需要留出一点时间才能真正收集一些数据)。

+ +

默认情况下,您应该看到报告选项卡,如下所示:

+ +

+ +

有大量的数据,你可以看看使用谷歌分析––自定义报告在不同的类别,等等––我们没有时间讨论这一切。 Getting started with Analytics 为初学者提供了一些有关报告(以及更多)的有用指导。

+ +

还应鼓励您查看左侧的不同选项,并查看您可以找到哪些类型的数据。例如,您可以通过从左侧菜单中选择" Audience > Technology > Browser & OS"来了解用户正在使用的浏览器和操作系统。

+ +
+

注意:使用 Google 分析时,您需要提防误导性偏见,例如"我们没有 Firefox 移动用户"可能会导致您不必为 Firefox 移动提供支持。但是,你不会有任何火狐移动用户,如果该网站被打破在火狐手机摆在首位。

+
+ +

其他注意事项

+ +

您可能还应包括其他注意事项。您绝对应该将辅助功能作为 A 级测试要求(我们将在处理常见辅助功能问题一文中介绍您应该测试的内容)

+ +

此外,您可能还有其他注意事项。如果要创建某种公司 Intranet,以便向经理提供销售数据,并且例如,所有经理都提供了 Windows 手机,则可能需要将移动 IE 支持作为优先事项。

+ +

最终的支持图表

+ +

因此,我们的最终支持图表最终将如下所示:

+ +
    +
  1. A 级:适用于 Windows/Mac 的 Chrome 和 Firefox、适用于 Mac 的 Safari、Windows 的"边缘"和"IE"(每个版本的最后两个版本)、iPhone/iPad 的 iOS Safari、手机/平板电脑上的 Android 股票浏览器(最后两个版本)、适用于 Android 的 Chrome 和 Firefox(最后两个版本)在手机平板电脑上.通过常见测试的可访问性。
    2. +
  2. B 级:IE 8 和 9 用于 Windows,Opera Mini。
    3. +
  3. C级:Opera,其他合适的现代浏览器。
    4. +
+ +

你想要测试什么？

+ +

当您的代码库有需要测试的新添加项时,在开始测试之前,应编写出需要通过才能接受的测试要求列表。这些要求可以是可视的,也可以是功能性的, 两者结合起来, 成为可用的网站功能。

+ +

思考下面的例子 (查看源码 , 在线预览):

+ +

+ +

此功能的测试标准可以这样编写:

+ +

A 级和 B 级:

+ + + +

A 级:

+ + + +

You may notice from the text in the example that it won't work in IE8 — this is a problem according to our support chart, which you'll have to work on, perhaps by using a feature detection library to implement the functionality in a different way if the browser doesn't support CSS transitions (see Implementing feature detection, later on in the course).您可能会从示例中的文本中注意到它在 IE8 中不起作用 ––根据我们的支持图表,这是一个问题,您必须处理这个问题,如果浏览器不采用其他方式,则可能使用功能检测库以不同的方式实现功能（如果浏览器不支持 CSS 转换的话）(请参阅实现功能检测,稍后将在本课程中)。

+ +

您可能还注意到,该按钮仅使用键盘无法使用, 这也需要纠正。也许我们可以使用一些JavaScript来实现一个键盘控件的切换,或者完全使用一些其他的方法?

+ +

这些测试条件很有用,因为:

+ + + +

建立一个测试实验室

+ +

执行浏览器测试的一个选项是自己进行测试。为此,您可能需要使用实际物理设备和模拟环境的组合(使用仿真器或虚拟机)。

+ +

真实设备

+ +

通常最好让一个实际的设备运行您要测试的浏览器 , 这在行为和整体用户体验方面提供了最高的准确性。对于合理的低级设备实验室,您可能需要以下内容:

+ + + +

如果可以获取这些选项,则以下是不错的选项:

+ + + +

您的主工作计算机也可以用于安装其他工具以用于特定目的,例如辅助功能审核工具、屏幕阅读器和仿真器/虚拟机。

+ +

一些大型公司拥有设备实验室,这些实验室库存了大量不同的设备,使开发人员能够在非常具体的浏览器/设备组合上查找 Bug。较小的公司和个人通常负担不起如此复杂的实验室,因此倾向于使用较小的实验室、仿真器、虚拟机和商业测试应用程序。

+ +

我们将介绍下面的其他选项。

+ +
+

注意:已做出一些努力用来创建可公开访问的设备实验室, 请参阅 Open Device Labs。

+
+ +
+

注意:我们还需要考虑辅助功能 — 可以在计算机上安装许多有用的工具,以方便辅助功能测试,但我们将在本课程的后面部分介绍"处理常见辅助功能问题"一文中的工具。

+
+ +

模拟器

+ +

仿真器基本上是在计算机内运行并模拟某种设备或特定设备条件的程序,允许您比查找要测试的特定硬件/软件组合更方便地执行某些测试。

+ +

仿真器可能与测试设备条件一样简单。例如,如果要对宽度/高度媒体查询进行一些快速而粗劣的测试以进行响应式设计,则可以使用 Firefox 的Responsive Design Mode。 Safari 也有类似的模式,可以通过访问 “Safari > 首选项”和"显示开发"菜单,然后选择"开发"&gt;"输入响应式设计模式"来启用。  Chrome 也有类似的功能:设备模式(请参阅Simulate Mobile Devices with Device Mode)。

+ +

不过,您经常必须安装某种仿真器。要测试的最常见设备/浏览器如下所示:

+ + + +

您也经常可以为其他移动设备环境找到模拟器，例如：

+ + + +
+

注意：许多模拟器实际上需要使用虚拟机（见下文）;在这种情况下，通常提供指令，和/或将虚拟机的使用合并到仿真器的安装程序中。

+
+ +

虚拟机

+ +

虚拟机是在台式计算机上运行的应用程序，允许您运行整个操作系统的仿真，每个操作系统都划分在自己的虚拟硬盘驱动器中（通常由主机硬盘上存在的单个大文件表示）。有许多流行的虚拟机应用程序可用，例如Parallels，VMWare和Virtual Box;我们个人喜欢后者，因为它是免费的。

+ +
+

注意：您需要可用的大容量硬盘空间来运行虚拟机模拟;模拟的每个操作系统都会占用大量内存。您可能倾向于为每次安装选择所需的硬盘空间;你也可能会试图侥幸使用10GB空间，但会被建议使用50GB空间或更多，以便让操作系统运行可靠。大多数虚拟机应用程序提供的一个很好的选择是创建一个动态分配（dynamically allocated）的硬盘驱动器，它会随着需要的增长和缩小而动态改变。

+
+ +

要使用虚拟盒，您需要：

+ +
    +
  1. 获取要模拟的操作系统的安装程序磁盘或映像（例如ISO文件）。 Virtual Box无法提供这些;大多数，如Windows操作系统，是无法自由分发的商业产品。
    2. +
  2. 下载适用于您的操作系统的相应安装程序并进行安装。
    3. +
  3. 打开应用程序;您将看到如下视图：
    4. +
  4. 要创建新虚拟机，请按左上角的“新建”按钮。
    5. +
  5. 按照说明进行操作，并根据需要填写以下对话框。你会： +
      +
    1. 为新虚拟机提供名称
      2. +
    2. 选择要在其上安装的操作系统和版本
      3. +
    3. 设置应分配多少RAM（我们建议使用2048MB或2GB）
      4. +
    4. 创建虚拟硬盘（在包含立即创建虚拟硬盘，VDI（虚拟磁盘映像）和动态分配的三个对话框中选择默认选项）。
      5. +
    5. 选择虚拟硬盘的文件位置和大小（选择一个合理的名称和位置来保留它，并且大小指定大约50GB，或者您可以轻松指定）。
      6. +
    +
    6. +
+ +

现在，新的虚拟框应出现在Virtual Box UI主窗口的左侧菜单中。此时，您可以双击它以打开虚拟机––它将开始启动虚拟机，但它还没有安装操作系统。此时，您需要将对话框指向安装程序映像/磁盘，它将运行在虚拟机上安装它的步骤，就像它是真正的计算机一样。

+ +

+ +
+

重要提示：您需要确保此时要在虚拟机上安装要安装的操作系统映像，然后立即安装。如果此时取消该进程，它可能会使虚拟机无法使用，并使其成为您需要删除它并再次创建它。这不是致命的，但令人讨厌。

+
+ +

完成此过程后，您应该有一台虚拟机在主机窗口内运行操作系统。

+ +

+ +

您需要像处理任何实际安装一样处理此虚拟操作系统安装 - 例如，安装要测试的浏览器，安装防病毒程序以保护其免受病毒侵害。

+ +

拥有多个虚拟机非常有用，特别是对于Windows IE / Edge测试 - 在Windows上，您无法并排安装多个版本的默认浏览器，因此您可能需要构建一个虚拟机库来处理根据需要进行不同测试，例如：

+ + + +
+

注意：虚拟机的另一个好处是虚拟磁盘映像是相当独立的。如果您正在团队中工作，则可以创建一个虚拟磁盘映像，然后复制并传递它。如果它是许可产品，只需确保您拥有运行所有Windows副本或正在运行的任何其他副本所需的许可证。

+
+ +

自动化和商业应用

+ +

正如上一章所述，通过使用某种自动化系统，您可以从浏览器测试中减少很多痛苦。您可以设置自己的测试自动化系统（Selenium是首选的流行应用程序），它确实需要一些设置，但是当您解决问题时可能会相当受益。

+ +

还有一些商业工具，如Sauce Labs和Browser Stack，可以为您做这种事情，如果您愿意在测试中投入一些资金，则无需担心设置的问题。

+ +

我们将在后续文章中查看如何使用此类工具。

+ +

用户测试

+ +

在我们继续之前，我们将通过谈论用户测试来完成本文––如果您有一个愿意用户组来测试您的新功能，这可能是一个很好的选择。请记住，这可以像你希望的那样廉价又有效––你的用户群可以是一群朋友，一群同事，或一群无偿或有偿志愿者，这取决于你是否有钱花在测试上。

+ +

通常，您可以让用户在某种开发服务器上查看包含新功能的页面或视图，这样您就不会在完成之前放置最终站点或更改。你应该让他们按照一些步骤报告他们得到的结果。提供一组步骤（有时称为脚本）非常有用，这样您就可以获得与您尝试测试的内容相关的更可靠的结果。我们在上面的{{anch("What are you going to test")}} 部分中提到了这一点––很容易将其中详述的测试标准转换为要遵循的步骤。例如，以下内容适用于有视力的用户：

+ + + +

运行测试时，最好还是：

+ + + +

这些步骤旨在确保您正在测试的浏览器尽可能“纯粹（pure）”，即没有安装任何可能影响测试结果的内容。

+ +
+

注意：如果您有可用的硬件，另一个有用的低功耗选项是在低端手机/其他设备上测试您的网站 - 随着网站变得更大并且具有更多效果，网站放慢速度的可能性更高，因此您需要开始给予表现更多考虑。尝试在低端设备上运行您的功能将使更高端设备的体验更有可能。

+
+ +
+

注意：某些服务器端开发环境提供了有用的机制，可以将站点更改部署到仅部分用户，从而提供了一种有用的机制，可以在不需要单独的开发服务器的情况下获取由用户子集测试的功能。示例：Django Waffle Flags。

+
+ +

总结

+ +

阅读本文后，您现在应该知道如何识别目标受众/目标浏览器列表，然后在该列表上有效地执行跨浏览器测试。

+ +

接下来，我们将把注意力转向测试可能发现的实际代码问题，从HTML和CSS开始。

+ +

{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Introduction","Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS", "Learn/Tools_and_testing/Cross_browser_testing")}}

+ + + +

本章内容

+ +

+

diff --git "a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/\345\217\257\350\256\277\351\227\256\346\200\247/index.html" "b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/\345\217\257\350\256\277\351\227\256\346\200\247/index.html" deleted file mode 100644 index 704f595fb4..0000000000 --- "a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/\345\217\257\350\256\277\351\227\256\346\200\247/index.html" +++ /dev/null @@ -1,624 +0,0 @@ ---- -title: 解决常见的可访问性问题 -slug: Learn/Tools_and_testing/Cross_browser_testing/可访问性 -tags: - - CSS - - CodingScripting - - HTML - - JavaScript - - 初学者 - - 可访问性 - - 学习 - - 工具 - - 文章 - - 测试 - - 跨浏览器 - - 键盘 -translation_of: Learn/Tools_and_testing/Cross_browser_testing/Accessibility ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}
- -

接下来，我们将关注可访问性，提供关于一些常见问题的信息，如何进行简单测试以及如何使用审核/自动化工具来查找可访问性问题。

- - - - - - - - - - - - -
前提:熟悉HTML, CSS,和JavaScript语言; 理解跨浏览器测试原理
目标:能够诊断常见的可访问性问题，并使用适当的工具和技术解决问题。
- -

什么是可访问性？

- -

当我们在web技术的背景下说可访问性时，大多数人立即想到确保残疾人可以使用网站/应用程序，例如：

- - - -

但是，说可访问性仅与残疾人有关是错误的。实际上，可访问性的目的是使你的网站/应用程序在尽可能多的环境中被尽可能多的人使用，而不仅仅是那些使用高性能台式计算机的用户。极端的例子可能包括：

- - - -

在某种程度上，本模块都是关于可访问性的 — 跨浏览器测试可确保你的网站可以被尽可能多的人使用。这篇可访问性是什么？ 更全面透彻地定义了什么是可访问性。

- -

也就是说，本文将涵盖跨浏览器和有关残疾人的测试问题以及他们如何使用Web。我们在其他地方已经讨论过其他领域，例如响应式设计问题和性能。

- -
-

Note: 就像Web开发中的许多事情一样，可访问性不是100%的成功或失败可以定义的；对于所有内容而言，几乎不可能实现100％的可访问性，尤其是当站点变得越来越复杂时。我们更多的是通过防御性编码并遵循最佳实践，努力使尽可能多的人可以访问尽可能多的内容。

-
- -

常见可访问性问题

- -

在本节中，我们将围绕Web可访问性，详细介绍与特定技术相关的一些主要问题、要遵循的最佳实践，以及可以进行的一些快速测试，以查看你的网站是否朝着正确的方向发展。

- -
-

Note: 可访问性在道德上是正确的事情，对企业也有好处(残疾用户，移动用户等构成了重要的细分市场), 并且在世界许多地方，提供出来的网络媒体资源无法为残疾人服务也是违法的。阅读无障碍指南和法律获取更多相关信息。

-
- -

HTML

- -

HTML语义化 (语义化正确地使用HTML标签)对于可访问性来说是开箱即用的 — 这类内容可供无视障人士阅读（前提是你不会做任何愚蠢的事情，例如使文本变小或使用CSS隐藏它），也可被屏幕阅读器（从字面上读出网页的应用）之类的辅助技术使用，并赋予其他优势。

- -

语义化结构

- -

HTML语义化最重要的捷径是为你的内容使用标题和段落的结构；这是因为屏幕阅读器用户倾向于将文档标题用作导航，以更快地找到他们需要的内容。如果你的内容没有标题，那么他们将获得的是一大坨文字，没有任何可定位的标记。坏的例子和好的例子如下：

- -
<font size="7">My heading</font>
-<br><br>
-This is the first section of my document.
-<br><br>
-I'll add another paragraph here too.
-<br><br>
-<font size="5">My subheading</font>
-<br><br>
-This is the first subsection of my document. I'd love people to be able to find this content!
-<br><br>
-<font size="5">My 2nd subheading</font>
-<br><br>
-This is the second subsection of my content. I think is more interesting than the last one.
- -
<h1>My heading</h1>
-
-<p>This is the first section of my document.</p>
-
-<p>I'll add another paragraph here too.</p>
-
-<h2>My subheading</h2>
-
-<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>
-
-<h2>My 2nd subheading</h2>
-
-<p>This is the second subsection of my content. I think is more interesting than the last one.</p>
- -

此外，你的内容应该在逻辑顺序上讲得通的 — 你总能在以后再为它们写CSS，但你应该在一开始就确定内容正确的顺序。

- -

作为测试，你可以关闭网站的CSS，然后看看没有了CSS网站是否能被理解。你可以通过从代码中删除CSS来手动完成此操作，但是最简单的方法是使用浏览器功能，例如：

- - - -

使用键盘

- -

某些HTML功能可以使用键盘来选择 — 这是默认的，从早期web开始就是这样的。具有此功能的元素是允许用户与网页交互的常见元素，比如links, {{htmlelement("button")}}s, 以及表单元素，比如{{htmlelement("input")}}.

- -

浏览native-keyboard-accessibility.html (查看源码) 尝试一下— 在新标签页中打开它，然后尝试按Tab键；按下几下后，你应该看到标签焦点开始在不同的可聚焦元素之间移动；在每个浏览器中，被聚焦的元素都被赋予突出的默认样式 (不同的浏览器表现略有不同) 以便你能分辨聚焦在哪个元素上。

- -

- -

然后，你可以按Enter / Return键来关注焦点链接，或者按一个按钮（我们已经包含一些JavaScript来使按钮提醒消息），或者在输入框开始输入文本，（其他表单元素具有不同的控件，例如{{htmlelement("select")}}元素可以使用向上和向下箭头键显示和循环显示其选项）。

- -

请注意，不同的浏览器可能具有不同的键盘控制选项。大多数现代浏览器都遵循上述的标签模式（你也可以执行Shift + Tab来向后移动可聚焦元素），但是某些浏览器具有自己的特性：

- - - -
-

重要: 你应该在所写的任何新页面上执行这种测试 — 确保可以通过键盘使用功能。

-
- -

这个例子强调了正确使用语义元素的重要性。可以用CSS将任何元素的样式设置为看起来像链接或按钮，并使用JavaScript让其表现为像链接或按钮一样，但实际上它们不是链接或按钮，你将失去很多语义化元素带给你的可访问性。因此，尽量避免这样做。

- -

另一个技巧 — 如我们的示例所示，你可以使用:focus伪类控制可聚焦元素在聚焦时的外观。最好将焦点和悬停样式加重显示，这样无论是使用鼠标还是键盘的用户，都能直观地察觉控件在被激活时将执行的操作

- -
a:hover, input:hover, button:hover, select:hover,
-a:focus, input:focus, button:focus, select:focus {
-  font-weight: bold;
-}
- -
-

Note: 如果你决定使用CSS删除默认的焦点样式，请确保将其替换为更适合你的设计的其他样式 — 这是一种非常有价值的可访问性工具，不应删除。

-
- -

模拟键盘

- -

有时可能无法使用键盘完成可访问性。你可能有一个语义不是很好的网站（也许你最终得到了一个糟糕的CMS网页，该CMS生成了由<div> 组成的按钮），或者你正在使用一个没有内置键盘可访问性的复杂控件，例如HTML5 {{htmlelement("video")}} 元素（令人惊奇的是，Opera是唯一允许你在<video>元素的默认浏览器控件之间进行制表的浏览器）。你有几种选择：

- -
    -
  1. 使用<button>元素（默认情况下都是可以在button间使用Tab键）和JavaScript创建自定义控件，以连接其功能。有关此示例，请参见Creating a cross-browser video player。
    2. -
  2. 通过JavaScript创建键盘快捷键，因此当你按键盘上的某些键时，功能被激活。请参阅Desktop mouse and keyboard controls，以获取一些可用于任何目的（比如游戏）的例子。
    3. -
  3. 使用一些有趣的策略来伪造按钮行为。以我们的fake-div-buttons.html示例为例（查看源码）。这里我们通过为每个假按钮赋予属性tabindex="0"（请参阅​​WebAIM的tabindex文章以获取更多详细信息），使假的<div>按钮能够被聚焦（包括通过制表符）。这使我们可以跳到按钮上，但不能通过回车键激活它们。为此，我们必须添加以下JavaScript代码： - 
    document.onkeydown = function(e) {
-  if(e.keyCode === 13) { // The Enter/Return key
-    document.activeElement.onclick(e);
-  }
-};
    - 在这里，我们向document对象添加了一个监听器，以检测何时按下了键盘上的按钮。我们通过事件对象的keyCode属性检查按下了什么按钮；如果它是与回车键匹配的键码，则使用document.activeElement.onclick()运行存储在按钮的onclick处理程序中的函数。document.activeElement为我们提供了当前页面上被聚焦的元素。
    4. -
- -
-

Note: 仅当你通过事件处理程序属性（例如onclick）设置原始事件处理程序时，此技术才有效。addEventListener将无法正常工作。重新构建功能会有很多额外的麻烦。并且肯定还有其他问题。最好能从根源解决问题，使用正确的语义化元素。

-
- -

替代文本

- -

替代文本对于可访问性非常重要 — 如果一个人有视觉或听觉障碍使他们无法看到或听到某些内容，那么这就是一个问题。可用的最简单的文本替代方法是alt属性，我们应该在所有包含相关内容的图像上包括该属性。其中应包含对图像的描述，该描述可在页面上成功传达其含义和内容，并由屏幕阅读器读取并读出给用户。

- -
-

Note: 更多信息请阅读Text alternatives

-
- -

可以通过多种方法来测试缺少的替代文本，例如，使用可访问性{{anch("审计工具")}}。

- -

对于视频和音频内容，Alt文本稍微复杂一些。有一种方法可以定义文本轨道（例如，字幕）并在播放视频时以{{htmlelement("track")}}元素和WebVTT格式的形式显示它们（请参见Adding captions and subtitles to HTML5 video以获取详细信息）。这些功能的浏览器兼容性相当好，但是如果你想提供音频的替代文本或支持较旧的浏览器，则在页面某处或单独页面上显示一个简单的文本记录可能是个好主意。

- -

元素关系和上下文

- -

HTML中有某些功能和最佳实践，旨在提供元素之间的上下文和关系。三个最常见的示例是链接，表单标签和数据表。

- -

使用屏幕阅读器的人们通常会使用一项共同的功能，即他们会拉出页面上所有链接的列表。在这种情况下，链接文本需要脱离上下文。例如，标记为“单击此处”，“单击此处”等的链接列表确实对可访问性不利。链接文本最好在上下文和上下文之外都有意义。

- -

表单{{htmlelement("label")}}元素是允许我们使表单可访问的主要功能之一。表单的麻烦在于，你需要标签来说明应在每个表单输入中输入哪些数据。每个标签都必须包含在{{htmlelement("label")}}内，以将其明确链接到其对应的表单输入框（属性值的每个<label>的for属性值必须与表单元素id值匹配），即使源顺序不是完全合乎逻辑的，也能提供很好的可访问性。

- -
-

Note: 更多关于链接文本和表单标签，请阅读有意义的文字标签

-
- -

最后，简要介绍一下数据表。基本数据表可以用非常简单的标记编写（请参阅bad-table.html和源码)），但这存在问题 — 屏幕阅读器用户无法将行或列作为数据分组关联在一起，但你需要知道标题行是什么，以及标题行行的标题还是列的标题等。这些只能从可视化的表格才能知道。

- -

相反，如果你看一下我们的punk-bands-complete.html示例（示例，源码），则可以在此处看到一些可访问性辅助，例如表头（{{htmlelement("th")}}和作用域属性），{{htmlelement("caption")}}元素等。

- -
-

Note: 更多信息，请阅读可访问的表格

-
- -

CSS

- -

CSS往往提供的基本可访问性功能要比HTML少得多，但是如果使用不当，它仍然会对可访问性造成同样的损害。下面是一些涉及CSS的可访问性的点：

- - - -

还有其他几个需要注意的地方。

- -

颜色和颜色对比度

- -

为你的网站选择配色方案时，应确保文本（前景）颜色与背景颜色形成鲜明对比。你的设计可能看起来很酷，但是如果视力障碍者（例如色盲）无法阅读你的内容，那就不好了。使用WebAIM的Color Contrast Checker之类的工具来检查你的方案是否有足够对比度。

- -

另一个提示是不要仅依靠颜色来表示界标/信息，因为这对于看不见颜色的人来说是不好的。例如，不要将所需的表单字段标记为红色，而应使用星号和红色标记它们。

- -
-

Note: 高对比度也可以让使用带有光滑屏幕的设备（例如智能手机或平板电脑）的人在明亮的环境（例如阳光）下可以更好地阅读页面。

-
- -

隐藏的内容

- -

在许多情况下，视觉设计要求并非一次显示所有内容。例如，在我们的Tabbed info box example“示例（查看源码）中，我们有三个信息面板，但是我们将它们放在彼此的顶部，用户可以通过单击以显示每个选项卡（也可以通过键盘访问 — 可以使用Tab键和回车键选择它们）。

- -

- -

屏幕阅读器用户根本不关心这些，只要源内容顺序有意义，他们就很满意，并且他们可以全部获取。绝对定位（在本示例中使用的定位）通常被视为隐藏内容以产生视觉效果的最佳机制之一，因为它不会阻止屏幕阅读器获取相关内容。

- -

另一方面，你不应该使用{{cssxref("visibility")}}:hidden或者{{cssxref("display")}}:none, 因为它们会让屏幕阅读器取不到那些内容，除非你真的想让屏幕阅读器不读取那些内容。

- -
-

Note: Invisible Content Just for Screen Reader Users有更多关于这个话题的详细信息

-
- -

JavaScript

- -

就可访问性而言，JavaScript具有与CSS相同的问题 — 如果使用不当或使用过度，可访问性可能会很糟糕。我们已经提到了与JavaScript相关的一些可访问性问题，主要是在HTML语义化那块 — 你应该始终使用适当的语义化HTML来在合适的地方实现功能，例如，适当地使用链接和按钮。尽量不要使用JavaScript代码中结合<div>元素来伪造功能 — 容易出错，并且比直接使用HTML标签还要做更多的工作。

- -

简单的功能

- -

通常，简单的功能只应使用HTML标签完成 — JavaScript仅用于增强功能，而不能用于实现简单功能。好的JavaScript用法包括：

- - - -
-

Note: WebAIM的Accessible JavaScript提供了一些关于JavaScript可访问性注意事项的信息。

-
- -

更复杂的JavaScript实现可能会带来可访问性问题 — 你需要尽力而为。例如，期望让使用WebGL编写的复杂3D游戏对盲人来说100％可访问性是不合理的，但是你可以实现键盘控件，以便非鼠标用户可以使用它，并使配色方案具有足够的对比度供有颜色分辨障碍的人使用。

- -

复杂的功能

- -

可访问性存在问题的主要领域之一是复杂的应用程序，其中涉及复杂的表单控件（例如日期选择器）和动态内容，内容会经常增量更新。

- -

非自带的复杂的表单控件可能会存在问题，因为它们往往涉及大量嵌套的<div>，浏览器默认情况下不知道如何处理它们。如果你自己开发控件，则需要确保它们可以通过键盘访问。如果你使用的是某种第三方框架，请在开始使用之前仔细检查可用的选项以了解它们是否具有完备的可访问性。例如，Bootstrap就对可访问性有相当好的支持（尽管Rhiana Heath的Making Bootstrap a Little More Accessible探讨了它的一些问题（主要与色彩对比度有关），并着眼于一些解决方案）。

- -

定期更新的动态内容可能会成为问题，因为屏幕阅读器用户可能会错过这些内容，尤其是在意外更新的情况下。如果你有一个包含主要内容面板的单页应用程序，该应用程序使用XMLHttpRequest或Fetch定期更新，那么屏幕阅读器用户可能会错过这些更新。

- -

WAI-ARIA

- -

你是否需要使用这种复杂的功能，或者使用普通的旧语义化HTML代替？如果确实需要复杂性，则应考虑使用WAI-ARIA（Accessible Rich Internet Applications - 可访问的互联网应用），该规范为诸如复杂的表单控件和更新面板之类的项目提供了语义（以新的HTML属性形式），这样大部分浏览器和屏幕阅读器就能理解内容。

- -

要处理复杂的表单窗口小部件，你需要使用ARIA属性（例如roles）来声明窗口小部件中不同元素的角色（例如，它们是选项卡还是选项卡面板？），用aria-disabled来表示控件是否禁用等。

- -

要处理内容定期更新的区域，可以使用aria-live属性，该属性标识更新区域。它的值指示屏幕阅读器如何处理更新内容：

- - - -

例子如下：

- -
<p><span id="LiveRegion1" aria-live="polite" aria-atomic="false"></span></p>
- -

浏览Freedom Scientific的ARIA (Accessible Rich Internet Applications)动态更新区域示例 — 高亮显示的段落每10秒更新一次内容，屏幕阅读器应将此内容读出给用户。ARIA Live Regions - Atomic是另一个很有用的例子。

- -

我们这里没有足够的空间来详细介绍WAI-ARIA，你可以在WAI-ARIA basics了解更多。

- -

可访问性测试工具

- -

现在，我们已经介绍了不同Web技术的可访问性注意事项，包括一些测试方法（例如键盘导航和颜色对比度检查器），让我们看一下在进行可访问性测试时可以使用的其他工具。

- -

审计工具

- -

你可以使用许多审计工具检查你的网页，这些审计工具将检查它们并返回页面上存在的可访问性问题列表。一些审计工具：

- - - -

看下面的例子，我们用的是Tenon。

- -
    -
  1. 访问Tenon主页。
    2. -
  2. 使用bad-semantics.html示例测试，输入链接地址并按下Analyse Your Webpage（译者注：开始分析你的网页）。
    3. -
  3. 下滑，直到你看到错误/描述部分，如下图。
    4. -
- -

- -

你还可以探索一些选项（请参阅页面顶部附近的Show Options（译者注：显示选项）链接），或者使用Tenon的API。

- -
-

Note: 这些工具不足以单独解决你的所有可访问性问题。你需要将这些，知识和经验，用户测试等结合起来才能获得完整的解决方案。

-
- -

自动化工具

- -

Deque's aXe tool比我们上面提到的审计工具更优秀。和其他工具一样，它检查页面并返回可访问性错误。它很有用，可以提供浏览器扩展程序：

- - - -

扩展程序将可访问性选项卡添加到浏览器开发人员工具。例如，我们安装了Firefox版本，然后使用它来审核bad-table.html示例。我们得到以下结果：

- -

- -

aXe也可以使用npm安装，并且可以与任务运行器（如Grunt 和Gulp），自动化框架（如Selenium和Cucumber），单元测试框架（如Jasmin）集成，以及更多其他功能（详见main aXe page ）。

- -

屏幕阅读器

- -

为了了解有严重视力障碍的人是如何浏览网页的，我们需要测试屏幕阅读器。有几款屏幕阅读器：

- - - -

通常，屏幕阅读器是独立运行的应用程序，并且不仅仅支持阅读网页，也支持阅读其他应用程序。也有例外（比如ChromeVox是一个浏览器扩展程序）。不同的屏幕阅读器可能在控制键和表现上稍有不同，所以你必须查阅你选择的屏幕阅读器的文档来获取相关细节。总体来说他们是大同小异的。

- -

一起看一下我们对几款不同的屏幕阅读器的测试。这将帮助你大致了解它们如何工作以及如何测试它们。

- -
-

Note: WebAIM的 Designing for Screen Reader Compatibility提供了一些关于屏幕阅读器的使用和如何开发应用以最好的适用屏幕阅读器的信息。你也可以看下Screen Reader User Survey #6 Results这篇有关屏幕阅读器一些有趣的统计信息的文章。

-
- -

VoiceOver

- -

VoiceOver (VO)是Mac/iPhone/iPad上的免费应用，所以如果你使用苹果公司的产品，可以用VO来进行测试。 我们在Mac OS X 系统上测试了它。

- -

按下Cmd + Fn + F5打开它。如果你之前没用过VO，将会出现一个可以选择是否开启VO的欢迎界面，并且还会有教程指导你如何使用。再次按下Cmd + Fn + F5可以关闭。

- -
-

Note: 你应该至少看一遍教程，它对于你了解VO是非常有用的。

-
- -

当VO开启时，你会看到一个会显示当前选中信息的黑色框在屏幕的左下角，除此之外屏幕显示大体还是相同的。当前选中的部分也会出现一个黑色的边框以进行高亮显示，这个黑色框就是VO的光标。

- -

- -

在使用中，你会用到"VO修饰键"，"VO修饰键"是一个单独键或组合键，当你使用VO的快捷键时，你需要额外按下这个"VO修饰键"。屏幕阅读器通常都会有修饰键，防止它们的快捷键和其他程序的快捷键冲突。VO的修饰键是CapsLock, 或Ctrl + Option。

- -

VO有很多快捷键，我们没有全部列出来。只把测试网页可访问性常用的一些在下面列出了。表格里，"VO"代表"VO修饰键"。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
常用的VO快捷键
快捷键描述
VO + 方向键移动VO光标
VO + 空格键选择/激活高亮的部分，包括Rotor里的内容（关于Rotor见下面）
VO + Shift + 下移动到组合项目里（比如HTML表格，或表单等）。进入组合里，你能使用下面的快捷键。
VO + Shift + 上离开组合项目
VO + C(当在表格里面时) 阅读当前列的头部
VO + R(当在表格里面时) 阅读当前行的头部
VO + C + C (当在表格里面时) 阅读当前列，包括列头
VO + R + R (当在表格里面时) 阅读当前行，包括对应于每个小行的头
VO + 左, VO + 右(当在水平的选项卡里面时，比如日期选择或时间选择) 切换选项
VO + 上, VO + 下(当在垂直的选项卡里面时，比如日期选择或时间选择) 切换选项
VO + U使用Rotor。Rotor使用列表展示标题，链接，表单选项等，以便为我们提供便利的导航。
VO + 左, VO + 右(当在Rotor里) 切换到其他列表
VO + 上, VO + 下(当在Rotor里) 在当前列表里，切换到其他项
Esc(当在Rotor里) 推出Rotor
Ctrl(当VO阅读时) 暂停/继续
VO + Z重复上一句话
VO + D进入Mac的程序坞，你能选择运行哪个应用
- -

看起来很多，但当你用起来时还好，因为VO通常会给你提醒，在哪里应该用哪个快捷键。现在试试运行VO，在{{anch("屏幕阅读器测试")}}屏幕阅读器测试章节做个测试吧。

- -

NVDA

- -

NVDA只能运行在Window系统，你需要安装它。

- -
    -
  1. 在nvaccess.org下载。你能选择免费下载，或赞助后再下载；你需要在下载前提供你的邮箱地址。
    2. -
  2. 下载完成后，开始安装 - 双击安装程序，接受条款，一步步按提示来。
    3. -
  3. 双击NVDA程序或快捷方式，或者按下Ctrl + Alt + N打开它。你会看见欢迎界面。你能选择一些选项，然后按下OK继续。
    4. -
- -

NVDA现在在你的电脑上开启了。

- -

在使用中，你会用到"NVDA修饰键"，"NVDA修饰键"是一个单独键，当你使用NVDA的快捷键时，你需要额外按下这个"NVDA修饰键"。屏幕阅读器通常都会有修饰键，防止它们的快捷键和其他程序的快捷键冲突。NVDA的修饰键是Insert键（默认）, 或CapsLock键（在欢迎界面可以选择使用该键）。

- -
-

Note: 关于高亮方面，NVDA比VoiceOver做的更好。当滚动过标题、列表等元素时，你选中的项目会被一个细微的边框包住以高亮，但不是对于所有元素都是这样的。如果你感觉迷失方向了，可以按Ctrl + F5刷新页面，并从顶部重新开始。

-
- -

NVDA有很多快捷键，我们没有全部列出来。只把测试网页可访问性常用的一些在下面列出了。表格里，"NVDA"代表"NVDA修饰键"。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
常用的NVDA快捷键
快捷键描述
NVDA + Q关闭NVDA
NVDA + 上阅读当前行
NVDA + 下在当前位置开始阅读
上和下, 或者Shift + Tab 和Tab移动到上/下一项，开始阅读
左和右移动到当前项的上/下一个字符，开始阅读
Shift + H 和 H移动到上/下一标题，开始阅读
Shift + K 和 K移动到上/下一链接项，开始阅读
Shift + D 和 D移动到上/下一文档界标（比如<nav>），开始阅读
Shift + 1–6 和 1–6移动到上/下一标题（标题1 - 6），开始阅读
Shift + F 和 F移动到上/下一表单选项，聚焦
Shift + T 和 T移动到上/下一数据表，聚焦
Shift + B 和 B移动到上/下一按钮，阅读它的label
Shift + L 和 L移动到上/下一列表，阅读它的第一项
Shift + I 和 I移动到上/下一列表，开始阅读
Enter/Return(当链接或按钮或其他可激活的项选中时) 激活项
NVDA + 空格(当选中表单时) 进入表单，或如果已经在表单里的情况下，离开表单
Shift Tab 和 Tab(当在表单里面时) 切换到下一个input
上 和 下(当在表单里面时) 改变input的值(例如选择框).
空格(当在表单里面时) 选择已选中的值
Ctrl + Alt + 方向键(当选中表格时) 切换表格单元格
- -

屏幕阅读器测试

- -

现在你学会了如何使用屏幕阅读器，来使用它做一些可访问性测试吧。这样你才能了解屏幕阅读器在好的网页和坏的网页之间不同的表现：

- - - -

用户测试

- -

如上所述，你不能仅依靠自动化工具来确定网站上的可访问性问题。建议在制定测试计划时，包含一些用户测试可访问性的计划(有关更多内容，请参阅前面的用户测试部分)。尝试让一些屏幕阅读器用户，一些全键盘用户，一些有听觉障碍的用户或其他用户参与测试，以满足你的需求。

- -

测试可访问性检查清单

- -

以下列表提供了一个清单，供参考，以确保已对项目执行建议的可访问性测试：

- -
    -
  1. 确保HTML尽可能是语义化的。验证是一个好方法, 就像使用审计工具。
    2. -
  2. 检查当关闭CSS时，你的内容能够被理解。
    3. -
  3. 确认功能是全键盘可访问的。使用Tab键、回车键等做测试。
    4. -
  4. 确保非文本内容有替代文本。 审计工具能够很好地发现问题。
    5. -
  5. 确保颜色和颜色对比度是可接受的，使用合适的工具测试。
    6. -
  6. 确保隐藏的内容可以被屏幕阅读器读取。
    7. -
  7. 尽可能的使功能在没有JavaScript的情况下也可以正常使用。
    8. -
  8. 在合适的地方使用ARIA来提供可访问性。
    9. -
  9. 使用审计工具测试一下你的网站。
    10. -
  10. 使用屏幕阅读器实际测试一下。
    11. -
  11. 在你的网站上可以添加可访问性策略/声明，以说明你的为可访问性做了什么。
    12. -
- -

寻找帮助

- -

可访问性还会遇到许多其他问题。你要学会如何在线查找答案。请查阅HTML和CSS文章的“寻找帮助”部分，以获取一些指导。 

- -

总结

- -

希望本文能让你了解可访问性，以及帮助你解决遇到的一些可访问性问题。

- -

下一篇文章，我们将详细介绍特征检测。

- -

{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}

- -

指南

- - diff --git "a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/\346\265\213\350\257\225\347\255\226\347\225\245/index.html" "b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/\346\265\213\350\257\225\347\255\226\347\225\245/index.html" deleted file mode 100644 index fb01cd2843..0000000000 --- "a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/\346\265\213\350\257\225\347\255\226\347\225\245/index.html" +++ /dev/null @@ -1,367 +0,0 @@ ---- -title: 进行测试的策略 -slug: Learn/Tools_and_testing/Cross_browser_testing/测试策略 -tags: - - 测试 - - 测试策略 - - 用户测试 - - 自动化测试 - - 虚拟机 仿真器 - - 跨浏览器测试 -translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Introduction","Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS", "Learn/Tools_and_testing/Cross_browser_testing")}}
- -


- 这篇文章主要是讨论如何进行跨浏览器测试，回答一些比较常见的疑惑，譬如：“什么是跨浏览器测试？”，“会遇到哪些常见的问题？”以及“如何测试、区分以及修复问题？”

- - - - - - - - - - - - -
准备:熟练掌握 HTML, CSS, 和 JavaScript 语言; 了解跨浏览器测试的核心概念。
对象:了解跨浏览器测试所涉及的高级概念。
- -

是否需要测试？

- -

开始跨浏览器测试（cross browser testing）之前您需要确定哪些浏览器将进入被测试名单。测试所有用户可能使用的浏览器或移动设备是不可能的——数量太大，而且浏览器和设备总在不断更新。

- -

可行的替代方案是，尝试确保您的网站适用于最常见的浏览器和设备，然后进行防御性编码，以便为您的网站提供最广泛的支持范围。

- -

防御性编码的实质是一种智能回退措施：如果某个功能或样式在浏览器中不起作用，该网站将将降级为不太令人兴奋的东西，但仍然能提供可接受的用户体验——核心是：虽然网站看起来不那么漂亮，仍然可以访问。

- -

本章的目的是建立一个供您在测试时参考的浏览器/设备图表。 您可以根据需要将其设置成简单或复杂版本——常见的方法是具有多个等级的支持，例如：

- -
    -
  1. A 级：普通/现代浏览器（仍在广泛使用）：需要彻底测试并提供全面支持。
    2. -
  2. B 级：较旧/较少的浏览器 （少数用户还在使用）：测试并提供更基本的体验，以提供对核心信息和服务的完全访问。
    3. -
  3. C 级：稀有/未知浏览器 ： 不进行测试，假设网站内容可以显示。 在我们的防御性编码起效的情况下，用户可以访问到网页的全部内容。
    4. -
- -

在以下各节中，我们将以此等级为参考构建支持图表。

- -
-

注意：雅虎最先使这一方法流行起来，详情参见《浏览器分级支持系统》（ Graded browser Support）。

-
- -

有根据地假设

- -

您可以称之为“假设”或“直觉”。这不是一种准确，科学的方法，但作为具有网络行业经验的人，您至少应该对待测试的一些浏览器有些想法。这将形成一个良好的初级浏览器分级支持系统。

- -

例如，如果您居住在西欧或北美，您会发现许多人使用 Windows 和 Mac 的台式机或笔记本电脑，主要浏览器是 Chrome，Firefox，Safari，IE 和 Edge。您可以测试前三个浏览器最近的三个版本，因为它们会定期更新。对于Edge和IE，您应当近期的多个版本。这些浏览器都应该属于A级。

- -
-

注意：您一次只能在计算机上安装一个版本的 IE 或 Edge，因此您可能必须使用虚拟机或其他方法来执行所需的测试。稍后请参阅虚拟机部分{{anch("Virtual machines")}}。

-
- -

很多人使用 iOS 和 Android，因此您可能还想测试最新版本的 iOS Safari，最近几个版本的 Android stock 浏览器，以及适用于 iOS 和 Android 的 Chrome 和 Firefox。理想情况下，您应该在手机和平​​板电脑上测试这些，以确保响应式设计的正常运行。

- -

您也许知道很多人仍然在使用 IE 9。这一版本陈旧而且功能较少，所以让我们把它放在B级别。

- -

到目前为止，这为我们提供了以下支持级别：

- -
    -
  1. A 级：用于 Windows / Mac 的 Chrome 和 Firefox，用于 Mac 的 Safari，用于 Windows的 Edge 和 IE（每个版本的最后两个版本），用于 iPhone / iPad 的 iOS Safari，用于手机/平板电脑的 Android stock 浏览器（最后两个版本），用于手机和平板电脑上的 Chrome 和适用于 Android 的Firefox（最后两个版本）。
    2. -
  2. B 级：适用于 Windows 的 IE 9
    3. -
  3. C 级：无
    4. -
- -

如果您居住在其他地方，或者正在开发其他地方（例如某些国家或地区）的网站，那么您可能会有不同的常用浏览器进行测试。

- -
-

注意：“我老板用Blackberry，所以我们最好确保它看起来很好”也可以是一个有说服力的论点。

-
- -

浏览器支持检测

- -

您可以调用的一个有用的措施是浏览器支持统计信息,用于告知您的浏览器测试选项。有许多网站提供此类统计信息,例如:

- - - -

这些都以北美为中心,并不特别准确,但它们可以让您了解大趋势。

- -

例如,让我们转到 Netmarketshare。您可以看到 Opera 被列为具有小但可见的使用数字,因此,我们也应该将其添加到支持图表中,作为 C 级。

- -

IE8 被列为重要,但它较老且不再能够。Opera Mini 非常重要,但在运行时运行复杂的 JavaScript 方面,它的能力并不大(有关详细信息,请参阅 Opera Mini and JavaScrip)。我们也应该把它放到B级。

- -

使用分析工具

- -

更准确的数据源,如果你能得到它,来自像Google Analytics这样的分析应用程序。这是一个应用程序,将为您提供准确的统计数据,究竟是什么浏览器的人正在使用浏览您的网站。当然,这依赖于您已经有一个网站使用它,所以它是没有多大的适合全新的网站。

- -

但是,分析历史记录可用于查找支持统计信息以影响公司网站的新版本或要添加到现有站点的新功能。如果您有这些可用,它们比上述全球浏览器统计信息更准确。

- -

配置Google分析

- -
    -
  1. 首先,您需要一个谷歌帐户。使用此帐户可登录Google Analytics。 
    2. -
  2. 选择 Google Analytics (web))选项,然后单击"注册"按钮。
    3. -
  3. 在注册页面中输入您的网站/应用详细信息。这是相当直观的设置;获得正确的最重要的字段是网站 URL。这需要是您的网站/应用的根 URL。
    4. -
  4. 填写完所有内容后,按"获取跟踪 ID"按钮,然后接受显示的服务条款。
    5. -
  5. 下一页为您提供一些代码段和其他说明。对于基本网站,您需要做的是复制网站跟踪代码块,并将其粘贴到您要在网站上使用 Google Analytics 跟踪的所有不同页面。您可以在关闭</body>标记下方,也可以位于其他适当位置,以防止其与应用程序代码混淆。
    6. -
  6. 将更改上载到开发服务器,或将代码上载到其他任何位置。
    7. -
- -

就是这样！您的网站现在应该准备好开始报告分析数据。

- -

学习分析数据

- -

现在,您应该能够返回 Analytics Web主页,并开始查看您收集的有关网站的数据(当然,您需要留出一点时间才能真正收集一些数据)。

- -

默认情况下,您应该看到报告选项卡,如下所示:

- -

- -

有大量的数据,你可以看看使用谷歌分析––自定义报告在不同的类别,等等––我们没有时间讨论这一切。 Getting started with Analytics 为初学者提供了一些有关报告(以及更多)的有用指导。

- -

还应鼓励您查看左侧的不同选项,并查看您可以找到哪些类型的数据。例如,您可以通过从左侧菜单中选择" Audience > Technology > Browser & OS"来了解用户正在使用的浏览器和操作系统。

- -
-

注意:使用 Google 分析时,您需要提防误导性偏见,例如"我们没有 Firefox 移动用户"可能会导致您不必为 Firefox 移动提供支持。但是,你不会有任何火狐移动用户,如果该网站被打破在火狐手机摆在首位。

-
- -

其他注意事项

- -

您可能还应包括其他注意事项。您绝对应该将辅助功能作为 A 级测试要求(我们将在处理常见辅助功能问题一文中介绍您应该测试的内容)

- -

此外,您可能还有其他注意事项。如果要创建某种公司 Intranet,以便向经理提供销售数据,并且例如,所有经理都提供了 Windows 手机,则可能需要将移动 IE 支持作为优先事项。

- -

最终的支持图表

- -

因此,我们的最终支持图表最终将如下所示:

- -
    -
  1. A 级:适用于 Windows/Mac 的 Chrome 和 Firefox、适用于 Mac 的 Safari、Windows 的"边缘"和"IE"(每个版本的最后两个版本)、iPhone/iPad 的 iOS Safari、手机/平板电脑上的 Android 股票浏览器(最后两个版本)、适用于 Android 的 Chrome 和 Firefox(最后两个版本)在手机平板电脑上.通过常见测试的可访问性。
    2. -
  2. B 级:IE 8 和 9 用于 Windows,Opera Mini。
    3. -
  3. C级:Opera,其他合适的现代浏览器。
    4. -
- -

你想要测试什么？

- -

当您的代码库有需要测试的新添加项时,在开始测试之前,应编写出需要通过才能接受的测试要求列表。这些要求可以是可视的,也可以是功能性的, 两者结合起来, 成为可用的网站功能。

- -

思考下面的例子 (查看源码 , 在线预览):

- -

- -

此功能的测试标准可以这样编写:

- -

A 级和 B 级:

- - - -

A 级:

- - - -

You may notice from the text in the example that it won't work in IE8 — this is a problem according to our support chart, which you'll have to work on, perhaps by using a feature detection library to implement the functionality in a different way if the browser doesn't support CSS transitions (see Implementing feature detection, later on in the course).您可能会从示例中的文本中注意到它在 IE8 中不起作用 ––根据我们的支持图表,这是一个问题,您必须处理这个问题,如果浏览器不采用其他方式,则可能使用功能检测库以不同的方式实现功能（如果浏览器不支持 CSS 转换的话）(请参阅实现功能检测,稍后将在本课程中)。

- -

您可能还注意到,该按钮仅使用键盘无法使用, 这也需要纠正。也许我们可以使用一些JavaScript来实现一个键盘控件的切换,或者完全使用一些其他的方法?

- -

这些测试条件很有用,因为:

- - - -

建立一个测试实验室

- -

执行浏览器测试的一个选项是自己进行测试。为此,您可能需要使用实际物理设备和模拟环境的组合(使用仿真器或虚拟机)。

- -

真实设备

- -

通常最好让一个实际的设备运行您要测试的浏览器 , 这在行为和整体用户体验方面提供了最高的准确性。对于合理的低级设备实验室,您可能需要以下内容:

- - - -

如果可以获取这些选项,则以下是不错的选项:

- - - -

您的主工作计算机也可以用于安装其他工具以用于特定目的,例如辅助功能审核工具、屏幕阅读器和仿真器/虚拟机。

- -

一些大型公司拥有设备实验室,这些实验室库存了大量不同的设备,使开发人员能够在非常具体的浏览器/设备组合上查找 Bug。较小的公司和个人通常负担不起如此复杂的实验室,因此倾向于使用较小的实验室、仿真器、虚拟机和商业测试应用程序。

- -

我们将介绍下面的其他选项。

- -
-

注意:已做出一些努力用来创建可公开访问的设备实验室, 请参阅 Open Device Labs。

-
- -
-

注意:我们还需要考虑辅助功能 — 可以在计算机上安装许多有用的工具,以方便辅助功能测试,但我们将在本课程的后面部分介绍"处理常见辅助功能问题"一文中的工具。

-
- -

模拟器

- -

仿真器基本上是在计算机内运行并模拟某种设备或特定设备条件的程序,允许您比查找要测试的特定硬件/软件组合更方便地执行某些测试。

- -

仿真器可能与测试设备条件一样简单。例如,如果要对宽度/高度媒体查询进行一些快速而粗劣的测试以进行响应式设计,则可以使用 Firefox 的Responsive Design Mode。 Safari 也有类似的模式,可以通过访问 “Safari > 首选项”和"显示开发"菜单,然后选择"开发"&gt;"输入响应式设计模式"来启用。  Chrome 也有类似的功能:设备模式(请参阅Simulate Mobile Devices with Device Mode)。

- -

不过,您经常必须安装某种仿真器。要测试的最常见设备/浏览器如下所示:

- - - -

您也经常可以为其他移动设备环境找到模拟器，例如：

- - - -
-

注意：许多模拟器实际上需要使用虚拟机（见下文）;在这种情况下，通常提供指令，和/或将虚拟机的使用合并到仿真器的安装程序中。

-
- -

虚拟机

- -

虚拟机是在台式计算机上运行的应用程序，允许您运行整个操作系统的仿真，每个操作系统都划分在自己的虚拟硬盘驱动器中（通常由主机硬盘上存在的单个大文件表示）。有许多流行的虚拟机应用程序可用，例如Parallels，VMWare和Virtual Box;我们个人喜欢后者，因为它是免费的。

- -
-

注意：您需要可用的大容量硬盘空间来运行虚拟机模拟;模拟的每个操作系统都会占用大量内存。您可能倾向于为每次安装选择所需的硬盘空间;你也可能会试图侥幸使用10GB空间，但会被建议使用50GB空间或更多，以便让操作系统运行可靠。大多数虚拟机应用程序提供的一个很好的选择是创建一个动态分配（dynamically allocated）的硬盘驱动器，它会随着需要的增长和缩小而动态改变。

-
- -

要使用虚拟盒，您需要：

- -
    -
  1. 获取要模拟的操作系统的安装程序磁盘或映像（例如ISO文件）。 Virtual Box无法提供这些;大多数，如Windows操作系统，是无法自由分发的商业产品。
    2. -
  2. 下载适用于您的操作系统的相应安装程序并进行安装。
    3. -
  3. 打开应用程序;您将看到如下视图：
    4. -
  4. 要创建新虚拟机，请按左上角的“新建”按钮。
    5. -
  5. 按照说明进行操作，并根据需要填写以下对话框。你会： -
      -
    1. 为新虚拟机提供名称
      2. -
    2. 选择要在其上安装的操作系统和版本
      3. -
    3. 设置应分配多少RAM（我们建议使用2048MB或2GB）
      4. -
    4. 创建虚拟硬盘（在包含立即创建虚拟硬盘，VDI（虚拟磁盘映像）和动态分配的三个对话框中选择默认选项）。
      5. -
    5. 选择虚拟硬盘的文件位置和大小（选择一个合理的名称和位置来保留它，并且大小指定大约50GB，或者您可以轻松指定）。
      6. -
    -
    6. -
- -

现在，新的虚拟框应出现在Virtual Box UI主窗口的左侧菜单中。此时，您可以双击它以打开虚拟机––它将开始启动虚拟机，但它还没有安装操作系统。此时，您需要将对话框指向安装程序映像/磁盘，它将运行在虚拟机上安装它的步骤，就像它是真正的计算机一样。

- -

- -
-

重要提示：您需要确保此时要在虚拟机上安装要安装的操作系统映像，然后立即安装。如果此时取消该进程，它可能会使虚拟机无法使用，并使其成为您需要删除它并再次创建它。这不是致命的，但令人讨厌。

-
- -

完成此过程后，您应该有一台虚拟机在主机窗口内运行操作系统。

- -

- -

您需要像处理任何实际安装一样处理此虚拟操作系统安装 - 例如，安装要测试的浏览器，安装防病毒程序以保护其免受病毒侵害。

- -

拥有多个虚拟机非常有用，特别是对于Windows IE / Edge测试 - 在Windows上，您无法并排安装多个版本的默认浏览器，因此您可能需要构建一个虚拟机库来处理根据需要进行不同测试，例如：

- - - -
-

注意：虚拟机的另一个好处是虚拟磁盘映像是相当独立的。如果您正在团队中工作，则可以创建一个虚拟磁盘映像，然后复制并传递它。如果它是许可产品，只需确保您拥有运行所有Windows副本或正在运行的任何其他副本所需的许可证。

-
- -

自动化和商业应用

- -

正如上一章所述，通过使用某种自动化系统，您可以从浏览器测试中减少很多痛苦。您可以设置自己的测试自动化系统（Selenium是首选的流行应用程序），它确实需要一些设置，但是当您解决问题时可能会相当受益。

- -

还有一些商业工具，如Sauce Labs和Browser Stack，可以为您做这种事情，如果您愿意在测试中投入一些资金，则无需担心设置的问题。

- -

我们将在后续文章中查看如何使用此类工具。

- -

用户测试

- -

在我们继续之前，我们将通过谈论用户测试来完成本文––如果您有一个愿意用户组来测试您的新功能，这可能是一个很好的选择。请记住，这可以像你希望的那样廉价又有效––你的用户群可以是一群朋友，一群同事，或一群无偿或有偿志愿者，这取决于你是否有钱花在测试上。

- -

通常，您可以让用户在某种开发服务器上查看包含新功能的页面或视图，这样您就不会在完成之前放置最终站点或更改。你应该让他们按照一些步骤报告他们得到的结果。提供一组步骤（有时称为脚本）非常有用，这样您就可以获得与您尝试测试的内容相关的更可靠的结果。我们在上面的{{anch("What are you going to test")}} 部分中提到了这一点––很容易将其中详述的测试标准转换为要遵循的步骤。例如，以下内容适用于有视力的用户：

- - - -

运行测试时，最好还是：

- - - -

这些步骤旨在确保您正在测试的浏览器尽可能“纯粹（pure）”，即没有安装任何可能影响测试结果的内容。

- -
-

注意：如果您有可用的硬件，另一个有用的低功耗选项是在低端手机/其他设备上测试您的网站 - 随着网站变得更大并且具有更多效果，网站放慢速度的可能性更高，因此您需要开始给予表现更多考虑。尝试在低端设备上运行您的功能将使更高端设备的体验更有可能。

-
- -
-

注意：某些服务器端开发环境提供了有用的机制，可以将站点更改部署到仅部分用户，从而提供了一种有用的机制，可以在不需要单独的开发服务器的情况下获取由用户子集测试的功能。示例：Django Waffle Flags。

-
- -

总结

- -

阅读本文后，您现在应该知道如何识别目标受众/目标浏览器列表，然后在该列表上有效地执行跨浏览器测试。

- -

接下来，我们将把注意力转向测试可能发现的实际代码问题，从HTML和CSS开始。

- -

{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Introduction","Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS", "Learn/Tools_and_testing/Cross_browser_testing")}}

- - - -

本章内容

- -

-

diff --git a/files/zh-cn/learn/tutorial/how_to_build_a_web_site/index.html b/files/zh-cn/learn/tutorial/how_to_build_a_web_site/index.html deleted file mode 100644 index 9e2e40d682..0000000000 --- a/files/zh-cn/learn/tutorial/how_to_build_a_web_site/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: 如何建设一个网站 -slug: Learn/tutorial/How_to_build_a_web_site -translation_of: Learn -translation_of_original: Learn/tutorial/How_to_build_a_web_site ---- -

  当我们在学习网页设计时，许多人都希望尽快建设一个属于自己的网站。为了让你建站之路更平坦，我们已经缩小了你所需要的最低限度的知识。

- -

我们建议你先从这儿的文章开始 ，认真学习它们，如果你在学习中有关术语的问题，请用我们的词汇表.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 理论
- 知识		技术
- 知识		实践
- 知识
1开始你的web项目
- 在这篇文章中我们首先讨论了在任何一个项目中你所必要的一步：确定你要完成什么和为什么.		  
2英特网是如何工作的
- 这篇文章将为你解释什么是英特网以及它是如何工作的。		  
3 了解网页、网站、服务器、以及搜索引擎之间的不同网络服务器是什么?
- 在这篇文章中，我们将要论述什么是网络服务器，它们是如何运作的以及它们为什么如此重要.		我们需要什么软件（它们用来干什么）?
- 在文中我们将要介绍你在编辑网页，上传文件，以及管理网站中你需要什么软件。
4了解网络上的链接
- 在文章中, 我们将详细的论述网络链接, 这个在万维网中相当重要的一个角色.		  
5了解URLs以及它们的构成
- 在这篇文章中，我们将介绍URLs是什么（同一资源定位器）以及它们是如何构成的。		认识域名
- 在这篇文章中，我们将对域名留下深刻印象：域名是什么，它们如何构成，以及怎样获取一个域名。		 
6剖析一个网页
- 当你在做你自己的网站时，你最好知道一些普通的设计.		 在网上做些什么花费多少钱？
- 涉及到互联网的东西并不像它看起来那么便宜。在文中我们将论述你可能花费多少钱以及为什么。
7设计之外，基础的网页设计 选择下载安装一个编辑器
- 在这篇文章中，我们强调一些事情关于下载安装编译器用于网站开发。
8  创建一个基本的工作环境
- 这篇文章让你用工作站建立你的网站
9 用HTML写一个简单的网页
- 学习如何创造一个简单的网页。		打开文件在你的浏览器中r
- 这篇文章讲解了在浏览器中通过各种方式接入文件，以及这种正确的方式为什么如此重要。
10 什么是HTML标签&如何使用它们
- 这篇文章包含了 HTML 基础:什么是标签以及如何使用它们。		上传文件到服务器
- 本文介绍了如何使用FTP工具发布你的网站
11   -

检查你的网站是否工作正常
- 本指南概述了一些找到并修复常见错误的策略

-
- -

这些是都是你需要的第一个网站学习的基本知识，但如果你想做出更高端更专业的网站，请继续往下读：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 理论
- 知识		技术
- 知识		实践
- 知识
12人们需要什么才能查看你的网站  
13 在你的网页中使用CSS
- 本文将介绍如何使用CSS样式表来改变你的网页样式		 
14什么是无障碍性网页
- 本文介绍了无障碍性网页背后的基本概念。		什么是CSS属性以及该如何使用它们
- CSS特性应该如何使用。本文介绍了图和使用CSS属性选择器应用HTML元素		 
15为各类用户设计101
- 本文提供了基本的无障碍性网站技巧		 -

CSS基本的文字排版
- 最常见的CSS属性概述

- 		 
16 使用图片 
17避开在网页设计中的常见陷阱用户体验（UX）基础设计导航菜单
- -

 

diff --git a/files/zh-cn/learn/tutorial/index.html b/files/zh-cn/learn/tutorial/index.html deleted file mode 100644 index 922d45fbc1..0000000000 --- a/files/zh-cn/learn/tutorial/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Tutorials -slug: Learn/tutorial -tags: - - Index - - NeedsTranslation - - TopicStub -translation_of: Learn -translation_of_original: Learn/tutorial ---- -

It's great to know about Web technologies and the concepts behind them, but at some point it's time to turn theory into practice. We've set up some pathways that will help you get results with Web technology and enjoy the power you unlock as you learn!

- -
-
-

The basics

- -

These are the essentials to follow if you're starting out with Web development.

- -
-
How to build a website
-
This tutorial leads you through all the steps to building a website from scratch.
-
Information Security Basics
-
This tutorial explains the basic principles of information security and how to apply them, especially in cryptography.
-
-
- -
-

In depth

- -

The following provides more advanced use cases for seasoned web developers.

- -
-
Building Web Apps
-
Web Apps are applications that run in a web browser, and you need specific knowledge to become adept at building them. Find out everything you need to know here on MDN!
-
-
-
- -

 

diff --git a/files/zh-cn/learn/web_mechanics/index.html b/files/zh-cn/learn/web_mechanics/index.html deleted file mode 100644 index 53aac91402..0000000000 --- a/files/zh-cn/learn/web_mechanics/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Web 工程学 -slug: learn/Web_Mechanics -tags: - - Web 工程学 - - 初学者 -translation_of: Learn/Common_questions -translation_of_original: Learn/Web_Mechanics ---- -

请访问 常见问题

-- cgit v1.2.3-54-g00ecf From fc56124ac4eda6b3f0349c8a16fa750f27b4c7d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:53 +0100 Subject: unslug zh-cn: modify --- files/zh-cn/_redirects.txt | 1107 +- files/zh-cn/_wikihistory.json | 32758 +++++++++---------- files/zh-cn/conflicting/glossary/chrome/index.html | 3 +- .../zh-cn/conflicting/glossary/doctype/index.html | 3 +- .../conflicting/learn/common_questions/index.html | 3 +- .../cascade_and_inheritance/index.html | 3 +- .../learn/css/building_blocks/index.html | 3 +- .../learn/css/building_blocks/selectors/index.html | 3 +- .../css/building_blocks/styling_tables/index.html | 3 +- .../building_blocks/values_and_units/index.html | 3 +- .../conflicting/learn/css/css_layout/index.html | 3 +- .../first_steps/how_css_is_structured/index.html | 3 +- .../learn/css/first_steps/how_css_works/index.html | 3 +- .../index.html | 6 +- .../index.html | 4 +- .../conflicting/learn/css/first_steps/index.html | 5 +- .../learn/css/styling_text/fundamentals/index.html | 5 +- .../index.html | 4 +- .../css/styling_text/styling_lists/index.html | 3 +- .../javascript_basics/index.html | 3 +- .../creating_hyperlinks/index.html | 3 +- .../video_and_audio_content/index.html | 3 +- files/zh-cn/conflicting/learn/index.html | 3 +- .../manipulating_documents/index.html | 3 +- .../learn/javascript/objects/index.html | 3 +- .../learn/server-side/django/index.html | 3 +- .../index.html | 3 +- files/zh-cn/conflicting/mdn/contribute/index.html | 7 +- .../mdn/guidelines/css_style_guide/index.html | 3 +- .../webextensions/user_interface/index.html | 3 +- .../tools/keyboard_shortcuts/index.html | 3 +- .../zh-cn/conflicting/tools/performance/index.html | 3 +- .../zh-cn/conflicting/web/accessibility/index.html | 3 +- .../web/api/canvas_api/tutorial/index.html | 3 +- .../web/api/crypto/getrandomvalues/index.html | 3 +- .../web/api/document/characterset/index.html | 3 +- .../web/api/document/createevent/index.html | 3 +- .../web/api/document/hasfocus/index.html | 3 +- .../web/api/document_object_model/index.html | 3 +- .../index.html | 3 +- .../elementfrompoint/index.html | 3 +- .../elementsfrompoint/index.html | 3 +- .../documentorshadowroot/getselection/index.html | 3 +- .../documentorshadowroot/stylesheets/index.html | 3 +- .../zh-cn/conflicting/web/api/dommatrix/index.html | 3 +- files/zh-cn/conflicting/web/api/element/index.html | 3 +- .../web/api/event/composedpath/index.html | 3 +- .../api/eventtarget/addeventlistener/index.html | 3 +- .../web/api/eventtarget/dispatchevent/index.html | 3 +- .../api/eventtarget/removeeventlistener/index.html | 3 +- .../introduction/index.html | 3 +- .../conflicting/web/api/geolocation/index.html | 3 +- .../ongotpointercapture/index.html | 3 +- .../api/globaleventhandlers/onmouseup/index.html | 3 +- .../api/globaleventhandlers/onscroll/index.html | 3 +- .../api/globaleventhandlers/ontouchmove/index.html | 3 +- .../web/api/htmlelement/outertext/index.html | 3 +- .../web/api/htmlinputelement/index.html | 3 +- .../api/htmlmediaelement/abort_event/index.html | 3 +- files/zh-cn/conflicting/web/api/index.html | 3 +- .../web/api/mouseevent/altkey/index.html | 3 +- .../web/api/mouseevent/button/index.html | 3 +- .../web/api/mouseevent/relatedtarget/index.html | 3 +- .../web/api/mouseevent/shiftkey/index.html | 3 +- .../web/api/node/getrootnode/index.html | 3 +- files/zh-cn/conflicting/web/api/node/index.html | 3 +- .../index.html | 3 +- .../zh-cn/conflicting/web/api/push_api/index.html | 3 +- files/zh-cn/conflicting/web/api/url/index.html | 3 +- .../conflicting/web/api/web_storage_api/index.html | 3 +- .../conflicting/web/api/webrtc_api/index.html | 3 +- .../web/api/webrtc_api/protocols/index.html | 3 +- .../signaling_and_video_calling/index.html | 3 +- .../index.html | 3 +- .../web/api/window/localstorage/index.html | 3 +- .../conflicting/web/api/window/moveto/index.html | 3 +- .../index.html | 3 +- .../zh-cn/conflicting/web/css/@viewport/index.html | 3 +- .../index.html | 3 +- .../index.html | 3 +- .../index.html | 3 +- .../index.html | 3 +- .../zh-cn/conflicting/web/css/_colon_is/index.html | 7 +- .../web/css/_colon_placeholder-shown/index.html | 7 +- .../web/css/_doublecolon_placeholder/index.html | 7 +- .../web/css/css_backgrounds_and_borders/index.html | 3 +- .../resizing_background_images/index.html | 3 +- .../using_multiple_backgrounds/index.html | 3 +- .../zh-cn/conflicting/web/css/css_color/index.html | 3 +- .../backwards_compatibility_of_flexbox/index.html | 3 +- .../basic_concepts_of_flexbox/index.html | 3 +- .../typical_use_cases_of_flexbox/index.html | 3 +- .../conflicting/web/css/easing-function/index.html | 3 +- .../conflicting/web/guide/html/html5/index.html | 3 +- files/zh-cn/conflicting/web/guide/index.html | 3 +- .../zh-cn/conflicting/web/guide/mobile/index.html | 3 +- .../zh-cn/conflicting/web/html/element/index.html | 3 +- .../html/quirks_mode_and_standards_mode/index.html | 3 +- files/zh-cn/conflicting/web/http/cors/index.html | 3 +- files/zh-cn/conflicting/web/http/csp/index.html | 3 +- .../index.html | 3 +- .../index.html | 3 +- files/zh-cn/conflicting/web/http/status/index.html | 3 +- .../web/javascript/guide/introduction/index.html | 3 +- .../index.html | 3 +- .../regular_expressions/assertions/index.html | 3 +- .../global_objects/arraybuffer/index.html | 3 +- .../reference/global_objects/boolean/index.html | 3 +- .../reference/global_objects/dataview/index.html | 3 +- .../reference/global_objects/date/index.html | 3 +- .../reference/global_objects/error/index.html | 3 +- .../reference/global_objects/evalerror/index.html | 3 +- .../reference/global_objects/function/index.html | 3 +- .../global_objects/generatorfunction/index.html | 3 +- .../global_objects/intl/datetimeformat/index.html | 3 +- .../reference/global_objects/map/index.html | 3 +- .../reference/global_objects/number/index.html | 3 +- .../reference/global_objects/object/index.html | 3 +- .../reference/global_objects/promise/index.html | 3 +- .../global_objects/proxy/proxy/index.html | 3 +- .../reference/global_objects/rangeerror/index.html | 3 +- .../global_objects/referenceerror/index.html | 3 +- .../reference/global_objects/regexp/index.html | 3 +- .../global_objects/sharedarraybuffer/index.html | 3 +- .../reference/global_objects/string/index.html | 3 +- .../reference/global_objects/symbol/index.html | 3 +- .../global_objects/syntaxerror/index.html | 3 +- .../reference/global_objects/typedarray/index.html | 3 +- .../reference/global_objects/typeerror/index.html | 3 +- .../reference/global_objects/urierror/index.html | 3 +- .../reference/global_objects/weakmap/index.html | 3 +- .../reference/global_objects/weakset/index.html | 3 +- .../reference/lexical_grammar/index.html | 3 +- .../web/javascript/reference/operators/index.html | 3 +- .../index.html | 4 +- .../index.html | 4 +- .../index.html | 4 +- .../index.html | 4 +- .../reference/statements/switch/index.html | 3 +- .../zh-cn/conflicting/web/media/formats/index.html | 5 +- .../web/progressive_web_apps/index.html | 3 +- .../progressive_web_apps/introduction/index.html | 3 +- .../responsive_design_building_blocks/index.html | 4 +- .../index.html | 3 +- .../index.html | 3 +- .../web/web_components/using_shadow_dom/index.html | 3 +- .../index.html | 3 +- files/zh-cn/games/introduction/index.html | 3 +- .../index.html | 3 +- .../publishing_games/game_monetization/index.html | 3 +- .../control_mechanisms/mobile_touch/index.html | 3 +- .../finishing_up/index.html | 3 +- .../mouse_controls/index.html | 3 +- files/zh-cn/glossary/abstraction/index.html | 3 +- files/zh-cn/glossary/algorithm/index.html | 3 +- files/zh-cn/glossary/arpa/index.html | 3 +- files/zh-cn/glossary/asynchronous/index.html | 3 +- files/zh-cn/glossary/base64/index.html | 3 +- files/zh-cn/glossary/baseline/index.html | 3 +- files/zh-cn/glossary/browser/index.html | 3 +- files/zh-cn/glossary/card_sorting/index.html | 3 +- files/zh-cn/glossary/character_encoding/index.html | 3 +- files/zh-cn/glossary/compile/index.html | 3 +- files/zh-cn/glossary/compile_time/index.html | 3 +- files/zh-cn/glossary/cross_axis/index.html | 3 +- files/zh-cn/glossary/database/index.html | 3 +- files/zh-cn/glossary/dhtml/index.html | 3 +- .../zh-cn/glossary/digital_certificate/index.html | 3 +- files/zh-cn/glossary/domain_name/index.html | 3 +- files/zh-cn/glossary/element/index.html | 3 +- files/zh-cn/glossary/empty_element/index.html | 3 +- .../glossary/forbidden_header_name/index.html | 3 +- files/zh-cn/glossary/general_header/index.html | 3 +- .../zh-cn/glossary/graceful_degradation/index.html | 3 +- files/zh-cn/glossary/http_header/index.html | 3 +- files/zh-cn/glossary/idempotent/index.html | 3 +- files/zh-cn/glossary/iife/index.html | 3 +- files/zh-cn/glossary/ip_address/index.html | 3 +- files/zh-cn/glossary/localization/index.html | 3 +- files/zh-cn/glossary/main_axis/index.html | 3 +- files/zh-cn/glossary/oop/index.html | 3 +- files/zh-cn/glossary/origin/index.html | 3 +- .../glossary/progressive_enhancement/index.html | 3 +- files/zh-cn/glossary/proxy_server/index.html | 3 +- files/zh-cn/glossary/pseudo-class/index.html | 3 +- files/zh-cn/glossary/request_header/index.html | 3 +- files/zh-cn/glossary/semantics/index.html | 3 +- files/zh-cn/glossary/serialization/index.html | 3 +- files/zh-cn/glossary/simple_header/index.html | 3 +- files/zh-cn/glossary/sloppy_mode/index.html | 3 +- .../zh-cn/glossary/speculative_parsing/index.html | 3 +- files/zh-cn/glossary/time_to_first_byte/index.html | 3 +- files/zh-cn/glossary/type_conversion/index.html | 3 +- files/zh-cn/glossary/xhtml/index.html | 3 +- .../accessibility/css_and_javascript/index.html | 3 +- files/zh-cn/learn/accessibility/html/index.html | 3 +- .../learn/accessibility/multimedia/index.html | 3 +- .../available_text_editors/index.html | 3 +- .../how_does_the_internet_work/index.html | 3 +- .../what_are_browser_developer_tools/index.html | 3 +- .../building_blocks/a_cool_looking_box/index.html | 3 +- .../creating_fancy_letterheaded_paper/index.html | 3 +- .../fundamental_css_comprehension/index.html | 3 +- .../handling_different_text_directions/index.html | 3 +- .../css_layout/legacy_layout_methods/index.html | 3 +- .../learn/css/css_layout/positioning/index.html | 3 +- .../css/first_steps/getting_started/index.html | 3 +- .../learn/css/first_steps/how_css_works/index.html | 3 +- files/zh-cn/learn/css/howto/css_faq/index.html | 3 +- .../learn/css/howto/generated_content/index.html | 3 +- .../learn/css/styling_text/fundamentals/index.html | 3 +- files/zh-cn/learn/css/styling_text/index.html | 3 +- .../css/styling_text/styling_links/index.html | 3 +- .../css/styling_text/styling_lists/index.html | 3 +- .../styling_text/typesetting_a_homepage/index.html | 3 +- .../learn/css/styling_text/web_fonts/index.html | 3 +- .../learn/forms/advanced_form_styling/index.html | 3 +- .../forms/basic_native_form_controls/index.html | 3 +- files/zh-cn/learn/forms/form_validation/index.html | 3 +- .../example_1/index.html | 3 +- .../example_2/index.html | 3 +- .../example_3/index.html | 3 +- .../example_4/index.html | 3 +- .../how_to_build_custom_form_controls/index.html | 3 +- .../forms/how_to_structure_a_web_form/index.html | 3 +- .../forms/html_forms_in_legacy_browsers/index.html | 3 +- files/zh-cn/learn/forms/index.html | 3 +- .../index.html | 3 +- .../sending_and_retrieving_form_data/index.html | 3 +- .../sending_forms_through_javascript/index.html | 3 +- .../zh-cn/learn/forms/styling_web_forms/index.html | 3 +- files/zh-cn/learn/forms/your_first_form/index.html | 3 +- .../author_fast-loading_html_pages/index.html | 3 +- .../html/howto/use_data_attributes/index.html | 3 +- .../document_and_website_structure/index.html | 3 +- .../other_embedding_technologies/index.html | 3 +- .../javascript/asynchronous/async_await/index.html | 5 +- .../choosing_the_right_approach/index.html | 3 +- .../javascript/asynchronous/concepts/index.html | 3 +- .../zh-cn/learn/javascript/asynchronous/index.html | 3 +- .../javascript/asynchronous/introducing/index.html | 3 +- .../javascript/asynchronous/promises/index.html | 3 +- .../asynchronous/timeouts_and_intervals/index.html | 3 +- .../building_blocks/image_gallery/index.html | 3 +- .../adding_bouncing_balls_features/index.html | 3 +- .../index.html | 5 +- .../performance/perceived_performance/index.html | 3 +- .../configuring_server_mime_types/index.html | 3 +- .../learn/server-side/django/admin_site/index.html | 3 +- .../django/development_environment/index.html | 3 +- .../learn/server-side/django/home_page/index.html | 3 +- .../introduction/index.html | 3 +- .../cross_browser_testing/accessibility/index.html | 3 +- .../testing_strategies/index.html | 3 +- files/zh-cn/mdn/at_ten/index.html | 3 +- .../index.html | 3 +- .../index.html | 3 +- .../guidelines/does_this_belong_on_mdn/index.html | 3 +- .../mdn/guidelines/writing_style_guide/index.html | 3 +- .../macros/commonly-used_macros/index.html | 3 +- files/zh-cn/mdn/yari/index.html | 3 +- .../add-ons/webextensions/api/clipboard/index.html | 3 +- .../api/clipboard/setimagedata/index.html | 3 +- .../api/devtools/inspectedwindow/index.html | 3 +- .../add-ons/webextensions/api/menus/index.html | 3 +- .../webextensions/api/tabs/query/index.html | 3 +- .../build_a_cross_browser_extension/index.html | 3 +- .../implement_a_settings_page/index.html | 3 +- .../manifest.json/homepage_url/index.html | 3 +- .../user_interface/sidebars/index.html | 3 +- .../your_second_webextension/index.html | 3 +- .../releases/19/site_compatibility/index.html | 3 +- .../releases/21/site_compatibility/index.html | 3 +- .../releases/23/site_compatibility/index.html | 3 +- .../releases/24/site_compatibility/index.html | 3 +- .../releases/3/updating_extensions/index.html | 3 +- .../zh-cn/orphaned/example_2_-_using_ul/index.html | 3 +- .../games/tools/engines_and_tools/index.html | 3 +- .../orphaned/glossary_of_translation/index.html | 3 +- .../orphaned/learn/how_to_contribute/index.html | 3 +- .../learn/html/forms/html5_updates/index.html | 3 +- .../learn/html/forms_and_buttons/index.html | 3 +- .../mdn/community/conversations/index.html | 3 +- .../orphaned/mdn/community/doc_sprints/index.html | 3 +- files/zh-cn/orphaned/mdn/community/index.html | 3 +- .../mdn/community/whats_happening/index.html | 3 +- .../mdn/community/working_in_community/index.html | 3 +- .../contribute/howto/be_a_beta_tester/index.html | 3 +- .../howto/create_an_mdn_account/index.html | 3 +- .../howto/do_a_technical_review/index.html | 3 +- .../howto/do_an_editorial_review/index.html | 3 +- .../howto/set_the_summary_for_a_page/index.html | 3 +- .../howto/tag_javascript_pages/index.html | 3 +- .../index.html | 3 +- files/zh-cn/orphaned/mdn/editor/basics/index.html | 3 +- .../mdn/editor/basics/page_controls/index.html | 3 +- .../mdn/editor/basics/page_info/index.html | 3 +- files/zh-cn/orphaned/mdn/editor/index.html | 3 +- .../mdn/editor/keyboard_shortcuts/index.html | 3 +- .../orphaned/mdn/editor/source_mode/index.html | 3 +- .../simple_live_sample_demo/index.html | 3 +- .../package_your_extension_/index.html | 3 +- .../porting_a_google_chrome_extension/index.html | 3 +- .../temporary_installation_in_firefox/index.html | 3 +- .../orphaned/mozilla/mozilla_persona/index.html | 3 +- files/zh-cn/orphaned/tools/add-ons/index.html | 3 +- .../orphaned/web/api/analysernode/fft/index.html | 3 +- .../audiocontext/mozaudiochanneltype/index.html | 3 +- .../api/audionode/connect(audioparam)/index.html | 3 +- .../simple_document.cookie_framework/index.html | 3 +- files/zh-cn/orphaned/web/api/entity/index.html | 3 +- .../orphaned/web/api/fetchobserver/index.html | 3 +- .../zh-cn/orphaned/web/api/msselection/index.html | 3 +- files/zh-cn/orphaned/web/api/namelist/index.html | 3 +- .../index.html" | 3 +- .../orphaned/web/api/notification/sound/index.html | 3 +- .../orphaned/web/api/textrange/text/index.html | 3 +- .../websocket_server_vb.net/index.html | 3 +- .../web/api/window/getattention/index.html | 3 +- .../css/css\345\237\272\347\241\200/index.html" | 5 +- .../zh-cn/orphaned/web/guide/html/html/index.html | 3 +- .../orphaned/web/html/element/command/index.html | 3 +- .../orphaned/web/html/element/element/index.html | 3 +- .../web/html/global_attributes/dropzone/index.html | 3 +- .../index.html" | 3 +- .../index.html" | 3 +- .../global_objects/array/prototype/index.html | 3 +- .../asyncfunction/prototype/index.html | 3 +- .../global_objects/asynciterator/index.html | 3 +- files/zh-cn/orphaned/web/localization/index.html | 3 +- .../information_security_basics/index.html | 3 +- .../orphaned/web/specification_list/index.html | 3 +- .../web_components/status_in_firefox/index.html | 3 +- files/zh-cn/tools/3d_view/index.html | 3 +- files/zh-cn/tools/deprecated_tools/index.html | 3 +- .../page_inspector/how_to/edit_fonts/index.html | 3 +- .../index.html | 3 +- .../zh-cn/tools/responsive_design_mode/index.html | 3 +- files/zh-cn/tools/storage_inspector/index.html | 3 +- files/zh-cn/tools/tips/index.html | 3 +- files/zh-cn/tools/web_audio_editor/index.html | 3 +- .../using_the_aria-hidden_attribute/index.html | 3 +- .../aria/roles/button_role/index.html | 3 +- .../zh-cn/web/api/abortcontroller/abort/index.html | 3 +- .../api/abortcontroller/abortcontroller/index.html | 3 +- files/zh-cn/web/api/abortcontroller/index.html | 3 +- .../zh-cn/web/api/ambient_light_events/index.html | 3 +- .../api/ambientlightsensor/illuminance/index.html | 3 +- .../api/baseaudiocontext/createanalyser/index.html | 3 +- .../baseaudiocontext/createbiquadfilter/index.html | 3 +- .../api/baseaudiocontext/createbuffer/index.html | 3 +- .../baseaudiocontext/createbuffersource/index.html | 3 +- .../createchannelmerger/index.html | 3 +- .../createchannelsplitter/index.html | 3 +- .../baseaudiocontext/createconvolver/index.html | 3 +- .../api/baseaudiocontext/createdelay/index.html | 3 +- .../createscriptprocessor/index.html | 3 +- .../baseaudiocontext/createwaveshaper/index.html | 3 +- .../api/baseaudiocontext/currenttime/index.html | 3 +- .../baseaudiocontext/decodeaudiodata/index.html | 3 +- .../api/baseaudiocontext/destination/index.html | 3 +- .../web/api/baseaudiocontext/listener/index.html | 3 +- .../api/baseaudiocontext/onstatechange/index.html | 3 +- .../web/api/baseaudiocontext/samplerate/index.html | 3 +- .../web/api/baseaudiocontext/state/index.html | 3 +- .../api/broadcastchannel/message_event/index.html | 3 +- .../api/canvascapturemediastreamtrack/index.html | 3 +- .../using_channel_messaging/index.html | 3 +- .../web/api/crypto/getrandomvalues/index.html | 3 +- files/zh-cn/web/api/csspagerule/index.html | 3 +- .../api/devicemotioneventacceleration/index.html | 3 +- files/zh-cn/web/api/document/fullscreen/index.html | 3 +- .../web/api/document/fullscreenenabled/index.html | 3 +- .../api/document/onafterscriptexecute/index.html | 3 +- .../api/document/readystatechange_event/index.html | 3 +- .../web/api/document/touchmove_event/index.html | 3 +- .../index.html | 4 +- .../fullscreenelement/index.html | 3 +- .../pointerlockelement/index.html | 3 +- .../element/afterscriptexecute_event/index.html | 3 +- .../element/beforescriptexecute_event/index.html | 3 +- files/zh-cn/web/api/element/blur_event/index.html | 3 +- .../api/element/compositionend_event/index.html | 3 +- .../api/element/compositionstart_event/index.html | 3 +- .../api/element/compositionupdate_event/index.html | 3 +- files/zh-cn/web/api/element/copy_event/index.html | 3 +- files/zh-cn/web/api/element/cut_event/index.html | 3 +- .../web/api/element/domactivate_event/index.html | 3 +- files/zh-cn/web/api/element/error_event/index.html | 3 +- files/zh-cn/web/api/element/focus_event/index.html | 3 +- .../web/api/element/focusout_event/index.html | 3 +- .../web/api/element/mousewheel_event/index.html | 3 +- files/zh-cn/web/api/element/paste_event/index.html | 3 +- .../web/api/elementcssinlinestyle/style/index.html | 3 +- files/zh-cn/web/api/event/cancelbubble/index.html | 3 +- files/zh-cn/web/api/eventsource/close/index.html | 3 +- .../web/api/eventsource/eventsource/index.html | 3 +- files/zh-cn/web/api/eventsource/index.html | 3 +- files/zh-cn/web/api/eventsource/onerror/index.html | 3 +- files/zh-cn/web/api/eventsource/onopen/index.html | 3 +- .../introduction/index.html | 3 +- .../web/api/filereader/abort_event/index.html | 3 +- files/zh-cn/web/api/formdata/delete/index.html | 3 +- .../zh-cn/web/api/fullscreen_api/guide/index.html | 3 +- files/zh-cn/web/api/geolocation_api/index.html | 3 +- .../api/geolocationposition/timestamp/index.html | 3 +- .../ondurationchange/index.html | 3 +- .../htmlanchorelement/referrerpolicy/index.html | 3 +- .../api/htmlcanvaselement/capturestream/index.html | 3 +- .../zh-cn/web/api/htmlelement/accesskey/index.html | 3 +- .../api/htmlelement/animationend_event/index.html | 3 +- .../htmlelement/animationstart_event/index.html | 3 +- .../web/api/htmlelement/change_event/index.html | 3 +- .../zh-cn/web/api/htmlelement/innertext/index.html | 3 +- .../web/api/htmlelement/input_event/index.html | 3 +- .../api/htmlelement/transitionend_event/index.html | 3 +- .../api/htmlhyperlinkelementutils/hash/index.html | 3 +- .../api/htmlhyperlinkelementutils/href/index.html | 3 +- .../web/api/htmlhyperlinkelementutils/index.html | 3 +- .../htmlhyperlinkelementutils/origin/index.html | 3 +- .../htmlhyperlinkelementutils/password/index.html | 3 +- .../htmlhyperlinkelementutils/pathname/index.html | 3 +- .../htmlhyperlinkelementutils/search/index.html | 3 +- .../htmlhyperlinkelementutils/tostring/index.html | 3 +- .../htmlhyperlinkelementutils/username/index.html | 3 +- .../web/api/htmlorforeignelement/blur/index.html | 3 +- .../api/htmlorforeignelement/dataset/index.html | 3 +- .../web/api/htmlorforeignelement/focus/index.html | 3 +- .../web/api/htmlorforeignelement/nonce/index.html | 3 +- .../api/htmlorforeignelement/tabindex/index.html | 3 +- files/zh-cn/web/api/index/index.html | 3 +- .../timing_element_visibility/index.html | 3 +- .../zh-cn/web/api/mediastream/addtrack/index.html | 3 +- .../using_the_notifications_api/index.html | 3 +- .../offlineaudiocontext/complete_event/index.html | 3 +- .../api/payment_request_api/concepts/index.html | 3 +- files/zh-cn/web/api/payment_request_api/index.html | 3 +- files/zh-cn/web/api/performance/memory/index.html | 3 +- files/zh-cn/web/api/pointer_lock_api/index.html | 3 +- files/zh-cn/web/api/response/clone/index.html | 3 +- .../icecandidate_event/index.html | 3 +- .../using_screen_capture/index.html | 3 +- .../api/selection/deletefromdocument/index.html | 3 +- files/zh-cn/web/api/server-sent_events/index.html | 3 +- .../using_server-sent_events/index.html | 3 +- files/zh-cn/web/api/speechrecognition/index.html | 3 +- .../api/speechrecognition/result_event/index.html | 3 +- .../zh-cn/web/api/streams_api/concepts/index.html | 3 +- .../streams_api/using_readable_streams/index.html | 3 +- files/zh-cn/web/api/uievent/view/index.html | 3 +- files/zh-cn/web/api/url/password/index.html | 3 +- .../api/web_audio_api/best_practices/index.html | 3 +- .../structured_clone_algorithm/index.html | 3 +- .../webglrenderingcontext/polygonoffset/index.html | 3 +- .../web/api/webrtc_api/session_lifetime/index.html | 3 +- .../zh-cn/web/api/websocket/binarytype/index.html | 3 +- .../web/api/window/afterprint_event/index.html | 3 +- .../web/api/window/beforeprint_event/index.html | 3 +- .../web/api/window/beforeunload_event/index.html | 3 +- files/zh-cn/web/api/window/blur/index.html | 3 +- .../api/window/domcontentloaded_event/index.html | 3 +- files/zh-cn/web/api/window/load_event/index.html | 3 +- .../zh-cn/web/api/window/pageshow_event/index.html | 3 +- .../api/window/unhandledrejection_event/index.html | 3 +- files/zh-cn/web/api/window/unload_event/index.html | 3 +- .../windoweventhandlers/onbeforeunload/index.html | 3 +- .../windoweventhandlers/onhashchange/index.html | 3 +- .../api/windoweventhandlers/onpopstate/index.html | 3 +- .../api/windoweventhandlers/onunload/index.html | 3 +- .../api/windoworworkerglobalscope/atob/index.html | 3 +- .../api/windoworworkerglobalscope/btoa/index.html | 3 +- .../clearinterval/index.html | 3 +- .../cleartimeout/index.html | 3 +- .../setinterval/index.html | 3 +- .../settimeout/index.html | 3 +- .../api/xmlhttprequest/loadend_event/index.html | 3 +- .../api/xmlhttprequest/loadstart_event/index.html | 3 +- .../api/xmlhttprequest/progress_event/index.html | 3 +- files/zh-cn/web/api/xmlserializer/index.html | 3 +- files/zh-cn/web/css/_colon_blank/index.html | 5 +- files/zh-cn/web/css/containing_block/index.html | 3 +- .../border-radius_generator/index.html | 3 +- .../box-shadow_generator/index.html | 3 +- .../resizing_background_images/index.html | 3 +- .../index.html | 3 +- .../using_multi-column_layouts/index.html | 3 +- .../backwards_compatibility_of_flexbox/index.html | 3 +- .../index.html | 4 +- .../typical_use_cases_of_flexbox/index.html | 3 +- .../in_flow_and_out_of_flow/index.html | 3 +- files/zh-cn/web/css/css_fragmentation/index.html | 3 +- .../index.html | 5 +- .../index.html | 3 +- .../implementing_image_sprites_in_css/index.html | 3 +- .../css/css_images/using_css_gradients/index.html | 3 +- .../consistent_list_indentation/index.html | 3 +- .../using_css_counters/index.html | 3 +- .../basic_concepts/index.html | 3 +- .../floating_and_positioning/index.html | 3 +- .../adding_z-index/index.html | 3 +- .../understanding_z_index/index.html | 3 +- .../stacking_and_float/index.html | 3 +- .../stacking_context_example_1/index.html | 3 +- .../stacking_context_example_2/index.html | 3 +- .../stacking_context_example_3/index.html | 3 +- .../stacking_without_z-index/index.html | 3 +- .../the_stacking_context/index.html | 3 +- .../index.html | 7 +- .../css/cssom_view/coordinate_systems/index.html | 3 +- files/zh-cn/web/css/float/index.html | 3 +- files/zh-cn/web/css/grid-template-rows/index.html | 3 +- .../zh-cn/web/css/layout_cookbook/card/index.html | 3 +- .../css/layout_cookbook/media_objects/index.html | 3 +- files/zh-cn/web/css/media_queries/index.html | 3 +- .../media_queries/testing_media_queries/index.html | 3 +- .../media_queries/using_media_queries/index.html | 3 +- files/zh-cn/web/css/offset/index.html | 3 +- files/zh-cn/web/css/overflow-wrap/index.html | 3 +- .../web/css/text-decoration-thickness/index.html | 3 +- files/zh-cn/web/css/url()/index.html | 3 +- .../web/css/visual_formatting_model/index.html | 3 +- .../web/demos_of_open_web_technologies/index.html | 3 +- .../web/guide/html/editable_content/index.html | 3 +- .../rich-text_editing_in_mozilla/index.html | 3 +- .../using_html_sections_and_outlines/index.html | 3 +- .../introduction_to_web_development/index.html | 3 +- files/zh-cn/web/guide/woff/index.html | 3 +- .../web/html/attributes/autocomplete/index.html | 3 +- .../web/html/attributes/crossorigin/index.html | 3 +- .../zh-cn/web/html/element/input/month/index.html | 3 +- .../zh-cn/web/html/element/input/range/index.html | 3 +- .../x-ms-acceleratorkey/index.html | 3 +- .../x-ms-format-detection/index.html | 3 +- .../web/http/basics_of_http/data_uris/index.html | 3 +- files/zh-cn/web/http/caching/index.html | 3 +- .../list_of_default_accept_values/index.html | 3 +- .../errors/corsmissingallowcredentials/index.html | 3 +- files/zh-cn/web/http/cors/index.html | 5 +- files/zh-cn/web/http/feature_policy/index.html | 3 +- .../feature_policy/using_feature_policy/index.html | 3 +- .../headers/strict-transport-security/index.html | 3 +- .../http/headers/x-dns-prefetch-control/index.html | 3 +- .../web/http/headers/x-frame-options/index.html | 3 +- .../proxy_auto-configuration_pac_file/index.html | 3 +- .../regular_expressions/quantifiers/index.html | 3 +- .../classes/public_class_fields/index.html | 3 +- .../errors/cant_assign_to_property/index.html | 3 +- .../reference/global_objects/math/acosh/index.html | 3 +- .../global_objects/proxy/proxy/apply/index.html | 3 +- .../proxy/proxy/construct/index.html | 3 +- .../proxy/proxy/defineproperty/index.html | 3 +- .../proxy/proxy/deleteproperty/index.html | 3 +- .../global_objects/proxy/proxy/get/index.html | 3 +- .../proxy/getownpropertydescriptor/index.html | 3 +- .../proxy/proxy/getprototypeof/index.html | 3 +- .../global_objects/proxy/proxy/has/index.html | 3 +- .../proxy/proxy/isextensible/index.html | 3 +- .../global_objects/proxy/proxy/ownkeys/index.html | 3 +- .../proxy/proxy/preventextensions/index.html | 3 +- .../global_objects/proxy/proxy/set/index.html | 3 +- .../proxy/proxy/setprototypeof/index.html | 3 +- .../index.html | 4 +- .../global_objects/string/trimend/index.html | 3 +- .../global_objects/string/trimstart/index.html | 3 +- .../reference/operators/addition/index.html | 3 +- .../reference/operators/async_function/index.html | 3 +- .../reference/operators/bitwise_and/index.html | 3 +- .../reference/operators/decrement/index.html | 3 +- .../reference/operators/equality/index.html | 3 +- .../reference/operators/logical_and/index.html | 3 +- .../operators/optional_chaining/index.html | 3 +- .../operators/pipeline_operator/index.html | 3 +- .../reference/operators/remainder/index.html | 3 +- .../reference/template_literals/index.html | 3 +- .../index.html | 7 +- files/zh-cn/web/media/autoplay_guide/index.html | 3 +- .../index.html | 3 +- .../web/media/formats/video_codecs/index.html | 3 +- files/zh-cn/web/media/index.html | 3 +- .../web/performance/how_browsers_work/index.html | 3 +- .../add_to_home_screen/index.html | 3 +- .../web/progressive_web_apps/loading/index.html | 3 +- .../responsive/media_types/index.html | 3 +- .../web/security/subresource_integrity/index.html | 3 +- .../security/transport_layer_security/index.html | 3 +- files/zh-cn/web/svg/attribute/styling/index.html | 3 +- .../zh-cn/web/svg/attribute/text-anchor/index.html | 3 +- .../zh-cn/web/svg/tutorial/svg_and_css/index.html | 3 +- .../web/web_components/html_imports/index.html | 3 +- .../xpath/comparison_with_css_selectors/index.html | 3 +- .../index.html | 3 +- files/zh-cn/web/xslt/element/index.html | 3 +- 592 files changed, 18439 insertions(+), 17251 deletions(-) (limited to 'files/zh-cn/learn') diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index b2bb370f12..9a33475883 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -6,13 +6,14 @@ /zh-CN/docs/AJAX:Getting_Started /zh-CN/docs/Web/Guide/AJAX/Getting_Started /zh-CN/docs/AJAX:开始 /zh-CN/docs/Web/Guide/AJAX/Getting_Started /zh-CN/docs/API /zh-CN/docs/Web/API +/zh-CN/docs/API/Pointer_Lock_API /zh-CN/docs/Web/API/Pointer_Lock_API /zh-CN/docs/A_Basic_RayCaster /zh-CN/docs/Web/API/Canvas_API/A_basic_ray-caster /zh-CN/docs/A_re-introduction_to_JavaScript /zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript /zh-CN/docs/Boolean /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean /zh-CN/docs/CORS_Enabled_Image /zh-CN/docs/Web/HTML/CORS_enabled_image /zh-CN/docs/CSS /zh-CN/docs/Web/CSS -/zh-CN/docs/CSS/:-moz-placeholder /zh-CN/docs/Web/CSS/:-moz-placeholder -/zh-CN/docs/CSS/::-moz-placeholder /zh-CN/docs/Web/CSS/::-moz-placeholder +/zh-CN/docs/CSS/:-moz-placeholder /zh-CN/docs/conflicting/Web/CSS/:placeholder-shown +/zh-CN/docs/CSS/::-moz-placeholder /zh-CN/docs/conflicting/Web/CSS/::placeholder /zh-CN/docs/CSS/::after /zh-CN/docs/Web/CSS/::after /zh-CN/docs/CSS/:first-child /zh-CN/docs/Web/CSS/:first-child /zh-CN/docs/CSS/:only-child /zh-CN/docs/Web/CSS/:only-child @@ -27,25 +28,25 @@ /zh-CN/docs/CSS/CSS_animated_properties /zh-CN/docs/Web/CSS/CSS_animated_properties /zh-CN/docs/CSS/CSS_reference /zh-CN/docs/Web/CSS/Reference /zh-CN/docs/CSS/CSS_values_syntax /zh-CN/docs/Web/CSS -/zh-CN/docs/CSS/CSS_一般问题 /zh-CN/docs/Web/CSS/Common_CSS_Questions +/zh-CN/docs/CSS/CSS_一般问题 /zh-CN/docs/Learn/CSS/Howto/CSS_FAQ /zh-CN/docs/CSS/Child_selectors /zh-CN/docs/Web/CSS/Child_combinator /zh-CN/docs/CSS/Class_selectors /zh-CN/docs/Web/CSS/Class_selectors /zh-CN/docs/CSS/Comments /zh-CN/docs/Web/CSS/Comments -/zh-CN/docs/CSS/Common_CSS_Questions /zh-CN/docs/Web/CSS/Common_CSS_Questions +/zh-CN/docs/CSS/Common_CSS_Questions /zh-CN/docs/Learn/CSS/Howto/CSS_FAQ /zh-CN/docs/CSS/Descendant_selectors /zh-CN/docs/Web/CSS/Descendant_combinator /zh-CN/docs/CSS/General_sibling_selectors /zh-CN/docs/Web/CSS/General_sibling_combinator -/zh-CN/docs/CSS/Getting_Started /zh-CN/docs/Web/Guide/CSS/Getting_started -/zh-CN/docs/CSS/Getting_Started/Boxes /zh-CN/docs/Web/Guide/CSS/Getting_started/Boxes -/zh-CN/docs/CSS/Getting_Started/Cascading_and_inheritance /zh-CN/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance -/zh-CN/docs/CSS/Getting_Started/Color /zh-CN/docs/Web/Guide/CSS/Getting_started/Color -/zh-CN/docs/CSS/Getting_Started/Content /zh-CN/docs/Web/Guide/CSS/Getting_started/Content -/zh-CN/docs/CSS/Getting_Started/How_CSS_works /zh-CN/docs/Web/Guide/CSS/Getting_started/How_CSS_works -/zh-CN/docs/CSS/Getting_Started/Lists /zh-CN/docs/Web/Guide/CSS/Getting_started/Lists -/zh-CN/docs/CSS/Getting_Started/Readable_CSS /zh-CN/docs/Web/Guide/CSS/Getting_started/Readable_CSS -/zh-CN/docs/CSS/Getting_Started/Selectors /zh-CN/docs/Web/Guide/CSS/Getting_started/Selectors -/zh-CN/docs/CSS/Getting_Started/Text_styles /zh-CN/docs/Web/Guide/CSS/Getting_started/Text_styles -/zh-CN/docs/CSS/Getting_Started/What_is_CSS /zh-CN/docs/Web/Guide/CSS/Getting_started/What_is_CSS -/zh-CN/docs/CSS/Getting_Started/Why_use_CSS /zh-CN/docs/Web/Guide/CSS/Getting_started/Why_use_CSS +/zh-CN/docs/CSS/Getting_Started /zh-CN/docs/conflicting/Learn/CSS/First_steps +/zh-CN/docs/CSS/Getting_Started/Boxes /zh-CN/docs/conflicting/Learn/CSS/Building_blocks +/zh-CN/docs/CSS/Getting_Started/Cascading_and_inheritance /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance +/zh-CN/docs/CSS/Getting_Started/Color /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units +/zh-CN/docs/CSS/Getting_Started/Content /zh-CN/docs/Learn/CSS/Howto/Generated_content +/zh-CN/docs/CSS/Getting_Started/How_CSS_works /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works +/zh-CN/docs/CSS/Getting_Started/Lists /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/zh-CN/docs/CSS/Getting_Started/Readable_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_is_structured +/zh-CN/docs/CSS/Getting_Started/Selectors /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Selectors +/zh-CN/docs/CSS/Getting_Started/Text_styles /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Fundamentals_5a3f2ce7cc4f23ec431e57a447af0711 +/zh-CN/docs/CSS/Getting_Started/What_is_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_b66915031fb62b5fee1201086144e209 +/zh-CN/docs/CSS/Getting_Started/Why_use_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 /zh-CN/docs/CSS/ID_selectors /zh-CN/docs/Web/CSS/ID_selectors /zh-CN/docs/CSS/Media /zh-CN/docs/Web/API/CSSMediaRule /zh-CN/docs/CSS/Media/Visual /zh-CN/docs/Web/CSS/@media @@ -54,18 +55,18 @@ /zh-CN/docs/CSS/Specificity /zh-CN/docs/Web/CSS/Specificity /zh-CN/docs/CSS/Syntax /zh-CN/docs/Web/CSS/Syntax /zh-CN/docs/CSS/Tutorials /zh-CN/docs/Web/CSS/Tutorials -/zh-CN/docs/CSS/Tutorials/Using_CSS_flexible_boxes /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +/zh-CN/docs/CSS/Tutorials/Using_CSS_flexible_boxes /zh-CN/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox /zh-CN/docs/CSS/Tutorials/Using_CSS_transforms /zh-CN/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms /zh-CN/docs/CSS/Tutorials/Using_CSS_transitions /zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions /zh-CN/docs/CSS/Type_selectors /zh-CN/docs/Web/CSS/Type_selectors -/zh-CN/docs/CSS/Understanding_z-index /zh-CN/docs/Web/Guide/CSS/Understanding_z_index -/zh-CN/docs/CSS/Understanding_z-index/Adding_z-index /zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Adding_z-index -/zh-CN/docs/CSS/Understanding_z-index/Stacking_and_float /zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_and_float -/zh-CN/docs/CSS/Understanding_z-index/Stacking_without_z-index /zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index -/zh-CN/docs/CSS/Understanding_z-index/The_stacking_context /zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context +/zh-CN/docs/CSS/Understanding_z-index /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index +/zh-CN/docs/CSS/Understanding_z-index/Adding_z-index /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +/zh-CN/docs/CSS/Understanding_z-index/Stacking_and_float /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +/zh-CN/docs/CSS/Understanding_z-index/Stacking_without_z-index /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +/zh-CN/docs/CSS/Understanding_z-index/The_stacking_context /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context /zh-CN/docs/CSS/Universal_selectors /zh-CN/docs/Web/CSS/Universal_selectors /zh-CN/docs/CSS/Value_definition_syntax /zh-CN/docs/Web/CSS/Value_definition_syntax -/zh-CN/docs/CSS/Visual_formatting_model /zh-CN/docs/Web/Guide/CSS/Visual_formatting_model +/zh-CN/docs/CSS/Visual_formatting_model /zh-CN/docs/Web/CSS/Visual_formatting_model /zh-CN/docs/CSS/actual_value /zh-CN/docs/Web/CSS/actual_value /zh-CN/docs/CSS/animation-direction /zh-CN/docs/Web/CSS/animation-direction /zh-CN/docs/CSS/animation-duration /zh-CN/docs/Web/CSS/animation-duration @@ -90,9 +91,10 @@ /zh-CN/docs/CSS/calc /zh-CN/docs/Web/CSS/calc() /zh-CN/docs/CSS/clip /zh-CN/docs/Web/CSS/clip /zh-CN/docs/CSS/cursor /zh-CN/docs/Web/CSS/cursor -/zh-CN/docs/CSS/cursor/url /zh-CN/docs/Web/CSS/cursor/url +/zh-CN/docs/CSS/cursor/url /zh-CN/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property /zh-CN/docs/CSS/display /zh-CN/docs/Web/CSS/display /zh-CN/docs/CSS/flex-grow /zh-CN/docs/Web/CSS/flex-grow +/zh-CN/docs/CSS/float /zh-CN/docs/Web/CSS/float /zh-CN/docs/CSS/float/Webkit_Extensions /zh-CN/docs/Web/CSS/WebKit_Extensions /zh-CN/docs/CSS/font-smooth /zh-CN/docs/Web/CSS/font-smooth /zh-CN/docs/CSS/height /zh-CN/docs/Web/CSS/height @@ -115,7 +117,7 @@ /zh-CN/docs/CSS/text-rendering /zh-CN/docs/Web/CSS/text-rendering /zh-CN/docs/CSS/text-shadow /zh-CN/docs/Web/CSS/text-shadow /zh-CN/docs/CSS/text-transform /zh-CN/docs/Web/CSS/text-transform -/zh-CN/docs/CSS/timing-function /zh-CN/docs/Web/CSS/timing-function +/zh-CN/docs/CSS/timing-function /zh-CN/docs/conflicting/Web/CSS/easing-function /zh-CN/docs/CSS/transform /zh-CN/docs/Web/CSS/transform /zh-CN/docs/CSS/transition /zh-CN/docs/Web/CSS/transition /zh-CN/docs/CSS/transition-timing-function /zh-CN/docs/Web/CSS/transition-timing-function @@ -128,33 +130,33 @@ /zh-CN/docs/CSS/word-spacing /zh-CN/docs/Web/CSS/word-spacing /zh-CN/docs/CSS/z-index /zh-CN/docs/Web/CSS/z-index /zh-CN/docs/CSS/动画 /zh-CN/docs/Web/CSS/animation -/zh-CN/docs/CSS/开始 /zh-CN/docs/Web/Guide/CSS/Getting_started -/zh-CN/docs/CSS/开始/Boxes /zh-CN/docs/Web/Guide/CSS/Getting_started/Boxes -/zh-CN/docs/CSS/开始/Cascading_and_inheritance /zh-CN/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance -/zh-CN/docs/CSS/开始/Color /zh-CN/docs/Web/Guide/CSS/Getting_started/Color -/zh-CN/docs/CSS/开始/Content /zh-CN/docs/Web/Guide/CSS/Getting_started/Content -/zh-CN/docs/CSS/开始/How_CSS_works /zh-CN/docs/Web/Guide/CSS/Getting_started/How_CSS_works -/zh-CN/docs/CSS/开始/Lists /zh-CN/docs/Web/Guide/CSS/Getting_started/Lists -/zh-CN/docs/CSS/开始/Readable_CSS /zh-CN/docs/Web/Guide/CSS/Getting_started/Readable_CSS -/zh-CN/docs/CSS/开始/SVG_and_CSS /zh-CN/docs/Web/Guide/CSS/Getting_started/SVG_and_CSS -/zh-CN/docs/CSS/开始/Selectors /zh-CN/docs/Web/Guide/CSS/Getting_started/Selectors -/zh-CN/docs/CSS/开始/Tables /zh-CN/docs/Web/Guide/CSS/Getting_started/Tables -/zh-CN/docs/CSS/开始/Text_styles /zh-CN/docs/Web/Guide/CSS/Getting_started/Text_styles -/zh-CN/docs/CSS/开始/What_is_CSS /zh-CN/docs/Web/Guide/CSS/Getting_started/What_is_CSS -/zh-CN/docs/CSS/开始/为何使用CSS /zh-CN/docs/Web/Guide/CSS/Getting_started/Why_use_CSS -/zh-CN/docs/CSS/开始/媒体 /zh-CN/docs/Web/Guide/CSS/Getting_started/Media -/zh-CN/docs/CSS/开始/布局 /zh-CN/docs/Web/Guide/CSS/Getting_started/Layout -/zh-CN/docs/CSS:Getting_Started:Boxes /zh-CN/docs/Web/Guide/CSS/Getting_started/Boxes -/zh-CN/docs/CSS:Getting_Started:Cascading_and_inheritance /zh-CN/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance -/zh-CN/docs/CSS:Getting_Started:Color /zh-CN/docs/Web/Guide/CSS/Getting_started/Color -/zh-CN/docs/CSS:Getting_Started:Content /zh-CN/docs/Web/Guide/CSS/Getting_started/Content -/zh-CN/docs/CSS:Getting_Started:How_CSS_works /zh-CN/docs/Web/Guide/CSS/Getting_started/How_CSS_works -/zh-CN/docs/CSS:Getting_Started:Lists /zh-CN/docs/Web/Guide/CSS/Getting_started/Lists -/zh-CN/docs/CSS:Getting_Started:Readable_CSS /zh-CN/docs/Web/Guide/CSS/Getting_started/Readable_CSS -/zh-CN/docs/CSS:Getting_Started:Selectors /zh-CN/docs/Web/Guide/CSS/Getting_started/Selectors -/zh-CN/docs/CSS:Getting_Started:Text_styles /zh-CN/docs/Web/Guide/CSS/Getting_started/Text_styles -/zh-CN/docs/CSS:Getting_Started:What_is_CSS /zh-CN/docs/Web/Guide/CSS/Getting_started/What_is_CSS -/zh-CN/docs/CSS:Getting_Started:Why_use_CSS /zh-CN/docs/Web/Guide/CSS/Getting_started/Why_use_CSS +/zh-CN/docs/CSS/开始 /zh-CN/docs/conflicting/Learn/CSS/First_steps +/zh-CN/docs/CSS/开始/Boxes /zh-CN/docs/conflicting/Learn/CSS/Building_blocks +/zh-CN/docs/CSS/开始/Cascading_and_inheritance /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance +/zh-CN/docs/CSS/开始/Color /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units +/zh-CN/docs/CSS/开始/Content /zh-CN/docs/Learn/CSS/Howto/Generated_content +/zh-CN/docs/CSS/开始/How_CSS_works /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works +/zh-CN/docs/CSS/开始/Lists /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/zh-CN/docs/CSS/开始/Readable_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_is_structured +/zh-CN/docs/CSS/开始/SVG_and_CSS /zh-CN/docs/Web/SVG/Tutorial/SVG_and_CSS +/zh-CN/docs/CSS/开始/Selectors /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Selectors +/zh-CN/docs/CSS/开始/Tables /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables +/zh-CN/docs/CSS/开始/Text_styles /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Fundamentals_5a3f2ce7cc4f23ec431e57a447af0711 +/zh-CN/docs/CSS/开始/What_is_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_b66915031fb62b5fee1201086144e209 +/zh-CN/docs/CSS/开始/为何使用CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 +/zh-CN/docs/CSS/开始/媒体 /zh-CN/docs/Web/Progressive_web_apps/Responsive/Media_types +/zh-CN/docs/CSS/开始/布局 /zh-CN/docs/conflicting/Learn/CSS/CSS_layout +/zh-CN/docs/CSS:Getting_Started:Boxes /zh-CN/docs/conflicting/Learn/CSS/Building_blocks +/zh-CN/docs/CSS:Getting_Started:Cascading_and_inheritance /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance +/zh-CN/docs/CSS:Getting_Started:Color /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units +/zh-CN/docs/CSS:Getting_Started:Content /zh-CN/docs/Learn/CSS/Howto/Generated_content +/zh-CN/docs/CSS:Getting_Started:How_CSS_works /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works +/zh-CN/docs/CSS:Getting_Started:Lists /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/zh-CN/docs/CSS:Getting_Started:Readable_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_is_structured +/zh-CN/docs/CSS:Getting_Started:Selectors /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Selectors +/zh-CN/docs/CSS:Getting_Started:Text_styles /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Fundamentals_5a3f2ce7cc4f23ec431e57a447af0711 +/zh-CN/docs/CSS:Getting_Started:What_is_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_b66915031fb62b5fee1201086144e209 +/zh-CN/docs/CSS:Getting_Started:Why_use_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 /zh-CN/docs/CSS:Media:Visual /zh-CN/docs/Web/CSS/@media /zh-CN/docs/CSS:background /zh-CN/docs/Web/CSS/background /zh-CN/docs/CSS:background-attachment /zh-CN/docs/Web/CSS/background-attachment @@ -168,7 +170,7 @@ /zh-CN/docs/CSS:position /zh-CN/docs/Web/CSS/position /zh-CN/docs/CSS:text-transform /zh-CN/docs/Web/CSS/text-transform /zh-CN/docs/CSS:visibility /zh-CN/docs/Web/CSS/visibility -/zh-CN/docs/CSS:开始 /zh-CN/docs/Web/Guide/CSS/Getting_started +/zh-CN/docs/CSS:开始 /zh-CN/docs/conflicting/Learn/CSS/First_steps /zh-CN/docs/Canvas /zh-CN/docs/Web/API/Canvas_API/Tutorial /zh-CN/docs/Canvas_tutorial/Applying_styles_and_colors /zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors /zh-CN/docs/Canvas_tutorial/Basic_animations /zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_animations @@ -178,7 +180,9 @@ /zh-CN/docs/Canvas_tutorial:Applying_styles_and_colors /zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors /zh-CN/docs/Canvas_tutorial:Using_images /zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images /zh-CN/docs/Canvas教程 /zh-CN/docs/Web/API/Canvas_API/Tutorial +/zh-CN/docs/Chrome /zh-CN/docs/conflicting/Glossary/Chrome /zh-CN/docs/Components /zh-CN/docs/Components_object +/zh-CN/docs/Controlling_DNS_prefetching /zh-CN/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control /zh-CN/docs/Core_JavaScript_1.5_Guide/Objects_and_Properties /zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators /zh-CN/docs/Core_JavaScript_1.5_Guide:Objects_and_Properties /zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators /zh-CN/docs/Core_JavaScript_1.5_Reference/About /zh-CN/docs/Web/JavaScript/Reference/About @@ -193,7 +197,7 @@ /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/input /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/length /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/length /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/pop /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype +/zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/prototype /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/push /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/reverse /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/shift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift @@ -203,7 +207,7 @@ /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Error /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/EvalError /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/EvalError /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function -/zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype +/zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Math /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Math/random /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Number /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number @@ -213,7 +217,7 @@ /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/RegExp/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toSource /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Properties /zh-CN/docs/Web/JavaScript/Reference/Global_Objects /zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Properties/NaN /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN -/zh-CN/docs/Core_JavaScript_1.5_Reference/Reserved_Words /zh-CN/docs/Web/JavaScript/Reference/Reserved_words +/zh-CN/docs/Core_JavaScript_1.5_Reference/Reserved_Words /zh-CN/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar /zh-CN/docs/Core_JavaScript_1.5_Reference/Statements /zh-CN/docs/Web/JavaScript/Reference/Statements /zh-CN/docs/Core_JavaScript_1.5_Reference/Statements/throw /zh-CN/docs/Web/JavaScript/Reference/Statements/throw /zh-CN/docs/Core_JavaScript_1.5_Reference:About /zh-CN/docs/Web/JavaScript/Reference/About @@ -226,7 +230,7 @@ /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:input /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:length /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/length /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:pop /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype +/zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:prototype /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:push /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:reverse /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:shift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift @@ -235,15 +239,16 @@ /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Date /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Error /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Function /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function -/zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Function:prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype +/zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Function:prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Math /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Number /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:RegExp /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Objects:RegExp:lastIndex /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex /zh-CN/docs/Core_JavaScript_1.5_Reference:Global_Properties /zh-CN/docs/Web/JavaScript/Reference/Global_Objects -/zh-CN/docs/Core_JavaScript_1.5_Reference:Reserved_Words /zh-CN/docs/Web/JavaScript/Reference/Reserved_words +/zh-CN/docs/Core_JavaScript_1.5_Reference:Reserved_Words /zh-CN/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar /zh-CN/docs/Core_JavaScript_1.5_Reference:Statements:throw /zh-CN/docs/Web/JavaScript/Reference/Statements/throw +/zh-CN/docs/DHTML /zh-CN/docs/Glossary/DHTML /zh-CN/docs/DOM/Blob /zh-CN/docs/Web/API/Blob /zh-CN/docs/DOM/BlobBuilder /zh-CN/docs/Web/API/BlobBuilder /zh-CN/docs/DOM/CSSRule /zh-CN/docs/Web/API/CSSRule @@ -277,13 +282,13 @@ /zh-CN/docs/DOM/FileList /zh-CN/docs/Web/API/FileList /zh-CN/docs/DOM/FileReader /zh-CN/docs/Web/API/FileReader /zh-CN/docs/DOM/FileReaderSync /zh-CN/docs/Web/API/FileReaderSync -/zh-CN/docs/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API /zh-CN/docs/WebGuide/API/File_System/Introduction -/zh-CN/docs/DOM/File_APIs/Filesystem/文件系统API的基本概念 /zh-CN/docs/WebGuide/API/File_System/Introduction +/zh-CN/docs/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API /zh-CN/docs/Web/API/File_and_Directory_Entries_API/Introduction +/zh-CN/docs/DOM/File_APIs/Filesystem/文件系统API的基本概念 /zh-CN/docs/Web/API/File_and_Directory_Entries_API/Introduction /zh-CN/docs/DOM/HTMLCanvasElement /zh-CN/docs/Web/API/HTMLCanvasElement /zh-CN/docs/DOM/HTMLDocument /zh-CN/docs/Web/API/HTMLDocument /zh-CN/docs/DOM/HTMLFieldSetElement /zh-CN/docs/Web/API/HTMLFieldSetElement /zh-CN/docs/DOM/ImageData /zh-CN/docs/Web/API/ImageData -/zh-CN/docs/DOM/Input.mozSetFileNameArray /zh-CN/docs/Web/API/HTMLInputElement/mozSetFileNameArray +/zh-CN/docs/DOM/Input.mozSetFileNameArray /zh-CN/docs/conflicting/Web/API/HTMLInputElement /zh-CN/docs/DOM/KeyboardEvent /zh-CN/docs/Web/API/KeyboardEvent /zh-CN/docs/DOM/MouseScrollEvent /zh-CN/docs/Web/API/MouseScrollEvent /zh-CN/docs/DOM/MouseWheelEvent /zh-CN/docs/Web/API/MouseWheelEvent @@ -292,7 +297,7 @@ /zh-CN/docs/DOM/Node.appendChild /zh-CN/docs/Web/API/Node/appendChild /zh-CN/docs/DOM/Node.attributes /zh-CN/docs/Web/API/Element/attributes /zh-CN/docs/DOM/Node.baseURI /zh-CN/docs/Web/API/Node/baseURI -/zh-CN/docs/DOM/Node.baseURIObject /zh-CN/docs/Web/API/Node/baseURIObject +/zh-CN/docs/DOM/Node.baseURIObject /zh-CN/docs/conflicting/Web/API/Node /zh-CN/docs/DOM/Node.childNodes /zh-CN/docs/Web/API/Node/childNodes /zh-CN/docs/DOM/Node.cloneNode /zh-CN/docs/Web/API/Node/cloneNode /zh-CN/docs/DOM/Node.compareDocumentPosition /zh-CN/docs/Web/API/Node/compareDocumentPosition @@ -324,7 +329,7 @@ /zh-CN/docs/DOM/NodeList.item /zh-CN/docs/Web/API/NodeList/item /zh-CN/docs/DOM/Selection /zh-CN/docs/Web/API/Selection /zh-CN/docs/DOM/Selection/collapseToStart /zh-CN/docs/Web/API/Selection/collapseToStart -/zh-CN/docs/DOM/Storage /zh-CN/docs/Web/Guide/API/DOM/Storage +/zh-CN/docs/DOM/Storage /zh-CN/docs/conflicting/Web/API/Web_Storage_API /zh-CN/docs/DOM/StyleSheet /zh-CN/docs/Web/API/StyleSheet /zh-CN/docs/DOM/StyleSheet/href /zh-CN/docs/Web/API/StyleSheet/href /zh-CN/docs/DOM/Text.isElementContentWhitespace /zh-CN/docs/Web/API/Text/isElementContentWhitespace @@ -369,7 +374,7 @@ /zh-CN/docs/DOM/document.anchors /zh-CN/docs/Web/API/Document/anchors /zh-CN/docs/DOM/document.applets /zh-CN/docs/Web/API/Document/applets /zh-CN/docs/DOM/document.async /zh-CN/docs/Web/API/XMLDocument/async -/zh-CN/docs/DOM/document.baseURIObject /zh-CN/docs/Web/API/Node/baseURIObject +/zh-CN/docs/DOM/document.baseURIObject /zh-CN/docs/conflicting/Web/API/Node /zh-CN/docs/DOM/document.body /zh-CN/docs/Web/API/Document/body /zh-CN/docs/DOM/document.characterSet /zh-CN/docs/Web/API/Document/characterSet /zh-CN/docs/DOM/document.close /zh-CN/docs/Web/API/Document/close @@ -395,14 +400,14 @@ /zh-CN/docs/DOM/document.height /zh-CN/docs/Web/API/Document/height /zh-CN/docs/DOM/document.images /zh-CN/docs/Web/API/Document/images /zh-CN/docs/DOM/document.importNode /zh-CN/docs/Web/API/Document/importNode -/zh-CN/docs/DOM/document.inputEncoding /zh-CN/docs/Web/API/Document/inputEncoding +/zh-CN/docs/DOM/document.inputEncoding /zh-CN/docs/conflicting/Web/API/Document/characterSet /zh-CN/docs/DOM/document.lastModified /zh-CN/docs/Web/API/Document/lastModified /zh-CN/docs/DOM/document.lastStyleSheetSet /zh-CN/docs/Web/API/Document/lastStyleSheetSet /zh-CN/docs/DOM/document.linkColor /zh-CN/docs/Web/API/Document/linkColor /zh-CN/docs/DOM/document.load /zh-CN/docs/Web/API/XMLDocument/load -/zh-CN/docs/DOM/document.mozFullScreen /zh-CN/docs/Web/API/Document/mozFullScreen -/zh-CN/docs/DOM/document.mozFullScreenElement /zh-CN/docs/Web/API/Document/mozFullScreenElement -/zh-CN/docs/DOM/document.mozFullScreenEnabled /zh-CN/docs/Web/API/Document/mozFullScreenEnabled +/zh-CN/docs/DOM/document.mozFullScreen /zh-CN/docs/Web/API/Document/fullscreen +/zh-CN/docs/DOM/document.mozFullScreenElement /zh-CN/docs/Web/API/DocumentOrShadowRoot/fullscreenElement +/zh-CN/docs/DOM/document.mozFullScreenEnabled /zh-CN/docs/Web/API/Document/fullscreenEnabled /zh-CN/docs/DOM/document.onreadystatechange /en-US/docs/Web/API/Document/readystatechange_event /zh-CN/docs/DOM/document.readyState /zh-CN/docs/Web/API/Document/readyState /zh-CN/docs/DOM/document.referrer /zh-CN/docs/Web/API/Document/referrer @@ -412,7 +417,7 @@ /zh-CN/docs/DOM/element /zh-CN/docs/Web/API/element /zh-CN/docs/DOM/element.addEventListener /zh-CN/docs/Web/API/EventTarget/addEventListener /zh-CN/docs/DOM/element.attributes /zh-CN/docs/Web/API/Element/attributes -/zh-CN/docs/DOM/element.blur /zh-CN/docs/Web/API/HTMLElement/blur +/zh-CN/docs/DOM/element.blur /zh-CN/docs/Web/API/HTMLOrForeignElement/blur /zh-CN/docs/DOM/element.childElementCount /zh-CN/docs/Web/API/ParentNode/childElementCount /zh-CN/docs/DOM/element.childNodes /zh-CN/docs/Web/API/Node/childNodes /zh-CN/docs/DOM/element.classList /zh-CN/docs/Web/API/Element/classList @@ -425,7 +430,7 @@ /zh-CN/docs/DOM/element.cloneNode /zh-CN/docs/Web/API/Node/cloneNode /zh-CN/docs/DOM/element.contentEditable /zh-CN/docs/Web/API/HTMLElement/contentEditable /zh-CN/docs/DOM/element.dir /zh-CN/docs/Web/API/HTMLElement/dir -/zh-CN/docs/DOM/element.focus /zh-CN/docs/Web/API/HTMLElement/focus +/zh-CN/docs/DOM/element.focus /zh-CN/docs/Web/API/HTMLOrForeignElement/focus /zh-CN/docs/DOM/element.getElementsByTagName /zh-CN/docs/Web/API/Element/getElementsByTagName /zh-CN/docs/DOM/element.hasAttributes /zh-CN/docs/Web/API/Element/hasAttributes /zh-CN/docs/DOM/element.hasChildNodes /zh-CN/docs/Web/API/Node/hasChildNodes @@ -434,7 +439,7 @@ /zh-CN/docs/DOM/element.insertAdjacentHTML /zh-CN/docs/Web/API/Element/insertAdjacentHTML /zh-CN/docs/DOM/element.isContentEditable /zh-CN/docs/Web/API/HTMLElement/isContentEditable /zh-CN/docs/DOM/element.mozmatchesselector /zh-CN/docs/Web/API/Element/matches -/zh-CN/docs/DOM/element.onafterscriptexecute /zh-CN/docs/Web/API/Element/onafterscriptexecute +/zh-CN/docs/DOM/element.onafterscriptexecute /zh-CN/docs/Web/API/Document/onafterscriptexecute /zh-CN/docs/DOM/element.onbeforescriptexecute /zh-CN/docs/Web/API/Document/onbeforescriptexecute /zh-CN/docs/DOM/element.onblur /zh-CN/docs/Web/API/GlobalEventHandlers/onblur /zh-CN/docs/DOM/element.onchange /zh-CN/docs/Web/API/GlobalEventHandlers/onchange @@ -456,12 +461,12 @@ /zh-CN/docs/DOM/element.previousElementSibling /zh-CN/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling /zh-CN/docs/DOM/element.removeAttribute /zh-CN/docs/Web/API/Element/removeAttribute /zh-CN/docs/DOM/element.setCapture /zh-CN/docs/Web/API/Element/setCapture -/zh-CN/docs/DOM/element.tabIndex /zh-CN/docs/Web/API/HTMLElement/tabIndex +/zh-CN/docs/DOM/element.tabIndex /zh-CN/docs/Web/API/HTMLOrForeignElement/tabIndex /zh-CN/docs/DOM/element.tagName /zh-CN/docs/Web/API/Element/tagName /zh-CN/docs/DOM/event /zh-CN/docs/Web/API/Event -/zh-CN/docs/DOM/event.altKey /zh-CN/docs/Web/API/event.altKey +/zh-CN/docs/DOM/event.altKey /zh-CN/docs/conflicting/Web/API/MouseEvent/altKey /zh-CN/docs/DOM/event.bubbles /zh-CN/docs/Web/API/Event/bubbles -/zh-CN/docs/DOM/event.button /zh-CN/docs/Web/API/event.button +/zh-CN/docs/DOM/event.button /zh-CN/docs/conflicting/Web/API/MouseEvent/button /zh-CN/docs/DOM/event.cancelBubble /zh-CN/docs/Web/API/UIEvent/cancelBubble /zh-CN/docs/DOM/event.cancelable /zh-CN/docs/Web/API/Event/cancelable /zh-CN/docs/DOM/event.currentTarget /zh-CN/docs/Web/API/Event/currentTarget @@ -470,7 +475,7 @@ /zh-CN/docs/DOM/event.isTrusted /zh-CN/docs/Web/API/Event/isTrusted /zh-CN/docs/DOM/event.pageY /zh-CN/docs/Web/API/UIEvent/pageY /zh-CN/docs/DOM/event.preventDefault /zh-CN/docs/Web/API/Event/preventDefault -/zh-CN/docs/DOM/event.shiftKey /zh-CN/docs/Web/API/event.shiftKey +/zh-CN/docs/DOM/event.shiftKey /zh-CN/docs/conflicting/Web/API/MouseEvent/shiftKey /zh-CN/docs/DOM/event.stopImmediatePropagation /zh-CN/docs/Web/API/Event/stopImmediatePropagation /zh-CN/docs/DOM/event.stopPropagation /zh-CN/docs/Web/API/Event/stopPropagation /zh-CN/docs/DOM/event.timeStamp /zh-CN/docs/Web/API/Event/timeStamp @@ -491,11 +496,11 @@ /zh-CN/docs/DOM/window.URL.revokeObjectURL /zh-CN/docs/Web/API/URL/revokeObjectURL /zh-CN/docs/DOM/window.alert /zh-CN/docs/Web/API/Window/alert /zh-CN/docs/DOM/window.applicationCache /zh-CN/docs/Web/API/Window/applicationCache -/zh-CN/docs/DOM/window.atob /zh-CN/docs/Web/API/WindowBase64/atob -/zh-CN/docs/DOM/window.btoa /zh-CN/docs/Web/API/WindowBase64/btoa +/zh-CN/docs/DOM/window.atob /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/atob +/zh-CN/docs/DOM/window.btoa /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/btoa /zh-CN/docs/DOM/window.cancelAnimationFrame /zh-CN/docs/Web/API/Window/cancelAnimationFrame /zh-CN/docs/DOM/window.clearImmediate /zh-CN/docs/Web/API/Window/clearImmediate -/zh-CN/docs/DOM/window.clearInterval /zh-CN/docs/Web/API/Window/clearInterval +/zh-CN/docs/DOM/window.clearInterval /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /zh-CN/docs/DOM/window.close /zh-CN/docs/Web/API/Window/close /zh-CN/docs/DOM/window.content /zh-CN/docs/Web/API/Window/content /zh-CN/docs/DOM/window.document /zh-CN/docs/Web/API/Window/document @@ -525,17 +530,17 @@ /zh-CN/docs/DOM/window.navigator.userAgent /zh-CN/docs/Web/API/NavigatorID/userAgent /zh-CN/docs/DOM/window.navigator.vendor /zh-CN/docs/Web/API/Navigator/vendor /zh-CN/docs/DOM/window.navigator.vendorSub /zh-CN/docs/Web/API/Navigator/vendorSub -/zh-CN/docs/DOM/window.onbeforeunload /zh-CN/docs/Web/API/Window/onbeforeunload +/zh-CN/docs/DOM/window.onbeforeunload /zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload /zh-CN/docs/DOM/window.oncontextmenu /zh-CN/docs/Web/API/GlobalEventHandlers/oncontextmenu -/zh-CN/docs/DOM/window.onhashchange /zh-CN/docs/Web/API/Window/onhashchange +/zh-CN/docs/DOM/window.onhashchange /zh-CN/docs/Web/API/WindowEventHandlers/onhashchange /zh-CN/docs/DOM/window.oninput /zh-CN/docs/Web/API/GlobalEventHandlers/oninput -/zh-CN/docs/DOM/window.onmouseup /zh-CN/docs/Web/API/Window/onmouseup -/zh-CN/docs/DOM/window.onpopstate /zh-CN/docs/Web/API/Window/onpopstate +/zh-CN/docs/DOM/window.onmouseup /zh-CN/docs/conflicting/Web/API/GlobalEventHandlers/onmouseup +/zh-CN/docs/DOM/window.onpopstate /zh-CN/docs/Web/API/WindowEventHandlers/onpopstate /zh-CN/docs/DOM/window.onresize /zh-CN/docs/Web/API/GlobalEventHandlers/onresize -/zh-CN/docs/DOM/window.onscroll /zh-CN/docs/Web/API/Window/onscroll +/zh-CN/docs/DOM/window.onscroll /zh-CN/docs/conflicting/Web/API/GlobalEventHandlers/onscroll /zh-CN/docs/DOM/window.onselect /zh-CN/docs/Web/API/GlobalEventHandlers/onselect /zh-CN/docs/DOM/window.onsubmit /zh-CN/docs/Web/API/GlobalEventHandlers/onsubmit -/zh-CN/docs/DOM/window.onunload /zh-CN/docs/Web/API/Window/onunload +/zh-CN/docs/DOM/window.onunload /zh-CN/docs/Web/API/WindowEventHandlers/onunload /zh-CN/docs/DOM/window.open /zh-CN/docs/Web/API/Window/open /zh-CN/docs/DOM/window.openDialog /zh-CN/docs/Web/API/Window/openDialog /zh-CN/docs/DOM/window.opener /zh-CN/docs/Web/API/Window/opener @@ -547,12 +552,12 @@ /zh-CN/docs/DOM/window.requestAnimationFrame /zh-CN/docs/Web/API/Window/requestAnimationFrame /zh-CN/docs/DOM/window.scrollByPages /zh-CN/docs/Web/API/Window/scrollByPages /zh-CN/docs/DOM/window.setImmediate /zh-CN/docs/Web/API/Window/setImmediate -/zh-CN/docs/DOM/window.setInterval /zh-CN/docs/Web/API/Window/setInterval -/zh-CN/docs/DOM/window.setTimeout /zh-CN/docs/Web/API/Window/setTimeout -/zh-CN/docs/DOM/window.setTimeout12 /zh-CN/docs/Web/API/Window/setTimeout -/zh-CN/docs/DOM/文件系统API的基本概念 /zh-CN/docs/WebGuide/API/File_System/Introduction +/zh-CN/docs/DOM/window.setInterval /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setInterval +/zh-CN/docs/DOM/window.setTimeout /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout +/zh-CN/docs/DOM/window.setTimeout12 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout +/zh-CN/docs/DOM/文件系统API的基本概念 /zh-CN/docs/Web/API/File_and_Directory_Entries_API/Introduction /zh-CN/docs/DOM:HTMLDocument /zh-CN/docs/Web/API/HTMLDocument -/zh-CN/docs/DOM:Storage /zh-CN/docs/Web/Guide/API/DOM/Storage +/zh-CN/docs/DOM:Storage /zh-CN/docs/conflicting/Web/API/Web_Storage_API /zh-CN/docs/DOM:XMLDocument /zh-CN/docs/Web/API/XMLDocument /zh-CN/docs/DOM:document /zh-CN/docs/Web/API/Document /zh-CN/docs/DOM:document.createElement /zh-CN/docs/Web/API/document/createElement @@ -587,10 +592,11 @@ /zh-CN/docs/Developer_Guide/Adding_APIs_to_the_navigator_object /zh-CN/docs/Mozilla/Developer_guide/Adding_APIs_to_the_navigator_object /zh-CN/docs/Developer_Guide/Source_Code /zh-CN/docs/Mozilla/Developer_guide/Source_Code /zh-CN/docs/Developer_Guide/Source_Code/通过Mercurial获取源码 /zh-CN/docs/Mozilla/Developer_guide/Source_Code/LatestPassingSource -/zh-CN/docs/Document_Object_Model_(DOM)/window.onbeforeunload /zh-CN/docs/Web/API/Window/onbeforeunload +/zh-CN/docs/Document_Object_Model_(DOM)/window.onbeforeunload /zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload /zh-CN/docs/Download_Mozilla_Source_Code /en-US/docs/Mozilla/Developer_guide/Source_Code/Downloading_Source_Archives /zh-CN/docs/DragDrop/拖拽 /zh-CN/docs/Drag_and_Drop /zh-CN/docs/Enumerability_and_ownership_of_properties /zh-CN/docs/Web/JavaScript/Enumerability_and_ownership_of_properties +/zh-CN/docs/Example_2_-_Using_UL /zh-CN/docs/orphaned/Example_2_-_Using_UL /zh-CN/docs/Extension_Frequently_Asked_Questions /zh-CN/docs/Mozilla/add-ons/Extension_Frequently_Asked_Questions_move /zh-CN/docs/Firefox_12_for_developers /zh-CN/docs/Mozilla/Firefox/Releases/12 /zh-CN/docs/Firefox_14_for_developers /zh-CN/docs/Mozilla/Firefox/Releases/14 @@ -603,21 +609,66 @@ /zh-CN/docs/Firefox_22_for_developers /zh-CN/docs/Mozilla/Firefox/Releases/22 /zh-CN/docs/Firefox_3.6_for_developers /zh-CN/docs/Mozilla/Firefox/Releases/3.6 /zh-CN/docs/Firefox_3_for_developers /zh-CN/docs/Mozilla/Firefox/Releases/3 +/zh-CN/docs/Games/Introduction_to_HTML5_Game_Gevelopment_(summary) /zh-CN/docs/Games/Introduction_to_HTML5_Game_Development +/zh-CN/docs/Games/Publishing_games/游戏货币化 /zh-CN/docs/Games/Publishing_games/Game_monetization +/zh-CN/docs/Games/Techniques/Control_mechanisms/移动端触摸控制 /zh-CN/docs/Games/Techniques/Control_mechanisms/Mobile_touch +/zh-CN/docs/Games/Tools/引擎和工具 /zh-CN/docs/orphaned/Games/Tools/Engines_and_tools /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/创建、绘制画布 /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/反弹的墙壁 /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/撞击处理 /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection +/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/收尾工作 /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/让球动起来 /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball -/zh-CN/docs/Getting_Started__junk /zh-CN/docs/Web/Guide/CSS/Getting_started +/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/鼠标控制 /zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls +/zh-CN/docs/Games/简介 /zh-CN/docs/Games/Introduction +/zh-CN/docs/Getting_Started__junk /zh-CN/docs/conflicting/Learn/CSS/First_steps +/zh-CN/docs/Glossary/DTD /zh-CN/docs/conflicting/Glossary/Doctype +/zh-CN/docs/Glossary/Header /zh-CN/docs/Glossary/HTTP_header +/zh-CN/docs/Glossary/IP地址 /zh-CN/docs/Glossary/IP_Address +/zh-CN/docs/Glossary/Serialize /zh-CN/docs/Glossary/Serialization +/zh-CN/docs/Glossary/主轴 /zh-CN/docs/Glossary/Main_Axis +/zh-CN/docs/Glossary/交叉轴 /zh-CN/docs/Glossary/Cross_Axis +/zh-CN/docs/Glossary/代理服务器 /zh-CN/docs/Glossary/Proxy_server +/zh-CN/docs/Glossary/优雅降级 /zh-CN/docs/Glossary/Graceful_degradation +/zh-CN/docs/Glossary/伪类 /zh-CN/docs/Glossary/Pseudo-class /zh-CN/docs/Glossary/作用域 /zh-CN/docs/Glossary/Scope +/zh-CN/docs/Glossary/元素 /zh-CN/docs/Glossary/Element /zh-CN/docs/Glossary/全局文档环境 /zh-CN/docs/Glossary/document_environment +/zh-CN/docs/Glossary/卡片分类法 /zh-CN/docs/Glossary/Card_sorting /zh-CN/docs/Glossary/变量提升 /zh-CN/docs/Glossary/Hoisting /zh-CN/docs/Glossary/回流 /zh-CN/docs/Glossary/Reflow +/zh-CN/docs/Glossary/地址路由参数域 /zh-CN/docs/Glossary/ARPA +/zh-CN/docs/Glossary/域名 /zh-CN/docs/Glossary/Domain_name +/zh-CN/docs/Glossary/基线 /zh-CN/docs/Glossary/baseline +/zh-CN/docs/Glossary/字符编码 /zh-CN/docs/Glossary/character_encoding +/zh-CN/docs/Glossary/幂等 /zh-CN/docs/Glossary/Idempotent +/zh-CN/docs/Glossary/异步 /zh-CN/docs/Glossary/Asynchronous +/zh-CN/docs/Glossary/抽象编程 /zh-CN/docs/Glossary/Abstraction +/zh-CN/docs/Glossary/数字证书 /zh-CN/docs/Glossary/Digital_certificate +/zh-CN/docs/Glossary/数据库 /zh-CN/docs/Glossary/Database +/zh-CN/docs/Glossary/正常模式 /zh-CN/docs/Glossary/Sloppy_mode +/zh-CN/docs/Glossary/浏览器 /zh-CN/docs/Glossary/Browser +/zh-CN/docs/Glossary/渐进增强 /zh-CN/docs/Glossary/Progressive_Enhancement +/zh-CN/docs/Glossary/源 /zh-CN/docs/Glossary/Origin +/zh-CN/docs/Glossary/禁止修改的消息首部 /zh-CN/docs/Glossary/Forbidden_header_name +/zh-CN/docs/Glossary/空元素 /zh-CN/docs/Glossary/Empty_element +/zh-CN/docs/Glossary/立即执行函数表达式 /zh-CN/docs/Glossary/IIFE +/zh-CN/docs/Glossary/第一字节时间 /zh-CN/docs/Glossary/time_to_first_byte +/zh-CN/docs/Glossary/简单头部 /zh-CN/docs/Glossary/Simple_header +/zh-CN/docs/Glossary/算法 /zh-CN/docs/Glossary/Algorithm +/zh-CN/docs/Glossary/类型转换 /zh-CN/docs/Glossary/Type_Conversion +/zh-CN/docs/Glossary/编译 /zh-CN/docs/Glossary/Compile +/zh-CN/docs/Glossary/编译时间 /zh-CN/docs/Glossary/Compile_time +/zh-CN/docs/Glossary/语义 /zh-CN/docs/Glossary/Semantics +/zh-CN/docs/Glossary/请求头 /zh-CN/docs/Glossary/Request_header +/zh-CN/docs/Glossary/通用首部 /zh-CN/docs/Glossary/General_header +/zh-CN/docs/Glossary/面向对象编程 /zh-CN/docs/Glossary/OOP +/zh-CN/docs/Glossary_of_translation /zh-CN/docs/orphaned/Glossary_of_translation /zh-CN/docs/HTML /zh-CN/docs/Web/HTML /zh-CN/docs/HTML/Block-level_elements /zh-CN/docs/Web/HTML/Block-level_elements /zh-CN/docs/HTML/Canvas /zh-CN/docs/Web/API/Canvas_API -/zh-CN/docs/HTML/Canvas/Drawing_graphics_with_canvas /zh-CN/docs/Web/API/Canvas_API/Drawing_graphics_with_canvas +/zh-CN/docs/HTML/Canvas/Drawing_graphics_with_canvas /zh-CN/docs/conflicting/Web/API/Canvas_API/Tutorial /zh-CN/docs/HTML/Canvas/Tutorial /zh-CN/docs/Web/API/Canvas_API/Tutorial -/zh-CN/docs/HTML/Content_Editable /zh-CN/docs/Web/Guide/HTML/Content_Editable +/zh-CN/docs/HTML/Content_Editable /zh-CN/docs/Web/Guide/HTML/Editable_content /zh-CN/docs/HTML/Element /zh-CN/docs/Web/HTML/Element /zh-CN/docs/HTML/Element/Input /zh-CN/docs/Web/HTML/Element/Input /zh-CN/docs/HTML/Element/Source /zh-CN/docs/Web/HTML/Element/source @@ -627,7 +678,7 @@ /zh-CN/docs/HTML/Element/audio /zh-CN/docs/Web/HTML/Element/audio /zh-CN/docs/HTML/Element/canvas /zh-CN/docs/Web/HTML/Element/canvas /zh-CN/docs/HTML/Element/code /zh-CN/docs/Web/HTML/Element/code -/zh-CN/docs/HTML/Element/command /zh-CN/docs/Web/HTML/Element/command +/zh-CN/docs/HTML/Element/command /zh-CN/docs/orphaned/Web/HTML/Element/command /zh-CN/docs/HTML/Element/datalist /zh-CN/docs/Web/HTML/Element/datalist /zh-CN/docs/HTML/Element/header /zh-CN/docs/Web/HTML/Element/header /zh-CN/docs/HTML/Element/iframe /zh-CN/docs/Web/HTML/Element/iframe @@ -637,14 +688,14 @@ /zh-CN/docs/HTML/Element/section /zh-CN/docs/Web/HTML/Element/section /zh-CN/docs/HTML/Element/video /zh-CN/docs/Web/HTML/Element/video /zh-CN/docs/HTML/Element/视频 /zh-CN/docs/Web/HTML/Element/video -/zh-CN/docs/HTML/Focus_management_in_HTML /zh-CN/docs/Web/HTML/Focus_management_in_HTML -/zh-CN/docs/HTML/Forms /zh-CN/docs/Learn/HTML/Forms -/zh-CN/docs/HTML/Forms/Sending_forms_through_JavaScript /zh-CN/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript -/zh-CN/docs/HTML/Forms_in_HTML /zh-CN/docs/Web/Guide/HTML/Forms_in_HTML +/zh-CN/docs/HTML/Focus_management_in_HTML /zh-CN/docs/conflicting/Web/API/Document/hasFocus +/zh-CN/docs/HTML/Forms /zh-CN/docs/Learn/Forms +/zh-CN/docs/HTML/Forms/Sending_forms_through_JavaScript /zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript +/zh-CN/docs/HTML/Forms_in_HTML /zh-CN/docs/orphaned/Learn/HTML/Forms/HTML5_updates /zh-CN/docs/HTML/HTML5 /zh-CN/docs/Web/Guide/HTML/HTML5 /zh-CN/docs/HTML/HTML5-and-his-friends /zh-CN/docs/Web/Guide/HTML/HTML5 -/zh-CN/docs/HTML/HTML5/HTML5_Tags_List /zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list -/zh-CN/docs/HTML/HTML5/HTML5_Thematic_Classification /zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_Thematic_Classification +/zh-CN/docs/HTML/HTML5/HTML5_Tags_List /zh-CN/docs/conflicting/Web/HTML/Element +/zh-CN/docs/HTML/HTML5/HTML5_Thematic_Classification /zh-CN/docs/conflicting/Web/Guide/HTML/HTML5 /zh-CN/docs/HTML/HTML5/HTML5_入门 /zh-CN/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /zh-CN/docs/HTML/HTML_Elements /zh-CN/docs/Web/HTML/Element/Heading_Elements /zh-CN/docs/HTML/HTML_Elements/time /zh-CN/docs/Web/HTML/Element/time @@ -653,13 +704,13 @@ /zh-CN/docs/HTML/块级元素 /zh-CN/docs/Web/HTML/Block-level_elements /zh-CN/docs/HTML\Canvas\Tutorial /zh-CN/docs/Web/API/Canvas_API/Tutorial /zh-CN/docs/HTTP /zh-CN/docs/Web/HTTP -/zh-CN/docs/HTTP/HTTP_response_codes /zh-CN/docs/Web/HTTP/HTTP_response_codes +/zh-CN/docs/HTTP/HTTP_response_codes /zh-CN/docs/conflicting/Web/HTTP/Status /zh-CN/docs/IndexedDB /zh-CN/docs/Web/API/IndexedDB_API /zh-CN/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB /zh-CN/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /zh-CN/docs/IndexedDB/IDBObjectStore /zh-CN/docs/Web/API/IDBObjectStore /zh-CN/docs/IndexedDB/Using_IndexedDB /zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB /zh-CN/docs/Introducing_the_Audio_API_Extension /zh-CN/docs/Introducing_Audio_API_Extension -/zh-CN/docs/Introduction_to_using_XPath_in_JavaScript /zh-CN/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript +/zh-CN/docs/Introduction_to_using_XPath_in_JavaScript /zh-CN/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript /zh-CN/docs/JS-ref /zh-CN/docs/Web/JavaScript/Reference /zh-CN/docs/JS-ref/About /zh-CN/docs/Web/JavaScript/Reference/About /zh-CN/docs/JS-ref/Array /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array @@ -674,14 +725,14 @@ /zh-CN/docs/JS-ref/Array/length /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/length /zh-CN/docs/JS-ref/Array/map /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map /zh-CN/docs/JS-ref/Array/pop /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/zh-CN/docs/JS-ref/Array/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype +/zh-CN/docs/JS-ref/Array/prototype /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/JS-ref/Array/shift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift /zh-CN/docs/JS-ref/Array/slice /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice /zh-CN/docs/JS-ref/Array/some /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some /zh-CN/docs/JS-ref/Array/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toSource /zh-CN/docs/JS-ref/Array/unshift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift /zh-CN/docs/JS-ref/Boolean /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean -/zh-CN/docs/JS-ref/Boolean/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype +/zh-CN/docs/JS-ref/Boolean/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean /zh-CN/docs/JS-ref/Date /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date /zh-CN/docs/JS-ref/Date/getDate /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate /zh-CN/docs/JS-ref/Date/getDay /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay @@ -776,7 +827,7 @@ /zh-CN/docs/JS-ref/Global_Objects/Object/preventExtensions/Global_Objects /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen /zh-CN/docs/JS-ref/Global_Objects/Object/propertyIsEnumerable /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable /zh-CN/docs/JS-ref/Global_Objects/Object/proto /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto -/zh-CN/docs/JS-ref/Global_Objects/Object/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype +/zh-CN/docs/JS-ref/Global_Objects/Object/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object /zh-CN/docs/JS-ref/Global_Objects/Object/seal /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/seal /zh-CN/docs/JS-ref/Global_Objects/Object/setPrototypeOf /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf /zh-CN/docs/JS-ref/Global_Objects/Object/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toSource @@ -787,7 +838,7 @@ /zh-CN/docs/JS-ref/Global_Objects/Proxy /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy /zh-CN/docs/JS-ref/Global_Objects/Set /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set /zh-CN/docs/JS-ref/Global_Objects/WeakSet /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakSet -/zh-CN/docs/JS-ref/Global_Objects/WeakSet/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +/zh-CN/docs/JS-ref/Global_Objects/WeakSet/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet /zh-CN/docs/JS-ref/Global_Objects/decodeURI /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/decodeURI /zh-CN/docs/JS-ref/Global_Objects/isFinite /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/isFinite /zh-CN/docs/JS-ref/Global_Objects/null /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/null @@ -795,7 +846,7 @@ /zh-CN/docs/JS-ref/Global_Objects/undefined /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined /zh-CN/docs/JS-ref/Map /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map /zh-CN/docs/JS-ref/Operators /zh-CN/docs/Web/JavaScript/Reference/Operators -/zh-CN/docs/JS-ref/Operators/Logical_Operators /zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_Operators +/zh-CN/docs/JS-ref/Operators/Logical_Operators /zh-CN/docs/conflicting/Web/JavaScript/Reference/Operators_f71733c8e7001a29c3ec40d8522a4aca /zh-CN/docs/JS-ref/Operators/Operator_Precedence /zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence /zh-CN/docs/JS-ref/Operators/delete /zh-CN/docs/Web/JavaScript/Reference/Operators/delete /zh-CN/docs/JS-ref/Operators/in /zh-CN/docs/Web/JavaScript/Reference/Operators/in @@ -806,7 +857,7 @@ /zh-CN/docs/JS-ref/RegExp /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/JS-ref/RegExp/exec /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec /zh-CN/docs/JS-ref/RegExp/lastIndex /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex -/zh-CN/docs/JS-ref/RegExp/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype +/zh-CN/docs/JS-ref/RegExp/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/JS-ref/RegExp/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toSource /zh-CN/docs/JS-ref/Spread_operator /en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax /zh-CN/docs/JS-ref/Statements /zh-CN/docs/Web/JavaScript/Reference/Statements @@ -821,8 +872,8 @@ /zh-CN/docs/JS-ref/Statements/let /zh-CN/docs/Web/JavaScript/Reference/Statements/let /zh-CN/docs/JS-ref/String /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String /zh-CN/docs/JS-ref/String/Trim /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/Trim -/zh-CN/docs/JS-ref/String/TrimLeft /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/TrimLeft -/zh-CN/docs/JS-ref/String/TrimRight /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/TrimRight +/zh-CN/docs/JS-ref/String/TrimLeft /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart +/zh-CN/docs/JS-ref/String/TrimRight /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd /zh-CN/docs/JS-ref/String/concat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/concat /zh-CN/docs/JS-ref/String/contains /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/includes /zh-CN/docs/JS-ref/String/endsWith /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith @@ -842,14 +893,14 @@ /zh-CN/docs/JSDBGAPI_参考 /zh-CN/docs/JSDBGAPI_Reference /zh-CN/docs/JavaScript /zh-CN/docs/Web/JavaScript /zh-CN/docs/JavaScript-840092-dup /zh-CN/docs/Web/JavaScript -/zh-CN/docs/JavaScript-840092-dup/Introduction_to_Object-Oriented_JavaScript /zh-CN/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +/zh-CN/docs/JavaScript-840092-dup/Introduction_to_Object-Oriented_JavaScript /zh-CN/docs/conflicting/Learn/JavaScript/Objects /zh-CN/docs/JavaScript/A_re-introduction_to_JavaScript /zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript /zh-CN/docs/JavaScript/Data_structures /zh-CN/docs/Web/JavaScript/Data_structures /zh-CN/docs/JavaScript/ECMAScript_6_support_in_Mozilla /zh-CN/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla -/zh-CN/docs/JavaScript/Getting_Started /zh-CN/docs/Web/JavaScript/Getting_Started +/zh-CN/docs/JavaScript/Getting_Started /zh-CN/docs/conflicting/Learn/Getting_started_with_the_web/JavaScript_basics /zh-CN/docs/JavaScript/Guide /zh-CN/docs/Web/JavaScript/Guide /zh-CN/docs/JavaScript/Guide-redirect-1 /zh-CN/docs/Web/JavaScript/Guide -/zh-CN/docs/JavaScript/Guide/About /zh-CN/docs/Web/JavaScript/Guide/About +/zh-CN/docs/JavaScript/Guide/About /zh-CN/docs/conflicting/Web/JavaScript/Guide/Introduction /zh-CN/docs/JavaScript/Guide/Closures /zh-CN/docs/Web/JavaScript/Closures /zh-CN/docs/JavaScript/Guide/Details_of_the_Object_Model /zh-CN/docs/Web/JavaScript/Guide/Details_of_the_Object_Model /zh-CN/docs/JavaScript/Guide/Expressions_and_Operators /zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators @@ -857,7 +908,7 @@ /zh-CN/docs/JavaScript/Guide/Inheritance_Revisited /zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /zh-CN/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain /zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /zh-CN/docs/JavaScript/Guide/Iterators_and_Generators /zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators -/zh-CN/docs/JavaScript/Guide/JavaScript_Overview /zh-CN/docs/Web/JavaScript/Guide/JavaScript_Overview +/zh-CN/docs/JavaScript/Guide/JavaScript_Overview /zh-CN/docs/conflicting/Web/JavaScript/Guide/Introduction_6f341ba6db4b060ccbd8dce4a0d5214b /zh-CN/docs/JavaScript/Guide/Predefined_Core_Objects /zh-CN/docs/Web/JavaScript/Guide /zh-CN/docs/JavaScript/Guide/Regular_Expressions /zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions /zh-CN/docs/JavaScript/Guide/Sameness /zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness @@ -866,7 +917,7 @@ /zh-CN/docs/JavaScript/Guide/Values,_variables,_and_literals /zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types /zh-CN/docs/JavaScript/Guide/Working_with_Objects /zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects /zh-CN/docs/JavaScript/Guide/闭包 /zh-CN/docs/Web/JavaScript/Closures -/zh-CN/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript /zh-CN/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +/zh-CN/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript /zh-CN/docs/conflicting/Learn/JavaScript/Objects /zh-CN/docs/JavaScript/JavaScript_technologies_overview /zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview /zh-CN/docs/JavaScript/JavaScript中的新特性 /zh-CN/docs/Web/JavaScript/New_in_JavaScript /zh-CN/docs/JavaScript/JavaScript中的新特性/1.7 /zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.7 @@ -892,14 +943,14 @@ /zh-CN/docs/JavaScript/Reference/Array/length /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/length /zh-CN/docs/JavaScript/Reference/Array/map /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map /zh-CN/docs/JavaScript/Reference/Array/pop /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/zh-CN/docs/JavaScript/Reference/Array/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype +/zh-CN/docs/JavaScript/Reference/Array/prototype /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/JavaScript/Reference/Array/shift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift /zh-CN/docs/JavaScript/Reference/Array/slice /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice /zh-CN/docs/JavaScript/Reference/Array/some /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some /zh-CN/docs/JavaScript/Reference/Array/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toSource /zh-CN/docs/JavaScript/Reference/Array/unshift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift /zh-CN/docs/JavaScript/Reference/Boolean /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean -/zh-CN/docs/JavaScript/Reference/Boolean/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype +/zh-CN/docs/JavaScript/Reference/Boolean/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean /zh-CN/docs/JavaScript/Reference/Date /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date /zh-CN/docs/JavaScript/Reference/Date/getDate /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate /zh-CN/docs/JavaScript/Reference/Date/getDay /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay @@ -939,14 +990,14 @@ /zh-CN/docs/JavaScript/Reference/Global_Objects/Array/length /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/length /zh-CN/docs/JavaScript/Reference/Global_Objects/Array/map /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map /zh-CN/docs/JavaScript/Reference/Global_Objects/Array/pop /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/zh-CN/docs/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype +/zh-CN/docs/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/JavaScript/Reference/Global_Objects/Array/shift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift /zh-CN/docs/JavaScript/Reference/Global_Objects/Array/slice /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice /zh-CN/docs/JavaScript/Reference/Global_Objects/Array/some /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some /zh-CN/docs/JavaScript/Reference/Global_Objects/Array/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toSource /zh-CN/docs/JavaScript/Reference/Global_Objects/Array/unshift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift /zh-CN/docs/JavaScript/Reference/Global_Objects/Boolean /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean -/zh-CN/docs/JavaScript/Reference/Global_Objects/Boolean/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype +/zh-CN/docs/JavaScript/Reference/Global_Objects/Boolean/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean /zh-CN/docs/JavaScript/Reference/Global_Objects/Date /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date /zh-CN/docs/JavaScript/Reference/Global_Objects/Date/getDate /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate /zh-CN/docs/JavaScript/Reference/Global_Objects/Date/getDay /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay @@ -1036,26 +1087,26 @@ /zh-CN/docs/JavaScript/Reference/Global_Objects/Object/preventExtensions/Global_Objects /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen /zh-CN/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable /zh-CN/docs/JavaScript/Reference/Global_Objects/Object/proto /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto -/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype +/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object /zh-CN/docs/JavaScript/Reference/Global_Objects/Object/seal /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/seal /zh-CN/docs/JavaScript/Reference/Global_Objects/Object/setPrototypeOf /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf /zh-CN/docs/JavaScript/Reference/Global_Objects/Object/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toSource /zh-CN/docs/JavaScript/Reference/Global_Objects/Object/toString /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toString /zh-CN/docs/JavaScript/Reference/Global_Objects/Object/valueOf /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf /zh-CN/docs/JavaScript/Reference/Global_Objects/Object/watch /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/watch -/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/原型 /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype +/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/原型 /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object /zh-CN/docs/JavaScript/Reference/Global_Objects/ParallelArray /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ParallelArray /zh-CN/docs/JavaScript/Reference/Global_Objects/Proxy /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy /zh-CN/docs/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/JavaScript/Reference/Global_Objects/RegExp/exec /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec /zh-CN/docs/JavaScript/Reference/Global_Objects/RegExp/lastIndex /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex -/zh-CN/docs/JavaScript/Reference/Global_Objects/RegExp/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype +/zh-CN/docs/JavaScript/Reference/Global_Objects/RegExp/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/JavaScript/Reference/Global_Objects/RegExp/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toSource /zh-CN/docs/JavaScript/Reference/Global_Objects/Set /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set /zh-CN/docs/JavaScript/Reference/Global_Objects/String /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String /zh-CN/docs/JavaScript/Reference/Global_Objects/String/Trim /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/Trim -/zh-CN/docs/JavaScript/Reference/Global_Objects/String/TrimLeft /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/TrimLeft -/zh-CN/docs/JavaScript/Reference/Global_Objects/String/TrimRight /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/TrimRight +/zh-CN/docs/JavaScript/Reference/Global_Objects/String/TrimLeft /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart +/zh-CN/docs/JavaScript/Reference/Global_Objects/String/TrimRight /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd /zh-CN/docs/JavaScript/Reference/Global_Objects/String/concat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/concat /zh-CN/docs/JavaScript/Reference/Global_Objects/String/contains /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/includes /zh-CN/docs/JavaScript/Reference/Global_Objects/String/endsWith /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith @@ -1070,7 +1121,7 @@ /zh-CN/docs/JavaScript/Reference/Global_Objects/String/toUpperCase /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase /zh-CN/docs/JavaScript/Reference/Global_Objects/WeakMap /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap /zh-CN/docs/JavaScript/Reference/Global_Objects/WeakSet /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakSet -/zh-CN/docs/JavaScript/Reference/Global_Objects/WeakSet/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +/zh-CN/docs/JavaScript/Reference/Global_Objects/WeakSet/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet /zh-CN/docs/JavaScript/Reference/Global_Objects/decodeURI /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/decodeURI /zh-CN/docs/JavaScript/Reference/Global_Objects/isFinite /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/isFinite /zh-CN/docs/JavaScript/Reference/Global_Objects/null /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/null @@ -1078,7 +1129,7 @@ /zh-CN/docs/JavaScript/Reference/Global_Objects/undefined /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined /zh-CN/docs/JavaScript/Reference/Map /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map /zh-CN/docs/JavaScript/Reference/Operators /zh-CN/docs/Web/JavaScript/Reference/Operators -/zh-CN/docs/JavaScript/Reference/Operators/Logical_Operators /zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_Operators +/zh-CN/docs/JavaScript/Reference/Operators/Logical_Operators /zh-CN/docs/conflicting/Web/JavaScript/Reference/Operators_f71733c8e7001a29c3ec40d8522a4aca /zh-CN/docs/JavaScript/Reference/Operators/Operator_Precedence /zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence /zh-CN/docs/JavaScript/Reference/Operators/delete /zh-CN/docs/Web/JavaScript/Reference/Operators/delete /zh-CN/docs/JavaScript/Reference/Operators/in /zh-CN/docs/Web/JavaScript/Reference/Operators/in @@ -1089,7 +1140,7 @@ /zh-CN/docs/JavaScript/Reference/RegExp /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/JavaScript/Reference/RegExp/exec /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec /zh-CN/docs/JavaScript/Reference/RegExp/lastIndex /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex -/zh-CN/docs/JavaScript/Reference/RegExp/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype +/zh-CN/docs/JavaScript/Reference/RegExp/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/JavaScript/Reference/RegExp/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toSource /zh-CN/docs/JavaScript/Reference/Spread_operator /en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax /zh-CN/docs/JavaScript/Reference/Statements /zh-CN/docs/Web/JavaScript/Reference/Statements @@ -1104,8 +1155,8 @@ /zh-CN/docs/JavaScript/Reference/Statements/let /zh-CN/docs/Web/JavaScript/Reference/Statements/let /zh-CN/docs/JavaScript/Reference/String /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String /zh-CN/docs/JavaScript/Reference/String/Trim /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/Trim -/zh-CN/docs/JavaScript/Reference/String/TrimLeft /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/TrimLeft -/zh-CN/docs/JavaScript/Reference/String/TrimRight /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/TrimRight +/zh-CN/docs/JavaScript/Reference/String/TrimLeft /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart +/zh-CN/docs/JavaScript/Reference/String/TrimRight /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd /zh-CN/docs/JavaScript/Reference/String/concat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/concat /zh-CN/docs/JavaScript/Reference/String/contains /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/includes /zh-CN/docs/JavaScript/Reference/String/endsWith /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith @@ -1139,7 +1190,12 @@ /zh-CN/docs/JavaScript的同源策略 /zh-CN/docs/Web/Security/Same-origin_policy /zh-CN/docs/JavaScript语言资源 /zh-CN/docs/Web/JavaScript/Language_Resources /zh-CN/docs/Learn/CSS/Building_blocks/Advanced_box_effects /zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects +/zh-CN/docs/Learn/CSS/Building_blocks/处理_不同_方向的_文本 /zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions +/zh-CN/docs/Learn/CSS/CSS_layout/传统的布局方法 /zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods +/zh-CN/docs/Learn/CSS/CSS_layout/定位 /zh-CN/docs/Learn/CSS/CSS_layout/Positioning /zh-CN/docs/Learn/CSS/CSS_layout/网格 /zh-CN/docs/Learn/CSS/CSS_layout/Grids +/zh-CN/docs/Learn/CSS/First_steps/CSS如何运行 /zh-CN/docs/Learn/CSS/First_steps/How_CSS_works +/zh-CN/docs/Learn/CSS/First_steps/开始 /zh-CN/docs/Learn/CSS/First_steps/Getting_started /zh-CN/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps /zh-CN/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors /zh-CN/docs/Learn/CSS/Introduction_to_CSS/Box_model /en-US/docs/Learn/CSS/Building_blocks/The_box_model @@ -1147,6 +1203,7 @@ /zh-CN/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /zh-CN/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators /zh-CN/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS /en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS +/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension /zh-CN/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension /zh-CN/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works /zh-CN/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements /en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements /zh-CN/docs/Learn/CSS/Introduction_to_CSS/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors @@ -1155,43 +1212,102 @@ /zh-CN/docs/Learn/CSS/Introduction_to_CSS/Values_and_units /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /zh-CN/docs/Learn/CSS/Introduction_to_CSS/语法 /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured /zh-CN/docs/Learn/CSS/Styling_boxes /en-US/docs/Learn/CSS/Building_blocks +/zh-CN/docs/Learn/CSS/Styling_boxes/A_cool_looking_box /zh-CN/docs/Learn/CSS/Building_blocks/A_cool_looking_box /zh-CN/docs/Learn/CSS/Styling_boxes/Advanced_box_effects /zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects /zh-CN/docs/Learn/CSS/Styling_boxes/Borders /en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders /zh-CN/docs/Learn/CSS/Styling_boxes/Box_model_recap /en-US/docs/Learn/CSS/Building_blocks/The_box_model +/zh-CN/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper /zh-CN/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper /zh-CN/docs/Learn/CSS/Styling_boxes/Styling_tables /zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables -/zh-CN/docs/Learn/CSS/Styling_boxes/创建精美的信纸 /zh-CN/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper +/zh-CN/docs/Learn/CSS/Styling_boxes/创建精美的信纸 /zh-CN/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper /zh-CN/docs/Learn/CSS/Styling_boxes/背景 /en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders +/zh-CN/docs/Learn/CSS/为文本添加样式 /zh-CN/docs/Learn/CSS/Styling_text +/zh-CN/docs/Learn/CSS/为文本添加样式/Fundamentals /zh-CN/docs/Learn/CSS/Styling_text/Fundamentals +/zh-CN/docs/Learn/CSS/为文本添加样式/Styling_links /zh-CN/docs/Learn/CSS/Styling_text/Styling_links +/zh-CN/docs/Learn/CSS/为文本添加样式/Styling_lists /zh-CN/docs/Learn/CSS/Styling_text/Styling_lists +/zh-CN/docs/Learn/CSS/为文本添加样式/Typesetting_a_homepage /zh-CN/docs/Learn/CSS/Styling_text/Typesetting_a_homepage +/zh-CN/docs/Learn/CSS/为文本添加样式/Web_字体 /zh-CN/docs/Learn/CSS/Styling_text/Web_fonts +/zh-CN/docs/Learn/Common_questions/实用文本编辑器 /zh-CN/docs/Learn/Common_questions/Available_text_editors /zh-CN/docs/Learn/Common_questions/网页，网站，网页服务器和搜索引擎的区别是什么？ /zh-CN/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines +/zh-CN/docs/Learn/Discover_browser_developer_tools /zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools /zh-CN/docs/Learn/Getting_started_with_the_web/CSS_基础 /zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics /zh-CN/docs/Learn/Getting_started_with_the_web/你的网页将呈现什么样子？ /zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like /zh-CN/docs/Learn/Getting_started_with_the_web/网络是如何工作的 /zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works -/zh-CN/docs/Learn/HTML/Forms/My_first_HTML_form /zh-CN/docs/Learn/HTML/Forms/Your_first_HTML_form +/zh-CN/docs/Learn/HTML/Forms /zh-CN/docs/Learn/Forms +/zh-CN/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms /zh-CN/docs/Learn/Forms/Advanced_form_styling +/zh-CN/docs/Learn/HTML/Forms/Data_form_validation /zh-CN/docs/Learn/Forms/Form_validation +/zh-CN/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers /zh-CN/docs/Learn/Forms/HTML_forms_in_legacy_browsers +/zh-CN/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets /zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls +/zh-CN/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_1 /zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls/Example_1 +/zh-CN/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_2 /zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls/Example_2 +/zh-CN/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_3 /zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls/Example_3 +/zh-CN/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_4 /zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls/Example_4 +/zh-CN/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form /zh-CN/docs/Learn/Forms/How_to_structure_a_web_form +/zh-CN/docs/Learn/HTML/Forms/My_first_HTML_form /zh-CN/docs/Learn/Forms/Your_first_form +/zh-CN/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets /zh-CN/docs/Learn/Forms/Property_compatibility_table_for_form_controls +/zh-CN/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data /zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data +/zh-CN/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript /zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript +/zh-CN/docs/Learn/HTML/Forms/Styling_HTML_forms /zh-CN/docs/Learn/Forms/Styling_web_forms +/zh-CN/docs/Learn/HTML/Forms/The_native_form_widgets /zh-CN/docs/Learn/Forms/Basic_native_form_controls +/zh-CN/docs/Learn/HTML/Forms/Your_first_HTML_form /zh-CN/docs/Learn/Forms/Your_first_form +/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/其他嵌入技术 /zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies /zh-CN/docs/Learn/HTML/Multimedia_and_embedding/在网页中添加矢量图形 /zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web /zh-CN/docs/Learn/JavaScript/First_steps/变量 /zh-CN/docs/Learn/JavaScript/First_steps/Variables /zh-CN/docs/Learn/JavaScript/First_steps/第一点 /zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash +/zh-CN/docs/Learn/JavaScript/Objects/向“弹跳球”演示程序添加新功能 /zh-CN/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features +/zh-CN/docs/Learn/JavaScript/Objects/测试你的技能:面向对象的Javascript /zh-CN/docs/Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript +/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/介绍 /zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction /zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/介绍 /zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction +/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/可访问性 /zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility +/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/测试策略 /zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies /zh-CN/docs/Learn/Tools_and_testing/跨服务器测试 /zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing /zh-CN/docs/Learn/Tools_and_testing/跨服务器测试/Automated_testing /zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing /zh-CN/docs/Learn/Tools_and_testing/跨服务器测试/HTML_and_CSS /zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS /zh-CN/docs/Learn/Tools_and_testing/跨服务器测试/Your_own_automation_environment /zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment +/zh-CN/docs/Learn/tutorial /zh-CN/docs/conflicting/Learn_30ccce5e65b5ce795fc2e288fe9d012b +/zh-CN/docs/Learn/tutorial/How_to_build_a_web_site /zh-CN/docs/conflicting/Learn +/zh-CN/docs/Localization /zh-CN/docs/Glossary/Localization +/zh-CN/docs/MDC:怎样进行帮助 /zh-CN/docs/conflicting/MDN/Contribute /zh-CN/docs/MDN/CSS /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties +/zh-CN/docs/MDN/Community /zh-CN/docs/orphaned/MDN/Community +/zh-CN/docs/MDN/Community/Conversations /zh-CN/docs/orphaned/MDN/Community/Conversations +/zh-CN/docs/MDN/Community/Doc_sprints /zh-CN/docs/orphaned/MDN/Community/Doc_sprints +/zh-CN/docs/MDN/Community/Whats_happening /zh-CN/docs/orphaned/MDN/Community/Whats_happening +/zh-CN/docs/MDN/Community/在社区工作 /zh-CN/docs/orphaned/MDN/Community/Working_in_community /zh-CN/docs/MDN/Contribute/Content /zh-CN/docs/MDN/Guidelines /zh-CN/docs/MDN/Contribute/Content/CSS_style_guide /zh-CN/docs/MDN/Guidelines/CSS_style_guide -/zh-CN/docs/MDN/Contribute/Content/Content_blocks /zh-CN/docs/MDN/Guidelines/Content_blocks -/zh-CN/docs/MDN/Contribute/Content/Custom_macros /zh-CN/docs/MDN/Structures/Macros/Custom_macros +/zh-CN/docs/MDN/Contribute/Content/Content_blocks /zh-CN/docs/conflicting/MDN/Guidelines/CSS_style_guide +/zh-CN/docs/MDN/Contribute/Content/Custom_macros /zh-CN/docs/MDN/Structures/Macros/Commonly-used_macros /zh-CN/docs/MDN/Contribute/Content/Layout /zh-CN/docs/MDN/Guidelines/Layout -/zh-CN/docs/MDN/Contribute/Content/Rules_Of_MDN_Documenting /zh-CN/docs/MDN/Guidelines/Rules_Of_MDN_Documenting -/zh-CN/docs/MDN/Contribute/Content/Style_guide /zh-CN/docs/MDN/Guidelines/Style_guide +/zh-CN/docs/MDN/Contribute/Content/Rules_Of_MDN_Documenting /zh-CN/docs/MDN/Guidelines/Does_this_belong_on_MDN +/zh-CN/docs/MDN/Contribute/Content/Style_guide /zh-CN/docs/MDN/Guidelines/Writing_style_guide /zh-CN/docs/MDN/Contribute/Howto/Compatibility_tables /zh-CN/docs/MDN/Structures/Compatibility_tables +/zh-CN/docs/MDN/Contribute/Howto/Create_an_MDN_account /zh-CN/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account +/zh-CN/docs/MDN/Contribute/Howto/Do_a_technical_review /zh-CN/docs/orphaned/MDN/Contribute/Howto/Do_a_technical_review +/zh-CN/docs/MDN/Contribute/Howto/Do_an_editorial_review /zh-CN/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review +/zh-CN/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page /zh-CN/docs/orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page +/zh-CN/docs/MDN/Contribute/Howto/Tag_JavaScript_pages /zh-CN/docs/orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages +/zh-CN/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web /zh-CN/docs/orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web /zh-CN/docs/MDN/Contribute/Howto/创建及编辑页面 /zh-CN/docs/MDN/Contribute/Howto/Create_and_edit_pages +/zh-CN/docs/MDN/Contribute/Howto/如何添加或更新浏览器兼容性数据 /zh-CN/docs/MDN/Contribute/Howto/Add_or_update_browser_compatibility_data +/zh-CN/docs/MDN/Contribute/Howto/学习_交互_在线_起步_开始 /zh-CN/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web +/zh-CN/docs/MDN/Contribute/Howto/成为一名测试版试验员 /zh-CN/docs/orphaned/MDN/Contribute/Howto/Be_a_beta_tester /zh-CN/docs/MDN/Contribute/Howto/标签 /zh-CN/docs/MDN/Contribute/Howto/Tag -/zh-CN/docs/MDN/Contribute/Howto/标记_JavaScript_页面 /zh-CN/docs/MDN/Contribute/Howto/Tag_JavaScript_pages +/zh-CN/docs/MDN/Contribute/Howto/标记_JavaScript_页面 /zh-CN/docs/orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages /zh-CN/docs/MDN/Contribute/Structures /zh-CN/docs/MDN/Structures /zh-CN/docs/MDN/Contribute/Structures/Live_samples /zh-CN/docs/MDN/Structures/Live_samples -/zh-CN/docs/MDN/Contribute/Structures/Live_samples/Simple_live_sample_demo /zh-CN/docs/MDN/Structures/Live_samples/Simple_live_sample_demo +/zh-CN/docs/MDN/Contribute/Structures/Live_samples/Simple_live_sample_demo /zh-CN/docs/orphaned/MDN/Structures/Live_samples/Simple_live_sample_demo /zh-CN/docs/MDN/Contribute/Structures/Macros /zh-CN/docs/MDN/Structures/Macros +/zh-CN/docs/MDN/Editor /zh-CN/docs/orphaned/MDN/Editor +/zh-CN/docs/MDN/Editor/Basics /zh-CN/docs/orphaned/MDN/Editor/Basics +/zh-CN/docs/MDN/Editor/Basics/Page_controls /zh-CN/docs/orphaned/MDN/Editor/Basics/Page_controls +/zh-CN/docs/MDN/Editor/Basics/Page_info /zh-CN/docs/orphaned/MDN/Editor/Basics/Page_info +/zh-CN/docs/MDN/Editor/Edit_box /zh-CN/docs/orphaned/MDN/Editor/Keyboard_shortcuts +/zh-CN/docs/MDN/Editor/Source_mode /zh-CN/docs/orphaned/MDN/Editor/Source_mode /zh-CN/docs/MDN/Feedback /zh-CN/docs/MDN/Contribute/Feedback /zh-CN/docs/MDN/Getting_started /zh-CN/docs/MDN/Contribute/Getting_started +/zh-CN/docs/MDN/Guidelines/Content_blocks /zh-CN/docs/conflicting/MDN/Guidelines/CSS_style_guide +/zh-CN/docs/MDN/Guidelines/Rules_Of_MDN_Documenting /zh-CN/docs/MDN/Guidelines/Does_this_belong_on_MDN +/zh-CN/docs/MDN/Guidelines/Style_guide /zh-CN/docs/MDN/Guidelines/Writing_style_guide /zh-CN/docs/MDN/JavaScript /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create /zh-CN/docs/MDN/JavaScript/About_JavaScript /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/seal /zh-CN/docs/MDN/JavaScript/Community /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames @@ -1200,37 +1316,58 @@ /zh-CN/docs/MDN/JavaScript/Reference/About_this_Reference /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze /zh-CN/docs/MDN/JavaScript/Reference/Global_Objects /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen /zh-CN/docs/MDN/JavaScript/Reference/Global_Objects/String /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor +/zh-CN/docs/MDN/Kuma /zh-CN/docs/MDN/Yari +/zh-CN/docs/MDN/Structures/Live_samples/Simple_live_sample_demo /zh-CN/docs/orphaned/MDN/Structures/Live_samples/Simple_live_sample_demo +/zh-CN/docs/MDN/Structures/Macros/Custom_macros /zh-CN/docs/MDN/Structures/Macros/Commonly-used_macros /zh-CN/docs/MDN/User_guide/写作 /zh-CN/docs/MDN/User_guide/Writing +/zh-CN/docs/MDN_at_ten /zh-CN/docs/MDN/At_ten /zh-CN/docs/Media_Gallery /zh-CN/docs/Web/Guide/Events/Media_events +/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus /zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/menus +/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow /zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow +/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/tabs/查询 /zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query +/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/剪切板 /zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/clipboard +/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/剪切板/setImageData /zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/clipboard/setImageData +/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Packaging_and_installation /zh-CN/docs/orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox +/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome /zh-CN/docs/orphaned/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension +/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension /zh-CN/docs/orphaned/Mozilla/Add-ons/WebExtensions/Package_your_extension_ +/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Walkthrough /zh-CN/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension /zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications /zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings +/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/主页地址 /zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url +/zh-CN/docs/Mozilla/Add-ons/WebExtensions/user_interface/侧边栏 /zh-CN/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars /zh-CN/docs/Mozilla/Add-ons/WebExtensions/匹配模板 /zh-CN/docs/Mozilla/Add-ons/WebExtensions/Match_patterns +/zh-CN/docs/Mozilla/Add-ons/WebExtensions/实现一个设置页面 /zh-CN/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page +/zh-CN/docs/Mozilla/Add-ons/WebExtensions/构建一个跨浏览器的扩展插件 /zh-CN/docs/Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension +/zh-CN/docs/Mozilla/Add-ons/WebExtensions/用户界面元素 /zh-CN/docs/conflicting/Mozilla/Add-ons/WebExtensions/user_interface /zh-CN/docs/Mozilla/Developer_guide/Source_Code/通过CVS获取源码 /zh-CN/docs/Mozilla/Developer_guide/Source_Code/CVS /zh-CN/docs/Mozilla/Developer_guide/Source_Code/通过Mercurial获取源码 /zh-CN/docs/Mozilla/Developer_guide/Source_Code/LatestPassingSource +/zh-CN/docs/Mozilla/Mozilla_Persona /zh-CN/docs/orphaned/Mozilla/Mozilla_Persona /zh-CN/docs/Mozilla/附加组件 /zh-CN/docs/Mozilla/Add-ons /zh-CN/docs/Mozilla_Web开发人员_FAQ /zh-CN/docs/Mozilla_Web_Developer_FAQ /zh-CN/docs/Mozilla_event_reference /zh-CN/docs/Web/Events -/zh-CN/docs/Mozilla_event_reference/DOMContentLoaded_(event) /zh-CN/docs/Web/Events/DOMContentLoaded +/zh-CN/docs/Mozilla_event_reference/DOMContentLoaded_(event) /zh-CN/docs/Web/API/Window/DOMContentLoaded_event /zh-CN/docs/Mozilla_event_reference/DOMLinkAdded /zh-CN/docs/Web/Events/DOMLinkAdded /zh-CN/docs/Mozilla_event_reference/TabOpen /zh-CN/docs/Web/Events/TabOpen -/zh-CN/docs/Mozilla_event_reference/animationstart /zh-CN/docs/Web/Events/animationstart -/zh-CN/docs/Mozilla_event_reference/beforescriptexecute /zh-CN/docs/Web/Events/beforescriptexecute -/zh-CN/docs/Mozilla_event_reference/change /zh-CN/docs/Web/Events/change +/zh-CN/docs/Mozilla_event_reference/animationstart /zh-CN/docs/Web/API/HTMLElement/animationstart_event +/zh-CN/docs/Mozilla_event_reference/beforescriptexecute /zh-CN/docs/Web/API/Element/beforescriptexecute_event +/zh-CN/docs/Mozilla_event_reference/change /zh-CN/docs/Web/API/HTMLElement/change_event /zh-CN/docs/Mozilla_event_reference/hashchange /zh-CN/docs/Web/API/Window/hashchange_event -/zh-CN/docs/Mozilla_event_reference/input /zh-CN/docs/Web/Events/input +/zh-CN/docs/Mozilla_event_reference/input /zh-CN/docs/Web/API/HTMLElement/input_event /zh-CN/docs/Mozilla_event_reference/popstate /zh-CN/docs/Web/API/Window/popstate_event /zh-CN/docs/Mozilla_event_reference/touchend /zh-CN/docs/Web/API/Document/touchend_event /zh-CN/docs/Mozilla_event_reference/touchstart /zh-CN/docs/Web/API/Element/touchstart_event -/zh-CN/docs/Mozilla_event_reference/transitionend /zh-CN/docs/Web/Events/transitionend -/zh-CN/docs/Mozilla_event_reference/unload /zh-CN/docs/Web/Events/unload +/zh-CN/docs/Mozilla_event_reference/transitionend /zh-CN/docs/Web/API/HTMLElement/transitionend_event +/zh-CN/docs/Mozilla_event_reference/unload /zh-CN/docs/Web/API/Window/unload_event /zh-CN/docs/Mozilla_event_reference/visibilitychange /zh-CN/docs/Web/API/Document/visibilitychange_event /zh-CN/docs/New_in_JavaScript_1.5 /zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.5 /zh-CN/docs/New_in_JavaScript_1.7 /zh-CN/docs/Web/JavaScript/New_in_JavaScript/1.7 /zh-CN/docs/Online_and_offline_events /zh-CN/docs/Web/API/NavigatorOnLine/Online_and_offline_events /zh-CN/docs/Other_JavaScript_tools /zh-CN/docs/Tools /zh-CN/docs/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents:Examples /zh-CN/docs/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples +/zh-CN/docs/Python /zh-CN/docs/conflicting/Learn/Server-side/Django /zh-CN/docs/QA /zh-CN/docs/质量保证 +/zh-CN/docs/Quirks_Mode_and_Standards_Mode /zh-CN/docs/conflicting/Web/HTML/Quirks_Mode_and_Standards_Mode /zh-CN/docs/RDF /zh-CN/docs/Web/RDF -/zh-CN/docs/Rich-Text_Editing_in_Mozilla /zh-CN/docs/Web/Guide/HTML/Content_Editable/Rich-Text_Editing_in_Mozilla +/zh-CN/docs/Rich-Text_Editing_in_Mozilla /zh-CN/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla /zh-CN/docs/SVG /zh-CN/docs/Web/SVG /zh-CN/docs/SVG-840092-dup /zh-CN/docs/Web/SVG /zh-CN/docs/SVG/Element /zh-CN/docs/Web/SVG/Element @@ -1245,36 +1382,89 @@ /zh-CN/docs/SVG/教程/引言 /zh-CN/docs/Web/SVG/Tutorial/Introduction /zh-CN/docs/SVG_In_HTML_Introduction /zh-CN/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction /zh-CN/docs/Same_origin_policy_for_JavaScript /zh-CN/docs/Web/Security/Same-origin_policy -/zh-CN/docs/Security/CSP /zh-CN/docs/Web/Security/CSP -/zh-CN/docs/Security/CSP/Introducing_Content_Security_Policy /zh-CN/docs/Web/Security/CSP/Introducing_Content_Security_Policy -/zh-CN/docs/Security/CSP/Using_CSP_violation_reports /zh-CN/docs/Web/Security/CSP/Using_CSP_violation_reports +/zh-CN/docs/Security/CSP /zh-CN/docs/conflicting/Web/HTTP/CSP +/zh-CN/docs/Security/CSP/Introducing_Content_Security_Policy /zh-CN/docs/conflicting/Web/HTTP/CSP_aeae68a149c6fbe64e541cbdcd6ed5c5 +/zh-CN/docs/Security/CSP/Using_CSP_violation_reports /zh-CN/docs/conflicting/Web/HTTP/CSP_9583294484b49ac391995b392c2b1ae1 /zh-CN/docs/Security/CSP/Using_Content_Security_Policy /zh-CN/docs/Web/HTTP/CSP -/zh-CN/docs/Security/HTTP_Strict_Transport_Security /zh-CN/docs/Web/HTTP/HTTP_Strict_Transport_Security -/zh-CN/docs/Tips_for_Authoring_Fast-loading_HTML_Pages /zh-CN/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages +/zh-CN/docs/Security/HTTP_Strict_Transport_Security /zh-CN/docs/Web/HTTP/Headers/Strict-Transport-Security +/zh-CN/docs/Server-sent_events /zh-CN/docs/Web/API/Server-sent_events +/zh-CN/docs/Server-sent_events/EventSource /zh-CN/docs/Web/API/EventSource +/zh-CN/docs/Server-sent_events/EventSource/EventSource /zh-CN/docs/Web/API/EventSource/EventSource +/zh-CN/docs/Server-sent_events/EventSource/close /zh-CN/docs/Web/API/EventSource/close +/zh-CN/docs/Server-sent_events/EventSource/onerror /zh-CN/docs/Web/API/EventSource/onerror +/zh-CN/docs/Server-sent_events/EventSource/onopen /zh-CN/docs/Web/API/EventSource/onopen +/zh-CN/docs/Server-sent_events/Using_server-sent_events /zh-CN/docs/Web/API/Server-sent_events/Using_server-sent_events +/zh-CN/docs/Site_Compatibility_for_Firefox_19 /zh-CN/docs/Mozilla/Firefox/Releases/19/Site_compatibility +/zh-CN/docs/Site_Compatibility_for_Firefox_21 /zh-CN/docs/Mozilla/Firefox/Releases/21/Site_compatibility +/zh-CN/docs/Site_Compatibility_for_Firefox_23 /zh-CN/docs/Mozilla/Firefox/Releases/23/Site_compatibility +/zh-CN/docs/Site_Compatibility_for_Firefox_24 /zh-CN/docs/Mozilla/Firefox/Releases/24/Site_compatibility +/zh-CN/docs/Specification_List /zh-CN/docs/orphaned/Web/Specification_list +/zh-CN/docs/Tips_for_Authoring_Fast-loading_HTML_Pages /zh-CN/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages /zh-CN/docs/Tools-840092-dup/Remote_Debugging /zh-CN/docs/Tools/Remote_Debugging /zh-CN/docs/Tools-840092-dup/Tools_Toolbox /zh-CN/docs/Tools/Tools_Toolbox -/zh-CN/docs/Tools-840092-dup/Using_the_Source_Editor /zh-CN/docs/Tools/Using_the_Source_Editor +/zh-CN/docs/Tools-840092-dup/Using_the_Source_Editor /zh-CN/docs/conflicting/tools/Keyboard_shortcuts +/zh-CN/docs/Tools/Add-ons /zh-CN/docs/orphaned/Tools/Add-ons /zh-CN/docs/Tools/Firebug迁移 /zh-CN/docs/Tools/Migrating_from_Firebug -/zh-CN/docs/Tools/响应式设计视图 /zh-CN/docs/Tools/Responsive_Design_View +/zh-CN/docs/Tools/Page_Inspector/3D_view /zh-CN/docs/Tools/3D_View +/zh-CN/docs/Tools/Page_Inspector/How_to/View_fonts /zh-CN/docs/Tools/Page_Inspector/How_to/Edit_fonts +/zh-CN/docs/Tools/Profiler /zh-CN/docs/conflicting/Tools/Performance +/zh-CN/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone /zh-CN/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE +/zh-CN/docs/Tools/Responsive_Design_View /zh-CN/docs/Tools/Responsive_Design_Mode +/zh-CN/docs/Tools/Using_the_Source_Editor /zh-CN/docs/conflicting/tools/Keyboard_shortcuts +/zh-CN/docs/Tools/Web音频编辑器 /zh-CN/docs/Tools/Web_Audio_Editor +/zh-CN/docs/Tools/不推荐的工具 /zh-CN/docs/Tools/Deprecated_tools +/zh-CN/docs/Tools/响应式设计视图 /zh-CN/docs/Tools/Responsive_Design_Mode +/zh-CN/docs/Tools/存储查看器 /zh-CN/docs/Tools/Storage_Inspector +/zh-CN/docs/Tools/小技巧 /zh-CN/docs/Tools/Tips /zh-CN/docs/Tools/性能 /zh-CN/docs/Tools/Performance /zh-CN/docs/Tools/标尺 /zh-CN/docs/Tools/Rulers /zh-CN/docs/Transforming_XML_with_XSLT /zh-CN/docs/Web/XSLT/Transforming_XML_with_XSLT -/zh-CN/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces /zh-CN/docs/使用Javascript和DOM_Interfaces来处理HTML +/zh-CN/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces /zh-CN/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces +/zh-CN/docs/Understanding_Underlines /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Fundamentals +/zh-CN/docs/Updating_extensions_for_Firefox_3 /zh-CN/docs/Mozilla/Firefox/Releases/3/Updating_extensions +/zh-CN/docs/Using_XPath /zh-CN/docs/conflicting/Web/XPath/Introduction_to_using_XPath_in_JavaScript /zh-CN/docs/Using_files_from_web_applications /zh-CN/docs/Web/API/File/Using_files_from_web_applications /zh-CN/docs/Venkman入门 /zh-CN/docs/Venkman_Introduction /zh-CN/docs/Venkman精髓 /zh-CN/docs/Venkman_Internals +/zh-CN/docs/WOFF /zh-CN/docs/Web/Guide/WOFF /zh-CN/docs/Web-based_protocol_handlers /zh-CN/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers /zh-CN/docs/Web/API/APIWwindow.sidebar /zh-CN/docs/Web/API/Window/sidebar +/zh-CN/docs/Web/API/AmbientLightSensor/reading /zh-CN/docs/Web/API/AmbientLightSensor/illuminance +/zh-CN/docs/Web/API/AnalyserNode/fft /zh-CN/docs/orphaned/Web/API/AnalyserNode/fft /zh-CN/docs/Web/API/ArrayBuffer /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer /zh-CN/docs/Web/API/ArrayBufferView /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray +/zh-CN/docs/Web/API/AudioContext/createAnalyser /zh-CN/docs/Web/API/BaseAudioContext/createAnalyser +/zh-CN/docs/Web/API/AudioContext/createBiquadFilter /zh-CN/docs/Web/API/BaseAudioContext/createBiquadFilter +/zh-CN/docs/Web/API/AudioContext/createBuffer /zh-CN/docs/Web/API/BaseAudioContext/createBuffer +/zh-CN/docs/Web/API/AudioContext/createBufferSource /zh-CN/docs/Web/API/BaseAudioContext/createBufferSource +/zh-CN/docs/Web/API/AudioContext/createChannelMerger /zh-CN/docs/Web/API/BaseAudioContext/createChannelMerger +/zh-CN/docs/Web/API/AudioContext/createChannelSplitter /zh-CN/docs/Web/API/BaseAudioContext/createChannelSplitter +/zh-CN/docs/Web/API/AudioContext/createConvolver /zh-CN/docs/Web/API/BaseAudioContext/createConvolver +/zh-CN/docs/Web/API/AudioContext/createDelay /zh-CN/docs/Web/API/BaseAudioContext/createDelay +/zh-CN/docs/Web/API/AudioContext/createScriptProcessor /zh-CN/docs/Web/API/BaseAudioContext/createScriptProcessor +/zh-CN/docs/Web/API/AudioContext/createWaveShaper /zh-CN/docs/Web/API/BaseAudioContext/createWaveShaper +/zh-CN/docs/Web/API/AudioContext/currentTime /zh-CN/docs/Web/API/BaseAudioContext/currentTime +/zh-CN/docs/Web/API/AudioContext/decodeAudioData /zh-CN/docs/Web/API/BaseAudioContext/decodeAudioData +/zh-CN/docs/Web/API/AudioContext/destination /zh-CN/docs/Web/API/BaseAudioContext/destination +/zh-CN/docs/Web/API/AudioContext/listener /zh-CN/docs/Web/API/BaseAudioContext/listener +/zh-CN/docs/Web/API/AudioContext/mozAudioChannelType /zh-CN/docs/orphaned/Web/API/AudioContext/mozAudioChannelType +/zh-CN/docs/Web/API/AudioContext/onstatechange /zh-CN/docs/Web/API/BaseAudioContext/onstatechange +/zh-CN/docs/Web/API/AudioContext/sampleRate /zh-CN/docs/Web/API/BaseAudioContext/sampleRate +/zh-CN/docs/Web/API/AudioContext/state /zh-CN/docs/Web/API/BaseAudioContext/state +/zh-CN/docs/Web/API/AudioNode/connect(AudioParam) /zh-CN/docs/orphaned/Web/API/AudioNode/connect(AudioParam) /zh-CN/docs/Web/API/Blob.size /zh-CN/docs/Web/API/Blob/size /zh-CN/docs/Web/API/Blob.slice /zh-CN/docs/Web/API/Blob/slice /zh-CN/docs/Web/API/Blob.type /zh-CN/docs/Web/API/Blob/type +/zh-CN/docs/Web/API/CSSMatrix /zh-CN/docs/conflicting/Web/API/DOMMatrix /zh-CN/docs/Web/API/CSSStyleSheet.insertRule /zh-CN/docs/Web/API/CSSStyleSheet/insertRule +/zh-CN/docs/Web/API/CSS分页规则 /zh-CN/docs/Web/API/CSSPageRule /zh-CN/docs/Web/API/CameraControl.getPreviewStream /zh-CN/docs/Web/API/CameraControl/getPreviewStream +/zh-CN/docs/Web/API/CanvasCaptureMediaStream /zh-CN/docs/Web/API/CanvasCaptureMediaStreamTrack /zh-CN/docs/Web/API/CanvasGradient.addColorStop /zh-CN/docs/Web/API/CanvasGradient/addColorStop /zh-CN/docs/Web/API/CanvasRenderingContext2D.createLinearGradient /zh-CN/docs/Web/API/CanvasRenderingContext2D/createLinearGradient /zh-CN/docs/Web/API/CanvasRenderingContext2D.createPattern /zh-CN/docs/Web/API/CanvasRenderingContext2D/createPattern +/zh-CN/docs/Web/API/Canvas_API/Drawing_graphics_with_canvas /zh-CN/docs/conflicting/Web/API/Canvas_API/Tutorial +/zh-CN/docs/Web/API/Channel_Messaging_API/使用_channel_messaging /zh-CN/docs/Web/API/Channel_Messaging_API/Using_channel_messaging /zh-CN/docs/Web/API/ChildNode.nextElementSibling /zh-CN/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling /zh-CN/docs/Web/API/ChildNode.remove /zh-CN/docs/Web/API/ChildNode/remove /zh-CN/docs/Web/API/Childnode.previousElementSibling /zh-CN/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling @@ -1282,15 +1472,29 @@ /zh-CN/docs/Web/API/Coordinates/latitude /zh-CN/docs/Web/API/GeolocationCoordinates/latitude /zh-CN/docs/Web/API/DOMImplementation.createHTMLDocument /zh-CN/docs/Web/API/DOMImplementation/createHTMLDocument /zh-CN/docs/Web/API/DOMImplementation.hasFeature /zh-CN/docs/Web/API/DOMImplementation/hasFeature +/zh-CN/docs/Web/API/DeviceAcceleration /zh-CN/docs/Web/API/DeviceMotionEventAcceleration +/zh-CN/docs/Web/API/DeviceLightEvent/Using_light_events /zh-CN/docs/Web/API/Ambient_Light_Events /zh-CN/docs/Web/API/Document.querySelectorAll /zh-CN/docs/Web/API/Document/querySelectorAll /zh-CN/docs/Web/API/Document.releaseCapture /zh-CN/docs/Web/API/Document/releaseCapture /zh-CN/docs/Web/API/Document/activeElement /en-US/docs/Web/API/DocumentOrShadowRoot/activeElement /zh-CN/docs/Web/API/Document/async /zh-CN/docs/Web/API/XMLDocument/async +/zh-CN/docs/Web/API/Document/cookie/Simple_document.cookie_framework /zh-CN/docs/orphaned/Web/API/Document/cookie/Simple_document.cookie_framework /zh-CN/docs/Web/API/Document/defaultView/popstate_event /zh-CN/docs/Web/API/Window/popstate_event /zh-CN/docs/Web/API/Document/defaultView/resize_event /zh-CN/docs/Web/API/Window/resize_event /zh-CN/docs/Web/API/Document/defaultView/storage_event /zh-CN/docs/Web/API/Window/storage_event /zh-CN/docs/Web/API/Document/domConfig /zh-CN/docs/Web/API/Document +/zh-CN/docs/Web/API/Document/elementFromPoint /zh-CN/docs/conflicting/Web/API/DocumentOrShadowRoot/elementFromPoint +/zh-CN/docs/Web/API/Document/elementsFromPoint /zh-CN/docs/conflicting/Web/API/DocumentOrShadowRoot/elementsFromPoint +/zh-CN/docs/Web/API/Document/getSelection /zh-CN/docs/conflicting/Web/API/DocumentOrShadowRoot/getSelection +/zh-CN/docs/Web/API/Document/inputEncoding /zh-CN/docs/conflicting/Web/API/Document/characterSet +/zh-CN/docs/Web/API/Document/mozFullScreen /zh-CN/docs/Web/API/Document/fullscreen +/zh-CN/docs/Web/API/Document/mozFullScreenElement /zh-CN/docs/Web/API/DocumentOrShadowRoot/fullscreenElement +/zh-CN/docs/Web/API/Document/mozFullScreenEnabled /zh-CN/docs/Web/API/Document/fullscreenEnabled /zh-CN/docs/Web/API/Document/onreadystatechange /en-US/docs/Web/API/Document/readystatechange_event +/zh-CN/docs/Web/API/Document/pointerLockElement /zh-CN/docs/Web/API/DocumentOrShadowRoot/pointerLockElement +/zh-CN/docs/Web/API/Document/rouchmove_event /zh-CN/docs/Web/API/Document/touchmove_event +/zh-CN/docs/Web/API/Document/styleSheets /zh-CN/docs/conflicting/Web/API/DocumentOrShadowRoot/styleSheets +/zh-CN/docs/Web/API/Document_Object_Model/Preface /zh-CN/docs/conflicting/Web/API/Document_Object_Model /zh-CN/docs/Web/API/Element.classList /zh-CN/docs/Web/API/Element/classList /zh-CN/docs/Web/API/Element.className /zh-CN/docs/Web/API/Element/className /zh-CN/docs/Web/API/Element.clientLeft /zh-CN/docs/Web/API/Element/clientLeft @@ -1308,8 +1512,8 @@ /zh-CN/docs/Web/API/Element.innerHTML /zh-CN/docs/Web/API/Element/innerHTML /zh-CN/docs/Web/API/Element.insertAdjacentHTML /zh-CN/docs/Web/API/Element/insertAdjacentHTML /zh-CN/docs/Web/API/Element.matches /zh-CN/docs/Web/API/Element/matches -/zh-CN/docs/Web/API/Element.name /zh-CN/docs/Web/API/Element/name -/zh-CN/docs/Web/API/Element.onafterscriptexecute /zh-CN/docs/Web/API/Element/onafterscriptexecute +/zh-CN/docs/Web/API/Element.name /zh-CN/docs/conflicting/Web/API +/zh-CN/docs/Web/API/Element.onafterscriptexecute /zh-CN/docs/Web/API/Document/onafterscriptexecute /zh-CN/docs/Web/API/Element.onbeforescriptexecute /zh-CN/docs/Web/API/Document/onbeforescriptexecute /zh-CN/docs/Web/API/Element.oncopy /zh-CN/docs/Web/API/HTMLElement/oncopy /zh-CN/docs/Web/API/Element.oncut /zh-CN/docs/Web/API/HTMLElement/oncut @@ -1322,22 +1526,37 @@ /zh-CN/docs/Web/API/Element.setAttribute /zh-CN/docs/Web/API/Element/setAttribute /zh-CN/docs/Web/API/Element.setCapture /zh-CN/docs/Web/API/Element/setCapture /zh-CN/docs/Web/API/Element.tagName /zh-CN/docs/Web/API/Element/tagName +/zh-CN/docs/Web/API/Element/Activate_event /zh-CN/docs/Web/API/Element/DOMActivate_event +/zh-CN/docs/Web/API/Element/accessKey /zh-CN/docs/Web/API/HTMLElement/accessKey /zh-CN/docs/Web/API/Element/addEventListener /zh-CN/docs/Web/API/EventTarget/addEventListener +/zh-CN/docs/Web/API/Element/name /zh-CN/docs/conflicting/Web/API +/zh-CN/docs/Web/API/Element/onafterscriptexecute /zh-CN/docs/Web/API/Document/onafterscriptexecute /zh-CN/docs/Web/API/Element/onbeforescriptexecute /zh-CN/docs/Web/API/Document/onbeforescriptexecute /zh-CN/docs/Web/API/Element/oncopy /zh-CN/docs/Web/API/HTMLElement/oncopy /zh-CN/docs/Web/API/Element/oncut /zh-CN/docs/Web/API/HTMLElement/oncut +/zh-CN/docs/Web/API/Element/ongotpointercapture /zh-CN/docs/conflicting/Web/API/GlobalEventHandlers/ongotpointercapture /zh-CN/docs/Web/API/Element/onpaste /zh-CN/docs/Web/API/HTMLElement/onpaste /zh-CN/docs/Web/API/Element/removeAttributre /zh-CN/docs/Web/API/Element/removeAttribute +/zh-CN/docs/Web/API/Entity /zh-CN/docs/orphaned/Web/API/Entity /zh-CN/docs/Web/API/Event/CustomEvent /zh-CN/docs/Web/API/CustomEvent -/zh-CN/docs/Web/API/Event/altKey /zh-CN/docs/Web/API/event.altKey -/zh-CN/docs/Web/API/Event/button /zh-CN/docs/Web/API/event.button -/zh-CN/docs/Web/API/Event/cancelBubble /zh-CN/docs/Web/API/UIEvent/cancelBubble +/zh-CN/docs/Web/API/Event/altKey /zh-CN/docs/conflicting/Web/API/MouseEvent/altKey +/zh-CN/docs/Web/API/Event/button /zh-CN/docs/conflicting/Web/API/MouseEvent/button +/zh-CN/docs/Web/API/Event/createEvent /zh-CN/docs/conflicting/Web/API/Document/createEvent +/zh-CN/docs/Web/API/Event/deepPath /zh-CN/docs/conflicting/Web/API/Event/composedPath /zh-CN/docs/Web/API/Event/isChar /zh-CN/docs/Web/API/UIEvent/isChar /zh-CN/docs/Web/API/Event/pageY /zh-CN/docs/Web/API/UIEvent/pageY -/zh-CN/docs/Web/API/Event/relatedTarget /zh-CN/docs/Web/API/event.relatedTarget -/zh-CN/docs/Web/API/Event/shiftKey /zh-CN/docs/Web/API/event.shiftKey +/zh-CN/docs/Web/API/Event/relatedTarget /zh-CN/docs/conflicting/Web/API/MouseEvent/relatedTarget +/zh-CN/docs/Web/API/Event/shiftKey /zh-CN/docs/conflicting/Web/API/MouseEvent/shiftKey +/zh-CN/docs/Web/API/Event/禁用时间冒泡 /zh-CN/docs/Web/API/Event/cancelBubble /zh-CN/docs/Web/API/EventTarget.dispatchEvent /zh-CN/docs/Web/API/EventTarget/dispatchEvent /zh-CN/docs/Web/API/EventTarget.removeEventListener /zh-CN/docs/Web/API/EventTarget/removeEventListener +/zh-CN/docs/Web/API/EventTarget/attachEvent /zh-CN/docs/conflicting/Web/API/EventTarget/addEventListener +/zh-CN/docs/Web/API/EventTarget/detachEvent /zh-CN/docs/conflicting/Web/API/EventTarget/removeEventListener +/zh-CN/docs/Web/API/EventTarget/fireEvent /zh-CN/docs/conflicting/Web/API/EventTarget/dispatchEvent +/zh-CN/docs/Web/API/FetchController /zh-CN/docs/Web/API/AbortController +/zh-CN/docs/Web/API/FetchController/AbortController /zh-CN/docs/Web/API/AbortController/AbortController +/zh-CN/docs/Web/API/FetchController/abort /zh-CN/docs/Web/API/AbortController/abort +/zh-CN/docs/Web/API/FetchObserver /zh-CN/docs/orphaned/Web/API/FetchObserver /zh-CN/docs/Web/API/Fetch_API/基本概念 /zh-CN/docs/Web/API/Fetch_API/Basic_concepts /zh-CN/docs/Web/API/File.fileName /zh-CN/docs/Web/API/File/fileName /zh-CN/docs/Web/API/File.fileSize /zh-CN/docs/Web/API/File/fileSize @@ -1345,6 +1564,11 @@ /zh-CN/docs/Web/API/File.getAsText /zh-CN/docs/Web/API/File/getAsText /zh-CN/docs/Web/API/File.lastModifiedDate /zh-CN/docs/Web/API/File/lastModifiedDate /zh-CN/docs/Web/API/File.name /zh-CN/docs/Web/API/File/name +/zh-CN/docs/Web/API/FileReader/中止事件(abort) /zh-CN/docs/Web/API/FileReader/abort_event +/zh-CN/docs/Web/API/FormData/删除 /zh-CN/docs/Web/API/FormData/delete +/zh-CN/docs/Web/API/Fullscreen_API/指南 /zh-CN/docs/Web/API/Fullscreen_API/Guide +/zh-CN/docs/Web/API/Geolocation/Using_geolocation /zh-CN/docs/Web/API/Geolocation_API +/zh-CN/docs/Web/API/GeolocationPosition/获取该位置时的时间戳 /zh-CN/docs/Web/API/GeolocationPosition/timestamp /zh-CN/docs/Web/API/GlobalEventHandlers.onblur /zh-CN/docs/Web/API/GlobalEventHandlers/onblur /zh-CN/docs/Web/API/GlobalEventHandlers.onchange /zh-CN/docs/Web/API/GlobalEventHandlers/onchange /zh-CN/docs/Web/API/GlobalEventHandlers.oncontextmenu /zh-CN/docs/Web/API/GlobalEventHandlers/oncontextmenu @@ -1363,34 +1587,49 @@ /zh-CN/docs/Web/API/GlobalEventHandlers.onscroll /zh-CN/docs/Web/API/GlobalEventHandlers/onscroll /zh-CN/docs/Web/API/GlobalEventHandlers.onselect /zh-CN/docs/Web/API/GlobalEventHandlers/onselect /zh-CN/docs/Web/API/GlobalEventHandlers.onsubmit /zh-CN/docs/Web/API/GlobalEventHandlers/onsubmit +/zh-CN/docs/Web/API/GlobalEventHandlers/GlobalEventHanders.ontouchmove /zh-CN/docs/conflicting/Web/API/GlobalEventHandlers/ontouchmove /zh-CN/docs/Web/API/GlobalEventHandlers/动画效果 /zh-CN/docs/Web/API/GlobalEventHandlers/onanimationend +/zh-CN/docs/Web/API/GlobalEventHandlers/时长改变 /zh-CN/docs/Web/API/GlobalEventHandlers/ondurationchange /zh-CN/docs/Web/API/GlobalFetch /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope /zh-CN/docs/Web/API/GlobalFetch/fetch /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch -/zh-CN/docs/Web/API/HTMLElement.blur /zh-CN/docs/Web/API/HTMLElement/blur +/zh-CN/docs/Web/API/HTMLAnchorElement/referrer /zh-CN/docs/Web/API/HTMLAnchorElement/referrerPolicy +/zh-CN/docs/Web/API/HTMLCanvasElement/捕获流 /zh-CN/docs/Web/API/HTMLCanvasElement/captureStream +/zh-CN/docs/Web/API/HTMLElement.blur /zh-CN/docs/Web/API/HTMLOrForeignElement/blur /zh-CN/docs/Web/API/HTMLElement.click /zh-CN/docs/Web/API/HTMLElement/click /zh-CN/docs/Web/API/HTMLElement.contentEditable /zh-CN/docs/Web/API/HTMLElement/contentEditable -/zh-CN/docs/Web/API/HTMLElement.dataset /zh-CN/docs/Web/API/HTMLElement/dataset +/zh-CN/docs/Web/API/HTMLElement.dataset /zh-CN/docs/Web/API/HTMLOrForeignElement/dataset /zh-CN/docs/Web/API/HTMLElement.dir /zh-CN/docs/Web/API/HTMLElement/dir -/zh-CN/docs/Web/API/HTMLElement.focus /zh-CN/docs/Web/API/HTMLElement/focus +/zh-CN/docs/Web/API/HTMLElement.focus /zh-CN/docs/Web/API/HTMLOrForeignElement/focus /zh-CN/docs/Web/API/HTMLElement.isContentEditable /zh-CN/docs/Web/API/HTMLElement/isContentEditable /zh-CN/docs/Web/API/HTMLElement.lang /zh-CN/docs/Web/API/HTMLElement/lang /zh-CN/docs/Web/API/HTMLElement.offsetLeft /zh-CN/docs/Web/API/HTMLElement/offsetLeft /zh-CN/docs/Web/API/HTMLElement.offsetParent /zh-CN/docs/Web/API/HTMLElement/offsetParent /zh-CN/docs/Web/API/HTMLElement.offsetTop /zh-CN/docs/Web/API/HTMLElement/offsetTop /zh-CN/docs/Web/API/HTMLElement.offsetWidth /zh-CN/docs/Web/API/HTMLElement/offsetWidth -/zh-CN/docs/Web/API/HTMLElement.style /zh-CN/docs/Web/API/HTMLElement/style -/zh-CN/docs/Web/API/HTMLElement.tabIndex /zh-CN/docs/Web/API/HTMLElement/tabIndex +/zh-CN/docs/Web/API/HTMLElement.style /zh-CN/docs/Web/API/ElementCSSInlineStyle/style +/zh-CN/docs/Web/API/HTMLElement.tabIndex /zh-CN/docs/Web/API/HTMLOrForeignElement/tabIndex /zh-CN/docs/Web/API/HTMLElement.title /zh-CN/docs/Web/API/HTMLElement/title +/zh-CN/docs/Web/API/HTMLElement/blur /zh-CN/docs/Web/API/HTMLOrForeignElement/blur +/zh-CN/docs/Web/API/HTMLElement/dataset /zh-CN/docs/Web/API/HTMLOrForeignElement/dataset +/zh-CN/docs/Web/API/HTMLElement/focus /zh-CN/docs/Web/API/HTMLOrForeignElement/focus +/zh-CN/docs/Web/API/HTMLElement/nonce /zh-CN/docs/Web/API/HTMLOrForeignElement/nonce +/zh-CN/docs/Web/API/HTMLElement/style /zh-CN/docs/Web/API/ElementCSSInlineStyle/style +/zh-CN/docs/Web/API/HTMLElement/tabIndex /zh-CN/docs/Web/API/HTMLOrForeignElement/tabIndex /zh-CN/docs/Web/API/HTMLFormElement.elements /zh-CN/docs/Web/API/HTMLFormElement/elements /zh-CN/docs/Web/API/HTMLFormElement.reset /zh-CN/docs/Web/API/HTMLFormElement/reset /zh-CN/docs/Web/API/HTMLFormElement.submit /zh-CN/docs/Web/API/HTMLFormElement/submit -/zh-CN/docs/Web/API/HTMLInputElement.mozSetFileNameArray /zh-CN/docs/Web/API/HTMLInputElement/mozSetFileNameArray +/zh-CN/docs/Web/API/HTMLInputElement.mozSetFileNameArray /zh-CN/docs/conflicting/Web/API/HTMLInputElement +/zh-CN/docs/Web/API/HTMLInputElement/mozSetFileNameArray /zh-CN/docs/conflicting/Web/API/HTMLInputElement /zh-CN/docs/Web/API/HTMLTableElement.deleteTHead /zh-CN/docs/Web/API/HTMLTableElement/deleteTHead /zh-CN/docs/Web/API/IDBCursor.direction /zh-CN/docs/Web/API/IDBCursor/direction /zh-CN/docs/Web/API/IDBFactory.open /zh-CN/docs/Web/API/IDBFactory/open /zh-CN/docs/Web/API/IDBObjectStore.openCursor /zh-CN/docs/Web/API/IDBObjectStore/openCursor /zh-CN/docs/Web/API/IndexedDB_API/IDBObjectStore /zh-CN/docs/Web/API/IDBObjectStore +/zh-CN/docs/Web/API/Intersection_Observer_API/点观察者API的时序元素可见性 /zh-CN/docs/Web/API/Intersection_Observer_API/Timing_element_visibility /zh-CN/docs/Web/API/Location.replace /zh-CN/docs/Web/API/Location/replace +/zh-CN/docs/Web/API/MSSelection /zh-CN/docs/orphaned/Web/API/MSSelection +/zh-CN/docs/Web/API/MediaStream.addTrack /zh-CN/docs/Web/API/MediaStream/addTrack +/zh-CN/docs/Web/API/NameList /zh-CN/docs/orphaned/Web/API/NameList /zh-CN/docs/Web/API/Navigator.battery /zh-CN/docs/Web/API/Navigator/battery /zh-CN/docs/Web/API/Navigator.buildID /zh-CN/docs/Web/API/Navigator/buildID /zh-CN/docs/Web/API/Navigator.cookieEnabled /zh-CN/docs/Web/API/Navigator/cookieEnabled @@ -1400,6 +1639,7 @@ /zh-CN/docs/Web/API/Navigator.registerContentHandler /zh-CN/docs/Web/API/Navigator/registerContentHandler /zh-CN/docs/Web/API/Navigator.vendor /zh-CN/docs/Web/API/Navigator/vendor /zh-CN/docs/Web/API/Navigator.vendorSub /zh-CN/docs/Web/API/Navigator/vendorSub +/zh-CN/docs/Web/API/NavigatorGeolocation /zh-CN/docs/conflicting/Web/API/Geolocation /zh-CN/docs/Web/API/NavigatorGeolocation.geolocation /zh-CN/docs/Web/API/Navigator/geolocation /zh-CN/docs/Web/API/NavigatorGeolocation/geolocation /zh-CN/docs/Web/API/Navigator/geolocation /zh-CN/docs/Web/API/NavigatorID.appCodeName /zh-CN/docs/Web/API/NavigatorID/appCodeName @@ -1412,10 +1652,11 @@ /zh-CN/docs/Web/API/NavigatorOnLine.onLine /zh-CN/docs/Web/API/NavigatorOnLine/onLine /zh-CN/docs/Web/API/NavigatorPlugins.javaEnabled /zh-CN/docs/Web/API/NavigatorPlugins/javaEnabled /zh-CN/docs/Web/API/NavigatorPlugins.plugins /zh-CN/docs/Web/API/NavigatorPlugins/plugins +/zh-CN/docs/Web/API/NavigatorPlugins/测试滕盖 /zh-CN/docs/orphaned/Web/API/NavigatorPlugins/测试滕盖 /zh-CN/docs/Web/API/Node.appendChild /zh-CN/docs/Web/API/Node/appendChild /zh-CN/docs/Web/API/Node.attributes /zh-CN/docs/Web/API/Element/attributes /zh-CN/docs/Web/API/Node.baseURI /zh-CN/docs/Web/API/Node/baseURI -/zh-CN/docs/Web/API/Node.baseURIObject /zh-CN/docs/Web/API/Node/baseURIObject +/zh-CN/docs/Web/API/Node.baseURIObject /zh-CN/docs/conflicting/Web/API/Node /zh-CN/docs/Web/API/Node.childNodes /zh-CN/docs/Web/API/Node/childNodes /zh-CN/docs/Web/API/Node.cloneNode /zh-CN/docs/Web/API/Node/cloneNode /zh-CN/docs/Web/API/Node.compareDocumentPosition /zh-CN/docs/Web/API/Node/compareDocumentPosition @@ -1436,7 +1677,7 @@ /zh-CN/docs/Web/API/Node.namespaceURI /zh-CN/docs/Web/API/Node/namespaceURI /zh-CN/docs/Web/API/Node.nextSibling /zh-CN/docs/Web/API/Node/nextSibling /zh-CN/docs/Web/API/Node.nodeName /zh-CN/docs/Web/API/Node/nodeName -/zh-CN/docs/Web/API/Node.nodePrincipal /zh-CN/docs/Web/API/Node/nodePrincipal +/zh-CN/docs/Web/API/Node.nodePrincipal /zh-CN/docs/conflicting/Web/API/Node_378aed5ed6869e50853edbc988cf9556 /zh-CN/docs/Web/API/Node.nodeType /zh-CN/docs/Web/API/Node/nodeType /zh-CN/docs/Web/API/Node.nodeValue /zh-CN/docs/Web/API/Node/nodeValue /zh-CN/docs/Web/API/Node.normalize /zh-CN/docs/Web/API/Node/normalize @@ -1450,19 +1691,30 @@ /zh-CN/docs/Web/API/Node.setUserData /zh-CN/docs/Web/API/Node/setUserData /zh-CN/docs/Web/API/Node.textContent /zh-CN/docs/Web/API/Node/textContent /zh-CN/docs/Web/API/Node/C /zh-CN/docs/Web/API/Node/contains +/zh-CN/docs/Web/API/Node/baseURIObject /zh-CN/docs/conflicting/Web/API/Node /zh-CN/docs/Web/API/Node/childNodes_temp /zh-CN/docs/Web/API/Node/childNodes /zh-CN/docs/Web/API/Node/hasAttributes /zh-CN/docs/Web/API/Element/hasAttributes +/zh-CN/docs/Web/API/Node/innerText /zh-CN/docs/Web/API/HTMLElement/innerText +/zh-CN/docs/Web/API/Node/nodePrincipal /zh-CN/docs/conflicting/Web/API/Node_378aed5ed6869e50853edbc988cf9556 +/zh-CN/docs/Web/API/Node/outerText /zh-CN/docs/conflicting/Web/API/HTMLElement/outerText +/zh-CN/docs/Web/API/Node/rootNode /zh-CN/docs/conflicting/Web/API/Node/getRootNode /zh-CN/docs/Web/API/NodeList.item /zh-CN/docs/Web/API/NodeList/item /zh-CN/docs/Web/API/NonDocumentTypeChildNode.nextElementSibling /zh-CN/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling /zh-CN/docs/Web/API/NonDocumentTypeChildNode.previousElementSibling /zh-CN/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling +/zh-CN/docs/Web/API/OfflineAudioContext/complete /zh-CN/docs/Web/API/OfflineAudioContext/complete_event /zh-CN/docs/Web/API/ParentNode.childElementCount /zh-CN/docs/Web/API/ParentNode/childElementCount /zh-CN/docs/Web/API/ParentNode.children /zh-CN/docs/Web/API/ParentNode/children /zh-CN/docs/Web/API/ParentNode.firstElementChild /zh-CN/docs/Web/API/ParentNode/firstElementChild /zh-CN/docs/Web/API/ParentNode.lastElementChild /zh-CN/docs/Web/API/ParentNode/lastElementChild /zh-CN/docs/Web/API/Performance.now() /zh-CN/docs/Web/API/Performance/now +/zh-CN/docs/Web/API/Performance/内存 /zh-CN/docs/Web/API/Performance/memory /zh-CN/docs/Web/API/Position /zh-CN/docs/Web/API/GeolocationPosition /zh-CN/docs/Web/API/Position/coords /zh-CN/docs/Web/API/GeolocationPosition/coords /zh-CN/docs/Web/API/PositionError /zh-CN/docs/Web/API/GeolocationPositionError +/zh-CN/docs/Web/API/Push_API/Using_the_Push_API /zh-CN/docs/conflicting/Web/API/Push_API +/zh-CN/docs/Web/API/RandomSource /zh-CN/docs/conflicting/Web/API/Crypto/getRandomValues +/zh-CN/docs/Web/API/RandomSource/getRandomValues /zh-CN/docs/Web/API/Crypto/getRandomValues +/zh-CN/docs/Web/API/Response/克隆 /zh-CN/docs/Web/API/Response/clone /zh-CN/docs/Web/API/Screen.availHeight /zh-CN/docs/Web/API/Screen/availHeight /zh-CN/docs/Web/API/Screen.availLeft /zh-CN/docs/Web/API/Screen/availLeft /zh-CN/docs/Web/API/Screen.availTop /zh-CN/docs/Web/API/Screen/availTop @@ -1471,16 +1723,23 @@ /zh-CN/docs/Web/API/Screen.height /zh-CN/docs/Web/API/Screen/height /zh-CN/docs/Web/API/Screen.pixelDepth /zh-CN/docs/Web/API/Screen/pixelDepth /zh-CN/docs/Web/API/Screen.width /zh-CN/docs/Web/API/Screen/width +/zh-CN/docs/Web/API/Screen_Capture_API/使用屏幕捕获API /zh-CN/docs/Web/API/Screen_Capture_API/Using_Screen_Capture /zh-CN/docs/Web/API/Selection.addRange /zh-CN/docs/Web/API/Selection/addRange /zh-CN/docs/Web/API/Selection.anchorNode /zh-CN/docs/Web/API/Selection/anchorNode /zh-CN/docs/Web/API/Selection.focusNode /zh-CN/docs/Web/API/Selection/focusNode /zh-CN/docs/Web/API/Selection.getRangeAt /zh-CN/docs/Web/API/Selection/getRangeAt /zh-CN/docs/Web/API/Selection.isCollapsed /zh-CN/docs/Web/API/Selection/isCollapsed /zh-CN/docs/Web/API/Selection.removeRange /zh-CN/docs/Web/API/Selection/removeRange +/zh-CN/docs/Web/API/Selection/从Document中删除 /zh-CN/docs/Web/API/Selection/deleteFromDocument +/zh-CN/docs/Web/API/Slotable /zh-CN/docs/conflicting/Web/API/Element +/zh-CN/docs/Web/API/Storage/LocalStorage /zh-CN/docs/conflicting/Web/API/Window/localStorage +/zh-CN/docs/Web/API/Streams_API/使用可读文件流 /zh-CN/docs/Web/API/Streams_API/Using_readable_streams +/zh-CN/docs/Web/API/Streams_API/概念 /zh-CN/docs/Web/API/Streams_API/Concepts /zh-CN/docs/Web/API/Text.isElementContentWhitespace /zh-CN/docs/Web/API/Text/isElementContentWhitespace /zh-CN/docs/Web/API/Text.replaceWholeText /zh-CN/docs/Web/API/Text/replaceWholeText /zh-CN/docs/Web/API/Text.splitText /zh-CN/docs/Web/API/Text/splitText /zh-CN/docs/Web/API/TextEncoder.TextEncoder /zh-CN/docs/Web/API/TextEncoder/TextEncoder +/zh-CN/docs/Web/API/TextRange/text /zh-CN/docs/orphaned/Web/API/TextRange/text /zh-CN/docs/Web/API/Touch.clientX /zh-CN/docs/Web/API/Touch/clientX /zh-CN/docs/Web/API/Touch.clientY /zh-CN/docs/Web/API/Touch/clientY /zh-CN/docs/Web/API/Touch.force /zh-CN/docs/Web/API/Touch/force @@ -1493,20 +1752,38 @@ /zh-CN/docs/Web/API/Touch.screenX /zh-CN/docs/Web/API/Touch/screenX /zh-CN/docs/Web/API/Touch.screenY /zh-CN/docs/Web/API/Touch/screenY /zh-CN/docs/Web/API/TouchEvent.changedTouches /zh-CN/docs/Web/API/TouchEvent/changedTouches +/zh-CN/docs/Web/API/UIEvent/视图 /zh-CN/docs/Web/API/UIEvent/view /zh-CN/docs/Web/API/URL.URL /zh-CN/docs/Web/API/URL/URL /zh-CN/docs/Web/API/URL.createObjectURL /zh-CN/docs/Web/API/URL/createObjectURL /zh-CN/docs/Web/API/URL.revokeObjectURL /zh-CN/docs/Web/API/URL/revokeObjectURL +/zh-CN/docs/Web/API/URL/密码 /zh-CN/docs/Web/API/URL/password +/zh-CN/docs/Web/API/URLUtils /zh-CN/docs/Web/API/HTMLHyperlinkElementUtils +/zh-CN/docs/Web/API/URLUtils/hash /zh-CN/docs/Web/API/HTMLHyperlinkElementUtils/hash +/zh-CN/docs/Web/API/URLUtils/href /zh-CN/docs/Web/API/HTMLHyperlinkElementUtils/href +/zh-CN/docs/Web/API/URLUtils/origin /zh-CN/docs/Web/API/HTMLHyperlinkElementUtils/origin +/zh-CN/docs/Web/API/URLUtils/password /zh-CN/docs/Web/API/HTMLHyperlinkElementUtils/password +/zh-CN/docs/Web/API/URLUtils/pathname /zh-CN/docs/Web/API/HTMLHyperlinkElementUtils/pathname +/zh-CN/docs/Web/API/URLUtils/search /zh-CN/docs/Web/API/HTMLHyperlinkElementUtils/search +/zh-CN/docs/Web/API/URLUtils/toString /zh-CN/docs/Web/API/HTMLHyperlinkElementUtils/toString +/zh-CN/docs/Web/API/URLUtils/username /zh-CN/docs/Web/API/HTMLHyperlinkElementUtils/username +/zh-CN/docs/Web/API/WebGLRenderingContext/多边形偏移(polygonOffset) /zh-CN/docs/Web/API/WebGLRenderingContext/polygonOffset /zh-CN/docs/Web/API/WebGL_API/Adding_2D_content_to_a_WebGL_context /zh-CN/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context /zh-CN/docs/Web/API/WebGL_API/Getting_started_with_WebGL /zh-CN/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +/zh-CN/docs/Web/API/WebRTC_API/Architecture /zh-CN/docs/conflicting/Web/API/WebRTC_API/Protocols +/zh-CN/docs/Web/API/WebRTC_API/Overview /zh-CN/docs/conflicting/Web/API/WebRTC_API +/zh-CN/docs/Web/API/WebRTC_API/WebRTC_basics /zh-CN/docs/conflicting/Web/API/WebRTC_API/Signaling_and_video_calling +/zh-CN/docs/Web/API/WebSocket/二进制类型 /zh-CN/docs/Web/API/WebSocket/binaryType +/zh-CN/docs/Web/API/WebSockets_API/WebSocket_Server_Vb.NET /zh-CN/docs/orphaned/Web/API/WebSockets_API/WebSocket_Server_Vb.NET /zh-CN/docs/Web/API/WebVR_API/WebVR_concepts /zh-CN/docs/Web/API/WebVR_API/Concepts /zh-CN/docs/Web/API/Web_Audio_API/基于Web_Audio_API实现的音频可视化效果 /zh-CN/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API +/zh-CN/docs/Web/API/Web_Audio_API/最佳实践 /zh-CN/docs/Web/API/Web_Audio_API/Best_practices /zh-CN/docs/Web/API/Window.alert /zh-CN/docs/Web/API/Window/alert /zh-CN/docs/Web/API/Window.applicationCache /zh-CN/docs/Web/API/Window/applicationCache -/zh-CN/docs/Web/API/Window.atob /zh-CN/docs/Web/API/WindowBase64/atob -/zh-CN/docs/Web/API/Window.btoa /zh-CN/docs/Web/API/WindowBase64/btoa +/zh-CN/docs/Web/API/Window.atob /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/atob +/zh-CN/docs/Web/API/Window.btoa /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/btoa /zh-CN/docs/Web/API/Window.cancelAnimationFrame /zh-CN/docs/Web/API/Window/cancelAnimationFrame /zh-CN/docs/Web/API/Window.clearImmediate /zh-CN/docs/Web/API/Window/clearImmediate -/zh-CN/docs/Web/API/Window.clearInterval /zh-CN/docs/Web/API/Window/clearInterval +/zh-CN/docs/Web/API/Window.clearInterval /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /zh-CN/docs/Web/API/Window.close /zh-CN/docs/Web/API/Window/close /zh-CN/docs/Web/API/Window.document /zh-CN/docs/Web/API/Window/document /zh-CN/docs/Web/API/Window.find /zh-CN/docs/Web/API/Window/find @@ -1525,12 +1802,12 @@ /zh-CN/docs/Web/API/Window.mozAnimationStartTime /zh-CN/docs/Web/API/Window/mozAnimationStartTIme /zh-CN/docs/Web/API/Window.name /zh-CN/docs/Web/API/Window/name /zh-CN/docs/Web/API/Window.navigator /zh-CN/docs/Web/API/Window/navigator -/zh-CN/docs/Web/API/Window.onbeforeunload /zh-CN/docs/Web/API/Window/onbeforeunload -/zh-CN/docs/Web/API/Window.onhashchange /zh-CN/docs/Web/API/Window/onhashchange -/zh-CN/docs/Web/API/Window.onmouseup /zh-CN/docs/Web/API/Window/onmouseup -/zh-CN/docs/Web/API/Window.onpopstate /zh-CN/docs/Web/API/Window/onpopstate +/zh-CN/docs/Web/API/Window.onbeforeunload /zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload +/zh-CN/docs/Web/API/Window.onhashchange /zh-CN/docs/Web/API/WindowEventHandlers/onhashchange +/zh-CN/docs/Web/API/Window.onmouseup /zh-CN/docs/conflicting/Web/API/GlobalEventHandlers/onmouseup +/zh-CN/docs/Web/API/Window.onpopstate /zh-CN/docs/Web/API/WindowEventHandlers/onpopstate /zh-CN/docs/Web/API/Window.onresize /zh-CN/docs/Web/API/GlobalEventHandlers/onresize -/zh-CN/docs/Web/API/Window.onunload /zh-CN/docs/Web/API/Window/onunload +/zh-CN/docs/Web/API/Window.onunload /zh-CN/docs/Web/API/WindowEventHandlers/onunload /zh-CN/docs/Web/API/Window.openDialog /zh-CN/docs/Web/API/Window/openDialog /zh-CN/docs/Web/API/Window.opener /zh-CN/docs/Web/API/Window/opener /zh-CN/docs/Web/API/Window.outerHeight /zh-CN/docs/Web/API/Window/outerHeight @@ -1548,15 +1825,32 @@ /zh-CN/docs/Web/API/Window.scrollY /zh-CN/docs/Web/API/Window/scrollY /zh-CN/docs/Web/API/Window.self /zh-CN/docs/Web/API/Window/self /zh-CN/docs/Web/API/Window.setImmediate /zh-CN/docs/Web/API/Window/setImmediate -/zh-CN/docs/Web/API/Window.setInterval /zh-CN/docs/Web/API/Window/setInterval +/zh-CN/docs/Web/API/Window.setInterval /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setInterval /zh-CN/docs/Web/API/Window.showModalDialog /zh-CN/docs/Web/API/Window/showModalDialog /zh-CN/docs/Web/API/Window.top /zh-CN/docs/Web/API/Window/top -/zh-CN/docs/Web/API/Window/atob /zh-CN/docs/Web/API/WindowBase64/atob -/zh-CN/docs/Web/API/Window/btoa /zh-CN/docs/Web/API/WindowBase64/btoa +/zh-CN/docs/Web/API/Window/URL /zh-CN/docs/conflicting/Web/API/URL +/zh-CN/docs/Web/API/Window/Window.blur() /zh-CN/docs/Web/API/Window/blur +/zh-CN/docs/Web/API/Window/atob /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/atob +/zh-CN/docs/Web/API/Window/btoa /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/btoa /zh-CN/docs/Web/API/Window/caches /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/caches +/zh-CN/docs/Web/API/Window/clearInterval /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval +/zh-CN/docs/Web/API/Window/getAttention /zh-CN/docs/orphaned/Web/API/Window/getAttention +/zh-CN/docs/Web/API/Window/onbeforeunload /zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload +/zh-CN/docs/Web/API/Window/onhashchange /zh-CN/docs/Web/API/WindowEventHandlers/onhashchange +/zh-CN/docs/Web/API/Window/onmouseup /zh-CN/docs/conflicting/Web/API/GlobalEventHandlers/onmouseup +/zh-CN/docs/Web/API/Window/onpopstate /zh-CN/docs/Web/API/WindowEventHandlers/onpopstate /zh-CN/docs/Web/API/Window/onresize /zh-CN/docs/Web/API/GlobalEventHandlers/onresize +/zh-CN/docs/Web/API/Window/onscroll /zh-CN/docs/conflicting/Web/API/GlobalEventHandlers/onscroll +/zh-CN/docs/Web/API/Window/onunload /zh-CN/docs/Web/API/WindowEventHandlers/onunload +/zh-CN/docs/Web/API/Window/restore /zh-CN/docs/conflicting/Web/API/Window/moveTo +/zh-CN/docs/Web/API/Window/setInterval /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setInterval +/zh-CN/docs/Web/API/Window/setTimeout /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout /zh-CN/docs/Web/API/WindowBase64 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope#方法 +/zh-CN/docs/Web/API/WindowBase64/Base64_encoding_and_decoding /zh-CN/docs/Glossary/Base64 +/zh-CN/docs/Web/API/WindowBase64/atob /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/atob +/zh-CN/docs/Web/API/WindowBase64/btoa /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/btoa /zh-CN/docs/Web/API/WindowTimers /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope +/zh-CN/docs/Web/API/WindowTimers/clearTimeout /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /zh-CN/docs/Web/API/XMLDocument.load /zh-CN/docs/Web/API/XMLDocument/load /zh-CN/docs/Web/API/XMLHttpRequest/FormData /zh-CN/docs/Web/API/FormData /zh-CN/docs/Web/API/console.dir /zh-CN/docs/Web/API/Console/dir @@ -1587,40 +1881,42 @@ /zh-CN/docs/Web/API/document.documentElement /zh-CN/docs/Web/API/Document/documentElement /zh-CN/docs/Web/API/document.documentURI /zh-CN/docs/Web/API/Document/documentURI /zh-CN/docs/Web/API/document.documentURIObject /zh-CN/docs/Web/API/Document/documentURIObject -/zh-CN/docs/Web/API/document.elementFromPoint /zh-CN/docs/Web/API/Document/elementFromPoint +/zh-CN/docs/Web/API/document.elementFromPoint /zh-CN/docs/conflicting/Web/API/DocumentOrShadowRoot/elementFromPoint /zh-CN/docs/Web/API/document.embeds /zh-CN/docs/Web/API/Document/embeds /zh-CN/docs/Web/API/document.evaluate /zh-CN/docs/Web/API/Document/evaluate /zh-CN/docs/Web/API/document.execCommand /zh-CN/docs/Web/API/Document/execCommand /zh-CN/docs/Web/API/document.fgColor /zh-CN/docs/Web/API/Document/fgColor /zh-CN/docs/Web/API/document.forms /zh-CN/docs/Web/API/Document/forms /zh-CN/docs/Web/API/document.getElementById /zh-CN/docs/Web/API/Document/getElementById -/zh-CN/docs/Web/API/document.getSelection /zh-CN/docs/Web/API/Document/getSelection +/zh-CN/docs/Web/API/document.getSelection /zh-CN/docs/conflicting/Web/API/DocumentOrShadowRoot/getSelection /zh-CN/docs/Web/API/document.hasFocus /zh-CN/docs/Web/API/Document/hasFocus /zh-CN/docs/Web/API/document.head /zh-CN/docs/Web/API/Document/head /zh-CN/docs/Web/API/document.height /zh-CN/docs/Web/API/Document/height /zh-CN/docs/Web/API/document.images /zh-CN/docs/Web/API/Document/images /zh-CN/docs/Web/API/document.implementation /zh-CN/docs/Web/API/Document/implementation -/zh-CN/docs/Web/API/document.inputEncoding /zh-CN/docs/Web/API/Document/inputEncoding +/zh-CN/docs/Web/API/document.inputEncoding /zh-CN/docs/conflicting/Web/API/Document/characterSet /zh-CN/docs/Web/API/document.lastModified /zh-CN/docs/Web/API/Document/lastModified /zh-CN/docs/Web/API/document.lastStyleSheetSet /zh-CN/docs/Web/API/Document/lastStyleSheetSet /zh-CN/docs/Web/API/document.linkColor /zh-CN/docs/Web/API/Document/linkColor /zh-CN/docs/Web/API/document.links /zh-CN/docs/Web/API/Document/links /zh-CN/docs/Web/API/document.location /zh-CN/docs/Web/API/Document/location -/zh-CN/docs/Web/API/document.mozFullScreen /zh-CN/docs/Web/API/Document/mozFullScreen -/zh-CN/docs/Web/API/document.mozFullScreenElement /zh-CN/docs/Web/API/Document/mozFullScreenElement -/zh-CN/docs/Web/API/document.mozFullScreenEnabled /zh-CN/docs/Web/API/Document/mozFullScreenEnabled +/zh-CN/docs/Web/API/document.mozFullScreen /zh-CN/docs/Web/API/Document/fullscreen +/zh-CN/docs/Web/API/document.mozFullScreenElement /zh-CN/docs/Web/API/DocumentOrShadowRoot/fullscreenElement +/zh-CN/docs/Web/API/document.mozFullScreenEnabled /zh-CN/docs/Web/API/Document/fullscreenEnabled /zh-CN/docs/Web/API/document.querySelector /zh-CN/docs/Web/API/Document/querySelector /zh-CN/docs/Web/API/document.readyState /zh-CN/docs/Web/API/Document/readyState /zh-CN/docs/Web/API/document.referrer /zh-CN/docs/Web/API/Document/referrer /zh-CN/docs/Web/API/document.scripts /zh-CN/docs/Web/API/Document/scripts -/zh-CN/docs/Web/API/document.styleSheets /zh-CN/docs/Web/API/Document/styleSheets +/zh-CN/docs/Web/API/document.styleSheets /zh-CN/docs/conflicting/Web/API/DocumentOrShadowRoot/styleSheets /zh-CN/docs/Web/API/document.title /zh-CN/docs/Web/API/Document/title /zh-CN/docs/Web/API/document.tooltipNode /zh-CN/docs/Web/API/Document/tooltipNode /zh-CN/docs/Web/API/document.width /zh-CN/docs/Web/API/Document/width /zh-CN/docs/Web/API/document.write /zh-CN/docs/Web/API/Document/write /zh-CN/docs/Web/API/document.writeln /zh-CN/docs/Web/API/Document/writeln /zh-CN/docs/Web/API/element.outerHTML /zh-CN/docs/Web/API/Element/outerHTML +/zh-CN/docs/Web/API/event.altKey /zh-CN/docs/conflicting/Web/API/MouseEvent/altKey /zh-CN/docs/Web/API/event.bubbles /zh-CN/docs/Web/API/Event/bubbles +/zh-CN/docs/Web/API/event.button /zh-CN/docs/conflicting/Web/API/MouseEvent/button /zh-CN/docs/Web/API/event.cancelBubble /zh-CN/docs/Web/API/UIEvent/cancelBubble /zh-CN/docs/Web/API/event.cancelable /zh-CN/docs/Web/API/Event/cancelable /zh-CN/docs/Web/API/event.currentTarget /zh-CN/docs/Web/API/Event/currentTarget @@ -1629,24 +1925,36 @@ /zh-CN/docs/Web/API/event.isTrusted /zh-CN/docs/Web/API/Event/isTrusted /zh-CN/docs/Web/API/event.pageY /zh-CN/docs/Web/API/UIEvent/pageY /zh-CN/docs/Web/API/event.preventDefault /zh-CN/docs/Web/API/Event/preventDefault +/zh-CN/docs/Web/API/event.relatedTarget /zh-CN/docs/conflicting/Web/API/MouseEvent/relatedTarget +/zh-CN/docs/Web/API/event.shiftKey /zh-CN/docs/conflicting/Web/API/MouseEvent/shiftKey /zh-CN/docs/Web/API/event.stopImmediatePropagation /zh-CN/docs/Web/API/Event/stopImmediatePropagation /zh-CN/docs/Web/API/event.stopPropagation /zh-CN/docs/Web/API/Event/stopPropagation /zh-CN/docs/Web/API/event.timeStamp /zh-CN/docs/Web/API/Event/timeStamp /zh-CN/docs/Web/API/event.type /zh-CN/docs/Web/API/Event/type /zh-CN/docs/Web/API/navigator.doNotTrack /zh-CN/docs/Web/API/Navigator/doNotTrack /zh-CN/docs/Web/API/navigator.id.watch /zh-CN/docs/Web/API/IdentityManager/watch +/zh-CN/docs/Web/API/notification/Using_Web_Notifications /zh-CN/docs/Web/API/Notifications_API/Using_the_Notifications_API +/zh-CN/docs/Web/API/notification/sound /zh-CN/docs/orphaned/Web/API/notification/sound /zh-CN/docs/Web/API/range.getBoundingClientRect /zh-CN/docs/Web/API/Range/getBoundingClientRect /zh-CN/docs/Web/API/range.startOffset /zh-CN/docs/Web/API/Range/startOffset /zh-CN/docs/Web/API/range.surroundContents /zh-CN/docs/Web/API/Range/surroundContents -/zh-CN/docs/Web/API/window.onscroll /zh-CN/docs/Web/API/Window/onscroll +/zh-CN/docs/Web/API/window.onscroll /zh-CN/docs/conflicting/Web/API/GlobalEventHandlers/onscroll /zh-CN/docs/Web/API/window.requestAnimationFrame /zh-CN/docs/Web/API/Window/requestAnimationFrame /zh-CN/docs/Web/API/剪贴板_API /zh-CN/docs/Web/API/Clipboard_API /zh-CN/docs/Web/API/开发式平台 /zh-CN/docs/Web/API/Push_API +/zh-CN/docs/Web/API/指数 /zh-CN/docs/Web/API/Index +/zh-CN/docs/Web/API/支付_请求_接口 /zh-CN/docs/Web/API/Payment_Request_API +/zh-CN/docs/Web/API/支付_请求_接口/Concepts /zh-CN/docs/Web/API/Payment_Request_API/Concepts /zh-CN/docs/Web/API/消息事件 /zh-CN/docs/Web/API/MessageEvent /zh-CN/docs/Web/API/网络_状况_接口 /zh-CN/docs/Web/API/Network_Information_API /zh-CN/docs/Web/API/自定义元素注册表 /zh-CN/docs/Web/API/CustomElementRegistry /zh-CN/docs/Web/API/自定义元素注册表/define /zh-CN/docs/Web/API/CustomElementRegistry/define +/zh-CN/docs/Web/API/语音识别 /zh-CN/docs/Web/API/SpeechRecognition +/zh-CN/docs/Web/API/语音识别/result_event /zh-CN/docs/Web/API/SpeechRecognition/result_event /zh-CN/docs/Web/API/鼠标事件 /zh-CN/docs/Web/API/MouseEvent +/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role /zh-CN/docs/Web/Accessibility/ARIA/Roles/button_role +/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/使用aria-hidden属性 /zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute +/zh-CN/docs/Web/Accessibility/Web_Development /zh-CN/docs/conflicting/Web/Accessibility /zh-CN/docs/Web/Apps/Fundamentals/Audio_and_video_delivery /zh-CN/docs/Web/Guide/Audio_and_video_delivery /zh-CN/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/WebAudio_playbackRate_explained /zh-CN/docs/Web/Guide/Audio_and_video_delivery/WebAudio_playbackRate_explained /zh-CN/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/buffering_seeking_time_ranges /zh-CN/docs/Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges @@ -1654,39 +1962,71 @@ /zh-CN/docs/Web/Apps/Progressive /zh-CN/docs/Web/Progressive_web_apps /zh-CN/docs/Web/Apps/Progressive/App_structure /zh-CN/docs/Web/Progressive_web_apps/App_structure /zh-CN/docs/Web/Apps/Progressive/Introduction /zh-CN/docs/Web/Progressive_web_apps/Introduction -/zh-CN/docs/Web/Apps/Progressive/Network_independent /zh-CN/docs/Web/Progressive_web_apps/Network_independent -/zh-CN/docs/Web/Apps/Progressive/Re-engageable /zh-CN/docs/Web/Progressive_web_apps/Re-engageable -/zh-CN/docs/Web/Apps/Progressive/Responsive /zh-CN/docs/Web/Progressive_web_apps/Responsive +/zh-CN/docs/Web/Apps/Progressive/Network_independent /zh-CN/docs/conflicting/Web/Progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f +/zh-CN/docs/Web/Apps/Progressive/Re-engageable /zh-CN/docs/conflicting/Web/Progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67 +/zh-CN/docs/Web/Apps/Progressive/Responsive /zh-CN/docs/conflicting/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks /zh-CN/docs/Web/CSS/边框分割 /zh-CN/docs/Web/CSS/border-collapse /zh-CN/docs/Web/CSS/-moz-appearance /zh-CN/docs/Web/CSS/appearance -/zh-CN/docs/Web/CSS/:blank /zh-CN/docs/Web/CSS/:-moz-only-whitespace +/zh-CN/docs/Web/CSS/:-moz-placeholder /zh-CN/docs/conflicting/Web/CSS/:placeholder-shown +/zh-CN/docs/Web/CSS/::-moz-placeholder /zh-CN/docs/conflicting/Web/CSS/::placeholder +/zh-CN/docs/Web/CSS/:any /zh-CN/docs/conflicting/Web/CSS/:is +/zh-CN/docs/Web/CSS/:blank空白伪类 /zh-CN/docs/Web/CSS/:blank /zh-CN/docs/Web/CSS/:matches /zh-CN/docs/Web/CSS/:is +/zh-CN/docs/Web/CSS/@viewport/height /zh-CN/docs/conflicting/Web/CSS/@viewport +/zh-CN/docs/Web/CSS/@viewport/orientation /zh-CN/docs/conflicting/Web/CSS/@viewport_7861ca3461a359b150d44f2c8d74e53a +/zh-CN/docs/Web/CSS/@viewport/viewport-fit /zh-CN/docs/conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f +/zh-CN/docs/Web/CSS/@viewport/width /zh-CN/docs/conflicting/Web/CSS/@viewport_c925ec0506b352ea1185248b874f7848 +/zh-CN/docs/Web/CSS/@viewport/zoom /zh-CN/docs/conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518 /zh-CN/docs/Web/CSS/Adjacent_sibling_selectors /zh-CN/docs/Web/CSS/Adjacent_sibling_combinator +/zh-CN/docs/Web/CSS/All_About_The_Containing_Block /zh-CN/docs/Web/CSS/Containing_block /zh-CN/docs/Web/CSS/Block_formatting_context /zh-CN/docs/Web/Guide/CSS/Block_formatting_context /zh-CN/docs/Web/CSS/CSS3中的关键帧 /zh-CN/docs/Web/CSS/@keyframes -/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/弹性框的高级布局 /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins +/zh-CN/docs/Web/CSS/CSSOM_View/坐标系 /zh-CN/docs/Web/CSS/CSSOM_View/Coordinate_systems +/zh-CN/docs/Web/CSS/CSS_Background_and_Borders /zh-CN/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders +/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds /zh-CN/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/圆角边框发生器 /zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator +/zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images /zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +/zh-CN/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +/zh-CN/docs/Web/CSS/CSS_Colors /zh-CN/docs/conflicting/Web/CSS/CSS_Color +/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox_的_向下_支持 /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins /zh-CN/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes /zh-CN/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications /zh-CN/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/典型_用例_的_Flexbox /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/弹性框的高级布局 /zh-CN/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/弹性盒子与其他布局方法的联系 /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods +/zh-CN/docs/Web/CSS/CSS_Flow_Layout/在Flow中和Flow之外 /zh-CN/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes /zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes +/zh-CN/docs/Web/CSS/CSS_Grid_Layout/利用CSS网格布局实现常用布局 /zh-CN/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +/zh-CN/docs/Web/CSS/CSS_Logical_Properties/Basic_conceptsjie /zh-CN/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts +/zh-CN/docs/Web/CSS/CSS_Logical_Properties/浮动和定位 /zh-CN/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning +/zh-CN/docs/Web/CSS/CSS_Selectors/Comparison_with_XPath /zh-CN/docs/Web/XPath/Comparison_with_CSS_selectors /zh-CN/docs/Web/CSS/CSS_reference /zh-CN/docs/Web/CSS/Reference /zh-CN/docs/Web/CSS/CSS_values_syntax /zh-CN/docs/Web/CSS +/zh-CN/docs/Web/CSS/CSS_分片 /zh-CN/docs/Web/CSS/CSS_Fragmentation /zh-CN/docs/Web/CSS/Child_selectors /zh-CN/docs/Web/CSS/Child_combinator +/zh-CN/docs/Web/CSS/Common_CSS_Questions /zh-CN/docs/Learn/CSS/Howto/CSS_FAQ /zh-CN/docs/Web/CSS/Descendant_selectors /zh-CN/docs/Web/CSS/Descendant_combinator /zh-CN/docs/Web/CSS/General_sibling_selectors /zh-CN/docs/Web/CSS/General_sibling_combinator +/zh-CN/docs/Web/CSS/Layout_cookbook/卡片 /zh-CN/docs/Web/CSS/Layout_cookbook/Card +/zh-CN/docs/Web/CSS/Layout_cookbook/媒体对象 /zh-CN/docs/Web/CSS/Layout_cookbook/Media_objects /zh-CN/docs/Web/CSS/Reference/Webkit_Extensions /zh-CN/docs/Web/CSS/WebKit_Extensions /zh-CN/docs/Web/CSS/Reference/background-blend-mode /zh-CN/docs/Web/CSS/background-blend-mode /zh-CN/docs/Web/CSS/Reference/mix-blend-mode /zh-CN/docs/Web/CSS/mix-blend-mode /zh-CN/docs/Web/CSS/Tutorials/Using_CSS_transforms /zh-CN/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms -/zh-CN/docs/Web/CSS/Understanding_z-index /zh-CN/docs/Web/Guide/CSS/Understanding_z_index -/zh-CN/docs/Web/CSS/Understanding_z-index/Adding_z-index /zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Adding_z-index -/zh-CN/docs/Web/CSS/Understanding_z-index/Stacking_and_float /zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_and_float -/zh-CN/docs/Web/CSS/Understanding_z-index/Stacking_without_z-index /zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index -/zh-CN/docs/Web/CSS/Understanding_z-index/The_stacking_context /zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context +/zh-CN/docs/Web/CSS/Understanding_z-index /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index +/zh-CN/docs/Web/CSS/Understanding_z-index/Adding_z-index /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +/zh-CN/docs/Web/CSS/Understanding_z-index/Stacking_and_float /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +/zh-CN/docs/Web/CSS/Understanding_z-index/Stacking_without_z-index /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +/zh-CN/docs/Web/CSS/Understanding_z-index/The_stacking_context /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context /zh-CN/docs/Web/CSS/Using_CSS_variables /zh-CN/docs/Web/CSS/Using_CSS_custom_properties -/zh-CN/docs/Web/CSS/Visual_formatting_model /zh-CN/docs/Web/Guide/CSS/Visual_formatting_model /zh-CN/docs/Web/CSS/attr /zh-CN/docs/Web/CSS/attr() /zh-CN/docs/Web/CSS/box_model /zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model /zh-CN/docs/Web/CSS/calc /zh-CN/docs/Web/CSS/calc() /zh-CN/docs/Web/CSS/clamp /zh-CN/docs/Web/CSS/clamp() /zh-CN/docs/Web/CSS/counter /zh-CN/docs/Web/CSS/counter() /zh-CN/docs/Web/CSS/counters /zh-CN/docs/Web/CSS/counters() +/zh-CN/docs/Web/CSS/cursor/url /zh-CN/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property /zh-CN/docs/Web/CSS/element /zh-CN/docs/Web/CSS/element() /zh-CN/docs/Web/CSS/env /zh-CN/docs/Web/CSS/env() /zh-CN/docs/Web/CSS/filter-function/blur /zh-CN/docs/Web/CSS/filter-function/blur() @@ -1705,6 +2045,7 @@ /zh-CN/docs/Web/CSS/repeat /zh-CN/docs/Web/CSS/repeat() /zh-CN/docs/Web/CSS/repeating-linear-gradient /zh-CN/docs/Web/CSS/repeating-linear-gradient() /zh-CN/docs/Web/CSS/repeating-radial-gradient /zh-CN/docs/Web/CSS/repeating-radial-gradient() +/zh-CN/docs/Web/CSS/timing-function /zh-CN/docs/conflicting/Web/CSS/easing-function /zh-CN/docs/Web/CSS/transform-function/matrix /zh-CN/docs/Web/CSS/transform-function/matrix() /zh-CN/docs/Web/CSS/transform-function/matrix3d /zh-CN/docs/Web/CSS/transform-function/matrix3d() /zh-CN/docs/Web/CSS/transform-function/perspective /zh-CN/docs/Web/CSS/transform-function/perspective() @@ -1722,35 +2063,57 @@ /zh-CN/docs/Web/CSS/transform-function/translate /zh-CN/docs/Web/CSS/transform-function/translate() /zh-CN/docs/Web/CSS/transform-function/translate3d /zh-CN/docs/Web/CSS/transform-function/translate3d() /zh-CN/docs/Web/CSS/transform-function/translateY /zh-CN/docs/Web/CSS/transform-function/translateY() +/zh-CN/docs/Web/CSS/url /zh-CN/docs/Web/CSS/url() /zh-CN/docs/Web/CSS/var /zh-CN/docs/Web/CSS/var() +/zh-CN/docs/Web/CSS/word-wrap /zh-CN/docs/Web/CSS/overflow-wrap +/zh-CN/docs/Web/CSS/偏移 /zh-CN/docs/Web/CSS/offset /zh-CN/docs/Web/CSS/动画 /zh-CN/docs/Web/CSS/animation /zh-CN/docs/Web/CSS/右上角边框半径 /zh-CN/docs/Web/CSS/border-top-right-radius +/zh-CN/docs/Web/CSS/媒体查询 /zh-CN/docs/Web/CSS/Media_Queries /zh-CN/docs/Web/CSS/实际值 /zh-CN/docs/Web/CSS/actual_value -/zh-CN/docs/Web/CSS/开始 /zh-CN/docs/Web/Guide/CSS/Getting_started -/zh-CN/docs/Web/CSS/开始/Boxes /zh-CN/docs/Web/Guide/CSS/Getting_started/Boxes -/zh-CN/docs/Web/CSS/开始/Cascading_and_inheritance /zh-CN/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance -/zh-CN/docs/Web/CSS/开始/Color /zh-CN/docs/Web/Guide/CSS/Getting_started/Color -/zh-CN/docs/Web/CSS/开始/Content /zh-CN/docs/Web/Guide/CSS/Getting_started/Content -/zh-CN/docs/Web/CSS/开始/How_CSS_works /zh-CN/docs/Web/Guide/CSS/Getting_started/How_CSS_works -/zh-CN/docs/Web/CSS/开始/Lists /zh-CN/docs/Web/Guide/CSS/Getting_started/Lists -/zh-CN/docs/Web/CSS/开始/Readable_CSS /zh-CN/docs/Web/Guide/CSS/Getting_started/Readable_CSS -/zh-CN/docs/Web/CSS/开始/SVG_and_CSS /zh-CN/docs/Web/Guide/CSS/Getting_started/SVG_and_CSS -/zh-CN/docs/Web/CSS/开始/Selectors /zh-CN/docs/Web/Guide/CSS/Getting_started/Selectors -/zh-CN/docs/Web/CSS/开始/Tables /zh-CN/docs/Web/Guide/CSS/Getting_started/Tables -/zh-CN/docs/Web/CSS/开始/Text_styles /zh-CN/docs/Web/Guide/CSS/Getting_started/Text_styles -/zh-CN/docs/Web/CSS/开始/What_is_CSS /zh-CN/docs/Web/Guide/CSS/Getting_started/What_is_CSS -/zh-CN/docs/Web/CSS/开始/为何使用CSS /zh-CN/docs/Web/Guide/CSS/Getting_started/Why_use_CSS -/zh-CN/docs/Web/CSS/开始/媒体 /zh-CN/docs/Web/Guide/CSS/Getting_started/Media -/zh-CN/docs/Web/CSS/开始/布局 /zh-CN/docs/Web/Guide/CSS/Getting_started/Layout +/zh-CN/docs/Web/CSS/开始 /zh-CN/docs/conflicting/Learn/CSS/First_steps +/zh-CN/docs/Web/CSS/开始/Boxes /zh-CN/docs/conflicting/Learn/CSS/Building_blocks +/zh-CN/docs/Web/CSS/开始/Cascading_and_inheritance /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance +/zh-CN/docs/Web/CSS/开始/Color /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units +/zh-CN/docs/Web/CSS/开始/Content /zh-CN/docs/Learn/CSS/Howto/Generated_content +/zh-CN/docs/Web/CSS/开始/How_CSS_works /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works +/zh-CN/docs/Web/CSS/开始/Lists /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/zh-CN/docs/Web/CSS/开始/Readable_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_is_structured +/zh-CN/docs/Web/CSS/开始/SVG_and_CSS /zh-CN/docs/Web/SVG/Tutorial/SVG_and_CSS +/zh-CN/docs/Web/CSS/开始/Selectors /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Selectors +/zh-CN/docs/Web/CSS/开始/Tables /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables +/zh-CN/docs/Web/CSS/开始/Text_styles /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Fundamentals_5a3f2ce7cc4f23ec431e57a447af0711 +/zh-CN/docs/Web/CSS/开始/What_is_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_b66915031fb62b5fee1201086144e209 +/zh-CN/docs/Web/CSS/开始/为何使用CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 +/zh-CN/docs/Web/CSS/开始/媒体 /zh-CN/docs/Web/Progressive_web_apps/Responsive/Media_types +/zh-CN/docs/Web/CSS/开始/布局 /zh-CN/docs/conflicting/Learn/CSS/CSS_layout /zh-CN/docs/Web/CSS/整型 /zh-CN/docs/Web/CSS/integer /zh-CN/docs/Web/CSS/文本修饰 /zh-CN/docs/Web/CSS/text-decoration +/zh-CN/docs/Web/CSS/文本装饰线厚度(粗细) /zh-CN/docs/Web/CSS/text-decoration-thickness /zh-CN/docs/Web/CSS/混合模式 /zh-CN/docs/Web/CSS/blend-mode -/zh-CN/docs/Web/Events/Activate /zh-CN/docs/Web/API/Element/Activate_event -/zh-CN/docs/Web/Events/DOMContentLoaded_(event) /zh-CN/docs/Web/Events/DOMContentLoaded +/zh-CN/docs/Web/CSS/网格-模板-列 /zh-CN/docs/Web/CSS/grid-template-rows +/zh-CN/docs/Web/Events/Activate /zh-CN/docs/Web/API/Element/DOMActivate_event +/zh-CN/docs/Web/Events/DOMContentLoaded /zh-CN/docs/Web/API/Window/DOMContentLoaded_event +/zh-CN/docs/Web/Events/DOMContentLoaded_(event) /zh-CN/docs/Web/API/Window/DOMContentLoaded_event /zh-CN/docs/Web/Events/DOMMouseScroll /zh-CN/docs/Web/API/Element/DOMMouseScroll_event +/zh-CN/docs/Web/Events/abort /zh-CN/docs/conflicting/Web/API/HTMLMediaElement/abort_event +/zh-CN/docs/Web/Events/afterprint /zh-CN/docs/Web/API/Window/afterprint_event +/zh-CN/docs/Web/Events/afterscriptexecute /zh-CN/docs/Web/API/Element/afterscriptexecute_event +/zh-CN/docs/Web/Events/animationend /zh-CN/docs/Web/API/HTMLElement/animationend_event +/zh-CN/docs/Web/Events/animationstart /zh-CN/docs/Web/API/HTMLElement/animationstart_event +/zh-CN/docs/Web/Events/beforeprint /zh-CN/docs/Web/API/Window/beforeprint_event +/zh-CN/docs/Web/Events/beforescriptexecute /zh-CN/docs/Web/API/Element/beforescriptexecute_event +/zh-CN/docs/Web/Events/beforeunload /zh-CN/docs/Web/API/Window/beforeunload_event +/zh-CN/docs/Web/Events/blur /zh-CN/docs/Web/API/Element/blur_event /zh-CN/docs/Web/Events/canplay /zh-CN/docs/Web/API/HTMLMediaElement/canplay_event /zh-CN/docs/Web/Events/canplaythrough /zh-CN/docs/Web/API/HTMLMediaElement/canplaythrough_event +/zh-CN/docs/Web/Events/change /zh-CN/docs/Web/API/HTMLElement/change_event /zh-CN/docs/Web/Events/click /zh-CN/docs/Web/API/Element/click_event +/zh-CN/docs/Web/Events/compositionend /zh-CN/docs/Web/API/Element/compositionend_event +/zh-CN/docs/Web/Events/compositionstart /zh-CN/docs/Web/API/Element/compositionstart_event +/zh-CN/docs/Web/Events/compositionupdate /zh-CN/docs/Web/API/Element/compositionupdate_event +/zh-CN/docs/Web/Events/copy /zh-CN/docs/Web/API/Element/copy_event +/zh-CN/docs/Web/Events/cut /zh-CN/docs/Web/API/Element/cut_event /zh-CN/docs/Web/Events/dblclick /zh-CN/docs/Web/API/Element/dblclick_event /zh-CN/docs/Web/Events/devicechange /zh-CN/docs/Web/API/MediaDevices/devicechange_event /zh-CN/docs/Web/Events/deviceorientation /zh-CN/docs/Web/API/Window/deviceorientation_event @@ -1762,25 +2125,38 @@ /zh-CN/docs/Web/Events/dragstart /zh-CN/docs/Web/API/Document/dragstart_event /zh-CN/docs/Web/Events/drop /zh-CN/docs/Web/API/Document/drop_event /zh-CN/docs/Web/Events/ended /zh-CN/docs/Web/API/HTMLMediaElement/ended_event +/zh-CN/docs/Web/Events/error /zh-CN/docs/Web/API/Element/error_event +/zh-CN/docs/Web/Events/focus /zh-CN/docs/Web/API/Element/focus_event +/zh-CN/docs/Web/Events/focusout /zh-CN/docs/Web/API/Element/focusout_event /zh-CN/docs/Web/Events/fullscreenchange /zh-CN/docs/Web/API/Document/fullscreenchange_event /zh-CN/docs/Web/Events/gamepadconnected /zh-CN/docs/Web/API/Window/gamepadconnected_event /zh-CN/docs/Web/Events/hashchange /zh-CN/docs/Web/API/Window/hashchange_event +/zh-CN/docs/Web/Events/icecandidate /zh-CN/docs/Web/API/RTCPeerConnection/icecandidate_event +/zh-CN/docs/Web/Events/input /zh-CN/docs/Web/API/HTMLElement/input_event /zh-CN/docs/Web/Events/keypress /zh-CN/docs/Web/API/Document/keypress_event /zh-CN/docs/Web/Events/languagechange /zh-CN/docs/Web/API/Window/languagechange_event +/zh-CN/docs/Web/Events/load /zh-CN/docs/Web/API/Window/load_event /zh-CN/docs/Web/Events/loadeddata /zh-CN/docs/Web/API/HTMLMediaElement/loadeddata_event +/zh-CN/docs/Web/Events/loadend /zh-CN/docs/Web/API/XMLHttpRequest/loadend_event +/zh-CN/docs/Web/Events/loadstart /zh-CN/docs/Web/API/XMLHttpRequest/loadstart_event +/zh-CN/docs/Web/Events/message /zh-CN/docs/Web/API/BroadcastChannel/message_event /zh-CN/docs/Web/Events/mousedown /zh-CN/docs/Web/API/Element/mousedown_event /zh-CN/docs/Web/Events/mouseenter /zh-CN/docs/Web/API/Element/mouseenter_event /zh-CN/docs/Web/Events/mouseleave /zh-CN/docs/Web/API/Element/mouseleave_event /zh-CN/docs/Web/Events/mousemove /zh-CN/docs/Web/API/Element/mousemove_event /zh-CN/docs/Web/Events/mouseout /zh-CN/docs/Web/API/Element/mouseout_event /zh-CN/docs/Web/Events/mouseup /zh-CN/docs/Web/API/Element/mouseup_event +/zh-CN/docs/Web/Events/mousewheel /zh-CN/docs/Web/API/Element/mousewheel_event /zh-CN/docs/Web/Events/offline /zh-CN/docs/Web/API/Window/offline_event /zh-CN/docs/Web/Events/online /zh-CN/docs/Web/API/Window/online_event /zh-CN/docs/Web/Events/orientationchange /zh-CN/docs/Web/API/Window/orientationchange_event +/zh-CN/docs/Web/Events/pageshow /zh-CN/docs/Web/API/Window/pageshow_event +/zh-CN/docs/Web/Events/paste /zh-CN/docs/Web/API/Element/paste_event /zh-CN/docs/Web/Events/play /zh-CN/docs/Web/API/HTMLMediaElement/play_event /zh-CN/docs/Web/Events/playing /zh-CN/docs/Web/API/HTMLMediaElement/playing_event /zh-CN/docs/Web/Events/popstate /zh-CN/docs/Web/API/Window/popstate_event /zh-CN/docs/Web/Events/readystatechange /en-US/docs/Web/API/Document/readystatechange_event +/zh-CN/docs/Web/Events/readystatechange事件 /zh-CN/docs/Web/API/Document/readystatechange_event /zh-CN/docs/Web/Events/reset /zh-CN/docs/Web/API/HTMLFormElement/reset_event /zh-CN/docs/Web/Events/resize /zh-CN/docs/Web/API/Window/resize_event /zh-CN/docs/Web/Events/scroll /zh-CN/docs/Web/API/Document/scroll_event @@ -1794,26 +2170,69 @@ /zh-CN/docs/Web/Events/toggle /zh-CN/docs/Web/API/HTMLDetailsElement/toggle_event /zh-CN/docs/Web/Events/touchcancel /zh-CN/docs/Web/API/Element/touchcancel_event /zh-CN/docs/Web/Events/touchend /zh-CN/docs/Web/API/Document/touchend_event -/zh-CN/docs/Web/Events/touchmove /zh-CN/docs/Web/API/Document/rouchmove_event +/zh-CN/docs/Web/Events/touchmove /zh-CN/docs/Web/API/Document/touchmove_event /zh-CN/docs/Web/Events/touchstart /zh-CN/docs/Web/API/Element/touchstart_event +/zh-CN/docs/Web/Events/transitionend /zh-CN/docs/Web/API/HTMLElement/transitionend_event +/zh-CN/docs/Web/Events/unhandledrejection /zh-CN/docs/Web/API/Window/unhandledrejection_event +/zh-CN/docs/Web/Events/unload /zh-CN/docs/Web/API/Window/unload_event /zh-CN/docs/Web/Events/visibilitychange /zh-CN/docs/Web/API/Document/visibilitychange_event /zh-CN/docs/Web/Events/wheel /zh-CN/docs/Web/API/Element/wheel_event /zh-CN/docs/Web/Events/提交 /zh-CN/docs/Web/API/HTMLFormElement/submit_event /zh-CN/docs/Web/Events/滚轮事件 /zh-CN/docs/Web/API/Element/wheel_event -/zh-CN/docs/Web/Guide/API/DOM/Storage/Storage /zh-CN/docs/Web/Guide/API/DOM/Storage +/zh-CN/docs/Web/Events/进度条 /zh-CN/docs/Web/API/XMLHttpRequest/progress_event +/zh-CN/docs/Web/Guide/API/DOM /zh-CN/docs/conflicting/Web/API/Document_Object_Model_dd00a71ceceac547ab464128db6bd8ef +/zh-CN/docs/Web/Guide/API/DOM/Storage /zh-CN/docs/conflicting/Web/API/Web_Storage_API +/zh-CN/docs/Web/Guide/API/DOM/Storage/Storage /zh-CN/docs/conflicting/Web/API/Web_Storage_API +/zh-CN/docs/Web/Guide/API/DOM/The_structured_clone_algorithm /zh-CN/docs/Web/API/Web_Workers_API/Structured_clone_algorithm /zh-CN/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM /zh-CN/docs/Web/API/Document_Object_Model/Whitespace /zh-CN/docs/Web/Guide/CSS /zh-CN/docs/Learn/CSS -/zh-CN/docs/Web/Guide/CSS/Flexible_boxes /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +/zh-CN/docs/Web/Guide/CSS/CSS_Image_Sprites /zh-CN/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +/zh-CN/docs/Web/Guide/CSS/CSS基础 /zh-CN/docs/orphaned/Web/Guide/CSS/CSS基础 +/zh-CN/docs/Web/Guide/CSS/Consistent_list_indentation /zh-CN/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +/zh-CN/docs/Web/Guide/CSS/Counters /zh-CN/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/zh-CN/docs/Web/Guide/CSS/Flexible_boxes /zh-CN/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +/zh-CN/docs/Web/Guide/CSS/Getting_started /zh-CN/docs/conflicting/Learn/CSS/First_steps +/zh-CN/docs/Web/Guide/CSS/Getting_started/Boxes /zh-CN/docs/conflicting/Learn/CSS/Building_blocks +/zh-CN/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance +/zh-CN/docs/Web/Guide/CSS/Getting_started/Color /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units +/zh-CN/docs/Web/Guide/CSS/Getting_started/Content /zh-CN/docs/Learn/CSS/Howto/Generated_content +/zh-CN/docs/Web/Guide/CSS/Getting_started/How_CSS_works /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works +/zh-CN/docs/Web/Guide/CSS/Getting_started/JavaScript /zh-CN/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +/zh-CN/docs/Web/Guide/CSS/Getting_started/Layout /zh-CN/docs/conflicting/Learn/CSS/CSS_layout +/zh-CN/docs/Web/Guide/CSS/Getting_started/Lists /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/zh-CN/docs/Web/Guide/CSS/Getting_started/Media /zh-CN/docs/Web/Progressive_web_apps/Responsive/Media_types +/zh-CN/docs/Web/Guide/CSS/Getting_started/Readable_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_is_structured +/zh-CN/docs/Web/Guide/CSS/Getting_started/SVG_and_CSS /zh-CN/docs/Web/SVG/Tutorial/SVG_and_CSS +/zh-CN/docs/Web/Guide/CSS/Getting_started/Selectors /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Selectors +/zh-CN/docs/Web/Guide/CSS/Getting_started/Tables /zh-CN/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables +/zh-CN/docs/Web/Guide/CSS/Getting_started/Text_styles /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Fundamentals_5a3f2ce7cc4f23ec431e57a447af0711 +/zh-CN/docs/Web/Guide/CSS/Getting_started/What_is_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_b66915031fb62b5fee1201086144e209 +/zh-CN/docs/Web/Guide/CSS/Getting_started/Why_use_CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 /zh-CN/docs/Web/Guide/CSS/Getting_started/XML数据 /zh-CN/docs/Web/Guide/CSS/Getting_started/XML_data -/zh-CN/docs/Web/Guide/CSS/Getting_started/为何使用CSS /zh-CN/docs/Web/Guide/CSS/Getting_started/Why_use_CSS -/zh-CN/docs/Web/Guide/CSS/Getting_started/媒体 /zh-CN/docs/Web/Guide/CSS/Getting_started/Media -/zh-CN/docs/Web/Guide/CSS/Getting_started/布局 /zh-CN/docs/Web/Guide/CSS/Getting_started/Layout +/zh-CN/docs/Web/Guide/CSS/Getting_started/为何使用CSS /zh-CN/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 +/zh-CN/docs/Web/Guide/CSS/Getting_started/媒体 /zh-CN/docs/Web/Progressive_web_apps/Responsive/Media_types +/zh-CN/docs/Web/Guide/CSS/Getting_started/布局 /zh-CN/docs/conflicting/Learn/CSS/CSS_layout +/zh-CN/docs/Web/Guide/CSS/Media_queries /zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries +/zh-CN/docs/Web/Guide/CSS/Scaling_background_images /zh-CN/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +/zh-CN/docs/Web/Guide/CSS/Testing_media_queries /zh-CN/docs/Web/CSS/Media_Queries/Testing_media_queries +/zh-CN/docs/Web/Guide/CSS/Understanding_z_index /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index +/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Adding_z-index /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_and_float /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_1 /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2 /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3 /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context /zh-CN/docs/Web/Guide/CSS/Using_CSS_animations /zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations +/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients /zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients /zh-CN/docs/Web/Guide/CSS/Using_CSS_transforms /zh-CN/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms /zh-CN/docs/Web/Guide/CSS/Using_CSS_transitions /zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions -/zh-CN/docs/Web/Guide/CSS/Using_multiple_backgrounds /zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds -/zh-CN/docs/Web/Guide/CSS/媒体查询 /zh-CN/docs/Web/Guide/CSS/Media_queries -/zh-CN/docs/Web/Guide/DOM /zh-CN/docs/Web/Guide/API/DOM +/zh-CN/docs/Web/Guide/CSS/Using_multi-column_layouts /zh-CN/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts +/zh-CN/docs/Web/Guide/CSS/Using_multiple_backgrounds /zh-CN/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +/zh-CN/docs/Web/Guide/CSS/Using_the_:target_selector /zh-CN/docs/Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors +/zh-CN/docs/Web/Guide/CSS/Visual_formatting_model /zh-CN/docs/Web/CSS/Visual_formatting_model +/zh-CN/docs/Web/Guide/CSS/媒体查询 /zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries +/zh-CN/docs/Web/Guide/DOM /zh-CN/docs/conflicting/Web/API/Document_Object_Model_dd00a71ceceac547ab464128db6bd8ef /zh-CN/docs/Web/Guide/DOM/Whitespace_in_the_DOM /zh-CN/docs/Web/API/Document_Object_Model/Whitespace /zh-CN/docs/Web/Guide/Events/Touch_events /zh-CN/docs/Web/API/Touch_events /zh-CN/docs/Web/Guide/Events/事件回调 /zh-CN/docs/Web/Guide/Events/Event_handlers @@ -1833,44 +2252,74 @@ /zh-CN/docs/Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas /zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas /zh-CN/docs/Web/Guide/HTML/Canvas_tutorial/Transformations /zh-CN/docs/Web/API/Canvas_API/Tutorial/Transformations /zh-CN/docs/Web/Guide/HTML/Canvas_tutorial/Using_images /zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images -/zh-CN/docs/Web/Guide/HTML/Forms /zh-CN/docs/Learn/HTML/Forms -/zh-CN/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets /zh-CN/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets -/zh-CN/docs/Web/Guide/HTML/Forms/My_first_HTML_form /zh-CN/docs/Learn/HTML/Forms/Your_first_HTML_form -/zh-CN/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data /zh-CN/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data -/zh-CN/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript /zh-CN/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript -/zh-CN/docs/Web/Guide/HTML/Forms/表单入门 /zh-CN/docs/Learn/HTML/Forms/Your_first_HTML_form +/zh-CN/docs/Web/Guide/HTML/Content_Editable /zh-CN/docs/Web/Guide/HTML/Editable_content +/zh-CN/docs/Web/Guide/HTML/Content_Editable/Rich-Text_Editing_in_Mozilla /zh-CN/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla +/zh-CN/docs/Web/Guide/HTML/Email_links /zh-CN/docs/conflicting/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +/zh-CN/docs/Web/Guide/HTML/Forms /zh-CN/docs/Learn/Forms +/zh-CN/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets /zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls +/zh-CN/docs/Web/Guide/HTML/Forms/My_first_HTML_form /zh-CN/docs/Learn/Forms/Your_first_form +/zh-CN/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data /zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data +/zh-CN/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript /zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript +/zh-CN/docs/Web/Guide/HTML/Forms/表单入门 /zh-CN/docs/Learn/Forms/Your_first_form +/zh-CN/docs/Web/Guide/HTML/Forms_in_HTML /zh-CN/docs/orphaned/Learn/HTML/Forms/HTML5_updates +/zh-CN/docs/Web/Guide/HTML/HTML /zh-CN/docs/orphaned/Web/Guide/HTML/HTML +/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_Thematic_Classification /zh-CN/docs/conflicting/Web/Guide/HTML/HTML5 +/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list /zh-CN/docs/conflicting/Web/HTML/Element /zh-CN/docs/Web/Guide/HTML/Introduction /zh-CN/docs/learn/HTML/Introduction_to_HTML +/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document /zh-CN/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/zh-CN/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages /zh-CN/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages +/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video /zh-CN/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +/zh-CN/docs/Web/Guide/HTML/Using_data_attributes /zh-CN/docs/Learn/HTML/Howto/Use_data_attributes /zh-CN/docs/Web/Guide/Performance/Using_web_workers /zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers /zh-CN/docs/Web/Guide/Using_FormData_Objects /zh-CN/docs/Web/API/FormData/Using_FormData_Objects +/zh-CN/docs/Web/HTML/Attributes/自动完成属性 /zh-CN/docs/Web/HTML/Attributes/autocomplete +/zh-CN/docs/Web/HTML/CORS_settings_attributes /zh-CN/docs/Web/HTML/Attributes/crossorigin /zh-CN/docs/Web/HTML/Canvas /zh-CN/docs/Web/API/Canvas_API /zh-CN/docs/Web/HTML/Canvas/Canvas教程 /zh-CN/docs/Web/API/Canvas_API/Tutorial -/zh-CN/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas /zh-CN/docs/Web/API/Canvas_API/Drawing_graphics_with_canvas +/zh-CN/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas /zh-CN/docs/conflicting/Web/API/Canvas_API/Tutorial /zh-CN/docs/Web/HTML/Canvas/Tutorial /zh-CN/docs/Web/API/Canvas_API/Tutorial -/zh-CN/docs/Web/HTML/Content_Editable /zh-CN/docs/Web/Guide/HTML/Content_Editable +/zh-CN/docs/Web/HTML/Content_Editable /zh-CN/docs/Web/Guide/HTML/Editable_content /zh-CN/docs/Web/HTML/Controlling_spell_checking_in_HTML_forms /en-US/docs/Web/HTML/Global_attributes/spellcheck +/zh-CN/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video /zh-CN/docs/Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video +/zh-CN/docs/Web/HTML/Element/Input/月份 /zh-CN/docs/Web/HTML/Element/input/month +/zh-CN/docs/Web/HTML/Element/Input/范围 /zh-CN/docs/Web/HTML/Element/input/range /zh-CN/docs/Web/HTML/Element/Video/canplay_event /zh-CN/docs/Web/API/HTMLMediaElement/canplay_event /zh-CN/docs/Web/HTML/Element/Video/canplaythrough_event /zh-CN/docs/Web/API/HTMLMediaElement/canplaythrough_event /zh-CN/docs/Web/HTML/Element/Video/ended_event /zh-CN/docs/Web/API/HTMLMediaElement/ended_event /zh-CN/docs/Web/HTML/Element/Video/loadeddata_event /zh-CN/docs/Web/API/HTMLMediaElement/loadeddata_event +/zh-CN/docs/Web/HTML/Element/command /zh-CN/docs/orphaned/Web/HTML/Element/command +/zh-CN/docs/Web/HTML/Element/element /zh-CN/docs/orphaned/Web/HTML/Element/element /zh-CN/docs/Web/HTML/Element/video/play_event /zh-CN/docs/Web/API/HTMLMediaElement/play_event /zh-CN/docs/Web/HTML/Element/video/timeupdate_event /zh-CN/docs/Web/API/HTMLMediaElement/timeupdate_event /zh-CN/docs/Web/HTML/Element/视频 /zh-CN/docs/Web/HTML/Element/video /zh-CN/docs/Web/HTML/Element/选项 /zh-CN/docs/Web/HTML/Element/option -/zh-CN/docs/Web/HTML/Forms /zh-CN/docs/Learn/HTML/Forms -/zh-CN/docs/Web/HTML/Forms/How_to_build_custom_form_widgets /zh-CN/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets -/zh-CN/docs/Web/HTML/Forms/Sending_forms_through_JavaScript /zh-CN/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript -/zh-CN/docs/Web/HTML/Forms/表单入门 /zh-CN/docs/Learn/HTML/Forms/Your_first_HTML_form -/zh-CN/docs/Web/HTML/Forms_in_HTML /zh-CN/docs/Web/Guide/HTML/Forms_in_HTML +/zh-CN/docs/Web/HTML/Focus_management_in_HTML /zh-CN/docs/conflicting/Web/API/Document/hasFocus +/zh-CN/docs/Web/HTML/Forms /zh-CN/docs/Learn/Forms +/zh-CN/docs/Web/HTML/Forms/How_to_build_custom_form_widgets /zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls +/zh-CN/docs/Web/HTML/Forms/Sending_forms_through_JavaScript /zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript +/zh-CN/docs/Web/HTML/Forms/表单入门 /zh-CN/docs/Learn/Forms/Your_first_form +/zh-CN/docs/Web/HTML/Forms_in_HTML /zh-CN/docs/orphaned/Learn/HTML/Forms/HTML5_updates +/zh-CN/docs/Web/HTML/Global_attributes/dropzone /zh-CN/docs/orphaned/Web/HTML/Global_attributes/dropzone +/zh-CN/docs/Web/HTML/Global_attributes/x-ms-加速装置键 /zh-CN/docs/Web/HTML/Global_attributes/x-ms-acceleratorkey +/zh-CN/docs/Web/HTML/Global_attributes/x-ms-格式-检测 /zh-CN/docs/Web/HTML/Global_attributes/x-ms-format-detection /zh-CN/docs/Web/HTML/Global_attributes/摩缺 /zh-CN/docs/Web/HTML/Global_attributes/accesskey /zh-CN/docs/Web/HTML/Inline_elemente /zh-CN/docs/Web/HTML/Inline_elements /zh-CN/docs/Web/HTML/Introduction /zh-CN/docs/learn/HTML/Introduction_to_HTML +/zh-CN/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing /zh-CN/docs/Glossary/speculative_parsing +/zh-CN/docs/Web/HTML/Supported_media_formats /zh-CN/docs/conflicting/Web/Media/Formats /zh-CN/docs/Web/HTML/全局属性 /zh-CN/docs/Web/HTML/Global_attributes /zh-CN/docs/Web/HTML/内联元素 /zh-CN/docs/Web/HTML/Inline_elements -/zh-CN/docs/Web/HTML/动作 /zh-CN/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing -/zh-CN/docs/Web/HTML/媒体支持 /zh-CN/docs/Web/HTML/Supported_media_formats +/zh-CN/docs/Web/HTML/动作 /zh-CN/docs/Glossary/speculative_parsing +/zh-CN/docs/Web/HTML/媒体支持 /zh-CN/docs/conflicting/Web/Media/Formats /zh-CN/docs/Web/HTML/属性 /zh-CN/docs/Web/HTML/Attributes +/zh-CN/docs/Web/HTTP/Access_control_CORS /zh-CN/docs/Web/HTTP/CORS /zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types /zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types /zh-CN/docs/Web/HTTP/Basics_of_HTTP/选择_www_或非_www_URL_作为域名 /zh-CN/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs +/zh-CN/docs/Web/HTTP/CORS/Errors/CORS错误允许凭证 /zh-CN/docs/Web/HTTP/CORS/Errors/CORSMIssingAllowCredentials +/zh-CN/docs/Web/HTTP/Caching_FAQ /zh-CN/docs/Web/HTTP/Caching +/zh-CN/docs/Web/HTTP/Content_negotiation/Accept_默认值 /zh-CN/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values +/zh-CN/docs/Web/HTTP/HTTP_Strict_Transport_Security /zh-CN/docs/Web/HTTP/Headers/Strict-Transport-Security +/zh-CN/docs/Web/HTTP/HTTP_response_codes /zh-CN/docs/conflicting/Web/HTTP/Status /zh-CN/docs/Web/HTTP/HTTP请求方法 /zh-CN/docs/Web/HTTP/Methods /zh-CN/docs/Web/HTTP/HTTP请求方法/GET /zh-CN/docs/Web/HTTP/Methods/GET /zh-CN/docs/Web/HTTP/HTTP请求方法/POST /zh-CN/docs/Web/HTTP/Methods/POST @@ -1887,21 +2336,33 @@ /zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy__by_cnvoid/require-sri-for /zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/require-sri-for /zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy__by_cnvoid/sandbox /zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/sandbox /zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy__by_cnvoid/upgrade-insecure-requests /zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests +/zh-CN/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file /zh-CN/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file /zh-CN/docs/Web/HTTP/Response_codes /zh-CN/docs/Web/HTTP/Status /zh-CN/docs/Web/HTTP/Response_codes/100 /zh-CN/docs/Web/HTTP/Status/100 /zh-CN/docs/Web/HTTP/Response_codes/204 /zh-CN/docs/Web/HTTP/Status/204 /zh-CN/docs/Web/HTTP/Response_codes/501 /zh-CN/docs/Web/HTTP/Status/501 +/zh-CN/docs/Web/HTTP/Server-Side_Access_Control /zh-CN/docs/conflicting/Web/HTTP/CORS +/zh-CN/docs/Web/HTTP/X-Frame-Options /zh-CN/docs/Web/HTTP/Headers/X-Frame-Options +/zh-CN/docs/Web/HTTP/data_URIs /zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs /zh-CN/docs/Web/HTTP/消息 /zh-CN/docs/Web/HTTP/Messages -/zh-CN/docs/Web/HTTP/缓存_FAQ /zh-CN/docs/Web/HTTP/Caching_FAQ +/zh-CN/docs/Web/HTTP/策略特征 /zh-CN/docs/Web/HTTP/Feature_Policy +/zh-CN/docs/Web/HTTP/策略特征/Using_Feature_Policy /zh-CN/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy +/zh-CN/docs/Web/HTTP/缓存_FAQ /zh-CN/docs/Web/HTTP/Caching +/zh-CN/docs/Web/HTTP/跨域资源共享(CORS)_ /zh-CN/docs/orphaned/Web/HTTP/跨域资源共享(CORS)_ /zh-CN/docs/Web/HTTP/重定向 /zh-CN/docs/Web/HTTP/Redirections /zh-CN/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla /zh-CN/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla /zh-CN/docs/Web/JavaScript/Equality_comparisons_and_when_to_use_them /zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness +/zh-CN/docs/Web/JavaScript/Getting_Started /zh-CN/docs/conflicting/Learn/Getting_started_with_the_web/JavaScript_basics +/zh-CN/docs/Web/JavaScript/Guide/About /zh-CN/docs/conflicting/Web/JavaScript/Guide/Introduction /zh-CN/docs/Web/JavaScript/Guide/Closures /zh-CN/docs/Web/JavaScript/Closures /zh-CN/docs/Web/JavaScript/Guide/Equality_comparisons_and_when_to_use_them /zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness /zh-CN/docs/Web/JavaScript/Guide/EventLoop /zh-CN/docs/Web/JavaScript/EventLoop /zh-CN/docs/Web/JavaScript/Guide/Inheritance_Revisited /zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /zh-CN/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain /zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain +/zh-CN/docs/Web/JavaScript/Guide/JavaScript_Overview /zh-CN/docs/conflicting/Web/JavaScript/Guide/Introduction_6f341ba6db4b060ccbd8dce4a0d5214b /zh-CN/docs/Web/JavaScript/Guide/Predefined_Core_Objects /zh-CN/docs/Web/JavaScript/Guide +/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions/Boundaries /zh-CN/docs/conflicting/Web/JavaScript/Guide/Regular_Expressions/Assertions +/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions/量词 /zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers /zh-CN/docs/Web/JavaScript/Guide/Sameness /zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness /zh-CN/docs/Web/JavaScript/Guide/Statements /zh-CN/docs/Web/JavaScript/Guide/Control_flow_and_error_handling /zh-CN/docs/Web/JavaScript/Guide/The_Iterator_protocol /zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols @@ -1909,6 +2370,8 @@ /zh-CN/docs/Web/JavaScript/Guide/iterable /zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols /zh-CN/docs/Web/JavaScript/Guide/介绍 /zh-CN/docs/Web/JavaScript/Guide/Introduction /zh-CN/docs/Web/JavaScript/Guide/可迭代对象 /zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols +/zh-CN/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript /zh-CN/docs/conflicting/Learn/JavaScript/Objects +/zh-CN/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript /zh-CN/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript /zh-CN/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_7_support_in_Mozilla /zh-CN/docs/Web/JavaScript/ECMAScript_7_support_in_Mozilla /zh-CN/docs/Web/JavaScript/Reference/Array /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array /zh-CN/docs/Web/JavaScript/Reference/Array/Reduce /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce @@ -1922,14 +2385,15 @@ /zh-CN/docs/Web/JavaScript/Reference/Array/length /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/length /zh-CN/docs/Web/JavaScript/Reference/Array/map /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map /zh-CN/docs/Web/JavaScript/Reference/Array/pop /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/zh-CN/docs/Web/JavaScript/Reference/Array/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype +/zh-CN/docs/Web/JavaScript/Reference/Array/prototype /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/Web/JavaScript/Reference/Array/shift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift /zh-CN/docs/Web/JavaScript/Reference/Array/slice /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice /zh-CN/docs/Web/JavaScript/Reference/Array/some /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some /zh-CN/docs/Web/JavaScript/Reference/Array/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toSource /zh-CN/docs/Web/JavaScript/Reference/Array/unshift /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift /zh-CN/docs/Web/JavaScript/Reference/Boolean /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean -/zh-CN/docs/Web/JavaScript/Reference/Boolean/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype +/zh-CN/docs/Web/JavaScript/Reference/Boolean/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean +/zh-CN/docs/Web/JavaScript/Reference/Classes/Class_elements /zh-CN/docs/Web/JavaScript/Reference/Classes/Public_class_fields /zh-CN/docs/Web/JavaScript/Reference/Comments /zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#Comments /zh-CN/docs/Web/JavaScript/Reference/Date /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date /zh-CN/docs/Web/JavaScript/Reference/Date/getDate /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate @@ -1945,6 +2409,7 @@ /zh-CN/docs/Web/JavaScript/Reference/Date/setTime /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/setTime /zh-CN/docs/Web/JavaScript/Reference/Date/toJSON /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/toJSON /zh-CN/docs/Web/JavaScript/Reference/Date/valueOf /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/valueOf +/zh-CN/docs/Web/JavaScript/Reference/Errors/不能添加属性 /zh-CN/docs/Web/JavaScript/Reference/Errors/Cant_assign_to_property /zh-CN/docs/Web/JavaScript/Reference/Function /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function /zh-CN/docs/Web/JavaScript/Reference/Function/apply /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply /zh-CN/docs/Web/JavaScript/Reference/Function/arity /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/arity @@ -1954,7 +2419,7 @@ /zh-CN/docs/Web/JavaScript/Reference/Function/isGenerator /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/isGenerator /zh-CN/docs/Web/JavaScript/Reference/Function/length /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/length /zh-CN/docs/Web/JavaScript/Reference/Function/name /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/name -/zh-CN/docs/Web/JavaScript/Reference/Function/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype +/zh-CN/docs/Web/JavaScript/Reference/Function/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function /zh-CN/docs/Web/JavaScript/Reference/Function/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/toSource /zh-CN/docs/Web/JavaScript/Reference/Function/toString /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/toString /zh-CN/docs/Web/JavaScript/Reference/Functions_and_function_scope /zh-CN/docs/Web/JavaScript/Reference/Functions @@ -1970,14 +2435,29 @@ /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flatten /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/index /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/of /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/input /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce()用法 /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBufferView /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/AsyncIterator /zh-CN/docs/orphaned/Web/JavaScript/Reference/Global_Objects/AsyncIterator +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Collator /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DataView/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/DataView +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Date /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DisplayNames /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Error +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/EvalError +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ListFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Locale /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Map +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/反双曲余弦值 /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/acosh +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/format /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create/About_JavaScript /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/seal @@ -2002,28 +2482,75 @@ /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/lookupGetter /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__ /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions/About_this_Reference /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions/Global_Objects /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/PluralRules /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Promise +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/construct /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/construct +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/defineProperty /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/deleteProperty /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/deleteProperty +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/get /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/getPrototypeOf /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getPrototypeOf +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/has /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/has +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/isExtensible /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/isExtensible +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/ownKeys /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/preventExtensions /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/preventExtensions +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/setPrototypeOf /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/setPrototypeOf +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/RangeError +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/ReferenceError +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/比较_Reflect_和_Object_方法 /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/TrimLeft /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/TrimRight /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/contains /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/includes +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Symbol +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/TypeError +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/TypedArray +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/URIError/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/URIError +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/生成器函数 /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction -/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/生成器函数/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype +/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/生成器函数/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction /zh-CN/docs/Web/JavaScript/Reference/Map /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map /zh-CN/docs/Web/JavaScript/Reference/Methods_Index /zh-CN/docs/Web/JavaScript/Reference +/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators /zh-CN/docs/conflicting/Web/JavaScript/Reference/Operators +/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators /zh-CN/docs/conflicting/Web/JavaScript/Reference/Operators_8d54701de06af40a7c984517cbe87b3e +/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators /zh-CN/docs/conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 +/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators /zh-CN/docs/conflicting/Web/JavaScript/Reference/Operators_310dc67549939233c3d18a8fa2cdbb23 +/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_Operators /zh-CN/docs/conflicting/Web/JavaScript/Reference/Operators_f71733c8e7001a29c3ec40d8522a4aca /zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator /en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax +/zh-CN/docs/Web/JavaScript/Reference/Operators/async允许声明一个函数为一个包含异步操作的函数 /zh-CN/docs/Web/JavaScript/Reference/Operators/async_function +/zh-CN/docs/Web/JavaScript/Reference/Operators/取余 /zh-CN/docs/Web/JavaScript/Reference/Operators/Remainder +/zh-CN/docs/Web/JavaScript/Reference/Operators/可选链 /zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining /zh-CN/docs/Web/JavaScript/Reference/Operators/大于或等于 /zh-CN/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal +/zh-CN/docs/Web/JavaScript/Reference/Operators/按位与 /zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_AND +/zh-CN/docs/Web/JavaScript/Reference/Operators/相加 /zh-CN/docs/Web/JavaScript/Reference/Operators/Addition +/zh-CN/docs/Web/JavaScript/Reference/Operators/相等 /zh-CN/docs/Web/JavaScript/Reference/Operators/Equality +/zh-CN/docs/Web/JavaScript/Reference/Operators/管道操作符 /zh-CN/docs/Web/JavaScript/Reference/Operators/Pipeline_operator /zh-CN/docs/Web/JavaScript/Reference/Operators/类 /zh-CN/docs/Web/JavaScript/Reference/Operators/class +/zh-CN/docs/Web/JavaScript/Reference/Operators/自减 /zh-CN/docs/Web/JavaScript/Reference/Operators/Decrement +/zh-CN/docs/Web/JavaScript/Reference/Operators/逻辑和 /zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_AND /zh-CN/docs/Web/JavaScript/Reference/Properties_Index /zh-CN/docs/Web/JavaScript/Reference /zh-CN/docs/Web/JavaScript/Reference/RegExp /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/Web/JavaScript/Reference/RegExp/exec /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec /zh-CN/docs/Web/JavaScript/Reference/RegExp/lastIndex /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex -/zh-CN/docs/Web/JavaScript/Reference/RegExp/prototype /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype +/zh-CN/docs/Web/JavaScript/Reference/RegExp/prototype /zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/RegExp /zh-CN/docs/Web/JavaScript/Reference/RegExp/toSource /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toSource +/zh-CN/docs/Web/JavaScript/Reference/Reserved_words /zh-CN/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar /zh-CN/docs/Web/JavaScript/Reference/Spread_operator /en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax +/zh-CN/docs/Web/JavaScript/Reference/Statements/default /zh-CN/docs/conflicting/Web/JavaScript/Reference/Statements/switch /zh-CN/docs/Web/JavaScript/Reference/String /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String /zh-CN/docs/Web/JavaScript/Reference/String/Trim /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/Trim -/zh-CN/docs/Web/JavaScript/Reference/String/TrimLeft /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/TrimLeft -/zh-CN/docs/Web/JavaScript/Reference/String/TrimRight /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/TrimRight +/zh-CN/docs/Web/JavaScript/Reference/String/TrimLeft /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart +/zh-CN/docs/Web/JavaScript/Reference/String/TrimRight /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd /zh-CN/docs/Web/JavaScript/Reference/String/concat /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/concat /zh-CN/docs/Web/JavaScript/Reference/String/contains /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/includes /zh-CN/docs/Web/JavaScript/Reference/String/endsWith /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith @@ -2042,33 +2569,72 @@ /zh-CN/docs/Web/JavaScript/Reference/default_parameters /zh-CN/docs/Web/JavaScript/Reference/Functions/default_parameters /zh-CN/docs/Web/JavaScript/Reference/eval /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval /zh-CN/docs/Web/JavaScript/Reference/rest_parameters /zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters +/zh-CN/docs/Web/JavaScript/Reference/template_strings /zh-CN/docs/Web/JavaScript/Reference/Template_literals /zh-CN/docs/Web/JavaScript/Reference/关于 /zh-CN/docs/Web/JavaScript/Reference/About /zh-CN/docs/Web/JavaScript/Same_origin_policy_for_JavaScript /zh-CN/docs/Web/Security/Same-origin_policy /zh-CN/docs/Web/JavaScript/Strict_mode /zh-CN/docs/Web/JavaScript/Reference/Strict_mode /zh-CN/docs/Web/JavaScript/Strict_mode/Transitioning_to_strict_mode /zh-CN/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode +/zh-CN/docs/Web/JavaScript/The_performance_hazards_of__[[Prototype]]_mutation /zh-CN/docs/Web/JavaScript/The_performance_hazards_of_prototype_mutation +/zh-CN/docs/Web/JavaScript/javascript(起步) /zh-CN/docs/orphaned/Web/JavaScript/javascript(起步) /zh-CN/docs/Web/JavaScript/重新认识js /zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript +/zh-CN/docs/Web/Localization /zh-CN/docs/orphaned/Web/Localization +/zh-CN/docs/Web/Media/Formats/视频编解码器 /zh-CN/docs/Web/Media/Formats/Video_codecs +/zh-CN/docs/Web/Performance/浏览器渲染页面的工作原理 /zh-CN/docs/Web/Performance/How_browsers_work +/zh-CN/docs/Web/Progressive_web_apps/Network_independent /zh-CN/docs/conflicting/Web/Progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f +/zh-CN/docs/Web/Progressive_web_apps/Re-engageable /zh-CN/docs/conflicting/Web/Progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67 +/zh-CN/docs/Web/Progressive_web_apps/Responsive /zh-CN/docs/conflicting/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks +/zh-CN/docs/Web/Progressive_web_apps/优势 /zh-CN/docs/conflicting/Web/Progressive_web_apps/Introduction +/zh-CN/docs/Web/Progressive_web_apps/加载 /zh-CN/docs/Web/Progressive_web_apps/Loading +/zh-CN/docs/Web/Progressive_web_apps/添加到主屏幕 /zh-CN/docs/Web/Progressive_web_apps/Add_to_home_screen +/zh-CN/docs/Web/SVG/Attribute/文本锚点 /zh-CN/docs/Web/SVG/Attribute/text-anchor +/zh-CN/docs/Web/SVG/Attribute/样式 /zh-CN/docs/Web/SVG/Attribute/Styling /zh-CN/docs/Web/SVG/Element/圆 /zh-CN/docs/Web/SVG/Element/circle /zh-CN/docs/Web/SVG/Element/多边形 /zh-CN/docs/Web/SVG/Element/polygon /zh-CN/docs/Web/SVG/Element/线性渐变 /zh-CN/docs/Web/SVG/Element/linearGradient /zh-CN/docs/Web/SVG/Firefox对SVG_1.1的支持 /zh-CN/docs/Web/SVG/SVG_1.1_Support_in_Firefox /zh-CN/docs/Web/SVG/Tutorial/渐变 /zh-CN/docs/Web/SVG/Tutorial/Gradients +/zh-CN/docs/Web/Security/CSP /zh-CN/docs/conflicting/Web/HTTP/CSP +/zh-CN/docs/Web/Security/CSP/Introducing_Content_Security_Policy /zh-CN/docs/conflicting/Web/HTTP/CSP_aeae68a149c6fbe64e541cbdcd6ed5c5 +/zh-CN/docs/Web/Security/CSP/Using_CSP_violation_reports /zh-CN/docs/conflicting/Web/HTTP/CSP_9583294484b49ac391995b392c2b1ae1 /zh-CN/docs/Web/Security/CSP/Using_Content_Security_Policy /zh-CN/docs/Web/HTTP/CSP +/zh-CN/docs/Web/Security/Information_Security_Basics /zh-CN/docs/orphaned/Web/Security/Information_Security_Basics +/zh-CN/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types /zh-CN/docs/Learn/Server-side/Configuring_server_MIME_types +/zh-CN/docs/Web/Security/传输层安全协议 /zh-CN/docs/Web/Security/Transport_Layer_Security +/zh-CN/docs/Web/Security/子资源完整性 /zh-CN/docs/Web/Security/Subresource_Integrity /zh-CN/docs/Web/WEB_API_---js /zh-CN/docs/Web/API /zh-CN/docs/Web/WebGL /zh-CN/docs/Web/API/WebGL_API /zh-CN/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context /zh-CN/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context /zh-CN/docs/Web/WebGL/Getting_started_with_WebGL /zh-CN/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL /zh-CN/docs/Web/WebGL/用WebGL来画2D图形 /zh-CN/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context /zh-CN/docs/Web/Web_Components/Custom_Elements /zh-CN/docs/Web/Web_Components/Using_custom_elements +/zh-CN/docs/Web/Web_Components/HTML导入 /zh-CN/docs/Web/Web_Components/HTML_Imports +/zh-CN/docs/Web/Web_Components/Status_in_Firefox /zh-CN/docs/orphaned/Web/Web_Components/Status_in_Firefox +/zh-CN/docs/Web/Web_Components/影子_DOM /zh-CN/docs/conflicting/Web/Web_Components/Using_shadow_DOM +/zh-CN/docs/Web/XSLT/Elements /zh-CN/docs/Web/XSLT/Element +/zh-CN/docs/Web/媒体 /zh-CN/docs/Web/Media +/zh-CN/docs/Web/媒体/Autoplay_guide /zh-CN/docs/Web/Media/Autoplay_guide /zh-CN/docs/Web/性能 /zh-CN/docs/Web/Performance -/zh-CN/docs/WebAPI/Using_geolocation /zh-CN/docs/Web/API/Geolocation/Using_geolocation +/zh-CN/docs/Web/演示说明 /zh-CN/docs/Web/Demos_of_open_web_technologies +/zh-CN/docs/WebAPI /zh-CN/docs/conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3 +/zh-CN/docs/WebAPI/Using_geolocation /zh-CN/docs/Web/API/Geolocation_API /zh-CN/docs/WebAssembly/概念 /zh-CN/docs/WebAssembly/Concepts /zh-CN/docs/WebGL /zh-CN/docs/Web/API/WebGL_API /zh-CN/docs/WebGL/Getting_started_with_WebGL /zh-CN/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL /zh-CN/docs/WebGL/开始使用WebGL /zh-CN/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +/zh-CN/docs/WebGuide/API/File_System /zh-CN/docs/conflicting/Web/API/File_and_Directory_Entries_API/Introduction +/zh-CN/docs/WebGuide/API/File_System/Introduction /zh-CN/docs/Web/API/File_and_Directory_Entries_API/Introduction +/zh-CN/docs/WebRTC /zh-CN/docs/conflicting/Web/API/WebRTC_API_d8621144cbc61520339c3b10c61731f0 /zh-CN/docs/WebRTC/navigator.getUserMedia /zh-CN/docs/Web/API/Navigator/getUserMedia -/zh-CN/docs/Web_Development/Mobile/自适应_设计 /zh-CN/docs/Web_Development/Mobile/responsive_design -/zh-CN/docs/Web_Development/Web开发介绍 /zh-CN/docs/Web_Development/Introduction_to_Web_development -/zh-CN/docs/XMLSerializer-840092-dup /zh-CN/docs/XMLSerializer +/zh-CN/docs/WebRTC/介绍 /zh-CN/docs/Web/API/WebRTC_API/Session_lifetime +/zh-CN/docs/Web_Development /zh-CN/docs/conflicting/Web/Guide +/zh-CN/docs/Web_Development/Introduction_to_Web_development /zh-CN/docs/Web/Guide/Introduction_to_Web_development +/zh-CN/docs/Web_Development/Mobile /zh-CN/docs/conflicting/Web/Guide/Mobile +/zh-CN/docs/Web_Development/Mobile/responsive_design /zh-CN/docs/conflicting/Web/Progressive_web_apps +/zh-CN/docs/Web_Development/Mobile/自适应_设计 /zh-CN/docs/conflicting/Web/Progressive_web_apps +/zh-CN/docs/Web_Development/Web开发介绍 /zh-CN/docs/Web/Guide/Introduction_to_Web_development +/zh-CN/docs/XHTML /zh-CN/docs/Glossary/XHTML +/zh-CN/docs/XMLSerializer /zh-CN/docs/Web/API/XMLSerializer +/zh-CN/docs/XMLSerializer-840092-dup /zh-CN/docs/Web/API/XMLSerializer /zh-CN/docs/XML_Introduction /zh-CN/docs/Web/XML/XML_Introduction /zh-CN/docs/XML_in_Mozilla /zh-CN/docs/Mozilla中的XML /zh-CN/docs/XML_介绍 /zh-CN/docs/Web/XML/XML_Introduction @@ -2076,22 +2642,41 @@ /zh-CN/docs/XPath/Axes /zh-CN/docs/Web/XPath/Axes /zh-CN/docs/XPath:Axes /zh-CN/docs/Web/XPath/Axes /zh-CN/docs/XSLT /zh-CN/docs/Web/XSLT -/zh-CN/docs/XSLT/Elements /zh-CN/docs/Web/XSLT/Elements -/zh-CN/docs/XSLT:Elements /zh-CN/docs/Web/XSLT/Elements +/zh-CN/docs/XSLT/Elements /zh-CN/docs/Web/XSLT/Element +/zh-CN/docs/XSLT:Elements /zh-CN/docs/Web/XSLT/Element /zh-CN/docs/XTech_2005_Presentations/Mozilla_RDF_引擎指导 /zh-CN/docs/XTech_2005_Presentations/Directions_of_the_Mozilla_RDF_engine /zh-CN/docs/XTech_2005_Presentations:Mozilla_RDF_引擎指导 /zh-CN/docs/XTech_2005_Presentations/Directions_of_the_Mozilla_RDF_engine /zh-CN/docs/XTech_2005_Presentations:XUL_-_Mozilla's_XML_User_Interface_Language /zh-CN/docs/XTech_2005_Presentations/XUL_-_Mozilla's_XML_User_Interface_Language /zh-CN/docs/chrome_window_icons /zh-CN/docs/Window_icons /zh-CN/docs/d_temp /zh-CN/docs/Web/API/Document -/zh-CN/docs/data_URIs /zh-CN/docs/Web/HTTP/data_URIs +/zh-CN/docs/data_URIs /zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs /zh-CN/docs/en /en-US/ /zh-CN/docs/keypress /zh-CN/docs/Web/API/Document/keypress_event +/zh-CN/docs/learn/Accessibility/CSS和JavaScript /zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript +/zh-CN/docs/learn/Accessibility/HTML:为可访问性提供一个良好的基础 /zh-CN/docs/Learn/Accessibility/HTML /zh-CN/docs/learn/Accessibility/什么是可访问性 /zh-CN/docs/Learn/Accessibility/What_is_accessibility +/zh-CN/docs/learn/Accessibility/多媒体 /zh-CN/docs/Learn/Accessibility/Multimedia /zh-CN/docs/learn/GitHub /zh-CN/docs/Learn/Tools_and_testing/GitHub +/zh-CN/docs/learn/HTML/Forms_and_buttons /zh-CN/docs/orphaned/Learn/HTML/Forms_and_buttons /zh-CN/docs/learn/HTML/Introduction_to_HTML/创建超链接 /zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +/zh-CN/docs/learn/HTML/Introduction_to_HTML/文件和网站结构 /zh-CN/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure +/zh-CN/docs/learn/How_the_Internet_works /zh-CN/docs/Learn/Common_questions/How_does_the_Internet_work +/zh-CN/docs/learn/How_to_contribute /zh-CN/docs/orphaned/Learn/How_to_contribute /zh-CN/docs/learn/JavaScript/Building_blocks/事件 /zh-CN/docs/Learn/JavaScript/Building_blocks/Events +/zh-CN/docs/learn/JavaScript/Building_blocks/相片走廊 /zh-CN/docs/Learn/JavaScript/Building_blocks/Image_gallery +/zh-CN/docs/learn/JavaScript/异步 /zh-CN/docs/Learn/JavaScript/Asynchronous +/zh-CN/docs/learn/JavaScript/异步/Async_await /zh-CN/docs/Learn/JavaScript/Asynchronous/Async_await +/zh-CN/docs/learn/JavaScript/异步/Choosing_the_right_approach /zh-CN/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach +/zh-CN/docs/learn/JavaScript/异步/Promises语法 /zh-CN/docs/Learn/JavaScript/Asynchronous/Promises +/zh-CN/docs/learn/JavaScript/异步/概念 /zh-CN/docs/Learn/JavaScript/Asynchronous/Concepts +/zh-CN/docs/learn/JavaScript/异步/简介 /zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing +/zh-CN/docs/learn/JavaScript/异步/超时和间隔 /zh-CN/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals /zh-CN/docs/learn/Performance/CSS_performance /zh-CN/docs/Learn/Performance/CSS /zh-CN/docs/learn/Performance/dns-prefetch /zh-CN/docs/Web/Performance/dns-prefetch +/zh-CN/docs/learn/Performance/感知性能 /zh-CN/docs/Learn/Performance/perceived_performance +/zh-CN/docs/learn/Server-side/Django/主页构建 /zh-CN/docs/Learn/Server-side/Django/Home_page +/zh-CN/docs/learn/Server-side/Django/开发环境 /zh-CN/docs/Learn/Server-side/Django/development_environment +/zh-CN/docs/learn/Server-side/Django/管理站点 /zh-CN/docs/Learn/Server-side/Django/Admin_site /zh-CN/docs/learn/WebGL/By_example /zh-CN/docs/Web/API/WebGL_API/By_example /zh-CN/docs/learn/WebGL/By_example/Basic_scissoring /zh-CN/docs/Web/API/WebGL_API/By_example/Basic_scissoring /zh-CN/docs/learn/WebGL/By_example/Boilerplate_1 /zh-CN/docs/Web/API/WebGL_API/By_example/Boilerplate_1 @@ -2102,6 +2687,7 @@ /zh-CN/docs/learn/WebGL/By_example/Hello_GLSL /zh-CN/docs/Web/API/WebGL_API/By_example/Hello_GLSL /zh-CN/docs/learn/WebGL/By_example/Scissor_animation /zh-CN/docs/Web/API/WebGL_API/By_example/Scissor_animation /zh-CN/docs/learn/WebGL/By_example/Simple_color_animation /zh-CN/docs/Web/API/WebGL_API/By_example/Simple_color_animation +/zh-CN/docs/learn/Web_Mechanics /zh-CN/docs/conflicting/Learn/Common_questions /zh-CN/docs/learn/常见问题 /zh-CN/docs/Learn/Common_questions /zh-CN/docs/learn/常见问题/Thinking_before_coding /zh-CN/docs/Learn/Common_questions/Thinking_before_coding /zh-CN/docs/learn/常见问题/What_are_hyperlinks /zh-CN/docs/Learn/Common_questions/What_are_hyperlinks @@ -2110,8 +2696,9 @@ /zh-CN/docs/learn/常见问题/What_is_a_web_server /zh-CN/docs/Learn/Common_questions/What_is_a_web_server /zh-CN/docs/learn/常见问题/What_is_accessibility /zh-CN/docs/Learn/Common_questions/What_is_accessibility /zh-CN/docs/learn/常见问题/网页，网站，网页服务器和搜索引擎的区别是什么？ /zh-CN/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines -/zh-CN/docs/learn/探索浏览器开发者工具 /zh-CN/docs/Learn/Discover_browser_developer_tools -/zh-CN/docs/为Firefox_3升级扩展 /zh-CN/docs/Updating_extensions_for_Firefox_3 +/zh-CN/docs/learn/探索浏览器开发者工具 /zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools +/zh-CN/docs/为Firefox_3升级扩展 /zh-CN/docs/Mozilla/Firefox/Releases/3/Updating_extensions +/zh-CN/docs/使用Javascript和DOM_Interfaces来处理HTML /zh-CN/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces /zh-CN/docs/使用剪贴板 /zh-CN/docs/Using_the_Clipboard /zh-CN/docs/升级扩展支持多种Mozilla应用程序 /zh-CN/docs/Updating_an_extension_to_support_multiple_Mozilla_applications /zh-CN/docs/在Venkman中使用断点 /zh-CN/docs/Using_Breakpoints_in_Venkman @@ -2121,7 +2708,7 @@ /zh-CN/docs/怪异模式和标准模式 /zh-CN/docs/Web/HTML/Quirks_Mode_and_Standards_Mode /zh-CN/docs/扩展打包 /zh-CN/docs/Mozilla/add-ons/Extension_Packaging /zh-CN/docs/收集_In-Memory_数据源 /zh-CN/docs/Aggregating_the_In-Memory_Datasource -/zh-CN/docs/理解下划线 /zh-CN/docs/Understanding_Underlines +/zh-CN/docs/理解下划线 /zh-CN/docs/conflicting/Learn/CSS/Styling_text/Fundamentals /zh-CN/docs/网页代码移植：从_IE_到_Mozilla /zh-CN/docs/Migrate_apps_from_Internet_Explorer_to_Mozilla /zh-CN/docs/通过CVS获取源码 /zh-CN/docs/Mozilla/Developer_guide/Source_Code/CVS /zh-CN/docs/首页 /zh-CN/docs/Web diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 54cedab2da..640813454b 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -1,70 +1,4 @@ { - "API/Pointer_Lock_API": { - "modified": "2020-07-02T02:40:37.086Z", - "contributors": [ - "brizer", - "fscholz", - "princetoad@gmail.com" - ] - }, - "CSS/float": { - "modified": "2020-11-29T04:21:18.185Z", - "contributors": [ - "Nyaasu", - "RainSlide", - "Murphy1024", - "Jack.Works", - "zhuangyin", - "tcatche", - "Ende93", - "xgqfrms-GitHub", - "Sarlaka", - "fscholz", - "Sebastianz", - "xiaodongzai", - "AlexChao", - "linmx0130", - "FredWe", - "teoli", - "ziyunfei" - ] - }, - "Chrome": { - "modified": "2019-03-23T23:52:52.388Z", - "contributors": [ - "ziyunfei", - "Jedichou", - "Freeopen" - ] - }, - "Controlling_DNS_prefetching": { - "modified": "2020-10-15T21:21:12.955Z", - "contributors": [ - "RainSlide", - "lsvih", - "zhuangyin", - "yyhaxx", - "RequireSun", - "yowangbin", - "markyun", - "Ende93", - "hucz08" - ] - }, - "DHTML": { - "modified": "2019-03-23T23:46:38.426Z", - "contributors": [ - "ziyunfei", - "Wind930" - ] - }, - "Example_2_-_Using_UL": { - "modified": "2019-03-18T20:44:28.267Z", - "contributors": [ - "RainSlide", - "blue0125" - ] - }, "Games": { "modified": "2019-09-21T02:47:40.270Z", "contributors": [ @@ -112,13 +46,6 @@ "noiron" ] }, - "Games/Introduction_to_HTML5_Game_Gevelopment_(summary)": { - "modified": "2019-01-17T01:15:39.320Z", - "contributors": [ - "wbamberg", - "xgqfrms-GitHub" - ] - }, "Games/Publishing_games": { "modified": "2019-01-17T00:50:49.182Z", "contributors": [ @@ -140,15 +67,6 @@ "chengweigao" ] }, - "Games/Publishing_games/游戏货币化": { - "modified": "2019-07-23T05:31:53.344Z", - "contributors": [ - "c03311", - "wbamberg", - "tannineo", - "chenXiaoZhui" - ] - }, "Games/Techniques": { "modified": "2020-01-16T08:22:10.237Z", "contributors": [ @@ -224,12 +142,6 @@ "wbamberg" ] }, - "Games/Techniques/Control_mechanisms/移动端触摸控制": { - "modified": "2019-03-18T21:13:06.265Z", - "contributors": [ - "fisho" - ] - }, "Games/Techniques/Controls_Gamepad_API": { "modified": "2019-03-18T21:38:23.713Z", "contributors": [ @@ -244,13 +156,6 @@ "dkocho4" ] }, - "Games/Tools/引擎和工具": { - "modified": "2019-03-23T22:12:27.616Z", - "contributors": [ - "wbamberg", - "ChenXiCC" - ] - }, "Games/Tutorials": { "modified": "2019-03-23T22:18:56.983Z", "contributors": [ @@ -342,18 +247,6 @@ "DHecarim" ] }, - "Games/Tutorials/2D_Breakout_game_pure_JavaScript/收尾工作": { - "modified": "2020-03-04T06:46:31.914Z", - "contributors": [ - "zmx0142857" - ] - }, - "Games/Tutorials/2D_Breakout_game_pure_JavaScript/鼠标控制": { - "modified": "2020-03-04T06:03:22.539Z", - "contributors": [ - "zmx0142857" - ] - }, "Games/Tutorials/2D_breakout_game_Phaser": { "modified": "2019-03-23T22:13:33.607Z", "contributors": [ @@ -484,21 +377,6 @@ "Javen" ] }, - "Games/简介": { - "modified": "2019-12-05T00:08:12.532Z", - "contributors": [ - "catcatching", - "wbamberg", - "codeofjackie", - "zsxeee", - "varcat", - "WMin", - "hansonfang", - "13310", - "magiclyde", - "fierayan" - ] - }, "Glossary": { "modified": "2020-10-07T11:15:25.314Z", "contributors": [ @@ -930,12 +808,6 @@ "HardcorePhysician" ] }, - "Glossary/DTD": { - "modified": "2019-03-23T22:20:01.642Z", - "contributors": [ - "eforegist" - ] - }, "Glossary/Data_structure": { "modified": "2019-03-18T21:30:43.505Z", "contributors": [ @@ -1328,14 +1200,6 @@ "Chor" ] }, - "Glossary/Header": { - "modified": "2020-02-12T09:54:25.924Z", - "contributors": [ - "RainSlide", - "zhangchen", - "WayneCui" - ] - }, "Glossary/Hoisting": { "modified": "2020-11-12T05:34:45.112Z", "contributors": [ @@ -1397,12 +1261,6 @@ "plusmultiply0" ] }, - "Glossary/IP地址": { - "modified": "2020-05-30T02:17:49.722Z", - "contributors": [ - "kagurakana" - ] - }, "Glossary/IRC": { "modified": "2020-01-22T01:15:44.275Z", "contributors": [ @@ -1857,13 +1715,6 @@ "greatofdream" ] }, - "Glossary/Serialize": { - "modified": "2019-03-23T22:07:45.475Z", - "contributors": [ - "Ende93", - "JohnZengshi" - ] - }, "Glossary/Server": { "modified": "2019-03-18T20:48:05.867Z", "contributors": [ @@ -2267,245 +2118,6 @@ "liguorain" ] }, - "Glossary/主轴": { - "modified": "2020-05-10T10:26:14.352Z", - "contributors": [ - "Isildur46" - ] - }, - "Glossary/交叉轴": { - "modified": "2020-06-09T04:50:28.922Z", - "contributors": [ - "lmx-Hexagram", - "Isildur46" - ] - }, - "Glossary/代理服务器": { - "modified": "2019-03-18T21:22:15.777Z", - "contributors": [ - "lcw0622" - ] - }, - "Glossary/优雅降级": { - "modified": "2020-02-12T11:01:35.540Z", - "contributors": [ - "RainSlide", - "biqing" - ] - }, - "Glossary/伪类": { - "modified": "2020-09-25T11:55:47.602Z", - "contributors": [ - "Ninglo" - ] - }, - "Glossary/元素": { - "modified": "2020-08-10T23:10:02.620Z", - "contributors": [ - "IdEvEbI", - "244462375", - "RainSlide", - "dsdog1997", - "HDUCC", - "jianbinfu", - "pluwen" - ] - }, - "Glossary/卡片分类法": { - "modified": "2019-11-09T07:01:56.698Z", - "contributors": [ - "Xugen-Ma" - ] - }, - "Glossary/地址路由参数域": { - "modified": "2019-03-18T20:31:46.228Z", - "contributors": [ - "huanghe2015" - ] - }, - "Glossary/域名": { - "modified": "2019-03-23T22:04:34.305Z", - "contributors": [ - "micblo" - ] - }, - "Glossary/基线": { - "modified": "2020-05-10T09:55:14.332Z", - "contributors": [ - "Isildur46" - ] - }, - "Glossary/字符编码": { - "modified": "2020-02-12T10:38:11.288Z", - "contributors": [ - "RainSlide", - "fish-inu" - ] - }, - "Glossary/幂等": { - "modified": "2020-06-05T03:53:12.558Z", - "contributors": [ - "bytetown", - "zhangchen", - "WayneCui" - ] - }, - "Glossary/异步": { - "modified": "2020-10-16T00:10:28.593Z", - "contributors": [ - "Neo42", - "fish-inu" - ] - }, - "Glossary/抽象编程": { - "modified": "2020-01-16T01:08:30.168Z", - "contributors": [ - "Kuichen" - ] - }, - "Glossary/数字证书": { - "modified": "2019-03-23T22:26:11.405Z", - "contributors": [ - "Atester" - ] - }, - "Glossary/数据库": { - "modified": "2020-11-25T09:15:57.640Z", - "contributors": [ - "ZH-S" - ] - }, - "Glossary/正常模式": { - "modified": "2019-03-18T21:11:47.868Z", - "contributors": [ - "serverLua", - "CapDuan" - ] - }, - "Glossary/浏览器": { - "modified": "2019-03-23T22:12:12.389Z", - "contributors": [ - "micblo", - "lavenderming" - ] - }, - "Glossary/渐进增强": { - "modified": "2019-03-18T20:54:47.653Z", - "contributors": [ - "biqing" - ] - }, - "Glossary/源": { - "modified": "2019-03-23T22:21:16.972Z", - "contributors": [ - "xgqfrms-GitHub" - ] - }, - "Glossary/禁止修改的消息首部": { - "modified": "2019-03-18T20:55:25.213Z", - "contributors": [ - "Opportunity", - "yuankunzhang", - "WayneCui" - ] - }, - "Glossary/空元素": { - "modified": "2020-05-27T05:46:24.967Z", - "contributors": [ - "changjingli", - "Ende93" - ] - }, - "Glossary/立即执行函数表达式": { - "modified": "2019-10-10T13:29:59.923Z", - "contributors": [ - "SAM.L", - "RainSlide", - "zhangchen", - "CapDuan", - "baooab", - "xgqfrms-GitHub", - "zachary05" - ] - }, - "Glossary/第一字节时间": { - "modified": "2020-08-17T07:40:42.498Z", - "contributors": [ - "Facefall" - ] - }, - "Glossary/简单头部": { - "modified": "2019-03-18T21:33:57.550Z", - "contributors": [ - "huangll" - ] - }, - "Glossary/算法": { - "modified": "2019-12-09T04:39:20.829Z", - "contributors": [ - "ran", - "huanghe2015" - ] - }, - "Glossary/类型转换": { - "modified": "2019-06-24T05:38:16.865Z", - "contributors": [ - "RainSlide", - "danielnanuk" - ] - }, - "Glossary/编译": { - "modified": "2019-03-18T21:35:31.612Z", - "contributors": [ - "ethanzway" - ] - }, - "Glossary/编译时间": { - "modified": "2019-03-18T21:35:17.139Z", - "contributors": [ - "ethanzway" - ] - }, - "Glossary/语义": { - "modified": "2020-02-12T10:16:15.832Z", - "contributors": [ - "RainSlide", - "秋色楓", - "acejerry", - "DaMber" - ] - }, - "Glossary/请求头": { - "modified": "2020-02-12T10:12:37.548Z", - "contributors": [ - "RainSlide", - "c1er", - "huangll" - ] - }, - "Glossary/通用首部": { - "modified": "2020-02-12T09:58:36.039Z", - "contributors": [ - "RainSlide", - "WayneCui" - ] - }, - "Glossary/面向对象编程": { - "modified": "2019-03-23T22:19:08.166Z", - "contributors": [ - "zhangchen", - "fan19900404" - ] - }, - "Glossary_of_translation": { - "modified": "2019-03-23T23:33:18.884Z", - "contributors": [ - "Terry.Qiao", - "xcffl", - "iwo", - "yfdyh000" - ] - }, "HTML_in_XMLHttpRequest": { "modified": "2019-03-24T00:17:24.579Z", "contributors": [ @@ -2735,20 +2347,6 @@ "CharCat" ] }, - "Learn/CSS/Building_blocks/处理_不同_方向的_文本": { - "modified": "2020-07-16T22:29:14.755Z", - "contributors": [ - "ChongyouXu", - "lucida959595", - "Young-Spark", - "ZouYj", - "dlnb526", - "SirnoChan", - "sliop", - "Orzst", - "kuhnpku" - ] - }, "Learn/CSS/CSS_layout": { "modified": "2020-08-06T11:35:54.083Z", "contributors": [ @@ -2936,44 +2534,6 @@ "SirnoChan" ] }, - "Learn/CSS/CSS_layout/传统的布局方法": { - "modified": "2020-07-16T22:27:16.084Z", - "contributors": [ - "SirnoChan", - "Hermedius", - "zxxzzzzz", - "agnoCJY" - ] - }, - "Learn/CSS/CSS_layout/定位": { - "modified": "2020-12-01T00:39:03.074Z", - "contributors": [ - "zisedelinghun", - "driftingdream", - "laizenan", - "parabolazz", - "LuoYun", - "TaoXuSheng", - "codeofjackie", - "fourml", - "summercn", - "allan_simon", - "yuyx91", - "lihaoyuan", - "xp44mm", - "yydzxz", - "ddtyjmyjm", - "Froggy", - "uestcNaldo", - "Eric.Wu", - "echoArray", - "xgqfrms-GitHub", - "Ende93", - "depressedX", - "siufooncheung", - "1986slayer" - ] - }, "Learn/CSS/First_steps": { "modified": "2020-07-16T22:27:41.508Z", "contributors": [ @@ -2988,21 +2548,6 @@ "kfk2454" ] }, - "Learn/CSS/First_steps/CSS如何运行": { - "modified": "2020-07-16T22:28:02.363Z", - "contributors": [ - "ChongyouXu", - "shizigood", - "dlnb526", - "SirnoChan", - "pacexy", - "kuhnpku", - "FrankYuanhao", - "0x79b9", - "SphinxKnight", - "xcxAscar" - ] - }, "Learn/CSS/First_steps/How_CSS_is_structured": { "modified": "2020-10-06T13:23:28.338Z", "contributors": [ @@ -3040,19 +2585,6 @@ "ArcherGrey" ] }, - "Learn/CSS/First_steps/开始": { - "modified": "2020-07-16T22:27:52.665Z", - "contributors": [ - "dlnb526", - "SirnoChan", - "byeyear", - "HHao", - "zyzxrj", - "fondxy", - "Amano-Aki", - "RUAN-ZX" - ] - }, "Learn/CSS/Howto": { "modified": "2020-07-16T22:25:44.300Z", "contributors": [ @@ -3062,127 +2594,6 @@ "githubxiaowen" ] }, - "Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension": { - "modified": "2020-10-09T04:34:43.547Z", - "contributors": [ - "benniks", - "blateyang", - "grape", - "LeoB-O", - "codeofjackie", - "allan_simon", - "phiwyc", - "yydzxz", - "ddtyjmyjm", - "nbhaohao" - ] - }, - "Learn/CSS/Styling_boxes/A_cool_looking_box": { - "modified": "2020-07-16T22:28:27.701Z", - "contributors": [ - "grape", - "Lohoyo", - "lihaoyuan" - ] - }, - "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper": { - "modified": "2020-07-16T22:28:25.559Z", - "contributors": [ - "codeofjackie", - "ziyunfei", - "Yee", - "lihaoyuan" - ] - }, - "Learn/CSS/为文本添加样式": { - "modified": "2020-07-16T22:26:01.367Z", - "contributors": [ - "kohai", - "LJJ1996", - "allan_simon", - "zhuangyin", - "zhang-kai", - "ZhongyiChen" - ] - }, - "Learn/CSS/为文本添加样式/Fundamentals": { - "modified": "2020-07-16T22:26:10.120Z", - "contributors": [ - "AlephAlpha", - "Otaku-Glasses", - "grape", - "xiaoman", - "byeyear", - "Sinclair-Yuan", - "ssttii", - "tiange321", - "sixDregs", - "zhuzhangliang", - "liy010", - "codeofjackie", - "1862", - "maoyumaoxun", - "allan_simon", - "comehope", - "xp44mm", - "sputnikW", - "yydzxz", - "Froggy", - "nbhaohao" - ] - }, - "Learn/CSS/为文本添加样式/Styling_links": { - "modified": "2020-07-16T22:26:21.533Z", - "contributors": [ - "so2liu", - "SirnoChan", - "Map1en_", - "LeoB-O", - "dchaofei", - "codeofjackie", - "Fungzhe", - "allan_simon", - "xp44mm", - "sputnikW", - "nbhaohao" - ] - }, - "Learn/CSS/为文本添加样式/Styling_lists": { - "modified": "2020-07-16T22:26:15.817Z", - "contributors": [ - "rtxu", - "codeofjackie", - "allan_simon", - "xp44mm", - "Froggy", - "jingyiwang1209", - "Ende93", - "Barren", - "qw950027", - "dazyzsy" - ] - }, - "Learn/CSS/为文本添加样式/Typesetting_a_homepage": { - "modified": "2020-07-16T22:26:27.995Z", - "contributors": [ - "monkey-king", - "grape", - "Map1en_", - "codeofjackie", - "maplelinst" - ] - }, - "Learn/CSS/为文本添加样式/Web_字体": { - "modified": "2020-07-16T22:26:25.043Z", - "contributors": [ - "AlephAlpha", - "LeoB-O", - "zenghuiLee", - "admin1949", - "wheeljs", - "Froggy" - ] - }, "Learn/Common_questions": { "modified": "2020-07-16T22:35:28.142Z", "contributors": [ @@ -3363,24 +2774,6 @@ "Selence1988" ] }, - "Learn/Common_questions/实用文本编辑器": { - "modified": "2020-07-16T22:35:49.753Z", - "contributors": [ - "A-rise" - ] - }, - "Learn/Discover_browser_developer_tools": { - "modified": "2020-08-09T19:35:32.533Z", - "contributors": [ - "DarkStory", - "eelord", - "ziyouwa", - "Atractylodes", - "wth", - "ziyunfei", - "zhaoy875" - ] - }, "Learn/Getting_started_with_the_web": { "modified": "2020-09-24T11:26:23.243Z", "contributors": [ @@ -3614,238 +3007,6 @@ "ziyunfei" ] }, - "Learn/HTML/Forms": { - "modified": "2020-07-16T22:21:02.678Z", - "contributors": [ - "615lyw", - "Lohoyo", - "lihaoyuan", - "yydzxz", - "StarryForce", - "Froggy", - "chrisdavidmills", - "ziyunfei", - "JulieLee77", - "teoli", - "Jeremie" - ] - }, - "Learn/HTML/Forms/Advanced_styling_for_HTML_forms": { - "modified": "2020-07-16T22:21:36.744Z", - "contributors": [ - "rtxu", - "Daniel313", - "codeofjackie", - "yydzxz", - "tzigang" - ] - }, - "Learn/HTML/Forms/Data_form_validation": { - "modified": "2020-07-16T22:21:53.600Z", - "contributors": [ - "dlnb526", - "wavedanger", - "WoodCube", - "PYGC", - "liudadadayu", - "Amano_Sei", - "kazimics", - "codeofjackie", - "tinyhare", - "lihaoyuan", - "dondevi", - "littledust", - "crper", - "yydzxz", - "pantao", - "Froggy", - "xianshenglu", - "songbinghui", - "monsterooo", - "liu-xiao-cui", - "jileieli" - ] - }, - "Learn/HTML/Forms/HTML_forms_in_legacy_browsers": { - "modified": "2020-07-16T22:22:04.178Z", - "contributors": [ - "haoye999", - "lovedebug", - "jaiJia", - "littledust" - ] - }, - "Learn/HTML/Forms/How_to_build_custom_form_widgets": { - "modified": "2020-07-16T22:21:58.787Z", - "contributors": [ - "WoodCube", - "rtxu", - "feixiang5754", - "lonelywhisper", - "yasminyt", - "honey6", - "codeofjackie", - "tinyhare", - "yochii", - "uselessaddress", - "crper", - "yydzxz", - "zqyue", - "darkeggler", - "Froggy", - "chrisdavidmills", - "Sheppy", - "ziyunfei", - "helloguangxue" - ] - }, - "Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_1": { - "modified": "2020-07-16T22:21:59.182Z", - "contributors": [ - "Qos", - "549074491", - "codeofjackie" - ] - }, - "Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_2": { - "modified": "2020-07-16T22:21:59.542Z", - "contributors": [ - "shc0743", - "codeofjackie" - ] - }, - "Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_3": { - "modified": "2020-07-16T22:21:59.861Z", - "contributors": [ - "shc0743", - "codeofjackie" - ] - }, - "Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_4": { - "modified": "2020-07-16T22:22:00.186Z", - "contributors": [ - "shc0743", - "codeofjackie" - ] - }, - "Learn/HTML/Forms/How_to_structure_an_HTML_form": { - "modified": "2020-07-16T22:21:16.348Z", - "contributors": [ - "lucida959595", - "imba-tjd", - "naivexcited", - "WoodCube", - "Zhang-YanQi", - "liy010", - "web-xx", - "codeofjackie", - "lihaoyuan", - "yawei", - "zqyue", - "StarryForce", - "Froggy" - ] - }, - "Learn/HTML/Forms/Property_compatibility_table_for_form_widgets": { - "modified": "2020-07-16T22:21:44.843Z", - "contributors": [ - "codeofjackie", - "lovedebug" - ] - }, - "Learn/HTML/Forms/Sending_and_retrieving_form_data": { - "modified": "2020-07-16T22:21:29.690Z", - "contributors": [ - "rtxu", - "WoodCube", - "aliang2017", - "codeofjackie", - "yydzxz", - "Froggy", - "KngZhi", - "chrisdavidmills", - "juzhiyuan" - ] - }, - "Learn/HTML/Forms/Sending_forms_through_JavaScript": { - "modified": "2020-07-16T22:22:02.523Z", - "contributors": [ - "RainSlide", - "WoodCube", - "xing2000", - "Bayes", - "codeofjackie", - "littledust", - "yydzxz", - "Chenng", - "chrisdavidmills", - "ziyunfei", - "sanxingming", - "helloguangxue", - "teoli" - ] - }, - "Learn/HTML/Forms/Styling_HTML_forms": { - "modified": "2020-07-16T22:21:32.838Z", - "contributors": [ - "jiaodk", - "rtxu", - "coder-git", - "33YANG", - "Daniel313", - "codeofjackie", - "lovedebug", - "yydzxz", - "lucoo01" - ] - }, - "Learn/HTML/Forms/The_native_form_widgets": { - "modified": "2020-09-17T23:41:07.186Z", - "contributors": [ - "aaazz47", - "853419196", - "WoodCube", - "wsyconan", - "Drizzt-Yu", - "Kavelaa", - "coldicecn", - "Danielxiey", - "codeofjackie", - "Lohoyo", - "lihaoyuan", - "xp44mm", - "uselessaddress", - "littledust", - "yydzxz", - "ddtyjmyjm", - "StarryForce", - "Froggy" - ] - }, - "Learn/HTML/Forms/Your_first_HTML_form": { - "modified": "2020-08-16T03:03:38.716Z", - "contributors": [ - "NicholasZhan", - "WoodCube", - "ChairMao", - "haoye999", - "coldicecn", - "xiangluoming", - "hddhyq", - "Lohoyo", - "maoyumaoxun", - "lyncodes", - "allan_simon", - "lihaoyuan", - "superkuang", - "ddtyjmyjm", - "StarryForce", - "Froggy", - "chrisdavidmills", - "ziyunfei", - "sanxingming" - ] - }, "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks": { "modified": "2020-12-06T07:20:56.145Z", "contributors": [ @@ -4005,29 +3166,6 @@ "badwomanIloveyou" ] }, - "Learn/HTML/Multimedia_and_embedding/其他嵌入技术": { - "modified": "2020-09-22T04:49:55.434Z", - "contributors": [ - "NellPoi", - "yangko", - "pacexy", - "monkey-king", - "WoodCube", - "Roy-Tian", - "ChairMao", - "ZhangDaZongWei", - "Danielxiey", - "615lyw", - "CaTmmao", - "Lohoyo", - "RevolverOcelotA", - "lihaoyuan", - "superkuang", - "yydzxz", - "ddtyjmyjm", - "Eric.Wu" - ] - }, "Learn/HTML/Tables": { "modified": "2020-07-16T22:25:16.499Z", "contributors": [ @@ -4610,22 +3748,6 @@ "WavinFlag" ] }, - "Learn/JavaScript/Objects/向“弹跳球”演示程序添加新功能": { - "modified": "2020-07-16T22:32:36.563Z", - "contributors": [ - "Wenke-D", - "Roy-Tian", - "gofly1988", - "lihaoyuan", - "bluekeroro" - ] - }, - "Learn/JavaScript/Objects/测试你的技能:面向对象的Javascript": { - "modified": "2020-08-05T11:02:17.810Z", - "contributors": [ - "driftingdream" - ] - }, "Learn/Performance/CSS": { "modified": "2020-07-16T22:40:41.520Z", "contributors": [ @@ -4726,14 +3848,6 @@ "ygxwdls" ] }, - "Learn/Tools_and_testing/Client-side_JavaScript_frameworks/介绍": { - "modified": "2020-11-19T04:46:02.957Z", - "contributors": [ - "514059172", - "You2er", - "risejl" - ] - }, "Learn/Tools_and_testing/Cross_browser_testing": { "modified": "2020-07-16T22:39:02.261Z", "contributors": [ @@ -4794,21 +3908,6 @@ "liminjun" ] }, - "Learn/Tools_and_testing/Cross_browser_testing/可访问性": { - "modified": "2020-07-16T22:39:17.935Z", - "contributors": [ - "freejack811", - "Sc0tt" - ] - }, - "Learn/Tools_and_testing/Cross_browser_testing/测试策略": { - "modified": "2020-07-16T22:39:08.099Z", - "contributors": [ - "wangfangping", - "YaoLIII", - "ty4z2008" - ] - }, "Learn/Tools_and_testing/GitHub": { "modified": "2020-08-17T07:24:09.907Z", "contributors": [ @@ -4835,30 +3934,6 @@ "YLX621" ] }, - "Learn/tutorial": { - "modified": "2020-07-16T22:33:40.955Z", - "contributors": [ - "Andrew_Pfeiffer" - ] - }, - "Learn/tutorial/How_to_build_a_web_site": { - "modified": "2020-07-16T22:33:41.521Z", - "contributors": [ - "LX" - ] - }, - "Localization": { - "modified": "2019-03-23T23:33:42.693Z", - "contributors": [ - "xcffl" - ] - }, - "MDC:怎样进行帮助": { - "modified": "2019-01-16T16:56:07.625Z", - "contributors": [ - "ygtyugh" - ] - }, "MDN": { "modified": "2020-02-19T17:55:29.065Z", "contributors": [ @@ -4902,67 +3977,6 @@ "lunix01" ] }, - "MDN/Community": { - "modified": "2020-04-03T05:16:15.416Z", - "contributors": [ - "SphinxKnight", - "shiguang", - "wbamberg", - "Planet6174", - "Forbidden", - "ZQH", - "suwenbin", - "maksyuki", - "Ende93", - "shuding", - "yun174long", - "IBuly", - "civilian", - "MofeLee", - "ziyunfei", - "Fiag" - ] - }, - "MDN/Community/Conversations": { - "modified": "2020-04-08T04:56:55.004Z", - "contributors": [ - "SirnoChan", - "ewfian", - "Chor", - "wbamberg", - "chaosdog", - "jswisher", - "tanyan2004", - "githubzh123" - ] - }, - "MDN/Community/Doc_sprints": { - "modified": "2019-03-18T20:44:27.614Z", - "contributors": [ - "RainSlide", - "wbamberg", - "ElliottZheng", - "varcat" - ] - }, - "MDN/Community/Whats_happening": { - "modified": "2020-07-16T22:45:19.757Z", - "contributors": [ - "brizer", - "wbamberg", - "IannaZhou", - "fanyj1994", - "1986slayer" - ] - }, - "MDN/Community/在社区工作": { - "modified": "2020-02-19T18:49:08.850Z", - "contributors": [ - "jswisher", - "wbamberg", - "huangzijian888" - ] - }, "MDN/Contribute": { "modified": "2019-03-04T23:39:43.858Z", "contributors": [ @@ -5055,27 +4069,6 @@ "xhlsrj" ] }, - "MDN/Contribute/Howto/Create_an_MDN_account": { - "modified": "2020-08-03T02:14:19.507Z", - "contributors": [ - "zonghuaj", - "jackleeholmes", - "dwns545", - "kgbook", - "roboterwise", - "wbamberg", - "Disat", - "Zhsirting", - "jiajinning", - "BoothLuo", - "WavinFlag", - "acgpiano", - "1xxxx", - "wth", - "ziyunfei", - "fanziy75" - ] - }, "MDN/Contribute/Howto/Create_and_edit_pages": { "modified": "2020-08-13T06:15:42.058Z", "contributors": [ @@ -5119,65 +4112,6 @@ "sweetliu" ] }, - "MDN/Contribute/Howto/Do_a_technical_review": { - "modified": "2020-06-06T00:56:15.988Z", - "contributors": [ - "ice-kylin", - "wbamberg", - "Mr.ma", - "zt19994", - "jianxin-zhang", - "righttoe", - "The-End-Hero", - "pidanhua", - "Roland_Reed", - "majunbao", - "pixiu" - ] - }, - "MDN/Contribute/Howto/Do_an_editorial_review": { - "modified": "2020-02-24T12:04:57.900Z", - "contributors": [ - "zhanglolo", - "IFVFORNONE", - "SphinxKnight", - "YUYUEy", - "chrislung", - "Azurak", - "wbamberg", - "quainter", - "Katherina-Miao", - "ucev", - "liujinyu", - "faremax", - "nanflower", - "YFM-getA", - "LiuTong", - "Martin.Chow", - "MMOnster", - "lunix01" - ] - }, - "MDN/Contribute/Howto/Set_the_summary_for_a_page": { - "modified": "2019-10-29T05:37:01.880Z", - "contributors": [ - "7NZ", - "Socheny", - "zhangdonglei", - "wbamberg", - "WeJie", - "Schr0dinger", - "itao1314", - "52yang", - "ivanberry", - "ziyunfei", - "Inceng", - "salmon8881", - "zzhi", - "Minnie", - "Yanzhu.Yin" - ] - }, "MDN/Contribute/Howto/Tag": { "modified": "2020-04-29T12:58:13.297Z", "contributors": [ @@ -5190,18 +4124,6 @@ "ganshenhai" ] }, - "MDN/Contribute/Howto/Tag_JavaScript_pages": { - "modified": "2019-01-16T21:47:16.976Z", - "contributors": [ - "wbamberg", - "Gale", - "BiGrEgGaErOoTs", - "joke", - "Ahkari", - "ziyunfei", - "lushunming" - ] - }, "MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary": { "modified": "2019-03-18T21:16:25.185Z", "contributors": [ @@ -5221,17 +4143,6 @@ "Syclover-u2400" ] }, - "MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web": { - "modified": "2020-09-06T02:30:17.183Z", - "contributors": [ - "Cheese-Chip", - "SuiltaPico", - "gu_qing", - "Azurak", - "wbamberg", - "liminjun" - ] - }, "MDN/Contribute/Howto/Write_for_SEO": { "modified": "2019-01-17T03:12:28.083Z", "contributors": [ @@ -5239,95 +4150,6 @@ "MartinJLiu" ] }, - "MDN/Contribute/Howto/如何添加或更新浏览器兼容性数据": { - "modified": "2019-03-18T21:38:16.029Z", - "contributors": [ - "wbamberg", - "kite-js" - ] - }, - "MDN/Contribute/Howto/学习_交互_在线_起步_开始": { - "modified": "2019-03-18T21:43:40.910Z", - "contributors": [ - "wbamberg", - "ZweiZhao" - ] - }, - "MDN/Contribute/Howto/成为一名测试版试验员": { - "modified": "2019-03-23T22:10:34.334Z", - "contributors": [ - "fengchunsgit", - "wbamberg", - "fbambi", - "sunnysabor" - ] - }, - "MDN/Editor": { - "modified": "2020-09-30T15:44:25.503Z", - "contributors": [ - "chrisdavidmills", - "thouen", - "woniuxingdong", - "TeabugCC", - "yuan81777", - "zhangqiangoffice", - "xjr7670", - "Y.Young", - "ChuckZhang", - "mona", - "jiahui", - "Roland_Reed", - "JoshuaLee", - "GeoffreyQ", - "sunxiang", - "OlingCat", - "Meteormatt" - ] - }, - "MDN/Editor/Basics": { - "modified": "2020-09-30T15:44:25.432Z", - "contributors": [ - "chrisdavidmills", - "zhangqiangoffice", - "Jeane", - "yy1107", - "world521", - "q1560760" - ] - }, - "MDN/Editor/Basics/Page_controls": { - "modified": "2020-09-30T15:44:25.715Z", - "contributors": [ - "chrisdavidmills", - "zhangqiangoffice" - ] - }, - "MDN/Editor/Basics/Page_info": { - "modified": "2020-09-30T15:44:25.570Z", - "contributors": [ - "chrisdavidmills", - "zhangqiangoffice" - ] - }, - "MDN/Editor/Edit_box": { - "modified": "2020-09-30T15:44:25.913Z", - "contributors": [ - "chrisdavidmills", - "RainSlide", - "yuan81777", - "zhangqiangoffice" - ] - }, - "MDN/Editor/Source_mode": { - "modified": "2020-09-30T15:44:26.291Z", - "contributors": [ - "chrisdavidmills", - "SirnoChan", - "yinsang", - "woniuxingdong", - "zhangqiangoffice" - ] - }, "MDN/Guidelines": { "modified": "2020-09-30T15:32:46.472Z", "contributors": [ @@ -5347,54 +4169,6 @@ "shc0743" ] }, - "MDN/Guidelines/Content_blocks": { - "modified": "2020-09-30T15:32:46.742Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "OlingCat" - ] - }, - "MDN/Guidelines/Rules_Of_MDN_Documenting": { - "modified": "2020-09-30T15:32:46.957Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "zccz14" - ] - }, - "MDN/Guidelines/Style_guide": { - "modified": "2020-11-14T07:38:19.734Z", - "contributors": [ - "kuailekai", - "chrisdavidmills", - "jswisher", - "wbamberg", - "codeofjackie", - "Dousy", - "Terry.Qiao", - "jianxin-zhang", - "DennisWang", - "suncn", - "WynnChen", - "zmh_w", - "OlingCat" - ] - }, - "MDN/Kuma": { - "modified": "2019-09-09T15:54:47.389Z", - "contributors": [ - "SphinxKnight", - "RainSlide", - "yuan81777", - "Chor", - "wbamberg", - "myshell1983", - "popcorner", - "Jack-Q", - "xgqfrms" - ] - }, "MDN/MDN_Product_Advisory_Board": { "modified": "2019-01-17T01:56:35.044Z", "contributors": [ @@ -5458,14 +4232,6 @@ "jiahui" ] }, - "MDN/Structures/Live_samples/Simple_live_sample_demo": { - "modified": "2020-09-30T12:57:47.049Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "Howard.Chen" - ] - }, "MDN/Structures/Macros": { "modified": "2020-09-30T12:57:46.893Z", "contributors": [ @@ -5478,26 +4244,6 @@ "jswisher" ] }, - "MDN/Structures/Macros/Custom_macros": { - "modified": "2020-10-06T09:20:15.609Z", - "contributors": [ - "phone-burner", - "chrisdavidmills", - "wbamberg", - "teoli", - "fscholz", - "xhlsrj", - "FredWe" - ] - }, - "MDN_at_ten": { - "modified": "2019-03-23T22:50:02.795Z", - "contributors": [ - "FlyingPig", - "cughudson_1", - "WarriorWu" - ] - }, "Mozilla": { "modified": "2020-06-07T07:01:06.707Z", "contributors": [ @@ -5646,14 +4392,6 @@ "RainSlide" ] }, - "Mozilla/Add-ons/WebExtensions/API/contextMenus": { - "modified": "2020-10-15T21:54:13.449Z", - "contributors": [ - "miracleXL", - "yangwang", - "xgqfrms-GitHub" - ] - }, "Mozilla/Add-ons/WebExtensions/API/cookies": { "modified": "2020-10-15T21:52:04.120Z", "contributors": [ @@ -5669,13 +4407,6 @@ "JamesUmmex" ] }, - "Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow": { - "modified": "2020-10-15T22:13:56.821Z", - "contributors": [ - "wbamberg", - "ClassJm" - ] - }, "Mozilla/Add-ons/WebExtensions/API/downloads": { "modified": "2020-10-15T22:24:32.261Z", "contributors": [ @@ -5904,12 +4635,6 @@ "zsgwsjj" ] }, - "Mozilla/Add-ons/WebExtensions/API/tabs/查询": { - "modified": "2020-11-25T05:15:24.039Z", - "contributors": [ - "qzwvinner" - ] - }, "Mozilla/Add-ons/WebExtensions/API/types": { "modified": "2020-07-06T02:37:08.205Z" }, @@ -5986,21 +4711,6 @@ "Ruwind" ] }, - "Mozilla/Add-ons/WebExtensions/API/剪切板": { - "modified": "2020-10-15T22:15:08.385Z", - "contributors": [ - "RainSlide", - "faliye", - "gentop" - ] - }, - "Mozilla/Add-ons/WebExtensions/API/剪切板/setImageData": { - "modified": "2020-10-15T22:15:17.586Z", - "contributors": [ - "RainSlide", - "faliye" - ] - }, "Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar": { "modified": "2019-03-18T21:06:43.197Z", "contributors": [ @@ -6131,20 +4841,6 @@ "pea3nut" ] }, - "Mozilla/Add-ons/WebExtensions/Packaging_and_installation": { - "modified": "2019-03-23T22:45:12.350Z", - "contributors": [ - "GrayLight", - "yfdyh000" - ] - }, - "Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome": { - "modified": "2019-03-18T21:08:06.832Z", - "contributors": [ - "PaperFlu", - "yfdyh000" - ] - }, "Mozilla/Add-ons/WebExtensions/Prerequisites": { "modified": "2019-03-23T22:45:08.369Z", "contributors": [ @@ -6152,35 +4848,12 @@ "yfdyh000" ] }, - "Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension": { - "modified": "2019-03-18T21:06:37.903Z", - "contributors": [ - "abcfyk", - "Smartree", - "taadis" - ] - }, "Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page": { "modified": "2020-05-01T09:44:07.553Z", "contributors": [ "ultiwill" ] }, - "Mozilla/Add-ons/WebExtensions/Walkthrough": { - "modified": "2019-09-08T06:17:56.666Z", - "contributors": [ - "Bonlin0", - "ZowieGong", - "LuminousXLB", - "Gszekt", - "boser90", - "yydzxz", - "lightsing", - "CXWorks", - "GrayLight", - "yfdyh000" - ] - }, "Mozilla/Add-ons/WebExtensions/What_are_WebExtensions": { "modified": "2020-05-06T06:16:11.132Z", "contributors": [ @@ -6351,15 +5024,6 @@ "fish-inu" ] }, - "Mozilla/Add-ons/WebExtensions/manifest.json/主页地址": { - "modified": "2020-10-15T21:51:31.504Z", - "contributors": [ - "RainSlide", - "fscholz", - "1010Tech", - "Hypophrenia" - ] - }, "Mozilla/Add-ons/WebExtensions/user_interface": { "modified": "2019-03-18T20:52:33.784Z", "contributors": [ @@ -6398,34 +5062,6 @@ "Jane47Zeng" ] }, - "Mozilla/Add-ons/WebExtensions/user_interface/侧边栏": { - "modified": "2019-03-18T21:02:29.279Z", - "contributors": [ - "dfchong" - ] - }, - "Mozilla/Add-ons/WebExtensions/实现一个设置页面": { - "modified": "2019-09-14T23:46:00.166Z", - "contributors": [ - "ivysrono", - "xcffl", - "Hypophrenia" - ] - }, - "Mozilla/Add-ons/WebExtensions/构建一个跨浏览器的扩展插件": { - "modified": "2020-09-17T09:25:04.236Z", - "contributors": [ - "kingcc", - "Daryl.Xu" - ] - }, - "Mozilla/Add-ons/WebExtensions/用户界面元素": { - "modified": "2019-03-18T21:06:10.178Z", - "contributors": [ - "qson", - "Hypophrenia" - ] - }, "Mozilla/Developer_guide": { "modified": "2020-06-26T07:13:21.797Z", "contributors": [ @@ -6844,116 +5480,6 @@ "Gay夜" ] }, - "Mozilla/Mozilla_Persona": { - "modified": "2019-03-23T23:09:24.663Z", - "contributors": [ - "world521" - ] - }, - "Python": { - "modified": "2019-03-23T23:11:53.165Z", - "contributors": [ - "JiangLirui", - "xcffl" - ] - }, - "Quirks_Mode_and_Standards_Mode": { - "modified": "2019-03-24T00:17:27.134Z", - "contributors": [ - "OoOoOoOo", - "ziyunfei" - ] - }, - "Server-sent_events": { - "modified": "2020-03-04T10:52:34.764Z", - "contributors": [ - "femaimi", - "RainSlide", - "act262", - "raju_dasa" - ] - }, - "Server-sent_events/EventSource": { - "modified": "2020-10-15T21:21:30.406Z", - "contributors": [ - "into-piece", - "RainSlide", - "Jack.Works", - "xlaoyu", - "xgqfrms-GitHub", - "kameii", - "ziyunfei" - ] - }, - "Server-sent_events/EventSource/EventSource": { - "modified": "2019-08-07T05:55:13.404Z", - "contributors": [ - "ZZES_REN", - "kameii" - ] - }, - "Server-sent_events/EventSource/close": { - "modified": "2019-03-23T22:09:23.731Z", - "contributors": [ - "Char-Ten" - ] - }, - "Server-sent_events/EventSource/onerror": { - "modified": "2019-03-23T22:09:23.181Z", - "contributors": [ - "Char-Ten" - ] - }, - "Server-sent_events/EventSource/onopen": { - "modified": "2019-03-23T22:16:16.621Z", - "contributors": [ - "kameii" - ] - }, - "Server-sent_events/Using_server-sent_events": { - "modified": "2020-10-15T21:21:32.267Z", - "contributors": [ - "kagurakana", - "mkckr0", - "xgqfrms-GitHub", - "jamemark", - "ziyunfei" - ] - }, - "Site_Compatibility_for_Firefox_19": { - "modified": "2019-01-16T17:00:07.852Z", - "contributors": [ - "wbamberg", - "ziyunfei" - ] - }, - "Site_Compatibility_for_Firefox_21": { - "modified": "2019-01-16T17:20:04.063Z", - "contributors": [ - "wbamberg", - "ziyunfei" - ] - }, - "Site_Compatibility_for_Firefox_23": { - "modified": "2019-01-16T17:27:23.228Z", - "contributors": [ - "wbamberg", - "ziyunfei" - ] - }, - "Site_Compatibility_for_Firefox_24": { - "modified": "2019-01-16T17:27:30.001Z", - "contributors": [ - "wbamberg", - "ziyunfei" - ] - }, - "Specification_List": { - "modified": "2019-03-23T23:31:18.870Z", - "contributors": [ - "ziyunfei" - ] - }, "Tools": { "modified": "2020-08-19T03:34:07.960Z", "contributors": [ @@ -7004,13 +5530,6 @@ "Baoer-MBY" ] }, - "Tools/Add-ons": { - "modified": "2020-07-16T22:36:23.904Z", - "contributors": [ - "wbamberg", - "maicss" - ] - }, "Tools/Browser_Console": { "modified": "2020-08-17T23:06:02.026Z", "contributors": [ @@ -7211,14 +5730,6 @@ "ziyunfei" ] }, - "Tools/Page_Inspector/3D_view": { - "modified": "2020-07-16T22:34:25.755Z", - "contributors": [ - "Gitai", - "wbamberg", - "ziyunfei" - ] - }, "Tools/Page_Inspector/How_to": { "modified": "2020-07-16T22:34:32.374Z", "contributors": [ @@ -7314,13 +5825,6 @@ "DyVan_Cheung" ] }, - "Tools/Page_Inspector/How_to/View_fonts": { - "modified": "2020-07-16T22:34:39.361Z", - "contributors": [ - "wbamberg", - "webery" - ] - }, "Tools/Page_Inspector/How_to/Visualize_transforms": { "modified": "2020-07-16T22:34:39.820Z", "contributors": [ @@ -7388,15 +5892,6 @@ "daaain" ] }, - "Tools/Profiler": { - "modified": "2020-07-16T22:35:29.313Z", - "contributors": [ - "wbamberg", - "hstarorg", - "Qcui", - "jackyong" - ] - }, "Tools/Remote_Debugging": { "modified": "2020-07-16T22:35:38.510Z", "contributors": [ @@ -7411,13 +5906,6 @@ "Leo_Ken" ] }, - "Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone": { - "modified": "2019-03-23T23:02:33.405Z", - "contributors": [ - "wbamberg", - "qq18588696841" - ] - }, "Tools/Remote_Debugging/Firefox_for_Android": { "modified": "2020-07-16T22:35:39.562Z", "contributors": [ @@ -7430,16 +5918,6 @@ "18353573321" ] }, - "Tools/Responsive_Design_View": { - "modified": "2020-07-16T22:35:22.496Z", - "contributors": [ - "wbamberg", - "Meteormatt", - "maybe", - "ziyunfei", - "dannyxu" - ] - }, "Tools/Rulers": { "modified": "2020-07-16T22:36:26.679Z", "contributors": [ @@ -7487,14 +5965,6 @@ "ziyunfei" ] }, - "Tools/Using_the_Source_Editor": { - "modified": "2020-07-16T22:34:03.695Z", - "contributors": [ - "wbamberg", - "ziyunfei", - "Sanshao" - ] - }, "Tools/Web_Console": { "modified": "2020-07-16T22:34:10.632Z", "contributors": [ @@ -7524,14 +5994,6 @@ "c1er" ] }, - "Tools/Web音频编辑器": { - "modified": "2020-07-16T22:36:08.958Z", - "contributors": [ - "wbamberg", - "ab233", - "DorayHong" - ] - }, "Tools/Working_with_iframes": { "modified": "2020-07-16T22:36:12.232Z", "contributors": [ @@ -7555,61 +6017,6 @@ "lzrhcj" ] }, - "Tools/不推荐的工具": { - "modified": "2020-07-16T22:36:40.884Z", - "contributors": [ - "GMMG55" - ] - }, - "Tools/存储查看器": { - "modified": "2020-07-16T22:36:10.648Z", - "contributors": [ - "hellojackhui" - ] - }, - "Tools/小技巧": { - "modified": "2020-07-16T22:36:36.674Z", - "contributors": [ - "Argon-Pub", - "wbamberg", - "ShirleyM" - ] - }, - "Understanding_Underlines": { - "modified": "2020-06-28T08:17:09.016Z", - "contributors": [ - "riino", - "zsxeee", - "ziyunfei", - "Y001", - "Bonede" - ] - }, - "Updating_extensions_for_Firefox_3": { - "modified": "2019-12-13T20:33:30.985Z", - "contributors": [ - "wbamberg", - "ziyunfei", - "Sheppy", - "phenix", - "Loveunk" - ] - }, - "Using_XPath": { - "modified": "2019-01-16T15:30:24.695Z", - "contributors": [ - "Cuimingda" - ] - }, - "WOFF": { - "modified": "2020-10-15T21:07:54.753Z", - "contributors": [ - "zhangchen", - "MingxunBai", - "fscholz", - "ziyunfei" - ] - }, "Web": { "modified": "2020-09-21T00:46:13.839Z", "contributors": [ @@ -7779,12 +6186,6 @@ "shockw4ver" ] }, - "Web/API/AmbientLightSensor/reading": { - "modified": "2019-03-23T22:07:09.220Z", - "contributors": [ - "shockw4ver" - ] - }, "Web/API/AnalyserNode": { "modified": "2020-10-15T21:30:26.024Z", "contributors": [ @@ -7807,13 +6208,6 @@ "joy-yu" ] }, - "Web/API/AnalyserNode/fft": { - "modified": "2019-03-18T20:44:28.140Z", - "contributors": [ - "RainSlide", - "GabrielchenCN" - ] - }, "Web/API/AnalyserNode/fftSize": { "modified": "2019-03-23T22:19:56.212Z", "contributors": [ @@ -8116,59 +6510,6 @@ "ayqy" ] }, - "Web/API/AudioContext/createAnalyser": { - "modified": "2019-03-23T22:51:30.295Z", - "contributors": [ - "Ambar", - "ayqy" - ] - }, - "Web/API/AudioContext/createBiquadFilter": { - "modified": "2019-03-23T22:19:40.757Z", - "contributors": [ - "feewb", - "yqjiang" - ] - }, - "Web/API/AudioContext/createBuffer": { - "modified": "2019-03-23T22:49:27.952Z", - "contributors": [ - "Taoja", - "LiuTong", - "Losses" - ] - }, - "Web/API/AudioContext/createBufferSource": { - "modified": "2019-03-23T22:26:08.102Z", - "contributors": [ - "Taoja" - ] - }, - "Web/API/AudioContext/createChannelMerger": { - "modified": "2019-03-23T22:21:54.996Z", - "contributors": [ - "win7killer" - ] - }, - "Web/API/AudioContext/createChannelSplitter": { - "modified": "2019-03-23T22:19:41.394Z", - "contributors": [ - "yqjiang" - ] - }, - "Web/API/AudioContext/createConvolver": { - "modified": "2019-03-23T22:31:06.367Z", - "contributors": [ - "TomdyQin" - ] - }, - "Web/API/AudioContext/createDelay": { - "modified": "2019-03-23T22:16:38.056Z", - "contributors": [ - "wang_geng", - "jb145161" - ] - }, "Web/API/AudioContext/createMediaElementSource": { "modified": "2019-03-23T22:09:51.262Z", "contributors": [ @@ -8189,77 +6530,12 @@ "Remond" ] }, - "Web/API/AudioContext/createScriptProcessor": { - "modified": "2020-03-24T04:10:23.984Z", - "contributors": [ - "frankyoung0305", - "zwmin", - "fanmingfei", - "Remond", - "Melo.HG" - ] - }, - "Web/API/AudioContext/createWaveShaper": { - "modified": "2019-03-23T22:15:28.242Z", - "contributors": [ - "SHALLYKL" - ] - }, - "Web/API/AudioContext/currentTime": { - "modified": "2019-03-23T22:52:18.954Z", - "contributors": [ - "ayqy" - ] - }, - "Web/API/AudioContext/decodeAudioData": { - "modified": "2019-03-23T22:36:34.575Z", - "contributors": [ - "Taoja", - "huangxok" - ] - }, - "Web/API/AudioContext/destination": { - "modified": "2019-03-23T22:52:09.137Z", - "contributors": [ - "ayqy" - ] - }, - "Web/API/AudioContext/listener": { - "modified": "2019-03-23T22:52:15.612Z", - "contributors": [ - "ayqy" - ] - }, - "Web/API/AudioContext/mozAudioChannelType": { - "modified": "2019-03-23T22:52:10.983Z", - "contributors": [ - "ayqy" - ] - }, - "Web/API/AudioContext/onstatechange": { - "modified": "2019-03-23T22:52:09.265Z", - "contributors": [ - "ayqy" - ] - }, "Web/API/AudioContext/resume": { "modified": "2019-03-23T22:08:48.326Z", "contributors": [ "maicss" ] }, - "Web/API/AudioContext/sampleRate": { - "modified": "2019-03-23T22:52:21.186Z", - "contributors": [ - "ayqy" - ] - }, - "Web/API/AudioContext/state": { - "modified": "2019-03-23T22:52:21.050Z", - "contributors": [ - "ayqy" - ] - }, "Web/API/AudioContext/suspend": { "modified": "2020-11-29T00:47:49.013Z", "contributors": [ @@ -8303,12 +6579,6 @@ "MisicDemone" ] }, - "Web/API/AudioNode/connect(AudioParam)": { - "modified": "2019-03-23T22:18:48.818Z", - "contributors": [ - "smilewalker" - ] - }, "Web/API/AudioNodeOptions": { "modified": "2019-03-18T21:39:54.122Z", "contributors": [ @@ -8756,12 +7026,6 @@ "liruiqi" ] }, - "Web/API/CSSMatrix": { - "modified": "2019-03-23T22:20:22.410Z", - "contributors": [ - "kameii" - ] - }, "Web/API/CSSMediaRule": { "modified": "2020-10-15T21:15:06.065Z", "contributors": [ @@ -8980,12 +7244,6 @@ "hbmakeit" ] }, - "Web/API/CSS分页规则": { - "modified": "2020-10-15T22:24:48.715Z", - "contributors": [ - "hongz1125" - ] - }, "Web/API/Cache": { "modified": "2019-10-06T23:50:04.011Z", "contributors": [ @@ -9092,12 +7350,6 @@ "flyingsouthwind" ] }, - "Web/API/CanvasCaptureMediaStream": { - "modified": "2019-03-18T21:16:31.622Z", - "contributors": [ - "scplay" - ] - }, "Web/API/CanvasGradient": { "modified": "2019-03-23T23:07:24.849Z", "contributors": [ @@ -9669,13 +7921,6 @@ "Blabla cn" ] }, - "Web/API/Canvas_API/Drawing_graphics_with_canvas": { - "modified": "2019-03-23T23:20:14.159Z", - "contributors": [ - "ziyunfei", - "wanglingzhi" - ] - }, "Web/API/Canvas_API/Manipulating_video_using_canvas": { "modified": "2019-03-18T20:39:44.141Z", "contributors": [ @@ -9991,12 +8236,6 @@ "WangLeto" ] }, - "Web/API/Channel_Messaging_API/使用_channel_messaging": { - "modified": "2020-10-15T22:33:04.421Z", - "contributors": [ - "cheiron" - ] - }, "Web/API/CharacterData": { "modified": "2019-03-23T23:09:13.805Z", "contributors": [ @@ -10943,12 +9182,6 @@ "princetoad@gmail.com" ] }, - "Web/API/DeviceAcceleration": { - "modified": "2019-03-23T22:20:59.019Z", - "contributors": [ - "shuangya" - ] - }, "Web/API/DeviceLightEvent": { "modified": "2020-10-15T21:34:11.102Z", "contributors": [ @@ -10957,13 +9190,6 @@ "fscholz" ] }, - "Web/API/DeviceLightEvent/Using_light_events": { - "modified": "2020-10-15T21:34:12.225Z", - "contributors": [ - "RainSlide", - "fskuok" - ] - }, "Web/API/DeviceMotionEvent": { "modified": "2020-10-15T21:47:35.974Z", "contributors": [ @@ -11224,13 +9450,6 @@ "ReyCG" ] }, - "Web/API/Document/cookie/Simple_document.cookie_framework": { - "modified": "2019-03-18T20:55:13.743Z", - "contributors": [ - "Tommy-White", - "xgqfrms-GitHub" - ] - }, "Web/API/Document/createAttribute": { "modified": "2020-10-15T21:04:21.052Z", "contributors": [ @@ -11512,19 +9731,6 @@ "Ende93" ] }, - "Web/API/Document/elementFromPoint": { - "modified": "2019-03-23T23:19:33.886Z", - "contributors": [ - "teoli", - "ziyunfei" - ] - }, - "Web/API/Document/elementsFromPoint": { - "modified": "2019-03-23T22:03:51.668Z", - "contributors": [ - "ziyunfei" - ] - }, "Web/API/Document/embeds": { "modified": "2020-10-15T21:04:20.744Z", "contributors": [ @@ -11667,14 +9873,6 @@ "iFee" ] }, - "Web/API/Document/getSelection": { - "modified": "2019-04-29T02:16:09.423Z", - "contributors": [ - "happyWang", - "teoli", - "AlexChao" - ] - }, "Web/API/Document/hasFocus": { "modified": "2019-04-29T02:46:37.409Z", "contributors": [ @@ -11741,14 +9939,6 @@ "ziyunfei" ] }, - "Web/API/Document/inputEncoding": { - "modified": "2019-03-24T00:17:51.204Z", - "contributors": [ - "teoli", - "AshfaqHossain", - "ziyunfei" - ] - }, "Web/API/Document/keypress_event": { "modified": "2019-04-24T12:26:46.079Z", "contributors": [ @@ -11797,33 +9987,6 @@ "AlexChao" ] }, - "Web/API/Document/mozFullScreen": { - "modified": "2019-06-11T23:50:44.389Z", - "contributors": [ - "xiaoxingchi", - "hb-bobo", - "codeofjackie", - "teoli", - "AshfaqHossain", - "ziyunfei" - ] - }, - "Web/API/Document/mozFullScreenElement": { - "modified": "2019-03-24T00:17:55.698Z", - "contributors": [ - "teoli", - "jsx", - "ziyunfei" - ] - }, - "Web/API/Document/mozFullScreenEnabled": { - "modified": "2019-03-24T00:17:54.483Z", - "contributors": [ - "teoli", - "khalid32", - "ziyunfei" - ] - }, "Web/API/Document/mozSyntheticDocument": { "modified": "2019-03-23T22:10:39.057Z", "contributors": [ @@ -11895,12 +10058,6 @@ "Sojourn2017" ] }, - "Web/API/Document/pointerLockElement": { - "modified": "2019-03-23T22:20:46.971Z", - "contributors": [ - "876843240" - ] - }, "Web/API/Document/pointerlockchange_event": { "modified": "2020-10-15T22:32:28.124Z", "contributors": [ @@ -12021,15 +10178,6 @@ "princetoad@gmail.com" ] }, - "Web/API/Document/rouchmove_event": { - "modified": "2019-04-30T14:14:32.752Z", - "contributors": [ - "wbamberg", - "irenesmith", - "fscholz", - "zhaosource" - ] - }, "Web/API/Document/scripts": { "modified": "2019-03-24T00:17:22.230Z", "contributors": [ @@ -12089,14 +10237,6 @@ "xgqfrms-GitHub" ] }, - "Web/API/Document/styleSheets": { - "modified": "2019-03-23T23:10:11.077Z", - "contributors": [ - "xgqfrms-GitHub", - "teoli", - "AlexChao" - ] - }, "Web/API/Document/timeline": { "modified": "2020-10-15T21:52:30.679Z", "contributors": [ @@ -12357,15 +10497,6 @@ "liurenxingyu" ] }, - "Web/API/Document_Object_Model/Preface": { - "modified": "2019-03-23T23:33:00.872Z", - "contributors": [ - "khalid32", - "ziyunfei", - "ReyCG_sub", - "ngoyroe" - ] - }, "Web/API/Document_Object_Model/Using_the_W3C_DOM_Level_1_Core": { "modified": "2019-12-13T21:06:35.933Z", "contributors": [ @@ -12455,15 +10586,6 @@ "Dewang" ] }, - "Web/API/Element/Activate_event": { - "modified": "2020-10-15T22:15:27.177Z", - "contributors": [ - "Carllllo", - "wbamberg", - "irenesmith", - "chenyanfei-m" - ] - }, "Web/API/Element/DOMMouseScroll_event": { "modified": "2019-03-19T08:53:40.772Z", "contributors": [ @@ -12472,12 +10594,6 @@ "soYawn" ] }, - "Web/API/Element/accessKey": { - "modified": "2019-03-23T22:20:51.264Z", - "contributors": [ - "songlairui" - ] - }, "Web/API/Element/animate": { "modified": "2019-03-23T22:06:46.374Z", "contributors": [ @@ -12924,30 +11040,12 @@ "hhxxhg" ] }, - "Web/API/Element/name": { - "modified": "2019-03-23T23:09:29.332Z", - "contributors": [ - "mySoul", - "teoli", - "AlexChao" - ] - }, "Web/API/Element/namespaceURI": { "modified": "2019-03-23T22:05:50.221Z", "contributors": [ "nile52" ] }, - "Web/API/Element/onafterscriptexecute": { - "modified": "2019-03-24T00:15:00.171Z", - "contributors": [ - "wbamberg", - "teoli", - "khalid32", - "ziyunfei", - "zhangyaochun1987" - ] - }, "Web/API/Element/onfullscreenchange": { "modified": "2019-03-18T21:19:43.587Z", "contributors": [ @@ -12961,13 +11059,6 @@ "LinChengDior" ] }, - "Web/API/Element/ongotpointercapture": { - "modified": "2019-03-18T21:45:48.501Z", - "contributors": [ - "Bayes", - "StorytellerF" - ] - }, "Web/API/Element/openOrClosedShadowRoot": { "modified": "2020-10-15T22:35:17.746Z", "contributors": [ @@ -13300,13 +11391,6 @@ "ziyunfei" ] }, - "Web/API/Entity": { - "modified": "2020-06-03T01:07:43.853Z", - "contributors": [ - "RainSlide", - "xgqfrms-GitHub" - ] - }, "Web/API/ErrorEvent": { "modified": "2020-10-15T21:38:19.894Z", "contributors": [ @@ -13393,14 +11477,6 @@ "icodeajk" ] }, - "Web/API/Event/createEvent": { - "modified": "2019-03-23T22:56:15.340Z", - "contributors": [ - "holynewbie", - "Serifx", - "yulifu" - ] - }, "Web/API/Event/currentTarget": { "modified": "2020-10-15T21:05:13.846Z", "contributors": [ @@ -13418,13 +11494,6 @@ "ziyunfei" ] }, - "Web/API/Event/deepPath": { - "modified": "2019-03-23T22:13:43.358Z", - "contributors": [ - "DarrenZhang01", - "Gyanxie" - ] - }, "Web/API/Event/defaultPrevented": { "modified": "2020-10-15T21:04:41.129Z", "contributors": [ @@ -13552,14 +11621,6 @@ "ziyunfei" ] }, - "Web/API/Event/禁用时间冒泡": { - "modified": "2019-03-23T22:20:20.011Z", - "contributors": [ - "shockw4ver", - "xgqfrms-GitHub", - "SuunZhu" - ] - }, "Web/API/EventListener": { "modified": "2020-10-15T21:39:17.019Z", "contributors": [ @@ -13644,23 +11705,6 @@ "ziyunfei" ] }, - "Web/API/EventTarget/attachEvent": { - "modified": "2020-12-08T04:46:34.350Z", - "contributors": [ - "bershanskiy", - "JohnsonBryant", - "eeeeeeeason", - "JiexianYang" - ] - }, - "Web/API/EventTarget/detachEvent": { - "modified": "2019-03-23T22:15:37.296Z", - "contributors": [ - "Ende93", - "faremax", - "daisyHawen" - ] - }, "Web/API/EventTarget/dispatchEvent": { "modified": "2020-12-03T00:06:09.374Z", "contributors": [ @@ -13678,12 +11722,6 @@ "charlie" ] }, - "Web/API/EventTarget/fireEvent": { - "modified": "2019-03-23T22:26:26.112Z", - "contributors": [ - "pod4g" - ] - }, "Web/API/EventTarget/removeEventListener": { "modified": "2020-10-15T21:31:36.215Z", "contributors": [ @@ -13713,27 +11751,6 @@ "flyingsouthwind" ] }, - "Web/API/FetchController": { - "modified": "2020-10-15T21:56:50.608Z", - "contributors": [ - "xgqfrms", - "chjxx", - "zhangchen", - "wuCrio" - ] - }, - "Web/API/FetchController/AbortController": { - "modified": "2020-10-15T22:10:15.849Z", - "contributors": [ - "xiiiAtCn" - ] - }, - "Web/API/FetchController/abort": { - "modified": "2020-10-15T22:22:26.939Z", - "contributors": [ - "cuiwei4869" - ] - }, "Web/API/FetchEvent": { "modified": "2019-03-18T20:53:56.985Z", "contributors": [ @@ -13747,12 +11764,6 @@ "flyingsouthwind" ] }, - "Web/API/FetchObserver": { - "modified": "2019-03-23T22:06:02.004Z", - "contributors": [ - "wuCrio" - ] - }, "Web/API/Fetch_API": { "modified": "2020-10-15T21:39:36.250Z", "contributors": [ @@ -14072,12 +12083,6 @@ "mmc" ] }, - "Web/API/FileReader/中止事件(abort)": { - "modified": "2020-12-13T03:52:22.584Z", - "contributors": [ - "VacantHusky" - ] - }, "Web/API/FileReaderSync": { "modified": "2020-10-15T21:07:17.864Z", "contributors": [ @@ -14286,14 +12291,6 @@ "wth" ] }, - "Web/API/FormData/删除": { - "modified": "2020-10-15T21:48:28.738Z", - "contributors": [ - "RainSlide", - "stevobm", - "tomi-li" - ] - }, "Web/API/Frame_Timing_API": { "modified": "2020-03-18T00:42:57.197Z", "contributors": [ @@ -14319,13 +12316,6 @@ "codeofjackie" ] }, - "Web/API/Fullscreen_API/指南": { - "modified": "2020-10-15T22:14:45.841Z", - "contributors": [ - "Soyaine", - "wuzy_oye" - ] - }, "Web/API/GainNode": { "modified": "2020-10-15T21:47:52.341Z", "contributors": [ @@ -14413,19 +12403,6 @@ "ziyunfei" ] }, - "Web/API/Geolocation/Using_geolocation": { - "modified": "2019-07-01T03:42:53.000Z", - "contributors": [ - "aimilu", - "Syoogool", - "rongnianzu", - "rrandom", - "ziyunfei", - "Breezewish", - "shura-china", - "xcffl" - ] - }, "Web/API/Geolocation/clearWatch": { "modified": "2019-03-23T22:21:23.856Z", "contributors": [ @@ -14475,12 +12452,6 @@ "wangxb" ] }, - "Web/API/GeolocationPosition/获取该位置时的时间戳": { - "modified": "2020-10-15T22:32:25.842Z", - "contributors": [ - "liu-yanlong" - ] - }, "Web/API/GeolocationPositionError": { "modified": "2019-12-10T10:46:31.825Z", "contributors": [ @@ -14503,12 +12474,6 @@ "teoli" ] }, - "Web/API/GlobalEventHandlers/GlobalEventHanders.ontouchmove": { - "modified": "2019-03-23T22:38:32.324Z", - "contributors": [ - "zhangqiong" - ] - }, "Web/API/GlobalEventHandlers/onabort": { "modified": "2019-03-23T22:38:34.243Z", "contributors": [ @@ -14984,13 +12949,6 @@ "1Cr18Ni9" ] }, - "Web/API/GlobalEventHandlers/时长改变": { - "modified": "2020-10-15T22:21:15.042Z", - "contributors": [ - "suvyme", - "amehito" - ] - }, "Web/API/HTMLAnchorElement": { "modified": "2019-03-23T22:49:30.797Z", "contributors": [ @@ -15007,12 +12965,6 @@ "JinRong.Yang" ] }, - "Web/API/HTMLAnchorElement/referrer": { - "modified": "2019-03-23T22:47:13.629Z", - "contributors": [ - "ziyunfei" - ] - }, "Web/API/HTMLAreaElement": { "modified": "2019-03-23T22:59:31.575Z", "contributors": [ @@ -15135,13 +13087,6 @@ "xrr2016" ] }, - "Web/API/HTMLCanvasElement/捕获流": { - "modified": "2020-03-01T21:28:17.989Z", - "contributors": [ - "jollybearchina", - "dxiaoqi" - ] - }, "Web/API/HTMLCollection": { "modified": "2019-03-18T21:11:26.633Z", "contributors": [ @@ -15250,14 +13195,6 @@ "Carllllo" ] }, - "Web/API/HTMLElement/blur": { - "modified": "2019-03-23T22:00:21.147Z", - "contributors": [ - "teoli", - "fscholz", - "ziyunfei" - ] - }, "Web/API/HTMLElement/click": { "modified": "2020-10-15T21:06:30.174Z", "contributors": [ @@ -15289,17 +13226,6 @@ "1Cr18Ni9" ] }, - "Web/API/HTMLElement/dataset": { - "modified": "2019-08-08T12:52:36.012Z", - "contributors": [ - "ilexwg", - "xgqfrms-GitHub", - "teoli", - "ziyunfei", - "ReyCG_sub", - "ReyCG" - ] - }, "Web/API/HTMLElement/dir": { "modified": "2019-03-24T00:16:19.875Z", "contributors": [ @@ -15311,16 +13237,6 @@ "Dewang" ] }, - "Web/API/HTMLElement/focus": { - "modified": "2020-10-15T21:06:47.253Z", - "contributors": [ - "RainSlide", - "slimeball", - "teoli", - "khalid32", - "ziyunfei" - ] - }, "Web/API/HTMLElement/forceSpellCheck": { "modified": "2019-03-18T21:38:32.415Z", "contributors": [ @@ -15349,13 +13265,6 @@ "AlexChao" ] }, - "Web/API/HTMLElement/nonce": { - "modified": "2020-12-05T03:41:17.381Z", - "contributors": [ - "hufeicom", - "chenqingyue" - ] - }, "Web/API/HTMLElement/offsetHeight": { "modified": "2020-10-15T21:33:02.404Z", "contributors": [ @@ -15464,25 +13373,6 @@ "14725" ] }, - "Web/API/HTMLElement/style": { - "modified": "2020-10-15T21:30:08.559Z", - "contributors": [ - "zhuangyin", - "xgqfrms-GitHub", - "distums", - "teoli", - "AlexChao" - ] - }, - "Web/API/HTMLElement/tabIndex": { - "modified": "2019-03-24T00:16:26.046Z", - "contributors": [ - "teoli", - "Hasilt", - "sleepholic", - "ziyunfei" - ] - }, "Web/API/HTMLElement/title": { "modified": "2020-01-21T18:29:28.077Z", "contributors": [ @@ -15681,14 +13571,6 @@ "yingying1957" ] }, - "Web/API/HTMLInputElement/mozSetFileNameArray": { - "modified": "2019-03-23T23:32:37.731Z", - "contributors": [ - "teoli", - "basemnassar11", - "ziyunfei" - ] - }, "Web/API/HTMLInputElement/multiple": { "modified": "2020-10-15T22:22:05.182Z", "contributors": [ @@ -16957,12 +14839,6 @@ "xrr2016" ] }, - "Web/API/Intersection_Observer_API/点观察者API的时序元素可见性": { - "modified": "2019-03-23T22:11:40.163Z", - "contributors": [ - "xgqfrms-GitHub" - ] - }, "Web/API/Keyboard": { "modified": "2020-10-15T22:23:40.344Z", "contributors": [ @@ -17190,12 +15066,6 @@ "tlos142857" ] }, - "Web/API/MSSelection": { - "modified": "2020-02-27T01:47:20.687Z", - "contributors": [ - "MCCF" - ] - }, "Web/API/MathMLElement": { "modified": "2020-10-15T22:28:40.535Z", "contributors": [ @@ -17412,12 +15282,6 @@ "luojia" ] }, - "Web/API/MediaStream.addTrack": { - "modified": "2019-03-23T22:37:09.665Z", - "contributors": [ - "w05163" - ] - }, "Web/API/MediaStream/MediaStream": { "modified": "2020-10-15T22:22:53.267Z", "contributors": [ @@ -17885,12 +15749,6 @@ "Visper" ] }, - "Web/API/NameList": { - "modified": "2019-03-23T22:46:53.836Z", - "contributors": [ - "MeCKodo" - ] - }, "Web/API/NamedNodeMap": { "modified": "2019-03-23T23:03:50.009Z", "contributors": [ @@ -18193,12 +16051,6 @@ "udo-china" ] }, - "Web/API/NavigatorGeolocation": { - "modified": "2019-03-23T23:01:18.415Z", - "contributors": [ - "teoli" - ] - }, "Web/API/NavigatorID": { "modified": "2019-03-23T23:10:30.690Z", "contributors": [ @@ -18342,12 +16194,6 @@ "ziyunfei" ] }, - "Web/API/NavigatorPlugins/测试滕盖": { - "modified": "2019-03-23T22:49:37.647Z", - "contributors": [ - "ChenChenJoke" - ] - }, "Web/API/NavigatorStorage": { "modified": "2020-10-15T22:06:22.408Z", "contributors": [ @@ -18440,14 +16286,6 @@ "ziyunfei" ] }, - "Web/API/Node/baseURIObject": { - "modified": "2019-03-24T00:17:51.751Z", - "contributors": [ - "teoli", - "khalid32", - "ziyunfei" - ] - }, "Web/API/Node/childNodes": { "modified": "2019-03-24T00:16:20.224Z", "contributors": [ @@ -18531,16 +16369,6 @@ "Xiaobian" ] }, - "Web/API/Node/innerText": { - "modified": "2020-10-15T21:50:36.703Z", - "contributors": [ - "wuyou", - "RainSlide", - "keifergu", - "xgqfrms-GitHub", - "Aolose" - ] - }, "Web/API/Node/insertBefore": { "modified": "2020-10-15T21:22:01.727Z", "contributors": [ @@ -18660,14 +16488,6 @@ "ziyunfei" ] }, - "Web/API/Node/nodePrincipal": { - "modified": "2019-03-23T23:09:34.131Z", - "contributors": [ - "teoli", - "ziyunfei", - "AlexChao" - ] - }, "Web/API/Node/nodeType": { "modified": "2019-10-05T15:43:35.594Z", "contributors": [ @@ -18704,12 +16524,6 @@ "ziyunfei" ] }, - "Web/API/Node/outerText": { - "modified": "2019-01-17T00:59:24.641Z", - "contributors": [ - "xgqfrms-GitHub" - ] - }, "Web/API/Node/ownerDocument": { "modified": "2019-03-24T00:17:19.313Z", "contributors": [ @@ -18780,13 +16594,6 @@ "ziyunfei" ] }, - "Web/API/Node/rootNode": { - "modified": "2019-03-18T21:40:49.635Z", - "contributors": [ - "wbamberg", - "LoveofRedMoon" - ] - }, "Web/API/Node/setUserData": { "modified": "2019-03-23T23:09:32.465Z", "contributors": [ @@ -18962,13 +16769,6 @@ "micblo" ] }, - "Web/API/OfflineAudioContext/complete": { - "modified": "2020-10-15T22:17:22.684Z", - "contributors": [ - "ewfian", - "ljx23136138" - ] - }, "Web/API/OfflineAudioContext/length": { "modified": "2019-03-23T22:13:45.696Z", "contributors": [ @@ -19319,12 +17119,6 @@ "dblate" ] }, - "Web/API/Performance/内存": { - "modified": "2020-10-15T22:29:17.983Z", - "contributors": [ - "biqing" - ] - }, "Web/API/PerformanceEntry": { "modified": "2020-10-15T21:53:01.540Z", "contributors": [ @@ -19747,14 +17541,6 @@ "BettyCHEN" ] }, - "Web/API/Push_API/Using_the_Push_API": { - "modified": "2019-03-23T22:26:22.995Z", - "contributors": [ - "vankai", - "xgqfrms-GitHub", - "hibernake" - ] - }, "Web/API/RTCConfiguration": { "modified": "2019-03-23T22:18:59.231Z", "contributors": [ @@ -19962,20 +17748,6 @@ "rmamy" ] }, - "Web/API/RandomSource": { - "modified": "2019-03-23T22:14:07.005Z", - "contributors": [ - "micblo" - ] - }, - "Web/API/RandomSource/getRandomValues": { - "modified": "2020-10-15T21:53:31.704Z", - "contributors": [ - "RainSlide", - "ywjco", - "micblo" - ] - }, "Web/API/Range": { "modified": "2020-10-15T21:14:38.719Z", "contributors": [ @@ -20410,13 +18182,6 @@ "wl237292950" ] }, - "Web/API/Response/克隆": { - "modified": "2019-03-23T22:03:57.353Z", - "contributors": [ - "Ende93", - "xiaoxiaojx" - ] - }, "Web/API/SVGAElement": { "modified": "2019-09-09T08:02:49.792Z", "contributors": [ @@ -20610,13 +18375,6 @@ "Sheppy" ] }, - "Web/API/Screen_Capture_API/使用屏幕捕获API": { - "modified": "2020-09-27T04:18:52.593Z", - "contributors": [ - "Bigsomg", - "hzy" - ] - }, "Web/API/ScriptProcessorNode": { "modified": "2019-03-23T22:12:23.715Z", "contributors": [ @@ -20805,12 +18563,6 @@ "yuhengliang" ] }, - "Web/API/Selection/从Document中删除": { - "modified": "2019-03-23T22:25:17.531Z", - "contributors": [ - "FormatFa" - ] - }, "Web/API/Sensor_APIs": { "modified": "2020-10-15T22:11:34.758Z", "contributors": [ @@ -21002,12 +18754,6 @@ "Katherina-Miao" ] }, - "Web/API/Slotable": { - "modified": "2020-10-15T22:26:24.148Z", - "contributors": [ - "RainSlide" - ] - }, "Web/API/SourceBuffer": { "modified": "2020-10-15T22:20:48.679Z" }, @@ -21101,18 +18847,6 @@ "ThijsK" ] }, - "Web/API/Storage/LocalStorage": { - "modified": "2019-03-23T22:25:01.381Z", - "contributors": [ - "CuriosityLxn", - "jaiJia", - "lightning-zgc", - "kankk", - "tabooc", - "luneice", - "liuzeyafzy" - ] - }, "Web/API/Storage/clear": { "modified": "2019-03-23T22:58:05.467Z", "contributors": [ @@ -21209,18 +18943,6 @@ "jiangseventeen" ] }, - "Web/API/Streams_API/使用可读文件流": { - "modified": "2019-08-08T09:43:09.249Z", - "contributors": [ - "qushuangru" - ] - }, - "Web/API/Streams_API/概念": { - "modified": "2020-10-27T00:49:21.364Z", - "contributors": [ - "xyzingh" - ] - }, "Web/API/StylePropertyMap": { "modified": "2020-10-15T22:12:27.758Z", "contributors": [ @@ -21408,12 +19130,6 @@ "MCCF" ] }, - "Web/API/TextRange/text": { - "modified": "2020-02-26T01:25:35.461Z", - "contributors": [ - "MCCF" - ] - }, "Web/API/TimeRanges": { "modified": "2019-03-18T21:37:59.069Z", "contributors": [ @@ -21729,12 +19445,6 @@ "khalid32" ] }, - "Web/API/UIEvent/视图": { - "modified": "2020-10-15T22:25:09.871Z", - "contributors": [ - "pans9" - ] - }, "Web/API/URL": { "modified": "2020-10-15T21:33:08.666Z", "contributors": [ @@ -21873,14 +19583,6 @@ "gongshun" ] }, - "Web/API/URL/密码": { - "modified": "2020-10-15T22:20:32.740Z", - "contributors": [ - "zhangchen", - "jessieic", - "jinjin" - ] - }, "Web/API/URLSearchParams": { "modified": "2020-10-15T21:31:23.789Z", "contributors": [ @@ -21973,64 +19675,6 @@ "Heptagonnnn" ] }, - "Web/API/URLUtils": { - "modified": "2020-10-15T21:33:08.803Z", - "contributors": [ - "RainSlide", - "AyAmeng", - "teoli" - ] - }, - "Web/API/URLUtils/hash": { - "modified": "2020-02-24T00:59:03.514Z", - "contributors": [ - "ikomom", - "xgqfrms-GitHub" - ] - }, - "Web/API/URLUtils/href": { - "modified": "2019-03-23T22:13:56.960Z", - "contributors": [ - "xgqfrms-GitHub" - ] - }, - "Web/API/URLUtils/origin": { - "modified": "2019-03-23T22:12:28.154Z", - "contributors": [ - "xgqfrms-GitHub" - ] - }, - "Web/API/URLUtils/password": { - "modified": "2019-03-23T22:12:38.210Z", - "contributors": [ - "xgqfrms-GitHub" - ] - }, - "Web/API/URLUtils/pathname": { - "modified": "2019-03-23T22:12:27.883Z", - "contributors": [ - "xgqfrms-GitHub" - ] - }, - "Web/API/URLUtils/search": { - "modified": "2019-03-23T22:16:26.271Z", - "contributors": [ - "xgqfrms-GitHub", - "kameii" - ] - }, - "Web/API/URLUtils/toString": { - "modified": "2019-03-23T22:13:59.877Z", - "contributors": [ - "xgqfrms-GitHub" - ] - }, - "Web/API/URLUtils/username": { - "modified": "2019-03-23T22:12:31.600Z", - "contributors": [ - "xgqfrms-GitHub" - ] - }, "Web/API/URL_API": { "modified": "2020-10-15T22:31:18.077Z", "contributors": [ @@ -22795,12 +20439,6 @@ "shenwenkai" ] }, - "Web/API/WebGLRenderingContext/多边形偏移(polygonOffset)": { - "modified": "2020-10-15T22:09:39.645Z", - "contributors": [ - "ZhaoYaoSheng" - ] - }, "Web/API/WebGLSampler": { "modified": "2020-10-15T22:13:50.281Z", "contributors": [ @@ -23144,14 +20782,6 @@ "ziyunfei" ] }, - "Web/API/WebRTC_API/Architecture": { - "modified": "2020-04-24T05:54:00.386Z", - "contributors": [ - "xgqfrms", - "ziyunfei", - "SparrowLiu" - ] - }, "Web/API/WebRTC_API/Connectivity": { "modified": "2020-07-13T03:42:02.521Z", "contributors": [ @@ -23160,12 +20790,6 @@ "Move" ] }, - "Web/API/WebRTC_API/Overview": { - "modified": "2019-03-23T22:45:00.042Z", - "contributors": [ - "Ling.kevin" - ] - }, "Web/API/WebRTC_API/Protocols": { "modified": "2020-04-24T06:06:42.725Z", "contributors": [ @@ -23204,14 +20828,6 @@ "Move" ] }, - "Web/API/WebRTC_API/WebRTC_basics": { - "modified": "2019-09-24T02:45:56.457Z", - "contributors": [ - "lixl", - "huangcheng", - "SparrowLiu" - ] - }, "Web/API/WebRTC_API/adapter.js": { "modified": "2020-04-17T09:34:28.178Z", "contributors": [ @@ -23356,13 +20972,6 @@ "HIKALU-Z" ] }, - "Web/API/WebSocket/二进制类型": { - "modified": "2020-10-15T22:11:38.195Z", - "contributors": [ - "snowwolfjay", - "jaredhan418" - ] - }, "Web/API/WebSockets_API": { "modified": "2019-03-23T22:06:25.324Z", "contributors": [ @@ -23372,12 +20981,6 @@ "luojia" ] }, - "Web/API/WebSockets_API/WebSocket_Server_Vb.NET": { - "modified": "2019-03-18T21:29:02.340Z", - "contributors": [ - "xiaoyixiang" - ] - }, "Web/API/WebSockets_API/Writing_WebSocket_client_applications": { "modified": "2019-03-23T22:05:13.416Z", "contributors": [ @@ -23547,12 +21150,6 @@ "smilewalker" ] }, - "Web/API/Web_Audio_API/最佳实践": { - "modified": "2020-04-13T06:14:13.545Z", - "contributors": [ - "KotoriK" - ] - }, "Web/API/Web_Authentication_API": { "modified": "2020-03-16T06:43:10.491Z", "contributors": [ @@ -23723,19 +21320,6 @@ "Langdom" ] }, - "Web/API/Window/URL": { - "modified": "2019-03-23T22:22:37.359Z", - "contributors": [ - "xgqfrms-GitHub", - "Boring" - ] - }, - "Web/API/Window/Window.blur()": { - "modified": "2019-03-23T22:13:16.814Z", - "contributors": [ - "Toxni" - ] - }, "Web/API/Window/alert": { "modified": "2019-03-30T09:23:53.924Z", "contributors": [ @@ -23792,17 +21376,6 @@ "movinghorse" ] }, - "Web/API/Window/clearInterval": { - "modified": "2020-10-15T21:21:33.193Z", - "contributors": [ - "RainCruise", - "RainSlide", - "luojia", - "teoli", - "khalid32", - "ziyunfei" - ] - }, "Web/API/Window/close": { "modified": "2020-10-15T21:06:33.538Z", "contributors": [ @@ -24006,12 +21579,6 @@ "libin2866" ] }, - "Web/API/Window/getAttention": { - "modified": "2020-10-15T22:21:28.407Z", - "contributors": [ - "luoxue-victor" - ] - }, "Web/API/Window/getComputedStyle": { "modified": "2020-10-15T21:29:18.864Z", "contributors": [ @@ -24251,18 +21818,6 @@ "xgqfrms-GitHub" ] }, - "Web/API/Window/onbeforeunload": { - "modified": "2019-05-09T03:05:32.709Z", - "contributors": [ - "johnlin0207", - "Etoile984816138", - "1Cr18Ni9", - "teoli", - "khalid32", - "ziyunfei", - "WenbingZheng" - ] - }, "Web/API/Window/ondevicelight": { "modified": "2019-03-18T21:46:43.834Z", "contributors": [ @@ -24312,18 +21867,6 @@ "AWhiteMouse" ] }, - "Web/API/Window/onhashchange": { - "modified": "2020-10-15T21:06:52.013Z", - "contributors": [ - "Arnie97", - "xgqfrms-GitHub", - "Ende93", - "vuji", - "teoli", - "khalid32", - "ziyunfei" - ] - }, "Web/API/Window/online_event": { "modified": "2019-04-18T11:22:47.220Z", "contributors": [ @@ -24333,14 +21876,6 @@ "getfile" ] }, - "Web/API/Window/onmouseup": { - "modified": "2019-03-24T00:16:16.641Z", - "contributors": [ - "teoli", - "khalid32", - "ziyunfei" - ] - }, "Web/API/Window/onmozbeforepaint": { "modified": "2019-03-18T21:35:53.123Z", "contributors": [ @@ -24353,38 +21888,6 @@ "JARROWXU" ] }, - "Web/API/Window/onpopstate": { - "modified": "2020-10-15T21:07:15.381Z", - "contributors": [ - "SUCHMOKUO", - "wuyou", - "ReedSun", - "wenshin", - "xiaomingming", - "vose2008", - "teoli", - "Hasilt", - "ziyunfei" - ] - }, - "Web/API/Window/onscroll": { - "modified": "2019-03-24T00:15:58.211Z", - "contributors": [ - "teoli", - "khalid32", - "ziyunfei" - ] - }, - "Web/API/Window/onunload": { - "modified": "2020-10-23T06:31:44.836Z", - "contributors": [ - "liguorain", - "lon", - "teoli", - "AshfaqHossain", - "ziyunfei" - ] - }, "Web/API/Window/onuserproximity": { "modified": "2020-10-15T22:25:33.168Z", "contributors": [ @@ -24638,12 +22141,6 @@ "zhangqiong" ] }, - "Web/API/Window/restore": { - "modified": "2020-10-15T22:06:41.722Z", - "contributors": [ - "Bayes" - ] - }, "Web/API/Window/screen": { "modified": "2019-03-18T21:16:53.760Z", "contributors": [ @@ -24798,62 +22295,6 @@ "ziyunfei" ] }, - "Web/API/Window/setInterval": { - "modified": "2020-11-25T18:16:55.949Z", - "contributors": [ - "RayTang-hub", - "cellinlab", - "Jiangmenghao", - "TXYjing", - "Soul", - "fengbin", - "RainSlide", - "brandonhyc", - "xgqfrms-GitHub", - "shery", - "xgqfrms", - "teoli", - "khalid32", - "ziyunfei", - "sonicview" - ] - }, - "Web/API/Window/setTimeout": { - "modified": "2020-10-15T21:19:52.746Z", - "contributors": [ - "SnowGojira", - "iyow", - "johnao", - "chrisdavidmills", - "csga31971", - "baijingfeng", - "Reci-z", - "horrylala", - "Adashuai5", - "LilyWakana", - "Mars687", - "pinpinye", - "Lby876176278", - "Chancefeng", - "fscholz", - "xiazhe", - "Frorice", - "yhtml5", - "righttoe", - "Toxni", - "piemonSong", - "xgqfrms-GitHub", - "heke2929", - "SnowOnion", - "Chimen", - "hbkdsm", - "paddingme", - "teoli", - "khalid32", - "Meteormatt", - "ziyunfei" - ] - }, "Web/API/Window/showModalDialog": { "modified": "2019-07-21T23:38:59.262Z", "contributors": [ @@ -24925,46 +22366,6 @@ "lovue" ] }, - "Web/API/WindowBase64/Base64_encoding_and_decoding": { - "modified": "2020-09-03T07:22:36.242Z", - "contributors": [ - "WangXBruc", - "waitingsong", - "RainSlide", - "luojia", - "fghpdf", - "ahcheqiu" - ] - }, - "Web/API/WindowBase64/atob": { - "modified": "2020-10-15T21:07:00.713Z", - "contributors": [ - "RainSlide", - "zhangchen", - "nkliyc", - "dingyanhe", - "xgqfrms-GitHub", - "ziyunfei", - "happyWang", - "teoli", - "khalid32" - ] - }, - "Web/API/WindowBase64/btoa": { - "modified": "2020-10-15T21:06:58.236Z", - "contributors": [ - "RainSlide", - "zhangchen", - "RoXoM", - "Carrotzpc", - "dingyanhe", - "xgqfrms-GitHub", - "ziyunfei", - "teoli", - "khalid32", - "cuixiping" - ] - }, "Web/API/WindowClient": { "modified": "2019-03-23T22:11:45.641Z", "contributors": [ @@ -25092,15 +22493,6 @@ "RainSlide" ] }, - "Web/API/WindowTimers/clearTimeout": { - "modified": "2020-06-09T04:49:33.480Z", - "contributors": [ - "Humilitas", - "zhangchen", - "luojia", - "paddingme" - ] - }, "Web/API/Worker": { "modified": "2020-10-15T21:22:11.206Z", "contributors": [ @@ -25630,40 +23022,6 @@ "kuugua" ] }, - "Web/API/event.altKey": { - "modified": "2019-03-24T00:16:10.184Z", - "contributors": [ - "ziyunfei", - "teoli", - "jsx" - ] - }, - "Web/API/event.button": { - "modified": "2019-03-24T00:18:20.119Z", - "contributors": [ - "ziyunfei", - "teoli", - "AshfaqHossain" - ] - }, - "Web/API/event.relatedTarget": { - "modified": "2019-03-23T23:09:12.340Z", - "contributors": [ - "wbamberg", - "zhangqiong", - "ziyunfei", - "teoli", - "Darrel.Hsu" - ] - }, - "Web/API/event.shiftKey": { - "modified": "2019-03-24T00:16:22.591Z", - "contributors": [ - "ziyunfei", - "teoli", - "khalid32" - ] - }, "Web/API/notification": { "modified": "2020-09-28T00:03:47.900Z", "contributors": [ @@ -25685,16 +23043,6 @@ "fengwuxin" ] }, - "Web/API/notification/Using_Web_Notifications": { - "modified": "2020-03-18T06:57:06.393Z", - "contributors": [ - "wangyb1026", - "Yifang-Tongxing", - "845056166", - "xgqfrms-GitHub", - "Hawkeyes_Wind" - ] - }, "Web/API/notification/actions": { "modified": "2019-03-23T22:09:42.603Z", "contributors": [ @@ -25797,43 +23145,6 @@ "BSPR0002" ] }, - "Web/API/notification/sound": { - "modified": "2019-03-18T21:17:44.470Z", - "contributors": [ - "ZZES_REN" - ] - }, - "Web/API/指数": { - "modified": "2020-09-07T03:42:22.980Z", - "contributors": [ - "SphinxKnight", - "hl7514576" - ] - }, - "Web/API/支付_请求_接口": { - "modified": "2020-10-15T22:21:11.974Z", - "contributors": [ - "CapriceLi" - ] - }, - "Web/API/支付_请求_接口/Concepts": { - "modified": "2019-07-19T05:54:54.946Z", - "contributors": [ - "CapriceLi" - ] - }, - "Web/API/语音识别": { - "modified": "2020-10-15T22:15:39.263Z", - "contributors": [ - "burt1025lzz" - ] - }, - "Web/API/语音识别/result_event": { - "modified": "2020-10-15T22:28:01.971Z", - "contributors": [ - "coock1996" - ] - }, "Web/Accessibility": { "modified": "2020-08-04T10:11:09.882Z", "contributors": [ @@ -25896,19 +23207,6 @@ "ldwformat" ] }, - "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role": { - "modified": "2019-03-23T22:05:01.811Z", - "contributors": [ - "TiaossuP" - ] - }, - "Web/Accessibility/ARIA/ARIA_Techniques/使用aria-hidden属性": { - "modified": "2019-10-31T22:25:58.797Z", - "contributors": [ - "YoMiao", - "civerzhang" - ] - }, "Web/Accessibility/ARIA/forms": { "modified": "2019-03-23T22:16:33.505Z", "contributors": [ @@ -25941,12 +23239,6 @@ "hbwhzk" ] }, - "Web/Accessibility/Web_Development": { - "modified": "2019-03-23T22:29:25.203Z", - "contributors": [ - "qianzhangcheng" - ] - }, "Web/CSS": { "modified": "2020-12-02T23:03:48.358Z", "contributors": [ @@ -26122,13 +23414,6 @@ "LoveofRedMoon" ] }, - "Web/CSS/:-moz-placeholder": { - "modified": "2019-03-23T23:21:19.033Z", - "contributors": [ - "teoli", - "bowen-shi" - ] - }, "Web/CSS/:-moz-window-inactive": { "modified": "2019-03-18T21:33:22.659Z", "contributors": [ @@ -26137,14 +23422,6 @@ "apple1juice" ] }, - "Web/CSS/::-moz-placeholder": { - "modified": "2019-03-23T23:21:18.757Z", - "contributors": [ - "FrontENG", - "teoli", - "bowen-shi" - ] - }, "Web/CSS/::-moz-progress-bar": { "modified": "2020-07-10T07:07:20.466Z", "contributors": [ @@ -26332,15 +23609,6 @@ "psychebb" ] }, - "Web/CSS/:any": { - "modified": "2019-03-23T22:23:18.210Z", - "contributors": [ - "Minya_Chan", - "LinYunweb", - "shuihuo", - "tigercao" - ] - }, "Web/CSS/:any-link": { "modified": "2020-10-15T21:56:20.733Z", "contributors": [ @@ -26348,13 +23616,6 @@ "anjia" ] }, - "Web/CSS/:blank空白伪类": { - "modified": "2020-10-15T22:21:57.411Z", - "contributors": [ - "RainSlide", - "karma2014" - ] - }, "Web/CSS/:checked": { "modified": "2020-10-15T21:42:35.145Z", "contributors": [ @@ -27028,41 +24289,6 @@ "cvrebert" ] }, - "Web/CSS/@viewport/height": { - "modified": "2020-11-27T23:49:12.467Z", - "contributors": [ - "xusy" - ] - }, - "Web/CSS/@viewport/orientation": { - "modified": "2019-03-23T22:28:00.871Z", - "contributors": [ - "Minya_Chan" - ] - }, - "Web/CSS/@viewport/viewport-fit": { - "modified": "2020-10-15T22:19:15.758Z", - "contributors": [ - "PYGC", - "gzbitzxx", - "zhangchen", - "x1aodingdang" - ] - }, - "Web/CSS/@viewport/width": { - "modified": "2019-10-22T01:59:54.524Z", - "contributors": [ - "Zhang-Junzhi", - "xpromise" - ] - }, - "Web/CSS/@viewport/zoom": { - "modified": "2020-10-15T21:50:31.298Z", - "contributors": [ - "zhangchen", - "azhi09" - ] - }, "Web/CSS/Adjacent_sibling_combinator": { "modified": "2020-10-15T21:22:13.249Z", "contributors": [ @@ -27077,22 +24303,6 @@ "alimon" ] }, - "Web/CSS/All_About_The_Containing_Block": { - "modified": "2020-10-09T00:31:23.855Z", - "contributors": [ - "Chellyyy", - "Young-Spark", - "laizenan", - "alattalatta", - "thxiami", - "studyMakesMeHappy", - "peppermintCode", - "tolerious", - "hehex9", - "littlelake", - "ucev" - ] - }, "Web/CSS/Alternative_style_sheets": { "modified": "2020-10-15T22:30:11.278Z", "contributors": [ @@ -27133,12 +24343,6 @@ "Pada" ] }, - "Web/CSS/CSSOM_View/坐标系": { - "modified": "2019-03-18T21:28:19.895Z", - "contributors": [ - "1Cr18Ni9" - ] - }, "Web/CSS/CSS_Animations": { "modified": "2020-10-15T21:40:13.943Z", "contributors": [ @@ -27176,13 +24380,6 @@ "hutuxu" ] }, - "Web/CSS/CSS_Background_and_Borders": { - "modified": "2019-03-23T22:45:29.966Z", - "contributors": [ - "FrontENG", - "teoli" - ] - }, "Web/CSS/CSS_Background_and_Borders/Border-image_generator": { "modified": "2019-03-18T21:15:13.389Z", "contributors": [ @@ -27190,22 +24387,6 @@ "yellowstar1992" ] }, - "Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds": { - "modified": "2019-03-23T23:28:25.343Z", - "contributors": [ - "imwangpan", - "teoli", - "Nightingale" - ] - }, - "Web/CSS/CSS_Background_and_Borders/圆角边框发生器": { - "modified": "2019-03-23T22:42:48.406Z", - "contributors": [ - "FrontENG", - "beyoursun", - "regiondavid" - ] - }, "Web/CSS/CSS_Backgrounds_and_Borders": { "modified": "2019-03-18T21:45:20.317Z", "contributors": [ @@ -27214,12 +24395,6 @@ "Sheppy" ] }, - "Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images": { - "modified": "2019-03-18T21:38:07.175Z", - "contributors": [ - "Aaron_Zhung" - ] - }, "Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds": { "modified": "2019-03-18T21:45:25.619Z", "contributors": [ @@ -27255,14 +24430,6 @@ "ziyunfei" ] }, - "Web/CSS/CSS_Box_Model/Box-shadow_generator": { - "modified": "2019-03-18T20:43:42.671Z", - "contributors": [ - "BychekRU", - "TiaossuP", - "charlie" - ] - }, "Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model": { "modified": "2019-10-01T21:50:12.174Z", "contributors": [ @@ -27315,13 +24482,6 @@ "xusy" ] }, - "Web/CSS/CSS_Colors": { - "modified": "2019-03-23T22:09:37.851Z", - "contributors": [ - "GHLandy", - "Krenair" - ] - }, "Web/CSS/CSS_Colors/Color_picker_tool": { "modified": "2019-09-28T22:09:24.320Z", "contributors": [ @@ -27438,17 +24598,6 @@ "helloyong" ] }, - "Web/CSS/CSS_Flexible_Box_Layout/Flexbox_的_向下_支持": { - "modified": "2020-02-11T09:41:01.217Z", - "contributors": [ - "knightyun", - "fanjianfeng1010", - "EndlessSong", - "minvedacat", - "Ran_Lyu", - "xieminjie" - ] - }, "Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items": { "modified": "2020-10-21T03:55:55.262Z", "contributors": [ @@ -27456,17 +24605,6 @@ "qwertty" ] }, - "Web/CSS/CSS_Flexible_Box_Layout/Mixins": { - "modified": "2019-03-23T22:33:55.727Z", - "contributors": [ - "chrisdavidmills", - "SmilyLiang", - "SolitudeRA", - "zhicongyang", - "xgqfrms", - "jiahui" - ] - }, "Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items": { "modified": "2020-10-15T23:39:20.262Z", "contributors": [ @@ -27475,59 +24613,6 @@ "youcanping" ] }, - "Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes": { - "modified": "2019-03-23T23:31:49.899Z", - "contributors": [ - "hanliuxin5", - "xgqfrms-GitHub", - "mogewcy", - "fedwatch", - "dongyu_-_", - "zrj570543941", - "TiaossuP", - "xgqfrms", - "WynnChen", - "jokeviner", - "fscholz", - "Huxpro", - "ziyunfei", - "yan", - "nighca", - "Kasuganosora", - "yisi", - "Ribery", - "TimZhao", - "Nightingale" - ] - }, - "Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications": { - "modified": "2019-03-23T22:27:26.278Z", - "contributors": [ - "Anshiii", - "SphinxKnight", - "lon", - "fscholz", - "lazurey" - ] - }, - "Web/CSS/CSS_Flexible_Box_Layout/典型_用例_的_Flexbox": { - "modified": "2020-06-21T23:26:55.230Z", - "contributors": [ - "cell", - "mileyho", - "xzhyj93", - "SkyeYoung", - "devindwan", - "xieminjie" - ] - }, - "Web/CSS/CSS_Flexible_Box_Layout/弹性盒子与其他布局方法的联系": { - "modified": "2020-07-03T00:45:14.544Z", - "contributors": [ - "jin_wang", - "Wulakaka" - ] - }, "Web/CSS/CSS_Flow_Layout": { "modified": "2019-03-18T20:48:13.355Z", "contributors": [ @@ -27565,15 +24650,6 @@ "xunzhonglee" ] }, - "Web/CSS/CSS_Flow_Layout/在Flow中和Flow之外": { - "modified": "2019-08-26T05:12:18.778Z", - "contributors": [ - "xuduotom", - "wython", - "kernellmd", - "feaswcy" - ] - }, "Web/CSS/CSS_Fonts": { "modified": "2019-03-23T22:13:50.386Z", "contributors": [ @@ -27660,12 +24736,6 @@ "comehope" ] }, - "Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes": { - "modified": "2019-03-18T21:44:18.420Z", - "contributors": [ - "comehope" - ] - }, "Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility": { "modified": "2019-09-04T22:47:22.673Z", "contributors": [ @@ -27715,14 +24785,6 @@ "ucev" ] }, - "Web/CSS/CSS_Grid_Layout/利用CSS网格布局实现常用布局": { - "modified": "2019-09-04T22:46:41.081Z", - "contributors": [ - "zhangchen", - "Juvon", - "SphinxKnight" - ] - }, "Web/CSS/CSS_Logical_Properties": { "modified": "2020-10-12T22:45:52.532Z", "contributors": [ @@ -27730,18 +24792,6 @@ "Ende93" ] }, - "Web/CSS/CSS_Logical_Properties/Basic_conceptsjie": { - "modified": "2019-03-28T00:11:41.934Z", - "contributors": [ - "Aamperor" - ] - }, - "Web/CSS/CSS_Logical_Properties/浮动和定位": { - "modified": "2020-12-09T23:54:16.957Z", - "contributors": [ - "bernie-ning" - ] - }, "Web/CSS/CSS_Masking": { "modified": "2019-03-18T21:28:40.615Z", "contributors": [ @@ -27789,12 +24839,6 @@ "wy-ei" ] }, - "Web/CSS/CSS_Selectors/Comparison_with_XPath": { - "modified": "2019-03-18T21:23:06.866Z", - "contributors": [ - "zhanghengxin" - ] - }, "Web/CSS/CSS_Shapes": { "modified": "2019-07-30T22:05:51.456Z", "contributors": [ @@ -27914,12 +24958,6 @@ "feiwen8772" ] }, - "Web/CSS/CSS_分片": { - "modified": "2019-12-03T13:06:14.108Z", - "contributors": [ - "pans9" - ] - }, "Web/CSS/Cascade": { "modified": "2020-04-12T01:15:48.713Z", "contributors": [ @@ -27963,20 +25001,6 @@ "ziyunfei" ] }, - "Web/CSS/Common_CSS_Questions": { - "modified": "2020-07-16T22:25:46.153Z", - "contributors": [ - "Robinx", - "Jack-Q", - "ChenDong", - "DavidGuan", - "zd9027", - "xuxun", - "teoli", - "ziyunfei", - "xcffl" - ] - }, "Web/CSS/Descendant_combinator": { "modified": "2020-11-23T07:09:12.864Z", "contributors": [ @@ -28055,18 +25079,6 @@ "HareInWeed" ] }, - "Web/CSS/Layout_cookbook/卡片": { - "modified": "2020-10-15T22:28:29.154Z", - "contributors": [ - "fanyuedong" - ] - }, - "Web/CSS/Layout_cookbook/媒体对象": { - "modified": "2020-10-15T22:18:51.901Z", - "contributors": [ - "wre232114" - ] - }, "Web/CSS/Layout_mode": { "modified": "2019-03-23T22:27:53.945Z", "contributors": [ @@ -29441,14 +26453,6 @@ "teoli" ] }, - "Web/CSS/cursor/url": { - "modified": "2019-03-23T23:32:59.999Z", - "contributors": [ - "xgqfrms-GitHub", - "teoli", - "ziyunfei" - ] - }, "Web/CSS/custom-ident": { "modified": "2020-02-13T02:01:31.997Z", "contributors": [ @@ -31287,23 +28291,6 @@ "jason-guo" ] }, - "Web/CSS/timing-function": { - "modified": "2020-10-15T21:21:10.131Z", - "contributors": [ - "tzgong", - "WangYiCong", - "woshixixi", - "wqq1992324", - "zhangchen", - "Huahua-Chen", - "Sebastianz", - "jiahui", - "fscholz", - "cungen", - "teoli", - "ziyunfei" - ] - }, "Web/CSS/top": { "modified": "2020-10-15T21:37:12.500Z", "contributors": [ @@ -31626,12 +28613,6 @@ "LiNengNeng" ] }, - "Web/CSS/url": { - "modified": "2019-03-23T22:25:44.664Z", - "contributors": [ - "zhyupe" - ] - }, "Web/CSS/used_value": { "modified": "2019-03-23T23:29:45.690Z", "contributors": [ @@ -31768,20 +28749,6 @@ "sunorry" ] }, - "Web/CSS/word-wrap": { - "modified": "2020-10-15T21:32:14.809Z", - "contributors": [ - "litmonw", - "dlnb526", - "WangWenZhang", - "pengwenbin7", - "xgqfrms", - "SAWSAWSAW", - "fscholz", - "Sebastianz", - "paddingme" - ] - }, "Web/CSS/writing-mode": { "modified": "2020-10-15T22:00:00.250Z", "contributors": [ @@ -31812,38 +28779,6 @@ "TimZhao" ] }, - "Web/CSS/偏移": { - "modified": "2020-10-15T22:07:46.289Z", - "contributors": [ - "congyuandong", - "yichengxian" - ] - }, - "Web/CSS/媒体查询": { - "modified": "2020-10-15T21:56:18.732Z", - "contributors": [ - "RainSlide", - "zjffun", - "Charley-Hsu" - ] - }, - "Web/CSS/文本装饰线厚度(粗细)": { - "modified": "2020-10-15T22:25:42.153Z", - "contributors": [ - "tanapok", - "Zshining" - ] - }, - "Web/CSS/网格-模板-列": { - "modified": "2020-10-15T21:53:37.639Z", - "contributors": [ - "narol", - "RainSlide", - "tsukimiya", - "Xiao4", - "1986slayer" - ] - }, "Web/EXSLT": { "modified": "2019-01-16T21:33:48.141Z", "contributors": [ @@ -31884,18919 +28819,21984 @@ "louisremi" ] }, - "Web/Events/DOMContentLoaded": { - "modified": "2020-10-15T21:21:31.073Z", + "Web/Guide": { + "modified": "2020-09-13T04:05:26.959Z", "contributors": [ - "windybniw", - "shaw1121", - "knightyun", - "1v9", - "wbamberg", - "hhxxhg", - "274659281", - "fscholz", - "Niefee", - "xgqfrms-GitHub", - "BoatGina", - "broven", - "bambooom", - "ZivHe", - "ziyunfei", - "less", - "monjer", - "jtyjty99999" + "Futrime", + "Oliver_Queen", + "RainSlide", + "codekissyoung", + "jiahui", + "yuntian", + "Go7hic", + "Ende93", + "slzll", + "zengAlex", + "lunix01", + "markyun", + "wtb", + "Kasuganosora", + "ethertank" ] }, - "Web/Events/abort": { - "modified": "2019-04-30T14:23:21.618Z", + "Web/Guide/AJAX": { + "modified": "2020-08-06T07:28:20.783Z", "contributors": [ - "wbamberg", - "hhxxhg", - "fscholz", - "xgqfrms-GitHub", - "m2mbob" + "luojia", + "Yang-yibu", + "anchen", + "makaria", + "chunnallu", + "chrisdavidmills", + "renzhengyu", + "MMHGH", + "zjhch123", + "XiaoyaoChen", + "Noly1990" ] }, - "Web/Events/afterprint": { - "modified": "2020-10-15T21:52:37.979Z", + "Web/Guide/AJAX/Getting_Started": { + "modified": "2020-05-09T09:42:30.390Z", "contributors": [ - "weibangtuo", - "fscholz", - "xgqfrms-GitHub" + "Mookiepiece", + "JiLiangLai", + "HCSkatana", + "realchoi", + "Mew_MDN", + "SalmonDaze", + "zazaliu", + "chrisdavidmills", + "shifengchen", + "tangc1", + "RogerShen" ] }, - "Web/Events/afterscriptexecute": { - "modified": "2020-10-15T21:52:39.291Z", + "Web/Guide/API": { + "modified": "2019-03-23T23:17:06.067Z", "contributors": [ "RainSlide", - "fscholz", - "xgqfrms-GitHub" - ] - }, - "Web/Events/animationend": { - "modified": "2019-03-23T22:08:23.322Z", - "contributors": [ - "PaperFlu" - ] - }, - "Web/Events/animationstart": { - "modified": "2019-03-23T23:17:59.744Z", - "contributors": [ - "PaperFlu", - "fscholz", - "ziyunfei", - "shevche24" + "Sheppy" ] }, - "Web/Events/beforeprint": { - "modified": "2020-10-15T21:52:38.969Z", + "Web/Guide/Audio_and_video_delivery": { + "modified": "2020-07-13T02:25:56.180Z", "contributors": [ - "weibangtuo", - "fscholz", - "xgqfrms-GitHub" + "lizzxc", + "chrisdavidmills" ] }, - "Web/Events/beforescriptexecute": { - "modified": "2020-10-15T21:29:36.732Z", + "Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video": { + "modified": "2020-10-27T07:00:04.677Z", "contributors": [ - "RainSlide", - "fscholz", - "ziyunfei", - "LinusYu" + "ICLOUDIRIS", + "FranzList" ] }, - "Web/Events/beforeunload": { - "modified": "2020-10-15T21:34:03.122Z", + "Web/Guide/Audio_and_video_delivery/WebAudio_playbackRate_explained": { + "modified": "2019-03-18T20:51:41.158Z", "contributors": [ - "pe4ch", - "Carllllo", - "MikeLeon23", - "Junezm", - "xgqfrms", - "wbamberg", - "HereChen", - "luhaimin", - "sqchenxiyuan", - "tcatche", - "maxsky", - "Tienyz", - "monjer" + "chrisdavidmills", + "dandanbu3" ] }, - "Web/Events/blur": { - "modified": "2019-03-23T22:23:55.603Z", + "Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges": { + "modified": "2019-03-18T20:51:41.383Z", "contributors": [ - "hhxxhg", - "hyh19962008", - "fscholz", - "m2mbob" + "chrisdavidmills", + "zhangqiong" ] }, - "Web/Events/change": { - "modified": "2020-10-15T21:32:01.453Z", + "Web/Guide/CSS/Block_formatting_context": { + "modified": "2020-12-09T10:24:24.921Z", "contributors": [ - "ljdmailbox", - "Clarkkkk", - "LIXiangChen", - "fscholz", - "yangxiaoqiao", + "xmasuhai", + "SDUTWSL", + "Ninglo", + "MinimalistYing", + "shanyuhai123", + "ylc395", + "GlowMonster", + "SageX", + "dylanyg", + "xunzhonglee", + "wavesheep", + "Mookiepiece", + "awayjin", + "dongsuo", + "ju1234", + "maoyumaoxun", + "helloyong", + "Terry.Qiao", + "Akiq2016", + "luoway", + "lanyuechen", + "zerosrat", + "young122849", + "Programmox", + "herofei", "xgqfrms-GitHub", - "azhi09", + "XiongAmao", + "yisibl", + "Ende93", + "zengkan0703", + "TiaossuP", + "kevinfszu", + "FredWe", "ziyunfei", - "charlie" + "haofu", + "xmlovecss", + "teoli", + "yan" ] }, - "Web/Events/compositionend": { - "modified": "2019-04-30T13:56:51.967Z", + "Web/Guide/Events": { + "modified": "2019-03-23T23:20:12.541Z", "contributors": [ - "wbamberg", - "TreeVie", - "leehomeok" + "Imagine-Tom", + "tcatche", + "NoDocCat", + "Tankunpeng", + "Jeremie" ] }, - "Web/Events/compositionstart": { - "modified": "2020-10-15T21:43:38.190Z", + "Web/Guide/Events/Creating_and_triggering_events": { + "modified": "2020-05-27T10:29:01.846Z", "contributors": [ "Carllllo", - "wbamberg", - "superfighter", - "StaicCai", - "laobubu" + "xingleizhao", + "but0n", + "zhangchen", + "LuSitong", + "Iamxiaozhu", + "ucev", + "xgqfrms-GitHub", + "ZhengYinBo", + "carllx", + "timwangdev", + "FredWe", + "ReyCG_sub" ] }, - "Web/Events/compositionupdate": { - "modified": "2019-04-30T14:03:15.654Z", + "Web/Guide/Events/Event_handlers": { + "modified": "2019-03-23T23:20:11.825Z", "contributors": [ - "wbamberg", - "fscholz", - "laobubu" + "tcatche", + "Le-Fu", + "xgqfrms-GitHub", + "ziyunfei", + "Darrel.Hsu" ] }, - "Web/Events/copy": { - "modified": "2019-04-30T13:59:22.378Z", + "Web/Guide/Events/Media_events": { + "modified": "2020-07-02T07:14:48.714Z", "contributors": [ - "wbamberg", - "zhangchen", - "fscholz", - "inottn", - "maicss" + "9aoyang", + "haocity", + "TimRChen", + "maicss", + "GSBL", + "bizbin", + "esterTion", + "SudoKillMe", + "zilong-thu", + "ziyunfei", + "Anonymous" ] }, - "Web/Events/cut": { - "modified": "2019-04-30T14:14:11.414Z", + "Web/Guide/Events/Mutation_events": { + "modified": "2019-03-23T22:51:23.609Z", "contributors": [ - "wbamberg", - "chenyanfei-m" + "Pada", + "peonyriver", + "FredWe" ] }, - "Web/Events/error": { - "modified": "2020-10-15T21:34:06.283Z", + "Web/Guide/Events/Orientation_and_motion_data_explained": { + "modified": "2019-03-23T23:10:07.666Z", "contributors": [ - "pe4ch", - "liuruiqi1993", - "fscholz", - "Daqin", - "monjer" + "fancy" ] }, - "Web/Events/focus": { - "modified": "2019-03-31T11:52:42.546Z", + "Web/Guide/Events/Overview_of_Events_and_Handlers": { + "modified": "2019-03-23T22:51:31.630Z", "contributors": [ - "fscholz", - "VictorDu" + "Song2017", + "FredWe" ] }, - "Web/Events/focusout": { - "modified": "2019-03-23T22:15:46.626Z", + "Web/Guide/Graphics": { + "modified": "2020-12-07T03:47:26.253Z", "contributors": [ - "fscholz", - "liuhe" + "SphinxKnight", + "Vongola-czr", + "Mookiepiece", + "RainSlide", + "zhuangyin", + "ITxiaochong", + "pluwen", + "m4jing", + "jinger7281", + "wth", + "rockywen", + "ryerh", + "wanglingzhi", + "Kasuganosora", + "Hikerpig" ] }, - "Web/Events/icecandidate": { - "modified": "2020-02-07T11:21:30.934Z", + "Web/Guide/HTML/Content_categories": { + "modified": "2019-09-24T00:45:30.074Z", "contributors": [ - "zotille", - "wbamberg", - "BillgoXu" + "Metaloe", + "gnepnaiL-oahZ", + "unclesamnumberone", + "jizhi77", + "ZeroJsus", + "huozicheng", + "AllenYangFly", + "arya0822", + "kevinfszu", + "pantao", + "LuyaoWang", + "FredWe" ] }, - "Web/Events/input": { - "modified": "2020-10-15T21:30:28.054Z", + "Web/Guide/HTML/HTML5": { + "modified": "2019-04-29T21:49:51.078Z", "contributors": [ - "Carllllo", - "Freezer", - "chess99", - "shijistar", - "fscholz", + "vanpipy", + "mike-j", + "GameWang", + "fanerge", + "mfoonirlee", + "Summer1026", "xgqfrms-GitHub", - "laobubu", + "Go7hic", + "panhe-xue", + "ObooChin", + "kevinfszu", + "teoli", + "xgqfrms", + "fghycode", + "jasonworg", + "mengzyou", + "Breezewish", + "Jianming", "ziyunfei", - "lyklykkkkkkk" + "xuxun", + "TimZhao", + "sunnylost", + "xcffl", + "princetoad@gmail.com" ] }, - "Web/Events/load": { - "modified": "2020-10-15T21:36:32.271Z", + "Web/Guide/HTML/HTML5/Constraint_validation": { + "modified": "2020-08-07T06:53:08.941Z", "contributors": [ - "pe4ch", - "Mookiepiece", - "fscholz", - "xgqfrms-GitHub", - "kun.yan" + "Nierifeng", + "shiyi25928988", + "yongchen" ] }, - "Web/Events/loadend": { - "modified": "2019-03-23T22:16:58.948Z", + "Web/Guide/HTML/HTML5/Introduction_to_HTML5": { + "modified": "2019-03-24T00:12:23.341Z", "contributors": [ - "fscholz", - "wudexiang", - "xgqfrms-GitHub" + "eeeeeeeason", + "YueBiYang", + "008", + "guotingchaopr", + "ziyunfei", + "ibeen", + "gaoyanqi", + "leegorous" ] }, - "Web/Events/loadstart": { - "modified": "2019-03-23T22:29:32.098Z", + "Web/Guide/Localizations_and_character_encodings": { + "modified": "2020-05-07T10:52:56.537Z", "contributors": [ - "fscholz", - "faremax", - "Lxxyx" + "Ende93", + "91JOJO", + "xdsnet" ] }, - "Web/Events/message": { - "modified": "2020-10-15T21:57:50.780Z", + "Web/Guide/Mobile": { + "modified": "2019-03-23T23:20:37.061Z", "contributors": [ - "Spikef", - "wbamberg", - "Lim", - "CrystalY", - "Yongest", - "hellowrenfei" + "TaoWei", + "mywentu", + "peterwang1996", + "qry", + "liminjun", + "xbzhs", + "duan.xiaodong", + "wanglong", + "ziyunfei" ] }, - "Web/Events/mousewheel": { - "modified": "2019-03-18T21:09:07.563Z", + "Web/Guide/Parsing_and_serializing_XML": { + "modified": "2019-08-12T08:51:44.801Z", "contributors": [ - "fscholz", - "soYawn" + "RainSlide", + "haaling" ] }, - "Web/Events/pageshow": { - "modified": "2020-05-15T03:40:03.122Z", + "Web/Guide/Performance": { + "modified": "2020-10-09T03:08:14.338Z", "contributors": [ - "BluesVN", - "lalaemls", - "WangShaoyu1", - "fscholz", - "shm" + "kite-js", + "SphinxKnight", + "Imagine-Tom", + "yexk", + "leozhang", + "sunnylost", + "DAVINDAI", + "ziyunfei" ] }, - "Web/Events/paste": { - "modified": "2020-10-15T21:52:19.374Z", + "Web/HTML": { + "modified": "2020-05-18T02:45:10.401Z", "contributors": [ - "qiudongwei", - "wbamberg", - "maicss" + "SphinxKnight", + "MrWangYaNan", + "mkckr0", + "Mengli", + "853419196", + "xmcgcg", + "xq20160912", + "RainSlide", + "fanerge", + "abramsz", + "wangfy", + "fenyu", + "asthman666", + "mao001", + "vizardsLau", + "Planet6174", + "pluwen", + "ChangJun2018", + "robsean", + "ldwformat", + "xixilog", + "wh1msy", + "xx1124961758", + "little-love", + "Shadowhiker", + "Blink", + "ylws", + "liugev6", + "fygyx1", + "pkl6612", + "mona", + "PoppinL", + "ziyunfei", + "lunix01", + "Breezewish", + "xuxun", + "allan_simon", + "TimZhao", + "jessiecaisme", + "Futao.Gao" ] }, - "Web/Events/readystatechange事件": { - "modified": "2020-10-15T21:56:00.168Z", + "Web/HTML/Applying_color": { + "modified": "2020-07-22T05:27:42.410Z", "contributors": [ - "Carllllo", - "RainSlide", - "zhangchen", - "fscholz", - "abc45628" + "WinterCicada", + "Dorence" ] }, - "Web/Events/transitionend": { - "modified": "2019-11-15T05:44:51.899Z", + "Web/HTML/Attributes": { + "modified": "2020-08-28T22:38:07.073Z", "contributors": [ - "joshchiucn", - "fscholz", - "zhuangyin", - "SeriousL", - "dlengks", + "nodeZ", + "fygyx1", + "tys", + "Carllllo", + "MartinsYong", + "enoorez", + "yhs-APerson", + "yuehp", + "PoppinL", "ziyunfei", - "jtyjty99999" + "phoenixLU" ] }, - "Web/Events/unhandledrejection": { - "modified": "2020-10-15T22:03:35.162Z", + "Web/HTML/Block-level_elements": { + "modified": "2019-03-18T20:38:24.578Z", "contributors": [ - "xuquentinyang", - "liangbus", - "RainSlide", - "wbamberg", - "Lie8466", - "zhaoqize" + "kmc947373", + "CraigZeng", + "FredWe", + "Breezewish", + "teoli", + "ziyunfei", + "wdlth" ] }, - "Web/Events/unload": { - "modified": "2020-10-15T21:21:37.553Z", + "Web/HTML/CORS_enabled_image": { + "modified": "2020-05-06T06:27:48.960Z", "contributors": [ - "pe4ch", - "acelibin", - "fscholz", + "oxyg3n", + "guow10", + "PaulHan", + "wYhooo", "xgqfrms-GitHub", + "kmc947373", "ziyunfei", - "jtyjty99999" + "Breezewish" ] }, - "Web/Events/进度条": { - "modified": "2020-10-15T21:49:44.294Z", + "Web/HTML/Element": { + "modified": "2019-12-03T05:56:52.523Z", "contributors": [ + "RainSlide", + "eforegist", + "XiangHongAi", + "mdnjcc", + "hoyt", + "jian86392088", + "VdoG", + "ruilee16", + "jesse0x90", "Ende93", - "957398123", - "fscholz", - "roberthow", - "fengfu" + "Martin.Chow", + "Breezewish", + "ziyunfei", + "gqqnbig", + "jessiecaisme", + "xcffl", + "teoli", + "Cnmahj" ] }, - "Web/Guide": { - "modified": "2020-09-13T04:05:26.959Z", + "Web/HTML/Element/Heading_Elements": { + "modified": "2020-10-15T21:08:04.205Z", "contributors": [ - "Futrime", - "Oliver_Queen", + "gafish", + "imba-tjd", "RainSlide", - "codekissyoung", - "jiahui", - "yuntian", - "Go7hic", + "wizardforcel", + "HashubWang", + "venden", "Ende93", - "slzll", - "zengAlex", - "lunix01", - "markyun", - "wtb", - "Kasuganosora", - "ethertank" + "ziyunfei" ] }, - "Web/Guide/AJAX": { - "modified": "2020-08-06T07:28:20.783Z", + "Web/HTML/Element/Input": { + "modified": "2020-05-27T10:36:01.533Z", "contributors": [ - "luojia", - "Yang-yibu", - "anchen", - "makaria", - "chunnallu", - "chrisdavidmills", - "renzhengyu", - "MMHGH", - "zjhch123", - "XiaoyaoChen", - "Noly1990" + "Carllllo", + "Rem486", + "wxyads", + "853419196", + "JuliusKingsley", + "zhangchen", + "qihuanlu01", + "zaixuzheng", + "yangshang01", + "yuyx91", + "voidzhou", + "hebby", + "jiangseventeen", + "fsx950223", + "Tiaen", + "xgqfrms-GitHub", + "liaoyinglong", + "adam198824", + "liyongleihf2006", + "AutumnFish", + "luobotang", + "gqqnbig", + "Ivan_V", + "zilong-thu", + "Metalooze", + "tiansh", + "ziyunfei", + "rnoka" ] }, - "Web/Guide/AJAX/Getting_Started": { - "modified": "2020-05-09T09:42:30.390Z", + "Web/HTML/Element/Input/button": { + "modified": "2019-03-18T21:28:02.958Z", "contributors": [ - "Mookiepiece", - "JiLiangLai", - "HCSkatana", - "realchoi", - "Mew_MDN", - "SalmonDaze", - "zazaliu", - "chrisdavidmills", - "shifengchen", - "tangc1", - "RogerShen" + "zaixuzheng", + "bear-x" ] }, - "Web/Guide/API": { - "modified": "2019-03-23T23:17:06.067Z", + "Web/HTML/Element/Input/checkbox": { + "modified": "2019-07-01T05:04:47.435Z", "contributors": [ - "RainSlide", - "Sheppy" + "konrumi" ] }, - "Web/Guide/API/DOM": { - "modified": "2019-03-23T23:28:38.723Z", + "Web/HTML/Element/Input/color": { + "modified": "2019-03-23T22:16:45.281Z", "contributors": [ - "ziyunfei", - "paddingme", - "Carrott", - "Kasuganosora", - "Sheppy" + "ecnelises", + "litmonw", + "konrumi" ] }, - "Web/Guide/API/DOM/Storage": { - "modified": "2019-03-24T00:14:59.754Z", + "Web/HTML/Element/Input/date": { + "modified": "2019-03-23T22:01:59.059Z", "contributors": [ - "ziyunfei", - "celinestar", - "hutuxu", - "Sheppy", - "qiumaoyuan", - "aokihu", - "zhengzong.fu", - "Carrie zhxj" + "LeonH", + "WeiGrand", + "tangj1206" ] }, - "Web/Guide/API/DOM/The_structured_clone_algorithm": { - "modified": "2019-03-23T22:19:28.512Z", + "Web/HTML/Element/Input/datetime": { + "modified": "2019-07-13T11:00:17.487Z", + "contributors": [ + "853419196", + "wizardforcel" + ] + }, + "Web/HTML/Element/Input/datetime-local": { + "modified": "2020-10-24T12:05:38.587Z", "contributors": [ + "HermitSun", + "ThaddeusJiang", "zhangchen", - "xgqfrms-GitHub", - "kameii", - "liuqipeng417", - "FredWe" + "kite-js" ] }, - "Web/Guide/Audio_and_video_delivery": { - "modified": "2020-07-13T02:25:56.180Z", + "Web/HTML/Element/Input/email": { + "modified": "2020-10-15T22:07:09.640Z", "contributors": [ - "lizzxc", - "chrisdavidmills" + "Chattille", + "CiaoLee", + "zaixuzheng" ] }, - "Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video": { - "modified": "2020-10-27T07:00:04.677Z", + "Web/HTML/Element/Input/file": { + "modified": "2020-10-15T21:55:53.292Z", "contributors": [ - "ICLOUDIRIS", - "FranzList" + "mkckr0", + "DreamLxq", + "hehe1111", + "alfredchan3", + "zhangchen", + "vippiv", + "AmyFoxFN", + "YinlongCoding", + "chinafootballyu", + "zxc5800", + "wizardforcel", + "ezirmusitua" ] }, - "Web/Guide/Audio_and_video_delivery/WebAudio_playbackRate_explained": { - "modified": "2019-03-18T20:51:41.158Z", + "Web/HTML/Element/Input/hidden": { + "modified": "2020-10-15T22:15:28.120Z", "contributors": [ - "chrisdavidmills", - "dandanbu3" + "guow10", + "RainSlide" ] }, - "Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges": { - "modified": "2019-03-18T20:51:41.383Z", + "Web/HTML/Element/Input/image": { + "modified": "2020-10-15T21:49:38.681Z", "contributors": [ - "chrisdavidmills", - "zhangqiong" + "SphinxKnight", + "Henry", + "yu.xcode", + "MissingDreamland" ] }, - "Web/Guide/CSS/Block_formatting_context": { - "modified": "2020-12-09T10:24:24.921Z", + "Web/HTML/Element/Input/number": { + "modified": "2019-03-23T22:10:11.887Z", "contributors": [ - "xmasuhai", - "SDUTWSL", - "Ninglo", - "MinimalistYing", - "shanyuhai123", - "ylc395", - "GlowMonster", - "SageX", - "dylanyg", - "xunzhonglee", - "wavesheep", - "Mookiepiece", - "awayjin", - "dongsuo", - "ju1234", - "maoyumaoxun", - "helloyong", - "Terry.Qiao", - "Akiq2016", - "luoway", - "lanyuechen", - "zerosrat", - "young122849", - "Programmox", - "herofei", - "xgqfrms-GitHub", - "XiongAmao", - "yisibl", + "zxsunrise", + "XXXS", + "hmzll", "Ende93", - "zengkan0703", - "TiaossuP", - "kevinfszu", - "FredWe", - "ziyunfei", - "haofu", - "xmlovecss", - "teoli", - "yan" + "xgqfrms-GitHub" ] }, - "Web/Guide/CSS/CSS_Image_Sprites": { - "modified": "2019-03-23T23:22:22.347Z", + "Web/HTML/Element/Input/password": { + "modified": "2020-10-15T22:06:31.185Z", "contributors": [ - "RainSlide", - "ReyCG_sub", - "bingguo", - "Wenbin" + "byouw", + "zaixuzheng" ] }, - "Web/Guide/CSS/CSS基础": { - "modified": "2019-03-18T20:41:49.035Z", + "Web/HTML/Element/Input/radio": { + "modified": "2020-10-15T21:55:25.436Z", "contributors": [ - "fscholz", - "Go7hic", - "Mrzzchao" + "luohuayouyi12138", + "LeonZou", + "zhangchen", + "wizardforcel" ] }, - "Web/Guide/CSS/Consistent_list_indentation": { - "modified": "2019-03-23T23:22:24.362Z", + "Web/HTML/Element/Input/reset": { + "modified": "2020-10-15T22:25:10.687Z", "contributors": [ - "freshSep", - "Wenbin" + "guow10" ] }, - "Web/Guide/CSS/Counters": { - "modified": "2019-03-23T23:28:24.261Z", + "Web/HTML/Element/Input/search": { + "modified": "2020-10-15T22:25:21.244Z", "contributors": [ - "Ende93", - "Jiang-Xuan", - "Jiasm", - "Nightingale" + "Lin-dreamer", + "guow10" ] }, - "Web/Guide/CSS/Getting_started": { - "modified": "2019-03-23T23:51:15.283Z", + "Web/HTML/Element/Input/submit": { + "modified": "2020-10-15T22:05:11.959Z", "contributors": [ - "Harvesty", - "Ende93", - "ziyunfei", - "teoli", - "Chajn", - "sunnylost", - "playts", - "Ianyang", - "Verruckt", - "Mgjbot", - "Zuzu" + "guow10", + "RainSlide", + "bingxl" ] }, - "Web/Guide/CSS/Getting_started/Boxes": { - "modified": "2019-03-21T02:43:58.945Z", + "Web/HTML/Element/Input/tel": { + "modified": "2019-03-18T21:42:44.923Z", "contributors": [ - "seozed", - "Robinx", - "Harvesty", - "ziyunfei", - "teoli", - "Chajn", - "hxl" + "yuyx91" ] }, - "Web/Guide/CSS/Getting_started/Cascading_and_inheritance": { - "modified": "2019-03-23T23:20:58.387Z", + "Web/HTML/Element/Input/text": { + "modified": "2020-10-15T22:14:33.627Z", "contributors": [ - "HelloFun", - "ziyunfei", - "teoli", - "jedmeng", - "Chajn" + "guow10", + "acuptea" ] }, - "Web/Guide/CSS/Getting_started/Color": { - "modified": "2019-07-23T22:49:50.958Z", + "Web/HTML/Element/Input/time": { + "modified": "2020-10-15T22:19:46.814Z", "contributors": [ - "moposx", - "HelloFun", - "Harvesty", - "jasonzhyan", - "ziyunfei", - "teoli", - "Chajn", - "lilyh" + "kuailekai", + "jason-guo" ] }, - "Web/Guide/CSS/Getting_started/Content": { - "modified": "2020-07-16T22:25:48.610Z", + "Web/HTML/Element/Input/url": { + "modified": "2020-10-15T22:31:25.105Z", "contributors": [ - "Kilimanjaro", - "Robinx", - "Harvesty", - "ziyunfei", - "teoli", - "Chajn", - "aztack" + "yu.xcode" ] }, - "Web/Guide/CSS/Getting_started/How_CSS_works": { - "modified": "2019-03-23T23:23:25.849Z", + "Web/HTML/Element/Input/week": { + "modified": "2020-10-15T22:25:21.176Z", "contributors": [ - "HelloFun", - "ziyunfei", - "teoli", - "Chajn", - "reygreen1" + "pans9" ] }, - "Web/Guide/CSS/Getting_started/JavaScript": { - "modified": "2019-03-23T23:14:19.406Z", + "Web/HTML/Element/Shadow": { + "modified": "2019-03-23T22:10:02.975Z", "contributors": [ - "chengzise", - "Chajn", - "reygreen1" + "wizardforcel" ] }, - "Web/Guide/CSS/Getting_started/Layout": { - "modified": "2019-03-23T23:35:32.514Z", + "Web/HTML/Element/a": { + "modified": "2020-10-15T21:24:07.101Z", "contributors": [ - "Harvesty", - "jasonzhyan", - "shuson", + "gmaso", + "gafish", + "RainSlide", + "JimmieMax", + "JinRong.Yang", + "sunbeyond", + "zhaoqize", + "wizardforcel", + "Dafrok", + "xgqfrms-GitHub", + "simonguo", + "Ende93", + "Yelmor", + "yaoliyc", + "yatace", + "venden", + "FredWe", + "NIGHTEAGLE", "ziyunfei", - "mengzyou", - "teoli", - "Chajn", - "larryzhang" + "TimZhao", + "jessiecaisme" ] }, - "Web/Guide/CSS/Getting_started/Lists": { - "modified": "2019-03-23T23:20:46.740Z", + "Web/HTML/Element/abbr": { + "modified": "2020-10-15T21:24:12.293Z", "contributors": [ - "Harvesty", - "jasonzhyan", - "tolerious", - "mengzyou", + "Astroleander", + "shuihuo", + "greyyyyy", + "RainSlide", + "xianshenglu", + "Ende93", + "xgqfrms-GitHub", + "fscholz", + "xingzhi", "ziyunfei", - "teoli", - "Chajn", - "aztack" + "jessiecaisme" ] }, - "Web/Guide/CSS/Getting_started/Media": { - "modified": "2019-03-23T23:12:04.497Z", + "Web/HTML/Element/acronym": { + "modified": "2019-03-23T22:47:31.151Z", "contributors": [ - "Robinx", - "Harvesty", - "jasonzhyan", - "ziyunfei", - "yeol", - "teoli", - "Chajn" + "wizardforcel", + "xgqfrms-GitHub", + "YaohuiWu", + "pantao" ] }, - "Web/Guide/CSS/Getting_started/Readable_CSS": { - "modified": "2019-03-23T23:20:58.835Z", + "Web/HTML/Element/address": { + "modified": "2020-10-15T21:28:19.569Z", "contributors": [ - "FlameZheng", - "HelloFun", - "Harvesty", - "jasonzhyan", - "Synyan", - "neutrous", - "ziyunfei", - "teoli", - "aztack", - "reygreen1" + "gafish", + "Huangyilin19", + "RainSlide", + "rguanghui", + "xingzhi" ] }, - "Web/Guide/CSS/Getting_started/SVG_and_CSS": { - "modified": "2019-03-23T23:20:53.389Z", + "Web/HTML/Element/applet": { + "modified": "2019-03-23T22:30:12.481Z", "contributors": [ - "ziyunfei", - "teoli", - "aztack" + "chhpt" ] }, - "Web/Guide/CSS/Getting_started/Selectors": { - "modified": "2019-03-21T05:33:31.497Z", + "Web/HTML/Element/area": { + "modified": "2019-03-23T22:50:07.483Z", "contributors": [ - "yijie_sun", - "Robinx", - "HelloFun", - "Harvesty", - "jasonzhyan", - "yihuanZhang", - "futurefeeling", - "FredWe", - "chenguangqi", - "yilksd", - "ziyunfei", - "teoli", - "Chajn", - "aztack", - "bingguo" + "CLoli", + "purcy", + "Undecyce", + "lily121", + "maicss", + "liangmuyang", + "TheaAo", + "naive233", + "xrds" ] }, - "Web/Guide/CSS/Getting_started/Tables": { - "modified": "2019-03-23T23:20:48.505Z", + "Web/HTML/Element/article": { + "modified": "2020-10-15T21:26:55.414Z", "contributors": [ - "023Sparrow", - "Harvesty", - "mengzyou", + "gafish", + "SphinxKnight", + "916106840510", + "GalvinGao", + "rguanghui", "ziyunfei", - "teoli", - "Chajn", - "aztack" + "hutuxu" ] }, - "Web/Guide/CSS/Getting_started/Text_styles": { - "modified": "2019-03-23T23:20:39.790Z", + "Web/HTML/Element/aside": { + "modified": "2020-10-15T21:34:26.905Z", "contributors": [ - "Harvesty", - "neutrous", - "ziyunfei", - "teoli", - "bingguo", - "gadgetboy", - "Chajn" + "gafish", + "RainSlide", + "shlugood", + "Jacky-88", + "YifangDONG", + "kevinfszu", + "rguanghui" ] }, - "Web/Guide/CSS/Getting_started/What_is_CSS": { - "modified": "2019-03-18T20:41:48.849Z", + "Web/HTML/Element/audio": { + "modified": "2020-11-26T10:10:23.964Z", "contributors": [ - "HelloFun", - "Ende93", - "haofu", + "xusy", + "tanshaobo", + "Clarkkkk", + "RoXoM", + "wbamberg", + "HUxiaoAlinNG", + "little-tomorrow", + "Gerhut", + "mage3k", + "zhouyg", "ziyunfei", - "teoli", - "Chajn", - "sunnylost" + "snadn" ] }, - "Web/Guide/CSS/Getting_started/Why_use_CSS": { - "modified": "2019-03-23T23:24:15.853Z", + "Web/HTML/Element/b": { + "modified": "2019-03-18T20:42:37.816Z", "contributors": [ - "TomatoLovve", - "HelloFun", - "ziyunfei", - "haofu", - "teoli", - "Chajn", - "aihua" + "kite-js", + "Benjamin-Smith", + "lc-soft", + "zhuangyin", + "markyun", + "PoppinL" ] }, - "Web/Guide/CSS/Media_queries": { - "modified": "2020-05-17T23:15:16.911Z", + "Web/HTML/Element/base": { + "modified": "2020-10-15T21:32:52.441Z", "contributors": [ - "wallena3", - "Swordword", + "guow10", "RainSlide", - "wuguichiroumeiyou", - "LemonTency", - "AielloChan", - "lllvantis", - "chaiyu2002", - "ziyunfei", + "dodoBehind", + "Lux.lu", "xgqfrms-GitHub", - "Junetea", - "jggnice", - "fidejade", - "liyongleihf2006", - "AozakiOrenji", - "lokyoung", - "Sebastianz", - "mrstork", - "malayaleecoder", - "pantao", - "Ende93", - "Wenbin", - "anjianshi", - "ZhaoMing", - "Nightingale" + "TheaAo", + "betseyliu", + "eforegist", + "PythonFo", + "RainKolwa", + "chinaliyun", + "mengzyou", + "nobug" ] }, - "Web/Guide/CSS/Scaling_background_images": { - "modified": "2019-03-23T23:22:21.195Z", + "Web/HTML/Element/basefont": { + "modified": "2019-03-23T22:20:23.098Z", "contributors": [ - "Ende93", - "mrstork", - "anjia", - "figure7", - "Wenbin" + "hoyt" ] }, - "Web/Guide/CSS/Testing_media_queries": { - "modified": "2020-10-15T21:25:42.378Z", + "Web/HTML/Element/bdi": { + "modified": "2020-10-15T21:45:31.840Z", "contributors": [ - "RainSlide", - "Chajn", - "reygreen1", - "Wenbin" + "yofine", + "gafish", + "ZackBee", + "hoyt", + "Ende93" ] }, - "Web/Guide/CSS/Understanding_z_index": { - "modified": "2019-03-23T23:33:08.995Z", + "Web/HTML/Element/bdo": { + "modified": "2020-10-15T22:29:52.953Z", "contributors": [ - "zhangchen", - "ZQH", - "Go7hic", - "ziyunfei", - "teoli", - "ArthasTree" + "JerryYoung" ] }, - "Web/Guide/CSS/Understanding_z_index/Adding_z-index": { - "modified": "2019-03-23T23:21:48.784Z", + "Web/HTML/Element/bgsound": { + "modified": "2019-03-23T22:20:25.683Z", "contributors": [ - "ziyunfei", - "teoli", - "ArthasTree" + "hoyt" ] }, - "Web/Guide/CSS/Understanding_z_index/Stacking_and_float": { - "modified": "2019-03-23T23:29:39.696Z", + "Web/HTML/Element/big": { + "modified": "2019-03-23T22:20:25.885Z", + "contributors": [ + "hoyt" + ] + }, + "Web/HTML/Element/blink": { + "modified": "2019-03-23T22:20:26.966Z", "contributors": [ - "lixuguang", - "Marcia_gm", - "ziyunfei", "teoli", - "sunnylost" + "hoyt" ] }, - "Web/Guide/CSS/Understanding_z_index/Stacking_context_example_1": { - "modified": "2020-04-09T03:35:06.982Z", + "Web/HTML/Element/blockquote": { + "modified": "2020-10-15T21:31:05.486Z", "contributors": [ - "liuyibo", - "VickyJin" + "RainSlide", + "pantao", + "lisnb" ] }, - "Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2": { - "modified": "2019-03-23T22:25:59.868Z", + "Web/HTML/Element/body": { + "modified": "2020-10-15T21:39:08.650Z", "contributors": [ - "Skyrelu" + "RainSlide", + "eforegist", + "kite-js", + "hoyt", + "CodeDreamfy", + "JoshuaLee", + "sweetliu", + "pantao" ] }, - "Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3": { - "modified": "2020-01-19T10:58:58.576Z", + "Web/HTML/Element/br": { + "modified": "2020-10-15T21:41:22.726Z", "contributors": [ - "zenHeart", - "Skyrelu" + "kite-js", + "hoyt", + "gqqnbig", + "venden" ] }, - "Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index": { - "modified": "2019-08-23T06:42:17.114Z", + "Web/HTML/Element/button": { + "modified": "2020-10-15T21:34:26.939Z", "contributors": [ - "allan_simon", - "ziyunfei", - "teoli", - "sunnylost", - "endlesswind" + "ilexwg", + "YuanGYao", + "kite-js", + "WeJie", + "wizardforcel", + "ezirmusitua", + "AnitaYin", + "JulieLee77" ] }, - "Web/Guide/CSS/Understanding_z_index/The_stacking_context": { - "modified": "2020-01-02T04:20:32.161Z", + "Web/HTML/Element/canvas": { + "modified": "2020-10-15T21:21:53.234Z", "contributors": [ - "Sl0v3C", - "realstephenzhao", - "hayahayao", - "SakuraSnow", - "zjffun", - "gzponline", - "kevinfszu", - "Ende93", - "huangcheng", - "yisibl", + "Mookiepiece", + "Martin.Chow", + "pantao", + "King.521", + "lunix01", + "qguor", "ziyunfei", - "Dolphin_Wood", - "davin107", - "fake", - "teoli", - "ethertank", - "tzyeah" + "xcffl" ] }, - "Web/Guide/CSS/Using_CSS_gradients": { - "modified": "2020-08-08T22:22:01.317Z", + "Web/HTML/Element/caption": { + "modified": "2019-03-23T22:47:30.729Z", "contributors": [ - "funicular", - "pe4ch", - "sanxun515", - "Aamperor", - "zhangnan666", - "zjffun", - "weedwong", - "Gaven-Xu", - "yatace", - "Sebastianz", - "hkfn123", - "lttxzmj", - "RogerShen", - "anjianshi" + "_sollrei", + "gqqnbig", + "pantao" ] }, - "Web/Guide/CSS/Using_multi-column_layouts": { - "modified": "2019-03-23T23:28:24.667Z", + "Web/HTML/Element/center": { + "modified": "2019-03-23T22:10:15.013Z", "contributors": [ - "Bayes", - "xgqfrms-GitHub", - "fscholz", - "Nightingale" + "maoyumaoxun", + "wizardforcel" ] }, - "Web/Guide/CSS/Using_the_:target_selector": { - "modified": "2019-03-23T22:52:16.056Z", + "Web/HTML/Element/cite": { + "modified": "2020-10-15T21:41:43.390Z", "contributors": [ - "Ende93", - "huangcheng", - "FredWe" + "Humilitas", + "yuyuanqiu", + "gafish", + "lucoo01", + "ma125120", + "King." ] }, - "Web/Guide/CSS/Visual_formatting_model": { - "modified": "2019-03-18T21:10:31.376Z", + "Web/HTML/Element/code": { + "modified": "2019-03-23T23:19:07.452Z", "contributors": [ - "guangzai", - "ssttii", - "qw8880000", - "Terry.Qiao", "ziyunfei", - "zhanglun", - "teoli", - "sunnylost", - "yan" + "guoyunhebrave" ] }, - "Web/Guide/Events": { - "modified": "2019-03-23T23:20:12.541Z", + "Web/HTML/Element/col": { + "modified": "2019-04-13T00:08:55.934Z", "contributors": [ - "Imagine-Tom", - "tcatche", - "NoDocCat", - "Tankunpeng", - "Jeremie" + "Rominez", + "zxcvbnm", + "FredWe" ] }, - "Web/Guide/Events/Creating_and_triggering_events": { - "modified": "2020-05-27T10:29:01.846Z", + "Web/HTML/Element/colgroup": { + "modified": "2020-10-15T21:37:46.269Z", "contributors": [ - "Carllllo", - "xingleizhao", - "but0n", - "zhangchen", - "LuSitong", - "Iamxiaozhu", - "ucev", - "xgqfrms-GitHub", - "ZhengYinBo", - "carllx", - "timwangdev", - "FredWe", - "ReyCG_sub" + "RainSlide", + "Soyaine", + "PandaadnaP", + "FredWe" ] }, - "Web/Guide/Events/Event_handlers": { - "modified": "2019-03-23T23:20:11.825Z", + "Web/HTML/Element/content": { + "modified": "2019-03-23T22:10:12.369Z", "contributors": [ - "tcatche", - "Le-Fu", - "xgqfrms-GitHub", - "ziyunfei", - "Darrel.Hsu" + "wizardforcel" ] }, - "Web/Guide/Events/Media_events": { - "modified": "2020-07-02T07:14:48.714Z", + "Web/HTML/Element/data": { + "modified": "2020-10-15T21:28:38.554Z", "contributors": [ - "9aoyang", - "haocity", - "TimRChen", - "maicss", - "GSBL", - "bizbin", - "esterTion", - "SudoKillMe", - "zilong-thu", - "ziyunfei", - "Anonymous" + "RainSlide", + "hxl" ] }, - "Web/Guide/Events/Mutation_events": { - "modified": "2019-03-23T22:51:23.609Z", + "Web/HTML/Element/datalist": { + "modified": "2020-10-15T21:19:07.919Z", "contributors": [ - "Pada", - "peonyriver", - "FredWe" + "gafish", + "zhangchen", + "mfranzke", + "wbamberg", + "Jianming", + "SphinxKnight", + "koaqiu", + "JulieLee77", + "ziyunfei" ] }, - "Web/Guide/Events/Orientation_and_motion_data_explained": { - "modified": "2019-03-23T23:10:07.666Z", + "Web/HTML/Element/dd": { + "modified": "2019-03-23T22:39:17.576Z", "contributors": [ - "fancy" + "zhuangyin", + "PoppinL" ] }, - "Web/Guide/Events/Overview_of_Events_and_Handlers": { - "modified": "2019-03-23T22:51:31.630Z", + "Web/HTML/Element/del": { + "modified": "2020-10-15T21:44:56.125Z", "contributors": [ - "Song2017", - "FredWe" + "lastVigo", + "Ende93" ] }, - "Web/Guide/Graphics": { - "modified": "2020-12-07T03:47:26.253Z", + "Web/HTML/Element/details": { + "modified": "2020-10-15T21:40:23.093Z", "contributors": [ - "SphinxKnight", - "Vongola-czr", - "Mookiepiece", + "Sc0tt", "RainSlide", - "zhuangyin", - "ITxiaochong", - "pluwen", - "m4jing", - "jinger7281", - "wth", - "rockywen", - "ryerh", - "wanglingzhi", - "Kasuganosora", - "Hikerpig" + "moquede", + "Jiang-Xuan", + "wh1msy", + "xgqfrms-GitHub", + "Martin.Chow" ] }, - "Web/Guide/HTML/Content_Editable": { - "modified": "2020-09-22T00:31:12.632Z", + "Web/HTML/Element/dfn": { + "modified": "2020-08-14T22:28:54.156Z", "contributors": [ - "imarco", - "YogurtQ", - "xianghui-ma", - "Hew007", - "zhuangyin", - "jamesxu", - "ziyunfei", - "teoli", - "sunnylost", - "ethertank" + "liujtani", + "harttle" ] }, - "Web/Guide/HTML/Content_Editable/Rich-Text_Editing_in_Mozilla": { - "modified": "2019-11-25T00:57:33.951Z", + "Web/HTML/Element/dialog": { + "modified": "2020-10-15T21:53:47.497Z", "contributors": [ - "gao5252", - "SphinxKnight", - "chrisdavidmills", - "sijinglei", - "doodlewind", - "zezhou", - "Cbgrape", - "Teago" + "bambooom", + "RainSlide", + "Bayes", + "xgqfrms-GitHub" ] }, - "Web/Guide/HTML/Content_categories": { - "modified": "2019-09-24T00:45:30.074Z", + "Web/HTML/Element/dir": { + "modified": "2019-03-21T11:22:00.363Z", "contributors": [ - "Metaloe", - "gnepnaiL-oahZ", - "unclesamnumberone", - "jizhi77", - "ZeroJsus", - "huozicheng", - "AllenYangFly", - "arya0822", - "kevinfszu", - "pantao", - "LuyaoWang", - "FredWe" + "RainSlide", + "wizardforcel" ] }, - "Web/Guide/HTML/Email_links": { - "modified": "2020-05-25T10:01:07.179Z", + "Web/HTML/Element/div": { + "modified": "2020-10-15T21:37:14.662Z", "contributors": [ - "sweeney", - "xgqfrms" + "imdsc", + "guofai", + "BurNing1993", + "RainSlide", + "gafish", + "YunZhongZi", + "pantao", + "FredWe" ] }, - "Web/Guide/HTML/Forms_in_HTML": { - "modified": "2019-03-23T23:33:41.492Z", + "Web/HTML/Element/dl": { + "modified": "2020-04-29T06:50:25.527Z", "contributors": [ - "huozicheng", - "xgqfrms-GitHub", - "ziyunfei", + "tanshaobo", + "wenchuyang", + "zhuangyin", + "PoppinL", "teoli", - "sunnylost", - "jtyjty99999" + "pantao" ] }, - "Web/Guide/HTML/HTML": { - "modified": "2019-06-25T10:18:27.080Z", + "Web/HTML/Element/dt": { + "modified": "2019-03-23T22:52:08.449Z", "contributors": [ - "xiajun1996", - "ziyunfei", - "zzangxu" + "PoppinL", + "pantao", + "FredWe" ] }, - "Web/Guide/HTML/HTML5": { - "modified": "2019-04-29T21:49:51.078Z", + "Web/HTML/Element/em": { + "modified": "2019-08-13T01:09:58.820Z", "contributors": [ - "vanpipy", - "mike-j", - "GameWang", - "fanerge", - "mfoonirlee", - "Summer1026", - "xgqfrms-GitHub", - "Go7hic", - "panhe-xue", - "ObooChin", - "kevinfszu", - "teoli", + "huxinsen", + "eMUQI", + "bobo159357456", "xgqfrms", - "fghycode", - "jasonworg", - "mengzyou", - "Breezewish", - "Jianming", - "ziyunfei", - "xuxun", - "TimZhao", - "sunnylost", - "xcffl", - "princetoad@gmail.com" + "pantao" ] }, - "Web/Guide/HTML/HTML5/Constraint_validation": { - "modified": "2020-08-07T06:53:08.941Z", + "Web/HTML/Element/embed": { + "modified": "2020-10-15T21:28:42.719Z", "contributors": [ - "Nierifeng", - "shiyi25928988", - "yongchen" + "RainSlide", + "chenos", + "Martin.Chow", + "Startan" ] }, - "Web/Guide/HTML/HTML5/HTML5_Thematic_Classification": { - "modified": "2019-03-23T23:39:08.496Z", + "Web/HTML/Element/fieldset": { + "modified": "2020-10-15T21:49:19.693Z", "contributors": [ - "ziyunfei", - "kevmdn" + "Carllllo", + "lucoo01", + "ezirmusitua", + "abowloflrf", + "cyxlj" ] }, - "Web/Guide/HTML/HTML5/HTML5_element_list": { - "modified": "2020-01-10T02:18:08.432Z", + "Web/HTML/Element/figcaption": { + "modified": "2019-03-23T22:35:32.183Z", "contributors": [ - "yinsang", - "Jevol", - "yongdi", - "Breezewish", - "ziyunfei" + "wizardforcel", + "travellingkite", + "Ende93" ] }, - "Web/Guide/HTML/HTML5/Introduction_to_HTML5": { - "modified": "2019-03-24T00:12:23.341Z", + "Web/HTML/Element/figure": { + "modified": "2020-10-15T21:38:52.140Z", "contributors": [ - "eeeeeeeason", - "YueBiYang", - "008", - "guotingchaopr", - "ziyunfei", - "ibeen", - "gaoyanqi", - "leegorous" + "gafish", + "RainSlide", + "lcw0622", + "ajfg93", + "Ende93", + "041008725", + "you0509" ] }, - "Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document": { - "modified": "2019-03-21T10:38:08.111Z", + "Web/HTML/Element/font": { + "modified": "2019-03-23T22:10:03.224Z", "contributors": [ - "RainSlide", - "jimmy-sum", - "VdoG", - "StarXY", - "kevinfszu", - "mengzyou", - "xuexiaocai" + "yinsang", + "wizardforcel" ] }, - "Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages": { - "modified": "2020-07-16T22:22:33.856Z", + "Web/HTML/Element/footer": { + "modified": "2020-10-15T21:38:27.121Z", "contributors": [ - "Dorence", - "Banhave", - "boltyu", - "TheaAo", - "wth", - "Samoay", - "ziyunfei", - "Y001", - "Mgjbot", - "Carrie zhxj" + "gafish", + "Ende93", + "sweetliu", + "W.D.L" ] }, - "Web/Guide/HTML/Using_HTML5_audio_and_video": { - "modified": "2019-09-28T22:50:38.146Z", + "Web/HTML/Element/form": { + "modified": "2020-10-15T21:14:51.331Z", "contributors": [ - "zaixuzheng", - "wth", - "Cindy_Liu", - "lyxuncle", - "flyonok", - "zhaiyu.zhaiyu", - "troywith77", - "ArthasTree", - "rogueduola", - "tankhanleng", - "shenhao" + "Clarkkkk", + "Carllllo", + "Daqin", + "xuiang", + "RainSlide", + "Alfxjx", + "l613", + "gafish", + "linjialiang", + "HJ8848", + "luzhe610", + "Structure88", + "wizardforcel", + "maicss", + "zrtalent", + "FredWe", + "ziyunfei", + "lenvens" ] }, - "Web/Guide/HTML/Using_data_attributes": { - "modified": "2020-07-16T22:22:37.588Z", + "Web/HTML/Element/frame": { + "modified": "2019-03-23T22:10:16.682Z", "contributors": [ - "zhangchen", - "hhxxhg", - "lavenderming", - "xgqfrms-GitHub", - "hellotaotao", - "Go7hic", - "marshalYuan", - "monjer", - "Deryckxie" + "wizardforcel" ] }, - "Web/Guide/Localizations_and_character_encodings": { - "modified": "2020-05-07T10:52:56.537Z", + "Web/HTML/Element/frameset": { + "modified": "2020-10-15T21:48:59.254Z", "contributors": [ "Ende93", - "91JOJO", - "xdsnet" + "xgqfrms-GitHub", + "Fogwind" ] }, - "Web/Guide/Mobile": { - "modified": "2019-03-23T23:20:37.061Z", + "Web/HTML/Element/head": { + "modified": "2020-10-15T21:31:48.499Z", "contributors": [ - "TaoWei", - "mywentu", - "peterwang1996", - "qry", - "liminjun", - "xbzhs", - "duan.xiaodong", - "wanglong", - "ziyunfei" + "eforegist", + "jesse0x90", + "AlexChao" ] }, - "Web/Guide/Parsing_and_serializing_XML": { - "modified": "2019-08-12T08:51:44.801Z", + "Web/HTML/Element/header": { + "modified": "2020-10-15T21:27:00.445Z", "contributors": [ + "gafish", "RainSlide", - "haaling" + "wbamberg", + "ziyunfei", + "hutuxu" ] }, - "Web/Guide/Performance": { - "modified": "2020-10-09T03:08:14.338Z", + "Web/HTML/Element/hgroup": { + "modified": "2020-09-15T22:26:38.462Z", "contributors": [ - "kite-js", - "SphinxKnight", - "Imagine-Tom", - "yexk", - "leozhang", - "sunnylost", - "DAVINDAI", - "ziyunfei" + "hellorayza", + "emanruoy", + "allan_simon", + "diqiuxin", + "Ende93" ] }, - "Web/HTML": { - "modified": "2020-05-18T02:45:10.401Z", + "Web/HTML/Element/hr": { + "modified": "2020-10-15T21:39:09.045Z", "contributors": [ - "SphinxKnight", - "MrWangYaNan", - "mkckr0", - "Mengli", - "853419196", - "xmcgcg", - "xq20160912", - "RainSlide", - "fanerge", - "abramsz", - "wangfy", - "fenyu", - "asthman666", - "mao001", - "vizardsLau", - "Planet6174", - "pluwen", - "ChangJun2018", - "robsean", - "ldwformat", - "xixilog", - "wh1msy", - "xx1124961758", - "little-love", - "Shadowhiker", - "Blink", - "ylws", - "liugev6", - "fygyx1", - "pkl6612", - "mona", - "PoppinL", - "ziyunfei", - "lunix01", - "Breezewish", - "xuxun", - "allan_simon", - "TimZhao", - "jessiecaisme", - "Futao.Gao" + "mitaosi", + "tanshaobo", + "gafish", + "lucoo01", + "azheng", + "nicholas-yangding", + "Ende93", + "pantao" ] }, - "Web/HTML/Applying_color": { - "modified": "2020-07-22T05:27:42.410Z", + "Web/HTML/Element/html": { + "modified": "2020-10-15T21:37:17.396Z", "contributors": [ - "WinterCicada", - "Dorence" + "gafish", + "eforegist", + "xgqfrms-GitHub", + "thinklittle", + "VdoG", + "ruilee16", + "jesse0x90", + "jasonnn331", + "Ende93", + "FredWe" ] }, - "Web/HTML/Attributes": { - "modified": "2020-08-28T22:38:07.073Z", + "Web/HTML/Element/i": { + "modified": "2019-03-23T23:11:10.638Z", "contributors": [ - "nodeZ", - "fygyx1", - "tys", - "Carllllo", - "MartinsYong", - "enoorez", - "yhs-APerson", - "yuehp", - "PoppinL", - "ziyunfei", - "phoenixLU" + "StormBR1120", + "ccn1010", + "ranwu", + "pantao", + "Hey-Ray" ] }, - "Web/HTML/Attributes/自动完成属性": { - "modified": "2020-10-15T22:25:13.539Z", + "Web/HTML/Element/iframe": { + "modified": "2020-10-15T21:21:27.595Z", "contributors": [ - "pans9" + "卡尔维斯特", + "HHH-can", + "frankli0324", + "gafish", + "Aslower", + "hexianzhi", + "xgqfrms", + "wbamberg", + "GameWang", + "AlvinBlack", + "Ende93", + "shiddong", + "xuxun", + "xgqfrms-GitHub", + "hoyt", + "Marcia_gm", + "Sivan", + "ReyCG_sub", + "ziyunfei", + "monjer", + "Josephok", + "ZhangJianxiang" ] }, - "Web/HTML/Block-level_elements": { - "modified": "2019-03-18T20:38:24.578Z", + "Web/HTML/Element/image": { + "modified": "2019-03-30T00:32:55.632Z", "contributors": [ - "kmc947373", - "CraigZeng", - "FredWe", - "Breezewish", - "teoli", - "ziyunfei", - "wdlth" + "raygift", + "hoyt" ] }, - "Web/HTML/CORS_enabled_image": { - "modified": "2020-05-06T06:27:48.960Z", + "Web/HTML/Element/img": { + "modified": "2020-10-15T21:34:27.415Z", "contributors": [ - "oxyg3n", - "guow10", - "PaulHan", - "wYhooo", - "xgqfrms-GitHub", - "kmc947373", - "ziyunfei", - "Breezewish" + "liangmuyang", + "HaoyuA", + "XLCYun", + "RainSlide", + "LexieAlreadyTaken", + "imbant", + "zzykillu", + "gafish", + "Ahhaha233", + "Everain", + "iefreer", + "fuchao2012", + "anjia" ] }, - "Web/HTML/CORS_settings_attributes": { - "modified": "2019-11-26T01:56:32.661Z", + "Web/HTML/Element/ins": { + "modified": "2020-10-15T21:39:08.740Z", "contributors": [ - "wangjian", - "Melo.HG", - "xgqfrms-GitHub", - "mygaochunming", - "xgqfrms", - "kmc947373" + "gafish", + "lastVigo", + "Martin.Chow", + "pantao" ] }, - "Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video": { - "modified": "2019-12-03T21:07:25.830Z", + "Web/HTML/Element/isindex": { + "modified": "2019-03-23T22:43:17.045Z", "contributors": [ - "guow10", - "xcffl" + "Martin.Chow" ] }, - "Web/HTML/Element": { - "modified": "2019-12-03T05:56:52.523Z", + "Web/HTML/Element/kbd": { + "modified": "2019-08-13T06:01:57.840Z", "contributors": [ - "RainSlide", - "eforegist", - "XiangHongAi", - "mdnjcc", + "kenneth55555", "hoyt", - "jian86392088", - "VdoG", - "ruilee16", - "jesse0x90", - "Ende93", - "Martin.Chow", - "Breezewish", - "ziyunfei", - "gqqnbig", - "jessiecaisme", - "xcffl", - "teoli", - "Cnmahj" + "perillasy" ] }, - "Web/HTML/Element/Heading_Elements": { - "modified": "2020-10-15T21:08:04.205Z", + "Web/HTML/Element/keygen": { + "modified": "2019-04-05T05:50:18.178Z", "contributors": [ - "gafish", - "imba-tjd", - "RainSlide", - "wizardforcel", - "HashubWang", - "venden", - "Ende93", - "ziyunfei" + "Ende93" ] }, - "Web/HTML/Element/Input": { - "modified": "2020-05-27T10:36:01.533Z", + "Web/HTML/Element/label": { + "modified": "2020-10-15T21:34:28.099Z", "contributors": [ "Carllllo", - "Rem486", - "wxyads", - "853419196", - "JuliusKingsley", - "zhangchen", - "qihuanlu01", - "zaixuzheng", - "yangshang01", - "yuyx91", - "voidzhou", - "hebby", - "jiangseventeen", - "fsx950223", - "Tiaen", + "plusmultiply0", + "one-day-day", + "kuei0221", + "yuyuanqiu", + "loveyunk", + "Ende93", + "tinunkai", + "codevvvv9", + "yinsang", "xgqfrms-GitHub", - "liaoyinglong", - "adam198824", - "liyongleihf2006", - "AutumnFish", - "luobotang", - "gqqnbig", - "Ivan_V", - "zilong-thu", - "Metalooze", - "tiansh", - "ziyunfei", - "rnoka" + "TooBug", + "ObooChin", + "JulieLee77" ] }, - "Web/HTML/Element/Input/button": { - "modified": "2019-03-18T21:28:02.958Z", + "Web/HTML/Element/legend": { + "modified": "2020-10-15T21:28:02.232Z", "contributors": [ - "zaixuzheng", - "bear-x" + "Carllllo", + "xingzhi" ] }, - "Web/HTML/Element/Input/checkbox": { - "modified": "2019-07-01T05:04:47.435Z", + "Web/HTML/Element/li": { + "modified": "2019-04-06T23:38:24.006Z", "contributors": [ - "konrumi" + "lwj621", + "wizardforcel", + "changwu", + "JoshuaLee" ] }, - "Web/HTML/Element/Input/color": { - "modified": "2019-03-23T22:16:45.281Z", + "Web/HTML/Element/link": { + "modified": "2020-10-15T21:43:08.607Z", "contributors": [ - "ecnelises", - "litmonw", - "konrumi" + "woshiqiang1", + "mitaosi", + "dlnb526", + "Yayure", + "LINYI", + "seanyue", + "csideakevin", + "gafish", + "Blue-momo", + "wh.D", + "zhangqiangoffice", + "VdoG", + "sdc37h", + "zhengjianqiao", + "jethro2016", + "ZackBee", + "cissoid", + "jesse0x90", + "gqqnbig", + "041008725" ] }, - "Web/HTML/Element/Input/date": { - "modified": "2019-03-23T22:01:59.059Z", + "Web/HTML/Element/listing": { + "modified": "2019-03-23T22:10:12.488Z", "contributors": [ - "LeonH", - "WeiGrand", - "tangj1206" + "wizardforcel" ] }, - "Web/HTML/Element/Input/datetime": { - "modified": "2019-07-13T11:00:17.487Z", + "Web/HTML/Element/main": { + "modified": "2020-10-15T21:34:53.469Z", "contributors": [ - "853419196", - "wizardforcel" + "panda2134", + "kidwen", + "RainSlide", + "agannwei", + "gafish", + "sun_all", + "Alexanderonepills", + "zhangchen", + "yuyang", + "beiweiqiang", + "pantao", + "holynewbie", + "TANRUI", + "oxygen16" ] }, - "Web/HTML/Element/Input/datetime-local": { - "modified": "2020-10-24T12:05:38.587Z", + "Web/HTML/Element/map": { + "modified": "2020-06-30T05:42:09.220Z", "contributors": [ - "HermitSun", - "ThaddeusJiang", - "zhangchen", - "kite-js" + "ikomom", + "Feel-Joy", + "wizardforcel", + "xycd", + "naive233" ] }, - "Web/HTML/Element/Input/email": { - "modified": "2020-10-15T22:07:09.640Z", + "Web/HTML/Element/mark": { + "modified": "2020-01-10T01:04:18.292Z", "contributors": [ - "Chattille", - "CiaoLee", - "zaixuzheng" + "yuyuanqiu", + "XiaoWinter", + "puppyer", + "Benjamin-Smith", + "looso", + "iigmir", + "Byronic94", + "marchen" ] }, - "Web/HTML/Element/Input/file": { - "modified": "2020-10-15T21:55:53.292Z", + "Web/HTML/Element/marquee": { + "modified": "2019-03-23T22:16:10.183Z", "contributors": [ - "mkckr0", - "DreamLxq", - "hehe1111", - "alfredchan3", - "zhangchen", - "vippiv", - "AmyFoxFN", - "YinlongCoding", - "chinafootballyu", - "zxc5800", + "siyecao", + "Easton605", "wizardforcel", - "ezirmusitua" + "viazure", + "snovey" ] }, - "Web/HTML/Element/Input/hidden": { - "modified": "2020-10-15T22:15:28.120Z", + "Web/HTML/Element/menu": { + "modified": "2020-10-15T21:37:16.105Z", "contributors": [ - "guow10", - "RainSlide" + "RainSlide", + "yuyx91", + "kgojiwong", + "pantao", + "holynewbie" ] }, - "Web/HTML/Element/Input/image": { - "modified": "2020-10-15T21:49:38.681Z", + "Web/HTML/Element/menuitem": { + "modified": "2020-10-15T21:58:27.361Z", "contributors": [ - "SphinxKnight", - "Henry", - "yu.xcode", - "MissingDreamland" + "RainSlide", + "wangxuedongovo" ] }, - "Web/HTML/Element/Input/number": { - "modified": "2019-03-23T22:10:11.887Z", + "Web/HTML/Element/meta": { + "modified": "2020-10-15T21:34:02.227Z", "contributors": [ + "RainSlide", + "Carllllo", + "chanvin", + "dlnb526", + "vanestone", + "xq20160912", + "ceido", + "Bayes", + "VdoG", "zxsunrise", - "XXXS", - "hmzll", - "Ende93", - "xgqfrms-GitHub" + "wpc1403s2", + "fsx950223", + "yellow-lines", + "yunikoro", + "scl930227", + "daixinye", + "zt2", + "Noly1990", + "aimiy", + "clarkzsd", + "qixi", + "xgqfrms-GitHub", + "wangdapeng1005", + "zhouyu1993", + "SolitudeRA", + "Annlix", + "littlee", + "pantao", + "SimplyY", + "Fadeoc" ] }, - "Web/HTML/Element/Input/password": { - "modified": "2020-10-15T22:06:31.185Z", + "Web/HTML/Element/meta/name": { + "modified": "2020-10-15T22:33:39.182Z", "contributors": [ - "byouw", - "zaixuzheng" + "RainSlide", + "hanochrosebush" ] }, - "Web/HTML/Element/Input/radio": { - "modified": "2020-10-15T21:55:25.436Z", + "Web/HTML/Element/meter": { + "modified": "2019-03-23T22:20:26.204Z", "contributors": [ - "luohuayouyi12138", - "LeonZou", - "zhangchen", - "wizardforcel" + "hoyt" ] }, - "Web/HTML/Element/Input/reset": { - "modified": "2020-10-15T22:25:10.687Z", + "Web/HTML/Element/multicol": { + "modified": "2019-03-23T22:18:36.663Z", "contributors": [ - "guow10" + "wizardforcel", + "xgqfrms-GitHub" ] }, - "Web/HTML/Element/Input/search": { - "modified": "2020-10-15T22:25:21.244Z", + "Web/HTML/Element/nav": { + "modified": "2020-10-15T21:26:27.913Z", "contributors": [ - "Lin-dreamer", - "guow10" + "gafish", + "wbamberg", + "yatace", + "ziyunfei", + "TimZhao", + "bowen-shi" ] }, - "Web/HTML/Element/Input/submit": { - "modified": "2020-10-15T22:05:11.959Z", + "Web/HTML/Element/nextid": { + "modified": "2020-10-15T22:25:21.460Z", "contributors": [ - "guow10", - "RainSlide", - "bingxl" + "pans9" ] }, - "Web/HTML/Element/Input/tel": { - "modified": "2019-03-18T21:42:44.923Z", + "Web/HTML/Element/nobr": { + "modified": "2019-03-23T22:10:16.065Z", "contributors": [ - "yuyx91" + "wizardforcel" ] }, - "Web/HTML/Element/Input/text": { - "modified": "2020-10-15T22:14:33.627Z", + "Web/HTML/Element/noembed": { + "modified": "2019-03-23T22:10:11.377Z", "contributors": [ - "guow10", - "acuptea" + "wizardforcel" ] }, - "Web/HTML/Element/Input/time": { - "modified": "2020-10-15T22:19:46.814Z", + "Web/HTML/Element/noframes": { + "modified": "2019-03-23T22:10:12.853Z", "contributors": [ - "kuailekai", - "jason-guo" + "wizardforcel" ] }, - "Web/HTML/Element/Input/url": { - "modified": "2020-10-15T22:31:25.105Z", + "Web/HTML/Element/noscript": { + "modified": "2020-10-15T21:41:44.231Z", "contributors": [ - "yu.xcode" + "gafish", + "Serendipity96", + "williamjing", + "xgqfrms-GitHub", + "wleonid" ] }, - "Web/HTML/Element/Input/week": { - "modified": "2020-10-15T22:25:21.176Z", + "Web/HTML/Element/object": { + "modified": "2020-10-15T21:25:11.550Z", "contributors": [ - "pans9" + "gafish", + "zaixuzheng", + "Martin.Chow", + "ziyunfei", + "TimZhao" ] }, - "Web/HTML/Element/Input/月份": { - "modified": "2020-10-15T21:57:03.537Z", + "Web/HTML/Element/ol": { + "modified": "2020-10-15T21:37:41.454Z", "contributors": [ "RainSlide", - "AliasZet" - ] - }, - "Web/HTML/Element/Input/范围": { - "modified": "2020-10-15T22:25:22.859Z", - "contributors": [ - "q.z", - "hzy", - "pans9" + "gafish", + "fcg55254", + "nuo2000", + "benpigchu", + "tcatche", + "Ende93", + "dongnanzhan", + "FredWe" ] }, - "Web/HTML/Element/Shadow": { - "modified": "2019-03-23T22:10:02.975Z", + "Web/HTML/Element/optgroup": { + "modified": "2020-10-15T21:48:34.575Z", "contributors": [ - "wizardforcel" + "Carllllo", + "shinnqy" ] }, - "Web/HTML/Element/a": { - "modified": "2020-10-15T21:24:07.101Z", + "Web/HTML/Element/option": { + "modified": "2020-10-15T21:37:43.170Z", "contributors": [ - "gmaso", - "gafish", - "RainSlide", - "JimmieMax", - "JinRong.Yang", - "sunbeyond", - "zhaoqize", + "Carllllo", "wizardforcel", - "Dafrok", - "xgqfrms-GitHub", - "simonguo", - "Ende93", - "Yelmor", - "yaoliyc", - "yatace", - "venden", - "FredWe", - "NIGHTEAGLE", + "King.", "ziyunfei", - "TimZhao", - "jessiecaisme" + "zhache12345" ] }, - "Web/HTML/Element/abbr": { - "modified": "2020-10-15T21:24:12.293Z", + "Web/HTML/Element/output": { + "modified": "2020-10-15T21:41:37.216Z", "contributors": [ - "Astroleander", - "shuihuo", - "greyyyyy", - "RainSlide", - "xianshenglu", - "Ende93", - "xgqfrms-GitHub", - "fscholz", - "xingzhi", - "ziyunfei", - "jessiecaisme" + "wbamberg", + "zhangchen", + "King." ] }, - "Web/HTML/Element/acronym": { - "modified": "2019-03-23T22:47:31.151Z", + "Web/HTML/Element/p": { + "modified": "2019-03-23T23:14:26.595Z", "contributors": [ - "wizardforcel", - "xgqfrms-GitHub", - "YaohuiWu", - "pantao" + "Adashuai5", + "MrZhang", + "Ende93", + "FredWe", + "xingzhi" ] }, - "Web/HTML/Element/address": { - "modified": "2020-10-15T21:28:19.569Z", + "Web/HTML/Element/param": { + "modified": "2020-10-15T21:50:13.073Z", "contributors": [ "gafish", - "Huangyilin19", - "RainSlide", - "rguanghui", - "xingzhi" + "JinRong.Yang", + "naive233" ] }, - "Web/HTML/Element/applet": { - "modified": "2019-03-23T22:30:12.481Z", + "Web/HTML/Element/picture": { + "modified": "2020-10-15T21:48:04.092Z", "contributors": [ - "chhpt" + "imba-tjd", + "yisibl", + "PoppinL" ] }, - "Web/HTML/Element/area": { - "modified": "2019-03-23T22:50:07.483Z", + "Web/HTML/Element/plaintext": { + "modified": "2019-03-23T22:10:03.107Z", "contributors": [ - "CLoli", - "purcy", - "Undecyce", - "lily121", - "maicss", - "liangmuyang", - "TheaAo", - "naive233", - "xrds" + "wizardforcel" ] }, - "Web/HTML/Element/article": { - "modified": "2020-10-15T21:26:55.414Z", + "Web/HTML/Element/pre": { + "modified": "2020-10-15T21:39:48.026Z", "contributors": [ "gafish", - "SphinxKnight", - "916106840510", - "GalvinGao", - "rguanghui", - "ziyunfei", - "hutuxu" + "xgqfrms-GitHub", + "jiangseventeen", + "VdoG", + "Ende93", + "pengliheng" ] }, - "Web/HTML/Element/aside": { - "modified": "2020-10-15T21:34:26.905Z", - "contributors": [ - "gafish", - "RainSlide", - "shlugood", - "Jacky-88", - "YifangDONG", - "kevinfszu", - "rguanghui" - ] - }, - "Web/HTML/Element/audio": { - "modified": "2020-11-26T10:10:23.964Z", + "Web/HTML/Element/progress": { + "modified": "2020-10-15T21:05:48.761Z", "contributors": [ - "xusy", - "tanshaobo", - "Clarkkkk", - "RoXoM", + "wonschangge", + "mkckr0", + "fscholz", "wbamberg", - "HUxiaoAlinNG", - "little-tomorrow", - "Gerhut", - "mage3k", - "zhouyg", "ziyunfei", - "snadn" + "ethertank" ] }, - "Web/HTML/Element/b": { - "modified": "2019-03-18T20:42:37.816Z", + "Web/HTML/Element/q": { + "modified": "2020-10-15T21:44:22.274Z", "contributors": [ - "kite-js", - "Benjamin-Smith", - "lc-soft", - "zhuangyin", - "markyun", - "PoppinL" + "kenneth55555", + "fscholz", + "Zyan", + "Ende93", + "Jiang-Xuan" ] }, - "Web/HTML/Element/base": { - "modified": "2020-10-15T21:32:52.441Z", + "Web/HTML/Element/rb": { + "modified": "2020-10-15T22:14:32.981Z", "contributors": [ - "guow10", - "RainSlide", - "dodoBehind", - "Lux.lu", - "xgqfrms-GitHub", - "TheaAo", - "betseyliu", - "eforegist", - "PythonFo", - "RainKolwa", - "chinaliyun", - "mengzyou", - "nobug" + "richardmyu", + "zhaohaodang", + "astak" ] }, - "Web/HTML/Element/basefont": { - "modified": "2019-03-23T22:20:23.098Z", + "Web/HTML/Element/rp": { + "modified": "2020-05-03T03:15:11.285Z", "contributors": [ - "hoyt" + "tangallison2", + "wizardforcel" ] }, - "Web/HTML/Element/bdi": { - "modified": "2020-10-15T21:45:31.840Z", + "Web/HTML/Element/rt": { + "modified": "2019-04-18T06:06:40.759Z", "contributors": [ - "yofine", - "gafish", - "ZackBee", - "hoyt", - "Ende93" + "Yujiyang", + "Benjamin-Smith", + "wizardforcel" ] }, - "Web/HTML/Element/bdo": { - "modified": "2020-10-15T22:29:52.953Z", + "Web/HTML/Element/rtc": { + "modified": "2019-04-18T06:06:45.477Z", "contributors": [ - "JerryYoung" + "wizardforcel" ] }, - "Web/HTML/Element/bgsound": { - "modified": "2019-03-23T22:20:25.683Z", + "Web/HTML/Element/ruby": { + "modified": "2020-10-15T21:40:22.004Z", "contributors": [ - "hoyt" + "xgqfrms", + "studyMakesMeHappy", + "zhangchen", + "Roger-WIN", + "wizardforcel", + "Martin.Chow" ] }, - "Web/HTML/Element/big": { - "modified": "2019-03-23T22:20:25.885Z", + "Web/HTML/Element/s": { + "modified": "2020-10-15T21:55:24.184Z", "contributors": [ - "hoyt" + "gafish", + "wizardforcel" ] }, - "Web/HTML/Element/blink": { - "modified": "2019-03-23T22:20:26.966Z", + "Web/HTML/Element/samp": { + "modified": "2019-03-23T22:33:11.911Z", "contributors": [ - "teoli", - "hoyt" + "luobotang" ] }, - "Web/HTML/Element/blockquote": { - "modified": "2020-10-15T21:31:05.486Z", + "Web/HTML/Element/script": { + "modified": "2020-08-05T19:13:19.581Z", "contributors": [ - "RainSlide", - "pantao", - "lisnb" + "mitaosi", + "michalska.lucyna88", + "harryzcy", + "namklaw", + "heekei", + "Soy", + "unclesamnumberone", + "Jackandjohn", + "xhlsrj", + "xgqfrms-GitHub", + "Ende93", + "ahwassa", + "gqqnbig", + "fskuok" ] }, - "Web/HTML/Element/body": { - "modified": "2020-10-15T21:39:08.650Z", + "Web/HTML/Element/section": { + "modified": "2020-10-15T21:22:44.033Z", "contributors": [ - "RainSlide", - "eforegist", - "kite-js", - "hoyt", - "CodeDreamfy", - "JoshuaLee", - "sweetliu", - "pantao" + "shawn20111416", + "gafish", + "wbamberg", + "kevinfszu", + "Annlix", + "ziyunfei", + "TimZhao" ] }, - "Web/HTML/Element/br": { - "modified": "2020-10-15T21:41:22.726Z", + "Web/HTML/Element/select": { + "modified": "2020-10-15T21:27:52.792Z", "contributors": [ - "kite-js", - "hoyt", - "gqqnbig", - "venden" + "Carllllo", + "zhangchen", + "wbamberg", + "pavilion2t", + "DUHZ", + "brandonzhu", + "ReyCG", + "ziyunfei" ] }, - "Web/HTML/Element/button": { - "modified": "2020-10-15T21:34:26.939Z", + "Web/HTML/Element/slot": { + "modified": "2020-10-15T21:54:42.237Z", "contributors": [ - "ilexwg", - "YuanGYao", - "kite-js", - "WeJie", - "wizardforcel", - "ezirmusitua", - "AnitaYin", - "JulieLee77" + "Jennyshining", + "xgqfrms", + "maicss", + "n313893254" ] }, - "Web/HTML/Element/canvas": { - "modified": "2020-10-15T21:21:53.234Z", + "Web/HTML/Element/small": { + "modified": "2020-10-15T21:51:17.821Z", "contributors": [ - "Mookiepiece", - "Martin.Chow", - "pantao", - "King.521", - "lunix01", - "qguor", - "ziyunfei", - "xcffl" + "gafish", + "wizardforcel", + "rollinhup", + "Tidejade" ] }, - "Web/HTML/Element/caption": { - "modified": "2019-03-23T22:47:30.729Z", + "Web/HTML/Element/source": { + "modified": "2019-07-01T10:30:44.709Z", "contributors": [ - "_sollrei", - "gqqnbig", - "pantao" + "l613", + "flyingsouthwind", + "naive233", + "ziyunfei", + "x-false" ] }, - "Web/HTML/Element/center": { - "modified": "2019-03-23T22:10:15.013Z", + "Web/HTML/Element/spacer": { + "modified": "2019-03-23T22:10:12.608Z", "contributors": [ - "maoyumaoxun", "wizardforcel" ] }, - "Web/HTML/Element/cite": { - "modified": "2020-10-15T21:41:43.390Z", + "Web/HTML/Element/span": { + "modified": "2020-11-23T03:27:28.387Z", "contributors": [ - "Humilitas", - "yuyuanqiu", + "Ende93", + "mitaosi", "gafish", - "lucoo01", - "ma125120", - "King." - ] - }, - "Web/HTML/Element/code": { - "modified": "2019-03-23T23:19:07.452Z", - "contributors": [ - "ziyunfei", - "guoyunhebrave" + "wh.D", + "OlafCheng", + "King.", + "Fadeoc" ] }, - "Web/HTML/Element/col": { - "modified": "2019-04-13T00:08:55.934Z", + "Web/HTML/Element/strike": { + "modified": "2019-03-23T22:10:15.972Z", "contributors": [ - "Rominez", - "zxcvbnm", - "FredWe" + "wizardforcel" ] }, - "Web/HTML/Element/colgroup": { - "modified": "2020-10-15T21:37:46.269Z", + "Web/HTML/Element/strong": { + "modified": "2019-03-23T22:28:05.903Z", "contributors": [ - "RainSlide", - "Soyaine", - "PandaadnaP", - "FredWe" + "bobo159357456", + "liwenkang", + "coolguy" ] }, - "Web/HTML/Element/command": { - "modified": "2019-03-18T20:43:33.481Z", + "Web/HTML/Element/style": { + "modified": "2020-10-15T21:33:11.824Z", "contributors": [ - "wbamberg", - "practicemp", - "ziyunfei" + "dlnb526", + "VdoG", + "linghuam", + "RandyOu", + "mengzyou" ] }, - "Web/HTML/Element/content": { - "modified": "2019-03-23T22:10:12.369Z", + "Web/HTML/Element/sub": { + "modified": "2019-03-23T22:10:11.284Z", "contributors": [ "wizardforcel" ] }, - "Web/HTML/Element/data": { - "modified": "2020-10-15T21:28:38.554Z", - "contributors": [ - "RainSlide", - "hxl" - ] - }, - "Web/HTML/Element/datalist": { - "modified": "2020-10-15T21:19:07.919Z", + "Web/HTML/Element/summary": { + "modified": "2020-10-15T21:40:24.548Z", "contributors": [ - "gafish", - "zhangchen", - "mfranzke", - "wbamberg", - "Jianming", - "SphinxKnight", - "koaqiu", - "JulieLee77", - "ziyunfei" + "JulesWang", + "xgqfrms-GitHub", + "Martin.Chow" ] }, - "Web/HTML/Element/dd": { - "modified": "2019-03-23T22:39:17.576Z", + "Web/HTML/Element/sup": { + "modified": "2019-10-01T21:38:22.903Z", "contributors": [ - "zhuangyin", - "PoppinL" + "wizardforcel" ] }, - "Web/HTML/Element/del": { - "modified": "2020-10-15T21:44:56.125Z", + "Web/HTML/Element/table": { + "modified": "2020-10-15T21:37:19.437Z", "contributors": [ - "lastVigo", - "Ende93" + "Ende93", + "stormyyd", + "Toobubble", + "codevvvv9", + "xgqfrms-GitHub", + "eforegist", + "jdk137", + "studentytj", + "PandaadnaP", + "Simcookies", + "zhe13", + "hexiaoming", + "FredWe" ] }, - "Web/HTML/Element/details": { - "modified": "2020-10-15T21:40:23.093Z", + "Web/HTML/Element/td": { + "modified": "2020-10-15T21:37:19.273Z", "contributors": [ - "Sc0tt", "RainSlide", - "moquede", - "Jiang-Xuan", - "wh1msy", - "xgqfrms-GitHub", - "Martin.Chow" + "853419196", + "FredWe" ] }, - "Web/HTML/Element/dfn": { - "modified": "2020-08-14T22:28:54.156Z", + "Web/HTML/Element/template": { + "modified": "2020-10-15T21:31:49.045Z", "contributors": [ - "liujtani", - "harttle" + "zhangchen", + "sky5454", + "xgqfrms-GitHub", + "Breezewish" ] }, - "Web/HTML/Element/dialog": { - "modified": "2020-10-15T21:53:47.497Z", + "Web/HTML/Element/textarea": { + "modified": "2020-10-15T21:37:11.943Z", "contributors": [ - "bambooom", - "RainSlide", + "Carllllo", + "wuzhibo", + "gafish", "Bayes", - "xgqfrms-GitHub" + "xianjiezh", + "koaqiu", + "celinaYu", + "maicss", + "xgqfrms-GitHub", + "DeronLee", + "FredWe" ] }, - "Web/HTML/Element/dir": { - "modified": "2019-03-21T11:22:00.363Z", + "Web/HTML/Element/tfoot": { + "modified": "2020-10-15T22:04:34.366Z", "contributors": [ - "RainSlide", - "wizardforcel" + "nagisa", + "tomoru" ] }, - "Web/HTML/Element/div": { - "modified": "2020-10-15T21:37:14.662Z", + "Web/HTML/Element/th": { + "modified": "2020-10-15T21:59:42.026Z", "contributors": [ - "imdsc", - "guofai", - "BurNing1993", - "RainSlide", - "gafish", - "YunZhongZi", - "pantao", - "FredWe" + "853419196", + "silkey", + "levinweb" ] }, - "Web/HTML/Element/dl": { - "modified": "2020-04-29T06:50:25.527Z", + "Web/HTML/Element/thead": { + "modified": "2020-10-15T21:52:32.187Z", "contributors": [ - "tanshaobo", - "wenchuyang", - "zhuangyin", - "PoppinL", - "teoli", - "pantao" + "gafish", + "fscholz", + "gilking", + "xgqfrms-GitHub", + "wzvoid" ] }, - "Web/HTML/Element/dt": { - "modified": "2019-03-23T22:52:08.449Z", + "Web/HTML/Element/time": { + "modified": "2019-03-24T00:15:12.173Z", "contributors": [ - "PoppinL", - "pantao", - "FredWe" + "wbamberg", + "RandyOu", + "xunmorl", + "hxl", + "ziyunfei" ] }, - "Web/HTML/Element/element": { - "modified": "2019-03-23T22:13:42.917Z", + "Web/HTML/Element/title": { + "modified": "2020-10-15T21:41:22.327Z", "contributors": [ - "angelllls" + "dlnb526", + "tomcat1234", + "Annlix", + "venden" ] }, - "Web/HTML/Element/em": { - "modified": "2019-08-13T01:09:58.820Z", + "Web/HTML/Element/tr": { + "modified": "2020-12-10T03:16:48.200Z", "contributors": [ - "huxinsen", - "eMUQI", - "bobo159357456", - "xgqfrms", - "pantao" + "窦静杰", + "Bayes", + "zxcvbnm" ] }, - "Web/HTML/Element/embed": { - "modified": "2020-10-15T21:28:42.719Z", + "Web/HTML/Element/track": { + "modified": "2020-10-15T21:28:38.735Z", "contributors": [ - "RainSlide", - "chenos", + "lizheming", + "Alex-DMC", + "gafish", + "flyingsouthwind", + "wbamberg", + "naive233", "Martin.Chow", - "Startan" + "hxl" ] }, - "Web/HTML/Element/fieldset": { - "modified": "2020-10-15T21:49:19.693Z", + "Web/HTML/Element/tt": { + "modified": "2019-03-23T22:22:44.407Z", "contributors": [ - "Carllllo", - "lucoo01", - "ezirmusitua", - "abowloflrf", - "cyxlj" + "wizardforcel", + "sayNo123" ] }, - "Web/HTML/Element/figcaption": { - "modified": "2019-03-23T22:35:32.183Z", + "Web/HTML/Element/u": { + "modified": "2020-10-15T21:52:32.682Z", "contributors": [ + "liruiux", + "yuyuanqiu", + "gafish", "wizardforcel", - "travellingkite", - "Ende93" + "hawm" ] }, - "Web/HTML/Element/figure": { - "modified": "2020-10-15T21:38:52.140Z", + "Web/HTML/Element/ul": { + "modified": "2020-10-15T21:45:30.830Z", "contributors": [ + "xq20160912", "gafish", "RainSlide", - "lcw0622", - "ajfg93", - "Ende93", - "041008725", - "you0509" + "ChaunceyWang", + "TangiDing", + "Eternaldeath", + "kgojiwong", + "Invar", + "Ende93" ] }, - "Web/HTML/Element/font": { - "modified": "2019-03-23T22:10:03.224Z", + "Web/HTML/Element/var": { + "modified": "2020-10-15T21:40:23.614Z", "contributors": [ - "yinsang", - "wizardforcel" + "xgqfrms", + "Martin.Chow" ] }, - "Web/HTML/Element/footer": { - "modified": "2020-10-15T21:38:27.121Z", + "Web/HTML/Element/video": { + "modified": "2020-10-15T21:26:33.227Z", "contributors": [ - "gafish", - "Ende93", - "sweetliu", - "W.D.L" + "myy7362", + "Yangjia23", + "hahaaha", + "kirbey", + "DonSen", + "beautyTang", + "jnvf", + "Soyaine", + "wbamberg", + "Shangxin", + "esterTion", + "jfw10973", + "ziyunfei", + "hxl" ] }, - "Web/HTML/Element/form": { - "modified": "2020-10-15T21:14:51.331Z", + "Web/HTML/Element/wbr": { + "modified": "2020-10-15T21:55:23.940Z", "contributors": [ - "Clarkkkk", - "Carllllo", - "Daqin", - "xuiang", - "RainSlide", - "Alfxjx", - "l613", - "gafish", - "linjialiang", - "HJ8848", - "luzhe610", - "Structure88", - "wizardforcel", - "maicss", - "zrtalent", - "FredWe", - "ziyunfei", - "lenvens" + "Ende93", + "wizardforcel" ] }, - "Web/HTML/Element/frame": { - "modified": "2019-03-23T22:10:16.682Z", + "Web/HTML/Element/xmp": { + "modified": "2020-10-15T21:40:04.585Z", "contributors": [ - "wizardforcel" + "GitHub-XQ", + "RainSlide", + "Martin.Chow" ] }, - "Web/HTML/Element/frameset": { - "modified": "2020-10-15T21:48:59.254Z", + "Web/HTML/Global_attributes": { + "modified": "2020-10-15T21:24:25.636Z", "contributors": [ + "wangfangping", + "gafish", + "fangshuaituo", + "depcorn", + "nagisa", + "qihuanlu01", + "eforegist", "Ende93", + "sdc37h", + "Jasery", "xgqfrms-GitHub", - "Fogwind" + "hawm", + "OlafCheng", + "vicvinc", + "Shaoqiang.Zhang", + "zhangking", + "TimZhao", + "ziyunfei", + "bugknightyyp" ] }, - "Web/HTML/Element/head": { - "modified": "2020-10-15T21:31:48.499Z", + "Web/HTML/Global_attributes/accesskey": { + "modified": "2020-10-15T21:54:59.494Z", "contributors": [ + "zhangchen", "eforegist", - "jesse0x90", - "AlexChao" - ] - }, - "Web/HTML/Element/header": { - "modified": "2020-10-15T21:27:00.445Z", - "contributors": [ - "gafish", - "RainSlide", - "wbamberg", "ziyunfei", - "hutuxu" + "Ende93", + "wizardforcel", + "moque" ] }, - "Web/HTML/Element/hgroup": { - "modified": "2020-09-15T22:26:38.462Z", + "Web/HTML/Global_attributes/autocapitalize": { + "modified": "2020-10-15T22:07:56.542Z", "contributors": [ - "hellorayza", - "emanruoy", - "allan_simon", - "diqiuxin", - "Ende93" + "zhangchen", + "eforegist" ] }, - "Web/HTML/Element/hr": { - "modified": "2020-10-15T21:39:09.045Z", + "Web/HTML/Global_attributes/class": { + "modified": "2020-10-15T21:39:56.865Z", "contributors": [ - "mitaosi", - "tanshaobo", - "gafish", - "lucoo01", - "azheng", - "nicholas-yangding", - "Ende93", - "pantao" + "zhangchen", + "eforegist", + "YehaiChen", + "ChuckZhang", + "Feihei" ] }, - "Web/HTML/Element/html": { - "modified": "2020-10-15T21:37:17.396Z", + "Web/HTML/Global_attributes/contenteditable": { + "modified": "2020-10-15T21:37:25.983Z", "contributors": [ - "gafish", + "zhangchen", + "xgqfrms", "eforegist", - "xgqfrms-GitHub", - "thinklittle", - "VdoG", - "ruilee16", - "jesse0x90", - "jasonnn331", - "Ende93", - "FredWe" + "AlexChao" ] }, - "Web/HTML/Element/i": { - "modified": "2019-03-23T23:11:10.638Z", + "Web/HTML/Global_attributes/contextmenu": { + "modified": "2020-10-15T21:51:27.709Z", "contributors": [ - "StormBR1120", - "ccn1010", - "ranwu", - "pantao", - "Hey-Ray" + "SphinxKnight", + "eforegist", + "Ende93", + "shuangya" ] }, - "Web/HTML/Element/iframe": { - "modified": "2020-10-15T21:21:27.595Z", + "Web/HTML/Global_attributes/data-*": { + "modified": "2020-10-15T21:36:49.775Z", "contributors": [ - "卡尔维斯特", - "HHH-can", - "frankli0324", - "gafish", - "Aslower", - "hexianzhi", - "xgqfrms", - "wbamberg", - "GameWang", - "AlvinBlack", - "Ende93", - "shiddong", - "xuxun", + "wallena3", + "symant233", + "zhangchen", + "Bonlin0", + "eforegist", "xgqfrms-GitHub", - "hoyt", - "Marcia_gm", - "Sivan", - "ReyCG_sub", - "ziyunfei", - "monjer", - "Josephok", - "ZhangJianxiang" + "kameii", + "FredWe" ] }, - "Web/HTML/Element/image": { - "modified": "2019-03-30T00:32:55.632Z", + "Web/HTML/Global_attributes/dir": { + "modified": "2019-03-18T20:38:23.878Z", "contributors": [ - "raygift", - "hoyt" + "jdk137", + "mona" ] }, - "Web/HTML/Element/img": { - "modified": "2020-10-15T21:34:27.415Z", + "Web/HTML/Global_attributes/draggable": { + "modified": "2019-03-23T23:03:48.842Z", "contributors": [ - "liangmuyang", - "HaoyuA", - "XLCYun", - "RainSlide", - "LexieAlreadyTaken", - "imbant", - "zzykillu", - "gafish", - "Ahhaha233", - "Everain", - "iefreer", - "fuchao2012", - "anjia" + "TooBug" ] }, - "Web/HTML/Element/ins": { - "modified": "2020-10-15T21:39:08.740Z", + "Web/HTML/Global_attributes/hidden": { + "modified": "2020-10-08T07:06:44.011Z", "contributors": [ - "gafish", - "lastVigo", - "Martin.Chow", - "pantao" + "Martin730913", + "LeoQuote", + "wizardforcel", + "bestdream", + "gaopu" ] }, - "Web/HTML/Element/isindex": { - "modified": "2019-03-23T22:43:17.045Z", + "Web/HTML/Global_attributes/id": { + "modified": "2020-10-15T21:37:13.339Z", "contributors": [ - "Martin.Chow" + "shawn20111416", + "kidonng", + "YehaiChen", + "JoshuaLee", + "zhangyudan" ] }, - "Web/HTML/Element/kbd": { - "modified": "2019-08-13T06:01:57.840Z", + "Web/HTML/Global_attributes/inputmode": { + "modified": "2020-10-15T22:20:42.369Z", "contributors": [ - "kenneth55555", - "hoyt", - "perillasy" + "qiudongwei" ] }, - "Web/HTML/Element/keygen": { - "modified": "2019-04-05T05:50:18.178Z", + "Web/HTML/Global_attributes/is": { + "modified": "2020-10-15T22:04:17.093Z", "contributors": [ - "Ende93" + "Kollar93" ] }, - "Web/HTML/Element/label": { - "modified": "2020-10-15T21:34:28.099Z", + "Web/HTML/Global_attributes/itemid": { + "modified": "2019-03-23T22:10:08.155Z", "contributors": [ - "Carllllo", - "plusmultiply0", - "one-day-day", - "kuei0221", - "yuyuanqiu", - "loveyunk", "Ende93", - "tinunkai", - "codevvvv9", - "yinsang", - "xgqfrms-GitHub", - "TooBug", - "ObooChin", - "JulieLee77" + "wizardforcel" ] }, - "Web/HTML/Element/legend": { - "modified": "2020-10-15T21:28:02.232Z", + "Web/HTML/Global_attributes/itemprop": { + "modified": "2019-03-23T22:09:25.188Z", "contributors": [ - "Carllllo", - "xingzhi" + "xzy112233", + "MZI", + "bestdream" ] }, - "Web/HTML/Element/li": { - "modified": "2019-04-06T23:38:24.006Z", + "Web/HTML/Global_attributes/itemref": { + "modified": "2019-07-13T06:25:04.662Z", "contributors": [ - "lwj621", - "wizardforcel", - "changwu", - "JoshuaLee" + "wangfangping", + "Mukti", + "wizardforcel" ] }, - "Web/HTML/Element/link": { - "modified": "2020-10-15T21:43:08.607Z", + "Web/HTML/Global_attributes/itemscope": { + "modified": "2019-03-23T22:04:34.982Z", "contributors": [ - "woshiqiang1", - "mitaosi", - "dlnb526", - "Yayure", - "LINYI", - "seanyue", - "csideakevin", - "gafish", - "Blue-momo", - "wh.D", - "zhangqiangoffice", - "VdoG", - "sdc37h", - "zhengjianqiao", - "jethro2016", - "ZackBee", - "cissoid", - "jesse0x90", - "gqqnbig", - "041008725" + "codedrinker", + "Mukti" ] }, - "Web/HTML/Element/listing": { - "modified": "2019-03-23T22:10:12.488Z", + "Web/HTML/Global_attributes/itemtype": { + "modified": "2019-03-23T22:10:01.057Z", "contributors": [ "wizardforcel" ] }, - "Web/HTML/Element/main": { - "modified": "2020-10-15T21:34:53.469Z", + "Web/HTML/Global_attributes/lang": { + "modified": "2019-10-01T21:48:16.715Z", "contributors": [ - "panda2134", - "kidwen", - "RainSlide", - "agannwei", - "gafish", - "sun_all", - "Alexanderonepills", - "zhangchen", - "yuyang", - "beiweiqiang", - "pantao", - "holynewbie", - "TANRUI", - "oxygen16" + "wangfangping", + "wizardforcel" ] }, - "Web/HTML/Element/map": { - "modified": "2020-06-30T05:42:09.220Z", + "Web/HTML/Global_attributes/part": { + "modified": "2020-10-15T22:31:54.138Z", "contributors": [ - "ikomom", - "Feel-Joy", - "wizardforcel", - "xycd", - "naive233" + "wuding" ] }, - "Web/HTML/Element/mark": { - "modified": "2020-01-10T01:04:18.292Z", + "Web/HTML/Global_attributes/slot": { + "modified": "2020-10-15T21:55:11.414Z", "contributors": [ - "yuyuanqiu", - "XiaoWinter", - "puppyer", - "Benjamin-Smith", - "looso", - "iigmir", - "Byronic94", - "marchen" + "zhangchen", + "wizardforcel" ] }, - "Web/HTML/Element/marquee": { - "modified": "2019-03-23T22:16:10.183Z", + "Web/HTML/Global_attributes/spellcheck": { + "modified": "2019-03-23T22:18:18.900Z", "contributors": [ - "siyecao", - "Easton605", "wizardforcel", - "viazure", - "snovey" + "xcffl", + "fjh352", + "xgqfrms-GitHub" ] }, - "Web/HTML/Element/menu": { - "modified": "2020-10-15T21:37:16.105Z", + "Web/HTML/Global_attributes/style": { + "modified": "2019-03-23T22:10:06.901Z", "contributors": [ - "RainSlide", - "yuyx91", - "kgojiwong", - "pantao", - "holynewbie" + "wizardforcel" ] }, - "Web/HTML/Element/menuitem": { - "modified": "2020-10-15T21:58:27.361Z", + "Web/HTML/Global_attributes/tabindex": { + "modified": "2020-10-15T21:55:15.899Z", "contributors": [ - "RainSlide", - "wangxuedongovo" + "xrkffgg", + "zhangchen", + "fjh352", + "wizardforcel" ] }, - "Web/HTML/Element/meta": { - "modified": "2020-10-15T21:34:02.227Z", + "Web/HTML/Global_attributes/title": { + "modified": "2020-03-11T07:59:38.824Z", "contributors": [ - "RainSlide", - "Carllllo", - "chanvin", - "dlnb526", - "vanestone", - "xq20160912", - "ceido", - "Bayes", - "VdoG", - "zxsunrise", - "wpc1403s2", - "fsx950223", - "yellow-lines", - "yunikoro", - "scl930227", - "daixinye", - "zt2", - "Noly1990", - "aimiy", - "clarkzsd", - "qixi", - "xgqfrms-GitHub", - "wangdapeng1005", - "zhouyu1993", - "SolitudeRA", - "Annlix", - "littlee", - "pantao", - "SimplyY", - "Fadeoc" + "YangYihui", + "monkeyDyang", + "wizardforcel" ] }, - "Web/HTML/Element/meta/name": { - "modified": "2020-10-15T22:33:39.182Z", + "Web/HTML/Global_attributes/translate": { + "modified": "2019-06-05T06:41:04.292Z", "contributors": [ - "RainSlide", - "hanochrosebush" + "Martin.Chow" ] }, - "Web/HTML/Element/meter": { - "modified": "2019-03-23T22:20:26.204Z", + "Web/HTML/Index": { + "modified": "2019-03-21T11:52:09.419Z", "contributors": [ - "hoyt" + "RainSlide", + "xcffl" ] }, - "Web/HTML/Element/multicol": { - "modified": "2019-03-23T22:18:36.663Z", + "Web/HTML/Inline_elements": { + "modified": "2020-08-05T19:04:54.777Z", "contributors": [ - "wizardforcel", - "xgqfrms-GitHub" + "mitaosi", + "chrisdavidmills", + "Raine_Huang", + "FredWe", + "ziyunfei", + "pmtao" ] }, - "Web/HTML/Element/nav": { - "modified": "2020-10-15T21:26:27.913Z", + "Web/HTML/Link_types": { + "modified": "2020-10-15T21:31:40.375Z", "contributors": [ + "chanvin", + "Yayure", "gafish", - "wbamberg", - "yatace", - "ziyunfei", - "TimZhao", - "bowen-shi" + "JuliusKingsley", + "songlime", + "liutongshuo", + "idlefire", + "hstarorg", + "Ende93", + "grtreexyz", + "blue0125", + "Breezewish" ] }, - "Web/HTML/Element/nextid": { - "modified": "2020-10-15T22:25:21.460Z", + "Web/HTML/Link_types/prefetch": { + "modified": "2020-10-15T22:29:06.249Z", "contributors": [ - "pans9" + "chanvin" ] }, - "Web/HTML/Element/nobr": { - "modified": "2019-03-23T22:10:16.065Z", + "Web/HTML/Link_types/preload": { + "modified": "2020-10-15T22:29:06.417Z", "contributors": [ - "wizardforcel" + "chanvin" ] }, - "Web/HTML/Element/noembed": { - "modified": "2019-03-23T22:10:11.377Z", + "Web/HTML/Microdata": { + "modified": "2019-07-13T06:56:53.858Z", "contributors": [ - "wizardforcel" + "wangfangping" ] }, - "Web/HTML/Element/noframes": { - "modified": "2019-03-23T22:10:12.853Z", + "Web/HTML/Preloading_content": { + "modified": "2020-06-09T23:26:32.370Z", "contributors": [ - "wizardforcel" + "huyue", + "chanvin", + "sutaojie", + "haoliangwu", + "Axue", + "ldwformat" ] }, - "Web/HTML/Element/noscript": { - "modified": "2020-10-15T21:41:44.231Z", + "Web/HTML/Quirks_Mode_and_Standards_Mode": { + "modified": "2020-01-30T04:57:28.634Z", "contributors": [ - "gafish", - "Serendipity96", - "williamjing", - "xgqfrms-GitHub", - "wleonid" + "RainSlide", + "Kacoo", + "chrisdavidmills", + "iigmir", + "anfGG8G0G8" ] }, - "Web/HTML/Element/object": { - "modified": "2020-10-15T21:25:11.550Z", + "Web/HTML/Reference": { + "modified": "2019-09-09T07:23:44.694Z", "contributors": [ - "gafish", - "zaixuzheng", - "Martin.Chow", - "ziyunfei", - "TimZhao" + "SphinxKnight", + "wbamberg", + "FredWe", + "Breezewish" ] }, - "Web/HTML/Element/ol": { - "modified": "2020-10-15T21:37:41.454Z", + "Web/HTML/Using_the_application_cache": { + "modified": "2019-10-29T05:43:20.065Z", "contributors": [ - "RainSlide", - "gafish", - "fcg55254", - "nuo2000", - "benpigchu", - "tcatche", - "Ende93", - "dongnanzhan", - "FredWe" + "7NZ", + "xgqfrms-GitHub", + "eforegist", + "liuzeyafzy", + "nianiaJR", + "shajiquan", + "hdwills", + "teoli", + "fsy0718", + "sunnylost", + "karsa.si" ] }, - "Web/HTML/Element/optgroup": { - "modified": "2020-10-15T21:48:34.575Z", + "Web/HTTP": { + "modified": "2020-08-27T09:08:49.830Z", "contributors": [ - "Carllllo", - "shinnqy" + "Lsnsh", + "dujun", + "RainSlide", + "taoyouh", + "shengjieli", + "userand", + "syt-honey", + "Pengfei", + "zhuangyin", + "JamieYang", + "xuxun", + "Ende93", + "xgqfrms-GitHub", + "sunnylost", + "cissoid", + "TomasRan", + "DreamerKing", + "ziyunfei" ] }, - "Web/HTML/Element/option": { - "modified": "2020-10-15T21:37:43.170Z", + "Web/HTTP/Authentication": { + "modified": "2020-01-19T22:05:27.998Z", "contributors": [ - "Carllllo", - "wizardforcel", - "King.", - "ziyunfei", - "zhache12345" + "cekingLu", + "gsxuan", + "zjffun", + "fanjieqi", + "rianma", + "wangpin", + "crper", + "WayneCui", + "GeJusdot", + "thomastao0215" ] }, - "Web/HTML/Element/output": { - "modified": "2020-10-15T21:41:37.216Z", + "Web/HTTP/Basics_of_HTTP": { + "modified": "2020-05-07T23:19:31.676Z", "contributors": [ - "wbamberg", - "zhangchen", - "King." + "Filon", + "HardcorePhysician", + "Yayure", + "695919451", + "BobGreen", + "magiclyde", + "cissoid" ] }, - "Web/HTML/Element/p": { - "modified": "2019-03-23T23:14:26.595Z", + "Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs": { + "modified": "2019-03-23T22:18:43.282Z", "contributors": [ - "Adashuai5", - "MrZhang", + "zqyue", "Ende93", - "FredWe", - "xingzhi" + "xgqfrms-GitHub", + "ziyunfei", + "chaos_zhang" ] }, - "Web/HTML/Element/param": { - "modified": "2020-10-15T21:50:13.073Z", + "Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP": { + "modified": "2020-02-20T03:41:08.272Z", "contributors": [ - "gafish", - "JinRong.Yang", - "naive233" + "Babyfaceqian", + "XFJGitHub", + "lc-soft", + "BobGreen", + "enjolras1205", + "zihengCat", + "GuoShuai", + "Haruhi", + "huangchanghuan", + "keifergu", + "JsonLi", + "WeijieZhu" ] }, - "Web/HTML/Element/picture": { - "modified": "2020-10-15T21:48:04.092Z", + "Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web": { + "modified": "2019-05-06T05:35:10.899Z", "contributors": [ - "imba-tjd", - "yisibl", - "PoppinL" + "wolfzZ", + "heyv5", + "springapple", + "Wendy_Love", + "yuankunzhang", + "little-tomorrow", + "DreamerKing" ] }, - "Web/HTML/Element/plaintext": { - "modified": "2019-03-23T22:10:03.107Z", + "Web/HTTP/Basics_of_HTTP/MIME_types": { + "modified": "2020-11-04T00:16:29.009Z", "contributors": [ - "wizardforcel" + "lujjjh", + "andysongs", + "rascalquan", + "BobGreen", + "NewbieAndy", + "zhangchen", + "xgqfrms-GitHub", + "w11th", + "YuriTu" ] }, - "Web/HTML/Element/pre": { - "modified": "2020-10-15T21:39:48.026Z", + "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": { + "modified": "2020-02-28T13:11:23.222Z", "contributors": [ - "gafish", + "chrisdavidmills", + "RainSlide", + "qq58553442", + "sam-dingkang", "xgqfrms-GitHub", - "jiangseventeen", - "VdoG", - "Ende93", - "pengliheng" + "choury", + "pasturn" ] }, - "Web/HTML/Element/progress": { - "modified": "2020-10-15T21:05:48.761Z", + "Web/HTTP/Browser_detection_using_the_user_agent": { + "modified": "2019-03-23T22:26:23.825Z", "contributors": [ - "wonschangge", - "mkckr0", - "fscholz", - "wbamberg", - "ziyunfei", - "ethertank" + "xgqfrms-GitHub", + "konrumi", + "Leogh", + "jianyi1995" ] }, - "Web/HTML/Element/q": { - "modified": "2020-10-15T21:44:22.274Z", + "Web/HTTP/CORS/Errors": { + "modified": "2019-05-27T00:23:38.306Z", "contributors": [ - "kenneth55555", - "fscholz", - "Zyan", - "Ende93", - "Jiang-Xuan" + "waka3", + "nchevobbe", + "luna666", + "Sheppy" ] }, - "Web/HTML/Element/rb": { - "modified": "2020-10-15T22:14:32.981Z", + "Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin": { + "modified": "2019-07-18T02:34:22.209Z", "contributors": [ - "richardmyu", - "zhaohaodang", - "astak" + "PYGC", + "ty1921" ] }, - "Web/HTML/Element/rp": { - "modified": "2020-05-03T03:15:11.285Z", + "Web/HTTP/CORS/Errors/CORSDidNotSucceed": { + "modified": "2019-07-29T07:01:42.837Z", "contributors": [ - "tangallison2", - "wizardforcel" + "crvdgc", + "levo2165", + "luna666" ] }, - "Web/HTML/Element/rt": { - "modified": "2019-04-18T06:06:40.759Z", + "Web/HTTP/CORS/Errors/CORSDisabled": { + "modified": "2019-05-09T05:04:22.066Z", "contributors": [ - "Yujiyang", - "Benjamin-Smith", - "wizardforcel" + "luna666" ] }, - "Web/HTML/Element/rtc": { - "modified": "2019-04-18T06:06:45.477Z", + "Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed": { + "modified": "2019-03-18T21:29:51.027Z", "contributors": [ - "wizardforcel" + "luna666" ] }, - "Web/HTML/Element/ruby": { - "modified": "2020-10-15T21:40:22.004Z", + "Web/HTTP/CORS/Errors/CORSMethodNotFound": { + "modified": "2019-08-27T04:22:52.153Z", "contributors": [ - "xgqfrms", - "studyMakesMeHappy", - "zhangchen", - "Roger-WIN", - "wizardforcel", - "Martin.Chow" + "laingke" ] }, - "Web/HTML/Element/s": { - "modified": "2020-10-15T21:55:24.184Z", + "Web/HTTP/CORS/Errors/CORSMissingAllowOrigin": { + "modified": "2019-03-18T21:22:06.783Z", "contributors": [ - "gafish", - "wizardforcel" + "zhangchen", + "coderyyx" ] }, - "Web/HTML/Element/samp": { - "modified": "2019-03-23T22:33:11.911Z", + "Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed": { + "modified": "2019-10-30T01:07:54.026Z", "contributors": [ - "luobotang" + "Fimreal" ] }, - "Web/HTML/Element/script": { - "modified": "2020-08-05T19:13:19.581Z", + "Web/HTTP/CORS/Errors/CORSNotSupportingCredentials": { + "modified": "2019-06-16T23:37:59.140Z", "contributors": [ - "mitaosi", - "michalska.lucyna88", - "harryzcy", - "namklaw", - "heekei", - "Soy", - "unclesamnumberone", - "Jackandjohn", - "xhlsrj", - "xgqfrms-GitHub", - "Ende93", - "ahwassa", - "gqqnbig", - "fskuok" + "feiyuerenhai" ] }, - "Web/HTML/Element/section": { - "modified": "2020-10-15T21:22:44.033Z", + "Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded": { + "modified": "2019-03-18T21:29:48.470Z", "contributors": [ - "shawn20111416", - "gafish", - "wbamberg", - "kevinfszu", - "Annlix", - "ziyunfei", - "TimZhao" + "luna666" ] }, - "Web/HTML/Element/select": { - "modified": "2020-10-15T21:27:52.792Z", + "Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed": { + "modified": "2019-03-18T21:17:44.250Z", "contributors": [ - "Carllllo", - "zhangchen", - "wbamberg", - "pavilion2t", - "DUHZ", - "brandonzhu", - "ReyCG", - "ziyunfei" + "MinimalistYing" ] }, - "Web/HTML/Element/slot": { - "modified": "2020-10-15T21:54:42.237Z", + "Web/HTTP/CORS/Errors/CORSRequestNotHttp": { + "modified": "2019-09-20T04:35:01.396Z", "contributors": [ - "Jennyshining", - "xgqfrms", - "maicss", - "n313893254" + "RainSlide", + "grape", + "xuyuehang", + "luna666" ] }, - "Web/HTML/Element/small": { - "modified": "2020-10-15T21:51:17.821Z", + "Web/HTTP/CSP": { + "modified": "2020-10-15T21:34:44.353Z", "contributors": [ - "gafish", - "wizardforcel", - "rollinhup", - "Tidejade" + "fanjieqi", + "phodal", + "ceido", + "jwhitlock", + "ldwformat", + "wang1dot0", + "WayneCui", + "xgqfrms-GitHub", + "zhang-quan-yi", + "hxl", + "zhi.lin", + "yuankunzhang", + "ziyunfei", + "Breezewish" ] }, - "Web/HTML/Element/source": { - "modified": "2019-07-01T10:30:44.709Z", + "Web/HTTP/Compression": { + "modified": "2019-06-20T00:32:44.768Z", "contributors": [ - "l613", - "flyingsouthwind", - "naive233", - "ziyunfei", - "x-false" + "liangzhaorong", + "BobGreen", + "zhangchen", + "WayneCui" ] }, - "Web/HTML/Element/spacer": { - "modified": "2019-03-23T22:10:12.608Z", + "Web/HTTP/Conditional_requests": { + "modified": "2019-09-19T06:11:16.911Z", "contributors": [ - "wizardforcel" + "leah_humlelu", + "Trendymen", + "xianweics", + "WayneCui" ] }, - "Web/HTML/Element/span": { - "modified": "2020-11-23T03:27:28.387Z", + "Web/HTTP/Configuring_servers_for_Ogg_media": { + "modified": "2019-12-27T03:08:09.838Z", "contributors": [ - "Ende93", - "mitaosi", - "gafish", - "wh.D", - "OlafCheng", - "King.", - "Fadeoc" + "Syaki" ] }, - "Web/HTML/Element/strike": { - "modified": "2019-03-23T22:10:15.972Z", + "Web/HTTP/Connection_management_in_HTTP_1.x": { + "modified": "2019-11-07T04:16:26.733Z", "contributors": [ - "wizardforcel" + "woshiqiang1", + "Jack.Works", + "HardcorePhysician", + "jianglinghao", + "YiBanCangBai", + "guoshencheng", + "fanjieqi", + "athena0304", + "springapple", + "shaunlee" ] }, - "Web/HTML/Element/strong": { - "modified": "2019-03-23T22:28:05.903Z", + "Web/HTTP/Content_negotiation": { + "modified": "2020-10-08T10:02:32.752Z", "contributors": [ - "bobo159357456", - "liwenkang", - "coolguy" + "mh47838704", + "SunnyWind", + "lhc0101", + "WayneCui" ] }, - "Web/HTML/Element/style": { - "modified": "2020-10-15T21:33:11.824Z", + "Web/HTTP/Cookies": { + "modified": "2020-10-13T05:17:34.094Z", "contributors": [ - "dlnb526", - "VdoG", - "linghuam", - "RandyOu", - "mengzyou" + "fzhyzamt", + "dake0805", + "RoXoM", + "ysqzhang", + "zh244135370", + "luvsunlight", + "mingzhang6", + "rascalquan", + "houyewei", + "huangyingjie", + "zihengCat", + "lc-soft", + "zhang-hongwei", + "yenshen", + "keifergu", + "FideoJ", + "AlenQi", + "sintrb", + "jdk137", + "charlie" ] }, - "Web/HTML/Element/sub": { - "modified": "2019-03-23T22:10:11.284Z", + "Web/HTTP/Headers": { + "modified": "2020-05-20T02:33:50.716Z", "contributors": [ - "wizardforcel" + "spe-shun", + "cy234", + "c1er", + "Bayes", + "Jacksonary", + "rikkif", + "Weix", + "xgqfrms-GitHub", + "AlenQi", + "linzhixiong" ] }, - "Web/HTML/Element/summary": { - "modified": "2020-10-15T21:40:24.548Z", + "Web/HTTP/Headers/Accept": { + "modified": "2020-10-15T21:50:50.340Z", "contributors": [ - "JulesWang", + "xiaozhaofu", + "WayneCui", "xgqfrms-GitHub", - "Martin.Chow" + "stevobm" ] }, - "Web/HTML/Element/sup": { - "modified": "2019-10-01T21:38:22.903Z", + "Web/HTTP/Headers/Accept-CH": { + "modified": "2020-10-15T22:24:12.153Z", "contributors": [ - "wizardforcel" + "xuhui98" ] }, - "Web/HTML/Element/table": { - "modified": "2020-10-15T21:37:19.437Z", + "Web/HTTP/Headers/Accept-CH-Lifetime": { + "modified": "2020-10-15T22:25:10.809Z", "contributors": [ - "Ende93", - "stormyyd", - "Toobubble", - "codevvvv9", - "xgqfrms-GitHub", - "eforegist", - "jdk137", - "studentytj", - "PandaadnaP", - "Simcookies", - "zhe13", - "hexiaoming", - "FredWe" + "chen3feng" ] }, - "Web/HTML/Element/td": { - "modified": "2020-10-15T21:37:19.273Z", + "Web/HTTP/Headers/Accept-Charset": { + "modified": "2020-10-15T21:50:53.082Z", "contributors": [ - "RainSlide", - "853419196", - "FredWe" + "shinken008", + "Dorllen", + "WayneCui", + "xgqfrms-GitHub" ] }, - "Web/HTML/Element/template": { - "modified": "2020-10-15T21:31:49.045Z", + "Web/HTTP/Headers/Accept-Encoding": { + "modified": "2020-10-15T21:53:10.909Z", "contributors": [ - "zhangchen", - "sky5454", - "xgqfrms-GitHub", - "Breezewish" + "xiaozhaofu", + "WayneCui", + "felixwang-1989", + "yt449", + "xgqfrms-GitHub" ] }, - "Web/HTML/Element/textarea": { - "modified": "2020-10-15T21:37:11.943Z", + "Web/HTTP/Headers/Accept-Language": { + "modified": "2020-10-15T21:53:13.880Z", "contributors": [ - "Carllllo", - "wuzhibo", - "gafish", - "Bayes", - "xianjiezh", - "koaqiu", - "celinaYu", - "maicss", - "xgqfrms-GitHub", - "DeronLee", - "FredWe" + "ran", + "RainSlide", + "WayneCui", + "yuankunzhang" ] }, - "Web/HTML/Element/tfoot": { - "modified": "2020-10-15T22:04:34.366Z", + "Web/HTTP/Headers/Accept-Patch": { + "modified": "2020-10-15T22:19:49.009Z", "contributors": [ - "nagisa", - "tomoru" + "Sod-Momas" ] }, - "Web/HTML/Element/th": { - "modified": "2020-10-15T21:59:42.026Z", + "Web/HTTP/Headers/Accept-Ranges": { + "modified": "2020-10-15T21:54:15.134Z", "contributors": [ - "853419196", - "silkey", - "levinweb" + "Vincent-Hy", + "km-c", + "JianmingXia", + "crper", + "shevacjs" ] }, - "Web/HTML/Element/thead": { - "modified": "2020-10-15T21:52:32.187Z", + "Web/HTTP/Headers/Access-Control-Allow-Credentials": { + "modified": "2020-10-15T21:51:29.367Z", "contributors": [ - "gafish", + "deping_chen", + "Bayes", + "xiasha", "fscholz", - "gilking", - "xgqfrms-GitHub", - "wzvoid" + "crper", + "keqingrong", + "TiaossuP", + "tty4" ] }, - "Web/HTML/Element/time": { - "modified": "2019-03-24T00:15:12.173Z", + "Web/HTTP/Headers/Access-Control-Allow-Headers": { + "modified": "2020-10-15T21:54:48.443Z", "contributors": [ - "wbamberg", - "RandyOu", - "xunmorl", - "hxl", - "ziyunfei" + "GuoYaxiang", + "shadowkimi520", + "Soyaine", + "WayneCui" ] }, - "Web/HTML/Element/title": { - "modified": "2020-10-15T21:41:22.327Z", + "Web/HTTP/Headers/Access-Control-Allow-Methods": { + "modified": "2020-10-15T21:54:49.842Z", "contributors": [ - "dlnb526", - "tomcat1234", - "Annlix", - "venden" + "Jat", + "crper", + "WayneCui" ] }, - "Web/HTML/Element/tr": { - "modified": "2020-12-10T03:16:48.200Z", + "Web/HTTP/Headers/Access-Control-Allow-Origin": { + "modified": "2020-10-15T21:52:46.095Z", "contributors": [ - "窦静杰", - "Bayes", - "zxcvbnm" + "TiaossuP", + "konrumi" ] }, - "Web/HTML/Element/track": { - "modified": "2020-10-15T21:28:38.735Z", + "Web/HTTP/Headers/Access-Control-Expose-Headers": { + "modified": "2020-10-15T21:54:48.426Z", "contributors": [ - "lizheming", - "Alex-DMC", - "gafish", - "flyingsouthwind", - "wbamberg", - "naive233", - "Martin.Chow", - "hxl" + "lijsh", + "WayneCui" ] }, - "Web/HTML/Element/tt": { - "modified": "2019-03-23T22:22:44.407Z", + "Web/HTTP/Headers/Access-Control-Max-Age": { + "modified": "2020-10-15T21:54:52.194Z", "contributors": [ - "wizardforcel", - "sayNo123" + "zkerhcy", + "xiaozhaofu", + "jinliming2", + "crper", + "WayneCui" ] }, - "Web/HTML/Element/u": { - "modified": "2020-10-15T21:52:32.682Z", + "Web/HTTP/Headers/Access-Control-Request-Headers": { + "modified": "2020-10-15T21:54:29.946Z", "contributors": [ - "liruiux", - "yuyuanqiu", - "gafish", - "wizardforcel", - "hawm" + "xiaozhaofu", + "crper", + "WayneCui", + "xgqfrms-GitHub" ] }, - "Web/HTML/Element/ul": { - "modified": "2020-10-15T21:45:30.830Z", + "Web/HTTP/Headers/Access-Control-Request-Method": { + "modified": "2020-10-15T21:54:31.833Z", "contributors": [ - "xq20160912", - "gafish", - "RainSlide", - "ChaunceyWang", - "TangiDing", - "Eternaldeath", - "kgojiwong", - "Invar", - "Ende93" + "xiaozhaofu", + "WayneCui", + "xgqfrms-GitHub" ] }, - "Web/HTML/Element/var": { - "modified": "2020-10-15T21:40:23.614Z", + "Web/HTTP/Headers/Age": { + "modified": "2020-10-15T21:54:37.562Z", "contributors": [ - "xgqfrms", - "Martin.Chow" + "wangtongchao", + "fscholz", + "crper", + "WayneCui" ] }, - "Web/HTML/Element/video": { - "modified": "2020-10-15T21:26:33.227Z", + "Web/HTTP/Headers/Allow": { + "modified": "2019-03-23T22:14:32.513Z", "contributors": [ - "myy7362", - "Yangjia23", - "hahaaha", - "kirbey", - "DonSen", - "beautyTang", - "jnvf", - "Soyaine", - "wbamberg", - "Shangxin", - "esterTion", - "jfw10973", - "ziyunfei", - "hxl" + "yuankunzhang" ] }, - "Web/HTML/Element/wbr": { - "modified": "2020-10-15T21:55:23.940Z", + "Web/HTTP/Headers/Alt-Svc": { + "modified": "2020-10-15T22:12:25.895Z", "contributors": [ - "Ende93", - "wizardforcel" + "liuhaoXD", + "Light.G" ] }, - "Web/HTML/Element/xmp": { - "modified": "2020-10-15T21:40:04.585Z", + "Web/HTTP/Headers/Authorization": { + "modified": "2019-03-23T22:11:31.823Z", "contributors": [ - "GitHub-XQ", - "RainSlide", - "Martin.Chow" + "Bayes", + "crper", + "WayneCui" ] }, - "Web/HTML/Focus_management_in_HTML": { - "modified": "2019-03-23T23:31:56.410Z", + "Web/HTTP/Headers/Cache-Control": { + "modified": "2020-10-15T21:50:34.341Z", "contributors": [ - "xgqfrms-GitHub", - "kmc947373", - "sxxxsz", - "Breezewish", - "teoli", - "sunnylost" + "kidonng", + "woshiqiang1", + "DanielCui", + "taoyouh", + "tenghuanhe", + "ngulee", + "kaliExist", + "wangtongchao", + "marsorsun", + "cnc233", + "codevvvv9", + "pearzl", + "tianyuqingkong", + "zliy", + "NatureFeng", + "schickal", + "fscholz", + "shaunsxj", + "paranoidjk", + "visten" ] }, - "Web/HTML/Global_attributes": { - "modified": "2020-10-15T21:24:25.636Z", + "Web/HTTP/Headers/Clear-Site-Data": { + "modified": "2020-10-15T22:07:13.779Z", "contributors": [ - "wangfangping", - "gafish", - "fangshuaituo", - "depcorn", - "nagisa", - "qihuanlu01", - "eforegist", - "Ende93", - "sdc37h", - "Jasery", - "xgqfrms-GitHub", - "hawm", - "OlafCheng", - "vicvinc", - "Shaoqiang.Zhang", - "zhangking", - "TimZhao", - "ziyunfei", - "bugknightyyp" + "bershanskiy", + "wangtongchao" ] }, - "Web/HTML/Global_attributes/accesskey": { - "modified": "2020-10-15T21:54:59.494Z", + "Web/HTTP/Headers/Connection": { + "modified": "2020-10-15T21:51:42.086Z", "contributors": [ - "zhangchen", - "eforegist", - "ziyunfei", - "Ende93", - "wizardforcel", - "moque" + "zhuguibiao", + "ujsxn", + "shinyoo" ] }, - "Web/HTML/Global_attributes/autocapitalize": { - "modified": "2020-10-15T22:07:56.542Z", + "Web/HTTP/Headers/Content-Disposition": { + "modified": "2020-11-15T00:23:13.412Z", "contributors": [ - "zhangchen", - "eforegist" + "Alan-Liang", + "xiaozhaofu", + "WayneCui", + "icaoweiwei", + "JavacPro" ] }, - "Web/HTML/Global_attributes/class": { - "modified": "2020-10-15T21:39:56.865Z", + "Web/HTTP/Headers/Content-Encoding": { + "modified": "2020-10-15T21:54:51.398Z", "contributors": [ - "zhangchen", - "eforegist", - "YehaiChen", - "ChuckZhang", - "Feihei" + "DynamicAnt", + "WayneCui" ] }, - "Web/HTML/Global_attributes/contenteditable": { - "modified": "2020-10-15T21:37:25.983Z", + "Web/HTTP/Headers/Content-Language": { + "modified": "2020-10-15T21:54:49.923Z", "contributors": [ - "zhangchen", - "xgqfrms", - "eforegist", - "AlexChao" + "HankXu", + "yuantongkang", + "WayneCui" ] }, - "Web/HTML/Global_attributes/contextmenu": { - "modified": "2020-10-15T21:51:27.709Z", + "Web/HTTP/Headers/Content-Length": { + "modified": "2020-10-15T21:54:51.554Z", "contributors": [ - "SphinxKnight", - "eforegist", - "Ende93", - "shuangya" + "rascalquan", + "WayneCui" ] }, - "Web/HTML/Global_attributes/data-*": { - "modified": "2020-10-15T21:36:49.775Z", + "Web/HTTP/Headers/Content-Location": { + "modified": "2020-10-15T21:54:51.676Z", "contributors": [ - "wallena3", - "symant233", - "zhangchen", - "Bonlin0", - "eforegist", - "xgqfrms-GitHub", - "kameii", - "FredWe" + "WayneCui" ] }, - "Web/HTML/Global_attributes/dir": { - "modified": "2019-03-18T20:38:23.878Z", + "Web/HTTP/Headers/Content-Range": { + "modified": "2020-10-15T21:54:39.510Z", "contributors": [ - "jdk137", - "mona" + "WayneCui" ] }, - "Web/HTML/Global_attributes/draggable": { - "modified": "2019-03-23T23:03:48.842Z", + "Web/HTTP/Headers/Content-Security-Policy": { + "modified": "2020-10-15T21:51:40.481Z", "contributors": [ - "TooBug" + "xiao11lang", + "hq5544", + "SphinxKnight", + "lowerpierman", + "taoyouh", + "imba-tjd", + "lvgg3271", + "alan199355", + "anchen", + "9ii", + "Forbidden", + "crper", + "lcw0622", + "SuunZhu" ] }, - "Web/HTML/Global_attributes/dropzone": { - "modified": "2019-03-23T22:10:15.156Z", + "Web/HTTP/Headers/Content-Security-Policy-Report-Only": { + "modified": "2020-10-15T21:55:30.073Z", "contributors": [ - "wizardforcel" + "Pada" ] }, - "Web/HTML/Global_attributes/hidden": { - "modified": "2020-10-08T07:06:44.011Z", + "Web/HTTP/Headers/Content-Security-Policy/base-uri": { + "modified": "2020-10-15T21:56:06.256Z", "contributors": [ - "Martin730913", - "LeoQuote", - "wizardforcel", - "bestdream", - "gaopu" + "SphinxKnight", + "WayneCui" ] }, - "Web/HTML/Global_attributes/id": { - "modified": "2020-10-15T21:37:13.339Z", + "Web/HTTP/Headers/Content-Security-Policy/block-all-mixed-content": { + "modified": "2020-10-15T21:56:06.231Z", "contributors": [ - "shawn20111416", - "kidonng", - "YehaiChen", - "JoshuaLee", - "zhangyudan" + "SphinxKnight", + "WayneCui" ] }, - "Web/HTML/Global_attributes/inputmode": { - "modified": "2020-10-15T22:20:42.369Z", + "Web/HTTP/Headers/Content-Security-Policy/child-src": { + "modified": "2020-10-15T22:22:07.630Z", "contributors": [ - "qiudongwei" + "SphinxKnight", + "1930082875" ] }, - "Web/HTML/Global_attributes/is": { - "modified": "2020-10-15T22:04:17.093Z", + "Web/HTTP/Headers/Content-Security-Policy/connect-src": { + "modified": "2020-10-15T22:04:24.950Z", "contributors": [ - "Kollar93" + "SphinxKnight", + "shevacjs" ] }, - "Web/HTML/Global_attributes/itemid": { - "modified": "2019-03-23T22:10:08.155Z", + "Web/HTTP/Headers/Content-Security-Policy/default-src": { + "modified": "2020-10-15T21:55:35.542Z", "contributors": [ - "Ende93", - "wizardforcel" + "SphinxKnight", + "eachcan", + "shevacjs", + "Forbidden", + "WayneCui", + "EEord" ] }, - "Web/HTML/Global_attributes/itemprop": { - "modified": "2019-03-23T22:09:25.188Z", + "Web/HTTP/Headers/Content-Security-Policy/font-src": { + "modified": "2020-10-15T22:11:53.390Z", "contributors": [ - "xzy112233", - "MZI", - "bestdream" + "SphinxKnight", + "eachcan" ] }, - "Web/HTML/Global_attributes/itemref": { - "modified": "2019-07-13T06:25:04.662Z", + "Web/HTTP/Headers/Content-Security-Policy/form-action": { + "modified": "2020-10-15T22:20:11.267Z", "contributors": [ - "wangfangping", - "Mukti", - "wizardforcel" + "SphinxKnight", + "feiyuerenhai" ] }, - "Web/HTML/Global_attributes/itemscope": { - "modified": "2019-03-23T22:04:34.982Z", + "Web/HTTP/Headers/Content-Security-Policy/frame-ancestors": { + "modified": "2020-10-15T21:56:28.759Z", "contributors": [ - "codedrinker", - "Mukti" + "SphinxKnight", + "ldwformat" ] }, - "Web/HTML/Global_attributes/itemtype": { - "modified": "2019-03-23T22:10:01.057Z", + "Web/HTTP/Headers/Content-Security-Policy/report-to": { + "modified": "2020-10-15T22:04:25.324Z", "contributors": [ - "wizardforcel" + "SphinxKnight", + "shevacjs" ] }, - "Web/HTML/Global_attributes/lang": { - "modified": "2019-10-01T21:48:16.715Z", + "Web/HTTP/Headers/Content-Security-Policy/require-sri-for": { + "modified": "2020-10-15T22:04:29.993Z", "contributors": [ - "wangfangping", - "wizardforcel" + "SphinxKnight", + "shevacjs" ] }, - "Web/HTML/Global_attributes/part": { - "modified": "2020-10-15T22:31:54.138Z", + "Web/HTTP/Headers/Content-Security-Policy/sandbox": { + "modified": "2020-10-15T22:18:49.969Z", "contributors": [ - "wuding" + "SphinxKnight", + "Syclover-u2400" ] }, - "Web/HTML/Global_attributes/slot": { - "modified": "2020-10-15T21:55:11.414Z", + "Web/HTTP/Headers/Content-Security-Policy/script-src-elem": { + "modified": "2020-10-15T22:32:24.500Z", "contributors": [ - "zhangchen", - "wizardforcel" + "davidguhao" ] }, - "Web/HTML/Global_attributes/spellcheck": { - "modified": "2019-03-23T22:18:18.900Z", + "Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests": { + "modified": "2020-10-15T22:04:14.644Z", "contributors": [ - "wizardforcel", - "xcffl", - "fjh352", - "xgqfrms-GitHub" + "SphinxKnight", + "shevacjs" ] }, - "Web/HTML/Global_attributes/style": { - "modified": "2019-03-23T22:10:06.901Z", + "Web/HTTP/Headers/Content-Security-Policy/worker-src": { + "modified": "2020-10-15T22:30:56.058Z", "contributors": [ - "wizardforcel" + "oyyunttt" ] }, - "Web/HTML/Global_attributes/tabindex": { - "modified": "2020-10-15T21:55:15.899Z", + "Web/HTTP/Headers/Content-Type": { + "modified": "2020-10-15T21:50:48.235Z", "contributors": [ - "xrkffgg", - "zhangchen", - "fjh352", - "wizardforcel" + "ZL1019", + "kadoufall", + "WayneCui", + "xgqfrms-GitHub", + "wanhh" ] }, - "Web/HTML/Global_attributes/title": { - "modified": "2020-03-11T07:59:38.824Z", + "Web/HTTP/Headers/Cookie": { + "modified": "2020-10-15T21:54:53.599Z", "contributors": [ - "YangYihui", - "monkeyDyang", - "wizardforcel" + "WayneCui" ] }, - "Web/HTML/Global_attributes/translate": { - "modified": "2019-06-05T06:41:04.292Z", + "Web/HTTP/Headers/Cookie2": { + "modified": "2020-10-15T21:54:52.521Z", "contributors": [ - "Martin.Chow" + "WayneCui" ] }, - "Web/HTML/Global_attributes/x-ms-加速装置键": { - "modified": "2019-12-03T17:45:24.248Z", + "Web/HTTP/Headers/Cross-Origin-Embedder-Policy": { + "modified": "2020-10-15T22:33:37.678Z", "contributors": [ - "pans9" + "jguo0118", + "hellorayza" ] }, - "Web/HTML/Global_attributes/x-ms-格式-检测": { - "modified": "2019-12-03T17:54:04.795Z", + "Web/HTTP/Headers/Cross-Origin-Resource-Policy": { + "modified": "2020-10-15T22:17:29.651Z", "contributors": [ - "pans9" + "NightKing_hmsf" ] }, - "Web/HTML/Index": { - "modified": "2019-03-21T11:52:09.419Z", + "Web/HTTP/Headers/DNT": { + "modified": "2020-10-15T21:54:53.651Z", "contributors": [ - "RainSlide", - "xcffl" + "yenshen", + "WayneCui" ] }, - "Web/HTML/Inline_elements": { - "modified": "2020-08-05T19:04:54.777Z", + "Web/HTTP/Headers/DPR": { + "modified": "2020-10-15T22:25:12.812Z", "contributors": [ - "mitaosi", - "chrisdavidmills", - "Raine_Huang", - "FredWe", - "ziyunfei", - "pmtao" + "zhangchen", + "charles-debug" ] }, - "Web/HTML/Link_types": { - "modified": "2020-10-15T21:31:40.375Z", + "Web/HTTP/Headers/Date": { + "modified": "2020-10-15T21:54:52.166Z", "contributors": [ - "chanvin", - "Yayure", - "gafish", - "JuliusKingsley", - "songlime", - "liutongshuo", - "idlefire", - "hstarorg", - "Ende93", - "grtreexyz", - "blue0125", - "Breezewish" + "liaozhaonan", + "WayneCui" ] }, - "Web/HTML/Link_types/prefetch": { - "modified": "2020-10-15T22:29:06.249Z", + "Web/HTTP/Headers/Device-Memory": { + "modified": "2020-10-15T22:27:14.967Z", "contributors": [ - "chanvin" + "csliubo" ] }, - "Web/HTML/Link_types/preload": { - "modified": "2020-10-15T22:29:06.417Z", + "Web/HTTP/Headers/Digest": { + "modified": "2020-10-15T22:22:30.332Z", "contributors": [ - "chanvin" + "Mulan" ] }, - "Web/HTML/Microdata": { - "modified": "2019-07-13T06:56:53.858Z", - "contributors": [ - "wangfangping" + "Web/HTTP/Headers/ETag": { + "modified": "2020-10-15T21:54:16.091Z", + "contributors": [ + "Opportunity", + "zhangchen", + "LeoQuote", + "qihaiyan", + "Mdxin", + "WayneCui", + "luckymore" ] }, - "Web/HTML/Optimizing_your_pages_for_speculative_parsing": { - "modified": "2019-03-23T22:46:26.910Z", + "Web/HTTP/Headers/Early-Data": { + "modified": "2020-10-15T22:10:58.660Z", "contributors": [ - "huangcheng", - "ziyunfei", - "mengshukun" + "Greenstorm", + "TUARAN" ] }, - "Web/HTML/Preloading_content": { - "modified": "2020-06-09T23:26:32.370Z", + "Web/HTTP/Headers/Expect": { + "modified": "2019-03-23T22:11:24.440Z", "contributors": [ - "huyue", - "chanvin", - "sutaojie", - "haoliangwu", - "Axue", - "ldwformat" + "WayneCui" ] }, - "Web/HTML/Quirks_Mode_and_Standards_Mode": { - "modified": "2020-01-30T04:57:28.634Z", + "Web/HTTP/Headers/Expect-CT": { + "modified": "2020-10-15T22:03:02.147Z", "contributors": [ - "RainSlide", - "Kacoo", - "chrisdavidmills", - "iigmir", - "anfGG8G0G8" + "ariable" ] }, - "Web/HTML/Reference": { - "modified": "2019-09-09T07:23:44.694Z", + "Web/HTTP/Headers/Expires": { + "modified": "2020-10-15T21:50:45.740Z", "contributors": [ - "SphinxKnight", - "wbamberg", - "FredWe", - "Breezewish" + "stuxu", + "Fiag", + "marsorsun", + "sunyanan891114", + "Simba.Lin", + "paranoidjk" ] }, - "Web/HTML/Supported_media_formats": { - "modified": "2019-07-03T23:42:04.646Z", + "Web/HTTP/Headers/Feature-Policy": { + "modified": "2020-10-15T22:18:06.274Z", "contributors": [ - "l613", - "zodiac-xl", - "ziyunfei" + "roostinghawk" ] }, - "Web/HTML/Using_the_application_cache": { - "modified": "2019-10-29T05:43:20.065Z", + "Web/HTTP/Headers/Feature-Policy/autoplay": { + "modified": "2020-10-15T22:18:28.072Z", "contributors": [ - "7NZ", - "xgqfrms-GitHub", - "eforegist", - "liuzeyafzy", - "nianiaJR", - "shajiquan", - "hdwills", - "teoli", - "fsy0718", - "sunnylost", - "karsa.si" + "baijingfeng" ] }, - "Web/HTTP": { - "modified": "2020-08-27T09:08:49.830Z", + "Web/HTTP/Headers/Feature-Policy/camera": { + "modified": "2020-10-15T22:26:24.357Z", "contributors": [ - "Lsnsh", - "dujun", - "RainSlide", - "taoyouh", - "shengjieli", - "userand", - "syt-honey", - "Pengfei", - "zhuangyin", - "JamieYang", - "xuxun", - "Ende93", - "xgqfrms-GitHub", - "sunnylost", - "cissoid", - "TomasRan", - "DreamerKing", - "ziyunfei" + "K.Pen" ] }, - "Web/HTTP/Access_control_CORS": { - "modified": "2020-11-30T22:27:21.749Z", + "Web/HTTP/Headers/Forwarded": { + "modified": "2019-03-23T22:11:01.048Z", "contributors": [ - "seawaywen", - "fuweichin", - "jsonz1993", - "shens3", - "chanvin", - "SirnoChan", - "skywalker_z", - "Noodles006", - "yantong", - "hansnow", - "leoxiao2012", - "kunyaoxu", - "zjffun", - "show-rosarugosa", - "hnzxmutex", - "miuchan", - "ChenShihao", - "alvan", - "BobGreen", - "jiladahe1997", - "ErCargo", - "s1len0eye", - "zhang-hongwei", - "zthxxx", - "NineRec", - "recursion", - "libmw", - "bestvow", - "JuFoFu", - "xgqfrms-GitHub", - "bigZ-again", - "yuankunzhang", - "FideoJ", - "AlenQi", - "Ende93", - "wanglijie", - "yumingzhe", - "mygaochunming", - "Marcia_gm", - "xgqfrms", - "ybwdaisy", - "fjywan", - "holynewbie", - "gqqnbig", - "EdwardStudy", - "ssjssh", - "Kevin-Xi", - "8427003", - "Meteormatt", - "OOP-Code-Bunny", - "CManLH", - "qiumaoyuan" + "ujsxn", + "WayneCui" ] }, - "Web/HTTP/Authentication": { - "modified": "2020-01-19T22:05:27.998Z", + "Web/HTTP/Headers/From": { + "modified": "2020-10-15T21:54:57.725Z", "contributors": [ - "cekingLu", - "gsxuan", - "zjffun", - "fanjieqi", - "rianma", - "wangpin", - "crper", - "WayneCui", - "GeJusdot", - "thomastao0215" + "LiquidLiquids", + "WayneCui" ] }, - "Web/HTTP/Basics_of_HTTP": { - "modified": "2020-05-07T23:19:31.676Z", + "Web/HTTP/Headers/Host": { + "modified": "2020-10-15T21:51:42.418Z", "contributors": [ - "Filon", - "HardcorePhysician", - "Yayure", - "695919451", - "BobGreen", - "magiclyde", - "cissoid" + "xinu", + "chentao106", + "wallen", + "crper", + "shinyoo" ] }, - "Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs": { - "modified": "2019-03-23T22:18:43.282Z", + "Web/HTTP/Headers/If-Match": { + "modified": "2020-10-15T21:55:00.013Z", "contributors": [ - "zqyue", - "Ende93", - "xgqfrms-GitHub", - "ziyunfei", - "chaos_zhang" + "ShiChenCong", + "Bayes", + "WayneCui" ] }, - "Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP": { - "modified": "2020-02-20T03:41:08.272Z", + "Web/HTTP/Headers/If-Modified-Since": { + "modified": "2020-10-15T21:55:01.333Z", "contributors": [ - "Babyfaceqian", - "XFJGitHub", - "lc-soft", - "BobGreen", - "enjolras1205", - "zihengCat", - "GuoShuai", - "Haruhi", - "huangchanghuan", - "keifergu", - "JsonLi", - "WeijieZhu" + "wangtongchao", + "WayneCui" ] }, - "Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web": { - "modified": "2019-05-06T05:35:10.899Z", + "Web/HTTP/Headers/If-None-Match": { + "modified": "2020-10-15T21:54:59.997Z", "contributors": [ - "wolfzZ", - "heyv5", - "springapple", - "Wendy_Love", - "yuankunzhang", - "little-tomorrow", - "DreamerKing" + "WayneCui" ] }, - "Web/HTTP/Basics_of_HTTP/MIME_types": { - "modified": "2020-11-04T00:16:29.009Z", + "Web/HTTP/Headers/If-Range": { + "modified": "2020-10-15T21:51:54.830Z", "contributors": [ - "lujjjh", - "andysongs", - "rascalquan", - "BobGreen", - "NewbieAndy", - "zhangchen", - "xgqfrms-GitHub", - "w11th", - "YuriTu" + "Froguard", + "LiuTong" ] }, - "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": { - "modified": "2020-02-28T13:11:23.222Z", + "Web/HTTP/Headers/If-Unmodified-Since": { + "modified": "2020-10-15T21:54:37.820Z", "contributors": [ - "chrisdavidmills", - "RainSlide", - "qq58553442", - "sam-dingkang", - "xgqfrms-GitHub", - "choury", - "pasturn" + "WayneCui" ] }, - "Web/HTTP/Browser_detection_using_the_user_agent": { - "modified": "2019-03-23T22:26:23.825Z", + "Web/HTTP/Headers/Index": { + "modified": "2019-08-30T03:36:19.849Z", "contributors": [ - "xgqfrms-GitHub", - "konrumi", - "Leogh", - "jianyi1995" + "whuhyw" ] }, - "Web/HTTP/CORS/Errors": { - "modified": "2019-05-27T00:23:38.306Z", + "Web/HTTP/Headers/Keep-Alive": { + "modified": "2020-10-15T21:55:00.550Z", "contributors": [ - "waka3", - "nchevobbe", - "luna666", - "Sheppy" + "zhangchen", + "WayneCui" ] }, - "Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin": { - "modified": "2019-07-18T02:34:22.209Z", + "Web/HTTP/Headers/Large-Allocation": { + "modified": "2020-10-15T21:56:09.177Z", "contributors": [ - "PYGC", - "ty1921" + "wyapx", + "crper", + "shevacjs" ] }, - "Web/HTTP/CORS/Errors/CORSDidNotSucceed": { - "modified": "2019-07-29T07:01:42.837Z", + "Web/HTTP/Headers/Last-Modified": { + "modified": "2020-10-15T21:55:00.234Z", "contributors": [ - "crvdgc", - "levo2165", - "luna666" + "WayneCui" ] }, - "Web/HTTP/CORS/Errors/CORSDisabled": { - "modified": "2019-05-09T05:04:22.066Z", + "Web/HTTP/Headers/Link": { + "modified": "2020-10-15T22:20:52.111Z", "contributors": [ - "luna666" + "pangyujie" ] }, - "Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed": { - "modified": "2019-03-18T21:29:51.027Z", + "Web/HTTP/Headers/Location": { + "modified": "2020-10-15T21:54:51.524Z", "contributors": [ - "luna666" + "WayneCui" ] }, - "Web/HTTP/CORS/Errors/CORSMethodNotFound": { - "modified": "2019-08-27T04:22:52.153Z", + "Web/HTTP/Headers/Origin": { + "modified": "2020-10-15T21:53:11.797Z", "contributors": [ - "laingke" + "JasonJunJun", + "yuankunzhang" ] }, - "Web/HTTP/CORS/Errors/CORSMissingAllowOrigin": { - "modified": "2019-03-18T21:22:06.783Z", + "Web/HTTP/Headers/Pragma": { + "modified": "2020-10-15T21:54:59.607Z", "contributors": [ - "zhangchen", - "coderyyx" + "WayneCui" ] }, - "Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed": { - "modified": "2019-10-30T01:07:54.026Z", + "Web/HTTP/Headers/Proxy-Authenticate": { + "modified": "2019-03-23T22:10:44.148Z", "contributors": [ - "Fimreal" + "WayneCui" ] }, - "Web/HTTP/CORS/Errors/CORSNotSupportingCredentials": { - "modified": "2019-06-16T23:37:59.140Z", + "Web/HTTP/Headers/Proxy-Authorization": { + "modified": "2019-03-23T22:10:44.333Z", "contributors": [ - "feiyuerenhai" + "WayneCui" ] }, - "Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded": { - "modified": "2019-03-18T21:29:48.470Z", + "Web/HTTP/Headers/Public-Key-Pins": { + "modified": "2020-10-15T21:55:02.367Z", "contributors": [ - "luna666" + "shevacjs", + "WayneCui" ] }, - "Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed": { - "modified": "2019-03-18T21:17:44.250Z", + "Web/HTTP/Headers/Public-Key-Pins-Report-Only": { + "modified": "2020-10-15T22:04:11.647Z", "contributors": [ - "MinimalistYing" + "ujsxn", + "shevacjs" ] }, - "Web/HTTP/CORS/Errors/CORSRequestNotHttp": { - "modified": "2019-09-20T04:35:01.396Z", + "Web/HTTP/Headers/Range": { + "modified": "2020-10-15T21:54:38.123Z", "contributors": [ - "RainSlide", - "grape", - "xuyuehang", - "luna666" + "Meteormatt", + "WayneCui" ] }, - "Web/HTTP/CORS/Errors/CORS错误允许凭证": { - "modified": "2020-09-18T12:19:26.611Z", + "Web/HTTP/Headers/Referer": { + "modified": "2020-10-15T21:55:01.465Z", "contributors": [ - "Cooper-Kou" + "xiaozhaofu", + "yenshen", + "WayneCui" ] }, - "Web/HTTP/CSP": { - "modified": "2020-10-15T21:34:44.353Z", + "Web/HTTP/Headers/Referrer-Policy": { + "modified": "2020-10-15T21:54:58.993Z", "contributors": [ - "fanjieqi", - "phodal", - "ceido", - "jwhitlock", - "ldwformat", - "wang1dot0", - "WayneCui", - "xgqfrms-GitHub", - "zhang-quan-yi", - "hxl", - "zhi.lin", - "yuankunzhang", - "ziyunfei", - "Breezewish" + "gadflysu", + "WeihanLi", + "WayneCui" ] }, - "Web/HTTP/Caching_FAQ": { - "modified": "2020-07-01T23:23:40.319Z", + "Web/HTTP/Headers/Retry-After": { + "modified": "2020-10-15T21:54:59.380Z", "contributors": [ - "qnlz", - "xgqfrms", - "yqz0203", - "oppoffice", - "SAM.L", - "baijingfeng", - "YongzeYao", - "immortal-wm", - "YiBanCangBai", - "2585479524", - "fanjieqi", - "BobGreen", - "athena0304", - "dgeibi", - "cielsk", - "tianyuqingkong", - "xiaohp", - "tiancaiwuyue", - "hiyoushu", - "ch-zgh-1993", - "marsoln", - "wanglijie", - "xx1124961758", - "onedaywen", - "shengoo", - "sunnylost", - "followgiant", - "ziyunfei" + "WayneCui" ] }, - "Web/HTTP/Compression": { - "modified": "2019-06-20T00:32:44.768Z", + "Web/HTTP/Headers/Save-Data": { + "modified": "2020-10-15T22:21:57.010Z", "contributors": [ - "liangzhaorong", - "BobGreen", - "zhangchen", - "WayneCui" + "Mulan", + "fuxingZhang" ] }, - "Web/HTTP/Conditional_requests": { - "modified": "2019-09-19T06:11:16.911Z", + "Web/HTTP/Headers/Sec-Fetch-Dest": { + "modified": "2020-10-17T03:01:57.521Z", "contributors": [ - "leah_humlelu", - "Trendymen", - "xianweics", - "WayneCui" + "hebing0415", + "hellorayza" ] }, - "Web/HTTP/Configuring_servers_for_Ogg_media": { - "modified": "2019-12-27T03:08:09.838Z", + "Web/HTTP/Headers/Sec-Fetch-Mode": { + "modified": "2020-10-15T22:31:17.439Z", "contributors": [ - "Syaki" + "EbeRybDI", + "haolayo" ] }, - "Web/HTTP/Connection_management_in_HTTP_1.x": { - "modified": "2019-11-07T04:16:26.733Z", + "Web/HTTP/Headers/Sec-Fetch-Site": { + "modified": "2020-10-15T22:32:55.276Z", "contributors": [ - "woshiqiang1", - "Jack.Works", - "HardcorePhysician", - "jianglinghao", - "YiBanCangBai", - "guoshencheng", - "fanjieqi", - "athena0304", - "springapple", - "shaunlee" + "EbeRybDI" ] }, - "Web/HTTP/Content_negotiation": { - "modified": "2020-10-08T10:02:32.752Z", + "Web/HTTP/Headers/Sec-Fetch-User": { + "modified": "2020-10-15T22:32:45.194Z", "contributors": [ - "mh47838704", - "SunnyWind", - "lhc0101", - "WayneCui" + "EbeRybDI" ] }, - "Web/HTTP/Content_negotiation/Accept_默认值": { - "modified": "2019-03-18T21:35:18.474Z", + "Web/HTTP/Headers/Sec-WebSocket-Accept": { + "modified": "2020-10-15T22:11:54.497Z", "contributors": [ - "heekei" + "Greenstorm" ] }, - "Web/HTTP/Cookies": { - "modified": "2020-10-13T05:17:34.094Z", + "Web/HTTP/Headers/Server": { + "modified": "2020-10-15T21:54:58.617Z", "contributors": [ - "fzhyzamt", - "dake0805", - "RoXoM", - "ysqzhang", - "zh244135370", - "luvsunlight", - "mingzhang6", - "rascalquan", - "houyewei", - "huangyingjie", - "zihengCat", - "lc-soft", - "zhang-hongwei", "yenshen", - "keifergu", - "FideoJ", - "AlenQi", - "sintrb", - "jdk137", - "charlie" + "WayneCui" ] }, - "Web/HTTP/HTTP_Strict_Transport_Security": { - "modified": "2020-11-19T14:34:26.997Z", + "Web/HTTP/Headers/Server-Timing": { + "modified": "2020-10-15T22:22:26.582Z", "contributors": [ - "chrisdavidmills", - "sunbeams001", - "kidonng", - "Jack.Works", - "zhangzhen", - "ToBo", - "udo-china", - "zhangchen", - "little-tomorrow", - "Eward.song" + "Mulan", + "laingke" ] }, - "Web/HTTP/HTTP_response_codes": { - "modified": "2019-01-16T13:20:30.376Z", + "Web/HTTP/Headers/Set-Cookie": { + "modified": "2020-10-15T21:54:55.958Z", "contributors": [ - "ziyunfei" + "wenlonghuo", + "superATM", + "royIdoodle", + "WayneCui" ] }, - "Web/HTTP/Headers": { - "modified": "2020-05-20T02:33:50.716Z", + "Web/HTTP/Headers/Set-Cookie/SameSite": { + "modified": "2020-10-15T22:28:42.430Z", "contributors": [ - "spe-shun", - "cy234", - "c1er", - "Bayes", - "Jacksonary", - "rikkif", - "Weix", - "xgqfrms-GitHub", - "AlenQi", - "linzhixiong" + "EbeRybDI", + "tinaawang" ] }, - "Web/HTTP/Headers/Accept": { - "modified": "2020-10-15T21:50:50.340Z", + "Web/HTTP/Headers/Set-Cookie2": { + "modified": "2020-10-15T21:54:57.437Z", "contributors": [ - "xiaozhaofu", - "WayneCui", - "xgqfrms-GitHub", - "stevobm" + "WayneCui" ] }, - "Web/HTTP/Headers/Accept-CH": { - "modified": "2020-10-15T22:24:12.153Z", + "Web/HTTP/Headers/SourceMap": { + "modified": "2020-10-15T21:55:30.390Z", "contributors": [ - "xuhui98" + "Pada" ] }, - "Web/HTTP/Headers/Accept-CH-Lifetime": { - "modified": "2020-10-15T22:25:10.809Z", + "Web/HTTP/Headers/TE": { + "modified": "2020-10-15T21:54:38.379Z", "contributors": [ - "chen3feng" + "ujsxn", + "shevacjs", + "WayneCui" ] }, - "Web/HTTP/Headers/Accept-Charset": { - "modified": "2020-10-15T21:50:53.082Z", + "Web/HTTP/Headers/Timing-Allow-Origin": { + "modified": "2020-10-15T21:58:04.341Z", "contributors": [ - "shinken008", - "Dorllen", - "WayneCui", - "xgqfrms-GitHub" + "firesun", + "shevacjs" ] }, - "Web/HTTP/Headers/Accept-Encoding": { - "modified": "2020-10-15T21:53:10.909Z", + "Web/HTTP/Headers/Tk": { + "modified": "2019-03-23T22:07:59.446Z", "contributors": [ - "xiaozhaofu", - "WayneCui", - "felixwang-1989", - "yt449", - "xgqfrms-GitHub" + "WayneCui" ] }, - "Web/HTTP/Headers/Accept-Language": { - "modified": "2020-10-15T21:53:13.880Z", + "Web/HTTP/Headers/Trailer": { + "modified": "2020-10-15T21:54:41.193Z", "contributors": [ - "ran", - "RainSlide", - "WayneCui", - "yuankunzhang" + "yuankunzhang", + "WayneCui" ] }, - "Web/HTTP/Headers/Accept-Patch": { - "modified": "2020-10-15T22:19:49.009Z", + "Web/HTTP/Headers/Transfer-Encoding": { + "modified": "2020-10-15T21:54:37.943Z", "contributors": [ - "Sod-Momas" + "WayneCui" ] }, - "Web/HTTP/Headers/Accept-Ranges": { - "modified": "2020-10-15T21:54:15.134Z", + "Web/HTTP/Headers/Upgrade-Insecure-Requests": { + "modified": "2020-10-15T21:55:00.901Z", "contributors": [ - "Vincent-Hy", - "km-c", - "JianmingXia", - "crper", - "shevacjs" + "WayneCui" ] }, - "Web/HTTP/Headers/Access-Control-Allow-Credentials": { - "modified": "2020-10-15T21:51:29.367Z", + "Web/HTTP/Headers/User-Agent": { + "modified": "2020-10-15T21:55:01.835Z", "contributors": [ - "deping_chen", - "Bayes", - "xiasha", - "fscholz", - "crper", - "keqingrong", - "TiaossuP", - "tty4" + "RainSlide", + "zidian257", + "wangshi3", + "qwqmeow", + "AaronGod", + "WayneCui" ] }, - "Web/HTTP/Headers/Access-Control-Allow-Headers": { - "modified": "2020-10-15T21:54:48.443Z", + "Web/HTTP/Headers/User-Agent/Firefox": { + "modified": "2019-03-18T21:31:55.000Z", "contributors": [ - "GuoYaxiang", - "shadowkimi520", - "Soyaine", - "WayneCui" + "RainSlide", + "konrumi" ] }, - "Web/HTTP/Headers/Access-Control-Allow-Methods": { - "modified": "2020-10-15T21:54:49.842Z", + "Web/HTTP/Headers/Vary": { + "modified": "2020-10-15T21:53:14.511Z", + "contributors": [ + "swanf", + "WayneCui", + "ujsxn", + "newhuan" + ] + }, + "Web/HTTP/Headers/Via": { + "modified": "2020-10-15T21:54:55.047Z", "contributors": [ - "Jat", - "crper", "WayneCui" ] }, - "Web/HTTP/Headers/Access-Control-Allow-Origin": { - "modified": "2020-10-15T21:52:46.095Z", + "Web/HTTP/Headers/WWW-Authenticate": { + "modified": "2020-09-03T05:56:40.972Z", "contributors": [ - "TiaossuP", - "konrumi" + "EbeRybDI", + "zslucky" ] }, - "Web/HTTP/Headers/Access-Control-Expose-Headers": { - "modified": "2020-10-15T21:54:48.426Z", + "Web/HTTP/Headers/Warning": { + "modified": "2020-10-15T21:55:02.128Z", "contributors": [ - "lijsh", + "liaozhaonan", "WayneCui" ] }, - "Web/HTTP/Headers/Access-Control-Max-Age": { - "modified": "2020-10-15T21:54:52.194Z", + "Web/HTTP/Headers/X-Content-Type-Options": { + "modified": "2020-10-15T21:54:52.946Z", "contributors": [ - "zkerhcy", - "xiaozhaofu", - "jinliming2", - "crper", + "kidonng", + "kbyyd24", "WayneCui" ] }, - "Web/HTTP/Headers/Access-Control-Request-Headers": { - "modified": "2020-10-15T21:54:29.946Z", + "Web/HTTP/Headers/X-Forwarded-For": { + "modified": "2019-03-23T22:11:03.571Z", "contributors": [ - "xiaozhaofu", - "crper", - "WayneCui", - "xgqfrms-GitHub" + "WayneCui" ] }, - "Web/HTTP/Headers/Access-Control-Request-Method": { - "modified": "2020-10-15T21:54:31.833Z", + "Web/HTTP/Headers/X-Forwarded-Host": { + "modified": "2019-03-23T22:10:57.844Z", "contributors": [ - "xiaozhaofu", - "WayneCui", - "xgqfrms-GitHub" + "WayneCui" ] }, - "Web/HTTP/Headers/Age": { - "modified": "2020-10-15T21:54:37.562Z", + "Web/HTTP/Headers/X-Forwarded-Proto": { + "modified": "2019-03-23T22:11:05.199Z", "contributors": [ - "wangtongchao", - "fscholz", - "crper", + "hbbalfred", "WayneCui" ] }, - "Web/HTTP/Headers/Allow": { - "modified": "2019-03-23T22:14:32.513Z", + "Web/HTTP/Headers/X-XSS-Protection": { + "modified": "2020-10-15T21:53:06.446Z", "contributors": [ - "yuankunzhang" + "weibangtuo", + "kidonng", + "yenshen", + "WayneCui", + "oopsguy", + "xgqfrms-GitHub" ] }, - "Web/HTTP/Headers/Alt-Svc": { - "modified": "2020-10-15T22:12:25.895Z", + "Web/HTTP/Link_prefetching_FAQ": { + "modified": "2019-10-09T13:08:42.395Z", "contributors": [ - "liuhaoXD", - "Light.G" + "Yayure", + "vivaxy", + "iamyy", + "xgqfrms-GitHub" ] }, - "Web/HTTP/Headers/Authorization": { - "modified": "2019-03-23T22:11:31.823Z", + "Web/HTTP/Messages": { + "modified": "2020-04-19T05:44:17.609Z", "contributors": [ - "Bayes", - "crper", - "WayneCui" + "liangmuyang", + "HardcorePhysician", + "keifergu", + "ziyunfei", + "gbcwbz", + "JsonLi" ] }, - "Web/HTTP/Headers/Cache-Control": { - "modified": "2020-10-15T21:50:34.341Z", + "Web/HTTP/Methods": { + "modified": "2020-10-15T21:49:13.002Z", "contributors": [ - "kidonng", - "woshiqiang1", - "DanielCui", - "taoyouh", - "tenghuanhe", - "ngulee", - "kaliExist", - "wangtongchao", - "marsorsun", - "cnc233", - "codevvvv9", - "pearzl", - "tianyuqingkong", - "zliy", - "NatureFeng", - "schickal", + "yzb161114", + "zhuangyin", + "xgqfrms-GitHub", "fscholz", - "shaunsxj", - "paranoidjk", - "visten" + "cissoid" ] }, - "Web/HTTP/Headers/Clear-Site-Data": { - "modified": "2020-10-15T22:07:13.779Z", + "Web/HTTP/Methods/CONNECT": { + "modified": "2020-10-15T21:55:02.299Z", "contributors": [ - "bershanskiy", - "wangtongchao" + "champkeh", + "WayneCui" ] }, - "Web/HTTP/Headers/Connection": { - "modified": "2020-10-15T21:51:42.086Z", + "Web/HTTP/Methods/DELETE": { + "modified": "2020-10-15T21:54:31.457Z", "contributors": [ - "zhuguibiao", - "ujsxn", - "shinyoo" + "fnjoe", + "yzweb2018", + "horsefaced", + "Ende93", + "WayneCui", + "xgqfrms-GitHub" ] }, - "Web/HTTP/Headers/Content-Disposition": { - "modified": "2020-11-15T00:23:13.412Z", + "Web/HTTP/Methods/GET": { + "modified": "2020-10-15T21:49:15.328Z", "contributors": [ - "Alan-Liang", - "xiaozhaofu", - "WayneCui", - "icaoweiwei", - "JavacPro" + "joy-yu", + "Ende93", + "fscholz", + "cissoid" ] }, - "Web/HTTP/Headers/Content-Encoding": { - "modified": "2020-10-15T21:54:51.398Z", + "Web/HTTP/Methods/HEAD": { + "modified": "2020-10-15T21:49:15.693Z", "contributors": [ - "DynamicAnt", - "WayneCui" + "liveabean", + "iugo", + "fscholz", + "horsefaced", + "cissoid" ] }, - "Web/HTTP/Headers/Content-Language": { - "modified": "2020-10-15T21:54:49.923Z", + "Web/HTTP/Methods/OPTIONS": { + "modified": "2020-10-15T21:53:13.191Z", "contributors": [ - "HankXu", - "yuantongkang", - "WayneCui" + "safarishi", + "yuankunzhang" ] }, - "Web/HTTP/Headers/Content-Length": { - "modified": "2020-10-15T21:54:51.554Z", + "Web/HTTP/Methods/PATCH": { + "modified": "2019-03-23T22:11:06.658Z", "contributors": [ - "rascalquan", + "Ende93", "WayneCui" ] }, - "Web/HTTP/Headers/Content-Location": { - "modified": "2020-10-15T21:54:51.676Z", + "Web/HTTP/Methods/POST": { + "modified": "2020-10-15T21:49:12.507Z", "contributors": [ - "WayneCui" + "weapon-x", + "cracdic", + "wangtongchao", + "mySoul", + "shellphon", + "fscholz", + "cissoid" ] }, - "Web/HTTP/Headers/Content-Range": { - "modified": "2020-10-15T21:54:39.510Z", + "Web/HTTP/Methods/PUT": { + "modified": "2020-10-15T21:54:38.885Z", "contributors": [ + "lnh", + "maicss", "WayneCui" ] }, - "Web/HTTP/Headers/Content-Security-Policy": { - "modified": "2020-10-15T21:51:40.481Z", + "Web/HTTP/Methods/TRACE": { + "modified": "2020-10-15T22:06:09.943Z", "contributors": [ - "xiao11lang", - "hq5544", - "SphinxKnight", - "lowerpierman", - "taoyouh", - "imba-tjd", - "lvgg3271", - "alan199355", - "anchen", - "9ii", - "Forbidden", - "crper", - "lcw0622", - "SuunZhu" + "chenaptx", + "fs523577192", + "ppphp" ] }, - "Web/HTTP/Headers/Content-Security-Policy-Report-Only": { - "modified": "2020-10-15T21:55:30.073Z", + "Web/HTTP/Overview": { + "modified": "2020-11-10T09:12:40.960Z", "contributors": [ - "Pada" + "pocketdr", + "bkuke", + "hehe1111", + "Umryuan", + "yuyuanqiu", + "psaren", + "wakaoniganma", + "BobGreen", + "hiyoushu", + "LuoYun", + "RayJune", + "Akiq2016", + "zihengCat", + "usernameisMan", + "Ende93", + "w11th", + "joezheng", + "MagicLee" ] }, - "Web/HTTP/Headers/Content-Security-Policy/base-uri": { - "modified": "2020-10-15T21:56:06.256Z", + "Web/HTTP/Protocol_upgrade_mechanism": { + "modified": "2020-11-12T12:36:28.458Z", "contributors": [ - "SphinxKnight", - "WayneCui" + "yan647", + "Xiaosha61", + "mayunmeiyouming", + "nientsu", + "raunyuyuan", + "wc5858" ] }, - "Web/HTTP/Headers/Content-Security-Policy/block-all-mixed-content": { - "modified": "2020-10-15T21:56:06.231Z", + "Web/HTTP/Proxy_servers_and_tunneling": { + "modified": "2020-08-19T02:44:17.258Z", "contributors": [ - "SphinxKnight", - "WayneCui" + "SunnyWind", + "0229xiang", + "teoli" ] }, - "Web/HTTP/Headers/Content-Security-Policy/child-src": { - "modified": "2020-10-15T22:22:07.630Z", + "Web/HTTP/Public_Key_Pinning": { + "modified": "2020-10-15T22:15:40.587Z", "contributors": [ - "SphinxKnight", - "1930082875" + "Yayure" ] }, - "Web/HTTP/Headers/Content-Security-Policy/connect-src": { - "modified": "2020-10-15T22:04:24.950Z", + "Web/HTTP/Range_requests": { + "modified": "2019-03-23T22:10:18.914Z", "contributors": [ - "SphinxKnight", - "shevacjs" + "huangtt", + "heyv5", + "warmilk", + "asurin", + "WayneCui" ] }, - "Web/HTTP/Headers/Content-Security-Policy/default-src": { - "modified": "2020-10-15T21:55:35.542Z", + "Web/HTTP/Redirections": { + "modified": "2020-06-22T12:27:42.624Z", "contributors": [ - "SphinxKnight", - "eachcan", + "RoXoM", + "BobGreen", "shevacjs", - "Forbidden", + "yenshen", "WayneCui", - "EEord" + "ziyunfei", + "mushang11", + "zhi.lin", + "ZhongyiChen" ] }, - "Web/HTTP/Headers/Content-Security-Policy/font-src": { - "modified": "2020-10-15T22:11:53.390Z", + "Web/HTTP/Resources_and_URIs": { + "modified": "2019-09-05T00:27:21.660Z", "contributors": [ - "SphinxKnight", - "eachcan" + "ran" ] }, - "Web/HTTP/Headers/Content-Security-Policy/form-action": { - "modified": "2020-10-15T22:20:11.267Z", + "Web/HTTP/Resources_and_specifications": { + "modified": "2019-03-23T22:14:32.179Z", "contributors": [ - "SphinxKnight", - "feiyuerenhai" + "ppphp", + "shevacjs", + "yuankunzhang" ] }, - "Web/HTTP/Headers/Content-Security-Policy/frame-ancestors": { - "modified": "2020-10-15T21:56:28.759Z", + "Web/HTTP/Session": { + "modified": "2019-08-30T04:49:50.525Z", "contributors": [ - "SphinxKnight", - "ldwformat" + "HardcorePhysician", + "2585479524", + "zihengCat", + "zhuangyin", + "keifergu", + "cissoid" ] }, - "Web/HTTP/Headers/Content-Security-Policy/report-to": { - "modified": "2020-10-15T22:04:25.324Z", + "Web/HTTP/Status": { + "modified": "2020-10-15T21:47:25.564Z", "contributors": [ - "SphinxKnight", - "shevacjs" + "kendalbaba8", + "sideshowbarker", + "lesikolerina23", + "bifan", + "zhongjunyao", + "cznno", + "skylinebin", + "Opportunity", + "sluggishpj", + "Riverside", + "NowTime", + "konantian", + "PWAEZQS", + "corele", + "x1zbin", + "Zeng", + "teaist", + "zhuangyin", + "change-hdb", + "Geniusning", + "fscholz", + "fuchao2012" ] }, - "Web/HTTP/Headers/Content-Security-Policy/require-sri-for": { - "modified": "2020-10-15T22:04:29.993Z", + "Web/HTTP/Status/100": { + "modified": "2020-10-15T21:49:13.185Z", "contributors": [ - "SphinxKnight", - "shevacjs" + "fscholz", + "cissoid" ] }, - "Web/HTTP/Headers/Content-Security-Policy/sandbox": { - "modified": "2020-10-15T22:18:49.969Z", + "Web/HTTP/Status/101": { + "modified": "2020-07-28T20:14:16.827Z", "contributors": [ - "SphinxKnight", - "Syclover-u2400" + "rockhamx", + "xiazhe", + "WayneCui" ] }, - "Web/HTTP/Headers/Content-Security-Policy/script-src-elem": { - "modified": "2020-10-15T22:32:24.500Z", + "Web/HTTP/Status/103": { + "modified": "2020-10-15T22:20:13.143Z", "contributors": [ - "davidguhao" + "TsingJyujing" ] }, - "Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests": { - "modified": "2020-10-15T22:04:14.644Z", + "Web/HTTP/Status/200": { + "modified": "2020-10-15T21:52:50.809Z", "contributors": [ - "SphinxKnight", - "shevacjs" + "Yang_Hanlin", + "Limbo1223", + "yenshen", + "doterlin", + "mojiajuzi" ] }, - "Web/HTTP/Headers/Content-Security-Policy/worker-src": { - "modified": "2020-10-15T22:30:56.058Z", - "contributors": [ - "oyyunttt" - ] - }, - "Web/HTTP/Headers/Content-Type": { - "modified": "2020-10-15T21:50:48.235Z", - "contributors": [ - "ZL1019", - "kadoufall", - "WayneCui", - "xgqfrms-GitHub", - "wanhh" - ] - }, - "Web/HTTP/Headers/Cookie": { - "modified": "2020-10-15T21:54:53.599Z", + "Web/HTTP/Status/201": { + "modified": "2020-10-15T21:54:40.492Z", "contributors": [ + "Dante_Zzzz", "WayneCui" ] }, - "Web/HTTP/Headers/Cookie2": { - "modified": "2020-10-15T21:54:52.521Z", + "Web/HTTP/Status/202": { + "modified": "2019-03-23T22:10:36.745Z", "contributors": [ "WayneCui" ] }, - "Web/HTTP/Headers/Cross-Origin-Embedder-Policy": { - "modified": "2020-10-15T22:33:37.678Z", + "Web/HTTP/Status/203": { + "modified": "2019-03-23T22:10:30.257Z", "contributors": [ - "jguo0118", - "hellorayza" + "WayneCui" ] }, - "Web/HTTP/Headers/Cross-Origin-Resource-Policy": { - "modified": "2020-10-15T22:17:29.651Z", + "Web/HTTP/Status/204": { + "modified": "2020-10-15T21:51:39.388Z", "contributors": [ - "NightKing_hmsf" + "xgqfrms", + "WayneCui", + "fscholz", + "abc950309" ] }, - "Web/HTTP/Headers/DNT": { - "modified": "2020-10-15T21:54:53.651Z", + "Web/HTTP/Status/205": { + "modified": "2019-03-23T22:10:24.312Z", "contributors": [ - "yenshen", "WayneCui" ] }, - "Web/HTTP/Headers/DPR": { - "modified": "2020-10-15T22:25:12.812Z", + "Web/HTTP/Status/206": { + "modified": "2020-10-15T21:54:17.456Z", "contributors": [ - "zhangchen", - "charles-debug" + "WayneCui", + "xgqfrms-GitHub" ] }, - "Web/HTTP/Headers/Date": { - "modified": "2020-10-15T21:54:52.166Z", + "Web/HTTP/Status/300": { + "modified": "2019-03-23T22:10:32.313Z", "contributors": [ - "liaozhaonan", "WayneCui" ] }, - "Web/HTTP/Headers/Device-Memory": { - "modified": "2020-10-15T22:27:14.967Z", - "contributors": [ - "csliubo" - ] - }, - "Web/HTTP/Headers/Digest": { - "modified": "2020-10-15T22:22:30.332Z", + "Web/HTTP/Status/301": { + "modified": "2020-10-15T21:53:56.245Z", "contributors": [ - "Mulan" + "WayneCui", + "dyllen", + "ujsxn" ] }, - "Web/HTTP/Headers/ETag": { - "modified": "2020-10-15T21:54:16.091Z", + "Web/HTTP/Status/302": { + "modified": "2020-10-15T21:52:41.868Z", "contributors": [ - "Opportunity", - "zhangchen", - "LeoQuote", - "qihaiyan", - "Mdxin", + "juzhiyuan", "WayneCui", - "luckymore" + "ziyunfei", + "ujsxn", + "07akioni" ] }, - "Web/HTTP/Headers/Early-Data": { - "modified": "2020-10-15T22:10:58.660Z", + "Web/HTTP/Status/303": { + "modified": "2020-10-15T21:53:57.078Z", "contributors": [ - "Greenstorm", - "TUARAN" + "ADTC", + "WayneCui", + "ujsxn" ] }, - "Web/HTTP/Headers/Expect": { - "modified": "2019-03-23T22:11:24.440Z", + "Web/HTTP/Status/304": { + "modified": "2020-10-15T21:53:56.017Z", "contributors": [ - "WayneCui" + "MinimalistYing", + "piaoyuliang", + "maicss", + "ujsxn" ] }, - "Web/HTTP/Headers/Expect-CT": { - "modified": "2020-10-15T22:03:02.147Z", + "Web/HTTP/Status/307": { + "modified": "2020-10-15T21:53:56.226Z", "contributors": [ - "ariable" + "RainSlide", + "qwertyuiop6", + "WayneCui", + "ujsxn" ] }, - "Web/HTTP/Headers/Expires": { - "modified": "2020-10-15T21:50:45.740Z", + "Web/HTTP/Status/308": { + "modified": "2020-10-15T21:53:56.251Z", "contributors": [ - "stuxu", - "Fiag", - "marsorsun", - "sunyanan891114", - "Simba.Lin", - "paranoidjk" + "迷子碳", + "WayneCui", + "ujsxn" ] }, - "Web/HTTP/Headers/Feature-Policy": { - "modified": "2020-10-15T22:18:06.274Z", + "Web/HTTP/Status/400": { + "modified": "2019-03-23T22:14:37.056Z", "contributors": [ - "roostinghawk" + "WayneCui", + "zsirfs" ] }, - "Web/HTTP/Headers/Feature-Policy/autoplay": { - "modified": "2020-10-15T22:18:28.072Z", + "Web/HTTP/Status/401": { + "modified": "2020-10-15T21:55:04.907Z", "contributors": [ - "baijingfeng" + "WayneCui" ] }, - "Web/HTTP/Headers/Feature-Policy/camera": { - "modified": "2020-10-15T22:26:24.357Z", + "Web/HTTP/Status/402": { + "modified": "2020-10-15T22:21:27.856Z", "contributors": [ - "K.Pen" + "SphinxKnight", + "Craster", + "AlphaGir", + "youngseaz" ] }, - "Web/HTTP/Headers/Forwarded": { - "modified": "2019-03-23T22:11:01.048Z", + "Web/HTTP/Status/403": { + "modified": "2020-10-15T21:55:04.765Z", "contributors": [ - "ujsxn", + "bobo.debila", + "iSakuraNyan", "WayneCui" ] }, - "Web/HTTP/Headers/From": { - "modified": "2020-10-15T21:54:57.725Z", + "Web/HTTP/Status/404": { + "modified": "2020-10-15T21:55:04.823Z", "contributors": [ - "LiquidLiquids", + "bobo.debila", + "yenshen", "WayneCui" ] }, - "Web/HTTP/Headers/Host": { - "modified": "2020-10-15T21:51:42.418Z", - "contributors": [ - "xinu", - "chentao106", - "wallen", - "crper", - "shinyoo" - ] - }, - "Web/HTTP/Headers/If-Match": { - "modified": "2020-10-15T21:55:00.013Z", + "Web/HTTP/Status/405": { + "modified": "2020-09-29T09:31:27.183Z", "contributors": [ - "ShiChenCong", - "Bayes", - "WayneCui" + "wonerlilo", + "sideshowbarker", + "lesikolerina23", + "nicholascw", + "yuankunzhang" ] }, - "Web/HTTP/Headers/If-Modified-Since": { - "modified": "2020-10-15T21:55:01.333Z", + "Web/HTTP/Status/406": { + "modified": "2020-10-15T21:54:36.544Z", "contributors": [ - "wangtongchao", "WayneCui" ] }, - "Web/HTTP/Headers/If-None-Match": { - "modified": "2020-10-15T21:54:59.997Z", + "Web/HTTP/Status/407": { + "modified": "2020-10-15T21:55:05.803Z", "contributors": [ "WayneCui" ] }, - "Web/HTTP/Headers/If-Range": { - "modified": "2020-10-15T21:51:54.830Z", - "contributors": [ - "Froguard", - "LiuTong" - ] - }, - "Web/HTTP/Headers/If-Unmodified-Since": { - "modified": "2020-10-15T21:54:37.820Z", + "Web/HTTP/Status/408": { + "modified": "2019-03-23T22:10:32.195Z", "contributors": [ + "Juanni", "WayneCui" ] }, - "Web/HTTP/Headers/Index": { - "modified": "2019-08-30T03:36:19.849Z", - "contributors": [ - "whuhyw" - ] - }, - "Web/HTTP/Headers/Keep-Alive": { - "modified": "2020-10-15T21:55:00.550Z", + "Web/HTTP/Status/409": { + "modified": "2019-03-23T22:10:22.894Z", "contributors": [ - "zhangchen", + "liaozhaonan", "WayneCui" ] }, - "Web/HTTP/Headers/Large-Allocation": { - "modified": "2020-10-15T21:56:09.177Z", + "Web/HTTP/Status/410": { + "modified": "2020-10-15T21:53:57.979Z", "contributors": [ - "wyapx", - "crper", - "shevacjs" + "yyz940922", + "ujsxn" ] }, - "Web/HTTP/Headers/Last-Modified": { - "modified": "2020-10-15T21:55:00.234Z", + "Web/HTTP/Status/411": { + "modified": "2019-03-23T22:10:31.298Z", "contributors": [ "WayneCui" ] }, - "Web/HTTP/Headers/Link": { - "modified": "2020-10-15T22:20:52.111Z", + "Web/HTTP/Status/412": { + "modified": "2020-10-15T21:53:03.480Z", "contributors": [ - "pangyujie" + "RainSlide", + "WayneCui", + "xgqfrms-GitHub", + "LangDonHJJ" ] }, - "Web/HTTP/Headers/Location": { - "modified": "2020-10-15T21:54:51.524Z", + "Web/HTTP/Status/413": { + "modified": "2019-03-23T22:10:34.207Z", "contributors": [ + "liaozhaonan", "WayneCui" ] }, - "Web/HTTP/Headers/Origin": { - "modified": "2020-10-15T21:53:11.797Z", - "contributors": [ - "JasonJunJun", - "yuankunzhang" - ] - }, - "Web/HTTP/Headers/Pragma": { - "modified": "2020-10-15T21:54:59.607Z", + "Web/HTTP/Status/414": { + "modified": "2019-03-23T22:10:20.896Z", "contributors": [ + "liaozhaonan", + "jokechat", "WayneCui" ] }, - "Web/HTTP/Headers/Proxy-Authenticate": { - "modified": "2019-03-23T22:10:44.148Z", + "Web/HTTP/Status/415": { + "modified": "2019-03-23T22:10:21.961Z", "contributors": [ "WayneCui" ] }, - "Web/HTTP/Headers/Proxy-Authorization": { - "modified": "2019-03-23T22:10:44.333Z", + "Web/HTTP/Status/416": { + "modified": "2020-10-15T21:54:41.290Z", "contributors": [ + "liaozhaonan", "WayneCui" ] }, - "Web/HTTP/Headers/Public-Key-Pins": { - "modified": "2020-10-15T21:55:02.367Z", + "Web/HTTP/Status/417": { + "modified": "2019-03-23T22:11:26.822Z", "contributors": [ - "shevacjs", "WayneCui" ] }, - "Web/HTTP/Headers/Public-Key-Pins-Report-Only": { - "modified": "2020-10-15T22:04:11.647Z", + "Web/HTTP/Status/418": { + "modified": "2020-10-15T22:03:59.306Z", "contributors": [ + "iSakuraNyan", + "dzamlo", "ujsxn", - "shevacjs" - ] - }, - "Web/HTTP/Headers/Range": { - "modified": "2020-10-15T21:54:38.123Z", - "contributors": [ - "Meteormatt", - "WayneCui" + "youngseaz" ] }, - "Web/HTTP/Headers/Referer": { - "modified": "2020-10-15T21:55:01.465Z", + "Web/HTTP/Status/422": { + "modified": "2019-10-08T22:59:23.853Z", "contributors": [ - "xiaozhaofu", - "yenshen", - "WayneCui" + "fuxingZhang", + "SphinxKnight", + "uniforest", + "ihgazni2" ] }, - "Web/HTTP/Headers/Referrer-Policy": { - "modified": "2020-10-15T21:54:58.993Z", + "Web/HTTP/Status/425": { + "modified": "2020-10-15T22:09:53.408Z", "contributors": [ - "gadflysu", - "WeihanLi", - "WayneCui" + "liaozhaonan", + "ibard" ] }, - "Web/HTTP/Headers/Retry-After": { - "modified": "2020-10-15T21:54:59.380Z", + "Web/HTTP/Status/426": { + "modified": "2019-03-23T22:10:22.184Z", "contributors": [ "WayneCui" ] }, - "Web/HTTP/Headers/Save-Data": { - "modified": "2020-10-15T22:21:57.010Z", - "contributors": [ - "Mulan", - "fuxingZhang" - ] - }, - "Web/HTTP/Headers/Sec-Fetch-Dest": { - "modified": "2020-10-17T03:01:57.521Z", - "contributors": [ - "hebing0415", - "hellorayza" - ] - }, - "Web/HTTP/Headers/Sec-Fetch-Mode": { - "modified": "2020-10-15T22:31:17.439Z", - "contributors": [ - "EbeRybDI", - "haolayo" - ] - }, - "Web/HTTP/Headers/Sec-Fetch-Site": { - "modified": "2020-10-15T22:32:55.276Z", - "contributors": [ - "EbeRybDI" - ] - }, - "Web/HTTP/Headers/Sec-Fetch-User": { - "modified": "2020-10-15T22:32:45.194Z", - "contributors": [ - "EbeRybDI" - ] - }, - "Web/HTTP/Headers/Sec-WebSocket-Accept": { - "modified": "2020-10-15T22:11:54.497Z", - "contributors": [ - "Greenstorm" - ] - }, - "Web/HTTP/Headers/Server": { - "modified": "2020-10-15T21:54:58.617Z", + "Web/HTTP/Status/428": { + "modified": "2019-03-23T22:11:11.819Z", "contributors": [ - "yenshen", "WayneCui" ] }, - "Web/HTTP/Headers/Server-Timing": { - "modified": "2020-10-15T22:22:26.582Z", - "contributors": [ - "Mulan", - "laingke" - ] - }, - "Web/HTTP/Headers/Set-Cookie": { - "modified": "2020-10-15T21:54:55.958Z", + "Web/HTTP/Status/429": { + "modified": "2019-03-23T22:11:18.935Z", "contributors": [ - "wenlonghuo", - "superATM", - "royIdoodle", "WayneCui" ] }, - "Web/HTTP/Headers/Set-Cookie/SameSite": { - "modified": "2020-10-15T22:28:42.430Z", - "contributors": [ - "EbeRybDI", - "tinaawang" - ] - }, - "Web/HTTP/Headers/Set-Cookie2": { - "modified": "2020-10-15T21:54:57.437Z", + "Web/HTTP/Status/431": { + "modified": "2019-03-23T22:10:21.832Z", "contributors": [ "WayneCui" ] }, - "Web/HTTP/Headers/SourceMap": { - "modified": "2020-10-15T21:55:30.390Z", - "contributors": [ - "Pada" - ] - }, - "Web/HTTP/Headers/TE": { - "modified": "2020-10-15T21:54:38.379Z", + "Web/HTTP/Status/451": { + "modified": "2020-10-15T21:55:07.508Z", "contributors": [ - "ujsxn", - "shevacjs", "WayneCui" ] }, - "Web/HTTP/Headers/Timing-Allow-Origin": { - "modified": "2020-10-15T21:58:04.341Z", + "Web/HTTP/Status/500": { + "modified": "2020-10-15T21:55:08.324Z", "contributors": [ - "firesun", - "shevacjs" + "danmurch77", + "sideshowbarker", + "lesikolerina23", + "davywsr", + "slivenred", + "RainSlide", + "WayneCui", + "ziyunfei", + "aosan002" ] }, - "Web/HTTP/Headers/Tk": { - "modified": "2019-03-23T22:07:59.446Z", + "Web/HTTP/Status/501": { + "modified": "2020-10-15T21:52:25.911Z", "contributors": [ - "WayneCui" + "WayneCui", + "fscholz", + "hxl" ] }, - "Web/HTTP/Headers/Trailer": { - "modified": "2020-10-15T21:54:41.193Z", + "Web/HTTP/Status/502": { + "modified": "2020-10-15T21:55:11.141Z", "contributors": [ - "yuankunzhang", + "davywsr", + "iSakuraNyan", + "slivenred", + "wangtongchao", "WayneCui" ] }, - "Web/HTTP/Headers/Transfer-Encoding": { - "modified": "2020-10-15T21:54:37.943Z", + "Web/HTTP/Status/503": { + "modified": "2020-10-15T21:55:07.373Z", "contributors": [ + "davywsr", + "slivenred", "WayneCui" ] }, - "Web/HTTP/Headers/Upgrade-Insecure-Requests": { - "modified": "2020-10-15T21:55:00.901Z", + "Web/HTTP/Status/504": { + "modified": "2020-10-15T21:55:08.765Z", "contributors": [ + "davywsr", + "slivenred", "WayneCui" ] }, - "Web/HTTP/Headers/User-Agent": { - "modified": "2020-10-15T21:55:01.835Z", + "Web/HTTP/Status/505": { + "modified": "2019-03-23T22:10:20.789Z", "contributors": [ - "RainSlide", - "zidian257", - "wangshi3", - "qwqmeow", - "AaronGod", "WayneCui" ] }, - "Web/HTTP/Headers/User-Agent/Firefox": { - "modified": "2019-03-18T21:31:55.000Z", - "contributors": [ - "RainSlide", - "konrumi" - ] - }, - "Web/HTTP/Headers/Vary": { - "modified": "2020-10-15T21:53:14.511Z", - "contributors": [ - "swanf", - "WayneCui", - "ujsxn", - "newhuan" - ] - }, - "Web/HTTP/Headers/Via": { - "modified": "2020-10-15T21:54:55.047Z", + "Web/HTTP/Status/506": { + "modified": "2020-01-19T03:41:58.311Z", "contributors": [ - "WayneCui" + "radarfyh" ] }, - "Web/HTTP/Headers/WWW-Authenticate": { - "modified": "2020-09-03T05:56:40.972Z", + "Web/HTTP/Status/507": { + "modified": "2020-01-19T03:58:16.574Z", "contributors": [ - "EbeRybDI", - "zslucky" + "radarfyh" ] }, - "Web/HTTP/Headers/Warning": { - "modified": "2020-10-15T21:55:02.128Z", + "Web/HTTP/Status/508": { + "modified": "2020-01-19T04:02:35.671Z", "contributors": [ - "liaozhaonan", - "WayneCui" + "radarfyh" ] }, - "Web/HTTP/Headers/X-Content-Type-Options": { - "modified": "2020-10-15T21:54:52.946Z", + "Web/HTTP/Status/510": { + "modified": "2020-01-19T04:08:53.633Z", "contributors": [ - "kidonng", - "kbyyd24", - "WayneCui" + "radarfyh" ] }, - "Web/HTTP/Headers/X-Forwarded-For": { - "modified": "2019-03-23T22:11:03.571Z", + "Web/HTTP/Status/511": { + "modified": "2019-03-23T22:10:19.671Z", "contributors": [ "WayneCui" ] }, - "Web/HTTP/Headers/X-Forwarded-Host": { - "modified": "2019-03-23T22:10:57.844Z", + "Web/Houdini": { + "modified": "2020-11-21T05:08:58.458Z", "contributors": [ - "WayneCui" + "xusy", + "bingoYB", + "cutefcc", + "sunfeel", + "xgqfrms" ] }, - "Web/HTTP/Headers/X-Forwarded-Proto": { - "modified": "2019-03-23T22:11:05.199Z", + "Web/JavaScript": { + "modified": "2020-09-21T00:46:20.876Z", "contributors": [ - "hbbalfred", - "WayneCui" - ] - }, - "Web/HTTP/Headers/X-XSS-Protection": { - "modified": "2020-10-15T21:53:06.446Z", + "mkckr0", + "sengang", + "SeaAster", + "liunanchenFYJJ", + "SphinxKnight", + "iworkerweb", + "lifankohome", + "huhufufu", + "marslord", + "leo_yang", + "zhao_nanli", + "limingqian", + "xunyegege", + "price", + "konantian", + "xclhs", + "qazsweet", + "Frederick-S", + "fenyu", + "ZengYu", + "toyflivver", + "yonbo", + "ThomasWhyne", + "pluwen", + "loveagri", + "edwards1101", + "ngtmuzi", + "wemamawe", + "danmin25", + "ghb609840612", + "zxsunrise", + "wangwenhao", + "WinnerNew", + "yokiyang", + "XuQuan-nikkkki", + "Jonham", + "ElliottZheng", + "towerman1990", + "qdlaoyao", + "yong_a", + "sqchenxiyuan", + "ZhangQiRong", + "lixw1994", + "qyjs", + "zhangchen", + "baooab", + "Mr-Li-admin", + "shaodahong", + "marsoln", + "Cnmahj", + "lemonsWen", + "lppking", + "viko16", + "leafdog", + "Ende93", + "VdoG", + "xiaokk06", + "xgqfrms", + "Rusion-Wayne", + "xiaoyusilen", + "Moressette", + "simongfxu", + "eforegist", + "nperhb", + "wth", + "WentaoMa", + "Roland_Reed", + "leonine", + "stdupp", + "lunix01", + "sammuelyee", + "MMOnster", + "redman9", + "wangsai", + "flyingdew", + "Yaty", + "yenshen", + "apollo", + "azzndmy", + "yiding_he", + "Brainor", + "ReyCG_sub", + "teoli", + "7anshuai", + "xcffl", + "ziyunfei", + "Asvel", + "sonzero@163.com", + "xiaoxiong", + "iwo", + "lins05" + ] + }, + "Web/JavaScript/A_re-introduction_to_JavaScript": { + "modified": "2020-12-11T11:33:32.340Z", + "contributors": [ + "柳涤尘", + "SphinxKnight", + "BruceHong666", + "koo4", + "hechenxi", + "hufeicom", + "eMUQI", + "houfengqaz", + "licia-tia", + "necokeine", + "Pro-A", + "TianLangStudio", + "Frederick-S", + "123Jonne", + "fenglui", + "RainSlide", + "zhaoke2018", + "coldfog", + "edenpan", + "kanaza", + "LeoB-O", + "panle666", + "SAM.L", + "YRFT", + "Park-ma", + "LuoYun", + "mysmlz", + "OldisNewXrf", + "Jiasm", + "HoldDie", + "byoungd", + "TheLostXianXian", + "RockJerffreason", + "JayceZhang9602", + "funnyChinese", + "liubiantao", + "suxiesumiao", + "Jack-Q", + "w-halo", + "marsoln", + "Poisonloc", + "ngtmuzi", + "pramper", + "wangbin2015", + "Ende93", + "machao", + "Tienyz", + "susutou", + "xlyimi", + "ziyunfei", + "arniu", + "Breezewish", + "ticketock", + "teoli", + "xuxun", + "Joe_Zhao", + "xcffl", + "ethertank", + "Mgjbot", + "Physacco", + "Carrie zhxj", + "Laser" + ] + }, + "Web/JavaScript/About_JavaScript": { + "modified": "2020-03-12T19:36:16.731Z", + "contributors": [ + "Poisonloc", + "ziyunfei", + "Breezewish", + "gelin", + "teoli", + "Meteormatt", + "ethertank", + "undercooled" + ] + }, + "Web/JavaScript/Closures": { + "modified": "2020-10-14T01:19:42.853Z", + "contributors": [ + "Neo42", + "sunan112", + "xuqian", + "xvusrmqj", + "Lazy_Bone", + "mkckr0", + "fish-inu", + "Nonym", + "kingsley2036", + "watsonhaw", + "LuoYun", + "maoyumaoxun", + "HongjinLI", + "dreampasssser", + "foshhh", + "Akiq2016", + "szengtal", + "zhang-hongwei", + "helloli", + "xgqfrms-GitHub", + "ziyunfei", + "zhuangyin", + "springfish", + "ZZES_REN", + "righttoe", + "hiyoushu", + "KngZhi", + "eeeeeeeason", + "HeSijie", + "calidion", + "mr.code", + "lihx_hit", + "_da", + "xgqfrms", + "wth", + "Jack-Q", + "distums", + "Poisonloc", + "mysticzap", + "vino24", + "putdownTheCode", + "yang.rc", + "maybe", + "fskuok", + "devyps", + "Breezewish", + "phoenix.huang", + "kangkai92", + "teoli", + "hui314", + "rogersuen" + ] + }, + "Web/JavaScript/Data_structures": { + "modified": "2020-06-05T03:23:50.915Z", + "contributors": [ + "zangbianxuegu", + "wallena3", + "Logan-Li", + "xuanji", + "huxinsen", + "molee1905", + "WangLeto", + "wemamawe", + "ywjco", + "ShirleyM", + "wblovezqy", + "eyasliu", + "issliu", + "hangyangws", + "Musan", + "Ende93", + "eric183", + "Jacobwang", + "knightf", + "JsonMe", + "asdzxcqwe", + "holsety", + "Breezewish", + "ElsaHuang", + "7anshuai", + "teoli", + "keechi", + "polucy", + "_WhiteCusp" + ] + }, + "Web/JavaScript/Enumerability_and_ownership_of_properties": { + "modified": "2020-08-31T07:44:40.404Z", + "contributors": [ + "unbyte", + "RainSlide", + "leavesster", + "Ende93", + "walfud", + "funroller", + "monjer", + "Gaohaoyang", + "xiefei89", + "Jack-Q", + "ziyunfei", + "yenshen" + ] + }, + "Web/JavaScript/Equality_comparisons_and_sameness": { + "modified": "2020-10-17T07:01:49.622Z", + "contributors": [ + "jaredhan418", + "zjffun", + "RenzHoly", + "gongzhibin", + "xiayao", + "esphas", + "dy21335", + "Charlotte007", + "fun3c", + "Ende93", + "xgqfrms-GitHub", + "vincenting", + "Roland_Reed", + "Jack-Q", + "ngtmuzi", + "i-PeterZhang", + "xufeng", + "ziyunfei", + "fskuok", + "tiansh", + "faceach", + "ilia" + ] + }, + "Web/JavaScript/EventLoop": { + "modified": "2020-08-12T23:49:07.122Z", + "contributors": [ + "JobbyM", + "johnao", + "penglianglee", + "molee1905", + "sundi78634", + "xgl", + "SterileSummer", + "esphas", + "daxiazilong", + "zhangchen", + "Thoxvi", + "zhuangyin", + "LeoSpark", + "mozhs", + "xgqfrms-GitHub", + "LiXin", + "xycd", + "hxyoo1990", + "guoqiang", + "fengma", + "Ende93", + "xiaojichao", + "liyongleihf2006", + "slayerxj", + "timwangdev", + "distums", + "xufeng", + "ziyunfei", + "jcouyang", + "shinv", + "lcxfs1991", + "HectorGuo", + "Fantasy_shao" + ] + }, + "Web/JavaScript/Guide": { + "modified": "2020-04-10T23:43:33.112Z", + "contributors": [ + "lyno", + "RainSlide", + "Soy", + "Wenfang_Du", + "mumu-one", + "xuziang111", + "miffy24", + "shannonZhong", + "bowen-wu", + "Pomelo1213", + "Jamamm", + "xiaozhi1", + "bibi941", + "zhumengyua", + "XINHE", + "frankfang1990", + "zhangchen", + "santong", + "Grizzly-Eric", + "WavinFlag", + "Moressette", + "nperhb", + "yenshen", + "ngtmuzi", + "taccelerate", + "456wyc", + "lunix01", + "kacoro", + "ssbunny", + "wsxyeah", + "teoli", + "ziyunfei", + "rogersuen" + ] + }, + "Web/JavaScript/Guide/Control_flow_and_error_handling": { + "modified": "2020-03-12T19:37:58.561Z", + "contributors": [ + "ChenZhuoSteve", + "xclhs", + "fanqw", + "zhangchen", + "Hitomichan", + "sqchenxiyuan", + "123456zzz", + "zsxeee", + "xgqfrms-GitHub", + "cdz", + "lwxyfer", + "hpcherry", + "funnyChinese", + "ticketock", + "anbang", + "xdsnet", + "codetaro", + "think3t", + "Moressette", + "eforegist", + "boredivan", + "kavon", + "victor0801x", + "eating_miao", + "tangolivesky", + "zouyonghao", + "GodEngine", + "binhex", + "lushunming", + "MurphyL", + "zhaozhb", + "DeepDarkSpirit", + "kictpov", + "wenxiangmao", + "gabrielwu", + "tao0923", + "wolfFN", + "wangxb", + "ziyunfei", + "tonypupp", + "Shimo", + "teoli" + ] + }, + "Web/JavaScript/Guide/Details_of_the_Object_Model": { + "modified": "2020-07-21T04:10:47.398Z", + "contributors": [ + "suvyme", + "johnao", + "tzmf", + "zjffun", + "wbamberg", + "AlphaGo88", + "ThomasWhyne", + "yokiyang", + "zhangchen", + "MiRinZhang", + "Ende93", + "michelia", + "ywang1724", + "ReyCG", + "teoli", + "key", + "ziyunfei", + "zsytssk", + "rogersuen" + ] + }, + "Web/JavaScript/Guide/Expressions_and_Operators": { + "modified": "2020-12-12T02:19:33.855Z", + "contributors": [ + "柳涤尘", + "aq1121", + "Ende93", + "bifan", + "ZhQb", + "maoyumaoxun", + "LuoYun", + "yuansuye", + "syhxczy", + "zhangchen", + "bozh", + "lociver", + "vividlai", + "vincenting", + "choury", + "wenmin92", + "_da", + "zhaoge26", + "chenpeiguang", + "codetaro", + "Gohikin", + "sgr", + "bigzhao", + "imDemo", + "klutzCoder", + "cinside", + "chuanyidai", + "eddy8", + "kavon", + "victor0801x", + "ngtmuzi", + "xoyoz", + "RachelChen", + "zenzzy", + "wumouse", + "Toweave", + "wenxiangmao", + "mpchina", + "z_p_p", + "997404959", + "Frantic1048", + "teoli", + "LieGroup", + "sevens", + "john_li", + "carl_zhu", + "ziyunfei" + ] + }, + "Web/JavaScript/Guide/Functions": { + "modified": "2020-09-16T04:44:03.700Z", + "contributors": [ + "springwq", + "johnao", + "YooHoeh", + "narutojian", + "chrisdavidmills", + "yulongjing", + "white-more", + "Jzhuonan", + "vainl", + "putongxiaozhu", + "yuansuye", + "Phoenix13", + "SphinxKnight", + "NotDead-NotPerish", + "zhangchen", + "ian.zhang", + "xgqfrms-GitHub", + "wenmin92", + "codetaro", + "appie963", + "caicaicai", + "Darkoe", + "victor0801x", + "helloguangxue", + "tangolivesky", + "wumouse", + "Ende93", + "SamuraiMe", + "duckisaac", + "ziyunfei", + "Cjavaer", + "snowsolf", + "lvjs", + "smartkid", + "teoli", + "sunorry", + "iwo" + ] + }, + "Web/JavaScript/Guide/Grammar_and_types": { + "modified": "2020-10-01T04:36:59.031Z", + "contributors": [ + "dva2019ksy", + "junhaoim", + "SirnoChan", + "Meow-z", + "catlair", + "WoodCube", + "lorry0508", + "ronesam", + "inlym", + "AlphaGo88", + "strandjun", + "hgbj0001", + "vainl", + "goodqd", + "yuansuye", + "zxsunrise", + "hiyoushu", + "zhumengyua", + "runyul", + "shelleyIstar", + "superkuang", + "BlasphemerAzog", + "Timer", + "tjyas", + "xgqfrms-GitHub", + "zxsky1", + "cdz", + "Taisetsuz", + "Arthur.CHANG", + "Seattle", + "faremax", + "fengma", + "xdsnet", + "codetaro", + "VdoG", + "tylerxue", + "Ende93", + "zurl", + "Moressette", + "dsb123dsb", + "kangkai0124", + "koalaxiaot", + "eforegist", + "GoForWill", + "m4jing", + "gknpezgssb", + "evolighting", + "TruthBean", + "kavon", + "victor0801x", + "PoppinL", + "louwuxin", + "xioZquan", + "zhaozhb", + "zouyonghao", + "ziyunfei", + "amIurs", + "gabrielwu", + "kacoro", + "tiansh", + "ReyCG_sub", + "teoli", + "LieGroup", + "evantre", + "iwo" + ] + }, + "Web/JavaScript/Guide/Indexed_collections": { + "modified": "2020-06-29T06:11:51.519Z", + "contributors": [ + "MaZheng", + "amzrk2", + "keys", + "ruoxianbaby", + "aimishan", + "BUnnY25", + "LeoSpark", + "hpcherry", + "niccoming", + "xdsnet", + "kiyonlin", + "codetaro", + "caoruiy", + "suxiesumiao", + "victor0801x", + "zhulinpinyu", + "456wyc", + "gaigeshen", + "VincentLiu0314" + ] + }, + "Web/JavaScript/Guide/Introduction": { + "modified": "2020-07-30T09:11:33.207Z", + "contributors": [ + "Kirin", + "RainSlide", + "agulleung", + "inlym", + "daxiazilong", + "a358003542", + "ElliottZheng", + "runyul", + "123456zzz", + "wushengde", + "zhuangyin", + "lsbrucelincoln", + "seaHeater", + "_da", + "xdsnet", + "VdoG", + "xiaoyusilen", + "eforegist", + "Mosan", + "Joilence", + "LeoMobileDeveloper", + "m4jing", + "dunizb", + "solome", + "zhanglei1995", + "zhe13", + "Rambone", + "Ende93", + "majunbao", + "MurphyL", + "zouyonghao", + "zhengshi", + "fissh", + "pixiu", + "ssbunny", + "PhenixGhost", + "MrH2S", + "HopeCoder", + "ziyunfei", + "hackerZhang" + ] + }, + "Web/JavaScript/Guide/Iterators_and_Generators": { + "modified": "2020-04-19T03:41:05.778Z", + "contributors": [ + "Russell", + "johnao", + "NieLamu", + "SageX", + "Yayure", + "ErChuan", + "RainSlide", + "jupiterben", + "xgqfrms", + "Wuqichao", + "BingerWeb", + "yueshuiniao", + "zhangjiawei0", + "zhangchen", + "azoth1991", + "ezirmusitua", + "xgqfrms-GitHub", + "DarwinniwraD", + "kiyonlin", + "Howard.Chen", + "ianfung1998", + "liadbiz", + "snandy", + "teoli", + "ziyunfei", + "AriesDevil", + "Joyce" + ] + }, + "Web/JavaScript/Guide/Keyed_collections": { + "modified": "2020-03-12T19:41:31.376Z", + "contributors": [ + "haoye999", + "Jiasm", + "zhangchen", + "jiahui", + "indux", + "supermanmsc", + "fengzhongye" + ] + }, + "Web/JavaScript/Guide/Loops_and_iteration": { + "modified": "2020-03-12T19:42:07.957Z", + "contributors": [ + "koor", + "narutojian", + "RainSlide", + "Wuqichao", + "SphinxKnight", + "zero_zero_zero", + "zhuangyin", + "Zheng7426", + "Bob_young", + "xiaowei.yang", + "johncido", + "xgqfrms-GitHub", + "xdsnet", + "codetaro", + "suxiesumiao", + "AcJoker", + "kavon", + "lushunming", + "MurphyL", + "wumouse", + "intuitionfly" + ] + }, + "Web/JavaScript/Guide/Meta_programming": { + "modified": "2020-10-06T11:58:28.618Z", + "contributors": [ + "SeekerGAO", + "suvyme", + "RainSlide", + "OStoneO", + "rikochyou", + "zhangchen", + "123456zzz", + "pamikel", + "xgqfrms-GitHub", + "hpcherry", + "zyMacro", + "cughudson_1", + "acekingke", + "binhex", + "FredWe" + ] + }, + "Web/JavaScript/Guide/Modules": { + "modified": "2020-10-15T22:19:12.670Z", + "contributors": [ + "ran", + "PPFei5Zhou", + "bkuke", + "StorytellerF", + "Yayure", + "narutojian", + "RainSlide", + "hotbaby" + ] + }, + "Web/JavaScript/Guide/Numbers_and_dates": { + "modified": "2020-12-12T05:50:13.576Z", + "contributors": [ + "柳涤尘", + "antield", + "symant233", + "迷子碳", + "qazsweet", + "canyi1942", + "fenyu", + "adasqg", + "zms1995", + "trionfo1993", + "ShaderWind", + "vividlai", + "yonglezhou", + "DaiZhiTao", + "jitingsun", + "niccoming", + "xiaokk06", + "sgr", + "suxiesumiao", + "victor0801x", + "zhulinpinyu", + "williamchu123", + "ShiJianwen", + "zhe13", + "Toweave", + "Serifx", + "456wyc", + "wenxiangmao" + ] + }, + "Web/JavaScript/Guide/Regular_Expressions": { + "modified": "2020-11-07T12:19:15.360Z", + "contributors": [ + "hensonxu", + "imbriansun", + "Alibuibui", + "srq18211", + "symant233", + "MikeLeon23", + "antield", + "zytjs", + "jingkaimori", + "aliasliao", + "Clara-hy", + "yasen-wolf", + "cody343960591", + "PoppinL", + "cy234", + "RainSlide", + "pzjzeason", + "millionssss", + "iamwwc", + "Yayure", + "Checkson", + "crow-n", + "yadex", + "OlingCat", + "Fungzhe", + "ts0307", + "jianglinghao", + "SphinxKnight", + "AlexStacker", + "zhuangyin", + "Ahhaha233", + "yinsang", + "fengma", + "chenym1992", + "ataotao", + "lixingdecai", + "bmxklYzj", + "Frantic1048", + "hysunny", + "xgqfrms-GitHub", + "Ckc", + "Jeff-Kook", + "ljy", + "maoxiaoke", + "falltodis", + "codetaro", + "simongfxu", + "fanyj1994", + "huaxiabuluo", + "lvhao96", + "luobotang", + "yisibl", + "ngtmuzi", + "chen_wang", + "Ende93", + "sunshineMaria", + "snowsolf", + "sleep", + "Shimo", + "Guanjinke", + "teoli", + "sablib", + "thesadboy", + "devqin", + "jpuncle", + "xiaoxiong", + "ziyunfei" + ] + }, + "Web/JavaScript/Guide/Regular_Expressions/Assertions": { + "modified": "2020-11-07T12:07:11.701Z", + "contributors": [ + "hensonxu", + "srq18211", + "oxyg3n", + "zytjs", + "fish-inu", + "Dev_ljp", + "Xu-Angel", + "liuhao088" + ] + }, + "Web/JavaScript/Guide/Regular_Expressions/Character_Classes": { + "modified": "2020-06-28T13:35:45.679Z", + "contributors": [ + "srq18211" + ] + }, + "Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges": { + "modified": "2020-08-21T07:28:58.610Z", + "contributors": [ + "srq18211" + ] + }, + "Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes": { + "modified": "2020-07-11T06:10:35.787Z", + "contributors": [ + "zkmbdbbdd" + ] + }, + "Web/JavaScript/Guide/Text_formatting": { + "modified": "2020-07-13T05:48:34.741Z", + "contributors": [ + "laampui", + "zhangchen", + "niccoming", + "evolighting", + "i-PeterZhang", + "456wyc", + "redman9", + "guangxiyu" + ] + }, + "Web/JavaScript/Guide/Using_promises": { + "modified": "2020-09-28T05:37:42.938Z", + "contributors": [ + "Radix10", + "xuquentinyang", + "HashiKudo", + "brizer", + "iEmcc", + "johnao", + "abellong", + "SAM.L", + "RainSlide", + "VickyJin", + "jessica1990", + "TeabugCC", + "zhuangyin", + "ujsxn", + "huixisheng", + "yulongjing", + "rxliuli", + "yonoel", + "DevOps", + "brandonhyc", + "eeeecw", + "zotille", + "xuziang111", + "NN708", + "xuxun", + "zhangchen", + "Evoque", + "Pythonofsdc", + "vanishcode", + "winjeysong", + "cwc7233", + "TimmyKingFree" + ] + }, + "Web/JavaScript/Guide/Working_with_Objects": { + "modified": "2020-03-21T00:54:40.101Z", + "contributors": [ + "johnao", + "fish-inu", + "ngtmuzi", + "Pomelo1213", + "ywjco", + "kramon", + "kgojiwong", + "xgqfrms-GitHub", + "heliangb46", + "Grizzly-Eric", + "zhanglianxin", + "coderfee", + "kiyonlin", + "IrisZhang", + "xwartz", + "Darkoe", + "XueSeason", + "jigs12", + "ReyCG_sub", + "smartkid", + "teoli", + "koala", + "ziyunfei" + ] + }, + "Web/JavaScript/Inheritance_and_the_prototype_chain": { + "modified": "2020-10-20T00:17:44.610Z", + "contributors": [ + "jack_chen", + "Nirvana-zsy", + "PiersZhang", + "YTInMyHeart", + "熊英明", + "AaronZzz", + "hydra-zim", + "demongodYY", + "c932828964", + "maozhenyu123", + "NicholasKong", + "Huangyilin19", + "MonkingStand", + "RainSlide", + "xulinggege", + "Rayyh", + "glud123", + "HuangXiZhou", + "Ieeebruce", + "Snailight", + "yonoel", + "lllbahol", + "ssttii", + "xgqfrms", + "DPJune1", + "MQpeng", + "yangzi", + "zhuangyin", + "anglli", + "Akiq2016", + "jeasonstudio", + "Sevenskey", + "LiXin", + "qiu_han", + "zhangchen", + "keifergu", + "jiangzhenggeng", + "DendiSe7enGitHub", + "zenith7ryu", + "feiyuabc", + "KngZhi", + "xgqfrms-GitHub", + "efeencheung", + "TwinkleLeon", + "jyjz2008", + "Mrzouning", + "craney", + "Ende93", + "nanflower", + "Ares_Xu", + "RenzHoly", + "xiaokk06", + "Musan", + "Downpooooour", + "maicss", + "iplus26", + "gavinjs", + "ziyunfei", + "hbkdsm", + "hipop", + "860136", + "Tranch", + "ReyCG", + "teoli", + "hutuxu" + ] + }, + "Web/JavaScript/JavaScript_technologies_overview": { + "modified": "2020-03-12T19:38:44.101Z", + "contributors": [ + "RainSlide", + "zhanglianxin", + "lunix01", + "Musan", + "ReyCG_sub", + "teoli", + "YuQiang.Yuan" + ] + }, + "Web/JavaScript/Language_Resources": { + "modified": "2020-03-12T19:37:56.380Z", + "contributors": [ + "lunix01", + "teoli", + "ziyunfei" + ] + }, + "Web/JavaScript/Memory_Management": { + "modified": "2020-03-12T19:38:33.297Z", + "contributors": [ + "y00rb", + "xueliang", + "leavesster", + "quding0308", + "liujuntao123", + "JuneDeng2014", + "ilexwg", + "DarrenMan", + "zhangchen", + "micooz", + "sunnylost", + "Ende93", + "wth", + "timwangdev", + "jackyKin", + "horizon0514", + "knightf", + "Bosn", + "teoli", + "Samoay", + "tank", + "jnoodle", + "Joe_Zhao", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference": { + "modified": "2020-09-20T23:15:37.162Z", + "contributors": [ + "laampui", + "seanhuai", + "wwj402", + "RainSlide", + "ssttii", + "causal", + "zhangchen", + "Ende93", + "lunix01", + "ziyunfei", + "teoli", + "CHiENiUS", + "kovchou" + ] + }, + "Web/JavaScript/Reference/About": { + "modified": "2020-03-12T19:40:27.168Z", + "contributors": [ + "Jack-Q", + "lunix01", + "qlxiao520", + "ziyunfei", + "yenshen" + ] + }, + "Web/JavaScript/Reference/Classes": { + "modified": "2020-11-21T07:35:29.331Z", + "contributors": [ + "xiaoxiao1024", + "xgqfrms", + "niices", + "showad", + "xuyimingwork", + "zytjs", + "brizer", + "johnao", + "PeanutQAQ", + "HermitSun", + "narutojian", + "JackDing1208", + "willerhehehe", + "zhangchen", + "llyo", + "LiXin", + "xgqfrms-GitHub", + "LouisaNikita", + "winjeysong", + "PhilTheAir", + "XiongAmao", + "kylezhang", + "tarma", + "Jeane", + "Ende93", + "miuchan", + "slientomorrr", + "ziyunfei", + "eric183", + "sartrey", + "snandy", + "bumaociyuan" + ] + }, + "Web/JavaScript/Reference/Classes/Private_class_fields": { + "modified": "2020-10-15T22:30:12.129Z", + "contributors": [ + "zhuangyin", + "symant233", + "wizard-intraining" + ] + }, + "Web/JavaScript/Reference/Classes/constructor": { + "modified": "2020-10-15T21:36:30.986Z", + "contributors": [ + "zhangchen", + "CJackYang", + "jiangseventeen", + "xgqfrms-GitHub", + "Ende93", + "destinyCherry", + "MarxJiao", + "chaooo", + "Lellansin" + ] + }, + "Web/JavaScript/Reference/Classes/extends": { + "modified": "2020-10-15T21:37:25.638Z", + "contributors": [ + "zhangchen", + "thinkershare", + "liuwj", + "xgqfrms-GitHub", + "MoYahoo", + "Ende93", + "xiaoweb", + "ziyunfei", + "TinyJiang", + "pixiu" + ] + }, + "Web/JavaScript/Reference/Classes/static": { + "modified": "2020-10-15T21:37:45.068Z", + "contributors": [ + "daijie", + "luna666", + "zhuangyin", + "xgqfrms-GitHub", + "zhangchen", + "hijiangtao", + "MrCuriosity", + "kameii", + "solome", + "ngtmuzi", + "willwong", + "knightf", + "lunix01" + ] + }, + "Web/JavaScript/Reference/Deprecated_and_obsolete_features": { + "modified": "2020-03-30T11:15:40.777Z", + "contributors": [ + "RainSlide", + "teoli", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol": { + "modified": "2020-03-12T19:44:37.222Z", + "contributors": [ + "wwj402", + "jwhitlock", + "lsvih" + ] + }, + "Web/JavaScript/Reference/Errors": { + "modified": "2020-03-12T19:43:37.546Z", + "contributors": [ + "Ende93", + "Jack-Q", + "sabertazimi" + ] + }, + "Web/JavaScript/Reference/Errors/Already_has_pragma": { + "modified": "2020-03-12T19:45:25.142Z", + "contributors": [ + "wizardforcel" + ] + }, + "Web/JavaScript/Reference/Errors/Array_sort_argument": { + "modified": "2020-03-12T19:45:22.429Z", + "contributors": [ + "hui1993", + "Ende93" + ] + }, + "Web/JavaScript/Reference/Errors/Bad_octal": { + "modified": "2020-03-12T19:45:19.888Z", + "contributors": [ + "WayneCui", + "Ende93" + ] + }, + "Web/JavaScript/Reference/Errors/Bad_radix": { + "modified": "2020-03-12T19:44:42.812Z", + "contributors": [ + "xiaokk06" + ] + }, + "Web/JavaScript/Reference/Errors/Bad_regexp_flag": { + "modified": "2020-03-12T19:46:18.624Z", + "contributors": [ + "lazyboywu" + ] + }, + "Web/JavaScript/Reference/Errors/Bad_return_or_yield": { + "modified": "2020-03-12T19:44:37.026Z", + "contributors": [ + "wangmengjun", + "Cattla" + ] + }, + "Web/JavaScript/Reference/Errors/Called_on_incompatible_type": { + "modified": "2020-03-12T19:46:49.645Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init": { + "modified": "2020-03-12T19:46:25.675Z", + "contributors": [ + "kilodleif", + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Cant_access_property": { + "modified": "2020-03-12T19:48:25.216Z", + "contributors": [ + "zangguodong" + ] + }, + "Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible": { + "modified": "2020-03-12T19:46:26.772Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Cant_delete": { + "modified": "2020-03-12T19:45:31.865Z", + "contributors": [ + "lihx_hit", + "wizardforcel" + ] + }, + "Web/JavaScript/Reference/Errors/Cant_redefine_property": { + "modified": "2020-03-12T19:46:26.214Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Cyclic_object_value": { + "modified": "2020-07-13T11:27:10.484Z", + "contributors": [ + "Mrdapeng", + "540692039", + "nansanhao", + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Dead_object": { + "modified": "2020-03-12T19:46:28.473Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Delete_in_strict_mode": { + "modified": "2020-03-12T19:46:25.179Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Deprecated_String_generics": { + "modified": "2020-03-12T19:46:39.182Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage": { + "modified": "2020-03-12T19:45:21.241Z", + "contributors": [ + "Ende93" + ] + }, + "Web/JavaScript/Reference/Errors/Deprecated_expression_closures": { + "modified": "2020-03-12T19:46:34.964Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Deprecated_octal": { + "modified": "2020-03-12T19:46:39.086Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma": { + "modified": "2020-03-12T19:45:31.617Z", + "contributors": [ + "Kaede_Shinoda", + "Ende93" + ] + }, + "Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat": { + "modified": "2020-03-12T19:46:45.691Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Equal_as_assign": { + "modified": "2020-03-12T19:44:21.268Z", + "contributors": [ + "niaodan2b" + ] + }, + "Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated": { + "modified": "2020-03-12T19:45:01.286Z", + "contributors": [ + "_da" + ] + }, + "Web/JavaScript/Reference/Errors/Getter_only": { + "modified": "2020-03-12T19:46:35.397Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Identifier_after_number": { + "modified": "2020-03-12T19:46:01.632Z", + "contributors": [ + "AlanStewart6", + "fanxiaobin1992" + ] + }, + "Web/JavaScript/Reference/Errors/Illegal_character": { + "modified": "2020-03-12T19:46:25.974Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Invalid_array_length": { + "modified": "2020-03-12T19:44:25.874Z", + "contributors": [ + "xiaokk06", + "Hitomichan" + ] + }, + "Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side": { + "modified": "2020-03-12T19:44:25.285Z", + "contributors": [ + "Ende93" + ] + }, + "Web/JavaScript/Reference/Errors/Invalid_const_assignment": { + "modified": "2020-03-12T19:46:37.514Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Invalid_date": { + "modified": "2020-03-12T19:46:02.926Z", + "contributors": [ + "xiaokk06", + "kilodleif", + "dudusky" + ] + }, + "Web/JavaScript/Reference/Errors/Invalid_for-in_initializer": { + "modified": "2020-03-12T19:46:25.733Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Invalid_for-of_initializer": { + "modified": "2020-03-12T19:46:25.653Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/JSON_bad_parse": { + "modified": "2020-03-12T19:44:41.664Z", + "contributors": [ + "Ende93", + "imhaohao" + ] + }, + "Web/JavaScript/Reference/Errors/Malformed_URI": { + "modified": "2020-03-12T19:46:27.676Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Malformed_formal_parameter": { + "modified": "2020-03-12T19:45:20.875Z", + "contributors": [ + "Ende93" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_bracket_after_list": { + "modified": "2020-03-12T19:45:17.108Z", + "contributors": [ + "Ende93" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_colon_after_property_id": { + "modified": "2020-03-12T19:46:24.903Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_curly_after_function_body": { + "modified": "2020-03-12T19:46:26.744Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_curly_after_property_list": { + "modified": "2020-03-12T19:45:22.931Z", + "contributors": [ + "Ende93" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_formal_parameter": { + "modified": "2020-03-12T19:46:22.522Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_initializer_in_const": { + "modified": "2020-03-12T19:46:26.113Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator": { + "modified": "2020-03-12T19:46:26.813Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list": { + "modified": "2020-03-12T19:44:53.187Z", + "contributors": [ + "Idealist_EZ", + "VanLeon" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition": { + "modified": "2020-03-12T19:46:25.852Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { + "modified": "2020-03-12T19:44:58.615Z", + "contributors": [ + "Davont", + "jitingsun" + ] + }, + "Web/JavaScript/Reference/Errors/More_arguments_needed": { + "modified": "2020-03-12T19:45:18.099Z", + "contributors": [ + "Ende93" + ] + }, + "Web/JavaScript/Reference/Errors/Negative_repetition_count": { + "modified": "2020-03-12T19:45:19.235Z", + "contributors": [ + "Ende93" + ] + }, + "Web/JavaScript/Reference/Errors/No_non-null_object": { + "modified": "2020-03-12T19:46:21.638Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/No_properties": { + "modified": "2020-03-12T19:45:01.030Z", + "contributors": [ + "lisniuse", + "jitingsun" + ] + }, + "Web/JavaScript/Reference/Errors/No_variable_name": { + "modified": "2020-03-12T19:46:26.272Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Non_configurable_array_element": { + "modified": "2020-03-12T19:46:26.810Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Not_a_codepoint": { + "modified": "2020-03-12T19:44:36.705Z", + "contributors": [ + "YYYxt", + "Cattla" + ] + }, + "Web/JavaScript/Reference/Errors/Not_a_constructor": { + "modified": "2020-03-12T19:45:22.496Z", + "contributors": [ + "Ende93" + ] + }, + "Web/JavaScript/Reference/Errors/Not_a_function": { + "modified": "2020-06-13T05:01:42.941Z", + "contributors": [ + "kagurakana", + "Ende93", + "lisniuse" + ] + }, + "Web/JavaScript/Reference/Errors/Not_defined": { + "modified": "2020-06-19T20:36:57.807Z", + "contributors": [ + "oyyunttt", + "Veneno", + "yenshen", + "Zappa451", + "Hitomichan" + ] + }, + "Web/JavaScript/Reference/Errors/Precision_range": { + "modified": "2020-03-12T19:44:41.579Z", + "contributors": [ + "xiaokk06", + "Desmond", + "ihuguowei" + ] + }, + "Web/JavaScript/Reference/Errors/Property_access_denied": { + "modified": "2020-03-12T19:44:01.141Z", + "contributors": [ + "neal1991", + "Jack-Q" + ] + }, + "Web/JavaScript/Reference/Errors/Read-only": { + "modified": "2020-03-12T19:45:06.128Z", + "contributors": [ + "_da" + ] + }, + "Web/JavaScript/Reference/Errors/Redeclared_parameter": { + "modified": "2020-03-12T19:45:19.623Z", + "contributors": [ + "Ende93" + ] + }, + "Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value": { + "modified": "2020-03-12T19:47:48.693Z", + "contributors": [ + "RainSlide", + "DarrenZhang01" + ] + }, + "Web/JavaScript/Reference/Errors/Reserved_identifier": { + "modified": "2020-03-12T19:46:21.461Z", + "contributors": [ + "123456zzz", + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Resulting_string_too_large": { + "modified": "2020-03-12T19:45:20.911Z", + "contributors": [ + "Ende93" + ] + }, + "Web/JavaScript/Reference/Errors/Stmt_after_return": { + "modified": "2020-03-12T19:44:03.324Z", + "contributors": [ + "Jack-Q" + ] + }, + "Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params": { + "modified": "2020-03-12T19:45:16.824Z", + "contributors": [ + "xgqfrms-GitHub", + "Ende93" + ] + }, + "Web/JavaScript/Reference/Errors/Too_much_recursion": { + "modified": "2020-03-12T19:43:57.558Z", + "contributors": [ + "Jack-Q" + ] + }, + "Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments": { + "modified": "2020-03-12T19:46:27.376Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Undeclared_var": { + "modified": "2020-03-12T19:45:21.644Z", + "contributors": [ + "Ende93" + ] + }, + "Web/JavaScript/Reference/Errors/Undefined_prop": { + "modified": "2020-03-12T19:45:16.927Z", + "contributors": [ + "Ende93" + ] + }, + "Web/JavaScript/Reference/Errors/Unexpected_token": { + "modified": "2020-03-12T19:45:18.592Z", + "contributors": [ + "Ende93" + ] + }, + "Web/JavaScript/Reference/Errors/Unexpected_type": { + "modified": "2020-03-12T19:44:27.931Z", + "contributors": [ + "yenshen", + "niaodan2b" + ] + }, + "Web/JavaScript/Reference/Errors/Unnamed_function_statement": { + "modified": "2020-03-12T19:46:23.117Z", + "contributors": [ + "Lxio", + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/Unterminated_string_literal": { + "modified": "2020-03-12T19:45:03.493Z", + "contributors": [ + "Ende93", + "luckyG0429" + ] + }, + "Web/JavaScript/Reference/Errors/Var_hides_argument": { + "modified": "2020-03-12T19:45:33.390Z", + "contributors": [ + "wizardforcel" + ] + }, + "Web/JavaScript/Reference/Errors/in_operator_no_object": { + "modified": "2020-03-12T19:46:27.485Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand": { + "modified": "2020-03-12T19:47:39.673Z", + "contributors": [ + "JodieShi" + ] + }, + "Web/JavaScript/Reference/Errors/is_not_iterable": { + "modified": "2020-03-12T19:48:06.104Z", + "contributors": [ + "JsirForGit", + "rockSandy" + ] + }, + "Web/JavaScript/Reference/Functions": { + "modified": "2020-10-15T21:02:46.649Z", + "contributors": [ + "meng-Macbook", + "zhangchen", + "LiXin", + "righttoe", + "KngZhi", + "xgqfrms-GitHub", + "appie963", + "Jianming", + "Ende93", + "ChristopherMa2012", + "ziyunfei", + "teoli", + "lijunchengbeyond", + "byronhe", + "iwo" + ] + }, + "Web/JavaScript/Reference/Functions/Arrow_functions": { + "modified": "2020-10-15T21:22:15.274Z", + "contributors": [ + "symant233", + "zhonghuajiadezhuizhongyu", + "woshiqiang1", + "YangYihui", + "kingsley2036", + "Monkey-D-Pixel", + "Himself65", + "Frederick-S", + "jianchao_xue", + "ZeroWhiteSmile", + "wangbangkun", + "ColinJinag", + "zjjgsc", + "Harleywww", + "huangll", + "LeoQuote", + "jjc", + "ywjco", + "Warden", + "xgqfrms-GitHub", + "zhangchen", + "anjia", + "StevenYuysy", + "ZZES_REN", + "tjyas", + "Gary-c", + "linzhihuan", + "guonanci", + "shifengchen", + "unliar", + "MichelleGuan", + "slimeball", + "LangDonHJJ", + "zhangzju", + "Aisi", + "muzhen", + "Meteormatt", + "Ende93", + "Ovilia", + "solome", + "zilong-thu", + "jy1989", + "teoli", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Functions/Default_parameters": { + "modified": "2020-10-15T21:19:13.746Z", + "contributors": [ + "zhuangyin", + "zhangchen", + "xgqfrms-GitHub", + "Carlmac", + "xiaorang", + "Inokinoki", + "thomasyimgit", + "harryhao", + "lunix01", + "teoli", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Functions/Method_definitions": { + "modified": "2020-10-15T21:34:33.682Z", + "contributors": [ + "narutojian", + "by73", + "Harpes", + "fscholz", + "SphinxKnight", + "zhangchen", + "teoli", + "fskuok" + ] + }, + "Web/JavaScript/Reference/Functions/Rest_parameters": { + "modified": "2020-10-15T21:18:39.925Z", + "contributors": [ + "Yayure", + "gqbre", + "codevvvv9", + "fscholz", + "Jhongwun", + "Warden", + "zhangchen", + "Ts799498164", + "Hanx", + "xgqfrms-GitHub", + "Ende93", + "helloguangxue", + "sabrinaluo", + "teoli", + "fskuok", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Functions/arguments": { + "modified": "2020-10-15T21:02:42.108Z", + "contributors": [ + "xgqfrms", + "s1min", + "zx06", + "gqbre", + "jianchao_xue", + "ywjco", + "yeziningmeng", + "DragonHou", + "szengtal", + "zhangchen", + "renyuns", + "xgqfrms-GitHub", + "yyyyu", + "yatace", + "jihonghai", + "Ende93", + "yswang0927", + "teoli", + "asdzxcqwe", + "Fadeoc", + "brandonzhu", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Functions/arguments/@@iterator": { + "modified": "2020-10-15T21:48:23.032Z", + "contributors": [ + "fscholz", + "wizardforcel", + "wohugb" + ] + }, + "Web/JavaScript/Reference/Functions/arguments/callee": { + "modified": "2020-10-15T21:29:14.342Z", + "contributors": [ + "18boys", + "ssttii", + "fscholz", + "NoroHime", + "yangyichen", + "jyjsjd", + "xgqfrms-GitHub", + "Ende93", + "jonkee", + "teoli", + "gemstone" + ] + }, + "Web/JavaScript/Reference/Functions/arguments/length": { + "modified": "2020-10-15T21:21:10.516Z", + "contributors": [ + "fscholz", + "teoli", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Functions/get": { + "modified": "2020-10-15T21:32:24.408Z", + "contributors": [ + "wallena3", + "fscholz", + "LiXin", + "lijinglin", + "zhangchen", + "xgqfrms-GitHub", + "teoli", + "yenshen" + ] + }, + "Web/JavaScript/Reference/Functions/set": { + "modified": "2020-10-15T21:31:33.512Z", + "contributors": [ + "wallena3", + "fscholz", + "Austaras", + "zhangchen", + "xgqfrms-GitHub", + "Go7hic", + "teoli", + "nyx2014", + "LinusYu" + ] + }, + "Web/JavaScript/Reference/Global_Objects": { + "modified": "2020-10-15T01:05:17.510Z", + "contributors": [ + "Neo42", + "Ende93", + "laampui", + "wallena3", + "RainSlide", + "Frederick-S", + "SageX", + "liushengxin", + "Terry.Qiao", + "xgqfrms-GitHub", + "ZQH", + "zhangchen", + "mwc", + "Jiang-Xuan", + "SamuraiMe", + "highkay", + "lunix01", + "JoshuaGhost", + "ziyunfei", + "SphinxKnight", + "yiding_he", + "Fantasy_shao", + "AlexChao", + "teoli", + "OoOoOoOo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/AggregateError": { + "modified": "2020-10-15T22:27:42.765Z", + "contributors": [ + "叶扬", + "MaDeLu" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array": { + "modified": "2020-10-15T21:11:20.773Z", + "contributors": [ + "SphinxKnight", + "fantasy090633", + "Frederick-S", + "Willian.G", + "gqbre", + "luluyiluchangtong", + "liuchao0704", + "zxsunrise", + "fisker", + "runyul", + "Terry.Qiao", + "ywjco", + "b2ns", + "kevinfszu", + "shaojingchao", + "zhuangyin", + "xinleibird", + "xgqfrms-GitHub", + "Chocomoon", + "habc0807", + "kdex", + "amnsss", + "pigflymoon", + "xiaojunjor", + "zhiquan_yu", + "lanezhao", + "ttjkst", + "aximario", + "Ende93", + "ObooChin", + "frontzhm", + "kinuxroot", + "VIPArcher", + "ziyunfei", + "TinyJiang", + "FredWe", + "Cattla", + "Gaohaoyang", + "paddingme", + "Yaty", + "tingxinCY", + "Harvesty", + "Guanjinke", + "dancancer", + "teoli", + "WenbingZheng", + "Mickeyboy", + "Oatn", + "Kebing", + "Lanyu", + "Acefeel" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": { + "modified": "2020-10-15T21:48:08.478Z", + "contributors": [ + "GlowMonster", + "RainSlide", + "ifredom", + "Ende93", + "OshotOkill" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/@@species": { + "modified": "2020-10-15T21:47:50.737Z", + "contributors": [ + "RainSlide", + "Fire1nRain", + "fscholz", + "hongxu.Wei", + "looch5" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": { + "modified": "2020-10-15T21:48:00.162Z", + "contributors": [ + "RainSlide", + "Ende93", + "OshotOkill" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/Reduce": { + "modified": "2020-10-15T21:26:38.795Z", + "contributors": [ + "zhuangyin", + "zangbianxuegu", + "cracdic", + "tanpopo", + "SageX", + "good1uck", + "zheng1013757145", + "MrGaoGang", + "daolanfler", + "superadmin", + "jaredhan418", + "polunzh", + "haylorhu", + "yinsang", + "BingerWeb", + "linqunxun", + "weiqinl", + "danchaotaiyang", + "fscholz", + "fisker", + "ysyfff", + "wjuan960407", + "zhangchen", + "dblate", + "Go7hic", + "maximus1992", + "conniejing", + "keyood", + "righttoe", + "xgqfrms-GitHub", + "leeseean", + "micheal-death", + "coolguy", + "iugo", + "seaHeater", + "yanxiaowu", + "collhector", + "Cattla", + "vcfvct", + "teoli", + "AlexChao", + "ziyunfei", + "fishenal" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/ReduceRight": { + "modified": "2020-10-23T11:37:43.387Z", + "contributors": [ + "zhuangyin", + "RainSlide", + "SageX", + "C-boyi", + "fscholz", + "xgqfrms-GitHub", + "micheal-death", + "Menq", + "teoli", + "AlexChao", + "wilsoncook" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/concat": { + "modified": "2020-10-15T21:07:00.501Z", + "contributors": [ + "likev", + "SageX", + "qiannianchong25", + "zhangchen", + "fscholz", + "lijinwenhg", + "web-gm", + "fisker", + "badfl", + "xgqfrms-GitHub", + "Ende93", + "Aralic", + "borishuai", + "ziyunfei", + "teoli", + "Chajn" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": { + "modified": "2020-10-15T21:17:18.640Z", + "contributors": [ + "yayaxueyu", + "ZL1019", + "RainSlide", + "fscholz", + "futurefeeling", + "hongxu.Wei", + "fisker", + "Non-professionalIFE", + "xgqfrms-GitHub", + "micheal-death", + "gaoupon", + "Andself", + "Ende93", + "chendatony31", + "crowphy", + "teoli", + "ziyunfei", + "Oatn" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/entries": { + "modified": "2020-10-15T21:07:50.512Z", + "contributors": [ + "Harry-Zhao", + "fscholz", + "futurefeeling", + "ywjco", + "xgqfrms-GitHub", + "AlexChao", + "teoli", + "ziyunfei", + "yanhaijing1234" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/every": { + "modified": "2020-10-15T21:17:20.643Z", + "contributors": [ + "qianmo", + "c1er", + "RainSlide", + "genezx", + "DYERPH", + "fscholz", + "futurefeeling", + "banli17", + "zhang-hongwei", + "janason.yang", + "ziyunfei", + "LYF-MIHO", + "AlexChao", + "teoli", + "Oatn" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/fill": { + "modified": "2020-10-15T21:26:52.543Z", + "contributors": [ + "fanerge", + "zhangchen", + "fisker", + "linzx1993", + "tiansh", + "xhlsrj", + "micheal-death", + "sqchenxiyuan", + "xgqfrms-GitHub", + "Ende93", + "ziyunfei", + "teoli" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/filter": { + "modified": "2020-10-15T21:17:27.613Z", + "contributors": [ + "alexzedheng", + "Martin-Shao", + "RainSlide", + "zhangchen", + "badfl", + "zhuangyin", + "futurefeeling", + "ywjco", + "RGSS3", + "yuyongjun123", + "zhanglongdream", + "xgqfrms-GitHub", + "mooyxu", + "Gauch", + "Si-Monster", + "sartrey", + "AlexChao", + "ziyunfei", + "teoli", + "Oatn" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/find": { + "modified": "2020-10-15T21:17:19.858Z", + "contributors": [ + "canyi1942", + "Harry-Zhao", + "zhangchen", + "Spaghet-Ti", + "futurefeeling", + "Vevlins", + "banli17", + "jiankian", + "hughfenghen", + "graysongs", + "Ende93", + "zhuangyin", + "xiaojunjor", + "xgqfrms-GitHub", + "iNahoo", + "Kennytian", + "OmniP", + "ngtmuzi", + "kkzhang", + "teoli", + "huyue", + "ziyunfei", + "Oatn" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/findIndex": { + "modified": "2020-10-15T21:25:37.656Z", + "contributors": [ + "frankfang1990", + "simonzhao", + "fscholz", + "jiankian", + "big-dinner", + "18820486093", + "zhangchen", + "xiaojunjor", + "xgqfrms-GitHub", + "DearZui", + "ngtmuzi", + "SakuraNeko", + "teoli", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/flat": { + "modified": "2020-11-23T21:40:15.634Z", + "contributors": [ + "RolkerMan", + "zhuangyin", + "yadongxie150", + "0uzu0", + "youcanping", + "andycao", + "SageX", + "lovefengruoqing", + "RainSlide", + "hillterry", + "Kemper-Diao", + "dr2009", + "fscholz", + "fisker", + "Braised-Cakes" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/flatMap": { + "modified": "2020-11-30T01:43:38.078Z", + "contributors": [ + "zyq", + "BadmasterY", + "SageX", + "ZzqiZQute", + "a81965689", + "RainSlide", + "rxliuli", + "LiuYuan", + "Channely", + "zhixudong666", + "baylin87" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/forEach": { + "modified": "2020-10-15T21:07:41.999Z", + "contributors": [ + "inlym", + "RainSlide", + "SageX", + "yuwei", + "HermitSun", + "zhangchen", + "hhxxhg", + "fscholz", + "futurefeeling", + "LinLshare", + "gossling", + "bibi941", + "xgqfrms-GitHub", + "lssbq", + "voidzhou", + "kameii", + "Liyunsheng", + "TomIsion", + "helloguangxue", + "Ende93", + "Harvesty", + "AlexChao", + "ziyunfei", + "teoli", + "yanhaijing1234" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/from": { + "modified": "2020-10-15T21:27:52.328Z", + "contributors": [ + "cellinlab", + "RainSlide", + "WhiteMind", + "SageX", + "tc_dreamer", + "EmmaYXY", + "zppro", + "smallbag", + "fscholz", + "hongxu.Wei", + "banli17", + "ywjco", + "Jat", + "xgqfrms-GitHub", + "jessie-zly", + "spicyboiledfish", + "Ende93", + "kdex", + "micheal-death", + "xiaokk06", + "helloguangxue", + "jiraiya", + "LinusYu", + "ngtmuzi", + "yenshen", + "ziyunfei", + "tiansh" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/includes": { + "modified": "2020-10-15T21:30:09.625Z", + "contributors": [ + "FrankYuanhao", + "hjxtclm", + "zheng1013757145", + "vaynewang", + "RainSlide", + "Warden", + "NiroDu", + "fscholz", + "futurefeeling", + "hongxu.Wei", + "badfl", + "hua03", + "kdex", + "xgqfrms-GitHub", + "kameii", + "lizhongyi", + "Ende93", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/indexOf": { + "modified": "2020-10-15T21:26:12.959Z", + "contributors": [ + "SageX", + "Xmader", + "fscholz", + "futurefeeling", + "jiankian", + "big-dinner", + "xgqfrms-GitHub", + "lanezhao", + "keqingrong", + "Ende93", + "paddingme", + "AlexChao", + "ziyunfei", + "focus", + "teoli", + "eric.yuan" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/isArray": { + "modified": "2020-10-15T21:02:37.096Z", + "contributors": [ + "SageX", + "Frederick-S", + "fscholz", + "zhangsenhua", + "yenshen", + "xgqfrms-GitHub", + "ToWorkit", + "Dcfm", + "xiaokk06", + "Ende93", + "ziyunfei", + "teoli", + "paddingme" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/join": { + "modified": "2020-10-15T21:05:15.988Z", + "contributors": [ + "SageX", + "Heaan", + "zhangchen", + "fscholz", + "futurefeeling", + "xgqfrms-GitHub", + "badfl", + "helloguangxue", + "yenshen", + "saintwinkle", + "AlexChao", + "ziyunfei", + "teoli" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/keys": { + "modified": "2020-10-15T21:32:21.834Z", + "contributors": [ + "zhangchen", + "fscholz", + "futurefeeling", + "LemonGirl", + "micheal-death", + "xgqfrms-GitHub", + "ziyunfei", + "200OK" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": { + "modified": "2020-10-15T21:29:02.691Z", + "contributors": [ + "SageX", + "fscholz", + "futurefeeling", + "badfl", + "ywjco", + "AlexChao", + "teoli" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/length": { + "modified": "2020-10-15T21:21:14.308Z", + "contributors": [ + "binarization", + "fscholz", + "fisker", + "jeneser", + "shaodahong", + "The-End-Hero", + "yenshen", + "AlexChao", + "ziyunfei", + "teoli" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/map": { + "modified": "2020-10-15T21:07:20.691Z", + "contributors": [ + "fscholz", + "Zzc19970910", + "Slartbartfast1", + "Jayly", + "ooo1l", + "petrewoo", + "SageX", + "old2sun", + "BingerWeb", + "zhangchen", + "ssttii", + "fengkx", + "xgqfrms-GitHub", + "W4n9Hu1", + "hooozen", + "Ts799498164", + "zhuangyin", + "righttoe", + "notmaster", + "Ende93", + "niices", + "JinxiuLee", + "ziyunfei", + "helinjiang", + "Young-Wang", + "xiaomingming", + "AlexChao", + "teoli" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/of": { + "modified": "2020-10-15T21:17:21.107Z", + "contributors": [ + "chunfeng08", + "fscholz", + "mingttong", + "FunnyZ", + "micheal-death", + "enem", + "xgqfrms-GitHub", + "Ende93", + "yenshen", + "ziyunfei", + "teoli", + "Oatn" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/pop": { + "modified": "2020-10-15T21:21:08.570Z", + "contributors": [ + "fscholz", + "Spaghet-Ti", + "ndNovaDev", + "micheal-death", + "xgqfrms-GitHub", + "ysneo", + "AlexChao", + "ziyunfei", + "teoli" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/push": { + "modified": "2020-10-15T21:17:19.272Z", + "contributors": [ + "Huauauaa", + "L9m", + "fscholz", + "lizhonggang", + "Spikef", + "shery", + "micheal-death", + "xgqfrms-GitHub", + "Ende93", + "yenshen", + "AlexChao", + "ziyunfei", + "teoli", + "Oatn" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/reverse": { + "modified": "2020-10-15T21:17:25.177Z", + "contributors": [ + "jingchaocheng", + "SageX", + "huxinsen", + "ifredom", + "fscholz", + "futurefeeling", + "xgqfrms-GitHub", + "Ende93", + "AlexChao", + "ziyunfei", + "teoli", + "Oatn" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/shift": { + "modified": "2020-10-15T21:26:52.357Z", + "contributors": [ + "SageX", + "jinger7281", + "fscholz", + "badfl", + "LemonGirl", + "micheal-death", + "xgqfrms-GitHub", + "Ende93", + "pd4d10", + "teoli", + "AlexChao", + "ziyunfei", + "endlesswind" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/slice": { + "modified": "2020-11-30T04:00:58.912Z", + "contributors": [ + "shery", + "Zzt-G", + "RainSlide", + "Fire1nRain", + "Mrdapeng", + "MoYuLing", + "Jiang-Xuan", + "524119574", + "xgqfrms-GitHub", + "zhuangyin", + "yiyaxueyu", + "k644606347", + "lihx_hit", + "MechanicianW", + "FlowingRiver", + "GTyexing", + "Ende93", + "aximario", + "helloguangxue", + "AlexChao", + "ziyunfei", + "teoli" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/some": { + "modified": "2020-10-15T21:26:00.318Z", + "contributors": [ + "SageX", + "simonzhao", + "Zohar727", + "Kuroo", + "lzszone", + "gqbre", + "lmislm", + "KangKai-fe", + "zhangchen", + "xgqfrms-GitHub", + "AlexChao", + "ziyunfei", + "teoli", + "yanhaijing1234" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/sort": { + "modified": "2020-10-15T21:17:18.762Z", + "contributors": [ + "810307015", + "xgqfrms", + "zhangchen", + "kaojistream", + "fscholz", + "ywjco", + "Mr-Li-admin", + "NuclearBlast", + "righttoe", + "JackFeng", + "MeCKodo", + "micheal-death", + "Feel-Joy", + "houbx", + "xgqfrms-GitHub", + "ziyunfei", + "stonewen", + "wuzhenquan", + "helloguangxue", + "Ende93", + "helinjiang", + "dameinliu", + "XingxianLI", + "tiansh", + "teoli", + "Oatn" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/splice": { + "modified": "2020-10-15T21:28:59.144Z", + "contributors": [ + "ThornWu", + "ttxs69", + "DouglasRyan", + "oopsguy", + "RainSlide", + "ifredom", + "zhuangyin", + "SphinxKnight", + "VinciXie", + "daijie", + "yonoel", + "dpwwwq", + "shibomeng", + "fscholz", + "Jiang-Xuan", + "zhipeng001", + "lemonboy233", + "ywjco", + "badfl", + "hawtim", + "Lemon-jie", + "KMKNKK", + "frankfang1990", + "FlySnails", + "xgqfrms-GitHub", + "NNNaix", + "Lemon-c", + "HUxiaoAlinNG", + "Rising_sun", + "w-halo", + "FlowingRiver", + "me-code", + "Ende93", + "Qin", + "huyue" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/toLocaleString": { + "modified": "2020-10-15T21:29:06.488Z", + "contributors": [ + "fscholz", + "zhangchen", + "badfl", + "zxhycxq", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/toSource": { + "modified": "2020-10-15T21:21:06.880Z", + "contributors": [ + "fscholz", + "badfl", + "teoli", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/toString": { + "modified": "2020-10-15T21:29:03.089Z", + "contributors": [ + "zhangchen", + "fscholz", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/unshift": { + "modified": "2020-10-15T21:23:36.187Z", + "contributors": [ + "benngai123", + "No_risk_atpresent", + "jinger7281", + "heeronchang", + "RainSlide", + "L9m", + "zhangchen", + "fscholz", + "xgqfrms-GitHub", + "AlexChao", + "ziyunfei", + "teoli", + "xfeng" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/values": { + "modified": "2020-10-15T21:37:23.141Z", + "contributors": [ + "Agcaiyun", + "johnao", + "RainSlide", + "SageX", + "fscholz", + "ywjco", + "redoc", + "xgqfrms-GitHub", + "Ende93", + "AlexChao", + "KingMario" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { + "modified": "2020-10-15T21:27:45.114Z", + "contributors": [ + "woshiqiang1", + "wallena3", + "Jiang-Xuan", + "Terry.Qiao", + "xgqfrms-GitHub", + "kameii", + "liyongleihf2006", + "maicss", + "teoli", + "Jijie.Chen", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species": { + "modified": "2020-10-15T21:52:04.532Z", + "contributors": [ + "fscholz", + "Ende93" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength": { + "modified": "2020-10-15T21:37:49.462Z", + "contributors": [ + "fscholz", + "kameii", + "fred4444source" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView": { + "modified": "2020-10-15T21:37:49.247Z", + "contributors": [ + "Dyon", + "knightyun", + "fscholz", + "yunl819", + "fred4444source" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice": { + "modified": "2020-10-15T21:51:34.058Z", + "contributors": [ + "fscholz", + "kameii" + ] + }, + "Web/JavaScript/Reference/Global_Objects/AsyncFunction": { + "modified": "2020-10-15T21:50:47.192Z", + "contributors": [ + "Terry.Qiao", + "xgqfrms-GitHub", + "Ende93", + "_da" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics": { + "modified": "2020-10-15T21:47:39.816Z", + "contributors": [ + "xgqfrms", + "zhangchen", + "Terry.Qiao", + "LawrenceChenPro", + "JianrongYu", + "Ende93", + "Hearmen", + "weishuaikun", + "Spring_Winter_Wine" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics/add": { + "modified": "2020-10-15T21:52:07.041Z", + "contributors": [ + "fscholz", + "RoXoM", + "JianrongYu", + "Ende93" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics/and": { + "modified": "2020-10-15T21:52:05.452Z", + "contributors": [ + "fscholz", + "Ende93" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange": { + "modified": "2020-10-15T21:52:07.140Z", + "contributors": [ + "fscholz", + "Ende93" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics/exchange": { + "modified": "2020-10-15T21:52:04.443Z", + "contributors": [ + "fscholz", + "Ende93" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree": { + "modified": "2020-10-15T21:52:17.441Z", + "contributors": [ + "fscholz", + "eyfor", + "Mocuishle" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics/load": { + "modified": "2020-10-15T21:58:11.479Z", + "contributors": [ + "fscholz", + "Mukti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics/notify": { + "modified": "2020-10-15T22:21:48.950Z", + "contributors": [ + "lizhongzhen11", + "lifankohome" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics/or": { + "modified": "2020-10-15T22:21:50.539Z", + "contributors": [ + "lifankohome" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics/store": { + "modified": "2020-10-15T21:57:10.970Z", + "contributors": [ + "fscholz", + "zouyang1230", + "shenrongliu" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics/sub": { + "modified": "2020-10-15T22:24:45.287Z", + "contributors": [ + "BadmasterY" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics/wait": { + "modified": "2020-10-15T22:21:34.534Z", + "contributors": [ + "hanalice", + "Jinyingyi" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics/xor": { + "modified": "2020-10-15T22:24:45.064Z", + "contributors": [ + "BadmasterY" + ] + }, + "Web/JavaScript/Reference/Global_Objects/BigInt": { + "modified": "2020-10-15T22:12:07.852Z", + "contributors": [ + "YouHeng", + "BadmasterY", + "dstyxy", + "fefe982", + "ddztomcat", + "c412216887", + "lovue" + ] + }, + "Web/JavaScript/Reference/Global_Objects/BigInt/BigInt": { + "modified": "2020-10-15T22:25:55.480Z", + "contributors": [ + "wallena3" + ] + }, + "Web/JavaScript/Reference/Global_Objects/BigInt/asIntN": { + "modified": "2020-10-15T22:24:46.833Z", + "contributors": [ + "BadmasterY" + ] + }, + "Web/JavaScript/Reference/Global_Objects/BigInt/asUintN": { + "modified": "2020-10-15T22:24:47.578Z", + "contributors": [ + "BadmasterY" + ] + }, + "Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString": { + "modified": "2020-10-15T22:24:47.615Z", + "contributors": [ + "BadmasterY" + ] + }, + "Web/JavaScript/Reference/Global_Objects/BigInt/toString": { + "modified": "2020-10-15T22:24:48.189Z", + "contributors": [ + "BadmasterY" + ] + }, + "Web/JavaScript/Reference/Global_Objects/BigInt/valueOf": { + "modified": "2020-10-15T22:24:48.266Z", + "contributors": [ + "BadmasterY" + ] + }, + "Web/JavaScript/Reference/Global_Objects/BigInt64Array": { + "modified": "2020-10-15T22:17:01.806Z", + "contributors": [ + "vent", + "SDUTWSL" + ] + }, + "Web/JavaScript/Reference/Global_Objects/BigUint64Array": { + "modified": "2020-10-15T22:20:32.429Z", + "contributors": [ + "liruiqi" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Boolean": { + "modified": "2020-11-05T03:24:53.922Z", + "contributors": [ + "SphinxKnight", + "184289542", + "Yayure", + "snail-xx", + "zeyongTsai", + "Terry.Qiao", + "comyn", + "zhangchen", + "SmluVFpI", + "righttoe", + "Hugh", + "xgqfrms-GitHub", + "Folgore", + "emctoo", + "slientomorrr", + "yenshen", + "ziyunfei", + "teoli" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Boolean/toSource": { + "modified": "2020-10-15T21:51:59.093Z", + "contributors": [ + "fscholz", + "Grizzly-Eric" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Boolean/toString": { + "modified": "2020-10-15T21:28:54.689Z", + "contributors": [ + "fscholz", + "zhangchen", + "yenshen", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Boolean/valueOf": { + "modified": "2020-10-15T21:28:53.640Z", + "contributors": [ + "fscholz", + "zhangchen", + "yenshen", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView": { + "modified": "2020-10-15T21:34:38.297Z", + "contributors": [ + "wenshui2008", + "RainSlide", + "jason-grimm", + "Jiang-Xuan", + "Terry.Qiao", + "liyongleihf2006", + "Taoja", + "xiaokk06", + "Ende93", + "NIGHTEAGLE" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/buffer": { + "modified": "2020-10-15T21:52:04.673Z", + "contributors": [ + "fscholz", + "wizardforcel", + "holynewbie" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/byteLength": { + "modified": "2020-10-15T21:52:04.538Z", + "contributors": [ + "fscholz", + "wizardforcel", + "holynewbie" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/byteOffset": { + "modified": "2020-10-15T21:52:05.195Z", + "contributors": [ + "fscholz", + "wizardforcel", + "holynewbie" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/getBigInt64": { + "modified": "2020-10-15T22:21:33.559Z", + "contributors": [ + "fade-vivida", + "SilverTime" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/getBigUint64": { + "modified": "2020-10-15T22:22:15.035Z", + "contributors": [ + "jinger7281" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/getFloat32": { + "modified": "2020-10-15T21:49:48.544Z", + "contributors": [ + "wenshui2008", + "758915145", + "fscholz", + "Taoja" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/getFloat64": { + "modified": "2020-10-15T21:49:48.242Z", + "contributors": [ + "758915145", + "fscholz", + "Taoja" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/getInt16": { + "modified": "2020-10-15T21:49:47.595Z", + "contributors": [ + "knightyun", + "758915145", + "fscholz", + "Taoja" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/getInt32": { + "modified": "2020-10-15T21:49:48.330Z", + "contributors": [ + "758915145", + "fscholz", + "Taoja" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/getInt8": { + "modified": "2020-10-15T21:44:13.950Z", + "contributors": [ + "758915145", + "fscholz", + "Taoja" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/getUint16": { + "modified": "2020-10-15T21:49:47.729Z", + "contributors": [ + "758915145", + "fscholz", + "Taoja" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/getUint32": { + "modified": "2020-10-15T21:49:47.551Z", + "contributors": [ + "758915145", + "fscholz", + "Taoja" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/getUint8": { + "modified": "2020-10-15T21:44:16.655Z", + "contributors": [ + "758915145", + "fscholz", + "Taoja" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/setBigInt64": { + "modified": "2020-10-15T22:24:55.568Z", + "contributors": [ + "wenshui2008" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/setBigUint64": { + "modified": "2020-10-15T22:24:53.419Z", + "contributors": [ + "wenshui2008" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/setFloat32": { + "modified": "2020-10-15T21:49:50.076Z", + "contributors": [ + "fscholz", + "Taoja" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/setFloat64": { + "modified": "2020-10-15T21:49:50.505Z", + "contributors": [ + "farteryhr", + "fscholz", + "Taoja" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/setInt16": { + "modified": "2020-10-15T21:49:50.736Z", + "contributors": [ + "fscholz", + "Taoja" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/setInt32": { + "modified": "2020-10-15T21:49:50.027Z", + "contributors": [ + "fscholz", + "Taoja" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/setInt8": { + "modified": "2020-10-15T21:37:32.797Z", + "contributors": [ + "fscholz", + "Taoja", + "mzhejiayu" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/setUint16": { + "modified": "2020-10-15T21:49:49.541Z", + "contributors": [ + "fscholz", + "Taoja" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/setUint32": { + "modified": "2020-10-15T21:49:50.144Z", + "contributors": [ + "fscholz", + "Taoja" + ] + }, + "Web/JavaScript/Reference/Global_Objects/DataView/setUint8": { + "modified": "2020-10-15T21:49:48.203Z", + "contributors": [ + "fscholz", + "Taoja" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date": { + "modified": "2020-10-19T08:07:05.768Z", + "contributors": [ + "SphinxKnight", + "songzeng2016", + "ZhangXianWei", + "johnao", + "oujielong", + "striveyan", + "fefe982", + "Mr_z", + "litmonw", + "RainSlide", + "jackylz", + "fscholz", + "VAN666", + "liuzeyafzy", + "whinc", + "sharp-c", + "distums", + "helloguangxue", + "zhang384579631", + "yenshen", + "fuchao2012", + "hikarievo", + "teoli", + "littleVege", + "AlexChao", + "ziyunfei", + "liminjun", + "confusedwu", + "Mickeyboy", + "Mgjbot" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive": { + "modified": "2020-10-15T22:06:53.986Z", + "contributors": [ + "pea3nut" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/Date": { + "modified": "2020-10-15T22:28:18.123Z", + "contributors": [ + "lztom2046" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/UTC": { + "modified": "2020-10-15T21:28:25.934Z", + "contributors": [ + "tclzcja", + "fscholz", + "Hugh", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getDate": { + "modified": "2020-10-15T21:03:50.488Z", + "contributors": [ + "hsqin", + "fscholz", + "teoli", + "AlexChao", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getDay": { + "modified": "2020-10-15T21:03:58.429Z", + "contributors": [ + "HFatBird", + "fscholz", + "teoli", + "AlexChao", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": { + "modified": "2020-10-15T21:03:49.040Z", + "contributors": [ + "fscholz", + "zhangchen", + "xqin", + "teoli", + "AlexChao", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getHours": { + "modified": "2020-10-15T21:03:54.198Z", + "contributors": [ + "fscholz", + "teoli", + "AlexChao", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": { + "modified": "2020-10-15T21:03:36.395Z", + "contributors": [ + "fscholz", + "teoli", + "AlexChao", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": { + "modified": "2020-10-15T21:03:39.835Z", + "contributors": [ + "fscholz", + "teoli", + "AlexChao", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getMonth": { + "modified": "2020-10-15T21:03:43.325Z", + "contributors": [ + "fscholz", + "viko16", + "Ende93", + "teoli", + "AlexChao", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": { + "modified": "2020-10-15T21:03:45.760Z", + "contributors": [ + "fscholz", + "teoli", + "AlexChao", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getTime": { + "modified": "2020-10-15T21:28:11.731Z", + "contributors": [ + "YISHI", + "fscholz", + "Ende93", + "AlexChao", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset": { + "modified": "2020-10-15T21:28:12.331Z", + "contributors": [ + "daix6", + "fscholz", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCDate": { + "modified": "2020-10-15T21:33:57.569Z", + "contributors": [ + "fscholz", + "saintwinkle" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCDay": { + "modified": "2020-10-15T21:33:56.103Z", + "contributors": [ + "fscholz", + "saintwinkle" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear": { + "modified": "2020-10-15T21:33:57.710Z", + "contributors": [ + "fscholz", + "saintwinkle" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCHours": { + "modified": "2020-10-15T21:34:04.488Z", + "contributors": [ + "fscholz", + "saintwinkle" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds": { + "modified": "2020-10-15T21:34:05.550Z", + "contributors": [ + "fscholz", + "saintwinkle" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes": { + "modified": "2020-10-15T21:34:04.468Z", + "contributors": [ + "fscholz", + "saintwinkle" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth": { + "modified": "2020-10-15T21:34:04.629Z", + "contributors": [ + "fscholz", + "saintwinkle" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds": { + "modified": "2020-10-15T21:34:04.630Z", + "contributors": [ + "fscholz", + "saintwinkle" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getYear": { + "modified": "2020-10-15T21:28:12.583Z", + "contributors": [ + "fscholz", + "Edith_Ren", + "teoli", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/now": { + "modified": "2020-10-15T21:21:13.943Z", + "contributors": [ + "RainSlide", + "fscholz", + "Ende93", + "AlexChao", + "ziyunfei", + "teoli", + "StuPig" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/parse": { + "modified": "2020-10-15T21:28:30.337Z", "contributors": [ - "weibangtuo", - "kidonng", + "lyh2668", + "fscholz", + "Tao-Quixote", + "hkuclion", + "distums", + "gqqnbig", + "yeliex", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setDate": { + "modified": "2020-10-15T21:28:14.248Z", + "contributors": [ + "jinger7281", + "fscholz", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setFullYear": { + "modified": "2020-10-15T21:28:11.404Z", + "contributors": [ + "fscholz", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setHours": { + "modified": "2020-10-15T21:28:14.385Z", + "contributors": [ + "fscholz", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds": { + "modified": "2020-10-15T21:28:19.563Z", + "contributors": [ + "fscholz", + "htitme", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setMinutes": { + "modified": "2020-10-15T21:28:16.896Z", + "contributors": [ + "fscholz", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setMonth": { + "modified": "2020-10-15T21:28:14.760Z", + "contributors": [ + "ZZES_REN", + "fscholz", + "luyouxin84", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setSeconds": { + "modified": "2020-10-15T21:28:14.577Z", + "contributors": [ + "fscholz", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setTime": { + "modified": "2020-10-15T21:28:10.430Z", + "contributors": [ + "dylanyg", + "fscholz", + "ziyunfei", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCDate": { + "modified": "2020-10-15T21:34:46.724Z", + "contributors": [ + "fscholz", + "rubyisapm" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear": { + "modified": "2020-10-15T21:48:19.613Z", + "contributors": [ + "fscholz", + "zachary05" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCHours": { + "modified": "2020-10-15T21:53:04.641Z", + "contributors": [ + "fscholz", + "haijianyang" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds": { + "modified": "2020-10-15T21:55:54.800Z", + "contributors": [ + "fscholz", + "yys" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes": { + "modified": "2020-10-15T22:00:10.646Z", + "contributors": [ + "fscholz", + "LiuYuan" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth": { + "modified": "2020-10-15T21:51:40.559Z", + "contributors": [ + "fscholz", + "wizardforcel", + "Jabinzou" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds": { + "modified": "2020-10-15T21:49:40.074Z", + "contributors": [ + "fscholz", + "wizardforcel", + "petrelselina" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setYear": { + "modified": "2020-10-15T22:29:46.049Z", + "contributors": [ + "SDUTWSL" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toDateString": { + "modified": "2020-10-15T21:28:24.093Z", + "contributors": [ + "fscholz", + "teoli", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toGMTString": { + "modified": "2020-10-15T21:28:14.066Z", + "contributors": [ + "fscholz", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toISOString": { + "modified": "2020-10-15T21:28:16.900Z", + "contributors": [ + "fscholz", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toJSON": { + "modified": "2020-10-15T21:28:08.978Z", + "contributors": [ + "fscholz", + "KMKNKK", + "Cattla", + "helloguangxue", "yenshen", - "WayneCui", - "oopsguy", - "xgqfrms-GitHub" + "Yaty", + "AlexChao", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString": { + "modified": "2020-10-15T21:28:17.098Z", + "contributors": [ + "fscholz", + "teoli", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toLocaleString": { + "modified": "2020-10-15T21:28:25.398Z", + "contributors": [ + "fscholz", + "wangerniu", + "liyongleihf2006", + "teoli", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString": { + "modified": "2020-10-15T21:28:22.937Z", + "contributors": [ + "fscholz", + "teoli", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toSource": { + "modified": "2020-10-15T22:00:19.218Z", + "contributors": [ + "fscholz", + "haipeng.liang" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toString": { + "modified": "2020-10-15T21:28:13.694Z", + "contributors": [ + "yunxu1019", + "fscholz", + "yenshen", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toTimeString": { + "modified": "2020-10-15T21:28:22.895Z", + "contributors": [ + "fscholz", + "teoli", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toUTCString": { + "modified": "2020-10-15T21:28:16.518Z", + "contributors": [ + "fscholz", + "chesterchenn", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/valueOf": { + "modified": "2020-10-15T21:28:12.574Z", + "contributors": [ + "fscholz", + "Ende93", + "AlexChao", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error": { + "modified": "2020-10-15T21:21:49.758Z", + "contributors": [ + "GuYue", + "IreneByron", + "zhangchen", + "ZhishengZhao", + "xgqfrms-GitHub", + "ngtmuzi", + "calidion", + "teoli", + "yenshen", + "Maple-Jan", + "evilpie" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error/Stack": { + "modified": "2020-10-15T22:05:59.371Z", + "contributors": [ + "Zoeooo", + "gentlelynn" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error/columnNumber": { + "modified": "2019-04-02T14:34:45.679Z", + "contributors": [ + "teoli", + "buckarooch" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error/fileName": { + "modified": "2019-04-02T14:35:07.280Z", + "contributors": [ + "teoli", + "buckarooch" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error/lineNumber": { + "modified": "2020-10-15T22:00:20.126Z", + "contributors": [ + "WayneCui" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error/message": { + "modified": "2019-04-02T14:35:10.524Z", + "contributors": [ + "yenshen", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error/name": { + "modified": "2019-07-05T00:02:19.372Z", + "contributors": [ + "yenshen", + "teoli", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error/toSource": { + "modified": "2020-10-15T22:04:46.786Z", + "contributors": [ + "zxsunrise", + "yuchaoWu" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error/toString": { + "modified": "2019-04-02T14:43:23.068Z", + "contributors": [ + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/EvalError": { + "modified": "2020-10-15T21:15:06.730Z", + "contributors": [ + "Tao-Quixote", + "Debugger-D", + "buckarooch", + "slientomorrr", + "teoli", + "Mickeyboy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/FinalizationRegistry": { + "modified": "2020-10-15T22:33:55.419Z", + "contributors": [ + "LydiaYuan", + "xgqfrms" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Float32Array": { + "modified": "2019-03-23T22:55:04.546Z", + "contributors": [ + "lsvih", + "luojia", + "AlixWang" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Float64Array": { + "modified": "2019-03-23T22:27:51.833Z", + "contributors": [ + "lsvih" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function": { + "modified": "2020-10-15T21:07:16.185Z", + "contributors": [ + "johnao", + "RainSlide", + "Bjkb", + "xuyewen288", + "ywjco", + "Jiang-Xuan", + "xgqfrms-GitHub", + "Ende93", + "webery", + "FredWe", + "teoli", + "chbdetta", + "chyee", + "ziyunfei", + "iwo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/apply": { + "modified": "2020-10-15T21:21:35.017Z", + "contributors": [ + "leafwingstar", + "熊英明", + "zhanjunhao", + "wisecamle", + "zhangchen", + "Plortinus", + "MoYuLing", + "tangj1206", + "Humyang", + "Leivy", + "xgqfrms-GitHub", + "Ende93", + "JJPandari", + "hbkdsm", + "paddingme", + "onetree", + "AlexChao", + "ziyunfei", + "Nebu1aX", + "teoli", + "endlesswind" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/arguments": { + "modified": "2019-08-06T06:43:10.243Z", + "contributors": [ + "omz-one", + "ziyunfei", + "WangXiZhu", + "teoli", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/bind": { + "modified": "2020-10-15T21:07:21.219Z", + "contributors": [ + "xx1124961758", + "oxyg3n", + "lzfee0227", + "FeiJian984", + "TMM-eng", + "C2015", + "RainSlide", + "StuPig", + "williantian", + "hansnow", + "bananafishM", + "z1yuan", + "Arichy", + "Maiko", + "wisecamle", + "zhangchen", + "zjffun", + "AllanJian", + "kuleyu", + "LiXin", + "baidufe.hc", + "yuwanlin", + "yangyh1911", + "gwiron", + "lclscofield", + "xgqfrms-GitHub", + "zhengkai2001", + "Katherina-Miao", + "jyjsjd", + "Jiavan", + "riversYeHaha", + "xie-qianyue", + "sensui7", + "Ende93", + "manfredHu", + "cqzhao", + "prawn", + "iplus26", + "teoli", + "paddingme", + "TooBug", + "SDLyu", + "bin", + "ziyunfei", + "stylechen" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/call": { + "modified": "2020-10-15T21:07:14.576Z", + "contributors": [ + "Blackie", + "dcyu007", + "zzykillu", + "RainSlide", + "Maiko", + "Sally-he", + "whidy", + "Jiang-Xuan", + "fanerge", + "voidzhou", + "xgqfrms-GitHub", + "micheal-death", + "windluo", + "azhi09", + "ChemiCoder", + "Ende93", + "teoli", + "AlexChao", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/caller": { + "modified": "2019-08-06T03:21:58.429Z", + "contributors": [ + "teoli", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/displayName": { + "modified": "2019-05-15T23:11:48.055Z", + "contributors": [ + "liuchuzhang", + "lilng", + "teoli", + "minstrel1977", + "webery" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/length": { + "modified": "2020-10-15T21:02:07.304Z", + "contributors": [ + "zhangchen", + "gqbre", + "chudu", + "Ende93", + "guosimin", + "yenshen", + "teoli", + "ziyunfei", + "tiansh" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/name": { + "modified": "2020-10-15T21:02:08.194Z", + "contributors": [ + "zhangchen", + "inickel", + "minstrel1977", + "xgqfrms-GitHub", + "Marco_dev", + "teoli", + "ziyunfei" ] }, - "Web/HTTP/Link_prefetching_FAQ": { - "modified": "2019-10-09T13:08:42.395Z", + "Web/JavaScript/Reference/Global_Objects/Function/toSource": { + "modified": "2019-03-23T23:36:01.366Z", "contributors": [ - "Yayure", - "vivaxy", - "iamyy", - "xgqfrms-GitHub" + "teoli", + "ziyunfei" ] }, - "Web/HTTP/Messages": { - "modified": "2020-04-19T05:44:17.609Z", + "Web/JavaScript/Reference/Global_Objects/Function/toString": { + "modified": "2020-10-15T21:21:30.188Z", "contributors": [ - "liangmuyang", - "HardcorePhysician", - "keifergu", + "zhangchen", + "Maiko", + "xmoyKing", + "laampui", + "AlexChao", "ziyunfei", - "gbcwbz", - "JsonLi" + "teoli" ] }, - "Web/HTTP/Methods": { - "modified": "2020-10-15T21:49:13.002Z", + "Web/JavaScript/Reference/Global_Objects/Generator": { + "modified": "2020-10-15T21:34:46.129Z", "contributors": [ - "yzb161114", - "zhuangyin", + "Ende93", + "xgqfrms", + "xuxiaokang", + "kdex", "xgqfrms-GitHub", - "fscholz", - "cissoid" + "Yelmor", + "lanezhao", + "panhezeng", + "ziyunfei", + "Javascipt", + "lukywong", + "jpmedley" ] }, - "Web/HTTP/Methods/CONNECT": { - "modified": "2020-10-15T21:55:02.299Z", + "Web/JavaScript/Reference/Global_Objects/Generator/next": { + "modified": "2019-08-17T06:59:14.528Z", "contributors": [ - "champkeh", - "WayneCui" + "Yayure", + "miyoosan", + "ywjco", + "Ende93", + "lukywong", + "jcouyang" ] }, - "Web/HTTP/Methods/DELETE": { - "modified": "2020-10-15T21:54:31.457Z", + "Web/JavaScript/Reference/Global_Objects/Generator/return": { + "modified": "2020-10-15T21:37:31.281Z", "contributors": [ - "fnjoe", - "yzweb2018", - "horsefaced", + "SevenDreamYang", "Ende93", - "WayneCui", - "xgqfrms-GitHub" + "ljxy", + "lukywong" ] }, - "Web/HTTP/Methods/GET": { - "modified": "2020-10-15T21:49:15.328Z", + "Web/JavaScript/Reference/Global_Objects/Generator/throw": { + "modified": "2019-08-12T05:52:42.406Z", "contributors": [ - "joy-yu", "Ende93", + "lukywong" + ] + }, + "Web/JavaScript/Reference/Global_Objects/GeneratorFunction": { + "modified": "2020-10-15T21:39:23.129Z", + "contributors": [ "fscholz", - "cissoid" + "zhangchen", + "lanezhao", + "webery", + "Cendy" ] }, - "Web/HTTP/Methods/HEAD": { - "modified": "2020-10-15T21:49:15.693Z", + "Web/JavaScript/Reference/Global_Objects/Infinity": { + "modified": "2020-10-19T00:56:56.707Z", + "contributors": [ + "DarkWing", + "lizhongzhen11", + "wallena3", + "Jiang-Xuan", + "yenshen", + "tiansh", + "SphinxKnight", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Int16Array": { + "modified": "2019-03-23T22:35:54.313Z", + "contributors": [ + "kdex", + "zilong-thu" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Int32Array": { + "modified": "2019-06-02T03:31:50.287Z", + "contributors": [ + "wuqinqiang", + "xclhs", + "langjun" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Int8Array": { + "modified": "2019-03-18T20:48:04.246Z", + "contributors": [ + "xgqfrms-GitHub", + "ObooChin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/InternalError": { + "modified": "2019-03-23T22:32:14.689Z", + "contributors": [ + "teoli", + "maicss", + "Jack-Q" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl": { + "modified": "2020-10-15T21:41:37.430Z", + "contributors": [ + "RainSlide", + "zhangchen", + "teabyii" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl/Collator": { + "modified": "2020-10-15T21:52:01.061Z", "contributors": [ - "liveabean", - "iugo", "fscholz", - "horsefaced", - "cissoid" + "hiyangguo" ] }, - "Web/HTTP/Methods/OPTIONS": { - "modified": "2020-10-15T21:53:13.191Z", + "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": { + "modified": "2020-04-21T09:01:11.408Z", "contributors": [ - "safarishi", - "yuankunzhang" + "fscholz", + "TianchiLi", + "zxsunrise", + "liyongleihf2006" ] }, - "Web/HTTP/Methods/PATCH": { - "modified": "2019-03-23T22:11:06.658Z", + "Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames": { + "modified": "2020-04-21T09:19:23.285Z", + "contributors": [ + "fscholz", + "hulucode" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl/ListFormat": { + "modified": "2020-10-15T22:16:21.221Z", + "contributors": [ + "fscholz", + "Spengh" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl/Locale": { + "modified": "2020-10-15T22:19:16.260Z", + "contributors": [ + "weibangtuo", + "fscholz", + "shuvidora", + "lovedebug" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": { + "modified": "2020-10-15T21:50:51.219Z", + "contributors": [ + "fscholz", + "RoXoM", + "Sivan", + "lisniuse", + "liyongleihf2006" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format": { + "modified": "2020-10-15T22:04:10.022Z", + "contributors": [ + "fscholz", + "zxsunrise", + "Evansy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl/PluralRules": { + "modified": "2020-10-15T22:05:26.837Z", + "contributors": [ + "fscholz", + "JimmyBenKlieve", + "DeanNode" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat": { + "modified": "2020-10-15T22:21:27.890Z", + "contributors": [ + "SandBoat", + "Mongkii", + "fscholz", + "AchooLuv", + "xrr2016", + "SphinxKnight", + "qiufeihong2018" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales": { + "modified": "2020-10-15T22:09:15.623Z", + "contributors": [ + "pea3nut" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON": { + "modified": "2020-10-15T21:06:55.773Z", "contributors": [ + "recursion", + "renfufei", + "codevvvv9", + "zhangchen", + "luojia", + "righttoe", + "xgqfrms-GitHub", + "Freed", + "huguangju", + "liyongleihf2006", "Ende93", - "WayneCui" + "yenshen", + "teoli", + "Yaty", + "fscholz", + "AlexChao", + "Wladimir_Palant", + "ziyunfei" ] }, - "Web/HTTP/Methods/POST": { - "modified": "2020-10-15T21:49:12.507Z", + "Web/JavaScript/Reference/Global_Objects/JSON/parse": { + "modified": "2020-10-15T21:28:05.508Z", "contributors": [ - "weapon-x", - "cracdic", - "wangtongchao", + "hikigaya58", + "RainSlide", + "renfufei", + "zhuangyin", "mySoul", - "shellphon", - "fscholz", - "cissoid" + "rambo-panda", + "zhaoqize", + "DejectedBird", + "ZDeborah", + "xgqfrms-GitHub", + "zhoupenghui", + "frankfang1990", + "LiYang982", + "sszsfan", + "xgqfrms", + "TomIsion", + "qiao4", + "Ende93", + "yenshen", + "Yaty", + "ziyunfei", + "AlexChao" ] }, - "Web/HTTP/Methods/PUT": { - "modified": "2020-10-15T21:54:38.885Z", + "Web/JavaScript/Reference/Global_Objects/JSON/stringify": { + "modified": "2020-10-27T03:21:45.041Z", "contributors": [ - "lnh", - "maicss", - "WayneCui" + "anan824", + "JaCoder", + "zhangchen", + "Ocean-ZH", + "huxinsen", + "fwmh", + "szengtal", + "superfighter", + "zhaoqize", + "Demo_Hu", + "xgqfrms-GitHub", + "xiuzhihuan", + "leouncle", + "zhoupenghui", + "LiYang982", + "zachary05", + "ziyunfei", + "byr-gdp", + "paddingme", + "AlexChao", + "teoli", + "Lovesueee" ] }, - "Web/HTTP/Methods/TRACE": { - "modified": "2020-10-15T22:06:09.943Z", + "Web/JavaScript/Reference/Global_Objects/Map": { + "modified": "2020-10-15T21:06:49.701Z", "contributors": [ - "chenaptx", - "fs523577192", - "ppphp" + "laampui", + "wallena3", + "KaySama", + "Turner", + "YaoZeyuan", + "Mr_Big", + "maoyumaoxun", + "hong007", + "zhangchen", + "Amio", + "tsejx", + "thegatheringstorm", + "buckarooch", + "xgqfrms-GitHub", + "kameii", + "Cattla", + "huguangju", + "YangyuhaoBit", + "luneice", + "git123hub", + "Ende93", + "sqqihao", + "fskuok", + "teoli", + "ziyunfei", + "zhangyaochun1987" ] }, - "Web/HTTP/Overview": { - "modified": "2020-11-10T09:12:40.960Z", + "Web/JavaScript/Reference/Global_Objects/Map/@@iterator": { + "modified": "2020-10-15T21:56:27.573Z", "contributors": [ - "pocketdr", - "bkuke", - "hehe1111", - "Umryuan", - "yuyuanqiu", - "psaren", - "wakaoniganma", - "BobGreen", - "hiyoushu", - "LuoYun", - "RayJune", - "Akiq2016", - "zihengCat", - "usernameisMan", "Ende93", - "w11th", - "joezheng", - "MagicLee" + "DuLinRain" ] }, - "Web/HTTP/Protocol_upgrade_mechanism": { - "modified": "2020-11-12T12:36:28.458Z", + "Web/JavaScript/Reference/Global_Objects/Map/@@species": { + "modified": "2020-10-15T21:57:35.566Z", "contributors": [ - "yan647", - "Xiaosha61", - "mayunmeiyouming", - "nientsu", - "raunyuyuan", - "wc5858" + "vanishcode" ] }, - "Web/HTTP/Proxy_servers_and_tunneling": { - "modified": "2020-08-19T02:44:17.258Z", + "Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag": { + "modified": "2019-04-05T14:04:42.613Z", "contributors": [ - "SunnyWind", - "0229xiang", - "teoli" + "DuLinRain" ] }, - "Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file": { - "modified": "2020-10-30T02:28:12.093Z", + "Web/JavaScript/Reference/Global_Objects/Map/Map": { + "modified": "2020-10-15T22:29:02.199Z", + "contributors": [ + "laampui" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/clear": { + "modified": "2020-10-15T21:41:32.043Z", + "contributors": [ + "zhangchen", + "SphinxKnight", + "HsuanLee", + "youth7" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/delete": { + "modified": "2020-10-15T21:46:05.144Z", + "contributors": [ + "zhangchen", + "royl8", + "Hushabyme", + "webery" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/entries": { + "modified": "2020-10-15T21:39:28.129Z", + "contributors": [ + "Louis-7", + "SphinxKnight", + "ngtmuzi", + "HsuanLee", + "Zhiyu_Wang" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/forEach": { + "modified": "2020-10-15T21:39:26.824Z", + "contributors": [ + "Mr_kaze", + "niices", + "liu7654", + "SimonYang", + "SphinxKnight", + "ziyunfei", + "Zhiyu_Wang" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/get": { + "modified": "2020-10-15T21:39:27.794Z", "contributors": [ - "StudentMain", - "Nishikinor", - "DuckSoft", - "Futrime", - "hryen", "RainSlide", - "maber", - "cnryb", - "archerc", - "msy" + "SphinxKnight", + "ziyunfei", + "Zhiyu_Wang" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/has": { + "modified": "2019-10-04T10:03:31.075Z", + "contributors": [ + "Cyberhan123", + "SphinxKnight", + "DirtyPP" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/keys": { + "modified": "2020-10-15T21:48:38.432Z", + "contributors": [ + "Davidyanlong", + "RainSlide", + "zachary05" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/set": { + "modified": "2020-10-15T21:48:37.587Z", + "contributors": [ + "CascEco", + "ts0307", + "RainSlide", + "MaZheng", + "Hushabyme", + "zachary05" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/size": { + "modified": "2019-09-06T04:35:48.843Z", + "contributors": [ + "boyue", + "wenshin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/values": { + "modified": "2019-10-04T09:57:38.527Z", + "contributors": [ + "killsos", + "mingzhaov" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math": { + "modified": "2020-10-15T21:21:09.889Z", + "contributors": [ + "RainSlide", + "Zhenger", + "tzmf", + "levinweb", + "xzmshiji", + "LiXin", + "xgqfrms-GitHub", + "Ende93", + "lwxyfer", + "FredWe", + "yenshen", + "baiya", + "AlexChao", + "teoli", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/E": { + "modified": "2019-03-23T23:12:59.627Z", + "contributors": [ + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/LN10": { + "modified": "2019-03-23T22:26:33.778Z", + "contributors": [ + "AlexChao" ] }, - "Web/HTTP/Public_Key_Pinning": { - "modified": "2020-10-15T22:15:40.587Z", + "Web/JavaScript/Reference/Global_Objects/Math/LN2": { + "modified": "2019-03-23T23:12:59.485Z", "contributors": [ - "Yayure" + "AlexChao" ] }, - "Web/HTTP/Range_requests": { - "modified": "2019-03-23T22:10:18.914Z", + "Web/JavaScript/Reference/Global_Objects/Math/LOG10E": { + "modified": "2019-03-23T23:12:57.229Z", "contributors": [ - "huangtt", - "heyv5", - "warmilk", - "asurin", - "WayneCui" + "AlexChao" ] }, - "Web/HTTP/Redirections": { - "modified": "2020-06-22T12:27:42.624Z", + "Web/JavaScript/Reference/Global_Objects/Math/LOG2E": { + "modified": "2019-03-23T23:12:57.389Z", "contributors": [ - "RoXoM", - "BobGreen", - "shevacjs", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/PI": { + "modified": "2019-10-10T16:56:22.011Z", + "contributors": [ + "helloguangxue", "yenshen", - "WayneCui", - "ziyunfei", - "mushang11", - "zhi.lin", - "ZhongyiChen" + "AlexChao" ] }, - "Web/HTTP/Resources_and_URIs": { - "modified": "2019-09-05T00:27:21.660Z", + "Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2": { + "modified": "2019-03-23T23:12:56.404Z", "contributors": [ - "ran" + "AlexChao" ] }, - "Web/HTTP/Resources_and_specifications": { - "modified": "2019-03-23T22:14:32.179Z", + "Web/JavaScript/Reference/Global_Objects/Math/SQRT2": { + "modified": "2019-03-23T23:34:50.958Z", "contributors": [ - "ppphp", - "shevacjs", - "yuankunzhang" + "AlexChao", + "teoli", + "ziyunfei" ] }, - "Web/HTTP/Server-Side_Access_Control": { - "modified": "2019-03-23T23:14:41.414Z", + "Web/JavaScript/Reference/Global_Objects/Math/abs": { + "modified": "2019-04-05T14:44:14.817Z", "contributors": [ - "GerryLon", - "xgqfrms-GitHub", - "holynewbie", - "jearylee" + "FlowingRiver", + "tiansh", + "AlexChao", + "teoli", + "ndon" ] }, - "Web/HTTP/Session": { - "modified": "2019-08-30T04:49:50.525Z", + "Web/JavaScript/Reference/Global_Objects/Math/acos": { + "modified": "2019-04-05T14:44:29.427Z", "contributors": [ - "HardcorePhysician", - "2585479524", - "zihengCat", - "zhuangyin", - "keifergu", - "cissoid" + "AlexChao" ] }, - "Web/HTTP/Status": { - "modified": "2020-10-15T21:47:25.564Z", + "Web/JavaScript/Reference/Global_Objects/Math/asin": { + "modified": "2019-08-17T06:23:48.692Z", "contributors": [ - "kendalbaba8", - "sideshowbarker", - "lesikolerina23", - "bifan", - "zhongjunyao", - "cznno", - "skylinebin", - "Opportunity", - "sluggishpj", - "Riverside", - "NowTime", - "konantian", - "PWAEZQS", - "corele", - "x1zbin", - "Zeng", - "teaist", - "zhuangyin", - "change-hdb", - "Geniusning", - "fscholz", - "fuchao2012" + "AlexChao" ] }, - "Web/HTTP/Status/100": { - "modified": "2020-10-15T21:49:13.185Z", + "Web/JavaScript/Reference/Global_Objects/Math/asinh": { + "modified": "2020-10-15T22:29:13.098Z", "contributors": [ - "fscholz", - "cissoid" + "vampire624" ] }, - "Web/HTTP/Status/101": { - "modified": "2020-07-28T20:14:16.827Z", + "Web/JavaScript/Reference/Global_Objects/Math/atan": { + "modified": "2019-03-23T23:12:33.623Z", "contributors": [ - "rockhamx", - "xiazhe", - "WayneCui" + "AlexChao" ] }, - "Web/HTTP/Status/103": { - "modified": "2020-10-15T22:20:13.143Z", + "Web/JavaScript/Reference/Global_Objects/Math/atan2": { + "modified": "2019-10-29T04:38:29.778Z", "contributors": [ - "TsingJyujing" + "412799755", + "AlexChao" ] }, - "Web/HTTP/Status/200": { - "modified": "2020-10-15T21:52:50.809Z", + "Web/JavaScript/Reference/Global_Objects/Math/atanh": { + "modified": "2019-03-23T22:30:24.385Z", "contributors": [ - "Yang_Hanlin", - "Limbo1223", - "yenshen", - "doterlin", - "mojiajuzi" + "timqian92" ] }, - "Web/HTTP/Status/201": { - "modified": "2020-10-15T21:54:40.492Z", + "Web/JavaScript/Reference/Global_Objects/Math/cbrt": { + "modified": "2019-11-08T10:40:00.500Z", "contributors": [ - "Dante_Zzzz", - "WayneCui" + "hellorayza", + "hhxxhg", + "SphinxKnight", + "wangyukai04", + "teoli", + "ziyunfei" ] }, - "Web/HTTP/Status/202": { - "modified": "2019-03-23T22:10:36.745Z", + "Web/JavaScript/Reference/Global_Objects/Math/ceil": { + "modified": "2020-10-15T21:28:51.015Z", "contributors": [ - "WayneCui" + "RainSlide", + "xgqfrms-GitHub", + "AlexChao" ] }, - "Web/HTTP/Status/203": { - "modified": "2019-03-23T22:10:30.257Z", + "Web/JavaScript/Reference/Global_Objects/Math/clz32": { + "modified": "2020-10-15T21:26:57.620Z", "contributors": [ - "WayneCui" + "Lucilor", + "SphinxKnight", + "teoli", + "ziyunfei" ] }, - "Web/HTTP/Status/204": { - "modified": "2020-10-15T21:51:39.388Z", + "Web/JavaScript/Reference/Global_Objects/Math/cos": { + "modified": "2019-03-23T23:12:55.982Z", "contributors": [ - "xgqfrms", - "WayneCui", - "fscholz", - "abc950309" + "AlexChao" ] }, - "Web/HTTP/Status/205": { - "modified": "2019-03-23T22:10:24.312Z", + "Web/JavaScript/Reference/Global_Objects/Math/cosh": { + "modified": "2019-03-23T22:45:35.592Z", "contributors": [ - "WayneCui" + "SphinxKnight", + "yenshen" ] }, - "Web/HTTP/Status/206": { - "modified": "2020-10-15T21:54:17.456Z", + "Web/JavaScript/Reference/Global_Objects/Math/exp": { + "modified": "2019-04-05T14:46:00.450Z", "contributors": [ - "WayneCui", - "xgqfrms-GitHub" + "AlexChao" ] }, - "Web/HTTP/Status/300": { - "modified": "2019-03-23T22:10:32.313Z", + "Web/JavaScript/Reference/Global_Objects/Math/expm1": { + "modified": "2019-03-23T23:24:29.516Z", "contributors": [ - "WayneCui" + "SphinxKnight", + "teoli", + "ziyunfei" ] }, - "Web/HTTP/Status/301": { - "modified": "2020-10-15T21:53:56.245Z", + "Web/JavaScript/Reference/Global_Objects/Math/floor": { + "modified": "2020-12-01T02:48:28.851Z", "contributors": [ - "WayneCui", - "dyllen", - "ujsxn" + "OmniP", + "wangyukai04", + "xgqfrms-GitHub", + "AlexChao" ] }, - "Web/HTTP/Status/302": { - "modified": "2020-10-15T21:52:41.868Z", + "Web/JavaScript/Reference/Global_Objects/Math/fround": { + "modified": "2019-04-05T14:46:26.026Z", "contributors": [ - "juzhiyuan", - "WayneCui", + "SphinxKnight", + "zxsunrise", "ziyunfei", - "ujsxn", - "07akioni" + "teoli" ] }, - "Web/HTTP/Status/303": { - "modified": "2020-10-15T21:53:57.078Z", + "Web/JavaScript/Reference/Global_Objects/Math/hypot": { + "modified": "2020-10-15T21:25:13.114Z", "contributors": [ - "ADTC", - "WayneCui", - "ujsxn" + "Dorence", + "hellorayza", + "plutonji", + "SphinxKnight", + "tiansh", + "teoli", + "ziyunfei" ] }, - "Web/HTTP/Status/304": { - "modified": "2020-10-15T21:53:56.017Z", + "Web/JavaScript/Reference/Global_Objects/Math/imul": { + "modified": "2020-01-20T10:35:52.662Z", "contributors": [ - "MinimalistYing", - "piaoyuliang", - "maicss", - "ujsxn" + "徐鹏跃", + "SphinxKnight", + "teoli", + "ziyunfei" ] }, - "Web/HTTP/Status/307": { - "modified": "2020-10-15T21:53:56.226Z", + "Web/JavaScript/Reference/Global_Objects/Math/log": { + "modified": "2019-03-23T23:34:08.078Z", "contributors": [ - "RainSlide", - "qwertyuiop6", - "WayneCui", - "ujsxn" + "kyriejoshua", + "teoli", + "AlexChao", + "ziyunfei" ] }, - "Web/HTTP/Status/308": { - "modified": "2020-10-15T21:53:56.251Z", + "Web/JavaScript/Reference/Global_Objects/Math/log10": { + "modified": "2019-03-23T23:24:22.200Z", "contributors": [ - "迷子碳", - "WayneCui", - "ujsxn" + "SphinxKnight", + "teoli", + "ziyunfei" ] }, - "Web/HTTP/Status/400": { - "modified": "2019-03-23T22:14:37.056Z", + "Web/JavaScript/Reference/Global_Objects/Math/log1p": { + "modified": "2019-03-23T23:24:22.369Z", "contributors": [ - "WayneCui", - "zsirfs" + "SphinxKnight", + "teoli", + "ziyunfei" ] }, - "Web/HTTP/Status/401": { - "modified": "2020-10-15T21:55:04.907Z", + "Web/JavaScript/Reference/Global_Objects/Math/log2": { + "modified": "2019-03-27T00:02:26.543Z", "contributors": [ - "WayneCui" + "SphinxKnight", + "teoli", + "ziyunfei" ] }, - "Web/HTTP/Status/402": { - "modified": "2020-10-15T22:21:27.856Z", + "Web/JavaScript/Reference/Global_Objects/Math/max": { + "modified": "2020-10-15T21:28:51.161Z", "contributors": [ - "SphinxKnight", - "Craster", - "AlphaGir", - "youngseaz" + "zhangchen", + "zzykillu", + "littleRice", + "FlowingRiver", + "Gohikin", + "helloguangxue", + "tiansh", + "AlexChao" ] }, - "Web/HTTP/Status/403": { - "modified": "2020-10-15T21:55:04.765Z", + "Web/JavaScript/Reference/Global_Objects/Math/min": { + "modified": "2019-10-10T16:47:54.897Z", "contributors": [ - "bobo.debila", - "iSakuraNyan", - "WayneCui" + "FlowingRiver", + "Ende93", + "AlexChao" ] }, - "Web/HTTP/Status/404": { - "modified": "2020-10-15T21:55:04.823Z", + "Web/JavaScript/Reference/Global_Objects/Math/pow": { + "modified": "2020-10-15T21:28:50.816Z", "contributors": [ - "bobo.debila", - "yenshen", - "WayneCui" + "zhangchen", + "bestlbw", + "AlexChao" ] }, - "Web/HTTP/Status/405": { - "modified": "2020-09-29T09:31:27.183Z", + "Web/JavaScript/Reference/Global_Objects/Math/random": { + "modified": "2020-12-10T04:26:38.936Z", "contributors": [ - "wonerlilo", - "sideshowbarker", - "lesikolerina23", - "nicholascw", - "yuankunzhang" + "caozhihui24", + "Ende93", + "Jing1107", + "Soyaine", + "wutiande", + "hhxxhg", + "meng-Macbook", + "ywjco", + "ZZES_REN", + "Daniel_Liu", + "xgqfrms-GitHub", + "AlexChao", + "teoli", + "ndon" ] }, - "Web/HTTP/Status/406": { - "modified": "2020-10-15T21:54:36.544Z", + "Web/JavaScript/Reference/Global_Objects/Math/round": { + "modified": "2019-09-15T15:07:27.927Z", "contributors": [ - "WayneCui" + "shelter9824", + "zxsunrise", + "pazingaa", + "xgqfrms-GitHub", + "teoli", + "ziyunfei", + "AlexChao", + "princetoad@gmail.com" ] }, - "Web/HTTP/Status/407": { - "modified": "2020-10-15T21:55:05.803Z", + "Web/JavaScript/Reference/Global_Objects/Math/sign": { + "modified": "2019-08-31T06:02:13.833Z", "contributors": [ - "WayneCui" + "xgqfrms-GitHub", + "tiansh", + "teoli", + "ziyunfei" ] }, - "Web/HTTP/Status/408": { - "modified": "2019-03-23T22:10:32.195Z", + "Web/JavaScript/Reference/Global_Objects/Math/sin": { + "modified": "2020-11-11T08:27:43.469Z", "contributors": [ - "Juanni", - "WayneCui" + "luisleee", + "AlexChao" ] }, - "Web/HTTP/Status/409": { - "modified": "2019-03-23T22:10:22.894Z", + "Web/JavaScript/Reference/Global_Objects/Math/sinh": { + "modified": "2020-08-20T08:15:43.793Z", "contributors": [ - "liaozhaonan", - "WayneCui" + "635153226", + "SphinxKnight", + "teoli", + "ziyunfei" ] }, - "Web/HTTP/Status/410": { - "modified": "2020-10-15T21:53:57.979Z", + "Web/JavaScript/Reference/Global_Objects/Math/sqrt": { + "modified": "2020-10-15T21:28:52.595Z", "contributors": [ - "yyz940922", - "ujsxn" + "zhangchen", + "AlexChao" ] }, - "Web/HTTP/Status/411": { - "modified": "2019-03-23T22:10:31.298Z", + "Web/JavaScript/Reference/Global_Objects/Math/tan": { + "modified": "2019-08-31T06:01:37.228Z", "contributors": [ - "WayneCui" + "AlexChao" ] }, - "Web/HTTP/Status/412": { - "modified": "2020-10-15T21:53:03.480Z", + "Web/JavaScript/Reference/Global_Objects/Math/tanh": { + "modified": "2020-10-15T21:49:09.190Z", "contributors": [ - "RainSlide", - "WayneCui", - "xgqfrms-GitHub", - "LangDonHJJ" + "Dorence", + "Yunme", + "Gohikin", + "lsvih" ] }, - "Web/HTTP/Status/413": { - "modified": "2019-03-23T22:10:34.207Z", + "Web/JavaScript/Reference/Global_Objects/Math/trunc": { + "modified": "2020-10-15T21:25:16.193Z", "contributors": [ - "liaozhaonan", - "WayneCui" + "zxsunrise", + "Ende93", + "ziyunfei", + "tiansh", + "teoli" ] }, - "Web/HTTP/Status/414": { - "modified": "2019-03-23T22:10:20.896Z", + "Web/JavaScript/Reference/Global_Objects/NaN": { + "modified": "2020-10-15T21:21:08.233Z", "contributors": [ - "liaozhaonan", - "jokechat", - "WayneCui" + "wallena3", + "HuangXin", + "caofei6", + "zxsunrise", + "EthanOrange", + "Jiang-Xuan", + "Ende93", + "yenshen", + "SphinxKnight", + "ziyunfei", + "AlexChao", + "teoli", + "zhangyaochun1987" ] }, - "Web/HTTP/Status/415": { - "modified": "2019-03-23T22:10:21.961Z", + "Web/JavaScript/Reference/Global_Objects/Number": { + "modified": "2020-10-15T21:21:06.513Z", "contributors": [ - "WayneCui" + "SageX", + "Mookiepiece", + "huxinsen", + "hhxxhg", + "shevche24", + "re09", + "righttoe", + "yurielZhang", + "liudeyuan", + "liuzeyafzy", + "Ende93", + "teoli", + "xuxiaodong", + "ethertank" ] }, - "Web/HTTP/Status/416": { - "modified": "2020-10-15T21:54:41.290Z", + "Web/JavaScript/Reference/Global_Objects/Number/EPSILON": { + "modified": "2019-10-14T12:34:30.960Z", "contributors": [ - "liaozhaonan", - "WayneCui" + "SageX", + "Fire1nRain", + "Liugq5713", + "AlexChao", + "jokeviner" ] }, - "Web/HTTP/Status/417": { - "modified": "2019-03-23T22:11:26.822Z", + "Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER": { + "modified": "2019-11-10T23:49:14.665Z", "contributors": [ - "WayneCui" + "zotille", + "AlexChao", + "jokeviner" ] }, - "Web/HTTP/Status/418": { - "modified": "2020-10-15T22:03:59.306Z", + "Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE": { + "modified": "2019-03-18T20:54:24.017Z", "contributors": [ - "iSakuraNyan", - "dzamlo", - "ujsxn", - "youngseaz" + "dsgygb", + "AlexChao" ] }, - "Web/HTTP/Status/422": { - "modified": "2019-10-08T22:59:23.853Z", + "Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER": { + "modified": "2020-10-15T21:48:36.767Z", "contributors": [ - "fuxingZhang", "SphinxKnight", - "uniforest", - "ihgazni2" + "User670", + "suxiesumiao" ] }, - "Web/HTTP/Status/425": { - "modified": "2020-10-15T22:09:53.408Z", + "Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE": { + "modified": "2019-03-23T23:13:08.431Z", "contributors": [ - "liaozhaonan", - "ibard" + "AlexChao" ] }, - "Web/HTTP/Status/426": { - "modified": "2019-03-23T22:10:22.184Z", + "Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY": { + "modified": "2019-03-23T23:13:05.395Z", + "contributors": [ + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/NaN": { + "modified": "2019-04-06T03:20:31.087Z", "contributors": [ - "WayneCui" + "AlexChao", + "teoli", + "zhangyaochun1987" ] }, - "Web/HTTP/Status/428": { - "modified": "2019-03-23T22:11:11.819Z", + "Web/JavaScript/Reference/Global_Objects/Number/Number": { + "modified": "2020-10-15T22:32:37.356Z", "contributors": [ - "WayneCui" + "爬上神坛的猫" ] }, - "Web/HTTP/Status/429": { - "modified": "2019-03-23T22:11:18.935Z", + "Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY": { + "modified": "2019-03-23T23:12:58.979Z", "contributors": [ - "WayneCui" + "helinjiang", + "AlexChao" ] }, - "Web/HTTP/Status/431": { - "modified": "2019-03-23T22:10:21.832Z", + "Web/JavaScript/Reference/Global_Objects/Number/isFinite": { + "modified": "2020-10-15T21:24:17.461Z", "contributors": [ - "WayneCui" + "zhangchen", + "AlexChao", + "teoli", + "ziyunfei", + "zhangyaochun1987" ] }, - "Web/HTTP/Status/451": { - "modified": "2020-10-15T21:55:07.508Z", + "Web/JavaScript/Reference/Global_Objects/Number/isInteger": { + "modified": "2020-10-15T21:24:18.300Z", "contributors": [ - "WayneCui" + "yanhaijing1234", + "daihaoxin", + "oldmtn", + "Ende93", + "teoli", + "ziyunfei", + "tiansh", + "zhangyaochun1987" ] }, - "Web/HTTP/Status/500": { - "modified": "2020-10-15T21:55:08.324Z", + "Web/JavaScript/Reference/Global_Objects/Number/isNaN": { + "modified": "2020-10-15T21:19:55.509Z", "contributors": [ - "danmurch77", - "sideshowbarker", - "lesikolerina23", - "davywsr", - "slivenred", "RainSlide", - "WayneCui", - "ziyunfei", - "aosan002" + "polunzh", + "daihaoxin", + "xgqfrms-GitHub", + "AlexChao", + "yenshen", + "teoli", + "yufeng", + "ziyunfei" ] }, - "Web/HTTP/Status/501": { - "modified": "2020-10-15T21:52:25.911Z", + "Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger": { + "modified": "2020-10-15T21:27:54.542Z", "contributors": [ - "WayneCui", - "fscholz", - "hxl" + "yanhaijing1234", + "hellorayza", + "AlexChao", + "ziyunfei" ] }, - "Web/HTTP/Status/502": { - "modified": "2020-10-15T21:55:11.141Z", + "Web/JavaScript/Reference/Global_Objects/Number/parseFloat": { + "modified": "2019-11-08T10:17:37.826Z", "contributors": [ - "davywsr", - "iSakuraNyan", - "slivenred", - "wangtongchao", - "WayneCui" + "hellorayza", + "Youzi", + "SphinxKnight", + "AlexChao", + "saintwinkle" ] }, - "Web/HTTP/Status/503": { - "modified": "2020-10-15T21:55:07.373Z", + "Web/JavaScript/Reference/Global_Objects/Number/parseInt": { + "modified": "2020-10-15T21:32:59.587Z", "contributors": [ - "davywsr", - "slivenred", - "WayneCui" + "hellorayza", + "SageX", + "edward870505", + "NiLinli", + "iugo", + "ziyunfei", + "tiansh" ] }, - "Web/HTTP/Status/504": { - "modified": "2020-10-15T21:55:08.765Z", + "Web/JavaScript/Reference/Global_Objects/Number/toExponential": { + "modified": "2019-04-06T03:30:46.772Z", "contributors": [ - "davywsr", - "slivenred", - "WayneCui" + "zhazhjie", + "yunl819", + "helloguangxue", + "AlexChao" ] }, - "Web/HTTP/Status/505": { - "modified": "2019-03-23T22:10:20.789Z", + "Web/JavaScript/Reference/Global_Objects/Number/toFixed": { + "modified": "2020-10-15T21:28:32.902Z", "contributors": [ - "WayneCui" + "zeroxie", + "liuruiqi1993", + "Xiaoming666", + "rulanfenghua", + "PageYe", + "yenshen", + "Jinjiang", + "AlexChao" ] }, - "Web/HTTP/Status/506": { - "modified": "2020-01-19T03:41:58.311Z", + "Web/JavaScript/Reference/Global_Objects/Number/toLocaleString": { + "modified": "2020-10-15T21:28:46.243Z", "contributors": [ - "radarfyh" + "RoXoM", + "dongchaoge", + "Sivan", + "Hugh", + "anchengjian", + "shuding", + "AlexChao" ] }, - "Web/HTTP/Status/507": { - "modified": "2020-01-19T03:58:16.574Z", + "Web/JavaScript/Reference/Global_Objects/Number/toPrecision": { + "modified": "2019-09-09T23:08:23.767Z", "contributors": [ - "radarfyh" + "helloguangxue", + "AlexChao" ] }, - "Web/HTTP/Status/508": { - "modified": "2020-01-19T04:02:35.671Z", + "Web/JavaScript/Reference/Global_Objects/Number/toSource": { + "modified": "2019-04-06T03:53:43.075Z", "contributors": [ - "radarfyh" + "AlexChao" ] }, - "Web/HTTP/Status/510": { - "modified": "2020-01-19T04:08:53.633Z", + "Web/JavaScript/Reference/Global_Objects/Number/toString": { + "modified": "2019-07-09T06:38:38.264Z", "contributors": [ - "radarfyh" + "LeoSpark", + "ywjco", + "xgqfrms-GitHub", + "righttoe", + "YoungChen", + "yenshen", + "AlexChao", + "teoli", + "ziyunfei" ] }, - "Web/HTTP/Status/511": { - "modified": "2019-03-23T22:10:19.671Z", + "Web/JavaScript/Reference/Global_Objects/Number/valueOf": { + "modified": "2019-04-06T04:03:18.487Z", "contributors": [ - "WayneCui" + "weiqinl", + "ziyunfei", + "yenshen", + "AlexChao" ] }, - "Web/HTTP/X-Frame-Options": { - "modified": "2020-10-15T21:31:36.643Z", + "Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2020-10-15T21:07:58.316Z", "contributors": [ + "VictoriaChou", + "oldguan", + "oxyg3n", + "sunshine8752", + "yzh196", + "CelestialPhineas", "RainSlide", - "Soyaine", - "Fiag" + "zhangchen", + "lee-joe", + "xgqfrms-GitHub", + "kangaoxiaoshi", + "Hugh", + "tomoat", + "hxlhxl", + "Ende93", + "scscms", + "charlie", + "ziyunfei", + "paddingme", + "AlexChao", + "teoli", + "iwo" ] }, - "Web/HTTP/data_URIs": { - "modified": "2020-10-15T21:06:54.948Z", + "Web/JavaScript/Reference/Global_Objects/Object/GetPrototypeOf": { + "modified": "2020-10-15T21:07:55.199Z", "contributors": [ - "leegent", - "2585479524", - "BobGreen", - "bramblex", - "tlos142857", - "Ende93", + "futurefeeling", + "ywjco", + "zhangchen", "xgqfrms-GitHub", - "little-tomorrow", + "teoli", + "AlexChao", + "paddingme", "ziyunfei" ] }, - "Web/HTTP/策略特征": { - "modified": "2020-10-15T22:13:12.541Z", + "Web/JavaScript/Reference/Global_Objects/Object/Object": { + "modified": "2020-10-15T22:29:02.706Z", "contributors": [ - "xiaomaokeke", - "chenqingyue", - "RainSlide", - "joechan" + "jiyiwohanxing" ] }, - "Web/HTTP/策略特征/Using_Feature_Policy": { - "modified": "2019-05-06T05:13:36.251Z", + "Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__": { + "modified": "2019-03-23T23:05:45.020Z", "contributors": [ - "roostinghawk" + "ziyunfei", + "LinusYu" ] }, - "Web/HTTP/跨域资源共享(CORS)_": { - "modified": "2020-10-15T22:28:24.198Z", + "Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__": { + "modified": "2019-03-23T23:05:56.544Z", "contributors": [ - "huangjihua" + "ziyunfei", + "LinusYu" ] }, - "Web/Houdini": { - "modified": "2020-11-21T05:08:58.458Z", + "Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__": { + "modified": "2019-03-23T23:14:35.158Z", "contributors": [ - "xusy", - "bingoYB", - "cutefcc", - "sunfeel", - "xgqfrms" + "MurphyL", + "ziyunfei", + "lutaoact" ] }, - "Web/JavaScript": { - "modified": "2020-09-21T00:46:20.876Z", + "Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__": { + "modified": "2019-03-23T22:21:56.129Z", "contributors": [ - "mkckr0", - "sengang", - "SeaAster", - "liunanchenFYJJ", - "SphinxKnight", - "iworkerweb", - "lifankohome", - "huhufufu", - "marslord", - "leo_yang", - "zhao_nanli", - "limingqian", - "xunyegege", - "price", - "konantian", - "xclhs", - "qazsweet", - "Frederick-S", - "fenyu", - "ZengYu", - "toyflivver", - "yonbo", - "ThomasWhyne", - "pluwen", - "loveagri", - "edwards1101", - "ngtmuzi", - "wemamawe", - "danmin25", - "ghb609840612", - "zxsunrise", - "wangwenhao", - "WinnerNew", - "yokiyang", - "XuQuan-nikkkki", - "Jonham", - "ElliottZheng", - "towerman1990", - "qdlaoyao", - "yong_a", - "sqchenxiyuan", - "ZhangQiRong", - "lixw1994", - "qyjs", - "zhangchen", - "baooab", - "Mr-Li-admin", - "shaodahong", - "marsoln", - "Cnmahj", - "lemonsWen", - "lppking", - "viko16", - "leafdog", - "Ende93", - "VdoG", - "xiaokk06", - "xgqfrms", - "Rusion-Wayne", - "xiaoyusilen", - "Moressette", - "simongfxu", - "eforegist", - "nperhb", - "wth", - "WentaoMa", - "Roland_Reed", - "leonine", - "stdupp", - "lunix01", - "sammuelyee", - "MMOnster", - "redman9", - "wangsai", - "flyingdew", - "Yaty", - "yenshen", - "apollo", - "azzndmy", - "yiding_he", - "Brainor", - "ReyCG_sub", - "teoli", - "7anshuai", - "xcffl", - "ziyunfei", - "Asvel", - "sonzero@163.com", - "xiaoxiong", - "iwo", - "lins05" + "winjeysong", + "lisniuse" ] }, - "Web/JavaScript/A_re-introduction_to_JavaScript": { - "modified": "2020-12-11T11:33:32.340Z", + "Web/JavaScript/Reference/Global_Objects/Object/assign": { + "modified": "2020-10-21T06:50:11.039Z", "contributors": [ - "柳涤尘", + "srq18211", + "xgqfrms", + "sjnho", "SphinxKnight", - "BruceHong666", - "koo4", - "hechenxi", - "hufeicom", - "eMUQI", - "houfengqaz", - "licia-tia", - "necokeine", - "Pro-A", - "TianLangStudio", - "Frederick-S", - "123Jonne", - "fenglui", - "RainSlide", - "zhaoke2018", - "coldfog", - "edenpan", - "kanaza", - "LeoB-O", - "panle666", - "SAM.L", - "YRFT", - "Park-ma", - "LuoYun", - "mysmlz", - "OldisNewXrf", - "Jiasm", - "HoldDie", - "byoungd", - "TheLostXianXian", - "RockJerffreason", - "JayceZhang9602", - "funnyChinese", - "liubiantao", - "suxiesumiao", - "Jack-Q", - "w-halo", - "marsoln", - "Poisonloc", - "ngtmuzi", - "pramper", - "wangbin2015", + "YF05105814", + "zac_ma", + "shery", + "shutong", + "HJava", + "Jiang-Xuan", + "zhangchen", + "xgqfrms-GitHub", + "micheal-death", + "kiyonlin", + "Wayme", + "glgjssy", "Ende93", - "machao", - "Tienyz", - "susutou", - "xlyimi", + "Y____C", + "zhangking", + "calmcarry", + "iamchenxin", "ziyunfei", - "arniu", - "Breezewish", - "ticketock", - "teoli", - "xuxun", - "Joe_Zhao", - "xcffl", - "ethertank", - "Mgjbot", - "Physacco", - "Carrie zhxj", - "Laser" + "rebornix" ] }, - "Web/JavaScript/About_JavaScript": { - "modified": "2020-03-12T19:36:16.731Z", + "Web/JavaScript/Reference/Global_Objects/Object/constructor": { + "modified": "2020-10-15T21:22:02.873Z", "contributors": [ - "Poisonloc", - "ziyunfei", - "Breezewish", - "gelin", + "Lan1967", + "zhangchen", + "icyzeroice", + "luoxzhg", + "Hugh", "teoli", - "Meteormatt", - "ethertank", - "undercooled" + "AlexChao", + "ziyunfei" ] }, - "Web/JavaScript/Closures": { - "modified": "2020-10-14T01:19:42.853Z", + "Web/JavaScript/Reference/Global_Objects/Object/create": { + "modified": "2020-11-17T22:40:03.747Z", "contributors": [ - "Neo42", - "sunan112", - "xuqian", - "xvusrmqj", - "Lazy_Bone", - "mkckr0", - "fish-inu", - "Nonym", - "kingsley2036", - "watsonhaw", - "LuoYun", - "maoyumaoxun", - "HongjinLI", - "dreampasssser", - "foshhh", - "Akiq2016", - "szengtal", - "zhang-hongwei", - "helloli", - "xgqfrms-GitHub", - "ziyunfei", "zhuangyin", - "springfish", - "ZZES_REN", - "righttoe", - "hiyoushu", - "KngZhi", - "eeeeeeeason", - "HeSijie", - "calidion", - "mr.code", - "lihx_hit", - "_da", - "xgqfrms", - "wth", - "Jack-Q", - "distums", - "Poisonloc", - "mysticzap", - "vino24", - "putdownTheCode", - "yang.rc", - "maybe", - "fskuok", - "devyps", - "Breezewish", - "phoenix.huang", - "kangkai92", + "kaiyuan-c", + "yukyao", + "Aster.", + "symant233", + "zhanghao-zhoushan", + "Ahhaha233", + "name-dingding", + "Lan1967", + "wangzherlf", + "LuckyJoker", + "zhangchen", + "evan_Yuanzh", + "luoxzhg", + "ywjco", + "cuji", + "Tuoe", + "foreverwang", + "HuazzTsai", + "Cribug8080", + "Ende93", + "xgqfrms-GitHub", + "runighcat", + "ouonet", + "Hopcraft", + "luojia", + "AlexChao", "teoli", - "hui314", - "rogersuen" + "ziyunfei", + "Chajn", + "georgewing", + "nightire", + "bingjie2680", + "fscholz", + "raymoth", + "Mgjbot", + "Kaixin110", + "Cnmahj", + "Mhoudg", + "Andyyard", + "Carrie zhxj", + "Mickeyboy", + "Verruckt", + "Taken", + "Ahong" ] }, - "Web/JavaScript/Data_structures": { - "modified": "2020-06-05T03:23:50.915Z", + "Web/JavaScript/Reference/Global_Objects/Object/defineProperties": { + "modified": "2020-12-13T23:47:19.929Z", "contributors": [ - "zangbianxuegu", - "wallena3", - "Logan-Li", - "xuanji", - "huxinsen", - "molee1905", - "WangLeto", - "wemamawe", - "ywjco", - "ShirleyM", - "wblovezqy", - "eyasliu", - "issliu", - "hangyangws", - "Musan", - "Ende93", - "eric183", - "Jacobwang", - "knightf", - "JsonMe", - "asdzxcqwe", - "holsety", - "Breezewish", - "ElsaHuang", - "7anshuai", + "YawnS0", + "zhangchen", + "xgqfrms-GitHub", + "microTT", + "ziyunfei", + "AlexChao", "teoli", - "keechi", - "polucy", - "_WhiteCusp" + "OoOoOoOo", + "leeli" ] }, - "Web/JavaScript/Enumerability_and_ownership_of_properties": { - "modified": "2020-08-31T07:44:40.404Z", + "Web/JavaScript/Reference/Global_Objects/Object/defineProperty": { + "modified": "2020-12-03T03:27:16.867Z", "contributors": [ - "unbyte", + "daniel_tsai", + "liushuaimaya", + "symant233", + "lijinwenhg", "RainSlide", + "sunw", + "mingzhang6", + "liuliuLiu161", + "walwimp", "leavesster", - "Ende93", - "walfud", - "funroller", - "monjer", - "Gaohaoyang", - "xiefei89", - "Jack-Q", + "onedaywen", + "junyuli1992", + "Xmader", + "zhanghy7", + "Josnk", + "lmislm", + "weidapao", + "CaptainInPHW", + "zotille", + "LeoSpark", + "i850", + "Mrdapeng", + "yuyongjun123", + "buptsky", + "ywjco", + "Wutang", + "Black-Hole", + "zhangchen", + "xiiiAtCn", + "C_Kite", + "MrITzhongzi", + "usernameisMan", + "zilong", "ziyunfei", - "yenshen" - ] - }, - "Web/JavaScript/Equality_comparisons_and_sameness": { - "modified": "2020-10-17T07:01:49.622Z", - "contributors": [ - "jaredhan418", - "zjffun", - "RenzHoly", - "gongzhibin", - "xiayao", - "esphas", - "dy21335", - "Charlotte007", - "fun3c", + "dttx123", + "win5do", "Ende93", + "righttoe", + "hicrow", "xgqfrms-GitHub", - "vincenting", - "Roland_Reed", - "Jack-Q", - "ngtmuzi", - "i-PeterZhang", - "xufeng", - "ziyunfei", - "fskuok", - "tiansh", - "faceach", - "ilia" + "maxmeng", + "whwei", + "xuemengfei", + "riversYeHaha", + "harttle", + "coolguy", + "KingMario", + "helinjiang", + "Lenville", + "teoli", + "TimothyZhang", + "AlexChao", + "aaron4512", + "jiraiya", + "yanhaijing", + "StuPig", + "OoOoOoOo" ] }, - "Web/JavaScript/EventLoop": { - "modified": "2020-08-12T23:49:07.122Z", + "Web/JavaScript/Reference/Global_Objects/Object/entries": { + "modified": "2020-10-15T21:47:29.698Z", "contributors": [ - "JobbyM", - "johnao", - "penglianglee", - "molee1905", - "sundi78634", - "xgl", - "SterileSummer", - "esphas", - "daxiazilong", + "symant233", + "versionlin7", "zhangchen", - "Thoxvi", - "zhuangyin", - "LeoSpark", - "mozhs", + "spiritree", "xgqfrms-GitHub", - "LiXin", - "xycd", - "hxyoo1990", - "guoqiang", - "fengma", - "Ende93", - "xiaojichao", - "liyongleihf2006", - "slayerxj", - "timwangdev", - "distums", - "xufeng", - "ziyunfei", - "jcouyang", - "shinv", - "lcxfs1991", - "HectorGuo", - "Fantasy_shao" + "OshotOkill" ] }, - "Web/JavaScript/Getting_Started": { - "modified": "2019-03-23T23:35:23.323Z", + "Web/JavaScript/Reference/Global_Objects/Object/freeze": { + "modified": "2020-10-15T21:04:51.609Z", "contributors": [ - "xCss", - "KMethod", - "lifeng", - "maslak", - "Eridanus_Sora", - "ywang1724", - "reygreen1", + "Frederick-S", + "lejsure", + "mingttong", + "zhangchen", + "ywjco", + "sqliang", + "zhouyuanhao", + "Ende93", + "AlexChao", "teoli", - "Lyper", - "Simontechwriter" + "ziyunfei", + "undercooled" ] }, - "Web/JavaScript/Guide": { - "modified": "2020-04-10T23:43:33.112Z", + "Web/JavaScript/Reference/Global_Objects/Object/fromEntries": { + "modified": "2020-10-15T22:09:07.388Z", "contributors": [ - "lyno", - "RainSlide", - "Soy", - "Wenfang_Du", - "mumu-one", - "xuziang111", - "miffy24", - "shannonZhong", - "bowen-wu", - "Pomelo1213", - "Jamamm", - "xiaozhi1", - "bibi941", - "zhumengyua", - "XINHE", - "frankfang1990", "zhangchen", - "santong", - "Grizzly-Eric", - "WavinFlag", - "Moressette", - "nperhb", - "yenshen", - "ngtmuzi", - "taccelerate", - "456wyc", - "lunix01", - "kacoro", - "ssbunny", - "wsxyeah", - "teoli", - "ziyunfei", - "rogersuen" + "qiudongwei", + "iugo", + "xiaopingzhang0207", + "kohai", + "Bayes" ] }, - "Web/JavaScript/Guide/About": { - "modified": "2019-03-23T23:36:14.591Z", + "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor": { + "modified": "2020-10-15T21:04:53.010Z", "contributors": [ - "wbamberg", - "Breezewish", - "ReyCG_sub", - "ReyCG", + "Damoness", + "274659281", + "RoXoM", + "liuyangjoker", + "usernameisMan", + "Ende93", "teoli", - "LieGroup", - "rogersuen" + "AlexChao", + "ArthasTree", + "ziyunfei", + "nightire" ] }, - "Web/JavaScript/Guide/Control_flow_and_error_handling": { - "modified": "2020-03-12T19:37:58.561Z", + "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors": { + "modified": "2020-10-15T21:47:29.156Z", "contributors": [ - "ChenZhuoSteve", - "xclhs", - "fanqw", - "zhangchen", - "Hitomichan", - "sqchenxiyuan", - "123456zzz", - "zsxeee", - "xgqfrms-GitHub", - "cdz", - "lwxyfer", - "hpcherry", - "funnyChinese", - "ticketock", - "anbang", - "xdsnet", - "codetaro", - "think3t", - "Moressette", - "eforegist", - "boredivan", - "kavon", - "victor0801x", - "eating_miao", - "tangolivesky", - "zouyonghao", - "GodEngine", - "binhex", - "lushunming", - "MurphyL", - "zhaozhb", - "DeepDarkSpirit", - "kictpov", - "wenxiangmao", - "gabrielwu", - "tao0923", - "wolfFN", - "wangxb", - "ziyunfei", - "tonypupp", - "Shimo", - "teoli" + "Aaron-Bird", + "RoXoM", + "kdex", + "Hushabyme", + "delkaka", + "ziyunfei" ] }, - "Web/JavaScript/Guide/Details_of_the_Object_Model": { - "modified": "2020-07-21T04:10:47.398Z", + "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames": { + "modified": "2020-10-15T21:04:50.666Z", "contributors": [ - "suvyme", - "johnao", - "tzmf", - "zjffun", - "wbamberg", - "AlphaGo88", - "ThomasWhyne", - "yokiyang", + "woyaohaohaoxuexi", + "ywjco", "zhangchen", - "MiRinZhang", + "C_Kite", + "kdex", "Ende93", - "michelia", - "ywang1724", - "ReyCG", + "RandyOu", + "ChrisCindy", + "helinjiang", "teoli", - "key", + "AlexChao", "ziyunfei", - "zsytssk", - "rogersuen" + "Arenwisdom" ] }, - "Web/JavaScript/Guide/Expressions_and_Operators": { - "modified": "2020-12-12T02:19:33.855Z", + "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols": { + "modified": "2020-10-15T21:28:24.757Z", "contributors": [ - "柳涤尘", - "aq1121", - "Ende93", - "bifan", - "ZhQb", - "maoyumaoxun", - "LuoYun", - "yuansuye", - "syhxczy", "zhangchen", - "bozh", - "lociver", - "vividlai", - "vincenting", - "choury", - "wenmin92", - "_da", - "zhaoge26", - "chenpeiguang", - "codetaro", - "Gohikin", - "sgr", - "bigzhao", - "imDemo", - "klutzCoder", - "cinside", - "chuanyidai", - "eddy8", - "kavon", - "victor0801x", - "ngtmuzi", - "xoyoz", - "RachelChen", - "zenzzy", - "wumouse", - "Toweave", - "wenxiangmao", - "mpchina", - "z_p_p", - "997404959", - "Frantic1048", - "teoli", - "LieGroup", - "sevens", - "john_li", - "carl_zhu", + "limichange", + "AlexChao", "ziyunfei" ] }, - "Web/JavaScript/Guide/Functions": { - "modified": "2020-09-16T04:44:03.700Z", + "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": { + "modified": "2020-11-12T05:23:35.945Z", "contributors": [ - "springwq", - "johnao", - "YooHoeh", - "narutojian", - "chrisdavidmills", - "yulongjing", - "white-more", - "Jzhuonan", - "vainl", - "putongxiaozhu", - "yuansuye", - "Phoenix13", - "SphinxKnight", - "NotDead-NotPerish", + "haichao0817", + "Harry-Zhao", + "RainSlide", + "liuzhengdong", + "ShirleyM", + "xgqfrms-GitHub", + "Ende93", + "ziyunfei", + "yyj" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/is": { + "modified": "2020-10-15T21:22:02.169Z", + "contributors": [ + "jaredhan418", + "Mirefire", + "ngulee", + "RainSlide", + "42", "zhangchen", - "ian.zhang", + "shaojingchao", "xgqfrms-GitHub", - "wenmin92", - "codetaro", - "appie963", - "caicaicai", - "Darkoe", - "victor0801x", - "helloguangxue", - "tangolivesky", - "wumouse", "Ende93", - "SamuraiMe", - "duckisaac", "ziyunfei", - "Cjavaer", - "snowsolf", - "lvjs", - "smartkid", + "snandy", "teoli", - "sunorry", - "iwo" + "zhangyaochun1987" ] }, - "Web/JavaScript/Guide/Grammar_and_types": { - "modified": "2020-10-01T04:36:59.031Z", + "Web/JavaScript/Reference/Global_Objects/Object/isExtensible": { + "modified": "2019-03-24T12:06:06.825Z", "contributors": [ - "dva2019ksy", - "junhaoim", - "SirnoChan", - "Meow-z", - "catlair", - "WoodCube", - "lorry0508", - "ronesam", - "inlym", - "AlphaGo88", - "strandjun", - "hgbj0001", - "vainl", - "goodqd", - "yuansuye", - "zxsunrise", - "hiyoushu", - "zhumengyua", - "runyul", - "shelleyIstar", - "superkuang", - "BlasphemerAzog", - "Timer", - "tjyas", + "fanerge", + "helinjiang", + "AlexChao", + "teoli", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": { + "modified": "2020-10-15T21:04:51.362Z", + "contributors": [ + "XiongAmao", + "zhangchen", + "xgqfrms-GitHub", + "micheal-death", + "WangXiao", + "helinjiang", + "AlexChao", + "teoli", + "ziyunfei", + "undercooled" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf": { + "modified": "2019-07-25T07:55:33.320Z", + "contributors": [ + "xhlsrj", "xgqfrms-GitHub", - "zxsky1", - "cdz", - "Taisetsuz", - "Arthur.CHANG", - "Seattle", - "faremax", - "fengma", - "xdsnet", - "codetaro", - "VdoG", - "tylerxue", "Ende93", - "zurl", - "Moressette", - "dsb123dsb", - "kangkai0124", - "koalaxiaot", - "eforegist", - "GoForWill", - "m4jing", - "gknpezgssb", - "evolighting", - "TruthBean", - "kavon", - "victor0801x", - "PoppinL", - "louwuxin", - "xioZquan", - "zhaozhb", - "zouyonghao", - "ziyunfei", - "amIurs", - "gabrielwu", - "kacoro", - "tiansh", - "ReyCG_sub", + "helloguangxue", "teoli", - "LieGroup", - "evantre", - "iwo" + "AlexChao", + "ziyunfei" ] }, - "Web/JavaScript/Guide/Indexed_collections": { - "modified": "2020-06-29T06:11:51.519Z", + "Web/JavaScript/Reference/Global_Objects/Object/isSealed": { + "modified": "2020-10-15T21:04:48.021Z", "contributors": [ - "MaZheng", - "amzrk2", - "keys", - "ruoxianbaby", - "aimishan", - "BUnnY25", - "LeoSpark", - "hpcherry", - "niccoming", - "xdsnet", - "kiyonlin", - "codetaro", - "caoruiy", - "suxiesumiao", - "victor0801x", - "zhulinpinyu", - "456wyc", - "gaigeshen", - "VincentLiu0314" + "yuyeqianxun", + "zhangchen", + "xgqfrms-GitHub", + "Ende93", + "helinjiang", + "AlexChao", + "teoli", + "ziyunfei", + "undercooled" ] }, - "Web/JavaScript/Guide/Introduction": { - "modified": "2020-07-30T09:11:33.207Z", + "Web/JavaScript/Reference/Global_Objects/Object/keys": { + "modified": "2020-10-15T21:06:49.993Z", "contributors": [ - "Kirin", - "RainSlide", - "agulleung", - "inlym", - "daxiazilong", - "a358003542", - "ElliottZheng", - "runyul", - "123456zzz", - "wushengde", + "fbfatboy", + "Cuixote", + "liuzhengdong", + "SphinxKnight", + "Vike50", "zhuangyin", - "lsbrucelincoln", - "seaHeater", - "_da", - "xdsnet", - "VdoG", - "xiaoyusilen", - "eforegist", - "Mosan", - "Joilence", - "LeoMobileDeveloper", - "m4jing", - "dunizb", - "solome", - "zhanglei1995", - "zhe13", - "Rambone", + "dc165015", + "zhangchen", + "ywjco", + "xgqfrms-GitHub", "Ende93", - "majunbao", - "MurphyL", - "zouyonghao", - "zhengshi", - "fissh", - "pixiu", - "ssbunny", - "PhenixGhost", - "MrH2S", - "HopeCoder", + "Lynn0108", + "kdex", + "micheal-death", + "zaxlct", + "WhiteMind", + "qdxt", + "teoli", + "AlexChao", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/preventExtensions": { + "modified": "2020-10-15T21:04:47.741Z", + "contributors": [ + "Astroleander", + "zhangchen", + "recursion", + "AlexChao", + "teoli", "ziyunfei", - "hackerZhang" + "undercooled" ] }, - "Web/JavaScript/Guide/Iterators_and_Generators": { - "modified": "2020-04-19T03:41:05.778Z", + "Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable": { + "modified": "2020-10-15T21:21:12.490Z", "contributors": [ - "Russell", - "johnao", - "NieLamu", - "SageX", - "Yayure", - "ErChuan", "RainSlide", - "jupiterben", - "xgqfrms", - "Wuqichao", - "BingerWeb", - "yueshuiniao", - "zhangjiawei0", "zhangchen", - "azoth1991", - "ezirmusitua", + "TiaossuP", + "helloguangxue", + "Gresic", + "teoli", + "AlexChao", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/proto": { + "modified": "2020-10-15T21:20:42.886Z", + "contributors": [ + "milyyy", + "Ende93", + "rjdangcc", + "HIKALU-Z", + "Btista", + "trotyl", + "wolyshaw", "xgqfrms-GitHub", - "DarwinniwraD", - "kiyonlin", + "eeeeeeeason", "Howard.Chen", - "ianfung1998", - "liadbiz", - "snandy", + "Wayme", + "lisniuse", + "redcool007", + "Leslie2014", + "teoli", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/seal": { + "modified": "2020-10-15T21:04:46.777Z", + "contributors": [ + "1997Liusheng", + "acejerry", + "zhangchen", + "cwwjie", + "toBeTheLight", + "zixiangTang", + "AlexChao", "teoli", "ziyunfei", - "AriesDevil", - "Joyce" + "monthev" ] }, - "Web/JavaScript/Guide/JavaScript_Overview": { - "modified": "2019-03-23T23:36:14.828Z", + "Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf": { + "modified": "2020-10-15T21:23:41.066Z", "contributors": [ - "MrMario", - "ReyCG_sub", + "zhuguibiao", + "fengma", + "xgqfrms-GitHub", + "kameii", + "inJs", + "xuzhijun", + "helm", "teoli", - "LieGroup", - "rogersuen" + "ziyunfei" ] }, - "Web/JavaScript/Guide/Keyed_collections": { - "modified": "2020-03-12T19:41:31.376Z", + "Web/JavaScript/Reference/Global_Objects/Object/toLocaleString": { + "modified": "2020-10-15T21:28:39.035Z", "contributors": [ - "haoye999", - "Jiasm", + "ShirleyM", + "Humyang", "zhangchen", - "jiahui", - "indux", - "supermanmsc", - "fengzhongye" + "AlexChao" ] }, - "Web/JavaScript/Guide/Loops_and_iteration": { - "modified": "2020-03-12T19:42:07.957Z", + "Web/JavaScript/Reference/Global_Objects/Object/toSource": { + "modified": "2020-10-15T21:21:01.572Z", "contributors": [ - "koor", - "narutojian", - "RainSlide", - "Wuqichao", - "SphinxKnight", - "zero_zero_zero", - "zhuangyin", - "Zheng7426", - "Bob_young", - "xiaowei.yang", - "johncido", + "qiu_han", + "zhangchen", "xgqfrms-GitHub", - "xdsnet", - "codetaro", - "suxiesumiao", - "AcJoker", - "kavon", - "lushunming", - "MurphyL", - "wumouse", - "intuitionfly" + "keller0", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Guide/Meta_programming": { - "modified": "2020-10-06T11:58:28.618Z", + "Web/JavaScript/Reference/Global_Objects/Object/toString": { + "modified": "2020-10-15T21:22:00.834Z", "contributors": [ - "SeekerGAO", - "suvyme", "RainSlide", - "OStoneO", - "rikochyou", + "jbbjs", + "johnlin0207", "zhangchen", - "123456zzz", - "pamikel", "xgqfrms-GitHub", - "hpcherry", - "zyMacro", - "cughudson_1", - "acekingke", - "binhex", - "FredWe" + "wizardforcel", + "Hugh", + "sabrinaluo", + "AlexChao", + "ziyunfei", + "ZhouMengkang", + "teoli" ] }, - "Web/JavaScript/Guide/Modules": { - "modified": "2020-10-15T22:19:12.670Z", + "Web/JavaScript/Reference/Global_Objects/Object/valueOf": { + "modified": "2020-10-15T21:19:19.149Z", "contributors": [ - "ran", - "PPFei5Zhou", - "bkuke", - "StorytellerF", - "Yayure", - "narutojian", - "RainSlide", - "hotbaby" + "microJ", + "ywjco", + "zhangchen", + "zilong-thu", + "jimwmg", + "Ende93", + "helloguangxue", + "paddingme", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Guide/Numbers_and_dates": { - "modified": "2020-12-12T05:50:13.576Z", + "Web/JavaScript/Reference/Global_Objects/Object/values": { + "modified": "2020-10-15T21:42:31.053Z", "contributors": [ - "柳涤尘", - "antield", - "symant233", - "迷子碳", - "qazsweet", - "canyi1942", - "fenyu", - "adasqg", - "zms1995", - "trionfo1993", - "ShaderWind", - "vividlai", - "yonglezhou", - "DaiZhiTao", - "jitingsun", - "niccoming", - "xiaokk06", - "sgr", - "suxiesumiao", - "victor0801x", - "zhulinpinyu", - "williamchu123", - "ShiJianwen", - "zhe13", - "Toweave", - "Serifx", - "456wyc", - "wenxiangmao" + "Bayes", + "RoXoM", + "ywjco", + "zhangchen", + "spiritree", + "percy507", + "maicss", + "xgqfrms-GitHub", + "Hushabyme", + "webery" ] }, - "Web/JavaScript/Guide/Regular_Expressions": { - "modified": "2020-11-07T12:19:15.360Z", + "Web/JavaScript/Reference/Global_Objects/Promise": { + "modified": "2020-11-09T05:18:40.533Z", "contributors": [ - "hensonxu", - "imbriansun", - "Alibuibui", - "srq18211", - "symant233", - "MikeLeon23", - "antield", - "zytjs", - "jingkaimori", - "aliasliao", - "Clara-hy", - "yasen-wolf", - "cody343960591", - "PoppinL", - "cy234", - "RainSlide", - "pzjzeason", - "millionssss", - "iamwwc", - "Yayure", - "Checkson", - "crow-n", - "yadex", - "OlingCat", - "Fungzhe", - "ts0307", - "jianglinghao", - "SphinxKnight", - "AlexStacker", - "zhuangyin", - "Ahhaha233", - "yinsang", - "fengma", - "chenym1992", - "ataotao", - "lixingdecai", - "bmxklYzj", - "Frantic1048", - "hysunny", + "13126767772", + "Neo42", + "NickH", + "jackyKin", + "SandBoat", + "xgqfrms", + "woniuxingdong", + "ourai", + "w1687021088", + "xianghui-ma", + "42", + "SterileSummer", + "ZhechenLi", + "kyriejoshua", + "DHclly", + "Jiang-Xuan", + "filosfino", + "dandanbu3", + "suwu150", + "YISHI", + "Debugger-D", + "winjeysong", + "sjz2259696", + "NoroHime", + "SunApriloy", + "xutao", + "_da", + "wYhooo", + "tangHanSan", + "ThaddeusJiang", + "lindaxiao-hust", "xgqfrms-GitHub", - "Ckc", - "Jeff-Kook", - "ljy", - "maoxiaoke", - "falltodis", - "codetaro", - "simongfxu", - "fanyj1994", - "huaxiabuluo", - "lvhao96", - "luobotang", - "yisibl", - "ngtmuzi", - "chen_wang", + "HenryYong", "Ende93", - "sunshineMaria", - "snowsolf", - "sleep", - "Shimo", - "Guanjinke", - "teoli", - "sablib", - "thesadboy", - "devqin", - "jpuncle", - "xiaoxiong", - "ziyunfei" + "liujun121533", + "pot-code", + "lihx_hit", + "sensui7", + "udoless", + "dingxu", + "AnnAngela", + "excosy", + "billcz", + "Yidada", + "hipop", + "dear-lizhihua", + "xuanxiao2013", + "fskuok", + "mountainmoon", + "Fantasy_shao" ] }, - "Web/JavaScript/Guide/Regular_Expressions/Assertions": { - "modified": "2020-11-07T12:07:11.701Z", + "Web/JavaScript/Reference/Global_Objects/Promise/Promise": { + "modified": "2020-10-15T22:27:28.549Z", "contributors": [ - "hensonxu", - "srq18211", - "oxyg3n", - "zytjs", - "fish-inu", - "Dev_ljp", - "Xu-Angel", - "liuhao088" + "GYN" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise/all": { + "modified": "2020-12-13T19:21:55.259Z", + "contributors": [ + "hamishwillee", + "可能你对强有什么误解", + "xgqfrms", + "Debugger-D", + "moldray", + "kite-js", + "gemmi", + "Jiang-Xuan", + "BearZ", + "higrw", + "xgqfrms-GitHub", + "rollinhup", + "Hushabyme", + "iugo", + "billcz", + "zilong-thu", + "fskuok" ] }, - "Web/JavaScript/Guide/Regular_Expressions/Boundaries": { - "modified": "2020-10-30T11:36:06.394Z", + "Web/JavaScript/Reference/Global_Objects/Promise/allSettled": { + "modified": "2020-11-21T01:58:43.408Z", "contributors": [ - "phone-burner" + "xgqfrms", + "wowoqu", + "mountainmoon", + "chrisdavidmills", + "zhangchen", + "bangbang93", + "RoXoM", + "youngboy", + "SphinxKnight", + "jiaqunying" ] }, - "Web/JavaScript/Guide/Regular_Expressions/Character_Classes": { - "modified": "2020-06-28T13:35:45.679Z", + "Web/JavaScript/Reference/Global_Objects/Promise/any": { + "modified": "2020-10-27T03:51:15.177Z", "contributors": [ - "srq18211" + "SphinxKnight", + "mashuiquan", + "damengzhang", + "laampui", + "XLCYun", + "zhangchen", + "yinguangyao" ] }, - "Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges": { - "modified": "2020-08-21T07:28:58.610Z", + "Web/JavaScript/Reference/Global_Objects/Promise/catch": { + "modified": "2020-10-15T21:31:34.215Z", "contributors": [ - "srq18211" + "oldmtn", + "xycd", + "banli17", + "zhishaofei3", + "SheltonDong", + "Yevvb", + "HsuanLee", + "xgqfrms-GitHub", + "Hushabyme", + "fskuok", + "mountainmoon" ] }, - "Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes": { - "modified": "2020-07-11T06:10:35.787Z", + "Web/JavaScript/Reference/Global_Objects/Promise/finally": { + "modified": "2020-10-15T22:01:56.341Z", "contributors": [ - "zkmbdbbdd" + "WangLeto", + "zhangchen", + "Pada", + "ZQ-jhon", + "sudoor", + "ziclee", + "zhengzongyi", + "hoshino111" ] }, - "Web/JavaScript/Guide/Regular_Expressions/量词": { - "modified": "2020-06-28T13:50:25.946Z", + "Web/JavaScript/Reference/Global_Objects/Promise/race": { + "modified": "2020-10-15T21:34:18.502Z", "contributors": [ - "srq18211" + "Cuixote", + "lastnigtic", + "zhangchen", + "Jiang-Xuan", + "xgqfrms-GitHub", + "zhang-quan-yi", + "Hushabyme", + "fskuok" ] }, - "Web/JavaScript/Guide/Text_formatting": { - "modified": "2020-07-13T05:48:34.741Z", + "Web/JavaScript/Reference/Global_Objects/Promise/reject": { + "modified": "2020-10-15T21:34:10.841Z", "contributors": [ - "laampui", "zhangchen", - "niccoming", - "evolighting", - "i-PeterZhang", - "456wyc", - "redman9", - "guangxiyu" + "ChauMing", + "Flcwl", + "SphinxKnight", + "fskuok" ] }, - "Web/JavaScript/Guide/Using_promises": { - "modified": "2020-09-28T05:37:42.938Z", + "Web/JavaScript/Reference/Global_Objects/Promise/resolve": { + "modified": "2020-10-15T21:36:39.943Z", "contributors": [ - "Radix10", - "xuquentinyang", - "HashiKudo", - "brizer", - "iEmcc", - "johnao", - "abellong", - "SAM.L", - "RainSlide", - "VickyJin", - "jessica1990", - "TeabugCC", - "zhuangyin", - "ujsxn", - "huixisheng", - "yulongjing", - "rxliuli", - "yonoel", - "DevOps", - "brandonhyc", - "eeeecw", - "zotille", - "xuziang111", - "NN708", - "xuxun", + "inlym", + "ly023", "zhangchen", - "Evoque", - "Pythonofsdc", - "vanishcode", - "winjeysong", - "cwc7233", - "TimmyKingFree" + "xiaoxiyao", + "rockedpanda", + "cyancity", + "Jiang-Xuan", + "fscholz", + "nineSean", + "purple_force", + "Zhangjd", + "ylc395" ] }, - "Web/JavaScript/Guide/Working_with_Objects": { - "modified": "2020-03-21T00:54:40.101Z", + "Web/JavaScript/Reference/Global_Objects/Promise/then": { + "modified": "2020-10-15T21:31:32.284Z", "contributors": [ - "johnao", - "fish-inu", - "ngtmuzi", - "Pomelo1213", - "ywjco", - "kramon", - "kgojiwong", + "BadmasterY", + "RainSlide", + "zrefrain", + "triboby", + "litbear", + "love999262", + "Jiang-Xuan", + "LiXin", + "WenWu92", + "Kylin.this", + "HsuanLee", "xgqfrms-GitHub", - "heliangb46", - "Grizzly-Eric", - "zhanglianxin", - "coderfee", - "kiyonlin", - "IrisZhang", - "xwartz", - "Darkoe", - "XueSeason", - "jigs12", - "ReyCG_sub", - "smartkid", - "teoli", - "koala", - "ziyunfei" + "Ende93", + "Hushabyme", + "RandyLoop", + "hipop", + "liuyiqian", + "fskuok", + "mountainmoon" ] }, - "Web/JavaScript/Inheritance_and_the_prototype_chain": { - "modified": "2020-10-20T00:17:44.610Z", + "Web/JavaScript/Reference/Global_Objects/Proxy": { + "modified": "2020-11-29T05:45:07.225Z", "contributors": [ - "jack_chen", - "Nirvana-zsy", - "PiersZhang", - "YTInMyHeart", - "熊英明", - "AaronZzz", - "hydra-zim", - "demongodYY", - "c932828964", - "maozhenyu123", - "NicholasKong", - "Huangyilin19", - "MonkingStand", + "saifeiLee", + "VicterSun", "RainSlide", - "xulinggege", - "Rayyh", - "glud123", - "HuangXiZhou", - "Ieeebruce", - "Snailight", - "yonoel", - "lllbahol", - "ssttii", - "xgqfrms", - "DPJune1", - "MQpeng", - "yangzi", - "zhuangyin", - "anglli", - "Akiq2016", - "jeasonstudio", - "Sevenskey", - "LiXin", - "qiu_han", - "zhangchen", - "keifergu", - "jiangzhenggeng", - "DendiSe7enGitHub", - "zenith7ryu", - "feiyuabc", - "KngZhi", + "Hilshire", + "liuguanyu", "xgqfrms-GitHub", - "efeencheung", - "TwinkleLeon", - "jyjz2008", - "Mrzouning", - "craney", - "Ende93", - "nanflower", - "Ares_Xu", - "RenzHoly", - "xiaokk06", - "Musan", - "Downpooooour", - "maicss", - "iplus26", - "gavinjs", + "zhangchen", + "Lave", + "gaoupon", + "kdex", + "gaopeng", + "07akioni", + "wzx", + "Go7hic", + "WarriorWu", + "Katherina-Miao", "ziyunfei", - "hbkdsm", - "hipop", - "860136", - "Tranch", - "ReyCG", - "teoli", - "hutuxu" + "teoli" ] }, - "Web/JavaScript/Introduction_to_Object-Oriented_JavaScript": { - "modified": "2020-03-12T19:38:08.916Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy": { + "modified": "2020-10-15T22:33:06.804Z", "contributors": [ - "huijing", - "SAM.L", - "NarK", - "umiyevol", - "daix6", - "ashjs", - "sabrinaluo", - "xanarry", - "fskuok", - "hackerZhang", - "hipop", - "jamesliuhk", - "awp0011", - "ryanouyang", - "yiding_he", - "teoli", - "yimity", - "shiyutang", - "xcffl" + "zhanghaoxu0128" ] }, - "Web/JavaScript/Introduction_to_using_XPath_in_JavaScript": { - "modified": "2019-03-23T23:53:50.408Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/revocable": { + "modified": "2020-10-15T21:32:15.521Z", "contributors": [ - "chrisdavidmills", - "zhanglianxin", - "zengguanming", - "fscholz", - "ziyunfei", - "Cuimingda" + "RainSlide", + "SphinxKnight", + "ziyunfei" ] }, - "Web/JavaScript/JavaScript_technologies_overview": { - "modified": "2020-03-12T19:38:44.101Z", + "Web/JavaScript/Reference/Global_Objects/RangeError": { + "modified": "2019-03-23T22:27:07.051Z", "contributors": [ - "RainSlide", - "zhanglianxin", - "lunix01", - "Musan", - "ReyCG_sub", - "teoli", - "YuQiang.Yuan" + "wizardforcel", + "MurphyL", + "yatace" ] }, - "Web/JavaScript/Language_Resources": { - "modified": "2020-03-12T19:37:56.380Z", + "Web/JavaScript/Reference/Global_Objects/ReferenceError": { + "modified": "2019-03-23T22:52:45.441Z", "contributors": [ - "lunix01", - "teoli", - "ziyunfei" + "funroller", + "Tienyz" ] }, - "Web/JavaScript/Memory_Management": { - "modified": "2020-03-12T19:38:33.297Z", + "Web/JavaScript/Reference/Global_Objects/Reflect": { + "modified": "2020-10-15T21:38:03.417Z", "contributors": [ - "y00rb", - "xueliang", - "leavesster", - "quding0308", - "liujuntao123", - "JuneDeng2014", - "ilexwg", - "DarrenMan", - "zhangchen", - "micooz", - "sunnylost", + "tita0x00", + "LeonDWong", + "z1948296027", + "ZhangWei-KUMO", + "Akenokoru", "Ende93", - "wth", - "timwangdev", - "jackyKin", - "horizon0514", - "knightf", - "Bosn", - "teoli", - "Samoay", - "tank", - "jnoodle", - "Joe_Zhao", + "AlixWang", + "tanggd", + "Tommy-White", + "linzx1993", + "RoXoM", + "zhangchen", + "xgqfrms-GitHub", + "mo-n", + "wzx", "ziyunfei" ] }, - "Web/JavaScript/Reference": { - "modified": "2020-09-20T23:15:37.162Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/apply": { + "modified": "2020-10-15T21:46:16.764Z", "contributors": [ - "laampui", - "seanhuai", - "wwj402", - "RainSlide", - "ssttii", - "causal", - "zhangchen", "Ende93", - "lunix01", - "ziyunfei", - "teoli", - "CHiENiUS", - "kovchou" + "IAIAE" ] }, - "Web/JavaScript/Reference/About": { - "modified": "2020-03-12T19:40:27.168Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/construct": { + "modified": "2020-07-16T14:15:43.959Z", "contributors": [ - "Jack-Q", - "lunix01", - "qlxiao520", - "ziyunfei", - "yenshen" + "oxyg3n", + "caolvchong", + "xiaoxionganna", + "tornoda", + "sqqihao" ] }, - "Web/JavaScript/Reference/Classes": { - "modified": "2020-11-21T07:35:29.331Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty": { + "modified": "2020-10-15T21:51:24.597Z", "contributors": [ - "xiaoxiao1024", - "xgqfrms", - "niices", - "showad", - "xuyimingwork", - "zytjs", - "brizer", - "johnao", - "PeanutQAQ", - "HermitSun", - "narutojian", - "JackDing1208", - "willerhehehe", - "zhangchen", - "llyo", - "LiXin", - "xgqfrms-GitHub", - "LouisaNikita", - "winjeysong", - "PhilTheAir", - "XiongAmao", - "kylezhang", - "tarma", - "Jeane", - "Ende93", - "miuchan", - "slientomorrr", - "ziyunfei", - "eric183", - "sartrey", - "snandy", - "bumaociyuan" + "laampui", + "tornoda", + "charlesthink", + "Hushabyme" ] }, - "Web/JavaScript/Reference/Classes/Class_elements": { - "modified": "2020-10-15T22:22:33.437Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty": { + "modified": "2019-07-05T03:12:53.100Z", "contributors": [ - "Fogwind", - "wxyads" + "tornoda", + "Hushabyme" ] }, - "Web/JavaScript/Reference/Classes/Private_class_fields": { - "modified": "2020-10-15T22:30:12.129Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/get": { + "modified": "2020-10-15T21:51:21.601Z", "contributors": [ - "zhuangyin", - "symant233", - "wizard-intraining" + "stupidsongshu", + "tornoda", + "AozakiOrenji", + "Hushabyme", + "EpsilonYi" ] }, - "Web/JavaScript/Reference/Classes/constructor": { - "modified": "2020-10-15T21:36:30.986Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor": { + "modified": "2019-03-23T22:20:49.977Z", "contributors": [ - "zhangchen", - "CJackYang", - "jiangseventeen", - "xgqfrms-GitHub", - "Ende93", - "destinyCherry", - "MarxJiao", - "chaooo", - "Lellansin" + "RoXoM", + "Hushabyme" ] }, - "Web/JavaScript/Reference/Classes/extends": { - "modified": "2020-10-15T21:37:25.638Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf": { + "modified": "2020-10-15T21:51:25.998Z", "contributors": [ - "zhangchen", - "thinkershare", - "liuwj", - "xgqfrms-GitHub", - "MoYahoo", - "Ende93", - "xiaoweb", - "ziyunfei", - "TinyJiang", - "pixiu" + "徐鹏跃", + "RoXoM", + "Hushabyme" ] }, - "Web/JavaScript/Reference/Classes/static": { - "modified": "2020-10-15T21:37:45.068Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/has": { + "modified": "2019-03-18T21:00:09.070Z", + "contributors": [ + "sjpeter", + "IAIAE" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible": { + "modified": "2019-03-23T22:20:41.186Z", + "contributors": [ + "cxftj", + "Hushabyme" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys": { + "modified": "2020-10-15T21:51:25.621Z", "contributors": [ - "daijie", - "luna666", - "zhuangyin", - "xgqfrms-GitHub", "zhangchen", - "hijiangtao", - "MrCuriosity", - "kameii", - "solome", - "ngtmuzi", - "willwong", - "knightf", - "lunix01" + "liuy1994", + "Hushabyme" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions": { + "modified": "2020-10-15T21:51:26.999Z", + "contributors": [ + "Astroleander", + "RoXoM", + "Hushabyme" ] }, - "Web/JavaScript/Reference/Deprecated_and_obsolete_features": { - "modified": "2020-03-30T11:15:40.777Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/set": { + "modified": "2020-10-15T21:51:25.331Z", "contributors": [ - "RainSlide", - "teoli", - "ziyunfei" + "zero7u", + "AozakiOrenji", + "Hushabyme" ] }, - "Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol": { - "modified": "2020-03-12T19:44:37.222Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf": { + "modified": "2020-10-15T21:51:25.701Z", "contributors": [ - "wwj402", - "jwhitlock", - "lsvih" + "徐鹏跃", + "Hushabyme" ] }, - "Web/JavaScript/Reference/Errors": { - "modified": "2020-03-12T19:43:37.546Z", + "Web/JavaScript/Reference/Global_Objects/RegExp": { + "modified": "2020-12-10T23:34:38.471Z", "contributors": [ + "ruienger", + "jingkaimori", + "空杉心雨后", + "ll009366", "Ende93", - "Jack-Q", - "sabertazimi" + "fanerge", + "daijie", + "wbamberg", + "zhuangyin", + "YoungChen", + "myl0204", + "xgqfrms-GitHub", + "kiling", + "biaocy", + "fuchao2012", + "shuata", + "xgqfrms", + "KingMario", + "vbnjfhty", + "y8n", + "tabooc", + "jamesxu", + "teoli", + "AlexChao", + "chyee", + "Darrel.Hsu", + "photino", + "ziyunfei", + "fishenal", + "akawhy", + "shi_zheng", + "GreatHan", + "Hans huang", + "Mickeyboy" ] }, - "Web/JavaScript/Reference/Errors/Already_has_pragma": { - "modified": "2020-03-12T19:45:25.142Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/@@match": { + "modified": "2020-10-15T21:49:08.862Z", "contributors": [ - "wizardforcel" + "Ende93", + "wizardforcel", + "boatlet" ] }, - "Web/JavaScript/Reference/Errors/Array_sort_argument": { - "modified": "2020-03-12T19:45:22.429Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll": { + "modified": "2020-10-15T22:16:46.561Z", "contributors": [ - "hui1993", - "Ende93" + "c1er" ] }, - "Web/JavaScript/Reference/Errors/Bad_octal": { - "modified": "2020-03-12T19:45:19.888Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/@@replace": { + "modified": "2020-10-15T21:54:34.957Z", "contributors": [ - "WayneCui", - "Ende93" + "javenl", + "LeoQuote", + "876843240", + "fanyer" ] }, - "Web/JavaScript/Reference/Errors/Bad_radix": { - "modified": "2020-03-12T19:44:42.812Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/@@search": { + "modified": "2019-03-23T22:11:28.976Z", "contributors": [ - "xiaokk06" + "fanyer" ] }, - "Web/JavaScript/Reference/Errors/Bad_regexp_flag": { - "modified": "2020-03-12T19:46:18.624Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/@@species": { + "modified": "2019-03-23T22:18:27.389Z", "contributors": [ - "lazyboywu" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Errors/Bad_return_or_yield": { - "modified": "2020-03-12T19:44:37.026Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/@@split": { + "modified": "2019-08-22T23:28:14.164Z", "contributors": [ - "wangmengjun", - "Cattla" + "fangyulovechina", + "fanyer" ] }, - "Web/JavaScript/Reference/Errors/Called_on_incompatible_type": { - "modified": "2020-03-12T19:46:49.645Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/RegExp": { + "modified": "2020-10-15T22:33:53.145Z", "contributors": [ - "WayneCui" + "jingkaimori" ] }, - "Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init": { - "modified": "2020-03-12T19:46:25.675Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/compile": { + "modified": "2019-03-23T22:22:52.399Z", "contributors": [ - "kilodleif", - "WayneCui" + "kameii" ] }, - "Web/JavaScript/Reference/Errors/Cant_access_property": { - "modified": "2020-03-12T19:48:25.216Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/dotAll": { + "modified": "2020-10-15T22:16:46.676Z", "contributors": [ - "zangguodong" + "c1er" ] }, - "Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible": { - "modified": "2020-03-12T19:46:26.772Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/exec": { + "modified": "2020-10-15T21:26:53.403Z", "contributors": [ - "WayneCui" + "CarrotB", + "dear-lizhihua", + "PageYe", + "righttoe", + "shiddong", + "ibufu", + "nandayaduo", + "Marco_dev", + "xgqfrms-GitHub", + "hangyangws", + "LiiiiittleRain", + "paddingme", + "baiya", + "teoli", + "AlexChao", + "ziyunfei", + "LinusYu" ] }, - "Web/JavaScript/Reference/Errors/Cant_delete": { - "modified": "2020-03-12T19:45:31.865Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/flags": { + "modified": "2019-07-04T23:57:57.114Z", "contributors": [ - "lihx_hit", "wizardforcel" ] }, - "Web/JavaScript/Reference/Errors/Cant_redefine_property": { - "modified": "2020-03-12T19:46:26.214Z", - "contributors": [ - "WayneCui" - ] - }, - "Web/JavaScript/Reference/Errors/Cyclic_object_value": { - "modified": "2020-07-13T11:27:10.484Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/global": { + "modified": "2019-07-04T23:58:07.262Z", "contributors": [ - "Mrdapeng", - "540692039", - "nansanhao", - "WayneCui" + "teoli", + "AlexChao" ] }, - "Web/JavaScript/Reference/Errors/Dead_object": { - "modified": "2020-03-12T19:46:28.473Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase": { + "modified": "2019-07-04T23:54:43.220Z", "contributors": [ - "WayneCui" + "teoli", + "AlexChao" ] }, - "Web/JavaScript/Reference/Errors/Delete_in_strict_mode": { - "modified": "2020-03-12T19:46:25.179Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/input": { + "modified": "2019-04-16T05:59:34.644Z", "contributors": [ - "WayneCui" + "gh1031", + "teoli", + "wizardforcel" ] }, - "Web/JavaScript/Reference/Errors/Deprecated_String_generics": { - "modified": "2020-03-12T19:46:39.182Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex": { + "modified": "2019-07-04T23:55:43.642Z", "contributors": [ - "WayneCui" + "teoli", + "AlexChao", + "ziyunfei", + "Wjsl" ] }, - "Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage": { - "modified": "2020-03-12T19:45:21.241Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch": { + "modified": "2019-03-23T22:18:26.965Z", "contributors": [ - "Ende93" + "teoli", + "wizardforcel" ] }, - "Web/JavaScript/Reference/Errors/Deprecated_expression_closures": { - "modified": "2020-03-12T19:46:34.964Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/lastParen": { + "modified": "2019-03-23T22:18:27.095Z", "contributors": [ - "WayneCui" + "teoli", + "wizardforcel" ] }, - "Web/JavaScript/Reference/Errors/Deprecated_octal": { - "modified": "2020-03-12T19:46:39.086Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/leftContext": { + "modified": "2019-03-23T22:18:24.587Z", "contributors": [ - "WayneCui" + "teoli", + "wizardforcel" ] }, - "Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma": { - "modified": "2020-03-12T19:45:31.617Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/multiline": { + "modified": "2019-07-04T23:59:21.859Z", "contributors": [ - "Kaede_Shinoda", - "Ende93" + "teoli", + "AlexChao" ] }, - "Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat": { - "modified": "2020-03-12T19:46:45.691Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/n": { + "modified": "2019-07-12T00:53:55.955Z", "contributors": [ - "WayneCui" + "teoli", + "fengma", + "xgqfrms-GitHub", + "AlixWang" ] }, - "Web/JavaScript/Reference/Errors/Equal_as_assign": { - "modified": "2020-03-12T19:44:21.268Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/rightContext": { + "modified": "2019-03-23T22:18:24.457Z", "contributors": [ - "niaodan2b" + "teoli", + "wizardforcel" ] }, - "Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated": { - "modified": "2020-03-12T19:45:01.286Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/source": { + "modified": "2019-07-04T23:56:46.237Z", "contributors": [ - "_da" + "ziyunfei", + "yenshen" ] }, - "Web/JavaScript/Reference/Errors/Getter_only": { - "modified": "2020-03-12T19:46:35.397Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/sticky": { + "modified": "2020-10-15T21:51:29.415Z", "contributors": [ - "WayneCui" + "Ende93", + "Ahhaha233", + "wenmin92" ] }, - "Web/JavaScript/Reference/Errors/Identifier_after_number": { - "modified": "2020-03-12T19:46:01.632Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/test": { + "modified": "2020-11-19T10:20:16.081Z", "contributors": [ - "AlanStewart6", - "fanxiaobin1992" + "zhuangyin", + "ReedSun", + "symant233", + "ridiculousjam", + "zqyue", + "xgqfrms-GitHub", + "kameii", + "teoli", + "AlexChao" ] }, - "Web/JavaScript/Reference/Errors/Illegal_character": { - "modified": "2020-03-12T19:46:25.974Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/toSource": { + "modified": "2019-07-04T23:42:36.181Z", "contributors": [ - "WayneCui" + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Errors/Invalid_array_length": { - "modified": "2020-03-12T19:44:25.874Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/toString": { + "modified": "2019-07-04T23:42:41.541Z", "contributors": [ - "xiaokk06", - "Hitomichan" + "teoli", + "AlexChao" ] }, - "Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side": { - "modified": "2020-03-12T19:44:25.285Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/unicode": { + "modified": "2019-07-04T23:59:38.859Z", "contributors": [ - "Ende93" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Errors/Invalid_const_assignment": { - "modified": "2020-03-12T19:46:37.514Z", + "Web/JavaScript/Reference/Global_Objects/Set": { + "modified": "2020-11-10T03:33:00.037Z", "contributors": [ - "WayneCui" + "SphinxKnight", + "Ongve", + "Ende93", + "wallena3", + "woshiqiang1", + "houzp", + "MYWProgram", + "zhuangyin", + "zhangchen", + "Jiang-Xuan", + "buckarooch", + "xgqfrms-GitHub", + "CoCooCo", + "JJPandari", + "tang45", + "xdsnet", + "dingxu", + "tngan", + "ziyunfei", + "fskuok", + "tiansh", + "teoli", + "zhangyaochun1987" ] }, - "Web/JavaScript/Reference/Errors/Invalid_date": { - "modified": "2020-03-12T19:46:02.926Z", + "Web/JavaScript/Reference/Global_Objects/Set/@@iterator": { + "modified": "2020-10-15T22:31:10.470Z", "contributors": [ - "xiaokk06", - "kilodleif", - "dudusky" + "Ende93" ] }, - "Web/JavaScript/Reference/Errors/Invalid_for-in_initializer": { - "modified": "2020-03-12T19:46:25.733Z", + "Web/JavaScript/Reference/Global_Objects/Set/@@species": { + "modified": "2020-10-15T22:05:00.184Z", "contributors": [ - "WayneCui" + "Ende93", + "susan007", + "helloyong" ] }, - "Web/JavaScript/Reference/Errors/Invalid_for-of_initializer": { - "modified": "2020-03-12T19:46:25.653Z", + "Web/JavaScript/Reference/Global_Objects/Set/Set": { + "modified": "2020-10-15T22:31:09.443Z", "contributors": [ - "WayneCui" + "Ende93" ] }, - "Web/JavaScript/Reference/Errors/JSON_bad_parse": { - "modified": "2020-03-12T19:44:41.664Z", + "Web/JavaScript/Reference/Global_Objects/Set/add": { + "modified": "2020-10-15T21:28:25.102Z", "contributors": [ + "Mr_kaze", + "zhuangyin", + "fscholz", + "MaZheng", "Ende93", - "imhaohao" + "Skyang", + "yenshen", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Errors/Malformed_URI": { - "modified": "2020-03-12T19:46:27.676Z", + "Web/JavaScript/Reference/Global_Objects/Set/clear": { + "modified": "2019-03-23T23:13:23.536Z", "contributors": [ - "WayneCui" + "MaZheng", + "Ende93", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Errors/Malformed_formal_parameter": { - "modified": "2020-03-12T19:45:20.875Z", + "Web/JavaScript/Reference/Global_Objects/Set/delete": { + "modified": "2019-07-08T00:12:51.875Z", "contributors": [ - "Ende93" + "adonWong", + "Ende93", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Errors/Missing_bracket_after_list": { - "modified": "2020-03-12T19:45:17.108Z", + "Web/JavaScript/Reference/Global_Objects/Set/entries": { + "modified": "2019-03-23T22:25:08.761Z", "contributors": [ - "Ende93" + "Lunaticf", + "timlee1128" ] }, - "Web/JavaScript/Reference/Errors/Missing_colon_after_property_id": { - "modified": "2020-03-12T19:46:24.903Z", + "Web/JavaScript/Reference/Global_Objects/Set/forEach": { + "modified": "2019-08-05T06:54:27.458Z", "contributors": [ - "WayneCui" + "tzmf", + "Jonnypeng", + "SphinxKnight", + "myl0204", + "tommyzqfeng", + "timlee1128", + "201341", + "gaigeshen" ] }, - "Web/JavaScript/Reference/Errors/Missing_curly_after_function_body": { - "modified": "2020-03-12T19:46:26.744Z", + "Web/JavaScript/Reference/Global_Objects/Set/has": { + "modified": "2019-07-08T00:21:03.715Z", "contributors": [ - "WayneCui" + "marsgt", + "MaZheng", + "SphinxKnight", + "Nonlone" ] }, - "Web/JavaScript/Reference/Errors/Missing_curly_after_property_list": { - "modified": "2020-03-12T19:45:22.931Z", + "Web/JavaScript/Reference/Global_Objects/Set/size": { + "modified": "2020-10-15T21:41:25.836Z", "contributors": [ - "Ende93" + "zhangchen", + "SphinxKnight", + "springuper", + "OmniP" ] }, - "Web/JavaScript/Reference/Errors/Missing_formal_parameter": { - "modified": "2020-03-12T19:46:22.522Z", + "Web/JavaScript/Reference/Global_Objects/Set/values": { + "modified": "2020-10-15T21:48:24.054Z", "contributors": [ - "WayneCui" + "Mr_kaze", + "qiudongwei", + "marsgt", + "holynewbie" ] }, - "Web/JavaScript/Reference/Errors/Missing_initializer_in_const": { - "modified": "2020-03-12T19:46:26.113Z", + "Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer": { + "modified": "2020-10-15T21:52:10.163Z", "contributors": [ - "WayneCui" + "wallena3", + "szengtal", + "RoXoM", + "AnnAngela", + "xgqfrms-GitHub", + "winjeysong" ] }, - "Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator": { - "modified": "2020-03-12T19:46:26.813Z", + "Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/byteLength": { + "modified": "2020-10-15T21:58:35.573Z", "contributors": [ - "WayneCui" + "wallena3", + "xgqfrms-GitHub" ] }, - "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list": { - "modified": "2020-03-12T19:44:53.187Z", + "Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/slice": { + "modified": "2020-10-15T21:58:38.787Z", "contributors": [ - "Idealist_EZ", - "VanLeon" + "wallena3", + "xgqfrms-GitHub" ] }, - "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition": { - "modified": "2020-03-12T19:46:25.852Z", + "Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2020-05-13T00:15:31.329Z", "contributors": [ - "WayneCui" + "canyi1942", + "RainSlide", + "Ejgwg0629", + "transping", + "zhangsenhua", + "frankfang1990", + "huangbom", + "xgqfrms-GitHub", + "ezirmusitua", + "sevenqi", + "ouzz413", + "MrBeike", + "msmailcode", + "git123hub", + "Soy", + "webpansy", + "liurenxingyu", + "lunix01", + "FredWe", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { - "modified": "2020-03-12T19:44:58.615Z", + "Web/JavaScript/Reference/Global_Objects/String/@@iterator": { + "modified": "2019-10-14T06:47:30.493Z", "contributors": [ - "Davont", - "jitingsun" + "SageX", + "Dewey." ] }, - "Web/JavaScript/Reference/Errors/More_arguments_needed": { - "modified": "2020-03-12T19:45:18.099Z", + "Web/JavaScript/Reference/Global_Objects/String/Trim": { + "modified": "2020-10-15T21:07:55.641Z", "contributors": [ - "Ende93" + "brizer", + "RainSlide", + "SageX", + "xgqfrms-GitHub", + "Ende93", + "helloguangxue", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Errors/Negative_repetition_count": { - "modified": "2020-03-12T19:45:19.235Z", + "Web/JavaScript/Reference/Global_Objects/String/anchor": { + "modified": "2019-10-13T02:57:05.433Z", "contributors": [ - "Ende93" + "SageX", + "xgl", + "wwzText", + "Noly1990", + "teoli", + "AlexChao" ] }, - "Web/JavaScript/Reference/Errors/No_non-null_object": { - "modified": "2020-03-12T19:46:21.638Z", + "Web/JavaScript/Reference/Global_Objects/String/big": { + "modified": "2019-08-30T00:30:39.502Z", "contributors": [ - "WayneCui" + "wizardforcel", + "Valora", + "JokerPrince" ] }, - "Web/JavaScript/Reference/Errors/No_properties": { - "modified": "2020-03-12T19:45:01.030Z", + "Web/JavaScript/Reference/Global_Objects/String/blink": { + "modified": "2019-08-30T00:33:08.296Z", "contributors": [ - "lisniuse", - "jitingsun" + "wizardforcel", + "JokerPrince" ] }, - "Web/JavaScript/Reference/Errors/No_variable_name": { - "modified": "2020-03-12T19:46:26.272Z", + "Web/JavaScript/Reference/Global_Objects/String/bold": { + "modified": "2019-08-30T00:38:46.883Z", "contributors": [ - "WayneCui" + "Ende93", + "Agp12010" ] }, - "Web/JavaScript/Reference/Errors/Non_configurable_array_element": { - "modified": "2020-03-12T19:46:26.810Z", + "Web/JavaScript/Reference/Global_Objects/String/charAt": { + "modified": "2019-08-30T00:20:40.323Z", "contributors": [ - "WayneCui" + "Noly1990", + "xgqfrms-GitHub", + "Hugh", + "MarianZhang", + "teoli", + "AlexChao" ] }, - "Web/JavaScript/Reference/Errors/Not_a_codepoint": { - "modified": "2020-03-12T19:44:36.705Z", + "Web/JavaScript/Reference/Global_Objects/String/charCodeAt": { + "modified": "2020-10-15T21:28:56.069Z", "contributors": [ - "YYYxt", - "Cattla" + "laampui", + "ChenNing02", + "RainSlide", + "lordisback", + "JuFoFu", + "KMKNKK", + "wizardforcel", + "xgqfrms-GitHub", + "baishusama", + "VmanXu", + "NotFinally", + "MarianZhang", + "Bigbigbig", + "greatbug", + "BeHappyF", + "LittleJake", + "Meteormatt", + "sweetliu", + "teoli", + "AlexChao" ] }, - "Web/JavaScript/Reference/Errors/Not_a_constructor": { - "modified": "2020-03-12T19:45:22.496Z", + "Web/JavaScript/Reference/Global_Objects/String/codePointAt": { + "modified": "2019-03-18T20:48:31.110Z", "contributors": [ - "Ende93" + "transping", + "xdsnet", + "anchengjian" ] }, - "Web/JavaScript/Reference/Errors/Not_a_function": { - "modified": "2020-06-13T05:01:42.941Z", + "Web/JavaScript/Reference/Global_Objects/String/concat": { + "modified": "2020-10-15T21:07:52.015Z", "contributors": [ - "kagurakana", - "Ende93", - "lisniuse" + "laampui", + "Skyang", + "yenshen", + "teoli", + "AlexChao", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Errors/Not_defined": { - "modified": "2020-06-19T20:36:57.807Z", + "Web/JavaScript/Reference/Global_Objects/String/endsWith": { + "modified": "2020-10-15T21:21:07.320Z", "contributors": [ - "oyyunttt", + "laampui", + "RainSlide", "Veneno", - "yenshen", - "Zappa451", - "Hitomichan" + "LasyIsLazy", + "hongxu.Wei", + "terasum", + "SphinxKnight", + "percy507", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Errors/Precision_range": { - "modified": "2020-03-12T19:44:41.579Z", + "Web/JavaScript/Reference/Global_Objects/String/fixed": { + "modified": "2019-03-23T22:39:09.482Z", "contributors": [ - "xiaokk06", - "Desmond", - "ihuguowei" + "Ende93", + "chengxc" ] }, - "Web/JavaScript/Reference/Errors/Property_access_denied": { - "modified": "2020-03-12T19:44:01.141Z", + "Web/JavaScript/Reference/Global_Objects/String/fontcolor": { + "modified": "2019-03-23T22:20:59.919Z", "contributors": [ - "neal1991", - "Jack-Q" + "Jiang-Xuan", + "jieouba" ] }, - "Web/JavaScript/Reference/Errors/Read-only": { - "modified": "2020-03-12T19:45:06.128Z", + "Web/JavaScript/Reference/Global_Objects/String/fontsize": { + "modified": "2019-03-23T22:22:45.888Z", "contributors": [ - "_da" + "JokerPrince" ] }, - "Web/JavaScript/Reference/Errors/Redeclared_parameter": { - "modified": "2020-03-12T19:45:19.623Z", + "Web/JavaScript/Reference/Global_Objects/String/fromCharCode": { + "modified": "2020-10-15T21:28:54.977Z", "contributors": [ - "Ende93" + "叶扬", + "laampui", + "weiqinl", + "Jiang-Xuan", + "xgqfrms-GitHub", + "AlexChao" ] }, - "Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value": { - "modified": "2020-03-12T19:47:48.693Z", + "Web/JavaScript/Reference/Global_Objects/String/fromCodePoint": { + "modified": "2020-10-15T21:44:06.995Z", "contributors": [ "RainSlide", - "DarrenZhang01" + "varcat", + "transping", + "xiayefeng", + "Hushabyme", + "Cattla", + "lastjune" ] }, - "Web/JavaScript/Reference/Errors/Reserved_identifier": { - "modified": "2020-03-12T19:46:21.461Z", + "Web/JavaScript/Reference/Global_Objects/String/includes": { + "modified": "2020-10-15T21:20:32.653Z", "contributors": [ - "123456zzz", - "WayneCui" + "laampui", + "1v9", + "hongxu.Wei", + "xgqfrms-GitHub", + "Zertu", + "JokerPrince", + "zilong-thu", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Errors/Resulting_string_too_large": { - "modified": "2020-03-12T19:45:20.911Z", + "Web/JavaScript/Reference/Global_Objects/String/indexOf": { + "modified": "2020-10-15T21:28:57.881Z", "contributors": [ - "Ende93" + "sunchengpeng", + "LaiTaoGDUT", + "inlym", + "Heaan", + "kingsley2036", + "RainSlide", + "a-x", + "xgqfrms-GitHub", + "Ende93", + "AlexChao" ] }, - "Web/JavaScript/Reference/Errors/Stmt_after_return": { - "modified": "2020-03-12T19:44:03.324Z", + "Web/JavaScript/Reference/Global_Objects/String/italics": { + "modified": "2019-03-23T22:39:41.518Z", "contributors": [ - "Jack-Q" + "ssruoyan" ] }, - "Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params": { - "modified": "2020-03-12T19:45:16.824Z", + "Web/JavaScript/Reference/Global_Objects/String/lastIndexOf": { + "modified": "2019-10-13T05:19:10.386Z", "contributors": [ - "xgqfrms-GitHub", - "Ende93" + "SageX", + "ts0307", + "Heaan", + "GavinMoreYoung", + "yenshen", + "AlexChao" ] }, - "Web/JavaScript/Reference/Errors/Too_much_recursion": { - "modified": "2020-03-12T19:43:57.558Z", + "Web/JavaScript/Reference/Global_Objects/String/length": { + "modified": "2019-03-18T20:48:34.436Z", "contributors": [ - "Jack-Q" + "yenshen", + "teoli", + "AlexChao", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments": { - "modified": "2020-03-12T19:46:27.376Z", + "Web/JavaScript/Reference/Global_Objects/String/link": { + "modified": "2020-10-15T21:28:55.868Z", "contributors": [ - "WayneCui" + "RainSlide", + "teoli", + "AlexChao" ] }, - "Web/JavaScript/Reference/Errors/Undeclared_var": { - "modified": "2020-03-12T19:45:21.644Z", + "Web/JavaScript/Reference/Global_Objects/String/localeCompare": { + "modified": "2020-10-15T21:40:52.842Z", "contributors": [ + "weibangtuo", + "xuqighub", + "Ninja-Xu", + "Lookkkk", + "lcysgsg", + "xgqfrms-GitHub", + "zilong-thu", + "Yuxuan_Jiang", + "helloguangxue", "Ende93" ] }, - "Web/JavaScript/Reference/Errors/Undefined_prop": { - "modified": "2020-03-12T19:45:16.927Z", + "Web/JavaScript/Reference/Global_Objects/String/match": { + "modified": "2020-11-19T10:33:22.045Z", "contributors": [ - "Ende93" + "zhuangyin", + "GGliushi", + "zhangming8691", + "SageX", + "meng-Macbook", + "Nick_Arron", + "YISHI", + "Freed", + "xgqfrms-GitHub", + "kameii", + "AlexChao" ] }, - "Web/JavaScript/Reference/Errors/Unexpected_token": { - "modified": "2020-03-12T19:45:18.592Z", + "Web/JavaScript/Reference/Global_Objects/String/matchAll": { + "modified": "2020-10-15T22:16:17.159Z", "contributors": [ - "Ende93" + "oxyg3n", + "symant233", + "Tangel", + "zytjs", + "BadmasterY", + "SageX", + "Marcia_gm" ] }, - "Web/JavaScript/Reference/Errors/Unexpected_type": { - "modified": "2020-03-12T19:44:27.931Z", + "Web/JavaScript/Reference/Global_Objects/String/normalize": { + "modified": "2020-10-15T21:26:59.570Z", "contributors": [ - "yenshen", - "niaodan2b" + "RainSlide", + "SageX", + "xgl", + "SphinxKnight", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Errors/Unnamed_function_statement": { - "modified": "2020-03-12T19:46:23.117Z", + "Web/JavaScript/Reference/Global_Objects/String/padEnd": { + "modified": "2020-10-15T21:44:49.353Z", "contributors": [ - "Lxio", - "WayneCui" + "zhuangyin", + "calabash519", + "Iwouldliketobeapig", + "comehope", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Errors/Unterminated_string_literal": { - "modified": "2020-03-12T19:45:03.493Z", + "Web/JavaScript/Reference/Global_Objects/String/padStart": { + "modified": "2020-10-15T21:44:45.823Z", "contributors": [ - "Ende93", - "luckyG0429" + "zhuangyin", + "FredYing", + "dblate", + "Iwouldliketobeapig", + "kdex", + "xgqfrms-GitHub", + "Jiang-Xuan", + "comehope", + "tjyas", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Errors/Var_hides_argument": { - "modified": "2020-03-12T19:45:33.390Z", + "Web/JavaScript/Reference/Global_Objects/String/raw": { + "modified": "2020-10-15T21:29:34.006Z", "contributors": [ - "wizardforcel" + "SageX", + "Jamsdfn", + "HDUCC", + "OhIAmFine", + "RainSlide", + "RoXoM", + "SphinxKnight", + "joy-yu", + "ShupingLiu", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Errors/in_operator_no_object": { - "modified": "2020-03-12T19:46:27.485Z", + "Web/JavaScript/Reference/Global_Objects/String/repeat": { + "modified": "2020-10-15T21:23:38.769Z", "contributors": [ - "WayneCui" + "laampui", + "xgqfrms-GitHub", + "git123hub", + "Ende93", + "OmniP", + "teoli", + "tiansh", + "ziyunfei", + "zhangyaochun1987" ] }, - "Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand": { - "modified": "2020-03-12T19:47:39.673Z", + "Web/JavaScript/Reference/Global_Objects/String/replace": { + "modified": "2020-11-27T21:45:38.567Z", "contributors": [ - "JodieShi" + "lastVigo", + "ZouYj", + "zhangming8691", + "RainSlide", + "SageX", + "zhengwengang", + "bigbird231", + "lwjcjmx123", + "glntlq", + "Ende93", + "qiubo1992", + "dingziqi", + "xgqfrms-GitHub", + "Leeoric", + "benymor", + "imwangpan", + "Zegendary", + "billcz", + "snowsolf", + "S-iscoming", + "lunix01", + "FredWe", + "MoltBoy", + "xinshangshangxin", + "paddingme", + "fannie-z", + "teoli", + "AlexChao", + "robert.yin", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Errors/is_not_iterable": { - "modified": "2020-03-12T19:48:06.104Z", + "Web/JavaScript/Reference/Global_Objects/String/replaceAll": { + "modified": "2020-10-15T22:30:27.485Z", "contributors": [ - "JsirForGit", - "rockSandy" + "Damoness", + "laampui", + "xgqfrms" ] }, - "Web/JavaScript/Reference/Errors/不能添加属性": { - "modified": "2020-03-12T19:49:02.016Z", + "Web/JavaScript/Reference/Global_Objects/String/search": { + "modified": "2020-10-15T21:29:01.821Z", "contributors": [ - "mysteriousfather" + "laampui", + "Fleeting198", + "RainSlide", + "xgqfrms-GitHub", + "rockedpanda", + "AlexChao", + "teoli" ] }, - "Web/JavaScript/Reference/Functions": { - "modified": "2020-10-15T21:02:46.649Z", + "Web/JavaScript/Reference/Global_Objects/String/slice": { + "modified": "2020-10-15T21:04:29.173Z", "contributors": [ - "meng-Macbook", + "RainSlide", + "Jemory", + "MinimalistYing", "zhangchen", - "LiXin", - "righttoe", - "KngZhi", "xgqfrms-GitHub", - "appie963", - "Jianming", - "Ende93", - "ChristopherMa2012", - "ziyunfei", + "towerzju", + "Meteormatt", + "helloguangxue", + "FredWe", "teoli", - "lijunchengbeyond", - "byronhe", - "iwo" + "AlexChao", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Functions/Arrow_functions": { - "modified": "2020-10-15T21:22:15.274Z", + "Web/JavaScript/Reference/Global_Objects/String/small": { + "modified": "2019-03-23T22:22:44.927Z", "contributors": [ - "symant233", - "zhonghuajiadezhuizhongyu", - "woshiqiang1", - "YangYihui", - "kingsley2036", - "Monkey-D-Pixel", - "Himself65", - "Frederick-S", - "jianchao_xue", - "ZeroWhiteSmile", - "wangbangkun", - "ColinJinag", - "zjjgsc", - "Harleywww", - "huangll", - "LeoQuote", - "jjc", - "ywjco", - "Warden", + "wizardforcel", + "JokerPrince" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/split": { + "modified": "2020-10-15T21:28:59.434Z", + "contributors": [ + "real-Row", + "SageX", + "WindLo", + "gentlecoder", + "42", + "hongxu.Wei", + "laampui", + "Jiang-Xuan", + "YISHI", + "JuFoFu", + "ZQH", "xgqfrms-GitHub", + "Bitzo", + "uestcNaldo", + "zhuangyin", + "mooyxu", + "Hugh", + "auroraeffect", + "azhi09", + "helloguangxue", + "horizon0514", + "AlexChao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/startsWith": { + "modified": "2020-10-15T21:21:10.667Z", + "contributors": [ "zhangchen", - "anjia", - "StevenYuysy", - "ZZES_REN", - "tjyas", - "Gary-c", - "linzhihuan", - "guonanci", - "shifengchen", - "unliar", - "MichelleGuan", - "slimeball", - "LangDonHJJ", - "zhangzju", - "Aisi", - "muzhen", + "YouMoeYi", + "RainSlide", + "SimonLeeee", + "SphinxKnight", "Meteormatt", - "Ende93", - "Ovilia", - "solome", - "zilong-thu", - "jy1989", + "ziyunfei", "teoli", - "ziyunfei" + "zhangyaochun1987" ] }, - "Web/JavaScript/Reference/Functions/Default_parameters": { - "modified": "2020-10-15T21:19:13.746Z", + "Web/JavaScript/Reference/Global_Objects/String/strike": { + "modified": "2019-03-23T22:19:16.420Z", "contributors": [ - "zhuangyin", - "zhangchen", - "xgqfrms-GitHub", - "Carlmac", - "xiaorang", - "Inokinoki", - "thomasyimgit", - "harryhao", - "lunix01", - "teoli", - "ziyunfei" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Functions/Method_definitions": { - "modified": "2020-10-15T21:34:33.682Z", + "Web/JavaScript/Reference/Global_Objects/String/sub": { + "modified": "2019-03-23T22:19:14.417Z", "contributors": [ - "narutojian", - "by73", - "Harpes", - "fscholz", - "SphinxKnight", - "zhangchen", - "teoli", - "fskuok" + "xgqfrms-GitHub", + "wizardforcel" ] }, - "Web/JavaScript/Reference/Functions/Rest_parameters": { - "modified": "2020-10-15T21:18:39.925Z", + "Web/JavaScript/Reference/Global_Objects/String/substr": { + "modified": "2019-09-27T00:05:56.009Z", "contributors": [ - "Yayure", - "gqbre", - "codevvvv9", - "fscholz", - "Jhongwun", - "Warden", - "zhangchen", - "Ts799498164", - "Hanx", + "wingtao", + "xybin1990", + "zhaoboxiang", "xgqfrms-GitHub", - "Ende93", "helloguangxue", - "sabrinaluo", - "teoli", - "fskuok", - "ziyunfei" + "AlexChao" ] }, - "Web/JavaScript/Reference/Functions/arguments": { - "modified": "2020-10-15T21:02:42.108Z", + "Web/JavaScript/Reference/Global_Objects/String/substring": { + "modified": "2020-06-10T02:59:54.363Z", "contributors": [ - "xgqfrms", - "s1min", - "zx06", - "gqbre", - "jianchao_xue", - "ywjco", - "yeziningmeng", - "DragonHou", - "szengtal", - "zhangchen", - "renyuns", + "HCSkatana", + "SageX", + "libaixu", + "zhuangyin", + "hexianzhi", "xgqfrms-GitHub", - "yyyyu", - "yatace", - "jihonghai", - "Ende93", - "yswang0927", - "teoli", - "asdzxcqwe", - "Fadeoc", - "brandonzhu", - "ziyunfei" + "qujingyouyachu", + "helloguangxue", + "bailnl", + "AlexChao" ] }, - "Web/JavaScript/Reference/Functions/arguments/@@iterator": { - "modified": "2020-10-15T21:48:23.032Z", + "Web/JavaScript/Reference/Global_Objects/String/sup": { + "modified": "2019-03-23T22:19:11.494Z", "contributors": [ - "fscholz", - "wizardforcel", - "wohugb" + "xgqfrms-GitHub", + "wizardforcel" ] }, - "Web/JavaScript/Reference/Functions/arguments/callee": { - "modified": "2020-10-15T21:29:14.342Z", + "Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase": { + "modified": "2019-10-14T05:00:05.180Z", "contributors": [ - "18boys", - "ssttii", - "fscholz", - "NoroHime", - "yangyichen", - "jyjsjd", + "SageX", + "853419196", + "wizardforcel", "xgqfrms-GitHub", - "Ende93", - "jonkee", - "teoli", - "gemstone" + "fighting0710" ] }, - "Web/JavaScript/Reference/Functions/arguments/length": { - "modified": "2020-10-15T21:21:10.516Z", + "Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase": { + "modified": "2020-10-15T22:29:43.372Z", "contributors": [ - "fscholz", - "teoli", - "ziyunfei" + "konnga" ] }, - "Web/JavaScript/Reference/Functions/get": { - "modified": "2020-10-15T21:32:24.408Z", + "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": { + "modified": "2020-08-21T17:39:11.325Z", "contributors": [ - "wallena3", - "fscholz", - "LiXin", - "lijinglin", - "zhangchen", + "LCLx", + "SageX", "xgqfrms-GitHub", + "helloguangxue", + "yenshen", "teoli", - "yenshen" + "AlexChao", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Functions/set": { - "modified": "2020-10-15T21:31:33.512Z", + "Web/JavaScript/Reference/Global_Objects/String/toSource": { + "modified": "2019-03-18T20:48:25.704Z", "contributors": [ - "wallena3", - "fscholz", - "Austaras", - "zhangchen", - "xgqfrms-GitHub", - "Go7hic", "teoli", - "nyx2014", - "LinusYu" + "AlixWang" ] }, - "Web/JavaScript/Reference/Global_Objects": { - "modified": "2020-10-15T01:05:17.510Z", + "Web/JavaScript/Reference/Global_Objects/String/toString": { + "modified": "2019-10-14T05:25:34.591Z", "contributors": [ - "Neo42", - "Ende93", - "laampui", - "wallena3", - "RainSlide", - "Frederick-S", "SageX", - "liushengxin", - "Terry.Qiao", - "xgqfrms-GitHub", - "ZQH", - "zhangchen", - "mwc", - "Jiang-Xuan", - "SamuraiMe", - "highkay", - "lunix01", - "JoshuaGhost", - "ziyunfei", - "SphinxKnight", - "yiding_he", - "Fantasy_shao", - "AlexChao", - "teoli", - "OoOoOoOo" + "AlexChao" ] }, - "Web/JavaScript/Reference/Global_Objects/AggregateError": { - "modified": "2020-10-15T22:27:42.765Z", + "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": { + "modified": "2020-10-15T22:30:43.287Z", "contributors": [ - "叶扬", - "MaDeLu" + "LCLx", + "Originalee", + "ahbiao", + "Jabin_Lee" ] }, - "Web/JavaScript/Reference/Global_Objects/Array": { - "modified": "2020-10-15T21:11:20.773Z", + "Web/JavaScript/Reference/Global_Objects/String/valueOf": { + "modified": "2020-10-15T22:31:18.217Z", "contributors": [ - "SphinxKnight", - "fantasy090633", - "Frederick-S", - "Willian.G", - "gqbre", - "luluyiluchangtong", - "liuchao0704", - "zxsunrise", - "fisker", - "runyul", - "Terry.Qiao", - "ywjco", - "b2ns", - "kevinfszu", + "zhangming8691", + "ahbiao" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Symbol": { + "modified": "2020-10-19T10:05:29.655Z", + "contributors": [ + "Alendia", + "polunzh", + "JohnhanLiu", + "Coink", + "haoXu-web", + "Revonia", + "zhangchen", + "huge", + "Bitzo", + "winjeysong", "shaojingchao", - "zhuangyin", - "xinleibird", "xgqfrms-GitHub", - "Chocomoon", - "habc0807", - "kdex", - "amnsss", - "pigflymoon", - "xiaojunjor", - "zhiquan_yu", - "lanezhao", - "ttjkst", - "aximario", + "lfkid", + "syhxczy", + "wdpm", + "helloguangxue", + "MapleGu", "Ende93", - "ObooChin", - "frontzhm", - "kinuxroot", - "VIPArcher", - "ziyunfei", - "TinyJiang", - "FredWe", - "Cattla", - "Gaohaoyang", - "paddingme", - "Yaty", - "tingxinCY", - "Harvesty", - "Guanjinke", - "dancancer", - "teoli", - "WenbingZheng", - "Mickeyboy", - "Oatn", - "Kebing", - "Lanyu", - "Acefeel" + "X-Cracker", + "fscholz" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": { - "modified": "2020-10-15T21:48:08.478Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive": { + "modified": "2020-10-15T21:51:10.533Z", "contributors": [ - "GlowMonster", - "RainSlide", - "ifredom", - "Ende93", - "OshotOkill" + "zhangchen", + "Hushabyme" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/@@species": { - "modified": "2020-10-15T21:47:50.737Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator": { + "modified": "2020-10-15T22:20:07.992Z", "contributors": [ - "RainSlide", - "Fire1nRain", - "fscholz", - "hongxu.Wei", - "looch5" + "zhangchen", + "lzfcc" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": { - "modified": "2020-10-15T21:48:00.162Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/description": { + "modified": "2020-10-15T22:12:44.560Z", + "contributors": [ + "Maiko" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Symbol/for": { + "modified": "2019-04-22T09:08:37.458Z", "contributors": [ - "RainSlide", "Ende93", - "OshotOkill" + "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/Reduce": { - "modified": "2020-10-15T21:26:38.795Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance": { + "modified": "2020-10-15T21:49:33.542Z", "contributors": [ - "zhuangyin", - "zangbianxuegu", - "cracdic", - "tanpopo", - "SageX", - "good1uck", - "zheng1013757145", - "MrGaoGang", - "daolanfler", - "superadmin", - "jaredhan418", - "polunzh", - "haylorhu", - "yinsang", - "BingerWeb", - "linqunxun", - "weiqinl", - "danchaotaiyang", - "fscholz", - "fisker", - "ysyfff", - "wjuan960407", + "vent", "zhangchen", - "dblate", - "Go7hic", - "maximus1992", - "conniejing", - "keyood", - "righttoe", - "xgqfrms-GitHub", - "leeseean", - "micheal-death", - "coolguy", - "iugo", - "seaHeater", - "yanxiaowu", - "collhector", - "Cattla", - "vcfvct", - "teoli", "AlexChao", - "ziyunfei", - "fishenal" + "Hushabyme", + "zhouytforever", + "zhengwei" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/ReduceRight": { - "modified": "2020-10-23T11:37:43.387Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable": { + "modified": "2020-10-15T21:49:33.460Z", "contributors": [ - "zhuangyin", - "RainSlide", - "SageX", - "C-boyi", - "fscholz", - "xgqfrms-GitHub", - "micheal-death", - "Menq", - "teoli", - "AlexChao", - "wilsoncook" + "Ende93", + "zhengwei" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/concat": { - "modified": "2020-10-15T21:07:00.501Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/iterator": { + "modified": "2020-10-15T21:36:42.166Z", "contributors": [ - "likev", - "SageX", - "qiannianchong25", "zhangchen", - "fscholz", - "lijinwenhg", - "web-gm", - "fisker", - "badfl", - "xgqfrms-GitHub", "Ende93", - "Aralic", - "borishuai", "ziyunfei", - "teoli", - "Chajn" + "Jacksunwei" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": { - "modified": "2020-10-15T21:17:18.640Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/keyFor": { + "modified": "2020-10-16T06:56:40.936Z", "contributors": [ - "yayaxueyu", - "ZL1019", - "RainSlide", - "fscholz", - "futurefeeling", - "hongxu.Wei", - "fisker", - "Non-professionalIFE", - "xgqfrms-GitHub", - "micheal-death", - "gaoupon", - "Andself", - "Ende93", - "chendatony31", - "crowphy", - "teoli", - "ziyunfei", - "Oatn" + "le-phq", + "zh244135370", + "SphinxKnight", + "purple_force", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/entries": { - "modified": "2020-10-15T21:07:50.512Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/match": { + "modified": "2020-10-15T21:49:57.252Z", "contributors": [ - "Harry-Zhao", - "fscholz", - "futurefeeling", - "ywjco", - "xgqfrms-GitHub", - "AlexChao", - "teoli", - "ziyunfei", - "yanhaijing1234" + "RainSlide", + "Ende93" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/every": { - "modified": "2020-10-15T21:17:20.643Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/matchAll": { + "modified": "2020-10-15T22:18:46.613Z", "contributors": [ - "qianmo", - "c1er", - "RainSlide", - "genezx", - "DYERPH", - "fscholz", - "futurefeeling", - "banli17", - "zhang-hongwei", - "janason.yang", - "ziyunfei", - "LYF-MIHO", - "AlexChao", - "teoli", - "Oatn" + "Nodiff" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/fill": { - "modified": "2020-10-15T21:26:52.543Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/replace": { + "modified": "2020-10-15T21:56:21.976Z", "contributors": [ - "fanerge", - "zhangchen", - "fisker", - "linzx1993", - "tiansh", - "xhlsrj", - "micheal-death", - "sqchenxiyuan", - "xgqfrms-GitHub", "Ende93", - "ziyunfei", - "teoli" + "cuji" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/filter": { - "modified": "2020-10-15T21:17:27.613Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/search": { + "modified": "2020-11-17T03:44:46.302Z", "contributors": [ - "alexzedheng", - "Martin-Shao", - "RainSlide", - "zhangchen", - "badfl", - "zhuangyin", - "futurefeeling", - "ywjco", - "RGSS3", - "yuyongjun123", - "zhanglongdream", - "xgqfrms-GitHub", - "mooyxu", - "Gauch", - "Si-Monster", - "sartrey", - "AlexChao", - "ziyunfei", - "teoli", - "Oatn" + "KaiserZh", + "ufolux" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/find": { - "modified": "2020-10-15T21:17:19.858Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/species": { + "modified": "2020-10-15T21:51:11.135Z", "contributors": [ - "canyi1942", - "Harry-Zhao", - "zhangchen", - "Spaghet-Ti", - "futurefeeling", - "Vevlins", - "banli17", - "jiankian", - "hughfenghen", - "graysongs", "Ende93", - "zhuangyin", - "xiaojunjor", - "xgqfrms-GitHub", - "iNahoo", - "Kennytian", - "OmniP", - "ngtmuzi", - "kkzhang", - "teoli", - "huyue", - "ziyunfei", - "Oatn" + "Hushabyme" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/findIndex": { - "modified": "2020-10-15T21:25:37.656Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/split": { + "modified": "2020-08-29T01:24:33.903Z", "contributors": [ - "frankfang1990", - "simonzhao", - "fscholz", - "jiankian", - "big-dinner", - "18820486093", - "zhangchen", - "xiaojunjor", - "xgqfrms-GitHub", - "DearZui", - "ngtmuzi", - "SakuraNeko", - "teoli", - "ziyunfei" + "vent", + "Hushabyme", + "_da" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/flat": { - "modified": "2020-11-23T21:40:15.634Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive": { + "modified": "2020-10-15T21:51:09.142Z", "contributors": [ - "RolkerMan", - "zhuangyin", - "yadongxie150", - "0uzu0", - "youcanping", - "andycao", - "SageX", - "lovefengruoqing", - "RainSlide", - "hillterry", - "Kemper-Diao", - "dr2009", - "fscholz", - "fisker", - "Braised-Cakes" + "baooab", + "Mactaivsh", + "Hushabyme" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/flatMap": { - "modified": "2020-11-30T01:43:38.078Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/toSource": { + "modified": "2019-09-06T06:31:54.610Z", "contributors": [ - "zyq", - "BadmasterY", - "SageX", - "ZzqiZQute", - "a81965689", - "RainSlide", - "rxliuli", - "LiuYuan", - "Channely", - "zhixudong666", - "baylin87" + "teoli", + "purple_force" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/forEach": { - "modified": "2020-10-15T21:07:41.999Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/toString": { + "modified": "2019-03-23T23:13:48.406Z", + "contributors": [ + "SphinxKnight", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag": { + "modified": "2019-04-22T09:04:43.680Z", "contributors": [ - "inlym", - "RainSlide", - "SageX", - "yuwei", - "HermitSun", - "zhangchen", - "hhxxhg", - "fscholz", - "futurefeeling", - "LinLshare", - "gossling", - "bibi941", - "xgqfrms-GitHub", - "lssbq", - "voidzhou", - "kameii", - "Liyunsheng", - "TomIsion", - "helloguangxue", - "Ende93", - "Harvesty", - "AlexChao", "ziyunfei", - "teoli", - "yanhaijing1234" + "Hushabyme" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/from": { - "modified": "2020-10-15T21:27:52.328Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/unscopables": { + "modified": "2020-10-15T21:51:10.976Z", "contributors": [ - "cellinlab", - "RainSlide", - "WhiteMind", - "SageX", - "tc_dreamer", - "EmmaYXY", - "zppro", - "smallbag", - "fscholz", - "hongxu.Wei", - "banli17", + "Ende93", "ywjco", - "Jat", - "xgqfrms-GitHub", - "jessie-zly", - "spicyboiledfish", + "Hushabyme" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Symbol/valueOf": { + "modified": "2019-03-23T23:13:43.496Z", + "contributors": [ + "SphinxKnight", + "ziyunfei" + ] + }, + "Web/JavaScript/Reference/Global_Objects/SyntaxError": { + "modified": "2019-08-07T05:20:14.990Z", + "contributors": [ "Ende93", - "kdex", - "micheal-death", - "xiaokk06", - "helloguangxue", - "jiraiya", - "LinusYu", - "ngtmuzi", "yenshen", - "ziyunfei", - "tiansh" + "Mingun" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/includes": { - "modified": "2020-10-15T21:30:09.625Z", + "Web/JavaScript/Reference/Global_Objects/TypeError": { + "modified": "2020-10-15T21:34:35.462Z", "contributors": [ - "FrankYuanhao", - "hjxtclm", - "zheng1013757145", - "vaynewang", - "RainSlide", - "Warden", - "NiroDu", - "fscholz", - "futurefeeling", - "hongxu.Wei", - "badfl", - "hua03", - "kdex", - "xgqfrms-GitHub", - "kameii", - "lizhongyi", + "Tao-Quixote", "Ende93", - "ziyunfei" + "shajiquan" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/indexOf": { - "modified": "2020-10-15T21:26:12.959Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray": { + "modified": "2020-10-15T21:25:05.655Z", "contributors": [ - "SageX", - "Xmader", - "fscholz", - "futurefeeling", - "jiankian", - "big-dinner", + "knightyun", + "9-lives", + "tangtangtangtangtang", + "taoyouh", + "Jiang-Xuan", + "Gintoki", "xgqfrms-GitHub", - "lanezhao", - "keqingrong", + "chenyang", + "liyongleihf2006", "Ende93", - "paddingme", - "AlexChao", - "ziyunfei", - "focus", "teoli", - "eric.yuan" + "David_Li" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/isArray": { - "modified": "2020-10-15T21:02:37.096Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator": { + "modified": "2019-03-23T22:19:18.717Z", "contributors": [ - "SageX", - "Frederick-S", - "fscholz", - "zhangsenhua", - "yenshen", - "xgqfrms-GitHub", - "ToWorkit", - "Dcfm", - "xiaokk06", - "Ende93", - "ziyunfei", - "teoli", - "paddingme" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/join": { - "modified": "2020-10-15T21:05:15.988Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/@@species": { + "modified": "2019-03-23T22:19:06.809Z", "contributors": [ - "SageX", - "Heaan", - "zhangchen", - "fscholz", - "futurefeeling", - "xgqfrms-GitHub", - "badfl", - "helloguangxue", - "yenshen", - "saintwinkle", - "AlexChao", - "ziyunfei", - "teoli" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/keys": { - "modified": "2020-10-15T21:32:21.834Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT": { + "modified": "2019-03-23T22:52:00.851Z", "contributors": [ - "zhangchen", - "fscholz", - "futurefeeling", - "LemonGirl", - "micheal-death", - "xgqfrms-GitHub", - "ziyunfei", - "200OK" + "iFish" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": { - "modified": "2020-10-15T21:29:02.691Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/buffer": { + "modified": "2019-03-23T22:19:06.244Z", "contributors": [ - "SageX", - "fscholz", - "futurefeeling", - "badfl", - "ywjco", - "AlexChao", - "teoli" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/length": { - "modified": "2020-10-15T21:21:14.308Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength": { + "modified": "2019-03-23T22:19:10.941Z", "contributors": [ - "binarization", - "fscholz", - "fisker", - "jeneser", - "shaodahong", - "The-End-Hero", - "yenshen", - "AlexChao", - "ziyunfei", - "teoli" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/map": { - "modified": "2020-10-15T21:07:20.691Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset": { + "modified": "2019-03-23T22:19:08.934Z", "contributors": [ - "fscholz", - "Zzc19970910", - "Slartbartfast1", - "Jayly", - "ooo1l", - "petrewoo", - "SageX", - "old2sun", - "BingerWeb", - "zhangchen", - "ssttii", - "fengkx", - "xgqfrms-GitHub", - "W4n9Hu1", - "hooozen", - "Ts799498164", - "zhuangyin", - "righttoe", - "notmaster", - "Ende93", - "niices", - "JinxiuLee", - "ziyunfei", - "helinjiang", - "Young-Wang", - "xiaomingming", - "AlexChao", - "teoli" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/of": { - "modified": "2020-10-15T21:17:21.107Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/copyWithin": { + "modified": "2020-03-06T04:49:17.530Z", "contributors": [ - "chunfeng08", - "fscholz", - "mingttong", - "FunnyZ", - "micheal-death", - "enem", - "xgqfrms-GitHub", - "Ende93", - "yenshen", - "ziyunfei", - "teoli", - "Oatn" + "knightyun", + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/pop": { - "modified": "2020-10-15T21:21:08.570Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/entries": { + "modified": "2019-03-23T22:19:07.170Z", "contributors": [ - "fscholz", - "Spaghet-Ti", - "ndNovaDev", - "micheal-death", - "xgqfrms-GitHub", - "ysneo", - "AlexChao", - "ziyunfei", - "teoli" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/prototype": { - "modified": "2020-10-15T21:25:06.780Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/every": { + "modified": "2019-03-23T22:19:10.485Z", "contributors": [ - "TonyYu2015", - "fscholz", - "abc45628", - "xgqfrms-GitHub", - "micheal-death", - "ziyunfei", - "WangXiZhu", - "zhen", - "pd4d10", - "teoli", - "charlie", - "andy12530", - "sleepholic" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/push": { - "modified": "2020-10-15T21:17:19.272Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/fill": { + "modified": "2019-03-23T22:11:01.372Z", "contributors": [ - "Huauauaa", - "L9m", - "fscholz", - "lizhonggang", - "Spikef", - "shery", - "micheal-death", - "xgqfrms-GitHub", - "Ende93", - "yenshen", - "AlexChao", - "ziyunfei", - "teoli", - "Oatn" + "benpigchu" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/reverse": { - "modified": "2020-10-15T21:17:25.177Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/filter": { + "modified": "2019-03-23T22:19:16.643Z", "contributors": [ - "jingchaocheng", - "SageX", - "huxinsen", - "ifredom", - "fscholz", - "futurefeeling", - "xgqfrms-GitHub", - "Ende93", - "AlexChao", - "ziyunfei", - "teoli", - "Oatn" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/shift": { - "modified": "2020-10-15T21:26:52.357Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/find": { + "modified": "2019-03-23T22:19:12.001Z", "contributors": [ - "SageX", - "jinger7281", - "fscholz", - "badfl", - "LemonGirl", - "micheal-death", - "xgqfrms-GitHub", - "Ende93", - "pd4d10", - "teoli", - "AlexChao", - "ziyunfei", - "endlesswind" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/slice": { - "modified": "2020-11-30T04:00:58.912Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/findIndex": { + "modified": "2019-03-23T22:19:14.644Z", "contributors": [ - "shery", - "Zzt-G", - "RainSlide", - "Fire1nRain", - "Mrdapeng", - "MoYuLing", - "Jiang-Xuan", - "524119574", - "xgqfrms-GitHub", - "zhuangyin", - "yiyaxueyu", - "k644606347", - "lihx_hit", - "MechanicianW", - "FlowingRiver", - "GTyexing", - "Ende93", - "aximario", - "helloguangxue", - "AlexChao", - "ziyunfei", - "teoli" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/some": { - "modified": "2020-10-15T21:26:00.318Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/forEach": { + "modified": "2020-10-15T21:51:57.505Z", "contributors": [ - "SageX", - "simonzhao", - "Zohar727", - "Kuroo", - "lzszone", - "gqbre", - "lmislm", - "KangKai-fe", - "zhangchen", - "xgqfrms-GitHub", - "AlexChao", - "ziyunfei", - "teoli", - "yanhaijing1234" + "laampui", + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/sort": { - "modified": "2020-10-15T21:17:18.762Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/from": { + "modified": "2020-10-15T21:57:11.137Z", "contributors": [ - "810307015", - "xgqfrms", - "zhangchen", - "kaojistream", - "fscholz", - "ywjco", - "Mr-Li-admin", - "NuclearBlast", - "righttoe", - "JackFeng", - "MeCKodo", - "micheal-death", - "Feel-Joy", - "houbx", - "xgqfrms-GitHub", - "ziyunfei", - "stonewen", - "wuzhenquan", - "helloguangxue", - "Ende93", - "helinjiang", - "dameinliu", - "XingxianLI", - "tiansh", - "teoli", - "Oatn" + "knightyun", + "nekronhuang", + "pasturn" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/splice": { - "modified": "2020-10-15T21:28:59.144Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/includes": { + "modified": "2019-03-23T22:19:11.643Z", + "contributors": [ + "wizardforcel" + ] + }, + "Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf": { + "modified": "2019-03-23T22:20:08.080Z", "contributors": [ - "ThornWu", - "ttxs69", - "DouglasRyan", - "oopsguy", - "RainSlide", - "ifredom", - "zhuangyin", - "SphinxKnight", - "VinciXie", - "daijie", - "yonoel", - "dpwwwq", - "shibomeng", - "fscholz", - "Jiang-Xuan", - "zhipeng001", - "lemonboy233", - "ywjco", - "badfl", - "hawtim", - "Lemon-jie", - "KMKNKK", - "frankfang1990", - "FlySnails", "xgqfrms-GitHub", - "NNNaix", - "Lemon-c", - "HUxiaoAlinNG", - "Rising_sun", - "w-halo", - "FlowingRiver", - "me-code", - "Ende93", - "Qin", - "huyue" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/toLocaleString": { - "modified": "2020-10-15T21:29:06.488Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/join": { + "modified": "2019-03-23T22:19:12.294Z", "contributors": [ - "fscholz", - "zhangchen", - "badfl", - "zxhycxq", - "AlexChao" + "wizardforcel" + ] + }, + "Web/JavaScript/Reference/Global_Objects/TypedArray/keys": { + "modified": "2019-03-23T22:19:18.105Z", + "contributors": [ + "wizardforcel" + ] + }, + "Web/JavaScript/Reference/Global_Objects/TypedArray/lastIndexOf": { + "modified": "2019-03-23T22:19:04.259Z", + "contributors": [ + "wizardforcel" + ] + }, + "Web/JavaScript/Reference/Global_Objects/TypedArray/length": { + "modified": "2019-03-23T22:19:16.206Z", + "contributors": [ + "wizardforcel" + ] + }, + "Web/JavaScript/Reference/Global_Objects/TypedArray/map": { + "modified": "2019-03-23T22:19:16.989Z", + "contributors": [ + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/toSource": { - "modified": "2020-10-15T21:21:06.880Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/name": { + "modified": "2019-03-23T22:27:51.557Z", "contributors": [ - "fscholz", - "badfl", - "teoli", - "ziyunfei" + "lsvih" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/toString": { - "modified": "2020-10-15T21:29:03.089Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/of": { + "modified": "2019-03-23T22:20:06.649Z", "contributors": [ - "zhangchen", - "fscholz", - "AlexChao" + "xgqfrms-GitHub" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/unshift": { - "modified": "2020-10-15T21:23:36.187Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/reduce": { + "modified": "2019-03-23T22:22:18.240Z", "contributors": [ - "benngai123", - "No_risk_atpresent", - "jinger7281", - "heeronchang", - "RainSlide", - "L9m", - "zhangchen", - "fscholz", - "xgqfrms-GitHub", - "AlexChao", - "ziyunfei", - "teoli", - "xfeng" + "wizardforcel", + "zurl" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/values": { - "modified": "2020-10-15T21:37:23.141Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/reduceRight": { + "modified": "2019-03-23T22:19:12.473Z", "contributors": [ - "Agcaiyun", - "johnao", - "RainSlide", - "SageX", - "fscholz", - "ywjco", - "redoc", - "xgqfrms-GitHub", - "Ende93", - "AlexChao", - "KingMario" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { - "modified": "2020-10-15T21:27:45.114Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/reverse": { + "modified": "2019-03-23T22:19:12.148Z", "contributors": [ - "woshiqiang1", - "wallena3", - "Jiang-Xuan", - "Terry.Qiao", - "xgqfrms-GitHub", - "kameii", - "liyongleihf2006", - "maicss", - "teoli", - "Jijie.Chen", - "ziyunfei" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species": { - "modified": "2020-10-15T21:52:04.532Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/set": { + "modified": "2020-10-11T08:53:21.212Z", "contributors": [ - "fscholz", - "Ende93" + "xyzingh", + "knightyun", + "Kylin.this" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength": { - "modified": "2020-10-15T21:37:49.462Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/slice": { + "modified": "2020-10-15T21:59:28.967Z", "contributors": [ - "fscholz", - "kameii", - "fred4444source" + "luojia", + "lvyue" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView": { - "modified": "2020-10-15T21:37:49.247Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/some": { + "modified": "2020-10-15T22:06:36.897Z", "contributors": [ - "Dyon", - "knightyun", - "fscholz", - "yunl819", - "fred4444source" + "rockSandy" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype": { - "modified": "2020-10-15T21:37:49.333Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/sort": { + "modified": "2019-03-23T22:19:06.667Z", "contributors": [ - "fscholz", - "kameii", - "liyongleihf2006", - "fred4444source" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice": { - "modified": "2020-10-15T21:51:34.058Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/subarray": { + "modified": "2020-10-15T22:06:55.665Z", "contributors": [ - "fscholz", - "kameii" + "pea3nut" ] }, - "Web/JavaScript/Reference/Global_Objects/AsyncFunction": { - "modified": "2020-10-15T21:50:47.192Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/toLocaleString": { + "modified": "2020-10-15T22:07:03.779Z", "contributors": [ - "Terry.Qiao", - "xgqfrms-GitHub", - "Ende93", - "_da" + "taoyouh" ] }, - "Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype": { - "modified": "2020-10-15T21:51:59.203Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/toString": { + "modified": "2019-03-23T22:20:22.038Z", "contributors": [ - "daijie", - "fscholz", - "wizardforcel", - "xygcxy" + "kameii" ] }, - "Web/JavaScript/Reference/Global_Objects/AsyncIterator": { - "modified": "2020-10-15T22:28:09.380Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/values": { + "modified": "2019-03-23T22:19:17.373Z", "contributors": [ - "lxuewu" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics": { - "modified": "2020-10-15T21:47:39.816Z", + "Web/JavaScript/Reference/Global_Objects/URIError": { + "modified": "2020-10-15T21:58:35.369Z", "contributors": [ - "xgqfrms", - "zhangchen", - "Terry.Qiao", - "LawrenceChenPro", - "JianrongYu", - "Ende93", - "Hearmen", - "weishuaikun", - "Spring_Winter_Wine" + "Mal_akh", + "Tao-Quixote", + "HCH.no1" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/add": { - "modified": "2020-10-15T21:52:07.041Z", + "Web/JavaScript/Reference/Global_Objects/Uint16Array": { + "modified": "2020-10-15T22:30:29.389Z", "contributors": [ - "fscholz", - "RoXoM", - "JianrongYu", - "Ende93" + "elfpower" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/and": { - "modified": "2020-10-15T21:52:05.452Z", + "Web/JavaScript/Reference/Global_Objects/Uint32Array": { + "modified": "2020-10-15T21:30:53.115Z", "contributors": [ - "fscholz", - "Ende93" + "Dorence", + "icepro", + "liyongleihf2006", + "chyee" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange": { - "modified": "2020-10-15T21:52:07.140Z", + "Web/JavaScript/Reference/Global_Objects/Uint8Array": { + "modified": "2020-10-15T21:36:50.602Z", "contributors": [ - "fscholz", - "Ende93" + "Maiko", + "wizardforcel", + "WhiteMind", + "Meteormatt", + "linus_ding" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/exchange": { - "modified": "2020-10-15T21:52:04.443Z", + "Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray": { + "modified": "2020-08-30T01:01:24.154Z", "contributors": [ - "fscholz", - "Ende93" + "vent", + "xhlsrj" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree": { - "modified": "2020-10-15T21:52:17.441Z", + "Web/JavaScript/Reference/Global_Objects/WeakMap": { + "modified": "2020-10-15T21:06:55.119Z", "contributors": [ - "fscholz", - "eyfor", - "Mocuishle" + "Venus14", + "wallena3", + "Ende93", + "WangLeto", + "BingerWeb", + "lizheming", + "hhxxhg", + "xgqfrms-GitHub", + "kameii", + "lvjs", + "Cattla", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/load": { - "modified": "2020-10-15T21:58:11.479Z", + "Web/JavaScript/Reference/Global_Objects/WeakMap/clear": { + "modified": "2019-03-23T22:23:38.007Z", "contributors": [ - "fscholz", - "Mukti" + "teoli", + "xgqfrms-GitHub", + "xx1124961758", + "xdsnet" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/notify": { - "modified": "2020-10-15T22:21:48.950Z", + "Web/JavaScript/Reference/Global_Objects/WeakMap/delete": { + "modified": "2019-03-23T23:13:54.509Z", "contributors": [ - "lizhongzhen11", - "lifankohome" + "SphinxKnight", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/or": { - "modified": "2020-10-15T22:21:50.539Z", + "Web/JavaScript/Reference/Global_Objects/WeakMap/get": { + "modified": "2019-03-23T22:30:00.497Z", "contributors": [ - "lifankohome" + "Hushabyme", + "Cattla", + "legend80s" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/store": { - "modified": "2020-10-15T21:57:10.970Z", + "Web/JavaScript/Reference/Global_Objects/WeakMap/has": { + "modified": "2019-03-23T22:23:27.973Z", "contributors": [ - "fscholz", - "zouyang1230", - "shenrongliu" + "xdsnet" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/sub": { - "modified": "2020-10-15T22:24:45.287Z", + "Web/JavaScript/Reference/Global_Objects/WeakMap/set": { + "modified": "2020-10-15T21:50:40.762Z", "contributors": [ - "BadmasterY" + "Ende93", + "xdsnet" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/wait": { - "modified": "2020-10-15T22:21:34.534Z", + "Web/JavaScript/Reference/Global_Objects/WeakRef": { + "modified": "2020-11-04T03:38:15.371Z", "contributors": [ - "hanalice", - "Jinyingyi" + "moniang", + "DIFFICULTTOGIVE" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/xor": { - "modified": "2020-10-15T22:24:45.064Z", + "Web/JavaScript/Reference/Global_Objects/WeakRef/deref": { + "modified": "2020-11-04T03:35:50.870Z", "contributors": [ - "BadmasterY" + "moniang" ] }, - "Web/JavaScript/Reference/Global_Objects/BigInt": { - "modified": "2020-10-15T22:12:07.852Z", + "Web/JavaScript/Reference/Global_Objects/WeakSet": { + "modified": "2020-10-15T21:26:50.454Z", "contributors": [ - "YouHeng", - "BadmasterY", - "dstyxy", - "fefe982", - "ddztomcat", - "c412216887", - "lovue" + "wallena3", + "earlymeme", + "xgqfrms-GitHub", + "Go7hic", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/BigInt/BigInt": { - "modified": "2020-10-15T22:25:55.480Z", + "Web/JavaScript/Reference/Global_Objects/WeakSet/add": { + "modified": "2019-03-23T22:20:53.399Z", "contributors": [ - "wallena3" + "marsgt", + "Hushabyme" ] }, - "Web/JavaScript/Reference/Global_Objects/BigInt/asIntN": { - "modified": "2020-10-15T22:24:46.833Z", + "Web/JavaScript/Reference/Global_Objects/WeakSet/clear": { + "modified": "2019-03-23T22:18:46.466Z", "contributors": [ - "BadmasterY" + "teoli", + "Ende93" ] }, - "Web/JavaScript/Reference/Global_Objects/BigInt/asUintN": { - "modified": "2020-10-15T22:24:47.578Z", + "Web/JavaScript/Reference/Global_Objects/WeakSet/delete": { + "modified": "2020-03-17T12:14:42.437Z", "contributors": [ - "BadmasterY" + "zhenzhenChange", + "Hushabyme" ] }, - "Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString": { - "modified": "2020-10-15T22:24:47.615Z", + "Web/JavaScript/Reference/Global_Objects/WeakSet/has": { + "modified": "2019-03-23T22:21:07.252Z", "contributors": [ - "BadmasterY" + "Hushabyme" ] }, - "Web/JavaScript/Reference/Global_Objects/BigInt/toString": { - "modified": "2020-10-15T22:24:48.189Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly": { + "modified": "2020-10-15T21:53:08.592Z", "contributors": [ - "BadmasterY" + "wallena3", + "Chesn", + "Gaohaoyang", + "zhangchen", + "chyingp", + "JianrongYu" ] }, - "Web/JavaScript/Reference/Global_Objects/BigInt/valueOf": { - "modified": "2020-10-15T22:24:48.266Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError": { + "modified": "2020-10-15T22:26:35.137Z", "contributors": [ - "BadmasterY" + "wallena3" ] }, - "Web/JavaScript/Reference/Global_Objects/BigInt64Array": { - "modified": "2020-10-15T22:17:01.806Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/Global": { + "modified": "2020-11-13T02:45:14.451Z", "contributors": [ - "vent", - "SDUTWSL" + "yujiaao", + "yxwsbobo" ] }, - "Web/JavaScript/Reference/Global_Objects/BigUint64Array": { - "modified": "2020-10-15T22:20:32.429Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance": { + "modified": "2020-10-23T07:01:43.345Z", "contributors": [ - "liruiqi" + "liguorain", + "yxwsbobo", + "SphinxKnight" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean": { - "modified": "2020-11-05T03:24:53.922Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory": { + "modified": "2020-10-15T22:06:20.710Z", "contributors": [ - "SphinxKnight", - "184289542", - "Yayure", - "snail-xx", - "zeyongTsai", - "Terry.Qiao", - "comyn", - "zhangchen", - "SmluVFpI", - "righttoe", - "Hugh", - "xgqfrms-GitHub", - "Folgore", - "emctoo", - "slientomorrr", - "yenshen", - "ziyunfei", - "teoli" + "Zhang-Junzhi", + "sunwanxin213" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean/prototype": { - "modified": "2020-10-15T21:06:58.693Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/Module": { + "modified": "2020-10-15T22:00:19.792Z", "contributors": [ - "zhangchen", - "keller0", - "teoli", - "AlexChao", - "ziyunfei" + "dondevi" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean/toSource": { - "modified": "2020-10-15T21:51:59.093Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError": { + "modified": "2020-10-15T22:26:27.221Z", "contributors": [ - "fscholz", - "Grizzly-Eric" + "wallena3" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean/toString": { - "modified": "2020-10-15T21:28:54.689Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/Table": { + "modified": "2020-11-04T03:44:08.051Z", "contributors": [ - "fscholz", - "zhangchen", - "yenshen", - "AlexChao" + "moniang", + "hurrytospring" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean/valueOf": { - "modified": "2020-10-15T21:28:53.640Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/compile": { + "modified": "2020-10-15T21:58:44.128Z", "contributors": [ - "fscholz", - "zhangchen", - "yenshen", - "AlexChao" + "kungfucode-rex" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView": { - "modified": "2020-10-15T21:34:38.297Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming": { + "modified": "2020-10-15T22:15:30.451Z", "contributors": [ - "wenshui2008", - "RainSlide", - "jason-grimm", - "Jiang-Xuan", - "Terry.Qiao", - "liyongleihf2006", - "Taoja", - "xiaokk06", - "Ende93", - "NIGHTEAGLE" + "Cyandev" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/buffer": { - "modified": "2020-10-15T21:52:04.673Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate": { + "modified": "2020-10-15T21:57:59.458Z", "contributors": [ - "fscholz", - "wizardforcel", - "holynewbie" + "wallena3", + "Hedgehog", + "airt", + "kungfucode-rex" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/byteLength": { - "modified": "2020-10-15T21:52:04.538Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming": { + "modified": "2020-10-15T22:11:30.410Z", "contributors": [ - "fscholz", - "wizardforcel", - "holynewbie" + "Xiaoming666" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/byteOffset": { - "modified": "2020-10-15T21:52:05.195Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/validate": { + "modified": "2020-10-15T22:15:29.365Z", "contributors": [ - "fscholz", - "wizardforcel", - "holynewbie" + "Cyandev" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getBigInt64": { - "modified": "2020-10-15T22:21:33.559Z", + "Web/JavaScript/Reference/Global_Objects/decodeURI": { + "modified": "2020-10-15T21:22:04.033Z", "contributors": [ - "fade-vivida", - "SilverTime" + "Mookiepiece", + "IreneByron", + "laampui", + "xgqfrms-GitHub", + "PoppinL", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getBigUint64": { - "modified": "2020-10-15T22:22:15.035Z", + "Web/JavaScript/Reference/Global_Objects/decodeURIComponent": { + "modified": "2020-03-12T19:39:38.099Z", "contributors": [ - "jinger7281" + "c1er", + "laampui", + "xgqfrms-GitHub", + "PoppinL", + "maicss", + "Ende93", + "SphinxKnight", + "AlexChao" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getFloat32": { - "modified": "2020-10-15T21:49:48.544Z", + "Web/JavaScript/Reference/Global_Objects/encodeURI": { + "modified": "2020-03-12T19:39:40.462Z", "contributors": [ - "wenshui2008", - "758915145", - "fscholz", - "Taoja" + "xgqfrms-GitHub", + "HelloFun", + "PoppinL", + "leedorian", + "baiya", + "FredWe", + "SphinxKnight", + "AlexChao" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getFloat64": { - "modified": "2020-10-15T21:49:48.242Z", + "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": { + "modified": "2020-10-15T21:29:33.137Z", "contributors": [ - "758915145", - "fscholz", - "Taoja" + "zhangchen", + "oscarwang913", + "inlym", + "maiff", + "HelloFun", + "PoppinL", + "Roland_Reed", + "fortime", + "SphinxKnight", + "AlexChao" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getInt16": { - "modified": "2020-10-15T21:49:47.595Z", + "Web/JavaScript/Reference/Global_Objects/escape": { + "modified": "2020-03-12T19:40:29.669Z", "contributors": [ - "knightyun", - "758915145", - "fscholz", - "Taoja" + "1renhaO", + "yenshen" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getInt32": { - "modified": "2020-10-15T21:49:48.330Z", + "Web/JavaScript/Reference/Global_Objects/eval": { + "modified": "2020-10-15T21:15:16.670Z", "contributors": [ - "758915145", + "amzrk2", + "mrzhouxu", + "chrislung", + "laampui", + "yasen-wolf", + "RainSlide", + "jinhuiWong", + "Akiq2016", + "extending", + "icepro", + "eeeeeeeason", + "JX-Zhuang", + "yanpengxiang", + "SiberianMark", + "Jiang-Xuan", + "Hugh", + "Binly42", + "ziyunfei", "fscholz", - "Taoja" + "qianjiahao", + "teoli", + "huguowei", + "Mgjbot", + "Laser" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getInt8": { - "modified": "2020-10-15T21:44:13.950Z", + "Web/JavaScript/Reference/Global_Objects/globalThis": { + "modified": "2020-10-15T22:10:51.438Z", "contributors": [ - "758915145", + "MinimalistYing", + "RainSlide", + "wallena3", + "kangkai0124", + "SphinxKnight", + "LEORChn", "fscholz", - "Taoja" + "Jack.Works" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getUint16": { - "modified": "2020-10-15T21:49:47.729Z", + "Web/JavaScript/Reference/Global_Objects/isFinite": { + "modified": "2020-10-15T21:24:26.397Z", "contributors": [ - "758915145", - "fscholz", - "Taoja" + "rulanfenghua", + "littcc", + "Jiang-Xuan", + "golegen", + "SphinxKnight", + "AlexChao", + "teoli", + "zhangyaochun1987" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getUint32": { - "modified": "2020-10-15T21:49:47.551Z", + "Web/JavaScript/Reference/Global_Objects/isNaN": { + "modified": "2020-10-15T21:28:42.019Z", "contributors": [ - "758915145", - "fscholz", - "Taoja" + "Ende93", + "ubuntugx", + "bluetata", + "INCHMAN", + "xgqfrms-GitHub", + "mt001mt", + "Hugh", + "cekingLu", + "wanghaoran", + "Skyang", + "yenshen", + "yufeng", + "SphinxKnight", + "AlexChao" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getUint8": { - "modified": "2020-10-15T21:44:16.655Z", + "Web/JavaScript/Reference/Global_Objects/null": { + "modified": "2020-10-15T21:21:19.908Z", "contributors": [ - "758915145", - "fscholz", - "Taoja" + "wallena3", + "RainSlide", + "GreedyPig", + "zxsunrise", + "zhuangyin", + "Jiang-Xuan", + "SphinxKnight", + "ziyunfei", + "AlexChao", + "teoli" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/prototype": { - "modified": "2020-10-15T21:38:02.121Z", + "Web/JavaScript/Reference/Global_Objects/parseFloat": { + "modified": "2020-10-15T21:21:34.049Z", "contributors": [ - "fscholz", - "liyongleihf2006", - "Taoja", - "mzhejiayu" + "laampui", + "rulanfenghua", + "maoyumaoxun", + "ywjco", + "xgqfrms-GitHub", + "huguangju", + "xuzhijun", + "yenshen", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setBigInt64": { - "modified": "2020-10-15T22:24:55.568Z", + "Web/JavaScript/Reference/Global_Objects/parseInt": { + "modified": "2020-12-04T02:14:06.997Z", "contributors": [ - "wenshui2008" + "熊英明", + "liuy666", + "zhuguibiao", + "SAYHISAYHI", + "jjc", + "frankfang1990", + "pantao", + "liuzhengdong", + "lmislm", + "Roland_Reed", + "Eurkidu", + "Mars687", + "cyancity", + "BrightLD", + "hua03", + "ywjco", + "lcxmaple", + "weicaiyue", + "righttoe", + "xgqfrms-GitHub", + "xiaohangJose", + "PengyuanJiang", + "xuzhijun", + "du0m0", + "XingxianLI", + "teoli", + "AlexChao", + "Mickeyboy" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setBigUint64": { - "modified": "2020-10-15T22:24:53.419Z", + "Web/JavaScript/Reference/Global_Objects/undefined": { + "modified": "2020-10-15T21:21:19.165Z", "contributors": [ - "wenshui2008" + "wallena3", + "lizhongzhen11", + "ywjco", + "fzhw88", + "zhuangyin", + "WJ941", + "ervinewell", + "kameii", + "Jiang-Xuan", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setFloat32": { - "modified": "2020-10-15T21:49:50.076Z", + "Web/JavaScript/Reference/Global_Objects/unescape": { + "modified": "2020-12-10T01:27:00.332Z", "contributors": [ - "fscholz", - "Taoja" + "stefango", + "zhangchen", + "ZivHe", + "Jiang-Xuan", + "Ende93" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setFloat64": { - "modified": "2020-10-15T21:49:50.505Z", + "Web/JavaScript/Reference/Global_Objects/uneval": { + "modified": "2020-10-15T21:40:49.845Z", "contributors": [ - "farteryhr", - "fscholz", - "Taoja" + "zhangchen", + "imnodb", + "codert", + "Vincent.Yu" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setInt16": { - "modified": "2020-10-15T21:49:50.736Z", + "Web/JavaScript/Reference/Iteration_protocols": { + "modified": "2020-11-16T00:41:30.233Z", "contributors": [ - "fscholz", - "Taoja" + "wubaodong", + "Mr_kaze", + "Clarkkkk", + "DengZhihao", + "RainSlide", + "wangxiujuni", + "houzp", + "edward12699", + "luohe", + "Shigma", + "yueshuiniao", + "isLishude", + "xgqfrms-GitHub", + "kdex", + "bnerDY", + "xgqfrms", + "m31271n.", + "jiraiya", + "harttle", + "holajiawei", + "zbinlin", + "panhezeng", + "Qcui", + "Ende93", + "ziyunfei", + "teoli" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setInt32": { - "modified": "2020-10-15T21:49:50.027Z", + "Web/JavaScript/Reference/Lexical_grammar": { + "modified": "2020-10-15T21:37:37.250Z", "contributors": [ - "fscholz", - "Taoja" + "wwj402", + "RainSlide", + "jiangxin123", + "mistoken", + "DrndwX", + "VdoG", + "eforegist", + "Hitomichan", + "jiahui", + "lunix01" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setInt8": { - "modified": "2020-10-15T21:37:32.797Z", + "Web/JavaScript/Reference/Operators": { + "modified": "2020-11-11T01:18:14.844Z", "contributors": [ - "fscholz", - "Taoja", - "mzhejiayu" + "Liugq5713", + "Ende93", + "ourai", + "zhangchen", + "zxsunrise", + "ZTFtrue", + "yangzx", + "xgqfrms-GitHub", + "imhaohao", + "Meteormatt", + "tim.liu", + "lunix01", + "Go7hic", + "yenshen", + "ziyunfei", + "teoli" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setUint16": { - "modified": "2020-10-15T21:49:49.541Z", + "Web/JavaScript/Reference/Operators/Addition_assignment": { + "modified": "2020-10-15T22:32:22.325Z", "contributors": [ - "fscholz", - "Taoja" + "xgqfrms" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setUint32": { - "modified": "2020-10-15T21:49:50.144Z", + "Web/JavaScript/Reference/Operators/Assignment": { + "modified": "2020-10-15T22:32:28.366Z", "contributors": [ - "fscholz", - "Taoja" + "longfangsong", + "hellorayza", + "yemao", + "Linuocc" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setUint8": { - "modified": "2020-10-15T21:49:48.203Z", + "Web/JavaScript/Reference/Operators/Bitwise_AND_assignment": { + "modified": "2020-10-15T22:34:19.309Z", "contributors": [ - "fscholz", - "Taoja" + "Eric_lc", + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date": { - "modified": "2020-10-19T08:07:05.768Z", + "Web/JavaScript/Reference/Operators/Bitwise_NOT": { + "modified": "2020-10-15T22:34:23.865Z", "contributors": [ - "SphinxKnight", - "songzeng2016", - "ZhangXianWei", - "johnao", - "oujielong", - "striveyan", - "fefe982", - "Mr_z", - "litmonw", - "RainSlide", - "jackylz", - "fscholz", - "VAN666", - "liuzeyafzy", - "whinc", - "sharp-c", - "distums", - "helloguangxue", - "zhang384579631", - "yenshen", - "fuchao2012", - "hikarievo", - "teoli", - "littleVege", - "AlexChao", - "ziyunfei", - "liminjun", - "confusedwu", - "Mickeyboy", - "Mgjbot" + "Eric_lc", + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive": { - "modified": "2020-10-15T22:06:53.986Z", + "Web/JavaScript/Reference/Operators/Bitwise_OR": { + "modified": "2020-10-15T22:34:22.155Z", "contributors": [ - "pea3nut" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/Date": { - "modified": "2020-10-15T22:28:18.123Z", + "Web/JavaScript/Reference/Operators/Bitwise_OR_assignment": { + "modified": "2020-10-15T22:34:21.154Z", "contributors": [ - "lztom2046" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/UTC": { - "modified": "2020-10-15T21:28:25.934Z", + "Web/JavaScript/Reference/Operators/Bitwise_XOR": { + "modified": "2020-10-15T22:34:22.385Z", "contributors": [ - "tclzcja", - "fscholz", - "Hugh", - "AlexChao" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getDate": { - "modified": "2020-10-15T21:03:50.488Z", + "Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment": { + "modified": "2020-10-15T22:34:23.846Z", "contributors": [ - "hsqin", - "fscholz", - "teoli", - "AlexChao", - "ziyunfei" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getDay": { - "modified": "2020-10-15T21:03:58.429Z", + "Web/JavaScript/Reference/Operators/Comma_Operator": { + "modified": "2020-10-15T21:32:06.908Z", "contributors": [ - "HFatBird", - "fscholz", - "teoli", - "AlexChao", - "ziyunfei" + "zhangchen", + "xgqfrms-GitHub", + "ontheway1215", + "AlexChao" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": { - "modified": "2020-10-15T21:03:49.040Z", + "Web/JavaScript/Reference/Operators/Conditional_Operator": { + "modified": "2020-10-15T21:37:34.292Z", "contributors": [ - "fscholz", + "wendy260310", + "dadan", + "KnightYin", + "pluwen", "zhangchen", - "xqin", - "teoli", - "AlexChao", - "ziyunfei" + "ziyunfei", + "Ende93", + "lunix01" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getHours": { - "modified": "2020-10-15T21:03:54.198Z", + "Web/JavaScript/Reference/Operators/Destructuring_assignment": { + "modified": "2020-10-15T21:34:33.159Z", "contributors": [ - "fscholz", - "teoli", - "AlexChao", - "ziyunfei" + "fanerge", + "kidonng", + "Aaron-Bird", + "zhuziyi", + "ZeroWhiteSmile", + "RainSlide", + "zhangchen", + "tosmaller", + "a-pple", + "FideoJ", + "xgqfrms-GitHub", + "XHMM", + "kdex", + "Jiasm", + "jerryni", + "LeoEatle", + "donyaw", + "starriv", + "TiaossuP", + "WeRDyin", + "panhezeng", + "jiahui", + "pjsong", + "zilong-thu", + "lunix01", + "ziyunfei", + "fskuok" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": { - "modified": "2020-10-15T21:03:36.395Z", + "Web/JavaScript/Reference/Operators/Division": { + "modified": "2020-10-18T03:29:08.158Z", "contributors": [ - "fscholz", - "teoli", - "AlexChao", - "ziyunfei" + "MapMaths", + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": { - "modified": "2020-10-15T21:03:39.835Z", + "Web/JavaScript/Reference/Operators/Division_assignment": { + "modified": "2020-10-15T22:34:21.674Z", "contributors": [ - "fscholz", - "teoli", - "AlexChao", - "ziyunfei" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getMonth": { - "modified": "2020-10-15T21:03:43.325Z", + "Web/JavaScript/Reference/Operators/Exponentiation": { + "modified": "2020-10-18T04:06:14.289Z", "contributors": [ - "fscholz", - "viko16", - "Ende93", - "teoli", - "AlexChao", - "ziyunfei" + "MapMaths", + "xeunglay", + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": { - "modified": "2020-10-15T21:03:45.760Z", + "Web/JavaScript/Reference/Operators/Exponentiation_assignment": { + "modified": "2020-10-15T22:34:25.557Z", "contributors": [ - "fscholz", - "teoli", - "AlexChao", - "ziyunfei" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getTime": { - "modified": "2020-10-15T21:28:11.731Z", + "Web/JavaScript/Reference/Operators/Greater_than": { + "modified": "2020-10-15T22:32:32.486Z", "contributors": [ - "YISHI", - "fscholz", - "Ende93", - "AlexChao", - "ziyunfei" + "jarirliu" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset": { - "modified": "2020-10-15T21:28:12.331Z", + "Web/JavaScript/Reference/Operators/Greater_than_or_equal": { + "modified": "2020-10-15T22:32:26.171Z", "contributors": [ - "daix6", - "fscholz", - "AlexChao" + "ziyunfei", + "shishana" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCDate": { - "modified": "2020-10-15T21:33:57.569Z", + "Web/JavaScript/Reference/Operators/Grouping": { + "modified": "2020-10-15T21:32:23.898Z", "contributors": [ - "fscholz", - "saintwinkle" + "RainSlide", + "Idealist_EZ", + "zhangchen", + "yenshen" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCDay": { - "modified": "2020-10-15T21:33:56.103Z", + "Web/JavaScript/Reference/Operators/Increment": { + "modified": "2020-11-14T04:00:24.472Z", "contributors": [ - "fscholz", - "saintwinkle" + "seanhuai", + "xgqfrms" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear": { - "modified": "2020-10-15T21:33:57.710Z", + "Web/JavaScript/Reference/Operators/Inequality": { + "modified": "2020-10-18T04:16:16.608Z", "contributors": [ - "fscholz", - "saintwinkle" + "MapMaths", + "YeahPotato" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCHours": { - "modified": "2020-10-15T21:34:04.488Z", + "Web/JavaScript/Reference/Operators/Left_shift": { + "modified": "2020-10-15T22:34:24.967Z", "contributors": [ - "fscholz", - "saintwinkle" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds": { - "modified": "2020-10-15T21:34:05.550Z", + "Web/JavaScript/Reference/Operators/Left_shift_assignment": { + "modified": "2020-10-15T22:34:28.331Z", + "contributors": [ + "laampui" + ] + }, + "Web/JavaScript/Reference/Operators/Less_than": { + "modified": "2020-10-15T22:34:22.220Z", "contributors": [ - "fscholz", - "saintwinkle" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes": { - "modified": "2020-10-15T21:34:04.468Z", + "Web/JavaScript/Reference/Operators/Less_than_or_equal": { + "modified": "2020-10-15T22:32:26.501Z", "contributors": [ - "fscholz", - "saintwinkle" + "shishana" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth": { - "modified": "2020-10-15T21:34:04.629Z", + "Web/JavaScript/Reference/Operators/Logical_AND_assignment": { + "modified": "2020-10-15T22:34:22.943Z", "contributors": [ - "fscholz", - "saintwinkle" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds": { - "modified": "2020-10-15T21:34:04.630Z", + "Web/JavaScript/Reference/Operators/Logical_NOT": { + "modified": "2020-10-15T22:34:26.449Z", "contributors": [ - "fscholz", - "saintwinkle" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getYear": { - "modified": "2020-10-15T21:28:12.583Z", + "Web/JavaScript/Reference/Operators/Logical_OR": { + "modified": "2020-10-15T22:34:22.730Z", "contributors": [ - "fscholz", - "Edith_Ren", - "teoli", - "AlexChao" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/now": { - "modified": "2020-10-15T21:21:13.943Z", + "Web/JavaScript/Reference/Operators/Logical_OR_assignment": { + "modified": "2020-10-15T22:34:21.861Z", "contributors": [ - "RainSlide", - "fscholz", - "Ende93", - "AlexChao", - "ziyunfei", - "teoli", - "StuPig" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/parse": { - "modified": "2020-10-15T21:28:30.337Z", + "Web/JavaScript/Reference/Operators/Logical_nullish_assignment": { + "modified": "2020-10-15T22:33:59.629Z", "contributors": [ - "lyh2668", - "fscholz", - "Tao-Quixote", - "hkuclion", - "distums", - "gqqnbig", - "yeliex", - "AlexChao" + "JoshOY" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/prototype": { - "modified": "2020-10-15T21:28:32.786Z", + "Web/JavaScript/Reference/Operators/Multiplication": { + "modified": "2020-10-15T22:34:23.887Z", "contributors": [ - "zhangchen", - "imgss", - "fscholz", - "regiondavid", - "mage3k", - "Cattla", - "teoli", - "AlexChao" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setDate": { - "modified": "2020-10-15T21:28:14.248Z", + "Web/JavaScript/Reference/Operators/Multiplication_assignment": { + "modified": "2020-10-15T22:34:26.770Z", "contributors": [ - "jinger7281", - "fscholz", - "AlexChao" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setFullYear": { - "modified": "2020-10-15T21:28:11.404Z", + "Web/JavaScript/Reference/Operators/Nullish_coalescing_operator": { + "modified": "2020-10-15T22:25:14.991Z", "contributors": [ - "fscholz", - "AlexChao" + "xgqfrms", + "RainSlide", + "Coink", + "ran" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setHours": { - "modified": "2020-10-15T21:28:14.385Z", + "Web/JavaScript/Reference/Operators/Object_initializer": { + "modified": "2020-10-15T21:37:33.998Z", "contributors": [ - "fscholz", - "AlexChao" + "lengjingify", + "zhangchen", + "xgqfrms-GitHub", + "slimeball", + "williamchu123", + "hitme" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds": { - "modified": "2020-10-15T21:28:19.563Z", + "Web/JavaScript/Reference/Operators/Operator_Precedence": { + "modified": "2020-09-26T23:18:03.052Z", "contributors": [ - "fscholz", - "htitme", - "AlexChao" + "taichiyi", + "Linuocc", + "Yang-yibu", + "zsirfs", + "zhangchen", + "ZQH", + "QinZhiNian", + "jianglinjie", + "xhlwill", + "maicss", + "czyin", + "Ende93", + "AlexChao", + "yenshen", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setMinutes": { - "modified": "2020-10-15T21:28:16.896Z", + "Web/JavaScript/Reference/Operators/Property_Accessors": { + "modified": "2020-10-15T21:37:38.990Z", "contributors": [ - "fscholz", - "AlexChao" + "RainSlide", + "zhangchen", + "isLishude", + "xiaojunzhou", + "lunix01" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setMonth": { - "modified": "2020-10-15T21:28:14.760Z", + "Web/JavaScript/Reference/Operators/Remainder_assignment": { + "modified": "2020-10-15T22:34:27.144Z", "contributors": [ - "ZZES_REN", - "fscholz", - "luyouxin84", - "AlexChao" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setSeconds": { - "modified": "2020-10-15T21:28:14.577Z", + "Web/JavaScript/Reference/Operators/Right_shift": { + "modified": "2020-11-02T06:18:13.407Z", "contributors": [ - "fscholz", - "AlexChao" + "Boswell", + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setTime": { - "modified": "2020-10-15T21:28:10.430Z", + "Web/JavaScript/Reference/Operators/Right_shift_assignment": { + "modified": "2020-10-15T22:34:28.606Z", "contributors": [ - "dylanyg", - "fscholz", - "ziyunfei", - "AlexChao" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCDate": { - "modified": "2020-10-15T21:34:46.724Z", + "Web/JavaScript/Reference/Operators/Spread_syntax": { + "modified": "2020-11-26T05:06:49.056Z", "contributors": [ - "fscholz", - "rubyisapm" + "superchow", + "NorthWind", + "renfufei", + "fanjieqi", + "kczjczhYue", + "zhangchen", + "maoguojun" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear": { - "modified": "2020-10-15T21:48:19.613Z", + "Web/JavaScript/Reference/Operators/Strict_equality": { + "modified": "2020-10-15T22:34:20.707Z", "contributors": [ - "fscholz", - "zachary05" + "LydiaYuan" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCHours": { - "modified": "2020-10-15T21:53:04.641Z", + "Web/JavaScript/Reference/Operators/Strict_inequality": { + "modified": "2020-10-15T22:31:52.866Z", "contributors": [ - "fscholz", - "haijianyang" + "yemao", + "milulelele" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds": { - "modified": "2020-10-15T21:55:54.800Z", + "Web/JavaScript/Reference/Operators/Subtraction": { + "modified": "2020-10-15T22:34:24.192Z", "contributors": [ - "fscholz", - "yys" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes": { - "modified": "2020-10-15T22:00:10.646Z", + "Web/JavaScript/Reference/Operators/Subtraction_assignment": { + "modified": "2020-10-15T22:34:27.258Z", "contributors": [ - "fscholz", - "LiuYuan" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth": { - "modified": "2020-10-15T21:51:40.559Z", + "Web/JavaScript/Reference/Operators/Unary_negation": { + "modified": "2020-10-15T22:34:23.921Z", "contributors": [ - "fscholz", - "wizardforcel", - "Jabinzou" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds": { - "modified": "2020-10-15T21:49:40.074Z", + "Web/JavaScript/Reference/Operators/Unary_plus": { + "modified": "2020-10-15T22:34:22.724Z", "contributors": [ - "fscholz", - "wizardforcel", - "petrelselina" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setYear": { - "modified": "2020-10-15T22:29:46.049Z", + "Web/JavaScript/Reference/Operators/Unsigned_right_shift": { + "modified": "2020-10-15T22:34:23.607Z", "contributors": [ - "SDUTWSL" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toDateString": { - "modified": "2020-10-15T21:28:24.093Z", + "Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment": { + "modified": "2020-10-15T22:34:24.975Z", "contributors": [ - "fscholz", - "teoli", - "AlexChao" + "laampui" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toGMTString": { - "modified": "2020-10-15T21:28:14.066Z", + "Web/JavaScript/Reference/Operators/await": { + "modified": "2020-08-15T05:29:31.365Z", "contributors": [ - "fscholz", - "AlexChao" + "zzzimaple", + "shifenjiandan", + "Syclover-u2400", + "chang-shuai", + "i850", + "shhider", + "xgqfrms-GitHub", + "chenlexing", + "x-cold", + "liuqipeng417" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toISOString": { - "modified": "2020-10-15T21:28:16.900Z", + "Web/JavaScript/Reference/Operators/class": { + "modified": "2020-10-15T21:37:37.172Z", "contributors": [ + "Peidong_Xie", "fscholz", - "AlexChao" + "xgqfrms-GitHub", + "zyq930501", + "ziyunfei", + "sartrey", + "lunix01" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toJSON": { - "modified": "2020-10-15T21:28:08.978Z", + "Web/JavaScript/Reference/Operators/delete": { + "modified": "2020-10-15T21:07:30.470Z", "contributors": [ - "fscholz", - "KMKNKK", - "Cattla", - "helloguangxue", - "yenshen", - "Yaty", + "zcdll", + "wallena3", + "zhangchen", + "wendy260310", + "yaksha", + "pyz1989", + "Vincent-yz", + "ucev", + "jamesfancy", + "ZackBee", + "lazybusy", + "Ende93", + "xgqfrms-GitHub", + "xwartz", "AlexChao", - "ziyunfei" + "ziyunfei", + "teoli" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString": { - "modified": "2020-10-15T21:28:17.098Z", + "Web/JavaScript/Reference/Operators/function": { + "modified": "2020-03-12T19:39:30.038Z", "contributors": [ - "fscholz", - "teoli", - "AlexChao" + "inlics", + "LJJ1996", + "ucev", + "zhuangyin", + "ryanlid", + "xgqfrms-GitHub", + "Ende93", + "AlexChao", + "SphinxKnight", + "nightire" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toLocaleString": { - "modified": "2020-10-15T21:28:25.398Z", + "Web/JavaScript/Reference/Operators/function*": { + "modified": "2020-10-15T21:37:40.102Z", "contributors": [ - "fscholz", - "wangerniu", - "liyongleihf2006", - "teoli", - "AlexChao" + "HCSkatana", + "zhangchen", + "chenyeah", + "ShupingLiu", + "ooops", + "lunix01" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString": { - "modified": "2020-10-15T21:28:22.937Z", + "Web/JavaScript/Reference/Operators/in": { + "modified": "2020-10-15T21:21:37.099Z", "contributors": [ - "fscholz", + "zhuangyin", + "zhangchen", + "lemonsWen", + "kameii", + "zachary05", + "AlexChao", + "SphinxKnight", "teoli", - "AlexChao" + "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toSource": { - "modified": "2020-10-15T22:00:19.218Z", + "Web/JavaScript/Reference/Operators/instanceof": { + "modified": "2020-12-10T01:21:18.307Z", "contributors": [ - "fscholz", - "haipeng.liang" + "xingzhewj", + "Lsnsh", + "kidonng", + "chenzhh", + "helloyong", + "zhangchen", + "LJJ1996", + "Minhow.liu", + "zhuangyin", + "xgqfrms-GitHub", + "ReedSun", + "liudanning", + "xgqfrms", + "SamuraiMe", + "jonkee", + "suffering", + "Ende93", + "jetzhliu", + "floraLam", + "tiansh", + "AlexChao", + "ziyunfei", + "teoli" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toString": { - "modified": "2020-10-15T21:28:13.694Z", + "Web/JavaScript/Reference/Operators/new": { + "modified": "2020-10-15T21:30:30.354Z", "contributors": [ - "yunxu1019", - "fscholz", + "HermitSun", + "lmx-Hexagram", + "wuwensheng1992", + "RainSlide", + "toyflivver", + "nanyang24", + "Akiq2016", + "zhangchen", + "btea", + "zhuangyin", + "TroyMa1990", + "xgqfrms-GitHub", + "pokka", + "ruiM92", + "Ke.shidong", + "yangzi", "yenshen", - "AlexChao" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toTimeString": { - "modified": "2020-10-15T21:28:22.895Z", - "contributors": [ - "fscholz", - "teoli", - "AlexChao" + "fskuok", + "jiacai2050", + "fphonor", + "SphinxKnight", + "TomWan" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toUTCString": { - "modified": "2020-10-15T21:28:16.518Z", + "Web/JavaScript/Reference/Operators/new.target": { + "modified": "2020-10-15T21:39:57.852Z", "contributors": [ - "fscholz", - "chesterchenn", - "AlexChao" + "RoXoM", + "jafck", + "zhangchen", + "sunhengzhe", + "ngtmuzi", + "ccnuzindex" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/valueOf": { - "modified": "2020-10-15T21:28:12.574Z", + "Web/JavaScript/Reference/Operators/super": { + "modified": "2020-10-15T21:34:14.337Z", "contributors": [ - "fscholz", - "Ende93", - "AlexChao", - "ziyunfei" + "jackyqin", + "t.ccydlj", + "woshiqiang1", + "hikigaya58", + "KennyWho", + "Yayure", + "wangmiJM", + "zhangchen", + "xgqfrms-GitHub", + "lvjs", + "saintwinkle" ] }, - "Web/JavaScript/Reference/Global_Objects/Error": { - "modified": "2020-10-15T21:21:49.758Z", + "Web/JavaScript/Reference/Operators/this": { + "modified": "2020-10-15T21:24:16.968Z", "contributors": [ - "GuYue", - "IreneByron", + "Clarkkkk", + "imbant", + "laampui", + "ldsyzjb", + "aaaxiu", + "frankchia", + "usernameisMan", + "Xuemuyang", + "luoxzhg", + "Akiq2016", + "secretmadonna", "zhangchen", - "ZhishengZhao", + "jasonwithjs", + "rollinhup", + "anderson_liu", + "KngZhi", "xgqfrms-GitHub", - "ngtmuzi", - "calidion", + "JJPandari", + "07akioni", + "Cmen", + "bodii", + "Ende93", + "eric183", + "floraLam", "teoli", - "yenshen", - "Maple-Jan", - "evilpie" + "haodut", + "zhanglun", + "jaka", + "JinZheng", + "DaoG" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/Stack": { - "modified": "2020-10-15T22:05:59.371Z", + "Web/JavaScript/Reference/Operators/typeof": { + "modified": "2020-11-25T06:03:35.454Z", "contributors": [ - "Zoeooo", - "gentlelynn" + "zhuangyin", + "AidanDai", + "kidonng", + "levo2165", + "zhangchen", + "huangtt", + "Crazycheng", + "DarkYeahs", + "Bitzo", + "bengfor", + "xgqfrms", + "zachary05", + "auver", + "yufeng", + "AlexChao", + "teoli", + "ziyunfei", + "ethertank" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/columnNumber": { - "modified": "2019-04-02T14:34:45.679Z", + "Web/JavaScript/Reference/Operators/void": { + "modified": "2020-10-15T21:30:34.673Z", "contributors": [ - "teoli", - "buckarooch" + "seiry", + "Yidada", + "zhangchen", + "xycd", + "xgqfrms-GitHub", + "Ende93", + "lunix01", + "yenshen", + "ziyunfei", + "AlexChao", + "SphinxKnight", + "parano" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/fileName": { - "modified": "2019-04-02T14:35:07.280Z", + "Web/JavaScript/Reference/Operators/yield": { + "modified": "2020-10-15T21:26:10.731Z", "contributors": [ + "RedemptioM", + "Yongest", + "Usey95", + "zhangchen", + "lfy55", + "xgqfrms-GitHub", + "AlexChao", + "mountainmoon", "teoli", - "buckarooch" + "lpy" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/lineNumber": { - "modified": "2020-10-15T22:00:20.126Z", + "Web/JavaScript/Reference/Operators/yield*": { + "modified": "2020-10-15T21:32:40.952Z", "contributors": [ - "WayneCui" + "zhangchen", + "xgqfrms-GitHub", + "ccn1010", + "ziyunfei", + "Liyunsheng" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/message": { - "modified": "2019-04-02T14:35:10.524Z", + "Web/JavaScript/Reference/Statements": { + "modified": "2020-11-19T11:54:21.852Z", "contributors": [ + "xgqfrms", + "wwj402", + "RainSlide", + "victor0801x", "yenshen", - "AlexChao" + "Ende93", + "webery", + "ziyunfei", + "teoli" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/name": { - "modified": "2019-07-05T00:02:19.372Z", + "Web/JavaScript/Reference/Statements/Empty": { + "modified": "2020-10-15T21:32:25.866Z", "contributors": [ - "yenshen", - "teoli", - "ziyunfei" + "zhangchen", + "Hugh", + "git123hub", + "yenshen" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/prototype": { - "modified": "2019-04-02T14:33:04.306Z", + "Web/JavaScript/Reference/Statements/async_function": { + "modified": "2020-11-26T06:15:48.712Z", "contributors": [ - "ngtmuzi", - "shajiquan" + "superchow", + "Neo42", + "zhangxingeng", + "Irisa", + "brizer", + "icethawless", + "rockan007", + "AppleTenlp", + "gqbre", + "elkfn", + "Hew007", + "Ende93", + "YKG", + "42", + "murphywuwu", + "ntnyq", + "jaredhan418", + "TriStone", + "lmislm", + "toyflivver", + "dudueasy", + "NiroDu", + "awmleer", + "mysmlz", + "Bill0412", + "Jessy.D.", + "zxsunrise", + "pujiaxun", + "biggersun", + "Jiang-Xuan", + "pot-code", + "ofatbird", + "shhider", + "zhangchen", + "xgqfrms-GitHub", + "_da", + "Katherina-Miao" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/toSource": { - "modified": "2020-10-15T22:04:46.786Z", + "Web/JavaScript/Reference/Statements/block": { + "modified": "2020-11-26T06:25:49.649Z", "contributors": [ - "zxsunrise", - "yuchaoWu" + "cikelichu", + "daxiazilong", + "ywjco", + "zhangchen", + "icepro", + "Canaan", + "frankfang1990", + "Cattla", + "yenshen" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/toString": { - "modified": "2019-04-02T14:43:23.068Z", + "Web/JavaScript/Reference/Statements/break": { + "modified": "2020-11-26T22:14:31.749Z", "contributors": [ + "superchow", + "zhangchen", + "git123hub", + "Poisonloc", "AlexChao" ] }, - "Web/JavaScript/Reference/Global_Objects/EvalError": { - "modified": "2020-10-15T21:15:06.730Z", + "Web/JavaScript/Reference/Statements/class": { + "modified": "2020-10-15T21:40:52.749Z", "contributors": [ - "Tao-Quixote", - "Debugger-D", - "buckarooch", - "slientomorrr", - "teoli", - "Mickeyboy" + "zhangchen", + "LiXin", + "xgqfrms-GitHub", + "AimLuo", + "makebanana", + "ryanlid", + "kdex", + "lixuguang", + "ouonet", + "MrLyp", + "jooyoon", + "webery" ] }, - "Web/JavaScript/Reference/Global_Objects/EvalError/prototype": { - "modified": "2020-10-15T21:59:36.134Z", + "Web/JavaScript/Reference/Statements/const": { + "modified": "2020-11-20T09:29:05.867Z", "contributors": [ - "hwj" + "zhuangyin", + "Snailight", + "niices", + "RainSlide", + "Jat", + "zhangchen", + "winjeysong", + "myl0204", + "xgqfrms-GitHub", + "shifengchen", + "Go7hic", + "zhe13", + "webery", + "lunix01", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/FinalizationRegistry": { - "modified": "2020-10-15T22:33:55.419Z", + "Web/JavaScript/Reference/Statements/continue": { + "modified": "2020-10-15T21:22:29.579Z", "contributors": [ - "LydiaYuan", - "xgqfrms" + "zhangchen", + "tiansh", + "teoli", + "sunorry" ] }, - "Web/JavaScript/Reference/Global_Objects/Float32Array": { - "modified": "2019-03-23T22:55:04.546Z", + "Web/JavaScript/Reference/Statements/debugger": { + "modified": "2020-10-15T21:19:13.851Z", "contributors": [ - "lsvih", - "luojia", - "AlixWang" + "zhangchen", + "yenshen", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/Float64Array": { - "modified": "2019-03-23T22:27:51.833Z", + "Web/JavaScript/Reference/Statements/do...while": { + "modified": "2020-10-15T21:32:25.936Z", "contributors": [ - "lsvih" + "zhangchen", + "yenshen" ] }, - "Web/JavaScript/Reference/Global_Objects/Function": { - "modified": "2020-10-15T21:07:16.185Z", + "Web/JavaScript/Reference/Statements/export": { + "modified": "2020-10-31T21:18:02.310Z", "contributors": [ - "johnao", + "wenxiayili", + "panzhh", + "brizer", + "Casseil-1996", + "zhouxyy", + "symant233", + "Asuka109", + "hanalice", + "narutojian", + "ThisIszas", + "GentleGong", + "woniuxingdong", + "TeabugCC", + "yinpeng123", "RainSlide", - "Bjkb", - "xuyewen288", - "ywjco", - "Jiang-Xuan", + "xgqfrms", + "wossig", + "zarvin", + "TimmyKingFree", + "zhangchen", "xgqfrms-GitHub", - "Ende93", - "webery", - "FredWe", - "teoli", - "chbdetta", - "chyee", - "ziyunfei", - "iwo" + "Jiang-Xuan", + "Suixinlei", + "nolanlee", + "sartrey", + "jianyi1995" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/apply": { - "modified": "2020-10-15T21:21:35.017Z", + "Web/JavaScript/Reference/Statements/for": { + "modified": "2020-10-15T21:38:44.431Z", "contributors": [ - "leafwingstar", - "熊英明", - "zhanjunhao", - "wisecamle", + "RainSlide", + "yy7054wyq5", "zhangchen", - "Plortinus", - "MoYuLing", - "tangj1206", - "Humyang", - "Leivy", - "xgqfrms-GitHub", - "Ende93", - "JJPandari", - "hbkdsm", - "paddingme", - "onetree", - "AlexChao", - "ziyunfei", - "Nebu1aX", - "teoli", - "endlesswind" + "IShinji", + "yenshen", + "oscar1980", + "gaigeshen" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/arguments": { - "modified": "2019-08-06T06:43:10.243Z", + "Web/JavaScript/Reference/Statements/for-await...of": { + "modified": "2020-11-19T13:54:59.528Z", "contributors": [ - "omz-one", - "ziyunfei", - "WangXiZhu", - "teoli", - "AlexChao" + "xgqfrms", + "jingkaimori", + "AozakiOrenji", + "Ende93", + "SphinxKnight", + "mrdulin", + "WangXiaoyu", + "thereAnana" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/bind": { - "modified": "2020-10-15T21:07:21.219Z", + "Web/JavaScript/Reference/Statements/for...in": { + "modified": "2020-10-15T21:07:57.911Z", "contributors": [ - "xx1124961758", - "oxyg3n", - "lzfee0227", - "FeiJian984", - "TMM-eng", - "C2015", - "RainSlide", - "StuPig", - "williantian", - "hansnow", - "bananafishM", - "z1yuan", - "Arichy", - "Maiko", - "wisecamle", + "lmislm", + "毛毛_", + "name-dingding", + "raoenhui", + "412799755", + "Hourann", + "XiangHongAi", + "jiladahe1997", "zhangchen", - "zjffun", - "AllanJian", - "kuleyu", - "LiXin", - "baidufe.hc", - "yuwanlin", - "yangyh1911", - "gwiron", - "lclscofield", + "WPH2017", "xgqfrms-GitHub", - "zhengkai2001", - "Katherina-Miao", - "jyjsjd", - "Jiavan", - "riversYeHaha", - "xie-qianyue", - "sensui7", + "jdk137", + "yatace", + "helloguangxue", "Ende93", - "manfredHu", - "cqzhao", - "prawn", - "iplus26", + "wonyun", + "denghongcai", "teoli", - "paddingme", - "TooBug", - "SDLyu", - "bin", - "ziyunfei", - "stylechen" + "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/call": { - "modified": "2020-10-15T21:07:14.576Z", + "Web/JavaScript/Reference/Statements/for...of": { + "modified": "2020-10-15T21:07:54.800Z", "contributors": [ - "Blackie", - "dcyu007", - "zzykillu", - "RainSlide", - "Maiko", - "Sally-he", - "whidy", + "sendudu", + "mouming", + "houzp", + "zgj233", + "osramywj", + "Joker09", "Jiang-Xuan", - "fanerge", - "voidzhou", + "charliex2", + "zhangchen", + "killsos", "xgqfrms-GitHub", - "micheal-death", - "windluo", - "azhi09", - "ChemiCoder", + "zhuangyin", + "yihuan", + "yanlee26", + "dingxu", + "lsvih", + "imnodb", "Ende93", - "teoli", - "AlexChao", - "ziyunfei" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/caller": { - "modified": "2019-08-06T03:21:58.429Z", - "contributors": [ + "iamchenxin", "teoli", "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/displayName": { - "modified": "2019-05-15T23:11:48.055Z", + "Web/JavaScript/Reference/Statements/function": { + "modified": "2020-12-02T02:36:07.313Z", "contributors": [ - "liuchuzhang", - "lilng", + "zhuangyin", + "frankfang1990", + "maicss", + "xgqfrms-GitHub", + "helloguangxue", + "yenshen", "teoli", - "minstrel1977", - "webery" + "ielgnaw" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/length": { - "modified": "2020-10-15T21:02:07.304Z", + "Web/JavaScript/Reference/Statements/function*": { + "modified": "2020-10-15T21:27:24.673Z", "contributors": [ - "zhangchen", - "gqbre", - "chudu", - "Ende93", - "guosimin", - "yenshen", - "teoli", + "HCSkatana", + "kingsley2036", + "RoXoM", + "Jiang-Xuan", + "ywjco", + "picc-lu", + "pot-code", + "righttoe", + "kdex", + "xgqfrms-GitHub", + "ShupingLiu", + "lunix01", + "simongfxu", "ziyunfei", - "tiansh" + "fskuok", + "teoli" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/name": { - "modified": "2020-10-15T21:02:08.194Z", + "Web/JavaScript/Reference/Statements/if...else": { + "modified": "2020-10-15T21:32:24.204Z", "contributors": [ + "maoyumaoxun", "zhangchen", - "inickel", - "minstrel1977", - "xgqfrms-GitHub", - "Marco_dev", - "teoli", - "ziyunfei" + "jjc", + "TimmyKingFree", + "Hugh", + "connie77", + "yenshen" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/prototype": { - "modified": "2019-09-11T09:25:06.080Z", + "Web/JavaScript/Reference/Statements/import": { + "modified": "2020-10-15T21:36:46.597Z", "contributors": [ + "SunnyDayLily", + "laampui", + "brizer", + "TeabugCC", + "RainSlide", + "daihaoxin", + "jason-grimm", + "jjyyxx", "Ende93", - "FrankElean", - "xiaowtz", - "DevinHe", - "teoli", + "zhangchen", + "xgqfrms-GitHub", + "xiaomingming", + "Jiang-Xuan", + "houbx", + "taokd", + "Skyang", + "larntin", + "bambooom", "ziyunfei", - "Oatn" + "wengeezhang", + "sartrey", + "WangZishi" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/toSource": { - "modified": "2019-03-23T23:36:01.366Z", + "Web/JavaScript/Reference/Statements/import.meta": { + "modified": "2020-10-15T22:07:59.455Z", "contributors": [ - "teoli", - "ziyunfei" + "gitHber", + "JonathanLee-LX" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/toString": { - "modified": "2020-10-15T21:21:30.188Z", + "Web/JavaScript/Reference/Statements/label": { + "modified": "2020-10-15T21:31:44.464Z", "contributors": [ + "xgqfrms", + "RainSlide", "zhangchen", - "Maiko", - "xmoyKing", - "laampui", - "AlexChao", - "ziyunfei", - "teoli" + "delkaka", + "AlexChao" ] }, - "Web/JavaScript/Reference/Global_Objects/Generator": { - "modified": "2020-10-15T21:34:46.129Z", + "Web/JavaScript/Reference/Statements/let": { + "modified": "2020-10-15T21:07:01.000Z", "contributors": [ + "Snailight", + "卡尔维斯特", + "JameMoriarty", + "yangnaiyue", + "Zhang-Junzhi", + "wongxiao", "Ende93", - "xgqfrms", - "xuxiaokang", - "kdex", + "jzz2649", + "SphinxKnight", + "Lan1967", + "Freezer", + "alexzaolin", + "JunjieCai", + "ilyp", + "ssttii", + "jcguang", + "mathxlee", + "ywjco", + "zhangchen", + "yingying", + "frankfang1990", + "swfbarhr", "xgqfrms-GitHub", - "Yelmor", - "lanezhao", + "mr.code", + "artificial", + "leafdog", + "yangzongjie", + "ZhiRui", + "ZhanghaoH", + "ChuckZhang", + "Go7hic", + "highsea", "panhezeng", + "kemchenj", + "lunix01", + "dondevi", + "hang", + "Rococolate", + "ouonet", "ziyunfei", - "Javascipt", - "lukywong", - "jpmedley" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Generator/next": { - "modified": "2019-08-17T06:59:14.528Z", - "contributors": [ - "Yayure", - "miyoosan", - "ywjco", - "Ende93", - "lukywong", - "jcouyang" + "WangZishi", + "Junjie_Wei", + "teoli", + "nightire", + "ted423" ] }, - "Web/JavaScript/Reference/Global_Objects/Generator/return": { - "modified": "2020-10-15T21:37:31.281Z", + "Web/JavaScript/Reference/Statements/return": { + "modified": "2020-10-15T21:32:16.829Z", "contributors": [ - "SevenDreamYang", + "xianshenglu", + "zhangchen", "Ende93", - "ljxy", - "lukywong" + "AlexChao" ] }, - "Web/JavaScript/Reference/Global_Objects/Generator/throw": { - "modified": "2019-08-12T05:52:42.406Z", + "Web/JavaScript/Reference/Statements/switch": { + "modified": "2020-10-15T21:31:42.513Z", "contributors": [ - "Ende93", - "lukywong" + "rianma", + "jfw10973", + "RainSlide", + "ywjco", + "zhangchen", + "PaperFlu", + "FAOfao931013", + "xgqfrms-GitHub", + "AlexChao", + "xin" ] }, - "Web/JavaScript/Reference/Global_Objects/GeneratorFunction": { - "modified": "2020-10-15T21:39:23.129Z", + "Web/JavaScript/Reference/Statements/throw": { + "modified": "2020-10-15T21:17:26.144Z", "contributors": [ - "fscholz", + "koalaxiaot", "zhangchen", - "lanezhao", - "webery", - "Cendy" + "xgqfrms-GitHub", + "fanpaa", + "soulxy", + "onetwogoo", + "iFish", + "teoli", + "Mickeyboy" ] }, - "Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype": { - "modified": "2020-10-15T21:40:51.679Z", + "Web/JavaScript/Reference/Statements/try...catch": { + "modified": "2020-10-15T21:35:35.752Z", "contributors": [ - "fscholz", - "shinexyt", "zhangchen", - "webery" + "Lan1967", + "cddsgtc", + "Xheldon", + "gooqiao", + "llwanghong", + "YouHeng", + "xgqfrms-GitHub", + "Hugh", + "helloguangxue", + "TUKOMI", + "ziyunfei", + "licop" ] }, - "Web/JavaScript/Reference/Global_Objects/Infinity": { - "modified": "2020-10-19T00:56:56.707Z", + "Web/JavaScript/Reference/Statements/var": { + "modified": "2020-10-15T21:29:22.023Z", "contributors": [ - "DarkWing", - "lizhongzhen11", - "wallena3", - "Jiang-Xuan", - "yenshen", - "tiansh", + "FloydTsai", + "RainSlide", + "zhangchen", + "AymaxLi", + "xgqfrms-GitHub", + "The-End-Hero", + "loddit", + "lunix01", + "AlexChao", "SphinxKnight", - "AlexChao" + "Fify" ] }, - "Web/JavaScript/Reference/Global_Objects/Int16Array": { - "modified": "2019-03-23T22:35:54.313Z", + "Web/JavaScript/Reference/Statements/while": { + "modified": "2020-10-15T21:31:43.063Z", "contributors": [ - "kdex", - "zilong-thu" + "RainSlide", + "zhangchen", + "ziyunfei", + "AlexChao" ] }, - "Web/JavaScript/Reference/Global_Objects/Int32Array": { - "modified": "2019-06-02T03:31:50.287Z", + "Web/JavaScript/Reference/Statements/with": { + "modified": "2020-10-15T21:29:35.662Z", "contributors": [ - "wuqinqiang", - "xclhs", - "langjun" + "SadWood", + "yangtoude", + "zhangchen", + "abc45628", + "xgqfrms-GitHub", + "kiling", + "wizardforcel", + "YFM-getA", + "jonkee", + "SphinxKnight", + "front" ] }, - "Web/JavaScript/Reference/Global_Objects/Int8Array": { - "modified": "2019-03-18T20:48:04.246Z", + "Web/JavaScript/Reference/Strict_mode": { + "modified": "2020-03-12T19:35:37.779Z", "contributors": [ + "xrkffgg", + "gaoyia", + "qiufeihong2018", + "Opelar", + "hmsz", + "amandameng", + "zhangchen", + "recursion", + "JuFoFu", + "qiu_han", + "tsejx", + "righttoe", "xgqfrms-GitHub", - "ObooChin" + "holynewbie", + "nanflower", + "weimengxi", + "xuzicn", + "Qcui", + "Toweave", + "zilong-thu", + "anitawho", + "laoxubuer", + "knightf", + "Jack.Works", + "Dijason", + "ziyunfei", + "yaway", + "iahu", + "mountainmoon", + "Frantic1048", + "Darrel.Hsu", + "ReyCG", + "teoli", + "endlesswind" ] }, - "Web/JavaScript/Reference/Global_Objects/InternalError": { - "modified": "2019-03-23T22:32:14.689Z", + "Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode": { + "modified": "2020-03-12T19:38:14.564Z", "contributors": [ - "teoli", - "maicss", - "Jack-Q" + "vincentdd", + "weimengxi", + "gavinjs", + "zjjott", + "ziyunfei", + "yenshen", + "teoli" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl": { - "modified": "2020-10-15T21:41:37.430Z", + "Web/JavaScript/Reference/Trailing_commas": { + "modified": "2020-10-15T21:52:12.920Z", "contributors": [ "RainSlide", "zhangchen", - "teabyii" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/Collator": { - "modified": "2020-10-15T21:52:01.061Z", - "contributors": [ - "fscholz", - "hiyangguo" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": { - "modified": "2020-04-21T09:01:11.408Z", - "contributors": [ - "fscholz", - "TianchiLi", - "zxsunrise", - "liyongleihf2006" + "wizardforcel" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype": { - "modified": "2020-04-21T09:01:11.304Z", + "Web/JavaScript/Shells": { + "modified": "2020-09-04T03:12:55.502Z", "contributors": [ - "fscholz", - "liyongleihf2006" + "a1157116165", + "StorytellerF", + "pluwen", + "sonymoon", + "pelligit", + "maicss" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames": { - "modified": "2020-04-21T09:19:23.285Z", + "Web/JavaScript/Typed_arrays": { + "modified": "2020-10-15T21:26:17.964Z", "contributors": [ - "fscholz", - "hulucode" + "norton-lee", + "ThomasWhyne", + "nkliyc", + "AngeloZ", + "zhangchen", + "wblovezqy", + "jing-y", + "lvsiyuan", + "xgqfrms-GitHub", + "JoyZF", + "jianzhou", + "lon", + "ngtmuzi", + "Amme", + "troywith77", + "ipy", + "teoli", + "zekai.zheng" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/ListFormat": { - "modified": "2020-10-15T22:16:21.221Z", + "Web/Manifest": { + "modified": "2019-10-29T05:08:14.882Z", "contributors": [ - "fscholz", - "Spengh" + "7NZ", + "mySoul", + "flyingsouthwind", + "varcat", + "_da", + "xgqfrms-GitHub" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/Locale": { - "modified": "2020-10-15T22:19:16.260Z", + "Web/Manifest/background_color": { + "modified": "2020-10-15T22:31:53.672Z", "contributors": [ - "weibangtuo", - "fscholz", - "shuvidora", - "lovedebug" + "wobuhuisuanmin", + "wr20060926" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": { - "modified": "2020-10-15T21:50:51.219Z", + "Web/MathML": { + "modified": "2020-10-15T21:25:04.339Z", "contributors": [ - "fscholz", - "RoXoM", - "Sivan", - "lisniuse", - "liyongleihf2006" + "RainSlide", + "Anonymous86x69ashe", + "pluwen", + "linmx0130", + "lunix01", + "fred.wang", + "fscholz" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format": { - "modified": "2020-10-15T22:04:10.022Z", + "Web/MathML/Attribute": { + "modified": "2019-03-23T22:52:18.616Z", "contributors": [ - "fscholz", - "zxsunrise", - "Evansy" + "luneice", + "FredWe" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/PluralRules": { - "modified": "2020-10-15T22:05:26.837Z", + "Web/MathML/Authoring": { + "modified": "2019-10-27T00:08:11.337Z", "contributors": [ - "fscholz", - "JimmyBenKlieve", - "DeanNode" + "RainSlide", + "fanxiaojie", + "FredWe" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat": { - "modified": "2020-10-15T22:21:27.890Z", + "Web/MathML/Element": { + "modified": "2020-03-31T12:28:08.721Z", "contributors": [ - "SandBoat", - "Mongkii", - "fscholz", - "AchooLuv", - "xrr2016", - "SphinxKnight", - "qiufeihong2018" + "RainSlide", + "qson", + "ziyunfei", + "a.stone" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales": { - "modified": "2020-10-15T22:09:15.623Z", + "Web/MathML/Element/maction": { + "modified": "2019-03-18T21:42:16.631Z", "contributors": [ - "pea3nut" + "LiuYuan" ] }, - "Web/JavaScript/Reference/Global_Objects/JSON": { - "modified": "2020-10-15T21:06:55.773Z", + "Web/MathML/Element/math": { + "modified": "2019-03-23T22:48:38.735Z", "contributors": [ - "recursion", - "renfufei", - "codevvvv9", - "zhangchen", - "luojia", - "righttoe", - "xgqfrms-GitHub", - "Freed", - "huguangju", - "liyongleihf2006", - "Ende93", - "yenshen", - "teoli", - "Yaty", - "fscholz", - "AlexChao", - "Wladimir_Palant", - "ziyunfei" + "linmx0130" ] }, - "Web/JavaScript/Reference/Global_Objects/JSON/parse": { - "modified": "2020-10-15T21:28:05.508Z", + "Web/MathML/Element/mroot": { + "modified": "2019-03-18T21:42:14.503Z", "contributors": [ - "hikigaya58", - "RainSlide", - "renfufei", - "zhuangyin", - "mySoul", - "rambo-panda", - "zhaoqize", - "DejectedBird", - "ZDeborah", - "xgqfrms-GitHub", - "zhoupenghui", - "frankfang1990", - "LiYang982", - "sszsfan", - "xgqfrms", - "TomIsion", - "qiao4", - "Ende93", - "yenshen", - "Yaty", - "ziyunfei", - "AlexChao" + "LiuYuan" ] }, - "Web/JavaScript/Reference/Global_Objects/JSON/stringify": { - "modified": "2020-10-27T03:21:45.041Z", + "Web/MathML/Element/mrow": { + "modified": "2020-10-15T22:25:33.815Z", "contributors": [ - "anan824", - "JaCoder", - "zhangchen", - "Ocean-ZH", - "huxinsen", - "fwmh", - "szengtal", - "superfighter", - "zhaoqize", - "Demo_Hu", - "xgqfrms-GitHub", - "xiuzhihuan", - "leouncle", - "zhoupenghui", - "LiYang982", - "zachary05", - "ziyunfei", - "byr-gdp", - "paddingme", - "AlexChao", - "teoli", - "Lovesueee" + "RainSlide" ] }, - "Web/JavaScript/Reference/Global_Objects/Map": { - "modified": "2020-10-15T21:06:49.701Z", + "Web/MathML/Element/mspace": { + "modified": "2019-03-18T21:42:15.461Z", "contributors": [ - "laampui", - "wallena3", - "KaySama", - "Turner", - "YaoZeyuan", - "Mr_Big", - "maoyumaoxun", - "hong007", - "zhangchen", - "Amio", - "tsejx", - "thegatheringstorm", - "buckarooch", - "xgqfrms-GitHub", - "kameii", - "Cattla", - "huguangju", - "YangyuhaoBit", - "luneice", - "git123hub", - "Ende93", - "sqqihao", - "fskuok", - "teoli", - "ziyunfei", - "zhangyaochun1987" + "LiuYuan" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/@@iterator": { - "modified": "2020-10-15T21:56:27.573Z", + "Web/MathML/Element/msqrt": { + "modified": "2019-03-18T21:42:14.783Z", "contributors": [ - "Ende93", - "DuLinRain" + "LiuYuan" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/@@species": { - "modified": "2020-10-15T21:57:35.566Z", + "Web/MathML/Element/msub": { + "modified": "2019-03-18T21:42:15.091Z", "contributors": [ - "vanishcode" + "LiuYuan" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag": { - "modified": "2019-04-05T14:04:42.613Z", + "Web/MathML/Element/msubsup": { + "modified": "2020-10-15T22:28:42.346Z", "contributors": [ - "DuLinRain" + "RainSlide" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/Map": { - "modified": "2020-10-15T22:29:02.199Z", + "Web/MathML/Element/msup": { + "modified": "2020-10-15T22:01:09.939Z", "contributors": [ - "laampui" + "RainSlide", + "LiuYuan" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/clear": { - "modified": "2020-10-15T21:41:32.043Z", + "Web/MathML/Examples": { + "modified": "2019-10-26T23:25:14.524Z", "contributors": [ - "zhangchen", - "SphinxKnight", - "HsuanLee", - "youth7" + "RainSlide", + "Anonymous86x69ashe", + "Seattle", + "abc3660170", + "FredWe" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/delete": { - "modified": "2020-10-15T21:46:05.144Z", + "Web/MathML/Examples/Deriving_the_Quadratic_Formula": { + "modified": "2019-10-27T00:00:27.008Z", "contributors": [ - "zhangchen", - "royl8", - "Hushabyme", - "webery" + "RainSlide", + "luneice" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/entries": { - "modified": "2020-10-15T21:39:28.129Z", + "Web/MathML/Examples/MathML_Pythagorean_Theorem": { + "modified": "2019-10-26T23:28:44.470Z", "contributors": [ - "Louis-7", - "SphinxKnight", - "ngtmuzi", - "HsuanLee", - "Zhiyu_Wang" + "RainSlide", + "Anonymous86x69ashe", + "Seattle" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/forEach": { - "modified": "2020-10-15T21:39:26.824Z", + "Web/Media/Formats": { + "modified": "2019-10-28T06:26:59.997Z", "contributors": [ - "Mr_kaze", - "niices", - "liu7654", - "SimonYang", - "SphinxKnight", - "ziyunfei", - "Zhiyu_Wang" + "jswisher" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/get": { - "modified": "2020-10-15T21:39:27.794Z", + "Web/Media/Formats/Containers": { + "modified": "2020-11-01T10:00:22.590Z", "contributors": [ - "RainSlide", - "SphinxKnight", - "ziyunfei", - "Zhiyu_Wang" + "happyxxj" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/has": { - "modified": "2019-10-04T10:03:31.075Z", + "Web/Media/Formats/Image_types": { + "modified": "2020-10-28T06:58:07.754Z", "contributors": [ - "Cyberhan123", - "SphinxKnight", - "DirtyPP" + "hylashyla", + "RainSlide" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/keys": { - "modified": "2020-10-15T21:48:38.432Z", + "Web/Performance": { + "modified": "2020-07-21T05:10:44.104Z", "contributors": [ - "Davidyanlong", + "lvbaiying", + "FE_pangxing", + "biqing", "RainSlide", - "zachary05" + "maoyougan", + "sqd123", + "chrisdavidmills", + "iceytea" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/prototype": { - "modified": "2019-12-28T23:13:19.788Z", + "Web/Performance/CSS_JavaScript_animation_performance": { + "modified": "2020-07-29T00:36:34.087Z", "contributors": [ - "wallena3", - "YaoZeyuan", - "kameii", - "chaosdog", - "webery" + "deping_chen", + "sunfeel", + "liangbus" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/set": { - "modified": "2020-10-15T21:48:37.587Z", + "Web/Performance/Critical_rendering_path": { + "modified": "2020-10-13T09:41:03.369Z", "contributors": [ - "CascEco", - "ts0307", - "RainSlide", - "MaZheng", - "Hushabyme", - "zachary05" + "xgqfrms", + "HouGiser", + "HuiyingShen96", + "chafel" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/size": { - "modified": "2019-09-06T04:35:48.843Z", + "Web/Performance/Lazy_loading": { + "modified": "2020-10-13T09:10:51.078Z", "contributors": [ - "boyue", - "wenshin" + "xgqfrms" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/values": { - "modified": "2019-10-04T09:57:38.527Z", + "Web/Performance/Optimizing_startup_performance": { + "modified": "2019-03-23T22:00:17.334Z", "contributors": [ - "killsos", - "mingzhaov" + "chrisdavidmills", + "codeofjackie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math": { - "modified": "2020-10-15T21:21:09.889Z", + "Web/Performance/Rum-vs-Synthetic": { + "modified": "2020-10-13T09:51:23.567Z", "contributors": [ - "RainSlide", - "Zhenger", - "tzmf", - "levinweb", - "xzmshiji", - "LiXin", - "xgqfrms-GitHub", - "Ende93", - "lwxyfer", - "FredWe", - "yenshen", - "baiya", - "AlexChao", - "teoli", - "ziyunfei" + "xgqfrms" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/E": { - "modified": "2019-03-23T23:12:59.627Z", + "Web/Performance/dns-prefetch": { + "modified": "2020-10-13T10:51:56.349Z", "contributors": [ - "AlexChao" + "xgqfrms", + "chrisdavidmills", + "caoweiju" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/LN10": { - "modified": "2019-03-23T22:26:33.778Z", + "Web/Progressive_web_apps": { + "modified": "2020-03-14T09:56:33.733Z", "contributors": [ - "AlexChao" + "Miahui", + "kkocdko", + "chrisdavidmills", + "sijimi", + "xgqfrms-GitHub", + "xgqfrms" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/LN2": { - "modified": "2019-03-23T23:12:59.485Z", + "Web/Progressive_web_apps/App_structure": { + "modified": "2020-05-31T18:38:01.454Z", "contributors": [ - "AlexChao" + "jin_wang", + "Miahui", + "xiao11lang", + "Mosan", + "githubxiaominge", + "liminjun", + "zjffun", + "alfred_chao95", + "chrisdavidmills", + "eightHundreds" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/LOG10E": { - "modified": "2019-03-23T23:12:57.229Z", + "Web/Progressive_web_apps/Installable_PWAs": { + "modified": "2020-08-03T23:25:28.976Z", "contributors": [ - "AlexChao" + "SDUTWSL", + "nurob", + "Dht", + "Miahui", + "HDUCC", + "deping_chen" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/LOG2E": { - "modified": "2019-03-23T23:12:57.389Z", + "Web/Progressive_web_apps/Introduction": { + "modified": "2019-08-21T09:58:46.102Z", "contributors": [ - "AlexChao" + "jackupdown", + "zjffun", + "chrisdavidmills", + "eightHundreds", + "yijie_sun" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/PI": { - "modified": "2019-10-10T16:56:22.011Z", + "Web/Progressive_web_apps/Offline_Service_workers": { + "modified": "2020-07-02T16:41:37.440Z", "contributors": [ - "helloguangxue", - "yenshen", - "AlexChao" + "showad", + "nurob", + "githubxiaominge", + "zjffun" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2": { - "modified": "2019-03-23T23:12:56.404Z", + "Web/Progressive_web_apps/Re-engageable_Notifications_Push": { + "modified": "2020-05-31T18:38:17.693Z", "contributors": [ - "AlexChao" + "nurob", + "githubxiaominge" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/SQRT2": { - "modified": "2019-03-23T23:34:50.958Z", + "Web/Progressive_web_apps/Responsive/responsive_design_building_blocks": { + "modified": "2020-11-17T04:04:41.165Z", "contributors": [ - "AlexChao", - "teoli", - "ziyunfei" + "DingGuangbo" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/abs": { - "modified": "2019-04-05T14:44:14.817Z", + "Web/Reference": { + "modified": "2019-03-18T21:10:51.690Z", "contributors": [ - "FlowingRiver", - "tiansh", - "AlexChao", - "teoli", - "ndon" + "SphinxKnight", + "acuptea", + "rguanghui", + "huasheng", + "yangchengjian", + "liuwentianwtu", + "jack7758", + "ValkyrieLawliet", + "ZhangKaiqiang", + "colin-zhou", + "ziyunfei", + "Sheppy" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/acos": { - "modified": "2019-04-05T14:44:29.427Z", + "Web/Reference/API": { + "modified": "2020-02-06T00:29:14.463Z", "contributors": [ - "AlexChao" + "RainSlide", + "yongxiaodu", + "micblo", + "kevinfszu", + "yfdyh000", + "zmh_w", + "tangxiaobaobao", + "ziyunfei", + "noscripter", + "hutuxu" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/asin": { - "modified": "2019-08-17T06:23:48.692Z", + "Web/SVG": { + "modified": "2020-05-25T07:08:22.112Z", "contributors": [ - "AlexChao" + "Adrian-Yan", + "RainSlide", + "pluwen", + "LalaChu", + "simongfxu", + "fanxiaojie", + "Metalooze", + "lunix01", + "charlie", + "johncido", + "cuixiping", + "huguowei", + "teoli", + "xcffl", + "LIXer" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/asinh": { - "modified": "2020-10-15T22:29:13.098Z", + "Web/SVG/Applying_SVG_effects_to_HTML_content": { + "modified": "2020-10-21T05:14:10.197Z", "contributors": [ - "vampire624" + "Chellyyy", + "Kylexii", + "almond", + "AaronYehf", + "swingcat", + "SphinxKnight", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/atan": { - "modified": "2019-03-23T23:12:33.623Z", + "Web/SVG/Attribute": { + "modified": "2020-06-11T11:15:23.661Z", "contributors": [ - "AlexChao" + "chanvin", + "RainSlide", + "fanxiaojie", + "slientomorrr", + "stevenvachon" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/atan2": { - "modified": "2019-10-29T04:38:29.778Z", + "Web/SVG/Attribute/From": { + "modified": "2019-03-23T22:07:46.163Z", "contributors": [ - "412799755", - "AlexChao" + "876843240" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/atanh": { - "modified": "2019-03-23T22:30:24.385Z", + "Web/SVG/Attribute/Presentation": { + "modified": "2020-10-15T22:23:08.667Z", "contributors": [ - "timqian92" + "gogoend" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/cbrt": { - "modified": "2019-11-08T10:40:00.500Z", + "Web/SVG/Attribute/accent-height": { + "modified": "2019-07-05T08:35:14.107Z", "contributors": [ - "hellorayza", - "hhxxhg", - "SphinxKnight", - "wangyukai04", - "teoli", - "ziyunfei" + "yvonneit" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/ceil": { - "modified": "2020-10-15T21:28:51.015Z", + "Web/SVG/Attribute/accumulate": { + "modified": "2019-03-23T22:32:55.125Z", "contributors": [ - "RainSlide", - "xgqfrms-GitHub", - "AlexChao" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/clz32": { - "modified": "2020-10-15T21:26:57.620Z", + "Web/SVG/Attribute/alignment-baseline": { + "modified": "2019-07-05T08:35:05.656Z", "contributors": [ - "Lucilor", - "SphinxKnight", - "teoli", - "ziyunfei" + "liyongleihf2006", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/cos": { - "modified": "2019-03-23T23:12:55.982Z", + "Web/SVG/Attribute/attributeName": { + "modified": "2019-03-23T22:46:42.034Z", "contributors": [ - "AlexChao" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/cosh": { - "modified": "2019-03-23T22:45:35.592Z", + "Web/SVG/Attribute/attributeType": { + "modified": "2019-03-23T22:46:39.534Z", "contributors": [ - "SphinxKnight", - "yenshen" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/exp": { - "modified": "2019-04-05T14:46:00.450Z", + "Web/SVG/Attribute/baseProfile": { + "modified": "2019-07-05T08:35:43.566Z", "contributors": [ - "AlexChao" + "leighcc" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/expm1": { - "modified": "2019-03-23T23:24:29.516Z", + "Web/SVG/Attribute/baseline-shift": { + "modified": "2019-03-23T22:46:48.235Z", "contributors": [ - "SphinxKnight", - "teoli", - "ziyunfei" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/floor": { - "modified": "2020-12-01T02:48:28.851Z", + "Web/SVG/Attribute/begin": { + "modified": "2019-03-23T22:46:49.938Z", "contributors": [ - "OmniP", - "wangyukai04", - "xgqfrms-GitHub", - "AlexChao" + "wbamberg", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/fround": { - "modified": "2019-04-05T14:46:26.026Z", + "Web/SVG/Attribute/calcMode": { + "modified": "2019-03-23T22:10:34.986Z", "contributors": [ - "SphinxKnight", - "zxsunrise", - "ziyunfei", - "teoli" + "leedut" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/hypot": { - "modified": "2020-10-15T21:25:13.114Z", + "Web/SVG/Attribute/clip": { + "modified": "2020-10-15T21:39:26.851Z", "contributors": [ - "Dorence", - "hellorayza", - "plutonji", - "SphinxKnight", - "tiansh", - "teoli", - "ziyunfei" + "RainSlide", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/imul": { - "modified": "2020-01-20T10:35:52.662Z", + "Web/SVG/Attribute/clip-path": { + "modified": "2020-10-15T22:28:50.040Z", "contributors": [ - "徐鹏跃", - "SphinxKnight", - "teoli", - "ziyunfei" + "jhchen6" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/log": { - "modified": "2019-03-23T23:34:08.078Z", + "Web/SVG/Attribute/color": { + "modified": "2020-10-15T21:39:18.231Z", "contributors": [ - "kyriejoshua", - "teoli", - "AlexChao", - "ziyunfei" + "RainSlide", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/log10": { - "modified": "2019-03-23T23:24:22.200Z", + "Web/SVG/Attribute/cx": { + "modified": "2019-03-23T22:18:03.024Z", "contributors": [ - "SphinxKnight", - "teoli", - "ziyunfei" + "realstephenzhao", + "huainanhai" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/log1p": { - "modified": "2019-03-23T23:24:22.369Z", + "Web/SVG/Attribute/cy": { + "modified": "2019-03-18T21:22:46.371Z", "contributors": [ - "SphinxKnight", - "teoli", - "ziyunfei" + "realstephenzhao" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/log2": { - "modified": "2019-03-27T00:02:26.543Z", + "Web/SVG/Attribute/d": { + "modified": "2019-03-23T22:55:44.323Z", "contributors": [ - "SphinxKnight", - "teoli", - "ziyunfei" + "msyfls123", + "fanxiaojie", + "creamidea", + "charlie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/max": { - "modified": "2020-10-15T21:28:51.161Z", + "Web/SVG/Attribute/display": { + "modified": "2020-11-17T10:08:32.937Z", "contributors": [ - "zhangchen", - "zzykillu", - "littleRice", - "FlowingRiver", - "Gohikin", - "helloguangxue", - "tiansh", - "AlexChao" + "292514467", + "misakisaysyes", + "radial-hks" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/min": { - "modified": "2019-10-10T16:47:54.897Z", + "Web/SVG/Attribute/dominant-baseline": { + "modified": "2019-03-23T22:09:53.226Z", "contributors": [ - "FlowingRiver", - "Ende93", - "AlexChao" + "xinjianheyi" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/pow": { - "modified": "2020-10-15T21:28:50.816Z", + "Web/SVG/Attribute/dur": { + "modified": "2019-03-23T22:46:40.065Z", "contributors": [ - "zhangchen", - "bestlbw", - "AlexChao" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/random": { - "modified": "2020-12-10T04:26:38.936Z", + "Web/SVG/Attribute/dx": { + "modified": "2020-08-25T05:37:26.030Z", "contributors": [ - "caozhihui24", - "Ende93", - "Jing1107", - "Soyaine", - "wutiande", - "hhxxhg", - "meng-Macbook", - "ywjco", - "ZZES_REN", - "Daniel_Liu", - "xgqfrms-GitHub", - "AlexChao", - "teoli", - "ndon" + "danceash", + "jiahui" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/round": { - "modified": "2019-09-15T15:07:27.927Z", + "Web/SVG/Attribute/edgeMode": { + "modified": "2019-03-23T22:46:21.766Z", "contributors": [ - "shelter9824", - "zxsunrise", - "pazingaa", - "xgqfrms-GitHub", - "teoli", - "ziyunfei", - "AlexChao", - "princetoad@gmail.com" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/sign": { - "modified": "2019-08-31T06:02:13.833Z", + "Web/SVG/Attribute/enable-background": { + "modified": "2020-10-15T22:34:25.447Z", "contributors": [ - "xgqfrms-GitHub", - "tiansh", - "teoli", - "ziyunfei" + "SphinxKnight", + "SoMuchTo" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/sin": { - "modified": "2020-11-11T08:27:43.469Z", + "Web/SVG/Attribute/end": { + "modified": "2019-03-23T22:46:42.288Z", "contributors": [ - "luisleee", - "AlexChao" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/sinh": { - "modified": "2020-08-20T08:15:43.793Z", + "Web/SVG/Attribute/fill": { + "modified": "2019-03-23T22:46:42.182Z", "contributors": [ - "635153226", - "SphinxKnight", - "teoli", - "ziyunfei" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/sqrt": { - "modified": "2020-10-15T21:28:52.595Z", + "Web/SVG/Attribute/fill-opacity": { + "modified": "2019-03-23T22:46:42.402Z", "contributors": [ - "zhangchen", - "AlexChao" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/tan": { - "modified": "2019-08-31T06:01:37.228Z", + "Web/SVG/Attribute/fill-rule": { + "modified": "2020-10-15T21:39:20.776Z", "contributors": [ - "AlexChao" + "skywalker_z", + "kapokkopak", + "Ambar", + "ZhengYinBo", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/tanh": { - "modified": "2020-10-15T21:49:09.190Z", + "Web/SVG/Attribute/filter": { + "modified": "2019-03-23T22:46:38.982Z", "contributors": [ - "Dorence", - "Yunme", - "Gohikin", - "lsvih" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/trunc": { - "modified": "2020-10-15T21:25:16.193Z", + "Web/SVG/Attribute/filterUnits": { + "modified": "2019-03-23T22:14:03.688Z", "contributors": [ - "zxsunrise", - "Ende93", - "ziyunfei", - "tiansh", - "teoli" + "liyongleihf2006" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/反双曲余弦值": { - "modified": "2020-10-15T21:50:09.940Z", + "Web/SVG/Attribute/font-family": { + "modified": "2019-03-23T23:04:59.299Z", "contributors": [ - "Dorence", - "wizardforcel", - "LiuYuan" + "charlie" ] }, - "Web/JavaScript/Reference/Global_Objects/NaN": { - "modified": "2020-10-15T21:21:08.233Z", + "Web/SVG/Attribute/fr": { + "modified": "2019-03-18T21:22:49.932Z", "contributors": [ - "wallena3", - "HuangXin", - "caofei6", - "zxsunrise", - "EthanOrange", - "Jiang-Xuan", - "Ende93", - "yenshen", - "SphinxKnight", - "ziyunfei", - "AlexChao", - "teoli", - "zhangyaochun1987" + "realstephenzhao" ] }, - "Web/JavaScript/Reference/Global_Objects/Number": { - "modified": "2020-10-15T21:21:06.513Z", + "Web/SVG/Attribute/fx": { + "modified": "2019-03-18T21:28:55.964Z", "contributors": [ - "SageX", - "Mookiepiece", - "huxinsen", - "hhxxhg", - "shevche24", - "re09", - "righttoe", - "yurielZhang", - "liudeyuan", - "liuzeyafzy", - "Ende93", - "teoli", - "xuxiaodong", - "ethertank" + "realstephenzhao", + "longfeihouhouhou" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/EPSILON": { - "modified": "2019-10-14T12:34:30.960Z", + "Web/SVG/Attribute/fy": { + "modified": "2019-03-18T21:22:47.918Z", "contributors": [ - "SageX", - "Fire1nRain", - "Liugq5713", - "AlexChao", - "jokeviner" + "realstephenzhao" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER": { - "modified": "2019-11-10T23:49:14.665Z", + "Web/SVG/Attribute/height": { + "modified": "2019-03-23T22:46:48.815Z", "contributors": [ - "zotille", - "AlexChao", - "jokeviner" + "Ende93", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE": { - "modified": "2019-03-18T20:54:24.017Z", + "Web/SVG/Attribute/id": { + "modified": "2020-10-15T22:25:42.877Z", "contributors": [ - "dsgygb", - "AlexChao" + "cuixiping" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER": { - "modified": "2020-10-15T21:48:36.767Z", + "Web/SVG/Attribute/image-rendering": { + "modified": "2019-03-23T23:10:41.035Z", "contributors": [ - "SphinxKnight", - "User670", - "suxiesumiao" + "ReyCG_sub" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE": { - "modified": "2019-03-23T23:13:08.431Z", + "Web/SVG/Attribute/in": { + "modified": "2019-03-23T22:13:50.542Z", "contributors": [ - "AlexChao" + "liyongleihf2006" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY": { - "modified": "2019-03-23T23:13:05.395Z", + "Web/SVG/Attribute/kernelMatrix": { + "modified": "2019-03-23T22:14:02.784Z", "contributors": [ - "AlexChao" + "liyongleihf2006" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/NaN": { - "modified": "2019-04-06T03:20:31.087Z", + "Web/SVG/Attribute/keyTimes": { + "modified": "2019-03-18T21:30:15.598Z", "contributors": [ - "AlexChao", - "teoli", - "zhangyaochun1987" + "ZhenhuaChen" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/Number": { - "modified": "2020-10-15T22:32:37.356Z", + "Web/SVG/Attribute/letter-spacing": { + "modified": "2020-10-15T22:23:39.628Z", "contributors": [ - "爬上神坛的猫" + "vvv-7911" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY": { - "modified": "2019-03-23T23:12:58.979Z", + "Web/SVG/Attribute/marker-end": { + "modified": "2020-10-15T22:18:07.958Z", "contributors": [ - "helinjiang", - "AlexChao" + "ciki6" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isFinite": { - "modified": "2020-10-15T21:24:17.461Z", + "Web/SVG/Attribute/marker-start": { + "modified": "2020-10-15T22:35:06.368Z", "contributors": [ - "zhangchen", - "AlexChao", - "teoli", - "ziyunfei", - "zhangyaochun1987" + "ciki6" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isInteger": { - "modified": "2020-10-15T21:24:18.300Z", + "Web/SVG/Attribute/mask": { + "modified": "2019-03-23T22:46:32.037Z", "contributors": [ - "yanhaijing1234", - "daihaoxin", - "oldmtn", - "Ende93", - "teoli", + "wbamberg", "ziyunfei", - "tiansh", - "zhangyaochun1987" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isNaN": { - "modified": "2020-10-15T21:19:55.509Z", + "Web/SVG/Attribute/max": { + "modified": "2020-10-15T22:26:09.162Z", "contributors": [ - "RainSlide", - "polunzh", - "daihaoxin", - "xgqfrms-GitHub", - "AlexChao", - "yenshen", - "teoli", - "yufeng", - "ziyunfei" + "bompoo" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger": { - "modified": "2020-10-15T21:27:54.542Z", + "Web/SVG/Attribute/media": { + "modified": "2020-10-15T22:28:22.473Z", "contributors": [ - "yanhaijing1234", - "hellorayza", - "AlexChao", - "ziyunfei" + "Firefox_mozilla" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/parseFloat": { - "modified": "2019-11-08T10:17:37.826Z", + "Web/SVG/Attribute/opacity": { + "modified": "2019-03-23T22:46:17.591Z", "contributors": [ - "hellorayza", - "Youzi", - "SphinxKnight", - "AlexChao", - "saintwinkle" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/parseInt": { - "modified": "2020-10-15T21:32:59.587Z", + "Web/SVG/Attribute/order": { + "modified": "2019-03-23T22:14:09.913Z", "contributors": [ - "hellorayza", - "SageX", - "edward870505", - "NiLinli", - "iugo", - "ziyunfei", - "tiansh" + "liyongleihf2006" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/prototype": { - "modified": "2019-03-23T22:12:02.199Z", + "Web/SVG/Attribute/origin": { + "modified": "2020-09-21T09:25:39.365Z", "contributors": [ - "AlexChao" + "SphinxKnight", + "a420980938" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toExponential": { - "modified": "2019-04-06T03:30:46.772Z", + "Web/SVG/Attribute/overflow": { + "modified": "2020-10-15T22:09:03.459Z", "contributors": [ - "zhazhjie", - "yunl819", - "helloguangxue", - "AlexChao" + "SphinxKnight", + "888aaa" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toFixed": { - "modified": "2020-10-15T21:28:32.902Z", + "Web/SVG/Attribute/path": { + "modified": "2019-01-17T01:11:59.482Z", "contributors": [ - "zeroxie", - "liuruiqi1993", - "Xiaoming666", - "rulanfenghua", - "PageYe", - "yenshen", - "Jinjiang", - "AlexChao" + "dfEric" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toLocaleString": { - "modified": "2020-10-15T21:28:46.243Z", + "Web/SVG/Attribute/pathLength": { + "modified": "2019-03-18T21:24:01.815Z", "contributors": [ - "RoXoM", - "dongchaoge", - "Sivan", - "Hugh", - "anchengjian", - "shuding", - "AlexChao" + "EXSVAMP" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toPrecision": { - "modified": "2019-09-09T23:08:23.767Z", + "Web/SVG/Attribute/patternUnits": { + "modified": "2019-03-18T21:15:24.501Z", "contributors": [ - "helloguangxue", - "AlexChao" + "Chesn" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toSource": { - "modified": "2019-04-06T03:53:43.075Z", + "Web/SVG/Attribute/pointer-events": { + "modified": "2020-10-15T22:18:55.261Z", "contributors": [ - "AlexChao" + "WebsonLeo" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toString": { - "modified": "2019-07-09T06:38:38.264Z", + "Web/SVG/Attribute/points": { + "modified": "2019-03-23T22:46:24.044Z", "contributors": [ - "LeoSpark", - "ywjco", - "xgqfrms-GitHub", - "righttoe", - "YoungChen", - "yenshen", - "AlexChao", - "teoli", - "ziyunfei" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/valueOf": { - "modified": "2019-04-06T04:03:18.487Z", + "Web/SVG/Attribute/preserveAlpha": { + "modified": "2019-03-18T21:30:40.693Z", "contributors": [ - "weiqinl", - "ziyunfei", - "yenshen", - "AlexChao" + "hy512" ] }, - "Web/JavaScript/Reference/Global_Objects/Object": { - "modified": "2020-10-15T21:07:58.316Z", + "Web/SVG/Attribute/preserveAspectRatio": { + "modified": "2019-03-23T22:02:41.003Z", "contributors": [ - "VictoriaChou", - "oldguan", - "oxyg3n", - "sunshine8752", - "yzh196", - "CelestialPhineas", - "RainSlide", - "zhangchen", - "lee-joe", - "xgqfrms-GitHub", - "kangaoxiaoshi", - "Hugh", - "tomoat", - "hxlhxl", - "Ende93", - "scscms", - "charlie", - "ziyunfei", - "paddingme", - "AlexChao", - "teoli", - "iwo" + "codepandy", + "ciki6", + "yuyx91", + "webtuotuo2017" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/GetPrototypeOf": { - "modified": "2020-10-15T21:07:55.199Z", + "Web/SVG/Attribute/primitiveUnits": { + "modified": "2019-03-23T22:14:03.826Z", "contributors": [ - "futurefeeling", - "ywjco", - "zhangchen", - "xgqfrms-GitHub", - "teoli", - "AlexChao", - "paddingme", - "ziyunfei" + "liyongleihf2006" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/Object": { - "modified": "2020-10-15T22:29:02.706Z", + "Web/SVG/Attribute/r": { + "modified": "2019-03-18T21:22:40.271Z", "contributors": [ - "jiyiwohanxing" + "realstephenzhao" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__": { - "modified": "2019-03-23T23:05:45.020Z", + "Web/SVG/Attribute/radius": { + "modified": "2019-03-23T22:46:18.311Z", "contributors": [ - "ziyunfei", - "LinusYu" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__": { - "modified": "2019-03-23T23:05:56.544Z", + "Web/SVG/Attribute/repeatCount": { + "modified": "2019-03-23T22:18:01.687Z", "contributors": [ - "ziyunfei", - "LinusYu" + "876843240", + "huainanhai" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__": { - "modified": "2019-03-23T23:14:35.158Z", + "Web/SVG/Attribute/result": { + "modified": "2019-01-16T21:31:09.328Z", "contributors": [ - "MurphyL", - "ziyunfei", - "lutaoact" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__": { - "modified": "2019-03-23T22:21:56.129Z", + "Web/SVG/Attribute/rx": { + "modified": "2019-03-18T21:00:24.171Z", "contributors": [ - "winjeysong", - "lisniuse" + "RainSlide", + "BowenSun" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/assign": { - "modified": "2020-10-21T06:50:11.039Z", + "Web/SVG/Attribute/scale": { + "modified": "2019-03-23T22:46:29.331Z", "contributors": [ - "srq18211", - "xgqfrms", - "sjnho", - "SphinxKnight", - "YF05105814", - "zac_ma", - "shery", - "shutong", - "HJava", - "Jiang-Xuan", - "zhangchen", - "xgqfrms-GitHub", - "micheal-death", - "kiyonlin", - "Wayme", - "glgjssy", - "Ende93", - "Y____C", - "zhangking", - "calmcarry", - "iamchenxin", - "ziyunfei", - "rebornix" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/constructor": { - "modified": "2020-10-15T21:22:02.873Z", + "Web/SVG/Attribute/seed": { + "modified": "2019-03-23T22:46:25.651Z", "contributors": [ - "Lan1967", - "zhangchen", - "icyzeroice", - "luoxzhg", - "Hugh", - "teoli", - "AlexChao", - "ziyunfei" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/create": { - "modified": "2020-11-17T22:40:03.747Z", + "Web/SVG/Attribute/shape-rendering": { + "modified": "2019-03-23T22:41:44.530Z", "contributors": [ - "zhuangyin", - "kaiyuan-c", - "yukyao", - "Aster.", - "symant233", - "zhanghao-zhoushan", - "Ahhaha233", - "name-dingding", - "Lan1967", - "wangzherlf", - "LuckyJoker", - "zhangchen", - "evan_Yuanzh", - "luoxzhg", - "ywjco", - "cuji", - "Tuoe", - "foreverwang", - "HuazzTsai", - "Cribug8080", - "Ende93", - "xgqfrms-GitHub", - "runighcat", - "ouonet", - "Hopcraft", - "luojia", - "AlexChao", - "teoli", - "ziyunfei", - "Chajn", - "georgewing", - "nightire", - "bingjie2680", - "fscholz", - "raymoth", - "Mgjbot", - "Kaixin110", - "Cnmahj", - "Mhoudg", - "Andyyard", - "Carrie zhxj", - "Mickeyboy", - "Verruckt", - "Taken", - "Ahong" + "maicss" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/defineProperties": { - "modified": "2020-12-13T23:47:19.929Z", + "Web/SVG/Attribute/stdDeviation": { + "modified": "2019-03-18T21:23:00.621Z", "contributors": [ - "YawnS0", - "zhangchen", - "xgqfrms-GitHub", - "microTT", - "ziyunfei", - "AlexChao", - "teoli", - "OoOoOoOo", - "leeli" + "realstephenzhao" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/defineProperty": { - "modified": "2020-12-03T03:27:16.867Z", - "contributors": [ - "daniel_tsai", - "liushuaimaya", - "symant233", - "lijinwenhg", - "RainSlide", - "sunw", - "mingzhang6", - "liuliuLiu161", - "walwimp", - "leavesster", - "onedaywen", - "junyuli1992", - "Xmader", - "zhanghy7", - "Josnk", - "lmislm", - "weidapao", - "CaptainInPHW", - "zotille", - "LeoSpark", - "i850", - "Mrdapeng", - "yuyongjun123", - "buptsky", - "ywjco", - "Wutang", - "Black-Hole", - "zhangchen", - "xiiiAtCn", - "C_Kite", - "MrITzhongzi", - "usernameisMan", - "zilong", - "ziyunfei", - "dttx123", - "win5do", - "Ende93", - "righttoe", - "hicrow", - "xgqfrms-GitHub", - "maxmeng", - "whwei", - "xuemengfei", - "riversYeHaha", - "harttle", - "coolguy", - "KingMario", - "helinjiang", - "Lenville", - "teoli", - "TimothyZhang", - "AlexChao", - "aaron4512", - "jiraiya", - "yanhaijing", - "StuPig", - "OoOoOoOo" + "Web/SVG/Attribute/string": { + "modified": "2020-10-15T22:28:09.817Z", + "contributors": [ + "Tjhxzd" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/entries": { - "modified": "2020-10-15T21:47:29.698Z", + "Web/SVG/Attribute/stroke": { + "modified": "2019-03-23T22:47:39.759Z", "contributors": [ - "symant233", - "versionlin7", - "zhangchen", - "spiritree", - "xgqfrms-GitHub", - "OshotOkill" + "fanxiaojie", + "slientomorrr" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/freeze": { - "modified": "2020-10-15T21:04:51.609Z", + "Web/SVG/Attribute/stroke-dasharray": { + "modified": "2019-08-08T05:38:03.197Z", "contributors": [ - "Frederick-S", - "lejsure", - "mingttong", - "zhangchen", - "ywjco", - "sqliang", - "zhouyuanhao", - "Ende93", - "AlexChao", - "teoli", - "ziyunfei", - "undercooled" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/fromEntries": { - "modified": "2020-10-15T22:09:07.388Z", + "Web/SVG/Attribute/stroke-dashoffset": { + "modified": "2019-10-10T16:56:45.450Z", "contributors": [ - "zhangchen", - "qiudongwei", - "iugo", - "xiaopingzhang0207", - "kohai", - "Bayes" + "ZhengYinBo", + "yanagao" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor": { - "modified": "2020-10-15T21:04:53.010Z", + "Web/SVG/Attribute/stroke-linecap": { + "modified": "2019-03-23T22:21:59.850Z", "contributors": [ - "Damoness", - "274659281", - "RoXoM", - "liuyangjoker", - "usernameisMan", - "Ende93", - "teoli", - "AlexChao", - "ArthasTree", - "ziyunfei", - "nightire" + "ZhengYinBo" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors": { - "modified": "2020-10-15T21:47:29.156Z", + "Web/SVG/Attribute/stroke-linejoin": { + "modified": "2020-10-15T21:52:22.702Z", "contributors": [ - "Aaron-Bird", - "RoXoM", - "kdex", - "Hushabyme", - "delkaka", - "ziyunfei" + "cuixiping", + "IridescentMia" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames": { - "modified": "2020-10-15T21:04:50.666Z", + "Web/SVG/Attribute/stroke-miterlimit": { + "modified": "2019-03-23T22:46:40.182Z", "contributors": [ - "woyaohaohaoxuexi", - "ywjco", - "zhangchen", - "C_Kite", - "kdex", - "Ende93", - "RandyOu", - "ChrisCindy", - "helinjiang", - "teoli", - "AlexChao", - "ziyunfei", - "Arenwisdom" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols": { - "modified": "2020-10-15T21:28:24.757Z", + "Web/SVG/Attribute/stroke-opacity": { + "modified": "2019-03-23T22:46:37.761Z", "contributors": [ - "zhangchen", - "limichange", - "AlexChao", - "ziyunfei" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": { - "modified": "2020-11-12T05:23:35.945Z", + "Web/SVG/Attribute/stroke-width": { + "modified": "2019-03-23T22:46:41.922Z", "contributors": [ - "haichao0817", - "Harry-Zhao", - "RainSlide", - "liuzhengdong", - "ShirleyM", - "xgqfrms-GitHub", - "Ende93", - "ziyunfei", - "yyj" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/is": { - "modified": "2020-10-15T21:22:02.169Z", + "Web/SVG/Attribute/style": { + "modified": "2019-10-09T03:46:30.272Z", "contributors": [ - "jaredhan418", - "Mirefire", - "ngulee", - "RainSlide", - "42", - "zhangchen", - "shaojingchao", + "xianshenglu", "xgqfrms-GitHub", - "Ende93", - "ziyunfei", - "snandy", - "teoli", - "zhangyaochun1987" + "monjer" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/isExtensible": { - "modified": "2019-03-24T12:06:06.825Z", + "Web/SVG/Attribute/target": { + "modified": "2020-10-15T22:27:15.767Z", "contributors": [ - "fanerge", - "helinjiang", - "AlexChao", - "teoli", - "ziyunfei" + "fzhyzamt", + "boli14" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": { - "modified": "2020-10-15T21:04:51.362Z", + "Web/SVG/Attribute/text-decoration": { + "modified": "2020-09-26T20:27:21.690Z", "contributors": [ - "XiongAmao", - "zhangchen", - "xgqfrms-GitHub", - "micheal-death", - "WangXiao", - "helinjiang", - "AlexChao", - "teoli", - "ziyunfei", - "undercooled" + "xuhaooo", + "qingpingy" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf": { - "modified": "2019-07-25T07:55:33.320Z", + "Web/SVG/Attribute/transform": { + "modified": "2019-10-17T10:24:00.177Z", "contributors": [ - "xhlsrj", - "xgqfrms-GitHub", - "Ende93", - "helloguangxue", - "teoli", - "AlexChao", - "ziyunfei" + "qq240814476" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/isSealed": { - "modified": "2020-10-15T21:04:48.021Z", + "Web/SVG/Attribute/type": { + "modified": "2019-09-27T11:12:53.094Z", "contributors": [ - "yuyeqianxun", - "zhangchen", - "xgqfrms-GitHub", - "Ende93", - "helinjiang", - "AlexChao", - "teoli", - "ziyunfei", - "undercooled" + "Huang2019023239" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/keys": { - "modified": "2020-10-15T21:06:49.993Z", + "Web/SVG/Attribute/units-per-em": { + "modified": "2020-10-15T22:25:05.021Z", "contributors": [ - "fbfatboy", - "Cuixote", - "liuzhengdong", - "SphinxKnight", - "Vike50", - "zhuangyin", - "dc165015", - "zhangchen", - "ywjco", - "xgqfrms-GitHub", - "Ende93", - "Lynn0108", - "kdex", - "micheal-death", - "zaxlct", - "WhiteMind", - "qdxt", - "teoli", - "AlexChao", - "ziyunfei" + "pandahara" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/preventExtensions": { - "modified": "2020-10-15T21:04:47.741Z", + "Web/SVG/Attribute/values": { + "modified": "2020-08-19T04:16:48.441Z", "contributors": [ - "Astroleander", - "zhangchen", - "recursion", - "AlexChao", - "teoli", - "ziyunfei", - "undercooled" + "keyline-1" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable": { - "modified": "2020-10-15T21:21:12.490Z", + "Web/SVG/Attribute/vector-effect": { + "modified": "2020-10-15T22:25:39.831Z", "contributors": [ - "RainSlide", - "zhangchen", - "TiaossuP", - "helloguangxue", - "Gresic", - "teoli", - "AlexChao", - "ziyunfei" + "cuixiping" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/proto": { - "modified": "2020-10-15T21:20:42.886Z", + "Web/SVG/Attribute/version": { + "modified": "2019-08-03T10:57:47.255Z", + "contributors": [ + "monkeycf", + "LiKunWillShine" + ] + }, + "Web/SVG/Attribute/viewBox": { + "modified": "2019-08-01T23:50:11.252Z", + "contributors": [ + "lovefengruoqing", + "act262" + ] + }, + "Web/SVG/Attribute/visibility": { + "modified": "2019-03-23T22:46:34.860Z", + "contributors": [ + "fanxiaojie" + ] + }, + "Web/SVG/Attribute/width": { + "modified": "2019-03-23T22:46:51.950Z", "contributors": [ - "milyyy", "Ende93", - "rjdangcc", - "HIKALU-Z", - "Btista", - "trotyl", - "wolyshaw", - "xgqfrms-GitHub", - "eeeeeeeason", - "Howard.Chen", - "Wayme", - "lisniuse", - "redcool007", - "Leslie2014", - "teoli", - "ziyunfei" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/prototype": { - "modified": "2020-10-15T21:21:47.231Z", + "Web/SVG/Attribute/x": { + "modified": "2019-03-23T22:46:48.086Z", "contributors": [ - "SphinxKnight", - "daihaoxin", - "zhangchen", - "wwy2018", - "Linjing", - "WizardAlice", - "ywjco", - "xgqfrms-GitHub", - "Cattla", - "scscms", - "webery", - "luoway", - "ziyunfei", - "LinusYu", - "teoli", - "iwo" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/seal": { - "modified": "2020-10-15T21:04:46.777Z", + "Web/SVG/Attribute/y": { + "modified": "2019-03-23T22:46:47.078Z", "contributors": [ - "1997Liusheng", - "acejerry", - "zhangchen", - "cwwjie", - "toBeTheLight", - "zixiangTang", - "AlexChao", + "jiereal", + "fanxiaojie" + ] + }, + "Web/SVG/Content_type": { + "modified": "2019-03-23T22:46:41.769Z", + "contributors": [ + "fanxiaojie" + ] + }, + "Web/SVG/Element": { + "modified": "2020-03-13T06:26:33.332Z", + "contributors": [ + "Dorence", + "RainSlide", + "fanxiaojie", + "lunix01", + "cungen", "teoli", - "ziyunfei", - "monthev" + "ethertank" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf": { - "modified": "2020-10-15T21:23:41.066Z", + "Web/SVG/Element/a": { + "modified": "2019-06-15T03:14:27.907Z", "contributors": [ - "zhuguibiao", - "fengma", - "xgqfrms-GitHub", - "kameii", - "inJs", - "xuzhijun", - "helm", + "lnh", + "sqchenxiyuan", + "Sebastianz", + "fanxiaojie", "teoli", - "ziyunfei" + "techird" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/toLocaleString": { - "modified": "2020-10-15T21:28:39.035Z", + "Web/SVG/Element/altGlyph": { + "modified": "2019-06-15T03:14:19.322Z", "contributors": [ - "ShirleyM", - "Humyang", - "zhangchen", - "AlexChao" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/toSource": { - "modified": "2020-10-15T21:21:01.572Z", + "Web/SVG/Element/altGlyphDef": { + "modified": "2019-03-23T22:46:38.701Z", "contributors": [ - "qiu_han", - "zhangchen", - "xgqfrms-GitHub", - "keller0", - "teoli", - "ziyunfei" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/toString": { - "modified": "2020-10-15T21:22:00.834Z", + "Web/SVG/Element/altGlyphItem": { + "modified": "2019-03-23T22:46:33.665Z", "contributors": [ - "RainSlide", - "jbbjs", - "johnlin0207", - "zhangchen", - "xgqfrms-GitHub", - "wizardforcel", - "Hugh", - "sabrinaluo", - "AlexChao", - "ziyunfei", - "ZhouMengkang", - "teoli" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/valueOf": { - "modified": "2020-10-15T21:19:19.149Z", + "Web/SVG/Element/animate": { + "modified": "2020-05-04T23:05:51.292Z", "contributors": [ - "microJ", - "ywjco", - "zhangchen", - "zilong-thu", - "jimwmg", + "knightyun", + "oujielong", "Ende93", - "helloguangxue", - "paddingme", - "teoli", - "ziyunfei" + "luojia", + "Sebastianz", + "fanxiaojie", + "329530588", + "lunix01" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/values": { - "modified": "2020-10-15T21:42:31.053Z", + "Web/SVG/Element/animateColor": { + "modified": "2019-03-23T22:46:35.027Z", "contributors": [ - "Bayes", - "RoXoM", - "ywjco", - "zhangchen", - "spiritree", - "percy507", - "maicss", "xgqfrms-GitHub", - "Hushabyme", - "webery" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise": { - "modified": "2020-11-09T05:18:40.533Z", + "Web/SVG/Element/animateMotion": { + "modified": "2020-10-15T21:39:29.124Z", "contributors": [ - "13126767772", - "Neo42", - "NickH", - "jackyKin", - "SandBoat", - "xgqfrms", - "woniuxingdong", - "ourai", - "w1687021088", - "xianghui-ma", - "42", - "SterileSummer", - "ZhechenLi", - "kyriejoshua", - "DHclly", - "Jiang-Xuan", - "filosfino", - "dandanbu3", - "suwu150", - "YISHI", - "Debugger-D", - "winjeysong", - "sjz2259696", - "NoroHime", - "SunApriloy", - "xutao", - "_da", - "wYhooo", - "tangHanSan", - "ThaddeusJiang", - "lindaxiao-hust", + "knightyun", + "wbamberg", + "Sebastianz", + "fanxiaojie" + ] + }, + "Web/SVG/Element/animateTransform": { + "modified": "2019-03-23T22:46:37.058Z", + "contributors": [ + "Sebastianz", + "fanxiaojie" + ] + }, + "Web/SVG/Element/circle": { + "modified": "2019-03-23T21:45:42.756Z", + "contributors": [ + "wbamberg", "xgqfrms-GitHub", - "HenryYong", - "Ende93", - "liujun121533", - "pot-code", - "lihx_hit", - "sensui7", - "udoless", - "dingxu", - "AnnAngela", - "excosy", - "billcz", - "Yidada", - "hipop", - "dear-lizhihua", - "xuanxiao2013", - "fskuok", - "mountainmoon", - "Fantasy_shao" + "Sebastianz", + "loofahsf", + "fanxiaojie", + "ziyunfei", + "cungen" + ] + }, + "Web/SVG/Element/clipPath": { + "modified": "2020-10-15T21:32:57.569Z", + "contributors": [ + "jhchen6", + "RainSlide", + "Sebastianz", + "fanxiaojie", + "huyue" + ] + }, + "Web/SVG/Element/color-profile": { + "modified": "2019-03-23T22:46:33.322Z", + "contributors": [ + "Sebastianz", + "fanxiaojie" + ] + }, + "Web/SVG/Element/cursor": { + "modified": "2020-10-15T21:39:22.908Z", + "contributors": [ + "knightyun", + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/Promise": { - "modified": "2020-10-15T22:27:28.549Z", + "Web/SVG/Element/defs": { + "modified": "2019-03-23T23:05:33.636Z", "contributors": [ - "GYN" + "Sebastianz", + "fanxiaojie", + "charlie", + "baiya" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/all": { - "modified": "2020-12-13T19:21:55.259Z", + "Web/SVG/Element/desc": { + "modified": "2019-03-23T22:46:43.461Z", "contributors": [ - "hamishwillee", - "可能你对强有什么误解", - "xgqfrms", - "Debugger-D", - "moldray", - "kite-js", - "gemmi", - "Jiang-Xuan", - "BearZ", - "higrw", - "xgqfrms-GitHub", - "rollinhup", - "Hushabyme", - "iugo", - "billcz", - "zilong-thu", - "fskuok" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/allSettled": { - "modified": "2020-11-21T01:58:43.408Z", + "Web/SVG/Element/ellipse": { + "modified": "2019-03-23T22:54:08.203Z", "contributors": [ - "xgqfrms", - "wowoqu", - "mountainmoon", - "chrisdavidmills", - "zhangchen", - "bangbang93", - "RoXoM", - "youngboy", - "SphinxKnight", - "jiaqunying" + "wbamberg", + "Sebastianz", + "fanxiaojie", + "FredWe" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/any": { - "modified": "2020-10-27T03:51:15.177Z", + "Web/SVG/Element/feBlend": { + "modified": "2019-03-23T22:46:45.814Z", "contributors": [ - "SphinxKnight", - "mashuiquan", - "damengzhang", - "laampui", - "XLCYun", - "zhangchen", - "yinguangyao" + "liyongleihf2006", + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/catch": { - "modified": "2020-10-15T21:31:34.215Z", + "Web/SVG/Element/feColorMatrix": { + "modified": "2019-03-23T23:25:05.534Z", "contributors": [ - "oldmtn", - "xycd", - "banli17", - "zhishaofei3", - "SheltonDong", - "Yevvb", - "HsuanLee", - "xgqfrms-GitHub", - "Hushabyme", - "fskuok", - "mountainmoon" + "Sebastianz", + "fanxiaojie", + "teoli", + "daniel.tian" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/finally": { - "modified": "2020-10-15T22:01:56.341Z", + "Web/SVG/Element/feComponentTransfer": { + "modified": "2019-03-23T22:46:30.620Z", "contributors": [ - "WangLeto", - "zhangchen", - "Pada", - "ZQ-jhon", - "sudoor", - "ziclee", - "zhengzongyi", - "hoshino111" + "liyongleihf2006", + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/prototype": { - "modified": "2019-06-27T05:04:40.773Z", + "Web/SVG/Element/feComposite": { + "modified": "2019-03-23T22:46:29.887Z", "contributors": [ - "SphinxKnight", - "cyancity", - "Bryannnnnnn", - "HenryYong", - "mountainmoon" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/race": { - "modified": "2020-10-15T21:34:18.502Z", + "Web/SVG/Element/feConvolveMatrix": { + "modified": "2019-08-01T01:30:07.081Z", "contributors": [ - "Cuixote", - "lastnigtic", - "zhangchen", - "Jiang-Xuan", - "xgqfrms-GitHub", - "zhang-quan-yi", - "Hushabyme", - "fskuok" + "liyongleihf2006", + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/reject": { - "modified": "2020-10-15T21:34:10.841Z", + "Web/SVG/Element/feDiffuseLighting": { + "modified": "2019-03-23T22:46:38.862Z", "contributors": [ - "zhangchen", - "ChauMing", - "Flcwl", - "SphinxKnight", - "fskuok" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/resolve": { - "modified": "2020-10-15T21:36:39.943Z", + "Web/SVG/Element/feDisplacementMap": { + "modified": "2019-03-23T22:46:34.138Z", "contributors": [ - "inlym", - "ly023", - "zhangchen", - "xiaoxiyao", - "rockedpanda", - "cyancity", - "Jiang-Xuan", - "fscholz", - "nineSean", - "purple_force", - "Zhangjd", - "ylc395" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/then": { - "modified": "2020-10-15T21:31:32.284Z", + "Web/SVG/Element/feDistantLight": { + "modified": "2019-03-23T22:46:37.517Z", "contributors": [ - "BadmasterY", - "RainSlide", - "zrefrain", - "triboby", - "litbear", - "love999262", - "Jiang-Xuan", - "LiXin", - "WenWu92", - "Kylin.this", - "HsuanLee", - "xgqfrms-GitHub", - "Ende93", - "Hushabyme", - "RandyLoop", - "hipop", - "liuyiqian", - "fskuok", - "mountainmoon" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy": { - "modified": "2020-11-29T05:45:07.225Z", + "Web/SVG/Element/feFlood": { + "modified": "2019-03-23T22:46:31.627Z", + "contributors": [ + "Sebastianz", + "fanxiaojie" + ] + }, + "Web/SVG/Element/feFuncA": { + "modified": "2020-10-15T21:39:23.537Z", "contributors": [ - "saifeiLee", - "VicterSun", "RainSlide", - "Hilshire", - "liuguanyu", - "xgqfrms-GitHub", - "zhangchen", - "Lave", - "gaoupon", - "kdex", - "gaopeng", - "07akioni", - "wzx", - "Go7hic", - "WarriorWu", - "Katherina-Miao", - "ziyunfei", - "teoli" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy": { - "modified": "2020-10-15T22:33:06.804Z", + "Web/SVG/Element/feFuncB": { + "modified": "2019-03-23T22:46:38.185Z", "contributors": [ - "zhanghaoxu0128" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler": { - "modified": "2020-10-15T21:32:21.161Z", + "Web/SVG/Element/feFuncG": { + "modified": "2019-03-23T22:46:32.939Z", "contributors": [ - "stack_vim", - "RainSlide", - "wallena3", - "daxiazilong", - "Bayes", - "SphinxKnight", - "myl0204", - "ziyunfei" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply": { - "modified": "2020-10-15T21:46:28.417Z", + "Web/SVG/Element/feFuncR": { + "modified": "2019-03-23T22:46:31.912Z", "contributors": [ - "ngtmuzi", - "wtZZx" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/construct": { - "modified": "2020-10-15T21:56:26.489Z", + "Web/SVG/Element/feGaussianBlur": { + "modified": "2019-03-23T22:46:35.725Z", "contributors": [ - "dickenslian", - "DuLinRain" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/defineProperty": { - "modified": "2019-07-17T00:09:33.026Z", + "Web/SVG/Element/feImage": { + "modified": "2019-03-23T22:46:35.585Z", "contributors": [ - "accountwind", - "Illyrix" + "AaronYehf", + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/deleteProperty": { - "modified": "2019-03-23T22:18:37.010Z", + "Web/SVG/Element/feMerge": { + "modified": "2019-03-23T22:46:36.019Z", "contributors": [ - "Illyrix" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/get": { - "modified": "2019-03-23T22:32:42.643Z", + "Web/SVG/Element/feMergeNode": { + "modified": "2019-03-23T22:46:29.748Z", "contributors": [ - "Shigma", - "ngtmuzi" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor": { - "modified": "2019-07-28T23:51:58.213Z", + "Web/SVG/Element/feMorphology": { + "modified": "2019-03-23T22:51:21.184Z", "contributors": [ - "darkmirrors", - "EPSON-LEE", - "Hushabyme" + "Sebastianz", + "fanxiaojie", + "foolof41" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/getPrototypeOf": { - "modified": "2020-10-15T21:32:20.694Z", + "Web/SVG/Element/feOffset": { + "modified": "2019-03-23T22:46:37.362Z", "contributors": [ - "RainSlide", - "OStoneO", - "SphinxKnight", - "ziyunfei" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/has": { - "modified": "2019-08-25T22:51:33.932Z", + "Web/SVG/Element/fePointLight": { + "modified": "2019-03-23T22:46:33.171Z", "contributors": [ - "wonschangge", - "EPSON-LEE", - "Hearmen" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/isExtensible": { - "modified": "2020-10-15T21:59:04.944Z", + "Web/SVG/Element/feSpecularLighting": { + "modified": "2019-03-23T22:46:21.088Z", "contributors": [ - "wonschangge", - "cxftj" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/ownKeys": { - "modified": "2019-08-25T23:12:08.688Z", + "Web/SVG/Element/feSpotLight": { + "modified": "2019-03-23T22:46:30.010Z", "contributors": [ - "wonschangge", - "daiqingyun", - "DuLinRain" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/preventExtensions": { - "modified": "2020-10-15T21:59:08.645Z", + "Web/SVG/Element/feTile": { + "modified": "2019-03-23T22:46:20.383Z", "contributors": [ - "jinwanmian", - "wonschangge", - "zxh19890103", - "RoXoM", - "varcat" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/set": { - "modified": "2020-10-15T21:46:38.211Z", + "Web/SVG/Element/feTurbulence": { + "modified": "2019-03-23T22:46:22.298Z", "contributors": [ - "RainSlide", - "wonschangge", - "wtZZx", - "ngtmuzi" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/setPrototypeOf": { - "modified": "2020-10-15T21:59:05.778Z", + "Web/SVG/Element/filter": { + "modified": "2020-07-14T05:46:35.376Z", "contributors": [ - "varcat" + "Yang_Gia", + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Proxy/revocable": { - "modified": "2020-10-15T21:32:15.521Z", + "Web/SVG/Element/font": { + "modified": "2019-03-23T22:43:54.105Z", "contributors": [ - "RainSlide", - "SphinxKnight", - "ziyunfei" + "Sebastianz", + "fanxiaojie", + "charlie" ] }, - "Web/JavaScript/Reference/Global_Objects/RangeError": { - "modified": "2019-03-23T22:27:07.051Z", + "Web/SVG/Element/font-face": { + "modified": "2019-03-23T23:04:56.439Z", "contributors": [ - "wizardforcel", - "MurphyL", - "yatace" + "Sebastianz", + "charlie" ] }, - "Web/JavaScript/Reference/Global_Objects/RangeError/prototype": { - "modified": "2020-10-15T22:06:54.468Z", + "Web/SVG/Element/font-face-format": { + "modified": "2019-03-23T22:46:32.676Z", "contributors": [ - "pea3nut" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/ReferenceError": { - "modified": "2019-03-23T22:52:45.441Z", + "Web/SVG/Element/font-face-name": { + "modified": "2019-03-23T22:46:33.056Z", "contributors": [ - "funroller", - "Tienyz" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype": { - "modified": "2020-10-15T22:04:38.794Z", + "Web/SVG/Element/font-face-src": { + "modified": "2019-03-18T20:41:42.540Z", "contributors": [ - "Mal_akh" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect": { - "modified": "2020-10-15T21:38:03.417Z", + "Web/SVG/Element/font-face-uri": { + "modified": "2019-03-23T22:46:38.431Z", "contributors": [ - "tita0x00", - "LeonDWong", - "z1948296027", - "ZhangWei-KUMO", - "Akenokoru", - "Ende93", - "AlixWang", - "tanggd", - "Tommy-White", - "linzx1993", - "RoXoM", + "Sebastianz", + "fanxiaojie" + ] + }, + "Web/SVG/Element/foreignObject": { + "modified": "2020-10-15T21:39:29.342Z", + "contributors": [ + "hanjc1993", + "cnhekai", "zhangchen", - "xgqfrms-GitHub", - "mo-n", - "wzx", - "ziyunfei" + "kamilic", + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/apply": { - "modified": "2020-10-15T21:46:16.764Z", + "Web/SVG/Element/g": { + "modified": "2019-03-23T22:55:45.907Z", "contributors": [ - "Ende93", - "IAIAE" + "Sebastianz", + "fanxiaojie", + "monjer" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/construct": { - "modified": "2020-07-16T14:15:43.959Z", + "Web/SVG/Element/glyph": { + "modified": "2019-03-23T22:55:52.238Z", "contributors": [ - "oxyg3n", - "caolvchong", - "xiaoxionganna", - "tornoda", - "sqqihao" + "Sebastianz", + "fanxiaojie", + "charlie" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty": { - "modified": "2020-10-15T21:51:24.597Z", + "Web/SVG/Element/glyphRef": { + "modified": "2019-03-23T22:46:32.815Z", "contributors": [ - "laampui", - "tornoda", - "charlesthink", - "Hushabyme" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty": { - "modified": "2019-07-05T03:12:53.100Z", + "Web/SVG/Element/hkern": { + "modified": "2019-03-23T22:46:35.411Z", "contributors": [ - "tornoda", - "Hushabyme" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/get": { - "modified": "2020-10-15T21:51:21.601Z", + "Web/SVG/Element/image": { + "modified": "2019-03-23T23:07:18.007Z", "contributors": [ - "stupidsongshu", - "tornoda", - "AozakiOrenji", - "Hushabyme", - "EpsilonYi" + "tjyas", + "Sebastianz", + "fanxiaojie", + "lrz8745", + "cuixiping" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor": { - "modified": "2019-03-23T22:20:49.977Z", + "Web/SVG/Element/line": { + "modified": "2019-07-31T04:23:35.374Z", "contributors": [ - "RoXoM", - "Hushabyme" + "wbamberg", + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf": { - "modified": "2020-10-15T21:51:25.998Z", + "Web/SVG/Element/linearGradient": { + "modified": "2019-07-01T05:50:18.527Z", "contributors": [ - "徐鹏跃", - "RoXoM", - "Hushabyme" + "Sebastianz", + "fanxiaojie", + "ziyunfei", + "xile611" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/has": { - "modified": "2019-03-18T21:00:09.070Z", + "Web/SVG/Element/marker": { + "modified": "2019-03-23T23:03:51.340Z", "contributors": [ - "sjpeter", - "IAIAE" + "wbamberg", + "liyongleihf2006", + "Sebastianz", + "fanxiaojie", + "fonglezen" + ] + }, + "Web/SVG/Element/mask": { + "modified": "2019-03-23T23:03:51.605Z", + "contributors": [ + "wbamberg", + "Sebastianz", + "fanxiaojie", + "fonglezen" + ] + }, + "Web/SVG/Element/metadata": { + "modified": "2019-03-23T22:46:43.887Z", + "contributors": [ + "Sebastianz", + "fanxiaojie" + ] + }, + "Web/SVG/Element/missing-glyph": { + "modified": "2019-03-23T23:04:57.001Z", + "contributors": [ + "Sebastianz", + "fanxiaojie", + "fonglezen", + "charlie" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible": { - "modified": "2019-03-23T22:20:41.186Z", + "Web/SVG/Element/mpath": { + "modified": "2019-03-23T22:46:38.309Z", "contributors": [ - "cxftj", - "Hushabyme" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys": { - "modified": "2020-10-15T21:51:25.621Z", + "Web/SVG/Element/path": { + "modified": "2019-03-23T23:07:18.417Z", "contributors": [ - "zhangchen", - "liuy1994", - "Hushabyme" + "Sebastianz", + "fanxiaojie", + "cuixiping" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions": { - "modified": "2020-10-15T21:51:26.999Z", + "Web/SVG/Element/pattern": { + "modified": "2019-03-23T23:03:50.981Z", "contributors": [ - "Astroleander", - "RoXoM", - "Hushabyme" + "wbamberg", + "Sebastianz", + "fanxiaojie", + "fonglezen" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/set": { - "modified": "2020-10-15T21:51:25.331Z", + "Web/SVG/Element/polygon": { + "modified": "2019-03-23T23:13:30.746Z", "contributors": [ - "zero7u", - "AozakiOrenji", - "Hushabyme" + "wbamberg", + "Sebastianz", + "fanxiaojie", + "ziyunfei", + "fly-bird" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf": { - "modified": "2020-10-15T21:51:25.701Z", + "Web/SVG/Element/polyline": { + "modified": "2019-03-23T22:57:44.713Z", "contributors": [ - "徐鹏跃", - "Hushabyme" + "wbamberg", + "Sebastianz", + "fanxiaojie", + "e26h" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/比较_Reflect_和_Object_方法": { - "modified": "2020-09-02T03:21:36.745Z", + "Web/SVG/Element/radialGradient": { + "modified": "2020-10-15T21:39:21.881Z", "contributors": [ - "tita0x00" + "realstephenzhao", + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp": { - "modified": "2020-12-10T23:34:38.471Z", + "Web/SVG/Element/rect": { + "modified": "2019-03-23T22:57:44.926Z", "contributors": [ - "ruienger", - "jingkaimori", - "空杉心雨后", - "ll009366", - "Ende93", - "fanerge", - "daijie", "wbamberg", - "zhuangyin", - "YoungChen", - "myl0204", - "xgqfrms-GitHub", - "kiling", - "biaocy", - "fuchao2012", - "shuata", - "xgqfrms", - "KingMario", - "vbnjfhty", - "y8n", - "tabooc", - "jamesxu", - "teoli", - "AlexChao", - "chyee", - "Darrel.Hsu", - "photino", - "ziyunfei", - "fishenal", - "akawhy", - "shi_zheng", - "GreatHan", - "Hans huang", - "Mickeyboy" + "Sebastianz", + "fanxiaojie", + "e26h" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/@@match": { - "modified": "2020-10-15T21:49:08.862Z", + "Web/SVG/Element/script": { + "modified": "2019-03-23T22:46:33.996Z", "contributors": [ - "Ende93", - "wizardforcel", - "boatlet" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll": { - "modified": "2020-10-15T22:16:46.561Z", + "Web/SVG/Element/set": { + "modified": "2019-08-05T06:51:54.590Z", "contributors": [ - "c1er" + "Sebastianz", + "fanxiaojie", + "baiya" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/@@replace": { - "modified": "2020-10-15T21:54:34.957Z", + "Web/SVG/Element/stop": { + "modified": "2019-03-23T22:46:37.919Z", "contributors": [ - "javenl", - "LeoQuote", - "876843240", - "fanyer" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/@@search": { - "modified": "2019-03-23T22:11:28.976Z", + "Web/SVG/Element/style": { + "modified": "2019-03-23T22:46:35.874Z", "contributors": [ - "fanyer" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/@@species": { - "modified": "2019-03-23T22:18:27.389Z", + "Web/SVG/Element/svg": { + "modified": "2019-03-23T23:03:45.347Z", "contributors": [ - "wizardforcel" + "alphabet007", + "liyongleihf2006", + "Sebastianz", + "fanxiaojie", + "charlie", + "fonglezen" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/@@split": { - "modified": "2019-08-22T23:28:14.164Z", + "Web/SVG/Element/switch": { + "modified": "2019-03-23T23:03:50.332Z", "contributors": [ - "fangyulovechina", - "fanyer" + "Sebastianz", + "fanxiaojie", + "fonglezen" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/RegExp": { - "modified": "2020-10-15T22:33:53.145Z", + "Web/SVG/Element/symbol": { + "modified": "2019-03-23T23:05:34.325Z", "contributors": [ - "jingkaimori" + "Sebastianz", + "fanxiaojie", + "baiya" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/compile": { - "modified": "2019-03-23T22:22:52.399Z", + "Web/SVG/Element/text": { + "modified": "2019-03-23T23:05:43.568Z", "contributors": [ - "kameii" + "Sebastianz", + "jyy12", + "fanxiaojie", + "charlie", + "baiya" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/dotAll": { - "modified": "2020-10-15T22:16:46.676Z", + "Web/SVG/Element/textPath": { + "modified": "2019-03-23T23:05:43.375Z", "contributors": [ - "c1er" + "Sebastianz", + "fanxiaojie", + "baiya" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/exec": { - "modified": "2020-10-15T21:26:53.403Z", + "Web/SVG/Element/title": { + "modified": "2019-03-23T22:46:43.066Z", "contributors": [ - "CarrotB", - "dear-lizhihua", - "PageYe", - "righttoe", - "shiddong", - "ibufu", - "nandayaduo", - "Marco_dev", - "xgqfrms-GitHub", - "hangyangws", - "LiiiiittleRain", - "paddingme", - "baiya", - "teoli", - "AlexChao", - "ziyunfei", - "LinusYu" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/flags": { - "modified": "2019-07-04T23:57:57.114Z", + "Web/SVG/Element/tref": { + "modified": "2019-03-23T23:05:44.122Z", "contributors": [ - "wizardforcel" + "Sebastianz", + "fanxiaojie", + "baiya" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/global": { - "modified": "2019-07-04T23:58:07.262Z", + "Web/SVG/Element/tspan": { + "modified": "2019-03-23T23:29:30.380Z", "contributors": [ + "wbamberg", + "Sebastianz", + "fanxiaojie", "teoli", - "AlexChao" + "flyonok" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase": { - "modified": "2019-07-04T23:54:43.220Z", + "Web/SVG/Element/use": { + "modified": "2019-03-23T22:46:45.349Z", "contributors": [ - "teoli", - "AlexChao" + "Sebastianz", + "ObooChin", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/input": { - "modified": "2019-04-16T05:59:34.644Z", + "Web/SVG/Element/view": { + "modified": "2019-06-15T03:14:56.821Z", "contributors": [ - "gh1031", - "teoli", - "wizardforcel" + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex": { - "modified": "2019-07-04T23:55:43.642Z", + "Web/SVG/Element/vkern": { + "modified": "2020-10-15T21:39:26.145Z", "contributors": [ - "teoli", - "AlexChao", - "ziyunfei", - "Wjsl" + "RainSlide", + "Sebastianz", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch": { - "modified": "2019-03-23T22:18:26.965Z", + "Web/SVG/Linking": { + "modified": "2019-11-28T05:35:16.253Z", "contributors": [ - "teoli", - "wizardforcel" + "tangguolong" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/lastParen": { - "modified": "2019-03-23T22:18:27.095Z", + "Web/SVG/Namespaces_Crash_Course": { + "modified": "2019-10-11T20:02:55.677Z", "contributors": [ - "teoli", - "wizardforcel" + "pacexy", + "cyemeng", + "876843240", + "RongMine", + "Ljrou", + "charlie" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/leftContext": { - "modified": "2019-03-23T22:18:24.587Z", + "Web/SVG/SVG_1.1_Support_in_Firefox": { + "modified": "2019-03-23T22:52:10.546Z", "contributors": [ - "teoli", - "wizardforcel" + "Kylexii", + "sunxiang", + "ziyunfei", + "lunix01" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/multiline": { - "modified": "2019-07-04T23:59:21.859Z", + "Web/SVG/SVG_animation_with_SMIL": { + "modified": "2019-03-23T22:46:05.864Z", "contributors": [ - "teoli", - "AlexChao" + "WindStormrage", + "fscholz", + "Jackandjohn", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/n": { - "modified": "2019-07-12T00:53:55.955Z", + "Web/SVG/SVG_as_an_Image": { + "modified": "2019-03-23T22:46:05.004Z", "contributors": [ - "teoli", - "fengma", - "xgqfrms-GitHub", - "AlixWang" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/prototype": { - "modified": "2019-07-08T23:50:51.861Z", + "Web/SVG/Tutorial": { + "modified": "2019-08-15T22:27:47.736Z", "contributors": [ + "AngelName", + "Pehfan", + "simongfxu", + "xgqfrms", + "fanxiaojie", + "charlie", "teoli", - "AlexChao", - "ziyunfei" + "ziyunfei", + "Dx.Yang" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/rightContext": { - "modified": "2019-03-23T22:18:24.457Z", + "Web/SVG/Tutorial/Basic_Shapes": { + "modified": "2020-05-17T23:40:20.747Z", "contributors": [ - "teoli", - "wizardforcel" + "nyz123", + "0229xiang", + "851091009", + "VicYu", + "fanxiaojie", + "zldream1106", + "act262" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/source": { - "modified": "2019-07-04T23:56:46.237Z", + "Web/SVG/Tutorial/Basic_Transformations": { + "modified": "2019-03-23T22:46:26.560Z", "contributors": [ - "ziyunfei", - "yenshen" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/sticky": { - "modified": "2020-10-15T21:51:29.415Z", + "Web/SVG/Tutorial/Clipping_and_masking": { + "modified": "2020-05-16T12:44:05.454Z", "contributors": [ - "Ende93", - "Ahhaha233", - "wenmin92" + "Yayure", + "hebby", + "chenronghui", + "zhangyifan", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/test": { - "modified": "2020-11-19T10:20:16.081Z", + "Web/SVG/Tutorial/Fills_and_Strokes": { + "modified": "2019-07-02T00:36:20.256Z", "contributors": [ - "zhuangyin", - "ReedSun", - "symant233", - "ridiculousjam", - "zqyue", - "xgqfrms-GitHub", - "kameii", - "teoli", - "AlexChao" + "0229xiang", + "ZhengYinBo", + "fanxiaojie", + "act262" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/toSource": { - "modified": "2019-07-04T23:42:36.181Z", + "Web/SVG/Tutorial/Filter_effects": { + "modified": "2020-05-16T13:46:25.008Z", "contributors": [ - "teoli", - "ziyunfei" + "Yayure", + "knightyun", + "ZeroJsus", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/toString": { - "modified": "2019-07-04T23:42:41.541Z", + "Web/SVG/Tutorial/Getting_Started": { + "modified": "2020-02-19T07:42:57.768Z", "contributors": [ - "teoli", - "AlexChao" + "Jamie0327", + "qinggge", + "SallyOne", + "maozhenhua2", + "shuihuo", + "SparrowLiu", + "fanxiaojie", + "dolphinX" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/unicode": { - "modified": "2019-07-04T23:59:38.859Z", + "Web/SVG/Tutorial/Gradients": { + "modified": "2019-03-23T22:50:18.555Z", "contributors": [ - "wizardforcel" + "fanxiaojie", + "ziyunfei", + "zldream1106" ] }, - "Web/JavaScript/Reference/Global_Objects/Set": { - "modified": "2020-11-10T03:33:00.037Z", + "Web/SVG/Tutorial/Introduction": { + "modified": "2020-06-30T12:46:55.614Z", "contributors": [ - "SphinxKnight", - "Ongve", - "Ende93", - "wallena3", - "woshiqiang1", - "houzp", - "MYWProgram", - "zhuangyin", - "zhangchen", - "Jiang-Xuan", - "buckarooch", - "xgqfrms-GitHub", - "CoCooCo", - "JJPandari", - "tang45", - "xdsnet", - "dingxu", - "tngan", - "ziyunfei", - "fskuok", - "tiansh", + "antimonyGu", + "Jamie0327", + "daGaiGuanYu", + "XHMM", + "ZeroJsus", + "shuihuo", + "ezirmusitua", + "xgqfrms", + "fanxiaojie", + "charlie", "teoli", - "zhangyaochun1987" + "ziyunfei", + "Dx.Yang" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/@@iterator": { - "modified": "2020-10-15T22:31:10.470Z", + "Web/SVG/Tutorial/Other_content_in_SVG": { + "modified": "2020-05-16T13:02:06.652Z", "contributors": [ - "Ende93" + "Yayure", + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/@@species": { - "modified": "2020-10-15T22:05:00.184Z", + "Web/SVG/Tutorial/Paths": { + "modified": "2020-10-26T07:22:08.293Z", "contributors": [ - "Ende93", - "susan007", - "helloyong" + "WindStormrage", + "esc", + "xgqfrms", + "chenyang", + "hebby", + "mochase", + "xianshenglu", + "vlaw", + "fanxiaojie", + "AnnGing", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/Set": { - "modified": "2020-10-15T22:31:09.443Z", + "Web/SVG/Tutorial/Patterns": { + "modified": "2020-05-04T00:26:06.468Z", "contributors": [ - "Ende93" + "knightyun", + "fanxiaojie", + "zldream1106" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/add": { - "modified": "2020-10-15T21:28:25.102Z", + "Web/SVG/Tutorial/Positions": { + "modified": "2019-06-07T11:18:02.352Z", "contributors": [ - "Mr_kaze", - "zhuangyin", - "fscholz", - "MaZheng", - "Ende93", - "Skyang", - "yenshen", + "ymjrcc", + "fanxiaojie", + "BlackGlory", + "jiraiya", + "teoli", "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/clear": { - "modified": "2019-03-23T23:13:23.536Z", + "Web/SVG/Tutorial/SVG_Image_Tag": { + "modified": "2019-03-23T22:46:20.960Z", "contributors": [ - "MaZheng", - "Ende93", - "ziyunfei" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/delete": { - "modified": "2019-07-08T00:12:51.875Z", + "Web/SVG/Tutorial/SVG_In_HTML_Introduction": { + "modified": "2019-10-30T00:49:48.215Z", "contributors": [ - "adonWong", - "Ende93", - "ziyunfei" + "donley828", + "crazy_rat", + "chrisdavidmills", + "zldream1106", + "lunix01" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/entries": { - "modified": "2019-03-23T22:25:08.761Z", + "Web/SVG/Tutorial/SVG_fonts": { + "modified": "2019-03-23T22:46:23.842Z", "contributors": [ - "Lunaticf", - "timlee1128" + "fanxiaojie" + ] + }, + "Web/SVG/Tutorial/Texts": { + "modified": "2020-07-06T07:25:02.894Z", + "contributors": [ + "zch233", + "fsx950223", + "fanxiaojie", + "FEbyland" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/forEach": { - "modified": "2019-08-05T06:54:27.458Z", + "Web/SVG/Tutorial/Tools_for_SVG": { + "modified": "2019-03-23T22:46:28.488Z", "contributors": [ - "tzmf", - "Jonnypeng", - "SphinxKnight", - "myl0204", - "tommyzqfeng", - "timlee1128", - "201341", - "gaigeshen" + "fanxiaojie" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/has": { - "modified": "2019-07-08T00:21:03.715Z", + "Web/Security": { + "modified": "2019-09-10T16:49:46.462Z", "contributors": [ - "marsgt", - "MaZheng", "SphinxKnight", - "Nonlone" + "cooldrivez", + "zhangppbb", + "RainSlide", + "msforest", + "Vivi-wu", + "ziyunfei", + "Breezewish", + "Freeopen" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/size": { - "modified": "2020-10-15T21:41:25.836Z", + "Web/Security/Same-origin_policy": { + "modified": "2020-04-07T00:07:57.795Z", "contributors": [ - "zhangchen", - "SphinxKnight", - "springuper", - "OmniP" + "H3lloTom", + "dingziqi", + "769344359", + "AOYE", + "LvChengbin", + "Jerry4013", + "Syclover-u2400", + "iceytea", + "moyamoyarua", + "LeezQ", + "Akiq2016", + "zhuangyin", + "heekei", + "sqchenxiyuan", + "firedent", + "orangle", + "xgqfrms-GitHub", + "Ende93", + "Jim_Chen", + "lyhper", + "linzhixiong", + "J22Melody", + "codinglion", + "ziyunfei", + "Taro", + "mr3", + "teoli", + "monjer", + "kusamba", + "Ghostheaven" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/values": { - "modified": "2020-10-15T21:48:24.054Z", + "Web/Security/Secure_Contexts": { + "modified": "2020-09-16T05:44:30.532Z", "contributors": [ - "Mr_kaze", - "qiudongwei", - "marsgt", - "holynewbie" + "gjc9620" ] }, - "Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer": { - "modified": "2020-10-15T21:52:10.163Z", + "Web/Security/Securing_your_site": { + "modified": "2019-05-30T06:18:16.799Z", "contributors": [ - "wallena3", - "szengtal", - "RoXoM", - "AnnAngela", + "Qos", + "Roscoe93", + "keep2zero", "xgqfrms-GitHub", - "winjeysong" + "hashedhyphen" ] }, - "Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/byteLength": { - "modified": "2020-10-15T21:58:35.573Z", + "Web/Security/Securing_your_site/Turning_off_form_autocompletion": { + "modified": "2020-06-26T14:51:08.712Z", "contributors": [ - "wallena3", + "Clarkkkk", + "zhangchen", + "nick-ChenZe", + "tsejx", + "1010Tech", "xgqfrms-GitHub" ] }, - "Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype": { - "modified": "2020-10-15T21:58:38.272Z", + "Web/Tutorials": { + "modified": "2020-09-27T10:44:48.931Z", "contributors": [ - "wallena3", - "xgqfrms-GitHub" + "GKilyar", + "StorytellerF", + "yzweb2018", + "shengoo", + "yangzi", + "wumouse", + "185-5162-9169", + "Ende93", + "SamuraiMe", + "cehnjing", + "shengyouxiao", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/slice": { - "modified": "2020-10-15T21:58:38.787Z", + "Web/WebDriver": { + "modified": "2020-10-15T22:20:19.059Z", "contributors": [ - "wallena3", - "xgqfrms-GitHub" + "lvbaiying", + "ZQ-jhon" ] }, - "Web/JavaScript/Reference/Global_Objects/String": { - "modified": "2020-05-13T00:15:31.329Z", + "Web/Web_Components": { + "modified": "2020-05-14T03:39:38.306Z", "contributors": [ - "canyi1942", - "RainSlide", - "Ejgwg0629", - "transping", - "zhangsenhua", - "frankfang1990", - "huangbom", + "lc15011977647", + "RequireSun", + "ujsxn", + "zjffun", + "YellowPure", + "FlyingPig", + "FarmerZhou", + "siwei_null", + "zilong-thu", + "jscgq", + "EliYao", + "zhangchen", "xgqfrms-GitHub", - "ezirmusitua", - "sevenqi", - "ouzz413", - "MrBeike", - "msmailcode", - "git123hub", - "Soy", - "webpansy", - "liurenxingyu", - "lunix01", - "FredWe", - "teoli", - "ziyunfei" + "little-tomorrow", + "chaosdog", + "xiaokk06", + "jchnxu", + "Fantasy_shao" ] }, - "Web/JavaScript/Reference/Global_Objects/String/@@iterator": { - "modified": "2019-10-14T06:47:30.493Z", + "Web/Web_Components/Using_custom_elements": { + "modified": "2020-08-13T09:13:52.060Z", "contributors": [ - "SageX", - "Dewey." + "justaverygoodboy", + "ytxmobile", + "LemonTency", + "Xiaoming666", + "bei6", + "YellowPure", + "rianma", + "fu1252", + "olivewind", + "zhang-quan-yi" ] }, - "Web/JavaScript/Reference/Global_Objects/String/Trim": { - "modified": "2020-10-15T21:07:55.641Z", + "Web/Web_Components/Using_shadow_DOM": { + "modified": "2020-06-08T05:35:09.239Z", "contributors": [ - "brizer", + "Junezm", "RainSlide", - "SageX", - "xgqfrms-GitHub", - "Ende93", - "helloguangxue", - "teoli", - "ziyunfei" + "Louis-7", + "haoliangwu", + "zhang-quan-yi" ] }, - "Web/JavaScript/Reference/Global_Objects/String/TrimLeft": { - "modified": "2020-10-15T21:07:56.369Z", + "Web/Web_Components/Using_templates_and_slots": { + "modified": "2020-11-09T10:43:35.619Z", "contributors": [ - "RainSlide", - "SageX", - "zhangchen", - "xgqfrms-GitHub", - "teoli", - "ziyunfei" + "luzhenqian", + "jingkaimori", + "Yayure", + "whuhyw", + "sjpeter", + "Czzzx", + "JasonKee", + "xgqfrms", + "xrr2016", + "zxk7516" ] }, - "Web/JavaScript/Reference/Global_Objects/String/TrimRight": { - "modified": "2020-10-15T21:07:55.509Z", + "Web/XML": { + "modified": "2019-09-25T00:01:50.050Z", "contributors": [ - "SageX", - "zhangchen", - "teoli", - "Ende93", - "xgqfrms-GitHub", - "ziyunfei" + "amalia77", + "ExE-Boss" ] }, - "Web/JavaScript/Reference/Global_Objects/String/anchor": { - "modified": "2019-10-13T02:57:05.433Z", + "Web/XML/XML_Introduction": { + "modified": "2020-03-04T03:08:47.854Z", "contributors": [ - "SageX", - "xgl", - "wwzText", - "Noly1990", - "teoli", - "AlexChao" + "Whitetea00", + "Joria0414", + "fish-inu", + "ExE-Boss", + "DarrenZhang01", + "pluwen", + "xgqfrms-GitHub", + "Y001", + "Mgjbot", + "Gelihui", + "Kakurady", + "Dbseti" ] }, - "Web/JavaScript/Reference/Global_Objects/String/big": { - "modified": "2019-08-30T00:30:39.502Z", + "Web/XPath": { + "modified": "2019-03-18T20:43:12.282Z", "contributors": [ - "wizardforcel", - "Valora", - "JokerPrince" + "RainSlide", + "Ke.shidong", + "ziyunfei", + "cattail2012@gmail.com" ] }, - "Web/JavaScript/Reference/Global_Objects/String/blink": { - "modified": "2019-08-30T00:33:08.296Z", + "Web/XPath/Axes": { + "modified": "2019-03-18T20:43:12.087Z", "contributors": [ - "wizardforcel", - "JokerPrince" + "ziyunfei", + "Cuimingda" ] }, - "Web/JavaScript/Reference/Global_Objects/String/bold": { - "modified": "2019-08-30T00:38:46.883Z", + "Web/XSLT": { + "modified": "2019-03-23T23:52:51.686Z", "contributors": [ - "Ende93", - "Agp12010" + "Gingercat", + "ziyunfei", + "Freeopen", + "Lycvip" ] }, - "Web/JavaScript/Reference/Global_Objects/String/charAt": { - "modified": "2019-08-30T00:20:40.323Z", + "Web/XSLT/Transforming_XML_with_XSLT": { + "modified": "2019-03-23T23:52:45.330Z", "contributors": [ - "Noly1990", - "xgqfrms-GitHub", - "Hugh", - "MarianZhang", - "teoli", - "AlexChao" + "chrisdavidmills", + "ziyunfei", + "Freeopen" ] }, - "Web/JavaScript/Reference/Global_Objects/String/charCodeAt": { - "modified": "2020-10-15T21:28:56.069Z", + "WebAssembly": { + "modified": "2020-10-15T21:52:52.867Z", "contributors": [ - "laampui", - "ChenNing02", - "RainSlide", - "lordisback", - "JuFoFu", - "KMKNKK", - "wizardforcel", + "callmeDAY", + "zhangchen", + "ldwformat", + "zhuangyin", + "kingysu", "xgqfrms-GitHub", - "baishusama", - "VmanXu", - "NotFinally", - "MarianZhang", - "Bigbigbig", - "greatbug", - "BeHappyF", - "LittleJake", - "Meteormatt", - "sweetliu", - "teoli", - "AlexChao" + "disoul" ] }, - "Web/JavaScript/Reference/Global_Objects/String/codePointAt": { - "modified": "2019-03-18T20:48:31.110Z", + "WebAssembly/C_to_wasm": { + "modified": "2020-11-17T22:59:58.305Z", "contributors": [ - "transping", - "xdsnet", - "anchengjian" + "CGerAJ", + "zhanyuzhang", + "xinghuolei", + "rui-space", + "jinliming2", + "johncido", + "eeve", + "kingysu", + "hungtcs", + "AdrianDuan", + "disoul" ] }, - "Web/JavaScript/Reference/Global_Objects/String/concat": { - "modified": "2020-10-15T21:07:52.015Z", + "WebAssembly/Caching_modules": { + "modified": "2019-03-25T04:00:16.303Z", "contributors": [ - "laampui", - "Skyang", - "yenshen", - "teoli", - "AlexChao", - "ziyunfei" + "Seasonley", + "rui-space", + "kingysu" ] }, - "Web/JavaScript/Reference/Global_Objects/String/endsWith": { - "modified": "2020-10-15T21:21:07.320Z", + "WebAssembly/Concepts": { + "modified": "2019-03-18T20:54:48.847Z", "contributors": [ - "laampui", - "RainSlide", - "Veneno", - "LasyIsLazy", - "hongxu.Wei", - "terasum", - "SphinxKnight", - "percy507", - "teoli", - "ziyunfei" + "xiongcong", + "rui-space", + "ziyunfei", + "kingysu" ] }, - "Web/JavaScript/Reference/Global_Objects/String/fixed": { - "modified": "2019-03-23T22:39:09.482Z", + "WebAssembly/Exported_functions": { + "modified": "2019-07-23T04:14:30.673Z", "contributors": [ - "Ende93", - "chengxc" + "imechZhangLY", + "rui-space", + "kingysu" ] }, - "Web/JavaScript/Reference/Global_Objects/String/fontcolor": { - "modified": "2019-03-23T22:20:59.919Z", + "WebAssembly/Loading_and_running": { + "modified": "2019-03-18T20:54:50.799Z", "contributors": [ - "Jiang-Xuan", - "jieouba" + "kingysu", + "xgqfrms-GitHub" ] }, - "Web/JavaScript/Reference/Global_Objects/String/fontsize": { - "modified": "2019-03-23T22:22:45.888Z", + "WebAssembly/Rust_to_wasm": { + "modified": "2020-11-12T06:21:14.353Z", "contributors": [ - "JokerPrince" + "longfangsong", + "linghucq1", + "yanchongwen101", + "Syaki", + "SphinxKnight", + "SToneX", + "wymm0008" ] }, - "Web/JavaScript/Reference/Global_Objects/String/fromCharCode": { - "modified": "2020-10-15T21:28:54.977Z", + "WebAssembly/Text_format_to_wasm": { + "modified": "2020-01-27T02:12:13.951Z", "contributors": [ - "叶扬", - "laampui", - "weiqinl", - "Jiang-Xuan", + "coderzh", + "acelan86", "xgqfrms-GitHub", - "AlexChao" + "kingysu" ] }, - "Web/JavaScript/Reference/Global_Objects/String/fromCodePoint": { - "modified": "2020-10-15T21:44:06.995Z", + "WebAssembly/Understanding_the_text_format": { + "modified": "2019-03-23T22:12:45.612Z", "contributors": [ - "RainSlide", - "varcat", - "transping", - "xiayefeng", - "Hushabyme", - "Cattla", - "lastjune" + "yangdonglai", + "rui-space", + "aaron_li", + "Rexli", + "rockfire", + "acelan86", + "kingysu", + "chyingp", + "itminus" ] }, - "Web/JavaScript/Reference/Global_Objects/String/includes": { - "modified": "2020-10-15T21:20:32.653Z", + "WebAssembly/Using_the_JavaScript_API": { + "modified": "2020-08-18T06:38:27.755Z", "contributors": [ - "laampui", - "1v9", - "hongxu.Wei", + "jealyn", + "xgqfrms", + "coderzh", + "billkang", + "huangjj27", + "kingysu", + "skyfore", + "xgqfrms-GitHub" + ] + }, + "learn": { + "modified": "2020-07-16T22:43:49.854Z", + "contributors": [ + "Roy-Tian", + "SirnoChan", + "mrg123", + "wangfangping", + "chentao106", + "916106840510", + "wushengde", + "MingdaHIT", + "JiaHua", + "Aslemonssss", + "SurfingFish", + "svarlamov", + "RanceLotusLee", + "miye", + "xmcgcg", + "codeofjackie", + "xixilog", + "Forbidden", + "Bearies", + "varcat", + "2526chen", + "zs808", + "gao5252", + "xcffl", + "sefer", "xgqfrms-GitHub", - "Zertu", - "JokerPrince", - "zilong-thu", + "fan19900404", + "WavinFlag", + "Simcookies", + "m4jing", + "liminjun", + "sunxiang", + "Ende93", + "Meteormatt", + "lunix01", + "27", + "chenhui7373", "teoli", "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/String/indexOf": { - "modified": "2020-10-15T21:28:57.881Z", + "learn/Accessibility": { + "modified": "2020-07-16T22:40:01.477Z", + "contributors": [ + "shinexyt", + "pixang", + "yatarphae", + "guaner", + "chenghaihua" + ] + }, + "learn/Accessibility/Accessibility_troubleshooting": { + "modified": "2020-07-16T22:40:37.212Z", + "contributors": [ + "wsj0124", + "kuldahar", + "zeng-zhi-yong" + ] + }, + "learn/Accessibility/Mobile": { + "modified": "2020-07-16T22:40:33.086Z", + "contributors": [ + "yuyx91", + "shenshaohui1991" + ] + }, + "learn/Accessibility/WAI-ARIA_basics": { + "modified": "2020-07-16T22:40:24.388Z", "contributors": [ - "sunchengpeng", - "LaiTaoGDUT", - "inlym", - "Heaan", - "kingsley2036", - "RainSlide", - "a-x", - "xgqfrms-GitHub", - "Ende93", - "AlexChao" + "grape", + "Madao-3", + "DavidDavidx" ] }, - "Web/JavaScript/Reference/Global_Objects/String/italics": { - "modified": "2019-03-23T22:39:41.518Z", + "learn/Front-end_web_developer": { + "modified": "2020-07-16T22:40:48.018Z", "contributors": [ - "ssruoyan" + "Ende93", + "ex90rts" ] }, - "Web/JavaScript/Reference/Global_Objects/String/lastIndexOf": { - "modified": "2019-10-13T05:19:10.386Z", + "learn/HTML": { + "modified": "2020-07-16T22:22:25.734Z", "contributors": [ - "SageX", - "ts0307", - "Heaan", - "GavinMoreYoung", - "yenshen", - "AlexChao" + "anguiao", + "xmcgcg", + "codeofjackie", + "myfreeer", + "xp44mm", + "xgqfrms-GitHub", + "BigLiao", + "leenlyCFFC", + "Mac_zhang", + "aimiy", + "chenxingyu350128", + "Yongest", + "funnyChinese", + "pkjy", + "sunxiang", + "Metalooze" ] }, - "Web/JavaScript/Reference/Global_Objects/String/length": { - "modified": "2019-03-18T20:48:34.436Z", + "learn/HTML/Howto": { + "modified": "2020-07-16T22:22:31.131Z", "contributors": [ - "yenshen", - "teoli", - "AlexChao", - "ziyunfei" + "xmcgcg", + "coderfee", + "WooHooDai", + "sallyllas", + "sour-toilet-seat", + "webber007", + "pengtikui", + "skylakecore", + "qixi" ] }, - "Web/JavaScript/Reference/Global_Objects/String/link": { - "modified": "2020-10-15T21:28:55.868Z", + "learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image": { + "modified": "2020-07-16T22:22:43.732Z", "contributors": [ - "RainSlide", - "teoli", - "AlexChao" + "hebby" ] }, - "Web/JavaScript/Reference/Global_Objects/String/localeCompare": { - "modified": "2020-10-15T21:40:52.842Z", + "learn/HTML/Introduction_to_HTML": { + "modified": "2020-07-16T22:22:54.800Z", "contributors": [ - "weibangtuo", - "xuqighub", - "Ninja-Xu", - "Lookkkk", - "lcysgsg", - "xgqfrms-GitHub", - "zilong-thu", - "Yuxuan_Jiang", - "helloguangxue", - "Ende93" + "zixuan945", + "mkckr0", + "Sphish", + "xmcgcg", + "imba-tjd", + "HolaForce", + "codeofjackie", + "zihengCat", + "lihaoyuan", + "chenos", + "Melvin.", + "xixilog", + "SeanZHU", + "funnyChinese", + "ZhiRui" ] }, - "Web/JavaScript/Reference/Global_Objects/String/match": { - "modified": "2020-11-19T10:33:22.045Z", + "learn/HTML/Introduction_to_HTML/Advanced_text_formatting": { + "modified": "2020-10-29T09:47:28.341Z", "contributors": [ - "zhuangyin", - "GGliushi", - "zhangming8691", - "SageX", - "meng-Macbook", - "Nick_Arron", - "YISHI", - "Freed", - "xgqfrms-GitHub", - "kameii", - "AlexChao" + "kuailekai", + "Chell", + "Roy-Tian", + "MorrisLi", + "CesarChang", + "kenneth55555", + "cetewhale", + "xq20160912", + "monkey-king", + "imba-tjd", + "kaka4NERV", + "HolaForce", + "codeofjackie", + "jwhitlock", + "anlien", + "eelord", + "lihaoyuan", + "superkuang", + "zhaoqize", + "023Sparrow", + "yydzxz", + "dirringx", + "HashubWang", + "xiaofei86", + "luwudang", + "weikunzz" ] }, - "Web/JavaScript/Reference/Global_Objects/String/matchAll": { - "modified": "2020-10-15T22:16:17.159Z", + "learn/HTML/Introduction_to_HTML/Debugging_HTML": { + "modified": "2020-09-22T12:30:11.535Z", "contributors": [ - "oxyg3n", - "symant233", - "Tangel", - "zytjs", - "BadmasterY", - "SageX", - "Marcia_gm" + "Roy-Tian", + "aaazz47", + "Yang_Hanlin", + "huaouo", + "HolaForce", + "lihaoyuan", + "zhaoqize", + "littledust", + "Zeng", + "huixiaomu" ] }, - "Web/JavaScript/Reference/Global_Objects/String/normalize": { - "modified": "2020-10-15T21:26:59.570Z", + "learn/HTML/Introduction_to_HTML/Getting_started": { + "modified": "2020-07-16T22:23:09.709Z", "contributors": [ - "RainSlide", - "SageX", - "xgl", - "SphinxKnight", - "teoli", - "ziyunfei" + "lucida959595", + "Roy-Tian", + "dlnb526", + "LINYI", + "Sphish", + "h4091", + "WoodCube", + "eagle1949", + "imba-tjd", + "gadflysu", + "WimZhai", + "jwhitlock", + "HolaForce", + "byeyear", + "Planet6174", + "codeofjackie", + "pachinko", + "Willian.G", + "alonelyer", + "xp44mm", + "shinexyt", + "zhaoqize", + "Jeffrey_Yang", + "lyxy", + "SilverLeaves", + "skylakecore", + "jiahaifeng", + "workttt", + "HashubWang", + "b2ns", + "songbinghui", + "mhengrui", + "PhilipDing", + "RevolverOcelotA", + "hawm", + "3359260180", + "goingon", + "MinimalistYing", + "funnyChinese" ] }, - "Web/JavaScript/Reference/Global_Objects/String/padEnd": { - "modified": "2020-10-15T21:44:49.353Z", + "learn/HTML/Introduction_to_HTML/HTML_text_fundamentals": { + "modified": "2020-11-16T00:17:59.659Z", "contributors": [ - "zhuangyin", - "calabash519", - "Iwouldliketobeapig", - "comehope", - "ziyunfei" + "sinochen123", + "Roy-Tian", + "aaazz47", + "ZeroAurora", + "youngquan", + "MorrisLi", + "SirnoChan", + "Sphish", + "liangmuyang", + "tryhard", + "sf-think", + "baijingfeng", + "WindLo", + "HolaForce", + "web-xx", + "CaTmmao", + "shiyubo", + "zhaoqize", + "fengkx", + "HashubWang", + "skylakecore", + "876843240", + "DZW314", + "danlanxiaohei", + "c0ldian", + "funnyChinese" ] }, - "Web/JavaScript/Reference/Global_Objects/String/padStart": { - "modified": "2020-10-15T21:44:45.823Z", + "learn/HTML/Introduction_to_HTML/Marking_up_a_letter": { + "modified": "2020-07-16T22:23:14.761Z", "contributors": [ - "zhuangyin", - "FredYing", - "dblate", - "Iwouldliketobeapig", - "kdex", - "xgqfrms-GitHub", - "Jiang-Xuan", - "comehope", - "tjyas", - "ziyunfei" + "Roy-Tian", + "ToJunYu", + "ZhiiChong", + "chrisdavidmills", + "SirnoChan", + "FantasqueX", + "imba-tjd", + "ChairMao", + "kongkong1", + "HolaForce", + "Lohoyo", + "phiwyc", + "lihaoyuan", + "zhaoqize", + "gitpyc", + "Boot95" ] }, - "Web/JavaScript/Reference/Global_Objects/String/prototype": { - "modified": "2020-10-15T21:27:29.084Z", + "learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content": { + "modified": "2020-07-16T22:24:21.297Z", "contributors": [ - "gqbre", - "pabloyshi", - "zhazhjie", - "zqyue", - "Ende93", - "midare", - "Yuxuan_Jiang", - "micheal-death", - "xgqfrms-GitHub", - "Hugh", - "terrycafe520", - "qianjiahao", - "paddingme", - "teoli", - "ziyunfei" + "Roy-Tian", + "MorrisLi", + "HolaForce", + "codeofjackie", + "lihaoyuan", + "zhaoqize", + "littledust", + "ChenLyu01" ] }, - "Web/JavaScript/Reference/Global_Objects/String/raw": { - "modified": "2020-10-15T21:29:34.006Z", + "learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML": { + "modified": "2020-12-06T06:59:19.723Z", "contributors": [ - "SageX", - "Jamsdfn", - "HDUCC", - "OhIAmFine", - "RainSlide", - "RoXoM", - "SphinxKnight", - "joy-yu", - "ShupingLiu", - "teoli", - "ziyunfei" + "zrzjohn", + "wayne_lau", + "Roy-Tian", + "Sphish", + "PYGC", + "WoodCube", + "fangfangfanga", + "eagle1949", + "Metaloe", + "HolaForce", + "qinruiy", + "codeofjackie", + "CaTmmao", + "yevivid", + "Willian.G", + "Milktea", + "anan0v0", + "zhaoqize", + "fengkx", + "oldpotter", + "littledust", + "hjb912", + "tianhu288", + "Mac_zhang", + "BarryLiu1995", + "HashubWang", + "littermark", + "igigi", + "876843240", + "mhengrui", + "Daryl.L", + "chinazhaghai", + "sisyphus-zhou" ] }, - "Web/JavaScript/Reference/Global_Objects/String/repeat": { - "modified": "2020-10-15T21:23:38.769Z", + "learn/JavaScript": { + "modified": "2020-07-16T22:29:46.300Z", "contributors": [ - "laampui", + "oceanMIH", + "yummy_song", + "scyhm", + "YehaiChen", + "WavinFlag", "xgqfrms-GitHub", - "git123hub", - "Ende93", - "OmniP", - "teoli", - "tiansh", - "ziyunfei", - "zhangyaochun1987" + "noiron", + "houcheng", + "Maze", + "Metalooze" ] }, - "Web/JavaScript/Reference/Global_Objects/String/replace": { - "modified": "2020-11-27T21:45:38.567Z", + "learn/JavaScript/Building_blocks": { + "modified": "2020-07-16T22:31:11.083Z", "contributors": [ - "lastVigo", - "ZouYj", - "zhangming8691", - "RainSlide", - "SageX", - "zhengwengang", - "bigbird231", - "lwjcjmx123", - "glntlq", - "Ende93", - "qiubo1992", - "dingziqi", - "xgqfrms-GitHub", - "Leeoric", - "benymor", - "imwangpan", - "Zegendary", - "billcz", - "snowsolf", - "S-iscoming", - "lunix01", - "FredWe", - "MoltBoy", - "xinshangshangxin", - "paddingme", - "fannie-z", - "teoli", - "AlexChao", - "robert.yin", - "ziyunfei" + "Drizzt-Yu", + "NiceGG", + "JiLiangLai", + "xiaobin123", + "xp44mm", + "yzweb2018", + "sonymoon", + "nlln", + "ztytotoro", + "okotta1", + "backli", + "lvyue", + "ByWhy", + "Marslin92", + "chinatomhuang", + "GKilyar", + "iProgramme" ] }, - "Web/JavaScript/Reference/Global_Objects/String/replaceAll": { - "modified": "2020-10-15T22:30:27.485Z", + "learn/JavaScript/Building_blocks/Build_your_own_function": { + "modified": "2020-08-01T05:11:26.919Z", "contributors": [ - "Damoness", - "laampui", - "xgqfrms" + "driftingdream", + "Hermedius", + "WindLo", + "qiubite-name", + "codeofjackie", + "Undecyce", + "hygSup", + "gitpyc", + "Ray-Eldath", + "Hecdi", + "ppphp" ] }, - "Web/JavaScript/Reference/Global_Objects/String/search": { - "modified": "2020-10-15T21:29:01.821Z", + "learn/JavaScript/Building_blocks/Functions": { + "modified": "2020-08-27T11:13:47.934Z", "contributors": [ - "laampui", - "Fleeting198", - "RainSlide", - "xgqfrms-GitHub", - "rockedpanda", - "AlexChao", - "teoli" + "shawn20111416", + "driftingdream", + "jsl1079322620", + "Hermedius", + "jinsth", + "hyjalxl", + "agnoCJY", + "BusyToDie", + "LuoYun", + "codeofjackie", + "zhilu1", + "caifx", + "luoxzhg", + "NicholasCao", + "Pipapa", + "GKilyar", + "caojinguo", + "fyzzy1943", + "minmino" ] }, - "Web/JavaScript/Reference/Global_Objects/String/slice": { - "modified": "2020-10-15T21:04:29.173Z", + "learn/JavaScript/Building_blocks/Looping_code": { + "modified": "2020-07-16T22:31:22.467Z", "contributors": [ - "RainSlide", - "Jemory", - "MinimalistYing", - "zhangchen", - "xgqfrms-GitHub", - "towerzju", - "Meteormatt", - "helloguangxue", - "FredWe", - "teoli", - "AlexChao", - "ziyunfei" + "agnoCJY", + "Yayure", + "jianbinfu", + "LittleMang", + "LuoYun", + "lscnet", + "codeofjackie", + "WhiteYin", + "tuneura", + "DaduCC", + "Ray-Eldath", + "NicholasCao", + "Ende93", + "wanqing19954", + "Marslin92" ] }, - "Web/JavaScript/Reference/Global_Objects/String/small": { - "modified": "2019-03-23T22:22:44.927Z", + "learn/JavaScript/Building_blocks/Return_values": { + "modified": "2020-11-24T04:05:07.114Z", "contributors": [ - "wizardforcel", - "JokerPrince" + "Anser0111", + "jsl1079322620", + "Hermedius", + "FantasqueX", + "LuoYun", + "larrychen", + "Gloriazdh", + "codeofjackie", + "DaduCC", + "BadRonmance", + "yj21world", + "minmino" ] }, - "Web/JavaScript/Reference/Global_Objects/String/split": { - "modified": "2020-10-15T21:28:59.434Z", + "learn/JavaScript/Building_blocks/conditionals": { + "modified": "2020-07-16T22:31:16.388Z", "contributors": [ - "real-Row", - "SageX", - "WindLo", - "gentlecoder", - "42", - "hongxu.Wei", - "laampui", - "Jiang-Xuan", - "YISHI", - "JuFoFu", - "ZQH", - "xgqfrms-GitHub", - "Bitzo", - "uestcNaldo", - "zhuangyin", - "mooyxu", - "Hugh", - "auroraeffect", - "azhi09", - "helloguangxue", - "horizon0514", - "AlexChao" + "SirnoChan", + "qiubite-name", + "Undecyce", + "Ray-Eldath", + "DaduCC", + "NicholasCao", + "ideal.Li", + "lyllll000", + "finegao", + "INFINITSY", + "HashubWang" ] }, - "Web/JavaScript/Reference/Global_Objects/String/startsWith": { - "modified": "2020-10-15T21:21:10.667Z", + "learn/JavaScript/Howto": { + "modified": "2020-07-16T22:33:11.775Z", "contributors": [ - "zhangchen", - "YouMoeYi", - "RainSlide", - "SimonLeeee", - "SphinxKnight", - "Meteormatt", - "ziyunfei", - "teoli", - "zhangyaochun1987" + "wangwenhao", + "yuyx91" ] }, - "Web/JavaScript/Reference/Global_Objects/String/strike": { - "modified": "2019-03-23T22:19:16.420Z", + "learn/Learning_and_getting_help": { + "modified": "2020-12-06T05:06:52.891Z", "contributors": [ - "wizardforcel" + "3143875691" ] }, - "Web/JavaScript/Reference/Global_Objects/String/sub": { - "modified": "2019-03-23T22:19:14.417Z", + "learn/Performance": { + "modified": "2020-12-05T12:01:04.505Z", "contributors": [ - "xgqfrms-GitHub", - "wizardforcel" + "mayerpan", + "liguanzeng", + "Bayes", + "yangchongduo" ] }, - "Web/JavaScript/Reference/Global_Objects/String/substr": { - "modified": "2019-09-27T00:05:56.009Z", + "learn/Performance/Web_Performance_Basics": { + "modified": "2020-07-16T22:40:42.886Z", "contributors": [ - "wingtao", - "xybin1990", - "zhaoboxiang", - "xgqfrms-GitHub", - "helloguangxue", - "AlexChao" + "shuiRong", + "creative_fish" ] }, - "Web/JavaScript/Reference/Global_Objects/String/substring": { - "modified": "2020-06-10T02:59:54.363Z", + "learn/Server-side": { + "modified": "2020-07-16T22:36:03.668Z", "contributors": [ - "HCSkatana", - "SageX", - "libaixu", - "zhuangyin", - "hexianzhi", - "xgqfrms-GitHub", - "qujingyouyachu", - "helloguangxue", - "bailnl", - "AlexChao" + "ZuoRight", + "xixilog", + "JamesZhange", + "Munch_TZB", + "GHLgh" ] }, - "Web/JavaScript/Reference/Global_Objects/String/sup": { - "modified": "2019-03-23T22:19:11.494Z", + "learn/Server-side/Django": { + "modified": "2020-07-16T22:36:36.546Z", "contributors": [ - "xgqfrms-GitHub", - "wizardforcel" + "diyigechipangxie", + "xixilog", + "chinanf-boy", + "hstaoqian", + "Zhaoyu" ] }, - "Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase": { - "modified": "2019-10-14T05:00:05.180Z", + "learn/Server-side/Django/Authentication": { + "modified": "2020-07-16T22:37:25.161Z", "contributors": [ - "SageX", - "853419196", - "wizardforcel", - "xgqfrms-GitHub", - "fighting0710" + "floodwater", + "edgar-chen", + "xixilog" ] }, - "Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase": { - "modified": "2020-10-15T22:29:43.372Z", + "learn/Server-side/Django/Deployment": { + "modified": "2020-11-23T18:29:57.524Z", "contributors": [ - "konnga" + "keetack", + "edgar-chen", + "yan-jin", + "xixilog" ] }, - "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": { - "modified": "2020-08-21T17:39:11.325Z", + "learn/Server-side/Django/Forms": { + "modified": "2020-07-16T22:37:34.229Z", "contributors": [ - "LCLx", - "SageX", - "xgqfrms-GitHub", - "helloguangxue", - "yenshen", - "teoli", - "AlexChao", - "ziyunfei" + "buttre", + "edgar-chen", + "xixilog" ] }, - "Web/JavaScript/Reference/Global_Objects/String/toSource": { - "modified": "2019-03-18T20:48:25.704Z", + "learn/Server-side/Django/Generic_views": { + "modified": "2020-07-16T22:37:19.625Z", "contributors": [ - "teoli", - "AlixWang" + "edgar-chen", + "xixilog", + "SphinxKnight" ] }, - "Web/JavaScript/Reference/Global_Objects/String/toString": { - "modified": "2019-10-14T05:25:34.591Z", + "learn/Server-side/Django/Introduction": { + "modified": "2020-07-16T22:36:42.459Z", "contributors": [ - "SageX", - "AlexChao" + "khalim", + "Nel", + "ShuangFarmer", + "xiezhedaima9591", + "chinanf-boy" ] }, - "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": { - "modified": "2020-10-15T22:30:43.287Z", + "learn/Server-side/Django/Models": { + "modified": "2020-07-16T22:37:00.935Z", "contributors": [ - "LCLx", - "Originalee", - "ahbiao", - "Jabin_Lee" + "shawPLUSroot", + "senghongchong7", + "phdgogogo", + "colin3dmax", + "AIIEOIBD", + "zphj1987", + "cashlu", + "xixilog", + "szlh", + "chinanf-boy" ] }, - "Web/JavaScript/Reference/Global_Objects/String/valueOf": { - "modified": "2020-10-15T22:31:18.217Z", + "learn/Server-side/Django/Sessions": { + "modified": "2020-07-16T22:37:28.578Z", "contributors": [ - "zhangming8691", - "ahbiao" + "buttre", + "edgar-chen", + "xixilog" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol": { - "modified": "2020-10-19T10:05:29.655Z", + "learn/Server-side/Django/Testing": { + "modified": "2020-07-16T22:37:39.373Z", "contributors": [ - "Alendia", - "polunzh", - "JohnhanLiu", - "Coink", - "haoXu-web", - "Revonia", - "zhangchen", - "huge", - "Bitzo", - "winjeysong", - "shaojingchao", - "xgqfrms-GitHub", - "lfkid", - "syhxczy", - "wdpm", - "helloguangxue", - "MapleGu", - "Ende93", - "X-Cracker", - "fscholz" + "edgar-chen", + "xixilog" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive": { - "modified": "2020-10-15T21:51:10.533Z", + "learn/Server-side/Django/Tutorial_local_library_website": { + "modified": "2020-07-16T22:36:50.644Z", "contributors": [ - "zhangchen", - "Hushabyme" + "zengqi", + "ddtyjmyjm", + "hstaoqian" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator": { - "modified": "2020-10-15T22:20:07.992Z", + "learn/Server-side/Django/django_assessment_blog": { + "modified": "2020-07-16T22:37:49.691Z", "contributors": [ - "zhangchen", - "lzfcc" + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/description": { - "modified": "2020-10-15T22:12:44.560Z", + "learn/Server-side/Django/skeleton_website": { + "modified": "2020-07-16T22:36:55.364Z", "contributors": [ - "Maiko" + "Nel", + "xixilog", + "ddtyjmyjm", + "MengLingqin", + "chinanf-boy", + "hstaoqian" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/for": { - "modified": "2019-04-22T09:08:37.458Z", + "learn/Server-side/Django/web_application_security": { + "modified": "2020-07-16T22:37:47.216Z", "contributors": [ - "Ende93", - "ziyunfei" + "knktc", + "edgar-chen", + "xixilog" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance": { - "modified": "2020-10-15T21:49:33.542Z", + "learn/Server-side/Express_Nodejs": { + "modified": "2020-07-16T22:37:56.406Z", "contributors": [ - "vent", - "zhangchen", - "AlexChao", - "Hushabyme", - "zhouytforever", - "zhengwei" + "hellorayza", + "百里笙歌", + "Frederick-S", + "yatace", + "edgar-chen", + "Ran_Lyu", + "longzhengxiong", + "sp900409", + "chenlexing", + "ant0x00" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable": { - "modified": "2020-10-15T21:49:33.460Z", + "learn/Server-side/Express_Nodejs/Displaying_data": { + "modified": "2020-10-27T00:17:29.715Z", "contributors": [ - "Ende93", - "zhengwei" + "Megrax", + "socovo", + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/iterator": { - "modified": "2020-10-15T21:36:42.166Z", + "learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page": { + "modified": "2020-07-16T22:38:39.461Z", "contributors": [ - "zhangchen", - "Ende93", - "ziyunfei", - "Jacksunwei" + "woshiqiang1", + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/keyFor": { - "modified": "2020-10-16T06:56:40.936Z", + "learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page": { + "modified": "2020-07-16T22:38:38.246Z", "contributors": [ - "le-phq", - "zh244135370", - "SphinxKnight", - "purple_force", - "ziyunfei" + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/match": { - "modified": "2020-10-15T21:49:57.252Z", + "learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge": { + "modified": "2020-07-16T22:38:39.803Z", "contributors": [ - "RainSlide", - "Ende93" + "staticfire", + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/matchAll": { - "modified": "2020-10-15T22:18:46.613Z", + "learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page": { + "modified": "2020-07-16T22:38:37.044Z", "contributors": [ - "Nodiff" + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/prototype": { - "modified": "2020-10-15T21:42:54.702Z", + "learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page": { + "modified": "2020-07-16T22:38:39.148Z", "contributors": [ - "zhangchen", - "purple_force" + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/replace": { - "modified": "2020-10-15T21:56:21.976Z", + "learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page": { + "modified": "2020-07-16T22:38:36.367Z", "contributors": [ - "Ende93", - "cuji" + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/search": { - "modified": "2020-11-17T03:44:46.302Z", + "learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment": { + "modified": "2020-07-16T22:38:37.610Z", "contributors": [ - "KaiserZh", - "ufolux" + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/species": { - "modified": "2020-10-15T21:51:11.135Z", + "learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page": { + "modified": "2020-07-16T22:38:38.748Z", "contributors": [ - "Ende93", - "Hushabyme" + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/split": { - "modified": "2020-08-29T01:24:33.903Z", + "learn/Server-side/Express_Nodejs/Displaying_data/Home_page": { + "modified": "2020-07-16T22:38:35.735Z", "contributors": [ - "vent", - "Hushabyme", - "_da" + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive": { - "modified": "2020-10-15T21:51:09.142Z", + "learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template": { + "modified": "2020-10-27T06:26:13.607Z", "contributors": [ - "baooab", - "Mactaivsh", - "Hushabyme" + "Megrax", + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/toSource": { - "modified": "2019-09-06T06:31:54.610Z", + "learn/Server-side/Express_Nodejs/Displaying_data/Template_primer": { + "modified": "2020-07-16T22:38:34.671Z", "contributors": [ - "teoli", - "purple_force" + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/toString": { - "modified": "2019-03-23T23:13:48.406Z", + "learn/Server-side/Express_Nodejs/Displaying_data/flow_control_using_async": { + "modified": "2020-07-16T22:38:33.746Z", "contributors": [ - "SphinxKnight", - "ziyunfei" + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag": { - "modified": "2019-04-22T09:04:43.680Z", + "learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry": { + "modified": "2020-09-24T11:45:05.090Z", "contributors": [ - "ziyunfei", - "Hushabyme" + "Mdreame", + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/unscopables": { - "modified": "2020-10-15T21:51:10.976Z", + "learn/Server-side/Express_Nodejs/Introduction": { + "modified": "2020-07-16T22:38:13.912Z", "contributors": [ - "Ende93", - "ywjco", - "Hushabyme" + "Roy-Tian", + "hehe1111", + "sun603", + "janyin", + "biblade", + "outman", + "congrongdeyu", + "codeofjackie", + "edgar-chen", + "bybiuhappy", + "ShirleyM", + "lofayo", + "chengzhibing" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/valueOf": { - "modified": "2019-03-23T23:13:43.496Z", + "learn/Server-side/Express_Nodejs/Tutorial_local_library_website": { + "modified": "2020-07-16T22:38:17.531Z", "contributors": [ - "SphinxKnight", - "ziyunfei" + "Roy-Tian", + "chudongsong", + "janyin", + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/SyntaxError": { - "modified": "2019-08-07T05:20:14.990Z", + "learn/Server-side/Express_Nodejs/deployment": { + "modified": "2020-07-16T22:38:50.827Z", "contributors": [ - "Ende93", - "yenshen", - "Mingun" + "edgar-chen", + "codeofjackie" ] }, - "Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype": { - "modified": "2019-03-23T23:03:07.644Z", + "learn/Server-side/Express_Nodejs/development_environment": { + "modified": "2020-07-16T22:38:02.448Z", "contributors": [ - "Ende93", - "yenshen" + "snaildarter", + "phili-p", + "Roy-Tian", + "sun603", + "yijie_sun", + "yaoqtan", + "jianchao_xue", + "edgar-chen", + "BarryLiu1995" ] }, - "Web/JavaScript/Reference/Global_Objects/TypeError": { - "modified": "2020-10-15T21:34:35.462Z", + "learn/Server-side/Express_Nodejs/forms": { + "modified": "2020-08-07T05:55:45.402Z", "contributors": [ - "Tao-Quixote", - "Ende93", - "shajiquan" + "yunxiaomeng", + "grape", + "hdh296", + "socovo", + "edgar-chen", + "zhangyu911013" ] }, - "Web/JavaScript/Reference/Global_Objects/TypeError/prototype": { - "modified": "2020-10-15T21:39:50.956Z", + "learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form": { + "modified": "2020-07-16T22:38:46.101Z", "contributors": [ - "Tao-Quixote", - "coolfireWang", - "Ende93" + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray": { - "modified": "2020-10-15T21:25:05.655Z", + "learn/Server-side/Express_Nodejs/forms/Create_author_form": { + "modified": "2020-07-16T22:38:44.657Z", "contributors": [ - "knightyun", - "9-lives", - "tangtangtangtangtang", - "taoyouh", - "Jiang-Xuan", - "Gintoki", - "xgqfrms-GitHub", - "chenyang", - "liyongleihf2006", - "Ende93", - "teoli", - "David_Li" + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator": { - "modified": "2019-03-23T22:19:18.717Z", + "learn/Server-side/Express_Nodejs/forms/Create_book_form": { + "modified": "2020-07-16T22:38:45.191Z", "contributors": [ - "wizardforcel" + "SphinxKnight", + "UPUP", + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/@@species": { - "modified": "2019-03-23T22:19:06.809Z", + "learn/Server-side/Express_Nodejs/forms/Create_genre_form": { + "modified": "2020-07-16T22:38:43.645Z", "contributors": [ - "wizardforcel" + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT": { - "modified": "2019-03-23T22:52:00.851Z", + "learn/Server-side/Express_Nodejs/forms/Delete_author_form": { + "modified": "2020-07-16T22:38:46.761Z", "contributors": [ - "iFish" + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/buffer": { - "modified": "2019-03-23T22:19:06.244Z", + "learn/Server-side/Express_Nodejs/forms/Update_Book_form": { + "modified": "2020-07-16T22:38:48.713Z", "contributors": [ - "wizardforcel" + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength": { - "modified": "2019-03-23T22:19:10.941Z", + "learn/Server-side/Express_Nodejs/mongoose": { + "modified": "2020-08-12T09:45:03.710Z", "contributors": [ - "wizardforcel" + "Dazhuzhu-github", + "vpstarter", + "百里笙歌", + "socovo", + "Roy-Tian", + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset": { - "modified": "2019-03-23T22:19:08.934Z", + "learn/Server-side/Express_Nodejs/routes": { + "modified": "2020-10-23T08:33:36.699Z", "contributors": [ - "wizardforcel" + "Hawaii_zzapi", + "百里笙歌", + "Roy-Tian", + "jianchao_xue", + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/copyWithin": { - "modified": "2020-03-06T04:49:17.530Z", + "learn/Server-side/Express_Nodejs/skeleton_website": { + "modified": "2020-08-26T10:22:11.122Z", "contributors": [ - "knightyun", - "wizardforcel" + "Tiny-Wei", + "Roy-Tian", + "edgar-chen" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/entries": { - "modified": "2019-03-23T22:19:07.170Z", + "learn/Server-side/First_steps": { + "modified": "2020-07-16T22:36:11.413Z", "contributors": [ - "wizardforcel" + "DaniellaAngel", + "edgar-chen", + "ArcherGrey", + "chf007", + "tinyCucumber", + "07akioni" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/every": { - "modified": "2019-03-23T22:19:10.485Z", + "learn/Server-side/First_steps/Client-Server_overview": { + "modified": "2020-07-16T22:36:22.601Z", "contributors": [ - "wizardforcel" + "DaniellaAngel", + "JuleHenriHu", + "WindLo", + "yijie_sun", + "ZhuZhuDrinkMilk", + "edgar-chen", + "ShuangFarmer", + "whocare", + "BarryLiu1995", + "yuantongkang", + "liminjun", + "zhuangyin", + "old2sun", + "ziyouwa", + "Zeng" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/fill": { - "modified": "2019-03-23T22:11:01.372Z", + "learn/Server-side/First_steps/Introduction": { + "modified": "2020-09-13T05:53:31.575Z", "contributors": [ - "benpigchu" + "dake0805", + "vicco", + "yijie_sun", + "zhangchen", + "Nothosaurs", + "lonelee", + "diaotai", + "old2sun", + "ziyouwa", + "Zeng" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/filter": { - "modified": "2019-03-23T22:19:16.643Z", + "learn/Server-side/First_steps/Web_frameworks": { + "modified": "2020-07-16T22:36:26.173Z", "contributors": [ - "wizardforcel" + "mojiangyuan", + "DaniellaAngel", + "hikigaya58", + "tongwenwu", + "zhuzhangliang", + "edgar-chen", + "JamesZhange", + "ddtyjmyjm", + "Phoenixkaze", + "Jhongwun", + "Stevenhwang", + "yinzhuoya", + "old2sun", + "Zeng" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/find": { - "modified": "2019-03-23T22:19:12.001Z", + "learn/Server-side/First_steps/Website_security": { + "modified": "2020-10-20T04:30:22.097Z", "contributors": [ - "wizardforcel" + "Megrax", + "mayhjx", + "yi2sun", + "ZhuZhuDrinkMilk", + "goat91", + "Zeng" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/findIndex": { - "modified": "2019-03-23T22:19:14.644Z", + "Web/API/Pointer_Lock_API": { + "modified": "2020-07-02T02:40:37.086Z", "contributors": [ - "wizardforcel" + "brizer", + "fscholz", + "princetoad@gmail.com" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/forEach": { - "modified": "2020-10-15T21:51:57.505Z", + "Web/HTTP/Headers/X-DNS-Prefetch-Control": { + "modified": "2020-10-15T21:21:12.955Z", "contributors": [ - "laampui", - "wizardforcel" + "RainSlide", + "lsvih", + "zhuangyin", + "yyhaxx", + "RequireSun", + "yowangbin", + "markyun", + "Ende93", + "hucz08" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/from": { - "modified": "2020-10-15T21:57:11.137Z", + "Web/CSS/float": { + "modified": "2020-11-29T04:21:18.185Z", "contributors": [ - "knightyun", - "nekronhuang", - "pasturn" + "Nyaasu", + "RainSlide", + "Murphy1024", + "Jack.Works", + "zhuangyin", + "tcatche", + "Ende93", + "xgqfrms-GitHub", + "Sarlaka", + "fscholz", + "Sebastianz", + "xiaodongzai", + "AlexChao", + "linmx0130", + "FredWe", + "teoli", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/includes": { - "modified": "2019-03-23T22:19:11.643Z", + "Glossary/DHTML": { + "modified": "2019-03-23T23:46:38.426Z", "contributors": [ - "wizardforcel" + "ziyunfei", + "Wind930" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf": { - "modified": "2019-03-23T22:20:08.080Z", + "orphaned/Example_2_-_Using_UL": { + "modified": "2019-03-18T20:44:28.267Z", "contributors": [ - "xgqfrms-GitHub", - "wizardforcel" + "RainSlide", + "blue0125" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/join": { - "modified": "2019-03-23T22:19:12.294Z", + "Games/Introduction_to_HTML5_Game_Development": { + "modified": "2019-01-17T01:15:39.320Z", "contributors": [ - "wizardforcel" + "wbamberg", + "xgqfrms-GitHub" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/keys": { - "modified": "2019-03-23T22:19:18.105Z", + "Games/Publishing_games/Game_monetization": { + "modified": "2019-07-23T05:31:53.344Z", "contributors": [ - "wizardforcel" + "c03311", + "wbamberg", + "tannineo", + "chenXiaoZhui" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/lastIndexOf": { - "modified": "2019-03-23T22:19:04.259Z", + "Games/Techniques/Control_mechanisms/Mobile_touch": { + "modified": "2019-03-18T21:13:06.265Z", "contributors": [ - "wizardforcel" + "fisho" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/length": { - "modified": "2019-03-23T22:19:16.206Z", + "orphaned/Games/Tools/Engines_and_tools": { + "modified": "2019-03-23T22:12:27.616Z", "contributors": [ - "wizardforcel" + "wbamberg", + "ChenXiCC" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/map": { - "modified": "2019-03-23T22:19:16.989Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up": { + "modified": "2020-03-04T06:46:31.914Z", "contributors": [ - "wizardforcel" + "zmx0142857" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/name": { - "modified": "2019-03-23T22:27:51.557Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls": { + "modified": "2020-03-04T06:03:22.539Z", "contributors": [ - "lsvih" + "zmx0142857" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/of": { - "modified": "2019-03-23T22:20:06.649Z", + "Games/Introduction": { + "modified": "2019-12-05T00:08:12.532Z", "contributors": [ - "xgqfrms-GitHub" + "catcatching", + "wbamberg", + "codeofjackie", + "zsxeee", + "varcat", + "WMin", + "hansonfang", + "13310", + "magiclyde", + "fierayan" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/prototype": { - "modified": "2019-03-23T22:21:58.417Z", + "orphaned/Glossary_of_translation": { + "modified": "2019-03-23T23:33:18.884Z", "contributors": [ - "wizardforcel", - "liyongleihf2006" + "Terry.Qiao", + "xcffl", + "iwo", + "yfdyh000" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/reduce": { - "modified": "2019-03-23T22:22:18.240Z", + "Glossary/HTTP_header": { + "modified": "2020-02-12T09:54:25.924Z", "contributors": [ - "wizardforcel", - "zurl" + "RainSlide", + "zhangchen", + "WayneCui" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/reduceRight": { - "modified": "2019-03-23T22:19:12.473Z", + "Glossary/IP_Address": { + "modified": "2020-05-30T02:17:49.722Z", "contributors": [ - "wizardforcel" + "kagurakana" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/reverse": { - "modified": "2019-03-23T22:19:12.148Z", + "Glossary/Main_Axis": { + "modified": "2020-05-10T10:26:14.352Z", "contributors": [ - "wizardforcel" + "Isildur46" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/set": { - "modified": "2020-10-11T08:53:21.212Z", + "Glossary/Cross_Axis": { + "modified": "2020-06-09T04:50:28.922Z", "contributors": [ - "xyzingh", - "knightyun", - "Kylin.this" + "lmx-Hexagram", + "Isildur46" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/slice": { - "modified": "2020-10-15T21:59:28.967Z", + "Glossary/Proxy_server": { + "modified": "2019-03-18T21:22:15.777Z", "contributors": [ - "luojia", - "lvyue" + "lcw0622" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/some": { - "modified": "2020-10-15T22:06:36.897Z", + "Glossary/Graceful_degradation": { + "modified": "2020-02-12T11:01:35.540Z", "contributors": [ - "rockSandy" + "RainSlide", + "biqing" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/sort": { - "modified": "2019-03-23T22:19:06.667Z", + "Glossary/Pseudo-class": { + "modified": "2020-09-25T11:55:47.602Z", "contributors": [ - "wizardforcel" + "Ninglo" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/subarray": { - "modified": "2020-10-15T22:06:55.665Z", + "Glossary/Element": { + "modified": "2020-08-10T23:10:02.620Z", "contributors": [ - "pea3nut" + "IdEvEbI", + "244462375", + "RainSlide", + "dsdog1997", + "HDUCC", + "jianbinfu", + "pluwen" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/toLocaleString": { - "modified": "2020-10-15T22:07:03.779Z", + "Glossary/Card_sorting": { + "modified": "2019-11-09T07:01:56.698Z", "contributors": [ - "taoyouh" + "Xugen-Ma" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/toString": { - "modified": "2019-03-23T22:20:22.038Z", + "Glossary/ARPA": { + "modified": "2019-03-18T20:31:46.228Z", "contributors": [ - "kameii" + "huanghe2015" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/values": { - "modified": "2019-03-23T22:19:17.373Z", + "Glossary/Domain_name": { + "modified": "2019-03-23T22:04:34.305Z", "contributors": [ - "wizardforcel" + "micblo" ] }, - "Web/JavaScript/Reference/Global_Objects/URIError": { - "modified": "2020-10-15T21:58:35.369Z", + "Glossary/baseline": { + "modified": "2020-05-10T09:55:14.332Z", "contributors": [ - "Mal_akh", - "Tao-Quixote", - "HCH.no1" + "Isildur46" ] }, - "Web/JavaScript/Reference/Global_Objects/URIError/prototype": { - "modified": "2020-10-15T22:03:36.123Z", + "Glossary/character_encoding": { + "modified": "2020-02-12T10:38:11.288Z", "contributors": [ - "Tao-Quixote" + "RainSlide", + "fish-inu" ] }, - "Web/JavaScript/Reference/Global_Objects/Uint16Array": { - "modified": "2020-10-15T22:30:29.389Z", + "Glossary/Idempotent": { + "modified": "2020-06-05T03:53:12.558Z", "contributors": [ - "elfpower" + "bytetown", + "zhangchen", + "WayneCui" ] }, - "Web/JavaScript/Reference/Global_Objects/Uint32Array": { - "modified": "2020-10-15T21:30:53.115Z", + "Glossary/Asynchronous": { + "modified": "2020-10-16T00:10:28.593Z", "contributors": [ - "Dorence", - "icepro", - "liyongleihf2006", - "chyee" + "Neo42", + "fish-inu" ] }, - "Web/JavaScript/Reference/Global_Objects/Uint8Array": { - "modified": "2020-10-15T21:36:50.602Z", + "Glossary/Abstraction": { + "modified": "2020-01-16T01:08:30.168Z", "contributors": [ - "Maiko", - "wizardforcel", - "WhiteMind", - "Meteormatt", - "linus_ding" + "Kuichen" ] }, - "Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray": { - "modified": "2020-08-30T01:01:24.154Z", + "Glossary/Digital_certificate": { + "modified": "2019-03-23T22:26:11.405Z", "contributors": [ - "vent", - "xhlsrj" + "Atester" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakMap": { - "modified": "2020-10-15T21:06:55.119Z", + "Glossary/Database": { + "modified": "2020-11-25T09:15:57.640Z", "contributors": [ - "Venus14", - "wallena3", - "Ende93", - "WangLeto", - "BingerWeb", - "lizheming", - "hhxxhg", - "xgqfrms-GitHub", - "kameii", - "lvjs", - "Cattla", - "teoli", - "ziyunfei" + "ZH-S" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakMap/clear": { - "modified": "2019-03-23T22:23:38.007Z", + "Glossary/Sloppy_mode": { + "modified": "2019-03-18T21:11:47.868Z", "contributors": [ - "teoli", - "xgqfrms-GitHub", - "xx1124961758", - "xdsnet" + "serverLua", + "CapDuan" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakMap/delete": { - "modified": "2019-03-23T23:13:54.509Z", + "Glossary/Browser": { + "modified": "2019-03-23T22:12:12.389Z", "contributors": [ - "SphinxKnight", - "teoli", - "ziyunfei" + "micblo", + "lavenderming" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakMap/get": { - "modified": "2019-03-23T22:30:00.497Z", + "Glossary/Progressive_Enhancement": { + "modified": "2019-03-18T20:54:47.653Z", "contributors": [ - "Hushabyme", - "Cattla", - "legend80s" + "biqing" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakMap/has": { - "modified": "2019-03-23T22:23:27.973Z", + "Glossary/Origin": { + "modified": "2019-03-23T22:21:16.972Z", "contributors": [ - "xdsnet" + "xgqfrms-GitHub" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakMap/prototype": { - "modified": "2019-03-23T22:23:35.449Z", + "Glossary/Forbidden_header_name": { + "modified": "2019-03-18T20:55:25.213Z", "contributors": [ - "hhxxhg", - "xdsnet" + "Opportunity", + "yuankunzhang", + "WayneCui" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakMap/set": { - "modified": "2020-10-15T21:50:40.762Z", + "Glossary/Empty_element": { + "modified": "2020-05-27T05:46:24.967Z", "contributors": [ - "Ende93", - "xdsnet" + "changjingli", + "Ende93" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakRef": { - "modified": "2020-11-04T03:38:15.371Z", + "Glossary/IIFE": { + "modified": "2019-10-10T13:29:59.923Z", "contributors": [ - "moniang", - "DIFFICULTTOGIVE" + "SAM.L", + "RainSlide", + "zhangchen", + "CapDuan", + "baooab", + "xgqfrms-GitHub", + "zachary05" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakRef/deref": { - "modified": "2020-11-04T03:35:50.870Z", + "Glossary/time_to_first_byte": { + "modified": "2020-08-17T07:40:42.498Z", "contributors": [ - "moniang" + "Facefall" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakSet": { - "modified": "2020-10-15T21:26:50.454Z", + "Glossary/Simple_header": { + "modified": "2019-03-18T21:33:57.550Z", "contributors": [ - "wallena3", - "earlymeme", - "xgqfrms-GitHub", - "Go7hic", - "teoli", - "ziyunfei" + "huangll" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakSet/add": { - "modified": "2019-03-23T22:20:53.399Z", + "Glossary/Algorithm": { + "modified": "2019-12-09T04:39:20.829Z", "contributors": [ - "marsgt", - "Hushabyme" + "ran", + "huanghe2015" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakSet/clear": { - "modified": "2019-03-23T22:18:46.466Z", + "Glossary/Type_Conversion": { + "modified": "2019-06-24T05:38:16.865Z", "contributors": [ - "teoli", - "Ende93" + "RainSlide", + "danielnanuk" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakSet/delete": { - "modified": "2020-03-17T12:14:42.437Z", + "Glossary/Compile": { + "modified": "2019-03-18T21:35:31.612Z", "contributors": [ - "zhenzhenChange", - "Hushabyme" + "ethanzway" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakSet/has": { - "modified": "2019-03-23T22:21:07.252Z", + "Glossary/Compile_time": { + "modified": "2019-03-18T21:35:17.139Z", "contributors": [ - "Hushabyme" + "ethanzway" ] }, - "Web/JavaScript/Reference/Global_Objects/WeakSet/prototype": { - "modified": "2019-10-09T00:35:58.794Z", + "Glossary/Semantics": { + "modified": "2020-02-12T10:16:15.832Z", "contributors": [ - "sky-gg", - "SphinxKnight", - "teoli", - "ziyunfei" + "RainSlide", + "秋色楓", + "acejerry", + "DaMber" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly": { - "modified": "2020-10-15T21:53:08.592Z", + "Glossary/Request_header": { + "modified": "2020-02-12T10:12:37.548Z", "contributors": [ - "wallena3", - "Chesn", - "Gaohaoyang", - "zhangchen", - "chyingp", - "JianrongYu" + "RainSlide", + "c1er", + "huangll" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError": { - "modified": "2020-10-15T22:26:35.137Z", + "Glossary/General_header": { + "modified": "2020-02-12T09:58:36.039Z", "contributors": [ - "wallena3" + "RainSlide", + "WayneCui" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/Global": { - "modified": "2020-11-13T02:45:14.451Z", + "Glossary/OOP": { + "modified": "2019-03-23T22:19:08.166Z", "contributors": [ - "yujiaao", - "yxwsbobo" + "zhangchen", + "fan19900404" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance": { - "modified": "2020-10-23T07:01:43.345Z", + "Learn/Accessibility/CSS_and_JavaScript": { + "modified": "2020-11-03T05:18:13.954Z", "contributors": [ - "liguorain", - "yxwsbobo", - "SphinxKnight" + "No.5972", + "yawei", + "grape", + "wangfangping", + "wsj0124", + "cani1see", + "hmfight" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory": { - "modified": "2020-10-15T22:06:20.710Z", + "Learn/Accessibility/HTML": { + "modified": "2020-07-16T22:40:15.418Z", "contributors": [ - "Zhang-Junzhi", - "sunwanxin213" + "grape", + "kuldahar", + "ChuckZhang", + "zxsunrise", + "xiwusheng", + "zouyang1230", + "Junx" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/Module": { - "modified": "2020-10-15T22:00:19.792Z", + "Learn/Accessibility/Multimedia": { + "modified": "2020-07-16T22:40:28.501Z", "contributors": [ - "dondevi" + "wangfangping", + "xiwusheng" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError": { - "modified": "2020-10-15T22:26:27.221Z", + "Learn/Common_questions/Available_text_editors": { + "modified": "2020-07-16T22:35:49.753Z", "contributors": [ - "wallena3" + "A-rise" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/Table": { - "modified": "2020-11-04T03:44:08.051Z", + "Learn/CSS/Building_blocks/Handling_different_text_directions": { + "modified": "2020-07-16T22:29:14.755Z", "contributors": [ - "moniang", - "hurrytospring" + "ChongyouXu", + "lucida959595", + "Young-Spark", + "ZouYj", + "dlnb526", + "SirnoChan", + "sliop", + "Orzst", + "kuhnpku" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/compile": { - "modified": "2020-10-15T21:58:44.128Z", + "Learn/CSS/CSS_layout/Legacy_Layout_Methods": { + "modified": "2020-07-16T22:27:16.084Z", "contributors": [ - "kungfucode-rex" + "SirnoChan", + "Hermedius", + "zxxzzzzz", + "agnoCJY" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming": { - "modified": "2020-10-15T22:15:30.451Z", + "Learn/CSS/CSS_layout/Positioning": { + "modified": "2020-12-01T00:39:03.074Z", "contributors": [ - "Cyandev" + "zisedelinghun", + "driftingdream", + "laizenan", + "parabolazz", + "LuoYun", + "TaoXuSheng", + "codeofjackie", + "fourml", + "summercn", + "allan_simon", + "yuyx91", + "lihaoyuan", + "xp44mm", + "yydzxz", + "ddtyjmyjm", + "Froggy", + "uestcNaldo", + "Eric.Wu", + "echoArray", + "xgqfrms-GitHub", + "Ende93", + "depressedX", + "siufooncheung", + "1986slayer" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate": { - "modified": "2020-10-15T21:57:59.458Z", + "Learn/CSS/First_steps/How_CSS_works": { + "modified": "2020-07-16T22:28:02.363Z", "contributors": [ - "wallena3", - "Hedgehog", - "airt", - "kungfucode-rex" + "ChongyouXu", + "shizigood", + "dlnb526", + "SirnoChan", + "pacexy", + "kuhnpku", + "FrankYuanhao", + "0x79b9", + "SphinxKnight", + "xcxAscar" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming": { - "modified": "2020-10-15T22:11:30.410Z", + "Learn/CSS/First_steps/Getting_started": { + "modified": "2020-07-16T22:27:52.665Z", "contributors": [ - "Xiaoming666" + "dlnb526", + "SirnoChan", + "byeyear", + "HHao", + "zyzxrj", + "fondxy", + "Amano-Aki", + "RUAN-ZX" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/validate": { - "modified": "2020-10-15T22:15:29.365Z", + "Learn/CSS/Building_blocks/Fundamental_CSS_comprehension": { + "modified": "2020-10-09T04:34:43.547Z", "contributors": [ - "Cyandev" + "benniks", + "blateyang", + "grape", + "LeoB-O", + "codeofjackie", + "allan_simon", + "phiwyc", + "yydzxz", + "ddtyjmyjm", + "nbhaohao" ] }, - "Web/JavaScript/Reference/Global_Objects/decodeURI": { - "modified": "2020-10-15T21:22:04.033Z", + "Learn/CSS/Building_blocks/A_cool_looking_box": { + "modified": "2020-07-16T22:28:27.701Z", "contributors": [ - "Mookiepiece", - "IreneByron", - "laampui", - "xgqfrms-GitHub", - "PoppinL", - "teoli", - "ziyunfei" + "grape", + "Lohoyo", + "lihaoyuan" ] }, - "Web/JavaScript/Reference/Global_Objects/decodeURIComponent": { - "modified": "2020-03-12T19:39:38.099Z", + "Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper": { + "modified": "2020-07-16T22:28:25.559Z", "contributors": [ - "c1er", - "laampui", - "xgqfrms-GitHub", - "PoppinL", - "maicss", - "Ende93", - "SphinxKnight", - "AlexChao" + "codeofjackie", + "ziyunfei", + "Yee", + "lihaoyuan" ] }, - "Web/JavaScript/Reference/Global_Objects/encodeURI": { - "modified": "2020-03-12T19:39:40.462Z", + "Learn/CSS/Styling_text/Fundamentals": { + "modified": "2020-07-16T22:26:10.120Z", "contributors": [ - "xgqfrms-GitHub", - "HelloFun", - "PoppinL", - "leedorian", - "baiya", - "FredWe", - "SphinxKnight", - "AlexChao" + "AlephAlpha", + "Otaku-Glasses", + "grape", + "xiaoman", + "byeyear", + "Sinclair-Yuan", + "ssttii", + "tiange321", + "sixDregs", + "zhuzhangliang", + "liy010", + "codeofjackie", + "1862", + "maoyumaoxun", + "allan_simon", + "comehope", + "xp44mm", + "sputnikW", + "yydzxz", + "Froggy", + "nbhaohao" ] }, - "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": { - "modified": "2020-10-15T21:29:33.137Z", + "Learn/CSS/Styling_text": { + "modified": "2020-07-16T22:26:01.367Z", "contributors": [ - "zhangchen", - "oscarwang913", - "inlym", - "maiff", - "HelloFun", - "PoppinL", - "Roland_Reed", - "fortime", - "SphinxKnight", - "AlexChao" + "kohai", + "LJJ1996", + "allan_simon", + "zhuangyin", + "zhang-kai", + "ZhongyiChen" ] }, - "Web/JavaScript/Reference/Global_Objects/escape": { - "modified": "2020-03-12T19:40:29.669Z", + "Learn/CSS/Styling_text/Styling_links": { + "modified": "2020-07-16T22:26:21.533Z", "contributors": [ - "1renhaO", - "yenshen" + "so2liu", + "SirnoChan", + "Map1en_", + "LeoB-O", + "dchaofei", + "codeofjackie", + "Fungzhe", + "allan_simon", + "xp44mm", + "sputnikW", + "nbhaohao" ] }, - "Web/JavaScript/Reference/Global_Objects/eval": { - "modified": "2020-10-15T21:15:16.670Z", + "Learn/CSS/Styling_text/Styling_lists": { + "modified": "2020-07-16T22:26:15.817Z", "contributors": [ - "amzrk2", - "mrzhouxu", - "chrislung", - "laampui", - "yasen-wolf", - "RainSlide", - "jinhuiWong", - "Akiq2016", - "extending", - "icepro", - "eeeeeeeason", - "JX-Zhuang", - "yanpengxiang", - "SiberianMark", - "Jiang-Xuan", - "Hugh", - "Binly42", - "ziyunfei", - "fscholz", - "qianjiahao", - "teoli", - "huguowei", - "Mgjbot", - "Laser" + "rtxu", + "codeofjackie", + "allan_simon", + "xp44mm", + "Froggy", + "jingyiwang1209", + "Ende93", + "Barren", + "qw950027", + "dazyzsy" ] }, - "Web/JavaScript/Reference/Global_Objects/globalThis": { - "modified": "2020-10-15T22:10:51.438Z", + "Learn/CSS/Styling_text/Typesetting_a_homepage": { + "modified": "2020-07-16T22:26:27.995Z", "contributors": [ - "MinimalistYing", - "RainSlide", - "wallena3", - "kangkai0124", - "SphinxKnight", - "LEORChn", - "fscholz", - "Jack.Works" + "monkey-king", + "grape", + "Map1en_", + "codeofjackie", + "maplelinst" ] }, - "Web/JavaScript/Reference/Global_Objects/isFinite": { - "modified": "2020-10-15T21:24:26.397Z", + "Learn/CSS/Styling_text/Web_fonts": { + "modified": "2020-07-16T22:26:25.043Z", "contributors": [ - "rulanfenghua", - "littcc", - "Jiang-Xuan", - "golegen", - "SphinxKnight", - "AlexChao", - "teoli", - "zhangyaochun1987" + "AlephAlpha", + "LeoB-O", + "zenghuiLee", + "admin1949", + "wheeljs", + "Froggy" ] }, - "Web/JavaScript/Reference/Global_Objects/isNaN": { - "modified": "2020-10-15T21:28:42.019Z", + "Learn/Common_questions/What_are_browser_developer_tools": { + "modified": "2020-08-09T19:35:32.533Z", "contributors": [ - "Ende93", - "ubuntugx", - "bluetata", - "INCHMAN", - "xgqfrms-GitHub", - "mt001mt", - "Hugh", - "cekingLu", - "wanghaoran", - "Skyang", - "yenshen", - "yufeng", - "SphinxKnight", - "AlexChao" + "DarkStory", + "eelord", + "ziyouwa", + "Atractylodes", + "wth", + "ziyunfei", + "zhaoy875" ] }, - "Web/JavaScript/Reference/Global_Objects/null": { - "modified": "2020-10-15T21:21:19.908Z", + "Learn/Common_questions/How_does_the_Internet_work": { + "modified": "2020-07-16T22:35:39.172Z", "contributors": [ - "wallena3", - "RainSlide", - "GreedyPig", - "zxsunrise", - "zhuangyin", - "Jiang-Xuan", - "SphinxKnight", - "ziyunfei", - "AlexChao", - "teoli" + "simon.woo", + "grape", + "W-YaoLing", + "ZhuZhuDrinkMilk", + "TaskForce86", + "ShirleyM", + "yydzxz", + "Jeffrey_Yang", + "StarryForce", + "ArcherGrey", + "wth", + "boredivan", + "RyanZhang", + "TanJrJie" ] }, - "Web/JavaScript/Reference/Global_Objects/parseFloat": { - "modified": "2020-10-15T21:21:34.049Z", + "orphaned/Learn/How_to_contribute": { + "modified": "2020-07-16T22:33:47.665Z", "contributors": [ - "laampui", - "rulanfenghua", - "maoyumaoxun", - "ywjco", - "xgqfrms-GitHub", - "huguangju", - "xuzhijun", - "yenshen", - "teoli", - "ziyunfei" + "SphinxKnight", + "Simcookies", + "Forbidden", + "WavinFlag" ] }, - "Web/JavaScript/Reference/Global_Objects/parseInt": { - "modified": "2020-12-04T02:14:06.997Z", + "orphaned/Learn/HTML/Forms_and_buttons": { + "modified": "2020-02-28T22:25:38.433Z", "contributors": [ - "熊英明", - "liuy666", - "zhuguibiao", - "SAYHISAYHI", - "jjc", - "frankfang1990", - "pantao", - "liuzhengdong", - "lmislm", - "Roland_Reed", - "Eurkidu", - "Mars687", - "cyancity", - "BrightLD", - "hua03", - "ywjco", - "lcxmaple", - "weicaiyue", - "righttoe", - "xgqfrms-GitHub", - "xiaohangJose", - "PengyuanJiang", - "xuzhijun", - "du0m0", - "XingxianLI", - "teoli", - "AlexChao", - "Mickeyboy" + "Dev-Liangjian" ] }, - "Web/JavaScript/Reference/Global_Objects/undefined": { - "modified": "2020-10-15T21:21:19.165Z", + "Learn/Forms/Advanced_form_styling": { + "modified": "2020-07-16T22:21:36.744Z", "contributors": [ - "wallena3", - "lizhongzhen11", - "ywjco", - "fzhw88", - "zhuangyin", - "WJ941", - "ervinewell", - "kameii", - "Jiang-Xuan", - "teoli", - "ziyunfei" + "rtxu", + "Daniel313", + "codeofjackie", + "yydzxz", + "tzigang" ] }, - "Web/JavaScript/Reference/Global_Objects/unescape": { - "modified": "2020-12-10T01:27:00.332Z", + "Learn/Forms/Form_validation": { + "modified": "2020-07-16T22:21:53.600Z", "contributors": [ - "stefango", - "zhangchen", - "ZivHe", - "Jiang-Xuan", - "Ende93" + "dlnb526", + "wavedanger", + "WoodCube", + "PYGC", + "liudadadayu", + "Amano_Sei", + "kazimics", + "codeofjackie", + "tinyhare", + "lihaoyuan", + "dondevi", + "littledust", + "crper", + "yydzxz", + "pantao", + "Froggy", + "xianshenglu", + "songbinghui", + "monsterooo", + "liu-xiao-cui", + "jileieli" ] }, - "Web/JavaScript/Reference/Global_Objects/uneval": { - "modified": "2020-10-15T21:40:49.845Z", + "Learn/Forms/How_to_build_custom_form_controls/Example_1": { + "modified": "2020-07-16T22:21:59.182Z", "contributors": [ - "zhangchen", - "imnodb", - "codert", - "Vincent.Yu" + "Qos", + "549074491", + "codeofjackie" ] }, - "Web/JavaScript/Reference/Iteration_protocols": { - "modified": "2020-11-16T00:41:30.233Z", + "Learn/Forms/How_to_build_custom_form_controls/Example_2": { + "modified": "2020-07-16T22:21:59.542Z", "contributors": [ - "wubaodong", - "Mr_kaze", - "Clarkkkk", - "DengZhihao", - "RainSlide", - "wangxiujuni", - "houzp", - "edward12699", - "luohe", - "Shigma", - "yueshuiniao", - "isLishude", - "xgqfrms-GitHub", - "kdex", - "bnerDY", - "xgqfrms", - "m31271n.", - "jiraiya", - "harttle", - "holajiawei", - "zbinlin", - "panhezeng", - "Qcui", - "Ende93", - "ziyunfei", - "teoli" + "shc0743", + "codeofjackie" ] }, - "Web/JavaScript/Reference/Lexical_grammar": { - "modified": "2020-10-15T21:37:37.250Z", + "Learn/Forms/How_to_build_custom_form_controls/Example_3": { + "modified": "2020-07-16T22:21:59.861Z", "contributors": [ - "wwj402", - "RainSlide", - "jiangxin123", - "mistoken", - "DrndwX", - "VdoG", - "eforegist", - "Hitomichan", - "jiahui", - "lunix01" + "shc0743", + "codeofjackie" ] }, - "Web/JavaScript/Reference/Operators": { - "modified": "2020-11-11T01:18:14.844Z", + "Learn/Forms/How_to_build_custom_form_controls/Example_4": { + "modified": "2020-07-16T22:22:00.186Z", "contributors": [ - "Liugq5713", - "Ende93", - "ourai", - "zhangchen", - "zxsunrise", - "ZTFtrue", - "yangzx", - "xgqfrms-GitHub", - "imhaohao", - "Meteormatt", - "tim.liu", - "lunix01", - "Go7hic", - "yenshen", - "ziyunfei", - "teoli" + "shc0743", + "codeofjackie" ] }, - "Web/JavaScript/Reference/Operators/Addition_assignment": { - "modified": "2020-10-15T22:32:22.325Z", + "Learn/Forms/How_to_build_custom_form_controls": { + "modified": "2020-07-16T22:21:58.787Z", "contributors": [ - "xgqfrms" + "WoodCube", + "rtxu", + "feixiang5754", + "lonelywhisper", + "yasminyt", + "honey6", + "codeofjackie", + "tinyhare", + "yochii", + "uselessaddress", + "crper", + "yydzxz", + "zqyue", + "darkeggler", + "Froggy", + "chrisdavidmills", + "Sheppy", + "ziyunfei", + "helloguangxue" ] }, - "Web/JavaScript/Reference/Operators/Arithmetic_Operators": { - "modified": "2020-10-15T21:31:37.464Z", + "Learn/Forms/How_to_structure_a_web_form": { + "modified": "2020-07-16T22:21:16.348Z", "contributors": [ - "srq18211", - "RainSlide", - "lmislm", - "Braveheartforyou", - "zhangchen", - "xixigeek", - "XHMM", - "ZhengAu", - "aimiy", - "xhlwill", - "xgqfrms-GitHub", - "yayayhoo", - "xiaofengling", - "git123hub", - "AnnAngela", - "tiansh", - "AlexChao" + "lucida959595", + "imba-tjd", + "naivexcited", + "WoodCube", + "Zhang-YanQi", + "liy010", + "web-xx", + "codeofjackie", + "lihaoyuan", + "yawei", + "zqyue", + "StarryForce", + "Froggy" ] }, - "Web/JavaScript/Reference/Operators/Assignment": { - "modified": "2020-10-15T22:32:28.366Z", + "Learn/Forms/HTML_forms_in_legacy_browsers": { + "modified": "2020-07-16T22:22:04.178Z", "contributors": [ - "longfangsong", - "hellorayza", - "yemao", - "Linuocc" + "haoye999", + "lovedebug", + "jaiJia", + "littledust" ] }, - "Web/JavaScript/Reference/Operators/Assignment_Operators": { - "modified": "2020-10-15T21:29:35.850Z", + "Learn/Forms": { + "modified": "2020-07-16T22:21:02.678Z", "contributors": [ - "AchooLuv", - "wbamberg", - "cuixiping", - "adoreCherish", - "yofine", - "AlexChao", - "SphinxKnight" + "615lyw", + "Lohoyo", + "lihaoyuan", + "yydzxz", + "StarryForce", + "Froggy", + "chrisdavidmills", + "ziyunfei", + "JulieLee77", + "teoli", + "Jeremie" ] }, - "Web/JavaScript/Reference/Operators/Bitwise_AND_assignment": { - "modified": "2020-10-15T22:34:19.309Z", + "Learn/Forms/Property_compatibility_table_for_form_controls": { + "modified": "2020-07-16T22:21:44.843Z", "contributors": [ - "Eric_lc", - "laampui" + "codeofjackie", + "lovedebug" ] }, - "Web/JavaScript/Reference/Operators/Bitwise_NOT": { - "modified": "2020-10-15T22:34:23.865Z", + "Learn/Forms/Sending_and_retrieving_form_data": { + "modified": "2020-07-16T22:21:29.690Z", "contributors": [ - "Eric_lc", - "laampui" + "rtxu", + "WoodCube", + "aliang2017", + "codeofjackie", + "yydzxz", + "Froggy", + "KngZhi", + "chrisdavidmills", + "juzhiyuan" ] }, - "Web/JavaScript/Reference/Operators/Bitwise_OR": { - "modified": "2020-10-15T22:34:22.155Z", + "Learn/Forms/Sending_forms_through_JavaScript": { + "modified": "2020-07-16T22:22:02.523Z", "contributors": [ - "laampui" + "RainSlide", + "WoodCube", + "xing2000", + "Bayes", + "codeofjackie", + "littledust", + "yydzxz", + "Chenng", + "chrisdavidmills", + "ziyunfei", + "sanxingming", + "helloguangxue", + "teoli" ] }, - "Web/JavaScript/Reference/Operators/Bitwise_OR_assignment": { - "modified": "2020-10-15T22:34:21.154Z", + "Learn/Forms/Styling_web_forms": { + "modified": "2020-07-16T22:21:32.838Z", "contributors": [ - "laampui" + "jiaodk", + "rtxu", + "coder-git", + "33YANG", + "Daniel313", + "codeofjackie", + "lovedebug", + "yydzxz", + "lucoo01" ] }, - "Web/JavaScript/Reference/Operators/Bitwise_Operators": { - "modified": "2020-03-12T19:40:23.030Z", + "Learn/Forms/Basic_native_form_controls": { + "modified": "2020-09-17T23:41:07.186Z", "contributors": [ - "xmasuhai", - "GreedyPig", - "parabolazz", - "ywjco", - "xgqfrms-GitHub", - "clcy1243", - "tiansh", - "AlexChao" + "aaazz47", + "853419196", + "WoodCube", + "wsyconan", + "Drizzt-Yu", + "Kavelaa", + "coldicecn", + "Danielxiey", + "codeofjackie", + "Lohoyo", + "lihaoyuan", + "xp44mm", + "uselessaddress", + "littledust", + "yydzxz", + "ddtyjmyjm", + "StarryForce", + "Froggy" ] }, - "Web/JavaScript/Reference/Operators/Bitwise_XOR": { - "modified": "2020-10-15T22:34:22.385Z", + "Learn/Forms/Your_first_form": { + "modified": "2020-08-16T03:03:38.716Z", "contributors": [ - "laampui" + "NicholasZhan", + "WoodCube", + "ChairMao", + "haoye999", + "coldicecn", + "xiangluoming", + "hddhyq", + "Lohoyo", + "maoyumaoxun", + "lyncodes", + "allan_simon", + "lihaoyuan", + "superkuang", + "ddtyjmyjm", + "StarryForce", + "Froggy", + "chrisdavidmills", + "ziyunfei", + "sanxingming" ] }, - "Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment": { - "modified": "2020-10-15T22:34:23.846Z", + "Learn/HTML/Introduction_to_HTML/Document_and_website_structure": { + "modified": "2020-09-22T12:28:50.229Z", "contributors": [ - "laampui" + "Roy-Tian", + "aaazz47", + "chenduone", + "MorrisLi", + "SirnoChan", + "wangfangping", + "FantasqueX", + "imba-tjd", + "HolaForce", + "HeYuansong", + "web-xx", + "codeofjackie", + "chaosdog", + "phiwyc", + "eelord", + "lihaoyuan", + "zhaoqize", + "nbhaohao", + "dirringx", + "HashubWang", + "skylakecore", + "BarryLiu1995", + "luwudang", + "JX-Master", + "danlanxiaohei", + "c0ldian" ] }, - "Web/JavaScript/Reference/Operators/Comma_Operator": { - "modified": "2020-10-15T21:32:06.908Z", + "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies": { + "modified": "2020-09-22T04:49:55.434Z", "contributors": [ - "zhangchen", - "xgqfrms-GitHub", - "ontheway1215", - "AlexChao" + "NellPoi", + "yangko", + "pacexy", + "monkey-king", + "WoodCube", + "Roy-Tian", + "ChairMao", + "ZhangDaZongWei", + "Danielxiey", + "615lyw", + "CaTmmao", + "Lohoyo", + "RevolverOcelotA", + "lihaoyuan", + "superkuang", + "yydzxz", + "ddtyjmyjm", + "Eric.Wu" ] }, - "Web/JavaScript/Reference/Operators/Comparison_Operators": { - "modified": "2020-03-12T19:41:27.611Z", + "Learn/JavaScript/Building_blocks/Image_gallery": { + "modified": "2020-07-16T22:31:44.958Z", "contributors": [ - "ch4zzzzz", - "ubuntugx", - "GreedyPig", - "gongzhibin", - "choukin", - "blue0125", - "Ende93", - "beiweiqiang", - "qianjiahao" + "lucida959595", + "Roy-Tian", + "LittleMang", + "Park-ma", + "codeofjackie", + "lihaoyuan", + "yeslogin2", + "Zeng" ] }, - "Web/JavaScript/Reference/Operators/Conditional_Operator": { - "modified": "2020-10-15T21:37:34.292Z", + "Learn/JavaScript/Objects/Adding_bouncing_balls_features": { + "modified": "2020-07-16T22:32:36.563Z", "contributors": [ - "wendy260310", - "dadan", - "KnightYin", - "pluwen", - "zhangchen", - "ziyunfei", - "Ende93", - "lunix01" + "Wenke-D", + "Roy-Tian", + "gofly1988", + "lihaoyuan", + "bluekeroro" ] }, - "Web/JavaScript/Reference/Operators/Destructuring_assignment": { - "modified": "2020-10-15T21:34:33.159Z", + "Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript": { + "modified": "2020-08-05T11:02:17.810Z", "contributors": [ - "fanerge", - "kidonng", - "Aaron-Bird", - "zhuziyi", - "ZeroWhiteSmile", - "RainSlide", - "zhangchen", - "tosmaller", - "a-pple", - "FideoJ", - "xgqfrms-GitHub", - "XHMM", - "kdex", - "Jiasm", - "jerryni", - "LeoEatle", - "donyaw", - "starriv", - "TiaossuP", - "WeRDyin", - "panhezeng", - "jiahui", - "pjsong", - "zilong-thu", - "lunix01", - "ziyunfei", - "fskuok" + "driftingdream" ] }, - "Web/JavaScript/Reference/Operators/Division": { - "modified": "2020-10-18T03:29:08.158Z", + "Learn/JavaScript/Asynchronous/Async_await": { + "modified": "2020-12-08T06:58:32.883Z", "contributors": [ - "MapMaths", - "laampui" + "byrde", + "woniuxingdong", + "qwei", + "plainnany", + "jakio6", + "awarmy", + "cochn", + "wangfangping" ] }, - "Web/JavaScript/Reference/Operators/Division_assignment": { - "modified": "2020-10-15T22:34:21.674Z", + "Learn/JavaScript/Asynchronous/Choosing_the_right_approach": { + "modified": "2020-12-08T07:27:41.218Z", "contributors": [ - "laampui" + "byrde", + "icetea_cover", + "rubyKC", + "shangruitong", + "PYGC", + "wangfangping", + "tjls" ] }, - "Web/JavaScript/Reference/Operators/Exponentiation": { - "modified": "2020-10-18T04:06:14.289Z", + "Learn/JavaScript/Asynchronous": { + "modified": "2020-07-16T22:33:15.541Z", "contributors": [ - "MapMaths", - "xeunglay", - "laampui" + "yuqing521", + "alice201601", + "oceanMIH" ] }, - "Web/JavaScript/Reference/Operators/Exponentiation_assignment": { - "modified": "2020-10-15T22:34:25.557Z", + "Learn/JavaScript/Asynchronous/Promises": { + "modified": "2020-12-08T05:22:09.292Z", "contributors": [ - "laampui" + "byrde", + "You2er", + "hidoos", + "mizhon", + "haoawen", + "PYGC", + "masterZSH", + "wangfangping", + "kafm", + "zijieee" ] }, - "Web/JavaScript/Reference/Operators/Greater_than": { - "modified": "2020-10-15T22:32:32.486Z", + "Learn/JavaScript/Asynchronous/Concepts": { + "modified": "2020-07-16T22:33:29.726Z", "contributors": [ - "jarirliu" + "alice201601", + "grape", + "HermitSun", + "oceanMIH" ] }, - "Web/JavaScript/Reference/Operators/Greater_than_or_equal": { - "modified": "2020-10-15T22:32:26.171Z", + "Learn/JavaScript/Asynchronous/Introducing": { + "modified": "2020-12-09T00:17:16.227Z", "contributors": [ - "ziyunfei", - "shishana" + "hidoos", + "iroywang", + "Hermedius", + "Xugen-Ma", + "alice201601", + "grape", + "Kavelaa", + "gqbre", + "oceanMIH" ] }, - "Web/JavaScript/Reference/Operators/Grouping": { - "modified": "2020-10-15T21:32:23.898Z", + "Learn/JavaScript/Asynchronous/Timeouts_and_intervals": { + "modified": "2020-08-14T06:09:20.310Z", "contributors": [ - "RainSlide", - "Idealist_EZ", - "zhangchen", - "yenshen" + "Pada", + "You2er", + "WinterCicada", + "zhangbig0", + "mizhon", + "yuqing521", + "Alendia", + "grape", + "wangfangping", + "puddlejumper26", + "oceanMIH" ] }, - "Web/JavaScript/Reference/Operators/Increment": { - "modified": "2020-11-14T04:00:24.472Z", + "Learn/Performance/perceived_performance": { + "modified": "2020-07-16T22:40:43.760Z", "contributors": [ - "seanhuai", - "xgqfrms" + "biqing" ] }, - "Web/JavaScript/Reference/Operators/Inequality": { - "modified": "2020-10-18T04:16:16.608Z", + "Learn/Server-side/Django/Home_page": { + "modified": "2020-07-16T22:37:11.997Z", "contributors": [ - "MapMaths", - "YeahPotato" + "feko", + "mojiangyuan", + "colin3dmax", + "floodwater", + "xixilog", + "chinanf-boy" ] }, - "Web/JavaScript/Reference/Operators/Left_shift": { - "modified": "2020-10-15T22:34:24.967Z", + "Learn/Server-side/Django/development_environment": { + "modified": "2020-10-06T10:08:45.805Z", "contributors": [ - "laampui" + "kuailekai", + "silentpanda97", + "Adrian-Yan", + "q2937711", + "xixilog", + "chinanf-boy" ] }, - "Web/JavaScript/Reference/Operators/Left_shift_assignment": { - "modified": "2020-10-15T22:34:28.331Z", + "Learn/Server-side/Django/Admin_site": { + "modified": "2020-07-16T22:37:06.131Z", "contributors": [ - "laampui" + "Jeffxzj", + "wangfangping", + "colin3dmax", + "indv-zhu", + "chinanf-boy" ] }, - "Web/JavaScript/Reference/Operators/Less_than": { - "modified": "2020-10-15T22:34:22.220Z", + "Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction": { + "modified": "2020-11-19T04:46:02.957Z", "contributors": [ - "laampui" + "514059172", + "You2er", + "risejl" ] }, - "Web/JavaScript/Reference/Operators/Less_than_or_equal": { - "modified": "2020-10-15T22:32:26.501Z", + "Learn/Tools_and_testing/Cross_browser_testing/Accessibility": { + "modified": "2020-07-16T22:39:17.935Z", "contributors": [ - "shishana" + "freejack811", + "Sc0tt" ] }, - "Web/JavaScript/Reference/Operators/Logical_AND_assignment": { - "modified": "2020-10-15T22:34:22.943Z", + "Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies": { + "modified": "2020-07-16T22:39:08.099Z", "contributors": [ - "laampui" + "wangfangping", + "YaoLIII", + "ty4z2008" ] }, - "Web/JavaScript/Reference/Operators/Logical_NOT": { - "modified": "2020-10-15T22:34:26.449Z", + "Glossary/Localization": { + "modified": "2019-03-23T23:33:42.693Z", "contributors": [ - "laampui" + "xcffl" ] }, - "Web/JavaScript/Reference/Operators/Logical_OR": { - "modified": "2020-10-15T22:34:22.730Z", + "MDN/At_ten": { + "modified": "2019-03-23T22:50:02.795Z", "contributors": [ - "laampui" + "FlyingPig", + "cughudson_1", + "WarriorWu" ] }, - "Web/JavaScript/Reference/Operators/Logical_OR_assignment": { - "modified": "2020-10-15T22:34:21.861Z", + "orphaned/MDN/Community/Conversations": { + "modified": "2020-04-08T04:56:55.004Z", "contributors": [ - "laampui" + "SirnoChan", + "ewfian", + "Chor", + "wbamberg", + "chaosdog", + "jswisher", + "tanyan2004", + "githubzh123" ] }, - "Web/JavaScript/Reference/Operators/Logical_Operators": { - "modified": "2020-10-15T21:22:11.681Z", + "orphaned/MDN/Community/Doc_sprints": { + "modified": "2019-03-18T20:44:27.614Z", "contributors": [ - "HermitSun", - "git710", "RainSlide", - "withoutmelv", - "SphinxKnight", - "Kaijun", - "fphonor", - "zhangchen", - "YoungChen", - "zhuangyin", - "yenshen", - "teoli", - "MoltBoy" - ] - }, - "Web/JavaScript/Reference/Operators/Logical_nullish_assignment": { - "modified": "2020-10-15T22:33:59.629Z", - "contributors": [ - "JoshOY" + "wbamberg", + "ElliottZheng", + "varcat" ] }, - "Web/JavaScript/Reference/Operators/Multiplication": { - "modified": "2020-10-15T22:34:23.887Z", + "orphaned/MDN/Community": { + "modified": "2020-04-03T05:16:15.416Z", "contributors": [ - "laampui" + "SphinxKnight", + "shiguang", + "wbamberg", + "Planet6174", + "Forbidden", + "ZQH", + "suwenbin", + "maksyuki", + "Ende93", + "shuding", + "yun174long", + "IBuly", + "civilian", + "MofeLee", + "ziyunfei", + "Fiag" ] }, - "Web/JavaScript/Reference/Operators/Multiplication_assignment": { - "modified": "2020-10-15T22:34:26.770Z", + "orphaned/MDN/Community/Whats_happening": { + "modified": "2020-07-16T22:45:19.757Z", "contributors": [ - "laampui" + "brizer", + "wbamberg", + "IannaZhou", + "fanyj1994", + "1986slayer" ] }, - "Web/JavaScript/Reference/Operators/Nullish_coalescing_operator": { - "modified": "2020-10-15T22:25:14.991Z", - "contributors": [ - "xgqfrms", - "RainSlide", - "Coink", - "ran" + "orphaned/MDN/Community/Working_in_community": { + "modified": "2020-02-19T18:49:08.850Z", + "contributors": [ + "jswisher", + "wbamberg", + "huangzijian888" ] }, - "Web/JavaScript/Reference/Operators/Object_initializer": { - "modified": "2020-10-15T21:37:33.998Z", + "orphaned/MDN/Contribute/Howto/Create_an_MDN_account": { + "modified": "2020-08-03T02:14:19.507Z", "contributors": [ - "lengjingify", - "zhangchen", - "xgqfrms-GitHub", - "slimeball", - "williamchu123", - "hitme" + "zonghuaj", + "jackleeholmes", + "dwns545", + "kgbook", + "roboterwise", + "wbamberg", + "Disat", + "Zhsirting", + "jiajinning", + "BoothLuo", + "WavinFlag", + "acgpiano", + "1xxxx", + "wth", + "ziyunfei", + "fanziy75" ] }, - "Web/JavaScript/Reference/Operators/Operator_Precedence": { - "modified": "2020-09-26T23:18:03.052Z", + "orphaned/MDN/Contribute/Howto/Do_a_technical_review": { + "modified": "2020-06-06T00:56:15.988Z", "contributors": [ - "taichiyi", - "Linuocc", - "Yang-yibu", - "zsirfs", - "zhangchen", - "ZQH", - "QinZhiNian", - "jianglinjie", - "xhlwill", - "maicss", - "czyin", - "Ende93", - "AlexChao", - "yenshen", - "teoli", - "ziyunfei" + "ice-kylin", + "wbamberg", + "Mr.ma", + "zt19994", + "jianxin-zhang", + "righttoe", + "The-End-Hero", + "pidanhua", + "Roland_Reed", + "majunbao", + "pixiu" ] }, - "Web/JavaScript/Reference/Operators/Property_Accessors": { - "modified": "2020-10-15T21:37:38.990Z", + "orphaned/MDN/Contribute/Howto/Do_an_editorial_review": { + "modified": "2020-02-24T12:04:57.900Z", "contributors": [ - "RainSlide", - "zhangchen", - "isLishude", - "xiaojunzhou", + "zhanglolo", + "IFVFORNONE", + "SphinxKnight", + "YUYUEy", + "chrislung", + "Azurak", + "wbamberg", + "quainter", + "Katherina-Miao", + "ucev", + "liujinyu", + "faremax", + "nanflower", + "YFM-getA", + "LiuTong", + "Martin.Chow", + "MMOnster", "lunix01" ] }, - "Web/JavaScript/Reference/Operators/Remainder_assignment": { - "modified": "2020-10-15T22:34:27.144Z", + "orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page": { + "modified": "2019-10-29T05:37:01.880Z", "contributors": [ - "laampui" + "7NZ", + "Socheny", + "zhangdonglei", + "wbamberg", + "WeJie", + "Schr0dinger", + "itao1314", + "52yang", + "ivanberry", + "ziyunfei", + "Inceng", + "salmon8881", + "zzhi", + "Minnie", + "Yanzhu.Yin" ] }, - "Web/JavaScript/Reference/Operators/Right_shift": { - "modified": "2020-11-02T06:18:13.407Z", + "orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages": { + "modified": "2019-01-16T21:47:16.976Z", "contributors": [ - "Boswell", - "laampui" + "wbamberg", + "Gale", + "BiGrEgGaErOoTs", + "joke", + "Ahkari", + "ziyunfei", + "lushunming" ] }, - "Web/JavaScript/Reference/Operators/Right_shift_assignment": { - "modified": "2020-10-15T22:34:28.606Z", + "orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web": { + "modified": "2020-09-06T02:30:17.183Z", "contributors": [ - "laampui" + "Cheese-Chip", + "SuiltaPico", + "gu_qing", + "Azurak", + "wbamberg", + "liminjun" ] }, - "Web/JavaScript/Reference/Operators/Spread_syntax": { - "modified": "2020-11-26T05:06:49.056Z", + "MDN/Contribute/Howto/Add_or_update_browser_compatibility_data": { + "modified": "2019-03-18T21:38:16.029Z", "contributors": [ - "superchow", - "NorthWind", - "renfufei", - "fanjieqi", - "kczjczhYue", - "zhangchen", - "maoguojun" + "wbamberg", + "kite-js" ] }, - "Web/JavaScript/Reference/Operators/Strict_equality": { - "modified": "2020-10-15T22:34:20.707Z", + "MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web": { + "modified": "2019-03-18T21:43:40.910Z", "contributors": [ - "LydiaYuan" + "wbamberg", + "ZweiZhao" ] }, - "Web/JavaScript/Reference/Operators/Strict_inequality": { - "modified": "2020-10-15T22:31:52.866Z", + "orphaned/MDN/Contribute/Howto/Be_a_beta_tester": { + "modified": "2019-03-23T22:10:34.334Z", "contributors": [ - "yemao", - "milulelele" + "fengchunsgit", + "wbamberg", + "fbambi", + "sunnysabor" ] }, - "Web/JavaScript/Reference/Operators/Subtraction": { - "modified": "2020-10-15T22:34:24.192Z", + "orphaned/MDN/Editor/Basics": { + "modified": "2020-09-30T15:44:25.432Z", "contributors": [ - "laampui" + "chrisdavidmills", + "zhangqiangoffice", + "Jeane", + "yy1107", + "world521", + "q1560760" ] }, - "Web/JavaScript/Reference/Operators/Subtraction_assignment": { - "modified": "2020-10-15T22:34:27.258Z", + "orphaned/MDN/Editor/Basics/Page_controls": { + "modified": "2020-09-30T15:44:25.715Z", "contributors": [ - "laampui" + "chrisdavidmills", + "zhangqiangoffice" ] }, - "Web/JavaScript/Reference/Operators/Unary_negation": { - "modified": "2020-10-15T22:34:23.921Z", + "orphaned/MDN/Editor/Basics/Page_info": { + "modified": "2020-09-30T15:44:25.570Z", "contributors": [ - "laampui" + "chrisdavidmills", + "zhangqiangoffice" ] }, - "Web/JavaScript/Reference/Operators/Unary_plus": { - "modified": "2020-10-15T22:34:22.724Z", + "orphaned/MDN/Editor/Keyboard_shortcuts": { + "modified": "2020-09-30T15:44:25.913Z", "contributors": [ - "laampui" + "chrisdavidmills", + "RainSlide", + "yuan81777", + "zhangqiangoffice" ] }, - "Web/JavaScript/Reference/Operators/Unsigned_right_shift": { - "modified": "2020-10-15T22:34:23.607Z", + "orphaned/MDN/Editor": { + "modified": "2020-09-30T15:44:25.503Z", "contributors": [ - "laampui" + "chrisdavidmills", + "thouen", + "woniuxingdong", + "TeabugCC", + "yuan81777", + "zhangqiangoffice", + "xjr7670", + "Y.Young", + "ChuckZhang", + "mona", + "jiahui", + "Roland_Reed", + "JoshuaLee", + "GeoffreyQ", + "sunxiang", + "OlingCat", + "Meteormatt" ] }, - "Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment": { - "modified": "2020-10-15T22:34:24.975Z", + "orphaned/MDN/Editor/Source_mode": { + "modified": "2020-09-30T15:44:26.291Z", "contributors": [ - "laampui" + "chrisdavidmills", + "SirnoChan", + "yinsang", + "woniuxingdong", + "zhangqiangoffice" ] }, - "Web/JavaScript/Reference/Operators/async允许声明一个函数为一个包含异步操作的函数": { - "modified": "2020-10-15T21:51:08.469Z", + "MDN/Guidelines/Does_this_belong_on_MDN": { + "modified": "2020-09-30T15:32:46.957Z", "contributors": [ - "Terry.Qiao", - "fphonor", - "xgqfrms-GitHub", - "x-cold", - "Rusion-Wayne" + "chrisdavidmills", + "wbamberg", + "zccz14" ] }, - "Web/JavaScript/Reference/Operators/await": { - "modified": "2020-08-15T05:29:31.365Z", + "MDN/Guidelines/Writing_style_guide": { + "modified": "2020-11-14T07:38:19.734Z", "contributors": [ - "zzzimaple", - "shifenjiandan", - "Syclover-u2400", - "chang-shuai", - "i850", - "shhider", - "xgqfrms-GitHub", - "chenlexing", - "x-cold", - "liuqipeng417" + "kuailekai", + "chrisdavidmills", + "jswisher", + "wbamberg", + "codeofjackie", + "Dousy", + "Terry.Qiao", + "jianxin-zhang", + "DennisWang", + "suncn", + "WynnChen", + "zmh_w", + "OlingCat" ] }, - "Web/JavaScript/Reference/Operators/class": { - "modified": "2020-10-15T21:37:37.172Z", + "MDN/Yari": { + "modified": "2019-09-09T15:54:47.389Z", "contributors": [ - "Peidong_Xie", - "fscholz", - "xgqfrms-GitHub", - "zyq930501", - "ziyunfei", - "sartrey", - "lunix01" + "SphinxKnight", + "RainSlide", + "yuan81777", + "Chor", + "wbamberg", + "myshell1983", + "popcorner", + "Jack-Q", + "xgqfrms" ] }, - "Web/JavaScript/Reference/Operators/delete": { - "modified": "2020-10-15T21:07:30.470Z", + "orphaned/MDN/Structures/Live_samples/Simple_live_sample_demo": { + "modified": "2020-09-30T12:57:47.049Z", "contributors": [ - "zcdll", - "wallena3", - "zhangchen", - "wendy260310", - "yaksha", - "pyz1989", - "Vincent-yz", - "ucev", - "jamesfancy", - "ZackBee", - "lazybusy", - "Ende93", - "xgqfrms-GitHub", - "xwartz", - "AlexChao", - "ziyunfei", - "teoli" + "chrisdavidmills", + "wbamberg", + "Howard.Chen" ] }, - "Web/JavaScript/Reference/Operators/function": { - "modified": "2020-03-12T19:39:30.038Z", + "MDN/Structures/Macros/Commonly-used_macros": { + "modified": "2020-10-06T09:20:15.609Z", "contributors": [ - "inlics", - "LJJ1996", - "ucev", - "zhuangyin", - "ryanlid", - "xgqfrms-GitHub", - "Ende93", - "AlexChao", - "SphinxKnight", - "nightire" + "phone-burner", + "chrisdavidmills", + "wbamberg", + "teoli", + "fscholz", + "xhlsrj", + "FredWe" ] }, - "Web/JavaScript/Reference/Operators/function*": { - "modified": "2020-10-15T21:37:40.102Z", + "Mozilla/Add-ons/WebExtensions/API/menus": { + "modified": "2020-10-15T21:54:13.449Z", "contributors": [ - "HCSkatana", - "zhangchen", - "chenyeah", - "ShupingLiu", - "ooops", - "lunix01" + "miracleXL", + "yangwang", + "xgqfrms-GitHub" ] }, - "Web/JavaScript/Reference/Operators/in": { - "modified": "2020-10-15T21:21:37.099Z", + "Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow": { + "modified": "2020-10-15T22:13:56.821Z", "contributors": [ - "zhuangyin", - "zhangchen", - "lemonsWen", - "kameii", - "zachary05", - "AlexChao", - "SphinxKnight", - "teoli", - "ziyunfei" + "wbamberg", + "ClassJm" ] }, - "Web/JavaScript/Reference/Operators/instanceof": { - "modified": "2020-12-10T01:21:18.307Z", + "Mozilla/Add-ons/WebExtensions/API/tabs/query": { + "modified": "2020-11-25T05:15:24.039Z", "contributors": [ - "xingzhewj", - "Lsnsh", - "kidonng", - "chenzhh", - "helloyong", - "zhangchen", - "LJJ1996", - "Minhow.liu", - "zhuangyin", - "xgqfrms-GitHub", - "ReedSun", - "liudanning", - "xgqfrms", - "SamuraiMe", - "jonkee", - "suffering", - "Ende93", - "jetzhliu", - "floraLam", - "tiansh", - "AlexChao", - "ziyunfei", - "teoli" + "qzwvinner" ] }, - "Web/JavaScript/Reference/Operators/new": { - "modified": "2020-10-15T21:30:30.354Z", + "Mozilla/Add-ons/WebExtensions/API/clipboard": { + "modified": "2020-10-15T22:15:08.385Z", "contributors": [ - "HermitSun", - "lmx-Hexagram", - "wuwensheng1992", "RainSlide", - "toyflivver", - "nanyang24", - "Akiq2016", - "zhangchen", - "btea", - "zhuangyin", - "TroyMa1990", - "xgqfrms-GitHub", - "pokka", - "ruiM92", - "Ke.shidong", - "yangzi", - "yenshen", - "fskuok", - "jiacai2050", - "fphonor", - "SphinxKnight", - "TomWan" + "faliye", + "gentop" ] }, - "Web/JavaScript/Reference/Operators/new.target": { - "modified": "2020-10-15T21:39:57.852Z", + "Mozilla/Add-ons/WebExtensions/API/clipboard/setImageData": { + "modified": "2020-10-15T22:15:17.586Z", "contributors": [ - "RoXoM", - "jafck", - "zhangchen", - "sunhengzhe", - "ngtmuzi", - "ccnuzindex" + "RainSlide", + "faliye" ] }, - "Web/JavaScript/Reference/Operators/super": { - "modified": "2020-10-15T21:34:14.337Z", + "Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url": { + "modified": "2020-10-15T21:51:31.504Z", "contributors": [ - "jackyqin", - "t.ccydlj", - "woshiqiang1", - "hikigaya58", - "KennyWho", - "Yayure", - "wangmiJM", - "zhangchen", - "xgqfrms-GitHub", - "lvjs", - "saintwinkle" + "RainSlide", + "fscholz", + "1010Tech", + "Hypophrenia" ] }, - "Web/JavaScript/Reference/Operators/this": { - "modified": "2020-10-15T21:24:16.968Z", + "orphaned/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension": { + "modified": "2019-03-18T21:08:06.832Z", "contributors": [ - "Clarkkkk", - "imbant", - "laampui", - "ldsyzjb", - "aaaxiu", - "frankchia", - "usernameisMan", - "Xuemuyang", - "luoxzhg", - "Akiq2016", - "secretmadonna", - "zhangchen", - "jasonwithjs", - "rollinhup", - "anderson_liu", - "KngZhi", - "xgqfrms-GitHub", - "JJPandari", - "07akioni", - "Cmen", - "bodii", - "Ende93", - "eric183", - "floraLam", - "teoli", - "haodut", - "zhanglun", - "jaka", - "JinZheng", - "DaoG" + "PaperFlu", + "yfdyh000" ] }, - "Web/JavaScript/Reference/Operators/typeof": { - "modified": "2020-11-25T06:03:35.454Z", + "orphaned/Mozilla/Add-ons/WebExtensions/Package_your_extension_": { + "modified": "2019-03-18T21:06:37.903Z", "contributors": [ - "zhuangyin", - "AidanDai", - "kidonng", - "levo2165", - "zhangchen", - "huangtt", - "Crazycheng", - "DarkYeahs", - "Bitzo", - "bengfor", - "xgqfrms", - "zachary05", - "auver", - "yufeng", - "AlexChao", - "teoli", - "ziyunfei", - "ethertank" + "abcfyk", + "Smartree", + "taadis" ] }, - "Web/JavaScript/Reference/Operators/void": { - "modified": "2020-10-15T21:30:34.673Z", + "Mozilla/Add-ons/WebExtensions/user_interface/Sidebars": { + "modified": "2019-03-18T21:02:29.279Z", "contributors": [ - "seiry", - "Yidada", - "zhangchen", - "xycd", - "xgqfrms-GitHub", - "Ende93", - "lunix01", - "yenshen", - "ziyunfei", - "AlexChao", - "SphinxKnight", - "parano" + "dfchong" ] }, - "Web/JavaScript/Reference/Operators/yield": { - "modified": "2020-10-15T21:26:10.731Z", + "Mozilla/Add-ons/WebExtensions/Your_second_WebExtension": { + "modified": "2019-09-08T06:17:56.666Z", "contributors": [ - "RedemptioM", - "Yongest", - "Usey95", - "zhangchen", - "lfy55", - "xgqfrms-GitHub", - "AlexChao", - "mountainmoon", - "teoli", - "lpy" + "Bonlin0", + "ZowieGong", + "LuminousXLB", + "Gszekt", + "boser90", + "yydzxz", + "lightsing", + "CXWorks", + "GrayLight", + "yfdyh000" ] }, - "Web/JavaScript/Reference/Operators/yield*": { - "modified": "2020-10-15T21:32:40.952Z", + "Mozilla/Add-ons/WebExtensions/Implement_a_settings_page": { + "modified": "2019-09-14T23:46:00.166Z", "contributors": [ - "zhangchen", - "xgqfrms-GitHub", - "ccn1010", - "ziyunfei", - "Liyunsheng" + "ivysrono", + "xcffl", + "Hypophrenia" ] }, - "Web/JavaScript/Reference/Operators/取余": { - "modified": "2020-10-15T22:30:57.453Z", + "Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension": { + "modified": "2020-09-17T09:25:04.236Z", "contributors": [ - "parabolazz" + "kingcc", + "Daryl.Xu" ] }, - "Web/JavaScript/Reference/Operators/可选链": { - "modified": "2020-11-05T00:32:59.486Z", + "orphaned/Mozilla/Mozilla_Persona": { + "modified": "2019-03-23T23:09:24.663Z", "contributors": [ - "MinimalistYing", - "xgqfrms", - "RainSlide", - "zhangchen", - "Coink", - "daolanfler", - "lmislm", - "Ende93", - "wsv587" + "world521" ] }, - "Web/JavaScript/Reference/Operators/按位与": { - "modified": "2020-10-15T22:33:57.582Z", + "conflicting/Web/HTML/Quirks_Mode_and_Standards_Mode": { + "modified": "2019-03-24T00:17:27.134Z", "contributors": [ - "hellorayza" + "OoOoOoOo", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Operators/相加": { - "modified": "2020-10-15T22:31:36.619Z", + "Web/API/EventSource/close": { + "modified": "2019-03-23T22:09:23.731Z", "contributors": [ - "lws123321", - "Spengh" + "Char-Ten" ] }, - "Web/JavaScript/Reference/Operators/相等": { - "modified": "2020-10-28T03:33:52.196Z", + "Web/API/EventSource/EventSource": { + "modified": "2019-08-07T05:55:13.404Z", "contributors": [ - "SphinxKnight", - "thefirst-ma", - "zhangchen", - "lujing2", - "milulelele" + "ZZES_REN", + "kameii" ] }, - "Web/JavaScript/Reference/Operators/管道操作符": { - "modified": "2020-10-15T21:59:15.552Z", + "Web/API/EventSource": { + "modified": "2020-10-15T21:21:30.406Z", "contributors": [ + "into-piece", "RainSlide", - "fsy0718", - "zhangchen", - "qdlaoyao", - "fphonor" - ] - }, - "Web/JavaScript/Reference/Operators/自减": { - "modified": "2020-10-15T22:33:30.374Z", - "contributors": [ - "helsmy" + "Jack.Works", + "xlaoyu", + "xgqfrms-GitHub", + "kameii", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Operators/逻辑和": { - "modified": "2020-10-15T22:32:55.133Z", + "Web/API/EventSource/onerror": { + "modified": "2019-03-23T22:09:23.181Z", "contributors": [ - "matsongajapan" + "Char-Ten" ] }, - "Web/JavaScript/Reference/Reserved_words": { - "modified": "2019-03-23T23:46:04.954Z", + "Web/API/EventSource/onopen": { + "modified": "2019-03-23T22:16:16.621Z", "contributors": [ - "fangnanjun", - "Haichao", - "teoli", - "Mickeyboy" + "kameii" ] }, - "Web/JavaScript/Reference/Statements": { - "modified": "2020-11-19T11:54:21.852Z", + "Web/API/Server-sent_events": { + "modified": "2020-03-04T10:52:34.764Z", "contributors": [ - "xgqfrms", - "wwj402", + "femaimi", "RainSlide", - "victor0801x", - "yenshen", - "Ende93", - "webery", - "ziyunfei", - "teoli" + "act262", + "raju_dasa" ] }, - "Web/JavaScript/Reference/Statements/Empty": { - "modified": "2020-10-15T21:32:25.866Z", + "Web/API/Server-sent_events/Using_server-sent_events": { + "modified": "2020-10-15T21:21:32.267Z", "contributors": [ - "zhangchen", - "Hugh", - "git123hub", - "yenshen" + "kagurakana", + "mkckr0", + "xgqfrms-GitHub", + "jamemark", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Statements/async_function": { - "modified": "2020-11-26T06:15:48.712Z", + "Mozilla/Firefox/Releases/19/Site_compatibility": { + "modified": "2019-01-16T17:00:07.852Z", "contributors": [ - "superchow", - "Neo42", - "zhangxingeng", - "Irisa", - "brizer", - "icethawless", - "rockan007", - "AppleTenlp", - "gqbre", - "elkfn", - "Hew007", - "Ende93", - "YKG", - "42", - "murphywuwu", - "ntnyq", - "jaredhan418", - "TriStone", - "lmislm", - "toyflivver", - "dudueasy", - "NiroDu", - "awmleer", - "mysmlz", - "Bill0412", - "Jessy.D.", - "zxsunrise", - "pujiaxun", - "biggersun", - "Jiang-Xuan", - "pot-code", - "ofatbird", - "shhider", - "zhangchen", - "xgqfrms-GitHub", - "_da", - "Katherina-Miao" + "wbamberg", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Statements/block": { - "modified": "2020-11-26T06:25:49.649Z", + "Mozilla/Firefox/Releases/21/Site_compatibility": { + "modified": "2019-01-16T17:20:04.063Z", "contributors": [ - "cikelichu", - "daxiazilong", - "ywjco", - "zhangchen", - "icepro", - "Canaan", - "frankfang1990", - "Cattla", - "yenshen" + "wbamberg", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Statements/break": { - "modified": "2020-11-26T22:14:31.749Z", + "Mozilla/Firefox/Releases/23/Site_compatibility": { + "modified": "2019-01-16T17:27:23.228Z", "contributors": [ - "superchow", - "zhangchen", - "git123hub", - "Poisonloc", - "AlexChao" + "wbamberg", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Statements/class": { - "modified": "2020-10-15T21:40:52.749Z", + "Mozilla/Firefox/Releases/24/Site_compatibility": { + "modified": "2019-01-16T17:27:30.001Z", "contributors": [ - "zhangchen", - "LiXin", - "xgqfrms-GitHub", - "AimLuo", - "makebanana", - "ryanlid", - "kdex", - "lixuguang", - "ouonet", - "MrLyp", - "jooyoon", - "webery" + "wbamberg", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Statements/const": { - "modified": "2020-11-20T09:29:05.867Z", + "orphaned/Web/Specification_list": { + "modified": "2019-03-23T23:31:18.870Z", "contributors": [ - "zhuangyin", - "Snailight", - "niices", - "RainSlide", - "Jat", - "zhangchen", - "winjeysong", - "myl0204", - "xgqfrms-GitHub", - "shifengchen", - "Go7hic", - "zhe13", - "webery", - "lunix01", - "teoli", "ziyunfei" ] }, - "Web/JavaScript/Reference/Statements/continue": { - "modified": "2020-10-15T21:22:29.579Z", + "orphaned/Tools/Add-ons": { + "modified": "2020-07-16T22:36:23.904Z", "contributors": [ - "zhangchen", - "tiansh", - "teoli", - "sunorry" + "wbamberg", + "maicss" ] }, - "Web/JavaScript/Reference/Statements/debugger": { - "modified": "2020-10-15T21:19:13.851Z", + "Tools/3D_View": { + "modified": "2020-07-16T22:34:25.755Z", "contributors": [ - "zhangchen", - "yenshen", - "teoli", + "Gitai", + "wbamberg", "ziyunfei" ] }, - "Web/JavaScript/Reference/Statements/default": { - "modified": "2020-10-15T21:40:53.796Z", + "Tools/Page_Inspector/How_to/Edit_fonts": { + "modified": "2020-07-16T22:34:39.361Z", "contributors": [ - "hellokidder", - "zhangchen", - "binguanghe", - "Lukas-LiuYi", - "fscholz" + "wbamberg", + "webery" ] }, - "Web/JavaScript/Reference/Statements/do...while": { - "modified": "2020-10-15T21:32:25.936Z", + "Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE": { + "modified": "2019-03-23T23:02:33.405Z", "contributors": [ - "zhangchen", - "yenshen" + "wbamberg", + "qq18588696841" ] }, - "Web/JavaScript/Reference/Statements/export": { - "modified": "2020-10-31T21:18:02.310Z", + "Tools/Responsive_Design_Mode": { + "modified": "2020-07-16T22:35:22.496Z", "contributors": [ - "wenxiayili", - "panzhh", - "brizer", - "Casseil-1996", - "zhouxyy", - "symant233", - "Asuka109", - "hanalice", - "narutojian", - "ThisIszas", - "GentleGong", - "woniuxingdong", - "TeabugCC", - "yinpeng123", - "RainSlide", - "xgqfrms", - "wossig", - "zarvin", - "TimmyKingFree", - "zhangchen", - "xgqfrms-GitHub", - "Jiang-Xuan", - "Suixinlei", - "nolanlee", - "sartrey", - "jianyi1995" + "wbamberg", + "Meteormatt", + "maybe", + "ziyunfei", + "dannyxu" ] }, - "Web/JavaScript/Reference/Statements/for": { - "modified": "2020-10-15T21:38:44.431Z", + "Tools/Web_Audio_Editor": { + "modified": "2020-07-16T22:36:08.958Z", "contributors": [ - "RainSlide", - "yy7054wyq5", - "zhangchen", - "IShinji", - "yenshen", - "oscar1980", - "gaigeshen" + "wbamberg", + "ab233", + "DorayHong" ] }, - "Web/JavaScript/Reference/Statements/for-await...of": { - "modified": "2020-11-19T13:54:59.528Z", + "Tools/Deprecated_tools": { + "modified": "2020-07-16T22:36:40.884Z", "contributors": [ - "xgqfrms", - "jingkaimori", - "AozakiOrenji", - "Ende93", - "SphinxKnight", - "mrdulin", - "WangXiaoyu", - "thereAnana" + "GMMG55" ] }, - "Web/JavaScript/Reference/Statements/for...in": { - "modified": "2020-10-15T21:07:57.911Z", + "Tools/Storage_Inspector": { + "modified": "2020-07-16T22:36:10.648Z", "contributors": [ - "lmislm", - "毛毛_", - "name-dingding", - "raoenhui", - "412799755", - "Hourann", - "XiangHongAi", - "jiladahe1997", - "zhangchen", - "WPH2017", - "xgqfrms-GitHub", - "jdk137", - "yatace", - "helloguangxue", - "Ende93", - "wonyun", - "denghongcai", - "teoli", - "ziyunfei" + "hellojackhui" ] }, - "Web/JavaScript/Reference/Statements/for...of": { - "modified": "2020-10-15T21:07:54.800Z", + "Tools/Tips": { + "modified": "2020-07-16T22:36:36.674Z", "contributors": [ - "sendudu", - "mouming", - "houzp", - "zgj233", - "osramywj", - "Joker09", - "Jiang-Xuan", - "charliex2", - "zhangchen", - "killsos", - "xgqfrms-GitHub", - "zhuangyin", - "yihuan", - "yanlee26", - "dingxu", - "lsvih", - "imnodb", - "Ende93", - "iamchenxin", - "teoli", - "ziyunfei" + "Argon-Pub", + "wbamberg", + "ShirleyM" ] }, - "Web/JavaScript/Reference/Statements/function": { - "modified": "2020-12-02T02:36:07.313Z", + "Mozilla/Firefox/Releases/3/Updating_extensions": { + "modified": "2019-12-13T20:33:30.985Z", "contributors": [ - "zhuangyin", - "frankfang1990", - "maicss", - "xgqfrms-GitHub", - "helloguangxue", - "yenshen", - "teoli", - "ielgnaw" + "wbamberg", + "ziyunfei", + "Sheppy", + "phenix", + "Loveunk" ] }, - "Web/JavaScript/Reference/Statements/function*": { - "modified": "2020-10-15T21:27:24.673Z", + "Web/Guide/Introduction_to_Web_development": { + "modified": "2019-03-24T00:00:33.366Z", "contributors": [ - "HCSkatana", - "kingsley2036", - "RoXoM", - "Jiang-Xuan", - "ywjco", - "picc-lu", - "pot-code", - "righttoe", - "kdex", - "xgqfrms-GitHub", - "ShupingLiu", - "lunix01", - "simongfxu", "ziyunfei", - "fskuok", - "teoli" + "fantasticfears" ] }, - "Web/JavaScript/Reference/Statements/if...else": { - "modified": "2020-10-15T21:32:24.204Z", + "Web/Accessibility/ARIA/Roles/button_role": { + "modified": "2019-03-23T22:05:01.811Z", "contributors": [ - "maoyumaoxun", - "zhangchen", - "jjc", - "TimmyKingFree", - "Hugh", - "connie77", - "yenshen" + "TiaossuP" ] }, - "Web/JavaScript/Reference/Statements/import": { - "modified": "2020-10-15T21:36:46.597Z", + "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute": { + "modified": "2019-10-31T22:25:58.797Z", + "contributors": [ + "YoMiao", + "civerzhang" + ] + }, + "orphaned/Web/API/AnalyserNode/fft": { + "modified": "2019-03-18T20:44:28.140Z", "contributors": [ - "SunnyDayLily", - "laampui", - "brizer", - "TeabugCC", "RainSlide", - "daihaoxin", - "jason-grimm", - "jjyyxx", - "Ende93", - "zhangchen", - "xgqfrms-GitHub", - "xiaomingming", - "Jiang-Xuan", - "houbx", - "taokd", - "Skyang", - "larntin", - "bambooom", - "ziyunfei", - "wengeezhang", - "sartrey", - "WangZishi" + "GabrielchenCN" ] }, - "Web/JavaScript/Reference/Statements/import.meta": { - "modified": "2020-10-15T22:07:59.455Z", + "Web/API/BaseAudioContext/createAnalyser": { + "modified": "2019-03-23T22:51:30.295Z", "contributors": [ - "gitHber", - "JonathanLee-LX" + "Ambar", + "ayqy" ] }, - "Web/JavaScript/Reference/Statements/label": { - "modified": "2020-10-15T21:31:44.464Z", + "Web/API/BaseAudioContext/createBiquadFilter": { + "modified": "2019-03-23T22:19:40.757Z", "contributors": [ - "xgqfrms", - "RainSlide", - "zhangchen", - "delkaka", - "AlexChao" + "feewb", + "yqjiang" ] }, - "Web/JavaScript/Reference/Statements/let": { - "modified": "2020-10-15T21:07:01.000Z", + "Web/API/BaseAudioContext/createBuffer": { + "modified": "2019-03-23T22:49:27.952Z", "contributors": [ - "Snailight", - "卡尔维斯特", - "JameMoriarty", - "yangnaiyue", - "Zhang-Junzhi", - "wongxiao", - "Ende93", - "jzz2649", - "SphinxKnight", - "Lan1967", - "Freezer", - "alexzaolin", - "JunjieCai", - "ilyp", - "ssttii", - "jcguang", - "mathxlee", - "ywjco", - "zhangchen", - "yingying", - "frankfang1990", - "swfbarhr", - "xgqfrms-GitHub", - "mr.code", - "artificial", - "leafdog", - "yangzongjie", - "ZhiRui", - "ZhanghaoH", - "ChuckZhang", - "Go7hic", - "highsea", - "panhezeng", - "kemchenj", - "lunix01", - "dondevi", - "hang", - "Rococolate", - "ouonet", - "ziyunfei", - "WangZishi", - "Junjie_Wei", - "teoli", - "nightire", - "ted423" + "Taoja", + "LiuTong", + "Losses" ] }, - "Web/JavaScript/Reference/Statements/return": { - "modified": "2020-10-15T21:32:16.829Z", + "Web/API/BaseAudioContext/createBufferSource": { + "modified": "2019-03-23T22:26:08.102Z", "contributors": [ - "xianshenglu", - "zhangchen", - "Ende93", - "AlexChao" + "Taoja" + ] + }, + "Web/API/BaseAudioContext/createChannelMerger": { + "modified": "2019-03-23T22:21:54.996Z", + "contributors": [ + "win7killer" + ] + }, + "Web/API/BaseAudioContext/createChannelSplitter": { + "modified": "2019-03-23T22:19:41.394Z", + "contributors": [ + "yqjiang" + ] + }, + "Web/API/BaseAudioContext/createConvolver": { + "modified": "2019-03-23T22:31:06.367Z", + "contributors": [ + "TomdyQin" ] }, - "Web/JavaScript/Reference/Statements/switch": { - "modified": "2020-10-15T21:31:42.513Z", + "Web/API/BaseAudioContext/createDelay": { + "modified": "2019-03-23T22:16:38.056Z", "contributors": [ - "rianma", - "jfw10973", - "RainSlide", - "ywjco", - "zhangchen", - "PaperFlu", - "FAOfao931013", - "xgqfrms-GitHub", - "AlexChao", - "xin" + "wang_geng", + "jb145161" ] }, - "Web/JavaScript/Reference/Statements/throw": { - "modified": "2020-10-15T21:17:26.144Z", + "Web/API/BaseAudioContext/createScriptProcessor": { + "modified": "2020-03-24T04:10:23.984Z", "contributors": [ - "koalaxiaot", - "zhangchen", - "xgqfrms-GitHub", - "fanpaa", - "soulxy", - "onetwogoo", - "iFish", - "teoli", - "Mickeyboy" + "frankyoung0305", + "zwmin", + "fanmingfei", + "Remond", + "Melo.HG" ] }, - "Web/JavaScript/Reference/Statements/try...catch": { - "modified": "2020-10-15T21:35:35.752Z", + "Web/API/BaseAudioContext/createWaveShaper": { + "modified": "2019-03-23T22:15:28.242Z", "contributors": [ - "zhangchen", - "Lan1967", - "cddsgtc", - "Xheldon", - "gooqiao", - "llwanghong", - "YouHeng", - "xgqfrms-GitHub", - "Hugh", - "helloguangxue", - "TUKOMI", - "ziyunfei", - "licop" + "SHALLYKL" ] }, - "Web/JavaScript/Reference/Statements/var": { - "modified": "2020-10-15T21:29:22.023Z", + "Web/API/BaseAudioContext/currentTime": { + "modified": "2019-03-23T22:52:18.954Z", "contributors": [ - "FloydTsai", - "RainSlide", - "zhangchen", - "AymaxLi", - "xgqfrms-GitHub", - "The-End-Hero", - "loddit", - "lunix01", - "AlexChao", - "SphinxKnight", - "Fify" + "ayqy" ] }, - "Web/JavaScript/Reference/Statements/while": { - "modified": "2020-10-15T21:31:43.063Z", + "Web/API/BaseAudioContext/decodeAudioData": { + "modified": "2019-03-23T22:36:34.575Z", "contributors": [ - "RainSlide", - "zhangchen", - "ziyunfei", - "AlexChao" + "Taoja", + "huangxok" ] }, - "Web/JavaScript/Reference/Statements/with": { - "modified": "2020-10-15T21:29:35.662Z", + "Web/API/BaseAudioContext/destination": { + "modified": "2019-03-23T22:52:09.137Z", "contributors": [ - "SadWood", - "yangtoude", - "zhangchen", - "abc45628", - "xgqfrms-GitHub", - "kiling", - "wizardforcel", - "YFM-getA", - "jonkee", - "SphinxKnight", - "front" + "ayqy" ] }, - "Web/JavaScript/Reference/Strict_mode": { - "modified": "2020-03-12T19:35:37.779Z", + "Web/API/BaseAudioContext/listener": { + "modified": "2019-03-23T22:52:15.612Z", "contributors": [ - "xrkffgg", - "gaoyia", - "qiufeihong2018", - "Opelar", - "hmsz", - "amandameng", - "zhangchen", - "recursion", - "JuFoFu", - "qiu_han", - "tsejx", - "righttoe", - "xgqfrms-GitHub", - "holynewbie", - "nanflower", - "weimengxi", - "xuzicn", - "Qcui", - "Toweave", - "zilong-thu", - "anitawho", - "laoxubuer", - "knightf", - "Jack.Works", - "Dijason", - "ziyunfei", - "yaway", - "iahu", - "mountainmoon", - "Frantic1048", - "Darrel.Hsu", - "ReyCG", - "teoli", - "endlesswind" + "ayqy" ] }, - "Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode": { - "modified": "2020-03-12T19:38:14.564Z", + "orphaned/Web/API/AudioContext/mozAudioChannelType": { + "modified": "2019-03-23T22:52:10.983Z", "contributors": [ - "vincentdd", - "weimengxi", - "gavinjs", - "zjjott", - "ziyunfei", - "yenshen", - "teoli" + "ayqy" ] }, - "Web/JavaScript/Reference/Trailing_commas": { - "modified": "2020-10-15T21:52:12.920Z", + "Web/API/BaseAudioContext/onstatechange": { + "modified": "2019-03-23T22:52:09.265Z", "contributors": [ - "RainSlide", - "zhangchen", - "wizardforcel" + "ayqy" ] }, - "Web/JavaScript/Reference/template_strings": { - "modified": "2020-10-15T21:37:03.468Z", + "Web/API/BaseAudioContext/sampleRate": { + "modified": "2019-03-23T22:52:21.186Z", "contributors": [ - "SphinxKnight", - "fanky-huang", - "崮生", - "zhangchen", - "zouyang1230", - "aimishan", - "pujiaxun", - "ZQH", - "LNY", - "ywjco", - "winjeysong", - "xgqfrms-GitHub", - "lihx_hit", - "donyaw", - "Ende93", - "lukywong", - "FredWe" + "ayqy" ] }, - "Web/JavaScript/Shells": { - "modified": "2020-09-04T03:12:55.502Z", + "Web/API/BaseAudioContext/state": { + "modified": "2019-03-23T22:52:21.050Z", "contributors": [ - "a1157116165", - "StorytellerF", - "pluwen", - "sonymoon", - "pelligit", - "maicss" + "ayqy" ] }, - "Web/JavaScript/The_performance_hazards_of__[[Prototype]]_mutation": { - "modified": "2020-03-12T19:49:00.824Z", + "orphaned/Web/API/AudioNode/connect(AudioParam)": { + "modified": "2019-03-23T22:18:48.818Z", "contributors": [ - "Rominez", - "suhan" + "smilewalker" ] }, - "Web/JavaScript/Typed_arrays": { - "modified": "2020-10-15T21:26:17.964Z", + "Web/API/CanvasCaptureMediaStreamTrack": { + "modified": "2019-03-18T21:16:31.622Z", "contributors": [ - "norton-lee", - "ThomasWhyne", - "nkliyc", - "AngeloZ", - "zhangchen", - "wblovezqy", - "jing-y", - "lvsiyuan", - "xgqfrms-GitHub", - "JoyZF", - "jianzhou", - "lon", - "ngtmuzi", - "Amme", - "troywith77", - "ipy", - "teoli", - "zekai.zheng" + "scplay" ] }, - "Web/JavaScript/javascript(起步)": { - "modified": "2019-03-23T22:54:49.824Z", + "Web/API/Channel_Messaging_API/Using_channel_messaging": { + "modified": "2020-10-15T22:33:04.421Z", "contributors": [ - "Rupengkun" + "cheiron" ] }, - "Web/Localization": { - "modified": "2020-05-28T07:36:01.726Z", + "Web/API/CSSPageRule": { + "modified": "2020-10-15T22:24:48.715Z", "contributors": [ - "RoyZ", - "faliye" + "hongz1125" ] }, - "Web/Manifest": { - "modified": "2019-10-29T05:08:14.882Z", + "Web/API/Ambient_Light_Events": { + "modified": "2020-10-15T21:34:12.225Z", "contributors": [ - "7NZ", - "mySoul", - "flyingsouthwind", - "varcat", - "_da", - "xgqfrms-GitHub" + "RainSlide", + "fskuok" ] }, - "Web/Manifest/background_color": { - "modified": "2020-10-15T22:31:53.672Z", + "orphaned/Web/API/Document/cookie/Simple_document.cookie_framework": { + "modified": "2019-03-18T20:55:13.743Z", "contributors": [ - "wobuhuisuanmin", - "wr20060926" + "Tommy-White", + "xgqfrms-GitHub" ] }, - "Web/MathML": { - "modified": "2020-10-15T21:25:04.339Z", + "Web/API/Document/fullscreen": { + "modified": "2019-06-11T23:50:44.389Z", "contributors": [ - "RainSlide", - "Anonymous86x69ashe", - "pluwen", - "linmx0130", - "lunix01", - "fred.wang", - "fscholz" + "xiaoxingchi", + "hb-bobo", + "codeofjackie", + "teoli", + "AshfaqHossain", + "ziyunfei" ] }, - "Web/MathML/Attribute": { - "modified": "2019-03-23T22:52:18.616Z", + "Web/API/DocumentOrShadowRoot/fullscreenElement": { + "modified": "2019-03-24T00:17:55.698Z", "contributors": [ - "luneice", - "FredWe" + "teoli", + "jsx", + "ziyunfei" ] }, - "Web/MathML/Authoring": { - "modified": "2019-10-27T00:08:11.337Z", + "Web/API/Document/fullscreenEnabled": { + "modified": "2019-03-24T00:17:54.483Z", "contributors": [ - "RainSlide", - "fanxiaojie", - "FredWe" + "teoli", + "khalid32", + "ziyunfei" ] }, - "Web/MathML/Element": { - "modified": "2020-03-31T12:28:08.721Z", + "Web/API/DocumentOrShadowRoot/pointerLockElement": { + "modified": "2019-03-23T22:20:46.971Z", "contributors": [ - "RainSlide", - "qson", - "ziyunfei", - "a.stone" + "876843240" ] }, - "Web/MathML/Element/maction": { - "modified": "2019-03-18T21:42:16.631Z", + "Web/API/Document/touchmove_event": { + "modified": "2019-04-30T14:14:32.752Z", "contributors": [ - "LiuYuan" + "wbamberg", + "irenesmith", + "fscholz", + "zhaosource" ] }, - "Web/MathML/Element/math": { - "modified": "2019-03-23T22:48:38.735Z", + "Web/API/Element/DOMActivate_event": { + "modified": "2020-10-15T22:15:27.177Z", "contributors": [ - "linmx0130" + "Carllllo", + "wbamberg", + "irenesmith", + "chenyanfei-m" ] }, - "Web/MathML/Element/mroot": { - "modified": "2019-03-18T21:42:14.503Z", + "Web/API/Document/onafterscriptexecute": { + "modified": "2019-03-24T00:15:00.171Z", "contributors": [ - "LiuYuan" + "wbamberg", + "teoli", + "khalid32", + "ziyunfei", + "zhangyaochun1987" ] }, - "Web/MathML/Element/mrow": { - "modified": "2020-10-15T22:25:33.815Z", + "orphaned/Web/API/Entity": { + "modified": "2020-06-03T01:07:43.853Z", "contributors": [ - "RainSlide" + "RainSlide", + "xgqfrms-GitHub" ] }, - "Web/MathML/Element/mspace": { - "modified": "2019-03-18T21:42:15.461Z", + "Web/API/Event/cancelBubble": { + "modified": "2019-03-23T22:20:20.011Z", "contributors": [ - "LiuYuan" + "shockw4ver", + "xgqfrms-GitHub", + "SuunZhu" ] }, - "Web/MathML/Element/msqrt": { - "modified": "2019-03-18T21:42:14.783Z", + "Web/API/AbortController/abort": { + "modified": "2020-10-15T22:22:26.939Z", "contributors": [ - "LiuYuan" + "cuiwei4869" ] }, - "Web/MathML/Element/msub": { - "modified": "2019-03-18T21:42:15.091Z", + "Web/API/AbortController/AbortController": { + "modified": "2020-10-15T22:10:15.849Z", "contributors": [ - "LiuYuan" + "xiiiAtCn" ] }, - "Web/MathML/Element/msubsup": { - "modified": "2020-10-15T22:28:42.346Z", + "Web/API/AbortController": { + "modified": "2020-10-15T21:56:50.608Z", "contributors": [ - "RainSlide" + "xgqfrms", + "chjxx", + "zhangchen", + "wuCrio" ] }, - "Web/MathML/Element/msup": { - "modified": "2020-10-15T22:01:09.939Z", + "orphaned/Web/API/FetchObserver": { + "modified": "2019-03-23T22:06:02.004Z", "contributors": [ - "RainSlide", - "LiuYuan" + "wuCrio" ] }, - "Web/MathML/Examples": { - "modified": "2019-10-26T23:25:14.524Z", + "Web/API/FileReader/abort_event": { + "modified": "2020-12-13T03:52:22.584Z", "contributors": [ - "RainSlide", - "Anonymous86x69ashe", - "Seattle", - "abc3660170", - "FredWe" + "VacantHusky" ] }, - "Web/MathML/Examples/Deriving_the_Quadratic_Formula": { - "modified": "2019-10-27T00:00:27.008Z", + "Web/API/FormData/delete": { + "modified": "2020-10-15T21:48:28.738Z", "contributors": [ "RainSlide", - "luneice" + "stevobm", + "tomi-li" ] }, - "Web/MathML/Examples/MathML_Pythagorean_Theorem": { - "modified": "2019-10-26T23:28:44.470Z", + "Web/API/Fullscreen_API/Guide": { + "modified": "2020-10-15T22:14:45.841Z", "contributors": [ - "RainSlide", - "Anonymous86x69ashe", - "Seattle" + "Soyaine", + "wuzy_oye" ] }, - "Web/Media/Formats": { - "modified": "2019-10-28T06:26:59.997Z", + "Web/API/Geolocation_API": { + "modified": "2019-07-01T03:42:53.000Z", "contributors": [ - "jswisher" + "aimilu", + "Syoogool", + "rongnianzu", + "rrandom", + "ziyunfei", + "Breezewish", + "shura-china", + "xcffl" ] }, - "Web/Media/Formats/Containers": { - "modified": "2020-11-01T10:00:22.590Z", + "Web/API/GeolocationPosition/timestamp": { + "modified": "2020-10-15T22:32:25.842Z", "contributors": [ - "happyxxj" + "liu-yanlong" ] }, - "Web/Media/Formats/Image_types": { - "modified": "2020-10-28T06:58:07.754Z", + "Web/API/GlobalEventHandlers/ondurationchange": { + "modified": "2020-10-15T22:21:15.042Z", "contributors": [ - "hylashyla", - "RainSlide" + "suvyme", + "amehito" ] }, - "Web/Media/Formats/视频编解码器": { - "modified": "2019-10-29T00:53:07.418Z", + "Web/API/HTMLAnchorElement/referrerPolicy": { + "modified": "2019-03-23T22:47:13.629Z", "contributors": [ - "zxhaha" + "ziyunfei" ] }, - "Web/Performance": { - "modified": "2020-07-21T05:10:44.104Z", + "Web/API/HTMLCanvasElement/captureStream": { + "modified": "2020-03-01T21:28:17.989Z", "contributors": [ - "lvbaiying", - "FE_pangxing", - "biqing", - "RainSlide", - "maoyougan", - "sqd123", - "chrisdavidmills", - "iceytea" + "jollybearchina", + "dxiaoqi" ] }, - "Web/Performance/CSS_JavaScript_animation_performance": { - "modified": "2020-07-29T00:36:34.087Z", + "Web/API/HTMLOrForeignElement/blur": { + "modified": "2019-03-23T22:00:21.147Z", "contributors": [ - "deping_chen", - "sunfeel", - "liangbus" + "teoli", + "fscholz", + "ziyunfei" ] }, - "Web/Performance/Critical_rendering_path": { - "modified": "2020-10-13T09:41:03.369Z", + "Web/API/HTMLOrForeignElement/dataset": { + "modified": "2019-08-08T12:52:36.012Z", "contributors": [ - "xgqfrms", - "HouGiser", - "HuiyingShen96", - "chafel" + "ilexwg", + "xgqfrms-GitHub", + "teoli", + "ziyunfei", + "ReyCG_sub", + "ReyCG" ] }, - "Web/Performance/Lazy_loading": { - "modified": "2020-10-13T09:10:51.078Z", + "Web/API/HTMLOrForeignElement/focus": { + "modified": "2020-10-15T21:06:47.253Z", "contributors": [ - "xgqfrms" + "RainSlide", + "slimeball", + "teoli", + "khalid32", + "ziyunfei" ] }, - "Web/Performance/Optimizing_startup_performance": { - "modified": "2019-03-23T22:00:17.334Z", + "Web/API/HTMLOrForeignElement/nonce": { + "modified": "2020-12-05T03:41:17.381Z", "contributors": [ - "chrisdavidmills", - "codeofjackie" + "hufeicom", + "chenqingyue" ] }, - "Web/Performance/Rum-vs-Synthetic": { - "modified": "2020-10-13T09:51:23.567Z", + "Web/API/ElementCSSInlineStyle/style": { + "modified": "2020-10-15T21:30:08.559Z", "contributors": [ - "xgqfrms" + "zhuangyin", + "xgqfrms-GitHub", + "distums", + "teoli", + "AlexChao" ] }, - "Web/Performance/dns-prefetch": { - "modified": "2020-10-13T10:51:56.349Z", + "Web/API/HTMLOrForeignElement/tabIndex": { + "modified": "2019-03-24T00:16:26.046Z", "contributors": [ - "xgqfrms", - "chrisdavidmills", - "caoweiju" + "teoli", + "Hasilt", + "sleepholic", + "ziyunfei" ] }, - "Web/Performance/浏览器渲染页面的工作原理": { - "modified": "2020-04-02T13:24:16.615Z", + "Web/API/Intersection_Observer_API/Timing_element_visibility": { + "modified": "2019-03-23T22:11:40.163Z", "contributors": [ - "Galaxy" + "xgqfrms-GitHub" ] }, - "Web/Progressive_web_apps": { - "modified": "2020-03-14T09:56:33.733Z", + "Web/API/MediaStream/addTrack": { + "modified": "2019-03-23T22:37:09.665Z", "contributors": [ - "Miahui", - "kkocdko", - "chrisdavidmills", - "sijimi", - "xgqfrms-GitHub", - "xgqfrms" + "w05163" ] }, - "Web/Progressive_web_apps/App_structure": { - "modified": "2020-05-31T18:38:01.454Z", + "orphaned/Web/API/MSSelection": { + "modified": "2020-02-27T01:47:20.687Z", "contributors": [ - "jin_wang", - "Miahui", - "xiao11lang", - "Mosan", - "githubxiaominge", - "liminjun", - "zjffun", - "alfred_chao95", - "chrisdavidmills", - "eightHundreds" + "MCCF" ] }, - "Web/Progressive_web_apps/Installable_PWAs": { - "modified": "2020-08-03T23:25:28.976Z", + "orphaned/Web/API/NameList": { + "modified": "2019-03-23T22:46:53.836Z", "contributors": [ - "SDUTWSL", - "nurob", - "Dht", - "Miahui", - "HDUCC", - "deping_chen" + "MeCKodo" ] }, - "Web/Progressive_web_apps/Introduction": { - "modified": "2019-08-21T09:58:46.102Z", + "orphaned/Web/API/NavigatorPlugins/测试滕盖": { + "modified": "2019-03-23T22:49:37.647Z", "contributors": [ - "jackupdown", - "zjffun", - "chrisdavidmills", - "eightHundreds", - "yijie_sun" + "ChenChenJoke" ] }, - "Web/Progressive_web_apps/Network_independent": { - "modified": "2019-03-18T20:52:05.037Z", + "Web/API/HTMLElement/innerText": { + "modified": "2020-10-15T21:50:36.703Z", "contributors": [ - "chrisdavidmills", - "liminjun", - "xgqfrms-GitHub" + "wuyou", + "RainSlide", + "keifergu", + "xgqfrms-GitHub", + "Aolose" ] }, - "Web/Progressive_web_apps/Offline_Service_workers": { - "modified": "2020-07-02T16:41:37.440Z", + "orphaned/Web/API/notification/sound": { + "modified": "2019-03-18T21:17:44.470Z", "contributors": [ - "showad", - "nurob", - "githubxiaominge", - "zjffun" + "ZZES_REN" ] }, - "Web/Progressive_web_apps/Re-engageable": { - "modified": "2019-03-18T20:52:04.596Z", + "Web/API/Notifications_API/Using_the_Notifications_API": { + "modified": "2020-03-18T06:57:06.393Z", "contributors": [ - "chrisdavidmills", - "liminjun" + "wangyb1026", + "Yifang-Tongxing", + "845056166", + "xgqfrms-GitHub", + "Hawkeyes_Wind" ] }, - "Web/Progressive_web_apps/Re-engageable_Notifications_Push": { - "modified": "2020-05-31T18:38:17.693Z", + "Web/API/OfflineAudioContext/complete_event": { + "modified": "2020-10-15T22:17:22.684Z", "contributors": [ - "nurob", - "githubxiaominge" + "ewfian", + "ljx23136138" ] }, - "Web/Progressive_web_apps/Responsive": { - "modified": "2019-03-18T20:52:04.806Z", + "Web/API/Performance/memory": { + "modified": "2020-10-15T22:29:17.983Z", "contributors": [ - "chrisdavidmills", - "liminjun" + "biqing" ] }, - "Web/Progressive_web_apps/Responsive/responsive_design_building_blocks": { - "modified": "2020-11-17T04:04:41.165Z", + "Web/API/Crypto/getRandomValues": { + "modified": "2020-10-15T21:53:31.704Z", "contributors": [ - "DingGuangbo" + "RainSlide", + "ywjco", + "micblo" ] }, - "Web/Progressive_web_apps/优势": { - "modified": "2019-04-18T12:23:20.526Z", + "Web/API/Response/clone": { + "modified": "2019-03-23T22:03:57.353Z", "contributors": [ - "chenronghui" + "Ende93", + "xiaoxiaojx" ] }, - "Web/Progressive_web_apps/加载": { - "modified": "2019-08-31T10:29:37.985Z", + "Web/API/Screen_Capture_API/Using_Screen_Capture": { + "modified": "2020-09-27T04:18:52.593Z", "contributors": [ - "githubxiaominge" + "Bigsomg", + "hzy" ] }, - "Web/Progressive_web_apps/添加到主屏幕": { - "modified": "2019-11-13T02:27:54.714Z", + "Web/API/Selection/deleteFromDocument": { + "modified": "2019-03-23T22:25:17.531Z", "contributors": [ - "JC-Ge" + "FormatFa" ] }, - "Web/Reference": { - "modified": "2019-03-18T21:10:51.690Z", + "Web/API/Streams_API/Using_readable_streams": { + "modified": "2019-08-08T09:43:09.249Z", "contributors": [ - "SphinxKnight", - "acuptea", - "rguanghui", - "huasheng", - "yangchengjian", - "liuwentianwtu", - "jack7758", - "ValkyrieLawliet", - "ZhangKaiqiang", - "colin-zhou", - "ziyunfei", - "Sheppy" + "qushuangru" ] }, - "Web/Reference/API": { - "modified": "2020-02-06T00:29:14.463Z", + "Web/API/Streams_API/Concepts": { + "modified": "2020-10-27T00:49:21.364Z", "contributors": [ - "RainSlide", - "yongxiaodu", - "micblo", - "kevinfszu", - "yfdyh000", - "zmh_w", - "tangxiaobaobao", - "ziyunfei", - "noscripter", - "hutuxu" + "xyzingh" ] }, - "Web/SVG": { - "modified": "2020-05-25T07:08:22.112Z", + "orphaned/Web/API/TextRange/text": { + "modified": "2020-02-26T01:25:35.461Z", "contributors": [ - "Adrian-Yan", - "RainSlide", - "pluwen", - "LalaChu", - "simongfxu", - "fanxiaojie", - "Metalooze", - "lunix01", - "charlie", - "johncido", - "cuixiping", - "huguowei", - "teoli", - "xcffl", - "LIXer" + "MCCF" ] }, - "Web/SVG/Applying_SVG_effects_to_HTML_content": { - "modified": "2020-10-21T05:14:10.197Z", + "Web/API/UIEvent/view": { + "modified": "2020-10-15T22:25:09.871Z", "contributors": [ - "Chellyyy", - "Kylexii", - "almond", - "AaronYehf", - "swingcat", - "SphinxKnight", - "fanxiaojie" + "pans9" ] }, - "Web/SVG/Attribute": { - "modified": "2020-06-11T11:15:23.661Z", + "Web/API/URL/password": { + "modified": "2020-10-15T22:20:32.740Z", "contributors": [ - "chanvin", - "RainSlide", - "fanxiaojie", - "slientomorrr", - "stevenvachon" + "zhangchen", + "jessieic", + "jinjin" ] }, - "Web/SVG/Attribute/From": { - "modified": "2019-03-23T22:07:46.163Z", + "Web/API/HTMLHyperlinkElementUtils/hash": { + "modified": "2020-02-24T00:59:03.514Z", "contributors": [ - "876843240" + "ikomom", + "xgqfrms-GitHub" ] }, - "Web/SVG/Attribute/Presentation": { - "modified": "2020-10-15T22:23:08.667Z", + "Web/API/HTMLHyperlinkElementUtils/href": { + "modified": "2019-03-23T22:13:56.960Z", "contributors": [ - "gogoend" + "xgqfrms-GitHub" ] }, - "Web/SVG/Attribute/accent-height": { - "modified": "2019-07-05T08:35:14.107Z", + "Web/API/HTMLHyperlinkElementUtils": { + "modified": "2020-10-15T21:33:08.803Z", "contributors": [ - "yvonneit" + "RainSlide", + "AyAmeng", + "teoli" ] }, - "Web/SVG/Attribute/accumulate": { - "modified": "2019-03-23T22:32:55.125Z", + "Web/API/HTMLHyperlinkElementUtils/origin": { + "modified": "2019-03-23T22:12:28.154Z", "contributors": [ - "fanxiaojie" + "xgqfrms-GitHub" ] }, - "Web/SVG/Attribute/alignment-baseline": { - "modified": "2019-07-05T08:35:05.656Z", + "Web/API/HTMLHyperlinkElementUtils/password": { + "modified": "2019-03-23T22:12:38.210Z", "contributors": [ - "liyongleihf2006", - "fanxiaojie" + "xgqfrms-GitHub" ] }, - "Web/SVG/Attribute/attributeName": { - "modified": "2019-03-23T22:46:42.034Z", + "Web/API/HTMLHyperlinkElementUtils/pathname": { + "modified": "2019-03-23T22:12:27.883Z", "contributors": [ - "fanxiaojie" + "xgqfrms-GitHub" ] }, - "Web/SVG/Attribute/attributeType": { - "modified": "2019-03-23T22:46:39.534Z", + "Web/API/HTMLHyperlinkElementUtils/search": { + "modified": "2019-03-23T22:16:26.271Z", "contributors": [ - "fanxiaojie" + "xgqfrms-GitHub", + "kameii" ] }, - "Web/SVG/Attribute/baseProfile": { - "modified": "2019-07-05T08:35:43.566Z", + "Web/API/HTMLHyperlinkElementUtils/toString": { + "modified": "2019-03-23T22:13:59.877Z", "contributors": [ - "leighcc" + "xgqfrms-GitHub" ] }, - "Web/SVG/Attribute/baseline-shift": { - "modified": "2019-03-23T22:46:48.235Z", + "Web/API/HTMLHyperlinkElementUtils/username": { + "modified": "2019-03-23T22:12:31.600Z", "contributors": [ - "fanxiaojie" + "xgqfrms-GitHub" ] }, - "Web/SVG/Attribute/begin": { - "modified": "2019-03-23T22:46:49.938Z", + "Web/API/Web_Audio_API/Best_practices": { + "modified": "2020-04-13T06:14:13.545Z", "contributors": [ - "wbamberg", - "fanxiaojie" + "KotoriK" ] }, - "Web/SVG/Attribute/calcMode": { - "modified": "2019-03-23T22:10:34.986Z", + "Web/API/WebGLRenderingContext/polygonOffset": { + "modified": "2020-10-15T22:09:39.645Z", "contributors": [ - "leedut" + "ZhaoYaoSheng" ] }, - "Web/SVG/Attribute/clip": { - "modified": "2020-10-15T21:39:26.851Z", + "Web/API/WebSocket/binaryType": { + "modified": "2020-10-15T22:11:38.195Z", "contributors": [ - "RainSlide", - "fanxiaojie" + "snowwolfjay", + "jaredhan418" ] }, - "Web/SVG/Attribute/clip-path": { - "modified": "2020-10-15T22:28:50.040Z", + "orphaned/Web/API/WebSockets_API/WebSocket_Server_Vb.NET": { + "modified": "2019-03-18T21:29:02.340Z", "contributors": [ - "jhchen6" + "xiaoyixiang" ] }, - "Web/SVG/Attribute/color": { - "modified": "2020-10-15T21:39:18.231Z", + "Web/API/WindowOrWorkerGlobalScope/clearInterval": { + "modified": "2020-10-15T21:21:33.193Z", "contributors": [ + "RainCruise", "RainSlide", - "fanxiaojie" - ] - }, - "Web/SVG/Attribute/cx": { - "modified": "2019-03-23T22:18:03.024Z", - "contributors": [ - "realstephenzhao", - "huainanhai" + "luojia", + "teoli", + "khalid32", + "ziyunfei" ] }, - "Web/SVG/Attribute/cy": { - "modified": "2019-03-18T21:22:46.371Z", + "orphaned/Web/API/Window/getAttention": { + "modified": "2020-10-15T22:21:28.407Z", "contributors": [ - "realstephenzhao" + "luoxue-victor" ] }, - "Web/SVG/Attribute/d": { - "modified": "2019-03-23T22:55:44.323Z", + "Web/API/WindowEventHandlers/onbeforeunload": { + "modified": "2019-05-09T03:05:32.709Z", "contributors": [ - "msyfls123", - "fanxiaojie", - "creamidea", - "charlie" + "johnlin0207", + "Etoile984816138", + "1Cr18Ni9", + "teoli", + "khalid32", + "ziyunfei", + "WenbingZheng" ] }, - "Web/SVG/Attribute/display": { - "modified": "2020-11-17T10:08:32.937Z", + "Web/API/WindowEventHandlers/onhashchange": { + "modified": "2020-10-15T21:06:52.013Z", "contributors": [ - "292514467", - "misakisaysyes", - "radial-hks" + "Arnie97", + "xgqfrms-GitHub", + "Ende93", + "vuji", + "teoli", + "khalid32", + "ziyunfei" ] }, - "Web/SVG/Attribute/dominant-baseline": { - "modified": "2019-03-23T22:09:53.226Z", + "Web/API/WindowEventHandlers/onpopstate": { + "modified": "2020-10-15T21:07:15.381Z", "contributors": [ - "xinjianheyi" + "SUCHMOKUO", + "wuyou", + "ReedSun", + "wenshin", + "xiaomingming", + "vose2008", + "teoli", + "Hasilt", + "ziyunfei" ] }, - "Web/SVG/Attribute/dur": { - "modified": "2019-03-23T22:46:40.065Z", + "Web/API/WindowEventHandlers/onunload": { + "modified": "2020-10-23T06:31:44.836Z", "contributors": [ - "fanxiaojie" + "liguorain", + "lon", + "teoli", + "AshfaqHossain", + "ziyunfei" ] }, - "Web/SVG/Attribute/dx": { - "modified": "2020-08-25T05:37:26.030Z", + "Web/API/WindowOrWorkerGlobalScope/setInterval": { + "modified": "2020-11-25T18:16:55.949Z", "contributors": [ - "danceash", - "jiahui" + "RayTang-hub", + "cellinlab", + "Jiangmenghao", + "TXYjing", + "Soul", + "fengbin", + "RainSlide", + "brandonhyc", + "xgqfrms-GitHub", + "shery", + "xgqfrms", + "teoli", + "khalid32", + "ziyunfei", + "sonicview" ] }, - "Web/SVG/Attribute/edgeMode": { - "modified": "2019-03-23T22:46:21.766Z", + "Web/API/WindowOrWorkerGlobalScope/setTimeout": { + "modified": "2020-10-15T21:19:52.746Z", "contributors": [ - "fanxiaojie" + "SnowGojira", + "iyow", + "johnao", + "chrisdavidmills", + "csga31971", + "baijingfeng", + "Reci-z", + "horrylala", + "Adashuai5", + "LilyWakana", + "Mars687", + "pinpinye", + "Lby876176278", + "Chancefeng", + "fscholz", + "xiazhe", + "Frorice", + "yhtml5", + "righttoe", + "Toxni", + "piemonSong", + "xgqfrms-GitHub", + "heke2929", + "SnowOnion", + "Chimen", + "hbkdsm", + "paddingme", + "teoli", + "khalid32", + "Meteormatt", + "ziyunfei" ] }, - "Web/SVG/Attribute/enable-background": { - "modified": "2020-10-15T22:34:25.447Z", + "Web/API/Window/blur": { + "modified": "2019-03-23T22:13:16.814Z", "contributors": [ - "SphinxKnight", - "SoMuchTo" + "Toxni" ] }, - "Web/SVG/Attribute/end": { - "modified": "2019-03-23T22:46:42.288Z", + "Web/API/WindowOrWorkerGlobalScope/atob": { + "modified": "2020-10-15T21:07:00.713Z", "contributors": [ - "fanxiaojie" + "RainSlide", + "zhangchen", + "nkliyc", + "dingyanhe", + "xgqfrms-GitHub", + "ziyunfei", + "happyWang", + "teoli", + "khalid32" ] }, - "Web/SVG/Attribute/fill": { - "modified": "2019-03-23T22:46:42.182Z", + "Glossary/Base64": { + "modified": "2020-09-03T07:22:36.242Z", "contributors": [ - "fanxiaojie" + "WangXBruc", + "waitingsong", + "RainSlide", + "luojia", + "fghpdf", + "ahcheqiu" ] }, - "Web/SVG/Attribute/fill-opacity": { - "modified": "2019-03-23T22:46:42.402Z", + "Web/API/WindowOrWorkerGlobalScope/btoa": { + "modified": "2020-10-15T21:06:58.236Z", "contributors": [ - "fanxiaojie" + "RainSlide", + "zhangchen", + "RoXoM", + "Carrotzpc", + "dingyanhe", + "xgqfrms-GitHub", + "ziyunfei", + "teoli", + "khalid32", + "cuixiping" ] }, - "Web/SVG/Attribute/fill-rule": { - "modified": "2020-10-15T21:39:20.776Z", + "Web/API/WindowOrWorkerGlobalScope/clearTimeout": { + "modified": "2020-06-09T04:49:33.480Z", "contributors": [ - "skywalker_z", - "kapokkopak", - "Ambar", - "ZhengYinBo", - "fanxiaojie" + "Humilitas", + "zhangchen", + "luojia", + "paddingme" ] }, - "Web/SVG/Attribute/filter": { - "modified": "2019-03-23T22:46:38.982Z", + "Web/API/Index": { + "modified": "2020-09-07T03:42:22.980Z", "contributors": [ - "fanxiaojie" + "SphinxKnight", + "hl7514576" ] }, - "Web/SVG/Attribute/filterUnits": { - "modified": "2019-03-23T22:14:03.688Z", + "Web/API/Payment_Request_API/Concepts": { + "modified": "2019-07-19T05:54:54.946Z", "contributors": [ - "liyongleihf2006" + "CapriceLi" ] }, - "Web/SVG/Attribute/font-family": { - "modified": "2019-03-23T23:04:59.299Z", + "Web/API/Payment_Request_API": { + "modified": "2020-10-15T22:21:11.974Z", "contributors": [ - "charlie" + "CapriceLi" ] }, - "Web/SVG/Attribute/fr": { - "modified": "2019-03-18T21:22:49.932Z", + "Web/API/SpeechRecognition": { + "modified": "2020-10-15T22:15:39.263Z", "contributors": [ - "realstephenzhao" + "burt1025lzz" ] }, - "Web/SVG/Attribute/fx": { - "modified": "2019-03-18T21:28:55.964Z", + "Web/API/SpeechRecognition/result_event": { + "modified": "2020-10-15T22:28:01.971Z", "contributors": [ - "realstephenzhao", - "longfeihouhouhou" + "coock1996" ] }, - "Web/SVG/Attribute/fy": { - "modified": "2019-03-18T21:22:47.918Z", + "Web/CSS/:blank": { + "modified": "2020-10-15T22:21:57.411Z", "contributors": [ - "realstephenzhao" + "RainSlide", + "karma2014" ] }, - "Web/SVG/Attribute/height": { - "modified": "2019-03-23T22:46:48.815Z", + "Web/CSS/Containing_block": { + "modified": "2020-10-09T00:31:23.855Z", "contributors": [ - "Ende93", - "fanxiaojie" + "Chellyyy", + "Young-Spark", + "laizenan", + "alattalatta", + "thxiami", + "studyMakesMeHappy", + "peppermintCode", + "tolerious", + "hehex9", + "littlelake", + "ucev" ] }, - "Web/SVG/Attribute/id": { - "modified": "2020-10-15T22:25:42.877Z", + "Learn/CSS/Howto/CSS_FAQ": { + "modified": "2020-07-16T22:25:46.153Z", "contributors": [ - "cuixiping" + "Robinx", + "Jack-Q", + "ChenDong", + "DavidGuan", + "zd9027", + "xuxun", + "teoli", + "ziyunfei", + "xcffl" ] }, - "Web/SVG/Attribute/image-rendering": { - "modified": "2019-03-23T23:10:41.035Z", + "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": { + "modified": "2019-03-23T22:42:48.406Z", "contributors": [ - "ReyCG_sub" + "FrontENG", + "beyoursun", + "regiondavid" ] }, - "Web/SVG/Attribute/in": { - "modified": "2019-03-23T22:13:50.542Z", + "Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": { + "modified": "2019-03-18T21:38:07.175Z", "contributors": [ - "liyongleihf2006" + "Aaron_Zhung" ] }, - "Web/SVG/Attribute/kernelMatrix": { - "modified": "2019-03-23T22:14:02.784Z", + "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": { + "modified": "2019-03-18T20:43:42.671Z", "contributors": [ - "liyongleihf2006" + "BychekRU", + "TiaossuP", + "charlie" ] }, - "Web/SVG/Attribute/keyTimes": { - "modified": "2019-03-18T21:30:15.598Z", + "Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox": { + "modified": "2020-02-11T09:41:01.217Z", "contributors": [ - "ZhenhuaChen" + "knightyun", + "fanjianfeng1010", + "EndlessSong", + "minvedacat", + "Ran_Lyu", + "xieminjie" ] }, - "Web/SVG/Attribute/letter-spacing": { - "modified": "2020-10-15T22:23:39.628Z", + "conflicting/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox": { + "modified": "2019-03-23T22:33:55.727Z", "contributors": [ - "vvv-7911" + "chrisdavidmills", + "SmilyLiang", + "SolitudeRA", + "zhicongyang", + "xgqfrms", + "jiahui" ] }, - "Web/SVG/Attribute/marker-end": { - "modified": "2020-10-15T22:18:07.958Z", + "Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox": { + "modified": "2020-06-21T23:26:55.230Z", "contributors": [ - "ciki6" + "cell", + "mileyho", + "xzhyj93", + "SkyeYoung", + "devindwan", + "xieminjie" ] }, - "Web/SVG/Attribute/marker-start": { - "modified": "2020-10-15T22:35:06.368Z", + "Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods": { + "modified": "2020-07-03T00:45:14.544Z", "contributors": [ - "ciki6" + "jin_wang", + "Wulakaka" ] }, - "Web/SVG/Attribute/mask": { - "modified": "2019-03-23T22:46:32.037Z", + "Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow": { + "modified": "2019-08-26T05:12:18.778Z", "contributors": [ - "wbamberg", - "ziyunfei", - "fanxiaojie" + "xuduotom", + "wython", + "kernellmd", + "feaswcy" ] }, - "Web/SVG/Attribute/max": { - "modified": "2020-10-15T22:26:09.162Z", + "Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes": { + "modified": "2019-03-18T21:44:18.420Z", "contributors": [ - "bompoo" + "comehope" ] }, - "Web/SVG/Attribute/media": { - "modified": "2020-10-15T22:28:22.473Z", + "Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout": { + "modified": "2019-09-04T22:46:41.081Z", "contributors": [ - "Firefox_mozilla" + "zhangchen", + "Juvon", + "SphinxKnight" ] }, - "Web/SVG/Attribute/opacity": { - "modified": "2019-03-23T22:46:17.591Z", + "Web/CSS/CSS_Logical_Properties/Basic_concepts": { + "modified": "2019-03-28T00:11:41.934Z", "contributors": [ - "fanxiaojie" + "Aamperor" ] }, - "Web/SVG/Attribute/order": { - "modified": "2019-03-23T22:14:09.913Z", + "Web/CSS/CSS_Logical_Properties/Floating_and_positioning": { + "modified": "2020-12-09T23:54:16.957Z", "contributors": [ - "liyongleihf2006" + "bernie-ning" ] }, - "Web/SVG/Attribute/origin": { - "modified": "2020-09-21T09:25:39.365Z", + "Web/XPath/Comparison_with_CSS_selectors": { + "modified": "2019-03-18T21:23:06.866Z", "contributors": [ - "SphinxKnight", - "a420980938" + "zhanghengxin" ] }, - "Web/SVG/Attribute/overflow": { - "modified": "2020-10-15T22:09:03.459Z", + "Web/CSS/CSS_Fragmentation": { + "modified": "2019-12-03T13:06:14.108Z", "contributors": [ - "SphinxKnight", - "888aaa" + "pans9" ] }, - "Web/SVG/Attribute/path": { - "modified": "2019-01-17T01:11:59.482Z", + "Web/CSS/CSSOM_View/Coordinate_systems": { + "modified": "2019-03-18T21:28:19.895Z", "contributors": [ - "dfEric" + "1Cr18Ni9" ] }, - "Web/SVG/Attribute/pathLength": { - "modified": "2019-03-18T21:24:01.815Z", + "Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property": { + "modified": "2019-03-23T23:32:59.999Z", "contributors": [ - "EXSVAMP" + "xgqfrms-GitHub", + "teoli", + "ziyunfei" ] }, - "Web/SVG/Attribute/patternUnits": { - "modified": "2019-03-18T21:15:24.501Z", + "Web/CSS/Layout_cookbook/Card": { + "modified": "2020-10-15T22:28:29.154Z", "contributors": [ - "Chesn" + "fanyuedong" ] }, - "Web/SVG/Attribute/pointer-events": { - "modified": "2020-10-15T22:18:55.261Z", + "Web/CSS/Layout_cookbook/Media_objects": { + "modified": "2020-10-15T22:18:51.901Z", "contributors": [ - "WebsonLeo" + "wre232114" ] }, - "Web/SVG/Attribute/points": { - "modified": "2019-03-23T22:46:24.044Z", + "Web/CSS/overflow-wrap": { + "modified": "2020-10-15T21:32:14.809Z", "contributors": [ - "fanxiaojie" + "litmonw", + "dlnb526", + "WangWenZhang", + "pengwenbin7", + "xgqfrms", + "SAWSAWSAW", + "fscholz", + "Sebastianz", + "paddingme" ] }, - "Web/SVG/Attribute/preserveAlpha": { - "modified": "2019-03-18T21:30:40.693Z", + "Web/CSS/offset": { + "modified": "2020-10-15T22:07:46.289Z", "contributors": [ - "hy512" + "congyuandong", + "yichengxian" ] }, - "Web/SVG/Attribute/preserveAspectRatio": { - "modified": "2019-03-23T22:02:41.003Z", + "Web/CSS/Media_Queries": { + "modified": "2020-10-15T21:56:18.732Z", "contributors": [ - "codepandy", - "ciki6", - "yuyx91", - "webtuotuo2017" + "RainSlide", + "zjffun", + "Charley-Hsu" ] }, - "Web/SVG/Attribute/primitiveUnits": { - "modified": "2019-03-23T22:14:03.826Z", + "Web/CSS/text-decoration-thickness": { + "modified": "2020-10-15T22:25:42.153Z", "contributors": [ - "liyongleihf2006" + "tanapok", + "Zshining" ] }, - "Web/SVG/Attribute/r": { - "modified": "2019-03-18T21:22:40.271Z", + "Web/CSS/grid-template-rows": { + "modified": "2020-10-15T21:53:37.639Z", "contributors": [ - "realstephenzhao" + "narol", + "RainSlide", + "tsukimiya", + "Xiao4", + "1986slayer" ] }, - "Web/SVG/Attribute/radius": { - "modified": "2019-03-23T22:46:18.311Z", + "Web/API/Window/afterprint_event": { + "modified": "2020-10-15T21:52:37.979Z", "contributors": [ - "fanxiaojie" + "weibangtuo", + "fscholz", + "xgqfrms-GitHub" ] }, - "Web/SVG/Attribute/repeatCount": { - "modified": "2019-03-23T22:18:01.687Z", + "Web/API/Element/afterscriptexecute_event": { + "modified": "2020-10-15T21:52:39.291Z", "contributors": [ - "876843240", - "huainanhai" + "RainSlide", + "fscholz", + "xgqfrms-GitHub" ] }, - "Web/SVG/Attribute/result": { - "modified": "2019-01-16T21:31:09.328Z", + "Web/API/HTMLElement/animationend_event": { + "modified": "2019-03-23T22:08:23.322Z", "contributors": [ - "fanxiaojie" + "PaperFlu" ] }, - "Web/SVG/Attribute/rx": { - "modified": "2019-03-18T21:00:24.171Z", + "Web/API/HTMLElement/animationstart_event": { + "modified": "2019-03-23T23:17:59.744Z", "contributors": [ - "RainSlide", - "BowenSun" + "PaperFlu", + "fscholz", + "ziyunfei", + "shevche24" ] }, - "Web/SVG/Attribute/scale": { - "modified": "2019-03-23T22:46:29.331Z", + "Web/API/Window/beforeprint_event": { + "modified": "2020-10-15T21:52:38.969Z", "contributors": [ - "fanxiaojie" + "weibangtuo", + "fscholz", + "xgqfrms-GitHub" ] }, - "Web/SVG/Attribute/seed": { - "modified": "2019-03-23T22:46:25.651Z", + "Web/API/Element/beforescriptexecute_event": { + "modified": "2020-10-15T21:29:36.732Z", "contributors": [ - "fanxiaojie" + "RainSlide", + "fscholz", + "ziyunfei", + "LinusYu" ] }, - "Web/SVG/Attribute/shape-rendering": { - "modified": "2019-03-23T22:41:44.530Z", + "Web/API/Window/beforeunload_event": { + "modified": "2020-10-15T21:34:03.122Z", "contributors": [ - "maicss" + "pe4ch", + "Carllllo", + "MikeLeon23", + "Junezm", + "xgqfrms", + "wbamberg", + "HereChen", + "luhaimin", + "sqchenxiyuan", + "tcatche", + "maxsky", + "Tienyz", + "monjer" ] }, - "Web/SVG/Attribute/stdDeviation": { - "modified": "2019-03-18T21:23:00.621Z", + "Web/API/Element/blur_event": { + "modified": "2019-03-23T22:23:55.603Z", "contributors": [ - "realstephenzhao" + "hhxxhg", + "hyh19962008", + "fscholz", + "m2mbob" ] }, - "Web/SVG/Attribute/string": { - "modified": "2020-10-15T22:28:09.817Z", + "Web/API/HTMLElement/change_event": { + "modified": "2020-10-15T21:32:01.453Z", "contributors": [ - "Tjhxzd" + "ljdmailbox", + "Clarkkkk", + "LIXiangChen", + "fscholz", + "yangxiaoqiao", + "xgqfrms-GitHub", + "azhi09", + "ziyunfei", + "charlie" ] }, - "Web/SVG/Attribute/stroke": { - "modified": "2019-03-23T22:47:39.759Z", + "Web/API/Element/compositionend_event": { + "modified": "2019-04-30T13:56:51.967Z", "contributors": [ - "fanxiaojie", - "slientomorrr" + "wbamberg", + "TreeVie", + "leehomeok" ] }, - "Web/SVG/Attribute/stroke-dasharray": { - "modified": "2019-08-08T05:38:03.197Z", + "Web/API/Element/compositionstart_event": { + "modified": "2020-10-15T21:43:38.190Z", "contributors": [ - "fanxiaojie" + "Carllllo", + "wbamberg", + "superfighter", + "StaicCai", + "laobubu" ] }, - "Web/SVG/Attribute/stroke-dashoffset": { - "modified": "2019-10-10T16:56:45.450Z", + "Web/API/Element/compositionupdate_event": { + "modified": "2019-04-30T14:03:15.654Z", "contributors": [ - "ZhengYinBo", - "yanagao" + "wbamberg", + "fscholz", + "laobubu" ] }, - "Web/SVG/Attribute/stroke-linecap": { - "modified": "2019-03-23T22:21:59.850Z", + "Web/API/Element/copy_event": { + "modified": "2019-04-30T13:59:22.378Z", "contributors": [ - "ZhengYinBo" + "wbamberg", + "zhangchen", + "fscholz", + "inottn", + "maicss" ] }, - "Web/SVG/Attribute/stroke-linejoin": { - "modified": "2020-10-15T21:52:22.702Z", + "Web/API/Element/cut_event": { + "modified": "2019-04-30T14:14:11.414Z", "contributors": [ - "cuixiping", - "IridescentMia" + "wbamberg", + "chenyanfei-m" ] }, - "Web/SVG/Attribute/stroke-miterlimit": { - "modified": "2019-03-23T22:46:40.182Z", + "Web/API/Window/DOMContentLoaded_event": { + "modified": "2020-10-15T21:21:31.073Z", "contributors": [ - "fanxiaojie" + "windybniw", + "shaw1121", + "knightyun", + "1v9", + "wbamberg", + "hhxxhg", + "274659281", + "fscholz", + "Niefee", + "xgqfrms-GitHub", + "BoatGina", + "broven", + "bambooom", + "ZivHe", + "ziyunfei", + "less", + "monjer", + "jtyjty99999" ] }, - "Web/SVG/Attribute/stroke-opacity": { - "modified": "2019-03-23T22:46:37.761Z", + "Web/API/Element/error_event": { + "modified": "2020-10-15T21:34:06.283Z", "contributors": [ - "fanxiaojie" + "pe4ch", + "liuruiqi1993", + "fscholz", + "Daqin", + "monjer" ] }, - "Web/SVG/Attribute/stroke-width": { - "modified": "2019-03-23T22:46:41.922Z", + "Web/API/Element/focus_event": { + "modified": "2019-03-31T11:52:42.546Z", "contributors": [ - "fanxiaojie" + "fscholz", + "VictorDu" ] }, - "Web/SVG/Attribute/style": { - "modified": "2019-10-09T03:46:30.272Z", + "Web/API/Element/focusout_event": { + "modified": "2019-03-23T22:15:46.626Z", "contributors": [ - "xianshenglu", - "xgqfrms-GitHub", - "monjer" + "fscholz", + "liuhe" ] }, - "Web/SVG/Attribute/target": { - "modified": "2020-10-15T22:27:15.767Z", + "Web/API/RTCPeerConnection/icecandidate_event": { + "modified": "2020-02-07T11:21:30.934Z", "contributors": [ - "fzhyzamt", - "boli14" + "zotille", + "wbamberg", + "BillgoXu" ] }, - "Web/SVG/Attribute/text-decoration": { - "modified": "2020-09-26T20:27:21.690Z", + "Web/API/HTMLElement/input_event": { + "modified": "2020-10-15T21:30:28.054Z", "contributors": [ - "xuhaooo", - "qingpingy" + "Carllllo", + "Freezer", + "chess99", + "shijistar", + "fscholz", + "xgqfrms-GitHub", + "laobubu", + "ziyunfei", + "lyklykkkkkkk" ] }, - "Web/SVG/Attribute/transform": { - "modified": "2019-10-17T10:24:00.177Z", + "Web/API/Window/load_event": { + "modified": "2020-10-15T21:36:32.271Z", "contributors": [ - "qq240814476" + "pe4ch", + "Mookiepiece", + "fscholz", + "xgqfrms-GitHub", + "kun.yan" ] }, - "Web/SVG/Attribute/type": { - "modified": "2019-09-27T11:12:53.094Z", + "Web/API/XMLHttpRequest/loadend_event": { + "modified": "2019-03-23T22:16:58.948Z", "contributors": [ - "Huang2019023239" + "fscholz", + "wudexiang", + "xgqfrms-GitHub" ] }, - "Web/SVG/Attribute/units-per-em": { - "modified": "2020-10-15T22:25:05.021Z", + "Web/API/XMLHttpRequest/loadstart_event": { + "modified": "2019-03-23T22:29:32.098Z", "contributors": [ - "pandahara" + "fscholz", + "faremax", + "Lxxyx" ] }, - "Web/SVG/Attribute/values": { - "modified": "2020-08-19T04:16:48.441Z", + "Web/API/BroadcastChannel/message_event": { + "modified": "2020-10-15T21:57:50.780Z", "contributors": [ - "keyline-1" + "Spikef", + "wbamberg", + "Lim", + "CrystalY", + "Yongest", + "hellowrenfei" ] }, - "Web/SVG/Attribute/vector-effect": { - "modified": "2020-10-15T22:25:39.831Z", + "Web/API/Element/mousewheel_event": { + "modified": "2019-03-18T21:09:07.563Z", "contributors": [ - "cuixiping" + "fscholz", + "soYawn" ] }, - "Web/SVG/Attribute/version": { - "modified": "2019-08-03T10:57:47.255Z", + "Web/API/Window/pageshow_event": { + "modified": "2020-05-15T03:40:03.122Z", "contributors": [ - "monkeycf", - "LiKunWillShine" + "BluesVN", + "lalaemls", + "WangShaoyu1", + "fscholz", + "shm" ] }, - "Web/SVG/Attribute/viewBox": { - "modified": "2019-08-01T23:50:11.252Z", + "Web/API/Element/paste_event": { + "modified": "2020-10-15T21:52:19.374Z", "contributors": [ - "lovefengruoqing", - "act262" + "qiudongwei", + "wbamberg", + "maicss" ] }, - "Web/SVG/Attribute/visibility": { - "modified": "2019-03-23T22:46:34.860Z", + "Web/API/Document/readystatechange_event": { + "modified": "2020-10-15T21:56:00.168Z", "contributors": [ - "fanxiaojie" + "Carllllo", + "RainSlide", + "zhangchen", + "fscholz", + "abc45628" ] }, - "Web/SVG/Attribute/width": { - "modified": "2019-03-23T22:46:51.950Z", + "Web/API/HTMLElement/transitionend_event": { + "modified": "2019-11-15T05:44:51.899Z", "contributors": [ - "Ende93", - "fanxiaojie" + "joshchiucn", + "fscholz", + "zhuangyin", + "SeriousL", + "dlengks", + "ziyunfei", + "jtyjty99999" ] }, - "Web/SVG/Attribute/x": { - "modified": "2019-03-23T22:46:48.086Z", + "Web/API/Window/unhandledrejection_event": { + "modified": "2020-10-15T22:03:35.162Z", "contributors": [ - "fanxiaojie" + "xuquentinyang", + "liangbus", + "RainSlide", + "wbamberg", + "Lie8466", + "zhaoqize" ] }, - "Web/SVG/Attribute/y": { - "modified": "2019-03-23T22:46:47.078Z", + "Web/API/Window/unload_event": { + "modified": "2020-10-15T21:21:37.553Z", "contributors": [ - "jiereal", - "fanxiaojie" + "pe4ch", + "acelibin", + "fscholz", + "xgqfrms-GitHub", + "ziyunfei", + "jtyjty99999" ] }, - "Web/SVG/Attribute/文本锚点": { - "modified": "2019-03-23T22:22:02.773Z", + "Web/API/XMLHttpRequest/progress_event": { + "modified": "2020-10-15T21:49:44.294Z", "contributors": [ - "AozakiOrenji", - "yashuer" + "Ende93", + "957398123", + "fscholz", + "roberthow", + "fengfu" ] }, - "Web/SVG/Attribute/样式": { - "modified": "2020-10-15T22:10:48.584Z", + "Web/API/Web_Workers_API/Structured_clone_algorithm": { + "modified": "2019-03-23T22:19:28.512Z", "contributors": [ - "liu3329" + "zhangchen", + "xgqfrms-GitHub", + "kameii", + "liuqipeng417", + "FredWe" ] }, - "Web/SVG/Content_type": { - "modified": "2019-03-23T22:46:41.769Z", + "Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation": { + "modified": "2019-03-23T23:22:24.362Z", "contributors": [ - "fanxiaojie" + "freshSep", + "Wenbin" ] }, - "Web/SVG/Element": { - "modified": "2020-03-13T06:26:33.332Z", + "Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters": { + "modified": "2019-03-23T23:28:24.261Z", "contributors": [ - "Dorence", - "RainSlide", - "fanxiaojie", - "lunix01", - "cungen", - "teoli", - "ethertank" + "Ende93", + "Jiang-Xuan", + "Jiasm", + "Nightingale" ] }, - "Web/SVG/Element/a": { - "modified": "2019-06-15T03:14:27.907Z", + "Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS": { + "modified": "2019-03-23T23:22:22.347Z", "contributors": [ - "lnh", - "sqchenxiyuan", - "Sebastianz", - "fanxiaojie", - "teoli", - "techird" + "RainSlide", + "ReyCG_sub", + "bingguo", + "Wenbin" ] }, - "Web/SVG/Element/altGlyph": { - "modified": "2019-06-15T03:14:19.322Z", + "orphaned/Web/Guide/CSS/CSS基础": { + "modified": "2019-03-18T20:41:49.035Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "fscholz", + "Go7hic", + "Mrzzchao" ] }, - "Web/SVG/Element/altGlyphDef": { - "modified": "2019-03-23T22:46:38.701Z", + "Learn/CSS/Howto/Generated_content": { + "modified": "2020-07-16T22:25:48.610Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "Kilimanjaro", + "Robinx", + "Harvesty", + "ziyunfei", + "teoli", + "Chajn", + "aztack" ] }, - "Web/SVG/Element/altGlyphItem": { - "modified": "2019-03-23T22:46:33.665Z", + "Web/Progressive_web_apps/Responsive/Media_types": { + "modified": "2019-03-23T23:12:04.497Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "Robinx", + "Harvesty", + "jasonzhyan", + "ziyunfei", + "yeol", + "teoli", + "Chajn" ] }, - "Web/SVG/Element/animate": { - "modified": "2020-05-04T23:05:51.292Z", + "Web/SVG/Tutorial/SVG_and_CSS": { + "modified": "2019-03-23T23:20:53.389Z", "contributors": [ - "knightyun", - "oujielong", - "Ende93", - "luojia", - "Sebastianz", - "fanxiaojie", - "329530588", - "lunix01" + "ziyunfei", + "teoli", + "aztack" ] }, - "Web/SVG/Element/animateColor": { - "modified": "2019-03-23T22:46:35.027Z", + "Web/CSS/Media_Queries/Using_media_queries": { + "modified": "2020-05-17T23:15:16.911Z", "contributors": [ + "wallena3", + "Swordword", + "RainSlide", + "wuguichiroumeiyou", + "LemonTency", + "AielloChan", + "lllvantis", + "chaiyu2002", + "ziyunfei", "xgqfrms-GitHub", + "Junetea", + "jggnice", + "fidejade", + "liyongleihf2006", + "AozakiOrenji", + "lokyoung", "Sebastianz", - "fanxiaojie" + "mrstork", + "malayaleecoder", + "pantao", + "Ende93", + "Wenbin", + "anjianshi", + "ZhaoMing", + "Nightingale" ] }, - "Web/SVG/Element/animateMotion": { - "modified": "2020-10-15T21:39:29.124Z", + "Web/CSS/Media_Queries/Testing_media_queries": { + "modified": "2020-10-15T21:25:42.378Z", "contributors": [ - "knightyun", - "wbamberg", - "Sebastianz", - "fanxiaojie" + "RainSlide", + "Chajn", + "reygreen1", + "Wenbin" ] }, - "Web/SVG/Element/animateTransform": { - "modified": "2019-03-23T22:46:37.058Z", + "Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index": { + "modified": "2019-03-23T23:21:48.784Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "ziyunfei", + "teoli", + "ArthasTree" ] }, - "Web/SVG/Element/circle": { - "modified": "2019-03-23T21:45:42.756Z", + "Web/CSS/CSS_Positioning/Understanding_z_index": { + "modified": "2019-03-23T23:33:08.995Z", "contributors": [ - "wbamberg", - "xgqfrms-GitHub", - "Sebastianz", - "loofahsf", - "fanxiaojie", + "zhangchen", + "ZQH", + "Go7hic", "ziyunfei", - "cungen" + "teoli", + "ArthasTree" ] }, - "Web/SVG/Element/clipPath": { - "modified": "2020-10-15T21:32:57.569Z", + "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float": { + "modified": "2019-03-23T23:29:39.696Z", "contributors": [ - "jhchen6", - "RainSlide", - "Sebastianz", - "fanxiaojie", - "huyue" + "lixuguang", + "Marcia_gm", + "ziyunfei", + "teoli", + "sunnylost" ] }, - "Web/SVG/Element/color-profile": { - "modified": "2019-03-23T22:46:33.322Z", + "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1": { + "modified": "2020-04-09T03:35:06.982Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "liuyibo", + "VickyJin" ] }, - "Web/SVG/Element/cursor": { - "modified": "2020-10-15T21:39:22.908Z", + "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2": { + "modified": "2019-03-23T22:25:59.868Z", "contributors": [ - "knightyun", - "Sebastianz", - "fanxiaojie" + "Skyrelu" ] }, - "Web/SVG/Element/defs": { - "modified": "2019-03-23T23:05:33.636Z", + "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3": { + "modified": "2020-01-19T10:58:58.576Z", "contributors": [ - "Sebastianz", - "fanxiaojie", - "charlie", - "baiya" + "zenHeart", + "Skyrelu" ] }, - "Web/SVG/Element/desc": { - "modified": "2019-03-23T22:46:43.461Z", + "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index": { + "modified": "2019-08-23T06:42:17.114Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "allan_simon", + "ziyunfei", + "teoli", + "sunnylost", + "endlesswind" ] }, - "Web/SVG/Element/ellipse": { - "modified": "2019-03-23T22:54:08.203Z", + "Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context": { + "modified": "2020-01-02T04:20:32.161Z", "contributors": [ - "wbamberg", - "Sebastianz", - "fanxiaojie", - "FredWe" + "Sl0v3C", + "realstephenzhao", + "hayahayao", + "SakuraSnow", + "zjffun", + "gzponline", + "kevinfszu", + "Ende93", + "huangcheng", + "yisibl", + "ziyunfei", + "Dolphin_Wood", + "davin107", + "fake", + "teoli", + "ethertank", + "tzyeah" ] }, - "Web/SVG/Element/feBlend": { - "modified": "2019-03-23T22:46:45.814Z", + "Web/CSS/CSS_Images/Using_CSS_gradients": { + "modified": "2020-08-08T22:22:01.317Z", "contributors": [ - "liyongleihf2006", + "funicular", + "pe4ch", + "sanxun515", + "Aamperor", + "zhangnan666", + "zjffun", + "weedwong", + "Gaven-Xu", + "yatace", "Sebastianz", - "fanxiaojie" + "hkfn123", + "lttxzmj", + "RogerShen", + "anjianshi" ] }, - "Web/SVG/Element/feColorMatrix": { - "modified": "2019-03-23T23:25:05.534Z", + "Web/CSS/CSS_Columns/Using_multi-column_layouts": { + "modified": "2019-03-23T23:28:24.667Z", "contributors": [ - "Sebastianz", - "fanxiaojie", - "teoli", - "daniel.tian" + "Bayes", + "xgqfrms-GitHub", + "fscholz", + "Nightingale" ] }, - "Web/SVG/Element/feComponentTransfer": { - "modified": "2019-03-23T22:46:30.620Z", + "Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors": { + "modified": "2019-03-23T22:52:16.056Z", "contributors": [ - "liyongleihf2006", - "Sebastianz", - "fanxiaojie" + "Ende93", + "huangcheng", + "FredWe" ] }, - "Web/SVG/Element/feComposite": { - "modified": "2019-03-23T22:46:29.887Z", + "Web/CSS/Visual_formatting_model": { + "modified": "2019-03-18T21:10:31.376Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "guangzai", + "ssttii", + "qw8880000", + "Terry.Qiao", + "ziyunfei", + "zhanglun", + "teoli", + "sunnylost", + "yan" ] }, - "Web/SVG/Element/feConvolveMatrix": { - "modified": "2019-08-01T01:30:07.081Z", + "Web/Guide/HTML/Editable_content": { + "modified": "2020-09-22T00:31:12.632Z", "contributors": [ - "liyongleihf2006", - "Sebastianz", - "fanxiaojie" + "imarco", + "YogurtQ", + "xianghui-ma", + "Hew007", + "zhuangyin", + "jamesxu", + "ziyunfei", + "teoli", + "sunnylost", + "ethertank" ] }, - "Web/SVG/Element/feDiffuseLighting": { - "modified": "2019-03-23T22:46:38.862Z", + "Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla": { + "modified": "2019-11-25T00:57:33.951Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "gao5252", + "SphinxKnight", + "chrisdavidmills", + "sijinglei", + "doodlewind", + "zezhou", + "Cbgrape", + "Teago" ] }, - "Web/SVG/Element/feDisplacementMap": { - "modified": "2019-03-23T22:46:34.138Z", + "orphaned/Learn/HTML/Forms/HTML5_updates": { + "modified": "2019-03-23T23:33:41.492Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "huozicheng", + "xgqfrms-GitHub", + "ziyunfei", + "teoli", + "sunnylost", + "jtyjty99999" ] }, - "Web/SVG/Element/feDistantLight": { - "modified": "2019-03-23T22:46:37.517Z", + "orphaned/Web/Guide/HTML/HTML": { + "modified": "2019-06-25T10:18:27.080Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "xiajun1996", + "ziyunfei", + "zzangxu" ] }, - "Web/SVG/Element/feFlood": { - "modified": "2019-03-23T22:46:31.627Z", + "Web/Guide/HTML/Using_HTML_sections_and_outlines": { + "modified": "2019-03-21T10:38:08.111Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "RainSlide", + "jimmy-sum", + "VdoG", + "StarXY", + "kevinfszu", + "mengzyou", + "xuexiaocai" ] }, - "Web/SVG/Element/feFuncA": { - "modified": "2020-10-15T21:39:23.537Z", + "Learn/HTML/Howto/Author_fast-loading_HTML_pages": { + "modified": "2020-07-16T22:22:33.856Z", "contributors": [ - "RainSlide", - "Sebastianz", - "fanxiaojie" + "Dorence", + "Banhave", + "boltyu", + "TheaAo", + "wth", + "Samoay", + "ziyunfei", + "Y001", + "Mgjbot", + "Carrie zhxj" ] }, - "Web/SVG/Element/feFuncB": { - "modified": "2019-03-23T22:46:38.185Z", + "Learn/HTML/Howto/Use_data_attributes": { + "modified": "2020-07-16T22:22:37.588Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "zhangchen", + "hhxxhg", + "lavenderming", + "xgqfrms-GitHub", + "hellotaotao", + "Go7hic", + "marshalYuan", + "monjer", + "Deryckxie" ] }, - "Web/SVG/Element/feFuncG": { - "modified": "2019-03-23T22:46:32.939Z", + "Web/HTML/Attributes/autocomplete": { + "modified": "2020-10-15T22:25:13.539Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "pans9" ] }, - "Web/SVG/Element/feFuncR": { - "modified": "2019-03-23T22:46:31.912Z", + "Web/HTML/Attributes/crossorigin": { + "modified": "2019-11-26T01:56:32.661Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "wangjian", + "Melo.HG", + "xgqfrms-GitHub", + "mygaochunming", + "xgqfrms", + "kmc947373" ] }, - "Web/SVG/Element/feGaussianBlur": { - "modified": "2019-03-23T22:46:35.725Z", + "Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video": { + "modified": "2019-12-03T21:07:25.830Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "guow10", + "xcffl" ] }, - "Web/SVG/Element/feImage": { - "modified": "2019-03-23T22:46:35.585Z", + "orphaned/Web/HTML/Element/command": { + "modified": "2019-03-18T20:43:33.481Z", "contributors": [ - "AaronYehf", - "Sebastianz", - "fanxiaojie" + "wbamberg", + "practicemp", + "ziyunfei" ] }, - "Web/SVG/Element/feMerge": { - "modified": "2019-03-23T22:46:36.019Z", + "orphaned/Web/HTML/Element/element": { + "modified": "2019-03-23T22:13:42.917Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "angelllls" ] }, - "Web/SVG/Element/feMergeNode": { - "modified": "2019-03-23T22:46:29.748Z", + "Web/HTML/Element/input/month": { + "modified": "2020-10-15T21:57:03.537Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "RainSlide", + "AliasZet" ] }, - "Web/SVG/Element/feMorphology": { - "modified": "2019-03-23T22:51:21.184Z", + "Web/HTML/Element/input/range": { + "modified": "2020-10-15T22:25:22.859Z", "contributors": [ - "Sebastianz", - "fanxiaojie", - "foolof41" + "q.z", + "hzy", + "pans9" ] }, - "Web/SVG/Element/feOffset": { - "modified": "2019-03-23T22:46:37.362Z", + "orphaned/Web/HTML/Global_attributes/dropzone": { + "modified": "2019-03-23T22:10:15.156Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "wizardforcel" ] }, - "Web/SVG/Element/fePointLight": { - "modified": "2019-03-23T22:46:33.171Z", + "Web/HTML/Global_attributes/x-ms-acceleratorkey": { + "modified": "2019-12-03T17:45:24.248Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "pans9" ] }, - "Web/SVG/Element/feSpecularLighting": { - "modified": "2019-03-23T22:46:21.088Z", + "Web/HTML/Global_attributes/x-ms-format-detection": { + "modified": "2019-12-03T17:54:04.795Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "pans9" ] }, - "Web/SVG/Element/feSpotLight": { - "modified": "2019-03-23T22:46:30.010Z", + "Glossary/speculative_parsing": { + "modified": "2019-03-23T22:46:26.910Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "huangcheng", + "ziyunfei", + "mengshukun" ] }, - "Web/SVG/Element/feTile": { - "modified": "2019-03-23T22:46:20.383Z", + "Web/HTTP/CORS": { + "modified": "2020-11-30T22:27:21.749Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "seawaywen", + "fuweichin", + "jsonz1993", + "shens3", + "chanvin", + "SirnoChan", + "skywalker_z", + "Noodles006", + "yantong", + "hansnow", + "leoxiao2012", + "kunyaoxu", + "zjffun", + "show-rosarugosa", + "hnzxmutex", + "miuchan", + "ChenShihao", + "alvan", + "BobGreen", + "jiladahe1997", + "ErCargo", + "s1len0eye", + "zhang-hongwei", + "zthxxx", + "NineRec", + "recursion", + "libmw", + "bestvow", + "JuFoFu", + "xgqfrms-GitHub", + "bigZ-again", + "yuankunzhang", + "FideoJ", + "AlenQi", + "Ende93", + "wanglijie", + "yumingzhe", + "mygaochunming", + "Marcia_gm", + "xgqfrms", + "ybwdaisy", + "fjywan", + "holynewbie", + "gqqnbig", + "EdwardStudy", + "ssjssh", + "Kevin-Xi", + "8427003", + "Meteormatt", + "OOP-Code-Bunny", + "CManLH", + "qiumaoyuan" ] }, - "Web/SVG/Element/feTurbulence": { - "modified": "2019-03-23T22:46:22.298Z", + "Web/HTTP/Caching": { + "modified": "2020-07-01T23:23:40.319Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "qnlz", + "xgqfrms", + "yqz0203", + "oppoffice", + "SAM.L", + "baijingfeng", + "YongzeYao", + "immortal-wm", + "YiBanCangBai", + "2585479524", + "fanjieqi", + "BobGreen", + "athena0304", + "dgeibi", + "cielsk", + "tianyuqingkong", + "xiaohp", + "tiancaiwuyue", + "hiyoushu", + "ch-zgh-1993", + "marsoln", + "wanglijie", + "xx1124961758", + "onedaywen", + "shengoo", + "sunnylost", + "followgiant", + "ziyunfei" ] }, - "Web/SVG/Element/filter": { - "modified": "2020-07-14T05:46:35.376Z", + "Web/HTTP/Content_negotiation/List_of_default_Accept_values": { + "modified": "2019-03-18T21:35:18.474Z", "contributors": [ - "Yang_Gia", - "Sebastianz", - "fanxiaojie" + "heekei" ] }, - "Web/SVG/Element/font": { - "modified": "2019-03-23T22:43:54.105Z", + "Web/HTTP/CORS/Errors/CORSMIssingAllowCredentials": { + "modified": "2020-09-18T12:19:26.611Z", "contributors": [ - "Sebastianz", - "fanxiaojie", - "charlie" + "Cooper-Kou" ] }, - "Web/SVG/Element/font-face": { - "modified": "2019-03-23T23:04:56.439Z", + "Web/HTTP/Basics_of_HTTP/Data_URIs": { + "modified": "2020-10-15T21:06:54.948Z", "contributors": [ - "Sebastianz", - "charlie" + "leegent", + "2585479524", + "BobGreen", + "bramblex", + "tlos142857", + "Ende93", + "xgqfrms-GitHub", + "little-tomorrow", + "ziyunfei" ] }, - "Web/SVG/Element/font-face-format": { - "modified": "2019-03-23T22:46:32.676Z", + "Web/HTTP/Headers/Strict-Transport-Security": { + "modified": "2020-11-19T14:34:26.997Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "chrisdavidmills", + "sunbeams001", + "kidonng", + "Jack.Works", + "zhangzhen", + "ToBo", + "udo-china", + "zhangchen", + "little-tomorrow", + "Eward.song" ] }, - "Web/SVG/Element/font-face-name": { - "modified": "2019-03-23T22:46:33.056Z", + "Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file": { + "modified": "2020-10-30T02:28:12.093Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "StudentMain", + "Nishikinor", + "DuckSoft", + "Futrime", + "hryen", + "RainSlide", + "maber", + "cnryb", + "archerc", + "msy" ] }, - "Web/SVG/Element/font-face-src": { - "modified": "2019-03-18T20:41:42.540Z", + "Web/HTTP/Headers/X-Frame-Options": { + "modified": "2020-10-15T21:31:36.643Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "RainSlide", + "Soyaine", + "Fiag" ] }, - "Web/SVG/Element/font-face-uri": { - "modified": "2019-03-23T22:46:38.431Z", + "Web/HTTP/Feature_Policy": { + "modified": "2020-10-15T22:13:12.541Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "xiaomaokeke", + "chenqingyue", + "RainSlide", + "joechan" ] }, - "Web/SVG/Element/foreignObject": { - "modified": "2020-10-15T21:39:29.342Z", + "Web/HTTP/Feature_Policy/Using_Feature_Policy": { + "modified": "2019-05-06T05:13:36.251Z", "contributors": [ - "hanjc1993", - "cnhekai", - "zhangchen", - "kamilic", - "Sebastianz", - "fanxiaojie" + "roostinghawk" ] }, - "Web/SVG/Element/g": { - "modified": "2019-03-23T22:55:45.907Z", + "orphaned/Web/HTTP/跨域资源共享(CORS)_": { + "modified": "2020-10-15T22:28:24.198Z", "contributors": [ - "Sebastianz", - "fanxiaojie", - "monjer" + "huangjihua" ] }, - "Web/SVG/Element/glyph": { - "modified": "2019-03-23T22:55:52.238Z", + "Web/JavaScript/Guide/Regular_Expressions/Quantifiers": { + "modified": "2020-06-28T13:50:25.946Z", "contributors": [ - "Sebastianz", - "fanxiaojie", - "charlie" + "srq18211" ] }, - "Web/SVG/Element/glyphRef": { - "modified": "2019-03-23T22:46:32.815Z", + "Web/XPath/Introduction_to_using_XPath_in_JavaScript": { + "modified": "2019-03-23T23:53:50.408Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "chrisdavidmills", + "zhanglianxin", + "zengguanming", + "fscholz", + "ziyunfei", + "Cuimingda" ] }, - "Web/SVG/Element/hkern": { - "modified": "2019-03-23T22:46:35.411Z", + "orphaned/Web/JavaScript/javascript(起步)": { + "modified": "2019-03-23T22:54:49.824Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "Rupengkun" ] }, - "Web/SVG/Element/image": { - "modified": "2019-03-23T23:07:18.007Z", + "Web/JavaScript/Reference/Classes/Public_class_fields": { + "modified": "2020-10-15T22:22:33.437Z", "contributors": [ - "tjyas", - "Sebastianz", - "fanxiaojie", - "lrz8745", - "cuixiping" + "Fogwind", + "wxyads" ] }, - "Web/SVG/Element/line": { - "modified": "2019-07-31T04:23:35.374Z", + "Web/JavaScript/Reference/Errors/Cant_assign_to_property": { + "modified": "2020-03-12T19:49:02.016Z", "contributors": [ - "wbamberg", - "Sebastianz", - "fanxiaojie" + "mysteriousfather" ] }, - "Web/SVG/Element/linearGradient": { - "modified": "2019-07-01T05:50:18.527Z", + "orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype": { + "modified": "2020-10-15T21:25:06.780Z", "contributors": [ - "Sebastianz", - "fanxiaojie", + "TonyYu2015", + "fscholz", + "abc45628", + "xgqfrms-GitHub", + "micheal-death", "ziyunfei", - "xile611" + "WangXiZhu", + "zhen", + "pd4d10", + "teoli", + "charlie", + "andy12530", + "sleepholic" ] }, - "Web/SVG/Element/marker": { - "modified": "2019-03-23T23:03:51.340Z", + "orphaned/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype": { + "modified": "2020-10-15T21:51:59.203Z", "contributors": [ - "wbamberg", - "liyongleihf2006", - "Sebastianz", - "fanxiaojie", - "fonglezen" + "daijie", + "fscholz", + "wizardforcel", + "xygcxy" ] }, - "Web/SVG/Element/mask": { - "modified": "2019-03-23T23:03:51.605Z", + "orphaned/Web/JavaScript/Reference/Global_Objects/AsyncIterator": { + "modified": "2020-10-15T22:28:09.380Z", "contributors": [ - "wbamberg", - "Sebastianz", - "fanxiaojie", - "fonglezen" + "lxuewu" ] }, - "Web/SVG/Element/metadata": { - "modified": "2019-03-23T22:46:43.887Z", + "Web/JavaScript/Reference/Global_Objects/Math/acosh": { + "modified": "2020-10-15T21:50:09.940Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "Dorence", + "wizardforcel", + "LiuYuan" ] }, - "Web/SVG/Element/missing-glyph": { - "modified": "2019-03-23T23:04:57.001Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply": { + "modified": "2020-10-15T21:46:28.417Z", "contributors": [ - "Sebastianz", - "fanxiaojie", - "fonglezen", - "charlie" + "ngtmuzi", + "wtZZx" ] }, - "Web/SVG/Element/mpath": { - "modified": "2019-03-23T22:46:38.309Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/construct": { + "modified": "2020-10-15T21:56:26.489Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "dickenslian", + "DuLinRain" ] }, - "Web/SVG/Element/path": { - "modified": "2019-03-23T23:07:18.417Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty": { + "modified": "2019-07-17T00:09:33.026Z", "contributors": [ - "Sebastianz", - "fanxiaojie", - "cuixiping" + "accountwind", + "Illyrix" ] }, - "Web/SVG/Element/pattern": { - "modified": "2019-03-23T23:03:50.981Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/deleteProperty": { + "modified": "2019-03-23T22:18:37.010Z", "contributors": [ - "wbamberg", - "Sebastianz", - "fanxiaojie", - "fonglezen" + "Illyrix" ] }, - "Web/SVG/Element/polygon": { - "modified": "2019-03-23T23:13:30.746Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get": { + "modified": "2019-03-23T22:32:42.643Z", "contributors": [ - "wbamberg", - "Sebastianz", - "fanxiaojie", - "ziyunfei", - "fly-bird" + "Shigma", + "ngtmuzi" ] }, - "Web/SVG/Element/polyline": { - "modified": "2019-03-23T22:57:44.713Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor": { + "modified": "2019-07-28T23:51:58.213Z", "contributors": [ - "wbamberg", - "Sebastianz", - "fanxiaojie", - "e26h" + "darkmirrors", + "EPSON-LEE", + "Hushabyme" ] }, - "Web/SVG/Element/radialGradient": { - "modified": "2020-10-15T21:39:21.881Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getPrototypeOf": { + "modified": "2020-10-15T21:32:20.694Z", "contributors": [ - "realstephenzhao", - "Sebastianz", - "fanxiaojie" + "RainSlide", + "OStoneO", + "SphinxKnight", + "ziyunfei" ] }, - "Web/SVG/Element/rect": { - "modified": "2019-03-23T22:57:44.926Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/has": { + "modified": "2019-08-25T22:51:33.932Z", "contributors": [ - "wbamberg", - "Sebastianz", - "fanxiaojie", - "e26h" + "wonschangge", + "EPSON-LEE", + "Hearmen" ] }, - "Web/SVG/Element/script": { - "modified": "2019-03-23T22:46:33.996Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/isExtensible": { + "modified": "2020-10-15T21:59:04.944Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "wonschangge", + "cxftj" ] }, - "Web/SVG/Element/set": { - "modified": "2019-08-05T06:51:54.590Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys": { + "modified": "2019-08-25T23:12:08.688Z", "contributors": [ - "Sebastianz", - "fanxiaojie", - "baiya" + "wonschangge", + "daiqingyun", + "DuLinRain" ] }, - "Web/SVG/Element/stop": { - "modified": "2019-03-23T22:46:37.919Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/preventExtensions": { + "modified": "2020-10-15T21:59:08.645Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "jinwanmian", + "wonschangge", + "zxh19890103", + "RoXoM", + "varcat" ] }, - "Web/SVG/Element/style": { - "modified": "2019-03-23T22:46:35.874Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set": { + "modified": "2020-10-15T21:46:38.211Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "RainSlide", + "wonschangge", + "wtZZx", + "ngtmuzi" ] }, - "Web/SVG/Element/svg": { - "modified": "2019-03-23T23:03:45.347Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/setPrototypeOf": { + "modified": "2020-10-15T21:59:05.778Z", "contributors": [ - "alphabet007", - "liyongleihf2006", - "Sebastianz", - "fanxiaojie", - "charlie", - "fonglezen" + "varcat" ] }, - "Web/SVG/Element/switch": { - "modified": "2019-03-23T23:03:50.332Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods": { + "modified": "2020-09-02T03:21:36.745Z", "contributors": [ - "Sebastianz", - "fanxiaojie", - "fonglezen" + "tita0x00" ] }, - "Web/SVG/Element/symbol": { - "modified": "2019-03-23T23:05:34.325Z", + "Web/JavaScript/Reference/Global_Objects/String/trimStart": { + "modified": "2020-10-15T21:07:56.369Z", "contributors": [ - "Sebastianz", - "fanxiaojie", - "baiya" + "RainSlide", + "SageX", + "zhangchen", + "xgqfrms-GitHub", + "teoli", + "ziyunfei" ] }, - "Web/SVG/Element/text": { - "modified": "2019-03-23T23:05:43.568Z", + "Web/JavaScript/Reference/Global_Objects/String/trimEnd": { + "modified": "2020-10-15T21:07:55.509Z", "contributors": [ - "Sebastianz", - "jyy12", - "fanxiaojie", - "charlie", - "baiya" + "SageX", + "zhangchen", + "teoli", + "Ende93", + "xgqfrms-GitHub", + "ziyunfei" ] }, - "Web/SVG/Element/textPath": { - "modified": "2019-03-23T23:05:43.375Z", + "Web/JavaScript/Reference/Operators/async_function": { + "modified": "2020-10-15T21:51:08.469Z", "contributors": [ - "Sebastianz", - "fanxiaojie", - "baiya" + "Terry.Qiao", + "fphonor", + "xgqfrms-GitHub", + "x-cold", + "Rusion-Wayne" ] }, - "Web/SVG/Element/title": { - "modified": "2019-03-23T22:46:43.066Z", + "Web/JavaScript/Reference/Operators/Remainder": { + "modified": "2020-10-15T22:30:57.453Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "parabolazz" ] }, - "Web/SVG/Element/tref": { - "modified": "2019-03-23T23:05:44.122Z", + "Web/JavaScript/Reference/Operators/Optional_chaining": { + "modified": "2020-11-05T00:32:59.486Z", "contributors": [ - "Sebastianz", - "fanxiaojie", - "baiya" + "MinimalistYing", + "xgqfrms", + "RainSlide", + "zhangchen", + "Coink", + "daolanfler", + "lmislm", + "Ende93", + "wsv587" ] }, - "Web/SVG/Element/tspan": { - "modified": "2019-03-23T23:29:30.380Z", + "Web/JavaScript/Reference/Operators/Bitwise_AND": { + "modified": "2020-10-15T22:33:57.582Z", "contributors": [ - "wbamberg", - "Sebastianz", - "fanxiaojie", - "teoli", - "flyonok" + "hellorayza" ] }, - "Web/SVG/Element/use": { - "modified": "2019-03-23T22:46:45.349Z", + "Web/JavaScript/Reference/Operators/Addition": { + "modified": "2020-10-15T22:31:36.619Z", "contributors": [ - "Sebastianz", - "ObooChin", - "fanxiaojie" + "lws123321", + "Spengh" ] }, - "Web/SVG/Element/view": { - "modified": "2019-06-15T03:14:56.821Z", + "Web/JavaScript/Reference/Operators/Equality": { + "modified": "2020-10-28T03:33:52.196Z", "contributors": [ - "Sebastianz", - "fanxiaojie" + "SphinxKnight", + "thefirst-ma", + "zhangchen", + "lujing2", + "milulelele" ] }, - "Web/SVG/Element/vkern": { - "modified": "2020-10-15T21:39:26.145Z", + "Web/JavaScript/Reference/Operators/Pipeline_operator": { + "modified": "2020-10-15T21:59:15.552Z", "contributors": [ "RainSlide", - "Sebastianz", - "fanxiaojie" + "fsy0718", + "zhangchen", + "qdlaoyao", + "fphonor" ] }, - "Web/SVG/Linking": { - "modified": "2019-11-28T05:35:16.253Z", + "Web/JavaScript/Reference/Operators/Decrement": { + "modified": "2020-10-15T22:33:30.374Z", "contributors": [ - "tangguolong" + "helsmy" ] }, - "Web/SVG/Namespaces_Crash_Course": { - "modified": "2019-10-11T20:02:55.677Z", + "Web/JavaScript/Reference/Operators/Logical_AND": { + "modified": "2020-10-15T22:32:55.133Z", "contributors": [ - "pacexy", - "cyemeng", - "876843240", - "RongMine", - "Ljrou", - "charlie" + "matsongajapan" ] }, - "Web/SVG/SVG_1.1_Support_in_Firefox": { - "modified": "2019-03-23T22:52:10.546Z", + "Web/JavaScript/Reference/Template_literals": { + "modified": "2020-10-15T21:37:03.468Z", "contributors": [ - "Kylexii", - "sunxiang", - "ziyunfei", - "lunix01" + "SphinxKnight", + "fanky-huang", + "崮生", + "zhangchen", + "zouyang1230", + "aimishan", + "pujiaxun", + "ZQH", + "LNY", + "ywjco", + "winjeysong", + "xgqfrms-GitHub", + "lihx_hit", + "donyaw", + "Ende93", + "lukywong", + "FredWe" ] }, - "Web/SVG/SVG_animation_with_SMIL": { - "modified": "2019-03-23T22:46:05.864Z", + "Web/JavaScript/The_performance_hazards_of_prototype_mutation": { + "modified": "2020-03-12T19:49:00.824Z", "contributors": [ - "WindStormrage", - "fscholz", - "Jackandjohn", - "fanxiaojie" + "Rominez", + "suhan" ] }, - "Web/SVG/SVG_as_an_Image": { - "modified": "2019-03-23T22:46:05.004Z", + "orphaned/Web/Localization": { + "modified": "2020-05-28T07:36:01.726Z", "contributors": [ - "fanxiaojie" + "RoyZ", + "faliye" ] }, - "Web/SVG/Tutorial": { - "modified": "2019-08-15T22:27:47.736Z", + "Web/Media/Formats/Video_codecs": { + "modified": "2019-10-29T00:53:07.418Z", "contributors": [ - "AngelName", - "Pehfan", - "simongfxu", - "xgqfrms", - "fanxiaojie", - "charlie", - "teoli", - "ziyunfei", - "Dx.Yang" + "zxhaha" ] }, - "Web/SVG/Tutorial/Basic_Shapes": { - "modified": "2020-05-17T23:40:20.747Z", + "Web/Performance/How_browsers_work": { + "modified": "2020-04-02T13:24:16.615Z", "contributors": [ - "nyz123", - "0229xiang", - "851091009", - "VicYu", - "fanxiaojie", - "zldream1106", - "act262" + "Galaxy" ] }, - "Web/SVG/Tutorial/Basic_Transformations": { - "modified": "2019-03-23T22:46:26.560Z", + "Web/Progressive_web_apps/Loading": { + "modified": "2019-08-31T10:29:37.985Z", "contributors": [ - "fanxiaojie" + "githubxiaominge" ] }, - "Web/SVG/Tutorial/Clipping_and_masking": { - "modified": "2020-05-16T12:44:05.454Z", + "Web/Progressive_web_apps/Add_to_home_screen": { + "modified": "2019-11-13T02:27:54.714Z", "contributors": [ - "Yayure", - "hebby", - "chenronghui", - "zhangyifan", - "fanxiaojie" + "JC-Ge" ] }, - "Web/SVG/Tutorial/Fills_and_Strokes": { - "modified": "2019-07-02T00:36:20.256Z", + "orphaned/Web/Security/Information_Security_Basics": { + "modified": "2020-04-29T06:01:25.213Z", "contributors": [ - "0229xiang", - "ZhengYinBo", - "fanxiaojie", - "act262" + "shellway", + "fanyj1994", + "ivydom", + "wth" ] }, - "Web/SVG/Tutorial/Filter_effects": { - "modified": "2020-05-16T13:46:25.008Z", + "Learn/Server-side/Configuring_server_MIME_types": { + "modified": "2020-07-16T22:36:04.639Z", "contributors": [ - "Yayure", - "knightyun", - "ZeroJsus", - "fanxiaojie" + "wangxu1144", + "Roscoe93", + "651291702" ] }, - "Web/SVG/Tutorial/Getting_Started": { - "modified": "2020-02-19T07:42:57.768Z", + "Web/Security/Transport_Layer_Security": { + "modified": "2020-05-16T23:45:09.100Z", "contributors": [ - "Jamie0327", - "qinggge", - "SallyOne", - "maozhenhua2", - "shuihuo", - "SparrowLiu", - "fanxiaojie", - "dolphinX" + "Unequaled804", + "msforest" ] }, - "Web/SVG/Tutorial/Gradients": { - "modified": "2019-03-23T22:50:18.555Z", + "Web/Security/Subresource_Integrity": { + "modified": "2020-06-01T06:08:59.407Z", "contributors": [ - "fanxiaojie", - "ziyunfei", - "zldream1106" + "asmoker", + "chenqingyue", + "maicss", + "kingcc", + "Roland_Reed", + "xgqfrms-GitHub" ] }, - "Web/SVG/Tutorial/Introduction": { - "modified": "2020-06-30T12:46:55.614Z", + "Web/SVG/Attribute/text-anchor": { + "modified": "2019-03-23T22:22:02.773Z", "contributors": [ - "antimonyGu", - "Jamie0327", - "daGaiGuanYu", - "XHMM", - "ZeroJsus", - "shuihuo", - "ezirmusitua", - "xgqfrms", - "fanxiaojie", - "charlie", - "teoli", - "ziyunfei", - "Dx.Yang" + "AozakiOrenji", + "yashuer" ] }, - "Web/SVG/Tutorial/Other_content_in_SVG": { - "modified": "2020-05-16T13:02:06.652Z", + "Web/SVG/Attribute/Styling": { + "modified": "2020-10-15T22:10:48.584Z", "contributors": [ - "Yayure", - "fanxiaojie" + "liu3329" ] }, - "Web/SVG/Tutorial/Paths": { - "modified": "2020-10-26T07:22:08.293Z", + "Web/Web_Components/HTML_Imports": { + "modified": "2020-10-15T21:47:50.577Z", "contributors": [ - "WindStormrage", - "esc", - "xgqfrms", - "chenyang", - "hebby", - "mochase", - "xianshenglu", - "vlaw", - "fanxiaojie", - "AnnGing", - "teoli", - "ziyunfei" + "2A5F", + "xgqfrms-GitHub", + "jchnxu" ] }, - "Web/SVG/Tutorial/Patterns": { - "modified": "2020-05-04T00:26:06.468Z", + "orphaned/Web/Web_Components/Status_in_Firefox": { + "modified": "2019-03-23T22:21:10.569Z", "contributors": [ - "knightyun", - "fanxiaojie", - "zldream1106" + "mx601595686" ] }, - "Web/SVG/Tutorial/Positions": { - "modified": "2019-06-07T11:18:02.352Z", + "Web/XSLT/Element": { + "modified": "2019-03-24T00:03:10.744Z", "contributors": [ - "ymjrcc", - "fanxiaojie", - "BlackGlory", - "jiraiya", - "teoli", - "ziyunfei" + "ziyunfei", + "fscholz", + "Freeopen" ] }, - "Web/SVG/Tutorial/SVG_Image_Tag": { - "modified": "2019-03-23T22:46:20.960Z", + "Web/Media/Autoplay_guide": { + "modified": "2020-11-19T04:43:44.047Z", "contributors": [ - "fanxiaojie" + "avrinfly", + "baijingfeng" ] }, - "Web/SVG/Tutorial/SVG_In_HTML_Introduction": { - "modified": "2019-10-30T00:49:48.215Z", + "Web/Media": { + "modified": "2019-08-30T07:28:45.901Z", "contributors": [ - "donley828", - "crazy_rat", - "chrisdavidmills", - "zldream1106", - "lunix01" + "Jwenee", + "Forbidden" + ] + }, + "Web/Demos_of_open_web_technologies": { + "modified": "2019-09-04T03:32:34.828Z", + "contributors": [ + "RainSlide", + "yzweb2018", + "nanflower", + "Vevlins", + "wth", + "awesomeric" ] }, - "Web/SVG/Tutorial/SVG_fonts": { - "modified": "2019-03-23T22:46:23.842Z", + "Web/API/File_and_Directory_Entries_API/Introduction": { + "modified": "2019-03-23T23:31:18.012Z", "contributors": [ - "fanxiaojie" + "JobbyM", + "ziyunfei", + "james.li" ] }, - "Web/SVG/Tutorial/Texts": { - "modified": "2020-07-06T07:25:02.894Z", + "Web/API/WebRTC_API/Session_lifetime": { + "modified": "2019-07-15T23:54:09.891Z", "contributors": [ - "zch233", - "fsx950223", - "fanxiaojie", - "FEbyland" + "qs3673132", + "Xiaosha61", + "Move", + "acgeeker" ] }, - "Web/SVG/Tutorial/Tools_for_SVG": { - "modified": "2019-03-23T22:46:28.488Z", + "Web/Guide/WOFF": { + "modified": "2020-10-15T21:07:54.753Z", "contributors": [ - "fanxiaojie" + "zhangchen", + "MingxunBai", + "fscholz", + "ziyunfei" ] }, - "Web/Security": { - "modified": "2019-09-10T16:49:46.462Z", + "Glossary/XHTML": { + "modified": "2019-03-23T23:53:05.465Z", "contributors": [ - "SphinxKnight", - "cooldrivez", - "zhangppbb", - "RainSlide", - "msforest", - "Vivi-wu", + "SQibang", "ziyunfei", - "Breezewish", - "Freeopen" + "Jiangyuanmil", + "Jiao7zhe8", + "Unest" ] }, - "Web/Security/CSP": { - "modified": "2019-08-30T07:28:26.257Z", + "Web/API/XMLSerializer": { + "modified": "2020-10-15T21:14:45.671Z", "contributors": [ + "leeleee", + "zhangchen", "ziyunfei", - "Breezewish", - "zhangzipeng", - "R00tgrok" + "teoli", + "zchong1022" ] }, - "Web/Security/CSP/Introducing_Content_Security_Policy": { - "modified": "2019-08-30T07:28:05.612Z", + "Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces": { + "modified": "2020-10-08T06:13:28.865Z", "contributors": [ - "LeonDWong", - "lcxfs1991", - "Breezewish", - "ziyunfei" + "ruiyang0012", + "crowphy", + "newued", + "helloguangxue", + "Jcrjia", + "Transfan", + "Laser", + "Carrie zhxj", + "Mgjbot", + "Surfchen", + "Kakurady", + "Heagle" ] }, - "Web/Security/CSP/Using_CSP_violation_reports": { - "modified": "2019-03-23T23:03:20.586Z", + "conflicting/Glossary/Chrome": { + "modified": "2019-03-23T23:52:52.388Z", "contributors": [ "ziyunfei", - "zhangzipeng" + "Jedichou", + "Freeopen" ] }, - "Web/Security/Information_Security_Basics": { - "modified": "2020-04-29T06:01:25.213Z", + "conflicting/Glossary/Doctype": { + "modified": "2019-03-23T22:20:01.642Z", "contributors": [ - "shellway", - "fanyj1994", - "ivydom", - "wth" + "eforegist" ] }, - "Web/Security/Same-origin_policy": { - "modified": "2020-04-07T00:07:57.795Z", + "Glossary/Serialization": { + "modified": "2019-03-23T22:07:45.475Z", "contributors": [ - "H3lloTom", - "dingziqi", - "769344359", - "AOYE", - "LvChengbin", - "Jerry4013", - "Syclover-u2400", - "iceytea", - "moyamoyarua", - "LeezQ", - "Akiq2016", - "zhuangyin", - "heekei", - "sqchenxiyuan", - "firedent", - "orangle", - "xgqfrms-GitHub", "Ende93", - "Jim_Chen", - "lyhper", - "linzhixiong", - "J22Melody", - "codinglion", - "ziyunfei", - "Taro", - "mr3", - "teoli", - "monjer", - "kusamba", - "Ghostheaven" + "JohnZengshi" ] }, - "Web/Security/Secure_Contexts": { - "modified": "2020-09-16T05:44:30.532Z", + "conflicting/Learn": { + "modified": "2020-07-16T22:33:41.521Z", "contributors": [ - "gjc9620" + "LX" ] }, - "Web/Security/Securing_your_site": { - "modified": "2019-05-30T06:18:16.799Z", + "conflicting/Learn_30ccce5e65b5ce795fc2e288fe9d012b": { + "modified": "2020-07-16T22:33:40.955Z", "contributors": [ - "Qos", - "Roscoe93", - "keep2zero", - "xgqfrms-GitHub", - "hashedhyphen" + "Andrew_Pfeiffer" ] }, - "Web/Security/Securing_your_site/Configuring_server_MIME_types": { - "modified": "2020-07-16T22:36:04.639Z", + "conflicting/Learn/Common_questions": { + "modified": "2020-07-16T22:22:13.542Z", "contributors": [ - "wangxu1144", - "Roscoe93", - "651291702" + "jdk137", + "Ende93", + "yfdyh000", + "yanbinlucy" ] }, - "Web/Security/Securing_your_site/Turning_off_form_autocompletion": { - "modified": "2020-06-26T14:51:08.712Z", + "conflicting/MDN/Contribute": { + "modified": "2019-01-16T16:56:07.625Z", "contributors": [ - "Clarkkkk", - "zhangchen", - "nick-ChenZe", - "tsejx", - "1010Tech", - "xgqfrms-GitHub" + "ygtyugh" ] }, - "Web/Security/传输层安全协议": { - "modified": "2020-05-16T23:45:09.100Z", + "conflicting/MDN/Guidelines/CSS_style_guide": { + "modified": "2020-09-30T15:32:46.742Z", "contributors": [ - "Unequaled804", - "msforest" + "chrisdavidmills", + "wbamberg", + "OlingCat" ] }, - "Web/Security/子资源完整性": { - "modified": "2020-06-01T06:08:59.407Z", + "orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox": { + "modified": "2019-03-23T22:45:12.350Z", "contributors": [ - "asmoker", - "chenqingyue", - "maicss", - "kingcc", - "Roland_Reed", - "xgqfrms-GitHub" + "GrayLight", + "yfdyh000" ] }, - "Web/Tutorials": { - "modified": "2020-09-27T10:44:48.931Z", + "conflicting/Mozilla/Add-ons/WebExtensions/user_interface": { + "modified": "2019-03-18T21:06:10.178Z", "contributors": [ - "GKilyar", - "StorytellerF", - "yzweb2018", - "shengoo", - "yangzi", - "wumouse", - "185-5162-9169", - "Ende93", - "SamuraiMe", - "cehnjing", - "shengyouxiao", - "ziyunfei" + "qson", + "Hypophrenia" ] }, - "Web/WebDriver": { - "modified": "2020-10-15T22:20:19.059Z", + "conflicting/Learn/Server-side/Django": { + "modified": "2019-03-23T23:11:53.165Z", "contributors": [ - "lvbaiying", - "ZQ-jhon" + "JiangLirui", + "xcffl" ] }, - "Web/Web_Components": { - "modified": "2020-05-14T03:39:38.306Z", + "conflicting/Tools/Performance": { + "modified": "2020-07-16T22:35:29.313Z", "contributors": [ - "lc15011977647", - "RequireSun", - "ujsxn", - "zjffun", - "YellowPure", - "FlyingPig", - "FarmerZhou", - "siwei_null", - "zilong-thu", - "jscgq", - "EliYao", - "zhangchen", - "xgqfrms-GitHub", - "little-tomorrow", - "chaosdog", - "xiaokk06", - "jchnxu", - "Fantasy_shao" + "wbamberg", + "hstarorg", + "Qcui", + "jackyong" ] }, - "Web/Web_Components/HTML导入": { - "modified": "2020-10-15T21:47:50.577Z", + "conflicting/tools/Keyboard_shortcuts": { + "modified": "2020-07-16T22:34:03.695Z", "contributors": [ - "2A5F", - "xgqfrms-GitHub", - "jchnxu" + "wbamberg", + "ziyunfei", + "Sanshao" ] }, - "Web/Web_Components/Status_in_Firefox": { - "modified": "2019-03-23T22:21:10.569Z", + "conflicting/Learn/CSS/Styling_text/Fundamentals": { + "modified": "2020-06-28T08:17:09.016Z", "contributors": [ - "mx601595686" + "riino", + "zsxeee", + "ziyunfei", + "Y001", + "Bonede" ] }, - "Web/Web_Components/Using_custom_elements": { - "modified": "2020-08-13T09:13:52.060Z", + "conflicting/Web/XPath/Introduction_to_using_XPath_in_JavaScript": { + "modified": "2019-01-16T15:30:24.695Z", "contributors": [ - "justaverygoodboy", - "ytxmobile", - "LemonTency", - "Xiaoming666", - "bei6", - "YellowPure", - "rianma", - "fu1252", - "olivewind", - "zhang-quan-yi" + "Cuimingda" ] }, - "Web/Web_Components/Using_shadow_DOM": { - "modified": "2020-06-08T05:35:09.239Z", + "conflicting/Web/Guide": { + "modified": "2019-03-24T00:05:29.399Z", "contributors": [ - "Junezm", - "RainSlide", - "Louis-7", - "haoliangwu", - "zhang-quan-yi" + "xuxun", + "xcffl", + "superwulei", + "Marcossp", + "fantasticfears", + "limomo", + "Cnmahj" ] }, - "Web/Web_Components/Using_templates_and_slots": { - "modified": "2020-11-09T10:43:35.619Z", + "conflicting/Web/Guide/Mobile": { + "modified": "2019-03-23T23:32:37.535Z", "contributors": [ - "luzhenqian", - "jingkaimori", - "Yayure", - "whuhyw", - "sjpeter", - "Czzzx", - "JasonKee", - "xgqfrms", - "xrr2016", - "zxk7516" + "xuxun", + "wbamberg" ] }, - "Web/Web_Components/影子_DOM": { - "modified": "2019-03-23T22:29:42.834Z", + "conflicting/Web/Progressive_web_apps": { + "modified": "2019-03-23T23:32:36.317Z", "contributors": [ - "xgqfrms-GitHub", - "fsx950223", - "floraluo", - "jchnxu" + "cagen53070830", + "ziyunfei", + "goodboy" ] }, - "Web/XML": { - "modified": "2019-09-25T00:01:50.050Z", + "conflicting/Web/Accessibility": { + "modified": "2019-03-23T22:29:25.203Z", "contributors": [ - "amalia77", - "ExE-Boss" + "qianzhangcheng" ] }, - "Web/XML/XML_Introduction": { - "modified": "2020-03-04T03:08:47.854Z", + "Web/API/AmbientLightSensor/illuminance": { + "modified": "2019-03-23T22:07:09.220Z", "contributors": [ - "Whitetea00", - "Joria0414", - "fish-inu", - "ExE-Boss", - "DarrenZhang01", - "pluwen", - "xgqfrms-GitHub", - "Y001", - "Mgjbot", - "Gelihui", - "Kakurady", - "Dbseti" + "shockw4ver" ] }, - "Web/XPath": { - "modified": "2019-03-18T20:43:12.282Z", + "conflicting/Web/API/Canvas_API/Tutorial": { + "modified": "2019-03-23T23:20:14.159Z", "contributors": [ - "RainSlide", - "Ke.shidong", "ziyunfei", - "cattail2012@gmail.com" + "wanglingzhi" ] }, - "Web/XPath/Axes": { - "modified": "2019-03-18T20:43:12.087Z", + "conflicting/Web/API/DOMMatrix": { + "modified": "2019-03-23T22:20:22.410Z", "contributors": [ - "ziyunfei", - "Cuimingda" + "kameii" ] }, - "Web/XSLT": { - "modified": "2019-03-23T23:52:51.686Z", + "Web/API/DeviceMotionEventAcceleration": { + "modified": "2019-03-23T22:20:59.019Z", "contributors": [ - "Gingercat", - "ziyunfei", - "Freeopen", - "Lycvip" + "shuangya" ] }, - "Web/XSLT/Elements": { - "modified": "2019-03-24T00:03:10.744Z", + "conflicting/Web/API/Document_Object_Model": { + "modified": "2019-03-23T23:33:00.872Z", "contributors": [ + "khalid32", "ziyunfei", - "fscholz", - "Freeopen" + "ReyCG_sub", + "ngoyroe" ] }, - "Web/XSLT/Transforming_XML_with_XSLT": { - "modified": "2019-03-23T23:52:45.330Z", + "conflicting/Web/API/DocumentOrShadowRoot/elementFromPoint": { + "modified": "2019-03-23T23:19:33.886Z", "contributors": [ - "chrisdavidmills", - "ziyunfei", - "Freeopen" + "teoli", + "ziyunfei" ] }, - "Web/媒体": { - "modified": "2019-08-30T07:28:45.901Z", + "conflicting/Web/API/DocumentOrShadowRoot/elementsFromPoint": { + "modified": "2019-03-23T22:03:51.668Z", "contributors": [ - "Jwenee", - "Forbidden" + "ziyunfei" ] }, - "Web/媒体/Autoplay_guide": { - "modified": "2020-11-19T04:43:44.047Z", + "conflicting/Web/API/DocumentOrShadowRoot/getSelection": { + "modified": "2019-04-29T02:16:09.423Z", "contributors": [ - "avrinfly", - "baijingfeng" + "happyWang", + "teoli", + "AlexChao" ] }, - "Web/演示说明": { - "modified": "2019-09-04T03:32:34.828Z", + "conflicting/Web/API/Document/characterSet": { + "modified": "2019-03-24T00:17:51.204Z", "contributors": [ - "RainSlide", - "yzweb2018", - "nanflower", - "Vevlins", - "wth", - "awesomeric" + "teoli", + "AshfaqHossain", + "ziyunfei" ] }, - "WebAPI": { - "modified": "2019-03-18T20:42:39.198Z", + "conflicting/Web/API/DocumentOrShadowRoot/styleSheets": { + "modified": "2019-03-23T23:10:11.077Z", "contributors": [ - "wbamberg", - "fscholz", - "jiahui", - "zhenhua32", - "Meteormatt" + "xgqfrms-GitHub", + "teoli", + "AlexChao" ] }, - "WebAssembly": { - "modified": "2020-10-15T21:52:52.867Z", + "Web/API/HTMLElement/accessKey": { + "modified": "2019-03-23T22:20:51.264Z", "contributors": [ - "callmeDAY", - "zhangchen", - "ldwformat", - "zhuangyin", - "kingysu", - "xgqfrms-GitHub", - "disoul" + "songlairui" ] }, - "WebAssembly/C_to_wasm": { - "modified": "2020-11-17T22:59:58.305Z", + "conflicting/Web/API": { + "modified": "2019-03-23T23:09:29.332Z", "contributors": [ - "CGerAJ", - "zhanyuzhang", - "xinghuolei", - "rui-space", - "jinliming2", - "johncido", - "eeve", - "kingysu", - "hungtcs", - "AdrianDuan", - "disoul" + "mySoul", + "teoli", + "AlexChao" ] }, - "WebAssembly/Caching_modules": { - "modified": "2019-03-25T04:00:16.303Z", + "conflicting/Web/API/GlobalEventHandlers/ongotpointercapture": { + "modified": "2019-03-18T21:45:48.501Z", "contributors": [ - "Seasonley", - "rui-space", - "kingysu" + "Bayes", + "StorytellerF" ] }, - "WebAssembly/Concepts": { - "modified": "2019-03-18T20:54:48.847Z", + "conflicting/Web/API/MouseEvent/altKey": { + "modified": "2019-03-24T00:16:10.184Z", "contributors": [ - "xiongcong", - "rui-space", "ziyunfei", - "kingysu" + "teoli", + "jsx" ] }, - "WebAssembly/Exported_functions": { - "modified": "2019-07-23T04:14:30.673Z", + "conflicting/Web/API/MouseEvent/button": { + "modified": "2019-03-24T00:18:20.119Z", "contributors": [ - "imechZhangLY", - "rui-space", - "kingysu" + "ziyunfei", + "teoli", + "AshfaqHossain" ] }, - "WebAssembly/Loading_and_running": { - "modified": "2019-03-18T20:54:50.799Z", + "conflicting/Web/API/MouseEvent/relatedTarget": { + "modified": "2019-03-23T23:09:12.340Z", "contributors": [ - "kingysu", - "xgqfrms-GitHub" + "wbamberg", + "zhangqiong", + "ziyunfei", + "teoli", + "Darrel.Hsu" ] }, - "WebAssembly/Rust_to_wasm": { - "modified": "2020-11-12T06:21:14.353Z", + "conflicting/Web/API/MouseEvent/shiftKey": { + "modified": "2019-03-24T00:16:22.591Z", "contributors": [ - "longfangsong", - "linghucq1", - "yanchongwen101", - "Syaki", - "SphinxKnight", - "SToneX", - "wymm0008" + "ziyunfei", + "teoli", + "khalid32" ] }, - "WebAssembly/Text_format_to_wasm": { - "modified": "2020-01-27T02:12:13.951Z", + "conflicting/Web/API/Document/createEvent": { + "modified": "2019-03-23T22:56:15.340Z", "contributors": [ - "coderzh", - "acelan86", - "xgqfrms-GitHub", - "kingysu" + "holynewbie", + "Serifx", + "yulifu" ] }, - "WebAssembly/Understanding_the_text_format": { - "modified": "2019-03-23T22:12:45.612Z", + "conflicting/Web/API/Event/composedPath": { + "modified": "2019-03-23T22:13:43.358Z", "contributors": [ - "yangdonglai", - "rui-space", - "aaron_li", - "Rexli", - "rockfire", - "acelan86", - "kingysu", - "chyingp", - "itminus" + "DarrenZhang01", + "Gyanxie" ] }, - "WebAssembly/Using_the_JavaScript_API": { - "modified": "2020-08-18T06:38:27.755Z", + "conflicting/Web/API/EventTarget/addEventListener": { + "modified": "2020-12-08T04:46:34.350Z", "contributors": [ - "jealyn", - "xgqfrms", - "coderzh", - "billkang", - "huangjj27", - "kingysu", - "skyfore", - "xgqfrms-GitHub" + "bershanskiy", + "JohnsonBryant", + "eeeeeeeason", + "JiexianYang" ] }, - "WebGuide/API/File_System": { - "modified": "2019-03-23T23:17:06.579Z", + "conflicting/Web/API/EventTarget/removeEventListener": { + "modified": "2019-03-23T22:15:37.296Z", "contributors": [ - "ziyunfei" + "Ende93", + "faremax", + "daisyHawen" ] }, - "WebGuide/API/File_System/Introduction": { - "modified": "2019-03-23T23:31:18.012Z", + "conflicting/Web/API/EventTarget/dispatchEvent": { + "modified": "2019-03-23T22:26:26.112Z", "contributors": [ - "JobbyM", - "ziyunfei", - "james.li" + "pod4g" ] }, - "WebRTC": { - "modified": "2019-03-23T23:36:50.162Z", + "conflicting/Web/API/GlobalEventHandlers/ontouchmove": { + "modified": "2019-03-23T22:38:32.324Z", "contributors": [ - "lxyion", - "acgeeker", - "alayasix" + "zhangqiong" + ] + }, + "conflicting/Web/API/HTMLInputElement": { + "modified": "2019-03-23T23:32:37.731Z", + "contributors": [ + "teoli", + "basemnassar11", + "ziyunfei" ] }, - "WebRTC/介绍": { - "modified": "2019-07-15T23:54:09.891Z", + "conflicting/Web/API/Geolocation": { + "modified": "2019-03-23T23:01:18.415Z", "contributors": [ - "qs3673132", - "Xiaosha61", - "Move", - "acgeeker" + "teoli" ] }, - "Web_Development": { - "modified": "2019-03-24T00:05:29.399Z", + "conflicting/Web/API/Node": { + "modified": "2019-03-24T00:17:51.751Z", "contributors": [ - "xuxun", - "xcffl", - "superwulei", - "Marcossp", - "fantasticfears", - "limomo", - "Cnmahj" + "teoli", + "khalid32", + "ziyunfei" ] }, - "Web_Development/Introduction_to_Web_development": { - "modified": "2019-03-24T00:00:33.366Z", + "conflicting/Web/API/Node_378aed5ed6869e50853edbc988cf9556": { + "modified": "2019-03-23T23:09:34.131Z", "contributors": [ + "teoli", "ziyunfei", - "fantasticfears" + "AlexChao" ] }, - "Web_Development/Mobile": { - "modified": "2019-03-23T23:32:37.535Z", + "conflicting/Web/API/HTMLElement/outerText": { + "modified": "2019-01-17T00:59:24.641Z", "contributors": [ - "xuxun", - "wbamberg" + "xgqfrms-GitHub" ] }, - "Web_Development/Mobile/Responsive_design": { - "modified": "2019-03-23T23:32:36.317Z", + "conflicting/Web/API/Node/getRootNode": { + "modified": "2019-03-18T21:40:49.635Z", "contributors": [ - "cagen53070830", - "ziyunfei", - "goodboy" + "wbamberg", + "LoveofRedMoon" ] }, - "XHTML": { - "modified": "2019-03-23T23:53:05.465Z", + "conflicting/Web/API/Push_API": { + "modified": "2019-03-23T22:26:22.995Z", "contributors": [ - "SQibang", - "ziyunfei", - "Jiangyuanmil", - "Jiao7zhe8", - "Unest" + "vankai", + "xgqfrms-GitHub", + "hibernake" ] }, - "XMLSerializer": { - "modified": "2020-10-15T21:14:45.671Z", + "conflicting/Web/API/Crypto/getRandomValues": { + "modified": "2019-03-23T22:14:07.005Z", "contributors": [ - "leeleee", - "zhangchen", - "ziyunfei", - "teoli", - "zchong1022" + "micblo" ] }, - "learn": { - "modified": "2020-07-16T22:43:49.854Z", + "conflicting/Web/API/Element": { + "modified": "2020-10-15T22:26:24.148Z", "contributors": [ - "Roy-Tian", - "SirnoChan", - "mrg123", - "wangfangping", - "chentao106", - "916106840510", - "wushengde", - "MingdaHIT", - "JiaHua", - "Aslemonssss", - "SurfingFish", - "svarlamov", - "RanceLotusLee", - "miye", - "xmcgcg", - "codeofjackie", - "xixilog", - "Forbidden", - "Bearies", - "varcat", - "2526chen", - "zs808", - "gao5252", - "xcffl", - "sefer", - "xgqfrms-GitHub", - "fan19900404", - "WavinFlag", - "Simcookies", - "m4jing", - "liminjun", - "sunxiang", - "Ende93", - "Meteormatt", - "lunix01", - "27", - "chenhui7373", - "teoli", - "ziyunfei" + "RainSlide" ] }, - "learn/Accessibility": { - "modified": "2020-07-16T22:40:01.477Z", + "conflicting/Web/API/Window/localStorage": { + "modified": "2019-03-23T22:25:01.381Z", "contributors": [ - "shinexyt", - "pixang", - "yatarphae", - "guaner", - "chenghaihua" + "CuriosityLxn", + "jaiJia", + "lightning-zgc", + "kankk", + "tabooc", + "luneice", + "liuzeyafzy" ] }, - "learn/Accessibility/Accessibility_troubleshooting": { - "modified": "2020-07-16T22:40:37.212Z", + "conflicting/Web/API/WebRTC_API/Protocols": { + "modified": "2020-04-24T05:54:00.386Z", "contributors": [ - "wsj0124", - "kuldahar", - "zeng-zhi-yong" + "xgqfrms", + "ziyunfei", + "SparrowLiu" ] }, - "learn/Accessibility/CSS和JavaScript": { - "modified": "2020-11-03T05:18:13.954Z", + "conflicting/Web/API/WebRTC_API": { + "modified": "2019-03-23T22:45:00.042Z", "contributors": [ - "No.5972", - "yawei", - "grape", - "wangfangping", - "wsj0124", - "cani1see", - "hmfight" + "Ling.kevin" ] }, - "learn/Accessibility/HTML:为可访问性提供一个良好的基础": { - "modified": "2020-07-16T22:40:15.418Z", + "conflicting/Web/API/WebRTC_API/Signaling_and_video_calling": { + "modified": "2019-09-24T02:45:56.457Z", "contributors": [ - "grape", - "kuldahar", - "ChuckZhang", - "zxsunrise", - "xiwusheng", - "zouyang1230", - "Junx" + "lixl", + "huangcheng", + "SparrowLiu" ] }, - "learn/Accessibility/Mobile": { - "modified": "2020-07-16T22:40:33.086Z", + "conflicting/Web/API/GlobalEventHandlers/onmouseup": { + "modified": "2019-03-24T00:16:16.641Z", "contributors": [ - "yuyx91", - "shenshaohui1991" + "teoli", + "khalid32", + "ziyunfei" ] }, - "learn/Accessibility/WAI-ARIA_basics": { - "modified": "2020-07-16T22:40:24.388Z", + "conflicting/Web/API/GlobalEventHandlers/onscroll": { + "modified": "2019-03-24T00:15:58.211Z", "contributors": [ - "grape", - "Madao-3", - "DavidDavidx" + "teoli", + "khalid32", + "ziyunfei" ] }, - "learn/Accessibility/多媒体": { - "modified": "2020-07-16T22:40:28.501Z", + "conflicting/Web/API/Window/moveTo": { + "modified": "2020-10-15T22:06:41.722Z", "contributors": [ - "wangfangping", - "xiwusheng" + "Bayes" ] }, - "learn/Front-end_web_developer": { - "modified": "2020-07-16T22:40:48.018Z", + "conflicting/Web/API/URL": { + "modified": "2019-03-23T22:22:37.359Z", "contributors": [ - "Ende93", - "ex90rts" + "xgqfrms-GitHub", + "Boring" ] }, - "learn/HTML": { - "modified": "2020-07-16T22:22:25.734Z", + "conflicting/Web/CSS/:placeholder-shown": { + "modified": "2019-03-23T23:21:19.033Z", "contributors": [ - "anguiao", - "xmcgcg", - "codeofjackie", - "myfreeer", - "xp44mm", - "xgqfrms-GitHub", - "BigLiao", - "leenlyCFFC", - "Mac_zhang", - "aimiy", - "chenxingyu350128", - "Yongest", - "funnyChinese", - "pkjy", - "sunxiang", - "Metalooze" + "teoli", + "bowen-shi" ] }, - "learn/HTML/Forms_and_buttons": { - "modified": "2020-02-28T22:25:38.433Z", + "conflicting/Web/CSS/:is": { + "modified": "2019-03-23T22:23:18.210Z", "contributors": [ - "Dev-Liangjian" + "Minya_Chan", + "LinYunweb", + "shuihuo", + "tigercao" ] }, - "learn/HTML/Howto": { - "modified": "2020-07-16T22:22:31.131Z", + "conflicting/Web/CSS/::placeholder": { + "modified": "2019-03-23T23:21:18.757Z", "contributors": [ - "xmcgcg", - "coderfee", - "WooHooDai", - "sallyllas", - "sour-toilet-seat", - "webber007", - "pengtikui", - "skylakecore", - "qixi" + "FrontENG", + "teoli", + "bowen-shi" ] }, - "learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image": { - "modified": "2020-07-16T22:22:43.732Z", + "conflicting/Web/CSS/@viewport": { + "modified": "2020-11-27T23:49:12.467Z", "contributors": [ - "hebby" + "xusy" ] }, - "learn/HTML/Introduction_to_HTML": { - "modified": "2020-07-16T22:22:54.800Z", + "conflicting/Web/CSS/@viewport_7861ca3461a359b150d44f2c8d74e53a": { + "modified": "2019-03-23T22:28:00.871Z", "contributors": [ - "zixuan945", - "mkckr0", - "Sphish", - "xmcgcg", - "imba-tjd", - "HolaForce", - "codeofjackie", - "zihengCat", - "lihaoyuan", - "chenos", - "Melvin.", - "xixilog", - "SeanZHU", - "funnyChinese", - "ZhiRui" + "Minya_Chan" ] }, - "learn/HTML/Introduction_to_HTML/Advanced_text_formatting": { - "modified": "2020-10-29T09:47:28.341Z", + "conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f": { + "modified": "2020-10-15T22:19:15.758Z", "contributors": [ - "kuailekai", - "Chell", - "Roy-Tian", - "MorrisLi", - "CesarChang", - "kenneth55555", - "cetewhale", - "xq20160912", - "monkey-king", - "imba-tjd", - "kaka4NERV", - "HolaForce", - "codeofjackie", - "jwhitlock", - "anlien", - "eelord", - "lihaoyuan", - "superkuang", - "zhaoqize", - "023Sparrow", - "yydzxz", - "dirringx", - "HashubWang", - "xiaofei86", - "luwudang", - "weikunzz" + "PYGC", + "gzbitzxx", + "zhangchen", + "x1aodingdang" ] }, - "learn/HTML/Introduction_to_HTML/Debugging_HTML": { - "modified": "2020-09-22T12:30:11.535Z", + "conflicting/Web/CSS/@viewport_c925ec0506b352ea1185248b874f7848": { + "modified": "2019-10-22T01:59:54.524Z", "contributors": [ - "Roy-Tian", - "aaazz47", - "Yang_Hanlin", - "huaouo", - "HolaForce", - "lihaoyuan", - "zhaoqize", - "littledust", - "Zeng", - "huixiaomu" + "Zhang-Junzhi", + "xpromise" ] }, - "learn/HTML/Introduction_to_HTML/Getting_started": { - "modified": "2020-07-16T22:23:09.709Z", + "conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518": { + "modified": "2020-10-15T21:50:31.298Z", "contributors": [ - "lucida959595", - "Roy-Tian", - "dlnb526", - "LINYI", - "Sphish", - "h4091", - "WoodCube", - "eagle1949", - "imba-tjd", - "gadflysu", - "WimZhai", - "jwhitlock", - "HolaForce", - "byeyear", - "Planet6174", - "codeofjackie", - "pachinko", - "Willian.G", - "alonelyer", - "xp44mm", - "shinexyt", - "zhaoqize", - "Jeffrey_Yang", - "lyxy", - "SilverLeaves", - "skylakecore", - "jiahaifeng", - "workttt", - "HashubWang", - "b2ns", - "songbinghui", - "mhengrui", - "PhilipDing", - "RevolverOcelotA", - "hawm", - "3359260180", - "goingon", - "MinimalistYing", - "funnyChinese" + "zhangchen", + "azhi09" ] }, - "learn/HTML/Introduction_to_HTML/HTML_text_fundamentals": { - "modified": "2020-11-16T00:17:59.659Z", + "conflicting/Web/CSS/CSS_Backgrounds_and_Borders": { + "modified": "2019-03-23T22:45:29.966Z", "contributors": [ - "sinochen123", - "Roy-Tian", - "aaazz47", - "ZeroAurora", - "youngquan", - "MorrisLi", - "SirnoChan", - "Sphish", - "liangmuyang", - "tryhard", - "sf-think", - "baijingfeng", - "WindLo", - "HolaForce", - "web-xx", - "CaTmmao", - "shiyubo", - "zhaoqize", - "fengkx", - "HashubWang", - "skylakecore", - "876843240", - "DZW314", - "danlanxiaohei", - "c0ldian", - "funnyChinese" + "FrontENG", + "teoli" ] }, - "learn/HTML/Introduction_to_HTML/Marking_up_a_letter": { - "modified": "2020-07-16T22:23:14.761Z", + "conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds": { + "modified": "2019-03-23T23:28:25.343Z", "contributors": [ - "Roy-Tian", - "ToJunYu", - "ZhiiChong", - "chrisdavidmills", - "SirnoChan", - "FantasqueX", - "imba-tjd", - "ChairMao", - "kongkong1", - "HolaForce", - "Lohoyo", - "phiwyc", - "lihaoyuan", - "zhaoqize", - "gitpyc", - "Boot95" + "imwangpan", + "teoli", + "Nightingale" ] }, - "learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content": { - "modified": "2020-07-16T22:24:21.297Z", + "conflicting/Web/CSS/CSS_Color": { + "modified": "2019-03-23T22:09:37.851Z", "contributors": [ - "Roy-Tian", - "MorrisLi", - "HolaForce", - "codeofjackie", - "lihaoyuan", - "zhaoqize", - "littledust", - "ChenLyu01" + "GHLandy", + "Krenair" ] }, - "learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML": { - "modified": "2020-12-06T06:59:19.723Z", + "conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox": { + "modified": "2019-03-23T23:31:49.899Z", "contributors": [ - "zrzjohn", - "wayne_lau", - "Roy-Tian", - "Sphish", - "PYGC", - "WoodCube", - "fangfangfanga", - "eagle1949", - "Metaloe", - "HolaForce", - "qinruiy", - "codeofjackie", - "CaTmmao", - "yevivid", - "Willian.G", - "Milktea", - "anan0v0", - "zhaoqize", - "fengkx", - "oldpotter", - "littledust", - "hjb912", - "tianhu288", - "Mac_zhang", - "BarryLiu1995", - "HashubWang", - "littermark", - "igigi", - "876843240", - "mhengrui", - "Daryl.L", - "chinazhaghai", - "sisyphus-zhou" + "hanliuxin5", + "xgqfrms-GitHub", + "mogewcy", + "fedwatch", + "dongyu_-_", + "zrj570543941", + "TiaossuP", + "xgqfrms", + "WynnChen", + "jokeviner", + "fscholz", + "Huxpro", + "ziyunfei", + "yan", + "nighca", + "Kasuganosora", + "yisi", + "Ribery", + "TimZhao", + "Nightingale" ] }, - "learn/HTML/Introduction_to_HTML/文件和网站结构": { - "modified": "2020-09-22T12:28:50.229Z", + "conflicting/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox": { + "modified": "2019-03-23T22:27:26.278Z", "contributors": [ - "Roy-Tian", - "aaazz47", - "chenduone", - "MorrisLi", - "SirnoChan", - "wangfangping", - "FantasqueX", - "imba-tjd", - "HolaForce", - "HeYuansong", - "web-xx", - "codeofjackie", - "chaosdog", - "phiwyc", - "eelord", - "lihaoyuan", - "zhaoqize", - "nbhaohao", - "dirringx", - "HashubWang", - "skylakecore", - "BarryLiu1995", - "luwudang", - "JX-Master", - "danlanxiaohei", - "c0ldian" + "Anshiii", + "SphinxKnight", + "lon", + "fscholz", + "lazurey" ] }, - "learn/How_the_Internet_works": { - "modified": "2020-07-16T22:35:39.172Z", + "conflicting/Web/CSS/easing-function": { + "modified": "2020-10-15T21:21:10.131Z", "contributors": [ - "simon.woo", - "grape", - "W-YaoLing", - "ZhuZhuDrinkMilk", - "TaskForce86", - "ShirleyM", - "yydzxz", - "Jeffrey_Yang", - "StarryForce", - "ArcherGrey", - "wth", - "boredivan", - "RyanZhang", - "TanJrJie" + "tzgong", + "WangYiCong", + "woshixixi", + "wqq1992324", + "zhangchen", + "Huahua-Chen", + "Sebastianz", + "jiahui", + "fscholz", + "cungen", + "teoli", + "ziyunfei" ] }, - "learn/How_to_contribute": { - "modified": "2020-07-16T22:33:47.665Z", + "Web/CSS/url()": { + "modified": "2019-03-23T22:25:44.664Z", "contributors": [ - "SphinxKnight", - "Simcookies", - "Forbidden", - "WavinFlag" + "zhyupe" ] }, - "learn/JavaScript": { - "modified": "2020-07-16T22:29:46.300Z", + "conflicting/Web/API/HTMLMediaElement/abort_event": { + "modified": "2019-04-30T14:23:21.618Z", "contributors": [ - "oceanMIH", - "yummy_song", - "scyhm", - "YehaiChen", - "WavinFlag", + "wbamberg", + "hhxxhg", + "fscholz", "xgqfrms-GitHub", - "noiron", - "houcheng", - "Maze", - "Metalooze" + "m2mbob" ] }, - "learn/JavaScript/Building_blocks": { - "modified": "2020-07-16T22:31:11.083Z", + "conflicting/Web/API/Document_Object_Model_dd00a71ceceac547ab464128db6bd8ef": { + "modified": "2019-03-23T23:28:38.723Z", "contributors": [ - "Drizzt-Yu", - "NiceGG", - "JiLiangLai", - "xiaobin123", - "xp44mm", - "yzweb2018", - "sonymoon", - "nlln", - "ztytotoro", - "okotta1", - "backli", - "lvyue", - "ByWhy", - "Marslin92", - "chinatomhuang", - "GKilyar", - "iProgramme" + "ziyunfei", + "paddingme", + "Carrott", + "Kasuganosora", + "Sheppy" ] }, - "learn/JavaScript/Building_blocks/Build_your_own_function": { - "modified": "2020-08-01T05:11:26.919Z", + "conflicting/Web/API/Web_Storage_API": { + "modified": "2019-03-24T00:14:59.754Z", "contributors": [ - "driftingdream", - "Hermedius", - "WindLo", - "qiubite-name", - "codeofjackie", - "Undecyce", - "hygSup", - "gitpyc", - "Ray-Eldath", - "Hecdi", - "ppphp" + "ziyunfei", + "celinestar", + "hutuxu", + "Sheppy", + "qiumaoyuan", + "aokihu", + "zhengzong.fu", + "Carrie zhxj" ] }, - "learn/JavaScript/Building_blocks/Functions": { - "modified": "2020-08-27T11:13:47.934Z", + "conflicting/Learn/CSS/Building_blocks": { + "modified": "2019-03-21T02:43:58.945Z", "contributors": [ - "shawn20111416", - "driftingdream", - "jsl1079322620", - "Hermedius", - "jinsth", - "hyjalxl", - "agnoCJY", - "BusyToDie", - "LuoYun", - "codeofjackie", - "zhilu1", - "caifx", - "luoxzhg", - "NicholasCao", - "Pipapa", - "GKilyar", - "caojinguo", - "fyzzy1943", - "minmino" + "seozed", + "Robinx", + "Harvesty", + "ziyunfei", + "teoli", + "Chajn", + "hxl" ] }, - "learn/JavaScript/Building_blocks/Looping_code": { - "modified": "2020-07-16T22:31:22.467Z", + "conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance": { + "modified": "2019-03-23T23:20:58.387Z", "contributors": [ - "agnoCJY", - "Yayure", - "jianbinfu", - "LittleMang", - "LuoYun", - "lscnet", - "codeofjackie", - "WhiteYin", - "tuneura", - "DaduCC", - "Ray-Eldath", - "NicholasCao", - "Ende93", - "wanqing19954", - "Marslin92" + "HelloFun", + "ziyunfei", + "teoli", + "jedmeng", + "Chajn" ] }, - "learn/JavaScript/Building_blocks/Return_values": { - "modified": "2020-11-24T04:05:07.114Z", + "conflicting/Learn/CSS/Building_blocks/Values_and_units": { + "modified": "2019-07-23T22:49:50.958Z", "contributors": [ - "Anser0111", - "jsl1079322620", - "Hermedius", - "FantasqueX", - "LuoYun", - "larrychen", - "Gloriazdh", - "codeofjackie", - "DaduCC", - "BadRonmance", - "yj21world", - "minmino" + "moposx", + "HelloFun", + "Harvesty", + "jasonzhyan", + "ziyunfei", + "teoli", + "Chajn", + "lilyh" ] }, - "learn/JavaScript/Building_blocks/conditionals": { - "modified": "2020-07-16T22:31:16.388Z", + "conflicting/Learn/CSS/First_steps/How_CSS_works": { + "modified": "2019-03-23T23:23:25.849Z", "contributors": [ - "SirnoChan", - "qiubite-name", - "Undecyce", - "Ray-Eldath", - "DaduCC", - "NicholasCao", - "ideal.Li", - "lyllll000", - "finegao", - "INFINITSY", - "HashubWang" + "HelloFun", + "ziyunfei", + "teoli", + "Chajn", + "reygreen1" ] }, - "learn/JavaScript/Building_blocks/相片走廊": { - "modified": "2020-07-16T22:31:44.958Z", + "conflicting/Learn/CSS/First_steps": { + "modified": "2019-03-23T23:51:15.283Z", "contributors": [ - "lucida959595", - "Roy-Tian", - "LittleMang", - "Park-ma", - "codeofjackie", - "lihaoyuan", - "yeslogin2", - "Zeng" + "Harvesty", + "Ende93", + "ziyunfei", + "teoli", + "Chajn", + "sunnylost", + "playts", + "Ianyang", + "Verruckt", + "Mgjbot", + "Zuzu" ] }, - "learn/JavaScript/Howto": { - "modified": "2020-07-16T22:33:11.775Z", + "conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents": { + "modified": "2019-03-23T23:14:19.406Z", "contributors": [ - "wangwenhao", - "yuyx91" + "chengzise", + "Chajn", + "reygreen1" ] }, - "learn/JavaScript/异步": { - "modified": "2020-07-16T22:33:15.541Z", + "conflicting/Learn/CSS/CSS_layout": { + "modified": "2019-03-23T23:35:32.514Z", "contributors": [ - "yuqing521", - "alice201601", - "oceanMIH" + "Harvesty", + "jasonzhyan", + "shuson", + "ziyunfei", + "mengzyou", + "teoli", + "Chajn", + "larryzhang" ] }, - "learn/JavaScript/异步/Async_await": { - "modified": "2020-12-08T06:58:32.883Z", + "conflicting/Learn/CSS/Styling_text/Styling_lists": { + "modified": "2019-03-23T23:20:46.740Z", "contributors": [ - "byrde", - "woniuxingdong", - "qwei", - "plainnany", - "jakio6", - "awarmy", - "cochn", - "wangfangping" + "Harvesty", + "jasonzhyan", + "tolerious", + "mengzyou", + "ziyunfei", + "teoli", + "Chajn", + "aztack" ] }, - "learn/JavaScript/异步/Choosing_the_right_approach": { - "modified": "2020-12-08T07:27:41.218Z", + "conflicting/Learn/CSS/First_steps/How_CSS_is_structured": { + "modified": "2019-03-23T23:20:58.835Z", "contributors": [ - "byrde", - "icetea_cover", - "rubyKC", - "shangruitong", - "PYGC", - "wangfangping", - "tjls" + "FlameZheng", + "HelloFun", + "Harvesty", + "jasonzhyan", + "Synyan", + "neutrous", + "ziyunfei", + "teoli", + "aztack", + "reygreen1" ] }, - "learn/JavaScript/异步/Promises语法": { - "modified": "2020-12-08T05:22:09.292Z", + "conflicting/Learn/CSS/Building_blocks/Selectors": { + "modified": "2019-03-21T05:33:31.497Z", "contributors": [ - "byrde", - "You2er", - "hidoos", - "mizhon", - "haoawen", - "PYGC", - "masterZSH", - "wangfangping", - "kafm", - "zijieee" + "yijie_sun", + "Robinx", + "HelloFun", + "Harvesty", + "jasonzhyan", + "yihuanZhang", + "futurefeeling", + "FredWe", + "chenguangqi", + "yilksd", + "ziyunfei", + "teoli", + "Chajn", + "aztack", + "bingguo" ] }, - "learn/JavaScript/异步/概念": { - "modified": "2020-07-16T22:33:29.726Z", + "conflicting/Learn/CSS/Building_blocks/Styling_tables": { + "modified": "2019-03-23T23:20:48.505Z", "contributors": [ - "alice201601", - "grape", - "HermitSun", - "oceanMIH" + "023Sparrow", + "Harvesty", + "mengzyou", + "ziyunfei", + "teoli", + "Chajn", + "aztack" ] }, - "learn/JavaScript/异步/简介": { - "modified": "2020-12-09T00:17:16.227Z", + "conflicting/Learn/CSS/Styling_text/Fundamentals_5a3f2ce7cc4f23ec431e57a447af0711": { + "modified": "2019-03-23T23:20:39.790Z", "contributors": [ - "hidoos", - "iroywang", - "Hermedius", - "Xugen-Ma", - "alice201601", - "grape", - "Kavelaa", - "gqbre", - "oceanMIH" + "Harvesty", + "neutrous", + "ziyunfei", + "teoli", + "bingguo", + "gadgetboy", + "Chajn" ] }, - "learn/JavaScript/异步/超时和间隔": { - "modified": "2020-08-14T06:09:20.310Z", + "conflicting/Learn/CSS/First_steps/How_CSS_works_b66915031fb62b5fee1201086144e209": { + "modified": "2019-03-18T20:41:48.849Z", "contributors": [ - "Pada", - "You2er", - "WinterCicada", - "zhangbig0", - "mizhon", - "yuqing521", - "Alendia", - "grape", - "wangfangping", - "puddlejumper26", - "oceanMIH" + "HelloFun", + "Ende93", + "haofu", + "ziyunfei", + "teoli", + "Chajn", + "sunnylost" ] }, - "learn/Learning_and_getting_help": { - "modified": "2020-12-06T05:06:52.891Z", + "conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521": { + "modified": "2019-03-23T23:24:15.853Z", "contributors": [ - "3143875691" + "TomatoLovve", + "HelloFun", + "ziyunfei", + "haofu", + "teoli", + "Chajn", + "aihua" ] }, - "learn/Performance": { - "modified": "2020-12-05T12:01:04.505Z", + "conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": { + "modified": "2019-03-23T23:22:21.195Z", "contributors": [ - "mayerpan", - "liguanzeng", - "Bayes", - "yangchongduo" + "Ende93", + "mrstork", + "anjia", + "figure7", + "Wenbin" ] }, - "learn/Performance/Web_Performance_Basics": { - "modified": "2020-07-16T22:40:42.886Z", + "conflicting/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks": { + "modified": "2020-05-25T10:01:07.179Z", "contributors": [ - "shuiRong", - "creative_fish" + "sweeney", + "xgqfrms" ] }, - "learn/Performance/感知性能": { - "modified": "2020-07-16T22:40:43.760Z", + "conflicting/Web/HTML/Element": { + "modified": "2020-01-10T02:18:08.432Z", "contributors": [ - "biqing" + "yinsang", + "Jevol", + "yongdi", + "Breezewish", + "ziyunfei" ] }, - "learn/Server-side": { - "modified": "2020-07-16T22:36:03.668Z", + "conflicting/Web/Guide/HTML/HTML5": { + "modified": "2019-03-23T23:39:08.496Z", "contributors": [ - "ZuoRight", - "xixilog", - "JamesZhange", - "Munch_TZB", - "GHLgh" + "ziyunfei", + "kevmdn" ] }, - "learn/Server-side/Django": { - "modified": "2020-07-16T22:36:36.546Z", + "conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content": { + "modified": "2019-09-28T22:50:38.146Z", "contributors": [ - "diyigechipangxie", - "xixilog", - "chinanf-boy", - "hstaoqian", - "Zhaoyu" + "zaixuzheng", + "wth", + "Cindy_Liu", + "lyxuncle", + "flyonok", + "zhaiyu.zhaiyu", + "troywith77", + "ArthasTree", + "rogueduola", + "tankhanleng", + "shenhao" ] }, - "learn/Server-side/Django/Authentication": { - "modified": "2020-07-16T22:37:25.161Z", + "conflicting/Web/API/Document/hasFocus": { + "modified": "2019-03-23T23:31:56.410Z", "contributors": [ - "floodwater", - "edgar-chen", - "xixilog" + "xgqfrms-GitHub", + "kmc947373", + "sxxxsz", + "Breezewish", + "teoli", + "sunnylost" ] }, - "learn/Server-side/Django/Deployment": { - "modified": "2020-11-23T18:29:57.524Z", + "conflicting/Web/Media/Formats": { + "modified": "2019-07-03T23:42:04.646Z", "contributors": [ - "keetack", - "edgar-chen", - "yan-jin", - "xixilog" + "l613", + "zodiac-xl", + "ziyunfei" ] }, - "learn/Server-side/Django/Forms": { - "modified": "2020-07-16T22:37:34.229Z", + "conflicting/Web/HTTP/Status": { + "modified": "2019-01-16T13:20:30.376Z", "contributors": [ - "buttre", - "edgar-chen", - "xixilog" + "ziyunfei" ] }, - "learn/Server-side/Django/Generic_views": { - "modified": "2020-07-16T22:37:19.625Z", + "conflicting/Web/HTTP/CORS": { + "modified": "2019-03-23T23:14:41.414Z", "contributors": [ - "edgar-chen", - "xixilog", - "SphinxKnight" + "GerryLon", + "xgqfrms-GitHub", + "holynewbie", + "jearylee" ] }, - "learn/Server-side/Django/Introduction": { - "modified": "2020-07-16T22:36:42.459Z", + "conflicting/Learn/Getting_started_with_the_web/JavaScript_basics": { + "modified": "2019-03-23T23:35:23.323Z", "contributors": [ - "khalim", - "Nel", - "ShuangFarmer", - "xiezhedaima9591", - "chinanf-boy" + "xCss", + "KMethod", + "lifeng", + "maslak", + "Eridanus_Sora", + "ywang1724", + "reygreen1", + "teoli", + "Lyper", + "Simontechwriter" ] }, - "learn/Server-side/Django/Models": { - "modified": "2020-07-16T22:37:00.935Z", + "conflicting/Web/JavaScript/Guide/Introduction": { + "modified": "2019-03-23T23:36:14.591Z", "contributors": [ - "shawPLUSroot", - "senghongchong7", - "phdgogogo", - "colin3dmax", - "AIIEOIBD", - "zphj1987", - "cashlu", - "xixilog", - "szlh", - "chinanf-boy" + "wbamberg", + "Breezewish", + "ReyCG_sub", + "ReyCG", + "teoli", + "LieGroup", + "rogersuen" ] }, - "learn/Server-side/Django/Sessions": { - "modified": "2020-07-16T22:37:28.578Z", + "conflicting/Web/JavaScript/Guide/Introduction_6f341ba6db4b060ccbd8dce4a0d5214b": { + "modified": "2019-03-23T23:36:14.828Z", "contributors": [ - "buttre", - "edgar-chen", - "xixilog" + "MrMario", + "ReyCG_sub", + "teoli", + "LieGroup", + "rogersuen" ] }, - "learn/Server-side/Django/Testing": { - "modified": "2020-07-16T22:37:39.373Z", + "conflicting/Web/JavaScript/Guide/Regular_Expressions/Assertions": { + "modified": "2020-10-30T11:36:06.394Z", + "contributors": [ + "phone-burner" + ] + }, + "conflicting/Learn/JavaScript/Objects": { + "modified": "2020-03-12T19:38:08.916Z", + "contributors": [ + "huijing", + "SAM.L", + "NarK", + "umiyevol", + "daix6", + "ashjs", + "sabrinaluo", + "xanarry", + "fskuok", + "hackerZhang", + "hipop", + "jamesliuhk", + "awp0011", + "ryanouyang", + "yiding_he", + "teoli", + "yimity", + "shiyutang", + "xcffl" + ] + }, + "conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { + "modified": "2020-10-15T21:37:49.333Z", "contributors": [ - "edgar-chen", - "xixilog" + "fscholz", + "kameii", + "liyongleihf2006", + "fred4444source" ] }, - "learn/Server-side/Django/Tutorial_local_library_website": { - "modified": "2020-07-16T22:36:50.644Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Boolean": { + "modified": "2020-10-15T21:06:58.693Z", "contributors": [ - "zengqi", - "ddtyjmyjm", - "hstaoqian" + "zhangchen", + "keller0", + "teoli", + "AlexChao", + "ziyunfei" ] }, - "learn/Server-side/Django/django_assessment_blog": { - "modified": "2020-07-16T22:37:49.691Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/DataView": { + "modified": "2020-10-15T21:38:02.121Z", "contributors": [ - "edgar-chen" + "fscholz", + "liyongleihf2006", + "Taoja", + "mzhejiayu" ] }, - "learn/Server-side/Django/skeleton_website": { - "modified": "2020-07-16T22:36:55.364Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Date": { + "modified": "2020-10-15T21:28:32.786Z", "contributors": [ - "Nel", - "xixilog", - "ddtyjmyjm", - "MengLingqin", - "chinanf-boy", - "hstaoqian" + "zhangchen", + "imgss", + "fscholz", + "regiondavid", + "mage3k", + "Cattla", + "teoli", + "AlexChao" ] }, - "learn/Server-side/Django/web_application_security": { - "modified": "2020-07-16T22:37:47.216Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Error": { + "modified": "2019-04-02T14:33:04.306Z", "contributors": [ - "knktc", - "edgar-chen", - "xixilog" + "ngtmuzi", + "shajiquan" ] }, - "learn/Server-side/Django/主页构建": { - "modified": "2020-07-16T22:37:11.997Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/EvalError": { + "modified": "2020-10-15T21:59:36.134Z", "contributors": [ - "feko", - "mojiangyuan", - "colin3dmax", - "floodwater", - "xixilog", - "chinanf-boy" + "hwj" ] }, - "learn/Server-side/Django/开发环境": { - "modified": "2020-10-06T10:08:45.805Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Function": { + "modified": "2019-09-11T09:25:06.080Z", "contributors": [ - "kuailekai", - "silentpanda97", - "Adrian-Yan", - "q2937711", - "xixilog", - "chinanf-boy" + "Ende93", + "FrankElean", + "xiaowtz", + "DevinHe", + "teoli", + "ziyunfei", + "Oatn" ] }, - "learn/Server-side/Django/管理站点": { - "modified": "2020-07-16T22:37:06.131Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction": { + "modified": "2020-10-15T21:40:51.679Z", "contributors": [ - "Jeffxzj", - "wangfangping", - "colin3dmax", - "indv-zhu", - "chinanf-boy" + "fscholz", + "shinexyt", + "zhangchen", + "webery" ] }, - "learn/Server-side/Express_Nodejs": { - "modified": "2020-07-16T22:37:56.406Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": { + "modified": "2020-04-21T09:01:11.304Z", "contributors": [ - "hellorayza", - "百里笙歌", - "Frederick-S", - "yatace", - "edgar-chen", - "Ran_Lyu", - "longzhengxiong", - "sp900409", - "chenlexing", - "ant0x00" + "fscholz", + "liyongleihf2006" ] }, - "learn/Server-side/Express_Nodejs/Displaying_data": { - "modified": "2020-10-27T00:17:29.715Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Map": { + "modified": "2019-12-28T23:13:19.788Z", "contributors": [ - "Megrax", - "socovo", - "edgar-chen" + "wallena3", + "YaoZeyuan", + "kameii", + "chaosdog", + "webery" ] }, - "learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page": { - "modified": "2020-07-16T22:38:39.461Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Number": { + "modified": "2019-03-23T22:12:02.199Z", "contributors": [ - "woshiqiang1", - "edgar-chen" + "AlexChao" ] }, - "learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page": { - "modified": "2020-07-16T22:38:38.246Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2020-10-15T21:21:47.231Z", "contributors": [ - "edgar-chen" + "SphinxKnight", + "daihaoxin", + "zhangchen", + "wwy2018", + "Linjing", + "WizardAlice", + "ywjco", + "xgqfrms-GitHub", + "Cattla", + "scscms", + "webery", + "luoway", + "ziyunfei", + "LinusYu", + "teoli", + "iwo" ] }, - "learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge": { - "modified": "2020-07-16T22:38:39.803Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Promise": { + "modified": "2019-06-27T05:04:40.773Z", "contributors": [ - "staticfire", - "edgar-chen" + "SphinxKnight", + "cyancity", + "Bryannnnnnn", + "HenryYong", + "mountainmoon" ] }, - "learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page": { - "modified": "2020-07-16T22:38:37.044Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy": { + "modified": "2020-10-15T21:32:21.161Z", "contributors": [ - "edgar-chen" + "stack_vim", + "RainSlide", + "wallena3", + "daxiazilong", + "Bayes", + "SphinxKnight", + "myl0204", + "ziyunfei" ] }, - "learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page": { - "modified": "2020-07-16T22:38:39.148Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/RangeError": { + "modified": "2020-10-15T22:06:54.468Z", "contributors": [ - "edgar-chen" + "pea3nut" ] }, - "learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page": { - "modified": "2020-07-16T22:38:36.367Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/ReferenceError": { + "modified": "2020-10-15T22:04:38.794Z", "contributors": [ - "edgar-chen" + "Mal_akh" ] }, - "learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment": { - "modified": "2020-07-16T22:38:37.610Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/RegExp": { + "modified": "2019-07-08T23:50:51.861Z", "contributors": [ - "edgar-chen" + "teoli", + "AlexChao", + "ziyunfei" ] }, - "learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page": { - "modified": "2020-07-16T22:38:38.748Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer": { + "modified": "2020-10-15T21:58:38.272Z", "contributors": [ - "edgar-chen" + "wallena3", + "xgqfrms-GitHub" ] }, - "learn/Server-side/Express_Nodejs/Displaying_data/Home_page": { - "modified": "2020-07-16T22:38:35.735Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2020-10-15T21:27:29.084Z", "contributors": [ - "edgar-chen" + "gqbre", + "pabloyshi", + "zhazhjie", + "zqyue", + "Ende93", + "midare", + "Yuxuan_Jiang", + "micheal-death", + "xgqfrms-GitHub", + "Hugh", + "terrycafe520", + "qianjiahao", + "paddingme", + "teoli", + "ziyunfei" ] }, - "learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template": { - "modified": "2020-10-27T06:26:13.607Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Symbol": { + "modified": "2020-10-15T21:42:54.702Z", "contributors": [ - "Megrax", - "edgar-chen" + "zhangchen", + "purple_force" ] }, - "learn/Server-side/Express_Nodejs/Displaying_data/Template_primer": { - "modified": "2020-07-16T22:38:34.671Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError": { + "modified": "2019-03-23T23:03:07.644Z", "contributors": [ - "edgar-chen" + "Ende93", + "yenshen" ] }, - "learn/Server-side/Express_Nodejs/Displaying_data/flow_control_using_async": { - "modified": "2020-07-16T22:38:33.746Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/TypedArray": { + "modified": "2019-03-23T22:21:58.417Z", "contributors": [ - "edgar-chen" + "wizardforcel", + "liyongleihf2006" ] }, - "learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry": { - "modified": "2020-09-24T11:45:05.090Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/TypeError": { + "modified": "2020-10-15T21:39:50.956Z", "contributors": [ - "Mdreame", - "edgar-chen" + "Tao-Quixote", + "coolfireWang", + "Ende93" ] }, - "learn/Server-side/Express_Nodejs/Introduction": { - "modified": "2020-07-16T22:38:13.912Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/URIError": { + "modified": "2020-10-15T22:03:36.123Z", "contributors": [ - "Roy-Tian", - "hehe1111", - "sun603", - "janyin", - "biblade", - "outman", - "congrongdeyu", - "codeofjackie", - "edgar-chen", - "bybiuhappy", - "ShirleyM", - "lofayo", - "chengzhibing" + "Tao-Quixote" ] }, - "learn/Server-side/Express_Nodejs/Tutorial_local_library_website": { - "modified": "2020-07-16T22:38:17.531Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap": { + "modified": "2019-03-23T22:23:35.449Z", "contributors": [ - "Roy-Tian", - "chudongsong", - "janyin", - "edgar-chen" + "hhxxhg", + "xdsnet" ] }, - "learn/Server-side/Express_Nodejs/deployment": { - "modified": "2020-07-16T22:38:50.827Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet": { + "modified": "2019-10-09T00:35:58.794Z", "contributors": [ - "edgar-chen", - "codeofjackie" + "sky-gg", + "SphinxKnight", + "teoli", + "ziyunfei" ] }, - "learn/Server-side/Express_Nodejs/development_environment": { - "modified": "2020-07-16T22:38:02.448Z", + "conflicting/Web/JavaScript/Reference/Operators": { + "modified": "2020-10-15T21:31:37.464Z", "contributors": [ - "snaildarter", - "phili-p", - "Roy-Tian", - "sun603", - "yijie_sun", - "yaoqtan", - "jianchao_xue", - "edgar-chen", - "BarryLiu1995" + "srq18211", + "RainSlide", + "lmislm", + "Braveheartforyou", + "zhangchen", + "xixigeek", + "XHMM", + "ZhengAu", + "aimiy", + "xhlwill", + "xgqfrms-GitHub", + "yayayhoo", + "xiaofengling", + "git123hub", + "AnnAngela", + "tiansh", + "AlexChao" ] }, - "learn/Server-side/Express_Nodejs/forms": { - "modified": "2020-08-07T05:55:45.402Z", + "conflicting/Web/JavaScript/Reference/Operators_8d54701de06af40a7c984517cbe87b3e": { + "modified": "2020-10-15T21:29:35.850Z", "contributors": [ - "yunxiaomeng", - "grape", - "hdh296", - "socovo", - "edgar-chen", - "zhangyu911013" + "AchooLuv", + "wbamberg", + "cuixiping", + "adoreCherish", + "yofine", + "AlexChao", + "SphinxKnight" ] }, - "learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form": { - "modified": "2020-07-16T22:38:46.101Z", + "conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560": { + "modified": "2020-03-12T19:40:23.030Z", "contributors": [ - "edgar-chen" + "xmasuhai", + "GreedyPig", + "parabolazz", + "ywjco", + "xgqfrms-GitHub", + "clcy1243", + "tiansh", + "AlexChao" ] }, - "learn/Server-side/Express_Nodejs/forms/Create_author_form": { - "modified": "2020-07-16T22:38:44.657Z", + "conflicting/Web/JavaScript/Reference/Operators_310dc67549939233c3d18a8fa2cdbb23": { + "modified": "2020-03-12T19:41:27.611Z", "contributors": [ - "edgar-chen" + "ch4zzzzz", + "ubuntugx", + "GreedyPig", + "gongzhibin", + "choukin", + "blue0125", + "Ende93", + "beiweiqiang", + "qianjiahao" ] }, - "learn/Server-side/Express_Nodejs/forms/Create_book_form": { - "modified": "2020-07-16T22:38:45.191Z", + "conflicting/Web/JavaScript/Reference/Operators_f71733c8e7001a29c3ec40d8522a4aca": { + "modified": "2020-10-15T21:22:11.681Z", "contributors": [ + "HermitSun", + "git710", + "RainSlide", + "withoutmelv", "SphinxKnight", - "UPUP", - "edgar-chen" + "Kaijun", + "fphonor", + "zhangchen", + "YoungChen", + "zhuangyin", + "yenshen", + "teoli", + "MoltBoy" ] }, - "learn/Server-side/Express_Nodejs/forms/Create_genre_form": { - "modified": "2020-07-16T22:38:43.645Z", + "conflicting/Web/JavaScript/Reference/Lexical_grammar": { + "modified": "2019-03-23T23:46:04.954Z", "contributors": [ - "edgar-chen" + "fangnanjun", + "Haichao", + "teoli", + "Mickeyboy" ] }, - "learn/Server-side/Express_Nodejs/forms/Delete_author_form": { - "modified": "2020-07-16T22:38:46.761Z", + "conflicting/Web/JavaScript/Reference/Statements/switch": { + "modified": "2020-10-15T21:40:53.796Z", "contributors": [ - "edgar-chen" + "hellokidder", + "zhangchen", + "binguanghe", + "Lukas-LiuYi", + "fscholz" ] }, - "learn/Server-side/Express_Nodejs/forms/Update_Book_form": { - "modified": "2020-07-16T22:38:48.713Z", + "conflicting/Web/Progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f": { + "modified": "2019-03-18T20:52:05.037Z", "contributors": [ - "edgar-chen" + "chrisdavidmills", + "liminjun", + "xgqfrms-GitHub" ] }, - "learn/Server-side/Express_Nodejs/mongoose": { - "modified": "2020-08-12T09:45:03.710Z", + "conflicting/Web/Progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67": { + "modified": "2019-03-18T20:52:04.596Z", "contributors": [ - "Dazhuzhu-github", - "vpstarter", - "百里笙歌", - "socovo", - "Roy-Tian", - "edgar-chen" + "chrisdavidmills", + "liminjun" ] }, - "learn/Server-side/Express_Nodejs/routes": { - "modified": "2020-10-23T08:33:36.699Z", + "conflicting/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks": { + "modified": "2019-03-18T20:52:04.806Z", "contributors": [ - "Hawaii_zzapi", - "百里笙歌", - "Roy-Tian", - "jianchao_xue", - "edgar-chen" + "chrisdavidmills", + "liminjun" ] }, - "learn/Server-side/Express_Nodejs/skeleton_website": { - "modified": "2020-08-26T10:22:11.122Z", + "conflicting/Web/Progressive_web_apps/Introduction": { + "modified": "2019-04-18T12:23:20.526Z", "contributors": [ - "Tiny-Wei", - "Roy-Tian", - "edgar-chen" + "chenronghui" ] }, - "learn/Server-side/First_steps": { - "modified": "2020-07-16T22:36:11.413Z", + "conflicting/Web/HTTP/CSP": { + "modified": "2019-08-30T07:28:26.257Z", "contributors": [ - "DaniellaAngel", - "edgar-chen", - "ArcherGrey", - "chf007", - "tinyCucumber", - "07akioni" + "ziyunfei", + "Breezewish", + "zhangzipeng", + "R00tgrok" ] }, - "learn/Server-side/First_steps/Client-Server_overview": { - "modified": "2020-07-16T22:36:22.601Z", + "conflicting/Web/HTTP/CSP_aeae68a149c6fbe64e541cbdcd6ed5c5": { + "modified": "2019-08-30T07:28:05.612Z", "contributors": [ - "DaniellaAngel", - "JuleHenriHu", - "WindLo", - "yijie_sun", - "ZhuZhuDrinkMilk", - "edgar-chen", - "ShuangFarmer", - "whocare", - "BarryLiu1995", - "yuantongkang", - "liminjun", - "zhuangyin", - "old2sun", - "ziyouwa", - "Zeng" + "LeonDWong", + "lcxfs1991", + "Breezewish", + "ziyunfei" ] }, - "learn/Server-side/First_steps/Introduction": { - "modified": "2020-09-13T05:53:31.575Z", + "conflicting/Web/HTTP/CSP_9583294484b49ac391995b392c2b1ae1": { + "modified": "2019-03-23T23:03:20.586Z", "contributors": [ - "dake0805", - "vicco", - "yijie_sun", - "zhangchen", - "Nothosaurs", - "lonelee", - "diaotai", - "old2sun", - "ziyouwa", - "Zeng" + "ziyunfei", + "zhangzipeng" ] }, - "learn/Server-side/First_steps/Web_frameworks": { - "modified": "2020-07-16T22:36:26.173Z", + "conflicting/Web/Web_Components/Using_shadow_DOM": { + "modified": "2019-03-23T22:29:42.834Z", "contributors": [ - "mojiangyuan", - "DaniellaAngel", - "hikigaya58", - "tongwenwu", - "zhuzhangliang", - "edgar-chen", - "JamesZhange", - "ddtyjmyjm", - "Phoenixkaze", - "Jhongwun", - "Stevenhwang", - "yinzhuoya", - "old2sun", - "Zeng" + "xgqfrms-GitHub", + "fsx950223", + "floraluo", + "jchnxu" ] }, - "learn/Server-side/First_steps/Website_security": { - "modified": "2020-10-20T04:30:22.097Z", + "conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3": { + "modified": "2019-03-18T20:42:39.198Z", "contributors": [ - "Megrax", - "mayhjx", - "yi2sun", - "ZhuZhuDrinkMilk", - "goat91", - "Zeng" + "wbamberg", + "fscholz", + "jiahui", + "zhenhua32", + "Meteormatt" ] }, - "learn/Web_Mechanics": { - "modified": "2020-07-16T22:22:13.542Z", + "conflicting/Web/API/File_and_Directory_Entries_API/Introduction": { + "modified": "2019-03-23T23:17:06.579Z", "contributors": [ - "jdk137", - "Ende93", - "yfdyh000", - "yanbinlucy" + "ziyunfei" ] }, - "使用Javascript和DOM_Interfaces来处理HTML": { - "modified": "2020-10-08T06:13:28.865Z", + "conflicting/Web/API/WebRTC_API_d8621144cbc61520339c3b10c61731f0": { + "modified": "2019-03-23T23:36:50.162Z", "contributors": [ - "ruiyang0012", - "crowphy", - "newued", - "helloguangxue", - "Jcrjia", - "Transfan", - "Laser", - "Carrie zhxj", - "Mgjbot", - "Surfchen", - "Kakurady", - "Heagle" + "lxyion", + "acgeeker", + "alayasix" ] } } \ No newline at end of file diff --git a/files/zh-cn/conflicting/glossary/chrome/index.html b/files/zh-cn/conflicting/glossary/chrome/index.html index a40b228f6b..7c563bc814 100644 --- a/files/zh-cn/conflicting/glossary/chrome/index.html +++ b/files/zh-cn/conflicting/glossary/chrome/index.html @@ -1,10 +1,11 @@ --- title: Chrome -slug: Chrome +slug: conflicting/Glossary/Chrome tags: - Toolkit API translation_of: Glossary/Chrome translation_of_original: Chrome +original_slug: Chrome ---

Chrome 这个单词在 Mozilla 的技术中有着多重含义。

diff --git a/files/zh-cn/conflicting/glossary/doctype/index.html b/files/zh-cn/conflicting/glossary/doctype/index.html index 543d822170..f93b74d8ba 100644 --- a/files/zh-cn/conflicting/glossary/doctype/index.html +++ b/files/zh-cn/conflicting/glossary/doctype/index.html @@ -1,8 +1,9 @@ --- title: DTD -slug: Glossary/DTD +slug: conflicting/Glossary/Doctype translation_of: Glossary/Doctype translation_of_original: Glossary/DTD +original_slug: Glossary/DTD ---

{{page("/en-US/docs/Glossary/Doctype")}}

diff --git a/files/zh-cn/conflicting/learn/common_questions/index.html b/files/zh-cn/conflicting/learn/common_questions/index.html index 53aac91402..0eefb8f643 100644 --- a/files/zh-cn/conflicting/learn/common_questions/index.html +++ b/files/zh-cn/conflicting/learn/common_questions/index.html @@ -1,10 +1,11 @@ --- title: Web 工程学 -slug: learn/Web_Mechanics +slug: conflicting/Learn/Common_questions tags: - Web 工程学 - 初学者 translation_of: Learn/Common_questions translation_of_original: Learn/Web_Mechanics +original_slug: learn/Web_Mechanics ---

请访问 常见问题

diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html index e5a3bae8a0..a5ab6d1ebe 100644 --- a/files/zh-cn/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/zh-cn/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -1,8 +1,9 @@ --- title: 层叠和继承 -slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +slug: conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +original_slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---

{{ CSSTutorialTOC() }}

diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/index.html index 0bfb7e2ed5..9c20acc77b 100644 --- a/files/zh-cn/conflicting/learn/css/building_blocks/index.html +++ b/files/zh-cn/conflicting/learn/css/building_blocks/index.html @@ -1,8 +1,9 @@ --- title: 盒模型 -slug: Web/Guide/CSS/Getting_started/Boxes +slug: conflicting/Learn/CSS/Building_blocks translation_of: Learn/CSS/Building_blocks translation_of_original: Web/Guide/CSS/Getting_started/Boxes +original_slug: Web/Guide/CSS/Getting_started/Boxes ---

{{ CSSTutorialTOC() }}

diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/selectors/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/selectors/index.html index 69f0700b19..1ab629b72f 100644 --- a/files/zh-cn/conflicting/learn/css/building_blocks/selectors/index.html +++ b/files/zh-cn/conflicting/learn/css/building_blocks/selectors/index.html @@ -1,8 +1,9 @@ --- title: 选择器 -slug: Web/Guide/CSS/Getting_started/Selectors +slug: conflicting/Learn/CSS/Building_blocks/Selectors translation_of: Learn/CSS/Building_blocks/Selectors translation_of_original: Web/Guide/CSS/Getting_started/Selectors +original_slug: Web/Guide/CSS/Getting_started/Selectors ---

{{ CSSTutorialTOC() }}

diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/styling_tables/index.html index b6b4859e99..091b9458f9 100644 --- a/files/zh-cn/conflicting/learn/css/building_blocks/styling_tables/index.html +++ b/files/zh-cn/conflicting/learn/css/building_blocks/styling_tables/index.html @@ -1,8 +1,9 @@ --- title: 表格 -slug: Web/Guide/CSS/Getting_started/Tables +slug: conflicting/Learn/CSS/Building_blocks/Styling_tables translation_of: Learn/CSS/Building_blocks/Styling_tables translation_of_original: Web/Guide/CSS/Getting_started/Tables +original_slug: Web/Guide/CSS/Getting_started/Tables ---

{{CSSTutorialTOC}}{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout", "布局")}}

diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/values_and_units/index.html index a9348bd9bd..680e46c676 100644 --- a/files/zh-cn/conflicting/learn/css/building_blocks/values_and_units/index.html +++ b/files/zh-cn/conflicting/learn/css/building_blocks/values_and_units/index.html @@ -1,8 +1,9 @@ --- title: Color -slug: Web/Guide/CSS/Getting_started/Color +slug: conflicting/Learn/CSS/Building_blocks/Values_and_units translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors translation_of_original: Web/Guide/CSS/Getting_started/Color +original_slug: Web/Guide/CSS/Getting_started/Color ---

{{ CSSTutorialTOC() }}

diff --git a/files/zh-cn/conflicting/learn/css/css_layout/index.html b/files/zh-cn/conflicting/learn/css/css_layout/index.html index ecd91f80e1..6e5cc4ae53 100644 --- a/files/zh-cn/conflicting/learn/css/css_layout/index.html +++ b/files/zh-cn/conflicting/learn/css/css_layout/index.html @@ -1,8 +1,9 @@ --- title: 布局 -slug: Web/Guide/CSS/Getting_started/Layout +slug: conflicting/Learn/CSS/CSS_layout translation_of: Learn/CSS/CSS_layout translation_of_original: Web/Guide/CSS/Getting_started/Layout +original_slug: Web/Guide/CSS/Getting_started/Layout ---

{{ CSSTutorialTOC() }}

diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_is_structured/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_is_structured/index.html index 17553c5013..7f731ee088 100644 --- a/files/zh-cn/conflicting/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/zh-cn/conflicting/learn/css/first_steps/how_css_is_structured/index.html @@ -1,8 +1,9 @@ --- title: 创建可读性良好的CSS -slug: Web/Guide/CSS/Getting_started/Readable_CSS +slug: conflicting/Learn/CSS/First_steps/How_CSS_is_structured translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +original_slug: Web/Guide/CSS/Getting_started/Readable_CSS ---

{{ CSSTutorialTOC() }}

diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works/index.html index fce3091715..5bf2a3b516 100644 --- a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works/index.html +++ b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works/index.html @@ -1,8 +1,9 @@ --- title: CSS如何工作 -slug: Web/Guide/CSS/Getting_started/How_CSS_works +slug: conflicting/Learn/CSS/First_steps/How_CSS_works translation_of: Learn/CSS/First_steps/How_CSS_works translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +original_slug: Web/Guide/CSS/Getting_started/How_CSS_works ---

{{ CSSTutorialTOC() }}

diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html index ca5092f2af..918372bd48 100644 --- a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html +++ b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html @@ -1,12 +1,14 @@ --- title: 为何使用CSS？ -slug: Web/Guide/CSS/Getting_started/Why_use_CSS +slug: >- + conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 tags: - CSS - - 'CSS:入门' + - CSS:入门 - NeedsLiveSample translation_of: Learn/CSS/First_steps/How_CSS_works translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +original_slug: Web/Guide/CSS/Getting_started/Why_use_CSS ---

{{ CSSTutorialTOC() }}

diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html index 7fcb01c0b0..973ec37d71 100644 --- a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html +++ b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html @@ -1,8 +1,10 @@ --- title: What is CSS -slug: Web/Guide/CSS/Getting_started/What_is_CSS +slug: >- + conflicting/Learn/CSS/First_steps/How_CSS_works_b66915031fb62b5fee1201086144e209 translation_of: Learn/CSS/First_steps/How_CSS_works translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +original_slug: Web/Guide/CSS/Getting_started/What_is_CSS ---
{{CSSTutorialTOC}}
diff --git a/files/zh-cn/conflicting/learn/css/first_steps/index.html b/files/zh-cn/conflicting/learn/css/first_steps/index.html index 585243aa2a..d18a052149 100644 --- a/files/zh-cn/conflicting/learn/css/first_steps/index.html +++ b/files/zh-cn/conflicting/learn/css/first_steps/index.html @@ -1,9 +1,9 @@ --- title: CSS入门教程 -slug: Web/Guide/CSS/Getting_started +slug: conflicting/Learn/CSS/First_steps tags: - CSS - - 'CSS:Getting_Started' + - CSS:Getting_Started - CSS入门 - CSS教程 - Web @@ -11,6 +11,7 @@ tags: - 教程 translation_of: Learn/CSS/First_steps translation_of_original: Web/Guide/CSS/Getting_started +original_slug: Web/Guide/CSS/Getting_started ---

 

diff --git a/files/zh-cn/conflicting/learn/css/styling_text/fundamentals/index.html b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals/index.html index fd67fc382c..730c8cbca6 100644 --- a/files/zh-cn/conflicting/learn/css/styling_text/fundamentals/index.html +++ b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals/index.html @@ -1,11 +1,12 @@ --- title: 理解下划线 -slug: Understanding_Underlines +slug: conflicting/Learn/CSS/Styling_text/Fundamentals tags: - - 'CSS:Articles' + - CSS:Articles translation_of: >- Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration translation_of_original: Understanding_Underlines +original_slug: Understanding_Underlines ---

对于 Web 设计者来说, 想移除其设计中某些 (或全部) 超链接的下划线是相当常见的事情。但是由于在过去浏览器中的一些不标准的行为, 一些人在删除超链接中下划线的正确方法方面存在一些问题。最常见的错误是这样做：

diff --git a/files/zh-cn/conflicting/learn/css/styling_text/fundamentals_5a3f2ce7cc4f23ec431e57a447af0711/index.html b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals_5a3f2ce7cc4f23ec431e57a447af0711/index.html index f7d1d38b23..128204ecbc 100644 --- a/files/zh-cn/conflicting/learn/css/styling_text/fundamentals_5a3f2ce7cc4f23ec431e57a447af0711/index.html +++ b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals_5a3f2ce7cc4f23ec431e57a447af0711/index.html @@ -1,8 +1,10 @@ --- title: 文本样式 -slug: Web/Guide/CSS/Getting_started/Text_styles +slug: >- + conflicting/Learn/CSS/Styling_text/Fundamentals_5a3f2ce7cc4f23ec431e57a447af0711 translation_of: Learn/CSS/Styling_text/Fundamentals translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +original_slug: Web/Guide/CSS/Getting_started/Text_styles ---

{{ CSSTutorialTOC() }}

diff --git a/files/zh-cn/conflicting/learn/css/styling_text/styling_lists/index.html b/files/zh-cn/conflicting/learn/css/styling_text/styling_lists/index.html index 8a85655517..61655596da 100644 --- a/files/zh-cn/conflicting/learn/css/styling_text/styling_lists/index.html +++ b/files/zh-cn/conflicting/learn/css/styling_text/styling_lists/index.html @@ -1,8 +1,9 @@ --- title: Lists -slug: Web/Guide/CSS/Getting_started/Lists +slug: conflicting/Learn/CSS/Styling_text/Styling_lists translation_of: Learn/CSS/Styling_text/Styling_lists translation_of_original: Web/Guide/CSS/Getting_started/Lists +original_slug: Web/Guide/CSS/Getting_started/Lists ---

{{ CSSTutorialTOC() }}

diff --git a/files/zh-cn/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html b/files/zh-cn/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html index 67056c679b..45171f78c7 100644 --- a/files/zh-cn/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/zh-cn/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html @@ -1,10 +1,11 @@ --- title: 起步(Javascript 教程) -slug: Web/JavaScript/Getting_Started +slug: conflicting/Learn/Getting_started_with_the_web/JavaScript_basics tags: - bug-840092 translation_of: Learn/Getting_started_with_the_web/JavaScript_basics translation_of_original: Web/JavaScript/Getting_Started +original_slug: Web/JavaScript/Getting_Started ---

JavaScript是什么?

diff --git a/files/zh-cn/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/zh-cn/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html index fd51ef502f..81d56d0055 100644 --- a/files/zh-cn/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ b/files/zh-cn/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -1,6 +1,6 @@ --- title: Email links -slug: Web/Guide/HTML/Email_links +slug: conflicting/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks tags: - HTML5 - SEO @@ -9,6 +9,7 @@ tags: - mailto translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links translation_of_original: Web/Guide/HTML/Email_links +original_slug: Web/Guide/HTML/Email_links ---

这往往是有益的Web站点能够创建链接或按钮，点击后，打开一个新的出站电子邮件。例如，这可能会创造一个“联系我们”按钮时使用。这是使用完成{{HTMLElement("a")}} 元素和mailto URL方案。.

diff --git a/files/zh-cn/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/zh-cn/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index f1ebacd184..b2537fe024 100644 --- a/files/zh-cn/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/zh-cn/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -1,6 +1,6 @@ --- title: 使用 HTML5 音频和视频 -slug: Web/Guide/HTML/Using_HTML5_audio_and_video +slug: conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content tags: - Flash - HTML @@ -17,6 +17,7 @@ tags: - 音频 translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video +original_slug: Web/Guide/HTML/Using_HTML5_audio_and_video ---

HTML5 通过HTML标签“audio”和“video”来支持嵌入式的媒体，使开发者能够方便地将媒体嵌入到HTML文档中。

diff --git a/files/zh-cn/conflicting/learn/index.html b/files/zh-cn/conflicting/learn/index.html index 9e2e40d682..33efe52747 100644 --- a/files/zh-cn/conflicting/learn/index.html +++ b/files/zh-cn/conflicting/learn/index.html @@ -1,8 +1,9 @@ --- title: 如何建设一个网站 -slug: Learn/tutorial/How_to_build_a_web_site +slug: conflicting/Learn translation_of: Learn translation_of_original: Learn/tutorial/How_to_build_a_web_site +original_slug: Learn/tutorial/How_to_build_a_web_site ---

  当我们在学习网页设计时，许多人都希望尽快建设一个属于自己的网站。为了让你建站之路更平坦，我们已经缩小了你所需要的最低限度的知识。

diff --git a/files/zh-cn/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/zh-cn/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html index 1f53ff70ba..91b8d79a01 100644 --- a/files/zh-cn/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ b/files/zh-cn/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -1,8 +1,9 @@ --- title: JavaScript 与 CSS -slug: Web/Guide/CSS/Getting_started/JavaScript +slug: conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents translation_of_original: Web/Guide/CSS/Getting_started/JavaScript +original_slug: Web/Guide/CSS/Getting_started/JavaScript ---

{{ CSSTutorialTOC() }}

diff --git a/files/zh-cn/conflicting/learn/javascript/objects/index.html b/files/zh-cn/conflicting/learn/javascript/objects/index.html index 1ae4554c63..9ae0bde819 100644 --- a/files/zh-cn/conflicting/learn/javascript/objects/index.html +++ b/files/zh-cn/conflicting/learn/javascript/objects/index.html @@ -1,6 +1,6 @@ --- title: JavaScript面向对象简介 -slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +slug: conflicting/Learn/JavaScript/Objects tags: - JavaScript - OOP @@ -13,6 +13,7 @@ tags: - 面向对象 translation_of: Learn/JavaScript/Objects translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +original_slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---
{{jsSidebar("Introductory")}}
diff --git a/files/zh-cn/conflicting/learn/server-side/django/index.html b/files/zh-cn/conflicting/learn/server-side/django/index.html index 95ec82f251..86ecd5bb6c 100644 --- a/files/zh-cn/conflicting/learn/server-side/django/index.html +++ b/files/zh-cn/conflicting/learn/server-side/django/index.html @@ -1,11 +1,12 @@ --- title: Python -slug: Python +slug: conflicting/Learn/Server-side/Django tags: - Python - Services translation_of: Learn/Server-side/Django translation_of_original: Python +original_slug: Python ---

Python 是一款直译式脚本语言，支持包括 Linux、Mac OS X 和 Microsoft Windows 在内的多种平台。

diff --git a/files/zh-cn/conflicting/learn_30ccce5e65b5ce795fc2e288fe9d012b/index.html b/files/zh-cn/conflicting/learn_30ccce5e65b5ce795fc2e288fe9d012b/index.html index 922d45fbc1..757accbc32 100644 --- a/files/zh-cn/conflicting/learn_30ccce5e65b5ce795fc2e288fe9d012b/index.html +++ b/files/zh-cn/conflicting/learn_30ccce5e65b5ce795fc2e288fe9d012b/index.html @@ -1,12 +1,13 @@ --- title: Tutorials -slug: Learn/tutorial +slug: conflicting/Learn_30ccce5e65b5ce795fc2e288fe9d012b tags: - Index - NeedsTranslation - TopicStub translation_of: Learn translation_of_original: Learn/tutorial +original_slug: Learn/tutorial ---

It's great to know about Web technologies and the concepts behind them, but at some point it's time to turn theory into practice. We've set up some pathways that will help you get results with Web technology and enjoy the power you unlock as you learn!

diff --git a/files/zh-cn/conflicting/mdn/contribute/index.html b/files/zh-cn/conflicting/mdn/contribute/index.html index 8e298ed29b..2bdaafa3d0 100644 --- a/files/zh-cn/conflicting/mdn/contribute/index.html +++ b/files/zh-cn/conflicting/mdn/contribute/index.html @@ -1,7 +1,8 @@ --- -title: 'MDC:How to Help' -slug: 'MDC:怎样进行帮助' +title: MDC:How to Help +slug: conflicting/MDN/Contribute translation_of: MDN/Contribute -translation_of_original: 'MDC:How_to_Help' +translation_of_original: MDC:How_to_Help +original_slug: MDC:怎样进行帮助 ---

你好，世界！

diff --git a/files/zh-cn/conflicting/mdn/guidelines/css_style_guide/index.html b/files/zh-cn/conflicting/mdn/guidelines/css_style_guide/index.html index b2b145fe60..1398443c47 100644 --- a/files/zh-cn/conflicting/mdn/guidelines/css_style_guide/index.html +++ b/files/zh-cn/conflicting/mdn/guidelines/css_style_guide/index.html @@ -1,8 +1,9 @@ --- title: 内容块 -slug: MDN/Guidelines/Content_blocks +slug: conflicting/MDN/Guidelines/CSS_style_guide translation_of: MDN/Guidelines/CSS_style_guide translation_of_original: MDN/Structures/Content_blocks +original_slug: MDN/Guidelines/Content_blocks ---
{{MDNSidebar}}

This pages lists reusable content blocks.

diff --git a/files/zh-cn/conflicting/mozilla/add-ons/webextensions/user_interface/index.html b/files/zh-cn/conflicting/mozilla/add-ons/webextensions/user_interface/index.html index 0aaec74b1f..afd1b849ca 100644 --- a/files/zh-cn/conflicting/mozilla/add-ons/webextensions/user_interface/index.html +++ b/files/zh-cn/conflicting/mozilla/add-ons/webextensions/user_interface/index.html @@ -1,8 +1,9 @@ --- title: 用户界面元素 -slug: Mozilla/Add-ons/WebExtensions/用户界面元素 +slug: conflicting/Mozilla/Add-ons/WebExtensions/user_interface translation_of: Mozilla/Add-ons/WebExtensions/user_interface translation_of_original: Mozilla/Add-ons/WebExtensions/User_interface_components +original_slug: Mozilla/Add-ons/WebExtensions/用户界面元素 ---
{{AddonSidebar}}
diff --git a/files/zh-cn/conflicting/tools/keyboard_shortcuts/index.html b/files/zh-cn/conflicting/tools/keyboard_shortcuts/index.html index f1169710b4..c7a388f299 100644 --- a/files/zh-cn/conflicting/tools/keyboard_shortcuts/index.html +++ b/files/zh-cn/conflicting/tools/keyboard_shortcuts/index.html @@ -1,8 +1,9 @@ --- title: 使用源代码编辑器 -slug: Tools/Using_the_Source_Editor +slug: conflicting/tools/Keyboard_shortcuts translation_of: tools/Keyboard_shortcuts#Source_editor translation_of_original: Tools/Using_the_Source_Editor +original_slug: Tools/Using_the_Source_Editor ---
{{ToolsSidebar}}

源代码编辑器是一个编辑器组件,由源editor.jsm的Java Script代码模块的提供,这是共享的几个开发工具,包括暂存器和样式编辑器。它也可以被使用的Firefox扩展。本文说明如何使用编辑器来编辑文本。.

键盘命令

diff --git a/files/zh-cn/conflicting/tools/performance/index.html b/files/zh-cn/conflicting/tools/performance/index.html index e2f7da543c..a6187179d2 100644 --- a/files/zh-cn/conflicting/tools/performance/index.html +++ b/files/zh-cn/conflicting/tools/performance/index.html @@ -1,8 +1,9 @@ --- title: JavaScript Profiler -slug: Tools/Profiler +slug: conflicting/Tools/Performance translation_of: Tools/Performance translation_of_original: Tools/Profiler +original_slug: Tools/Profiler ---
{{ToolsSidebar}}

使用Profiler工具找到你的JavaScript代码的瓶颈. Profiler会定期统计JavaScript样本的堆栈信息.

diff --git a/files/zh-cn/conflicting/web/accessibility/index.html b/files/zh-cn/conflicting/web/accessibility/index.html index b01b7be6dd..061aae9a6e 100644 --- a/files/zh-cn/conflicting/web/accessibility/index.html +++ b/files/zh-cn/conflicting/web/accessibility/index.html @@ -1,10 +1,11 @@ --- title: Web Development -slug: Web/Accessibility/Web_Development +slug: conflicting/Web/Accessibility tags: - 网页无障碍访问 translation_of: Web/Accessibility translation_of_original: Web/Accessibility/Web_Development +original_slug: Web/Accessibility/Web_Development ---

本篇文档为开发者提供了有关网站无障碍访问以及XUL无障碍开发的更多信息。

diff --git a/files/zh-cn/conflicting/web/api/canvas_api/tutorial/index.html b/files/zh-cn/conflicting/web/api/canvas_api/tutorial/index.html index 3cef2b94e8..f81a2be43c 100644 --- a/files/zh-cn/conflicting/web/api/canvas_api/tutorial/index.html +++ b/files/zh-cn/conflicting/web/api/canvas_api/tutorial/index.html @@ -1,8 +1,9 @@ --- title: Drawing graphics with canvas -slug: Web/API/Canvas_API/Drawing_graphics_with_canvas +slug: conflicting/Web/API/Canvas_API/Tutorial translation_of: Web/API/Canvas_API/Tutorial translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas +original_slug: Web/API/Canvas_API/Drawing_graphics_with_canvas ---

本文大部分（但不包括关于绘制窗体部分的文档）已经被包含到更详尽的Canvas教程中，该页面因为现在已经显得多余可能会被链接到那里，但是某些信息可能仍然是十分有用的。

diff --git a/files/zh-cn/conflicting/web/api/crypto/getrandomvalues/index.html b/files/zh-cn/conflicting/web/api/crypto/getrandomvalues/index.html index 1366009032..3fd5c0018d 100644 --- a/files/zh-cn/conflicting/web/api/crypto/getrandomvalues/index.html +++ b/files/zh-cn/conflicting/web/api/crypto/getrandomvalues/index.html @@ -1,8 +1,9 @@ --- title: RandomSource -slug: Web/API/RandomSource +slug: conflicting/Web/API/Crypto/getRandomValues translation_of: Web/API/Crypto/getRandomValues translation_of_original: Web/API/RandomSource +original_slug: Web/API/RandomSource ---

{{APIRef("Web Crypto API")}}

diff --git a/files/zh-cn/conflicting/web/api/document/characterset/index.html b/files/zh-cn/conflicting/web/api/document/characterset/index.html index 00701e8acf..ce06fbc644 100644 --- a/files/zh-cn/conflicting/web/api/document/characterset/index.html +++ b/files/zh-cn/conflicting/web/api/document/characterset/index.html @@ -1,8 +1,9 @@ --- title: document.inputEncoding -slug: Web/API/Document/inputEncoding +slug: conflicting/Web/API/Document/characterSet translation_of: Web/API/Document/characterSet translation_of_original: Web/API/Document/inputEncoding +original_slug: Web/API/Document/inputEncoding ---

{{ ApiRef() }} {{ deprecated_header() }}

概述

diff --git a/files/zh-cn/conflicting/web/api/document/createevent/index.html b/files/zh-cn/conflicting/web/api/document/createevent/index.html index 8b9c249c71..84d91c4dec 100644 --- a/files/zh-cn/conflicting/web/api/document/createevent/index.html +++ b/files/zh-cn/conflicting/web/api/document/createevent/index.html @@ -1,6 +1,6 @@ --- title: Event.createEvent() -slug: Web/API/Event/createEvent +slug: conflicting/Web/API/Document/createEvent tags: - DOM - Event @@ -8,6 +8,7 @@ tags: - Method translation_of: Web/API/Document/createEvent translation_of_original: Web/API/Event/createEvent +original_slug: Web/API/Event/createEvent ---

{{APIRef("DOM")}}

diff --git a/files/zh-cn/conflicting/web/api/document/hasfocus/index.html b/files/zh-cn/conflicting/web/api/document/hasfocus/index.html index df29adde76..db40737695 100644 --- a/files/zh-cn/conflicting/web/api/document/hasfocus/index.html +++ b/files/zh-cn/conflicting/web/api/document/hasfocus/index.html @@ -1,6 +1,6 @@ --- title: HTML 焦点管理 -slug: Web/HTML/Focus_management_in_HTML +slug: conflicting/Web/API/Document/hasFocus tags: - DOM - HTML @@ -8,6 +8,7 @@ tags: - 焦点 translation_of: Web/API/Document/hasFocus translation_of_original: Web/HTML/Focus_management_in_HTML +original_slug: Web/HTML/Focus_management_in_HTML ---

重定向 Document.hasFocus()

diff --git a/files/zh-cn/conflicting/web/api/document_object_model/index.html b/files/zh-cn/conflicting/web/api/document_object_model/index.html index 80f115abfd..d7a4164ee9 100644 --- a/files/zh-cn/conflicting/web/api/document_object_model/index.html +++ b/files/zh-cn/conflicting/web/api/document_object_model/index.html @@ -1,8 +1,9 @@ --- title: 前言 -slug: Web/API/Document_Object_Model/Preface +slug: conflicting/Web/API/Document_Object_Model translation_of: Web/API/Document_Object_Model translation_of_original: Web/API/Document_Object_Model/Preface +original_slug: Web/API/Document_Object_Model/Preface ---

{{ ApiRef() }}

关于此参考文档

diff --git a/files/zh-cn/conflicting/web/api/document_object_model_dd00a71ceceac547ab464128db6bd8ef/index.html b/files/zh-cn/conflicting/web/api/document_object_model_dd00a71ceceac547ab464128db6bd8ef/index.html index e09b7ab597..285ced6f96 100644 --- a/files/zh-cn/conflicting/web/api/document_object_model_dd00a71ceceac547ab464128db6bd8ef/index.html +++ b/files/zh-cn/conflicting/web/api/document_object_model_dd00a71ceceac547ab464128db6bd8ef/index.html @@ -1,6 +1,6 @@ --- title: DOM 开发者指南 -slug: Web/Guide/API/DOM +slug: conflicting/Web/API/Document_Object_Model_dd00a71ceceac547ab464128db6bd8ef tags: - API - DOM @@ -9,6 +9,7 @@ tags: - TopicStub translation_of: Web/API/Document_Object_Model translation_of_original: Web/Guide/API/DOM +original_slug: Web/Guide/API/DOM ---

{{draft}}

diff --git a/files/zh-cn/conflicting/web/api/documentorshadowroot/elementfrompoint/index.html b/files/zh-cn/conflicting/web/api/documentorshadowroot/elementfrompoint/index.html index 6fb591e1da..83bcafb45b 100644 --- a/files/zh-cn/conflicting/web/api/documentorshadowroot/elementfrompoint/index.html +++ b/files/zh-cn/conflicting/web/api/documentorshadowroot/elementfrompoint/index.html @@ -1,8 +1,9 @@ --- title: Document.elementFromPoint() -slug: Web/API/Document/elementFromPoint +slug: conflicting/Web/API/DocumentOrShadowRoot/elementFromPoint translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint translation_of_original: Web/API/Document/elementFromPoint +original_slug: Web/API/Document/elementFromPoint ---
{{APIRef()}} {{Fx_minversion_header(3)}}
diff --git a/files/zh-cn/conflicting/web/api/documentorshadowroot/elementsfrompoint/index.html b/files/zh-cn/conflicting/web/api/documentorshadowroot/elementsfrompoint/index.html index 9a7ee01503..3b1043f630 100644 --- a/files/zh-cn/conflicting/web/api/documentorshadowroot/elementsfrompoint/index.html +++ b/files/zh-cn/conflicting/web/api/documentorshadowroot/elementsfrompoint/index.html @@ -1,8 +1,9 @@ --- title: Document.elementsFromPoint() -slug: Web/API/Document/elementsFromPoint +slug: conflicting/Web/API/DocumentOrShadowRoot/elementsFromPoint translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint translation_of_original: Web/API/Document/elementsFromPoint +original_slug: Web/API/Document/elementsFromPoint ---
{{APIRef("DOM")}}{{SeeCompatTable}}
diff --git a/files/zh-cn/conflicting/web/api/documentorshadowroot/getselection/index.html b/files/zh-cn/conflicting/web/api/documentorshadowroot/getselection/index.html index 73b3a4ce6b..dce4bc9c58 100644 --- a/files/zh-cn/conflicting/web/api/documentorshadowroot/getselection/index.html +++ b/files/zh-cn/conflicting/web/api/documentorshadowroot/getselection/index.html @@ -1,8 +1,9 @@ --- title: document.getSelection -slug: Web/API/Document/getSelection +slug: conflicting/Web/API/DocumentOrShadowRoot/getSelection translation_of: Web/API/DocumentOrShadowRoot/getSelection translation_of_original: Web/API/Document/getSelection +original_slug: Web/API/Document/getSelection ---
diff --git a/files/zh-cn/conflicting/web/api/documentorshadowroot/stylesheets/index.html b/files/zh-cn/conflicting/web/api/documentorshadowroot/stylesheets/index.html index de44c8537b..088be5bd6b 100644 --- a/files/zh-cn/conflicting/web/api/documentorshadowroot/stylesheets/index.html +++ b/files/zh-cn/conflicting/web/api/documentorshadowroot/stylesheets/index.html @@ -1,8 +1,9 @@ --- title: Document.styleSheets -slug: Web/API/Document/styleSheets +slug: conflicting/Web/API/DocumentOrShadowRoot/styleSheets translation_of: Web/API/DocumentOrShadowRoot/styleSheets translation_of_original: Web/API/Document/styleSheets +original_slug: Web/API/Document/styleSheets ---
{{APIRef}}
diff --git a/files/zh-cn/conflicting/web/api/dommatrix/index.html b/files/zh-cn/conflicting/web/api/dommatrix/index.html index 16fe55276d..364ba0709c 100644 --- a/files/zh-cn/conflicting/web/api/dommatrix/index.html +++ b/files/zh-cn/conflicting/web/api/dommatrix/index.html @@ -1,8 +1,9 @@ --- title: CSSMatrix -slug: Web/API/CSSMatrix +slug: conflicting/Web/API/DOMMatrix translation_of: Web/API/DOMMatrix translation_of_original: Web/API/CSSMatrix +original_slug: Web/API/CSSMatrix ---
{{APIRef("CSSOM")}}{{Non-standard_header}}
diff --git a/files/zh-cn/conflicting/web/api/element/index.html b/files/zh-cn/conflicting/web/api/element/index.html index 2a489d3b22..51c660e9ce 100644 --- a/files/zh-cn/conflicting/web/api/element/index.html +++ b/files/zh-cn/conflicting/web/api/element/index.html @@ -1,6 +1,6 @@ --- title: Slotable -slug: Web/API/Slotable +slug: conflicting/Web/API/Element tags: - API - Web Components @@ -8,6 +8,7 @@ tags: - 接口 translation_of: Web/API/Slottable translation_of_original: Web/API/Slotable +original_slug: Web/API/Slotable ---

{{APIRef("Shadow DOM")}}

diff --git a/files/zh-cn/conflicting/web/api/event/composedpath/index.html b/files/zh-cn/conflicting/web/api/event/composedpath/index.html index 61bfdf1366..525b27f4b8 100644 --- a/files/zh-cn/conflicting/web/api/event/composedpath/index.html +++ b/files/zh-cn/conflicting/web/api/event/composedpath/index.html @@ -1,8 +1,9 @@ --- title: Event.deepPath -slug: Web/API/Event/deepPath +slug: conflicting/Web/API/Event/composedPath translation_of: Web/API/Event/composedPath translation_of_original: Web/API/Event/deepPath +original_slug: Web/API/Event/deepPath ---

{{SeeCompatTable}}{{APIRef("Shadow DOM")}}

diff --git a/files/zh-cn/conflicting/web/api/eventtarget/addeventlistener/index.html b/files/zh-cn/conflicting/web/api/eventtarget/addeventlistener/index.html index f637813381..0d43c26ea1 100644 --- a/files/zh-cn/conflicting/web/api/eventtarget/addeventlistener/index.html +++ b/files/zh-cn/conflicting/web/api/eventtarget/addeventlistener/index.html @@ -1,9 +1,10 @@ --- title: 为这个EventTarget附加事件. -slug: Web/API/EventTarget/attachEvent +slug: conflicting/Web/API/EventTarget/addEventListener tags: - Junk translation_of: Web/API/EventTarget/addEventListener translation_of_original: Web/API/EventTarget/attachEvent +original_slug: Web/API/EventTarget/attachEvent ---

{{DOMxRef("EventTarget.addEventListener","EventTarget.addEventListener()")}}

diff --git a/files/zh-cn/conflicting/web/api/eventtarget/dispatchevent/index.html b/files/zh-cn/conflicting/web/api/eventtarget/dispatchevent/index.html index edc74b2306..f28ce6bc9a 100644 --- a/files/zh-cn/conflicting/web/api/eventtarget/dispatchevent/index.html +++ b/files/zh-cn/conflicting/web/api/eventtarget/dispatchevent/index.html @@ -1,8 +1,9 @@ --- title: EventTarget.fireEvent() -slug: Web/API/EventTarget/fireEvent +slug: conflicting/Web/API/EventTarget/dispatchEvent translation_of: Web/API/EventTarget/dispatchEvent translation_of_original: Web/API/EventTarget/fireEvent +original_slug: Web/API/EventTarget/fireEvent ---

{{APIRef("DOM Events")}}

diff --git a/files/zh-cn/conflicting/web/api/eventtarget/removeeventlistener/index.html b/files/zh-cn/conflicting/web/api/eventtarget/removeeventlistener/index.html index 3b4cbcfd90..4331abb35c 100644 --- a/files/zh-cn/conflicting/web/api/eventtarget/removeeventlistener/index.html +++ b/files/zh-cn/conflicting/web/api/eventtarget/removeeventlistener/index.html @@ -1,6 +1,6 @@ --- title: EventTarget.detachEvent() -slug: Web/API/EventTarget/detachEvent +slug: conflicting/Web/API/EventTarget/removeEventListener tags: - API - DOM @@ -8,6 +8,7 @@ tags: - Non-standard translation_of: Web/API/EventTarget/removeEventListener translation_of_original: Web/API/EventTarget/detachEvent +original_slug: Web/API/EventTarget/detachEvent ---

{{APIRef("DOM Events")}}

diff --git a/files/zh-cn/conflicting/web/api/file_and_directory_entries_api/introduction/index.html b/files/zh-cn/conflicting/web/api/file_and_directory_entries_api/introduction/index.html index 90ace79b50..8322c91998 100644 --- a/files/zh-cn/conflicting/web/api/file_and_directory_entries_api/introduction/index.html +++ b/files/zh-cn/conflicting/web/api/file_and_directory_entries_api/introduction/index.html @@ -1,8 +1,9 @@ --- title: File System API guide -slug: WebGuide/API/File_System +slug: conflicting/Web/API/File_and_Directory_Entries_API/Introduction translation_of: Web/API/File_and_Directory_Entries_API/Introduction translation_of_original: WebGuide/API/File_System +original_slug: WebGuide/API/File_System ---

{{ SeeCompatTable() }}

The File System API simulates a local file system that web apps can navigate around. You can develop apps that can read, write, and create files and directories in a virtual, sandboxed file system.

diff --git a/files/zh-cn/conflicting/web/api/geolocation/index.html b/files/zh-cn/conflicting/web/api/geolocation/index.html index f5432039ba..e38bc3e6b7 100644 --- a/files/zh-cn/conflicting/web/api/geolocation/index.html +++ b/files/zh-cn/conflicting/web/api/geolocation/index.html @@ -1,8 +1,9 @@ --- title: NavigatorGeolocation -slug: Web/API/NavigatorGeolocation +slug: conflicting/Web/API/Geolocation translation_of: Web/API/Geolocation translation_of_original: Web/API/NavigatorGeolocation +original_slug: Web/API/NavigatorGeolocation ---

{{APIRef("Geolocation API")}}

diff --git a/files/zh-cn/conflicting/web/api/globaleventhandlers/ongotpointercapture/index.html b/files/zh-cn/conflicting/web/api/globaleventhandlers/ongotpointercapture/index.html index 2ff983926f..a792bdd45d 100644 --- a/files/zh-cn/conflicting/web/api/globaleventhandlers/ongotpointercapture/index.html +++ b/files/zh-cn/conflicting/web/api/globaleventhandlers/ongotpointercapture/index.html @@ -1,6 +1,6 @@ --- title: Element.ongotpointercapture -slug: Web/API/Element/ongotpointercapture +slug: conflicting/Web/API/GlobalEventHandlers/ongotpointercapture tags: - API - DOM @@ -16,6 +16,7 @@ tags: - 指针事件 translation_of: Web/API/GlobalEventHandlers/ongotpointercapture translation_of_original: Web/API/Element/ongotpointercapture +original_slug: Web/API/Element/ongotpointercapture ---

{{ ApiRef("DOM") }}

diff --git a/files/zh-cn/conflicting/web/api/globaleventhandlers/onmouseup/index.html b/files/zh-cn/conflicting/web/api/globaleventhandlers/onmouseup/index.html index 03a4b116b8..2a1afdf2ac 100644 --- a/files/zh-cn/conflicting/web/api/globaleventhandlers/onmouseup/index.html +++ b/files/zh-cn/conflicting/web/api/globaleventhandlers/onmouseup/index.html @@ -1,8 +1,9 @@ --- title: window.onmouseup -slug: Web/API/Window/onmouseup +slug: conflicting/Web/API/GlobalEventHandlers/onmouseup translation_of: Web/API/GlobalEventHandlers/onmouseup translation_of_original: Web/API/Window/onmouseup +original_slug: Web/API/Window/onmouseup ---

{{ ApiRef() }}

概述

diff --git a/files/zh-cn/conflicting/web/api/globaleventhandlers/onscroll/index.html b/files/zh-cn/conflicting/web/api/globaleventhandlers/onscroll/index.html index af48e1575f..9bd58ff3f5 100644 --- a/files/zh-cn/conflicting/web/api/globaleventhandlers/onscroll/index.html +++ b/files/zh-cn/conflicting/web/api/globaleventhandlers/onscroll/index.html @@ -1,8 +1,9 @@ --- title: window.onscroll -slug: Web/API/Window/onscroll +slug: conflicting/Web/API/GlobalEventHandlers/onscroll translation_of: Web/API/GlobalEventHandlers/onscroll translation_of_original: Web/API/Window/onscroll +original_slug: Web/API/Window/onscroll ---

{{ ApiRef() }}

概述

diff --git a/files/zh-cn/conflicting/web/api/globaleventhandlers/ontouchmove/index.html b/files/zh-cn/conflicting/web/api/globaleventhandlers/ontouchmove/index.html index 3bbf3d5ce4..7579ce0d36 100644 --- a/files/zh-cn/conflicting/web/api/globaleventhandlers/ontouchmove/index.html +++ b/files/zh-cn/conflicting/web/api/globaleventhandlers/ontouchmove/index.html @@ -1,8 +1,9 @@ --- title: GlobalEventHandlers.ontouchmove -slug: Web/API/GlobalEventHandlers/GlobalEventHanders.ontouchmove +slug: conflicting/Web/API/GlobalEventHandlers/ontouchmove translation_of: Web/API/GlobalEventHandlers/ontouchmove translation_of_original: Web/API/GlobalEventHandlers/GlobalEventHanders.ontouchmove +original_slug: Web/API/GlobalEventHandlers/GlobalEventHanders.ontouchmove ---
{{ApiRef("HTML DOM")}}
diff --git a/files/zh-cn/conflicting/web/api/htmlelement/outertext/index.html b/files/zh-cn/conflicting/web/api/htmlelement/outertext/index.html index 01de770af7..54458e93a2 100644 --- a/files/zh-cn/conflicting/web/api/htmlelement/outertext/index.html +++ b/files/zh-cn/conflicting/web/api/htmlelement/outertext/index.html @@ -1,9 +1,10 @@ --- title: Node.outerText -slug: Web/API/Node/outerText +slug: conflicting/Web/API/HTMLElement/outerText tags: - Node.outerText translation_of: Web/API/HTMLElement/outerText translation_of_original: Web/API/Node/outerText +original_slug: Web/API/Node/outerText ---

请参阅 {{domxref("HTMLElement.outerText")}}

diff --git a/files/zh-cn/conflicting/web/api/htmlinputelement/index.html b/files/zh-cn/conflicting/web/api/htmlinputelement/index.html index 0cccf89889..82a91a1271 100644 --- a/files/zh-cn/conflicting/web/api/htmlinputelement/index.html +++ b/files/zh-cn/conflicting/web/api/htmlinputelement/index.html @@ -1,8 +1,9 @@ --- title: HTMLInputElement.mozSetFileNameArray -slug: Web/API/HTMLInputElement/mozSetFileNameArray +slug: conflicting/Web/API/HTMLInputElement translation_of: Web/API/HTMLInputElement translation_of_original: Web/API/HTMLInputElement/mozSetFileNameArray +original_slug: Web/API/HTMLInputElement/mozSetFileNameArray ---
diff --git a/files/zh-cn/conflicting/web/api/htmlmediaelement/abort_event/index.html b/files/zh-cn/conflicting/web/api/htmlmediaelement/abort_event/index.html index 9a233b4d80..1b77441e5e 100644 --- a/files/zh-cn/conflicting/web/api/htmlmediaelement/abort_event/index.html +++ b/files/zh-cn/conflicting/web/api/htmlmediaelement/abort_event/index.html @@ -1,10 +1,11 @@ --- title: abort -slug: Web/Events/abort +slug: conflicting/Web/API/HTMLMediaElement/abort_event tags: - abort translation_of: Web/API/HTMLMediaElement/abort_event translation_of_original: Web/Events/abort +original_slug: Web/Events/abort ---

当一个资源的加载已中止时，将触发 abort事件。

diff --git a/files/zh-cn/conflicting/web/api/index.html b/files/zh-cn/conflicting/web/api/index.html index f1a247fd70..333f98f0a4 100644 --- a/files/zh-cn/conflicting/web/api/index.html +++ b/files/zh-cn/conflicting/web/api/index.html @@ -1,8 +1,9 @@ --- title: Element.name -slug: Web/API/Element/name +slug: conflicting/Web/API translation_of: Web/API translation_of_original: Web/API/Element/name +original_slug: Web/API/Element/name ---

{{ APIRef() }}

diff --git a/files/zh-cn/conflicting/web/api/mouseevent/altkey/index.html b/files/zh-cn/conflicting/web/api/mouseevent/altkey/index.html index fb69717e99..382f62201d 100644 --- a/files/zh-cn/conflicting/web/api/mouseevent/altkey/index.html +++ b/files/zh-cn/conflicting/web/api/mouseevent/altkey/index.html @@ -1,8 +1,9 @@ --- title: event.altKey -slug: Web/API/event.altKey +slug: conflicting/Web/API/MouseEvent/altKey translation_of: Web/API/MouseEvent/altKey translation_of_original: Web/API/event.altKey +original_slug: Web/API/event.altKey ---

{{ ApiRef() }}

概述

diff --git a/files/zh-cn/conflicting/web/api/mouseevent/button/index.html b/files/zh-cn/conflicting/web/api/mouseevent/button/index.html index c75916a287..1a3142e74e 100644 --- a/files/zh-cn/conflicting/web/api/mouseevent/button/index.html +++ b/files/zh-cn/conflicting/web/api/mouseevent/button/index.html @@ -1,8 +1,9 @@ --- title: event.button -slug: Web/API/event.button +slug: conflicting/Web/API/MouseEvent/button translation_of: Web/API/MouseEvent/button translation_of_original: Web/API/event.button +original_slug: Web/API/event.button ---

{{ ApiRef() }}

概述

diff --git a/files/zh-cn/conflicting/web/api/mouseevent/relatedtarget/index.html b/files/zh-cn/conflicting/web/api/mouseevent/relatedtarget/index.html index a334f4b2eb..aed477e044 100644 --- a/files/zh-cn/conflicting/web/api/mouseevent/relatedtarget/index.html +++ b/files/zh-cn/conflicting/web/api/mouseevent/relatedtarget/index.html @@ -1,8 +1,9 @@ --- title: event.relatedTarget -slug: Web/API/event.relatedTarget +slug: conflicting/Web/API/MouseEvent/relatedTarget translation_of: Web/API/MouseEvent/relatedTarget translation_of_original: Web/API/event.relatedTarget +original_slug: Web/API/event.relatedTarget ---

 

diff --git a/files/zh-cn/conflicting/web/api/mouseevent/shiftkey/index.html b/files/zh-cn/conflicting/web/api/mouseevent/shiftkey/index.html index e01246caca..d61d354b15 100644 --- a/files/zh-cn/conflicting/web/api/mouseevent/shiftkey/index.html +++ b/files/zh-cn/conflicting/web/api/mouseevent/shiftkey/index.html @@ -1,8 +1,9 @@ --- title: event.shiftKey -slug: Web/API/event.shiftKey +slug: conflicting/Web/API/MouseEvent/shiftKey translation_of: Web/API/MouseEvent/shiftKey translation_of_original: Web/API/event.shiftKey +original_slug: Web/API/event.shiftKey ---

{{ ApiRef() }}

概述

diff --git a/files/zh-cn/conflicting/web/api/node/getrootnode/index.html b/files/zh-cn/conflicting/web/api/node/getrootnode/index.html index 6291ef7fd6..ea5deb0b98 100644 --- a/files/zh-cn/conflicting/web/api/node/getrootnode/index.html +++ b/files/zh-cn/conflicting/web/api/node/getrootnode/index.html @@ -1,6 +1,6 @@ --- title: Node.rootNode -slug: Web/API/Node/rootNode +slug: conflicting/Web/API/Node/getRootNode tags: - API - DOM @@ -10,6 +10,7 @@ tags: - rootNode translation_of: Web/API/Node/getRootNode translation_of_original: Web/API/Node/rootNode +original_slug: Web/API/Node/rootNode ---

{{deprecated_header}}{{APIRef("DOM")}}{{SeeCompatTable}}

diff --git a/files/zh-cn/conflicting/web/api/node/index.html b/files/zh-cn/conflicting/web/api/node/index.html index ad04356656..08e2664f32 100644 --- a/files/zh-cn/conflicting/web/api/node/index.html +++ b/files/zh-cn/conflicting/web/api/node/index.html @@ -1,8 +1,9 @@ --- title: Node.baseURIObject -slug: Web/API/Node/baseURIObject +slug: conflicting/Web/API/Node translation_of: Web/API/Node translation_of_original: Web/API/Node/baseURIObject +original_slug: Web/API/Node/baseURIObject ---
{{ApiRef}} {{Fx_minversion_header("3")}} {{Non-standard_header}}
diff --git a/files/zh-cn/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html b/files/zh-cn/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html index 58844aef2e..03f557b347 100644 --- a/files/zh-cn/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html +++ b/files/zh-cn/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html @@ -1,8 +1,9 @@ --- title: Node.nodePrincipal -slug: Web/API/Node/nodePrincipal +slug: conflicting/Web/API/Node_378aed5ed6869e50853edbc988cf9556 translation_of: Web/API/Node translation_of_original: Web/API/Node/nodePrincipal +original_slug: Web/API/Node/nodePrincipal ---
{{APIRef}}{{Fx_minversion_header(3)}}{{Non-standard_header}} diff --git a/files/zh-cn/conflicting/web/api/push_api/index.html b/files/zh-cn/conflicting/web/api/push_api/index.html index e616d4e12d..76526ed4ce 100644 --- a/files/zh-cn/conflicting/web/api/push_api/index.html +++ b/files/zh-cn/conflicting/web/api/push_api/index.html @@ -1,6 +1,6 @@ --- title: Using the Push API -slug: Web/API/Push_API/Using_the_Push_API +slug: conflicting/Web/API/Push_API tags: - Push - Push API @@ -8,6 +8,7 @@ tags: - Using the Push API translation_of: Web/API/Push_API translation_of_original: Web/API/Push_API/Using_the_Push_API +original_slug: Web/API/Push_API/Using_the_Push_API ---

W3C Push API 为开发人员在Web应用程序中提供了一些令人兴奋的新功能：本文提供了一个简单的演示，以获取Push通知的设置和运行。

diff --git a/files/zh-cn/conflicting/web/api/url/index.html b/files/zh-cn/conflicting/web/api/url/index.html index 3ca38bbd39..3245250d9c 100644 --- a/files/zh-cn/conflicting/web/api/url/index.html +++ b/files/zh-cn/conflicting/web/api/url/index.html @@ -1,10 +1,11 @@ --- title: Window.URL -slug: Web/API/Window/URL +slug: conflicting/Web/API/URL tags: - Window.URL translation_of: Web/API/URL translation_of_original: Web/API/Window/URL +original_slug: Web/API/Window/URL ---

{{ApiRef("Window")}}{{SeeCompatTable}}

diff --git a/files/zh-cn/conflicting/web/api/web_storage_api/index.html b/files/zh-cn/conflicting/web/api/web_storage_api/index.html index 194b71a94a..c5bde57455 100644 --- a/files/zh-cn/conflicting/web/api/web_storage_api/index.html +++ b/files/zh-cn/conflicting/web/api/web_storage_api/index.html @@ -1,8 +1,9 @@ --- title: Storage -slug: Web/Guide/API/DOM/Storage +slug: conflicting/Web/API/Web_Storage_API translation_of: Web/API/Web_Storage_API translation_of_original: Web/Guide/API/DOM/Storage +original_slug: Web/Guide/API/DOM/Storage ---

概述

diff --git a/files/zh-cn/conflicting/web/api/webrtc_api/index.html b/files/zh-cn/conflicting/web/api/webrtc_api/index.html index da693553b8..bfc9b851dc 100644 --- a/files/zh-cn/conflicting/web/api/webrtc_api/index.html +++ b/files/zh-cn/conflicting/web/api/webrtc_api/index.html @@ -1,8 +1,9 @@ --- title: WebRTC API overview -slug: Web/API/WebRTC_API/Overview +slug: conflicting/Web/API/WebRTC_API translation_of: Web/API/WebRTC_API#WebRTC_concepts_and_usage translation_of_original: Web/API/WebRTC_API/Overview +original_slug: Web/API/WebRTC_API/Overview ---

{{WebRTCSidebar}}

diff --git a/files/zh-cn/conflicting/web/api/webrtc_api/protocols/index.html b/files/zh-cn/conflicting/web/api/webrtc_api/protocols/index.html index 5f37d83529..7aa818b5d5 100644 --- a/files/zh-cn/conflicting/web/api/webrtc_api/protocols/index.html +++ b/files/zh-cn/conflicting/web/api/webrtc_api/protocols/index.html @@ -1,10 +1,11 @@ --- title: WebRTC 架构概览 -slug: Web/API/WebRTC_API/Architecture +slug: conflicting/Web/API/WebRTC_API/Protocols tags: - WebRTC 架构概览 translation_of: Web/API/WebRTC_API/Protocols translation_of_original: Web/API/WebRTC_API/Architecture +original_slug: Web/API/WebRTC_API/Architecture ---

{{WebRTCSidebar}}

diff --git a/files/zh-cn/conflicting/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/zh-cn/conflicting/web/api/webrtc_api/signaling_and_video_calling/index.html index 67464bdbd1..d3ca2eb29c 100644 --- a/files/zh-cn/conflicting/web/api/webrtc_api/signaling_and_video_calling/index.html +++ b/files/zh-cn/conflicting/web/api/webrtc_api/signaling_and_video_calling/index.html @@ -1,8 +1,9 @@ --- title: WebRTC basics -slug: Web/API/WebRTC_API/WebRTC_basics +slug: conflicting/Web/API/WebRTC_API/Signaling_and_video_calling translation_of: Web/API/WebRTC_API/Signaling_and_video_calling translation_of_original: Web/API/WebRTC_API/WebRTC_basics +original_slug: Web/API/WebRTC_API/WebRTC_basics ---

{{WebRTCSidebar}}

diff --git a/files/zh-cn/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html b/files/zh-cn/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html index 75330b8894..4f15dae53e 100644 --- a/files/zh-cn/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html +++ b/files/zh-cn/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html @@ -1,8 +1,9 @@ --- title: WebRTC -slug: WebRTC +slug: conflicting/Web/API/WebRTC_API_d8621144cbc61520339c3b10c61731f0 translation_of: Web/API/WebRTC_API translation_of_original: WebRTC +original_slug: WebRTC ---

WebRTC中的RTC是实时通信的简称，这是一种支持在浏览器客户端之间语音/视频交流和数据分享的技术。WebRTC作为一项标准,使得所有浏览器无需安装插件或第三方软件，就可以点对点地分享应用数据和进行电话会议。

diff --git a/files/zh-cn/conflicting/web/api/window/localstorage/index.html b/files/zh-cn/conflicting/web/api/window/localstorage/index.html index 46384c660e..eab3bf85fe 100644 --- a/files/zh-cn/conflicting/web/api/window/localstorage/index.html +++ b/files/zh-cn/conflicting/web/api/window/localstorage/index.html @@ -1,11 +1,12 @@ --- title: LocalStorage -slug: Web/API/Storage/LocalStorage +slug: conflicting/Web/API/Window/localStorage tags: - 存储API - 离线 translation_of: Web/API/Window/localStorage translation_of_original: Web/API/Web_Storage_API/Local_storage +original_slug: Web/API/Storage/LocalStorage ---

localStorage 与 sessionStorage 一样，都遵循同源策略，但是它是持续存在的。localStorage 首次出现于 Firefox 3.5。

diff --git a/files/zh-cn/conflicting/web/api/window/moveto/index.html b/files/zh-cn/conflicting/web/api/window/moveto/index.html index 140827ddb9..066314234c 100644 --- a/files/zh-cn/conflicting/web/api/window/moveto/index.html +++ b/files/zh-cn/conflicting/web/api/window/moveto/index.html @@ -1,8 +1,9 @@ --- title: Window.restore() -slug: Web/API/Window/restore +slug: conflicting/Web/API/Window/moveTo translation_of: Web/API/Window/moveTo translation_of_original: Web/API/Window/restore +original_slug: Web/API/Window/restore ---

{{APIRef}}

diff --git a/files/zh-cn/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html b/files/zh-cn/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html index 4db001830f..4a7bcf7366 100644 --- a/files/zh-cn/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html +++ b/files/zh-cn/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html @@ -1,8 +1,9 @@ --- title: WebAPI -slug: WebAPI +slug: conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3 translation_of: Web/API translation_of_original: WebAPI +original_slug: WebAPI ---

WebAPI指一组设备兼容套件和访问接口，它允许Web应用及其内容访问设备硬件（比如电池状态或设备振动器），同时也可以获取设备上的数据（比如日历或联系人等信息）。通过这些API，我们希望对Web应用进行扩展，实现过去只有专有平台才可以实现的功能。

diff --git a/files/zh-cn/conflicting/web/css/@viewport/index.html b/files/zh-cn/conflicting/web/css/@viewport/index.html index 92d33a292c..5932c8d574 100644 --- a/files/zh-cn/conflicting/web/css/@viewport/index.html +++ b/files/zh-cn/conflicting/web/css/@viewport/index.html @@ -1,8 +1,9 @@ --- title: height -slug: Web/CSS/@viewport/height +slug: conflicting/Web/CSS/@viewport translation_of: Web/CSS/@viewport translation_of_original: Web/CSS/@viewport/height +original_slug: Web/CSS/@viewport/height ---
{{CSSRef}}
diff --git a/files/zh-cn/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html b/files/zh-cn/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html index 11519cee6e..eac64dabdb 100644 --- a/files/zh-cn/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html +++ b/files/zh-cn/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html @@ -1,11 +1,12 @@ --- title: orientation -slug: Web/CSS/@viewport/orientation +slug: conflicting/Web/CSS/@viewport_7861ca3461a359b150d44f2c8d74e53a tags: - CSS - CSS Description translation_of: Web/CSS/@viewport translation_of_original: Web/CSS/@viewport/orientation +original_slug: Web/CSS/@viewport/orientation ---
{{CSSRef}}
diff --git a/files/zh-cn/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/zh-cn/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html index 2716ef1d6f..8798295f4b 100644 --- a/files/zh-cn/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html +++ b/files/zh-cn/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html @@ -1,8 +1,9 @@ --- title: viewport-fit -slug: Web/CSS/@viewport/viewport-fit +slug: conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f translation_of: Web/CSS/@viewport translation_of_original: Web/CSS/@viewport/viewport-fit +original_slug: Web/CSS/@viewport/viewport-fit ---
{{CSSRef}} {{Draft}} {{SeeCompatTable}}
diff --git a/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html b/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html index ed5c585a7e..709a42b3d1 100644 --- a/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html +++ b/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html @@ -1,8 +1,9 @@ --- title: width -slug: Web/CSS/@viewport/width +slug: conflicting/Web/CSS/@viewport_c925ec0506b352ea1185248b874f7848 translation_of: Web/CSS/@viewport translation_of_original: Web/CSS/@viewport/width +original_slug: Web/CSS/@viewport/width ---
{{CSSRef}}
diff --git a/files/zh-cn/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/zh-cn/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html index 894e8a6c73..0e9cc815ec 100644 --- a/files/zh-cn/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html +++ b/files/zh-cn/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html @@ -1,11 +1,12 @@ --- title: zoom -slug: Web/CSS/@viewport/zoom +slug: conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518 tags: - CSS - CSS Descriptor translation_of: Web/CSS/@viewport translation_of_original: Web/CSS/@viewport/zoom +original_slug: Web/CSS/@viewport/zoom ---
{{ CSSRef }}
diff --git a/files/zh-cn/conflicting/web/css/_colon_is/index.html b/files/zh-cn/conflicting/web/css/_colon_is/index.html index e9f8527a79..4665363416 100644 --- a/files/zh-cn/conflicting/web/css/_colon_is/index.html +++ b/files/zh-cn/conflicting/web/css/_colon_is/index.html @@ -1,12 +1,13 @@ --- title: ':any' -slug: 'Web/CSS/:any' +slug: conflicting/Web/CSS/:is tags: - CSS - 伪类选择器 - 实验性 -translation_of: 'Web/CSS/:is' -translation_of_original: 'Web/CSS/:any' +translation_of: Web/CSS/:is +translation_of_original: Web/CSS/:any +original_slug: Web/CSS/:any ---
{{CSSRef}}{{SeeCompatTable}}
diff --git a/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html b/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html index f7493e4757..af8a706fa9 100644 --- a/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html +++ b/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html @@ -1,13 +1,14 @@ --- title: ':-moz-placeholder' -slug: 'Web/CSS/:-moz-placeholder' +slug: conflicting/Web/CSS/:placeholder-shown tags: - CSS - CSS Pseudo-class - CSS Reference - Non-standard -translation_of: 'Web/CSS/:placeholder-shown' -translation_of_original: 'Web/CSS/:-moz-placeholder' +translation_of: Web/CSS/:placeholder-shown +translation_of_original: Web/CSS/:-moz-placeholder +original_slug: Web/CSS/:-moz-placeholder ---

 

diff --git a/files/zh-cn/conflicting/web/css/_doublecolon_placeholder/index.html b/files/zh-cn/conflicting/web/css/_doublecolon_placeholder/index.html index 3c08f433c8..b66dc3a6ef 100644 --- a/files/zh-cn/conflicting/web/css/_doublecolon_placeholder/index.html +++ b/files/zh-cn/conflicting/web/css/_doublecolon_placeholder/index.html @@ -1,13 +1,14 @@ --- title: '::-moz-placeholder' -slug: 'Web/CSS/::-moz-placeholder' +slug: conflicting/Web/CSS/::placeholder tags: - CSS - CSS Pseudo-class - CSS Reference - Non-standard -translation_of: 'Web/CSS/::placeholder' -translation_of_original: 'Web/CSS/::-moz-placeholder' +translation_of: Web/CSS/::placeholder +translation_of_original: Web/CSS/::-moz-placeholder +original_slug: Web/CSS/::-moz-placeholder ---
{{Non-standard_header}}{{CSSRef}}
diff --git a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/index.html b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/index.html index 96d540eedd..8fe764c269 100644 --- a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/index.html +++ b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/index.html @@ -1,6 +1,6 @@ --- title: CSS Background and Borders -slug: Web/CSS/CSS_Background_and_Borders +slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders tags: - CSS - CSS Backgrounds and Borders @@ -10,6 +10,7 @@ tags: - TopicStub translation_of: Web/CSS/CSS_Backgrounds_and_Borders translation_of_original: Web/CSS/CSS_Background_and_Borders +original_slug: Web/CSS/CSS_Background_and_Borders ---

{{CSSRef}}

diff --git a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html index 611a58af85..8d64addd68 100644 --- a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html +++ b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -1,6 +1,6 @@ --- title: 缩放背景图像 -slug: Web/Guide/CSS/Scaling_background_images +slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images tags: - Advanced - CSS @@ -11,6 +11,7 @@ tags: - 背景图片 translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images +original_slug: Web/Guide/CSS/Scaling_background_images ---
{{cssref}}
diff --git a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html index 66cd1921d5..b1d5ee045e 100644 --- a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html +++ b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -1,6 +1,6 @@ --- title: 使用CSS的多背景 -slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds tags: - CSS - CSS Background @@ -9,6 +9,7 @@ tags: - Intermediate translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +original_slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---

{{CSSRef}}

diff --git a/files/zh-cn/conflicting/web/css/css_color/index.html b/files/zh-cn/conflicting/web/css/css_color/index.html index 60036fea2b..65153a61df 100644 --- a/files/zh-cn/conflicting/web/css/css_color/index.html +++ b/files/zh-cn/conflicting/web/css/css_color/index.html @@ -1,6 +1,6 @@ --- title: CSS Colors -slug: Web/CSS/CSS_Colors +slug: conflicting/Web/CSS/CSS_Color tags: - CSS - CSS Colors @@ -10,6 +10,7 @@ tags: - TopicStub translation_of: Web/CSS/CSS_Color translation_of_original: Web/CSS/CSS_Colors +original_slug: Web/CSS/CSS_Colors ---
{{CSSRef}}
diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html index d2054bc725..64120aad99 100644 --- a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html +++ b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -1,6 +1,6 @@ --- title: 使用弹性盒子进行高级布局 -slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins +slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox tags: - CSS3布局模型 - Flexible_Box @@ -9,6 +9,7 @@ tags: - 弹性盒子 - 弹性盒子模型 translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins ---

使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充屏幕可用空间。一个弹性框容器将延展它的子元素以填充可用空间，并且缩小它的子元素来避免溢出。

diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index d50cf7582f..5a26114225 100644 --- a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -1,6 +1,6 @@ --- title: 使用 CSS 弹性盒子 -slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox tags: - CSS - CSS Flexible Boxes @@ -17,6 +17,7 @@ tags: - 进阶 translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ---
{{CSSRef}}
diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html index 9ea8045d96..416b96e007 100644 --- a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html +++ b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -1,11 +1,12 @@ --- title: 使用flexbox来布局web应用 -slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox tags: - CSS - 弹性盒子 translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications ---

{{CSSRef}}

diff --git a/files/zh-cn/conflicting/web/css/easing-function/index.html b/files/zh-cn/conflicting/web/css/easing-function/index.html index aef640fdd3..1e53f47c6d 100644 --- a/files/zh-cn/conflicting/web/css/easing-function/index.html +++ b/files/zh-cn/conflicting/web/css/easing-function/index.html @@ -1,11 +1,12 @@ --- title: -slug: Web/CSS/timing-function +slug: conflicting/Web/CSS/easing-function tags: - CSS - timing-function translation_of: Web/CSS/easing-function translation_of_original: Web/CSS/timing-function +original_slug: Web/CSS/timing-function ---

{{ CSSRef() }}

diff --git a/files/zh-cn/conflicting/web/guide/html/html5/index.html b/files/zh-cn/conflicting/web/guide/html/html5/index.html index 3759db3097..ec94a52452 100644 --- a/files/zh-cn/conflicting/web/guide/html/html5/index.html +++ b/files/zh-cn/conflicting/web/guide/html/html5/index.html @@ -1,8 +1,9 @@ --- title: HTML5 & friends thematic classification -slug: Web/Guide/HTML/HTML5/HTML5_Thematic_Classification +slug: conflicting/Web/Guide/HTML/HTML5 translation_of: Web/Guide/HTML/HTML5 translation_of_original: Web/Guide/HTML/HTML5/HTML5_Thematic_Classification +original_slug: Web/Guide/HTML/HTML5/HTML5_Thematic_Classification ---

这个页面提供了有关HTML5的主题链接，有些链接一般与HTML5关联但实际上并不是HTML标准，为了方便这些内容也被整理到这里。

HTML

diff --git a/files/zh-cn/conflicting/web/guide/index.html b/files/zh-cn/conflicting/web/guide/index.html index ef8d7dac56..48ed6873e3 100644 --- a/files/zh-cn/conflicting/web/guide/index.html +++ b/files/zh-cn/conflicting/web/guide/index.html @@ -1,8 +1,9 @@ --- title: Web 开发 -slug: Web_Development +slug: conflicting/Web/Guide translation_of: Web/Guide translation_of_original: Web_Development +original_slug: Web_Development ---

Web 开发 包括开发网站和Web应用程序的方方面面。

在本文中，您将学到创建从简单到复杂的Web站点、使用最新Web技术的高度互动的网站。

diff --git a/files/zh-cn/conflicting/web/guide/mobile/index.html b/files/zh-cn/conflicting/web/guide/mobile/index.html index ac53f993c1..47137e29a0 100644 --- a/files/zh-cn/conflicting/web/guide/mobile/index.html +++ b/files/zh-cn/conflicting/web/guide/mobile/index.html @@ -1,6 +1,6 @@ --- title: 移动 Web 开发 -slug: Web_Development/Mobile +slug: conflicting/Web/Guide/Mobile tags: - Mobile - NeedsTranslation @@ -8,6 +8,7 @@ tags: - Web Development translation_of: Web/Guide/Mobile translation_of_original: Web_Development/Mobile +original_slug: Web_Development/Mobile ---

开发能在移动设备上浏览的网站需要一些方法来确保网站在移动设备上可以如同在桌面浏览器上一样正常运作。以下的文章介绍了部分方法：

    diff --git a/files/zh-cn/conflicting/web/html/element/index.html b/files/zh-cn/conflicting/web/html/element/index.html index 9a45c3ba52..4deec7c2ee 100644 --- a/files/zh-cn/conflicting/web/html/element/index.html +++ b/files/zh-cn/conflicting/web/html/element/index.html @@ -1,6 +1,6 @@ --- title: HTML5 标签列表 -slug: Web/Guide/HTML/HTML5/HTML5_element_list +slug: conflicting/Web/HTML/Element tags: - HTML - HTML5 @@ -9,6 +9,7 @@ tags: - 指南 translation_of: Web/HTML/Element translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list +original_slug: Web/Guide/HTML/HTML5/HTML5_element_list ---

    这里列出了所有标准化的 HTML5 元素，使用起始标签描述，按照功能分组。与列出所有标准化的、非标准化的、有效的、废弃的标签的 HTML 元素索引 不同的是，该页只列出有效的 HTML5 元素。新网站应当只使用这里列出的元素。

    diff --git a/files/zh-cn/conflicting/web/html/quirks_mode_and_standards_mode/index.html b/files/zh-cn/conflicting/web/html/quirks_mode_and_standards_mode/index.html index 04e0eabb4f..b18bccd87b 100644 --- a/files/zh-cn/conflicting/web/html/quirks_mode_and_standards_mode/index.html +++ b/files/zh-cn/conflicting/web/html/quirks_mode_and_standards_mode/index.html @@ -1,6 +1,7 @@ --- title: Quirks Mode and Standards Mode -slug: Quirks_Mode_and_Standards_Mode +slug: conflicting/Web/HTML/Quirks_Mode_and_Standards_Mode +original_slug: Quirks_Mode_and_Standards_Mode ---

    在web产生初期, 网页通常被写成两个版本: 其中一个是为网景公司的 Netscape Navigator浏览器而写, 另外一个是为微软公司的 Internet Explorer浏览器而写. 随后,当W3C组织制定了web标准,各浏览器并不能立即的严格按标准执行,因为这样做会让一些已经存在的不符合新标准的网页无法正常显示.为此,浏览器推出了两种模式来分别对待新的符合标准的网也与旧的标准指定之前遗留的网页.

    如今,浏览器的渲染引擎已发展成为拥有三种渲染模式:quirks mode, almost standards mode, 和full standards mode. 在quirks mode(混杂模式)中,渲染引擎会模拟Navigator 4 和 Internet Explorer 5这些古老浏览器的不标准的渲染行为来渲染网页,以防止现代浏览器不能正常渲染已经存在的一些古老网页.在full standards mode(标准规范模式)中,渲染引擎会尽量使用HTML 和 CSS 规范规定的行为来渲染网页.在almost standards mode(接近标准模式)中,渲染引擎有极少数行为不遵循标准.

    diff --git a/files/zh-cn/conflicting/web/http/cors/index.html b/files/zh-cn/conflicting/web/http/cors/index.html index 50a52b3405..eb37a40e1d 100644 --- a/files/zh-cn/conflicting/web/http/cors/index.html +++ b/files/zh-cn/conflicting/web/http/cors/index.html @@ -1,6 +1,6 @@ --- title: Server-Side Access Control -slug: Web/HTTP/Server-Side_Access_Control +slug: conflicting/Web/HTTP/CORS tags: - AJAX - CORS @@ -8,6 +8,7 @@ tags: - PHP translation_of: Web/HTTP/CORS translation_of_original: Web/HTTP/Server-Side_Access_Control +original_slug: Web/HTTP/Server-Side_Access_Control ---

    {{HTTPSidebar}}

    diff --git a/files/zh-cn/conflicting/web/http/csp/index.html b/files/zh-cn/conflicting/web/http/csp/index.html index 232b502c3f..c9e88056a9 100644 --- a/files/zh-cn/conflicting/web/http/csp/index.html +++ b/files/zh-cn/conflicting/web/http/csp/index.html @@ -1,8 +1,9 @@ --- title: 内容安全策略 (CSP) -slug: Web/Security/CSP +slug: conflicting/Web/HTTP/CSP translation_of: Web/HTTP/CSP translation_of_original: Web/Security/CSP +original_slug: Web/Security/CSP ---
    {{gecko_minversion_header("2.0")}}
    diff --git a/files/zh-cn/conflicting/web/http/csp_9583294484b49ac391995b392c2b1ae1/index.html b/files/zh-cn/conflicting/web/http/csp_9583294484b49ac391995b392c2b1ae1/index.html index 2577fa1fde..aad26533cd 100644 --- a/files/zh-cn/conflicting/web/http/csp_9583294484b49ac391995b392c2b1ae1/index.html +++ b/files/zh-cn/conflicting/web/http/csp_9583294484b49ac391995b392c2b1ae1/index.html @@ -1,8 +1,9 @@ --- title: Using CSP violation reports -slug: Web/Security/CSP/Using_CSP_violation_reports +slug: conflicting/Web/HTTP/CSP_9583294484b49ac391995b392c2b1ae1 translation_of: Web/HTTP/CSP translation_of_original: Web/Security/CSP/Using_CSP_violation_reports +original_slug: Web/Security/CSP/Using_CSP_violation_reports ---

    {{ gecko_minversion_header("2.0") }}{{ draft() }}

    diff --git a/files/zh-cn/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html b/files/zh-cn/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html index ce27f52be4..8b035b39df 100644 --- a/files/zh-cn/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html +++ b/files/zh-cn/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html @@ -1,12 +1,13 @@ --- title: 内容安全策略介绍 -slug: Web/Security/CSP/Introducing_Content_Security_Policy +slug: conflicting/Web/HTTP/CSP_aeae68a149c6fbe64e541cbdcd6ed5c5 tags: - 介绍 - 内容安全策略 - 安全 translation_of: Web/HTTP/CSP translation_of_original: Web/Security/CSP/Introducing_Content_Security_Policy +original_slug: Web/Security/CSP/Introducing_Content_Security_Policy ---

    {{ gecko_minversion_header("2") }}

    diff --git a/files/zh-cn/conflicting/web/http/status/index.html b/files/zh-cn/conflicting/web/http/status/index.html index 2c0fce1058..cb0c385f77 100644 --- a/files/zh-cn/conflicting/web/http/status/index.html +++ b/files/zh-cn/conflicting/web/http/status/index.html @@ -1,8 +1,9 @@ --- title: HTTP response codes -slug: Web/HTTP/HTTP_response_codes +slug: conflicting/Web/HTTP/Status translation_of: Web/HTTP/Status translation_of_original: Web/HTTP/HTTP_response_codes +original_slug: Web/HTTP/HTTP_response_codes ---

    HTTP状态码(响应码)用来表明这个HTTP 请求是否已经成功完成.HTTP响应类型一共分五大类:消息响应,成功响应,重定向,客户端错误,服务器端错误.

     

    diff --git a/files/zh-cn/conflicting/web/javascript/guide/introduction/index.html b/files/zh-cn/conflicting/web/javascript/guide/introduction/index.html index d8b77fece9..cfe969feee 100644 --- a/files/zh-cn/conflicting/web/javascript/guide/introduction/index.html +++ b/files/zh-cn/conflicting/web/javascript/guide/introduction/index.html @@ -1,12 +1,13 @@ --- title: 关于本指南 -slug: Web/JavaScript/Guide/About +slug: conflicting/Web/JavaScript/Guide/Introduction tags: - JavaScript - 初学者 - 指南 translation_of: Web/JavaScript/Guide/Introduction translation_of_original: Web/JavaScript/Guide/About +original_slug: Web/JavaScript/Guide/About ---

    JavaScript 是一种跨平台的，基于对象的脚本语言。本指南介绍了所有您使用 JavaScript 所需要了解的事情。

    diff --git a/files/zh-cn/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html b/files/zh-cn/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html index 96114a1f43..31077692d4 100644 --- a/files/zh-cn/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html +++ b/files/zh-cn/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html @@ -1,10 +1,11 @@ --- title: JavaScript 概述 -slug: Web/JavaScript/Guide/JavaScript_Overview +slug: conflicting/Web/JavaScript/Guide/Introduction_6f341ba6db4b060ccbd8dce4a0d5214b tags: - ECMAScript translation_of: Web/JavaScript/Guide/Introduction translation_of_original: Web/JavaScript/Guide/JavaScript_Overview +original_slug: Web/JavaScript/Guide/JavaScript_Overview ---

    本节将介绍并讨论 JavaScript 的基本概念。

    diff --git a/files/zh-cn/conflicting/web/javascript/guide/regular_expressions/assertions/index.html b/files/zh-cn/conflicting/web/javascript/guide/regular_expressions/assertions/index.html index 8ff8e9730b..107bb6888f 100644 --- a/files/zh-cn/conflicting/web/javascript/guide/regular_expressions/assertions/index.html +++ b/files/zh-cn/conflicting/web/javascript/guide/regular_expressions/assertions/index.html @@ -1,7 +1,8 @@ --- title: Boundaries -slug: Web/JavaScript/Guide/Regular_Expressions/Boundaries +slug: conflicting/Web/JavaScript/Guide/Regular_Expressions/Assertions translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions translation_of_original: Web/JavaScript/Guide/Regular_Expressions/Boundaries +original_slug: Web/JavaScript/Guide/Regular_Expressions/Boundaries ---

    重定向至 断言

    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html index 92909dbef7..494ec5dcf7 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html @@ -1,10 +1,11 @@ --- title: ArrayBuffer.prototype -slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer tags: - ArrayBuffer translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer translation_of_original: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/boolean/index.html index cb7f351bd1..eb537d7bc5 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/boolean/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/boolean/index.html @@ -1,6 +1,6 @@ --- title: Boolean.prototype -slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Boolean tags: - Boolean - JavaScript @@ -8,6 +8,7 @@ tags: - Prototype translation_of: Web/JavaScript/Reference/Global_Objects/Boolean translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---

    {{JSRef}}

    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/dataview/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/dataview/index.html index 3285efa3d3..30e15c989e 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/dataview/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/dataview/index.html @@ -1,10 +1,11 @@ --- title: DataView.prototype -slug: Web/JavaScript/Reference/Global_Objects/DataView/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/DataView tags: - DataView属性 translation_of: Web/JavaScript/Reference/Global_Objects/DataView translation_of_original: Web/JavaScript/Reference/Global_Objects/DataView/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/DataView/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/date/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/date/index.html index da3d715018..4e113936d2 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/date/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/date/index.html @@ -1,12 +1,13 @@ --- title: Date.prototype -slug: Web/JavaScript/Reference/Global_Objects/Date/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Date tags: - Date - JavaScript - Property translation_of: Web/JavaScript/Reference/Global_Objects/Date translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Date/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/error/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/error/index.html index 420b5634de..86c93dcc85 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/error/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/error/index.html @@ -1,6 +1,6 @@ --- title: Error.prototype -slug: Web/JavaScript/Reference/Global_Objects/Error/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Error tags: - Error - JavaScript @@ -9,6 +9,7 @@ tags: - 属性 translation_of: Web/JavaScript/Reference/Global_Objects/Error translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Error/prototype ---

    {{JSRef}}

    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/evalerror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/evalerror/index.html index b68caa1f3f..7fe73a4749 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/evalerror/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/evalerror/index.html @@ -1,8 +1,9 @@ --- title: EvalError.prototype -slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/EvalError translation_of: Web/JavaScript/Reference/Global_Objects/EvalError translation_of_original: Web/JavaScript/Reference/Global_Objects/EvalError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/function/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/function/index.html index a745753511..b2d20b8cbd 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/function/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/function/index.html @@ -1,6 +1,6 @@ --- title: Function.prototype -slug: Web/JavaScript/Reference/Global_Objects/Function/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Function tags: - JavaScript - 函数 @@ -8,6 +8,7 @@ tags: - 原型属性 translation_of: Web/JavaScript/Reference/Global_Objects/Function translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Function/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html index 0f7179b3f5..b7f4c019f3 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html @@ -1,6 +1,6 @@ --- title: GeneratorFunction.prototype -slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction tags: - ECMAScript 2015 - GeneratorFunction @@ -11,6 +11,7 @@ tags: - Reference translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction translation_of_original: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html index f74e8f9cf5..9608a00425 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html @@ -1,8 +1,9 @@ --- title: Intl.DateTimeFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/map/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/map/index.html index d98bdfac5a..c05822ebf3 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/map/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/map/index.html @@ -1,8 +1,9 @@ --- title: Map.prototype -slug: Web/JavaScript/Reference/Global_Objects/Map/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Map translation_of: Web/JavaScript/Reference/Global_Objects/Map translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Map/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/number/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/number/index.html index 3abe34b74b..883a45707c 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/number/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/number/index.html @@ -1,8 +1,9 @@ --- title: Number.prototype -slug: Web/JavaScript/Reference/Global_Objects/Number/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Number translation_of: Web/JavaScript/Reference/Global_Objects/Number translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Number/prototype ---
    {{JSRef("Global_Objects", "Number")}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/object/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/object/index.html index 4dd70200f0..3d5f00217e 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/object/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/object/index.html @@ -1,12 +1,13 @@ --- title: Object.prototype -slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Object tags: - JavaScript - Object - Property translation_of: Web/JavaScript/Reference/Global_Objects/Object translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Object/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/promise/index.html index c9c7dc3f6a..034a88bd0c 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/promise/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/promise/index.html @@ -1,8 +1,9 @@ --- title: Promise.prototype -slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Promise translation_of: Web/JavaScript/Reference/Global_Objects/Promise translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype ---
    {{JSRef("Global_Objects", "Promise")}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/proxy/proxy/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/proxy/proxy/index.html index 26d1ad3517..ccc2299f1e 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/proxy/proxy/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/proxy/proxy/index.html @@ -1,12 +1,13 @@ --- title: Proxy handler -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy tags: - ECMAScript 2015 - JavaScript - Proxy translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy translation_of_original: Web/JavaScript/Reference/Global_Objects/Proxy/handler +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/rangeerror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/rangeerror/index.html index 0e2c78aedf..efe5781a05 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/rangeerror/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/rangeerror/index.html @@ -1,8 +1,9 @@ --- title: RangeError.prototype -slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/RangeError translation_of: Web/JavaScript/Reference/Global_Objects/RangeError translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/referenceerror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/referenceerror/index.html index 4cb00496ef..09306f2862 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/referenceerror/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/referenceerror/index.html @@ -1,6 +1,6 @@ --- title: ReferenceError.prototype -slug: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/ReferenceError tags: - Error - JavaScript @@ -9,6 +9,7 @@ tags: - ReferenceError translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError translation_of_original: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/regexp/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/regexp/index.html index 0c76cb77ac..740b32604b 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/regexp/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/regexp/index.html @@ -1,12 +1,13 @@ --- title: RegExp.prototype -slug: Web/JavaScript/Reference/Global_Objects/RegExp/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/RegExp tags: - JavaScript - Property - RegExp translation_of: Web/JavaScript/Reference/Global_Objects/RegExp translation_of_original: Web/JavaScript/Reference/Global_Objects/RegExp/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/RegExp/prototype ---

    {{JSRef("Global_Objects", "RegExp")}}

    概述

    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html index ccb6f2df65..41da127b42 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html @@ -1,11 +1,12 @@ --- title: SharedArrayBuffer.prototype -slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer tags: - Prototype - SharedArrayBuffer translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer translation_of_original: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/string/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/string/index.html index 00a9695a64..567c248d41 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/string/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/string/index.html @@ -1,6 +1,6 @@ --- title: String.prototype -slug: Web/JavaScript/Reference/Global_Objects/String/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/String tags: - JavaScript - 原型 @@ -9,6 +9,7 @@ tags: - 属性 translation_of: Web/JavaScript/Reference/Global_Objects/String translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/String/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/symbol/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/symbol/index.html index f00b37a223..b9ec4f2381 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/symbol/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/symbol/index.html @@ -1,8 +1,9 @@ --- title: Symbol.prototype -slug: Web/JavaScript/Reference/Global_Objects/Symbol/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Symbol translation_of: Web/JavaScript/Reference/Global_Objects/Symbol translation_of_original: Web/JavaScript/Reference/Global_Objects/Symbol/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Symbol/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html index 6f109510ef..9b7eb11a66 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html @@ -1,6 +1,6 @@ --- title: SyntaxError.prototype -slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError tags: - Error - JavaScript @@ -9,6 +9,7 @@ tags: - SyntaxError translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/typedarray/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/typedarray/index.html index ae9f64bf5e..61824a9cfe 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/typedarray/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/typedarray/index.html @@ -1,8 +1,9 @@ --- title: TypedArray.prototype -slug: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/TypedArray translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray translation_of_original: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/typeerror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/typeerror/index.html index 42abf0c422..d6daea2244 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/typeerror/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/typeerror/index.html @@ -1,6 +1,6 @@ --- title: TypeError.prototype -slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/TypeError tags: - Error - JavaScript @@ -9,6 +9,7 @@ tags: - 错误 translation_of: Web/JavaScript/Reference/Global_Objects/TypeError translation_of_original: Web/JavaScript/Reference/Global_Objects/TypeError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/urierror/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/urierror/index.html index c5d381250a..a3d35fa68c 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/urierror/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/urierror/index.html @@ -1,8 +1,9 @@ --- title: URIError.prototype -slug: Web/JavaScript/Reference/Global_Objects/URIError/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/URIError translation_of: Web/JavaScript/Reference/Global_Objects/URIError translation_of_original: Web/JavaScript/Reference/Global_Objects/URIError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/URIError/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakmap/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakmap/index.html index 27f1ff412a..4e5be33f06 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakmap/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakmap/index.html @@ -1,8 +1,9 @@ --- title: WeakMap.prototype -slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype ---
    {{JSRef}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakset/index.html b/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakset/index.html index 572ab1ac73..d06fca34dc 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakset/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/global_objects/weakset/index.html @@ -1,8 +1,9 @@ --- title: WeakSet.prototype -slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/WeakSet translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype ---
    {{JSRef("Global_Objects", "WeakSet")}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/lexical_grammar/index.html b/files/zh-cn/conflicting/web/javascript/reference/lexical_grammar/index.html index 0d52110bfa..e3cd47f9ab 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/lexical_grammar/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/lexical_grammar/index.html @@ -1,8 +1,9 @@ --- title: Reserved Words -slug: Web/JavaScript/Reference/Reserved_words +slug: conflicting/Web/JavaScript/Reference/Lexical_grammar translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords translation_of_original: Web/JavaScript/Reference/Reserved_Words +original_slug: Web/JavaScript/Reference/Reserved_words ---

     

    diff --git a/files/zh-cn/conflicting/web/javascript/reference/operators/index.html b/files/zh-cn/conflicting/web/javascript/reference/operators/index.html index 917ac03b06..a89cf74368 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/operators/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/operators/index.html @@ -1,11 +1,12 @@ --- title: 算术运算符 -slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators +slug: conflicting/Web/JavaScript/Reference/Operators tags: - JavaScript - Operator translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +original_slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---
    {{jsSidebar("Operators")}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html b/files/zh-cn/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html index 5ddf85f426..ae8635cf42 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html @@ -1,11 +1,13 @@ --- title: 比较操作符 -slug: Web/JavaScript/Reference/Operators/Comparison_Operators +slug: >- + conflicting/Web/JavaScript/Reference/Operators_310dc67549939233c3d18a8fa2cdbb23 tags: - 严格比较操作符 - 比较操作符 translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators +original_slug: Web/JavaScript/Reference/Operators/Comparison_Operators ---
    {{jsSidebar("Operators")}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html b/files/zh-cn/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html index 4bdd7a1bc7..63e6b408a0 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html @@ -1,10 +1,12 @@ --- title: 按位操作符 -slug: Web/JavaScript/Reference/Operators/Bitwise_Operators +slug: >- + conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 tags: - js ^ & Bitwise Operators translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators +original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators ---
    {{jsSidebar("Operators")}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html b/files/zh-cn/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html index 66ae471cde..0312efc731 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html @@ -1,11 +1,13 @@ --- title: 赋值运算符 -slug: Web/JavaScript/Reference/Operators/Assignment_Operators +slug: >- + conflicting/Web/JavaScript/Reference/Operators_8d54701de06af40a7c984517cbe87b3e tags: - JavaScript - 运算符 translation_of: Web/JavaScript/Reference/Operators#Assignment_operators translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators +original_slug: Web/JavaScript/Reference/Operators/Assignment_Operators ---
    {{jsSidebar("Operators")}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html b/files/zh-cn/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html index 5615e17d45..82b19641ea 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html @@ -1,12 +1,14 @@ --- title: 逻辑运算符 -slug: Web/JavaScript/Reference/Operators/Logical_Operators +slug: >- + conflicting/Web/JavaScript/Reference/Operators_f71733c8e7001a29c3ec40d8522a4aca tags: - JavaScript - 操作符 - 逻辑 translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +original_slug: Web/JavaScript/Reference/Operators/Logical_Operators ---
    {{jsSidebar("Operators")}}
    diff --git a/files/zh-cn/conflicting/web/javascript/reference/statements/switch/index.html b/files/zh-cn/conflicting/web/javascript/reference/statements/switch/index.html index 12e076166c..21d8c25aa3 100644 --- a/files/zh-cn/conflicting/web/javascript/reference/statements/switch/index.html +++ b/files/zh-cn/conflicting/web/javascript/reference/statements/switch/index.html @@ -1,11 +1,12 @@ --- title: default -slug: Web/JavaScript/Reference/Statements/default +slug: conflicting/Web/JavaScript/Reference/Statements/switch tags: - JavaScript - Keyword translation_of: Web/JavaScript/Reference/Statements/switch translation_of_original: Web/JavaScript/Reference/Statements/default +original_slug: Web/JavaScript/Reference/Statements/default ---
    {{jsSidebar("Statements")}}
    diff --git a/files/zh-cn/conflicting/web/media/formats/index.html b/files/zh-cn/conflicting/web/media/formats/index.html index d6a5d3753e..db84bd92bd 100644 --- a/files/zh-cn/conflicting/web/media/formats/index.html +++ b/files/zh-cn/conflicting/web/media/formats/index.html @@ -1,10 +1,11 @@ --- -title: 'HTML的媒体支持:audio和video元素' -slug: Web/HTML/Supported_media_formats +title: HTML的媒体支持:audio和video元素 +slug: conflicting/Web/Media/Formats tags: - HTML Media Video Audio translation_of: Web/Media/Formats translation_of_original: Web/HTML/Supported_media_formats +original_slug: Web/HTML/Supported_media_formats ---

        {{HTMLElement("audio")}} 和 {{HTMLElement("video")}}是浏览器内置的播放音频或视频的元素;视频和音频编解码器用来处理视频和音频，不同的编解码器提供不同级别的压缩率和分辨率；一个容器封装格式（多媒体容器格式）用来存储和传输编码后的视频和音频（如果视频带有音轨则同时；编解码器和多媒体容器格式有非常多的组合；尽管只有很少部分和WEB相关；
       
    diff --git a/files/zh-cn/conflicting/web/progressive_web_apps/index.html b/files/zh-cn/conflicting/web/progressive_web_apps/index.html index ca256085b4..aa326758ce 100644 --- a/files/zh-cn/conflicting/web/progressive_web_apps/index.html +++ b/files/zh-cn/conflicting/web/progressive_web_apps/index.html @@ -1,8 +1,9 @@ --- title: 响应式设计 -slug: Web_Development/Mobile/Responsive_design +slug: conflicting/Web/Progressive_web_apps translation_of: Web/Progressive_web_apps translation_of_original: Web/Guide/Responsive_design +original_slug: Web_Development/Mobile/Responsive_design ---

    在解决对桌面和移动环境开发网站这个问题上，与分离网站的方法相反，一种相对较新（其实相当古老）的方法渐渐流行起来：摒弃用户代理检测，而是在客户端根据浏览器的能力进行页面变化。这种方法最早是由Ethan Marcotte在他为A List Apart所写的文章中提出的，也就是我们所熟知的响应式设计。和分离网站设计方式一样，响应式设计也有自己的优势和弊端。

    优势

    diff --git a/files/zh-cn/conflicting/web/progressive_web_apps/introduction/index.html b/files/zh-cn/conflicting/web/progressive_web_apps/introduction/index.html index 809b1edb38..a84a3e5421 100644 --- a/files/zh-cn/conflicting/web/progressive_web_apps/introduction/index.html +++ b/files/zh-cn/conflicting/web/progressive_web_apps/introduction/index.html @@ -1,8 +1,9 @@ --- title: 渐进式webApp优势 -slug: Web/Progressive_web_apps/优势 +slug: conflicting/Web/Progressive_web_apps/Introduction translation_of: Web/Progressive_web_apps/Introduction#Advantages_of_web_applications translation_of_original: Web/Progressive_web_apps/Advantages +original_slug: Web/Progressive_web_apps/优势 ---

    以下是渐进式webApp所有的优势清单

    diff --git a/files/zh-cn/conflicting/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html b/files/zh-cn/conflicting/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html index 3177fc1c29..be5d77a388 100644 --- a/files/zh-cn/conflicting/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html +++ b/files/zh-cn/conflicting/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html @@ -1,6 +1,7 @@ --- title: Responsive design -slug: Web/Progressive_web_apps/Responsive +slug: >- + conflicting/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks tags: - Media Queries - PWA @@ -9,6 +10,7 @@ tags: - viewport translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks translation_of_original: Web/Progressive_web_apps/Responsive +original_slug: Web/Progressive_web_apps/Responsive ---
    响应式Web应用使用媒体查询和viewport等技术，以确保它们的页面适配任何设备，比如：桌面、移动手机、平板，或者其他新的设备。
    diff --git a/files/zh-cn/conflicting/web/progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f/index.html b/files/zh-cn/conflicting/web/progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f/index.html index 4b8b532173..5c0b464a8c 100644 --- a/files/zh-cn/conflicting/web/progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f/index.html +++ b/files/zh-cn/conflicting/web/progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f/index.html @@ -1,6 +1,6 @@ --- title: 网络独立 -slug: Web/Progressive_web_apps/Network_independent +slug: conflicting/Web/Progressive_web_apps_8afa7a63de0cecd1c19c3fdecf62f89f tags: - Application Shell - IndexedDB @@ -11,6 +11,7 @@ tags: - localStorage translation_of: Web/Progressive_web_apps translation_of_original: Web/Progressive_web_apps/Network_independent +original_slug: Web/Progressive_web_apps/Network_independent ---
    当网络不可靠，甚至不存在时，现代网络应用程序仍可以工作。没有更多的空白连接错误页面或恐龙穿过沙漠。除了离线高速缓存和服务工作者之外，UI和内容之间的一个明确的分隔可让您存储应用程序的数据和核心资产，以备将来使用。
    diff --git a/files/zh-cn/conflicting/web/progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67/index.html b/files/zh-cn/conflicting/web/progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67/index.html index 0ff507d2e6..8e7ebe12ef 100644 --- a/files/zh-cn/conflicting/web/progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67/index.html +++ b/files/zh-cn/conflicting/web/progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67/index.html @@ -1,6 +1,6 @@ --- title: Re-engageable -slug: Web/Progressive_web_apps/Re-engageable +slug: conflicting/Web/Progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67 tags: - Modern web apps - Notifications API @@ -9,6 +9,7 @@ tags: - Service Workers translation_of: Web/Progressive_web_apps translation_of_original: Web/Progressive_web_apps/Re-engageable +original_slug: Web/Progressive_web_apps/Re-engageable ---
    原生平台一个主要优势是，用户可以轻松通过更新或加载新内容，即使用户没有正在查看应用程序或者使用他们的设备。现在的Web应用程序现在也可以使用Web Push API等技术实现这样的功能。
    diff --git a/files/zh-cn/conflicting/web/web_components/using_shadow_dom/index.html b/files/zh-cn/conflicting/web/web_components/using_shadow_dom/index.html index 0d92962112..2037b78ce1 100644 --- a/files/zh-cn/conflicting/web/web_components/using_shadow_dom/index.html +++ b/files/zh-cn/conflicting/web/web_components/using_shadow_dom/index.html @@ -1,6 +1,6 @@ --- title: 影子DOM（Shadow DOM） -slug: Web/Web_Components/影子_DOM +slug: conflicting/Web/Web_Components/Using_shadow_DOM tags: - DocumentFragment - React @@ -9,6 +9,7 @@ tags: - shadow dom translation_of: Web/Web_Components/Using_shadow_DOM translation_of_original: Web/Web_Components/Shadow_DOM +original_slug: Web/Web_Components/影子_DOM ---

    {{ draft }}

    diff --git a/files/zh-cn/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/zh-cn/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html index 77433ca2d5..4225c159b8 100644 --- a/files/zh-cn/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html +++ b/files/zh-cn/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -1,6 +1,6 @@ --- title: Using XPath -slug: Using_XPath +slug: conflicting/Web/XPath/Introduction_to_using_XPath_in_JavaScript tags: - AJAX - Code snippets @@ -11,6 +11,7 @@ tags: - 所有分类 translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript translation_of_original: Using_XPath +original_slug: Using_XPath ---

    XPath is a language for addressing parts of an XML document. It is a W3C recommendation. diff --git a/files/zh-cn/games/introduction/index.html b/files/zh-cn/games/introduction/index.html index 67ffed62c0..681cd69958 100644 --- a/files/zh-cn/games/introduction/index.html +++ b/files/zh-cn/games/introduction/index.html @@ -1,11 +1,12 @@ --- title: Web 游戏开发简介 -slug: Games/简介 +slug: Games/Introduction tags: - 指引 - 游戏 - 移动端 translation_of: Games/Introduction +original_slug: Games/简介 ---

    {{GamesSidebar}}
    diff --git a/files/zh-cn/games/introduction_to_html5_game_development/index.html b/files/zh-cn/games/introduction_to_html5_game_development/index.html index 6d5cd2014a..10ff0e76e8 100644 --- a/files/zh-cn/games/introduction_to_html5_game_development/index.html +++ b/files/zh-cn/games/introduction_to_html5_game_development/index.html @@ -1,10 +1,11 @@ --- title: HTML5游戏开发简介 -slug: Games/Introduction_to_HTML5_Game_Gevelopment_(summary) +slug: Games/Introduction_to_HTML5_Game_Development tags: - Games - HTML5 translation_of: Games/Introduction_to_HTML5_Game_Development_(summary) +original_slug: Games/Introduction_to_HTML5_Game_Gevelopment_(summary) ---
    {{GamesSidebar}}
    {{IncludeSubnav("/zh-CN/docs/Games")}}
    diff --git a/files/zh-cn/games/publishing_games/game_monetization/index.html b/files/zh-cn/games/publishing_games/game_monetization/index.html index 5ab915f6b3..741fcf5e8d 100644 --- a/files/zh-cn/games/publishing_games/game_monetization/index.html +++ b/files/zh-cn/games/publishing_games/game_monetization/index.html @@ -1,12 +1,13 @@ --- title: 游戏货币化 -slug: Games/Publishing_games/游戏货币化 +slug: Games/Publishing_games/Game_monetization tags: - 推广 - 收入 - 游戏 - 销售 translation_of: Games/Publishing_games/Game_monetization +original_slug: Games/Publishing_games/游戏货币化 ---
    {{GamesSidebar}}
    diff --git a/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.html b/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.html index e9a9abaf15..becd3c6bd3 100644 --- a/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.html +++ b/files/zh-cn/games/techniques/control_mechanisms/mobile_touch/index.html @@ -1,7 +1,8 @@ --- title: 移动端触摸控制 -slug: Games/Techniques/Control_mechanisms/移动端触摸控制 +slug: Games/Techniques/Control_mechanisms/Mobile_touch translation_of: Games/Techniques/Control_mechanisms/Mobile_touch +original_slug: Games/Techniques/Control_mechanisms/移动端触摸控制 ---
    {{GamesSidebar}}
    diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html index baa5a514fc..166eea053e 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html @@ -1,6 +1,6 @@ --- title: 收尾工作 -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/收尾工作 +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up tags: - Canvas - JavaScript @@ -10,6 +10,7 @@ tags: - 游戏 - 生命 translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up +original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/收尾工作 ---
    {{GamesSidebar}}
    diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html index cb90cb8773..26858b378d 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html @@ -1,6 +1,6 @@ --- title: 鼠标控制 -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/鼠标控制 +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls tags: - Canvas - JavaScript @@ -10,6 +10,7 @@ tags: - 游戏 - 鼠标 translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls +original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/鼠标控制 ---
    {{GamesSidebar}}
    diff --git a/files/zh-cn/glossary/abstraction/index.html b/files/zh-cn/glossary/abstraction/index.html index a7497bdc94..852893d5ab 100644 --- a/files/zh-cn/glossary/abstraction/index.html +++ b/files/zh-cn/glossary/abstraction/index.html @@ -1,6 +1,6 @@ --- title: 抽象编程 -slug: Glossary/抽象编程 +slug: Glossary/Abstraction tags: - 名词解释 - 抽象 @@ -8,6 +8,7 @@ tags: - 编程脚本 - 编程语言 translation_of: Glossary/Abstraction +original_slug: Glossary/抽象编程 ---

    在计算机编程{{Glossary("computer programming")}}领域中，抽象编程指在研发大型复杂软件系统时，通过抽象的方法来降低编程复杂度，实现系统快速高效设计和开发的编程模式。它将系统各功能实现的技术细节隐藏在相对简单的 {{Glossary("API", "APIs")}}之后。

    diff --git a/files/zh-cn/glossary/algorithm/index.html b/files/zh-cn/glossary/algorithm/index.html index 8dcea73131..205c1f0b1d 100644 --- a/files/zh-cn/glossary/algorithm/index.html +++ b/files/zh-cn/glossary/algorithm/index.html @@ -1,10 +1,11 @@ --- title: 算法 -slug: Glossary/算法 +slug: Glossary/Algorithm tags: - 专业术语 - 编程基础 translation_of: Glossary/Algorithm +original_slug: Glossary/算法 ---

    算法是一个良定义的具体计算步骤的一个序列。

    diff --git a/files/zh-cn/glossary/arpa/index.html b/files/zh-cn/glossary/arpa/index.html index 8c30be2d15..034696aa1b 100644 --- a/files/zh-cn/glossary/arpa/index.html +++ b/files/zh-cn/glossary/arpa/index.html @@ -1,10 +1,11 @@ --- title: ARPA -slug: Glossary/地址路由参数域 +slug: Glossary/ARPA tags: - 专业术语 - 互联网服务基础设施 translation_of: Glossary/ARPA +original_slug: Glossary/地址路由参数域 ---

    .arpa (address and routing parameter area， 地址路由参数域 ) 是专门用来互联网基础设施配置的顶级域{{glossary("TLD","top-level domain")}} ，尤其是DNS反向解析，即从 {{glossary("IP 地址")}})找出旗下的主机名(i.e., find the {{glossary('domain name')}} 。

    diff --git a/files/zh-cn/glossary/asynchronous/index.html b/files/zh-cn/glossary/asynchronous/index.html index 0bc0353e3d..f00cce8b20 100644 --- a/files/zh-cn/glossary/asynchronous/index.html +++ b/files/zh-cn/glossary/asynchronous/index.html @@ -1,10 +1,11 @@ --- title: 异步 -slug: Glossary/异步 +slug: Glossary/Asynchronous tags: - 异步 - 术语表 translation_of: Glossary/Asynchronous +original_slug: Glossary/异步 ---

    异步指两个或两个以上的对象或事件不同时存在或发生（或多个相关事物的发生无需等待其前一事物的完成）。在计算机技术中，"异步"一词被用于两大语境。

    diff --git a/files/zh-cn/glossary/base64/index.html b/files/zh-cn/glossary/base64/index.html index 5da5d1e0f4..167f92aafc 100644 --- a/files/zh-cn/glossary/base64/index.html +++ b/files/zh-cn/glossary/base64/index.html @@ -1,7 +1,8 @@ --- title: Base64的编码与解码 -slug: Web/API/WindowBase64/Base64_encoding_and_decoding +slug: Glossary/Base64 translation_of: Glossary/Base64 +original_slug: Web/API/WindowBase64/Base64_encoding_and_decoding ---

    Base64 是一组相似的二进制到文本（binary-to-text）的编码规则，使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来。Base64 这个词出自一种 MIME 数据传输编码。 

    diff --git a/files/zh-cn/glossary/baseline/index.html b/files/zh-cn/glossary/baseline/index.html index 2158190685..12a262a0fd 100644 --- a/files/zh-cn/glossary/baseline/index.html +++ b/files/zh-cn/glossary/baseline/index.html @@ -1,7 +1,8 @@ --- title: 基线 -slug: Glossary/基线 +slug: Glossary/baseline translation_of: Glossary/baseline +original_slug: Glossary/基线 ---

    基线是指欧洲和西亚文字排版中，用于在上面放置字符的一条假象的基准线。

    diff --git a/files/zh-cn/glossary/browser/index.html b/files/zh-cn/glossary/browser/index.html index a52951c1b7..f3467d5f07 100644 --- a/files/zh-cn/glossary/browser/index.html +++ b/files/zh-cn/glossary/browser/index.html @@ -1,7 +1,8 @@ --- title: 浏览器 -slug: Glossary/浏览器 +slug: Glossary/Browser translation_of: Glossary/Browser +original_slug: Glossary/浏览器 ---

    网页浏览器是一种从 {{Glossary("World Wide Web","Web")}} 获取和显示页面的程序，并且让用户通过 {{Glossary("hyperlink","超链接")}} 访问更多页面。

    diff --git a/files/zh-cn/glossary/card_sorting/index.html b/files/zh-cn/glossary/card_sorting/index.html index 9d5a3c4ff5..392fe3038e 100644 --- a/files/zh-cn/glossary/card_sorting/index.html +++ b/files/zh-cn/glossary/card_sorting/index.html @@ -1,11 +1,12 @@ --- title: 卡片分类法 -slug: Glossary/卡片分类法 +slug: Glossary/Card_sorting tags: - 卡片分类法 - 名称 - 设计 translation_of: Glossary/Card_sorting +original_slug: Glossary/卡片分类法 ---

    卡片分类法是一种简单的技巧 ，{{glossary("Information architecture")}} 通常是邀请参与网站开发的设计师（或是开发其他类型产品的人），让他们写下他们认为这个产品应当包含的内容、服务和功能，然后将这些功能分组。一个很好的例子是考虑网站上每个页面应当显示什么样的内容。这个名字源于这个分类是通过把要分类的项目写在卡片上，再通过排列卡片完成的。

    diff --git a/files/zh-cn/glossary/character_encoding/index.html b/files/zh-cn/glossary/character_encoding/index.html index 40dbc7ca8a..30100d3032 100644 --- a/files/zh-cn/glossary/character_encoding/index.html +++ b/files/zh-cn/glossary/character_encoding/index.html @@ -1,10 +1,11 @@ --- title: Character encoding（字符编码） -slug: Glossary/字符编码 +slug: Glossary/character_encoding tags: - 术语 - 术语表 translation_of: Glossary/character_encoding +original_slug: Glossary/字符编码 ---

    一套编码系统定义字节与文本间的映射。一连串字节文本能让不同文本解释得以进行。我们指明一套特定编码系统时（如 UTF-8），也就指明了字节得以解释的方式。

    diff --git a/files/zh-cn/glossary/compile/index.html b/files/zh-cn/glossary/compile/index.html index 0e11863653..0c25619c9e 100644 --- a/files/zh-cn/glossary/compile/index.html +++ b/files/zh-cn/glossary/compile/index.html @@ -1,7 +1,8 @@ --- title: 编译 -slug: Glossary/编译 +slug: Glossary/Compile translation_of: Glossary/Compile +original_slug: Glossary/编译 ---

    编译是将相同的程序从一种计算机程序语言转换到另一种语言计算机语言的过程。编译器是运行上述任务的软件。有时候，任务也被称为“汇编”或“构建”，这通常表示不仅仅编译完成，例如，用二进制格式进行打包。

    diff --git a/files/zh-cn/glossary/compile_time/index.html b/files/zh-cn/glossary/compile_time/index.html index 8c94f6fa5f..fee2476d44 100644 --- a/files/zh-cn/glossary/compile_time/index.html +++ b/files/zh-cn/glossary/compile_time/index.html @@ -1,7 +1,8 @@ --- title: 编译时间 -slug: Glossary/编译时间 +slug: Glossary/Compile_time translation_of: Glossary/Compile_time +original_slug: Glossary/编译时间 ---

    编译时间是指程序从被加载到程序被解析完成所用的时间。

    diff --git a/files/zh-cn/glossary/cross_axis/index.html b/files/zh-cn/glossary/cross_axis/index.html index 27412c4d85..63d0665cce 100644 --- a/files/zh-cn/glossary/cross_axis/index.html +++ b/files/zh-cn/glossary/cross_axis/index.html @@ -1,7 +1,8 @@ --- title: 交叉轴 -slug: Glossary/交叉轴 +slug: Glossary/Cross_Axis translation_of: Glossary/Cross_Axis +original_slug: Glossary/交叉轴 ---

    弹性容器 {{glossary("flexbox")}} 的交叉轴和主轴 {{glossary("main axis")}} 垂直，因此如果弹性方向是 {{cssxref("flex-direction")}} 行 row 或者反向行 row-reverse ，那么交叉轴就是从上至下地垂直走向的。

    diff --git a/files/zh-cn/glossary/database/index.html b/files/zh-cn/glossary/database/index.html index d26907d711..5b0c1a3082 100644 --- a/files/zh-cn/glossary/database/index.html +++ b/files/zh-cn/glossary/database/index.html @@ -1,9 +1,10 @@ --- title: 数据库 -slug: Glossary/数据库 +slug: Glossary/Database tags: - 数据库 translation_of: Glossary/Database +original_slug: Glossary/数据库 ---

    数据库是一种用于收集已组织好的数据以便于搜索、结构化和扩充的存储系统。

    diff --git a/files/zh-cn/glossary/dhtml/index.html b/files/zh-cn/glossary/dhtml/index.html index c04ab59714..eac83d1582 100644 --- a/files/zh-cn/glossary/dhtml/index.html +++ b/files/zh-cn/glossary/dhtml/index.html @@ -1,7 +1,8 @@ --- title: DHTML -slug: DHTML +slug: Glossary/DHTML translation_of: Glossary/DHTML +original_slug: DHTML ---

    1、DHTML 对象 !DOCTYPE 指定了 HTML 文档遵循的文档类型定义(DTD)。

    a 标明超链接的起始或目的位置。

    diff --git a/files/zh-cn/glossary/digital_certificate/index.html b/files/zh-cn/glossary/digital_certificate/index.html index 0f6702c480..297334bfc6 100644 --- a/files/zh-cn/glossary/digital_certificate/index.html +++ b/files/zh-cn/glossary/digital_certificate/index.html @@ -1,7 +1,8 @@ --- title: 数字证书 -slug: Glossary/数字证书 +slug: Glossary/Digital_certificate translation_of: Glossary/Digital_certificate +original_slug: Glossary/数字证书 ---

    数字证书是一个将公开的{{Glossary("Key", "加密密钥")}}和一个组织绑定的数据文件。 一个数字证书包含一个组织的信息，如公共名称（例如mozilla.org），组织单元（例如Mozilla Corporation）以及位置（例如Mountain View）。数字证书通常由{{Glossary("certificate authority")}}签署，以证明其真实性。

    diff --git a/files/zh-cn/glossary/domain_name/index.html b/files/zh-cn/glossary/domain_name/index.html index cb88cc041b..8aea5446be 100644 --- a/files/zh-cn/glossary/domain_name/index.html +++ b/files/zh-cn/glossary/domain_name/index.html @@ -1,7 +1,8 @@ --- title: 域名 -slug: Glossary/域名 +slug: Glossary/Domain_name translation_of: Glossary/Domain_name +original_slug: Glossary/域名 ---

    域名是在 {{Glossary("Internet", "互联网")}} 的网站的地址。域名被用于 {{Glossary("URL","URL")}} 识别一个服务器属于哪个特定的网站。域名包含由句号点（”.“）分隔的名称（标签）的分级序列并以 {{glossary("TLD","扩展名")}} 作为结尾。

    diff --git a/files/zh-cn/glossary/element/index.html b/files/zh-cn/glossary/element/index.html index d199da5b07..c5ac84aedb 100644 --- a/files/zh-cn/glossary/element/index.html +++ b/files/zh-cn/glossary/element/index.html @@ -1,12 +1,13 @@ --- title: Element（元素） -slug: Glossary/元素 +slug: Glossary/Element tags: - HTML - XML - 术语 - 编程 translation_of: Glossary/Element +original_slug: Glossary/元素 ---

    元素是网页的一部分，在 {{glossary("XML")}} 和 {{glossary("HTML")}} 中，一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含。 一个典型的元素包括一个具有一些{{glossary("attribute", "属性")}}的开始标签，中间的文本内容和一个结束标签。
    Example: in <p class="nice">Hello world!</p>, '<p class="nice">' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '</p>' is a closing tag.

    diff --git a/files/zh-cn/glossary/empty_element/index.html b/files/zh-cn/glossary/empty_element/index.html index 6d9fb8d229..38fd275e74 100644 --- a/files/zh-cn/glossary/empty_element/index.html +++ b/files/zh-cn/glossary/empty_element/index.html @@ -1,11 +1,12 @@ --- title: 空元素 -slug: Glossary/空元素 +slug: Glossary/Empty_element tags: - Glossary - 中级 - 词汇 translation_of: Glossary/Empty_element +original_slug: Glossary/空元素 ---

    一个空元素（empty element）可能是 HTML，SVG，或者 MathML 里的一个不能存在子节点（例如内嵌的元素或者元素内的文本）的{{Glossary("element")}}。

    diff --git a/files/zh-cn/glossary/forbidden_header_name/index.html b/files/zh-cn/glossary/forbidden_header_name/index.html index 6e14c9b0a1..022d54690f 100644 --- a/files/zh-cn/glossary/forbidden_header_name/index.html +++ b/files/zh-cn/glossary/forbidden_header_name/index.html @@ -1,7 +1,8 @@ --- title: 禁止修改的消息首部 -slug: Glossary/禁止修改的消息首部 +slug: Glossary/Forbidden_header_name translation_of: Glossary/Forbidden_header_name +original_slug: Glossary/禁止修改的消息首部 ---

    禁止修改的消息首部指的是不能在代码中通过编程的方式进行修改的HTTP协议消息首部。本文仅讨论相关的HTTP请求首部（关于禁止修改的响应首部，请参考 {{Glossary("Forbidden response header name")}}）。

    diff --git a/files/zh-cn/glossary/general_header/index.html b/files/zh-cn/glossary/general_header/index.html index acb1f99edf..6c03d3605a 100644 --- a/files/zh-cn/glossary/general_header/index.html +++ b/files/zh-cn/glossary/general_header/index.html @@ -1,10 +1,11 @@ --- title: General header（通用首部） -slug: Glossary/通用首部 +slug: Glossary/General_header tags: - HTTP - 术语 translation_of: Glossary/General_header +original_slug: Glossary/通用首部 ---

    通用首部指的是可以应用于请求和响应中，但是不能应用于消息内容自身的 {{glossary('Header', 'HTTP 首部')}} 。 取决于应用的上下文环境，通用首部可以是{{glossary("Response header", "响应头部")}}或者{{glossary("request header", "请求头部")}}。但是不可以是{{glossary("entity header", "实体头部")}}。

    diff --git a/files/zh-cn/glossary/graceful_degradation/index.html b/files/zh-cn/glossary/graceful_degradation/index.html index acd22a665e..2982cc0074 100644 --- a/files/zh-cn/glossary/graceful_degradation/index.html +++ b/files/zh-cn/glossary/graceful_degradation/index.html @@ -1,11 +1,12 @@ --- title: Graceful degradation（优雅降级） -slug: Glossary/优雅降级 +slug: Glossary/Graceful_degradation tags: - 优雅降级 - 设计 - 词汇表 translation_of: Glossary/Graceful_degradation +original_slug: Glossary/优雅降级 ---

    优雅降级（Graceful degradation）是一种设计理念，其核心是尝试构建可在最新浏览器中运行的现代网站/应用程序，而作为降级体验，在低版本浏览器中仍然提供必要的内容和功能。

    diff --git a/files/zh-cn/glossary/http_header/index.html b/files/zh-cn/glossary/http_header/index.html index a79ef62498..e176995fc8 100644 --- a/files/zh-cn/glossary/http_header/index.html +++ b/files/zh-cn/glossary/http_header/index.html @@ -1,11 +1,12 @@ --- title: HTTP header（HTTP 首部） -slug: Glossary/Header +slug: Glossary/HTTP_header tags: - Glossary - HTTP - 术语 translation_of: Glossary/HTTP_header +original_slug: Glossary/Header ---

    HTTP header（HTTP 首部，HTTP 头）表示在 HTTP 请求或响应中的用来传递附加信息的字段，修改所传递的消息（或者消息主体）的语义，或者使其更加精确。消息首部不区分大小写，开始于一行的开头，后面紧跟着一个 ':' 和与之相关的值。字段值在一个换行符（CRLF）前或者整个消息的末尾结束。

    diff --git a/files/zh-cn/glossary/idempotent/index.html b/files/zh-cn/glossary/idempotent/index.html index cc8b22c143..e0dde60f23 100644 --- a/files/zh-cn/glossary/idempotent/index.html +++ b/files/zh-cn/glossary/idempotent/index.html @@ -1,10 +1,11 @@ --- title: 幂等 -slug: Glossary/幂等 +slug: Glossary/Idempotent tags: - Glossary - WebMechanics translation_of: Glossary/Idempotent +original_slug: Glossary/幂等 ---

    一个HTTP方法是幂等的，指的是同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的。换句话说就是，幂等方法不应该具有副作用（统计用途除外）。在正确实现的条件下， {{HTTPMethod("GET")}} ， {{HTTPMethod("HEAD")}} ， {{HTTPMethod("PUT")}} 和 {{HTTPMethod("DELETE")}}  等方法都是幂等的，而  {{HTTPMethod("POST")}}  方法不是。所有的 {{glossary("safe")}} 方法也都是幂等的。

    diff --git a/files/zh-cn/glossary/iife/index.html b/files/zh-cn/glossary/iife/index.html index 659d1e8670..1150a22614 100644 --- a/files/zh-cn/glossary/iife/index.html +++ b/files/zh-cn/glossary/iife/index.html @@ -1,12 +1,13 @@ --- title: IIFE（立即调用函数表达式） -slug: Glossary/立即执行函数表达式 +slug: Glossary/IIFE tags: - CodingScripting - Glossary - JavaScript - 术语 translation_of: Glossary/IIFE +original_slug: Glossary/立即执行函数表达式 ---

    IIFE（ 立即调用函数表达式）是一个在定义时就会立即执行的  {{glossary("JavaScript")}} {{glossary("function","函数")}}。

    diff --git a/files/zh-cn/glossary/ip_address/index.html b/files/zh-cn/glossary/ip_address/index.html index 52686f1c20..396969dc8e 100644 --- a/files/zh-cn/glossary/ip_address/index.html +++ b/files/zh-cn/glossary/ip_address/index.html @@ -1,11 +1,12 @@ --- title: IP地址 -slug: Glossary/IP地址 +slug: Glossary/IP_Address tags: - IP地址 - 初学者 - 术语表 translation_of: Glossary/IP_Address +original_slug: Glossary/IP地址 ---

    IP地址是分配给连接到使用Internet协议的网络的每个设备的一串数字。

    diff --git a/files/zh-cn/glossary/localization/index.html b/files/zh-cn/glossary/localization/index.html index aafe809a5d..1ba3b8bed6 100644 --- a/files/zh-cn/glossary/localization/index.html +++ b/files/zh-cn/glossary/localization/index.html @@ -1,7 +1,8 @@ --- title: 本地化 -slug: Localization +slug: Glossary/Localization translation_of: Glossary/Localization +original_slug: Localization ---

    Localization (L10n) is the process of translating software user interfaces from one language to another and adapting it to suit a foreign culture. These resources are for anyone with an interest in the technical aspects involved in localization. They are for developers and all contributors.

    diff --git a/files/zh-cn/glossary/main_axis/index.html b/files/zh-cn/glossary/main_axis/index.html index c3c8b91de1..aaee256e7d 100644 --- a/files/zh-cn/glossary/main_axis/index.html +++ b/files/zh-cn/glossary/main_axis/index.html @@ -1,7 +1,8 @@ --- title: 主轴 -slug: Glossary/主轴 +slug: Glossary/Main_Axis translation_of: Glossary/Main_Axis +original_slug: Glossary/主轴 ---

    主轴是由弹性容器 {{glossary("flexbox")}} 中弹性方向 {{cssxref("flex-direction")}} 属性所定义的的。弹性方向 flex-direction  有4个可能的值，分别是：

    diff --git a/files/zh-cn/glossary/oop/index.html b/files/zh-cn/glossary/oop/index.html index 4f2793cc69..b4163352cd 100644 --- a/files/zh-cn/glossary/oop/index.html +++ b/files/zh-cn/glossary/oop/index.html @@ -1,11 +1,12 @@ --- title: OOP -slug: Glossary/面向对象编程 +slug: Glossary/OOP tags: - 初学者 - 术语 - 编写脚本 translation_of: Glossary/OOP +original_slug: Glossary/面向对象编程 ---

    OOP（面向对象编程）是一种编程方法，其中数据封装在{{glossary("object","对象")}}中，对象本身在其上运行，而不是其组成部分。

    diff --git a/files/zh-cn/glossary/origin/index.html b/files/zh-cn/glossary/origin/index.html index 83090ee98f..ed3ce153e8 100644 --- a/files/zh-cn/glossary/origin/index.html +++ b/files/zh-cn/glossary/origin/index.html @@ -1,7 +1,8 @@ --- title: Origin -slug: Glossary/源 +slug: Glossary/Origin translation_of: Glossary/Origin +original_slug: Glossary/源 ---

    Web内容的源由用于访问它的{{Glossary("URL")}} 的方案(协议)，主机(域名)和端口定义。只有当方案，主机和端口都匹配时，两个对象具有相同的起源。

    diff --git a/files/zh-cn/glossary/progressive_enhancement/index.html b/files/zh-cn/glossary/progressive_enhancement/index.html index 7a0b586b9a..ebb2d01925 100644 --- a/files/zh-cn/glossary/progressive_enhancement/index.html +++ b/files/zh-cn/glossary/progressive_enhancement/index.html @@ -1,11 +1,12 @@ --- title: 渐进增强 -slug: Glossary/渐进增强 +slug: Glossary/Progressive_Enhancement tags: - 无障碍 - 设计 - 词汇表 translation_of: Glossary/Progressive_Enhancement +original_slug: Glossary/渐进增强 ---

    渐进增强（Progressive enhancement）是一种设计理念，其核心是为尽可能多的用户提供基本内容和功能，同时进一步为现代化浏览器用户提供最佳体验，运行所有需要的代码。

    diff --git a/files/zh-cn/glossary/proxy_server/index.html b/files/zh-cn/glossary/proxy_server/index.html index 86774d0a71..1e680cfedf 100644 --- a/files/zh-cn/glossary/proxy_server/index.html +++ b/files/zh-cn/glossary/proxy_server/index.html @@ -1,11 +1,12 @@ --- title: 代理服务器 -slug: Glossary/代理服务器 +slug: Glossary/Proxy_server tags: - 代理 - 服务器 - 术语 translation_of: Glossary/Proxy_server +original_slug: Glossary/代理服务器 ---

    代理服务器 是用来在不同Internet网络之间进行导航的中继软件或者计算机。 它们有助于访问万维网上的内容。代理服务器会拦截请求并提供响应；它不一定会转发所有请求（比如说在有缓存的情况）， 而且也许会修改请求或者响应 （比如说在两个网络环境边界的时候修改请求头部信息）。

    diff --git a/files/zh-cn/glossary/pseudo-class/index.html b/files/zh-cn/glossary/pseudo-class/index.html index 56c818928f..066340f11a 100644 --- a/files/zh-cn/glossary/pseudo-class/index.html +++ b/files/zh-cn/glossary/pseudo-class/index.html @@ -1,11 +1,12 @@ --- title: 伪类 -slug: Glossary/伪类 +slug: Glossary/Pseudo-class tags: - CSS - 伪类 - 选择器 translation_of: Glossary/Pseudo-class +original_slug: Glossary/伪类 ---

    在 CSS 中, 一个伪类选择器只依据元素的状态, 而不是元素在文档树中的信息, 来选择目标对象.举例来说, 选择器 a{{ cssxref(":visited") }} 仅仅应用于那些用户已经浏览过的连接.

    diff --git a/files/zh-cn/glossary/request_header/index.html b/files/zh-cn/glossary/request_header/index.html index 666ace7ea4..82c98704fc 100644 --- a/files/zh-cn/glossary/request_header/index.html +++ b/files/zh-cn/glossary/request_header/index.html @@ -1,10 +1,11 @@ --- title: Request header（请求头） -slug: Glossary/请求头 +slug: Glossary/Request_header tags: - HTTP - 术语 translation_of: Glossary/Request_header +original_slug: Glossary/请求头 ---

    请求头是 {{glossary("header", "HTTP 头")}}的一种，它可在 HTTP 请求中使用，并且和请求主体无关 。某些请求头如 {{HTTPHeader("Accept")}}、{{HTTPHeader("Accept-Language", "Accept-*")}}、 {{HTTPHeader("If-Modified-Since", "If-*")}} 允许执行条件请求。某些请求头如：{{HTTPHeader("Cookie")}}, {{HTTPHeader("User-Agent")}} 和 {{HTTPHeader("Referer")}} 描述了请求本身以确保服务端能返回正确的响应。

    diff --git a/files/zh-cn/glossary/semantics/index.html b/files/zh-cn/glossary/semantics/index.html index 54cb20f0b9..201d6e91c1 100644 --- a/files/zh-cn/glossary/semantics/index.html +++ b/files/zh-cn/glossary/semantics/index.html @@ -1,11 +1,12 @@ --- title: Semantics（语义） -slug: Glossary/语义 +slug: Glossary/Semantics tags: - 编程 - 语义 - 语义化 translation_of: Glossary/Semantics +original_slug: Glossary/语义 ---

    在编程中，语义指的是一段代码的含义 — 例如 "运行这行 JavaScript 代码会产生怎样的影响?", 或者 "这个 HTML 的元素有什么作用，扮演了什么样的角色"（而不只是 "它看上去像是什么?"。）

    diff --git a/files/zh-cn/glossary/serialization/index.html b/files/zh-cn/glossary/serialization/index.html index 8405434f3e..1a90c7754a 100644 --- a/files/zh-cn/glossary/serialization/index.html +++ b/files/zh-cn/glossary/serialization/index.html @@ -1,12 +1,13 @@ --- title: Serialize -slug: Glossary/Serialize +slug: Glossary/Serialization tags: - Glossary - JavaScript - Serialize translation_of: Glossary/Serialization translation_of_original: Glossary/Serialize +original_slug: Glossary/Serialize ---

    序列化（Serialization ）意味着将 {{Glossary("object", "对象")}} 或某种其他类型的数据结构转换为可存储格式（例如，文件或 {{Glossary("buffer")}}）。

    diff --git a/files/zh-cn/glossary/simple_header/index.html b/files/zh-cn/glossary/simple_header/index.html index c2c1f71d4f..846fc193cd 100644 --- a/files/zh-cn/glossary/simple_header/index.html +++ b/files/zh-cn/glossary/simple_header/index.html @@ -1,11 +1,12 @@ --- title: 简单头部 -slug: Glossary/简单头部 +slug: Glossary/Simple_header tags: - HTTP - 简单头部 - 跨域 translation_of: Glossary/Simple_header +original_slug: Glossary/简单头部 ---

    以下的 HTTP headers都可以被认为是简单头部:

    diff --git a/files/zh-cn/glossary/sloppy_mode/index.html b/files/zh-cn/glossary/sloppy_mode/index.html index 3856bd5b35..24df3556d6 100644 --- a/files/zh-cn/glossary/sloppy_mode/index.html +++ b/files/zh-cn/glossary/sloppy_mode/index.html @@ -1,7 +1,8 @@ --- title: 正常模式 -slug: Glossary/正常模式 +slug: Glossary/Sloppy_mode translation_of: Glossary/Sloppy_mode +original_slug: Glossary/正常模式 ---

    因为翻译原因，正常模式也被翻译为——马虎模式/稀松模式/懒散模式

    diff --git a/files/zh-cn/glossary/speculative_parsing/index.html b/files/zh-cn/glossary/speculative_parsing/index.html index bded58d8fd..6d3b064353 100644 --- a/files/zh-cn/glossary/speculative_parsing/index.html +++ b/files/zh-cn/glossary/speculative_parsing/index.html @@ -1,7 +1,8 @@ --- title: 对页面预解析进行优化 -slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing +slug: Glossary/speculative_parsing translation_of: Glossary/speculative_parsing +original_slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing ---

    在传统的浏览器中，HTML 解析器运行于主线程之中，并且在遇到 </script> 标签后会被阻塞，直到脚本从网络中被获取和执行。 Firefox 4 和后续的版本支持从主线程中分离的预解析技术。 当脚本在获取和执行的过程中，预解析技术能提前解析HTML文档。在Firefox 3.5 和 3.6中, HTML 解析器能够在文档流中预先加载脚本、层叠样式表和图片。然而, 在Firefox 4 和后续的版本中 HTML 解析器也预先运行HTML 树构建算法。 这一举措的优点是当预解析成功后，就没有必要再重新解析已经扫描过并且成功下载的脚本，层叠样式表和图片；缺点就是当预解析失败之后，有很多工作需要去做。

    diff --git a/files/zh-cn/glossary/time_to_first_byte/index.html b/files/zh-cn/glossary/time_to_first_byte/index.html index 8bcc8f0ce9..2fbd4fa934 100644 --- a/files/zh-cn/glossary/time_to_first_byte/index.html +++ b/files/zh-cn/glossary/time_to_first_byte/index.html @@ -1,7 +1,8 @@ --- title: 第一字节时间 -slug: Glossary/第一字节时间 +slug: Glossary/time_to_first_byte translation_of: Glossary/time_to_first_byte +original_slug: Glossary/第一字节时间 ---

    第一字节时间（TTFB）是指从浏览器请求页面到从浏览器接收来自服务器发送的信息的第一个字节的时间。这一次包括DNS查找和使用（三次）TCP握手和SSL握手建立连接（如果请求是通过https发出的）。

    diff --git a/files/zh-cn/glossary/type_conversion/index.html b/files/zh-cn/glossary/type_conversion/index.html index 7d1eb4c23e..863855caad 100644 --- a/files/zh-cn/glossary/type_conversion/index.html +++ b/files/zh-cn/glossary/type_conversion/index.html @@ -1,11 +1,12 @@ --- title: Type conversion（类型转换） -slug: Glossary/类型转换 +slug: Glossary/Type_Conversion tags: - Type - 术语 - 类型 translation_of: Glossary/Type_Conversion +original_slug: Glossary/类型转换 ---

    类型转换（或类型变换；英文：Type conversion, typecasting）是指将数据由一种类型变换为另一种类型。在编译器自动赋值时,会发生隐式转换，但在代码中，也可以用一些写法强制要求进行显式转换。例如：在表达式 5 + 2.0 中，整数 5 被隐式转换为浮点数，但 Number("0x11") 和 "0x11" 则被显式转换为数字 17。

    diff --git a/files/zh-cn/glossary/xhtml/index.html b/files/zh-cn/glossary/xhtml/index.html index e562ccca94..276b4aed22 100644 --- a/files/zh-cn/glossary/xhtml/index.html +++ b/files/zh-cn/glossary/xhtml/index.html @@ -1,7 +1,8 @@ --- title: XHTML -slug: XHTML +slug: Glossary/XHTML translation_of: Glossary/XHTML +original_slug: XHTML ---

    W3C标准 XHTML

    diff --git a/files/zh-cn/learn/accessibility/css_and_javascript/index.html b/files/zh-cn/learn/accessibility/css_and_javascript/index.html index bdc3b01b2e..a7177d31be 100644 --- a/files/zh-cn/learn/accessibility/css_and_javascript/index.html +++ b/files/zh-cn/learn/accessibility/css_and_javascript/index.html @@ -1,6 +1,6 @@ --- title: CSS 和 JavaScript 无障碍最佳实践 -slug: learn/Accessibility/CSS和JavaScript +slug: Learn/Accessibility/CSS_and_JavaScript tags: - CSS - hiding @@ -13,6 +13,7 @@ tags: - 编码脚本 - 颜色 translation_of: Learn/Accessibility/CSS_and_JavaScript +original_slug: learn/Accessibility/CSS和JavaScript ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/accessibility/html/index.html b/files/zh-cn/learn/accessibility/html/index.html index beeb753338..2f3786fbaa 100644 --- a/files/zh-cn/learn/accessibility/html/index.html +++ b/files/zh-cn/learn/accessibility/html/index.html @@ -1,7 +1,8 @@ --- title: 'HTML: 为可访问性提供一个良好的基础' -slug: 'learn/Accessibility/HTML:为可访问性提供一个良好的基础' +slug: Learn/Accessibility/HTML translation_of: Learn/Accessibility/HTML +original_slug: learn/Accessibility/HTML:为可访问性提供一个良好的基础 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/accessibility/multimedia/index.html b/files/zh-cn/learn/accessibility/multimedia/index.html index 660ebca836..4d496aabbc 100644 --- a/files/zh-cn/learn/accessibility/multimedia/index.html +++ b/files/zh-cn/learn/accessibility/multimedia/index.html @@ -1,7 +1,8 @@ --- title: 多媒体的可访问性(Accessible multimedia) -slug: learn/Accessibility/多媒体 +slug: Learn/Accessibility/Multimedia translation_of: Learn/Accessibility/Multimedia +original_slug: learn/Accessibility/多媒体 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/common_questions/available_text_editors/index.html b/files/zh-cn/learn/common_questions/available_text_editors/index.html index f8f394191d..0262d3075b 100644 --- a/files/zh-cn/learn/common_questions/available_text_editors/index.html +++ b/files/zh-cn/learn/common_questions/available_text_editors/index.html @@ -1,7 +1,8 @@ --- title: 什么文本编辑器比较好用？ -slug: Learn/Common_questions/实用文本编辑器 +slug: Learn/Common_questions/Available_text_editors translation_of: Learn/Common_questions/Available_text_editors +original_slug: Learn/Common_questions/实用文本编辑器 ---
    {{IncludeSubnav("/en-US/Learn")}}
    diff --git a/files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html b/files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html index ab8eee6e1a..4a97efee07 100644 --- a/files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html +++ b/files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html @@ -1,7 +1,8 @@ --- title: 互联网是如何工作的 -slug: learn/How_the_Internet_works +slug: Learn/Common_questions/How_does_the_Internet_work translation_of: Learn/Common_questions/How_does_the_Internet_work +original_slug: learn/How_the_Internet_works ---

     这篇文章讨论什么是互联网以及它是如何工作的.

    diff --git a/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html b/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html index 69081b9745..2626700a44 100644 --- a/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html +++ b/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html @@ -1,10 +1,11 @@ --- title: 什么是浏览器开发者工具？ -slug: Learn/Discover_browser_developer_tools +slug: Learn/Common_questions/What_are_browser_developer_tools tags: - 开发工具 - 调试 translation_of: Learn/Common_questions/What_are_browser_developer_tools +original_slug: Learn/Discover_browser_developer_tools ---

    每一个现代网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的HTML、CSS和JavaScript，显示每个资源页面的请求以及载入所花费的时间。本文阐述了如何利用浏览器的开发工具的基本功能。

    diff --git a/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html index 6ddd1d114b..7e2fca613e 100644 --- a/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html +++ b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html @@ -1,7 +1,8 @@ --- title: 一个漂亮的盒子 -slug: Learn/CSS/Styling_boxes/A_cool_looking_box +slug: Learn/CSS/Building_blocks/A_cool_looking_box translation_of: Learn/CSS/Building_blocks/A_cool_looking_box +original_slug: Learn/CSS/Styling_boxes/A_cool_looking_box ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html index 692071dfde..14bad4558c 100644 --- a/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html +++ b/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html @@ -1,7 +1,8 @@ --- title: 创建精美的信纸 -slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper +slug: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper +original_slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html index b246af87fe..b70839097d 100644 --- a/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html +++ b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -1,12 +1,13 @@ --- title: 基本的CSS理解 -slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension +slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension tags: - 初学者 - 盒模型 - 评估 - 选择器 translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +original_slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html index f907c93a3c..58b9c5a12e 100644 --- a/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html +++ b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html @@ -1,7 +1,8 @@ --- title: 处理不同方向的文本 -slug: Learn/CSS/Building_blocks/处理_不同_方向的_文本 +slug: Learn/CSS/Building_blocks/Handling_different_text_directions translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions +original_slug: Learn/CSS/Building_blocks/处理_不同_方向的_文本 ---
    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
    diff --git a/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.html b/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.html index 58313b6fdd..958a6626ea 100644 --- a/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.html +++ b/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.html @@ -1,7 +1,8 @@ --- title: 传统的布局方法 -slug: Learn/CSS/CSS_layout/传统的布局方法 +slug: Learn/CSS/CSS_layout/Legacy_Layout_Methods translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods +original_slug: Learn/CSS/CSS_layout/传统的布局方法 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/css/css_layout/positioning/index.html b/files/zh-cn/learn/css/css_layout/positioning/index.html index cbfa094300..3965d4bef1 100644 --- a/files/zh-cn/learn/css/css_layout/positioning/index.html +++ b/files/zh-cn/learn/css/css_layout/positioning/index.html @@ -1,6 +1,6 @@ --- title: 定位 -slug: Learn/CSS/CSS_layout/定位 +slug: Learn/CSS/CSS_layout/Positioning tags: - CSS - 初学者 @@ -10,6 +10,7 @@ tags: - 相对定位 - 绝对定位 translation_of: Learn/CSS/CSS_layout/Positioning +original_slug: Learn/CSS/CSS_layout/定位 ---

    {{LearnSidebar}}

    diff --git a/files/zh-cn/learn/css/first_steps/getting_started/index.html b/files/zh-cn/learn/css/first_steps/getting_started/index.html index 0a6087ee12..d8a315fba4 100644 --- a/files/zh-cn/learn/css/first_steps/getting_started/index.html +++ b/files/zh-cn/learn/css/first_steps/getting_started/index.html @@ -1,6 +1,6 @@ --- title: 让我们开始CSS的学习之旅 -slug: Learn/CSS/First_steps/开始 +slug: Learn/CSS/First_steps/Getting_started tags: - CSS - 元素 @@ -9,6 +9,7 @@ tags: - 类 - 选择器 translation_of: Learn/CSS/First_steps/Getting_started +original_slug: Learn/CSS/First_steps/开始 ---

    {{LearnSidebar}}

    diff --git a/files/zh-cn/learn/css/first_steps/how_css_works/index.html b/files/zh-cn/learn/css/first_steps/how_css_works/index.html index 7aafcf481f..7bdf4bef5e 100644 --- a/files/zh-cn/learn/css/first_steps/how_css_works/index.html +++ b/files/zh-cn/learn/css/first_steps/how_css_works/index.html @@ -1,6 +1,6 @@ --- title: CSS如何运行 -slug: Learn/CSS/First_steps/CSS如何运行 +slug: Learn/CSS/First_steps/How_CSS_works tags: - CSS - DOM @@ -8,6 +8,7 @@ tags: - 无效的CSS代码 - 解析 translation_of: Learn/CSS/First_steps/How_CSS_works +original_slug: Learn/CSS/First_steps/CSS如何运行 ---

    {{LearnSidebar}}
    {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

    diff --git a/files/zh-cn/learn/css/howto/css_faq/index.html b/files/zh-cn/learn/css/howto/css_faq/index.html index 0e0593054b..1c9fb7478a 100644 --- a/files/zh-cn/learn/css/howto/css_faq/index.html +++ b/files/zh-cn/learn/css/howto/css_faq/index.html @@ -1,7 +1,8 @@ --- title: CSS 常见问题 -slug: Web/CSS/Common_CSS_Questions +slug: Learn/CSS/Howto/CSS_FAQ translation_of: Learn/CSS/Howto/CSS_FAQ +original_slug: Web/CSS/Common_CSS_Questions ---

    为什么我有效的CSS没有正确的渲染？

    diff --git a/files/zh-cn/learn/css/howto/generated_content/index.html b/files/zh-cn/learn/css/howto/generated_content/index.html index f3f9a0797b..d7cbe8761d 100644 --- a/files/zh-cn/learn/css/howto/generated_content/index.html +++ b/files/zh-cn/learn/css/howto/generated_content/index.html @@ -1,7 +1,8 @@ --- title: Content -slug: Web/Guide/CSS/Getting_started/Content +slug: Learn/CSS/Howto/Generated_content translation_of: Learn/CSS/Howto/Generated_content +original_slug: Web/Guide/CSS/Getting_started/Content ---

    {{ CSSTutorialTOC() }}

    diff --git a/files/zh-cn/learn/css/styling_text/fundamentals/index.html b/files/zh-cn/learn/css/styling_text/fundamentals/index.html index 45660a9532..3bde7ae492 100644 --- a/files/zh-cn/learn/css/styling_text/fundamentals/index.html +++ b/files/zh-cn/learn/css/styling_text/fundamentals/index.html @@ -1,6 +1,6 @@ --- title: 基本文本和字体样式 -slug: Learn/CSS/为文本添加样式/Fundamentals +slug: Learn/CSS/Styling_text/Fundamentals tags: - 初学者 - 对齐 @@ -8,6 +8,7 @@ tags: - 样式 - 间距 translation_of: Learn/CSS/Styling_text/Fundamentals +original_slug: Learn/CSS/为文本添加样式/Fundamentals ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/css/styling_text/index.html b/files/zh-cn/learn/css/styling_text/index.html index ec4822b9ad..1487b1912a 100644 --- a/files/zh-cn/learn/css/styling_text/index.html +++ b/files/zh-cn/learn/css/styling_text/index.html @@ -1,6 +1,6 @@ --- title: 为文本添加样式（样式化文本） -slug: Learn/CSS/为文本添加样式 +slug: Learn/CSS/Styling_text tags: - CSS - 代码脚步 @@ -16,6 +16,7 @@ tags: - 链接Links - 阴影shadow translation_of: Learn/CSS/Styling_text +original_slug: Learn/CSS/为文本添加样式 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/css/styling_text/styling_links/index.html b/files/zh-cn/learn/css/styling_text/styling_links/index.html index df2e7c6093..bff27b63e5 100644 --- a/files/zh-cn/learn/css/styling_text/styling_links/index.html +++ b/files/zh-cn/learn/css/styling_text/styling_links/index.html @@ -1,6 +1,6 @@ --- title: 样式化链接 -slug: Learn/CSS/为文本添加样式/Styling_links +slug: Learn/CSS/Styling_text/Styling_links tags: - 伪类 - 悬浮 @@ -10,6 +10,7 @@ tags: - 超链接 - 链接 translation_of: Learn/CSS/Styling_text/Styling_links +original_slug: Learn/CSS/为文本添加样式/Styling_links ---

    {{LearnSidebar}}

    diff --git a/files/zh-cn/learn/css/styling_text/styling_lists/index.html b/files/zh-cn/learn/css/styling_text/styling_lists/index.html index 075b457836..57a4e0f189 100644 --- a/files/zh-cn/learn/css/styling_text/styling_lists/index.html +++ b/files/zh-cn/learn/css/styling_text/styling_lists/index.html @@ -1,7 +1,8 @@ --- title: 样式列表 -slug: Learn/CSS/为文本添加样式/Styling_lists +slug: Learn/CSS/Styling_text/Styling_lists translation_of: Learn/CSS/Styling_text/Styling_lists +original_slug: Learn/CSS/为文本添加样式/Styling_lists ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html b/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html index 98f86f125f..c68a5f713c 100644 --- a/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html +++ b/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html @@ -1,6 +1,6 @@ --- title: 作业：排版社区大学首页 -slug: Learn/CSS/为文本添加样式/Typesetting_a_homepage +slug: Learn/CSS/Styling_text/Typesetting_a_homepage tags: - CSS - 初学者 @@ -9,6 +9,7 @@ tags: - 网络字体 - 链接 translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage +original_slug: Learn/CSS/为文本添加样式/Typesetting_a_homepage ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/css/styling_text/web_fonts/index.html b/files/zh-cn/learn/css/styling_text/web_fonts/index.html index ad9691cb00..45b3bef610 100644 --- a/files/zh-cn/learn/css/styling_text/web_fonts/index.html +++ b/files/zh-cn/learn/css/styling_text/web_fonts/index.html @@ -1,7 +1,8 @@ --- title: Web 字体 -slug: Learn/CSS/为文本添加样式/Web_字体 +slug: Learn/CSS/Styling_text/Web_fonts translation_of: Learn/CSS/Styling_text/Web_fonts +original_slug: Learn/CSS/为文本添加样式/Web_字体 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/forms/advanced_form_styling/index.html b/files/zh-cn/learn/forms/advanced_form_styling/index.html index 94128b7229..7add8a555f 100644 --- a/files/zh-cn/learn/forms/advanced_form_styling/index.html +++ b/files/zh-cn/learn/forms/advanced_form_styling/index.html @@ -1,7 +1,8 @@ --- title: 高级设计 HTML 表单 -slug: Learn/HTML/Forms/Advanced_styling_for_HTML_forms +slug: Learn/Forms/Advanced_form_styling translation_of: Learn/Forms/Advanced_form_styling +original_slug: Learn/HTML/Forms/Advanced_styling_for_HTML_forms ---
    {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms/Property_compatibility_table_for_form_widgets", "Learn/HTML/Forms")}}
    diff --git a/files/zh-cn/learn/forms/basic_native_form_controls/index.html b/files/zh-cn/learn/forms/basic_native_form_controls/index.html index 8ef67a2f7a..0f738f9d23 100644 --- a/files/zh-cn/learn/forms/basic_native_form_controls/index.html +++ b/files/zh-cn/learn/forms/basic_native_form_controls/index.html @@ -1,7 +1,8 @@ --- title: 原生表单部件 -slug: Learn/HTML/Forms/The_native_form_widgets +slug: Learn/Forms/Basic_native_form_controls translation_of: Learn/Forms/Basic_native_form_controls +original_slug: Learn/HTML/Forms/The_native_form_widgets ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/forms/form_validation/index.html b/files/zh-cn/learn/forms/form_validation/index.html index 62758a26e6..0cdfdd07f1 100644 --- a/files/zh-cn/learn/forms/form_validation/index.html +++ b/files/zh-cn/learn/forms/form_validation/index.html @@ -1,9 +1,10 @@ --- title: 表单数据校验 -slug: Learn/HTML/Forms/Data_form_validation +slug: Learn/Forms/Form_validation tags: - HTML translation_of: Learn/Forms/Form_validation +original_slug: Learn/HTML/Forms/Data_form_validation ---

    {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}

    diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_1/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_1/index.html index 93cf5069c2..b2bfa229e8 100644 --- a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_1/index.html +++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_1/index.html @@ -1,10 +1,11 @@ --- title: Example 1 -slug: Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_1 +slug: Learn/Forms/How_to_build_custom_form_controls/Example_1 tags: - HTML - 表单 translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_1 +original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_1 ---

    这是第一个如果构建自定义表单小部件的代码解释事例。

    diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html index 3a9546631f..e102e1a313 100644 --- a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html +++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html @@ -1,10 +1,11 @@ --- title: Example 2 -slug: Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_2 +slug: Learn/Forms/How_to_build_custom_form_controls/Example_2 tags: - HTML - 表单 translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_2 +original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_2 ---

    这是解释 如何构建自定义表单小部件的第二个示例。

    diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_3/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_3/index.html index a4a58880e4..d17136e128 100644 --- a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_3/index.html +++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_3/index.html @@ -1,10 +1,11 @@ --- title: Example 3 -slug: Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_3 +slug: Learn/Forms/How_to_build_custom_form_controls/Example_3 tags: - HTML - 表单 translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_3 +original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_3 ---

    这是解释 如何构建自定义表单小部件 的第三个示例。

    diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_4/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_4/index.html index 472102adb2..0219ad6218 100644 --- a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_4/index.html +++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_4/index.html @@ -1,12 +1,13 @@ --- title: Example 4 -slug: Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_4 +slug: Learn/Forms/How_to_build_custom_form_controls/Example_4 tags: - HTML - Web - 表单 - 高级 translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_4 +original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_4 ---

    这是解释 如何构建自定义表单小部件 的第四个示例。

    diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html index 24636e7858..7ee2617b1d 100644 --- a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html +++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html @@ -1,12 +1,13 @@ --- title: 如何构建表单小工具 -slug: Learn/HTML/Forms/How_to_build_custom_form_widgets +slug: Learn/Forms/How_to_build_custom_form_controls tags: - HTML - 例子 - 表单 - 高级 translation_of: Learn/Forms/How_to_build_custom_form_controls +original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets ---
    {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
    diff --git a/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html index eda4b201da..341d533fc9 100644 --- a/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html +++ b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html @@ -1,7 +1,8 @@ --- title: 如何构造HTML表单 -slug: Learn/HTML/Forms/How_to_structure_an_HTML_form +slug: Learn/Forms/How_to_structure_a_web_form translation_of: Learn/Forms/How_to_structure_a_web_form +original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html b/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html index d6045e0d70..914939e028 100644 --- a/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html +++ b/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html @@ -1,7 +1,8 @@ --- title: 旧式浏览器中的HTML 表单 -slug: Learn/HTML/Forms/HTML_forms_in_legacy_browsers +slug: Learn/Forms/HTML_forms_in_legacy_browsers translation_of: Learn/Forms/HTML_forms_in_legacy_browsers +original_slug: Learn/HTML/Forms/HTML_forms_in_legacy_browsers ---
    {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms")}}
    diff --git a/files/zh-cn/learn/forms/index.html b/files/zh-cn/learn/forms/index.html index ad51eafa35..e4d6f79e6f 100644 --- a/files/zh-cn/learn/forms/index.html +++ b/files/zh-cn/learn/forms/index.html @@ -1,12 +1,13 @@ --- title: HTML表单指南 -slug: Learn/HTML/Forms +slug: Learn/Forms tags: - Forms - HTML - NeedsTranslation - TopicStub translation_of: Learn/Forms +original_slug: Learn/HTML/Forms ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/zh-cn/learn/forms/property_compatibility_table_for_form_controls/index.html index 31f8075f5b..2a30d40290 100644 --- a/files/zh-cn/learn/forms/property_compatibility_table_for_form_controls/index.html +++ b/files/zh-cn/learn/forms/property_compatibility_table_for_form_controls/index.html @@ -1,7 +1,8 @@ --- title: 表单组件兼容性列表 -slug: Learn/HTML/Forms/Property_compatibility_table_for_form_widgets +slug: Learn/Forms/Property_compatibility_table_for_form_controls translation_of: Learn/Forms/Property_compatibility_table_for_form_controls +original_slug: Learn/HTML/Forms/Property_compatibility_table_for_form_widgets ---
    {{learnsidebar}}{{PreviousMenu("Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}
    diff --git a/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html index ed3a4ef0ef..21d9228dbb 100644 --- a/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html @@ -1,6 +1,6 @@ --- title: 发送表单数据 -slug: Learn/HTML/Forms/Sending_and_retrieving_form_data +slug: Learn/Forms/Sending_and_retrieving_form_data tags: - HTML - HTTP @@ -9,6 +9,7 @@ tags: - 安全 - 表单 translation_of: Learn/Forms/Sending_and_retrieving_form_data +original_slug: Learn/HTML/Forms/Sending_and_retrieving_form_data ---

    {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}

    diff --git a/files/zh-cn/learn/forms/sending_forms_through_javascript/index.html b/files/zh-cn/learn/forms/sending_forms_through_javascript/index.html index 8489ff2243..6f3edf8801 100644 --- a/files/zh-cn/learn/forms/sending_forms_through_javascript/index.html +++ b/files/zh-cn/learn/forms/sending_forms_through_javascript/index.html @@ -1,6 +1,6 @@ --- title: 使用 JavaScript 发送表单 -slug: Learn/HTML/Forms/Sending_forms_through_JavaScript +slug: Learn/Forms/Sending_forms_through_JavaScript tags: - HTML - HTML表单 @@ -10,6 +10,7 @@ tags: - 表单 - 高级 translation_of: Learn/Forms/Sending_forms_through_JavaScript +original_slug: Learn/HTML/Forms/Sending_forms_through_JavaScript ---
    {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms")}}
    diff --git a/files/zh-cn/learn/forms/styling_web_forms/index.html b/files/zh-cn/learn/forms/styling_web_forms/index.html index 26b94e94e8..b72fd35d77 100644 --- a/files/zh-cn/learn/forms/styling_web_forms/index.html +++ b/files/zh-cn/learn/forms/styling_web_forms/index.html @@ -1,6 +1,6 @@ --- title: 样式化 HTML 表单 -slug: Learn/HTML/Forms/Styling_HTML_forms +slug: Learn/Forms/Styling_web_forms tags: - CSS - Web @@ -9,6 +9,7 @@ tags: - 样式 - 表单 translation_of: Learn/Forms/Styling_web_forms +original_slug: Learn/HTML/Forms/Styling_HTML_forms ---

    {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}

    diff --git a/files/zh-cn/learn/forms/your_first_form/index.html b/files/zh-cn/learn/forms/your_first_form/index.html index 5b0adc1480..ed7c3f1087 100644 --- a/files/zh-cn/learn/forms/your_first_form/index.html +++ b/files/zh-cn/learn/forms/your_first_form/index.html @@ -1,7 +1,8 @@ --- title: 创建我的第一个表单 -slug: Learn/HTML/Forms/Your_first_HTML_form +slug: Learn/Forms/Your_first_form translation_of: Learn/Forms/Your_first_form +original_slug: Learn/HTML/Forms/Your_first_HTML_form ---

    {{LearnSidebar}}{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}

    diff --git a/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html b/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html index 5a07e862a0..b128523809 100644 --- a/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html +++ b/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html @@ -1,11 +1,12 @@ --- title: 小贴士：如何制作快速加载的HTML页面 -slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages +slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages tags: - HTML - 全部分类 - 教程 translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages ---

    以下技巧都是基于通用的知识和经验。

    diff --git a/files/zh-cn/learn/html/howto/use_data_attributes/index.html b/files/zh-cn/learn/html/howto/use_data_attributes/index.html index 009517f416..4b17a47c07 100644 --- a/files/zh-cn/learn/html/howto/use_data_attributes/index.html +++ b/files/zh-cn/learn/html/howto/use_data_attributes/index.html @@ -1,10 +1,11 @@ --- title: 使用数据属性 -slug: Web/Guide/HTML/Using_data_attributes +slug: Learn/HTML/Howto/Use_data_attributes tags: - Custom Data Attributes - HTML5 translation_of: Learn/HTML/Howto/Use_data_attributes +original_slug: Web/Guide/HTML/Using_data_attributes ---

    {{LearnSidebar}}

    diff --git a/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.html index 63c421487b..3d32019595 100644 --- a/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.html +++ b/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -1,6 +1,6 @@ --- title: 文档与网站架构 -slug: learn/HTML/Introduction_to_HTML/文件和网站结构 +slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure tags: - HTML - 块 @@ -11,6 +11,7 @@ tags: - 脚本编写 - 页面 translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +original_slug: learn/HTML/Introduction_to_HTML/文件和网站结构 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html index c66ca6499e..a7dc99e0fc 100644 --- a/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html +++ b/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -1,7 +1,8 @@ --- title: 从对象到iframe - 其他嵌入技术 -slug: Learn/HTML/Multimedia_and_embedding/其他嵌入技术 +slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +original_slug: Learn/HTML/Multimedia_and_embedding/其他嵌入技术 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/javascript/asynchronous/async_await/index.html b/files/zh-cn/learn/javascript/asynchronous/async_await/index.html index 739ab63602..60e22c6bd7 100644 --- a/files/zh-cn/learn/javascript/asynchronous/async_await/index.html +++ b/files/zh-cn/learn/javascript/asynchronous/async_await/index.html @@ -1,7 +1,8 @@ --- -title: 'async和await:让异步编程更简单' -slug: learn/JavaScript/异步/Async_await +title: async和await:让异步编程更简单 +slug: Learn/JavaScript/Asynchronous/Async_await translation_of: Learn/JavaScript/Asynchronous/Async_await +original_slug: learn/JavaScript/异步/Async_await ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html b/files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html index 276d815b85..4241740479 100644 --- a/files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html +++ b/files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html @@ -1,7 +1,8 @@ --- title: 选择正确的方法 -slug: learn/JavaScript/异步/Choosing_the_right_approach +slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach +original_slug: learn/JavaScript/异步/Choosing_the_right_approach ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/javascript/asynchronous/concepts/index.html b/files/zh-cn/learn/javascript/asynchronous/concepts/index.html index 6e59cda54b..757eee777c 100644 --- a/files/zh-cn/learn/javascript/asynchronous/concepts/index.html +++ b/files/zh-cn/learn/javascript/asynchronous/concepts/index.html @@ -1,6 +1,6 @@ --- title: 通用异步编程概念 -slug: learn/JavaScript/异步/概念 +slug: Learn/JavaScript/Asynchronous/Concepts tags: - JavaScript - Promises @@ -9,6 +9,7 @@ tags: - 异步 - 阻塞 translation_of: Learn/JavaScript/Asynchronous/Concepts +original_slug: learn/JavaScript/异步/概念 ---
    {{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
    diff --git a/files/zh-cn/learn/javascript/asynchronous/index.html b/files/zh-cn/learn/javascript/asynchronous/index.html index 3d89f5a060..aa5c99dc8d 100644 --- a/files/zh-cn/learn/javascript/asynchronous/index.html +++ b/files/zh-cn/learn/javascript/asynchronous/index.html @@ -1,6 +1,6 @@ --- title: 异步JavaScript -slug: learn/JavaScript/异步 +slug: Learn/JavaScript/Asynchronous tags: - JavaScript - Promises @@ -14,6 +14,7 @@ tags: - 设置定时器 - 设置间隔 translation_of: Learn/JavaScript/Asynchronous +original_slug: learn/JavaScript/异步 ---
    diff --git a/files/zh-cn/learn/javascript/asynchronous/introducing/index.html b/files/zh-cn/learn/javascript/asynchronous/introducing/index.html index 1792c0e086..a2e492120d 100644 --- a/files/zh-cn/learn/javascript/asynchronous/introducing/index.html +++ b/files/zh-cn/learn/javascript/asynchronous/introducing/index.html @@ -1,7 +1,8 @@ --- title: 异步JavaScript简介 -slug: learn/JavaScript/异步/简介 +slug: Learn/JavaScript/Asynchronous/Introducing translation_of: Learn/JavaScript/Asynchronous/Introducing +original_slug: learn/JavaScript/异步/简介 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/javascript/asynchronous/promises/index.html b/files/zh-cn/learn/javascript/asynchronous/promises/index.html index 665bda8129..cbdeefb513 100644 --- a/files/zh-cn/learn/javascript/asynchronous/promises/index.html +++ b/files/zh-cn/learn/javascript/asynchronous/promises/index.html @@ -1,7 +1,8 @@ --- title: 优雅的异步处理 -slug: learn/JavaScript/异步/Promises语法 +slug: Learn/JavaScript/Asynchronous/Promises translation_of: Learn/JavaScript/Asynchronous/Promises +original_slug: learn/JavaScript/异步/Promises语法 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html index 2cf83da82c..1f33b4efc2 100644 --- a/files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html +++ b/files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html @@ -1,7 +1,8 @@ --- title: '合作异步JavaScript: 超时和间隔' -slug: learn/JavaScript/异步/超时和间隔 +slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals +original_slug: learn/JavaScript/异步/超时和间隔 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/javascript/building_blocks/image_gallery/index.html b/files/zh-cn/learn/javascript/building_blocks/image_gallery/index.html index 22101b20ba..f4b6d8adde 100644 --- a/files/zh-cn/learn/javascript/building_blocks/image_gallery/index.html +++ b/files/zh-cn/learn/javascript/building_blocks/image_gallery/index.html @@ -1,6 +1,6 @@ --- title: 照片库 -slug: learn/JavaScript/Building_blocks/相片走廊 +slug: Learn/JavaScript/Building_blocks/Image_gallery tags: - 事件 - 事件句柄 @@ -9,6 +9,7 @@ tags: - 循环 - 评估 translation_of: Learn/JavaScript/Building_blocks/Image_gallery +original_slug: learn/JavaScript/Building_blocks/相片走廊 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.html index 2730489d15..edf1d50c90 100644 --- a/files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.html +++ b/files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.html @@ -1,6 +1,6 @@ --- title: 为“弹球”示例添加新功能 -slug: Learn/JavaScript/Objects/向“弹跳球”演示程序添加新功能 +slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features tags: - JavaScript - 初学者 @@ -8,6 +8,7 @@ tags: - 测验 - 面向对象 translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features +original_slug: Learn/JavaScript/Objects/向“弹跳球”演示程序添加新功能 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.html b/files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.html index 8fd0cc3256..0b14bde706 100644 --- a/files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.html +++ b/files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.html @@ -1,6 +1,6 @@ --- title: 测试你的技能：面向对象的Javascript -slug: 'Learn/JavaScript/Objects/测试你的技能:面向对象的Javascript' +slug: Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript tags: - JavaScript - OOJS @@ -8,7 +8,8 @@ tags: - 学习 - 对象 - 测试你的技能 -translation_of: 'Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript' +translation_of: Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript +original_slug: Learn/JavaScript/Objects/测试你的技能:面向对象的Javascript ---
    {{learnsidebar}}
    diff --git a/files/zh-cn/learn/performance/perceived_performance/index.html b/files/zh-cn/learn/performance/perceived_performance/index.html index 3740a4c62c..0c94a07b55 100644 --- a/files/zh-cn/learn/performance/perceived_performance/index.html +++ b/files/zh-cn/learn/performance/perceived_performance/index.html @@ -1,10 +1,11 @@ --- title: 感知性能 -slug: learn/Performance/感知性能 +slug: Learn/Performance/perceived_performance tags: - Web 性能 - 感知性能 translation_of: Learn/Performance/perceived_performance +original_slug: learn/Performance/感知性能 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/server-side/configuring_server_mime_types/index.html b/files/zh-cn/learn/server-side/configuring_server_mime_types/index.html index 577aacfb08..0c147ac449 100644 --- a/files/zh-cn/learn/server-side/configuring_server_mime_types/index.html +++ b/files/zh-cn/learn/server-side/configuring_server_mime_types/index.html @@ -1,9 +1,10 @@ --- title: Properly Configuring Server MIME Types -slug: Web/Security/Securing_your_site/Configuring_server_MIME_types +slug: Learn/Server-side/Configuring_server_MIME_types tags: - HTTP translation_of: Learn/Server-side/Configuring_server_MIME_types +original_slug: Web/Security/Securing_your_site/Configuring_server_MIME_types ---

    Background

    diff --git a/files/zh-cn/learn/server-side/django/admin_site/index.html b/files/zh-cn/learn/server-side/django/admin_site/index.html index d3252d84c5..c8330e346c 100644 --- a/files/zh-cn/learn/server-side/django/admin_site/index.html +++ b/files/zh-cn/learn/server-side/django/admin_site/index.html @@ -1,7 +1,8 @@ --- title: 'Django Tutorial Part 4: Django 管理员站点' -slug: learn/Server-side/Django/管理站点 +slug: Learn/Server-side/Django/Admin_site translation_of: Learn/Server-side/Django/Admin_site +original_slug: learn/Server-side/Django/管理站点 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/server-side/django/development_environment/index.html b/files/zh-cn/learn/server-side/django/development_environment/index.html index fb6041621f..ce2eaa6032 100644 --- a/files/zh-cn/learn/server-side/django/development_environment/index.html +++ b/files/zh-cn/learn/server-side/django/development_environment/index.html @@ -1,10 +1,11 @@ --- title: 设置Django开发环境 -slug: learn/Server-side/Django/开发环境 +slug: Learn/Server-side/Django/development_environment tags: - Python - django translation_of: Learn/Server-side/Django/development_environment +original_slug: learn/Server-side/Django/开发环境 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/server-side/django/home_page/index.html b/files/zh-cn/learn/server-side/django/home_page/index.html index 0527ba8731..96daafc313 100644 --- a/files/zh-cn/learn/server-side/django/home_page/index.html +++ b/files/zh-cn/learn/server-side/django/home_page/index.html @@ -1,7 +1,8 @@ --- title: 'Django Tutorial Part 5: 主页构建' -slug: learn/Server-side/Django/主页构建 +slug: Learn/Server-side/Django/Home_page translation_of: Learn/Server-side/Django/Home_page +original_slug: learn/Server-side/Django/主页构建 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html index 3975354417..445a22b64f 100644 --- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html +++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html @@ -1,6 +1,6 @@ --- title: 客户端框架介绍 -slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/介绍 +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction tags: - JavaScript - 初学者 @@ -8,6 +8,7 @@ tags: - 客户端 - 框架 translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction +original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/介绍 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html index 704f595fb4..c5c4a799d2 100644 --- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html +++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html @@ -1,6 +1,6 @@ --- title: 解决常见的可访问性问题 -slug: Learn/Tools_and_testing/Cross_browser_testing/可访问性 +slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibility tags: - CSS - CodingScripting @@ -15,6 +15,7 @@ tags: - 跨浏览器 - 键盘 translation_of: Learn/Tools_and_testing/Cross_browser_testing/Accessibility +original_slug: Learn/Tools_and_testing/Cross_browser_testing/可访问性 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html index fb01cd2843..98545199d4 100644 --- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html +++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html @@ -1,6 +1,6 @@ --- title: 进行测试的策略 -slug: Learn/Tools_and_testing/Cross_browser_testing/测试策略 +slug: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies tags: - 测试 - 测试策略 @@ -9,6 +9,7 @@ tags: - 虚拟机 仿真器 - 跨浏览器测试 translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies +original_slug: Learn/Tools_and_testing/Cross_browser_testing/测试策略 ---
    {{LearnSidebar}}
    diff --git a/files/zh-cn/mdn/at_ten/index.html b/files/zh-cn/mdn/at_ten/index.html index fa9ddcf29d..7ea2a9b3be 100644 --- a/files/zh-cn/mdn/at_ten/index.html +++ b/files/zh-cn/mdn/at_ten/index.html @@ -1,7 +1,8 @@ --- title: Mozilla开发者网络10周年 -slug: MDN_at_ten +slug: MDN/At_ten translation_of: MDN_at_ten +original_slug: MDN_at_ten ---
    为我们web技术的文档化走过10年而庆祝！
    diff --git a/files/zh-cn/mdn/contribute/howto/add_or_update_browser_compatibility_data/index.html b/files/zh-cn/mdn/contribute/howto/add_or_update_browser_compatibility_data/index.html index 8c0513d654..5eb6dda2b6 100644 --- a/files/zh-cn/mdn/contribute/howto/add_or_update_browser_compatibility_data/index.html +++ b/files/zh-cn/mdn/contribute/howto/add_or_update_browser_compatibility_data/index.html @@ -1,7 +1,8 @@ --- title: 如何添加或更新浏览器兼容性数据 -slug: MDN/Contribute/Howto/如何添加或更新浏览器兼容性数据 +slug: MDN/Contribute/Howto/Add_or_update_browser_compatibility_data translation_of: MDN/Contribute/Howto/Add_or_update_browser_compatibility_data +original_slug: MDN/Contribute/Howto/如何添加或更新浏览器兼容性数据 ---
    {{MDNSidebar}}

    如果你有浏览器在兼容Web特性方面的信息 —— 或者有意愿并有能力做一些这方面的研究和/或实验 —— 你可以帮助更新MDN的浏览器兼容性数据库（BCD）。

    diff --git a/files/zh-cn/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html b/files/zh-cn/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html index 91b8a8640d..6dc3e8bf11 100644 --- a/files/zh-cn/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html +++ b/files/zh-cn/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html @@ -1,6 +1,6 @@ --- title: 如何创建一个交互学习环境 -slug: MDN/Contribute/Howto/学习_交互_在线_起步_开始 +slug: MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web tags: - MDN Meta - 交互 @@ -8,6 +8,7 @@ tags: - 学习 - 教程 translation_of: MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web +original_slug: MDN/Contribute/Howto/学习_交互_在线_起步_开始 ---
    {{MDNSidebar}}

    动态的内容对于学习 Web 来说是重要的。 她能让学习的人更加积极主动。 这可以是练习，实例，任务，评价等等。总之，任何有助于学习理解的东西都行。

    diff --git a/files/zh-cn/mdn/guidelines/does_this_belong_on_mdn/index.html b/files/zh-cn/mdn/guidelines/does_this_belong_on_mdn/index.html index 1f40cc49b8..5561aa35f3 100644 --- a/files/zh-cn/mdn/guidelines/does_this_belong_on_mdn/index.html +++ b/files/zh-cn/mdn/guidelines/does_this_belong_on_mdn/index.html @@ -1,7 +1,8 @@ --- title: MDN收录规则 -slug: MDN/Guidelines/Rules_Of_MDN_Documenting +slug: MDN/Guidelines/Does_this_belong_on_MDN translation_of: MDN/Guidelines/Does_this_belong_on_MDN +original_slug: MDN/Guidelines/Rules_Of_MDN_Documenting ---
    {{MDNSidebar}}
    {{IncludeSubnav("/zh-CN/docs/MDN")}}
    diff --git a/files/zh-cn/mdn/guidelines/writing_style_guide/index.html b/files/zh-cn/mdn/guidelines/writing_style_guide/index.html index 285b2703cb..8ff75a97ef 100644 --- a/files/zh-cn/mdn/guidelines/writing_style_guide/index.html +++ b/files/zh-cn/mdn/guidelines/writing_style_guide/index.html @@ -1,6 +1,6 @@ --- title: MDN Web 文档写作规范 -slug: MDN/Guidelines/Style_guide +slug: MDN/Guidelines/Writing_style_guide tags: - MDN - MDN Meta @@ -12,6 +12,7 @@ tags: - 文档 - 规范 translation_of: MDN/Guidelines/Writing_style_guide +original_slug: MDN/Guidelines/Style_guide ---
    {{MDNSidebar}}
    diff --git a/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.html b/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.html index 3809bb2094..7b0e7d637e 100644 --- a/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.html +++ b/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.html @@ -1,12 +1,13 @@ --- title: 常用的宏 -slug: MDN/Structures/Macros/Custom_macros +slug: MDN/Structures/Macros/Commonly-used_macros tags: - CSS - 参考 - 宏 - 结构 translation_of: MDN/Structures/Macros/Commonly-used_macros +original_slug: MDN/Structures/Macros/Custom_macros ---
    {{MDNSidebar}}
    diff --git a/files/zh-cn/mdn/yari/index.html b/files/zh-cn/mdn/yari/index.html index d506a15fbe..96e5304ca1 100644 --- a/files/zh-cn/mdn/yari/index.html +++ b/files/zh-cn/mdn/yari/index.html @@ -1,11 +1,12 @@ --- title: 'Kuma: MDN 的 wiki 平台' -slug: MDN/Kuma +slug: MDN/Yari tags: - Kuma - wiki - 平台 translation_of: MDN/Kuma +original_slug: MDN/Kuma ---
    {{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}
    diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/clipboard/index.html b/files/zh-cn/mozilla/add-ons/webextensions/api/clipboard/index.html index 5fecb4334f..1f3657f79c 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/api/clipboard/index.html +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/clipboard/index.html @@ -1,11 +1,12 @@ --- title: clipboard -slug: Mozilla/Add-ons/WebExtensions/API/剪切板 +slug: Mozilla/Add-ons/WebExtensions/API/clipboard tags: - 剪切板 - 扩展 - 附加组件 translation_of: Mozilla/Add-ons/WebExtensions/API/clipboard +original_slug: Mozilla/Add-ons/WebExtensions/API/剪切板 ---
    {{AddonSidebar}}
    diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.html b/files/zh-cn/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.html index 3cdaf45b08..9e200ab1cd 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.html +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.html @@ -1,6 +1,6 @@ --- title: clipboard.setImageData() -slug: Mozilla/Add-ons/WebExtensions/API/剪切板/setImageData +slug: Mozilla/Add-ons/WebExtensions/API/clipboard/setImageData tags: - API - Clipboard @@ -9,6 +9,7 @@ tags: - 拓展 - 方法 translation_of: Mozilla/Add-ons/WebExtensions/API/clipboard/setImageData +original_slug: Mozilla/Add-ons/WebExtensions/API/剪切板/setImageData ---
    {{AddonSidebar()}}
    diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html b/files/zh-cn/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html index d59f29ffde..32197fc3d8 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html @@ -1,7 +1,8 @@ --- title: devtools.inspectedWindow -slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow +slug: Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow +original_slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow ---
    {{AddonSidebar}}
    diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/menus/index.html b/files/zh-cn/mozilla/add-ons/webextensions/api/menus/index.html index ffcb6ce7b7..b661631739 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/api/menus/index.html +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/menus/index.html @@ -1,11 +1,12 @@ --- title: contextMenus -slug: Mozilla/Add-ons/WebExtensions/API/contextMenus +slug: Mozilla/Add-ons/WebExtensions/API/menus tags: - API - WebExtensions - contextMenus translation_of: Mozilla/Add-ons/WebExtensions/API/menus +original_slug: Mozilla/Add-ons/WebExtensions/API/contextMenus ---
    {{AddonSidebar}}
    diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/query/index.html b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/query/index.html index 9afe6e80a8..3d2b4ea139 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/query/index.html +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/tabs/query/index.html @@ -1,7 +1,8 @@ --- title: 选项卡. 查询 （） -slug: Mozilla/Add-ons/WebExtensions/API/tabs/查询 +slug: Mozilla/Add-ons/WebExtensions/API/tabs/query translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/query +original_slug: Mozilla/Add-ons/WebExtensions/API/tabs/查询 ---
    [阿登侧边栏（）]
    diff --git a/files/zh-cn/mozilla/add-ons/webextensions/build_a_cross_browser_extension/index.html b/files/zh-cn/mozilla/add-ons/webextensions/build_a_cross_browser_extension/index.html index 6d1a21497c..4c1098d32e 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/build_a_cross_browser_extension/index.html +++ b/files/zh-cn/mozilla/add-ons/webextensions/build_a_cross_browser_extension/index.html @@ -1,12 +1,13 @@ --- title: 构建一个跨浏览器的扩展程序 -slug: Mozilla/Add-ons/WebExtensions/构建一个跨浏览器的扩展插件 +slug: Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension tags: - Web插件 - 扩展 - 指南 - 插件 translation_of: Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension +original_slug: Mozilla/Add-ons/WebExtensions/构建一个跨浏览器的扩展插件 ---

    {{AddonSidebar()}}

    diff --git a/files/zh-cn/mozilla/add-ons/webextensions/implement_a_settings_page/index.html b/files/zh-cn/mozilla/add-ons/webextensions/implement_a_settings_page/index.html index fe8ac2e0a7..8453fa87ee 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/implement_a_settings_page/index.html +++ b/files/zh-cn/mozilla/add-ons/webextensions/implement_a_settings_page/index.html @@ -1,7 +1,8 @@ --- title: 实现一个设置页面 -slug: Mozilla/Add-ons/WebExtensions/实现一个设置页面 +slug: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page translation_of: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page +original_slug: Mozilla/Add-ons/WebExtensions/实现一个设置页面 ---
    {{AddonSidebar}}
    diff --git a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.html b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.html index 01749d5ff3..042975b101 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.html +++ b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.html @@ -1,7 +1,8 @@ --- title: homepage_url -slug: Mozilla/Add-ons/WebExtensions/manifest.json/主页地址 +slug: Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url +original_slug: Mozilla/Add-ons/WebExtensions/manifest.json/主页地址 ---
    {{AddonSidebar}}
    diff --git a/files/zh-cn/mozilla/add-ons/webextensions/user_interface/sidebars/index.html b/files/zh-cn/mozilla/add-ons/webextensions/user_interface/sidebars/index.html index 8d13bfaf2c..2f75bf37ab 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/user_interface/sidebars/index.html +++ b/files/zh-cn/mozilla/add-ons/webextensions/user_interface/sidebars/index.html @@ -1,7 +1,8 @@ --- title: 侧边栏 -slug: Mozilla/Add-ons/WebExtensions/user_interface/侧边栏 +slug: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars +original_slug: Mozilla/Add-ons/WebExtensions/user_interface/侧边栏 ---
    {{AddonSidebar}}
    diff --git a/files/zh-cn/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/zh-cn/mozilla/add-ons/webextensions/your_second_webextension/index.html index 962e04d404..d3c1f69ea4 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/your_second_webextension/index.html +++ b/files/zh-cn/mozilla/add-ons/webextensions/your_second_webextension/index.html @@ -1,7 +1,8 @@ --- title: 你的第二个 WebExtension -slug: Mozilla/Add-ons/WebExtensions/Walkthrough +slug: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +original_slug: Mozilla/Add-ons/WebExtensions/Walkthrough ---

    {{AddonSidebar}}

    diff --git a/files/zh-cn/mozilla/firefox/releases/19/site_compatibility/index.html b/files/zh-cn/mozilla/firefox/releases/19/site_compatibility/index.html index c026e80052..fdde8484a3 100644 --- a/files/zh-cn/mozilla/firefox/releases/19/site_compatibility/index.html +++ b/files/zh-cn/mozilla/firefox/releases/19/site_compatibility/index.html @@ -1,7 +1,8 @@ --- title: Site Compatibility for Firefox 19 -slug: Site_Compatibility_for_Firefox_19 +slug: Mozilla/Firefox/Releases/19/Site_compatibility translation_of: Mozilla/Firefox/Releases/19/Site_compatibility +original_slug: Site_Compatibility_for_Firefox_19 ---
    {{FirefoxSidebar}}

    {{ draft() }}

    Firefox 19 Beta was released on . While it has been developed to maintain compatibility as much as possible, the new version includes some changes affecting backward compatibility aimed at improving interoperability with the other browsers or following the latest Web standards. Here's the list of such changes — Hope this helps whenever you test your sites or applications.

    diff --git a/files/zh-cn/mozilla/firefox/releases/21/site_compatibility/index.html b/files/zh-cn/mozilla/firefox/releases/21/site_compatibility/index.html index cf566f4262..ca4ee89c81 100644 --- a/files/zh-cn/mozilla/firefox/releases/21/site_compatibility/index.html +++ b/files/zh-cn/mozilla/firefox/releases/21/site_compatibility/index.html @@ -1,7 +1,8 @@ --- title: Firefox 21网站兼容性 -slug: Site_Compatibility_for_Firefox_21 +slug: Mozilla/Firefox/Releases/21/Site_compatibility translation_of: Mozilla/Firefox/Releases/21/Site_compatibility +original_slug: Site_Compatibility_for_Firefox_21 ---
    {{FirefoxSidebar}}

    CSS

    diff --git a/files/zh-cn/mozilla/firefox/releases/23/site_compatibility/index.html b/files/zh-cn/mozilla/firefox/releases/23/site_compatibility/index.html index 34f2ab9b60..b2bb77a090 100644 --- a/files/zh-cn/mozilla/firefox/releases/23/site_compatibility/index.html +++ b/files/zh-cn/mozilla/firefox/releases/23/site_compatibility/index.html @@ -1,7 +1,8 @@ --- title: Site Compatibility for Firefox 23 -slug: Site_Compatibility_for_Firefox_23 +slug: Mozilla/Firefox/Releases/23/Site_compatibility translation_of: Mozilla/Firefox/Releases/23/Site_compatibility +original_slug: Site_Compatibility_for_Firefox_23 ---
    {{FirefoxSidebar}}

    {{ draft() }}

    Firefox 23 Aurora (pre-Beta) was released on . While it has been developed to maintain compatibility as much as possible, the new version includes some changes affecting backward compatibility aimed at improving interoperability with the other browsers or following the latest Web standards. Here's the list of such changes — Hope this helps whenever you test your sites or applications.

    diff --git a/files/zh-cn/mozilla/firefox/releases/24/site_compatibility/index.html b/files/zh-cn/mozilla/firefox/releases/24/site_compatibility/index.html index 296e580123..ea8e39cc15 100644 --- a/files/zh-cn/mozilla/firefox/releases/24/site_compatibility/index.html +++ b/files/zh-cn/mozilla/firefox/releases/24/site_compatibility/index.html @@ -1,7 +1,8 @@ --- title: Firefox 24网站兼容性 -slug: Site_Compatibility_for_Firefox_24 +slug: Mozilla/Firefox/Releases/24/Site_compatibility translation_of: Mozilla/Firefox/Releases/24/Site_compatibility +original_slug: Site_Compatibility_for_Firefox_24 ---
    {{FirefoxSidebar}}

    {{ draft() }}

    Firefox 24 Aurora (pre-Beta) will be released on . While it has been developed to maintain compatibility as much as possible, the new version includes some changes affecting backward compatibility aimed at improving interoperability with the other browsers or following the latest Web standards. Here's the list of such changes — Hope this helps whenever you test your sites or applications.

    diff --git a/files/zh-cn/mozilla/firefox/releases/3/updating_extensions/index.html b/files/zh-cn/mozilla/firefox/releases/3/updating_extensions/index.html index 96a2e8ec19..1202baaa23 100644 --- a/files/zh-cn/mozilla/firefox/releases/3/updating_extensions/index.html +++ b/files/zh-cn/mozilla/firefox/releases/3/updating_extensions/index.html @@ -1,9 +1,10 @@ --- title: 为Firefox 3升级扩展 -slug: Updating_extensions_for_Firefox_3 +slug: Mozilla/Firefox/Releases/3/Updating_extensions tags: - Firefox 3 translation_of: Mozilla/Firefox/Releases/3/Updating_extensions +original_slug: Updating_extensions_for_Firefox_3 ---
    diff --git a/files/zh-cn/orphaned/web/web_components/status_in_firefox/index.html b/files/zh-cn/orphaned/web/web_components/status_in_firefox/index.html index d57e5adef5..797cccfd90 100644 --- a/files/zh-cn/orphaned/web/web_components/status_in_firefox/index.html +++ b/files/zh-cn/orphaned/web/web_components/status_in_firefox/index.html @@ -1,7 +1,8 @@ --- title: Status of Web Components support in Firefox -slug: Web/Web_Components/Status_in_Firefox +slug: orphaned/Web/Web_Components/Status_in_Firefox translation_of: Web/Web_Components/Status_in_Firefox +original_slug: Web/Web_Components/Status_in_Firefox ---

    {{DefaultAPISidebar("Web Components")}}{{SeeCompatTable}}

    diff --git a/files/zh-cn/tools/3d_view/index.html b/files/zh-cn/tools/3d_view/index.html index 60ea480269..160e4947da 100644 --- a/files/zh-cn/tools/3d_view/index.html +++ b/files/zh-cn/tools/3d_view/index.html @@ -1,7 +1,8 @@ --- title: 三维视图 -slug: Tools/Page_Inspector/3D_view +slug: Tools/3D_View translation_of: Tools/3D_View +original_slug: Tools/Page_Inspector/3D_view ---
    {{ToolsSidebar}}
    diff --git a/files/zh-cn/tools/deprecated_tools/index.html b/files/zh-cn/tools/deprecated_tools/index.html index f7bb80e5bf..a0a20ea69e 100644 --- a/files/zh-cn/tools/deprecated_tools/index.html +++ b/files/zh-cn/tools/deprecated_tools/index.html @@ -1,7 +1,8 @@ --- title: 不推荐的工具 -slug: Tools/不推荐的工具 +slug: Tools/Deprecated_tools translation_of: Tools/Deprecated_tools +original_slug: Tools/不推荐的工具 ---

    {{ToolsSidebar}}

    diff --git a/files/zh-cn/tools/page_inspector/how_to/edit_fonts/index.html b/files/zh-cn/tools/page_inspector/how_to/edit_fonts/index.html index a5a6ae1e6e..30980e94b2 100644 --- a/files/zh-cn/tools/page_inspector/how_to/edit_fonts/index.html +++ b/files/zh-cn/tools/page_inspector/how_to/edit_fonts/index.html @@ -1,7 +1,8 @@ --- title: View fonts -slug: Tools/Page_Inspector/How_to/View_fonts +slug: Tools/Page_Inspector/How_to/Edit_fonts translation_of: Tools/Page_Inspector/How_to/Edit_fonts +original_slug: Tools/Page_Inspector/How_to/View_fonts ---
    {{ToolsSidebar}}

    font-family tooltip 字体系列提示

    diff --git a/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html b/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html index 13f27d0a4a..1783fa6294 100644 --- a/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html +++ b/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html @@ -1,6 +1,7 @@ --- title: Debugging Firefox for Android with WebIDE -slug: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone +slug: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE +original_slug: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone ---
    {{ToolsSidebar}}

    This article describes how to connect the Firefox Developer Tools to Firefox for Android from Firefox 36 onwards.

    It's been possible for a long time to connect the Firefox Developer Tools to Firefox for Android so you can debug your mobile website. Until now, though, this was a fairly complex and error-prone process. From Firefox 36 we've made the process much simpler: in particular, you don't need to deal directly with the adb tool at all. Now you connect using  WebIDE, which takes care of setting up adb behind the scenes.

    diff --git a/files/zh-cn/tools/responsive_design_mode/index.html b/files/zh-cn/tools/responsive_design_mode/index.html index b0ea0712a4..eb476f19df 100644 --- a/files/zh-cn/tools/responsive_design_mode/index.html +++ b/files/zh-cn/tools/responsive_design_mode/index.html @@ -1,7 +1,8 @@ --- title: 响应式设计视图 -slug: Tools/Responsive_Design_View +slug: Tools/Responsive_Design_Mode translation_of: Tools/Responsive_Design_Mode +original_slug: Tools/Responsive_Design_View ---
    {{ToolsSidebar}}

    响应式设计采用不同的屏幕尺寸来呈现在各种设备（例如移动电话或者平板电脑）下的可视情况。响应式设计视图使您可以很容易地看到您的网站或者网站app在不同屏幕尺寸下的外观。

    diff --git a/files/zh-cn/tools/storage_inspector/index.html b/files/zh-cn/tools/storage_inspector/index.html index 198d5d5b92..a10fa13f8d 100644 --- a/files/zh-cn/tools/storage_inspector/index.html +++ b/files/zh-cn/tools/storage_inspector/index.html @@ -1,7 +1,8 @@ --- title: 存储查看器 -slug: Tools/存储查看器 +slug: Tools/Storage_Inspector translation_of: Tools/Storage_Inspector +original_slug: Tools/存储查看器 ---
    {{ToolsSidebar}}
    diff --git a/files/zh-cn/tools/tips/index.html b/files/zh-cn/tools/tips/index.html index c7a2cfc304..2f22e393ba 100644 --- a/files/zh-cn/tools/tips/index.html +++ b/files/zh-cn/tools/tips/index.html @@ -1,10 +1,11 @@ --- title: 小技巧 -slug: Tools/小技巧 +slug: Tools/Tips tags: - 开发工具 - 网络开发 translation_of: Tools/Tips +original_slug: Tools/小技巧 ---
    {{ToolsSidebar}}
    diff --git a/files/zh-cn/tools/web_audio_editor/index.html b/files/zh-cn/tools/web_audio_editor/index.html index cc5c8bd4f7..a80b7f0908 100644 --- a/files/zh-cn/tools/web_audio_editor/index.html +++ b/files/zh-cn/tools/web_audio_editor/index.html @@ -1,9 +1,10 @@ --- title: Web 音频编辑器 -slug: Tools/Web音频编辑器 +slug: Tools/Web_Audio_Editor tags: - 工具 translation_of: Tools/Web_Audio_Editor +original_slug: Tools/Web音频编辑器 ---
    {{ToolsSidebar}}

    Web 音频编辑器在 Firefox 32 推出。

    diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-hidden_attribute/index.html b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-hidden_attribute/index.html index 8b7f706afa..609558f2e4 100644 --- a/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-hidden_attribute/index.html +++ b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-hidden_attribute/index.html @@ -1,6 +1,6 @@ --- title: 使用aria-hidden属性 -slug: Web/Accessibility/ARIA/ARIA_Techniques/使用aria-hidden属性 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute tags: - HTML - Rôle @@ -10,6 +10,7 @@ tags: - 客户端 - 警告 translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute +original_slug: Web/Accessibility/ARIA/ARIA_Techniques/使用aria-hidden属性 ---

    {{draft}}

    diff --git a/files/zh-cn/web/accessibility/aria/roles/button_role/index.html b/files/zh-cn/web/accessibility/aria/roles/button_role/index.html index e0e35c449a..6bfea20c6d 100644 --- a/files/zh-cn/web/accessibility/aria/roles/button_role/index.html +++ b/files/zh-cn/web/accessibility/aria/roles/button_role/index.html @@ -1,11 +1,12 @@ --- title: Using the button role -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role +slug: Web/Accessibility/ARIA/Roles/button_role tags: - ARIA - 可访问性 - 无障碍 translation_of: Web/Accessibility/ARIA/Roles/button_role +original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role ---

    button 角色应该用于可单击的元素， 当用户激活时触发响应。 在其本身，role="button" 可以使任何元素 (e.g. {{HTMLElement("p")}}, {{HTMLElement("span")}} or {{HTMLElement("div")}}) 作为一个屏幕阅读器的按钮控件出现。此外，该角色还可以与 aria-pressed 属性组合使用，以创建切换按钮。

    diff --git a/files/zh-cn/web/api/abortcontroller/abort/index.html b/files/zh-cn/web/api/abortcontroller/abort/index.html index d661e73d2b..a37eda8176 100644 --- a/files/zh-cn/web/api/abortcontroller/abort/index.html +++ b/files/zh-cn/web/api/abortcontroller/abort/index.html @@ -1,7 +1,8 @@ --- title: AbortController.abort() -slug: Web/API/FetchController/abort +slug: Web/API/AbortController/abort translation_of: Web/API/AbortController/abort +original_slug: Web/API/FetchController/abort ---
    {{APIRef("DOM")}}{{SeeCompatTable}}
    diff --git a/files/zh-cn/web/api/abortcontroller/abortcontroller/index.html b/files/zh-cn/web/api/abortcontroller/abortcontroller/index.html index 35fe67d1ae..036806e29a 100644 --- a/files/zh-cn/web/api/abortcontroller/abortcontroller/index.html +++ b/files/zh-cn/web/api/abortcontroller/abortcontroller/index.html @@ -1,11 +1,12 @@ --- title: AbortController.AbortController() -slug: Web/API/FetchController/AbortController +slug: Web/API/AbortController/AbortController tags: - AbortController - Constructor - Fetch translation_of: Web/API/AbortController/AbortController +original_slug: Web/API/FetchController/AbortController ---
    {{APIRef("DOM")}}{{SeeCompatTable}}
    diff --git a/files/zh-cn/web/api/abortcontroller/index.html b/files/zh-cn/web/api/abortcontroller/index.html index 4211eb8211..c29b4a0a7d 100644 --- a/files/zh-cn/web/api/abortcontroller/index.html +++ b/files/zh-cn/web/api/abortcontroller/index.html @@ -1,12 +1,13 @@ --- title: AbortController -slug: Web/API/FetchController +slug: Web/API/AbortController tags: - API - AbortController - Fetch - how to cancel a fetch request translation_of: Web/API/AbortController +original_slug: Web/API/FetchController ---
    {{APIRef("DOM")}}{{SeeCompatTable}}
    diff --git a/files/zh-cn/web/api/ambient_light_events/index.html b/files/zh-cn/web/api/ambient_light_events/index.html index f90edf8ca2..62bc1d8d4f 100644 --- a/files/zh-cn/web/api/ambient_light_events/index.html +++ b/files/zh-cn/web/api/ambient_light_events/index.html @@ -1,11 +1,12 @@ --- title: Using Light Events -slug: Web/API/DeviceLightEvent/Using_light_events +slug: Web/API/Ambient_Light_Events tags: - WebAPI - 事件 - 环境光 translation_of: Web/API/Ambient_Light_Events +original_slug: Web/API/DeviceLightEvent/Using_light_events ---
    {{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}
    diff --git a/files/zh-cn/web/api/ambientlightsensor/illuminance/index.html b/files/zh-cn/web/api/ambientlightsensor/illuminance/index.html index b2b592a422..c17c74869c 100644 --- a/files/zh-cn/web/api/ambientlightsensor/illuminance/index.html +++ b/files/zh-cn/web/api/ambientlightsensor/illuminance/index.html @@ -1,8 +1,9 @@ --- title: reading -slug: Web/API/AmbientLightSensor/reading +slug: Web/API/AmbientLightSensor/illuminance translation_of: Web/API/AmbientLightSensor/illuminance translation_of_original: Web/API/AmbientLightSensor/reading +original_slug: Web/API/AmbientLightSensor/reading ---

    {{SeeCompatTable}}{{APIRef("Ambient Light Sensor API")}}

    diff --git a/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.html b/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.html index 2d00a8a100..b302a0ab96 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.createAnalyser() -slug: Web/API/AudioContext/createAnalyser +slug: Web/API/BaseAudioContext/createAnalyser translation_of: Web/API/BaseAudioContext/createAnalyser +original_slug: Web/API/AudioContext/createAnalyser ---

    {{ APIRef("Web Audio API") }}

    diff --git a/files/zh-cn/web/api/baseaudiocontext/createbiquadfilter/index.html b/files/zh-cn/web/api/baseaudiocontext/createbiquadfilter/index.html index fa5884ad71..7f8210c2f4 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createbiquadfilter/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createbiquadfilter/index.html @@ -1,6 +1,6 @@ --- title: AudioContext.createBiquadFilter() -slug: Web/API/AudioContext/createBiquadFilter +slug: Web/API/BaseAudioContext/createBiquadFilter tags: - API - EQ @@ -9,6 +9,7 @@ tags: - 方法 - 滤波器 translation_of: Web/API/BaseAudioContext/createBiquadFilter +original_slug: Web/API/AudioContext/createBiquadFilter ---

    {{ APIRef("Web Audio API") }}

    diff --git a/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.html b/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.html index 2d29213737..6a8e5b70fc 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.html @@ -1,12 +1,13 @@ --- title: AudioContext.createBuffer() -slug: Web/API/AudioContext/createBuffer +slug: Web/API/BaseAudioContext/createBuffer tags: - 创建音频片段 - 接口 - 方法 - 音频环境 translation_of: Web/API/BaseAudioContext/createBuffer +original_slug: Web/API/AudioContext/createBuffer ---

    音频环境{{ domxref("AudioContext") }} 接口的 createBuffer() 方法用于新建一个空白的 {{ domxref("AudioBuffer") }} 对象，以便用于填充数据，通过 {{ domxref("AudioBufferSourceNode") }} 播放。

    diff --git a/files/zh-cn/web/api/baseaudiocontext/createbuffersource/index.html b/files/zh-cn/web/api/baseaudiocontext/createbuffersource/index.html index 5244513312..701ca8e220 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createbuffersource/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createbuffersource/index.html @@ -1,12 +1,13 @@ --- title: AudioContext.createBufferSource() -slug: Web/API/AudioContext/createBufferSource +slug: Web/API/BaseAudioContext/createBufferSource tags: - API - 音源 - 音频源 - 音频节点 translation_of: Web/API/BaseAudioContext/createBufferSource +original_slug: Web/API/AudioContext/createBufferSource ---

    {{ APIRef("Web Audio API") }}

    diff --git a/files/zh-cn/web/api/baseaudiocontext/createchannelmerger/index.html b/files/zh-cn/web/api/baseaudiocontext/createchannelmerger/index.html index 281dcddfe7..2031548322 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createchannelmerger/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createchannelmerger/index.html @@ -1,12 +1,13 @@ --- title: AudioContext.createChannelMerger() -slug: Web/API/AudioContext/createChannelMerger +slug: Web/API/BaseAudioContext/createChannelMerger tags: - API - Audio - AudioContext - Audio_Chinese translation_of: Web/API/BaseAudioContext/createChannelMerger +original_slug: Web/API/AudioContext/createChannelMerger ---

    {{ APIRef("Web Audio API") }}

    diff --git a/files/zh-cn/web/api/baseaudiocontext/createchannelsplitter/index.html b/files/zh-cn/web/api/baseaudiocontext/createchannelsplitter/index.html index f46f5be2c5..37c482b6fd 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createchannelsplitter/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createchannelsplitter/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.createChannelSplitter() -slug: Web/API/AudioContext/createChannelSplitter +slug: Web/API/BaseAudioContext/createChannelSplitter translation_of: Web/API/BaseAudioContext/createChannelSplitter +original_slug: Web/API/AudioContext/createChannelSplitter ---

    {{ APIRef("Web Audio API") }}

    diff --git a/files/zh-cn/web/api/baseaudiocontext/createconvolver/index.html b/files/zh-cn/web/api/baseaudiocontext/createconvolver/index.html index 2cbe395edc..ae97d90aac 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createconvolver/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createconvolver/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.createConvolver() -slug: Web/API/AudioContext/createConvolver +slug: Web/API/BaseAudioContext/createConvolver translation_of: Web/API/BaseAudioContext/createConvolver +original_slug: Web/API/AudioContext/createConvolver ---

    {{ APIRef("Web Audio API") }}

    diff --git a/files/zh-cn/web/api/baseaudiocontext/createdelay/index.html b/files/zh-cn/web/api/baseaudiocontext/createdelay/index.html index b8e502758d..baae047758 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createdelay/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createdelay/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.createDelay() -slug: Web/API/AudioContext/createDelay +slug: Web/API/BaseAudioContext/createDelay translation_of: Web/API/BaseAudioContext/createDelay +original_slug: Web/API/AudioContext/createDelay ---

    {{ APIRef("Web Audio API") }}

    diff --git a/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.html b/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.html index 7e505bc06a..e8c722c908 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.createScriptProcessor() -slug: Web/API/AudioContext/createScriptProcessor +slug: Web/API/BaseAudioContext/createScriptProcessor translation_of: Web/API/BaseAudioContext/createScriptProcessor +original_slug: Web/API/AudioContext/createScriptProcessor ---

    {{ APIRef("Web Audio API") }}

    diff --git a/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.html b/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.html index 7aef8d5688..10986c407e 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.createWaveShaper() -slug: Web/API/AudioContext/createWaveShaper +slug: Web/API/BaseAudioContext/createWaveShaper translation_of: Web/API/BaseAudioContext/createWaveShaper +original_slug: Web/API/AudioContext/createWaveShaper ---

    {{ APIRef("Web Audio API") }}

    diff --git a/files/zh-cn/web/api/baseaudiocontext/currenttime/index.html b/files/zh-cn/web/api/baseaudiocontext/currenttime/index.html index fbdaf4315c..57e190cb46 100644 --- a/files/zh-cn/web/api/baseaudiocontext/currenttime/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/currenttime/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.currentTime -slug: Web/API/AudioContext/currentTime +slug: Web/API/BaseAudioContext/currentTime translation_of: Web/API/BaseAudioContext/currentTime +original_slug: Web/API/AudioContext/currentTime ---

    {{ APIRef("Web Audio API") }}

    diff --git a/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.html b/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.html index 40693fd8cc..9200638c57 100644 --- a/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.html @@ -1,12 +1,13 @@ --- title: AudioContext.decodeAudioData() -slug: Web/API/AudioContext/decodeAudioData +slug: Web/API/BaseAudioContext/decodeAudioData tags: - API - Audio - audio接口 - 音频解码 translation_of: Web/API/BaseAudioContext/decodeAudioData +original_slug: Web/API/AudioContext/decodeAudioData ---

    {{ APIRef("Web Audio API") }}

    diff --git a/files/zh-cn/web/api/baseaudiocontext/destination/index.html b/files/zh-cn/web/api/baseaudiocontext/destination/index.html index 04fdfe8247..c1ebabfc81 100644 --- a/files/zh-cn/web/api/baseaudiocontext/destination/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/destination/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.destination -slug: Web/API/AudioContext/destination +slug: Web/API/BaseAudioContext/destination translation_of: Web/API/BaseAudioContext/destination +original_slug: Web/API/AudioContext/destination ---

    {{ APIRef("Web Audio API") }}

    diff --git a/files/zh-cn/web/api/baseaudiocontext/listener/index.html b/files/zh-cn/web/api/baseaudiocontext/listener/index.html index 81b2a730a2..64e97d31cc 100644 --- a/files/zh-cn/web/api/baseaudiocontext/listener/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/listener/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.listener -slug: Web/API/AudioContext/listener +slug: Web/API/BaseAudioContext/listener translation_of: Web/API/BaseAudioContext/listener +original_slug: Web/API/AudioContext/listener ---

    {{ APIRef("Web Audio API") }}

    diff --git a/files/zh-cn/web/api/baseaudiocontext/onstatechange/index.html b/files/zh-cn/web/api/baseaudiocontext/onstatechange/index.html index ee9b3f21c0..b2ee0a7463 100644 --- a/files/zh-cn/web/api/baseaudiocontext/onstatechange/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/onstatechange/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.onstatechange -slug: Web/API/AudioContext/onstatechange +slug: Web/API/BaseAudioContext/onstatechange translation_of: Web/API/BaseAudioContext/onstatechange +original_slug: Web/API/AudioContext/onstatechange ---

    {{ APIRef("Web Audio API") }}

    diff --git a/files/zh-cn/web/api/baseaudiocontext/samplerate/index.html b/files/zh-cn/web/api/baseaudiocontext/samplerate/index.html index b811702e26..d888951ef6 100644 --- a/files/zh-cn/web/api/baseaudiocontext/samplerate/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/samplerate/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.sampleRate -slug: Web/API/AudioContext/sampleRate +slug: Web/API/BaseAudioContext/sampleRate translation_of: Web/API/BaseAudioContext/sampleRate +original_slug: Web/API/AudioContext/sampleRate ---

    {{ APIRef("Web Audio API") }}

    diff --git a/files/zh-cn/web/api/baseaudiocontext/state/index.html b/files/zh-cn/web/api/baseaudiocontext/state/index.html index 97876f5d3d..df6b383bc9 100644 --- a/files/zh-cn/web/api/baseaudiocontext/state/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/state/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.state -slug: Web/API/AudioContext/state +slug: Web/API/BaseAudioContext/state translation_of: Web/API/BaseAudioContext/state +original_slug: Web/API/AudioContext/state ---

    {{ APIRef("Web Audio API") }}

    diff --git a/files/zh-cn/web/api/broadcastchannel/message_event/index.html b/files/zh-cn/web/api/broadcastchannel/message_event/index.html index ccbd2d9859..9b89d2bd63 100644 --- a/files/zh-cn/web/api/broadcastchannel/message_event/index.html +++ b/files/zh-cn/web/api/broadcastchannel/message_event/index.html @@ -1,11 +1,12 @@ --- title: 'BroadcastChannel: message event' -slug: Web/Events/message +slug: Web/API/BroadcastChannel/message_event tags: - 事件 - 消息 - 通信 translation_of: Web/API/BroadcastChannel/message_event +original_slug: Web/Events/message ---
    {{APIRef}}
    diff --git a/files/zh-cn/web/api/canvascapturemediastreamtrack/index.html b/files/zh-cn/web/api/canvascapturemediastreamtrack/index.html index 1a71e7d834..a6a2e34ccc 100644 --- a/files/zh-cn/web/api/canvascapturemediastreamtrack/index.html +++ b/files/zh-cn/web/api/canvascapturemediastreamtrack/index.html @@ -1,7 +1,8 @@ --- title: CanvasCaptureMediaStream -slug: Web/API/CanvasCaptureMediaStream +slug: Web/API/CanvasCaptureMediaStreamTrack translation_of: Web/API/CanvasCaptureMediaStreamTrack +original_slug: Web/API/CanvasCaptureMediaStream ---
    {{APIRef}}{{SeeCompatTable}}
    diff --git a/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.html b/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.html index 8ddfa8df8e..fb81f88093 100644 --- a/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.html +++ b/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.html @@ -1,6 +1,6 @@ --- title: 使用 channel messaging -slug: Web/API/Channel_Messaging_API/使用_channel_messaging +slug: Web/API/Channel_Messaging_API/Using_channel_messaging tags: - API - Channel messaging @@ -9,6 +9,7 @@ tags: - MessagePort - 指南 translation_of: Web/API/Channel_Messaging_API/Using_channel_messaging +original_slug: Web/API/Channel_Messaging_API/使用_channel_messaging ---

    {{DefaultAPISidebar("Channel Messaging API")}}

    diff --git a/files/zh-cn/web/api/crypto/getrandomvalues/index.html b/files/zh-cn/web/api/crypto/getrandomvalues/index.html index 5df5fb0a83..504ab67343 100644 --- a/files/zh-cn/web/api/crypto/getrandomvalues/index.html +++ b/files/zh-cn/web/api/crypto/getrandomvalues/index.html @@ -1,6 +1,6 @@ --- title: Crypto.getRandomValues() -slug: Web/API/RandomSource/getRandomValues +slug: Web/API/Crypto/getRandomValues tags: - API - 加密 @@ -9,6 +9,7 @@ tags: - 密码学 - 方法 translation_of: Web/API/Crypto/getRandomValues +original_slug: Web/API/RandomSource/getRandomValues ---

    {{APIRef("Web Crypto API")}}

    diff --git a/files/zh-cn/web/api/csspagerule/index.html b/files/zh-cn/web/api/csspagerule/index.html index ff1d047a59..750765aa1d 100644 --- a/files/zh-cn/web/api/csspagerule/index.html +++ b/files/zh-cn/web/api/csspagerule/index.html @@ -1,7 +1,8 @@ --- title: CSS分页规则 -slug: Web/API/CSS分页规则 +slug: Web/API/CSSPageRule translation_of: Web/API/CSSPageRule +original_slug: Web/API/CSS分页规则 ---
    {{APIRef("CSSOM")}}
    diff --git a/files/zh-cn/web/api/devicemotioneventacceleration/index.html b/files/zh-cn/web/api/devicemotioneventacceleration/index.html index 34b215d781..a278374222 100644 --- a/files/zh-cn/web/api/devicemotioneventacceleration/index.html +++ b/files/zh-cn/web/api/devicemotioneventacceleration/index.html @@ -1,6 +1,6 @@ --- title: DeviceAcceleration -slug: Web/API/DeviceAcceleration +slug: Web/API/DeviceMotionEventAcceleration tags: - API - 传感器 @@ -9,6 +9,7 @@ tags: - 需要示例 translation_of: Web/API/DeviceMotionEventAcceleration translation_of_original: Web/API/DeviceAcceleration +original_slug: Web/API/DeviceAcceleration ---
    {{ ApiRef("Device Orientation Events") }}{{SeeCompatTable}}
    diff --git a/files/zh-cn/web/api/document/fullscreen/index.html b/files/zh-cn/web/api/document/fullscreen/index.html index eb15adcede..f1d6edc436 100644 --- a/files/zh-cn/web/api/document/fullscreen/index.html +++ b/files/zh-cn/web/api/document/fullscreen/index.html @@ -1,7 +1,8 @@ --- title: document.mozFullScreen -slug: Web/API/Document/mozFullScreen +slug: Web/API/Document/fullscreen translation_of: Web/API/Document/fullscreen +original_slug: Web/API/Document/mozFullScreen ---

     

    diff --git a/files/zh-cn/web/api/document/fullscreenenabled/index.html b/files/zh-cn/web/api/document/fullscreenenabled/index.html index 248797541a..244abe8e26 100644 --- a/files/zh-cn/web/api/document/fullscreenenabled/index.html +++ b/files/zh-cn/web/api/document/fullscreenenabled/index.html @@ -1,7 +1,8 @@ --- title: document.mozFullScreenEnabled -slug: Web/API/Document/mozFullScreenEnabled +slug: Web/API/Document/fullscreenEnabled translation_of: Web/API/Document/fullscreenEnabled +original_slug: Web/API/Document/mozFullScreenEnabled ---

    {{ ApiRef() }}

    概述

    diff --git a/files/zh-cn/web/api/document/onafterscriptexecute/index.html b/files/zh-cn/web/api/document/onafterscriptexecute/index.html index f1e976522e..74bd826004 100644 --- a/files/zh-cn/web/api/document/onafterscriptexecute/index.html +++ b/files/zh-cn/web/api/document/onafterscriptexecute/index.html @@ -1,10 +1,11 @@ --- title: element.onafterscriptexecute -slug: Web/API/Element/onafterscriptexecute +slug: Web/API/Document/onafterscriptexecute tags: - DOM - onafterscriptexecute translation_of: Web/API/Document/onafterscriptexecute +original_slug: Web/API/Element/onafterscriptexecute ---
    {{ApiRef}}{{gecko_minversion_header("2")}}
    diff --git a/files/zh-cn/web/api/document/readystatechange_event/index.html b/files/zh-cn/web/api/document/readystatechange_event/index.html index a4f95498ad..769a0cd3c5 100644 --- a/files/zh-cn/web/api/document/readystatechange_event/index.html +++ b/files/zh-cn/web/api/document/readystatechange_event/index.html @@ -1,12 +1,13 @@ --- title: 'Document: readystatechange 事件' -slug: Web/Events/readystatechange事件 +slug: Web/API/Document/readystatechange_event tags: - Reference - XMLHttpRequest - interactive - 事件 translation_of: Web/API/Document/readystatechange_event +original_slug: Web/Events/readystatechange事件 ---
    {{APIRef}}
    diff --git a/files/zh-cn/web/api/document/touchmove_event/index.html b/files/zh-cn/web/api/document/touchmove_event/index.html index 1321a0c4d2..47cfa0fb7b 100644 --- a/files/zh-cn/web/api/document/touchmove_event/index.html +++ b/files/zh-cn/web/api/document/touchmove_event/index.html @@ -1,7 +1,8 @@ --- title: touchmove -slug: Web/API/Document/rouchmove_event +slug: Web/API/Document/touchmove_event translation_of: Web/API/Document/touchmove_event +original_slug: Web/API/Document/rouchmove_event ---
    {{APIRef}}
    diff --git a/files/zh-cn/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html b/files/zh-cn/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html index 9d18892707..79d442f4e6 100644 --- a/files/zh-cn/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html +++ b/files/zh-cn/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html @@ -1,10 +1,12 @@ --- title: 使用Javascript和DOM Interfaces来处理HTML -slug: 使用Javascript和DOM_Interfaces来处理HTML +slug: >- + Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces tags: - DOM translation_of: >- Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces +original_slug: 使用Javascript和DOM_Interfaces来处理HTML ---

    简介

    diff --git a/files/zh-cn/web/api/documentorshadowroot/fullscreenelement/index.html b/files/zh-cn/web/api/documentorshadowroot/fullscreenelement/index.html index d87cd89683..d26c1b85df 100644 --- a/files/zh-cn/web/api/documentorshadowroot/fullscreenelement/index.html +++ b/files/zh-cn/web/api/documentorshadowroot/fullscreenelement/index.html @@ -1,7 +1,8 @@ --- title: document.mozFullScreenElement -slug: Web/API/Document/mozFullScreenElement +slug: Web/API/DocumentOrShadowRoot/fullscreenElement translation_of: Web/API/DocumentOrShadowRoot/fullscreenElement +original_slug: Web/API/Document/mozFullScreenElement ---

    {{ ApiRef() }}

    概述

    diff --git a/files/zh-cn/web/api/documentorshadowroot/pointerlockelement/index.html b/files/zh-cn/web/api/documentorshadowroot/pointerlockelement/index.html index eb6ed9cf98..38702632bd 100644 --- a/files/zh-cn/web/api/documentorshadowroot/pointerlockelement/index.html +++ b/files/zh-cn/web/api/documentorshadowroot/pointerlockelement/index.html @@ -1,7 +1,8 @@ --- title: Document.pointerLockElement -slug: Web/API/Document/pointerLockElement +slug: Web/API/DocumentOrShadowRoot/pointerLockElement translation_of: Web/API/DocumentOrShadowRoot/pointerLockElement +original_slug: Web/API/Document/pointerLockElement ---
    {{APIRef("DOM")}}
    diff --git a/files/zh-cn/web/api/element/afterscriptexecute_event/index.html b/files/zh-cn/web/api/element/afterscriptexecute_event/index.html index b2f4f0d980..bf7f503f53 100644 --- a/files/zh-cn/web/api/element/afterscriptexecute_event/index.html +++ b/files/zh-cn/web/api/element/afterscriptexecute_event/index.html @@ -1,11 +1,12 @@ --- title: Element：afterscriptexecute 事件 -slug: Web/Events/afterscriptexecute +slug: Web/API/Element/afterscriptexecute_event tags: - 事件 - 参考 - 非标准 translation_of: Web/API/Element/afterscriptexecute_event +original_slug: Web/Events/afterscriptexecute ---
    {{APIRef}}
    diff --git a/files/zh-cn/web/api/element/beforescriptexecute_event/index.html b/files/zh-cn/web/api/element/beforescriptexecute_event/index.html index 00aa4120c1..0097f13ce6 100644 --- a/files/zh-cn/web/api/element/beforescriptexecute_event/index.html +++ b/files/zh-cn/web/api/element/beforescriptexecute_event/index.html @@ -1,11 +1,12 @@ --- title: Element：beforescriptexecute 事件 -slug: Web/Events/beforescriptexecute +slug: Web/API/Element/beforescriptexecute_event tags: - DOM - 参考 - 非标准 translation_of: Web/API/Element/beforescriptexecute_event +original_slug: Web/Events/beforescriptexecute ---
    {{APIRef}}
    diff --git a/files/zh-cn/web/api/element/blur_event/index.html b/files/zh-cn/web/api/element/blur_event/index.html index a57cc5b995..a072ec452b 100644 --- a/files/zh-cn/web/api/element/blur_event/index.html +++ b/files/zh-cn/web/api/element/blur_event/index.html @@ -1,7 +1,8 @@ --- title: blur (event) -slug: Web/Events/blur +slug: Web/API/Element/blur_event translation_of: Web/API/Element/blur_event +original_slug: Web/Events/blur ---

    当一个元素失去焦点的时候 blur 事件被触发。它和 focusout 事件的主要区别是 focusout 支持冒泡。

    diff --git a/files/zh-cn/web/api/element/compositionend_event/index.html b/files/zh-cn/web/api/element/compositionend_event/index.html index 4a023fc0e5..a6f99fdb23 100644 --- a/files/zh-cn/web/api/element/compositionend_event/index.html +++ b/files/zh-cn/web/api/element/compositionend_event/index.html @@ -1,9 +1,10 @@ --- title: compositionend -slug: Web/Events/compositionend +slug: Web/API/Element/compositionend_event tags: - 事件 translation_of: Web/API/Element/compositionend_event +original_slug: Web/Events/compositionend ---

    当文本段落的组成完成或取消时, compositionend 事件将被触发 (具有特殊字符的触发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)。

    diff --git a/files/zh-cn/web/api/element/compositionstart_event/index.html b/files/zh-cn/web/api/element/compositionstart_event/index.html index 71aa9f1f0d..3997c0b7b1 100644 --- a/files/zh-cn/web/api/element/compositionstart_event/index.html +++ b/files/zh-cn/web/api/element/compositionstart_event/index.html @@ -1,6 +1,6 @@ --- title: compositionstart -slug: Web/Events/compositionstart +slug: Web/API/Element/compositionstart_event tags: - Element - Event @@ -9,6 +9,7 @@ tags: - 事件 - 参考 translation_of: Web/API/Element/compositionstart_event +original_slug: Web/Events/compositionstart ---

    文本合成系统如 {{glossary("input method editor")}}（即输入法编辑器）开始新的输入合成时会触发 compositionstart 事件。

    diff --git a/files/zh-cn/web/api/element/compositionupdate_event/index.html b/files/zh-cn/web/api/element/compositionupdate_event/index.html index 11952af506..af46b6cfdb 100644 --- a/files/zh-cn/web/api/element/compositionupdate_event/index.html +++ b/files/zh-cn/web/api/element/compositionupdate_event/index.html @@ -1,7 +1,8 @@ --- title: compositionupdate -slug: Web/Events/compositionupdate +slug: Web/API/Element/compositionupdate_event translation_of: Web/API/Element/compositionupdate_event +original_slug: Web/Events/compositionupdate ---

    compositionupdate 事件触发于字符被输入到一段文字的时候（这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）

    diff --git a/files/zh-cn/web/api/element/copy_event/index.html b/files/zh-cn/web/api/element/copy_event/index.html index ac249f5055..9c705e1de4 100644 --- a/files/zh-cn/web/api/element/copy_event/index.html +++ b/files/zh-cn/web/api/element/copy_event/index.html @@ -1,11 +1,12 @@ --- title: copy -slug: Web/Events/copy +slug: Web/API/Element/copy_event tags: - Clipboard API - Event - Reference translation_of: Web/API/Element/copy_event +original_slug: Web/Events/copy ---

    当用户通过浏览器UI（例如，使用 Ctrl/⌘+C  键盘快捷方式或从菜单中选择“复制”）启动复制操作并响应允许的{{domxref("Document.execCommand","document.execCommand('copy')")}}调用时触发copy事件。

    diff --git a/files/zh-cn/web/api/element/cut_event/index.html b/files/zh-cn/web/api/element/cut_event/index.html index 48c024451a..ea59997633 100644 --- a/files/zh-cn/web/api/element/cut_event/index.html +++ b/files/zh-cn/web/api/element/cut_event/index.html @@ -1,11 +1,12 @@ --- title: cut -slug: Web/Events/cut +slug: Web/API/Element/cut_event tags: - 事件 - 剪贴板API - 参考 translation_of: Web/API/Element/cut_event +original_slug: Web/Events/cut ---

    This page needs to be updated to match the currently specified behaviour. In the meantime please refer to the specification: https://www.w3.org/TR/clipboard-apis/#the-cut-action

    diff --git a/files/zh-cn/web/api/element/domactivate_event/index.html b/files/zh-cn/web/api/element/domactivate_event/index.html index 3185540e78..b0f129f8cc 100644 --- a/files/zh-cn/web/api/element/domactivate_event/index.html +++ b/files/zh-cn/web/api/element/domactivate_event/index.html @@ -1,11 +1,12 @@ --- title: 'Element: DOMActivate event' -slug: Web/API/Element/Activate_event +slug: Web/API/Element/DOMActivate_event tags: - API - 事件 - 参考 translation_of: Web/API/Element/DOMActivate_event +original_slug: Web/API/Element/Activate_event ---

    {{APIRef}}

    diff --git a/files/zh-cn/web/api/element/error_event/index.html b/files/zh-cn/web/api/element/error_event/index.html index 913caf76bf..3d14efef34 100644 --- a/files/zh-cn/web/api/element/error_event/index.html +++ b/files/zh-cn/web/api/element/error_event/index.html @@ -1,7 +1,8 @@ --- title: error -slug: Web/Events/error +slug: Web/API/Element/error_event translation_of: Web/API/Element/error_event +original_slug: Web/Events/error ---
    {{APIRef}}
    diff --git a/files/zh-cn/web/api/element/focus_event/index.html b/files/zh-cn/web/api/element/focus_event/index.html index 4a93ee7726..ff4ebf6447 100644 --- a/files/zh-cn/web/api/element/focus_event/index.html +++ b/files/zh-cn/web/api/element/focus_event/index.html @@ -1,7 +1,8 @@ --- title: focus -slug: Web/Events/focus +slug: Web/API/Element/focus_event translation_of: Web/API/Element/focus_event +original_slug: Web/Events/focus ---

    focus事件在元素获取焦点时触发. 这个事件和 focusin 最大的区别仅仅在于后者会事件冒泡.

    diff --git a/files/zh-cn/web/api/element/focusout_event/index.html b/files/zh-cn/web/api/element/focusout_event/index.html index 87a8a9bd48..defd92146f 100644 --- a/files/zh-cn/web/api/element/focusout_event/index.html +++ b/files/zh-cn/web/api/element/focusout_event/index.html @@ -1,7 +1,8 @@ --- title: focusout -slug: Web/Events/focusout +slug: Web/API/Element/focusout_event translation_of: Web/API/Element/focusout_event +original_slug: Web/Events/focusout ---

    当元素即将失去焦点时，focusout 事件被触发。focusout 事件和 blur 事件之间的主要区别在于后者不会冒泡。

    diff --git a/files/zh-cn/web/api/element/mousewheel_event/index.html b/files/zh-cn/web/api/element/mousewheel_event/index.html index 599f17edbb..26649814ed 100644 --- a/files/zh-cn/web/api/element/mousewheel_event/index.html +++ b/files/zh-cn/web/api/element/mousewheel_event/index.html @@ -1,7 +1,8 @@ --- title: mousewheel -slug: Web/Events/mousewheel +slug: Web/API/Element/mousewheel_event translation_of: Web/API/Element/mousewheel_event +original_slug: Web/Events/mousewheel ---

    {{ Non-standard_header() }}

    diff --git a/files/zh-cn/web/api/element/paste_event/index.html b/files/zh-cn/web/api/element/paste_event/index.html index 1fb088eddf..e303cd4697 100644 --- a/files/zh-cn/web/api/element/paste_event/index.html +++ b/files/zh-cn/web/api/element/paste_event/index.html @@ -1,11 +1,12 @@ --- title: 'Element: paste事件' -slug: Web/Events/paste +slug: Web/API/Element/paste_event tags: - Clipboard API - Event - Reference translation_of: Web/API/Element/paste_event +original_slug: Web/Events/paste ---

     {{APIRef}}

    diff --git a/files/zh-cn/web/api/elementcssinlinestyle/style/index.html b/files/zh-cn/web/api/elementcssinlinestyle/style/index.html index 2b825c80cc..28248babe1 100644 --- a/files/zh-cn/web/api/elementcssinlinestyle/style/index.html +++ b/files/zh-cn/web/api/elementcssinlinestyle/style/index.html @@ -1,7 +1,8 @@ --- title: HTMLElement.style -slug: Web/API/HTMLElement/style +slug: Web/API/ElementCSSInlineStyle/style translation_of: Web/API/ElementCSSInlineStyle/style +original_slug: Web/API/HTMLElement/style ---
    {{ APIRef("HTML DOM") }}
    diff --git a/files/zh-cn/web/api/event/cancelbubble/index.html b/files/zh-cn/web/api/event/cancelbubble/index.html index c228d329d6..e87685b269 100644 --- a/files/zh-cn/web/api/event/cancelbubble/index.html +++ b/files/zh-cn/web/api/event/cancelbubble/index.html @@ -1,9 +1,10 @@ --- title: Event.cancelBubble -slug: Web/API/Event/禁用时间冒泡 +slug: Web/API/Event/cancelBubble tags: - 事件 translation_of: Web/API/Event/cancelBubble +original_slug: Web/API/Event/禁用时间冒泡 ---

    {{APIRef("DOM Events")}} 

    diff --git a/files/zh-cn/web/api/eventsource/close/index.html b/files/zh-cn/web/api/eventsource/close/index.html index 3b8af5d6d3..424e609656 100644 --- a/files/zh-cn/web/api/eventsource/close/index.html +++ b/files/zh-cn/web/api/eventsource/close/index.html @@ -1,7 +1,8 @@ --- title: EventSource.close() -slug: Server-sent_events/EventSource/close +slug: Web/API/EventSource/close translation_of: Web/API/EventSource/close +original_slug: Server-sent_events/EventSource/close ---
    {{APIRef('WebSockets API')}}
    diff --git a/files/zh-cn/web/api/eventsource/eventsource/index.html b/files/zh-cn/web/api/eventsource/eventsource/index.html index a93b5eb8b2..d228a4768d 100644 --- a/files/zh-cn/web/api/eventsource/eventsource/index.html +++ b/files/zh-cn/web/api/eventsource/eventsource/index.html @@ -1,11 +1,12 @@ --- title: EventSource() -slug: Server-sent_events/EventSource/EventSource +slug: Web/API/EventSource/EventSource tags: - API - EventSource - Server-sent events translation_of: Web/API/EventSource/EventSource +original_slug: Server-sent_events/EventSource/EventSource ---

    {{APIRef('WebSockets API')}}

    diff --git a/files/zh-cn/web/api/eventsource/index.html b/files/zh-cn/web/api/eventsource/index.html index 977bf56d90..55a81c56ef 100644 --- a/files/zh-cn/web/api/eventsource/index.html +++ b/files/zh-cn/web/api/eventsource/index.html @@ -1,11 +1,12 @@ --- title: EventSource -slug: Server-sent_events/EventSource +slug: Web/API/EventSource tags: - API - Server-sent events - 参考 translation_of: Web/API/EventSource +original_slug: Server-sent_events/EventSource ---

    {{APIRef("Websockets API")}}

    diff --git a/files/zh-cn/web/api/eventsource/onerror/index.html b/files/zh-cn/web/api/eventsource/onerror/index.html index ad24259a4e..dbc9dc3e2c 100644 --- a/files/zh-cn/web/api/eventsource/onerror/index.html +++ b/files/zh-cn/web/api/eventsource/onerror/index.html @@ -1,7 +1,8 @@ --- title: EventSource.onerror -slug: Server-sent_events/EventSource/onerror +slug: Web/API/EventSource/onerror translation_of: Web/API/EventSource/onerror +original_slug: Server-sent_events/EventSource/onerror ---
    {{APIRef('WebSockets API')}}
    diff --git a/files/zh-cn/web/api/eventsource/onopen/index.html b/files/zh-cn/web/api/eventsource/onopen/index.html index dfc47bbf4e..9a4668264a 100644 --- a/files/zh-cn/web/api/eventsource/onopen/index.html +++ b/files/zh-cn/web/api/eventsource/onopen/index.html @@ -1,11 +1,12 @@ --- title: EventSource.onopen -slug: Server-sent_events/EventSource/onopen +slug: Web/API/EventSource/onopen tags: - API - Event Handler - EventSource translation_of: Web/API/EventSource/onopen +original_slug: Server-sent_events/EventSource/onopen ---
    {{APIRef('WebSockets API')}}
    diff --git a/files/zh-cn/web/api/file_and_directory_entries_api/introduction/index.html b/files/zh-cn/web/api/file_and_directory_entries_api/introduction/index.html index e26a6b3c45..1dac673d6c 100644 --- a/files/zh-cn/web/api/file_and_directory_entries_api/introduction/index.html +++ b/files/zh-cn/web/api/file_and_directory_entries_api/introduction/index.html @@ -1,7 +1,8 @@ --- title: 文件系统API的基本概念 -slug: WebGuide/API/File_System/Introduction +slug: Web/API/File_and_Directory_Entries_API/Introduction translation_of: Web/API/File_and_Directory_Entries_API/Introduction +original_slug: WebGuide/API/File_System/Introduction ---

    本文是对Basic_Concepts_About_the_Filesystem_API一文的译文。

    diff --git a/files/zh-cn/web/api/filereader/abort_event/index.html b/files/zh-cn/web/api/filereader/abort_event/index.html index 8e36dbb3dd..e6a2040602 100644 --- a/files/zh-cn/web/api/filereader/abort_event/index.html +++ b/files/zh-cn/web/api/filereader/abort_event/index.html @@ -1,6 +1,6 @@ --- title: 'FileReader: 中止事件(abort)' -slug: Web/API/FileReader/中止事件(abort) +slug: Web/API/FileReader/abort_event tags: - API - FileReader @@ -11,6 +11,7 @@ tags: - 中止 - 事件 translation_of: Web/API/FileReader/abort_event +original_slug: Web/API/FileReader/中止事件(abort) ---
    {{APIRef}}
    diff --git a/files/zh-cn/web/api/formdata/delete/index.html b/files/zh-cn/web/api/formdata/delete/index.html index 9d38b4e20a..2841460298 100644 --- a/files/zh-cn/web/api/formdata/delete/index.html +++ b/files/zh-cn/web/api/formdata/delete/index.html @@ -1,9 +1,10 @@ --- title: FormData.delete() -slug: Web/API/FormData/删除 +slug: Web/API/FormData/delete tags: - 删除 translation_of: Web/API/FormData/delete +original_slug: Web/API/FormData/删除 ---

    {{APIRef("XMLHttpRequest")}}

    diff --git a/files/zh-cn/web/api/fullscreen_api/guide/index.html b/files/zh-cn/web/api/fullscreen_api/guide/index.html index b2d2d36f3a..02ba338c48 100644 --- a/files/zh-cn/web/api/fullscreen_api/guide/index.html +++ b/files/zh-cn/web/api/fullscreen_api/guide/index.html @@ -1,6 +1,6 @@ --- title: 全屏指南 -slug: Web/API/Fullscreen_API/指南 +slug: Web/API/Fullscreen_API/Guide tags: - API - 全屏 @@ -12,6 +12,7 @@ tags: - 显示 - 游戏 translation_of: Web/API/Fullscreen_API/Guide +original_slug: Web/API/Fullscreen_API/指南 ---
    {{DefaultAPISidebar("Fullscreen API")}}
    diff --git a/files/zh-cn/web/api/geolocation_api/index.html b/files/zh-cn/web/api/geolocation_api/index.html index 54d8665516..1618172faf 100644 --- a/files/zh-cn/web/api/geolocation_api/index.html +++ b/files/zh-cn/web/api/geolocation_api/index.html @@ -1,10 +1,11 @@ --- title: 使用地理位置定位 -slug: Web/API/Geolocation/Using_geolocation +slug: Web/API/Geolocation_API tags: - 地理位置 API - 指南 translation_of: Web/API/Geolocation_API +original_slug: Web/API/Geolocation/Using_geolocation ---

    地理位置 API 允许用户向 Web 应用程序提供他们的位置。出于隐私考虑，报告地理位置前会先请求用户许可。

    diff --git a/files/zh-cn/web/api/geolocationposition/timestamp/index.html b/files/zh-cn/web/api/geolocationposition/timestamp/index.html index e4c731f868..faa4a6a3da 100644 --- a/files/zh-cn/web/api/geolocationposition/timestamp/index.html +++ b/files/zh-cn/web/api/geolocationposition/timestamp/index.html @@ -1,7 +1,8 @@ --- title: GeolocationPosition.timestamp -slug: Web/API/GeolocationPosition/获取该位置时的时间戳 +slug: Web/API/GeolocationPosition/timestamp translation_of: Web/API/GeolocationPosition/timestamp +original_slug: Web/API/GeolocationPosition/获取该位置时的时间戳 ---
    {{securecontext_header}}{{APIRef("Geolocation API")}}
    diff --git a/files/zh-cn/web/api/globaleventhandlers/ondurationchange/index.html b/files/zh-cn/web/api/globaleventhandlers/ondurationchange/index.html index 2c3923fca9..fad4e30ac8 100644 --- a/files/zh-cn/web/api/globaleventhandlers/ondurationchange/index.html +++ b/files/zh-cn/web/api/globaleventhandlers/ondurationchange/index.html @@ -1,11 +1,12 @@ --- title: GlobalEventHandlers.ondurationchange -slug: Web/API/GlobalEventHandlers/时长改变 +slug: Web/API/GlobalEventHandlers/ondurationchange tags: - API - Audio - Video translation_of: Web/API/GlobalEventHandlers/ondurationchange +original_slug: Web/API/GlobalEventHandlers/时长改变 ---
    {{ ApiRef("HTML DOM") }}
    diff --git a/files/zh-cn/web/api/htmlanchorelement/referrerpolicy/index.html b/files/zh-cn/web/api/htmlanchorelement/referrerpolicy/index.html index b3e30b3fe2..a4ed4b000d 100644 --- a/files/zh-cn/web/api/htmlanchorelement/referrerpolicy/index.html +++ b/files/zh-cn/web/api/htmlanchorelement/referrerpolicy/index.html @@ -1,7 +1,8 @@ --- title: HTMLAnchorElement.referrer -slug: Web/API/HTMLAnchorElement/referrer +slug: Web/API/HTMLAnchorElement/referrerPolicy translation_of: Web/API/HTMLAnchorElement/referrerPolicy +original_slug: Web/API/HTMLAnchorElement/referrer ---
    {{APIRef}}{{SeeCompatTable}}
    diff --git a/files/zh-cn/web/api/htmlcanvaselement/capturestream/index.html b/files/zh-cn/web/api/htmlcanvaselement/capturestream/index.html index 999485b6f6..a0fdca7df3 100644 --- a/files/zh-cn/web/api/htmlcanvaselement/capturestream/index.html +++ b/files/zh-cn/web/api/htmlcanvaselement/capturestream/index.html @@ -1,7 +1,8 @@ --- title: HTMLCanvasElement.captureStream() -slug: Web/API/HTMLCanvasElement/捕获流 +slug: Web/API/HTMLCanvasElement/captureStream translation_of: Web/API/HTMLCanvasElement/captureStream +original_slug: Web/API/HTMLCanvasElement/捕获流 ---
    {{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}
    diff --git a/files/zh-cn/web/api/htmlelement/accesskey/index.html b/files/zh-cn/web/api/htmlelement/accesskey/index.html index 4f76e7f784..832396ac33 100644 --- a/files/zh-cn/web/api/htmlelement/accesskey/index.html +++ b/files/zh-cn/web/api/htmlelement/accesskey/index.html @@ -1,12 +1,13 @@ --- title: Element.accessKey -slug: Web/API/Element/accessKey +slug: Web/API/HTMLElement/accessKey tags: - API接口 - 属性 - 需要丰富内容 translation_of: Web/API/HTMLElement/accessKey translation_of_original: Web/API/Element/accessKey +original_slug: Web/API/Element/accessKey ---
    {{APIRef("DOM")}}
    diff --git a/files/zh-cn/web/api/htmlelement/animationend_event/index.html b/files/zh-cn/web/api/htmlelement/animationend_event/index.html index cb701ac392..85c1303f28 100644 --- a/files/zh-cn/web/api/htmlelement/animationend_event/index.html +++ b/files/zh-cn/web/api/htmlelement/animationend_event/index.html @@ -1,6 +1,6 @@ --- title: animationend -slug: Web/Events/animationend +slug: Web/API/HTMLElement/animationend_event tags: - Animation - AnimationEvent @@ -10,6 +10,7 @@ tags: - Reference - animationend translation_of: Web/API/HTMLElement/animationend_event +original_slug: Web/Events/animationend ---

    animationend 事件会在一个 CSS 动画完成时触发（不包括完成前就已终止的情况，例如元素变得不可见或者动画从元素中移除）。

    diff --git a/files/zh-cn/web/api/htmlelement/animationstart_event/index.html b/files/zh-cn/web/api/htmlelement/animationstart_event/index.html index 53929bfb0d..3f2092239a 100644 --- a/files/zh-cn/web/api/htmlelement/animationstart_event/index.html +++ b/files/zh-cn/web/api/htmlelement/animationstart_event/index.html @@ -1,6 +1,6 @@ --- title: animationstart -slug: Web/Events/animationstart +slug: Web/API/HTMLElement/animationstart_event tags: - Animation - AnimationEvent @@ -10,6 +10,7 @@ tags: - Reference - animationstart translation_of: Web/API/HTMLElement/animationstart_event +original_slug: Web/Events/animationstart ---

    animationstart 事件会在 CSS 动画开始时触发。 如果有 animation-delay 延时，事件会在延迟时效过后立即触发。为负数的延时时长会致使事件被触发时事件的 elapsedTime 属性值等于该时长的绝对值（并且，相应地，动画将直接播放该时长绝对值之后的动画）。

    diff --git a/files/zh-cn/web/api/htmlelement/change_event/index.html b/files/zh-cn/web/api/htmlelement/change_event/index.html index 6a997fc430..d1e5766eeb 100644 --- a/files/zh-cn/web/api/htmlelement/change_event/index.html +++ b/files/zh-cn/web/api/htmlelement/change_event/index.html @@ -1,6 +1,6 @@ --- title: change -slug: Web/Events/change +slug: Web/API/HTMLElement/change_event tags: - Change - HTML @@ -10,6 +10,7 @@ tags: - 事件 - 参考 translation_of: Web/API/HTMLElement/change_event +original_slug: Web/Events/change ---

    {{APIRef}}

    diff --git a/files/zh-cn/web/api/htmlelement/innertext/index.html b/files/zh-cn/web/api/htmlelement/innertext/index.html index 3062dda65f..723d09779e 100644 --- a/files/zh-cn/web/api/htmlelement/innertext/index.html +++ b/files/zh-cn/web/api/htmlelement/innertext/index.html @@ -1,6 +1,6 @@ --- title: HTMLElement.innerText -slug: Web/API/Node/innerText +slug: Web/API/HTMLElement/innerText tags: - API - DOM @@ -10,6 +10,7 @@ tags: - 参考 - 属性 translation_of: Web/API/HTMLElement/innerText +original_slug: Web/API/Node/innerText ---
    {{APIRef("DOM")}}
    diff --git a/files/zh-cn/web/api/htmlelement/input_event/index.html b/files/zh-cn/web/api/htmlelement/input_event/index.html index 7ee1b98ad5..12164b4ed4 100644 --- a/files/zh-cn/web/api/htmlelement/input_event/index.html +++ b/files/zh-cn/web/api/htmlelement/input_event/index.html @@ -1,6 +1,6 @@ --- title: input -slug: Web/Events/input +slug: Web/API/HTMLElement/input_event tags: - HTML DOM - HTMLElement @@ -10,6 +10,7 @@ tags: - 表单 - 输入 translation_of: Web/API/HTMLElement/input_event +original_slug: Web/Events/input ---

    {{APIRef}}

    diff --git a/files/zh-cn/web/api/htmlelement/transitionend_event/index.html b/files/zh-cn/web/api/htmlelement/transitionend_event/index.html index f79db8503a..a89b39de86 100644 --- a/files/zh-cn/web/api/htmlelement/transitionend_event/index.html +++ b/files/zh-cn/web/api/htmlelement/transitionend_event/index.html @@ -1,7 +1,8 @@ --- title: transitionend -slug: Web/Events/transitionend +slug: Web/API/HTMLElement/transitionend_event translation_of: Web/API/HTMLElement/transitionend_event +original_slug: Web/Events/transitionend ---
    {{APIRef}}
    diff --git a/files/zh-cn/web/api/htmlhyperlinkelementutils/hash/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/hash/index.html index 5d8cc21f43..afb17d505e 100644 --- a/files/zh-cn/web/api/htmlhyperlinkelementutils/hash/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/hash/index.html @@ -1,9 +1,10 @@ --- title: HTMLHyperlinkElementUtils.hash -slug: Web/API/URLUtils/hash +slug: Web/API/HTMLHyperlinkElementUtils/hash tags: - HTMLHyperlinkElementUtils.hash translation_of: Web/API/HTMLHyperlinkElementUtils/hash +original_slug: Web/API/URLUtils/hash ---

    {{ APIRef("URLUtils") }}

    diff --git a/files/zh-cn/web/api/htmlhyperlinkelementutils/href/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/href/index.html index cff669766d..dd9cbd64f3 100644 --- a/files/zh-cn/web/api/htmlhyperlinkelementutils/href/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/href/index.html @@ -1,9 +1,10 @@ --- title: HTMLHyperlinkElementUtils.href -slug: Web/API/URLUtils/href +slug: Web/API/HTMLHyperlinkElementUtils/href tags: - HTMLHyperlinkElementUtils.href translation_of: Web/API/HTMLHyperlinkElementUtils/href +original_slug: Web/API/URLUtils/href ---

    {{ApiRef("URL API")}}

    diff --git a/files/zh-cn/web/api/htmlhyperlinkelementutils/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/index.html index e8d6c719d9..d6d93674e3 100644 --- a/files/zh-cn/web/api/htmlhyperlinkelementutils/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/index.html @@ -1,7 +1,8 @@ --- title: URLUtils -slug: Web/API/URLUtils +slug: Web/API/HTMLHyperlinkElementUtils translation_of: Web/API/HTMLHyperlinkElementUtils +original_slug: Web/API/URLUtils ---

    {{ApiRef("URL API")}}{{SeeCompatTable}}

    diff --git a/files/zh-cn/web/api/htmlhyperlinkelementutils/origin/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/origin/index.html index d0f8d926ec..6b1eb90cda 100644 --- a/files/zh-cn/web/api/htmlhyperlinkelementutils/origin/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/origin/index.html @@ -1,9 +1,10 @@ --- title: HTMLHyperlinkElementUtils.origin -slug: Web/API/URLUtils/origin +slug: Web/API/HTMLHyperlinkElementUtils/origin tags: - HTMLHyperlinkElementUtils.origin translation_of: Web/API/HTMLHyperlinkElementUtils/origin +original_slug: Web/API/URLUtils/origin ---

    {{APIRef("URL API")}}

    diff --git a/files/zh-cn/web/api/htmlhyperlinkelementutils/password/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/password/index.html index 99e9944875..0358323ce9 100644 --- a/files/zh-cn/web/api/htmlhyperlinkelementutils/password/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/password/index.html @@ -1,9 +1,10 @@ --- title: HTMLHyperlinkElementUtils.password -slug: Web/API/URLUtils/password +slug: Web/API/HTMLHyperlinkElementUtils/password tags: - HTMLHyperlinkElementUtils.password translation_of: Web/API/HTMLHyperlinkElementUtils/password +original_slug: Web/API/URLUtils/password ---

    {{ApiRef("URL API")}}

    diff --git a/files/zh-cn/web/api/htmlhyperlinkelementutils/pathname/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/pathname/index.html index 203da5393a..95ceda3636 100644 --- a/files/zh-cn/web/api/htmlhyperlinkelementutils/pathname/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/pathname/index.html @@ -1,9 +1,10 @@ --- title: HTMLHyperlinkElementUtils.pathname -slug: Web/API/URLUtils/pathname +slug: Web/API/HTMLHyperlinkElementUtils/pathname tags: - HTMLHyperlinkElementUtils.pathname translation_of: Web/API/HTMLHyperlinkElementUtils/pathname +original_slug: Web/API/URLUtils/pathname ---

    {{ApiRef("URL API")}}

    diff --git a/files/zh-cn/web/api/htmlhyperlinkelementutils/search/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/search/index.html index 4c9c8ae554..1fc142cc1f 100644 --- a/files/zh-cn/web/api/htmlhyperlinkelementutils/search/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/search/index.html @@ -1,9 +1,10 @@ --- title: HTMLHyperlinkElementUtils.search -slug: Web/API/URLUtils/search +slug: Web/API/HTMLHyperlinkElementUtils/search tags: - HTMLHyperlinkElementUtils.search translation_of: Web/API/HTMLHyperlinkElementUtils/search +original_slug: Web/API/URLUtils/search ---

    {{ApiRef("URL API")}}

    diff --git a/files/zh-cn/web/api/htmlhyperlinkelementutils/tostring/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/tostring/index.html index 172ffda98b..1bffe5100b 100644 --- a/files/zh-cn/web/api/htmlhyperlinkelementutils/tostring/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/tostring/index.html @@ -1,10 +1,11 @@ --- title: HTMLHyperlinkElementUtils.toString() -slug: Web/API/URLUtils/toString +slug: Web/API/HTMLHyperlinkElementUtils/toString tags: - HTMLHyperlinkElementUtils.toString() - URL API translation_of: Web/API/HTMLHyperlinkElementUtils/toString +original_slug: Web/API/URLUtils/toString ---

    {{ApiRef("URL API")}}

    diff --git a/files/zh-cn/web/api/htmlhyperlinkelementutils/username/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/username/index.html index 2e7a101f9f..f7a9df9f66 100644 --- a/files/zh-cn/web/api/htmlhyperlinkelementutils/username/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/username/index.html @@ -1,9 +1,10 @@ --- title: HTMLHyperlinkElementUtils.username -slug: Web/API/URLUtils/username +slug: Web/API/HTMLHyperlinkElementUtils/username tags: - HTMLHyperlinkElementUtils.username translation_of: Web/API/HTMLHyperlinkElementUtils/username +original_slug: Web/API/URLUtils/username ---

    {{ApiRef("URL API")}}

    diff --git a/files/zh-cn/web/api/htmlorforeignelement/blur/index.html b/files/zh-cn/web/api/htmlorforeignelement/blur/index.html index 96452abcc0..a8a3f46e58 100644 --- a/files/zh-cn/web/api/htmlorforeignelement/blur/index.html +++ b/files/zh-cn/web/api/htmlorforeignelement/blur/index.html @@ -1,6 +1,6 @@ --- title: HTMLElement.blur() -slug: Web/API/HTMLElement/blur +slug: Web/API/HTMLOrForeignElement/blur tags: - API - HTML DOM @@ -8,6 +8,7 @@ tags: - Method - Reference translation_of: Web/API/HTMLOrForeignElement/blur +original_slug: Web/API/HTMLElement/blur ---

    {{ APIRef() }}

    概述

    diff --git a/files/zh-cn/web/api/htmlorforeignelement/dataset/index.html b/files/zh-cn/web/api/htmlorforeignelement/dataset/index.html index 63ab5f48e8..bb7e0977e7 100644 --- a/files/zh-cn/web/api/htmlorforeignelement/dataset/index.html +++ b/files/zh-cn/web/api/htmlorforeignelement/dataset/index.html @@ -1,9 +1,10 @@ --- title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset +slug: Web/API/HTMLOrForeignElement/dataset tags: - HTMLElement.dataset translation_of: Web/API/HTMLOrForeignElement/dataset +original_slug: Web/API/HTMLElement/dataset ---

    {{ APIRef }}

    diff --git a/files/zh-cn/web/api/htmlorforeignelement/focus/index.html b/files/zh-cn/web/api/htmlorforeignelement/focus/index.html index eb47aff613..cc8e3f72d9 100644 --- a/files/zh-cn/web/api/htmlorforeignelement/focus/index.html +++ b/files/zh-cn/web/api/htmlorforeignelement/focus/index.html @@ -1,12 +1,13 @@ --- title: HTMLElement.focus() -slug: Web/API/HTMLElement/focus +slug: Web/API/HTMLOrForeignElement/focus tags: - API - 参考 - 方法 - 焦点 translation_of: Web/API/HTMLOrForeignElement/focus +original_slug: Web/API/HTMLElement/focus ---
    {{ APIRef("HTML DOM") }}
    diff --git a/files/zh-cn/web/api/htmlorforeignelement/nonce/index.html b/files/zh-cn/web/api/htmlorforeignelement/nonce/index.html index b2c6c829b1..07e113a5bb 100644 --- a/files/zh-cn/web/api/htmlorforeignelement/nonce/index.html +++ b/files/zh-cn/web/api/htmlorforeignelement/nonce/index.html @@ -1,6 +1,6 @@ --- title: HTMLElement.nonce -slug: Web/API/HTMLElement/nonce +slug: Web/API/HTMLOrForeignElement/nonce tags: - API - nonce @@ -8,6 +8,7 @@ tags: - 实验性 - 属性 translation_of: Web/API/HTMLOrForeignElement/nonce +original_slug: Web/API/HTMLElement/nonce ---

    {{SeeCompatTable}}{{APIRef("HTML DOM")}}

    diff --git a/files/zh-cn/web/api/htmlorforeignelement/tabindex/index.html b/files/zh-cn/web/api/htmlorforeignelement/tabindex/index.html index 516c659c2a..1e842c0ff4 100644 --- a/files/zh-cn/web/api/htmlorforeignelement/tabindex/index.html +++ b/files/zh-cn/web/api/htmlorforeignelement/tabindex/index.html @@ -1,7 +1,8 @@ --- title: HTMLElement.tabIndex -slug: Web/API/HTMLElement/tabIndex +slug: Web/API/HTMLOrForeignElement/tabIndex translation_of: Web/API/HTMLOrForeignElement/tabIndex +original_slug: Web/API/HTMLElement/tabIndex ---
    {{ APIRef("HTML DOM") }}
    diff --git a/files/zh-cn/web/api/index/index.html b/files/zh-cn/web/api/index/index.html index 9993a0a959..e910b907d2 100644 --- a/files/zh-cn/web/api/index/index.html +++ b/files/zh-cn/web/api/index/index.html @@ -1,6 +1,7 @@ --- title: 指数 -slug: Web/API/指数 +slug: Web/API/Index translation_of: Web/API/Index +original_slug: Web/API/指数 ---

    {{Index("/zh-CN/docs/Web/API")}}

    diff --git a/files/zh-cn/web/api/intersection_observer_api/timing_element_visibility/index.html b/files/zh-cn/web/api/intersection_observer_api/timing_element_visibility/index.html index 24446a0141..37c36f7c23 100644 --- a/files/zh-cn/web/api/intersection_observer_api/timing_element_visibility/index.html +++ b/files/zh-cn/web/api/intersection_observer_api/timing_element_visibility/index.html @@ -1,7 +1,8 @@ --- title: Timing element visibility with the Intersection Observer API -slug: Web/API/Intersection_Observer_API/点观察者API的时序元素可见性 +slug: Web/API/Intersection_Observer_API/Timing_element_visibility translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility +original_slug: Web/API/Intersection_Observer_API/点观察者API的时序元素可见性 ---
    {{APIRef("Intersection Observer API")}}
    diff --git a/files/zh-cn/web/api/mediastream/addtrack/index.html b/files/zh-cn/web/api/mediastream/addtrack/index.html index ffb8052af5..e99a0a017e 100644 --- a/files/zh-cn/web/api/mediastream/addtrack/index.html +++ b/files/zh-cn/web/api/mediastream/addtrack/index.html @@ -1,7 +1,8 @@ --- title: MediaStream.addTrack() -slug: Web/API/MediaStream.addTrack +slug: Web/API/MediaStream/addTrack translation_of: Web/API/MediaStream/addTrack +original_slug: Web/API/MediaStream.addTrack ---

    {{APIRef("Media Capture and Streams")}}

    diff --git a/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.html b/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.html index 40bbb3848b..36f12c0ed4 100644 --- a/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.html +++ b/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.html @@ -1,12 +1,13 @@ --- title: 使用 Web Notifications -slug: Web/API/notification/Using_Web_Notifications +slug: Web/API/Notifications_API/Using_the_Notifications_API tags: - Firefox OS - Notifications - Using the Notifications API - 通知 translation_of: Web/API/Notifications_API/Using_the_Notifications_API +original_slug: Web/API/notification/Using_Web_Notifications ---

    {{APIRef("Web Notifications")}}

    diff --git a/files/zh-cn/web/api/offlineaudiocontext/complete_event/index.html b/files/zh-cn/web/api/offlineaudiocontext/complete_event/index.html index 74bdb5f3ff..139b6d9030 100644 --- a/files/zh-cn/web/api/offlineaudiocontext/complete_event/index.html +++ b/files/zh-cn/web/api/offlineaudiocontext/complete_event/index.html @@ -1,7 +1,8 @@ --- title: 'OfflineAudioContext: complete event' -slug: Web/API/OfflineAudioContext/complete +slug: Web/API/OfflineAudioContext/complete_event translation_of: Web/API/OfflineAudioContext/complete_event +original_slug: Web/API/OfflineAudioContext/complete ---

    {{DefaultAPISidebar("Web Audio API")}}

    diff --git a/files/zh-cn/web/api/payment_request_api/concepts/index.html b/files/zh-cn/web/api/payment_request_api/concepts/index.html index a6772dc5be..30e58235f5 100644 --- a/files/zh-cn/web/api/payment_request_api/concepts/index.html +++ b/files/zh-cn/web/api/payment_request_api/concepts/index.html @@ -1,6 +1,6 @@ --- title: 交易过程的基本概念 -slug: Web/API/支付_请求_接口/Concepts +slug: Web/API/Payment_Request_API/Concepts tags: - API - Apple Pay @@ -15,6 +15,7 @@ tags: - 收款方 - 贸易 translation_of: Web/API/Payment_Request_API/Concepts +original_slug: Web/API/支付_请求_接口/Concepts ---

    {{securecontext_header}}{{DefaultAPISidebar("Payment Request API")}}{{draft}}

    diff --git a/files/zh-cn/web/api/payment_request_api/index.html b/files/zh-cn/web/api/payment_request_api/index.html index 0df4261062..1d3db1feaa 100644 --- a/files/zh-cn/web/api/payment_request_api/index.html +++ b/files/zh-cn/web/api/payment_request_api/index.html @@ -1,6 +1,6 @@ --- title: 支付请求接口 -slug: Web/API/支付_请求_接口 +slug: Web/API/Payment_Request_API tags: - 中间状态 - 信用卡 @@ -13,6 +13,7 @@ tags: - 概述 - 贸易 translation_of: Web/API/Payment_Request_API +original_slug: Web/API/支付_请求_接口 ---
    {{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}
    diff --git a/files/zh-cn/web/api/performance/memory/index.html b/files/zh-cn/web/api/performance/memory/index.html index e9f5047d4e..074295f951 100644 --- a/files/zh-cn/web/api/performance/memory/index.html +++ b/files/zh-cn/web/api/performance/memory/index.html @@ -1,7 +1,8 @@ --- title: Performance.memory -slug: Web/API/Performance/内存 +slug: Web/API/Performance/memory translation_of: Web/API/Performance/memory +original_slug: Web/API/Performance/内存 ---

    {{APIRef}}

    diff --git a/files/zh-cn/web/api/pointer_lock_api/index.html b/files/zh-cn/web/api/pointer_lock_api/index.html index c22525ddb7..fac9eb5122 100644 --- a/files/zh-cn/web/api/pointer_lock_api/index.html +++ b/files/zh-cn/web/api/pointer_lock_api/index.html @@ -1,7 +1,8 @@ --- title: Pointer Lock API -slug: API/Pointer_Lock_API +slug: Web/API/Pointer_Lock_API translation_of: Web/API/Pointer_Lock_API +original_slug: API/Pointer_Lock_API ---

    {{ SeeCompatTable() }}

    diff --git a/files/zh-cn/web/api/response/clone/index.html b/files/zh-cn/web/api/response/clone/index.html index 0efccea0dc..f43e881bca 100644 --- a/files/zh-cn/web/api/response/clone/index.html +++ b/files/zh-cn/web/api/response/clone/index.html @@ -1,6 +1,6 @@ --- title: Response.clone() -slug: Web/API/Response/克隆 +slug: Web/API/Response/clone tags: - API - Experimental @@ -10,6 +10,7 @@ tags: - Response - clone translation_of: Web/API/Response/clone +original_slug: Web/API/Response/克隆 ---
    {{APIRef("Fetch")}}
    diff --git a/files/zh-cn/web/api/rtcpeerconnection/icecandidate_event/index.html b/files/zh-cn/web/api/rtcpeerconnection/icecandidate_event/index.html index 38fc5c1920..7e830adf3e 100644 --- a/files/zh-cn/web/api/rtcpeerconnection/icecandidate_event/index.html +++ b/files/zh-cn/web/api/rtcpeerconnection/icecandidate_event/index.html @@ -1,7 +1,8 @@ --- title: 'RTCPeerConnection: icecandidate event' -slug: Web/Events/icecandidate +slug: Web/API/RTCPeerConnection/icecandidate_event translation_of: Web/API/RTCPeerConnection/icecandidate_event +original_slug: Web/Events/icecandidate ---

    {{SeeCompatTable}}

    diff --git a/files/zh-cn/web/api/screen_capture_api/using_screen_capture/index.html b/files/zh-cn/web/api/screen_capture_api/using_screen_capture/index.html index ff32263241..e98533ac97 100644 --- a/files/zh-cn/web/api/screen_capture_api/using_screen_capture/index.html +++ b/files/zh-cn/web/api/screen_capture_api/using_screen_capture/index.html @@ -1,11 +1,12 @@ --- title: 使用屏幕捕获API -slug: Web/API/Screen_Capture_API/使用屏幕捕获API +slug: Web/API/Screen_Capture_API/Using_Screen_Capture tags: - API - 屏幕捕获 - 捕获 translation_of: Web/API/Screen_Capture_API/Using_Screen_Capture +original_slug: Web/API/Screen_Capture_API/使用屏幕捕获API ---

    {{DefaultAPISidebar("使用屏幕捕获API")}}

    diff --git a/files/zh-cn/web/api/selection/deletefromdocument/index.html b/files/zh-cn/web/api/selection/deletefromdocument/index.html index 5532bcf0fc..602c872134 100644 --- a/files/zh-cn/web/api/selection/deletefromdocument/index.html +++ b/files/zh-cn/web/api/selection/deletefromdocument/index.html @@ -1,7 +1,8 @@ --- title: Selection.deleteFromDocument() -slug: Web/API/Selection/从Document中删除 +slug: Web/API/Selection/deleteFromDocument translation_of: Web/API/Selection/deleteFromDocument +original_slug: Web/API/Selection/从Document中删除 ---
    diff --git a/files/zh-cn/web/api/server-sent_events/index.html b/files/zh-cn/web/api/server-sent_events/index.html index 4a9d6e0630..a6e44fee83 100644 --- a/files/zh-cn/web/api/server-sent_events/index.html +++ b/files/zh-cn/web/api/server-sent_events/index.html @@ -1,12 +1,13 @@ --- title: Server-sent events -slug: Server-sent_events +slug: Web/API/Server-sent_events tags: - API - NeedsTranslation - Server-sent events - TopicStub translation_of: Web/API/Server-sent_events +original_slug: Server-sent_events ---
    {{DefaultAPISidebar("Server Sent Events")}}
    diff --git a/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.html b/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.html index 505ec19a76..5665f55722 100644 --- a/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.html +++ b/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.html @@ -1,6 +1,6 @@ --- title: 使用服务器发送事件 -slug: Server-sent_events/Using_server-sent_events +slug: Web/API/Server-sent_events/Using_server-sent_events tags: - Advanced - DOM @@ -11,6 +11,7 @@ tags: - 服务器发送事件 - 通信 translation_of: Web/API/Server-sent_events/Using_server-sent_events +original_slug: Server-sent_events/Using_server-sent_events ---

    {{DefaultAPISidebar("Server Sent Events")}}

    diff --git a/files/zh-cn/web/api/speechrecognition/index.html b/files/zh-cn/web/api/speechrecognition/index.html index 83e11e69e4..2f8bca2c84 100644 --- a/files/zh-cn/web/api/speechrecognition/index.html +++ b/files/zh-cn/web/api/speechrecognition/index.html @@ -1,7 +1,8 @@ --- title: 语音识别 -slug: Web/API/语音识别 +slug: Web/API/SpeechRecognition translation_of: Web/API/SpeechRecognition +original_slug: Web/API/语音识别 ---

    {{APIRef("Web Speech API")}}{{SeeCompatTable}}

    diff --git a/files/zh-cn/web/api/speechrecognition/result_event/index.html b/files/zh-cn/web/api/speechrecognition/result_event/index.html index d6415441f3..ca9fcea3f3 100644 --- a/files/zh-cn/web/api/speechrecognition/result_event/index.html +++ b/files/zh-cn/web/api/speechrecognition/result_event/index.html @@ -1,7 +1,8 @@ --- title: 'SpeechRecognition: result event' -slug: Web/API/语音识别/result_event +slug: Web/API/SpeechRecognition/result_event translation_of: Web/API/SpeechRecognition/result_event +original_slug: Web/API/语音识别/result_event ---
    {{APIRef("Web Speech API")}} {{SeeCompatTable}}
    diff --git a/files/zh-cn/web/api/streams_api/concepts/index.html b/files/zh-cn/web/api/streams_api/concepts/index.html index 9c2d9f77ae..a634fb4f07 100644 --- a/files/zh-cn/web/api/streams_api/concepts/index.html +++ b/files/zh-cn/web/api/streams_api/concepts/index.html @@ -1,10 +1,11 @@ --- title: Streams API 概念 -slug: Web/API/Streams_API/概念 +slug: Web/API/Streams_API/Concepts tags: - 概念 - 流 translation_of: Web/API/Streams_API/Concepts +original_slug: Web/API/Streams_API/概念 ---
    {{apiref("Streams")}}
    diff --git a/files/zh-cn/web/api/streams_api/using_readable_streams/index.html b/files/zh-cn/web/api/streams_api/using_readable_streams/index.html index 5313b80dc2..8d2df46ffb 100644 --- a/files/zh-cn/web/api/streams_api/using_readable_streams/index.html +++ b/files/zh-cn/web/api/streams_api/using_readable_streams/index.html @@ -1,7 +1,8 @@ --- title: 使用可读文件流 -slug: Web/API/Streams_API/使用可读文件流 +slug: Web/API/Streams_API/Using_readable_streams translation_of: Web/API/Streams_API/Using_readable_streams +original_slug: Web/API/Streams_API/使用可读文件流 ---
    {{apiref("Streams")}}
    diff --git a/files/zh-cn/web/api/uievent/view/index.html b/files/zh-cn/web/api/uievent/view/index.html index 66b72f2637..215789e0e9 100644 --- a/files/zh-cn/web/api/uievent/view/index.html +++ b/files/zh-cn/web/api/uievent/view/index.html @@ -1,6 +1,6 @@ --- title: 用户界面项目视图 -slug: Web/API/UIEvent/视图 +slug: Web/API/UIEvent/view tags: - API - DOM @@ -9,6 +9,7 @@ tags: - 只读 - 属性 translation_of: Web/API/UIEvent/view +original_slug: Web/API/UIEvent/视图 ---

    {{APIRef("DOM Events")}}

    diff --git a/files/zh-cn/web/api/url/password/index.html b/files/zh-cn/web/api/url/password/index.html index 1592676a9d..5490343afd 100644 --- a/files/zh-cn/web/api/url/password/index.html +++ b/files/zh-cn/web/api/url/password/index.html @@ -1,7 +1,8 @@ --- title: URL.密码 -slug: Web/API/URL/密码 +slug: Web/API/URL/password translation_of: Web/API/URL/password +original_slug: Web/API/URL/密码 ---
    {{ApiRef("URL API")}}
    diff --git a/files/zh-cn/web/api/web_audio_api/best_practices/index.html b/files/zh-cn/web/api/web_audio_api/best_practices/index.html index f0a241a557..5cc79ea155 100644 --- a/files/zh-cn/web/api/web_audio_api/best_practices/index.html +++ b/files/zh-cn/web/api/web_audio_api/best_practices/index.html @@ -1,12 +1,13 @@ --- title: Web Audio API 最佳实践 -slug: Web/API/Web_Audio_API/最佳实践 +slug: Web/API/Web_Audio_API/Best_practices tags: - Web Audio API - 指导 - 最佳实践 - 音频 translation_of: Web/API/Web_Audio_API/Best_practices +original_slug: Web/API/Web_Audio_API/最佳实践 ---
    {{apiref("Web Audio API")}}
    diff --git a/files/zh-cn/web/api/web_workers_api/structured_clone_algorithm/index.html b/files/zh-cn/web/api/web_workers_api/structured_clone_algorithm/index.html index 60444f8dc4..5f59c5f8a0 100644 --- a/files/zh-cn/web/api/web_workers_api/structured_clone_algorithm/index.html +++ b/files/zh-cn/web/api/web_workers_api/structured_clone_algorithm/index.html @@ -1,11 +1,12 @@ --- title: 结构化克隆算法 -slug: Web/Guide/API/DOM/The_structured_clone_algorithm +slug: Web/API/Web_Workers_API/Structured_clone_algorithm tags: - DOM - HTML5 - 结构化克隆算法 translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm +original_slug: Web/Guide/API/DOM/The_structured_clone_algorithm ---

    结构化克隆算法是由HTML5规范定义的用于复制复杂JavaScript对象的算法。通过来自 Workers的 postMessage() 或使用 IndexedDB 存储对象时在内部使用。它通过递归输入对象来构建克隆，同时保持先前访问过的引用的映射，以避免无限遍历循环。

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/polygonoffset/index.html b/files/zh-cn/web/api/webglrenderingcontext/polygonoffset/index.html index a62d4aeafa..bec5cebef6 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/polygonoffset/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/polygonoffset/index.html @@ -1,7 +1,8 @@ --- title: WebGLRenderingContext.polygonOffset() -slug: Web/API/WebGLRenderingContext/多边形偏移(polygonOffset) +slug: Web/API/WebGLRenderingContext/polygonOffset translation_of: Web/API/WebGLRenderingContext/polygonOffset +original_slug: Web/API/WebGLRenderingContext/多边形偏移(polygonOffset) ---
    {{APIRef("WebGL")}}
    diff --git a/files/zh-cn/web/api/webrtc_api/session_lifetime/index.html b/files/zh-cn/web/api/webrtc_api/session_lifetime/index.html index 86ddf25b47..fca4ff4be7 100644 --- a/files/zh-cn/web/api/webrtc_api/session_lifetime/index.html +++ b/files/zh-cn/web/api/webrtc_api/session_lifetime/index.html @@ -1,7 +1,8 @@ --- title: WebRTC 介绍 -slug: WebRTC/介绍 +slug: Web/API/WebRTC_API/Session_lifetime translation_of: Web/API/WebRTC_API/Session_lifetime +original_slug: WebRTC/介绍 ---

    此页面正在建设中，部分内容会移至其他页面，因为WebRTC指导资料已经建成。

    diff --git a/files/zh-cn/web/api/websocket/binarytype/index.html b/files/zh-cn/web/api/websocket/binarytype/index.html index aad8e48fc2..b2ff5df09d 100644 --- a/files/zh-cn/web/api/websocket/binarytype/index.html +++ b/files/zh-cn/web/api/websocket/binarytype/index.html @@ -1,6 +1,6 @@ --- title: WebSocket.binaryType -slug: Web/API/WebSocket/二进制类型 +slug: Web/API/WebSocket/binaryType tags: - 参考 - 属性 @@ -8,6 +8,7 @@ tags: - 网页套接字 - 网页接口 translation_of: Web/API/WebSocket/binaryType +original_slug: Web/API/WebSocket/二进制类型 ---

    {{APIRef("Web Sockets API")}}

    diff --git a/files/zh-cn/web/api/window/afterprint_event/index.html b/files/zh-cn/web/api/window/afterprint_event/index.html index 3ee72441cd..cdbd2aec80 100644 --- a/files/zh-cn/web/api/window/afterprint_event/index.html +++ b/files/zh-cn/web/api/window/afterprint_event/index.html @@ -1,7 +1,8 @@ --- title: afterprint -slug: Web/Events/afterprint +slug: Web/API/Window/afterprint_event translation_of: Web/API/Window/afterprint_event +original_slug: Web/Events/afterprint ---

    在相关联的文档已开始打印或打印预览已关闭之后, 触发 afterprint事件。

    diff --git a/files/zh-cn/web/api/window/beforeprint_event/index.html b/files/zh-cn/web/api/window/beforeprint_event/index.html index fe9480238a..4846c902c9 100644 --- a/files/zh-cn/web/api/window/beforeprint_event/index.html +++ b/files/zh-cn/web/api/window/beforeprint_event/index.html @@ -1,7 +1,8 @@ --- title: beforeprint -slug: Web/Events/beforeprint +slug: Web/API/Window/beforeprint_event translation_of: Web/API/Window/beforeprint_event +original_slug: Web/Events/beforeprint ---

    当相关联的文档即将打印或预览以进行打印时，将触发beforeprint事件。

    diff --git a/files/zh-cn/web/api/window/beforeunload_event/index.html b/files/zh-cn/web/api/window/beforeunload_event/index.html index 9cef2f2cfc..bd200d41ce 100644 --- a/files/zh-cn/web/api/window/beforeunload_event/index.html +++ b/files/zh-cn/web/api/window/beforeunload_event/index.html @@ -1,6 +1,6 @@ --- title: 'Window: beforeunload event' -slug: Web/Events/beforeunload +slug: Web/API/Window/beforeunload_event tags: - Event - Window @@ -8,6 +8,7 @@ tags: - 事件 - 参考 translation_of: Web/API/Window/beforeunload_event +original_slug: Web/Events/beforeunload ---

    当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。

    diff --git a/files/zh-cn/web/api/window/blur/index.html b/files/zh-cn/web/api/window/blur/index.html index 0aebdbb367..fa3a0742cb 100644 --- a/files/zh-cn/web/api/window/blur/index.html +++ b/files/zh-cn/web/api/window/blur/index.html @@ -1,7 +1,8 @@ --- title: Window.blur() -slug: Web/API/Window/Window.blur() +slug: Web/API/Window/blur translation_of: Web/API/Window/blur +original_slug: Web/API/Window/Window.blur() ---

    {{APIRef}}

    diff --git a/files/zh-cn/web/api/window/domcontentloaded_event/index.html b/files/zh-cn/web/api/window/domcontentloaded_event/index.html index 67c6a44253..8452eeb2e6 100644 --- a/files/zh-cn/web/api/window/domcontentloaded_event/index.html +++ b/files/zh-cn/web/api/window/domcontentloaded_event/index.html @@ -1,12 +1,13 @@ --- title: DOMContentLoaded -slug: Web/Events/DOMContentLoaded +slug: Web/API/Window/DOMContentLoaded_event tags: - DOMContentLoaded - Window.open() - load - window.onload translation_of: Web/API/Window/DOMContentLoaded_event +original_slug: Web/Events/DOMContentLoaded ---

    当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。

    diff --git a/files/zh-cn/web/api/window/load_event/index.html b/files/zh-cn/web/api/window/load_event/index.html index 5cfb7b075f..7f784a47f1 100644 --- a/files/zh-cn/web/api/window/load_event/index.html +++ b/files/zh-cn/web/api/window/load_event/index.html @@ -1,9 +1,10 @@ --- title: load -slug: Web/Events/load +slug: Web/API/Window/load_event tags: - load translation_of: Web/API/Window/load_event +original_slug: Web/Events/load ---

    {{APIRef}}

    diff --git a/files/zh-cn/web/api/window/pageshow_event/index.html b/files/zh-cn/web/api/window/pageshow_event/index.html index d0aec41716..482e1b567e 100644 --- a/files/zh-cn/web/api/window/pageshow_event/index.html +++ b/files/zh-cn/web/api/window/pageshow_event/index.html @@ -1,7 +1,8 @@ --- title: pageshow -slug: Web/Events/pageshow +slug: Web/API/Window/pageshow_event translation_of: Web/API/Window/pageshow_event +original_slug: Web/Events/pageshow ---

    当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发)

    diff --git a/files/zh-cn/web/api/window/unhandledrejection_event/index.html b/files/zh-cn/web/api/window/unhandledrejection_event/index.html index 9c3286aa44..8628a3e11f 100644 --- a/files/zh-cn/web/api/window/unhandledrejection_event/index.html +++ b/files/zh-cn/web/api/window/unhandledrejection_event/index.html @@ -1,6 +1,6 @@ --- title: unhandledrejection -slug: Web/Events/unhandledrejection +slug: Web/API/Window/unhandledrejection_event tags: - API - JavaScript @@ -9,6 +9,7 @@ tags: - 事件 - 参考 translation_of: Web/API/Window/unhandledrejection_event +original_slug: Web/Events/unhandledrejection ---
    {{APIRef("HTML DOM")}}
    diff --git a/files/zh-cn/web/api/window/unload_event/index.html b/files/zh-cn/web/api/window/unload_event/index.html index 2510b1f651..dc03afe51f 100644 --- a/files/zh-cn/web/api/window/unload_event/index.html +++ b/files/zh-cn/web/api/window/unload_event/index.html @@ -1,11 +1,12 @@ --- title: unload -slug: Web/Events/unload +slug: Web/API/Window/unload_event tags: - Window - events - unload translation_of: Web/API/Window/unload_event +original_slug: Web/Events/unload ---

    {{APIRef}}

    diff --git a/files/zh-cn/web/api/windoweventhandlers/onbeforeunload/index.html b/files/zh-cn/web/api/windoweventhandlers/onbeforeunload/index.html index 78bed99eb9..c2ac5649b6 100644 --- a/files/zh-cn/web/api/windoweventhandlers/onbeforeunload/index.html +++ b/files/zh-cn/web/api/windoweventhandlers/onbeforeunload/index.html @@ -1,7 +1,8 @@ --- title: window.onbeforeunload -slug: Web/API/Window/onbeforeunload +slug: Web/API/WindowEventHandlers/onbeforeunload translation_of: Web/API/WindowEventHandlers/onbeforeunload +original_slug: Web/API/Window/onbeforeunload ---
    {{ApiRef}}
    diff --git a/files/zh-cn/web/api/windoweventhandlers/onhashchange/index.html b/files/zh-cn/web/api/windoweventhandlers/onhashchange/index.html index 0c7f3ebefa..e71dcdba5e 100644 --- a/files/zh-cn/web/api/windoweventhandlers/onhashchange/index.html +++ b/files/zh-cn/web/api/windoweventhandlers/onhashchange/index.html @@ -1,12 +1,13 @@ --- title: window.onhashchange -slug: Web/API/Window/onhashchange +slug: Web/API/WindowEventHandlers/onhashchange tags: - HTML-DOM - Property - Reference - WindowEventHandlers translation_of: Web/API/WindowEventHandlers/onhashchange +original_slug: Web/API/Window/onhashchange ---

    {{APIRef("HTML DOM")}}

    diff --git a/files/zh-cn/web/api/windoweventhandlers/onpopstate/index.html b/files/zh-cn/web/api/windoweventhandlers/onpopstate/index.html index 6efc1ec835..54efcf6cf4 100644 --- a/files/zh-cn/web/api/windoweventhandlers/onpopstate/index.html +++ b/files/zh-cn/web/api/windoweventhandlers/onpopstate/index.html @@ -1,7 +1,8 @@ --- title: window.onpopstate -slug: Web/API/Window/onpopstate +slug: Web/API/WindowEventHandlers/onpopstate translation_of: Web/API/WindowEventHandlers/onpopstate +original_slug: Web/API/Window/onpopstate ---

    {{ ApiRef() }}

    diff --git a/files/zh-cn/web/api/windoweventhandlers/onunload/index.html b/files/zh-cn/web/api/windoweventhandlers/onunload/index.html index 5e766c1d67..65b13fa59a 100644 --- a/files/zh-cn/web/api/windoweventhandlers/onunload/index.html +++ b/files/zh-cn/web/api/windoweventhandlers/onunload/index.html @@ -1,7 +1,8 @@ --- title: window.onunload -slug: Web/API/Window/onunload +slug: Web/API/WindowEventHandlers/onunload translation_of: Web/API/WindowEventHandlers/onunload +original_slug: Web/API/Window/onunload ---

    {{ ApiRef("HTML DOM") }}

    diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/atob/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/atob/index.html index 2892e403d4..7d5a66fdb5 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/atob/index.html +++ b/files/zh-cn/web/api/windoworworkerglobalscope/atob/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.atob() -slug: Web/API/WindowBase64/atob +slug: Web/API/WindowOrWorkerGlobalScope/atob tags: - API - Base64 @@ -10,6 +10,7 @@ tags: - 参考 - 方法 translation_of: Web/API/WindowOrWorkerGlobalScope/atob +original_slug: Web/API/WindowBase64/atob ---

    {{APIRef("HTML DOM")}}

    diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/btoa/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/btoa/index.html index 6b742198a5..83873fc559 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/btoa/index.html +++ b/files/zh-cn/web/api/windoworworkerglobalscope/btoa/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.btoa() -slug: Web/API/WindowBase64/btoa +slug: Web/API/WindowOrWorkerGlobalScope/btoa tags: - API - Base64 @@ -11,6 +11,7 @@ tags: - 数据 - 方法 translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +original_slug: Web/API/WindowBase64/btoa ---

    {{APIRef("HTML DOM")}}

    diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/clearinterval/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/clearinterval/index.html index 9a2d6e1790..442e1bb81e 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/clearinterval/index.html +++ b/files/zh-cn/web/api/windoworworkerglobalscope/clearinterval/index.html @@ -1,12 +1,13 @@ --- title: WindowTimers.clearInterval() -slug: Web/API/Window/clearInterval +slug: Web/API/WindowOrWorkerGlobalScope/clearInterval tags: - API - WindowOrWorkerGlobalScope - 参考 - 方法 translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +original_slug: Web/API/Window/clearInterval ---
    {{ApiRef("HTML DOM")}}
    diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/cleartimeout/index.html index 4b20c970d7..4e700ea7d0 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/cleartimeout/index.html +++ b/files/zh-cn/web/api/windoworworkerglobalscope/cleartimeout/index.html @@ -1,11 +1,12 @@ --- title: WindowOrWorkerGlobalScope.clearTimeout() -slug: Web/API/WindowTimers/clearTimeout +slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout tags: - API - WindowOrWorkerGlobalScope - clearTimeout translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +original_slug: Web/API/WindowTimers/clearTimeout ---
    {{APIRef("HTML DOM")}}
    diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/setinterval/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/setinterval/index.html index 385a19b81b..d5a453b133 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/setinterval/index.html +++ b/files/zh-cn/web/api/windoworworkerglobalscope/setinterval/index.html @@ -1,6 +1,6 @@ --- title: window.setInterval -slug: Web/API/Window/setInterval +slug: Web/API/WindowOrWorkerGlobalScope/setInterval tags: - API - DOM @@ -8,6 +8,7 @@ tags: - 方法 - 时间 translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval +original_slug: Web/API/Window/setInterval ---
    {{ ApiRef("HTML DOM") }}
    diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/settimeout/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/settimeout/index.html index f9813851f7..d0c80bb95b 100644 --- a/files/zh-cn/web/api/windoworworkerglobalscope/settimeout/index.html +++ b/files/zh-cn/web/api/windoworworkerglobalscope/settimeout/index.html @@ -1,12 +1,13 @@ --- title: window.setTimeout -slug: Web/API/Window/setTimeout +slug: Web/API/WindowOrWorkerGlobalScope/setTimeout tags: - Timers - WindowOrWorkerGlobalScope - WindowTimers - setTimeout translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +original_slug: Web/API/Window/setTimeout ---

    {{APIRef("HTML DOM")}}

    diff --git a/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.html b/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.html index 529a0b1673..60360d4c9e 100644 --- a/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.html @@ -1,7 +1,8 @@ --- title: loadend -slug: Web/Events/loadend +slug: Web/API/XMLHttpRequest/loadend_event translation_of: Web/API/XMLHttpRequest/loadend_event +original_slug: Web/Events/loadend ---

    loadend事件总是在一个资源的加载进度停止之后被触发 (例如，在已经触发“error”，“abort”或“load”事件之后)。这适用于 {{domxref("XMLHttpRequest")}}调用, 以及{{htmlelement("img")}}或{{htmlelement("video")}}之类元素的内容。

    diff --git a/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.html b/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.html index 60362dd94a..3052ba08a7 100644 --- a/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.html @@ -1,9 +1,10 @@ --- title: loadstart -slug: Web/Events/loadstart +slug: Web/API/XMLHttpRequest/loadstart_event tags: - 事件 translation_of: Web/API/XMLHttpRequest/loadstart_event +original_slug: Web/Events/loadstart ---

    当程序开始加载时，loadstart 事件将被触发。这个事件可以被 {{domxref("XMLHttpRequest")}} 调用, 也适用于 {{htmlelement("img")}} 和 {{htmlelement("video")}} 元素.

    diff --git a/files/zh-cn/web/api/xmlhttprequest/progress_event/index.html b/files/zh-cn/web/api/xmlhttprequest/progress_event/index.html index 6a63ab9d5e..1088c221ed 100644 --- a/files/zh-cn/web/api/xmlhttprequest/progress_event/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/progress_event/index.html @@ -1,6 +1,6 @@ --- title: progress event -slug: Web/Events/进度条 +slug: Web/API/XMLHttpRequest/progress_event tags: - API - Event @@ -9,6 +9,7 @@ tags: - XMLHttpRequest - progress translation_of: Web/API/XMLHttpRequest/progress_event +original_slug: Web/Events/进度条 ---

    {{APIRef}}

    diff --git a/files/zh-cn/web/api/xmlserializer/index.html b/files/zh-cn/web/api/xmlserializer/index.html index 5c0af6bf9f..8202d0c906 100644 --- a/files/zh-cn/web/api/xmlserializer/index.html +++ b/files/zh-cn/web/api/xmlserializer/index.html @@ -1,6 +1,6 @@ --- title: XMLSerializer -slug: XMLSerializer +slug: Web/API/XMLSerializer tags: - DOM Parsing - XML @@ -8,6 +8,7 @@ tags: - construct - conversion translation_of: Web/API/XMLSerializer +original_slug: XMLSerializer ---
    {{APIRef("XMLSerializer")}}
    diff --git a/files/zh-cn/web/css/_colon_blank/index.html b/files/zh-cn/web/css/_colon_blank/index.html index adcaa5c998..ee0cfeceee 100644 --- a/files/zh-cn/web/css/_colon_blank/index.html +++ b/files/zh-cn/web/css/_colon_blank/index.html @@ -1,11 +1,12 @@ --- title: ':blank' -slug: 'Web/CSS/:blank空白伪类' +slug: Web/CSS/:blank tags: - CSS - CSS 选择器 - 伪类 -translation_of: 'Web/CSS/:blank' +translation_of: Web/CSS/:blank +original_slug: Web/CSS/:blank空白伪类 ---

    {{CSSRef}}{{Draft}}{{SeeCompatTable}}

    diff --git a/files/zh-cn/web/css/containing_block/index.html b/files/zh-cn/web/css/containing_block/index.html index bf35aa8c04..1c13915c54 100644 --- a/files/zh-cn/web/css/containing_block/index.html +++ b/files/zh-cn/web/css/containing_block/index.html @@ -1,6 +1,6 @@ --- title: 布局和包含块 -slug: Web/CSS/All_About_The_Containing_Block +slug: Web/CSS/Containing_block tags: - CSS - CSS Position @@ -13,6 +13,7 @@ tags: - containing block - size translation_of: Web/CSS/Containing_block +original_slug: Web/CSS/All_About_The_Containing_Block ---

    {{cssref}}

    diff --git a/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html b/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html index b9f50d5332..dce36347b6 100644 --- a/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html +++ b/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html @@ -1,7 +1,8 @@ --- title: 圆角边框生成器 -slug: Web/CSS/CSS_Background_and_Borders/圆角边框发生器 +slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +original_slug: Web/CSS/CSS_Background_and_Borders/圆角边框发生器 ---

    使用Border-radius generator生成 CSS3 {{cssxref("border-radius")}} 样式

    diff --git a/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html index 3fb264bc40..05235e41f1 100644 --- a/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html +++ b/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html @@ -1,7 +1,8 @@ --- title: Box-shadow generator -slug: Web/CSS/CSS_Box_Model/Box-shadow_generator +slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +original_slug: Web/CSS/CSS_Box_Model/Box-shadow_generator ---

    这个可视化工具可以帮助你生成一个元素的CSS{{cssxref("box-shadow")}}相关代码，添加box shadow效果到你的CSS对象上。

    diff --git a/files/zh-cn/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/zh-cn/web/css/css_backgrounds_and_borders/resizing_background_images/index.html index 2873b2878c..0a37fbf324 100644 --- a/files/zh-cn/web/css/css_backgrounds_and_borders/resizing_background_images/index.html +++ b/files/zh-cn/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -1,7 +1,8 @@ --- title: Scaling background images -slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +slug: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images ---
    {{cssref}}
    diff --git a/files/zh-cn/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/zh-cn/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index fcde4cecb2..e77cea2ec5 100644 --- a/files/zh-cn/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html +++ b/files/zh-cn/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -1,10 +1,11 @@ --- title: Using URL values for the cursor property -slug: Web/CSS/cursor/url +slug: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property tags: - Cursor - URL translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +original_slug: Web/CSS/cursor/url ---

    Gecko 1.8 (Firefox 1.5，SeaMonkey 1.0) 支持CSS的URL值 {{cssxref("cursor")}} 属性在Windows和Linux。Mac支持是在Gecko 2（Firefox 4）中添加的。这允许将任意图像指定为鼠标光标 - 可以使用Gecko支持的任何图像格式。

    diff --git a/files/zh-cn/web/css/css_columns/using_multi-column_layouts/index.html b/files/zh-cn/web/css/css_columns/using_multi-column_layouts/index.html index 593e14fd47..b284829feb 100644 --- a/files/zh-cn/web/css/css_columns/using_multi-column_layouts/index.html +++ b/files/zh-cn/web/css/css_columns/using_multi-column_layouts/index.html @@ -1,7 +1,8 @@ --- title: 使用CSS的多列布局 -slug: Web/Guide/CSS/Using_multi-column_layouts +slug: Web/CSS/CSS_Columns/Using_multi-column_layouts translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +original_slug: Web/Guide/CSS/Using_multi-column_layouts ---

    {{CSSRef("CSS Multi-columns")}}

    diff --git a/files/zh-cn/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/zh-cn/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html index df269a9211..0136810845 100644 --- a/files/zh-cn/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html +++ b/files/zh-cn/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -1,6 +1,6 @@ --- title: Flexbox的向下支持 -slug: Web/CSS/CSS_Flexible_Box_Layout/Flexbox_的_向下_支持 +slug: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox tags: - '@supports' - IE @@ -11,6 +11,7 @@ tags: - 旧版本 - 浏览器 translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Flexbox_的_向下_支持 ---

    {{CSSRef}}

    diff --git a/files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html b/files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html index c90b3416a5..6cddce9103 100644 --- a/files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html +++ b/files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html @@ -1,12 +1,14 @@ --- title: 弹性盒子与其他布局方法的联系 -slug: Web/CSS/CSS_Flexible_Box_Layout/弹性盒子与其他布局方法的联系 +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods tags: - CSS - box alignment - flexbox translation_of: >- Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods +original_slug: Web/CSS/CSS_Flexible_Box_Layout/弹性盒子与其他布局方法的联系 ---
    {{CSSRef}}
    diff --git a/files/zh-cn/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/zh-cn/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html index 1b4c283f36..3ec35a1821 100644 --- a/files/zh-cn/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html +++ b/files/zh-cn/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -1,7 +1,8 @@ --- title: Flexbox典型用例 -slug: Web/CSS/CSS_Flexible_Box_Layout/典型_用例_的_Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +original_slug: Web/CSS/CSS_Flexible_Box_Layout/典型_用例_的_Flexbox ---

    {{CSSRef}}

    diff --git a/files/zh-cn/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html b/files/zh-cn/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html index 2c84dc8384..4592f2a4d1 100644 --- a/files/zh-cn/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html +++ b/files/zh-cn/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html @@ -1,7 +1,8 @@ --- title: In Flow and Out of Flow -slug: Web/CSS/CSS_Flow_Layout/在Flow中和Flow之外 +slug: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +original_slug: Web/CSS/CSS_Flow_Layout/在Flow中和Flow之外 ---
    {{CSSRef}}
    diff --git a/files/zh-cn/web/css/css_fragmentation/index.html b/files/zh-cn/web/css/css_fragmentation/index.html index 5b0d8e7a13..ca10d1a783 100644 --- a/files/zh-cn/web/css/css_fragmentation/index.html +++ b/files/zh-cn/web/css/css_fragmentation/index.html @@ -1,11 +1,12 @@ --- title: CSS分片 -slug: Web/CSS/CSS_分片 +slug: Web/CSS/CSS_Fragmentation tags: - CSS - CSS分片 - 参考 translation_of: Web/CSS/CSS_Fragmentation +original_slug: Web/CSS/CSS_分片 ---
    {{cssref}}
    diff --git a/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html index 936634c06c..216a6fa669 100644 --- a/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html +++ b/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html @@ -1,11 +1,12 @@ --- title: CSS 网格，逻辑值和书写模式 -slug: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes' +slug: Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes tags: - CSS - CSS 指南 - 指南 -translation_of: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes' +translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes +original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes ---

    在前面的文章中，我们已经接触了网格布局的一个重要特性：被纳入规范的对不同书写模式的支持。本文我们将探讨在网格和其他现代布局方式下的这个特性的表现，以及学习一些关于书写模式和逻辑属性与物理属性的知识。

    diff --git a/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html index 1f19e6933b..a20d8b626a 100644 --- a/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html +++ b/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -1,7 +1,8 @@ --- title: 利用CSS网格布局实现常用布局 -slug: Web/CSS/CSS_Grid_Layout/利用CSS网格布局实现常用布局 +slug: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +original_slug: Web/CSS/CSS_Grid_Layout/利用CSS网格布局实现常用布局 ---

    为了完善这组CSS网格布局指南，我将介绍几种不同的布局，它们演示了在使用网格布局进行设计时可以使用的一些不同技术。我们将看到一个使用 grid-template-areas 的示例，一个典型的12列灵活网格系统，以及一个使用自动布局的产品列表。正如您从这组示例中看到的，使用网格布局通常有不止一种方法来实现您想要的结果。选择对您正在解决的问题和需要实现的设计最有帮助的方法。

    diff --git a/files/zh-cn/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/zh-cn/web/css/css_images/implementing_image_sprites_in_css/index.html index 4a3e2bb7c9..0b37c1b652 100644 --- a/files/zh-cn/web/css/css_images/implementing_image_sprites_in_css/index.html +++ b/files/zh-cn/web/css/css_images/implementing_image_sprites_in_css/index.html @@ -1,6 +1,6 @@ --- title: 在 CSS 中实现图像合并 -slug: Web/Guide/CSS/CSS_Image_Sprites +slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS tags: - CSS - CSS Image @@ -8,6 +8,7 @@ tags: - Guide - Web translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +original_slug: Web/Guide/CSS/CSS_Image_Sprites ---
    {{cssRef}}
    diff --git a/files/zh-cn/web/css/css_images/using_css_gradients/index.html b/files/zh-cn/web/css/css_images/using_css_gradients/index.html index 21460cd820..cef51bdcfe 100644 --- a/files/zh-cn/web/css/css_images/using_css_gradients/index.html +++ b/files/zh-cn/web/css/css_images/using_css_gradients/index.html @@ -1,7 +1,8 @@ --- title: 使用 CSS 渐变 -slug: Web/Guide/CSS/Using_CSS_gradients +slug: Web/CSS/CSS_Images/Using_CSS_gradients translation_of: Web/CSS/CSS_Images/Using_CSS_gradients +original_slug: Web/Guide/CSS/Using_CSS_gradients ---
    {{CSSRef}}
    diff --git a/files/zh-cn/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/zh-cn/web/css/css_lists_and_counters/consistent_list_indentation/index.html index 1426940c48..8f5b208489 100644 --- a/files/zh-cn/web/css/css_lists_and_counters/consistent_list_indentation/index.html +++ b/files/zh-cn/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -1,6 +1,6 @@ --- title: 调整列表缩进 -slug: Web/Guide/CSS/Consistent_list_indentation +slug: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation tags: - CSS - Guide @@ -9,6 +9,7 @@ tags: - 列表 - 缩进 translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +original_slug: Web/Guide/CSS/Consistent_list_indentation ---

    对列表最常见的样式修改之一是改变缩进距离，即列表项向右侧移动的距离。令人沮丧的是，缩进在一个浏览器中的表现常常与其他浏览器中的效果不尽相同。例如，如果声明列表的左边距为0，在IE浏览器中生效，但是在基于Gecko引擎的浏览器中却不起作用。本文将帮助你理解这些可能发生的问题，以及如何避免这些问题的产生。

    diff --git a/files/zh-cn/web/css/css_lists_and_counters/using_css_counters/index.html b/files/zh-cn/web/css/css_lists_and_counters/using_css_counters/index.html index 4a8fa17797..3ae54b4940 100644 --- a/files/zh-cn/web/css/css_lists_and_counters/using_css_counters/index.html +++ b/files/zh-cn/web/css/css_lists_and_counters/using_css_counters/index.html @@ -1,6 +1,6 @@ --- title: 使用CSS计数器 -slug: Web/Guide/CSS/Counters +slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters tags: - CSS - CSS List @@ -8,6 +8,7 @@ tags: - counter - 教程 translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +original_slug: Web/Guide/CSS/Counters ---
    {{CSSRef}}
    diff --git a/files/zh-cn/web/css/css_logical_properties/basic_concepts/index.html b/files/zh-cn/web/css/css_logical_properties/basic_concepts/index.html index cfce90ff34..5f040cc43b 100644 --- a/files/zh-cn/web/css/css_logical_properties/basic_concepts/index.html +++ b/files/zh-cn/web/css/css_logical_properties/basic_concepts/index.html @@ -1,7 +1,8 @@ --- title: 逻辑属性的和值的基本概念 -slug: Web/CSS/CSS_Logical_Properties/Basic_conceptsjie +slug: Web/CSS/CSS_Logical_Properties/Basic_concepts translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts +original_slug: Web/CSS/CSS_Logical_Properties/Basic_conceptsjie ---
    {{CSSRef}}
    diff --git a/files/zh-cn/web/css/css_logical_properties/floating_and_positioning/index.html b/files/zh-cn/web/css/css_logical_properties/floating_and_positioning/index.html index b96f3f6c88..d45cae2ae9 100644 --- a/files/zh-cn/web/css/css_logical_properties/floating_and_positioning/index.html +++ b/files/zh-cn/web/css/css_logical_properties/floating_and_positioning/index.html @@ -1,7 +1,8 @@ --- title: 浮动和定位的逻辑属性 -slug: Web/CSS/CSS_Logical_Properties/浮动和定位 +slug: Web/CSS/CSS_Logical_Properties/Floating_and_positioning translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +original_slug: Web/CSS/CSS_Logical_Properties/浮动和定位 ---
    {{CSSRef}}
    diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/adding_z-index/index.html index acd3b034ce..2e68f8e8df 100644 --- a/files/zh-cn/web/css/css_positioning/understanding_z_index/adding_z-index/index.html +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -1,7 +1,8 @@ --- title: Adding z-index -slug: Web/Guide/CSS/Understanding_z_index/Adding_z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +original_slug: Web/Guide/CSS/Understanding_z_index/Adding_z-index ---

    « CSS «理解z-index

    使用 {{ cssxref("z-index") }}

    diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/index.html index 19f49650d1..fde7369c12 100644 --- a/files/zh-cn/web/css/css_positioning/understanding_z_index/index.html +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/index.html @@ -1,10 +1,11 @@ --- title: 理解CSS的 z-index属性 -slug: Web/Guide/CSS/Understanding_z_index +slug: Web/CSS/CSS_Positioning/Understanding_z_index tags: - CSS - Guide translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +original_slug: Web/Guide/CSS/Understanding_z_index ---

    {{cssref}}

    diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html index 9312c1759d..cfc8c11fd2 100644 --- a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -1,7 +1,8 @@ --- title: 层叠与浮动 -slug: Web/Guide/CSS/Understanding_z_index/Stacking_and_float +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +original_slug: Web/Guide/CSS/Understanding_z_index/Stacking_and_float ---

    « CSS « 理解 CSS 中的 z-index

    diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html index 59f298d269..6f274711be 100644 --- a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -1,9 +1,10 @@ --- title: Stacking context example 1 -slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_1 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 tags: - 理解_CSS_z-index translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +original_slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_1 ---

    « CSS « Understanding CSS z-index

    diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html index 3c21bef062..4a70265c3f 100644 --- a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -1,11 +1,12 @@ --- title: Stacking context example 2 -slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 tags: - CSS - 理解css的index属性 - 高级 translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +original_slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2 ---

    « CSS « 理解CSS z-index

    diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html index f7d2972c7c..fc4e13bc23 100644 --- a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -1,11 +1,12 @@ --- title: Stacking context example 3 -slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 tags: - CSS - 层叠上下文 - 理解css的z-index属性 translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +original_slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3 ---

    « CSS « Understanding CSS z-index

    diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html index a5aaebdc95..609ffc446d 100644 --- a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -1,7 +1,8 @@ --- title: Stacking without z-index -slug: Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +original_slug: Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index ---

    « CSS « 理解 CSS z-index

    diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html index 6d96e3e198..aa1da710e2 100644 --- a/files/zh-cn/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -1,6 +1,6 @@ --- title: 层叠上下文 -slug: Web/Guide/CSS/Understanding_z_index/The_stacking_context +slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context tags: - Advanced - CSS @@ -8,6 +8,7 @@ tags: - z-index - 教程 translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +original_slug: Web/Guide/CSS/Understanding_z_index/The_stacking_context ---
    {{cssref}}
    diff --git a/files/zh-cn/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/zh-cn/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html index 65883df437..94d06bd862 100644 --- a/files/zh-cn/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html +++ b/files/zh-cn/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -1,11 +1,12 @@ --- -title: '在选择器中使用 :target 伪类' -slug: 'Web/Guide/CSS/Using_the_:target_selector' +title: 在选择器中使用 :target 伪类 +slug: Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors tags: - CSS - CSS_3 - Selectors -translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +translation_of: Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors +original_slug: Web/Guide/CSS/Using_the_:target_selector ---

    {{CSSRef}}

    diff --git a/files/zh-cn/web/css/cssom_view/coordinate_systems/index.html b/files/zh-cn/web/css/cssom_view/coordinate_systems/index.html index d6ea967a43..aa08829542 100644 --- a/files/zh-cn/web/css/cssom_view/coordinate_systems/index.html +++ b/files/zh-cn/web/css/cssom_view/coordinate_systems/index.html @@ -1,7 +1,8 @@ --- title: 坐标系 -slug: Web/CSS/CSSOM_View/坐标系 +slug: Web/CSS/CSSOM_View/Coordinate_systems translation_of: Web/CSS/CSSOM_View/Coordinate_systems +original_slug: Web/CSS/CSSOM_View/坐标系 ---
    {{cssref}}
    diff --git a/files/zh-cn/web/css/float/index.html b/files/zh-cn/web/css/float/index.html index 30f9928c0b..51e9f68bf1 100644 --- a/files/zh-cn/web/css/float/index.html +++ b/files/zh-cn/web/css/float/index.html @@ -1,6 +1,6 @@ --- title: float -slug: CSS/float +slug: Web/CSS/float tags: - CSS - CSS Positioning @@ -9,6 +9,7 @@ tags: - CSS 属性 - 参考 translation_of: Web/CSS/float +original_slug: CSS/float ---
    {{CSSRef}}
    diff --git a/files/zh-cn/web/css/grid-template-rows/index.html b/files/zh-cn/web/css/grid-template-rows/index.html index 0dcd6b29d5..a898da47be 100644 --- a/files/zh-cn/web/css/grid-template-rows/index.html +++ b/files/zh-cn/web/css/grid-template-rows/index.html @@ -1,9 +1,10 @@ --- title: grid-template-rows -slug: Web/CSS/网格-模板-列 +slug: Web/CSS/grid-template-rows tags: - grid-template-rows translation_of: Web/CSS/grid-template-rows +original_slug: Web/CSS/网格-模板-列 ---

    grid-template-rows 该属性是基于 {{glossary("grid rows", "网格行")}} 的维度，去定义网格线的名称和网格轨道的尺寸大小。

    diff --git a/files/zh-cn/web/css/layout_cookbook/card/index.html b/files/zh-cn/web/css/layout_cookbook/card/index.html index 260ef3ba54..e100610287 100644 --- a/files/zh-cn/web/css/layout_cookbook/card/index.html +++ b/files/zh-cn/web/css/layout_cookbook/card/index.html @@ -1,7 +1,8 @@ --- title: 卡片 -slug: Web/CSS/Layout_cookbook/卡片 +slug: Web/CSS/Layout_cookbook/Card translation_of: Web/CSS/Layout_cookbook/Card +original_slug: Web/CSS/Layout_cookbook/卡片 ---

    {{CSSRef}}

    diff --git a/files/zh-cn/web/css/layout_cookbook/media_objects/index.html b/files/zh-cn/web/css/layout_cookbook/media_objects/index.html index 382e4bacce..d3dc29cd47 100644 --- a/files/zh-cn/web/css/layout_cookbook/media_objects/index.html +++ b/files/zh-cn/web/css/layout_cookbook/media_objects/index.html @@ -1,6 +1,6 @@ --- title: '指南: 媒体对象' -slug: Web/CSS/Layout_cookbook/媒体对象 +slug: Web/CSS/Layout_cookbook/Media_objects tags: - 媒体对象 - 布局 @@ -8,6 +8,7 @@ tags: - 浮动 - 网格 translation_of: Web/CSS/Layout_cookbook/Media_objects +original_slug: Web/CSS/Layout_cookbook/媒体对象 ---
    {{CSSRef}}
    diff --git a/files/zh-cn/web/css/media_queries/index.html b/files/zh-cn/web/css/media_queries/index.html index 9936c531f1..fe59e5d14b 100644 --- a/files/zh-cn/web/css/media_queries/index.html +++ b/files/zh-cn/web/css/media_queries/index.html @@ -1,6 +1,6 @@ --- title: 媒体查询 -slug: Web/CSS/媒体查询 +slug: Web/CSS/Media_Queries tags: - CSS - 参考 @@ -8,6 +8,7 @@ tags: - 媒体查询 - 总览 translation_of: Web/CSS/Media_Queries +original_slug: Web/CSS/媒体查询 ---
    {{CSSRef}}
    diff --git a/files/zh-cn/web/css/media_queries/testing_media_queries/index.html b/files/zh-cn/web/css/media_queries/testing_media_queries/index.html index 0d33436410..a29091c556 100644 --- a/files/zh-cn/web/css/media_queries/testing_media_queries/index.html +++ b/files/zh-cn/web/css/media_queries/testing_media_queries/index.html @@ -1,6 +1,6 @@ --- title: 使用编程方法测试媒体查询 -slug: Web/Guide/CSS/Testing_media_queries +slug: Web/CSS/Media_Queries/Testing_media_queries tags: - CSS - DOM @@ -8,6 +8,7 @@ tags: - Media Queries - Web translation_of: Web/CSS/Media_Queries/Testing_media_queries +original_slug: Web/Guide/CSS/Testing_media_queries ---
    {{cssref}}
    diff --git a/files/zh-cn/web/css/media_queries/using_media_queries/index.html b/files/zh-cn/web/css/media_queries/using_media_queries/index.html index bfb15efa67..0063d28a5a 100644 --- a/files/zh-cn/web/css/media_queries/using_media_queries/index.html +++ b/files/zh-cn/web/css/media_queries/using_media_queries/index.html @@ -1,6 +1,6 @@ --- title: 使用媒体查询 -slug: Web/Guide/CSS/Media_queries +slug: Web/CSS/Media_Queries/Using_media_queries tags: - CSS - CSS媒体查询 @@ -10,6 +10,7 @@ tags: - 媒体查询 - 指南 translation_of: Web/CSS/Media_Queries/Using_media_queries +original_slug: Web/Guide/CSS/Media_queries ---
    {{cssref}}
    diff --git a/files/zh-cn/web/css/offset/index.html b/files/zh-cn/web/css/offset/index.html index e61a0ffd7a..090e97fae9 100644 --- a/files/zh-cn/web/css/offset/index.html +++ b/files/zh-cn/web/css/offset/index.html @@ -1,7 +1,8 @@ --- title: offset -slug: Web/CSS/偏移 +slug: Web/CSS/offset translation_of: Web/CSS/offset +original_slug: Web/CSS/偏移 ---
    {{SeeCompatTable}}{{CSSRef}}{{draft}}
    diff --git a/files/zh-cn/web/css/overflow-wrap/index.html b/files/zh-cn/web/css/overflow-wrap/index.html index 5c2c0c687d..f772393d8b 100644 --- a/files/zh-cn/web/css/overflow-wrap/index.html +++ b/files/zh-cn/web/css/overflow-wrap/index.html @@ -1,6 +1,6 @@ --- title: overflow-wrap -slug: Web/CSS/word-wrap +slug: Web/CSS/overflow-wrap tags: - CSS Text Module Level 3 - CSS3 @@ -8,6 +8,7 @@ tags: - overflow-wrap - word-wrap translation_of: Web/CSS/overflow-wrap +original_slug: Web/CSS/word-wrap ---
    {{CSSRef}}
    diff --git a/files/zh-cn/web/css/text-decoration-thickness/index.html b/files/zh-cn/web/css/text-decoration-thickness/index.html index cdffd6eced..41179d7438 100644 --- a/files/zh-cn/web/css/text-decoration-thickness/index.html +++ b/files/zh-cn/web/css/text-decoration-thickness/index.html @@ -1,9 +1,10 @@ --- title: 文本装饰线厚度(粗细) -slug: Web/CSS/文本装饰线厚度(粗细) +slug: Web/CSS/text-decoration-thickness tags: - 装饰线粗细 装饰线厚度 translation_of: Web/CSS/text-decoration-thickness +original_slug: Web/CSS/文本装饰线厚度(粗细) ---
    {{CSSRef}}
    diff --git a/files/zh-cn/web/css/url()/index.html b/files/zh-cn/web/css/url()/index.html index 3ba85545e4..ed5d7cb5fd 100644 --- a/files/zh-cn/web/css/url()/index.html +++ b/files/zh-cn/web/css/url()/index.html @@ -1,8 +1,9 @@ --- title: -slug: Web/CSS/url +slug: Web/CSS/url() translation_of: Web/CSS/url() translation_of_original: Web/CSS/url +original_slug: Web/CSS/url ---

    {{ CssRef() }}

    diff --git a/files/zh-cn/web/css/visual_formatting_model/index.html b/files/zh-cn/web/css/visual_formatting_model/index.html index 640f3abbc9..bdf7bd11d6 100644 --- a/files/zh-cn/web/css/visual_formatting_model/index.html +++ b/files/zh-cn/web/css/visual_formatting_model/index.html @@ -1,11 +1,12 @@ --- title: 视觉格式化模型 -slug: Web/Guide/CSS/Visual_formatting_model +slug: Web/CSS/Visual_formatting_model tags: - CSS - CSS盒模型 - 参考 translation_of: Web/CSS/Visual_formatting_model +original_slug: Web/Guide/CSS/Visual_formatting_model ---

    {{CSSRef}}

    diff --git a/files/zh-cn/web/demos_of_open_web_technologies/index.html b/files/zh-cn/web/demos_of_open_web_technologies/index.html index 2a8a22bce5..a63be23067 100644 --- a/files/zh-cn/web/demos_of_open_web_technologies/index.html +++ b/files/zh-cn/web/demos_of_open_web_technologies/index.html @@ -1,6 +1,6 @@ --- title: 开源 Web 技术示例 -slug: Web/演示说明 +slug: Web/Demos_of_open_web_technologies tags: - 2D - 3D @@ -11,6 +11,7 @@ tags: - SVG - Video translation_of: Web/Demos_of_open_web_technologies +original_slug: Web/演示说明 ---

    Mozilla 支持各种令人兴奋的开源 Web 技术,我们鼓励大家使用它们。此页面提供了有关这些技术的一些有趣演示链接。

    diff --git a/files/zh-cn/web/guide/html/editable_content/index.html b/files/zh-cn/web/guide/html/editable_content/index.html index 00f44d6fd7..2fd8f49668 100644 --- a/files/zh-cn/web/guide/html/editable_content/index.html +++ b/files/zh-cn/web/guide/html/editable_content/index.html @@ -1,7 +1,8 @@ --- title: Content Editable -slug: Web/Guide/HTML/Content_Editable +slug: Web/Guide/HTML/Editable_content translation_of: Web/Guide/HTML/Editable_content +original_slug: Web/Guide/HTML/Content_Editable ---

    在HTML中，任何元素都可以被编辑。通过使用一些JavaScript事件处理程序，您可以将您的网页转换为完整且快速的富文本编辑器。本文提供了有关此功能的一些信息。

    diff --git a/files/zh-cn/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html b/files/zh-cn/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html index f237e94b61..68aedbd50c 100644 --- a/files/zh-cn/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html +++ b/files/zh-cn/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html @@ -1,10 +1,11 @@ --- title: Mozilla中的富文本编辑器 -slug: Web/Guide/HTML/Content_Editable/Rich-Text_Editing_in_Mozilla +slug: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla tags: - 富文本 - 指南 translation_of: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla +original_slug: Web/Guide/HTML/Content_Editable/Rich-Text_Editing_in_Mozilla ---

    Mozilla 1.3 实现了微软 IE 浏览器的 designMode 特性。Mozilla 1.3 的富文本编辑器支持的 designMode 特性能将 HTML 文档转换为富文本编辑器。从 Firefox 3 开始，Mozilla 也支持 IE 的 contentEditable 属性，该属性允许将任意元素设置为可编辑或不可编辑的（后者可阻止在可编辑环境中，对固定元素的改变）。

    diff --git a/files/zh-cn/web/guide/html/using_html_sections_and_outlines/index.html b/files/zh-cn/web/guide/html/using_html_sections_and_outlines/index.html index 2eeb6fe100..334412d09f 100644 --- a/files/zh-cn/web/guide/html/using_html_sections_and_outlines/index.html +++ b/files/zh-cn/web/guide/html/using_html_sections_and_outlines/index.html @@ -1,6 +1,6 @@ --- title: 使用 HTML 章节与大纲 -slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document +slug: Web/Guide/HTML/Using_HTML_sections_and_outlines tags: - HTML - HTML5 @@ -8,6 +8,7 @@ tags: - 文档结构 - 高阶 translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document ---

    （下方英文原文警告的过时已翻译版本）注意：下面描述的HTML 5 大纲算法在用户代理中还没有实现，因此，使用标题语义的用户暴露在HTML4的文档结构下。HTML5对问题的描述还仅仅是理论上的。

    diff --git a/files/zh-cn/web/guide/introduction_to_web_development/index.html b/files/zh-cn/web/guide/introduction_to_web_development/index.html index 9178cb39f5..13a6b590b2 100644 --- a/files/zh-cn/web/guide/introduction_to_web_development/index.html +++ b/files/zh-cn/web/guide/introduction_to_web_development/index.html @@ -1,7 +1,8 @@ --- title: Web开发介绍 -slug: Web_Development/Introduction_to_Web_development +slug: Web/Guide/Introduction_to_Web_development translation_of: Web/Guide/Introduction_to_Web_development +original_slug: Web_Development/Introduction_to_Web_development ---

    不论你是刚开始Web开发，还是想学习Web开发，这些链接都能帮助你。至少，立刻我们就能在这儿看到很多链接。

    diff --git a/files/zh-cn/web/guide/woff/index.html b/files/zh-cn/web/guide/woff/index.html index a91795c672..780ee248b8 100644 --- a/files/zh-cn/web/guide/woff/index.html +++ b/files/zh-cn/web/guide/woff/index.html @@ -1,10 +1,11 @@ --- title: 网页开放字体格式(WOFF) -slug: WOFF +slug: Web/Guide/WOFF tags: - WOFF - 字体 translation_of: Web/Guide/WOFF +original_slug: WOFF ---

    WOFF（网页开放字体格式） 是由 Mozilla 与 Type Supply, LettError 及其他组织协同开发的一种新的网页字体格式。它使用了一种压缩版本，类似于 TrueType, OpenType, Open Font 所采用的 SFNT 结构，不过还添加了共用数据及用户私有数据结构，其中包括了自定义空间，其允许厂家和经销商提供许可证。

    diff --git a/files/zh-cn/web/html/attributes/autocomplete/index.html b/files/zh-cn/web/html/attributes/autocomplete/index.html index af7452c6f7..e38b48cc4a 100644 --- a/files/zh-cn/web/html/attributes/autocomplete/index.html +++ b/files/zh-cn/web/html/attributes/autocomplete/index.html @@ -1,6 +1,6 @@ --- title: The HTML 自动完成属性 -slug: Web/HTML/Attributes/自动完成属性 +slug: Web/HTML/Attributes/autocomplete tags: - HTML - 参考 @@ -12,6 +12,7 @@ tags: - 自动完成 - 邮件地址 translation_of: Web/HTML/Attributes/autocomplete +original_slug: Web/HTML/Attributes/自动完成属性 ---
    {{HTMLSidebar("Global_attributes")}}
    diff --git a/files/zh-cn/web/html/attributes/crossorigin/index.html b/files/zh-cn/web/html/attributes/crossorigin/index.html index 9beb44e652..3b1c57e78d 100644 --- a/files/zh-cn/web/html/attributes/crossorigin/index.html +++ b/files/zh-cn/web/html/attributes/crossorigin/index.html @@ -1,6 +1,6 @@ --- title: CORS settings attributes -slug: Web/HTML/CORS_settings_attributes +slug: Web/HTML/Attributes/crossorigin tags: - Advanced - CORS @@ -12,6 +12,7 @@ tags: - img &video - script &link translation_of: Web/HTML/Attributes/crossorigin +original_slug: Web/HTML/CORS_settings_attributes ---

    在HTML5中，一些 HTML 元素提供了对 CORS 的支持， 例如 {{ HTMLElement("audio") }}、{{ HTMLElement("img") }}、{{ HTMLElement("link") }}、{{ HTMLElement("script") }} 和 {{ HTMLElement("video") }} 均有一个跨域属性 (crossOrigin property)，它允许你配置元素获取数据的 CORS 请求。 

    diff --git a/files/zh-cn/web/html/element/input/month/index.html b/files/zh-cn/web/html/element/input/month/index.html index 9a2fbb6f2a..91767c43f0 100644 --- a/files/zh-cn/web/html/element/input/month/index.html +++ b/files/zh-cn/web/html/element/input/month/index.html @@ -1,11 +1,12 @@ --- title: -slug: Web/HTML/Element/Input/月份 +slug: Web/HTML/Element/input/month tags: - HTML - Input - 表单 translation_of: Web/HTML/Element/input/month +original_slug: Web/HTML/Element/Input/月份 ---

    {{HTMLRef}}

    diff --git a/files/zh-cn/web/html/element/input/range/index.html b/files/zh-cn/web/html/element/input/range/index.html index 9450c705b2..d491878f8f 100644 --- a/files/zh-cn/web/html/element/input/range/index.html +++ b/files/zh-cn/web/html/element/input/range/index.html @@ -1,6 +1,6 @@ --- title: -slug: Web/HTML/Element/Input/范围 +slug: Web/HTML/Element/input/range tags: - HTML - 元素 @@ -8,6 +8,7 @@ tags: - 网页 - 范围 translation_of: Web/HTML/Element/input/range +original_slug: Web/HTML/Element/Input/范围 ---
    {{HTMLRef}}
    diff --git a/files/zh-cn/web/html/global_attributes/x-ms-acceleratorkey/index.html b/files/zh-cn/web/html/global_attributes/x-ms-acceleratorkey/index.html index b44ded3590..2e01b3ac1f 100644 --- a/files/zh-cn/web/html/global_attributes/x-ms-acceleratorkey/index.html +++ b/files/zh-cn/web/html/global_attributes/x-ms-acceleratorkey/index.html @@ -1,12 +1,13 @@ --- title: x-ms-加速装置键 -slug: Web/HTML/Global_attributes/x-ms-加速装置键 +slug: Web/HTML/Global_attributes/x-ms-acceleratorkey tags: - HTML - 参考 - 属性 - 无标准的 translation_of: Web/HTML/Global_attributes/x-ms-acceleratorkey +original_slug: Web/HTML/Global_attributes/x-ms-加速装置键 ---
    {{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
    diff --git a/files/zh-cn/web/html/global_attributes/x-ms-format-detection/index.html b/files/zh-cn/web/html/global_attributes/x-ms-format-detection/index.html index c36b3ca744..f2cae391bf 100644 --- a/files/zh-cn/web/html/global_attributes/x-ms-format-detection/index.html +++ b/files/zh-cn/web/html/global_attributes/x-ms-format-detection/index.html @@ -1,12 +1,13 @@ --- title: x-ms-格式-检测 -slug: Web/HTML/Global_attributes/x-ms-格式-检测 +slug: Web/HTML/Global_attributes/x-ms-format-detection tags: - HTML - x-ms-format-detection - 参考 - 属性 translation_of: Web/HTML/Global_attributes/x-ms-format-detection +original_slug: Web/HTML/Global_attributes/x-ms-格式-检测 ---
    {{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
    diff --git a/files/zh-cn/web/http/basics_of_http/data_uris/index.html b/files/zh-cn/web/http/basics_of_http/data_uris/index.html index 5153482967..1373bc29dc 100644 --- a/files/zh-cn/web/http/basics_of_http/data_uris/index.html +++ b/files/zh-cn/web/http/basics_of_http/data_uris/index.html @@ -1,6 +1,6 @@ --- title: Data URLs -slug: Web/HTTP/data_URIs +slug: Web/HTTP/Basics_of_HTTP/Data_URIs tags: - Base64 - HTTP @@ -8,6 +8,7 @@ tags: - 教程 - 进阶 translation_of: Web/HTTP/Basics_of_HTTP/Data_URIs +original_slug: Web/HTTP/data_URIs ---
    {{HTTPSidebar}}
    diff --git a/files/zh-cn/web/http/caching/index.html b/files/zh-cn/web/http/caching/index.html index 3bf85cb945..6f44f57fc2 100644 --- a/files/zh-cn/web/http/caching/index.html +++ b/files/zh-cn/web/http/caching/index.html @@ -1,6 +1,6 @@ --- title: HTTP 缓存 -slug: Web/HTTP/Caching_FAQ +slug: Web/HTTP/Caching tags: - Cache-Control - ETag @@ -13,6 +13,7 @@ tags: - 指南 - 缓存 translation_of: Web/HTTP/Caching +original_slug: Web/HTTP/Caching_FAQ ---
    {{HTTPSidebar}}
    diff --git a/files/zh-cn/web/http/content_negotiation/list_of_default_accept_values/index.html b/files/zh-cn/web/http/content_negotiation/list_of_default_accept_values/index.html index 9db5868657..ad0ac618da 100644 --- a/files/zh-cn/web/http/content_negotiation/list_of_default_accept_values/index.html +++ b/files/zh-cn/web/http/content_negotiation/list_of_default_accept_values/index.html @@ -1,7 +1,8 @@ --- title: Accept 默认值 -slug: Web/HTTP/Content_negotiation/Accept_默认值 +slug: Web/HTTP/Content_negotiation/List_of_default_Accept_values translation_of: Web/HTTP/Content_negotiation/List_of_default_Accept_values +original_slug: Web/HTTP/Content_negotiation/Accept_默认值 ---
    {{HTTPSidebar}}
    diff --git a/files/zh-cn/web/http/cors/errors/corsmissingallowcredentials/index.html b/files/zh-cn/web/http/cors/errors/corsmissingallowcredentials/index.html index 8a8f8d0074..c66cf9a519 100644 --- a/files/zh-cn/web/http/cors/errors/corsmissingallowcredentials/index.html +++ b/files/zh-cn/web/http/cors/errors/corsmissingallowcredentials/index.html @@ -1,7 +1,8 @@ --- title: 故：在CORS头Access-Control-Allow-Credentials中预期为true -slug: Web/HTTP/CORS/Errors/CORS错误允许凭证 +slug: Web/HTTP/CORS/Errors/CORSMIssingAllowCredentials translation_of: Web/HTTP/CORS/Errors/CORSMIssingAllowCredentials +original_slug: Web/HTTP/CORS/Errors/CORS错误允许凭证 ---
    diff --git a/files/zh-cn/web/http/cors/index.html b/files/zh-cn/web/http/cors/index.html index c7acc1344d..317acf8913 100644 --- a/files/zh-cn/web/http/cors/index.html +++ b/files/zh-cn/web/http/cors/index.html @@ -1,6 +1,6 @@ --- title: 跨源资源共享（CORS） -slug: Web/HTTP/Access_control_CORS +slug: Web/HTTP/CORS tags: - AJAX - CORS @@ -12,8 +12,9 @@ tags: - Same-origin policy - Security - XMLHttpRequest - - 'l10n:priority' + - l10n:priority translation_of: Web/HTTP/CORS +original_slug: Web/HTTP/Access_control_CORS ---
    {{HTTPSidebar}}
    diff --git a/files/zh-cn/web/http/feature_policy/index.html b/files/zh-cn/web/http/feature_policy/index.html index 90e83fb04a..2bb8309404 100644 --- a/files/zh-cn/web/http/feature_policy/index.html +++ b/files/zh-cn/web/http/feature_policy/index.html @@ -1,7 +1,8 @@ --- title: Feature Policy -slug: Web/HTTP/策略特征 +slug: Web/HTTP/Feature_Policy translation_of: Web/HTTP/Feature_Policy +original_slug: Web/HTTP/策略特征 ---
    {{SeeCompatTable}}{{HTTPSidebar}}
    diff --git a/files/zh-cn/web/http/feature_policy/using_feature_policy/index.html b/files/zh-cn/web/http/feature_policy/using_feature_policy/index.html index 9a37fa46f3..3be5183728 100644 --- a/files/zh-cn/web/http/feature_policy/using_feature_policy/index.html +++ b/files/zh-cn/web/http/feature_policy/using_feature_policy/index.html @@ -1,7 +1,8 @@ --- title: Using Feature Policy -slug: Web/HTTP/策略特征/Using_Feature_Policy +slug: Web/HTTP/Feature_Policy/Using_Feature_Policy translation_of: Web/HTTP/Feature_Policy/Using_Feature_Policy +original_slug: Web/HTTP/策略特征/Using_Feature_Policy ---
    {{HTTPSidebar}} {{SeeCompatTable}}
    diff --git a/files/zh-cn/web/http/headers/strict-transport-security/index.html b/files/zh-cn/web/http/headers/strict-transport-security/index.html index d890b429ef..da1c441a5a 100644 --- a/files/zh-cn/web/http/headers/strict-transport-security/index.html +++ b/files/zh-cn/web/http/headers/strict-transport-security/index.html @@ -1,6 +1,6 @@ --- title: HTTP Strict Transport Security -slug: Web/HTTP/HTTP_Strict_Transport_Security +slug: Web/HTTP/Headers/Strict-Transport-Security tags: - HSTS - HTTP @@ -8,6 +8,7 @@ tags: - Security - header translation_of: Web/HTTP/Headers/Strict-Transport-Security +original_slug: Web/HTTP/HTTP_Strict_Transport_Security ---
     HTTP Strict Transport Security（通常简称为{{Glossary("HSTS")}}）是一个安全功能，它告诉浏览器只能通过HTTPS访问当前资源，而不是HTTP。
    diff --git a/files/zh-cn/web/http/headers/x-dns-prefetch-control/index.html b/files/zh-cn/web/http/headers/x-dns-prefetch-control/index.html index 313d309ccb..fa88398051 100644 --- a/files/zh-cn/web/http/headers/x-dns-prefetch-control/index.html +++ b/files/zh-cn/web/http/headers/x-dns-prefetch-control/index.html @@ -1,12 +1,13 @@ --- title: X-DNS-Prefetch-Control -slug: Controlling_DNS_prefetching +slug: Web/HTTP/Headers/X-DNS-Prefetch-Control tags: - DNS - DNS prefetch - HTTP - 预解析 translation_of: Web/HTTP/Headers/X-DNS-Prefetch-Control +original_slug: Controlling_DNS_prefetching ---

    {{HTTPSidebar}}

    diff --git a/files/zh-cn/web/http/headers/x-frame-options/index.html b/files/zh-cn/web/http/headers/x-frame-options/index.html index 2b6cfcda76..22bc56158a 100644 --- a/files/zh-cn/web/http/headers/x-frame-options/index.html +++ b/files/zh-cn/web/http/headers/x-frame-options/index.html @@ -1,12 +1,13 @@ --- title: X-Frame-Options -slug: Web/HTTP/X-Frame-Options +slug: Web/HTTP/Headers/X-Frame-Options tags: - HTTP - 响应头 - 响应头部 - 安全性 translation_of: Web/HTTP/Headers/X-Frame-Options +original_slug: Web/HTTP/X-Frame-Options ---
    {{HTTPSidebar}}
    diff --git a/files/zh-cn/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html b/files/zh-cn/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html index e64b1758ff..71e0356d9a 100644 --- a/files/zh-cn/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html +++ b/files/zh-cn/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html @@ -1,7 +1,8 @@ --- title: 代理自动配置文件（PAC）文件 -slug: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file +slug: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file translation_of: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file +original_slug: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file ---
    {{HTTPSidebar}}
    diff --git a/files/zh-cn/web/javascript/guide/regular_expressions/quantifiers/index.html b/files/zh-cn/web/javascript/guide/regular_expressions/quantifiers/index.html index bcc2a35e13..fa89245988 100644 --- a/files/zh-cn/web/javascript/guide/regular_expressions/quantifiers/index.html +++ b/files/zh-cn/web/javascript/guide/regular_expressions/quantifiers/index.html @@ -1,7 +1,8 @@ --- title: 量词 -slug: Web/JavaScript/Guide/Regular_Expressions/量词 +slug: Web/JavaScript/Guide/Regular_Expressions/Quantifiers translation_of: Web/JavaScript/Guide/Regular_Expressions/Quantifiers +original_slug: Web/JavaScript/Guide/Regular_Expressions/量词 ---

    {{jsSidebar("JavaScript Guide")}}

    diff --git a/files/zh-cn/web/javascript/reference/classes/public_class_fields/index.html b/files/zh-cn/web/javascript/reference/classes/public_class_fields/index.html index fb8c618a9b..22e3318c11 100644 --- a/files/zh-cn/web/javascript/reference/classes/public_class_fields/index.html +++ b/files/zh-cn/web/javascript/reference/classes/public_class_fields/index.html @@ -1,11 +1,12 @@ --- title: 类元素 -slug: Web/JavaScript/Reference/Classes/Class_elements +slug: Web/JavaScript/Reference/Classes/Public_class_fields tags: - Class - JavaScript - 类 translation_of: Web/JavaScript/Reference/Classes/Public_class_fields +original_slug: Web/JavaScript/Reference/Classes/Class_elements ---
    {{JsSidebar("Classes")}}
    diff --git a/files/zh-cn/web/javascript/reference/errors/cant_assign_to_property/index.html b/files/zh-cn/web/javascript/reference/errors/cant_assign_to_property/index.html index cceeb330c4..8997836b20 100644 --- a/files/zh-cn/web/javascript/reference/errors/cant_assign_to_property/index.html +++ b/files/zh-cn/web/javascript/reference/errors/cant_assign_to_property/index.html @@ -1,7 +1,8 @@ --- title: 'TypeError: can''t assign to property "x" on "y": not an object' -slug: Web/JavaScript/Reference/Errors/不能添加属性 +slug: Web/JavaScript/Reference/Errors/Cant_assign_to_property translation_of: Web/JavaScript/Reference/Errors/Cant_assign_to_property +original_slug: Web/JavaScript/Reference/Errors/不能添加属性 ---
    {{jsSidebar("Errors")}}
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/math/acosh/index.html b/files/zh-cn/web/javascript/reference/global_objects/math/acosh/index.html index 7869661836..5e3af5a309 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/math/acosh/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/math/acosh/index.html @@ -1,12 +1,13 @@ --- title: Math.acosh() -slug: Web/JavaScript/Reference/Global_Objects/Math/反双曲余弦值 +slug: Web/JavaScript/Reference/Global_Objects/Math/acosh tags: - JavaScript - 双曲函数 - 数学 - 方法 translation_of: Web/JavaScript/Reference/Global_Objects/Math/acosh +original_slug: Web/JavaScript/Reference/Global_Objects/Math/反双曲余弦值 ---
    {{JSRef}}
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/apply/index.html b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/apply/index.html index 62b8b67f5f..a077691b92 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/apply/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/apply/index.html @@ -1,12 +1,13 @@ --- title: handler.apply() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply tags: - ECMAScript6 - JavaScript - Method - Proxy translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply ---
    {{JSRef}}
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/construct/index.html b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/construct/index.html index 209e9752e3..926148c90d 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/construct/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/construct/index.html @@ -1,7 +1,8 @@ --- title: handler.construct() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/construct +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/construct translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/construct +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/construct ---
    {{JSRef}}
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.html b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.html index 9912e043a0..d3a25bbd1e 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.html @@ -1,7 +1,8 @@ --- title: handler.defineProperty() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/defineProperty +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/defineProperty ---
    {{JSRef}}
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html index 6cb4255755..22e48aee67 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html @@ -1,7 +1,8 @@ --- title: handler.deleteProperty() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/deleteProperty +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/deleteProperty translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/deleteProperty +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/deleteProperty ---
    {{JSRef}}
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/get/index.html b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/get/index.html index 14a350436a..d84accfa4d 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/get/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/get/index.html @@ -1,12 +1,13 @@ --- title: handler.get() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/get +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get tags: - ECMAScript6 - JavaScript - Method - Proxy translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/get ---
    {{JSRef}}
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html index 470b2c6ad9..7632c26976 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html @@ -1,7 +1,8 @@ --- title: handler.getOwnPropertyDescriptor() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor ---
    {{JSRef}}
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.html b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.html index 215d2d9646..02e38446b2 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.html @@ -1,6 +1,6 @@ --- title: handler.getPrototypeOf() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/getPrototypeOf +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getPrototypeOf tags: - ECMAScript 2015 - JavaScript @@ -8,6 +8,7 @@ tags: - Proxy - 方法 translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getPrototypeOf +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/getPrototypeOf ---
    {{JSRef("Global_Objects", "Proxy")}}
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/has/index.html b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/has/index.html index fead0846ff..286d1e9d77 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/has/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/has/index.html @@ -1,7 +1,8 @@ --- title: handler.has() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/has +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/has translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/has +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/has ---
    {{JSRef}}
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.html b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.html index 7be418197f..ec12d1dd72 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.html @@ -1,12 +1,13 @@ --- title: handler.isExtensible() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/isExtensible +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/isExtensible tags: - ECMAScript 2015 - JavaScript - Method - Proxy translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/isExtensible +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/isExtensible ---
    {{JSRef}}
    handler.isExtensible() 方法用于拦截对对象的Object.isExtensible()。
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.html b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.html index 956b908375..921c8d9b36 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.html @@ -1,7 +1,8 @@ --- title: handler.ownKeys() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/ownKeys +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/ownKeys ---
    {{JSRef}}
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.html b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.html index dd6823c9dd..51f7093d50 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.html @@ -1,9 +1,10 @@ --- title: handler.preventExtensions() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/preventExtensions +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/preventExtensions tags: - Proxy 代理 拦截 translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/preventExtensions +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/preventExtensions ---
    {{JSRef}}
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/set/index.html b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/set/index.html index c66481647a..9857c06818 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/set/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/set/index.html @@ -1,6 +1,6 @@ --- title: handler.set() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/set +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set tags: - ECMAScript6 - JavaScript @@ -8,6 +8,7 @@ tags: - Proxy - Proxy拦截 translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/set ---
    {{JSRef}}
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.html b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.html index 9d88cd2593..48e7f6be60 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.html @@ -1,7 +1,8 @@ --- title: handler.setPrototypeOf() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/setPrototypeOf +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/setPrototypeOf translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/setPrototypeOf +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/setPrototypeOf ---
    {{JSRef}}
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.html b/files/zh-cn/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.html index 43023eae7f..e846cf7190 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.html @@ -1,6 +1,7 @@ --- title: 比较 Reflect 和 Object 方法 -slug: Web/JavaScript/Reference/Global_Objects/Reflect/比较_Reflect_和_Object_方法 +slug: >- + Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods tags: - Guide - JavaScript @@ -9,6 +10,7 @@ tags: - Reflect translation_of: >- Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods +original_slug: Web/JavaScript/Reference/Global_Objects/Reflect/比较_Reflect_和_Object_方法 ---
    {{jssidebar}}
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/trimend/index.html b/files/zh-cn/web/javascript/reference/global_objects/string/trimend/index.html index 9c8319cb29..a3422659aa 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/string/trimend/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/string/trimend/index.html @@ -1,12 +1,13 @@ --- title: String.prototype.trimRight() -slug: Web/JavaScript/Reference/Global_Objects/String/TrimRight +slug: Web/JavaScript/Reference/Global_Objects/String/trimEnd tags: - JavaScript - Method - Prototype - String translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd +original_slug: Web/JavaScript/Reference/Global_Objects/String/TrimRight ---
    {{JSRef}}
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/string/trimstart/index.html b/files/zh-cn/web/javascript/reference/global_objects/string/trimstart/index.html index bc6133cecb..97a31c4277 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/string/trimstart/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/string/trimstart/index.html @@ -1,6 +1,6 @@ --- title: String.prototype.trimStart() -slug: Web/JavaScript/Reference/Global_Objects/String/TrimLeft +slug: Web/JavaScript/Reference/Global_Objects/String/trimStart tags: - JavaScript - Method @@ -10,6 +10,7 @@ tags: - 字符串 - 方法 translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart +original_slug: Web/JavaScript/Reference/Global_Objects/String/TrimLeft ---
    {{JSRef}}
    diff --git a/files/zh-cn/web/javascript/reference/operators/addition/index.html b/files/zh-cn/web/javascript/reference/operators/addition/index.html index 6da432b4e6..c3726a9413 100644 --- a/files/zh-cn/web/javascript/reference/operators/addition/index.html +++ b/files/zh-cn/web/javascript/reference/operators/addition/index.html @@ -1,7 +1,8 @@ --- title: 相加运算符 (+) -slug: Web/JavaScript/Reference/Operators/相加 +slug: Web/JavaScript/Reference/Operators/Addition translation_of: Web/JavaScript/Reference/Operators/Addition +original_slug: Web/JavaScript/Reference/Operators/相加 ---
    {{jsSidebar("相加运算符")}}
    diff --git a/files/zh-cn/web/javascript/reference/operators/async_function/index.html b/files/zh-cn/web/javascript/reference/operators/async_function/index.html index eebfd13ca2..40ee1e2fea 100644 --- a/files/zh-cn/web/javascript/reference/operators/async_function/index.html +++ b/files/zh-cn/web/javascript/reference/operators/async_function/index.html @@ -1,6 +1,6 @@ --- title: async function expression -slug: Web/JavaScript/Reference/Operators/async允许声明一个函数为一个包含异步操作的函数 +slug: Web/JavaScript/Reference/Operators/async_function tags: - JavaScript - 函数 @@ -8,6 +8,7 @@ tags: - 实验性内容 - 操作符 translation_of: Web/JavaScript/Reference/Operators/async_function +original_slug: Web/JavaScript/Reference/Operators/async允许声明一个函数为一个包含异步操作的函数 ---
    {{jsSidebar("Operators")}}
    diff --git a/files/zh-cn/web/javascript/reference/operators/bitwise_and/index.html b/files/zh-cn/web/javascript/reference/operators/bitwise_and/index.html index 20eece2691..9010ddf09b 100644 --- a/files/zh-cn/web/javascript/reference/operators/bitwise_and/index.html +++ b/files/zh-cn/web/javascript/reference/operators/bitwise_and/index.html @@ -1,7 +1,8 @@ --- title: 按位与 (&) -slug: Web/JavaScript/Reference/Operators/按位与 +slug: Web/JavaScript/Reference/Operators/Bitwise_AND translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND +original_slug: Web/JavaScript/Reference/Operators/按位与 ---
    {{jsSidebar("Operators")}}
    diff --git a/files/zh-cn/web/javascript/reference/operators/decrement/index.html b/files/zh-cn/web/javascript/reference/operators/decrement/index.html index f405740df3..aca67c15f9 100644 --- a/files/zh-cn/web/javascript/reference/operators/decrement/index.html +++ b/files/zh-cn/web/javascript/reference/operators/decrement/index.html @@ -1,12 +1,13 @@ --- title: 自减 (--) -slug: Web/JavaScript/Reference/Operators/自减 +slug: Web/JavaScript/Reference/Operators/Decrement tags: - JavaScript - 自减 - 语法特性 - 运算符 translation_of: Web/JavaScript/Reference/Operators/Decrement +original_slug: Web/JavaScript/Reference/Operators/自减 ---
    {{jsSidebar("Operators")}}
    diff --git a/files/zh-cn/web/javascript/reference/operators/equality/index.html b/files/zh-cn/web/javascript/reference/operators/equality/index.html index e100ec1d2d..fadd413b17 100644 --- a/files/zh-cn/web/javascript/reference/operators/equality/index.html +++ b/files/zh-cn/web/javascript/reference/operators/equality/index.html @@ -1,10 +1,11 @@ --- title: 相等（==） -slug: Web/JavaScript/Reference/Operators/相等 +slug: Web/JavaScript/Reference/Operators/Equality tags: - JavaScript - Reference translation_of: Web/JavaScript/Reference/Operators/Equality +original_slug: Web/JavaScript/Reference/Operators/相等 ---
    {{jsSidebar("Operators")}}
    diff --git a/files/zh-cn/web/javascript/reference/operators/logical_and/index.html b/files/zh-cn/web/javascript/reference/operators/logical_and/index.html index de38317f42..78c4eee070 100644 --- a/files/zh-cn/web/javascript/reference/operators/logical_and/index.html +++ b/files/zh-cn/web/javascript/reference/operators/logical_and/index.html @@ -1,7 +1,8 @@ --- title: 逻辑与(&&) -slug: Web/JavaScript/Reference/Operators/逻辑和 +slug: Web/JavaScript/Reference/Operators/Logical_AND translation_of: Web/JavaScript/Reference/Operators/Logical_AND +original_slug: Web/JavaScript/Reference/Operators/逻辑和 ---
    {{jsSidebar("Operators")}}
    diff --git a/files/zh-cn/web/javascript/reference/operators/optional_chaining/index.html b/files/zh-cn/web/javascript/reference/operators/optional_chaining/index.html index da2f04c775..6b45bc4aad 100644 --- a/files/zh-cn/web/javascript/reference/operators/optional_chaining/index.html +++ b/files/zh-cn/web/javascript/reference/operators/optional_chaining/index.html @@ -1,6 +1,6 @@ --- title: 可选链操作符 -slug: Web/JavaScript/Reference/Operators/可选链 +slug: Web/JavaScript/Reference/Operators/Optional_chaining tags: - '?.' - JavaScript @@ -12,6 +12,7 @@ tags: - 运算符 - 链式调用 translation_of: Web/JavaScript/Reference/Operators/Optional_chaining +original_slug: Web/JavaScript/Reference/Operators/可选链 ---
    {{JSSidebar("Operators")}}
    diff --git a/files/zh-cn/web/javascript/reference/operators/pipeline_operator/index.html b/files/zh-cn/web/javascript/reference/operators/pipeline_operator/index.html index 06ce40ad0b..d8087ba0e3 100644 --- a/files/zh-cn/web/javascript/reference/operators/pipeline_operator/index.html +++ b/files/zh-cn/web/javascript/reference/operators/pipeline_operator/index.html @@ -1,6 +1,6 @@ --- title: 管道操作符 -slug: Web/JavaScript/Reference/Operators/管道操作符 +slug: Web/JavaScript/Reference/Operators/Pipeline_operator tags: - Experimental - JavaScript @@ -9,6 +9,7 @@ tags: - 链式 - 链式调用 translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator +original_slug: Web/JavaScript/Reference/Operators/管道操作符 ---
    {{jsSidebar("Operators")}} {{SeeCompatTable}}
    diff --git a/files/zh-cn/web/javascript/reference/operators/remainder/index.html b/files/zh-cn/web/javascript/reference/operators/remainder/index.html index 276296ccd7..f09292e4ff 100644 --- a/files/zh-cn/web/javascript/reference/operators/remainder/index.html +++ b/files/zh-cn/web/javascript/reference/operators/remainder/index.html @@ -1,12 +1,13 @@ --- title: 取余 (%) -slug: Web/JavaScript/Reference/Operators/取余 +slug: Web/JavaScript/Reference/Operators/Remainder tags: - JavaScript - Language feature - Operator - Reference translation_of: Web/JavaScript/Reference/Operators/Remainder +original_slug: Web/JavaScript/Reference/Operators/取余 ---
    {{jsSidebar("Operators")}}
    diff --git a/files/zh-cn/web/javascript/reference/template_literals/index.html b/files/zh-cn/web/javascript/reference/template_literals/index.html index aec3adfb5b..33fb6ebe53 100644 --- a/files/zh-cn/web/javascript/reference/template_literals/index.html +++ b/files/zh-cn/web/javascript/reference/template_literals/index.html @@ -1,12 +1,13 @@ --- title: 模板字符串 -slug: Web/JavaScript/Reference/template_strings +slug: Web/JavaScript/Reference/Template_literals tags: - ECMAScript6 - JavaScript - Template string - 模板字符串 translation_of: Web/JavaScript/Reference/Template_literals +original_slug: Web/JavaScript/Reference/template_strings ---
    {{JsSidebar("More")}} 
    diff --git a/files/zh-cn/web/javascript/the_performance_hazards_of_prototype_mutation/index.html b/files/zh-cn/web/javascript/the_performance_hazards_of_prototype_mutation/index.html index aacff4c8d9..d3ce1ec6e1 100644 --- a/files/zh-cn/web/javascript/the_performance_hazards_of_prototype_mutation/index.html +++ b/files/zh-cn/web/javascript/the_performance_hazards_of_prototype_mutation/index.html @@ -1,7 +1,8 @@ --- -title: 'The performance hazards of [[Prototype]] mutation' -slug: 'Web/JavaScript/The_performance_hazards_of__[[Prototype]]_mutation' -translation_of: 'Web/JavaScript/The_performance_hazards_of__[[Prototype]]_mutation' +title: The performance hazards of [[Prototype]] mutation +slug: Web/JavaScript/The_performance_hazards_of_prototype_mutation +translation_of: Web/JavaScript/The_performance_hazards_of__[[Prototype]]_mutation +original_slug: Web/JavaScript/The_performance_hazards_of__[[Prototype]]_mutation ---

    {{draft}}

    diff --git a/files/zh-cn/web/media/autoplay_guide/index.html b/files/zh-cn/web/media/autoplay_guide/index.html index db2ac88dc0..aa8c207ed2 100644 --- a/files/zh-cn/web/media/autoplay_guide/index.html +++ b/files/zh-cn/web/media/autoplay_guide/index.html @@ -1,7 +1,8 @@ --- title: Autoplay guide for media and Web Audio APIs -slug: Web/媒体/Autoplay_guide +slug: Web/Media/Autoplay_guide translation_of: Web/Media/Autoplay_guide +original_slug: Web/媒体/Autoplay_guide ---

    Automatically starting the playback of audio (or videos with audio tracks) immediately upon page load can be an unwelcome surprise to users. While autoplay of media serves a useful purpose, it should be used carefully and only when needed. In order to give users control over this, browsers often provide various forms of autoplay blocking. In this guide, we'll cover autoplay functionality in the various media and Web Audio APIs, including a brief overview of how to use autoplay and how to work with browsers to handle autoplay blocking gracefully.

    diff --git a/files/zh-cn/web/media/dash_adaptive_streaming_for_html_5_video/index.html b/files/zh-cn/web/media/dash_adaptive_streaming_for_html_5_video/index.html index aed7160371..d54f6f8749 100644 --- a/files/zh-cn/web/media/dash_adaptive_streaming_for_html_5_video/index.html +++ b/files/zh-cn/web/media/dash_adaptive_streaming_for_html_5_video/index.html @@ -1,6 +1,6 @@ --- title: 为 HTML 5 视频提供的 DASH 自适应串流 -slug: Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video +slug: Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video tags: - DASH - HTML @@ -8,6 +8,7 @@ tags: - 指南 - 视频流 translation_of: Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video +original_slug: Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video ---

    经由 HTTP 的动态自适应串流（DASH）是一种自适应串流协议。 这意味着它使得视频串流能基于网络性能来调整比特率，以保证视频流畅播放。

    diff --git a/files/zh-cn/web/media/formats/video_codecs/index.html b/files/zh-cn/web/media/formats/video_codecs/index.html index d299975762..418edf17d3 100644 --- a/files/zh-cn/web/media/formats/video_codecs/index.html +++ b/files/zh-cn/web/media/formats/video_codecs/index.html @@ -1,7 +1,8 @@ --- title: 网络视频编解码器指南 -slug: Web/Media/Formats/视频编解码器 +slug: Web/Media/Formats/Video_codecs translation_of: Web/Media/Formats/Video_codecs +original_slug: Web/Media/Formats/视频编解码器 ---
    {{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}
    diff --git a/files/zh-cn/web/media/index.html b/files/zh-cn/web/media/index.html index 5a66bbe303..3a258c4c65 100644 --- a/files/zh-cn/web/media/index.html +++ b/files/zh-cn/web/media/index.html @@ -1,10 +1,11 @@ --- title: Web 媒体技术 -slug: Web/媒体 +slug: Web/Media tags: - 视频 - 音频 translation_of: Web/Media +original_slug: Web/媒体 ---
    diff --git a/files/zh-cn/web/performance/how_browsers_work/index.html b/files/zh-cn/web/performance/how_browsers_work/index.html index 71e4bce57e..bacbcf0762 100644 --- a/files/zh-cn/web/performance/how_browsers_work/index.html +++ b/files/zh-cn/web/performance/how_browsers_work/index.html @@ -1,7 +1,8 @@ --- title: 渲染页面：浏览器的工作原理 -slug: Web/Performance/浏览器渲染页面的工作原理 +slug: Web/Performance/How_browsers_work translation_of: Web/Performance/How_browsers_work +original_slug: Web/Performance/浏览器渲染页面的工作原理 ---

    页面内容快速加载和流畅的交互是用户希望得到的Web体验，因此，开发者应力争实现这两个目标。

    diff --git a/files/zh-cn/web/progressive_web_apps/add_to_home_screen/index.html b/files/zh-cn/web/progressive_web_apps/add_to_home_screen/index.html index a0915ea9d2..6c54e5b115 100644 --- a/files/zh-cn/web/progressive_web_apps/add_to_home_screen/index.html +++ b/files/zh-cn/web/progressive_web_apps/add_to_home_screen/index.html @@ -1,6 +1,6 @@ --- title: 添加到主屏幕 -slug: Web/Progressive_web_apps/添加到主屏幕 +slug: Web/Progressive_web_apps/Add_to_home_screen tags: - PWA - 图标 @@ -9,6 +9,7 @@ tags: - 清单 - 渐进式Web应用 translation_of: Web/Progressive_web_apps/Add_to_home_screen +original_slug: Web/Progressive_web_apps/添加到主屏幕 ---

    添加到主屏幕（A2HS）添加到主屏幕（简称A2HS）是现代智能手机浏览器中的一项功能，使开发人员可以轻松便捷地将自己喜欢的Web应用程序（或网站）的快捷方式添加到主屏幕中，以便他们随后可以通过单点访问它。本指南说明了A2HS的使用方式，以及作为开发人员要使您的用户利用A2HS所需做的事情。

    diff --git a/files/zh-cn/web/progressive_web_apps/loading/index.html b/files/zh-cn/web/progressive_web_apps/loading/index.html index 7f45a3c278..13e51db104 100644 --- a/files/zh-cn/web/progressive_web_apps/loading/index.html +++ b/files/zh-cn/web/progressive_web_apps/loading/index.html @@ -1,10 +1,11 @@ --- title: 渐进式加载 -slug: Web/Progressive_web_apps/加载 +slug: Web/Progressive_web_apps/Loading tags: - PWA - 渐进式加载 translation_of: Web/Progressive_web_apps/Loading +original_slug: Web/Progressive_web_apps/加载 ---
    {{PreviousMenu("Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}
    diff --git a/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html b/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html index ef181eedcc..0887a22619 100644 --- a/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html +++ b/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html @@ -1,7 +1,8 @@ --- title: 媒体 -slug: Web/Guide/CSS/Getting_started/Media +slug: Web/Progressive_web_apps/Responsive/Media_types translation_of: Web/Progressive_web_apps/Responsive/Media_types +original_slug: Web/Guide/CSS/Getting_started/Media ---

    {{CSSTutorialTOC}} {{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Tables", "表格")}}

    diff --git a/files/zh-cn/web/security/subresource_integrity/index.html b/files/zh-cn/web/security/subresource_integrity/index.html index 86c80188c0..7a6d4b4756 100644 --- a/files/zh-cn/web/security/subresource_integrity/index.html +++ b/files/zh-cn/web/security/subresource_integrity/index.html @@ -1,6 +1,6 @@ --- title: Subresource Integrity -slug: Web/Security/子资源完整性 +slug: Web/Security/Subresource_Integrity tags: - CORS - SRI @@ -8,6 +8,7 @@ tags: - Subresource Integrity - 子资源完整性 translation_of: Web/Security/Subresource_Integrity +original_slug: Web/Security/子资源完整性 ---

    子资源完整性(SRI)是允许浏览器检查其获得的资源（例如从 CDN 获得的）是否被篡改的一项安全特性。它通过验证获取文件的哈希值是否和你提供的哈希值一样来判断资源是否被篡改。

    diff --git a/files/zh-cn/web/security/transport_layer_security/index.html b/files/zh-cn/web/security/transport_layer_security/index.html index ed6e6bb128..bcadfa9d13 100644 --- a/files/zh-cn/web/security/transport_layer_security/index.html +++ b/files/zh-cn/web/security/transport_layer_security/index.html @@ -1,11 +1,12 @@ --- title: 传输层安全协议 -slug: Web/Security/传输层安全协议 +slug: Web/Security/Transport_Layer_Security tags: - 传输层安全协议 - 安全 - 密码学 translation_of: Web/Security/Transport_Layer_Security +original_slug: Web/Security/传输层安全协议 ---

    使用传输层安全性协议（TLS）进行的任何连接的安全性在很大程度上取决于密码套件和所选的安全性参数。 本文的目的是帮助您确保客户端和服务器之间的机密性和完整性通信。Mozilla运营安全团队（OpSec）维护了 服务器端TLS参考配置的Wiki条目。

    diff --git a/files/zh-cn/web/svg/attribute/styling/index.html b/files/zh-cn/web/svg/attribute/styling/index.html index 6d9669c5c5..827a474ca3 100644 --- a/files/zh-cn/web/svg/attribute/styling/index.html +++ b/files/zh-cn/web/svg/attribute/styling/index.html @@ -1,7 +1,8 @@ --- title: SVG样式属性 -slug: Web/SVG/Attribute/样式 +slug: Web/SVG/Attribute/Styling translation_of: Web/SVG/Attribute/Styling +original_slug: Web/SVG/Attribute/样式 ---

    SVG样式属性是所有可以在任何SVG元素上指定以应用CSS样式效果的属性。

    diff --git a/files/zh-cn/web/svg/attribute/text-anchor/index.html b/files/zh-cn/web/svg/attribute/text-anchor/index.html index 7a71281230..31d75a3209 100644 --- a/files/zh-cn/web/svg/attribute/text-anchor/index.html +++ b/files/zh-cn/web/svg/attribute/text-anchor/index.html @@ -1,10 +1,11 @@ --- title: text-anchor -slug: Web/SVG/Attribute/文本锚点 +slug: Web/SVG/Attribute/text-anchor tags: - 可缩放矢量图形 - 可缩放矢量图形 属性 translation_of: Web/SVG/Attribute/text-anchor +original_slug: Web/SVG/Attribute/文本锚点 ---

    « SVG Attribute reference home

    diff --git a/files/zh-cn/web/svg/tutorial/svg_and_css/index.html b/files/zh-cn/web/svg/tutorial/svg_and_css/index.html index f2e753baca..5e13cd92bc 100644 --- a/files/zh-cn/web/svg/tutorial/svg_and_css/index.html +++ b/files/zh-cn/web/svg/tutorial/svg_and_css/index.html @@ -1,7 +1,8 @@ --- title: SVG and CSS -slug: Web/Guide/CSS/Getting_started/SVG_and_CSS +slug: Web/SVG/Tutorial/SVG_and_CSS translation_of: Web/SVG/Tutorial/SVG_and_CSS +original_slug: Web/Guide/CSS/Getting_started/SVG_and_CSS ---
    {{CSSTutorialTOC}}
    diff --git a/files/zh-cn/web/web_components/html_imports/index.html b/files/zh-cn/web/web_components/html_imports/index.html index fe3aeb99cd..35637c4c3f 100644 --- a/files/zh-cn/web/web_components/html_imports/index.html +++ b/files/zh-cn/web/web_components/html_imports/index.html @@ -1,10 +1,11 @@ --- title: HTML 导入（HTML Imports） -slug: Web/Web_Components/HTML导入 +slug: Web/Web_Components/HTML_Imports tags: - HTML Imports - Web Components translation_of: Web/Web_Components/HTML_Imports +original_slug: Web/Web_Components/HTML导入 ---

    {{DefaultAPISidebar("Web Components")}}

    diff --git a/files/zh-cn/web/xpath/comparison_with_css_selectors/index.html b/files/zh-cn/web/xpath/comparison_with_css_selectors/index.html index c196e077e6..3a786a8123 100644 --- a/files/zh-cn/web/xpath/comparison_with_css_selectors/index.html +++ b/files/zh-cn/web/xpath/comparison_with_css_selectors/index.html @@ -1,7 +1,8 @@ --- title: Comparison of CSS Selectors and XPath -slug: Web/CSS/CSS_Selectors/Comparison_with_XPath +slug: Web/XPath/Comparison_with_CSS_selectors translation_of: Web/XPath/Comparison_with_CSS_selectors +original_slug: Web/CSS/CSS_Selectors/Comparison_with_XPath ---
    {{CSSRef("Selectors")}}{{QuickLinksWithSubpages("/en-US/docs/Web/XPath")}}{{Draft}}
    diff --git a/files/zh-cn/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/zh-cn/web/xpath/introduction_to_using_xpath_in_javascript/index.html index cc4b806fa6..d72b2fdfe7 100644 --- a/files/zh-cn/web/xpath/introduction_to_using_xpath_in_javascript/index.html +++ b/files/zh-cn/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -1,6 +1,6 @@ --- title: Introduction to using XPath in JavaScript -slug: Web/JavaScript/Introduction_to_using_XPath_in_JavaScript +slug: Web/XPath/Introduction_to_using_XPath_in_JavaScript tags: - DOM - Extensions @@ -8,6 +8,7 @@ tags: - Web Development - XPath translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript +original_slug: Web/JavaScript/Introduction_to_using_XPath_in_JavaScript ---

    该篇文档描述了如何在扩展和网站内部通过JavaScript调用 XPath 接口。 Mozilla 实现了相当多的 DOM 3 XPath，意味着 Xpath 表达式已经可以在 HTML 和 XML 文档中使用。

    diff --git a/files/zh-cn/web/xslt/element/index.html b/files/zh-cn/web/xslt/element/index.html index ecc12b2d6e..84959686d4 100644 --- a/files/zh-cn/web/xslt/element/index.html +++ b/files/zh-cn/web/xslt/element/index.html @@ -1,9 +1,10 @@ --- title: Elements -slug: Web/XSLT/Elements +slug: Web/XSLT/Element tags: - XSLT_Reference translation_of: Web/XSLT/Element +original_slug: Web/XSLT/Elements ---

    {{ XsltRef() }} There are two types of elements discussed here: top-level elements and instructions. A top-level element must appear as the child of either <xsl:stylesheet> or <xsl:transform>. An instruction, on the other hand, is associated with a template. A stylesheet may include several templates. A third type of element, not discussed here, is the literal result element (LRE). An LRE also appears in a template. It consists of any non-instruction element that should be copied as-is to the result document, for example, an <hr> element in an HTML conversion stylesheet.

    On a related note, any attribute in an LRE and some attributes of a limited number of XSLT elements can also include what is known as an attribute value template. An attribute value template is simply a string that includes an embedded XPath expression which is used to specify the value of an attribute. At run-time the expression is evaluated and the result of the evaluation is substituted for the XPath expression. For example, assume that a variable "image-dir" is defined as follows:

    -- cgit v1.2.3-54-g00ecf