From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/zh-tw/web/html/applying_color/index.html | 502 ++++++++++++++ files/zh-tw/web/html/attributes/index.html | 643 ++++++++++++++++++ .../zh-tw/web/html/block-level_elements/index.html | 130 ++++ files/zh-tw/web/html/element/a/index.html | 313 +++++++++ files/zh-tw/web/html/element/blink/index.html | 75 +++ files/zh-tw/web/html/element/blockquote/index.html | 149 ++++ files/zh-tw/web/html/element/br/index.html | 130 ++++ files/zh-tw/web/html/element/button/index.html | 355 ++++++++++ files/zh-tw/web/html/element/canvas/index.html | 193 ++++++ files/zh-tw/web/html/element/code/index.html | 138 ++++ files/zh-tw/web/html/element/div/index.html | 95 +++ files/zh-tw/web/html/element/font/index.html | 45 ++ files/zh-tw/web/html/element/form/index.html | 191 ++++++ files/zh-tw/web/html/element/frameset/index.html | 39 ++ files/zh-tw/web/html/element/hr/index.html | 168 +++++ files/zh-tw/web/html/element/index.html | 106 +++ files/zh-tw/web/html/element/input/index.html | 750 +++++++++++++++++++++ .../zh-tw/web/html/element/input/submit/index.html | 211 ++++++ files/zh-tw/web/html/element/marquee/index.html | 112 +++ files/zh-tw/web/html/element/meter/index.html | 143 ++++ files/zh-tw/web/html/element/nav/index.html | 107 +++ files/zh-tw/web/html/element/optgroup/index.html | 161 +++++ files/zh-tw/web/html/element/picture/index.html | 156 +++++ files/zh-tw/web/html/element/q/index.html | 103 +++ files/zh-tw/web/html/element/ruby/index.html | 93 +++ files/zh-tw/web/html/element/script/index.html | 202 ++++++ files/zh-tw/web/html/element/summary/index.html | 135 ++++ files/zh-tw/web/html/element/table/index.html | 362 ++++++++++ files/zh-tw/web/html/element/template/index.html | 145 ++++ files/zh-tw/web/html/element/time/index.html | 162 +++++ files/zh-tw/web/html/forms_in_html/index.html | 83 +++ .../html/global_attributes/data-_star_/index.html | 114 ++++ files/zh-tw/web/html/global_attributes/index.html | 474 +++++++++++++ .../html/global_attributes/spellcheck/index.html | 39 ++ files/zh-tw/web/html/index.html | 105 +++ .../html/quirks_mode_and_standards_mode/index.html | 46 ++ files/zh-tw/web/html/reference/index.html | 22 + .../web/html/supported_media_formats/index.html | 466 +++++++++++++ .../html/using_the_application_cache/index.html | 391 +++++++++++ 39 files changed, 7854 insertions(+) create mode 100644 files/zh-tw/web/html/applying_color/index.html create mode 100644 files/zh-tw/web/html/attributes/index.html create mode 100644 files/zh-tw/web/html/block-level_elements/index.html create mode 100644 files/zh-tw/web/html/element/a/index.html create mode 100644 files/zh-tw/web/html/element/blink/index.html create mode 100644 files/zh-tw/web/html/element/blockquote/index.html create mode 100644 files/zh-tw/web/html/element/br/index.html create mode 100644 files/zh-tw/web/html/element/button/index.html create mode 100644 files/zh-tw/web/html/element/canvas/index.html create mode 100644 files/zh-tw/web/html/element/code/index.html create mode 100644 files/zh-tw/web/html/element/div/index.html create mode 100644 files/zh-tw/web/html/element/font/index.html create mode 100644 files/zh-tw/web/html/element/form/index.html create mode 100644 files/zh-tw/web/html/element/frameset/index.html create mode 100644 files/zh-tw/web/html/element/hr/index.html create mode 100644 files/zh-tw/web/html/element/index.html create mode 100644 files/zh-tw/web/html/element/input/index.html create mode 100644 files/zh-tw/web/html/element/input/submit/index.html create mode 100644 files/zh-tw/web/html/element/marquee/index.html create mode 100644 files/zh-tw/web/html/element/meter/index.html create mode 100644 files/zh-tw/web/html/element/nav/index.html create mode 100644 files/zh-tw/web/html/element/optgroup/index.html create mode 100644 files/zh-tw/web/html/element/picture/index.html create mode 100644 files/zh-tw/web/html/element/q/index.html create mode 100644 files/zh-tw/web/html/element/ruby/index.html create mode 100644 files/zh-tw/web/html/element/script/index.html create mode 100644 files/zh-tw/web/html/element/summary/index.html create mode 100644 files/zh-tw/web/html/element/table/index.html create mode 100644 files/zh-tw/web/html/element/template/index.html create mode 100644 files/zh-tw/web/html/element/time/index.html create mode 100644 files/zh-tw/web/html/forms_in_html/index.html create mode 100644 files/zh-tw/web/html/global_attributes/data-_star_/index.html create mode 100644 files/zh-tw/web/html/global_attributes/index.html create mode 100644 files/zh-tw/web/html/global_attributes/spellcheck/index.html create mode 100644 files/zh-tw/web/html/index.html create mode 100644 files/zh-tw/web/html/quirks_mode_and_standards_mode/index.html create mode 100644 files/zh-tw/web/html/reference/index.html create mode 100644 files/zh-tw/web/html/supported_media_formats/index.html create mode 100644 files/zh-tw/web/html/using_the_application_cache/index.html (limited to 'files/zh-tw/web/html') 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 +--- +
{{HTMLRef}}
+ +

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. With CSS, there are lots of ways to add color to your HTML elements to create just the look you want. This article is a primer introducing each of the ways CSS color can be used in HTML.

