69道HTML 面試知識點總結(jié)

IE5.5 引入了文檔模式的概念，而這個概念是通過使用文檔類型（DOCTYPE）切換實現(xiàn)的。
聲明位于 HTML 文檔中的第一行，處于  標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個文檔。
DOCTYPE 不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。

  聲明一般位于文檔的第一行，它的作用主要是告訴瀏覽器以什么樣的模式來解析文檔。一般指定了之后會以標(biāo)準(zhǔn)模式來進行文檔解析，否則就以兼容模式進行解析。在標(biāo)準(zhǔn)模式下，瀏覽器的解析規(guī)則都是按照最新的標(biāo)準(zhǔn)進行解析的。而在兼容模式下，瀏覽器會以向后兼容的方式來模擬老式瀏覽器的行為，以保證一些老的網(wǎng)站的正確訪問。
在 html5 之后不再需要指定 DTD 文檔，因為 html5 以前的 html 文檔都是基于 SGML 的，所以需要通過指定 DTD 來定義文檔中允許的屬性以及一些規(guī)則。而 html5 不再基于 SGML 了，所以不再需要使用 DTD。

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

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

SGML 是標(biāo)準(zhǔn)通用標(biāo)記語言，是一種定義電子文檔結(jié)構(gòu)和描述其內(nèi)容的國際標(biāo)準(zhǔn)語言，是所有電子文檔標(biāo)記語言的起源。
HTML 是超文本標(biāo)記語言，主要是用于規(guī)定怎么顯示網(wǎng)頁。
XML 是可擴展標(biāo)記語言是未來網(wǎng)頁語言的發(fā)展方向，XML 和 HTML 的最大區(qū)別就在于 XML 的標(biāo)簽是可以自己創(chuàng)建的，數(shù)量無限多，而 HTML 的標(biāo)簽都是固定的而且數(shù)量有限。
XHTML 也是現(xiàn)在基本上所有網(wǎng)頁都在用的標(biāo)記語言，他其實和 HTML 沒什么本質(zhì)的區(qū)別，標(biāo)簽都一樣，用法也都一樣，就是比 HTML 更嚴(yán)格，比如標(biāo)簽必須都用小寫，標(biāo)簽都必須有閉合標(biāo)簽等。

DTD（ Document Type Definition 文檔類型定義）是一組機器可讀的規(guī)則，它們定義 XML 或 HTML 的特定版本中所有允許元素及它們的屬性和層次關(guān)系的定義。在解析網(wǎng)頁時，瀏覽器將使用這些規(guī)則檢查頁面的有效性并且采取相應(yīng)的措施。
DTD 是對 HTML 文檔的聲明，還會影響瀏覽器的渲染模式（工作模式）。

HTML4 中，元素被分成兩大類: inline （內(nèi)聯(lián)元素）與 block（塊級元素）。一個行內(nèi)元素只占據(jù)它對應(yīng)標(biāo)簽的邊框所包含的空間。
常見的行內(nèi)元素有 a b span img strong sub sup button input label select textarea

塊級元素占據(jù)其父元素（容器）的整個寬度，因此創(chuàng)建了一個“塊”。
常見的塊級元素有  div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p 

HTML4中，元素被分成兩大類：inline （內(nèi)聯(lián)元素）與 block （塊級元素）。
（1） 格式上，默認情況下，行內(nèi)元素不會以新行開始，而塊級元素會新起一行。（2） 內(nèi)容上，默認情況下，行內(nèi)元素只能包含文本和其他行內(nèi)元素。而塊級元素可以包含行內(nèi)元素和其他塊級元素。（3） 行內(nèi)元素與塊級元素屬性的不同，主要是盒模型屬性上：行內(nèi)元素設(shè)置 width 無效，height 無效（可以設(shè)置 line-hei     ght），設(shè)置 margin 和 padding 的上下不會對其他元素產(chǎn)生影響。

HTML4中，元素被分成兩大類: inline（內(nèi)聯(lián)元素）與 block（塊級元素）。但在實際的開發(fā)過程中，因為頁面表現(xiàn)的需要，前端工程師經(jīng)常把 inline 元素的 display 值設(shè)定為 block （比如 a 標(biāo)簽），也經(jīng)常把 block 元素的 display 值設(shè)定為inline 之后更是出現(xiàn)了 inline-block 這一對外呈現(xiàn) inline 對內(nèi)呈現(xiàn) block 的屬性。因此，簡單地把 HTML 元素劃分為inline 與 block 已經(jīng)不再符合實際需求。
HTML5中，元素主要分為7類：Metadata Flow Sectioning Heading Phrasing Embedded Interactive

標(biāo)簽內(nèi)沒有內(nèi)容的 HTML 標(biāo)簽被稱為空元素?？赵厥窃陂_始標(biāo)簽中關(guān)閉的。
常見的空元素有：br hr img input link meta

link 標(biāo)簽定義文檔與外部資源的關(guān)系。
link 元素是空元素，它僅包含屬性。此元素只能存在于 head 部分，不過它可出現(xiàn)任何次數(shù)。
link 標(biāo)簽中的 rel 屬性定義了當(dāng)前文檔與被鏈接文檔之間的關(guān)系。常見的 stylesheet 指的是定義一個外部加載的樣式表。

（1）從屬關(guān)系區(qū)別。@import 是 CSS 提供的語法規(guī)則，只有導(dǎo)入樣式表的作用；link 是 HTML 提供的標(biāo)簽，不僅可以加     載 CSS 文件，還可以定義 RSS、rel 連接屬性、引入網(wǎng)站圖標(biāo)等。
（2）加載順序區(qū)別。加載頁面時，link 標(biāo)簽引入的 CSS 被同時加載；@import 引入的 CSS 將在頁面加載完畢后被加載。
（3）兼容性區(qū)別。@import 是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link 標(biāo)簽作為 HTML 元素，不存在兼容     性問題。
（4）DOM 可控性區(qū)別?？梢酝ㄟ^ JS 操作 DOM ，插入 link 標(biāo)簽來改變樣式；由于 DOM 方法是基于文檔的，無法使用 @i    mport 的方式插入樣式。

