From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- .../web/html/attributes/autocomplete/index.html | 258 ++++++++++ .../web/html/attributes/crossorigin/index.html | 155 ++++++ .../index.html" | 258 ---------- .../web/html/cors_settings_attributes/index.html | 155 ------ .../index.html | 100 ---- files/zh-cn/web/html/element/command/index.html | 139 ----- files/zh-cn/web/html/element/element/index.html | 112 ---- .../zh-cn/web/html/element/input/month/index.html | 457 +++++++++++++++++ .../zh-cn/web/html/element/input/range/index.html | 515 +++++++++++++++++++ .../input/\346\234\210\344\273\275/index.html" | 457 ----------------- .../input/\350\214\203\345\233\264/index.html" | 515 ------------------- .../web/html/focus_management_in_html/index.html | 79 --- .../web/html/global_attributes/dropzone/index.html | 94 ---- .../x-ms-acceleratorkey/index.html | 41 ++ .../x-ms-format-detection/index.html | 43 ++ .../index.html" | 41 -- .../index.html" | 43 -- .../index.html | 29 -- .../web/html/supported_media_formats/index.html | 563 --------------------- 19 files changed, 1469 insertions(+), 2585 deletions(-) create mode 100644 files/zh-cn/web/html/attributes/autocomplete/index.html create mode 100644 files/zh-cn/web/html/attributes/crossorigin/index.html delete mode 100644 "files/zh-cn/web/html/attributes/\350\207\252\345\212\250\345\256\214\346\210\220\345\261\236\346\200\247/index.html" delete mode 100644 files/zh-cn/web/html/cors_settings_attributes/index.html delete mode 100644 files/zh-cn/web/html/dash_adaptive_streaming_for_html_5_video/index.html delete mode 100644 files/zh-cn/web/html/element/command/index.html delete mode 100644 files/zh-cn/web/html/element/element/index.html create mode 100644 files/zh-cn/web/html/element/input/month/index.html create mode 100644 files/zh-cn/web/html/element/input/range/index.html delete mode 100644 "files/zh-cn/web/html/element/input/\346\234\210\344\273\275/index.html" delete mode 100644 "files/zh-cn/web/html/element/input/\350\214\203\345\233\264/index.html" delete mode 100644 files/zh-cn/web/html/focus_management_in_html/index.html delete mode 100644 files/zh-cn/web/html/global_attributes/dropzone/index.html create mode 100644 files/zh-cn/web/html/global_attributes/x-ms-acceleratorkey/index.html create mode 100644 files/zh-cn/web/html/global_attributes/x-ms-format-detection/index.html delete mode 100644 "files/zh-cn/web/html/global_attributes/x-ms-\345\212\240\351\200\237\350\243\205\347\275\256\351\224\256/index.html" delete mode 100644 "files/zh-cn/web/html/global_attributes/x-ms-\346\240\274\345\274\217-\346\243\200\346\265\213/index.html" delete mode 100644 files/zh-cn/web/html/optimizing_your_pages_for_speculative_parsing/index.html delete mode 100644 files/zh-cn/web/html/supported_media_formats/index.html (limited to 'files/zh-cn/web/html') diff --git a/files/zh-cn/web/html/attributes/autocomplete/index.html b/files/zh-cn/web/html/attributes/autocomplete/index.html new file mode 100644 index 0000000000..af7452c6f7 --- /dev/null +++ b/files/zh-cn/web/html/attributes/autocomplete/index.html @@ -0,0 +1,258 @@ +--- +title: The HTML 自动完成属性 +slug: Web/HTML/Attributes/自动完成属性 +tags: + - HTML + - 参考 + - 地址 + - 密码 + - 属性 + - 用户名 + - 电话号码 + - 自动完成 + - 邮件地址 +translation_of: Web/HTML/Attributes/autocomplete +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

HTML autocomplete 属性可用于以文本或数字值作为输入的 {{HTMLElement("input")}} 元素 ， {{HTMLElement("textarea")}} 元素, {{HTMLElement("select")}} 元素, 和{{HTMLElement("form")}} 元素。 autocomplete 允许web开发人员指定，如果有任何权限 {{Glossary("user agent")}} 必须提供填写表单字段值的自动帮助，并为浏览器提供关于字段中所期望的信息类型的指导。

+ +

建议值的来源通常取决于浏览器。 通常，值来自用户输入的过去值，但它们也可能来自预先配置的值。 例如，浏览器可能允许用户保存其姓名，地址，电话号码和电子邮件地址，以实现自动完成目的。 也许浏览器提供了保存加密的信用卡信息的功能，以便在身份验证过程后自动完成。

+ +

如果 {{HTMLElement("input")}}, {{HTMLElement("select")}} 或{{HTMLElement("textarea")}} 元素 没有 autocomplete 属性, t则该浏览器将使用该元素的表单的 autocomplete 属性所有者，它们可是元素的后代 {{HTMLElement("form")}} 元素 也可以是其  id  由元素{{htmlattrxref("form", "input")}} 属性指定的  <form>。

+ +

有关更多信息，请参见 {{HTMLElement("form")}} 中的{{htmlattrxref("autocomplete", "form")}}  属性。

+ +
+

为了提供自动完成功能，用户代理可能需要<input>/<select>/<textarea> 元素才能:

+ +
    +
  1. 具有 name 和/或 id 属性
    2. +
  2. 成为 <form>  的后代
    3. +
  3. 具有 {{HTMLElement("input/submit", "submit")}} 按钮的表单
    4. +
+
+ +

价值

+ +
+
"off"
+
浏览器不允许为此字段自动输入或选择一个值。 文档或应用程序可能提供其自己的自动完成功能，或者出于安全方面的考虑，要求不要自动输入该字段的值。 +
注意: 在大多数现代浏览器中， autocomplete 设置为 "off" 不会阻止密码管理器询问用户是否要保存用户名和密码信息，或者自动在网站的登录表单中填写这些值。 请参阅 the autocomplete attribute and login fields.
+
+
"on"
+
允许浏览器自动完成输入。 没有提供有关该字段中期望的数据类型的指导，因此浏览器可以使用自己的判断。
+
"name"
+
该字段期望该值是一个人的全名。 通常首选使用“名称”而不是将名称分解为各个组成部分，因为这样可以避免处理各种各样的人类名称及其结构。 但是，如果需要将名称分解为各个组成部分，则可以使用以下自动完成值： +
+
"honorific-prefix"
+
前缀或标题，例如“ Mrs.”，“ Mr.”，“ Miss”，“ Ms.”，“ Dr.”或“ Mlle.”。
+
"given-name"
+
给定的（或“名字”）名称。
+
"additional-name"
+
中间名。
+
"family-name"
+
姓氏（或“姓氏”）。
+
"honorific-suffix"
+
后缀，例如 "Jr.", "B.Sc.", "PhD.", "MBASW", or "IV".
+
"nickname"
+
昵称或名称。
+
+
+
"email"
+
电子邮件地址。
+
"username"
+
用户名或帐户名。
+
"new-password"
+
新密码。 创建新帐户或更改密码时，应将其用于“输入新密码”或“确认新密码”字段，而不是通常出现的“输入当前密码”字段。 浏览器可以使用它来避免意外填写现有密码，并在创建安全密码时提供帮助（另请参见 Preventing autofilling with autocomplete="new-password").
+
"current-password"
+
用户的当前密码
+
"one-time-code"
+
用于验证用户身份的一次性代码。
+
"organization-title"
+
职务或组织内某人的职务，例如“高级技术作家”，“总裁”或“助理部队负责人”。
+
"organization"
+
公司或组织名称，例如“ Acme Widget Company”或“ American Girl Scouts of America”。
+
"street-address"
+
街道地址。 它可以是多行文本，应在第二个行政级别（通常是城市或城镇）内完全标识地址的位置，但不应包括城市名称，邮政编码或邮政编码或国家/地区名称。
+
"address-line1", "address-line2", "address-line3"
+
街道地址的每一行。 仅在还存在 "street-address" 的情况下，才应提供这些内容。.
+
"address-level4"
+
在具有四个级别的地址中，粒度最细的 {{anch("Administrative levels in addresses", "administrative level")}}。
+
"address-level3"
+
第三个 {{anch("Administrative levels in addresses", "administrative level")}}, 在具有至少三个管理级别的地址中。
+
"address-level2"
+
第二个 {{anch("Administrative levels in addresses", "administrative level")}}, 在地址中至少有两个。 在具有两个行政级别的国家/地区中，通常是地址所在的城市，城镇，村庄或其他地区。
+
"address-level1"
+
地址中的第一个 {{anch("Administrative levels in addresses", "administrative level")}} 。 通常是地址所在的省份。 在美国，这就是州。 在瑞士，行政区。 在英国，小镇。
+ “国家”
+
"country"
+
国家代码。
+
"country-name"
+
一个国家的名字。
+
"postal-code"
+
邮政编码（在美国，这是邮政编码）。
+
"cc-name"
+
打印在付款工具（例如信用卡）上或与之关联的全名。 通常，使用全名字段比将名称分成多个部分更可取。
+
"cc-given-name"
+
在信用卡之类的付款工具上给出的给定（名字）名称。
+
"cc-additional-name"
+
付款工具或信用卡上的中间名。
+
"cc-family-name"
+
信用卡上的姓氏。
+
"cc-number"
+
信用卡号码或其他标识付款方式的号码，例如帐号。
+
"cc-exp"
+
付款方式的到期日期，通常为“ 月份 / 年份”或“ 月份 / 年份”形式。
+
"cc-exp-month"
+
付款方式到期的月份。
+
"cc-exp-year"
+
付款方式到期的年份。.
+
"cc-csc"
+
付款工具的安全码； 在信用卡上，这是信用卡背面的3位数验证码。
+
"cc-type"
+
付款方式的类型（例如“ Visa”或“ Master Card”）。
+
"transaction-currency"
+
进行交易的货币。
+
"transaction-amount"
+
以 "transaction-currency" 指定的货币表示的金额，用于支付形式。
+
"language"
+
作为有效的 BCP 47 语言标记提供的首选语言。
+
"bday"
+
出生日期，作为完整日期。
+
"bday-day"
+
出生日期的月份中的一天。
+
"bday-month"
+
出生日期的月份。
+
"bday-year"
+
出生日期的年份。
+
"sex"
+
性别身份（例如“女性”，“法法芬”，“男性”），不带换行符的自由格式文本。
+
"tel"
+
+

完整的电话号码，包括国家/地区代码。 如果您需要将电话号码分为几个部分，则可以将以下值用于这些字段：

+ +
+
"tel-country-code"
+
国家/地区代码，例如美国，加拿大和北美其他地区以及加勒比海部分地区的“ 1”。
+
"tel-national"
+
不含国家/地区代码部分的完整电话号码，包括国家/地区内部前缀。 对于电话号码“ 1-855-555-6502”，该字段的值为“ 855-555-6502”。
+
"tel-area-code"
+
区号，如果适用，可应用任何国家或地区内部前缀。
+
"tel-local"
+
不带国家或地区代码的电话号码。 这可以进一步分为两部分，分别是具有交换号码的电话号码，然后是交换局中的号码。 对于电话号码“ 555-6502”， 对于“ 555”使用 "tel-local-prefix" ，对于"6502"使用  "tel-local-suffix" 。
+
+
+
"tel-extension"
+
电话号码中的电话分机代码，例如旅馆中的房间或套房号或公司中的办公室分机号。
+
"impp"
+
即时消息协议端点的URL，例如“ xmpp：username@example.net”。
+
"url"
+
URL，例如在给定表单中其他字段的上下文的情况下的主页或公司网站地址等。
+
"photo"
+
代表表单中其他字段中提供的个人，公司或联系信息的图像的URL。
+
+ +

有关更多详细信息，请参见 WHATWG 标准。 

+ +
+

注意: 与其他浏览器不同， autocomplete 属性还控制Firefox是否会跨页面加载保持— 是否在整个页面加载期间保持  <input> 元素, <textarea> 元素, 或整个 <form> 的动态禁用状态和（如果适用）动态检查状态。 持久性功能默认情况下处于启用状态。 将 autocomplete 属性的值设置为off 将禁用此功能。即使autocomplete 属性通常由于其type而不适用，也可以这样做。 参考 {{bug(654072)}}.

+
+ +

例子

+ +
<div>
+  <label for="cc-number">Enter your credit card number</label>
+  <input type="number" name="cc-number" id="cc-number" autocomplete="off">
+</div>
+ +

地址的行政级别

+ +

四个行政级别字段 (address-level1 到 address-level4) 以提高地址所在国家内的精确度的方式描述地址。每个国家都有自己的行政级别系统，在写地址时可以按不同的顺序排列。

+ +

address-level1 始终代表最广泛的行政区划;它是地址中除国家名之外最不特定的部分。

+ +

表单布局的灵活性

+ +

鉴于不同的国家/地区以不同的方式写出地址，每个字段都位于地址内的不同位置，甚至完全是不同的字段集和数量，因此，如果可能的话，您的站点能够切换到预期的布局会很有帮助 由您的用户在提供地址输入表格时给出，并给出地址所在的国家/地区。

+ +

变化

+ +

每个行政级别的使用方式因国家/地区而异。 以下是一些示例； 这并不是详尽的清单。

+ +

美国

+ +

美国境内的典型家庭住址如下所示：

+ +

大街432号
+ Exampleville CA 95555

+ +

在美国，地址中最不明确的部分是州，在这种情况下为“ CA”（美国邮政服务的正式缩写为“ California”）。 因此，address-level1 是状态，在这种情况下为“ CA”。

+ +

地址的倒数第二个特定部分是城市或城镇名称，因此在此示例地址中， address-level2 为“ Exampleville”。

+ +

美国地址不使用3级及更高级别。

+ +

英国

+ +

在英国，地址输入表单通常包含两个地址级别以及一个，两个或三个地址行，具体取决于地址。 完整的地址如下所示：

+ +

Frogmarch街103号
+ 上层包装
+ 苏塞克斯
+ TN99 8ZZ

+ +

地址级别为：

+ + + +

邮政编码是分开的。 请注意，您实际上可以仅使用邮政编码和 address-line1 在英国成功发送邮件, 因此它们应该是唯一的必填项，但通常人们会提供更多详细信息。

+ +

中国

+ +

中国可以使用多达三个行政级别：省，市和区。

+ +

技术指标

