diff options
author | MDN <actions@users.noreply.github.com> | 2021-05-25 00:43:56 +0000 |
---|---|---|
committer | MDN <actions@users.noreply.github.com> | 2021-05-25 00:43:56 +0000 |
commit | a3cb768f710d274b572a26c48448f0cb8e4a1bdd (patch) | |
tree | 6c1b509ec40863c2e049e9cfdc48e3e3c361c0e2 /files/zh-cn/web/guide | |
parent | ac3ee48f2c26a9e991a9e39bc3563047050a76f5 (diff) | |
download | translated-content-a3cb768f710d274b572a26c48448f0cb8e4a1bdd.tar.gz translated-content-a3cb768f710d274b572a26c48448f0cb8e4a1bdd.tar.bz2 translated-content-a3cb768f710d274b572a26c48448f0cb8e4a1bdd.zip |
[CRON] sync translated content
Diffstat (limited to 'files/zh-cn/web/guide')
3 files changed, 0 insertions, 568 deletions
diff --git a/files/zh-cn/web/guide/html/html5/constraint_validation/index.html b/files/zh-cn/web/guide/html/html5/constraint_validation/index.html deleted file mode 100644 index befe2acc41..0000000000 --- a/files/zh-cn/web/guide/html/html5/constraint_validation/index.html +++ /dev/null @@ -1,339 +0,0 @@ ---- -title: 约束验证 -slug: Web/Guide/HTML/HTML5/Constraint_validation -translation_of: Web/Guide/HTML/HTML5/Constraint_validation ---- -<p>创建web表单始终是一个复杂的任务. 仅仅组装表单是容易的,但是检查每一个字段的值是否有效并且一致是一件更加困难的事情,而向用户指明错误可能会令人头痛。<a href="/en-US/docs/Web/Guide/HTML/HTML5" title="en/HTML/HTML5">HTML5</a> 引入了表单相关的一些新的机制:为{{ HTMLElement("input") }}元素和强制校验增加了一些新的语义类型,使得在客户端检查表单内容的工作变得容易。基本上,在填写字段时,通常这些约束都会被检查,而不需要额外的JavaScript代码进行校验; 对于更复杂的约束条件的校验可以尝试使用 HTML5 <a href="/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation_API" title="en/HTML/HTML5/Forms in HTML5#Constraint Validation API">Constraint Validation API</a>.</p> - -<div class="note"><strong>Note:</strong> HTML5 Constraint validation doesn't remove the need for validation on the <em>server side</em>. Even though far fewer invalid form requests are to be expected, invalid ones can still be sent by non-compliant browsers (for instance, browsers without HTML5 and without JavaScript) or by bad guys trying to trick your web application. Therefore, like with HTML4, you need to also validate input constraints on the server side, in a way that is consistent with what is done on the client side.</div> - -<h2 id="固有和基本的约束">固有和基本的约束</h2> - -<p>在 HTML5中,声明基本的约束有两种方式:</p> - -<ul> - <li>给 {{ HTMLElement("input") }} 元素的 {{ htmlattrxref("type", "input") }} 特性选择最合适的语义化的值,比如,选择 email 类型将会自动创建一个约束用于检查输入的值是否是一个有效的 e-mail 地址。</li> - <li>设置验证相关的特性值,允许用一种简单的方式来描述基本的约束,而不必要使用 JavaScript。</li> -</ul> - -<h3 id="语义的_input_类型">语义的 input 类型</h3> - -<p> {{ htmlattrxref("type", "input") }} 特性中固有约束:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Input 类型</th> - <th scope="col">约束描述</th> - <th scope="col">Associated violation</th> - </tr> - </thead> - <tbody> - <tr> - <td><span style="font-family: courier new;"><input type="URL"></span></td> - <td>值必须是绝对的URL, 即,是下面的某一种: - <ul> - <li>a valid URI (as defined in <a class="external" href="http://www.ietf.org/rfc/rfc3986.txt" title="http://www.ietf.org/rfc/rfc3986.txt">RFC 3986</a>)</li> - <li>a valid IRI, without a query component (as defined in <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - <li>a valid IRI, with a query component without any unescaped non-ASCII character (as defined in <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - <li>a valid IRI, and the character set for the document is UTF-8 or UTF-16 (as defined in <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - </ul> - </td> - <td><strong>Type mismatch </strong>constraint violation</td> - </tr> - <tr> - <td> <span style="font-family: courier new;"><input type="email"></span></td> - <td>The value must follow the <a class="external" href="http://www.ietf.org/rfc/std/std68.txt" title="http://www.ietf.org/rfc/std/std68.txt">ABNF</a> production: <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> where: - <ul> - <li><code>atext</code> is defined in <a class="external" href="http://tools.ietf.org/html/rfc5322" title="http://tools.ietf.org/html/rfc5322">RFC 5322</a>, i.e., a US-ASCII letter (<span style="font-family: courier new;">A</span> to <span style="font-family: courier new;">Z</span> and <span style="font-family: courier new;">a</span>-<span style="font-family: courier new;">z</span>), a digit (<span style="font-family: courier new;">0</span> to <span style="font-family: courier new;">9</span>) or one of the following<span style="font-family: courier new;">! # $ % & ' * + - / = ? ` { } | ~ </span>special character,</li> - <li><code>ldh-str</code> is defined in <a class="external" href="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5" title="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5">RFC 1034</a>, i.e., US-ASCII letters, mixed with digits and <span style="font-family: courier new;">-</span> grouped in words separated by a dot (<span style="font-family: courier new;">.</span>).</li> - </ul> - - <div class="note"><strong>Note:</strong> if the {{ htmlattrxref("multiple", "input") }} attribute is set, several e-mail addresses can be set, as a comma-separated list, for this input. If any of these do not satisfy the condition described here, the <strong>Type mismatch </strong>constraint violation is triggered.</div> - </td> - <td><strong>Type mismatch </strong>constraint violation</td> - </tr> - </tbody> -</table> - -<p>Note that most input types don't have intrinsic constraints, as some are simply barred from constraint validation or have a sanitization algorithm transforming incorrect values to a correct default. </p> - -<h3 id="验证相关的特性(Attribute)">验证相关的特性(Attribute)</h3> - -<p>下列特性用于描述基本的约束:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">特性</th> - <th scope="col">支持该特性的 Input 类型</th> - <th scope="col">可接受的值</th> - <th scope="col">约束描述</th> - <th scope="col">Associated violation</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ htmlattrxref("pattern", "input") }}</td> - <td>text, search, url, tel, email, password</td> - <td>A <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions" title="https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions">JavaScript regular expression</a> (compiled with the <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" title="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a> <code title="">global</code>, <code title="">ignoreCase</code>, and <code title="">multiline</code> flags <em>disabled)</em></td> - <td>输入的值必须匹配设置的模式。</td> - <td><strong>Pattern mismatch</strong> constraint violation</td> - </tr> - <tr> - <td rowspan="3">{{ htmlattrxref("min", "input") }}</td> - <td>range, number</td> - <td>A valid number</td> - <td rowspan="3">输入的值必须大于等于设置的最小值。</td> - <td rowspan="3"><strong>Underflow</strong> constraint violation</td> - </tr> - <tr> - <td>date, month, week</td> - <td>A valid date</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>A valid date and time</td> - </tr> - <tr> - <td rowspan="3">{{ htmlattrxref("max", "input") }}</td> - <td>range, number</td> - <td>A valid number</td> - <td rowspan="3">输入的值必须小于等于设置的最大值。</td> - <td rowspan="3"><strong>Overflow</strong> constraint violation</td> - </tr> - <tr> - <td>date, month, week</td> - <td>A valid date</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>A valid date and time</td> - </tr> - <tr> - <td>{{ htmlattrxref("required", "input") }}</td> - <td>text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; also on the {{ HTMLElement("select") }} and {{ HTMLElement("textarea") }} elements</td> - <td><em>none</em> as it is a Boolean attribute: its presence means <em>true</em>, its absence means <em>false</em></td> - <td>There must be a value (if set).</td> - <td><strong>Missing</strong> constraint violation</td> - </tr> - <tr> - <td rowspan="5">{{ htmlattrxref("step", "input") }}</td> - <td>date</td> - <td>An integer number of days</td> - <td rowspan="5">Unless the step is set to the <span style="font-family: courier new;">any</span> literal, the value must be <strong>min</strong> + an integral multiple of the step.</td> - <td rowspan="5"><strong>Step mismatch </strong>constraint violation</td> - </tr> - <tr> - <td>month</td> - <td>An integer number of months</td> - </tr> - <tr> - <td>week</td> - <td>An integer number of weeks</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>An integer number of seconds</td> - </tr> - <tr> - <td>range, number</td> - <td>An integer</td> - </tr> - <tr> - <td>{{ htmlattrxref("maxlength", "input") }}</td> - <td>text, search, url, tel, email, password; also on the {{ HTMLElement("textarea") }} element</td> - <td>An integer length</td> - <td>The number of characters (code points) must not exceed the value of the attribute.</td> - <td><strong>Too long</strong> constraint violation</td> - </tr> - </tbody> -</table> - -<h2 id="Constraint_validation_process"><span class="author-g-by4vjwmiwjiydpj7">Constraint validation process</span></h2> - -<p>Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself. The constraint validation is done in the following ways:</p> - -<ul> - <li>By a call to the checkValidity() method of a form-related <a href="/en-US/docs/DOM" title="en/DOM">DOM</a> interface (<code><a href="/en-US/docs/Web/API/HTMLInputElement" title="en/DOM/HTMLInputElement">HTMLInputElement</a></code>, <code><a href="/en-US/docs/Web/API/HTMLSelectElement" title="en/DOM/HTMLSelectElement">HTMLSelectElement</a></code>, <code><a href="/en-US/docs/Web/API/HTMLButtonElement" title="en/DOM/HTMLButtonElement">HTMLButtonElement</a></code> or <code><a href="/en-US/docs/Web/API/HTMLTextAreaElement" title="en/DOM/HTMLTextAreaElement">HTMLTextAreaElement</a></code>), which evaluates the constraints only on this element, allowing a script to get this information. (This is typically done by the user-agent when determining which of the <a href="/en-US/docs/Web/CSS" title="en/CSS">CSS</a> pseudo-classes, {{ Cssxref(":valid") }} or {{ Cssxref(":invalid") }}, applies.)</li> - <li>By a call to the checkValidity() function on the <code><a href="/en-US/docs/Web/API/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code> interface, which is called <em>statically validating the constraints</em>.</li> - <li>By submitting the form itself, which is called <em>interactively validating the constraints</em>.</li> -</ul> - -<div class="note"><strong>Note: </strong> - -<ul> - <li>If the {{ htmlattrxref("novalidate", "form") }} attribute is set on the {{ HTMLElement("form") }} element, interactive validation of the constraints doesn't happen.</li> - <li>Calling the send() method on the <a href="/en/DOM/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a> interface doesn't trigger a constraint validation. In other words, this method sends the form data to the server even if doesn't satisfy the constraints.</li> -</ul> -</div> - -<h2 id="Complex_constraints_using_HTML5_Constraint_API"><span class="author-g-by4vjwmiwjiydpj7">Complex constraints using HTML5 Constraint API</span></h2> - -<p><span class="author-g-by4vjwmiwjiydpj7">Using JavaScript and the Constraint API, it is possible to implement more complex constraints, for example, constraints combining several fields, or constraints involving complex calculations.</span></p> - -<p><span class="author-g-by4vjwmiwjiydpj7">Basically, the idea is to trigger JavaScript on some form field event (like <strong>onchange</strong>) to calculate whether the constraint is violated, and then to use the method <code><em>field</em>.setCustomValidity()</code> to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.</span></p> - -<h3 id="Constraint_combining_several_fields_Postal_code_validation">Constraint combining several fields: Postal code validation</h3> - -<p>The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like <code>D-</code> in Germany, <code>F- </code> in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.</p> - -<div class="note"> -<p><strong>Note: </strong>This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts. </p> -</div> - -<p><span style="line-height: 1.5;">As an example, we will add a script checking the constraint validation for this simple form:</span></p> - -<pre class="brush: html notranslate"><form> - <label for="ZIP">ZIP : </label> - <input type="text" id="ZIP"> - <label for="Country">Country : </label> - <select id="Country"> - <option value="ch">Switzerland</option> - <option value="fr">France</option> - <option value="de">Germany</option> - <option value="nl">The Netherlands</option> - </select> - <input type="submit" value="Validate"> -</form></pre> - -<p>This displays the following form: </p> - -<p><label>Postal Code: </label><input> <label>Country: </label><select><option value="ch">Switzerland</option><option value="fr">France</option><option value="de">Germany</option><option value="nl">The Netherlands</option></select></p> - -<p>First, we write a function checking the constraint itself:</p> - -<pre class="brush: js notranslate">function checkZIP() { - // For each country, defines the pattern that the ZIP has to follow - var constraints = { - ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ], - fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ], - de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ], - nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$', - "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ] - }; - - // Read the country id - var country = document.getElementById("Country").value; - - // Get the NPA field - var ZIPField = document.getElementById("ZIP"); - - // Build the constraint checker - var constraint = new RegExp(constraints[country][0], ""); - console.log(constraint); - - - // Check it! - if (constraint.test(ZIPField.value)) { - // The ZIP follows the constraint, we use the ConstraintAPI to tell it - ZIPField.setCustomValidity(""); - } - else { - // The ZIP doesn't follow the constraint, we use the ConstraintAPI to - // give a message about the format required for this country - ZIPField.setCustomValidity(constraints[country][1]); - } -} -</pre> - -<p>Then we link it to the <strong>onchange</strong> event for the {{ HTMLElement("select") }} and the <strong>oninput</strong> event for the {{ HTMLElement("input") }}:</p> - -<pre class="brush: js notranslate">window.onload = function () { - document.getElementById("Country").onchange = checkZIP; - document.getElementById("ZIP").oninput = checkZIP; -}</pre> - -<p>You can see a <a href="/@api/deki/files/4744/=constraint.html" title="https://developer.mozilla.org/@api/deki/files/4744/=constraint.html">live example</a> of the postal code validation. </p> - -<h3 id="Limiting_the_size_of_a_file_before_its_upload">Limiting the size of a file before its upload</h3> - -<p>Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint API, and especially the field.setCustomValidity() method, with another JavaScript API, here the HTML5 File API.</p> - -<p>Here is the HTML part:</p> - -<pre class="brush: html notranslate"><label for="FS">Select a file smaller than 75 kB : </label> -<input type="file" id="FS"></pre> - -<p>This displays:</p> - -<p><label>Select a file smaller than 75 kB : </label> <input></p> - - - -<p>The JavaScript reads the file selected, uses the File.size() method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:</p> - -<pre class="brush: js notranslate">function checkFileSize() { - var FS = document.getElementById("FS"); - var files = FS.files; - - // If there is (at least) one file selected - if (files.length > 0) { - if (files[0].size > 75 * 1024) { // Check the constraint - FS.setCustomValidity("The selected file must not be larger than 75 kB"); - return; - } - } - // No custom constraint violation - FS.setCustomValidity(""); -}</pre> - - - -<p>Finally we hook the method with the correct event:</p> - -<pre class="brush: js notranslate">window.onload = function () { - document.getElementById("FS").onchange = checkFileSize; -}</pre> - -<p>You can see a <a href="/@api/deki/files/4745/=fileconstraint.html" title="https://developer.mozilla.org/@api/deki/files/4745/=fileconstraint.html">live example</a> of the File size constraint validation.</p> - -<h2 id="Visual_styling_of_constraint_validation"><span class="author-g-by4vjwmiwjiydpj7">Visual styling of constraint validation</span></h2> - -<p>Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.</p> - -<h3 id="Controlling_the_look_of_elements">Controlling the look of elements</h3> - -<p>The look of elements can be controlled via CSS pseudo-classes.</p> - -<h4 id="required_and_optional_CSS_pseudo-classes">:required and :optional CSS pseudo-classes</h4> - -<p>The <a href="/en-US/docs/Web/CSS/:required" title=":required"><code>:required</code></a> and <a href="/en-US/docs/Web/CSS/:optional" title=":optional"><code>:optional</code></a> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classes</a> allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.</p> - -<h4 id="-moz-placeholder_CSS_pseudo-class">:-moz-placeholder CSS pseudo-class</h4> - -<p>See <a href="/en-US/docs/Web/CSS/:-moz-placeholder" title="/en-US/docs/Web/CSS/:-moz-placeholder">:-moz-placeholder</a>.</p> - -<h4 id="valid_invalid_CSS_pseudo-classes">:valid :invalid CSS pseudo-classes</h4> - -<p>The <a href="/en-US/docs/Web/CSS/:valid" title="/en-US/docs/Web/CSS/:valid">:valid</a> and <a href="/en-US/docs/Web/CSS/:invalid" title="/en-US/docs/Web/CSS/:invalid?redirectlocale=en-US&redirectslug=CSS%2F%3Ainvalid">:invalid</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/Web/CSS/Pseudo-classes?redirectlocale=en-US&redirectslug=CSS%2FPseudo-classes">pseudo-classes</a> are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.</p> - -<h4 id="Default_styles">Default styles</h4> - -<h3 id="Controlling_the_text_of_constraints_violation">Controlling the text of constraints violation</h3> - -<h4 id="The_x-moz-errormessage_attribute">The x-moz-errormessage attribute</h4> - -<p>The x-moz-errormessage attribute is a Mozilla extension that allows you to specify the error message to display when a field does not successfully validate.</p> - -<div class="note"> -<p style="margin-left: 40px;">Note: This extension is non-standard.</p> -</div> - -<h4 id="Constraint_APIs_element.setCustomValidity">Constraint API's element.setCustomValidity()</h4> - -<p>The element.setCustomValidity(error) method is used to set a custom error message to be displayed when a form is submitted. The method works by taking a string parameter error. If error is a non-empty string, the method assumes validation was unsuccessful and displays error as an error message. If error is an empty string, the element is considered validated and resets the error message.</p> - -<h4 id="Constraint_APIs_ValidityState_object"><span class="author-g-by4vjwmiwjiydpj7">Constraint API's ValidityState object</span></h4> - -<p>The DOM <a href="/en-US/docs/Web/API/ValidityState" title="/en-US/docs/Web/API/ValidityState"><code>ValidityState</code></a> interface represents the <em>validity states</em> that an element can be in, with respect to constraint validation. Together, they help explain why an element's value fails to validate, if it's not valid.</p> - -<h3 id="Examples_of_personalized_styling"><span class="author-g-by4vjwmiwjiydpj7">Examples of personalized styling</span></h3> - -<h3 id="HTML4_fallback"><span class="author-g-by4vjwmiwjiydpj7">HTML4 fallback</span></h3> - -<h4 id="Trivial_fallback"><span class="author-g-by4vjwmiwjiydpj7">Trivial fallback</span></h4> - -<h4 id="JS_fallback"><span class="author-g-by4vjwmiwjiydpj7">JS fallback</span></h4> - -<h2 id="Conclusion"><span class="author-g-by4vjwmiwjiydpj7">Conclusion</span></h2> diff --git a/files/zh-cn/web/guide/html/html5/index.html b/files/zh-cn/web/guide/html/html5/index.html deleted file mode 100644 index 34bd9fb118..0000000000 --- a/files/zh-cn/web/guide/html/html5/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -tags: - - HTML - - HTML5 - - JavaScript - - PHP - - Web - - Web 开发 - - angularjs - - nodejs - - vuejs - - 帮助 - - 指南 - - 综述 -translation_of: Web/Guide/HTML/HTML5 ---- -<p><span><strong>HTML5</strong> 是</span>定义<span> <a href="/zh-CN/docs/HTML" title="HTML">HTML</a> 标准的最新的版本。 </span>该术语通过两个不同的概念来表现:</p> - -<ul> - <li>它是一个新版本的<strong>HTML</strong>语言,具有新的元素,属性和行为,</li> - <li>它有更大的<strong>技术</strong>集,允许构建更多样化和更强大的网站和应用程序。这个集合有时称为HTML5和它的朋友们,不过大多数时候仅缩写为一个词 <strong><em>HTML5</em></strong>。</li> -</ul> - -<p>设计为所有Open Web开发人员都可以使用,此引用页面链接到许多关于HTML5技术的资源,根据其功能分为几个组。</p> - -<ul> - <li><strong>语义</strong>:能够让你更恰当地描述你的内容是什么。</li> - <li><strong>连通性</strong>:能够让你和服务器之间通过创新的新技术方法进行通信。</li> - <li><strong>离线 & 存储</strong>:能够让网页在客户端本地存储数据以及更高效地离线运行。</li> - <li><strong>多媒体</strong>:使 video 和 audio 成为了在所有 Web 中的一等公民。</li> - <li><strong>2D/3D 绘图 & 效果</strong>:提供了一个更加分化范围的呈现选择。</li> - <li><strong>性能 & 集成</strong>:提供了非常显著的性能优化和更有效的计算机硬件使用。</li> - <li><strong>设备访问 Device Access</strong>:能够处理各种输入和输出设备。</li> - <li><strong>样式设计</strong>: 让作者们来创作更加复杂的主题吧!</li> -</ul> - -<div class="cleared row topicpage-table"> -<div class="section"> -<h2 id="语义" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">语义</h2> - -<dl> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="HTML5 文档的节段和外形概要">HTML5 中的区块和段落元素</a></dt> - <dd>HTML5 中新的区块和段落元素一览: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} 和 {{HTMLElement("hgroup")}}.</dd> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video" title="使用 HTML5 的音频和视频">使用 HTML5 的音频和视频</a></dt> - <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入和允许操作新的多媒体内容。</dd> - <dt><a href="/zh-CN/docs/Learn/HTML/Forms">表单的改进</a></dt> - <dd>看一下 HTML5 中对 web 表单的改进:<a href="/zh-CN/docs/Learn/HTML/Forms/Form_validation">强制校验API</a>,一些新的属性,一些新的{{HTMLElement("input")}} 元素{{htmlattrxref("type", "input")}} 属性值 ,新的 {{HTMLElement("output")}} 元素。</dd> - <dt>新的语义元素</dt> - <dd>除了节段,媒体和表单元素之外,还有众多的新元素,例如 {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, 或者 {{HTMLElement("meter")}}和{{HTMLElement("main")}},这增加了<a href="/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">有效的 HTML5 元素</a>的数量。</dd> - <dt>{{HTMLElement("iframe")}} 的改进</dt> - <dd>使用 {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, 和 {{htmlattrxref("srcdoc", "iframe")}} 属性,作者们现在可以精确控制 {{HTMLElement("iframe")}} 元素的安全级别以及期望的渲染。</dd> - <dt><a href="/zh-CN/docs/MathML" title="MathML">MathML</a></dt> - <dd>允许直接嵌入数学公式。</dd> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">HTML5 入门</a></dt> - <dd>本文介绍了如何标示在网页设计或 Web 应用程序中使用 HTML5 时碰到的问题。</dd> - <dt><a href="/zh-CN/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5 兼容的解析器</a></dt> - <dd>用于把 HTML5 文档的字节转换成 DOM 的解释器,已经被扩展了,并且现在精确地定义了在所有情况下使用的行为,甚至当碰到无效的 HTML 这种情况。这就导致了 HTML5 兼容的浏览器之间极大的可预测性和互操作性。</dd> -</dl> - -<h2 id="通信" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">通信</h2> - -<dl> - <dt><a href="/zh-CN/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> - <dd>允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。</dd> - <dt><a href="/zh-CN/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt> - <dd>允许服务器向客户端推送事件,而不是仅在响应客户端请求时服务器才能发送数据的传统范式。</dd> - <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>这项技术,其中的 RTC 代表的是即时通信,允许连接到其他人,直接在浏览器中控制视频会议,而不需要一个插件或是外部的应用程序。</dd> -</dl> - -<h2 id="离线_存储" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">离线 & 存储</h2> - -<dl> - <dt><a href="/zh-CN/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">离线资源:应用程序缓存</a></dt> - <dd>火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。</dd> - <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt> - <dd>Firefox 3 支持 WHATWG 在线和离线事件,这可以让应用程序和扩展检测是否存在可用的网络连接,以及在连接建立和断开时能感知到。</dd> - <dt><a href="/zh-CN/docs/Web/Guide/API/DOM/Storage/Storage" title="DOM/Storage">WHATWG 客户端会话和持久化存储 (又名 DOM 存储)</a></dt> - <dd>客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。</dd> - <dt><a href="/zh-CN/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd>是一个为了能够在浏览器中存储大量结构化数据,并且能够在这些数据上使用索引进行高性能检索的 Web 标准。</dd> - <dt><a href="/zh-CN/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">自 web 应用程序中使用文件</a></dt> - <dd>对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中,从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 <a href="/zh-CN/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> 的 <span style="font-family: monospace;">{{HTMLElement("input")}}</span> 元素的新的 <a href="/zh-CN/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 属性针对多文件选择的支持。 还有 <a href="/zh-CN/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>。</dd> -</dl> - -<h2 id="多媒体" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">多媒体</h2> - -<dl> - <dt><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content" title="Using_audio_and_video_in_Firefox">使用 HTML5 音视频</a></dt> - <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并支持新的多媒体内容的操作。</dd> - <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>这项技术,其中的 RTC 代表的是即时通信,允许连接到其他人,在浏览器中直接控制视频会议,而不需要一个插件或是外部的应用程序。</dd> - <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt> - <dd>允许使用,操作计算机摄像头,并从中存储图像。</dd> - <dt>Track 和 WebVTT</dt> - <dd> {{HTMLElement("track")}} 元素支持字幕和章节。<a href="/zh-CN/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> 一个文本轨道格式。</dd> -</dl> - -<h2 id="3D_图像_效果" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, 图像 & 效果</h2> - -<dl> - <dt><a href="/zh-CN/docs/Canvas_tutorial" title="Canvas tutorial">Canvas 教程</a></dt> - <dd>了解有关新的 <code>{{HTMLElement("canvas")}}</code> 元素以及如何在火狐中绘制图像和其他对象。</dd> - <dt><a href="/zh-CN/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 针对 <code><canvas></code> 元素的文本 API</a></dt> - <dd>HTML5 文本 API 现在由 {{HTMLElement("canvas")}} 元素支持。</dd> - <dt><a href="/zh-CN/docs/WebGL" title="WebGL">WebGL</a></dt> - <dd>WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5 {{HTMLElement("canvas")}} 元素中的 API 给 Web 带来了 3D 图像功能。</dd> - <dt><a href="/zh-CN/docs/SVG" title="SVG">SVG</a></dt> - <dd>一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。</dd> - <dt> </dt> -</dl> -</div> - -<div class="section"> -<h2 id="性能_集成" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">性能 & 集成</h2> - -<dl> - <dt><a href="/zh-CN/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> - <dd>能够把 JavaScript 计算委托给后台线程,通过允许这些活动以防止使交互型事件变得缓慢。</dd> - <dt><code><a href="/zh-CN/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt> - <dd>允许异步读取页面的某些部分,允许其显示动态内容,根据时间和用户行为而有所不同。这是在 <a href="/zh-CN/docs/AJAX" title="AJAX">Ajax</a>背后的技术。</dd> - <dt>即时编译的 JavaScript 引擎</dt> - <dd>新一代的 JavaScript 引擎功能更强大,性能更杰出。</dd> - <dt><a href="https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> - <dd>允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。</dd> - <dt><a href="/zh-CN/docs/HTML/Content_Editable" title="HTML/Content Editable">contentEditable 属性:把你的网站改变成 wiki !</a></dt> - <dd>HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。</dd> - <dt><a href="/zh-CN/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">拖放</a></dt> - <dd>HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。</dd> - <dt><a href="/zh-CN/docs/HTML/Focus_management_in_HTML" title="Focus_management_in_HTML">HTML 中的焦点管理</a></dt> - <dd>支持新的 HTML5 <code>activeElement</code> 和 <code>hasFocus</code> 属性。</dd> - <dt><a href="/zh-CN/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">基于 Web 的协议处理程序</a></dt> - <dd>你现在可以使用 <code>navigator.registerProtocolHandler()</code> 方法把 web 应用程序注册成一个协议处理程序。</dd> - <dt><a href="/zh-CN/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> - <dd>允许控制动画渲染以获得更优性能。</dd> - <dt><a href="/zh-CN/docs/DOM/Using_fullscreen_mode" title="DOM/Using_full-screen_mode">全屏 API</a></dt> - <dd>为一个网页或者应用程序控制使用整个屏幕,而不显示浏览器界面。</dd> - <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt> - <dd>允许锁定到内容的指针,这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd> - <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt> - <dd>为了构建一个良好的具有离线功能的 web 应用程序,你需要知道什么时候你的应用程序确实离线了。顺便提一句,在你的应用程序又再回到在线状态时你也需要知道。</dd> -</dl> - -<h2 id="设备访问" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">设备访问</h2> - -<dl> - <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt> - <dd>允许使用和操作计算机的摄像头,并从中存取照片。</dd> - <dt><a href="/zh-CN/docs/DOM/Touch_events" title="DOM/Touch_events">触控事件</a></dt> - <dd>对用户按下触控屏的事件做出反应的处理程序。</dd> - <dt><a href="/zh-CN/docs/WebAPI/Using_geolocation" title="Using_geolocation">使用地理位置定位</a></dt> - <dd>让浏览器使用地理位置服务定位用户的位置。</dd> - <dt><a href="/zh-CN/docs/Detecting_device_orientation" title="Detecting_device_orientation">检测设备方向</a></dt> - <dd>让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备(例如制作能够对设备位置做出反应的游戏)或者使页面的布局跟屏幕的方向相适应(横向或纵向)。</dd> - <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt> - <dd>允许锁定到内容的指针,这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd> -</dl> - -<h2 id="样式" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">样式</h2> - -<p><a href="/zh-CN/docs/CSS" title="CSS">CSS</a> 已经扩展到能够以一个更加复杂的方法给元素设置样式。这通常被称为 <a href="/zh-CN/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, 尽管 CSS 已经不再是很难触动的规范,并且不同的模块并不全部位于 level 3:其中一些位于 level 1 而另一些位于 level 4,覆盖了所有中间的层次。</p> - -<dl> - <dt>新的背景样式特性</dt> - <dd>现在可以使用 {{cssxref("box-shadow")}} 给逻辑框设置一个阴影,而且还可以设置 <a href="/zh-CN/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">多背景</a>。</dd> - <dt>更精美的边框</dt> - <dd>现在不仅可以使用图像来格式化边框,使用 {{cssxref("border-image")}} 和它关联的普通属性,而且可以通过 {{cssxref("border-radius")}} 属性来支持圆角边框。</dd> - <dt>为你的样式设置动画</dt> - <dd>使用 <a href="/zh-CN/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> 以在不同的状态间设置动画,或者使用 <a href="/zh-CN/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> 在页面的某些部分设置动画而不需要一个触发事件,你现在可以在页面中控制移动元素了。</dd> - <dt>排版方面的改进</dt> - <dd>作者们如今有更强大的能力来使自己的网页文字达到更佳的排版。他们不但可以控制 {{cssxref("text-overflow")}} 和 <a href="/zh-CN/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, 还可以给它设置一个 <a href="/zh-CN/docs/CSS/text-shadow" title="CSS/text-shadow">阴影</a> 或者更精细地控制它的 <a href="/zh-CN/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>。感谢新的 {{cssxref("@font-face")}} 规则,现在我们可以下载并应用自定义的字体了。</dd> - <dt>新的展示性布局</dt> - <dd>为了提高设计的灵活性,已经有两种新的布局被添加了进来:<a href="/zh-CN/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS 多栏布局</a>, 以及 <a href="/zh-CN/docs/CSS/Flexbox" title="CSS/Flexbox">CSS 灵活方框布局</a>。</dd> -</dl> -</div> -</div> - -<p>译注:</p> - -<p>被废弃的重复链接:https://developer.mozilla.org/zh-CN/docs/HTML5_junk</p> - -<p> - <audio class="hidden"> </audio> -</p> diff --git a/files/zh-cn/web/guide/html/html5/introduction_to_html5/index.html b/files/zh-cn/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 55c2e8df5e..0000000000 --- a/files/zh-cn/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: HTML5 入门 -slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -tags: - - Basic - - Guide - - HTML - - HTML5 - - NeedsContent - - Web -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a>是最新的第五代HTML标准。它不仅提供丰富的媒体支持,而且还增强了对创建一个能够与用户进行交互的Web应用的支持,使他/她的本地数据和服务器交互比以前更有效,更容易。</p> - -<p>一些HTML5特性仍然不被某些浏览器支持。但是,Gecko已经开始推广,火狐浏览器也对HTML5的支持非常好,并且会持续的支持更多的功能。Gecko开始支持HTML5版本1.8.1。你可以在这个<a href="/zh/HTML/HTML5" title="zh/HTML/HTML5">HTML5主页</a>中找到目前Gecko支持的所有的HTML5的功能列表。关于HTML5多浏览器支持的详细信息,请参阅 <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a> 网站</p> - -<h2 id="用HTML5的doctype声明文件包含HTML5标记">用HTML5的doctype声明文件包含HTML5标记</h2> - -<p>HTML5的doctype非常简单。表明你的HTML内容使用HTML5,只需要简单的使用:</p> - -<pre class="brush: html"><!DOCTYPE html></pre> - -<p>这样做会让目前还不支持的HTML5的浏览器采用标准模式解析,这意味着他们会解析那些HTML5中兼容的旧的HTML的标签的部分,而忽略他们不支持HTML5的新特性。</p> - -<p>这个doctype比以前更短,更简单,使的它更容易被记住并且减少必须下载的字节数。</p> - -<h2 id="用<meta_charset>声明字符集">用<code><meta charset></code>声明字符集</h2> - -<p>在一个页面上做的第一件事通常是声明使用的字符集。在以前版本的HTML,它是一个非常复杂的{{HTMLElement("meta")}}元素,现在它变得非常简单:</p> - -<pre class="brush: html"><meta charset="UTF-8"></pre> - -<p>把这个放到你的{{HTMLElement("head") }},因为在一些浏览器中如果声明的字符集和他们的预期的不同,他们会重新解析一遍HTML文档。另外,如果你目前没有使用UTF-8,建议您把您的网页改为这个编码,因为它简化了不同脚本对文件中字符的处理。</p> - -<p>值得注意的是HTML5限制了可用的字符集,他们需要兼容8位的ASCII。这样做是为了加强安全,防止某些类型的攻击。</p> - -<h2 id="使用新的HTML5解析器">使用新的HTML5解析器</h2> - -<p>html5的解析器分析主要是从标签的语义进行,并且语义化标签在html5中得到更加严格的定义。在H5之前,只有明确定义的标签被才能使用,意味着一旦只要有一个小错误在标签上(大部分网站只要有一个),表现出来的形式就是未定义的标签。从本质上讲,这导致所有的浏览器使用相同的标签时,产生的作用和表现的形式都不一样。如今面对标签问题,所有的浏览器商必须定义一个相同标准。</p> - -<p>这个统一的开发标准帮助了网站开发者进行开发。目前大多数浏览器使用着HTML5的分析标准,同时非H5标准的浏览器商也还有部分人使用。请记住我们推荐使用语义化标签,html5的新标准让这些代码变得更加简单得去理解和维护。并且将会大量减少目前市场存在旧浏览器的兼容问题</p> - -<p>别担心,你不需要改变您的网站上的任何东西,Web浏览器的开发商已经在为你做这些了!</p> |