HTML5官方文檔學習筆記(一)----使用 HTML 章節與大綱

H5解決的問題

在這裏插入圖片描述

HTML5大綱算法

1.用section取代div,如下:
在這裏插入圖片描述
2.隱式分節
在這裏插入圖片描述
在這裏插入圖片描述
3.分節根
在這裏插入圖片描述
4.大綱以外的節段
HTML5引入了兩個新的元素,用來定義不屬於web文檔主要大綱中的節段
HTML 側邊分節元素 (<aside>) 定義了這樣的節段, 雖然是主要的分節元素, 但並不屬於主要的文檔流, 就像解釋欄或廣告欄. aside元素內部有自己的大綱,但並不計入文檔大綱中
HTML 導航分節元素 (<nav>) 定義的節段包含了很多導航links。文檔中可以有好幾個這樣的元素,比如文檔內部的鏈接,就像目錄,和鏈接到其他站點的導航links。這些鏈接並不是主文檔流和文檔大綱中的一部分 ,並且能夠特別讓屏幕瀏覽器和類似的輔助技術從一開始就不渲染該標記裏的內容。

5.頁眉和頁腳
HTML 頭部分節元素 (<header>) 定義了頁面的頁眉,通常會包含logo和站點名稱以及水平菜單(如果有的話)。或是一個節段的頭部,可能包含了節段的標題和作者名字等。<article>, <section>, <aside>, and <nav>可以擁有它們自己的<header>。雖然名字是header,但是不一定是在頁面的開始。
HTML 頁腳元素 (<footer>) 定義了頁腳, 通常會包含版權信息和法律聲明以及一些其他鏈接。或是節段的頁腳,可能包含了節段的發佈數據、許可聲明等。<article>, <section>, <aside>, and <nav> 可以擁有它們自己的 <footer>。同樣,其不一定是在頁面的底部出現。

分節元素中的地址和發表時間

在這裏插入圖片描述

在不支持HTML5的瀏覽器器中使用HTML5

分節和標題元素應該在大部分的不支持HTML5的瀏覽器中工作。儘管不支持,但不必使用特殊的DOM接口。僅僅只需要一個特殊的CSS樣式,因爲未知元素默認會樣式化爲display:inline:
在這裏插入圖片描述
當然web開發者可以改變上面的樣式結構,但是要記住的是在不支持HTML5瀏覽器中,這些元素默認的樣式是與預期的樣式是不同的。還要注意的是

然而這種方法有自己的侷限性,因爲一些瀏覽器並不允許樣式化不支持的元素。這種情形出現在ie8及ie8以前的瀏覽器中,需要一個特殊腳本纔行:
在這裏插入圖片描述
這段腳本表示,當在ie8(及ie8以前)的情況下,應該允許腳本的運行以合適地展示HTML5分節和標題元素。如果禁用了腳本,則不會顯示,可能會出問題因爲這些元素定義整個頁面的結構。爲了預防這種情況,我們需要加上<noscript>標籤。
在這裏插入圖片描述
於是形成了如下的代碼,允許HTML5節段和標題元素在不支持HTML5的瀏覽器中展示,即使是ie8(ie8以下版本)也在禁用腳本的情況下有了合適的反饋。
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章