diff options
| author | Jason Lee <huacnlee@gmail.com> | 2022-01-04 17:38:26 +0800 |
|---|---|---|
| committer | Irvin <irvinfly@gmail.com> | 2022-02-15 22:48:15 +0800 |
| commit | 01b845e6d402777fe03cc4dd7ed5f21af400eed1 (patch) | |
| tree | b3d3d8272d9c7c5207ebb016d072a10d9b7e04ea /files/zh-cn/web/html | |
| parent | c1ed2f39d8921536444e3334bab549d7100a286e (diff) | |
| download | translated-content-01b845e6d402777fe03cc4dd7ed5f21af400eed1.tar.gz translated-content-01b845e6d402777fe03cc4dd7ed5f21af400eed1.tar.bz2 translated-content-01b845e6d402777fe03cc4dd7ed5f21af400eed1.zip | |
Improve copywriting for add spaces between Chinese and English words for files/zh-cn/web/html/element.
Diffstat (limited to 'files/zh-cn/web/html')
130 files changed, 961 insertions, 961 deletions
diff --git a/files/zh-cn/web/html/element/a/index.html b/files/zh-cn/web/html/element/a/index.html index 1434cbf360..95a1a03873 100644 --- a/files/zh-cn/web/html/element/a/index.html +++ b/files/zh-cn/web/html/element/a/index.html @@ -54,38 +54,38 @@ translation_of: Web/HTML/Element/a <dl> <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt> <dd>此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。如果属性有一个值，那么此值将在下载保存过程中作为预填充的文件名（如果用户需要，仍然可以更改文件名）。此属性对允许的值没有限制，但是 <code>/</code> 和 <code>\</code> 会被转换为下划线。大多数文件系统限制了文件名中的标点符号，故此，浏览器将相应地调整建议的文件名。 - <div class="note"><strong>注意:</strong> + <div class="note"><strong>注意：</strong> <ul> <li>此属性仅适用于<a href="/zh-CN/docs/Web/Security/Same-origin_policy">同源 URL</a>。</li> <li>尽管 HTTP URL 需要位于同一源中，但是可以使用 <a href="/zh-CN/docs/Web/API/URL.createObjectURL"><code>blob:</code> URL</a> 和 <a href="/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URL</a> ，以方便用户下载使用 JavaScript 生成的内容（例如使用在线绘图 Web 应用程序创建的照片）。</li> <li>如果 HTTP 头中的 <a href="/zh-CN/docs/Web/HTTP/Headers/Content-Disposition">Content-Disposition</a> 属性赋予了一个不同于此属性的文件名，HTTP 头属性优先于此属性。</li> - <li>如果 HTTP 头属性 <code>Content-Disposition</code> 被设置为inline（即 <code>Content-Disposition='inline'</code>），那么 Firefox 优先考虑 HTTP 头 <code>Content-Disposition</code>download 属性。</li> + <li>如果 HTTP 头属性 <code>Content-Disposition</code> 被设置为 inline（即 <code>Content-Disposition='inline'</code>），那么 Firefox 优先考虑 HTTP 头 <code>Content-Disposition</code>download 属性。</li> </ul> </div> </dd> <dt>{{htmlattrdef("href")}}</dt> <dd>包含超链接指向的 URL 或 URL 片段。</dd> - <dd>URL 片段是哈希标记（#）前面的名称，哈希标记指定当前文档中的内部目标位置（HTML 元素的 ID）。URL 不限于基于 Web（HTTP）的文档，也可以使用浏览器支持的任何协议。例如，在大多数浏览器中正常工作的<a class="external external-icon" href="https://en.wikipedia.org/wiki/File_URI_scheme"><code>file:</code></a>、ftp:和mailto：。 + <dd>URL 片段是哈希标记（#）前面的名称，哈希标记指定当前文档中的内部目标位置（HTML 元素的 ID）。URL 不限于基于 Web（HTTP）的文档，也可以使用浏览器支持的任何协议。例如，在大多数浏览器中正常工作的<a class="external external-icon" href="https://en.wikipedia.org/wiki/File_URI_scheme"><code>file:</code></a>、ftp:和 mailto：。 <div class="note"> - <p><strong>注意:</strong> 可以使用 <code>href="#top"</code> 或者 <code>href="#"</code> 链接返回到页面顶部。<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid">这种行为是 HTML5 的特性</a>。</p> + <p><strong>注意：</strong> 可以使用 <code>href="#top"</code> 或者 <code>href="#"</code> 链接返回到页面顶部。<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid">这种行为是 HTML5 的特性</a>。</p> </div> </dd> <dt>{{htmlattrdef("hreflang")}}</dt> - <dd>该属性用于指定链接文档的人类语言。其仅提供建议，并没有内置的功能。hreflang 允许的值取决于HTML5 <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>。</dd> + <dd>该属性用于指定链接文档的人类语言。其仅提供建议，并没有内置的功能。hreflang 允许的值取决于 HTML5 <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>。</dd> <dt>{{htmlattrdef("ping")}}</dt> - <dd>包含一个以空格分隔的url列表，当跟随超链接时，将由浏览器(在后台)发送带有正文 PING 的 POST 请求。通常用于跟踪。</dd> + <dd>包含一个以空格分隔的 url 列表，当跟随超链接时，将由浏览器 (在后台) 发送带有正文 PING 的 POST 请求。通常用于跟踪。</dd> <dd> </dd> <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> - <dd>表明在获取URL时发送哪个提交者（referrer）: + <dd>表明在获取 URL 时发送哪个提交者（referrer）: <ul> <li><code>"no-referrer"</code> 表示 <code>Referer:</code> 头将不会被发送。</li> - <li><code>"no-referrer-when-downgrade"</code> 表示当从使用HTTPS的页面导航到不使用 TLS(HTTPS)的来源 时不会发送 <code>Referer:</code> 头。如果没有指定策略，这将是用户代理的默认行为。</li> - <li><code>"origin"</code> 表示 referrer将会是页面的来源，大致为这样的组合：主机和端口（不包含具体的路径和参数的信息）。</li> - <li>"origin-when-cross-origin" 表示导航到其它源将会限制为这种组合：主机 + 端口，而导航到相同的源将会只包含 referrer的路径。</li> + <li><code>"no-referrer-when-downgrade"</code> 表示当从使用 HTTPS 的页面导航到不使用 TLS(HTTPS) 的来源 时不会发送 <code>Referer:</code> 头。如果没有指定策略，这将是用户代理的默认行为。</li> + <li><code>"origin"</code> 表示 referrer 将会是页面的来源，大致为这样的组合：主机和端口（不包含具体的路径和参数的信息）。</li> + <li>"origin-when-cross-origin" 表示导航到其它源将会限制为这种组合：主机 + 端口，而导航到相同的源将会只包含 referrer 的路径。</li> <li><code>'strict-origin-when-cross-origin'</code></li> - <li><code>"unsafe-url"</code> 表示 referrer将会包含源和路径（domain + path）（但是不包含密码或用户名的片段）。这种情况是不安全的，因为它可能会将安全的URLs数据泄露给不安全的源。</li> + <li><code>"unsafe-url"</code> 表示 referrer 将会包含源和路径（domain + path）（但是不包含密码或用户名的片段）。这种情况是不安全的，因为它可能会将安全的 URLs 数据泄露给不安全的源。</li> </ul> </dd> </dl> @@ -94,12 +94,12 @@ translation_of: Web/HTML/Element/a <dt>{{htmlattrdef("rel")}}</dt> <dd>该属性指定了目标对象到链接对象的关系。该值是空格分隔的<a href="/zh-CN/docs/Web/HTML/Link_types">列表类型值</a>。</dd> <dt>{{htmlattrdef("target")}}</dt> - <dd>该属性指定在何处显示链接的资源。 取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义: + <dd>该属性指定在何处显示链接的资源。 取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义： <ul> - <li><code>_self</code>: 当前页面加载，即当前的响应到同一HTML 4 frame（或HTML5浏览上下文）。此值是默认的，如果没有指定属性的话。</li> - <li><code>_blank</code>: 新窗口打开，即到一个新的未命名的HTML4窗口或HTML5浏览器上下文</li> - <li><code>_parent</code>: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式与 <code>_self</code> 相同。</li> - <li><code>_top</code>: IHTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self</li> + <li><code>_self</code>: 当前页面加载，即当前的响应到同一 HTML 4 frame（或 HTML5 浏览上下文）。此值是默认的，如果没有指定属性的话。</li> + <li><code>_blank</code>: 新窗口打开，即到一个新的未命名的 HTML4 窗口或 HTML5 浏览器上下文</li> + <li><code>_parent</code>: 加载响应到当前框架的 HTML4 父框架或当前的 HTML5 浏览上下文的父浏览上下文。如果没有 parent 框架或者浏览上下文，此选项的行为方式与 <code>_self</code> 相同。</li> + <li><code>_top</code>: IHTML4 中：加载的响应成完整的，原来的窗口，取消所有其它 frame。 HTML5 中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有 parent）。如果没有 parent 框架或者浏览上下文，此选项的行为方式相同_self</li> </ul> </dd> <dd> @@ -118,17 +118,17 @@ translation_of: Web/HTML/Element/a <h3 id="过时的">过时的</h3> </dt> <dt>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</dt> - <dd>此属性定义链接资源的字符编码。该值是一个空格- 和/或逗号分隔的<a class="external" href="http://tools.ietf.org/html/rfc2045" style="color: rgb(102, 153, 204); text-decoration: none; padding-right: 16px; background-color: rgb(255, 255, 255); font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', Lucida, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">RFC 2045</a>中定义的字符集列表。默认值是ISO-8859-1。 + <dd>此属性定义链接资源的字符编码。该值是一个空格- 和/或逗号分隔的<a class="external" href="http://tools.ietf.org/html/rfc2045" style="color: rgb(102, 153, 204); text-decoration: none; padding-right: 16px; background-color: rgb(255, 255, 255); font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', Lucida, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">RFC 2045</a>中定义的字符集列表。默认值是 ISO-8859-1。 <div class="note"> - <p><strong>使用说明: </strong>在 HTML5 中该属性已作废，不应使用。 为了实现其效果，使用HTTP content - type header的链接资源。</p> + <p><strong>使用说明：</strong>在 HTML5 中该属性已作废，不应使用。 为了实现其效果，使用 HTTP content - type header 的链接资源。</p> </div> </dd> <dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> <dd>对于使用对象的形状，此属性使用逗号分隔的数字列表来定义对象在页面上的坐标。</dd> <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> - <dd>该属性在页面中定义锚点的目标位置时是必须的。 <strong>name</strong> 的值类似于ID核心属性值，该属性值在文档中是唯一的且由数字字母标示符所组成的。在 HTML 4.01 规范中, <strong>id</strong> 和 <strong>name</strong> 都可以使用 <a> 元素，只要他们有相同的值。 + <dd>该属性在页面中定义锚点的目标位置时是必须的。 <strong>name</strong> 的值类似于 ID 核心属性值，该属性值在文档中是唯一的且由数字字母标示符所组成的。在 HTML 4.01 规范中，<strong>id</strong> 和 <strong>name</strong> 都可以使用 <a> 元素，只要他们有相同的值。 <div class="note"> - <p><strong>使用说明:</strong> 该属性在 HTML5中是过时的, 使用 <a href="/zh-CN/docs/HTML/Global_attributes#attr-id" title="HTML/Global attributes#id">全局属性 <strong>id</strong></a> 来代替。</p> + <p><strong>使用说明：</strong> 该属性在 HTML5 中是过时的，使用 <a href="/zh-CN/docs/HTML/Global_attributes#attr-id" title="HTML/Global attributes#id">全局属性 <strong>id</strong></a> 来代替。</p> </div> </dd> <dt>{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> @@ -137,7 +137,7 @@ translation_of: Web/HTML/Element/a <dl> <dt>{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> - <dd>此属性用于定义一个可选的超链接相关的一个数字来创建图像映射区域，该属性的值是圆，默认情况下，多边形，矩形。 所述的<strong>coords</strong> 属性的格式取决于形状的值。对于圆，该值的x，y，r其中x和y为圆心像素坐标，r是像素值半径。对于矩形，该<strong>coords</strong> 属性应该是x，y，w，h。x，y值定义的矩形的左上角的位置，而w和h分别定义宽度和高度。多边形形状的值需要x1，y1，x2，y2，......值来定义coords。每对x，y定义多边形的一个点，连续点由直线接合和，最后一个点连接到第一个点。默认为形状的值需要将整个封闭区域，典型的图像，可以使用。 + <dd>此属性用于定义一个可选的超链接相关的一个数字来创建图像映射区域，该属性的值是圆，默认情况下，多边形，矩形。 所述的<strong>coords</strong> 属性的格式取决于形状的值。对于圆，该值的 x，y，r 其中 x 和 y 为圆心像素坐标，r 是像素值半径。对于矩形，该<strong>coords</strong> 属性应该是 x，y，w，h。x，y 值定义的矩形的左上角的位置，而 w 和 h 分别定义宽度和高度。多边形形状的值需要 x1，y1，x2，y2，......值来定义 coords。每对 x，y 定义多边形的一个点，连续点由直线接合和，最后一个点连接到第一个点。默认为形状的值需要将整个封闭区域，典型的图像，可以使用。 <div class="note"><strong>说明：</strong>建议使用 <a href="/zh-CN/docs/Web/HTML/Element/img#attr-usemap">使用 map 属性</a>在 {{HTMLElement("img")}} 元素和相关的{{HTMLElement("map")}}元素中来定义热点而不是用形状属性。</div> </dd> </dl> @@ -169,7 +169,7 @@ Description of Same-Page Links <h3 id="创建一个可点击的图片">创建一个可点击的图片</h3> -<p>这个小例子使用图像链接到MDN主页。主页将在新的浏览环境，这是一个新的页面或新标签中打开研究。</p> +<p>这个小例子使用图像链接到 MDN 主页。主页将在新的浏览环境，这是一个新的页面或新标签中打开研究。</p> <pre class="brush: html"><a href="https://developer.mozilla.org/en-US/"> <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" @@ -183,16 +183,16 @@ Description of Same-Page Links <p>{{EmbedLiveSample("创建一个可点击的图片", "320", "64")}}</p> </figure> -<h3 id="创建一个email链接">创建一个email链接</h3> +<h3 id="创建一个email链接">创建一个 email 链接</h3> -<p>这是常见的创建按钮或链接，将用户的电子邮件程序打开，让他们发送新邮件。这是通过使用一个mailto链接完成的。这里有一个简单的例子：</p> +<p>这是常见的创建按钮或链接，将用户的电子邮件程序打开，让他们发送新邮件。这是通过使用一个 mailto 链接完成的。这里有一个简单的例子：</p> <pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a> </pre> -<p>生成这样的链接: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p> +<p>生成这样的链接：<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p> -<p>有关mailto URL方案的更多细节，比如如何包含主题，正文，或其他预定内容，参考 <a href="/zh-CN/docs/Web/Guide/HTML/Email_links">Email links</a> or {{RFC(6068)}}.</p> +<p>有关 mailto URL 方案的更多细节，比如如何包含主题，正文，或其他预定内容，参考 <a href="/zh-CN/docs/Web/Guide/HTML/Email_links">Email links</a> or {{RFC(6068)}}.</p> <h3 id="创建电话链接">创建电话链接</h3> @@ -205,7 +205,7 @@ Description of Same-Page Links <h3 id="使用_download_属性将_<canvas>_保存为_PNG_格式">使用 download 属性将 <code><canvas></code> 保存为 PNG 格式</h3> -<p>如果你想允许用户下载一个HTML画布，你可以创建一个下载属性和画布数据作为文件URL链接图像：</p> +<p>如果你想允许用户下载一个 HTML 画布，你可以创建一个下载属性和画布数据作为文件 URL 链接图像：</p> <pre class="brush: js">var link = document.createElement('a'); link.innerHTML = 'download image'; @@ -221,7 +221,7 @@ document.body.appendChild(link);</pre> <h2 id="备注">备注</h2> -<p>html 3.2 只定义 name, href, rel, rev, 和 title 属性。</p> +<p>html 3.2 只定义 name, href, rel, rev，和 title 属性。</p> <h3 id="无障碍建议">无障碍建议</h3> diff --git a/files/zh-cn/web/html/element/abbr/index.html b/files/zh-cn/web/html/element/abbr/index.html index a59a429de1..cf2fb9da5d 100644 --- a/files/zh-cn/web/html/element/abbr/index.html +++ b/files/zh-cn/web/html/element/abbr/index.html @@ -101,7 +101,7 @@ translation_of: Web/HTML/Element/abbr <h3 id="缩写样式">缩写样式</h3> -<p>你可以像这个简单的例子一样，用CSS来为缩写做一个样式。</p> +<p>你可以像这个简单的例子一样，用 CSS 来为缩写做一个样式。</p> <h4 id="HTML_2">HTML</h4> @@ -153,7 +153,7 @@ accessed.</p></pre> <p>{{EmbedLiveSample("Defining_an_abbreviation", 600, 120)}}</p> -<p>可以在 <em><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">How to mark abbreviations and make them understandable</a></em> 中浏览更多深层次的实例.</p> +<p>可以在 <em><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">How to mark abbreviations and make them understandable</a></em> 中浏览更多深层次的实例。</p> <h2 id="可访问性问题">可访问性问题</h2> diff --git a/files/zh-cn/web/html/element/acronym/index.html b/files/zh-cn/web/html/element/acronym/index.html index 5d6cf1d8ae..ec8bbd958b 100644 --- a/files/zh-cn/web/html/element/acronym/index.html +++ b/files/zh-cn/web/html/element/acronym/index.html @@ -9,21 +9,21 @@ translation_of: Web/HTML/Element/acronym <h2 id="Summary" name="Summary">简介</h2> -<p>HTML Acronym 元素 (<code><acronym>)</code> 允许作者明确地声明一个字符序列,，它们构成一个单词的首字母缩写或简略语。</p> +<p>HTML Acronym 元素 (<code><acronym>)</code> 允许作者明确地声明一个字符序列，，它们构成一个单词的首字母缩写或简略语。</p> <div class="note"> -<p><strong>用法提示: </strong>. 该元素已从HTML5中移除，不应再被使用。Web开发者应使用 {{HTMLElement("abbr")}} 元素.</p> +<p><strong>用法提示：</strong>. 该元素已从 HTML5 中移除，不应再被使用。Web 开发者应使用 {{HTMLElement("abbr")}} 元素。</p> </div> <h2 id="Attributes" name="Attributes">属性</h2> -<p>该元素除了 <a class="new " href="/en-US/docs/HTML/global_attributes" rel="internal" title="HTML/global attributes">global attributes</a>, 所有其他元素的公共属性之外没有其他属性.</p> +<p>该元素除了 <a class="new " href="/en-US/docs/HTML/global_attributes" rel="internal" title="HTML/global attributes">global attributes</a>, 所有其他元素的公共属性之外没有其他属性。</p> <h2 id="DOM_Interface" name="DOM_Interface">DOM 接口</h2> -<p>该元素实现了 {{domxref('HTMLElement')}} 接口.</p> +<p>该元素实现了 {{domxref('HTMLElement')}} 接口。</p> -<div class="note"><strong>实现提示: </strong>直到 Gecko 1.9.2（包含），Firefox 为这个元素实现了 {{domxref('HTMLSpanElement')}} 接口。</div> +<div class="note"><strong>实现提示：</strong>直到 Gecko 1.9.2（包含），Firefox 为这个元素实现了 {{domxref('HTMLSpanElement')}} 接口。</div> <h2 id="Example" name="Example">例子</h2> @@ -32,15 +32,15 @@ translation_of: Web/HTML/Element/acronym <h2 id="Default_styling" name="Default_styling">默认样式</h2> -<p>尽管这个标签的目的纯粹是为了方便作者，它的默认样式却在各个浏览器中不尽相同:</p> +<p>尽管这个标签的目的纯粹是为了方便作者，它的默认样式却在各个浏览器中不尽相同：</p> <ul> - <li>一些浏览器, 像Internet Explorer, 赋予它和 {{HTMLElement("span")}} 元素相同的样式。</li> - <li>Opera, Firefox, 和 一些其他的浏览器在元素内容下方添加了一条点状的下划线。</li> + <li>一些浏览器，像 Internet Explorer，赋予它和 {{HTMLElement("span")}} 元素相同的样式。</li> + <li>Opera, Firefox，和 一些其他的浏览器在元素内容下方添加了一条点状的下划线。</li> <li>一小部分浏览器不仅添加了点状下划线， 而且 put it in small caps; 为避免这种样式， 可以在 CSS 中添加{{cssxref('font-variant')}}<code>: none</code> 处理这种情况。</li> </ul> -<p>因此强烈建议Web作者们不要依赖默认的样式.</p> +<p>因此强烈建议 Web 作者们不要依赖默认的样式。</p> <h2 id="Specifications" name="Specifications">规范</h2> diff --git a/files/zh-cn/web/html/element/address/index.html b/files/zh-cn/web/html/element/address/index.html index 0de11f9078..ad5e81e21f 100644 --- a/files/zh-cn/web/html/element/address/index.html +++ b/files/zh-cn/web/html/element/address/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTML/Element/address <p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> -<p> 由<code><address></code>元素中任何形式的内容所提供的联系信息适用于上下文的背景信息,可以是必要的任何一种联系方式,比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称。</p> +<p> 由<code><address></code>元素中任何形式的内容所提供的联系信息适用于上下文的背景信息，可以是必要的任何一种联系方式，比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称。</p> <p> <code><address></code>可以使用在多种语境中，例如在文章开头提供商务的联系方式，或者放在{{HTMLElement("article")}}元素内，指明该文章的作者。</p> @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/address </tr> <tr> <th scope="row">允许的内容</th> - <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, 但是不能嵌套<code><address>元素</code>, 不能是头部内容 ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), 不能是区块内容 ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), 不能是{{HTMLElement("header")}} 或 {{HTMLElement("footer")}}元素.</td> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, 但是不能嵌套<code><address>元素</code>, 不能是头部内容 ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), 不能是区块内容 ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), 不能是{{HTMLElement("header")}} 或 {{HTMLElement("footer")}}元素。</td> </tr> <tr> <th scope="row">标签省略</th> diff --git a/files/zh-cn/web/html/element/applet/index.html b/files/zh-cn/web/html/element/applet/index.html index 410e432bb9..0c9ae20904 100644 --- a/files/zh-cn/web/html/element/applet/index.html +++ b/files/zh-cn/web/html/element/applet/index.html @@ -12,45 +12,45 @@ translation_of: Web/HTML/Element/applet <h2 id="概要">概要</h2> -<p>HTML中的Applet元素(<code><applet></code>) 标志着包含了Java的applet。</p> +<p>HTML 中的 Applet 元素 (<code><applet></code>) 标志着包含了 Java 的 applet。</p> <div class="note"> -<p><strong>注解： </strong>这个元素在HTML5中已经废弃了，不能再被使用。网页开发者应该使用更为通用的元素。</p> +<p><strong>注解： </strong>这个元素在 HTML5 中已经废弃了，不能再被使用。网页开发者应该使用更为通用的元素。</p> </div> <h2 id="Attributes" name="Attributes">属性（Attributes）</h2> <dl> <dt>{{htmlattrdef("align")}}</dt> - <dd>该属性被用来定义网页上applet相对于周围内容的对齐方式。HTML4.01规范定义了bottom, left, middle, right和 top的值，而Microsoft（微软）和Netscaple（网景）也可能支持<strong>absbottom</strong>, <strong>absmiddle</strong>, <strong>baseline</strong>, <strong>center</strong>和<strong>texttop。</strong></dd> + <dd>该属性被用来定义网页上 applet 相对于周围内容的对齐方式。HTML4.01 规范定义了 bottom, left, middle, right 和 top 的值，而 Microsoft（微软）和 Netscaple（网景）也可能支持<strong>absbottom</strong>, <strong>absmiddle</strong>, <strong>baseline</strong>, <strong>center</strong>和<strong>texttop。</strong></dd> <dt>{{htmlattrdef("alt")}}</dt> - <dd>该属性造成在不支持Java的浏览器上显示出一段替代的描述性文字。 页面设计者应该记住在<code><applet></code> 元素中封闭的内容也可以呈现为替代性文本。</dd> + <dd>该属性造成在不支持 Java 的浏览器上显示出一段替代的描述性文字。 页面设计者应该记住在<code><applet></code> 元素中封闭的内容也可以呈现为替代性文本。</dd> <dt>{{htmlattrdef("archive")}}</dt> - <dd>该属性涉及到applet的存档或压缩版本及其相关类文件，这可能会减少下载时间。</dd> + <dd>该属性涉及到 applet 的存档或压缩版本及其相关类文件，这可能会减少下载时间。</dd> <dt>{{htmlattrdef("code")}}</dt> - <dd>该属性指定被加载和执行的applet类文件的URL。Applet文件名由一个.class文件扩展名定义。由code指定的URL可能与codebase属性有关。</dd> + <dd>该属性指定被加载和执行的 applet 类文件的 URL。Applet 文件名由一个.class 文件扩展名定义。由 code 指定的 URL 可能与 codebase 属性有关。</dd> <dt>{{htmlattrdef("codebase")}}</dt> - <dd>该属性给出绝对或相对的，由code属性引用的applet的.class文件储存的目录的URL。</dd> + <dd>该属性给出绝对或相对的，由 code 属性引用的 applet 的.class 文件储存的目录的 URL。</dd> <dt>{{htmlattrdef("datafld")}}</dt> - <dd>该属性支持Internet Explorer4及更高的版本，指定提供边界数据的数据源对象的列名。该属性可以用来指定各种传递到Java的{{HTMLElement("param")}} 元素。</dd> + <dd>该属性支持 Internet Explorer4 及更高的版本，指定提供边界数据的数据源对象的列名。该属性可以用来指定各种传递到 Java 的{{HTMLElement("param")}} 元素。</dd> <dt>{{htmlattrdef("datasrc")}}</dt> - <dd>就像datafld，该属性被用于Internet Explorer 4版本以下的数据绑定（data binding）。它指明了数据源对象的id，这个数据对象提供了被与applet有关的元素约束的数据。</dd> + <dd>就像 datafld，该属性被用于 Internet Explorer 4 版本以下的数据绑定（data binding）。它指明了数据源对象的 id，这个数据对象提供了被与 applet 有关的元素约束的数据。</dd> <dt>{{htmlattrdef("height")}}</dt> - <dd>该属性提供了applet所需的高度，以像素为单位。</dd> + <dd>该属性提供了 applet 所需的高度，以像素为单位。</dd> <dt>{{htmlattrdef("hspace")}}</dt> - <dd>该属性指定了保存在applet两侧的额外横向空间，以像素为单位。</dd> + <dd>该属性指定了保存在 applet 两侧的额外横向空间，以像素为单位。</dd> <dt>{{htmlattrdef("mayscript")}}</dt> - <dd>在Netscape中，该属性允许使用在文档中嵌入的脚本语言程序访问applet。</dd> + <dd>在 Netscape 中，该属性允许使用在文档中嵌入的脚本语言程序访问 applet。</dd> <dt>{{htmlattrdef("name")}}</dt> - <dd>该属性为applet分配一个名称，以便它可以被其他资源识别，尤其是脚本语言。</dd> + <dd>该属性为 applet 分配一个名称，以便它可以被其他资源识别，尤其是脚本语言。</dd> <dt>{{htmlattrdef("object")}}</dt> - <dd>该属性指定一个序列化表示的applet的URL。</dd> + <dd>该属性指定一个序列化表示的 applet 的 URL。</dd> <dt>{{htmlattrdef("src")}}</dt> - <dd>为Internet Explorer 4 及更高版本制定, 该属性为applet相关文件指定一个URL。 该定义及使用是不明确的，也不属于HTML标准。</dd> + <dd>为 Internet Explorer 4 及更高版本制定，该属性为 applet 相关文件指定一个 URL。 该定义及使用是不明确的，也不属于 HTML 标准。</dd> <dt>{{htmlattrdef("vspace")}}</dt> - <dd>该属性指定了保存在applet以上或以下的额外垂直空间，以像素为单位。</dd> + <dd>该属性指定了保存在 applet 以上或以下的额外垂直空间，以像素为单位。</dd> <dt>{{htmlattrdef("width")}}</dt> - <dd>该属性指定了applet所需的宽度，以像素为单位。</dd> + <dd>该属性指定了 applet 所需的宽度，以像素为单位。</dd> </dl> <h2 id="例子">例子</h2> @@ -115,6 +115,6 @@ translation_of: Web/HTML/Element/applet <h2 id="注意">注意</h2> -<p>W3C规范不鼓励使用<code><applet>，更</code>倾向于使用{{HTMLElement("object")}}标签。因为HTML 4.01的严格定义，这个元素已经完全过时，在HTML5中不再被使用。</p> +<p>W3C 规范不鼓励使用<code><applet>，更</code>倾向于使用{{HTMLElement("object")}}标签。因为 HTML 4.01 的严格定义，这个元素已经完全过时，在 HTML5 中不再被使用。</p> <div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/area/index.html b/files/zh-cn/web/html/element/area/index.html index 62fe488405..f30e273215 100644 --- a/files/zh-cn/web/html/element/area/index.html +++ b/files/zh-cn/web/html/element/area/index.html @@ -27,29 +27,29 @@ translation_of: Web/HTML/Element/area <dl> <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> - <dd>为元素指定一个获取焦点的快捷键。在与指定字符关联的情况下，按ALT或类似键选择与该键序列相关联的表单控件。页面设计人员避免使用已经绑定到浏览器的快捷键。这个属性自HTML5以来是全局性的。</dd> + <dd>为元素指定一个获取焦点的快捷键。在与指定字符关联的情况下，按 ALT 或类似键选择与该键序列相关联的表单控件。页面设计人员避免使用已经绑定到浏览器的快捷键。这个属性自 HTML5 以来是全局性的。</dd> </dl> <dl> <dt>{{htmlattrdef("alt")}}</dt> - <dd>在未显示图像的浏览器上显示代替的文本字符串。这个文本应该能传达给用户与显示图像而没有文本的情况下同等的选择（译者注：就是字和图片表达一个意思）。在HTML4中， 这个属性时必需的, 但是可以是一个空的串("")。在HTML5中, 这个属性只有在<strong>href</strong> 属性被使用的时候才是必需的。</dd> + <dd>在未显示图像的浏览器上显示代替的文本字符串。这个文本应该能传达给用户与显示图像而没有文本的情况下同等的选择（译者注：就是字和图片表达一个意思）。在 HTML4 中， 这个属性时必需的，但是可以是一个空的串 ("")。在 HTML5 中，这个属性只有在<strong>href</strong> 属性被使用的时候才是必需的。</dd> </dl> <dl> <dt>{{htmlattrdef("coords")}}</dt> - <dd>给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的<strong>形状</strong>属性.。对于矩形或长方形, 这个<strong>coords </strong>值为两个X,Y对：左上、右下。 对于圆形, 这个值是 <code>x,y,r</code> ，这里的 <code>x,y</code> 是一对确定圆的中心的坐标而 <code>r</code> 则表示的是半径值.。对于多边和多边形，这个值是用x,y对表示的多边形的每一个点：<code>x1,y1,x2,y2,x3,y3,</code>等等。HTML4里, 值可能是像素数量或者百分比, 区别是不是有%出现; HTML5里, 只可能是像素的数量.</dd> + <dd>给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的<strong>形状</strong>属性.。对于矩形或长方形，这个<strong>coords </strong>值为两个 X,Y 对：左上、右下。 对于圆形，这个值是 <code>x,y,r</code> ，这里的 <code>x,y</code> 是一对确定圆的中心的坐标而 <code>r</code> 则表示的是半径值.。对于多边和多边形，这个值是用 x,y 对表示的多边形的每一个点：<code>x1,y1,x2,y2,x3,y3,</code>等等。HTML4 里， 值可能是像素数量或者百分比，区别是不是有%出现; HTML5 里，只可能是像素的数量。</dd> <dt>{{htmlattrdef("download")}} {{HTMLVersionInline("5")}}</dt> - <dd>这个属性如果存在的话, 表明作者想把超链接用于下载一个资源。请查看{{HTMLElement("a")}} 获得关于 {{htmlattrxref("download", "a")}}属性的完整描述。</dd> + <dd>这个属性如果存在的话，表明作者想把超链接用于下载一个资源。请查看{{HTMLElement("a")}} 获得关于 {{htmlattrxref("download", "a")}}属性的完整描述。</dd> </dl> <dl> <dt>{{htmlattrdef("href")}}</dt> - <dd>area的超链接, 值为一个URL. HTML4里, 这个值不管是不是有值都要明确指定出来. HTML5里则不需要.</dd> + <dd>area 的超链接，值为一个 URL. HTML4 里，这个值不管是不是有值都要明确指定出来. HTML5 里则不需要。</dd> </dl> <dl> <dt>{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}</dt> - <dd>指明链接资源的语言类型, 值的范围参考<a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. 这个属性只能在指明href属性之后使用.</dd> + <dd>指明链接资源的语言类型，值的范围参考<a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. 这个属性只能在指明 href 属性之后使用。</dd> </dl> <dl> @@ -59,14 +59,14 @@ translation_of: Web/HTML/Element/area <dl> <dt>{{htmlattrdef("media")}} {{HTMLVersionInline("5")}}</dt> - <dd>指明链接资源的媒体类型，例：print and screen。如果此属性省略，默认全部。仅在href属性存在情况下使用。</dd> + <dd>指明链接资源的媒体类型，例：print and screen。如果此属性省略，默认全部。仅在 href 属性存在情况下使用。</dd> </dl> <dl> <dt>{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> - <dd>指明此区域没有超链接。在<area>中必须存在nohref或者href。 + <dd>指明此区域没有超链接。在<area>中必须存在 nohref 或者 href。 <div class="note"> - <p><strong>用法提示: </strong>此属性在html5中是废弃的，而忽略href属性就足够了。</p> + <p><strong>用法提示：</strong>此属性在 html5 中是废弃的，而忽略 href 属性就足够了。</p> </div> </dd> </dl> @@ -79,28 +79,28 @@ translation_of: Web/HTML/Element/area <dl> <dt>{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}</dt> - <dd>对于包含href属性的锚，该属性指定目标对象与链接对象的关系。该值是一个逗号分隔的链接类型值列表。这些值及其语义将由一些可能对文档作者有意义的权威进行注册。如果没有其他的关系，默认的关系是无效的。只有当href属性是presen时才使用该属性</dd> + <dd>对于包含 href 属性的锚，该属性指定目标对象与链接对象的关系。该值是一个逗号分隔的链接类型值列表。这些值及其语义将由一些可能对文档作者有意义的权威进行注册。如果没有其他的关系，默认的关系是无效的。只有当 href 属性是 presen 时才使用该属性</dd> <dt>{{htmlattrdef("shape")}}</dt> - <dd>相关联的热点的形状。HTML 5和HTML 4的规范定义了值rect，它定义了一个矩形区域;圆圈，它定义了一个圆形区域;多边形，它定义了一个多边形;默认情况下，这表示整个区域超出了任何定义的形状。许多浏览器，特别是Internet Explorer 4和更高版本，支持弧形、多边形和矩形作为形状的有效值;这些值{ { Non-standard_inline } }。</dd> + <dd>相关联的热点的形状。HTML 5 和 HTML 4 的规范定义了值 rect，它定义了一个矩形区域;圆圈，它定义了一个圆形区域;多边形，它定义了一个多边形;默认情况下，这表示整个区域超出了任何定义的形状。许多浏览器，特别是 Internet Explorer 4 和更高版本，支持弧形、多边形和矩形作为形状的有效值;这些值{ { Non-standard_inline } }。</dd> </dl> <dl> <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> - <dd>用于指定浏览器tab键获取焦点的顺序。在html5中是全局属性。</dd> + <dd>用于指定浏览器 tab 键获取焦点的顺序。在 html5 中是全局属性。</dd> </dl> <dl> <dt>{{htmlattrdef("target")}}</dt> - <dd>本属性指明了在什么地方显示链接的资源. HTML4里, 这个值是一个frame的链接或者关键字. HTML5里, 它是一个浏览器上下文(比如: 标签, 窗口或者内嵌的frame)的链接或者关键字. 值的含义: + <dd>本属性指明了在什么地方显示链接的资源. HTML4 里，这个值是一个 frame 的链接或者关键字. HTML5 里，它是一个浏览器上下文 (比如：标签，窗口或者内嵌的 frame) 的链接或者关键字。值的含义： <ul> - <li><code>_self</code>: 在当前区域加载链接指向的资源. 这个是默认值.</li> - <li><code>_blank</code>: 在新的未命名的窗口或者tab里加载超链接资源.</li> - <li><code>_parent</code>: 在父级加载超链接资源. HTML4里, 是当前frame的父级, HTML5里是当前的浏览器上下文, 如果当前环境没有父级, 行为和<code>_self</code>一样.</li> - <li><code>_top</code>: HTML4里: 将响应加载到完整的原始窗口中，取消所有其他帧。在HTML5中:将响应加载到顶级浏览上下文(也就是说，浏览上下文是当前版本的祖先，并且没有父类)。如果没有父类，这个选项的行为方式与self相同</li> + <li><code>_self</code>: 在当前区域加载链接指向的资源。这个是默认值。</li> + <li><code>_blank</code>: 在新的未命名的窗口或者 tab 里加载超链接资源。</li> + <li><code>_parent</code>: 在父级加载超链接资源. HTML4 里，是当前 frame 的父级，HTML5 里是当前的浏览器上下文，如果当前环境没有父级，行为和<code>_self</code>一样。</li> + <li><code>_top</code>: HTML4 里：将响应加载到完整的原始窗口中，取消所有其他帧。在 HTML5 中：将响应加载到顶级浏览上下文 (也就是说，浏览上下文是当前版本的祖先，并且没有父类)。如果没有父类，这个选项的行为方式与 self 相同</li> </ul> - 本属性只能在指明href属性之后使用.</dd> + 本属性只能在指明 href 属性之后使用。</dd> <dt>{{htmlattrdef("type")}}</dt> - <dd>该属性指定了用于链接目标的MIME类型的媒体类型。一般来说，这是严格的咨询信息;然而，在未来，浏览器可能会为多媒体类型添加一个小图标。例如，当类型设置为音频/wav时，浏览器可能会添加一个小的扬声器图标。公认的MIME类型的完整列表,请参阅http://www.w3.org/TR/html4/references.html ref-MIMETYPES。只有当href属性存在时才使用该属性。</dd> + <dd>该属性指定了用于链接目标的 MIME 类型的媒体类型。一般来说，这是严格的咨询信息;然而，在未来，浏览器可能会为多媒体类型添加一个小图标。例如，当类型设置为音频/wav 时，浏览器可能会添加一个小的扬声器图标。公认的 MIME 类型的完整列表，请参阅 http://www.w3.org/TR/html4/references.html ref-MIMETYPES。只有当 href 属性存在时才使用该属性。</dd> </dl> <h2 id="例子">例子</h2> @@ -194,13 +194,13 @@ translation_of: Web/HTML/Element/area <h2 id="注意">注意</h2> -<p>HTML 3.2, 4.0, 和HTML 5 规范中, 不允许有 <code></area></code> 单闭合标签.</p> +<p>HTML 3.2, 4.0，和 HTML 5 规范中，不允许有 <code></area></code> 单闭合标签。</p> -<p>XHTML 1.0 规范要求有尾部的斜线: <code><area /></code>.</p> +<p>XHTML 1.0 规范要求有尾部的斜线：<code><area /></code>.</p> -<p><strong>id</strong>, <strong>class</strong>, 和<strong>style</strong> 属性和其他的HTML4属性一样, 但是只有Netscape和Microsoft定义了这些属性.</p> +<p><strong>id</strong>, <strong>class</strong>, 和<strong>style</strong> 属性和其他的 HTML4 属性一样，但是只有 Netscape 和 Microsoft 定义了这些属性。</p> -<p>Netscape 1–level 浏览器不能解析<strong>target</strong> 链接到frames的属性.</p> +<p>Netscape 1–level 浏览器不能解析<strong>target</strong> 链接到 frames 的属性。</p> <p>HTML 3.2 只定义了<strong>alt</strong>, <strong>coords</strong>, <strong>href</strong>, <strong>nohref</strong>, 和<strong>shape</strong>.</p> diff --git a/files/zh-cn/web/html/element/aside/index.html b/files/zh-cn/web/html/element/aside/index.html index 9f61c067cf..f422d04a49 100644 --- a/files/zh-cn/web/html/element/aside/index.html +++ b/files/zh-cn/web/html/element/aside/index.html @@ -32,7 +32,7 @@ translation_of: Web/HTML/Element/aside <td>所有元素接受流式元素。注意 <code><aside></code> 不能是{{HTMLElement("address")}} 元素的后代</td> </tr> <tr> - <th scope="row">允许的ARIA角色</th> + <th scope="row">允许的 ARIA 角色</th> <td>{{ARIARole("feed")}}, {{ARIARole("note")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}, {{ARIARole("search")}}</td> </tr> <tr> diff --git a/files/zh-cn/web/html/element/audio/index.html b/files/zh-cn/web/html/element/audio/index.html index 22fbb99308..d90c1fe2f9 100644 --- a/files/zh-cn/web/html/element/audio/index.html +++ b/files/zh-cn/web/html/element/audio/index.html @@ -33,7 +33,7 @@ translation_of: Web/HTML/Element/audio <dt>{{htmlattrdef("controls")}}</dt> <dd>如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。</dd> <dt>{{htmlattrdef("crossorigin")}}</dt> - <dd>枚举属性 展示音频资源是否可以通过CORS加载。<a href="/zh-CN/docs/CORS_Enabled_Image">支持CORS的资源 </a> 可以被 {{HTMLElement("canvas")}} 元素复用而不污染. 可选值如下： + <dd>枚举属性 展示音频资源是否可以通过 CORS 加载。<a href="/zh-CN/docs/CORS_Enabled_Image">支持 CORS 的资源 </a> 可以被 {{HTMLElement("canvas")}} 元素复用而不污染。可选值如下： <dl> <dt><code>anonymous</code></dt> <dd>在发送跨域请求时不携带验证信息。换句话说，浏览器在发送<code>Origin:</code> HTTP 请求首部时将不携带 cookie、 X.509 安全令牌、也不会执行任何 HTTP 基本认证。如果服务器没有给予源站信任（也就是说没有设置 <code>Access-Control-Allow-Origin:</code> 响应首部），那么图片就被认为是污染的，它就会被限制使用。</dd> @@ -48,7 +48,7 @@ translation_of: Web/HTML/Element/audio <p>如果音频是以流的形式加载的，并且数据超出了媒体的缓冲区（buffer），{{Glossary("user agent")}} 可能无法获取资源的某些部分。另一些音频的时间轴可能并非从 0 秒开始，所以设置 <code>currentTime</code> 到一个开始时间之前的时间可能会失败。举个例子，如果音频媒体的时间轴从 12 小时开始，把 <code>currentTime</code> 设置到 3600 将会尝试把当前播放位置设置到媒体的开始位置之前，从而导致错误。{{domxref("HTMLMediaElement.getStartDate", "getStartDate()")}} 方法能够用于确定媒体时间轴的开始位置。</p> </dd> <dt>{{htmlattrdef("disableRemotePlayback")}} {{experimental_inline}}</dt> - <dd>这是一个布尔值，用来禁用在远程设备上进行进度控制的能力。这些设备通过有线（比如 HDMI, DVI）或无线技术（比如Miracast, Chromecast, DLNA, AirPlay,）来与 web 连接。请参考 <a href="https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute">this proposed specification</a> 来获取更多信息。 + <dd>这是一个布尔值，用来禁用在远程设备上进行进度控制的能力。这些设备通过有线（比如 HDMI, DVI）或无线技术（比如 Miracast, Chromecast, DLNA, AirPlay,）来与 web 连接。请参考 <a href="https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute">this proposed specification</a> 来获取更多信息。 <div class="blockIndicator note"> <p>在 Safari 中，你能使用 <a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html"><code>x-webkit-airplay="deny"</code></a> 作为兜底方案。</p> </div> @@ -80,7 +80,7 @@ translation_of: Web/HTML/Element/audio </div> </dd> <dt>{{htmlattrdef("src")}}</dt> - <dd>嵌入的音频的URL。 该URL应遵从 <a href="/en-US/docs/HTTP_access_control">HTTP access controls</a>. 这是一个可选属性；你可以在audio元素中使用 {{htmlelement("source")}} 元素来替代该属性指定嵌入的音频。</dd> + <dd>嵌入的音频的 URL。 该 URL 应遵从 <a href="/en-US/docs/HTTP_access_control">HTTP access controls</a>. 这是一个可选属性；你可以在 audio 元素中使用 {{htmlelement("source")}} 元素来替代该属性指定嵌入的音频。</dd> </dl> <h2 id="事件">事件</h2> @@ -248,7 +248,7 @@ translation_of: Web/HTML/Element/audio </dl> <div class="blockIndicator note"> -<p><strong>注意:尽管是 </strong><code><audio></code> 元素，但它依然有视频以及文字的轨道列表，并且实际上能够用来展示视频，尽管应用接口的使用可能显得很古怪。 </p> +<p><strong>注意：尽管是 </strong><code><audio></code> 元素，但它依然有视频以及文字的轨道列表，并且实际上能够用来展示视频，尽管应用接口的使用可能显得很古怪。 </p> </div> <p>举个例子，为了侦测何时音轨从一个 <code><audio></code> 元素中添加或者移除，你可以使用如下代码：</p> @@ -296,7 +296,7 @@ elem.audioTrackList.onremovetrack = function(event) { <h3 id="<audio>_与多个_<source>_元素"><audio> 与多个 <source> 元素</h3> -<p>这个例子包含了多个 <code><source></code> 元素。如果能够播放的话，浏览器就会试图去加载第一个 source 元素（Opus 后缀名）；如果不行，那就退而求其次去加载第二个(Vorbis 后缀名)，最终退到了 MP3 格式：</p> +<p>这个例子包含了多个 <code><source></code> 元素。如果能够播放的话，浏览器就会试图去加载第一个 source 元素（Opus 后缀名）；如果不行，那就退而求其次去加载第二个 (Vorbis 后缀名)，最终退到了 MP3 格式：</p> <pre class="notranslate"><audio controls> <source src="foo.opus" type="audio/ogg; codecs=opus"/> @@ -376,11 +376,11 @@ Welcome to the Time Keeper's podcast! In this episode we're discussing which Swi <td>任何能够作为容器的元素</td> </tr> <tr> - <th scope="row">隐式ARIA role</th> + <th scope="row">隐式 ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> </tr> <tr> - <th scope="row">合法de ARIA roles</th> + <th scope="row">合法 de ARIA roles</th> <td>{{ARIARole("application")}}</td> </tr> <tr> diff --git a/files/zh-cn/web/html/element/b/index.html b/files/zh-cn/web/html/element/b/index.html index e01455a131..a9758d7016 100644 --- a/files/zh-cn/web/html/element/b/index.html +++ b/files/zh-cn/web/html/element/b/index.html @@ -11,7 +11,7 @@ tags: - 参考 translation_of: Web/HTML/Element/b --- -<p id="摘要"><strong>HTML提醒注意（Bring Attention To）元素（<code><b></code>）</strong>用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是<strong>粗体（Boldface）元素</strong>，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 <code><b></code> 元素用于显示粗体文字；替代方案是使用 CSS {{cssxref("font-weight")}} 属性来创建粗体文字。</p> +<p id="摘要"><strong>HTML 提醒注意（Bring Attention To）元素（<code><b></code>）</strong>用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是<strong>粗体（Boldface）元素</strong>，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 <code><b></code> 元素用于显示粗体文字；替代方案是使用 CSS {{cssxref("font-weight")}} 属性来创建粗体文字。</p> <table class="properties"> <tbody> @@ -56,7 +56,7 @@ translation_of: Web/HTML/Element/b <p>不要将<b>元素与 {{HTMLElement("strong")}}、{{HTMLElement("em")}}或{{HTMLElement("mark")}}元素混淆。 {{HTMLElement("strong")}}元素表示某些重要性的文本，{{HTMLElement("em")}}强调文本，而{{HTMLElement("mark")}}元素表示某些相关性的文本。 <code><b></code>元素不传达这样的特殊语义信息；仅在没有其他合适的元素时使用它。</p> </li> <li>类似的，也不要用 <code><b></code> 元素来标记标题。如果需要表示标题，请使用 {{HTMLElement("h1")}} 到 {{HTMLElement("h6")}} 标签。此外，可以通过样式表来改变这些元素的的默认样式，结果就是它们并<em>不一定</em>都是粗体。</li> - <li>通过在 <code><b></code> 元素上添加<strong> </strong>{{htmlattrxref("class")}} 属性来表示额外的语义信息是一个很好的方式（例如 <code><b class="lead"></code> 来表示段落中的第一句）。这可以在样式需要变动的情况下更轻松地处理不同应用场合的 <code><b></code> 元素，无须改动HTML。</li> + <li>通过在 <code><b></code> 元素上添加<strong> </strong>{{htmlattrxref("class")}} 属性来表示额外的语义信息是一个很好的方式（例如 <code><b class="lead"></code> 来表示段落中的第一句）。这可以在样式需要变动的情况下更轻松地处理不同应用场合的 <code><b></code> 元素，无须改动 HTML。</li> <li>以前 <code><b></code> 元素的意思就是让文本变成粗体。但从 HTML4 开始，不赞成标签表示带样式信息，于是 <code><b></code> 元素的含义发生了变化。</li> <li>如果不是出于语义目的而使用 <code><b></code> 元素，那么让文本显示粗体更好的方式是使用将 CSS 的 {{cssxref("font-weight")}} 属性设置为 <code>"bold"</code>。</li> </ul> diff --git a/files/zh-cn/web/html/element/base/index.html b/files/zh-cn/web/html/element/base/index.html index 5793365ed3..f0e84d8e82 100644 --- a/files/zh-cn/web/html/element/base/index.html +++ b/files/zh-cn/web/html/element/base/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML/Element/base <p><strong>HTML <base> 元素</strong> 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。</p> -<p>一个文档的基本 URL, 可以通过使用 {{domxref('document.baseURI')}} 的 JS 脚本查询。如果文档不包含 <code><base></code> 元素，<code>baseURI</code> 默认为 <code>{{domxref("document.location.href")}}</code>。</p> +<p>一个文档的基本 URL，可以通过使用 {{domxref('document.baseURI')}} 的 JS 脚本查询。如果文档不包含 <code><base></code> 元素，<code>baseURI</code> 默认为 <code>{{domxref("document.location.href")}}</code>。</p> <table class="properties"> <tbody> @@ -46,11 +46,11 @@ translation_of: Web/HTML/Element/base <p>该标签包含<a href="/zh-CN/docs/HTML/Global_attributes">全局属性</a>。</p> -<p>如果指定了以下任一属性，这个元素<strong>必须</strong>在其他任何属性是URL的元素之前。例如：<code>{{HTMLElement("link")}}</code> 的 <code>href</code> 属性。</p> +<p>如果指定了以下任一属性，这个元素<strong>必须</strong>在其他任何属性是 URL 的元素之前。例如：<code>{{HTMLElement("link")}}</code> 的 <code>href</code> 属性。</p> <dl> <dt>{{htmlattrdef("href")}}</dt> - <dd>用于文档中相对 URL 地址的基础 URL。允许绝对和相对URL。</dd> + <dd>用于文档中相对 URL 地址的基础 URL。允许绝对和相对 URL。</dd> <dt>{{htmlattrdef("target")}}</dt> <dd>默认浏览上下文的关键字或作者定义的名称，当没有明确目标的链接 <code>{{HTMLElement("a")}}</code> 或表单 <code>{{HTMLElement("form")}}</code> 导致导航被激活时显示其结果。该属性值定位到<em>浏览上下文</em>（例如选项卡，窗口或内联框 <code>{{HTMLElement("iframe")}}</code> ）。</dd> <dd>以下的关键字指定特殊的意思： @@ -58,7 +58,7 @@ translation_of: Web/HTML/Element/base <li><code>_self</code>: 载入结果到当前浏览上下文中。（该值是元素的默认值）。</li> <li><code>_blank</code>: 载入结果到一个新的未命名的浏览上下文。</li> <li><code>_parent</code>: 载入结果到父级浏览上下文（如果当前页是内联框）。如果没有父级结构，该选项的行为和<code>_self</code>一样。</li> - <li><code>_top</code>: 载入结果到顶级浏览上下文（该浏览上下文是当前上下文的最顶级上下文）。如果没有父级，该选项的行为和_self一样。</li> + <li><code>_top</code>: 载入结果到顶级浏览上下文（该浏览上下文是当前上下文的最顶级上下文）。如果没有父级，该选项的行为和_self 一样。</li> </ul> </dd> </dl> @@ -67,7 +67,7 @@ translation_of: Web/HTML/Element/base <h3 id="多个_<base>_元素">多个 <code><base></code> 元素</h3> -<p>如果指定了多个 <code><base></code> 元素，只会使用第一个 <code>href </code>和 <code>target </code>值, 其余都会被忽略。</p> +<p>如果指定了多个 <code><base></code> 元素，只会使用第一个 <code>href </code>和 <code>target </code>值，其余都会被忽略。</p> <h3 id="页内锚">页内锚</h3> @@ -81,7 +81,7 @@ translation_of: Web/HTML/Element/base <h3 id="Open_Graph">Open Graph</h3> -<p><a href="https://ogp.me">Open Graph</a> 标签不接受 <code><base></code>，并且应该始终具有完整的绝对URL。例如：</p> +<p><a href="https://ogp.me">Open Graph</a> 标签不接受 <code><base></code>，并且应该始终具有完整的绝对 URL。例如：</p> <pre><code><meta property="og:image" content="https://example.com/thumbnail.jpg"></code></pre> diff --git a/files/zh-cn/web/html/element/basefont/index.html b/files/zh-cn/web/html/element/basefont/index.html index 9270e149c9..f8cffd6ba2 100644 --- a/files/zh-cn/web/html/element/basefont/index.html +++ b/files/zh-cn/web/html/element/basefont/index.html @@ -10,32 +10,32 @@ translation_of: Web/HTML/Element/basefont <h2 id="概要">概要</h2> -<p>HTML标签<basefont>用来设置文档的默认字体大小。使用{{HTMLElement("font")}}可以相对于默认字体大小进行变化。</p> +<p>HTML 标签<basefont>用来设置文档的默认字体大小。使用{{HTMLElement("font")}}可以相对于默认字体大小进行变化。</p> <div class="note"> -<p><em>使用说明: </em></p> +<p><em>使用说明：</em></p> -<p><strong>不要再使用这个标签！ </strong>尽管在HTML 3.2中曾经（不严格地）标准化，但是它并不被主流的浏览器所支持。而且，不同的浏览器、甚至同一浏览器的相邻版本，都没有使用相同的实现方式； 实际上，使用这个标签总是导致不确定的结果。</p> +<p><strong>不要再使用这个标签！ </strong>尽管在 HTML 3.2 中曾经（不严格地）标准化，但是它并不被主流的浏览器所支持。而且，不同的浏览器、甚至同一浏览器的相邻版本，都没有使用相同的实现方式； 实际上，使用这个标签总是导致不确定的结果。</p> -<p><basefont>元素，同其他只与样式相关的元素一起，在标准中不被建议使用。从HTML 4起，HTML不再传递样式信息（除{{HTMLElement("style")}} 元素和所有元素的<strong>style</strong>属性内容外）。在HTML5，这个元素已经被彻底移除。对于所有新的网页开发，样式只应该写在CSS中。</p> +<p><basefont>元素，同其他只与样式相关的元素一起，在标准中不被建议使用。从 HTML 4 起，HTML 不再传递样式信息（除{{HTMLElement("style")}} 元素和所有元素的<strong>style</strong>属性内容外）。在 HTML5，这个元素已经被彻底移除。对于所有新的网页开发，样式只应该写在 CSS 中。</p> <p>使用<a href="/en-US/docs/Web/CSS/CSS_Fonts">CSS Fonts</a>属性，同样能够实现 {{HTMLElement("font")}}的效果，甚至更好控制。</p> </div> <h2 id="属性">属性</h2> -<p>如同其他HTML元素一样，它支持<a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>.</p> +<p>如同其他 HTML 元素一样，它支持<a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>.</p> <dl> <dt>{{htmlattrdef("color")}}</dt> - <dd>该属性使用颜色名称或者形如#RRGGBB的十六进制格式设置字体的颜色。</dd> + <dd>该属性使用颜色名称或者形如#RRGGBB 的十六进制格式设置字体的颜色。</dd> <dt>{{htmlattrdef("face")}}</dt> <dd>该属性包含一个或多个字体名称。文档文字默认按照第一个浏览器支持的字体进行渲染。如果所有列出的字体本地系统都未安装，浏览器默认使用该系统上的定比或者定宽字体。</dd> <dt>{{htmlattrdef("size")}}</dt> - <dd>该属性定义了字体大小的，使用数值或者相对值。数值值域为1～7，1最小，默认值为3。</dd> + <dd>该属性定义了字体大小的，使用数值或者相对值。数值值域为 1～7，1 最小，默认值为 3。</dd> </dl> -<h2 id="DOM接口">DOM接口</h2> +<h2 id="DOM接口">DOM 接口</h2> <p>该元素实现了<code><a href="/en-US/docs/DOM/HTMLBaseFontElement" title="DOM/HTMLBaseFontElement">HTMLBaseFontElement</a>接口</code>.</p> @@ -101,11 +101,11 @@ translation_of: Web/HTML/Element/basefont <h2 id="备注">备注</h2> <ul> - <li>HTML 3.2 支持basefont元素，但只支持size属性。</li> - <li>严格HTML和XHTML均不支持该元素。</li> - <li>尽管曾是过渡标准的一部分，许多像Mozilla与Opera这些聚焦正式标准的浏览器并不支持该元素。</li> - <li>该元素的效果可以通过CSS规则实现，为 {{HTMLElement("body")}} 设置CSS属性即可。</li> - <li>XHTML 1.0 要求这个元素包含结尾的斜杠: <code><basefont /></code>.</li> + <li>HTML 3.2 支持 basefont 元素，但只支持 size 属性。</li> + <li>严格 HTML 和 XHTML 均不支持该元素。</li> + <li>尽管曾是过渡标准的一部分，许多像 Mozilla 与 Opera 这些聚焦正式标准的浏览器并不支持该元素。</li> + <li>该元素的效果可以通过 CSS 规则实现，为 {{HTMLElement("body")}} 设置 CSS 属性即可。</li> + <li>XHTML 1.0 要求这个元素包含结尾的斜杠：<code><basefont /></code>.</li> </ul> <div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/bdi/index.html b/files/zh-cn/web/html/element/bdi/index.html index 03d0f69f37..334cd83013 100644 --- a/files/zh-cn/web/html/element/bdi/index.html +++ b/files/zh-cn/web/html/element/bdi/index.html @@ -13,13 +13,13 @@ translation_of: Web/HTML/Element/bdi <h2 id="Summary">Summary</h2> <p>{{HTMLRef}}<br> - <strong>HTML </strong>双向隔离元素(<strong> <code><bdi></code> </strong>) 告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。</p> + <strong>HTML </strong>双向隔离元素 (<strong> <code><bdi></code> </strong>) 告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。</p> <p>{{EmbedInteractiveExample("pages/tabbed/bdi.html", "tabbed-standard")}}</p> -<p class="note">尽管同样的显示效果可以通过使用CSS规则 {{cssxref("unicode-bidi")}}：隔离{{HTMLElement("span")}}或者其他文本格式化元素，但语义信息只能通过<bdi>元素传递。特别是，当浏览器允许忽略CSS样式时，在这种情况下，使用<bdi>仍然可以保证文本正确显示，而使用CSS样式来传递语义时就显得毫无用处。</p> +<p class="note">尽管同样的显示效果可以通过使用 CSS 规则 {{cssxref("unicode-bidi")}}：隔离{{HTMLElement("span")}}或者其他文本格式化元素，但语义信息只能通过<bdi>元素传递。特别是，当浏览器允许忽略 CSS 样式时，在这种情况下，使用<bdi>仍然可以保证文本正确显示，而使用 CSS 样式来传递语义时就显得毫无用处。</p> <table class="properties"> <tbody> @@ -50,7 +50,7 @@ translation_of: Web/HTML/Element/bdi <p>{{htmlattrdef("dir")}}</p> -<p>如同其他HTML元素一样，它包含<a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>，但是有一些语义上的细微差别：<strong>dir</strong>属性不继承父元素。如果没有设置，默认值即为auto，以便浏览器根据元素内容决定元素内容的方向。</p> +<p>如同其他 HTML 元素一样，它包含<a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>，但是有一些语义上的细微差别：<strong>dir</strong>属性不继承父元素。如果没有设置，默认值即为 auto，以便浏览器根据元素内容决定元素内容的方向。</p> <h2 id="示例">示例</h2> diff --git a/files/zh-cn/web/html/element/bdo/index.html b/files/zh-cn/web/html/element/bdo/index.html index 6037c4b619..5d55b4eebc 100644 --- a/files/zh-cn/web/html/element/bdo/index.html +++ b/files/zh-cn/web/html/element/bdo/index.html @@ -7,19 +7,19 @@ translation_of: Web/HTML/Element/bdo <div></div> -<p><span class="seoSummary">HTML 双向文本替代元素(<strong><code><bdo></code></strong>)改写了文本的方向性, </span>使文本以不同的方向渲染呈现出来<span class="seoSummary">(override可以翻译很多意思，编程语言中多用覆盖，重载；这里采用了Google的整体翻译，取替代替换改写之意)</span></p> +<p><span class="seoSummary">HTML 双向文本替代元素 (<strong><code><bdo></code></strong>) 改写了文本的方向性，</span>使文本以不同的方向渲染呈现出来<span class="seoSummary">(override 可以翻译很多意思，编程语言中多用覆盖，重载；这里采用了 Google 的整体翻译，取替代替换改写之意)</span></p> <div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</div> -<p>文本的字符是从给定方向的起始点绘制的; 各个字符的方向不受影响 (因此字符集不会向后拉, 例如).</p> +<p>文本的字符是从给定方向的起始点绘制的; 各个字符的方向不受影响 (因此字符集不会向后拉， 例如).</p> <table class="properties"> <tbody> <tr> <th scope="row">内容分类</th> - <td><a href="zh-CN/docs/Web/Guide/HTML/Content_categories">流式元素</a>, <a href="zh-CN/docs/Web/Guide/HTML/Content_categories">短语元素</a>, 显式元素.</td> + <td><a href="zh-CN/docs/Web/Guide/HTML/Content_categories">流式元素</a>, <a href="zh-CN/docs/Web/Guide/HTML/Content_categories">短语元素</a>, 显式元素。</td> </tr> <tr> <th scope="row">许可内容</th> @@ -34,16 +34,16 @@ translation_of: Web/HTML/Element/bdo <td>接受<a href="zh-CN/docs/Web/Guide/HTML/Content_categories">短语元素</a>的任何元素</td> </tr> <tr> - <th scope="row">隐式ARIA角色</th> + <th scope="row">隐式 ARIA 角色</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> </tr> <tr> - <th scope="row">许可ARIA角色</th> + <th scope="row">许可 ARIA 角色</th> <td>任何</td> </tr> <tr> <th scope="row">DOM 接口</th> - <td>{{domxref("HTMLElement")}}直到Gecko 1.9.2 (包括Firefox 4)为止，Firefox均为此元素实现HTMLSpanElement接口。</td> + <td>{{domxref("HTMLElement")}}直到 Gecko 1.9.2 (包括 Firefox 4) 为止，Firefox 均为此元素实现 HTMLSpanElement 接口。</td> </tr> </tbody> </table> @@ -55,11 +55,11 @@ translation_of: Web/HTML/Element/bdo <dl> <dt>{{htmlattrdef("dir")}}</dt> <dd> - <p> 在此元素内容中呈现文本的方向.可能的值是:</p> + <p> 在此元素内容中呈现文本的方向。可能的值是：</p> <ul> - <li>ltr: 指示文本应从左到右的方向.</li> - <li>rtl: 指示文本应从右到左的方向.</li> + <li>ltr: 指示文本应从左到右的方向。</li> + <li>rtl: 指示文本应从右到左的方向。</li> </ul> </dd> </dl> @@ -78,7 +78,7 @@ to left.</bdo></p> <h2 id="注意">注意</h2> -<p>HTML 4规范未指定此元素的事件。 它们是在XHTML中添加的。 这很可能是疏忽。</p> +<p>HTML 4 规范未指定此元素的事件。 它们是在 XHTML 中添加的。 这很可能是疏忽。</p> <h2 id="规范">规范</h2> @@ -118,5 +118,5 @@ to left.</bdo></p> <h2 dir="ltr" id="另参见">另参见</h2> <ul> - <li>相关HTML: {{HTMLElement("bdi")}}</li> + <li>相关 HTML: {{HTMLElement("bdi")}}</li> </ul> diff --git a/files/zh-cn/web/html/element/bgsound/index.html b/files/zh-cn/web/html/element/bgsound/index.html index 5bc998b303..6aa97f9f7c 100644 --- a/files/zh-cn/web/html/element/bgsound/index.html +++ b/files/zh-cn/web/html/element/bgsound/index.html @@ -7,23 +7,23 @@ translation_of: Web/HTML/Element/bgsound <h2 id="概要">概要</h2> -<p><bgsound>是IE浏览器中设置网页背景音乐的元素。</p> +<p><bgsound>是 IE 浏览器中设置网页背景音乐的元素。</p> <div class="note"> -<p><strong>不要使用它!</strong>想要在网页中嵌入音频，应当使用{{HTMLElement("audio")}}.</p> +<p><strong>不要使用它！</strong>想要在网页中嵌入音频，应当使用{{HTMLElement("audio")}}.</p> </div> <h2 id="属性">属性</h2> <dl> <dt>{{htmlattrdef("balance")}}</dt> - <dd>该属性取值在-10,000到+10,000，它决定扬声器之间的音量如何分配。</dd> + <dd>该属性取值在-10,000 到 +10,000，它决定扬声器之间的音量如何分配。</dd> <dt>{{htmlattrdef("loop")}}</dt> - <dd>该属性表明音频被播放的次数，是一个数值或者关键字infinite。</dd> + <dd>该属性表明音频被播放的次数，是一个数值或者关键字 infinite。</dd> <dt>{{htmlattrdef("src")}}</dt> - <dd>该属性定义了音频文件的URL，必须是以下格式之一：.wav，.au，.mid</dd> + <dd>该属性定义了音频文件的 URL，必须是以下格式之一：.wav，.au，.mid</dd> <dt>{{htmlattrdef("volume")}}</dt> - <dd>该属性值域为-10,000到0，它决定背景音乐的音量大小。</dd> + <dd>该属性值域为-10,000 到 0，它决定背景音乐的音量大小。</dd> </dl> <h2 id="示例">示例</h2> @@ -35,9 +35,9 @@ translation_of: Web/HTML/Element/bgsound <h2 id="备注">备注</h2> -<p>类似的功能在一些版本的Netscape中使用<embed>标签来调用音频播放器。</p> +<p>类似的功能在一些版本的 Netscape 中使用<embed>标签来调用音频播放器。</p> -<p>你可以使用自闭合标签<code><bgsound />。然后由于它并非标准的一部分，XHTML会认为它无效。</code></p> +<p>你可以使用自闭合标签<code><bgsound />。然后由于它并非标准的一部分，XHTML 会认为它无效。</code></p> <h2 id="浏览器兼容">浏览器兼容</h2> diff --git a/files/zh-cn/web/html/element/big/index.html b/files/zh-cn/web/html/element/big/index.html index 2136192d9e..eff8d2cc7c 100644 --- a/files/zh-cn/web/html/element/big/index.html +++ b/files/zh-cn/web/html/element/big/index.html @@ -7,10 +7,10 @@ translation_of: Web/HTML/Element/big <h2 id="概要">概要</h2> -<p>The HTML Big Element (<code><big></code>) 会使字体加大一号（例如从小号(small)到中号(medium)，从大号(large)到加大(x-large)），最大不超过浏览器的最大字体。</p> +<p>The HTML Big Element (<code><big></code>) 会使字体加大一号（例如从小号 (small) 到中号 (medium)，从大号 (large) 到加大 (x-large)），最大不超过浏览器的最大字体。</p> <div class="note"> -<p><strong>使用备注: </strong>由于它是纯显示性的，该元素在<a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a>中已经被移除，不应当再使用。取而代之，网页开发者应当使用CSS属性。 </p> +<p><strong>使用备注：</strong>由于它是纯显示性的，该元素在<a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a>中已经被移除，不应当再使用。取而代之，网页开发者应当使用 CSS 属性。 </p> </div> <h2 id="属性">属性</h2> @@ -37,9 +37,9 @@ translation_of: Web/HTML/Element/big <h2 id="DOM_接口">DOM 接口</h2> -<p>该元素实现了 {{domxref('HTMLElement')}}接口.</p> +<p>该元素实现了 {{domxref('HTMLElement')}}接口。</p> -<div class="note"><strong>实现备注: 直到</strong> Gecko 1.9.2, Firefox 为该元素实现了{{domxref('HTMLSpanElement')}}接口.</div> +<div class="note"><strong>实现备注：直到</strong> Gecko 1.9.2, Firefox 为该元素实现了{{domxref('HTMLSpanElement')}}接口。</div> <h2 id="浏览器兼容">浏览器兼容</h2> diff --git a/files/zh-cn/web/html/element/blink/index.html b/files/zh-cn/web/html/element/blink/index.html index 43dffb7fe4..93fb766928 100644 --- a/files/zh-cn/web/html/element/blink/index.html +++ b/files/zh-cn/web/html/element/blink/index.html @@ -5,28 +5,28 @@ translation_of: Web/HTML/Element/blink --- <div>{{Deprecated_header}} {{obsolete_header}}</div> -<p>HTML Blink Element (<code><blink></code>)不是标准元素，它会使包含其中的文本闪烁。</p> +<p>HTML Blink Element (<code><blink></code>) 不是标准元素，它会使包含其中的文本闪烁。</p> <div class="warning"> -<p class="note"><strong>警告:</strong> 不要使用这个元素，它已经被<strong>淘汰</strong>。闪烁字体不符合无障碍标准，CSS规范允许浏览器忽略闪烁值。</p> +<p class="note"><strong>警告：</strong> 不要使用这个元素，它已经被<strong>淘汰</strong>。闪烁字体不符合无障碍标准，CSS 规范允许浏览器忽略闪烁值。</p> </div> <h2 id="DOM_接口">DOM 接口</h2> -<p>该元素不被支持，因而实现了{{domxref("HTMLUnknownElement")}} 接口.</p> +<p>该元素不被支持，因而实现了{{domxref("HTMLUnknownElement")}} 接口。</p> <h2 id="示例">示例</h2> <pre class="brush:html"><blink>Why would somebody use this?</blink> </pre> -<h3 id="结果_(淡化!)">结果 (淡化!)</h3> +<h3 id="结果_(淡化!)">结果 (淡化！)</h3> <p><img alt="Image:HTMLBlinkElement.gif" src="/@api/deki/files/247/=HTMLBlinkElement.gif"></p> <h2 id="规范">规范</h2> -<p>该元素不是标准元素，不属于规范的一部分. 不信的话，<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features"> 你自己来看HTML规范文档</a>.</p> +<p>该元素不是标准元素，不属于规范的一部分。不信的话，<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features"> 你自己来看 HTML 规范文档</a>.</p> <h2 id="浏览器兼容">浏览器兼容</h2> diff --git a/files/zh-cn/web/html/element/blockquote/index.html b/files/zh-cn/web/html/element/blockquote/index.html index 4bd40652b7..f6d8d2e06e 100644 --- a/files/zh-cn/web/html/element/blockquote/index.html +++ b/files/zh-cn/web/html/element/blockquote/index.html @@ -49,7 +49,7 @@ translation_of: Web/HTML/Element/blockquote <dl> <dt>{{htmlattrdef("cite")}}</dt> - <dd>是一个标注引用的信息的来源文档或者相关信息的URL。通常用来描述能够解释引文的上下文或者引用的信息。</dd> + <dd>是一个标注引用的信息的来源文档或者相关信息的 URL。通常用来描述能够解释引文的上下文或者引用的信息。</dd> </dl> @@ -63,7 +63,7 @@ translation_of: Web/HTML/Element/blockquote <h2 id="例子">例子</h2> -<p>下面的这个例子演示了使用 <code><blockquote></code> 元素引用一段来自 {{RFC(1149)}} 的内容，<cite>以禽类作为载体的IP 数据包传输标准。</cite></p> +<p>下面的这个例子演示了使用 <code><blockquote></code> 元素引用一段来自 {{RFC(1149)}} 的内容，<cite>以禽类作为载体的 IP 数据包传输标准。</cite></p> <pre class="brush: html"><blockquote cite="https://tools.ietf.org/html/rfc1149"> <p>Avian carriers can provide high delay, low @@ -80,7 +80,7 @@ translation_of: Web/HTML/Element/blockquote </blockquote> </pre> -<p>上面的HTML代码将会生成:</p> +<p>上面的 HTML 代码将会生成：</p> <p>{{EmbedLiveSample("Example", 640, 180)}}</p> diff --git a/files/zh-cn/web/html/element/body/index.html b/files/zh-cn/web/html/element/body/index.html index b92f290bbb..f53ced2910 100644 --- a/files/zh-cn/web/html/element/body/index.html +++ b/files/zh-cn/web/html/element/body/index.html @@ -55,7 +55,7 @@ translation_of: Web/HTML/Element/body <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt> <dd>超链接选中之后的文本颜色。<em>此方法不符合规范，请使用 CSS 的 {{cssxref("color")}} 属性和 {{cssxref(":active")}} 伪类替代。</em></dd> <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt> - <dd>将URI所指向的图片作为背景。此方法不符合规范，请<em>使用</em><em> CSS 的 {{cssxref("background")}} 属性替代。</em></dd> + <dd>将 URI 所指向的图片作为背景。此方法不符合规范，请<em>使用</em><em> CSS 的 {{cssxref("background")}} 属性替代。</em></dd> <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt> <dd>文档的背景颜色。此方法不符合规范，请使用<em> CSS 的 {{cssxref("background-color")}} 属性替代。</em></dd> <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt> @@ -77,7 +77,7 @@ translation_of: Web/HTML/Element/body <dt>{{htmlattrdef("onfocus")}}</dt> <dd>文档获得焦点时调用的函数。</dd> <dt>{{htmlattrdef("onhashchange")}}</dt> - <dd>文档当前地址的片段标识部分（以(<code>'#'</code>)开始的部分）发生改变时调用的函数。</dd> + <dd>文档当前地址的片段标识部分（以 (<code>'#'</code>) 开始的部分）发生改变时调用的函数。</dd> <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt> <dd>用户选择的语言发生改变时调用的函数。</dd> <dt>{{htmlattrdef("onload")}}</dt> diff --git a/files/zh-cn/web/html/element/br/index.html b/files/zh-cn/web/html/element/br/index.html index aa3e6ea144..36700d3550 100644 --- a/files/zh-cn/web/html/element/br/index.html +++ b/files/zh-cn/web/html/element/br/index.html @@ -17,7 +17,7 @@ translation_of: Web/HTML/Element/br </tr> <tr> <th scope="row">标签略写</th> - <td>必须有一个开始标签，并且一定不能有结束标签。在 XHTML中将元素写为 <code><br /></code>。</td> + <td>必须有一个开始标签，并且一定不能有结束标签。在 XHTML 中将元素写为 <code><br /></code>。</td> </tr> <tr> <th scope="row">允许的父元素</th> diff --git a/files/zh-cn/web/html/element/button/index.html b/files/zh-cn/web/html/element/button/index.html index 11b4d5d7a3..9d59b22a2d 100644 --- a/files/zh-cn/web/html/element/button/index.html +++ b/files/zh-cn/web/html/element/button/index.html @@ -3,7 +3,7 @@ title: <button> slug: Web/HTML/Element/button translation_of: Web/HTML/Element/button --- -<p><span class="seoSummary"><strong>HTML <code><button></code> 元素</strong>表示一个可点击的按钮，可以用在<a href="/en-US/docs/Learn/HTML/Forms">表单</a>或文档其它需要使用简单标准按钮的地方。</span> 默认情况下，HTML按钮的显示样式接近于 {{Glossary("user agent")}} 所在的宿主系统平台（用户操作系统）的按钮， 但你可以使用 <a href="/en-US/docs/Web/CSS">CSS</a> 来改变按钮的样貌。</p> +<p><span class="seoSummary"><strong>HTML <code><button></code> 元素</strong>表示一个可点击的按钮，可以用在<a href="/en-US/docs/Learn/HTML/Forms">表单</a>或文档其它需要使用简单标准按钮的地方。</span> 默认情况下，HTML 按钮的显示样式接近于 {{Glossary("user agent")}} 所在的宿主系统平台（用户操作系统）的按钮， 但你可以使用 <a href="/en-US/docs/Web/CSS">CSS</a> 来改变按钮的样貌。</p> <table class="properties"> <tbody> @@ -42,51 +42,51 @@ translation_of: Web/HTML/Element/button <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt> <dd>一个布尔属性，用于指定当页面加载时按钮必须有输入焦点，除非用户重写，例如通过不同控件键入。只有一个表单关联元素可以指定该属性。</dd> <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> - <dd>该属性在 {{HTMLElement("button")}}上的使用并未标准化，只有Firefox允许。不像其它浏览器，Firefox默认在页面加载时持续禁用Button的动态状态（<a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox persists the dynamic disabled state</a> ）。将此属性设置为<code style="font-style: normal;">off</code> (i.e. <code style="font-style: normal;">autocomplete="off"</code>)关闭此特性。参见 {{bug(654072)}}。</dd> + <dd>该属性在 {{HTMLElement("button")}}上的使用并未标准化，只有 Firefox 允许。不像其它浏览器，Firefox 默认在页面加载时持续禁用 Button 的动态状态（<a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox persists the dynamic disabled state</a> ）。将此属性设置为<code style="font-style: normal;">off</code> (i.e. <code style="font-style: normal;">autocomplete="off"</code>) 关闭此特性。参见 {{bug(654072)}}。</dd> <dt>{{htmlattrdef("disabled")}}</dt> <dd> - <p>此布尔属性表示用户不能与button交互。如果属性值未指定，button继承包含元素，例如{{HTMLElement("fieldset")}}；如果没有设置<strong>disabled</strong>属性的包含元素，button将可交互。</p> + <p>此布尔属性表示用户不能与 button 交互。如果属性值未指定，button 继承包含元素，例如{{HTMLElement("fieldset")}}；如果没有设置<strong>disabled</strong>属性的包含元素，button 将可交互。</p> - <p>不像其它浏览器，Firefox默认在页面加载时持续禁用Button的动态状态。使用{{htmlattrxref("autocomplete","button")}}属性可控制此特性。</p> + <p>不像其它浏览器，Firefox 默认在页面加载时持续禁用 Button 的动态状态。使用{{htmlattrxref("autocomplete","button")}}属性可控制此特性。</p> </dd> <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> - <dd>表示button元素关联的form元素（它的表单拥有者）。此属性值必须为同一文档中的一个{{HTMLElement("form")}}元素的<strong>id</strong>属性。如果此属性未指定，<button>元素必须是form元素的后代。利用此属性，你可以将<button>元素放置在文档内的任何位置，而不仅仅是作为他们form元素的后代。</dd> + <dd>表示 button 元素关联的 form 元素（它的表单拥有者）。此属性值必须为同一文档中的一个{{HTMLElement("form")}}元素的<strong>id</strong>属性。如果此属性未指定，<button>元素必须是 form 元素的后代。利用此属性，你可以将<button>元素放置在文档内的任何位置，而不仅仅是作为他们 form 元素的后代。</dd> <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt> - <dd>表示程序处理button提交信息的URI。如果指定了，将重写button表单拥有者的{{htmlattrxref("action","form")}}属性。</dd> + <dd>表示程序处理 button 提交信息的 URI。如果指定了，将重写 button 表单拥有者的{{htmlattrxref("action","form")}}属性。</dd> <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline(5)}}</dt> - <dd>如果button是submit类型，此属性值指定提交表单到服务器的内容类型。可选值： + <dd>如果 button 是 submit 类型，此属性值指定提交表单到服务器的内容类型。可选值： <ul> <li><code>application/x-www-form-urlencoded</code>: 未指定时的默认值。</li> <li><code>multipart/form-data</code>: 如果使用{{htmlattrxref("type","input")}}属性的{{HTMLElement("input")}}元素设置文件，使用此值。</li> <li><code>text/plain</code></li> </ul> - <p>如果指定此属性，它将重写button的表单拥有者的{{htmlattrxref("enctype","form")}}属性。</p> + <p>如果指定此属性，它将重写 button 的表单拥有者的{{htmlattrxref("enctype","form")}}属性。</p> </dd> <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline(5)}}</dt> - <dd>如果button是submit类型，此属性指定浏览器提交表单使用的HTTP方法。可选值: + <dd>如果 button 是 submit 类型，此属性指定浏览器提交表单使用的 HTTP 方法。可选值： <ul> <li><code>post</code>: 来自表单的数据被包含在表单内容中，被发送到服务器。</li> - <li><code>get</code>: 来自表单的数据以'?'作为分隔符被附加到form的<strong>URI</strong>属性中，得到的URI被发送到服务器。当表单没有副作用，且仅包含ASCII字符时使用这种方法。</li> + <li><code>get</code>: 来自表单的数据以'?'作为分隔符被附加到 form 的<strong>URI</strong>属性中，得到的 URI 被发送到服务器。当表单没有副作用，且仅包含 ASCII 字符时使用这种方法。</li> </ul> - <p>如果指定了，此属性会重写button拥有者的{{htmlattrxref("method","form")}}属性。</p> + <p>如果指定了，此属性会重写 button 拥有者的{{htmlattrxref("method","form")}}属性。</p> </dd> <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline(5)}}</dt> - <dd>如果button是submit类型，此布尔属性指定当表单被提交时不需要验证。如果指定了，它会重写button拥有者的{{htmlattrxref("novalidate","form")}}属性。</dd> + <dd>如果 button 是 submit 类型，此布尔属性指定当表单被提交时不需要验证。如果指定了，它会重写 button 拥有者的{{htmlattrxref("novalidate","form")}}属性。</dd> <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline(5)}}</dt> - <dd>如果button是submit类型，此属性指定一个名称或关键字，表示接收提交的表单后在哪里显示响应。这是一个浏览上下文（例如tab，window或内联框架）的名称或关键字。如果指定了，它会重写button拥有者的{{htmlattrxref("target", "form")}} 属性。关键字如下： + <dd>如果 button 是 submit 类型，此属性指定一个名称或关键字，表示接收提交的表单后在哪里显示响应。这是一个浏览上下文（例如 tab，window 或内联框架）的名称或关键字。如果指定了，它会重写 button 拥有者的{{htmlattrxref("target", "form")}} 属性。关键字如下： <ul> <li><code>_self</code>: 在同一个浏览上下文中加载响应作为当前的。未指定时此值为默认值。</li> <li><code>_blank</code>: 在一个新的不知名浏览上下文中加载响应。</li> - <li><code>_parent</code>: 在当前浏览上下文父级中加载响应。如果没有父级的，此选项将按<span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">_self执行。</span></li> - <li><code>_top</code>: 在顶级浏览上下文（即当前浏览上下文的祖先，且没有父级）中架加载响应。如果没有顶级的，此选项将按<span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">_self执行。</span></li> + <li><code>_parent</code>: 在当前浏览上下文父级中加载响应。如果没有父级的，此选项将按<span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">_self 执行。</span></li> + <li><code>_top</code>: 在顶级浏览上下文（即当前浏览上下文的祖先，且没有父级）中架加载响应。如果没有顶级的，此选项将按<span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">_self 执行。</span></li> </ul> </dd> <dt>{{htmlattrdef("name")}}</dt> - <dd>button的名称，与表单数据一起提交。</dd> + <dd>button 的名称，与表单数据一起提交。</dd> <dt>{{htmlattrdef("type")}}</dt> - <dd>button的类型。可选值： + <dd>button 的类型。可选值： <ul> <li><code>submit</code>: 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。</li> <li><code>reset</code>: 此按钮重置所有组件为初始值。</li> @@ -95,17 +95,17 @@ translation_of: Web/HTML/Element/button </ul> </dd> <dt>{{htmlattrdef("value")}}</dt> - <dd>button的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时，这个值便以参数的形式被递送至服务器。</dd> + <dd>button 的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时，这个值便以参数的形式被递送至服务器。</dd> </dl> <h2 id="注意">注意</h2> -<p><code><button></code> 元素比 {{HTMLElement("input")}} 元素更容易使用样式。你可以在元素内添加HTML内容（像 <code><em></code>、<code><strong></code> 甚至 <code><img></code>），以及 {{Cssxref("::after")}} 和 {{Cssxref("::before")}} 伪元素来实现复杂的效果，而 {{HTMLElement("input")}} 只支持文本内容。</p> +<p><code><button></code> 元素比 {{HTMLElement("input")}} 元素更容易使用样式。你可以在元素内添加 HTML 内容（像 <code><em></code>、<code><strong></code> 甚至 <code><img></code>），以及 {{Cssxref("::after")}} 和 {{Cssxref("::before")}} 伪元素来实现复杂的效果，而 {{HTMLElement("input")}} 只支持文本内容。</p> <p>如果你的按钮不是用于向服务器提交数据，请确保这些按钮的 <code>type</code> 属性设置成 <code>button</code>。否则它们被按下后将会向服务器发送数据并加载（可能并不存在的）响应内容，因而可能会破坏当前文档的状态。</p> -<p>IE7 在使用 <code><button type="submit" name="myButton" value="foo">Click me</button></code> 提交表单时存在一个BUG，<code>POST</code> 提交的数据将是 <code>myButton=Click me</code> 而不是 <code>myButton=foo</code>（没有把 <code>value</code> 属性的值 <code>foo</code> 提交上去）。<br> - IE6 的BUG更糟糕，在提交表单的时候会把表单内所有的按钮都提交上去，同时还有和 IE7 一样的BUG。<br> +<p>IE7 在使用 <code><button type="submit" name="myButton" value="foo">Click me</button></code> 提交表单时存在一个 BUG，<code>POST</code> 提交的数据将是 <code>myButton=Click me</code> 而不是 <code>myButton=foo</code>（没有把 <code>value</code> 属性的值 <code>foo</code> 提交上去）。<br> + IE6 的 BUG 更糟糕，在提交表单的时候会把表单内所有的按钮都提交上去，同时还有和 IE7 一样的 BUG。<br> IE8 已经修复了这个问题。</p> <p>Firefox 出于使用方便的目的，会在获得焦点的按钮上添加一个细小的虚线框。 这个边框由浏览器内部的样式表中的 CSS 定义，但如果有必要的话，你可以用 <code>button{{cssxref("::-moz-focus-inner")}} { }</code> 重写这个样式。</p> @@ -155,7 +155,7 @@ translation_of: Web/HTML/Element/button </table> <table> - <caption>轻点（tapping） {{HTMLElement("button")}} 会让其获得焦点吗？</caption> + <caption>轻点（tapping）{{HTMLElement("button")}} 会让其获得焦点吗？</caption> <tbody> <tr> <td>移动浏览器</td> diff --git a/files/zh-cn/web/html/element/canvas/index.html b/files/zh-cn/web/html/element/canvas/index.html index fc3087ac5e..ce82617f2a 100644 --- a/files/zh-cn/web/html/element/canvas/index.html +++ b/files/zh-cn/web/html/element/canvas/index.html @@ -8,7 +8,7 @@ tags: - Web translation_of: Web/HTML/Element/canvas --- -<p><code><canvas></code>元素可被用来通过JavaScript（<a href="/zh-CN/docs/Web/API/Canvas_API">Canvas</a> API 或 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API">WebGL</a> API）绘制图形及图形动画。</p> +<p><code><canvas></code>元素可被用来通过 JavaScript（<a href="/zh-CN/docs/Web/API/Canvas_API">Canvas</a> API 或 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API">WebGL</a> API）绘制图形及图形动画。</p> <p>{{HTMLRef}}</p> @@ -22,7 +22,7 @@ US/docs/HTML/Global_attributes">全局属性</a>.</p> <dt>{{htmlattrdef("height")}}</dt> <dd>该元素占用空间的高度，以 CSS 像素（px）表示，默认为 150。</dd> <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>通过设置这个属性，来控制canvas元素是否半透明。如果你不想canvas元素被设置为半透明，使用这个元素将可以优化浏览器绘图性能。</dd> + <dd>通过设置这个属性，来控制 canvas 元素是否半透明。如果你不想 canvas 元素被设置为半透明，使用这个元素将可以优化浏览器绘图性能。</dd> <dt>{{htmlattrdef("width")}}</dt> <dd>该元素占用空间的宽度，以 CSS 像素（px）表示，默认为 300。</dd> </dl> @@ -31,13 +31,13 @@ US/docs/HTML/Global_attributes">全局属性</a>.</p> <h3 id="标签需要闭合">标签需要闭合</h3> -<p>不同于 {{HTMLElement("img")}} 元素, {{HTMLElement ("canvas")}}元素需要有闭合标签 (<code></canvas></code>).</p> +<p>不同于 {{HTMLElement("img")}} 元素， {{HTMLElement ("canvas")}}元素需要有闭合标签 (<code></canvas></code>).</p> -<h3 id="设置画布canvas的大小">设置画布(canvas)的大小</h3> +<h3 id="设置画布canvas的大小">设置画布 (canvas) 的大小</h3> -<p>直接在html标签中设置width和height属性或者使用JavaScript来指定画布尺寸，这将改变一个画布的水平像素和垂直像素数，就像定义了一张图片的大小一样。</p> +<p>直接在 html 标签中设置 width 和 height 属性或者使用 JavaScript 来指定画布尺寸，这将改变一个画布的水平像素和垂直像素数，就像定义了一张图片的大小一样。</p> -<p>可以使用CSS的width和height以在渲染期间缩放图像以适应样式大小，就像<img>元素一样。如果您发现<canvas>元素中展示的内容变形，您可以通过<canvas>自带的height和width属性进行相关设置，而不要使用CSS。</p> +<p>可以使用 CSS 的 width 和 height 以在渲染期间缩放图像以适应样式大小，就像<img>元素一样。如果您发现<canvas>元素中展示的内容变形，您可以通过<canvas>自带的 height 和 width 属性进行相关设置，而不要使用 CSS。</p> <h3 id="最大的画布尺寸">最大的画布尺寸</h3> @@ -85,8 +85,8 @@ US/docs/HTML/Global_attributes">全局属性</a>.</p> <h3 id="HTML">HTML</h3> <pre class="brush: html"><canvas id="canvas" width="300" height="300"> - 抱歉，您的浏览器不支持canvas元素 - （这些内容将会在不支持<canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现） + 抱歉，您的浏览器不支持 canvas 元素 + （这些内容将会在不支持<canvas>元素的浏览器或是禁用了 JavaScript 的浏览器内渲染并展现） </canvas> </pre> @@ -105,7 +105,7 @@ ctx.fillRect(10, 10, 100, 100);</pre> <h2 id="可访问性">可访问性</h2> -<p><code><canvas></code> 元素本身只是一个位图，不提供任何绘制对象的信息。画布内容不像HTML那样具有语义并能暴露给可访问性工具。以下指南可以帮助您更方便地访问它。</p> +<p><code><canvas></code> 元素本身只是一个位图，不提供任何绘制对象的信息。画布内容不像 HTML 那样具有语义并能暴露给可访问性工具。以下指南可以帮助您更方便地访问它。</p> <ul> <li><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">MDN Hit regions and accessability</a></li> diff --git a/files/zh-cn/web/html/element/caption/index.html b/files/zh-cn/web/html/element/caption/index.html index 6afe7d92c3..3482c5b47a 100644 --- a/files/zh-cn/web/html/element/caption/index.html +++ b/files/zh-cn/web/html/element/caption/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/caption --- <h2 id="简介">简介</h2> -<p><strong>HTML <code><caption></code> 元素</strong> (or <em>HTML 表格标题元素</em>) 展示一个表格的标题， 它常常作为 {{HTMLElement("table")}} 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被CSS样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。</p> +<p><strong>HTML <code><caption></code> 元素</strong> (or <em>HTML 表格标题元素</em>) 展示一个表格的标题， 它常常作为 {{HTMLElement("table")}} 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被 CSS 样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。</p> <table class="properties"> <tbody> @@ -38,7 +38,7 @@ translation_of: Web/HTML/Element/caption <dl> <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> - <dd>这个可枚举属性表明了caption相对于table应该如何排列。它可能有以下几个值： + <dd>这个可枚举属性表明了 caption 相对于 table 应该如何排列。它可能有以下几个值： <ul> <li><code>left</code>, 展示在表格左边</li> <li><code>top</code>, 显示在表格前面</li> @@ -52,7 +52,7 @@ translation_of: Web/HTML/Element/caption <h2 id="使用说明">使用说明</h2> -<p>当 {{HTMLElement("table")}} 元素是{{HTMLElement("caption")}} 的父元素，caption是{{HTMLElement("figure")}} 元素的唯一后代的时候，使用{{HTMLElement("figcaption")}}元素替代caption元素</p> +<p>当 {{HTMLElement("table")}} 元素是{{HTMLElement("caption")}} 的父元素，caption 是{{HTMLElement("figure")}} 元素的唯一后代的时候，使用{{HTMLElement("figcaption")}}元素替代 caption 元素</p> <h2 id="实例">实例</h2> @@ -140,8 +140,8 @@ translation_of: Web/HTML/Element/caption <h2 id="See_also">See also</h2> <ul> - <li>其他与table相关的HTML元素: {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> - <li>可能对{{HTMLElement("caption")}} 元素有用的CSS属性: + <li>其他与 table 相关的 HTML 元素: {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>可能对{{HTMLElement("caption")}} 元素有用的 CSS 属性： <ul> <li>{{cssxref("text-align")}}, {{cssxref("caption-side")}}.</li> </ul> diff --git a/files/zh-cn/web/html/element/center/index.html b/files/zh-cn/web/html/element/center/index.html index 2ccce04ce5..c23936fc78 100644 --- a/files/zh-cn/web/html/element/center/index.html +++ b/files/zh-cn/web/html/element/center/index.html @@ -7,7 +7,7 @@ translation_of: Web/HTML/Element/center <h2 id="Summary">Summary</h2> -<p>HTML Center 元素 (<code><center></code>) 是个 <a href="/en-US/docs/HTML/Block-level_elements" title="HTML/Block-level_elements">块级元素</a>，可以包含段落，以及其它块级和内联元素。这个元素的整个内容在它的上级元素中水平居中(通常是 {{HTMLElement("body")}})。</p> +<p>HTML Center 元素 (<code><center></code>) 是个 <a href="/en-US/docs/HTML/Block-level_elements" title="HTML/Block-level_elements">块级元素</a>，可以包含段落，以及其它块级和内联元素。这个元素的整个内容在它的上级元素中水平居中 (通常是 {{HTMLElement("body")}})。</p> <p>这个标签已经在 HTML 4（以及 XHTML 1）中废除了，以支持 <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a> {{Cssxref("text-align")}} 属性，它可以用于 {{HTMLElement("div")}} 元素，或者独立的 {{HTMLElement("p")}}。对于居中的块，使用其它 CSS 属性，例如 {{Cssxref("margin-left")}} 和 {{Cssxref("margin-right")}}，并将其设置为 <code>auto</code> (或者将 {{Cssxref("margin")}} 设为 <code>0 auto</code>).</p> @@ -16,7 +16,7 @@ translation_of: Web/HTML/Element/center <p>这个元素实现了 {{domxref("HTMLElement")}} 接口。</p> <div class="note"> -<p><strong>实现注解:</strong> 直到 Gecko 1.9.2（包含）, Firefox 为这个元素实现了 {{domxref("HTMLSpanElement")}} 接口。</p> +<p><strong>实现注解：</strong> 直到 Gecko 1.9.2（包含）, Firefox 为这个元素实现了 {{domxref("HTMLSpanElement")}} 接口。</p> </div> <h2 id="Example_1" name="Example_1">示例 1</h2> diff --git a/files/zh-cn/web/html/element/cite/index.html b/files/zh-cn/web/html/element/cite/index.html index 1369ae440f..56e1a01f14 100644 --- a/files/zh-cn/web/html/element/cite/index.html +++ b/files/zh-cn/web/html/element/cite/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML/Element/cite --- <div>{{HTMLRef}}</div> -<p><em>HTML引用（ Citation）标签</em> (<strong><cite></strong>) 表示一个作品的引用，且必须包含作品的标题。这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写。</p> +<p><em>HTML 引用（ Citation）标签</em> (<strong><cite></strong>) 表示一个作品的引用，且必须包含作品的标题。这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写。</p> <div>{{EmbedInteractiveExample("pages/tabbed/cite.html", "tabbed-standard")}}</div> @@ -22,7 +22,7 @@ translation_of: Web/HTML/Element/cite <tr> <th scope="row" style="vertical-align: middle;">内容类别</th> <td> - <p><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">流内容（Flow Content）</a>，<a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">叙述内容（Phrasing Content）</a>，可触及的内容（Palpable Content） 。</p> + <p><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">流内容（Flow Content）</a>，<a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">叙述内容（Phrasing Content）</a>，可触及的内容（Palpable Content）。</p> </td> </tr> <tr> @@ -39,7 +39,7 @@ translation_of: Web/HTML/Element/cite </tr> <tr> <th scope="row">DOM 接口</th> - <td>这个元素在Gecko 1.9.2 (Firefox 4)及之前的版本中 实现为HTMLElement, Firefox 实现为HTMLSpanElement。</td> + <td>这个元素在 Gecko 1.9.2 (Firefox 4) 及之前的版本中 实现为 HTMLElement, Firefox 实现为 HTMLSpanElement。</td> </tr> </tbody> </table> @@ -53,9 +53,9 @@ translation_of: Web/HTML/Element/cite <ul> <li>适用场合可能包括一本书，一张纸，一篇散文，一首诗，一个分数，一首歌，一部电影，一个电视节目，一个游戏，一个雕塑，一幅画，戏剧制作，一个剧本，一个歌剧，一种音乐，一个展览 ，一个法律案件报告，一个计算机程序，一个网站，一个网页，博客或评论，论坛帖子或评论 ，鸣叫，或者书面或口头陈述，等等。</li> - <li>W3C规范，对创造性的工作可能包括作者的名字，而WHATWG宣布，它可能不包括在任何情况下，一个人的名字。</li> - <li>在blockquote元素或者q元素上使用cite或者blockquote属性来标明参考的在线资源。</li> - <li>为了避免在使用cite元素时默认字体为斜体，可以使用css的font-style属性重新进行设置。</li> + <li>W3C 规范，对创造性的工作可能包括作者的名字，而 WHATWG 宣布，它可能不包括在任何情况下，一个人的名字。</li> + <li>在 blockquote 元素或者 q 元素上使用 cite 或者 blockquote 属性来标明参考的在线资源。</li> + <li>为了避免在使用 cite 元素时默认字体为斜体，可以使用 css 的 font-style 属性重新进行设置。</li> </ul> diff --git a/files/zh-cn/web/html/element/code/index.html b/files/zh-cn/web/html/element/code/index.html index 1090396027..974d1aafeb 100644 --- a/files/zh-cn/web/html/element/code/index.html +++ b/files/zh-cn/web/html/element/code/index.html @@ -4,7 +4,7 @@ slug: Web/HTML/Element/code translation_of: Web/HTML/Element/code --- <h2 id="摘要">摘要</h2> -<p><strong>HTML <code><code></code> 元素</strong>呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示.</p> +<p><strong>HTML <code><code></code> 元素</strong>呈现一段计算机代码。默认情况下，它以浏览器的默认等宽字体显示。</p> <ul class="htmlelt"> <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</li> <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li> @@ -19,9 +19,9 @@ translation_of: Web/HTML/Element/code </pre> <h3 id="Result" name="Result">结果</h3> <p>Regular text. <code>This is code.</code> Regular text.</p> -<p>(中文的等宽字和正常字看起来区别不大, 因为汉字本身就是方块行. 但是仍能看出几行文字之间的对齐差异)</p> +<p>(中文的等宽字和正常字看起来区别不大，因为汉字本身就是方块行。但是仍能看出几行文字之间的对齐差异)</p> <h2 id="注意">注意</h2> -<p>CSS 规则可以覆盖浏览器默认的 <code>code</code> 标签字体样式. 但用户设置的浏览器字体选项可能会超过 CSS 的优先级, 使之无效.</p> +<p>CSS 规则可以覆盖浏览器默认的 <code>code</code> 标签字体样式。但用户设置的浏览器字体选项可能会超过 CSS 的优先级，使之无效。</p> <h2 id="Specifications" name="Specifications">Specifications</h2> <table class="standard-table"> <thead> diff --git a/files/zh-cn/web/html/element/col/index.html b/files/zh-cn/web/html/element/col/index.html index 28eb2b5fb4..367ae6d8b8 100644 --- a/files/zh-cn/web/html/element/col/index.html +++ b/files/zh-cn/web/html/element/col/index.html @@ -7,7 +7,7 @@ translation_of: Web/HTML/Element/col <p><strong>HTML <code><col></code> 元素</strong> 定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于{{HTMLElement("colgroup")}}元素内。</p> -<p>此元素允许使用CSS进行样式列，但只有少数属性将对该列产生影响（请参阅列表的<a href="https://www.w3.org/TR/CSS21/tables.html#columns">CSS 2.1规范</a>）。</p> +<p>此元素允许使用 CSS 进行样式列，但只有少数属性将对该列产生影响（请参阅列表的<a href="https://www.w3.org/TR/CSS21/tables.html#columns">CSS 2.1 规范</a>）。</p> <ul class="htmlelt"> <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> None.</li> @@ -54,7 +54,7 @@ translation_of: Web/HTML/Element/col <dl> <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> - <dd>定义列中对应的每个单元格的背景色。其值是 <a class="external" href="http://www.w3.org/Graphics/Color/sRGB">sRGB</a> 定义的6位16进制代码之一，前缀为 '#'。 也可以使用以下16个预定义的颜色字符: + <dd>定义列中对应的每个单元格的背景色。其值是 <a class="external" href="http://www.w3.org/Graphics/Color/sRGB">sRGB</a> 定义的 6 位 16 进制代码之一，前缀为 '#'。 也可以使用以下 16 个预定义的颜色字符： <table style="width: 80%;"> <tbody> <tr> @@ -108,7 +108,7 @@ translation_of: Web/HTML/Element/col </tbody> </table> - <div class="note"><strong>注意: 不要使用这个属性</strong>, 它是非标准的，并且只实现了IE浏览器中的部分版本: {{HTMLElement("col")}} 元素的样式应该使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a>. 在{{HTMLElement("td")}}元素上使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 的 {{cssxref("background-color")}} 属性即可实现相同效果。</div> + <div class="note"><strong>注意：不要使用这个属性</strong>, 它是非标准的，并且只实现了 IE 浏览器中的部分版本: {{HTMLElement("col")}} 元素的样式应该使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a>. 在{{HTMLElement("td")}}元素上使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 的 {{cssxref("background-color")}} 属性即可实现相同效果。</div> </dd> </dl> @@ -128,7 +128,7 @@ translation_of: Web/HTML/Element/col <dl> <dt>{{htmlattrdef("span")}}</dt> - <dd>该属性值为一个正整数，表示该 <col> 元素横跨的列数。默认值为1</dd> + <dd>该属性值为一个正整数，表示该 <col> 元素横跨的列数。默认值为 1</dd> </dl> <dl> @@ -159,7 +159,7 @@ translation_of: Web/HTML/Element/col <h2 id="示例">示例</h2> -<p>详见 {{HTMLElement("table")}} 页面 <code><col></code> 标签的示例.</p> +<p>详见 {{HTMLElement("table")}} 页面 <code><col></code> 标签的示例。</p> <h2 id="Specifications" name="Specifications">规范</h2> diff --git a/files/zh-cn/web/html/element/colgroup/index.html b/files/zh-cn/web/html/element/colgroup/index.html index fc15883a37..ad68adfedd 100644 --- a/files/zh-cn/web/html/element/colgroup/index.html +++ b/files/zh-cn/web/html/element/colgroup/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML/Element/colgroup --- <div>{{HTMLRef}}</div> -<p>HTML 中的 表格列组（<em>Column Group </em><strong><colgroup></strong>） 标签用来定义表中的一组列表。</p> +<p>HTML 中的 表格列组（<em>Column Group </em><strong><colgroup></strong>）标签用来定义表中的一组列表。</p> <div>{{EmbedInteractiveExample("pages/tabbed/colgroup.html","tabbed-taller")}}</div> @@ -66,7 +66,7 @@ translation_of: Web/HTML/Element/colgroup <p>此属性的默认值为 <code>left</code>。后代 {{HTMLElement("col")}} 元素可以用它们自己的 {{htmlattrxref("align", "col")}} 属性值来重写该属性。</p> - <div class="note"><strong>小贴士: </strong>不要使用这个属性，它在最新的标准中已经不被支持。 + <div class="note"><strong>小贴士：</strong>不要使用这个属性，它在最新的标准中已经不被支持。 <ul> <li>若要实现与 <code>left</code>, <code>center</code>, <code>right</code> 或 <code>justify</code> 相同的效果： diff --git a/files/zh-cn/web/html/element/data/index.html b/files/zh-cn/web/html/element/data/index.html index 860165d4c4..d268bef44f 100644 --- a/files/zh-cn/web/html/element/data/index.html +++ b/files/zh-cn/web/html/element/data/index.html @@ -47,7 +47,7 @@ translation_of: Web/HTML/Element/data <dl> <dt>{{htmlattrdef("value")}}</dt> - <dd>该属性指定元素内容所对应的数据，或者说“机器可读的翻译”。</dd> + <dd>该属性指定元素内容所对应的数据，或者说 “机器可读的翻译”。</dd> </dl> <h2 id="示例">示例</h2> diff --git a/files/zh-cn/web/html/element/datalist/index.html b/files/zh-cn/web/html/element/datalist/index.html index 81f2debb2d..d87134fd15 100644 --- a/files/zh-cn/web/html/element/datalist/index.html +++ b/files/zh-cn/web/html/element/datalist/index.html @@ -6,17 +6,17 @@ tags: - HTML translation_of: Web/HTML/Element/datalist --- -<p id="概述"><strong><em>HTML </em><code><datalist></code><em>元素</em></strong>包含了一组{{HTMLElement("option")}}元素，这些元素表示其它表单控件可选值.</p> +<p id="概述"><strong><em>HTML </em><code><datalist></code><em>元素</em></strong>包含了一组{{HTMLElement("option")}}元素，这些元素表示其它表单控件可选值。</p> <p>{{EmbedInteractiveExample("pages/tabbed/datalist.html", "tabbed-standard")}}</p> <ul class="htmlelt"> <li><dfn><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容范畴</a></dfn><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流内容</a>，<a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">段落内容</a>。</li> - <li><dfn>允许内容</dfn>要么 <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">段落内容</a> 要么 0个或多个 {{HTMLElement("option")}}元素.</li> + <li><dfn>允许内容</dfn>要么 <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">段落内容</a> 要么 0 个或多个 {{HTMLElement("option")}}元素。</li> <li><dfn>遗漏标签</dfn>{{no_tag_omission}}</li> - <li><dfn>允许父级元素</dfn>任何接受<a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">段落内容</a>的元素.</li> + <li><dfn>允许父级元素</dfn>任何接受<a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">段落内容</a>的元素。</li> <li><dfn>Permitted ARIA roles</dfn>None</li> - <li><dfn>DOM接口</dfn>{{domxref("HTMLDataListElement")}}</li> + <li><dfn>DOM 接口</dfn>{{domxref("HTMLDataListElement")}}</li> </ul> <h2 id="属性">属性</h2> @@ -69,11 +69,11 @@ translation_of: Web/HTML/Element/datalist <h2 id="Polyfill">Polyfill</h2> -<p>以下Polyfill旨在支持旧的或者目前不兼容的浏览器：<a href="https://github.com/mfranzke/datalist-polyfill">datalist-polyfill</a></p> +<p>以下 Polyfill 旨在支持旧的或者目前不兼容的浏览器：<a href="https://github.com/mfranzke/datalist-polyfill">datalist-polyfill</a></p> <h2 id="参见">参见</h2> <ul> <li class="last">{{ HTMLElement("input") }} 元素，它更特殊的 {{ htmlattrxref("list", "input") }} 属性;</li> - <li class="last"> {{ HTMLElement("option") }}元素.</li> + <li class="last"> {{ HTMLElement("option") }}元素。</li> </ul> diff --git a/files/zh-cn/web/html/element/del/index.html b/files/zh-cn/web/html/element/del/index.html index 69eb700ece..d424de4dfe 100644 --- a/files/zh-cn/web/html/element/del/index.html +++ b/files/zh-cn/web/html/element/del/index.html @@ -9,7 +9,7 @@ tags: - del translation_of: Web/HTML/Element/del --- -<p id="Summary">HTML的<strong><code><del></code></strong>标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。{{HTMLElement("ins")}}标签的作用恰恰于此相反：表示文档中添加的内容。</p> +<p id="Summary">HTML 的<strong><code><del></code></strong>标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。{{HTMLElement("ins")}}标签的作用恰恰于此相反：表示文档中添加的内容。</p> <p>这个标签通常（但不一定要）在文字上显示删除线。</p> @@ -48,7 +48,7 @@ translation_of: Web/HTML/Element/del <dl> <dt>{{htmlattrdef("cite")}}</dt> - <dd>提供一个URI，其中的资源解释作出修改的原因（比如：根据某次会议讨论）。</dd> + <dd>提供一个 URI，其中的资源解释作出修改的原因（比如：根据某次会议讨论）。</dd> <dt>{{htmlattrdef("datetime")}}</dt> <dd>这个属性说明修改的时间和日期，这里的时间和日期格式要符合<a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-date-string-with-optional-time">规范</a>。如果设置的值不符合该规范，那么它将没有任何意义。</dd> </dl> diff --git a/files/zh-cn/web/html/element/details/index.html b/files/zh-cn/web/html/element/details/index.html index aa33ec2e53..d13992ce21 100644 --- a/files/zh-cn/web/html/element/details/index.html +++ b/files/zh-cn/web/html/element/details/index.html @@ -191,7 +191,7 @@ details > p { <p>{{HTMLElement("summary")}} 元素支持 {{cssxref("list-style")}}缩写属性或者完全属性，比如{{cssxref("list-style-type")}}，可以使用它们任意改变三角（通常是使用{{cssxref("list-style-image")}}）。例如，我们可以使用<code>list-style: none</code>移除三角形。</p> -<p>Chrome尚不支持此功能，因此我们还需要使用其非标准<code>::-webkit-details-marker</code><a href="/en-US/docs/Web/CSS/Pseudo-elements">伪元素</a>来自定义。</p> +<p>Chrome 尚不支持此功能，因此我们还需要使用其非标准<code>::-webkit-details-marker</code><a href="/en-US/docs/Web/CSS/Pseudo-elements">伪元素</a>来自定义。</p> <h4 id="CSS_2">CSS</h4> @@ -222,7 +222,7 @@ details > p { } </pre> -<p>该CSS的外观类似于选项卡界面，在该界面中，激活选项卡将展开并打开它以显示其内容。</p> +<p>该 CSS 的外观类似于选项卡界面，在该界面中，激活选项卡将展开并打开它以显示其内容。</p> <h4 id="HTML_2">HTML</h4> diff --git a/files/zh-cn/web/html/element/dfn/index.html b/files/zh-cn/web/html/element/dfn/index.html index 54ad800e1d..c0b6570808 100644 --- a/files/zh-cn/web/html/element/dfn/index.html +++ b/files/zh-cn/web/html/element/dfn/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTML/Element/dfn <div class="note"><strong>HTML5 使用说明：</strong> <ul> - <li><code><dfn></code> 元素标记了被定义的术语；术语定义应当在 {{HTMLElement("p")}}, {{HTMLElement("section")}}或定义列表 (通常是{{HTMLElement("dt")}}, {{HTMLElement("dd")}} 对)中给出。</li> + <li><code><dfn></code> 元素标记了被定义的术语；术语定义应当在 {{HTMLElement("p")}}, {{HTMLElement("section")}}或定义列表 (通常是{{HTMLElement("dt")}}, {{HTMLElement("dd")}} 对) 中给出。</li> <li>被定义术语的值由下列规则确定： <ol> <li>如果 <code><dfn></code> 元素有一个 <code><strong>title</strong></code> 属性，那么该术语的值就是该属性的值。</li> @@ -54,7 +54,7 @@ translation_of: Web/HTML/Element/dfn <h2 id="示例">示例</h2> -<p>下列示例是合法的HTML5。</p> +<p>下列示例是合法的 HTML5。</p> <pre class="brush: html"><!-- Define "The Internet" --> <p><dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.</p> diff --git a/files/zh-cn/web/html/element/dialog/index.html b/files/zh-cn/web/html/element/dialog/index.html index 0b9ffdfd91..b609eccf4e 100644 --- a/files/zh-cn/web/html/element/dialog/index.html +++ b/files/zh-cn/web/html/element/dialog/index.html @@ -69,7 +69,7 @@ translation_of: Web/HTML/Element/dialog <h3 id="高级示例">高级示例</h3> -<p>当单击“更新详细信息”按钮时，此示例打开一个包含一个表单的弹出对话框。</p> +<p>当单击 “更新详细信息” 按钮时，此示例打开一个包含一个表单的弹出对话框。</p> <h4 id="HTML">HTML</h4> diff --git a/files/zh-cn/web/html/element/div/index.html b/files/zh-cn/web/html/element/div/index.html index 15f608528b..9709d43925 100644 --- a/files/zh-cn/web/html/element/div/index.html +++ b/files/zh-cn/web/html/element/div/index.html @@ -20,7 +20,7 @@ translation_of: Web/HTML/Element/div <p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> -<p>作为一个“纯粹的”容器，<code><div></code> 元素在语义上不表示任何特定类型的内容。然而，其可以将内容分组，从而可以使用{{htmlattrxref("class")}}或是{{htmlattrxref("id")}}属性方便的定义内容的格式，也可以在一段文档中划分标记出使用另一种语言书写的内容（使用{{htmlattrxref("lang")}} 属性）等等。</p> +<p>作为一个 “纯粹的” 容器，<code><div></code> 元素在语义上不表示任何特定类型的内容。然而，其可以将内容分组，从而可以使用{{htmlattrxref("class")}}或是{{htmlattrxref("id")}}属性方便的定义内容的格式，也可以在一段文档中划分标记出使用另一种语言书写的内容（使用{{htmlattrxref("lang")}} 属性）等等。</p> <table class="properties"> <tbody> @@ -47,7 +47,7 @@ translation_of: Web/HTML/Element/div <td>Any</td> </tr> <tr> - <th scope="row">所使用的DOM API 接口</th> + <th scope="row">所使用的 DOM API 接口</th> <td>{{domxref("HTMLDivElement")}}</td> </tr> </tbody> @@ -87,7 +87,7 @@ translation_of: Web/HTML/Element/div <h3 id="样式实例">样式实例</h3> -<p>本例使用CSS将样式应用于<div>，从而创建一个阴影框。注意使用<div>上的 {{htmlattrxref("class")}}属性将名为“shadowbox”的样式应用于元素。</p> +<p>本例使用 CSS 将样式应用于<div>，从而创建一个阴影框。注意使用<div>上的 {{htmlattrxref("class")}}属性将名为 “shadowbox” 的样式应用于元素。</p> <h4 id="HTML">HTML</h4> diff --git a/files/zh-cn/web/html/element/dl/index.html b/files/zh-cn/web/html/element/dl/index.html index 5b0fdf9162..30b42ef8bb 100644 --- a/files/zh-cn/web/html/element/dl/index.html +++ b/files/zh-cn/web/html/element/dl/index.html @@ -11,16 +11,16 @@ translation_of: Web/HTML/Element/dl --- <h2 id="简介">简介</h2> -<p><strong>HTML <code><dl></code> 元素</strong> （或 <em>HTML</em> <em>描述列表元素</em>）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。</p> +<p><strong>HTML <code><dl></code> 元素</strong> （或 <em>HTML</em> <em>描述列表元素</em>）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。</p> <p>在 HTML5 之前， <dl> 被大家以定义列表所熟知。</p> <ul class="htmlelt"> - <li><dfn><a href="/en-US/docs/HTML/Content_categories">内容分类</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>(流体内容), 如果<code><dl></code> 元素的子元素包含一个键值对，则显示其中内容.</li> + <li><dfn><a href="/en-US/docs/HTML/Content_categories">内容分类</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>(流体内容), 如果<code><dl></code> 元素的子元素包含一个键值对，则显示其中内容。</li> </ul> <ol class="htmlelt"> - <li><dfn>允许的内容</dfn>一：零组或多组dom结构，每组dom结构中包含一个或多个{{HTMLElement("dt")}} 元素，以及 一个或多个{{HTMLElement("dd")}}元素，可通过{{HTMLElement("script")}}元素和{{HTMLElement("template")}}元素进行混入。二：一组或多组{{HTMLElement("div")}}元素，可通过{{HTMLElement("script")}}元素和{{HTMLElement("template")}}元素混入。</li> + <li><dfn>允许的内容</dfn>一：零组或多组 dom 结构，每组 dom 结构中包含一个或多个{{HTMLElement("dt")}} 元素，以及 一个或多个{{HTMLElement("dd")}}元素，可通过{{HTMLElement("script")}}元素和{{HTMLElement("template")}}元素进行混入。二：一组或多组{{HTMLElement("div")}}元素，可通过{{HTMLElement("script")}}元素和{{HTMLElement("template")}}元素混入。</li> </ol> <ul class="htmlelt"> @@ -91,7 +91,7 @@ translation_of: Web/HTML/Element/dl <h3 id="元数据">元数据</h3> -<p>描述列表可以很方便的将元数据展示为键-值对列表：</p> +<p>描述列表可以很方便的将元数据展示为键 - 值对列表：</p> <pre><dl> <dt>Name</dt> @@ -113,7 +113,7 @@ translation_of: Web/HTML/Element/dl <h3 id="在_HTMLElementdiv_元素中包装名称值组">在 {{HTMLElement("div")}} 元素中包装名称值组</h3> -<p>WHATWG HTML允许在 {{HTMLElement("div")}} 元素中的 {{HTMLElement("dl")}} 元素中包装每个名称 - 值组。当使用元数据时，或全局属性适用于整个组或用于样式时，这可能很有用。</p> +<p>WHATWG HTML 允许在 {{HTMLElement("div")}} 元素中的 {{HTMLElement("dl")}} 元素中包装每个名称 - 值组。当使用元数据时，或全局属性适用于整个组或用于样式时，这可能很有用。</p> <pre class="brush: html"><dl> <div> diff --git a/files/zh-cn/web/html/element/em/index.html b/files/zh-cn/web/html/element/em/index.html index 1c3f6deca5..a8f83c8958 100644 --- a/files/zh-cn/web/html/element/em/index.html +++ b/files/zh-cn/web/html/element/em/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTML/Element/em <p><strong>HTML 着重元素</strong> (<code><strong><em></strong></code>) 标记出需要用户着重阅读的内容， <code><em></code> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。</p> -<div class="note"><strong>请注意：</strong> 通常地，该元素会被浏览器展示为斜体文本， 但是，它不应该仅仅用于应用斜体样式；为此目的，请使用CSS样式。使用 {{HTMLElement("cite")}} 元素标记作品的标题（书籍，戏剧，歌曲等）；它通常也采用斜体样式，但具有不同的含义。使用 {{HTMLElement("strong")}} 元素标记比周围文本更重要的文本。</div> +<div class="note"><strong>请注意：</strong> 通常地，该元素会被浏览器展示为斜体文本， 但是，它不应该仅仅用于应用斜体样式；为此目的，请使用 CSS 样式。使用 {{HTMLElement("cite")}} 元素标记作品的标题（书籍，戏剧，歌曲等）；它通常也采用斜体样式，但具有不同的含义。使用 {{HTMLElement("strong")}} 元素标记比周围文本更重要的文本。</div> <ul class="htmlelt"> <li><dfn>内容类别</dfn><br> @@ -47,7 +47,7 @@ translation_of: Web/HTML/Element/em <p>在默认情况下，它们的视觉效果是一样的。但语义是不同的。 <code><em></code> 标签表示其内容的着重强调，而 <code><i></code> 标签表示从正常散文中区分出的文本，例如外来词，虚构人物的思想，或者当文本指的是一个词语的定义，而不是其语义含义。（作品的标题，例如书籍或电影的名字，应该使用 <code><cite></code>。）</p> -<p>这意味着，正确使用哪一个取决于具体的场景。两者都不是纯粹为了装饰的目的，那是CSS样式所做的。</p> +<p>这意味着，正确使用哪一个取决于具体的场景。两者都不是纯粹为了装饰的目的，那是 CSS 样式所做的。</p> <p>一个 <code><em></code> 的例子可能是："Just <em>do</em> it already!"，或："We <em>had</em> to do something about it"。人或软件在阅读文本时，会对斜体字的发音使用重读强调。</p> diff --git a/files/zh-cn/web/html/element/embed/index.html b/files/zh-cn/web/html/element/embed/index.html index 6733e70d96..611487ad6a 100644 --- a/files/zh-cn/web/html/element/embed/index.html +++ b/files/zh-cn/web/html/element/embed/index.html @@ -51,7 +51,7 @@ translation_of: Web/HTML/Element/embed <dt>{{htmlattrdef("height")}}</dt> <dd>资源显示的高度，in <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a>. -- (Absolute values only. <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">NO percentages</a>)</dd> <dt>{{htmlattrdef("src")}}</dt> - <dd>被嵌套的资源的URL。</dd> + <dd>被嵌套的资源的 URL。</dd> <dt>{{htmlattrdef("type")}}</dt> <dd>用于选择插件实例化的 MIME 类型。</dd> <dt>{{htmlattrdef("width")}}</dt> diff --git a/files/zh-cn/web/html/element/fieldset/index.html b/files/zh-cn/web/html/element/fieldset/index.html index 7eda6a559a..4b243490ba 100644 --- a/files/zh-cn/web/html/element/fieldset/index.html +++ b/files/zh-cn/web/html/element/fieldset/index.html @@ -4,7 +4,7 @@ slug: Web/HTML/Element/fieldset tags: - Element - HTML - - HTML表单 + - HTML 表单 - 元素 - 参考 - 表单 @@ -18,7 +18,7 @@ translation_of: Web/HTML/Element/fieldset <div>{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}</div> -<div>如上述例子所示，<code><fieldset></code> 元素将一个HTML表单的一部分组成一组，内置了一个 {{htmlelement("legend")}} 元素作为 <code>fieldset</code> 的标题。这个元素有几个属性，最值得注意的是 <code>form</code>，其可以包含同一页面的 {{htmlelement("form")}} 元素的 <code>id</code>，以使 <code><fieldset></code> 成为这个 <code><form></code> 的一部分，即使 <code><fieldset></code> 不在其内。还有 <code>disabled</code> 属性，可将 <code><fieldset></code> 及其所有内容设置为不可用。</div> +<div>如上述例子所示，<code><fieldset></code> 元素将一个 HTML 表单的一部分组成一组，内置了一个 {{htmlelement("legend")}} 元素作为 <code>fieldset</code> 的标题。这个元素有几个属性，最值得注意的是 <code>form</code>，其可以包含同一页面的 {{htmlelement("form")}} 元素的 <code>id</code>，以使 <code><fieldset></code> 成为这个 <code><form></code> 的一部分，即使 <code><fieldset></code> 不在其内。还有 <code>disabled</code> 属性，可将 <code><fieldset></code> 及其所有内容设置为不可用。</div> <h2 id="属性">属性</h2> @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/fieldset <dl> <dt>{{htmlattrdef("disabled")}}</dt> - <dd>如果设置了这个 bool 值属性, <code><fieldset></code> 的所有子代表单控件也会继承这个属性。这意味着它们不可编辑，也不会随着 {{htmlelement("form")}} 一起提交。它们也不会接收到任何浏览器事件，如鼠标点击或与聚焦相关的事件。默认情况下，浏览器会将这样的控件展示为灰色。注意，{{HTMLElement("legend")}} 中的表单元素不会被禁用。</dd> + <dd>如果设置了这个 bool 值属性，<code><fieldset></code> 的所有子代表单控件也会继承这个属性。这意味着它们不可编辑，也不会随着 {{htmlelement("form")}} 一起提交。它们也不会接收到任何浏览器事件，如鼠标点击或与聚焦相关的事件。默认情况下，浏览器会将这样的控件展示为灰色。注意，{{HTMLElement("legend")}} 中的表单元素不会被禁用。</dd> <dt>{{htmlattrdef("form")}}</dt> <dd>将该值设为一个 {{HTMLElement("form")}} 元素的 {{htmlattrxref("id")}} 属性值以将 <code><fieldset></code> 设置成这个 {{HTMLElement("form")}} 的一部分。 </dd> <dt>{{htmlattrdef("name")}}</dt> @@ -48,7 +48,7 @@ translation_of: Web/HTML/Element/fieldset <p>你可以以任意方式自行设置 <code><fieldset></code> 和 <code><legend></code> 的样式以配合你的页面设计。</p> <div class="blockIndicator note"> -<p><strong>注意：</strong>截至这篇文章发出为止，Microsoft Edge 和 Google Chrome 不能在 {{HTMLElement("fieldset")}} 中使用 <a href="/zh-CN/docs/Glossary/Flexbox">flexbox</a> 和 <a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout">grid </a>布局。<a href="https://github.com/w3c/csswg-drafts/issues/321">这个 GitHub issue</a> 跟踪了这个bug。</p> +<p><strong>注意：</strong>截至这篇文章发出为止，Microsoft Edge 和 Google Chrome 不能在 {{HTMLElement("fieldset")}} 中使用 <a href="/zh-CN/docs/Glossary/Flexbox">flexbox</a> 和 <a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout">grid </a>布局。<a href="https://github.com/w3c/csswg-drafts/issues/321">这个 GitHub issue</a> 跟踪了这个 bug。</p> </div> <h2 id="Examples">示例</h2> diff --git a/files/zh-cn/web/html/element/figcaption/index.html b/files/zh-cn/web/html/element/figcaption/index.html index 615e8fc953..f75af29512 100644 --- a/files/zh-cn/web/html/element/figcaption/index.html +++ b/files/zh-cn/web/html/element/figcaption/index.html @@ -9,7 +9,7 @@ translation_of: Web/HTML/Element/figcaption --- <p>{{HTMLRef}}</p> -<p><strong>HTML <code><figcaption></code> 元素</strong> 是与其相关联的图片的说明/标题，用?于描述其父节点 {{HTMLElement("figure")}} 元素里的其他数据。这意味着 <code><figcaption></code> 在{{HTMLElement("figure")}} 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。</p> +<p><strong>HTML <code><figcaption></code> 元素</strong> 是与其相关联的图片的说明/标题，用？于描述其父节点 {{HTMLElement("figure")}} 元素里的其他数据。这意味着 <code><figcaption></code> 在{{HTMLElement("figure")}} 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。</p> <table class="properties"> <tbody> diff --git a/files/zh-cn/web/html/element/figure/index.html b/files/zh-cn/web/html/element/figure/index.html index d8a8dbe65b..8dd0398a64 100644 --- a/files/zh-cn/web/html/element/figure/index.html +++ b/files/zh-cn/web/html/element/figure/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTML/Element/figure --- <div>{{HTMLRef}}</div> -<p><strong>HTML <code><figure></code> 元素</strong>代表一段独立的内容, 经常与说明（caption） {{HTMLElement("figcaption")}} 配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。</p> +<p><strong>HTML <code><figure></code> 元素</strong>代表一段独立的内容，经常与说明（caption）{{HTMLElement("figcaption")}} 配合使用，并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。</p> <div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</div> diff --git a/files/zh-cn/web/html/element/font/index.html b/files/zh-cn/web/html/element/font/index.html index 326372c54e..d3a63cf209 100644 --- a/files/zh-cn/web/html/element/font/index.html +++ b/files/zh-cn/web/html/element/font/index.html @@ -29,7 +29,7 @@ translation_of: Web/HTML/Element/font <dt>{{htmlattrdef("face")}}</dt> <dd>这个属性列出了一个或多个逗号分隔的字体名称。 默认样式中的文档文字，会使用客户端浏览器所支持的，第一个字体风格来渲染。如果本地系统中并没有安装列出的字体，浏览器会使用系统预设的均衡（proportional）或等宽（fixed-width）字体。</dd> <dt>{{htmlattrdef("size")}}</dt> - <dd>这个属性使用数字或相对值指定文字大小。数字在最小的7到最大的7之间，默认值为3。也可以用诸如 <span style="font-family: courier new;">+2</span> 或 <span style="font-family: courier new;">-3</span> 的相对值指定，这会将其设置为，相对于 {{HTMLElement("basefont")}} 元素 {{htmlattrxref("size", "basefont")}}属性的值，或者如果不存在，则是相对于 <span style="font-family: courier new;">3</span> 也就是默认值的值。</dd> + <dd>这个属性使用数字或相对值指定文字大小。数字在最小的 7 到最大的 7 之间，默认值为 3。也可以用诸如 <span style="font-family: courier new;">+2</span> 或 <span style="font-family: courier new;">-3</span> 的相对值指定，这会将其设置为，相对于 {{HTMLElement("basefont")}} 元素 {{htmlattrxref("size", "basefont")}}属性的值，或者如果不存在，则是相对于 <span style="font-family: courier new;">3</span> 也就是默认值的值。</dd> </dl> <h2 id="DOM_接口">DOM 接口</h2> diff --git a/files/zh-cn/web/html/element/footer/index.html b/files/zh-cn/web/html/element/footer/index.html index 537dd2ed03..3c9300c74e 100644 --- a/files/zh-cn/web/html/element/footer/index.html +++ b/files/zh-cn/web/html/element/footer/index.html @@ -78,7 +78,7 @@ translation_of: Web/HTML/Element/footer <h2 id="参见">参见</h2> <ul> - <li>其他section相关的元素: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}};</li> + <li>其他 section 相关的元素: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}};</li> <li class="last"><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">ARIA: Contentinfo role</a></li> </ul> diff --git a/files/zh-cn/web/html/element/form/index.html b/files/zh-cn/web/html/element/form/index.html index 1da90c52a4..670c28bc46 100644 --- a/files/zh-cn/web/html/element/form/index.html +++ b/files/zh-cn/web/html/element/form/index.html @@ -4,7 +4,7 @@ slug: Web/HTML/Element/form tags: - Forms - HTML - - HTML表单 + - HTML 表单 - Web - 元素 - 参考 @@ -37,7 +37,7 @@ translation_of: Web/HTML/Element/form </tr> <tr> <th scope="row">允许的父级元素</th> - <td>可以是HTML的<a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">任何标签</a></td> + <td>可以是 HTML 的<a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">任何标签</a></td> </tr> <tr> <th scope="row">Implicit ARIA role</th> @@ -85,9 +85,9 @@ translation_of: Web/HTML/Element/form </dd> <dt>{{htmlattrdef("name")}}</dt> - <dd>表单的名称。HTML 4中不推荐（应使用 <code>id</code>）。在 HTML 5 中，该值必须是所有表单中独一无二的，而且不能是空字符串。</dd> + <dd>表单的名称。HTML 4 中不推荐（应使用 <code>id</code>）。在 HTML 5 中，该值必须是所有表单中独一无二的，而且不能是空字符串。</dd> <dt>{{htmlattrdef("rel")}}</dt> - <dd>根据 value 创建一个超链接或Creates a hyperlink or annotation depending on the value, see the <a href="/zh-CN/docs/Web/HTML/Attributes/rel">{{htmlattrdef("rel")}}</a> attribute for details.</dd> + <dd>根据 value 创建一个超链接或 Creates a hyperlink or annotation depending on the value, see the <a href="/zh-CN/docs/Web/HTML/Attributes/rel">{{htmlattrdef("rel")}}</a> attribute for details.</dd> </dl> <h3 id="关于提交表单的属性">关于提交表单的属性</h3> @@ -111,9 +111,9 @@ translation_of: Web/HTML/Element/form <p>这个值可被 {{HTMLElement("button")}}、<code><a href="/zh-CN/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> 或 <code><a href="/zh-CN/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 元素上的 {{htmlattrxref("formenctype", "button")}} 属性覆盖。</p> </dd> <dt>{{htmlattrdef("method")}}</dt> - <dd>浏览器使用这种 <a href="/en-US/docs/HTTP">HTTP</a> 方式来提交 表单. 可能的值有： + <dd>浏览器使用这种 <a href="/en-US/docs/HTTP">HTTP</a> 方式来提交 表单。可能的值有： <ul> - <li><code>post</code>：指的是 HTTP <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST 方法</a>；表单数据会包含在表单体内然后发送给服务器.</li> + <li><code>post</code>：指的是 HTTP <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST 方法</a>；表单数据会包含在表单体内然后发送给服务器。</li> <li><code>get</code>：指的是 HTTP <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET 方法</a>；表单数据会附加在 <code>action</code> 属性的 URL 中，并以 '?' 作为分隔符，<a href="/zh-CN/docs/Glossary/Idempotent">没有副作用</a> 时使用这个方法。</li> <li><code>dialog</code>：如果表单在 {{HTMLElement("dialog")}} 元素中，提交时关闭对话框。</li> </ul> @@ -121,9 +121,9 @@ translation_of: Web/HTML/Element/form <p>此值可以被 {{HTMLElement("button")}}、<code><a href="/zh-CN/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> 或 <code><a href="/zh-CN/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 元素中的 {{htmlattrxref("formmethod", "button")}} 属性覆盖。</p> </dd> <dt>{{htmlattrdef("novalidate")}}</dt> - <dd>此布尔值属性表示提交表单时不需要验证表单。 如果没有声明该属性 （因此表单需要通过验证）。该属性可以被表单中的 {{HTMLElement("button")}}、<code><a href="/zh-CN/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> 或 <code><a href="/zh-CN/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 元素中的 {{htmlattrxref("formnovalidate", "button")}} 属性覆盖。</dd> + <dd>此布尔值属性表示提交表单时不需要验证表单。 如果没有声明该属性（因此表单需要通过验证）。该属性可以被表单中的 {{HTMLElement("button")}}、<code><a href="/zh-CN/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> 或 <code><a href="/zh-CN/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 元素中的 {{htmlattrxref("formnovalidate", "button")}} 属性覆盖。</dd> <dt>{{htmlattrdef("target")}}</dt> - <dd>表示在提交表单之后，在哪里显示响应信息。在 HTML 4 中, 这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个<em>浏览上下文</em> 的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义： + <dd>表示在提交表单之后，在哪里显示响应信息。在 HTML 4 中，这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个<em>浏览上下文</em> 的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义： <ul> <li><code>_self</code>：默认值。在相同浏览上下文中加载。</li> <li><code>_blank</code>：在新的未命名的浏览上下文中加载。</li> diff --git a/files/zh-cn/web/html/element/frameset/index.html b/files/zh-cn/web/html/element/frameset/index.html index 340a5a8293..14f5a187eb 100644 --- a/files/zh-cn/web/html/element/frameset/index.html +++ b/files/zh-cn/web/html/element/frameset/index.html @@ -15,11 +15,11 @@ translation_of: Web/HTML/Element/frameset <p><code><frameset></code> 是一个用于包含 {{HTMLElement("frame")}} 的 HTML 元素。</p> -<div class="note"><strong>注意:</strong> 现在不鼓励使用 frame，而是用{{HTMLElement("iframe")}}。现今的网站一般都不使用 frame。</div> +<div class="note"><strong>注意：</strong> 现在不鼓励使用 frame，而是用{{HTMLElement("iframe")}}。现今的网站一般都不使用 frame。</div> <h2 id="属性">属性</h2> -<p>像所有其他的HTML元素一样，这个元素支持<a href="/en-US/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>。</p> +<p>像所有其他的 HTML 元素一样，这个元素支持<a href="/en-US/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>。</p> <dl> <dt>{{htmlattrdef("cols")}}</dt> diff --git a/files/zh-cn/web/html/element/heading_elements/index.html b/files/zh-cn/web/html/element/heading_elements/index.html index 8c1146e2f0..c8d30b763b 100644 --- a/files/zh-cn/web/html/element/heading_elements/index.html +++ b/files/zh-cn/web/html/element/heading_elements/index.html @@ -10,7 +10,7 @@ tags: - 标题 translation_of: Web/HTML/Element/Heading_Elements --- -<p id="Summary"><span class="seoSummary"><strong>HTML <code><h1></code>–<code><h6></code> 标题(Heading)元素</strong>呈现了六个不同的级别的标题，<code><h1></code> 级别最高，而 <code><h6></code> 级别最低。</span></p> +<p id="Summary"><span class="seoSummary"><strong>HTML <code><h1></code>–<code><h6></code> 标题 (Heading) 元素</strong>呈现了六个不同的级别的标题，<code><h1></code> 级别最高，而 <code><h6></code> 级别最低。</span></p> <div>{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}</div> @@ -32,7 +32,7 @@ translation_of: Web/HTML/Element/Heading_Elements </tr> <tr> <th scope="row">允许的父元素</th> - <td>任何接受流内容的元素；不要把它作为 {{HTMLElement("hgroup")}} 元素的子元素, 这种做法已经被废弃了。</td> + <td>任何接受流内容的元素；不要把它作为 {{HTMLElement("hgroup")}} 元素的子元素，这种做法已经被废弃了。</td> </tr> <tr> <th scope="row">允许的 ARIA roles</th> @@ -50,7 +50,7 @@ translation_of: Web/HTML/Element/Heading_Elements <p>该元素包含所有<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局特性</a>。</p> <div class="blockIndicator note"> -<p>align属性已废弃；不要继续使用它。</p> +<p>align 属性已废弃；不要继续使用它。</p> </div> <h2 id="使用要点">使用要点</h2> diff --git a/files/zh-cn/web/html/element/hgroup/index.html b/files/zh-cn/web/html/element/hgroup/index.html index fe8045aad3..c7849284bf 100644 --- a/files/zh-cn/web/html/element/hgroup/index.html +++ b/files/zh-cn/web/html/element/hgroup/index.html @@ -59,8 +59,8 @@ translation_of: Web/HTML/Element/hgroup <h2 id="使用笔记">使用笔记</h2> <div class="note"> -<p><strong>注意: </strong>本元素已经从HTML5（W3C）规范中删除，但是它仍旧在 WHATWG 的 HTML 版本里。大多数浏览器都部分地实现，所以它不太可能消失。 <br> - 然而，考虑到<hgroup>元素的一个关键存在目标是明确HTML规范中如何显示标题的轮廓算法，但因为其轮廓算法(outline algorithm)未在任何浏览器中实现，因此 <code><hgroup> 语义仍旧是理论上的建议。</code><br> +<p><strong>注意：</strong>本元素已经从 HTML5（W3C）规范中删除，但是它仍旧在 WHATWG 的 HTML 版本里。大多数浏览器都部分地实现，所以它不太可能消失。 <br> + 然而，考虑到<hgroup>元素的一个关键存在目标是明确 HTML 规范中如何显示标题的轮廓算法，但因为其轮廓算法 (outline algorithm) 未在任何浏览器中实现，因此 <code><hgroup> 语义仍旧是理论上的建议。</code><br> HTML5 (W3C) 规范提供了如何标记<a href="http://www.w3.org/TR/html5/common-idioms.html#sub-head">副标题，小标题，可选标题和标语</a>（Subheadings, subtitles, alternative titles and taglines）的建议。</p> </div> diff --git a/files/zh-cn/web/html/element/hr/index.html b/files/zh-cn/web/html/element/hr/index.html index 0cb5efd486..0c7690f993 100644 --- a/files/zh-cn/web/html/element/hr/index.html +++ b/files/zh-cn/web/html/element/hr/index.html @@ -16,7 +16,7 @@ translation_of: Web/HTML/Element/hr -<p>在HTML的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。所以如果想画一条横线，请使用适当的css样式来修饰。</p> +<p>在 HTML 的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。所以如果想画一条横线，请使用适当的 css 样式来修饰。</p> <div>{{EmbedInteractiveExample("pages/tabbed/hr.html", "tabbed-shorter")}}</div> @@ -26,10 +26,10 @@ translation_of: Web/HTML/Element/hr <ul class="htmlelt"> <li><dfn><a href="/zh-cn/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">流式元素</a>.</li> - <li><dfn>允许的内容</dfn>无, 是一个 {{Glossary("空元素")}}.</li> - <li><dfn>标签省略</dfn>必须有开始标签, 不能有结束标签。</li> + <li><dfn>允许的内容</dfn>无，是一个 {{Glossary("空元素")}}.</li> + <li><dfn>标签省略</dfn>必须有开始标签，不能有结束标签。</li> <li><dfn>允许的父元素</dfn> 所有接受<a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">流式元素</a>的元素。</li> - <li><dfn>DOM接口</dfn> {{domxref("HTMLHRElement")}}</li> + <li><dfn>DOM 接口</dfn> {{domxref("HTMLHRElement")}}</li> </ul> <h2 id="属性">属性</h2> @@ -38,7 +38,7 @@ translation_of: Web/HTML/Element/hr <dl> <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> - <dd>设置对齐方式. 如果没有值, 默认值为 <code>left。</code></dd> + <dd>设置对齐方式。如果没有值，默认值为 <code>left。</code></dd> <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt> <dd>使用颜色名或十六进制设置颜色。</dd> <dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt> diff --git a/files/zh-cn/web/html/element/html/index.html b/files/zh-cn/web/html/element/html/index.html index 5cec5dc19f..5d9b8a62e7 100644 --- a/files/zh-cn/web/html/element/html/index.html +++ b/files/zh-cn/web/html/element/html/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTML/Element/html --- <p>{{HTMLRef}}</p> -<p><strong>HTML <code><html></code> 元素 </strong>表示一个HTML文档的根（顶级元素），所以它也被称为<em>根元素</em>。所有其他元素必须是此元素的后代。</p> +<p><strong>HTML <code><html></code> 元素 </strong>表示一个 HTML 文档的根（顶级元素），所以它也被称为<em>根元素</em>。所有其他元素必须是此元素的后代。</p> <table class="properties"> <tbody> @@ -47,9 +47,9 @@ translation_of: Web/HTML/Element/html <dl> <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt> - <dd>指定一个 资源清单的URI，指示应在本地缓存的资源。请参阅 <a href="/zh-CN/docs/HTML/Using_the_application_cache">使用应用程序缓存</a> 获取详细信息。</dd> + <dd>指定一个 资源清单的 URI，指示应在本地缓存的资源。请参阅 <a href="/zh-CN/docs/HTML/Using_the_application_cache">使用应用程序缓存</a> 获取详细信息。</dd> <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt> - <dd>指定控制当前文档的HTML版本{{glossary("DTD", "文档类型定义")}} 。这个属性已不再需要，因为这在文档类型声明中是多余的版本信息。</dd> + <dd>指定控制当前文档的 HTML 版本{{glossary("DTD", "文档类型定义")}} 。这个属性已不再需要，因为这在文档类型声明中是多余的版本信息。</dd> <dt>{{htmlattrdef("xmlns")}} </dt> <dd> <p>指派文档的 XML 命名空间。默认的值是<code>"http://www.w3.org/1999/xhtml"</code>。这在 XHTML 中是必要的，而在 HTML 中则是可选的。</p> @@ -68,7 +68,7 @@ translation_of: Web/HTML/Element/html <h2 id="可访问性">可访问性</h2> -<p><font><font>在</font></font><code>html</code><font><font>元素</font><font>上</font></font><font><font>提供具有</font></font><a href="https://www.ietf.org/rfc/bcp/bcp47.txt" rel="noopener"><font><font>有效IETF标识语言标记</font></font></a><font><font>的</font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-lang">lang</a></code><font><font>属性，将有助于屏幕阅读技术确定要陈述的正确语言。标识语言标签应描述页面大部分内容使用的语言。没有它，屏幕阅读器通常会默认使用操作系统的设置语言，这可能会导致错误陈述。</font></font></p> +<p><font><font>在</font></font><code>html</code><font><font>元素</font><font>上</font></font><font><font>提供具有</font></font><a href="https://www.ietf.org/rfc/bcp/bcp47.txt" rel="noopener"><font><font>有效 IETF 标识语言标记</font></font></a><font><font>的</font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-lang">lang</a></code><font><font>属性，将有助于屏幕阅读技术确定要陈述的正确语言。标识语言标签应描述页面大部分内容使用的语言。没有它，屏幕阅读器通常会默认使用操作系统的设置语言，这可能会导致错误陈述。</font></font></p> <h2 id="Specifications" name="Specifications">规范</h2> @@ -89,7 +89,7 @@ translation_of: Web/HTML/Element/html <tr> <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}</td> <td>{{Spec2('HTML5 W3C')}}</td> - <td>为manifest属性增加支持 （后来不赞成）。弃用 <code>version</code> 属性</td> + <td>为 manifest 属性增加支持（后来不赞成）。弃用 <code>version</code> 属性</td> </tr> <tr> <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}</td> diff --git a/files/zh-cn/web/html/element/i/index.html b/files/zh-cn/web/html/element/i/index.html index f2f858af56..b415ade597 100644 --- a/files/zh-cn/web/html/element/i/index.html +++ b/files/zh-cn/web/html/element/i/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/i --- <h2 id="概述">概述</h2> -<p><strong>HTML元素 <code><i></code></strong> 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。</p> +<p><strong>HTML 元素 <code><i></code></strong> 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。</p> <ul class="htmlelt"> <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">Content catergories</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</li> diff --git a/files/zh-cn/web/html/element/iframe/index.html b/files/zh-cn/web/html/element/iframe/index.html index f67d286d24..ff3a806853 100644 --- a/files/zh-cn/web/html/element/iframe/index.html +++ b/files/zh-cn/web/html/element/iframe/index.html @@ -11,13 +11,13 @@ translation_of: Web/HTML/Element/iframe --- <div>{{HTMLRef}}</div> -<p><strong>HTML内联框架元素 (<code><iframe></code>)</strong> 表示嵌套的<span class="seoSummary">{{Glossary("browsing context")}}</span>。它能够将另一个HTML页面嵌入到当前页面中。</p> +<p><strong>HTML 内联框架元素 (<code><iframe></code>)</strong> 表示嵌套的<span class="seoSummary">{{Glossary("browsing context")}}</span>。它能够将另一个 HTML 页面嵌入到当前页面中。</p> <div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</div> -<div class="hidden">这个示例的源代码存储在GitHub仓库中。如果你想给这个项目贡献代码，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>仓库并给我们提交 pull request。</div> +<div class="hidden">这个示例的源代码存储在 GitHub 仓库中。如果你想给这个项目贡献代码，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>仓库并给我们提交 pull request。</div> -<p>每个嵌入的浏览上下文（embedded browsing context）都有自己的<a href="/zh-CN/docs/Web/API/History">会话历史记录(session history)</a>和<a href="/zh-CN/docs/Web/API/Document">DOM树</a>。包含嵌入内容的浏览上下文称为<em><dfn>父级</dfn>浏览上下文</em>。顶级浏览上下文（没有父级）通常是由 {{domxref("Window")}} 对象表示的浏览器窗口。</p> +<p>每个嵌入的浏览上下文（embedded browsing context）都有自己的<a href="/zh-CN/docs/Web/API/History">会话历史记录 (session history)</a>和<a href="/zh-CN/docs/Web/API/Document">DOM 树</a>。包含嵌入内容的浏览上下文称为<em><dfn>父级</dfn>浏览上下文</em>。顶级浏览上下文（没有父级）通常是由 {{domxref("Window")}} 对象表示的浏览器窗口。</p> <div class="blockIndicator warning"> <p>页面上的每个<code><iframe></code>都需要增加内存和其它计算资源，这是因为每个浏览上下文都拥有完整的文档环境。虽然理论上来说你能够在代码中写出来无限多的<code><iframe></code>，但是你最好还是先看看这么做会不会导致某些性能问题。</p> @@ -46,7 +46,7 @@ translation_of: Web/HTML/Element/iframe <dt>{{htmlattrdef("csp")}} {{experimental_inline}}</dt> <dd>对嵌入的资源配置<a href="/zh-CN/docs/Web/HTTP/CSP">内容安全策略</a>。 查看 {{domxref("HTMLIFrameElement.csp")}} 获取详情。</dd> <dt>{{htmlattrdef("height")}}</dt> - <dd>以CSS像素格式<span style="line-height: inherit;">{{HTMLVersionInline(5)}}，或像素格式{{HTMLVersionInline(4.01)}}，或百分比格式指定frame的高度。默认值为<code>150</code>。</span></dd> + <dd>以 CSS 像素格式<span style="line-height: inherit;">{{HTMLVersionInline(5)}}，或像素格式{{HTMLVersionInline(4.01)}}，或百分比格式指定 frame 的高度。默认值为<code>150</code>。</span></dd> <dt id="name-attribute">{{htmlattrdef("importance")}} {{experimental_inline}}</dt> <dd>表示 <code><iframe> </code>的 <code>src</code> 属性指定的资源的加载优先级。允许的值有： <dl> @@ -67,16 +67,16 @@ translation_of: Web/HTML/Element/iframe <li><code>no-referrer-when-downgrade</code> (default): 向不受 {{Glossary("TLS")}} ({{Glossary("HTTPS")}}) 保护的 {{Glossary("origin")}} 发送请求时，不发送 {{HTTPHeader("Referer")}} 首部。</li> <li><code>origin</code>: referrer 首部中仅包含来源页面的源。换言之，仅包含来源页面的 <a href="https://developer.mozilla.org/en-US/docs/Archive/Mozilla/URIScheme">scheme</a>, {{Glossary("host")}}, 以及 {{Glossary("port")}}。</li> <li><code>origin-when-cross-origin</code>: 发起跨域请求时，仅在 referrer 中包含来源页面的源。发起同源请求时，仍然会在 referrer 中包含来源页面在服务器上的路径信息。</li> - <li><code>same-origin</code>: 对于 {{Glossary("Same-origin policy", "same origin")}} （同源）请求，发送 referrer 首部，否则不发送。</li> + <li><code>same-origin</code>: 对于 {{Glossary("Same-origin policy", "same origin")}}（同源）请求，发送 referrer 首部，否则不发送。</li> <li><code>strict-origin</code>: 仅当被请求页面和来源页面具有相同的协议安全等级时才发送 referrer 首部（比如从采用 HTTPS 协议的页面请求另一个采用 HTTPS 协议的页面）。如果被请求页面的协议安全等级较低，则不会发送 referrer 首部（比如从采用 HTTPS 协议的页面请求采用 HTTP 协议的页面）。</li> <li><code>strict-origin-when-cross-origin</code>: 当发起同源请求时，在 referrer 首部中包含完整的 URL。当被请求页面与来源页面不同源但是有相同协议安全等级时（比如 HTTPS→HTTPS），在 referrer 首部中仅包含来源页面的源。当被请求页面的协议安全等级较低时（比如 HTTPS→HTTP），不发送 referrer 首部。</li> - <li><code>unsafe-url</code>: 始终在 referrer 首部中包含源以及路径 （但不包括 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>，<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">密码</a>，或<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">用户名</a>）。<strong>这个值是不安全的</strong>, 因为这样做会暴露受 TLS 保护的资源的源和路径信息。</li> + <li><code>unsafe-url</code>: 始终在 referrer 首部中包含源以及路径（但不包括 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>，<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">密码</a>，或<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">用户名</a>）。<strong>这个值是不安全的</strong>, 因为这样做会暴露受 TLS 保护的资源的源和路径信息。</li> </ul> </dd> <dt>{{htmlattrdef("sandbox")}}</dt> <dd>该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。属性值可以为空字符串（这种情况下会启用所有限制），也可以是用空格分隔的一系列指定的字符串。有效的值有： <ul> - <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}}: 允许在没有征求用户同意的情况下下载文件.</li> + <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}}: 允许在没有征求用户同意的情况下下载文件。</li> <li><code>allow-forms</code>: 允许嵌入的浏览上下文提交表单。如果没有使用该关键字，则无法提交表单。</li> <li><code>allow-modals</code>: 允许嵌入的浏览上下文打开模态窗口。</li> <li><code>allow-orientation-lock</code>: 允许嵌入的浏览上下文锁定屏幕方向（译者注：比如智能手机、平板电脑的水平朝向或垂直朝向）。</li> @@ -92,21 +92,21 @@ translation_of: Web/HTML/Element/iframe </ul> <div class="note"> - <p><strong>注意:</strong></p> + <p><strong>注意：</strong></p> <ul> <li>当被嵌入的文档与主页面同源时，强烈建议不要同时使用 <code>allow-scripts</code> 和 <code>allow-same-origin</code>。如果同时使用，嵌入的文档就可以通过代码删除 <code>sandbox</code> 属性，如此，就安全性而言还不如不用<code>sandbox</code>。</li> <li>如果攻击者可以在沙箱化的 <code>iframe</code> 之外展示内容，例如用户在新标签页中打开内联框架，那么沙箱化也就没有意义了。建议把这种内容放置到独立的专用域中，以减小可能的损失。</li> - <li>沙箱属性(sandbox)在Internet Explorer 9及更早的版本上不被支持。</li> + <li>沙箱属性 (sandbox) 在 Internet Explorer 9 及更早的版本上不被支持。</li> </ul> </div> </dd> <dt>{{htmlattrdef("src")}}</dt> - <dd>被嵌套的页面的 URL 地址。使用 <code>about:blank</code> 值可以嵌入一个遵从<a href="/zh-CN/docs/Web/Security/Same-origin_policy">同源策略</a>的空白页。在 Firefox （version 65及更高版本）、基于 Chromium 的浏览器、Safari/iOS 中使用代码移除 <code>iframe</code> 的 <code>src</code> 属性（例如通过 {{domxref("Element.removeAttribute()")}} ）会导致 <code>about:blank</code> 被载入 frame。</dd> + <dd>被嵌套的页面的 URL 地址。使用 <code>about:blank</code> 值可以嵌入一个遵从<a href="/zh-CN/docs/Web/Security/Same-origin_policy">同源策略</a>的空白页。在 Firefox（version 65 及更高版本）、基于 Chromium 的浏览器、Safari/iOS 中使用代码移除 <code>iframe</code> 的 <code>src</code> 属性（例如通过 {{domxref("Element.removeAttribute()")}} ）会导致 <code>about:blank</code> 被载入 frame。</dd> <dt>{{htmlattrdef("srcdoc")}} {{HTMLVersionInline(5)}} only</dt> - <dd>该属性是一段HTML代码，这些代码会被渲染到 iframe 中。如果浏览器不支持 <code>srcdoc</code> 属性，则会渲染 <code>src</code> 属性表示的内容。</dd> + <dd>该属性是一段 HTML 代码，这些代码会被渲染到 iframe 中。如果浏览器不支持 <code>srcdoc</code> 属性，则会渲染 <code>src</code> 属性表示的内容。</dd> <dt>{{htmlattrdef("width")}}</dt> - <dd>以CSS像素格式<span style="line-height: inherit;">{{HTMLVersionInline(5)}}</span><span style="line-height: inherit;">，或以像素格式</span><span style="line-height: inherit;">{{HTMLVersionInline(4.01)}}，或以百分比格式指定的 frame 的宽度。默认值是<code>300</code>。</span></dd> + <dd>以 CSS 像素格式<span style="line-height: inherit;">{{HTMLVersionInline(5)}}</span><span style="line-height: inherit;">，或以像素格式</span><span style="line-height: inherit;">{{HTMLVersionInline(4.01)}}，或以百分比格式指定的 frame 的宽度。默认值是<code>300</code>。</span></dd> </dl> <h3 id="不赞成使用的属性"><span style="line-height: inherit;">不赞成使用的属性</span></h3> @@ -150,7 +150,7 @@ translation_of: Web/HTML/Element/iframe <p>内联的框架，就像 {{HTMLElement("frame")}} 元素一样，会被包含在 {{domxref("window.frames")}} 伪数组（类数组的对象）中。</p> -<p>有了 DOM {{domxref("HTMLIFrameElement")}} 对象，脚本可以通过 {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} 访问内联框架的 {{domxref("window")}} 对象。 {{domxref("HTMLIFrameElement.contentDocument", "contentDocument")}} 属性则引用了 <code><iframe></code> 内部的 <code>document</code> 元素，(等同于使用contentWindow.document），但IE8-不支持。</p> +<p>有了 DOM {{domxref("HTMLIFrameElement")}} 对象，脚本可以通过 {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} 访问内联框架的 {{domxref("window")}} 对象。 {{domxref("HTMLIFrameElement.contentDocument", "contentDocument")}} 属性则引用了 <code><iframe></code> 内部的 <code>document</code> 元素，(等同于使用 contentWindow.document），但 IE8-不支持。</p> <p>在框架内部，脚本可以通过 {{domxref("window.parent")}} 引用父窗口对象。</p> @@ -225,7 +225,7 @@ translation_of: Web/HTML/Element/iframe <tr> <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td> <td>{{Spec2('Referrer Policy')}}</td> - <td>新增属性: <code>referrerpolicy</code></td> + <td>新增属性：<code>referrerpolicy</code></td> </tr> <tr> <td>{{SpecName('HTML WHATWG', 'iframe-embed-object.html#the-iframe-element', '<iframe>')}}</td> diff --git a/files/zh-cn/web/html/element/image/index.html b/files/zh-cn/web/html/element/image/index.html index e8d260adec..52dc8c95cf 100644 --- a/files/zh-cn/web/html/element/image/index.html +++ b/files/zh-cn/web/html/element/image/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTML/Element/image <p>HTML <code><image>元素曾经是一个试验性的元素，用来显示图片。它从未被实现过，请使用标准的</code>{{HTMLElement("img")}}元素。</p> <div class="note"> -<p><strong>不要使用它!<em> </em></strong>要显示图片，请使用标准的{{HTMLElement("img")}}.</p> +<p><strong>不要使用它！<em> </em></strong>要显示图片，请使用标准的{{HTMLElement("img")}}.</p> </div> -<p>直到Firefox 22，虽然image仍然没有被支持，但是该元素被关联到{{domxref("HTMLSpanElement")}}。现在已经修正，image按照规范要求，被关联到{{domxref("HTMLElement")}} 。</p> +<p>直到 Firefox 22，虽然 image 仍然没有被支持，但是该元素被关联到{{domxref("HTMLSpanElement")}}。现在已经修正，image 按照规范要求，被关联到{{domxref("HTMLElement")}} 。</p> diff --git a/files/zh-cn/web/html/element/img/index.html b/files/zh-cn/web/html/element/img/index.html index 66069f464a..d2c06c26c2 100644 --- a/files/zh-cn/web/html/element/img/index.html +++ b/files/zh-cn/web/html/element/img/index.html @@ -84,7 +84,7 @@ translation_of: Web/HTML/Element/img <dt><code>anonymous</code></dt> <dd>执行一个跨域请求（比如，有 {{httpheader("Origin")}} {{glossary("HTTP")}} header）。但是没有发送证书（比如，没有 cookie，没有 <a href="https://tools.ietf.org/html/rfc5280">X.509 证书</a>，没有 <a href="/zh-CN/docs/Web/HTTP/Authentication#Basic_authentication_scheme">HTTP 基本授权认证</a>）。如果服务器没有把证书给到源站（没有设置 {{httpheader("Access-Control-Allow-Origin")}} HTTP 头），图像会被污染，而且它的使用会被限制。</dd> <dt><code>use-credentials</code></dt> - <dd>一个有证书的跨域请求（比如，有 <code>Origin</code> HTTP header）被发送 （比如，cookie, 一份证书，或者 HTTP 基本验证信息）。如果服务器没有给源站发送证书（通过 <code>Access-Control-Allow-Credentials</code> HTTP header），图像将会被污染，且它的使用会受限制。</dd> + <dd>一个有证书的跨域请求（比如，有 <code>Origin</code> HTTP header）被发送（比如，cookie，一份证书，或者 HTTP 基本验证信息）。如果服务器没有给源站发送证书（通过 <code>Access-Control-Allow-Credentials</code> HTTP header），图像将会被污染，且它的使用会受限制。</dd> </dl> 当用户并未显式使用本属性时，默认不使用 CORS 发起请求（例如，不会向服务器发送<code>原有的</code>HTTP 头部信息），可防止其在 {{HTMLElement('canvas')}} 中的使用。如果无效，默认当做 <code>anonymous</code> 关键字生效。更多信息，请查看 <a href="/zh-CN/docs/Web/HTML/Attributes/crossorigin">CORS 属性设置</a> 。</dd> <dt>{{htmlattrdef("decoding")}}</dt> @@ -167,7 +167,7 @@ translation_of: Web/HTML/Element/img <li>指向图像的 {{glossary("URL")}}。</li> <li>可选地，再加一个空格之后，附加以下的其一： <ul> - <li>一个宽度描述符，这是一个正整数，后面紧跟 '<code>w</code>' 符号。该整数宽度除以sizes属性给出的资源（source）大小来计算得到有效的像素密度，即换算成和x描述符等价的值。</li> + <li>一个宽度描述符，这是一个正整数，后面紧跟 '<code>w</code>' 符号。该整数宽度除以 sizes 属性给出的资源（source）大小来计算得到有效的像素密度，即换算成和 x 描述符等价的值。</li> <li>一个像素密度描述符，这是一个正浮点数，后面紧跟 '<code>x</code>' 符号。</li> </ul> </li> @@ -272,7 +272,7 @@ translation_of: Web/HTML/Element/img <h3 id="使用_srcset_和_sizes_属性">使用 <code>srcset</code> 和 <code>sizes</code> 属性</h3> -<p>在支持 <code>srcset</code> 的用户代理中，当使用 <code>w</code> 描述符时，src 属性会被忽略。当匹配了媒体条件 <code>(min-width: 600px)</code> 时，图像将宽 200px，否则宽 50vw（视图宽度的50%）。</p> +<p>在支持 <code>srcset</code> 的用户代理中，当使用 <code>w</code> 描述符时，src 属性会被忽略。当匹配了媒体条件 <code>(min-width: 600px)</code> 时，图像将宽 200px，否则宽 50vw（视图宽度的 50%）。</p> <pre class="brush: html notranslate"> <img src="clock-demo-200px.png" alt="Clock" @@ -294,7 +294,7 @@ translation_of: Web/HTML/Element/img <h3 id="使用有实际意义的备用描述">使用有实际意义的备用描述</h3> -<p><code>alt</code> 属性的值应该清晰、简洁地描述图像的内容。它不应该描述“图像的存在”，或仅仅包含图像的文件名。如果因为图像没有等价的文本描述， <code>alt</code> 属性只得不写或留白，那么可以考虑使用其他方法来呈现图像试图传递的内容。</p> +<p><code>alt</code> 属性的值应该清晰、简洁地描述图像的内容。它不应该描述 “图像的存在”，或仅仅包含图像的文件名。如果因为图像没有等价的文本描述， <code>alt</code> 属性只得不写或留白，那么可以考虑使用其他方法来呈现图像试图传递的内容。</p> <h4 id="不要">不要</h4> @@ -322,7 +322,7 @@ translation_of: Web/HTML/Element/img <p><code>title</code> 属性也不该被用作一幅图片在 <code>alt</code> 之外的补充说明信息。如果一幅图片需要小标题，使用 <code><a href="/zh-CN/docs/Web/HTML/Element/figure">figure</a></code> 或 <code><a href="/zh-CN/docs/Web/HTML/Element/figcaption">figcaption</a></code> 元素。</p> -<p><code>title</code> 元素的值一般作为提示条(tooltip)呈现给用户，在光标于图片上停下后显示出来。尽管这<em>确实</em>能给用户提供更多的信息，您不该假定用户真的能看到：用户可能只有键盘或触摸屏。如果要把特别重要的信息提供给用户，选择上面提供的一种方法将其内联显示，而不是使用 <code>title</code> 。</p> +<p><code>title</code> 元素的值一般作为提示条 (tooltip) 呈现给用户，在光标于图片上停下后显示出来。尽管这<em>确实</em>能给用户提供更多的信息，您不该假定用户真的能看到：用户可能只有键盘或触摸屏。如果要把特别重要的信息提供给用户，选择上面提供的一种方法将其内联显示，而不是使用 <code>title</code> 。</p> <ul> <li><a class="external" href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li> diff --git a/files/zh-cn/web/html/element/index.html b/files/zh-cn/web/html/element/index.html index fcacea3cfa..a299b73f36 100644 --- a/files/zh-cn/web/html/element/index.html +++ b/files/zh-cn/web/html/element/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTML/Element <p>此页面列出了所有使用{{Glossary("Tag","标签")}}创建的 {{Glossary("HTML")}} {{Glossary("Element","元素")}}。它们已被按照功能进行分组，以便您更轻松地找到想要的内容。同时，侧边栏中也按照字母排序列出了所有元素。</p> <div class="note"> -<p>若想获知更多关于HTML元素、属性的基本信息，请查阅 <a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML">HTML 介绍</a>中的相关内容。</p> +<p>若想获知更多关于 HTML 元素、属性的基本信息，请查阅 <a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML">HTML 介绍</a>中的相关内容。</p> </div> <h2 id="主根元素">主根元素</h2> @@ -34,7 +34,7 @@ translation_of: Web/HTML/Element <h2 id="内容分区">内容分区</h2> -<p>内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。</p> +<p>内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉 (header)、页脚 (footer)、导航 (nav) 和标题 (h1~h6) 等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。</p> <p>{{HTMLRefTable("HTML Sections")}}</p> diff --git a/files/zh-cn/web/html/element/input/button/index.html b/files/zh-cn/web/html/element/input/button/index.html index de6f8031bb..61a701e3ae 100644 --- a/files/zh-cn/web/html/element/input/button/index.html +++ b/files/zh-cn/web/html/element/input/button/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/input/button --- <p>{{HTMLRef}}</p> -<p><span class="seoSummary"><code><strong>元素<input type="button"></strong></code> 是 <strong><code><input></code></strong> 元素的特殊版本，被用来创建一个没有默认值的可点击按钮。 它已经在HTML5被 <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><button></a>元素取代</strong></span></p> +<p><span class="seoSummary"><code><strong>元素<input type="button"></strong></code> 是 <strong><code><input></code></strong> 元素的特殊版本，被用来创建一个没有默认值的可点击按钮。 它已经在 HTML5 被 <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><button></a>元素取代</strong></span></p> <p>浏览器生成一个控件没有默认值的可点击按钮。该按钮上可有任何标签。该控件在不同的浏览器上，可能有不同的样式。</p> @@ -198,7 +198,7 @@ translation_of: Web/HTML/Element/input/button <tr> <th>Feature</th> <th>Android</th> - <th>Firefox 移动版(Gecko)</th> + <th>Firefox 移动版 (Gecko)</th> <th>IE 移动版</th> <th>Opera 移动版</th> <th>Safari 移动版</th> @@ -247,5 +247,5 @@ translation_of: Web/HTML/Element/input/button <ul> <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> - <li>HTML5的替代方式为 <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><button></a></strong> 元素</li> + <li>HTML5 的替代方式为 <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><button></a></strong> 元素</li> </ul> diff --git a/files/zh-cn/web/html/element/input/checkbox/index.html b/files/zh-cn/web/html/element/input/checkbox/index.html index 4f349c2449..aeb7784bd1 100644 --- a/files/zh-cn/web/html/element/input/checkbox/index.html +++ b/files/zh-cn/web/html/element/input/checkbox/index.html @@ -3,10 +3,10 @@ title: <input type="checkbox"> slug: Web/HTML/Element/Input/checkbox translation_of: Web/HTML/Element/input/checkbox --- -<p><span class="seoSummary">HTML input元素 <strong><code><input type="checkbox"></code></strong> 允许你为表单中（或不在表单中）的提交项选择一个单一值。</span></p> +<p><span class="seoSummary">HTML input 元素 <strong><code><input type="checkbox"></code></strong> 允许你为表单中（或不在表单中）的提交项选择一个单一值。</span></p> <div class="note"> -<p><strong>注意</strong>： 若表单提交时，checkbox未勾选，则提交的值并非为value=unchecked；此时的值不会被提交到服务器。</p> +<p><strong>注意</strong>： 若表单提交时，checkbox 未勾选，则提交的值并非为 value=unchecked；此时的值不会被提交到服务器。</p> </div> <h2 id="属性">属性</h2> @@ -16,13 +16,13 @@ translation_of: Web/HTML/Element/input/checkbox <dl> <dt>{{htmlattrdef("checked")}}</dt> <dd> - <p>当<strong>type</strong>属性的值为<code>checkbox时</code>, 这个属性的存在表示input是否默认被选中。你可以将该属性设置为<code>checked="checked"，</code>或更简单地只设置为<code>checked。</code></p> + <p>当<strong>type</strong>属性的值为<code>checkbox 时</code>, 这个属性的存在表示 input 是否默认被选中。你可以将该属性设置为<code>checked="checked"，</code>或更简单地只设置为<code>checked。</code></p> </dd> <dt>{{htmlattrdef("value")}}</dt> - <dd>指定input的值。如果省略，获取该元素的值的结果为字符串"on"。<br> - 请注意，如果value值发生改变后页面重新加载，Gecko和IE<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">会忽略HTML源代码中设置的value值</a>。</dd> + <dd>指定 input 的值。如果省略，获取该元素的值的结果为字符串"on"。<br> + 请注意，如果 value 值发生改变后页面重新加载，Gecko 和 IE<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">会忽略 HTML 源代码中设置的 value 值</a>。</dd> <dt>{{htmlattrdef("indeterminate")}}</dt> - <dd>指定checkbox处于不定状态（在大多数平台，这样会产生一个划过checkbox的横线）。</dd> + <dd>指定 checkbox 处于不定状态（在大多数平台，这样会产生一个划过 checkbox 的横线）。</dd> </dl> <h2 id="Example">示例</h2> @@ -37,7 +37,7 @@ translation_of: Web/HTML/Element/input/checkbox </p> </pre> -<p>以上代码将产生2个checkbox，如下所示：</p> +<p>以上代码将产生 2 个 checkbox，如下所示：</p> <p>{{EmbedLiveSample("Example")}}</p> diff --git a/files/zh-cn/web/html/element/input/color/index.html b/files/zh-cn/web/html/element/input/color/index.html index 0645e125e6..dbf1d2c6c6 100644 --- a/files/zh-cn/web/html/element/input/color/index.html +++ b/files/zh-cn/web/html/element/input/color/index.html @@ -3,15 +3,15 @@ title: <input type="color"> slug: Web/HTML/Element/Input/color translation_of: Web/HTML/Element/input/color --- -<p><strong><code><input type="color"></code>元素</strong>是{{HTMLElement("input")}}元素中的一个特定种类，用来创建一个允许用户使用颜色选择器，或输入兼容CSS语法的颜色代码的区域。（不支持Alpha通道）</p> +<p><strong><code><input type="color"></code>元素</strong>是{{HTMLElement("input")}}元素中的一个特定种类，用来创建一个允许用户使用颜色选择器，或输入兼容 CSS 语法的颜色代码的区域。（不支持 Alpha 通道）</p> -<p>此元素的外观会因浏览器不同而不同，可能是简单的验证颜色输入格式的文本框，也可能使用平台原生或自定义样式的颜色选择器。其UI除要能接收文本格式的颜色外，未要求其他特性。（<a href="https://www.w3.org/TR/html5/forms.html#color-state-%28type=color%29">更多信息</a>）</p> +<p>此元素的外观会因浏览器不同而不同，可能是简单的验证颜色输入格式的文本框，也可能使用平台原生或自定义样式的颜色选择器。其 UI 除要能接收文本格式的颜色外，未要求其他特性。（<a href="https://www.w3.org/TR/html5/forms.html#color-state-%28type=color%29">更多信息</a>）</p> <table class="properties"> <tbody> <tr> <th scope="row"><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories">内容分类</a></th> - <td><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Flow_content">流动区域</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Form_listed">列表</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Form_submittable">可提交</a>, <a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_categories#Form_resettable">可重置</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Form-associated_content">表单相关元素</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Phrasing_content">短语内容</a>, 可标记元素, 可触摸元素。</td> + <td><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Flow_content">流动区域</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Form_listed">列表</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Form_submittable">可提交</a>, <a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_categories#Form_resettable">可重置</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Form-associated_content">表单相关元素</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Phrasing_content">短语内容</a>, 可标记元素，可触摸元素。</td> </tr> <tr> <th scope="row">允许的内容</th> @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/input/color <td>任何接受<a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Phrasing_content">短语内容</a>的元素。</td> </tr> <tr> - <th scope="row">DOM接口</th> + <th scope="row">DOM 接口</th> <td>{{domxref("HTMLInputElement")}}</td> </tr> </tbody> @@ -38,17 +38,17 @@ translation_of: Web/HTML/Element/input/color <dl> <dt>{{htmlattrdef("autocomplete")}}{{HTMLVersionInline("5")}}</dt> - <dd>设置颜色区域的autocomplete值。如果为true，则将自动填充颜色选择器上次存储的值。</dd> + <dd>设置颜色区域的 autocomplete 值。如果为 true，则将自动填充颜色选择器上次存储的值。</dd> <dt>{{htmlattrdef("autofocus")}}{{HTMLVersionInline("5")}}</dt> <dd>此布尔值属性使你可以指定当页面加载时，表单区域是否应当获得输入焦点。除非用户的操作覆盖这个属性，例如：在其他区域内进行输入。在整个文档中，只有一个元素可以拥有<strong>autofocus</strong>属性，值为布尔值。</dd> <dt>{{htmlattrdef("disabled")}}</dt> <dd> - <p>此布尔值标明颜色选择其是否不可用于交互。另外，disabled时的值不会随表单提交。</p> + <p>此布尔值标明颜色选择其是否不可用于交互。另外，disabled 时的值不会随表单提交。</p> </dd> <dt>{{htmlattrdef("name")}}</dt> - <dd>随表单一起提交的颜色选择器的name。</dd> + <dd>随表单一起提交的颜色选择器的 name。</dd> <dt>{{htmlattrdef("value")}}</dt> - <dd>颜色选择器的value，指定颜色选择器默认选择的颜色。input的value值必须是长度为7的字符串，以#开始，包含16进制格式的颜色值。例如：#FF0000为红色的16进制值。</dd> + <dd>颜色选择器的 value，指定颜色选择器默认选择的颜色。input 的 value 值必须是长度为 7 的字符串，以#开始，包含 16 进制格式的颜色值。例如：#FF0000 为红色的 16 进制值。</dd> </dl> <h2 id="使用">使用</h2> @@ -69,11 +69,11 @@ translation_of: Web/HTML/Element/input/color <p>{{EmbedLiveSample("Providing_a_default_color", 700, 30)}}</p> -<p>下面的图片展示了macOS平台Chrome浏览器的颜色选择器：</p> +<p>下面的图片展示了 macOS 平台 Chrome 浏览器的颜色选择器：</p> <p><img alt="This is how an input type color looks on Mac and within Chrome" src="https://mdn.mozillademos.org/files/12311/Input_Type_Color_sample.png" style="height: 400px; width: 318px;"></p> -<p>如果你没有手动指定的话，元素的默认值为<code>"#000000"</code>，即黑色。输入必须为7个字符，以"#"符号开始，后跟代表红、绿、蓝的十六进制字符各2个，形如<code>"#rrggbb"</code>。如果你想输入的颜色是其他格式（比如CSS中的<code>rgb()</code>或<code>rgba()</code>记法），在设定<code>value</code>值时必须将其转换为这种格式。</p> +<p>如果你没有手动指定的话，元素的默认值为<code>"#000000"</code>，即黑色。输入必须为 7 个字符，以"#"符号开始，后跟代表红、绿、蓝的十六进制字符各 2 个，形如<code>"#rrggbb"</code>。如果你想输入的颜色是其他格式（比如 CSS 中的<code>rgb()</code>或<code>rgba()</code>记法），在设定<code>value</code>值时必须将其转换为这种格式。</p> <h3 id="监听颜色变化">监听颜色变化</h3> @@ -103,21 +103,21 @@ colorPicker<span class="punctuation token">.</span><span class="function token"> <h3 id="实现差异">实现差异</h3> -<p>如上文所说，如果浏览器不提供选色器，此元素将会显示为一个具备输入验证功能的文本框。例如，在Safari 10.1中，你将会看到以下内容：</p> +<p>如上文所说，如果浏览器不提供选色器，此元素将会显示为一个具备输入验证功能的文本框。例如，在 Safari 10.1 中，你将会看到以下内容：</p> <p><img alt="Screenshot of the example taken in Safari." src="https://mdn.mozillademos.org/files/14899/input-color-safari.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> -<p>而相同的内容在Firefox 55下则会显示成：</p> +<p>而相同的内容在 Firefox 55 下则会显示成：</p> <p><img alt="Screenshot of the example taken in Firefox 55 for macOS" src="https://mdn.mozillademos.org/files/14901/input-color-firefox.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> -<p>如果点击元素，则会弹出选色器，在此例中，为macOS平台的选色器。</p> +<p>如果点击元素，则会弹出选色器，在此例中，为 macOS 平台的选色器。</p> <p><img alt="Screenshot of the element with the color picker open in Firefox Mac." src="https://mdn.mozillademos.org/files/14903/input-with-picker-firefox-mac.png" style="border-style: solid; border-width: 1px; height: 405px; width: 682px;"></p> <h2 id="验证">验证</h2> -<p>如果当前的{{Glossary("user agent")}}下，用户输入无法转换为7个字符的十六进制RGB形式，会被判定为非法输入。在这种情况下，{{cssxref(":invalid")}}伪类会生效。</p> +<p>如果当前的{{Glossary("user agent")}}下，用户输入无法转换为 7 个字符的十六进制 RGB 形式，会被判定为非法输入。在这种情况下，{{cssxref(":invalid")}}伪类会生效。</p> <h2 id="规范">规范</h2> @@ -217,4 +217,4 @@ colorPicker<span class="punctuation token">.</span><span class="function token"> </table> </div> -<p id="footnote_1">[1] 在Windows Touch上尚未实现。</p> +<p id="footnote_1">[1] 在 Windows Touch 上尚未实现。</p> diff --git a/files/zh-cn/web/html/element/input/date/index.html b/files/zh-cn/web/html/element/input/date/index.html index 70199c42e2..1ec9f893fd 100644 --- a/files/zh-cn/web/html/element/input/date/index.html +++ b/files/zh-cn/web/html/element/input/date/index.html @@ -5,9 +5,9 @@ translation_of: Web/HTML/Element/input/date --- <p>{{HTMLRef}}</p> -<p>日期类{{htmlelement("input")}}元素会创建一个让用户输入一个日期的输入区域，可以使用自动验证内容的文本框，也可以使用特殊的日期选择器界面。结果值包括年份，月份和日期，但不包括时间。<a href="/en-US/docs/Web/HTML/Element/input/time">time</a> 和 <a href="/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a>输入类支持time 和 date/time 输入。</p> +<p>日期类{{htmlelement("input")}}元素会创建一个让用户输入一个日期的输入区域，可以使用自动验证内容的文本框，也可以使用特殊的日期选择器界面。结果值包括年份，月份和日期，但不包括时间。<a href="/en-US/docs/Web/HTML/Element/input/time">time</a> 和 <a href="/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a>输入类支持 time 和 date/time 输入。</p> -<p>通常来说控件的UI界面因浏览器的不同而有变化，到目前为止此控件还不被所有浏览器支持，具体细节请参阅{{anch("Browser compatibility")}}（浏览器兼容性）。在不支持的浏览器当中，控件因此会被优雅的降级为普通的<a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a>输入框。</p> +<p>通常来说控件的 UI 界面因浏览器的不同而有变化，到目前为止此控件还不被所有浏览器支持，具体细节请参阅{{anch("Browser compatibility")}}（浏览器兼容性）。在不支持的浏览器当中，控件因此会被优雅的降级为普通的<a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a>输入框。</p> <div id="Basic_example"> <pre class="brush: html"><input id="date" type="date"></pre> @@ -15,15 +15,15 @@ translation_of: Web/HTML/Element/input/date <p>{{ EmbedLiveSample('Basic_example', 600, 40) }}</p> </div> -<p>其中，Chrome/Opera浏览器为用户选择日期提供了一个普通的操作界面，看起来是下面的样子：</p> +<p>其中，Chrome/Opera 浏览器为用户选择日期提供了一个普通的操作界面，看起来是下面的样子：</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p> -<p>Edge的日期控件看起来是这样子的:</p> +<p>Edge 的日期控件看起来是这样子的：</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p> -<p>Firefox的日期控件看起来是这样子的:</p> +<p>Firefox 的日期控件看起来是这样子的：</p> <p><img alt="Datepicker UI in firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p> @@ -62,16 +62,16 @@ translation_of: Web/HTML/Element/input/date <p>有一点需要注意的是，在格式方面显示的日期与实际的不一样 — 显示的日期格式取决于用户浏览器的区域设定，而日期值的格式始终为 <code>yyyy-mm-dd。</code></p> -<p>当然你也可以在JavaScript中通过input元素的 {{domxref("HTMLInputElement.value", "value")}} 属性获取和设置日期值，例如:</p> +<p>当然你也可以在 JavaScript 中通过 input 元素的 {{domxref("HTMLInputElement.value", "value")}} 属性获取和设置日期值，例如：</p> <pre class="brush: js">var dateControl = document.querySelector('input[type="date"]'); dateControl.value = '2017-06-01';</pre> -<p>这行代码查找类型为date的第一个input元素，并且将其值设置为2017-06-01（2017年6月1日）</p> +<p>这行代码查找类型为 date 的第一个 input 元素，并且将其值设置为 2017-06-01（2017 年 6 月 1 日）</p> <h2 id="使用日期输入控件">使用日期输入控件</h2> -<p>日期控件，一开始听起来可能觉得很方便。它们不仅提供了一个简单的日期选择UI界面，还规范了发往后台的数据格式，无论用户在什么区域。但是，由于浏览器支持的限制，<input type="date"> 仍然存在一些问题。</p> +<p>日期控件，一开始听起来可能觉得很方便。它们不仅提供了一个简单的日期选择 UI 界面，还规范了发往后台的数据格式，无论用户在什么区域。但是，由于浏览器支持的限制，<input type="date"> 仍然存在一些问题。</p> <p>我们将探寻一些关于 <input type="date"> 基础的和更复杂的的用法，然后就以后减轻浏览器支持问题提供建议（请参阅{{anch("Handling browser support")}}）。</p> @@ -101,25 +101,25 @@ dateControl.value = '2017-06-01';</pre> <p>{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}</p> -<p>在结果中我们可以看到，只有2017年4月份的日期可选 — 输入框中可以编辑的部分只有 “日” 这部分，并且超出4月份以外的日期不能通过日期控件的选择小部件选择。</p> +<p>在结果中我们可以看到，只有 2017 年 4 月份的日期可选 — 输入框中可以编辑的部分只有 “日” 这部分，并且超出 4 月份以外的日期不能通过日期控件的选择小部件选择。</p> <div class="note"> -<p><strong>注意</strong>: 您应该可以使用step属性来改变每次最佳日期时步进（增加值）的天数（例如：或许你只希望使周六可以选）。但是，在编写本文的任何实现中，这似乎并不奏效。</p> +<p><strong>注意</strong>: 您应该可以使用 step 属性来改变每次最佳日期时步进（增加值）的天数（例如：或许你只希望使周六可以选）。但是，在编写本文的任何实现中，这似乎并不奏效。</p> </div> <h3 id="控制输入框大小">控制输入框大小</h3> -<p><code><input type="date"></code> 不支持表单属性 {{htmlattrxref("size", "input")}}. 对于大小需求，你必须祈求于 <a href="/en-US/docs/Web/CSS">CSS</a> 的帮助.</p> +<p><code><input type="date"></code> 不支持表单属性 {{htmlattrxref("size", "input")}}. 对于大小需求，你必须祈求于 <a href="/en-US/docs/Web/CSS">CSS</a> 的帮助。</p> <h2 id="验证">验证</h2> -<p>默认情况下, <code><input type="date"></code> 对输入的值不会做任何校验。 UI实现通常不会让你输入任何不适日期的东西 — 这一点很有帮助 — 但是你任然可以留空或者 (在被优雅降级为 <code>text</code> 类型的输入框) 输入一个不合法的值 (例如： 4月32号)。</p> +<p>默认情况下，<code><input type="date"></code> 对输入的值不会做任何校验。 UI 实现通常不会让你输入任何不适日期的东西 — 这一点很有帮助 — 但是你任然可以留空或者 (在被优雅降级为 <code>text</code> 类型的输入框) 输入一个不合法的值 (例如： 4 月 32 号)。</p> -<p>如果你使用 {{htmlattrxref("min", "input")}} 和 {{htmlattrxref("min", "input")}} 属性去限制可用日期 (参见 {{anch("Setting maximum and minimum dates")}}),对于支持的浏览器来说如果你尝试提交一个超出给定范围的日期，那么它将抛出一个错误。然而, 你必须检查这些结果以确保他们在这些日期范围内, 因为只有在用户设备上完全支持日期选择器的情况下，才能执行这些操作。</p> +<p>如果你使用 {{htmlattrxref("min", "input")}} 和 {{htmlattrxref("min", "input")}} 属性去限制可用日期 (参见 {{anch("Setting maximum and minimum dates")}}),对于支持的浏览器来说如果你尝试提交一个超出给定范围的日期，那么它将抛出一个错误。然而， 你必须检查这些结果以确保他们在这些日期范围内， 因为只有在用户设备上完全支持日期选择器的情况下，才能执行这些操作。</p> -<p>另外， 您可以使用 {{htmlattrxref("required", "input")}} 属性强制填写日期, 如果你尝试提交一个未填写日期的域那么将会抛出错误。 至少在大多数浏览器是可以工作的。</p> +<p>另外， 您可以使用 {{htmlattrxref("required", "input")}} 属性强制填写日期， 如果你尝试提交一个未填写日期的域那么将会抛出错误。 至少在大多数浏览器是可以工作的。</p> -<p>让我们看一个例子 — 我们设置了日期的最大和最小值, 并且设定为必填:</p> +<p>让我们看一个例子 — 我们设置了日期的最大和最小值， 并且设定为必填：</p> <pre class="brush: html"><form> <div> @@ -132,15 +132,15 @@ dateControl.value = '2017-06-01';</pre> </div> </form></pre> -<p>如果你尝试提交一个不完整日期的表单 (或者超出日期选择设定范围), 浏览器将会出现一个错误。 尝试一下这个例子:</p> +<p>如果你尝试提交一个不完整日期的表单 (或者超出日期选择设定范围), 浏览器将会出现一个错误。 尝试一下这个例子：</p> <p>{{ EmbedLiveSample('Validation', 600, 100) }}</p> -<p>这个截图是为那些浏览器不支持的人准备的:</p> +<p>这个截图是为那些浏览器不支持的人准备的：</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> -<p>这是上面例子使用的css。我们用 {{cssxref(":valid")}} and {{cssxref(":invalid")}} 属性去命名，以区别当前值的有效性 。我们必须把图标放在 input 旁边的 {{htmlelement("span")}}里面，而并不是它本身, 因为在Chrome中被放置在表单中生成的内容不能有效的样式化或者显示。</p> +<p>这是上面例子使用的 css。我们用 {{cssxref(":valid")}} and {{cssxref(":invalid")}} 属性去命名，以区别当前值的有效性 。我们必须把图标放在 input 旁边的 {{htmlelement("span")}}里面，而并不是它本身， 因为在 Chrome 中被放置在表单中生成的内容不能有效的样式化或者显示。</p> <pre class="brush: css">div { margin-bottom: 10px; @@ -164,18 +164,18 @@ input:valid+span:after { }</pre> <div class="warning"> -<p><strong>重要</strong>: HTML表单验证并不能替代脚本去确保输入值是有效的格式。一些人很容易调整HTML绕过验证，或者完全移除验证.。当然一些人也可能很容易的绕过你的验证，直接把数据提交到你的服务器。如果你的服务器无法验证它接收到的数据，当提交了不正确的数据之后可能会导致灾难性的后果 (或者数据量太大，错误的类型等等).</p> +<p><strong>重要</strong>: HTML 表单验证并不能替代脚本去确保输入值是有效的格式。一些人很容易调整 HTML 绕过验证，或者完全移除验证.。当然一些人也可能很容易的绕过你的验证，直接把数据提交到你的服务器。如果你的服务器无法验证它接收到的数据，当提交了不正确的数据之后可能会导致灾难性的后果 (或者数据量太大，错误的类型等等).</p> </div> <h2 id="手持設備浏览器支持">手持設備浏览器支持</h2> -<p>正如刚才提到的，在编写本文时使用日期输入的主要问题就是 {anch("Browser compatibility", "browser support")}} （浏览器支持）. 举一个例子, 在安卓系统的Firefox中选择器是这样子的:</p> +<p>正如刚才提到的，在编写本文时使用日期输入的主要问题就是 {anch("Browser compatibility", "browser support")}}（浏览器支持）. 举一个例子， 在安卓系统的 Firefox 中选择器是这样子的：</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p> -<p>在不支持的浏览器上会被降级为文本输入框, 但这同时带来了用户界面不统一（呈现的控件不同）和数据处理方面的问题。</p> +<p>在不支持的浏览器上会被降级为文本输入框， 但这同时带来了用户界面不统一（呈现的控件不同）和数据处理方面的问题。</p> -<p>第二个问题更为严重；正如我们早些时候提到的，对于日期输入框， 实际值总是会被格式化微 <code>yyyy-mm-dd</code>. 另一方面对于文本输入框，默认情况下浏览器并不知道日期格式应该怎么样被格式化， 而且人们书写日期格式的方式有很多，例如:</p> +<p>第二个问题更为严重；正如我们早些时候提到的，对于日期输入框， 实际值总是会被格式化微 <code>yyyy-mm-dd</code>. 另一方面对于文本输入框，默认情况下浏览器并不知道日期格式应该怎么样被格式化， 而且人们书写日期格式的方式有很多，例如：</p> <ul> <li><code>ddmmyyyy</code></li> @@ -186,7 +186,7 @@ input:valid+span:after { <li><code>Month dd yyyy</code></li> </ul> -<p> 解决这些问题的方法之一就是放置一个 {{htmlattrxref("pattern", "input")}} 属性在日期控件上 。即使日期输入不使用它，文本输入将会用到。例如， 请尝试在不支持的浏览器上看下面的例子:</p> +<p> 解决这些问题的方法之一就是放置一个 {{htmlattrxref("pattern", "input")}} 属性在日期控件上 。即使日期输入不使用它，文本输入将会用到。例如， 请尝试在不支持的浏览器上看下面的例子：</p> <pre class="brush: html"><form> <div> @@ -201,7 +201,7 @@ input:valid+span:after { <p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p> -<p>如果你尝试提交，如果你的输入不符合正则表达式 <code>nnn-nn-nn</code>（<code>n</code> 是0到9的数字）， 你将会看到浏览器显示一个错误(并且高亮显示输入无效) 。 当然，这并不能阻止人们输入无效的日期或者格式不正确的日期，例如<code>yyyy-dd-mm</code> (而我们想要的 <code>yyyy-mm-dd</code>)。因此我们仍然有一个问题。</p> +<p>如果你尝试提交，如果你的输入不符合正则表达式 <code>nnn-nn-nn</code>（<code>n</code> 是 0 到 9 的数字）， 你将会看到浏览器显示一个错误 (并且高亮显示输入无效) 。 当然，这并不能阻止人们输入无效的日期或者格式不正确的日期，例如<code>yyyy-dd-mm</code> (而我们想要的 <code>yyyy-mm-dd</code>)。因此我们仍然有一个问题。</p> <div class="hidden"> <pre class="brush: css">div { @@ -229,17 +229,17 @@ input:valid + span:after { }</pre> </div> -<p>目前以跨浏览器方式处理表单中日期的最佳方式是让用户在单独的控件中输入 日 ， 月 和 年 ({{htmlelement("select")}} 元素正越来越受欢迎; 请看下面的实现), 或者使用JavaScript库， 例如 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>.</p> +<p>目前以跨浏览器方式处理表单中日期的最佳方式是让用户在单独的控件中输入 日 ， 月 和 年 ({{htmlelement("select")}} 元素正越来越受欢迎; 请看下面的实现), 或者使用 JavaScript 库， 例如 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>.</p> <h2 id="例子">例子</h2> -<p>在这个例子中，我们创建了两组用于选择日期的UI元素: 一个本地 <code><input type="date"></code> 选择器 和 一组三个 {{htmlelement("select")}} 元素用于选择不支持本地输入的旧浏览器中的日期。</p> +<p>在这个例子中，我们创建了两组用于选择日期的 UI 元素: 一个本地 <code><input type="date"></code> 选择器 和 一组三个 {{htmlelement("select")}} 元素用于选择不支持本地输入的旧浏览器中的日期。</p> <p>{{ EmbedLiveSample('Examples', 600, 100) }}</p> <h3 id="HTML">HTML</h3> -<p>HTML看起来像这样:</p> +<p>HTML 看起来像这样：</p> <pre class="brush: html"><form> <div class="nativeDatePicker"> @@ -279,7 +279,7 @@ input:valid + span:after { </div> </form></pre> -<p>月份是写死的 (因为月份是固定的), 而日和年的值是根据当前选择的月份和年份（日的判定需要月份和年份）以及当年 动态生成的(请参阅下面的代码注释，他们详细的阐释了这些功能是如何工作的。)</p> +<p>月份是写死的 (因为月份是固定的), 而日和年的值是根据当前选择的月份和年份（日的判定需要月份和年份）以及当年 动态生成的 (请参阅下面的代码注释，他们详细的阐释了这些功能是如何工作的。)</p> <div class="hidden"> <pre class="brush: css">input:invalid+span:after { @@ -295,7 +295,7 @@ input:valid+span:after { <h3 id="JavaScript">JavaScript</h3> -<p>代码的另一部分也可能是最有意思的部分那就是特征检验代码 — 去检测浏览器是否支持 <code><input type="date"></code>, 我们创建一个新的 {{htmlelement("input")}} 元素, 设置它的 <code>type</code> 为 <code>date</code>,然后立刻检查它的类型 —不支持的浏览器将会返回 <code>text</code>, 因为 <code>date</code> 类型会被优雅的降级为<code>text</code>。如果 <code><input type="date"></code> 不被浏览器支持, 我们隐藏本地选取器并用备用选取器UI ({{htmlelement("select")}}) 替代.</p> +<p>代码的另一部分也可能是最有意思的部分那就是特征检验代码 — 去检测浏览器是否支持 <code><input type="date"></code>, 我们创建一个新的 {{htmlelement("input")}} 元素， 设置它的 <code>type</code> 为 <code>date</code>,然后立刻检查它的类型 —不支持的浏览器将会返回 <code>text</code>, 因为 <code>date</code> 类型会被优雅的降级为<code>text</code>。如果 <code><input type="date"></code> 不被浏览器支持， 我们隐藏本地选取器并用备用选取器 UI ({{htmlelement("select")}}) 替代。</p> <pre class="brush: js">// define variables var nativePicker = document.querySelector('.nativeDatePicker'); @@ -412,7 +412,7 @@ daySelect.onchange = function() { }</pre> <div class="note"> -<p><strong>注意</strong>: 请记住有些年份有53周 (请看 <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a>)! 当你开发应用程序时需要考虑到这一点。</p> +<p><strong>注意</strong>: 请记住有些年份有 53 周 (请看 <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a>)! 当你开发应用程序时需要考虑到这一点。</p> </div> <h2 id="规范">规范</h2> @@ -500,6 +500,6 @@ daySelect.onchange = function() { <h2 id="也可以参见">也可以参见</h2> <ul> - <li>通用的 {{HTMLElement("input")}} 元素 和 用于操作他的接口, {{domxref("HTMLInputElement")}}</li> + <li>通用的 {{HTMLElement("input")}} 元素 和 用于操作他的接口，{{domxref("HTMLInputElement")}}</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li> </ul> diff --git a/files/zh-cn/web/html/element/input/datetime-local/index.html b/files/zh-cn/web/html/element/input/datetime-local/index.html index 5f94c41650..367e59de60 100644 --- a/files/zh-cn/web/html/element/input/datetime-local/index.html +++ b/files/zh-cn/web/html/element/input/datetime-local/index.html @@ -5,11 +5,11 @@ translation_of: Web/HTML/Element/input/datetime-local --- <div>{{HTMLRef}}</div> -<p>{{htmlelement("input")}} 元素的 <code><strong>datetime-local </strong></code>类型创建让用户便捷输入日期和时间的输入控件，包括“年”、“月”、“日”，以及“时”和“分”。</p> +<p>{{htmlelement("input")}} 元素的 <code><strong>datetime-local </strong></code>类型创建让用户便捷输入日期和时间的输入控件，包括 “年”、“月”、“日”，以及 “时” 和 “分”。</p> <p>{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}}</p> -<p>所使用的是用户所在时区。此控件的样式因浏览器而异；目前支持的浏览器为数不多，桌面端仅有 Chrome/Opera 和 Edge，移动端大多数较新版本的览器提供能使用的实现方案。在其它的浏览器中，此类型会降级显示为简单的 <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code> 控件.</p> +<p>所使用的是用户所在时区。此控件的样式因浏览器而异；目前支持的浏览器为数不多，桌面端仅有 Chrome/Opera 和 Edge，移动端大多数较新版本的览器提供能使用的实现方案。在其它的浏览器中，此类型会降级显示为简单的 <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code> 控件。</p> <p>控件不支持输入秒。</p> @@ -31,7 +31,7 @@ translation_of: Web/HTML/Element/input/datetime-local <tbody> <tr> <td><strong>{{anch("Value")}}</strong></td> - <td>一个表示日期和时间的 {{domxref("DOMString")}} （本地时区）或空值。</td> + <td>一个表示日期和时间的 {{domxref("DOMString")}}（本地时区）或空值。</td> </tr> <tr> <td><strong>事件</strong></td> @@ -64,10 +64,10 @@ translation_of: Web/HTML/Element/input/datetime-local <p>一件需要注意的事情是显示的日期时间的格式与实际 <code>value</code> 里的格式不同，显示的日期和时间格式以用户操作系统所的区域设置信息为准，而控件的日期/时间值 <code>value</code> 总是 <code>yyyy-MM-ddThh:mm</code> 格式。例如，当上例中的值被提供到服务器之后，将会像这样 <code>partydate=2017-06-01T08:30</code>.</p> <div class="note"> -<p>另外请注意，如果这样的数据以 HTTP <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> 提交，时间部分的冒号“:”需要编码之后才能放在 URL 参数中，例如 <code>partydate=2017-06-01T08%3A30</code>。编码方法请参见 {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} 。</p> +<p>另外请注意，如果这样的数据以 HTTP <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> 提交，时间部分的冒号 “:” 需要编码之后才能放在 URL 参数中，例如 <code>partydate=2017-06-01T08%3A30</code>。编码方法请参见 {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} 。</p> </div> -<p>你也可以在 JavaScript中使用 {{domxref("HTMLInputElement.value")}} 属性来获取和设置日期的值，例如：</p> +<p>你也可以在 JavaScript 中使用 {{domxref("HTMLInputElement.value")}} 属性来获取和设置日期的值，例如：</p> <pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="datetime-local"]'); dateControl.value = '2017-06-01T08:30';</pre> @@ -103,8 +103,8 @@ dateControl.value = '2017-06-01T08:30';</pre> <p>结果如下：</p> <ul> - <li>只有“2017年6月”可供选择 —— 只有“日期”部分的值可修改，并且6月以外的日期不能被选到日期控件内</li> - <li>视你所使用的浏览器，你或许会发现时间选择控件中特定值以外的时间可能不可选（如 Edge），或是无效（参见 {{anch("校验")}}）但仍可选（如Chrome）</li> + <li>只有 “2017 年 6 月” 可供选择 —— 只有 “日期” 部分的值可修改，并且 6 月以外的日期不能被选到日期控件内</li> + <li>视你所使用的浏览器，你或许会发现时间选择控件中特定值以外的时间可能不可选（如 Edge），或是无效（参见 {{anch("校验")}}）但仍可选（如 Chrome）</li> </ul> <div class="note"> @@ -145,7 +145,7 @@ dateControl.value = '2017-06-01T08:30';</pre> <h2 id="校验">校验</h2> -<p>默认情况下 <code><input type="datetime-local"></code> 不对输入内容进行验证。用户交互（UI）的实现通常不允许你输入不是日期/时间的值 —— 这非常有用 —— 但用户也仍会在不填写任何值的情况下提交数据，或者输入一个不无效的日期/时间（如：4月32日）。</p> +<p>默认情况下 <code><input type="datetime-local"></code> 不对输入内容进行验证。用户交互（UI）的实现通常不允许你输入不是日期/时间的值 —— 这非常有用 —— 但用户也仍会在不填写任何值的情况下提交数据，或者输入一个不无效的日期/时间（如：4 月 32 日）。</p> <p>你可以使用 {{htmlattrxref("min", "input")}} 及 {{htmlattrxref("max", "input")}} 来限制可选择的日期（参见 anch("设定日期时间的最大值和最小值")），并且使用 {{htmlattrxref("required", "input")}} 属性使日期/时间为强制的输入项。这样做的结果是，可以使相应的浏览器在你输入一个超出范围的日期或不输入时显示一个错误信息。</p> @@ -170,7 +170,7 @@ dateControl.value = '2017-06-01T08:30';</pre> <p><img alt="" src="https://mdn.mozillademos.org/files/14957/datetime-local-error.png" style="display: block; height: 100px; margin: 0px auto; width: 558px;"></p> -<p>这里有上面例子的CSS。在这里我们使用 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}} CSS 属性来控制当前值正确和错误的样式。我们需要这两个图标放一个 {{htmlelement("span")}} 到输入元素后面，而非使用输入元素本身，因为在 Chrome 下生成的内容会被放在表单控件里面，不能设置样式或显示出来。</p> +<p>这里有上面例子的 CSS。在这里我们使用 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}} CSS 属性来控制当前值正确和错误的样式。我们需要这两个图标放一个 {{htmlelement("span")}} 到输入元素后面，而非使用输入元素本身，因为在 Chrome 下生成的内容会被放在表单控件里面，不能设置样式或显示出来。</p> <pre class="brush: css notranslate">div { margin-bottom: 10px; @@ -194,7 +194,7 @@ input:valid+span:after { }</pre> <div class="warning"> -<p><strong>重要提示：</strong>HTML 表单验证并不能取代脚本校验输入数据是否符合格式要求。有人可以非常容易地修改 HTML 以绕过验证，亦或是完全删除这个元素。同样可能的是，有人可以非常轻易做到完全绕过 HTML 而直接向你的服务器提交数据。如果你服务器代码不对接收到的数据进行校验，灾难性的打击就可能发生在这些错误格式数据提交的时候 （或是数据太大，或是格式错误，等等）。</p> +<p><strong>重要提示：</strong>HTML 表单验证并不能取代脚本校验输入数据是否符合格式要求。有人可以非常容易地修改 HTML 以绕过验证，亦或是完全删除这个元素。同样可能的是，有人可以非常轻易做到完全绕过 HTML 而直接向你的服务器提交数据。如果你服务器代码不对接收到的数据进行校验，灾难性的打击就可能发生在这些错误格式数据提交的时候（或是数据太大，或是格式错误，等等）。</p> </div> <h2 id="处理浏览器支持">处理浏览器支持</h2> @@ -213,8 +213,8 @@ input:valid+span:after { <li><code>mm/dd/yyyy</code></li> <li><code>dd-mm-yyyy</code></li> <li><code>mm-dd-yyyy</code></li> - <li><code>mm-dd-yyyy hh:mm</code> （12小时制）</li> - <li><code>mm-dd-yyyy HH:mm</code> （24小时制）</li> + <li><code>mm-dd-yyyy hh:mm</code> （12 小时制）</li> + <li><code>mm-dd-yyyy HH:mm</code> （24 小时制）</li> <li>等等</li> </ul> @@ -236,7 +236,7 @@ input:valid+span:after { <p>{{ EmbedLiveSample('处理浏览器支持', 600, 100) }}</p> -<p>你试一下提交数据，如果你输入的内容不满足 <code>nnnn-nn-nnTnn:nn</code> 格式（n为0 ~ 9的数字），你会看到浏览器显示一条错误信息（并高亮输入框标记为无效），但这并不能妨碍用户输入无效的日期或是不正确的日期和时间。</p> +<p>你试一下提交数据，如果你输入的内容不满足 <code>nnnn-nn-nnTnn:nn</code> 格式（n 为 0 ~ 9 的数字），你会看到浏览器显示一条错误信息（并高亮输入框标记为无效），但这并不能妨碍用户输入无效的日期或是不正确的日期和时间。</p> <p>然而什么样的用户会去理解这样一个他们要输入的日期和时间格式呢？</p> @@ -268,15 +268,15 @@ input:valid + span:after { }</pre> </div> -<p>目前处理跨浏览器表单中输入日期的最好办法是让用户分别在不同的控件中输入年、月、日和时间（{{htmlelement("select")}} 元素很流行 —— 参见下面的实现），或者使用 JavaScript库，如 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> 及 <a href="http://timepicker.co/">jQuery timepicker plugin</a>。</p> +<p>目前处理跨浏览器表单中输入日期的最好办法是让用户分别在不同的控件中输入年、月、日和时间（{{htmlelement("select")}} 元素很流行 —— 参见下面的实现），或者使用 JavaScript 库，如 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> 及 <a href="http://timepicker.co/">jQuery timepicker plugin</a>。</p> <h2 id="例子">例子</h2> -<p>在这个例子中，我们创建两套UI元素来选择日期时间 —— 一套原生的 <code><input type="datetime-local"></code> ，另一套是一系列 {{htmlelement("select")}} 元素以在不支持原生控件的浏览器下选择日期和时间。</p> +<p>在这个例子中，我们创建两套 UI 元素来选择日期时间 —— 一套原生的 <code><input type="datetime-local"></code> ，另一套是一系列 {{htmlelement("select")}} 元素以在不支持原生控件的浏览器下选择日期和时间。</p> <p>{{ EmbedLiveSample('例子', 600, 140) }}</p> -<p>HTML代码如下：</p> +<p>HTML 代码如下：</p> <pre class="brush: html notranslate"><form> <div class="nativeDateTimePicker"> @@ -359,7 +359,7 @@ input:valid+span:after { }</pre> </div> -<p>代码的另一部分也许会引起一定的兴趣，那就是功能检查代码 —— 检查浏览器是否支持 <code><input type="datetime-local"></code>，我们可以创建一个新的 {{htmlelement("input")}} 元素，设置它的 <code>type</code> 为 <code>datetime-local</code>，然后立即检查它被设置的类型。不支持 <code>datetime-local</code> 的浏览器返回 <code>text</code>，因为这就是 <code>datetime-local</code> 要回退的类型。 如果 <code><input type="datetime-local"></code> 不被支持，我们隐藏原生的控件并显示备用的控件UI （{{htmlelement("select")}}）来替代。</p> +<p>代码的另一部分也许会引起一定的兴趣，那就是功能检查代码 —— 检查浏览器是否支持 <code><input type="datetime-local"></code>，我们可以创建一个新的 {{htmlelement("input")}} 元素，设置它的 <code>type</code> 为 <code>datetime-local</code>，然后立即检查它被设置的类型。不支持 <code>datetime-local</code> 的浏览器返回 <code>text</code>，因为这就是 <code>datetime-local</code> 要回退的类型。 如果 <code><input type="datetime-local"></code> 不被支持，我们隐藏原生的控件并显示备用的控件 UI （{{htmlelement("select")}}）来替代。</p> <pre class="brush: js notranslate">// define variables var nativePicker = document.querySelector('.nativeDateTimePicker'); @@ -497,7 +497,7 @@ daySelect.onchange = function() { }</pre> <div class="note"> -<p><strong>注意：请记住某些年份有53个星期（见</strong><a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a><strong>）！当你在开发产品应用时应当考虑这个问题。</strong></p> +<p><strong>注意：请记住某些年份有 53 个星期（见</strong><a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a><strong>）！当你在开发产品应用时应当考虑这个问题。</strong></p> </div> <h2 id="规范">规范</h2> diff --git a/files/zh-cn/web/html/element/input/email/index.html b/files/zh-cn/web/html/element/input/email/index.html index 98fa9af208..0814303bc3 100644 --- a/files/zh-cn/web/html/element/input/email/index.html +++ b/files/zh-cn/web/html/element/input/email/index.html @@ -12,10 +12,10 @@ translation_of: Web/HTML/Element/input/email --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">带有 <code><strong>"email"</strong></code> (电子邮箱)类型标记的输入框元素({{HTMLElement("input")}})能够让用户输入或编辑一个电子邮箱地址，此外，如果指定了{{htmlattrxref("multiple", "input")}}属性，用户还可以输入多个电子邮箱地址。在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址(非空值且符合电子邮箱地址格式).</span> CSS伪标签 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}} 能够在校验后自动应用。</p> +<p><span class="seoSummary">带有 <code><strong>"email"</strong></code> (电子邮箱) 类型标记的输入框元素 ({{HTMLElement("input")}}) 能够让用户输入或编辑一个电子邮箱地址，此外，如果指定了{{htmlattrxref("multiple", "input")}}属性，用户还可以输入多个电子邮箱地址。在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址 (非空值且符合电子邮箱地址格式).</span> CSS 伪标签 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}} 能够在校验后自动应用。</p> <div class="note"> -<p><strong>注意</strong>: 不支持“电子邮件”类型的浏览器可以回退为标准的“文本”输入。</p> +<p><strong>注意</strong>: 不支持 “电子邮件” 类型的浏览器可以回退为标准的 “文本” 输入。</p> </div> <div>{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-standard")}}</div> @@ -72,14 +72,14 @@ translation_of: Web/HTML/Element/input/email -<p>电子邮件地址是网络上最频繁输入的文本数据表格; 登录网站，请求信息，允许订单确认，网络邮件等时使用它们。 因此，“电子邮件”输入类型可以使您作为Web开发人员的工作变得更加容易，因为它可以在构建电子邮件地址的用户界面和逻辑时帮助简化您的工作。 当您使用正确的类型值“email”创建电子邮件输入时，您将自动验证输入的文本是否至少以正确的形式可能是合法的电子邮件地址。 这有助于避免用户输错地址或提供无效地址的情况。</p> +<p>电子邮件地址是网络上最频繁输入的文本数据表格; 登录网站，请求信息，允许订单确认，网络邮件等时使用它们。 因此，“电子邮件” 输入类型可以使您作为 Web 开发人员的工作变得更加容易，因为它可以在构建电子邮件地址的用户界面和逻辑时帮助简化您的工作。 当您使用正确的类型值 “email” 创建电子邮件输入时，您将自动验证输入的文本是否至少以正确的形式可能是合法的电子邮件地址。 这有助于避免用户输错地址或提供无效地址的情况。</p> <p>然而，重要的是要注意，这不足以确保指定的文本是实际存在的电子邮件地址，对应于站点的用户，或者以任何其他方式可接受。 它只是确保将字段的值正确格式化为电子邮件地址。</p> <div class="note"> -<p><strong>注意：记住用户可以在幕后修改HTML也很重要，因此您的站点不得出于任何安全目的使用此验证。 您必须验证所提供文本可能具有任何安全隐患的任何事务的服务器端的电子邮件地址。</strong></p> +<p><strong>注意：记住用户可以在幕后修改 HTML 也很重要，因此您的站点不得出于任何安全目的使用此验证。 您必须验证所提供文本可能具有任何安全隐患的任何事务的服务器端的电子邮件地址。</strong></p> </div> <h3 id="A_simple_email_input">A simple email input</h3> @@ -192,12 +192,12 @@ translation_of: Web/HTML/Element/input/email <p>There are two levels of content validation available for <code>"email"</code> inputs. First, there's the standard level of validation offered to all {{HTMLElement("input")}}s, which automatically ensures that the contents meet the requirements to be a valid email address. But there's also the option to add additional filtering to ensure that your own specialized needs are met, if you have any.</p> <div class="warning"> -<p><strong>重要提示：HTML表单验证不能替代确保输入的数据格式正确的脚本。 对于某些人来说，调整HTML非常容易，因为它允许他们绕过验证，或者完全删除它。 某人也可以完全绕过您的HTML并将数据直接提交给您的服务器。 如果您的服务器端代码无法验证它收到的数据，则当数据格式不正确（或数据太大，类型错误等等）输入数据库时，灾难可能会发生。</strong></p> +<p><strong>重要提示：HTML 表单验证不能替代确保输入的数据格式正确的脚本。 对于某些人来说，调整 HTML 非常容易，因为它允许他们绕过验证，或者完全删除它。 某人也可以完全绕过您的 HTML 并将数据直接提交给您的服务器。 如果您的服务器端代码无法验证它收到的数据，则当数据格式不正确（或数据太大，类型错误等等）输入数据库时，灾难可能会发生。</strong></p> </div> <h3 id="Basic_validation">Basic validation</h3> -<p>支持“电子邮件”输入类型的浏览器会自动提供验证，以确保只有符合Internet电子邮件地址标准格式的文本才会输入到输入框中。 实现规范的浏览器应使用与以下正则表达式等效的算法：</p> +<p>支持 “电子邮件” 输入类型的浏览器会自动提供验证，以确保只有符合 Internet 电子邮件地址标准格式的文本才会输入到输入框中。 实现规范的浏览器应使用与以下正则表达式等效的算法：</p> <pre class="brush: js">/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61} [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ diff --git a/files/zh-cn/web/html/element/input/file/index.html b/files/zh-cn/web/html/element/input/file/index.html index c05b5c51e4..e5b6df3c32 100644 --- a/files/zh-cn/web/html/element/input/file/index.html +++ b/files/zh-cn/web/html/element/input/file/index.html @@ -70,7 +70,7 @@ translation_of: Web/HTML/Element/input/file <div class="note"><strong>Note:</strong> <ol> - <li>如果选择了多个文件, 这个值表示第一个已选择文件的路径。JavaScript 可以<a href="/zh-CN/docs/Web/API/File/Using_files_from_web_applications#Getting_information_about_selected_files">通过 input 的 files 属性访问其他文件</a>。</li> + <li>如果选择了多个文件，这个值表示第一个已选择文件的路径。JavaScript 可以<a href="/zh-CN/docs/Web/API/File/Using_files_from_web_applications#Getting_information_about_selected_files">通过 input 的 files 属性访问其他文件</a>。</li> <li>如果没有选择文件，该值为空字符串 <code>""</code>。</li> <li>为了阻止恶意软件猜测文件路径，字符串<a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly">以 C:\fakepath\ 为前缀</a>。</li> </ol> @@ -155,7 +155,7 @@ translation_of: Web/HTML/Element/input/file <p>如果出现布尔属性 <code>webkitdirectory，</code>表示在文件选择器界面中用户只能选择目录。更多细节和示例见 {{domxref("HTMLInputElement.webkitdirectory")}}。</p> <div class="note"> -<p><strong>Note:</strong> 尽管 <code>webkitdirectory</code> 最初仅为基于webkit的浏览器实现，它还在Microsoft Edge和Firefox 50及其后版本中可用。然而，尽管它有相对广泛的支持，它仍然是非标准的。除非你别无选择，否则不要使用它。</p> +<p><strong>Note:</strong> 尽管 <code>webkitdirectory</code> 最初仅为基于 webkit 的浏览器实现，它还在 Microsoft Edge 和 Firefox 50 及其后版本中可用。然而，尽管它有相对广泛的支持，它仍然是非标准的。除非你别无选择，否则不要使用它。</p> </div> </div> @@ -166,7 +166,7 @@ translation_of: Web/HTML/Element/input/file <ul> <li>一个以英文句号（"."）开头的合法的不区分大小写的文件名扩展名。例如： <code>.jpg</code>，<code>.pdf</code> 或 <code>.doc</code>。</li> <li>一个不带扩展名的 MIME 类型字符串。</li> - <li>字符串 <code>audio/*</code>， 表示“任何音频文件”。</li> + <li>字符串 <code>audio/*</code>， 表示 “任何音频文件”。</li> <li>字符串 <code>video/*</code>，表示 “任何视频文件”。</li> <li>字符串 <code>image/*</code>，表示 “任何图片文件”。</li> </ul> @@ -217,7 +217,7 @@ translation_of: Web/HTML/Element/input/file <dt><code>name</code></dt> <dd>文件名。</dd> <dt><code>lastModified</code></dt> - <dd>一个数字，指定文件最后一次修改的日期和时间，以 UNIX 新纪元（1970年1月1日午夜）以来的毫秒数表示。</dd> + <dd>一个数字，指定文件最后一次修改的日期和时间，以 UNIX 新纪元（1970 年 1 月 1 日午夜）以来的毫秒数表示。</dd> <dt><code>lastModifiedDate</code> {{deprecated_inline}}</dt> <dd>一个 {{jsxref("Date")}} 对象，表示文件最后一次修改的日期和时间。<em>这被弃用，并且不应使用。使用 <code>lastModified</code> 作为替代</em>。</dd> <dt><code>size</code></dt> @@ -300,7 +300,7 @@ input.value = "foo"; <p>在本例中，我们将展示一个稍微高级一点的文件选择器，它利用了在 <code>HTMLInputElement.files</code> 属性中可用的文件信息，并且展示了一些聪明的技巧。</p> <div class="note"> -<p><strong>Note</strong>: 你可以在 GitHub 中查看本示例的完整源代码 — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> （<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">在线运行</a>）。我们不会解释 CSS；JavaScript是主要的关注点。</p> +<p><strong>Note</strong>: 你可以在 GitHub 中查看本示例的完整源代码 — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> （<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">在线运行</a>）。我们不会解释 CSS；JavaScript 是主要的关注点。</p> </div> <p>首先，让我们看看 HTML：</p> @@ -376,7 +376,7 @@ form label:active, form button:active { <p>这和我们之前看到的类似 — 没有什么要说明的。</p> -<p>接下来，让我们看一下JavaScript。</p> +<p>接下来，让我们看一下 JavaScript。</p> <p>在脚本的第一行，我们获得了对表单 input 本身和拥有 <code>.preview</code> 类的 {{htmlelement("div")}} 元素的引用。然后，我们隐藏了 {{htmlelement("input")}} 元素 — 我们这样做是因为文件输入往往很难看，难于设计样式，而且在跨浏览器中对它们的设计不一致。你可以通过单击 <code>input</code> 元素来激活它，因此，最好在视觉上隐藏 input 并将 label 设计成按钮的样式，这样用户如果想上传文件就会知道如何与之交互。</p> @@ -396,9 +396,9 @@ input.style.opacity = 0;</pre> <p>每当 <code>updateImageDisplay()</code> 函数被调用时，我们：</p> <ul> - <li>使用一个 {{jsxref("Statements/while", "while")}} 循环来清空preview <code><div></code> 留下的内容。</li> + <li>使用一个 {{jsxref("Statements/while", "while")}} 循环来清空 preview <code><div></code> 留下的内容。</li> <li>获取包含所有已选择文件信息的 {{domxref("FileList")}} 对象，并将其用一个变量 <code>curFiles</code> 保存。</li> - <li>通过检查 <code>curFiles.length</code> 是否等于0来检查是否没有文件被选择。如果是，则用 preview <code><div></code> 输出一条消息，来表示没有选择文件。</li> + <li>通过检查 <code>curFiles.length</code> 是否等于 0 来检查是否没有文件被选择。如果是，则用 preview <code><div></code> 输出一条消息，来表示没有选择文件。</li> <li>如果<em>选择</em>了文件，我们将循环遍历每个文件，并将关于它的信息输出到 preview <code><div></code>。注意事项：</li> <li>我们使用定制的 <code>validFileType()</code> 函数来检查文件的类型是否正确。（例如，用 <code>accept</code> 属性指定的图片类型）。</li> <li>如果是，我们： @@ -509,5 +509,5 @@ function validFileType(file) { <ul> <li><a href="/zh-CN/docs/Web/API/File/Using_files_from_web_applications">在 web 应用中使用文件</a> — 包含许多其它关于 <code><input type="file"></code> 和 <a href="/zh-CN/docs/Web/API/File">File API</a> 的有用示例。</li> - <li><a href="zh-CN/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">CCSS属性兼容性</a></li> + <li><a href="zh-CN/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">CCSS 属性兼容性</a></li> </ul> diff --git a/files/zh-cn/web/html/element/input/hidden/index.html b/files/zh-cn/web/html/element/input/hidden/index.html index a1ed459082..c7a5d72c3d 100644 --- a/files/zh-cn/web/html/element/input/hidden/index.html +++ b/files/zh-cn/web/html/element/input/hidden/index.html @@ -50,7 +50,7 @@ translation_of: Web/HTML/Element/input/hidden </table> <div class="blockIndicator note"> -<p><strong>注意：</strong><code>{{HTMLElement("input")}}</code>和<code><a href="https://developer.mozilla.org/zh-CN/docs/Web/Events/change">change</a></code>事件不适用于此输入类型。隐藏的输入无法获得焦点, 即使使用JavaScript 例如(e.g. <code>hiddenInput.focus()</code>)</p> +<p><strong>注意：</strong><code>{{HTMLElement("input")}}</code>和<code><a href="https://developer.mozilla.org/zh-CN/docs/Web/Events/change">change</a></code>事件不适用于此输入类型。隐藏的输入无法获得焦点， 即使使用 JavaScript 例如 (e.g. <code>hiddenInput.focus()</code>)</p> </div> <h2 id="属性值">属性值</h2> @@ -58,7 +58,7 @@ translation_of: Web/HTML/Element/input/hidden <p><code>{{HTMLElement("input")}}</code>元素的<code>{{htmlattrxref("value", "input")}}</code>属性有<code>{{domxref("DOMString")}}</code>，其中包含您想提交到服务器的隐藏数据尽管您可以通过浏览器开发人员工具编辑该值，但明确的是，用户不能通过用户界面对其编辑或看到。</p> <div class="warning"> -<p><strong>重要提示：</strong>尽管该值未在页面内容中显示给用户，但可以使用任何浏览器的开发人员工具或“查看源代码”功能来查看并进行编辑。 请不要依赖 <code>hidden</code> 输入作为安全表单。</p> +<p><strong>重要提示：</strong>尽管该值未在页面内容中显示给用户，但可以使用任何浏览器的开发人员工具或 “查看源代码” 功能来查看并进行编辑。 请不要依赖 <code>hidden</code> 输入作为安全表单。</p> </div> <h2 id="额外属性">额外属性</h2> @@ -95,11 +95,11 @@ translation_of: Web/HTML/Element/input/hidden <ol> <li>用户决定编辑他们可以控制的某些内容，例如博客文章或产品条目。 他们可以通过按编辑按钮开始。</li> - <li>要被编辑的内容从数据库中提取并加载到HTML表单中，以允许用户进行更改。</li> + <li>要被编辑的内容从数据库中提取并加载到 HTML 表单中，以允许用户进行更改。</li> <li>编辑后，用户提交表单，并将更新后的被数据发送回服务器以在数据库中进行更新。</li> </ol> -<p>在这里的步骤2思路中，要被更新的ID记录保留在隐藏的输入中。 在步骤3中提交表单后，该ID随记录内容自动发送回服务器。 该ID使站点的服务器端组件确切知道哪些记录需要被提交的数据更新的。</p> +<p>在这里的步骤 2 思路中，要被更新的 ID 记录保留在隐藏的输入中。 在步骤 3 中提交表单后，该 ID 随记录内容自动发送回服务器。 该 ID 使站点的服务器端组件确切知道哪些记录需要被提交的数据更新的。</p> <p>您可以在下面的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/hidden#例子">{{anch("例子")}}</a> 部分中看到完整的<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/hidden#例子">示例</a>。</p> @@ -119,9 +119,9 @@ translation_of: Web/HTML/Element/input/hidden <h2 id="例子">例子</h2> -<p>让我们看一下如何使用隐藏输入保存正在被编辑的记录的ID，实现我们先前描述的编辑表单的简单版本（请参阅 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden#Tracking_edited_content">{{anch("Tracking edited content")}}</a></code>）。</p> +<p>让我们看一下如何使用隐藏输入保存正在被编辑的记录的 ID，实现我们先前描述的编辑表单的简单版本（请参阅 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden#Tracking_edited_content">{{anch("Tracking edited content")}}</a></code>）。</p> -<p>编辑表单的HTML可能看起来像这样：</p> +<p>编辑表单的 HTML 可能看起来像这样：</p> <pre class="brush: html"><form> <div> @@ -140,7 +140,7 @@ This is the content of my excellent blog post. I hope you enjoy it! <input type="hidden" id="postId" name="postId" value="34657"> </form></pre> -<p>我们还添加一些简单的CSS：</p> +<p>我们还添加一些简单的 CSS：</p> <pre class="brush: css">html { font-family: sans-serif; @@ -173,14 +173,14 @@ textarea { height: 60px; }</pre> -<p>在将表单发送给用户的浏览器之前，服务器会将ID <code>"postID"</code>的隐藏输入的值设置为其数据库中发送的ID，并在返回表单时使用该信息来知道要向哪个数据库记录更新改变后的信息。 内容中无需脚本即可处理。</p> +<p>在将表单发送给用户的浏览器之前，服务器会将 ID <code>"postID"</code>的隐藏输入的值设置为其数据库中发送的 ID，并在返回表单时使用该信息来知道要向哪个数据库记录更新改变后的信息。 内容中无需脚本即可处理。</p> <p>输出看起来像这样：</p> <p>{{ EmbedLiveSample('Examples', '100%', 200) }}</p> <div class="note"> -<p>注意：您还可以在GitHub上找到示例（请参见<a href="https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html">源代码</a>，并可以<a href="https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html">实时运行</a>）。</p> +<p>注意：您还可以在 GitHub 上找到示例（请参见<a href="https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html">源代码</a>，并可以<a href="https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html">实时运行</a>）。</p> </div> <p>提交后，发送到服务器的表单数据将如下所示：</p> diff --git a/files/zh-cn/web/html/element/input/index.html b/files/zh-cn/web/html/element/input/index.html index 2c35a8ea74..2b95e433f8 100644 --- a/files/zh-cn/web/html/element/input/index.html +++ b/files/zh-cn/web/html/element/input/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTML/Element/input --- <p id="概述">{{HTMLRef}}</p> -<p><strong>HTML <code><input></code> 元素</strong>用于为基于Web的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和{{Glossary("user agent")}}。</p> +<p><strong>HTML <code><input></code> 元素</strong>用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和{{Glossary("user agent")}}。</p> <p>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</p> @@ -282,7 +282,7 @@ translation_of: Web/HTML/Element/input </tr> <tr> <td>{{HTMLElement("input/datetime", "datetime")}}</td> - <td>{{deprecated_inline}} {{obsolete_inline}} 用于输入基于UTC时区的日期和时间（时、分、秒及秒的小数部分）。</td> + <td>{{deprecated_inline}} {{obsolete_inline}} 用于输入基于 UTC 时区的日期和时间（时、分、秒及秒的小数部分）。</td> <td id="exampledatetime"> <pre class="brush: html hidden"> <input type="datetime" name="datetime"/></pre> @@ -300,7 +300,7 @@ translation_of: Web/HTML/Element/input <table> <caption> - <p>{{htmlelement('input')}}元素的属性包括<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局HTML属性</a>和以下属性：</p> + <p>{{htmlelement('input')}}元素的属性包括<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局 HTML 属性</a>和以下属性：</p> <table> <thead> @@ -319,7 +319,7 @@ translation_of: Web/HTML/Element/input <tr> <td>{{anch('htmlattrdefalt', 'alt')}}</td> <td>image</td> - <td>image type的alt属性，是可访问性的要求。</td> + <td>image type 的 alt 属性，是可访问性的要求。</td> </tr> <tr> <td>{{anch('htmlattrdefautocomplete', 'autocomplete')}}</td> @@ -354,12 +354,12 @@ translation_of: Web/HTML/Element/input <tr> <td>{{anch('htmlattrdefform', 'form')}}</td> <td>所有</td> - <td>将控件和一个form元素联系在一起</td> + <td>将控件和一个 form 元素联系在一起</td> </tr> <tr> <td>{{anch('htmlattrdefformaction', 'formaction')}}</td> <td>image, submit</td> - <td>用于提交表单的URL</td> + <td>用于提交表单的 URL</td> </tr> <tr> <td>{{anch('htmlattrdefformenctype', 'formenctype')}}</td> @@ -369,7 +369,7 @@ translation_of: Web/HTML/Element/input <tr> <td>{{anch('htmlattrdefformmethod', 'formmethod')}}</td> <td>image, submit</td> - <td>用于表单提交的HTTP方法 </td> + <td>用于表单提交的 HTTP 方法 </td> </tr> <tr> <td>{{anch('htmlattrdefformnovalidate', 'formnovalidate')}}</td> @@ -391,7 +391,7 @@ translation_of: Web/HTML/Element/input <tr> <td>{{anch('htmlattrdeflist', 'list')}}</td> <td>绝大部分</td> - <td>自动填充选项的{{htmlelement('datalist')}} 的id值</td> + <td>自动填充选项的{{htmlelement('datalist')}} 的 id 值</td> </tr> <tr> <td>{{anch('htmlattrdefmax', 'max')}}</td> @@ -421,7 +421,7 @@ translation_of: Web/HTML/Element/input <tr> <td>{{anch('htmlattrdefname', 'name')}}</td> <td>所有</td> - <td>input表单控件的名字。以名字/值对的形式随表单一起提交</td> + <td>input 表单控件的名字。以名字/值对的形式随表单一起提交</td> </tr> <tr> <td>{{anch('htmlattrdefpattern', 'pattern')}}</td> @@ -455,13 +455,13 @@ translation_of: Web/HTML/Element/input </tr> <tr> <td>{{anch('htmlattrdefstep', 'step')}}</td> - <td>数字type</td> + <td>数字 type</td> <td>有效的递增值</td> </tr> <tr> <td>{{anch('htmlattrdeftype', 'type')}}</td> <td>所有</td> - <td>input表单控件的type</td> + <td>input 表单控件的 type</td> </tr> <tr> <td>{{anch('htmlattrdefvalue', 'value')}}</td> @@ -484,7 +484,7 @@ translation_of: Web/HTML/Element/input <dl> <dt>{{ htmlattrdef("accept") }}</dt> - <dd>如果该元素的 <strong>type</strong> 属性的值<code>是file</code>,则该属性表明了服务器端可接受的文件类型；否则它将被忽略。该属性的值必须为一个逗号分割的列表,包含了多个唯一的内容类型声明： + <dd>如果该元素的 <strong>type</strong> 属性的值<code>是 file</code>,则该属性表明了服务器端可接受的文件类型；否则它将被忽略。该属性的值必须为一个逗号分割的列表，包含了多个唯一的内容类型声明： <ul> <li>以 STOP 字符 (U+002E) 开始的文件扩展名。（例如：".jpg,.png,.doc"）</li> <li>一个有效的 MIME 类型，但没有扩展名</li> @@ -496,7 +496,7 @@ translation_of: Web/HTML/Element/input <dt>{{ htmlattrdef("accesskey") }} {{ HTMLVersionInline(4) }} only, {{ obsoleteGeneric("inline", "HTML5") }}</dt> <dd>用户按下后可以获得此控件焦点的单个字符。这是 HTML5 全局属性。</dd> <dt>{{ htmlattrdef("autocomplete") }} {{ HTMLVersionInline(5) }}</dt> - <dd>这个属性表示这个控件的值是否可被浏览器自动填充。如果<strong>type</strong>属性的值是hidden、checkbox、radio、file，或为按钮类型（button、submit、reset、image），则本属性被忽略。可用的值是: + <dd>这个属性表示这个控件的值是否可被浏览器自动填充。如果<strong>type</strong>属性的值是 hidden、checkbox、radio、file，或为按钮类型（button、submit、reset、image），则本属性被忽略。可用的值是： <ul> <li><code>off</code>: 用户必须手动填值，或者该页面提供了自己的自动补全方法。浏览器不对此字段自动填充。</li> <li><code>on</code>: 浏览器可以根据用户先前的填表情况对此字段自动填值。</li> @@ -544,18 +544,18 @@ translation_of: Web/HTML/Element/input </li> </ul> - <p>如果<code><input></code>元素上没有<strong>autocomplete</strong>属性，浏览器可使用包含该input元素的表单（<code><form></code>）或通过input的<strong>form</strong>属性指定的表单的<strong>autocomplete</strong>属性值。更多信息请参见{{ HTMLElement("form") }}的<code>autocomplete</code>属性。</p> + <p>如果<code><input></code>元素上没有<strong>autocomplete</strong>属性，浏览器可使用包含该 input 元素的表单（<code><form></code>）或通过 input 的<strong>form</strong>属性指定的表单的<strong>autocomplete</strong>属性值。更多信息请参见{{ HTMLElement("form") }}的<code>autocomplete</code>属性。</p> - <p>与其他浏览器不同，<strong>autocomplete </strong>还控制着Firefox浏览器 对 <input> 持久化动态禁用状态和（如果适用）跨页面加载的动态检查。持久化特性默认是开启的。设置<strong>autocomplete</strong>的值为<strong>off </strong>可以关闭该特性<strong>。</strong>即使autocomplete属性通常不应用于<input>的type，它也可以工作。具体可以查看{{bug(654072)}}。</p> + <p>与其他浏览器不同，<strong>autocomplete </strong>还控制着 Firefox 浏览器 对 <input> 持久化动态禁用状态和（如果适用）跨页面加载的动态检查。持久化特性默认是开启的。设置<strong>autocomplete</strong>的值为<strong>off </strong>可以关闭该特性<strong>。</strong>即使 autocomplete 属性通常不应用于<input>的 type，它也可以工作。具体可以查看{{bug(654072)}}。</p> </dd> <dt>{{ htmlattrdef("autofocus") }} {{ HTMLVersionInline(5) }}</dt> - <dd>这个布尔属性允许您指定的表单控件在页面加载时具有焦点（自动获得焦点），除非用户将其覆盖，例如通过键入不同的控件。文档中只有一个表单元素可以具有autofocus属性，它是一个布尔值。 如果type属性设置为隐藏则不能应用（即您不能自动获得焦点的属性设置为隐藏的控件）。</dd> + <dd>这个布尔属性允许您指定的表单控件在页面加载时具有焦点（自动获得焦点），除非用户将其覆盖，例如通过键入不同的控件。文档中只有一个表单元素可以具有 autofocus 属性，它是一个布尔值。 如果 type 属性设置为隐藏则不能应用（即您不能自动获得焦点的属性设置为隐藏的控件）。</dd> <dt id="htmlattrdefcapture">{{htmlattrdef("capture")}}</dt> <dd> <p>Introduced in the HTML Media Capture specification and valid for the <code>file</code> input type only, the <code>capture</code> attribute defines which media—microphone, video, or camera—should be used to capture a new file for upload with <code>file</code> upload control in supporting scenarios. See the {{HTMLElement("input/file", "file")}} input type.</p> </dd> <dt>{{ htmlattrdef("checked") }}</dt> - <dd>如果该元素的<strong>type</strong>属性的值为<span style="font-family: courier new;">radio或者</span><span style="font-family: courier new;">checkbox</span>,则该布尔属性的存在与否表明了该控件是否是默认选择状态。 + <dd>如果该元素的<strong>type</strong>属性的值为<span style="font-family: courier new;">radio 或者</span><span style="font-family: courier new;">checkbox</span>,则该布尔属性的存在与否表明了该控件是否是默认选择状态。 <p>If present on a <code>checkbox</code> type, it indicates that the checkbox is checked by default (when the page loads). It does <em>not</em> indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (Only the <a href="/zh-CN/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code>’s <code>checked</code> IDL attribute</a> is updated.)</p> <div class="note"> @@ -680,7 +680,7 @@ translation_of: Web/HTML/Element/input <dt>{{ htmlattrdef("max") }} {{ HTMLVersionInline(5) }} </dt> <dd>此项目的最大（数字或日期时间）值，且不得小于其最小值（<strong>min</strong>属性）值。</dd> <dt>{{ htmlattrdef("maxlength") }} {{ HTMLVersionInline(5) }}</dt> - <dd>如果 <strong>type</strong> 的值是 <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">email</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">password</span>, <span style="font-family: courier new;">tel</span>, 或 <span style="font-family: courier new;">url，那么这个属性指明了用户最多可以输入的字符个数（按照Unicode编码方式计数）；对于其他类型的输入框，该属性被忽略。它可以大于 </span><strong>size</strong> 属性的值。如果不指定这个属性，那么用户可以输入任意多的字符。如果指定为一个负值，那么元素表现出默认行为，即用户可以输入任意多的字符。本属性的约束规则，仅在元素的 value 属性发生变化时才会执行。译者注:ie10+</dd> + <dd>如果 <strong>type</strong> 的值是 <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">email</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">password</span>, <span style="font-family: courier new;">tel</span>, 或 <span style="font-family: courier new;">url，那么这个属性指明了用户最多可以输入的字符个数（按照 Unicode 编码方式计数）；对于其他类型的输入框，该属性被忽略。它可以大于 </span><strong>size</strong> 属性的值。如果不指定这个属性，那么用户可以输入任意多的字符。如果指定为一个负值，那么元素表现出默认行为，即用户可以输入任意多的字符。本属性的约束规则，仅在元素的 value 属性发生变化时才会执行。译者注:ie10+</dd> <dt>{{ htmlattrdef("min") }} {{ HTMLVersionInline(5) }} </dt> <dd>此项目的最小（数字或日期时间）值，且不得大于其最大值（最大属性）值。</dd> <dt id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</dt> @@ -690,33 +690,33 @@ translation_of: Web/HTML/Element/input <p>The input will fail <a href="/zh-CN/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long, preventing form submission. See {{anch("Client-side validation")}} for more information.</p> </dd> <dt>{{ htmlattrdef("multiple") }}{{ HTMLVersionInline(5) }}</dt> - <dd>This Boolean attribute indicates whether the user can enter more than one value.这个属性指示用户能否输入多个值。这个属性仅在<strong>type</strong>属性为email或file的时候生效 ; 否则被忽视.</dd> + <dd>This Boolean attribute indicates whether the user can enter more than one value.这个属性指示用户能否输入多个值。这个属性仅在<strong>type</strong>属性为 email 或 file 的时候生效 ; 否则被忽视。</dd> <dt>{{ htmlattrdef("name") }}</dt> <dd>控件的名称，与表单数据一起提交。</dd> <dt>{{ htmlattrdef("pattern") }}{{ HTMLVersionInline(5) }}</dt> - <dd>检查控件值的正则表达式.。pattern必须匹配整个值，而不仅仅是某些子集.。使用title属性来描述帮助用户的模式.。当类型属性的值为<span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> 或 <span style="font-family: courier new;">email</span>时，此属性适用，否则将被忽略。译者注:ie10+</dd> + <dd>检查控件值的正则表达式.。pattern 必须匹配整个值，而不仅仅是某些子集.。使用 title 属性来描述帮助用户的模式.。当类型属性的值为<span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> 或 <span style="font-family: courier new;">email</span>时，此属性适用，否则将被忽略。译者注:ie10+</dd> <dt>{{ htmlattrdef("placeholder") }} {{ HTMLVersionInline(5) }}</dt> - <dd>提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。仅适用于当<strong>type</strong> 属性为<span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> or <span style="font-family: courier new;">email时</span>; 否则会被忽略。 - <div class="note"><strong>Note:</strong> 请不要用<code>placeholder</code> 属性替换 {{ HTMLElement("label") }} 元素。他们的作用不同: {{ HTMLElement("label") }} 属性描述表单元素的角色; 也就是说，它展示预期的信息，而<code>placeholder</code> 属性是提示用户内容的输入格式。某些情况下 <code>placeholder</code> 属性对用户不可见, 所以当没有它时也需要保证form能被理解。</div> + <dd>提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。仅适用于当<strong>type</strong> 属性为<span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> or <span style="font-family: courier new;">email 时</span>; 否则会被忽略。 + <div class="note"><strong>Note:</strong> 请不要用<code>placeholder</code> 属性替换 {{ HTMLElement("label") }} 元素。他们的作用不同: {{ HTMLElement("label") }} 属性描述表单元素的角色; 也就是说，它展示预期的信息，而<code>placeholder</code> 属性是提示用户内容的输入格式。某些情况下 <code>placeholder</code> 属性对用户不可见， 所以当没有它时也需要保证 form 能被理解。</div> </dd> <dt>{{ htmlattrdef("readonly") }}</dt> <dd>这个布尔属性用于指明用户无法修改控件的值。 - <p>{{ HTMLVersionInline(5) }} 如果控件的 <strong>type</strong> 属性为<span style="font-family: courier new;">hidden</span>, <span style="font-family: courier new;">range</span>, <span style="font-family: courier new;">color</span>, <span style="font-family: courier new;">checkbox</span>, <span style="font-family: courier new;">radio</span>, <span style="font-family: courier new;">file 或 </span>type时，此属性会被忽略。</p> + <p>{{ HTMLVersionInline(5) }} 如果控件的 <strong>type</strong> 属性为<span style="font-family: courier new;">hidden</span>, <span style="font-family: courier new;">range</span>, <span style="font-family: courier new;">color</span>, <span style="font-family: courier new;">checkbox</span>, <span style="font-family: courier new;">radio</span>, <span style="font-family: courier new;">file 或 </span>type 时，此属性会被忽略。</p> </dd> <dt>{{ htmlattrdef("required") }} {{ HTMLVersionInline(5) }}</dt> - <dd>这个属性指定用户在提交表单之前必须为该元素填充值. 当type属性是hidden,image或者按钮类型(submit,reset,button)时不可使用. {{ cssxref(":optional") }} 和 {{ cssxref(":required") }} CSS 伪元素的样式将可以被该字段应用作外观.</dd> + <dd>这个属性指定用户在提交表单之前必须为该元素填充值。当 type 属性是 hidden,image 或者按钮类型 (submit,reset,button) 时不可使用. {{ cssxref(":optional") }} 和 {{ cssxref(":required") }} CSS 伪元素的样式将可以被该字段应用作外观。</dd> <dt>{{ htmlattrdef("selectionDirection") }} {{ HTMLVersionInline(5) }}</dt> <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd> <dt>{{ htmlattrdef("size") }}</dt> - <dd>控件的初始大小。以像素为单位。但当<strong>type</strong> 属性为<span style="font-family: courier new;">text</span> 或 <span style="font-family: courier new;">password时</span>, 它表示输入的字符的长度。从HTML5开始, 此属性仅适用于当 <strong>type</strong> 属性为 <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span>, <span style="font-family: courier new;">email</span>,或 <span style="font-family: courier new;">password；</span>否则会被忽略。 此外，它的值必须大于0。 如果未指定大小，则使用默认值20。 HTML5 概述 "用户代理应该确保至少大部分字符是可见的", 但是不同的字符的用不同的字体表示可能会导致宽度不同。在某些浏览器中，一串带有x的字符即使定义了到x的大小也将显示不完整。 。</dd> + <dd>控件的初始大小。以像素为单位。但当<strong>type</strong> 属性为<span style="font-family: courier new;">text</span> 或 <span style="font-family: courier new;">password 时</span>, 它表示输入的字符的长度。从 HTML5 开始， 此属性仅适用于当 <strong>type</strong> 属性为 <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span>, <span style="font-family: courier new;">email</span>,或 <span style="font-family: courier new;">password；</span>否则会被忽略。 此外，它的值必须大于 0。 如果未指定大小，则使用默认值 20。 HTML5 概述 "用户代理应该确保至少大部分字符是可见的", 但是不同的字符的用不同的字体表示可能会导致宽度不同。在某些浏览器中，一串带有 x 的字符即使定义了到 x 的大小也将显示不完整。 。</dd> <dt>{{ htmlattrdef("spellcheck") }} {{ HTMLVersionInline(5) }}</dt> <dd>将此属性的值设置为<code>true</code>表示元素需要检查其拼写和语法。值<code>default</code> 表示该元素将根据默认行为进行操作，可能基于父元素自己的<code>spellcheck</code>值。值<code>false</code>表示不应该检查元素</dd> <dt>{{ htmlattrdef("src") }}</dt> - <dd>如果<strong>type</strong>属性的值是<span style="font-family: courier new;">image</span>, 这个属性指定了按钮图片的路径; 否则它被忽视.</dd> + <dd>如果<strong>type</strong>属性的值是<span style="font-family: courier new;">image</span>, 这个属性指定了按钮图片的路径; 否则它被忽视。</dd> <dt>{{ htmlattrdef("step") }} {{ HTMLVersionInline(5) }}</dt> <dd>使用<strong>min</strong>和<strong>max</strong> 属性来限制可以设置数字或日期时间值的增量。它可以是任意字符串或是正浮点数。如果此属性未设置为任何，则控件仅接受大于最小步长值的倍数的值。</dd> <dt>{{ htmlattrdef("tabindex") }} element-specific in {{ HTMLVersionInline(4) }}, global in {{ HTMLVersionInline(5) }}</dt> - <dd>元素在当前文档的Tab导航顺序中的位置。</dd> + <dd>元素在当前文档的 Tab 导航顺序中的位置。</dd> <dt id="htmlattrdefformenctype">{{htmlattrdef('title')}}</dt> <dd> <p>Global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip. The title should NOT be used as the primary explanation of the purpose of the form control. Instead, use the {{htmlelement('label')}} element with a <code>for</code> attribute set to the form control's {{htmlattrdef('id')}} attribute. See {{anch("Labels")}} below.</p> @@ -724,9 +724,9 @@ translation_of: Web/HTML/Element/input <dt>{{ htmlattrdef("type") }}</dt> <dd>要呈现的控件类型。有关各个类型的信息，请参阅 {{anch("Form <input> types")}}，其中包含指向每个类型的更多信息的链接。</dd> <dt>{{ htmlattrdef("usemap") }} {{ HTMLVersionInline(4) }} only, {{ obsoleteGeneric("inline", "HTML5") }}</dt> - <dd>作为图像映射的{{ HTMLElement("map") }}元素的名称.</dd> + <dd>作为图像映射的{{ HTMLElement("map") }}元素的名称。</dd> <dt>{{ htmlattrdef("value") }}</dt> - <dd>控件的初始值. 此属性是可选的，除非<strong>type</strong> 属性是<code>radio</code>或<code>checkbox</code><span style="font-family: courier new;">。</span>注意，当重新加载页面时，如果在重新加载之前更改了值，<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">Gecko和IE将忽略HTML源代码中指定的值</a>。</dd> + <dd>控件的初始值。此属性是可选的，除非<strong>type</strong> 属性是<code>radio</code>或<code>checkbox</code><span style="font-family: courier new;">。</span>注意，当重新加载页面时，如果在重新加载之前更改了值，<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">Gecko 和 IE 将忽略 HTML 源代码中指定的值</a>。</dd> <dt>{{ htmlattrdef("width") }} {{ HTMLVersionInline(5) }}</dt> <dd>如果<strong>type</strong>属性的值是<span style="font-family: courier new;">image，这个属性定义了按钮图片的宽度。</span></dd> <dt> diff --git a/files/zh-cn/web/html/element/input/month/index.html b/files/zh-cn/web/html/element/input/month/index.html index 91767c43f0..58ceb8f2ea 100644 --- a/files/zh-cn/web/html/element/input/month/index.html +++ b/files/zh-cn/web/html/element/input/month/index.html @@ -18,11 +18,11 @@ original_slug: Web/HTML/Element/Input/月份 <p>这个控件在各个浏览器支持都不同，目前是支持部分浏览器。在桌面上支持情况为 Chrome/Opera 和 Edge 。在移动端支持大部分现代浏览器。在其他浏览器中，这个控件会被优雅的降级到<code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> -<p>对于那些使用不支持的浏览器的用户，Chrome / Opera月份控制如下图所示。单击右侧的向下箭头会显示日期选择器，以便您选择日期;你必须手动输入时间。</p> +<p>对于那些使用不支持的浏览器的用户，Chrome / Opera 月份控制如下图所示。单击右侧的向下箭头会显示日期选择器，以便您选择日期;你必须手动输入时间。</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15391/month-control-chrome.png" style="display: block; height: 216px; margin: 0px auto; width: 273px;"></p> -<p>Edge的 <code>month</code> 看起来像这样的:</p> +<p>Edge 的 <code>month</code> 看起来像这样的：</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15393/month-control-edge.png" style="display: block; height: 389px; margin: 0px auto; width: 227px;"></p> @@ -53,20 +53,20 @@ original_slug: Web/HTML/Element/Input/月份 <h2 id="Value">Value</h2> -<p>{{domxref("DOMString")}} 表示输入输入的月份和年份的值, in the form YYYY-MM (four or more digit year, then a hyphen ("<code>-</code>"), 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")}}.</p> +<p>{{domxref("DOMString")}} 表示输入输入的月份和年份的值，in the form YYYY-MM (four or more digit year, then a hyphen ("<code>-</code>"), 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")}}.</p> -<p>你可以设置一个默认的属性值插入到 {{htmlattrxref("value", "input")}} 里, 像这样:</p> +<p>你可以设置一个默认的属性值插入到 {{htmlattrxref("value", "input")}} 里，像这样：</p> <pre class="brush: html"><label for="bday-month">What month were you both in?</label> <input id="bday-month" type="month" name="bday-month" value="2017-06"></pre> <p>{{EmbedLiveSample('value-example-1', 600, 60)}}</p> -<p>需要注意的是显示的如期格式不同于实际的<code>value</code> — 日期显示的格式将根据用户的操作系统的时区设置, 而时间的格式通常会格式化为 <code>yyyy-MM</code>。</p> +<p>需要注意的是显示的如期格式不同于实际的<code>value</code> — 日期显示的格式将根据用户的操作系统的时区设置，而时间的格式通常会格式化为 <code>yyyy-MM</code>。</p> <p>在向服务器提交上述值的时候他们看起来像这样：<code>bday-month=1978-06</code>.</p> -<p>你也可以使用JavaScript 的 {{domxref("HTMLInputElement.value")}} 来设置日期的值 。例如：</p> +<p>你也可以使用 JavaScript 的 {{domxref("HTMLInputElement.value")}} 来设置日期的值 。例如：</p> <pre class="brush: js">var monthControl = document.querySelector('input[type="month"]'); monthControl.value = '1978-06';</pre> @@ -136,7 +136,7 @@ monthControl.value = '1978-06';</pre> <h2 id="Using_month_inputs">Using month inputs</h2> -<p>与日期相关的输入乍一看很方便，它们提供了一个简单的用户界面来选择日期，并且它们将发送到服务器的数据格式规范化，而不考虑用户的本地环境。但是, 由于浏览器支持有限，所以这个 <code><input type="month"></code>还是存在兼容性问题。</p> +<p>与日期相关的输入乍一看很方便，它们提供了一个简单的用户界面来选择日期，并且它们将发送到服务器的数据格式规范化，而不考虑用户的本地环境。但是，由于浏览器支持有限，所以这个 <code><input type="month"></code>还是存在兼容性问题。</p> <p>我们在往下看更多关于<code><input type="month"></code>基础和更多的高级的用法</p> @@ -144,7 +144,7 @@ monthControl.value = '1978-06';</pre> <h3 id="Basic_uses_of_month">Basic uses of month</h3> -<p>最简单的<code><input type="month"></code> 涉及到基础的 <code><input></code> 和 {{htmlelement("label")}} 的元素组合, 像下面这样:</p> +<p>最简单的<code><input type="month"></code> 涉及到基础的 <code><input></code> 和 {{htmlelement("label")}} 的元素组合，像下面这样：</p> <pre class="brush: html"><form> <label for="bday-month">What month were you both in?</label> @@ -155,7 +155,7 @@ monthControl.value = '1978-06';</pre> <h3 id="设置最长和最短日期">设置最长和最短日期</h3> -<p>你可以使用{{htmlattrxref("min", "input")}} 和 {{htmlattrxref("max", "input")}} 属性 来限制用户选择日期. 在下列的例子中我们设置最小月份<code>1900-01</code> 最大月份到 <code>2017-08</code>:</p> +<p>你可以使用{{htmlattrxref("min", "input")}} 和 {{htmlattrxref("max", "input")}} 属性 来限制用户选择日期。在下列的例子中我们设置最小月份<code>1900-01</code> 最大月份到 <code>2017-08</code>:</p> <pre class="brush: html"><form> <label for="bday-month">What month were you both in?</label> @@ -165,10 +165,10 @@ monthControl.value = '1978-06';</pre> <p>{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}</p> -<p>结果是这样:</p> +<p>结果是这样：</p> <ul> - <li>月份只有在2017年八月份到1900年一月可以选择 — 在这个控件里这个范围以外的月份不能滚动选择。</li> + <li>月份只有在 2017 年八月份到 1900 年一月可以选择 — 在这个控件里这个范围以外的月份不能滚动选择。</li> <li>Depending on what browser you are using, you might find that times outside the specified values might not be selectable in the time picker (e.g. Edge), or invalid (see {{anch("Validation")}}) but still available (e.g. Chrome).</li> </ul> diff --git a/files/zh-cn/web/html/element/input/number/index.html b/files/zh-cn/web/html/element/input/number/index.html index 4baa8ba6ee..41fc88d92b 100644 --- a/files/zh-cn/web/html/element/input/number/index.html +++ b/files/zh-cn/web/html/element/input/number/index.html @@ -53,7 +53,7 @@ translation_of: Web/HTML/Element/input/number <h2 id="值">值</h2> -<p>填写到输入框中的数值文字的{{jsxref("Number")}}表示。你可以通过把一个数字放在{{htmlattrxref("value", "input")}} 属性中来设置输入框的默认值，如下:</p> +<p>填写到输入框中的数值文字的{{jsxref("Number")}}表示。你可以通过把一个数字放在{{htmlattrxref("value", "input")}} 属性中来设置输入框的默认值，如下：</p> <pre class="brush: html"><input id="number" type="number" value="42"></pre> @@ -64,10 +64,10 @@ translation_of: Web/HTML/Element/input/number <p><code><input type ="number"></code>元素可以帮助您在构建用户界面和将数字输入到表单中的逻辑时简化你的工作。 当你使用正确的 type 值 <code>"number"</code> 创建数字输入时，会自动验证你输入的文本是否为数字，通常是一组向上和向下按钮。</p> <div class="note"> -<p><strong>注意：</strong>记住用户可以在幕后修改HTML是至关重要的，因此您的网站不得使用简单的客户端验证来实现任何安全目的。 您必须在服务器端验证所提供的值可能具有任何安全含义的任何事务。</p> +<p><strong>注意：</strong>记住用户可以在幕后修改 HTML 是至关重要的，因此您的网站不得使用简单的客户端验证来实现任何安全目的。 您必须在服务器端验证所提供的值可能具有任何安全含义的任何事务。</p> </div> -<p>此外，移动浏览器通过在用户尝试输入值时显示更适合输入数字的特殊键盘，进一步帮助用户体验。 以下屏幕截图来自Firefox for Android：</p> +<p>此外，移动浏览器通过在用户尝试输入值时显示更适合输入数字的特殊键盘，进一步帮助用户体验。 以下屏幕截图来自 Firefox for Android：</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14963/number-keyboard-fxa.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> @@ -98,43 +98,43 @@ translation_of: Web/HTML/Element/input/number <h3 id="控制步进大小">控制步进大小</h3> -<p>默认情况下，向上和向下按钮可以将值增加或减小1。您可以通过使用{{htmlattrxref("step","input")}} 属性来更改此步长值。 我们上面的例子中的占位符提示我们其值是10的倍数，所以设置 <code>step</code> 的值为10是合理的：</p> +<p>默认情况下，向上和向下按钮可以将值增加或减小 1。您可以通过使用{{htmlattrxref("step","input")}} 属性来更改此步长值。 我们上面的例子中的占位符提示我们其值是 10 的倍数，所以设置 <code>step</code> 的值为 10 是合理的：</p> <pre class="brush: html"><input type="number" placeholder="multiple of 10" step="10"></pre> <p>{{ EmbedLiveSample('控制步进大小', 600, 40) }}</p> -<p>在这个例子中，你会发现上下箭头每次会将其值增加和减少10，而不是1。你仍然可以手动输入一个不是10的倍数的数字，但它会被认为是无效的。</p> +<p>在这个例子中，你会发现上下箭头每次会将其值增加和减少 10，而不是 1。你仍然可以手动输入一个不是 10 的倍数的数字，但它会被认为是无效的。</p> <h3 id="指定最小和最大值">指定最小和最大值</h3> -<p>可以使用{{htmlattrxref("min","input")}} 和{{htmlattrxref("max","input")}} 属性指定该字段可以具有的最小值和最大值。 例如，给例子指定最小值为0，最大值为100：</p> +<p>可以使用{{htmlattrxref("min","input")}} 和{{htmlattrxref("max","input")}} 属性指定该字段可以具有的最小值和最大值。 例如，给例子指定最小值为 0，最大值为 100：</p> <pre class="brush: html"><input type="number" placeholder="multiple of 10" step="10" min="0" max="100"></pre> <p>{{ EmbedLiveSample('指定最小和最大值', 600, 40) }}</p> -<p>修改过后，你会发现点击上下按钮不会让你低于0或高于100 . 可以在这些界限之外手动输入数字，但它将被视为无效。</p> +<p>修改过后，你会发现点击上下按钮不会让你低于 0 或高于 100 . 可以在这些界限之外手动输入数字，但它将被视为无效。</p> <h3 id="允许小数值">允许小数值</h3> -<p>数字输入的一个问题是，步长默认为1——如果你尝试输入带小数的数字，例如"1.0"，则它将被视为无效。 如果要输入一个需要小数的值，则需要修改 <code>step</code> 值（例如，<code>step="0.01"</code> 以允许2位小数）。 这里有一个简单的例子：</p> +<p>数字输入的一个问题是，步长默认为 1——如果你尝试输入带小数的数字，例如"1.0"，则它将被视为无效。 如果要输入一个需要小数的值，则需要修改 <code>step</code> 值（例如，<code>step="0.01"</code> 以允许 2 位小数）。 这里有一个简单的例子：</p> <pre class="brush: html"><input type="number" placeholder="1.0" step="0.01" min="0" max="10"></pre> <p>{{EmbedLiveSample("允许小数值", 600, 40)}}</p> -<p>你可以看到这个例子允许0.0到10.0之间的任何值，小数点为2位。本例中，"9.52" 是有效的，但" 9.521" 无效。</p> +<p>你可以看到这个例子允许 0.0 到 10.0 之间的任何值，小数点为 2 位。本例中，"9.52" 是有效的，但" 9.521" 无效。</p> <h3 id="控制输入框大小">控制输入框大小</h3> <p>类型为<code>"number"</code> 的 {{HTMLElement("input")}} 元素不支持像 {{htmlattrxref("size", "input")}} 之类的调整大小属性。你必须通过借助 <a href="/en-US/docs/Web/CSS">CSS</a> 来改变它们的尺寸大小。</p> -<p>例如，要调整输入框的宽度为仅可输入3位数字的宽度，我们可以在HTML中添加 一个ID并缩短很长的占位符文本，如下：</p> +<p>例如，要调整输入框的宽度为仅可输入 3 位数字的宽度，我们可以在 HTML 中添加 一个 ID 并缩短很长的占位符文本，如下：</p> <pre class="brush: html"><input type="number" placeholder="x10" step="10" min="0" max="100" id="number"></pre> -<p>然后我们添加一些 CSS 来缩小 id 为 <code>"number"</code> 的元素的宽度:</p> +<p>然后我们添加一些 CSS 来缩小 id 为 <code>"number"</code> 的元素的宽度：</p> <pre class="brush: css">#number { width: 3em; diff --git a/files/zh-cn/web/html/element/input/password/index.html b/files/zh-cn/web/html/element/input/password/index.html index 25cdda81c0..f0e5b616a0 100644 --- a/files/zh-cn/web/html/element/input/password/index.html +++ b/files/zh-cn/web/html/element/input/password/index.html @@ -16,7 +16,7 @@ translation_of: Web/HTML/Element/input/password <div class="note"> -<p>任何涉及密码等敏感信息的表格（例如登录表格）都应通过HTTPS提供; 许多浏览器现在都实现了警告不安全登录表单的机制; 请参阅<a href="https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>。</p> +<p>任何涉及密码等敏感信息的表格（例如登录表格）都应通过 HTTPS 提供; 许多浏览器现在都实现了警告不安全登录表单的机制; 请参阅<a href="https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>。</p> </div> <table class="properties"> @@ -60,7 +60,7 @@ translation_of: Web/HTML/Element/input/password <h3 id="一个简单的密码输入框">一个简单的密码输入框</h3> -<p>在这里，我们看到了最基本的密码输入，并使用了 {{HTMLElement("label")}} 元素.</p> +<p>在这里，我们看到了最基本的密码输入，并使用了 {{HTMLElement("label")}} 元素。</p> <pre class="brush: html"><label for="userPassword">Password: </label> <input id="userPassword" type="password"></pre> @@ -73,13 +73,13 @@ translation_of: Web/HTML/Element/input/password <dl> <dt><code>"on"</code></dt> - <dd>允许浏览器或密码管理器自动填写密码字段。 这不像使用“current-password”或“new-password”那样提供信息。</dd> + <dd>允许浏览器或密码管理器自动填写密码字段。 这不像使用 “current-password” 或 “new-password” 那样提供信息。</dd> <dt><code>"off"</code></dt> <dd>不让浏览器或密码管理器自动填写密码字段。 请注意，某些软件会忽略此值，因为它通常会损害用户维护安全密码操作的能力。</dd> <dt><code>"current-password"</code></dt> - <dd>允许浏览器或密码管理器输入网站的当前密码。 这提供了比“on”更多的信息，因为它允许浏览器或密码管理器自动在该字段中输入当前已知的网站密码，但不建议新密码。</dd> + <dd>允许浏览器或密码管理器输入网站的当前密码。 这提供了比 “on” 更多的信息，因为它允许浏览器或密码管理器自动在该字段中输入当前已知的网站密码，但不建议新密码。</dd> <dt><code>"new-password"</code></dt> - <dd>允许浏览器或密码管理器自动输入网站的新密码; 这用于“更改密码”和“新用户”表单，在该字段询问用户新密码。 新密码可能以多种方式生成，具体取决于使用的密码管理器。 它可能只是填写新的建议密码，或者它可能会向用户显示创建密码的界面。</dd> + <dd>允许浏览器或密码管理器自动输入网站的新密码; 这用于 “更改密码” 和 “新用户” 表单，在该字段询问用户新密码。 新密码可能以多种方式生成，具体取决于使用的密码管理器。 它可能只是填写新的建议密码，或者它可能会向用户显示创建密码的界面。</dd> </dl> <div id="Autocomplete_sample1"> @@ -101,7 +101,7 @@ translation_of: Web/HTML/Element/input/password <h3 id="指定输入模式">指定输入模式</h3> -<p>If your recommended (or required) password syntax rules would benefit from an alternate text entry interface than the standard keyboard, you can use the {{htmlattrxref("inputmode", "input")}} attribute to request a specific one. 最明显的用例是密码必须是数字（例如PIN）。 例如，带有虚拟键盘的移动设备可能会选择切换到数字键盘布局而不是全键盘，以便更轻松地输入密码。</p> +<p>If your recommended (or required) password syntax rules would benefit from an alternate text entry interface than the standard keyboard, you can use the {{htmlattrxref("inputmode", "input")}} attribute to request a specific one. 最明显的用例是密码必须是数字（例如 PIN）。 例如，带有虚拟键盘的移动设备可能会选择切换到数字键盘布局而不是全键盘，以便更轻松地输入密码。</p> <pre class="brush: html"><label for="pin">PIN: </label> <input id="pin" type="password" inputmode="numeric"></pre> @@ -110,7 +110,7 @@ translation_of: Web/HTML/Element/input/password <h3 id="设置长度要求">设置长度要求</h3> -<p>As usual, you can use the {{htmlattrxref("minlength", "input")}} and {{htmlattrxref("maxlength", "input")}} attributes to establish minimum and maximum acceptable lengths for the password.此示例通过指定用户的PIN必须至少为4且不超过8位来扩展前一个示例。The {{htmlattrxref("size", "input")}} attribute is used to ensure that the password entry control is eight characters wide.</p> +<p>As usual, you can use the {{htmlattrxref("minlength", "input")}} and {{htmlattrxref("maxlength", "input")}} attributes to establish minimum and maximum acceptable lengths for the password.此示例通过指定用户的 PIN 必须至少为 4 且不超过 8 位来扩展前一个示例。The {{htmlattrxref("size", "input")}} attribute is used to ensure that the password entry control is eight characters wide.</p> <pre class="brush: html"><label for="pin">PIN:</label> <input id="pin" type="password" inputmode="numeric" minlength="4" @@ -166,9 +166,9 @@ translation_of: Web/HTML/Element/input/password <h3 id="申请社会安全号码">申请社会安全号码</h3> -<p>此示例仅接受与有效的美国社会安全号码格式相匹配的输入。这些用于美国税务和识别目的的数字的格式为“123-45-6789”。 还存在针对每个组中允许的值的各种规则。</p> +<p>此示例仅接受与有效的美国社会安全号码格式相匹配的输入。这些用于美国税务和识别目的的数字的格式为 “123-45-6789”。 还存在针对每个组中允许的值的各种规则。</p> -<h4 id="HTML版本的实例">HTML版本的实例</h4> +<h4 id="HTML版本的实例">HTML 版本的实例</h4> <pre class="brush: html"><label for="ssn">SSN:</label> <input type="password" id="ssn" inputmode="number" minlength="9" maxlength="12" @@ -178,7 +178,7 @@ translation_of: Web/HTML/Element/input/password <label for="ssn">Value:</label> <span id="current"></span></pre> -<p>This uses a {{htmlattrxref("pattern", "input")}} which limits the entered value to strings representing legal Socal Security numbers. 很显然，这个正则表达式并不能保证有效的SSN（因为我们没有进入社会保障局的数据库），但它确实保证数量可能是一个号; 它通常会避免无效的值。 此外，它允许三组数字由空格，短划线（“ - ”）分隔，或者什么也不分。</p> +<p>This uses a {{htmlattrxref("pattern", "input")}} which limits the entered value to strings representing legal Socal Security numbers. 很显然，这个正则表达式并不能保证有效的 SSN（因为我们没有进入社会保障局的数据库），但它确实保证数量可能是一个号; 它通常会避免无效的值。 此外，它允许三组数字由空格，短划线（“ - ”）分隔，或者什么也不分。</p> <div class="note"> <p>Isn't that regular expression just <em>beautiful</em>?</p> @@ -186,9 +186,9 @@ translation_of: Web/HTML/Element/input/password <p>The {{htmlattrxref("inputmode", "input")}} is set to <code>"number"</code> to encourage devices with virtual keyboards to switch to a numeric keypad layout for easier entry. The {{htmlattrxref("minlength", "input")}} and {{htmlattrxref("maxlength", "input")}} attributes are set to 9 and 12, respectively, to require that the value be at least nine and no more than 12 characters (the former without separating characters between the groups of digits and the latter with them). The {{htmlattrxref("required", "input")}} attribute is used to indicate that this control must have a value. Finally, {{htmlattrxref("autocomplete", "input")}} is set to <code>"off"</code> to avoid password managers trying to set its value, since this isn't a password at all.</p> -<h4 id="JavaScript版本的实例">JavaScript版本的实例</h4> +<h4 id="JavaScript版本的实例">JavaScript 版本的实例</h4> -<p>这只是一些简单的代码，用于在屏幕上显示输入的SSN，以便您可以看到它。 显然这会破坏密码字段的目的，但它有助于试验模式。</p> +<p>这只是一些简单的代码，用于在屏幕上显示输入的 SSN，以便您可以看到它。 显然这会破坏密码字段的目的，但它有助于试验模式。</p> <pre class="brush: js">var ssn = document.getElementById("ssn"); var current = document.getElementById("current"); diff --git a/files/zh-cn/web/html/element/input/radio/index.html b/files/zh-cn/web/html/element/input/radio/index.html index cb52590a2f..0ffa30a831 100644 --- a/files/zh-cn/web/html/element/input/radio/index.html +++ b/files/zh-cn/web/html/element/input/radio/index.html @@ -53,9 +53,9 @@ translation_of: Web/HTML/Element/input/radio <h3 id="定义一个单选按钮组节">定义一个单选按钮组<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/radio$edit#Defining_a_radio_group">节</a></h3> -<p>一个单选按钮组由具有相同 {{htmlattrxref("name", "input")}}属性的单选按钮组成。 一旦单选按钮组被建立, 选择那按钮组的任何单选按钮将会自动取消同组当前选择的任何按钮。</p> +<p>一个单选按钮组由具有相同 {{htmlattrxref("name", "input")}}属性的单选按钮组成。 一旦单选按钮组被建立，选择那按钮组的任何单选按钮将会自动取消同组当前选择的任何按钮。</p> -<p>你可以在一个页面上创建任何你喜欢的单选按钮组, 只要每一组都有一个独特的 <code>name</code>属性。</p> +<p>你可以在一个页面上创建任何你喜欢的单选按钮组，只要每一组都有一个独特的 <code>name</code>属性。</p> <p>举个例子，如果你需要在表单中询问用户的首选联系方式，你可以创建三个 <code>name</code> 属性都为 <code>contact</code> 的单选按钮，不过一个按钮的 {{htmlattrxref("value", "input")}}属性为 <code>email</code> ，另一个的<code>value</code> 属性为 <code>phone</code>，还有一个的<code>value</code> 属性为 <code>mail</code>。用户不会看见 <code>value</code> 属性或 <code>name</code> 属性（除非你故意用代码显示它们）。</p> @@ -94,7 +94,7 @@ translation_of: Web/HTML/Element/input/radio <p>当上面的表单在提交时选择了一个单选框，表单的数据就包括了<code>contact=<em>value</em></code>一行。例如，若用户点击 "Phone "单选框，然后提交表单，提交的数据中将包括<code>contact=phone</code>一行。</p> -<p>如果你在HTML中忘记了value属性，那么提交的表单数据就会将该值分配到<code>on</code>上。在这种情况下，如果用户选中了 "Phone "选项并提交了表单，提交的表单数据将是<code>contact=on</code>，这并没有什么卵用。所以别忘了设置你的<code>value</code>属性！</p> +<p>如果你在 HTML 中忘记了 value 属性，那么提交的表单数据就会将该值分配到<code>on</code>上。在这种情况下，如果用户选中了 "Phone "选项并提交了表单，提交的表单数据将是<code>contact=on</code>，这并没有什么卵用。所以别忘了设置你的<code>value</code>属性！</p> <p><strong>Note</strong>: 如果在提交表单时没有选择任何单选按钮，则提交的表格数据中根本不包括单选组，因为没有值要报告。</p> diff --git a/files/zh-cn/web/html/element/input/range/index.html b/files/zh-cn/web/html/element/input/range/index.html index 36749a861a..ae2cce53ba 100644 --- a/files/zh-cn/web/html/element/input/range/index.html +++ b/files/zh-cn/web/html/element/input/range/index.html @@ -16,7 +16,7 @@ original_slug: Web/HTML/Element/Input/范围 <div>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</div> -<p class="hidden">该交互式示例的源存储在GitHub存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发送请求请求。</p> +<p class="hidden">该交互式示例的源存储在 GitHub 存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发送请求请求。</p> <p>如果用户的浏览器不支持类型范围，它将回退并将其视为 <code>{{HTMLElement('input/text', 'text')}}</code> 输入。</p> @@ -35,7 +35,7 @@ original_slug: Web/HTML/Element/Input/范围 <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, and {{htmlattrxref("step", "input")}}</td> </tr> <tr> - <td><strong>IDL属性</strong></td> + <td><strong>IDL 属性</strong></td> <td><code>list</code>, <code>value</code>, 和 <code>valueAsNumber</code></td> </tr> <tr> @@ -51,9 +51,9 @@ original_slug: Web/HTML/Element/Input/范围 <ul> <li>如果将 {{htmlattrxref("value", "input")}} 设置为无法转换为有效浮点数的值，则验证将失败，因为输入正遭受错误的输入。</li> - <li>该值不得小于 {{htmlattrxref("min", "input")}}. 默认值为0。</li> - <li>该值将不大于 {{htmlattrxref("max", "input")}}. 默认值为100。</li> - <li>该值将是 {{htmlattrxref("step", "input")}}. 预设值为1。</li> + <li>该值不得小于 {{htmlattrxref("min", "input")}}. 默认值为 0。</li> + <li>该值将不大于 {{htmlattrxref("max", "input")}}. 默认值为 100。</li> + <li>该值将是 {{htmlattrxref("step", "input")}}. 预设值为 1。</li> </ul> <h3 id="值">值</h3> @@ -79,7 +79,7 @@ original_slug: Web/HTML/Element/Input/范围 <tbody> <tr> <td><code>{{anch("list")}}</code></td> - <td><datalist>元素的ID，其中包含可选的预定义选项</td> + <td><datalist>元素的 ID，其中包含可选的预定义选项</td> </tr> <tr> <td><code>{{anch("max")}}</code></td> @@ -104,19 +104,19 @@ original_slug: Web/HTML/Element/Input/范围 <p>允许值范围内的最大值。 如果输入到元素中的{{htmlattrxref("value", "input")}}超过此值，则元素将无法通过<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">约束验证</a>。 如果 <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code> 属性的值不是数字，则元素没有最大值。</p> -<p>此值必须大于或等于min属性的值。 请参见 <a href="/en-US/docs/Web/HTML/Attributes/max">HTML <code>max</code></a><code>属性。</code></p> +<p>此值必须大于或等于 min 属性的值。 请参见 <a href="/en-US/docs/Web/HTML/Attributes/max">HTML <code>max</code></a><code>属性。</code></p> <h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> <p>允许值范围内的最小值。 如果元素的{{htmlattrxref("value", "input")}} 小于此值，则该元素将无法通过 <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">约束验证</a>。如果为<code>min</code> 指定的值不是有效数字，则输入没有最小值。</p> -<p>该值必须小于或等于max属性的值。 请参见 <a href="/en-US/docs/Web/HTML/Attributes/min">HTML <code>min</code>属性</a>。</p> +<p>该值必须小于或等于 max 属性的值。 请参见 <a href="/en-US/docs/Web/HTML/Attributes/min">HTML <code>min</code>属性</a>。</p> <h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> <p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> -<p><code>range</code> 输入的默认步进值为1，除非步进基数不是整数，否则仅允许输入整数；否则，默认值为1。 例如，如果将 <code>min</code> 设置为-10并将 <code>value</code> 设置为1.5，则1的 <code>step</code> 将只允许正方向上的值为1.5、2.5、3.5，...，以及-0.5，-1.5，-2.5等。 ..朝负面方向发展。 请参阅<a href="/en-US/docs/Web/HTML/Attributes/step">HTML <code>step</code> 属性</a>。</p> +<p><code>range</code> 输入的默认步进值为 1，除非步进基数不是整数，否则仅允许输入整数；否则，默认值为 1。 例如，如果将 <code>min</code> 设置为-10 并将 <code>value</code> 设置为 1.5，则 1 的 <code>step</code> 将只允许正方向上的值为 1.5、2.5、3.5，...，以及-0.5，-1.5，-2.5 等。 ..朝负面方向发展。 请参阅<a href="/en-US/docs/Web/HTML/Attributes/step">HTML <code>step</code> 属性</a>。</p> <h3 id="非标准属性">非标准属性</h3> @@ -130,18 +130,18 @@ original_slug: Web/HTML/Element/Input/范围 <tbody> <tr> <td><code>{{anch("orient")}}</code></td> - <td>设置范围滑块的方向。 <strong>仅限Firefox .</strong></td> + <td>设置范围滑块的方向。 <strong>仅限 Firefox .</strong></td> </tr> </tbody> </table> <dl> <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt> - <dd id="orient-include">类似于-moz-orient非标准CSS属性会影响 {{htmlelement('progress')}} 和 {{htmlelement('meter')}} 元素， <code>orient</code> 属性定义范围滑块的方向。 值包括 <code>horizontal</code>, 表示范围是水平呈现， 和 <code>vertical</code>, 其中范围是垂直呈现）。</dd> + <dd id="orient-include">类似于-moz-orient 非标准 CSS 属性会影响 {{htmlelement('progress')}} 和 {{htmlelement('meter')}} 元素， <code>orient</code> 属性定义范围滑块的方向。 值包括 <code>horizontal</code>, 表示范围是水平呈现， 和 <code>vertical</code>, 其中范围是垂直呈现）。</dd> </dl> <div class="blockIndicator note"> -<p>注意：以下输入属性不适用于输入范围：<code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>,高度, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, 和 <code>width</code>. 这些属性中的任何一个（如果包含）将被忽略。</p> +<p>注意：以下输入属性不适用于输入范围：<code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>,高度，<code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, 和 <code>width</code>. 这些属性中的任何一个（如果包含）将被忽略。</p> </div> <h2 id="例子">例子</h2> @@ -157,13 +157,13 @@ original_slug: Web/HTML/Element/Input/范围 <li>密码管理员生成的密码的密码长度。</li> </ul> -<p>通常，如果用户对最小值和最大值之间的距离的百分比比实际数字本身更感兴趣，则范围输入是一个不错的选择。 例如，在家庭立体声音量控制的情况下，用户通常认为“将音量设置为最大音量的一半”而不是“将音量设置为0.5”。</p> +<p>通常，如果用户对最小值和最大值之间的距离的百分比比实际数字本身更感兴趣，则范围输入是一个不错的选择。 例如，在家庭立体声音量控制的情况下，用户通常认为 “将音量设置为最大音量的一半” 而不是 “将音量设置为 0.5”。</p> <h3 id="指定最小和最大">指定最小和最大</h3> -<p>默认情况下，最小值为0，最大值为100。如果这不是您想要的值，则可以通过更改 {{htmlattrxref("min", "input")}} 和/或 {{htmlattrxref("max", "input")}} 属性。 这些可以是任何浮点值。</p> +<p>默认情况下，最小值为 0，最大值为 100。如果这不是您想要的值，则可以通过更改 {{htmlattrxref("min", "input")}} 和/或 {{htmlattrxref("max", "input")}} 属性。 这些可以是任何浮点值。</p> -<p>例如，要要求用户输入介于-10和10之间的值，可以使用：</p> +<p>例如，要要求用户输入介于-10 和 10 之间的值，可以使用：</p> <pre class="brush: html notranslate"><input type="range" min="-10" max="10"></pre> @@ -171,7 +171,7 @@ original_slug: Web/HTML/Element/Input/范围 <h3 id="设置值的粒度">设置值的粒度</h3> -<p>默认情况下，粒度为1，表示该值始终是整数。 您可以更改 {{htmlattrxref("step")}} 属性以控制粒度。 例如，如果您需要一个介于5到10之间的值（精确到两位小数），则应将 <code>step</code> 的值设置为0.01:</p> +<p>默认情况下，粒度为 1，表示该值始终是整数。 您可以更改 {{htmlattrxref("step")}} 属性以控制粒度。 例如，如果您需要一个介于 5 到 10 之间的值（精确到两位小数），则应将 <code>step</code> 的值设置为 0.01:</p> <div id="Granularity_sample1"> <pre class="brush: html notranslate"><input type="range" min="5" max="10" step="0.01"></pre> @@ -186,16 +186,16 @@ original_slug: Web/HTML/Element/Input/范围 <p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> -<p>该示例使用户可以选择0到π之间的任何值，而对所选值的小数部分没有任何限制。</p> +<p>该示例使用户可以选择 0 到π之间的任何值，而对所选值的小数部分没有任何限制。</p> </div> <h3 id="添加井号和标签">添加井号和标签</h3> -<p>HTML规范使浏览器在如何显示范围控件方面具有一定的灵活性。 在散列标记和较小程度上的标签方面，这种灵活性最明显。 该规范描述了如何使用 {{htmlattrxref("list", "input")}} 属性和 {{HTMLElement("datalist")}} 元素将自定义点添加到范围控件，但没有任何要求或 甚至是沿控件长度的标准化哈希或刻度线的建议。</p> +<p>HTML 规范使浏览器在如何显示范围控件方面具有一定的灵活性。 在散列标记和较小程度上的标签方面，这种灵活性最明显。 该规范描述了如何使用 {{htmlattrxref("list", "input")}} 属性和 {{HTMLElement("datalist")}} 元素将自定义点添加到范围控件，但没有任何要求或 甚至是沿控件长度的标准化哈希或刻度线的建议。</p> <h4 id="范围控制模型">范围控制模型</h4> -<p>由于浏览器具有这种灵活性，并且迄今为止都不支持HTML为范围控件定义的所有功能，因此以下是一些模型，以向您展示在支持它们的浏览器中在macOS上可以得到的功能。</p> +<p>由于浏览器具有这种灵活性，并且迄今为止都不支持 HTML 为范围控件定义的所有功能，因此以下是一些模型，以向您展示在支持它们的浏览器中在 macOS 上可以得到的功能。</p> <h5 id="无装饰的范围控制">无装饰的范围控制</h5> @@ -228,7 +228,7 @@ original_slug: Web/HTML/Element/Input/范围 <h5 id="带散列标记的范围控件">带散列标记的范围控件</h5> -<p>此范围控件使用的 <code>list</code> 属性指定{{HTMLElement("datalist")}} 的ID，该ID定义了控件上的一系列带散列的标记。 其中有11个，因此在0％和每个10％标记处都有一个。 每个点均使用 {{HTMLElement("option")}} 元素表示，其元素 {{htmlattrxref("value", "option")}} 设置为应绘制标记的范围值。</p> +<p>此范围控件使用的 <code>list</code> 属性指定{{HTMLElement("datalist")}} 的 ID，该 ID 定义了控件上的一系列带散列的标记。 其中有 11 个，因此在 0％和每个 10％标记处都有一个。 每个点均使用 {{HTMLElement("option")}} 元素表示，其元素 {{htmlattrxref("value", "option")}} 设置为应绘制标记的范围值。</p> <table class="fullwidth standard-table"> <tbody> @@ -315,15 +315,15 @@ original_slug: Web/HTML/Element/Input/范围 </table> <div class="note"> -<p><strong>注意</strong>: 目前没有浏览器完全支持这些特性。例如，Firefox根本不支持散列标记和标签，而Chrome支持散列标记，但不支持标签。Chrome的66版本(66.0.3359.181)支持标签，但是 {{htmlelement("datalist")}} 标签必须使用CSS样式，因为它的 {{cssxref("display")}}属性默认设置为 <code>none</code> ，隐藏了标签。</p> +<p><strong>注意</strong>: 目前没有浏览器完全支持这些特性。例如，Firefox 根本不支持散列标记和标签，而 Chrome 支持散列标记，但不支持标签。Chrome 的 66 版本 (66.0.3359.181) 支持标签，但是 {{htmlelement("datalist")}} 标签必须使用 CSS 样式，因为它的 {{cssxref("display")}}属性默认设置为 <code>none</code> ，隐藏了标签。</p> </div> <h3 id="改变方向">改变方向</h3> <div class="xhidden"> -<p>使旋钮向左和向右滑动。 如果支持，我们将能够声明垂直高度，并通过声明高度值大于宽度值来使用CSS上下滑动。 任何主要的浏览器实际上尚未实现此功能。（请参阅{{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>)。也许它仍在讨论中。</p> +<p>使旋钮向左和向右滑动。 如果支持，我们将能够声明垂直高度，并通过声明高度值大于宽度值来使用 CSS 上下滑动。 任何主要的浏览器实际上尚未实现此功能。（请参阅{{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>)。也许它仍在讨论中。</p> -<p>同时，我们可以通过使用CSS变换旋转范围来使范围垂直，或者通过使用各自的方法定位每个浏览器引擎，包括通过将 {{cssxref('appearance')}} 设置为 <code>slider-vertical</code>, 在Firefox中使用非标准的<code>orient</code> 属性，或通过更改Internet Explorer和Edge的文本方向。</p> +<p>同时，我们可以通过使用 CSS 变换旋转范围来使范围垂直，或者通过使用各自的方法定位每个浏览器引擎，包括通过将 {{cssxref('appearance')}} 设置为 <code>slider-vertical</code>, 在 Firefox 中使用非标准的<code>orient</code> 属性，或通过更改 Internet Explorer 和 Edge 的文本方向。</p> <p>考虑以下范围控制：</p> @@ -337,7 +337,7 @@ original_slug: Web/HTML/Element/Input/范围 <h3 id="标准">标准</h3> -<p>根据规范，使其垂直需要添加CSS来更改控件的尺寸，以使其比宽度高，如下所示：</p> +<p>根据规范，使其垂直需要添加 CSS 来更改控件的尺寸，以使其比宽度高，如下所示：</p> <div id="Orientation_sample2"> <h4 id="CSS">CSS</h4> @@ -361,11 +361,11 @@ original_slug: Web/HTML/Element/Input/范围 <h3 id="变换：旋转（-90deg）">变换：旋转（-90deg）</h3> -<p>但是，您可以通过在侧面绘制水平范围控件来创建垂直范围控件。 最简单的方法是使用CSS：通过应用 {{cssxref("transform")}} 旋转元素，可以使其垂直。 让我们来看看。</p> +<p>但是，您可以通过在侧面绘制水平范围控件来创建垂直范围控件。 最简单的方法是使用 CSS：通过应用 {{cssxref("transform")}} 旋转元素，可以使其垂直。 让我们来看看。</p> <h4 id="HTML_2">HTML</h4> -<p>需要更新HTML，以将 {{HTMLElement("input")}} 包裹在 {{HTMLElement("div")}} 中，以便我们在执行转换后纠正布局（因为转换不会自动影响 页面的布局）：</p> +<p>需要更新 HTML，以将 {{HTMLElement("input")}} 包裹在 {{HTMLElement("div")}} 中，以便我们在执行转换后纠正布局（因为转换不会自动影响 页面的布局）：</p> <pre class="brush: html notranslate"><div class="slider-wrapper"> <input type="range" min="0" max="11" value="7" step="1"> @@ -373,7 +373,7 @@ original_slug: Web/HTML/Element/Input/范围 <h4 id="CSS_2">CSS</h4> -<p>现在我们需要一些CSS。 首先是包装器本身的CSS； 这指定了我们想要的显示模式和大小，以便页面正确布局； 本质上，它是为滑块保留页面的区域，以便旋转的滑块适合保留的空间而不会造成混乱。</p> +<p>现在我们需要一些 CSS。 首先是包装器本身的 CSS； 这指定了我们想要的显示模式和大小，以便页面正确布局； 本质上，它是为滑块保留页面的区域，以便旋转的滑块适合保留的空间而不会造成混乱。</p> <pre class="brush: css notranslate">.slider-wrapper { display: inline-block; @@ -393,7 +393,7 @@ original_slug: Web/HTML/Element/Input/范围 transform: rotate(-90deg); }</pre> -<p>控件的大小设置为150像素长x 20像素高。 边距设置为0， {{cssxref("transform-origin")}} 移至滑块旋转通过的空间的中间； 由于滑块配置为150像素宽，因此它将旋转通过每边150像素的框。 在每个轴上将原点偏移75像素，这意味着我们将围绕该空间的中心旋转。 最后，我们将逆时针旋转90°。 结果：旋转一个范围输入，因此最大值在顶部，最小值在底部。</p> +<p>控件的大小设置为 150 像素长 x 20 像素高。 边距设置为 0， {{cssxref("transform-origin")}} 移至滑块旋转通过的空间的中间； 由于滑块配置为 150 像素宽，因此它将旋转通过每边 150 像素的框。 在每个轴上将原点偏移 75 像素，这意味着我们将围绕该空间的中心旋转。 最后，我们将逆时针旋转 90°。 结果：旋转一个范围输入，因此最大值在顶部，最小值在底部。</p> <p>{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p> @@ -403,7 +403,7 @@ original_slug: Web/HTML/Element/Input/范围 <h4 id="HTML_3">HTML</h4> -<p>我们使用与前面的示例相同的HTML：</p> +<p>我们使用与前面的示例相同的 HTML：</p> <pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1"> </pre> @@ -420,11 +420,11 @@ original_slug: Web/HTML/Element/Input/范围 <h3 id="定向属性">定向属性</h3> -<p>仅在Firefox中，有一个非标准的 <code>orient</code> 属性。</p> +<p>仅在 Firefox 中，有一个非标准的 <code>orient</code> 属性。</p> <h4 id="HTML_4">HTML</h4> -<p>使用与前面示例类似的HTML，我们添加属性值为 <code>vertical</code>:</p> +<p>使用与前面示例类似的 HTML，我们添加属性值为 <code>vertical</code>:</p> <pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1" orient="vertical"> </pre> @@ -437,7 +437,7 @@ original_slug: Web/HTML/Element/Input/范围 <h4 id="HTML_5">HTML</h4> -<p>我们使用与前面的示例相同的HTML：</p> +<p>我们使用与前面的示例相同的 HTML：</p> <pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1"> </pre> @@ -458,14 +458,14 @@ original_slug: Web/HTML/Element/Input/范围 <h4 id="HTML_6">HTML</h4> -<p>对于Firefox，我们将<code>orient</code>属性的值保持为<code>vertical：</code></p> +<p>对于 Firefox，我们将<code>orient</code>属性的值保持为<code>vertical：</code></p> <pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1" orient="vertical"> </pre> <h4 id="CSS_5">CSS</h4> -<p>对于Edge和Internet Explorer，我们仅将输入类型作为目标，将写入模式从默认更改为 <code>bt-lr</code>, 或者从下至上，从左至右，然后添加 <code>-webkit-appearance: slider-vertical</code>用于所有基于-webkit的浏览器：</p> +<p>对于 Edge 和 Internet Explorer，我们仅将输入类型作为目标，将写入模式从默认更改为 <code>bt-lr</code>, 或者从下至上，从左至右，然后添加 <code>-webkit-appearance: slider-vertical</code>用于所有基于-webkit 的浏览器：</p> <pre class="brush: css notranslate">input[type="range"] { writing-mode: bt-lr; @@ -509,6 +509,6 @@ original_slug: Web/HTML/Element/Input/范围 <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface it's based upon</li> <li><code><a href="/en-US/docs/Web/HTML/Element/input/number"><input type="number"></a></code></li> <li>{{domxref('validityState.rangeOverflow')}} and {{domxref('validityState.rangeUnderflow')}}</li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">使用ConstantSourceNode控制多个参数</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">使用 ConstantSourceNode 控制多个参数</a></li> <li><a href="https://css-tricks.com/sliding-nightmare-understanding-range-input">设置范围元素的样式</a></li> </ul> diff --git a/files/zh-cn/web/html/element/input/reset/index.html b/files/zh-cn/web/html/element/input/reset/index.html index e24d084a31..5695cacd7b 100644 --- a/files/zh-cn/web/html/element/input/reset/index.html +++ b/files/zh-cn/web/html/element/input/reset/index.html @@ -16,10 +16,10 @@ translation_of: Web/HTML/Element/input/reset <div>{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}</div> -<p class="hidden">该交互式示例的源代码存储在GitHub存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>，并发起拉取请求。</p> +<p class="hidden">该交互式示例的源代码存储在 GitHub 存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>，并发起拉取请求。</p> <div class="note"> -<p>您通常应该尽量避免在表单中包含重置按钮。 它们很少有实用性，事实上更有可能使用户误点而感到沮丧（通常是在尝试单击“<a href="/zh-CN/docs/Web/HTML/Element/Input/submit">提交</a>”按钮时）。</p> +<p>您通常应该尽量避免在表单中包含重置按钮。 它们很少有实用性，事实上更有可能使用户误点而感到沮丧（通常是在尝试单击 “<a href="/zh-CN/docs/Web/HTML/Element/Input/submit">提交</a>” 按钮时）。</p> </div> <table class="properties"> @@ -49,7 +49,7 @@ translation_of: Web/HTML/Element/input/reset <h2 id="值">值</h2> -<p><code><input type="reset"></code> 元素的 <code>{{htmlattrxref("value", "input")}}</code> 属性包含一个用做按钮标签的 <code>{{domxref("DOMString")}}</code>，诸如 <code>reset</code>之类的按钮没有其他值.</p> +<p><code><input type="reset"></code> 元素的 <code>{{htmlattrxref("value", "input")}}</code> 属性包含一个用做按钮标签的 <code>{{domxref("DOMString")}}</code>，诸如 <code>reset</code>之类的按钮没有其他值。</p> <div id="summary-example3"> <pre class="brush: html"><input type="reset" value="Reset the form"></pre> @@ -57,7 +57,7 @@ translation_of: Web/HTML/Element/input/reset <p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> -<p>如果您未指定 <code>value</code>，则会获得一个带有默认标签的按钮（通常为“重置”，但这将根据 {{Glossary("user agent")}} 而有所不同：</p> +<p>如果您未指定 <code>value</code>，则会获得一个带有默认标签的按钮（通常为 “重置”，但这将根据 {{Glossary("user agent")}} 而有所不同：</p> <div id="summary-example1"> <pre class="brush: html"><input type="reset"></pre> @@ -67,7 +67,7 @@ translation_of: Web/HTML/Element/input/reset <h2 id="使用重置按钮">使用重置按钮</h2> -<p><code><input type =“ reset”></code> 按钮用于重置表单。 如果您要创建自定义按钮，则使用JavaScript自定义行为，您需要使用 <code><a href="/zh-CN/docs/Web/HTML/Element/Input/button"><input type="button"></a></code>，或者最好使用 <code>{{htmlelement("button")}}</code> 元素。</p> +<p><code><input type =“ reset”></code> 按钮用于重置表单。 如果您要创建自定义按钮，则使用 JavaScript 自定义行为，您需要使用 <code><a href="/zh-CN/docs/Web/HTML/Element/Input/button"><input type="button"></a></code>，或者最好使用 <code>{{htmlelement("button")}}</code> 元素。</p> <h3 id="一个简单的重置按钮">一个简单的重置按钮</h3> @@ -84,7 +84,7 @@ translation_of: Web/HTML/Element/input/reset </form> </pre> -<p>如下所示:</p> +<p>如下所示：</p> <p>{{EmbedLiveSample("A_simple_reset_button", 650, 100)}}</p> @@ -94,7 +94,7 @@ translation_of: Web/HTML/Element/input/reset <p>添加键盘快捷键到提交按钮 — 就像您使用 <code>{{HTMLElement("input")}}</code> 一样做一些事情 — 请使用 <code>{{htmlattrxref("accesskey")}}</code> 全局属性。</p> -<p>在这个例子中， <kbd>r</kbd> 被指定为访问键 （您需要按 <kbd>r</kbd> 键与浏览器或操作系统的特定键相组合； 关于这些命令请参见 <code>{{htmlattrxref("accesskey")}}</code> ）。</p> +<p>在这个例子中， <kbd>r</kbd> 被指定为访问键（您需要按 <kbd>r</kbd> 键与浏览器或操作系统的特定键相组合； 关于这些命令请参见 <code>{{htmlattrxref("accesskey")}}</code> ）。</p> <pre class="brush: html"><form> <div> diff --git a/files/zh-cn/web/html/element/input/search/index.html b/files/zh-cn/web/html/element/input/search/index.html index 64afa2ba8d..2148071515 100644 --- a/files/zh-cn/web/html/element/input/search/index.html +++ b/files/zh-cn/web/html/element/input/search/index.html @@ -3,7 +3,7 @@ title: <input type="search"> slug: Web/HTML/Element/Input/search tags: - HTML - - HTML表单 + - HTML 表单 - 参考 - 搜索 - 表单 @@ -13,11 +13,11 @@ translation_of: Web/HTML/Element/input/search --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><code>{{HTMLElement("input")}}</code> 元素的 <code><strong>search</strong></code> 类型是 </span>专为用户输入搜索查询而设计的文本字段。功能上与<span class="seoSummary"> <code><a href="/en-US/docs/Web/HTML/Element/input/text">text</a></code> 输入相同, 但是可以通过 <code>{{Glossary("user agent")}}</code> 进行不同样式的设置。</span></p> +<p><span class="seoSummary"><code>{{HTMLElement("input")}}</code> 元素的 <code><strong>search</strong></code> 类型是 </span>专为用户输入搜索查询而设计的文本字段。功能上与<span class="seoSummary"> <code><a href="/en-US/docs/Web/HTML/Element/input/text">text</a></code> 输入相同，但是可以通过 <code>{{Glossary("user agent")}}</code> 进行不同样式的设置。</span></p> <div>{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}</div> -<div class="hidden">该交互式示例的源存储在GitHub存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发起拉取请求。</div> +<div class="hidden">该交互式示例的源存储在 GitHub 存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发起拉取请求。</div> <table class="properties"> <tbody> @@ -46,7 +46,7 @@ translation_of: Web/HTML/Element/input/search <h2 id="值">值</h2> -<p><code>{{htmlattrxref("value", "input")}}</code> 属性包含 <code>{{domxref("DOMString")}}</code> 代表搜索字段中包含的值。 您可以在JavaScript使用 <code>{{domxref("HTMLInputElement.value")}}</code> 属性。</p> +<p><code>{{htmlattrxref("value", "input")}}</code> 属性包含 <code>{{domxref("DOMString")}}</code> 代表搜索字段中包含的值。 您可以在 JavaScript 使用 <code>{{domxref("HTMLInputElement.value")}}</code> 属性。</p> <pre class="brush: js notranslate">searchTerms = mySearch.value; </pre> @@ -67,7 +67,7 @@ translation_of: Web/HTML/Element/input/search <tbody> <tr> <td><code>{{anch("list")}}</code></td> - <td><code><datalist></code> 元素的ID，其中包含可选的预定义自动完成选项。</td> + <td><code><datalist></code> 元素的 ID，其中包含可选的预定义自动完成选项。</td> </tr> <tr> <td><code>{{anch("maxlength")}}</code></td> @@ -104,15 +104,15 @@ translation_of: Web/HTML/Element/input/search <h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> -<p>用户可以在搜索字段中输入的最大字符数（以UTF-16代码为单位）。 必须为0或更高的整数。 如果未指定 <code>maxlength</code> 或指定了无效值，则搜索字段没有最大长度。 此值还必须大于或等于 <code>minlength</code> 的值。</p> +<p>用户可以在搜索字段中输入的最大字符数（以 UTF-16 代码为单位）。 必须为 0 或更高的整数。 如果未指定 <code>maxlength</code> 或指定了无效值，则搜索字段没有最大长度。 此值还必须大于或等于 <code>minlength</code> 的值。</p> -<p>如果输入到字段中的文本的长度大于 <code>maxlength</code> UTF-16代码单元的长度，则输入无法通过约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）。</p> +<p>如果输入到字段中的文本的长度大于 <code>maxlength</code> UTF-16 代码单元的长度，则输入无法通过约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）。</p> <h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> -<p>用户可以在搜索字段中输入的最小字符数（以UTF-16代码为单位）。 该值必须是小于或等于 <code>maxlength</code> 指定的值的非负整数值。 如果未指定 <code>minlength</code> 或指定了无效值，则搜索输入没有最小长度。</p> +<p>用户可以在搜索字段中输入的最小字符数（以 UTF-16 代码为单位）。 该值必须是小于或等于 <code>maxlength</code> 指定的值的非负整数值。 如果未指定 <code>minlength</code> 或指定了无效值，则搜索输入没有最小长度。</p> -<p>如果在字段中输入的文本的长度小于 <code>minlength</code> UTF-16代码单元的长度，则搜索字段将无法通过约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）。</p> +<p>如果在字段中输入的文本的长度小于 <code>minlength</code> UTF-16 代码单元的长度，则搜索字段将无法通过约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）。</p> <h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> @@ -182,7 +182,7 @@ translation_of: Web/HTML/Element/input/search <h3 id="htmlattrdefresults_non-standard_inline">{{htmlattrdef("results")}} {{non-standard_inline}}</h3> <div id="results-include"> -<p><code>results</code> 属性是一个数字值（仅受Safari支持），可让您覆盖要在 <code>{{HTMLElement("input")}}</code> 元素的本机提供的先前搜索查询的下拉菜单中显示的最大条目数。</p> +<p><code>results</code> 属性是一个数字值（仅受 Safari 支持），可让您覆盖要在 <code>{{HTMLElement("input")}}</code> 元素的本机提供的先前搜索查询的下拉菜单中显示的最大条目数。</p> <p>该值必须是非负十进制数字。 如果未提供或给出了无效值，则使用浏览器的默认最大条目数。</p> </div> @@ -212,11 +212,11 @@ translation_of: Web/HTML/Element/input/search <h3 id="搜索类型和文本类型之间的差异">搜索类型和文本类型之间的差异</h3> -<p>主要的基本区别在于浏览器处理它们的方式。 首先要注意的是，某些浏览器显示一个十字图标，如果需要，可以单击该十字图标以立即删除搜索词。 以下屏幕截图来自Chrome：</p> +<p>主要的基本区别在于浏览器处理它们的方式。 首先要注意的是，某些浏览器显示一个十字图标，如果需要，可以单击该十字图标以立即删除搜索词。 以下屏幕截图来自 Chrome：</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15235/chrome-cross-icon.png" style="display: block; height: 31px; margin: 0px auto; width: 144px;"></p> -<p>此外，现代浏览器还倾向于自动存储先前在各个域中输入的搜索词，然后在该域的搜索输入中执行后续搜索时，这些搜索词会作为自动完成选项出现。 这有助于随着时间的流逝倾向于在相同或相似搜索查询上进行搜索的用户。 此屏幕截图来自Firefox：</p> +<p>此外，现代浏览器还倾向于自动存储先前在各个域中输入的搜索词，然后在该域的搜索输入中执行后续搜索时，这些搜索词会作为自动完成选项出现。 这有助于随着时间的流逝倾向于在相同或相似搜索查询上进行搜索的用户。 此屏幕截图来自 Firefox：</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15237/firefox-auto-complete.png" style="display: block; height: 83px; margin: 0px auto; width: 171px;">现在，让我们看看可以应用于搜索表单的一些有用的技巧。</p> @@ -238,7 +238,7 @@ translation_of: Web/HTML/Element/input/search <h3 id="搜索表单标签和辅助功能">搜索表单标签和辅助功能</h3> -<p>搜索表单的一个问题是它们的可访问性。 常见的设计惯例是不为搜索字段提供标签（尽管可能会有放大镜图标或类似图标），因为由于放置位置的原因，搜索表单的目的通常对于视力正常的用户而言相当明显 （<a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">这个例子展示了一个典型的模式</a>）。</p> +<p>搜索表单的一个问题是它们的可访问性。 常见的设计惯例是不为搜索字段提供标签（尽管可能会有放大镜图标或类似图标），因为由于放置位置的原因，搜索表单的目的通常对于视力正常的用户而言相当明显（<a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">这个例子展示了一个典型的模式</a>）。</p> <p>但是，这可能会使屏幕阅读器用户感到困惑，因为他们不会对搜索输入内容有任何口头指示。 解决此问题而不会影响您的视觉设计的一种方法是使用 <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> 功能：</p> @@ -270,7 +270,7 @@ translation_of: Web/HTML/Element/input/search <h3 id="输入框元素大小">输入框元素大小</h3> -<p>可以使用 <code>{{htmlattrxref("size", "input")}}</code> 属性来控制输入框的尺寸。 使用它，您可以指定输入框一次可以显示的字符数。 例如，在此示例中，搜索框为30个字符宽：</p> +<p>可以使用 <code>{{htmlattrxref("size", "input")}}</code> 属性来控制输入框的尺寸。 使用它，您可以指定输入框一次可以显示的字符数。 例如，在此示例中，搜索框为 30 个字符宽：</p> <pre class="brush: html notranslate"><form> <div> @@ -289,12 +289,12 @@ translation_of: Web/HTML/Element/input/search <p><code><input></code> 元素的 <code>search</code> 类型具有与常规文本 <code>text</code> 输入相同的验证功能。 通常，您不太可能希望对搜索框使用验证功能。 在许多情况下，应该只允许用户搜索任何内容，但是有几种情况需要考虑，例如搜索已知格式的数据。</p> <div class="note"> -<p><strong>注意：</strong>HTML表单验证不能替代确保输入数据格式正确的脚本。 对于某人来说，对HTML进行调整以使其绕过验证或完全删除验证太容易了。 有人也可以完全绕开您的HTML并将数据直接提交到您的服务器。 如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大，类型错误的数据等等）输入数据库时，灾难可能会发生。</p> +<p><strong>注意：</strong>HTML 表单验证不能替代确保输入数据格式正确的脚本。 对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了。 有人也可以完全绕开您的 HTML 并将数据直接提交到您的服务器。 如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大，类型错误的数据等等）输入数据库时，灾难可能会发生。</p> </div> <h3 id="样式注意事项">样式注意事项</h3> -<p>有一些有用的伪类可用于设置有效/无效表单元素的样式： <code>{{cssxref(":valid")}}</code> 和 <code>{{cssxref(":invalid")}}</code>。在本节中，我们将使用以下CSS，它将在包含有效值的输入旁边放置一个复选标记（勾号），并在包含无效值的输入旁边放置一个叉号。</p> +<p>有一些有用的伪类可用于设置有效/无效表单元素的样式： <code>{{cssxref(":valid")}}</code> 和 <code>{{cssxref(":invalid")}}</code>。在本节中，我们将使用以下 CSS，它将在包含有效值的输入旁边放置一个复选标记（勾号），并在包含无效值的输入旁边放置一个叉号。</p> <pre class="brush: css notranslate">input:invalid ~ span:after { content: '✖'; @@ -345,7 +345,7 @@ input:valid ~ span:after { <p>{{ EmbedLiveSample('Making_input_required', 600, 40) }}</p> -<p>另外，如果您尝试在未输入搜索词的情况下提交表单，浏览器将显示一条消息。 以下示例来自Firefox：</p> +<p>另外，如果您尝试在未输入搜索词的情况下提交表单，浏览器将显示一条消息。 以下示例来自 Firefox：</p> <p><img alt="form field with attached message that says Please fill out this field" src="https://mdn.mozillademos.org/files/15241/firefox-required-message.png" style="display: block; margin: 0 auto;"></p> @@ -355,7 +355,7 @@ input:valid ~ span:after { <p>您可以使用 <code>{{htmlattrxref("minlength", "input")}}</code> 属性为输入的值指定最小长度（以字符为单位）； 同样，使用 <code>{{htmlattrxref("maxlength", "input")}}</code> 设置输入值的最大长度。</p> -<p>下面的示例要求输入的值的长度为4–8个字符。</p> +<p>下面的示例要求输入的值的长度为 4–8 个字符。</p> <pre class="brush: html notranslate"><form> <div> @@ -390,13 +390,13 @@ input:valid ~ span:after { <p>{{ EmbedLiveSample('Input_value_length', 600, 40) }}</p> -<p>如果您尝试提交少于4个字符的表单，则会收到相应的错误消息（不同的浏览器会有所不同）。 如果尝试超过8个字符，浏览器将不允许您访问。</p> +<p>如果您尝试提交少于 4 个字符的表单，则会收到相应的错误消息（不同的浏览器会有所不同）。 如果尝试超过 8 个字符，浏览器将不允许您访问。</p> <h3 id="指定模式">指定模式</h3> <p>您可以使用 <code>{{htmlattrxref("pattern", "input")}}</code> 属性指定一个正则表达式，输入值必须遵循该正则表达式才能被视为有效 (请参照 <a href="/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">Validating against a regular expression</a>).</p> -<p>让我们看一个例子。 假设我们想提供一个产品ID搜索表格，这些ID都是由两个字母和四个数字组成的代码。 以下示例对此进行了介绍：</p> +<p>让我们看一个例子。 假设我们想提供一个产品 ID 搜索表格，这些 ID 都是由两个字母和四个数字组成的代码。 以下示例对此进行了介绍：</p> <pre class="brush: html notranslate"><form> <div> diff --git a/files/zh-cn/web/html/element/input/submit/index.html b/files/zh-cn/web/html/element/input/submit/index.html index c2a7540199..d84d8ded79 100644 --- a/files/zh-cn/web/html/element/input/submit/index.html +++ b/files/zh-cn/web/html/element/input/submit/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTML/Element/input/submit --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><strong><code>submit</code></strong> 类型的 {{HTMLElement("input")}} 元素被渲染成按钮. 当 {{event("click")}} 事件发生时(用户点击按钮是一个典型的点击事件), {{Glossary("用户代理")}} 试图提交表单到服务器.</span></p> +<p><span class="seoSummary"><strong><code>submit</code></strong> 类型的 {{HTMLElement("input")}} 元素被渲染成按钮。当 {{event("click")}} 事件发生时 (用户点击按钮是一个典型的点击事件), {{Glossary("用户代理")}} 试图提交表单到服务器。</span></p> <div id="summary-example2"> <pre class="brush: html"><input type="submit" value="发送请求"></pre> @@ -58,7 +58,7 @@ translation_of: Web/HTML/Element/input/submit <p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> -<p>如果没有指定一个<code>value</code> 值, 按钮将会有一个通过用户代理选择的默认label。 这个label可能是 "Submit" 或者"Submit Query." 这里有一个默认label的提交按钮:</p> +<p>如果没有指定一个<code>value</code> 值，按钮将会有一个通过用户代理选择的默认 label。 这个 label 可能是 "Submit" 或者"Submit Query." 这里有一个默认 label 的提交按钮：</p> <div id="summary-example1"> <pre class="brush: html"><input type="submit"></pre> @@ -80,7 +80,7 @@ translation_of: Web/HTML/Element/input/submit <tbody> <tr> <td><code>{{anch("formaction")}}</code></td> - <td>提交表单数据的URL； 覆盖表单的{{htmlattrxref("action", "form")}} 属性（如果有）</td> + <td>提交表单数据的 URL； 覆盖表单的{{htmlattrxref("action", "form")}} 属性（如果有）</td> </tr> <tr> <td><code>{{anch("formenctype")}}</code></td> @@ -88,7 +88,7 @@ translation_of: Web/HTML/Element/input/submit </tr> <tr> <td><code>{{anch("formmethod")}}</code></td> - <td>提交表单时使用的HTTP方法 ({{HTTPMethod("get")}} 或 {{HTTPMethod("post")}}) </td> + <td>提交表单时使用的 HTTP 方法 ({{HTTPMethod("get")}} 或 {{HTTPMethod("post")}}) </td> </tr> <tr> <td><code>{{anch("formnovalidate")}}</code></td> @@ -103,7 +103,7 @@ translation_of: Web/HTML/Element/input/submit <h3 id="htmlattrdefformaction">{{htmlattrdef("formaction")}}</h3> -<p>一个字符串，指示要将数据提交到的URL。 这优先于拥有 {{HTMLElement("input")}} 的 {{HTMLElement("form")}} 元素上的 {{htmlattrxref("action", "form")}} 属性。</p> +<p>一个字符串，指示要将数据提交到的 URL。 这优先于拥有 {{HTMLElement("input")}} 的 {{HTMLElement("form")}} 元素上的 {{htmlattrxref("action", "form")}} 属性。</p> <p>此属性在 <code><a href="/en-US/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 元素和{{HTMLElement("button")}} 元素上也可用。</p> @@ -113,9 +113,9 @@ translation_of: Web/HTML/Element/input/submit <dl> <dt><code>application/x-www-form-urlencoded</code></dt> - <dd>这是默认值，它使用 {{jsxref("encodeURI", "encodeURI()")}} 之类的算法对文本进行URL编码后，以字符串形式发送表单数据。</dd> + <dd>这是默认值，它使用 {{jsxref("encodeURI", "encodeURI()")}} 之类的算法对文本进行 URL 编码后，以字符串形式发送表单数据。</dd> <dt><code>multipart/form-data</code></dt> - <dd>使用 {{domxref("FormData")}} API来管理数据，从而允许将文件提交到服务器。 如果您的表单包含 {{htmlattrxref("type", "input")}} <code>file</code> (<code><a href="/en-US/docs/Web/HTML/Element/input/file"><input type="file"></a></code>) 的任何 {{HTMLElement("input")}} 元素，则必须使用此编码类型。</dd> + <dd>使用 {{domxref("FormData")}} API 来管理数据，从而允许将文件提交到服务器。 如果您的表单包含 {{htmlattrxref("type", "input")}} <code>file</code> (<code><a href="/en-US/docs/Web/HTML/Element/input/file"><input type="file"></a></code>) 的任何 {{HTMLElement("input")}} 元素，则必须使用此编码类型。</dd> <dt><code>text/plain</code></dt> <dd>纯文本; 通常仅对调试有用，因此您可以轻松查看要提交的数据。</dd> </dl> @@ -126,13 +126,13 @@ translation_of: Web/HTML/Element/input/submit <h3 id="htmlattrdefformmethod">{{htmlattrdef("formmethod")}}</h3> -<p>一个字符串，指示提交表单数据时要使用的HTTP方法； 此值将覆盖拥有表单上给出的任何 {{htmlattrxref("method", "form")}} 属性。 允许的值为：</p> +<p>一个字符串，指示提交表单数据时要使用的 HTTP 方法； 此值将覆盖拥有表单上给出的任何 {{htmlattrxref("method", "form")}} 属性。 允许的值为：</p> <dl> <dt><code>get</code></dt> - <dd>通过从 <code>formaction</code> 或 {{htmlattrxref("action", "form")}} 通过从 ("?") 字符，然后附加表单数据，按照如下所述进行编码来构造URL 通过 <code>formenctype</code> 或表单的 {{htmlattrxref("enctype", "form")}} 属性。 然后，使用HTTP {{HTTPMethod("get")}}请求将该URL发送到服务器。 此方法适用于仅包含ASCII字符且没有副作用的简单形式。 这是默认值。</dd> + <dd>通过从 <code>formaction</code> 或 {{htmlattrxref("action", "form")}} 通过从 ("?") 字符，然后附加表单数据，按照如下所述进行编码来构造 URL 通过 <code>formenctype</code> 或表单的 {{htmlattrxref("enctype", "form")}} 属性。 然后，使用 HTTP {{HTTPMethod("get")}}请求将该 URL 发送到服务器。 此方法适用于仅包含 ASCII 字符且没有副作用的简单形式。 这是默认值。</dd> <dt><code>post</code></dt> - <dd>表单的数据包含在请求的正文中，该请求的正文使用HTTP {{HTTPMethod("post")}} 发送到由 <code>formaction</code> 或 {{htmlattrxref("action", "form")}} 属性指定的URL 请求。 此方法支持复杂的数据和文件附件。</dd> + <dd>表单的数据包含在请求的正文中，该请求的正文使用 HTTP {{HTTPMethod("post")}} 发送到由 <code>formaction</code> 或 {{htmlattrxref("action", "form")}} 属性指定的 URL 请求。 此方法支持复杂的数据和文件附件。</dd> <dt><code>dialog</code></dt> <dd>此方法用于指示按钮仅关闭与输入关联的对话框，而根本不传输表单数据。</dd> </dl> @@ -166,9 +166,9 @@ translation_of: Web/HTML/Element/input/submit <h2 id="使用提交按钮">使用提交按钮</h2> -<p><code><input type="submit"></code> 按钮用于提交form表单. 如果你想要创建一个自定义的按钮，然后通过JavaScript自定义按钮的行为，你需要使用 <code><a href="/en-US/docs/Web/HTML/Element/input/button"><input type="button"></a></code>, 或者使用更好的 {{htmlelement("button")}} 元素.</p> +<p><code><input type="submit"></code> 按钮用于提交 form 表单。如果你想要创建一个自定义的按钮，然后通过 JavaScript 自定义按钮的行为，你需要使用 <code><a href="/en-US/docs/Web/HTML/Element/input/button"><input type="button"></a></code>, 或者使用更好的 {{htmlelement("button")}} 元素。</p> -<p>如果你选择使用<code><button></code> 在你的form表单里创建按钮, 请记住: 它只是在{{HTMLElement("form")}}内部的 <code><button></code> ， 应该被当作 "submit" 按钮来处理。 所以你应该有一个明确指定哪一个按钮是提交按钮的习惯。</p> +<p>如果你选择使用<code><button></code> 在你的 form 表单里创建按钮，请记住: 它只是在{{HTMLElement("form")}}内部的 <code><button></code> ， 应该被当作 "submit" 按钮来处理。 所以你应该有一个明确指定哪一个按钮是提交按钮的习惯。</p> <h3 id="一个简单的提交按钮">一个简单的提交按钮</h3> @@ -185,17 +185,17 @@ translation_of: Web/HTML/Element/input/submit </form> </pre> -<p>渲染效果如下:</p> +<p>渲染效果如下：</p> <p>{{EmbedLiveSample("A_simple_submit_button", 650, 100)}}</p> -<p>试着输入一些文字到文本字段, 然后提交表单.</p> +<p>试着输入一些文字到文本字段，然后提交表单。</p> -<p>在提交时，键值对数据将会被发送到服务端。在此列子中，字符串将会是 <code>"text=<em>usertext</em>"</code>, "usertext" 是用户输入的字符在转换为被保护的特殊字符. 数据被如何提交、提交到哪都由 <code><form>的设置决定</code>; 到<a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a> 获取更多细节.</p> +<p>在提交时，键值对数据将会被发送到服务端。在此列子中，字符串将会是 <code>"text=<em>usertext</em>"</code>, "usertext" 是用户输入的字符在转换为被保护的特殊字符。数据被如何提交、提交到哪都由 <code><form>的设置决定</code>; 到<a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a> 获取更多细节。</p> <h3 id="添加提交的快捷键">添加提交的快捷键</h3> -<p>键盘快捷键就是使用键盘上的按键, 让用户使用按键或组合按键来触发按钮。 为了在提交按钮上添加键盘快捷键— 就像使用任何有实际意义的 {{HTMLElement("input")}} 一样，您可以使用 {{htmlattrxref("accesskey")}} 全局属性。</p> +<p>键盘快捷键就是使用键盘上的按键，让用户使用按键或组合按键来触发按钮。 为了在提交按钮上添加键盘快捷键— 就像使用任何有实际意义的 {{HTMLElement("input")}} 一样，您可以使用 {{htmlattrxref("accesskey")}} 全局属性。</p> <p>在此示例中，将 <kbd>s</kbd> 指定为访问键 (指定为访问键 <kbd>s</kbd> p键加上浏览器/操作系统组合的特定修饰键。为了避免与用户代理自身的键盘快捷键冲突，请使用不同的修饰键 而不是主机上其他快捷方式的访问键。有关更多详细信息，请参见 {{htmlattrxref("accesskey")}}。</p> @@ -212,7 +212,7 @@ translation_of: Web/HTML/Element/input/submit </div> </form></pre> -<p>例如，在Mac版Firefox中，按 <kbd>Control</kbd>-<kbd>Option</kbd>-<kbd>S</kbd> 会触发“发送”按钮，而Windows上的Chrome使用 <kbd>Alt</kbd>+<kbd>S</kbd>.</p> +<p>例如，在 Mac 版 Firefox 中，按 <kbd>Control</kbd>-<kbd>Option</kbd>-<kbd>S</kbd> 会触发 “发送” 按钮，而 Windows 上的 Chrome 使用 <kbd>Alt</kbd>+<kbd>S</kbd>.</p> <p>{{EmbedLiveSample("Adding_a_submit_keyboard_shortcut", 650, 100)}}</p> @@ -226,7 +226,7 @@ translation_of: Web/HTML/Element/input/submit <pre class="brush: html"><input type="submit" value="Disabled" disabled></pre> </div> -<p>您可以在运行时通过简单地将<code>disable</code>设置为<code>true</code>或<code>false</code>来启用和禁用按钮。 在JavaScript中，这看起来像 <code>btn.disabled = true</code> or <code>btn.disabled = false</code>.</p> +<p>您可以在运行时通过简单地将<code>disable</code>设置为<code>true</code>或<code>false</code>来启用和禁用按钮。 在 JavaScript 中，这看起来像 <code>btn.disabled = true</code> or <code>btn.disabled = false</code>.</p> <div class="note"> <p>有关启用和禁用按钮的更多想法，请参见 <code><a href="/en-US/docs/Web/HTML/Element/input/button#Disabling_and_enabling_a_button"><input type="button"></a></code> 。</p> @@ -238,7 +238,7 @@ translation_of: Web/HTML/Element/input/submit <h2 id="例子">例子</h2> -<p>我们在上面提供了一些简单的示例。 关于提交按钮，实际上没有什么可说的。 有时将这种控件称为“简单按钮”是有原因的。</p> +<p>我们在上面提供了一些简单的示例。 关于提交按钮，实际上没有什么可说的。 有时将这种控件称为 “简单按钮” 是有原因的。</p> <h2 id="规范">规范</h2> diff --git a/files/zh-cn/web/html/element/input/tel/index.html b/files/zh-cn/web/html/element/input/tel/index.html index 8c5eb25600..576fb67d77 100644 --- a/files/zh-cn/web/html/element/input/tel/index.html +++ b/files/zh-cn/web/html/element/input/tel/index.html @@ -14,12 +14,12 @@ translation_of: Web/HTML/Element/input/tel --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">{{HTMLElement("input")}} <code><strong>"tel"</strong></code> 类型的元素用于让用户输入和编辑电话号码。 Unli不同于<code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code> 和 <code><a href="/en-US/docs/Web/HTML/Element/input/url"><input type="url"></a></code> , 在提交表格之前，输入值不会被自动验证为特定格式，因为世界各地的电话号码格式差别很大。</span></p> +<p><span class="seoSummary">{{HTMLElement("input")}} <code><strong>"tel"</strong></code> 类型的元素用于让用户输入和编辑电话号码。 Unli 不同于<code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code> 和 <code><a href="/en-US/docs/Web/HTML/Element/input/url"><input type="url"></a></code> , 在提交表格之前，输入值不会被自动验证为特定格式，因为世界各地的电话号码格式差别很大。</span></p> -<p>尽管 <code>tel</code> 类型的输入在功能上和 <code>text</code> 输入一致, 但它们确实有用; 其中最明显的就是移动浏览器— 特别是在手机上 — 可能会选择提供为输入电话号码而优化的自定义键盘。使用电话号码的特定输入类型也使添加自定义验证和处理电话号码更方便。</p> +<p>尽管 <code>tel</code> 类型的输入在功能上和 <code>text</code> 输入一致，但它们确实有用; 其中最明显的就是移动浏览器— 特别是在手机上 — 可能会选择提供为输入电话号码而优化的自定义键盘。使用电话号码的特定输入类型也使添加自定义验证和处理电话号码更方便。</p> <div class="note"> -<p>不支持 <code>"tel"</code> 类型的浏览器会默认使用 <code><a href="/en-US/docs/Web/HTML/Element/input/text">"text"</a></code> 类型输入.</p> +<p>不支持 <code>"tel"</code> 类型的浏览器会默认使用 <code><a href="/en-US/docs/Web/HTML/Element/input/text">"text"</a></code> 类型输入。</p> </div> <div id="Basic_example"> @@ -59,13 +59,13 @@ translation_of: Web/HTML/Element/input/tel <h2 id="使用_tel_输入">使用 tel 输入</h2> -<p>电话号码是网络上非常普遍收集的数据类型。例如，在创建任何类型的注册或电子商务网站时，无论出于商业目的还是出于紧急联系目的，您都可能需要向用户索要电话号码。鉴于通常输入的电话号码是多少，不幸的是，用于验证电话号码的“一刀切”解决方案是不实际的。</p> +<p>电话号码是网络上非常普遍收集的数据类型。例如，在创建任何类型的注册或电子商务网站时，无论出于商业目的还是出于紧急联系目的，您都可能需要向用户索要电话号码。鉴于通常输入的电话号码是多少，不幸的是，用于验证电话号码的 “一刀切” 解决方案是不实际的。</p> <p>幸运的是，您可以考虑自己网站的要求，并自行实施适当的验证级别。有关详细信息，请参阅下面的 {{anch("Validation")}}</p> <h3 id="自定义键盘">自定义键盘</h3> -<p><code><input type="tel"></code> 主要优势是它可以在移动浏览器显示一个特殊的电话号码输入键盘, For 例如，这是键盘在几种设备上的外观。</p> +<p><code><input type="tel"></code> 主要优势是它可以在移动浏览器显示一个特殊的电话号码输入键盘，For 例如，这是键盘在几种设备上的外观。</p> <table class="standard-table"> <caption>移动设备上自定义键盘的示例。</caption> @@ -83,9 +83,9 @@ translation_of: Web/HTML/Element/input/tel </tbody> </table> -<h3 id="一个简单的tel输入">一个简单的tel输入</h3> +<h3 id="一个简单的tel输入">一个简单的 tel 输入</h3> -<p>在最基本的形式中，tel输入可以这样实现：</p> +<p>在最基本的形式中，tel 输入可以这样实现：</p> <pre class="brush: html"><label for="telNo">Phone number:</label> <input id="telNo" name="telNo" type="tel"></pre> @@ -96,7 +96,7 @@ translation_of: Web/HTML/Element/input/tel <h3 id="占位字符">占位字符</h3> -<p>有时候提供关于输入数据应该采用什么形式的上下文提示是很有帮助的。如果页面设计没有为每个{{HTMLElement("input")}}页面提供描述性标签，这可能是特别重要的 。所以需要占位符。一个占位符是一个值，它通过提供一个有效值的例子来演示值的形式，当元素的值是“”时，它显示在编辑框中。一旦数据输入框中，占位符消失;如果该框被清空，占位符重新出现。</p> +<p>有时候提供关于输入数据应该采用什么形式的上下文提示是很有帮助的。如果页面设计没有为每个{{HTMLElement("input")}}页面提供描述性标签，这可能是特别重要的 。所以需要占位符。一个占位符是一个值，它通过提供一个有效值的例子来演示值的形式，当元素的值是 “” 时，它显示在编辑框中。一旦数据输入框中，占位符消失;如果该框被清空，占位符重新出现。</p> <p>在这里，我们有<code>"tel"</code> 输入的占位符<code>"123-4567-8901"</code>。请注意占位符如何消失并在编辑字段内容时重新出现。</p> @@ -111,7 +111,7 @@ translation_of: Web/HTML/Element/input/tel <h4 id="物理输入元素大小">物理输入元素大小</h4> -<p>可以使用 {{htmlattrxref("size", "input")}} 属性来控制输入框的物理大小, 使用它,你可以指定输入框一次可显示的字符数,在下面的例子中 <code>tel</code> 编辑框是20个字符的宽度:</p> +<p>可以使用 {{htmlattrxref("size", "input")}} 属性来控制输入框的物理大小，使用它，你可以指定输入框一次可显示的字符数，在下面的例子中 <code>tel</code> 编辑框是 20 个字符的宽度：</p> <pre class="brush: html"><input id="telNo" name="telNo" type="tel" size="20"></pre> @@ -120,9 +120,9 @@ translation_of: Web/HTML/Element/input/tel <h4 id="元素值的长度">元素值的长度</h4> -<p><code>size</code> 和电话号码的长度限制是分开的, 你可以使用 {{htmlattrxref("minlength", "input")}} 属性为输入电话的最小长度;同样使用 {{htmlattrxref("maxlength", "input")}} 设置输入电话号码的最大长度.</p> +<p><code>size</code> 和电话号码的长度限制是分开的， 你可以使用 {{htmlattrxref("minlength", "input")}} 属性为输入电话的最小长度;同样使用 {{htmlattrxref("maxlength", "input")}} 设置输入电话号码的最大长度。</p> -<p>下面的示例创建了一个20个字符的电话号码输入框，要求内容不少于9个字符且不超过14个字符。</p> +<p>下面的示例创建了一个 20 个字符的电话号码输入框，要求内容不少于 9 个字符且不超过 14 个字符。</p> <pre class="brush: html"><input id="telNo" name="telNo" type="tel" size="20" minlength="9" maxlength="14"></pre> @@ -130,12 +130,12 @@ translation_of: Web/HTML/Element/input/tel <p>{{EmbedLiveSample("Element_value_length", 600, 40) }}</p> <div class="note"> -<p><strong>注意</strong>: 上述属性确实会影响 {{anch("validation", "Validation")}} — 如果值的长度小于9个字符，或者大于14个，上述示例的输入将被视为无效。甚至不会让你输入超过最大长度的值。</p> +<p><strong>注意</strong>: 上述属性确实会影响 {{anch("validation", "Validation")}} — 如果值的长度小于 9 个字符，或者大于 14 个，上述示例的输入将被视为无效。甚至不会让你输入超过最大长度的值。</p> </div> <h3 id="提供默认选项">提供默认选项</h3> -<p>与往常一样, 你可以通过设置其 {{htmlattrxref("value", "input")}} 属性为<code>"tel"</code>输入框提供默认值:</p> +<p>与往常一样，你可以通过设置其 {{htmlattrxref("value", "input")}} 属性为<code>"tel"</code>输入框提供默认值：</p> <div id="Default_value"> <pre class="brush: html"><input id="telNo" name="telNo" type="tel" @@ -171,7 +171,7 @@ translation_of: Web/HTML/Element/input/tel <p>正如我们之前谈到的那样，为电话号码提供一种通用的客户端验证解决方案是相当困难的。所以，我们能做些什么？让我们考虑一些选项。</p> <div class="warning"> -<p><strong>重要</strong>: HTML表单验证不能替代服务器端脚本，以确保输入的数据在被允许进入数据库之前是正确的格式。对于有些人来说，调整html是非常容易的，这样他们就可以绕过验证，或者完全删除它。也有人可能完全绕过你的html，直接提交数据到你的服务器。如果您的服务器端代码无法验证接收到的数据，那么当格式不正确的数据（或数据太大，类型错误等等）输入到数据库时，可能会导致灾难。</p> +<p><strong>重要</strong>: HTML 表单验证不能替代服务器端脚本，以确保输入的数据在被允许进入数据库之前是正确的格式。对于有些人来说，调整 html 是非常容易的，这样他们就可以绕过验证，或者完全删除它。也有人可能完全绕过你的 html，直接提交数据到你的服务器。如果您的服务器端代码无法验证接收到的数据，那么当格式不正确的数据（或数据太大，类型错误等等）输入到数据库时，可能会导致灾难。</p> </div> <h3 id="要求电话号码必填">要求电话号码必填</h3> diff --git a/files/zh-cn/web/html/element/input/text/index.html b/files/zh-cn/web/html/element/input/text/index.html index bc76f658f0..651ad3910b 100644 --- a/files/zh-cn/web/html/element/input/text/index.html +++ b/files/zh-cn/web/html/element/input/text/index.html @@ -12,17 +12,17 @@ translation_of: Web/HTML/Element/input/text --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><code>{{HTMLElement("input")}}</code> 元素的<code><strong>text</strong></code> 类型创建基础的单行文本框.</span></p> +<p><span class="seoSummary"><code>{{HTMLElement("input")}}</code> 元素的<code><strong>text</strong></code> 类型创建基础的单行文本框。</span></p> <div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div> -<p class="hidden">交互示例的资源储存在一个github的仓库。如果你想为示例项目做贡献，请clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并给我们发送 pull request.</p> +<p class="hidden">交互示例的资源储存在一个 github 的仓库。如果你想为示例项目做贡献，请 clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并给我们发送 pull request.</p> <table class="properties"> <tbody> <tr> <td><strong>{{anch("值")}}</strong></td> - <td>input的一个属性，代表包含在文本框中的文字</td> + <td>input 的一个属性，代表包含在文本框中的文字</td> </tr> <tr> <td><strong>事件</strong></td> @@ -45,16 +45,16 @@ translation_of: Web/HTML/Element/input/text <h2 id="值">值</h2> -<p><code>{{htmlattrxref("value", "input")}}</code> 属性是一个包含了文本框当前文字的<code>{{domxref("DOMString")}}</code>。 你可以在Javascript中获取 <code>{{domxref("HTMLInputElement.value")}}</code> 特性的用途。</p> +<p><code>{{htmlattrxref("value", "input")}}</code> 属性是一个包含了文本框当前文字的<code>{{domxref("DOMString")}}</code>。 你可以在 Javascript 中获取 <code>{{domxref("HTMLInputElement.value")}}</code> 特性的用途。</p> <pre class="brush: js">let theText = myTextInput.value; </pre> -<p>如何输入没有验证约束 (查看 {{anch("Validation")}} 获取更多详细信息), <code>value</code>值应该是空字符串("").</p> +<p>如何输入没有验证约束 (查看 {{anch("Validation")}} 获取更多详细信息), <code>value</code>值应该是空字符串 ("").</p> <h2 id="其他属性">其他属性</h2> -<p>除了所有 <code>{{HTMLElement("input")}}</code> 元素上共有的可操作的属性，以及忽略type属性, 文本输入框还支持以下属性:</p> +<p>除了所有 <code>{{HTMLElement("input")}}</code> 元素上共有的可操作的属性，以及忽略 type 属性，文本输入框还支持以下属性：</p> <table class="standard-table"> <thead> @@ -90,27 +90,27 @@ translation_of: Web/HTML/Element/input/text </tr> <tr> <td><code>{{anch("spellcheck")}}</code></td> - <td>控制是否可以检查文本框的拼写,或者默认的拼写检查配置是否应该使用。 </td> + <td>控制是否可以检查文本框的拼写，或者默认的拼写检查配置是否应该使用。 </td> </tr> </tbody> </table> <h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> -<p>用户可以输入<code>文本</code>输入框中的最大字符(参考UTF-16编码单元)数。 必须为整数，值等于0或者更大。 如果没有规定 <code>maxlength</code> ， 或者规定的值无效, 文本输入框就没有最大值。这个值也必须更大或者等于<code>minlength</code>的值。</p> +<p>用户可以输入<code>文本</code>输入框中的最大字符 (参考 UTF-16 编码单元) 数。 必须为整数，值等于 0 或者更大。 如果没有规定 <code>maxlength</code> ， 或者规定的值无效，文本输入框就没有最大值。这个值也必须更大或者等于<code>minlength</code>的值。</p> -<p>如果文本框中的字符数大于 <code><font color="#333333" face="Consolas">maxlength</font></code><span style="background-color: transparent; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;"> UTF-16编码单元，输入框的</span><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">验证</a>就会失败。 约束验证仅作用于用户输入值的时候。</p> +<p>如果文本框中的字符数大于 <code><font color="#333333" face="Consolas">maxlength</font></code><span style="background-color: transparent; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;"> UTF-16 编码单元，输入框的</span><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">验证</a>就会失败。 约束验证仅作用于用户输入值的时候。</p> <h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> -<p>用户可以输入到 <code>text</code> 中的最小字符数（以UTF-16代码为单位）。 该值必须是小于或等于 <code>maxlength</code> 指定的值的非负整数值。 如果未指定 <code>minlength</code> 或指定了无效的值，则 <code>text</code> 将没有最小长度。</p> +<p>用户可以输入到 <code>text</code> 中的最小字符数（以 UTF-16 代码为单位）。 该值必须是小于或等于 <code>maxlength</code> 指定的值的非负整数值。 如果未指定 <code>minlength</code> 或指定了无效的值，则 <code>text</code> 将没有最小长度。</p> -<p>如果输入到字段中的文本的长度小于 <code>minlength</code> UTF-16代码单元的长度，则输入将无法通过约束验证(<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>) 约束验证仅在用户更改值时应用。</p> +<p>如果输入到字段中的文本的长度小于 <code>minlength</code> UTF-16 代码单元的长度，则输入将无法通过约束验证 (<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>) 约束验证仅在用户更改值时应用。</p> <h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> <div id="pattern-include"> -<p>如果指定了 <code>pattern</code> 属性，则它是输入的 <code>{{htmlattrxref("value")}}</code> 必须匹配正则表达式，以使该值通过约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）。它必须是 <code>{{jsxref("RegExp")}}</code> 类型使用有效 JavaScript 正则表达式，并且已在我们的正则表达式指南（<a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">guide on regular expressions</a>）中进行了说明；在编译正则表达式时指定了 <code>'u'</code> 标志，因此该模式被视为Unicode代码点的序列，而不是ASCII。 模式文本周围不能指定正斜杠。</p> +<p>如果指定了 <code>pattern</code> 属性，则它是输入的 <code>{{htmlattrxref("value")}}</code> 必须匹配正则表达式，以使该值通过约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）。它必须是 <code>{{jsxref("RegExp")}}</code> 类型使用有效 JavaScript 正则表达式，并且已在我们的正则表达式指南（<a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">guide on regular expressions</a>）中进行了说明；在编译正则表达式时指定了 <code>'u'</code> 标志，因此该模式被视为 Unicode 代码点的序列，而不是 ASCII。 模式文本周围不能指定正斜杠。</p> <p>如果指定的模式未指定或无效，则不应用任何正则表达式，并且将完全忽略此属性。</p> @@ -125,7 +125,7 @@ translation_of: Web/HTML/Element/input/text <p><code>placeholder</code> 属性是一个字符串，可向用户提供有关该字段中需要什么样的信息的简短提示。 它应该是一个单词或短语来说明预期的数据类型，而不是说明性消息。 文本中不得包含回车符或换行符。</p> -<p>如果控件的内容具有一个方向性的 ({{Glossary("LTR")}} 或 {{Glossary("RTL")}}) ，但需要以相反的方向性来显示占位符则可以使用Unicode双向算法格式化字符来 在占位符中覆盖方向性；请参见 {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}}。</p> +<p>如果控件的内容具有一个方向性的 ({{Glossary("LTR")}} 或 {{Glossary("RTL")}}) ，但需要以相反的方向性来显示占位符则可以使用 Unicode 双向算法格式化字符来 在占位符中覆盖方向性；请参见 {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}}。</p> <div class="note"> <p><strong>注意：</strong>如果可以，请避免使用占位符属性。 它在语义上没有其他解释表单的方式有用，并且可能导致内容出现意外的问题。 请参见 {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}}。</p> @@ -133,7 +133,7 @@ translation_of: Web/HTML/Element/input/text <h3 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h3> -<p>一个布尔属性，如果存在，则表示该字段不能由用户编辑。 但是，仍可以通过JavaScript代码直接设置 {{domxref("HTMLInputElement.value")}} 属性来更改其 <code>value</code>。</p> +<p>一个布尔属性，如果存在，则表示该字段不能由用户编辑。 但是，仍可以通过 JavaScript 代码直接设置 {{domxref("HTMLInputElement.value")}} 属性来更改其 <code>value</code>。</p> <div class="note"> <p><strong>注意：</strong>因为只读字段不能有值，所以 <code>required</code> 也对指定了 <code>readonly</code> 属性的输入没有任何影响。</p> @@ -141,13 +141,13 @@ translation_of: Web/HTML/Element/input/text <h3 id="htmlattrdefsize">{{htmlattrdef("size")}}</h3> -<p><code>size</code> 属性是一个数字值，指示输入字段应有多少个字符宽。 该值必须是一个大于零的数字，默认值是20。 根据字符和字体 (使用 {{cssxref("font")}} 设置)，结果输入可能比指定的字符数窄或宽。</p> +<p><code>size</code> 属性是一个数字值，指示输入字段应有多少个字符宽。 该值必须是一个大于零的数字，默认值是 20。 根据字符和字体 (使用 {{cssxref("font")}} 设置)，结果输入可能比指定的字符数窄或宽。</p> <p>这并不限制用户可以在该字段中输入多少个字符。 它仅指定一次可以看到多少个。 要设置输入数据长度的上限，使用 <code>{{anch("maxlength")}}</code> 属性。</p> <h3 id="htmlattrdefspellcheck">{{htmlattrdef("spellcheck")}}</h3> -<p><code>spellcheck</code> 是一个全局属性，用于指示是否启用元素的拼写检查。 它可以用于任何可编辑的内容，但是这里我们考虑与在 {{HTMLElement("input")}} 元素上使用 <code>spellcheck</code> 细节. 则 <code>spellcheck</code> 的允许值为：</p> +<p><code>spellcheck</code> 是一个全局属性，用于指示是否启用元素的拼写检查。 它可以用于任何可编辑的内容，但是这里我们考虑与在 {{HTMLElement("input")}} 元素上使用 <code>spellcheck</code> 细节。则 <code>spellcheck</code> 的允许值为：</p> <dl> <dt><code>false</code></dt> @@ -188,7 +188,7 @@ translation_of: Web/HTML/Element/input/text <h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> <div id="autocorrect-include"> -<p>Safari扩展， the <code>autocorrect</code> 属性是一个字符串，它指示在用户编辑此字段时是否激活自动更正。 允许的值为：</p> +<p>Safari 扩展， the <code>autocorrect</code> 属性是一个字符串，它指示在用户编辑此字段时是否激活自动更正。 允许的值为：</p> <dl> <dt><code>on</code></dt> @@ -201,10 +201,10 @@ translation_of: Web/HTML/Element/input/text <h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> <div id="mozactionhint-include"> -<p>一个Mozilla扩展程序，由Firefox for Android支持，它提供了一个提示，提示用户在编辑字段时按 <kbd>Enter</kbd> 或 <kbd>Return</kbd> 键将采取何种操作。 此信息用于确定在虚拟键盘上的 <kbd>Enter</kbd> 键上使用哪种标签。</p> +<p>一个 Mozilla 扩展程序，由 Firefox for Android 支持，它提供了一个提示，提示用户在编辑字段时按 <kbd>Enter</kbd> 或 <kbd>Return</kbd> 键将采取何种操作。 此信息用于确定在虚拟键盘上的 <kbd>Enter</kbd> 键上使用哪种标签。</p> <div class="note"> -<p><strong>注意:</strong> 注意：<a href="https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute">已将其标准化</a>为全局属性 {{htmlattrxref("enterkeyhint")}}，但尚未广泛实现。 要查看Firefox中正在实施的更改的状态，请参阅 {{bug(1490661)}}.</p> +<p><strong>注意：</strong> 注意：<a href="https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute">已将其标准化</a>为全局属性 {{htmlattrxref("enterkeyhint")}}，但尚未广泛实现。 要查看 Firefox 中正在实施的更改的状态，请参阅 {{bug(1490661)}}.</p> </div> <p>允许的值为： <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, 和 <code>send</code>. 浏览器使用此提示来决定在回车键上放置什么标签。</p> @@ -255,7 +255,7 @@ translation_of: Web/HTML/Element/input/text <h3 id="输入框元素大小">输入框元素大小</h3> -<p>可以使用 {{htmlattrxref("size", "input")}} 属性来控制输入框的尺寸。 使用它，您可以指定文本输入一次可以显示的字符数。 这会影响元素的宽度，使您可以按字符而不是像素指定宽度。 例如，在此示例中，输入为30个字符宽：</p> +<p>可以使用 {{htmlattrxref("size", "input")}} 属性来控制输入框的尺寸。 使用它，您可以指定文本输入一次可以显示的字符数。 这会影响元素的宽度，使您可以按字符而不是像素指定宽度。 例如，在此示例中，输入为 30 个字符宽：</p> <pre class="brush: html"><form> <div> @@ -276,12 +276,12 @@ translation_of: Web/HTML/Element/input/text <p><code><input></code> 元素的 <code>text</code> 属性没有应用自动验证（因为基本文本输入需要能够接受任意字符串），但是有一些客户端验证选项可用，我们将在下面讨论。</p> <div class="note"> -<p><strong>注意：</strong>HTML表单验证不能替代服务器脚本，以确保输入的数据格式正确。 对于某人来说，对HTML进行调整以使其绕过验证或完全删除验证太容易了。 有人也可以完全绕开您的HTML并将数据直接提交到您的服务器。 如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大，类型错误的数据等等）输入数据库时，灾难可能会发生。</p> +<p><strong>注意：</strong>HTML 表单验证不能替代服务器脚本，以确保输入的数据格式正确。 对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了。 有人也可以完全绕开您的 HTML 并将数据直接提交到您的服务器。 如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大，类型错误的数据等等）输入数据库时，灾难可能会发生。</p> </div> <h3 id="样式注意事项">样式注意事项</h3> -<p>有一些有用的伪类可用于设置表单元素的样式，以帮助用户查看其值是有效还是无效。 它们是 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}}。 在本节中，我们将使用以下CSS，它将在包含有效值的输入旁边放置一个复选标记（tick），并在包含无效值的输入旁边放置一个叉号（X）。</p> +<p>有一些有用的伪类可用于设置表单元素的样式，以帮助用户查看其值是有效还是无效。 它们是 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}}。 在本节中，我们将使用以下 CSS，它将在包含有效值的输入旁边放置一个复选标记（tick），并在包含无效值的输入旁边放置一个叉号（X）。</p> <pre class="brush: css">div { margin-bottom: 10px; @@ -334,7 +334,7 @@ input:valid+span:after { <p>您可以使用 {{htmlattrxref("minlength", "input")}} 属性指定输入值的最小长度（以字符为单位）； 同样，请使用 {{htmlattrxref("maxlength", "input")}} 设置输入值的最大长度（以字符为单位）。</p> -<p>下面的示例要求输入的值的长度为4–8个字符。</p> +<p>下面的示例要求输入的值的长度为 4–8 个字符。</p> <pre class="brush: html"><form> <div> @@ -357,7 +357,7 @@ input:valid+span:after { <p>{{ EmbedLiveSample('Input_value_length', 600, 70) }}</p> -<p>如果您尝试提交少于4个字符的表单，则会收到一条相应的错误消息（不同的浏览器会有所不同）。 如果您尝试输入8个以上的字符，浏览器将不允许您输入。</p> +<p>如果您尝试提交少于 4 个字符的表单，则会收到一条相应的错误消息（不同的浏览器会有所不同）。 如果您尝试输入 8 个以上的字符，浏览器将不允许您输入。</p> <div class="note"> <p><strong>注意：</strong> 如果您指定了 <code>minlength</code> 但未指定 <code>required</code>, 则输入被视为有效，因为不需要用户指定值。</p> @@ -367,7 +367,7 @@ input:valid+span:after { <p>您可以使用 {{htmlattrxref("pattern","input")}} 属性指定输入值必须匹配才能被认为是有效的正则表达式 (请参照 <a href="/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">Validating against a regular expression</a>).</p> -<p>下面的示例将值限制为4-8个字符，并要求该值仅包含小写字母。</p> +<p>下面的示例将值限制为 4-8 个字符，并要求该值仅包含小写字母。</p> <pre class="brush: html"><form> <div> diff --git a/files/zh-cn/web/html/element/input/time/index.html b/files/zh-cn/web/html/element/input/time/index.html index 2b47737ba7..c6e2cd736e 100644 --- a/files/zh-cn/web/html/element/input/time/index.html +++ b/files/zh-cn/web/html/element/input/time/index.html @@ -3,8 +3,8 @@ title: <input type="time"> slug: Web/HTML/Element/Input/time tags: - HTML - - HTML表单 - - INPUT元素 + - HTML 表单 + - INPUT 元素 - Input - Time - 元素 @@ -13,19 +13,19 @@ translation_of: Web/HTML/Element/input/time --- <div>{{HTMLRef("Input_types")}}</div> -<p><span class="seoSummary">类型为time的输入元素{{htmlelement("input")}} ，旨在让用户轻松输入时间（小时和分钟，以及可选的秒）。</span></p> +<p><span class="seoSummary">类型为 time 的输入元素{{htmlelement("input")}} ，旨在让用户轻松输入时间（小时和分钟，以及可选的秒）。</span></p> -<p>控件的用户界面因浏览器而异。在现代浏览器中，支持是很好的，因为Safari是唯一尚未实现的主要浏览器；在Safari和任何其他不支持<code><time></code>的浏览器中，它会优雅地降级为<code><input type=“text”></code>。</p> +<p>控件的用户界面因浏览器而异。在现代浏览器中，支持是很好的，因为 Safari 是唯一尚未实现的主要浏览器；在 Safari 和任何其他不支持<code><time></code>的浏览器中，它会优雅地降级为<code><input type=“text”></code>。</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}}</div> -<p class="hidden">这个交互式示例的源代码存储在GitHub存储库中。如果您想对交互式示例项目作出贡献，请克隆https://github.com/mdn/interactive-examples并向我们发送请求。</p> +<p class="hidden">这个交互式示例的源代码存储在 GitHub 存储库中。如果您想对交互式示例项目作出贡献，请克隆 https://github.com/mdn/interactive-examples 并向我们发送请求。</p> <h2 id="Appearance">Appearance</h2> <h3 id="Chrome_and_Opera">Chrome and Opera</h3> -<p>在chrome/opera中，选择时间很简单，根据操作系统区域设置，插槽以12或24小时格式输入小时和分钟，上下箭头用于递增和递减当前选定的组件。在某些版本中，会提供一个“x”按钮来清除控件的值。</p> +<p>在 chrome/opera 中，选择时间很简单，根据操作系统区域设置，插槽以 12 或 24 小时格式输入小时和分钟，上下箭头用于递增和递减当前选定的组件。在某些版本中，会提供一个 “x” 按钮来清除控件的值。</p> <p><img alt="12-hour Chrome time input" src="https://mdn.mozillademos.org/files/16417/chrome_time.PNG" style="height: 30px; width: 93px;"> 12-hour</p> @@ -33,7 +33,7 @@ translation_of: Web/HTML/Element/input/time <h3 id="Firefox">Firefox</h3> -<p>火狐的时间选择和Chrome非常相似，只是它没有上下箭头。它还使用12或24小时格式输入时间，基于系统区域设置。提供“X”按钮以清除控件的值。</p> +<p>火狐的时间选择和 Chrome 非常相似，只是它没有上下箭头。它还使用 12 或 24 小时格式输入时间，基于系统区域设置。提供 “X” 按钮以清除控件的值。</p> <p><img alt="12-hour Firefox time input" src="https://mdn.mozillademos.org/files/15403/firefox-time.png" style="height: 29px; width: 106px;"> 12-hour</p> @@ -41,7 +41,7 @@ translation_of: Web/HTML/Element/input/time <h3 id="Edge">Edge</h3> -<p>Edgede 时间选择有点复杂，打开一个小时和分钟的滚动区域。它和chrome一样，使用12或24小时格式输入时间，基于系统区域设置：</p> +<p>Edgede 时间选择有点复杂，打开一个小时和分钟的滚动区域。它和 chrome 一样，使用 12 或 24 小时格式输入时间，基于系统区域设置：</p> <p><img alt="12-hour Edge time input" src="https://mdn.mozillademos.org/files/16418/edge_time.PNG" style="display: block; height: 290px; width: 188px;"> 12-hour</p> @@ -94,7 +94,7 @@ timeControl.value = '15:30';</pre> <p>在此示例中，您可以通过输入时间并查看之后如何更改来查看时间输入的值。</p> -<p>首先，看一下HTML。这很简单，带有我们之前看到的标签和输入，但添加了额外的元素<code>p</code>和<code>span</code>用来显示时间值</p> +<p>首先，看一下 HTML。这很简单，带有我们之前看到的标签和输入，但添加了额外的元素<code>p</code>和<code>span</code>用来显示时间值</p> <pre class="brush: html notranslate"><form> <label for="startTime">Start time: </label> @@ -171,7 +171,7 @@ startTime.addEventListener("input", function() { <h2 id="Using_time_inputs">Using time inputs</h2> -<p>虽然data和time输入类型中的时间具有最广泛的浏览器支持，但它尚未接近普及，因此您可能需要提供一种替代方法来输入日期和时间，以便Safari用户（和用户）其他非支持浏览器）仍然可以轻松输入时间值。</p> +<p>虽然 data 和 time 输入类型中的时间具有最广泛的浏览器支持，但它尚未接近普及，因此您可能需要提供一种替代方法来输入日期和时间，以便 Safari 用户（和用户）其他非支持浏览器）仍然可以轻松输入时间值。</p> <p>We'll look at basic and more complex uses of <code><input type="time"></code>, then offer advice on mitigating the browser support issue later on (see {{anch("Handling browser support")}}).</p> diff --git a/files/zh-cn/web/html/element/input/url/index.html b/files/zh-cn/web/html/element/input/url/index.html index 7431e5f3e9..9e3e34c838 100644 --- a/files/zh-cn/web/html/element/input/url/index.html +++ b/files/zh-cn/web/html/element/input/url/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/input/url --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">{{HTMLElement("input")}} 元素有一个 <code><strong>url</strong></code> 来让用户输入URL</span>{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}</p> +<p><span class="seoSummary">{{HTMLElement("input")}} 元素有一个 <code><strong>url</strong></code> 来让用户输入 URL</span>{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}</p> diff --git a/files/zh-cn/web/html/element/input/week/index.html b/files/zh-cn/web/html/element/input/week/index.html index 78ffc7586b..2dd7bf030c 100644 --- a/files/zh-cn/web/html/element/input/week/index.html +++ b/files/zh-cn/web/html/element/input/week/index.html @@ -11,19 +11,19 @@ translation_of: Web/HTML/Element/input/week --- <div>{{HTMLRef("Input_types")}}</div> -<p><span class="seoSummary">{{HTMLElement("input")}} 类型为 <strong><code>week</code></strong> 的元素会创建输入字段，以便轻松输入年份以及该年（即第1周到<a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates">52 or 53</a>周）的<a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates">ISO 8601 week number</a> </span></p> +<p><span class="seoSummary">{{HTMLElement("input")}} 类型为 <strong><code>week</code></strong> 的元素会创建输入字段，以便轻松输入年份以及该年（即第 1 周到<a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates">52 or 53</a>周）的<a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates">ISO 8601 week number</a> </span></p> <div>{{EmbedInteractiveExample("pages/tabbed/input-week.html", "tabbed-shorter")}}</div> -<div class="hidden">该交互式示例的源存储在GitHub存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发送请求请求。</div> +<div class="hidden">该交互式示例的源存储在 GitHub 存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发送请求请求。</div> -<p>控件的用户界面因浏览器而异； 跨浏览器的支持目前受到限制，目前只有Chrome / Opera和Microsoft Edge支持。 在不支持的浏览器中，该控件会正常降级，使其功能与 <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code>相同。</p> +<p>控件的用户界面因浏览器而异； 跨浏览器的支持目前受到限制，目前只有 Chrome / Opera 和 Microsoft Edge 支持。 在不支持的浏览器中，该控件会正常降级，使其功能与 <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code>相同。</p> -<p> 在Chrome / Opera中，在<code>week</code>控件提供了用于填写周和年值的插槽，弹出式日历界面（可以更直观地选择它们）以及“ X”按钮以清除控件的值。</p> +<p> 在 Chrome / Opera 中，在<code>week</code>控件提供了用于填写周和年值的插槽，弹出式日历界面（可以更直观地选择它们）以及 “ X” 按钮以清除控件的值。</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15409/week-control-chrome.png" style="display: block; height: 235px; margin: 0px auto; width: 320px;"></p> -<p>Edge的<code>week</code>控制更加精细，使用滚动的滚轮打开周和年的选择器。</p> +<p>Edge 的<code>week</code>控制更加精细，使用滚动的滚轮打开周和年的选择器。</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15411/week-control-edge.png" style="display: block; height: 391px; margin: 0px auto; width: 227px;"></p> @@ -65,7 +65,7 @@ translation_of: Web/HTML/Element/input/week <p>要注意的一件事是，显示的格式可能与<code>value</code>不同，后者始终采用 <code>yyyy-Www</code>格式。 例如，当将上述值提交给服务器时，浏览器可能会将其显示为 <code>Week 01, 2017</code>, 但是提交的值始终看起来像<code>week=2017-W01</code>.</p> -<p>您还可以使用输入元素的 {{domxref("HTMLInputElement.value", "value")}} 属性获取并设置JavaScript中的值，例如：</p> +<p>您还可以使用输入元素的 {{domxref("HTMLInputElement.value", "value")}} 属性获取并设置 JavaScript 中的值，例如：</p> <pre class="brush: js">var weekControl = document.querySelector('input[type="week"]'); weekControl.value = '2017-W45';</pre> @@ -119,13 +119,13 @@ weekControl.value = '2017-W45';</pre> <p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> -<p>对于<code>week</code> 输入， <code>step</code> 的值以周为单位，比例因子为604,800,000（因为基础数值以毫秒为单位）。 <code>step</code>的默认值为1，表示1周。 默认的步进基数是-259,200,000，这是1970年第一周的开始 (<code>"1970-W01"</code>).</p> +<p>对于<code>week</code> 输入， <code>step</code> 的值以周为单位，比例因子为 604,800,000（因为基础数值以毫秒为单位）。 <code>step</code>的默认值为 1，表示 1 周。 默认的步进基数是-259,200,000，这是 1970 年第一周的开始 (<code>"1970-W01"</code>).</p> <p><em>目前，尚不清楚当与<code>week</code>输入一起使用时，<code>"any"</code> 的值对<code>step</code> 意味着什么。 确定该信息后，将对其进行更新。</em></p> <h2 id="使用星期输入">使用星期输入</h2> -<p>乍看之下，周输入听起来很方便，因为它们提供了用于选择周的简单UI，并且它们标准化了发送到服务器的数据格式，而与用户的浏览器或区域设置无关。 但是， <code><input type="week"></code> 存在问题，因为不能保证所有浏览器都支持浏览器。</p> +<p>乍看之下，周输入听起来很方便，因为它们提供了用于选择周的简单 UI，并且它们标准化了发送到服务器的数据格式，而与用户的浏览器或区域设置无关。 但是， <code><input type="week"></code> 存在问题，因为不能保证所有浏览器都支持浏览器。</p> <p>我们将研究 <code><input type="week"></code>的基本和更复杂的用法，然后在以后提供有关缓解浏览器支持问题的建议（请参阅 {{anch("Handling browser support")}}).</p> @@ -144,13 +144,13 @@ weekControl.value = '2017-W45';</pre> <p><code><input type="week"></code> 不支持 {{htmlattrxref("size", "input")}}. 您必须依靠<a href="/en-US/docs/Web/CSS">CSS</a>来确定大小 。</p> -<h3 id="使用step属性">使用step属性</h3> +<h3 id="使用step属性">使用 step 属性</h3> <p>您应该能够使用{{htmlattrxref("step", "input")}} 属性来更改每次递增或递减的跳转周数，但是这似乎对支持浏览器没有任何影响。</p> <h2 id="验证方式">验证方式</h2> -<p>默认情况下，<code><input type="week"></code> 不会对输入的值应用任何验证。 UI实现通常不允许您指定不是有效的周/年的任何内容，这很有用，但是仍然可以在字段为空的情况下提交，并且您可能希望限制可选择的周数范围。</p> +<p>默认情况下，<code><input type="week"></code> 不会对输入的值应用任何验证。 UI 实现通常不允许您指定不是有效的周/年的任何内容，这很有用，但是仍然可以在字段为空的情况下提交，并且您可能希望限制可选择的周数范围。</p> <h3 id="设置最大和最小星期">设置最大和最小星期</h3> @@ -165,7 +165,7 @@ weekControl.value = '2017-W45';</pre> <p>{{EmbedLiveSample('Setting_maximum_and_minimum_weeks', 600, 40)}}</p> -<p>这是上面示例中使用的CSS。 在这里，我们利用{{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS属性根据当前值是否有效来设置输入的样式。 我们必须将图标放在输入旁边的 {{htmlelement("span")}} 上，而不是输入本身上，因为在Chrome中，生成的内容位于表单控件内，无法设置样式或显示 有效。</p> +<p>这是上面示例中使用的 CSS。 在这里，我们利用{{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS 属性根据当前值是否有效来设置输入的样式。 我们必须将图标放在输入旁边的 {{htmlelement("span")}} 上，而不是输入本身上，因为在 Chrome 中，生成的内容位于表单控件内，无法设置样式或显示 有效。</p> <pre class="brush: css">div { margin-bottom: 10px; @@ -192,7 +192,7 @@ input:valid+span:after { padding-left: 5px; }</pre> -<p>结果是，在2017年W01到W52之间只有几周才被视为有效，并且可以在支持的浏览器中选择。</p> +<p>结果是，在 2017 年 W01 到 W52 之间只有几周才被视为有效，并且可以在支持的浏览器中选择。</p> <h3 id="使周值成为必需">使周值成为必需</h3> @@ -221,36 +221,36 @@ input:valid+span:after { <p><img alt="" src="https://mdn.mozillademos.org/files/15415/week-validation-chrome.png" style="display: block; height: 85px; margin: 0px auto; width: 473px;"></p> <div class="warning"> -<p><strong>重要提示：</strong>HTML表单验证不能代替脚本来确保输入的数据采用正确的格式。 对于某人来说，对HTML进行调整以使其绕过验证或完全删除验证太容易了。 有人也可以完全绕开您的HTML并将数据直接提交到您的服务器。 如果您的服务器端代码无法验证其接收到的数据，则在提交格式不正确的数据（或太大，类型错误的数据等）时，灾难可能会发生。</p> +<p><strong>重要提示：</strong>HTML 表单验证不能代替脚本来确保输入的数据采用正确的格式。 对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了。 有人也可以完全绕开您的 HTML 并将数据直接提交到您的服务器。 如果您的服务器端代码无法验证其接收到的数据，则在提交格式不正确的数据（或太大，类型错误的数据等）时，灾难可能会发生。</p> </div> <h2 id="处理浏览器支持">处理浏览器支持</h2> -<p>如上所述，现在使用星期输入的主要问题是浏览器支持：Safari和Firefox在桌面上不支持它，而旧版本的IE不支持它。</p> +<p>如上所述，现在使用星期输入的主要问题是浏览器支持：Safari 和 Firefox 在桌面上不支持它，而旧版本的 IE 不支持它。</p> <p><br> - 诸如Android和iOS之类的移动平台确实很好地利用了这种输入类型，提供了专门的UI控件，使在触摸屏环境中选择值变得非常容易。 例如，Android版Chrome上的周选择器如下所示：<img alt="" src="https://mdn.mozillademos.org/files/15413/week-chrome-android.png" style="display: block; margin: 0 auto;"></p> + 诸如 Android 和 iOS 之类的移动平台确实很好地利用了这种输入类型，提供了专门的 UI 控件，使在触摸屏环境中选择值变得非常容易。 例如，Android 版 Chrome 上的周选择器如下所示：<img alt="" src="https://mdn.mozillademos.org/files/15413/week-chrome-android.png" style="display: block; margin: 0 auto;"></p> <p>不支持的浏览器会优雅地降级为文本输入，但这在用户界面的一致性（所提供的控件将有所不同）和数据处理方面都产生了问题。</p> <p>第二个问题是更严重的。 如前所述，在输入一个<code>week</code> 的情况下，实际值始终会归一化为 <code>yyyy-Www</code>格式。当浏览器退回通用文本输入时，没有什么可以指导用户正确格式化输入的格式（这肯定是不直观的）。 人们可以通过多种方式来写星期值。 例如：</p> <ul> - <li><code>2017年第1周</code></li> - <li><code>2017年1月2日至8日</code></li> + <li><code>2017 年第 1 周</code></li> + <li><code>2017 年 1 月 2 日至 8 日</code></li> <li><code>2017-W01</code></li> <li>等等。</li> </ul> -<p>目前，以跨浏览器方式处理星期/年的最佳方法是让用户在单独的控件中输入星期数和年份 ({{htmlelement("select")}} 元素很流行； 参见下面的示例），或使用JavaScript库（例如 <a href="https://jqueryui.com/datepicker/">jQuery日期选择器</a>。</p> +<p>目前，以跨浏览器方式处理星期/年的最佳方法是让用户在单独的控件中输入星期数和年份 ({{htmlelement("select")}} 元素很流行； 参见下面的示例），或使用 JavaScript 库（例如 <a href="https://jqueryui.com/datepicker/">jQuery 日期选择器</a>。</p> <h2 id="例子">例子</h2> -<p>在此示例中，我们创建了两组用于选择星期的UI元素：使用 <code><input type="week"></code>，创建的本机选择器，以及两个用于选择星期/年的 {{htmlelement("select")}} 元素的集合 不支持<code>week</code>输入类型的旧版浏览器。 </p> +<p>在此示例中，我们创建了两组用于选择星期的 UI 元素：使用 <code><input type="week"></code>，创建的本机选择器，以及两个用于选择星期/年的 {{htmlelement("select")}} 元素的集合 不支持<code>week</code>输入类型的旧版浏览器。 </p> <p>{{EmbedLiveSample('Examples', 600, 140)}}</p> -<p>HTML看起来像这样：</p> +<p>HTML 看起来像这样：</p> <pre class="brush: html"><form> <div class="nativeWeekPicker"> @@ -278,7 +278,7 @@ input:valid+span:after { </div> </form></pre> -<p>周值由下面的JavaScript代码动态生成。</p> +<p>周值由下面的 JavaScript 代码动态生成。</p> <div class="hidden"> <pre class="brush: css">div { @@ -351,7 +351,7 @@ function populateWeeks() { }</pre> <div class="note"> -<p><strong>注意：</strong> 请记住，有些年份有53周（请参阅 <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">每年的周数</a>)！ 在开发生产应用程序时，您需要考虑到这一点。</p> +<p><strong>注意：</strong> 请记住，有些年份有 53 周（请参阅 <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">每年的周数</a>)！ 在开发生产应用程序时，您需要考虑到这一点。</p> </div> <h2 id="技术指标">技术指标</h2> @@ -381,6 +381,6 @@ function populateWeeks() { <ul> <li>通用 {{HTMLElement("input")}} 元素和用于操作该元素的接口 {{domxref("HTMLInputElement")}}</li> - <li><a href="/en-US/docs/Web/HTML/Date_and_time_formats">HTML中使用的日期和时间格式</a></li> + <li><a href="/en-US/docs/Web/HTML/Date_and_time_formats">HTML 中使用的日期和时间格式</a></li> <li><code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/time"><input type="time"></a></code>, 和 <code><a href="/en-US/docs/Web/HTML/Element/input/month"><input type="month"></a></code></li> </ul> diff --git a/files/zh-cn/web/html/element/ins/index.html b/files/zh-cn/web/html/element/ins/index.html index 3d62ed7eec..ca5a649663 100644 --- a/files/zh-cn/web/html/element/ins/index.html +++ b/files/zh-cn/web/html/element/ins/index.html @@ -25,7 +25,7 @@ translation_of: Web/HTML/Element/ins <li><dfn>允许内容</dfn> <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#透明内容模型（Transparent_content_model）">透明内容模型</a>。</li> <li><dfn>标签闭合</dfn> {{no_tag_omission}}</li> <li><dfn>允许的父级标签</dfn>任意<a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#短语元素（Phrasing_content）">短语元素</a></li> - <li><dfn>允许的ARIA角色</dfn>任意</li> + <li><dfn>允许的 ARIA 角色</dfn>任意</li> <li><dfn>DOM 接口</dfn> {{domxref("HTMLModElement")}}</li> </ul> diff --git a/files/zh-cn/web/html/element/kbd/index.html b/files/zh-cn/web/html/element/kbd/index.html index 397d9d905c..619e694059 100644 --- a/files/zh-cn/web/html/element/kbd/index.html +++ b/files/zh-cn/web/html/element/kbd/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/kbd --- <h2 id="摘要">摘要</h2> -<p>HTML键盘输入元素(<strong><kbd></strong>) 用于表示用户输入，它将产生一个行内元素，以浏览器的默认monospace字体显示。</p> +<p>HTML 键盘输入元素 (<strong><kbd></strong>) 用于表示用户输入，它将产生一个行内元素，以浏览器的默认 monospace 字体显示。</p> <table class="properties"> <tbody> @@ -55,7 +55,7 @@ translation_of: Web/HTML/Element/kbd <h2 id="注意">注意</h2> -<p>通过定义CSS规则可以改变kbd的默认字体。用户首选项设置可能会比该CSS规则具有更高优先级。</p> +<p>通过定义 CSS 规则可以改变 kbd 的默认字体。用户首选项设置可能会比该 CSS 规则具有更高优先级。</p> <p>当<kbd>元素处于<samp>元素之中时，它代表着被系统回显的输入。</p> diff --git a/files/zh-cn/web/html/element/keygen/index.html b/files/zh-cn/web/html/element/keygen/index.html index 906579be49..c242e69048 100644 --- a/files/zh-cn/web/html/element/keygen/index.html +++ b/files/zh-cn/web/html/element/keygen/index.html @@ -8,7 +8,7 @@ translation_of: Web/HTML/Element/keygen --- <p>{{deprecated_header}}</p> -<p>HTML <code><keygen></code> 元素是为了方便生成密钥材料和提交作为 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms">HTML form</a> 的一部分的公钥.这种机制被用于设计基于 Web 的证书管理系统。按照预想，<code><keygen></code> 元素将用于 HTML 表单与其他的所需信息一起构造一个证书请求，该处理的结果将是一个带有签名的证书。</p> +<p>HTML <code><keygen></code> 元素是为了方便生成密钥材料和提交作为 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms">HTML form</a> 的一部分的公钥。这种机制被用于设计基于 Web 的证书管理系统。按照预想，<code><keygen></code> 元素将用于 HTML 表单与其他的所需信息一起构造一个证书请求，该处理的结果将是一个带有签名的证书。</p> <div class="note"> <p>There is currently discussion among Web browser makers whether to keep this feature or not. Until a decision is reached, it is better to continue to consider this feature as deprecated and going away.</p> diff --git a/files/zh-cn/web/html/element/label/index.html b/files/zh-cn/web/html/element/label/index.html index 4c5a35199f..ee1d1937a1 100644 --- a/files/zh-cn/web/html/element/label/index.html +++ b/files/zh-cn/web/html/element/label/index.html @@ -6,7 +6,7 @@ tags: - Forms - HTML - HTML forms - - HTML表单 + - HTML 表单 - Reference - Web - label @@ -64,11 +64,11 @@ translation_of: Web/HTML/Element/label <h2 id="示例">示例</h2> -<h3 id="简单的label">简单的label</h3> +<h3 id="简单的label">简单的 label</h3> <pre class="brush: html"><label>Click me <input type="text"></label></pre> -<p>{{EmbedLiveSample('简单的label', '200', '50', '')}}</p> +<p>{{EmbedLiveSample('简单的 label', '200', '50', '')}}</p> <h3 id="使用_for_属性">使用 for 属性</h3> diff --git a/files/zh-cn/web/html/element/li/index.html b/files/zh-cn/web/html/element/li/index.html index 2a67616ff5..b9e59a4a13 100644 --- a/files/zh-cn/web/html/element/li/index.html +++ b/files/zh-cn/web/html/element/li/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/li --- <p>{{HTMLRef}}</p> -<p><strong>HTML <code><li></code> 元素</strong> （或称 <em>HTML 列表条目元素）</em> 用于表示列表里的条目。它必须包含在一个父元素里：一个有序列表({{HTMLElement("ol")}})，一个无序列表({{HTMLElement("ul")}})，或者一个菜单 ({{HTMLElement("menu")}})。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。</p> +<p><strong>HTML <code><li></code> 元素</strong> （或称 <em>HTML 列表条目元素）</em> 用于表示列表里的条目。它必须包含在一个父元素里：一个有序列表 ({{HTMLElement("ol")}})，一个无序列表 ({{HTMLElement("ul")}})，或者一个菜单 ({{HTMLElement("menu")}})。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。</p> <table class="properties"> <tbody> @@ -42,7 +42,7 @@ translation_of: Web/HTML/Element/li <dl> <dt>{{htmlattrdef("value")}}</dt> - <dd>这个整数型属性表明了本 {{HTMLElement("li")}} 元素在有序列表 （由 {{HTMLElement("ol")}} 元素定义）中的序号。本属性值只能用数字，即使列表使用罗马数字或字母来展示。随后的列表条目会从设置的值开始计数。<strong>value</strong> 属性对于无序列表 ({{HTMLElement("ul")}}) 或者菜单 ({{HTMLElement("menu")}}) 无效。 + <dd>这个整数型属性表明了本 {{HTMLElement("li")}} 元素在有序列表（由 {{HTMLElement("ol")}} 元素定义）中的序号。本属性值只能用数字，即使列表使用罗马数字或字母来展示。随后的列表条目会从设置的值开始计数。<strong>value</strong> 属性对于无序列表 ({{HTMLElement("ul")}}) 或者菜单 ({{HTMLElement("menu")}}) 无效。 <div class="note"><strong>注：</strong> 这个属性在 HTML 4 中废弃，但是在 HTML 5 中重新引入。</div> <div class="note"> diff --git a/files/zh-cn/web/html/element/link/index.html b/files/zh-cn/web/html/element/link/index.html index b8b9fe0246..f374f95e59 100644 --- a/files/zh-cn/web/html/element/link/index.html +++ b/files/zh-cn/web/html/element/link/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML/Element/link --- <div>{{HTMLRef}}</div> -<p><strong>HTML外部资源链接元素 </strong>(<strong><code><link></code></strong>) 规定了当前文档与外部资源的关系。该元素最常用于链接<a href="/zh-CN/docs/Glossary/CSS">样式表</a>，此外也可以被用来创建站点图标(比如PC端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。</p> +<p><strong>HTML 外部资源链接元素 </strong>(<strong><code><link></code></strong>) 规定了当前文档与外部资源的关系。该元素最常用于链接<a href="/zh-CN/docs/Glossary/CSS">样式表</a>，此外也可以被用来创建站点图标 (比如 PC 端的 “favicon” 图标和移动设备上用以显示在主屏幕的图标) 。</p> <div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</div> @@ -19,7 +19,7 @@ translation_of: Web/HTML/Element/link <pre class="brush: html no-line-numbers notranslate"><link href="main.css" rel="stylesheet"></pre> -<p>在这个简单的例子中，使用了 <code>href</code> 属性设置外部资源的路径，并设置 <code>rel</code> 属性的值为“<code>stylesheet</code>”(样式表)。<code>rel</code> 表示“关系 (relationship) ”，它可能是<code><link></code>元素其中一个关键的特性——属性值表示<code><link></code>项的链接方式与包含它的文档之间的关系。你将在我们的<a href="/en-US/docs/Web/HTML/Link_types">链接类型</a>中看到很多不同类型的关系。</p> +<p>在这个简单的例子中，使用了 <code>href</code> 属性设置外部资源的路径，并设置 <code>rel</code> 属性的值为 “<code>stylesheet</code>”(样式表)。<code>rel</code> 表示 “关系 (relationship) ”，它可能是<code><link></code>元素其中一个关键的特性——属性值表示<code><link></code>项的链接方式与包含它的文档之间的关系。你将在我们的<a href="/en-US/docs/Web/HTML/Link_types">链接类型</a>中看到很多不同类型的关系。</p> <p>这里有一些你经常遇到的其它类型。例如，这里是一个网站图标的链接：</p> @@ -30,7 +30,7 @@ translation_of: Web/HTML/Element/link <pre class="brush: html notranslate"><code><link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png"></code></pre> -<p><code>sizes</code>属性表示图标大小，<code>type</code>属性包含了链接资源的MIME类型。这些属性为浏览器选择最合适的图标提供了有用的提示。</p> +<p><code>sizes</code>属性表示图标大小，<code>type</code>属性包含了链接资源的 MIME 类型。这些属性为浏览器选择最合适的图标提供了有用的提示。</p> <p>你也可以提供一个媒体类型，或者在<code>media</code>属性内部进行查询；这种资源将只在满足媒体条件的情况下才被加载进来。例如：</p> @@ -42,16 +42,16 @@ translation_of: Web/HTML/Element/link <pre class="brush: html notranslate"><code><link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous"></code></pre> -<p>将<code>rel</code>设定为<code>preload</code>，表示浏览器应该预加载该资源 (更多细节见<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">使用rel="preload"预加载内容</a>) 。<code>as</code>属性表示获取特定的内容类。<code>crossorigin</code>属性表示该资源是否应该使用一个{{Glossary("CORS")}}请求来获取。</p> +<p>将<code>rel</code>设定为<code>preload</code>，表示浏览器应该预加载该资源 (更多细节见<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">使用 rel="preload"预加载内容</a>) 。<code>as</code>属性表示获取特定的内容类。<code>crossorigin</code>属性表示该资源是否应该使用一个{{Glossary("CORS")}}请求来获取。</p> <p>其它用法的注解：</p> <ul> - <li><code><link></code>元素可以出现在{{HTMLElement("head")}}元素或者{{HTMLElement("body")}}元素中，具体取决于它是否有一个<strong>body-ok</strong>的<a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">链接类型</a>。例如，<code>stylesheet</code>链接类型是body-ok的，因此<code><link rel="stylesheet"></code>允许出现在body中。然而，这不是一种好的可遵循的实践方式；更合理的方式是，将你的<code><link></code>元素从你的body内容中分离出来，将其放在<code><head></code>中。</li> - <li>当使用<code><link></code>为网站创建一个favicon时，你的网站使用内容安全策略 (Content Security Policy，CSP) 来增强它的安全性，这种策略适用于favicon。如果你遇到favicon未加载的问题，验证{{HTTPHeader("Content-Security-Policy")}}头的<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> directive</a>没有在阻止对它的访问。</li> - <li>HTML和XHTML规范为<code><link></code>元素定义了一些事件处理器 (<em>event handler</em>) ，但是对于它们的使用方法不明确。</li> - <li>在XHTML 1.0下，例如<code><link></code>的空元素需要一个尾斜杠：<code><link /></code>。</li> - <li>WebTV支持<code>rel</code>使用<code>next</code>值，用于在一个document series中预加载下一页。</li> + <li><code><link></code>元素可以出现在{{HTMLElement("head")}}元素或者{{HTMLElement("body")}}元素中，具体取决于它是否有一个<strong>body-ok</strong>的<a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">链接类型</a>。例如，<code>stylesheet</code>链接类型是 body-ok 的，因此<code><link rel="stylesheet"></code>允许出现在 body 中。然而，这不是一种好的可遵循的实践方式；更合理的方式是，将你的<code><link></code>元素从你的 body 内容中分离出来，将其放在<code><head></code>中。</li> + <li>当使用<code><link></code>为网站创建一个 favicon 时，你的网站使用内容安全策略 (Content Security Policy，CSP) 来增强它的安全性，这种策略适用于 favicon。如果你遇到 favicon 未加载的问题，验证{{HTTPHeader("Content-Security-Policy")}}头的<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> directive</a>没有在阻止对它的访问。</li> + <li>HTML 和 XHTML 规范为<code><link></code>元素定义了一些事件处理器 (<em>event handler</em>) ，但是对于它们的使用方法不明确。</li> + <li>在 XHTML 1.0 下，例如<code><link></code>的空元素需要一个尾斜杠：<code><link /></code>。</li> + <li>WebTV 支持<code>rel</code>使用<code>next</code>值，用于在一个 document series 中预加载下一页。</li> </ul> <h2 id="属性">属性</h2> @@ -126,26 +126,26 @@ translation_of: Web/HTML/Element/link </table> </dt> <dt>{{htmlattrdef("crossorigin")}}</dt> - <dd>此枚举属性指定在加载相关资源时是否必须使用 CORS. <a href="/en-US/docs/Web/HTML/CORS_Enabled_Image">启用 CORS 的图片</a> 可以在 {{HTMLElement("canvas")}} 元素中重复使用, 并避免其被<em>污染</em>. 可取的值如下: + <dd>此枚举属性指定在加载相关资源时是否必须使用 CORS. <a href="/en-US/docs/Web/HTML/CORS_Enabled_Image">启用 CORS 的图片</a> 可以在 {{HTMLElement("canvas")}} 元素中重复使用，并避免其被<em>污染</em>. 可取的值如下： <dl> <dt><code>"anonymous"</code></dt> - <dd>会发起一个跨域请求(即包含 <code>Origin:</code> HTTP 头). 但不会发送任何认证信息 (即不发送 cookie, X.509 证书和 HTTP 基本认证信息). 如果服务器没有给出源站凭证 (不设置 <code>Access-Control-Allow-Origin:</code> HTTP 头), 资源就会被<em>污染并限制使用</em>.</dd> + <dd>会发起一个跨域请求 (即包含 <code>Origin:</code> HTTP 头). 但不会发送任何认证信息 (即不发送 cookie, X.509 证书和 HTTP 基本认证信息). 如果服务器没有给出源站凭证 (不设置 <code>Access-Control-Allow-Origin:</code> HTTP 头), 资源就会被<em>污染并限制使用</em>.</dd> <dt><code>"use-credentials"</code></dt> <dd>会发起一个带有认证信息 (发送 cookie, X.509 证书和 HTTP 基本认证信息) 的跨域请求 (即包含 <code>Origin:</code> HTTP 头). 如果服务器没有给出源站凭证 (不设置 <code>Access-Control-Allow-Origin:</code> HTTP 头), 资源就会被<em>污染并限制使用</em>.</dd> </dl> - 当不设置此属性时, 资源将会不使用 CORS 加载 (即不发送 <code>Origin:</code> HTTP 头), 这将阻止其在 {{HTMLElement('canvas')}} 元素中进行使用. 若设置了非法的值, 则视为使用 <strong>anonymous</strong>. 前往 <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a> 获取更多信息.</dd> + 当不设置此属性时，资源将会不使用 CORS 加载 (即不发送 <code>Origin:</code> HTTP 头), 这将阻止其在 {{HTMLElement('canvas')}} 元素中进行使用。若设置了非法的值，则视为使用 <strong>anonymous</strong>. 前往 <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a> 获取更多信息。</dd> <dt>{{htmlattrdef("disabled")}}</dt> <dd> - <p>仅对于<code>rel="stylesheet"</code> ，<code>disabled</code> 的Boolean属性指示是否应加载所描述的样式表并将其应用于文档。 如果在加载HTML时在HTML中指定了Disabled，则在页面加载期间不会加载样式表。 相反，如果禁用属性更改为false或删除时，样式表将按需加载。</p> + <p>仅对于<code>rel="stylesheet"</code> ，<code>disabled</code> 的 Boolean 属性指示是否应加载所描述的样式表并将其应用于文档。 如果在加载 HTML 时在 HTML 中指定了 Disabled，则在页面加载期间不会加载样式表。 相反，如果禁用属性更改为 false 或删除时，样式表将按需加载。</p> - <p>但是，一旦加载样式表，对Disabled属性的值所做的更改将不再与{{domxref("StyleSheet.disabled")}} 属性的值有任何关系。 相反，更改此属性的值只是启用和禁用应用于文档的样式表表单。</p> + <p>但是，一旦加载样式表，对 Disabled 属性的值所做的更改将不再与{{domxref("StyleSheet.disabled")}} 属性的值有任何关系。 相反，更改此属性的值只是启用和禁用应用于文档的样式表表单。</p> - <p>这与StyleSheet的disable属性不同； 将其更改为true会将样式表从文档的{{domxref("document.styleSheets")}} 列表中删除，并且在切换回false时不会自动重新加载样式表。</p> + <p>这与 StyleSheet 的 disable 属性不同； 将其更改为 true 会将样式表从文档的{{domxref("document.styleSheets")}} 列表中删除，并且在切换回 false 时不会自动重新加载样式表。</p> </dd> <dt>{{htmlattrdef("href")}}</dt> <dd>此属性指定被链接资源的{{glossary("URL")}}。 URL 可以是绝对的，也可以是相对的。</dd> <dt>{{htmlattrdef("hreflang")}}</dt> - <dd>此属性指明了被链接资源的语言. 其意义仅供参考。可取的值参见 <a href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>。仅当设置了 {{htmlattrxref("href", "a")}} 属性时才应设置该属性。</dd> + <dd>此属性指明了被链接资源的语言。其意义仅供参考。可取的值参见 <a href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>。仅当设置了 {{htmlattrxref("href", "a")}} 属性时才应设置该属性。</dd> <dt id="name-attribute">{{HTMLAttrDef("importance")}} {{Experimental_Inline}}</dt> <dd>指示资源的相对重要性。 优先级提示使用以下值委托：</dd> <dd> @@ -156,34 +156,34 @@ translation_of: Web/HTML/Element/link <p><strong><code>low</code></strong>: 向浏览器指示资源的优先级较低。</p> <div class="blockIndicator note"> - <p><strong>Note: </strong>只有存在rel=“preload”或rel=“prefetch”时，importance属性才能用于<link>元素。</p> + <p><strong>Note: </strong>只有存在 rel=“preload” 或 rel=“prefetch” 时，importance 属性才能用于<link>元素。</p> </div> </dd> <dt>{{htmlattrdef("integrity")}} {{experimental_inline}}</dt> - <dd>包含行内元数据，它是一个你用浏览器获取的资源文件的哈希值，以base64编码的方式加的密，这样用户能用它来验证一个获取到的资源,在传送时未被非法篡改，详情查看<a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>。</dd> + <dd>包含行内元数据，它是一个你用浏览器获取的资源文件的哈希值，以 base64 编码的方式加的密，这样用户能用它来验证一个获取到的资源，在传送时未被非法篡改，详情查看<a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>。</dd> <dt>{{htmlattrdef("media")}}</dt> <dd>这个属性规定了外部资源适用的媒体类型。它的值必须是"<a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries">媒体查询</a>"。这个属性使得用户代理能选择最适合设备运行的媒体类型。 <div class="note"><strong>使用注意：</strong> <ul> - <li>在HTML 4中，该属性只能是一组以空白符作为分隔的媒体描述文字，比如"<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media">媒体类型</a>"规定了该元素可取的属性，如print、screen、aural、braille。HTML5将该属性值扩展为任意类型的"<a href="https://developer.mozilla.org/zh-CN/docs/CSS/Media_queries">媒体查询</a>"，"媒体查询"将HTML4的属性值都包括在内。</li> - <li>不支持"<a href="https://developer.mozilla.org/zh-CN/docs/CSS/Media_queries">CSS3 媒体查询</a>"的浏览器并不会强行识别这些链接，因此别忘了设置备用link，即那些可用于HTML4的link。</li> + <li>在 HTML 4 中，该属性只能是一组以空白符作为分隔的媒体描述文字，比如"<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media">媒体类型</a>"规定了该元素可取的属性，如 print、screen、aural、braille。HTML5 将该属性值扩展为任意类型的"<a href="https://developer.mozilla.org/zh-CN/docs/CSS/Media_queries">媒体查询</a>"，"媒体查询"将 HTML4 的属性值都包括在内。</li> + <li>不支持"<a href="https://developer.mozilla.org/zh-CN/docs/CSS/Media_queries">CSS3 媒体查询</a>"的浏览器并不会强行识别这些链接，因此别忘了设置备用 link，即那些可用于 HTML4 的 link。</li> </ul> </div> </dd> <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> - <dd>一个字符串，指示在获取资源时使用哪个引荐来源网址: + <dd>一个字符串，指示在获取资源时使用哪个引荐来源网址： <ul> <li><code>'no-referrer'</code> 表示{{HTTPHeader("Referer")}} 标头将不会发送。</li> <li><code>'no-referrer-when-downgrade'</code> 的原始位置时不会发送任何{{HTTPHeader("Referer")}}标头。 如果未指定其他政策，这是用户代理的默认行为。</li> <li><code>'origin'</code> 意味着引荐来源网址将是页面的来源，大致是方案，主机和端口。</li> <li><code>'origin-when-cross-origin'</code> 这意味着导航到其他来源将仅限于方案，主机和端口，而在同一来源上导航将包括引荐来源网址的路径。</li> - <li><code>'unsafe-url'</code> 意味着引荐来源网址将包含来源和路径（但不包括片段，密码或用户名）。 这种情况是不安全的，因为它可能会将来源和路径从受TLS保护的资源泄漏到不安全的来源。</li> + <li><code>'unsafe-url'</code> 意味着引荐来源网址将包含来源和路径（但不包括片段，密码或用户名）。 这种情况是不安全的，因为它可能会将来源和路径从受 TLS 保护的资源泄漏到不安全的来源。</li> </ul> </dd> <dt>{{htmlattrdef("rel")}}</dt> <dd>此属性命名链接文档与当前文档的关系。 该属性必须是<a href="/zh-CN/docs/Web/HTML/Link_types">链接类型值</a>的用空格分隔的列表。</dd> <dt>{{htmlattrdef("sizes")}}</dt> - <dd>这个属性定义了包含相应资源的可视化媒体中的icons的大小。它只有在{{htmlattrxref("rel","link")}}包含icon的<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types">link类型值</a>。它可能有如下的规则。 + <dd>这个属性定义了包含相应资源的可视化媒体中的 icons 的大小。它只有在{{htmlattrxref("rel","link")}}包含 icon 的<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types">link 类型值</a>。它可能有如下的规则。 <ul> <li><code>any</code> 表示图标可以按矢量格式缩放到任意大小，例如<code>image/svg+xml。</code></li> <li>一个由空白符分隔的尺寸列表。每一个都以<code><em><width in pixels></em>x<em><height in pixels></em></code> 或 <code><em><width in pixels></em>X<em><height in pixels>给出。</em></code>尺寸列表中的每一个尺寸都必须包含在资源里。</li> @@ -192,21 +192,21 @@ translation_of: Web/HTML/Element/link <div class="note"><strong>用法注意：</strong> <ul> - <li>大多数的icon格式只能存储一个icon。因此绝大多数使用 {{htmlattrxref("sizes")}}时只包含一个值。微软的ICO格式和苹果的ICNS格式都是这样，ICO使用得更加广泛，推荐你使用它。</li> - <li>苹果的IOS系统并不支持这个属性，于是苹果的IPhone以及IPad使用特殊的、非标准的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types">link类型值</a>去定义作为Web Clip或开始占位符：<code>apple-touch-icon</code> 和 <code>apple-touch-startup-icon。</code></li> + <li>大多数的 icon 格式只能存储一个 icon。因此绝大多数使用 {{htmlattrxref("sizes")}}时只包含一个值。微软的 ICO 格式和苹果的 ICNS 格式都是这样，ICO 使用得更加广泛，推荐你使用它。</li> + <li>苹果的 IOS 系统并不支持这个属性，于是苹果的 IPhone 以及 IPad 使用特殊的、非标准的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types">link 类型值</a>去定义作为 Web Clip 或开始占位符：<code>apple-touch-icon</code> 和 <code>apple-touch-startup-icon。</code></li> </ul> </div> </dd> <dt>{{HTMLAttrDef("title")}}</dt> <dd>属性在<code><link></code>元素上有特殊的语义。当用于<code><link rel="stylesheet"></code>时，它定义了一个<a href="/zh-CN/docs/Web/CSS/Alternative_style_sheets">首选样式表或备用样式表</a>。不正确地使用它可能会导致<a href="/zh-CN/docs/Correctly_Using_Titles_With_External_Stylesheets">样式表被忽略</a>。</dd> <dt>{{htmlattrdef("type")}}</dt> - <dd>这个属性被用于定义链接的内容的类型。这个属性的值应该是像text/html，text/css等MIME类型。这个属性常用的用法是定义链接的样式表，最常用的值是表明了CSS的text/css。</dd> + <dd>这个属性被用于定义链接的内容的类型。这个属性的值应该是像 text/html，text/css 等 MIME 类型。这个属性常用的用法是定义链接的样式表，最常用的值是表明了 CSS 的 text/css。</dd> <dt></dt> <dt> <h3 id="非标准属性">非标准属性</h3> </dt> <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt> - <dd>此属性的值提供有关可能在对象上执行的功能的信息。 这些值通常在使用时由HTTP协议给出，但是（出于与“<strong>title</strong>”属性类似的原因）将其预先包含在链接中可能是有用的。 例如，浏览器可能根据指定的方法选择不同的链接呈现方式。 可搜索的内容可能会得到其他图标，或者外部链接可能会显示离开当前站点的指示。 即使定义的浏览器Internet Explorer 4也无法很好地理解或支持此属性。</dd> + <dd>此属性的值提供有关可能在对象上执行的功能的信息。 这些值通常在使用时由 HTTP 协议给出，但是（出于与 “<strong>title</strong>” 属性类似的原因）将其预先包含在链接中可能是有用的。 例如，浏览器可能根据指定的方法选择不同的链接呈现方式。 可搜索的内容可能会得到其他图标，或者外部链接可能会显示离开当前站点的指示。 即使定义的浏览器 Internet Explorer 4 也无法很好地理解或支持此属性。</dd> <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt> <dd>此属性标识下一个导航可能需要的资源，用户代理应检索该资源。 这允许用户代理在将来请求资源时更快地做出响应。</dd> <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt> @@ -215,27 +215,27 @@ translation_of: Web/HTML/Element/link <h3 id="已淘汰的属性">已淘汰的属性</h3> </dt> <dt>{{htmlattrdef("charset")}}{{obsolete_inline}}</dt> - <dd>此属性定义链接资源的字符编码。 该值为{{rfc(2045)}}中定义的字符集的空格和/或逗号分隔列表。 缺省值为iso-8859-1。 + <dd>此属性定义链接资源的字符编码。 该值为{{rfc(2045)}}中定义的字符集的空格和/或逗号分隔列表。 缺省值为 iso-8859-1。 <div class="blockIndicator note"> <p><strong>使用说明：</strong>该属性已淘汰且禁止使用<strong>。要</strong>实现相同效果，可在外链资源中使用<code>Content-Type</code> HTTP header。</p> </div> </dd> <dt>{{htmlattrdef("rev")}}{{obsolete_inline}}</dt> - <dd>此属性的值显示了 {{HTMLAttrxRef("href", "link")}} 属性所定义的当前文档与链接文档的关系。 因此，该属性定义了与rel属性的值相比的反向关系。 该属性的<a href="/zh-CN/docs/Web/HTML/Link_types">Link type value</a>类似于{{HTMLAttrxRef("rel", "link")}}的可能值。</dd> + <dd>此属性的值显示了 {{HTMLAttrxRef("href", "link")}} 属性所定义的当前文档与链接文档的关系。 因此，该属性定义了与 rel 属性的值相比的反向关系。 该属性的<a href="/zh-CN/docs/Web/HTML/Link_types">Link type value</a>类似于{{HTMLAttrxRef("rel", "link")}}的可能值。</dd> <dd> <div class="blockIndicator note"> - <p><strong>Note:</strong> WHATWG HTML生活标准（MDN将其视为规范的规范）认为该属性已过时。 但是，值得注意的是，rev在W3C规范中并未过时。 就是说，鉴于不确定性，依靠rev是不明智的。</p> + <p><strong>Note:</strong> WHATWG HTML 生活标准（MDN 将其视为规范的规范）认为该属性已过时。 但是，值得注意的是，rev 在 W3C 规范中并未过时。 就是说，鉴于不确定性，依靠 rev 是不明智的。</p> - <p>相反，您应该使用具有相反链接类型值的{{HTMLAttrxRef("rel", "link")}}属性。 例如，要建立反向链接，请指定作者。 而且，即使许多站点都以这种方式滥用此属性，该属性也不代表“修订”，并且不得与版本号一起使用。</p> + <p>相反，您应该使用具有相反链接类型值的{{HTMLAttrxRef("rel", "link")}}属性。 例如，要建立反向链接，请指定作者。 而且，即使许多站点都以这种方式滥用此属性，该属性也不代表 “修订”，并且不得与版本号一起使用。</p> </div> </dd> </dl> <h2 id="示例">示例</h2> -<h3 id="引入一个css文件">引入一个css文件</h3> +<h3 id="引入一个css文件">引入一个 css 文件</h3> -<p>用下面的语法来引入一个css文件：</p> +<p>用下面的语法来引入一个 css 文件：</p> <pre class="brush: html notranslate"><link href="style.css" rel="stylesheet"> </pre> @@ -268,7 +268,7 @@ translation_of: Web/HTML/Element/link <h3 id="通过媒体查询有条件地加载资源">通过媒体查询有条件地加载资源</h3> -<p>您可以在<code>media</code>属性中提供媒体类型或查询; 然后，只有在媒体条件为true时，才会加载此资源。 例如：</p> +<p>您可以在<code>media</code>属性中提供媒体类型或查询; 然后，只有在媒体条件为 true 时，才会加载此资源。 例如：</p> <pre class="brush: html notranslate"><code><link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="all"> @@ -292,7 +292,7 @@ function sheetError() { <link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()"> </pre> -<div class="note"><strong>注意：</strong> 当样式表以及它引用的部分全部加载完毕，load事件就会在样式表应用到内容之前立即触发。</div> +<div class="note"><strong>注意：</strong> 当样式表以及它引用的部分全部加载完毕，load 事件就会在样式表应用到内容之前立即触发。</div> <h3 id="预加载例子">预加载例子</h3> @@ -304,7 +304,7 @@ function sheetError() { <tbody> <tr> <th><a href="/en-US/docs/Web/HTML/Content_categories">内容类型</a></th> - <td>元数据。如果使用了 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> 属性, 则为 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> 和 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + <td>元数据。如果使用了 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> 属性，则为 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> 和 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> </tr> <tr> <th>允许的元素内容</th> @@ -316,14 +316,14 @@ function sheetError() { </tr> <tr> <th>允许的父元素</th> - <td>任何可以接受元数据的元素.。如果使用了 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/itemprop">itemprop</a>属性,，则其父元素可以是任何可接受 <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a> 的元素。</td> + <td>任何可以接受元数据的元素.。如果使用了 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/itemprop">itemprop</a>属性，，则其父元素可以是任何可接受 <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a> 的元素。</td> </tr> <tr> <th>允许的 ARIA roles</th> <td>无</td> </tr> <tr> - <th>DOM接口</th> + <th>DOM 接口</th> <td>{{domxref("HTMLLinkElement")}}</td> </tr> </tbody> @@ -332,11 +332,11 @@ function sheetError() { <h2 id="注意">注意</h2> <ul> - <li> <code><link></code> 标签只能出现在head元素中，然而可以出现多个<link>标签。</li> - <li>HTML 3.2只为link元素定义了<strong>href</strong>, <strong>methods</strong>, <strong>rel</strong>，<strong>rev</strong>，<strong>title</strong>，和<strong>urn</strong>属性。</li> - <li>HTML 2为link标签定义了 <strong>href</strong>, <strong>methods</strong>，<strong>rel</strong>，<strong>rev</strong>，<strong>title，</strong>和 <strong>urn</strong> 属性，<strong>methods</strong> 和 <strong>urn</strong>随后从规范中移除。</li> - <li>HTML和XHTML规范为link定义了事件处理，但是并不清楚它们将会怎样被使用。</li> - <li>在XHTML 1.0中，空元素link要求有尾随斜线，像这样<link />。</li> + <li> <code><link></code> 标签只能出现在 head 元素中，然而可以出现多个<link>标签。</li> + <li>HTML 3.2 只为 link 元素定义了<strong>href</strong>, <strong>methods</strong>, <strong>rel</strong>，<strong>rev</strong>，<strong>title</strong>，和<strong>urn</strong>属性。</li> + <li>HTML 2 为 link 标签定义了 <strong>href</strong>, <strong>methods</strong>，<strong>rel</strong>，<strong>rev</strong>，<strong>title，</strong>和 <strong>urn</strong> 属性，<strong>methods</strong> 和 <strong>urn</strong>随后从规范中移除。</li> + <li>HTML 和 XHTML 规范为 link 定义了事件处理，但是并不清楚它们将会怎样被使用。</li> + <li>在 XHTML 1.0 中，空元素 link 要求有尾随斜线，像这样<link />。</li> </ul> <h2 id="Specifications" name="Specifications">标准规范</h2> diff --git a/files/zh-cn/web/html/element/main/index.html b/files/zh-cn/web/html/element/main/index.html index adb55545df..86961c4ff5 100644 --- a/files/zh-cn/web/html/element/main/index.html +++ b/files/zh-cn/web/html/element/main/index.html @@ -22,7 +22,7 @@ translation_of: Web/HTML/Element/main <ul class="htmlelt"> <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">内容</a>类别</dfn><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content" style="font-family: 'Microsoft Yahei', sans-serif; background-color: rgba(255, 149, 0, 0.0980392);" title="HTML/Content_categories#Flow_content">Flow content</a><span style="background-color: rgba(255, 149, 0, 0.0980392); font-family: microsoft yahei,sans-serif;">, palpable content</span>.</li> <li><dfn>允许内容</dfn> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content" style="font-family: 'Microsoft Yahei', sans-serif; background-color: rgba(255, 149, 0, 0.0980392);" title="HTML/Content_categories#Flow_content">Flow content</a><span style="background-color: rgba(255, 149, 0, 0.0980392); font-family: microsoft yahei,sans-serif;">.</span></li> - <li><dfn>标签省略</dfn>无; 开始与结束都是强制性.</li> + <li><dfn>标签省略</dfn>无; 开始与结束都是强制性。</li> <li><dfn>被允许的父级元素</dfn>任何支持流内容但可能不是继承元素的 元素{{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, 或{{HTMLElement("nav")}} </li> <li><dfn>DOM 接口</dfn> {{domxref("HTMLElement")}}</li> </ul> @@ -131,7 +131,7 @@ translation_of: Web/HTML/Element/main <h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> -<p><code><main></code> 标签受广泛支持。对于IE浏览器11版本和低于11的版本，推荐向 <code><main></code> 元素添加 <code>"main" 这一</code> {{glossary("ARIA")}} 角色，以保证其可访问性。(屏幕阅读器，如 JAWS，当与较旧版本的 Internet Explorer 一起使用时，需包括此 <code>role</code> 属性才能理解 <code><main></code> 元素的语义含义）</p> +<p><code><main></code> 标签受广泛支持。对于 IE 浏览器 11 版本和低于 11 的版本，推荐向 <code><main></code> 元素添加 <code>"main" 这一</code> {{glossary("ARIA")}} 角色，以保证其可访问性。(屏幕阅读器，如 JAWS，当与较旧版本的 Internet Explorer 一起使用时，需包括此 <code>role</code> 属性才能理解 <code><main></code> 元素的语义含义）</p> <pre class="brush: html"><main role="main"> ... diff --git a/files/zh-cn/web/html/element/map/index.html b/files/zh-cn/web/html/element/map/index.html index 1d69778e65..b62562bf05 100644 --- a/files/zh-cn/web/html/element/map/index.html +++ b/files/zh-cn/web/html/element/map/index.html @@ -7,7 +7,7 @@ translation_of: Web/HTML/Element/map <p>这篇文章翻译不完整</p> </div> -<p><strong>HTML <code><map></code> 属性</strong> 与 {{HTMLElement("area")}} 属性一起使用来定义一个图像映射(一个可点击的链接区域).</p> +<p><strong>HTML <code><map></code> 属性</strong> 与 {{HTMLElement("area")}} 属性一起使用来定义一个图像映射 (一个可点击的链接区域).</p> <table class="properties"> <tbody> @@ -40,7 +40,7 @@ translation_of: Web/HTML/Element/map <dl> <dt>{{htmlattrdef("name")}}</dt> - <dd>name属性 给map一个名字用来查询，这个属性是必须的，值必须不能为空并且不能带空格。name属性不准与同文档中其他map元素的值相同，如果id属性也被添加，name属性和id属性的值必须相同。</dd> + <dd>name 属性 给 map 一个名字用来查询，这个属性是必须的，值必须不能为空并且不能带空格。name 属性不准与同文档中其他 map 元素的值相同，如果 id 属性也被添加，name 属性和 id 属性的值必须相同。</dd> </dl> <h2 id="示例">示例</h2> diff --git a/files/zh-cn/web/html/element/mark/index.html b/files/zh-cn/web/html/element/mark/index.html index 89ec1eea7a..8857d8cc3c 100644 --- a/files/zh-cn/web/html/element/mark/index.html +++ b/files/zh-cn/web/html/element/mark/index.html @@ -5,15 +5,15 @@ translation_of: Web/HTML/Element/mark --- <h2 id="概要">概要</h2> -<p>HTML标记文本元素(< Mark >)表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。</p> +<p>HTML 标记文本元素 (< Mark >) 表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。</p> -<p>这个<em> HTML mark </em>标签代表突出显示的文字,例如可以为了<strong>标记</strong>特定上下文中的文本而使用这个标签<strong><font color="#252525" face="Microsoft YaHei"><span style="font-size: 12px; line-height: 19.2000007629395px;">.</span></font></strong> 举个例子，它可以用来显示搜索引擎搜索后关键词</p> +<p>这个<em> HTML mark </em>标签代表突出显示的文字，例如可以为了<strong>标记</strong>特定上下文中的文本而使用这个标签<strong><font color="#252525" face="Microsoft YaHei"><span style="font-size: 12px; line-height: 19.2000007629395px;">.</span></font></strong> 举个例子，它可以用来显示搜索引擎搜索后关键词</p> <ul class="htmlelt"> <li><dfn>内容分类</dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</li> <li><dfn>允许的内容</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li> <li><dfn>标签省略</dfn> {{no_tag_omission}}</li> - <li><dfn>允许的父元素</dfn>任何接受<a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a> 的元素.</li> + <li><dfn>允许的父元素</dfn>任何接受<a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a> 的元素。</li> <li><dfn>DOM 接口</dfn> {{domxref("HTMLElement")}}</li> </ul> @@ -29,11 +29,11 @@ translation_of: Web/HTML/Element/mark <ul> <li>当用在引用（{{HTMLElement("q")}}、{{HTMLElement("blockquote")}}）中时，通常用来显示有特殊意义的文本，但不在原材料中标记出来；或者是用来显示特殊审查的材料，即使原作者不认为它特别重要。</li> <li>另外，<mark>元素还用来显示与用户当前活动相关的一部分文档内容。例如，它可能被用于显示匹配搜索结果中的单词。</li> - <li>不要为了语法高亮而用 <code><mark></code> 元素; 你应该用 <em>{{HTMLElement("strong")}}</em> 元素结合适当的CSS来实现这个目的（语法高亮）。</li> + <li>不要为了语法高亮而用 <code><mark></code> 元素; 你应该用 <em>{{HTMLElement("strong")}}</em> 元素结合适当的 CSS 来实现这个目的（语法高亮）。</li> </ul> <div class="blockIndicator note"> -<p>不要把 <code><mark></code> 元素和 {{HTMLElement("strong")}} 元素搞混淆；{{HTMLElement("strong")}} 元素用来表示文本在上下文的重要性的， 而 <code><mark></code> 元素是用来表示上下文的关联性的.</p> +<p>不要把 <code><mark></code> 元素和 {{HTMLElement("strong")}} 元素搞混淆；{{HTMLElement("strong")}} 元素用来表示文本在上下文的重要性的， 而 <code><mark></code> 元素是用来表示上下文的关联性的。</p> </div> <h2 id="例子">例子</h2> diff --git a/files/zh-cn/web/html/element/marquee/index.html b/files/zh-cn/web/html/element/marquee/index.html index c604b26c7b..36e201fdfc 100644 --- a/files/zh-cn/web/html/element/marquee/index.html +++ b/files/zh-cn/web/html/element/marquee/index.html @@ -29,13 +29,13 @@ translation_of: Web/HTML/Element/marquee <dt>{{htmlattrdef("hspace")}}</dt> <dd>设置水平边距。</dd> <dt>{{htmlattrdef("loop")}}</dt> - <dd>设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动.</dd> + <dd>设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动。</dd> <dt>{{htmlattrdef("scrollamount")}}</dt> <dd>设置每次滚动时移动的长度（以像素为单位）。默认值为 6。</dd> <dt>{{htmlattrdef("scrolldelay")}}</dt> <dd>设置每次滚动时的时间间隔（以毫秒为单位）。默认值为 85。请注意， 除非指定 truespeed 值，否则将忽略任何小于 60 的值，并改为使用 60。</dd> <dt>{{htmlattrdef("truespeed")}}</dt> - <dd>默认情况下，会忽略小于60的scrolldelay值。如果存在truespeed，那些值不会被忽略。</dd> + <dd>默认情况下，会忽略小于 60 的 scrolldelay 值。如果存在 truespeed，那些值不会被忽略。</dd> <dt>{{htmlattrdef("vspace")}}</dt> <dd>以像素或百分比值设置垂直边距。</dd> <dt>{{htmlattrdef("width")}}</dt> diff --git a/files/zh-cn/web/html/element/menu/index.html b/files/zh-cn/web/html/element/menu/index.html index 27ce5ea843..97c4b0c173 100644 --- a/files/zh-cn/web/html/element/menu/index.html +++ b/files/zh-cn/web/html/element/menu/index.html @@ -3,7 +3,7 @@ title: <menu> slug: Web/HTML/Element/menu tags: - HTML - - HTML交互元素 + - HTML 交互元素 - UX - Web - 元素 diff --git a/files/zh-cn/web/html/element/menuitem/index.html b/files/zh-cn/web/html/element/menuitem/index.html index 18605f55a0..86d23c3144 100644 --- a/files/zh-cn/web/html/element/menuitem/index.html +++ b/files/zh-cn/web/html/element/menuitem/index.html @@ -23,7 +23,7 @@ translation_of: Web/HTML/Element/menuitem </tr> <tr> <th scope="row">允许的内容</th> - <td>None, 这是一个{{Glossary("empty element", "空元素")}}。</td> + <td>None，这是一个{{Glossary("empty element", "空元素")}}。</td> </tr> <tr> <th scope="row">标签省略</th> @@ -52,17 +52,17 @@ translation_of: Web/HTML/Element/menuitem <dt>{{HTMLAttrDef("checked")}}</dt> <dd>布尔值，指示是否选择了命令。只能作为属性使用在 <code>checkbox</code> 或 <code>radio</code> 中。</dd> <dt>{{HTMLAttrDef("command")}}</dt> - <dd>指定一个单独元素的ID，指示要间接调用的命令。在包含属性的菜单项中也不能使用。<code>checked</code>、<code>disabled</code>、<code>icon</code>、<code>label</code>、<code>radiogroup</code> 或 <code>type</code>。</dd> + <dd>指定一个单独元素的 ID，指示要间接调用的命令。在包含属性的菜单项中也不能使用。<code>checked</code>、<code>disabled</code>、<code>icon</code>、<code>label</code>、<code>radiogroup</code> 或 <code>type</code>。</dd> <dt>{{HTMLAttrDef("default")}}</dt> <dd>布尔值，表示使用与菜单主题元素相同的命令。（如 <code>button</code> 或 <code>input</code>）。</dd> <dt>{{HTMLAttrDef("disabled")}}</dt> <dd>布尔值，表示命令在当前状态下不可用。请注意，禁用与隐藏不同；禁用的属性适用于任何环境变化可能导致命令相关的上下文中。</dd> <dt>{{HTMLAttrDef("icon")}}</dt> - <dd>图片URL，用于提供图片来表示命令。</dd> + <dd>图片 URL，用于提供图片来表示命令。</dd> <dt>{{HTMLAttrDef("label")}}</dt> <dd>展示给用户一个命令的名字，当 <code>command</code> 属性不存在时是必须的。</dd> <dt>{{HTMLAttrDef("radiogroup")}}</dt> - <dd>此属性指定要切换为单选按钮时，选定的一组命令的名称。只能作为radio的属性使用。</dd> + <dd>此属性指定要切换为单选按钮时，选定的一组命令的名称。只能作为 radio 的属性使用。</dd> <dt>{{HTMLAttrDef("type")}}</dt> <dd>这个属性指定命令的类型，可以为以下三个命令之一。 <ul> diff --git a/files/zh-cn/web/html/element/meta/index.html b/files/zh-cn/web/html/element/meta/index.html index ed6d77bafb..bdfc85897e 100644 --- a/files/zh-cn/web/html/element/meta/index.html +++ b/files/zh-cn/web/html/element/meta/index.html @@ -15,8 +15,8 @@ translation_of: Web/HTML/Element/meta <ul class="htmlelt"> <li><dfn><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories">内容分类</a></dfn>元数据内容，如果 {{htmlattrxref("itemprop", "meta")}} 属性存在：<a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流数据</a>，<a href="/en-US/docs/HTML/Content_categories#Phrasing_content">表述内容</a></li> <li><dfn>允许的内容</dfn> 无，这是一个 {{Glossary("空元素")}}</li> - <li><dfn>标签省略</dfn>因为这是一个void元素，必须有开始标签而闭合标签可以省略</li> - <li><dfn>允许的父元素</dfn><code><meta charset></code>, <code><meta http-equiv></code>: {{HTMLElement("head")}} 元素. 如果 {{htmlattrxref("http-equiv", "meta")}} 不是编码声明, 它也可以放在{{HTMLElement("noscript")}}元素内，它本身在 {{HTMLElement("head")}}元素内部。</li> + <li><dfn>标签省略</dfn>因为这是一个 void 元素，必须有开始标签而闭合标签可以省略</li> + <li><dfn>允许的父元素</dfn><code><meta charset></code>, <code><meta http-equiv></code>: {{HTMLElement("head")}} 元素。如果 {{htmlattrxref("http-equiv", "meta")}} 不是编码声明，它也可以放在{{HTMLElement("noscript")}}元素内，它本身在 {{HTMLElement("head")}}元素内部。</li> <li></li> <li><dfn>默认无障碍语义</dfn><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">没有相应的语义</a></li> <li><dfn>允许的无障碍语义</dfn>没有允许的语义（<code>role</code>）</li> @@ -27,7 +27,7 @@ translation_of: Web/HTML/Element/meta <ul> <li>如果设置了 {{htmlattrxref("name", "meta")}} 属性，<code>meta</code> 元素提供的是文档级别（<em>document-level</em>）的元数据，应用于整个页面。</li> - <li>如果设置了 {{htmlattrxref("http-equiv", "meta")}} 属性，<code>meta</code> 元素则是编译指令，提供的信息与类似命名的HTTP头部相同。</li> + <li>如果设置了 {{htmlattrxref("http-equiv", "meta")}} 属性，<code>meta</code> 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。</li> <li>如果设置了 {{htmlattrxref("charset", "meta")}} 属性，<code>meta</code> 元素是一个字符集声明，告诉文档使用哪种字符编码。</li> <li>如果设置了 {{htmlattrxref("itemprop")}} 属性，<code>meta</code> 元素提供用户定义的元数据。</li> </ul> @@ -37,23 +37,23 @@ translation_of: Web/HTML/Element/meta <p>此元素包括<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p> <div class="note"> -<p>注意: 全局属性 {{htmlattrxref("name", "meta")}} 在 {{HTMLElement("meta")}} 元素中具有特殊的语义；另外， 在同一个 <meta> 标签中，{{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} 或者 {{htmlattrxref("charset", "meta")}} 三者中任何一个属性存在时，{{htmlattrxref("itemprop", "meta")}} 属性不能被使用。</p> +<p>注意：全局属性 {{htmlattrxref("name", "meta")}} 在 {{HTMLElement("meta")}} 元素中具有特殊的语义；另外， 在同一个 <meta> 标签中，{{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} 或者 {{htmlattrxref("charset", "meta")}} 三者中任何一个属性存在时，{{htmlattrxref("itemprop", "meta")}} 属性不能被使用。</p> </div> <p><strong>{{htmlattrdef("charset")}}</strong></p> -<p>这个属性声明了文档的字符编码。如果使用了这个属性，其值必须是与ASCII大小写无关（ASCII case-insensitive）的"<code>utf-8</code>"。</p> +<p>这个属性声明了文档的字符编码。如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的"<code>utf-8</code>"。</p> <dl> <dt>{{htmlattrdef("content")}}</dt> <dd>此属性包含{{htmlattrxref("http-equiv", "meta")}} 或{{htmlattrxref("name", "meta")}} 属性的值，具体取决于所使用的值。</dd> <dt>{{htmlattrdef("http-equiv")}}</dt> - <dd>属性定义了一个编译指示指令。这个属性叫做 <code><strong>http-equiv</strong>(alent)</code> 是因为所有允许的值都是特定HTTP头部的名称，如下： + <dd>属性定义了一个编译指示指令。这个属性叫做 <code><strong>http-equiv</strong>(alent)</code> 是因为所有允许的值都是特定 HTTP 头部的名称，如下： <ul> <li><code>content-security-policy</code><br> 它允许页面作者定义当前页的<a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">内容策略</a>。 内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。</li> <li><code>content-type</code><br> - 如果使用这个属性，其值必须是"<code>text/html; charset=utf-8</code>"。注意：该属性只能用于 <a href="/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> 为 <code>text/html</code> 的文档，不能用于MIME类型为XML的文档。</li> + 如果使用这个属性，其值必须是"<code>text/html; charset=utf-8</code>"。注意：该属性只能用于 <a href="/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> 为 <code>text/html</code> 的文档，不能用于 MIME 类型为 XML 的文档。</li> <li><code>default-style</code> <p>设置默认 <a href="/zh-CN/docs/Web/CSS">CSS 样式表</a>组的名称。</p> </li> @@ -62,10 +62,10 @@ translation_of: Web/HTML/Element/meta 如果指定，则 <code>content</code> 属性必须具有值 "<code>IE=edge</code>"。用户代理必须忽略此指示。</p> </li> <li><code>refresh</code><br> - 这个属性指定: + 这个属性指定： <ul> - <li>如果 {{htmlattrxref("content", "meta")}} 只包含一个正整数，则为重新载入页面的时间间隔(秒)；</li> - <li>如果 {{htmlattrxref("content", "meta")}} 包含一个正整数，并且后面跟着字符串 '<code>;url=</code>' 和一个合法的 URL，则是重定向到指定链接的时间间隔(秒)</li> + <li>如果 {{htmlattrxref("content", "meta")}} 只包含一个正整数，则为重新载入页面的时间间隔 (秒)；</li> + <li>如果 {{htmlattrxref("content", "meta")}} 包含一个正整数，并且后面跟着字符串 '<code>;url=</code>' 和一个合法的 URL，则是重定向到指定链接的时间间隔 (秒)</li> </ul> </li> </ul> @@ -83,7 +83,7 @@ translation_of: Web/HTML/Element/meta </ul> </dd> <dt>{{htmlattrdef("name")}}</dt> - <dd><code>name</code> 和 <code>content</code> 属性可以一起使用，以名-值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。</dd> + <dd><code>name</code> 和 <code>content</code> 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。</dd> <dd>在<a href="/zh-CN/docs/Web/HTML/Element/meta/name">标准元数据名称</a>中查看 HTML 规范等规范中定义的标准元数据名称。</dd> </dl> diff --git a/files/zh-cn/web/html/element/meta/name/index.html b/files/zh-cn/web/html/element/meta/name/index.html index f0e4c020a3..86f69af359 100644 --- a/files/zh-cn/web/html/element/meta/name/index.html +++ b/files/zh-cn/web/html/element/meta/name/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTML/Element/meta/name --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">The {{htmlelement("meta")}} 元素可用于提供 名称-值 对形式的文档元数据，{{htmlattrxref("name", "meta")}} 属性为元数据条目提供名称，而 {{htmlattrxref("content", "meta")}} 属性提供值。</span></p> +<p><span class="seoSummary">The {{htmlelement("meta")}} 元素可用于提供 名称 - 值 对形式的文档元数据，{{htmlattrxref("name", "meta")}} 属性为元数据条目提供名称，而 {{htmlattrxref("content", "meta")}} 属性提供值。</span></p> <h3 id="HTML_规范中定义的标准元数据名称">HTML 规范中定义的标准元数据名称</h3> @@ -202,7 +202,7 @@ translation_of: Web/HTML/Element/meta/name <li><code>creator</code>：当前文档的创建者，例如某个组织或者机构。如果有不止一个创建者，则应当使用多个名称为 <code>creator</code> 的 {{HTMLElement("meta")}} 元素。（而不是像关键词一样使用逗号分隔：关键词不应包含逗号，但创建者名称可能含有逗号。）</li> <li><code>googlebot</code>：<code>robots</code> 的替代名称，只被 Googlebot（Google 的网页爬虫/索引搜寻器）使用。</li> <li><code>publisher</code>：当前文档的发布者/出版者。</li> - <li><code>robots</code>：爬虫、协作搜寻器，或者“机器人”，对此页面的处理行为，或者说，应当遵守的规则。是一个使用逗号分隔的、由下列值构成的列表： + <li><code>robots</code>：爬虫、协作搜寻器，或者 “机器人”，对此页面的处理行为，或者说，应当遵守的规则。是一个使用逗号分隔的、由下列值构成的列表： <table class="standard-table"> <caption><code><meta name="robots"></code> 的 <code>content</code> 属性的值</caption> <thead> diff --git a/files/zh-cn/web/html/element/meter/index.html b/files/zh-cn/web/html/element/meter/index.html index e5a26f656a..9a943677c3 100644 --- a/files/zh-cn/web/html/element/meter/index.html +++ b/files/zh-cn/web/html/element/meter/index.html @@ -42,21 +42,21 @@ translation_of: Web/HTML/Element/meter <dl> <dt>{{htmlattrdef("value")}}</dt> - <dd>当前的数值。如果设置了最小值和最大值（分别由min属性和max属性定义），它必须介于最小值和最大值之间。如果没有指定或者格式有误，值即为0.如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值。 - <div class="note"><strong>使用备注: </strong>除非值域在0到1（闭区间）, 否则最小值和最大值属性需要定义，以保证value属性在值域范围内。换言之，默认的min和max值分别为0和1。</div> + <dd>当前的数值。如果设置了最小值和最大值（分别由 min 属性和 max 属性定义），它必须介于最小值和最大值之间。如果没有指定或者格式有误，值即为 0.如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值。 + <div class="note"><strong>使用备注：</strong>除非值域在 0 到 1（闭区间）, 否则最小值和最大值属性需要定义，以保证 value 属性在值域范围内。换言之，默认的 min 和 max 值分别为 0 和 1。</div> </dd> <dt>{{htmlattrdef("min")}}</dt> - <dd>值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为0。</dd> + <dd>值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为 0。</dd> <dt>{{htmlattrdef("max")}}</dt> - <dd>值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为1。</dd> + <dd>值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为 1。</dd> <dt>{{htmlattrdef("low")}}</dt> - <dd>定义了低值区间的上限值（译者注：如果value介于min和low之间，该元素就会表现出低值的视觉效果，value落在[min,low]、[high,max]等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。如果设置了，它必须比最小值属性大，并且不能超过high值和最大值。未设置或者比最小值还要小时，其值即为最小值。</dd> + <dd>定义了低值区间的上限值（译者注：如果 value 介于 min 和 low 之间，该元素就会表现出低值的视觉效果，value 落在 [min,low]、[high,max] 等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。如果设置了，它必须比最小值属性大，并且不能超过 high 值和最大值。未设置或者比最小值还要小时，其值即为最小值。</dd> <dt>{{htmlattrdef("high")}}</dt> - <dd>定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于low值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。</dd> + <dd>定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于 low 值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。</dd> <dt>{{htmlattrdef("optimum")}}</dt> - <dd>这个属性用来指示最优/最佳取值。它必须在正确的值域内（由最小值属性和最大值属性定义）。当使用了low和high属性时，它指明哪一个取值范围是更好的。例如，假设它介于最小值和low之间，那么lower区间就被认为是更佳的取值范围。</dd> + <dd>这个属性用来指示最优/最佳取值。它必须在正确的值域内（由最小值属性和最大值属性定义）。当使用了 low 和 high 属性时，它指明哪一个取值范围是更好的。例如，假设它介于最小值和 low 之间，那么 lower 区间就被认为是更佳的取值范围。</dd> <dt>{{htmlattrdef("form")}}</dt> - <dd>该属性将本元素与对应的form元素关联。例如，一个计量器可能用来显示某个数值输入框（input元素，number类型）的范围。只有当计量器元素被用作表单关联的元素时，该属性才应当被使用；即便如此，如果它作为表单的后代元素出现，它仍然有可能被省略。</dd> + <dd>该属性将本元素与对应的 form 元素关联。例如，一个计量器可能用来显示某个数值输入框（input 元素，number 类型）的范围。只有当计量器元素被用作表单关联的元素时，该属性才应当被使用；即便如此，如果它作为表单的后代元素出现，它仍然有可能被省略。</dd> </dl> <h2 id="示例">示例</h2> @@ -73,13 +73,13 @@ translation_of: Web/HTML/Element/meter <p>{{EmbedLiveSample("Simple_example", 300, 60)}}</p> -<p>在Google Chrome浏览器上, 计量器结果如下:</p> +<p>在 Google Chrome 浏览器上，计量器结果如下：</p> <p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p> <h3 id="高低值区间示例">高低值区间示例</h3> -<p>注意本例中min属性被省略，这是允许的，默认值为0。</p> +<p>注意本例中 min 属性被省略，这是允许的，默认值为 0。</p> <h4 id="HTML_content_2">HTML content</h4> @@ -91,7 +91,7 @@ translation_of: Web/HTML/Element/meter <p>{{EmbedLiveSample("High_and_Low_range_example", 300, 60)}}</p> -<p>Google Chrome浏览器中，计量器显示效果如下:</p> +<p>Google Chrome 浏览器中，计量器显示效果如下：</p> <p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></p> diff --git a/files/zh-cn/web/html/element/nav/index.html b/files/zh-cn/web/html/element/nav/index.html index b40ac7921a..45d76f6ea5 100644 --- a/files/zh-cn/web/html/element/nav/index.html +++ b/files/zh-cn/web/html/element/nav/index.html @@ -20,7 +20,7 @@ translation_of: Web/HTML/Element/nav <tbody> <tr> <th scope="row"><dfn><a href="/zh-CN/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></dfn></th> - <td><a href="/zh-CN/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流式内容</a>, <a href="/zh-CN/docs/HTML/Content_categories#Sectioning_content" title="HTML/Content categories#Sectioning_content">区块内容</a>, 可视的内容.</td> + <td><a href="/zh-CN/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流式内容</a>, <a href="/zh-CN/docs/HTML/Content_categories#Sectioning_content" title="HTML/Content categories#Sectioning_content">区块内容</a>, 可视的内容。</td> </tr> <tr> <th scope="row"><dfn>允许的内容</dfn></th> @@ -52,9 +52,9 @@ translation_of: Web/HTML/Element/nav <h2 id="使用说明"><em>使用说明</em></h2> <ul> - <li>并不是所有的链接都必须使用<code><nav></code>元素,它只用来将一些热门的链接放入导航栏,例如{{HTMLElement("footer")}}元素就常用来在页面底部包含一个不常用到,没必要加入{{HTMLElement("nav")}}的链接列表.</li> - <li>一个网页也可能含有多个{{HTMLElement("nav")}}元素,例如一个是网站内的导航列表,另一个是本页面内的导航列表.</li> - <li>对于屏幕阅读障碍的人,可以使用这个元素来确定是否忽略初始内容.</li> + <li>并不是所有的链接都必须使用<code><nav></code>元素，它只用来将一些热门的链接放入导航栏，例如{{HTMLElement("footer")}}元素就常用来在页面底部包含一个不常用到，没必要加入{{HTMLElement("nav")}}的链接列表。</li> + <li>一个网页也可能含有多个{{HTMLElement("nav")}}元素，例如一个是网站内的导航列表，另一个是本页面内的导航列表。</li> + <li>对于屏幕阅读障碍的人，可以使用这个元素来确定是否忽略初始内容。</li> </ul> <h2 id="示例">示例</h2> @@ -100,7 +100,7 @@ translation_of: Web/HTML/Element/nav <ul> <li>其他部分相关元素: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> - <li class="last"><a class="deki-ns current" href="/zh-CN/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">HTML5的文档节段和纲要</a>.</li> + <li class="last"><a class="deki-ns current" href="/zh-CN/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">HTML5 的文档节段和纲要</a>.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">ARIA: Navigation role</a></li> </ul> diff --git a/files/zh-cn/web/html/element/noembed/index.html b/files/zh-cn/web/html/element/noembed/index.html index 2d199e4f23..02ac24b96d 100644 --- a/files/zh-cn/web/html/element/noembed/index.html +++ b/files/zh-cn/web/html/element/noembed/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/noembed --- <div>{{HTMLRef}}{{Non-standard_header}}{{deprecated_header}}</div> -<p><span class="seoSummary"><code><strong><noembed></strong></code> 元素是个废除的和不标准的方式，用于向不支持 {{HTMLElement("embed")}} ，或者不支持作者希望的 <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Embedded_content">嵌入式内容</a> 的浏览器提供替代（或者“后备”）内容。这个元素在 HTML 4.01 起废除，以支持</span> {{HTMLElement("object")}}。<span class="seoSummary">后备</span>内容应该插在 {{HTMLElement("object")}} 的开始和结束标签之间。</p> +<p><span class="seoSummary"><code><strong><noembed></strong></code> 元素是个废除的和不标准的方式，用于向不支持 {{HTMLElement("embed")}} ，或者不支持作者希望的 <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Embedded_content">嵌入式内容</a> 的浏览器提供替代（或者 “后备”）内容。这个元素在 HTML 4.01 起废除，以支持</span> {{HTMLElement("object")}}。<span class="seoSummary">后备</span>内容应该插在 {{HTMLElement("object")}} 的开始和结束标签之间。</p> <div class="note"> <p>虽然这个元素仍旧在许多浏览器中有效，它已经废除了，并且不应使用。使用 {{HTMLElement("object")}} 来代替。</p> diff --git a/files/zh-cn/web/html/element/noscript/index.html b/files/zh-cn/web/html/element/noscript/index.html index 295bff18ef..e0a1955dfc 100644 --- a/files/zh-cn/web/html/element/noscript/index.html +++ b/files/zh-cn/web/html/element/noscript/index.html @@ -20,7 +20,7 @@ translation_of: Web/HTML/Element/noscript <td> <p>当脚本被禁用并且它是 {{HTMLElement("head")}}元素的后代时：以下顺序任意，零个或者多个{{HTMLElement("link")}}元素，零个或者多个{{HTMLElement("style")}}元素，零个或者多个{{HTMLElement("meta")}}元素。</p> - <p>当脚本被禁用并且它不是 {{HTMLElement("head")}} 元素的子元素时：任何transparent content 都可以，但是在它的后代中必须没有 <code><noscript></code>元素。</p> + <p>当脚本被禁用并且它不是 {{HTMLElement("head")}} 元素的子元素时：任何 transparent content 都可以，但是在它的后代中必须没有 <code><noscript></code>元素。</p> <p>否则：flow content 或 phrasing content 。</p> </td> @@ -34,11 +34,11 @@ translation_of: Web/HTML/Element/noscript <tr> <th scope="row">允许的父元素</th> <td> - <p>如果没有根元素 <code><noscript></code>，或者在{{HTMLElement("head")}}元素中（仅用于HTML文档）也没有根元素 <code><noscript></code>，允许任何 <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a> 元素。</p> + <p>如果没有根元素 <code><noscript></code>，或者在{{HTMLElement("head")}}元素中（仅用于 HTML 文档）也没有根元素 <code><noscript></code>，允许任何 <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a> 元素。</p> </td> </tr> <tr> - <th scope="row">DOM接口</th> + <th scope="row">DOM 接口</th> <td>{{domxref("HTMLElement")}}</td> </tr> </tbody> diff --git a/files/zh-cn/web/html/element/ol/index.html b/files/zh-cn/web/html/element/ol/index.html index c5791a8322..40c7cd0ffd 100644 --- a/files/zh-cn/web/html/element/ol/index.html +++ b/files/zh-cn/web/html/element/ol/index.html @@ -62,7 +62,7 @@ translation_of: Web/HTML/Element/ol <dd>此布尔值属性指定列表中的条目是否是倒序排列的，即编号是否应从高到低反向标注。</dd> <dt>{{htmlattrdef("start")}}</dt> <dd>一个整数值属性，指定了列表编号的起始值。此属性的值应为阿拉伯数字，尽管列表条目的编号类型 <code>type</code> 属性可能指定为了罗马数字编号等其他类型的编号。比如说，想要让元素的编号从英文字母 "d" 或者罗马数字 "iv" 开始，都应当使用 <code>start="4"</code>。 - <div class="note"><strong>Note</strong>: 这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。</div> + <div class="note"><strong>Note</strong>: 这个属性在 HTML4 中弃用，但是在 HTML5 中被重新引入。</div> </dd> <dt>{{htmlattrdef("type")}}</dt> <dd>设置编号的类型： @@ -76,7 +76,7 @@ translation_of: Web/HTML/Element/ol <p>编号类型适用于整个列表，除非在 <code><ol></code> 元素的 {{HTMLElement("li")}} 元素中使用不同的 {{HTMLAttrxRef("type", "li")}} 属性。</p> - <div class="note"><strong>Note: </strong>这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。除非列表中序号很重要（比如，在法律或者技术文件中条目通常被需要所引用），否则请使用 CSS {{cssxref("list-style-type")}} 属性替代。</div> + <div class="note"><strong>Note: </strong>这个属性在 HTML4 中弃用，但是在 HTML5 中被重新引入。除非列表中序号很重要（比如，在法律或者技术文件中条目通常被需要所引用），否则请使用 CSS {{cssxref("list-style-type")}} 属性替代。</div> </dd> </dl> @@ -97,7 +97,7 @@ translation_of: Web/HTML/Element/ol <p>至于如何确定该选择哪一个列表元素，可以尝试更改列表项的顺序，如果其含义会发生改变，那么就应当使用 {{HTMLElement("ol")}} 元素，否则使用 {{HTMLElement("ul")}} 更合适。</p> <div class="standardNoteBlock"> -<p><strong>译者注：</strong>“更改顺序”时，不应当算上一些固定位于列表最前或最后的项，比如未完成的列表最后的占位项。<br> +<p><strong>译者注：</strong>“更改顺序” 时，不应当算上一些固定位于列表最前或最后的项，比如未完成的列表最后的占位项。<br> 如果只有一个元素，以至于根本不存在什么顺序可言，可能最好先考虑是否应当使用列表元素，以及是否要在列表最后增加一些占位的空项。</p> </div> @@ -221,10 +221,10 @@ translation_of: Web/HTML/Element/ol <ul> <li>其他列表相关的 HTML 元素: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} and the obsolete {{HTMLElement("dir")}};</li> - <li>对 <code><ol></code> 元素常用的 CSS 属性: + <li>对 <code><ol></code> 元素常用的 CSS 属性： <ul> - <li>the {{cssxref("list-style")}} 属性, 有用的选择序数的显示方式,</li> - <li><a href="/en-US/docs/CSS_Counters">CSS计数器</a>, 用于处理复杂的嵌套列表,</li> + <li>the {{cssxref("list-style")}} 属性，有用的选择序数的显示方式，</li> + <li><a href="/en-US/docs/CSS_Counters">CSS 计数器</a>, 用于处理复杂的嵌套列表，</li> <li>{{cssxref("line-height")}} 属性，可以模拟过时的 {{htmlattrxref("compact", "ol")}} 属性；</li> <li>{{cssxref("margin")}} 属性，用来控制列表的缩进。</li> </ul> diff --git a/files/zh-cn/web/html/element/optgroup/index.html b/files/zh-cn/web/html/element/optgroup/index.html index c2fb23f845..47f6341cca 100644 --- a/files/zh-cn/web/html/element/optgroup/index.html +++ b/files/zh-cn/web/html/element/optgroup/index.html @@ -3,7 +3,7 @@ title: <optgroup> slug: Web/HTML/Element/optgroup tags: - HTML - - HTML表单 + - HTML 表单 - 元素 - 参考 - 表单 @@ -11,7 +11,7 @@ translation_of: Web/HTML/Element/optgroup --- <p>{{HTMLRef}}</p> -<p><strong>HTML元素 <code><optgroup></code> </strong>为{{HTMLElement("select")}} 元素中的选项创建分组。</p> +<p><strong>HTML 元素 <code><optgroup></code> </strong>为{{HTMLElement("select")}} 元素中的选项创建分组。</p> <p>{{EmbedInteractiveExample("pages/tabbed/optgroup.html", "tabbed-standard")}}</p> @@ -31,7 +31,7 @@ translation_of: Web/HTML/Element/optgroup </tr> <tr> <th scope="row">允许的父元素</th> - <td>一个 {{HTMLElement("select")}} 元素.</td> + <td>一个 {{HTMLElement("select")}} 元素。</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> diff --git a/files/zh-cn/web/html/element/option/index.html b/files/zh-cn/web/html/element/option/index.html index ebfbd2df02..b9a33d58b8 100644 --- a/files/zh-cn/web/html/element/option/index.html +++ b/files/zh-cn/web/html/element/option/index.html @@ -3,7 +3,7 @@ title: <option> slug: Web/HTML/Element/option tags: - Element - - HTML表单 + - HTML 表单 - 元素 - 参考 - 表单 @@ -12,14 +12,14 @@ translation_of: Web/HTML/Element/option --- <p id="概要">{{HTMLRef}}</p> -<p><strong>HTML元素<em> </em><code><option></code><em> </em></strong> 用于定义在 {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} 或 {{HTMLElement("datalist")}} 元素中包含的项。<code><option></code> 可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。</p> +<p><strong>HTML 元素<em> </em><code><option></code><em> </em></strong> 用于定义在 {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} 或 {{HTMLElement("datalist")}} 元素中包含的项。<code><option></code> 可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。</p> <p>{{EmbedInteractiveExample("pages/tabbed/option.html", "tabbed-standard")}}</p> <ul class="htmlelt"> <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">内容类别</a></dfn> 无</li> <li><dfn>允许的内容</dfn>带有最终转义字符（例如 <code>&eacute;</code>）的文本</li> - <li><dfn>标记省略</dfn> 开始标记是必需的。如果此元素紧接着是另一个 <code><option></code> 元素或{{HTMLElement("optgroup")}}, 或者父元素没有其他内容, 则结束标记是可选的。</li> + <li><dfn>标记省略</dfn> 开始标记是必需的。如果此元素紧接着是另一个 <code><option></code> 元素或{{HTMLElement("optgroup")}}, 或者父元素没有其他内容，则结束标记是可选的。</li> <li><dfn>Implicit ARIA role</dfn>{{ARIARole("option")}}</li> <li><dfn>Permitted ARIA roles</dfn>No <code>role</code> permitted</li> <li><dfn>允许的父元素</dfn> A {{HTMLElement("select")}}, an {{HTMLElement("optgroup")}} or a {{HTMLElement("datalist")}} element.</li> diff --git a/files/zh-cn/web/html/element/output/index.html b/files/zh-cn/web/html/element/output/index.html index 0d06b9d223..2c428e0dd6 100644 --- a/files/zh-cn/web/html/element/output/index.html +++ b/files/zh-cn/web/html/element/output/index.html @@ -28,7 +28,7 @@ translation_of: Web/HTML/Element/output <td>接受任何 <a href="/zh-CN/docs/HTML/Content_categories#Phrasing_content">短语元素</a></td> </tr> <tr> - <th scope="row">允许ARIA角色</th> + <th scope="row">允许 ARIA 角色</th> <td>Any</td> </tr> <tr> @@ -44,11 +44,11 @@ translation_of: Web/HTML/Element/output <dl> <dt>{{htmlattrdef("for")}}</dt> - <dd>其它影响计算结果的标签的ID，可以多个。</dd> + <dd>其它影响计算结果的标签的 ID，可以多个。</dd> <dt>{{htmlattrdef("form")}}</dt> - <dd>与当前标签有关联的form（从属的表单）。该属性的值必须是当前文档内的表单元素的ID。如果未指明该属性，output标签必须是一个form的后代标签。该属性的用处在于可以让output标签脱离form标签，存在于一个网页文档的任意位置。</dd> + <dd>与当前标签有关联的 form（从属的表单）。该属性的值必须是当前文档内的表单元素的 ID。如果未指明该属性，output 标签必须是一个 form 的后代标签。该属性的用处在于可以让 output 标签脱离 form 标签，存在于一个网页文档的任意位置。</dd> <dt>{{htmlattrdef("name")}}</dt> - <dd>name属性。</dd> + <dd>name 属性。</dd> </dl> <h2 id="Example" name="Example">例子</h2> diff --git a/files/zh-cn/web/html/element/p/index.html b/files/zh-cn/web/html/element/p/index.html index 7cddbfea58..1db922a968 100644 --- a/files/zh-cn/web/html/element/p/index.html +++ b/files/zh-cn/web/html/element/p/index.html @@ -18,7 +18,7 @@ translation_of: Web/HTML/Element/p <li><dfn>允许的内容</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li> <li><dfn>标签省略</dfn>起始标签是必需的，结束标签在以下情形中可以省略。<p>元素后紧跟{{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}}或另一个{{HTMLElement("p")}}元素；或者父元素中没有其他内容了，而且父元素不是{{HTMLElement("a")}}元素</li> <li><dfn>允许的父元素</dfn>任何接受<a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>的元素</li> - <li><dfn>DOM接口</dfn> {{domxref("HTMLParagraphElement")}}</li> + <li><dfn>DOM 接口</dfn> {{domxref("HTMLParagraphElement")}}</li> </ul> <h2 id="属性">属性</h2> diff --git a/files/zh-cn/web/html/element/param/index.html b/files/zh-cn/web/html/element/param/index.html index 9010cb378f..399f0a6448 100644 --- a/files/zh-cn/web/html/element/param/index.html +++ b/files/zh-cn/web/html/element/param/index.html @@ -19,7 +19,7 @@ translation_of: Web/HTML/Element/param </tr> <tr> <th scope="row"><dfn>标签省略</dfn></th> - <td>由于它是一个void元素，所以开始标签必须出现，而结束标签必须不出现。</td> + <td>由于它是一个 void 元素，所以开始标签必须出现，而结束标签必须不出现。</td> </tr> <tr> <th scope="row"><dfn>允许的父级元素</dfn></th> @@ -40,15 +40,15 @@ translation_of: Web/HTML/Element/param <dt>{{ htmlattrdef("name") }}</dt> <dd>参数的名字。</dd> <dt>{{ htmlattrdef("type") }} {{ obsolete_inline() }}</dt> - <dd>仅当valuetype设置为“ref”时才使用。根据URI中给定的数据确定MIME类型。</dd> + <dd>仅当 valuetype 设置为 “ref” 时才使用。根据 URI 中给定的数据确定 MIME 类型。</dd> <dt>{{ htmlattrdef("value") }}</dt> <dd>确定参数的值。</dd> <dt>{{ htmlattrdef("valuetype") }} {{ obsolete_inline() }}</dt> <dd>确定参数的类型。可选值如下： <ul> <li>data: 默认值。该值作为字符串变量传递给对象实例。</li> - <li>ref: 该值是存储运行时变量的资源的URI。</li> - <li>object: 同一页面（document）中另一个{{HTMLElement("object")}}的ID。</li> + <li>ref: 该值是存储运行时变量的资源的 URI。</li> + <li>object: 同一页面（document）中另一个{{HTMLElement("object")}}的 ID。</li> </ul> </dd> </dl> diff --git a/files/zh-cn/web/html/element/picture/index.html b/files/zh-cn/web/html/element/picture/index.html index 9d531e7880..feba77aa93 100644 --- a/files/zh-cn/web/html/element/picture/index.html +++ b/files/zh-cn/web/html/element/picture/index.html @@ -12,18 +12,18 @@ translation_of: Web/HTML/Element/picture --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><strong>HTML <code><picture></code> 元素</strong>通过包含零或多个 {{HTMLElement("source")}} 元素和一个 {{HTMLElement("img")}} 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <code><source></code> 元素，如果没有匹配的，就选择 <code><img></code> 元素的 {{htmlattrxref("src", "img")}} 属性中的URL。然后，所选图像呈现在<img>元素占据的空间中。</span></p> +<p><span class="seoSummary"><strong>HTML <code><picture></code> 元素</strong>通过包含零或多个 {{HTMLElement("source")}} 元素和一个 {{HTMLElement("img")}} 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <code><source></code> 元素，如果没有匹配的，就选择 <code><img></code> 元素的 {{htmlattrxref("src", "img")}} 属性中的 URL。然后，所选图像呈现在<img>元素占据的空间中。</span></p> <div>{{EmbedInteractiveExample("pages/tabbed/picture.html", "tabbed-standard")}}</div> <p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> -<p><span class="tlid-translation translation" lang="zh-CN"><span title="">要决定加载哪个URL</span></span>，{{Glossary("user agent")}} 检查每个 <code><source></code> 的 {{htmlattrxref("srcset", "source")}}、{{htmlattrxref("media", "source")}} 和 {{htmlattrxref("type", "source")}} 属性<span class="tlid-translation translation" lang="zh-CN"><span title="">，来选择最匹配页面当前布局、显示设备特征等的兼容图像。</span></span></p> +<p><span class="tlid-translation translation" lang="zh-CN"><span title="">要决定加载哪个 URL</span></span>，{{Glossary("user agent")}} 检查每个 <code><source></code> 的 {{htmlattrxref("srcset", "source")}}、{{htmlattrxref("media", "source")}} 和 {{htmlattrxref("type", "source")}} 属性<span class="tlid-translation translation" lang="zh-CN"><span title="">，来选择最匹配页面当前布局、显示设备特征等的兼容图像。</span></span></p> <p><code><picture></code> 的常见使用场景：</p> <ul> - <li><span class="tlid-translation translation" lang="zh-CN"><span title="">艺术指导(</span></span>Art direction<span class="tlid-translation translation" lang="zh-CN"><span title="">) —— 针对不同 <code>media</code> 条件裁剪或修改图像</span></span></li> + <li><span class="tlid-translation translation" lang="zh-CN"><span title="">艺术指导 (</span></span>Art direction<span class="tlid-translation translation" lang="zh-CN"><span title="">) —— 针对不同 <code>media</code> 条件裁剪或修改图像</span></span></li> <li>遇到所有浏览器都不支持的特定格式时，提供不同的图像格式</li> </ul> @@ -76,7 +76,7 @@ translation_of: Web/HTML/Element/picture <h3 id="media_属性"><code>media</code> 属性</h3> -<p><code>media</code> 属性允许你提供一个用于给用户代理作为选择 {{HTMLElement("source")}} 元素的依据的媒体条件(media condition)（类似于媒体查询）。如果这个媒体条件匹配结果为 <code>false</code>，那么这个 {{HTMLElement("source")}} 元素会被跳过。</p> +<p><code>media</code> 属性允许你提供一个用于给用户代理作为选择 {{HTMLElement("source")}} 元素的依据的媒体条件 (media condition)（类似于媒体查询）。如果这个媒体条件匹配结果为 <code>false</code>，那么这个 {{HTMLElement("source")}} 元素会被跳过。</p> <pre class="brush: html"><picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> diff --git a/files/zh-cn/web/html/element/pre/index.html b/files/zh-cn/web/html/element/pre/index.html index 5d3d8d73e5..e01cba7a2c 100644 --- a/files/zh-cn/web/html/element/pre/index.html +++ b/files/zh-cn/web/html/element/pre/index.html @@ -3,7 +3,7 @@ title: <pre> slug: Web/HTML/Element/pre tags: - HTML - - HTML分组内容 + - HTML 分组内容 - 元素 translation_of: Web/HTML/Element/pre --- @@ -23,7 +23,7 @@ translation_of: Web/HTML/Element/pre <tbody> <tr> <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">内容类别</a></th> - <td>流内容( <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">flow content</a>) , 可触知的内容(palpable content).</td> + <td>流内容 ( <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">flow content</a>) , 可触知的内容 (palpable content).</td> </tr> <tr> <th scope="row">允许的 内容</th> @@ -35,7 +35,7 @@ translation_of: Web/HTML/Element/pre </tr> <tr> <th scope="row">允许的 父元素</th> - <td>任何可以接受流内容( <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">flow content</a>) 的元素</td> + <td>任何可以接受流内容 ( <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">flow content</a>) 的元素</td> </tr> <tr> <th scope="row">允许的 ARIA 角色</th> @@ -54,11 +54,11 @@ translation_of: Web/HTML/Element/pre <dl> <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{obsolete_inline}}</dt> - <dd>定义每行的最大字符数。这是一个非标准的属性，作用与{{htmlattrxref("width", "pre")}}相同。要实现这样的效果，应该使用CSS。</dd> + <dd>定义每行的最大字符数。这是一个非标准的属性，作用与{{htmlattrxref("width", "pre")}}相同。要实现这样的效果，应该使用 CSS。</dd> <dt>{{htmlattrdef("width")}} {{obsolete_inline}}</dt> - <dd>包含每行的最大字符数。虽然在技术上仍被实现，但这个属性没有视觉效果。要实现这样的效果，应该使用CSS。</dd> + <dd>包含每行的最大字符数。虽然在技术上仍被实现，但这个属性没有视觉效果。要实现这样的效果，应该使用 CSS。</dd> <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt> - <dd>提示溢出怎样发生。在现代浏览器中，这个提示会被忽略，且被没有视觉效果。要实现这样的效果，应该使用CSS。</dd> + <dd>提示溢出怎样发生。在现代浏览器中，这个提示会被忽略，且被没有视觉效果。要实现这样的效果，应该使用 CSS。</dd> </dl> <h2 id="示例">示例</h2> diff --git a/files/zh-cn/web/html/element/progress/index.html b/files/zh-cn/web/html/element/progress/index.html index 6d14b6890e..118296399d 100644 --- a/files/zh-cn/web/html/element/progress/index.html +++ b/files/zh-cn/web/html/element/progress/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/progress --- <h2 id="概述">概述</h2> -<p><strong>HTML</strong>中的<strong><code><progress></code></strong>元素用来显示一项任务的完成进度.虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式.</p> +<p><strong>HTML</strong>中的<strong><code><progress></code></strong>元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下，该元素都显示为一个进度条形式。</p> <p>{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}</p> @@ -15,16 +15,16 @@ translation_of: Web/HTML/Element/progress <h2 id="使用上下文">使用上下文</h2> -<pre class="syntaxbox notranslate"><strong>使用策略 </strong>流文本(<a href="/zh-CN/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>), 短文本(<a href="/zh-CN/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>) -<strong><a href="/zh-CN/docs/Web/HTML/Content_categories">Content categories</a> </strong>可标记内容,可触摸内容 +<pre class="syntaxbox notranslate"><strong>使用策略 </strong>流文本 (<a href="/zh-CN/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>), 短文本 (<a href="/zh-CN/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>) +<strong><a href="/zh-CN/docs/Web/HTML/Content_categories">Content categories</a> </strong>可标记内容，可触摸内容 <strong>有效内容 </strong><a href="/zh-CN/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>, 其中在它的后代中不能包含 -<strong>Permitted content</strong> <code><progress></code>元素. +<strong>Permitted content</strong> <code><progress></code>元素。 -<strong>标签省略 </strong>不可以,{{no_tag_omission}} +<strong>标签省略 </strong>不可以，{{no_tag_omission}} <strong>Tag omission</strong> -<strong>有效的父元素</strong> 任何可以包裹短文本(<a href="/zh-CN/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>)的元素. +<strong>有效的父元素</strong> 任何可以包裹短文本 (<a href="/zh-CN/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>) 的元素。 <strong>隐式元素 </strong>{{ARIARole("progressbar")}} <strong>ARIA role</strong> @@ -32,22 +32,22 @@ translation_of: Web/HTML/Element/progress <strong>有效的辅助元素 </strong>无 <strong>ARIA roles</strong> -<strong>DOM接口</strong> {{domxref("HTMLProgressElement")}} +<strong>DOM 接口</strong> {{domxref("HTMLProgressElement")}} </pre> <h2 id="属性">属性</h2> -<p>和其他的HTML元素一样,该元素具有<a href="/zh-cn/HTML/Global_attributes" rel="internal">全局属性</a>.</p> +<p>和其他的 HTML 元素一样，该元素具有<a href="/zh-cn/HTML/Global_attributes" rel="internal">全局属性</a>.</p> <dl> <dt>{{ htmlattrdef("max") }}</dt> - <dd>该属性描述了这个<code>progress</code>元素所表示的任务一共需要完成多少工作.</dd> + <dd>该属性描述了这个<code>progress</code>元素所表示的任务一共需要完成多少工作。</dd> <dt>{{ htmlattrdef("value") }}</dt> - <dd>该属性用来指定该进度条已完成的工作量.如果没有<code>value属性</code>,则该进度条的进度为"不确定",也就是说,进度条不会显示任何进度,你无法估计当前的工作会在何时完成(比如在下载一个未知大小的文件时,下载对话框中的进度条就是这样的).</dd> + <dd>该属性用来指定该进度条已完成的工作量。如果没有<code>value 属性</code>,则该进度条的进度为"不确定",也就是说，进度条不会显示任何进度，你无法估计当前的工作会在何时完成 (比如在下载一个未知大小的文件时，下载对话框中的进度条就是这样的).</dd> </dl> <div class="blockIndicator note"> -<p><strong>Note: </strong>你可以使用{{ cssxref("orient") }}属性来指定该进度条的显示方向是横向(默认)还是纵向.CSS伪类{{ cssxref(":indeterminate") }}可以用来匹配那些不确定的进度条.</p> +<p><strong>Note: </strong>你可以使用{{ cssxref("orient") }}属性来指定该进度条的显示方向是横向 (默认) 还是纵向.CSS 伪类{{ cssxref(":indeterminate") }}可以用来匹配那些不确定的进度条。</p> </div> <dl> @@ -55,7 +55,7 @@ translation_of: Web/HTML/Element/progress <h2 id="DOM_接口">DOM 接口</h2> -<p>该元素实现了<code><a href="/zh-cn/DOM/HTMLProgressElement" title="zh-cn/DOM/HTMLProgressElement">HTMLProgressElement</a></code>接口.</p> +<p>该元素实现了<code><a href="/zh-cn/DOM/HTMLProgressElement" title="zh-cn/DOM/HTMLProgressElement">HTMLProgressElement</a></code>接口。</p> <h2 id="例子">例子</h2> @@ -66,11 +66,11 @@ translation_of: Web/HTML/Element/progress <p>{{ EmbedLiveSample("Examples", 200, 50) }}</p> -<p>在Mac OS X上,显示的进度条如下:</p> +<p>在 Mac OS X 上，显示的进度条如下：</p> <p><img alt="progress-1.png" class="default internal" src="/@api/deki/files/4946/=progress-1.png"></p> -<p>在Windows上,显示的进度条如下:</p> +<p>在 Windows 上，显示的进度条如下：</p> <p><img alt="progress-firefox.JPG" class="default internal" src="/@api/deki/files/6031/=progress-firefox.JPG"></p> diff --git a/files/zh-cn/web/html/element/q/index.html b/files/zh-cn/web/html/element/q/index.html index d3fe0982a3..078a127104 100644 --- a/files/zh-cn/web/html/element/q/index.html +++ b/files/zh-cn/web/html/element/q/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTML/Element/q --- <div>{{HTMLRef}}</div> -<p><em>HTML引用标签</em> (<strong><q></strong>)表示一个封闭的并且是短的行内引用的文本. 这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用 {{HTMLElement("blockquote")}} 替代.</p> +<p><em>HTML 引用标签</em> (<strong><q></strong>) 表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用 {{HTMLElement("blockquote")}} 替代。</p> <table class="properties"> <tbody> @@ -37,7 +37,7 @@ translation_of: Web/HTML/Element/q </tbody> </table> -<p>{{NoteStart}}大多数现代浏览器，会为 <q> 文本添加引号(<q></q>)。旧浏览器可能需要使用 CSS 添加引号。<br> +<p>{{NoteStart}}大多数现代浏览器，会为 <q> 文本添加引号 (<q></q>)。旧浏览器可能需要使用 CSS 添加引号。<br> IE、Edge 与 Firefox、Chrome 引号样式略有不同。{{NoteEnd}}</p> <h2 id="属性">属性</h2> @@ -46,7 +46,7 @@ translation_of: Web/HTML/Element/q <dl> <dt>{{htmlattrdef("cite")}}</dt> - <dd>这个属性的值是URL，意在指出被引用的文本的源文档或者源信息. 这个属性重在解释这个引用的参考或者是上下文.</dd> + <dd>这个属性的值是 URL，意在指出被引用的文本的源文档或者源信息。这个属性重在解释这个引用的参考或者是上下文。</dd> </dl> <h2 id="示例" name="示例">示例</h2> diff --git a/files/zh-cn/web/html/element/rb/index.html b/files/zh-cn/web/html/element/rb/index.html index 7b56ce687f..478d1d574f 100644 --- a/files/zh-cn/web/html/element/rb/index.html +++ b/files/zh-cn/web/html/element/rb/index.html @@ -47,21 +47,21 @@ translation_of: Web/HTML/Element/rb <h2 id="用法注解">用法注解</h2> <ul> - <li>Ruby 注解用于展示东亚文字的发音，例如使用日语罗马音和汉语拼音的文字。 <code><rb></code> 元素用于分隔出ruby基本文本的每个片段。</li> - <li>虽然 <code><rb></code> 不是一个空元素，但是在源码中通常只包括每个元素的开始标签。 因此ruby标记就不那么复杂，也更容易阅读。在渲染版本中，浏览器也可以填充完整的元素。</li> + <li>Ruby 注解用于展示东亚文字的发音，例如使用日语罗马音和汉语拼音的文字。 <code><rb></code> 元素用于分隔出 ruby 基本文本的每个片段。</li> + <li>虽然 <code><rb></code> 不是一个空元素，但是在源码中通常只包括每个元素的开始标签。 因此 ruby 标记就不那么复杂，也更容易阅读。在渲染版本中，浏览器也可以填充完整的元素。</li> <li>你需要为要注释的每个基本段（<code><rb></code>元素）包含一个{{htmlelement("rt")}}元素。</li> </ul> <h2 id="示例">示例</h2> -<p>在此示例中，我们提供了与“hanzi”等效的原始字符的注释：</p> +<p>在此示例中，我们提供了与 “hanzi” 等效的原始字符的注释：</p> <pre class="brush: html"><ruby> <rb>漢</rb>字 <rp>(</rp><rt>han</rt>zi<rp>)</rp> </ruby></pre> -<p>请注意我们如何包含两个<code><rb></code>元素，以分隔ruby基本文本的两个独立部分。 另一方面，注释由两个{{htmlelement("rt")}}元素分隔。</p> +<p>请注意我们如何包含两个<code><rb></code>元素，以分隔 ruby 基本文本的两个独立部分。 另一方面，注释由两个{{htmlelement("rt")}}元素分隔。</p> <p>请注意，我们也可以使用完全单独注释的两个基本文本部分来编写此示例。 在这种情况下，我们不需要包含<code><rb></code>元素：</p> @@ -85,7 +85,7 @@ translation_of: Web/HTML/Element/rb <p>{{EmbedLiveSample("with-ruby", "100%", 60)}}</p> -<p>当在不支持ruby的浏览器中呈现时，上面的HTML可能看起来像这样：</p> +<p>当在不支持 ruby 的浏览器中呈现时，上面的 HTML 可能看起来像这样：</p> <div id="without-ruby"> <div class="hidden"> diff --git a/files/zh-cn/web/html/element/rtc/index.html b/files/zh-cn/web/html/element/rtc/index.html index ded5504965..c756d2a85c 100644 --- a/files/zh-cn/web/html/element/rtc/index.html +++ b/files/zh-cn/web/html/element/rtc/index.html @@ -3,7 +3,7 @@ title: <rtc> slug: Web/HTML/Element/rtc translation_of: Web/HTML/Element/rtc --- -<p><strong>HTML <code><rtc></code> 元素</strong>包含文字的语义注解，它们在 {{HTMLElement("rb")}} 元素中展示。{{HTMLElement("rb")}} 元素可以拥有发音 ({{HTMLElement("rt")}}) 和语义({{HTMLElement("rtc")}}) 注解。</p> +<p><strong>HTML <code><rtc></code> 元素</strong>包含文字的语义注解，它们在 {{HTMLElement("rb")}} 元素中展示。{{HTMLElement("rb")}} 元素可以拥有发音 ({{HTMLElement("rt")}}) 和语义 ({{HTMLElement("rtc")}}) 注解。</p> <table class="properties"> <tbody> @@ -21,7 +21,7 @@ translation_of: Web/HTML/Element/rtc </tr> <tr> <th scope="row">允许的父元素</th> - <td>{{HTMLElement("ruby")}} 元素.</td> + <td>{{HTMLElement("ruby")}} 元素。</td> </tr> <tr> <th scope="row">允许的 ARIA 角色</th> diff --git a/files/zh-cn/web/html/element/ruby/index.html b/files/zh-cn/web/html/element/ruby/index.html index 569be565bf..c2495e1d89 100644 --- a/files/zh-cn/web/html/element/ruby/index.html +++ b/files/zh-cn/web/html/element/ruby/index.html @@ -47,14 +47,14 @@ translation_of: Web/HTML/Element/ruby <h2 id="Examples" name="Examples"><strong>示例</strong></h2> -<h3 id="示例1_字">示例1: 字</h3> +<h3 id="示例1_字">示例 1: 字</h3> <pre class="brush:html"><ruby> 汉 <rp>(</rp><rt>han</rt><rp>)</rp> 字 <rp>(</rp><rt>zi</rt><rp>)</rp> </ruby></pre> -<h3 id="示例2_词">示例2: 词</h3> +<h3 id="示例2_词">示例 2: 词</h3> <pre class="brush:html"><ruby> 明 日 <rp>(</rp><rt>ming ri</rt><rp>)</rp> diff --git a/files/zh-cn/web/html/element/script/index.html b/files/zh-cn/web/html/element/script/index.html index b6f94ed28c..d475094641 100644 --- a/files/zh-cn/web/html/element/script/index.html +++ b/files/zh-cn/web/html/element/script/index.html @@ -4,7 +4,7 @@ slug: Web/HTML/Element/script tags: - <script> - Element - - HTML脚本 + - HTML 脚本 - Web - 元素 - 网络 @@ -28,7 +28,7 @@ translation_of: Web/HTML/Element/script </tr> <tr> <th scope="row">可用父元素</th> - <td>一些元素可以接受元数据内容, 或者是一些元素可以接受短语元素。</td> + <td>一些元素可以接受元数据内容，或者是一些元素可以接受短语元素。</td> </tr> <tr> <th scope="row">隐含的 ARIA 角色</th> @@ -39,7 +39,7 @@ translation_of: Web/HTML/Element/script <td>不允许任何角色</td> </tr> <tr> - <th scope="row">DOM接口</th> + <th scope="row">DOM 接口</th> <td>{{domxref("HTMLScriptElement")}}</td> </tr> </tbody> @@ -56,7 +56,7 @@ translation_of: Web/HTML/Element/script <dd>对于<a href="/zh-CN/docs/Web/JavaScript/Guide/Modules">模块脚本</a>，如果存在 <code>async</code> 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。</dd> <dd>该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析。<code>defer</code> 在这一点上也有类似的作用。</dd> <dd>这是个布尔属性：布尔属性的存在意味着 true 值，布尔属性的缺失意味着 false 值。</dd> - <dd>关于浏览器支持请参见{{anch("浏览器兼容性")}}。另可参见文章<a href="/en-US/docs/Games/Techniques/Async_scripts">asm.js的异步脚本</a>。</dd> + <dd>关于浏览器支持请参见{{anch("浏览器兼容性")}}。另可参见文章<a href="/en-US/docs/Games/Techniques/Async_scripts">asm.js 的异步脚本</a>。</dd> <dt>{{htmlattrdef("crossorigin")}}</dt> <dd>那些没有通过标准<a href="/zh-CN/docs/HTTP_access_control">CORS</a>检查的正常<code>script</code> 元素传递最少的信息到 {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}}。可以使用本属性来使那些将静态资源放在另外一个域名的站点打印错误信息。参考 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes">CORS 设置属性</a>了解<span class="short_text" id="result_box" lang="zh-CN"><span>对有效参数的更具描述性的解释。</span></span></dd> <dt> @@ -77,7 +77,7 @@ translation_of: Web/HTML/Element/script </dt> <dd><span class="short_text" id="result_box" lang="zh-CN"><span>包含用户代理可用于验证已提取资源是否已无意外操作的内联元数据。参见</span></span> <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>。</dd> <dt>{{htmlattrdef("nomodule")}}</dt> - <dd>这个布尔属性被设置来标明这个脚本在支持 <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES2015 modules</a> 的浏览器中不执行。 — 实际上，这可用于在不支持模块化JavaScript的旧浏览器中提供回退脚本。</dd> + <dd>这个布尔属性被设置来标明这个脚本在支持 <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES2015 modules</a> 的浏览器中不执行。 — 实际上，这可用于在不支持模块化 JavaScript 的旧浏览器中提供回退脚本。</dd> <dt>{{htmlattrdef("nonce")}}</dt> <dd>A cryptographic nonce (number used once) to whitelist inline scripts in a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">script-src Content-Security-Policy</a>. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.</dd> <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> @@ -96,30 +96,30 @@ translation_of: Web/HTML/Element/script <p><strong>Note</strong>: An empty string value (<code>""</code>) is both the default value, and a fallback value if <code>referrerpolicy</code> is not supported. If <code>referrerpolicy</code> is not explicitly specified on the <code><script></code> element, it will adopt a higher-level referrer policy, i.e. one set on the whole document or domain. If a higher-level policy is not available, the empty string is treated as being equivalent to <code>no-referrer-when-downgrade</code>.</p> </dd> <dt>{{htmlattrdef("src")}}</dt> - <dd>这个属性定义引用外部脚本的URI，这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的script元素标签内不应该再有嵌入的脚本。</dd> + <dd>这个属性定义引用外部脚本的 URI，这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的 script 元素标签内不应该再有嵌入的脚本。</dd> <dt>{{htmlattrdef("type")}}</dt> - <dd>该属性定义script元素包含或<code>src</code>引用的脚本语言。属性的值为<abbr title="多用途互联网邮件扩展类型">MIME</abbr>类型; 支持的<abbr title="多用途互联网邮件扩展类型">MIME</abbr>类型包括<code>text/javascript</code>, <code>text/ecmascript</code>, <code>application/javascript</code>, 和<code>application/ecmascript</code>。如果没有定义这个属性，脚本会被视作JavaScript。</dd> - <dd>如果<abbr title="多用途互联网邮件扩展类型">MIME</abbr>类型不是JavaScript类型（上述支持的类型），则该元素所包含的内容会被当作数据块而不会被浏览器执行。</dd> - <dd>如果type属性为<code>module</code>，代码会被当作JavaScript模块 {{experimental_inline}}。请参见<a class="external external-icon" href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a></dd> - <dd>在Firefox中可以通过定义<span style="font-family: consolas,monaco,andale mono,monospace;">type=application/javascript;version=1.8来</span>使用如let声明这类的JS高版本中的先进特性。 但请注意这是个非标准功能，其他浏览器，特别是基于Chrome的浏览器可能会不支持。</dd> + <dd>该属性定义 script 元素包含或<code>src</code>引用的脚本语言。属性的值为<abbr title="多用途互联网邮件扩展类型">MIME</abbr>类型; 支持的<abbr title="多用途互联网邮件扩展类型">MIME</abbr>类型包括<code>text/javascript</code>, <code>text/ecmascript</code>, <code>application/javascript</code>, 和<code>application/ecmascript</code>。如果没有定义这个属性，脚本会被视作 JavaScript。</dd> + <dd>如果<abbr title="多用途互联网邮件扩展类型">MIME</abbr>类型不是 JavaScript 类型（上述支持的类型），则该元素所包含的内容会被当作数据块而不会被浏览器执行。</dd> + <dd>如果 type 属性为<code>module</code>，代码会被当作 JavaScript 模块 {{experimental_inline}}。请参见<a class="external external-icon" href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a></dd> + <dd>在 Firefox 中可以通过定义<span style="font-family: consolas,monaco,andale mono,monospace;">type=application/javascript;version=1.8 来</span>使用如 let 声明这类的 JS 高版本中的先进特性。 但请注意这是个非标准功能，其他浏览器，特别是基于 Chrome 的浏览器可能会不支持。</dd> <dd>关于如何引入特殊编程语言，请参见<a href="/en-US/Add-ons/Code_snippets/Rosetta">这篇文章</a>。</dd> <dt>{{htmlattrdef("text")}}</dt> - <dd>和 textContent 属性类似，本属性用于设置元素的文本内容。但和 textContent 不一样的是，本属性<span class="short_text" id="result_box" lang="zh-CN"><span>在节点插入到DOM之后，此属性被解析为可执行代码。</span> </span></dd> + <dd>和 textContent 属性类似，本属性用于设置元素的文本内容。但和 textContent 不一样的是，本属性<span class="short_text" id="result_box" lang="zh-CN"><span>在节点插入到 DOM 之后，此属性被解析为可执行代码。</span> </span></dd> <dt></dt> <dt> <h3 id="Deprecated_attributes">Deprecated attributes</h3> </dt> <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt> - <dd>如果存在，值必须和“<code>utf-8</code>”不区分大小写的匹配。当然声明 <code>charset</code> 是没有必要的，因为页面文档必须使用UTF-8，而 <code>script</code> 元素会从页面文档中继承这个属性。</dd> + <dd>如果存在，值必须和 “<code>utf-8</code>” 不区分大小写的匹配。当然声明 <code>charset</code> 是没有必要的，因为页面文档必须使用 UTF-8，而 <code>script</code> 元素会从页面文档中继承这个属性。</dd> <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt> - <dd>和type属性类似，这个属性定义脚本使用的语言。 但是与type不同的是，这个属性的可能值从未被标准化过。请用<code>type</code>属性代替这个属性。</dd> + <dd>和 type 属性类似，这个属性定义脚本使用的语言。 但是与 type 不同的是，这个属性的可能值从未被标准化过。请用<code>type</code>属性代替这个属性。</dd> </dl> <h2 id="示例">示例</h2> <h3 id="基本用法">基本用法</h3> -<p>下面这些示例说明了如何在HTML4和HTML5中通过使用<code><script></code>元素来导入脚本。</p> +<p>下面这些示例说明了如何在 HTML4 和 HTML5 中通过使用<code><script></code>元素来导入脚本。</p> <pre class="brush: html notranslate"><!-- HTML4 and (x)HTML --> <script type="text/javascript" src="javascript.js"> diff --git a/files/zh-cn/web/html/element/section/index.html b/files/zh-cn/web/html/element/section/index.html index 9a256ca1e7..0d9138ceaa 100644 --- a/files/zh-cn/web/html/element/section/index.html +++ b/files/zh-cn/web/html/element/section/index.html @@ -9,7 +9,7 @@ translation_of: Web/HTML/Element/section --- <div>{{HTMLRef}}</div> -<p><strong>HTML <section>元素</strong>表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。</p> +<p><strong>HTML <section>元素</strong>表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。</p> <div>{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}</div> @@ -62,7 +62,7 @@ translation_of: Web/HTML/Element/section <li>不要把 {{HTMLElement("section")}} 元素作为一个普通的容器来使用，这是本应该是{{HTMLElement("div")}}的用法（特别是当片段（the sectioning ）仅仅是为了美化样式的时候）。 一般来说，一个 {{HTMLElement("section")}} 应该出现在文档大纲中。</li> </ul> -<h2 id="范例1：">范例1：</h2> +<h2 id="范例1：">范例 1：</h2> <h3 id="之前">之前</h3> @@ -79,7 +79,7 @@ translation_of: Web/HTML/Element/section </section></code> </pre> -<h2 id="范例2：">范例2：</h2> +<h2 id="范例2：">范例 2：</h2> <h3 id="之前_2">之前</h3> diff --git a/files/zh-cn/web/html/element/select/index.html b/files/zh-cn/web/html/element/select/index.html index 57f094a833..51174de770 100644 --- a/files/zh-cn/web/html/element/select/index.html +++ b/files/zh-cn/web/html/element/select/index.html @@ -5,7 +5,7 @@ tags: - Element - Forms - HTML - - HTML表单 + - HTML 表单 - 参考 - 表单 translation_of: Web/HTML/Element/select @@ -36,7 +36,7 @@ translation_of: Web/HTML/Element/select <dt>{{htmlattrdef("autofocus")}}</dt> <dd>这个布尔值属性能够让一个对象在页面加载的时候获得焦点。一个文档中只有一个对象可以有这个属性。</dd> <dt>{{htmlattrdef("disabled")}}</dt> - <dd>这个布尔值的属性表示用户不能与该表单控件交互。如果没有声明这个属性，则从它的父元素继承，例如 <code>fieldset</code>；如果没有父元素设置了 <code>disabled</code> 属性, 那么默认该表单对象可用。</dd> + <dd>这个布尔值的属性表示用户不能与该表单控件交互。如果没有声明这个属性，则从它的父元素继承，例如 <code>fieldset</code>；如果没有父元素设置了 <code>disabled</code> 属性，那么默认该表单对象可用。</dd> <dt>{{htmlattrdef("form")}}</dt> <dd> <code><select></code> 所关联的{{HTMLElement("form")}} (它的"表单拥有者")。其值必须是在同一文档中的 <code><form></code> 元素的{{htmlattrxref("id")}}（如果没有设置这个属性， <code><select></code> 元素则与其任何存在的祖先 <code><form></code> 元素关联）。</dd> <dd>这个属性让你将 <code><select></code> 元素与文档中任意位置的 <code><form></code> 元素相关联，而不仅仅是包含 <code><select></code> 元素的 <code><form></code> 元素。这个属性还可以覆盖元素的祖先 <code><form></code> 元素。</dd> @@ -50,7 +50,7 @@ translation_of: Web/HTML/Element/select <dd>如果控件显示为滚动列表框（如声明了 <code>multiple</code>），则此属性表示为控件中同时可见的行数。浏览器不需要将选择元素呈现为滚动列表框。默认值为 0。</dd> </dl> -<div class="note"><strong>提示:</strong> 根据 HTML5 规范， 默认值应该为 1； 但是，在实践中，这样会影响到一些网站，同时其它浏览器也没有那么处理，所以 Mozilla 在 Firefox 中选择继续使用默认值 0。</div> +<div class="note"><strong>提示：</strong> 根据 HTML5 规范， 默认值应该为 1； 但是，在实践中，这样会影响到一些网站，同时其它浏览器也没有那么处理，所以 Mozilla 在 Firefox 中选择继续使用默认值 0。</div> <dl> </dl> diff --git a/files/zh-cn/web/html/element/slot/index.html b/files/zh-cn/web/html/element/slot/index.html index 2958c76bd5..66c16f1dbc 100644 --- a/files/zh-cn/web/html/element/slot/index.html +++ b/files/zh-cn/web/html/element/slot/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTML/Element/slot <p><strong>译者注：</strong> 本翻译的一些术语参考了<a href="https://cn.vuejs.org/v2/guide/components-slots.html">Vuejs-中文</a>页面。</p> </div> -<p><span class="seoSummary"><strong>HTML <code> <slot> </code> 元素 ，</strong>作为 <a href="/en-US/docs/Web/Web_Components">Web Components</a> 技术套件的一部分，是</span>Web组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充，这样您就可以创建单独的DOM树，并将它与其它的组件组合在一起。</p> +<p><span class="seoSummary"><strong>HTML <code> <slot> </code> 元素 ，</strong>作为 <a href="/en-US/docs/Web/Web_Components">Web Components</a> 技术套件的一部分，是</span>Web 组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充，这样您就可以创建单独的 DOM 树，并将它与其它的组件组合在一起。</p> <table class="properties"> <tbody> @@ -90,7 +90,7 @@ translation_of: Web/HTML/Element/slot </template></pre> <div class="note"> -<p><strong>Note</strong>: 您可以在 <a class="external external-icon" href="https://github.com/mdn/web-components-examples/tree/master/element-details" rel="noopener">element-details</a> (see it <a class="external external-icon" href="https://mdn.github.io/web-components-examples/element-details/" rel="noopener">running live</a>)找到这个示例的完整演示版。另外，您也可以在<a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a>这里找到具体的解释。</p> +<p><strong>Note</strong>: 您可以在 <a class="external external-icon" href="https://github.com/mdn/web-components-examples/tree/master/element-details" rel="noopener">element-details</a> (see it <a class="external external-icon" href="https://mdn.github.io/web-components-examples/element-details/" rel="noopener">running live</a>) 找到这个示例的完整演示版。另外，您也可以在<a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a>这里找到具体的解释。</p> </div> <h2 id="规范">规范</h2> diff --git a/files/zh-cn/web/html/element/small/index.html b/files/zh-cn/web/html/element/small/index.html index 5c661cf515..33977ad1c6 100644 --- a/files/zh-cn/web/html/element/small/index.html +++ b/files/zh-cn/web/html/element/small/index.html @@ -8,7 +8,7 @@ translation_of: Web/HTML/Element/small --- <div>{{HTMLRef}}</div> -<p>HTML 中的<small>元素將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在HTML5中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。</p> +<p>HTML 中的<small>元素將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在 HTML5 中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。</p> <div>{{EmbedInteractiveExample("pages/tabbed/small.html", "tabbed-shorter")}}</div> @@ -57,7 +57,7 @@ translation_of: Web/HTML/Element/small <h2 id="Example_1" name="Example_1">例子</h2> -<h3 id="例子1">例子1</h3> +<h3 id="例子1">例子 1</h3> <pre class="brush: html"><p>This is the first sentence. <small>This whole sentence is in small letters.</small></p> </pre> @@ -66,7 +66,7 @@ translation_of: Web/HTML/Element/small <p>This is the first sentence. <small>This whole sentence is in small letters.</small></p> -<h3 id="Example_2" name="Example_2">例子2 (CSS 替代)</h3> +<h3 id="Example_2" name="Example_2">例子 2 (CSS 替代)</h3> <pre class="brush: html"><p>This is the first sentence. <span style="font-size:0.8em">This whole sentence is in small letters.</span></p> </pre> @@ -101,7 +101,7 @@ translation_of: Web/HTML/Element/small <h2 id="Notes" name="Notes">注意事项</h2> -<p>尽管<span style="font-family: Courier New;"> <small></span> 元素，<span style="font-family: Courier New;"><b> 元素</span>和 <span style="font-family: Courier New;"><i></span> 元素被认为违反了结构和样式分离的原则, 但是在HTML5中是允许使用这三个元素的. 读者应该自行判断使用 <small> 还是CSS。</p> +<p>尽管<span style="font-family: Courier New;"> <small></span> 元素，<span style="font-family: Courier New;"><b> 元素</span>和 <span style="font-family: Courier New;"><i></span> 元素被认为违反了结构和样式分离的原则，但是在 HTML5 中是允许使用这三个元素的。读者应该自行判断使用 <small> 还是 CSS。</p> <h2 id="浏览器兼容性">浏览器兼容性</h2> diff --git a/files/zh-cn/web/html/element/span/index.html b/files/zh-cn/web/html/element/span/index.html index 4470ad4e80..b936a5e041 100644 --- a/files/zh-cn/web/html/element/span/index.html +++ b/files/zh-cn/web/html/element/span/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML/Element/span --- <div>{{HTMLRef}}</div> -<p><strong>HTML <code><span></code> </strong>元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者Id属性），或者这些元素有着共同的属性，比如<strong>lang</strong>。应该在没有其他合适的语义元素时才使用它。<code><span></code> 与 {{HTMLElement("div")}} 元素很相似，但 {{HTMLElement("div")}} 是一个 <a href="/en-US/docs/HTML/Block-level_elements">块元素</a> 而 <code><span></code> 则是 <a href="/en-US/docs/HTML/Inline_elements"> 行内元素 </a>.</p> +<p><strong>HTML <code><span></code> </strong>元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如<strong>lang</strong>。应该在没有其他合适的语义元素时才使用它。<code><span></code> 与 {{HTMLElement("div")}} 元素很相似，但 {{HTMLElement("div")}} 是一个 <a href="/en-US/docs/HTML/Block-level_elements">块元素</a> 而 <code><span></code> 则是 <a href="/en-US/docs/HTML/Inline_elements"> 行内元素 </a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-shorter")}}</div> diff --git a/files/zh-cn/web/html/element/strong/index.html b/files/zh-cn/web/html/element/strong/index.html index 8a84c5c675..df546b1db4 100644 --- a/files/zh-cn/web/html/element/strong/index.html +++ b/files/zh-cn/web/html/element/strong/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTML/Element/strong --- <h2 id="总结">总结</h2> -<p>Strong 元素 (<code><strong></code>)表示文本十分重要，一般用粗体显示。</p> +<p>Strong 元素 (<code><strong></code>) 表示文本十分重要，一般用粗体显示。</p> <h2 id="使用环境">使用环境</h2> @@ -18,7 +18,7 @@ translation_of: Web/HTML/Element/strong <tbody> <tr> <td>内容分类</td> - <td>流内容, 语法内容</td> + <td>流内容，语法内容</td> </tr> <tr> <td>允许的内容</td> @@ -30,7 +30,7 @@ translation_of: Web/HTML/Element/strong </tr> <tr> <td>允许的父级元素</td> - <td>任何接受<a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Phrasing_content">phrasing content</a>的元素, 或者接受 <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Flow_content">flow content</a>的元素</td> + <td>任何接受<a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Phrasing_content">phrasing content</a>的元素，或者接受 <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Flow_content">flow content</a>的元素</td> </tr> <tr> <td>规范文档</td> @@ -48,7 +48,7 @@ translation_of: Web/HTML/Element/strong <p><code>实现了<a href="/en-US/docs/DOM/element" title="DOM/element">HTMLElement</a></code> 接口。</p> <div class="note"> -<p>实现注意事项<strong>: </strong>一直到Gecko 1.9.2 (含), Firefox 对这个元素实现了 <a href="/en-US/docs/DOM/span" title="DOM/span"><code>HTMLSpanElement</code></a> 接口</p> +<p>实现注意事项<strong>: </strong>一直到 Gecko 1.9.2 (含), Firefox 对这个元素实现了 <a href="/en-US/docs/DOM/span" title="DOM/span"><code>HTMLSpanElement</code></a> 接口</p> </div> <h2 id="举例">举例</h2> @@ -62,15 +62,15 @@ translation_of: Web/HTML/Element/strong <h3 id="Bold_vs._Strong">Bold vs. Strong</h3> -<p>新的开发者经常感到疑惑，为什么在一个渲染的网站上会有这么多方式来表达同样的东西。Bold和Strong可能就是这其中的一种。为什么使用<strong></strong>而不是<b></b>? 使用strong的话你不得不打更多的字母，却产生出和b同样的效果，对吧？</p> +<p>新的开发者经常感到疑惑，为什么在一个渲染的网站上会有这么多方式来表达同样的东西。Bold 和 Strong 可能就是这其中的一种。为什么使用<strong></strong>而不是<b></b>? 使用 strong 的话你不得不打更多的字母，却产生出和 b 同样的效果，对吧？</p> -<p>也许并不是； strong是一个逻辑状态，而bold是一个物理状态。逻辑状态分离内容和表现形式，使用逻辑状态允许你用各种不同的方式来表达。比如你想把文字渲染成红色，使用其它大小的字体、带有下划线或其他样式，而不是加粗的样式。必须要理解使用strong呈现出的表现形式不同于单纯的加粗。 因为bold是一个物理状态，他没有区分表现形式和内容。如果让bold做了加粗文本外的其它任何事情，都将会令人困惑而且也不符合逻辑。</p> +<p>也许并不是； strong 是一个逻辑状态，而 bold 是一个物理状态。逻辑状态分离内容和表现形式，使用逻辑状态允许你用各种不同的方式来表达。比如你想把文字渲染成红色，使用其它大小的字体、带有下划线或其他样式，而不是加粗的样式。必须要理解使用 strong 呈现出的表现形式不同于单纯的加粗。 因为 bold 是一个物理状态，他没有区分表现形式和内容。如果让 bold 做了加粗文本外的其它任何事情，都将会令人困惑而且也不符合逻辑。</p> <p>同样应该注意<b></b> 还有其他用途，比如想单纯地吸引注意而不增加其重要性。</p> <h3 id="Emphasis_vs._Strong">Emphasis vs. Strong</h3> -<p>在 HTML4 时， Strong 简单地表示一个更强的强调(emphasis)，而在HTML5中，这个元素被描述为表征“内容强烈的重要性(strong importance for its contents) ”。这是一个重要的区别。Em标签(Emphasis)用于改变一个句子的意思(比如"我<em><em>喜欢</em></em>胡萝卜" 和"我喜欢<em><em>胡萝卜</em></em>"，分别强调喜欢和胡萝卜), Strong用来对一个句子的部分增加重要性(比如 "<strong>警告!</strong> 这<strong>非常危险</strong>。") Strong和Emphasis都可以分别通过嵌套来增加相对重要性或强调重点。</p> +<p>在 HTML4 时， Strong 简单地表示一个更强的强调 (emphasis)，而在 HTML5 中，这个元素被描述为表征 “内容强烈的重要性 (strong importance for its contents) ”。这是一个重要的区别。Em 标签 (Emphasis) 用于改变一个句子的意思 (比如"我<em><em>喜欢</em></em>胡萝卜" 和"我喜欢<em><em>胡萝卜</em></em>"，分别强调喜欢和胡萝卜), Strong 用来对一个句子的部分增加重要性 (比如 "<strong>警告！</strong> 这<strong>非常危险</strong>。") Strong 和 Emphasis 都可以分别通过嵌套来增加相对重要性或强调重点。</p> <h2 id="同样参见">同样参见</h2> diff --git a/files/zh-cn/web/html/element/style/index.html b/files/zh-cn/web/html/element/style/index.html index dfc2f7c41a..621d75483b 100644 --- a/files/zh-cn/web/html/element/style/index.html +++ b/files/zh-cn/web/html/element/style/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTML/Element/style <h2 id="概要">概要</h2> -<p><strong>HTML的<style>元素</strong>包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是<a href="/en-US/docs/Web/CSS">CSS</a>的格式。</p> +<p><strong>HTML 的<style>元素</strong>包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是<a href="/en-US/docs/Web/CSS">CSS</a>的格式。</p> <p>{{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}}</p> @@ -20,7 +20,7 @@ translation_of: Web/HTML/Element/style <li><dfn>标签忽略</dfn> {{no_tag_omission}}</li> <li><dfn>允许的父元素</dfn> 任意接受<a href="/zh-CN/docs/Web/HTML/Content_categories#Metadata_content">元数据内容</a>的元素</li> <li><dfn>Permitted ARIA roles</dfn>None</li> - <li><dfn>DOM接口</dfn> {{domxref("HTMLStyleElement")}}</li> + <li><dfn>DOM 接口</dfn> {{domxref("HTMLStyleElement")}}</li> </ul> <h2 id="属性">属性</h2> @@ -29,9 +29,9 @@ translation_of: Web/HTML/Element/style <dl> <dt>{{htmlattrdef("type")}}</dt> - <dd>该属性以MIME类型（不应该指定字符集）定义样式语言。如果该属性未指定，则默认为 <code>text/css</code>。</dd> + <dd>该属性以 MIME 类型（不应该指定字符集）定义样式语言。如果该属性未指定，则默认为 <code>text/css</code>。</dd> <dt>{{htmlattrdef("media")}}</dt> - <dd>该属性规定该样式适用于哪个媒体。属性的取值<a href="/zh-CN/docs/Web/Guide/CSS/Media_queries">CSS媒体查询</a>，默认值为 <code>all</code>。</dd> + <dd>该属性规定该样式适用于哪个媒体。属性的取值<a href="/zh-CN/docs/Web/Guide/CSS/Media_queries">CSS 媒体查询</a>，默认值为 <code>all</code>。</dd> <dt> <p>{{htmlattrdef("nonce")}}</p> </dt> @@ -104,9 +104,9 @@ translation_of: Web/HTML/Element/style <div>{{EmbedLiveSample('Multiple_style_elements', '100%', '60')}}</div> <div> -<h3 id="包含媒体media选择">包含媒体(media)选择</h3> +<h3 id="包含媒体media选择">包含媒体 (media) 选择</h3> -<p>这个例子根据前一个例子构建，在第二个<style>中，视图宽度小于500px 时生效</p> +<p>这个例子根据前一个例子构建，在第二个<style>中，视图宽度小于 500px 时生效</p> <pre><!doctype html> <html> diff --git a/files/zh-cn/web/html/element/summary/index.html b/files/zh-cn/web/html/element/summary/index.html index c959270b5d..9a88c9b57b 100644 --- a/files/zh-cn/web/html/element/summary/index.html +++ b/files/zh-cn/web/html/element/summary/index.html @@ -16,7 +16,7 @@ translation_of: Web/HTML/Element/summary <p><strong>HTML <code><summary> </code>元素 </strong>用作 一个{{HTMLElement("details")}}元素的一个内容的摘要，标题或图例。</p> -<div class="note"><strong>提示:</strong> 如果 <code><summary></code> 元素在浏览器内不能被正确解析和渲染,，则会展示<details>标签内的其他内容。</div> +<div class="note"><strong>提示：</strong> 如果 <code><summary></code> 元素在浏览器内不能被正确解析和渲染，，则会展示<details>标签内的其他内容。</div> <table class="properties"> <tbody> @@ -41,7 +41,7 @@ translation_of: Web/HTML/Element/summary <h2 id="DOM_接口">DOM 接口</h2> -<p>本元素支持 {{domxref("HTMLElement")}} 接口.</p> +<p>本元素支持 {{domxref("HTMLElement")}} 接口。</p> <h2 id="示例">示例</h2> @@ -49,7 +49,7 @@ translation_of: Web/HTML/Element/summary <p style="color: red;">In summation, get details from the link on the next line</p> </details> -<p>请参考 {{ HTMLElement("details") }} 页面内有关 <summary>元素的示例.</p> +<p>请参考 {{ HTMLElement("details") }} 页面内有关 <summary>元素的示例。</p> <h2 id="Specifications" name="Specifications">规范</h2> diff --git a/files/zh-cn/web/html/element/table/index.html b/files/zh-cn/web/html/element/table/index.html index ac7c7d5d12..3832720f5f 100644 --- a/files/zh-cn/web/html/element/table/index.html +++ b/files/zh-cn/web/html/element/table/index.html @@ -35,7 +35,7 @@ translation_of: Web/HTML/Element/table <li>一个可选的 {{HTMLElement("caption")}} 元素</li> <li>零个或多个的 {{HTMLElement("colgroup")}} 元素</li> <li>一个可选的 {{HTMLElement("thead")}} 元素</li> - <li>下列任意一个: + <li>下列任意一个： <ul> <li>零个或多个 {{HTMLElement("tbody")}}</li> <li>零个或多个 {{HTMLElement("tr")}}</li> @@ -56,7 +56,7 @@ translation_of: Web/HTML/Element/table <td>任何支持<a href="/en-US/docs/HTML/Content_categories#Flow_content">流内容</a>的元素</td> </tr> <tr> - <th scope="row">允许的ARIA 角色</th> + <th scope="row">允许的 ARIA 角色</th> <td>Any</td> </tr> <tr> @@ -68,18 +68,18 @@ translation_of: Web/HTML/Element/table <h2 id="属性"> 属性</h2> -<p><span style="line-height: 21px;">表格标签支持</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a><span style="line-height: 21px;">。下面列出的属性现在已经弃用（请使用CSS代替）。</span></p> +<p><span style="line-height: 21px;">表格标签支持</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a><span style="line-height: 21px;">。下面列出的属性现在已经弃用（请使用 CSS 代替）。</span></p> <dl> <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt> - <dd> 这个枚举属性指定了包含在文档中的表格必须如何对齐。有如下值: + <dd> 这个枚举属性指定了包含在文档中的表格必须如何对齐。有如下值： <ul> <li><span>left</span>，表格将在文档左侧显示；</li> <li><span>center，</span> 表格将在文档中央显示；</li> <li><span>right</span>， 表格将在文档右侧显示；</li> </ul> - <div class="note"><strong>小贴士: </strong> + <div class="note"><strong>小贴士：</strong> <ul> <li><strong>不要使用这个属性</strong>，它已经不赞成被使用。 {{HTMLElement("table")}} 元素应该使用<a href="/en-US/docs/CSS" title="CSS">CSS</a> 制定样式。设置 {{cssxref("margin-left")}} 、{{cssxref("margin-right")}} 为 <code>auto</code> ( 或者 {{cssxref("margin")}} <code>设置为 0 auto</code>) 来实现类似于 align 属性的效果。</li> @@ -91,7 +91,7 @@ translation_of: Web/HTML/Element/table <dl> <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> - <dd>这个属性定义了表格的背景颜色。 它是一个6位的十六进制编码，定义于 <a class="external" href="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>，需要加上'#'作为前缀。 当然也可以使用下面已经被预先定义的字符串，来表示常用的16种颜色： + <dd>这个属性定义了表格的背景颜色。 它是一个 6 位的十六进制编码，定义于 <a class="external" href="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>，需要加上'#'作为前缀。 当然也可以使用下面已经被预先定义的字符串，来表示常用的 16 种颜色： <table> <tbody> <tr> @@ -145,14 +145,14 @@ translation_of: Web/HTML/Element/table </tbody> </table> - <div class="note"><strong>小贴士: </strong>不要使用这个属性, 该属性已废弃，{{HTMLElement("table")}} 元素应当使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定制样式。 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 中的 {{cssxref("background-color")}} 属性能够和bgcolor属性达到一样的效果。</div> + <div class="note"><strong>小贴士：</strong>不要使用这个属性，该属性已废弃，{{HTMLElement("table")}} 元素应当使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定制样式。 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 中的 {{cssxref("background-color")}} 属性能够和 bgcolor 属性达到一样的效果。</div> </dd> </dl> <dl> <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt> - <dd>这个整型元素使用像素，定义了表格边框的大小。 如果设置为0，这意味着{{htmlattrxref("frame", "table")}} 属性被设置为空。如果设置为1，表示表格具有1px大小的边框。 - <div class="note"><strong>小贴士: </strong>不要使用这个属性, 该属性已废弃，{{HTMLElement("table")}} 元素应当使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定制样式。 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 属性 {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} 和 {{cssxref("border-style")}} 可实现相同效果。</div> + <dd>这个整型元素使用像素，定义了表格边框的大小。 如果设置为 0，这意味着{{htmlattrxref("frame", "table")}} 属性被设置为空。如果设置为 1，表示表格具有 1px 大小的边框。 + <div class="note"><strong>小贴士：</strong>不要使用这个属性，该属性已废弃，{{HTMLElement("table")}} 元素应当使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定制样式。 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 属性 {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} 和 {{cssxref("border-style")}} 可实现相同效果。</div> </dd> </dl> @@ -233,8 +233,8 @@ translation_of: Web/HTML/Element/table </div> </dd> <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt> - <dd>该属性定义了一个替代文本，当表格无法在用户代理中显示的时候用来描述表格。通常，它被用来为残障人士提供可用性，比如，盲人使用盲文屏幕（Braille screen） 浏览网页，从中获取信息。如果要想对于非视力受限的人来说也可以提供作用，考虑使用 {{HTMLElement("caption")}} 代替。summary 属性不是强制性的，当一个 {{HTMLElement("caption")}} 发挥它应有的作用时，可以省略summary 属性。 - <div class="note"><strong>小贴士: </strong> <strong>不要使用这个属性，因为它已经被废弃。</strong> 作为替代，选择其中一种方法为表格添加描述： + <dd>该属性定义了一个替代文本，当表格无法在用户代理中显示的时候用来描述表格。通常，它被用来为残障人士提供可用性，比如，盲人使用盲文屏幕（Braille screen）浏览网页，从中获取信息。如果要想对于非视力受限的人来说也可以提供作用，考虑使用 {{HTMLElement("caption")}} 代替。summary 属性不是强制性的，当一个 {{HTMLElement("caption")}} 发挥它应有的作用时，可以省略 summary 属性。 + <div class="note"><strong>小贴士：</strong> <strong>不要使用这个属性，因为它已经被废弃。</strong> 作为替代，选择其中一种方法为表格添加描述： <ul> <li>Use prose around the table (this method is less semantic).</li> <li>在表格的 {{HTMLElement("caption")}} 元素中添加描述。</li> @@ -247,7 +247,7 @@ translation_of: Web/HTML/Element/table </dd> <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt> <dd>该属性定义了表格的宽度。宽度可能是一个像素或者是一个百分比值，宽度的百分比值将被定义为表格容器的宽度。 - <div class="note"><strong>小贴士: </strong> <strong>不要使用这个属性，因为它已经被废弃。</strong>规则应该使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定义和设计样式。使用 {{cssxref("width")}} 属性代替。</div> + <div class="note"><strong>小贴士：</strong> <strong>不要使用这个属性，因为它已经被废弃。</strong>规则应该使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定义和设计样式。使用 {{cssxref("width")}} 属性代替。</div> </dd> </dl> @@ -475,7 +475,7 @@ border: 1px solid black; <h2 id="相关">相关</h2> <ul> - <li>其它表格相关的HTML元素: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>其它表格相关的 HTML 元素: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> <li>可能特别有用的关于设定表格元素样式的 CSS 属性： <ul> <li>{{cssxref("width")}} 控制表格的宽度；</li> diff --git a/files/zh-cn/web/html/element/template/index.html b/files/zh-cn/web/html/element/template/index.html index 0bdb141ebb..a47cd42d6d 100644 --- a/files/zh-cn/web/html/element/template/index.html +++ b/files/zh-cn/web/html/element/template/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML/Element/template --- <p id="Summary">{{HTMLRef}}</p> -<p><strong>HTML内容模板（<code><template></code>）元素</strong>是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化。</p> +<p><strong>HTML 内容模板（<code><template></code>）元素</strong>是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以 (原文为 may be) 在运行时使用 JavaScript 实例化。</p> <p>将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理<strong><code><template></code></strong>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。</p> @@ -48,11 +48,11 @@ translation_of: Web/HTML/Element/template <p>此元素仅包含<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p> -<p>但， {{domxref("HTMLTemplateElement")}} 有个属性： {{domxref("HTMLTemplateElement.content", "content")}} , 这个属性是只读的{{domxref("DocumentFragment")}} 包含了模板所表示的DOM树。</p> +<p>但， {{domxref("HTMLTemplateElement")}} 有个属性： {{domxref("HTMLTemplateElement.content", "content")}} , 这个属性是只读的{{domxref("DocumentFragment")}} 包含了模板所表示的 DOM 树。</p> <h2 id="示例">示例</h2> -<p>首先我们从示例的HTML部分开始。</p> +<p>首先我们从示例的 HTML 部分开始。</p> <pre class="brush: html"><table id="producttable"> <thead> @@ -74,15 +74,15 @@ translation_of: Web/HTML/Element/template </template> </pre> -<p>首先，我们有一个表，稍后我们将使用JavaScript代码在其中插入内容。然后是模板，它描述了表示单个表行的HTML片段的结构。</p> +<p>首先，我们有一个表，稍后我们将使用 JavaScript 代码在其中插入内容。然后是模板，它描述了表示单个表行的 HTML 片段的结构。</p> -<p>既然已经创建了表并定义了模板，我们使用JavaScript将行插入到表中，每一行都是以模板为基础构建的。</p> +<p>既然已经创建了表并定义了模板，我们使用 JavaScript 将行插入到表中，每一行都是以模板为基础构建的。</p> -<pre class="brush:js;">// 通过检查来测试浏览器是否支持HTML模板元素 +<pre class="brush:js;">// 通过检查来测试浏览器是否支持 HTML 模板元素 // 用于保存模板元素的内容属性。 if ('content' in document.createElement('template')) { - // 使用现有的HTML tbody实例化表和该行与模板 + // 使用现有的 HTML tbody 实例化表和该行与模板 let t = document.querySelector('#productrow'), td = t.content.querySelectorAll("td"); td[0].textContent = "1235646565"; @@ -102,11 +102,11 @@ if ('content' in document.createElement('template')) { tb[0].appendChild(clone2); } else { - // 找到另一种方法来添加行到表，因为不支持HTML模板元素。 + // 找到另一种方法来添加行到表，因为不支持 HTML 模板元素。 } </pre> -<p>结果是原始的HTML表格，通过JavaScript添加了两行新内容：</p> +<p>结果是原始的 HTML 表格，通过 JavaScript 添加了两行新内容：</p> <div class="hidden"> <pre class="brush: css">table { diff --git a/files/zh-cn/web/html/element/textarea/index.html b/files/zh-cn/web/html/element/textarea/index.html index a9bd73acc7..fa37b65db3 100644 --- a/files/zh-cn/web/html/element/textarea/index.html +++ b/files/zh-cn/web/html/element/textarea/index.html @@ -3,7 +3,7 @@ title: <textarea> slug: Web/HTML/Element/textarea tags: - HTML - - HTML表单 + - HTML 表单 - textarea - 元素 - 参考 @@ -32,14 +32,14 @@ translation_of: Web/HTML/Element/textarea <dl> <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> - <dd>iOS的非标准属性（运行在iOS上的Safari、Firefox、Chrome都支持），文本是否自动首字母大写。在iOS5和之后的版本上有效。可能的值为： + <dd>iOS 的非标准属性（运行在 iOS 上的 Safari、Firefox、Chrome 都支持），文本是否自动首字母大写。在 iOS5 和之后的版本上有效。可能的值为： <ul> <li><code>none</code>: 禁用首字母大写。</li> <li><code>sentences</code>: 句子的首字母大写。</li> <li><code>words</code>: 单词或者字母的首字母大写。</li> <li><code>characters</code>: 全部字母大写。</li> - <li><code>on</code>: {{deprecated_inline()}} 自iOS 5废弃。</li> - <li><code>off</code>: {{deprecated_inline()}} 自iOS 5废弃。</li> + <li><code>on</code>: {{deprecated_inline()}} 自 iOS 5 废弃。</li> + <li><code>off</code>: {{deprecated_inline()}} 自 iOS 5 废弃。</li> </ul> </dd> <dt>{{htmlattrdef("autocomplete")}}</dt> @@ -49,24 +49,24 @@ translation_of: Web/HTML/Element/textarea <li><code>on</code>: 浏览器根据用户之前输入的内容或者习惯，在用户输入的时候给出相应输入提示。</li> </ul> - <p>如果不指明<strong>autocomplete</strong>属性，浏览器会从父级的表单元素上解析是不是开启这个属性。表单元素可以是`textarea`元素的父级{{HTMLElement("form")}}或者`textarea`有跟表单相同的id（参见下面的form属性）。更多请查看{{HTMLElement("form")}}的{{htmlattrxref("autocomplete", "form")}} 属性。</p> + <p>如果不指明<strong>autocomplete</strong>属性，浏览器会从父级的表单元素上解析是不是开启这个属性。表单元素可以是`textarea`元素的父级{{HTMLElement("form")}}或者`textarea`有跟表单相同的 id（参见下面的 form 属性）。更多请查看{{HTMLElement("form")}}的{{htmlattrxref("autocomplete", "form")}} 属性。</p> </dd> <dt>{{ htmlattrdef("autofocus") }}</dt> <dd>页面加载完毕之后是否自动给本元素添加焦点。只有跟表格关联的才能使本属性生效。</dd> <dt>{{ htmlattrdef("cols") }}</dt> - <dd>文本域的可视宽度。必须为正数，默认为20 (HTML5)。</dd> + <dd>文本域的可视宽度。必须为正数，默认为 20 (HTML5)。</dd> <dt>{{ htmlattrdef("disabled") }}</dt> - <dd>禁用文本域。默认为false。如果未指定，也可以从父级上如{{ HTMLElement("fieldset") }}继承而来。</dd> + <dd>禁用文本域。默认为 false。如果未指定，也可以从父级上如{{ HTMLElement("fieldset") }}继承而来。</dd> <dt>{{ htmlattrdef("form") }}</dt> - <dd>指定跟自身相关联的表单。值必须为本文档内的表单的ID，如果未指定，就是跟当前所在的表单元素相关联。这就允许你在文档的任意地方放置文本域元素。</dd> + <dd>指定跟自身相关联的表单。值必须为本文档内的表单的 ID，如果未指定，就是跟当前所在的表单元素相关联。这就允许你在文档的任意地方放置文本域元素。</dd> <dt>{{ htmlattrdef("maxlength") }}</dt> <dd>允许用户输入的最大字符长度 (Unicode) 。未指定表示无限长度。</dd> <dt>{{ htmlattrdef("minlength") }}</dt> - <dd>允许用户输入的最小字符长度(Unicode) </dd> + <dd>允许用户输入的最小字符长度 (Unicode) </dd> <dt>{{ htmlattrdef("name") }}</dt> <dd>元素的名称。</dd> <dt>{{ htmlattrdef("placeholder") }}</dt> - <dd>向用户提示可以在控件中输入的内容。 在渲染提示时，占位符文本中的回车符(\r)或换行符(\n)一定会被作为行断（换行）处理。</dd> + <dd>向用户提示可以在控件中输入的内容。 在渲染提示时，占位符文本中的回车符 (\r) 或换行符 (\n) 一定会被作为行断（换行）处理。</dd> <dd> <div class="note"> <p><strong>Note:</strong> Placeholders should only be used to show an example of the type of data that should be entered into a form; they are <em>not</em> a substitute for a proper {{HTMLElement("label")}} element tied to the input. See {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} for a full explanation.</p> @@ -79,11 +79,11 @@ translation_of: Web/HTML/Element/textarea <dt>{{ htmlattrdef("rows") }}</dt> <dd>元素的输入文本的行数（显示的高度）。</dd> <dt>{{ htmlattrdef("spellcheck") }}</dt> - <dd>该属性设为true时，表明该元素会做拼写和语法检查。属性值为default时，表明元素有默认行为，可能会基于父元素的spellcheck值。属性值为false时，表明元素不做拼写和语法检查。</dd> + <dd>该属性设为 true 时，表明该元素会做拼写和语法检查。属性值为 default 时，表明元素有默认行为，可能会基于父元素的 spellcheck 值。属性值为 false 时，表明元素不做拼写和语法检查。</dd> <dt>{{ htmlattrdef("wrap") }}</dt> - <dd>指定文本换行的方式。默认为soft。可能的值为： + <dd>指定文本换行的方式。默认为 soft。可能的值为： <ul> - <li><span style="font-family: courier new;">hard</span>: 在文本到达元素最大宽度的时候，浏览器自动插入换行符(CR+LF) 。比如指定 <code>cols</code>值。</li> + <li><span style="font-family: courier new;">hard</span>: 在文本到达元素最大宽度的时候，浏览器自动插入换行符 (CR+LF) 。比如指定 <code>cols</code>值。</li> <li><span style="font-family: courier new;">soft</span>: 在到达元素最大宽度的时候，不会自动插入换行符。</li> </ul> </dd> diff --git a/files/zh-cn/web/html/element/tfoot/index.html b/files/zh-cn/web/html/element/tfoot/index.html index ecfae6ee88..59098bd89e 100644 --- a/files/zh-cn/web/html/element/tfoot/index.html +++ b/files/zh-cn/web/html/element/tfoot/index.html @@ -22,7 +22,7 @@ translation_of: Web/HTML/Element/tfoot <tr> <th scope="row">允许的父元素</th> <td>{{HTMLElement("table")}} 元素。{{HTMLElement("tfoot")}} 必须出现在一个或多个 {{HTMLElement("caption")}}，{{HTMLElement("colgroup")}}，{{HTMLElement("thead")}}, {{HTMLElement("tbody")}}，或 {{HTMLElement("tr")}} 元素之后。 注意这是自 HTML5 起有的要求。<br> - {{HTMLVersionInline("4")}} {{HTMLElement("tfoot")}} 元素不能放在任何 {{HTMLElement("tbody")}} 或 {{HTMLElement("tr")}} 元素之后。注意，这与上述HTML5的标准相冲突。</td> + {{HTMLVersionInline("4")}} {{HTMLElement("tfoot")}} 元素不能放在任何 {{HTMLElement("tbody")}} 或 {{HTMLElement("tr")}} 元素之后。注意，这与上述 HTML5 的标准相冲突。</td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> @@ -58,8 +58,8 @@ translation_of: Web/HTML/Element/tfoot <p><strong>Note: </strong>此属性在最新标准中已被废弃（不支持），所以请勿使用。</p> <ul> - <li>为达到与<code>left</code>, <code>center</code>, <code>right</code>或<code>justify</code>相同的效果，请使用CSS {{cssxref("text-align")}}属性。</li> - <li>为达到与char值相同的效果，在CSS3中可将{{htmlattrxref("char", "tfoot")}}的值用作{{cssxref("text-align")}}的属性值{{unimplemented_inline}}。</li> + <li>为达到与<code>left</code>, <code>center</code>, <code>right</code>或<code>justify</code>相同的效果，请使用 CSS {{cssxref("text-align")}}属性。</li> + <li>为达到与 char 值相同的效果，在 CSS3 中可将{{htmlattrxref("char", "tfoot")}}的值用作{{cssxref("text-align")}}的属性值{{unimplemented_inline}}。</li> </ul> </div> </dd> @@ -67,8 +67,8 @@ translation_of: Web/HTML/Element/tfoot <dl> <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> - <dd>此属性定义了列内单元格的背景色。定义此属性使用'#'作为前缀，其后是定义于<a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>的6位十六进制码。 - <p>也可使用以下16种预定义的色彩字符串之一：</p> + <dd>此属性定义了列内单元格的背景色。定义此属性使用'#'作为前缀，其后是定义于<a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>的 6 位十六进制码。 + <p>也可使用以下 16 种预定义的色彩字符串之一：</p> <table style="width: 80%;"> <tbody> @@ -123,14 +123,14 @@ translation_of: Web/HTML/Element/tfoot </tbody> </table> - <div class="note"><strong>Usage Note: </strong>请勿使用此属性，因为这并非标准，且只有某些特定版本的Microsoft Internet Explorer（IE浏览器）支持：{{HTMLElement("tfoot")}}元素应使用<a href="/en-US/docs/Web/CSS">CSS</a>设计。若想得到与<strong>bgcolor</strong>属性相似的效果，可在相关的 {{HTMLElement("td")}}或{{HTMLElement("th")}}元素中使用<a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("background-color")}}属性。</div> + <div class="note"><strong>Usage Note: </strong>请勿使用此属性，因为这并非标准，且只有某些特定版本的 Microsoft Internet Explorer（IE 浏览器）支持：{{HTMLElement("tfoot")}}元素应使用<a href="/en-US/docs/Web/CSS">CSS</a>设计。若想得到与<strong>bgcolor</strong>属性相似的效果，可在相关的 {{HTMLElement("td")}}或{{HTMLElement("th")}}元素中使用<a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("background-color")}}属性。</div> </dd> </dl> <dl> <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> - <dd>此属性设置单元格对齐的基准字符。当对齐数字或货币值时，一个典型值会带有一个句点(.)。如果{{htmlattrxref("align", "tfoot")}}未设置为<code>char</code>，此属性将被忽略。 - <div class="note"><strong>Note: </strong>请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）。想要达到与{{htmlattrxref("char", "tbtfootody")}}相同的效果，在CSS3中，可将{{cssxref("text-align")}}属性设置为{{htmlattrxref("char", "tfoot")}}的属性值{{unimplemented_inline}}。</div> + <dd>此属性设置单元格对齐的基准字符。当对齐数字或货币值时，一个典型值会带有一个句点 (.)。如果{{htmlattrxref("align", "tfoot")}}未设置为<code>char</code>，此属性将被忽略。 + <div class="note"><strong>Note: </strong>请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）。想要达到与{{htmlattrxref("char", "tbtfootody")}}相同的效果，在 CSS3 中，可将{{cssxref("text-align")}}属性设置为{{htmlattrxref("char", "tfoot")}}的属性值{{unimplemented_inline}}。</div> </dd> </dl> @@ -143,7 +143,7 @@ translation_of: Web/HTML/Element/tfoot <dl> <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> - <dd>此属性指定表头（译者注：英文原文为table header，疑似错误）中每一行内的文本的垂直对齐方式。此属性的可选值为： + <dd>此属性指定表头（译者注：英文原文为 table header，疑似错误）中每一行内的文本的垂直对齐方式。此属性的可选值为： <ul> <li><code>baseline</code>，会使文本尽可能接近单元格底部，但并不向底部对齐，而将它们以字符<a class="external" href="https://zh.wikipedia.org/wiki/%E5%9F%BA%E7%B7%9A">基线</a>对齐。如果所有字符的大小相同，此值与<code>bottom</code>的效果相同；</li> <li><code>bottom</code>，设置文本向下对齐；</li> @@ -151,7 +151,7 @@ translation_of: Web/HTML/Element/tfoot <li>and <code>top</code>，设置文本向上对齐。</li> </ul> - <div class="note"><strong>Note: </strong> 请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）：使用CSS属性{{cssxref("vertical-align")}}作为替代。</div> + <div class="note"><strong>Note: </strong> 请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）：使用 CSS 属性{{cssxref("vertical-align")}}作为替代。</div> </dd> </dl> @@ -190,8 +190,8 @@ translation_of: Web/HTML/Element/tfoot <h2 id="参见">参见</h2> <ul> - <li>其他table相关的HTML元素：{{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tbody")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> - <li>在设计<code><tfoot></code>时可能会有特殊效果的CSS属性和伪类： + <li>其他 table 相关的 HTML 元素：{{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tbody")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>在设计<code><tfoot></code>时可能会有特殊效果的 CSS 属性和伪类： <ul> <li>{{cssxref(":nth-child")}}伪类：设置列内元素的对齐方式；</li> <li>{{cssxref("text-align")}}属性：可设置单元格内容与同一字符对齐，例如'.'。</li> diff --git a/files/zh-cn/web/html/element/th/index.html b/files/zh-cn/web/html/element/th/index.html index 38aa571446..b072771146 100644 --- a/files/zh-cn/web/html/element/th/index.html +++ b/files/zh-cn/web/html/element/th/index.html @@ -19,7 +19,7 @@ translation_of: Web/HTML/Element/th <th scope="row">允许内容</th> <td> <div class="content-models"> - <div id="table-mdls">流内容（除header、footer、sectioning content或heading content的继承。）</div> + <div id="table-mdls">流内容（除 header、footer、sectioning content 或 heading content 的继承。）</div> </div> </td> </tr> @@ -36,7 +36,7 @@ translation_of: Web/HTML/Element/th <td>任何</td> </tr> <tr> - <th scope="row">DOM接口</th> + <th scope="row">DOM 接口</th> <td>{{domxref("HTMLTableHeaderCellElement")}}</td> </tr> </tbody> @@ -49,7 +49,7 @@ translation_of: Web/HTML/Element/th <dl> <dt>{{htmlattrdef("abbr")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> <dd>这个属性包含一个关于单元格内容的简单的介绍。一个用户代理（例如，语音阅读器）可能出现在描述之前。 - <div class="note"><strong>使用提醒 : 不要使用这个属性，因为它已经在最新标准中过时。相对的，你可以把简短的描述放置于单元格内，把较长的描述内容放到title属性内。</strong></div> + <div class="note"><strong>使用提醒 : 不要使用这个属性，因为它已经在最新标准中过时。相对的，你可以把简短的描述放置于单元格内，把较长的描述内容放到 title 属性内。</strong></div> </dd> <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> <dd>这个枚举属性指定单元格内容的水平对齐方式。可能的值有： @@ -63,20 +63,20 @@ translation_of: Web/HTML/Element/th <p>对齐方式的默认值是 <code>left</code>.</p> - <div class="note"><strong>使用提示: 不要使用这个属性，因为它已经在最新标准中过时。</strong> + <div class="note"><strong>使用提示：不要使用这个属性，因为它已经在最新标准中过时。</strong> <ul> - <li> <code>left</code>, <code>center</code>, <code>right</code> 或 <code>justify</code> 这些对齐效果，应该使用CSS的{{cssxref("text-align")}} 来实现。</li> - <li> <code>char</code> 的对齐效果使用CSS的 {{cssxref("text-align")}} 实现， {{htmlattrxref("char", "th")}}亦同. {{unimplemented_inline}} in CSS3.</li> + <li> <code>left</code>, <code>center</code>, <code>right</code> 或 <code>justify</code> 这些对齐效果，应该使用 CSS 的{{cssxref("text-align")}} 来实现。</li> + <li> <code>char</code> 的对齐效果使用 CSS 的 {{cssxref("text-align")}} 实现， {{htmlattrxref("char", "th")}}亦同. {{unimplemented_inline}} in CSS3.</li> </ul> </div> </dd> <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> - <dd>这个属性包含了一个空间分隔的字符串的列表.每个字符串是一组单元格的ID，而该表头适用于这个ID。 - <div class="note"><strong>使用提示: 不要使用这个属性，因为它已经在最新标准中过时。应该使用</strong> {{htmlattrxref("scope", "th")}} 属性代替。</div> + <dd>这个属性包含了一个空间分隔的字符串的列表。每个字符串是一组单元格的 ID，而该表头适用于这个 ID。 + <div class="note"><strong>使用提示：不要使用这个属性，因为它已经在最新标准中过时。应该使用</strong> {{htmlattrxref("scope", "th")}} 属性代替。</div> </dd> <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> - <dd>这个属性定义了每列中每单元格的背景色。它由带有‘#’前缀的6位数的十六进制码组成，并在<a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>中被定义。这个属性可能会用到十六个预定义的颜色字符串儿之一。 + <dd>这个属性定义了每列中每单元格的背景色。它由带有 ‘#’ 前缀的 6 位数的十六进制码组成，并在<a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>中被定义。这个属性可能会用到十六个预定义的颜色字符串儿之一。 <table> <tbody> <tr> @@ -130,31 +130,31 @@ translation_of: Web/HTML/Element/th </tbody> </table> - <div class="note"><strong>使用提示: </strong>不要使用这个属性，它不是标准属性且仅在某些版本的Microsoft Internet Explorer支持: {{HTMLElement("th")}} 元素应当用<a href="/en-US/docs/CSS">CSS</a>来样式化. 为了创造出同样的效果只需要使用<a href="/en-US/docs/CSS">CSS</a>中的{{cssxref("background-color")}}属性就可以啦。</div> + <div class="note"><strong>使用提示：</strong>不要使用这个属性，它不是标准属性且仅在某些版本的 Microsoft Internet Explorer 支持: {{HTMLElement("th")}} 元素应当用<a href="/en-US/docs/CSS">CSS</a>来样式化。为了创造出同样的效果只需要使用<a href="/en-US/docs/CSS">CSS</a>中的{{cssxref("background-color")}}属性就可以啦。</div> </dd> </dl> <dl> <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> - <dd>列中的内容与<code><th></code> 元素中的字母对齐。通常其值包含一个(.)来排列数字或者货币值。 如果 {{htmlattrxref("align", "th")}}没有被设置为<code>char</code>，这个属性就会被忽略。 - <div class="note"><strong>使用提示: </strong>不要使用这个属性，因为它已经在最新标准中过时。为了达到同样的效果， 你可以指定该字母为{{cssxref("text-align")}} 属性中的第一个值,或通过CSS3中的{{unimplemented_inline}}。</div> + <dd>列中的内容与<code><th></code> 元素中的字母对齐。通常其值包含一个 (.) 来排列数字或者货币值。 如果 {{htmlattrxref("align", "th")}}没有被设置为<code>char</code>，这个属性就会被忽略。 + <div class="note"><strong>使用提示：</strong>不要使用这个属性，因为它已经在最新标准中过时。为了达到同样的效果， 你可以指定该字母为{{cssxref("text-align")}} 属性中的第一个值，或通过 CSS3 中的{{unimplemented_inline}}。</div> </dd> </dl> <dl> <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> <dd>这个属性用来将列数据移到<strong>char</strong>属性指定字母的右边。 其值指定了移动的长度。 - <div class="note"><strong>使用提示: </strong>不要使用这个属性，因为它已经在最新标准中过时。</div> + <div class="note"><strong>使用提示：</strong>不要使用这个属性，因为它已经在最新标准中过时。</div> </dd> </dl> <dl> <dt>{{htmlattrdef("colspan")}}</dt> - <dd>这个属性包含一个正整数表示了每单元格中扩展列的数量。默认值为<code>1</code> 。超过1000的值被视作1000。</dd> + <dd>这个属性包含一个正整数表示了每单元格中扩展列的数量。默认值为<code>1</code> 。超过 1000 的值被视作 1000。</dd> <dt>{{htmlattrdef("headers")}}</dt> - <dd>这个属性包含了一个空间分隔的字符串的列表, 每个与其他{{HTMLElement("th")}}元素相关联的<code>id</code> 属性一一对应。</dd> + <dd>这个属性包含了一个空间分隔的字符串的列表，每个与其他{{HTMLElement("th")}}元素相关联的<code>id</code> 属性一一对应。</dd> <dt>{{htmlattrdef("rowspan")}}</dt> - <dd>这个属性包含一个正整数表示了每单元格中扩展列的数量。默认值为<code>1.</code> 如果该值被设置为 <code>0</code>, 这个单元格就被扩展为({{HTMLElement("thead")}}，{{HTMLElement("tbody")}} 或{{HTMLElement("tfoot")}})中表格部分的最后一个元素。比65534大的值被视作65534。</dd> + <dd>这个属性包含一个正整数表示了每单元格中扩展列的数量。默认值为<code>1.</code> 如果该值被设置为 <code>0</code>, 这个单元格就被扩展为 ({{HTMLElement("thead")}}，{{HTMLElement("tbody")}} 或{{HTMLElement("tfoot")}}) 中表格部分的最后一个元素。比 65534 大的值被视作 65534。</dd> <dt>{{htmlattrdef("scope")}}</dt> <dd>这个枚举属性定义了表头元素 <sup>(在{{HTMLElement("th")}}中定义) </sup>关联的单元格。它可能有以下值： <ul> @@ -166,19 +166,19 @@ translation_of: Web/HTML/Element/th </ul> </dd> <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> - <dd>这个属性指定了单元格内文本的垂直对齐方式。这个属性可能有以下值: + <dd>这个属性指定了单元格内文本的垂直对齐方式。这个属性可能有以下值： <ul> - <li><code>baseline</code>: 将文本置于单元格底部并将其与字母的<a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a>对齐而不是与底部。若字母没有baseline以下的部分（即为无<a href="https://www.wikiwand.com/zh/%E9%99%8D%E9%83%A8">降部</a>）那么baseline值起到的效果便和<code>bottom相同。</code></li> + <li><code>baseline</code>: 将文本置于单元格底部并将其与字母的<a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a>对齐而不是与底部。若字母没有 baseline 以下的部分（即为无<a href="https://www.wikiwand.com/zh/%E9%99%8D%E9%83%A8">降部</a>）那么 baseline 值起到的效果便和<code>bottom 相同。</code></li> <li><code>bottom</code>: 将文本置于底部。</li> <li><code>middle</code>: 将文本置于单元格中央。</li> <li><code>top</code>: 将文本置于单元格顶部。</li> </ul> - <div class="note"><strong>使用提示：</strong>不要使用这个属性，因为它已经在最新标准中过时。使用CSS {{cssxref("vertical-align")}}特性代替。</div> + <div class="note"><strong>使用提示：</strong>不要使用这个属性，因为它已经在最新标准中过时。使用 CSS {{cssxref("vertical-align")}}特性代替。</div> </dd> <dt>{{htmlattrdef("width")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}</dt> <dd>这个属性用来定义一个期望的单元格宽。额外的空间可以藉由<a href="/en-US/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a>和 <a href="/en-US/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a> 属性来增加，并且{{HTMLElement("col")}}元素的宽也可以创造额外空间。但是，如果一列宽太窄以至于无法恰当显示 某单元格时，它会被自动加宽。 - <div class="note"><strong>使用提示：</strong>不要使用这个属性，因为它已经在最新标准中过时。使用CSS {{cssxref("width")}}属性代替。</div> + <div class="note"><strong>使用提示：</strong>不要使用这个属性，因为它已经在最新标准中过时。使用 CSS {{cssxref("width")}}属性代替。</div> </dd> </dl> diff --git a/files/zh-cn/web/html/element/thead/index.html b/files/zh-cn/web/html/element/thead/index.html index 1e9e104503..bf446a6f4d 100644 --- a/files/zh-cn/web/html/element/thead/index.html +++ b/files/zh-cn/web/html/element/thead/index.html @@ -18,15 +18,15 @@ translation_of: Web/HTML/Element/thead <tbody> <tr> <th scope="row"><a href="/en-US/docs/HTML/Content_categories">内容类别</a></th> - <td>无.</td> + <td>无。</td> </tr> <tr> <th scope="row">允许内容</th> - <td>零或多个{{ HTMLElement("tr") }}元素.</td> + <td>零或多个{{ HTMLElement("tr") }}元素。</td> </tr> <tr> <th scope="row">标签省略</th> - <td>开头的标签是强制的. 如果{{ HTMLElement("thead") }} 元素后直接跟 {{ HTMLElement("tbody") }}或{{ HTMLElement("tfoot") }}元素，结尾的标签可以被省略。</td> + <td>开头的标签是强制的。如果{{ HTMLElement("thead") }} 元素后直接跟 {{ HTMLElement("tbody") }}或{{ HTMLElement("tfoot") }}元素，结尾的标签可以被省略。</td> </tr> <tr> <th scope="row">Permitted parents</th> diff --git a/files/zh-cn/web/html/element/time/index.html b/files/zh-cn/web/html/element/time/index.html index 0e5b97e110..e6746bce63 100644 --- a/files/zh-cn/web/html/element/time/index.html +++ b/files/zh-cn/web/html/element/time/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/time --- <h2 id="概述">概述</h2> -<p> HTML <em>time</em> 标签(<code><time></code>) 用来表示24小时制时间或者<a class="external" href="http://en.wikipedia.org/wiki/Gregorian_calendar">公历日期</a>，若表示日期则也可包含时间和时区。</p> +<p> HTML <em>time</em> 标签 (<code><time></code>) 用来表示 24 小时制时间或者<a class="external" href="http://en.wikipedia.org/wiki/Gregorian_calendar">公历日期</a>，若表示日期则也可包含时间和时区。</p> <p>此元素意在以机器可读的格式表示日期和时间。 有安排日程表功能的应用可以利用这一点。</p> @@ -46,9 +46,9 @@ translation_of: Web/HTML/Element/time <dl> <dt>{{ htmlattrdef("datetime") }}</dt> - <dd>该属性表示此元素的时间和日期，并且属性值必须是一个<a class="external" href="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time">有效的日期格式，并可包含时间</a>。 如果此值不能被解析为日期，元素不会有一个关联的时间戳.</dd> + <dd>该属性表示此元素的时间和日期，并且属性值必须是一个<a class="external" href="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time">有效的日期格式，并可包含时间</a>。 如果此值不能被解析为日期，元素不会有一个关联的时间戳。</dd> <dt>{{ htmlattrdef("pubdate") }}</dt> - <dd>(该属性仍在被WHATWG 和 W3C组织设计和讨论中.) This Boolean attribute specifies that the date and time given by the element is the publication date of a document. The document it applies to is either the nearest ancestor article element or the document as a whole (if there is no ancestor <a href="/zh-cn/HTML/Element/article" title="zh-cn/HTML/Element/Article">article</a> element). If true, the <code>time</code> element must have a corresponding date. Additionally, each <code>time</code> element indicating a publication date must be the only <code>time</code> element that does so for that document.</dd> + <dd>(该属性仍在被 WHATWG 和 W3C 组织设计和讨论中.) This Boolean attribute specifies that the date and time given by the element is the publication date of a document. The document it applies to is either the nearest ancestor article element or the document as a whole (if there is no ancestor <a href="/zh-cn/HTML/Element/article" title="zh-cn/HTML/Element/Article">article</a> element). If true, the <code>time</code> element must have a corresponding date. Additionally, each <code>time</code> element indicating a publication date must be the only <code>time</code> element that does so for that document.</dd> </dl> <h3 id="DOM_接口">DOM 接口</h3> @@ -60,7 +60,7 @@ translation_of: Web/HTML/Element/time <pre class="brush: html"><p>The concert starts at <time>20:00</time>.</p> </pre> -<p>上面的HTML会显示:</p> +<p>上面的 HTML 会显示：</p> <p>The concert starts at 20:00.</p> @@ -71,7 +71,7 @@ translation_of: Web/HTML/Element/time </article> </pre> -<p>上面的HTML会显示：</p> +<p>上面的 HTML 会显示：</p> <p>This article was created on 2011-01-28.</p> @@ -80,7 +80,7 @@ translation_of: Web/HTML/Element/time <pre class="brush: html"><p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p> </pre> -<p>上面的HTML会显示：</p> +<p>上面的 HTML 会显示：</p> <p>The concert took place on May 15.</p> diff --git a/files/zh-cn/web/html/element/title/index.html b/files/zh-cn/web/html/element/title/index.html index cc373f2735..f336e17e24 100644 --- a/files/zh-cn/web/html/element/title/index.html +++ b/files/zh-cn/web/html/element/title/index.html @@ -56,16 +56,16 @@ translation_of: Web/HTML/Element/title <p><title>元素始终在页面的 {{HTMLElement("head")}} 块内使用。</p> -<h3 id="页面标题和SEO">页面标题和SEO</h3> +<h3 id="页面标题和SEO">页面标题和 SEO</h3> -<p>页面标题的内容可能对搜索引擎优化（{{glossary("SEO")}}）具有重要意义。 通常，较长的描述性标题要比简短或一般性标题更好。 标题的内容是搜索引擎算法用来确定在搜索结果中列出页面顺序的组件之一。 同样，标题是初始的“挂钩”，您可以通过它吸引浏览浏览结果页面的读者的注意力。</p> +<p>页面标题的内容可能对搜索引擎优化（{{glossary("SEO")}}）具有重要意义。 通常，较长的描述性标题要比简短或一般性标题更好。 标题的内容是搜索引擎算法用来确定在搜索结果中列出页面顺序的组件之一。 同样，标题是初始的 “挂钩”，您可以通过它吸引浏览浏览结果页面的读者的注意力。</p> <p>撰写好标题的一些准则和技巧：</p> <ul> - <li>避免使用一两个单词的标题。 对于词汇表或参考样式的页面，请使用描述性短语或术语-定义对。</li> - <li>搜索引擎通常显示页面标题的前55至60个字符。 超出此范围的文本可能会丢失，因此请尽量不要使标题更长。 如果您必须使用较长的标题，请确保重要的部分出现在前面，并且标题中可能要删除的部分中没有关键内容。</li> - <li>不要使用“关键字集合”。 如果标题只是单词列表，则算法通常会降低页面在搜索结果中的位置。</li> + <li>避免使用一两个单词的标题。 对于词汇表或参考样式的页面，请使用描述性短语或术语 - 定义对。</li> + <li>搜索引擎通常显示页面标题的前 55 至 60 个字符。 超出此范围的文本可能会丢失，因此请尽量不要使标题更长。 如果您必须使用较长的标题，请确保重要的部分出现在前面，并且标题中可能要删除的部分中没有关键内容。</li> + <li>不要使用 “关键字集合”。 如果标题只是单词列表，则算法通常会降低页面在搜索结果中的位置。</li> <li>尝试确保您的标题在您自己的网站中尽可能唯一。 标题重复（或几乎重复）可能会导致搜索结果不准确。</li> </ul> @@ -74,7 +74,7 @@ translation_of: Web/HTML/Element/title <pre class="brush: html"><title>Amazing！</title> </pre> -<p>本示例建立一个页面，其标题（如显示在窗口顶部或在窗口的选项卡中）为“Amazing！”。</p> +<p>本示例建立一个页面，其标题（如显示在窗口顶部或在窗口的选项卡中）为 “Amazing！”。</p> <h2 id="无障碍问题">无障碍问题</h2> diff --git a/files/zh-cn/web/html/element/tr/index.html b/files/zh-cn/web/html/element/tr/index.html index a5ccfcacd7..664b865930 100644 --- a/files/zh-cn/web/html/element/tr/index.html +++ b/files/zh-cn/web/html/element/tr/index.html @@ -3,7 +3,7 @@ title: <tr> slug: Web/HTML/Element/tr translation_of: Web/HTML/Element/tr --- -<p><strong>HTML <code><tr></code> 元素</strong>定义表格中的行。 同一行可同时出现{{HTMLElement("td")}} 和{{HTMLElement("th")}} 元素.</p> +<p><strong>HTML <code><tr></code> 元素</strong>定义表格中的行。 同一行可同时出现{{HTMLElement("td")}} 和{{HTMLElement("th")}} 元素。</p> <table class="properties"> <tbody> @@ -40,7 +40,7 @@ translation_of: Web/HTML/Element/tr <dl> <dt>{{htmlattrdef("align")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> - <dd>该枚举属性指定每个单元格中内容的水平对齐方式，可使用的属性值如下: + <dd>该枚举属性指定每个单元格中内容的水平对齐方式，可使用的属性值如下： <ul> <li><code>left</code>, 内容在单元格中左对齐</li> <li><code>center</code>, 内容在单元格中居中</li> diff --git a/files/zh-cn/web/html/element/track/index.html b/files/zh-cn/web/html/element/track/index.html index 0b0f80a474..c39bf6cb7d 100644 --- a/files/zh-cn/web/html/element/track/index.html +++ b/files/zh-cn/web/html/element/track/index.html @@ -21,7 +21,7 @@ translation_of: Web/HTML/Element/track </tr> <tr> <td><strong>允许的内容</strong></td> - <td><span style="background-color: rgba(212, 221, 228, 0.14902);">无, 它是一个 {{Glossary("空元素")}}。</span></td> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">无，它是一个 {{Glossary("空元素")}}。</span></td> </tr> <tr> <td><strong>标签省略</strong></td> @@ -32,11 +32,11 @@ translation_of: Web/HTML/Element/track <td>媒体元素，<a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">流内容</a>之前。</td> </tr> <tr> - <td><strong>允许的ARIA角色</strong></td> + <td><strong>允许的 ARIA 角色</strong></td> <td>无</td> </tr> <tr> - <td><strong>DOM接口</strong></td> + <td><strong>DOM 接口</strong></td> <td>{{domxref("HTMLTrackElement")}}</td> </tr> </tbody> @@ -48,7 +48,7 @@ translation_of: Web/HTML/Element/track <dl> <dt>{{htmlattrdef("default")}}</dt> - <dd>该属性定义了该track应该启用，除非用户首选项指定了更合适一个track。每个媒体元素里面只有一个 <code>track</code> 元素可以有这个属性。</dd> + <dd>该属性定义了该 track 应该启用，除非用户首选项指定了更合适一个 track。每个媒体元素里面只有一个 <code>track</code> 元素可以有这个属性。</dd> <dt>{{htmlattrdef("kind")}}</dt> <dd>定义了 text track 应该如何使用。如果省略了该属性，默认的 kind 值就是 <code>subtitles</code>。下面是允许的关键字： <ul> @@ -78,17 +78,17 @@ translation_of: Web/HTML/Element/track </li> <li><code>metadata</code> <ul> - <li>脚本使用的track。 对用户不可见。</li> + <li>脚本使用的 track。 对用户不可见。</li> </ul> </li> </ul> </dd> <dt>{{htmlattrdef("label")}}</dt> - <dd>当列出可用的text tracks时，给浏览器使用的text track的标题，这种标题是用户可读的。</dd> + <dd>当列出可用的 text tracks 时，给浏览器使用的 text track 的标题，这种标题是用户可读的。</dd> <dt>{{htmlattrdef("src")}}</dt> - <dd>track的地址。必须是合法的URL。该属性必须定义。</dd> + <dd>track 的地址。必须是合法的 URL。该属性必须定义。</dd> <dt>{{htmlattrdef("srclang")}}</dt> - <dd>track文本数据的语言。它必须是合法的 <a href="http://people.w3.org/rishida/utils/subtags/">BCP 47</a> 语言标签。如果 <code>kind</code> 属性被设为 <code>subtitles,</code> 那么<code>srclang</code> 必须定义。</dd> + <dd>track 文本数据的语言。它必须是合法的 <a href="http://people.w3.org/rishida/utils/subtags/">BCP 47</a> 语言标签。如果 <code>kind</code> 属性被设为 <code>subtitles,</code> 那么<code>srclang</code> 必须定义。</dd> </dl> <h2 id="用法说明">用法说明</h2> diff --git a/files/zh-cn/web/html/element/u/index.html b/files/zh-cn/web/html/element/u/index.html index fa4e6a77dc..bb2974f5cc 100644 --- a/files/zh-cn/web/html/element/u/index.html +++ b/files/zh-cn/web/html/element/u/index.html @@ -6,11 +6,11 @@ translation_of: Web/HTML/Element/u <div>{{HTMLRef}}</div> <div> -<p><strong>HTML <code><u></code> 元素（表意不清标注元素）</strong>表示一个需要标注为非文本化（non-textual）的内联文本域。默认情况下渲染为一个实线下划线，可以用CSS替换。</p> +<p><strong>HTML <code><u></code> 元素（表意不清标注元素）</strong>表示一个需要标注为非文本化（non-textual）的内联文本域。默认情况下渲染为一个实线下划线，可以用 CSS 替换。</p> </div> <div class="warning"> -<p>此元素以前在旧版本的HTML中称为“下划线”元素，但有时仍会以这种方式被滥用。要为文本加下划线，您应该应用包含CSS {{cssxref("text-decoration")}}属性设置为 <code>underline</code> 的样式。</p> +<p>此元素以前在旧版本的 HTML 中称为 “下划线” 元素，但有时仍会以这种方式被滥用。要为文本加下划线，您应该应用包含 CSS {{cssxref("text-decoration")}}属性设置为 <code>underline</code> 的样式。</p> </div> <div>{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}</div> @@ -87,14 +87,14 @@ translation_of: Web/HTML/Element/u <h3 id="表示拼写错误">表示拼写错误</h3> -<p>此示例使用<code><u></code>元素和一些CSS来显示包含拼写错误的段落，其中错误以红色波浪下划线样式表示，这种情况通常用于此目的。</p> +<p>此示例使用<code><u></code>元素和一些 CSS 来显示包含拼写错误的段落，其中错误以红色波浪下划线样式表示，这种情况通常用于此目的。</p> <h4 id="HTML">HTML</h4> <pre class="notranslate"><code><p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p></code></pre> -<p>在HTML中，我们看到 <code><u></code> 使用了一个类 <code>spelling</code>，用于表示“wrongly”一词的拼写错误。</p> +<p>在 HTML 中，我们看到 <code><u></code> 使用了一个类 <code>spelling</code>，用于表示 “wrongly” 一词的拼写错误。</p> <h4 id="CSS">CSS</h4> @@ -102,7 +102,7 @@ spelled word.</p></code></pre> text-decoration: red wavy underline; }</code></pre> -<p>这个CSS表示当 <code><u></code> 元素使用类 <code>spelling</code> 进行样式化时，它的文本下面应该有一个红色的波浪下划线。这是拼写错误的常见样式。也可以使用另一种常见样式 <code>red dashed underline</code>.。</p> +<p>这个 CSS 表示当 <code><u></code> 元素使用类 <code>spelling</code> 进行样式化时，它的文本下面应该有一个红色的波浪下划线。这是拼写错误的常见样式。也可以使用另一种常见样式 <code>red dashed underline</code>.。</p> <h4 id="结果">结果</h4> @@ -146,7 +146,7 @@ Chicken Noodle Soup With Carrots</code></pre> <p>{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}</p> -<p>请注意， <code><cite></code> 元素的默认样式会以斜体显示文本。如果您愿意，可以使用CSS覆盖它：</p> +<p>请注意， <code><cite></code> 元素的默认样式会以斜体显示文本。如果您愿意，可以使用 CSS 覆盖它：</p> <pre class="notranslate"><code>cite { font-style: normal; diff --git a/files/zh-cn/web/html/element/ul/index.html b/files/zh-cn/web/html/element/ul/index.html index 935ea5e566..ac0709e093 100644 --- a/files/zh-cn/web/html/element/ul/index.html +++ b/files/zh-cn/web/html/element/ul/index.html @@ -65,11 +65,11 @@ translation_of: Web/HTML/Element/ul <li><code>square</code></li> </ul> - <p>第四种着重号样式被定义在 WebTV 接口中，但并不是所有浏览器都支持: <code>triangle</code></p> + <p>第四种着重号样式被定义在 WebTV 接口中，但并不是所有浏览器都支持：<code>triangle</code></p> <p>如果未设置此 HTML 属性且没有 <a href="/en/CSS" title="en/CSS">CSS</a> {{ cssxref("list-style-type") }} 属性作用于这个元素，用户代理会决定使用哪种着重号样式，一般来说这也和嵌套的层级数有关。</p> - <div class="note"><strong>使用说明:</strong> 不要使用这个属性，它已经被废弃了：使用 <a href="/en/CSS" title="en/CSS">CSS</a> {{ cssxref("list-style-type") }} 属性作为代替。</div> + <div class="note"><strong>使用说明：</strong> 不要使用这个属性，它已经被废弃了：使用 <a href="/en/CSS" title="en/CSS">CSS</a> {{ cssxref("list-style-type") }} 属性作为代替。</div> </dd> </dl> @@ -78,7 +78,7 @@ translation_of: Web/HTML/Element/ul <ul> <li><code><ul></code> 元素用来将没有数字顺序的一组数据进行分组，并且它们的数字顺序是没有意义的。举个例子，无序列表的列表项通常通过一个字符进行装饰，这些字符的形式可以是点，圆乃至方形．虽然这个字符没有直接在页面上定义，但是可以用与之相关的 CSS 对其进行操作，例如使用 {{cssxref("list-style-type")}} 属性。</li> <li>在 {{ HTMLElement("ol") }} 和 {{ HTMLElement("ul") }} 元素中，嵌套列表没有深度和嵌套顺序的限制。</li> - <li>{{ HTMLElement("ol") }} 和 {{ HTMLElement("ul") }} 元素二者都代表一组数据，不过它们彼此是有区别的，ol元素中的顺序是有意义的。如果想确定你到底需要使用哪一个列表元素，你可以试着去改变数据的顺序。如果想表达的语义改变了，你就需要使用ol元素，否则你该使用ul元素。</li> + <li>{{ HTMLElement("ol") }} 和 {{ HTMLElement("ul") }} 元素二者都代表一组数据，不过它们彼此是有区别的，ol 元素中的顺序是有意义的。如果想确定你到底需要使用哪一个列表元素，你可以试着去改变数据的顺序。如果想表达的语义改变了，你就需要使用 ol 元素，否则你该使用 ul 元素。</li> </ul> <h2 id="实例">实例</h2> @@ -92,7 +92,7 @@ translation_of: Web/HTML/Element/ul </ul> </pre> -<p>以上HTML输出:</p> +<p>以上 HTML 输出：</p> <ul> <li>first item</li> @@ -120,7 +120,7 @@ translation_of: Web/HTML/Element/ul <li>third item</li> </ul></pre> -<p>以上HTML输出:</p> +<p>以上 HTML 输出：</p> <ul> <li>first item</li> @@ -155,7 +155,7 @@ translation_of: Web/HTML/Element/ul </ul> </pre> -<p>以上HTML输出:</p> +<p>以上 HTML 输出：</p> <ul> <li>first item</li> @@ -200,13 +200,13 @@ translation_of: Web/HTML/Element/ul <h2 id="参见">参见</h2> <ul> - <li>其他列表相关的HTML元素: {{ HTMLElement("ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }} 和绝对元素 {{ HTMLElement("dir") }};</li> - <li>特别作用于 <span style="font-family: courier new;"><ul></span>元素的CSS属性: + <li>其他列表相关的 HTML 元素: {{ HTMLElement("ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }} 和绝对元素 {{ HTMLElement("dir") }};</li> + <li>特别作用于 <span style="font-family: courier new;"><ul></span>元素的 CSS 属性： <ul> - <li> <a href="/en/CSS/list-style" title="en/CSS/list-style">list-style</a> 属性, 作用于选择哪种序数的样式来显示,</li> - <li><a href="/en/CSS_Counters" title="en/CSS_Counters">CSS counters</a>, 作用于操作复杂的嵌套列表,</li> - <li> <a href="/en/CSS/line-height" title="en/CSS/line-height">line-height</a> 属性, 作用于模拟过时的 {{ htmlattrxref("compact", "ul") }} 属性,</li> - <li> <a href="/en/CSS/margin" title="en/CSS/margin">margin</a> 属性, 作用于控制列表的缩进.</li> + <li> <a href="/en/CSS/list-style" title="en/CSS/list-style">list-style</a> 属性，作用于选择哪种序数的样式来显示，</li> + <li><a href="/en/CSS_Counters" title="en/CSS_Counters">CSS counters</a>, 作用于操作复杂的嵌套列表，</li> + <li> <a href="/en/CSS/line-height" title="en/CSS/line-height">line-height</a> 属性，作用于模拟过时的 {{ htmlattrxref("compact", "ul") }} 属性，</li> + <li> <a href="/en/CSS/margin" title="en/CSS/margin">margin</a> 属性，作用于控制列表的缩进。</li> </ul> </li> </ul> diff --git a/files/zh-cn/web/html/element/var/index.html b/files/zh-cn/web/html/element/var/index.html index 8b6e979878..463a9073de 100644 --- a/files/zh-cn/web/html/element/var/index.html +++ b/files/zh-cn/web/html/element/var/index.html @@ -9,7 +9,7 @@ translation_of: Web/HTML/Element/var <div>{{HTMLRef}}</div> -<div>HTML Variable元素（<var>）表示数学表达式或编程上下文中的变量名称。尽管该行为取决于浏览器，但通常使用当前字体的斜体形式显示。</div> +<div>HTML Variable 元素（<var>）表示数学表达式或编程上下文中的变量名称。尽管该行为取决于浏览器，但通常使用当前字体的斜体形式显示。</div> <h2 id="概述">概述</h2> @@ -45,7 +45,7 @@ translation_of: Web/HTML/Element/var <p>本元素支持 <code><a href="/zh-CN/docs/Web/API/Element" title="DOM/element">HTMLElement</a></code> 接口</p> <div class="note"> -<p><strong>提示: </strong>Gecko 1.9.2 开始, Firefox支持本元素使用 <a href="/zh-CN/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a> 接口。</p> +<p><strong>提示：</strong>Gecko 1.9.2 开始，Firefox 支持本元素使用 <a href="/zh-CN/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a> 接口。</p> </div> <h2 id="默认样式">默认样式</h2> diff --git a/files/zh-cn/web/html/element/video/index.html b/files/zh-cn/web/html/element/video/index.html index dbaa58d81c..d41aeecc29 100644 --- a/files/zh-cn/web/html/element/video/index.html +++ b/files/zh-cn/web/html/element/video/index.html @@ -14,11 +14,11 @@ translation_of: Web/HTML/Element/video --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><strong>HTML <code><video></code> 元素</strong> 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。</span>你也可以将 <code><video></code> 标签用于音频内容，但是 {{HTMLElement("audio")}} 元素可能在用户体验上更合适。</p> +<p><span class="seoSummary"><strong>HTML <code><video></code> 元素</strong> 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。</span>你也可以将 <code><video></code> 标签用于音频内容，但是 {{HTMLElement("audio")}} 元素可能在用户体验上更合适。</p> <div>{{EmbedInteractiveExample("pages/tabbed/video.html", "tabbed-standard")}}</div> -<div>这个交互式例子的源码储存在GitHub仓库上，如果你想要参与到这个交互式例子的项目中来</div> +<div>这个交互式例子的源码储存在 GitHub 仓库上，如果你想要参与到这个交互式例子的项目中来</div> <div>并做出自己的一份贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>并发送给我们一个拉取请求</div> @@ -41,7 +41,7 @@ translation_of: Web/HTML/Element/video <ul> <li>如果你没有指定 <code>controls</code> 属性，那么视频不会展示浏览器自带的控件，你也可以用 JavaScript 和 {{domxref("HTMLMediaElement")}} API 来创建你自己的控件。详情请见<a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>。</li> <li><code>HTMLMediaElement</code> 会激活许多不同的<a href="/zh-CN/docs/Web/Guide/Events/Media_events">事件</a>，以便于让你可以控制视频（和音频）内容。</li> - <li>你可以用CSS 属性 {{cssxref("object-position")}} 来调整视频在元素内部的位置，它可以控制视频尺寸适应于元素外框的方式。</li> + <li>你可以用 CSS 属性 {{cssxref("object-position")}} 来调整视频在元素内部的位置，它可以控制视频尺寸适应于元素外框的方式。</li> <li>如果想在视频里展示字幕或者标题，你可以在 {{htmlelement("track")}} 元素和 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT</a> 格式的基础上使用 JavaScript 来实现。详情请见 <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>。</li> </ul> @@ -49,11 +49,11 @@ translation_of: Web/HTML/Element/video <h2 id="Usage_context" name="Usage_context">属性</h2> -<p>就像其他的HTML元素一样，这个元素也同样支持全局属性。</p> +<p>就像其他的 HTML 元素一样，这个元素也同样支持全局属性。</p> <p>{{htmlattrdef("autoplay")}}</p> -<p>如果这个bool数值被指定了autoplay，视频就会开始自动播放，而且无需停止加载任何数据。</p> +<p>如果这个 bool 数值被指定了 autoplay，视频就会开始自动播放，而且无需停止加载任何数据。</p> <table class="standard-table"> <tbody> @@ -71,21 +71,21 @@ translation_of: Web/HTML/Element/video </tr> <tr> <td>规范文档</td> - <td><a class="external" href="http://www.w3.org/TR/html5/embedded-content-0.html#the-video-element">HTML5, 4.8.6节</a></td> + <td><a class="external" href="http://www.w3.org/TR/html5/embedded-content-0.html#the-video-element">HTML5, 4.8.6 节</a></td> </tr> </tbody> </table> <h2 id="Attributes" name="Attributes">属性</h2> -<p>类似于所有其它HTML元素，video元素支持 <a href="/zh-CN/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>。</p> +<p>类似于所有其它 HTML 元素，video 元素支持 <a href="/zh-CN/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>。</p> <dl> <dt>{{htmlattrdef("autoplay")}}</dt> <dd>布尔属性；指定后，视频会马上自动开始播放，不会停下来等着数据载入结束。</dd> <dt>{{htmlattrdef("autobuffer")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> <dd>布尔属性；指定后，视频会自动开始缓存，即使没有设置自动播放。该属性适用于视频被认为可能会播放（比如，用户导航到专门播放视频的页面，而不是那种嵌入视频还有其它内容的页面）。视频会一直缓存到媒体缓存满。 - <div class="note"><strong>实现备注： </strong> 虽然是HTML5规范的早期草案的一部分， <code>autobuffer</code> 属性在稍晚的版本被去掉了。 Gecko 2.0 和其它浏览器中已经移除了这个属性，而且有些浏览器中从未实现。规范定义了一个新的枚举属性， <code>preload</code>， 用不同的语法来取代 <code>autobuffer</code> 属性。 {{bug(548523)}}</div> + <div class="note"><strong>实现备注： </strong> 虽然是 HTML5 规范的早期草案的一部分， <code>autobuffer</code> 属性在稍晚的版本被去掉了。 Gecko 2.0 和其它浏览器中已经移除了这个属性，而且有些浏览器中从未实现。规范定义了一个新的枚举属性， <code>preload</code>， 用不同的语法来取代 <code>autobuffer</code> 属性。 {{bug(548523)}}</div> </dd> <dt>{{htmlattrdef("buffered")}}</dt> <dd>这个属性可以读取到哪段时间范围内的媒体被缓存了。该属性包含了一个 {{domxref("TimeRanges")}} 对象。</dd> @@ -93,44 +93,44 @@ translation_of: Web/HTML/Element/video <dd>加上这个属性，Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。</dd> <dt>{{htmlattrdef("controlslist")}} {{experimental_inline}}</dt> <dd> - <p>当浏览器显示自己的控件集(例如，当指定了Controls属性时)，Controlslist属性将帮助浏览器选择在媒体元素上显示的控件。</p> + <p>当浏览器显示自己的控件集 (例如，当指定了 Controls 属性时)，Controlslist 属性将帮助浏览器选择在媒体元素上显示的控件。</p> - <p>允许接受的value有<code>nodownload</code>,<code>nofullscreen</code>和<code>noremoteplayback</code></p> + <p>允许接受的 value 有<code>nodownload</code>,<code>nofullscreen</code>和<code>noremoteplayback</code></p> <div class="blockIndicator note"> - <p><span>如果要禁用图片模式(和控件)，请使用<code>disablePictureInPicture</code>属性。</span></p> + <p><span>如果要禁用图片模式 (和控件)，请使用<code>disablePictureInPicture</code>属性。</span></p> </div> </dd> <dt>{{htmlattrdef("crossorigin")}}</dt> - <dd>该枚举属性指明抓取相关图片是否必须用到CORS（跨域资源共享）。 <a href="/zh-CN/docs/CORS_Enabled_Image" title="CORS_Enabled_Image">支持CORS的资源</a> 可在 {{HTMLElement("canvas")}} 元素中被重用，而不会被<em>污染</em>。允许的值如下： + <dd>该枚举属性指明抓取相关图片是否必须用到 CORS（跨域资源共享）。 <a href="/zh-CN/docs/CORS_Enabled_Image" title="CORS_Enabled_Image">支持 CORS 的资源</a> 可在 {{HTMLElement("canvas")}} 元素中被重用，而不会被<em>污染</em>。允许的值如下： <dl> <dt>anonymous</dt> - <dd>跨域请求（即，使用 <code>Origin:</code> 的HTTP头）会被执行。但是不发送凭证（即，不发送cookie， X.509 证书或者 HTTP Basic 授权）。如果服务器不提供证书给源站点 (不设置 <code>Access-Control-Allow-Origin:</code> HTTP头)，图片会被 <em>污染</em> 并且它的使用会受限。</dd> + <dd>跨域请求（即，使用 <code>Origin:</code> 的 HTTP 头）会被执行。但是不发送凭证（即，不发送 cookie， X.509 证书或者 HTTP Basic 授权）。如果服务器不提供证书给源站点 (不设置 <code>Access-Control-Allow-Origin:</code> HTTP 头)，图片会被 <em>污染</em> 并且它的使用会受限。</dd> <dt>use-credentials</dt> - <dd>跨域请求A cross-origin request (i.e. with <code>Origin:</code> HTTP header) 会被执行，且凭证会被发送 (即， 发送一个 cookie, 一个证书和HTTP Basic授权会被执行)。如果服务器不提供证书给源站点 (通过<code>Access-Control-Allow-Credentials:</code> HTTP 头)，图像会被 <em>污染</em> 且它的使用会受限。</dd> + <dd>跨域请求 A cross-origin request (i.e. with <code>Origin:</code> HTTP header) 会被执行，且凭证会被发送 (即， 发送一个 cookie，一个证书和 HTTP Basic 授权会被执行)。如果服务器不提供证书给源站点 (通过<code>Access-Control-Allow-Credentials:</code> HTTP 头)，图像会被 <em>污染</em> 且它的使用会受限。</dd> </dl> - 不加这个属性时，抓取资源不会走CORS请求(即，不会发送 <code>Origin:</code> HTTP 头)，保证其在 {{HTMLElement('canvas')}} 元素中使用时不会被污染。如果指定非法值，会被当作指定了枚举关键字 <strong>anonymous</strong> 一样使用。 查看 <a href="/zh-CN/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS 设置属性</a> 获取更多信息。</dd> + 不加这个属性时，抓取资源不会走 CORS 请求 (即，不会发送 <code>Origin:</code> HTTP 头)，保证其在 {{HTMLElement('canvas')}} 元素中使用时不会被污染。如果指定非法值，会被当作指定了枚举关键字 <strong>anonymous</strong> 一样使用。 查看 <a href="/zh-CN/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS 设置属性</a> 获取更多信息。</dd> <dt>{{htmlattrdef("currentTime")}}</dt> <dd> - <p>读取<code>CurentTime</code>返回一个双精度浮点值，指示以秒为单位的媒体的当前播放位置。如果video尚未开始播放，则会在开始播放后返回偏移量。通过<code>CurentTime</code>将当前播放位置设置为给定时间，会在加载媒体时将媒体查找到该位置（从指定的位置开始播放）。</p> + <p>读取<code>CurentTime</code>返回一个双精度浮点值，指示以秒为单位的媒体的当前播放位置。如果 video 尚未开始播放，则会在开始播放后返回偏移量。通过<code>CurentTime</code>将当前播放位置设置为给定时间，会在加载媒体时将媒体查找到该位置（从指定的位置开始播放）。</p> - <p>媒体正在播放的情况下，如果媒体缓冲区的数据已经过期（视频已经播放完），则 {{Glossary("user agent")}}有可能无法正常拿到数据。有些媒体可能有一个不以0秒开始的媒体时间线（不是从头开始播放的），因此应该将<code>currentTime</code>的时间设置在其数据失效之前。{{domxref("HTMLMediaElement.getStartDate", "getStartDate()")}} 这个方法可以用来确定媒体时间线起始的坐标。</p> + <p>媒体正在播放的情况下，如果媒体缓冲区的数据已经过期（视频已经播放完），则 {{Glossary("user agent")}}有可能无法正常拿到数据。有些媒体可能有一个不以 0 秒开始的媒体时间线（不是从头开始播放的），因此应该将<code>currentTime</code>的时间设置在其数据失效之前。{{domxref("HTMLMediaElement.getStartDate", "getStartDate()")}} 这个方法可以用来确定媒体时间线起始的坐标。</p> </dd> <dt><code><a href="https://wicg.github.io/picture-in-picture/#disable-pip">disablePictureInPicture</a></code> {{experimental_inline}}</dt> <dd> - <p>防止浏览器建议图片中的上下文菜单或在某些情况下自动请求图片中的图片。该属性可以禁用 <code>video</code> 元素的画中画特性，右键菜单中的“画中画”选项会被禁用</p> + <p>防止浏览器建议图片中的上下文菜单或在某些情况下自动请求图片中的图片。该属性可以禁用 <code>video</code> 元素的画中画特性，右键菜单中的 “画中画” 选项会被禁用</p> </dd> <dt><a href="https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute">{{htmlattrdef("disableRemotePlayback")}} {{experimental_inline}}</a></dt> - <dd>一个布尔属性，用于禁用使用有线连接的设备(HDMI、DVI等)的远程播放功能。无线技术(Miracast、Chromecast、DLNA、AirPlay等)。</dd> + <dd>一个布尔属性，用于禁用使用有线连接的设备 (HDMI、DVI 等) 的远程播放功能。无线技术 (Miracast、Chromecast、DLNA、AirPlay 等)。</dd> <dd> <div class="blockIndicator note"> - <p>在Safari中，您可以使用x-webkit-airplay=“deny”作为后盾。</p> + <p>在 Safari 中，您可以使用 x-webkit-airplay=“deny” 作为后盾。</p> </div> </dd> <dt>{{htmlattrdef("duration")}} {{ReadOnlyInline}}</dt> - <dd>一个双精度浮点值，它指示媒体的持续时间(总长度)，以秒为单位，在媒体的时间线上。如果元素上没有媒体，或者媒体无效，则返回的值为NaN。如果媒体没有已知终点(例如时间未知的实时流、网络广播、来自WebRTC的媒体等等)，那么这个值就是Infinity。</dd> + <dd>一个双精度浮点值，它指示媒体的持续时间 (总长度)，以秒为单位，在媒体的时间线上。如果元素上没有媒体，或者媒体无效，则返回的值为 NaN。如果媒体没有已知终点 (例如时间未知的实时流、网络广播、来自 WebRTC 的媒体等等)，那么这个值就是 Infinity。</dd> <dt>{{htmlattrdef("height")}}</dt> - <dd>视频展示区域的高度，单位是CSS像素。</dd> + <dd>视频展示区域的高度，单位是 CSS 像素。</dd> <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt> <dd> <p>这个属性告诉浏览器忽略图像的实际内在大小，并假装它是属性中指定的大小。具体来说，图像将在这些维度上展开，图像上的<code>naturalWidth</code>/<code>naturalHeight</code> 将返回此属性中指定的值。<a href="https://github.com/WICG/intrinsicsize-attribute">Explainer</a>，<a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">examples</a></p> @@ -138,10 +138,10 @@ translation_of: Web/HTML/Element/video <dt>{{htmlattrdef("loop")}}</dt> <dd>布尔属性；指定后，会在视频结尾的地方，自动返回视频开始的地方。</dd> <dt>{{htmlattrdef("muted")}}</dt> - <dd>布尔属性，指明了视频里的音频的默认设置。设置后，音频会初始化为静音。默认值是false,意味着视频播放的时候音频也会播放 。</dd> + <dd>布尔属性，指明了视频里的音频的默认设置。设置后，音频会初始化为静音。默认值是 false，意味着视频播放的时候音频也会播放 。</dd> <dt>{{htmlattrdef("playsinline")}}</dt> <dd> - <p>一个布尔属性，标志视频将被“inline”播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。</p> + <p>一个布尔属性，标志视频将被 “inline” 播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。</p> </dd> <dt>{{htmlattrdef("played")}}</dt> <dd>一个 {{domxref("TimeRanges")}} 对象，指明了视频已经播放的所有范围。</dd> @@ -154,7 +154,7 @@ translation_of: Web/HTML/Element/video <li><em>空字符串</em>：也就代指 <span style="font-family: courier new;">auto </span>值。</li> </ul> - <p>假如不设置，默认值就是浏览器定义的了 （即，不同浏览器会选择自己的默认值），即使规范建议设置为 <span style="font-family: courier new;">metadata</span>。</p> + <p>假如不设置，默认值就是浏览器定义的了（即，不同浏览器会选择自己的默认值），即使规范建议设置为 <span style="font-family: courier new;">metadata</span>。</p> <div class="note"><strong>使用备注：</strong> @@ -165,14 +165,14 @@ translation_of: Web/HTML/Element/video </div> </dd> <dt>{{htmlattrdef("poster")}}</dt> - <dd>一个海报帧的URL，用于在用户播放或者跳帧之前展示。如果属性未指定，那么在第一帧可用之前什么都不会展示；之后第一帧就像海报帧一样展示。</dd> + <dd>一个海报帧的 URL，用于在用户播放或者跳帧之前展示。如果属性未指定，那么在第一帧可用之前什么都不会展示；之后第一帧就像海报帧一样展示。</dd> <dt>{{htmlattrdef("src")}}</dt> - <dd>要嵌到页面的视频的URL。可选；你也可以使用video块内的 {{HTMLElement("source")}} 元素来指定需要嵌到页面的视频。</dd> + <dd>要嵌到页面的视频的 URL。可选；你也可以使用 video 块内的 {{HTMLElement("source")}} 元素来指定需要嵌到页面的视频。</dd> <dt>{{htmlattrdef("width")}}</dt> - <dd>视频显示区域的宽度，单位是CSS像素。</dd> + <dd>视频显示区域的宽度，单位是 CSS 像素。</dd> </dl> -<p>时间偏移量目前是指定为float类型的值，表示偏移的秒数。</p> +<p>时间偏移量目前是指定为 float 类型的值，表示偏移的秒数。</p> <div class="note"><strong>备注：</strong> HTML 5 规范中，时间偏移量值的定义还没有完成，有可能会变更。</div> @@ -214,15 +214,15 @@ translation_of: Web/HTML/Element/video </tr> <tr> <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td> - <td>媒体内容为空；例如，当这个media已经加载完成（或者部分加载完成）， <a href="/zh-CN/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> 被用来进行重新加载。</td> + <td>媒体内容为空；例如，当这个 media 已经加载完成（或者部分加载完成）， <a href="/zh-CN/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> 被用来进行重新加载。</td> </tr> <tr> <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td> - <td>视频停止，因为media已经到达结束点。</td> + <td>视频停止，因为 media 已经到达结束点。</td> </tr> <tr> <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td> - <td>media中的首帧已经加载。</td> + <td>media 中的首帧已经加载。</td> </tr> </tbody> </table> @@ -232,7 +232,7 @@ translation_of: Web/HTML/Element/video <pre class="brush: html notranslate"><!-- Simple video example --> <video src="videofile.ogg" autoplay poster="posterimage.jpg"> 抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 <a href="videofile.ogg">下载</a> - 并用你喜欢的播放器观看! + 并用你喜欢的播放器观看！ </video> <!-- Video with subtitles --> @@ -248,21 +248,21 @@ translation_of: Web/HTML/Element/video <h2 id="Server_support" name="Server_support">服务器支持</h2> -<p>如果视频的MIME类型设置不正确，视频可能不会显示，或者显示包含一个X的灰色盒子（如果启用了JavaScript的话）。</p> +<p>如果视频的 MIME 类型设置不正确，视频可能不会显示，或者显示包含一个 X 的灰色盒子（如果启用了 JavaScript 的话）。</p> -<p>如果你提供的视频是Ogg Theora格式的，在Apache Web 服务器上， 你可以通过 "/etc/apache" 中的 "mime.types" 文件 或者通过在httpd.conf中的“AddType的”配置指令，把视频文件的扩展名(最常见的是".ogm", ".ogv", or ".ogg")添加到 MIME 类型 "video/ogg"， 来解决这个问题。</p> +<p>如果你提供的视频是 Ogg Theora 格式的，在 Apache Web 服务器上， 你可以通过 "/etc/apache" 中的 "mime.types" 文件 或者通过在 httpd.conf 中的 “AddType 的” 配置指令，把视频文件的扩展名 (最常见的是".ogm", ".ogv", or ".ogg") 添加到 MIME 类型 "video/ogg"， 来解决这个问题。</p> <pre class="notranslate">AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg </pre> -<p>如果你以 WebM 格式提供视频，在Apache Web 服务器上，你可以通过 "/etc/apache" 中的 "mime.types" 文件 或者通过在httpd.conf中的“AddType的”配置指令，把视频文件的扩展名(最常见的是".webm")添加到 MIME 类型 "video/webm"， 来解决这个问题。</p> +<p>如果你以 WebM 格式提供视频，在 Apache Web 服务器上，你可以通过 "/etc/apache" 中的 "mime.types" 文件 或者通过在 httpd.conf 中的 “AddType 的” 配置指令，把视频文件的扩展名 (最常见的是".webm") 添加到 MIME 类型 "video/webm"， 来解决这个问题。</p> <pre class="notranslate">AddType video/webm .webm </pre> -<p>你的web主机可能会提供一个简单的接口来修改MIME类型配置，直到服务器全面升级。</p> +<p>你的 web 主机可能会提供一个简单的接口来修改 MIME 类型配置，直到服务器全面升级。</p> <h2 id="DOM_interface" name="DOM_interface">DOM 接口</h2> @@ -277,12 +277,12 @@ AddType video/ogg .ogg <h2 id="See_also" name="See_also">另请参阅</h2> <ul> - <li><a href="/zh-CN/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">audio和video元素支持的媒体格式</a></li> + <li><a href="/zh-CN/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">audio 和 video 元素支持的媒体格式</a></li> <li>{{htmlelement("audio")}}</li> - <li><a href="/zh-CN/docs/Using_HTML5_audio_and_video" title="Using audio and video in Firefox">使用 HTML5 audio 和video</a></li> - <li><a href="/zh-CN/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">用canvas操作video</a></li> + <li><a href="/zh-CN/docs/Using_HTML5_audio_and_video" title="Using audio and video in Firefox">使用 HTML5 audio 和 video</a></li> + <li><a href="/zh-CN/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">用 canvas 操作 video</a></li> <li><a href="/zh-CN/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li> - <li><a class="external" href="http://tinyvid.tv/">TinyVid</a> - 在HTML5中使用ogg文件的例子。</li> + <li><a class="external" href="http://tinyvid.tv/">TinyVid</a> - 在 HTML5 中使用 ogg 文件的例子。</li> <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video"><code>video</code> 元素</a> (HTML5 规范)</li> <li><a href="/zh-CN/docs/Configuring_servers_for_Ogg_media" title="Configuring servers for Ogg media">Ogg 格式媒体文件的服务器配置</a></li> </ul> diff --git a/files/zh-cn/web/html/element/xmp/index.html b/files/zh-cn/web/html/element/xmp/index.html index 65ae26a90b..d378787337 100644 --- a/files/zh-cn/web/html/element/xmp/index.html +++ b/files/zh-cn/web/html/element/xmp/index.html @@ -12,14 +12,14 @@ translation_of: Web/HTML/Element/xmp <h2 id="Summary" name="Summary">概述</h2> -<p><code><xmp></code> 标签之间的内容不会被当作文档内容解析，而会被用等宽字体直接呈现。HTML2 规范建议，本标签中的内容应该具有足够容纳每行80个字母的宽度。</p> +<p><code><xmp></code> 标签之间的内容不会被当作文档内容解析，而会被用等宽字体直接呈现。HTML2 规范建议，本标签中的内容应该具有足够容纳每行 80 个字母的宽度。</p> -<div class="note"><strong>提示: </strong>请不要使用这个元素。 +<div class="note"><strong>提示：</strong>请不要使用这个元素。 <ul> - <li>从HTML3.2开始反对使用本元素，同时它不再会在之后版本内被推荐使用。在HTML5规范内，本元素已经完全被移除。</li> + <li>从 HTML3.2 开始反对使用本元素，同时它不再会在之后版本内被推荐使用。在 HTML5 规范内，本元素已经完全被移除。</li> <li>建议您使用{{HTMLElement("pre")}} 元素，如果有特殊需求，您可以使用 {{HTMLElement("code")}} 元素。需要您注意的是，使用元素的时候，需要将内容中的"<"转义为"&lt;"，以防止被浏览器当作正常标签解析。</li> - <li>通过<a href="/en-US/docs/CSS" title="CSS">CSS</a>样式表将 {{cssxref("font-family")}} 属性的值设置成为generic-font，可以让任何其他任何标签获得等宽字体的样式。</li> + <li>通过<a href="/en-US/docs/CSS" title="CSS">CSS</a>样式表将 {{cssxref("font-family")}} 属性的值设置成为 generic-font，可以让任何其他任何标签获得等宽字体的样式。</li> </ul> </div> @@ -32,7 +32,7 @@ translation_of: Web/HTML/Element/xmp <p>本元素支持{{domxref('HTMLElement')}} 接口。</p> <div class="note"> -<p><strong>兼容性提示: </strong>Gecko 1.9.2内核及更高版本已经兼容本元素，在火狐浏览器内本元素支持使用{{domxref('HTMLSpanElement')}}接口。</p> +<p><strong>兼容性提示：</strong>Gecko 1.9.2 内核及更高版本已经兼容本元素，在火狐浏览器内本元素支持使用{{domxref('HTMLSpanElement')}}接口。</p> </div> <h2 id="浏览器兼容性">浏览器兼容性</h2> |