摘要：標(biāo)準(zhǔn)模式的排版和運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。控制表單控件的禁用狀態(tài)。首先，巧妙的使用這一標(biāo)記，將游覽器從所有情況中分離出來(lái)。

聲明位于位于HTML文檔中的第一行，處于?標(biāo)簽之前。告知瀏覽器的解析器,用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。
標(biāo)準(zhǔn)模式的排版?和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。

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

首先：CSS規(guī)范規(guī)定，每個(gè)元素都有display屬性，確定該元素的類型，每個(gè)元素都有默認(rèn)的display值，如div的display默認(rèn)值為“block”，則為“塊級(jí)”元素；span默認(rèn)display屬性值為“inline”，是“行內(nèi)”元素。
（1）行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語(yǔ)氣）
（2）塊級(jí)元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：

WebSocket、也可以調(diào)用localstorge、cookies等本地存儲(chǔ)方式，還可以使用頁(yè)面的路有參數(shù)傳遞
localstorge另一個(gè)瀏覽上下文里被添加、修改或刪除時(shí)，它都會(huì)觸發(fā)一個(gè)事件，
我們通過監(jiān)聽事件，控制它的值來(lái)進(jìn)行頁(yè)面信息通信；
14.如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？
map+area或者svg
border-radius
純js實(shí)現(xiàn)?需要求一個(gè)點(diǎn)在不在圓上簡(jiǎn)單算法、獲取鼠標(biāo)坐標(biāo)等等

title屬性沒有明確意義只表示是個(gè)標(biāo)題，H1則表示層次明確的標(biāo)題，對(duì)頁(yè)面信息的抓取也有很大的影響；
strong是標(biāo)明重點(diǎn)內(nèi)容，有語(yǔ)氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí)：會(huì)重讀，而是展示強(qiáng)調(diào)內(nèi)容。
?i內(nèi)容展示為斜體，em表示強(qiáng)調(diào)的文本；

h5新增的屬性
可以通過ele.dataset獲取到標(biāo)簽上的data-x的屬性
返回一個(gè)對(duì)象

解決：解決方案是做成PNG8.

解決：方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一。

解決：解決方案是在float的標(biāo)簽樣式控制中加入?——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)
?? ??? ??? ?? ? ?漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。
?? ??? ??? ??? ??首先，巧妙的使用“9”這一標(biāo)記，將IE游覽器從所有情況中分離出來(lái)。?接著，再次使用“+”將IE8和IE7、IE6分離開來(lái)，這樣IE8已經(jīng)獨(dú)立識(shí)別。
css
?

.bb{ 
?? background-color:#f1ee18;/*所有識(shí)別*/ 
? .background-color:#00deff9; /*IE6、7、8識(shí)別*/ 
? +background-color:#a200ff;/*IE6、7識(shí)別*/ 
? _background-color:#1e0bd1;/*IE6識(shí)別*/ 
? } 

解決：解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.

解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。

解決：可通過加入?CSS 屬性?-webkit-text-size-adjust: none; 解決.

解決：方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

該標(biāo)簽可聲明三種?DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的?HTML 文檔。
HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及?Frameset。
XHTML 1.0 規(guī)定了三種?XML 文檔類型：Strict、Transitional 以及?Frameset。
Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁(yè)，而?Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁(yè)。

1）所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記
2）所有標(biāo)簽的元素和屬性的名字都必須使用小寫
3）所有的XML標(biāo)記都必須合理嵌套
4）所有的屬性必須用引號(hào)""括起來(lái)
5）把所有<和&特殊符號(hào)用編碼表示
6）給所有屬性賦一個(gè)值
7）不要在注釋內(nèi)容中使“--”
8）圖片必須有說明文字

20.的title和alt有什么區(qū)別？

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

改版的時(shí)候更方便?只要改css文件。
頁(yè)面加載速度更快、結(jié)構(gòu)化清晰、頁(yè)面顯示簡(jiǎn)潔。
表現(xiàn)與結(jié)構(gòu)相分離。
易于優(yōu)化（seo）搜索引擎更友好，排名更容易靠前。

派生選擇器（用HTML標(biāo)簽申明）
id選擇器（用DOM的ID申明）
類選擇器（用一個(gè)樣式類名申明）
屬性選擇器（用DOM的屬性申明，屬于CSS2，IE6不支持，不常用，不知道就算了）
除了前3種基本選擇器，還有一些擴(kuò)展選擇器，包括
后代選擇器（利用空格間隔，比如div?.a{??}）
群組選擇器（利用逗號(hào)間隔，比如p,div,#a{??}）
那么問題來(lái)了，CSS選擇器的優(yōu)先級(jí)是怎么樣定義的？