瀏覽器的主要功能是將用戶選擇的 web 資源呈現(xiàn)出來，它需要從服務(wù)器請求資源，并將其顯示在瀏覽器窗口中，資源的格式通常是 HTML，也包括 PDF、image 及其他格式。用戶用 URI（Uniform Resource Identifier 統(tǒng)一資源標(biāo)識符）來指定所請求資源的位置。
HTML 和 CSS 規(guī)范中規(guī)定了瀏覽器解釋 html 文檔的方式，由 W3C 組織對這些規(guī)范進行維護，W3C 是負責(zé)制定 web 標(biāo)準(zhǔn)的組織。
但是瀏覽器廠商紛紛開發(fā)自己的擴展，對規(guī)范的遵循并不完善，這為 web 開發(fā)者帶來了嚴(yán)重的兼容性問題。
簡單來說瀏覽器可以分為兩部分，shell 和 內(nèi)核。
其中 shell 的種類相對比較多，內(nèi)核則比較少。shell 是指瀏覽器的外殼：例如菜單，工具欄等。主要是提供給用戶界面操作，參數(shù)設(shè)置等等。它是調(diào)用內(nèi)核來實現(xiàn)各種功能的。內(nèi)核才是瀏覽器的核心。內(nèi)核是基于標(biāo)記語言顯示內(nèi)容的程序或模塊。也有一些 瀏覽器并不區(qū)分外殼和內(nèi)核。從 Mozilla 將 Gecko 獨立出來后，才有了外殼和內(nèi)核的明確劃分。

主要分成兩部分：渲染引擎和 JS 引擎。
渲染引擎的職責(zé)就是渲染，即在瀏覽器窗口中顯示所請求的內(nèi)容。默認情況下，渲染引擎可以顯示 html、xml 文檔及圖片，它也可以借助插件（一種瀏覽器擴展）顯示其他類型數(shù)據(jù)，例如使用 PDF 閱讀器插件，可以顯示 PDF 格式。
JS 引擎：解析和執(zhí)行 javascript 來實現(xiàn)網(wǎng)頁的動態(tài)效果。
最開始渲染引擎和 JS 引擎并沒有區(qū)分的很明確，后來 JS 引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。

Trident：這種瀏覽器內(nèi)核是 IE 瀏覽器用的內(nèi)核，因為在早期 IE 占有大量的市場份額，所以這種內(nèi)核比較流行，以前有很多網(wǎng)頁也是根據(jù)這個內(nèi)核的標(biāo)準(zhǔn)來編寫的，但是實際上這個內(nèi)核對真正的網(wǎng)頁標(biāo)準(zhǔn)支持不是很好。但是由于 IE 的高市場占有率，微軟也很長時間沒有更新 Trident 內(nèi)核，就導(dǎo)致了 Trident 內(nèi)核和 W3C 標(biāo)準(zhǔn)脫節(jié)。還有就是 Trident 內(nèi)核的大量 Bug 等安全問題沒有得到解決，加上一些專家學(xué)者公開自己認為 IE 瀏覽器不安全的觀點，使很多用戶開始轉(zhuǎn)向其他瀏覽器。
Gecko：這是 Firefox 和 Flock 所采用的內(nèi)核，這個內(nèi)核的優(yōu)點就是功能強大、豐富，可以支持很多復(fù)雜網(wǎng)頁效果和瀏覽器擴展接口，但是代價是也顯而易見就是要消耗很多的資源，比如內(nèi)存。
Presto：Opera 曾經(jīng)采用的就是 Presto 內(nèi)核，Presto 內(nèi)核被稱為公認的瀏覽網(wǎng)頁速度最快的內(nèi)核，這得益于它在開發(fā)時的天生優(yōu)勢，在處理 JS 腳本等腳本語言時，會比其他的內(nèi)核快3倍左右，缺點就是為了達到很快的速度而丟掉了一部分網(wǎng)頁兼容性。
Webkit：Webkit 是 Safari 采用的內(nèi)核，它的優(yōu)點就是網(wǎng)頁瀏覽速度較快，雖然不及 Presto 但是也勝于 Gecko 和 Trident，缺點是對于網(wǎng)頁代碼的容錯性不高，也就是說對網(wǎng)頁代碼的兼容性較低，會使一些編寫不標(biāo)準(zhǔn)的網(wǎng)頁無法正確顯示。WebKit 前身是 KDE 小組的 KHTML 引擎，可以說 WebKit 是 KHTML 的一個開源的分支。
Blink：谷歌在 Chromium Blog 上發(fā)表博客，稱將與蘋果的開源瀏覽器核心 Webkit 分道揚鑣，在 Chromium 項目中研發(fā) Blink 渲染引擎（即瀏覽器核心），內(nèi)置于 Chrome 瀏覽器之中。其實 Blink 引擎就是 Webkit 的一個分支，就像 webkit 是KHTML 的分支一樣。Blink 引擎現(xiàn)在是谷歌公司與 Opera Software 共同研發(fā)，上面提到過的，Opera 棄用了自己的 Presto 內(nèi)核，加入 Google 陣營，跟隨谷歌一起研發(fā) Blink。

