HTML5学习笔记(一)—— HTML5的结构

本文介绍了HTML5中新增的结构元素,如article、section、nav、aside、time等,详细阐述了它们的作用和应用场景。article代表独立内容,section用于内容分块,nav用于导航链接,aside提供附属信息,time则用于日期和时间的编码。同时,文章讨论了header、hgroup、footer、address元素以及大纲的显式和隐式编排。

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

1.为了使得文档结构更加清晰明确、容易阅读,HTML5增加了很多新的结构元素。


2.article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容,可以嵌套使用。section元素用户对网站或者应用程序的页面的内容进行分块。但section元素并非一个普通的容器元素;当一个容器需要被直接定义样式或者通过脚本定义行为时,推荐使用div元素而非section元素。如果一个内容没有标题,则不推荐使用section元素。

section元素的作用是对页面时的内容进行分块,或者对文章进行分段,而article元素有着自己的完整的、独立的内容。其实,article元素可以看成是一种特殊种类的section元素,它比section元素更强调独立性,即section元素强调分块或者分段,而article强调独立性,而div在html5中变成了一种容器,当使用css样式的时候,可以对这个容器进行一个总体的css的套用。


3.nav元素

nav元素是一个可以用作页面导航的链接组,并需要将所有的链接组放进nav元素,只需要将主要的基本的链接组放进nav元素即可。一个页面中可以拥有多个nav元素,作为页面整体或不同部分的导航。

具体莱索,nav元素可以用于以下这些场合:

传统导航条;侧边栏导航;页内导航;翻页操作


4.aside元素

用来表示当前页面或者文档的附属部分信息。主要有2种使用方法:

1)被包含在article元素中作为主要内容的附属信息部分

2)在article元素之外使用,作为页面或站点全局的附属信息部分


5.time元素与微格式

微格式:利用HTML的class属性来对网页添加附加信息的方法,如果日期时间、个人电话号码等。

time元素:无歧义地、明确地对机器的日期和时间进行编码,并且以让人易读的方式来展现它。


6.pubdate属性

一个可选的、boolean值的属性,可以用到article元素中的time元素上,用来标识哪个才是正式的时间


7.header元素

一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,也可以是其他内容。


8.hgroup元素

将标题及其子标题进行分组的元素;如果文章只有一个主标题,是不需要hgroup元素的;但是,如果文章有主标题,主标题下有子标题,就需要使用hgroup元素了。


9.footer元素

作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息,如作者、相关阅读链接及版权信息等。一个页面中可以有多个footer元素,同时,可以为article元素或者section元素添加footer元素。


10.address元素

用来在文档中呈现联系信息,不只是用来呈现电子邮箱或真实地址,还应用来展示跟文档相关的联系人的所有联系信息。


11.所谓大纲,简单来说就是文档中各内容区块的结构编排。可以分为显式编排和隐式编排2种方式。

显式编排:明确使用section元素创建文档结构,在每个内容区块内使用标题

隐式编排:不明确使用section等元素,根据页面中所书写的各级标题等把内容区块自动创建出来。

隐式编排容易让自动生成的整个文档结构和想要的文档结构不一样,而且也容易引起文档结构的混乱,因此需要尽量使用显示编排。

不同的内容区块可以使用相同级别的标题。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值