+ +

Fortunately, adding color to your HTML is actually really easy to do, and you can add color to nearly anything.

+ +

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")}}.

+ +

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.

+ +

Things that can have color

+ +

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.

+ +

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.

+ +

Text

+ +

Whenever an element is rendered, these properties are used to determine the color of the text, its background, and any decorations on the text.

+ +
+
{{cssxref("color")}}
+
The color to use when drawing the text and any text decorations (such as the addition of under- or overlines, strike-through lines, and so forth.
+
{{cssxref("background-color")}}
+
The text's background color.
+
{{cssxref("text-shadow")}}
+
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.
+
{{cssxref("text-decoration-color")}}
+
By default, text decorations (such as underlines, strikethroughs, etc) use the color property as their colors. However, you can override that behavior and use a different color for them with the text-decoration-color property.
+
{{cssxref("text-emphasis-color")}}
+
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.
+
{{cssxref("caret-color")}}
+
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.
+
+ +

Boxes

+ +

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.

+ +
+
{{anch("Borders")}}
+
See the section {{anch("Borders")}} for a list of the CSS properties you can use to set the colors of a box's borders.
+
{{cssxref("background-color")}}
+
The background color to use in areas of the element that have no foreground content.
+
{{cssxref("column-rule-color")}}
+
The color to use when drawing the line separating columns of text.
+
{{cssxref("outline-color")}}
+
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.
+
+ +

Borders

+ +

Any element can have a border 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 Styling borders using CSS to learn more about applying styles to borders.

+ +

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 width, style (solid, dashed, etc.), and so forth.

+ +
+
{{cssxref("border-color")}}
+
Specifies a single color to use for every side of the element's border.
+
{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}
+
Lets you set the color of the corresponding side of the element's border.
+
{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}
+
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).
+
{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}
+
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 border-inline-start-color is applied to the right side of the border.
+
+ +

Other ways to use color

+ +

CSS isn't the only web technology that supports color. There are graphics technologies that are available on the web which also support color.

+ +
+
The HTML Canvas API
+
Lets you draw 2D bitmapped graphics in a {{HTMLElement("canvas")}} element. See our Canvas tutorial to learn more.
+
SVG (Scalable Vector Graphics)
+
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.
+
WebGL
+
The Web Graphics Library is an OpenGL ES-based API for drawing high-performance 2D and 3D graphics on the Web. See Learn WebGL for 2D and 3D graphics to find out more.
+
+ +

How to describe a color

+ +

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.

+ +

For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("<color>")}} unit.

+ +

Keywords

+ +

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 red, blue, or orange), shades of gray (from black to white, including colors like darkgray and lightgrey), and a variety of other blended colors including lightseagreen, cornflowerblue, and rebeccapurple.

+ +

See {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords.

+ +

RGB values

+ +

There are three ways to represent an RGB color in CSS.

+ +

Hexadecimal string notation

+ +

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 must 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, "#D" becomes "#DD" when drawing.

+ +

A color in hexadecimal string notation always begins with the character "#". After that come the hexadecimal digits of the color code. The string is case-insensitive.

+ +
+
"#rrggbb"
+
Specifies a fully-opaque color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb.
+
"#rrggbbaa"
+
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb. The alpha channel is specified by 0xaa; the lower this value is, the more translucent the color becomes.
+
"#rgb"
+
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb.
+
"#rgba"
+
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb. The alpha channel is specified by 0xaa; the lower this value is, the more translucent the color becomes.
+
+ +

As an example, you can represent the opaque color bright blue as "#0000ff" or "#00f". To make it 25% opaque, you can use "#0000ff44" or "#00f4".

+ +

RGB functional notation

+ +

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.

+ +

Legal values for each of these parameters are:

+ +
+
red, green, and blue
+
Each must be an {{cssxref("<integer>")}} value between 0 and 255 (inclusive), or a {{cssxref("<percentage>")}} from 0% to 100%.
+
alpha
+
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.
+
+ +

For example, a bright red that's 50% opaque can be represented as rgb(255, 0, 0, 0.5) or rgb(100%, 0, 0, 50%).

+ +

HSL functional notation

+ +

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 hsl() CSS function is very similar to the rgb() function in usage otherwise.

+ +
+
HSL color cylinder +
Figure 1. An HSL color cylinder. 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 SharkD on Wikipedia, distributed under the CC BY-SA 3.0 license.
+
+
+ +

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 (deg), radians (rad), gradians (grad), or turns (turn). But this doesn't control how vivid or dull, or how bright or dark the color is.

+ +

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.

+ +

Think of it like creating the perfect paint color:

+ +
    +
  1. 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 hue (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.
    2. +
  2. 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.
    3. +
  3. 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.
    4. +
+ +

You can also optionally include an alpha channel, to make the color less than 100% opaque.

+ +

Here are some sample colors in HSL notation:

+ +
+ + +

{{EmbedLiveSample("hsl-swatches", 300, 260)}}

+
+ +
+

Note that when you omit the hue's unit, it's assumed to be in degrees (deg).

+
+ +

Using color

+ +

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.

+ +

Specifying colors in stylesheets

+ +

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.

+ +

Let's take a look at an example, starting by looking at the results we're trying to achieve:

+ +
{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}
+ +

HTML

+ +

The HTML responsible for creating the above example is shown here:

+ +
<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>
+ +

This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <div>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.

+ +

The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.

+ +

CSS

+ +

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.

+ +
.wrapper {
+  width: 620px;
+  height: 110px;
+  margin: 0;
+  padding: 10px;
+  border: 6px solid mediumturquoise;
+}
+ +

The .wrapper 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")}}.

+ +

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 mediumturquoise.

+ +

Our two colored boxes share a number of properties in common, so next we establish a class, .box, that defines those shared properties:

+ +
.box {
+  width: 290px;
+  height: 100px;
+  margin: 0;
+  padding: 4px 6px;
+  font: 28px "Marker Felt", "Zapfino", cursive;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+ +

In brief, .box establishes the size of each box, as well as the configuration of the font used within. We also take advantage of CSS Flexbox to easily center the contents of each box. We enable flex mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to center. Then we can create a class for each of the two boxes that defines the propeties that differ between the two.

+ +
.boxLeft {
+  float: left;
+  background-color: rgb(245, 130, 130);
+  outline: 2px solid darkred;
+}
+ +

The .boxLeft class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:

+ + + +
.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;
+}
+ +

Finally, the .boxRight 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:

+ + + +

Letting the user pick a color

+ +

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 "color" as the value of its {{htmlattrxref("type", "input")}} attribute.

+ +

The <input> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.

+ +

Example: Picking a color

+ +

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.

+ +

{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}

+ +
+

On macOS, you indicate that you've finalized selection of the color by closing the color picker window.

+
+ +

HTML

+ +

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.

+ +
<div id="box">
+  <label for="colorPicker">Border color:</label>
+  <input type="color" value="#8888ff" id="colorPicker">
+  <p id="output"></p>
+</div>
+ +

CSS

+ +

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...

+ +
#box {
+  width: 500px;
+  height: 200px;
+  border: 2px solid rgb(245, 220, 225);
+  padding: 4px 6px;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
+}
+ +

JavaScript

+ +

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 <input type="color"> element.

+ +
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);
+ +

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.

