HTML参考手册
标签 | Elements
main
HTML Main元素(<main>)呈现了文档<body>
或应用的主体部分。主要内容区域 由 和文档核心主题或应用程序中心功能直接相关与扩展的内容组成。
您可以<main>
在同一页面内使用多个元素,这样做是有道理的。例如,如果您有一个页面呈现多个文章(每个文章都包含在一个<article>
元素中,每个文章都包含一些额外的内容(例如用于编辑的工具栏,广告等等),那么<main>
在每篇文章中包含一个元素以确定该特定文章的主要内容。
内容类别 |
Flow content, palpable content. |
---|---|
允许的内容 |
Flow content. |
标记遗漏 |
没有; 起始和结束标签都是强制性的。 |
允许父级 |
任何接受流内容的元素(WHATWG)。但是,W3C规范不允许将<main>用作<article>,<aside>,<footer>,<header>或<nav>的后代。 |
允许ARIA角色 |
主要角色默认应用于<main>,并且演示角色也是允许的。 |
DOM界面 |
HTML元素 |
属性
这个元素只包含全局属性。
使用说明
<main>
元素的内容应该对元素包含的文档或部分是唯一的。除非搜索表单是页面的主要功能,否则不应包含在一组文档或文档部分(如侧边栏,导航链接,版权信息,站点徽标和搜索表单)中重复的内容。
<main>
对文件大纲没有贡献; 也就是说,不像像元素这样的<body>
标题<h2>
,<main>
并不会影响DOM的页面结构的概念。这是严格的信息。
WHATWG和W3C规范之间的差异
WHATWG的现行标准(MDN规范中使用的规范)和W3C规范<main>
之间的元素定义有很大不同。与上面给出的描述相比,这里是两个规格之间的差异:
- 尽管HTML的WHATWG现行标准允许
<main>
在一个页面中使用多个元素,但W3C版本的规范并不包含这些元素,除非其中一个元素使用该hidden
属性隐藏。
- WHATWG规范允许
<main>
在任何允许流量内容的地方使用。在另一方面,HTML规范的W3C版本不允许<main>
是的后裔<article>
,<aside>
,<footer>
,<header>
,或<nav>
。
这似乎是一个短小的差异,但是这个<main>
元素在功能层面上是相当简单的,所以如果你不记住这些差异的话,那么这些差异的存在会产生重大的后果。
例子
<!-- other content -->
<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>
<!-- other content -->
规范
Specification |
Status |
Comment |
---|---|---|
HTML Living StandardThe definition of '<main>' in that specification. |
Living Standard |
Removed the restriction about using <main> multiple times in a document, or as a descendent of an <article> element. |
HTML 5.1The definition of '<main>' in that specification. |
Recommendation |
No change from HTML5. |
HTML5The definition of '<main>' in that specification. |
Recommendation |
Initial definition. |
浏览器兼容性
The <main>
element is widely supported. For Internet Explorer 11 and below, it is suggested that an ARIA role of "main"
be added to the <main>
element to ensure it is accessible (screen readers like JAWS, used in combination with older versions of Internet Explorer, will be able to understand the semantic meaning of the <main>
element once this role
attribute is included).
<main role="main">
...
</main>
Feature |
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic Support |
26 |
12 |
21 |
No |
16 |
7 |
Feature |
Android |
Chrome for Android |
Edge mobile |
Firefox for Android |
IE mobile |
Opera Android |
iOS Safari |
---|---|---|---|---|---|---|---|
Basic Support |
(Yes) |
(Yes) |
12 |
21 |
No |
(Yes) |
7.1 |
标签 | Elements相关
超文本标记语言,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。