下列是html 5文档结构元素的是,浅谈HTML5中文档结构元素

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 页面都使用了上面介绍的文档结构元素， 下面重点介绍再

构建主体内容的过程中要使用到