diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
| commit | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch) | |
| tree | a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/zh-tw/web/html/element | |
| parent | 074785cea106179cb3305637055ab0a009ca74f2 (diff) | |
| download | translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip | |
initial commit
Diffstat (limited to 'files/zh-tw/web/html/element')
27 files changed, 4839 insertions, 0 deletions
diff --git a/files/zh-tw/web/html/element/a/index.html b/files/zh-tw/web/html/element/a/index.html new file mode 100644 index 0000000000..91224a9318 --- /dev/null +++ b/files/zh-tw/web/html/element/a/index.html @@ -0,0 +1,313 @@ +--- +title: <a> +slug: Web/HTML/Element/a +translation_of: Web/HTML/Element/a +--- +<p><span class="seoSummary"><strong>HTML <code><a></code> 元素</strong>（意為 Anchor）建立了通往其他頁面、檔案、Email 地址、或其他 URL 的超連結。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories">內容類型</a></th> + <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content">流型內容</a>、<a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/zh-TW/docs/Web/Guide/HTML/Content_categories#interactive_content">interactive content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">內容省略</th> + <td><a href="/zh-TW/docs/HTML/Content_categories#Transparent_content_model">Transparent</a>, containing either <a href="/zh-TW/docs/HTML/Content_categories#Flow_content">flow content</a> (excluding <a href="/zh-TW/docs/Web/Guide/HTML/Content_categories#interactive_content">interactive content</a>) or <a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">標籤省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允許的父元素</th> + <td>任何允許 <a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">phrasing content</a> 或 <a href="/zh-TW/docs/HTML/Content_categories#Flow_content">flow content</a> 的內容，但 <a> 永遠例外（according to the logical principle of symmetry, if <a> tag, as a parent, can not have <a href="/en-US/docs/Web/Guide/HTML/Content_categories#interactive_content">interactive content</a>, then the same <a> content can not have <a> tag as its parent）</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td> + </tr> + <tr> + <th scope="row">DOM 介面</th> + <td>{{domxref("HTMLAnchorElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="屬性">屬性</h2> + +<p>本元素包含<a href="/zh-TW/docs/HTML/Global_attributes">全域屬性</a>。</p> + +<dl> + <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt> + <dd>This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). There are no restrictions on allowed values, though <code>/</code> and <code>\</code> are converted to underscores. Most file systems limit some punctuation in file names, and browsers will adjust the suggested name accordingly. + <div class="note"><strong>Notes:</strong> + <ul> + <li>This attribute only works for <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin URLs</a>.</li> + <li>This attribute can be used with <a href="/en-US/docs/Web/API/URL.createObjectURL"><code>blob:</code> URLs</a> and <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URLs</a> to download content generated by JavaScript, such as pictures created in an image-editor Web app.</li> + <li>If the HTTP header <a href="/en-US/docs/Web/HTTP/Headers/Content-Disposition"><code>Content-Disposition:</code></a> gives a different filename than this attribute, the HTTP header takes priority over this attribute.</li> + <li>If <code>Content-Disposition:</code> is set to <code>inline</code>, Firefox prioritizes <code>Content-Disposition</code>, like the filename case, while Chrome prioritizes the <code>download</code> attribute.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("href")}}</dt> + <dd>Contains a URL or a URL fragment that the hyperlink points to.</dd> + <dd>A URL fragment is a name preceded by a hash mark (<code>#</code>), which specifies an internal target location (an <a href="/en-US/docs/HTML/Global_attributes#attr-id">ID</a> of an HTML element) within the current document. URLs are not restricted to Web (HTTP)-based documents, but can use any protocol supported by the browser. For example, <a class="external" href="https://en.wikipedia.org/wiki/File_URI_scheme"><code>file:</code></a>, <code>ftp:</code>, and <code>mailto:</code> work in most browsers.</dd> + <dd>This attribute may be omitted (as of HTML5) to create a placeholder link. A placeholder link resembles a traditional hyperlink, but does not lead anywhere. + <div class="note"> + <p><strong>Note:</strong> You can use <code>href="#top"</code> or the empty fragment <code>href="#"</code> to link to the top of the current page. <a href="https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid">This behavior is specified by HTML5</a>.</p> + </div> + </dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>This attribute indicates the human language of the linked resource. It is purely advisory, with no built-in functionality. Allowed values are determined by <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages">BCP47</a>.</dd> + <dt>{{htmlattrdef("ping")}}</dt> + <dd>Contains a space-separated list of URLs to which, when the hyperlink is followed, {{HTTPMethod("POST")}} requests with the body <code>PING</code> will be sent by the browser (in the background). Typically used for tracking.</dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>Indicates which <a href="/en-US/docs/Web/HTTP/Headers/Referer">referrer</a> to send when fetching the URL: + <ul> + <li><code>'no-referrer'</code> means the <code>Referer:</code> header will not be sent.</li> + <li><code>'no-referrer-when-downgrade'</code> means no <code>Referer:</code> header will be sent when navigating to an origin without HTTPS. This is the default behavior.</li> + <li><code>'origin'</code> means the referrer will be the <a href="/en-US/docs/Glossary/Origin">origin</a> of the page, not including information after the domain.</li> + <li><code>'origin-when-cross-origin'</code> meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.</li> + <li><code>'unsafe-url'</code> means the referrer will include the origin and path, but not the fragment, password, or username. This is unsafe because it can leak data from secure URLs to insecure ones.</li> + </ul> + </dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>Specifies the relationship of the target object to the link object. The value is a space-separated list of <a href="/en-US/docs/Web/HTML/Link_types">link types</a>.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Specifies where to display the linked URL. It is a name of, or keyword for, a <em>browsing context</em>: a tab, window, or <code><iframe></code>. The following keywords have special meanings: + <ul> + <li><code>_self</code>: Load the URL into the same browsing context as the current one. This is the default behavior.</li> + <li><code>_blank</code>: Load the URL into a new browsing context. This is usually a tab, but users can configure browsers to use new windows instead.</li> + <li><code>_parent</code>: Load the URL into the parent browsing context of the current one. If there is no parent, this behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the URL into the top-level browsing context (that is, the "highest" browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this behaves the same way as <code>_self</code>.</li> + </ul> + + <div class="note"> + <p><strong>Note:</strong> When using <code>target</code>, consider adding <code>rel="noopener noreferrer"</code> to avoid exploitation of the <code>window.opener</code> API.</p> + </div> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Specifies the media type in the form of a {{Glossary("MIME type")}} for the linked URL. It is purely advisory, with no built-in functionality.</dd> +</dl> + +<h3 id="Obsolete">Obsolete</h3> + +<dl> + <dt>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>This attribute defined the <a href="/en-US/docs/Glossary/character_encoding">character encoding</a> of the linked URL. The value should be a space- and/or comma-delimited list of character sets defined in <a class="external" href="https://tools.ietf.org/html/rfc2045">RFC 2045</a>. The default value is <code>ISO-8859-1</code>. + <div class="note"> + <p><strong>Usage note:</strong> This attribute is obsolete in HTML5 and <strong>should not be used by authors</strong>. To achieve its effect, use the HTTP <a href="/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type:</code></a> header on the linked URL.</p> + </div> + </dd> + <dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>For use with the below <code>shape</code> attribute, this attribute used a comma-separated list of numbers to define the coordinates of the link on the page.</dd> + <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>This attribute was required for anchors defining a possible target location within a page. In HTML 4.01, <code>id</code> and <code>name</code> could be used simultaneously on a <code><a></code> element as long as they have identical values. + <div class="note"> + <p><strong>Usage note:</strong> This attribute is obsolete in HTML5, use the <a href="/en-US/docs/HTML/Global_attributes#attr-id">global attribute <code>id</code></a> instead.</p> + </div> + </dd> + <dt>{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>This attribute specified a reverse link, the inverse relationship of the <strong>rel</strong> attribute. It was deprecated for being very confusing.</dd> + <dt>{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>This attribute was used to define a region for hyperlinks to create an image map. The values are <code>circle</code>, <code>default</code>, <code>polygon</code>, and <code>rect</code>. The format of the <strong>coords</strong> attribute depends on the value of shape. For <code>circle</code>, the value is <code>x,y,r</code> where <code>x</code> and <code>y</code> are the pixel coordinates for the center of the circle and <code>r</code> is the radius value in pixels. For <code>rect</code>, the <strong>coords</strong> attribute should be <code>x,y,w,h</code>. The <code>x,y</code> values define the upper-left-hand corner of the rectangle, while <code>w</code> and <code>h</code> define the width and height respectively. A value of <code>polygon</code> for <strong>shape</strong> requires <code>x1,y1,x2,y2,...</code> values for <strong>coords</strong>. Each of the <code>x,y</code> pairs defines a point in the polygon, with successive points being joined by straight lines and the last point joined to the first. The value <code>default</code> for shape requires that the entire enclosed area, typically an image, be used. + <div class="note"><strong>Note:</strong> Use the <a href="/en-US/docs/Web/HTML/Element/img#attr-usemap"><code>usemap</code> attribute</a> for the {{HTMLElement("img")}} element and the associated {{HTMLElement("map")}} element to define hotspots instead of the <code>shape</code> attribute.</div> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Linking_to_an_external_location">Linking to an external location</h3> + +<pre class="brush: html"><!-- anchor linking to external file --> +<a href="https://www.mozilla.com/"> +External Link +</a> +</pre> + +<h4 id="Result">Result</h4> + +<p><a class="external" href="https://www.mozilla.com/">External Link</a></p> + +<h3 id="Linking_to_another_section_on_the_same_page">Linking to another section on the same page</h3> + +<pre class="brush: html"><!-- links to element on this page with id="attr-href" --> +<a href="#attr-href"> +Description of Same-Page Links +</a> +</pre> + +<h4 id="Result_2">Result</h4> + +<p><a href="#attr-href">Description of Same Page Links</a></p> + +<h3 id="Creating_a_clickable_image">Creating a clickable image</h3> + +<p>This example uses an image to link to the MDN home page. The home page will open in a new browsing context, that is, a new page or a new tab.</p> + +<pre class="brush: html"><a href="https://developer.mozilla.org/en-US/" target="_blank"> + <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" + alt="MDN logo" /> +</a> +</pre> + +<h4 id="Result_3">Result</h4> + +<figure> +<p>{{EmbedLiveSample("Creating_a_clickable_image", "320", "64")}}</p> +</figure> + +<h3 id="Creating_an_email_link">Creating an email link</h3> + +<p>It's common to create links that open in the user's email program to allow them to send a new message. This is done with a <code>mailto:</code> link. Here's a simple example:</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a></pre> + +<h4 id="Result_4">Result</h4> + +<p><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a></p> + +<p>For additional details about the <code>mailto</code> URL scheme, such as including the subject, body, or other predetermined content, see <a href="/en-US/docs/Web/Guide/HTML/Email_links">Email links</a> or {{RFC(6068)}}.</p> + +<h3 id="Creating_a_phone_link">Creating a phone link</h3> + +<p>Offering phone links is helpful for users viewing web documents and laptops connected to phones.</p> + +<pre class="brush: html"><a href="tel:+491570156">+49 157 0156</a></pre> + +<p>For additional details about the <code>tel</code> URL scheme, see {{RFC(3966)}}.</p> + +<h3 id="Using_the_download_attribute_to_save_a_<canvas>_as_a_PNG">Using the <code>download</code> attribute to save a <code><canvas></code> as a PNG</h3> + +<p>If you want to let users download an HTML {{HTMLElement("canvas")}} element as an image, you can create a link with a <code>download</code> attribute and the canvas data as a file URL:</p> + +<pre class="brush: js">var link = document.createElement('a'); +link.textContent = 'download image'; + +link.addEventListener('click', function(ev) { + link.href = canvas.toDataURL(); + link.download = "mypainting.png"; +}, false); + +document.body.appendChild(link);</pre> + +<p>You can see this in action at <a href="https://jsfiddle.net/codepo8/V6ufG/2/">jsfiddle.net/codepo8/V6ufG/2/</a>.</p> + +<h2 id="Notes">Notes</h2> + +<p>HTML 3.2 defines only the <code>name</code>, <code>href</code>, <code>rel</code>, <code>rev</code>, and <code>title</code> attributes.</p> + +<h3 id="Accessibility_recommendations">Accessibility recommendations</h3> + +<p>Anchor tags are often abused with the <code>onclick</code> event to create pseudo-buttons by setting <strong>href</strong> to <code>"#"</code> or <code>"javascript:void(0)"</code> to prevent the page from refreshing. These values cause unexpected behavior when copying/dragging links, opening links in a new tabs/windows, bookmarking, and when JavaScript is still downloading, errors out, or is disabled. This also conveys incorrect semantics to assistive technologies (e.g., screen readers). In these cases, it is recommended to use a {{HTMLElement("button")}} instead. In general you should only use an anchor for navigation using a proper URL. </p> + +<h3 id="Clicking_and_focus">Clicking and focus</h3> + +<p>Whether clicking on an {{HTMLElement("a")}} causes it to become focused varies by browser and OS.</p> + +<table> + <caption>Does clicking on an {{HTMLElement("a")}} give it focus?</caption> + <tbody> + <tr> + <td>Desktop Browsers</td> + <th>Windows 8.1</th> + <th>OS X 10.9</th> + </tr> + <tr> + <th>Firefox 30.0</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + <tr> + <th>Chrome ≥39<br> + (<a href="https://code.google.com/p/chromium/issues/detail?id=388666" title="Issue 388666: Focus anchor (A) elements on mousedown">Chromium bug 388666</a>)</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + <tr> + <th>Safari 7.0.5</th> + <td style="background-color: silver;">N/A</td> + <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td> + </tr> + <tr> + <th>Internet Explorer 11</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Presto (Opera 12)</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + </tbody> +</table> + +<table> + <caption>Does tapping on an {{HTMLElement("a")}} give it focus?</caption> + <tbody> + <tr> + <td>Mobile Browsers</td> + <th>iOS 7.1.2</th> + <th>Android 4.4.4</th> + </tr> + <tr> + <th>Safari Mobile</th> + <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Chrome 35</th> + <td>???</td> + <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrer</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.a")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other elements conveying <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements">text-level semantics</a>: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-tw/web/html/element/blink/index.html b/files/zh-tw/web/html/element/blink/index.html new file mode 100644 index 0000000000..9913548a5c --- /dev/null +++ b/files/zh-tw/web/html/element/blink/index.html @@ -0,0 +1,75 @@ +--- +title: <blink>：文字閃爍元素（已過時） +slug: Web/HTML/Element/blink +translation_of: Web/HTML/Element/blink +--- +<div>{{Deprecated_header}} {{obsolete_header}}</div> + +<p><span class="seoSummary">非標準元素 <strong>HTML Blink</strong>（<code><blink></code>）可以讓該元素裡面的文字緩慢閃爍。</span></p> + +<div class="warning">不要使用這個元素，因為它已經<strong>被棄用</strong>，而且是糟糕的設計。無障礙標準不會接受閃爍文字、而 CSS 規範上允許瀏覽器忽略閃爍效果。</div> + +<h2 id="DOM_介面">DOM 介面</h2> + +<p>此元素並未被支援，因此是透過 {{domxref("HTMLUnknownElement")}} 介面實做。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush:html"><blink>Why would somebody use this?</blink> +</pre> + +<h3 id="結果（已經過淡化！）">結果（已經過淡化！）</h3> + +<p><img alt="Image:HTMLBlinkElement.gif" src="/@api/deki/files/247/=HTMLBlinkElement.gif"></p> + +<h2 id="規範">規範</h2> + +<p>此元素並非標準元素，也不屬於任何規範。不信的話，<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features">你自己來看 HTML 規範</a>。</p> + +<h2 id="CSS_Polyfill">CSS Polyfill</h2> + +<p>如果真的需要 polyfill，請使用以下的 CSS。它支援 IE10 以上。</p> + +<pre class="brush:html">blink { + -webkit-animation: 2s linear infinite condemned_blink_effect; // for android + animation: 2s linear infinite condemned_blink_effect; +} +@-webkit-keyframes condemned_blink_effect { // for android + 0% { + visibility: hidden; + } + 50% { + visibility: hidden; + } + 100% { + visibility: visible; + } +} +@keyframes condemned_blink_effect { + 0% { + visibility: hidden; + } + 50% { + visibility: hidden; + } + 100% { + visibility: visible; + } +}</pre> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + + + +<p>{{Compat("html.elements.blink")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="http://www.montulli.org/theoriginofthe%3Cblink%3Etag">HTML <code><blink></code> 元素的創建史</a>。</li> + <li>{{cssxref("text-decoration")}}，儘管有 blink 值，多數瀏覽器並不需要實做閃爍效果。</li> + <li>{{htmlelement("marquee")}}，類似的非標準元素。</li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations" title="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS 動畫</a>能得出與此元素相同的效果。</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-tw/web/html/element/blockquote/index.html b/files/zh-tw/web/html/element/blockquote/index.html new file mode 100644 index 0000000000..6b0fe2650f --- /dev/null +++ b/files/zh-tw/web/html/element/blockquote/index.html @@ -0,0 +1,149 @@ +--- +title: <blockquote> +slug: Web/HTML/Element/blockquote +translation_of: Web/HTML/Element/blockquote +--- +<h2 id="摘要">摘要</h2> + +<p><strong>HTML <code><blockquote></code> 元素</strong>（<em>HTML 區塊引言元素</em>）定義一段文字屬於引用。通常，這元素會透過縮排來呈現（要知道如何改變，請參考<a href="#Notes">備註</a>）。引言的 URL 來源可透過 <strong>cite</strong> 屬性賦予，而來源的文本形式可以使用 {{HTMLElement("cite")}} 元素。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories" title="HTML/Content_categories">內容類別</a></th> + <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流內容</a>、sectioning root、捫及內容。</td> + </tr> + <tr> + <th scope="row">允許內容</th> + <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">內容流</a>.</td> + </tr> + <tr> + <th scope="row">Tag 省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允許父元素</th> + <td>任何允許<a href="/zh-TW/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">內容流</a>的元素</td> + </tr> + <tr> + <th scope="row">DOM 介面</th> + <td>{{domxref("HTMLQuoteElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="屬性">屬性</h2> + +<p>這個屬性包含<a href="https://developer.mozilla.org/zh-TW/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局屬性</a><span style="line-height: 21px;">。</span></p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>一個指向被引用的原始文件或訊息的 URL 。這個屬性預期要指引到解釋內容的資訊，或是引言的援引。</dd> +</dl> + +<h2 id="範例">範例</h2> + +<pre class="brush: html"><blockquote cite="http://developer.mozilla.org"> + <p>這是取自於 Mozilla Developer Center 的引言。</p> +</blockquote> +</pre> + +<p>以上的 HTML 原始碼會輸出：</p> + +<blockquote cite="http://developer.mozilla.org"> +<p>這是取自於 Mozilla Developer Center 的引言。</p> +</blockquote> + +<h2 id="Specifications" name="Specifications">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">規範</th> + <th scope="col">狀態</th> + <th scope="col">註解</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特徵</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支援</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特徵</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支援</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="備註">備註</h2> + +<p>要改變<code><blockquote></code>的縮進，請使用 <a href="/zh-TW/docs/CSS" title="CSS">CSS</a> 的 {{cssxref("margin")}} 屬性。</p> + +<p>針對短篇引文請使用 {{HTMLElement("q")}} 元素。</p> + +<h2 id="延伸閱讀">延伸閱讀</h2> + +<ul> + <li>{{HTMLElement("q")}} 元素：用以表示單行的引用內容。</li> + <li>{{HTMLElement("cite")}} 元素：用以表示引用來源。</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-tw/web/html/element/br/index.html b/files/zh-tw/web/html/element/br/index.html new file mode 100644 index 0000000000..2542c0182e --- /dev/null +++ b/files/zh-tw/web/html/element/br/index.html @@ -0,0 +1,130 @@ +--- +title: <br>（斷行元素） +slug: Web/HTML/Element/br +translation_of: Web/HTML/Element/br +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><br></code> 元素</strong>會產生文字的斷行（carriage-return、CR 或是確認鍵）。此元素主要用於斷行有所意義的時候，像是寫詩或寫住址。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>如上所示，<code><br></code> 元素會在需要斷行的時候出現。在 <code><br></code> 之後的文字會從文字區域的下一行出現。</p> + +<div class="note"> +<p><strong>注意</strong>：不要用 <code><br></code> 建立段落間距：這種情況下要用 {{htmlelement("p")}} 把它們包起來，並使用 <a href="/zh-TW/docs/CSS">CSS</a> {{cssxref('margin')}} 屬性控制間距大小。</p> +</div> + +<h2 id="屬性">屬性</h2> + +<p>這個元件屬性含有<a href="/zh-TW/docs/HTML/Global_attributes">全域屬性</a>。</p> + +<h3 id="棄用屬性">棄用屬性</h3> + +<dl> + <dt>{{htmlattrdef("clear")}}</dt> + <dd>指示中斷後下一行的開始位置。</dd> +</dl> + +<h2 id="使用_CSS_樣式化">使用 CSS 樣式化</h2> + +<p><code><br></code> 元素有一個定義明確的用途：在文字區塊裡面建立斷行。因此它本身沒有尺寸或視覺輸出，基本上你做不了任何樣式化。</p> + +<p>你可以給 <code><br></code> 元素設置 {{cssxref("margin")}} 以增加文字之間的斷行大小，但這並不是正確的作法：你應該用 {{cssxref("line-height")}} 屬性做這件事情。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html notranslate">Mozilla Foundation<br> +1981 Landings Drive<br> +Building K<br> +Mountain View, CA 94043-0801<br> +USA +</pre> + +<p>以上 HTML 將顯示</p> + +<p>{{ EmbedLiveSample('示例', '100%', '90') }}</p> + +<h2 id="無障礙議題">無障礙議題</h2> + +<p>使用 <code><br></code> 元素<em>分段</em>不只作法不佳，對於使用輔具的人來說，也會是有問題的。螢幕閱讀器會念出該元素，但 <code><br></code> 裡面的內容是念不出來的。對於使用螢幕閱讀器的人來說，這可能是困惑與沮喪的體驗。</p> + +<p>請使用 <code><p></code> 元素搭配 CSS 屬性如 {{cssxref("margin")}} 來控制間距大小。</p> + +<h2 id="技術摘要">技術摘要</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories">內容類型</a></th> + <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content">流型內容</a>、<a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">段落型內容</a>。</td> + </tr> + <tr> + <th scope="row">允許內容</th> + <td>無，這是個{{Glossary("空元素")}}.</td> + </tr> + <tr> + <th scope="row">標籤省略</th> + <td>絕對要有開啟標籤，也絕不能關閉標籤。在 XHTML 文件內，要把這個元素寫成 <code><br /></code>.</td> + </tr> + <tr> + <th scope="row">允許父元素</th> + <td>任何接受<a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">段落型內容</a>的元素</td> + </tr> + <tr> + <th scope="row">允許的 ARIA roles</th> + <td>所有</td> + </tr> + <tr> + <th scope="row">DOM 介面</th> + <td>{{domxref("HTMLBRElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">規範</th> + <th scope="col">狀態</th> + <th scope="col">註解</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + + + +<p>{{Compat("html.elements.br")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTMLElement("address")}} 元素</li> + <li>{{HTMLElement("p")}} 元素</li> + <li>{{HTMLElement("wbr")}} 元素</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-tw/web/html/element/button/index.html b/files/zh-tw/web/html/element/button/index.html new file mode 100644 index 0000000000..a78352ca0f --- /dev/null +++ b/files/zh-tw/web/html/element/button/index.html @@ -0,0 +1,355 @@ +--- +title: <button> +slug: Web/HTML/Element/button +translation_of: Web/HTML/Element/button +--- +<p><strong>HTML <code><button></code> 元素代表一個可點擊的按鈕。</strong></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">內容類別</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">流內容</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">分段內容</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content">互動內容</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed">條列的</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable">標籤式的</a>, 以及 <a href="/en-US/docs/HTML/Content_categories#Form_submittable">可提交式的關係形式</a>元素, 可觸知的內容.</td> + </tr> + <tr> + <th scope="row">被允許的內容</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">分段內容</a>.</td> + </tr> + <tr> + <th scope="row">遺漏標籤</th> + <td>所有標籤皆不可遺漏</td> + </tr> + <tr> + <th scope="row">允許的父級元素</th> + <td>任何接受<a href="/en-US/docs/HTML/Content_categories#Phrasing_content">分段內容</a>的元素.</td> + </tr> + <tr> + <th scope="row">可接受 ARIA設定的角色</th> + <td>{{ARIARole("checkbox")}}, {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</td> + </tr> + <tr> + <th scope="row">DOM介面</th> + <td>{{domxref("HTMLButtonElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="屬性">屬性</h2> + +<p>這元素的屬性包含<a href="/en-US/docs/HTML/Global_attributes">全域屬性</a>.</p> + +<dl> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt> + <dd>頁面載入後, 該按鈕如有輸入的焦點, 這個布林值式屬性即可指定上去, 除非使用者覆寫之, 例如通過不同的控制. 文本中只有一個關聯形式元素可以被指定該屬性.</dd> + <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> + <dd>The use of this attribute on a {{HTMLElement("button")}} is nonstandard and Firefox-specific. By default, unlike other browsers, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox persists the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Setting the value of this attribute to <code>off</code> (i.e. <code>autocomplete="off"</code>) disables this feature. See {{bug(654072)}}.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>This Boolean attribute indicates that the user cannot interact with the button. If this attribute is not specified, the button inherits its setting from the containing element, for example {{HTMLElement("fieldset")}}; if there is no containing element with the <strong>disabled</strong> attribute set, then the button is enabled.</p> + + <p>Firefox will, unlike other browsers, by default, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p> + </dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> + <dd>The form element that the button is associated with (its <em>form owner</em>). The value of the attribute must be the <strong>id</strong> attribute of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, the <code><button></code> element will be associated to an ancestor {{HTMLElement("form")}} element, if one exists. This attribute enables you to associate <code><button></code> elements to {{HTMLElement("form")}} elements anywhere within a document, not just as descendants of {{HTMLElement("form")}} elements.</dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt> + <dd>The URI of a program that processes the information submitted by the button. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the button's form owner.</dd> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline(5)}}</dt> + <dd>If the button is a submit button, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> + <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the button's form owner.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline(5)}}</dt> + <dd>If the button is a submit button, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: + <ul> + <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> + <li><code>get</code>: The data from the form are appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> + </ul> + + <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the button's form owner.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline(5)}}</dt> + <dd>If the button is a submit button, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the button's form owner.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline(5)}}</dt> + <dd>If the button is a submit button, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the button's form owner. The following keywords have special meanings: + <ul> + <li><code>_self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>The name of the button, which is submitted with the form data.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>The type of the button. Possible values are: + <ul> + <li><code>submit</code>: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.</li> + <li><code>reset</code>: The button resets all the controls to their initial values.</li> + <li><code>button</code>: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.</li> + <li>menu: The button opens a popup menu defined via its designated {{HTMLElement("menu")}} element.</li> + </ul> + </dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>The initial value of the button. It defines the value associated with the button which is submitted with the form data. This value is passed to the server in params when the form is submitted.</dd> +</dl> + +<h2 id="Notes">Notes</h2> + +<p><code><button></code> elements are much easier to style than {{HTMLElement("input")}} elements. You can add inner HTML content (think <code><em></code>, <code><strong></code> or even <code><img></code>), and make use of {{Cssxref(":after")}} and {{Cssxref(":before")}} pseudo-element to achieve complex rendering while {{HTMLElement("input")}} only accepts a text value attribute.</p> + +<p>IE7 has a bug where when submitting a form with <code><button type="submit" name="myButton" value="foo">Click me</button></code>, the <code>POST</code> data sent will result in <code>myButton=Click me</code> instead of <code>myButton=foo</code>.<br> + IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7.<br> + This bug has been fixed in IE8.</p> + +<p>Firefox will add, for accessibility purposes, a small dotted border on a focused button. This border is declared through CSS, in the browser stylesheet, but you can override it if necessary to add your own focused style using <code>button{{cssxref("::-moz-focus-inner")}} { }</code></p> + +<p>Firefox will, unlike other browsers, by default, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Setting the value of the {{htmlattrxref("autocomplete","button")}} attribute to <code>off</code> disables this feature. See {{bug(654072)}}.</p> + +<p>Firefox <35 for Android sets a default {{ cssxref("background-image") }} gradient on all buttons (see {{bug(763671)}}). This can be disabled using <code>background-image: none</code>.</p> + +<h3 id="Clicking_and_focus">Clicking and focus</h3> + +<p>Whether clicking on a {{HTMLElement("button")}} causes it to (by default) become focused varies by browser and OS. The results for {{HTMLElement("input")}} of <code>type="button"</code> and <code>type="submit"</code> were the same.</p> + +<table> + <caption>Does clicking on a {{HTMLElement("button")}} give it the focus?</caption> + <tbody> + <tr> + <td>Desktop Browsers</td> + <th>Windows 8.1</th> + <th>OS X 10.9</th> + </tr> + <tr> + <th>Firefox 30.0</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: red;">No (even with a <code>tabindex</code>)</td> + </tr> + <tr> + <th>Chrome 35</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + <tr> + <th>Safari 7.0.5</th> + <td style="background-color: silver;">N/A</td> + <td style="background-color: red;">No (even with a <code>tabindex</code>)</td> + </tr> + <tr> + <th>Internet Explorer 11</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Presto (Opera 12)</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + </tbody> +</table> + +<table> + <caption>Does tapping on a {{HTMLElement("button")}} give it the focus?</caption> + <tbody> + <tr> + <td>Mobile Browsers</td> + <th>iOS 7.1.2</th> + <th>Android 4.4.4</th> + </tr> + <tr> + <th>Safari Mobile</th> + <td style="background-color: red;">No (even with a <code>tabindex</code>)</td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Chrome 35</th> + <td style="background-color: red;">No (even with a <code>tabindex</code>)</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<pre class="brush:html"><button name="button">Click me</button> +</pre> + +<p>{{ EmbedLiveSample('Example', 200, 64) }}</p> + +<p>Please note that this button has CSS applied.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>formaction</code> attribute</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formenctype</code> attribute</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.6</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formmethod</code> attribute</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>autofocus</code> attribute</td> + <td>5.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + <tr> + <td><code>menu</code> value for <code>type</code> attribute</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>formaction</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formenctype</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formmethod</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>menu</code> value for <code>type</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko does not implement this feature yet. See {{bug("1241353")}}.</p> + +<h2 id="See_also">See also</h2> + +<p>Other elements that are used for creating forms: {{HTMLElement("form")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}},{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}.</p> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-tw/web/html/element/canvas/index.html b/files/zh-tw/web/html/element/canvas/index.html new file mode 100644 index 0000000000..9bcf297f8c --- /dev/null +++ b/files/zh-tw/web/html/element/canvas/index.html @@ -0,0 +1,193 @@ +--- +title: <canvas> +slug: Web/HTML/Element/canvas +translation_of: Web/HTML/Element/canvas +--- +<p>這個 <strong>HTML <code><canvas></code> 元素</strong> 可以被使用於對腳本程式(JaveScript) 繪圖 .舉例來說, 它能用來畫圖,組合照片,甚至作動畫. 你也許(應該) 在<canvas>區段內提供替代方案的內容 .這內容將能被一些不支援<canvas>以及無法使用Javescript功能的瀏覽器所渲染 .</p> + +<p>更多文章關於canvas, 請參考 <a href="/en-US/docs/Web/API/Canvas_API">canvas 主題</a></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content 分類</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">流程式content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">段落式content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Embedded_content">強調式content</a>, 可見式 content.</td> + </tr> + <tr> + <th scope="row"> + <p>被允許通過的內容</p> + </th> + <td> + <p>除了子元素不是 <a>的元素、 <button>的元素、<input>的元素屬性是<code>checkbox</code>, <code>radio</code>, 或 <code>button</code> 之外且是透明內容模型但不是<a href="/en-US/docs/HTML/Content_categories#Interactive_content">互動式content</a></p> + </td> + </tr> + <tr> + <th scope="row">Tag 省略</th> + <td>不能省略標籤<canvas> </canvas></td> + </tr> + <tr> + <th scope="row">被允許通過的父親元素</th> + <td> + <p>任何<a href="/en-US/docs/HTML/Content_categories#Phrasing_content">強調式content</a>的元素皆可通過</p> + </td> + </tr> + <tr> + <th scope="row">DOM 介面</th> + <td>HTMLCanvasElement</td> + </tr> + </tbody> +</table> + +<h2 id="屬性">屬性</h2> + +<p>這個元素的屬性包含全域屬性</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>在CSS 中以 pixels 表示 座標的空間<strong>高度</strong>（預設是150）</dd> + <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}}</dt> + <dd>讓canvas知道這個因素是否為半透明的。如果 canvas 知道不是半透明，則提高繪畫的效能</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>在CSS 中以 pixels 表示 座標的空間<strong>寬度</strong>（預設是300）</dd> +</dl> + +<h2 id="描述">描述</h2> + +<h3 id="需要_<canvas>_結尾">需要 <code></canvas></code> 結尾</h3> + +<p>與<img>不同之處,<code><canvas></code>需要<code></canvas></code> 結尾</p> + +<h3 id="canvas的大小設置">canvas的大小設置</h3> + +<p>canvas的大小設置可透過樣式表（stylesheet）被改變。可經由樣式修改圖像的縮放大小。</p> + +<p>若呈現的效果圖似乎是扭曲變形的，可試著先修改<code><canvas></code>標籤中的<code>width</code>和<code>height</code>的屬性，而<strong>不建議</strong>使用css去控制。</p> + +<h2 id="範例">範例</h2> + +<p>將下面這條範例加到你的HTML文件。如果你的瀏覽器並不支援canvas 或不能讀取canvas 時，則會回報canvas中的訊息。若想知道更多有用的回應訊息或替代DOM的註文，可以<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">參考更多相似的註文</a>。</p> + +<pre class="brush: html"><canvas id="canvas" width="300" height="300"> + 抱歉，你的瀏覽器並不支援<canvas>元素 +</canvas> +</pre> + +<p>如果你的canvas沒有使用透明度，可在<canvas>標籤設立<code>moz-opaque</code>屬性，提升它的繪圖效果。<code>moz-opaque</code> 尚未標準化，所以只適用在 Mozilla 的 效能引擎。</p> + +<pre class="brush: html"><canvas id="mycanvas" moz-opaque></canvas></pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">規格</th> + <th scope="col">狀態</th> + <th scope="col">註解</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-canvas-element.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>原始的定義</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("6.0")}}<sup>[2]</sup><br> + {{CompatGeckoDesktop("12.0")}}<sup>[3]</sup></td> + <td>9.0</td> + <td>9.0<sup>[4]</sup></td> + <td>2.0<sup>[5]</sup></td> + </tr> + <tr> + <td><code>moz-opaque</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("6.0")}}<sup>[2]</sup><br> + {{CompatGeckoDesktop("12.0")}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td><code>moz-opaque</code></td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Before Gecko 5.0 {{geckoRelease("5.0")}}, the canvas width and height were signed integers instead of unsigned integers.</p> + +<p>[2] Prior to Gecko 6.0 {{geckoRelease("6.0")}}, a {{HTMLElement("canvas")}} element with a zero width or height would be rendered as if it had default dimensions.</p> + +<p>[3] Before Gecko 12.0 {{geckoRelease("12.0")}}, if JavaScript is disabled, the <code><canvas></code> element was being rendered instead of showing the fallback content as per the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">specification</a>. Now the fallback content is rendered instead.</p> + +<p>[4] See the <a href="http://www.opera.com/docs/changelogs/windows/900/">changelog for Opera 9.0</a>.</p> + +<p>[5] Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Those versions of Safari (prior to version 2.0) will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it. Fortunately, users of these versions of Safari are rare nowadays.</p> + +<h2 id="延伸閱讀">延伸閱讀</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API">MDN canvas portal</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li> + <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Canvas cheat sheet</a></li> + <li><a href="/en-US/demos/tag/tech:canvas">Canvas-related demos</a></li> + <li><a href="https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">Canvas introduction by Apple</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-tw/web/html/element/code/index.html b/files/zh-tw/web/html/element/code/index.html new file mode 100644 index 0000000000..d32ed8c474 --- /dev/null +++ b/files/zh-tw/web/html/element/code/index.html @@ -0,0 +1,138 @@ +--- +title: <code> +slug: Web/HTML/Element/code +translation_of: Web/HTML/Element/code +--- +<p id="Summary"><em>HTML Code 元素</em>（<strong><code></strong>）表現出電腦程式碼的片段。通常，它會由瀏覽器預設的 monospace 字體顯示出來。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories" title="HTML/Content_categories">內容分類</a></th> + <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流內容</a>、<a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">段落式内容</a>、捫及內容</td> + </tr> + <tr> + <th scope="row">允許內容</th> + <td><a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">段落式内容</a>.</td> + </tr> + <tr> + <th scope="row">標籤省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允許父元素</th> + <td>任何允許<a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">段落式内容</a>的元素。</td> + </tr> + <tr> + <th scope="row">DOM 介面</th> + <td>{{domxref("HTMLElement")}}。Gecko 1.9.2 (Firefox 4) 以前，Firefox 針對這個元素使用 {{domxref("HTMLSpanElement")}} 介面實做。</td> + </tr> + </tbody> +</table> + +<h2 id="屬性">屬性</h2> + +<p>這個元素只支援<a href="/zh-TW/docs/HTML/Global_attributes" rel="internal">全域屬性</a>。</p> + +<h2 id="例子">例子</h2> + +<pre class="brush: html"><p> Regular text. <code> This is code. </code> Regular text. </p> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>Regular text. <code>This is code.</code> Regular text.</p> + +<h2 id="註記">註記</h2> + +<p>CSS 的 <code>code</code> 選擇器設定可以透過蓋過瀏覽器預設，而用戶個人設定可以蓋過 CSS 設定。</p> + +<h2 id="Specifications" name="Specifications">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">規範</th> + <th scope="col">狀態</th> + <th scope="col">註解</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<code>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特徵</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本支援</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特徵</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支援</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("samp")}}</li> + <li>{{HTMLElement("kbd")}}</li> + <li>{{HTMLElement("command")}} (deprecated)</li> + <li>{{HTMLElement("var")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-tw/web/html/element/div/index.html b/files/zh-tw/web/html/element/div/index.html new file mode 100644 index 0000000000..87763ae146 --- /dev/null +++ b/files/zh-tw/web/html/element/div/index.html @@ -0,0 +1,95 @@ +--- +title: <div> +slug: Web/HTML/Element/div +translation_of: Web/HTML/Element/div +--- +<p>{{HTMLRef}}</p> + +<p><strong>HTML <code><div></code> 元素</strong>（或是<em> HTML 文件區塊元素</em>）是本質上不特別代表任何東西的通用内容流容器。它可以成為樣式化用途（使用 <strong>class</strong> 或 <strong>id</strong> 屬性）、或是共享如 <strong>lang</strong> 同一個屬性的元素集合。它應該在沒有其他適合的語義元素（例如{{HTMLElement("article")}} 或 {{HTMLElement("nav")}} ）可用時才用。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-TW/docs/Web/HTML/Content_categories" title="HTML/Content_categories">內容類型</a></th> + <td><a href="/zh-TW/docs/Web/HTML/Content_categories#Flow_content">流內容</a>、捫及內容。</td> + </tr> + <tr> + <th scope="row">允許內容</th> + <td><a href="/zh-TW/docs/Web/HTML/Content_categories#Flow_content">流內容</a></td> + </tr> + <tr> + <th scope="row">Tag 省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允許父元素</th> + <td>任何允許<a href="/zh-TW/docs/Web/HTML/Content_categories#Flow_content">內容流</a>的元素。</td> + </tr> + <tr> + <th scope="row">DOM 介面</th> + <td>{{domxref("HTMLDivElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">屬性</h2> + +<p>這個元素包含<a href="/zh-TW/docs/Web/HTML/Global_attributes">全域屬性</a>。</p> + +<p><strong>align</strong> 元素已過時，不要使用它。</p> + +<h2 id="Examples" name="Examples">範例</h2> + +<pre class="brush: html"><div> + <p>這裡可以是任何內容，例如 &lt;p&gt;、&lt;table&gt;。你說了算！</p> +</div> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>這裡可以是任何內容，例如 <p>、<table>。你說了算！</p> + +<h2 id="Specifications" name="Specifications">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">規範</th> + <th scope="col">狀態</th> + <th scope="col">註解</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新的快照以後並無改變</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>廢棄 <strong>align</strong></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2> + +<div class="hidden">此表格是從資料庫中自動生成的，如果您想對這份表格做出貢獻，請詳閱<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + + +<div>{{Compat("html.elements.div")}}</div> + + + +<h2 id="See_also" name="See_also">詳閱</h2> + +<ul> + <li>語義化的切片元素：{{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li> + <li>針對段落式內容樣式化的 {{HTMLElement("span")}} 元素</li> +</ul> diff --git a/files/zh-tw/web/html/element/font/index.html b/files/zh-tw/web/html/element/font/index.html new file mode 100644 index 0000000000..d8a988588c --- /dev/null +++ b/files/zh-tw/web/html/element/font/index.html @@ -0,0 +1,45 @@ +--- +title: <font> +slug: Web/HTML/Element/font +translation_of: Web/HTML/Element/font +--- +<div>{{obsolete_header}}</div> + +<h2 id="概要">概要</h2> + +<p><em>HTML Font 元素</em>（<code><font></code>）定義了該內容的字體大小、顏色與表現。</p> + +<div class="note"> +<p><em>注意：</em></p> + +<p><strong>不要使用這個元素！</strong>儘管它在 HTML 3.2 規範化，但在 HTML 4.01，因為該元件只有裝飾用途的理由而遭棄用，接著在 HTML5 廢棄。</p> + +<p>從 HTML 4 開始，HTML 不能在 {{HTMLElement("style")}} 元素，或各元素 <strong>style</strong> 屬性以外，表現任何樣式資訊。今後的網頁開發，樣式化要用 <a href="/zh-TW/docs/CSS" title="CSS">CSS</a>。</p> + +<p>{{HTMLElement("font")}} 元素的行為，能透過 <a href="/zh-TW/docs/CSS" title="CSS">CSS</a> 屬性實現，也更好控制。</p> +</div> + +<h2 id="屬性">屬性</h2> + +<p>如同其他 HTML 元素，這個元素支援<a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全域屬性</a>。</p> + +<dl> + <dt>{{htmlattrdef("color")}}</dt> + <dd>這個屬性可以藉由顏色名字或是十六進位的 #RRGGBB 格式，來配置文字的顏色。</dd> + <dt>{{htmlattrdef("face")}}</dt> + <dd>這個屬性列出了一個或多個逗號分隔的字體名稱。 The document text in the default style is rendered in the first font face that the client's browser supports. 如果在用戶端的系統並沒有安裝這個字體，瀏覽器會在該系統使用預設的 proportional 或是 fixed-width 字體。</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>這個屬性藉由數字或相對值指定文字大小。數字是由最小的 <code>1</code> 到最大的 <code>7</code> 之間，且預設為 <code>3</code> 的數值表示。也可以用諸如 <code>+2</code> 或 <code>-3</code> 的相對值指定, which set it relative to the value of the {{htmlattrxref("size", "basefont")}} attribute of the {{HTMLElement("basefont")}} element, or relative to <span style="font-family: courier new;">3</span>, the default value, if none does exist.</dd> +</dl> + +<h2 id="DOM_介面">DOM 介面</h2> + +<p>這個元素 implements {{domxref("HTMLFontElement")}} 介面。</p> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + + + +<p>{{Compat("html.elements.font")}}</p> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-tw/web/html/element/form/index.html b/files/zh-tw/web/html/element/form/index.html new file mode 100644 index 0000000000..07a2e91254 --- /dev/null +++ b/files/zh-tw/web/html/element/form/index.html @@ -0,0 +1,191 @@ +--- +title: <form> +slug: Web/HTML/Element/form +translation_of: Web/HTML/Element/form +--- +<div>{{HTMLRef}}</div> + +<p>HTML <strong><code><form></code></strong> 元素表示提交訊息的區塊，此區塊含有許多可互動的控制項。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<p>It is possible to use the {{cssxref(':valid')}} and {{cssxref(':invalid')}} CSS <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> to style a <code><form></code> element based on whether or not the {{domxref("HTMLFormElement.elements", "elements")}} inside the form are valid.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">palpable content</a></td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Flow content</a>, but not containing <code><form></code> elements</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">flow content</a></td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">form</a></code> if the form has an <a href="https://www.w3.org/TR/accname-1.1/#dfn-accessible-name">accessible name</a>, otherwise <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">no corresponding role</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">search</a></code>, {{ARIARole("none")}} or {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLFormElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("accept")}} {{obsolete_inline}}</dt> + <dd>Comma-separated <a href="/en-US/docs/Web/SVG/Content_type">content types</a> the server accepts. + <div class="note"><strong>This attribute was removed in HTML5 and should not be used.</strong> Instead, use the {{htmlattrxref("accept", "input")}} attribute on <code><input type=file></code> elements.</div> + </dd> + <dt>{{htmlattrdef("accept-charset")}}</dt> + <dd>Space-separated <a href="/en-US/docs/Web/Guide/Localizations_and_character_encodings">character encodings</a> the server accepts. The browser uses them in the order in which they are listed. The default value means <a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">the same encoding as the page</a>.<br> + (In previous versions of HTML, character encodings could also be delimited by commas.)</dd> + <dt>{{htmlattrdef("action")}}</dt> + <dd>The URL that processes the form submission. This value can be overridden by a {{htmlattrxref("formaction", "button")}} attribute on a {{HTMLElement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, or <code><a href="/en-US/docs/Web/HTML/Element/input/image"><input type="image"></a></code> element.</dd> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>A nonstandard attribute used by iOS Safari that controls how textual form elements should be automatically capitalized. <code>autocapitalize</code> attributes on a form elements override it on <code><form></code>. Possible values: + <ul> + <li><code>none</code>: No automatic capitalization.</li> + <li><code>sentences</code> (default): Capitalize the first letter of each sentence.</li> + <li><code>words</code>: Capitalize the first letter of each word.</li> + <li><code>characters</code>: Capitalize all characters — that is, uppercase.</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}}</dt> + <dd>Indicates whether input elements can by default have their values automatically completed by the browser. <code>autocomplete</code> attributes on form elements override it on <code><form></code>. Possible values: + <ul> + <li><code>off</code>: The browser may not automatically complete entries. (Browsers tend to ignore this for suspected login forms; see <a href="/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">The autocomplete attribute and login fields</a>.)</li> + <li><code>on</code>: The browser may automatically complete entries.<span style="display: none;"> </span></li> + </ul> + </dd> + <dt>{{htmlattrdef("enctype")}}</dt> + <dd>If the value of the <code>method</code> attribute is <code>post</code>, <code>enctype</code> is the <a href="https://en.wikipedia.org/wiki/Mime_type">MIME type</a> of the form submission. Possible values: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value.</li> + <li><code>multipart/form-data</code>: Use this if the form contains {{HTMLElement("input")}} elements with <code>type=file</code>.</li> + <li><code>text/plain</code>: Introduced by HTML5 for debugging purposes.</li> + </ul> + + <p>This value can be overridden by {{htmlattrxref("formenctype", "button")}} attributes on {{HTMLElement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, or <code><a href="/en-US/docs/Web/HTML/Element/input/image"><input type="image"></a></code> elements.</p> + </dd> + <dt>{{htmlattrdef("method")}}</dt> + <dd>The <a href="/en-US/docs/Web/HTTP">HTTP</a> method to submit the form with. Possible values: + <ul> + <li><code>post</code>: The <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST method</a>; form data sent as the <a href="/en-US/docs/Web/API/Body">request body</a>.</li> + <li><code>get</code>: The <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET method</a>; form data appended to the <code>action</code> URL with a <code>?</code> separator. Use this method when the form <a href="/en-US/docs/Glossary/Idempotent">has no side-effects</a>.</li> + <li><code>dialog</code>: When the form is inside a {{HTMLElement("dialog")}}, closes the dialog on submission.</li> + </ul> + + <p>This value is overridden by {{htmlattrxref("formmethod", "button")}} attributes on {{HTMLElement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, or <code><a href="/en-US/docs/Web/HTML/Element/input/image"><input type="image"> </a></code>elements.</p> + </dd> + <dt>{{htmlattrdef("name")}} {{deprecated_inline}}</dt> + <dd>The name of the form. Deprecated as of HTML 4 (use <code>id</code> instead). It must be unique among the forms in a document and not an empty string as of HTML5.</dd> + <dt>{{htmlattrdef("novalidate")}}</dt> + <dd>This Boolean attribute indicates that the form shouldn't be validated when submitted. If this attribute is not set (and therefore the form <em><strong>is</strong></em> validated), it can be overridden by a {{htmlattrxref("formnovalidate", "button")}} attribute on a {{HTMLElement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, or <code><a href="/en-US/docs/Web/HTML/Element/input/image"><input type="image"></a></code> element belonging to the form.</dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>Creates a hyperlink or annotation depending on the value, see the <a href="/docs/Web/HTML/Attributes/rel">{{htmlattrdef("rel")}}</a> attribute for details.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Indicates where to display the response after submitting the form. In HTML 4, this is the name/keyword for a frame. In HTML5, it is a name/keyword for a <em>browsing context</em> (for example, tab, window, or iframe). The following keywords have special meanings: + <ul> + <li><code>_self</code> (default): Load into the same browsing context as the current one.</li> + <li><code>_blank</code>: Load into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load into the parent browsing context of the current one. If no parent, behaves the same as <code>_self</code>.</li> + <li><code>_top</code>: Load into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one and has no parent). If no parent, behaves the same as <code>_self</code>.</li> + </ul> + + <p>This value can be overridden by a {{htmlattrxref("formtarget", "button")}} attribute on a {{HTMLElement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, or <code><a href="/en-US/docs/Web/HTML/Element/input/image"><input type="image"></a></code> element.</p> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><!-- Form which will send a GET request to the current URL --> +<form> + <label>Name: + <input name="submitted-name" autocomplete="name"> + </label> + <button>Save</button> +</form> + +<!-- Form which will send a POST request to the current URL --> +<form method="post"> + <label>Name: + <input name="submitted-name" autocomplete="name"> + </label> + <button>Save</button> +</form> + +<!-- Form with fieldset, legend, and label --> +<form method="post"> + <fieldset> + <legend>Title</legend> + <label><input type="radio" name="radio"> Select me</label> + </fieldset> +</form></pre> + +<p>{{ EmbedLiveSample('Examples', '100%', 110) }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-form-element', '<form>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-form-element', '<form>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.form")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a></li> + <li>Other elements that are used when creating forms: {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}},{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}.</li> + <li>Getting a list of the elements in the form: {{domxref("HTMLFormElement.elements")}}</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA: Form role</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">ARIA: Search role</a></li> +</ul> diff --git a/files/zh-tw/web/html/element/frameset/index.html b/files/zh-tw/web/html/element/frameset/index.html new file mode 100644 index 0000000000..e1668b035b --- /dev/null +++ b/files/zh-tw/web/html/element/frameset/index.html @@ -0,0 +1,39 @@ +--- +title: <frameset> +slug: Web/HTML/Element/frameset +translation_of: Web/HTML/Element/frameset +--- +<div>{{Deprecated_header}}</div> + +<h2 id="概要">概要</h2> + +<p><code><frameset></code> 是用以包含 {{HTMLElement("frame")}} 元素的元素。</p> + +<div class="note"><strong>注意：</strong>因為使用框架的推薦是 {{HTMLElement("iframe")}}，這個元素一般不會在現在的網站出現。</div> + +<h2 id="屬性">屬性</h2> + +<p>如同其他 HTML 元素，這個元素支持<a href="/zh-TW/HTML/Global_attributes" title="HTML/Global attributes">全域屬性</a>。</p> + +<dl> + <dt>{{htmlattrdef("cols")}}</dt> + <dd>這個屬性指定了橫向框架的數量和尺寸。</dd> + <dt>{{htmlattrdef("rows")}}</dt> + <dd>這個屬性指定了直向框架的數量和尺寸。</dd> +</dl> + +<h2 id="範例">範例</h2> + +<pre class="brush:html"><frameset cols="50%,50%"> + <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" /> + <frame src="https://developer.mozilla.org/en/HTML/Element/frame" /> +</frameset></pre> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTMLElement("frame")}}</li> + <li>{{HTMLElement("iframe")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-tw/web/html/element/hr/index.html b/files/zh-tw/web/html/element/hr/index.html new file mode 100644 index 0000000000..219645e454 --- /dev/null +++ b/files/zh-tw/web/html/element/hr/index.html @@ -0,0 +1,168 @@ +--- +title: <hr> +slug: Web/HTML/Element/hr +tags: + - HTML + - 元素 + - 參考 +translation_of: Web/HTML/Element/hr +--- +<p>{{HTMLRef}}</p> + +<p><strong>HTML </strong>的<strong> <code><hr></code> 元素</strong>代表在段落層級的焦點轉換（如故事中的場景轉換或某個小節裡的主題移轉）。在之前的 HTML 版本，它代表著一條水平標線。在視覺瀏覽器裡，它現在可能還是以水平標線的型式呈現；但它已經被重新定義為一個語義上的用詞，而不是呈現上的。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories">內容類型</a></th> + <td><a href="/zh-TW/docs/HTML/Content_categories#流內容（Flow_content）" title="HTML/Content categories#Flow content">流內容</a>.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>否。這是個 {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">標籤省略</th> + <td>一定要有起始標籤、同時絕不能有結束標籤</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>任何允許<a href="/zh-TW/docs/HTML/Content_categories#流內容（Flow_content）" title="HTML/Content categories#Flow content">流內容</a>的元素。</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLHRElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="屬性">屬性</h2> + +<p>這個元素支持<a href="https://developer.mozilla.org/zh-TW/docs/HTML/Global_attributes">全域屬性</a>。</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> + <dd>設罝頁面上標線的對齊方式。如果沒有指定，預設值是：<code>left。</code></dd> + <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt> + <dd>用色彩名或16進位值設罝標線的顏色。</dd> + <dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt> + <dd>設置這個標線沒有陰影。</dd> + <dt>{{htmlattrdef("size")}} {{deprecated_inline}}</dt> + <dd>設置標線的高度，單位是 px。.</dd> + <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt> + <dd>設置標線的長度，單位是 px；或者也可以用頁面寛度的百分比 (%)表示。</dd> +</dl> + +<h2 id="範例">範例</h2> + +<pre class="brush: html"><p>This is the first paragraph of text. +This is the first paragraph of text. +This is the first paragraph of text. +This is the first paragraph of text. + +<hr> + +<p>This is second paragraph of text. +This is second paragraph of text. +This is second paragraph of text. +This is second paragraph of text. +</pre> + +<p>上面的 HTML會輸出：</p> + +<p>This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text.</p> + +<hr> +<p>This is second paragraph of text. This is second paragraph of text. This is second paragraph of text. This is second paragraph of text.</p> + +<h2 id="Specifications" name="Specifications">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-hr-element', '<hr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definition of the <code>hr</code> element</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'rendering.html#the-hr-element-0')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Suggested default rendering of the <code>hr</code> element</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '<hr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '<hr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>The <code>align</code>, <code>noshade</code>, <code>size</code> and <code>width</code> attributes are deprecated</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="參照_（see_also)">參照 （see also)</h2> + +<ul> + <li>{{HTMLElement('p')}}</li> +</ul> diff --git a/files/zh-tw/web/html/element/index.html b/files/zh-tw/web/html/element/index.html new file mode 100644 index 0000000000..08312e3f17 --- /dev/null +++ b/files/zh-tw/web/html/element/index.html @@ -0,0 +1,106 @@ +--- +title: HTML 元素 +slug: Web/HTML/Element +tags: + - Basic + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element +--- +<div>{{HTMLSidebar("Elements")}}</div> + +<p><span class="seoSummary">本頁列出了所有 {{Glossary("HTML")}} 元素（{{Glossary("Element")}}），他們可以透過標籤（{{Glossary("Tags", "tags")}}）建立。</span>這些元素會以功能來分組，讓你更容易尋找。在本頁及每一個元素的頁面的側邊欄都提供了以英文字母排序的所有元素清單。</p> + +<div class="note"> +<p>更多關於基本 HTML 元素及屬性（attribute）可參考<a href="/zh-TW/docs/Web/Guide/HTML/Introduction#Elements_%E2%80%94_the_basic_building_blocks">HTML 介紹一文中的元素小節</a>。</p> +</div> + +<h2 id="主要根元素">主要根元素</h2> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="文件詮釋資料（metadata）">文件詮釋資料（metadata）</h2> + +<p>Metadata 是一些外部資料，不會被使用者看到。Metadata 記錄了頁面的訊息給其他軟體利用，像是瀏覽器會讀取 metadata 去決定這個頁面應該要使用哪種編碼顯示以避免亂碼。另外，有時候一個網頁的原始碼會被分散的檔案中，所以一個網頁的 Metameta 可以被定義在別份檔案中。</p> + +<p>{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 id="Sectioning_root">Sectioning root</h2> + +<p>{{HTMLRefTable("Sectioning Root Element")}}</p> + +<h2 id="Content_sectioning">Content sectioning</h2> + +<p>Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content. </p> + +<p>{{HTMLRefTable("HTML Sections")}}</p> + +<h2 id="文字內容">文字內容</h2> + +<p>使用 HTML 文字內容元素，來組織放在 {{HTMLElement("body")}} 與 <code></body></code> 之間的區塊或章節內容。這對 {{Glossary("Accessibility")}} 與 {{Glossary("SEO")}} 至關重要。這些元素確立了內容的目的或結構。</p> + +<p>{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 id="行內文字語義化">行內文字語義化</h2> + +<p>Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.</p> + +<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 id="圖片與多媒體">圖片與多媒體</h2> + +<p>HTML supports various multimedia resources such as images, audio, and video.</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="嵌入內容">嵌入內容</h2> + +<p>In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with.</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="腳本">腳本</h2> + +<p>In order to create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability.</p> + +<p>{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 id="Demarcating_edits">Demarcating edits</h2> + +<p>These elements let you provide indications that specific parts of the text have been altered.</p> + +<p>{{HTMLRefTable("HTML Edits")}}</p> + +<h2 id="表格">表格</h2> + +<p>The elements here are used to create and handle tabular data.</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="表單">表單</h2> + +<p>HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There's a great deal of further information about this available in the <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</p> + +<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> + +<h2 id="互動元素">互動元素</h2> + +<p>HTML offers a selection of elements which help to create interactive user interface objects.</p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="Web_Components">Web Components</h2> + +<p>Web Components is an HTML-related technology which makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements.</p> + +<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> + +<h2 id="過時與棄用的元素">過時與棄用的元素</h2> + +<div class="warning"> +<p><strong>Warning:</strong> These are old HTML elements which are deprecated and should not be used. <strong>You should never use them in new projects, and should replace them in old projects as soon as you can.</strong> They are listed here for informational purposes only.</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/zh-tw/web/html/element/input/index.html b/files/zh-tw/web/html/element/input/index.html new file mode 100644 index 0000000000..6a3a936339 --- /dev/null +++ b/files/zh-tw/web/html/element/input/index.html @@ -0,0 +1,750 @@ +--- +title: <input> +slug: Web/HTML/Element/input +tags: + - Element + - Forms + - HTML + - HTML forms + - HTML input tag + - MakeBrowserAgnostic + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/HTML/Element/input +--- +<div>{{draft}}{{HTMLRef}}</div> + +<p>The <strong>HTML <code><input></code> element</strong> is used to create interactive controls for web-based forms in order to accept data from the user.</p> + +<h2 id="Live_example">Live example</h2> + +<p>To get an idea of how different the various <code><input></code> types look, try editing the value of the <code>type</code> attributes in the following editable live example; you'll see the output update as you type. In each case, the initial value (<code>text</code>) produces a basic text input, but you can try other values such as <code>number</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>date</code>, <code>file</code>, <code>month</code>, <code>password</code>, <code>range</code>, or <code>time</code>.</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/editable-input-example/editable_input.html", '100%', 230)}}</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, listed, submittable, resettable, form-associated element, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>. If the {{htmlattrxref("type", "input")}} is not <code>hidden</code>, then labellable element, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>Must have a start tag and must not have an end tag.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td> + <ul> + <li><code>type=button</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li> + <li><code>type=checkbox</code>: {{ARIARole("button")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li> + <li><code>type=image</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li> + <li><code>type=radio</code>: {{ARIARole("menuitemradio")}}</li> + <li><code>type=color|date|datetime|datetime-local|email|file</code>: None</li> + <li><code>type=hidden|month|number|password|range|research</code>: None</li> + <li><code>type=search|submit|tel|text|url|week</code>: None</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLInputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Form_<input>_types">Form <code><input></code> types</h2> + +<p>How an <code><input></code> works varies considerably depending on the value of its <code>type</code> attribute, hence the different types are covered in their own separate reference pages. If this attributes is not specified, the default type adopted type is <code>text</code>.</p> + +<p>The available types are as follows:</p> + +<ul> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/button">button</a></code>: A push button with no default behavior.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/checkbox">checkbox</a></code>: A check box allowing single values to be selected/deselected.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/color">color</a></code>: {{HTMLVersionInline("5")}} A control for specifying a color. A color picker's UI has no required features other than accepting simple colors as text (<a href="https://www.w3.org/TR/html5/forms.html#color-state-(type=color)">more info</a>).</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/date">date</a></code>: {{HTMLVersionInline("5")}} A control for entering a date (year, month, and day, with no time).</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code>: {{HTMLVersionInline("5")}} A control for entering a date and time, with no time zone.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/email">email</a></code>: {{HTMLVersionInline("5")}} A field for editing an e-mail address.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/file">file</a></code>: A control that lets the user select a file. Use the <strong>accept</strong> attribute to define the types of files that the control can select.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/hidden">hidden</a></code>: A control that is not displayed but whose value is submitted to the server.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/image">image</a></code>: A graphical submit button. You must use the <strong>src</strong> attribute to define the source of the image and the <strong>alt</strong> attribute to define alternative text. You can use the <strong>height</strong> and <strong>width</strong> attributes to define the size of the image in pixels.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/month">month</a></code>: {{HTMLVersionInline("5")}} A control for entering a month and year, with no time zone.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/number">number</a></code>: {{HTMLVersionInline("5")}} A control for entering a number.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/password">password</a></code>: A single-line text field whose value is obscured. Use the <strong>maxlength</strong> attribute to specify the maximum length of the value that can be entered. + <div class="note"><strong>Note</strong>: Any forms involving sensitive information like passwords (e.g. login forms) should be served over HTTPS; Firefox now implements multiple mechanisms to warn against insecure login forms — see <a href="/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>. Other browsers are also implementing similar mechanisms.</div> + </li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/radio">radio</a></code>: A radio button, allowing a single value to be selected out of multiple choices.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/range">range</a></code>: {{HTMLVersionInline("5")}} A control for entering a number whose exact value is not important.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/reset">reset</a></code>: A button that resets the contents of the form to default values.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/search">search</a></code>: {{HTMLVersionInline("5")}} A single-line text field for entering search strings. Line-breaks are automatically removed from the input value.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/submit">submit</a></code>: A button that submits the form.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/tel">tel</a></code>: {{HTMLVersionInline("5")}} A control for entering a telephone number. Line-breaks are automatically removed from the input value, but no other syntax is enforced. You can use attributes such as <strong>pattern</strong> and <strong>maxlength</strong> to restrict values entered in the control. The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied as appropriate.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/text">text</a></code>: A single-line text field. Line-breaks are automatically removed from the input value.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/time">time</a></code>: {{HTMLVersionInline("5")}} A control for entering a time value with no time zone.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/url">url</a></code>: {{HTMLVersionInline("5")}} A field for editing a URL. The input value is validated to contain either the empty string or a valid absolute URL before submitting. You can use attributes such as <strong>pattern</strong> and <strong>maxlength</strong> to restrict values entered in the control. The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied as appropriate.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/week">week</a></code>: {{HTMLVersionInline("5")}} A control for entering a date consisting of a week-year number and a week number with no time zone.</li> +</ul> + +<p>Some input types are now obsolete:</p> + +<ul> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/datetime">datetime</a></code>: {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone. <strong>This feature has been <a href="https://github.com/whatwg/html/issues/336">removed from WHATWG HTML.</a></strong></li> +</ul> + +<h2 id="Attributes">Attributes</h2> + +<h3 id="Global_<input>_attributes">Global <code><input></code> attributes</h3> + +<p>This section lists the attributes available to all form <code><input></code> types. Non-global attributes — and global attributes that behave differently when specified on different <code><input></code> types — are listed on those types' individual pages.</p> + +<div class="note"> +<p><strong>Note</strong>: This includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global HTML attributes</a>.</p> +</div> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>The type of control to render. See {{anch("Form <input> types")}} for the individual types, with links to more information about each.</dd> + <dt>{{htmlattrdef("accept")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>file</code>, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers: + <ul> + <li>A file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc).</li> + <li>A valid MIME type with no extensions.</li> + <li><code>audio/*</code> representing sound files. {{HTMLVersionInline("5")}}</li> + <li><code>video/*</code> representing video files. {{HTMLVersionInline("5")}}</li> + <li><code>image/*</code> representing image files. {{HTMLVersionInline("5")}}</li> + </ul> + </dd> + <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>A single-character that the user can press to switch input focus to the control. This attribute is global in HTML5.</dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute indicates whether the value of the control can be automatically completed by the browser.</dd> + <dd>Possible values are: + <ul> + <li><code>off</code>: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method. The browser does not automatically complete the entry.</li> + <li><code>on</code>: The browser is allowed to automatically complete the value based on values that the user has entered during previous uses, however <code>on</code> does not provide any further information about what kind of data the user might be expected to enter.</li> + <li><code>name</code>: Full name.</li> + <li><code>honorific-prefix: </code>Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "Mlle").</li> + <li><code>given-name</code>: First name.</li> + <li><code>additional-name</code>: Middle name.</li> + <li><code>family-name</code>: Last name.</li> + <li><code>honorific-suffix</code>: Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II").</li> + <li><code>nickname</code></li> + <li><code>email</code></li> + <li><code>username</code></li> + <li><code>new-password</code>: A new password (e.g. when creating an account or changing a password).</li> + <li><code>current-password</code></li> + <li><code>organization-title</code>: Job title (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director").</li> + <li><code>organization</code></li> + <li><code>street-address</code></li> + <li><code>address-line1</code>, <code>address-line2</code>, <code>address-line3</code>, <code>address-level4</code>, <code>address-level3</code>, <code>address-level2</code>, <code>address-level1</code></li> + <li><code>country</code></li> + <li><code>country-name</code></li> + <li><code>postal-code</code></li> + <li><code>cc-name</code>: Full name as given on the payment instrument.</li> + <li><code>cc-given-name</code></li> + <li><code>cc-additional-name</code></li> + <li><code>cc-family-name</code></li> + <li><code>cc-number</code>: Code identifying the payment instrument (e.g. the credit card number).</li> + <li><code>cc-exp:</code> Expiration date of the payment instrument.</li> + <li><code>cc-exp-month</code></li> + <li><code>cc-exp-year</code></li> + <li><code>cc-csc</code>: Security code for the payment instrument.</li> + <li><code>cc-type</code>: Type of payment instrument (e.g. Visa).</li> + <li><code>transaction-currency</code></li> + <li><code>transaction-amount</code></li> + <li><code>language</code>: Preferred language; a valid <a href="https://en.wikipedia.org/wiki/IETF_language_tag">BCP 47 language tag</a>.</li> + <li><code>bday</code>: birthday</li> + <li><code>bday-day</code></li> + <li><code>bday-month</code></li> + <li><code>bday-year</code></li> + <li><code>sex</code>: Gender identity (e.g. Female, Fa'afafine), free-form text, no newlines.</li> + <li><code>tel</code>: full telephone number, including country code + <ul> + <li>additional <code>tel</code> variants: <code>tel-country-code</code>, <code>tel-national</code>, <code>tel-area-code</code>, <code>tel-local</code>, <code>tel-local-prefix</code>, <code>tel-local-suffix</code>, <code>tel-extension</code></li> + </ul> + </li> + <li><code>url</code>: Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field.</li> + <li><code>photo</code>: Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field.</li> + </ul> + + <p>See the <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">WHATWG Standard</a> for more detailed information.</p> + + <p>If the <strong>autocomplete</strong> attribute is not specified on an input element then the browser uses the <strong>autocomplete</strong> attribute value of the <code><input></code> element's form owner. The form owner is either the <code>form</code> element that this <code><input></code> element is a descendant of or the form element whose <strong>id</strong> is specified by the <strong>form</strong> attribute of the input element. For more information, see the {{htmlattrxref("autocomplete", "form")}} attribute in {{HTMLElement("form")}}.</p> + + <p>The <strong>autocomplete</strong> attribute also controls whether Firefox will, unlike other browsers, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state and (if applicable) dynamic checkedness</a> of an <code><input></code> across page loads. The persistence feature is enabled by default. Setting the value of the <strong>autocomplete</strong> attribute to <code>off</code> disables this feature. This works even when the <strong>autocomplete</strong> attribute would normally not apply to the <code><input></code> by virtue of its <strong>type</strong>. See {{bug(654072)}}.</p> + + <p>For most modern browsers (including Firefox 38+, Google Chrome 34+, IE 11+), setting the <strong>autocomplete</strong> attribute will <em>not</em> prevent a browser's password manager from asking the user if they want to store login (username and password) fields and, if they agree, from autofilling the login the next time the user visits the page. See <a href="/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">the autocomplete attribute and login fields</a>.</p> + </dd> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt> + <dd>This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it (e.g. by typing in a different control). Only one form element in a document can have the <strong>autofocus</strong> attribute, which is a Boolean. It cannot be applied if the <strong>type</strong> attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control). Note that the focusing of the control may occur before the firing of the <a href="/en-US/docs/Web/Events/DOMContentLoaded"><code>DOMContentLoaded</code> event.</a></dd> + <dt>{{htmlattrdef("capture")}}</dt> + <dd> + <p>When the value of the <strong>type</strong> attribute is <code>file</code>, the presence of this Boolean attribute indicates that capture of media directly from the device's environment using a <a href="https://www.w3.org/TR/html-media-capture/#dfn-media-capture-mechanism">media capture mechanism</a> is preferred.</p> + </dd> + <dt>{{htmlattrdef("checked")}}</dt> + <dd> + <p>When the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>, the presence of this Boolean attribute indicates that the control is selected by default, otherwise it is ignored.</p> + + <p>Unlike other browsers, Firefox will by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic checked state</a> of an <code><input></code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p> + </dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>This Boolean attribute indicates that the form control is not available for interaction. In particular, the <code>click</code> event <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">will not be dispatched</a> on disabled controls. Also, a disabled control's value isn't submitted with the form.</p> + + <p>Unlike other browsers, Firefox will by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of an <code><input></code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p> + </dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt> + <dd>The form element that the input element is associated with (its <em>form owner</em>). The value of the attribute must be an <strong>id</strong> of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this <code><input></code> element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <code><input></code> elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.</dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt> + <dd>The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> + <li><code>multipart/form-data</code>: Use this value if you are using an <code><input></code> element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: + <ul> + <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> + <li><code>get</code>: The data from the form are appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> + </ul> + + <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (e.g. tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings: + <ul> + <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the response into the top-level browsing context (i.e. the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the height of the image displayed for the button.</dd> + <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt> + <dd>A hint to the browser for which keyboard to display. This attribute applies when the value of the <strong>type</strong> attribute is text, password, email, or url. Possible values are: + <ul> + <li><code>verbatim</code>: Alphanumeric, non-prose content such as usernames and passwords.</li> + <li><code>latin</code>: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.</li> + <li><code>latin-name</code>: As <em>latin</em>, but for human names.</li> + <li><code>latin-prose</code>: As <em>latin</em>, but with more aggressive typing aids. For human-to-human communication such as instant messaging or email.</li> + <li><code>full-width-latin</code>: As <em>latin-prose</em>, but for the user's secondary languages.</li> + <li><code>kana</code>: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + <li><code>katakana</code>: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + <li><code>numeric</code>: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes (e.g. credit card numbers). For actual numbers, prefer using <input type="number"></li> + <li><code>tel</code>: Telephone input, including asterisk and pound key. Use <input type="tel"> if possible instead.</li> + <li><code>email</code>: Email input. Use <input type="email"> if possible instead.</li> + <li><code>url</code>: URL input. Use <input type="url"> if possible instead.</li> + </ul> + </dd> + <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt> + <dd>Identifies a list of pre-defined options to suggest to the user. The value must be the <strong>id</strong> of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the <strong>type</strong> attribute's value is <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</dd> + <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt> + <dd>The maximum (numeric or date-time) value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</dd> + <dt>{{htmlattrdef("maxlength")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored. It can exceed the value of the <strong>size</strong> attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior (i.e. the user can enter an unlimited number of characters). The constraint is evaluated only when the value of the attribute has been changed.</dd> + <dt>{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}</dt> + <dd>The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (<strong>max</strong> attribute) value.</dd> + <dt>{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. For other control types, it is ignored.</dd> + <dt>{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}</dt> + <dd>This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the <strong>type</strong> attribute is set to <code>email</code> or <code>file</code>, otherwise it is ignored.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>The name of the control, which is submitted with the form data.</dd> + <dt>{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}</dt> + <dd>A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the <strong>title</strong> attribute to describe the pattern to help the user. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>, otherwise it is ignored. The regular expression language is the same as JavaScript {{jsxref("RegExp")}} algorithm, with the <code>'u'</code> parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes.</dd> + <dt>{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}</dt> + <dd>A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. + <div class="note"><strong>Note:</strong> Do not use the <code>placeholder</code> attribute instead of a {{HTMLElement("label")}} element, their purposes are different. The {{HTMLElement("label")}} attribute describes the role of the form element (i.e. it indicates what kind of information is expected), and the <code>placeholder</code> attribute is a hint about the format that the content should take. There are cases in which the <code>placeholder</code> attribute is never displayed to the user, so the form must be understandable without it.</div> + </dd> + <dt>{{htmlattrdef("readonly")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute indicates that the user cannot modify the value of the control. The value of the attribute is irrelevant. If you need read-write access to the input value, <em>do not</em> add the "<strong>readonly</strong>" attribute. It is ignored if the value of the <strong>type</strong> attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type (such as <code>button</code> or <code>submit</code>).</dd> + <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the <strong>type</strong> attribute is <code>hidden</code>, <code>image</code>, or a button type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd> + <dt>{{htmlattrdef("selectionDirection")}} {{HTMLVersionInline("5")}}</dt> + <dd>The direction in which selection occurred. This is <code>"forward"</code> if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or <code>"backward"</code> if the selection was made in the opposite direction. On platforms on which it's possible this value isn't known, the value can be <code>"none"</code>; for example, on macOS, the default direction is <code>"none"</code>, then as the user begins to modify the selection using the keyboard, this will change to reflect the direction in which the selection is expanding.</dd> + <dt>{{htmlattrdef("selectionEnd")}}</dt> + <dd>The offset into the element's text content of the last selected character. If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position the next character typed would occupy).</dd> + <dt>{{htmlattrdef("selectionStart")}}</dt> + <dd>The offset into the element's text content of the first selected character. If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position the next character typed would occupy).</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>The initial size of the control. This value is in pixels unless the value of the <strong>type</strong> attribute is <code>text</code> or <code>password</code>, in which case it is an integer number of characters. Starting in HTML5, this attribute applies only when the <strong>type</strong> attribute is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>, otherwise it is ignored. In addition, the size must be greater than zero. If you do not specify a size, a default value of 20 is used. HTML5 simply states "the user agent should ensure that at least that many characters are visible", but different characters can have different widths in certain fonts. In some browsers, a certain string with <em>x</em> characters will not be entirely visible even if size is defined to at least <em>x</em>.</dd> + <dt>{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}</dt> + <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute specifies a URI for the location of an image to display on the graphical submit button, otherwise it is ignored.</dd> + <dt>{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}</dt> + <dd>Works with the <strong>min</strong> and <strong>max</strong> attributes to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this attribute is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</dd> + <dt>{{htmlattrdef("tabindex")}} element-specific in {{HTMLVersionInline(4)}}, global in {{HTMLVersionInline("5")}}</dt> + <dd>The position of the element in the tabbing navigation order for the current document.</dd> + <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>The name of a {{HTMLElement("map")}} element to be used as an image map.</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>The initial value of the control. This attribute is optional except when the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>.<br> + Note that when reloading the page, Gecko and IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">will ignore the value specified in the HTML source</a>, if the value was changed before the reload.</dd> + <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the width of the image displayed for the button.</dd> +</dl> + +<h3 id="Non-standard_<input>_attributes">Non-standard <code><input></code> attributes</h3> + +<dl> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>This is a nonstandard attribute used <a href="https://developers.google.com/web/updates/2015/04/autocapitalize">by Chrome</a> and iOS Safari Mobile, which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. The non-deprecated values are available in iOS 5 and later. Possible values are: + <ul> + <li><code>none</code>: Completely disables automatic capitalisation.</li> + <li><code>sentences</code>: Automatically capitalise the first letter of sentences.</li> + <li><code>words</code>: Automatically capitalise the first letter of words.</li> + <li><code>characters</code>: Automatically capitalise all characters.</li> + <li><code>on</code>: {{deprecated_inline}} Deprecated since iOS 5.</li> + <li><code>off</code>: {{deprecated_inline}} Deprecated since iOS 5.</li> + </ul> + <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocapitalize"><code>autocapitalize</code> documentation</a> in the Safari HTML Reference.</dd> + <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt> + <dd>This is a non-standard attribute supported by Safari that is used to control whether autocorrection should be enabled when the user is entering/editing the text value of the <code><input></code>. Possible attribute values are: + <ul> + <li><code>on</code>: Enable autocorrection.</li> + <li><code>off</code>: Disable autocorrection.</li> + </ul> + <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocorrect"><code>autocorrect</code> documentation</a> in the Safari HTML Reference.</dd> + <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt> + <dd>This is a nonstandard attribute supported by WebKit (Safari) and Blink (Chrome) that only applies when the <strong>type</strong> is <code>search</code>. If the attribute is present, regardless of what its value is, the <code><input></code> fires <a href="/en-US/docs/Web/Events/search"><code>search</code></a> events as the user edits the text value. The event is only fired after an implementation-defined timeout has elapsed since the most recent keystroke, and new keystrokes reset the timeout. In other words, the event firing is debounced. If the attribute is absent, the <a href="/en-US/docs/Web/Events/search"><code>search</code></a> event is only fired when the user explicitly initiates a search (e.g. by pressing the Enter key while within field). <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-incremental"><code>incremental</code> documentation in the Safari HTML Reference</a></dd> + <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> + <dd>Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, and <code>send</code>. These automatically get mapped to the appropriate string and are case-insensitive.</dd> + <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt> + <dd>This is a nonstandard attribute supported by Safari that only applies when the <strong>type</strong> is <code>search</code>. It is used to control the maximum number of entries that should be displayed in the <code><input></code>'s native dropdown list of past search queries. Its value should be a nonnegative decimal integer.</dd> + <dt>{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</dt> + <dd>This Boolean attribute indicates if the selector used when the <strong>type</strong> attribute is <code>file</code> has to allow for the selection of directories only.</dd> + <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt> + <dd>This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>You can find multiple examples of <code><input></code> element usage on the pages covering each individual type — see {{anch("Form <input> types")}}, and also see the {{anch("Live example")}} at the top of the article.</p> + +<ul> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','<input capture>')}}</td> + <td>{{Spec2('HTML Media Capture')}}</td> + <td>Adds the <code>capture</code> element</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td><code>type="color"</code></td> + <td>21.0</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatNo}}</td> + <td>11.01</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>type="email"</code>, <code>type="number"</code>, <code>type="range"</code>, <code>type="search"</code>, <code>type="tel"</code>, <code>type="url"</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>type="datetime-local"</code>, <code>type="month"</code>, <code>type="week"</code></td> + <td>20</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + </tr> + <tr> + <td><code>type="date"</code>, <code>type="time"</code></td> + <td>20</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + </tr> + <tr> + <td><code>type="datetime"</code></td> + <td>{{CompatNo}}<sup>[5]</sup></td> + <td>{{CompatNo}}<sup>[5]</sup></td> + <td>{{CompatNo}}[5]</td> + <td>{{CompatNo}}[5]</td> + <td>{{CompatNo}}[5]</td> + </tr> + <tr> + <td><code>accept</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>mozactionhint</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>autocapitalize</code></td> + <td>43</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup> [4]</sup></td> + </tr> + <tr> + <td><code>autofocus</code>, <code>max</code>, <code>min</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>step</code>, <code>list</code>, <code>multiple</code></td> + <td>5.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + <tr> + <td>capture</td> + <td>Chrome for Android (0.16)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">fakepath</a> added to file input values</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("53")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>form</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code></td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>incremental</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>inputmode</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>minlength</code></td> + <td>40.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>readonly</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>6<sup>[3] </sup></td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>10</td> + <td>11.0</td> + <td>4.0</td> + </tr> + <tr> + <td><code>webkitdirectory</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("49.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>type="color"</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>type="email"</code>, <code>type="number"</code>, <code>type="range"</code>, <code>type="search"</code>, <code>type="tel"</code>, <code>type="url"</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>type="date"</code>, <code>type="datetime-local"</code>, <code>type="month"</code>, <code>type="time"</code>, <code>type="week'</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>type="datetime"</code></td> + <td>{{CompatNo}}<sup>[5]</sup></td> + <td>{{CompatNo}}<sup>[5]</sup></td> + <td>{{CompatNo}}<sup>[5]</sup></td> + <td>{{CompatNo}}<sup>[5]</sup></td> + <td>{{CompatNo}}<sup>[5]</sup></td> + </tr> + <tr> + <td><code>accept</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>autocapitalize</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}[4]</td> + </tr> + <tr> + <td><code>autofocus</code>, <code>max</code>, <code>min</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>step</code>, <code>list</code>, <code>multiple</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>capture</code></td> + <td>3.0</td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>6.0</td> + </tr> + <tr> + <td><a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">fakepath</a> added to file input values</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("53")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>form</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>minlength</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>27.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>webkitdirectory</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("49.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This feature is implemented behind the preference <code>dom.forms.datetime</code> since Gecko 51 {{geckoRelease(51)}}, defaulting to <code>false</code>. Since Gecko 55 it is enabled by default on Firefox Nightly (see {{bug(1366188)}}). See also {{bug("888320")}} and <a href="https://wiki.mozilla.org/TPE_DOM/Date_time_input_types">TPE DOM/Date time input types</a>.</p> + +<p>[2] It is recognized but there is no UI.</p> + +<p>[3] Missing for <code>type="checkbox"</code> and <code>type="radio"</code>.</p> + +<p>[4] In Safari <code>autocapitalize="words"</code> capitalizes every word's second character.</p> + +<p>[5] <code>datetime</code> has been removed from the spec and browsers in favour of <code>datetime-local</code>.</p> + +<h2 id="Notes">Notes</h2> + +<h3 id="File_inputs">File inputs</h3> + +<ol> + <li> + <p>Starting in {{Gecko("2.0")}}, calling the <code>click()</code> method on an <code><input></code> element of type <code>file</code> opens the file picker and lets the user select files. See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for an example and more details.</p> + </li> + <li> + <p>You cannot set the value of a file picker from a script — doing something like the following has no effect:</p> + + <pre class="brush: js">var e = getElementById("someFileInputElement"); +e.value = "foo"; +</pre> + </li> + <li> + <p>When a file is chosen using an <code><input type="file"></code>, the real path to the source file is not shown in the input's <code>value</code> attribute for obvious security reasons. Instead, the filename is shown, with <code>C:\fakepath\</code> appended to the beginning of it. There are some historical reasons for this quirk, but it is supported across all modern browsers, and in fact is <a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">defined in the spec</a>.</p> + </li> +</ol> + +<h3 id="Error_messages">Error messages</h3> + +<p>If you want Firefox to present a custom error message when a field fails to validate, you can use the <code>x-moz-errormessage</code> attribute to do so:</p> + +<pre class="brush: html"><input type="email" + x-moz-errormessage="Please specify a valid email address."> +</pre> + +<p>Note, however, that this is not standard and will not have an effect on other browsers.</p> + +<h3 id="Localization">Localization</h3> + +<p>The allowed inputs for certain <input> types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.</p> + +<p>Firefox uses the following heuristics to determine the locale to validate the user's input (at least for <code>type="number"</code>):</p> + +<ul> + <li>Try the language specified by a <code>lang</code>/<code>xml:lang</code> attribute on the element or any of its parents.</li> + <li>Try the language specified by any Content-Language HTTP header or</li> + <li>If none specified, use the browser's locale.</li> +</ul> + +<h3 id="Using_mozactionhint_on_Firefox_mobile">Using mozactionhint on Firefox mobile</h3> + +<p>You can use the {{htmlattrxref("mozactionhint", "input")}} attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this:</p> + +<pre class="brush: html"><input type="text" mozactionhint="next"> +</pre> + +<p>The result is:</p> + +<p><a href="/@api/deki/files/4970/=mozactionhint.png"><img alt="mozactionhint.png" class="default internal" src="/@api/deki/files/4970/=mozactionhint.png?size=webview" style="border: 1px solid black; height: 350px; width: 210px;"></a></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> + <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li> +</ul> diff --git a/files/zh-tw/web/html/element/input/submit/index.html b/files/zh-tw/web/html/element/input/submit/index.html new file mode 100644 index 0000000000..fa3b46813b --- /dev/null +++ b/files/zh-tw/web/html/element/input/submit/index.html @@ -0,0 +1,211 @@ +--- +title: <input type="submit"> +slug: Web/HTML/Element/input/submit +translation_of: Web/HTML/Element/input/submit +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary">{{HTMLElement("input")}} 元素的 <strong><code>"submit"</code></strong> 類型會被視為提交按鈕（submit button）——點選的話就能把表單提交到伺服器。</span></p> + +<div id="summary-example2"> +<pre class="brush: html"><input type="submit" value="Submit to me"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example2", 650, 30)}}</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>用作按鈕 label 的 {{domxref("DOMString")}}</td> + </tr> + <tr> + <td><strong>事件</strong></td> + <td>{{event("click")}}</td> + </tr> + <tr> + <td><strong>常見的支援屬性</strong></td> + <td>{{htmlattrxref("type", "input")}} 與 {{htmlattrxref("value", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 屬性</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>方法</strong></td> + <td>無</td> + </tr> + </tbody> +</table> + +<h2 id="值">值</h2> + +<p><code><input type="submit"></code> 元素的 {{htmlattrxref("value", "input")}} 屬性會包含用作按鈕 label 的 {{domxref("DOMString")}}。</p> + +<div id="summary-example3"> +<pre class="brush: html"><input type="submit" value="Submit to me"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p>如果不指定 <code>value</code>，視瀏覽器不同，按鈕會是 <em>Submit</em>/<em>Submit Query</em>/<em>提交</em> 之類的預設值：</p> + +<div id="summary-example1"> +<pre class="brush: html"><input type="submit"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="使用提交按鈕">使用提交按鈕</h2> + +<p><code><input type="submit"></code> 按鈕用於提交表單。如果想自訂按鈕、並透過 JavaScript 自訂其行為，你應該用 <code><a href="/zh-TW/docs/Web/HTML/Element/input/button"><input type="button"></a></code>、或更好的，{{htmlelement("button")}} 元素。</p> + +<p>請記住，如果表單內只有一個按鈕元素（例如 <code><button>My button</button></code>）的話，瀏覽器會自動把它視為提交按鈕。你要在其他按鈕之外，明確宣告一個提交按鈕。</p> + +<h3 id="簡易的提交按鈕">簡易的提交按鈕</h3> + +<p>我們要開始建立一個新的提交按鈕：</p> + +<pre class="brush: html"><form> + <div> + <label for="example">Let's submit some text</label> + <input id="example" type="text" name="text"> + </div> + <div> + <input type="submit" value="Submit to me"> + </div> +</form> +</pre> + +<p>它會被渲染為：</p> + +<p>{{EmbedLiveSample("A_simple_submit_button", 650, 100)}}</p> + +<p>試著在文字區塊內輸入些文字，接著提交表單。</p> + +<p>提交時，送到伺服器的成對 name/value 資料會 be along the lines of <code>text=mytext</code>，視你在文字區塊內輸入了什麼。資料在哪裡並如何被送出，取決於 <code><form></code> 屬性和其他細節的設定：請參見<a href="/zh-TW/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">傳送表單資料</a>。</p> + +<h3 id="增加提交的快捷鍵">增加提交的快捷鍵</h3> + +<p>鍵盤快捷鍵，又稱熱鍵，能讓用戶透過鍵盤按鍵或組合觸發按鈕事件。要給提交按鈕添加鍵盤快捷鍵——如同 {{HTMLElement("input")}} 那樣——你需要使用全域屬性 {{htmlattrxref("accesskey")}}。</p> + +<p>下例之中，<kbd>s</kbd> 被指定為快捷鍵（you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination; see {{htmlattrxref("accesskey")}} for a useful list of those）。</p> + +<pre class="brush: html"><form> + <div> + <label for="example">Let's submit some text</label> + <input id="example" type="text" name="text"> + </div> + <div> + <input type="submit" value="Submit to me" + accesskey="s"> + </div> +</form></pre> + +<p>{{EmbedLiveSample("Adding_a_submit_keyboard_shortcut", 650, 100)}}</p> + +<div class="note"> +<p><strong>注意</strong>：上例的問題很明顯，就是用戶不知道要按什麼快捷鍵！在實際網站中，你要提供不干擾網站整體設計的快捷鍵資訊：像是提供易於訪問的連結，告訴用戶說網站的快捷鍵是什麼。</p> +</div> + +<h3 id="禁用與啟用提交按鈕">禁用與啟用提交按鈕</h3> + +<p>要禁用提交按鈕，就如同下例般指定全域屬性 {{htmlattrxref("disabled")}}：</p> + +<div id="disable-example1"> +<pre class="brush: html"><input type="submit" value="Disabled" disabled></pre> +</div> + +<p>你可以在 run time 時藉由設定 <code>disabled</code> 的 <code>true</code> or <code>false</code> 來禁用或啟用提交按鈕。在 JavaScript 就看起來像 <code>btn.disabled = true</code>。</p> + +<div class="note"> +<p><strong>注意</strong>：請參見 <code><a href="/zh-TW/docs/Web/HTML/Element/input/button#Disabling_and_enabling_a_button"><input type="button"></a></code> 頁面以取得關於禁用/啟用提交按鈕的詳細資訊。</p> +</div> + +<div class="note"> +<p><strong>注意</strong>：Firefox 不若其他瀏覽器，它預設上會在 {{HTMLElement("button")}} 跨網頁加載時<a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">保持動態禁用狀態</a>。請用 {{htmlattrxref("autocomplete","button")}} 屬性控制這個功能。</p> +</div> + +<h2 id="驗證">驗證</h2> + +<p>提交按鈕不參與強制驗證：they have no real value to be constrained.</p> + +<h2 id="範例">範例</h2> + +<p>上面已經有一些程式碼了。這裡也沒有什麼還能講的。</p> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>規範</td> + <td>狀態</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#submit-button-state-(type=submit)', '<input type="submit">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#submit-button-state-(type=submit)', '<input type="submit">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支援</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支援</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="參見">參見</h2> + +<ul> + <li>實做它的 {{HTMLElement("input")}} 與 {{domxref("HTMLInputElement")}} 介面。</li> + <li>{{HTMLElement("button")}} 元素。</li> +</ul> diff --git a/files/zh-tw/web/html/element/marquee/index.html b/files/zh-tw/web/html/element/marquee/index.html new file mode 100644 index 0000000000..3b6a754c83 --- /dev/null +++ b/files/zh-tw/web/html/element/marquee/index.html @@ -0,0 +1,112 @@ +--- +title: <marquee>：捲動元素（已過時） +slug: Web/HTML/Element/marquee +translation_of: Web/HTML/Element/marquee +--- +<p>HTML <code><marquee></code> 元素用作插入一段文字的捲動區域。你可以透過屬性，控制文字在到達邊緣後的應對動作。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">DOM 介面</th> + <td>{{DOMxRef("HTMLMarqueeElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="屬性">屬性</h2> + +<dl> + <dt>{{htmlattrdef("behavior")}}</dt> + <dd>設定文字如何在 marquee 內捲動。可用值為 <code>scroll</code>、<code>slide</code>、<code>alternate</code>。若無指定，預設值為 <code>scroll</code>。</dd> + <dt>{{htmlattrdef("bgcolor")}}</dt> + <dd>透過色彩名或十六進位值指定背景顏色。</dd> + <dt>{{htmlattrdef("direction")}}</dt> + <dd>設定 marquee 內的捲動方向。可用值為 <code>left</code>、<code>right</code>、<code>up</code>、<code>down</code>。若無指定，預設值為 <code>left</code>。</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>設定像素或百分比高度。</dd> + <dt>{{htmlattrdef("hspace")}}</dt> + <dd>設定橫向外邊（horizontal margin）</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>設定 marquee 捲動的次數。若無指定，預設值為 -1，意思是的 marquee 將持續捲動。</dd> + <dt>{{htmlattrdef("scrollamount")}}</dt> + <dd>以像素為單位，設定捲動的間隔量。預設值為 6。</dd> + <dt>{{htmlattrdef("scrolldelay")}}</dt> + <dd>設定每次捲動時之間間隔的毫秒。預設值為 85。請注意，除非指定了 <code>truespeed</code>，否則小於 60 的數字會被忽略，並值使用 60。</dd> + <dt>{{htmlattrdef("truespeed")}}</dt> + <dd><code>scrolldelay</code> 預設上會忽略低於 60 的值。但如果有 <code>truespeed</code> 的話，就不會忽略此值。</dd> + <dt>{{htmlattrdef("vspace")}}</dt> + <dd>以像素或百分比值設置垂直邊距。</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>設置以像素或百分比值為單位的寬度。</dd> +</dl> + +<h2 id="Event_handlers" name="Event_handlers">事件處理器</h2> + +<dl> + <dt>{{htmlattrdef("onbounce")}}</dt> + <dd>marquee 滾動到結尾時觸發。只能在 behavior 屬性設置為 <code>alternate</code> 時觸發。</dd> + <dt>{{htmlattrdef("onfinish")}}</dt> + <dd>marquee 完成 loop 屬性的設定值時觸發。只能在 loop 屬性設為大於 0 的數字時觸發。</dd> + <dt>{{htmlattrdef("onstart")}}</dt> + <dd>marquee 開始捲動時觸發。</dd> +</dl> + +<h2 id="Methods" name="Methods">方法</h2> + +<dl> + <dt>start()</dt> + <dd>開始 marquee 的捲動</dd> + <dt>stop()</dt> + <dd>停止 marquee 的捲動</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><marquee>This text will scroll from right to left</marquee> + +<marquee direction="up">This text will scroll from bottom to top</marquee> + +<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> + <marquee behavior="alternate"> + This text will bounce + </marquee> +</marquee></pre> + +<p>{{EmbedLiveSample("Examples", 600, 450)}}</p> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">規範</th> + <th scope="col">狀態</th> + <th scope="col">註解</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'obsolete.html#the-marquee-element-2', '<marquee>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>為了利於 CSS 而令其過時，但為了向下相容，還是定義了預期行為。不過 CSS 的 marquee 功能<a href="https://www.w3.org/TR/css3-marquee/">已經停止開發</a>。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '<marquee>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>為了利於 CSS 而令其過時，但為了向下相容，還是定義了預期行為。不過 CSS 的 marquee 功能<a href="https://www.w3.org/TR/css3-marquee/">已經停止開發</a>。</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + + + +<p>{{Compat("html.elements.marquee")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{DOMxRef("HTMLMarqueeElement")}}</li> +</ul> diff --git a/files/zh-tw/web/html/element/meter/index.html b/files/zh-tw/web/html/element/meter/index.html new file mode 100644 index 0000000000..3043891ff8 --- /dev/null +++ b/files/zh-tw/web/html/element/meter/index.html @@ -0,0 +1,143 @@ +--- +title: <meter> +slug: Web/HTML/Element/meter +translation_of: Web/HTML/Element/meter +--- +<h2 id="摘要">摘要</h2> + +<p><strong>HTML <code><meter></code> Element</strong> represents either a scalar value within a known range or a fractional value.</p> + +<div class="note"><strong>Usage note: </strong>Unless the <strong>value</strong> attribute is between 0 and 1 (inclusive), the <strong>min</strong> attribute and <strong>max</strong> attribute should define the range so that the <strong>value</strong> attribute's value is within it.</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, labelable content, palpable content.</li> + <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>, but there must be no <code><meter></code> element among its descendants.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLMeterElement")}}</li> +</ul> + +<h2 id="屬性">屬性</h2> + +<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>The current numeric value. This must be between the minimum and maximum values (<strong>min</strong> attribute and <strong>max</strong> attribute) if they are specified. If unspecified or malformed, the value is 0. If specified, but not within the range given by the <strong>min</strong> attribute and <strong>max</strong> attribute, the value is equal to the nearest end of the range.</dd> + <dt>{{htmlattrdef("min")}}</dt> + <dd>The lower numeric bound of the measured range. This must be less than the maximum value (<strong>max</strong> attribute), if specified. If unspecified, the minimum value is 0.</dd> + <dt>{{htmlattrdef("max")}}</dt> + <dd>The upper numeric bound of the measured range. This must be greater than the minimum value (<strong>min</strong> attribute), if specified. If unspecified, the maximum value is 1.</dd> + <dt>{{htmlattrdef("low")}}</dt> + <dd>The upper numeric bound of the low end of the measured range. This must be greater than the minimum value (<strong>min</strong> attribute), and it also must be less than the high value and maximum value (<strong>high</strong> attribute and <strong>max</strong> attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, the <strong>low</strong> value is equal to the minimum value.</dd> + <dt>{{htmlattrdef("high")}}</dt> + <dd>The lower numeric bound of the high end of the measured range. This must be less than the maximum value (<strong>max</strong> attribute), and it also must be greater than the low value and minimum value (<strong>low</strong> attribute and <strong>min</strong> attribute, respectively), if any are specified. If unspecified, or if greater than the maximum value, the <strong>high</strong> value is equal to the maximum value.</dd> + <dt>{{htmlattrdef("optimum")}}</dt> + <dd>This attribute indicates the optimal numeric value. It must be within the range (as defined by the <strong>min</strong> attribute and <strong>max</strong> attribute). When used with the <strong>low</strong> attribute and <strong>high</strong> attribute, it gives an indication where along the range is considered preferable. For example, if it is between the <strong>min</strong> attribute and the <strong>low</strong> attribute, then the lower range is considered preferred.</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>This attribute associates the element with a <code>form</code> element that has ownership of the <code>meter</code> element. For example, a <code>meter</code> might be displaying a range corresponding to an <code>input</code> element of <strong>type</strong> <em>number</em>. This attribute is only used if the <code>meter</code> element is being used as a form-associated element; even then, it may be omitted if the element appears as a descendant of a <code>form</code> element.</dd> +</dl> + +<h2 id="範例">範例</h2> + +<h3 id="Simple_example" name="Simple_example">Simple example</h3> + +<pre class="brush: html"><p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p> +</pre> + +<p>On Google Chrome, the resulting meter looks like this:</p> + +<p><img alt="meter1.png" class="internal default" src="/@api/deki/files/4940/=meter1.png"></p> + +<h3 id="Hilo_Range_example" name="Hilo_Range_example">高/低範圍範例</h3> + +<p>Note that in this example the <strong>min</strong> attribute is omitted; this is allowed, as it will default to 0.</p> + +<pre class="brush: html"><p>He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.</p> +</pre> + +<p>On Google Chrome, the resulting meter looks like this:</p> + +<p><img alt="meter2.png" class="internal default" src="/@api/deki/files/4941/=meter2.png"></p> + +<h2 id="Specifications" name="Specifications">詳述</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">規格</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-meter-element', '<meter>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', '<meter>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>6.0</td> + <td>{{CompatGeckoDesktop("16.0")}} {{bug(555985)}}</td> + <td>{{CompatNo}}</td> + <td>11.0</td> + <td>5.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("16.0")}} {{bug(555985)}}</td> + <td>{{CompatNo}}</td> + <td>11.0</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("progress")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-tw/web/html/element/nav/index.html b/files/zh-tw/web/html/element/nav/index.html new file mode 100644 index 0000000000..114fc8e919 --- /dev/null +++ b/files/zh-tw/web/html/element/nav/index.html @@ -0,0 +1,107 @@ +--- +title: <nav> +slug: Web/HTML/Element/nav +tags: + - 元素 + - 區域 + - 導航欄 + - 網站 + - 網站區域 + - 網頁 + - 網頁區域 + - 連結 +translation_of: Web/HTML/Element/nav +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <nav> 元素</strong>代表一個網頁中提供導航欄連結的區域，不管是當前網頁或者其他網頁，還是這個連結最終抵達的只是當前網頁的某個區塊，或者會抵達其他網頁，常見的導航欄範例有菜單、內容的表單，以及頁面本身。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content">流內容</a>、<a href="/zh-TW/docs/HTML/Content_categories#Sectioning_content">sectioning content</a>、palpable content.</td> + </tr> + <tr> + <th scope="row">允許內容</th> + <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content">流內容</a>。</td> + </tr> + <tr> + <th scope="row">省略標籤</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="屬性">屬性</h2> + +<p>此元素只有<a href="/zh-TW/docs/HTML/Global_attributes">全域屬性</a>。</p> + +<h2 id="使用筆記">使用筆記</h2> + +<ul> + <li>不是所有的文件連結都需要在 <code><nav></code> 元素裡面，它僅適用於主要的導航鏈接塊。一般來說 {{HTMLElement("footer")}} 元素常常有一個不需要在 {{HTMLElement("nav")}} 元素裡面的的鏈接列表。</li> + <li>文件可以有很多個 {{HTMLElement("nav")}} 元素。例如說，一個用做網站導覽、另一個用做頁內導覽。</li> + <li>面向身障用戶的螢幕閱讀器的用戶代理（User agent），可以決定要不要在初始渲染時省略這個元素的內容。</li> +</ul> + +<h2 id="範例">範例</h2> + +<p>在這個範例，<code><nav></code> 區塊用於包含連結的無序清單 ({{HTMLElement("ul")}})。透過合適的 CSS，它能夠顯示為 sidebar、導覽列、以及下拉式選單。</p> + +<pre class="brush: html"><nav class="menu"> + <ul> + <li><a href="#">Home</a></li> + <li><a href="#">About</a></li> + <li><a href="#">Contact</a></li> + </ul> +</nav> +</pre> + +<h2 id="屬性_2">屬性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since latest W3C snapshot.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + + + +<p>{{Compat("html.elements.nav")}}</p> +<h2 id="參見">參見</h2> + +<ul> + <li>Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> +</ul> diff --git a/files/zh-tw/web/html/element/optgroup/index.html b/files/zh-tw/web/html/element/optgroup/index.html new file mode 100644 index 0000000000..5368a72cc0 --- /dev/null +++ b/files/zh-tw/web/html/element/optgroup/index.html @@ -0,0 +1,161 @@ +--- +title: <optgroup> +slug: Web/HTML/Element/optgroup +tags: + - Element + - Forms + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/optgroup +--- +<h2 id="總覽">總覽</h2> + +<p>In a Web form, the <strong>HTML <code><optgroup></code> element</strong> creates a grouping of options within a {{HTMLElement("select")}} element.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td>None.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>Zero or more {{HTMLElement("option")}} elements.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>The <span title="syntax-start-tag">start tag</span> is mandatory. The <span title="syntax-end-tag">end tag</span> is optional if this element is immediately followed by another <span style="font-family: courier new;"><optgroup></span> element, or if the parent element has no more content.</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>A {{HTMLElement("select")}} element.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLOptGroupElement")}}</td> + </tr> + </tbody> +</table> + +<p>{{Note("Optgroup elements may not be nested.")}}</p> + +<h2 id="屬性">屬性</h2> + +<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>If this Boolean attribute is set, none of the items in this option group is selectable. Often browsers grey out such control and it won't receive any browsing events, like mouse clicks or focus-related ones.</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>The name of the group of options, which the browser can use when labeling the options in the user interface. This attribute is mandatory if this element is used.</dd> +</dl> + +<h2 id="範例">範例</h2> + +<pre class="brush: html"><select> + <optgroup label="Group 1"> + <option>Option 1.1</option> + </optgroup> + <optgroup label="Group 2"> + <option>Option 2.1</option> + <option>Option 2.2</option> + </optgroup> + <optgroup label="Group 3" disabled> + <option>Option 3.1</option> + <option>Option 3.2</option> + <option>Option 3.3</option> + </optgroup> +</select> +</pre> + +<h3 id="結果">結果</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="參見">參見</h2> + +<ul> + <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-tw/web/html/element/picture/index.html b/files/zh-tw/web/html/element/picture/index.html new file mode 100644 index 0000000000..080d6258cd --- /dev/null +++ b/files/zh-tw/web/html/element/picture/index.html @@ -0,0 +1,156 @@ +--- +title: '<picture>: The Picture element' +slug: Web/HTML/Element/picture +translation_of: Web/HTML/Element/picture +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><picture></code> 元素</strong> 包含了零或零以上個 {{HTMLElement("source")}} 元素以及一個 {{HTMLElement("img")}} 元素，以為不同顯示器/裝置提供同張圖片的不同版本。</span> </p> + +<p>瀏覽器將會考慮每個 <code><source></code> 元素，並且在其中選出最適當的選項。如果沒有找到最適當的選項——或是瀏覽器不支援 <code><picture></code> 元素——則 <code><img></code> 屬性的 URL 會被選擇。被選擇的圖片將會在 <code><img></code> 元素存在的位置顯示。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/picture.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>為了決定載入哪一個 URL，{{Glossary("user agent")}} 會檢視每一個 <code><source></code> 的 {{htmlattrxref("srcset", "source")}}、{{htmlattrxref("media", "source")}} 以及 {{htmlattrxref("type", "source")}} 屬性，以選出最適合當前版面以及顯示裝置支援度的圖片。</p> + +<p><code><img></code> 有兩個作用：</p> + +<ol> + <li>它描述了該圖片的尺寸等屬性以及呈現（presentation）。</li> + <li>在所有列出的 <code><source></code> 都不能提供可用圖片的情況下的 fallback。 </li> +</ol> + +<p><code><picture></code> 的常見使用案例：</p> + +<ul> + <li><strong>圖像方向（art direction）：</strong> 根據不同的 <code>media</code> 狀況裁切或調整圖片（例如在較小的螢幕上，載入原本有複雜細節圖片的較簡單版本圖片）</li> + <li><strong>提供替代的圖片格式：</strong>以應對某些特定格式不被支援的情況</li> + <li><strong>節省頻寬並加速頁面載入速度：</strong>透過針對觀看者的裝置載入最適當的圖片做到這點</li> +</ul> + +<p>如果是要為高 DPI （Retina）螢幕提供圖片的高解析度版本時，可改在使用 <code><img></code> 上使用 {{htmlattrxref("srcset", "img")}} 屬性。這會讓瀏覽器在 data-saving 模式選擇低解析度的版本，這樣你就不用特地指定 <code>media</code> 條件。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, phrasing content, embedded content</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>Zero or more {{HTMLElement("source")}} elements, followed by one {{HTMLElement("img")}} element, optionally intermixed with script-supporting elements.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that allows embedded content.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>No <code>role</code> permitted</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLPictureElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="屬性">屬性</h2> + +<p>此元素只包含 <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<h2 id="用法筆記">用法筆記</h2> + +<p>你可以使用 {{cssxref("object-position")}} 屬性來在元素的 frame 內調整圖片位置，也可以用 {{cssxref("object-fit")}} 屬性控制圖片在 frame 內如何調整大小。</p> + +<div class="note"> +<p><strong>注意:</strong> 在子元素 <code><img></code> 上使用這些屬性，而不是 <code><picture></code> 元素.</p> +</div> + +<h2 id="範例">範例</h2> + +<p>以下例子示範如何根據 {{HTMLElement("source")}} 元素不同的屬性設定選擇 <code><picture></code> 中的不同圖片。</p> + +<h3 id="media_屬性">media 屬性</h3> + +<p><code>media</code> 屬性指定特定的媒體類型（跟 media query 很像），讓 user agent 可對每個 {{HTMLElement("source")}} 元素作出判斷。</p> + +<p>如果 {{HTMLElement("source")}} 的指定媒體類型被判斷為 <code>false</code> ，則瀏覽器會跳過它，並繼續判斷 <code><picture></code> 中的下個元素。</p> + +<pre class="brush: html notranslate"><picture> + <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> + <img src="mdn-logo-narrow.png" alt="MDN"> +</picture> +</pre> + +<h3 id="srcset_屬性">srcset 屬性</h3> + +<p>The <a href="/en-US/docs/Web/HTML/Element/source#attr-srcset">{{htmlattrdef("srcset")}}</a> 屬性用來提供根據大小區分的可能圖片清單。</p> + +<p>它是由逗號分隔的圖片描述句清單組成的。每一個圖片描述句是由該圖片的 URL 以及以下描述組成（擇一）：</p> + +<ul> + <li>寬度，結尾為 <code>w</code> (例如 <code>300w</code>)；<br> + <em>或是</em></li> + <li>像素密度，結尾為 <code>x</code> (例如 <code>2x</code>)，以為高 DPI 螢幕提供高解析度圖片</li> +</ul> + +<pre class="brush: html notranslate"><picture> + <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x"> + <source srcset="logo-480.png, logo-480-2x.png 2x"> + <img src="logo-320.png" alt="logo"> +</picture></pre> + +<h3 id="type_屬性">type 屬性</h3> + +<p><code>type</code> 屬性為 {{HTMLElement("source")}} 元素中 <code>srcset</code> 屬性的資源 URL 指定 <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> 。如果 user agent 不支援該 type 的話，此 {{HTMLElement("source")}} 元素會被略過。</p> + +<pre class="brush: html notranslate"><picture> + <source srcset="logo.webp" type="image/webp"> + <img src="logo.png" alt="logo"> +</picture> +</pre> + +<h2 id="規格">規格</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '<picture>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器支援度">瀏覽器支援度</h2> + + + +<p>{{Compat("html.elements.picture")}}</p> + +<h2 id="相關資源">相關資源</h2> + +<ul> + <li>{{HTMLElement("img")}} 元素</li> + <li>{{HTMLElement("source")}} 元素</li> + <li>在圖片的 frame 中調整其大小與位置： {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li> + <li><a href="/en-US/docs/Web/Media/Formats/Image_types">圖片檔案類型與格式指南</a></li> +</ul> diff --git a/files/zh-tw/web/html/element/q/index.html b/files/zh-tw/web/html/element/q/index.html new file mode 100644 index 0000000000..b11fa1ac4c --- /dev/null +++ b/files/zh-tw/web/html/element/q/index.html @@ -0,0 +1,103 @@ +--- +title: <q> +slug: Web/HTML/Element/q +translation_of: Web/HTML/Element/q +--- +<div>{{HTMLRef}}</div> + +<p><em>HTML 引文元素</em> (<strong><q></strong>) 指示一段元素內的文字，屬於行內引文。這個元素適用於不須換行的短引文，針對長引文，請使用 {{HTMLElement("blockquote")}} 元素。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories">內容類別</a></th> + <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content">流內容</a>、<a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">段落式內容</a>、捫及內容。</td> + </tr> + <tr> + <th scope="row">允許內容</th> + <td><a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">段落式內容</a></td> + </tr> + <tr> + <th scope="row">標籤省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允許父元素</th> + <td>任何允許<a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">段落式內容</a>的元素</td> + </tr> + <tr> + <th scope="row">DOM 介面</th> + <td>{{domxref("HTMLQuoteElement")}}</td> + </tr> + </tbody> +</table> + +<p>{{NoteStart}}多數現代標準瀏覽器，如 Mozilla Firefox, Opera, Safari 會在 <code><q></code> 元素周圍添加引號；但有些瀏覽器（如 Internet Explorer）可能不會針對引用添加任何樣式，不過這些都可以透過樣式規則套用。{{NoteEnd}}</p> + +<h2 id="屬性">屬性</h2> + +<p>這個元素包含 <a href="/zh-TW/docs/HTML/Global_attributes">全域屬性</a>。</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>這個屬性值為可以指定引用文件、或信息來源的 URL。這個屬性預期導向信息說明的上下文、或是引文參照。</dd> +</dl> + +<h2 id="Example" name="Example">範例</h2> + +<h3 id="HTML_內容">HTML 內容</h3> + +<pre class="brush: html"><p>每當阿尼掛掉的時候，屎蛋會說： + <q cite="https://zh.wikipedia.org/zh-tw/%E8%82%AF%E5%B0%BC%C2%B7%E9%BA%A6%E5%85%8B%E5%BA%B7%E7%B1%B3%E5%85%8B"> + 我的天啊！阿尼他被掛掉了！ + </q>. +</p> +</pre> + +<p>{{ EmbedLiveSample('Example') }}</p> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">規範</th> + <th scope="col">狀態</th> + <th scope="col">註解</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-q-element', '<q>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-q-element', '<q>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<q>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>初始定義</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<div> + + +<p>{{Compat("html.elements.q")}}</p> +</div> + +<p> </p> + +<h2 id="參閱">參閱</h2> + +<ul> + <li>針對長引文的 {{HTMLElement("blockquote")}} 元素</li> + <li>針對引用來源的 {{HTMLElement("cite")}} 元素</li> +</ul> diff --git a/files/zh-tw/web/html/element/ruby/index.html b/files/zh-tw/web/html/element/ruby/index.html new file mode 100644 index 0000000000..e0e1eb9dd2 --- /dev/null +++ b/files/zh-tw/web/html/element/ruby/index.html @@ -0,0 +1,93 @@ +--- +title: <ruby> +slug: Web/HTML/Element/ruby +translation_of: Web/HTML/Element/ruby +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><ruby></code> 元素</strong>的意思是旁註標記。旁註標記用於標示東亞文字的發音。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ruby.html", "tabbed-shorter")}}</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-TW/docs/Web/HTML/Content_categories" title="HTML/Content_categories">內容類型</a></th> + <td><a href="/zh-TW/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">流內容</a>、<a href="/zh-TW/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">段落型內容</a>、捫及內容</td> + </tr> + <tr> + <th scope="row">允許內容</th> + <td><a href="/zh-TW/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">段落型內容</a></td> + </tr> + <tr> + <th scope="row">標籤省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允許父元素</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a></td> + </tr> + <tr> + <th scope="row">DOM 介面</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">屬性</h2> + +<p>這個元素只支援<a href="/zh-TW/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">全域屬性</a>。</p> + +<h2 id="Examples" name="Examples">範例</h2> + +<h3 id="範例一：字">範例一：字</h3> + +<pre class="brush:html"><ruby> + 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> + 字 <rp>(</rp><rt>ji</rt><rp>)</rp> +</ruby></pre> + +<h3 id="範例二：詞">範例二：詞</h3> + +<pre class="brush:html"><ruby> + 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> +</ruby></pre> + +<h2 id="Specifications" name="Specifications">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">規範</th> + <th scope="col">狀態</th> + <th scope="col">註解</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>{{Compat("html.elements.ruby")}}</p> + +<h2 id="See_also" name="See_also">參閱</h2> + +<ul> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rtc")}}</li> + <li>{{HTMLElement("rbc")}}</li> + <li>{{CSSxRef("text-transform")}}: full-size-kana</li> +</ul> diff --git a/files/zh-tw/web/html/element/script/index.html b/files/zh-tw/web/html/element/script/index.html new file mode 100644 index 0000000000..575be45b12 --- /dev/null +++ b/files/zh-tw/web/html/element/script/index.html @@ -0,0 +1,202 @@ +--- +title: <script> +slug: Web/HTML/Element/script +translation_of: Web/HTML/Element/script +--- +<p><span class="seoSummary"><strong>HTML <code><script></code> 元素</strong>能嵌入或引用要執行的程式碼。最常見的用途是嵌入或引用 JavaScript 程式碼。</span><script> 元素也能執行其他語言，例如 <a href="/zh-TW/docs/Web/API/WebGL_API">WebGL</a> 的 GLSL shader 程式語言。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-TW/docs/Web/HTML/Content_categories">內容類型</a></th> + <td><a href="/zh-TW/docs/Web/HTML/Content_categories#Metadata_content">元資料內容</a>、<a href="/zh-TW/docs/Web/HTML/Content_categories#Flow_content">流型內容</a>、<a href="/zh-TW/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">允許的內容</th> + <td>動態腳本如 <code>text/javascript</code>.</td> + </tr> + <tr> + <th scope="row">標籤省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允許的父元素</th> + <td>任何可接受 <a href="/zh-TW/docs/Web/HTML/Content_categories#Metadata_content">元資料內容</a>或 <a href="/zh-TW/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a> 的元素。</td> + </tr> + <tr> + <th scope="row">允許的 ARIA role</th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM 介面</th> + <td>{{domxref("HTMLScriptElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="屬性">屬性</h2> + +<p>此元素包含了<a href="/zh-TW/docs/Web/HTML/Global_attributes">全域屬性</a>。</p> + +<dl> + <dt>{{htmlattrdef("async")}} {{HTMLVersionInline(5)}}</dt> + <dd>這個布林屬性告訴瀏覽器說：如果可以，就以非同步的方法執行腳本。</dd> +</dl> + +<div class="warning"> +<p>如果沒有 <code>src</code> 屬性的話，就不能用這個屬性（例如行內腳本）：在這種情況下，它將失去作用。</p> +</div> + +<dl> + <dd> + <p>在 HTML 解析時，瀏覽器通常會假定最壞的情況，並同步地載入腳本（例如 <code>async=false</code>）。</p> + </dd> + <dd> + <p>動態插入的腳本（例如 <code>document.createElement</code>）一般來說是非同步執行的。因此，如果設定同步的話（腳本按照被插入的順序執行），會被設為 <code>async=false</code>。</p> + + <p>請參見 {{anch("Browser compatibility")}} 的瀏覽器支援備註。另請參見 <a href="/zh-TW/docs/Games/Techniques/Async_scripts">Async scripts for asm.js</a>。</p> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>針對沒有通過標準 <a href="/zh-TW/docs/HTTP_access_control">CORS</a> 的一般 <code>script</code> 元素，會把最少的資訊傳給 {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}}。若要允許另一個域名站點的靜態內容，列出錯誤訊息，請使用此屬性。請參見 <a href="/zh-TW/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a> 以以取得對其有效參數的，更具描述性的解釋。</dd> + <dt>{{htmlattrdef("defer")}}</dt> + <dd>This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing {{event("DOMContentLoaded")}}.</dd> + <dd>Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.</dd> +</dl> + +<div class="warning"> +<p>如果沒有 <code>src</code> 屬性的話，就不能用這個屬性（例如行內腳本）：在這種情況下，它將失去作用。</p> +</div> + +<dl> + <dd>To achieve a similar effect for dynamically inserted scripts use <code>async=false</code> instead. Scripts with the <code>defer</code> attribute will execute in the order in which they appear in the document.</dd> + <dt>{{htmlattrdef("integrity")}}</dt> + <dd>This attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See <a href="/zh-TW/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd> + <dt>{{htmlattrdef("nomodule")}}</dt> + <dd>這個布林屬性，會要求支援 <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES2015 modules</a> 的瀏覽器，不執行裡面的程式。這能用來給不支援 JavaScript 模組的老舊瀏覽器，提供用於向下支援的服務。</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("nonce")}}</dt> + <dd>A cryptographic nonce (number used once) to whitelist inline scripts in a <a href="/zh-TW/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">script-src Content-Security-Policy</a>. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>此屬性指定外部程式的 <abbr>URI</abbr>，可以用來取代直接在文件內中嵌入腳本。</dd> +</dl> + +<div class="warning"> +<p>如果 <code>script</code> 元素有指定 <code>src</code> 屬性的話，標籤內就不能有嵌入的腳本。</p> +</div> + +<dl> + <dt>{{htmlattrdef("text")}}</dt> + <dd>Like the <code>textContent</code> attribute, this attribute sets the text content of the element. Unlike the <code>textContent</code> attribute, however, this attribute is evaluated as executable code after the node is inserted into the DOM.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd> + <p>此屬性指定程式碼應該表示的類型。此屬性的值會屬於以下類別之一：</p> + + <ul> + <li><strong>省略或 JavaScript MIME 類型</strong>：針對相容 HTML5 的瀏覽器來說，元素內會執行 JavaScript。HTML5 規範敦促作者省略此屬性，不需要寫冗長的 MIME 類型。在早期的瀏覽器中，這確定了嵌入或引入（透過 <code>src</code> 屬性）腳本的語言。JavaScript MIME 類型<a href="/zh-TW/docs/Web/HTTP/Basics_of_HTTP/MIME_types">有列在規範內</a>。</li> + <li><strong><code>module</code></strong>：{{HTMLVersionInline(5)}} {{experimental_inline}} 針對相容 HTML5 的瀏覽器來說，這段程式碼會當成 JavaScript 模組（module）。腳本內容的處理不受 <code>charset</code> 與 <code>defer</code> 屬性影響。針對 <code>module</code> 的資訊，請參閱 <a class="external external-icon" href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>。在使用 <code>module</code> 關鍵字時，程式碼的行為會有所不同。</li> + <li><strong>其他值</strong>：嵌入的內容會被當成一段不給瀏覽器執行的資料塊（data block）。開發者應當使用非 JavaScript 的有效 MIME 類型，以標明資料塊。<code>src</code> 屬性也將被忽略。</li> + </ul> + + <div class="note"> + <p><strong>注：</strong>在 Firefox 你可以在 <code><script></code> 元素的 <code>type</code> 屬性，透過標明非標準參數 <code>version</code>，指定要使用的 JavaScript 版本：例如說 <code>type="application/javascript;version=1.8"</code>。這個功能在 Firefox 59 移除了（請參見 {{bug(1428745)}}）。</p> + </div> + </dd> +</dl> + +<h3 id="棄用屬性">棄用屬性</h3> + +<dl> + <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt> + <dd>如同 <code>type</code> 屬性，此屬性指定正在使用的腳本語言。但與 <code>type</code> 屬性不同，此屬性的可用值從未標準化。應當使用 <code>type</code> 屬性。</dd> +</dl> + +<h2 id="註解">註解</h2> + +<p>Scripts without <code>async</code> or <code>defer</code> attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.</p> + +<p>The script should be served with the <code>text/javascript</code> MIME type, but browsers are lenient and only block them if the script is served with an image type (<code>image/*</code>); a video type (<code>video/*</code>); an audio (<code>audio/*</code>) type; or <code>text/csv</code>. If the script is blocked, an {{event("error")}} is sent to the element, if not a {{event("load")}} event is sent.</p> + +<h2 id="示例">示例</h2> + +<h3 id="基本">基本</h3> + +<p>以下示例展示如何在 HTML4 與 HTML5 使用 <code><script></code> 屬性。</p> + +<pre class="brush: html"><!-- HTML4 與 (x)HTML --> +<script type="text/javascript" src="javascript.js"></script> + +<!-- HTML5 --> +<script src="javascript.js"></script> +</pre> + +<h3 id="模組的向下支援方案">模組的向下支援方案</h3> + +<p>有針對 type 屬性支援 module（模組）的瀏覽器，會忽略 nomodule 屬性的程式碼。這能讓那些不支援模組的瀏覽器，提供替代的使用方法。</p> + +<pre class="brush: js"><script type="module" src="main.mjs"></script> +<script nomodule src="fallback.js"></script></pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">規範</th> + <th scope="col">狀態</th> + <th scope="col">註解</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Adds the module type</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'scripting-1.html#script', '<script>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.2.1', '<script>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('Subresource Integrity', '#htmlscriptelement', '<script>')}}</td> + <td>{{Spec2('Subresource Integrity')}}</td> + <td>Adds the integrity attribute.</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>The information shown below has been pulled from MDN's Github (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>)</p> + +<div> +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.script", 2)}}</p> +</div> + +<h2 id="相容性註解">相容性註解</h2> + +<p>In older browsers that don't support the <code>async</code> attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4 Firefox. In Firefox 4, the <code>async</code> DOM property defaults to <code>true</code> for script-created scripts, so the default behaviour matches the behaviour of IE and WebKit.</p> + +<p>To request script-inserted external scripts be executed in the insertion order in browsers where the <code>document.createElement("script").async</code> evaluates to <code>true</code> (such as Firefox 4), set <code>.async=false</code> on the scripts you want to maintain order.</p> + +<div class="warning"> +<p>Never call <code>document.write()</code> from an async script. In Firefox 3.6, calling <code>document.write()</code> has an unpredictable effect. In Firefox 4, calling <code>document.write()</code> from an async script has no effect (other than printing a warning to the error console).</p> +</div> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{domxref("document.currentScript")}}</li> + <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's <script> and <link> node event compatibility chart</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-tw/web/html/element/summary/index.html b/files/zh-tw/web/html/element/summary/index.html new file mode 100644 index 0000000000..3b3d6e2e93 --- /dev/null +++ b/files/zh-tw/web/html/element/summary/index.html @@ -0,0 +1,135 @@ +--- +title: <summary> +slug: Web/HTML/Element/summary +translation_of: Web/HTML/Element/summary +--- +<div>{{HTMLRef}}</div> + +<h2 id="Summary">Summary</h2> + +<p>The HTML <em>summary </em>element (<code><summary></code>) is used as a summary, caption, or legend for the content of a {{HTMLElement("details")}} element.</p> + +<div class="note"><strong>Note:</strong> If the <code><summary></code> element is omitted, the heading "details" will be used.</div> + +<div class="note"><strong>Note:</strong> The default style for <code><summary></code> is <code>display:list-item</code> per <a href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements">HTML standard</a>. If the style is being changed to <code>display:block</code>, the disclosure triangle will be dismissed, which is expected. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1283989">Bug 1283989</a> for more information.</div> + +<h2 id="Usage_context">Usage context</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Phrasing content</a> or one element of <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Heading_content">Heading content</a></td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>None, both the start tag and the end tag are mandatory.</td> + </tr> + <tr> + <th scope="row">Permitted parent element</th> + <td>The {{HTMLElement("details")}} element.</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#the-summary-element" rel="external nofollow">HTML5, section 4.11.2</a></td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element only includes the <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">global attributes</a>.</p> + +<h2 id="DOM_interface">DOM interface</h2> + +<p>This element implements the {{domxref("HTMLElement")}} interface.</p> + +<h2 id="Examples">Examples</h2> + +<details style="color: blue; margin-left: 15px; margin-bottom: 10px;"> +<p style="color: red;">In summation, get details from the link on the next line</p> +</details> + +<p>Please see the {{HTMLElement("details")}} page for examples on <summary>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>12</td> + <td>{{CompatGeckoDesktop("49.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>{{CompatGeckoMobile("49.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This feature is available since Firefox 47 behind the preference <code>dom.details_element.enabled</code>, defaulting to <code>false</code>, except on Nightly and Aurora versions ({{bug(1241750)}}). Support for it is enabled by default, i.e. the preference is defaulting to <code>true</code>, since Firefox 49.0 ({{bug("1226455")}}).</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("details")}}</li> +</ul> diff --git a/files/zh-tw/web/html/element/table/index.html b/files/zh-tw/web/html/element/table/index.html new file mode 100644 index 0000000000..69b97e4f4e --- /dev/null +++ b/files/zh-tw/web/html/element/table/index.html @@ -0,0 +1,362 @@ +--- +title: <table>（表格元素） +slug: Web/HTML/Element/table +translation_of: Web/HTML/Element/table +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><table></code> 元件</strong>代表表格數據──換句話說，就是透過二維資料表來呈現資訊。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories">內容類型</a></th> + <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content">流內容</a></td> + </tr> + <tr> + <th scope="row">允許內容</th> + <td> + <div class="content-models"> + <div id="table-mdls">按照以下順序： + <ol> + <li>一個可選的{{HTMLElement("caption")}}元素，</li> + <li>零個或更多的{{HTMLElement("colgroup")}}元素，</li> + <li>一個可選的{{HTMLElement("thead")}}元素，</li> + <li>一個在以下元素之前或之後的可選 {{HTMLElement("tfoot")}} 元素： + <ul> + <li>零個或更多的{{HTMLElement("tbody")}}元素，</li> + <li>或者，一個或更多的{{HTMLElement("tr")}}元素</li> + </ul> + </li> + </ol> + </div> + </div> + </td> + </tr> + <tr> + <th scope="row">標籤省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允許父元素</th> + <td>Any element that accepts flow content</td> + </tr> + <tr> + <th scope="row">允許 ARIA 規則</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM 介面</th> + <td>{{domxref("HTMLTableElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="屬性">屬性</h2> + +<p>這個元件包含了 <a href="https://developer.mozilla.org/zh-TW/docs/HTML/Global_attributes">全域屬性（global attributes）</a>。</p> + +<h3 id="棄用屬性">棄用屬性</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt> + <dd>這個枚舉屬性會指示表格中的文字要如何對齊。可用值如下： + <ul> + <li>left：意思是表格應該顯示在文件的左方。</li> + <li>center：意思是表格應該顯示在文件的中間。</li> + <li>right：意思是表格應該顯示在文件的右方。</li> + </ul> + + <p>在 CSS 要得出類似效果，應該設定 {{cssxref("margin-left")}} 與 {{cssxref("margin-right")}}；如果要置中，則要把 {{cssxref("margin")}} 屬性設定為 <code>0 auto</code>。</p> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd>定義表格的背景與內容顏色。它使用<a href="/zh-TW/docs/Web/CSS/color_value#RGB_colors">六位十六進制 RGB code</a>，前缀需要加上 '<code>#</code>' 。也可以用<a href="/zh-TW/docs/Web/CSS/color_value#Color_keywords">預先定義的顏色字串</a>可用。在 CSS 要得出類似效果，應該使用 {{cssxref("background-color")}} 屬性。</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt> + <dd>這個屬性以像素為單位，定義了圍繞於表格框架的大小。如果設為 0，代表 {{htmlattrxref("frame", "table")}} 屬性為空。在 CSS 要得出類似效果，應該使用 {{cssxref("border")}} 屬性。</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt> + <dd> + <p>這個屬性定義了元件與邊界線之間的空白，以及要不要顯示。如果輸入像素，像素長度的空白會套用到四個邊；如果輸入百分比，內容將居中、整體的垂直空間（上與下）會使用這個百分比表示。橫向空間（左與右）也適用這個規則。</p> + + <p>在 CSS 要得出類似效果，應該對 <code><table></code> 屬性使用 {{cssxref("border-collapse")}}；並對 {{HTMLElement("td")}} 使用 {{cssxref("padding")}}。</p> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt> + <dd> + <p>This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.</p> + + <p>To achieve a similar effect, apply the {{cssxref("border-spacing")}} property to the <code><table></code> element. <code>border-spacing</code> does not have any effect if {{cssxref("border-collapse")}} is set to collapse.</p> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt> + <dd>這個枚舉屬性定義圍繞在表格邊框的哪一邊要顯示。在 CSS 要得出類似效果，應該使用 {{cssxref("border-style")}} 與 {{cssxref("border-width")}} 屬性。</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("rules")}} {{Deprecated_inline}}</dt> + <dd>這個枚舉屬性定義諸如線條之類的規則，要如何出現在表格。它擁有以下數值： + <ul> + <li><code>none</code>，代表沒有任何規則上的指示。這是預設值。</li> + <li><code>groups</code>，只標示行群組和列群組（行群組由 {{HTMLElement("thead")}}、{{HTMLElement("tbody")}}、和 {{HTMLElement("tfoot")}} 定義；列群組由 {{HTMLElement("col")}} 與 {{HTMLElement("colgroup")}} 定義）；</li> + <li><code>rows</code>，會創立一組標示行的規則；</li> + <li><code>columns</code>，會創立一組標示列的規則；</li> + <li><code>all</code>，會創立一組同時標示行與列的規則。</li> + </ul> + + <p>在 CSS 要得出類似效果，應該針對 {{HTMLElement("thead")}}、{{HTMLElement("tbody")}}、{{HTMLElement("tfoot")}}、{{HTMLElement("col")}}、{{HTMLElement("colgroup")}} 元素使用 {{cssxref("border")}} 屬性。</p> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt> + <dd>這個屬性定義了總結表格的替代文字。請改用 {{htmlelement("caption")}} 元素。</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt> + <dd>這個屬性定義了表格的寬度。請改用 CSS {{cssxref("width")}} 屬性。</dd> +</dl> + +<h2 id="範例">範例</h2> + +<h3 id="簡單的表格">簡單的表格</h3> + +<pre class="brush: html notranslate"><table> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> +</pre> + +<p>{{EmbedLiveSample('簡單的表格', '100%', '100', '', 'Web/HTML/Element/table')}}</p> + +<h3 id="更多範例">更多範例</h3> + +<pre class="brush: html notranslate"><p>Simple table with header</p> +<table> + <tr> + <th>First name</th> + <th>Last name</th> + </tr> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> + +<p>Table with thead, tfoot, and tbody</p> +<table> + <thead> + <tr> + <th>Header content 1</th> + <th>Header content 2</th> + </tr> + </thead> + <tfoot> + <tr> + <td>Footer content 1</td> + <td>Footer content 2</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Body content 1</td> + <td>Body content 2</td> + </tr> + </tbody> +</table> + +<p>Table with colgroup</p> +<table> + <colgroup span="4"></colgroup> + <tr> + <th>Countries</th> + <th>Capitals</th> + <th>Population</th> + <th>Language</th> + </tr> + <tr> + <td>USA</td> + <td>Washington D.C.</td> + <td>309 million</td> + <td>English</td> + </tr> + <tr> + <td>Sweden</td> + <td>Stockholm</td> + <td>9 million</td> + <td>Swedish</td> + </tr> +</table> + +<p>Table with colgroup and col</p> +<table> + <colgroup> + <col style="background-color: #0f0"> + <col span="2"> + </colgroup> + <tr> + <th>Lime</th> + <th>Lemon</th> + <th>Orange</th> + </tr> + <tr> + <td>Green</td> + <td>Yellow</td> + <td>Orange</td> + </tr> +</table> + +<p>Simple table with caption</p> +<table> + <caption>Awesome caption</caption> + <tr> + <td>Awesome data</td> + </tr> +</table> +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">table +{ +border-collapse: collapse; +border-spacing: 0px; +} +table, th, td +{ +padding: 5px; +border: 1px solid black; +}</pre> +</div> + +<p>{{EmbedLiveSample('更多範例', '100%', '700', '', 'Web/HTML/Element/table')}}</p> + +<h2 id="無障礙議題">無障礙議題</h2> + +<h3 id="Caption">Caption</h3> + +<p>提供 {{HTMLElement("caption")}} 元素，以便清晰而簡潔地描述表格主旨。他能讓用戶決定自己是否該閱讀表格內容，還是要略過就好。</p> + +<p>如此也能幫助螢幕閱讀器之類的輔具使用者、視力條件差、還有認知障礙的人。</p> + +<ul> + <li><a href="/zh-TW/docs/Learn/HTML/Tables/Advanced#Adding_a_caption_to_your_table_with_<caption>">MDN Adding a caption to your table with <caption></a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/caption-summary/">Caption & Summary • Tables • W3C WAI Web Accessibility Tutorials</a></li> +</ul> + +<h3 id="Scope_行列">Scope 行列</h3> + +<p>雖然在 HTML5 裡面 {{htmlattrxref("scope", "td")}} 屬性已經過時，但很多螢幕閱讀器會利用這屬性，複製不使用屏幕閱讀器的人的視覺關聯，以便推斷可能的視覺位置。</p> + +<h4 id="示例">示例</h4> + +<pre class="brush: html notranslate"><table> + <caption>Color names and values</caption> + <tbody> + <tr> + <th scope="col">Name</th> + <th scope="col">HEX</th> + <th scope="col">HSLa</th> + <th scope="col">RGBa</th> + </tr> + <tr> + <th scope="row">Teal</th> + <td><code>#51F6F6</code></td> + <td><code>hsla(180, 90%, 64%, 1)</code></td> + <td><code>rgba(81, 246, 246, 1)</code></td> + </tr> + <tr> + <th scope="row">Goldenrod</th> + <td><code>#F6BC57</code></td> + <td><code>hsla(38, 90%, 65%, 1)</code></td> + <td><code>rgba(246, 188, 87, 1)</code></td> + </tr> + </tbody> +</table> +</pre> + +<p>在 {{HTMLElement("th")}} 元素提供 <code>scope="col"</code> 的宣告，有助於描述該單位屬於第一列。在 {{HTMLElement("td")}} 元素提供 <code>scope="row"</code> 則有助於描述該單位屬於第一行。</p> + +<ul> + <li><a href="/zh-TW/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/two-headers/">Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/irregular/">Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H63.html">H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0</a></li> +</ul> + +<h3 id="複雜的表格">複雜的表格</h3> + +<p>針對單格複雜到無法歸類於直向或橫向的表格，諸如螢幕閱讀器之類的輔助技術，可能就無法解析。在這種情況下，通常就需要 {{htmlattrxref("colspan", "td")}} 與 {{htmlattrxref("rowspan", "td")}} 屬性。</p> + +<p>理想情況下，可以考慮使用其他方式來呈現表格的內容，例如把表格切分到不必依賴 <code>colspan</code> 和 <code>rowspan</code> 屬性。除了幫助使用輔助技術的人了解表格的內容之外，這樣也會使認知障礙者受益，因為他們可能難以理解表格佈局描述的關聯。</p> + +<p><code>如果表格無法切分，請結合 {{htmlattrxref("id")}} 與 {{htmlattrxref("headers", "td")}} 使用，以便程序化地關聯各表格單位與標題。</code></p> + +<ul> + <li><code><a href="/zh-TW/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></code></li> + <li><code><a href="https://www.w3.org/WAI/tutorials/tables/multi-level/">Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials</a></code></li> + <li><code><a href="https://www.w3.org/TR/WCAG20-TECHS/H43.html">H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0</a></code></li> +</ul> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">狀態</th> + <th scope="col">註解</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性"><code>瀏覽器相容性</code></h2> + +<p>{{Compat("html.elements.table")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>CSS properties that may be especially useful to style the <code><table></code> element: + + <ul> + <li>{{cssxref("width")}} to control the width of the table;</li> + <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} to control the aspect of cell borders, rules and frame;</li> + <li>{{cssxref("margin")}} and {{cssxref("padding")}} to style the individual cell content;</li> + <li>{{cssxref("text-align")}} and {{cssxref("vertical-align")}} to define the alignment of text and cell content.</li> + </ul> + </li> +</ul> diff --git a/files/zh-tw/web/html/element/template/index.html b/files/zh-tw/web/html/element/template/index.html new file mode 100644 index 0000000000..8433155dba --- /dev/null +++ b/files/zh-tw/web/html/element/template/index.html @@ -0,0 +1,145 @@ +--- +title: <template> +slug: Web/HTML/Element/template +translation_of: Web/HTML/Element/template +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><template></code> 元素</strong>是用作保存用戶端內容的機制。該內容在頁面載入時不受渲染，但可以在運行時使用 JavaScript 實例化。</span></p> + +<p>你可以把 template 想成文件裡面，被儲存以待稍後使用的內容片段。在頁面載入時，解析器雖然會處理 <code><template></code> 元件的內容，但元素本身並不會被渲染。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-TW/docs/Web/HTML/Content_categories">內容類型</a></th> + <td><a href="/zh-TW/docs/Web/HTML/Content_categories#Metadata_content">元內容</a>、<a href="/zh-TW/docs/Web/HTML/Content_categories#Flow_content">流內容</a>、<a href="/zh-TW/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>、支援腳本的元素</td> + </tr> + <tr> + <th scope="row">允許內容</th> + <td>沒有限制</td> + </tr> + <tr> + <th scope="row">標籤省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允許的父元素</th> + <td>{{HTMLElement("body")}}, {{HTMLElement("frameset")}}, {{HTMLElement("head")}}, {{HTMLElement("dl")}} and {{HTMLElement("colgroup")}} without a <code>span</code> attribute</td> + </tr> + <tr> + <th scope="row">允許的 ARIA roles</th> + <td>無</td> + </tr> + <tr> + <th scope="row">DOM 介面</th> + <td>{{domxref("HTMLTemplateElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="屬性">屬性</h2> + +<p>本元素只允許<a href="/zh-TW/docs/Web/HTML/Global_attributes">全域屬性</a>。</p> + +<h2 id="示例">示例</h2> + +<p>我們先從 HTML 部分開始。</p> + +<pre class="brush: html"><table id="producttable"> + <thead> + <tr> + <td>UPC_Code</td> + <td>Product_Name</td> + </tr> + </thead> + <tbody> + <!-- 在這裡可以選擇性地包括既有資料 --> + </tbody> +</table> + +<template id="productrow"> + <tr> + <td class="record"></td> + <td></td> + </tr> +</template> +</pre> + +<p>首先，我們有個稍後將透過 JavaScript 插入的表格。接著，我們把重點轉移到描述 HTML 內容模板結構的 template：它意味著一個表格的行。</p> + +<p>現在表格已經建立、也定義了模板，所以我們將以 template 為基礎，用 JavaScript 把每個產生出來的行加到表格內。</p> + +<pre class="brush:js;">// 透過檢查 HTML template 元素屬性的存在與否，以測試瀏覽器是否支援它 +if ('content' in document.createElement('template')) { + + // 使用現有 HTML tbody、行以及模板，來實例化表格 + var t = document.querySelector('#productrow'), + td = t.content.querySelectorAll("td"); + td[0].textContent = "1235646565"; + td[1].textContent = "Stuff"; + + // 複製新的行並將其插至表格 + var tb = document.querySelector("tbody"); + var clone = document.importNode(t.content, true); + tb.appendChild(clone); + + // 複製新的行 + td[0].textContent = "0384928528"; + td[1].textContent = "Acme Kidney Beans"; + + // 複製新的行並將其插至表格 + var clone2 = document.importNode(t.content, true); + tb.appendChild(clone2); + +} else { + // 因為 HTML template 不被支援，所以要用其他方法在表格增加新行 +} +</pre> + +<p>結果會變成原生的 HTML 表格，它透過 JavaScript 產生了兩個新行：</p> + +<div class="hidden"> +<pre class="brush: css">table { + background: #000; +} +table td { + background: #fff; +}</pre> +</div> + +<p>{{EmbedLiveSample("Example", 500, 120)}}</p> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">狀態</th> + <th scope="col">註解</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','scripting.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初始定義</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + + + +<p>{{Compat("html.elements.template")}}</p> + +<h2 id="參閱">參閱</h2> + +<ul> + <li>Web component：{{HTMLElement("slot")}}（還有過往的{{HTMLElement("shadow")}}）</li> +</ul> diff --git a/files/zh-tw/web/html/element/time/index.html b/files/zh-tw/web/html/element/time/index.html new file mode 100644 index 0000000000..53fac916a8 --- /dev/null +++ b/files/zh-tw/web/html/element/time/index.html @@ -0,0 +1,162 @@ +--- +title: <time> +slug: Web/HTML/Element/time +translation_of: Web/HTML/Element/time +--- +<p><strong>HTML <code><time></code> element</strong> 用以表示時間，可以是24小時制時間或以<a class="external" href="https://zh.wikipedia.org/zh-tw/%E5%85%AC%E5%8E%86" title="公曆">公曆</a>紀年的日期（日期可以添加時間和時區的資訊）</p> + +<p>此 element 旨在以機器可讀的格式顯示時間。這能幫助使用者代理調度使用者的日期。</p> + +<div class="note"><strong>使用注意: </strong>此 element 不適合用在「不確定正確時間」和「時間為西元前（日期的計算會出現錯誤）」的情況。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-TW/docs/Web/HTML/Content_categories" title="HTML/Content_categories">內容分類</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">允許之內容</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">省略標籤</th> + <td> + <p>不可。</p> + + <p>起始標籤和結束標籤是強制必要的</p> + </td> + </tr> + <tr> + <th scope="row">可接受的副 elements</th> + <td>任何接受 phrasing content 的 element。</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTimeElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>和其他HTML elements一樣，接受所有 <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>。</p> + +<dl> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>此 attribute 用以表示日期或時間，其格式必須是<a class="external" href="http://www.w3.org/TR/html-markup/datatypes.html#common.data.datetime" title="">有效的日期/時間格式</a>。若其值不正確，則 element 就不會有關連的 time stamp.</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Simple_example" name="Simple_example">Simple example</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>The concert starts at <time>20:00</time>.</p> +</pre> + +<h4 id="Output">Output</h4> + +<p>{{ EmbedLiveSample('Simple_example', 250, 60) }}</p> + +<h3 id="Datetime_example" name="Datetime_example"><code>datetime</code> example</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>The concert took place on <time datetime="2001-05-15T19:00">May 15</time>.</p> +</pre> + +<h4 id="Output_2">Output</h4> + +<p>{{ EmbedLiveSample('Datetime_example', 250, 60) }}</p> + +<h2 id="Specifications" name="Specifications">規格</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'grouping-content.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器支援度">瀏覽器支援度</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>33.0</td> + <td>{{CompatGeckoDesktop("22.0")}}</td> + <td>9.0</td> + <td>22.0</td> + <td>7.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>10.0</td> + <td>11.50<br> + Removed in 15.0</td> + <td>4.0-4.1</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">延伸閱讀</h2> + +<ul> + <li>The {{HTMLElement("data")}} element, allowing to signal other kind of values.</li> +</ul> + +<p>{{HTMLRef}}</p> |