2015前端面試頻率題
a、什么是語義化的HTML？
語義化的HTML就是寫出的HTML代碼，符合內容的結構化（內容語義化），選擇合適的標簽（代碼語義化），能夠便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
b、為什么要做到語義化？
1.有利於SEO，有利於搜索引擎爬蟲更好的理解我們的網頁，從而獲取更多的有效信息，提升網頁的權重。
2.在沒有CSS的時候能夠清晰的看出網頁的結構，增強可讀性。
3.便於團隊開發和維護，語義化的HTML可以讓開發者更容易的看明白，從而提高團隊的效率和協調能力。
4.支持多終端設備的瀏覽器渲染。
區別：嚴格模式是瀏覽器根據web標准去解析頁面，是一種要求嚴格的DTD，不允許使用任何表現層的語法，如<br/>，混雜模式則是一種向后兼容的解析方法。
觸發：根據不同的DTD觸發，如果沒有聲明，那么默認為混雜模式。
1、XHTML元素必須被正確地嵌套
2、XHTML 元素必須被關閉，空標簽也必須被關閉。如<br/>
3、XHTML 元素必須小寫
4、XHTML 文檔必須擁有一個根元素
5、XHTML屬性名稱必須小寫，屬性值必須加引號，屬性不能簡寫。如：<input checked="checked" />
6、XHTML用 id 屬性代替 name 屬性。
注意：應該在 "/" 符號前添加一個額外的空格，以使你的 XHTML 與當今的瀏覽器相兼容
7、語言屬性（lang）lang 屬性應用於幾乎所有的 XHTML 元素。它定義元素內部的內容的所用語言的類型。如果在某元素中使用 lang 屬性，就必須添加額外的 xml:lang， 像這樣：<div lang="no" xml:lang="no">Heia Norge!</div>
1、它2個都是用來划分區間但是沒有實際語義的標簽；
2、差別就在於div是塊級元素,不會其他元素在同一行;span是內聯元素~可以與其他元素位於同一行~
它的優勢在於與平台的無關性，無論你是windows，unix，linux，mac，都可以觀看html5格式的內容。
*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載。
兩者都是外部引用CSS的方式，但是存在一定的區別：
區別1：link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；@import屬於CSS范疇，只能加載CSS。
區別2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載。
區別3：link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。
浮動:
1.雙倍邊距bug 塊 浮動 橫向margin display：inline
2.li本身沒浮動內容浮動 ie6 li 內容浮動 給li加浮動 li加vertical-alian
其實就是浮動塊狀元素前面不能有內聯文本的出現
ie6 下，下margin消失
當一行子元素占有的寬度之和和父級的寬度相差超過3px，或者有不滿行狀態的時候最有一行的子元素的下margin值就會失效、
ie6下文字溢出bug
原因 1.浮動元素前面有注釋 或者內聯元素
內聯元素越多，溢出越多
子元素的寬度和父級的寬度相差小於3px的時候
解決辦法用div包起來 或者把父級元素寬度調大
relative(相對定位) 對象不可層疊、不脫離文檔流，參考自身靜態位置通過 top,bottom,left,right 定位，並且可以通過z-index進行層次分級。
absolute(絕對定位) 脫離文檔流，通過 top,bottom,left,right 定位。選取其最近一個最有定位設置的父級對象進行絕對定位，如果對象的父級沒有設置定位屬性， absolute元素將以body坐標原點進行定位，可以通過z-index進行層次分級。
fixed（固定定位） 這里所固定的參照對像是 可視窗口而並非是body或是父級元素。可通過z-index進行層次分級。
-
各游覽器常用兼容標記一覽表:
-
標記 IE6 IE7 IE8 FF Opera Sarari [*+><] √ √ X X X X _ √ X X X X X \9 √ √ √ X X X \0 X X √ X √ X @media screen and (-webkit-min-device-pixel-ratio:0){.bb {}} X X X X X √ .bb , x:-moz-any-link, x:default X √ X √(ff3.5及以下) X X @-moz-document url-prefix(){.bb{}} X X X √ X X @media all and (min-width: 0px){.bb {}} X X X √ √ √ * +html .bb {} X √ X X X X 游覽器內核 Trident Trident Trident Gecko Presto WebKit
2. em會繼承父級元素的字體大小。
閉包的用途
閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數內部的變量，另一個就是讓這些變量的值始終保持在內存中。
表示變量或函數起作用的區域，指代了它們在什么樣的上下文中執行，亦即上下文執行環境。Javascript的作用域只有兩種：全局作用域和本地作用域，本地作用域是按照函 數來區分的。
(1）創建新節點
createDocumentFragment() //創建一個DOM片段
createElement_x_x() //創建一個具體的元素
createTextNode() //創建一個文本節點
（2）添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
（3）查找
getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id，唯一性
1.創建元素節點
document.createElement_x_x() 方法 用於創建元素，接受一個參數，即要創建元素的標簽名，返回創建的元素節點
2 div.id = "myDiv"; //設置div的id
3 div.className = "box"; //設置div的class
創建元素后還要把元素添加到文檔樹中
2.添加元素節點
appendChild() 方法 用於向childNodes列表的末尾添加一個節點，返回要添加的元素節點
2 var li = document.createElement_x_x("li"); //創建li
3 li.innerHTML = "項目四"; //向li內添加文本
4 ul.appendChild(li); //把li 添加到ul子節點的末尾
2 ul.appendChild(ul.firstChild); //把ul的第一個元素節點移到ul子節點的末尾
insertBefore() 方法，如果不是在末尾插入節點，而是想放在特定的位置上，用這個方法，該方法接受2個參數，第一個是要插入的節點，第二個是參照節點，返回要添加的元素節點
2 var li = document.createElement_x_x("li"); //創建li
3 li.innerHTML= "項目四"; //向li內添加文本
4 ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一個子節點前
2 var li = document.createElement_x_x("li"); //創建li
3 li.innerHTML= "項目四"; //向li內添加文本
4 ul.insertBefore(li,ul.lastChild); //把li添加到ul的子節點末尾
2 var li = document.createElement_x_x("li"); //創建li
3 li.innerHTML= "項目四"; //向li內添加文本
4 var lis = ul.getElementsByTagName_r("li") //獲取ul中所有li的集合
5 ul.insertBefore(li,lis[1]); //把li添加到ul中的第二個li節點前
添加后:
3.移除元素節點
removeChild() 方法，用於移除節點，接受一個參數，即要移除的節點，返回被移除的節點，注意被移除的節點仍然在文檔中，不過文檔中已沒有其位置了
2 var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一個子節點
2 var lis = ul.getElementsByTagName_r("li") //獲取ul中所有li的集合
3 ul.removeChild(lis[0]); //移除第一個li，與上面不同，要考慮瀏覽器之間的差異
4.替換元素節點
replaceChild() 方法，用於替換節點，接受兩個參數，第一參數是要插入的節點，第二個是要替換的節點，返回被替換的節點
2 var fromFirstChild = ul.replaceChild(ul.firstChild); //替換ul第一個子節點
2 var li = document.createElement_x_x("li"); //創建li
3 li.innerHTML= "項目四"; //向li內添加文本
4 var lis = ul.getElementsByTagName_r("li") //獲取ul中所有li的集合
5 var returnNode = ul.replaceChild(li,lis[1]); //用創建的li替換原來的第二個li
5.復制節點
cloneNode() 方法，用於復制節點， 接受一個布爾值參數， true 表示深復制（復制節點及其所有子節點）， false 表示淺復制（復制節點本身，不復制子節點）
2 var deepList = ul.cloneNode(true); //深復制
3 var shallowList = ul.cloneNode(false); //淺復制
而setInterval(表達式,交互時間)則不一樣,它從載入后,每隔指定的時間就執行一次表達式
name = 'aaa bbb ccc';
uw=name.replace(/\b\w+\b/g, function(word){
return word.substring(0,1).toUpperCase()+word.substring(1);}
);
1）將css和js文件放在獨立外部文件中引用
2) 使用gzip壓縮網頁內容
3）將CSS放在頁面頂端，JS文件放在頁面底端
4）使JS文件內容最小化
5）盡量減少外部腳本的使用，減少DNS查詢時間
（ 文件合並
文件最小化/文件壓縮
使用 CDN 托管
緩存的使用（多個域名來提供緩存）
其他）
a、網頁的結構層（structural layer）由 HTML 或 XHTML 之類的標記語言負責創建。標簽，也就是那些出現在尖括號里的單詞，對網頁內容的語義含義做出了描述，但這些標簽不包含任何關於如何顯示有關內容的信息。例如，P 標簽表達了這樣一種語義：“這是一個文本段。”
b、網頁的表示層（presentation layer） 由 CSS 負責創建。 CSS 對“如何顯示有關內容”的問題做出了回答。
c、網頁的行為層（behavior layer）負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM 主宰的領域。
W3C標准是一些列標准的集合！在各個企業的基礎上做一定的整合，形成一套標准集，便於推廣和使用！根據網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）。對應的標准也分三方面：結構化標准語言主要包括XHTML和XML，表現標准語言主要包括CSS，行為標准主要包括對象模型（如W3C DOM）、ECMAScript等。在具體的XHTML標准（如屬性值加引號，不允許單標記，大小寫等等比較多）！語法上比，我們目前使用的html標記較為嚴格！更為具體的信息樓上可以參見百度百科，XHTML等相關術語！也可參見，W3C發布的使用文檔！
優雅降級和漸進增強印象中是隨着css3流出來的一個概念。由於低級瀏覽器不支持css3，但css3的效果又太優秀不忍放棄，所以在高級瀏覽中使用css3而低級瀏覽器只保證最基本的功能。咋一看兩個概念差不多，都是在關注不同瀏覽器下的不同體驗，關鍵的區別是他們所側重的內容，以及這種不同造成的工作流程的差異。
什么是漸進增強（progressive enhancement）、優雅降級（graceful degradation）呢？
漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區別：優雅降級是從復雜的現狀開始，並試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。降級（功能衰減）意味着往回看；而漸進增強則意味着朝前看，同時保證其根基處於安全地帶。
“優雅降級”觀點
“優雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段，並把測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本。
在這種設計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由於它們並非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。
“漸進增強”觀點
“漸進增強”觀點則認為應關注於內容本身。
內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被 Yahoo! 所采納並用以構建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。
除了節約cookie帶寬的因素，另一個重要因素是節約主域名的連接數，從而提高客戶端網絡帶寬的利用率，優化頁面響應。因為老的瀏覽器（IE6是典型），針對同一個域名只允許同時保持兩個HTTP連接。將圖片等資源請求分配到其他域名上，避免了大圖片之類的並不一定重要的內容阻塞住主域名上其他后續資源的連接（比如ajax請求）。