一般而言，選擇器越特殊，它的優(yōu)先級(jí)越高。也就是選擇器指向的越準(zhǔn)確，它的優(yōu)先級(jí)就越高。
復(fù)雜的計(jì)算方法：
用1表示派生選擇器的優(yōu)先級(jí)
用10表示類選擇器的優(yōu)先級(jí)
用100標(biāo)示ID選擇器的優(yōu)先級(jí)
div.test1?.span?var?優(yōu)先級(jí)?1+10?+10?+1
span#xxx?.songs?li?優(yōu)先級(jí)1+100?+?10?+?1
xxx?li?優(yōu)先級(jí)?100?+1
那么問題來(lái)了，看下列代碼，

標(biāo)簽內(nèi)的文字是什么顏色的？

123

中的先后關(guān)系無(wú)關(guān)。

塊級(jí)元素(block)特性：
總是獨(dú)占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;
內(nèi)聯(lián)元素(inline)特性：
和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設(shè)置的），就是里面文字或圖片的大小。
那么問題來(lái)了，瀏覽器還有默認(rèn)的天生inline-block元素（擁有內(nèi)在尺寸，可設(shè)置高寬，但不會(huì)自動(dòng)換行），有哪些？
答案： 、 、 、 、。

24.什么是外邊距重疊？重疊的結(jié)果是什么？

外邊距重疊就是margin-collapse。
在CSS當(dāng)中，相鄰的兩個(gè)盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個(gè)多帶帶的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。
折疊結(jié)果遵循下列計(jì)算規(guī)則：
兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值。
兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值。
兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。

25.rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能實(shí)現(xiàn)透明效果，但最大的不同是opacity作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度，
而rgba()只作用于元素的顏色或其背景色。（設(shè)置rgba透明的元素的子元素不會(huì)繼承透明效果！）

26.CSS 選擇符有哪些？哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算？ CSS3新增偽類有那些？

*   1.id選擇器（ # myid）
    2.類選擇器（.myclassname）
    3.標(biāo)簽選擇器（div, h1, p）
    4.相鄰選擇器（h1 + p）
    5.子選擇器（ul < li）
    6.后代選擇器（li a）
    7.通配符選擇器（ * ）
    8.屬性選擇器（a[rel = "external"]）
    9.偽類選擇器（a: hover, li: nth - child）
*   可繼承： font-size font-family color, UL LI DL DD DT;
*   不可繼承 ：border padding margin width height ;
*   優(yōu)先級(jí)就近原則，樣式定義最近者為準(zhǔn);
*   載入樣式以最后載入的定位為準(zhǔn);

優(yōu)先級(jí)為:

   !important >  id > class > tag  
   important 比 內(nèi)聯(lián)優(yōu)先級(jí)高

CSS3新增偽類舉例：

p:first-of-type 選擇屬于其父元素的首個(gè) 
 元素的每個(gè) 
 元素。
p:last-of-type  選擇屬于其父元素的最后 
 元素的每個(gè) 
 元素。
p:only-of-type  選擇屬于其父元素唯一的 
 元素的每個(gè) 
 元素。
p:only-child    選擇屬于其父元素的唯一子元素的每個(gè) 
 元素。
p:nth-child(2)  選擇屬于其父元素的第二個(gè)子元素的每個(gè) 
 元素。
:enabled、:disabled 控制表單控件的禁用狀態(tài)。
:checked，單選框或復(fù)選框被選中。

27.如何居中div,如何居中一個(gè)浮動(dòng)元素?

給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性

div{

width:200px;
margin:0 auto;

}

居中一個(gè)浮動(dòng)元素

  確定容器的寬高 寬500 高 300 的層
  設(shè)置層的外邊距

.div {
Width:500px ; height:300px;//高度可以不設(shè)
Margin: -150px 0 0 -250px;
position:relative;相對(duì)定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}

28.瀏覽器的內(nèi)核分別是什么?經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？

*  IE瀏覽器的內(nèi)核Trident、 Mozilla的Gecko、google的WebKit、Opera內(nèi)核Presto；
*  png24為的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.
*  瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一。
*  IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。 
  浮動(dòng)ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;} 
 這種情況之下IE會(huì)產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)
  漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。 
  首先，巧妙的使用“9”這一標(biāo)記，將IE游覽器從所有情況中分離出來(lái)。 
  接著，再次使用“+”將IE8和IE7、IE6分離開來(lái)，這樣IE8已經(jīng)獨(dú)立識(shí)別。

css

  .bb{
   background-color:#f1ee18;/*所有識(shí)別*/
  .background-color:#00deff9; /*IE6、7、8識(shí)別*/
  +background-color:#a200ff;/*IE6、7識(shí)別*/
  _background-color:#1e0bd1;/*IE6識(shí)別*/
  }


