下载掌阅APP，畅读海量书库
立即打开
除了新增元素，HTML5还对已有的某些元素进行了改良，其中改良的元素有以下4种。
a
ol
small
script
HTML5为a元素新增了3个属性，如表2-3所示。
表2-3 a元素新增属性
media和type这两个属性用得很少，我们只需要掌握download这一个属性即可。
语法
<a href="文件地址" download="新文件名"></a>
说明
download属性用于为文件取一个新的文件名。如果download属性值省略，则表示使用旧的文件名。
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a href="img/princess.png" download="beauty.png">下载图片</a>
</body>
</html>
浏览器预览效果如图2-37所示。
图2-37 download属性
分析
当我们点击超链接后，浏览器就会下载该图片，并且图片名字换成新的文件名beauty.png。如果我们改为下面这句代码，也就是省略download属性值，则图片会使用旧的文件名princess.png。
<a href="img/princess.png" download>下载图片</a>
HTML5为ol元素新增了一个reversed属性，用于设置列表顺序为降序显示。
语法
<ol reversed>
<li></li>
<li></li>
<li></li>
</ol>
说明
在实际开发中，reversed属性用得很少，简单了解一下即可。
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>
浏览器预览效果如图2-38所示。
图2-38 reversed属性
在HTML5中，我们可以使用更具有语义化的small元素来表示“小字印刷体”的文字。small元素一般用于网站底部的免责声明、版权声明等，如图2-39所示。
图2-39 版权声明
语法
<small>你的内容</small>
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<small>Copyright ©2015-2017 绿叶学习网(www.lvyestudy.com), All Rights Reserved</small>
</body>
</html>
浏览器预览效果如图2-40所示。
图2-40 small元素
分析
对于图2-40所示效果，我们使用div、span等元素也可以实现，不过small元素更具语义化。
HTML5为script元素新增了两个属性：defer和async。这两个属性的作用都是加快页面的加载速度，两者区别如下。
defer属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件不会立即执行，而是等到整个HTML文档加载完成才会执行。
async属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件会立即执行，即使整个HTML文档还没有加载完成。
defer和async都是异步加载的，两者区别在于，异步加载外部JavaScript文件完成后何时执行。从上面也可以看出，defer属性相对于async属性来说，更符合大多数开发场景对脚本加载执行的要求。
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/async.js" async></script>
</head>
<body>
<script>
console.log("内部脚本");
</script>
</body>
</html>
其中，async.js文件代码如下：
console.log("外部脚本");
浏览器预览效果如图2-41所示。
图2-41 async属性
分析
在正常情况下，输出顺序应该是：“外部脚本→内部脚本”。但是由于async属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件会立即执行，即使整个HTML文档还没有加载完成，因此输出顺序为：“内部脚本→外部脚本”。