2.3 新增的行内语义元素
行内语义元素也叫作内联元素，在这些元素中只能容纳文本或者其他行内元素。HTML 5中新增了多个行内元素，如mark、time、meter、progress和cite。
2.3.1 mark元素
mark元素表示页面中需要突出显示或高亮显示的内容，例如，对于当前用户具有参考作用的一段文字，它通常用于引用，目的是为了引起用户的特别注意。
mark元素的作用相当于荧光笔在打印的纸张上标出一些文字。它与强调的作用有些不同，强调通常使用em元素，但是如果有一些已有的文本，并且想要让文本中没有强调的内容处于显眼的位置，可以使用mark元素。
最常使用mark元素的例子就是在网站或者系统中的搜索，通常情况下，用户在网页中输入要搜索的关键字，然后在页面中将搜索的关键字高亮显示。
【练习9】
例如，在打开的浏览器中输入百度地址，在百度引擎中搜索与HTML 5有关的信息，在搜索的页面中会将与HTML 5有关的信息全部显示出来。本次练习模拟实现一个这样的例子，主要的实现过程如下所示。
首先，设计新添加的网页的内容和样式，将文本是“HTML 5”或“html 5”的内容使用mark元素进行标记。部分代码如下：
<div class="opr-personinfo-subtitle"> <span><mark>HTML 5</mark></span> </div>
<div class="opr-personinfo-summary opr-personinfo-nomg"> <mark>HTML5</mark>是用于取代1999年所制定的HTML 4.01和XHTML 1.0标准的HTML标准版本，现在仍处于发展阶段，但大部分浏览器... <a href= "http://baike.baidu.com/view/951383.html#sub951383" target="_blank" class="opr-personinfo-link">查看百度百科>></a> </div>
将网页中的所有文本为“HTML 5”或“html 5”的内容设计完成后，运行页面查看效果，如图2-9所示。
除了mark元素外，em和strong元素也可以用来突出显示文本，它们在使用效果上非常相似，但是，它们的出发点是不一样的。mark元素的标记目标与原文作者无关，或者说它不是原文作者用来标示文字的，而是后来引用时添加上去的，它的目的是吸引当前用户的注意力，提供给用户参考，希望能够对用户有所帮助。em元素是为了突出文章的重点而使用的。strong元素是原文作者用来强调一段文字的重要性的，如警告信息和错误信息等。
图2-9 mark元素的使用
2.3.2 cite元素
cite元素用来创建一个引用标记，用于文档中参考文献的引用说明，例如一篇文字、一本书或者一首歌的名称等。
默认情况下，使用cite元素所定义的内容会以斜体显示，以区别于文章中的其他字符。cite元素也可以和样式结合使用，这样可能会得到更加丰富的效果。
【练习10】
一个网页中可以出现一个或者多个cite元素，本练习简单演示cite元素的使用。
（1）添加新的网页并且设计页面，在该页面中添加一篇短小的文章，在文章结尾处通过cite元素指定出处。代码如下。
<div class="contentarea"> <img src="images/wang.jpg" class="left" alt="A chinese lion statue" />
<p>有一个未来的目标总能让我们欢欣鼓舞<br/>就像飞向火光的灰蛾甘愿做烈焰的俘虏<br/>摆动着的是你不停的脚步飞旋着的是你美丽的流苏<br/>在一往情深的日子里谁能说得清<br/>什么是甜什么是苦<br/>只知道确定了就义无反顾<br/>要输就输给追求要嫁就嫁给幸福</p>
<p>-----<cite>引自《嫁给幸福》</cite></p>
</div>
（2）在样式表中重新为cite元素指定样式，指定文本的颜色为红色，字体大小为16。样式代码如下。
cite{
color:#F00;
font-size:16px;
}
（3）运行页面查看使用cite元素时的效果，如图2-10所示。
图2-10 cite元素的使用
2.3.3 time元素
time元素用于定义日期或时间，可以代表24小时中的某一刻，在表示时刻时允许有时间差。使用time元素明确定义对机器的日期和时间进行编码，并且以易读的方式来展现它。
time元素可以定义许多格式的时间和日期，它的应用也非常广泛。例如，在文章内容需要标记日期或时间内使用，或者显示节日或生日时使用等。定义的日期和时间必须是确定的，如23:00、1997-7-1等，并且可以定义时区偏移。
例如，下面的代码演示了time元素的简单使用。
我们咖啡店的营业时间是：每天早上<time>9:00</time>开门，晚上<time>6:00</time>关门。
time元素有两个常用属性，分别是datetime属性和pubdate属性。datetime属性定义元素的日期和时间，如果未定义该属性，则必须在元素的内容中规定日期或时间。示例代码如下。
今天是：<time datetime="2013-5-16">我的生日</time>
今天是：<time datetime="2013-10-12">10月12日</time>
今天是：<time datetime="2013-10-12">2013年10月12日</time>
今天<time datetime="2013-5-16T19:00">19:00点</time>，生日Party正式开始。
今天<time datetime="2013-5-16T19:00Z">19:00点</time>，生日Party正式开始。
现在：<time datetime="2013-5-16T19:00+08:00">美国时间晚上7点。
在上述代码中，位于元素开始标记和结束标记中间的内容是要显示在网页上的。使用datetime属性时日期和时间之间要用字母T进行分隔，T表示时间。如果在日期和时间后面加上一个字母Z，则表示给机器编码时使用UTC标准时间。在最后一行的代码中加上了时间差，表示机器编码为另一地区时间，如果是编码本地时间，则不需要添加时差。
pubdate属性用来表示发布日期，它的值是一个布尔类型。该属性的使用非常简单，直接在标记内指定该属性的值即可，如果不指定，默认值为true。
【练习11】
本次练习使用time元素，在页面中声明两个time元素，它们分别表示通知标题的相关信息和发布日期。在第二个time元素中添加了pubdate属性，它表示这个元素是信息的发布日期。相关代码如下。
<div class="all-ninfo-title">公司内部<time datetime="2013-10-8">十一过后</time>招聘公告</div>
<table width="100%" class="all-ninfo">
<tbody>
<tr>
<td width="*">来源：公司人资部</td>
<td width="20%">作者：</td>
<td width="20%">摄影作者：</td>
<td width="30%" style="text-align: right">发布日期：<time datetime="2013-9-25" pubdate>2013年9月25日</time></td>
</tr>
</tbody>
</table>
为time元素添加样式，指定字体颜色为红色。设置完成后运行页面查看效果，如图2-11所示。
图2-11 time元素的使用
2.3.4 meter元素
meter元素定义度量（单位），仅用于已知最大值和最小值的度量。meter元素规定范围内的数量值，例如磁盘使用量、投票人数和文档等级评分等。该元素可以在text中，也可以在max和min属性中定义。
meter元素常用的属性有6个，这些属性的说明如表2-1所示。
表2-1 meter元素的常用属性
例如，下面的代码定义了一个meter元素，该元素表示用户当前磁盘C盘的使用量。
磁盘C的使用量：<meter value="50" min="0" max="160">50/160</meter>
【练习12】
本次练习简单演示meter元素的使用，首先新建一个页面显示多篇文章的列表，在每篇文章的标题之后添加meter元素，它用来显示当前文章的热度。页面部分代码如下。
<table summary="设计优雅的博客列表">
<tr><th style="width:500px;">标题</th><th>发表时间</th></tr>
<tr><td><a href="#">生命中最重要的事</a><meter min="0" max="100" value="32" low="10" high="98" optimum="50"></meter></td><td>2013-06-19</td></tr>
<tr><td><a href="#">生命中不能错过的美好</a><meter min="0" max="100" value="90" low="10" high="98" optimum="50"></meter></td><td>2013-06-18 </td></tr>
<tr><td><a href="#">父亲节，你准备了什么礼物？</a><meter min="0" max="100" value="100" low="10" high="98" optimum="50"></meter></td><td> 2013-06-15</td></tr>
<!--省略其他-->
</table>
运行页面查看meter元素的使用效果，如图2-12所示。
图2-12 meter元素的使用
2.3.5 progress元素
progress元素表示一个任务的完成进度，这个进度可以是不确定的，只是表示进度正在运行，但是不清楚还有多少工作量没有完成，也可以用0到某个最大数字（如100）之间的数字来表示准确的进度完成情况（如进度百分比）。
progress元素常用的属性有三个，它们分别是max、min和value。max属性表示进度条的最大值，即总共有多少少作量；min属性则表示进度条的最小值；value属性则表示当前的进度值，即已经完成了多个工作量。
注意
使用progress元素的属性时，value和max属性的值必须大于0，并且value的值小于或者等于max属性的值。
【练习13】
progress元素通常会和JavaScript脚本结合使用，实现动态改变进度条的值。本次练习演示使用progress元素和JavaScript脚本代码实现文件上传的进度条显示，当用户单击页面中的【上传】按钮时动态加载显示进度条。
（1）添加新的页面并设计页面，在页面的合适位置添加类型是file的用于上传图片的input元素和执行上传操作的类型是button的input元素。代码如下。
选择图书目录的文件
<input type="file" id="bookfile" multiple="true" accept="image/jpg"/>
<input type="button" value="上传" class="inputbtn" onClick="Btn_Click();">
（2）为按钮添加Click事件，用户单击按钮时触发该事件调用函数名称是Btn_Click中的脚本代码，如下所示。
<script type="text/javascript">
var intValue = 0;
var intTimer;
var objPro = document.getElementById('proDownFile');
var objTip = document.getElementById('pTip');
function Interval_handler() { //定时事件
intValue++;
objPro.value = intValue;
if (intValue >= objPro.max) {
clearInterval(intTimer);
objTip.innerHTML = "上传完成!";
} else {
objTip.innerHTML = "正在上传" + intValue + "%";
}
}
function Btn_Click(){
intTimer = setInterval(Interval_handler, 100);
}
</script>
上述Btn_Click()函数代码中，设置脚本内置函数setInterval()的值，表示每隔1s调用一次Interval_handler()函数中的代码。在Interval_handler()函数中，为id的值是proDownFile的元素进行赋值，然后将声明的数值与获取元素的最大值进行比较。如果声明的值大于或等于元素的最大值，则显示文本“上传完成！”；否则，则显示上传的进度。
（3）运行页面选择文件后单击【上传】按钮进行测试，如图2-13所示。
图2-13 progress元素的使用