初识HTML5(基础篇)

作者 : 开心源码 本文共1136个字,预计阅读时间需要3分钟 发布时间: 2022-05-11 共54人阅读

昨天发了一篇干货,似乎没人看,好吧,我们来说说技术吧。

HTML5专题是随性升级,不肯定每天升级这个专题。

一、结构的精简

一个HTML5文档的最简单结构是:

初识HTML5(基础篇)

结构

相比常规的html更为精简

二、整体文档结构化的代表标签

三、文档结构和语义

1、页眉header、整个页面的头部

初识HTML5(基础篇)

2、正文article、博文或者者新闻的展示

初识HTML5(基础篇)

3、页脚footer、一般使用于呈现页面底部的相关信息,能放在body最下面,也能放在article的最下面,只需记住它的作使用是呈现其余信息,且不可以相互嵌套

初识HTML5(基础篇)

4、导航nav、能出现在header,也能出现在footer,也能出现在section,只需保证语义化,即可使用作导航功可以,如配合footer即可以表示为如下形式

初识HTML5(基础篇)

5、侧边栏aside、使用于页面上少量与主题联络不大而相对独立的区域,通常使用于边栏,例如展现以下内容:快速链接、最多访问、登录注册等

初识HTML5(基础篇)

6、文档中的节section、通常表示一段专题性的内容,一般会带有标题,应使用的典型场景有文章的章节、标签对话框中的标签页、或者者论文中有编号的部分,section能说语义化强于div,但是弱于article,也能这么说吧,article标签是特殊的section,section是特殊的div,语义递减。对于 section 和 article 的区分乍看比较难,其实重点就是看看这段内容脱离了整体是不是还可以作为一个完整的、独立的内容而存在,这里面的重点又在完整身上。由于其实说起来 section 包含的内容也可以算作独立的一块,但是它只可以算是组成整体的一部分,article 才是一个完整的整体。

那么section所使用到的结构能如下几种形式:

初识HTML5(基础篇)

初识HTML5(基础篇)

通过上面能看出,section能应使用的场景很多,但是需要注意的就是保证语义化。

四、文档大纲

通过第三点所列出的标签,能对网站的大纲做一个总结,并不代表正确的大纲就是如此,但是能起到借鉴作使用。

初识HTML5(基础篇)

当然了,页面结构的设计完全取决于开发人员,但是为了更好的表现HTML5的语义化准则,清楚的认识每个标签所代表的语义就很重要,这里所列出的文档结构只是一种代表,在

里面能包含更多的新的标签,诸如

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 初识HTML5(基础篇)

发表回复