初识HTML5(基础篇)

  • 时间:2018-06-12 19:34 作者:朝圣言web开发 来源:朝圣言web开发 阅读:129
  • 扫一扫,手机访问
摘要:昨天发了一篇干货,似乎没人看,好吧,我们来说说技术吧。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)
最新发布的资讯信息
【系统环境|服务器应用】PHP和Python实战bcrypt算法(2019-02-01 20:47)
【系统环境|服务器应用】PostgreSQL数据库安装Version10.5(2019-02-01 20:47)
【系统环境|服务器应用】Notepad++快速选中多行(2019-02-01 20:47)
【系统环境|服务器应用】Clover支持目录多标签页(2019-02-01 20:47)
【系统环境|服务器应用】计算机视觉 OpenCV Android | Mat像素操作(2019-02-01 20:46)
【系统环境|服务器应用】PHP | 运算符 知识梳理与运用实例(2019-02-01 20:46)
【系统环境|服务器应用】人工智能通识-数学-零基础矩阵运算(2019-02-01 20:46)
【系统环境|服务器应用】Android-打包AAR步骤以及最为关键的注意事项!(2019-02-01 20:46)
【系统环境|服务器应用】回转寿司你肯定吃过!——Android消息机制(构造)(2019-02-01 20:46)
【系统环境|服务器应用】Android中不规则形状View的布局实现(2019-02-01 20:46)
手机二维码手机访问领取大礼包
返回顶部