（1） IE 瀏覽器內(nèi)核：Trident 內(nèi)核，也是俗稱的 IE 內(nèi)核；
 （2） Chrome 瀏覽器內(nèi)核：統(tǒng)稱為 Chromium 內(nèi)核或 Chrome 內(nèi)核，以前是 Webkit 內(nèi)核，現(xiàn)在是 Blink內(nèi)核；
 （3） Firefox 瀏覽器內(nèi)核：Gecko 內(nèi)核，俗稱 Firefox 內(nèi)核；
 （4） Safari 瀏覽器內(nèi)核：Webkit 內(nèi)核；
 （5） Opera 瀏覽器內(nèi)核：最初是自己的 Presto 內(nèi)核，后來加入谷歌大軍，從 Webkit 又到了 Blink 內(nèi)核；
 （6） 360瀏覽器、獵豹瀏覽器內(nèi)核：IE + Chrome 雙內(nèi)核；
 （7） 搜狗、遨游、QQ 瀏覽器內(nèi)核：Trident（兼容模式）+ Webkit（高速模式）；
 （8） 百度瀏覽器、世界之窗內(nèi)核：IE 內(nèi)核；
 （9） 2345瀏覽器內(nèi)核：好像以前是 IE 內(nèi)核，現(xiàn)在也是 IE + Chrome 雙內(nèi)核了；
 （10）UC 瀏覽器內(nèi)核：這個眾口不一，UC 說是他們自己研發(fā)的 U3 內(nèi)核，但好像還是基于 Webkit 和 Trident ，還有說      是基于火狐內(nèi)核。

 （1）首先解析收到的文檔，根據(jù)文檔定義構(gòu)建一棵 DOM 樹，DOM 樹是由 DOM 元素及屬性節(jié)點組成的。
 （2）然后對 CSS 進行解析，生成 CSSOM 規(guī)則樹。
 （3）根據(jù) DOM 樹和 CSSOM 規(guī)則樹構(gòu)建渲染樹。渲染樹的節(jié)點被稱為渲染對象，渲染對象是一個包含有顏色和大小等屬性的矩     形，渲染對象和 DOM 元素相對應(yīng)，但這種對應(yīng)關(guān)系不是一對一的，不可見的 DOM 元素不會被插入渲染樹。還有一些 DOM      元素對應(yīng)幾個可見對象，它們一般是一些具有復(fù)雜結(jié)構(gòu)的元素，無法用一個矩形來描述。
 （4）當(dāng)渲染對象被創(chuàng)建并添加到樹中，它們并沒有位置和大小，所以當(dāng)瀏覽器生成渲染樹以后，就會根據(jù)渲染樹來進行布局（也     可以叫做回流）。這一階段瀏覽器要做的事情是要弄清楚各個節(jié)點在頁面中的確切位置和大小。通常這一行為也被稱為“自動     重排”。
 （5）布局階段結(jié)束后是繪制階段，遍歷渲染樹并調(diào)用渲染對象的 paint 方法將它們的內(nèi)容顯示在屏幕上，繪制使用 UI 基礎(chǔ)組     件。
  值得注意的是，這個過程是逐步完成的，為了更好的用戶體驗，渲染引擎將會盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會等到所有的  html 都解析完成之后再去構(gòu)建和布局 render 樹。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時，可能還在通過網(wǎng)絡(luò)下載其  余內(nèi)容。

JavaScript 的加載、解析與執(zhí)行會阻塞文檔的解析，也就是說，在構(gòu)建 DOM 時，HTML 解析器若遇到了 JavaScript，那么 它會暫停文檔的解析，將控制權(quán)移交給 JavaScript 引擎，等 JavaScript 引擎運行完畢，瀏覽器再從中斷的地方恢復(fù)繼續(xù)解 析文檔。
 也就是說，如果你想首屏渲染的越快，就越不應(yīng)該在首屏就加載 JS 文件，這也是都建議將 script 標(biāo)簽放在 body 標(biāo)簽底部的?原因。當(dāng)然在當(dāng)下，并不是說?script?標(biāo)簽必須放在底部，因為你可以給?script?標(biāo)簽添加?defer?或者?async?屬性

 （1）腳本沒有 defer 或 async，瀏覽器會立即加載并執(zhí)行指定的腳本，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)     行。
 （2）defer 屬性表示延遲執(zhí)行引入的 JavaScript，即這段 JavaScript 加載時 HTML 并未停止解析，這兩個過程是并行的。     當(dāng)整個 document 解析完畢后再執(zhí)行腳本文件，在 DOMContentLoaded 事件觸發(fā)之前完成。多個腳本按順序執(zhí)行。
 （3）async 屬性表示異步執(zhí)行引入的 JavaScript，與 defer 的區(qū)別在于，如果已經(jīng)加載好，就會開始執(zhí)行，也就是說它的執(zhí)     行仍然會阻塞文檔的解析，只是它的加載過程不會阻塞。多個腳本的執(zhí)行順序無法保證。

 Webkit 和 Firefox 都做了這個優(yōu)化，當(dāng)執(zhí)行 JavaScript 腳本時，另一個線程解析剩下的文檔，并加載后面需要通過網(wǎng)絡(luò)加 載的資源。這種方式可以使資源并行加載從而使整體速度更快。需要注意的是，預(yù)解析并不改變 DOM 樹，它將這個工作留給主解析 過程，自己只解析外部資源的引用，比如外部腳本、樣式表及圖片。

 理論上，既然樣式表不改變 DOM 樹，也就沒有必要停下文檔的解析等待它們，然而，存在一個問題，JavaScript 腳本執(zhí)行時可 能在文檔的解析過程中請求樣式信息，如果樣式還沒有加載和解析，腳本將得到錯誤的值，顯然這將會導(dǎo)致很多問題。
 所以如果瀏覽器尚未完成 CSSOM 的下載和構(gòu)建，而我們卻想在此時運行腳本，那么瀏覽器將延遲 JavaScript 腳本執(zhí)行和文檔 的解析，直至其完成 CSSOM 的下載和構(gòu)建。也就是說，在這種情況下，瀏覽器會先下載和構(gòu)建 CSSOM，然后再執(zhí)行 JavaScript， 最后再繼續(xù)文檔的解析。

 FOUC：主要指的是樣式閃爍的問題，由于瀏覽器渲染機制（比如firefox），在 CSS 加載之前，先呈現(xiàn)了 HTML，就會導(dǎo)致展示       出無樣式內(nèi)容，然后樣式突然呈現(xiàn)的現(xiàn)象。會出現(xiàn)這個問題的原因主要是 css 加載時間過長，或者 css 被放在了文檔底       部。
 白屏：有些瀏覽器渲染機制（比如chrome）要先構(gòu)建 DOM 樹和 CSSOM 樹，構(gòu)建完成后再進行渲染，如果 CSS 部分放在 HTML       尾部，由于 CSS 未加載完成，瀏覽器遲遲未渲染，從而導(dǎo)致白屏；也可能是把 js 文件放在頭部，腳本的加載會阻塞后面      文檔內(nèi)容的解析，從而頁面遲遲未渲染出來，出現(xiàn)白屏問題。

 為盡快完成首次渲染，我們需要最大限度減小以下三種可變因素：
 （1）關(guān)鍵資源的數(shù)量。 （2）關(guān)鍵路徑長度。 （3）關(guān)鍵字節(jié)的數(shù)量。
 關(guān)鍵資源是可能阻止網(wǎng)頁首次渲染的資源。這些資源越少，瀏覽器的工作量就越小，對 CPU 以及其他資源的占用也就越少。
 同樣，關(guān)鍵路徑長度受所有關(guān)鍵資源與其字節(jié)大小之間依賴關(guān)系圖的影響：某些資源只能在上一資源處理完畢之后才能開始下載， 并且資源越大，下載所需的往返次數(shù)就越多。
 最后，瀏覽器需要下載的關(guān)鍵字節(jié)越少，處理內(nèi)容并讓其出現(xiàn)在屏幕上的速度就越快。要減少字節(jié)數(shù)，我們可以減少資源數(shù)（將它 們刪除或設(shè)為非關(guān)鍵資源），此外還要壓縮和優(yōu)化各項資源，確保最大限度減小傳送大小。
 優(yōu)化關(guān)鍵渲染路徑的常規(guī)步驟如下：
 （1）對關(guān)鍵路徑進行分析和特性描述：資源數(shù)、字節(jié)數(shù)、長度。 （2）最大限度減少關(guān)鍵資源的數(shù)量：刪除它們，延遲它們的下載，將它們標(biāo)記為異步等。 （3）優(yōu)化關(guān)鍵字節(jié)數(shù)以縮短下載時間（往返次數(shù)）。 （4）優(yōu)化其余關(guān)鍵資源的加載順序：您需要盡早下載所有關(guān)鍵資產(chǎn)，以縮短關(guān)鍵路徑長度。

 重繪: 當(dāng)渲染樹中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀、風(fēng)格，而不會影響布局的操作，比如 background       -color，我們將這樣的操作稱為重繪。
 回流：當(dāng)渲染樹中的一部分（或全部）因為元素的規(guī)模尺寸、布局、隱藏等改變而需要重新構(gòu)建的操作，會影響到布局的操作，這樣      的操作我們稱為回流。
 常見引起回流屬性和方法：
 任何會改變元素幾何信息（元素的位置和尺寸大?。┑牟僮?，都會觸發(fā)回流。
 （1）添加或者刪除可見的 DOM 元素； （2）元素尺寸改變——邊距、填充、邊框、寬度和高度 （3）內(nèi)容變化，比如用戶在 input 框中輸入文字 （4）瀏覽器窗口尺寸改變——resize事件發(fā)生時 （5）計算 offsetWidth 和 offsetHeight 屬性 （6）設(shè)置 style 屬性的值 （7）當(dāng)你修改網(wǎng)頁的默認字體時。
 回流必定會發(fā)生重繪，重繪不一定會引發(fā)回流。回流所需的成本比重繪高的多，改變父節(jié)點里的子節(jié)點很可能會導(dǎo)致父節(jié)點的一系列 回流。

 （1）使用 transform 替代 top
 （2）不要把節(jié)點的屬性值放在一個循環(huán)里當(dāng)成循環(huán)里的變量
 （3）不要使用 table 布局，可能很小的一個小改動會造成整個 table 的重新布局
 （4）把 DOM 離線后修改。如：使用 documentFragment 對象在內(nèi)存里操作 DOM
