H5 新的文檔聲明
不懂可以借鑑前面幾篇文章
新手前端HTML筆記 知識點(2)https://blog.csdn.net/IDtangjiasanshao/article/details/103035369
乾貨知識點https://blog.csdn.net/IDtangjiasanshao/article/details/102952309
HTML5 的文檔聲明
在 HTML 4.01 中，DOCTYPE 聲明引用 文檔類型定義DTD（Document Type Definition)，因爲 HTML 4.01 基於 SGML（標準通用標記語言，是一種定義電子文檔結構和描述其內容的國際標準語言；）。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。 HTML5 不基於 SGML，所以不需要引用 DTD。
提示：請始終向 HTML 文檔添加 DOCTYPE 聲明，這樣瀏覽器才能獲知文檔類型。 擴展：CSS盒子模型：CSS-標準盒模型 & 怪異盒模型？
CSS中Box model是分爲兩種:: W3C標準 和 IE標準盒子模型。 大多數瀏覽器採用W3C標準模型，而IE中則採用Microsoft自己的標準。 怪異模式是“部分瀏覽器在支持W3C標準的同時還保留了原來的解析模式”，怪異模式主要表現在IE內核的瀏覽器。
DOCTYPE缺失則在ie6，ie7，ie8下將會觸發怪異模式（quirks 模式）。 當不對doctype進行定義時，會觸發怪異模式。 在標準模式下，一個塊的總寬度= width + margin(左右) + padding(左右) + border(左右) 在怪異模式下，一個塊的總寬度= width + margin(左右)（即width已經包含了padding和border值）
2.H5的特點
① 更簡潔、但是在實際開發中要注意書寫規範，利於後期維護
② 標籤的語義化
擴展：語義化的重要性：
當頁面加載失敗的時候，還能夠呈現出清晰的結構
有利於SEO優化，利於被搜索引擎收錄（即便於網絡爬蟲的識別）
在項目開發及維護時，語義化的也很大程度上降低開發難度，節省成本
語法更寬鬆
多設備跨平臺
自適應網頁設計
3.H5新增的語義化標籤
header頭標籤 nav 導航標籤 article文章標籤 aside側邊欄導航 footer 頁腳 section 章節、頁眉、欄目
3.1 section
表示內容區塊,一般入章節、頁眉、頁腳或者頁面中的其他部分。可以與h1-h6等元素結合起來使用，標示文檔的結構
3.2 article
表示頁面中的一塊與上下文不相關的獨立內容，譬如博客中的一篇文章或者報紙中的一篇文章
3.3 aside
Aside表示acticle元素的內容之外的，與article元素的內容相關的輔助信息。例如：廣告、側邊欄。
3.4 header
表示頁面中一個內容區塊或者整個頁面的標題
3.5 footer
表示整個頁面或者頁面中的一個內容區塊的腳註。一般來說，他會包含創作者的姓名、創作日期以及創作者聯繫信息。
3.6 nav
表示頁面中導航鏈接的部分、① 傳統的導航條 ② 騰訊新聞 ③側邊欄導航 ④內業導航 ：百度百科
3.7 figure
用作文檔中插圖的圖像，一般表示文檔主體內容中的一個獨立單元。使用figcaption元素爲figure元素添加標題。 ◆ figcaption 表示 figure 的標題。從屬於 figure ， 並且， figure 中只能放置一個 figcaption。類似自定義列表dl
3.8 video
定義視頻，比如電影片段或其他視頻流
video src=“路徑地址” controls>您的瀏覽器不支持video
video允許有多個source元素，source元素可以連接不同的視頻文件，瀏覽器將使用第一個可識別的格式進行播放
<source src="video.ogg" type="video/ogg"/><source src="video.webm" type="video/webm"/>
提示：可以在開始標籤和結束標籤之間放置文本內容，這樣老的瀏覽器就可以顯示出不支持該標籤的信息。