diff options
Diffstat (limited to 'files/zh-cn/learn')
| -rw-r--r-- | files/zh-cn/learn/accessibility/css_and_javascript/index.html (renamed from files/zh-cn/learn/accessibility/css和javascript/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/accessibility/html/index.html (renamed from files/zh-cn/learn/accessibility/html_colon_为可访问性提供一个良好的基础/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/accessibility/multimedia/index.html (renamed from files/zh-cn/learn/accessibility/多媒体/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/common_questions/available_text_editors/index.html (renamed from files/zh-cn/learn/common_questions/实用文本编辑器/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html (renamed from files/zh-cn/learn/how_the_internet_works/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html (renamed from files/zh-cn/learn/discover_browser_developer_tools/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html (renamed from files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html (renamed from files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html (renamed from files/zh-cn/learn/css/introduction_to_css/fundamental_css_comprehension/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html (renamed from files/zh-cn/learn/css/building_blocks/处理_不同_方向的_文本/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.html (renamed from files/zh-cn/learn/css/css_layout/传统的布局方法/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/css_layout/positioning/index.html (renamed from files/zh-cn/learn/css/css_layout/定位/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/first_steps/getting_started/index.html (renamed from files/zh-cn/learn/css/first_steps/开始/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/first_steps/how_css_works/index.html (renamed from files/zh-cn/learn/css/first_steps/css如何运行/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/howto/css_faq/index.html | 183 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/howto/generated_content/index.html | 160 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/styling_text/fundamentals/index.html (renamed from files/zh-cn/learn/css/为文本添加样式/fundamentals/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/styling_text/index.html (renamed from files/zh-cn/learn/css/为文本添加样式/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/styling_text/styling_links/index.html (renamed from files/zh-cn/learn/css/为文本添加样式/styling_links/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/styling_text/styling_lists/index.html (renamed from files/zh-cn/learn/css/为文本添加样式/styling_lists/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html (renamed from files/zh-cn/learn/css/为文本添加样式/typesetting_a_homepage/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/css/styling_text/web_fonts/index.html (renamed from files/zh-cn/learn/css/为文本添加样式/web_字体/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/forms/advanced_form_styling/index.html (renamed from files/zh-cn/learn/html/forms/advanced_styling_for_html_forms/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/forms/basic_native_form_controls/index.html (renamed from files/zh-cn/learn/html/forms/the_native_form_widgets/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/forms/form_validation/index.html (renamed from files/zh-cn/learn/html/forms/data_form_validation/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_1/index.html (renamed from files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_1/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html (renamed from files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_2/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_3/index.html (renamed from files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_3/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_4/index.html (renamed from files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_4/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html (renamed from files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html (renamed from files/zh-cn/learn/html/forms/how_to_structure_an_html_form/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html (renamed from files/zh-cn/learn/html/forms/html_forms_in_legacy_browsers/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/forms/index.html (renamed from files/zh-cn/learn/html/forms/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/forms/property_compatibility_table_for_form_controls/index.html (renamed from files/zh-cn/learn/html/forms/property_compatibility_table_for_form_widgets/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html (renamed from files/zh-cn/learn/html/forms/sending_and_retrieving_form_data/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/forms/sending_forms_through_javascript/index.html (renamed from files/zh-cn/learn/html/forms/sending_forms_through_javascript/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/forms/styling_web_forms/index.html (renamed from files/zh-cn/learn/html/forms/styling_html_forms/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/forms/your_first_form/index.html (renamed from files/zh-cn/learn/html/forms/your_first_html_form/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/how_to_contribute/index.html | 85 | ||||
| -rw-r--r-- | files/zh-cn/learn/html/forms_and_buttons/index.html | 43 | ||||
| -rw-r--r-- | files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html | 213 | ||||
| -rw-r--r-- | files/zh-cn/learn/html/howto/use_data_attributes/index.html | 80 | ||||
| -rw-r--r-- | files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.html (renamed from files/zh-cn/learn/html/introduction_to_html/文件和网站结构/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html (renamed from files/zh-cn/learn/html/multimedia_and_embedding/其他嵌入技术/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/javascript/asynchronous/async_await/index.html (renamed from files/zh-cn/learn/javascript/异步/async_await/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html (renamed from files/zh-cn/learn/javascript/异步/choosing_the_right_approach/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/javascript/asynchronous/concepts/index.html (renamed from files/zh-cn/learn/javascript/异步/概念/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/javascript/asynchronous/index.html (renamed from files/zh-cn/learn/javascript/异步/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/javascript/asynchronous/introducing/index.html (renamed from files/zh-cn/learn/javascript/异步/简介/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/javascript/asynchronous/promises/index.html (renamed from files/zh-cn/learn/javascript/异步/promises语法/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html (renamed from files/zh-cn/learn/javascript/异步/超时和间隔/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/javascript/building_blocks/image_gallery/index.html (renamed from files/zh-cn/learn/javascript/building_blocks/相片走廊/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.html (renamed from files/zh-cn/learn/javascript/objects/向“弹跳球”演示程序添加新功能/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.html (renamed from files/zh-cn/learn/javascript/objects/测试你的技能_colon_面向对象的javascript/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/performance/perceived_performance/index.html (renamed from files/zh-cn/learn/performance/感知性能/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/server-side/configuring_server_mime_types/index.html | 118 | ||||
| -rw-r--r-- | files/zh-cn/learn/server-side/django/admin_site/index.html (renamed from files/zh-cn/learn/server-side/django/管理站点/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/server-side/django/development_environment/index.html (renamed from files/zh-cn/learn/server-side/django/开发环境/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/server-side/django/home_page/index.html (renamed from files/zh-cn/learn/server-side/django/主页构建/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html (renamed from files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/介绍/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html (renamed from files/zh-cn/learn/tools_and_testing/cross_browser_testing/可访问性/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html (renamed from files/zh-cn/learn/tools_and_testing/cross_browser_testing/测试策略/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/learn/tutorial/how_to_build_a_web_site/index.html | 172 | ||||
| -rw-r--r-- | files/zh-cn/learn/tutorial/index.html | 39 | ||||
| -rw-r--r-- | files/zh-cn/learn/web_mechanics/index.html | 10 |
65 files changed, 754 insertions, 349 deletions
diff --git a/files/zh-cn/learn/accessibility/css和javascript/index.html b/files/zh-cn/learn/accessibility/css_and_javascript/index.html index bdc3b01b2e..bdc3b01b2e 100644 --- a/files/zh-cn/learn/accessibility/css和javascript/index.html +++ b/files/zh-cn/learn/accessibility/css_and_javascript/index.html diff --git a/files/zh-cn/learn/accessibility/html_colon_为可访问性提供一个良好的基础/index.html b/files/zh-cn/learn/accessibility/html/index.html index beeb753338..beeb753338 100644 --- a/files/zh-cn/learn/accessibility/html_colon_为可访问性提供一个良好的基础/index.html +++ b/files/zh-cn/learn/accessibility/html/index.html diff --git a/files/zh-cn/learn/accessibility/多媒体/index.html b/files/zh-cn/learn/accessibility/multimedia/index.html index 660ebca836..660ebca836 100644 --- a/files/zh-cn/learn/accessibility/多媒体/index.html +++ b/files/zh-cn/learn/accessibility/multimedia/index.html diff --git a/files/zh-cn/learn/common_questions/实用文本编辑器/index.html b/files/zh-cn/learn/common_questions/available_text_editors/index.html index f8f394191d..f8f394191d 100644 --- a/files/zh-cn/learn/common_questions/实用文本编辑器/index.html +++ b/files/zh-cn/learn/common_questions/available_text_editors/index.html diff --git a/files/zh-cn/learn/how_the_internet_works/index.html b/files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html index ab8eee6e1a..ab8eee6e1a 100644 --- a/files/zh-cn/learn/how_the_internet_works/index.html +++ b/files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html diff --git a/files/zh-cn/learn/discover_browser_developer_tools/index.html b/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html index 69081b9745..69081b9745 100644 --- a/files/zh-cn/learn/discover_browser_developer_tools/index.html +++ b/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html diff --git a/files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html index 6ddd1d114b..6ddd1d114b 100644 --- a/files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html +++ b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html diff --git a/files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html b/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html index 692071dfde..692071dfde 100644 --- a/files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html +++ b/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html diff --git a/files/zh-cn/learn/css/introduction_to_css/fundamental_css_comprehension/index.html b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html index b246af87fe..b246af87fe 100644 --- a/files/zh-cn/learn/css/introduction_to_css/fundamental_css_comprehension/index.html +++ b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html diff --git a/files/zh-cn/learn/css/building_blocks/处理_不同_方向的_文本/index.html b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html index f907c93a3c..f907c93a3c 100644 --- a/files/zh-cn/learn/css/building_blocks/处理_不同_方向的_文本/index.html +++ b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html diff --git a/files/zh-cn/learn/css/css_layout/传统的布局方法/index.html b/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.html index 58313b6fdd..58313b6fdd 100644 --- a/files/zh-cn/learn/css/css_layout/传统的布局方法/index.html +++ b/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.html diff --git a/files/zh-cn/learn/css/css_layout/定位/index.html b/files/zh-cn/learn/css/css_layout/positioning/index.html index cbfa094300..cbfa094300 100644 --- a/files/zh-cn/learn/css/css_layout/定位/index.html +++ b/files/zh-cn/learn/css/css_layout/positioning/index.html diff --git a/files/zh-cn/learn/css/first_steps/开始/index.html b/files/zh-cn/learn/css/first_steps/getting_started/index.html index 0a6087ee12..0a6087ee12 100644 --- a/files/zh-cn/learn/css/first_steps/开始/index.html +++ b/files/zh-cn/learn/css/first_steps/getting_started/index.html diff --git a/files/zh-cn/learn/css/first_steps/css如何运行/index.html b/files/zh-cn/learn/css/first_steps/how_css_works/index.html index 7aafcf481f..7aafcf481f 100644 --- a/files/zh-cn/learn/css/first_steps/css如何运行/index.html +++ b/files/zh-cn/learn/css/first_steps/how_css_works/index.html 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 +--- +<h2 id="为什么我有效的CSS没有正确的渲染？">为什么我有效的CSS没有正确的渲染？</h2> + +<p>浏览器使用DOCTYPE声明来选择是否使用更符合Web标准或兼容旧浏览器的bug的模式。在你的HTML的开始使用一个正确的和现代的DOCTYPE声明将改善浏览器标准执行。</p> + +<p>现代浏览器主要有两种渲染模式：</p> + +<ul> + <li><em>怪异模式：</em> 又称向后兼容模式,，允许将传统网页渲染为作者意图。 旧浏览器使用的非标准渲染规则。 不完整的、不正确的、缺少DOCTYPE声明或已知的DOCTYPE声明中普遍使用2001年以前的文件将在怪异模式中呈现。</li> + <li><em>标准模式：</em>浏览器试图严格遵守W3C标准。新HTML网页有望被设计为符合标准的浏览器，这样做的结果就是，用现代DOCTYPE声明的页面将被用标准模式呈现。</li> +</ul> + +<p>基于Gecko的浏览器， 有三分之一 <em><a href="https://developer.mozilla.org/en-US/docs/Gecko's_%22Almost_Standards%22_Mode">Almost Standards Mode</a></em>， 只有一些小怪癖。</p> + +<p>这是最常用的触发标准模式或准标准模式的DOCTYPE声明列表：</p> + +<pre><!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"> +</pre> + +<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">为什么我有效的css完全没有被渲染？ </h2> + +<p>为了使浏览器渲染样式文件，CSS样式表必须用text/css的MIME。如果Web服务器不服务于这种类型，则CSS也不会被应用。</p> + +<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class">id和class有什么不同？</h2> + +<p>HTML元素可以拥有一个id/或class属性。 id属性为元素指定应用一个有效名称，只能有一个具有该名称的元素。class属性指定一个类名的元素，而这个名称可以被页面内的许多元素被使用。 CSS允许你可以对特定的id和/或类名的元素应用样式。<br> + <br> + 当你想给一个特定元素或块应用样式规则时就使用ID选择符。此样式将只用于与该特定id匹配的元素。</p> + +<p><br> + 当你想要将样式规则应用于多个块和元素时，你应该使用class选择符。</p> + +<p>较少样式的样式表通常性能更高。因此建议尽可能多地使用类， 保留id作为特定用途 (比如链接label标签和form元素或者为语义上唯一的元素应用样式)。</p> + +<p>查看 <a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">CSS selectors</a></p> + +<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value">我如何还原属性的默认值？</h2> + +<p>最初CSS没有提供“defaule”关键字和还原默认属性的值，唯一途径是显式地重新声明该属性。</p> + +<p>与CSS2相比，已经发生了改变。 关键字 <a href="/es/CSS/initial" title="initial">initial</a> 现在是一个有效的CSS属性。它将给定的CSS属性值重置为默认值。</p> + +<h2 id="Derived_styles" name="Derived_styles">我如何才可以从一个样式中衍生出另一种样式?</h2> + +<p>CSS 不允许这样做。(See <a class="external" href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer's note about the Working Group's stance)</a>. 但是，将多个类分配给单个元素，可以提供相同的效果。</p> + +<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">我该如何给一个元素分配多个类？</h2> + +<p>HTML元素可以通过列出的类属性，用空格分开它们。</p> + +<pre><style type="text/css"> +.news { background: black; color: white; } +.today { font-weight: bold; } +</style> + +<div class="news today"> +... content of today's news ... +</div> +</pre> + +<p>如果相同的属性中声明的规则，解决冲突首先通过特异性，然后根据CSS声明的顺序。在class属性类的顺序是不相关的。</p> + +<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">为什么我的样式规则不能正确地工作？</h2> + +<p>在语法上正确的样式规则可能在某些情况下不适用。你可以使用 <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a>'s <em>CSS Style Rules</em> 调试这类问题。 下面列出了最常见的忽略样式规则的实例：</p> + +<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">HTML元素层次结构</h3> + +<p>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.</p> + +<pre>.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> +</pre> + +<p>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.</p> + +<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">显式重定义样式规则</h3> + +<p>In CSS stylesheets, order <strong>is</strong> important. If you define a rule and then you re-define the same rule, the last definition is used.</p> + +<pre>#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> +</pre> + +<p>To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.</p> + +<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">使用便捷属性</h3> + +<p>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.</p> + +<pre>#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> +</pre> + +<p>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 <strong>is</strong> important.</p> + +<pre>#stockTicker { + font-weight: bold; + font: 12px Verdana; /* font-weight is now normal */ +} +</pre> + +<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector">使用 <code>*</code> 选择器</h3> + +<p>The <code>*</code> wildcard selector refers to any element, and it has to be used with particular care.</p> + +<pre>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> +</pre> + +<p>In this example the <code>body *</code> selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So <code>font-weight: bold;</code> applied to the .corpName class is overridden by <code>font-weight: normal;</code> applied to all elements in the body.</p> + +<p>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.</p> + +<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">CSS 中的优先级</h3> + +<p>When multiples rules apply to a certain element, the rule chosen depends on its style <a href="/en/CSS/Specificity" title="Specificity">specificity</a>. Inline style (in HTML <code>style</code> attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.</p> + +<pre>div { color: black; } +#orange { color: orange; } +.green { color: green; } + +<div id="orange" class="green" style="color: red;">This is red</div> +</pre> + +<p>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 <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a></p> + +<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F"> -moz-*， -ms-*， -webkit-*， -o-* 以及 -khtml-* 属性有什么用？</h2> + +<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">These properties, called </span><em>prefixed properties</em><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">, 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.</span></h2> + +<p>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.</p> + +<p>Please see the <a class="internal" href="/en/CSS/CSS_Reference/Mozilla_Extensions" title="en/CSS Reference/Mozilla Extensions">Mozilla CSS Extensions</a> page for more information on the Mozilla-prefixed CSS properties.</p> + +<h2 id="z-index_属性与定位有什么关系？">z-index 属性与定位有什么关系？</h2> + +<p>z-index属性指定了元素的栈序。</p> + +<p>有较高z-index/栈序的元素总是在有着较低z-index/栈序的元素之前。</p> + +<p>z-index只会在有着指定position (<code>position:absolute</code>, <code>position:relative</code>, or <code>position:fixed</code>)的元素上工作。</p> 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 +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Color", "颜色") }}<span class="seoSummary">这是 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS 入门教程</a>的第9部分，介绍了一些通过CSS改变文档内容的方法。这样，仅修改样式表你就能把文本内容及图片添加到文档。</span></p> + +<h2 class="clearLeft" id="信息_内容">信息: 内容</h2> + +<p>CSS的一个重要优势是它可以帮助你将文档内容和其样式分离。但是有时候在样式而非文档中定义一些内容也是很有用的。</p> + +<p>在样式中可以定义文本内容和图片内容。当内容与文档结构紧密相关的时候，你可以在样式表中指定内容。</p> + +<div class="tuto_details"> +<div class="tuto_type">更多细节</div> + +<p>在样式表中指定内容会使事情变得复杂：你可能有多个语言版本的文档共享同一个样式表。如果样式表的一部分需要翻译，这就意味着你需要将这部分单独保存在多个样式表中，并在不同语言的文档中引用。</p> + +<p>如果你指定的内容由通用符号和图片组成的话，就不存在这个问题。</p> + +<p>样式表中指定的内容不会成为DOM的一部分。</p> +</div> + +<h3 id="文本内容">文本内容</h3> + +<p>CSS可以在元素的前后插入文本：在选择器的后面加上{{ cssxref("::before") }} 或者 {{ cssxref("::after") }} 。在声明中，指定 {{ cssxref("content") }} 属性，并设置文本内容。</p> + +<div class="tuto_example"> +<div class="tuto_type">例</div> + +<p>下面这条规则在所有类名包含 <span style="font-family: courier new,andale mono,monospace; line-height: normal;">ref的元素前面加上</span><span style="line-height: 1.5;"> </span><strong style="color: navy; font-weight: bold; line-height: 1.5;">Reference:</strong></p> + +<pre class="brush:css">.ref::before { + font-weight: bold; + color: navy; + content: "Reference: "; +} +</pre> +</div> + +<div class="tuto_details"> +<div class="tuto_type">更多细节</div> + +<p>样式表默认使用UTF-8字符集。也可以通过link属性或样式表以及其他方式指定。 参见 CSS规范中 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a></p> + +<p>还可以通过转义机制（通过反斜杠转义）指定单个字符。<span style="line-height: 1.5;">比如， \265B 是国际象棋黑皇后的符号 ♛。更多参见 </span><a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24" style="line-height: 1.5;">Referring to characters not represented in a character encoding</a><span style="line-height: 1.5;"> 和CSS规范中的 </span><a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6" style="line-height: 1.5;">Characters and case</a><span style="line-height: 1.5;">。</span></p> +</div> + +<h3 id="图片内容">图片内容</h3> + +<p>可以通过将{{ cssxref("content") }} 属性值设置为某个图片的URL，可以将图片插到元素的前面或后面。</p> + +<div class="tuto_example"> +<div class="tuto_type">例</div> + +<p>下面这条规则在所有类名包含<span style="font-family: courier new,andale mono,monospace; line-height: normal;">glossary的a标签后面插入一个空格和一个图标：</span></p> + +<pre class="brush:css">a.glossary::after {content: " " url("../images/glossary-icon.gif");} +</pre> +</div> + +<p>将图片设置成元素的背景图：将 {{ cssxref("background") }} 的值设为图片的URL。这是同时设置背景颜色，背景图，图片如何重复等的快捷写法。</p> + +<div class="tuto_example"> +<div class="tuto_type">例</div> + +<p>这条规则通过指定图片URL设置特定元素的背景。</p> + +<p>这是一个ID选择器；no-repeat表示背景图只出现一次，不重复:</p> + +<pre class="brush:css">#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;} +</pre> +</div> + +<div class="tuto_details"> +<div class="tuto_type">更多细节</div> + +<p>了解更多影响背景图的属性，以及其他背景图选项，参见 {{ cssxref("background") }} 。</p> +</div> + +<h2 id="实践_添加背景图片">实践: 添加背景图片</h2> + +<p>这幅图是一个白方块，底部有一条蓝色实线:</p> + +<table style="border: 2px solid #cccccc;"> + <tbody> + <tr> + <td><img alt="Image:Blue-rule.png" class="internal" src="https://mdn.mozillademos.org/files/160/Blue-rule.png"></td> + </tr> + </tbody> +</table> + +<ol> + <li>下载上图放到CSS同目录下</li> + <li>编辑CSS文件，为body设置背景图. + <pre class="brush:css">background: url("Blue-rule.png"); +</pre> + + <p>背景图默认是 <code>repeat（重复）的，无需明确指出。图片在水平和垂直方向重复，最终呈现出横格纸的效果：</code></p> + + <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> + <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p> + + <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> + <div style="font-style: italic; width: 24em;"> + <p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</p> + </div> + + <div style="font-style: normal; padding-top: 2px; height: 8em;"> + <p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</p> + </div> + </div> + </div> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">挑战</div> + +<p>下载图片:</p> + +<table style="border: 2px solid #cccccc;"> + <tbody> + <tr> + <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td> + </tr> + </tbody> +</table> + +<p>在样式表中增加一条规则，使得每行前面显示上面的图标</p> + +<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> +<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p> + +<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> +<div style="font-style: italic; width: 24em; padding-top: 8px;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</div> + +<div style="font-style: normal; padding-top: 12px; height: 8em;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</div> +</div> +</div> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>Add this rule to your stylesheet:</p> + +<pre class="brush: css">p:before{ + content: url("yellow-pin.png"); +} +</pre> + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">答案.</a></div> + +<h2 id="接下来">接下来?</h2> + +<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists", "列表") }}列表是一种常见的为列表元素添加内容的方式。下节将介绍如何 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists">为列表元素指定样式</a>。</p> diff --git a/files/zh-cn/learn/css/为文本添加样式/fundamentals/index.html b/files/zh-cn/learn/css/styling_text/fundamentals/index.html index 45660a9532..45660a9532 100644 --- a/files/zh-cn/learn/css/为文本添加样式/fundamentals/index.html +++ b/files/zh-cn/learn/css/styling_text/fundamentals/index.html diff --git a/files/zh-cn/learn/css/为文本添加样式/index.html b/files/zh-cn/learn/css/styling_text/index.html index ec4822b9ad..ec4822b9ad 100644 --- a/files/zh-cn/learn/css/为文本添加样式/index.html +++ b/files/zh-cn/learn/css/styling_text/index.html diff --git a/files/zh-cn/learn/css/为文本添加样式/styling_links/index.html b/files/zh-cn/learn/css/styling_text/styling_links/index.html index df2e7c6093..df2e7c6093 100644 --- a/files/zh-cn/learn/css/为文本添加样式/styling_links/index.html +++ b/files/zh-cn/learn/css/styling_text/styling_links/index.html diff --git a/files/zh-cn/learn/css/为文本添加样式/styling_lists/index.html b/files/zh-cn/learn/css/styling_text/styling_lists/index.html index 075b457836..075b457836 100644 --- a/files/zh-cn/learn/css/为文本添加样式/styling_lists/index.html +++ b/files/zh-cn/learn/css/styling_text/styling_lists/index.html diff --git a/files/zh-cn/learn/css/为文本添加样式/typesetting_a_homepage/index.html b/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html index 98f86f125f..98f86f125f 100644 --- a/files/zh-cn/learn/css/为文本添加样式/typesetting_a_homepage/index.html +++ b/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html diff --git a/files/zh-cn/learn/css/为文本添加样式/web_字体/index.html b/files/zh-cn/learn/css/styling_text/web_fonts/index.html index ad9691cb00..ad9691cb00 100644 --- a/files/zh-cn/learn/css/为文本添加样式/web_字体/index.html +++ b/files/zh-cn/learn/css/styling_text/web_fonts/index.html diff --git a/files/zh-cn/learn/html/forms/advanced_styling_for_html_forms/index.html b/files/zh-cn/learn/forms/advanced_form_styling/index.html index 94128b7229..94128b7229 100644 --- a/files/zh-cn/learn/html/forms/advanced_styling_for_html_forms/index.html +++ b/files/zh-cn/learn/forms/advanced_form_styling/index.html diff --git a/files/zh-cn/learn/html/forms/the_native_form_widgets/index.html b/files/zh-cn/learn/forms/basic_native_form_controls/index.html index 8ef67a2f7a..8ef67a2f7a 100644 --- a/files/zh-cn/learn/html/forms/the_native_form_widgets/index.html +++ b/files/zh-cn/learn/forms/basic_native_form_controls/index.html diff --git a/files/zh-cn/learn/html/forms/data_form_validation/index.html b/files/zh-cn/learn/forms/form_validation/index.html index 62758a26e6..62758a26e6 100644 --- a/files/zh-cn/learn/html/forms/data_form_validation/index.html +++ b/files/zh-cn/learn/forms/form_validation/index.html diff --git a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_1/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_1/index.html index 93cf5069c2..93cf5069c2 100644 --- a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_1/index.html +++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_1/index.html diff --git a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_2/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html index 3a9546631f..3a9546631f 100644 --- a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_2/index.html +++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html diff --git a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_3/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_3/index.html index a4a58880e4..a4a58880e4 100644 --- a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_3/index.html +++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_3/index.html diff --git a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_4/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_4/index.html index 472102adb2..472102adb2 100644 --- a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/example_4/index.html +++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_4/index.html diff --git a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html index 24636e7858..24636e7858 100644 --- a/files/zh-cn/learn/html/forms/how_to_build_custom_form_widgets/index.html +++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html diff --git a/files/zh-cn/learn/html/forms/how_to_structure_an_html_form/index.html b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html index eda4b201da..eda4b201da 100644 --- a/files/zh-cn/learn/html/forms/how_to_structure_an_html_form/index.html +++ b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html diff --git a/files/zh-cn/learn/html/forms/html_forms_in_legacy_browsers/index.html b/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html index d6045e0d70..d6045e0d70 100644 --- a/files/zh-cn/learn/html/forms/html_forms_in_legacy_browsers/index.html +++ b/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html diff --git a/files/zh-cn/learn/html/forms/index.html b/files/zh-cn/learn/forms/index.html index ad51eafa35..ad51eafa35 100644 --- a/files/zh-cn/learn/html/forms/index.html +++ b/files/zh-cn/learn/forms/index.html diff --git a/files/zh-cn/learn/html/forms/property_compatibility_table_for_form_widgets/index.html b/files/zh-cn/learn/forms/property_compatibility_table_for_form_controls/index.html index 31f8075f5b..31f8075f5b 100644 --- a/files/zh-cn/learn/html/forms/property_compatibility_table_for_form_widgets/index.html +++ b/files/zh-cn/learn/forms/property_compatibility_table_for_form_controls/index.html diff --git a/files/zh-cn/learn/html/forms/sending_and_retrieving_form_data/index.html b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html index ed3a4ef0ef..ed3a4ef0ef 100644 --- a/files/zh-cn/learn/html/forms/sending_and_retrieving_form_data/index.html +++ b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html diff --git a/files/zh-cn/learn/html/forms/sending_forms_through_javascript/index.html b/files/zh-cn/learn/forms/sending_forms_through_javascript/index.html index 8489ff2243..8489ff2243 100644 --- a/files/zh-cn/learn/html/forms/sending_forms_through_javascript/index.html +++ b/files/zh-cn/learn/forms/sending_forms_through_javascript/index.html diff --git a/files/zh-cn/learn/html/forms/styling_html_forms/index.html b/files/zh-cn/learn/forms/styling_web_forms/index.html index 26b94e94e8..26b94e94e8 100644 --- a/files/zh-cn/learn/html/forms/styling_html_forms/index.html +++ b/files/zh-cn/learn/forms/styling_web_forms/index.html diff --git a/files/zh-cn/learn/html/forms/your_first_html_form/index.html b/files/zh-cn/learn/forms/your_first_form/index.html index 5b0adc1480..5b0adc1480 100644 --- a/files/zh-cn/learn/html/forms/your_first_html_form/index.html +++ b/files/zh-cn/learn/forms/your_first_form/index.html 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 ---- -<div>{{LearnSidebar}}</div> - -<p>可能您是第一次看到这个页面，也可能您经过层层搜索而来。我们猜测您找到这里，是希望向 MDN 学习区做贡献——棒极了！</p> - -<p><span class="seoSummary">这篇文档将告诉您如何提高 MDN 学习区资料的质量。您可以做的事情各种各样，取决于您有多少时间，以及您的身份：<a href="/zh_CN/Learn/How_to_contribute#I'm_a_beginner">初学者</a>、<a href="/zh_CN/Learn/How_to_contribute#I'm_a_web_developer">Web 开发者</a>，还是<a href="/zh_CN/Learn/How_to_contribute#I'm_a_teacher">教师</a>。</span></p> - -<div class="note"> -<p><strong>注意</strong>：这篇指南会告诉您<a href="/zh-CN/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">如何撰写文章来帮助他人学习 Web</a>。</p> -</div> - -<h2 id="寻找特定任务">寻找特定任务</h2> - -<p><strong>贡献者向学习区做出贡献的方法通常是阅读文章、修复排版错误并提出改进。我们同时欢迎您向我们的 <a href="https://github.com/mdn/learning-area/">GitHub 源 </a>添加示例。若您还想了解需要做的其他事项，请与我们联系。</strong></p> - -<p>在学习新知识的同时做出贡献是一件乐趣无穷的事。如果您感到迷茫或者有疑问，不用犹豫，通过<a href="/zh-CN/docs/MDN/Community#Join_our_mailing_lists">邮件列表</a>或 <a href="/zh-CN/docs/MDN/Community#Get_into_IRC">IRC 频道</a>联系我们（本页底部有更详细的信息）。<a href="/en-US/profiles/chrisdavidmills">Chris Mills</a> 是学习区的主题发布人——您也可以直接和他联系。</p> - -<p>以下章节为您的任务提供概要思路。</p> - -<h2 id="我是初学者">我是初学者</h2> - -<p>好极了！对于创建学习资源和提供反馈，初学者们至关重要。作为目标受众，您对这些文章具有独特的视角，这让您成为我们团队中的无价之宝。真的，如果您正在通过某篇文章学习知识却卡住了，或者您觉得这篇文章看起来有点令人费解，您既可以自行改正，也可以把问题告诉我们以便我们去改正它。</p> - -<p>下面是几种建议的贡献方式：</p> - -<dl> - <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Tag">为文章添加标签</a>（<em>5 分钟</em>）</dt> - <dd>为文章添加标签是最简单的贡献方式。利用标签来呈现信息是我们的特色之一，因此添加标签对我们来说是非常有价值的贡献方式。您可以先从还没有标签的<a href="/zh-CN/docs/MDN/Doc_status/Glossary#No_tags">词汇条目</a>和<a href="/zh-CN/docs/MDN/Doc_status/Learn#No_tags">学习文章</a>开始。</dd> - <dt><a href="/zh_CN/docs/Glossary">阅读并复核词汇条目</a>（<em>5 分钟</em>）</dt> - <dd>我们希望，作为初学者的您能用您的视角来审视我们所写的内容。如果您感到某个词汇条目难以理解，这说明该条目需要改进。您可以做任何觉得有必要的修改。如果您感到自己的技能不足以修改词汇条目，也可以通过<a href="/zh-CN/docs/MDN/Community#Join_our_mailing_lists">邮件列表</a>告诉我们。</dd> - <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">撰写词汇条目</a>（<em>20 分钟</em>）</dt> - <dd>这是学习新知识的最有效的方式了。挑选一个想要深入了解的概念，根据您所学的，撰写关于这个概念的词汇条目。“向他人解释”，这是巩固已学知识的最佳方式之一，既帮助您深入理解，同时也帮助了他人。这就是共赢！</dd> - <dt><a href="/zh_CN/docs/Learn/Index">阅读并复核学习文章</a>（<em>2 小时</em>）</dt> - <dd>这与上述“复核词汇条目”非常类似，只是由于文章更长，因此要花更多时间。</dd> -</dl> - -<h2 id="我是_Web_开发者">我是 Web 开发者</h2> - -<p>太棒了！我们太需要您的专业技能了，这确保我们向初学者提供的内容技术准确。考虑到这部分内容用于供他人学习，我们希望您提供的解释尽可能表述简单，但又不至于无用。我们首先考虑易于理解，而非过度精确。</p> - -<dl> - <dt><a href="/zh_CN/docs/Glossary">阅读并复核词汇条目</a>（<em>5 分钟</em>）</dt> - <dd>我们希望作为 Web 开发者的您，能让我们的文章内容技术准确而又不至于太学究气息。您可以做任何认为有必要的修改。如果您想在编辑前讨论内容，可以通过<a href="/zh-CN/docs/MDN/Community#Join_our_mailing_lists">邮件列表</a>或 <a href="/zh-CN/docs/MDN/Community#Get_into_IRC">IRC 频道</a>联系我们。</dd> - <dt><a href="/zh_CN/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">撰写词汇条目</a>（<em>20 分钟</em>）</dt> - <dd>阐述技术词汇是一种很好的学习方法，它能帮助您用准确而简单的方式把握技术细节。初学者非常需要准确清晰的术语定义。我们有许多<a href="/zh-CN/docs/Glossary#Contribute">缺乏定义的术语</a>需要您来完善，请放手去做吧！</dd> - <dt><a href="/zh-CN/Learn/Index">阅读并复核学习文章</a> (<em>2 小时</em>)</dt> - <dd>这与上述“复核词汇条目”一样，只是由于文章更长，因此要花更多时间。</dd> - <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">撰写学习文章</a> (<em>4 小时或者更多</em>)</dt> - <dd>MDN 缺少朴素直白的文章以介绍如何使用 Web 技术（<a href="/zh-CN/docs/Learn/CSS">HTML</a>、<a href="/zh-CN/docs/Learn/CSS">CSS</a>、<a href="/zh-CN/docs/Learn/JavaScript">JavaScript</a> 等等）。我们还有很多陈旧的文档内容，需要复核或重构。发挥您的聪明才智，造福 Web 技术初学者吧！</dd> - <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">创建练习、代码样例或交互式学习工具</a> (<em>? 小时</em>)</dt> - <dd>亲自实践的学习效果更佳，因此我们希望所有的学习文章都包含“主动学习 (active learning)”材料，比如练习、或者交互式内容。这些材料能够帮助用户熟练运用文章中详述的概念。制作“主动学习”材料的方式很多，比如使用 <a href="http://jsfiddle.net" rel="external">JSFiddle</a> 或类似工具创建代码样例，或者使用 <a href="https://thimble.mozilla.org/" rel="external">Thimble</a> 构建可解析的交互式内容。总而言之，释放您的创造力吧！</dd> -</dl> - -<h2 id="我是教师">我是教师</h2> - -<p>MDN 长期以来都拥有卓越的技术，但对于传授知识的最佳方法，我们仍然缺乏深刻的见解。我们需要教育工作者的参与，从而确保我们的材料为读者提供良好而实用的教育方法。</p> - -<dl> - <dt><a href="/zh-CN/docs/Glossary">阅读并复核词汇条目</a> (<em>15 分钟</em>)</dt> - <dd>检查词汇条目，并对任何您认为有必要的地方进行修改。如果您想在编辑前讨论内容，可以通过可以通过<a href="/zh-CN/docs/MDN/Community#Join_our_mailing_lists">邮件列表</a>或 <a href="/zh-CN/docs/MDN/Community#Get_into_IRC">IRC 频道</a>联系我们。</dd> - <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">撰写词汇条目</a> (<em>1 小时</em>)</dt> - <dd>为了满足初学者的需求，在词汇表中对术语进行清晰简明的定义、对概念进行基本总体的描述至关重要。您的教育经验对于创建优秀的词汇条目大有裨益；我们有许多<a href="/zh-CN/docs/Glossary#Contribute">缺乏定义的术语</a>需要您来完善，请放手去做吧！</dd> - <dt><a href="/zh-CN/docs/tag/needsSchema">向文章中添加插图或图表</a> (<em>1 小时</em>)</dt> - <dd>您一定了解图表在学习材料中的价值。我们的文章内容总是缺乏图表，而您正好可以大展身手。您可以从<a href="/zh-CN/docs/tag/needsSchema">缺少图表内容的文章</a>中选择一些，为其创建插图。</dd> - <dt><a href="/zh-CN/Learn/Index">阅读并复核学习文章</a> (<em>2 小时</em>)</dt> - <dd>这与上述“复核词汇条目”类似，只是由于文章更长，因此要花更多时间。</dd> - <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">撰写学习文章</a> (<em>4 小时</em>)</dt> - <dd>我们需要朴素直白的文章，介绍 Web 生态体系以及其他相关的功能主题。这些文章的目标是教育性，而非领域百科。文章应当涉及什么、如何表述，您在这方面的丰富经验大有帮助。</dd> - <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">创建练习、测验或者交互式学习工具</a> (<em>? 小时</em>)</dt> - <dd>我们希望所有的学习文章都包含“主动学习 (active learning)”材料，比如练习、或者交互式内容。这些材料能够帮助用户学习并拓展理解文章中详述的概念。您可以做很多事情——创建测验、用 <a href="https://thimble.mozilla.org/" rel="external">Thimble</a> 构建可解析的交互式内容——总之，释放您的创造力吧！</dd> - <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Create_learning_pathways">创建学习路线</a> (<em>? 小时</em>)</dt> - <dd>为了提供循序渐进、易于理解的教程，我们需要把学习材料组织成体系化的路线。这个过程将收集已有的材料，并找出缺失的内容，然后用新文章填补空缺。</dd> -</dl> 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 ---- -<p>{{draft}}{{LearnSidebar}}</p> - -<p class="summary">表单和按钮是Web的一个非常重要的部分 - 这些允许您的站点访问者输入数据并将其发送给您（例如注册，登录和反馈表单），并且您可以实现控制以控制复杂功能（例如提交表单） 到服务器，或暂停播放视频。）这个模块可以帮助您入门。</p> - -<h2 id="先决条件">先决条件</h2> - -<p>在开始本单元之前，您应该对<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML的基础知识</a>有一定的了解，如HTML简介中所述。 如果你没有通过这个模块（或类似的东西），先完成它，然后再回来！</p> - -<div class="note"> -<p><strong>Note</strong>: 如果你是在计算机/平板电脑等其他你无法创建文件的设备上的话，你可以尝试在在线代码编辑平台上运行代码例如 <a class="external external-icon" href="http://jsbin.com/" rel="noopener">JSBin</a> 或 <a class="external external-icon" href="https://thimble.mozilla.org/" rel="noopener">Thimble</a>.</p> -</div> - -<h2 id="向导">向导</h2> - -<p>本模块包含以下的文章</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Forms_and_buttons/Basics">表单和按钮基础知识</a>（Form and button basics）</dt> - <dd> 在本文中，我们将向您介绍HTML表单的基础知识，包括它们的用途，基本功能和常用表单控件。 我们还将了解HTML按钮以及如何使用它们。</dd> - <dt>形成语义和结构</dt> - <dd> 存在许多元素，允许我们将表单结构化为更易于使用和访问 - 其中一些是专门的表单元素，其中一些是通用HTML容器。 在本文中，我们将介绍创建表单结构的最佳实践。</dd> - <dt>高级表单功能</dt> - <dd> 在这里，我们将介绍HTML表单中可用的一些更高级的功能，例如数据列表，进度条，滑块以及最小值和最大值。</dd> - <dt>表格验证</dt> - <dd> 在我们的最终表单文章中，我们将讨论表单验证，讨论为什么有必要，并查看HTML选项卡提供的一些功能，以便客户端验证表单数据。</dd> -</dl> - -<h2 id="练习">练习</h2> - -<dl> - <dt>表单练习</dt> - <dd>等待完成（to be done）</dd> -</dl> 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 +--- +<p>以下技巧都是基于通用的知识和经验。</p> + +<p>一个好的页面不仅要给访客提供一个更有交互性的站点，同时也需要降低你的服务器压力和网络请求。后者对于那些高访问量的站点，或在有爆炸性新闻出现等特殊情况下会出现流量突增的站点来说尤为关键。</p> + +<p>页面加载性能的优化不仅仅是针对那些带宽有限的拨号上网或移动设备用户需要看的内容，对于提供给宽带用户访问的内容同样重要并且可以导致巨大的提升，哪怕对于那些拥有最快网速的访客。</p> + +<h2 id="Tips" name="Tips">Tips</h2> + +<h3 id=".E5.87.8F.E5.B0.8F.E9.A1.B5.E9.9D.A2.E7.9A.84.E5.A4.A7.E5.B0.8F" name=".E5.87.8F.E5.B0.8F.E9.A1.B5.E9.9D.A2.E7.9A.84.E5.A4.A7.E5.B0.8F">减小页面的大小</h3> + +<p>直至今日，页面的大小仍是页面加载性能的最重要因素。</p> + +<p>通过压缩——排除不必要空格，注释，和将脚本、CSS放入外部文件等减小页面的大小，可以在页面结构改变很小的情况下提高下载性能。</p> + +<p>诸如 <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> 这类的工具可以从有效的HTML源文件中自动截去行首空格和额外的空行，其它工具则可以通过重新格式化源代码来压缩JavaScript或者通过混淆源码将长<font color="#000000" face="Microsoft YaHei"><span style="font-size: 13px; line-height: normal; white-space: nowrap;">标识符</span></font>替换为短标识符来减小文件大小。</p> + +<h3 id="Minimize_the_number_of_files" name="Minimize_the_number_of_files">最小化文件数量</h3> + +<p>减少一个页面引用的文件数量可以降低在下载一个页面的过程中需要的<a href="https://developer.mozilla.org/en-US/docs/HTTP">HTTP</a>请求数量，从而减少这些请求的收发时间。</p> + +<p>根据其缓存设置，浏览器可能会为每个所引用的文件发送一个带 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/If-Modified-Since">If-Modified-Since</a> 的请求给网络服务器，以查询这些文件自上次加载后是否有被修改。查询引用文件上次修改时间会花费太多时间，导致网页首屏延迟，这是因为在渲染页面之前浏览器必须确认每个文件的修改时间。</p> + +<p>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.</p> + +<h3 id="使用_CDN">使用 CDN</h3> + +<p>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.</p> + +<p>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 <a href="http://www.webperformancetoday.com/2012/04/02/latency-101-what-is-latency-and-why-is-it-such-a-big-deal/">latency</a>.</p> + +<p>Further reading:</p> + +<ul> + <li><a href="https://www.incapsula.com/cdn-guide/what-is-cdn-how-it-works.html">Understanding CDNs</a></li> +</ul> + +<h3 id="Reduce_domain_lookups" name="Reduce_domain_lookups">减少域名查找</h3> + +<p>每个独立的域名都会消耗DNS查找的时间，页面加载时间会随着独立域名数量、CSS链接数量、JavaScript还有图片资源的数量增加而增加。</p> + +<p>这条可能算不上实用，然而，在你的页面中尽量少的使用来自不同域名的资源链接。</p> + +<ul> +</ul> + +<h3 id="Cache_reused_content" name="Cache_reused_content">缓存重用的内容</h3> + +<p>确保任何内容可以被缓存，并且拥有一个合理的有效期。</p> + +<p>特别要注意 <code>Last-Modified</code> 头，它会让页面高效的缓存。 自上次修改之后，这部分 header 指示将信息传递给用户代理（要加载这些信息的文件）。大部分网页服务器会自动追加 <code>Last-Modified</code> header 部分到静态页面（如 <code>.html</code>，<code>.css</code>），基于上次修改的日期储存在文件系统中。至于动态页面（如 <code>.php</code>，<code>.aspx</code>），便无法做到，这部分请求的头也就不会被发送出去。</p> + +<p>所以，特别是动态产生的页面，花点时间研究一下这个课题会是有益的。或许有些什么关联，无论怎样，这么做在那些不能被缓存的网页中都会节省很多的页面请求。</p> + +<p>更多信息：</p> + +<ol> + <li><a href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li> + <li><a href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li> + <li><a href="http://en.wikipedia.org/wiki/HTTP_ETag">HTTP ETag on Wikipedia</a></li> + <li><a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html">Caching in HTTP</a></li> +</ol> + +<h3 id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">高效地排列页面组件</h3> + +<p>在页面最初显示时，会首先下载页面内容以及所需的CSS和JavaScript，这样在页面加载时用户可以最快获得外观的反馈。由于内容通常都是文本，有利于在传输过程中压缩，因此给用户以更快的响应。</p> + +<p>页面中任何具有动态特性的资源需要在页面被完全加载后才可以使用，所以最好在初始化时关闭动态特性（disable dynamic features ），等页面加载完后再打开它。这样JavaScript就会在网页内容之后才加载，有助于提升页面加载的整体表现。</p> + +<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">减少内联脚本的数量</h3> + +<p>内联脚本在页面加载过程中消耗很多资源，因为解析器认为内联脚本会改变页面结构。通常，尽量少的使用内联脚本和减少用<code>document.write()</code>来输出内容，在一定情况下可以加速整体页面的载入。现在浏览器中一般使用现代的 W3C DOM 方法操作页面内容，优于使用<code>document.write()</code>的传统方法。</p> + +<h3 id="Use_modern_CSS_and_valid_markup" name="Use_modern_CSS_and_valid_markup">使用现代CSS和合法标记</h3> + +<p>使用现代CSS减少标记（markup）的用量，可以减少对（spacer）图片的需求。在布局方面，图片通常可以用风格化的文本（text）来替代，这样会“节省”许多资源。</p> + +<p>使用合法标记还有其它优点。首先，浏览器在解释HTML时无需做错误校正（除了一些哲理性的问题，例如，是允许用户输入格式不一致，而后再用程序“校准”或统一化呢？ 还是加强约束规则，限制用户输入的格式？）。</p> + +<p>再者，合法标记可以让那些给你的网站做预处理的工具功能最大化。例如，<a class="external external-icon" href="http://tidy.sourceforge.net/">HTML Tidy</a> 可以移除空白（whitespace）和可选的末尾标记（ending tags）；然而，在有严重的错误标记的网页中这些工具便无法工作。</p> + +<h3 id="Chunk_your_content" name="Chunk_your_content">给内容分块</h3> + +<p>使用 table 布局是一种不应该再采用的传统方法，而应运用 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, 或 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">grids</a> 来布局。</p> + +<p>当然，table 仍是不失为一种有效的展示表格数据的方式。为了帮助浏览器更快速的渲染你的页面，你应该避免嵌套 table。</p> + +<p>相较于这种深度的嵌套：</p> + +<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span> + ... + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span></code></pre> + +<p>用下图这样的非嵌套结构更好一些：</p> + +<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span>...<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span>...<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span>...<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span></code></pre> + +<p>可参见 <a href="https://www.w3.org/TR/css-flexbox-1/" title="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout</a> 和 <a href="https://www.w3.org/TR/css-grid-1/" title="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout</a> 规范。</p> + +<h3 id="Minify_and_compress_SVG_assets">Minify and compress SVG assets</h3> + +<p>SVG produced by most drawing applications often contains unnecessary metadata which can be removed. Configure your servers, apply gzip compression for SVG assets.</p> + +<h3 id="Minify_and_compress_your_images">Minify and compress your images</h3> + +<p>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 <a href="https://compressjpeg.com/">Compress Jpeg</a> or <a href="https://tinypng.com/">Tiny PNG</a>,.</p> + +<h3 id="Specify_sizes_for_images_and_tables" name="Specify_sizes_for_images_and_tables">指定图像和表格的大小</h3> + +<p>如果浏览器可以即时决定你的照片（images）和表格（tables）宽高，它在展示网页时就不必进行内容重新排版。这不仅可以加速网页的显示，还能在网页完成加载的过程中防止恼人的布局改变。因此，图片的 <code>height</code> 和 <code>width</code> 应尽可能确定下来。</p> + +<p>表格可以使用 CSS 选择器：综合性能：</p> + +<pre class="line-numbers language-html"><code class="language-html">table-layout: fixed;</code></pre> + +<p>用 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col"><col></a></code> 和 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code> 元素来指定列宽。</p> + +<h3 id="Choose_your_user_agent_requirements_wisely" name="Choose_your_user_agent_requirements_wisely">合理的选择 user-agent</h3> + +<p>为使页面设计得到极大提升，应确保在工程中指定一个合理的user-agent。不要奢求你的内容在所有浏览器中都完美的展现，特别是在那些低版本的浏览器中。</p> + +<p>理想情况下，你的页面运行的最小环境要基于现代浏览器，这个浏览器起码要支持一些相关的标准（如 html5 标准）。可以是最近版本的火狐，IE，谷歌Chrome，Opera还有Safari。</p> + +<p>需要注意一下，这篇文章当中的许多tips都是些技术性常识，可以不必担心浏览器的支持需求而应用到任何user-agent和网页中去。</p> + +<h3 id="尽可能使用_async_和_defer">尽可能使用 async 和 defer</h3> + +<p>确保 JavaScript 脚本兼容 <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> 和 <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a>，任何时候都要尽可能使用 <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> ，特别是当你有较多的 script 标签时。</p> + +<p>这样在加载 JavaScript 的过程中页面就不会重新绘制，否则，浏览器在不具有这些特性的 script 标签后就不会重绘任何东西。</p> + +<p>注意：这些特性在页面第一次加载时会有所帮助，你可以这样用但不能指靠它在所有的浏览器中起作用。如果你遵循指南（guidelines）写出了非常优秀的 JavaScript 代码，也不必要再去修改它了。</p> + +<h2 id="Example_page_structure" name="Example_page_structure">页面结构示例</h2> + +<p>· <code>{{htmlelement('html')}}</code></p> + +<dl> + <dd>· <code>{{htmlelement('head')}}</code></dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>{{htmlelement('link')}} </code>...<br> + CSS 文件用来修饰页面外观。在调试维护中把不相关的 CSS 拆分在不同文件中，且尽量减少文件的数量可以提高性能。</dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>{{htmlelement('script')}} </code>...<br> + JavaScript 文件用来实现<strong>页面加载时需要的函数</strong>，而避免在页面加载后才能运行的 JavaScript。</dd> + <dd>在调试维护中把不相关的 JavaScript 拆分在不同文件中，且尽量减少文件的数量可以提高性能。</dd> + </dl> + </dd> +</dl> + +<dl> + <dd>· <code>{{htmlelement('body')}}</code></dd> + <dd>· 用户能在完整页面下载完之前就可以看到的页面小分块 ( <code>{{htmlelement('header')}}</code>/ <code>{{htmlelement('main')}}/</code> <code>{{htmlelement('table')}}</code>) 。</dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>{{htmlelement('script')}} </code>...</dd> + <dd>DHTML 脚本通常在页面完全加载或者所有必要的对象（objects）已初始化完毕之后才能运行。没有必要在页面内容之前加载这些脚本，这只会拖慢页面加载和初始化的体验。</dd> + <dd>在调试维护中把不相关的 script 拆分在不同文件中，且尽量减少文件的数量可以提高性能。</dd> + <dd>如有图像用到了反转效果，你应该在页面内容下载完后预加载这些图像。</dd> + </dl> + </dd> +</dl> + +<h2 id="Related_Links" name="Related_Links">相关链接</h2> + +<ul> + <li>书籍： <a href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li> + <li>非常棒、讲的很全 <a class="external external-icon" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li> + <li>用来分析和优化的工具: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li> +</ul> + +<div class="originaldocinfo"> +<h3 id=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81.AF" name=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81.AF">文章原始信息</h3> + +<ul> + <li>作者：Bob Clary, Technology Evangelist, Netscape Communications</li> + <li>最后更新：Published 2003年4月4日</li> + <li>版权信息：Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>注意：This reprinted article was originally part of the DevEdge site.</li> +</ul> +</div> + +<div class="noinclude"></div> + +<p>{{ 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" } ) }}</p> 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 +--- +<p>{{LearnSidebar}}</p> + +<p><a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a>是具有扩展性的设计，它初衷是数据应与特定的元素相关联，但不需要任何定义。<a href="/en-US/docs/Web/HTML/Global_attributes#data-*">data-* 属性</a>允许我们在标准内于HTML元素中存储额外的信息，而不需要使用类似于 <a href="/en-US/docs/Web/API/Element.classList">classList</a>，标准外属性，DOM额外属性或是 <a href="/en-US/docs/Web/API/Node.setUserData">setUserData</a> 之类的技巧。</p> + +<h2 id="HTML_语法">HTML 语法</h2> + +<p>语法非常简单。所有在元素上以<code>data-</code>开头的属性为数据属性。比如说你有一篇文章，而你又想要存储一些不需要显示在浏览器上的额外信息。请使用data属性：</p> + +<pre class="brush: html"><article + id="electriccars" + data-columns="3" + data-index-number="12314" + data-parent="cars"> +... +</article></pre> + +<h2 id="JavaScript_访问">JavaScript 访问</h2> + +<p>在外部使用<a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>去访问这些属性的值同样非常简单。你可以使用{{domxref("Element.getAttribute", "getAttribute()")}}配合它们完整的HTML名称去读取它们，但标准定义了一个更简单的方法：{{domxref("DOMStringMap")}}你可以使用{{domxref("HTMLElement.dataset", "dataset")}}读取到数据。</p> + +<p>为了使用<code>dataset</code>对象去获取到数据属性，需要获取属性名中<code>data-</code>之后的部分(要注意的是破折号连接的名称需要改写为骆驼拼写法(如"index-number"转换为"indexNumber"))。</p> + +<pre class="brush: js">var article = document.querySelector('#electriccars'); + +article.dataset.columns // "3" +article.dataset.indexNumber // "12314" +article.dataset.parent // "cars"</pre> + +<p>每一个属性都是一个可读写的字符串。在上面的例子中，<code>article.dataset.columns = 5</code>.将会调整属性的值为5。</p> + +<h2 id="CSS_访问">CSS 访问</h2> + +<p>注意，data设定为HTML属性，他们同样能被<a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>访问。比如你可以通过<a href="/en-US/docs/Web/CSS/content" title="/en-US/docs/Web/CSS/content">generated content</a>使用函数{{cssxref("attr")}}来显示data-parent的内容：</p> + +<pre class="brush: css">article::before { + content: attr(data-parent); +}</pre> + +<p>你也同样可以在CSS中使用<a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute_selectors">属性选择器</a>根据data来改变样式：</p> + +<pre class="brush: css">article[data-columns='3'] { + width: 400px; +} +article[data-columns='4'] { + width: 600px; +}</pre> + +<p>你可以在这个<a href="http://jsbin.com/ujiday/2/edit">JSBin </a>里看到全部演示。</p> + +<p>Data属性同样可以存储不断变化的信息，比如游戏的得分。使用CSS选择器与JavaScript去访问可以让你得到花俏的效果，这里你并不需要用常规的编写方案来编写代码。有关使用生成内容和CSS转换（<a href="https://jsbin.com/atawaz/3/edit">JSBin示例</a>）的示例，请参阅此<a href="https://www.youtube.com/watch?v=On_WyUB1gOk">视频</a>。</p> + +<p>数据值是字符串。必须在选择器中引用数值才能使样式生效。</p> + +<h2 id="Issues">Issues</h2> + +<p>不要在data attribute里储存需要显示及访问的内容，因为一些其他的技术可能访问不到它们。另外爬虫不能将data attribute的值编入索引中。</p> + +<p>IE的支持度及显示效果是最主要讨论的问题。IE11+支持这个标准，但所有更早期的版本都不支持<a href="http://caniuse.com/#feat=dataset">dataset</a>。为了支持IE10及以下的版本，你必须使用{{domxref("Element.getAttribute", "getAttribute()")}} 来访问。另外，<a href="http://jsperf.com/data-dataset">读取 data-attributes的行为</a>相比JS存储数据会慢。使用dataset 会比使用getAttribute()读取数据来得慢。</p> + +<p>尽管如此,对于那些与元素相关的数据,这依然是一个很好的解决方案.</p> + +<p>在FireFox 49.0.2(其他版本也有可能)中,javascript将无法读出包含1022个及以上字符的data属性(EcmaScript 4).</p> + +<h2 id="参阅" style="line-height: 30px; font-size: 2.14285714285714rem;">参阅</h2> + +<div> </div> + +<ul> + <li>该文章源自 <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li> + <li>在 SVG 2中也同样支持自定义data属性; 请参看{{domxref("SVGElement.dataset")}} 和{{SVGAttr("data-*")}}.</li> + <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li> +</ul> diff --git a/files/zh-cn/learn/html/introduction_to_html/文件和网站结构/index.html b/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.html index 63c421487b..63c421487b 100644 --- a/files/zh-cn/learn/html/introduction_to_html/文件和网站结构/index.html +++ b/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.html diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/其他嵌入技术/index.html b/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html index c66ca6499e..c66ca6499e 100644 --- a/files/zh-cn/learn/html/multimedia_and_embedding/其他嵌入技术/index.html +++ b/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html diff --git a/files/zh-cn/learn/javascript/异步/async_await/index.html b/files/zh-cn/learn/javascript/asynchronous/async_await/index.html index 739ab63602..739ab63602 100644 --- a/files/zh-cn/learn/javascript/异步/async_await/index.html +++ b/files/zh-cn/learn/javascript/asynchronous/async_await/index.html diff --git a/files/zh-cn/learn/javascript/异步/choosing_the_right_approach/index.html b/files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html index 276d815b85..276d815b85 100644 --- a/files/zh-cn/learn/javascript/异步/choosing_the_right_approach/index.html +++ b/files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html diff --git a/files/zh-cn/learn/javascript/异步/概念/index.html b/files/zh-cn/learn/javascript/asynchronous/concepts/index.html index 6e59cda54b..6e59cda54b 100644 --- a/files/zh-cn/learn/javascript/异步/概念/index.html +++ b/files/zh-cn/learn/javascript/asynchronous/concepts/index.html diff --git a/files/zh-cn/learn/javascript/异步/index.html b/files/zh-cn/learn/javascript/asynchronous/index.html index 3d89f5a060..3d89f5a060 100644 --- a/files/zh-cn/learn/javascript/异步/index.html +++ b/files/zh-cn/learn/javascript/asynchronous/index.html diff --git a/files/zh-cn/learn/javascript/异步/简介/index.html b/files/zh-cn/learn/javascript/asynchronous/introducing/index.html index 1792c0e086..1792c0e086 100644 --- a/files/zh-cn/learn/javascript/异步/简介/index.html +++ b/files/zh-cn/learn/javascript/asynchronous/introducing/index.html diff --git a/files/zh-cn/learn/javascript/异步/promises语法/index.html b/files/zh-cn/learn/javascript/asynchronous/promises/index.html index 665bda8129..665bda8129 100644 --- a/files/zh-cn/learn/javascript/异步/promises语法/index.html +++ b/files/zh-cn/learn/javascript/asynchronous/promises/index.html diff --git a/files/zh-cn/learn/javascript/异步/超时和间隔/index.html b/files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html index 2cf83da82c..2cf83da82c 100644 --- a/files/zh-cn/learn/javascript/异步/超时和间隔/index.html +++ b/files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html diff --git a/files/zh-cn/learn/javascript/building_blocks/相片走廊/index.html b/files/zh-cn/learn/javascript/building_blocks/image_gallery/index.html index 22101b20ba..22101b20ba 100644 --- a/files/zh-cn/learn/javascript/building_blocks/相片走廊/index.html +++ b/files/zh-cn/learn/javascript/building_blocks/image_gallery/index.html diff --git a/files/zh-cn/learn/javascript/objects/向“弹跳球”演示程序添加新功能/index.html b/files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.html index 2730489d15..2730489d15 100644 --- a/files/zh-cn/learn/javascript/objects/向“弹跳球”演示程序添加新功能/index.html +++ b/files/zh-cn/learn/javascript/objects/adding_bouncing_balls_features/index.html diff --git a/files/zh-cn/learn/javascript/objects/测试你的技能_colon_面向对象的javascript/index.html b/files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.html index 8fd0cc3256..8fd0cc3256 100644 --- a/files/zh-cn/learn/javascript/objects/测试你的技能_colon_面向对象的javascript/index.html +++ b/files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.html diff --git a/files/zh-cn/learn/performance/感知性能/index.html b/files/zh-cn/learn/performance/perceived_performance/index.html index 3740a4c62c..3740a4c62c 100644 --- a/files/zh-cn/learn/performance/感知性能/index.html +++ b/files/zh-cn/learn/performance/perceived_performance/index.html 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 +--- +<h2 id="Background" name="Background">Background</h2> + +<p>默认情况下，许多web服务器会为那些未知内容类型的文件配置一个默认MIME类型<code>text/plain</code> 或者<code>application/octet-stream</code> 。当一种新的内容类型被创造或者被添加到web服务器上，web管理者在添加它到web服务器配置中可能会失败。主要原因是用户使用Gecko-based 的浏览器，而这种浏览器只相信由web服务器和web应用所发布的MIME类型</p> + +<h3 id="What_are_MIME_types.3F" name="What_are_MIME_types.3F">What are MIME types?</h3> + +<p>MIME类型描述了邮件或者web服务器或者web应用中的媒体内容的类型，其目的是为了指导web浏览器对媒体内容的处理和表现。MIME类型的示例如下：</p> + +<ul> + <li><code>text/html</code> 对于一般网页</li> + <li><code>text/plain</code> 对于一般文本</li> + <li><code>text/css</code> 对于级联样式表</li> + <li><code>text/javascript</code> 对于脚本</li> + <li><code>application/octet-stream</code> 意味着“下载这个文件”</li> + <li><code>application/x-java-applet</code> 对于 Java applets</li> + <li><code>application/pdf</code> 对于 PDF 文档</li> +</ul> + +<h3 id="Technical_Background" name="Technical_Background">Technical Background</h3> + +<p>完整的MIME类型列表可在 <a class="external" href="http://www.iana.org/assignments/media-types/index.html">IANA | MIME Media Types</a> 查看.</p> + +<p>在<a class="external" href="http://www.w3.org/Protocols/HTTP/1.1/spec.html">HTTP specification</a> 中定义了能够描述在web中使用的媒体类型的MIME超集。</p> + +<h3 id="Why_are_correct_MIME_types_important.3F" name="Why_are_correct_MIME_types_important.3F">Why are correct MIME types important?</h3> + +<p><img alt="Example of an incorrect MIME type result" class="internal" src="/@api/deki/files/729/=Incorrect-mime-screen.jpg" style="float: right;"> 假如web服务器或者应用报告内容的MIME类型不正确，根据HTTP规范，或许发起人想要处理和显示内容通过他所规定的MIME类型，因此web浏览器无法采取任何措施。</p> + +<p>对于某些浏览器，例如IE，它尝试允许web服务器对于错误配置通过其源码猜测它可能的正确MIME类型。</p> + +<p>这种做法将会避免许多由web管理员他们的错误。因为当内容的MIME类型错误，IE将会用可能正确的MIME类型来继续处理内容。例如你设置一个<code>img</code>的类型为<code>text/plain</code> ,IE可能会设置它为正确的MIME类型<code>images/*</code></p> + +<p>出于安全原因，使用正确的MIME类型的服务内容也是重要的； 恶意内容可能会影响用户的计算机，假装它是一个安全类型文档，实际上不是。</p> + +<div class="note"> +<p><strong>注意:</strong> 从历史角度, 只要HTML文档请求处理CSS文件 ，Firefox 能够正常加载CSS即使它设置了错误的MIME类型。处于安全原因, {{ gecko("2.0") }} 对于从请求文档不同来源加载的样式表，将不再这样做。如果CSS来自于不同来源，你必须设置它的正确MIME类型 (<code>text/css</code>).</p> + +<p>Gecko 1.9.1.11 (Firefox 3.5.11) 和 Gecko 1.9.2.5 (Firefox 3.6.5) 同样实施这种安全措施，但是提高它的实用性。如果样式表中的第一行看起来是一个很好的CSS构造，则存在允许加载的临时启发式算法。在Firefox 4中已经删除了启发式，您必须正确设置<code>text/css</code> 的MIME类型，才能够识别CSS。</p> +</div> + +<h2 id="Why_browsers_should_not_guess_MIME_types" name="Why_browsers_should_not_guess_MIME_types">为何浏览器不应该猜测 MIME 类型</h2> + +<p>除了违返了HTTP规范，让浏览器去猜测正确的MIME类型是一个差劲的策略。原因如下</p> + +<h4 id="Loss_of_control" name="Loss_of_control">失去控制</h4> + +<p>假如浏览器忽略报告的MIME类型，web管理员和用户不在对内容如何进行处理有发言权了。</p> + +<p>例如，面对web开发员的网址可能希望发送某些实例HTML文档，同时通希望能够以 <code>text/html</code>或者 <code>text/plain</code> 的MIME类型进行数据的处理和显示 或者 作为一个源代码。如果浏览器猜测它的正确MIME类型为 <code>text/html</code> 那么开发员不在有权利进行选择了。</p> + +<h4 id="Security" name="Security">安全性</h4> + +<p>一些内容类型，例如可执行程序，本质上是不安全的。原因是经过规范化的MIME类型都有经过严格规定浏览器如何对这类类型的文件进行操作。一个可执行程序不能够在用户的电脑浏览器上执行，但可以通过弹出会话询问是否下载这个文件</p> + +<p>MIME类型猜测导致IE浏览器的安全漏洞（通过利用IE能够将错误的MIME类型 修改为正确的类型）。这绕过了正常的下载对话框，导致InternetExplorer猜测内容是可执行程序，然后在用户的计算机上运行。</p> + +<h2 id="如何确定服务器发送内容的_MIME_类型">如何确定服务器发送内容的 MIME 类型</h2> + +<p>通过开发者工具的 ContentType 查看MIME类型。</p> + +<p>根据标准，通过一个 <code>meta</code> 标签来设置MIME类型 例如 <code><span class="nowiki"><meta http-equiv="Content-Type" content="text/html"></span></code><span class="nowiki"> 当包含</span>{{HTTPHeader("Content-Type")}} 时则忽略 <code>meta</code> 标签</p> + + + +<h2 id="如何为你的内容确定正确的_MIME_类型">如何为你的内容确定正确的 MIME 类型</h2> + +<p>这里有几种方法来确定文件的正确MIME类型</p> + +<ol> + <li>如果你的内容是通过供应商软件应用创建的，那么你可以阅读供应商文档确认不同媒体文件的MIME值</li> + <li>通过查看完整的MIME类型表 <a class="external" href="http://www.iana.org/assignments/media-types/index.html">IANA | MIME Media Types registry</a> </li> + <li>如果使用插件netscape gecko显示媒体类型，请安装插件，然后查看“帮助”>“关于插件”菜单，以查看哪些MIME类型与媒体类型相关联。</li> + <li>搜索文件扩展名 <a class="external" href="http://filext.com/">FILExt</a> 或者<a class="external" href="http://www.file-extensions.org/">File extensions reference</a> ，确认扩展名和哪种类型的MIME相关联</li> +</ol> + +<h2 id="如何设置服务器以发送正确的MIME类型">如何设置服务器以发送正确的MIME类型</h2> + +<p>基本的方法是配置你的服务器发送正确的HTTP <code>ContentType</code>类型给每个文档</p> + +<ul> + <li>如果您正在使用Apache Web服务器，只需将此示例.htaccess文件复制到包含要使用正确MIME类型发送的文件的目录中。 如果你有一个完整的文件子目录，只需将文件放在父目录中；您不需要将它放在每个子目录中。</li> + <li>如果您使用的是Microsoft IIS, 请参阅<a href="http://www.iana.org/assignments/media-types/index.html">IANA | MIME Media Types registry</a>这篇文章。</li> + <li>如果您使用服务器端脚本生成内容，通常可以在脚本顶部附近添加一行。 您可以从Perl，PHP，ASP或Java提供HTML以外的内容 - 只需相应地更改MIME类型即可。 + <ul> + <li>对于 Perl CGI，你应该在文档其他行之前输出 <code>print "Content-Type: text/html\n\n";</code>。如果您正在使用CGI模块, 你可以使用 <code>print $cgi->header('text/html');</code> 代替, 其中 <code>$cgi</code> 是对CGI实例的引用。</li> + <li>对于 PHP，你应该在文档其他行之前输出 <code>header('Content-Type: text/html');</code>。</li> + <li>对于 ASP, 你应该在文档其他行之前输出<code>response.ContentType = "text/html";</code>。</li> + <li>对于 Java servlet, 你需要在<code>doGet</code> 或 <code>doPost</code> 方法之前输出<code>response.setContentType("text/html");</code> ，其中 <code>response</code> 是对 <code>HttpServletResponse</code>的引用。</li> + </ul> + </li> +</ul> + +<h3 id="Related_Links" name="Related_Links">Related Links</h3> + +<ul> + <li><a href="/en/Incorrect_MIME_Type_for_CSS_Files" title="en/Incorrect_MIME_Type_for_CSS_Files">Incorrect MIME Type for CSS Files</a></li> + <li><a class="external" href="http://www.iana.org/assignments/media-types/index.html">IANA | MIME Media Types</a></li> + <li><a class="external" href="http://www.w3.org/Protocols/HTTP/1.1/spec.html">Hypertext Transfer Protocol — HTTP/1.1</a></li> + <li><a class="external" href="http://support.microsoft.com/default.aspx?sd=msdn&scid=kb;en-us;293336">Microsoft - 293336 - INFO: WebCast: MIME Type Handling in Microsoft Internet Explorer</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/networking/moniker/overview/appendix_a.asp">Microsoft - Appendix A: MIME Type Detection in Internet Explorer</a></li> + <li><a class="external" href="http://www.microsoft.com/windows/ie/downloads/critical/q290108/">Microsoft - Security Update, March 29, 2001</a></li> + <li><a class="external" href="http://www.microsoft.com/windows/ie/downloads/critical/Q313675/">Microsoft - Security Update, December 13, 2001</a></li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + +<ul> + <li>Author: Bob Clary, date: 20 Feb 2003</li> +</ul> +</div> diff --git a/files/zh-cn/learn/server-side/django/管理站点/index.html b/files/zh-cn/learn/server-side/django/admin_site/index.html index d3252d84c5..d3252d84c5 100644 --- a/files/zh-cn/learn/server-side/django/管理站点/index.html +++ b/files/zh-cn/learn/server-side/django/admin_site/index.html diff --git a/files/zh-cn/learn/server-side/django/开发环境/index.html b/files/zh-cn/learn/server-side/django/development_environment/index.html index fb6041621f..fb6041621f 100644 --- a/files/zh-cn/learn/server-side/django/开发环境/index.html +++ b/files/zh-cn/learn/server-side/django/development_environment/index.html diff --git a/files/zh-cn/learn/server-side/django/主页构建/index.html b/files/zh-cn/learn/server-side/django/home_page/index.html index 0527ba8731..0527ba8731 100644 --- a/files/zh-cn/learn/server-side/django/主页构建/index.html +++ b/files/zh-cn/learn/server-side/django/home_page/index.html diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/介绍/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html index 3975354417..3975354417 100644 --- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/介绍/index.html +++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/可访问性/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html index 704f595fb4..704f595fb4 100644 --- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/可访问性/index.html +++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/测试策略/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html index fb01cd2843..fb01cd2843 100644 --- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/测试策略/index.html +++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html 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 ---- -<p> 当我们在学习网页设计时，许多人都希望尽快建设一个属于自己的网站。为了让你建站之路更平坦，我们已经缩小了你所需要的最低限度的知识。</p> - -<p>我们建议你先从这儿的文章开始 ，认真学习它们，如果你在学习中有关术语的问题，请用我们的<a href="/en-US/docs/Glossary">词汇表</a>.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row" style="text-align: center;"> </th> - <th scope="col" style="text-align: center;">理论<br> - 知识</th> - <th scope="col" style="text-align: center;">技术<br> - 知识</th> - <th scope="col" style="text-align: center;">实践<br> - 知识</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row" style="text-align: center;">1</th> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Thinking_before_coding">开始你的web项目</a></strong><br> - <em>在这篇文章中我们首先讨论了在任何一个项目中你所必要的一步：确定你要完成什么和为什么.</em></td> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">2</th> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/How_the_Internet_works">英特网是如何工作的</a></strong><br> - <em>这篇文章将为你解释什么是英特网以及它是如何工作的。</em></td> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">3</th> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine"> 了解网页、网站、服务器、以及搜索引擎之间的不同</a></strong></td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/What_is_a_web_server">网络服务器是什么?</a></strong><br> - <em>在这篇文章中，我们将要论述什么是网络服务器，它们是如何运作的以及它们为什么如此重要.</em></td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/What_software_do_I_need">我们需要什么软件（它们用来干什么）?</a></strong><br> - <em>在文中我们将要介绍你在编辑网页，上传文件，以及管理网站中你需要什么软件。</em></td> - </tr> - <tr> - <th scope="row" style="text-align: center;">4</th> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Understanding_links_on_the_web">了解网络上的链接</a></strong><br> - <em>在文章中, 我们将详细的论述网络链接, 这个在万维网中相当重要的一个角色.</em></td> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">5</th> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Understanding_URLs">了解URLs以及它们的构成</a></strong><br> - <em>在这篇文章中，我们将介绍URLs是什么（同一资源定位器）以及它们是如何构成的。</em></td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Understanding_domain_names">认识域名</a></strong><br> - <em>在这篇文章中，我们将对域名留下深刻印象：域名是什么，它们如何构成，以及怎样获取一个域名。</em></td> - <td style="vertical-align: top;"> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">6</th> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Anatomy_of_a_web_page">剖析一个网页</a></strong><br> - <em>当你在做你自己的网站时，你最好知道一些普通的设计</em>.</td> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/How_much_does_it_cost">在网上做些什么花费多少钱？</a></strong><br> - <em>涉及到互联网的东西并不像它看起来那么便宜。在文中我们将论述你可能花费多少钱以及为什么。</em></td> - </tr> - <tr> - <th scope="row" style="text-align: center;">7</th> - <td style="vertical-align: top;"><a href="/en-US/docs/Learn/The_basics_of_web_design">设计之外，基础的网页设计</a></td> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">选择下载安装一个编辑器</a></strong><br> - <em>在这篇文章中，我们强调一些事情关于下载安装编译器用于网站开发。</em></td> - </tr> - <tr> - <th scope="row" style="text-align: center;">8</th> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">创建一个基本的工作环境</a></strong><br> - <em>这篇文章让你用工作站建立你的网站</em></td> - </tr> - <tr> - <th scope="row" style="text-align: center;">9</th> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/HTML/Write_a_simple_page_in_HTML">用HTML写一个简单的网页</a></strong><br> - <em>学习如何创造一个简单的网页。</em></td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Open_a_file_in_a_browser">打开文件在你的浏览器中r</a></strong><br> - <em>这篇文章讲解了在浏览器中通过各种方式接入文件，以及这种正确的方式为什么如此重要。</em></td> - </tr> - <tr> - <th scope="row" style="text-align: center;">10</th> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/HTML/HTML_tags">什么是HTML标签&如何使用它们</a></strong><br> - <em>这篇文章包含了 <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/HTML" title="HTML: The HyperText Markup Language (HTML) is a descriptive language specifically designed to structure web pages.">HTML</a> 基础:什么是标签以及如何使用它们。</em></td> - <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Upload_files_to_a_web_server">上传文件到服务器</a></strong><br> - <em>本文介绍了如何使用FTP工具发布你的网站</em></td> - </tr> - <tr> - <th scope="row" style="text-align: center;">11</th> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"> </td> - <td style="vertical-align: top;"> - <p><strong><a href="/en-US/docs/Learn/Checking_that_your_web_site_is_working_properly">检查你的网站是否工作正常</a></strong><br> - <em>本指南概述了一些找到并修复常见错误的策略</em></p> - </td> - </tr> - </tbody> -</table> - -<p>这些是都是你需要的第一个网站学习的基本知识，但如果你想做出更高端更专业的网站，请继续往下读：</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row" style="text-align: center;"> </th> - <th scope="col" style="text-align: center;">理论<br> - 知识</th> - <th scope="col" style="text-align: center;">技术<br> - 知识</th> - <th scope="col" style="text-align: center;">实践<br> - 知识</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row" style="text-align: center;">12</th> - <td><a href="/en-US/docs/Learn/What_do_people_need_for_viewing_my_website">人们需要什么才能查看你的网站</a></td> - <td> </td> - <td> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">13</th> - <td> </td> - <td><strong><a href="/en-US/docs/Learn/CSS/Using_CSS_in_a_web_page">在你的网页中使用CSS</a></strong><br> - <em>本文将介绍如何使用CSS样式表来改变你的网页样式</em></td> - <td> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">14</th> - <td><strong><a href="/en-US/docs/Learn/What_is_accessibility">什么是无障碍性网页</a></strong><br> - <em>本文介绍了无障碍性网页背后的基本概念。</em></td> - <td><strong><a href="/en-US/docs/Learn/CSS/CSS_properties">什么是CSS属性以及该如何使用它们</a></strong><br> - <em>CSS特性应该如何使用。本文介绍了图和使用CSS属性选择器应用HTML元素</em></td> - <td> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">15</th> - <td><strong><a href="/en-US/docs/Learn/Design_for_all_types_of_users_101">为各类用户设计101</a></strong><br> - <em>本文提供了基本的无障碍性网站技巧</em></td> - <td> - <p><strong><a href="/en-US/docs/Learn/CSS/Basic_text_styling_in_CSS">CSS基本的文字排版</a></strong><br> - <em>最常见的CSS属性概述</em></p> - </td> - <td> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">16</th> - <td> </td> - <td><a href="/en-US/docs/Learn/Using_images">使用图片</a></td> - <td> </td> - </tr> - <tr> - <th scope="row" style="text-align: center;">17</th> - <td><a href="/en-US/docs/Learn/Common_pitfalls_to_avoid_in_web_design">避开在网页设计中的常见陷阱</a></td> - <td><a href="/en-US/docs/Learn/Basics_of_UX_Design">用户体验（UX）基础</a></td> - <td><a href="/en-US/docs/Learn/Design_of_navigation_menus">设计导航菜单</a></td> - </tr> - </tbody> -</table> - -<p> </p> 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 ---- -<p>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!</p> - -<div class="row topicpage-table"> -<div class="section" style="width: 568px;"> -<h2 id="The_basics" style="line-height: 30px; font-size: 2.14285714285714rem;">The basics</h2> - -<p>These are the essentials to follow if you're starting out with Web development.</p> - -<dl> - <dt><a href="/en-US/Learn/tutorial/How_to_build_a_web_site">How to build a website</a></dt> - <dd>This tutorial leads you through all the steps to building a website from scratch.</dd> - <dt><a href="/en-US/Learn/tutorial/Information_Security_Basics">Information Security Basics</a></dt> - <dd>This tutorial explains the basic principles of information security and how to apply them, especially in cryptography.</dd> -</dl> -</div> - -<div class="section" style="width: 593px;"> -<h2 id="In_depth" style="line-height: 30px; font-size: 2.14285714285714rem;">In depth</h2> - -<p>The following provides more advanced use cases for seasoned web developers.</p> - -<dl> - <dt><a href="/en-US/Apps/Quickstart/Build">Building Web Apps</a></dt> - <dd>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!</dd> -</dl> -</div> -</div> - -<p> </p> 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 ---- -<p>请访问 <a class="redirect" href="/zh-CN/docs/learn/%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98">常见问题</a></p> |