html 5常見的面試題

1、常見的區塊級元素  內嵌元素p -最常用的區塊級元素     dl - 與dt-dd 搭配使用的區塊元素     form - 互動表單     h1 -h6- 大公分  有序列表     p - 段落     ul - 無序列表     fieldset - 表單字段集     colgroup-col - 表單列分組元素     table-tr-td  表格及行-單元格     pre - 格式化文本a –超鏈接（錨點）     br -換行     i - 斜體     em - 強調     img - 圖片     input - 輸入框     label - 表單  標     sup - 上標     textarea - 多行文字輸入框u - 底線     select - 項目選擇2、實現文字三個點的幾個條件text-overflow屬性僅是：當文字溢出時是否顯示省略標記，並不具備其它的樣式屬性定義，要實現溢出時產生省略號的效果還需定義：
1、容器寬度：width：value；（px、%，都可以）
2、強製文本在一行內顯示:white-space：nowrap;
3、溢出內容為隱藏：overflow：hidden；
4、溢出文字顯示省略號：text-overflow：ellipsis;
註：必須是單行文字才能設定本文溢位！ ！ ！

IE6+；chrome1.0+；safari3.1+（firefox,opera暫不支援）

3、垂直居中的幾個條件

設定一個元素在一個容器中垂直居中，必須更改預設的display屬性值為inline-block;
並加上同級元素（標尺）（同級元素[標尺]樣式設定為 vertical-align:middle;width:0;height:100%;display:inline-block;） 。

三個條件：
1：必須為容器（父元素）加上text-align:center;
2:必須將目前元素轉成行內塊元素（display:inline-block;）再給目前元素加上vertical-align:middle;
3：在目前元素的後面（沒有回車）加上同級元素span;並對span進行vertical-align: middle;width:0;height:100%;display:inline-block

4、置換元素與非置換元素

置換元素與非置換元素