+ +

The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <p> element with the ID "output" to a string describing the finally selected color.

+ +

Using color wisely

+ +

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.

+ +

Finding the right colors

+ +

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.

+ +

Base color

+ +

The first step is to choose your base color. 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:

+ + + +

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 ColorZilla offers an extension (Chrome / Firefox) 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.

+ +
+

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.

+
+ +

Fleshing out the palette

+ +

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.

+ +

A few examples (all free to use as of the time this list was last revised):

+ + + +

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.

+ +
+

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.

+
+ +

Color theory resources

+ +

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:

+ +
+
Color Science (Khan Academy in association with Pixar)
+
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.
+
{{interwiki("wikipedia", "Color theory")}} on Wikipedia
+
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.
+
+ +

Color and accessibility

+ +

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.

+ +

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.

+ +
+

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.

+
+ +

For more information about color blindness, see the following articles:

+ + + +

Palette design example

+ +

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 Google search for photos of Mars. 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.

+ +

Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.

+ +

Having selected our base color, we need to build out our palette. We decide to use Paletton to come up with the other colors we need. Upon opening Paletton, we see:

+ +

Right after loading Paletton.

+ +

Next, we enter our color's hex code (D79C7A) into the "Base RGB" box at the bottom-left corner of the tool:

+ +

After entering base color

+ +

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 #508D7C.

+ +

Now with complementary colors included.

+ +

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:

+ +

Triad color scheme selected

+ +

That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's #556E8D. 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:

+ +

Triad color scheme selected

+ +

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.

+ +

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.

+ +

Color, backgrounds, contrast, and printing

+ +

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.

+ +

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.

+ +

The default value of color-adjust, economy, 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.

+ +

You can set color-adjust to exact 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.

+ +
+

Note: There is no guarantee, though, that color-adjust: exact 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 color-adjust.

+
+ +

See also

+ + 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 +--- +

HTML 中的元素具有屬性 ; 而這些屬性可以藉由各種方式去設定元素或調整它們的行為，以符合使用者的期待。

+ +

