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

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

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

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

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

HTML5 不基于 SGML，因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們?cè)撚械姆绞絹磉\(yùn)行）
而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型。

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

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

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

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

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

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

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

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

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

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

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

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

DOCTYPE聲明

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

新增功能元素

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

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

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

XML屬性必須放在引號(hào)中。

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

XML中空格不會(huì)被自動(dòng)刪除。

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

在移動(dòng)端開發(fā)，最常看到head里面設(shè)置了下面這個(gè)屬性：

常用的6個(gè)屬性：

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

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

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

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

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

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

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

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

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

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

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

共有以下幾種用法：

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

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

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

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

Pragma(cache模式)

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

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

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

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

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

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

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

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

提升用戶體驗(yàn)：例如title、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用。

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

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

便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，減少因?yàn)椴蛔裱瓨?biāo)準(zhǔn)的差異化。

作為自然語言和純文本的補(bǔ)充

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

漢 (ㄏㄢˋ)

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

比如當(dāng)沒有上下文時(shí)，如何消除歧義呢？這就要用到我們的 em 標(biāo)簽，em 表示重音：

今天我吃了一個(gè)  蘋果 。
今天我吃了  一個(gè)  蘋果。

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

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

    
HTML 語義 
    
balah balah balah balah
    

        
 弱語義 
        
balah balah
    
    

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

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

    

        
    
    
    
……
    
……
    
……
    

可能少的使用無語義的標(biāo)簽div和span。

在語義不明顯時(shí)，既可以使用div或者p時(shí)，盡量用p, 因?yàn)?b>p在默認(rèn)情況下有上下間距，對(duì)兼容特殊終端有利。

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

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

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

表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途。

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

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

    

        
網(wǎng)站標(biāo)題
        
網(wǎng)站副標(biāo)題