1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
---
title: <meta>：文档级元数据元素
slug: Web/HTML/Element/meta
tags:
- HTML
- metadata
- 元数据
- 元素
translation_of: Web/HTML/Element/meta
---
<div>{{HTMLRef}}</div>
<p><strong>HTML <code><meta></code> 元素</strong>表示那些不能由其它 HTML 元相关（meta-related）元素（({{HTMLElement("base")}}、{{HTMLElement("link")}}, {{HTMLElement("script")}}、{{HTMLElement("style")}} 或 {{HTMLElement("title")}}）之一表示的任何{{Glossary("Metadata","元数据")}}信息。</p>
<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></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>
<li><dfn>DOM 接口</dfn> {{domxref("HTMLMetaElement")}}</li>
</ul>
<p><code>meta</code> 元素定义的元数据的类型包括以下几种：</p>
<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("charset", "meta")}} 属性，<code>meta</code> 元素是一个字符集声明，告诉文档使用哪种字符编码。</li>
<li>如果设置了 {{htmlattrxref("itemprop")}} 属性，<code>meta</code> 元素提供用户定义的元数据。</li>
</ul>
<h2 id="属性">属性</h2>
<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>
</div>
<p><strong>{{htmlattrdef("charset")}}</strong></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头部的名称，如下：
<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="https://wiki.developer.mozilla.org/en-US/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>
<li>
<p><code>x-ua-compatible</code><br>
如果指定，则 <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>
</ul>
</li>
</ul>
<h5 id="可访问性相关考虑">可访问性相关考虑</h5>
<p>设置了 <code>refresh</code> 值的页面可能有时间间隔太短的风险。使用诸如屏幕朗读这样的辅助技术来浏览网页的人可能会由于自动跳转而来不及读完或理解网页的内容。这样不经提示而突然进行的页面刷新也可能会让有视力障碍的人群感到迷惑。</p>
<ul>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.1 explanations</a></li>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_%E2%80%94_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.1 explanations</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0</a></li>
</ul>
</dd>
<dt>{{htmlattrdef("name")}}</dt>
<dd><code>name</code> 和 <code>content</code> 属性可以一起使用，以名-值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。</dd>
<dd>在<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name">标准元数据名称</a>中查看 HTML 规范等规范中定义的标准元数据名称。</dd>
</dl>
<h2 id="示例">示例</h2>
<pre class="notranslate"><meta charset="utf-8">
<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
</pre>
<h2 id="规范">规范</h2>
<table>
<thead>
<tr>
<th scope="col"><strong>规范</strong></th>
<th scope="col"><strong>状态</strong></th>
<th scope="col"><strong>注释</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>{{Compat("html.elements.meta")}}</div>
|
