TML5元素

在上一篇中我們介紹了元素中新增的主體結構，那么與之對應就是元素中新增的非主體結構了。在HTML5中，非主體結構元素表示邏輯結構或附加信息。本次主要為大家介紹HTML5中新增的幾個非主體結構元素的定義及使用方法和例子。

1.header元素

header元素用于定義HTML文檔的頁眉，是一種具有引導和導航作用的結構元素。header元素通常表示整個頁面或者頁面內的一個內容區塊的標題。一般情況，一個header元素內嵌一個heading元素（h1~h6）。元素的示例如下圖：

HTML5中的header元素

在這段代碼中，h1元素表示該區域內容的標題，nav元素表示一個導航列表，除此之外，header元素的內容還可以是數據表格、搜索表單或相關的logo圖片，這也包括我們接下來要介紹的hgroup元素。不過要注意是，header元素應該放在頁面的開頭，而且可以存在多個。

2.hgroup元素

hgroup元素用于對header元素標題及其子標題進行分組。在使用header元素時，我們通常會嵌入一個heading（h1~h6）元素，那是因為我們只有一個標題，并且沒有子標題。如果header元素的標題下還有子標題，這時候就需要使用hgroup元素對其進行分組。示例代碼如下：

HTML5中的hgroup元素

3.footer元素

footer元素用于定義區塊的腳注，這個區塊可以是article元素或section元素。通常情況下，footer元素會包含創作者的姓名、文檔的創建時間、聯系方式和版權信息等。示例代碼如下圖：

HTML5中的footer元素

4.address元素

address元素用于定義文檔作者或者擁有者的聯系信息，包括文檔作者或文檔維護者的姓名、網站、電子郵件、聯系電話等。如果address元素位于article元素內部，則它表示該文章作者或擁有者的聯系信息。一般情況下，address元素應該添加到網頁的頭部或底部。比如將文章作者的聯系方式顯示在footer元素中的代碼如下圖所示：

HTML5中的address元素

這里要注意一下的如果在footer元素中需要顯示聯系方式，應該使用address元素，就像上圖中的那樣。在HTML5元素中新增非主體結構就到這里了。關注最新動態、了解更多精彩資訊請加我們的官方微信：pyyuanxing。謝謝大家的觀看，祝大家身體健康、生活愉快。

TML5中新增了“全部屬性”的概念。所謂全局屬性它是指可以對任何元素都可以使用的屬性，今天為大家詳細介紹三種常見的全局屬性。

contentEditable屬性

contentEditable是由微軟開發。被其他瀏覽器反編譯并投入應用的一個全局屬性。它的主要功能是是否允許用戶編輯元素的內容，被編輯元素必須是獲得鼠標焦點的元素，而且在點擊后要提供一個插入符號，提示用戶該元素中內容允許編輯。contentEditable屬性是一個布爾值屬性，可以指定為ture或false。該屬性還有一個隱藏屬性的inherit狀態，為true是允許用戶編輯；為false時元素不能被用戶編輯；沒有指定時則由inherit狀態決定，如果父元素是可編輯的，該元素也是可編輯的。支持contentEditable屬性元素有A、DD、DIR、DIV、BUTTON、FORM、DL、DT、FONT、DFN、hn、CODE、ABBR等。

designMode屬性

designMode屬性主要功能是指定整個頁面是否可編輯，頁面可編輯時，頁面中任何支持contentEditable屬性的元素都變成了可編輯狀態。designMode屬性有兩個值“on”和"off"。屬性為“on”時，頁面可編輯；屬性為“off”時，頁面不可編輯。不過各個瀏覽器支持情況也不一樣，IE8不支持designMode屬性，IE9支持designMode屬性，fixfox和Opera瀏覽器支持designMode屬性、Chrom和Safari瀏覽器在內嵌frame支持designMode屬性。

hidden屬性

在HTML5中所有的元素允許使用hidden屬性。它類似input元素中的hidden屬性，使元素處于不可見狀態。hidden屬性設置為ture，元素處于不可見狀態；hidden屬性設置為false時元素處于可見狀態。

spellcheck屬性

spellcheck屬性主要是針對input元素和textarea這兩個文本輸入框提供的新屬性，它的功能是對輸入內容進行拼寫和語法檢查。它有個特殊的地方，就是必須聲明屬性值true或者false。如果元素是readonly屬性或者disabled屬性為true，不執行拼寫檢查。Firfox、IE、Chrome、Safari等瀏覽器都支持該屬性。

tabindex屬性

tabindex在程序開發概念，是指不斷敲擊Tab鍵讓窗口或頁面中控件獲得焦點，對窗口的控件進行遍歷，每個控件的tabindex表示第幾個被訪問的。之前這個屬性在編輯網頁很有用，現在是根據元素所在位置決定遍歷順序，所以就不需要了。不過tabindex拎一個作用，只有鏈接元素與表單元素可以通過按鍵獲得焦點。如果對元素使用了tabindex屬性后，也能讓元素獲得焦點，執行focus（）語句時，可以讓元素獲得焦點了。但是這樣會出現一個問題，元素會通過tab獲得焦點，而這時候我們不想讓該元素獲得焦點這不是我們想要的結果。

把元素的tabindex值設定為負數后就可以解決這個問題了。tabindex為負值時，可以通過編程的方式讓元素獲得焦點，但按下Tab鍵該元素就不能獲得焦點了，這在復雜的頁面是非常有用的。HTML5中巧妙運用該屬性發揮了很大的作用。

每天分享一個知識點，刻意練習，每日精進！