HTML -- 補充 · 前端知識 -- 學習整理

>[success] # HTML -- 補充 html 內容構成: ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> ~~~ 1. `<!DOCTYPE html>`，`DOCTYPE` 文檔意思 `html` 類型因此意思為，告訴瀏覽器當前頁面是`HTML5頁面`,這樣瀏覽器就可以用，`HTML5的標準`去解析識別內容,因此需要放到文檔最前面不能省略，如果省略會出現兼容性問題 * HTML 4.01、XHTML 1.0 聲明格式 ![](https://img.kancloud.cn/fd/b7/fdb7373e9fe52216580051b076a60c4d_775x162.png) 2. `html` 表示文檔的`根元素`，其他后續聲明的元素都為`此元素的后代` 2.1. W3C標準建議為html元素增加一個`lang`屬性,幫助語音合成工具確定要使用的發音,幫助翻譯工具確定要使用的翻譯規則,`lang="en"`表示文檔為英文，`lang="zh-CN"`表示文檔的語言是中文 3. `head`規定文檔相關的`配置信息`,也稱之為`元數據`,可配置的內容包含`文檔的標題` `引用的文檔樣式` `腳本` 3.1. `meta元素` 中 `charset` `用于設置網頁的字符編碼`，[關于字符編碼](https://www.jianshu.com/p/899e749be47c)，計算機不能識別我們所日常看到字符，實際他解析式二進制`0101`這種形式，因此需要對應`0101` 要對應的正常字符類似對象的表達形式即下面例子，不同的字符集所對應的值解析也不同，因此會出現不同字符集亂碼情況。 ~~~ { 0101:'z' //隨意舉得例子 } ~~~ ![](https://img.kancloud.cn/53/ed/53ed04b8a76e131be10c69c21f155f0b_1049x146.png) 4. `body`,你在瀏覽器窗口中看到的東西，也就是網頁的具`體內容和結構` >[danger] ##### 所有元素參考 [HTML 元素參考 ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element) >[info] ## div 和 span 補充 * 早期是沒有css，這個時候我們必須通過語義化元素來告知瀏覽器一段文字如何顯示，隨著語義化標簽越來越多，樣式和結構標簽開始混亂，這時候出現了css，xss 可以給樣式標簽賦予樣式達到效果，因此此時`html` 只負責結構即可，舉個列子`h` 標簽實際就是將其賦予了特定規則的`css`,理論上將`div`或者`span` 標簽賦予同樣的`css` 規則也可以達到`h` 標簽的效果 * div、span來編寫HTML結構所有的結構，樣式都交給css來處理 * 但`div` 和 `span` 是無語義化的，雖然理論來說所有頁面都僅僅只通過`div` 和 `span` 達到布局效果 >[info] ## HTML全局屬性 [全局屬性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes)