知識梳理——HTML篇

標籤：

瀏覽器核心：

• IE: trident
• Fixfox: gecko
• Safari: webkit
• Opera: 以前是presto,現已改用Google Chrome的Blink
• Chrome: Blink(基於Webkit)

DOCTYPE:

　　<!DOCTYPE>文件類型聲明，位於文檔中的最前面位置，處於<thml>標籤之前。

　　作用：告訴瀏覽器按照何種規範解析頁面

瀏覽器模式：（標準模式 or 混雜模式）

　　標準模式：根據W3c規範呈現頁面

　　混雜模式：以一種比較寬鬆的向下相容的方式呈現頁面

　　兩者區別：

1. 1. 盒模型的解析

　　　　　　　　標準模式下，盒模型的內容寬度和高度不包括padding和border值，而混雜模式下包括padding和border值。

　　　　　　　　　可用box-sizing進行計算。

　　　　　　2.給行內元素設定寬高

　　　　　　　　標準模式下，給<span>等行內元素設定width和height都不會生效，而在混雜模式中會生效。

　　　　　3.設定百分比高度

　　　　　　　　標準模式下，一個元素的高度由其內容的大小來決定，如果沒有給父元素設定height值,子項目設定百分比的height是無效的，而在混雜模式下生效。

 

　　（ps:這些是我在編寫項目中遇到的一些區別，應該還有很多）

漸進增強、優雅降級：

　　漸進增強：一開始只構建網站的最少特性，然後不斷針對瀏覽器追加功能。

　　優雅降級：一開始就構建網站的完整功能，然後針對瀏覽器測試和修複。

　　微妙差別：都關注於同一網站在不同瀏覽器下的表現程度。區別在於它們的關注點不同，以及這種關注如何影響工作的流程。

語義化：

　　使用含有語義的標籤，起到強調作用，很明顯的告訴你它們的作用是什麼。

　　好處：　

　　　　去掉樣式後頁面呈現清晰的結構

　　　　盲人使用讀屏器更好的閱讀

　　　　搜尋引擎更好的理解頁面

　　　　便於Team 專案的可持續運作及維護

塊元素、行內元素：

　　塊元素：div p h1~h6 ul li address form table section article aside nav header hgroup footer

　　行內元素：span th tr td a label textarea input select img  button time,其中，textarea input select img button time又叫內聯區塊層級元素。

　　區別：區塊層級元素會獨佔一行，預設情況下，其寬度會自動填滿父元素的寬度，行內元素不會獨佔一行，相鄰的行內元素會排列在同一行裡，直到一行排不下，才會換行，其寬度隨內容而變化,內聯區塊層級元素可以使用css為其設定寬高，但不會獨佔一行。

HTML5:

　　html5主要是關於映像、位置、存諸等功能的增加。

　　語義化更好的內容標籤：header nav footer aside article section

　　音頻、視頻：audio video

　　畫布：canvas

　　拖放

　　本地存諸：localStorage(永久存諸，瀏覽器關閉後資料不丟失，需手動刪除)

　　　　　　　sessionStorage(臨時存諸，瀏覽器關閉後自動刪除)

　　離線應用

　　新增表單類型：email url number range date search

　　移除元素：

　　　　純表現的元素：basefont big center font u...

　　　　不再使用frame架構

知識梳理——HTML篇