本文介绍了HTML5中新增的主体结构元素和非主体结构元素，包括article、section、nav、aside等元素的使用方法，以及header、footer、address等元素的应用场景。同时，还讲解了HTML5中的全局属性和新属性。
通过对HTML元素和属性的结构化编排，可以让一个HTML文档清晰地展现在我们面前，而且不同的阅读设备也可以更好地解析文档结构。
在HTML5中，为了更好地编排文档结构，使文档结构更加清晰，新增了许多主体结构元素和非主体结构元素。
一、HTML元素
1.1HTML元素概述
HTML标签是HTML语言中的最基本的单位。
两个尖括号括起来的部分就是一个HTML标签，如<！doctype html>、<html>、<head>、</title>等。HTML有成对出现的标签，如<html></html>，也有单独出现的标签，如<meta>。成对出现的标签中，第一个不带反斜杠的标签称为开始标签，如<html>，第二个带反斜杠的标签称为结束标签，如</html>。HTML的元素是指从开始标签到结束标签的所有代码。
1.2HTML元素的语法
每一个HTML元素都是由HTML标签和元素内容构成的。在HTML开始标签和结束标签之间的内容就是HTML元素的内容。
单独出现的HTML标签叫做空元素，空元素在开始标签的尖括号内使用反斜杠表示结束，例如换行符<br/>。
在HTML元素标签的尖括号内还可以给HTML元素定义属性。如<article id="MyArticle"></article>，<article>元素定义了一个值为"MyArticle"的id属性。
1.3HTML元素的嵌套
一个HTML元素的内容可以是另一个或多个HTML元素，我们将这种现象称为HTML元素的嵌套。例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML元素的嵌套</title>
</head>
<body>
<ul>
<li><h3>第1</h3></li>
<li><h3>第2</h3></li>
<li><h3>第3</h3></li>
</ul>
</body>
</html>
在这段代码中，<html>标签嵌套了一个<head>和<body>标签，<head>标签又嵌套了<meta>和<title>标签，<body>标签嵌套了<ul>标签，<ul>标签又嵌套了三个<li>标签，每个<li>标签又嵌套了一个<h3>标签。
被嵌套的标签必须在开始标签和结束标签之间，不能与嵌套的标签交错出现。
二、HTML5属性
2.1属性的基本使用方法
在HTML元素的开始标签中，使用一个键值对的方式来定义属性。
如：<a href="htpp://www.baidu.com">百度</a>
标签<a>元素的开始标签中，名称为"href"的属性指定了标签<a>跳转的地址是"htpp://www.baidu.com"。
再看下面两段代码：
<input type="checkbox" checked="true" />
<input type="checkbox" checked />
这两段代码都表示一个被勾选的复选框，不同之处在于第一个属性使用checked="true"，第二个属性直接使用checked。在HTML5中，如果属性是一个布尔值，可以直接使用属性名代替属性为true的值，如果不定义属性名，则代表属性值为false。
2.2HTML5全局属性
class属性：
在HTML5中可以使用class属性对元素指定CSS类选择器。使用class属性给<span>元素指定字体大小和颜色的代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>class属性</title>
</head>
<style>
.spanFont{ font-size:24px; }
.spanColor{ color:Red; }
<body>
<span class="spanFont spanColor ">全局属性class</span>
</body>
</html>
id属性：
id属性规定了HTML元素在整个HTML文档中的唯一标识。该属性语法如下：
<element id="value">
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>id属性</title>
<style>
#headerColor{ color:red; }
#contentColor{ color:blue; }
</style>
</head>
<body>
<h1 id="headerColor">这是红色的标题，id为headerColor</h1>
<p id="contentColor">这是蓝色段落的内容，id为contentColor</p>
</body>
</html>
title属性：
title属性用于描述元素的信息，当用户将鼠标悬停到具有该属性的元素上时，会显示title的内容信息。
style属性：
style属性用于规定元素的行内样式，并覆盖任何全局的样式设定。
accesskey属性：
accesskey属性用于给HTML定义快捷键，以便获得焦点或激活元素。例如在一个HTML文档中有两个按钮，其中一个设置了快捷键，另一个没有设置，当按下快捷键时，获得焦点的按钮有一个蓝色的边框，代码如下：
dir属性：
dir属性规定了元素内容的排列方向。该属性对应三个值，如果是从左向右排列，则使用ltr；如果是从右向左排列，则使用rtl；如果根据浏览器内容自动判断，则使用auto。例如：
contextmenu属性：
contextmenu属性是HTML5中新增的属性，用于指定上下文菜单的数据源。当用户指定位置单击鼠标右键时，弹出右键菜单，并显示菜单，可以显示多级菜单。目前只有Firefox浏览器实现了该功能。
draggable属性：
draggable属性是HTML5的一个新属性，用于设置是否可以进行拖拽。draggable的值是一个布尔值，当值为true时可以进行拖拽。
dropzone属性：
dropzone属性是HTML5的一个新属性，用于指定当被拖动的数据在拖动到元素上时，是否被复制、移动或链接。语法如下：
<element dropzone="copy|move|link">
目前还没有任何一款浏览器支持该属性。
2.3新增的主体结构元素
article元素：
article元素用于定义外部的内容，可以是一篇新的文章、一篇博文、一个帖子、一段评论等，也可以是来自其他外部源的内容。一个article元素可以有它自己的标题（header元素）、内容和脚注（footer元素），还可以与其他的article元素嵌套使用。
section元素：
section元素定义文档中的节，比如章节、页眉、页脚或文档中的其他部分。一个section元素通常由内容及其标题组成。不推荐给没有标题的内容使用section元素。
section元素用于表示文章的段，是一个独立的块，而article元素用于表示文章外部的内容。
article元素可以看成是一种特殊的section元素。section元素主要强调分段或者分块，属于内容部分。而article元素则主要强调其完整性。
nav元素：
nav元素用于导航链接的内容，可以作为页面导航的链接组。其中的导航元素链接到其他页面或者当前页面的其他部分。
aside元素：
aside元素用于定义article元素以外的内容，其内容应该与article的内容相关。
aside元素还可以用作文章的侧栏，其内容作为文章的附属信息。例如nav元素导航作为aside元素的内容，这样就实现了一个侧边栏导航条。代码如下：
li{list-style:none;}去掉无序列表前的点
如：
time元素：
time用于定义日期和时间。time元素主要给机器识别，便于搜索引擎和其他一些内容引擎特殊解析和展示，提高开发解析效率。
time元素可以表示带时区的时间，还可以定义多种格式的日期和时间，time元素的datetime属性指定机器读取的日期和时间，time元素的内容显示在网页上，datetime属性中的大写字母T表示时间，Z表示UTC标准时间。
time元素还有一个pubdate属性，表示article元素的发布日期，pubdate属性是一个可选的布尔值。
2.4新增的非主体结构元素
header元素：
header元素用于定义HTML文档的页眉，是一种具有引导和导航作用的结构元素。
header元素通常表示整个页面或者页面内的一个内容区块的标题。通常情况下，一个header元素内嵌一个heading元素（h1~h6）。
hgroup元素：
hgroup元素用于对header元素标题及其子标题进行分组。在使用header元素时，我们通常会嵌入一个heading（h1~h6）元素，如果header元素的标题下还有子标题，这时候就使用hgroup元素对其进行分组。
footer元素：
footer元素用于定义区块的脚注，这个区块可以是aside元素或者section元素。通常情况下，footer元素会包含创作者的姓名，文档的创作时间、联系方式和版权信息等。若footer元素中需要显示联系方式，则应使用address元素。
address元素：
address元素用于定义文档作者或者拥有者的联系信息，包括文档作者或文档维护者的姓名、网站、电子邮件、联系电话等。如果address元素位于article元素内部，则它表示该文章作者或者拥有者的联系信息。通常情况下，address元素应该添加到网页的头部或底部。
2.5HTML5结构
内容区块的编排方式：
内容区块的编排方式可以分为两种，一种是“显示编排”，一种是“隐式编排”。
1.显示编排使用主体结构元素创建文档结构，并配合内容区块使用标题元素，这样浏览器可以明确地显示文档大纲。
2.隐式编排：
隐式编排仅使用标题元素创建文档结构，浏览器通过对标题元素的解析来区分内容区块，不同等级的标题元素对应不同的内容区块。
标题分级：
标题元素可分为6级，h1的级别最高，h6的级别最低。每一个标题元素都对应一个内容区块。在隐式编排中，根据标题元素级别从高到低，自动生成下级内容区块，如果新的标题元素级别等于或高于上一个标题，则生成新的内容区块。
另外，在嵌套使用的文档结构中，不同内容区块可以使用相同级别的标题。
文章参考《从零开始学HTML5+CSS3》胡晓霞等编著。
扫一扫
591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
