diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/guide/html | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/guide/html')
15 files changed, 3333 insertions, 0 deletions
diff --git a/files/zh-cn/web/guide/html/content_categories/index.html b/files/zh-cn/web/guide/html/content_categories/index.html new file mode 100644 index 0000000000..c32303add4 --- /dev/null +++ b/files/zh-cn/web/guide/html/content_categories/index.html @@ -0,0 +1,162 @@ +--- +title: 内容分类 +slug: Web/Guide/HTML/Content_categories +tags: + - HTML5 + - 草稿 + - 高级 +translation_of: Web/Guide/HTML/Content_categories +--- +<p><span class="seoSummary">每一个HTML元素都必须遵循定义了它可以包含哪一类内容的规则。 这些规则被归类为几个常见的元素内容模型（content model）。每个HTML元素都属于0个、1 个或多个内容模型，每个模型都有一些规则使得元素中的内容必须遵循一个HTML规范文档( HTML-conformant document)。</span></p> + +<p>以下是三种类型的内容分类：</p> + +<ul> + <li>主内容类，描述了很多元素共享的内容规范；</li> + <li>表单相关的内容类，描述了表单相关元素共有的内容规范；</li> + <li>特殊内容类，描述了仅仅在某些特殊元素上才需要遵守的内容规范，通常这些元素都有特殊的上下文关系。</li> +</ul> + +<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></div> + +<h2 id="主内容类（Main_content_categories）">主内容类（Main content categories）</h2> + +<h3 id="元数据内容（Metadata_content）">元数据内容（Metadata content）</h3> + +<p>此类元素 修改文档其余部分的陈述或者行为，建立与其他文档的链接，或者传达其他外带信息。</p> + +<p>属于这一类的元素有：{{HTMLElement("base")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} and {{HTMLElement("title")}}.</p> + +<h3 id="流式元素（Flow_content）"><a name="flow_content">流式元素（Flow content）</a></h3> + +<p>此类元素通常包含 文本或植入的内容。此类元素有： {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} and Text.</p> + +<p>属于此类的少数其他元素（仅限于某种特殊情形，这些元素才会属于此类）：</p> + +<ul> + <li>{{HTMLElement("area")}}, 仅限于它作为{{HTMLElement("map")}}的子节点的情形</li> + <li>{{HTMLElement("link")}}, 仅限于<strong><a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop">itemprop</a></strong>属性存在的情形</li> + <li>{{HTMLElement("meta")}}, 仅限于<strong><a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop">itemprop</a></strong>属性存在的情形</li> + <li>{{HTMLElement("style")}}, 仅限于 {{htmlattrxref("scoped","style")}}属性存在的情形</li> +</ul> + +<h3 id="章节元素（Sectioning_content）">章节元素（Sectioning content）</h3> + +<p>隶属于分节内容模型的元素 在当前的大纲中创建一个<a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">分节</a>，此分节将定义{{HTMLElement("header")}}元素、{{HTMLElement("footer")}} 元素和标题元素（<a href="#Heading_content" title="#heading content">heading content</a>）的范围。</p> + +<p>属于此类的元素有： {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} and {{HTMLElement("section")}}. </p> + +<div class="note"> +<p>注意：不要将本内容模型与<a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">sectioning root</a> category 混淆，<a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">sectioning root</a> category 的作用是把它的内容与常规的大纲隔离。</p> +</div> + +<h3 id="标题元素（Heading_content）">标题元素（Heading content）</h3> + +<p>标题内容 定义了分节的标题，而这个分节可能由一个明确的分节内容元素直接标记，也可能由标题本身隐式地定义。</p> + +<p>属于此分类的元素有： {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} and {{HTMLElement("hgroup")}}.</p> + +<div class="note"> +<p>注意：尽管{{HTMLElement("header")}}可能包含一些标题内容，但{{HTMLElement("header")}}并不是标题内容本身。</p> +</div> + +<h3 id="短语元素（Phrasing_content）">短语元素（Phrasing content）</h3> + +<p>短语元素（Phrasing content） 规定文本和它包含的标记。 一些Phrasing content就构成了段落.</p> + +<p>属于此类的元素有： {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} 和 plain text (仅当所包含的内容不完全为空字符的时候).</p> + +<p>一些其他的元素也属于这个分类，但是只有当如下特殊情况时才会实现:</p> + +<ul> + <li>{{HTMLElement("a")}}, 当它仅包含 phrasing content 时</li> + <li>{{HTMLElement("area")}}, 当它为{{HTMLElement("map")}} 元素的子元素时</li> + <li>{{HTMLElement("del")}}, 当它仅包含 phrasing content 时</li> + <li>{{HTMLElement("ins")}}, 当它仅包含 phrasing content 时</li> + <li>{{HTMLElement("link")}}, 如果<strong><a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop">itemprop</a></strong>属性存在的情形</li> + <li>{{HTMLElement("map")}}, 当它仅包含 phrasing content 时</li> + <li>{{HTMLElement("meta")}},如果<strong><a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop">itemprop</a></strong>属性存在的情形</li> +</ul> + +<h3 id="嵌入元素（Embedded_content）">嵌入元素（Embedded content）</h3> + +<p>Embedded content输入另一个资源或者将来自另一种标记语言或命名空间的内容插入到文档中。</p> + +<p>属于此类的元素有：{{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.</p> + +<h3 id="交互元素（Interactive_content）"><a name="interactive_content">交互元素（Interactive content）</a></h3> + +<p>交互式内容包含为用户交互而特别设计的元素。 </p> + +<p><span style="line-height: 1.5;">属于此类的元素有：{{HTMLElement("a")}}，{{HTMLElement("button")}}，{{HTMLElement("details")}}，{{HTMLElement("embed")}}，{{HTMLElement("iframe")}}，</span> {{deprecated_inline()}}<span style="line-height: 1.5;">{{HTMLElement("keygen")}}，{{HTMLElement("label")}}，{{HTMLElement("select")}} 和 {{HTMLElement("textarea")}}。</span></p> + +<p>仅在特殊情形下才会属于此类的元素有:</p> + +<ul> + <li>{{HTMLElement("audio")}}, 若{{htmlattrxref("controls", "audio")}}属性存在</li> + <li>{{HTMLElement("img")}}, 若{{htmlattrxref("usemap", "img")}}属性存在</li> + <li>{{HTMLElement("input")}}, 若{{htmlattrxref("type", "input")}}属性不处于隐藏（hidden）状态</li> + <li>{{HTMLElement("menu")}}, 若{{htmlattrxref("type", "menu")}}属性处于工具栏（toolbar）状态</li> + <li>{{HTMLElement("object")}}, 若{{htmlattrxref("usemap", "object")}}属性存在</li> + <li>{{HTMLElement("video")}}, 若{{htmlattrxref("controls", "video")}}属性存在</li> +</ul> + +<h3 id="表单相关内容（Form-associated_content）">表单相关内容（Form-associated content）</h3> + +<p>表单相关的内容 包含 拥有表单父节点（exposed by a <strong>form</strong> attribute）的元素，一个表单父节点可以是{{HTMLElement("form")}}元素，也可以是其id在表单属性中被指定了的元素。（Form-associated content comprises elements that have a form owner, exposed by a <strong>form</strong> attribute. A form owner is either the containing {{HTMLElement("form")}} element or the element whose id is specified in the <strong>form</strong> attribute.）</p> + +<ul> + <li>{{HTMLElement("button")}}</li> + <li>{{HTMLElement("fieldset")}}</li> + <li>{{HTMLElement("input")}}</li> + <li>{{deprecated_inline()}}{{HTMLElement("keygen")}}</li> + <li>{{HTMLElement("label")}}</li> + <li>{{HTMLElement("meter")}}</li> + <li>{{HTMLElement("object")}}</li> + <li>{{HTMLElement("output")}}</li> + <li>{{HTMLElement("progress")}}</li> + <li>{{HTMLElement("select")}}</li> + <li>{{HTMLElement("textarea")}}</li> +</ul> + +<p> 此类包含了几个子类：</p> + +<dl> + <dt><a name="Form_listed">可列举的元素（listed）</a></dt> + <dd>在 <a href="/en-US/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> 和 fieldset.elements IDL collections中列举出的元素. 包括 {{HTMLElement("button")}}，{{HTMLElement("fieldset")}}，{{HTMLElement("input")}}， {{deprecated_inline()}}{{HTMLElement("keygen")}}，{{HTMLElement("object")}}，{{HTMLElement("output")}}，{{HTMLElement("select")}} 和 {{HTMLElement("textarea")}}。</dd> + <dt><a name="Form_labelable">可标签的元素（labelable）</a></dt> + <dd>和 {{HTMLElement("label")}} 相关联的元素。包括 {{HTMLElement("button")}}，{{HTMLElement("input")}}， {{deprecated_inline()}}{{HTMLElement("keygen")}}，{{HTMLElement("meter")}}，{{HTMLElement("output")}}，{{HTMLElement("progress")}}，{{HTMLElement("select")}} 和 {{HTMLElement("textarea")}}。</dd> + <dt><a name="Form_submittable">可提交的元素（submittable）</a></dt> + <dd>包括当表单提交时可以用来组成表单数据的元素。 包括 {{HTMLElement("button")}}，{{HTMLElement("input")}}， {{deprecated_inline()}}{{HTMLElement("keygen")}}，{{HTMLElement("object")}}，{{HTMLElement("select")}} 和 {{HTMLElement("textarea")}}.</dd> + <dt><a name="Form_resettable">可重置的元素（resettable）</a></dt> + <dd>当表单重置时会被重置的元素。包括 {{HTMLElement("input")}}， {{deprecated_inline()}}{{HTMLElement("keygen")}}，{{HTMLElement("output")}}，{{HTMLElement("select")}} 和 {{HTMLElement("textarea")}}.</dd> + <dt> + <h2 id="二级分类">二级分类</h2> + + <p>这里还有一些你需要注意的二级分类元素。</p> + + <h3 id="支持脚本元素">支持脚本元素</h3> + + <p>支持脚本的元素不会直接渲染输出在页面文档中。当然，他们被用来存放脚本代码，脚本代码所要用到的数据。</p> + + <p>这些支持脚本的元素有:</p> + {{HTMLElement("script")}} {{HTMLElement("template")}}</dt> +</dl> + +<h2 id="透明内容模型（Transparent_content_model）">透明内容模型（Transparent content model）</h2> + +<p>如果一个元素拥有 transparent content mode， 即使将透明内容更换为子元素，其内容必须由合法的HTML5元素组成。</p> + +<p>例如，{{HTMLElement("del")}} 和 {{HTMLELement("ins")}} 是透明的：</p> + +<pre><p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p> +</pre> + +<p>如果这两个元素被移除，这个程序段依然是合法的。</p> + +<pre><p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p> +</pre> + +<h2 id="Other_content_models">Other content models</h2> + +<p>Sectioning root.</p> diff --git a/files/zh-cn/web/guide/html/content_editable/index.html b/files/zh-cn/web/guide/html/content_editable/index.html new file mode 100644 index 0000000000..00f44d6fd7 --- /dev/null +++ b/files/zh-cn/web/guide/html/content_editable/index.html @@ -0,0 +1,219 @@ +--- +title: Content Editable +slug: Web/Guide/HTML/Content_Editable +translation_of: Web/Guide/HTML/Editable_content +--- +<p><span class="seoSummary">在HTML中，任何元素都可以被编辑。通过使用一些JavaScript事件处理程序，您可以将您的网页转换为完整且快速的富文本编辑器。本文提供了有关此功能的一些信息。 </span></p> + +<h2 id="它是如何工作的？">它是如何工作的？</h2> + +<p>为了使元素可编辑，你所要做的就是在html标签上设置<em>"contenteditable"</em>属性，它几乎支持所有的HTML元素。</p> + +<p>下面是一个简单的示例，创建一个<em>"contenteditable"</em>属性为<em>"true"</em>的div元素，用户就可以编辑其内容了。</p> + +<pre class="brush: html notranslate"><div contenteditable="true"> + This text can be edited by the user. +</div></pre> + +<p>这是上面代码运行的结果：</p> + +<p>{{ EmbedLiveSample('How_does_it_work') }}</p> + +<h2 id="执行命令设置可编辑区域">执行命令设置可编辑区域</h2> + +<p>当一个HTML元素的<code>contenteditable</code>属性被设置为<code>true</code>时，{{ domxref("document.execCommand()") }} 方法便可使用。通过该方法，你可以运行相关<a href="/en-US/docs/Web/API/document.execCommand#Commands">commands</a> 来操作可编辑区域的内容。其中大多数命令都会影响文档的选择，例如，给文本提供一个样式(加粗，倾斜等)、插入新元素(如增加一个链接)、影响一整行文本(如缩进排版)。当使用<code>contentEditable</code>后，调用<code>execCommand()</code>方法将影响当前处于活动状态的可编辑元素</p> + +<h2 id="在标记生成上的不同点">在标记生成上的不同点</h2> + +<p>因为各个浏览器在标记生成上的不同，因此跨浏览器使用 <code>contenteditable</code> 一直以来都是痛点，例如一些看起来十分简单的事情，如： 当你按下Enter/Return键在可编辑区域中创建一个新的文本行时，不同主流浏览器对此有不同处理(Firefox 插入{{htmlelement("br")}}、IE/Opera将使用{{htmlelement("p")}}、 Chrome/Safari 将使用 {{htmlelement("div")}}）</p> + +<p>幸运的是在现代浏览器中，这些不同都趋于一致了。截止到<a href="/en-US/docs/Mozilla/Firefox/Releases/60">Firefox 60</a>，火狐开始使用{{htmlelement("div")}}元素来包裹新生成的文本行，以与Chrome, modern Opera, Edge, and Safari.的行为趋于一致</p> + +<div class="note"> +<p><strong>注意</strong>: Internet Explorer使用 {{htmlelement("p")}} 元素而不是 <code><div></code>.</p> +</div> + +<p>如果你想使用不同的方式创建新的段落,上面所有浏览器都支持{{domxref("document.execCommand")}}方法，该方法提供的 <code>defaultParagraphSeparator</code> 命令能够让你以不同的方式创建新的段落例如, 使用 {{htmlelement("p")}} 元素:</p> + +<pre class="notranslate"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"defaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>另外，从FireFox 55开始，火狐还为<code>defaultParagraphSeparator</code>支持非标准化参数<code>br</code>。如果你的Web应用程序通过检查浏览器是否为火狐来支持旧的FireFox行为，这将非常有用。但不幸的是，你并没有多少时间来为新的Firefox修复你的Web应用，你可以在初始化<code>designMode</code>和<code>contenteditable</code>时插入下面的代码来恢复较早的Firefox行为：</p> + +<pre class="notranslate"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"defaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"br"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="安全性">安全性</h2> + +<p>出于安全原因，火狐浏览器默认不允许JavaScript代码使用剪贴板相关特性（如复制、粘贴等）。你可以在<code>about:config</code>中设置如下选项来启用它们:</p> + +<pre class="code notranslate">user_pref("capability.policy.policynames", "allowclipboard"); +user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org"); +user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess"); +user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre> + +<h2 id="例子：一个简单但完整的富文本编辑器">例子：一个简单但完整的富文本编辑器</h2> + +<div style="height: 500px; width: auto; overflow: auto;"> +<pre class="brush: html notranslate"><!doctype html> +<html> +<head> +<title>Rich Text Editor</title> +<script type="text/javascript"> +var oDoc, sDefTxt; + +function initDoc() { + oDoc = document.getElementById("textBox"); + sDefTxt = oDoc.innerHTML; + if (document.compForm.switchMode.checked) { setDocMode(true); } +} + +function formatDoc(sCmd, sValue) { + if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); } +} + +function validateMode() { + if (!document.compForm.switchMode.checked) { return true ; } + alert("Uncheck \"Show HTML\"."); + oDoc.focus(); + return false; +} + +function setDocMode(bToSource) { + var oContent; + if (bToSource) { + oContent = document.createTextNode(oDoc.innerHTML); + oDoc.innerHTML = ""; + var oPre = document.createElement("pre"); + oDoc.contentEditable = false; + oPre.id = "sourceText"; + oPre.contentEditable = true; + oPre.appendChild(oContent); + oDoc.appendChild(oPre); + document.execCommand("defaultParagraphSeparator", false, "div"); + } else { + if (document.all) { + oDoc.innerHTML = oDoc.innerText; + } else { + oContent = document.createRange(); + oContent.selectNodeContents(oDoc.firstChild); + oDoc.innerHTML = oContent.toString(); + } + oDoc.contentEditable = true; + } + oDoc.focus(); +} + +function printDoc() { + if (!validateMode()) { return; } + var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); + oPrntWin.document.open(); + oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>"); + oPrntWin.document.close(); +} +</script> +<style type="text/css"> +.intLink { cursor: pointer; } +img.intLink { border: 0; } +#toolBar1 select { font-size:10px; } +#textBox { + width: 540px; + height: 200px; + border: 1px #000000 solid; + padding: 12px; + overflow: scroll; +} +#textBox #sourceText { + padding: 0; + margin: 0; + min-width: 498px; + min-height: 200px; +} +#editMode label { cursor: pointer; } +</style> +</head> +<body onload="initDoc();"> +<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;"> +<input type="hidden" name="myDoc"> +<div id="toolBar1"> +<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option selected>- formatting -</option> +<option value="h1">Title 1 &lt;h1&gt;</option> +<option value="h2">Title 2 &lt;h2&gt;</option> +<option value="h3">Title 3 &lt;h3&gt;</option> +<option value="h4">Title 4 &lt;h4&gt;</option> +<option value="h5">Title 5 &lt;h5&gt;</option> +<option value="h6">Subtitle &lt;h6&gt;</option> +<option value="p">Paragraph &lt;p&gt;</option> +<option value="pre">Preformatted &lt;pre&gt;</option> +</select> +<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- font -</option> +<option>Arial</option> +<option>Arial Black</option> +<option>Courier New</option> +<option>Times New Roman</option> +</select> +<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- size -</option> +<option value="1">Very small</option> +<option value="2">A bit small</option> +<option value="3">Normal</option> +<option value="4">Medium-large</option> +<option value="5">Big</option> +<option value="6">Very big</option> +<option value="7">Maximum</option> +</select> +<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- color -</option> +<option value="red">Red</option> +<option value="blue">Blue</option> +<option value="green">Green</option> +<option value="black">Black</option> +</select> +<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- background -</option> +<option value="red">Red</option> +<option value="green">Green</option> +<option value="black">Black</option> +</select> +</div> +<div id="toolBar2"> +<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" /> +<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC"> +<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" /> +<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" /> +<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="> +<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" /> +<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" /> +<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" /> +<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" /> +<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" /> +<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" /> +<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" /> +<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" /> +<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" /> +<img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" /> +<img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" /> +<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" /> +<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" /> +<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" /> +<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" /> +</div> +<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div> +<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p> +<p><input type="submit" value="Send" /></p> +</form> +</body> +</html> +</pre> +</div> + +<div class="note"><strong>注意:</strong> 如果你想知道如何标准的在你的页面中创建和插入编辑器，请查阅 <a class="internal" href="/@api/deki/files/6243/=rich-text-editor.zip" title="rich-text-editor.zip">更多完整的富文本编辑器例子</a>.</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li>全局属性 {{htmlattrxref("contenteditable")}} </li> + <li><a href="/en-US/docs/Mozilla/Projects/Midas">Midas</a> (支持脚本的文本编辑器组件)</li> + <li>{{cssxref("caret-color")}}, 用来设置文本插入光标的颜色</li> +</ul> diff --git a/files/zh-cn/web/guide/html/content_editable/rich-text_editing_in_mozilla/index.html b/files/zh-cn/web/guide/html/content_editable/rich-text_editing_in_mozilla/index.html new file mode 100644 index 0000000000..f237e94b61 --- /dev/null +++ b/files/zh-cn/web/guide/html/content_editable/rich-text_editing_in_mozilla/index.html @@ -0,0 +1,272 @@ +--- +title: Mozilla中的富文本编辑器 +slug: Web/Guide/HTML/Content_Editable/Rich-Text_Editing_in_Mozilla +tags: + - 富文本 + - 指南 +translation_of: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla +--- +<p>Mozilla 1.3 实现了微软 IE 浏览器的 designMode 特性。Mozilla 1.3 的富文本编辑器支持的 designMode 特性能将 HTML 文档转换为富文本编辑器。从 Firefox 3 开始，Mozilla 也支持 IE 的 contentEditable 属性，该属性允许将任意元素设置为可编辑或不可编辑的（后者可阻止在可编辑环境中，对固定元素的改变）。</p> + +<h3 id="配置富文本编辑">配置富文本编辑</h3> + +<p>富文本编辑通过设置文档的 "designMode" 属性为 "On" 来初始化。一旦 <code>designMode </code>设置为 "On" ，该文档即成为用户能够按使用 textarea 方式操作的富文本编辑区域。复制和粘贴等最基础的键盘操作可用，而其它命令则需通过站点实现。</p> + +<p>类似地，将 "contentEditable" 属性设置为 "true" 后，用户能够将文档中的独立元素设置为可编辑的。</p> + +<h3 id="执行命令">执行命令</h3> + +<p>当 HTML 文档切换至 designMode 时，文档对象将暴露出 "document.execCommand" 方法，允许用户运行命令以操作可编辑区域的内容。多数命令影响文档的选中区域（加粗、斜体等），而其余命令则可插入新元素（添加新行）或影响整行（缩进）。当使用 contentEditable 时，调用 execCommand 将影响当前活跃的可编辑元素。</p> + +<h3 id="与_IE_区别">与 IE 区别</h3> + +<p>Mozilla 与 IE 在 designMode 下的一个显著区别在于可编辑区域中所生成的代码。在 IE 中使用 em 与 i 等 HTML 标签，而 Mozilla 则默认生成带有内联样式规则的 span 标签。可通过 <code>styleWithCSS </code>命令以在 CSS 与 HTML 标记中切换。</p> + +<p><strong>Figure 1 : 生成 HTML 的区别</strong></p> + +<p>Mozilla:</p> + +<pre><code><span style="font-weight: bold;">I love geckos.</span> +<span style="font-weight: bold; font-style: italic; + text-decoration: underline;">Dinosaurs are big.</span></code></pre> + +<p>Internet Explorer:</p> + +<pre><code><STRONG>I love geckos.</STRONG> +<STRONG><EM><U>Dinosaurs are big.</U></EM></STRONG></code> +</pre> + +<p>Mozilla 与 IE 的另一个区别是在与 designMode 结合使用的场景中，其访问 iframe 中文档对象的方式。Mozilla 使用了 W3C 的标准方式，即 <code>IFrameElement.<a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-38538621">contentDocument</a>，而</code> IE 则使用了 <code>IFrameElement.document</code>.</p> + +<p><em><strong>DevEdge</strong></em> 提供了一个 JavaScript 辅助工具类，<code><a href="https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" title="en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode</a>，</code>它封装了 IE 与 Mozilla 之间的 designMode 差异特性。</p> + +<p><br> + <strong>禁用事件处理</strong></p> + +<p>另一额外的区别在于，Mozilla 中一旦切换至 designMode，那么该文档上绑定的全部事件将被禁用。在 designMode 关闭后（如在 Mozilla 1.5 中可用），事件重新可用。</p> + +<p>在 <a href="https://developer.mozilla.org/en/Migrate_apps_from_Internet_Explorer_to_Mozilla" title="en/Migrate_apps_from_Internet_Explorer_to_Mozilla">Migrate apps from Internet Explorer to Mozilla</a> 中的 <a href="https://developer.mozilla.org/en/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing" title="en/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing">Rich text editing</a> 章节可查看更多信息。</p> + +<h3 id="示例">示例</h3> + +<h4 id="示例_1">示例 1</h4> + +<p>第一个示例中，将 HTML 文档中的 <code>designMode </code>设置为 "On"。在 Mozilla 1.3 中这将使整篇文档均可编辑。但在 IE 中并不支持通过 JavaScript 改变文档的 <code>designMode</code> 特性。需要兼容 IE 时，body 标签中的 <code>contentEditable</code> 属性需要设置为 "true"。</p> + +<p><strong>Figure 2 : 第一个示例</strong></p> + +<pre><code>HTML: +<body contentEditable="true" onload="load()"> + +JavaScript: +function load(){ + window.document.designMode = "On"; +}</code></pre> + +<h4 id="示例_2">示例 2</h4> + +<p>第二个示例是一个支持文本加粗、斜体、下划线，以及添加链接、改变文本颜色等特性的富文本编辑页面。示例页面带有一个作为富文本编辑区域的 iframe 区域，以及用于实现基础编辑命令的加粗、斜体、文本颜色等编辑元素。</p> + +<p><strong>Figure 3 : 配置富文本编辑</strong></p> + +<pre><code>HTML: +<body onload="load()"> + +JavaScript: +function load(){ + getIFrameDocument("editorWindow").designMode = "On"; +} +//获取对象 +function getIFrameDocument(aID){ + // if contentDocument exists, W3C compliant (Mozilla) + if (document.getElementById(aID).contentDocument){ + return document.getElementById(aID).contentDocument; + } else { + // IE + return document.frames[aID].document; + } +}</code> +</pre> + +<p>该示例包含了 <code>doRichEditCommand</code> 函数以简化对 iframe 的命令操作，并保持 HTML 代码的整洁。执行所需命令的函数使用了 <code>execCommand()</code> 并将焦点设回可编辑文档，以避免点击按钮等操作时的焦点设置打断编辑流程。</p> + +<p><strong>Figure 4 : 执行富文本编辑命令</strong></p> + +<pre><code>HTML: +<button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button> + +JavaScript: +function doRichEditCommand(aName, aArg){ + getIFrameDocument('editorWindow').execCommand(aName,false, aArg); + document.getElementById('editorWindow').contentWindow.focus() +}</code></pre> + +<h3 id="示例：一个简易但完整的富文本编辑器">示例：一个简易但完整的富文本编辑器</h3> + +<pre><code><!doctype html> +<html> +<head> +<title>Rich Text Editor</title> +<script type="text/javascript"> +var oDoc, sDefTxt; + +function initDoc() { + oDoc = document.getElementById("textBox"); + sDefTxt = oDoc.innerHTML; + if (document.compForm.switchMode.checked) { setDocMode(true); } +} + +function formatDoc(sCmd, sValue) { + if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); } +} + +function validateMode() { + if (!document.compForm.switchMode.checked) { return true ; } + alert("Uncheck \"Show HTML\"."); + oDoc.focus(); + return false; +} + +function setDocMode(bToSource) { + var oContent; + if (bToSource) { + oContent = document.createTextNode(oDoc.innerHTML); + oDoc.innerHTML = ""; + var oPre = document.createElement("pre"); + oDoc.contentEditable = false; + oPre.id = "sourceText"; + oPre.contentEditable = true; + oPre.appendChild(oContent); + oDoc.appendChild(oPre); + } else { + if (document.all) { + oDoc.innerHTML = oDoc.innerText; + } else { + oContent = document.createRange(); + oContent.selectNodeContents(oDoc.firstChild); + oDoc.innerHTML = oContent.toString(); + } + oDoc.contentEditable = true; + } + oDoc.focus(); +} + +function printDoc() { + if (!validateMode()) { return; } + var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); + oPrntWin.document.open(); + oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>"); + oPrntWin.document.close(); +} +</script> +<style type="text/css"> +.intLink { cursor: pointer; } +img.intLink { border: 0; } +#toolBar1 select { font-size:10px; } +#textBox { + width: 540px; + height: 200px; + border: 1px #000000 solid; + padding: 12px; + overflow: scroll; +} +#textBox #sourceText { + padding: 0; + margin: 0; + min-width: 498px; + min-height: 200px; +} +#editMode label { cursor: pointer; } +</style> +</head> +<body onload="initDoc();"> +<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;"> +<input type="hidden" name="myDoc"> +<div id="toolBar1"> +<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option selected>- formatting -</option> +<option value="h1">Title 1 &lt;h1&gt;</option> +<option value="h2">Title 2 &lt;h2&gt;</option> +<option value="h3">Title 3 &lt;h3&gt;</option> +<option value="h4">Title 4 &lt;h4&gt;</option> +<option value="h5">Title 5 &lt;h5&gt;</option> +<option value="h6">Subtitle &lt;h6&gt;</option> +<option value="p">Paragraph &lt;p&gt;</option> +<option value="pre">Preformatted &lt;pre&gt;</option> +</select> +<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- font -</option> +<option>Arial</option> +<option>Arial Black</option> +<option>Courier New</option> +<option>Times New Roman</option> +</select> +<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- size -</option> +<option value="1">Very small</option> +<option value="2">A bit small</option> +<option value="3">Normal</option> +<option value="4">Medium-large</option> +<option value="5">Big</option> +<option value="6">Very big</option> +<option value="7">Maximum</option> +</select> +<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- color -</option> +<option value="red">Red</option> +<option value="blue">Blue</option> +<option value="green">Green</option> +<option value="black">Black</option> +</select> +<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- background -</option> +<option value="red">Red</option> +<option value="green">Green</option> +<option value="black">Black</option> +</select> +</div> +<div id="toolBar2"> +<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" /> +<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC"> +<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" /> +<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" /> +<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="> +<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" /> +<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" /> +<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" /> +<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" /> +<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" /> +<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" /> +<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" /> +<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" /> +<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" /> +<img class="intLink" title="Add indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" /> +<img class="intLink" title="Delete indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" /> +<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" /> +<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" /> +<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" /> +<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" /> +</div> +<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div> +<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p> +<p><input type="submit" value="Send" /></p> +</form> +</body> +</html></code></pre> + + + +<p><strong>注意：</strong> 如果你想查看如何将创建与插入编辑器至页面的流程标准化的内容，请查看 <a href="https://developer.mozilla.org/@api/deki/files/6243/=rich-text-editor.zip" title="rich-text-editor.zip">more complete rich-text editor example</a>.</p> + +<h3 id="相关资源">相关资源</h3> + +<ul> + <li><a href="http://mozilla.org/editor/midas-spec.html">mozilla.org's rich-text editing Specification</a></li> + <li><a href="http://mozilla.org/editor/midasdemo/">mozilla.org's rich-text editing Demo</a></li> + <li><a href="http://www.mozilla.org/editor/ie2midas.html">Converting an app using document.designMode from IE to Mozilla at mozilla.org</a></li> + <li><code><a href="/en-US/docs/Web/API/Document/designMode">designMode</a></code></li> + <li><a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms537834(v=vs.85)">MSDN: How to Create an HTML Editor Application</a></li> + <li><a href="http://www.kevinroth.com/rte/demo.htm">A closed source, cross-browser rich-text editing demo</a></li> + <li><a href="https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" title="en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode; a JavaScript helper class for easier cross-browser development using designMode.</a></li> + <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-contenteditable/">Firefox 3 and contentEditable</a></li> +</ul> diff --git a/files/zh-cn/web/guide/html/email_links/index.html b/files/zh-cn/web/guide/html/email_links/index.html new file mode 100644 index 0000000000..3a020fcbee --- /dev/null +++ b/files/zh-cn/web/guide/html/email_links/index.html @@ -0,0 +1,85 @@ +--- +title: Email links +slug: Web/Guide/HTML/Email_links +tags: + - HTML5 + - SEO + - a + - email link + - mailto +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links +--- +<p>这往往是有益的Web站点能够创建链接或按钮，点击后，打开一个新的出站电子邮件。例如，这可能会创造一个“联系我们”按钮时使用。这是使用完成<span class="seoSummary">{{HTMLElement("a")}} </span>元素和mailto URL方案。<span class="seoSummary">.</span></p> + +<h2 id="Mailto_基础">Mailto 基础</h2> + +<p>以它最基础和最常用的形式，一个<code>mailto</code>链接仅简单的指明目标收件人的邮箱地址。例如：</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a> + +Complete examples detail: + +<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com +&amp;subject=The%20subject%20of%20the%20email +&amp;body=The%20body%20of%20the%20email"> +Send mail with cc, bcc, subject and body</a></pre> + + + +<p>这导致链接看起来像这样: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p> + +<p>事实上, 目标收件人邮件地址都是可选的。 如果你不添加它 (也就是，你的{{htmlattrxref("href", "a")}} 是简单的 "mailto:")，用户的邮件客户端将打开一个新的外发电子邮件窗口，该窗口尚未指定目标地址。这通常非常有用，因为用户可以单击“共享”链接以将电子邮件发送到他们选择的地址。</p> + +<h2 id="指定细节">指定细节</h2> + +<p>除了电子邮件地址，您还可以提供其他信息。事实上, 任何标准的邮件头字段都可以添加到您提供的<code>mailto</code> URL中。 最广泛使用的是： "subject", "cc", and "body" (这不是真正的标题字段，但允许您为新电子邮件指定简短内容消息). 每个字段及其值都被指定为一个查询字词（query term）。</p> + +<div class="blockIndicator note"> +<dl> + <dt>译者注：</dt> +</dl> + +<ul> + <li>`subject`：主题</li> + <li>`cc`：抄送到次要收件人（与邮件有关但无需做出应答的个人或组织）</li> + <li> `bcc`：密送到其他收件人。主要、次要收件人不应该获得密送收件人的身份。</li> + <li>`body`：邮件内容</li> +</ul> +</div> + +<div class="note"> +<p><strong>Note:</strong> 每个字段的值都必须进行编码 (也就是, 带有非印刷字符和空格 <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>).</p> +</div> + +<h3 id="样品mailto_网址">样品mailto 网址</h3> + +<p>这有一些有关<code> mailto</code> 的示例链接:</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> +</ul> + +<p>请注意，使用＆符号来分隔mailto URL中的每个字段。这是标准的URL查询表示法。</p> + +<h3 id="例子">例子</h3> + +<p>如果您想创建一封要求订阅新闻通讯的外发电子邮件, 您可能会使用一个 <code>mailto链接，像这样</code>:</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org?subject=Newsletter%20subscription%20request&body=Please%20subscribe%20me%20to%20your%20newsletter!%0A%0AFull%20name%3A%0A%0AWhere%20did%20you%20hear%20about%20us%3F"> +Subscribe to our newsletter +</a></pre> + +<p>结果链接看起来像这样: <a href="mailto:nowhere@mozilla.org?subject=Newsletter%20subscription%20request&body=Please%20subscribe%20me%20to%20your%20newsletter!%0A%0AFull%20name%3A%0A%0AWhere%20did%20you%20hear%20about%20us%3F">Subscribe to our newsletter</a>.</p> + +<section id="Quick_Links"> +<ol> + <li>{{HTMLElement("a")}}</li> + <li>{{RFC(6068, "The 'mailto' URI Scheme")}}</li> + <li>{{RFC(5322, "Internet Message Format")}}</li> + <li><a href="http://www.url-encode-decode.com/">URL encode/decode online</a></li> +</ol> +</section> diff --git a/files/zh-cn/web/guide/html/forms_in_html/index.html b/files/zh-cn/web/guide/html/forms_in_html/index.html new file mode 100644 index 0000000000..24a27db5b5 --- /dev/null +++ b/files/zh-cn/web/guide/html/forms_in_html/index.html @@ -0,0 +1,144 @@ +--- +title: HTML 中的表单 +slug: Web/Guide/HTML/Forms_in_HTML +tags: + - HTML5 + - HTML5 form updates + - form +translation_of: Learn/HTML/Forms/HTML5_updates +--- +<div>HTML5中的表单元素和属性提供了比HTML4更多的语义标记，并取消了大量的在HTML4不可缺少的脚本和样式。HTML5中的表单功能为用户提供了更好的体验，使表单在不同网站之间更一致，并向用户提供有关数据输入的即时反馈。它们还为使用禁用脚本的浏览器的用户提供相同的用户体验。</div> + +<div> </div> + +<div>本文总结了HTML5中的表单变化。有关使用表单的详细指南，请参阅我们更多的<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms">HTML表单指南</a>。</div> + +<div> </div> + +<h2 id="The_input_element" name="The_input_element"><code><input></code> 元素</h2> + +<p><code>{{HTMLElement("input")}}</code> 的 {{htmlattrxref("type", "input")}} 特性拥有更多的值。（请观看 {{HTMLElement("input")}} 获得完整列表）</p> + +<ul> + <li><code>search</code>: 这个元素呈现为一个搜索框。除了换行符会自动从输入中移除，无其他强制性语法。</li> + <li><code>tel</code>: 这个元素可现为一个编辑电话号码的输入控件。因为电话号码国际化差异非常明显，所以除了换行符会自动从输入中移除，无其他强制性语法。你可以使用如 {{htmlattrxref("pattern", "input")}} 与 {{htmlattrxref("maxlength", "input")}} 等属性来限制输入到控件中的值。</li> + <li><code>url</code>: 这个元素呈现为一个编辑<a class="external" href="http://en.wikipedia.org/URL" title="http://en.wikipedia.org/wiki/URL">URL</a> 的输入控件。换行符与首尾的空格将会被自动去除。</li> + <li> + <p><code>email</code>: 这个元素呈现为一个邮件地址。换行符会被自动去除。可以设置一个无效的邮件地址，但若满足输入框的限制，必须遵守在<span style="font-family: Arial; font-size: medium; line-height: 26px;">扩展的巴科斯范式(ABNF)中的规范：</span><code style="font-size: 14px;">1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code><span style="line-height: 1.5em;"> 其中</span><code style="font-size: 14px;">atext</code><span style="line-height: 1.5em;"> 在规范</span><a class="external" href="http://tools.ietf.org/html/rfc5322#section-3.2.3" style="line-height: 1.5em;">RFC 5322 section 3.2.3</a> 中被定义<span style="line-height: 1.5em;">,而</span><code style="font-size: 14px;">ldh-str在规范</code><a class="external" href="http://tools.ietf.org/html/rfc1034#section-3.5" style="line-height: 1.5em;">RFC 1034 section 3.5</a> 中被定义。<span style="line-height: 1.5em;">.</span></p> + + <div class="note"><strong>注意:</strong> 若设置{{htmlattrxref("multiple", "input")}}属性，{{HTMLElement("input")}} 区域中可以用逗号分割的方式，输入多个email, 但 Firefox不支持.</div> + </li> +</ul> + +<p> {{HTMLElement("input")}} 元素也拥有一些新的特性。</p> + +<ul> + <li>{{htmlattrxref("list", "input")}}： {{HTMLElement("datalist")}} 元素的 ID，该元素的内容，{{HTMLElement("option")}} 元素被用作提示信息，会在 input 的建议区域作为提议显示出来。</li> + <li>{{htmlattrxref("pattern", "input")}}： 一个正则表达式，用于检查控件的值，能够作用于 {{htmlattrxref("type", "input")}} 值是 <code>text，</code> <code>tel，</code> <code>search，</code> <code>url，</code> 和 <code>email 的 input 元素。</code></li> + <li>{{htmlattrxref("form", "input")}}： 一个字符串，用于表明该 input 属于哪个 {{HTMLElement("form")}} 元素。一个 input 只能存在于一个表单中。</li> + <li>{{htmlattrxref("formmethod", "input")}}：一个字符串，用于表明表单提交时会使用哪个 HTTP 方法 (GET 或 POST)；如果定义了它，则可以覆盖 {{HTMLElement("form")}} 元素上的 {{htmlattrxref("method", "form")}} 特性。只有当 {{htmlattrxref("type", "input")}} 值为 <code>image</code> 或 <code>submit，并且 </code>{{htmlattrxref("form", "input")}} 特性被设置的情况下， {{htmlattrxref("formmethod", "input")}} 才能生效。</li> + <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}： 一个字符串，当表单字段验证失败后显示错误信息。该值为 Mozilla 扩展，并非标准。</li> +</ul> + +<h2 id="text_input">text input</h2> + +<dl> + <dt> </dt> +</dl> + +<p>这个程序段段定义了一个用户可以输入的一行input。</p> + +<pre><code><form> + Enter your Name <input type="text" name="name"> +</form></code></pre> + +<h2 id="checkboxes"><strong>checkboxes</strong></h2> + +<p>这个程序段允许用户选择多个选项。</p> + +<pre><code><input type="checkbox" name="chk" value="" checked> Do you want the newsletter</code></pre> + +<h2 id="The_form_element" name="The_form_element">Radio < input> element</h2> + +<pre><code><form> + <input type="radio" name="frequency" value="daily">Daily<br> + <input type="radio" name="frequency" value="weekly">Weekly<br> + <input type="radio" name="frequency" value="monthly">Monthly<br> + <input type="radio" name="frequency" value="yearly">Yearly +</form></code></pre> + +<h2 id="The_form_element" name="The_form_element"><code><form></code> 元素</h2> + +<p>{{HTMLElement("form")}} 元素有了一个新特性：</p> + +<ul> + <li>{{htmlattrxref("novalidate", "form")}}：设置了该特性不会在表单提交之前对其进行验证。</li> +</ul> + +<h2 id="The_datalist_element" name="The_datalist_element"><code><datalist> 元素</code></h2> + +<p>{{HTMLElement("datalist")}} 元素会在填写 <span style="line-height: inherit;">{{HTMLElement("input")}} 字段时，显示一列</span><span style="line-height: inherit;"> {{HTMLElement("option")}} 作为提示。</span></p> + +<p>你可以使用 {{HTMLElement("input")}} 元素上的<span style="line-height: inherit;"> {{htmlattrxref("list", "input")}} 特性来将一个特定的 input 与特定的</span><span style="line-height: inherit;"> {{HTMLElement("datalist")}} 元素做关联。</span></p> + +<h2 id="The_output_element" name="The_output_element"><code><output></code> 元素</h2> + +<p><code>{{HTMLElement("output")}}</code> 元素表示计算的结果。</p> + +<p>你可以使用 {{htmlattrxref("for", "output")}} 特性来在 <code>{{HTMLElement("output")}}</code> 元素与文档内其他能够影响运算的元素(例如，input 或参数)建立关联。 {{htmlattrxref("for", "output")}} 特性的值是以空格做分隔的其他元素的 ID 列表。</p> + +<p>{{non-standard_inline}} Gecko 2.0 (其他浏览器并非如此) 支持为 <span style="line-height: inherit;">{{HTMLElement("output")}} 元素自定义有效性约束(</span><span style="line-height: 21px;">validity constraints</span><span style="line-height: inherit;">)与错误信息，可以对其使用如下 CSS 伪类：</span><span style="line-height: inherit;">{{Cssxref(":invalid")}}， {{Cssxref(":valid")}}， {{Cssxref(":-moz-ui-invalid")}}，与 {{Cssxref(":-moz-ui-valid")}}。在如下情况会显得很有用：例如计算结果违反了业务规则，但却并非因为特定的 input 值出现错误(例如，</span><span style="line-height: inherit;">「百分比总数不能超过100</span><span style="line-height: inherit;">」</span><span style="line-height: inherit;">)。</span></p> + +<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">placeholder 特性</h2> + +<p>{{htmlattrxref("placeholder", "input")}} 特性作用于 <code>{{HTMLElement("input")}}</code> 与 <code>{{HTMLElement("textarea")}}</code> 元素上，提示用户此域内能够输入什么内容。placeholder 中的文本不能包含回车与换行。</p> + +<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">autofocus 特性</h2> + +<p>{{htmlattrxref("autofocus", "input")}} 特性让你能够指定一个表单控件，当页面载入后该表单自动获得焦点，除非用户覆盖它，例如在另一个控件中输入值。一个文档内只有一个表单能够拥有 <code>autofocus</code> 特性，它是一个 Boolean 值。这个特性适用于 <code>{{HTMLElement("input")}}，</code> <code>{{HTMLElement("button")}}，</code> <code>{{HTMLElement("select")}}，与<font face="Lucida Grande, Lucida Sans Unicode, DejaVu Sans, Lucida, Arial, Helvetica, sans-serif"> </font></code><code>{{HTMLElement("textarea")}}</code> 元素。例外情况是，如果一个 {{htmlattrxref("autofocus", "input")}} 元素的 {{htmlattrxref("type", "input")}} 特性值设置成了 <code>hidden，则</code><span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">autofocus</code><span style="line-height: inherit;"> 无法生效(就是说，你无法让一个隐藏控件自动获得焦点)。</span></p> + +<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">label.control DOM 属性</h2> + +<p><code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> DOM 接口除了为 <code>{{HTMLElement("label")}}</code> 元素提供了对应的特性外，还提供了一个额外的属性。 <strong>control</strong> 属性返回被打上标签的控件，就是 label 适用的控件，由 {{htmlattrxref("for", "label")}} 特性(如果定义的话) 或是第一个后代元素控件来确定。</p> + +<h2 id="Constraint_Validation" name="Constraint_Validation">约束验证</h2> + +<p>HTML5 为客户端表单的验证提供了语法与 API。当然这些功能无法取代服务器端验证，<span style="line-height: inherit;">出于安全性与数据完整性的考虑，服务器端验证仍然必不可少，但是客户端验证能够通过对输入数据的即时反馈来提供良好的用户体验。</span></p> + +<p>如果 {{HTMLElement("input")}} 元素设置了<span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">title 特性，当验证失败时，特性值会显示在提示信息中。如果</code><span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">title</code><span style="line-height: inherit;"> 设置为空字符串，则不会显示提示信息。如果没有设置 </span><code style="font-size: 14px; line-height: inherit;">title</code><span style="line-height: inherit;"> 特性，会使用标准验证信息(例如通过 {{htmlattrxref("x-moz-errormessage")}} 特性指定，或调用 </span><code style="font-size: 14px; line-height: inherit;">setCustomValidity()</code><span style="line-height: inherit;"> 方法) 代为显示。</span></p> + +<div class="note"><strong>注意：</strong> 约束验证不支持表单中的 {{HTMLElement("button")}} 元素；若想基于表单的验证结果来改变按钮的样式，可以使用 {{cssxref(":-moz-submit-invalid")}} 伪类。</div> + +<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">约束验证的 HTML 语法</h3> + +<p>下列 HTML5 语法中的条目用于为表单数据指定约束。</p> + +<ul> + <li>{{HTMLElement("input")}}, {{HTMLElement("select")}}， 和 {{HTMLElement("textarea")}} 元素上的 {{htmlattrxref("required", "input")}} 特性，指定必须提供该元素的值。(在 {{HTMLElement("input")}} 元素上， {{htmlattrxref("required", "input")}} 只能与特定的 {{htmlattrxref("type", "input")}} 特性值结合起来生效。)</li> + <li>{{HTMLElement("input")}} 元素上的 {{htmlattrxref("pattern", "input")}} 特性用于限定元素值必须匹配一个特定的正则表达式。</li> + <li>{{HTMLElement("input")}} 元素上的 {{htmlattrxref("min", "input")}} 与 {{htmlattrxref("max", "input")}} 特性限定了能够输入元素的最大与最小值。</li> + <li>{{HTMLElement("input")}} 元素的 {{htmlattrxref("step", "input")}} 特性(与 {{htmlattrxref("min", "input")}} 与 {{htmlattrxref("max", "input")}} 特性结合使用) 限定了输入值的间隔。如果一个值与允许值的梯级不相符，则它无法通过验证。</li> + <li>{{HTMLElement("input")}} 与 {{HTMLElement("textarea")}} 元素的 {{htmlattrxref("maxlength", "input")}} 特性限制了用户能够输入的最大字符数(在 Unicode 代码点内)。</li> + <li>{{htmlattrxref("type", "input")}} 的 <code>url</code> 与 <code>email</code> 值分别用于限制输入值是否为有效的 URL 或电子邮件地址。</li> +</ul> + +<p>此外，若要阻止对表单进行约束验证，你可以在 <span style="line-height: inherit;">{{HTMLElement("form")}} 上设置</span><span style="line-height: inherit;"> </span><span style="line-height: inherit;">{{htmlattrxref("novalidate", "form")}} 特性，或在 </span><span style="line-height: inherit;">{{HTMLElement("button")}} 与 {{HTMLElement("input")}} 元素(当 </span><span style="line-height: inherit;">{{htmlattrxref("type", "input")}} 是 </span><code style="font-size: 14px; line-height: inherit;">submit</code><span style="line-height: inherit;"> 或 </span><code style="font-size: 14px; line-height: inherit;">image</code><span style="line-height: inherit;">)上设置 </span><span style="line-height: inherit;">{{htmlattrxref("formnovalidate", "button")}} 特性。这些特性指定了当表单提交时不做验证。</span></p> + +<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">约束验证 API</h3> + +<p>下面这些 DOM 属性与方法和约束验证相关，能够在客户端脚本中使用：</p> + +<ul> + <li><code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code> 对象上的 <code>checkValidity()</code> 方法，当表单的相关元素都通过了它们的约束验证时返回 true，否则返回 false。</li> + <li>在 <a href="/en-US/docs/HTML/Content_categories#Form-associated" title="HTML/Content Categories#form-associated">表单相关元素</a>上： + <ul> + <li><code>willValidate</code> 属性，如果元素的约束没有被符合则值为 false。</li> + <li><code>validity</code> 属性，是一个 <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> 对象，表示元素当前所处的验证状态(就是说约束成功或是失败)。</li> + <li><code>validationMessage</code> 属性，用于描述与元素相关约束的失败信息。</li> + <li><code>checkValidity()</code> 方法，如果元素没有满足它的任意约束，返回false，其他情况返回 true。</li> + <li><code>setCustomValidity()</code> 方法，设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的信息。</li> + </ul> + </li> +</ul> + +<div>{{HTML5ArticleTOC}}</div> diff --git a/files/zh-cn/web/guide/html/html/index.html b/files/zh-cn/web/guide/html/html/index.html new file mode 100644 index 0000000000..ee911ca9a1 --- /dev/null +++ b/files/zh-cn/web/guide/html/html/index.html @@ -0,0 +1,181 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML +tags: + - HTML + - HTML5 + - Web + - Web 开发 + - 帮助 + - 指南 + - 综述 +--- +<div class="callout-box"> +<div style="font: normal 20px 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif; text-transform: uppercase;">HTML5 演示</div> + +<p>展示了实战中的最新 HTML 技术的 <a href="/zh-CN/demos/tag/tech:html5" title="demos/tag/tech:css3/">演示汇总</a>。</p> + +<p><a href="/zh-CN/docs/HTML/HTML5" title="html5"><img alt="HTML5_Logo_128.png" class="default internal" src="/@api/deki/files/6020/=HTML5_Logo_128.png"></a></p> +</div> + +<p><span class="seoSummary"><strong>HTML5</strong> 是 <a href="/zh-CN/docs/HTML" title="HTML">HTML</a> 标准的最新演进版本。 </span>这个术语代表了两个不同的概念：</p> + +<p><span class="seoSummary">它是</span><span style="line-height: 1.5;">一个新的 HTML </span><em>语言</em><span style="line-height: 1.5;">版本</span><span style="line-height: 1.5;">包含了新的元素，属性和行为，</span><span class="seoSummary" style="line-height: 1.5;">同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。</span><span style="line-height: 1.5;"> 这套技术往往被称作 </span><em>HTML5 和它的朋友们，</em><span style="line-height: 1.5;">通常简称为 </span><em>HTML5</em><span style="line-height: 1.5;">。</span></p> + +<p>从要对全部所有的 Web 开发人员有用这一点出发，这个参考页面链接了有关 HTML5 技术的大量资源，并且基于它们各自的功能，把它们归类成了若干组。</p> + +<ul> + <li><em>语义</em>：能够让你更恰当地描述你的内容是什么。</li> + <li><em>连通性</em>：能够让你和服务器之间通过创新的新技术方法进行通信。</li> + <li><em>离线 & 存储</em>：能够让网页在客户端本地存储数据以及更高效地离线运行。</li> + <li><em>多媒体</em>：使 video 和 audio 成为了在所有 Web 中的一等公民。</li> + <li><em>2D/3D 绘图 & 效果</em>：提供了一个更加分化范围的呈现选择。</li> + <li><em>性能 & 集成</em>：提供了非常显著的性能优化和更有效的计算机硬件使用。</li> + <li><em>设备访问 Device Access</em>：能够处理各种输入和输出设备。</li> + <li><em>样式设计</em>: 让作者们来创作更加复杂的主题吧！</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/HTML/Forms_in_HTML" title="HTML5 的表单">HTML5 的表单</a></dt> + <dd>看一下 HTML5 中对 web 表单的改进：约束确认 API，一些新的属性，{{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")}}，也增加了<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/Using_HTML5_audio_and_video" 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>允许使用，操作计算机摄像头，并从中存储图像。Allows to use, manipulate and store an image from the computer's camera.</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">conentEditable 属性：把你的网站改变成 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> 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 new file mode 100644 index 0000000000..befe2acc41 --- /dev/null +++ b/files/zh-cn/web/guide/html/html5/constraint_validation/index.html @@ -0,0 +1,339 @@ +--- +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/html5_element_list/index.html b/files/zh-cn/web/guide/html/html5/html5_element_list/index.html new file mode 100644 index 0000000000..b1b28a4fea --- /dev/null +++ b/files/zh-cn/web/guide/html/html5/html5_element_list/index.html @@ -0,0 +1,590 @@ +--- +title: HTML5 标签列表 +slug: Web/Guide/HTML/HTML5/HTML5_element_list +tags: + - HTML + - HTML5 + - Web + - 初学者 + - 指南 +translation_of: Web/HTML/Element +--- +<p>这里列出了所有<strong>标准化的 HTML5 元素</strong>，使用起始标签描述，按照功能分组。与列出所有标准化的、非标准化的、有效的、废弃的标签的 <a href="/zh-CN/docs/HTML/Element" title="HTML/Element">HTML 元素索引</a> 不同的是，该页只列出有效的 HTML5 元素。新网站应当只使用这里列出的元素。</p> + +<p>符号 <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a> 代表该元素是在 HTML5 中新增的。另外注意，这里列出的其他元素可能在 HTML5 标准中得到了扩充或经过修改。</p> + +<h2 id="根元素">根元素</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("html")}}</td> + <td>代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。</td> + </tr> + </tbody> +</table> + +<h2 id="文档元数据">文档元数据</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("head")}}</td> + <td>代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。</td> + </tr> + <tr> + <td>{{HTMLElement("title")}}</td> + <td>定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。</td> + </tr> + <tr> + <td>{{HTMLElement("base")}}</td> + <td>定义页面上相对 URL 的基准 URL。</td> + </tr> + <tr> + <td>{{HTMLElement("link")}}</td> + <td>用于链接外部资源到该文档。</td> + </tr> + <tr> + <td>{{HTMLElement("meta")}}</td> + <td>定义其他 HTML 元素无法描述的元数据。</td> + </tr> + <tr> + <td>{{HTMLElement("style")}}</td> + <td>用于内联 CSS。</td> + </tr> + </tbody> +</table> + +<h2 id="脚本">脚本</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("script")}}</td> + <td>定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。</td> + </tr> + <tr> + <td>{{HTMLElement("noscript")}}</td> + <td>定义当浏览器不支持脚本时显示的替代文字。</td> + </tr> + <tr> + <td>{{HTMLElement("template")}}<a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>通过 JavaScript 在运行时实例化内容的容器。</td> + </tr> + </tbody> +</table> + +<h2 id="章节">章节</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("body")}}</td> + <td> + <div>代表 HTML 文档的内容。在文档中只能有一个 <code><body></code> 元素。</div> + </td> + </tr> + <tr> + <td>{{HTMLElement("section")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义文档中的一个章节。</td> + </tr> + <tr> + <td>{{HTMLElement("nav")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义只包含导航链接的章节。</td> + </tr> + <tr> + <td>{{HTMLElement("article")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义可以独立于内容其余部分的完整独立内容块。</td> + </tr> + <tr> + <td>{{HTMLElement("aside")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/HTML/Element/Heading_Elements"><code><h1>,<h2>,<h3>,<h4>,<h5>,<h6></code></a></td> + <td>标题元素实现了六层文档标题，<code><h1></code> 是最大的标题，<code><h6></code> 是最小的标题。标题元素简要地描述章节的主题。</td> + </tr> + <tr> + <td>{{HTMLElement("header")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。</td> + </tr> + <tr> + <td>{{HTMLElement("footer")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。</td> + </tr> + <tr> + <td>{{HTMLElement("address")}}</td> + <td>定义包含联系信息的一个章节。</td> + </tr> + <tr> + <td>{{HTMLElement("main")}}<a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义文档中主要或重要的内容。</td> + </tr> + </tbody> +</table> + +<h2 id="组织内容">组织内容</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("p")}}</td> + <td>定义一个段落。</td> + </tr> + <tr> + <td>{{HTMLElement("hr")}}</td> + <td>代表章节、文章或其他长内容中段落之间的分隔符。</td> + </tr> + <tr> + <td>{{HTMLElement("pre")}}</td> + <td>代表其内容已经预先排版过，格式应当保留 。</td> + </tr> + <tr> + <td>{{HTMLElement("blockquote")}}</td> + <td>代表引用自其他来源的内容。</td> + </tr> + <tr> + <td>{{HTMLElement("ol")}}</td> + <td>定义一个有序列表。</td> + </tr> + <tr> + <td>{{HTMLElement("ul")}}</td> + <td>定义一个无序列表。</td> + </tr> + <tr> + <td>{{HTMLElement("li")}}</td> + <td>定义列表中的一个列表项。</td> + </tr> + <tr> + <td>{{HTMLElement("dl")}}</td> + <td>定义一个定义列表（一系列术语和其定义）。</td> + </tr> + <tr> + <td>{{HTMLElement("dt")}}</td> + <td>代表一个由下一个 <code><dd></code> 定义的术语。</td> + </tr> + <tr> + <td>{{HTMLElement("dd")}}</td> + <td>代表出现在它之前术语的定义。</td> + </tr> + <tr> + <td>{{HTMLElement("figure")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个和文档有关的图例。</td> + </tr> + <tr> + <td>{{HTMLElement("figcaption")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个图例的说明。</td> + </tr> + <tr> + <td>{{HTMLElement("div")}}</td> + <td>代表一个通用的容器，没有特殊含义。</td> + </tr> + </tbody> +</table> + +<h2 id="文字形式">文字形式</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("a")}}</td> + <td>代表一个链接到其他资源的<em>超链接</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("em")}}</td> + <td>代表<em>强调</em> 文字。</td> + </tr> + <tr> + <td>{{HTMLElement("strong")}}</td> + <td>代表<em>特别重要</em> 文字。</td> + </tr> + <tr> + <td>{{HTMLElement("small")}}</td> + <td>代表<em>注释</em> ，如免责声明、版权声明等，对理解文档不重要。</td> + </tr> + <tr> + <td>{{HTMLElement("s")}}</td> + <td>代表<em>不准确或不相关</em> 的内容。</td> + </tr> + <tr> + <td>{{HTMLElement("cite")}}</td> + <td>代表<em>作品标题</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("q")}}</td> + <td>代表内联的<em>引用</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("dfn")}}</td> + <td>代表一个术语包含在其最近祖先内容中的<em>定义</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("abbr")}}</td> + <td>代表<em>省略</em> 或<em>缩写</em> ，其完整内容在 <code>title</code> 属性中。</td> + </tr> + <tr> + <td>{{HTMLElement("data")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>关联一个内容的<em>机器可读的等价形式</em> （该元素只在 WHATWG 版本的 HTML 标准中，不在 W3C 版本的 HTML5 标准中）。</td> + </tr> + <tr> + <td>{{HTMLElement("time")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>日期</em> 和<em>时间</em> 值；机器可读的等价形式通过 <code>datetime</code> 属性指定。</td> + </tr> + <tr> + <td>{{HTMLElement("code")}}</td> + <td>代表<em>计算机代码</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("var")}}</td> + <td>代表<em>代码中的变量</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("samp")}}</td> + <td>代表程序或电脑的<em>输出</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("kbd")}}</td> + <td>代表<em>用户输入</em> ，一般从键盘输出，但也可以代表其他输入，如语音输入。</td> + </tr> + <tr> + <td>{{HTMLElement("sub")}},{{HTMLElement("sup")}}</td> + <td>分别代表<em>下标</em> 和<em>上标</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("i")}}</td> + <td>代表一段<em>不同性质</em> 的文字，如技术术语、外文短语等。</td> + </tr> + <tr> + <td>{{HTMLElement("b")}}</td> + <td>代表一段<em>需要被关注</em> 的文字。</td> + </tr> + <tr> + <td>{{HTMLElement("u")}}</td> + <td>代表一段需要<em>下划线</em>呈现的文本注释，如标记出拼写错误的文字等。</td> + </tr> + <tr> + <td>{{HTMLElement("mark")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一段需要被高亮的<em>引用</em> 文字。</td> + </tr> + <tr> + <td>{{HTMLElement("ruby")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表被<em>ruby 注释</em> 标记的文本，如中文汉字和它的拼音。</td> + </tr> + <tr> + <td>{{HTMLElement("rt")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>ruby 注释</em> ，如中文拼音。</td> + </tr> + <tr> + <td>{{HTMLElement("rp")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表 ruby 注释两边的<em>额外插入文本</em> ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。</td> + </tr> + <tr> + <td>{{HTMLElement("bdi")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表需要<em>脱离</em> 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。</td> + </tr> + <tr> + <td>{{HTMLElement("bdo")}}</td> + <td>指定子元素的<em>文本方向</em> ，显式地覆盖默认的文本方向。</td> + </tr> + <tr> + <td>{{HTMLElement("span")}}</td> + <td>代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。</td> + </tr> + <tr> + <td>{{HTMLElement("br")}}</td> + <td>代表<em>换行</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("wbr")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>建议换行 (Word Break Opportunity)</em> ，当文本太长需要换行时将会在此处添加换行符。</td> + </tr> + </tbody> +</table> + +<h2 id="编辑">编辑</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("ins")}}</td> + <td>定义<em>增加</em> 到文档的内容。</td> + </tr> + <tr> + <td>{{HTMLElement("del")}}</td> + <td>定义从文档<em>移除</em> 的内容。</td> + </tr> + </tbody> +</table> + +<h2 id="嵌入内容">嵌入内容</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("img")}}</td> + <td>代表一张<em>图片</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("iframe")}}</td> + <td>代表一个<em>内联的框架</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("embed")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个<em>嵌入</em> 的外部资源，如应用程序或交互内容。</td> + </tr> + <tr> + <td>{{HTMLElement("object")}}</td> + <td>代表一个<em>外部资源</em> ，如图片、HTML 子文档、插件等。</td> + </tr> + <tr> + <td>{{HTMLElement("param")}}</td> + <td>代表 <code><object></code> 元素所指定的插件的<em>参数</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("video")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一段<em>视频</em> 及其视频文件和字幕，并提供了播放视频的用户界面。</td> + </tr> + <tr> + <td>{{HTMLElement("audio")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一段<em>声音</em> ，或<em>音频流</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("source")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>为 <code><video></code> 或 <code><audio></code> 这类媒体元素指定<em>媒体源</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("track")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>为 <code><video></code> 或 <code><audio></code> 这类媒体元素指定<em>文本轨道（字幕）</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("canvas")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>位图区域</em> ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。</td> + </tr> + <tr> + <td>{{HTMLElement("map")}}</td> + <td>与 <code><area></code> 元素共同定义<em>图像映射</em> 区域。</td> + </tr> + <tr> + <td>{{HTMLElement("area")}}</td> + <td>与 <code><map></code> 元素共同定义<em>图像映射</em> 区域。</td> + </tr> + <tr> + <td>{{SVGElement("svg")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义一个嵌入式<em>矢量图</em> 。</td> + </tr> + <tr> + <td>{{MathMLElement("math")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>定义一段<em>数学公式</em> 。</td> + </tr> + </tbody> +</table> + +<h2 id="表格">表格</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("table")}}</td> + <td>定义<em>多维数据</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("caption")}}</td> + <td>代表<em>表格的标题</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("colgroup")}}</td> + <td>代表表格中一组<em>单列或多列</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("col")}}</td> + <td>代表表格中的<em>列</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("tbody")}}</td> + <td>代表表格中一块<em>具体数据</em> （表格主体）。</td> + </tr> + <tr> + <td>{{HTMLElement("thead")}}</td> + <td>代表表格中一块<em>列标签</em> （表头）。</td> + </tr> + <tr> + <td>{{HTMLElement("tfoot")}}</td> + <td>代表表格中一块<em>列摘要</em> （表尾）。</td> + </tr> + <tr> + <td>{{HTMLElement("tr")}}</td> + <td>代表表格中的<em>行</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("td")}}</td> + <td>代表表格中的<em>单元格</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("th")}}</td> + <td>代表表格中的<em>头部单元格</em> 。</td> + </tr> + </tbody> +</table> + +<h2 id="表单">表单</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("form")}}</td> + <td>代表一个<em>表单</em> ，由控件组成。</td> + </tr> + <tr> + <td>{{HTMLElement("fieldset")}}</td> + <td>代表<em>控件组</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("legend")}}</td> + <td>代表 <code><fieldset></code> 控件组的<em>标题</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("label")}}</td> + <td>代表表单控件的<em>标题</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}</td> + <td>代表允许用户编辑数据的<em>数据区</em> （文本框、单选框、复选框等）。</td> + </tr> + <tr> + <td>{{HTMLElement("button")}}</td> + <td>代表<em>按钮</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("select")}}</td> + <td>代表<em>下拉框</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("datalist")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表提供给其他控件的<em>一组预定义选项</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("optgroup")}}</td> + <td>代表一个<em>选项分组</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("option")}}</td> + <td>代表一个 <code><select></code> 元素或 <code><datalist></code> 元素中的一个<em>选项</em></td> + </tr> + <tr> + <td>{{HTMLElement("textarea")}}</td> + <td>代表<em>多行文本框</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("keygen")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个<em>密钥对生成器</em> 控件。</td> + </tr> + <tr> + <td>{{HTMLElement("output")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>计算值</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("progress")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>进度条</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("meter")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表<em>滑动条</em> 。</td> + </tr> + </tbody> +</table> + +<h2 id="交互元素">交互元素</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("details")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个用户可以(点击)获取额外信息或控件的<em>小部件</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("summary")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表 <code><details></code> 元素的<em>综述</em> 或<em>标题</em> 。</td> + </tr> + <tr> + <td>{{HTMLElement("menuitem")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表一个用户可以点击的菜单项。</td> + </tr> + <tr> + <td>{{HTMLElement("menu")}} <a href="/zh-CN/docs/HTML/HTML5"><img alt="这个元素在 HTML5 中加入" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="这个元素在 HTML5 中加入"></a></td> + <td>代表菜单。</td> + </tr> + </tbody> +</table> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li><a href="/zh-CN/docs/HTML/HTML5" title="HTML/HTML5">一系列 HTML5 文档</a>。</li> + <li><a href="/zh-CN/docs/HTML/Element" title="HTML/Element">所有 HTML 标签的参考</a>，包括 HTML5 中不再有效的元素。</li> +</ul> diff --git a/files/zh-cn/web/guide/html/html5/html5_thematic_classification/index.html b/files/zh-cn/web/guide/html/html5/html5_thematic_classification/index.html new file mode 100644 index 0000000000..738663ba9d --- /dev/null +++ b/files/zh-cn/web/guide/html/html5/html5_thematic_classification/index.html @@ -0,0 +1,168 @@ +--- +title: HTML5 & friends thematic classification +slug: Web/Guide/HTML/HTML5/HTML5_Thematic_Classification +translation_of: Web/Guide/HTML/HTML5 +--- +<p>这个页面提供了有关HTML5的主题链接，有些链接一般与HTML5关联但实际上并不是HTML标准，为了方便这些内容也被整理到这里。</p> +<h2 id="HTML"><span class="author-g-lqfq0qqpckp8p3co">HTML</span></h2> +<h3 id="Audio_和_video"><span class="author-g-lqfq0qqpckp8p3co">Audio</span><span class="author-g-101xw018h73xu61x"> 和 video</span></h3> +<div class="ace-line"> + Firefox 3.5引入对HTML5<audio>和<video>元素的支持，提供向HTML文档轻松嵌入媒体资源的能力。参考：<span class="author-g-101xw018h73xu61x url"><a href="/en/Using_HTML5_audio_and_video" title="En/Using_audio_and_video_in_Firefox">在 Firefox 中使用audio和video</a></span></div> +<div class="ace-line"> + </div> +<h3 id="Canvas"><span class="author-g-101xw018h73xu61x">Canvas</span></h3> +<p><Canvas>是HTML新元素，可以用于通过脚本（常用 <a href="../../../../en/JavaScript" rel="internal">JavaScript</a>）绘制图像，例如，它可以用来绘制图表，合成照片甚至实现动画。</p> +<p>参考：</p> +<ul> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/HTML/Canvas" title="en/HTML/Canvas">Canvas</a></span> 元素</li> + <li><a href="/en/Canvas_tutorial" title="en/Canvas tutorial">Canvas 教程</a></li> +</ul> +<h3 id="WebGL_(独立规范)"><span class="author-g-101xw018h73xu61x">WebGL </span>(独立规范)</h3> +<div class="ace-line"> + webGL WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 and can be used in HTML5 {{ HTMLElement("canvas") }} elements.</div> +<div class="ace-line" id="magicdomid483"> + <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/WebGL" title="en/WebGL">WebGL</a></span></div> +<h3 id="Inline_SVG_and_MathML"><span class="author-g-101xw018h73xu61x">Inline SVG and MathML</span></h3> +<div class="ace-line"> + HTML5 parsing liberates MathML and SVG from XML and makes them available in the main file format of the Web.</div> +<div class="ace-line" id="magicdomid543"> + <span class="author-g-101xw018h73xu61x">Reference: </span></div> +<ul> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/SVG" title="en/SVG">SVG</a></span></li> + <li><a href="/en/MathML" title="en/MathML">MathML</a></li> +</ul> +<h3 id="New_link_relations"><span class="author-g-101xw018h73xu61x">New link relations</span></h3> +<div class="ace-line" id="magicdomid407"> + Link relations complement the <a> tag and specify why you're pointing to another page.</div> +<div class="ace-line"> + Reference:</div> +<h3 id="Web_forms"><span class="author-g-101xw018h73xu61x">Web forms</span></h3> +<div class="ace-line"> + Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required in HTML4.</div> +<div class="ace-line" id="magicdomid169"> + <span class="author-g-101xw018h73xu61x">Reference:</span></div> +<ul> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/HTML/Forms_in_HTML" title="en/HTML/HTML5/Forms_in_HTML5">Forms in HTML5</a></span></li> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">Using files from web applications</a></span></li> +</ul> +<h3 id="Microformats_(separate_specification)"><span class="author-g-101xw018h73xu61x">Microformats (separate specification)</span></h3> +<div class="ace-line" id="magicdomid448"> + Microformats allow web sites to provide semantic data to the browser in order to make it possible to present summaries of the information on a page without having to know how to parse the document itself.</div> +<div class="ace-line"> + Reference: <span class="author-g-101xw018h73xu61x url"><a href="/en/Using_microformats" title="en/Using_microformats">Using microformats</a></span></div> +<div class="ace-line"> + See also: <a class="external" href="http://www.microformats.org" title="http://www.microformats.org">http://www.microformats.org</a></div> +<h3 id="Semantic_tags"><span class="author-g-101xw018h73xu61x">Semantic tags</span></h3> +<div class="ace-line"> + The HTML5 specification brings several new elements to web developers allowing them to describe the structure of a web document with a standard semantics.</div> +<div class="ace-line"> + Reference:</div> +<ul> + <li><a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Sections and Outlines of an HTML5 document</a></li> + <li>{{ HTMLElement("article") }}</li> + <li>{{ HTMLElement("aside") }}</li> + <li>{{ HTMLElement("figcaption") }}</li> + <li>{{ HTMLElement("figure") }}</li> + <li>{{ HTMLElement("footer") }}</li> + <li>{{ HTMLElement("header") }}</li> + <li>{{ HTMLElement("mark") }}</li> + <li>{{ HTMLElement("nav") }}</li> + <li>{{ HTMLElement("section") }}</li> + <li>{{ HTMLElement("time") }}</li> +</ul> +<h2 id="JavaScript_(separate_specifications)"><span class="author-g-lqfq0qqpckp8p3co">JavaScript </span>(separate specifications)</h2> +<h3 id="Client-Side_Storage"><span class="author-g-101xw018h73xu61x">Client-Side Storage</span></h3> +<div class="ace-line"> + Firefox supports the HTML 5 specification for offline caching of web applications' resources and offline storage of data.</div> +<div class="ace-line"> + Reference:</div> +<ul> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/Using_the_Application_Cache" title="en/Using_the_Application_Cache">Offline resources in Firefox</a></span></li> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/DOM/Storage" title="en/DOM/Storage">DOM Storage</a></span></li> +</ul> +<h3 id="IndexedDB"><span class="author-g-101xw018h73xu61x">IndexedDB</span></h3> +<div class="ace-line" id="magicdomid361"> + <a class="external" href="http://dev.w3.org/2006/webapi/IndexedDB/">IndexedDB</a> is an evolving web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.</div> +<div class="ace-line"> + Reference: <a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB</a></div> +<h3 id="Web_workers_(separate_specification)"><span class="author-g-101xw018h73xu61x">Web workers </span><span class="author-g-101xw018h73xu61x">(separate specification)</span></h3> +<div class="ace-line"> + Workers provide a simple means for web content to run scripts in background threads. Once created, a worker can send messages to the spawning task by posting messages to an event handler specified by the creator.</div> +<div class="ace-line" id="magicdomid143"> + <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/En/DOM/Using_web_workers" title="En/Using_web_workers">Using web workers</a></span></div> +<h3 id="New_events"><span class="author-g-101xw018h73xu61x">New events</span></h3> +<div class="ace-line"> + In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</div> +<div class="ace-line" id="magicdomid161"> + <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Online and offline events</a></span></div> +<h3 id="Drag_and_drop"><span class="author-g-101xw018h73xu61x">Drag and drop</span></h3> +<div class="ace-line"> + Firefox and other Mozilla applications support a number of features for handling drag and drop. This allows you the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.</div> +<div class="ace-line"> + Reference: <span class="author-g-101xw018h73xu61x url"><a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">Drag and Drop</a></span></div> +<h3 id="Protocol_handler"><span class="author-g-101xw018h73xu61x">Protocol handler</span></h3> +<div class="ace-line"> + <p>It's fairly common to find web pages link to resources using non-<code>http</code> protocols. You can think of this as a <em>desktop-based</em> protocol handler.</p> + <p>Reference: <span class="author-g-101xw018h73xu61x url"><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Web-based protocol handler</a></span></p> + <h3 id="Geolocation">Geolocation</h3> +</div> +<div class="ace-line"> + The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked to confirm permission to report location information.</div> +<div class="ace-line" id="magicdomid294"> + <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/En/Using_geolocation" title="En/Using_geolocation">Using geolocation</a></span></div> +<div class="ace-line"> + <span class="author-g-101xw018h73xu61x url">See also: <a class="external" href="http://dev.w3.org/geo/api/spec-source.html" title="Geolocation Spec">Geolocation Specification</a></span></div> +<div class="ace-line"> + <h3 id="Focus_attributes"><span class="author-g-101xw018h73xu61x">Focus attributes</span></h3> + <div class="ace-line"> + The focus atributes let a script understand if an element has the focus of the user and then act accordingly.</div> + <div class="ace-line" id="magicdomid231"> + <span class="author-g-101xw018h73xu61x">Reference: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">Focus management in HTML</a></span></div> + <span class="author-g-101xw018h73xu61x"> </span></div> +<h2 id="CSS_(separate_specifications)"><span class="author-g-lqfq0qqpckp8p3co">CSS</span> (separate specifications)</h2> +<h3 id="New_CSS_selectors"><span class="author-g-101xw018h73xu61x">New CSS selectors</span></h3> +<div class="ace-line"> + The following page shows the CSS3 support in Firefox and the new elements for HTML5.</div> +<div class="ace-line" id="magicdomid759"> + <span class="author-g-101xw018h73xu61x">Ref</span><span class="author-g-101xw018h73xu61x">erence: </span><span class="author-g-101xw018h73xu61x url"><a href="/en/Mozilla_CSS_support_chart" title="en/Mozilla_CSS_support_chart">Mozilla CSS support chart</a></span></div> +<h3 id="Typography">Typography</h3> +<p>The following pages show some of the typography attributes introduced by CSS3.</p> +<div class="ace-line"> + Text wrap:</div> +<ul> + <li><span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Word-wrap" title="en/CSS/word-wrap">Word-wrap</a></span></li> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/text-overflow" title="en/CSS/text-overflow">Text-overflow</a></span></li> + <li><a href="/en/CSS/@font-face" title="En/CSS/@font-face"><span class="author-g-101xw018h73xu61x url">@font-face</span></a></li> +</ul> +<h3 id="Layout"><span class="author-g-101xw018h73xu61x url">Layout</span></h3> +<div class="ace-line" id="magicdomid656"> + <span class="author-g-101xw018h73xu61x">Columns:</span></div> +<ul> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/Using_CSS_multi-column_layouts" title="en/CSS/CSS3_Columns">CSS3 Multi-columns</a></span></li> + <li><a href="/en/Using_flexbox" title="en/Using_flexbox">Flexbox</a></li> +</ul> +<h3 id="Visual">Visual</h3> +<div class="ace-line"> + The following pages show some of the visual attributes introduced by CSS3.</div> +<ul> + <li><span class="author-g-101xw018h73xu61x">Opacity:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/opacity" title="en/CSS/opacity">opacity</a></span></li> + <li><span class="author-g-101xw018h73xu61x">Hue Saturation Color:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/color" title="en/CSS/color">color</a></span></li> + <li><span class="author-g-101xw018h73xu61x">Rounded Corners:</span> <a href="/en/CSS/border-radius" title="En/CSS/Border-radius">border-radius</a></li> + <li><span class="author-g-101xw018h73xu61x">Gradients:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/Using_CSS_gradients" title="en/Using_gradients">Using gradients</a></span></li> + <li><span class="author-g-101xw018h73xu61x">Shadows:</span> + <ul> + <li><span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/text-shadow" title="en/CSS/text-shadow">text-shadow</a></span></li> + <li><span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Box-shadow" title="En/CSS/Box-shadow">box-shadow</a></span></li> + </ul> + </li> + <li><span class="author-g-101xw018h73xu61x">Background:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/background" title="en/CSS/background">background</a></span></li> +</ul> +<h3 id="Dynamic_effects">Dynamic effects</h3> +<div class="ace-line"> + CSS also introduces dynamic effects:</div> +<ul> + <li><span class="author-g-101xw018h73xu61x">Transitions:</span> <span class="author-g-101xw018h73xu61x url"><a href="/en/CSS/CSS_transitions" title="en/CSS/CSS_transitions">CSS transitions</a></span></li> + <li><span class="author-g-101xw018h73xu61x">Animations:</span> <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a></li> + <li><span class="author-g-101xw018h73xu61x">Transforms:</span> <span class="author-g-101xw018h73xu61x url"><a href="/En/CSS/Using_CSS_transforms" title="En/CSS/Using_CSS_transforms">Using CSS transforms</a></span></li> +</ul> +<p>{{ languages( { "ja": "ja/HTML/HTML5/HTML5_Thematic_Classification"} ) }}</p> diff --git a/files/zh-cn/web/guide/html/html5/index.html b/files/zh-cn/web/guide/html/html5/index.html new file mode 100644 index 0000000000..cf907d36d7 --- /dev/null +++ b/files/zh-cn/web/guide/html/html5/index.html @@ -0,0 +1,186 @@ +--- +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 style="display: none;"> </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 new file mode 100644 index 0000000000..55c2e8df5e --- /dev/null +++ b/files/zh-cn/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,43 @@ +--- +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> diff --git a/files/zh-cn/web/guide/html/sections_and_outlines_of_an_html5_document/index.html b/files/zh-cn/web/guide/html/sections_and_outlines_of_an_html5_document/index.html new file mode 100644 index 0000000000..2eeb6fe100 --- /dev/null +++ b/files/zh-cn/web/guide/html/sections_and_outlines_of_an_html5_document/index.html @@ -0,0 +1,377 @@ +--- +title: 使用 HTML 章节与大纲 +slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document +tags: + - HTML + - HTML5 + - 指南 + - 文档结构 + - 高阶 +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +<div class="warning"> +<p>（下方英文原文警告的过时已翻译版本）<strong>注意：</strong>下面描述的HTML 5 大纲算法在用户代理中还没有实现，因此，使用标题语义的用户暴露在HTML4的文档结构下。HTML5对问题的描述还仅仅是理论上的。</p> +</div> + +<div class="warning"> +<p><strong>Important</strong>: There are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final W3C specification. Therefore the <a href="http://www.w3.org/TR/html5/sections.html#outline">outline</a> algorithm <em>should not be used</em> to convey document structure to users. Authors are advised to use heading <a href="http://www.w3.org/TR/html5/sections.html#rank">rank</a> (<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) to convey document structure.</p> +</div> + +<p>HTML5新增了几个新元素使得开发者可以用标准语义去描述web文档的结构。本文描述了这些元素并说明如何使用这些元素去为任何文档定义纲要。</p> + +<h2 id="HTML_4_的文档结构">HTML 4 的文档结构</h2> + +<p>文档结构，即，<code><body></code> 与 <code></body></code> 标记之间内容的语义结构，对呈现页面给用户是重要的。HTML4用文档中章节和子章节的概念去描述文档结构。一个章节由一个包含着标题元素（h1-h6）的div元素表示。这些html划分元素（HTML Dividing Elements）和标题元素（HTML Heading Elements）形成了文档的结构和纲要。</p> + +<p>所以下面的片段：</p> + +<div style="overflow: hidden;"> +<pre class="brush:xml"><div class="section" id="forest-elephants" > + <h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <div class="subsection" id="forest-habitat" > + <h2>Habitat</h2> + <p>Forest elephants do not live in trees but among them. + ...this subsection continues... + </div> +</div> +</pre> +</div> + +<p>形成了如下的大纲：</p> + +<pre>1. Forest elephants + 1.1 Habitat +</pre> + +<p>HTML div 元素（ {{HTMLElement("div")}} elements）并不强制性地定义一个章节。一个 HTML 标题元素（ HTML Heading Element）的出现就足以意味着新的章节. 因此,</p> + +<pre class="brush:xml"><h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <h2>Habitat</h2> + <p>Forest elephants do not live in trees but among them. + ...this subsection continues... + <h2>Diet</h2> +<h1>Mongolian gerbils</h1> +</pre> + +<p>会形成如下的大纲:</p> + +<pre>1. Forest elephants + 1.1 Habitat + 1.2 Diet +2. Mongolian gerbils +</pre> + +<h2 id="HTML5_解决的问题" style="line-height: 30px;">HTML5 解决的问题</h2> + +<p>HTML 4 的文档结构定义和其隐含的大纲算法非常粗糙而且造成了很多问题：</p> + +<ol> + <li> 定义语义性章节的{{HTMLElement("div")}} 元素的用法,如果没有为class属性赋以特殊的值，使生成自动生成大纲的算法变得不可能 ("一个div元素{{HTMLElement("div")}} 是不是大纲的一部分, 定义的是章节还是子章节?" 或者 "该div元素 {{HTMLElement("div")}}是仅仅为了样式化?")。换句话说, HTML4规范在章节的定义和章节的范围都不精确。 自动生成大纲是重要的,尤其是在倾向于通过根据文档大纲内容去展示内容的辅助技术（ <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">assistive technology</a>）。 HTML5 在自动生成大纲算法的过程中去掉了div元素（{{HTMLElement("div")}}），并新增了一个元素，section元素（{{HTMLElement("section")}}）。</li> + <li>合并多个文档是困难的：主文档中包含子文档意味着改变HTML标题元素的级别，以使得文档大纲能够保持下来。 这个已经被HTML5的新的章节元素解决了，因为新引入的元素（{{HTMLElement("article")}}、{{HTMLElement("section")}}、{{HTMLElement("nav")}} 和 {{HTMLElement("aside")}}）总是距离其最近的祖先章节的子章节, 与子文档章节内部的标题没有关系.</li> + <li>HTML4中，所有的章节都是文档大纲中的一部分。但是文档并不总是这样。文档可以包含那些不是大纲的特殊章节, 但是与文档有关的, 就像广告块和解释区域。 HTML5 引入aside元素 {{HTMLElement("aside")}}使得这样的节点不会插入到主纲要中。 </li> + <li>另外, 因为在 HTML4中任何的部分都是文档大纲的一部分, 没有办法产生与网站相关而不是与文档相关的节段，比如logos,menus,目录或版权信息和法律声明。为了这个目的, HTML5 引入了三个特殊的节段 元素： 包含链接集合的nav元素{{HTMLElement("nav")}} , 例如目录, 包含网站相关信息的footer元素{{HTMLElement("footer")}} 和header元素 {{HTMLElement("header")}} 。</li> +</ol> + +<p>更具有普遍意义的是HTML5使得章节和标题特性更精确。使得文档大纲变的可预测，浏览器使用后也可以提高用户体验。</p> + +<h2 id="HTML5_的大纲算法">HTML5 的大纲算法</h2> + +<h3 id="定义节段">定义节段</h3> + +<p> {{HTMLElement("body")}} 元素中的所有内容都是节段中的一部分。节段在 HTML5 中是可以嵌套的。{{HTMLElement("body")}} 元素定义了主节段，基于主节段，可以显式或隐式定义各个子节段的划分。显式定义的节段是通过{{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}和 {{HTMLElement("nav")}} 这些标记中的内容。 </p> + +<div class="note">注意：每个section可以有自己的标题结构。因此，即使是一个嵌套的section也能有<span style="line-height: 1.5;">{{HTMLElement("h1")}}. 具体查看 </span><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5" style="line-height: 1.5;" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">Defining Headings in HTML5</a><span style="line-height: 1.5;">.</span></div> + +<p>Example:</p> + +<pre class="brush:xml"><section> + <h1>Forest elephants</h1> + <section> + <h1>Introduction</h1> + <p>In this section, we discuss the lesser known forest elephants.</p> + </section> + <section> + <h1>Habitat</h1> + <p>Forest elephants do not live in trees but among them.</p> + </section> + <aside> + <p>advertising block</p> + </aside> +</section> +<footer> + <p>(c) 2010 The Example company</p> +</footer></pre> + +<p>这个HTML片段定义了两个顶级节段：</p> + +<pre><span style="color: red;"><section> + <h1>Forest elephants</h1> + <section> + <h1>Introduction</h1> + <p>In this section, we discuss the lesser known forest elephants.</p> + </section> + <section> + <h1>Habitat</h1> + <p>Forest elephants do not live in trees but among them.</p> + </section> + <aside> + <p>advertising block</p> + </aside> +</section></span> + +<span style="color: green;"><footer> + <p>(c) 2010 The Example company</p> +</footer></span></pre> + +<p>第一个节段有三个子节段：</p> + +<pre><section> + <h1>Forest elephants</h1> + + <span style="color: red;"><section> + <h1>Introduction</h1> + <p>In this section, we discuss the lesser known forest elephants.</p> + </section></span> + + <span style="color: green;"><section> + <h1>Habitat</h1> + <p>Forest elephants do not live in trees but among them.</p> + </section></span> + + <span style="color: blue;"><aside> + <p>advertising block</p> + </aside></span> +</section> + +<footer> + <p>(c) 2010 The Example company</p> +</footer></pre> + +<p>上面的片段形成了如下的大纲:</p> + +<pre>1. Forest elephants + 1.1 Introduction + 1.2 Habitat + 1.3 Section (aside) +</pre> + +<h3 id="在HTML5中定义标题">在HTML5中定义标题</h3> + +<p>当 HTML 节段元素定义文档结构时，文档大纲也需要有用的标题。基本规则是简单的：第一个 HTML 标题元素（{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}之一）定义了当前节段的标题</p> + +<p>标题元素通过在元素里的名字加上数字来分级标题元素，{{HTMLElement("h1")}} 元素有最高级别，{{HTMLElement("h6")}} 有最低级别。相关的级别只在节段中起作用；节段的结构定义了大纲，而不是节段的标题。例如，下面的代码：</p> + +<pre class="brush:xml"><section> + <h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <section> + <h2>Habitat</h2> + <p>Forest elephants do not live in trees but among them. + ...this subsection continues... + </section> +</section> +<section> + <h3>Mongolian gerbils</h3> + <p>In this section, we discuss the famous mongolian gerbils. + ...this section continues... +</section></pre> + +<p>形成了下面的大纲:</p> + +<pre>1. Forest elephants + 1.1 Habitat +2. Mongolian gerbils</pre> + +<p>注意标题元素的级别（例子中的第一个顶层节段的 {{HTMLElement("h1")}}，子节段中的{{HTMLElement("h2")}} 和第二个顶层节段中的{{HTMLElement("h3")}}）并不重要。（任何级别可以用作显示定义的节段的标题，虽然这种做法并不推荐。）</p> + +<h3 id="隐式分节">隐式分节</h3> + +<p>因为HTML5分节元素并不强制性定义大纲，为了与现有的占主导地位的HTML4保持兼容，有个方式来定义节段而不需要分节元素。这种方式就是隐式分节。</p> + +<p>HTML标题元素 ({{HTMLElement("h1")}} 到 {{HTMLElement("h6")}}) 定义了一个新的，隐式的节段，当其不是父节段第一个标题时。这种隐式放置节段的方式通过在父节点中与之前标题的相对级别来定义。如果比之前的标题级别更低，那么在节段里开始新的隐式子节段。如代码所示：</p> + +<pre class="brush:xml"><section> + <h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <h3 class="implicit subsection">Habitat</h3> + <p>Forest elephants do not live in trees but among them. + ...this subsection continues... +</section></pre> + +<p>形成如下的大纲:</p> + +<pre>1. Forest elephants + 1.1 Habitat <em>(implicitly defined by the h3 element)</em></pre> + +<p>如果与前面标题的级别相同，那么闭合前面的节段（可能是显式标记的节段！）并开始新的同一级别的隐式节段：</p> + +<pre class="brush:xml"><section> + <h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <h1 class="implicit section">Mongolian gerbils</h1> + <p>Mongolian gerbils are cute little mammals. + ...this section continues... +</section></pre> + +<p>形成如下的大纲：</p> + +<pre>1. Forest elephants +2. Mongolian gerbils <em>(implicitly defined by the h1 element, which closed the previous section at the same time)</em></pre> + +<p>如果比之前标题的级别更高，那么关闭之前的节段并开始新的这个更高级别的隐式节段：</p> + +<pre class="brush:xml"><body> + <h1>Mammals</h1> + <h2>Whales</h2> + <p>In this section, we discuss the swimming whales. + ...this section continues... + <section> + <h3>Forest elephants</h3> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <h3>Mongolian gerbils</h3> + <p>Hordes of gerbils have spread their range far beyond Mongolia. + ...this subsection continues... + <h2>Reptiles</h2> + <p>Reptiles are animals with cold blood. + ...this subsection continues... + </section> +</body></pre> + +<p>形成如下的大纲：</p> + +<pre>1. Mammals + 1.1 Whales <em>(implicitly defined by the h2 element)</em> + 1.2 Forest elephants <em>(explicitly defined by the section element)</em> + 1.3 Mongolian gerbils <em>(implicitly defined by the h3 element, which closes the previous section at the same time)</em> +2. Reptiles <em>(implicitly defined by the h2 element, which closes the previous section at the same time)</em></pre> + +<p>这并不是一眼就可以通过标题标记就可以看出来的大纲。为了使标记容易理解，用显式的标记开始和闭合节段以及匹配标题等级与期望的嵌套节段等级。然而，HTML5规范并不需要这样。如果你发现浏览器以不期望的方式渲染文档，检查是否有隐式的节段没有闭合。</p> + +<p>作为经验法则，标题级别应该与节段嵌套级别相匹配，但为了方便节段在多个文档中的重用，也存在例外的情况。例如，一个节段可能会存储在内容管理系统中并在运行时组装为完整的文档。在这种情况下，好的实践便是使用{{HTMLElement("h1")}}作为可重用部分的最高标题级别。可重用节段的嵌套级别应该取决于将使用该节段的文档的节段层级。显式节段标记仍然在这种情况下有用处。</p> + +<h3 id="分节根"><a name="sectioning_root">分节根</a></h3> + +<p>分节根是一个HTML元素，这个元素可以拥有自己的大纲，但是元素内部的节段和标题对其祖先的大纲没有贡献。除了文档的逻辑分节根{{HTMLElement("body")}}元素，这些元素经常在页面中引入外部内容：{{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 和{{HTMLElement("td")}}。</p> + +<p>Example:</p> + +<pre class="brush:xml"><section> + <h1>Forest elephants</h1> + <section> + <h2>Introduction</h2> + <p>In this section, we discuss the lesser known forest elephants</p> + </section> + <section> + <h2>Habitat</h2> + <p>Forest elephants do not live in trees but among them. Let's + look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p> + <blockquote> + <h1>Borneo</h1> + <p>The forest element lives in Borneo...</p> + </blockquote> + </section> +</section> +</pre> + +<p>例子形成如下的大纲:</p> + +<pre>1. Forest elephants + 1.1 Introduction + 1.2 Habitat</pre> + +<p>这个大纲并不包含 {{HTMLElement("blockquote")}} 元素的内部大纲。{{HTMLElement("blockquote")}} 元素是一个外部引用，是一个分节根并隔离了他内部的大纲</p> + +<h3 id="大纲之外的节段">大纲之外的节段</h3> + +<p>HTML5引入了2个新的元素，用来定义那些不属于web文档主要大纲中的节段。</p> + +<ol> + <li>HTML 侧边分节元素 ({{HTMLElement("aside")}}) 定义了这样的节段, 虽然是主要的分节元素, 但并不属于主要的文档流, 就像解释栏或广告栏. aside元素内部有自己的大纲，但并不计入文档大纲中</li> + <li>HTML 导航分节元素 ({{HTMLElement("nav")}}) 定义的节段包含了很多导航links。文档中可以有好几个这样的元素，比如文档内部的链接，就像目录，和链接到其他站点的导航links。这些链接并不是主文档流和文档大纲中的一部分 ，并且能够特别让屏幕浏览器和类似的辅助技术从一开始就不渲染该标记里的内容。</li> +</ol> + +<h3 id="页眉和页脚">页眉和页脚</h3> + +<p>HTML5引入了两个可以用于标记节段的页眉和页脚的新元素。</p> + +<ol> + <li>HTML 头部分节元素 ({{HTMLElement("header")}}) 定义了页面的页眉,通常会包含logo和站点名称以及水平菜单（如果有的话）。或是一个节段的头部，可能包含了节段的标题和作者名字等。{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}}可以拥有它们自己的{{HTMLElement("header")}}。虽然名字是header，但是不一定是在页面的开始。</li> + <li>HTML 页脚元素 ({{HTMLElement("footer")}}) 定义了页脚, 通常会包含版权信息和法律声明以及一些其他链接。或是节段的页脚，可能包含了节段的发布数据、许可声明等。{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} 可以拥有它们自己的 {{HTMLElement("footer")}}。同样，其不一定是在页面的底部出现。</li> +</ol> + +<h2 id="分节元素中的地址和发表时间">分节元素中的地址和发表时间</h2> + +<p>文档的作者想要发布一些联系信息，例如作者的名字和地址。HTML4通过{{HTMLElement("address")}}元素来表示，HTML5则拓展了这个元素。</p> + +<p>一个文档可以由不同作者的不同节段组成。一个从其他作者而不是文档作者写的节段用{{HTMLElement("article")}}元素定义。因此， {{HTMLElement("address")}} 元素连接到距离最近的{{HTMLElement("body")}}或{{HTMLElement("article")}} 祖先元素。</p> + +<p>同样的，新的HTML5标记 {{HTMLElement("time")}}元素，使用{{htmlattrxref("pubdate", "time")}}布尔值，表示整个文档的发布时间，分别给文章，与其最近的{{HTMLElement("body")}}元素或{{HTMLElement("article")}} 元素的祖先元素相关。</p> + +<h2 id="在不支持HTML5的浏览器器中使用HTML5">在不支持HTML5的浏览器器中使用HTML5</h2> + +<p>分节和标题元素应该在大部分的不支持HTML5的浏览器中工作。尽管不支持，但不必使用特殊的DOM接口。仅仅只需要一个特殊的CSS样式，因为未知元素默认会样式化为display:inline：</p> + +<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { + display:block; +} + +</pre> + +<p>当然web开发者可以改变上面的样式结构，但是要记住的是在不支持HTML5浏览器中，这些元素默认的样式是与预期的样式是不同的。还要注意的是{{HTMLElement("time")}}元素并没有在这些元素中，因为其样式在不支持HTML5和兼容HTML5的浏览器中的表现是相同的。</p> + +<p>然而这种方法有自己的局限性，因为一些浏览器并不允许样式化不支持的元素。这种情形出现在ie8及ie8以前的浏览器中，需要一个特殊脚本才行：</p> + +<pre class="brush:xml"><!--[if lt IE 9]> + <script> + document.createElement("header" ); + document.createElement("footer" ); + document.createElement("section"); + document.createElement("aside" ); + document.createElement("nav" ); + document.createElement("article"); + document.createElement("hgroup" ); + document.createElement("time" ); + </script> +<![endif]--></pre> + +<p>这段脚本表示，当在ie8（及ie8以前）的情况下，应该允许脚本的运行以合适地展示HTML5分节和标题元素。如果禁用了脚本，则不会显示，可能会出问题因为这些元素定义整个页面的结构。为了预防这种情况，我们需要加上{{HTMLElement("noscript")}}标签。</p> + +<pre class="brush:xml"><noscript> + <strong>Warning !</strong> + Because your browser does not support HTML5, some elements are simulated using JScript. + Unfortunately your browser has disabled scripting. Please enable it in order to display this page. +</noscript></pre> + +<p>于是形成了如下的代码，允许HTML5节段和标题元素在不支持HTML5的浏览器中展示，即使是ie8（ie8以下版本）也在禁用脚本的情况下有了合适的反馈。</p> + +<pre class="brush:xml"><!--[if lt IE 9]> + <script> + document.createElement("header" ); + document.createElement("footer" ); + document.createElement("section"); + document.createElement("aside" ); + document.createElement("nav" ); + document.createElement("article"); + document.createElement("hgroup" ); + document.createElement("time" ); + </script> + <noscript> + <strong>Warning !</strong> + Because your browser does not support HTML5, some elements are simulated using JScript. + Unfortunately your browser has disabled scripting. Please enable it in order to display this page. + </noscript> +<![endif]--></pre> + +<h2 id="总结">总结</h2> + +<p>HTML5中新的节段和标题标签带来了以标准的方法来描述web文档的结构和大纲。其为人们使用HTML5浏览器和需要结构来帮助他们理解页面带来了一个很大的优势。例如，人们需要一些辅助技术的帮助。这些新的语义元素使用简单，几乎没有负担，也可以在不支持HTML5的浏览器中工作。因此，他们应该被广泛使用。</p> + +<div>{{HTML5ArticleTOC()}}</div> diff --git a/files/zh-cn/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html b/files/zh-cn/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..5a07e862a0 --- /dev/null +++ b/files/zh-cn/web/guide/html/tips_for_authoring_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/web/guide/html/using_data_attributes/index.html b/files/zh-cn/web/guide/html/using_data_attributes/index.html new file mode 100644 index 0000000000..009517f416 --- /dev/null +++ b/files/zh-cn/web/guide/html/using_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/web/guide/html/using_html5_audio_and_video/index.html b/files/zh-cn/web/guide/html/using_html5_audio_and_video/index.html new file mode 100644 index 0000000000..bd573234bd --- /dev/null +++ b/files/zh-cn/web/guide/html/using_html5_audio_and_video/index.html @@ -0,0 +1,274 @@ +--- +title: 使用 HTML5 音频和视频 +slug: Web/Guide/HTML/Using_HTML5_audio_and_video +tags: + - Flash + - HTML + - HTML5 + - Media + - Ogg + - Web + - 媒体 + - 指南 + - 概述 + - 特性 + - 范例 + - 视频 + - 音频 +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +<p>HTML5 通过HTML标签“audio”和“video”来支持嵌入式的媒体，使开发者能够方便地将媒体嵌入到HTML文档中。</p> + +<h2 id="嵌入媒体">嵌入媒体</h2> + +<p>在HTML中嵌入媒体：</p> + +<div style="overflow: hidden;"> +<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> + 你的浏览器不支持 <code>video</code> 标签. +</video></pre> + +<p>这个例子展示了一个带有回放控制器的可播放视频，视频来源于Theora网站。</p> + +<p>下面是一个将音频<span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">嵌入</span>到HTML文档的例子。</p> + +<pre class="brush: html"><audio src="/test/audio.ogg"> +你的浏览器不支持audio标签 +</audio></pre> +</div> + +<p>src属性可以设置为一个音频文件的URL或者本地文件的路径。</p> + +<div style="overflow: hidden;"> +<pre class="brush: html"><audio src="audio.ogg" controls autoplay loop> +你的浏览器不支持audio标签 +</audio></pre> +</div> + +<p>这个例子的代码中使用了HTML的“audio”元素的一些属性：</p> + +<ul> + <li><code>controls</code> : 为网页中的音频显示标准的HTML5控制器。</li> + <li><code>autoplay</code> : 使音频自动播放。</li> + <li><code>loop</code> : 使音频自动重复播放。</li> +</ul> + +<div style="overflow: hidden;"> +<pre class="brush: html"><audio src="audio.mp3" preload="auto" controls></audio></pre> +</div> + +<p>preload属性用来缓冲audio元素的大文件，有三个属性值可供设置：</p> + +<ul> + <li><code>"none"</code> 不缓冲文件</li> + <li><code>"auto"</code> 缓冲音频文件</li> + <li><code>"metadata"</code> 仅仅缓冲文件的元数据</li> +</ul> + +<p>可以用 {{ HTMLElement("source") }} 标签来指定多个文件，以为不同浏览器提供可支持的编码格式。例如：</p> + +<pre class="brush: html"><video controls> + <source src="foo.ogg" type="video/ogg"> + <source src="foo.mp4" type="video/mp4"> + Your browser does not support the <code>video</code> element. +</video> +</pre> + +<p>当浏览器支持Ogg格式的时候， 该代码会播放Ogg文件。 如果浏览器不支持Ogg，浏览器会播放MPEG-4 file。参见列表 <a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">audio和video元素支持的媒体格式</a> 来查看不同浏览器对视频音频编码格式的支持情况。</p> + +<p>你也可以指定视频文件需要的视频编解码器的值；这样允许浏览器做出更加正确的决定：</p> + +<pre class="brush: html"><video controls> + <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> + Your browser does not support the <code>video</code> element. +</video></pre> + +<p>在这里，我们指定video标签使用Dirac和Speex的视频编解码器。如果浏览器支持Ogg，但是不支持指定的编解码器，则视频不会被加载。</p> + +<p>如果类型属性没有被指定，媒体类型将返回至服务器然后检查浏览器是否可以解决；如果不能被执行，就检查下一个来源。如果没有任何一个指定的来源元素可以使用，则分派一个错误事件给video标签。如果指定了类型属性，那么将会与浏览器能够播放的类型做对比，如果其没有被识别，甚至不会被向服务器发出询问；相反，下一个来源会被同时检查。</p> + +<p>点击 <a href="https://developer.mozilla.org/en-US/docs/DOM/Media_events">媒体事件</a> 来查看完整的媒体回放事件列表。要查看不同浏览器支持的媒体格式的详细信息， 点击 <a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Media formats supported by the audio and video elements.</a></p> + +<h2 id="媒体回放控制">媒体回放控制</h2> + +<p>当你已经用新的元素将媒体嵌入 HTML 文档以后，你就可以用 JavaScript 代码 采用编程的方式来控制它们。比如说，如果你想（重新）开始播放，可以写如下的代码：</p> + +<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; +v.play(); +</pre> + +<p>头一行是取得当前文档中第一个视频元素，下一行调用了该元素的 <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="nsIDOMHTMLMediaElement#play()"><code>play()</code></a> 方法， 这一方法在实现媒体元素的接口中定义。</p> + +<p>控制一个 HTML5 音频播放器的播放、暂停、增减音量等则直接了当：</p> + +<pre class="brush: html"><audio id="demo" src="audio.mp3"></audio> +<div> + <button onclick="document.getElementById('demo').play()">播放声音</button> + <button onclick="document.getElementById('demo').pause()">暂停声音</button> + <button onclick="document.getElementById('demo').volume+=0.1">提高音量</button> + <button onclick="document.getElementById('demo').volume-=0.1">降低音量</button> +</div> +</pre> + +<h2 id="终止媒体下载">终止媒体下载</h2> + +<p>停止媒体播放很简单，只要调用 pause() 方法即可，然而浏览器还会继续下载媒体直至媒体元素被垃圾回收机制回收。</p> + +<p>以下是即刻停止媒体下载的方法：</p> + +<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID"); +mediaElement.pause(); +mediaElement.src=''; +//or +mediaElement.<code>removeAttribute("src");</code> +</pre> + +<p>通过移除媒体元素的 <code>src</code> 属性（或者直接将其设为一个空字符串——这取决于具体浏览器）， 你可以摧毁该元素的内部解码，从而结束媒体下载。removeAttribute() 操作并不干净， 而将<video>元素的 'src' 属性设为空字符串可能会引起我们不想要的请求（Mozilla Firefox 22）。</p> + +<p> </p> + +<h2 id="在媒体中查找">在媒体中查找</h2> + +<p>媒体元素支持在媒体的内容中从当前播放位置移到某个特定点。 这是通过设置元素的属性<code>currentTime的值来达成的；有关元素属性的详细信息请看</code>{{ domxref("HTMLMediaElement") }} 。 简单的设置那个你希望继续播放的以秒为单位时间值。</p> + +<p>你可以使用元素的属性seekable来决定媒体目前能查找的范围。它返回一个你可以查找的{{ domxref("TimeRanges") }} 时间对象。</p> + +<pre class="brush: js">var mediaElement = document.getElementById('mediaElementID'); +mediaElement.seekable.start(); // 返回开始时间 (in seconds) +mediaElement.seekable.end(); // 返回结束时间 (in seconds) +mediaElement.currentTime = 122; // 设定在 122 seconds +mediaElement.played.end(); // 返回浏览器播放的秒数 +</pre> + +<h2 id="标记播放范围">标记播放范围</h2> + +<p><font face="Consolas"><font color="#4d4e53">在给一个<audio>或者<video>元素标签</font>指定媒体的URI的时候，你可以选择性地加入一些额外信息来指定媒体将要播放的部分。要这样做的话，需要附加一个哈希标志("#")，后面跟着媒体片段的描述。</font></p> + +<p><font face="Consolas">一条指定时间范围的语句：</font></p> + +<pre>#t=[starttime][,endtime]</pre> + +<p>时间值可以被指定为秒数（如浮点数）或者为以冒号分隔时/分/秒格式（像2小时5分钟1秒表示为2:05:01）。</p> + +<p>一些例子：</p> + +<dl> + <dt><span class="nowiki">http://foo.com/video.ogg#t=10,20</span></dt> + <dd>指定视频播放范围为从第10秒到第20秒.</dd> + <dt><span class="nowiki">http://foo.com/video.ogg#t=,10.5</span></dt> + <dd>指定视频从开始播放到第10.5秒.</dd> + <dt><span class="nowiki">http://foo.com/video.ogg#t=,02:00:00</span></dt> + <dd>指定视频从开始播放到两小时.</dd> + <dt><span class="nowiki">http://foo.com/video.ogg#t=60</span></dt> + <dd>指定视频从第60秒播放到结束.</dd> +</dl> + +<div class="note"> +<p>媒体元素URI中播放范围部分的规范已被加入到 Gecko 9.0 {{ geckoRelease("9.0") }}. 当下, 这是Geoko <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> 唯一实现的部分，并且只有是在非地址栏给媒体元素指定来源时才可使用。</p> +</div> + +<h2 id="备选项">备选项</h2> + +<p>在HTML之间，例如，不支持HTML5媒体的浏览器可以处理媒体元素的开始和结束标记.你可以利用这一点给这些浏览器添加一些备项。</p> + +<p>此节给视频提供了两个可能的备选项，在各种情况下，如果浏览器支持HTML5视频，它就会被使用，否则，会使用备选项。</p> + +<h3 id="使用Flash">使用Flash</h3> + +<p>{{ HTMLElement("video") }} <font color="#4d4e53">标签</font>不被支持时可以使用Flash播放Flash格式的影像。</p> + +<pre class="brush: html"><video src="video.ogv" controls> + <object data="flvplayer.swf" type="application/x-shockwave-flash"> + <param value="flvplayer.swf" name="movie"/> + </object> +</video></pre> + +<p>注意不要在object标签中加入class、id以兼容IE以外的浏览器。</p> + +<h3 id="使用Java_小程序播放Ogg视频">使用Java 小程序播放Ogg视频</h3> + +<p>这里有一个名为Cortado的Java小程序，在不支持HTML5视频的浏览器你可以用它作为备选项来播放Ogg视频:</p> + +<pre class="brush: html"><video src="my_ogg_video.ogg" controls width="320" height="240"> + <object type="application/x-java-applet" width="320" height="240"> + <param name="archive" value="cortado.jar"> + <param name="code" value="com.fluendo.player.Cortado.class"> + <param name="url" value="my_ogg_video.ogg"> + <p>You need to install Java to play this file.</p> + </object> +</video></pre> + +<p>如果你没有给cortado object元素创建一个备用的子元素，像上面的 {{ HTMLElement("p") }} 元素，没有安装java的Firfox3.5设备就会错误的通知用户需要安装一个插件才能查看页面内容.</p> + +<p>{{ h1_gecko_minversion("错误处理", "2.0") }}</p> + +<p>Geocko2.0首发{{ geckoRelease("2.0") }}, 错误处理已经被修订符合HTML5的最新版规范。 取缔把错误事件发送给媒体元素自生的方式，现在把它交付给子代中的 {{ HTMLElement("source") }}元素对应导致错误的来源。</p> + +<p>这使你可以查到是哪个资源加载失败，哪个是可用的。</p> + +<pre class="brush: html"><video> +<source id="mp4_src" + src="video.mp4" + type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> +</source> +<source id="3gp_src" + src="video.3gp" + type='video/3gpp; codecs="mp4v.20.8, samr"'> +</source> +<source id="ogg_src" + src="video.ogv" + type='video/ogg; codecs="theora, vorbis"'> +</source> +</video></pre> + +<p>由于专利限制，Firefox不支持MP4和3GP，ID为“mp4_src"和"3gp_src"的 {{ HTMLElement("source") }} 元素在Ogg资源加载之前将会接收到错误事件。这些资源会根据出现的顺序尝试被加载，一旦有一个资源加载成功，剩下的资源就不会被加载。</p> + +<h3 id="没有资源加载成功时的检测">没有资源加载成功时的检测</h3> + +<p>检测是否所有的子{{ HTMLElement("source") }} 元素都加载失败，检查媒体元素的networkState属性值。如果值为HTMLMediaElement.NETWORK_NO_SOURCE，就可以知道所以的资源都加载失败了。</p> + +<p>如果这时你通过插入一个新的 {{ HTMLElement("source") }} 元素作为媒体元素的子元素的方法添加一个新资源，Gecko会尝试加载指定的资源。</p> + +<h3 id="没有资源可用时显示备用内容">没有资源可用时显示备用内容</h3> + +<p>另一个显示视频的备用内容的方法是在最后一个source元素上增加一个错误处理器。</p> + +<pre class="brush: html"><video controls> + <source src="dynamicsearch.mp4" type="video/mp4"></source> + <a href="dynamicsearch.mp4"> + <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS"> + </a> + <p>Click image to play a video demo of dynamic app search</p> +</video> + +</pre> + +<pre class="brush: js">var v = document.querySelector('video'), + sources = v.querySelectorAll('source'), + lastsource = sources[sources.length-1]; +lastsource.addEventListener('error', function(ev) { + var d = document.createElement('div'); + d.innerHTML = v.innerHTML; + v.parentNode.replaceChild(d, v); +}, false); +</pre> + +<h2 id="相关文章">相关文章</h2> + +<ul> + <li>The media-related HTML elements: {{ HTMLElement("audio") }}, {{ HTMLElement("video") }}, {{ HTMLElement("source") }};</li> + <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Manipulating video using canvas</a></li> + <li><a href="/en-US/docs/Introducing_the_Audio_API_Extension" title="Introducing the Audio API Extension">Introducing the Audio API Extension</a></li> + <li>{{ interface("nsIDOMHTMLMediaElement") }}</li> + <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li> + <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li> + <li><a class="external" href="http://popcornjs.org/" title="http://popcornjs.org/">Popcorn.js - The HTML5 Media Framework</a></li> + <li><a class="external" href="http://www.html5video.org/kaltura-html5/" title="http://www.html5video.org/kaltura-html5/">Kaltura Video Library Solution</a>, a JavaScript library (mwEmbed) which supports a seamless fallback with HTML5, VLC Player, Java Cortado and OMTK Flash Vorbis player. (It is used by Wikimedia)</li> + <li><a class="external" href="http://omtk.org/flash/index.html" title="http://omtk.org/flash/index.html">OMTK - Flash</a>, a Flash library which implements a Vorbis decoder</li> + <li><a class="external" href="http://www.projekktor.com" title="http://www.projekktor.com">Projekktor Player</a>, a JavaScript wrapper for audio- and video-tags with flash fallback, open source, GPL</li> + <li><a class="external" href="http://www.theora.org/cortado/" title="http://www.theora.org/cortado/">Applet Cortado</a>, an audio/video playback solution in Java maintained by Xiph.org</li> + <li><a class="external" href="http://videojs.com" title="Video.js HTML5 Video Player">Video.JS</a>, an open source HTML5 video player and framework.</li> + <li><a class="external" href="http://mediaelementjs.com/" title="http://mediaelementjs.com/">MediaElement.js</a> - open source HTML5 audio/video framework with a custom Flash shim that mimic HTML5 media API for older browsers.</li> + <li><a class="external" href="http://www.hdwebplayer.com" title="http://www.hdwebplayer.com">Flv Player</a> - HTML5 fallback support video player</li> + <li><a href="/en-US/docs/DASH_Adaptive_Streaming" title="/en-US/docs/DASH_Adaptive_Streaming">DASH - Dynamic Adaptive Streaming over HTTP</a> - for HTML5 video</li> +</ul> |