学做网站培训课程介绍

当前位置:

HTML5之main标签

main标签是HTML5新出的一个标签,它是用来表达document中的body的主要内容,但不能在一个document中有多个main,不能在article,aside,footer,header或者nav中包含main。

main标签使用举例:


<main>
<h1>Skateboards</h1>
 <article>  
<h2>Longboards</h2>  
 </article>
</main>

html5 main标签的定义和作用:

<main> 标签规定文档的主要内容。

<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。

注释:在一个文档中,不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代:<article>、<aside>、<footer>、<header> 或 <nav>。

<main> 标签是 HTML 5 中的新标签。

早在 2013 年,<main> 元素就被正式添加到 W3C HTML 规范中,到目前为止,关于该元素的定义已经很完善了,所以现在是时候深入了解什么时候适合使用 <main> 元素了。那么,下面就开始吧。

W3C 规范

<main> 的主要目的是将 ARIA 的地标性作用 main 映射到 HTML 中的元素。这可以帮助那些屏幕阅读设备和辅助设备知道页面的主要内容是从哪里开始的。

W3C 规范将 <main> 描述为 :

文档或应用程序的主要内容。主内容区域由与文档的中心主题或应用的核心功能的直接相关或扩展的内容组成。

自从 <main> 元素包含在 HTML 规定里之后,<body> 元素就还原成了它在 HTML4 中的定义。

The body element represents the content of the document.

html5 main标签具体使用的作用:

使用 <main> 元素值得注意的一点是,它在每个页面中只能使用一次。为什么要规定一个页面只能使用一次呢?虽然我对具体的细节并不感兴趣,但是有些观点看起来还是比较有意义的。

按照规格,如果你在一个文档中试图使用多个 <main> 标签,那么 W3C validator 会抛出错误。

<main> 元素的另外一个规定是,它不能作为 <article>, <header>, <aside>, <footer>, <nav> 的子元素节点。

html5 main标签的具体使用:

就像其它的 HTML5 新元素一样,并不是所有的浏览器都能够识别出 <main> ,并且给它加上预设的样式,你可能需要在自己的 CSS 文件中将它设置为块级元素。


main {display:block;}

有的时候,为了支持一些较低版本的 IE 浏览器,你可能还需要使用 JavaScript 创建该元素。


<script type="text/javascript">document.createElement('main');</script>

当然了,你还可以使用 html5shiv.

使用 <main> 元素最简单的方式就是去替换那些 ID 或者 Class 值为 main 或者 content 之类的 <div> 元素。

所以,在实践中它应该是什么样子呢?下面是使用 <main> 元素之前的文档结构。


<header>Header</header>
<div id="content">Main Content</div>
<footer>Footer</footer>

下面使用 <main> 元素改写文档。


<header>Header</header>
<main id="content">Main Content</main>
<footer>Footer</footer>

好了,这是如此的简单,以至于一分钟不到我们就可以将文档改写成新潮的 HTML5 样式。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • canvas是html5中比较重要的一个标签,canvas的实现需要借助原生态的js特效代码才能很好的展示出来。今天学做网站论坛就给大家讲一讲如何使用html5中ca
  • HTML5之main标签 (115511 次浏览)
    main标签是HTML5新出的一个标签,它是用来表达document中的body的主要内容,但不能在一个document中有多个main,不能在article,aside,footer,header或
  • HTML 文本格式化:使用 pre 标签对空行和空格进行控制。“计算机输出”标签:这些标签常用于显示计算机/编程代码。引用标签:使用 blockquote
  • HTML文字倾斜标签是什么 (134355 次浏览)
    HTML文字倾斜标签是什么?我们在做网站时,有的文字需要倾斜显示,这时就需要使用HTML文字倾斜标签了。HTML斜体标签:HTML 斜体标签元素知识与