diff options
author | Peter Bengtsson <mail@peterbe.com> | 2021-07-28 12:32:33 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-29 00:32:33 +0800 |
commit | 6d3234e3f9ff37cbd766dc00c607828ad6f34a53 (patch) | |
tree | 1fd72c8daa9ab98415f1fc0cad527ce0c5df2552 /files/zh-cn/learn | |
parent | 43a2fc260b557fa0f6f2a3c1d9da94d61fa9b732 (diff) | |
download | translated-content-6d3234e3f9ff37cbd766dc00c607828ad6f34a53.tar.gz translated-content-6d3234e3f9ff37cbd766dc00c607828ad6f34a53.tar.bz2 translated-content-6d3234e3f9ff37cbd766dc00c607828ad6f34a53.zip |
remove link 'title' attributes that's just the 'href' (zh-cn, part 2) (#1730)
* remove link 'title' attributes that's just the 'href' (zh-cn, part 2)
* more fixes
Diffstat (limited to 'files/zh-cn/learn')
9 files changed, 29 insertions, 29 deletions
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 67d3b8f068..338712fd7e 100644 --- a/files/zh-cn/learn/forms/advanced_form_styling/index.html +++ b/files/zh-cn/learn/forms/advanced_form_styling/index.html @@ -24,7 +24,7 @@ original_slug: Learn/HTML/Forms/Advanced_styling_for_HTML_forms <p>HTML和CSS最新的发展扩展了CSS的表现力:</p> <ul> - <li><a href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" rel="external" title="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes">CSS 2.1</a> 非常受限,只给出三个伪类: + <li><a href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" rel="external">CSS 2.1</a> 非常受限,只给出三个伪类: <ul> <li>{{cssxref(":active")}}</li> @@ -32,7 +32,7 @@ original_slug: Learn/HTML/Forms/Advanced_styling_for_HTML_forms <li>{{cssxref(":hover")}}</li> </ul> </li> - <li><a href="http://www.w3.org/TR/css3-selectors/" rel="external" title="http://www.w3.org/TR/css3-selectors/">CSS Selector Level 3</a> 增加了三个与HTML表单相关的伪类: + <li><a href="http://www.w3.org/TR/css3-selectors/" rel="external">CSS Selector Level 3</a> 增加了三个与HTML表单相关的伪类: <ul> <li>{{cssxref(":enabled")}}</li> <li>{{cssxref(":disabled")}}</li> @@ -40,7 +40,7 @@ original_slug: Learn/HTML/Forms/Advanced_styling_for_HTML_forms <li>{{cssxref(":indeterminate")}}</li> </ul> </li> - <li><a href="http://dev.w3.org/csswg/css3-ui/#pseudo-classes" rel="external" title="http://dev.w3.org/csswg/css3-ui/#pseudo-classes">CSS Basic UI Level 3</a> 也增加了几个伪类用于描述小部件的状态: + <li><a href="http://dev.w3.org/csswg/css3-ui/#pseudo-classes" rel="external">CSS Basic UI Level 3</a> 也增加了几个伪类用于描述小部件的状态: <ul> <li>{{cssxref(":default")}}</li> <li>{{cssxref(":valid")}}</li> @@ -53,7 +53,7 @@ original_slug: Learn/HTML/Forms/Advanced_styling_for_HTML_forms <li>{{cssxref(":read-write")}}</li> </ul> </li> - <li><a href="http://dev.w3.org/csswg/selectors4/" rel="external" title="http://dev.w3.org/csswg/selectors4/">CSS Selector Level 4</a> 目前处于积极应用和重点讨论的状态,但并不打算为表单做更多的改善: + <li><a href="http://dev.w3.org/csswg/selectors4/" rel="external">CSS Selector Level 4</a> 目前处于积极应用和重点讨论的状态,但并不打算为表单做更多的改善: <ul> <li>{{cssxref(":user-error")}} 只是改进了伪类{{cssxref(":invalid")}}。</li> </ul> @@ -65,7 +65,7 @@ original_slug: Learn/HTML/Forms/Advanced_styling_for_HTML_forms <p>浏览器厂家在CSS表现力在表单方面的扩展做了一些尝试,在某些情况下,知道什么可用也挺不错的。</p> <div class="warning"> -<p><strong>警告:</strong> 尽管 这些尝试很有趣,但<strong>它们是非标准的,也就是不可靠的。</strong>. 如果你使用它们(也许你并不常用),你要自己承担风险,使用非标准的属性<a href="http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/" title="http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/">对于Web并不是好事</a> 。</p> +<p><strong>警告:</strong> 尽管 这些尝试很有趣,但<strong>它们是非标准的,也就是不可靠的。</strong>. 如果你使用它们(也许你并不常用),你要自己承担风险,使用非标准的属性<a href="http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/">对于Web并不是好事</a> 。</p> </div> <ul> @@ -115,7 +115,7 @@ input[type=search] { <p>{{EmbedLiveSample("Controlling_the_appearance_of_form_elements", 250, 40)}}</p> <div class="note"> -<p><strong>注意:</strong>当我们谈及Web技术的时总是很难预测未来。扩展CSS表现力是很困难的,其他规范也做了一些探索性的工作,如<a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html" rel="external" title="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html">Shadow DOM</a>提供了一些观点。可完全设置样式的表单的问题还远未结束。</p> +<p><strong>注意:</strong>当我们谈及Web技术的时总是很难预测未来。扩展CSS表现力是很困难的,其他规范也做了一些探索性的工作,如<a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html" rel="external">Shadow DOM</a>提供了一些观点。可完全设置样式的表单的问题还远未结束。</p> </div> <h2 id="举例">举例</h2> 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 2430153944..d7958f3c66 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 @@ -678,7 +678,7 @@ beans.oninput = function() { <ul> <li><a href="http://wufoo.com/html5/" rel="external">The Current State of HTML5 Forms</a> by Wufoo</li> - <li><a href="http://www.quirksmode.org/html5/inputs.html" rel="external" title="http://www.quirksmode.org/html5/inputs.html">HTML5 Tests - inputs</a> on Quirksmode (also <a href="http://www.quirksmode.org/html5/inputs_mobile.html" rel="external" title="http://www.quirksmode.org/html5/inputs_mobile.html">available for mobile</a> browsers)</li> + <li><a href="http://www.quirksmode.org/html5/inputs.html" rel="external" title="http://www.quirksmode.org/html5/inputs.html">HTML5 Tests - inputs</a> on Quirksmode (also <a href="http://www.quirksmode.org/html5/inputs_mobile.html" rel="external">available for mobile</a> browsers)</li> </ul> <p>{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p> diff --git a/files/zh-cn/learn/forms/form_validation/index.html b/files/zh-cn/learn/forms/form_validation/index.html index 827e0a905e..440dd8e985 100644 --- a/files/zh-cn/learn/forms/form_validation/index.html +++ b/files/zh-cn/learn/forms/form_validation/index.html @@ -391,7 +391,7 @@ input:focus:invalid { <p>要自定义这些消息的外观和文本, 你必须使用 JavaScript; 不能使用 HTML 和 CSS 来改变.</p> -<p>HTML5 提供 <a href="http://www.w3.org/TR/html5/forms.html#the-constraint-validation-api" rel="external" title="http://www.w3.org/TR/html5/forms.html#the-constraint-validation-api">constraint validation API</a> 来检测和自定义表单元素的状态. 除此之外,他可以改变错误信息的文本. 让我们快速的看一个例子:</p> +<p>HTML5 提供 <a href="http://www.w3.org/TR/html5/forms.html#the-constraint-validation-api" rel="external">constraint validation API</a> 来检测和自定义表单元素的状态. 除此之外,他可以改变错误信息的文本. 让我们快速的看一个例子:</p> <pre class="brush: html"><form> <label for="mail">I would like you to provide me an e-mail</label> @@ -672,7 +672,7 @@ form.addEventListener("submit", function (event) { <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a></li> <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a></li> <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a></li> - <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external" title="http://www.alistapart.com/articles/inline-validation-in-web-forms/">Inline Validation in Web Forms</a></li> + <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li> </ul> </dd> </dl> 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 902b901927..6578fe07b5 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 @@ -311,7 +311,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets </div> <div class="note"> -<p><strong>注意:</strong>创建可复用的组件可能是一件需要些技巧的事情。<a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html" rel="external" title="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html">W3C 网络组件草案</a> 是对这类特定问题的答案之一。<a href="http://x-tags.org/" rel="external">X-Tag 项目 </a>是对这一规格的实验性实现;我们建议你看看它。</p> +<p><strong>注意:</strong>创建可复用的组件可能是一件需要些技巧的事情。<a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html" rel="external">W3C 网络组件草案</a> 是对这类特定问题的答案之一。<a href="http://x-tags.org/" rel="external">X-Tag 项目 </a>是对这一规格的实验性实现;我们建议你看看它。</p> </div> <h3 id="它为什么不生效?">它为什么不生效?</h3> @@ -323,7 +323,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <li>脚本没有加载。这是最常见的情形,特别是在移动端上,在那些网络非常不可靠的地方。</li> <li>脚本是有问题的。你应该总是考虑这种可能性。</li> <li>脚本和第三方脚本冲突。这可能会由用户使用的跟踪脚本和一些书签工具引发。</li> - <li>脚本与一个浏览器的拓展冲突,或者受其影响。 (比如 Firefox 的 <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/" rel="external" title="https://addons.mozilla.org/fr/firefox/addon/noscript/">NoScript</a> 拓展 或者 Chrome 的 <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external">NotScripts</a> 拓展)。</li> + <li>脚本与一个浏览器的拓展冲突,或者受其影响。 (比如 Firefox 的 <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/" rel="external">NoScript</a> 拓展 或者 Chrome 的 <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external">NotScripts</a> 拓展)。</li> <li>用户在使用老旧的浏览器,而且你需要的一些功能没有被支持。当你使用一些最新的 API 时,这种情况会经常发生。</li> </ul> @@ -404,7 +404,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <p>在我们将要构建的代码之中,我们将会使用标准的 DOM API 来完成我们所要做的所有工作。尽管 DOM API 在浏览器中得到了更好支持,但是在旧的浏览器上还是会出现问题。( 特别是非常老的 Internet Explorer)。</p> -<p>如果你想要避免旧浏览器带来的麻烦,这儿有两种解决方案:使用专门的框架,比如 <a href="http://jquery.com/" rel="external" title="http://jquery.com/">jQuery</a>, <a href="https://github.com/julienw/dollardom" rel="external" title="https://github.com/julienw/dollardom">$dom</a>, <a href="http://prototypejs.org/" rel="external" title="http://prototypejs.org/">prototype</a>, <a href="http://dojotoolkit.org/" rel="external" title="http://dojotoolkit.org/">Dojo</a>, <a href="http://yuilibrary.com/" rel="external" title="http://yuilibrary.com/">YUI</a>, 或者类似的框架,或者通过填充你想使用的缺失的特性 (这可以通过条件加载轻松完成——例如使用 <a href="http://yepnopejs.com/" rel="external">yepnope</a> 这样的库。</p> +<p>如果你想要避免旧浏览器带来的麻烦,这儿有两种解决方案:使用专门的框架,比如 <a href="http://jquery.com/" rel="external" title="http://jquery.com/">jQuery</a>, <a href="https://github.com/julienw/dollardom" rel="external" title="https://github.com/julienw/dollardom">$dom</a>, <a href="http://prototypejs.org/" rel="external" title="http://prototypejs.org/">prototype</a>, <a href="http://dojotoolkit.org/" rel="external">Dojo</a>, <a href="http://yuilibrary.com/" rel="external">YUI</a>, 或者类似的框架,或者通过填充你想使用的缺失的特性 (这可以通过条件加载轻松完成——例如使用 <a href="http://yepnopejs.com/" rel="external">yepnope</a> 这样的库。</p> <p>我们打算使用的特性如下所示(按照风险程度从高到低排列):</p> @@ -673,7 +673,7 @@ window.addEventListener('load', function () { <p>我们构建了一个能够生效的东西,尽管这离一个特性齐全的选择框还差得远,但是它效果不错。但是我们已经完成的事情只不过是摆弄DOM。这个组件并没有真正的语义,即使它看起来像一个选择框,但是从浏览器的角度来看并不是,所以辅助技术并不能明白这是一个选择框。简单来说,这个全新的选择框并不具备可访问性!</p> -<p>幸运的是,有一种解决方案叫做 <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>。ARIA代表"无障碍富互联网应用"。这是一个专为我们现在做的事情设计的<a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/"> W3C 规范</a>:使网络应用和自定义组件易于访问,它本质上是一组用来拓展 HTML 的属性集,以便我们能够更好的描述角色,状态和属性,就像我们刚才设计的元素是是它试图传递的原生元素一样。使用这些属性非常简单,所以让我们来试试看。</p> +<p>幸运的是,有一种解决方案叫做 <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>。ARIA代表"无障碍富互联网应用"。这是一个专为我们现在做的事情设计的<a href="http://www.w3.org/TR/wai-aria/" rel="external"> W3C 规范</a>:使网络应用和自定义组件易于访问,它本质上是一组用来拓展 HTML 的属性集,以便我们能够更好的描述角色,状态和属性,就像我们刚才设计的元素是是它试图传递的原生元素一样。使用这些属性非常简单,所以让我们来试试看。</p> <h3 id="role_属性"> <code>role</code> 属性</h3> @@ -725,7 +725,7 @@ window.addEventListener('load', function () { highlightOption(select, optionList[index]); };</pre> -<p>这是经过所有的改变之后的最终结果。 ( 藉由 <a href="http://www.nvda-project.org/" rel="external">NVDA</a> or <a href="http://www.apple.com/accessibility/voiceover/" rel="external" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a> 这样的辅助技术尝试它,你会对此有更好的体会):</p> +<p>这是经过所有的改变之后的最终结果。 ( 藉由 <a href="http://www.nvda-project.org/" rel="external">NVDA</a> or <a href="http://www.apple.com/accessibility/voiceover/" rel="external">VoiceOver</a> 这样的辅助技术尝试它,你会对此有更好的体会):</p> <table> <thead> 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 970fe99cb7..607792bb45 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 @@ -43,7 +43,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <p>{{HTMLElement("fieldset")}}元素是一种方便的用于创建具有相同目的的小部件组的方式,出于样式和语义目的。 你可以在<code><fieldset></code>开口标签后加上一个 {{HTMLElement("legend")}}元素来给{{HTMLElement("fieldset")}} 标上标签。 {{HTMLElement("legend")}}的文本内容正式地描述了{{HTMLElement("fieldset")}}里所含有部件的用途。</p> -<p>许多辅助技术将使用{{HTMLElement("legend")}} 元素,就好像它是相应的 {{HTMLElement("fieldset")}} 元素里每个部件的标签的一部分。例如,在说出每个小部件的标签之前,像<a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" rel="external" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a>或<a href="http://www.nvda-project.org/" rel="external">NVDA</a>这样的屏幕阅读器会朗读出legend的内容。</p> +<p>许多辅助技术将使用{{HTMLElement("legend")}} 元素,就好像它是相应的 {{HTMLElement("fieldset")}} 元素里每个部件的标签的一部分。例如,在说出每个小部件的标签之前,像<a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" rel="external">Jaws</a>或<a href="http://www.nvda-project.org/" rel="external">NVDA</a>这样的屏幕阅读器会朗读出legend的内容。</p> <p>这里有一个小例子:</p> @@ -285,7 +285,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <h2 id="另见">另见</h2> <ul> - <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li> + <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li> </ul> <p>{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}</p> 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 eb3a7aa1bc..6e371e694f 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 @@ -6,7 +6,7 @@ original_slug: Learn/HTML/Forms/HTML_forms_in_legacy_browsers --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms")}}</div> -<p class="summary">所有 web 开发者很快就会(有时候是痛苦地)发现网络是一个令人不快的地方。我们碰到的最恶毒的诅咒是旧式浏览器。好吧,让我们承认吧,当我们提到 “旧式浏览器” 时,脑海中出现就是 老版本的 Internet Explorer ……但是,这远远不是全部。只发布一年的 Firefox 比如 <a href="http://www.mozilla.org/en-US/firefox/organizations/" title="http://www.mozilla.org/en-US/firefox/organizations/">the ESR version</a> 也是旧式浏览器。那么,在移动世界呢?当浏览器和 OS(操作系统) 都不能更新时?是的,有非常多老版本的 Android 手机或 iPhone 没有更新到最新的浏览器。它们同样是旧式浏览器。</p> +<p class="summary">所有 web 开发者很快就会(有时候是痛苦地)发现网络是一个令人不快的地方。我们碰到的最恶毒的诅咒是旧式浏览器。好吧,让我们承认吧,当我们提到 “旧式浏览器” 时,脑海中出现就是 老版本的 Internet Explorer ……但是,这远远不是全部。只发布一年的 Firefox 比如 <a href="http://www.mozilla.org/en-US/firefox/organizations/">the ESR version</a> 也是旧式浏览器。那么,在移动世界呢?当浏览器和 OS(操作系统) 都不能更新时?是的,有非常多老版本的 Android 手机或 iPhone 没有更新到最新的浏览器。它们同样是旧式浏览器。</p> <p>可悲的是,处理这些传统浏览器的问题是工作的一部分。幸运的是,有一些技巧可以帮助您解决旧式浏览器导致的大约80%的问题。</p> @@ -21,7 +21,7 @@ original_slug: Learn/HTML/Forms/HTML_forms_in_legacy_browsers <li>Microsoft: <a href="http://msdn.microsoft.com/en-us/library/ff410218%28v=vs.85%29.aspx" rel="external">Internet Explorer Standards Support Documentation</a></li> <li>WebKit: 由于有多个版本的引擎,稍微有点棘手. <ul> - <li><a href="https://www.webkit.org/blog/" rel="external" title="https://www.webkit.org/blog/">The WebKit blog</a> 和 <a href="http://planet.webkit.org/" rel="external">Planet WebKit</a> 聚合了Webki核心开发者的最佳文章.</li> + <li><a href="https://www.webkit.org/blog/" rel="external">The WebKit blog</a> 和 <a href="http://planet.webkit.org/" rel="external">Planet WebKit</a> 聚合了Webki核心开发者的最佳文章.</li> <li><a href="https://www.chromestatus.com/features">Chrome platform status site</a> 也十分重要</li> <li>同样重要的是 <a href="https://developer.apple.com/technologies/safari/" rel="external">the Apple web site.</a></li> </ul> @@ -32,18 +32,18 @@ original_slug: Learn/HTML/Forms/HTML_forms_in_legacy_browsers <ul> <li><a href="http://caniuse.com" rel="external">Can I Use</a> 有关于是否支持最新技术的信息.</li> - <li><a href="http://www.quirksmode.org" rel="external" title="http://www.quirksmode.org">Quirks Mode</a> 是关于浏览器兼容性的精彩资源. <a href="http://www.quirksmode.org/mobile/" rel="external" title="http://www.quirksmode.org/mobile/">mobile部分</a>是当前最好的内容之一.</li> + <li><a href="http://www.quirksmode.org" rel="external" title="http://www.quirksmode.org">Quirks Mode</a> 是关于浏览器兼容性的精彩资源. <a href="http://www.quirksmode.org/mobile/" rel="external">mobile部分</a>是当前最好的内容之一.</li> <li><a href="http://positioniseverything.net/" rel="external">Position Is Everything</a> 关于旧式浏览器渲染bug以及解决办法(如果有)的最佳资源.</li> <li><a href="http://mobilehtml5.org" rel="external">Mobile HTML5</a> 有关于大量手机浏览器的兼容性信息,而不仅仅是是前五名(包括诺基亚,亚马逊和黑莓).</li> </ul> <h2 id="让事情变得更简单">让事情变得更简单</h2> -<p>由于<a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML forms</a> 包含复杂的交互,所以有一条法则: <a href="http://en.wikipedia.org/wiki/KISS_principle" rel="external" title="http://en.wikipedia.org/wiki/KISS_principle">keep it as simple as possible</a>。很多时候,我们想让表单更美观或想使用更高级的技术,然而,构建高效的HTML表单不只是设计和技术问题。记得花时间读一下这篇文章t <a href="http://www.uxforthemasses.com/forms-usability/" rel="external">forms usability on UX For The Masses</a>.</p> +<p>由于<a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML forms</a> 包含复杂的交互,所以有一条法则: <a href="http://en.wikipedia.org/wiki/KISS_principle" rel="external">keep it as simple as possible</a>。很多时候,我们想让表单更美观或想使用更高级的技术,然而,构建高效的HTML表单不只是设计和技术问题。记得花时间读一下这篇文章t <a href="http://www.uxforthemasses.com/forms-usability/" rel="external">forms usability on UX For The Masses</a>.</p> <h3 id="优雅地降级(Graceful_degradation)是web开发者最好的朋友">优雅地降级(Graceful degradation)是web开发者最好的朋友</h3> -<p><a href="http://www.sitepoint.com/progressive-enhancement-graceful-degradation-choice/" rel="external" title="http://www.sitepoint.com/progressive-enhancement-graceful-degradation-choice/">Graceful degradation and progressive enhancement</a> 是一个开发模式,它允许你通过同时支持多种浏览器来构建优秀内容。当你为现代浏览器构建内容时,你想确保它能在旧式浏览器中以某种方式工作,这就是优雅地降级(graceful degradation).</p> +<p><a href="http://www.sitepoint.com/progressive-enhancement-graceful-degradation-choice/" rel="external">Graceful degradation and progressive enhancement</a> 是一个开发模式,它允许你通过同时支持多种浏览器来构建优秀内容。当你为现代浏览器构建内容时,你想确保它能在旧式浏览器中以某种方式工作,这就是优雅地降级(graceful degradation).</p> <p>让我们看一些关于HTML表单的例子:</p> @@ -157,7 +157,7 @@ input.button { <p>有很多情形,好的"polyfill"能通过提供缺少的API以提供帮助。一个 <a href="http://remysharp.com/2010/10/08/what-is-a-polyfill/" rel="external">polyfill</a> 是一些JavaScript(脚本) 用于填补旧式浏览器中的功能缺失。虽然它们可以用来改进对任何功能的支持,并且使用它们Nederland风险小于CSS和HTML,然而,JS仍然会在很多情况下不工作(网络问题,脚本冲突等)。但是对于JavaScript,如果你总是记住和unobetructive的Javascript一起工作,不适用polyfill也没什么大不了。</p> -<p>最好的polyfill缺失API的方式是使用<a href="http://modernizr.com" rel="external" title="http://modernizr.com">Modernizr</a> 库以及它的子项目 <a href="http://yepnopejs.com" rel="external">YepNope</a>. Modernizr 库允许您测试功能可用性,以便采取相应的行动。YepNope 是一个条件加载库。</p> +<p>最好的polyfill缺失API的方式是使用<a href="http://modernizr.com" rel="external">Modernizr</a> 库以及它的子项目 <a href="http://yepnopejs.com" rel="external">YepNope</a>. Modernizr 库允许您测试功能可用性,以便采取相应的行动。YepNope 是一个条件加载库。</p> <p>下面是一个例子:</p> @@ -180,7 +180,7 @@ input.button { <p>Modernizr 团队按照惯例维护着<a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills" rel="external">a list of great polyfills</a>。仅仅按需使用即可。</p> <div class="note"> -<p><strong>Note:</strong> Modernizr还有其他很棒的功能可以帮助您处理unobstructive的JavaScript和优雅的降级技术。请阅读 <a href="http://modernizr.com/docs/" rel="external" title="http://modernizr.com/docs/">Modernizr documentation</a>.</p> +<p><strong>Note:</strong> Modernizr还有其他很棒的功能可以帮助您处理unobstructive的JavaScript和优雅的降级技术。请阅读 <a href="http://modernizr.com/docs/" rel="external">Modernizr documentation</a>.</p> </div> <h3 id="注意性能">注意性能</h3> 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 5c1925c943..3533f53fb2 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 @@ -36,7 +36,7 @@ original_slug: Learn/HTML/Forms/Sending_and_retrieving_form_data <h3 id="客户端服务器体系结构">客户端/服务器体系结构</h3> -<p>web基于非常基本的客户端/服务器体系结构,可以总结如下:客户端(通常是web浏览器)向服务器发送请求(大多数情况下是<a href="http://httpd.apache.org/" rel="external" title="http://httpd.apache.org/">Apache</a>、<a href="http://nginx.com/" rel="external" title="http://nginx.com/">Nginx</a>、<a href="http://www.iis.net/" rel="external" title="http://www.iis.net/">IIS</a>、<a href="http://tomcat.apache.org/" rel="external">Tomcat</a>等web服务器),使用<a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP 协议</a>。服务器使用相同的协议来回答请求。</p> +<p>web基于非常基本的客户端/服务器体系结构,可以总结如下:客户端(通常是web浏览器)向服务器发送请求(大多数情况下是<a href="http://httpd.apache.org/" rel="external">Apache</a>、<a href="http://nginx.com/" rel="external" title="http://nginx.com/">Nginx</a>、<a href="http://www.iis.net/" rel="external">IIS</a>、<a href="http://tomcat.apache.org/" rel="external">Tomcat</a>等web服务器),使用<a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP 协议</a>。服务器使用相同的协议来回答请求。</p> <p><img alt="A basic schema of the Web client/server architecture" src="/files/4291/client-server.png" style="display: block; height: 141px; margin: 0px auto; width: 400px;"></p> @@ -237,7 +237,7 @@ if __name__ == "__main__": <h4 id="其他语言和框架">其他语言和框架</h4> -<p>还有许多其他的服务器端技术可以用于表单处理,包括<a href="/en-US/docs/" title="/en-US/docs/">Perl</a>、<a href="/en-US/docs/" title="/en-US/docs/">Java</a>、 <a href="http://www.microsoft.com/net" title="http://www.microsoft.com/net">.Net</a>、<a href="/en-US/docs/" title="/en-US/docs/">Ruby</a>等。只挑你最喜欢的用就好。话虽如此,但值得注意的是,直接使用这些技术并不常见,因为这可能很棘手。更常见的是使用许多优秀的框架,这些框架使处理表单变得更容易,例如:</p> +<p>还有许多其他的服务器端技术可以用于表单处理,包括<a href="/en-US/docs/" title="/en-US/docs/">Perl</a>、<a href="/en-US/docs/" title="/en-US/docs/">Java</a>、 <a href="http://www.microsoft.com/net">.Net</a>、<a href="/en-US/docs/" title="/en-US/docs/">Ruby</a>等。只挑你最喜欢的用就好。话虽如此,但值得注意的是,直接使用这些技术并不常见,因为这可能很棘手。更常见的是使用许多优秀的框架,这些框架使处理表单变得更容易,例如:</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django" rel="external">Django</a> for Python (比<a href="http://flask.pocoo.org/">Flask</a>要重量级一些,但是有更多的工具和选项。)</li> 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 6127db2945..20159b043e 100644 --- a/files/zh-cn/learn/forms/styling_web_forms/index.html +++ b/files/zh-cn/learn/forms/styling_web_forms/index.html @@ -192,8 +192,8 @@ original_slug: Learn/HTML/Forms/Styling_HTML_forms <ol> <li>明信片的<a href="/files/4151/background.jpg" title="The postcard background">背景</a>——下载这幅图片,把它和你的 HTML 文件保存在相同目录下。</li> - <li>打字机字体:<a href="http://www.fontsquirrel.com/fonts/Secret-Typewriter" rel="external" title="http://www.fontsquirrel.com/fonts/Secret-Typewriter">源自 fontsquirrel.com 的 "Secret Typewriter“ 字体</a>——将TTF文件下载到和上面相同的文件夹里。</li> - <li>手绘字体:<a href="http://www.fontsquirrel.com/fonts/Journal" rel="external" title="http://www.fontsquirrel.com/fonts/Journal">源自 fontsquirrel.com 的 The "Journal" 字体 </a> —— 将TTF文件下载到和上面相同的文件夹里。</li> + <li>打字机字体:<a href="http://www.fontsquirrel.com/fonts/Secret-Typewriter" rel="external">源自 fontsquirrel.com 的 "Secret Typewriter“ 字体</a>——将TTF文件下载到和上面相同的文件夹里。</li> + <li>手绘字体:<a href="http://www.fontsquirrel.com/fonts/Journal" rel="external">源自 fontsquirrel.com 的 The "Journal" 字体 </a> —— 将TTF文件下载到和上面相同的文件夹里。</li> </ol> <p>在你开始之前需要对字体做一些处理:</p> 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 7201bc4024..6f506df5df 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 @@ -110,7 +110,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages <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/">CSS Grid Layout</a> 规范。</p> +<p>可参见 <a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout</a> 和 <a href="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> @@ -193,7 +193,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages <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 class="external external-icon" href="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/">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> |