好程式設計師web前端學習路線分享HTML5常見面試題
好程式設計師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>
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913892/viewspace-2656775/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 好程式設計師web前端分享常見面試題程式設計師Web前端面試題
- 好程式設計師web前端學習路線分享前端基礎面試題程式設計師Web前端面試題
- 好程式設計師Java學習路線分享Spring常見面試題程式設計師JavaSpring面試題
- 好程式設計師web前端分享HTML5常見面試題集錦五程式設計師Web前端HTML面試題
- 好程式設計師web前端分享HTML5常見面試題集錦四程式設計師Web前端HTML面試題
- 好程式設計師web前端分享HTML5常見面試題集錦三程式設計師Web前端HTML面試題
- 好程式設計師web前端分享HTML5常見面試題集錦二程式設計師Web前端HTML面試題
- 好程式設計師web前端教程分享Jquery常見面試題程式設計師Web前端jQuery面試題
- 好程式設計師web前端教程分享HTML/CSS部分常見面試題程式設計師Web前端HTMLCSS面試題
- 好程式設計師HTML5大前端分享web前端面試題程式設計師HTML前端Web面試題
- 好程式設計師web前端學習路線大廠面試題詳解程式設計師Web前端面試題
- 好程式設計師web前端分享初學者必看web前端學習路線圖程式設計師Web前端
- 好程式設計師web前端培訓分享小白學web常見的問題程式設計師Web前端
- 好程式設計師web前端分享前端學習路線自學如何找到工作程式設計師Web前端
- 好程式設計師web前端學習路線分享函式基礎程式設計師Web前端函式
- 好程式設計師web前端學習路線分享Jsonp詳解程式設計師Web前端JSON
- 好程式設計師web前端學習路線分享滾動穿透方法程式設計師Web前端穿透
- 好程式設計師分享:Java面試題常見問題程式設計師Java面試題
- 好程式設計師web前端教程分享HTML5面試技巧程式設計師Web前端HTML面試
- 好程式設計師web前端分享常見html5語義化標籤程式設計師Web前端HTML
- 好程式設計師web前端教程分享JavaScript面試題程式設計師Web前端JavaScript面試題
- 好程式設計師web前端教程分享常見基礎面試題之效能最佳化程式設計師Web前端面試題
- 好程式設計師Java教程分享XML常見面試題程式設計師JavaXML面試題
- 好程式設計師web前端分享前端 javascript 練習題程式設計師Web前端JavaScript
- 好程式設計師web前端學習路線分享CSS浮動-文件流篇程式設計師Web前端CSS
- 好程式設計師web前端學習路線分享瞭解AJAX是什麼程式設計師Web前端
- 好程式設計師web前端培訓分享Vue面試題程式設計師Web前端Vue面試題
- 好程式設計師Java教程分享JavaScript常見面試題五程式設計師JavaScript面試題
- 好程式設計師Java教程分享JavaScript常見面試題四程式設計師JavaScript面試題
- 好程式設計師Java教程分享JavaScript常見面試題三程式設計師JavaScript面試題
- 好程式設計師Java教程分享JavaScript常見面試題二程式設計師JavaScript面試題
- 好程式設計師Java教程分享JavaScript常見面試題一程式設計師JavaScript面試題
- 好程式設計師web前端分享前端javascript練習題三程式設計師Web前端JavaScript
- 好程式設計師web前端分享前端javascript練習題一程式設計師Web前端JavaScript
- 好程式設計師web前端學習路線分享CSS浮動-清除浮動篇程式設計師Web前端CSS
- 好程式設計師web前端學習路線分享web測試之Js中的函式程式設計師Web前端JS函式
- 好程式設計師Web前端培訓分享jQuery面試題梳理程式設計師Web前端jQuery面試題
- 好程式設計師web前端教程分享Vue.js面試題程式設計師Web前端Vue.js面試題