a)置換元素：瀏覽器根據元素的標籤和屬性，決定元素的具體顯示內容。 例如：瀏覽器會根據標籤的src屬性的值來讀取圖片資訊並顯示出來，而如果查看(x)html程式碼，則看不到圖片的實際內容；標籤的type屬性來決定要顯示輸入框，還是單選按鈕等。 (x)html中的、、、<select>都是置換元素。這些元素往往沒有實際的內容，就是一個空元素。 <br><br>置換元素在其顯示中產生了框，這也就是有的內聯元素（img,input）能夠設定寬高的原因。 <br><br>b) 不可替換元素（非置換元素）：(x)html 的大多數元素是不可替換元素，即其內容直接表現給使用者端（如瀏覽器）。 <br><br>5、什麼是精靈圖？優勢是什麼？ <br><br>圖片整合，將小的單張背景圖整合到一張大的背景圖上。 <br><br>圖片整合的優勢： 1）透過圖片整合來減少對伺服器的請求次數，從而提高 頁面的載入速度。 2）透過整合圖片來減少圖片的體積。 <br><br>6、什麼是<a href="http://www.php.cn/code/5005.html" target="_blank">css層疊</a>樣式表？ <a href="http://www.php.cn/code/6066.html" target="_blank">優先權</a>演算法如何計算？ <br><br>a.重要性和來源的優先權排序從低到高是：<br>1）瀏覽器預設樣式<br>2）<a href="http://www.php.cn/wiki/164.html" target="_blank">class</a>/id.....選擇器的權重<br>3）行間樣式<br>4）內聯或外聯（書寫順序）<br>5）!important 最高的<br><br><br>#7.display:none與<a href="http://www.php.cn/wiki/929.html" target="_blank">visibility</a>:hidden的區別<br><br>前者：隱藏不佔位  後者：隱藏但是佔位置<br><br>8、<a href="http://www.php.cn/code/6337.html" target="_blank">清除浮動</a>的幾種方式<br><br>hack1：為父元素加上宣告overflow:hidden;<br><br>hack2:   為父元素加height<br><br>hack3:   在浮動元素下方加空p,並給此元素加上         宣告：p{<a href="http://www.php.cn/wiki/917.html" target="_blank">clear</a>:both; height:0; overflow:hidden;}<br><br>hack4:萬能清除浮動法p<a href="http://www.php.cn/wiki/978.html" target="_blank">:after</a>#:after<br><br><a href="http://www.php.cn/code/6064.html" target="_blank">hack4:萬能清除浮動法p</a>:after<br>#:after<br>{content:「.」;clear:both;display:block;height:0;overflow:hidden;  visibility:hidden;}<a href="http://www.php.cn/wiki/804.html" target="_blank"></a>9、哪些屬性可以<a href="http://www.php.cn/wiki/807.html" target="_blank">繼承</a>？ <a href="http://www.php.cn/wiki/826.html" target="_blank"></a>1）文字相關：<a href="http://www.php.cn/wiki/862.html" target="_blank">font-family</a>、<a href="http://www.php.cn/wiki/858.html" target="_blank">font-size</a>、<a href="http://www.php.cn/wiki/865.html" target="_blank">font-style</a>、<a href="http://www.php.cn/wiki/864.html" target="_blank">font-variant</a> 、<a href="http://www.php.cn/wiki/867.html" target="_blank">font-weight</a>、font、<a href="http://www.php.cn/wiki/863.html" target="_blank">letter-spacing</a>、<a href="http://www.php.cn/wiki/866.html" target="_blank">line-height</a>、text-align、<br>text-indent<a href="http://www.php.cn/wiki/954.html" target="_blank">、</a> text-transform<a href="http://www.php.cn/wiki/955.html" target="_blank">、</a>word-spacing<a href="http://www.php.cn/wiki/956.html" target="_blank"></a>2）清單相關：<br>list-style<br>-image、<br>list-style-position<br>、<br>list-style-type<br>、list-style<br>3）顏色相關：color<a href="http://www.php.cn/wiki/188.html" target="_blank">4）透明度（子元素會繼承祖元素的opacity，但無法改變）</a>註：font-size繼承的是父元素的大小，而不是比例。 line-height當父元素是百分比或px值得時候，子元素跟父元素相同，當父元素是normal或數字的時候，子元素的line-height是子元素的字體大小乘以數字。 <br><br>10、定位的方式<a href="http://www.php.cn/wiki/904.html" target="_blank"></a>position屬性值：<a href="http://www.php.cn/wiki/906.html" target="_blank">static</a>，relative，absolute，fixed<a href="http://www.php.cn/wiki/907.html" target="_blank">1）static</a>static是預設值，元素位於在文件流程中，正常顯示，忽略元素的<a href="http://www.php.cn/wiki/905.html" target="_blank">top</a>，<a href="http://www.php.cn/wiki/903.html" target="_blank">bottom</a>，<br>left<br>，<br>right<br>屬性。 <a href="http://www.php.cn/code/6074.html" target="_blank">z-index</a>屬性始終為0.<a href="http://www.php.cn/wiki/60.html" target="_blank">2）relative</a>相對定位，保留元素在文件流程中佔用的位置和尺寸，由left/right/top/bottom幾個屬性決定相對移動的距離，原來的位置保留<br>3）absolute<br><br>絕對定位<br>，將<br>物件<br>從文件流中脫離出來，使用left/right/top/bottom等屬性相對其最接近的一個並有定位設定的父元素進行絕對定位；如果沒有，則依據body物件<a href="http://www.php.cn/code/427.html" target="_blank">4）fixed</a>fixed和absolute差不多，但是他相對的是視窗的左上角，不會跟隨文檔滾動。但如果在多frame頁裡面，他相對的是所在frame的左上角，而不是瀏覽器左上角。 <br><br>11、link和@import區別？ <a href="http://www.php.cn/wiki/1541.html" target="_blank"></a>1、老祖宗的差別。 link屬於X<br>HTML標籤<br>，而@import完全是CSS提供的一種方式。 <a href="http://www.php.cn/wiki/231.html" target="_blank"></a>2、link標籤除了可以載入CSS外，還可以做很多其它的事情，例如定義<br>RSS<br>，定義rel連接屬性等，@import就只能載入CSS了<br><br>3、載入順序的差異。當一個頁面被載入的時候（就是被瀏覽者瀏覽的時候），link<a href="http://www.php.cn/code/7565.html" target="_blank">引用</a>的CSS會同時被加載，而@import引用的CSS 會等到頁面全部被下載完再被載入。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式（就是閃爍）<br><br>4、相容性的差異。由於@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題<br>###5、使用dom控制樣式時的差別。當###使用javascript###控制dom去改變樣式的時候，只能使用link標籤，因為@import不是dom可以控制的##########12.定位的屬性值都有哪些？每個值得意思？ <br><br>各屬性值的功能：<br><br>static：預設值。位置設定為 static 的元素會正常顯示，它總是會處於文件流給予的位置（static 元素會忽略任何 top、bottom、left 或 right 聲明）。 <br><br>absolute：相對於父級元素的絕對定位，s浮出、脫離佈局流，它不佔據空間，就是我們所說的層，其位置相對於最近的已定位父元素而言的位置，可直接指定「left」、「top」、「right」 以及「bottom」 屬性。若父級都沒有定位，則以html（根元素）。 (層疊的順序z-index:value)<br><br>relative：是相對於預設位置的偏移定位，透過設定left、top、right、bottom值可將其移至相對於其正常位置的地方（相對於自己的開始的位置發生的位置上的移動，【不會破壞正常的佈局流】<br><br>fixed：相對瀏覽器的絕對定位，是相對於瀏覽器視窗的指定座標進行定位。 <br>新增<br>的標籤15個<a href="http://www.php.cn/php/php-tp-append.html" target="_blank"></a><br>head<br>er nav footer <a href="http://www.php.cn/html/html-HEAD-2.html" target="_blank">main</a> aside article section figure datalist video audio fieldest  legend  label caption<a href="http://www.php.cn/wiki/646.html" target="_blank"></a><br><br><br><br><br><a href="http://www.php.cn/wiki/931.html" target="_blank"></a><br><a href="http://www.php.cn/wiki/919.html" target="_blank"></a><br><br><br><br><br>##'l ##14、一、BFC是什麼？ ##重疊（放在兩個BFC裡）<br>3、根元素、 <a href="http://www.php.cn/code/7955.html" target="_blank">float</a>屬性不為none、 position為absolute或fixed、 display為inline-block，table-cell，table-caption ，flex，inline-flex、 overflow不為visible<br><br><br>15、.px，em，rem，pt的區別<br><br>1）px其實就是像素，用px設定字體大小時，比較穩定且精確<br>但這種方法有一個問題，當使用者在瀏覽器中瀏覽我們製作的web頁面時，如果對瀏覽器進行了縮放，這時會使我們的web<br>頁面佈局<br>被打破。因此，這時就提出了使用「em」來定義web頁面的字體。 <br>2）em就是根據基準來縮放字體的大小<br>em是相對於其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能需要知道他父元素的大小<br>3）rem是相對於根元素字體大小來顯示的<a href="http://www.php.cn/wiki/892.html" target="_blank">rem是相對於根元素<html>，這樣就意味著，我們只需要在根元素中確定一個參考值</a> 4）pt的大小等於1吋的1/72<br>磅：他是作為文字的一種計量單位<br>這種度量方式來自印刷-設計背景，最適合於媒體，但同樣廣泛應用於顯示器<br><br>16、實現垂直+水平居中有哪些方法？ <br><br>1、p{width:200px;height:200px;<br>background<br>:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin :auto;}<br><br>2、p{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px; }<br><br>17、漸進增強和優雅降級<br><br>漸進增強progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的使用者體驗。 <br><br>優雅降級 graceful degradation：一開始就建立完整的功能，然後再針對低版本瀏覽器進行相容<br><br><br>18、css選擇符有哪些？ <br><a href="http://www.php.cn/code/6014.html" target="_blank">1）一般選擇子      *</a>2）型別選擇子/元素選擇子     a<a href="http://www.php.cn/wiki/970.html" target="_blank">3）屬性選擇子      input[type="button"]4）包含選擇子      input[type="button"]4）包含選擇符號    ##5）子物件選擇子     ul.test>li</a>6）ID選擇子     <a href="http://www.php.cn/wiki/966.html" target="_blank">#7）類別選擇子     .</a>8）群組選擇子     body,ul,li .<br>8）群組選擇符號     body,ul,li<br>. <br>偽類<br>及偽對象選擇符     p<br>:first-letter<br>     a###:hover######10）相鄰選擇符     li+li###### 19、animation和transition的區別###相同點：都是隨著時間改變元素的屬性值。 ######不同點： transition需要觸發一個<a href="http://www.php.cn/php/php-tp-incident.html" target="_blank">事件</a>(hover事件或click事件等)才會隨時間改變其<br><br>css屬性； 而animation在不需要觸發任何事件的情況下也可以明確的隨著時間變化來改變元素css的屬性值，從而達到一種<a href="http://www.php.cn/code/9595.html" target="_blank">動畫</a>的效果，css3的animation就需要明確的動畫屬性值。 <br><br>20、什麼是標準<a href="http://www.php.cn/code/6444.html" target="_blank">盒子模型</a>和怪異盒模型。兩者的區別，如何實現怪異盒模型，和標準和模型<br><br>標準盒模型：content+border+<a href="http://www.php.cn/wiki/948.html" target="_blank">padding</a>      <br>怪異盒模型：content<br><br>一個算盒子的寬度的時候加上border和padding另一個不加<br><br>怪異盒子模型實作：box-sizing:border-box<br>標準盒子模型：box-sizing:content-box<br><br><br>#21、如何讓一個元素在父元素內上下左右居中<br><br>1.<br>css：<br>.box{display:flex;width:800px;height:<a href="http://www.php.cn/code/4221.html" target="_blank">300</a>px;just<a href="http://www.php.cn/wiki/109.html" target="_blank">if</a>y-content:center}<br>.box p{align-self:center}<br><br>html:<br><p class= "box"><br>     <p></p><br></p><br><br>2.<br>css:<br>.box{display:flex;width: 800px;height:800px;justify-content:center;align-items:center;}<br>html:<br><p class="box"><br>     <p></p><br>#     <p></p><br>#o;<br></p><br><a href="http://www.php.cn/code/6707.html" target="_blank">#22、video與audio常用的格式有哪些</a>用於<a href="http://www.php.cn/code/6093.html" target="_blank">影片</a>：video/ogg   video/mp4     video/webm 用於<br>音訊<br>：audio/ogg   audio/mpeg<a href="http://www.php.cn/code/10723.html" target="_blank"></a>23、簡單的解釋下<br>彈性盒模型<br>的屬性和屬性值（至少寫出6個屬性）<br><a href="http://www.php.cn/wiki/873.html" target="_blank">display:flex;</a>flex-<br>direction<br>:<br>justify-content:<br>align-items:<br>align-self:<br>align-content:<br>flex -wrap:<br><br>23、簡單的介紹一下線性漸變和徑向漸變、重複漸變的用法<br><br>線性漸變：linear-gradient()<br>徑向漸層：radial-gradient ()<br>重複線性漸變：repeating-linear-gradient()<br>重複徑向漸層：repeating-radial-gradient()<br><br>#24、簡單介紹下animation的用法<a href="http://www.php.cn/wiki/1051.html" target="_blank"></a>animation有兩個部分組成：animation:動畫名稱  動畫執行時間  動畫類型動畫延遲時間  動畫重複次數動畫方向；@<br>key<br>frames 動畫名字<br><br>25、css3D的主要幾個屬性和屬性值<br>1、景深：perspactive:number;     想要看到的物體越大，那麼就把值設的較小，如果要看物體看的越小就把值設的越大<br> <br>2、3D的舞台：transform-style:preserve-3d;<br><br>3、translateZ()   rotateZ()   scaleZ()<br><br>26、2D中的主要幾個屬性<br><br>transform:translate()   rotate() skew()  scale()<br>transform-origin:<br><br>#27、簡單介紹過度動畫的屬性與屬性值<a href="http://www.php.cn/wiki/1483.html" target="_blank"></a>transition :屬性名稱（可用<br>all<br>）動畫執行的時間  動畫的類型  動畫的延遲時間<a href="http://www.php.cn/code/6021.html" target="_blank"></a>28、css3中新增的<br>背景屬性<br><a href="http://www.php.cn/code/865.html" target="_blank"></a><br>background-origin<a href="http://www.php.cn/code/868.html" target="_blank">:背景原點</a><br>background-clip<a href="http://www.php.cn/code/872.html" target="_blank">:背景裁切</a><a href="http://www.php.cn/code/8294.html" target="_blank">background-size</a>:<br>背景圖片<br>的尺寸<br>以下為background-size的三個值<br><br>length<br>規定背景圖的大小。第一個值寬度，第二個值高度。 <br><br>Percentage(%)<br>以百分比為值設定背景圖大小<br><br>cover<br>將背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域<br> <br><br><br>29、寫出5大瀏覽器的核心以及他們的代表作品<br><br>*Trident: IE、Maxthon(遨遊)、騰訊、Theworld世界之窗、360瀏覽器<br><br>*Gecko：： 代表作品Mozilla Firefox 是開源的<br><br>*Webkit : 代表作品Safari、Chrome ， 是開源專案。 <br><br>*Presto : 代表作品Opera ，Presto是由Opera Software開發的瀏覽器排版引擎。它也是世界上公認的渲染速度最快的引擎。 ######*Blink  ：由Google和Opera Software開發的瀏覽器排版引擎，2013年4月發布。 <br><br>30、寫出IE6裡面常見的幾種bug以及解決方案(最少4種)<br><br>1)圖片有邊框BUG         方案：給圖片加border:0;或border:0 none;<br><br>2、雙倍浮向（雙倍邊距）   方案：display:inline<br><br>3、預設高度（IE6、IE7）  方案：為元素新增宣告：font-size :0;   方案2：為元素新增宣告：overflow:hidden;<br><br>4、按鈕元素預設大小不一   方案：用a標籤模擬<br><br>31、IE的<a href="http://www.php.cn/code/120.html" target="_blank">過濾器</a>有哪些？ <br><br>1、  _ 底線屬性過濾器<br>2、  \9 ：  IE版本辨識；其他瀏覽器都不辨識語法：選擇符號{屬性：屬性值\9;}<br>3、  \ 0  :   IE8以上版本辨識；其他瀏覽器無法辨識     語法：選擇子{屬性：屬性值\0；}<br><br>32、元素高度塌陷解決方案（至少4種）<br>hack1：為父元素加入宣告overflow:hidden;<br><br>hack2:   為父元素加height<br><br>hack3:   在浮動元素下方新增空p,並為此元素新增        宣告：p{clear:both ; height:0; overflow:hidden;}<br><br>hack4:萬能清除浮動法p:after{content:“.”;clear:both;display:block;height:0;overflow:hidden;  visibility: hidden;}</article><ul class=" list-paddingleft-2"></ul><p>以上是html 5常見的面試題的詳細內容。更多資訊請關注PHP中文網其他相關文章！</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>陳述：</span><div>本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn</div></div></div><div class="nphpSytBox"><span>上一篇：<a class="dBlack" title="css多行省略號相容性寫法" href="https://m.php.cn/zh-tw/faq/359949.html">css多行省略號相容性寫法</a></span><span>下一篇：<a class="dBlack" title="css多行省略號相容性寫法" href="https://m.php.cn/zh-tw/faq/359951.html">css多行省略號相容性寫法</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相關文章</h2><em><a href="https://m.php.cn/zh-tw/article.html" class="bBlack"><i>看更多</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/zh-tw/faq/348757.html" title="Html小知識總結" class="aBlack">Html小知識總結</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/348804.html" title="如何快速學習HTML" class="aBlack">如何快速學習HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/348873.html" title="html xhtml xml的區別" class="aBlack">html xhtml xml的區別</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/348884.html" title="src與href屬性的差別" class="aBlack">src與href屬性的差別</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/348902.html" title="關於HTML5和CSS替換使用" class="aBlack">關於HTML5和CSS替換使用</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>公益線上PHP培訓，幫助PHP學習者快速成長！</p></div><div class="footermid"><a href="https://m.php.cn/zh-tw/about/us.html">關於我們</a><a href="https://m.php.cn/zh-tw/about/disclaimer.html">免責聲明</a><a href="https://m.php.cn/zh-tw/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>