html5新增标签

header,section,footer,aside,nav,main,article,figure所有的这些元素都是块级元素

1.nav标签

<nav> 标签定义导航链接的部分。

<nav>    
  <a href="#">python</a>    
  <a href="#">linux</a>   
  <a href="#">web前端</a>    
  <a href="#">Java</a>    
  <a href="#">Go</a>
</nav>

 

2.header标签

header标签定义文档的头部区域，它是作为网页的头部介绍内容或者是导航链接栏的容器。在一个文档中，你可以定义多个header元素

注意：header标签不能被放在footer、address或者另一个header元素内部

 

3.main标签

标签规定文档的主要内容。一个文档中只有一个main元素。

 

4.aside标签

aside标签定义article标签外的内容。aside的内容应该与附近的内容相关

 

5.section标签

section标签定义了文档的某个区域。比如章节、头部、顶部或者文档的其他区域

<section>
    <h2>小猿圈重大新闻</h2>
    <p>
        本阶段讲解HTML5+CSS3部分，下个阶段老师开始做直播课。欢迎大家光临。小猿圈上的视频全部免费
    </p>
</section>

比如这个网站aside侧边栏中定制了三个section

 

6.article标签

定义页面独立的内容。必须是独立于文档的其余部分。

article通常都应用在：

• 论坛帖子
• 博客文档
• 新闻故事
• 评论

 

7.figure标签

figure标签规定独立的流内容(图像、图标、照片、代码等)

figure元素的内容应该与主内容有关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响

<figure>
  <img src="flower.jpg" alt="My 女神" width="304" height="228">
  <figcaption>我的女神照</figcaption>
</figure>

 

8.footer标签

定义文档或者文档一部分区域的页脚。该元素会包含文档闯作业的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，可以定义多个footer。

比如小猿圈的底部就是用footer

 

其它的新语义化标签

mark

高亮文本标签

<p>
    元素用于<mark>高亮</mark> 文本
</p>

 

progress

用来显示一项任务的完成进度。

属性：

• max 最大值
• value 当前进度

<progress value="70" max="100">70 %</progress>

 

address

个人或者某个组织的联系信息等等

<address>
  <a href="mailto:jim@rock.com">mjj67890@163.com</a><br>
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>

 

以上标签都是我们在网页中常见到的。还有很少可以在网页中见到的HTML5新标签。