?（5）不要一條一條地修改?DOM?的樣式。與其這樣，還不如預(yù)先定義好?css?的?class，然后修改?DOM?的?className

 一些 DOM 的操作或者屬性訪問可能會引起頁面的回流和重繪，從而引起性能上的消耗。

 當(dāng)初始的 HTML 文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發(fā)，而無需等待樣式表、圖像和 子框架的加載完成。
 Load 事件是當(dāng)所有資源加載完成后觸發(fā)的。

 HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。
 新增的有：
 繪畫 canvas; 用于媒介回放的 video 和 audio 元素; 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失; sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除; 語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section; 表單控件，calendar、date、time、email、url、search; 新的技術(shù) webworker, websocket; 新的文檔屬性 document.visibilityState
 移除的元素有：
 純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u; 對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes；

 （1） IE8/IE7/IE6 支持通過 document.createElement 方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器     支持 HTML5 新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J的樣式。
 （2） 當(dāng)然也可以直接使用成熟的框架，比如 html5shiv ;      ``
      [if lte IE 9]……[endif] 判斷 IE 的版本，限定只有 IE9 以下瀏覽器版本需要執(zhí)行的語句。

 （1） 用正確的標(biāo)簽做正確的事情。 （2） html 語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析; （3） 即使在沒有樣式 CSS 情況下也以一種文檔格式顯示，并且是容易閱讀的; （4） 搜索引擎的爬蟲也依賴于 HTML 標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于 SEO ; （5） 使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。

 我認為 html 語義化主要指的是我們應(yīng)該使用合適的標(biāo)簽來劃分網(wǎng)頁內(nèi)容的結(jié)構(gòu)。html 的本質(zhì)作用其實就是定義網(wǎng)頁文檔的結(jié)構(gòu)， 一個語義化的文檔，能夠使頁面的結(jié)構(gòu)更加清晰，易于理解。這樣不僅有利于開發(fā)者的維護和理解，同時也能夠使機器對文檔內(nèi)容進 行正確的解讀。比如說我們常用的 b 標(biāo)簽和 strong 標(biāo)簽，它們在樣式上都是文字的加粗，但是 strong 標(biāo)簽擁有強調(diào)的語義。 對于一般顯示來說，可能我們看上去沒有差異，但是對于機器來說，就會有很大的不同。如果用戶使用的是屏幕閱讀器來訪問網(wǎng)頁的 話，使用 strong 標(biāo)簽就會有明顯的語調(diào)上的變化，而 b 標(biāo)簽則沒有。如果是搜索引擎的爬蟲對我們網(wǎng)頁進行分析的話，那么它會 依賴于 html 標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重，一個語義化的文檔對爬蟲來說是友好的，是有利于爬蟲對文檔內(nèi)容解讀的， 從而有利于我們網(wǎng)站的 SEO 。從 html5 我們可以看出，標(biāo)準(zhǔn)是傾向于以語義化的方式來構(gòu)建網(wǎng)頁的，比如新增了 header 、fo oter 這些語義標(biāo)簽，刪除了 big 、font 這些沒有語義的標(biāo)簽。

 從頁面顯示效果來看，被  和  包圍的文字將會被加粗，而被  和  包圍的文字將以斜體的形式呈現(xiàn)。
 但是   是自然樣式標(biāo)簽，分別表示無意義的加粗，無意義的斜體，表現(xiàn)樣式為 { font-weight: bolder}，僅僅表示「這 里應(yīng)該用粗體顯示」或者「這里應(yīng)該用斜體顯示」，此兩個標(biāo)簽在 HTML4.01 中并不被推薦使用。
 而  和  是語義樣式標(biāo)簽。 表示一般的強調(diào)文本，而  表示比  語義更強的強調(diào)文本。
 使用閱讀設(shè)備閱讀網(wǎng)頁時： 會重讀，而  是展示強調(diào)內(nèi)容。

 （1）合理的 title、description、keywords：搜索對著三項的權(quán)重逐個減小，title 值強調(diào)重點即可，重要關(guān)鍵詞出現(xiàn)不要超     過2次，而且要靠前，不同頁面 title 要有所不同；description 把頁面內(nèi)容高度概括，長度合適，不可過分堆砌關(guān)鍵詞，不     同頁面 description 有所不同；keywords 列舉出重要關(guān)鍵詞即可。
 （2）語義化的 HTML 代碼，符合 W3C 規(guī)范：語義化代碼讓搜索引擎容易理解網(wǎng)頁。
 （3）重要內(nèi)容 HTML 代碼放在最前：搜索引擎抓取 HTML 順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內(nèi)容肯定被     抓取。
 （4）重要內(nèi)容不要用 js 輸出：爬蟲不會執(zhí)行 js 獲取內(nèi)容
 （5）少用 iframe：搜索引擎不會抓取 iframe 中的內(nèi)容
 （6）非裝飾性圖片必須加 alt
 （7）提高網(wǎng)站速度：網(wǎng)站速度是搜索引擎排序的一個重要指標(biāo)

 在用戶沒有與因特網(wǎng)連接時，可以正常訪問站點或應(yīng)用，在用戶與因特網(wǎng)連接時，更新用戶機器上的緩存文件。
 原理：HTML5 的離線存儲是基于一個新建的 .appcache 文件的緩存機制（不是存儲技術(shù)），通過這個文件上的解析清單離線存儲資      源，這些資源就會像 cookie 一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面      展示。
 如何使用：
 （1）創(chuàng)建一個和 html 同名的 manifest 文件，然后在頁面頭部像下面一樣加入一個 manifest 的屬性。
     
 （2）在如下 cache.manifest 文件的編寫離線存儲的資源。     CACHE MANIFEST     #v0.11     CACHE:     js/app.js     css/style.css     NETWORK:     resourse/logo.png     FALLBACK:     / /offline.html
     CACHE: 表示需要離線存儲的資源列表，由于包含 manifest 文件的頁面將被自動離線存儲，所以不需要把頁面自身也列出            來。
     NETWORK: 表示在它下面列出來的資源只有在在線的情況下才能訪問，他們不會被離線存儲，所以在離線情況下無法使用這些              資源。不過，如果在 CACHE 和 NETWORK 中有一個相同的資源，那么這個資源還是會被離線存儲，也就是說 C              ACHE 的優(yōu)先級更高。
     FALLBACK: 表示如果訪問第一個資源失敗，那么就使用第二個資源來替換他，比如上面這個文件表示的就是如果訪問根目錄下               任何一個資源失敗了，那么就去訪問 offline.html 。
 （3）在離線狀態(tài)時，操作 window.applicationCache 進行離線緩存的操作。

 如何更新緩存：
 （1）更新 manifest 文件 （2）通過 javascript 操作 （3）清除瀏覽器緩存
 注意事項：
 （1）瀏覽器對緩存數(shù)據(jù)的容量限制可能不太一樣（某些瀏覽器設(shè)置的限制是每個站點 5MB）。 （2）如果 manifest 文件，或者內(nèi)部列舉的某一個文件不能正常下載，整個更新過程都將失敗，瀏覽器繼續(xù)全部使用老的緩存。 （3）引用 manifest 的 html 必須與 manifest 文件同源，在同一個域下。 （4）FALLBACK 中的資源必須和 manifest 文件同源。 （5）當(dāng)一個資源被緩存后，該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源。 （6）站點中的其他頁面即使沒有設(shè)置 manifest 屬性，請求的資源如果在緩存中也從緩存中訪問。 （7）當(dāng) manifest 文件發(fā)生改變時，資源請求本身也會觸發(fā)更新。

