好程序員web前端學(xué)習(xí)路線分享HTML5常見面試題集錦，接下來將會(huì)持續(xù)為大家分享幾篇HTML5常見面試題。

1.布局 左邊20% 中間自適應(yīng) 右邊200px 不能用定位

答案：圣杯布局/雙飛翼布局或者flex

2.什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？

漸進(jìn)增強(qiáng) progressive enhancement：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

優(yōu)雅降級(jí) graceful degradation：一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要。降級(jí)(功能衰減)意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶。

“優(yōu)雅降級(jí)”觀點(diǎn)認(rèn)為應(yīng)該針對(duì)那些最高級(jí)、最完善的瀏覽器來設(shè)計(jì)網(wǎng)站。而將那些被認(rèn)為“過時(shí)”或有功能缺失的瀏覽器下的測(cè)試工作安排在開發(fā)周期的最后階段，并把測(cè)試對(duì)象限定為主流瀏覽器(如 IE、Mozilla 等)的前一個(gè)版本。

在這種設(shè)計(jì)范例下，舊版的瀏覽器被認(rèn)為僅能提供“簡(jiǎn)陋卻無妨 (poor, but passable)” 的瀏覽體驗(yàn)。你可以做一些小的調(diào)整來適應(yīng)某個(gè)特定的瀏覽器。但由于它們并非我們所關(guān)注的焦點(diǎn)，因此除了修復(fù)較大的錯(cuò)誤之外，其它的差異將被直接忽略。

“漸進(jìn)增強(qiáng)”觀點(diǎn)則認(rèn)為應(yīng)關(guān)注于內(nèi)容本身。

內(nèi)容是我們建立網(wǎng)站的誘因。有的網(wǎng)站展示它，有的則收集它，有的尋求，有的操作，還有的網(wǎng)站甚至?xí)陨系姆N種，但相同點(diǎn)是它們?nèi)忌婕暗絻?nèi)容。這使得“漸進(jìn)增強(qiáng)”成為一種更為合理的設(shè)計(jì)范例。這也是它立即被 Yahoo! 所采納并用以構(gòu)建其“分級(jí)式瀏覽器支持 (Graded Browser Support)”策略的原因所在。

3.簡(jiǎn)述一下src與href的區(qū)別。

src用于替換當(dāng)前元素，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。

href是Hypertext Reference的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素(錨點(diǎn))或當(dāng)前文檔(鏈接)之間的鏈接，如果我們?cè)谖臋n中添加那么瀏覽器會(huì)識(shí)別該文檔為css文件，就會(huì)并行下載資源并且不會(huì)停止對(duì)當(dāng)前文檔的處理。這也是為什么建議使用link方式來加載css，而不是使用@import方式。

4.z-index是什么？在position的值是什么時(shí)可以觸發(fā)？

答案:absolute,relative,fixed, sticky

5.什么是標(biāo)準(zhǔn)文檔流？

文檔流指的是元素排版布局過程中，遵循于從上向下，從左向右的流式排列。并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。

分為兩種等級(jí)：塊級(jí)元素和行內(nèi)元素；

塊級(jí)元素：

1).霸占一行，不能與其他任何元素并列

2).能接受寬、高

3).如果不設(shè)置寬度，那么寬度將默認(rèn)變?yōu)楦赣H的100%，即和父親一樣寬

行內(nèi)元素：

1).與其他元素并排

2).不能設(shè)置寬、高。默認(rèn)的寬度就是文字的寬度

在HTML中，標(biāo)簽分為：文本級(jí)和容器級(jí)；

文本級(jí)：p、span、a、b、i、u、em

容器級(jí)：div、h系列、li、dt、dd

6.簡(jiǎn)述選擇器~和+的區(qū)別。

答案:都是層級(jí)選擇器

相鄰兄弟選擇器： E + F, 選中的僅是一個(gè)元素。同級(jí)并且F元素在E元素的后面。

通用兄弟選擇器：E ~ F 選中的是與E相鄰的后面的兄弟元素f

7.flex中元素的margin是否會(huì)合并？

答案:不會(huì)合并

8.

答案:

*{

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;

}

123

9.簡(jiǎn)述title與h1的區(qū)別，b與strong的區(qū)別，i與em的區(qū)別。

1、title是網(wǎng)站header部分的內(nèi)容是網(wǎng)站的標(biāo)題，而h表示body內(nèi)的標(biāo)題

2、但從視覺上效果觀看b與strong、i與em是沒有區(qū)別的，唯一區(qū)別是搜索引擎檢索的時(shí)候搜索引擎可以識(shí)別strong、em標(biāo)簽、而不能識(shí)別b與i標(biāo)簽

總結(jié)

以上是生活随笔為你收集整理的js怎么在一个div中嵌入另一网站_好程序员web前端学习路线分享HTML5常见面试题集锦一...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。