首页 » 编程语言 » html » 正文

HTML5标签:section元素的使用方法及作用

html元素中section标签是html5中新增的标签,主要用于定义文档页面中“节”或“段”的区块,下面,我们就详细了解一下<section> 标签的使用方法及作用。

<section> 标签定义

<section> 标签定义的是页面中的节或段的区块;

<section> 标签定义的内容区块通常由标题和内容两部分组成;

<section> 标签定义页面的某个区块,可以是章节、区段、头部页眉、底部页脚或页面其他区块;

<section> 标签在一个页面中可以出现多次,表示一组相似的主题内容区块;

<section> 标签是 HTML 5 中的新标签

浏览器支持情况

<section> 标签已被IE 9+、Firefox、Opera、Chrome 和 Safari浏览器支持 ;

但 IE 8 或更早版本的 IE 浏览器不支持 <section> 标签。

<section> 标签用法

<section>标签代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面中的分组。<section>标签不管是在“节”或“段”中,通常还使用标题h1~h6;

1、<section> 标签简单用法

一个<section>标签内,通常包含标题和内容两部分,演示代码如下:

<section> 
   <h1>标题部分</h1> 
   <p>内容部分</p> 
</section>

 <section>标签通常在带有标题的内容区块使用,所以,在没有标题的内容区块不建议使用section标签;

 <section>标签所包裹的通常是一组相似主题的内容,所以, 在一个页面中,往往会不止出现一次<section>标签。

3、<section>嵌套在<article>内

可以将<section> 嵌套在 <article> 中,用来将一篇文章、一篇新闻报道、一篇博客等文章的不同部分或不同章节。

<article>    
   <header>文章article头部区域
   </header>    
   <section>        
      <h1>第一个区段</h2>       
      <p>第一个区段内容</p>    
   </section>    
   <section>       
      <h2>第二个区段</h2>       
      <p>第二个区段内容</p>     
   </section>
   <section>       
     <h3>第三个区段</h4>       
     <p>第三个区段内容</p>     
   </section>
</article>

每个<section>标签区块的主题或结构是相似的,正好体现了<section>标签是定义页面中一组“节区块"或“段区块”。

3、<section> 标签使用注意

article、nav、aside可以理解为特殊的section,所以如果可以用article、nav、aside就不要用section,没实际意义的就用div;



欢迎您发表评论或留言