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

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 对象触发的事件(应用到 标签):
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

### HTML标签 `header`, `section`, `nav`, `main`, `aside`, `footer` 的用法和区别 #### 1. `<header>` 标签 `<header>` 标签表示文档或某个部分的头部区域,通常包含标题、标志或其他引导性内容。它可以出现在整个文档的顶部,也可以作为某些区块(如文章或章节)的一部分。需要注意的是,一个页面中可以有多个 `<header>` 元素[^2]。 ```html <header> <h1>网站名称</h1> <p>欢迎访问我们的网站</p> </header> ``` --- #### 2. `<section>` 标签 `<section>` 标签用于定义文档中的某一部分或节,通常是具有特定主题的一组相关内容。它常与标题一起使用,以便更清晰地划分内容层次。如果仅仅是样式上的分隔,则应优先考虑使用 `<div>` 而非 `<section>`[^4]。 ```html <section> <h2>关于公司</h2> <p>我们是一家专注于技术开发的企业。</p> </section> ``` --- #### 3. `<nav>` 标签 `<nav>` 标签专门用于定义导航链接集合的部分,适合放置主导航菜单或者其他重要的跳转链接列表。虽然理论上可以在任何地方使用 `<nav>`,但在实际项目中建议仅限于主要导航用途[^2]。 ```html <nav> <ul> <li><a href="#home">首页</a></li> <li><a href="#about">关于我们</a></li> <li><a href="#contact">联系我们</a></li> </ul> </nav> ``` --- #### 4. `<main>` 标签 `<main>` 标签代表当前文档的主要内容区域,强调这是页面的核心部分。每个页面最多只能有一个 `<main>` 元素,并且不应嵌套在其他辅助性的结构标签内(例如 `<aside>` 或者 `<footer>` 中)。此标签有助于提高无障碍性和搜索引擎优化效果[^4]。 ```html <main> <article> <h2>最新动态</h2> <p>今天发布了新产品...</p> </article> </main> ``` --- #### 5. `<aside>` 标签 `<aside>` 标签用来标注主体内容旁边附加的信息块,比如侧边栏广告、推荐阅读等内容。这些信息应该与主干有一定关联但又不是核心重点[^4]。 ```html <aside> <h3>热门话题</h3> <ul> <li><a href="#">如何学习编程?</a></li> <li><a href="#">前端框架对比分析</a></li> </ul> </aside> ``` --- #### 6. `<footer>` 标签 `<footer>` 标签用于定义文档或部分内容的尾部信息,包括版权声明、联系方式等补充性质的数据。类似于 `<header>`,同样允许存在多个实例分布在整个布局之中。 ```html <footer> <p>© 2023 我们的公司保留所有权利.</p> <address> 地址:<br /> 邮箱:example@example.com<br /> 电话:+86 xxxxxxxxxx </address> </footer> ``` --- ### 总结比较 | **标签** | **功能描述** | |--------------|--------------------------------------------------------------------------------------------------| | `<header>` | 表示文档或分区的开头部分 | | `<section>` | 划分子模块,需配合适当标题 | | `<nav>` | 提供一组导航链接 | | `<main>` | 页面主要内容所在 | | `<aside>` | 边缘信息展示,如侧边栏 | | `<footer>` | 文档或分区结束处的信息 | 以上六个语义化标签共同构成了现代 Web 开发的基础架构体系,合理运用它们能够增强代码可读性和维护效率的同时也利于 SEO 和 ARIA 支持。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值