• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <section>

    版本:HTML5

    HTML<section>元素表示一个包含在HTML文档中的独立部分,它没有更具体的语义元素来表示,一般来说会有包含一个标题。例如,导航菜单应该包含在<nav>元素中,但搜索结果列表和地图显示及其控件没有特定元素,可以放在<section>里。注意:如果元素的内容作为一个独立的有意义的集合,<article>元素可能是更好的选择。

    浏览器支持

    IE 9+、Firefox、Opera、Chrome 和 Safari <section>标签。
    注释:IE 8 或更早版本的 IE 浏览器不支持<section>标签。

    范例1:

    之前

    <div>
      <h1>heading</h1>
      <p>bunch of awesome content</p>
    </div>

    之后

    <section>
      <h1>heading</h1>
      <p>bunch of awesome content</p>
    </section>
    

    范例2:

    之前

    <div>
      <h2>heading</h2>
      <img src="bird.jpg" alt="bird">
    </div>

    之后

    <section>
      <h2>heading</h2>
      <img src="bird.jpg" alt="bird">
    </section>
    

    标签定义

    <section>标签定义了文档的某个区域节(section)。比如章节、页眉、页脚或者文档的其他区域。

    使用说明

    • 一般通过是否包含一个标题(<h1>-<h6>element)作为子节点来辨识每一个<section>
    • 如果元素内容可以分为几个部分的话,应该使用<article>而不是<section>
    • 不要把<section>元素作为一个普通的容器来使用,这是本应该是<div>的用法(特别是当片段(the sectioning )仅仅是为了美化样式的时候)。一般来说,一个<section>应该出现在文档大纲中。
    内容分类流式内容元素,章节内容元素,可触摸内容元素.
    允许的内容流式内容元素
    标签省略不允许,开始标签和结束标签都不能省略。
    允许的父元素所有接受流式内容的元素。 Note that a<section>element must not be a descendant of an<address>element.
    允许的 ARIA rolesalert,alertdialog,application,banner,complementary,contentinfo,dialog,document,feed,log,main,marquee,navigation,search,status,tabpanel
    DOM 接口HTMLElement

    HTML 4.01 与 HTML5之间的差异

    <section>标签是 HTML5 中的新标签。

    属性

    此元素只包含全局属性

    全局属性

    <section>标签支持HTML 的全局属性。

    标准全局属性

    class,contenteditable,contextmenu,dir,draggable,id,irrelevant,lang,ref,registrationmark,tabindex,template,title

    事件属性

    <section>标签支持HTML 的事件属性。

    标准事件属性

    onabort,onbeforeunload,onblur,onchange,onclick,oncontextmenu,ondblclick,ondrag,ondragend,ondragenter,ondragleave,ondragover,ondragstart,ondrop,onerror,onfocus,onkeydown,onkeypress,onkeyup,onload,onmessage,onmousedown,onmousemove,onmouseover,onmouseout,onmouseup,onmousewheel,onresize,onscroll,onselect,onsubmit,onunload

    实例

    文档的某个区域,解释了什么是 WWF :

    <section>
    	<h1>wwf</h1>
    	<p>the world wide fund for nature (wwf) is....</p>
    </section>
    

    上篇:<nav>

    下篇:<main>