屬性列表

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
屬性名稱元素描述
hiddenGlobal attribute避免呈現給定的元素，並且保持子元素，例如 script elements、active。
high{{ HTMLElement("meter") }}指示下界的上限範圍。
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}連結資源的 URL。
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}指定連結資源的語言。
http-equiv{{ HTMLElement("meta") }} 
icon{{ HTMLElement("command") }}指定呈現指令的圖片。
idGlobal attribute經常和 CSS 一起被用來設計特定元素。這個屬性的值必須是唯一的。
ismap{{ HTMLElement("img") }}指示該圖像是伺服器端之影像地圖的一部分。
itempropGlobal attribute 
keytype{{ HTMLElement("keygen") }}指定所生成密鑰的類型。
kind{{ HTMLElement("track") }}指明文章 track 的類型。
label{{ HTMLElement("track") }}指明文章 track 的使用者可讀之標題。
langGlobal attribute定義該元素中所使用的語言。
language{{ HTMLElement("script") }}定義該元素中所使用的腳本語言。
list{{ HTMLElement("input") }}指示一串預先定義的選項供使用者參考。
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}指示當媒體完成時，是否應該從一開始的時候播放。
low{{ HTMLElement("meter") }}指示上界的下限範圍。
manifest{{ HTMLElement("html") }}指定文件中緩存清單的 URL。
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}指示所允許的最大值。
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}定義該元素中所允許的最大字元數目。
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}指定一些連接資源已經被設計的媒體。
method{{ HTMLElement("form") }}定義當呈交該格式時，哪個 HTTP 方法要被使用。可以用 GET（預設）或是 POST。
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}指示所允許的最小值。
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}指示多個值是否可以進入單一輸入的 email 或是 file 之類別。
name{{ 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") }} +

元素的名字。例如被伺服器所使用時，來識別格式提交的現場。

+
novalidate{{ HTMLElement("form") }}該屬性指示當本格式被提交時，並無法通過驗證。
open{{ HTMLElement("details") }}指示是否細節顯示於加載頁面上。
optimum{{ HTMLElement("meter") }}指示最佳化數值。
pattern{{ HTMLElement("input") }}定義一個元素值將被驗證的正規表達式。
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}提示使用者什麼可以被輸入進該區。
poster{{ HTMLElement("video") }} +

顯現一個指示 poster frame 的 URL，直到使用者撥放或是搜索。

+
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}指示是否整個資源、一部分的資源、或是沒有資源應該被預先裝載。
pubdate{{ HTMLElement("time") }}指示該日期和時間，是否和距離最近的 {{ HTMLElement("article") }} 舊元素的日期一樣。
radiogroup{{ HTMLElement("command") }} 
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}指示是否該元素可以被編輯。
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}指定目標物件和連結物驗的關係。
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}指示該元素是否被要求填寫。
reversed{{ HTMLElement("ol") }}指示該目錄是否應以降序展出而不是升序。
rows{{ HTMLElement("textarea") }}定義 textarea 的行數。
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}定義表格單元的行數應該被 span over。
sandbox{{ HTMLElement("iframe") }} 
spellcheckGlobal attribute指示為該元素的拼字檢查是否允許。
scope{{ HTMLElement("th") }} 
scoped{{ HTMLElement("style") }} 
seamless{{ HTMLElement("iframe") }} 
selected{{ HTMLElement("option") }}定義一個值將被選擇到上載頁面中。
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}定義元素的寬度 (以 pixel 為單位) 。如果該元素之類型的屬性是文本或是密碼，那麼它就是字元的數目。
sizes{{ HTMLElement("link") }} 
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }} 
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}可嵌入內容的網址。
srcdoc{{ HTMLElement("iframe") }} 
srclang{{ HTMLElement("track") }} 
srcset{{ HTMLElement("img") }} 
start{{ HTMLElement("ol") }}如果第一個數字不是 1 的話，則定義該數。
step{{ HTMLElement("input") }} 
styleGlobal attribute定義多載先前的樣式設定之 CSS 樣式。
summary{{ HTMLElement("table") }} 
tabindexGlobal attribute多載瀏覽器的預設頁面標籤之順序並且遵守指定的那個。
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} 
titleGlobal attribute當滑鼠標停在元素時，文本會顯示在工具提示中。
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}定義元素的類型。
usemap{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}定義將顯示在加載頁面上元素的預設值。
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}注意 : 在有些情況中，例如 {{ HTMLElement("div") }}，這是傳統的屬性，而 CSS {{ Cssxref("width") }} 特性應當被使用。在其他的情況中，例如 {{ HTMLElement("canvas") }} ，寬度必須用該屬性來指定。
wrap{{ HTMLElement("textarea") }}指定文章是否要被掩飾。
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} +

邊界寬度。

+ +

注意 : 這是一個傳統的屬性。請利用 CSS {{ Cssxref("border") }} 特性。

+
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}包含被緩衝之媒體的時間範圍。
challenge{{ HTMLElement("keygen") }}隨著公共密鑰提交的挑戰字串。
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}聲明頁面或腳本的字元編碼。
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}指定在加載頁面上的元素是否要被檢查。
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}包含一個 URL，用來指出引用或是改變的來源地址。
classGlobal attribute經常使用共同屬性和 CSS 一起設計元素。
code{{ HTMLElement("applet") }}指明被加載與執行的 applet 類別文件之 URL。
codebase{{ HTMLElement("applet") }}This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} +

該屬性使用命名顏色或十六進制 #RRGGBB 格式來設置文本顏色。

+ +

注意 : 這是一個傳統的屬性。請使用 CSS {{ Cssxref("color") }} 特性。

+
cols{{ HTMLElement("textarea") }}定義在一個 textarea 中有多少欄位。
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}colspan 屬性定義一個單元格之欄位的數量。
content{{ HTMLElement("meta") }}一個有關於 http-equiv 或是根據上下文 name 的值 。
contenteditableGlobal attribute指定元素的內容是否可以被編輯。
contextmenuGlobal attribute定義將作為元素上下文選項單的 {{ HTMLElement("menu") }} 元素之 ID。
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}指定瀏覽器是否應該顯示錄放控制給使用者。
coords{{ HTMLElement("area") }}一組值指明熱點區域的座標。
+

data

+ 		+

{{ HTMLElement("object") }}

+ 		+

指明 URL 的資源。

+
+

data-*

+ 		+

Global attribute

+ 		+

讓您可以將自行定義屬性附加在 HTML 元素上。

+
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}指定元素所相關的日期與時間。
default{{ HTMLElement("track") }}指定 track 應被啟用，除非使用者的偏好表示不同。
defer{{ HTMLElement("script") }}指定該頁面被瀏覽完後腳本應被執行。
dirGlobal attribute定義文章的方向。被允許的值有 ltr (Left-To-Right) 或 rtl (Right-To-Left)。
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}指名使用者是否可以與元素互動。
download{{ HTMLElement("a") }}, {{ HTMLElement("area") }} +

