[前端求職必看]前端開發面試題與答案精選_HTML
HTML
Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
（1）、<!DOCTYPE> 聲明位於文件中的最前面，處於 <html> 標籤之前。告知瀏覽器的解析器，
用什麼文件類型 規格來解析這個文件。
（2）、嚴格模式的排版和 JS 運作模式是 以此瀏覽器支援的最高標準運作。
（3）、在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止網站無法運作。
（4）、DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。
行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
（1）CSS規格規定，每個元素都有display屬性，確定該元素的類型，每個元素都有預設的display值，
例如div預設display屬性值為“block” ，成為“區塊級”元素；
span預設display屬性值為“inline”，是“行內”元素。
（2）行內元素有：a b span img input select strong（強調的語氣）
區塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素：
<br> <hr> <img> <input> <link> <meta>
鮮為人知的是：
< area> <base> <col> <command> <embed> <keygen> <param> <command> <embed> <keygen> <param> <source> <track>； import 的差別是？
（3）import只在IE5以上才能識別，而link是XHTML標籤，無相容問題;
（4）link方式的樣式的權重高於@import的權重.
瀏覽器的核心分別是什麼?
常見相容性問題？
* png24位元的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.
* 瀏覽器預設的margin和padding不同。解是加一個全域的*{margin:0;padding:0;}來統一。
* IE6雙邊距bug:區塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設定的大。
浮動ie產生的雙倍距離#box{ float:left; width:10px; margin:0 0 0 10px;}
# 這種情況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入－_display:inline;將其轉換為行內屬性。 (_這個符號只有ie6會辨識)
漸進辨識的方式，從總體中逐漸排除局部。
首先，巧妙的使用「\9」這個標記，將IE遊覽器從所有情況中分離出來。
接著，再次使用「 」將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
css
.bb{
background-color:#f1ee18;/*所有辨識*/
.background-color:#00deff\9; 識別/*IE6、7、 .background-color:#00deff\9; 識別/*IE6、7、88 */
background-color:#a200ff;/*IE6、7辨識*/
_background-color:#1e0bd1;/*IE6辨識*/
}
IE#可以使用取得常規屬性的方法來取得自訂屬性,
也可以使用getAttribute()取得自訂屬性;
Firefox下,只能使用getAttribute()取得自訂屬性.
解決方法:統一透過getAttribute()取得自訂屬性.
* IE下,even物件有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event物件有pageX,pageY屬性,但是沒有x,y屬性.
* 解決方法：（條件註解）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
* Chrome 中文介面下預設會將小於12px 的文字強制依照12px 顯示,
可透過加入CSS 屬性-webkit-text-size-adjust: none; 解決.
#超連結訪問後hover樣式就不出現了被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a :hover {} a:active {}
* HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
* 繪畫canvas
用於媒介回放的video 和audio 元素
本地離線存儲localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 的數據在瀏覽器關閉後自動刪除
語意化更好的內容元素，例如article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search
# 新的技術webworker, websockt, Geolocation
* 移除的元素
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
支援HTML5新標籤：
* IE8/IE7/IE6支援透過document.createElement方法產生的標籤，
可以利用這項特性讓這些瀏覽器支援HTML5新標籤，
瀏覽器支援新標籤後，還需要新增標籤預設的樣式：
* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5 .js"</script>
<![endif]-->
如何區分： DOCTYPE宣告\新增的結構元素\功能元素
#語意化的理解？
用正確的標籤做正確的事！
html語意化就是讓頁面的內容結構化，便於對瀏覽器、搜尋引擎解析；
在沒有樣式CCS情況下也以一種文件格式顯示，而且是容易閱讀的。
搜尋引擎的爬蟲依賴標記來確定上下文和各個關鍵字的權重，利於 SEO。
讓閱讀原始程式碼的人對網站更容易將網站分塊，以便於閱讀維護理解。
HTML5的離線儲存？
localStorage 長期儲存數據，瀏覽器關閉後資料不遺失；
sessionStorage 資料在瀏覽器關閉後自動刪除。
(寫)描述一段語意的html程式碼吧。
（HTML5中新增加的許多標籤（如：<article>、<nav>、<header>和<footer>等）
是基於語意化設計原則）
< div id="header">
< h1>標題< /h1>
< h2>專注Web/gt;lt; /h2>
divh;
*iframe會阻塞主頁面的Onload事件；
*iframe和主頁共用連線池，而瀏覽器對相同網域的連線有限制，所以會影響頁面的並行載入。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是透過javascript
動態為iframe新增src屬性值，這樣可以繞過以上兩個問題。
請描述 cookies，sessionStorage 和 localStorage 的差別？
cookie在瀏覽器和伺服器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；
