摘要：最近關注的重學前端系列文章，也想把已知的前端知識體系梳理一遍，夯實基礎的同時，總結提升。標準模式的排版和運作模式都是以該瀏覽器支持的最高標準運行。模式是目前最常用的模式。嚴格模式不允許展示型棄用元素和框架集。中空格不會被自動刪除。

最近關注winter的“重學前端”系列文章，也想把已知的前端知識體系梳理一遍，夯實基礎的同時，總結提升。接下來會從HTML、CSS、JS、性能、網絡安全、框架通識進行分類總結。

聲明位于HTML文檔的第一行，處于之前。

聲明不是 HTML 標簽；它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。Doctype不存在或者格式不正確都會導致文檔以兼容模式/混雜模式呈現。

標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止站點無法工作。

HTML5 不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們該有的方式來運行）
而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

總體上應該分為三類： HTML5，HTML4.01，XHTML。

HTML5模式是目前最常用的模式。直接在DOCTYPE后面添加html即可。

分為三種模式：嚴格模式(strict)、過度模式(transitional)、Frameset模式。區別在于是否允許使用展示性和棄用元素，以及是否允許使用框架集。

嚴格模式：不允許展示型、棄用元素和框架集。

過度模式：允許使用展示性元素、棄用元素（比如font、color等），不允許使用框架集。

Frameset模式：允許展示性元素、棄用元素，允許框架集。

XHTML是一種比較嚴格的模式，所有元素必須以XML格式編寫。分類和HTML4.01比較類似，分為嚴格模式、過渡模式、Frameset模式，同時添加了1.1模式。

嚴格模式：不允許展示性、棄用元素和框架集

過渡模式：允許展示性、棄用元素（比如font，color等）,不允許框架集

Frameset模式：允許展示性、棄用元素，允許框架集

XHTML 1.1：該 DTD 等同于 XHTML 1.0 Strict，但允許添加模型（例如提供對東亞語系的 ruby 支持）。

最后附上各種文檔類型支持的元素列表：HTML5/HTML 4.01/XHTML 元素和有效的 DTD

DOCTYPE聲明

新增結構元素

新增功能元素

XHTML要求編寫符合XML的語法。主要區別在于：

XML區分大小寫：以前很多、等都用大寫或大小寫混用如、或、”排版，但是XHTML統一要求需要用、小寫。

XML標簽必須閉合，單元素需要以/作為閉合結尾，嵌套不能出錯。比如：“ ”像這個標簽在html是可行的，但是為了xhtml的標準所以必須關閉如“ ”

XML屬性必須放在引號中。

XML屬性必須有屬性值，不能省略。比如：網頁里顯示圖片img標簽里都可加可不加alt屬性，但是現在xhtml要求必須加上alt屬性,不然xhtml驗證將提示錯誤，哪怕alt的值為空都可以。

XML中空格不會被自動刪除。

元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。
標簽位于文檔的頭部，不包含任何內容。 標簽的屬性定義了與文檔相關聯的名稱/值對。
常用列表如下:

在移動端開發，最常看到head里面設置了下面這個屬性：

常用的6個屬性：

width ： 設置layout viewport 的寬度，為一個正整數，或字符串"width-device"

initial-scale：設置頁面的初始縮放值，為一個數字，可以帶小數

minimum-scale：允許用戶的最小縮放值，為一個數字，可以帶小數

maximum-scale：允許用戶的最大縮放值，為一個數字，可以帶小數

height：設置layout viewport 的高度，這個屬性并不重要，很少使用

user-scalable：是否允許用戶進行縮放，值為”no”或”yes”, no 代表不允許，yes代表允許

特殊說明：（IE6,7,8）支持，需要使用css3mediaqueries.js

X-UA-Compatible(瀏覽器采取何種版本渲染當前頁面)

說明：用于告知瀏覽器以何種版本來渲染頁面。（一般都設置為最新模式，在各大框架中這個設置也很常見。）舉例：

cache-control(指定請求和響應遵循的緩存機制)

說明：指定瀏覽器如何緩存某個響應以及緩存多長時間。舉例：

共有以下幾種用法：

 - no-cache: 先發送請求，與服務器確認該資源是否被更改，如果未被更改，則使用緩存。
 - no-store: 不允許緩存，每次都要去服務器上，下載完整的響應。（安全措施）
 - public : 緩存所有響應，但并非必須。因為max-age也可以做到相同效果。
 - private : 只為單個用戶緩存，因此不允許任何中繼進行緩存。（比如說CDN就不允許緩存private的響應）
 - maxage : 表示當前請求開始，該響應在多久內能被緩存和重用，而不去服務器重新請求。例如：max-age=60表示響應可以再緩存和重用 60 秒。

關于瀏覽器緩存，可移步至：瀏覽器緩存機制

expires(網頁到期時間)

說明:用于設定網頁的到期時間，過期后網頁必須到服務器上重新傳輸。舉例：

Pragma(cache模式)

說明：是用于設定禁止瀏覽器從本地機的緩存中調閱頁面內容，設定后一旦離開網頁就無法從Cache中再調出 。舉例：

＜meta http-equiv="pragma" content="no-cache"＞

Set-Cookie(cookie設定)

說明：如果網頁過期。那么這個網頁存在本地的cookies也會被自動刪除。舉例：

refresh(自動刷新并指向某頁面)

說明：網頁將在設定的時間內，自動刷新并調向設定的網址。舉例:

根據內容的結構，選擇合適的標簽（代碼語義化）恰當地表示文檔結構，便于開發者閱讀的同時讓瀏覽器的爬蟲和機器很好地解析。

在沒有css的情況下，也能很好的展示內容結構、代碼結構。

提升用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用。

有利于SEO：和搜索引擎建立良好的溝通，有助于爬蟲獲取更多有效的信息，爬蟲以來于標簽的上下文和各個關鍵字的權重。

方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備等）以有意義的方式渲染頁面。

便于團隊開發和維護，語義化更具可讀性，減少因為不遵循標準的差異化。

作為自然語言和純文本的補充

在 HTML5 中，就引入了這個表示 ruby 的標簽，它由ruby、rt、rp 三個標簽來實現。用于注音或者意思的注解。

漢 (ㄏㄢˋ)

用來表達一定的結構或者消除歧義

比如當沒有上下文時，如何消除歧義呢？這就要用到我們的 em 標簽，em 表示重音：

今天我吃了一個  蘋果 。
今天我吃了  一個  蘋果。

實際上，不僅僅是讀音，這里的意思也發生了變化。前一段中，表示我今天吃的是蘋果，而不是別的什么東西，后一段中，則表示我今天只吃了一個蘋果，沒有多吃。

語義化的 HTML 能夠支持自動生成目錄結構，HTML 標準中還專門規定了生成目錄結構的算法，即使我們并不打算深入實踐語義，也應該盡量在大的層面上保證這些元素的語義化使用。例如：

    
HTML 語義 
    
balah balah balah balah
    

        
 弱語義 
        
balah balah
    
    

        
 結構性元素 
        
balah balah
 
    
......

隨著越來越多的瀏覽器推出“閱讀模式”，以及各種非瀏覽器終端的出現，語義化的 HTML 適合機器閱讀的特性變得越來越重要。
應用了語義化結構的頁面，可以明確地提示出頁面信息的主次關系，它能讓瀏覽器很好地支持“閱讀視圖功能”，還可以讓搜索引擎的命中率提升，同時，它也對視障用戶的讀屏軟件更友好。例如：

    

        
    
    
    
……
    
……
    
……
    

可能少的使用無語義的標簽div和span。

在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利。

不要使用純樣式標簽，如：b、font、u等，改用css設置。

需要強調的文本，可以包含在strong或者em標簽中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）。具體原因，請移步至：HTML中strong與b,em與i標簽的區別

使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td。

表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途。

每個input標簽對應的說明文本都需要使用label標簽，并且通過為input設置id屬性，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來。

注意不要因為html5新標簽的出現，而隨意用之，錯誤的使用肯定會事與愿違。所以有些地方還是要用div的，就是因為div沒有任何意義的元素，他只是一個標簽，僅僅是用來構建外觀和結構。因此是最適合做容器的標簽。

    

        
網站標題
        
網站副標題