HTML5面試題目彙總（一）
阿新 • • 發佈：2019-01-22
2、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
答案解析：
行內元素：a b span img input select strong
塊級元素：div ul ol li dl dt dd h1 h2 h3 h4 p 等
空元素：<br> <hr> <img> <link> <meta>
3、頁面匯入樣式時，使用link和@import有什麼區別？
答案解析：
1）link屬於XHTML標籤，而@import是css提供的；
2）頁面被載入時，link會同時被載入，而@import引用的css會等到頁面被載入完再載入；
3）@import只在IE5以上才能識別，而link是XHTML標籤，無相容問題；
4）link方式的樣式的權重高於@import的權重。
4、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？
答案解析：
新特性，新增元素：
1）內容元素：article、footer、header、nav、section
2）表單控制元件：calendar、date、time、email、url、search
3）控制元件元素：webworker，websockt，Geolocation
移除元素：
1）顯現層元素：basefont，big，center，font，s，strike，tt，u
2）效能較差元素：frame，frameset，noframes
處理相容問題有兩種方式：
1）IE6/IE7/IE8支援通過document方法產生的標籤，利用這一特性讓這些瀏覽器支援HTML5新標籤。
2）使用是html5shim框架
另外，DOCTYPE宣告的方式是區分HTML和HTML5標誌的一個重要因素，此外，還可以根據新增的結構，功能元素來加以區分。
5、如何區分 HTML 和 HTML5？
答案解析：
1）在文件型別宣告上不同：
HTML是很長的一段程式碼，很難記住，而HTML5卻只有簡簡單單的宣告，方便記憶。
2）在結構語義上不同：
HTML：沒有體現結構語義化的標籤，通常都是這樣來命名的<div id="header"></div>，這樣表示網站的頭部。
HTML5：在語義上卻有很大的優勢。提供了一些新的標籤，比如：<header><article><footer>
6、簡述一下你對HTML語義化的理解？
答案解析：
1）用正確的標籤做正確的事情；
2）html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析；
3）即使在沒有樣式css情況下也以一種文件格式顯示，並且是容易閱讀的；
4）搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO；
5）使於都原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。
7、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
答案解析：
localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；
sessionStorage 資料在瀏覽器關閉後自動刪除。
8、iframe有那些缺點？
答案解析：
1）在網頁中使用框架結構最大的弊病是搜尋引擎的“蜘蛛”程式無法解讀這種頁面；
2）框架結構有時會讓人感到迷惑，頁面很混亂；
9、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
答案解析：
1）<!Doctype>宣告位於文件中的最前面，處於<html>標籤之前。告知瀏覽器的解析器，用什麼文件型別規範來解析這個文件。
2）嚴格模式的排版和JS運作模式是以該瀏覽器支援的最高標準執行。
3）在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
4）DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。
10、常見相容性問題？
1）png24位的圖片在IE6瀏覽器上出現背景；
解決方案是：做成PNG8；
2）瀏覽器預設的 margin 和 padding 不同。
解決方案是：加一個全域性的*{margin:0;padding:0;}來統一。
3）IE6雙邊距bug：塊屬性標籤float後，又有橫行的 margin 情況下，在 IE6 顯示 margin 比設定的大。浮動IE產生的雙倍距離 #box{float:left;width:10px;margin:0 0 0 100px;} 這種情況下IE6會產生200px的距離。
解決方法：加上_display：inline，使浮動忽略
4）IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性； Firefox下，只能使用getAttribute()獲取自定義屬性。
解決方法：統一通過getAttribute()獲取自定義屬性。
5）IE下，even物件有x，y屬性，但是沒有pageX，pageY屬性，但是沒有x，y屬性；
解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
6）Chrome中文介面下預設會將小於 12px 的文字強制按照 12px 顯示
解決方法：可通過加入 CSS 屬性 -webkt-text-size-adjust:none;解決
7）超連結訪問過後 hover 樣式就不出現了，被點選訪問過的超連結樣式不在具有 hover 和 active ；
解決方法：改變CSS屬性的排列順序：L-V-H-A: a:link{ } a:visited{ } a:hover{ } a:active{ }
11、如何實現瀏覽器內多個標籤頁之間的通訊？
答案解析：
呼叫localstorge、cookies等本地儲存方式
12、webSocket如何相容低瀏覽器？
答案解析：
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基於 multipart 編碼傳送 XHR 、 基於長輪詢的 XHR
13、支援HTML5新標籤
答案解析：
1）IE8/IE7/IE6支援通過 document.createElement 方法產生的標籤，可以利用這一特性讓這些瀏覽器支援 HTML5 新標籤，瀏覽器支援新標籤後，還需要新增標籤預設的樣式；
2）當然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
14、如何區分：DOCTYPE 宣告\新增的結構元素\功能元素，語義化的理解？
答案解析：
1）用正確的標籤做正確的事情；
2）html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜尋引擎解析；
3）在沒有樣式 CSS 情況下也以一種文件格式顯示，並且是容易閱讀的；
4）搜尋引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利用 SEO ；
5）使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。
15、介紹一下 CSS 的盒子模型？
答案解析：
1）有兩種，IE 盒子模型、標準 W3C 盒子模型； IE 的 content 部分包含了 border 和 padding；
2）盒模型：內容（content）、填充（padding）、邊界（margin）、邊框（border）。
16、CSS 選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？ 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、優先順序就近原則，同權重情況下樣式定義最近者為準
20、載入樣式以最後載入的定位為準;
解析答案：優先順序為: !important > id > class > tag ； important 比 內聯優先順序高
21、CSS3新增偽類舉例：
答案解析：
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素；
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素；
p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素；
p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素；
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素；
:enabled :disabled 控制表單控制元件的禁用狀態；
:checked 單選框或複選框被選中。
22、如何居中div？ 如何居中一個浮動元素？
答案解析：
給div 設定一個寬度，然後新增 margin:0 auto 屬性；div{width:200px; margin:0 auto; }
23、居中一個浮動元素
答案解析：
確定容器的寬高 寬500 高300的層，設定層的外邊距
.div{width:500px;height:300px;margin:-150px 0 0 -250px;position:relative;background:green；left：50%；頭：50%}
24、css3有哪些新特性？
答案解析：
CSS3 實現圓角（border-radius:8px;），陰影（box-shadow:10px）,對文字加特效（text-shadow）,線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉，縮放，定位，傾斜
增加了更多的 css 選擇器 多背景 rgba
25、為什麼要初始化 CSS 樣式
答案解析：
因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對 CSS 初始化往往會出現瀏覽器之間的頁面顯示差異。
當然，初始化樣式會對 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 前處理器嗎？喜歡哪個？
答案解析：SASS
答案解析：
行內元素：a b span img input select strong
塊級元素：div ul ol li dl dt dd h1 h2 h3 h4 p 等
空元素：<br> <hr> <img> <link> <meta>
3、頁面匯入樣式時，使用link和@import有什麼區別？
答案解析：
1）link屬於XHTML標籤，而@import是css提供的；
2）頁面被載入時，link會同時被載入，而@import引用的css會等到頁面被載入完再載入；
3）@import只在IE5以上才能識別，而link是XHTML標籤，無相容問題；
4）link方式的樣式的權重高於@import的權重。
4、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？
答案解析：
新特性，新增元素：
1）內容元素：article、footer、header、nav、section
2）表單控制元件：calendar、date、time、email、url、search
3）控制元件元素：webworker，websockt，Geolocation
移除元素：
1）顯現層元素：basefont，big，center，font，s，strike，tt，u
2）效能較差元素：frame，frameset，noframes
處理相容問題有兩種方式：
1）IE6/IE7/IE8支援通過document方法產生的標籤，利用這一特性讓這些瀏覽器支援HTML5新標籤。
2）使用是html5shim框架
另外，DOCTYPE宣告的方式是區分HTML和HTML5標誌的一個重要因素，此外，還可以根據新增的結構，功能元素來加以區分。
5、如何區分 HTML 和 HTML5？
答案解析：
1）在文件型別宣告上不同：
HTML是很長的一段程式碼，很難記住，而HTML5卻只有簡簡單單的宣告，方便記憶。
2）在結構語義上不同：
HTML：沒有體現結構語義化的標籤，通常都是這樣來命名的<div id="header"></div>，這樣表示網站的頭部。
HTML5：在語義上卻有很大的優勢。提供了一些新的標籤，比如：<header><article><footer>
6、簡述一下你對HTML語義化的理解？
答案解析：
1）用正確的標籤做正確的事情；
2）html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析；
3）即使在沒有樣式css情況下也以一種文件格式顯示，並且是容易閱讀的；
4）搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO；
5）使於都原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。
7、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
答案解析：
localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；
sessionStorage 資料在瀏覽器關閉後自動刪除。
8、iframe有那些缺點？
答案解析：
1）在網頁中使用框架結構最大的弊病是搜尋引擎的“蜘蛛”程式無法解讀這種頁面；
2）框架結構有時會讓人感到迷惑，頁面很混亂；
9、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
答案解析：
1）<!Doctype>宣告位於文件中的最前面，處於<html>標籤之前。告知瀏覽器的解析器，用什麼文件型別規範來解析這個文件。
2）嚴格模式的排版和JS運作模式是以該瀏覽器支援的最高標準執行。
3）在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
4）DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。
10、常見相容性問題？
1）png24位的圖片在IE6瀏覽器上出現背景；
解決方案是：做成PNG8；
2）瀏覽器預設的 margin 和 padding 不同。
解決方案是：加一個全域性的*{margin:0;padding:0;}來統一。
3）IE6雙邊距bug：塊屬性標籤float後，又有橫行的 margin 情況下，在 IE6 顯示 margin 比設定的大。浮動IE產生的雙倍距離 #box{float:left;width:10px;margin:0 0 0 100px;} 這種情況下IE6會產生200px的距離。
解決方法：加上_display：inline，使浮動忽略
4）IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性； Firefox下，只能使用getAttribute()獲取自定義屬性。
解決方法：統一通過getAttribute()獲取自定義屬性。
5）IE下，even物件有x，y屬性，但是沒有pageX，pageY屬性，但是沒有x，y屬性；
解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
6）Chrome中文介面下預設會將小於 12px 的文字強制按照 12px 顯示
解決方法：可通過加入 CSS 屬性 -webkt-text-size-adjust:none;解決
7）超連結訪問過後 hover 樣式就不出現了，被點選訪問過的超連結樣式不在具有 hover 和 active ；
解決方法：改變CSS屬性的排列順序：L-V-H-A: a:link{ } a:visited{ } a:hover{ } a:active{ }
11、如何實現瀏覽器內多個標籤頁之間的通訊？
答案解析：
呼叫localstorge、cookies等本地儲存方式
12、webSocket如何相容低瀏覽器？
答案解析：
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基於 multipart 編碼傳送 XHR 、 基於長輪詢的 XHR
13、支援HTML5新標籤
答案解析：
1）IE8/IE7/IE6支援通過 document.createElement 方法產生的標籤，可以利用這一特性讓這些瀏覽器支援 HTML5 新標籤，瀏覽器支援新標籤後，還需要新增標籤預設的樣式；
2）當然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
14、如何區分：DOCTYPE 宣告\新增的結構元素\功能元素，語義化的理解？
答案解析：
1）用正確的標籤做正確的事情；
2）html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜尋引擎解析；
3）在沒有樣式 CSS 情況下也以一種文件格式顯示，並且是容易閱讀的；
4）搜尋引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利用 SEO ；
5）使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。
15、介紹一下 CSS 的盒子模型？
答案解析：
1）有兩種，IE 盒子模型、標準 W3C 盒子模型； IE 的 content 部分包含了 border 和 padding；
2）盒模型：內容（content）、填充（padding）、邊界（margin）、邊框（border）。
16、CSS 選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？ 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、優先順序就近原則，同權重情況下樣式定義最近者為準
20、載入樣式以最後載入的定位為準;
解析答案：優先順序為: !important > id > class > tag ； important 比 內聯優先順序高
21、CSS3新增偽類舉例：
答案解析：
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素；
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素；
p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素；
p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素；
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素；
:enabled :disabled 控制表單控制元件的禁用狀態；
:checked 單選框或複選框被選中。
22、如何居中div？ 如何居中一個浮動元素？
答案解析：
給div 設定一個寬度，然後新增 margin:0 auto 屬性；div{width:200px; margin:0 auto; }
23、居中一個浮動元素
答案解析：
確定容器的寬高 寬500 高300的層，設定層的外邊距
.div{width:500px;height:300px;margin:-150px 0 0 -250px;position:relative;background:green；left：50%；頭：50%}
24、css3有哪些新特性？
答案解析：
CSS3 實現圓角（border-radius:8px;），陰影（box-shadow:10px）,對文字加特效（text-shadow）,線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉，縮放，定位，傾斜
增加了更多的 css 選擇器 多背景 rgba
25、為什麼要初始化 CSS 樣式
答案解析：
因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對 CSS 初始化往往會出現瀏覽器之間的頁面顯示差異。
當然，初始化樣式會對 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 前處理器嗎？喜歡哪個？
答案解析：SASS