HTML5 基础（002_<section> 标签）

最新推荐文章于 2025-01-01 17:59:48 发布

柯南道尔2606

最新推荐文章于 2025-01-01 17:59:48 发布

阅读量788

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： html5

本文链接：https://blog.youkuaiyun.com/Google2606/article/details/52437797

html5 专栏收录该内容

6 篇文章

订阅专栏

HTML5的<section>标签用于定义文档的一个区域或节，通常包含一个相关主题的标题。它支持全局属性，并能响应多种事件，如Window、Form、Keyboard和Mouse事件。主流浏览器均支持<section>标签，有助于页面内容的结构化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 对象触发的事件（应用到标签）：

Form 事件
由 html 表单内的动作触发的事件（应用到几乎所有 html 元素，但最常用在 form 元素中）：

Keyboard 事件

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

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

浏览器支持：
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