在線的情況下，瀏覽器發(fā)現(xiàn) html 頭部有 manifest 屬性，它會請求 manifest 文件，如果是第一次訪問 app ，那么瀏覽器 就會根據(jù) manifest 文件的內(nèi)容下載相應(yīng)的資源并且進行離線存儲。如果已經(jīng)訪問過 app 并且資源已經(jīng)離線存儲了，那么瀏覽器 就會使用離線的資源加載頁面，然后瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發(fā)生改變，就不做 任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。
 離線的情況下，瀏覽器就直接使用離線存儲的資源。

 瀏覽器常見的存儲技術(shù)有 cookie、localStorage 和 sessionStorage。
 還有兩種存儲技術(shù)用于大規(guī)模數(shù)據(jù)存儲，webSQL（已被廢除）和 indexDB。
 IE 支持 userData 存儲數(shù)據(jù)，但是基本很少使用到，除非有很強的瀏覽器兼容需求。

 SessionStorage， LocalStorage， Cookie 這三者都可以被用來在瀏覽器端存儲數(shù)據(jù)，而且都是字符串類型的鍵值對。區(qū)別 在于前兩者屬于 HTML5 WebStorage，創(chuàng)建它們的目的便于客戶端存儲數(shù)據(jù)。而 cookie 是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶 本地終端上的數(shù)據(jù)（通常經(jīng)過加密）。cookie 數(shù)據(jù)始終在同源（協(xié)議、主機、端口相同）的 http 請求中攜帶（即使不需要），會 在瀏覽器和服務(wù)器間來回傳遞。

 存儲大小：     cookie 數(shù)據(jù)大小不能超過4 k 。     sessionStorage 和 localStorage 雖然也有存儲大小的限制，但比 cookie 大得多，可以達到 5M 或更大。
 有期時間：     localStorage    存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)。     sessionStorage  數(shù)據(jù)在頁面會話結(jié)束時會被清除。頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復(fù)頁面仍會                     保持原來的頁面會話。在新標(biāo)簽或窗口打開一個頁面時會在頂級瀏覽上下文中初始化一個新的會話。     cookie          設(shè)置的 cookie 過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉。
 作用域：     sessionStorage  只在同源的同窗口（或標(biāo)簽頁）中共享數(shù)據(jù)，也就是只在當(dāng)前會話中共享。     localStorage    在所有同源窗口中都是共享的。     cookie          在所有同源窗口中都是共享的。

 瀏覽器端常用的存儲技術(shù)是 cookie 、localStorage 和 sessionStorage。
 cookie 其實最開始是服務(wù)器端用于記錄用戶狀態(tài)的一種方式，由服務(wù)器設(shè)置，在客戶端存儲，然后每次發(fā)起同源請求時，發(fā)送給服 務(wù)器端。cookie 最多能存儲 4 k 數(shù)據(jù)，它的生存時間由 expires 屬性指定，并且 cookie 只能被同源的頁面訪問共享。
 sessionStorage 是 html5 提供的一種瀏覽器本地存儲的方法，它借鑒了服務(wù)器端 session 的概念，代表的是一次會話中所保 存的數(shù)據(jù)。它一般能夠存儲 5M 或者更大的數(shù)據(jù)，它在當(dāng)前窗口關(guān)閉后就失效了，并且 sessionStorage 只能被同一個窗口的同源 頁面所訪問共享。
 localStorage 也是 html5 提供的一種瀏覽器本地存儲的方法，它一般也能夠存儲 5M 或者更大的數(shù)據(jù)。它和 sessionStorage  不同的是，除非手動刪除它，否則它不會失效，并且 localStorage 也只能被同源頁面所訪問共享。
 上面幾種方式都是存儲少量數(shù)據(jù)的時候的存儲方式，當(dāng)我們需要在本地存儲大量數(shù)據(jù)的時候，我們可以使用瀏覽器的 indexDB 這是瀏 覽器提供的一種本地的數(shù)據(jù)庫存儲機制。它不是關(guān)系型數(shù)據(jù)庫，它內(nèi)部采用對象倉庫的形式存儲數(shù)據(jù)，它更接近 NoSQL 數(shù)據(jù)庫。

 iframe 元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）。
 主要缺點有：
 （1） iframe 會阻塞主頁面的 onload 事件。window 的 onload 事件需要在所有 iframe 加載完畢后（包含里面的元素）才      會觸發(fā)。在 Safari 和 Chrome 里，通過 JavaScript 動態(tài)設(shè)置 iframe 的 src 可以避免這種阻塞情況。 （2） 搜索引擎的檢索程序無法解讀這種頁面，不利于網(wǎng)頁的 SEO 。 （3） iframe 和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。 （4） 瀏覽器的后退按鈕失效。 （5） 小型的移動設(shè)備無法完全顯示框架。

