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

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

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

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

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

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

總體上應(yīng)該分為三類： HTML5，HTML4.01，XHTML。

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

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

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

過度模式：允許使用展示性元素、棄用元素（比如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聲明

新增結(jié)構(gòu)元素

新增功能元素

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

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

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

XML屬性必須放在引號中。

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

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

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

在移動端開發(fā)，最?？吹絟ead里面設(shè)置了下面這個屬性：

常用的6個屬性：

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

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

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

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

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

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

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

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

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

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

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

共有以下幾種用法：

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

關(guān)于瀏覽器緩存，可移步至：瀏覽器緩存機制

expires(網(wǎng)頁到期時間)

說明:用于設(shè)定網(wǎng)頁的到期時間，過期后網(wǎng)頁必須到服務(wù)器上重新傳輸。舉例：

Pragma(cache模式)

說明：是用于設(shè)定禁止瀏覽器從本地機的緩存中調(diào)閱頁面內(nèi)容，設(shè)定后一旦離開網(wǎng)頁就無法從Cache中再調(diào)出 。舉例：

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

Set-Cookie(cookie設(shè)定)

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

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

說明：網(wǎng)頁將在設(shè)定的時間內(nèi)，自動刷新并調(diào)向設(shè)定的網(wǎng)址。舉例:

根據(jù)內(nèi)容的結(jié)構(gòu)，選擇合適的標簽（代碼語義化）恰當?shù)乇硎疚臋n結(jié)構(gòu)，便于開發(fā)者閱讀的同時讓瀏覽器的爬蟲和機器很好地解析。

在沒有css的情況下，也能很好的展示內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu)。

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

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

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

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

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

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

漢 (ㄏㄢˋ)

用來表達一定的結(jié)構(gòu)或者消除歧義

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

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

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

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

    
HTML 語義 
    
balah balah balah balah
    

        
 弱語義 
        
balah balah
    
    

        
 結(jié)構(gòu)性元素 
        
balah balah
 
    
......

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

    

        
    
    
    
……
    
……
    
……
    

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

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

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

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

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

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

每個input標簽對應(yīng)的說明文本都需要使用label標簽，并且通過為input設(shè)置id屬性，在lable標簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來。

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

    

        
網(wǎng)站標題
        
網(wǎng)站副標題