指定該超連結是用於下載的資源。

+
draggableGlobal attribute定義元素是否可以拖曳。
dropzoneGlobal attribute指定該元素接受它內容的滑鼠落下物。
enctype{{ HTMLElement("form") }}當方法為 POST 的時候，定義格式日期的內容類型。
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}描述屬於這一個的元素。
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} +

指定元素之所有者的格式。

+
formaction{{ HTMLElement("input") }}, {{ HTMLElement("button") }}指定元素的作用，多載的動作被定義在 {{ HTMLElement("form") }}。
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}對適用於該元素的 <th> 元素之 ID。
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}注意 : 在有些情況中，例如 {{ HTMLElement("div") }}，這是傳統的屬性，而 CSS {{ Cssxref("height") }} 特性應當被使用。在其他的情況中，例如 {{ HTMLElement("canvas") }}，高度必須用該屬性來指定。
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}伺服器接受的類型之列表，通常是文件類型。
accept-charset{{ HTMLElement("form") }}支持字元集的列表。
accesskeyGlobal attribute定義鍵盤快捷鍵來啟動或添加焦點到該元素。
action{{ HTMLElement("form") }}一個程序處理經由該格式提交信息的 URI。
align{{ 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") }}指定元素的水平對齊方式。
alt +

{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}

+ 		在圖像無法顯示的情況下，顯示代替文本。
async{{ HTMLElement("script") }}指定該腳本應該被不同步得執行。
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}指定是否以該格式控制，可以在默認情況下由瀏覽器自動完成其值。
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}該元素應該在頁面加載後自動焦距。
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}音頻或視頻應該越早撥放越好。
autosave{{ HTMLElement("input") }}上一個值應該持續存在到跨頁面加載的可選值之下拉列表中。
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} +

元素的背景顏色。

+ +

注意 : 這是一個傳統的屬性。請使用 CSS {{ Cssxref("background-color") }} 特性。

+
+ +

內容與IDL屬性

+ +

在 HTML 中，大部分的屬性有兩種面向 : 內容屬性與 IDL 屬性。

+ +

內容屬性是您可以從內容中設定的屬性 (HTML 程式碼) 而且您可以藉由 {{domxref("element.setAttribute()")}} 或是 {{domxref("element.getAttribute()")}} 來設定它或得到它。內容屬性永遠都是字串，即便我們所期望的值是一個整數。舉例來說，假設今天要用內容屬性去設定一個 {{HTMLElement("input")}} 元素的最大長度是42，您必須在該元素上呼叫 setAttribute("maxlength", "42")。

+ +

IDL 屬性也被稱為 JavaScript 特性。您可以使用 JavaScript 特性的 element.foo 以閱讀或是設定這些屬性。當您要得到 IDL 屬性時，它總是要使用 (但可能改變) 基本的內容屬性以返回值，而當您要設定 IDL 屬性時，它需要儲存資料在內容屬性中。換句話說，IDL 屬性在本質上反映了內容屬性。

+ +

在大部分的時間中，當 IDL 屬性真正被使用時，將會返回它們的值。舉例而言，{{HTMLElement("input")}} 元素的預設型態是 "text"，所以如果您設定 input.type="foobar"，<input> 元素一樣是 text 的型態 (在外觀和行為上而言)，但是 "type" 內容屬性的值將會變成 "foobar"。然而，IDL 屬性的型態將會回傳 "text" 字串。

+ +

IDL 屬性並非永遠的字串 ; 舉例來說，input.maxlength 便是一個數字(型態為 signed long)。當使用 IDL 屬性，您會閱讀或是設定所需的型態，而當您設定 input.maxlength 時，它總是回傳一個數字，因為它正需要一個數字。如果您傳入別的型態，它會依照標準 JavaScript 型態轉換規則，將傳入值轉成一個數字。

+ +

IDL 屬性可以 反應其他型態，例如 unsigned long、URLs、booleans，等等。不幸的是，並沒有明確的規則來規範，而且與 IDL 屬性行為相對應的內容屬性連結中，也沒有取決於該屬性的方式。在大部分的時間裡，它會遵守 規範中所制定的規則，但有時候它並不會。HTML 規範嘗試讓它變得容易使用，但由於各種原因 (大多是因為歷史)，有些屬性表現得很奇怪 (舉例來說，select.size)，而您應該詳細閱讀規範以了解各個屬性的行為。

+ +

另請參見

+ + 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 +--- +

HTML (超文字標記語言, Hypertext Markup Language) 元素通常為 "區塊級" 元素或是 "行內" 元素。 一個區塊級元素會藉由建立"區塊"的動作, 完全佔滿其父元素(容器)的空間。本文將為您說明其意涵.

+ +

瀏覽器預設以在元素前後換行的方式, 表現區塊級元素. 視覺上會呈現為一排縱向堆疊的方塊。

+ +
+

區塊級元素必定以換行方式, 取得完整寬度的空間(向左右兩側儘可能地延伸出去)。

+
+ +

以下範例將展示區塊級元素的影響:

+ +

區塊級元素

+ +

HTML

+ +
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>
+ +

CSS

+ +
p { background-color: #8ABB55; }
+
+ +

{{ EmbedLiveSample('Block-level_Example') }}

+ +

用法

+ + + +

區塊級 vs. 行內元素

+ +

There are a couple of key differences between block-level elements and inline elements:

+ +
+
Formatting
+
By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.
+
Content model
+
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.
+
+ +

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 content categories. The "block-level" category roughly corresponds to the category of flow content in HTML5, while "inline" corresponds to phrasing content, but there are additional categories.

+ +

相關元素

+ +

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).