label 標(biāo)簽來定義表單控制間的關(guān)系，當(dāng)用戶選擇該標(biāo)簽時，瀏覽器會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
 Number: 

 autocomplete 屬性規(guī)定輸入字段是否應(yīng)該啟用自動完成功能。默認為啟用，設(shè)置為 autocomplete=off 可以關(guān)閉該功能。
 自動完成允許瀏覽器預(yù)測對字段的輸入。當(dāng)用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，應(yīng)該顯示出在字段中填寫的選項。
 autocomplete 屬性適用于 
，以及下面的  類型：text, search, url, telephone, email, password,  datepickers, range 以及 color。

（1）使用 WebSocket，通信的標(biāo)簽頁連接同一個服務(wù)器，發(fā)送消息到服務(wù)器后，服務(wù)器推送消息給所有連接的客戶端。
 （2）使用 SharedWorker （只在 chrome 瀏覽器實現(xiàn)了），兩個頁面共享同一個線程，通過向線程發(fā)送數(shù)據(jù)和接收數(shù)據(jù)來實現(xiàn)標(biāo)     簽頁之間的雙向通行。
 （3）可以調(diào)用 localStorage、cookies 等本地存儲方式，localStorge 另一個瀏覽上下文里被添加、修改或刪除時，它都會觸     發(fā)一個 storage 事件，我們通過監(jiān)聽 storage 事件，控制它的值來進行頁面信息通信；
 （4）如果我們能夠獲得對應(yīng)標(biāo)簽頁的引用，通過 postMessage 方法也是可以實現(xiàn)多個標(biāo)簽頁通信的。

 實現(xiàn)多個標(biāo)簽頁之間的通信，本質(zhì)上都是通過中介者模式來實現(xiàn)的。因為標(biāo)簽頁之間沒有辦法直接通信，因此我們可以找一個中介者， 讓標(biāo)簽頁和中介者進行通信，然后讓這個中介者來進行消息的轉(zhuǎn)發(fā)。
 第一種實現(xiàn)的方式是使用 websocket 協(xié)議，因為 websocket 協(xié)議可以實現(xiàn)服務(wù)器推送，所以服務(wù)器就可以用來當(dāng)做這個中介者。 標(biāo)簽頁通過向服務(wù)器發(fā)送數(shù)據(jù)，然后由服務(wù)器向其他標(biāo)簽頁推送轉(zhuǎn)發(fā)。
 第二種是使用 ShareWorker 的方式，shareWorker 會在頁面存在的生命周期內(nèi)創(chuàng)建一個唯一的線程，并且開啟多個頁面也只會使 用同一個線程。這個時候共享線程就可以充當(dāng)中介者的角色。標(biāo)簽頁間通過共享一個線程，然后通過這個共享的線程來實現(xiàn)數(shù)據(jù)的交 換。
 第三種方式是使用 localStorage 的方式，我們可以在一個標(biāo)簽頁對 localStorage 的變化事件進行監(jiān)聽，然后當(dāng)另一個標(biāo)簽頁 修改數(shù)據(jù)的時候，我們就可以通過這個監(jiān)聽事件來獲取到數(shù)據(jù)。這個時候 localStorage 對象就是充當(dāng)?shù)闹薪檎叩慕巧?/span>
 還有一種方式是使用 postMessage 方法，如果我們能夠獲得對應(yīng)標(biāo)簽頁的引用，我們就可以使用 postMessage 方法，進行通信。

 Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 編碼發(fā)送 XHR 、 基于長輪詢的 XHR

 這個新的 API 的意義在于，通過監(jiān)聽網(wǎng)頁的可見性，可以預(yù)判網(wǎng)頁的卸載，還可以用來節(jié)省資源，減緩電能的消耗。比如，一旦用戶 不看網(wǎng)頁，下面這些網(wǎng)頁行為都是可以暫停的。
 （1）對服務(wù)器的輪詢 （2）網(wǎng)頁動畫 （3）正在播放的音頻或視頻

 （1）純 html 實現(xiàn)，使用  來給  圖像標(biāo)記熱點區(qū)域的方式，     標(biāo)簽用來定義圖像映射中的區(qū)域，area 元素永遠嵌套在 map 元素內(nèi)部，我們可以將 area 區(qū)域設(shè)置為圓形，從而實現(xiàn)可點擊     的圓形區(qū)域。
 （2）純 css 實現(xiàn)，使用 border-radius ，當(dāng) border-radius 的長度等于寬高相等的元素值的一半時，即可實現(xiàn)一個圓形的     點擊區(qū)域。
 （3）純 js 實現(xiàn)，判斷一個點在不在圓上的簡單算法，通過監(jiān)聽文檔的點擊事件，獲取每次點擊時鼠標(biāo)的位置，判斷該位置是否在我     們規(guī)定的圓形區(qū)域內(nèi)。

 title 屬性沒有明確意義只表示是個標(biāo)題，h1 則表示層次明確的標(biāo)題，對頁面信息的抓取也有很大的影響。

 title 通常當(dāng)鼠標(biāo)滑動到元素上的時候顯示
 alt 是  的特有屬性，是圖片內(nèi)容的等價描述，用于圖片無法加載時顯示、讀屏器閱讀圖片?？商釄D片高可訪問性，除了純裝 飾圖片外都必須設(shè)置有意義的值，搜索引擎會重點分析。

 Canvas 是一種通過 JavaScript 來繪制 2D 圖形的方法。Canvas 是逐像素來進行渲染的，因此當(dāng)我們對 Canvas 進行縮放時， 會出現(xiàn)鋸齒或者失真的情況。
 SVG 是一種使用 XML 描述 2D 圖形的語言。SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。我們可以為某個元素 附加 JavaScript 事件監(jiān)聽函數(shù)。并且 SVG 保存的是圖形的繪制方法，因此當(dāng) SVG 圖形縮放時并不會失真。

 （1）區(qū)分用戶是計算機還是人的公共全自動程序?？梢苑乐箰阂馄平饷艽a、刷票、論壇灌水 （2）有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試

 漸進增強：針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的         用戶體驗。
 優(yōu)雅降級：一開始就根據(jù)高版本瀏覽器構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容。

 attribute 是 dom 元素在文檔中作為 html 標(biāo)簽擁有的屬性； property 就是 dom 元素在 js 中作為對象擁有的屬性。 對于 html 的標(biāo)準(zhǔn)屬性來說，attribute 和 property 是同步的，是會自動更新的， 但是對于自定義的屬性來說，他們是不同步的。

 可用性（Usability）：產(chǎn)品是否容易上手，用戶能否完成任務(wù)，效率如何，以及這過程中用戶的主觀感受可好，是從用戶的角度來看 產(chǎn)品的質(zhì)量。可用性好意味著產(chǎn)品質(zhì)量高，是企業(yè)的核心競爭力
 可訪問性（Accessibility）：Web 內(nèi)容對于殘障用戶的可閱讀和可理解性
 可維護性（Maintainability）：一般包含兩個層次，一是當(dāng)系統(tǒng)出現(xiàn)問題時，快速定位并解決問題的成本，成本低則可維護性好。 二是代碼是否容易被人理解，是否容易修改和增強功能。

（1）  IE6 2 個并發(fā) （2）  iE7 升級之后的 6 個并發(fā)，之后版本也是 6 個 （3）  Firefox，chrome 也是6個

 Flash： （1） Flash 適合處理多媒體、矢量圖形、訪問機器 （2） 對 CSS、處理文本上不足，不容易被搜索
 Ajax： （1） Ajax 對 CSS、文本支持很好，支持搜索 （2） 多媒體、矢量圖形、機器訪問不足
 共同點： （1） 與服務(wù)器的無刷新傳遞消息 （2） 可以檢測用戶離線和在線狀態(tài) （3） 操作 DOM

（1） 編寫 CSS （2） 讓頁面結(jié)構(gòu)更合理化，提升用戶體驗 （3） 實現(xiàn)良好的頁面效果和提升性能

* 用戶界面   * 主進程   * 內(nèi)核       * 渲染引擎       * JS 引擎           * 執(zhí)行棧       * 事件觸發(fā)線程           * 消息隊列               * 微任務(wù)               * 宏任務(wù)       * 網(wǎng)絡(luò)異步線程       * 定時器線程

  元素可提供有關(guān)頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。  標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。 標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對。
   H5標(biāo)準(zhǔn)聲明，使用 HTML5 doctype，不區(qū)分大小寫  標(biāo)準(zhǔn)的 lang 屬性寫法     聲明文檔使用的字符編碼    優(yōu)先使用 IE 最新版本和 Chrome        頁面描述       頁面關(guān)鍵詞者     網(wǎng)頁作       搜索引擎抓取  為移動設(shè)備添加 viewport  iOS 設(shè)備 begin   添加到主屏后的標(biāo)題（iOS 6 新增） 是否啟用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄  添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）    設(shè)置蘋果工具欄顏色   啟用360瀏覽器的極速模式(webkit)      避免IE使用兼容模式     不讓百度轉(zhuǎn)碼      針對手持設(shè)備優(yōu)化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓    微軟的老式瀏覽器    uc強制豎屏     QQ強制豎屏               UC強制全屏        QQ強制全屏    UC應(yīng)用模式     QQ應(yīng)用模式     windows phone 點擊無高光 設(shè)置頁面不緩存   

為什么會有 CSS Reset 的存在呢？那是因為早期的瀏覽器支持和理解的 CSS 規(guī)范不同，導(dǎo)致渲染頁面時效果不一致，會出現(xiàn)很多 兼容性問題。
 reset 的目的，是將所有的瀏覽器的自帶樣式重置掉，這樣更易于保持各瀏覽器渲染的一致性。
 normalize 的理念則是盡量保留瀏覽器的默認樣式，不進行太多的重置，而盡力讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合。

 1.Normalize.css 保護了有價值的默認值
 Reset 通過為幾乎所有的元素施加默認樣式，強行使得元素有相同的視覺效果。相比之下，Normalize.css 保持了許多默認的瀏 覽器樣式。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。當(dāng)一個元素在不同的瀏覽器中有不同的默認值時，Normali ze.css 會力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合。

 2.Normalize.css 修復(fù)了瀏覽器的 bug
 它修復(fù)了常見的桌面端和移動端瀏覽器的 bug。這往往超出了 Reset 所能做到的范疇。關(guān)于這一點，Normalize.css 修復(fù)的問題 包含了 HTML5 元素的顯示設(shè)置、預(yù)格式化文字的 font-size 問題、在 IE9 中 SVG 的溢出、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中 的與表單相關(guān)的 bug。

 3.Normalize.css 沒有復(fù)雜的繼承鏈
 使用 Reset 最讓人困擾的地方莫過于在瀏覽器調(diào)試工具中大段大段的繼承鏈。在 Normalize.css 中就不會有這樣的問題，因為在 我們的準(zhǔn)則中對多選擇器的使用時非常謹慎的，我們僅會有目的地對目標(biāo)元素設(shè)置樣式。

 4.Normalize.css 是模塊化的
 這個項目已經(jīng)被拆分為多個相關(guān)卻又獨立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值。因此這能讓你自己 選擇性地移除掉某些永遠不會用到部分（比如表單的一般化）。

 5.Normalize.css 擁有詳細的文檔
 Normalize.css 的代碼基于詳細而全面的跨瀏覽器研究與測試。這個文件中擁有詳細的代碼說明并在 Github Wiki 中有進一步的 說明。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，并且你可以更容易地進行自己 的測試。

 css reset 是最早的一種解決瀏覽器間樣式不兼容問題的方案，它的基本思想是將瀏覽器的所有樣式都重置掉，從而達到所有瀏覽器 樣式保持一致的效果。但是使用這種方法，可能會帶來一些性能上的問題，并且對于一些元素的不必要的樣式的重置，其實反而會造成 畫蛇添足的效果。
 后面出現(xiàn)一種更好的解決瀏覽器間樣式不兼容的方法，就是 normalize.css ，它的思想是盡量的保留瀏覽器自帶的樣式，通過在原 有的樣式的基礎(chǔ)上進行調(diào)整，來保持各個瀏覽器間的樣式表現(xiàn)一致。相對與 css reset，normalize.css 的方法保留了有價值的默 認值，并且修復(fù)了一些瀏覽器的 bug，而且使用 normalize.css 不會造成元素復(fù)雜的繼承鏈。

 預(yù)格式化就是保留文字在源碼中的格式 最后顯示出來樣式與源碼中的樣式一致 所見即所得。
 
 定義預(yù)格式文本，保持文本原有的格式

 DHTML 將 HTML、JavaScript、DOM 以及 CSS 組合在一起，用于創(chuàng)造動態(tài)性更強的網(wǎng)頁。通過 JavaScript 和 HTML DOM，能 夠動態(tài)地改變 HTML 元素的樣式。
 DHTML 實現(xiàn)了網(wǎng)頁從 Web 服務(wù)器下載后無需再經(jīng)過服務(wù)的處理，而在瀏覽器中直接動態(tài)地更新網(wǎng)頁的內(nèi)容、排版樣式和動畫的功 能。例如，當(dāng)鼠標(biāo)指針移到文章段落中時，段落能夠變成藍色，或者當(dāng)鼠標(biāo)指針移到一個超級鏈接上時，會自動生成一個下拉式子鏈 接目錄等。
 包括： （1）動態(tài)內(nèi)容（Dynamic Content）：動態(tài)地更新網(wǎng)頁內(nèi)容，可“動態(tài)”地插入、修改或刪除網(wǎng)頁的元件，如文字、圖像、標(biāo)記等。
 （2）動態(tài)排版樣式（Dynamic Style Sheets）：W3C 的 CSS 樣式表提供了設(shè)定 HTML 標(biāo)記的字體大小、字形、樣式、粗細、     文字顏色、行高度、加底線或加中間橫線、縮排、與邊緣距離、靠左右或置中、背景圖片或顏色等排版功能，而“動態(tài)排版樣     式”即可以“動態(tài)”地改變排版樣式。

  標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供 元信息等等。
 文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題、在 Web 中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù) 據(jù)都不會真正作為內(nèi)容顯示給讀者。
 下面這些標(biāo)簽可用在 head 部分：, , , 
<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>

<del id="afajh"><form id="afajh"></form></del>


<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>


伊人网亚洲
|
亚洲综合精品久久婷婷无码专区
|
中文字幕五码
|
麻豆操逼片
|
欧美色图小说
|