diff options
Diffstat (limited to 'files/zh-tw/web/guide/html')
4 files changed, 386 insertions, 0 deletions
diff --git a/files/zh-tw/web/guide/html/content_categories/index.html b/files/zh-tw/web/guide/html/content_categories/index.html new file mode 100644 index 0000000000..707e63ca85 --- /dev/null +++ b/files/zh-tw/web/guide/html/content_categories/index.html @@ -0,0 +1,150 @@ +--- +title: 內容類型 +slug: Web/Guide/HTML/Content_categories +translation_of: Web/Guide/HTML/Content_categories +--- +<p><span class="seoSummary">每個 HTML 元素都要遵從該元素可擁有何種內容規則，這些規則被歸為幾種常用的內容模型（content model）。每個 HTML 元素都屬於零個、一個、或數個內容的模型，所有元素內容的設置規則都要遵從 HTML 一致性文件。</span></p> + +<p>內容類型有三種類型：</p> + +<ul> + <li>主要內容類型（Main content categories）描述了許多元素共享的常見內容規則（content rule）。</li> + <li>表單相關內容類型（Form-related content categories）描述了表單相關元素的內容規則。</li> + <li>特別內容類型（Specific content categories） 描述了只有少數元素共享的內容規則，有時甚至只有特定上下文。</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="主要內容類型">主要內容類型</h2> + +<h3 id="資訊元內容（Metadata_content）">資訊元內容（Metadata content）</h3> + +<p>屬於<em>元資訊內容</em>類型的元素修飾該文件其餘部分的陳述或行為、與其他文件建立連結、或是傳達其他<em>外來</em>（out of band）訊息。</p> + +<p>屬於這個類型的元素有 {{HTMLElement("base")}}、{{ Obsolete_inline() }}{{HTMLElement("command")}}、{{HTMLElement("link")}}、{{HTMLElement("meta")}}、{{HTMLElement("noscript")}}、{{HTMLElement("script")}}、{{HTMLElement("style")}} 與 {{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")}} 還有文字。</p> + +<p>在滿足特定條件下，某些元素也屬這個類型：</p> + +<ul> + <li>{{HTMLElement("area")}}，如果它是 {{HTMLElement("map")}} 元素的後代。</li> + <li>{{HTMLElement("link")}}，如果<a href="/zh-TW/docs/HTML/Global_attributes#attr-itemprop"><strong>itemprop</strong></a> 屬性存在。</li> + <li>{{HTMLElement("meta")}}，如果<a href="/zh-TW/docs/HTML/Global_attributes#attr-itemprop"><strong>itemprop</strong></a> 屬性存在。</li> + <li>{{HTMLElement("style")}}，如果 {{htmlattrxref("scoped","style")}} 屬性存在。</li> +</ul> + +<h3 id="章節型內容（Sectioning_content）">章節型內容（Sectioning content）</h3> + +<p>屬於章節型內容模型的元素會<a href="/zh-TW/docs/Sections_and_Outlines_of_an_HTML5_document" title="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")}}還有{{HTMLElement("section")}}。</p> + +<div class="note"> +<p><em>注意：</em>不要把這個內容模型，和把內容與常規大綱隔開的 <a href="/zh-TW/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">sectioning root</a> 類別搞混。</p> +</div> + +<h3 id="標題型內容（Heading_content）">標題型內容（Heading content）</h3> + +<p>标题内容 定义了分节的标题，而这个分节可能由一个明确的分节内容元素直接标记，也可能由标题本身隐式地定义。</p> + +<p>標題型內容定義了章節的標題，不論該章節由明確的<a href="#Sectioning_content" title="#sectioning content">章節型內容</a>元素標記、抑或由標題本身隱式定義。</p> + +<p>屬於這個類型的元素有{{HTMLElement("h1")}}、{{HTMLElement("h2")}}、{{HTMLElement("h3")}}, {{HTMLElement("h4")}}、{{HTMLElement("h5")}}、{{HTMLElement("h6")}}還有{{HTMLElement("hgroup")}}.</p> + +<div class="note"> +<p><em>注意：</em>儘管 {{HTMLElement("header")}} 可能含有某些標題型內容，但它本身並不是。</p> +</div> + +<h3 id="段落型內容（Phrasing_content）">段落型內容（Phrasing content）</h3> + +<p>段落型內容定義了文字、還有它包含的標記。Runs of phrasing content make up paragraphs.</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")}}以及空白字符在內的純文本。</p> + +<p>在滿足特定條件下，某些元素也屬這個類型：</p> + +<ul> + <li>{{HTMLElement("a")}}，如果它只包含段落型內容。</li> + <li>{{HTMLElement("area")}}，如果它是 {{HTMLElement("map")}} 元素的後代。</li> + <li>{{HTMLElement("del")}}，如果它只包含段落型內容。</li> + <li>{{HTMLElement("ins")}}, 如果它只包含段落型內容。</li> + <li>{{HTMLElement("link")}}, 如果 <a href="/zh-TW/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a> 屬性存在。</li> + <li>{{HTMLElement("map")}}, 如果它只包含段落型內容。</li> + <li>{{HTMLElement("meta")}}, 如果 <a href="/zh-TW/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a> 屬性存在。</li> +</ul> + +<h3 id="嵌入型內容（Embedded_content）">嵌入型內容（Embedded content）</h3> + +<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>互動型內容包含專為用戶互動設計的元素。屬於這個類型的元素有 {{HTMLElement("a")}}、{{HTMLElement("button")}}、{{HTMLElement("details")}}、{{HTMLElement("embed")}}、{{HTMLElement("iframe")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("label")}}、{{HTMLElement("select")}} 還有 {{HTMLElement("textarea")}}。</p> + +<p>在滿足特定條件下，某些元素也屬這個類型：</p> + +<ul> + <li>{{HTMLElement("audio")}}，如果 {{htmlattrxref("controls", "audio")}} 元素存在。</li> + <li>{{HTMLElement("img")}}，如果 {{htmlattrxref("usemap", "img")}} 元素存在。</li> + <li>{{HTMLElement("input")}}，如果 {{htmlattrxref("type", "input")}} 元素不是隱藏狀態。</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="捫及內容（Palpable_content）">捫及內容（Palpable content）</h3> + +<p>不是空白或隱藏的內容稱為捫及。屬於流內容或是Phrasing content模型的元素最少要有一個捫及的節點。</p> + +<h3 id="表單相關內容（Form-associated_content）">表單相關內容（Form-associated content）</h3> + +<p>表單相關內容包含了由 <strong>form</strong> 屬性顯露的 form owner 元素。form owner 是本身包含於 {{HTMLElement("form")}}、或 id 由 <strong>form</strong> 屬性指定的元素。</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>Elements that are listed in the <a href="/zh-TW/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> and fieldset.elements IDL collections. Contains {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, and {{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("button")}}、{{HTMLElement("input")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("output")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。</dd> +</dl> + +<h2 id="透明內容模型（Transparent_content_model）">透明內容模型（Transparent content model）</h2> + +<p>如果一個元素是透明內容模型，then its contents must be structured such that they would be valid HTML 5，就算該透明元素被移除、並由子元素取代。</p> + +<p>例如，{{HTMLElement("del")}} 與 {{HTMLELement("ins")}} 元素都是透明的：</p> + +<pre><p>我們認為下面這些真理是<del><em>神聖不可否認</em></del><ins>不言而喻的。</ins></p> +</pre> + +<p>這果這些元素被刪掉的話，這個分段依然在 HTML 有效（if not correct English）</p> + +<pre><p>我們認為下面這些真理是<em>神聖不可否認</em>不言而喻的。</p> +</pre> + + +<h2 id="其他內容模型">其他內容模型</h2> + +<p>章節根（Sectioning root）</p> diff --git a/files/zh-tw/web/guide/html/event_attributes/index.html b/files/zh-tw/web/guide/html/event_attributes/index.html new file mode 100644 index 0000000000..6f57526dde --- /dev/null +++ b/files/zh-tw/web/guide/html/event_attributes/index.html @@ -0,0 +1,84 @@ +--- +title: Event attributes +slug: Web/Guide/HTML/Event_attributes +translation_of: >- + Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these +--- +<p><span class="seoSummary">每一個 HTML 元素都可以放置事件屬性，以藉此於事件發生時能執行 JavaScripte 程式。事件屬性的名稱都有一個前綴「on」，例如當使用者點選元素時要執行指定的 JavaScript，可以使用 </span><code>onclick</code><span class="seoSummary"> 屬性並把要執行的 JavaScript 當成屬性值。</span></p> + +<p>In the JavaScript code executed in response to the event, <code>this</code> is bound to the HTML element and the {{domxref("Event")}} object can be reached using the <code>event</code> variable in the scope of the attribute.</p> + +<div class="warning"> +<p><strong>Warning:</strong> These attributes should be avoided. This makes the markup bigger and less readable. Concerns of content/structure and behavior are not well-separated, making a bug harder to find. Furthermore, usage of event attributes almost always causes scripts to expose global functions on the {{domxref("Window")}} object, polluting the global namespace.</p> +</div> + +<p>While these attributes can at times be attractively easy to use, you should avoid using them. Instead, use the {{domxref("EventTarget.addEventListener()")}} function to add a listener for the event.</p> + +<p>Event attributes can be blocked by using <a href="/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Content Security Policy</a> which if used, blocks all inline scripts unless the <em>'unsafe-inline'</em> keyword is used.</p> + +<h2 id="Example_using_event_attributes" name="Example_using_event_attributes">Example using event attributes</h2> + +<p>This example appends text to an element each time time the {{HTMLElement("div")}} is clicked.</p> + +<div class="note"> +<p><strong>Note:</strong> This is an example of how not to do things, using one of these attributes.</p> +</div> + +<pre class="brush: html"><!doctype html> +<html> + <head> + <title>Event Attribute Example</title> + <script> + function doSomething() { + document.getElementById("thanks").innerHTML += "<p>Thanks for clicking!</p>"; + } + </script> + </head> + <body> + <div onclick="doSomething();">Click me!</div> + <div id="thanks"></div> + </body> +</html> +</pre> + +<p>Try this example below:</p> + +<p>{{ EmbedLiveSample('Example_using_event_attributes', '', '', '') }}</p> + +<h2 id="Example_using_event_listeners">Example using event listeners</h2> + +<p>Instead, you should use {{domxref("EventTarget.addEventListener()")}}, as shown here:</p> + +<pre class="brush: html"><!doctype html> +<html> + <head> + <title>Event Attribute Example</title> + <script> + function doSomething() { + document.getElementById("thanks").innerHTML += "<p>Thanks for clicking!</p>"; + } + + // Called when the page is done loading; this is where we do any setup we need, + // such as creating event listeners for the elements in the page. + + function setup() { + document.getElementById("click").addEventListener("click", doSomething, true); + } + + // Install an event handler on the window to receive the "load" event, which + // indicates that the document has finished loading into the window. + + window.addEventListener("load", setup, true); + </script> + </head> + <body> + <div id="click">Click me!</div> + <div id="thanks"></div> + </body> +</html></pre> + +<p>You can see this in action below:</p> + +<p>{{ EmbedLiveSample('Example_using_event_listeners', '', '', '') }}</p> + +<section id="Quick_Links"><ol><li><a href="/en-US/docs/Web/API/Event" title='The Event interface represents an event which takes place in the DOM; some are user-generated (such as mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth). While events are usually triggered by such "external" sources, they can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent(). There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.'>Event</a></li><li><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them.">EventTarget</a></li><li><a href="/en-US/docs/Web/API/EventTarget.addEventListener">EventTarget.addEventListener</a></li></ol></section> diff --git a/files/zh-tw/web/guide/html/html5/index.html b/files/zh-tw/web/guide/html/html5/index.html new file mode 100644 index 0000000000..c1ea8252ef --- /dev/null +++ b/files/zh-tw/web/guide/html/html5/index.html @@ -0,0 +1,112 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML5 +translation_of: Web/Guide/HTML/HTML5 +--- +<p>HTML5 是 <a href="/docs/HTML">HTML </a>標準中的最新版。在 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML5 規格</a>還未拍板定案之前，Mozilla 以及其他瀏覽器開發商已經著手實現其中的部分功能。本文所列的連結網址與相關內容，是 Mozilla <a href="/en/Gecko" title="en/Gecko">Gecko</a> 解析引擎已經支援的部份，<a class="external" href="http://www.mozilla.com/en-US/firefox/" title="http://www.mozilla.com/en-US/firefox/">Firefox</a> 和<a href="/En/List_of_Mozilla-Based_Applications" title="En/List of Mozilla-Based Applications">許多其他產品</a>都使用 Gecko 解析引擎。</p> + +<p>(這裡是 <a href="/en/HTML/HTML5/HTML5_Thematic_Classification" title="en/HTML/HTML5/HTML5 Thematic Classification">另一篇 HTML5 分類整理文章</a>。)</p> + +<h2 id="HTML5_簡介">HTML5 簡介</h2> + +<dl> + <dt><a href="/en/HTML/HTML5/Introduction_to_HTML5" title="en/HTML/Introduction to HTML5"><strong>HTML5 簡介</strong></a></dt> + <dd>這篇文章介紹如何在你的網頁設計或 Web 應用程式中使用 HTML5。</dd> +</dl> + +<h2 id="HTML5_元素">HTML5 元素</h2> + +<dl> + <dt><a href="/en/Using_HTML5_audio_and_video" title="En/Using_audio_and_video_in_Firefox">使用 audio 和 video</a> {{ gecko_minversion_inline("1.9.2") }}</dt> + <dd>Firefox 3.5 開始支援 HTML5 {{ HTMLElement("audio") }} 和 {{ HTMLElement("video") }} 兩個元素。</dd> + <dt><a href="/zh_tw/HTML/HTML5_表單" title="zh_tw/HTML/HTML5_表單">HTML5 表單</a> {{ gecko_minversion_inline("2.0") }}</dt> + <dd>簡單介紹 HTML5 對於 Web 表單的改進項目：限制條件與驗證 API、多個新增的屬性、新增多個值供 {{ HTMLElement("input") }} 的 {{ htmlattrxref("type", "input") }} 屬性使用，並且新增 {{ HTMLElement("output") }} 元素。</dd> + <dt><a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Sections 和 outlines</a> {{ gecko_minversion_inline("2.0") }}</dt> + <dd>HTML5 對於大綱與分段的支援元素包含有： {{ HTMLElement("section") }}、{{ HTMLElement("article") }}、{{ HTMLElement("nav") }}、{{ HTMLElement("header") }}、{{ HTMLElement("footer") }}、{{ HTMLElement("aside") }} 以及 {{ HTMLElement("hgroup") }}。</dd> + <dt>元素 {{ HTMLElement("mark") }} {{ gecko_minversion_inline("2.0") }}</dt> + <dd>元素 mark 被用在標註特別相關的重點文字。</dd> + <dt>元素 {{ HTMLElement("figure") }} 和 {{ HTMLElement("figcaption") }} {{ gecko_minversion_inline("2.0") }}</dt> + <dd>These elements lets you add figures and illustration, with an eventual caption, loosely coupled to the main text.</dd> +</dl> + +<h3 id="支援_Canvas">支援 Canvas</h3> + +<dl> + <dt><a href="/zh_tw/Canvas_tutorial" title="zh_tw/Canvas_tutorial">Canvas 導覽 </a>{{ gecko_minversion_inline("1.8.1") }}</dt> + <dd> 學習如何使用新的 <code>{{ HTMLElement("canvas") }}</code> 元素，以及如何在 Firefox 中繪製圖表與其他物件。</dd> + <dt style="text-align: justify;"><a href="/en/Drawing_text_using_a_canvas" title="en/Drawing_text_using_a_canvas">給 <code><canvas></code> 元素的 HTML5 文字(text) API</a> {{ gecko_minversion_inline("1.9.1") }}</dt> + <dd style="text-align: justify;">{{ HTMLElement("canvas") }} 元素現在已經支援 HTML5 文字(text) API。</dd> +</dl> + +<h2 id="給_Web_應用程式的新功能">給 Web 應用程式的新功能</h2> + +<dl> + <dt><a href="/zh_tw/Firefox_中的離線資源" title="zh_tw/Firefox_中的離線資源">Firefox 中的離線資源(含 HTML5 Application Cache 介紹)</a> {{ gecko_minversion_inline("1.9.1") }}</dt> + <dd>Firefox 完整支援 HTML5 離線資源規格。</dd> + <dt><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">上線與離線事件 (Online and offline events)</a> {{ gecko_minversion_inline("1.9") }}</dt> + <dd>Firefox 3 支援 WHATWG 的上線與離線事件，這讓應用程式與擴充套件可以偵測目前是否有可用的 Internet 連線，也可以偵測何時建立或結束這個網路連線。</dd> + <dt><a href="/en/DOM/Storage" title="en/DOM/Storage">WHATWG 用戶端 session 與持續性儲存 (persistent storage) (亦稱 DOM 儲存)</a> {{ gecko_minversion_inline("1.8.1") }}</dt> + <dd>用戶端 session 與持續性儲存功能，讓 web 應用程式可以在用戶端儲存結構性資料。</dd> + <dt><a href="/en/HTML/Content_Editable" title="en/HTML/Content Editable">屬性 contentEditable ，將你的網站變成 wiki !</a> {{ gecko_minversion_inline("1.9.1") }}</dt> + <dd>HTML5 已經將 contentEditable 屬性標準化。學習更多這個新功能。</dd> + <dt><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">在 web 應用程式中存取檔案</a> {{ gecko_minversion_inline("1.9.2") }}</dt> + <dd>Gecko 已經支援新的 HTML5 檔案 API，讓 web 應用程式可以存取使用者所選的本地端檔案。這個功能也包含使用檔案類型的輸入元素 <span style="font-family: monospace;">{{ HTMLElement("input") }}</span> <a href="/en/HTML/Element/Input#attr-type" title="en/HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> 的新屬性 <a href="/en/HTML/Element/Input#attr-multiple" title="en/HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 來選取多個檔案。</dd> +</dl> + +<h2 id="DOM_新功能">DOM 新功能</h2> + +<dl> + <dt><a href="/en/DOM/document.getElementsByClassName" title="en/DOM/document.getElementsByClassName">getElementsByClassName</a> {{ fx_minversion_inline(3.0) }}</dt> + <dd>支援 Document 與 Element 節點的 getElementsByClassName 方法。這個方法允許藉由指定的一個或多個 class 尋找頁面中的元素。</dd> + <dt><a href="/zh_tw/DragDrop/Drag_and_Drop" title="zh_tw/DragDrop/Drag_and_Drop">拖曳功能 (Drag and drop)</a> {{ fx_minversion_inline(3.5) }}</dt> + <dd>HTML5 拖曳 API 支援在一個或多個網站之間拖曳物件。也提供了一個更簡化的 API 供擴充套件與 Mozilla-based 應用程式使用。</dd> + <dt><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">HTML Focus 管理</a> {{ fx_minversion_inline(3.0) }}</dt> + <dd>支援新的 HTML5 屬性：<code>activeElement</code> 與 <code>hasFocus</code> 。</dd> + <dt><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Web-based 協定處理器</a> {{ fx_minversion_inline(3.0) }}</dt> + <dd>你現在可以使用 <code>navigator.registerProtocolHandler() 方法</code>將 web 應用程式註冊成協定處理器 (protocol handlers)。</dd> +</dl> + +<h2 id="HTML_解析器">HTML 解析器</h2> + +<p>Gecko 的 <a href="/en/HTML/HTML5/HTML5_Parser" title="en/HTML/HTML5/HTML5 parser">HTML5相容解析器 </a>— 負責將一份 HTML 文件字元們轉化為 DOM — 已經於 2010 年五月預設為啟用。（備忘：該 HTML5 解析器版本搭載於 Gecko 1.9.2 / Firefox 3.6 當中，是個不穩定的版本，並且不建議用於正式使用環境。） {{ fx_minversion_inline(4.0) }}</p> + +<h2 id="其他">其他</h2> + +<ul> + <li>HTML 文件中的 <code>localName</code> 與 <code>namespaceURI</code> ，現在可以實作類似在 XML 文件中的行為：<code>localName</code> 傳回小寫字元，而 <code>namespaceURI</code> 對於 HTML 元素是 <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" </code>{{ fx_minversion_inline(3.6) }}</li> + <li>當頁面 URI 的片段標示 （在 "#" (hash) 字元之後的部份）有變更時，新的 <code>hashchange</code> 事件會被送至該頁面。 請參考 <a href="/en/DOM/window.onhashchange" title="en/DOM/window.onhashchange">window.onhashchange</a>。{{ fx_minversion_inline(3.6) }}</li> + <li>支援 <code><a href="/en/DOM/element.classList" title="en/DOM/element.classList">element.classList</a></code> ，可以更方便處理 class 屬性。 {{ fx_minversion_inline(3.6) }}</li> + <li>文件就緒事件 <a href="/en/DOM/document.onreadystatechange" title="en/DOM/document.onreadystatechange">document.onreadystatechange</a> {{ fx_minversion_inline(4) }} 以及 <a href="/en/DOM/document.readyState" title="en/DOM/document.readyState">document.readyState</a> {{ fx_minversion_inline(3.6) }} 也被支援了。</li> + <li>Colors in presentation attributes are interpreted according to HTML5. {{ fx_minversion_inline(4.0) }}</li> +</ul> + +<h2 id="有些人自以為它是_HTML5_的一部分……XD">有些人自以為它是 HTML5 的一部分……XD</h2> + +<ul> + <li><a href="/en/WebGL" title="en/WebGL">WebGL</a></li> + <li><a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a></li> + <li><code><a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code></li> + <li><code><a href="/en/DOM/Locating_DOM_elements_using_selectors" title="en/DOM/Locating DOM elements using selectors">querySelector(All)</a></code></li> + <li><a href="/En/Using_geolocation" title="En/Using geolocation">Geolocation</a></li> + <li><a href="/en/JavaScript/ECMAScript_5_support_in_Mozilla" title="en/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript5</a></li> + <li>CSS3</li> + <li><a href="/en/XBL2_specification_(external)" title="en/XBL2 specification (external)">XBL2</a></li> + <li><a href="/En/DOM/Using_web_workers" title="En/Using web workers">Web Workers</a></li> + <li><a href="/zh_tw/WebSockets" title="zh tw/WebSockets">Web Sockets</a></li> + <li>Faster JavaScript</li> +</ul> + +<h2 id="參考">參考</h2> + +<ul> + <li><a href="/Firefox/Releases/4" rel="internal">Firefox 4 技術文件</a></li> + <li><a href="/Firefox/Releases/3.6" title="en/Firefox 3.6 for developers">Firefox 3.6 技術文件</a></li> + <li><a href="/Firefox/Releases/3.5" title="En/Firefox 3.5 for developers">Firefox 3.5 技術文件</a></li> + <li><a href="/Firefox/Releases/3" title="en/Firefox 3 for developers">Firefox 3 技術文件</a></li> + <li><a href="/Firefox/Releases/2" title="en/Firefox 2 for developers">Firefox 2 技術文件</a></li> + <li><a href="/Firefox/Releases/1.5" title="en/Firefox 1.5 for developers">Firefox 1.5 技術文件</a></li> +</ul> + +<p>{{ HTML5ArticleTOC() }}</p> + +<p>{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5", "zh-tw": "zh_tw/HTML/HTML5", "pt-br": "pt-br/HTML/HTML5"} ) }}</p> diff --git a/files/zh-tw/web/guide/html/html5/introduction_to_html5/index.html b/files/zh-tw/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..7e2eba7335 --- /dev/null +++ b/files/zh-tw/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,40 @@ +--- +title: Introduction to HTML5 +slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +tags: + - HTML + - HTML5 +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標準。它提供一些新特性，不只是支援多媒體，還讓網頁應用程式可以更容易、更有效地與使用者、伺服器互動。</p> + +<p>目前，仍有一些瀏覽器未完全支援HTML5所有特性。但是使用Gecko解析引擎的Firefox已經對HTML5十分支持，現時還繼續開發去支援更多特性。Gecko已經在1.8.1版本開始支持一些HTML5 了。你可以在<a href="/en/HTML/HTML5" title="en/HTML/HTML5">main HTML5 page</a>找到Gecko解析引擎最近支援的HTML5特性列表。若要更仔細知道多種瀏覽器支援的情況，可瀏覽<a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a>。</p> + +<h2 id="建立HTML5文件並宣告HTML5_doctype">建立HTML5文件並宣告HTML5 doctype</h2> + +<p>要建立HTML5文件很簡單，只需要在文件開首宣告：</p> + +<pre class="brush:html;"><!DOCTYPE html> +</pre> + +<p>對於未支援HTML5標準的瀏覽器，瀏覽器會繼續解析，但要注意一些HTML5的新特性則會忽略、不會支援。</p> + +<p>然而這個宣告方法比以前HTML版本更簡單、更短，更容易記憶，亦減少文件容量。</p> + +<h2 id="利用<meta_charset>來宣告字符集"><code>利用<meta charset>來宣告字符集</code></h2> + +<p>你需要首先指示瀏覽器要使用哪一種字符集。在以前版本，這需要複雜的<code><meta>完素；來到</code>HTML5，這變得非常簡單：</p> + +<pre class="brush:html;"><meta charset="UTF-8"></pre> + +<p>將它放置在<code><head></head>之間。若果你使用的字符集與瀏覽器預先設定的不一樣，</code><span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">瀏覽器會重新解析文件。另外，若你目前並非</span>UTF-8<span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">字符集，建議你在網頁中自行設定。</span></p> + +<p>為了加強安全，HTML5文件限制<span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">字符集需要兼容</span>ASCII和最少8位元。</p> + +<h2 id="Using_the_new_HTML5_parser">Using the new HTML5 parser</h2> + +<p>The parsing rule of HTML5, which analyzes the meaning of mark-up, has been more precisely defined in HTML5. Until the introduction of HTML5, only the meaning of <em>valid</em> mark-up was defined, meaning that as soon as one small error was made in the mark-up (most Web sites have at least one), the behavior was undefined. Essentially, it meant that all browsers behaved differently, which is no longer the case. Now, faced with errors in the mark-up, all compliant browsers must behave exactly in the same way.</p> + +<p>This requirement helps Web developers quite a bit. While it is true that all modern browsers now use these HTML5 parsing rules, non-HTML5-compliant browsers are still used by some. Keep in mind that it's still highly recommended that one write valid mark-up, as such code is easier to read and maintain, and it greatly decreases the prominence of incompatibilities that exists in various older browsers.</p> + +<p>Don't worry — you don't have to change anything on your Web site — the Web browsers' developers have done everything for you!</p> |