本文介绍了HTML5中a元素的download属性、ol和dl列表的改良、cite元素的限制、small元素的重新定义以及iframe元素的安全性增强，特别是iframe的sandbox属性，用于限制内容显示和交互。
改良的a元素
在HTML 5中，对a元素添加download属性，在添加了该属性后，用户点击超链接时，将直接下载超链接所指向的资源文件，而不是在浏览器中打开链接所指向的目标地址。现在Chrome 14、Opera 18以及Firefox20以上版本的浏览器均支持该属性。
download属性的一个使用示例：
<!DOCTYPE html>
<meta charset=UTF-8/>
<title>a元素的download属性使用示例</title>
<a href="html5.jpg"><img src="html5.jpg"/></a>
将这段代码保存在一个HTML文件中，将该HTML文件保存在任意网站中，运行该网站并从Chrome浏览器访问该页面，当文件所在目录中存在名为html5.jpg图片文件时，该图片将显示在浏览器中，用户单击该图片链接，图片将被直接下载。
可以为a元素的download属性指定一个属性值，该属性值即被下载的文件名。
修改代码中a元素的download属性值如下所示：
<a href="html5.jpg" download="abc.jpg">
<img src="html5.jpg"/></a>
在浏览器中访问修改后的页面并用鼠标单击图片，被下载的图片文件名即“abc.jpg”。
改良的ol列表
在HTML 5中，将ol列表进行改良，为它添加了start属性与reversed属性。
如果不希望ol元素所代表的列表编号从1开始，那么可以使用start属性来自定义开始编号，ol列表的start属性示例：
<!DOCTYPE html>
<meta charset=UTF-8/>
<title>ol列表的start属性示例</title>
<h3>ol列表的start属性示例</h3>
<ol start=5>
<li>列表内容5</li>
<li>列表内容6</li>
<li>列表内容7</li>
<li>列表内容8</li>
<li>列表内容9</li>
<li>列表内容10</li>
</ol>
如果想对列表进行反向编号，那么可以使用ol列表的reversed属性， ol列表的reversed属性的使用示例：
<!DOCTYPE html>
<meta charset=UTF-8/>
<title>ol列表的reversed属性使用示例</title>
<h3>ol列表的reversed属性使用示例</h3>
<ol start=5 reversed>
<li>列表内容1</li>
<li>列表内容2</li>
<li>列表内容3</li>
<li>列表内容4</li>
<li>列表内容5</li>
</ol>
目前Chrome 18以上版本、Firefox 18以上版本、Opera 18以上版本以及Safari 5.2版本的浏览器支持reversed属性。
改良的dl列表
在HTML 5中，将该元素重新定义，重新定义后的dl列表包含多个带名字的列表项。每一项包含一条或多条带名字的dt元素，用来表示术语，dt元素后面紧跟一个或多个dd元素，用来表示定义。在一个元素内，不允许有相同名字的dt元素，不允许有重复的术语。
dl列表可以用来定义文章或网页上的术语解释：
<!DOCTYPE html>
<meta charset=UTF-8/>
<title>用于术语解释的dl列表示例</title>
<h3>用于术语解释的dl列表示例</h3>
<article>
<h1>aritcle元素</h1>
<p>一块独立的内容。它可以用来表示RRS中一块独立的内容,也可以用来表示博客中独立的一 篇文章。...</p>
<aside>
<h2>术语解释</h2>
<dl>
<dt><dfn>RSS</dfn></dt>
<dd>RSS也叫聚合RSS是在线共享内容的一种简易方式(也叫聚合内容)...</dd>
<dt><dfn>博客</dfn></dt>
<dd>博客,又译为网络日志、部落格或部落阁等,是一种通常由个人管理...</dd>
</dl>
</aside>
</article>
dl列表也可以用来表示一些页面或article元素中内容的辅助信息，例如作者、类别等，用dl列表表示辅助信息：
<dl>
<dt>作者</dt>
<dd>陆凌牛</dd>
<dt>出版社</dt>
<dd>机械工业出版社</dd>
<dt>类别</dt>
<dd>网络开发</dd>
</dl>
加以严格限制的cite元素
cite元素表示作品（例如一本书、一篇文章、一首歌曲等）的标题。该作品可以在页面中被详细引用，也可以只在页面中提一下。
在HTML 4中，cite元素可以用来表示作者，但在HTML 5中明确规定不能用cite元素表示包括作者在内的任何人名，因为人的名字不是标题（当然除非标题就是一个人的名字），但是为了能够与HTML 4或之前版本的网页兼容，所以这只是一个规定而已，并不被认为是错误。
重新定义的small元素
HTML 5中对small元素进行了重新定义，使其由原来的通用展示性元素变为更具体的、专门用来标识所谓“小字印刷体”的元素，通常用在诸如免责声明、注意事项、法律规定、与版权相关等法律性声明文字中，同时不允许应用在页面主内容中，只允许被当作辅助信息以inline方式内嵌在页面上。同时，small元素也不意味着元素中内容字体会变小，要将字体变小，需要配合使用CSS样式表。
安全性增强的iframe元素
在HTML 5中，为iframe元素增加一个sandbox属性，是出于安全性方面的原因，对iframe元素内的内容是否允许显示，表单是否允许被提交以及脚本是否允许被执行等方面进行一些限制，使用方法如下所示：
<iframe sandbox src="http:// somewebsite.com/default.html"></iframe>
// 或者
<iframe sandbox="" src="http:// somewebsite.com/default.html"></iframe>
在通过如上的方法设置iframe元素的sandbox属性后，iframe元素内显示的页面被添加如下所示的限制。
·该页面中的插件被禁用。
·该页面中的表单被禁止提交。
·该页面中的JavaScript脚本代码被禁止运行。
·如果单击该页面内的超链接将把浏览器窗口或iframe元素之外的任何区域导航到新的内容，则该超链接被禁用。
·该页面被视为来自一个单独的源（在Web中，如果两个页面的页面地址中的域名不同或端口号不同，则这两个页面来自不同的源），所以禁止加载该页面中来自服务器端的内容，禁止该页面与服务器端进行交互，同时禁止加载该页面中从cookie或Web Storage中读出的内容。
可以使用如下方法来判断浏览器是否支持iframe元素的sandbox属性。
if("sandbox" in document.createElement("iframe"))
{
// 浏览器支持iframe元素的sandbox属性
}
else
{
// 浏览器不支持iframe元素的sandbox属性
}
到目前为止，支持该属性的浏览器有：Chrome 6以上、Firefox 17以上、Opera 18以上、Safari 5.1以上与IE 10。
另外，sandbox属性的其他可指定的属性值如下所示（可将sandbox属性值指定为多个属性值：属性值与属性值中间用空格分隔）。
（1）allow-forms
可以通过在sandbox属性值中添加使用allow-forms属性值的方法来允许iframe页面中的表单进行提交，方法如下所示。
<iframe sandbox="allow-forms" src="xyz.html"></iframe>
iframe页面中的内容如下所示。
<!DOCTYPE HTML><html>
<body>
<form action="test.jsp">
姓名:<input type="text" name="name" /><br />
年龄:<input type="text" name="age" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
（2）allow-scripts
在Web中，经常使用JavaScript脚本代码来执行客户端的交互，但是它有时也会给我们的网站或应用程序带来一定的风险，尤其是当iframe元素中的页面来自另一个源（在Web中，如果两个页面的页面地址中的域名不同或端口号不同，则这两个页面来自不同的源），且该页面中具有来自服务器端的内容，或者需要在客户端脚本代码中通过Ajax请求或XMLHttpRequest从服务器端读取内容时。所以我们需要谨慎判断是否使用sandbox属性禁止运行iframe元素中的脚本代码，或者通过在sandbox属性值中添加使用allow-scripts属性值的方法来允许执行iframe页面中的JavaScript脚本代码，方法如下所示。
<iframe sandbox="allow-scripts" src="xyz.html"></iframe>
（3）allow-same-origin
在不对iframe元素使用sandbox属性的时候，该元素中的页面被视为与使用该iframe元素的页面来自同一个源（即使这两个页面实际上来自不同的源），允许iframe元素中的页面加载其来自服务器端的内容，允许在iframe元素所显示页面的脚本内部与其服务器端进行交互，允许在iframe元素所显示页面中加载来自cookie或Web Storage中的内容。
当对iframe元素使用sandbox属性后，iframe元素中所显示的页面被视为来自一个单独的源，即使iframe元素中所显示的页面与使用该iframe元素的页面事实上来自于同一个源，禁止iframe元素中的页面加载来自服务器端的内容，禁止在iframe元素所显示页面的脚本内部与服务器端进行交互，禁止在iframe元素所显示页面中加载来自cookie或Web Storage中的内容。
可以通过在sandbox属性值中添加使用allow-same-origin属性值的方法将iframe元素中的页面视为与使用该iframe元素的页面来自同一个源，方法如下所示：
<iframe sandbox="allow-same-origin" src="xyz.html"></iframe>
在大多数情况下，allow-same-origin属性值需要与allow-scripts属性值一起使用，因为开发者需要在iframe元素所显示的页面中使用JavaScript脚本代码读取cookie或Web Storage中的内容，或通过JavaScript脚本代码与服务器端进行交互，请求获取来自服务器端的数据。allow-sam。
当对iframe元素使用sandbox属性后，iframe元素中所显示的页面被视为来自一个单独的源，即使iframe元素中所显示的页面与使用该iframe元素的页面事实上来自于同一个源，禁止iframe元素中的页面加载来自服务器端的内容，禁止在iframe元素所显示页面的脚本内部与服务器端进行交互，禁止在iframe元素所显示页面中加载来自cookie或Web Storage中的内容。
可以通过在sandbox属性值中添加使用allow-same-origin属性值的方法将iframe元素中的页面视为与使用该iframe元素的页面来自同一个源，方法如下所示：
<iframe sandbox="allow-same-origin" src="xyz.html"></iframe>
在大多数情况下，allow-same-origin属性值需要与allow-scripts属性值一起使用，因为开发者需要在iframe元素所显示的页面中使用JavaScript脚本代码读取cookie或Web Storage中的内容，或通过JavaScript脚本代码与服务器端进行交互，请求获取来自服务器端的数据。allow-same-origin属性值与allow-scripts属性值一起使用的方法如下所示：
<iframe sandbox="allow-scripts allow-same-origin" src="xyz.html"></iframe>
在如下所示的脚本代码中，iframe元素中的页面读取Web Storage中的内容并将其显示在（iframe元素中所显示的）页面上的某个div元素中，如果在iframe元素的sandbox属性值中删除allow-same-origin属性值或allow-scripts属性值，则iframe页面中将不能显示来自Web Storage的内容。
function loadFromStorage(key) {
if(localStorage) {
document.getElementById("div1").innerHTML=localStorage.getItem(key);
}
};
在如下所示的脚本代码中，iframe元素中的页面读取并显示来自服务器端books.xml文件中的内容。如果在iframe元素的sandbox属性值中删除allow-same-origin属性值或allow-scripts属性值，则iframe页面中将不能显示来自服务器端books.xml文件中的内容。
<script type="text/javascript">
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
xhttp.open("GET","books.xml",false);
xhttp.send();xmlDoc=xhttp.responseXML;
x=xmlDoc.getElementsByTagName('book_name');
for (i=0;i<x.length;i++)
{
document.write(x[i].childNodes[0].nodeValue);
document.write("<br />");
}
</script>
服务器端books.xml文件中的内容如下所示：
<?xml version="1.0" encoding="UTF-8"?>
<dataset>
<book><book_name>abc</book_name>
<author>ABC</author>
</book>
<book><book_name>鬼吹灯</book_name>
<author>南派三叔</author></book>
<book><book_name>精绝古城</book_name>
<author>南派三叔</author></book>
<book><book_name>龙岭石窟</book_name>
<author>南派三叔</author></book>
<book><book_name>怒晴湘西</book_name>
<author>南派三叔</author></book>
</dataset>
（4）allow-top-navigation
当对iframe元素使用sandbox属性的时候，如果iframe元素内的页面中具有一个超链接，且单击该超链接将把浏览器窗口或iframe元素之外的任何区域导航到新的内容，该超链接被禁用。例如在如下所示的代码中，由于超链接将把使用该iframe元素的的页面导航到新的页面，所以该超链接被禁用。
<a href="xyz.html" target="_top">测试链接</a>
可以通过在sandbox属性值中添加使用allow-top-navigation属性值的方法使该超链接变得有效，代码如下所示：
<iframe sandbox="allow-top-navigation" src="xyz.html"></iframe>
到目前为止，支持iframe元素的sandbox属性的浏览器有：Chrome6以上、Safari 5以上、Firefox 17以上、Opera 15以上以及IE 10。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