+ +
+
+
{{ HTMLElement("address") }}
+
Contact information.
+
{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}
+
Article content.
+
{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}
+
Aside content.
+
{{ HTMLElement("blockquote") }}
+
Long ("block") quotation.
+
{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}
+
Drawing canvas.
+
{{ HTMLElement("dd") }}
+
Describes a term in a description list.
+
{{ HTMLElement("div") }}
+
Document division.
+
{{ HTMLElement("dl") }}
+
Description list.
+
{{ HTMLElement("dt") }}
+
Description list term.
+
{{ HTMLElement("fieldset") }}
+
Field set label.
+
+ +
+
{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}
+
Figure caption.
+
{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}
+
Groups media content with a caption (see {{ HTMLElement("figcaption") }}).
+
{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}
+
Section or page footer.
+
{{ HTMLElement("form") }}
+
Input form.
+
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
+
Heading levels 1-6.
+
{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}
+
Section or page header.
+
{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}
+
Groups header information.
+
{{ HTMLElement("hr") }}
+
Horizontal rule (dividing line).
+
{{ HTMLElement("li") }}
+
List item.
+
{{ HTMLElement("main") }}
+
Contains the central content unique to this document.
+
{{ HTMLElement("nav") }}
+
Contains navigation links.
+
+ +
+
{{ HTMLElement("noscript") }}
+
Content to use if scripting is not supported or turned off.
+
{{ HTMLElement("ol") }}
+
Ordered list.
+
{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}
+
Form output.
+
{{ HTMLElement("p") }}
+
Paragraph.
+
{{ HTMLElement("pre") }}
+
Preformatted text.
+
{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}
+
Section of a web page.
+
{{ HTMLElement("table") }}
+
Table.
+
{{ HTMLElement("tfoot") }}
+
Table footer.
+
{{ HTMLElement("ul") }}
+
Unordered list.
+
{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}
+
Video player.
+
+
+ +


+ 參閱

+ + 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: +slug: Web/HTML/Element/a +translation_of: Web/HTML/Element/a +--- +

HTML <a> 元素（意為 Anchor）建立了通往其他頁面、檔案、Email 地址、或其他 URL 的超連結。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
內容類型流型內容、phrasing content, interactive content, palpable content.
內容省略Transparent, containing either flow content (excluding interactive content) or phrasing content.
標籤省略{{no_tag_omission}}
允許的父元素任何允許 phrasing content 或 flow content 的內容，但 <a> 永遠例外（according to the logical principle of symmetry, if <a> tag, as a parent, can not have interactive content, then the same <a> content can not have <a> tag as its parent）
Permitted ARIA roles{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}
DOM 介面{{domxref("HTMLAnchorElement")}}
+ +

屬性

+ +

本元素包含全域屬性。

+ +
+
{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}
+
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 / and \ are converted to underscores. Most file systems limit some punctuation in file names, and browsers will adjust the suggested name accordingly. +
Notes: +
    +
  • This attribute only works for same-origin URLs.
    • +
  • This attribute can be used with blob: URLs and data: URLs to download content generated by JavaScript, such as pictures created in an image-editor Web app.
    • +
  • If the HTTP header Content-Disposition: gives a different filename than this attribute, the HTTP header takes priority over this attribute.
    • +
  • If Content-Disposition: is set to inline, Firefox prioritizes Content-Disposition, like the filename case, while Chrome prioritizes the download attribute.
    • +
