2.4 完善旧元素
HTML5对HTML4部分元素进行了优化，具体说明如下。
2.4.1 a——超链接
视频讲解
HTML5为a元素新增了3个属性，简单说明如下：
download：设置被下载的超链接目标。
media：设置被链接文档是被何种媒介／设备优化的。
type：设置被链接文档的MIME类型。
【示例】下面示例使用download属性设计图片被单击后，直接下载，而不是在新窗口中显示，效果如图2.16所示。
<a href="images/1.jpg" download="images/1.jpg"><img src="images/1.jpg"/></a>
图2.16 单击下载图片
提示：目前，Chrome、Opera和Firefox版本的浏览器均支持该属性，IE暂不支持。
2.4.2 ol——有序列表
视频讲解
HTML5为ol元素新增了reversed属性，用来设置列表顺序为降序显示。
【示例】下面示例使用reversed属性设计列表项目按倒序显示，效果如图2.17所示。
图2.17 项目列表倒序显示
提示：目前，最新版本的Chrome、Opera、Firefox浏览器均支持该属性，IE暂不支持。
2.4.3 dl——定义列表
视频讲解
HTML5重新定义了dl元素，允许dl列表包含多个带名字的列表项。每一项包含一条或多条带名字的dt元素，用来表示术语，dt元素后面紧跟一个或多个dd元素，用来表示定义。在一个元素内，不允许有相同名字的dt元素，即不允许有重复的术语。
【示例】下面示例演示了如何使用dl元素对诗句进行逐句解析，效果如图2.18所示。
图2.18 定义列表项目的应用
2.4.4 cite——引用文本
视频讲解
cite元素表示引用参考，如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。一般应把引用文本包裹在a元素中，方便用户快速跳转到原出处。
cite元素还有一个隐藏的功能：可以从文档中自动摘录参考书目。浏览器能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。
cite元素的语义已经超过了改变它所包含的文本外观的作用，它使浏览器能够以各种实用的方式来向用户表达文档的内容。
【示例】下面示例简单演示了cite元素的应用，效果如图2.19所示。
图2.19 使用cite元素
2.4.5 small——小号字体
small元素本来用来定义小号字体效果，HTML5对其进行了重新定义，使其由原来的通用展示性元素变为更具体的、专门用来标识所谓“小字印刷体”的元素，通常用在诸如免责声明、注意事项、法律规定、与版权相关等法律性声明文字中，同时不允许应用在页面主内容中，只允许被当作辅助信息，以inline方式内嵌在页面上。
同时，small元素也不意味着元素中内容字体会变小，要将字体变小，需要使用CSS样式表。
2.4.6 iframe——浮动框架
HTML5主要从安全性方面增强iframe元素，新增了3个属性，简单说明如下：
sandbox：启用一系列对iframe中内容的额外限制，取值包括：""、allow-forms（允许表单提交）、allow-same-origin（允许同源访问）、allow-scripts（允许执行脚本）、allow-top-navigation（允许框架访问）。
seamless：定义iframe看上去像是包含文档的一部分，取值为seamless（无缝嵌入），或者不设置。
srcdoc：规定在iframe中显示的HTML内容，取值为HTML代码。
HTML5为iframe元素增加sandbox属性，是出于安全性方面的原因，对iframe元素内的内容是否允许显示，表单是否允许被提交，以及脚本是否允许被执行等方面进行一些限制。
通过设置iframe元素的sandbox属性，iframe元素内显示的页面被添加如下所示的限制。
该页面中的插件被禁用。
该页面中的表单被禁止提交。
该页面中的JavaScript脚本代码被禁止运行。
如果单击该页面内的超链接，将把浏览器窗口或iframe元素之外的任何内容导航到iframe，则该超链接被禁用。
该页面被视为来自一个单独的源，所以禁止加载该页面中来自服务器端的内容，禁止该页面与服务器端进行交互，同时禁止加载页面中从Cookie或Web Storage中读出的内容。
提示：sandbox属性允许指定多个属性值，属性值与属性值中间用空格分隔。
2.4.7 script——脚本
视频讲解
HTML5为script元素新增async属性，规定异步执行脚本，仅适用于外部脚本，取值为async。
【示例1】下面示例演示了async属性的应用。
<script src="test1.js" async onload="ok()"></script>
<script>
console.log("内部脚本");
</script>
设计在页面中导入外部脚本文件test1.js，该文件的代码如下：
在Chrome浏览器中预览，可以看到页面内部脚本先被执行，最后才执行异步导入的脚本文件代码，效果如图2.20所示。
图2.20 异步加载JavaScript脚本
【示例2】如果在script元素中删除async属性，则可以看到先等到外部JavaScript脚本文件加载完毕之后，才执行内部脚本，效果如图2.21所示。
<script src="test1.js" onload="ok()"></script>
<script>
console.log("内部脚本");
</script>
图2.21 同步加载JavaScript脚本