*  IE下,可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性,
   也可以使用getAttribute()獲取自定義屬性;
   Firefox下,只能使用getAttribute()獲取自定義屬性. 
   解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.
*  IE下,even對(duì)象有x,y屬性,但是沒有pageX,pageY屬性; 
  Firefox下,event對(duì)象有pageX,pageY屬性,但是沒有x,y屬性.
* （條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。
*  Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
超鏈接訪問過后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

29.css優(yōu)先級(jí)算法如何計(jì)算？

!important > id > class > 標(biāo)簽
!important 比 內(nèi)聯(lián)優(yōu)先級(jí)高

優(yōu)先級(jí)就近原則，樣式定義最近者為準(zhǔn);

以最后載入的樣式為準(zhǔn);

30.哪些css屬性可以繼承？

可繼承： font-size font-family color, ul li dl dd dt;
不可繼承 ：border padding margin width height ;

DOM

講 DOM 先從 HTML 講起，講 HTML 先從 XML 講起。XML 是一種可擴(kuò)展的標(biāo)記語(yǔ)言，所謂可擴(kuò)展就是它可以描述任何結(jié)構(gòu)化的數(shù)據(jù)，它是一棵樹！

1.documen.write和 innerHTML的區(qū)別

document.write只能重繪整個(gè)頁(yè)面
innerHTML可以重繪頁(yè)面的一部分

2.DOM操作——怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)? 1）創(chuàng)建新節(jié)點(diǎn)

createDocumentFragment() ? ?//創(chuàng)建一個(gè)DOM片段
createElement() ? //創(chuàng)建一個(gè)具體的元素
createTextNode() ? //創(chuàng)建一個(gè)文本節(jié)點(diǎn)

2）添加、移除、替換、插入

appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)

3）查找

getElementsByTagName() ? ?//通過標(biāo)簽名稱
getElementsByName() ? ?//通過元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)，會(huì)得到一個(gè)數(shù)組，其中包括id等于name值的)
getElementById() ? ?//通過元素Id，唯一性

3.attribute和property的區(qū)別是什么？

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

4.src和href的區(qū)別

src用于替換當(dāng)前元素，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。
Src source,指向外部資源的位置,如果我們添加瀏覽器會(huì)暫停其他資源的下載和處理,直到該資源加載,編譯,執(zhí)行完畢(圖片和框架也是如此),這也就是為什么js腳本要放在底部。
src用于替換當(dāng)前元素,href用于在當(dāng)前文檔和引入資源之間建立聯(lián)系。

存儲(chǔ) cookie

cookie 本身不是用來(lái)做服務(wù)器端存儲(chǔ)的（計(jì)算機(jī)領(lǐng)域有很多這種“狗拿耗子”的例子，例如 CSS 中的 float），它是設(shè)計(jì)用來(lái)在服務(wù)器和客戶端進(jìn)行信息傳遞的，因此我們的每個(gè) HTTP 請(qǐng)求都帶著 cookie。但是 cookie 也具備瀏覽器端存儲(chǔ)的能力（例如記住用戶名和密碼），因此就被開發(fā)者用上了。
使用起來(lái)也非常簡(jiǎn)單，document.cookie = ....即可。
但是 cookie 有它致命的缺點(diǎn)：
存儲(chǔ)量太小，只有 4KB
所有 HTTP 請(qǐng)求都帶著，會(huì)影響獲取資源的效率
API 簡(jiǎn)單，需要封裝才能用

locationStorage 和 sessionStorage

后來(lái)，HTML5 標(biāo)準(zhǔn)就帶來(lái)了sessionStorage和localStorage，先拿localStorage來(lái)說，它是專門為了瀏覽器端緩存而設(shè)計(jì)的。

其優(yōu)點(diǎn)有：

存儲(chǔ)量增大到 5MB
不會(huì)帶到 HTTP 請(qǐng)求中
API 適用于數(shù)據(jù)存儲(chǔ) localStorage.setItem(key, value) localStorage.getItem(key)
sessionStorage的區(qū)別就在于它是根據(jù) session 過去時(shí)間而實(shí)現(xiàn)，而localStorage會(huì)永久有效，應(yīng)用場(chǎng)景不同。例如，一些需要及時(shí)失效的重要信息放在sessionStorage中，一些不重要但是不經(jīng)常設(shè)置的信息，放在localStorage中。

對(duì)WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí)

標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用外 鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁(yè)面速度更快、內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件，容易維 護(hù)、改版方便，不需要變動(dòng)頁(yè)面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性；