下载掌阅APP，畅读海量书库
立即打开
除了前面几节介绍的结构元素和表单元素之外，HTML5还增加了大量语义化元素，其中最重要的有以下6个。
address
time
progress
meter
figure和figcaption
fieldset和legend
注意，hgroup元素已经被HTML5标准剔除了，如果你在其他书中看到，直接忽略即可。
在HTML5中，我们可以使用更具有语义化的address元素来为“ 整个页面 ”或者“ 某一个article元素 ”添加地址信息（电子邮件或真实地址）。
当address元素应用于整个页面时，它一般放于整个页面的底部（footer元素内部），表示该网站所有者的地址信息。
一个页面可以有多个article元素，比如有些页面就有好几篇文章。当address元素应用于article元素时，它一般放在article元素内部的footer元素内，表示该篇文章所有者的地址信息。当然，address元素也可以放于section元素内。
举例：应用于整个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<header></header>
<nav></nav>
<article></article>
<aside></aside>
<footer>
<address>
如果你发现网站有bug，可以通过<a href="mailto:lvyestudy@foxmail.com"> 电子邮件 </a>联系我们。<br/>
当然你也可以通过下面地址访问我们：<br/>
广州市黄埔大道601号暨南大学.
</address>
</footer>
</body>
</html>
浏览器预览效果如图2-29所示。
图2-29 address应用于整个页面
举例：应用于article元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<header></header>
<nav></nav>
<article>
<header>作者：helicopter</header>
<p>这是第1篇文章的内容……</p>
<footer>
<address>
你可以通过<a href="mailto:lvyestudy@foxmail.com"> mailto:lvyestudy@fox-mail.com </a>联系作者：helicopter。
</address>
</footer>
</article>
<article>
<header>作者：mozilla</header>
<p>这是第2篇文章的内容……</p>
<footer>
<address>
你可以通过<a href="mailto:webmaster@somedomain.com">mailto:webmaster@somedomain.com</a>联系作者：mozilla。
</address>
</footer>
</article>
<aside></aside>
<footer>
</footer>
</body>
</html>
浏览器预览效果如图2-30所示。
图2-30 address应用于article元素
在HTML5中，我们可以使用更具有语义化的time元素来显示页面中的日期时间信息。
语法
<time datetime="时间"></time>
说明
datetime属性取值是一个时间，可以省略不写。datetime属性中的时间是提供给搜索引擎看的，而time标签内的时间是提供给用户看的，两者内容可以一样也可以不一样。time元素与datetime属性的关系，有点类似于img元素与alt属性的关系。
举例
方式1
<time>2017-11-11</time>
方式2
<time datetime="2017-11-11">2017-11-11</time>
方式3
<time datetime="2017-11-11 08:00">2017年11月11日早上8点</time>
方式4
<time datetime="2017-11-11 08:00-12:00">2017年11月11日8点~12点</time>
在实际开发中，大多数情况下我们是不用datetime属性的。用一句话总结就是：对于time元素的使用，我们不必过于拘泥，想要显示一段有意义的日期时间，用<time></time>括起来就可以了。
在HTML5中，我们可以使用progress元素以进度条的形式来显示某一个任务的完成度，如上传文件、下载文件等。
语法
<progress max="最大值" value="当前值"></progress>
说明
max属性表示最大值，value属性表示当前值。对于progress元素来说，它只有max属性，而没有min属性。为什么呢？原因很简单：任何进度条的最小值都是0，因此progress元素默认最小值也是0。
此外，max和value必须是0或正数，并且max值必须大于等于value值。小伙伴们想象一下进度条的特点就很容易理解了。
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<progress max="10" value="8"></progress><br/>
<progress max="100" value="80"></progress>
</body>
</html>
浏览器预览效果如图2-31所示。
图2-31 progress元素
分析
“进度=value/max”，因此虽然两个progress元素的max和value不一致，但是进度是相同的，都是80%。
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function(){
var oProgress = document.getElementsByTagName("progress")[0];
var oSpan = document.getElementsByTagName("span")[0];
var oBtn = document.getElementsByTagName("input")[0];
oBtn.onclick = function(){
var i = 0;
setInterval(function(){
if(i<100){
i++;
oProgress.value = i;
oSpan.innerText = i;
}
},100)
}
}
</script>
</head>
<body>
<p>
<progress max="100" value="0"></progress>
<span>0</span>%
</p>
<input type="button" value="显示进度"/>
</body>
</html>
浏览器预览效果如图2-32所示。
图2-32 默认时效果
分析
在这个例子中，我们使用定时器setInterval()来实现进度条的不断增加。当我们点击【显示进度】按钮后，进度条会不断增加，效果如图2-33所示。
图2-33 点击按钮后效果
在实际开发中，progress元素一般结合上传文件或下载文件操作来显示进度，或者展示一个loading图标，以便增强用户体验。对于这些高级效果，我们学到后面就知道怎么去实现了。
在HTML5中，我们可以使用进度条的形式来显示数据所占的比例。
语法
<meter min="最小值" max="最大值" value="当前值"></meter>
说明
meter元素跟progress元素非常相似，都是以进度条形式来显示数据比例。不过，两者在语义上有很大的区别：
meter元素一般用于显示静态数据比例。所谓的静态数据，指的是很少改变的数据，例如男生人数占全班人数的比例。
progress元素一般用于显示动态数据比例。所谓“动态数据”，指的是会不断改变的数据，例如下载文件的进度。
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<meter min="0" max="10" value="8"></meter><br/>
<meter min="0" max="100" value="80"></meter>
</body>
</html>
浏览器预览效果如图2-34所示。
图2-34 meter元素
图2-35所示“图片+图注”效果，在实际开发中经常可以见到。对于初学者来说，我们很可能使用如下代码来实现：
<div>
<img src="" alt=""/>
<span>HTML入门教程</span>
</div>
图2-35 “图片+图注”效果
但是这种实现方式语义并不好。在HTML5中，引入了figure和figcaption这两个元素来增强图片的语义化。
语法
<figure>
<img src="" alt=""/>
<figcaption></figcaption>
</figure>
说明
figure元素用于包含图片和图注，figcaption元素用于表示图注文字。在实际开发中，对于“图片+图注”效果，我们都建议使用figure和figcaption这两个元素来实现，从而使得页面的语义更加良好。
在HTML5中，我们还可以使用fieldset元素来给表单元素进行分组。其中，legend元素用于定义某一组表单的标题。
语法
<fieldset>
<legend>表单组标题</legend>
……
</fieldset>
说明
使用fieldset和legend有两个作用：增强表单的语义；定义fieldset元素的disabled属性来禁用整个组中的表单元素。
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="index.php" method="post">
<fieldset>
<legend>登录绿叶学习网</legend>
<p>
<label for="name">账号：</label>
<input type="text" id="name" name="name" />
</p>
<p>
<label for="pwd">密码：</label>
<input type="password" id="pwd" name="pwd" />
</p>
<input type="checkbox" id="remember-me" name="remember-me" />
<label for="remember-me">记住我</label>
<input type="submit" value="登录" />
</fieldset>
</form>
</body>
</html>
浏览器预览效果如图2-36所示。
图2-36 加入fieldset和legend的表单
分析
我们可以看到，使用fieldset和legend这两个标签之后，表单形成了非常美观的“书签”效果。