+ + + + + + + + + + + + + + + + + + + + + +
规格状态评论
{{SpecName('HTML5.2', "sec-forms.html#autofilling-form-controls-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML5.2')}}
{{SpecName('HTML WHATWG', "form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("html.global_attributes.autocomplete")}}

+ +

另请详见

+ + diff --git a/files/zh-cn/web/html/attributes/crossorigin/index.html b/files/zh-cn/web/html/attributes/crossorigin/index.html new file mode 100644 index 0000000000..9beb44e652 --- /dev/null +++ b/files/zh-cn/web/html/attributes/crossorigin/index.html @@ -0,0 +1,155 @@ +--- +title: CORS settings attributes +slug: Web/HTML/CORS_settings_attributes +tags: + - Advanced + - CORS + - HTML5 + - Security + - anonymous + - cdn + - crossorigin= + - img &video + - script &link +translation_of: Web/HTML/Attributes/crossorigin +--- +

在HTML5中，一些 HTML 元素提供了对 CORS 的支持， 例如 {{ HTMLElement("audio") }}、{{ HTMLElement("img") }}、{{ HTMLElement("link") }}、{{ HTMLElement("script") }} 和 {{ HTMLElement("video") }} 均有一个跨域属性 (crossOrigin property)，它允许你配置元素获取数据的 CORS 请求。 

+ +

The crossorigin content attribute on media elements is a CORS settings attribute.

+ +

这些属性是枚举的，并具有以下可能的值：

+ + + + + + + + + + + + + + + + + + + + +
关键字描述
anonymous对此元素的 CORS 请求将不设置凭据标志。
use-credentials对此元素的CORS请求将设置凭证标志；这意味着请求将提供凭据。
""设置一个空的值，如 crossorigin 或 crossorigin=""，和设置 anonymous 的效果一样。
+ +

默认情况下（即未指定 crossOrigin 属性时），CORS 根本不会使用。如 Terminology section of the CORS specification 中的描述，在非同源情况下，设置 "anonymous" 关键字将不会通过 cookies，客户端 SSL 证书或 HTTP 认证交换用户凭据。

+ +

即使是无效的关键字和空字符串也会被当作 anonymous 关键字使用。

+ +

示例：使用 crossorigin 的 script 元素

+ +

你可以使用下面的 {{HTMLElement("script")}} 元素告诉浏览器执行来自 https://example.com/example-framework.js 的脚本且不发送用户凭据。

+ +
<script src="https://example.com/example-framework.js" crossorigin="anonymous"></script>
+ +

示例：Webmanifest with credentials

+ +

在获取需要用户凭据的 manifest 时，属性值必须设置为 use-credentials。即使是同源的情况。

+ +
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials">
+ +

Specifications

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13{{ CompatGeckoDesktop("8.0") }}11{{ CompatNo() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoDesktop("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoMobile("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

另请参阅

+ + diff --git "a/files/zh-cn/web/html/attributes/\350\207\252\345\212\250\345\256\214\346\210\220\345\261\236\346\200\247/index.html" "b/files/zh-cn/web/html/attributes/\350\207\252\345\212\250\345\256\214\346\210\220\345\261\236\346\200\247/index.html" deleted file mode 100644 index af7452c6f7..0000000000 --- "a/files/zh-cn/web/html/attributes/\350\207\252\345\212\250\345\256\214\346\210\220\345\261\236\346\200\247/index.html" +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: The HTML 自动完成属性 -slug: Web/HTML/Attributes/自动完成属性 -tags: - - HTML - - 参考 - - 地址 - - 密码 - - 属性 - - 用户名 - - 电话号码 - - 自动完成 - - 邮件地址 -translation_of: Web/HTML/Attributes/autocomplete ---- -
{{HTMLSidebar("Global_attributes")}}
- -

HTML autocomplete 属性可用于以文本或数字值作为输入的 {{HTMLElement("input")}} 元素 ， {{HTMLElement("textarea")}} 元素, {{HTMLElement("select")}} 元素, 和{{HTMLElement("form")}} 元素。 autocomplete 允许web开发人员指定，如果有任何权限 {{Glossary("user agent")}} 必须提供填写表单字段值的自动帮助，并为浏览器提供关于字段中所期望的信息类型的指导。

- -

建议值的来源通常取决于浏览器。 通常，值来自用户输入的过去值，但它们也可能来自预先配置的值。 例如，浏览器可能允许用户保存其姓名，地址，电话号码和电子邮件地址，以实现自动完成目的。 也许浏览器提供了保存加密的信用卡信息的功能，以便在身份验证过程后自动完成。

- -

如果 {{HTMLElement("input")}}, {{HTMLElement("select")}} 或{{HTMLElement("textarea")}} 元素 没有 autocomplete 属性, t则该浏览器将使用该元素的表单的 autocomplete 属性所有者，它们可是元素的后代 {{HTMLElement("form")}} 元素 也可以是其  id  由元素{{htmlattrxref("form", "input")}} 属性指定的  <form>。

- -

有关更多信息，请参见 {{HTMLElement("form")}} 中的{{htmlattrxref("autocomplete", "form")}}  属性。

- -
-

为了提供自动完成功能，用户代理可能需要<input>/<select>/<textarea> 元素才能:

- -
    -
  1. 具有 name 和/或 id 属性
    2. -
  2. 成为 <form>  的后代
    3. -
  3. 具有 {{HTMLElement("input/submit", "submit")}} 按钮的表单
    4. -
-
- -

价值

- -
-
"off"
-
浏览器不允许为此字段自动输入或选择一个值。 文档或应用程序可能提供其自己的自动完成功能，或者出于安全方面的考虑，要求不要自动输入该字段的值。 -
注意: 在大多数现代浏览器中， autocomplete 设置为 "off" 不会阻止密码管理器询问用户是否要保存用户名和密码信息，或者自动在网站的登录表单中填写这些值。 请参阅 the autocomplete attribute and login fields.
-
-
"on"
-
允许浏览器自动完成输入。 没有提供有关该字段中期望的数据类型的指导，因此浏览器可以使用自己的判断。
-
"name"
-
该字段期望该值是一个人的全名。 通常首选使用“名称”而不是将名称分解为各个组成部分，因为这样可以避免处理各种各样的人类名称及其结构。 但是，如果需要将名称分解为各个组成部分，则可以使用以下自动完成值： -
-
"honorific-prefix"
-
前缀或标题，例如“ Mrs.”，“ Mr.”，“ Miss”，“ Ms.”，“ Dr.”或“ Mlle.”。
-
"given-name"
-
给定的（或“名字”）名称。
-
"additional-name"
-
中间名。
-
"family-name"
-
姓氏（或“姓氏”）。
-
"honorific-suffix"
-
后缀，例如 "Jr.", "B.Sc.", "PhD.", "MBASW", or "IV".
-
"nickname"
-
昵称或名称。
-
-
-
"email"
-
电子邮件地址。
-
"username"
-
用户名或帐户名。
-
"new-password"
-
新密码。 创建新帐户或更改密码时，应将其用于“输入新密码”或“确认新密码”字段，而不是通常出现的“输入当前密码”字段。 浏览器可以使用它来避免意外填写现有密码，并在创建安全密码时提供帮助（另请参见 Preventing autofilling with autocomplete="new-password").
-
"current-password"
-
用户的当前密码
-
"one-time-code"
-
用于验证用户身份的一次性代码。
-
"organization-title"
-
职务或组织内某人的职务，例如“高级技术作家”，“总裁”或“助理部队负责人”。
-
"organization"
-
公司或组织名称，例如“ Acme Widget Company”或“ American Girl Scouts of America”。
-
"street-address"
-
街道地址。 它可以是多行文本，应在第二个行政级别（通常是城市或城镇）内完全标识地址的位置，但不应包括城市名称，邮政编码或邮政编码或国家/地区名称。
-
"address-line1", "address-line2", "address-line3"
-
街道地址的每一行。 仅在还存在 "street-address" 的情况下，才应提供这些内容。.
-
"address-level4"
-
在具有四个级别的地址中，粒度最细的 {{anch("Administrative levels in addresses", "administrative level")}}。
-
"address-level3"
-
第三个 {{anch("Administrative levels in addresses", "administrative level")}}, 在具有至少三个管理级别的地址中。
-
"address-level2"
-
第二个 {{anch("Administrative levels in addresses", "administrative level")}}, 在地址中至少有两个。 在具有两个行政级别的国家/地区中，通常是地址所在的城市，城镇，村庄或其他地区。
-
"address-level1"
-
地址中的第一个 {{anch("Administrative levels in addresses", "administrative level")}} 。 通常是地址所在的省份。 在美国，这就是州。 在瑞士，行政区。 在英国，小镇。
- “国家”
-
"country"
-
国家代码。
-
"country-name"
-
一个国家的名字。
-
"postal-code"
-
邮政编码（在美国，这是邮政编码）。
-
"cc-name"
-
打印在付款工具（例如信用卡）上或与之关联的全名。 通常，使用全名字段比将名称分成多个部分更可取。
-
"cc-given-name"
-
在信用卡之类的付款工具上给出的给定（名字）名称。
-
"cc-additional-name"
-
付款工具或信用卡上的中间名。
-
"cc-family-name"
-
信用卡上的姓氏。
-
"cc-number"
-
信用卡号码或其他标识付款方式的号码，例如帐号。
-
"cc-exp"
-
付款方式的到期日期，通常为“ 月份 / 年份”或“ 月份 / 年份”形式。
-
"cc-exp-month"
-
付款方式到期的月份。
-
"cc-exp-year"
-
付款方式到期的年份。.
-
"cc-csc"
-
付款工具的安全码； 在信用卡上，这是信用卡背面的3位数验证码。
-
"cc-type"
-
付款方式的类型（例如“ Visa”或“ Master Card”）。
-
"transaction-currency"
-
进行交易的货币。
-
"transaction-amount"
-
以 "transaction-currency" 指定的货币表示的金额，用于支付形式。
-
"language"
-
作为有效的 BCP 47 语言标记提供的首选语言。
-
"bday"
-
出生日期，作为完整日期。
-
"bday-day"
-
出生日期的月份中的一天。
-
"bday-month"
-
出生日期的月份。
-
"bday-year"
-
出生日期的年份。
-
"sex"
-
性别身份（例如“女性”，“法法芬”，“男性”），不带换行符的自由格式文本。
-
"tel"
-
-

完整的电话号码，包括国家/地区代码。 如果您需要将电话号码分为几个部分，则可以将以下值用于这些字段：

- -
-
"tel-country-code"
-
国家/地区代码，例如美国，加拿大和北美其他地区以及加勒比海部分地区的“ 1”。
-
"tel-national"
-
不含国家/地区代码部分的完整电话号码，包括国家/地区内部前缀。 对于电话号码“ 1-855-555-6502”，该字段的值为“ 855-555-6502”。
-
"tel-area-code"
-
区号，如果适用，可应用任何国家或地区内部前缀。
-
"tel-local"
-
不带国家或地区代码的电话号码。 这可以进一步分为两部分，分别是具有交换号码的电话号码，然后是交换局中的号码。 对于电话号码“ 555-6502”， 对于“ 555”使用 "tel-local-prefix" ，对于"6502"使用  "tel-local-suffix" 。
-
-
-
"tel-extension"
-
电话号码中的电话分机代码，例如旅馆中的房间或套房号或公司中的办公室分机号。
-
"impp"
-
即时消息协议端点的URL，例如“ xmpp：username@example.net”。
-
"url"
-
URL，例如在给定表单中其他字段的上下文的情况下的主页或公司网站地址等。
-
"photo"
-
代表表单中其他字段中提供的个人，公司或联系信息的图像的URL。
-
- -

有关更多详细信息，请参见 WHATWG 标准。 

- -
-

注意: 与其他浏览器不同， autocomplete 属性还控制Firefox是否会跨页面加载保持— 是否在整个页面加载期间保持  <input> 元素, <textarea> 元素, 或整个 <form> 的动态禁用状态和（如果适用）动态检查状态。 持久性功能默认情况下处于启用状态。 将 autocomplete 属性的值设置为off 将禁用此功能。即使autocomplete 属性通常由于其type而不适用，也可以这样做。 参考 {{bug(654072)}}.

-
- -

例子

- -
<div>
-  <label for="cc-number">Enter your credit card number</label>
-  <input type="number" name="cc-number" id="cc-number" autocomplete="off">
-</div>
- -

地址的行政级别

- -

四个行政级别字段 (address-level1 到 address-level4) 以提高地址所在国家内的精确度的方式描述地址。每个国家都有自己的行政级别系统，在写地址时可以按不同的顺序排列。

- -

address-level1 始终代表最广泛的行政区划;它是地址中除国家名之外最不特定的部分。

- -

表单布局的灵活性

- -

鉴于不同的国家/地区以不同的方式写出地址，每个字段都位于地址内的不同位置，甚至完全是不同的字段集和数量，因此，如果可能的话，您的站点能够切换到预期的布局会很有帮助 由您的用户在提供地址输入表格时给出，并给出地址所在的国家/地区。

- -

变化

- -

每个行政级别的使用方式因国家/地区而异。 以下是一些示例； 这并不是详尽的清单。

- -

美国

- -

美国境内的典型家庭住址如下所示：

- -

大街432号
- Exampleville CA 95555

- -

在美国，地址中最不明确的部分是州，在这种情况下为“ CA”（美国邮政服务的正式缩写为“ California”）。 因此，address-level1 是状态，在这种情况下为“ CA”。

- -

地址的倒数第二个特定部分是城市或城镇名称，因此在此示例地址中， address-level2 为“ Exampleville”。

- -

美国地址不使用3级及更高级别。

- -

英国

- -

在英国，地址输入表单通常包含两个地址级别以及一个，两个或三个地址行，具体取决于地址。 完整的地址如下所示：

- -

Frogmarch街103号
- 上层包装
- 苏塞克斯
- TN99 8ZZ

- -

地址级别为：

- - - -

邮政编码是分开的。 请注意，您实际上可以仅使用邮政编码和 address-line1 在英国成功发送邮件, 因此它们应该是唯一的必填项，但通常人们会提供更多详细信息。

- -

中国

- -

中国可以使用多达三个行政级别：省，市和区。

- -

技术指标

- - - - - - - - - - - - - - - - - - - - - -
规格状态评论
{{SpecName('HTML5.2', "sec-forms.html#autofilling-form-controls-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML5.2')}}
{{SpecName('HTML WHATWG', "form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML WHATWG')}}
- -

浏览器兼容性

- - - -

{{Compat("html.global_attributes.autocomplete")}}

- -

另请详见

- - diff --git a/files/zh-cn/web/html/cors_settings_attributes/index.html b/files/zh-cn/web/html/cors_settings_attributes/index.html deleted file mode 100644 index 9beb44e652..0000000000 --- a/files/zh-cn/web/html/cors_settings_attributes/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: CORS settings attributes -slug: Web/HTML/CORS_settings_attributes -tags: - - Advanced - - CORS - - HTML5 - - Security - - anonymous - - cdn - - crossorigin= - - img &video - - script &link -translation_of: Web/HTML/Attributes/crossorigin ---- -

在HTML5中，一些 HTML 元素提供了对 CORS 的支持， 例如 {{ HTMLElement("audio") }}、{{ HTMLElement("img") }}、{{ HTMLElement("link") }}、{{ HTMLElement("script") }} 和 {{ HTMLElement("video") }} 均有一个跨域属性 (crossOrigin property)，它允许你配置元素获取数据的 CORS 请求。 

- -

The crossorigin content attribute on media elements is a CORS settings attribute.

- -

这些属性是枚举的，并具有以下可能的值：

- - - - - - - - - - - - - - - - - - - - -
关键字描述
anonymous对此元素的 CORS 请求将不设置凭据标志。
use-credentials对此元素的CORS请求将设置凭证标志；这意味着请求将提供凭据。
""设置一个空的值，如 crossorigin 或 crossorigin=""，和设置 anonymous 的效果一样。
- -

默认情况下（即未指定 crossOrigin 属性时），CORS 根本不会使用。如 Terminology section of the CORS specification 中的描述，在非同源情况下，设置 "anonymous" 关键字将不会通过 cookies，客户端 SSL 证书或 HTTP 认证交换用户凭据。

- -

即使是无效的关键字和空字符串也会被当作 anonymous 关键字使用。

- -

示例：使用 crossorigin 的 script 元素

- -

你可以使用下面的 {{HTMLElement("script")}} 元素告诉浏览器执行来自 https://example.com/example-framework.js 的脚本且不发送用户凭据。

- -
<script src="https://example.com/example-framework.js" crossorigin="anonymous"></script>
- -

示例：Webmanifest with credentials

- -

在获取需要用户凭据的 manifest 时，属性值必须设置为 use-credentials。即使是同源的情况。

- -
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials">
- -

Specifications

- -

规范

- - - - - - - - - - - - - - - - - - - - - -
规范状态备注
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}}
- -

浏览器兼容性

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13{{ CompatGeckoDesktop("8.0") }}11{{ CompatNo() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoDesktop("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoMobile("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

另请参阅

- - diff --git a/files/zh-cn/web/html/dash_adaptive_streaming_for_html_5_video/index.html b/files/zh-cn/web/html/dash_adaptive_streaming_for_html_5_video/index.html deleted file mode 100644 index aed7160371..0000000000 --- a/files/zh-cn/web/html/dash_adaptive_streaming_for_html_5_video/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: 为 HTML 5 视频提供的 DASH 自适应串流 -slug: Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video -tags: - - DASH - - HTML - - HTML5 - - 指南 - - 视频流 -translation_of: Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video ---- -

经由 HTTP 的动态自适应串流（DASH）是一种自适应串流协议。 这意味着它使得视频串流能基于网络性能来调整比特率，以保证视频流畅播放。

- -

浏览器支持

- -

Firefox 21 包含了针对 HTM5 WebM 视频的 DASH 实现，但默认没有启用。可以通过在“about:config”里调整“media.dash.enabled”首选项来开启。

- -

Firefox 23 移除了针对 HTML5 WebM 视频的 DASH 实现。此功能将被 媒体源扩展 API（MSE） 的实现取代。MSE 可实现通过 JavaScript 库（例如 dash.js）来提供对 DASH 的支持。详情参见 Bug 778617。

- -

使用 DASH - 服务端

- -

首先，您需要将WebM视频转换为带有不同比特率的随附视频文件的DASH清单。根据您的需求，启动从 ffmpeg.org 的 ffmpeg 程序，就可以使用 libvpx 和 libbvorbis 支持的 WebM 视频和音频（版本2.5以上，3.2.5版本已通过测试）。

- -

1. 使用现有的WebM文件创建一个音频文件和多个视频文件。

- -

例如：

- -

文件in.video可以是任何包含至少一个音频和一个视频流的容器，这些容器可以由ffmpeg解码，

- -

创建音频：

- -
ffmpeg -i in.video -vn -acodec libvorbis -ab 128k my_audio.webm
-
-
- -

创建不同的视频

- -
ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=160:190 -b:v 250k video_160x90_250k.webm
-
-ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=320:180 -b:v 500k video_320x180_500k.webm
-
-ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=640:360 -b:v 750k  video_640x360_750k.webm
-
-ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=640:360 -b:v 1000k  video_640x360_1000k.webm
-
-ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=1280:720 -b:v 1500k  video_1280x720_1500k.webm
-
- -

或使用命令创建以上视频：

- -
ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \
--g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=160:190 -b:v 250k video_160x90_250k.webm \
--an -vf scale=320:180 -b:v 500k video_320x180_500k.webm \
--an -vf scale=640:360 -b:v 750k  video_640x360_750k.webm \
--an -vf scale=640:360 -b:v 1000k  video_640x360_1000k.webm \
--an -vf scale=1280:720 -b:v 1500k  video_1280x720_1500k.webm
- -

2. 创建清单文件

- -
ffmpeg \
-  -f webm_dash_manifest -i video_160x90_250k.webm \
-  -f webm_dash_manifest -i video_320x180_500k.webm \
-  -f webm_dash_manifest -i video_640x360_750k.webm \
-  -f webm_dash_manifest -i video_1280x720_1500k.webm \
-  -f webm_dash_manifest -i my_audio.webm \
-  -c copy \
-  -map 0 -map 1 -map 2 -map 3 -map 4 \
-  -f webm_dash_manifest \
-  -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \
-  my_video_manifest.mpd
- -

-map 参数对应输入文件的顺序（每个文件只对应一个参数）。-adaptation_sets 参数将它们分配给适配集；例如，以上命令创建一个包含 0,1,2,3 的视频集（0），而另一个（1）仅仅包含视频流 4 和音频流。

- -

将清单和相关的视频文件放在Web服务器或CDN上。 DASH通过HTTP来完成，因此只要您的HTTP服务器支持字节范围请求，并且DASH设置为使用 mimetype="application/dash+xml" 来支持 .mpd 文件即可。

- -

使用DASH-客户端

- -

您将需要修改网页，使其首先指向DASH清单，而不是直接指向特定的视频文件：

- -
<video>
-  <source src="movie.mpd">
-  <source src="movie.webm">
-  Your browser does not support the video tag.
-</video>
- -

如果浏览器支持DASH，则您的视频现在将自适应地流式传输。

- - - -

WebM DASH Specification at The WebM Project

- -

DASH Industry Forum

- -

WebM project description of how to create DASH files with FFMPEG

diff --git a/files/zh-cn/web/html/element/command/index.html b/files/zh-cn/web/html/element/command/index.html deleted file mode 100644 index 9d6a7c58fd..0000000000 --- a/files/zh-cn/web/html/element/command/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: command -slug: Web/HTML/Element/command -translation_of: Web/HTML/Element/command ---- -
-

已废弃

- -

此功能已过时。 虽然它可能仍然在某些浏览器中工作，但不鼓励使用它，因为它可能随时被删除。 尽量避免使用它。

-
- -
-

注意：command元素已经被{{Gecko("24.0")}}引擎移除以利于{{HTMLElement("menuitem")}}元素。Firefox从未支持command元素，并且在Firefox 24中删除了对{{domxref("HTMLCommandElement")}}DOM接口的实现。

-
- -

概述

- -

command元素用来表示一个用户可以调用的命令.

- -

使用规范

- - - - - - - - - - - - - - - - - - - - - - - - -
内容类别Flow content, phrasing content
是否允许有内容否, 它是一个空元素
标签遗漏必须有开始标签, 不可以有结束标签.
允许的父元素任何可以包含 phrasing content的元素.
规范文档HTML5, section 4.11.3
- -

属性

- -

和其他的HTML元素一样, 该元素支持全局属性.

- -
-
{{ htmlattrdef("checked") }}
-
表明该元素已被选择, 除非元素的type 属性是 checkbox 或者 radio,否则该属性必须被省略.
-
{{ htmlattrdef("disabled") }}
-
表明该command元素已经被禁用.
-
{{ htmlattrdef("icon") }}
-
用一张图片来显示该command元素.
-
{{ htmlattrdef("label") }}
-
该command元素的名称.用来显示给用户.
-
{{ htmlattrdef("radiogroup") }}
-
如果该元素的type属性为radio,则radiogroup属性用来表示这一组command元素的公用名称. 如果type属性不是radio,则radiogroup属性必须省略.
-
{{ htmlattrdef("type") }}
-
该属性用来表明command元素的类型,可以是下面三种值: -
    -
  • -

    command 或者为空,表示一个普通的command元素.

    -
    • -
  • -

    checkbox表明该command元素体现为一个复选框,可以来回切换选中状态.

    -
    • -
  • -

    radio 表明该command元素体现为一个单选按钮,可以来回切换选中状态.

    -
    • -
-
-
- -

DOM 接口

- -

该元素实现了HTMLCommandElement接口.

- -

例子

- -
<command type="command" label="Save" icon="icons/save.png" onclick="save()">
-
- -

浏览器兼容性

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -

 

- -

{{ languages( { "en": "en/HTML/Element/command" } ) }}

diff --git a/files/zh-cn/web/html/element/element/index.html b/files/zh-cn/web/html/element/element/index.html deleted file mode 100644 index 4db9cb2471..0000000000 --- a/files/zh-cn/web/html/element/element/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: -slug: Web/HTML/Element/element -translation_of: Web/HTML/Element/element ---- -

{{obsolete_header}}

- -
-

Note: This element has been removed from the specification. See this for more information from the editor of the specification.

-
- -

简介

- -

<element>元素被定义在最新的 HTML DOM 元素中。

- - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesTransparent content.
Permitted content???
Tag omission{{no_tag_omission}}
Permitted parent elements???
DOM interface{{domxref("HTMLElement")}}
- -

属性

- -

这个元素只有全局属性。

- -

示例

- -

Text goes here.

- -
More text goes here.
-
- -

规范

- -

<element>元素以前位于自定义元素的草稿规范中，但已被删除

- -

浏览器兼容

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

另请参阅

- - - -
{{HTMLRef}}
diff --git a/files/zh-cn/web/html/element/input/month/index.html b/files/zh-cn/web/html/element/input/month/index.html new file mode 100644 index 0000000000..9a2fbb6f2a --- /dev/null +++ b/files/zh-cn/web/html/element/input/month/index.html @@ -0,0 +1,457 @@ +--- +title: +slug: Web/HTML/Element/Input/月份 +tags: + - HTML + - Input + - 表单 +translation_of: Web/HTML/Element/input/month +--- +

{{HTMLRef}}

+ +

类型为 month 的 {{htmlelement("input")}} 可以让你容易地创建一个方便输入年份或月份的一个 {{htmlelement("input")}}。

+ +
{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}
+ + + +

这个控件在各个浏览器支持都不同，目前是支持部分浏览器。在桌面上支持情况为 Chrome/Opera 和 Edge 。在移动端支持大部分现代浏览器。在其他浏览器中，这个控件会被优雅的降级到<input type="text">.

+ +

对于那些使用不支持的浏览器的用户，Chrome / Opera月份控制如下图所示。单击右侧的向下箭头会显示日期选择器，以便您选择日期;你必须手动输入时间。

+ +

+ +

Edge的 month 看起来像这样的:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
{{anch("Value")}}一个 {{domxref("DOMString")}} 代表一个月，一年，或者是空。
Events{{event("change")}} 和 {{event("input")}}.
Supported Common Attributes{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, 和 {{htmlattrxref("step", "input")}}.
IDL attributesvalue.
Methods{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.
+ +

Value

+ +

{{domxref("DOMString")}} 表示输入输入的月份和年份的值, in the form YYYY-MM (four or more digit year, then a hyphen ("-"), followed by the two-digit month). The format of the month string used by this input type is described in {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid local month string")}}.

+ +

你可以设置一个默认的属性值插入到 {{htmlattrxref("value", "input")}} 里, 像这样:

+ +
<label for="bday-month">What month were you both in?</label>
+<input id="bday-month" type="month" name="bday-month" value="2017-06">
+ +

{{EmbedLiveSample('value-example-1', 600, 60)}}

+ +

需要注意的是显示的如期格式不同于实际的value — 日期显示的格式将根据用户的操作系统的时区设置, 而时间的格式通常会格式化为 yyyy-MM。

+ +

在向服务器提交上述值的时候他们看起来像这样：bday-month=1978-06.

+ +

你也可以使用JavaScript 的 {{domxref("HTMLInputElement.value")}} 来设置日期的值 。例如：

+ +
var monthControl = document.querySelector('input[type="month"]');
+monthControl.value = '1978-06';
+ +

{{EmbedLiveSample("value-example-2", 600, 60)}}

+ +

 

+ +

Additional attributes

+ +

In addition to the attributes common to {{HTMLElement("input")}} elements, month inputs offer the following attributes:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeDescription
{{anch("max")}}The latest year and month to accept as a valid input
{{anch("min")}}The earliest year and month to accept as a valid input
{{anch("readonly")}}A Boolean which, if present, indicates that the input's value can't be edited
{{anch("step")}}A stepping interval to use when incrementing and decrementing the value of the input field
+ +

{{htmlattrdef("max")}}

+ +

The latest year and month, in the string format discussed in the {{anch("Value")}} section above, to accept. If the {{htmlattrxref("value", "input")}} entered into the element exceeds this, the element fails constraint validation. If the value of the max attribute isn't a valid string in "yyyy-MM" format, then the element has no maximum value.

+ +

This value must specify a year-month pairing later than or equal to the one specified by the min attribute.

+ +

{{htmlattrdef("min")}}

+ +

The latest year and month to accept, in the same "yyyy-MM" format described above. If the {{htmlattrxref("value", "input")}} of the element is less than this, the element fails constraint validation. If a value is specified for min that isn't a valid year and month string, the input has no minimum value.

+ +

This value must be a year-month pairing which is earlier than or equal to the one specified by the max attribute.

+ +

{{htmlattrdef("readonly")}}

+ +

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed from JavaScript code that directly sets the value of the {{domxref("HTMLInputElement.value")}} property.

+ +
+

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

+
+ +

{{htmlattrdef("step")}}

+ +

{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}

+ +

For month inputs, the value of step is given in months, with a scaling factor of 1 (since the underlying numeric value is also in months). The default value of step is 1 month.

+ +

 

+ +

Using month inputs

+ +

与日期相关的输入乍一看很方便，它们提供了一个简单的用户界面来选择日期，并且它们将发送到服务器的数据格式规范化，而不考虑用户的本地环境。但是, 由于浏览器支持有限，所以这个 <input type="month">还是存在兼容性问题。

+ +

我们在往下看更多关于<input type="month">基础和更多的高级的用法

+ +

, 下面将讲有关缓解浏览器支持问题的建议 (请参阅{{anch("Handling browser support")}}).

+ +

Basic uses of month

+ +

最简单的<input type="month"> 涉及到基础的 <input> 和 {{htmlelement("label")}} 的元素组合, 像下面这样:

+ +
<form>
+  <label for="bday-month">What month were you both in?</label>
+  <input id="bday-month" type="month" name="bday-month">
+</form>
+ +

{{ EmbedLiveSample('Basic_uses_of_month', 600, 40) }}

+ +

设置最长和最短日期

+ +

你可以使用{{htmlattrxref("min", "input")}} 和 {{htmlattrxref("max", "input")}} 属性 来限制用户选择日期. 在下列的例子中我们设置最小月份1900-01 最大月份到 2017-08:

+ +
<form>
+  <label for="bday-month">What month were you both in?</label>
+  <input id="bday-month" type="month" name="bday-month"
+         min="1900-01" max="2017-08">
+</form>
+ +

{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}

+ +

结果是这样:

+ + + +
+

Note: You should be able to use the {{htmlattrxref("step", "input")}} attribute to vary the number of days jumped each time the date is incremented (e.g. maybe you only want to make Saturdays selectable). However, this does not seem to work effectively in any implementation at the time of writing.

+
+ +

Controlling input size

+ +

<input type="month"> doesn't support form sizing attributes such as {{htmlattrxref("size", "input")}}. You'll have to resort to CSS for sizing needs.

+ +

Validation

+ +

By default, <input type="month"> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a date — which is helpful — but you can still not fill in a date and submit, or enter an invalid date (e.g. the 32th of April).

+ +

You can use {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} to restrict the available dates (see anch("Setting maximum and minimum dates")), and in addition use the {{htmlattrxref("required", "input")}} attribute to make filling in the date mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field.

+ +

Let's look at an example — here we've set minimum and maximum dates, and also made the field required:

+ +
<form>
+  <div>
+    <label for="month">What Month would you like to visit us? (Summer months only.)</label>
+    <input id="month" type="month" name="month"
+           min="2017-06" max="2017-09" required>
+    <span class="validity"></span>
+  </div>
+  <div>
+      <input type="submit" value="Submit form">
+  </div>
+</form>
+ +

If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:

+ +

{{ EmbedLiveSample('Validation', 600, 120) }}

+ +

Here's'a screenshot for those of you who aren't using a supporting browser:

+ +

+ +

Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.

+ +
div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}
+ +
+

Important: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format.  It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).

+
+ +

Handling browser support

+ +

As mentioned above, the major problem with using date inputs at the time of writing is browser support — only Chrome/Opera and Edge support it on desktop, and most modern browsers on mobile. As an example, the month picker on Chrome for Android looks like this:

+ +

+ +

Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.

+ +

The second problem is the most serious — as we mentioned earlier, with a month input the actual value is always normalized to the format yyyy-mm. With a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there multiple ways in which people write dates, for example:

+ + + +

One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your month input. Even though the month input doesn't use it, the text input fallback will. For example, try viewing the following demo in a non-supporting browser:

+ +
<form>
+  <div>
+    <label for="month">What Month would you like to visit us? (Summer months only, yyyy-mm)</label>
+    <input id="month" type="month" name="month"
+           min="2017-06" max="2017-09" required
+           pattern="[0-9]{4}-[0-9]{2}">
+    <span class="validity"></span>
+  </div>
+  <div>
+      <input type="submit" value="Submit form">
+  </div>
+</form>
+ +

{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}

+ +

If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern nnnn-nn, where n is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates that follow the pattern.

+ +

And what user is going to understand the pattern they need to enter the date in?

+ +

We still have a problem.

+ + + +

The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the month and year in separate controls ({{htmlelement("select")}} elements being popular — see below for an implementation), or use JavaScript libraries such as jQuery date picker, and the jQuery timepicker plugin.

+ +

Examples

+ +

In this example we create two sets of UI elements for choosing dates — a native picker created with <input type="month">, and a set of two {{htmlelement("select")}} elements for choosing months/years in older browsers that don't support the native input.

+ +

{{ EmbedLiveSample('Examples', 600, 140) }}

+ +

The HTML looks like so:

+ +
<form>
+  <div class="nativeDatePicker">
+    <label for="month-visit">What Month would you like to visit us?</label>
+    <input type="month" id="month-visit" name="month-visit">
+    <span class="validity"></span>
+  </div>
+  <p class="fallbackLabel">What Month would you like to visit us?</p>
+  <div class="fallbackDatePicker">
+    <div>
+      <span>
+        <label for="month">Month:</label>
+        <select id="month" name="month">
+          <option selected>January</option>
+          <option>February</option>
+          <option>March</option>
+          <option>April</option>
+          <option>May</option>
+          <option>June</option>
+          <option>July</option>
+          <option>August</option>
+          <option>September</option>
+          <option>October</option>
+          <option>November</option>
+          <option>December</option>
+        </select>
+      </span>
+      <span>
+        <label for="year">Year:</label>
+        <select id="year" name="year">
+        </select>
+      </span>
+    </div>
+  </div>
+</form>
+ +

The months are hardcoded (as they are always the same), while the year values are dynamically generated depending on the current year (see the code comments below for detailed explanations of how these functions work.)

+ + + +

The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <input type="month">, we create a new {{htmlelement("input")}} element, set its type to month, then immediately check what its type is set to — non-supporting browsers will return text, because the date type falls back to type text. If <input type="month"> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.

+ +
// define variables
+var nativePicker = document.querySelector('.nativeDatePicker');
+var fallbackPicker = document.querySelector('.fallbackDatePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var monthSelect = document.querySelector('#month');
+
+// hide fallback initially
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// test whether a new date input falls back to a text input or not
+var test = document.createElement('input');
+test.type = 'month';
+// if it does, run the code inside the if() {} block
+if(test.type === 'text') {
+  // hide the native picker and show the fallback
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // populate the years dynamically
+  // (the months are always the same, therefore hardcoded)
+  populateYears();
+}
+
+function populateYears() {
+  // get the current year as a number
+  var date = new Date();
+  var year = date.getFullYear();
+
+  // Make this year, and the 100 years before it available in the year <select>
+  for(var i = 0; i <= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', 'forms.html#month-state-(type=month)', '<input type="month">')}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ + + +

{{Compat("html.elements.input.input-month")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/html/element/input/range/index.html b/files/zh-cn/web/html/element/input/range/index.html new file mode 100644 index 0000000000..9450c705b2 --- /dev/null +++ b/files/zh-cn/web/html/element/input/range/index.html @@ -0,0 +1,515 @@ +--- +title: +slug: Web/HTML/Element/Input/范围 +tags: + - HTML + - 元素 + - 参考 + - 网页 + - 范围 +translation_of: Web/HTML/Element/input/range +--- +
{{HTMLRef}}
+ +

{{HTMLElement("input")}}  range 类型的元素允许用户指定一个数值，该数值必须不小于给定值，并且不得大于另一个给定值。但是，精确值并不重要。通常使用滑块或拨号控件而不是像 {{HTMLElement('input/number', 'number')}}  输入类型这样的文本输入框来表示。 由于这种小部件不精确，因此除非控件的确切值不重要，否则通常不应使用它。

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

如果用户的浏览器不支持类型范围，它将回退并将其视为 {{HTMLElement('input/text', 'text')}} 输入。

+ + + + + + + + + + + + + + + + + + + + + + + + +
{{anch("Value")}}A {{domxref("DOMString")}} containing the string representation of the selected numeric value; use {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} to get the value as a {{jsxref("Number")}}.
事件{{event("change")}} and {{event("input")}}
支持的常用属性{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, and {{htmlattrxref("step", "input")}}
IDL属性list, value, 和 valueAsNumber
方法{{domxref("HTMLInputElement.stepDown", "stepDown()")}} and {{domxref("HTMLInputElement.stepUp", "stepUp()")}}
+ +

验证方式

+ +

没有可用的模式验证。 但是，执行以下形式的自动验证：

+ + + +

值

+ +

{{htmlattrxref("value", "input")}} 属性包含一个 {{domxref("DOMString")}} 该属性包含所选数字的字符串表示形式。 该值绝不能为空字符串 ("").  默认值介于指定的最小值和最大值之间，除非最大值实际上小于最小值，在这种情况下，默认值设置 min 属性的值。确定默认值的算法是：

+ +
defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min
+               : rangeElem.min + (rangeElem.max - rangeElem.min)/2;
+ +

如果尝试将值设置为小于最小值，则将其设置为最小值。 类似地，尝试将值设置为大于最大值会导致将其设置为最大值。

+ +

其他属性

+ +

除了所有 {{HTMLElement("input")}} 元素共享的属性之外，范围输入还提供以下属性：

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
属性描述
{{anch("list")}}<datalist>元素的ID，其中包含可选的预定义选项
{{anch("max")}}最大允许值
{{anch("min")}}最小允许值
{{anch("step")}}步进间隔，用于用户界面和验证目的
+ +

{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}

+ +

有关在支持的浏览器中如何表示范围中的选项的示例，请参见下面的带散列的标记范围控制

+ +

{{htmlattrdef("max")}}

+ +

允许值范围内的最大值。 如果输入到元素中的{{htmlattrxref("value", "input")}}超过此值，则元素将无法通过约束验证。  如果 max 属性的值不是数字，则元素没有最大值。

+ +

此值必须大于或等于min属性的值。 请参见 HTML max属性。

+ +

{{htmlattrdef("min")}}

+ +

允许值范围内的最小值。 如果元素的{{htmlattrxref("value", "input")}} 小于此值，则该元素将无法通过 约束验证。如果为min 指定的值不是有效数字，则输入没有最小值。

+ +

该值必须小于或等于max属性的值。 请参见 HTML min属性。

+ +

{{htmlattrdef("step")}}

+ +

{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}

+ +

range 输入的默认步进值为1，除非步进基数不是整数，否则仅允许输入整数；否则，默认值为1。 例如，如果将 min 设置为-10并将 value 设置为1.5，则1的 step 将只允许正方向上的值为1.5、2.5、3.5，...，以及-0.5，-1.5，-2.5等。 ..朝负面方向发展。 请参阅HTML step 属性。

+ +

非标准属性

+ + + + + + + + + + + + + + +
属性描述
{{anch("orient")}}设置范围滑块的方向。 仅限Firefox .
+ +
+
{{htmlattrdef("orient")}} {{non-standard_inline}}
+
类似于-moz-orient非标准CSS属性会影响 {{htmlelement('progress')}} 和 {{htmlelement('meter')}} 元素， orient 属性定义范围滑块的方向。 值包括 horizontal, 表示范围是水平呈现， 和 vertical, 其中范围是垂直呈现）。
+
+ +
+

注意：以下输入属性不适用于输入范围：accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget,高度, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, src, 和 width. 这些属性中的任何一个（如果包含）将被忽略。

+
+ +

例子

+ +

虽然 number 类型允许用户输入带有可选约束的数字，以强制其值介于最小值和最大值之间，但它确实要求他们输入特定值。 range 输入类型使您可以在用户甚至不关心或不知道所选的特定数字值是什么的情况下，向用户询问一个值。

+ +

常用范围输入的一些情况示例：

+ + + +

通常，如果用户对最小值和最大值之间的距离的百分比比实际数字本身更感兴趣，则范围输入是一个不错的选择。 例如，在家庭立体声音量控制的情况下，用户通常认为“将音量设置为最大音量的一半”而不是“将音量设置为0.5”。

+ +

指定最小和最大

+ +

默认情况下，最小值为0，最大值为100。如果这不是您想要的值，则可以通过更改 {{htmlattrxref("min", "input")}} 和/或 {{htmlattrxref("max", "input")}} 属性。 这些可以是任何浮点值。

+ +

例如，要要求用户输入介于-10和10之间的值，可以使用：

+ +
<input type="range" min="-10" max="10">
+ +

{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}

+ +

设置值的粒度

+ +

默认情况下，粒度为1，表示该值始终是整数。 您可以更改 {{htmlattrxref("step")}} 属性以控制粒度。 例如，如果您需要一个介于5到10之间的值（精确到两位小数），则应将 step 的值设置为0.01:

+ +
+
<input type="range" min="5" max="10" step="0.01">
+ +

{{EmbedLiveSample("Granularity_sample1", 600, 40)}}

+
+ +

如果要接受任何值而不论扩展到小数点后多少位，都可以为{{htmlattrxref("step", "input")}} 属性指定 any 数值。

+ +
+
<input type="range" min="0" max="3.14" step="any">
+ +

{{EmbedLiveSample("Granularity_sample2", 600, 40)}}

+ +

该示例使用户可以选择0到π之间的任何值，而对所选值的小数部分没有任何限制。

+
+ +

添加井号和标签

+ +

HTML规范使浏览器在如何显示范围控件方面具有一定的灵活性。 在散列标记和较小程度上的标签方面，这种灵活性最明显。 该规范描述了如何使用 {{htmlattrxref("list", "input")}} 属性和 {{HTMLElement("datalist")}} 元素将自定义点添加到范围控件，但没有任何要求或 甚至是沿控件长度的标准化哈希或刻度线的建议。

+ +

范围控制模型

+ +

由于浏览器具有这种灵活性，并且迄今为止都不支持HTML为范围控件定义的所有功能，因此以下是一些模型，以向您展示在支持它们的浏览器中在macOS上可以得到的功能。

+ +
无装饰的范围控制
+ +

如果不指定 {{htmlattrxref("list", "input")}} 属性，或者浏览器不支持该属性，则会得到此结果。

+ + + + + + + + + + + + + + + + + + + + + +
HTML例子
+ 
+<input type="range">
+ 		屏幕截图
Screenshot of a plain slider control on macOS
留存
{{EmbedLiveSample("An_unadorned_range_control",200,55,"","", "nobutton")}}
+ +
带散列标记的范围控件
+ +

此范围控件使用的 list 属性指定{{HTMLElement("datalist")}} 的ID，该ID定义了控件上的一系列带散列的标记。 其中有11个，因此在0％和每个10％标记处都有一个。 每个点均使用 {{HTMLElement("option")}} 元素表示，其元素 {{htmlattrxref("value", "option")}} 设置为应绘制标记的范围值。

+ + + + + + + + + + + + + + + + + + + + + +
HTML例子
+ 
+<input type="range" list="tickmarks">
+
+<datalist id="tickmarks">
+  <option value="0"></option>
+  <option value="10"></option>
+  <option value="20"></option>
+  <option value="30"></option>
+  <option value="40"></option>
+  <option value="50"></option>
+  <option value="60"></option>
+  <option value="70"></option>
+  <option value="80"></option>
+  <option value="90"></option>
+  <option value="100"></option>
+</datalist>
+
+ 		屏幕截图
Screenshot of a plain slider control on macOS
留存
{{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}}
+ +
具有散列标记和标签的范围控件
+ +

您可以通过向 {{htmlattrxref("label", "option")}} 元素添加 {{HTMLElement("option")}} 属性来将标签添加到您的范围控件中，这些元素对应于您希望为其添加标签的标记。

+ + + + + + + + + + + + + + + + + + + + + +
HTML例子
+ 
+<input type="range" list="tickmarks">
+
+<datalist id="tickmarks">
+  <option value="0" label="0%"></option>
+  <option value="10"></option>
+  <option value="20"></option>
+  <option value="30"></option>
+  <option value="40"></option>
+  <option value="50" label="50%"></option>
+  <option value="60"></option>
+  <option value="70"></option>
+  <option value="80"></option>
+  <option value="90"></option>
+  <option value="100" label="100%"></option>
+</datalist>
+
+ 		屏幕截图
Screenshot of a plain slider control on macOS
留存
{{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}}
+ +
+

注意: 目前没有浏览器完全支持这些特性。例如，Firefox根本不支持散列标记和标签，而Chrome支持散列标记，但不支持标签。Chrome的66版本(66.0.3359.181)支持标签，但是 {{htmlelement("datalist")}} 标签必须使用CSS样式，因为它的 {{cssxref("display")}}属性默认设置为 none ，隐藏了标签。

+
+ +

改变方向

+ +
+

使旋钮向左和向右滑动。 如果支持，我们将能够声明垂直高度，并通过声明高度值大于宽度值来使用CSS上下滑动。 任何主要的浏览器实际上尚未实现此功能。（请参阅{{bug(981916)}}, Chrome bug 341071)。也许它仍在讨论中。

+ +

同时，我们可以通过使用CSS变换旋转范围来使范围垂直，或者通过使用各自的方法定位每个浏览器引擎，包括通过将 {{cssxref('appearance')}} 设置为 slider-vertical, 在Firefox中使用非标准的orient 属性，或通过更改Internet Explorer和Edge的文本方向。

+ +

考虑以下范围控制：

+ +
+
<input type="range" id="volume" min="0" max="11" value="7" step="1">
+
+ +

{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}

+ +

此控件是水平的（至少对大多数主要浏览器（至少，如果不是全部）；其他控件可能有所不同）。

+ +

标准

+ +

根据规范，使其垂直需要添加CSS来更改控件的尺寸，以使其比宽度高，如下所示：

+ +
+

CSS

+ +
#volume {
+  height: 150px;
+  width: 50px;
+}
+ +

HTML

+ +
<input type="range" id="volume" min="0" max="11" value="7" step="1">
+ +

结果

+ +

{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}

+
+
+ +

不幸的是，当前没有主流浏览器直接支持垂直范围控件。

+ +

变换：旋转（-90deg）

+ +

但是，您可以通过在侧面绘制水平范围控件来创建垂直范围控件。 最简单的方法是使用CSS：通过应用 {{cssxref("transform")}} 旋转元素，可以使其垂直。 让我们来看看。

+ +

HTML

+ +

需要更新HTML，以将 {{HTMLElement("input")}} 包裹在 {{HTMLElement("div")}} 中，以便我们在执行转换后纠正布局（因为转换不会自动影响 页面的布局）：

+ +
<div class="slider-wrapper">
+  <input type="range" min="0" max="11" value="7" step="1">
+</div>
+ +

CSS

+ +

现在我们需要一些CSS。 首先是包装器本身的CSS； 这指定了我们想要的显示模式和大小，以便页面正确布局； 本质上，它是为滑块保留页面的区域，以便旋转的滑块适合保留的空间而不会造成混乱。

+ +
.slider-wrapper {
+  display: inline-block;
+  width: 20px;
+  height: 150px;
+  padding: 0;
+}
+
+ +

然后是保留空间中 <input> 元素的样式信息：

+ +
.slider-wrapper input {
+  width: 150px;
+  height: 20px;
+  margin: 0;
+  transform-origin: 75px 75px;
+  transform: rotate(-90deg);
+}
+ +

控件的大小设置为150像素长x 20像素高。 边距设置为0， {{cssxref("transform-origin")}} 移至滑块旋转通过的空间的中间； 由于滑块配置为150像素宽，因此它将旋转通过每边150像素的框。 在每个轴上将原点偏移75像素，这意味着我们将围绕该空间的中心旋转。 最后，我们将逆时针旋转90°。 结果：旋转一个范围输入，因此最大值在顶部，最小值在底部。

+ +

{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}

+ +

外观特性

+ +

{{cssxref('appearance')}}属性具有非标准值的slider-vertical可以使滑块垂直。

+ +

HTML

+ +

我们使用与前面的示例相同的HTML：

+ +
<input type="range" min="0" max="11" value="7" step="1">
+
+ +

CSS

+ +

我们仅针对具有范围类型的输入：

+ +
input[type="range"] {
+  -webkit-appearance: slider-vertical;
+}
+ +

{{EmbedLiveSample("appearance_property", 200, 200)}}

+ +

定向属性

+ +

仅在Firefox中，有一个非标准的 orient 属性。

+ +

HTML

+ +

使用与前面示例类似的HTML，我们添加属性值为 vertical:

+ +
<input type="range" min="0" max="11" value="7" step="1" orient="vertical">
+
+ +

{{EmbedLiveSample("orient_attribute", 200, 200)}}

+ +

写作模式：bt-lr;

+ +

The {{cssxref('writing-mode')}} 属性通常不应用于出于国际化或本地化目的更改文本方向，而可以用于特殊效果。

+ +

HTML

+ +

我们使用与前面的示例相同的HTML：

+ +
<input type="range" min="0" max="11" value="7" step="1">
+
+ +

CSS

+ +

我们仅以范围为类型的输入作为目标，将写入模式从默认更改为 bt-lr, 或从下至上和从左至右：

+ +
input[type="range"] {
+  writing-mode: bt-lr;
+}
+ +

{{EmbedLiveSample("writing-mode_bt-lr", 200, 200)}}

+ +

放在一起

+ +

由于上述每个示例都在不同的浏览器中工作，因此您可以将所有示例放在一个示例中，以使其在跨浏览器中工作：

+ +

HTML

+ +

对于Firefox，我们将orient属性的值保持为vertical：

+ +
<input type="range" min="0" max="11" value="7" step="1" orient="vertical">
+
+ +

CSS

+ +

对于Edge和Internet Explorer，我们仅将输入类型作为目标，将写入模式从默认更改为 bt-lr, 或者从下至上，从左至右，然后添加 -webkit-appearance: slider-vertical用于所有基于-webkit的浏览器：

+ +
input[type="range"] {
+  writing-mode: bt-lr;
+  -webkit-appearance: slider-vertical;
+}
+ +

{{EmbedLiveSample("Putting_it_all_together", 200, 200)}}

+ +

技术指标

+ + + + + + + + + + + + + + + + + + + + + +
规格状态评论
{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '<input type="range">')}}{{Spec2('HTML WHATWG')}}最初的定义
{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}}{{Spec2('HTML5.1')}}最初的定义
+ +

浏览器兼容性

+ + + +

{{Compat("html.elements.input.input-range")}}

+ +

另请参考

+ + diff --git "a/files/zh-cn/web/html/element/input/\346\234\210\344\273\275/index.html" "b/files/zh-cn/web/html/element/input/\346\234\210\344\273\275/index.html" deleted file mode 100644 index 9a2fbb6f2a..0000000000 --- "a/files/zh-cn/web/html/element/input/\346\234\210\344\273\275/index.html" +++ /dev/null @@ -1,457 +0,0 @@ ---- -title: -slug: Web/HTML/Element/Input/月份 -tags: - - HTML - - Input - - 表单 -translation_of: Web/HTML/Element/input/month ---- -

{{HTMLRef}}

- -

类型为 month 的 {{htmlelement("input")}} 可以让你容易地创建一个方便输入年份或月份的一个 {{htmlelement("input")}}。

- -
{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}
- - - -

这个控件在各个浏览器支持都不同，目前是支持部分浏览器。在桌面上支持情况为 Chrome/Opera 和 Edge 。在移动端支持大部分现代浏览器。在其他浏览器中，这个控件会被优雅的降级到<input type="text">.

- -

对于那些使用不支持的浏览器的用户，Chrome / Opera月份控制如下图所示。单击右侧的向下箭头会显示日期选择器，以便您选择日期;你必须手动输入时间。

- -

- -

Edge的 month 看起来像这样的:

- -

- - - - - - - - - - - - - - - - - - - - - - - - -
{{anch("Value")}}一个 {{domxref("DOMString")}} 代表一个月，一年，或者是空。
Events{{event("change")}} 和 {{event("input")}}.
Supported Common Attributes{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, 和 {{htmlattrxref("step", "input")}}.
IDL attributesvalue.
Methods{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.
- -

Value

- -

{{domxref("DOMString")}} 表示输入输入的月份和年份的值, in the form YYYY-MM (four or more digit year, then a hyphen ("-"), followed by the two-digit month). The format of the month string used by this input type is described in {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid local month string")}}.

- -

你可以设置一个默认的属性值插入到 {{htmlattrxref("value", "input")}} 里, 像这样:

- -
<label for="bday-month">What month were you both in?</label>
-<input id="bday-month" type="month" name="bday-month" value="2017-06">
- -

{{EmbedLiveSample('value-example-1', 600, 60)}}

- -

需要注意的是显示的如期格式不同于实际的value — 日期显示的格式将根据用户的操作系统的时区设置, 而时间的格式通常会格式化为 yyyy-MM。

- -

在向服务器提交上述值的时候他们看起来像这样：bday-month=1978-06.

- -

你也可以使用JavaScript 的 {{domxref("HTMLInputElement.value")}} 来设置日期的值 。例如：

- -
var monthControl = document.querySelector('input[type="month"]');
-monthControl.value = '1978-06';
- -

{{EmbedLiveSample("value-example-2", 600, 60)}}

- -

 

- -

Additional attributes

- -

In addition to the attributes common to {{HTMLElement("input")}} elements, month inputs offer the following attributes:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeDescription
{{anch("max")}}The latest year and month to accept as a valid input
{{anch("min")}}The earliest year and month to accept as a valid input
{{anch("readonly")}}A Boolean which, if present, indicates that the input's value can't be edited
{{anch("step")}}A stepping interval to use when incrementing and decrementing the value of the input field
- -

{{htmlattrdef("max")}}

- -

The latest year and month, in the string format discussed in the {{anch("Value")}} section above, to accept. If the {{htmlattrxref("value", "input")}} entered into the element exceeds this, the element fails constraint validation. If the value of the max attribute isn't a valid string in "yyyy-MM" format, then the element has no maximum value.

- -

This value must specify a year-month pairing later than or equal to the one specified by the min attribute.

- -

{{htmlattrdef("min")}}

- -

The latest year and month to accept, in the same "yyyy-MM" format described above. If the {{htmlattrxref("value", "input")}} of the element is less than this, the element fails constraint validation. If a value is specified for min that isn't a valid year and month string, the input has no minimum value.

- -

This value must be a year-month pairing which is earlier than or equal to the one specified by the max attribute.

- -

{{htmlattrdef("readonly")}}

- -

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed from JavaScript code that directly sets the value of the {{domxref("HTMLInputElement.value")}} property.

- -
-

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

-
- -

{{htmlattrdef("step")}}

- -

{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}

- -

For month inputs, the value of step is given in months, with a scaling factor of 1 (since the underlying numeric value is also in months). The default value of step is 1 month.

- -

 

- -

Using month inputs

- -

与日期相关的输入乍一看很方便，它们提供了一个简单的用户界面来选择日期，并且它们将发送到服务器的数据格式规范化，而不考虑用户的本地环境。但是, 由于浏览器支持有限，所以这个 <input type="month">还是存在兼容性问题。

- -

我们在往下看更多关于<input type="month">基础和更多的高级的用法

- -

, 下面将讲有关缓解浏览器支持问题的建议 (请参阅{{anch("Handling browser support")}}).

- -

Basic uses of month

- -

最简单的<input type="month"> 涉及到基础的 <input> 和 {{htmlelement("label")}} 的元素组合, 像下面这样:

- -
<form>
-  <label for="bday-month">What month were you both in?</label>
-  <input id="bday-month" type="month" name="bday-month">
-</form>
- -

{{ EmbedLiveSample('Basic_uses_of_month', 600, 40) }}

- -

设置最长和最短日期

- -

你可以使用{{htmlattrxref("min", "input")}} 和 {{htmlattrxref("max", "input")}} 属性 来限制用户选择日期. 在下列的例子中我们设置最小月份1900-01 最大月份到 2017-08:

- -
<form>
-  <label for="bday-month">What month were you both in?</label>
-  <input id="bday-month" type="month" name="bday-month"
-         min="1900-01" max="2017-08">
-</form>
- -

{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}

- -

结果是这样:

- - - -
-

Note: You should be able to use the {{htmlattrxref("step", "input")}} attribute to vary the number of days jumped each time the date is incremented (e.g. maybe you only want to make Saturdays selectable). However, this does not seem to work effectively in any implementation at the time of writing.

-
- -

Controlling input size

- -

<input type="month"> doesn't support form sizing attributes such as {{htmlattrxref("size", "input")}}. You'll have to resort to CSS for sizing needs.

- -

Validation

- -

By default, <input type="month"> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a date — which is helpful — but you can still not fill in a date and submit, or enter an invalid date (e.g. the 32th of April).

- -

You can use {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} to restrict the available dates (see anch("Setting maximum and minimum dates")), and in addition use the {{htmlattrxref("required", "input")}} attribute to make filling in the date mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field.

- -

Let's look at an example — here we've set minimum and maximum dates, and also made the field required:

- -
<form>
-  <div>
-    <label for="month">What Month would you like to visit us? (Summer months only.)</label>
-    <input id="month" type="month" name="month"
-           min="2017-06" max="2017-09" required>
-    <span class="validity"></span>
-  </div>
-  <div>
-      <input type="submit" value="Submit form">
-  </div>
-</form>
- -

If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:

- -

{{ EmbedLiveSample('Validation', 600, 120) }}

- -

Here's'a screenshot for those of you who aren't using a supporting browser:

- -

- -

Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.

- -
div {
-  margin-bottom: 10px;
-  position: relative;
-}
-
-input[type="number"] {
-  width: 100px;
-}
-
-input + span {
-  padding-right: 30px;
-}
-
-input:invalid+span:after {
-  position: absolute;
-  content: '✖';
-  padding-left: 5px;
-}
-
-input:valid+span:after {
-  position: absolute;
-  content: '✓';
-  padding-left: 5px;
-}
- -
-

Important: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format.  It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).

-
- -

Handling browser support

- -

As mentioned above, the major problem with using date inputs at the time of writing is browser support — only Chrome/Opera and Edge support it on desktop, and most modern browsers on mobile. As an example, the month picker on Chrome for Android looks like this:

- -

- -

Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.

- -

The second problem is the most serious — as we mentioned earlier, with a month input the actual value is always normalized to the format yyyy-mm. With a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there multiple ways in which people write dates, for example:

- - - -

One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your month input. Even though the month input doesn't use it, the text input fallback will. For example, try viewing the following demo in a non-supporting browser:

- -
<form>
-  <div>
-    <label for="month">What Month would you like to visit us? (Summer months only, yyyy-mm)</label>
-    <input id="month" type="month" name="month"
-           min="2017-06" max="2017-09" required
-           pattern="[0-9]{4}-[0-9]{2}">
-    <span class="validity"></span>
-  </div>
-  <div>
-      <input type="submit" value="Submit form">
-  </div>
-</form>
- -

{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}

- -

If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern nnnn-nn, where n is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates that follow the pattern.

- -

And what user is going to understand the pattern they need to enter the date in?

- -

We still have a problem.

- - - -

The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the month and year in separate controls ({{htmlelement("select")}} elements being popular — see below for an implementation), or use JavaScript libraries such as jQuery date picker, and the jQuery timepicker plugin.

- -

Examples

- -

In this example we create two sets of UI elements for choosing dates — a native picker created with <input type="month">, and a set of two {{htmlelement("select")}} elements for choosing months/years in older browsers that don't support the native input.

- -

{{ EmbedLiveSample('Examples', 600, 140) }}

- -

The HTML looks like so:

- -
<form>
-  <div class="nativeDatePicker">
-    <label for="month-visit">What Month would you like to visit us?</label>
-    <input type="month" id="month-visit" name="month-visit">
-    <span class="validity"></span>
-  </div>
-  <p class="fallbackLabel">What Month would you like to visit us?</p>
-  <div class="fallbackDatePicker">
-    <div>
-      <span>
-        <label for="month">Month:</label>
-        <select id="month" name="month">
-          <option selected>January</option>
-          <option>February</option>
-          <option>March</option>
-          <option>April</option>
-          <option>May</option>
-          <option>June</option>
-          <option>July</option>
-          <option>August</option>
-          <option>September</option>
-          <option>October</option>
-          <option>November</option>
-          <option>December</option>
-        </select>
-      </span>
-      <span>
-        <label for="year">Year:</label>
-        <select id="year" name="year">
-        </select>
-      </span>
-    </div>
-  </div>
-</form>
- -

The months are hardcoded (as they are always the same), while the year values are dynamically generated depending on the current year (see the code comments below for detailed explanations of how these functions work.)

- - - -

The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <input type="month">, we create a new {{htmlelement("input")}} element, set its type to month, then immediately check what its type is set to — non-supporting browsers will return text, because the date type falls back to type text. If <input type="month"> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.

- -
// define variables
-var nativePicker = document.querySelector('.nativeDatePicker');
-var fallbackPicker = document.querySelector('.fallbackDatePicker');
-var fallbackLabel = document.querySelector('.fallbackLabel');
-
-var yearSelect = document.querySelector('#year');
-var monthSelect = document.querySelector('#month');
-
-// hide fallback initially
-fallbackPicker.style.display = 'none';
-fallbackLabel.style.display = 'none';
-
-// test whether a new date input falls back to a text input or not
-var test = document.createElement('input');
-test.type = 'month';
-// if it does, run the code inside the if() {} block
-if(test.type === 'text') {
-  // hide the native picker and show the fallback
-  nativePicker.style.display = 'none';
-  fallbackPicker.style.display = 'block';
-  fallbackLabel.style.display = 'block';
-
-  // populate the years dynamically
-  // (the months are always the same, therefore hardcoded)
-  populateYears();
-}
-
-function populateYears() {
-  // get the current year as a number
-  var date = new Date();
-  var year = date.getFullYear();
-
-  // Make this year, and the 100 years before it available in the year <select>
-  for(var i = 0; i <= 100; i++) {
-    var option = document.createElement('option');
-    option.textContent = year-i;
-    yearSelect.appendChild(option);
-  }
-}
- -

规范

- - - - - - - - - - - - - - - - -
规范状态备注
{{SpecName('HTML WHATWG', 'forms.html#month-state-(type=month)', '<input type="month">')}}{{Spec2('HTML WHATWG')}} 
- -

浏览器兼容性

- - - -

{{Compat("html.elements.input.input-month")}}

- -

参见

- - diff --git "a/files/zh-cn/web/html/element/input/\350\214\203\345\233\264/index.html" "b/files/zh-cn/web/html/element/input/\350\214\203\345\233\264/index.html" deleted file mode 100644 index 9450c705b2..0000000000 --- "a/files/zh-cn/web/html/element/input/\350\214\203\345\233\264/index.html" +++ /dev/null @@ -1,515 +0,0 @@ ---- -title: -slug: Web/HTML/Element/Input/范围 -tags: - - HTML - - 元素 - - 参考 - - 网页 - - 范围 -translation_of: Web/HTML/Element/input/range ---- -
{{HTMLRef}}
- -

{{HTMLElement("input")}}  range 类型的元素允许用户指定一个数值，该数值必须不小于给定值，并且不得大于另一个给定值。但是，精确值并不重要。通常使用滑块或拨号控件而不是像 {{HTMLElement('input/number', 'number')}}  输入类型这样的文本输入框来表示。 由于这种小部件不精确，因此除非控件的确切值不重要，否则通常不应使用它。

- -
{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}
- - - -

如果用户的浏览器不支持类型范围，它将回退并将其视为 {{HTMLElement('input/text', 'text')}} 输入。

- - - - - - - - - - - - - - - - - - - - - - - - -
{{anch("Value")}}A {{domxref("DOMString")}} containing the string representation of the selected numeric value; use {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} to get the value as a {{jsxref("Number")}}.
事件{{event("change")}} and {{event("input")}}
支持的常用属性{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, and {{htmlattrxref("step", "input")}}
IDL属性list, value, 和 valueAsNumber
方法{{domxref("HTMLInputElement.stepDown", "stepDown()")}} and {{domxref("HTMLInputElement.stepUp", "stepUp()")}}
- -

验证方式

- -

没有可用的模式验证。 但是，执行以下形式的自动验证：

- - - -

值

- -

{{htmlattrxref("value", "input")}} 属性包含一个 {{domxref("DOMString")}} 该属性包含所选数字的字符串表示形式。 该值绝不能为空字符串 ("").  默认值介于指定的最小值和最大值之间，除非最大值实际上小于最小值，在这种情况下，默认值设置 min 属性的值。确定默认值的算法是：

- -
defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min
-               : rangeElem.min + (rangeElem.max - rangeElem.min)/2;
- -

如果尝试将值设置为小于最小值，则将其设置为最小值。 类似地，尝试将值设置为大于最大值会导致将其设置为最大值。

- -

其他属性

- -

除了所有 {{HTMLElement("input")}} 元素共享的属性之外，范围输入还提供以下属性：

- - - - - - - - - - - - - - - - - - - - - - - - - - -
属性描述
{{anch("list")}}<datalist>元素的ID，其中包含可选的预定义选项
{{anch("max")}}最大允许值
{{anch("min")}}最小允许值
{{anch("step")}}步进间隔，用于用户界面和验证目的
- -

{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}

- -

有关在支持的浏览器中如何表示范围中的选项的示例，请参见下面的带散列的标记范围控制

- -

{{htmlattrdef("max")}}

- -

允许值范围内的最大值。 如果输入到元素中的{{htmlattrxref("value", "input")}}超过此值，则元素将无法通过约束验证。  如果 max 属性的值不是数字，则元素没有最大值。

- -

此值必须大于或等于min属性的值。 请参见 HTML max属性。

- -

{{htmlattrdef("min")}}

- -

允许值范围内的最小值。 如果元素的{{htmlattrxref("value", "input")}} 小于此值，则该元素将无法通过 约束验证。如果为min 指定的值不是有效数字，则输入没有最小值。

- -

该值必须小于或等于max属性的值。 请参见 HTML min属性。

- -

{{htmlattrdef("step")}}

- -

{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}

- -

range 输入的默认步进值为1，除非步进基数不是整数，否则仅允许输入整数；否则，默认值为1。 例如，如果将 min 设置为-10并将 value 设置为1.5，则1的 step 将只允许正方向上的值为1.5、2.5、3.5，...，以及-0.5，-1.5，-2.5等。 ..朝负面方向发展。 请参阅HTML step 属性。

- -

非标准属性

- - - - - - - - - - - - - - -
属性描述
{{anch("orient")}}设置范围滑块的方向。 仅限Firefox .
- -
-
{{htmlattrdef("orient")}} {{non-standard_inline}}
-
类似于-moz-orient非标准CSS属性会影响 {{htmlelement('progress')}} 和 {{htmlelement('meter')}} 元素， orient 属性定义范围滑块的方向。 值包括 horizontal, 表示范围是水平呈现， 和 vertical, 其中范围是垂直呈现）。
-
- -
-

注意：以下输入属性不适用于输入范围：accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget,高度, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, src, 和 width. 这些属性中的任何一个（如果包含）将被忽略。

-
- -

例子

- -

虽然 number 类型允许用户输入带有可选约束的数字，以强制其值介于最小值和最大值之间，但它确实要求他们输入特定值。 range 输入类型使您可以在用户甚至不关心或不知道所选的特定数字值是什么的情况下，向用户询问一个值。

- -

常用范围输入的一些情况示例：

- - - -

通常，如果用户对最小值和最大值之间的距离的百分比比实际数字本身更感兴趣，则范围输入是一个不错的选择。 例如，在家庭立体声音量控制的情况下，用户通常认为“将音量设置为最大音量的一半”而不是“将音量设置为0.5”。

- -

指定最小和最大

- -

默认情况下，最小值为0，最大值为100。如果这不是您想要的值，则可以通过更改 {{htmlattrxref("min", "input")}} 和/或 {{htmlattrxref("max", "input")}} 属性。 这些可以是任何浮点值。

- -

例如，要要求用户输入介于-10和10之间的值，可以使用：

- -
<input type="range" min="-10" max="10">
- -

{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}

- -

设置值的粒度

- -

默认情况下，粒度为1，表示该值始终是整数。 您可以更改 {{htmlattrxref("step")}} 属性以控制粒度。 例如，如果您需要一个介于5到10之间的值（精确到两位小数），则应将 step 的值设置为0.01:

- -
-
<input type="range" min="5" max="10" step="0.01">
- -

{{EmbedLiveSample("Granularity_sample1", 600, 40)}}

-
- -

如果要接受任何值而不论扩展到小数点后多少位，都可以为{{htmlattrxref("step", "input")}} 属性指定 any 数值。

- -
-
<input type="range" min="0" max="3.14" step="any">
- -

{{EmbedLiveSample("Granularity_sample2", 600, 40)}}

- -

该示例使用户可以选择0到π之间的任何值，而对所选值的小数部分没有任何限制。

-
- -

添加井号和标签

- -

HTML规范使浏览器在如何显示范围控件方面具有一定的灵活性。 在散列标记和较小程度上的标签方面，这种灵活性最明显。 该规范描述了如何使用 {{htmlattrxref("list", "input")}} 属性和 {{HTMLElement("datalist")}} 元素将自定义点添加到范围控件，但没有任何要求或 甚至是沿控件长度的标准化哈希或刻度线的建议。

- -

范围控制模型

- -

由于浏览器具有这种灵活性，并且迄今为止都不支持HTML为范围控件定义的所有功能，因此以下是一些模型，以向您展示在支持它们的浏览器中在macOS上可以得到的功能。

- -
无装饰的范围控制
- -

如果不指定 {{htmlattrxref("list", "input")}} 属性，或者浏览器不支持该属性，则会得到此结果。

- - - - - - - - - - - - - - - - - - - - - -
HTML例子
- 
-<input type="range">
- 		屏幕截图
Screenshot of a plain slider control on macOS
留存
{{EmbedLiveSample("An_unadorned_range_control",200,55,"","", "nobutton")}}
- -
带散列标记的范围控件
- -

此范围控件使用的 list 属性指定{{HTMLElement("datalist")}} 的ID，该ID定义了控件上的一系列带散列的标记。 其中有11个，因此在0％和每个10％标记处都有一个。 每个点均使用 {{HTMLElement("option")}} 元素表示，其元素 {{htmlattrxref("value", "option")}} 设置为应绘制标记的范围值。

- - - - - - - - - - - - - - - - - - - - - -
HTML例子
- 
-<input type="range" list="tickmarks">
-
-<datalist id="tickmarks">
-  <option value="0"></option>
-  <option value="10"></option>
-  <option value="20"></option>
-  <option value="30"></option>
-  <option value="40"></option>
-  <option value="50"></option>
-  <option value="60"></option>
-  <option value="70"></option>
-  <option value="80"></option>
-  <option value="90"></option>
-  <option value="100"></option>
-</datalist>
-
- 		屏幕截图
Screenshot of a plain slider control on macOS
留存
{{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}}
- -
具有散列标记和标签的范围控件
- -

您可以通过向 {{htmlattrxref("label", "option")}} 元素添加 {{HTMLElement("option")}} 属性来将标签添加到您的范围控件中，这些元素对应于您希望为其添加标签的标记。

- - - - - - - - - - - - - - - - - - - - - -
HTML例子
- 
-<input type="range" list="tickmarks">
-
-<datalist id="tickmarks">
-  <option value="0" label="0%"></option>
-  <option value="10"></option>
-  <option value="20"></option>
-  <option value="30"></option>
-  <option value="40"></option>
-  <option value="50" label="50%"></option>
-  <option value="60"></option>
-  <option value="70"></option>
-  <option value="80"></option>
-  <option value="90"></option>
-  <option value="100" label="100%"></option>
-</datalist>
-
- 		屏幕截图
Screenshot of a plain slider control on macOS
留存
{{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}}
- -
-

注意: 目前没有浏览器完全支持这些特性。例如，Firefox根本不支持散列标记和标签，而Chrome支持散列标记，但不支持标签。Chrome的66版本(66.0.3359.181)支持标签，但是 {{htmlelement("datalist")}} 标签必须使用CSS样式，因为它的 {{cssxref("display")}}属性默认设置为 none ，隐藏了标签。

-
- -

改变方向

- -
-

使旋钮向左和向右滑动。 如果支持，我们将能够声明垂直高度，并通过声明高度值大于宽度值来使用CSS上下滑动。 任何主要的浏览器实际上尚未实现此功能。（请参阅{{bug(981916)}}, Chrome bug 341071)。也许它仍在讨论中。

- -

同时，我们可以通过使用CSS变换旋转范围来使范围垂直，或者通过使用各自的方法定位每个浏览器引擎，包括通过将 {{cssxref('appearance')}} 设置为 slider-vertical, 在Firefox中使用非标准的orient 属性，或通过更改Internet Explorer和Edge的文本方向。

- -

考虑以下范围控制：

- -
-
<input type="range" id="volume" min="0" max="11" value="7" step="1">
-
- -

{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}

- -

此控件是水平的（至少对大多数主要浏览器（至少，如果不是全部）；其他控件可能有所不同）。

- -

标准

- -

根据规范，使其垂直需要添加CSS来更改控件的尺寸，以使其比宽度高，如下所示：

- -
-

CSS

- -
#volume {
-  height: 150px;
-  width: 50px;
-}
- -

HTML

- -
<input type="range" id="volume" min="0" max="11" value="7" step="1">
- -

结果

- -

{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}

-
-
- -

不幸的是，当前没有主流浏览器直接支持垂直范围控件。

- -

变换：旋转（-90deg）

- -

但是，您可以通过在侧面绘制水平范围控件来创建垂直范围控件。 最简单的方法是使用CSS：通过应用 {{cssxref("transform")}} 旋转元素，可以使其垂直。 让我们来看看。

- -

HTML

- -

需要更新HTML，以将 {{HTMLElement("input")}} 包裹在 {{HTMLElement("div")}} 中，以便我们在执行转换后纠正布局（因为转换不会自动影响 页面的布局）：

- -
<div class="slider-wrapper">
-  <input type="range" min="0" max="11" value="7" step="1">
-</div>
- -

CSS

- -

现在我们需要一些CSS。 首先是包装器本身的CSS； 这指定了我们想要的显示模式和大小，以便页面正确布局； 本质上，它是为滑块保留页面的区域，以便旋转的滑块适合保留的空间而不会造成混乱。

- -
.slider-wrapper {
-  display: inline-block;
-  width: 20px;
-  height: 150px;
-  padding: 0;
-}
-
- -

然后是保留空间中 <input> 元素的样式信息：

- -
.slider-wrapper input {
-  width: 150px;
-  height: 20px;
-  margin: 0;
-  transform-origin: 75px 75px;
-  transform: rotate(-90deg);
-}
- -

控件的大小设置为150像素长x 20像素高。 边距设置为0， {{cssxref("transform-origin")}} 移至滑块旋转通过的空间的中间； 由于滑块配置为150像素宽，因此它将旋转通过每边150像素的框。 在每个轴上将原点偏移75像素，这意味着我们将围绕该空间的中心旋转。 最后，我们将逆时针旋转90°。 结果：旋转一个范围输入，因此最大值在顶部，最小值在底部。

- -

{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}

- -

外观特性

- -

{{cssxref('appearance')}}属性具有非标准值的slider-vertical可以使滑块垂直。

- -

HTML

- -

我们使用与前面的示例相同的HTML：

- -
<input type="range" min="0" max="11" value="7" step="1">
-
- -

CSS

- -

我们仅针对具有范围类型的输入：

- -
input[type="range"] {
-  -webkit-appearance: slider-vertical;
-}
- -

{{EmbedLiveSample("appearance_property", 200, 200)}}

- -

定向属性

- -

仅在Firefox中，有一个非标准的 orient 属性。

- -

HTML

- -

使用与前面示例类似的HTML，我们添加属性值为 vertical:

- -
<input type="range" min="0" max="11" value="7" step="1" orient="vertical">
-
- -

{{EmbedLiveSample("orient_attribute", 200, 200)}}

- -

写作模式：bt-lr;

- -

The {{cssxref('writing-mode')}} 属性通常不应用于出于国际化或本地化目的更改文本方向，而可以用于特殊效果。

- -

HTML

- -

我们使用与前面的示例相同的HTML：

- -
<input type="range" min="0" max="11" value="7" step="1">
-
- -

CSS

- -

我们仅以范围为类型的输入作为目标，将写入模式从默认更改为 bt-lr, 或从下至上和从左至右：

- -
input[type="range"] {
-  writing-mode: bt-lr;
-}
- -

{{EmbedLiveSample("writing-mode_bt-lr", 200, 200)}}

- -

放在一起

- -

由于上述每个示例都在不同的浏览器中工作，因此您可以将所有示例放在一个示例中，以使其在跨浏览器中工作：

- -

HTML

- -

对于Firefox，我们将orient属性的值保持为vertical：

- -
<input type="range" min="0" max="11" value="7" step="1" orient="vertical">
-
- -

CSS

- -

对于Edge和Internet Explorer，我们仅将输入类型作为目标，将写入模式从默认更改为 bt-lr, 或者从下至上，从左至右，然后添加 -webkit-appearance: slider-vertical用于所有基于-webkit的浏览器：

- -
input[type="range"] {
-  writing-mode: bt-lr;
-  -webkit-appearance: slider-vertical;
-}
- -

{{EmbedLiveSample("Putting_it_all_together", 200, 200)}}

- -

技术指标

- - - - - - - - - - - - - - - - - - - - - -
规格状态评论
{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '<input type="range">')}}{{Spec2('HTML WHATWG')}}最初的定义
{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}}{{Spec2('HTML5.1')}}最初的定义
- -

浏览器兼容性

- - - -

{{Compat("html.elements.input.input-range")}}

- -

另请参考

- - diff --git a/files/zh-cn/web/html/focus_management_in_html/index.html b/files/zh-cn/web/html/focus_management_in_html/index.html deleted file mode 100644 index df29adde76..0000000000 --- a/files/zh-cn/web/html/focus_management_in_html/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: HTML 焦点管理 -slug: Web/HTML/Focus_management_in_HTML -tags: - - DOM - - HTML - - HTML5 - - 焦点 -translation_of: Web/API/Document/hasFocus -translation_of_original: Web/HTML/Focus_management_in_HTML ---- -

重定向 Document.hasFocus()

- -

 

- -

在 HTML5 工作草案中，DOM 属性 activeElement 与方法 hasFocus() 为程序员提供了更好的控制页面交互的能力，特别是对于用户行为引发的交互。例如，它们都可以用于统计使用目的，跟踪页面特定链接的点击次数，计算元素获得焦点的次数等等。此外，当与 AJAX 技术结合以后，将会减少向服务器请求的数目，这取决于用户的活跃程度和页面的布局。

- -

浏览器兼容性

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatGeckoDesktop("1.9.2")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

浏览器相关注释

- -

Gecko notes

- -

[1] Gecko 8.0 {{geckoRelease("8.0")}} 开始，Firefox 会在任意 tabindex 值大于 0 的元素周围绘制一个焦点框，而不只是一小部分元素。一部分元素例外： {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("iframe")}}, {{HTMLElement("frame")}}, {{HTMLElement("body")}} 和 {{HTMLElement("html")}}。

- -

另请参阅

- - diff --git a/files/zh-cn/web/html/global_attributes/dropzone/index.html b/files/zh-cn/web/html/global_attributes/dropzone/index.html deleted file mode 100644 index 316e41a944..0000000000 --- a/files/zh-cn/web/html/global_attributes/dropzone/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: dropzone -slug: Web/HTML/Global_attributes/dropzone -translation_of: Web/HTML/Global_attributes/dropzone ---- -

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

- -

dropzone 全局属性 是个枚举属性，表示什么内容类型可以拖放到元素上，使用 Drag and Drop API，它可以拥有以下值：

- - - -

规范

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML WHATWG')}}与最新的快照{{SpecName('HTML5.1')}} 没有区别
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} 的快照，最初定义
- -

浏览器兼容性

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
基础支持{{ CompatUnknown() }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基础支持{{ CompatUnknown() }}{{ CompatUnknown}}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

另见

- - diff --git a/files/zh-cn/web/html/global_attributes/x-ms-acceleratorkey/index.html b/files/zh-cn/web/html/global_attributes/x-ms-acceleratorkey/index.html new file mode 100644 index 0000000000..b44ded3590 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/x-ms-acceleratorkey/index.html @@ -0,0 +1,41 @@ +--- +title: x-ms-加速装置键 +slug: Web/HTML/Global_attributes/x-ms-加速装置键 +tags: + - HTML + - 参考 + - 属性 + - 无标准的 +translation_of: Web/HTML/Global_attributes/x-ms-acceleratorkey +--- +
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
+ +

 x-ms-acceleratorkey 属性声明 accelerator key 已经分配给一个元素: 当按下键盘上的键时，通过JavaScript激活该元素。

+ +

{{Non-standard_Inline}} 此专有属性是特定于 Internet Explorer 和 Microsoft Edge的。

+ +

对于屏幕阅读器和其他辅助技术，x-ms-acceleratorkey  在可访问性树中公开一个通知，即该元素存在一个加速器键。此属性不提供加速器键行为。必须提供JavaScript事件处理程序，如onkeypress, onkeydown, 或者 onkeyup, 来侦听声明的加速器键并相应地激活元素。

+ +

为下列元素提供键盘快捷方式：不需要JavaScript的，请使用 the accesskey 属性。

+ +

语法

+ +
<button x-ms-acceleratorkey="[explanation of key combination]">…</button>
+ +

价值

+ +

加速器键组合。例如：

+ + + +

另请参阅

+ + diff --git a/files/zh-cn/web/html/global_attributes/x-ms-format-detection/index.html b/files/zh-cn/web/html/global_attributes/x-ms-format-detection/index.html new file mode 100644 index 0000000000..c36b3ca744 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/x-ms-format-detection/index.html @@ -0,0 +1,43 @@ +--- +title: x-ms-格式-检测 +slug: Web/HTML/Global_attributes/x-ms-格式-检测 +tags: + - HTML + - x-ms-format-detection + - 参考 + - 属性 +translation_of: Web/HTML/Global_attributes/x-ms-format-detection +--- +
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
+ +

这个 x-ms-format-detection 属性确定元素文本中的数据格式(如电话号码)是否自动转换为可跟踪链接。

+ +

现有的链接(例如带有tel: 计划不受影响。

+ +
+

通过格式检测创建的链接不会出现在DOM中。

+
+ +

{{Non-standard_inline}} 此专有属性是特定于 Internet Explorer 和Microsoft Edge。

+ +

语法

+ +
<html x-ms-format-detection="none">
+
+ +

价值

+ +
+
all
+
检测所有受支持的数据格式。
+
none
+
关闭格式检测。
+
phone
+
电话号码模式是自动链接的。
+
+ +

另请详见

+ + diff --git "a/files/zh-cn/web/html/global_attributes/x-ms-\345\212\240\351\200\237\350\243\205\347\275\256\351\224\256/index.html" "b/files/zh-cn/web/html/global_attributes/x-ms-\345\212\240\351\200\237\350\243\205\347\275\256\351\224\256/index.html" deleted file mode 100644 index b44ded3590..0000000000 --- "a/files/zh-cn/web/html/global_attributes/x-ms-\345\212\240\351\200\237\350\243\205\347\275\256\351\224\256/index.html" +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: x-ms-加速装置键 -slug: Web/HTML/Global_attributes/x-ms-加速装置键 -tags: - - HTML - - 参考 - - 属性 - - 无标准的 -translation_of: Web/HTML/Global_attributes/x-ms-acceleratorkey ---- -
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
- -

 x-ms-acceleratorkey 属性声明 accelerator key 已经分配给一个元素: 当按下键盘上的键时，通过JavaScript激活该元素。

- -

{{Non-standard_Inline}} 此专有属性是特定于 Internet Explorer 和 Microsoft Edge的。

- -

对于屏幕阅读器和其他辅助技术，x-ms-acceleratorkey  在可访问性树中公开一个通知，即该元素存在一个加速器键。此属性不提供加速器键行为。必须提供JavaScript事件处理程序，如onkeypress, onkeydown, 或者 onkeyup, 来侦听声明的加速器键并相应地激活元素。

- -

为下列元素提供键盘快捷方式：不需要JavaScript的，请使用 the accesskey 属性。

- -

语法

- -
<button x-ms-acceleratorkey="[explanation of key combination]">…</button>
- -

价值

- -

加速器键组合。例如：

- - - -

另请参阅

- - diff --git "a/files/zh-cn/web/html/global_attributes/x-ms-\346\240\274\345\274\217-\346\243\200\346\265\213/index.html" "b/files/zh-cn/web/html/global_attributes/x-ms-\346\240\274\345\274\217-\346\243\200\346\265\213/index.html" deleted file mode 100644 index c36b3ca744..0000000000 --- "a/files/zh-cn/web/html/global_attributes/x-ms-\346\240\274\345\274\217-\346\243\200\346\265\213/index.html" +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: x-ms-格式-检测 -slug: Web/HTML/Global_attributes/x-ms-格式-检测 -tags: - - HTML - - x-ms-format-detection - - 参考 - - 属性 -translation_of: Web/HTML/Global_attributes/x-ms-format-detection ---- -
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
- -

这个 x-ms-format-detection 属性确定元素文本中的数据格式(如电话号码)是否自动转换为可跟踪链接。

- -

现有的链接(例如带有tel: 计划不受影响。

- -
-

通过格式检测创建的链接不会出现在DOM中。

-
- -

{{Non-standard_inline}} 此专有属性是特定于 Internet Explorer 和Microsoft Edge。

- -

语法

- -
<html x-ms-format-detection="none">
-
- -

价值

- -
-
all
-
检测所有受支持的数据格式。
-
none
-
关闭格式检测。
-
phone
-
电话号码模式是自动链接的。
-
- -

另请详见

- - diff --git a/files/zh-cn/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/zh-cn/web/html/optimizing_your_pages_for_speculative_parsing/index.html deleted file mode 100644 index bded58d8fd..0000000000 --- a/files/zh-cn/web/html/optimizing_your_pages_for_speculative_parsing/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: 对页面预解析进行优化 -slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing -translation_of: Glossary/speculative_parsing ---- -

在传统的浏览器中，HTML 解析器运行于主线程之中，并且在遇到 </script> 标签后会被阻塞，直到脚本从网络中被获取和执行。 Firefox 4 和后续的版本支持从主线程中分离的预解析技术。 当脚本在获取和执行的过程中，预解析技术能提前解析HTML文档。在Firefox 3.5 和 3.6中, HTML 解析器能够在文档流中预先加载脚本、层叠样式表和图片。然而, 在Firefox 4 和后续的版本中 HTML 解析器也预先运行HTML 树构建算法。 这一举措的优点是当预解析成功后，就没有必要再重新解析已经扫描过并且成功下载的脚本，层叠样式表和图片；缺点就是当预解析失败之后，有很多工作需要去做。

- -

这篇文档旨在帮助你避免预解析失败和页面加载变慢。

- -

使预加载成功

- -

让脚本、层叠样式表和图片预加载成功的规则只有一条:

- - - -

避免树构建器的输出丢失

- -

当document.write() 改变了文档树的状态时，树构建器的预构建过程会失败。 例如，当所有被document.write() 插入的内容被解析之后</script> 标签后的预处理状态不再持有。 然而，只有不寻常地使用 document.write() 才会产生问题。 这些事情需要避免：

- - diff --git a/files/zh-cn/web/html/supported_media_formats/index.html b/files/zh-cn/web/html/supported_media_formats/index.html deleted file mode 100644 index d6a5d3753e..0000000000 --- a/files/zh-cn/web/html/supported_media_formats/index.html +++ /dev/null @@ -1,563 +0,0 @@ ---- -title: 'HTML的媒体支持:audio和video元素' -slug: Web/HTML/Supported_media_formats -tags: - - HTML Media Video Audio -translation_of: Web/Media/Formats -translation_of_original: Web/HTML/Supported_media_formats ---- -

    {{HTMLElement("audio")}} 和 {{HTMLElement("video")}}是浏览器内置的播放音频或视频的元素;视频和音频编解码器用来处理视频和音频，不同的编解码器提供不同级别的压缩率和分辨率；一个容器封装格式（多媒体容器格式）用来存储和传输编码后的视频和音频（如果视频带有音轨则同时；编解码器和多媒体容器格式有非常多的组合；尽管只有很少部分和WEB相关；
-    
-     由于专利的问题，不同的浏览器对HTML5的video和audio有不同的规范和实现；WEB上的媒体格式领域受到在包括美国、欧盟在内的许多国家的专利法的保护和制约；本文将讨论了不同的编解码器和封装格式在WEB上的各种组合，包括在桌面设备和其他设备上的浏览器的支持情况。

- -

     想要在HTML5中播放视频，并且主流浏览器的最新版本中支持良好；可以使用WebM 和 MPEG H.264 AAC 编码格式；像下面一样使用{{HTMLElement("source")}}元素

- -
<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/VP9 or MP4 with H.264.
-  <!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
-</video>
-
- -

- -

Ogg Theora Vorbis

- -

Ogg容器格式使用Theora视频编解码器和 Vorbis音频编解码器。在的桌面和移动端的Gecko(Firefox)，Chrome和Opera；Safari（非IOS）可以通过添加扩展支持；但是不支持IE

- -

WebM在可选的情况下是优选项；因为它能提供更高的压缩比，并且被更多的浏览器所支持；而Ogg容器格式主要用于支持低版本的浏览器（比如： Firefox 3.5/3.6就不支持WebM，但是支持Ogg）

- -

Ogg的授权情况和WebM类似

- -

Gecko提供下面3种Ogg文件格式的MIME type：

- -

audio/ogg

- -

一个只包含音频的Ogg文件

- -

video/ogg

- -

一个包含视频或音频的Ogg文件

- -

application/ogg

- -

一个不指定内容的Ogg文件，当你不知道内容的时候可以选择

- -

Ogg Opus

- -

Ogg容器可以通过使用Opus codec包含音频编解码器；用来支持Gecko 15.0 (Firefox 15.0 / Thunderbird 15.0 / SeaMonkey 2.12) 或更新的版本

- -

Ogg FLAC

- -

Ogg容器可以通过使用FLAC codec包含音频编解码器；用来支持Gecko 51.0 {{geckoRelease("51.0")}} 或更新的版本, 但只适用于桌面浏览器

- -

MP4 FLAC

- -

从Firefox 51开始，你就可以使用FLAC编解码器播放MP4了，不管你有没有安装 MediaSource Extensions和DRM 扩展支持。

- -

MP3

- -

MP3 audio 编码对应浏览器<audio>的支持。其中Firefox/Firefox for Android/Firefox OS需要操作系统本身提供了MP3的解码器；而IE，Chrome，Safari则原生支持

- -

WAVE PCM

- -

WAVE容器使用PCM音频编解码器；桌面和移动Gecko (Firefox) a、 Safari都支持，WAVE容器中的文件后缀为 ".wav"。

- -
See RFC 2361 for the WAVE codec registry.
- -

Gecko提供下面4种WAVE文件格式的MIME type：

- - - -

FLAC

- -

FLAC容器格式使用 FLAC 音频编解码器 (FLAC codec)；桌面端受到Gecko Firefox 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48)的支持，文件后缀为 “.flac”

- -

Gecko提供下面4种FLAC文件格式的MIME type：

- - - -

Media Source Extensions (MSE)

- -

媒体源扩展(MSE)是一个W3C工作草案，计划扩展{{domxref("HTMLMediaElement")}}以允许JavaScript生成用于重放的媒体流。 允许JavaScript生成流以适应各种应用场景，如自适应流和时移实时流。 MSE支持仅限于MP4和WebM容器，但编解码器支持因底层平台而异。

- -

例如：可以使用JavaScript实现MPEG-DASH，同时将解码解压缩到MSE。
-
- For example, you could implement MPEG-DASH using JavaScript while offloading the decoding to MSE.

- -
-

时间位移(Time shifting) 功能主要是将即时内容，录制在存储器上，可以暂时离开，一定时间回来后，可以从离开的时间通过内部的重播。

-
- -

浏览器兼容情况

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support3.0{{CompatGeckoDesktop("1.9.1")}}9.010.503.1
<audio>: PCM in WAVE{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatNo}}10.503.1
<audio>: Vorbis in WebM{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}{{CompatNo}}10.603.1[1]
<audio>: Streaming Vorbis/Opus in WebM via MSE{{CompatUnknown}}{{CompatGeckoDesktop("36.0")}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
<audio>: Vorbis in Ogg{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatNo}}10.50{{CompatNo}}
<audio>: MP3{{CompatVersionUnknown}}[4]{{CompatVersionUnknown}}[5]9.0{{CompatVersionUnknown}}3.1
<audio>: MP3 in MP4{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
<audio>: AAC in MP4{{CompatVersionUnknown}}[6]{{CompatVersionUnknown}}[7]9.0{{CompatVersionUnknown}}3.1
<audio>: Opus in Ogg27.0{{CompatGeckoDesktop("15.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
<audio>: FLAC56.0{{CompatGeckoDesktop("51")}}{{CompatNo}}{{CompatNo}}11
<audio>: FLAC in Ogg56.0{{CompatGeckoDesktop("51")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
<video>: VP8 and Vorbis in WebM6.0{{CompatGeckoDesktop("2.0")}}9.0[8]10.603.1[9]
<video>: VP9 and Opus in WebM29.0{{CompatGeckoDesktop("28.0")}}[36]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
<video>: Streaming WebM via MSE{{CompatUnknown}}{{CompatGeckoDesktop("42.0")}}[35]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
<video>: Theora and Vorbis in Ogg{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatNo}}10.50{{CompatNo}}
<video>: H.264 and MP3 in MP4{{CompatVersionUnknown}}[3]{{CompatVersionUnknown}}[10]9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
<video>: H.264 and AAC in MP4{{CompatVersionUnknown}}[4]{{CompatVersionUnknown}}[11]9.0{{CompatVersionUnknown}}3.1
<video>: FLAC in MP462.0{{CompatGeckoDesktop(51)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
any other format{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}3.1[12]
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileOpera MiniSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatChrome(29)}}24.01.0.110.011.0{{CompatVersionUnknown}}[13]3.2
<audio>: PCM in WAVE{{CompatUnknown}}{{CompatUnknown}}24.01.0.1{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}[14]3.2
<audio>: Vorbis in WebM{{CompatUnknown}}{{CompatUnknown}}24.01.0.1{{CompatNo}}11.0{{CompatVersionUnknown}}[15]{{CompatNo}}
<audio>: Streaming Vorbis in WebM via MSE{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
<audio>: Vorbis in Ogg{{CompatUnknown}}{{CompatUnknown}}24.01.0.1{{CompatNo}}11.0{{CompatVersionUnknown}}[16]{{CompatNo}}
<audio>: MP3{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}[17]{{CompatVersionUnknown}}[18]10.0{{CompatUnknown}}{{CompatVersionUnknown}}[19]3.2
<audio>: MP3 in MP4{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
<audio>: AAC in MP4{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}[20]{{CompatVersionUnknown}}[21]10.0{{CompatUnknown}}{{CompatVersionUnknown}}[22]{{CompatVersionUnknown}}
<audio>: Opus in Ogg{{CompatNo}}71.024.0{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}[23]{{CompatNo}}
<video>:  VP8 and Vorbis in WebM{{CompatVersionUnknown}}{{CompatChrome(29)}}24.01.0.1{{CompatNo}}16.0{{CompatVersionUnknown}}[24]{{CompatNo}}
<video>: VP9 and Opus in WebM{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
<video>: Streaming WebM via MSE{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("42.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
<video>: Theora and Vorbis in Ogg{{CompatNo}}{{CompatNo}}24.01.0.1{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}[25]{{CompatNo}}
<video>:  H.264 and MP3 in MP4{{CompatVersionUnknown}}[26]{{CompatChrome(29)}}24.0[33]{{CompatVersionUnknown}}[27]10.016.0[28]{{CompatVersionUnknown}}[29]{{CompatVersionUnknown}}
<video>: H.264 and AAC in MP4{{CompatVersionUnknown}}[30]{{CompatChrome(29)}}24.0[34]{{CompatVersionUnknown}}[31]10.016.0[28]{{CompatVersionUnknown}}[32]3.2
<video>: FLAC in MP4{{CompatUnknown}}62.0{{CompatGeckoMobile(58)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
any other format{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Must be installed separately.

- -

[2] In Nightly/Dev Edition only.

- -

[3] Only on platforms that don't support H.264.

- -

[4] AAC is only supported in the MP4 container. Not in Chromium.

- -

[5] To avoid patent issues, support for MP3 is not built directly into Firefox. Instead it relies on support from the OS. Firefox supports this format on the following platforms: Windows Vista+ since Firefox 22.0, Android since Firefox 20.0, Firefox OS since Firefox 15.0, Linux since Firefox 26.0 (relies on GStreamer codecs) and OS X 10.7 since Firefox 35.0.

- -

[6] Main only. Not in Chromium. AAC is only supported in the MP4 container.

- -

[7] AAC is only supported in the MP4 container. To avoid patent issues, support for MPEG 4 and AAC is not built directly into Firefox. 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 supports these formats on the following platforms: Windows Vista+ since Firefox 22.0, Android since Firefox 20.0, Firefox OS since Firefox 15.0, Linux since Firefox 26.0 (relies on GStreamer codecs) and OS X 10.7 since Firefox 35.0.

- -

[8] must be installed separately, e.g. WebM MF.

- -

[9] Must be installed separately, e.g. Perian.

- -

[10] To avoid patent issues, support for MPEG 4, H.264 and MP3 is not built directly into Firefox. 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 supports these formats on the following platforms: Windows Vista+ since Firefox 22.0, Android since Firefox 20.0, Firefox OS since Firefox 15.0, Linux since Firefox 26.0 (relies on GStreamer codecs) and OS X 10.7 since Firefox 35.0.

- -

[11] AAC is only supported in the MP4 container. To avoid patent issues, support for MPEG 4, H.264 and AAC is not built directly into Firefox. 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 supports these formats on the following platforms: Windows Vista+ since Firefox 22.0, Android since Firefox 20.0, Firefox OS since Firefox 15.0, Linux since Firefox 26.0 (relies on GStreamer codecs) and OS X 10.7 since Firefox 35.0.

- -

[12] Plays all formats available via QuickTime.

- -

[13] 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.

- -

[14] 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.

- -

[15] 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.

- -

[16] 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.

- -

[17] To avoid patent issues, support for MP3 is not built directly into Firefox Mobile (Android). Instead it relies on support from the OS or hardware.

- -

[18] To avoid patent issues, support for MP3 is not built directly into Firefox OS. Instead it relies on support from the OS or hardware.

- -

[19] 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.

- -

[20] AAC is only supported in the MP4 container. To avoid patent issues, support for MPEG 4 and AAC is not built directly into Firefox Mobile (Android). 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).

- -

[21] AAC is only supported in the MP4 container. To avoid patent issues, support for MPEG 4 and AAC is not built directly into 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).

- -

[22] 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. AAC is only supported in the MP4 container.

- -

[23] 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.

- -

[24] 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.

- -

[25] 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.

- -

[26] To get the default Android browser to play H.264 video, you need to jump through some hoops, as explained by Peter Gasston.

- -

[27] In Firefox OS 1.0.1, when detecting <video> support for different formats, HTMLMediaElement.prototype.canPlayType incorrectly reports true for h.264 video whereas in actual fact h.264 is not supported. In Firefox OS 1.1 this problem has been fixed.
- To avoid patent issues, support for MPEG 4, H.264 and MP3 is not built directly into Firefox 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).

- -

[28] Partial since 11.0. AAC is only supported in the MP4 container.

- -

[29] 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.

- -

[30] AAC is only supported in the MP4 container. To get the default Android browser to play H.264 video, you need to jump through some hoops, as explained by Peter Gasston.

- -

[31] In Firefox OS 1.0.1, when detecting <video> support for different formats, HTMLMediaElement.prototype.canPlayType incorrectly reports true for h.264 video whereas in actual fact h.264 is not supported. In Firefox OS 1.1 this problem has been fixed. AAC is only supported in the MP4 container.
- To avoid patent issues, support for MPEG 4, H.264 and ACC is not built directly into 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).

- -

[32] 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. AAC is only supported in the MP4 container.

- -

[33] To avoid patent issues, support for MPEG 4, H.264 and MP3 is not built directly into Firefox Mobile (Android). 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).

- -

[34] To avoid patent issues, support for MPEG 4, H.264 and ACC is not built directly into Firefox Mobile (Android). 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).

- -

[35] VP8/VP9 video codecs are only available in MSE when H.264 hardware decoders are not available. Checking for availability via MediaSource.isTypeSupported() is recommended.

- -

[36] Starting in Firefox 46, when attempting to initiate a WebRTC call using {{domxref("RTCPeerConnection.createOffer()")}} uses VP9 by default; in the past, VP8 was the default video format.

- -

See also

- - -- cgit v1.2.3-54-g00ecf