1.HTML5 為什么只需要寫 忿等？
答案解析：
HTML5不基于SGML，因此不需要對DTD進行引用崔挖，但是需要DOCTYPE來規(guī)范瀏覽器的行為（讓瀏覽器按照他們應(yīng)該的方式來運行）而HTML4.01基于SGML贸街，所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型狸相。
2薛匪、行內(nèi)元素有哪些？塊級元素有哪些脓鹃？ 空(void)元素有那些逸尖？
答案解析：
行內(nèi)元素：a??b??span??img??input??select??strong
塊級元素：div??ul??ol??li??dl??dt??dd??h1??h2??h3??h4??p??等
3、頁面導(dǎo)入樣式時瘸右，使用link和@import有什么區(qū)別娇跟？
答案解析：
1）link屬于XHTML標簽，而@import是css提供的太颤；
2）頁面被加載時苞俘，link會同時被加載，而@import引用的css會等到頁面被加載完再加載龄章；
3）@import只在IE5以上才能識別吃谣，而link是XHTML標簽乞封，無兼容問題；
4）link方式的樣式的權(quán)重高于@import的權(quán)重基协。
4、html5有哪些新特性菇用、移除了那些元素澜驮？如何處理HTML5新標簽的瀏覽器兼容問題？
答案解析：
新特性惋鸥，新增元素：
1）內(nèi)容元素：article杂穷、footer、header卦绣、nav耐量、section
2）表單控件：calendar、date滤港、time廊蜒、email、url溅漾、search
3）控件元素：webworker山叮，websockt，Geolocation
移除元素：
1）顯現(xiàn)層元素：basefont添履，big屁倔，center，font暮胧，s锐借，strike，tt往衷，u
2）性能較差元素：frame钞翔，frameset，noframes
處理兼容問題有兩種方式：
1）IE6/IE7/IE8支持通過document方法產(chǎn)生的標簽席舍，利用這一特性讓這些瀏覽器支持HTML5新標簽嗅战。
2）使用是html5shim框架
另外，DOCTYPE聲明的方式是區(qū)分HTML和HTML5標志的一個重要因素俺亮，此外驮捍，還可以根據(jù)新增的結(jié)構(gòu)，功能元素來加以區(qū)分脚曾。
5东且、如何區(qū)分 HTML 和 HTML5？
答案解析：
1）在文檔類型聲明上不同：
HTML是很長的一段代碼本讥，很難記住珊泳，而HTML5卻只有簡簡單單的聲明鲁冯，方便記憶。
2）在結(jié)構(gòu)語義上不同：
HTML：沒有體現(xiàn)結(jié)構(gòu)語義化的標簽色查，通常都是這樣來命名的
薯演，這樣表示網(wǎng)站的頭部。HTML5：在語義上卻有很大的優(yōu)勢秧了。提供了一些新的標簽跨扮，比如：
6、簡述一下你對HTML語義化的理解验毡？
答案解析：
1）用正確的標簽做正確的事情衡创；
2）html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰晶通，便于對瀏覽器璃氢、搜索引擎解析；
3）即使在沒有樣式css情況下也以一種文檔格式顯示狮辽，并且是容易閱讀的一也；
4）搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO喉脖；
5）使于都源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊塘秦，便于閱讀維護理解。
7动看、HTML5的離線儲存怎么使用尊剔，工作原理能不能解釋一下？
答案解析：
localStorage 長期存儲數(shù)據(jù)菱皆，瀏覽器關(guān)閉后數(shù)據(jù)不丟失须误；
sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除昌妹。
8冗尤、iframe有那些缺點馁筐？
答案解析：
1）在網(wǎng)頁中使用框架結(jié)構(gòu)最大的弊病是搜索引擎的“蜘蛛”程序無法解讀這種頁面铅协；
2）框架結(jié)構(gòu)有時會讓人感到迷惑，頁面很混亂昔园；
9泥张、Doctype作用??嚴格模式與混雜模式如何區(qū)分忽匈？它們有何意義?
答案解析：
1）聲明位于文檔中的最前面疲陕，處于標簽之前方淤。告知瀏覽器的解析器，用什么文檔類型規(guī)范來解析這個文檔蹄殃。
2）嚴格模式的排版和JS運作模式是以該瀏覽器支持的最高標準運行携茂。
3）在混雜模式中，頁面以寬松的向后兼容的方式顯示诅岩。模擬老式瀏覽器的行為以防止站點無法工作讳苦。
4）DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)带膜。
10、常見兼容性問題鸳谜？
1）png24位的圖片在IE6瀏覽器上出現(xiàn)背景膝藕；
解決方案是：做成PNG8；
2）瀏覽器默認的 margin 和 padding 不同咐扭。
解決方案是：加一個全局的*{margin:0;padding:0;}來統(tǒng)一芭挽。
3）IE6雙邊距bug：塊屬性標簽float后，又有橫行的 margin 情況下草描，在 IE6 顯示 margin 比設(shè)置的大览绿。浮動IE產(chǎn)生的雙倍距離 #box{float:left;width:10px;margin:0 0 0 100px;} 這種情況下IE6會產(chǎn)生200px的距離策严。
解決方法：加上_display：inline穗慕，使浮動忽略
4）IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性妻导，也可以使用getAttribute()獲取自定義屬性逛绵； Firefox下，只能使用getAttribute()獲取自定義屬性倔韭。
解決方法：統(tǒng)一通過getAttribute()獲取自定義屬性术浪。
5）IE下，even對象有x寿酌，y屬性胰苏，但是沒有pageX，pageY屬性醇疼，但是沒有x硕并，y屬性；
解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)秧荆。
6）Chrome中文界面下默認會將小于 12px 的文本強制按照 12px 顯示
解決方法：可通過加入 CSS 屬性 -webkt-text-size-adjust:none;解決
7）超鏈接訪問過后 hover 樣式就不出現(xiàn)了倔毙，被點擊訪問過的超鏈接樣式不在具有 hover 和 active ；
解決方法：改變CSS屬性的排列順序：L-V-H-A: a:link{ }??a:visited{ } a:hover{ } a:active{ }
11乙濒、如何實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信陕赃？
答案解析：
調(diào)用localstorge、cookies等本地存儲方式
12颁股、webSocket如何兼容低瀏覽器么库？
答案解析：
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 甘有、 基于 multipart 編碼發(fā)送 XHR 廊散、 基于長輪詢的 XHR
13、支持HTML5新標簽
答案解析：
1）IE8/IE7/IE6支持通過 document.createElement 方法產(chǎn)生的標簽梧疲，可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽允睹，瀏覽器支持新標簽后运准，還需要添加標簽?zāi)J的樣式；
2）當然最好的方式是直接使用成熟的框架缭受、使用最多的是 html5shim 框架
?src="http://html5shim.googlecode.com/svn/trunk/html5.js"
14胁澳、如何區(qū)分：DOCTYPE 聲明\新增的結(jié)構(gòu)元素\功能元素，語義化的理解米者？
答案解析：
1）用正確的標簽做正確的事情韭畸；
2）html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器蔓搞、搜索引擎解析胰丁；
3）在沒有樣式 CSS 情況下也以一種文檔格式顯示，并且是容易閱讀的喂分；
4）搜索引擎的爬蟲依賴于標記來確定上下文和各個關(guān)鍵字的權(quán)重锦庸，利用 SEO ；
5）使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊蒲祈，便于閱讀維護理解甘萧。
15、介紹一下 CSS 的盒子模型梆掸？
答案解析：
1）有兩種扬卷，IE 盒子模型、標準 W3C 盒子模型酸钦； IE 的 content 部分包含了 border 和 padding怪得；
2）盒模型：內(nèi)容（content）、填充（padding）卑硫、邊界（margin）徒恋、邊框（border）。
16拔恰、CSS 選擇符有哪些因谎？哪些屬性可以繼承？優(yōu)先級算法如何計算颜懊？ CSS3 新增偽類有哪些财岔？
答案解析：
1）id 選擇器（#myid）
2）類選擇器（.myclassname）
3）標簽選擇器（div，h1河爹，p）
4）相鄰選擇器（h1 + p）
5）子選擇器（ul > li）
6）后代選擇器（li a）
7）通配符選擇器（* ）
8）屬性選擇器（ a[rel = "external"]）
9）偽類選擇器（a:?hover,?li:?nth?-?child）
17匠璧、可繼承的樣式：?font-size?font-family?color,?UL?LI?DL?DD?DT
18、不可繼承的樣式：border padding margin width height
19咸这、優(yōu)先級就近原則夷恍，同權(quán)重情況下樣式定義最近者為準
20、載入樣式以最后載入的定位為準;
解析答案：優(yōu)先級為: !important >??id > class > tag??媳维；???important?比?內(nèi)聯(lián)優(yōu)先級高?
21酿雪、CSS3新增偽類舉例：
答案解析：
p:first-of-type? ?選擇屬于其父元素的首個
元素的每個
元素遏暴；
p:last-of-type? ?選擇屬于其父元素的最后
元素的每個
元素；
p:only-of-type??選擇屬于其父元素唯一的?
?元素的每個?
?元素指黎；
p:only-child????選擇屬于其父元素的唯一子元素的每個?
?元素朋凉；
p:nth-child(2)??選擇屬于其父元素的第二個子元素的每個?
?元素；
:enabled??:disabled?控制表單控件的禁用狀態(tài)醋安；
:checked????????單選框或復(fù)選框被選中杂彭。
22、如何居中div吓揪？ 如何居中一個浮動元素亲怠？
答案解析：
給div 設(shè)置一個寬度，然后添加 margin:0 auto 屬性柠辞；div{width:200px;?margin:0?auto;?}
23团秽、居中一個浮動元素
答案解析：
確定容器的寬高??寬500 高300的層，設(shè)置層的外邊距
.div{width:500px;height:300px;margin:-150px 0 0 -250px;position:relative;background:green钾腺；left：50%徙垫；頭：50%}
24讥裤、css3有哪些新特性放棒？
答案解析：
CSS3 實現(xiàn)圓角（border-radius:8px;），陰影（box-shadow:10px）,對文字加特效（text-shadow）,線性漸變（gradient）己英，旋轉(zhuǎn)（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉(zhuǎn)间螟，縮放，定位损肛，傾斜
增加了更多的 css 選擇器 多背景 rgba
25厢破、為什么要初始化 CSS 樣式
答案解析：
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的治拿，如果沒對 CSS 初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異摩泪。
當然，初始化樣式會對 SEO 有一定的影響劫谅，但魚和熊掌不可兼得见坑，但力求影響最小的情況下初始化。
最簡單的初始化方法是：*{padding:0;margin:0} (不建議)
淘寶的樣式初始化：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input,
textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }
26捏检、display:inline-block?什么時候會顯示間隙荞驴？
答案解析：
移除空格，使用margin 負值贯城、使用 font-size:0熊楼、letter-spacing 、word-spacing
27能犯、使用 CSS 預(yù)處理器嗎鲫骗？喜歡哪個犬耻？
答案解析：SASS
28、什么是盒子模型执泰？
答案解析：
在網(wǎng)頁中香追，一個元素占有空間的大小由幾個部分構(gòu)成，其中包括元素的內(nèi)容（content）坦胶，元素的內(nèi)邊距（padding）透典，元素的邊框（border），元素的外邊距（margin）四個部分顿苇。這四個部分占有的空間中峭咒，有的部分可以顯示相應(yīng)的內(nèi)容，而有的部分只用來分隔相鄰的區(qū)域或區(qū)域纪岁。4個部分一起構(gòu)成了css中元素的盒模型凑队。
29、CSS實現(xiàn)垂直水平居中
答案解析：
一道經(jīng)典的問題幔翰，實現(xiàn)方法有很多種漩氨，以下是其中一種實現(xiàn)：
HTML結(jié)構(gòu)：
????
CSS：
.wrapper{position:relative;}
????.content{
????????background-color:#6699FF;
????????width:200px;
????????height:200px;
????????position:absolute;????????//父元素需要相對定位
????????top:50%;
????????left:50%;
????????margin-top:-100px;??//二分之一的height，width
????????margin-left:
-100px;
????}
30遗增、簡述一下src與href的區(qū)別
答案解析：
href 是指向網(wǎng)絡(luò)資源所在位置叫惊，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用于超鏈接做修。
src是指向外部資源的位置霍狰，指向的內(nèi)容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi)饰及，例如js腳本蔗坯，img圖片和frame等元素。當瀏覽器解析到該元素時燎含，會暫停其他資源的下載和處理宾濒，直到將該資源加載、編譯屏箍、執(zhí)行完畢绘梦，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內(nèi)铣除。這也是為什么將js腳本放在底部而不是頭部谚咬。
31、簡述同步和異步的區(qū)別
答案解析：
同步是阻塞模式尚粘，異步是非阻塞模式择卦。
同步就是指一個進程在執(zhí)行某個請求的時候，若該請求需要一段時間才能返回信息，那么這個進程將會一直等待下去秉继，直到收到返回信息才繼續(xù)執(zhí)行下去祈噪；
異步是指進程不需要一直等下去，而是繼續(xù)執(zhí)行下面的操作尚辑，不管其他進程的狀態(tài)辑鲤。當有消息返回時系統(tǒng)會通知進程進行處理，這樣可以提高執(zhí)行的效率杠茬。
32月褥、px和em的區(qū)別
答案解析：
px和em都是長度單位，區(qū)別是瓢喉，px的值是固定的宁赤，指定是多少就是多少，計算比較容易栓票。em得值不是固定的决左，并且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px走贪。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px佛猛。那么12px=0.75em, 10px=0.625em
33、瀏覽器的內(nèi)核分別是什么?
答案解析：
IE: trident內(nèi)核
Firefox：gecko內(nèi)核
Safari：webkit內(nèi)核
Opera：以前是presto內(nèi)核坠狡，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核
Chrome：Blink(基于webkit继找，Google與Opera Software共同開發(fā))
