F 福 建 电 脑U J I A N C O M P U T E R
福 建 电 脑2018 年第 8 期
HTML5 扩展了许多新技术, 同时对传统 HTML 文档进行
了修改,使文档结构更加清晰明确,容易阅读,增加了许多新的
结构元素,减少了复杂性,这样既方便了浏览者的访问,也提高
了 web 设计人员的开发速度。
一、 认识 HTML5文档结构
HTML5 简化了 HTML 文档结构的复杂性, 让 HTML 的文
档结构更加简洁。
结构代码如下:
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
HTML5 以<! DOCTYPE html>开头, 这是一个文档类型声
明,并且必须位于 HTML5 文档的第一行,它可以用来告诉浏览
器或任何其他分析程序它们所查看的文件类型。 Html 标签是
HTML5 文档的根标签,支持 HTML5 全局属性和 manifest 属性。
Head 标签 是左右头部元素的容器, 位于<head>内部的元素可
以包含脚本、样式表、元信息等,也支持全局属性。 HTML5 中新
增了许多文档结构元素,后面重点介绍。
二、HTML5元素分类
在 HTML5 中, 按照现有的规范标准把它们分为了结构性
元素、级块性元素、行内语义性元素和交互性元素几大类,并新
增了 27 个元素,废弃了 16 个元素。
(1)结构性元素
主要负责页面内容的上下文结构的定义,确保 HTML 文档
的完整性。
section:在 Web 页面中,主要用于内容的章节区分。
header:其中的内容往往不可见,通常用于页面主体上的头
部,和 head 是由区别的,而 header 元素往往在一对 body 元素
之中。
footer:通常包含网站的一些相关信息介绍,一般放在页面
的底部。
nav:用于包含网站导航的内容,通常放在页面上部或左侧
区域。
article:主要用于描述 web 页面的主体内容。
(2)级块性元素
用于 Web 页面区域的划分,确保内容的有效分隔。
aside:主要用于描述补充主体的内容,类似于中文的摘要
等,从一个单页面表示看,就是侧边栏,可以在左边,也可以在
右边。 从一个页面的布局看,就是摘要。
figure:是对多个元素进行组合并展示的元素。
code:表示一段代码块
dialog:通常使用 dt 和 dd 配合,主要用于描述两者之间的
对话,dt 表示说话者,dd 表示说话者的内容。
(3)行内语义元素
该类型元素是为了更好展示 web 页面的内容,是为了更好
完成 web 页面内容的引用和表述。
meter:表示特定范围内的数值,可用于工资、数量、百分比
等。
time:表示时间值
progress:表示进度条。
video:表示视频元素。
audio:表示音频元素。
(4)交互性元素
主要用于功能性的内容表达,会有一定的内容和数据的关
联,是各种事件的基础。
details: 主要用于表示一段必须通过某种手段交互才能显
示出来的内容。
datagrid:必须由动态脚本来控制数据的更新与显示。
menu:主要用于交互菜单
command:用于处理命令按钮。
三、构建主体内容
在 HTML5 中,为了保证文档的结构的清晰明确,大多数的
web 页面都使用了上面介绍的文档结构元素, 下面重点介绍再
构建主体内容的过程中要使用到