HTML5 基础(002_<section> 标签)

section 元素 (<section>) 表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会包含一个标题(heading)。

使用section 元素 (<section>)结构化html5页面中的内容:

<!-- 示例1 -->
<article>
        <hgroup>
            <h1>The Guitar Gallery</h1>
            <h2>Lots of groovy guitars</h2>
        </hgroup>

        <section>
            <h2>Fenders</h2>
            <p>Are you a Fender guy or a Gibson gal? Well if it’s good enough
                for Jimi, it’s good enough for me!</p>
            <p>[…]</p>
            <h3>The first Fender Guitars</h3>
            <p>[…]</p>
        </section>

        <section>
            <h2>Gibson</h2>
            <p>I want an SG but don’t want to take out a mortgage, Dear
                Abby.. got a problem</p>
            <p>More about my feelings of deprivation due to lack of antique
                Gibson guitars[…]</p>
        </section>

        <section>
            <h2>Acoustic Dreams</h2>
            <p>For the softer moments we have nylon acoustic guitarts</p>
            <p>Well, I really like John Fahey and Leo Kottke, […]</p>
            <h3>What kind of guitar did Robbie Basho play??</h3>
        </section>
    </article>

<!-- 示例2 -->
<!-- 使用div元素 -->
<div>
    <h2>Heading</h2>
    <img src="bird.jpg" alt="bird">
</div>

<!-- 使用section元素 -->
<section>
    <h2>Heading</h2>
    <img src="bird.jpg" alt="bird">
</section>

section 元素 (<section>)支持的属性(attributes):该元素只包含全局属性(the global attributes)。

全局属性:即任何 html 元素均包含的属性。
html 属性赋予元素意义和语境。以下全局属性可用于任何 html 元素:

全局属性

section 元素 (<section>)支持的事件属性(下面列出了添加到 html 元素以定义事件动作的全局事件属性):

Window 事件属性
针对 window 对象触发的事件(应用到 标签):
Window 事件属性

Form 事件
由 html 表单内的动作触发的事件(应用到几乎所有 html 元素,但最常用在 form 元素中):
Form 事件

Keyboard 事件
Keyboard 事件

Mouse 事件
由鼠标或类似用户动作触发的事件:
Mouse 事件

Media 事件
由媒介(比如视频、图像和音频)触发的事件(适用于所有 html 元素,但常见于媒介元素中,比如 <audio>、<embed>、<img>、<object> 以及 <video>):
Media 事件

浏览器支持:
IE 9+、Firefox、Opera、Chrome 和 Safari(主流浏览器目前均支持<section>标签)

参考网址:
http://www.w3school.com.cn/tags/tag_section.asp(w3school)
http://www.w3school.com.cn/tags/html_ref_eventattributes.asp(w3school)
https://www.w3.org/WAI/GL/wiki/Techniques/HTML5

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值