From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/html/element/main/index.html | 150 +++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 files/zh-cn/web/html/element/main/index.html (limited to 'files/zh-cn/web/html/element/main') 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:
+slug: Web/HTML/Element/main +tags: + - Element + - HTML + - HTML grouping content + - HTML sections + - Reference + - main + - 元素 +translation_of: Web/HTML/Element/main +--- +
{{HTMLRef}}
+ +

HTML <main> 元素呈现了文档的 {{HTMLElement("body")}} 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

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

属性

+ +

此元素仅包含全局属性。

+ +

使用说明

+ +

在文档中，<main> 元素的内容应当是独一无二的。任何同时存在于任意一系列文档中的相同、重复内容，比如侧边栏、导航栏链接、版权信息、网站 Logo，搜索框（除非搜索框为文档的主要功能），都不应当被包含在其内。

+ +

<main> 对文档的大纲（outline）没有贡献；也就是说，它与诸如 {{HTMLElement("body")}} 之类的元素，诸如 {{HTMLElement("h2")}} 之类的标题等不同，<main> 不会影响 {{glossary("DOM", "DOM")}} 的页面结构概念。它仅有提供信息的作用。（原文：It's strictly informative.）

+ +

示例

+ +
<!-- 其他内容 -->
+
+<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>
+
+<!-- 其他内容 -->
+ +

可访问性相关

+ +

界标

+ +

<main> 元素的行为与 main 界标所定义的角色相一致。 界标可被辅助技术使用，以快速识别并将用户导航到文档中的分段。通常使用 <main> 元素，而不是定义 role="main"，除非是考虑对于旧浏览器的兼容性.

+ +

直达内容

+ +

直达内容（skipnav），是一种辅助功能技术，使其用户可以快速跳过大段的重复内容（如主导航栏、信息横幅等）。这允许用户更快地访问到页面的主要内容。

+ +

向 <main> 元素添加 id 属性后，该元素可成为直达内容链接的目标。

+ +
<body>
+  <a href="#main-content">Skip to main content</a>
+
+  <!-- navigation and header content -->
+
+  <main id="main-content">
+    <!-- main page content -->
+  </main>
+</body>
+
+ + + +

阅读器模式

+ +

浏览器的阅读器模式会寻找文档中的main 元素，以及 标题元素 和 内容分区元素 以便将内容转换至阅读器视图。

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', '#semantics.html#the-main-element', '<main>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}}{{Spec2('HTML5.1')}}No change from {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

浏览器兼容性

+ +

<main> 标签受广泛支持。对于IE浏览器11版本和低于11的版本，推荐向 <main> 元素添加  "main" 这一 {{glossary("ARIA")}} 角色，以保证其可访问性。(屏幕阅读器，如 JAWS，当与较旧版本的 Internet Explorer 一起使用时，需包括此 role 属性才能理解 <main> 元素的语义含义）

+ +
<main role="main">
+  ...
+</main>
+
+ + + +

{{Compat("html.elements.main")}}

+ +

参见

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