+
+
+
{{htmlattrdef("href")}}
+
Contains a URL or a URL fragment that the hyperlink points to.
+
A URL fragment is a name preceded by a hash mark (#), which specifies an internal target location (an ID 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, file:, ftp:, and mailto: work in most browsers.
+
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. +
+

Note: You can use href="#top" or the empty fragment href="#" to link to the top of the current page. This behavior is specified by HTML5.

+
+
+
{{htmlattrdef("hreflang")}}
+
This attribute indicates the human language of the linked resource. It is purely advisory, with no built-in functionality. Allowed values are determined by BCP47.
+
{{htmlattrdef("ping")}}
+
Contains a space-separated list of URLs to which, when the hyperlink is followed, {{HTTPMethod("POST")}} requests with the body PING will be sent by the browser (in the background). Typically used for tracking.
+
{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
+
Indicates which referrer to send when fetching the URL: +
    +
  • 'no-referrer' means the Referer: header will not be sent.
    • +
  • 'no-referrer-when-downgrade' means no Referer: header will be sent when navigating to an origin without HTTPS. This is the default behavior.
    • +
  • 'origin' means the referrer will be the origin of the page, not including information after the domain.
    • +
  • 'origin-when-cross-origin' 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.
    • +
  • 'unsafe-url' 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.
    • +
+
+
{{htmlattrdef("rel")}}
+
Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
+
{{htmlattrdef("target")}}
+
Specifies where to display the linked URL. It is a name of, or keyword for, a browsing context: a tab, window, or <iframe>. The following keywords have special meanings: +
    +
  • _self: Load the URL into the same browsing context as the current one. This is the default behavior.
    • +
  • _blank: Load the URL into a new browsing context. This is usually a tab, but users can configure browsers to use new windows instead.
    • +
  • _parent: Load the URL into the parent browsing context of the current one. If there is no parent, this behaves the same way as _self.
    • +
  • _top: 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 _self.
    • +
+ +
+

Note: When using target, consider adding rel="noopener noreferrer" to avoid exploitation of the window.opener API.

+
+
+
{{htmlattrdef("type")}}
+
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.
+
+ +

Obsolete

+ +
+
{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}
+
This attribute defined the character encoding of the linked URL. The value should be a space- and/or comma-delimited list of character sets defined in RFC 2045. The default value is ISO-8859-1. +
+

Usage note: This attribute is obsolete in HTML5 and should not be used by authors. To achieve its effect, use the HTTP Content-Type: header on the linked URL.

+
+
+
{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
For use with the below shape attribute, this attribute used a comma-separated list of numbers to define the coordinates of the link on the page.
+
{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
This attribute was required for anchors defining a possible target location within a page. In HTML 4.01, id and name could be used simultaneously on a <a> element as long as they have identical values. +
+

Usage note: This attribute is obsolete in HTML5, use the global attribute id instead.

+
+
+
{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
This attribute specified a reverse link, the inverse relationship of the rel attribute. It was deprecated for being very confusing.
+
{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
This attribute was used to define a region for hyperlinks to create an image map. The values are circle, default, polygon, and rect. The format of the coords attribute depends on the value of shape. For circle, the value is x,y,r where x and y are the pixel coordinates for the center of the circle and r is the radius value in pixels. For rect, the coords attribute should be x,y,w,h. The x,y values define the upper-left-hand corner of the rectangle, while w and h define the width and height respectively. A value of polygon for shape requires x1,y1,x2,y2,... values for coords. Each of the x,y 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 default for shape requires that the entire enclosed area, typically an image, be used. +
Note: Use the usemap attribute for the {{HTMLElement("img")}} element and the associated {{HTMLElement("map")}} element to define hotspots instead of the shape attribute.
+
+
+ +

Examples

+ +

Linking to an external location

+ +
<!-- anchor linking to external file -->
+<a href="https://www.mozilla.com/">
+External Link
+</a>
+
+ +

Result

+ +

External Link

+ +

Linking to another section on the same page

+ +
<!-- links to element on this page with id="attr-href" -->
+<a href="#attr-href">
+Description of Same-Page Links
+</a>
+
+ +

Result

+ +

Description of Same Page Links

+ +

Creating a clickable image

+ +

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.

+ +
<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>
+
+ +

Result

+ +
+

{{EmbedLiveSample("Creating_a_clickable_image", "320", "64")}}

+
+ + + +

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 mailto: link. Here's a simple example:

+ +
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
+ +

Result

+ +

Send email to nowhere

+ +

For additional details about the mailto URL scheme, such as including the subject, body, or other predetermined content, see Email links or {{RFC(6068)}}.

+ + + +

Offering phone links is helpful for users viewing web documents and laptops connected to phones.

+ +
<a href="tel:+491570156">+49 157 0156</a>
+ +

For additional details about the tel URL scheme, see {{RFC(3966)}}.

+ +

Using the download attribute to save a <canvas> as a PNG

+ +

If you want to let users download an HTML {{HTMLElement("canvas")}} element as an image, you can create a link with a download attribute and the canvas data as a file URL:

+ +
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);
+ +

You can see this in action at jsfiddle.net/codepo8/V6ufG/2/.

+ +

Notes

+ +

HTML 3.2 defines only the name, href, rel, rev, and title attributes.

+ +

Accessibility recommendations

+ +

Anchor tags are often abused with the onclick event to create pseudo-buttons by setting href to "#" or "javascript:void(0)" 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.

+ +

Clicking and focus

+ +

Whether clicking on an {{HTMLElement("a")}} causes it to become focused varies by browser and OS.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Does clicking on an {{HTMLElement("a")}} give it focus?
Desktop BrowsersWindows 8.1OS X 10.9
Firefox 30.0YesYes
Chrome ≥39
+ (Chromium bug 388666)		YesYes
Safari 7.0.5N/AOnly when it has a tabindex
Internet Explorer 11YesN/A
Presto (Opera 12)YesYes
+ + + + + + + + + + + + + + + + + + + + +
Does tapping on an {{HTMLElement("a")}} give it focus?
Mobile BrowsersiOS 7.1.2Android 4.4.4
Safari MobileOnly when it has a tabindexN/A
Chrome 35???Only when it has a tabindex
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Added the referrer attribute.
{{SpecName('HTML WHATWG', 'semantics.html#the-a-element', '<a>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}{{Spec2('HTML4.01')}}
+ +

Browser compatibility

+ + + +

{{Compat("html.elements.a")}}

+ +

See also

+ + + +
{{HTMLRef}}
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: ：文字閃爍元素（已過時） +slug: Web/HTML/Element/blink +translation_of: Web/HTML/Element/blink +--- +
{{Deprecated_header}} {{obsolete_header}}
+ +

非標準元素 HTML Blink（<blink>）可以讓該元素裡面的文字緩慢閃爍。

+ +
不要使用這個元素，因為它已經被棄用，而且是糟糕的設計。無障礙標準不會接受閃爍文字、而 CSS 規範上允許瀏覽器忽略閃爍效果。
+ +

DOM 介面

+ +

此元素並未被支援，因此是透過 {{domxref("HTMLUnknownElement")}} 介面實做。

+ +

示例

+ +
<blink>Why would somebody use this?</blink>
+
+ +

結果（已經過淡化！）

+ +

Image:HTMLBlinkElement.gif

+ +

規範

+ +

此元素並非標準元素，也不屬於任何規範。不信的話，你自己來看 HTML 規範。

+ +

CSS Polyfill

+ +

如果真的需要 polyfill，請使用以下的 CSS。它支援 IE10 以上。

+ +
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;
+    }
+}
+ +

瀏覽器相容性

+ + + +

{{Compat("html.elements.blink")}}

+ +

參見

+ + + +

{{HTMLRef}}

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:
+slug: Web/HTML/Element/blockquote +translation_of: Web/HTML/Element/blockquote +--- +

摘要

+ +

HTML <blockquote> 元素（HTML 區塊引言元素）定義一段文字屬於引用。通常，這元素會透過縮排來呈現（要知道如何改變，請參考備註）。引言的 URL 來源可透過 cite 屬性賦予，而來源的文本形式可以使用 {{HTMLElement("cite")}} 元素。

+ + + + + + + + + + + + + + + + + + + + + + + + +
內容類別流內容、sectioning root、捫及內容。
允許內容內容流.
Tag 省略{{no_tag_omission}}
允許父元素任何允許內容流的元素
DOM 介面{{domxref("HTMLQuoteElement")}}
+ +

屬性

+ +

這個屬性包含全局屬性。

+ +
+
{{htmlattrdef("cite")}}
+
一個指向被引用的原始文件或訊息的 URL 。這個屬性預期要指引到解釋內容的資訊，或是引言的援引。
+
+ +

範例

+ +
<blockquote cite="http://developer.mozilla.org">
+  <p>這是取自於 Mozilla Developer Center 的引言。</p>
+</blockquote>
+
+ +

以上的 HTML 原始碼會輸出：

+ +
+

這是取自於 Mozilla Developer Center 的引言。

+
+ +

規範

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
規範狀態註解
{{SpecName('HTML WHATWG', 'semantics.html#the-blockquote-element', '<blockquote>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}{{Spec2('HTML4.01')}} 
+ +

瀏覽器相容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
特徵ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本支援{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
特徵AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本支援{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

備註

+ +

要改變<blockquote>的縮進，請使用 CSS 的 {{cssxref("margin")}} 屬性。

+ +

針對短篇引文請使用 {{HTMLElement("q")}} 元素。

+ +

延伸閱讀

+ +
    +
  • {{HTMLElement("q")}} 元素：用以表示單行的引用內容。
    • +
  • {{HTMLElement("cite")}} 元素：用以表示引用來源。
    • +
+ +

{{HTMLRef}}

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:
（斷行元素） +slug: Web/HTML/Element/br +translation_of: Web/HTML/Element/br +--- +
{{HTMLRef}}
+ +

HTML <br> 元素會產生文字的斷行（carriage-return、CR 或是確認鍵）。此元素主要用於斷行有所意義的時候，像是寫詩或寫住址。

+ +
{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}
+ + + +

如上所示，<br> 元素會在需要斷行的時候出現。在 <br> 之後的文字會從文字區域的下一行出現。

+ +
+

注意：不要用 <br> 建立段落間距：這種情況下要用 {{htmlelement("p")}} 把它們包起來，並使用 CSS {{cssxref('margin')}} 屬性控制間距大小。

+
+ +

屬性

+ +

這個元件屬性含有全域屬性。

+ +

棄用屬性

+ +
+
{{htmlattrdef("clear")}}
+
指示中斷後下一行的開始位置。
+
+ +

使用 CSS 樣式化

+ +

<br> 元素有一個定義明確的用途：在文字區塊裡面建立斷行。因此它本身沒有尺寸或視覺輸出，基本上你做不了任何樣式化。

+ +

你可以給 <br> 元素設置 {{cssxref("margin")}} 以增加文字之間的斷行大小，但這並不是正確的作法：你應該用 {{cssxref("line-height")}} 屬性做這件事情。

+ +

示例

+ +
Mozilla Foundation<br>
+1981 Landings Drive<br>
+Building K<br>
+Mountain View, CA 94043-0801<br>
+USA
+
+ +

以上 HTML 將顯示

+ +

{{ EmbedLiveSample('示例', '100%', '90') }}

+ +

無障礙議題

+ +

使用 <br> 元素分段不只作法不佳，對於使用輔具的人來說，也會是有問題的。螢幕閱讀器會念出該元素，但 <br> 裡面的內容是念不出來的。對於使用螢幕閱讀器的人來說，這可能是困惑與沮喪的體驗。

+ +

請使用 <p> 元素搭配 CSS 屬性如 {{cssxref("margin")}} 來控制間距大小。

+ +

技術摘要

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
內容類型流型內容、段落型內容。
允許內容無，這是個{{Glossary("空元素")}}.
標籤省略絕對要有開啟標籤，也絕不能關閉標籤。在 XHTML 文件內，要把這個元素寫成 <br />.
允許父元素任何接受段落型內容的元素
允許的 ARIA roles所有
DOM 介面{{domxref("HTMLBRElement")}}
+ +

規範

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
規範狀態註解
{{SpecName('HTML WHATWG', 'semantics.html#the-br-element', '<br>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-br-element', '<br>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}{{Spec2('HTML4.01')}}
+ +

瀏覽器相容性

+ + + +

{{Compat("html.elements.br")}}

+ +

參見

+ +
    +
  • {{HTMLElement("address")}} 元素
    • +
  • {{HTMLElement("p")}} 元素
    • +
  • {{HTMLElement("wbr")}} 元素
    • +
+ +
{{HTMLRef}}
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: