初识HTML5(基础篇)

  • 时间:2018-06-12 19:34 作者:朝圣言web开发 来源:朝圣言web开发 阅读:210
  • 扫一扫,手机访问
摘要:昨天发了一篇干货,似乎没人看,好吧,我们来说说技术吧。HTML5专题是随性升级,不肯定每天升级这个专题。一、结构的精简一个HTML5文档的最简单结构是:结构相比常规的html更为精简二、整体文档结构化的代表标签 三、文档结构和语义1、页眉header、整个页面的头部2、正文article、博文或者者

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

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的语义化准则,清楚的认识每个标签所代表的语义就很重要,这里所列出的文档结构只是一种代表,在

里面能包含更多的新的标签,诸如
  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
【系统环境|服务器应用】17、改进轮播图之功能封装(2019-08-22 04:15)
【系统环境|服务器应用】第10题- 你不知道的delete操作符(2019-08-22 04:15)
手机二维码手机访问领取大礼包
返回顶部