initial commit

1 files changed, 150 insertions, 0 deletions

diff --git a/files/zh-cn/web/html/element/main/index.html b/files/zh-cn/web/html/element/main/index.html
new file mode 100644
index 0000000000..adb55545df
--- /dev/null
+++ b/files/zh-cn/web/html/element/main/index.html
@@ -0,0 +1,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>&lt;main&gt;</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>&lt;main&gt;</code> 元素的内容应当是独一无二的。任何同时存在于任意一系列文档中的相同、重复内容，比如侧边栏、导航栏链接、版权信息、网站 Logo，搜索框（除非搜索框为文档的主要功能），都不应当被包含在其内。</p>
+
+<p><code>&lt;main&gt;</code> 对文档的大纲（outline）没有贡献；也就是说，它与诸如 {{HTMLElement("body")}} 之类的元素，诸如 {{HTMLElement("h2")}} 之类的标题等不同，<code>&lt;main&gt;</code> 不会影响 {{glossary("DOM", "DOM")}} 的页面结构概念。它仅有提供信息的作用。（原文：It's strictly informative.）</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: html">&lt;!-- 其他内容 --&gt;
+
+&lt;main&gt;
+  &lt;h1&gt;Apples&lt;/h1&gt;
+  &lt;p&gt;The apple is the pomaceous fruit of the apple tree.&lt;/p&gt;
+
+  &lt;article&gt;
+    &lt;h2&gt;Red Delicious&lt;/h2&gt;
+    &lt;p&gt;These bright red apples are the most common found in many
+    supermarkets.&lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+  &lt;/article&gt;
+
+  &lt;article&gt;
+    &lt;h2&gt;Granny Smith&lt;/h2&gt;
+    &lt;p&gt;These juicy, green apples make a great filling for
+    apple pies.&lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+  &lt;/article&gt;
+
+&lt;/main&gt;
+
+&lt;!-- 其他内容 --&gt;</pre>
+
+<h2 id="可访问性相关">可访问性相关</h2>
+
+<h3 id="界标">界标</h3>
+
+<p><code>&lt;main&gt;</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>&lt;main&gt;</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>&lt;main&gt;</code> 元素添加 <a href="/zh-CN/docs/Web/HTML/Global_attributes/id"><code>id</code> 属性</a>后，该元素可成为直达内容链接的目标。</p>
+
+<pre><span class="tag">&lt;body</span><span class="tag">&gt;
+  &lt;a href="#main-content"&gt;Skip to main content&lt;/a&gt;
+
+  &lt;!-- navigation and header content --&gt;
+
+  &lt;main id="main-content"&gt;
+    &lt;!-- main page content --&gt;
+  &lt;/main&gt;
+&lt;/body&gt;</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', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</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', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<p><code>&lt;main&gt;</code> 标签受广泛支持。对于IE浏览器11版本和低于11的版本，推荐向 <code>&lt;main&gt;</code> 元素添加  <code>"main" 这一</code> {{glossary("ARIA")}} 角色，以保证其可访问性。(屏幕阅读器，如 JAWS，当与较旧版本的 Internet Explorer 一起使用时，需包括此 <code>role</code> 属性才能理解 <code>&lt;main&gt;</code> 元素的语义含义）</p>
+
+<pre class="brush: html">&lt;main role="main"&gt;
+  ...
+&lt;/main&gt;
+</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>