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 | |
| 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')
39 files changed, 7854 insertions, 0 deletions
diff --git a/files/zh-tw/web/html/applying_color/index.html b/files/zh-tw/web/html/applying_color/index.html new file mode 100644 index 0000000000..4e9aa26498 --- /dev/null +++ b/files/zh-tw/web/html/applying_color/index.html @@ -0,0 +1,502 @@ +--- +title: Applying color to HTML elements using CSS +slug: Web/HTML/Applying_color +translation_of: Web/HTML/Applying_color +--- +<div>{{HTMLRef}}</div> + +<p>The use of color is a fundamental form of human expression. Children experiment with color before they even have the manual dexterity to draw. Maybe that's why color is one of the first things people often want to experiment with when learning to develop web sites. <span class="seoSummary">With <a href="/en-US/docs/Web/CSS">CSS</a>, there are lots of ways to add color to your <a href="/en-US/docs/Web/HTML">HTML</a> <a href="/en-US/docs/Web/HTML/Element">elements</a> to create just the look you want. This article is a primer introducing each of the ways CSS color can be used in HTML.</span></p> + +<p>Fortunately, adding color to your HTML is actually really easy to do, and you can add color to nearly anything.</p> + +<p>We're going to touch on most of what you'll need to know when using color, including a {{anch("Things that can have color", "list of what you can color and what CSS properties are involved")}}, {{anch("How to describe a color", "how you describe colors")}}, and how to actually {{anch("Using color", "use colors both in stylesheets and in scripts")}}. We'll also take a look at how to {{anch("Letting the user picka color", "let the user pick a color")}}.</p> + +<p>Then we'll wrap things up with a brief discussion of how to {{anch("Using color wisely", "use color wisely")}}: how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities.</p> + +<h2 id="Things_that_can_have_color">Things that can have color</h2> + +<p>At the element level, everything in HTML can have color applied to it. Instead, let's look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. For each, we'll see a list of the CSS properties that apply color to them.</p> + +<p>At a fundamental level, the {{cssxref("color")}} property defines the foreground color of an HTML element's content and the {{cssxref("background-color")}} property defines the element's background color. These can be used on just about any element.</p> + +<h3 id="Text">Text</h3> + +<p>Whenever an element is rendered, these properties are used to determine the color of the text, its background, and any decorations on the text.</p> + +<dl> + <dt>{{cssxref("color")}}</dt> + <dd>The color to use when drawing the text and any <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration">text decorations</a> (such as the addition of under- or overlines, strike-through lines, and so forth.</dd> + <dt>{{cssxref("background-color")}}</dt> + <dd>The text's background color.</dd> + <dt>{{cssxref("text-shadow")}}</dt> + <dd>Configures a shadow effect to apply to text. Among the options for the shadow is the shadow's base color (which is then blurred and blended with the background based on the other parameters). See {{SectionOnPage("/en-US/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}} to learn more.</dd> + <dt>{{cssxref("text-decoration-color")}}</dt> + <dd>By default, text decorations (such as underlines, strikethroughs, etc) use the <code>color</code> property as their colors. However, you can override that behavior and use a different color for them with the <code>text-decoration-color</code> property.</dd> + <dt>{{cssxref("text-emphasis-color")}}</dt> + <dd>The color to use when drawing emphasis symbols adjacent to each character in the text. This is used primarily when drawing text for East Asian languages.</dd> + <dt>{{cssxref("caret-color")}}</dt> + <dd>The color to use when drawing the {{Glossary("caret")}} (sometimes referred to as the text input cursor) within the element. This is only useful in elements that are editable, such as {{HTMLElement("input")}} and {{HTMLElement("textarea")}} or elements whose HTML {{htmlattrxref("contenteditable")}} attribute is set.</dd> +</dl> + +<h3 id="Boxes">Boxes</h3> + +<p>Every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have.</p> + +<dl> + <dt>{{anch("Borders")}}</dt> + <dd>See the section {{anch("Borders")}} for a list of the CSS properties you can use to set the colors of a box's borders.</dd> + <dt>{{cssxref("background-color")}}</dt> + <dd>The background color to use in areas of the element that have no foreground content.</dd> + <dt>{{cssxref("column-rule-color")}}</dt> + <dd>The color to use when drawing the line separating columns of text.</dd> + <dt>{{cssxref("outline-color")}}</dt> + <dd>The color to use when drawing an outline around the outside of the element. This outline is different from the border in that it doesn't get space set aside for it in the document (so it may overlap other content). It's generally used as a focus indicator, to show which element will receive input events.</dd> +</dl> + +<h3 id="Borders">Borders</h3> + +<p>Any element can have a <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">border</a> drawn around it. A basic element border is a line drawn around the edges of the element's content. See {{SectionOnPage("/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} to learn about the relationship between elements and their borders, and the article <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Styling borders using CSS</a> to learn more about applying styles to borders.</p> + +<p>You can use the {{cssxref("border")}} shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its <a href="/en-US/docs/Web/CSS/border-width">width</a>, <a href="/en-US/docs/Web/CSS/border-style">style</a> (solid, dashed, etc.), and so forth.</p> + +<dl> + <dt>{{cssxref("border-color")}}</dt> + <dd>Specifies a single color to use for every side of the element's border.</dd> + <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}</dt> + <dd>Lets you set the color of the corresponding side of the element's border.</dd> + <dt>{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}</dt> + <dd>With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends).</dd> + <dt>{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}</dt> + <dd>These let you color the edges of the border closest to to the beginning and the end of the start of lines of text within the box. Which side this is will vary depending on the {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. For example, if the box's text is being rendered right-to-left, then the <code>border-inline-start-color</code> is applied to the right side of the border.</dd> +</dl> + +<h3 id="Other_ways_to_use_color">Other ways to use color</h3> + +<p>CSS isn't the only web technology that supports color. There are graphics technologies that are available on the web which also support color.</p> + +<dl> + <dt>The HTML <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></dt> + <dd>Lets you draw 2D bitmapped graphics in a {{HTMLElement("canvas")}} element. See our <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> to learn more.</dd> + <dt><a href="/en-US/docs/Web/SVG">SVG</a> (Scalable Vector Graphics)</dt> + <dd>Lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image. SVG commands are formatted as XML, and can be embedded directly into a web page or can be placed in he page using the {{HTMLElement("img")}} element, just like any other type of image.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt> + <dd>The Web Graphics Library is an OpenGL ES-based API for drawing high-performance 2D and 3D graphics on the Web. See <a href="/en-US/docs/Learn/WebGL">Learn WebGL for 2D and 3D</a> graphics to find out more.</dd> +</dl> + +<h2 id="How_to_describe_a_color">How to describe a color</h2> + +<p>In order to represent a color in CSS, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. This is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. As such, there are several ways you can describe color in CSS.</p> + +<p>For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("<color>")}} unit.</p> + +<h3 id="Keywords">Keywords</h3> + +<p>A set of standard color names have been defined, letting you use these keywords instead of numeric representations of colors if you choose to do so and there's a keyword representing the exact color you want to use. Color keywords include the standard primary and secondary colors (such as <code>red</code>, <code>blue</code>, or <code>orange</code>), shades of gray (from <code>black</code> to <code>white</code>, including colors like <code>darkgray</code> and <code>lightgrey</code>), and a variety of other blended colors including <code>lightseagreen</code>, <code>cornflowerblue</code>, and <code>rebeccapurple</code>.</p> + +<p>See {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords.</p> + +<h3 id="RGB_values">RGB values</h3> + +<p>There are three ways to represent an RGB color in CSS.</p> + +<h4 id="Hexadecimal_string_notation">Hexadecimal string notation</h4> + +<p>Hexadecimal string notation represents a color using hexadecimal digits to represent each of the color components (red, green, and blue). It may also include a fourth component: the alpha channel (or opacity). Each color component can be represented as a number between 0 and 255 (0x00 and 0xFF) or, optionally, as a number between 0 and 15 (0x0 and 0xF). All components <em>must</em> be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component's digit twice; that is, <code>"#D"</code> becomes <code>"#DD"</code> when drawing.</p> + +<p>A color in hexadecimal string notation always begins with the character <code>"#"</code>. After that come the hexadecimal digits of the color code. The string is case-insensitive.</p> + +<dl> + <dt><code>"#rrggbb"</code></dt> + <dd>Specifies a fully-opaque color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd> + <dt><code>"#rrggbbaa"</code></dt> + <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd> + <dt><code>"#rgb"</code></dt> + <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd> + <dt><code>"#rgba"</code></dt> + <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd> +</dl> + +<p>As an example, you can represent the opaque color bright blue as <code>"#0000ff"</code> or <code>"#00f"</code>. To make it 25% opaque, you can use <code>"#0000ff44"</code> or <code>"#00f4"</code>.</p> + +<h4 id="RGB_functional_notation">RGB functional notation</h4> + +<p>RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colors using their red, green, and blue components (as well as, optionally, an alpha channel component for opacity). However, instead of using a string, the color is defined using the CSS function {{cssxref("color_value", "rgb()", "#rgb()")}}. This function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel.</p> + +<p>Legal values for each of these parameters are:</p> + +<dl> + <dt><code>red</code>, <code>green</code>, and <code>blue</code></dt> + <dd>Each must be an {{cssxref("<integer>")}} value between 0 and 255 (inclusive), or a {{cssxref("<percentage>")}} from 0% to 100%.</dd> + <dt><code>alpha</code></dt> + <dd>The alpha channel is a number between 0.0 (fully transparent) and 1.0 (fully opaque). You can also specify a percentage where 0% is the same as 0.0 and 100% is the same as 1.0.</dd> +</dl> + +<p>For example, a bright red that's 50% opaque can be represented as <code>rgb(255, 0, 0, 0.5)</code> or <code>rgb(100%, 0, 0, 50%)</code>.</p> + +<h3 id="HSL_functional_notation">HSL functional notation</h3> + +<p>Designers and artists often prefer to work using the {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) color method. On the web, HSL colors are represented using HSL functional notation. The <code>hsl()</code> CSS function is very similar to the <code>rgb()</code> function in usage otherwise.</p> + +<div style="padding-bottom: 20px;"> +<figure style="width: 500px;"><img alt="HSL color cylinder" src="https://mdn.mozillademos.org/files/15445/1200px-HSL_color_solid_cylinder_alpha_lowgamma.png" style="height: 375px; width: 500px;"> +<figcaption><em><strong>Figure 1. An HSL color cylinder.</strong> Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Image courtesy of user <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> on <a href="https://www.wikipedia.org/">Wikipedia</a>, distributed under the <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> license.</em></figcaption> +</figure> +</div> + +<p>The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any {{cssxref("<angle>")}} unit supported by CSS, including degrees (<code>deg</code>), radians (<code>rad</code>), gradians (<code>grad</code>), or turns (<code>turn</code>). But this doesn't control how vivid or dull, or how bright or dark the color is.</p> + +<p>The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.</p> + +<p>Think of it like creating the perfect paint color:</p> + +<ol> + <li>You start with base paint that's the maximum intensity possible for a given color, such as the most intense blue that can be represented by the user's screen. This is the <strong>hue</strong> (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.</li> + <li>Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white. (regardless of the saturation or hue). In between values are a literal grey area.</li> + <li>Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation.</li> +</ol> + +<p>You can also optionally include an alpha channel, to make the color less than 100% opaque.</p> + +<p>Here are some sample colors in HSL notation:</p> + +<div id="hsl-swatches"> +<div class="hidden"> +<pre class="brush: css">table { + border: 1px solid black; + font: 16px "Open Sans", Helvetica, Arial, sans-serif; + border-spacing: 0; + border-collapse: collapse; +} + +th, td { + border: 1px solid black; + padding:4px 6px; + text-align: left; +} + +th { + background-color: hsl(0, 0%, 75%); +}</pre> + +<pre class="brush: html"><table> + <thead> + <tr> + <th scope="col">Color in HSL notation</th> + <th scope="col">Example</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>hsl(90deg, 100%, 50%)</code></td> + <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(90, 100%, 50%)</code></td> + <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 50%, 75%)</code></td> + <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 90%, 75%)</code></td> + <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 90%, 50%)</code></td> + <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(270deg, 90%, 50%)</code></td> + <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td> + </tr> + </tbody> +</table></pre> +</div> + +<p>{{EmbedLiveSample("hsl-swatches", 300, 260)}}</p> +</div> + +<div class="note"> +<p>Note that when you omit the hue's unit, it's assumed to be in degrees (<code>deg</code>).</p> +</div> + +<h2 id="Using_color">Using color</h2> + +<p>Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under {{anch("Things that can have color")}}, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.</p> + +<h3 id="Specifying_colors_in_stylesheets">Specifying colors in stylesheets</h3> + +<p>The easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.</p> + +<p>Let's take a look at an example, starting by looking at the results we're trying to achieve:</p> + +<div>{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}</div> + +<h4 id="HTML">HTML</h4> + +<p>The HTML responsible for creating the above example is shown here:</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="box boxLeft"> + <p> + This is the first box. + </p> + </div> + <div class="box boxRight"> + <p> + This is the second box. + </p> + </div> +</div></pre> + +<p>This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <code><div></code>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.</p> + +<p>The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.</p> + +<h4 id="CSS">CSS</h4> + +<p>We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.</p> + +<pre class="brush: css">.wrapper { + width: 620px; + height: 110px; + margin: 0; + padding: 10px; + border: 6px solid mediumturquoise; +}</pre> + +<p>The <code>.wrapper</code> class is used to assign styles to the {{HTMLElement("div")}} that encloses all of our other content. This establishes thesize of the container using {{cssxref("width")}} and {{cssxref("height")}} as well as its {{cssxref("margin")}} and {{cssxref("padding")}}.</p> + +<p>Of more interest to our discussion here is the use of the {{cssxref("border")}} property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color <code>mediumturquoise</code>.</p> + +<p>Our two colored boxes share a number of properties in common, so next we establish a class, <code>.box</code>, that defines those shared properties:</p> + +<pre class="brush: css">.box { + width: 290px; + height: 100px; + margin: 0; + padding: 4px 6px; + font: 28px "Marker Felt", "Zapfino", cursive; + display: flex; + justify-content: center; + align-items: center; +}</pre> + +<p>In brief, <code>.box</code> establishes the size of each box, as well as the configuration of the font used within. We also take advantage of <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox</a> to easily center the contents of each box. We enable <code>flex</code> mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to <code>center</code>. Then we can create a class for each of the two boxes that defines the propeties that differ between the two.</p> + +<pre class="brush: css">.boxLeft { + float: left; + background-color: rgb(245, 130, 130); + outline: 2px solid darkred; +}</pre> + +<p>The <code>.boxLeft</code> class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:</p> + +<ul> + <li>The box's background color is set by changing the value of the CSS {{cssxref("background-color")}} property to <code>rgb(245, 130, 130)</code>.</li> + <li>An outline is defined for the box. Unlike the more commonly used <code>border</code>, {{cssxref("outline")}} doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as <code>border</code> does. This outline is a solid, dark red line that's two pixels thick. Note the use of the <code>darkred</code> keyword when specifying the color.</li> + <li>Notice that we're not explicitly setting the text color. That means the value of {{cssxref("color")}} will be inherited from the nearest containing element that defines it. By default, that's black.</li> +</ul> + +<pre class="brush: css">.boxRight { + float: right; + background-color: hsl(270deg, 50%, 75%); + outline: 4px dashed rgb(110, 20, 120); + color: hsl(0deg, 100%, 100%); + text-decoration: underline wavy #88ff88; + text-shadow: 2px 2px 3px black; +}</pre> + +<p>Finally, the <code>.boxRight</code> class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:</p> + +<ul> + <li>The <code>background-color</code> is set using the HSL value specified using <code>hsl(270deg, 50%, 75%)</code>. This is a medium purple color.</li> + <li>The box's <code>outline</code> is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (<code>rgb(110, 20, 120)</code>).</li> + <li>The foreground (text) color is specified by setting the {{cssxref("color")}} property to <code>hsl(0deg, 100%, 100%)</code>. This is one of many ways to specify the color white.</li> + <li>We add a green wavy line under the text with {{cssxref("text-decoration")}}.</li> + <li>Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its <code>color</code> parameter is set to <code>black</code>.</li> +</ul> + +<h2 id="Letting_the_user_pick_a_color">Letting the user pick a color</h2> + +<p>There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using <code>"color"</code> as the value of its {{htmlattrxref("type", "input")}} attribute.</p> + +<p>The <code><input></code> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.</p> + +<h3 id="Example_Picking_a_color">Example: Picking a color</h3> + +<p>Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.</p> + +<p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p> + +<div class="note"> +<p>On macOS, you indicate that you've finalized selection of the color by closing the color picker window.</p> +</div> + +<h4 id="HTML_2">HTML</h4> + +<p>The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code.</p> + +<pre class="brush: html"><div id="box"> + <label for="colorPicker">Border color:</label> + <input type="color" value="#8888ff" id="colorPicker"> + <p id="output"></p> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<p>The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...</p> + +<pre class="brush: css">#box { + width: 500px; + height: 200px; + border: 2px solid rgb(245, 220, 225); + padding: 4px 6px; + font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif" +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the <code><a href="/en-US/docs/Web/HTML/Element/input/color"><input type="color"></a></code> element.</p> + +<pre class="brush: js">let colorPicker = document.getElementById("colorPicker"); +let box = document.getElementById("box"); +let output = document.getElementById("output"); + +box.style.borderColor = colorPicker.value; + +colorPicker.addEventListener("input", function(event) { + box.style.borderColor = event.target.value; +}, false); + +colorPicker.addEventListener("change", function(event) { + output.innerText = "Color set to " + colorPicker.value + "."; +}, false);</pre> + +<p>The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.</p> + +<p>The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <code><p></code> element with the ID <code>"output"</code> to a string describing the finally selected color.</p> + +<h2 id="Using_color_wisely">Using color wisely</h2> + +<p>Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.</p> + +<h3 id="Finding_the_right_colors">Finding the right colors</h3> + +<p>Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.</p> + +<h4 id="Base_color">Base color</h4> + +<p>The first step is to choose your <strong>base color</strong>. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:</p> + +<ul> + <li>A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.</li> + <li>A color that comes from imagery associated with what your content is about. If you're creating a web site about a given item or product, choose a color that's physically present on that item.</li> + <li>Browse web sites that let you look at lots of existing color palettes and images to find inspiration.</li> +</ul> + +<p>When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site <a href="http://www.colorzilla.com/">ColorZilla</a> offers an extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.</p> + +<div class="note"> +<p>The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.</p> +</div> + +<h4 id="Fleshing_out_the_palette">Fleshing out the palette</h4> + +<p>Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.</p> + +<p>A few examples (all free to use as of the time this list was last revised):</p> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN's color picker tool</a></li> + <li><a href="http://paletton.com">Paletton</a></li> + <li><a href="https://color.adobe.com/create/color-wheel">Adobe Color CC online color wheel</a></li> +</ul> + +<p>When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.</p> + +<div class="note"> +<p>Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.</p> +</div> + +<h3 id="Color_theory_resources">Color theory resources</h3> + +<p>A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:</p> + +<dl> + <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">Color Science</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> in association with <a href="https://www.pixar.com/">Pixar</a>)</dt> + <dd>An online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.</dd> + <dt>{{interwiki("wikipedia", "Color theory")}} on Wikipedia</dt> + <dd>Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color sleection process, but is still full of useful information.</dd> +</dl> + +<h3 id="Color_and_accessibility">Color and accessibility</h3> + +<p>There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.</p> + +<p>You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.</p> + +<div class="note"> +<p>The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.</p> +</div> + +<p>For more information about color blindness, see the following articles:</p> + +<ul> + <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a> (United States National Institute of Health)</li> + <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li> + <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness & Web Design</a> (Usability.gov: United States Department of Health and Human Services)</li> +</ul> + +<h3 id="Palette_design_example">Palette design example</h3> + +<p>Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a <a href="https://www.google.com/search?q=Mars&tbm=isch">Google search for photos of Mars</a>. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.</p> + +<p>Using an eyedropper tool, we identify a color we like and determine that the color in question is <code>#D79C7A</code>, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.</p> + +<p>Having selected our base color, we need to build out our palette. We decide to use <a href="http://www.paletton.com/">Paletton</a> to come up with the other colors we need. Upon opening Paletton, we see:</p> + +<p><img alt="Right after loading Paletton." src="https://mdn.mozillademos.org/files/15451/paletton1.png" style="height: 361px; width: 600px;"></p> + +<p>Next, we enter our color's hex code (<code>D79C7A</code>) into the "Base RGB" box at the bottom-left corner of the tool:</p> + +<p><img alt="After entering base color" src="https://mdn.mozillademos.org/files/15453/paletton2.png" style="height: 361px; width: 600px;"></p> + +<p>We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is <code>#508D7C</code>.</p> + +<p><img alt="Now with complementary colors included." src="https://mdn.mozillademos.org/files/15455/paletton3.png" style="height: 361px; width: 600px;"></p> + +<p>If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:</p> + +<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15457/paletton4.png" style="height: 361px; width: 600px;"></p> + +<p>That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's <code>#556E8D</code>. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:</p> + +<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15459/paletton-color-detail.png" style="height: 370px; width: 526px;"></p> + +<p>Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.</p> + +<p>Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.</p> + +<h3 id="Color_backgrounds_contrast_and_printing">Color, backgrounds, contrast, and printing</h3> + +<p>What looks good on screen may look very different on paper. In addition, ink can be expensive, and if a user is printing your page, they don't necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself. Most browsers, by default, remove background images when printing documents.</p> + +<p>If your background colors and images have been selected carefully and/or are crucial to the usefulness of the content, you can use the CSS {{cssxref("color-adjust")}} property to tell the browser that it should not make adjustments to the appearance of content.</p> + +<p>The default value of <code>color-adjust</code>, <code>economy</code>, indicates that the browser is allowed to make appearance changes as it deems necessary in order to try to optimize the legibility and/or print economy of the content, given the type of output device the document is being drawn onto.</p> + +<p>You can set <code>color-adjust</code> to <code>exact</code> to tell the browser that the element or elements on which you use it have been designed specifically to best work with the colors and images left as they are. With this set, the browser won't tamper with the appearance of the element, and will draw it as indicated by your CSS.</p> + +<div class="note"> +<p><strong>Note:</strong> There is no guarantee, though, that <code>color-adjust: exact</code> will result in your CSS being used exactly as given. If the browser provides user preferences to change the output (such as a "don't print backgrounds" checkbox in a print dialog box), that overrides the value of <code>color-adjust</code>.</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li> + <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li> + <li><a href="/en-US/docs/Tools/DevToolsColors">MDN's color picker tool</a></li> +</ul> diff --git a/files/zh-tw/web/html/attributes/index.html b/files/zh-tw/web/html/attributes/index.html new file mode 100644 index 0000000000..834f36b4a9 --- /dev/null +++ b/files/zh-tw/web/html/attributes/index.html @@ -0,0 +1,643 @@ +--- +title: HTML attribute reference +slug: Web/HTML/Attributes +translation_of: Web/HTML/Attributes +--- +<p>HTML 中的元素具有<strong>屬性 </strong>; 而這些屬性可以藉由各種方式去設定元素或調整它們的行為，以符合使用者的期待。</p> + +<h2 id="屬性列表">屬性列表</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>屬性名稱</th> + <th>元素</th> + <th>描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>hidden</code></td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td>避免呈現給定的元素，並且保持子元素，例如 script elements、active。</td> + </tr> + <tr> + <td><code>high</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>指示下界的上限範圍。</td> + </tr> + <tr> + <td><code>href</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td> + <td>連結資源的 URL。</td> + </tr> + <tr> + <td><code>hreflang</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>指定連結資源的語言。</td> + </tr> + <tr> + <td><code>http-equiv</code></td> + <td>{{ HTMLElement("meta") }}</td> + <td> </td> + </tr> + <tr> + <td><code>icon</code></td> + <td>{{ HTMLElement("command") }}</td> + <td>指定呈現指令的圖片。</td> + </tr> + <tr> + <td><code>id</code></td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td>經常和 CSS 一起被用來設計特定元素。這個屬性的值必須是唯一的。</td> + </tr> + <tr> + <td><code>ismap</code></td> + <td>{{ HTMLElement("img") }}</td> + <td>指示該圖像是伺服器端之影像地圖的一部分。</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td> </td> + </tr> + <tr> + <td><code>keytype</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td>指定所生成密鑰的類型。</td> + </tr> + <tr> + <td><code>kind</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>指明文章 track 的類型。</td> + </tr> + <tr> + <td><code>label</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>指明文章 track 的使用者可讀之標題。</td> + </tr> + <tr> + <td><code>lang</code></td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td>定義該元素中所使用的語言。</td> + </tr> + <tr> + <td><code>language</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>定義該元素中所使用的腳本語言。</td> + </tr> + <tr> + <td><code>list</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>指示一串預先定義的選項供使用者參考。</td> + </tr> + <tr> + <td><code>loop</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td> + <td>指示當媒體完成時，是否應該從一開始的時候播放。</td> + </tr> + <tr> + <td><code>low</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>指示上界的下限範圍。</td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>{{ HTMLElement("html") }}</td> + <td>指定文件中緩存清單的 URL。</td> + </tr> + <tr> + <td><code>max</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>指示所允許的最大值。</td> + </tr> + <tr> + <td><code>maxlength</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>定義該元素中所允許的最大字元數目。</td> + </tr> + <tr> + <td><code>media</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td> + <td>指定一些連接資源已經被設計的媒體。</td> + </tr> + <tr> + <td><code>method</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>定義當呈交該格式時，哪個 HTTP 方法要被使用。可以用 GET（預設）或是 POST。</td> + </tr> + <tr> + <td><code>min</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td>指示所允許的最小值。</td> + </tr> + <tr> + <td><code>multiple</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>指示多個值是否可以進入單一輸入的 <code>email</code> 或是 <code>file</code> 之類別。</td> + </tr> + <tr> + <td><code>name</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td> + <td> + <p>元素的名字。例如被伺服器所使用時，來識別格式提交的現場。</p> + </td> + </tr> + <tr> + <td><code>novalidate</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>該屬性指示當本格式被提交時，並無法通過驗證。</td> + </tr> + <tr> + <td><code>open</code></td> + <td>{{ HTMLElement("details") }}</td> + <td>指示是否細節顯示於加載頁面上。</td> + </tr> + <tr> + <td><code>optimum</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>指示最佳化數值。</td> + </tr> + <tr> + <td><code>pattern</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>定義一個元素值將被驗證的正規表達式。</td> + </tr> + <tr> + <td><code>ping</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td> </td> + </tr> + <tr> + <td><code>placeholder</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>提示使用者什麼可以被輸入進該區。</td> + </tr> + <tr> + <td><code>poster</code></td> + <td>{{ HTMLElement("video") }}</td> + <td> + <p>顯現一個指示 poster frame 的 URL，直到使用者撥放或是搜索。</p> + </td> + </tr> + <tr> + <td><code>preload</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>指示是否整個資源、一部分的資源、或是沒有資源應該被預先裝載。</td> + </tr> + <tr> + <td><code>pubdate</code></td> + <td>{{ HTMLElement("time") }}</td> + <td>指示該日期和時間，是否和距離最近的 {{ HTMLElement("article") }} 舊元素的日期一樣。</td> + </tr> + <tr> + <td><code>radiogroup</code></td> + <td>{{ HTMLElement("command") }}</td> + <td> </td> + </tr> + <tr> + <td><code>readonly</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>指示是否該元素可以被編輯。</td> + </tr> + <tr> + <td><code>rel</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>指定目標物件和連結物驗的關係。</td> + </tr> + <tr> + <td><code>required</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>指示該元素是否被要求填寫。</td> + </tr> + <tr> + <td><code>reversed</code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>指示該目錄是否應以降序展出而不是升序。</td> + </tr> + <tr> + <td><code>rows</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>定義 textarea 的行數。</td> + </tr> + <tr> + <td><code>rowspan</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>定義表格單元的行數應該被 span over。</td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td> </td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td>指示為該元素的拼字檢查是否允許。</td> + </tr> + <tr> + <td><code>scope</code></td> + <td>{{ HTMLElement("th") }}</td> + <td> </td> + </tr> + <tr> + <td><code>scoped</code></td> + <td>{{ HTMLElement("style") }}</td> + <td> </td> + </tr> + <tr> + <td><code>seamless</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td> </td> + </tr> + <tr> + <td><code>selected</code></td> + <td>{{ HTMLElement("option") }}</td> + <td>定義一個值將被選擇到上載頁面中。</td> + </tr> + <tr> + <td><code>shape</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td> </td> + </tr> + <tr> + <td><code>size</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>定義元素的寬度 (以 pixel 為單位) 。如果該元素之類型的屬性是文本或是密碼，那麼它就是字元的數目。</td> + </tr> + <tr> + <td><code>sizes</code></td> + <td>{{ HTMLElement("link") }}</td> + <td> </td> + </tr> + <tr> + <td><code>span</code></td> + <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td> + <td> </td> + </tr> + <tr> + <td><code>src</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td> + <td>可嵌入內容的網址。</td> + </tr> + <tr> + <td><code>srcdoc</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td> </td> + </tr> + <tr> + <td><code>srclang</code></td> + <td>{{ HTMLElement("track") }}</td> + <td> </td> + </tr> + <tr> + <td><code>srcset</code></td> + <td>{{ HTMLElement("img") }}</td> + <td> </td> + </tr> + <tr> + <td><code>start</code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>如果第一個數字不是 1 的話，則定義該數。</td> + </tr> + <tr> + <td><code>step</code></td> + <td>{{ HTMLElement("input") }}</td> + <td> </td> + </tr> + <tr> + <td><code>style</code></td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td>定義多載先前的樣式設定之 CSS 樣式。</td> + </tr> + <tr> + <td><code>summary</code></td> + <td>{{ HTMLElement("table") }}</td> + <td> </td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td>多載瀏覽器的預設頁面標籤之順序並且遵守指定的那個。</td> + </tr> + <tr> + <td><code>target</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td> + <td> </td> + </tr> + <tr> + <td><code>title</code></td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td>當滑鼠標停在元素時，文本會顯示在工具提示中。</td> + </tr> + <tr> + <td><code>type</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td> + <td>定義元素的類型。</td> + </tr> + <tr> + <td><code>usemap</code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td> + <td> </td> + </tr> + <tr> + <td><code>value</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td> + <td>定義將顯示在加載頁面上元素的預設值。</td> + </tr> + <tr> + <td><code>width</code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td>注意 : 在有些情況中，例如 {{ HTMLElement("div") }}，這是傳統的屬性，而 CSS {{ Cssxref("width") }} 特性應當被使用。在其他的情況中，例如 {{ HTMLElement("canvas") }} ，寬度必須用該屬性來指定。</td> + </tr> + <tr> + <td><code>wrap</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>指定文章是否要被掩飾。</td> + </tr> + </tbody> + <tbody> + <tr> + <td><code>border</code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td> + <td> + <p>邊界寬度。</p> + + <p>注意 : 這是一個傳統的屬性。請利用 CSS {{ Cssxref("border") }} 特性。</p> + </td> + </tr> + <tr> + <td><code>buffered</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>包含被緩衝之媒體的時間範圍。</td> + </tr> + <tr> + <td><code>challenge</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td>隨著公共密鑰提交的挑戰字串。</td> + </tr> + <tr> + <td><code>charset</code></td> + <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td> + <td>聲明頁面或腳本的字元編碼。</td> + </tr> + <tr> + <td><code>checked</code></td> + <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td> + <td>指定在加載頁面上的元素是否要被檢查。</td> + </tr> + <tr> + <td><code>cite</code></td> + <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td> + <td>包含一個 URL，用來指出引用或是改變的來源地址。</td> + </tr> + <tr> + <td><code>class</code></td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td>經常使用共同屬性和 CSS 一起設計元素。</td> + </tr> + <tr> + <td><code>code</code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>指明被加載與執行的 applet 類別文件之 URL。</td> + </tr> + <tr> + <td><code>codebase</code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.</td> + </tr> + <tr> + <td><code>color</code></td> + <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td> + <td> + <p>該屬性使用命名顏色或十六進制 #RRGGBB 格式來設置文本顏色。</p> + + <p>注意 : 這是一個傳統的屬性。請使用 CSS {{ Cssxref("color") }} 特性。</p> + </td> + </tr> + <tr> + <td><code>cols</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>定義在一個 textarea 中有多少欄位。</td> + </tr> + <tr> + <td><code>colspan</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>colspan 屬性定義一個單元格之欄位的數量。</td> + </tr> + <tr> + <td><code>content</code></td> + <td>{{ HTMLElement("meta") }}</td> + <td>一個有關於<strong> </strong><code>http-equiv</code> 或是根據上下文 <code>name</code> 的值 。</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td>指定元素的內容是否可以被編輯。</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td>定義將作為元素上下文選項單的 {{ HTMLElement("menu") }} 元素之 ID。</td> + </tr> + <tr> + <td><code>controls</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>指定瀏覽器是否應該顯示錄放控制給使用者。</td> + </tr> + <tr> + <td><code>coords</code></td> + <td>{{ HTMLElement("area") }}</td> + <td>一組值指明熱點區域的座標。</td> + </tr> + <tr> + <td> + <p><code>data</code></p> + </td> + <td> + <p>{{ HTMLElement("object") }}</p> + </td> + <td> + <p>指明 URL 的資源。</p> + </td> + </tr> + <tr> + <td> + <p><code>data-*</code></p> + </td> + <td> + <p><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></p> + </td> + <td> + <p>讓您可以將自行定義屬性附加在 HTML 元素上。</p> + </td> + </tr> + <tr> + <td><code>datetime</code></td> + <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td> + <td>指定元素所相關的日期與時間。</td> + </tr> + <tr> + <td><code>default</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>指定 track 應被啟用，除非使用者的偏好表示不同。</td> + </tr> + <tr> + <td><code>defer</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>指定該頁面被瀏覽完後腳本應被執行。</td> + </tr> + <tr> + <td><code>dir</code></td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td>定義文章的方向。被允許的值有 ltr (Left-To-Right) 或 rtl (Right-To-Left)。</td> + </tr> + <tr> + <td><code>dirname</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td> </td> + </tr> + <tr> + <td><code>disabled</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>指名使用者是否可以與元素互動。</td> + </tr> + <tr> + <td><code>download</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td> + <p>指定該超連結是用於下載的資源。</p> + </td> + </tr> + <tr> + <td><code>draggable</code></td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td>定義元素是否可以拖曳。</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td>指定該元素接受它內容的滑鼠落下物。</td> + </tr> + <tr> + <td><code>enctype</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>當方法為 POST 的時候，定義格式日期的內容類型。</td> + </tr> + <tr> + <td><code>for</code></td> + <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td>描述屬於這一個的元素。</td> + </tr> + <tr> + <td><code>form</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td> + <p>指定元素之所有者的格式。</p> + </td> + </tr> + <tr> + <td><code>formaction</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td> + <td>指定元素的作用，多載的動作被定義在 {{ HTMLElement("form") }}。</td> + </tr> + <tr> + <td><code>headers</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>對適用於該元素的 <th> 元素之 ID。</td> + </tr> + <tr> + <td><code>height</code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td>注意 : 在有些情況中，例如 {{ HTMLElement("div") }}，這是傳統的屬性，而 CSS {{ Cssxref("height") }} 特性應當被使用。在其他的情況中，例如 {{ HTMLElement("canvas") }}，高度必須用該屬性來指定。</td> + </tr> + </tbody> + <tbody> + <tr> + <td><code>accept</code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>伺服器接受的類型之列表，通常是文件類型。</td> + </tr> + <tr> + <td><code>accept-charset</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>支持字元集的列表。</td> + </tr> + <tr> + <td><code>accesskey</code></td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td>定義鍵盤快捷鍵來啟動或添加焦點到該元素。</td> + </tr> + <tr> + <td><code>action</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>一個程序處理經由該格式提交信息的 URI。</td> + </tr> + <tr> + <td><code>align</code></td> + <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td> + <td>指定元素的水平對齊方式。</td> + </tr> + <tr> + <td><code>alt</code></td> + <td> + <p>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</p> + </td> + <td>在圖像無法顯示的情況下，顯示代替文本。</td> + </tr> + <tr> + <td><code>async</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>指定該腳本應該被不同步得執行。</td> + </tr> + <tr> + <td><code>autocomplete</code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>指定是否以該格式控制，可以在默認情況下由瀏覽器自動完成其值。</td> + </tr> + <tr> + <td><code>autofocus</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>該元素應該在頁面加載後自動焦距。</td> + </tr> + <tr> + <td><code>autoplay</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>音頻或視頻應該越早撥放越好。</td> + </tr> + <tr> + <td><code>autosave</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>上一個值應該持續存在到跨頁面加載的可選值之下拉列表中。</td> + </tr> + <tr> + <td><code>bgcolor</code></td> + <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td> + <td> + <p>元素的背景顏色。</p> + + <p>注意 : 這是一個傳統的屬性。請使用 CSS {{ Cssxref("background-color") }} 特性。</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="內容與IDL屬性">內容與IDL屬性</h2> + +<p>在 HTML 中，大部分的屬性有兩種面向 :<strong> 內容屬性</strong>與 <strong>IDL 屬性</strong>。</p> + +<p>內容屬性是您可以從內容中設定的屬性 (HTML 程式碼) 而且您可以藉由 {{domxref("element.setAttribute()")}} 或是 {{domxref("element.getAttribute()")}} 來設定它或得到它。內容屬性永遠都是字串，即便我們所期望的值是一個整數。舉例來說，假設今天要用內容屬性去設定一個 {{HTMLElement("input")}} 元素的最大長度是42，您必須在該元素上呼叫 setAttribute("maxlength", "42")。</p> + +<p>IDL 屬性也被稱為 JavaScript 特性。您可以使用 JavaScript 特性的 element.foo 以閱讀或是設定這些屬性。當您要得到 IDL 屬性時，它總是要使用 (但可能改變) 基本的內容屬性以返回值，而當您要設定 IDL 屬性時，它需要儲存資料在內容屬性中。換句話說，IDL 屬性在本質上反映了內容屬性。</p> + +<p>在大部分的時間中，當 IDL 屬性真正被使用時，將會返回它們的值。舉例而言，{{HTMLElement("input")}} 元素的預設型態是 "text"，所以如果您設定 input.type="foobar"，<input> 元素一樣是 text 的型態 (在外觀和行為上而言)，但是 "type" 內容屬性的值將會變成 "foobar"。然而，IDL 屬性的型態將會回傳 "text" 字串。</p> + +<p>IDL 屬性並非永遠的字串 ; 舉例來說，input.maxlength 便是一個數字(型態為 signed long)。當使用 IDL 屬性，您會閱讀或是設定所需的型態，而當您設定 input.maxlength 時，它總是回傳一個數字，因為它正需要一個數字。如果您傳入別的型態，它會依照標準 JavaScript 型態轉換規則，將傳入值轉成一個數字。</p> + +<p>IDL 屬性可以 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">反應其他型態</a>，例如 unsigned long、URLs、booleans，等等。不幸的是，並沒有明確的規則來規範，而且與 IDL 屬性行為相對應的內容屬性連結中，也沒有取決於該屬性的方式。在大部分的時間裡，它會遵守 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">規範中所制定的規則</a>，但有時候它並不會。HTML 規範嘗試讓它變得容易使用，但由於各種原因 (大多是因為歷史)，有些屬性表現得很奇怪 (舉例來說，select.size)，而您應該詳細閱讀規範以了解各個屬性的行為。</p> + +<h2 id="另請參見">另請參見</h2> + +<ul> + <li><a href="/zh-TW/docs/HTML/Element" title="/en-US/docs/HTML/Element">HTML 元素</a></li> +</ul> diff --git a/files/zh-tw/web/html/block-level_elements/index.html b/files/zh-tw/web/html/block-level_elements/index.html new file mode 100644 index 0000000000..32d8a405b0 --- /dev/null +++ b/files/zh-tw/web/html/block-level_elements/index.html @@ -0,0 +1,130 @@ +--- +title: 區塊級元素 +slug: Web/HTML/Block-level_elements +translation_of: Web/HTML/Block-level_elements +--- +<p><span class="seoSummary">HTML (</span>超文字標記語言, <span class="seoSummary"><strong>Hypertext Markup Language</strong>) 元素通常為 "區塊級" 元素或是 <a href="/en-US/docs/HTML/Inline_elements" title="/en-US/docs/HTML/inline_elements">"行內" 元素</a>。 一個區塊級元素會藉由建立"區塊"的動作, 完全佔滿其父元素(容器)的空間。本文將為您說明其意涵.</span></p> + +<p>瀏覽器預設以在元素前後換行的方式, 表現區塊級元素. 視覺上會呈現為一排縱向堆疊的方塊。</p> + +<div class="note"> +<p>區塊級元素必定以換行方式, 取得完整寬度的空間(向左右兩側儘可能地延伸出去)。</p> +</div> + +<p>以下範例將展示區塊級元素的影響:</p> + +<h2 id="Block-level_Example" name="Block-level_Example">區塊級元素</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { background-color: #8ABB55; } +</pre> + +<p>{{ EmbedLiveSample('Block-level_Example') }}</p> + +<h2 id="用法">用法</h2> + +<ul> + <li>區塊級元素只能出現於 {{ HTMLElement("body") }} 元素之內.</li> +</ul> + +<h2 id="區塊級_vs._行內元素">區塊級 vs. 行內元素</h2> + +<p>There are a couple of key differences between block-level elements and inline elements:</p> + +<dl> + <dt>Formatting</dt> + <dd>By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.</dd> + <dt>Content model</dt> + <dd>Generally, block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.</dd> +</dl> + +<p>The distinction of block-level vs. inline elements is used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of <a href="/en-US/docs/HTML/Content_categories" title="/en-US/docs/HTML/Content_categories">content categories</a>. The "block-level" category roughly corresponds to the category of <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> in HTML5, while "inline" corresponds to <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, but there are additional categories.</p> + +<h2 id="相關元素">相關元素</h2> + +<p>The following is a complete list of all HTML block level elements (although "block-level" is not technically defined for elements that are new in HTML5).</p> + +<div class="threecolumns"> +<dl> + <dt>{{ HTMLElement("address") }}</dt> + <dd>Contact information.</dd> + <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Article content.</dd> + <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Aside content.</dd> + <dt>{{ HTMLElement("blockquote") }}</dt> + <dd>Long ("block") quotation.</dd> + <dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Drawing canvas.</dd> + <dt>{{ HTMLElement("dd") }}</dt> + <dd>Describes a term in a description list.</dd> + <dt>{{ HTMLElement("div") }}</dt> + <dd>Document division.</dd> + <dt>{{ HTMLElement("dl") }}</dt> + <dd>Description list.</dd> + <dt>{{ HTMLElement("dt") }}</dt> + <dd>Description list term.</dd> + <dt>{{ HTMLElement("fieldset") }}</dt> + <dd>Field set label.</dd> +</dl> + +<dl> + <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Figure caption.</dd> + <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Groups media content with a caption (see {{ HTMLElement("figcaption") }}).</dd> + <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Section or page footer.</dd> + <dt>{{ HTMLElement("form") }}</dt> + <dd>Input form.</dd> + <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt> + <dd>Heading levels 1-6.</dd> + <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Section or page header.</dd> + <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Groups header information.</dd> + <dt>{{ HTMLElement("hr") }}</dt> + <dd>Horizontal rule (dividing line).</dd> + <dt>{{ HTMLElement("li") }}</dt> + <dd>List item.</dd> + <dt>{{ HTMLElement("main") }}</dt> + <dd>Contains the central content unique to this document.</dd> + <dt>{{ HTMLElement("nav") }}</dt> + <dd>Contains navigation links.</dd> +</dl> + +<dl> + <dt>{{ HTMLElement("noscript") }}</dt> + <dd>Content to use if scripting is not supported or turned off.</dd> + <dt>{{ HTMLElement("ol") }}</dt> + <dd>Ordered list.</dd> + <dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Form output.</dd> + <dt>{{ HTMLElement("p") }}</dt> + <dd>Paragraph.</dd> + <dt>{{ HTMLElement("pre") }}</dt> + <dd>Preformatted text.</dd> + <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Section of a web page.</dd> + <dt>{{ HTMLElement("table") }}</dt> + <dd>Table.</dd> + <dt>{{ HTMLElement("tfoot") }}</dt> + <dd>Table footer.</dd> + <dt>{{ HTMLElement("ul") }}</dt> + <dd>Unordered list.</dd> + <dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Video player.</dd> +</dl> +</div> + +<h3 id="See_also" name="See_also"><br> + 參閱</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Inline_elements" title="en/HTML/Inline_elements">行內元素</a></li> +</ul> 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> diff --git a/files/zh-tw/web/html/forms_in_html/index.html b/files/zh-tw/web/html/forms_in_html/index.html new file mode 100644 index 0000000000..6d83f5efea --- /dev/null +++ b/files/zh-tw/web/html/forms_in_html/index.html @@ -0,0 +1,83 @@ +--- +title: Forms in HTML +slug: Web/HTML/Forms_in_HTML +translation_of: Learn/HTML/Forms/HTML5_updates +--- +<div> + {{gecko_minversion_header("2")}}</div> +<h2 id="摘要">摘要</h2> +<p>HTML5的Form元素及其屬性比HTML4提供更大程度的語意標記，也移除了原本許多在HTML4所需要的繁瑣程式碼腳本與樣式控制。HTML5的Form元素讓表單在跨網頁上有更好的一致性，也提供即時的使用者輸入回饋，因為這些特色，HTML5的Form元素在使用者體驗上有更好的表現，甚至，這些體驗依然適用在瀏覽器關閉程式碼腳本執行的情況下。</p> +<p>本文旨在討論Gecko/Firefox, version 4或更新版本在新的或變更後的Form元素特色上的支援。</p> +<h2 id="<input>元素"><input>元素</h2> +<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"><input></a>元素的<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type">type</a>屬性新增了一些屬性值。</p> +<ul> + <li><code>search</code>: 代表此為搜尋欄位，換行符號會自動從輸入值中刪除且沒有其他語法是必須的。</li> + <li><code>tel</code>: 代表此為電話編輯欄位，換行符號會自動從輸入值中刪除且沒有其他語法是必須的。基於各國電話號碼不一，你可以利用<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern">pattern</a>和<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-maxlength" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-maxlength">maxlength</a>屬性來限制輸入。</li> + <li><code>url</code>: 代表此為URL編輯欄位，換行符號與前後空白符號會自動從輸入值中刪除。</li> + <li> + <p><code>email</code>: 代表此為email欄位，換行符號會自動從輸入值中刪除。只有在輸入符合ABNF規範: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )，其中atext定義在<a href="http://tools.ietf.org/html/rfc5322#section-3.2.3" title="http://tools.ietf.org/html/rfc5322#section-3.2.3">RFC 5322 section 3.2.3</a>，而ldh-str定義在<a href="http://tools.ietf.org/html/rfc1034#section-3.5" title="http://tools.ietf.org/html/rfc1034#section-3.5">RFC 1034 section 3.5</a>。</p> + <div class="note"> + <strong>Note:</strong> 當有設定<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-multiple" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-multiple">multiple</a>屬性時，可以用逗號分隔email來一次輸入多個email，但目前FireFox不支援此功能。</div> + </li> +</ul> +<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"><input></a>元素同時也新增了一些屬性:</p> +<ul> + <li>{{htmlattrxref("list", "input")}}: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist"><datalist></a>元素的ID，這個元素下的內容，亦即<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option"><option></a>元素的值會顯示在輸入欄位的建議區來用於提示訊息。</li> + <li>{{htmlattrxref("pattern", "input")}}: 一個用來檢查輸入的正規表達式(regular expression)，當type屬性值為text, tel, search, url與email時可以使用。</li> + <li>{{htmlattrxref("form", "input")}}: 指示該<input>隸屬於哪一個<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form"><form></a>元素的一串文字，一個input只能隸屬於一個form下。</li> + <li>{{htmlattrxref("formmethod", "input")}}: 指示使用的HTTP方法(GET或POST)，這個屬性值會取代<form>元素下<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method">method</a>屬性所定義的HTTP方法。這個屬性只有在<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form">form</a>屬性出現而且type值為image或submit時才有效。</li> + <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}: 當欄位驗證失敗時顯示的訊息，此為Mozilla擴充功能、非標準。</li> +</ul> +<h2 id="<form>元素"><form>元素</h2> +<p>{{HTMLElement("form")}} 元素新增了一些屬性</p> +<ul> + <li>{{htmlattrxref("novalidate", "form")}}: 當表單送出時，阻止表單驗證。</li> +</ul> +<h2 id="The_datalist_element" name="The_datalist_element"> <code><datalist></code>元素</h2> +<p>{{HTMLElement("datalist")}}元素是{{HTMLElement("option")}}元素的列表，{{HTMLElement("option")}}元素會用於提示輸入建議。</p> +<p>可以利用{{HTMLElement("input")}}的{{htmlattrxref("list", "input")}}屬性來連結{{HTMLElement("input")}}元素與{{HTMLElement("datalist")}}</p> +<h2 id="The_output_element" name="The_output_element"><code><output></code>元素</h2> +<p><code>{{HTMLElement("output")}}</code>元素代表運算結果。</p> +<p>可以利用{{htmlattrxref("for", "output")}}屬性來設定<code>{{HTMLElement("output")}}</code>元素和其他影響計算結果的元素(如input或參數)的關係，{{htmlattrxref("for", "output")}}屬性的值為一串以空白分隔的元素ID。</p> +<p>{{non-standard_inline}} Gecko2.0(不一定適用其他瀏覽器引擎)支援自定義{{HTMLElement("output")}}元素的驗證條件和錯誤訊息，所以提供了其{{Cssxref(":invalid")}}, {{Cssxref(":valid")}}, {{Cssxref(":-moz-ui-invalid")}}和 {{Cssxref(":-moz-ui-valid")}}的CSS pseudo-class，在以下狀況這個特色將很有用，例如沒有輸入值有問題，但計算結果違反了商業規則(好比說總百分比不可超過100)。</p> +<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">placeholder屬性</h2> +<p><code>{{HTMLElement("input")}}</code>元素和<code>{{HTMLElement("textarea")}}</code>元素的{{htmlattrxref("placeholder", "input")}}屬性會在輸入欄位上顯示輸入提示，這個屬性的值不可以含有回車或換行符號。</p> +<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">autofocus屬性</h2> +<p>{{htmlattrxref("autofocus", "input")}}屬性指示除非使用者另有指定(例如在其他控制項上進行輸入操作)，否則當載入網頁時表單控制項要自動聚焦於特定元素上；autofocus屬性值為布林值(Boolean)，一份文件只能有一份表單設定autofocus屬性。能夠設定這個屬性的元素有<code>{{HTMLElement("input")}}</code>, <code>{{HTMLElement("button")}}</code>, <code>{{HTMLElement("select")}}</code>與<code>{{HTMLElement("textarea")}}</code>，不過當{{htmlattrxref("type", "input")}}屬性為隱藏(hidden)下，autofocus是無效的，也就是說，不能自動聚焦於隱藏元素上。</p> +<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">label.control DOM屬性</h2> +<p><code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> DOM介面提供了<code>{{HTMLElement("label")}}</code>元素一個新的control屬性，control屬性會回傳被標記的控制項，這個控制項便是該label適用的控制項，也就是<label>元素{{htmlattrxref("for", "label")}}屬性指定的元素(如果有的話)或是第一個後代控制項元素。</p> +<h2 id="Constraint_Validation" name="Constraint_Validation">約束驗證</h2> +<p>HTML5提供了客戶端表單驗證的語法和API，基於安全性與資料正確性，雖然這並不能取代伺服器端驗證，但是客戶端驗證可以提拱使用者更好的立即輸入回饋體驗。</p> +<p>當{{HTMLElement("input")}}元素設定了title屬性，其值會作為提示框之內容，若是驗證失敗，提示框的內容會換成相關的錯誤訊息，我們可以利用非標準的{{htmlattrxref("x-moz-errormessage")}}屬性或setCustomValidity()方法來自定義錯誤訊息。</p> +<pre class="brush: html"><input type="email" title="Please, provide an e-mail" x-moz-errormessage="This is not a valid e-mail"></pre> +<div class="note"> + <strong>Note:</strong> 約束驗證不支援表單的{{HTMLElement("button")}}元素，若是想根據表單驗證果來設定按鈕樣式，可以利用{{cssxref(":-moz-submit-invalid")}} pseudo-class。</div> +<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">約束驗證的HTML語法</h3> +<p>下列是HTML5用來約束表單資料的語法</p> +<ul> + <li>{{HTMLElement("input")}}, {{HTMLElement("select")}},和{{HTMLElement("textarea")}}的{{htmlattrxref("required", "input")}}屬性表示輸入不可為空。{{HTMLElement("input")}}元素在用{{htmlattrxref("required", "input")}}屬性時需要搭配某些特定{{htmlattrxref("type", "input")}}屬性值)</li> + <li>{{HTMLElement("input")}}元素的{{htmlattrxref("pattern", "input")}}屬性規範了輸入必須符合指定的正規表達式。</li> + <li>{{HTMLElement("input")}}元素的{{htmlattrxref("min", "input")}}和{{htmlattrxref("max", "input")}}屬性規範了最小和最大輸入值。</li> + <li>{{HTMLElement("input")}}元素的{{htmlattrxref("step", "input")}}屬性(和{{htmlattrxref("min", "input")}}和{{htmlattrxref("max", "input")}}屬性結合使用)規範了輸入值一次調整的幅度，當輸入值不符合允許的調整幅度即驗證失敗。</li> + <li>{{HTMLElement("input")}}和{{HTMLElement("textarea")}}元素的{{htmlattrxref("maxlength", "input")}}屬性規範了最大輸入字元數(以Unicode編碼計算)。</li> + <li>{{htmlattrxref("type", "input")}}值的url和email表示輸入必須是合格的URL或email格式。</li> +</ul> +<p>另外，我們可以在{{HTMLElement("form")}}元素上設定{{htmlattrxref("novalidate", "form")}}屬性或是在{{HTMLElement("button")}}元素以及{{htmlattrxref("type", "input")}}為submit或image的{{HTMLElement("input")}}元素上設定{{htmlattrxref("formnovalidate", "button")}}屬性來避免輸入約束驗證。這些屬性都會指示表單送出時不要進行驗證。</p> +<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">約束驗證API</h3> +<p>下列是客戶端驗證可用的DOM屬性和方法:</p> +<ul> + <li><code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code>物件有checkValidity()方法會回傳true當表單下所有元素都通過約束驗證，false當任一沒有通過。</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement?redirectlocale=en-US&redirectslug=DOM%2FHTMLFormElement" title="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement?redirectlocale=en-US&redirectslug=DOM%2FHTMLFormElement">表單相關元素:</a> + <ul> + <li><code>willValidate</code> 屬性為false若該元素沒有通過驗證。</li> + <li><code>validity</code> 屬性( <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> 物件)代表該元素目前的驗證結果。</li> + <li><code>validationMessage</code>屬性是驗證失敗時的訊息。</li> + <li><code>checkValidity()</code> 方法會回傳true當表單下所有元素都通過約束驗證，false當任一沒有通過。</li> + <li><code>setCustomValidity()</code> 可以自定義驗證失敗訊息。</li> + </ul> + </li> +</ul> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML Forms Guide</a></li> +</ul> diff --git a/files/zh-tw/web/html/global_attributes/data-_star_/index.html b/files/zh-tw/web/html/global_attributes/data-_star_/index.html new file mode 100644 index 0000000000..14310bde8e --- /dev/null +++ b/files/zh-tw/web/html/global_attributes/data-_star_/index.html @@ -0,0 +1,114 @@ +--- +title: data-* +slug: Web/HTML/Global_attributes/data-* +translation_of: Web/HTML/Global_attributes/data-* +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p><strong>data-*</strong><a href="/zh-TW/docs/Web/HTML/Global_attributes">全域屬性</a>構成一組稱作<strong>自訂 data 屬性</strong>的屬性。它能令 <a href="/zh-TW/docs/Web/HTML" title="zh-TW/HTML">HTML</a> 與其 <a href="/zh-TW/docs/DOM" title="zh-TW/DOM">DOM</a> 擁有給腳本用的交換資訊。這種屬性設置的自訂資料，能透過元素的 {{domxref("HTMLElement")}} 介面而活用。{{domxref("HTMLElement.dataset")}} property 允許訪問它們。<code>*</code> 可以是任何遵循以下規則的 <a class="external" href="http://www.w3.org/TR/REC-xml/#NT-Name" title="http://www.w3.org/TR/REC-xml/#NT-Name">xml 名稱</a>：</p> + +<ul> + <li>名字絕對不能以 <code>xml</code> 起頭，無論是否用於 xml、</li> + <li>名字絕對不能包含分號（<code>U+003A</code>）、</li> + <li>名字絕對不能包含大寫 <code>A</code> 到大小 <code>Z</code> 的拉丁字母。</li> +</ul> + +<p>請注意 {{domxref("HTMLElement.dataset")}} property 是個 {{domxref("DOMStringMap")}}，而自訂的 data 屬性名 <em>data-test-value</em> 因為所有的減號（<code>U+002D</code>）都會被消去、緊接著的第一個字母，會被取代為駝峰式（camelcase）名字，所以要透過 <code>HTMLElement.dataset.testValue</code> 或 <code>HTMLElement.dataset["<em>testValue</em>"]</code> 訪問。</p> + +<h3 id="用法">用法</h3> + +<p>藉由增加 <strong>data-* </strong> 屬性，即使是普通的 HTML 元素也能變成複雜而強大程式物件。例如說遊戲裡面的太空船<a href="https://zh.wikipedia.org/zh-tw/%E7%B2%BE%E7%81%B5_(%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6)">精靈</a> 能成為帶有 <a href="/zh-TW/docs/Web/HTML/Global_attributes/class">class</a> 與數個 data-* 屬性的 {{HTMLElement("img")}} 元素：</p> + +<pre><img class="spaceship cruiserX3" src="shipX3.png" + data-ship-id="324" data-weapons="laserI laserII" data-shields="72%" + data-x="414354" data-y="85160" data-z="31940" + onclick="spaceships[this.dataset.shipId].blasted()" /> +</pre> + +<p id="Specifications">（參見<em><a href="https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">這個網站</a></em>）</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', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</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(6) }}</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>Chrome for 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(6) }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="參見">參見</h2> + +<ul> + <li>所有的<a href="/zh-TW/docs/Web/HTML/Global_attributes">全域屬性</a></li> + <li>The {{domxref("HTMLElement.dataset")}} property that allows to access and modify these values.</li> +</ul> diff --git a/files/zh-tw/web/html/global_attributes/index.html b/files/zh-tw/web/html/global_attributes/index.html new file mode 100644 index 0000000000..8cd77b6512 --- /dev/null +++ b/files/zh-tw/web/html/global_attributes/index.html @@ -0,0 +1,474 @@ +--- +title: 全域屬性 +slug: Web/HTML/Global_attributes +translation_of: Web/HTML/Global_attributes +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="summary"> +<p><strong>全域屬性</strong>（Global attributes）是所有 HTML 元素共同的屬性，可以在所有的元素中使用。但在部分的元素上，屬性可能是沒有效果的。</p> +</div> + +<p>Global attributes may be specified on all <a href="/en-US/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <code><foo hidden>...<foo></code><code>, </code>even though <code><foo></code> is not a valid HTML element.</p> + +<p>In addition to the basic HTML global attributes, the following global attributes also exist:</p> + +<ul> + <li><strong><code>xml:lang</code></strong> and <code><strong>xml:base</strong></code> — these are inherited from the XHTML specifications and deprecated, but kept for compatibility purposes.</li> + <li>The multiple <code><strong><a href="/en-US/docs/Web/Accessibility/ARIA">aria-*</a></strong></code> attributes, used for improving accessibility.</li> + <li>The event handler attributes: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> +</ul> + +<h2 id="說明">說明</h2> + +<dl> + <dt id="attr-accesskey"><code><a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></dt> + <dd>Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.</dd> + <dt id="attr-class"><code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code></dt> + <dd>Is a space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the <a href="/en-US/docs/Web/CSS/Class_selectors">class selectors</a> or functions like the method {{domxref("Document.getElementsByClassName()")}}.</dd> + <dt id="attr-contenteditable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></dt> + <dd>Is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values: + <ul> + <li><code>true</code> or the <em>empty string</em>, which indicates that the element must be editable;</li> + <li><code>false</code>, which indicates that the element must not be editable.</li> + </ul> + </dd> + <dt id="attr-contextmenu"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code></dt> + <dd>Is the <code><a href="#attr-id"><strong>id</strong></a></code> of an {{HTMLElement("menu")}} to use as the contextual menu for this element.</dd> + <dt id="attr-dataset"><code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">data-*</a></code></dt> + <dd>Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the <a href="/en-US/docs/Web/HTML">HTML</a> and its <a href="/en-US/docs/Glossary/DOM">DOM</a> representation that may be used by scripts. All such custom data are available via the {{domxref("HTMLElement")}} interface of the element the attribute is set on. The {{domxref("HTMLElement.dataset")}} property gives access to them.</dd> + <dt id="attr-dir"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code></dt> + <dd>Is an enumerated attribute indicating the directionality of the element's text. It can have the following values: + <ul> + <li><code>ltr</code>, which means <em>left to right </em>and is to be used for languages that are written from the left to the right (like English);</li> + <li><code>rtl</code>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li> + <li><code>auto</code>, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element.</li> + </ul> + </dd> + <dt id="attr-draggable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/draggable">draggable</a></code> {{experimental_inline}}</dt> + <dd>Is an enumerated attribute indicating whether the element can be dragged, using the <a href="/en-us/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: + <ul> + <li><code>true</code>, which indicates that the element may be dragged</li> + <li><code>false</code>, which indicates that the element may not be dragged.</li> + </ul> + </dd> + <dt id="attr-dropzone"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dropzone">dropzone</a></code> {{experimental_inline}}</dt> + <dd>Is an enumerated attribute indicating what types of content can be dropped on an element, using the <a href="/en-US/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: + <ul> + <li><code>copy</code>, which indicates that dropping will create a copy of the element that was dragged</li> + <li><code>move</code>, which indicates that the element that was dragged will be moved to this new location.</li> + <li><code>link</code>, will create a link to the dragged data.</li> + </ul> + </dd> + <dt id="attr-hidden"><code><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></dt> + <dd>Is a Boolean attribute indicates that the element is not yet, or is no longer, <em>relevant</em>. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.</dd> + <dt id="attr-id"><code><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></code></dt> + <dd>Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).</dd> +</dl> + +<div class="note"> +<p><strong>註：</strong>The following 5 attributes are part of the <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">WHATWG HTML Microdata feature</a>.</p> +</div> + +<dl> + <dt id="attr-itemid"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemid">itemid</a></code> {{experimental_inline}}</dt> + <dd>The unique, global identifier of an item.</dd> + <dt id="attr-itemprop"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> {{experimental_inline}}</dt> + <dd>Used to add properties to an item. Every HTML element may have an itemprop attribute specified, where an itemprop consists of a name and value pair.</dd> + <dt id="attr-itemref"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemref">itemref</a></code> {{experimental_inline}}</dt> + <dd>Properties that are not descendants of an element with the <code>itemscope</code> attribute can be associated with the item using an <strong>itemref</strong>. Itemref provides a list of element ids (not <code>itemid</code>s) with additional properties elsewhere in the document.</dd> + <dt id="attr-itemscope"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope</a> </code>{{experimental_inline}}</dt> + <dd>Itemscope (usually) works along with <a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype </a>to specify that the HTML contained in a block is about a particular item. itemscope creates the Item and defines the scope of the itemtype associated with it. itemtype is a valid URL of a vocabulary (such as <a class="external external-icon" href="https://schema.org/">schema.org</a>) that describes the item and its properties context.</dd> + <dt id="attr-itemtype"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> {{experimental_inline}}</dt> + <dd>Specifies the URL of the vocabulary that will be used to define itemprop's (item properties) in the data structure. <a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">Itemscope</a> is used to set the scope of where in the data structure the vocabulary set by itemtype will be active.</dd> + <dt id="attr-lang"><code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code></dt> + <dd>Participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defines in the <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> IETF document. <a href="#attr-xml:lang"><strong>xml:lang</strong></a> has priority over it.</dd> +</dl> + +<dl> + <dt id="attr-slot"><code><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code> {{experimental_inline}}</dt> + <dd>Assigns a slot in a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> shadow tree to an element: An element with a <code>slot</code> attribute is assigned to the slot created by the {{HTMLElement("slot")}} element whose {{htmlattrxref("name", "slot")}} attribute's value matches that <code>slot</code> attribute's value.</dd> +</dl> + +<dl> + <dt id="attr-spellcheck"><code><a href="/en-US/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code> {{experimental_inline}}</dt> + <dd>Is an enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values: + <ul> + <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li> + <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li> + </ul> + </dd> + <dt id="attr-style"><code><a href="/en-US/docs/Web/HTML/Global_attributes/style">style</a></code></dt> + <dd>Contains <a href="/en-US/docs/Web/CSS">CSS</a> styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{HTMLElement("style")}} element have mainly the purpose of allowing for quick styling, for example for testing purposes.</dd> + <dt id="attr-tabindex"><code><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code></dt> + <dd>Is an integer attribute indicating if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values: + <ul> + <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li> + <li><code>0</code> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li> + <li>a <em>positive value</em> which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the <a href="#attr-tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative position in the document).</li> + </ul> + </dd> + <dt id="attr-title"><code><a href="/en-US/docs/Web/HTML/Global_attributes/title">title</a></code></dt> + <dd>Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.</dd> + <dt id="attr-translate"><code><a href="/en-US/docs/Web/HTML/Global_attributes/translate">translate</a></code></dt> + <dd>Is an enumerated attribute that is used to specify whether an element's attribute values and the values of it<code>s</code> {{domxref("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values: + <ul> + <li>empty string and <code>"yes"</code>, which indicates that the element will be translated.</li> + <li><code>"no</code>", which indicates that the element will not be translated.</li> + </ul> + </dd> +</dl> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>From latest snapshot, {{SpecName('HTML5.1')}}, <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, and <code>itemtype</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML5 W3C')}}, <code>spellcheck</code>, <code>draggable</code>, and <code>dropzone</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, and <code>title</code> are now true global attributes.<br> + <code>xml:lang</code> which was initially part of XHTML, is now also part of HTML.<br> + <code>hidden</code>, <code>data-*</code>, <code>contextmenu</code>, <code>contenteditable</code>, and <code>translate</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br> + <code>class</code> and <code>style</code> are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>dir</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>id</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>lang</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>tabindex</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br> + <code>accesskey</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.<br> + <code>title</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</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><code>accesskey</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>class</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(9)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("6")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>dir</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hidden</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>id</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>lang</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>style</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>title</code></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>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><code>accesskey</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>class</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("6")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>dir</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hidden</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>id</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>lang</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>style</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>title</code></td> + <td>{{CompatVersionUnknown}}</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>{{domxref("Element")}} and {{domxref("GlobalEventHandlers")}} interfaces that allow to query most global attributes.</li> +</ul> diff --git a/files/zh-tw/web/html/global_attributes/spellcheck/index.html b/files/zh-tw/web/html/global_attributes/spellcheck/index.html new file mode 100644 index 0000000000..65cd9dea57 --- /dev/null +++ b/files/zh-tw/web/html/global_attributes/spellcheck/index.html @@ -0,0 +1,39 @@ +--- +title: 控制 HTML 表單中的拼字檢查功能 +slug: Web/HTML/Global_attributes/spellcheck +translation_of: Web/HTML/Global_attributes/spellcheck +--- +<p>Firefox 2 新增了網頁表單文字輸入區的即時拼字檢查功能，使用者可以修改 about:config 來調整是否使用拼字檢查、是否同時檢查文字輸入<b>欄</b>等設定。預設值狀態下，Firefox 會檢查文字輸入區（text area）及 <code>designMode</code> 的文件，而不檢查文字輸入欄（text field）的拼字。</p> + +<p>不過，總是會有些不見得適合預設值的情況，例如在某些用來編寫 HTML 等程式碼的輸入區中拼字檢查就變得煩人，或者有些網站也希望建議 Firefox 檢查某些特定文字輸入欄的拼字等等。</p> + +<p>若網站對某特定 <code><input></code> 元素中的拼字檢查執行與否有所建議，則可使用 <code>spellcheck</code> 屬性。將此屬性設為 <code>true</code> 表建議檢查拼字，而設為 <code>false</code> 則相反。</p> + +<p>若使用者將 <code>layout.spellcheckDefault</code> 直接設為 0 以關閉拼字檢查功能，那麼網站的建議就無效；若設為其他值，則會將網站建議列入考量。</p> + +<p>舉例來說，你可以撰寫如下的 HTML 碼，建議 Firefox 檢查此文字輸入欄（<code><input></code> 元素）中的拼字：</p> + +<pre class="eval"><span class="nowiki"><input type="text" size="50" spellcheck="true"></span> +</pre> + +<p>也可以撰寫這樣的 HTML 碼，建議 Firefox 不要檢查文字輸入區的拼字：</p> + +<pre class="eval"><span class="nowiki"><textarea spellcheck="false"></textarea></span> +</pre> + +<p>而 <code>designMode</code>（通常用於 HTML 所見即所得編輯）則可以在文件的 <code><body></code> 標籤中設定 <code>spellcheck</code> 屬性來控制拼字檢查。</p> + +<p><code>spellcheck</code> 屬性也可以放在 <code><span></code> 或 <code><div></code> 等其他標籤中，這麼一來在此元素下所有未另行設定 <code>spellcheck</code> 屬性的 <code><input></code> 元素將繼承此設定；而若皆未設定則使用者的決定將優先採行。</p> + +<p>舉例而言：</p> + +<pre><div spellcheck="true"> + <label>輸入英文句子： </label><input type="text" size="50"> + <br /> + <label>再打一句： </label><input type="text" size="50"> +</div> +<br /> +<label>最後一句： </label><input type="text" size="50"> +</pre> + +<p>在這段 HTML 程式碼中，頭兩個文字輸入區域將檢查拼字，第三個則不會。</p> diff --git a/files/zh-tw/web/html/index.html b/files/zh-tw/web/html/index.html new file mode 100644 index 0000000000..762824c626 --- /dev/null +++ b/files/zh-tw/web/html/index.html @@ -0,0 +1,105 @@ +--- +title: HTML：超文本標記語言 +slug: Web/HTML +tags: + - HTML + - HTML元素 + - 多媒體 + - 影像 + - 音樂 +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>HTML</strong>（HyperText Markup Language，超文本標記語言）是打造網頁的基石。它表述並定義網頁的<em>內容</em>。伴隨 HTML 而來的技術還有描述網頁外觀（<a href="/zh-TW/docs/Web/CSS">CSS</a>）及功能性的程式語言（<a href="/zh-TW/docs/Web/JavaScript">JavaScript</a>）。</span></p> + +<p>「超文本」（HyperText）是指從某個網頁連到其他網頁的連結，不管它連結到站內抑或站外。連結連結 Web 的核心概念。藉由撰寫與上載網頁到網際網路中，你就積極參與了全球資訊網（World Wide Web)。</p> + +<p>HTML 使用「標記」（markup）來詮釋文字、圖像、或是其他能在瀏覽器裡面顯示的內容。HTML 標記還包括一些特殊「元素」（element），例如：{{HTMLElement("head")}}、{{HTMLElement("title")}}、{{HTMLElement("body")}}、{{HTMLElement("header")}}、{{HTMLElement("footer")}}、{{HTMLElement("article")}}、{{HTMLElement("section")}}、{{HTMLElement("p")}}、{{HTMLElement("div")}}、{{HTMLElement("span")}}、{{HTMLElement("img")}}……等等。</p> + +<p>HTML 文件中的元素和其他內容文字不同的地方，在於元素名稱本身用「<」與「>」包圍，稱作「標籤」。HTML 標籤不分英文大小寫。也就是說，它們可以寫成英文全大寫、全小寫、或是混在一起。像是 <strong><title> </strong> 能寫成 <Title>,<TiTlE>……等等。</p> + +<p>以下這些文章將幫助你理解 HTML。</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>HTML 介紹</span> + + <p>如果是網站開發的新手，請先閱讀我們的 <a href="/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML 基礎</a>文章以理解 HTML 是什麼還有它怎麼使用。</p> + </li> + <li><span>HTML 教學</span> + <p>有關如何使用 HTML、教學、完整範例，請參考我們的 <a href="/zh-TW/docs/Learn/HTML">HTML 學習專區</a>。</p> + </li> + <li><span>HTML 參考資料</span> + <p>在我們廣泛的 <a href="/zh-TW/docs/Web/HTML/Reference">HTML 參考資料</a>章節，你可以找到構成 HTML 每個元素和屬性的細節。.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" id="初學者教學">初學者教學</h2> + +<p>我們的<a href="/zh-TW/docs/Learn/HTML">HTML 學習專區</a>提供數個從頭開始的 HTML 教學單元：你不需要任何先備知識。</p> + +<dl> + <dt><a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML介紹</a></dt> + <dd>本單元會為你打下基礎，帶你熟悉重要概念和語法，像是如何把 HTML 套用到文本、如何建立超連結、還有如何使用 HTML 構建網頁。</dd> + <dt><a href="/zh-TW/docs/Learn/HTML/Multimedia_and_embedding">多媒體與嵌入</a></dt> + <dd>本模塊探究如何使用HTML在你的網頁裡置入多媒體，包含多種不同載入圖片的方式，如何嵌入影音，甚至是另外一整個網頁。</dd> + <dt><a href="/zh-TW/docs/Learn/HTML/Tables">HTML 表格</a></dt> + <dd>要以簡單易懂的方式將表格式的資訊呈現在網頁上會是一件挑戰。本模組涵蓋了基本的表格使用與更複雜的功能，例如標題和總結。</dd> + <dt><a href="/zh-TW/docs/Learn/HTML/Forms">HTML 表單</a></dt> + <dd>表單是網頁相當重要的部分，能夠提供與網頁互動時所需的各式的功能性。例如：註冊和登入、發送回饋意見、購買產品以及更多實用的功能。這個單元將帶領你建立網頁端的表單功能。</dd> + <dt><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Howto">用 HTML 解決常見問題</a></dt> + <dd>提供部分內容註釋連結。 當你建立一個網頁時，如何解決 HTML 中常見問題，例如 : 處理標題、增加圖片或影片、強調內文、建立基本表單等。.</dd> +</dl> + +<h2 id="進階部份">進階部份</h2> + +<dl> + <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/CORS_enabled_image">CORS 圖像</a></dt> + <dd class="landingPageList"><code>當結合了一個適合的</code><a class="glossaryLink" href="/zh-TW/docs/Glossary/CORS">CORS</a>，<code><a href="/zh-TW/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code> 屬性允許 {{HTMLElement("img")}} 元素定義的圖像被從一個地方載入，並被使用於 {{HTMLElement("canvas")}}，即便載入的地方是原處也一樣。</dd> + <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/CORS_settings_attributes">設定 CORS 屬性</a></dt> + <dd class="landingPageList">有些 HTML 元素可以支援 <a href="/zh-TW/docs/HTTP/Access_control_CORS">CORS</a>,像 {{HTMLElement("img")}} 或者 {{HTMLElement("video")}},有著 <code>crossorigin</code> (<code>crossOrigin</code> property)的屬性, 讓你能直接使用CORS的元素。</dd> + <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Focus_management_in_HTML">管理 HTML 中的焦點</a></dt> + <dd class="landingPageList">The <code><a href="/zh-TW/docs/Web/API/Document/activeElement">activeElement</a></code> DOM attribute and the <code><a href="/zh-TW/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM method help you track and control a user's interactions with elements on a web page.</dd> + <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Using_the_application_cache">使用 application cache</a></dt> + <dd class="landingPageList">Application caching lets web-based applications run offline. You can use the <strong>Application Cache</strong> (<em>AppCache</em>) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/zh-TW/docs/Web/HTML/Preloading_content">使用 rel="preload" 來預載內容</a></dt> + <dd class="landingPageList">The <code>preload</code> value of the {{htmlelement("link")}} element's {{htmlattrxref("rel", "link")}} attribute allows you to write declarative fetch requests in your HTML {{htmlelement("head")}}, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how <code>preload</code> works.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="參考資料">參考資料</h2> + +<dl> + <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Reference">HTML 參考資料</a></dt> + <dd class="landingPageList">HTML 包含<strong>元素</strong>，每個元素都可以被幾個<strong>屬性</strong>修飾。HTML 文件透過<a href="/zh-TW/docs/Web/HTML/Link_types">連結</a>把彼此連結在一起。</dd> + <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Element">HTML 元素參考</a></dt> + <dd class="landingPageList">瀏覽 <a class="glossaryLink" href="/zh-TW/docs/Glossary/HTML">HTML</a> 所有<a class="glossaryLink" href="/zh-TW/docs/Glossary/Element">元素</a>的清單。</dd> + <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Attributes">HTML 屬性參考</a></dt> + <dd class="landingPageList">HTML 元素都有<strong>屬性</strong>。這些額外屬性能透過數種方法設定元素、調整行為。</dd> + <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Global_attributes">全域屬性</a></dt> + <dd class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Element">HTML 元素</a>能指定全域屬性，<em>就算它不是標準元素</em>。也就是說，即使是與 HTML5 標準不相容的非標準元素，依舊允許全域屬性。</dd> + <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Inline_elements">行內元素</a>與<a href="/zh-TW/docs/Web/HTML/Block-level_elements">塊級元素</a></dt> + <dd class="landingPageList">HTML 元素通常為<strong>行內</strong>或<strong>區塊</strong>。行內元素佔據由標籤所定義的其餘空白位置，區塊元素則占據母元素的所有空白位置。</dd> + <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Link_types">超連結類型</a></dt> + <dd class="landingPageList">在 HTML 中有多種超連結類型能夠使用，並解定義兩個頁面間的關係，超連結元素包含了<a href="/zh-TW/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/zh-TW/docs/Web/HTML/Element/area"><code><area></code></a>, <code><a href="/zh-TW/docs/Web/HTML/Element/link"><link></a></code></dd> + <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Supported_media_formats">HTML audio 及 video 元素對媒體的支援程度</a></dt> + <dd class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Element/audio"><code><audio></code></a> 及 <a href="/zh-TW/docs/Web/HTML/Element/video"><code><video></code></a> 元素允許播放聲音和影像檔。這些元素提供了瀏覽器替代 Adobe Flash 和其它類似外掛功能的方案。</dd> + <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Kinds_of_HTML_content"> HTML 內容種類</a></dt> + <dd class="landingPageList">HTML 由多個不同類別的內容組合, 每種內容在特殊情況下在前後關係中有效，而在其它前後關系中無效。相似地，每一組內容，也指定了可以被包含在一起的類別，以及可以或不可以在其中使用的元素。此篇提供了這些類別的指南。</dd> + <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">怪異模式與標準模式</a></dt> + <dd class="landingPageList">有關怪異模式與標準模式的歷史。</dd> +</dl> + +<h2 class="landingPageList" id="相關焦點">相關焦點</h2> + +<dl> + <dt><a href="/zh-TW/docs/Web/HTML/Applying_color">使用 CSS 把色彩套用到 HTML 元素</a></dt> + <dd>本文章概括了把 CSS 加到 HTML 內容的方法，列出 HTML 文件的哪些部份可以套用色彩、而 CSS 有哪些屬性搬到這種事。裡面有示範、色彩選擇器的連結......等等。</dd> +</dl> +</div> +</div> +<span class="alllinks"><a href="/zh-TW/docs/tag/HTML">View All...</a></span></section> diff --git a/files/zh-tw/web/html/quirks_mode_and_standards_mode/index.html b/files/zh-tw/web/html/quirks_mode_and_standards_mode/index.html new file mode 100644 index 0000000000..165b062b8b --- /dev/null +++ b/files/zh-tw/web/html/quirks_mode_and_standards_mode/index.html @@ -0,0 +1,46 @@ +--- +title: 怪異模式與標準模式 +slug: Web/HTML/Quirks_Mode_and_Standards_Mode +translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode +--- +<p>很久以前，網頁通常有兩種版本：網景（Netscape）的 Navigator 以及微軟（Microsoft）的 Internet Explorer。在 W3C 創立網路標準後，為了不破壞當時既有的網站，瀏覽器不能直接起用這些標準。因此，瀏覽器導入了能分辨符合新規範、或屬於老舊網站的兩種模式。</p> + +<p>目前瀏覽器的排版引擎有三種模式：怪異模式（Quirks mode）、接近標準模式（Almost standards mode）、以及標準模式（Standards mode）。在<strong>怪異模式</strong>，排版會模擬 Navigator 4 與 Internet Explorer 5 的非標準行為。為了支持在網路標準被廣泛採用前，就已經建置好的網站，這麼做是必要的。在<strong>標準模式</strong>，行為（期待）由 HTML 與 CSS 的規範描述起來。在<strong>接近標準模式</strong>，有少數的怪異行為被實行。</p> + +<h2 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">瀏覽器如何決定用哪個模式？</h2> + +<p>對 <a href="/zh-TW/docs/HTML" title="/zh-TW/docs/HTML">HTML</a> 文件來說，瀏覽器使用文件開頭的 DOCTYPE 來決定用怪異模式處理或標準模式處理。為了確保頁面使用標準模式，請確認你的頁面，如同本範例一樣擁有 DOCTYPE：</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset=UTF-8> + <title>Hello World!</title> + </head> + <body> + </body> +</html></pre> + +<p>範例中的 <code><!DOCTYPE html></code> 是所有可用之中最簡單、並由 HTML5 推薦的。HTML 的早期變種也屬於推薦標準，不過今日的瀏覽器都會對這個 DOCTYPE 使用標準模式，就算是已過時的 Internet Explorer 6 也一樣。目前並沒有正當理由，去使用其他更複雜的 DOCTYPE。如果使用其他 DOCTYPE，可能會冒著觸發接近標準模式、或著怪異模式的風險。</p> + +<p>請確定把 DOCTYPE 正確地放在 HTML 文件頂端。任何放在 DOCTYPE 前面的東西，如註解或 XML 聲明，會令 Internet Explorer 9 或更早期的瀏覽器觸發怪異模式。</p> + +<p>在 HTML5，DOCTYPE 唯一的作用是啟用標準模式。更早期的 HTML 標準會附加其他意義，但沒有任何瀏覽器會用 DOCTYPE 去做模式間互換以外的用途。</p> + +<p>另請參閱<a class="external" href="http://hsivonen.iki.fi/doctype/" title="http://hsivonen.iki.fi/doctype/">不同的瀏覽器選擇不同模式</a>的詳細說明。</p> + +<h3 id="XHTML">XHTML</h3> + +<p>如果你的網頁使用 <a href="/zh-TW/docs/XHTML" title="XHTML">XHTML</a> 並在 <code>Content-Type</code> HTTP 標頭使用 <code>application/xhtml+xml</code> MIME 類型，你不需要使用 DOCTYPE 啟動標準模式，因為這種文件會永遠使用標準模式。不過請注意服務頁面使用 <code>application/xhtml+xml</code> 會令 Internet Explorer 8 出於未知格式之故<a href="/zh-TW/docs/XHTML#Support" title="XHTML">出現下載對話框</a>，支持 XHTML 的第一個 Internet Explorer 版本是 Internet Explorer 9。</p> + +<p>如果你的類 XHTML 網頁使用 <code>text/html</code> MIME 類型，瀏覽器會視為 HTML，你就需要 DOCTYPE 啟用標準模式。</p> + +<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">我要如何知道目前是哪個模式？</h2> + +<p>在 Firefox，請從右鍵選單選擇<em>觀看頁面資訊</em>，然後查看<em>繪製模式</em>。</p> + +<p>在 Internet Explorer，請按下 <em>F12</em>，然後查看<em>文件模式</em>.</p> + +<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">這些模式有何不同？</h2> + +<p>請參閱<a href="/zh-TW/docs/Mozilla_Quirks_Mode_Behavior" title="Mozilla_Quirks_Mode_Behavior">怪異模式的清單</a>還有<a href="/zh-TW/docs/Mozilla/Gecko_Almost_Standards_Mode" title="Gecko 的接近標準模式">接近標準模式的清單</a>之間的差別。</p> diff --git a/files/zh-tw/web/html/reference/index.html b/files/zh-tw/web/html/reference/index.html new file mode 100644 index 0000000000..ccde571ad1 --- /dev/null +++ b/files/zh-tw/web/html/reference/index.html @@ -0,0 +1,22 @@ +--- +title: HTML 參考 +slug: Web/HTML/Reference +translation_of: Web/HTML/Reference +--- +<div>{{HTMLSidebar}}</div> + +<p>這裡的 HTML 參考描述了所有 HTML 的<strong>元素</strong>（elements）與<strong>屬性</strong>（attributes），包括為所有元素接受的<strong>全域屬性</strong>（global attributes）。</p> + +<dl> + <dd></dd> + <dt><a href="/zh-TW/docs/Web/HTML/Element">HTML 元素指引</a></dt> + <dd>本頁列出了所有 HTML elements</dd> + <dt><a href="/zh-TW/docs/Web/HTML/Attributes">HTML 屬性指引</a></dt> + <dd>HTML 中的元素具有屬性 ; 而這些屬性可以藉由各種方式去設定元素或調整它們的行為，以符合使用者的期待。</dd> + <dt><a href="/zh-TW/docs/Web/HTML/Global_attributes">全域屬性</a></dt> + <dd>Global attributes may be specified on all HTML elements, even those not specified in the standard. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <foo hidden>...<foo>, even though <foo> is not a valid HTML element.</dd> + <dt><a href="/docs/Web/HTML/Link_types">連結類型</a></dt> + <dd>In HTML, the following link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, or <link> element.</dd> +</dl> + +<p><span class="alllinks"><a href="/zh-TW/docs/tag/HTML" title="Article tagged: HTML">查閱全部文章...</a></span></p> diff --git a/files/zh-tw/web/html/supported_media_formats/index.html b/files/zh-tw/web/html/supported_media_formats/index.html new file mode 100644 index 0000000000..20a026e5ff --- /dev/null +++ b/files/zh-tw/web/html/supported_media_formats/index.html @@ -0,0 +1,466 @@ +--- +title: Media formats supported by the HTML audio and video elements +slug: Web/HTML/Supported_media_formats +translation_of: Web/Media/Formats +--- +<p>The {{ HTMLElement("audio") }} and {{ HTMLElement("video") }} elements provide support for playing audio and video media without requiring plug-ins. Video codecs and audio codecs are used to handle video and audio, and different codecs offer different levels of compression and quality. A container format is used to store and transmit the coded video and audio (both together, the case of a video with a soundtrack). Many combinations of codecs and container formats exist, although only a handful of these are relevant on the Web.</p> + +<p>Different browsers do not support the same media formats in their implementations of HTML5 video and audio, mainly because of patent issues. The area of media formats on the Web has greatly suffered from patent law in many countries - including the USA and EU countries (the notes on patents in this article is provided as-is and without any warranty.) This article discusses the different codec and container combinations relevant to the web, including support in browsers on both desktop and other device types.</p> + +<p>To make an HTML5 video, which works in the newest versions of all major browsers, you can serve your video in both WebM format and MPEG H.264 AAC format, using the <a href="/en/HTML/Element/source" title="En/HTML/Element/Source"><code>source</code></a> element like this:</p> + +<pre class="brush: html"><video controls> + <source src="somevideo.webm" type="video/webm"> + <source src="somevideo.mp4" type="video/mp4"> + I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264. + <!-- You can embed a Flash player here, to play your mp4 video in older browsers --> +</video> +</pre> + +<h2 id="WebM">WebM</h2> + +<p>The <a class="external" href="http://www.webmproject.org/" title="http://www.webmproject.org/">WebM</a> format is based on a restricted version of the <a class="external" href="http://corecodec.com/products/matroska" title="http://corecodec.com/products/matroska">Matroska</a> container format. It always uses the VP8 or VP9 video codec and the Vorbis or Opus audio codec. WebM is natively supported in desktop and mobile Gecko (Firefox), Chrome and Opera, and support for the format can be added to Internet Explorer and Safari (but not on iOS) by installing an add-on.</p> + +<p><a href="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx">Statement from Microsoft on why IE9 does not have native WebM support</a>.</p> + +<p>The WebM format, specifically the VP8 video codec, had been acccused of patent infringment by a group of companies answering a call by the MPEG LA for the formation of a patent pool, but <a href="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8" title="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8">MPEG LA has agreed to license those patents to Google</a> under a "<a href="http://xiphmont.livejournal.com/59893.html?thread=310261#t310261" title="http://xiphmont.livejournal.com/59893.html?thread=310261#t310261">perpetual, transferable, royalty free license"</a>. This means, effectively, that all known patents on the WebM format are licensed to everyone for free. </p> + +<p>Gecko recognizes the following MIME types as WebM files:</p> + +<dl> + <dt><code>video/webm</code></dt> + <dd>A WebM media file containing video (and possibly audio as well).</dd> + <dt><code>audio/webm</code></dt> + <dd>A WebM media file containing only audio.</dd> +</dl> + +<h2 id="Ogg_Theora_Vorbis">Ogg Theora Vorbis</h2> + +<p>The Ogg container format with the Theora video codec and the Vorbis audio codec is supported in desktop/mobile Gecko (Firefox), Chrome, and Opera, and support for the format can be added to Safari (but not on iOS) by installing an add-on. The format is not supported in Internet Explorer in any way.</p> + +<p>WebM is generally preferred over Ogg Theora Vorbis when available, because it provides a better compression to quality ratio and is supported in more browsers. The Ogg format can however be used to support older browser versions (for example Firefox 3.5/3.6 don't support WebM, but do support Ogg.)</p> + +<p>The patent situation of Theora is similar to that of WebM.</p> + +<p>You can learn more about creating Ogg media by reading the <a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a>.</p> + +<p>Gecko recognizes the following MIME types as Ogg files:</p> + +<dl> + <dt><code>audio/ogg</code></dt> + <dd>An Ogg file containing only audio.</dd> + <dt><code>video/ogg</code></dt> + <dd>An ogg file containing video (and possibly also audio).</dd> + <dt><code>application/ogg</code></dt> + <dd>An Ogg file with unspecified content. Using one of the other two MIME types is preferred, but you can use this if you don't know what the contents of the file are.</dd> +</dl> + +<h2 id="Ogg_Opus">Ogg Opus</h2> + +<p>The Ogg container can also contain audio encoded using the <a class="external" href="http://www.opus-codec.org/" title="http://www.opus-codec.org/">Opus codec</a>. Support for this is available in Gecko 15.0 {{ geckoRelease("15.0") }} and later, on desktop and mobile browsers.</p> + +<h2 id="MP4_H.264_(AAC_or_MP3)">MP4 H.264 (AAC or MP3)</h2> + +<p>The MP4 container format with the H.264 video codec and the AAC audio codec is natively supported by desktop/mobile Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. IE and Chrome also support the MP3 audio codec in the MP4 container, but Safari does not. Firefox/Firefox for Android/Firefox OS supports the format in some cases, but only when a third-party decoder is available, and the device hardware can handle the profile used to encode the MP4.</p> + +<div class="note"> +<p><strong>Note</strong>: MP4s encoded with a high profile will not run on lower end hardware, such as low end Firefox OS phones.</p> +</div> + +<p>The MPEG media formats are covered by patents, which are not freely licensed. All the necessary licenses can be bought from MPEG LA. Since H.264 is currently not a royalty free format, it is unfit for the open web platform, according to Mozilla [<a class="external" href="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/" title="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/">1</a>, <a class="external" href="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html" title="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html">2</a>], Google [<a class="external" href="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html" title="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html">1</a>, <a class="external" href="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html" title="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html">2</a>] and Opera. However, since royalty free formats are not supported by Internet Explorer and Safari, <a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/">Mozilla has decided to support the format anyway</a>, and Google never fulfilled their promise to <span class="external">remove support for it in Chrome</span>.</p> + +<h2 id="MP3">MP3</h2> + +<p>The MP3 audio format (.mp3, <code>audio/mpeg</code>; distinct from the above MP3 audio in an MP4 container case) is supported in <code><audio></code> by Firefox/Firefox for Android/Firefox OS when the operating system provides an MP3 decoder, and by Internet Explorer, Chrome and Safari.</p> + +<h2 id="WAVE_PCM">WAVE PCM</h2> + +<p>The WAVE container format, with the PCM audio codec (WAVE codec "1") is supported by desktop/mobile Gecko (Firefox) and Safari. Files in the WAVE container format typically end with the ".wav" extension.</p> + +<div class="note"><strong>Note: </strong>See <a class="external" href="http://www.rfc-editor.org/rfc/rfc2361.txt" title="http://www.rfc-editor.org/rfc/rfc2361.txt">RFC 2361</a> for the WAVE codec registry.</div> + +<p>Gecko recognizes the following MIME types as WAVE audio files:</p> + +<ul> + <li><code>audio/wave</code> (preferred)</li> + <li><code>audio/wav</code></li> + <li><code>audio/x-wav</code></li> + <li><code>audio/x-pn-wav</code></li> +</ul> + +<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>3.0</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>9.0</td> + <td>10.50</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: PCM in WAVE</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.50</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis in WebM</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.60</td> + <td>3.1 (must be installed separately)</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis in Ogg</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.50</td> + <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> + </tr> + <tr> + <td><audio>: MP3</td> + <td>{{ CompatVersionUnknown() }} (Not in Chromium)</td> + <td>Partial (see below)</td> + <td>9.0</td> + <td>{{ CompatNo() }}</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: MP3 in MP4</td> + <td> + <p>{{ CompatUnknown() }}</p> + </td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: AAC in MP4</td> + <td> + <p>{{ CompatVersionUnknown() }} (Main only) (Not in Chromium)</p> + </td> + <td> + <p>Partial (see below)</p> + </td> + <td>9.0</td> + <td>{{ CompatNo() }}</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: Opus in Ogg</td> + <td>27.0</td> + <td>{{ CompatGeckoDesktop("15.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: VP8 and Vorbis in WebM</td> + <td>6.0</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>9.0 (<a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx">must be installed separately</a>, e.g. <a class="external" href="http://tools.google.com/dlpage/webmmf/" title="http://tools.google.com/dlpage/webmmf/">WebM MF</a>)</td> + <td>10.60</td> + <td>3.1 (must be installed separately, e.g. <a class="external" href="http://perian.org/" title="http://perian.org/">Perian</a>)</td> + </tr> + <tr> + <td><code><video></code>: VP9 and Opus in WebM</td> + <td>29.0</td> + <td>{{ CompatGeckoDesktop("28.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: Theora and Vorbis in Ogg</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.50</td> + <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> + </tr> + <tr> + <td><code><video></code>: H.264 and MP3 in MP4</td> + <td> + <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> + </td> + <td>Partial (see below)</td> + <td>9.0</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code><video></code>: H.264 and AAC in MP4</td> + <td> + <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> + </td> + <td>Partial (see below)</td> + <td>9.0</td> + <td>{{ CompatNo() }}</td> + <td>3.1</td> + </tr> + <tr> + <td>any other format</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>3.1 (plays all formats available via QuickTime)</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>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Opera Mini</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.3</td> + <td>24.0</td> + <td>1.0.1</td> + <td>10.0</td> + <td>11.0</td> + <td>Partial (see below)</td> + <td>3.2</td> + <td>29.0</td> + </tr> + <tr> + <td><code><audio></code>: PCM in WAVE</td> + <td>{{ CompatUnknown() }}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>Partial (see below)</td> + <td>3.2</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis in WebM</td> + <td>{{ CompatUnknown() }}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>11.0</td> + <td>Partial (see below)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: Vorbis in Ogg</td> + <td>{{ CompatUnknown() }}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>11.0</td> + <td>Partial (see below)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: MP3</td> + <td>{{ CompatUnknown() }}</td> + <td>Partial (see below)</td> + <td>Partial (see below)</td> + <td>10.0</td> + <td>{{ CompatNo() }}</td> + <td>Partial (see below)</td> + <td>3.2</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: MP3 in MP4</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: AAC in MP4</td> + <td>{{ CompatUnknown() }}</td> + <td>Partial (see below)</td> + <td>Partial (see below)</td> + <td>10.0</td> + <td>{{ CompatNo() }}</td> + <td>Partial (see below)</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><audio></code>: Opus in Ogg</td> + <td>{{ CompatNo() }}</td> + <td>24.0</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>Partial (see below)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code><video></code>: VP8 and Vorbis in WebM</td> + <td>2.3</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>16.0</td> + <td>Partial (see below)</td> + <td>{{ CompatNo() }}</td> + <td>29.0</td> + </tr> + <tr> + <td><code><video></code>: VP9 and Opus in WebM</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: Theora and Vorbis in Ogg</td> + <td>{{ CompatNo() }}</td> + <td>24.0</td> + <td>1.0.1</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>Partial (see below)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code><video></code>: H.264 and MP3 in MP4</td> + <td>Partial (see below)</td> + <td>24.0</td> + <td>Partial (see below)</td> + <td>10.0</td> + <td>Partial since 11.0, full since 16.0</td> + <td>Partial (see below)</td> + <td>{{ CompatUnknown() }}</td> + <td>29.0</td> + </tr> + <tr> + <td><code><video></code>: H.264 and AAC in MP4</td> + <td>Partial (see below)</td> + <td>24.0</td> + <td>Partial (see below)</td> + <td>10.0</td> + <td>Partial since 11.0, full since 16.0</td> + <td>Partial (see below)</td> + <td>3.2</td> + <td>29.0</td> + </tr> + <tr> + <td>any other format</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>Notes:</p> + +<ul> + <li>AAC is only supported in the MP4 container.</li> + <li>Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</li> + <li>To get the default Android browser to play H.264 video, you need to jump through some hoops, as <a href="http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/">explained by Peter Gasston</a>.</li> + <li>In Firefox OS 1.0.1, when detecting <code><video></code> support for different formats, <code>HTMLMediaElement.prototype.canPlayType</code> incorrectly reports <code>true</code> for h.264 video whereas in actual fact h.264 is not supported. In Firefox OS 1.1 this problem has been fixed.</li> + <li>To avoid patent issues, support for MPEG 4, H.264, MP3 and AAC is not built directly into Firefox on desktop and mobile (Android and Firefox OS). Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4). Firefox desktop supports these formats on the following platforms:</li> +</ul> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Platform</th> + <th scope="col">Gecko (Firefox) version</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=799315" title="https://bugzilla.mozilla.org/show_bug.cgi?id=799315">Windows 7+</a></td> + <td>21.0</td> + </tr> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153" title="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a></td> + <td>22.0</td> + </tr> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351" title="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a></td> + <td>20.0</td> + </tr> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408" title="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a></td> + <td>15.0</td> + </tr> + <tr> + <td>Linux</td> + <td> + <p>26.0 (relies on GStreamer codecs being installed)</p> + </td> + </tr> + <tr> + <td>OS X 10.7</td> + <td><strong>Not yet </strong>(see <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=851290" title="https://bugzilla.mozilla.org/show_bug.cgi?id=851290">bug</a>)</td> + </tr> + </tbody> +</table> + +<ul> + <li><a class="external" href="http://dev.opera.com/articles/view/introduction-html5-video/#codecs" title="http://dev.opera.com/articles/view/introduction-html5-video/#codecs">Video codecs in Opera</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx">Video codecs in Internet Explorer</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx">Audio codecs in Internet Explorer</a></li> + <li><a href="http://www.chromium.org/audio-video" title="http://www.chromium.org/audio-video">Audio & Video codecs in Chrome</a></li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="internal" href="/en/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Using audio and video in Firefox</a></li> + <li><a href="http://bluishcoder.co.nz/2013/08/21/html-media-support-in-firefox.html">HTML media support in Firefox</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#media-elements" title="http://www.whatwg.org/specs/web-apps/current-work/#media-elements">Media elements</a> (HTML 5 specification)</li> + <li><code><a class="internal" href="/en/HTML/Element/Video" title="En/HTML/Element/Video">video</a></code></li> + <li><a class="internal" href="/en/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li> +</ul> diff --git a/files/zh-tw/web/html/using_the_application_cache/index.html b/files/zh-tw/web/html/using_the_application_cache/index.html new file mode 100644 index 0000000000..660b5619a9 --- /dev/null +++ b/files/zh-tw/web/html/using_the_application_cache/index.html @@ -0,0 +1,391 @@ +--- +title: Offline resources on Firefox +slug: Web/HTML/Using_the_application_cache +tags: + - Firefox 3 + - Offline web applications + - 待翻譯 +translation_of: Web/HTML/Using_the_application_cache +--- +<div>{{DefaultAPISidebar("App Cache")}}{{deprecated_header}}</div> + +<div class="warning"> +<p>Using the <em>application caching</em> feature described here is at this point highly discouraged; it’s <a href="https://html.spec.whatwg.org/multipage/browsers.html#offline">in the process of being removed from the Web platform</a>. Use <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> instead. In fact as of Firefox 44, when <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a> is used to provide offline support for a page a warning message is now displayed in the console advising developers to use <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> instead ({{bug("1204581")}}).</p> +</div> + +<h2 id="Introduction">Introduction</h2> + +<p><a href="/en-US/docs/HTML/HTML5">HTML5</a> provides an <em>application caching</em> mechanism that lets web-based applications run offline. Developers can use the <strong>Application Cache</strong> (<em>AppCache</em>) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.</p> + +<p>Using an application cache gives an application the following benefits:</p> + +<ul> + <li>Offline browsing: users can navigate a site even when they are offline.</li> + <li>Speed: cached resources are local, and therefore load faster.</li> + <li>Reduced server load: the browser only downloads resources that have changed from the server.</li> +</ul> + +<h2 id="How_the_application_cache_works">How the application cache works</h2> + +<h3 id="Enabling_the_application_cache">Enabling the application cache</h3> + +<p>To enable the application cache for an application, you must include the {{htmlattrxref("manifest", "html")}} attribute in the {{HTMLElement("html")}} element in your application's pages, as shown in the following example:</p> + +<pre class="brush: html"><html manifest="example.appcache"> + ... +</html> +</pre> + +<p>The manifest attribute references a <strong>cache manifest</strong> file, which is a text file that lists resources (files) that the browser should cache for your application.</p> + +<p>You should include the <code>manifest</code> attribute on every page of your application that you want cached. The browser does not cache pages that do not contain the <code>manifest</code> attribute, unless such pages are explicitly listed in the manifest file itself. You do not need to list all the pages you want cached in the manifest file, the browser implicitly adds every page that the user visits and that has the <code>manifest</code> attribute set to the application cache.</p> + +<p>Some browsers (e.g., Firefox) display a notification bar the first time a user loads an application that uses the application cache. The notification bar displays a message such as:</p> + +<p style="margin-left: 40px;">This website (<code>www.example.com</code>) is asking to store data on your computer for offline use. [Allow] [Never for This Site] [Not Now]</p> + +<p>The term "offline(-enabled) applications" sometimes refers specifically to applications that the user has allowed to use offline capabilities.</p> + +<h3 id="Loading_documents">Loading documents</h3> + +<p>The use of an application cache modifies the normal process of loading a document:</p> + +<ul> + <li>If an application cache exists, the browser loads the document and its associated resources directly from the cache, without accessing the network. This speeds up the document load time.</li> + <li>The browser then checks to see if the cache manifest has been updated on the server.</li> + <li>If the cache manifest has been updated, the browser downloads a new version of the manifest and the resources listed in the manifest. This is done in the background and does not affect performance significantly.</li> +</ul> + +<p>The process for loading documents and updating the application cache is specified in greater detail below:</p> + +<ol> + <li>When the browser visits a document that includes the <code>manifest</code> attribute, if no application cache exists, the browser loads the document and then fetches all the entries listed in the manifest file, creating the first version of the application cache.</li> + <li>Subsequent visits to that document cause the browser to load the document and other assets specified in the manifest file from the application cache (not from the server). In addition, the browser also sends a <code>checking</code> event to the <code><a href="/en-US/docs/DOM/window.applicationCache">window.applicationCache</a></code> object, and fetches the manifest file, following the appropriate HTTP caching rules.</li> + <li>If the currently-cached copy of the manifest is up-to-date, the browser sends a <code>noupdate</code> event to the <code>applicationCache</code> object, and the update process is complete. Note that if you change any cached resources on the server, you must also change the manifest file itself, so that the browser knows it needs to fetch all the resources again.</li> + <li>If the manifest file <em>has</em> changed, all the files listed in the manifest—as well as those added to the cache by calling <code><a href="/en-US/docs/nsIDOMOfflineResourceList#add.28.29">applicationCache.add()</a></code>—are fetched into a temporary cache, following the appropriate HTTP caching rules. For each file fetched into this temporary cache, the browser sends a <code>progress</code> event to the <code>applicationCache</code> object. If any errors occur, the browser sends an <code>error</code> event, and the update halts.</li> + <li>Once all the files have been successfully retrieved, they are moved into the real offline cache automatically, and a <code>cached</code> event is sent to the <code>applicationCache</code> object. Since the document has already been loaded into the browser from the cache, the updated document will not be rendered until the document is reloaded (either manually or programatically).</li> +</ol> + +<h2 id="Storage_location_and_clearing_the_offline_cache">Storage location and clearing the offline cache</h2> + +<p>In Chrome you can clear the offline cache by selecting "Clear browsing data..." in the preferences or by visiting <a>chrome://appcache-internals/</a>. Safari has a similar "Empty cache" setting in its preferences but a browser restart may also be required.</p> + +<p>In Firefox, the offline cache data is stored separately from the Firefox profile—next to the regular disk cache:</p> + +<ul> + <li>Windows Vista/7: <code>C:\Users\<username>\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache</code></li> + <li>Mac/Linux: <code>/Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache</code></li> +</ul> + +<p>In Firefox the current status of the offline cache can be inspected on the <code>about:cache</code> page (under the "Offline cache device" heading). The offline cache can be cleared for each site separately using the "Remove..." button in Tools -> Options -> Advanced -> Network -> Offline data.</p> + +<p>Prior to Firefox 11, neither Tools -> Clear Recent History nor Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now cleared the offline cache. This has been fixed.</p> + +<p>On Linux, you can find the setting at Edit > Preferences > Advanced > Network > Offline Web Content and User Data</p> + +<p>See also <a href="/en-US/docs/DOM/Storage#Storage_location_and_clearing_the_data">clearing the DOM Storage data</a>.</p> + +<p>Application caches can also become obsolete. If an application's manifest file is removed from the server, the browser removes all application caches that use that manifest, and sends an "obsoleted" event to the <code>applicationCache</code> object. This sets the application cache's state to <code>OBSOLETE</code>.</p> + +<h2 id="The_cache_manifest_file">The cache manifest file</h2> + +<h3 id="Referencing_a_cache_manifest_file">Referencing a cache manifest file</h3> + +<p>The <code>manifest</code> attribute in a web application can specify either the relative path of a cache manifest file or an absolute URL. (Absolute URLs must be from the same origin as the application). A cache manifest file can have any file extension, but it must be served with the MIME type <code>text/cache-manifest</code>.</p> + +<div class="note"><strong>Note: </strong>On Apache servers, the MIME type for manifest (.appcache) files can be set by adding <code>AddType text/cache-manifest .appcache</code> to a .htaccess file within either the root directory, or the same directory as the application.</div> + +<h3 id="Entries_in_a_cache_manifest_file">Entries in a cache manifest file</h3> + +<p>The cache manifest file is a simple text file that lists the resources the browser should cache for offline access. Resources are identified by URI. Entries listed in the cache manifest must have the same scheme, host, and port as the manifest.</p> + +<h3 id="Example_1_a_simple_cache_manifest_file">Example 1: a simple cache manifest file</h3> + +<p>The following is a simple cache manifest file, <code>example.appcache</code>, for an imaginary web site at <span class="nowiki">www.example.com</span>.</p> + +<pre class="eval">CACHE MANIFEST +# v1 - 2011-08-13 +# This is a comment. +<span class="nowiki">http://www.example.com/index.html</span> +<span class="nowiki">http://www.example.com/header.png</span> +<span class="nowiki">http://www.example.com/blah/blah</span> +</pre> + +<p>A cache manifest file can include three sections (<code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code>, discussed below). In the example above, there is no section header, so all data lines are assumed to be in the explicit (<code>CACHE</code>) section, meaning that the browser should cache all the listed resources in the application cache. Resources can be specified using either absolute or relative URLs (e.g., <code>index.html</code>).</p> + +<p>The "v1" comment in the example above is there for a good reason. Browsers only update an application cache when the manifest file changes, byte for byte. If you change a cached resource (for example, you update the <code>header.png</code> image with new content), you must also change the content of the manifest file in order to let browsers know that they need to refresh the cache. You can make any change you want to the manifest file, but revising a version number is the recommended best practice.</p> + +<div class="warning"><strong>Important:</strong> Do not specify the manifest itself in the cache manifest file, otherwise it will be nearly impossible to inform the browser a new manifest is available.</div> + +<h3 id="Sections_in_a_cache_manifest_file_CACHE_NETWORK_and_FALLBACK">Sections in a cache manifest file: <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code></h3> + +<p>A manifest can have three distinct sections: <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code>.</p> + +<dl> + <dt><code>CACHE:</code></dt> + <dd>This is the default section for entries in a cache manifest file. Files listed under the <code>CACHE:</code> section header (or immediately after the <code>CACHE MANIFEST</code> line) are explicitly cached after they're downloaded for the first time.</dd> + <dt><code>NETWORK:</code></dt> + <dd>Files listed under the <code>NETWORK:</code> section header in the cache manifest file are white-listed resources that require a connection to the server. All requests to such resources bypass the cache, even if the user is offline. The wildcard character <code>*</code> can be used once. Most sites need <code>*</code>.</dd> + <dt><code>FALLBACK:</code></dt> + <dd>The <code>FALLBACK:</code> section specifies fallback pages the browser should use if a resource is inaccessible. Each entry in this section lists two URIs—the first is the resource, the second is the fallback. Both URIs must be relative and from the same origin as the manifest file. Wildcards may be used.</dd> +</dl> + +<p>The <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK </code>sections can be listed in any order in a cache manifest file, and each section can appear more than once in a single manifest.</p> + +<h3 id="Example_2_a_more_complete_cache_manifest_file">Example 2: a more complete cache manifest file</h3> + +<p>The following is a more complete cache manifest file for the imaginary web site at <span class="nowiki">www.example.com</span>:</p> + +<pre class="eval">CACHE MANIFEST +# v1 2011-08-14 +# This is another comment +index.html +cache.html +style.css +image1.png + +# Use from network if available +NETWORK: +network.html + +# Fallback content +FALLBACK: +. fallback.html +</pre> + +<p>This example uses <code>NETWORK</code> and <code>FALLBACK</code> sections to specify that the <code>network.html</code> page must always be retrieved from the network, and that the <code>fallback.html</code> page should be served as a fallback resource (e.g., in case a connection to the server cannot be established).</p> + +<h3 id="Structure_of_a_cache_manifest_file">Structure of a cache manifest file</h3> + +<p>Cache manifest files must be served with the <code>text/cache-manifest</code> MIME type. All resources served using this MIME type must follow the syntax for an application cache manifest, as defined in this section.</p> + +<p>Cache manifests are UTF-8 format text files, and may optionally include a BOM character. Newlines may be represented by line feed (<code>U+000A</code>), carriage return (<code>U+000D</code>), or carriage return and line feed both.</p> + +<p>The first line of the cache manifest must consist of the string <code>CACHE MANIFEST</code> (with a single <code>U+0020</code> space between the two words), followed by zero or more space or tab characters. Any other text on the line is ignored.</p> + +<p>The remainder of the cache manifest must be comprised of zero or more of the following lines:</p> + +<dl> + <dt>Blank line</dt> + <dd>You may use blank lines comprised of zero or more space and tab characters.</dd> + <dt>Comment</dt> + <dd>Comments consist of zero or more tabs or spaces followed by a single <code>#</code> character, followed by zero or more characters of comment text. Comments may only be used on their own lines (after the initial <code>CACHE MANIFEST</code> line), and cannot be appended to other lines. This means that you cannot specify fragment identifiers.</dd> + <dt>Section header</dt> + <dd>Section headers specify which section of the cache manifest is being manipulated. There are three possible section headers:</dd> +</dl> + +<blockquote> +<table class="standard-table"> + <tbody> + <tr> + <th>Section header</th> + <th>Description</th> + </tr> + <tr> + <td><code>CACHE:</code></td> + <td>Switches to the explicit section of the cache manifest (this is the default section).</td> + </tr> + <tr> + <td><code>NETWORK:</code></td> + <td>Switches to the online whitelist section of the cache manifest.</td> + </tr> + <tr> + <td><code>FALLBACK:</code></td> + <td>Switches to the fallback section of the cache manifest.</td> + </tr> + </tbody> +</table> +</blockquote> + +<dl> + <dd>The section header line may include whitespaces, but must include the colon (<code>:</code>) in the section name.</dd> + <dt>Section data</dt> + <dd>The format for lines of data varies from section to section. In the explicit (<code>CACHE:</code>) section, each line is a valid URI or IRI reference to a resource to cache (no wildcard characters are allowed in this sections). Whitespace is allowed before and after the URI or IRI on each line. In the Fallback section each line is a valid URI or IRI reference to a resource, followed by a fallback resource that is to be served up when a connection with the server cannot be made. In the network section, each line is a valid URI or IRI reference to a resource to fetch from the network (or the wildcard character <code>*</code> can be used in this section). + <div class="note"><strong>Note: </strong>Relative URIs are relative to the cache manifest's URI, not to the URI of the document referencing the manifest.</div> + </dd> +</dl> + +<p>Cache manifest files can switch from section to section at will (each section header can be used more than once), and sections are allowed to be empty.</p> + +<h2 id="Resources_in_an_application_cache">Resources in an application cache</h2> + +<p>An application cache always includes at least one resource, identified by URI. All resources fit into one of the following categories:</p> + +<dl> + <dt>Master entries</dt> + <dd>These are resources added to the cache because a browsing context visited by the user included a document that indicated that it was in this cache using its <code>manifest</code> attribute.</dd> + <dt>Explicit entries</dt> + <dd>These are resources explicitly listed in the application's cache manifest file.</dd> + <dt>Network entries</dt> + <dd>These are resources listed in the application's cache manifest files as network entries.</dd> + <dt>Fallback entries</dt> + <dd>These are resources listed in the application's cache manifest files as fallback entries.</dd> +</dl> + +<div class="note"><strong>Note:</strong> Resources can be tagged with multiple categories, and can therefore be categorized as multiple entries. For example, an entry can be both an explicit entry and a fallback entry.</div> + +<p>Resource categories are described in greater detail below.</p> + +<h3 id="Master_entries">Master entries</h3> + +<p>Master entries are any HTML files that include a {{htmlattrxref("manifest","html")}} attribute in their {{HTMLElement("html")}} element. For example, let's say we have the HTML file <a href="http://www.example.com/entry.html">http://www.example.com/entry.html</a>, which looks like this:</p> + +<pre class="brush: html"><html manifest="example.appcache"> + <h1>Application Cache Example</h1> +</html> +</pre> + +<p>If <code>entry.html</code> is not listed in the <code>example.appcache</code> cache manifest file, visiting the <code>entry.html</code> page causes <code>entry.html</code> to be added to the application cache as a master entry.</p> + +<h3 id="Explicit_entries">Explicit entries</h3> + +<p>Explicit entries are resources that are explicitly listed in the <code>CACHE </code>section of a cache manifest file.</p> + +<h3 id="Network_entries">Network entries</h3> + +<p>The <code>NETWORK</code> section of a cache manifest file specifies resources for which a web application requires online access. Network entries in an application cache are essentially an "online whitelist"—URIs specified in the <code>NETWORK</code> section are loaded from the server instead of the cache. This lets the browser's security model protect the user from potential security breaches by limiting access to approved resources.</p> + +<p>As an example, you can use network entries to load and execute scripts and other code from the server instead of the cache:</p> + +<pre class="eval">CACHE MANIFEST +NETWORK: +/api +</pre> + +<p>The cache manifest section listed above ensures that requests to load resources contained in the <code><a href="http://www.example.com/api/" rel="freelink">http://www.example.com/api/</a></code> subtree always go to the network without attempting to access the cache.</p> + +<div class="note"><strong>Note</strong>: Simply omitting master entries (files that have the <code>manifest</code> attribute set in the <code>html</code> element) from the manifest file would not have the same result, because master entries will be added—and subsequently served from—the application cache.</div> + +<h3 id="Fallback_entries">Fallback entries</h3> + +<p>Fallback entries are used when an attempt to load a resource fails. For example, let's say the cache manifest file <code><a href="http://www.example.com/example.appcache" rel="freelink">http://www.example.com/example.appcache</a></code> includes the following content:</p> + +<pre class="eval">CACHE MANIFEST +FALLBACK: +example/bar/ example.html +</pre> + +<p>Any request to <code><a href="http://www.example.com/example/bar/" rel="freelink">http://www.example.com/example/bar/</a></code> or any of its subdirectories and their content cause the browser to issue a network request to attempt to load the requested resource. If the attempt fails, due to either a network failure or a server error of some kind, the browser loads the file <code>example.html</code> instead.</p> + +<h2 id="Cache_states">Cache states</h2> + +<p>Each application cache has a <strong>state</strong>, which indicates the current condition of the cache. Caches that share the same manifest URI share the same cache state, which can be one of the following:</p> + +<dl> + <dt><code>UNCACHED</code></dt> + <dd>A special value that indicates that an application cache object is not fully initialized.</dd> + <dt><code>IDLE</code></dt> + <dd>The application cache is not currently in the process of being updated.</dd> + <dt><code>CHECKING</code></dt> + <dd>The manifest is being fetched and checked for updates.</dd> + <dt><code>DOWNLOADING</code></dt> + <dd>Resources are being downloaded to be added to the cache, due to a changed resource manifest.</dd> + <dt><code>UPDATEREADY</code></dt> + <dd>There is a new version of the application cache available. There is a corresponding <code>updateready</code> event, which is fired instead of the <code>cached</code> event when a new update has been downloaded but not yet activated using the <code>swapCache()</code> method.</dd> + <dt><code>OBSOLETE</code></dt> + <dd>The application cache group is now obsolete.</dd> +</dl> + +<h2 id="Testing_for_updates_to_the_cache_manifest">Testing for updates to the cache manifest</h2> + +<p>You can programmatically test to see if an application has an updated cache manifest file, using JavaScript. Since a cache manifest file may have been updated before a script attaches event listeners to test for updates, scripts should always test <code>window.applicationCache.status</code>.</p> + +<pre class="brush: js">function onUpdateReady() { + console.log('found new version!'); +} +window.applicationCache.addEventListener('updateready', onUpdateReady); +if(window.applicationCache.status === window.applicationCache.UPDATEREADY) { + onUpdateReady(); +}</pre> + +<p>To manually start testing for a new manifest file, you can use <code>window.applicationCache.update()</code>.</p> + +<h2 id="Gotchas">Gotchas</h2> + +<ul> + <li>Never access cached files by using traditional GET parameters (like <code>other-cached-page.html?parameterName=value</code>). This will make the browser bypass the cache and attempt to get it from network. To link to cached resources that have parameters parsed in JavaScript use parameters in the hash part of the link, such as <code>other-cached-page.html#whatever?parameterName=value</code>.</li> + <li>When applications are cached, simply updating the resources (files) that are used in a web page is not enough to update the files that have been cached. You must update the cache manifest file itself before the browser retrieves and uses the updated files. You can do this programmatically using <code>window.applicationCache.swapCache()</code>, though resources that have already been loaded will not be affected. To make sure that resources are loaded from a new version of the application cache, refreshing the page is ideal.</li> + <li>It's a good idea to set expires headers on your web server for <code>*.appcache</code> files to expire immediately. This avoids the risk of caching manifest files. For example, in Apache you can specify such a configuration as follows:<br> + <code>ExpiresByType text/cache-manifest "access plus 0 seconds"</code></li> +</ul> + +<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>4.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td> + <td>10.0</td> + <td>10.6</td> + <td>4.0</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>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0.1<sup>[2]</sup></td> + <td>11.0<sup>[3]</sup></td> + <td>11.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Versions of Firefox prior to 3.5 ignore the <code>NETWORK</code> and <code>FALLBACK</code> sections of the cache manifest file.</p> + +<p>[2] When using AppCache to provide Firefox OS hosted apps with offline capabilities, you need to declare the AppCache manifest inside your Firefox OS manifest.webapp file's <a href="/en-US/Apps/Build/Manifest#appcache_path">appcache_path field</a>.</p> + +<p>[3] Reloading the page in IE Mobile will clear the application cache, so the webpage will fail to load. However, closing the page and opening via bookmark again works fine.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - A Beginner's Guide to Using the Application Cache</a></li> + <li><a href="http://appcache.offline.technology/">Appcache Facts</a> - detailed information on AppCache idiosyncrasies</li> + <li><a href="http://alistapart.com/article/application-cache-is-a-douchebag">A List Apart: Application Cache is a Douchebag</a> + <ul> + <li><a href="http://flailingmonkey.com/application-cache-not-a-douchebag">The Application Cache is no longer a Douchebag</a> - an overview of the app cache debugging tools added in Firefox 23.</li> + </ul> + </li> + <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">HTML 5 working draft: Offline web applications</a></li> + <li><a href="http://www.w3.org/TR/offline-webapps/">W3C Working Group Note: Offline Web Applications</a></li> + <li><a href="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage">HTML5 Cache Manifest: An Off-label Usage</a></li> + <li><a href="http://www.ibm.com/developerworks/web/library/wa-ffox3/">Get ready for Firefox 3.0 - A Web developer's guide to the many new features in this popular browser, especially the offline application features</a> (IBM developerWorks)</li> + <li><a href="/en-US/docs/Application_cache_implementation_overview">Application cache implementation overview</a></li> + <li><a href="//www.onlinewebcheck.com/check.php?adv=1">OnlineWebCheck.com - Check cache manifest file syntax</a> (Desktop app for Windows)</li> +</ul> |