整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
好程序員web前端學習路線分享HTML5常見面試題集錦，接下來將會持續為大家分享幾篇HTML5常見面試題。
1.布局 左邊20% 中間自適應 右邊200px 不能用定位
答案：圣杯布局/雙飛翼布局或者flex
2.什么叫優雅降級和漸進增強？
漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。
“優雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段，并把測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本。
在這種設計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。
“漸進增強”觀點則認為應關注于內容本身。
內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被 Yahoo! 所采納并用以構建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。
3.簡述一下src與href的區別。
src用于替換當前元素，href用于在當前文檔和引用資源之間確立聯系。src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素。<script src=”js.js”></script>當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。
href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加<link href=”common.css” rel=”stylesheet”/>那么瀏覽器會識別該文檔為css文件，就會并行下載資源并且不會停止對當前文檔的處理。這也是為什么建議使用link方式來加載css，而不是使用@import方式。
4.z-index是什么？在position的值是什么時可以觸發？
答案:absolute,relative,fixed, sticky
5.什么是標準文檔流？
文檔流指的是元素排版布局過程中，遵循于從上向下，從左向右的流式排列。并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。
分為兩種等級：塊級元素和行內元素；
塊級元素：
1).霸占一行，不能與其他任何元素并列
2).能接受寬、高
3).如果不設置寬度，那么寬度將默認變為父親的100%，即和父親一樣寬
行內元素：
1).與其他元素并排
2).不能設置寬、高。默認的寬度就是文字的寬度
在HTML中，標簽分為：文本級和容器級；
文本級：p、span、a、b、i、u、em
容器級：div、h系列、li、dt、dd
6.簡述選擇器~和+的區別。
答案:都是層級選擇器
相鄰兄弟選擇器： E + F, 選中的僅是一個元素。同級并且F元素在E元素的后面。
通用兄弟選擇器：E ~ F 選中的是與E相鄰的后面的兄弟元素f
7.flex中元素的margin是否會合并？
答案:不會合并
8.<div class="parent"><div class="child"></div></div>,父元素和子元素寬高不固定，如何實現水平垂直居中。
答案:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{height: 100%;}
body{
display: flex;
}
section{
background: pink;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
}
article{
background: blue;
}
</style>
</head>
<body>
<section>
<article>123</article>
</section>
</body>
</html>
9.簡述title與h1的區別，b與strong的區別，i與em的區別。
1、title是網站header部分的內容是網站的標題，而h表示body內的標題
2、但從視覺上效果觀看b與strong、i與em是沒有區別的，唯一區別是搜索引擎檢索的時候搜索引擎可以識別strong、em標簽、而不能識別b與i標簽
表示選擇合適的標簽（語義化標簽）便于開發者閱讀和寫出更優雅的代碼
1). 在沒有CSS樣式的情況下，頁面整體也會呈現很好的結構效果
2). 更有利于用戶體驗
3). 更有利于搜索引擎優化
4). 代碼結構清晰，方便團隊開發與維護
1). 語義化標簽
2). 音視頻處理
3). Canvas / WebGL
4). history API
5). requestAnimationFrame
6). 地理位置
7). WebSocket
8). Webworks
DOCTYPE是用來聲明文檔類型和DTD規范的，一個主要的用途便是文件的合法性驗證。如果文件代碼不合法，那么瀏覽器解析時會出一些錯誤。（DOCTYPE告訴瀏覽器當前是哪個文檔類型）
1. 行內元素的特點？
1). 元素排在一行
2). 只能包含文本或者其他內聯元素
3). 寬高就是內容寬高、設置寬高無效
2. 塊級元素的特點？
1). 元素單獨占一行
2). 元素的寬高都可以設置
3). 可以包含內聯元素和其他塊元素
4). 為設置寬度時，默認寬度是它容器的100%
3. 常見行內元素標簽
a、br、code、em、img、input…
4. 常見塊級元素標簽：
div、p、dl、dt、form、h1~h6…
1. src是指向外部資源的位置，指向的內容會嵌入到文檔中當前標簽所在的位置，在請求src資源時會將其指向的資源下載并應用到文檔內，如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，知道將該資源加載、編譯、執行完畢，所以一般js腳本會放在底部而不是頭部。
2. href是指向網絡資源所在位置（的超鏈接），用來建立和當前元素或文檔之間的連接，當瀏覽器識別到它他指向的文件時，就會并行下載資源，不會停止對當前文檔的處理。
1. 正常場景一般都適用div+CSS布局，
2. 優點：
1). 結構與樣式分離
2). 代碼語義性好
3). 更符合HTML標準規范
4). SEO友好
3. Table布局的適用場景：
某種原因不方便加載外部CSS的場景，例如郵件正文，此時用table布局可以在無css情況下保持頁面布局正常。
1. 圖片懶加載，在頁面上的未可視區域可以添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者，優先加載。
2. 如果為幻燈片、相冊等，可以使用圖片預加載技術，將當前展示圖片的前一張和后一張優先下載。
3. 如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術。
4. 如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。
5. 如果圖片展示區域小于圖片的真實大小，則因在服務器端根據業務需要先行進行圖片壓縮，圖片壓縮后大小與展示一致
meta標簽用于描述網頁的元信息，如網站作者、描述、關鍵詞，meta通過name=xxx和content=xxx的形式來定義信息，常用設置如下：
1. charset：定義HTML文檔的字符集
<meta charset="UTF-8" >2. http-equiv：可用于模擬http請求頭，可設置過期時間、緩存、刷新
＜meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"＞3. viewport：視口，用于控制頁面寬高及縮放比例
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
>1. width/height，寬高，默認寬度980px
2. initial-scale，初始縮放比例，1~10
3. maximum-scale/minimum-scale，允許用戶縮放的最大/小比例
4. user-scalable，用戶是否可以縮放 (yes/no)
在學習HTML5開發技術的小伙伴越來越多，不論是參加HTML5培訓還是自學最終的目的只有一個，那就是希望可以高薪就業。但是有不少的朋友技術水平和操作都是OK的，只是在面試的時候會掉鏈子，導致整個面試功虧一簣。本篇文章小編就和讀者一塊看一下扣丁學堂的HTML5前端面試題總結，希望可以幫到將要面試的小伙伴們。
在進行HTML5面試的時候，首先面試官會針對簡歷上的東西進行提問，如果簡歷上寫了angularJs，那么面試官就會問一些有關的知識點。這個框架一定要懂得它的原理。然后再展示你的作品。下面我們來看一下面試官會問道的具體的問題。
1、左右布局，如果兩個a標簽都為50%，但是在第一個a標簽后換行，則第二個a就會被擠到第二行，如何解決呢，就把font-size設為0就行了。
a{
width:50%;
height:40px;
display:inline-block;
font-size:14px;
}
div>a:nth-child(1){
background-color:red;
}
div>a:nth-child(2){
background-color:green;
}
aaaa
bbbbb
2、排列組合問題(考察遞歸和排列組合算法)
varstr=[1,2,3];
varcount=0;
functionarrange(s){
for(vari=0,length=str.length;i<length;i++){
if(s.length==length-1){
if(s.indexOf(str[i])<0){
count++;
console.log("組合"+count+"="+s+str[i]);
}
continue;
arrange(s+str[i]);
arrange('');
小伙伴們在面試的時候一定要占到主動地位，在介紹的時候一定要把自己擅長的東西表現出來，當面試官問你問題的時候，如果真的不是很深入的了解，那就說自己所知道的，然后再轉回自己擅長的東西和他聊，讓他完全沒有說話的機會。
好了，以上就是小編給大家簡單介紹的一些HTML5前端面試的問題，希望對朋友們有所幫助，想要學習HTML5的小伙伴可以選擇口碑良好的扣丁學堂進行學習，扣丁學堂有專業的老師和與時俱進的課程體系，還有大量的HTML5視頻教程供學員觀看學習，想要高薪快速就業的小伙伴抓緊時間行動吧。扣丁學堂H5技術交流群：559883758。
【關注微信公眾號獲取更多學習資料】
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
