HTML5 中的节段和提纲

本文介绍了HTML5中关键的结构元素,包括<header>、<nav>、<article>、<section>、<footer>和<aside>的用途及正确用法,并强调了这些元素在网页布局中的作用。

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

HTML5 中的节段和提纲:


<header>元素表示一组引导性的帮助,可能包含标题元素,也可以包含其他元素,像logo、分节头部、搜索表单等。

使用说明:

                <header>元素不是分节内容,所以不会引入新的分节到大纲中。


<nav>导航栏描绘一个含有多个超链接的区域,这个区域包含转到其他页面,或者页面内部其他部分的链接列表.

使用说明:

               并不是所有的链接都必须使用<nav>元素,它只用来将一些热门的链接放入导航栏,例如<footer>元素就常用来在页面底部包含一个不常用到,没必要加入<nav>的链接列                    表.
               一个网页也可能含有多个<nav>元素,例如一个是网站内的导航列表,另一个是本页面内的导航列表.
               对于屏幕阅读障碍的人,可以使用这个元素来确定是否忽略初始内容.

<article>元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的                   评论、交互式组件,或者其他独立的内容项目。

使用说明:

               当<article>元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。
               <article>元素的作者信息可通过<address>元素提供,但是不适用于嵌套的<article>元素。
              <article>元素的发布日期和时间可通过<time>元素的pubdate属性表示。


<section>元素表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会有包含一个标题(heading)。一般通过是否包含一个标题 (<h1>-<h6> element) 作                     为子节点 来 辨识每一个<section>。

使用提醒:

               如果元素内容可以分为几个部分的话,应该使用 <article> 而不是 <section>。

              不要把 <section> 元素作为一个普通的容器来使用,这是本应该是<div>的用法(特别是当片段(the sectioning )仅仅是为了美化样式的时候)。 一般来说,一个                       <section> 应该出现在文档大纲中。


<footer> 元素表示最近一个章节内容或者根节点(sectioning root )元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

使用说明:

               <footer>元素内的作者信息应包含在<address> 元素中。
               <footer>元素不是章节内容,因此在outline中不能包含新的章节。


<aside> 元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。                 他们通常包含在工具条,例如来自词汇表的定义。也可能有其他类型的信息,例如相关的广告、笔者的传记、web 应用程序、个人资料信息,或在博客上的相关链                       接。

使用提醒:

             不要将 <aside> 元素去标记括号内的文本,因为这种类型的文本(即括号内的文本)被认为是其内容流的一部分。



下面这张图可以借鉴来理解一下:



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值