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　單擊下載圖片

2.4.2　ol——有序列表

視頻講解

HTML5為ol元素新增了reversed屬性，用來設置列表順序為降序顯示。

【示例】下面示例使用reversed屬性設計列表項目按倒序顯示，效果如圖2.17所示。

圖2.17　項目列表倒序顯示

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中讀出的內容。

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腳本