W3C標(biāo)準(zhǔn)

DOCTYPE 是 document type 的簡寫，用來說明你用的 XHTML 或者 HTML 是什么版本。其中的 DTD (例如 xhtml1-transitional.dtd)叫文檔類型定義，里面包含了文檔的規(guī)則，瀏覽器就根據(jù)你定義的 DTD 來解釋你頁面的標(biāo)識(shí)，并展現(xiàn)出來撼唾。

說說你對(duì)語義化的理解？

• 去掉或者丟失樣式的時(shí)候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
• 有利于 SEO：和搜索引擎建立良好溝通哥蔚，有助于爬蟲抓取更多的有效信息（爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重）倒谷；
• 方便其他設(shè)備解析（如屏幕閱讀器蛛蒙、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來渲染網(wǎng)頁渤愁；
• 便于團(tuán)隊(duì)開發(fā)和維護(hù)牵祟，更具可讀性。

Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分抖格？它們有何意義?

• 聲明位于文檔中的最前面诺苹，處于 html 標(biāo)簽之前。告知瀏覽器以何種模式來渲染文檔雹拄。
• 嚴(yán)格模式的排版和 JS 運(yùn)作模式是 以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行收奔。
• 在混雜模式中，頁面以寬松的向后兼容的方式顯示滓玖。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作坪哄。
• DOCTYPE 不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。

你知道多少種 Doctype 文檔類型呢撞？

• 該標(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)頁，而 Quirks （包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁祝钢。

HTML 與 XHTML——二者有什么區(qū)別

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

常見兼容性問題

• png24 位的圖片在 iE6 瀏覽器上出現(xiàn)背景，解決方案是做成 PNG8拦英，也可以引用一段腳本處理蜒什。
• 瀏覽器默認(rèn)的 margin 和 padding 不同。解決方案是加一個(gè)全局的 *{margin:0;padding:0;}
• 浮動(dòng) ie 產(chǎn)生的雙倍距離（IE6 雙邊距問題：在 IE6 下疤估，如果對(duì)元素設(shè)置了浮動(dòng)灾常，同時(shí)又設(shè)置了margin-left 或 margin-right，margin 值會(huì)加倍铃拇。）
  #box{ float:left; width:10px; margin:0 0 0 10px;}钞瀑，這種情況之下 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游覽器從所有情況中分離出來壹士。   
   * 接著，再次使用“+”將IE8和IE7凰盔、IE6分離開來墓卦，這樣IE8已經(jīng)獨(dú)立識(shí)別倦春。
  */
  css
      .bb{
         background-color:#f1ee18;/*所有識(shí)別*/
        .background-color:#00deff\9; /*IE6户敬、7、8識(shí)別*/
        +background-color:#a200ff;/*IE6睁本、7識(shí)別*/
        _background-color:#1e0bd1;/*IE6識(shí)別*/ 
      } 

• IE 下尿庐，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用 getAttribute() 獲取自定義屬性呢堰；Firefox 下抄瑟，只能使用 getAttribute() 獲取自定義屬性。解決方法：統(tǒng)一通過 getAttribute() 獲取自定義屬性枉疼。
• IE 下皮假，event 對(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 : link visited hover active。
• 怪異模式問題：漏寫 DTD 聲明胧洒，Firefox 仍然會(huì)按照標(biāo)準(zhǔn)模式來解析網(wǎng)頁畏吓，但在 IE 中會(huì)觸發(fā)怪異模式。為避免怪異模式給我們帶來不必要的麻煩略荡，最好養(yǎng)成書寫 DTD 聲明的好習(xí)慣 <doctype html>庵佣。
• 上下 margin 重合問題，ie 和 ff 都存在汛兜，相鄰的兩個(gè) div 的 margin-left 和 margin-right 不會(huì)重合巴粪，但是 margin-top 和 margin-bottom 卻會(huì)發(fā)生重合。解決方法，養(yǎng)成良好的代碼編寫習(xí)慣肛根，同時(shí)采用 margin-top 或者同時(shí)采用 margin-bottom辫塌。

DOM 操作——怎樣添加、移除派哲、移動(dòng)臼氨、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)芭届。

• 創(chuàng)建新節(jié)點(diǎn)
  1. createDocumentFragment() // 創(chuàng)建一個(gè) DOM 片段
  2. createElement() // 創(chuàng)建一個(gè)具體的元素
  3. createTextNode() // 創(chuàng)建一個(gè)文本節(jié)點(diǎn)
• 添加储矩、移除、替換褂乍、插入
  1. appendChild()
  2. removeChild()
  3. replaceChild()
  4. insertBefore() // 在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)
• 查找
  1. getElementsByTagName() // 通過標(biāo)簽名稱
  2. getElementsByName() // 通過元素的 Name 屬性的值(IE容錯(cuò)能力較強(qiáng)持隧，會(huì)得到一個(gè)數(shù)組，其中包括id等于name值的)
  3. getElementById() // 通過元素Id逃片，唯一

HTML標(biāo)簽的相關(guān)操作判斷

SVG 與 HTML5 的 canvas 各有什么優(yōu)點(diǎn)屡拨？