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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
---
title: <main>
slug: Web/HTML/Element/main
tags:
- Element
- HTML
- HTML grouping content
- HTML sections
- Reference
- main
- 元素
translation_of: Web/HTML/Element/main
---
<div>{{HTMLRef}}</div>
<p>HTML <strong><code><main></code> 元素</strong>呈现了文档的 {{HTMLElement("body")}} 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-shorter")}}</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>
<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>任何支持流内容但可能不是继承元素的 元素{{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, 或{{HTMLElement("nav")}} </li>
<li><dfn>DOM 接口</dfn> {{domxref("HTMLElement")}}</li>
</ul>
<h2 id="属性">属性</h2>
<p>此元素仅包含<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p>
<h2 id="使用说明">使用说明</h2>
<p>在文档中，<code><main></code> 元素的内容应当是独一无二的。任何同时存在于任意一系列文档中的相同、重复内容，比如侧边栏、导航栏链接、版权信息、网站 Logo，搜索框（除非搜索框为文档的主要功能），都不应当被包含在其内。</p>
<p><code><main></code> 对文档的大纲（outline）没有贡献；也就是说，它与诸如 {{HTMLElement("body")}} 之类的元素，诸如 {{HTMLElement("h2")}} 之类的标题等不同，<code><main></code> 不会影响 {{glossary("DOM", "DOM")}} 的页面结构概念。它仅有提供信息的作用。（原文：It's strictly informative.）</p>
<h2 id="示例">示例</h2>
<pre class="brush: html"><!-- 其他内容 -->
<main>
<h1>Apples</h1>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<article>
<h2>Red Delicious</h2>
<p>These bright red apples are the most common found in many
supermarkets.</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>Granny Smith</h2>
<p>These juicy, green apples make a great filling for
apple pies.</p>
<p>... </p>
<p>... </p>
</article>
</main>
<!-- 其他内容 --></pre>
<h2 id="可访问性相关">可访问性相关</h2>
<h3 id="界标">界标</h3>
<p><code><main></code> 元素的行为与 <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Main_role"><code>main</code> 界标</a>所定义的角色相一致。 <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">界标</a>可被辅助技术使用，以快速识别并将用户导航到文档中的分段。通常使用 <code><main></code> 元素，而不是定义 <code>role="main"</code>，除非是考虑<a href="/zh-CN/docs/Web/HTML/Element/main#Browser_compatibility">对于旧浏览器的兼容性</a>.</p>
<h3 id="直达内容">直达内容</h3>
<p>直达内容（skipnav），是一种辅助功能技术，使其用户可以快速跳过大段的重复内容（如主导航栏、信息横幅等）。这允许用户更快地访问到页面的主要内容。</p>
<p>向 <code><main></code> 元素添加 <a href="/zh-CN/docs/Web/HTML/Global_attributes/id"><code>id</code> 属性</a>后，该元素可成为直达内容链接的目标。</p>
<pre><span class="tag"><body</span><span class="tag">>
<a href="#main-content">Skip to main content</a>
<!-- navigation and header content -->
<main id="main-content">
<!-- main page content -->
</main>
</body></span>
</pre>
<ul>
<li><a href="https://webaim.org/techniques/skipnav/">WebAIM: 直达链接</a></li>
</ul>
<h3 id="阅读器模式">阅读器模式</h3>
<p>浏览器的阅读器模式会寻找文档中的<code>main</code> 元素，以及 <a href="/zh-CN/docs/Web/HTML/Element/Heading_Elements">标题元素</a> 和 <a href="/zh-CN/docs/Web/HTML/Element#Content_sectioning">内容分区元素</a> 以便将内容转换至阅读器视图。</p>
<ul>
<li><a href="https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9">为 Safari 阅读器模式以及其他阅读器应用构建网站</a></li>
</ul>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#semantics.html#the-main-element', '<main>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>No change from {{SpecName('HTML5 W3C')}}.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<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>
<pre class="brush: html"><main role="main">
...
</main>
</pre>
<p>{{Compat("html.elements.main")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>基本结构元素：{{HTMLElement("html")}}、{{HTMLElement("head")}}、{{HTMLElement("body")}}</li>
<li>分段相关元素：{{HTMLElement("article")}}、{{HTMLElement("aside")}}、{{HTMLElement("footer")}}、{{HTMLElement("header")}}, 或 {{HTMLElement("nav")}}</li>
</ul>
|
