HTML/CSS 常见面试题汇总
HTML面試題
1、<image> 標簽上title屬性與alt屬性的區別是什么？
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。
這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。title屬性可以實現鼠標懸停提示的效果。
2、請寫出至少5個HTML5新增的標簽，并說明其語義和應用場景？
<header>：主要用于定義內容的介紹展示區域，描述了文檔的頭部區域，比如定義文章的頭；
<nav>：定義導航鏈接的部分；
<section>：定義了文檔中的節，比如章節、頁眉、頁腳或文檔中的其他部分；
<article>：定義獨立的內容；
<aside>：定義頁面主區域之外的內容，比如側邊欄；
<figcaption>：定義<figure>元素的標題，一般被放置在<figure>元素內的第一個或最后一個位置處；
<figure>：定義獨立的流內容，比如圖形、圖標、照片、代碼等；
<footer>：定義文檔的底部區域，描述文檔的頁腳，比如作者、著作權信息、聯系方式等；
3、請說說你對標簽語義化的理解？
（1）一個語義元素能夠清楚的描述其意義給瀏覽器和開發者，即使在去掉或丟失樣式的時候，也能夠讓頁面呈現出清晰的結構；
（2）有利于SEO優化，讓頁面和搜索引擎建立良好的溝通，爬蟲依賴于標簽來確定上下文和各個關鍵詞的權重，有助于爬蟲抓取更多的有效信息；
（3）方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備等），并以具有意義的方式來渲染網頁；
（4）便于團隊開發和維護，語義化更具有可讀性，遵循W3C標準的團隊都遵循語義化標準，可以減少差異化；
4、簡單描述 DOCTYPE 的作用？嚴格模式與混雜模式如何區分？它們有何意義？
DOCTYPE 的作用：DOCTYPE聲明在文檔的最前面， 位于根元素 HTML 的起始標簽之前 ，這樣一來，在瀏覽器解析 HTML 文檔正文之前就可以確定當前文檔的類型，以決定其需要采用的渲染模式，不同的渲染模式會影響到瀏覽器對于 CSS 代碼甚至 JavaScript 腳本的解析。
**嚴格模式與混雜模式：**嚴格模式的排版和JS運作模式是以瀏覽器支持的最高標準運行；而在混雜模式中，頁面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止站點無法工作；
當 DOCTYPE 不存在或者格式不正確時，會導致文檔以混雜模式呈現。
5、HTML5 有哪些新特性，移除了哪些元素？
HTML5 現在已經不是 SGML 的子集，主要是關于圖像、顯示、存儲、多任務等功能的增加：
- 拖拽釋放API（Drag 和 Drop）
- 語義化更好的內容標簽（header、footer、nav、article、section、aside）
- 音視頻標簽（audio、video）
- 畫布API（Canvas）
- 地理API（Geolocation）
- Web存儲API（localStorage、sessionStorage）
- 表單控件（calendar、date、time、email、url、search，color、number、month等等）
- 通訊API（WebSocket）
HTML5中移除了純表現的元素，例如：basefont、big、dir、center、font、tt、u等等；
還移除了對可用性產生負面影響的元素，例如：frame、frameset、noframes等；
6、iframe的優缺點有哪些？
優點：
-
iframe能夠原封不動地把嵌入的網頁展示出來；
-
提高頁面代碼的復用性；
-
解決加載緩慢的第三方內容，如圖標和廣告等的加載問題；
-
在處理上傳或局部刷新時，避免了頁面整體刷新；
-
iframe解決部分跨域問題；
缺點：
- iframe會阻塞主頁面的 onload 事件；
- 無法被一些搜索引擎索引到；
- 頁面會增加服務器的http請求；
- 會產生很多頁面，不便于管理；
- 很多移動設備無法完全顯示框架，設備兼容性差；
- 會出現區域的上下、左右滾動條，滾動條會擠占頁面空間；
- 使用框架時，要保證正確的使用導航鏈接，容易造成鏈接死循環；
隨著前端技術的發展，逐漸使用ajax來代替iframe。
7、Quirks 模式是什么？它和 Standards 模式有什么區別？
**Quirks模式：**Quirks模式就是瀏覽器為了兼容早期針對舊版本瀏覽器設計、并未遵循W3C標準的網頁而產生的一種頁面渲染模式，這種模式又被成為“怪異模式”，簡單來說就是一個新瀏覽器故意模擬許多在舊瀏覽器中存在的bug。
**與 Standards 模式的區別：**總體會有布局、樣式解析和腳本執行三個方面的區別：
- 盒模型：在W3C標準中，如果設置了一個元素的高度和寬度，指的是元素內容的寬度和高度，而在Quirks模式下，IE的寬度和高度還包含了 padding 和 border ；
- 設置行內元素的寬高：在 Standars 模式下，給<span>等行內元素設置 width 和 height 都不會生效，而 Quirks 模式下，則會生效；
- 設置百分比的寬高：在 Standars 模式下，一個元素的高度是其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的；
- 設置水平居中：在 Standars 模式下可以使用 margin:0px auto 來設置元素水平居中，但是這種設置在 Quirks 模式下是無效的；
8、請闡述 table 有哪些缺點？
- 嵌套層級太深，會導致搜索引擎讀取困難，而且會大大增加代碼冗余；
- 靈活性差，比如要設置tr的border等屬性是不行的，要在td上設置border屬性；
- 代碼臃腫，可讀性差；
- 混亂的 colspan 和 rowspan ，用它們來實現網頁布局時，會造成文檔順序混亂；
- 不夠語義化；
9、簡述一下 src 和 href 的區別？
src用于替換當前元素；href用于在當前文檔和引用資源之間確立聯系；
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在的位置；
href是Hypertext Reference 的縮寫，指向網絡資源所在的位置，建立和當前元素（錨點）或當前文檔之間的鏈接；
CSS面試題
1、談談你對CSS布局的理解
常見的布局方式：固定布局、流式布局、彈性布局、浮動布局、定位布局、margin和padding
2、請列舉幾個清除浮動的方法
（1）使用clear屬性
<div style="clear:both"></div>（2）使用br標簽和其自身的HTML屬性
<br clear="all" />（3）通過設置父元素的樣式，實現清除浮動，例如：
- 父元素設置 overflow:hidden
- 父元素設置 overflow:auto
- 父元素設置 display:table
- 父元素也設置浮動樣式
（4）使用 :after 偽元素
3、請列舉幾種隱藏元素的方法
visibility:hidden，這個屬性只是簡單的隱藏某個元素，但是元素占用的空間任然存在；
opacity:0，是CSS3的屬性，設置元素為完全透明，和 visibility 的效果類似，但是該屬性修飾的元素可以使用 transition 和 animate 設置動畫效果；
display:none，設置元素為不可見，不會占用文檔的空間；
hidden屬性，該屬性是HTML5中新增的屬性，效果和 display 相同；
4、如何讓一段文本中的所有英文單詞的首字母大寫
text-transform: none | capitalize（將每個單詞的第一個字母轉為大寫） | uppercase（將每個單詞都轉為大寫）| lowercase（將每個單詞都轉為小寫）
5、請簡述CSS樣式表的繼承
CSS樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素。會被繼承下去的屬性如下：
文本相關：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color；
列表相關：list-style-image，list-style-position，list-style-type， list-style；
6、請簡述CSS的選擇器
元素選擇器：* 、E、 E#id、 E.class
關系選擇器：E、F、E>F、E+F、E~F
屬性選擇器：E[att]、E[att=“val”]、E[att~=“val”]、E[att^=“val”]、E[att$=“val”]、E[att*=“val”]、E[att|=“val”]
偽類選擇器：E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等
偽對象選擇器：E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection
7、CSS偽類與CSS偽對象的區別
CSS引入偽類和偽元素的概念是為了描述一些現有CSS無法描述的東西，根本區別在于：它們是否創造了新的抽象元素；
偽類：描述了所有邏輯上存在但在文檔樹中無須標識的分類；
偽對象：代表了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻并不實際存在于文檔樹中；
8、請簡述CSS的權重規則
行內樣式 > ID > 屬性選擇器/class類/偽類選擇器 > 元素名/偽對象選擇器；
關系選擇器將拆分為兩個選擇器再計算權重。
9、請寫出多種等高布局
- 假等高布局：使用背景圖片，在列的父元素上使用這個背景圖進行Y軸的鋪放，從而實現一種等高列的假象
- 給容器div使用單獨的背景色（固定布局、流體布局）：用元素中的最大高度撐大其他的容器高度
- 創建帶邊框的兩列等高布局：用border-left來做，只能使用兩列
- 使用正padding和負margin對沖實現多列布局方法：在所有列中使用正的上下padding和負的上下margin，并在所有列外面加上一個容器，設置overflow:hidden把溢出背景切掉
- 使用邊框和定位模擬列等高：但不能使用在多列
- 模擬表格布局等高效果：兼容性不好，在IE6/7無法正常運行
10、在CSS樣式中使用px、em，各有什么優勢，在表現上有什么區別？
px是相對長度單位，相對于顯示器屏幕分辨率而言的；
em是相對長度單位，相對于當前對象內文本的字體尺寸；
px定義的字體，無法用瀏覽器字體放大功能；em的值并不是固定，會繼承父級元素的字體大小，
1 ÷ 父元素的font-size × 需要轉換的像素值 = em值11、CSS中link和@import 的區別是什么？
- link屬于HTML標簽，而 @import 是CSS提供的，只能加載CSS；
- 頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載；
- @import只能在IE5以上才能識別，而link是HTML標簽，無兼容問題；
- link方式的樣式權重高于@import的權重；
- 當使用javascript控制DOM去改變樣式的時候，只能使用link方式，因為@import只有CSS才能識別，DOM無法控制；
12、position的absolute與fixed共同點與不同點？
相同：
-
改變行內元素的呈現方式，display被置為block
-
讓元素脫離普通流，不占據空間
-
默認會覆蓋到非定位元素上
區別：
-
absolute的”根元素“是可以設置的，而fixed的”根元素“固定為瀏覽器窗口。
-
當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。
13、position的值，relative 和 absolute 分別是相對于誰進行定位的？
**absolute：**生成絕對定位的元素，相對于 static 定位以外的第一個祖先元素進行定位
**fixed：**生成絕對定位的元素，相對于瀏覽器窗口進行定位。 （IE6不支持）
**relative：**生成相對定位的元素，相對于其在普通流中的位置進行定位
**static：**默認值。沒有定位，元素出現在正常的流中
14、CSS3有哪些新特性？
新增特性有：圓角（border-radius）、陰影（box-shadow）、對文字加特效（text-shadow）、線性漸變（gradient）、變形（transform）；
增加了更多的CSS選擇器，媒體查詢，多欄布局，多背景rgba，引入偽元素::selection。
15、為什么要初始化CSS樣式
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒有初始化CSS，往往會出現瀏覽器之間的頁面顯示差異；
CSS樣式初始化之后會對SEO有一定的影響。
16、解釋下 CSS sprites 原理，及優缺點？
CSS sprites 其實就是把網頁中的一些背景圖片整合到一張圖片文件中，在利用CSS的 background-image，background-repeat，background-position的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置。
優點：
- 減少網頁的http請求
- 減少圖片的字節
- 解決網頁設計師在圖片命名上的困擾，只需要對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名
- 更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變了
缺點：
- 在寬屏，高分辨率的屏幕下的自適應頁面，如果背景圖不夠寬，很容易出現背景斷裂
- CSS sprites 在開發的時候，需要通過Photoshop或其他工具測量計算每一個背景單元的精確位置
- 在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要修改這張合并的圖片
17、解釋一下浮動及其工作原理？
浮動元素脫離文檔流，不占據空間（引起“高度塌陷”現象）；
浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
18、浮動元素引起的問題
-
父元素的高度無法被撐開，影響與父元素同級的元素
-
與浮動元素同級的非浮動元素會跟隨其后
-
若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
19、什么是FOUC（無樣式內容閃爍）？你如何來避免FOUC？
如果使用@import方式對CSS進行導入，會導致某些頁面在windows下的IE出現一些奇怪的現象：
以無樣式顯示頁面內容的瞬間閃爍，這種現象被稱為文檔樣式短暫失效，簡稱FOUC
原理：當樣式表晚于結構性html加載，當加載到此樣式表時，頁面將停止之前的渲染。此樣式表被下載和解析后，將重新渲染頁面，也就出現了短暫的花屏現象。
解決方法：使用LINK標簽將樣式表放在文檔HEAD中。
20、line-height 三種賦值方式有何區別？（帶單位、純數字、百分比）
**帶單位：**px不用計算，em則會使元素以其父元素font-size值為參考來計算自己的行高；
**純數字：**把比例傳遞給后代，例如父級行高為1.5，子元素字體為18px，則子元素行高為1.5*18=27px；
**百分比：**將計算后的值傳遞給后代；
21、:link、:visited、:hover、:active 的執行順序是怎么樣的？
:link > :visited > :hover > :active22、經常遇到的瀏覽器兼容性有哪些？如何解決？
- 瀏覽器默認的 margin 和 padding 不同
- IE6雙邊距bug
- 在IE6、IE7中元素高度超出自己設置高度，原因是IE8以前的瀏覽器中會給元素設置默認的行高的高度導致的
- min-height 在IE6下不起作用
- 透明性IE用filter.Alpha(opcity=60)，而其他主瀏覽器用opacity:0.6
- input邊框問題，去掉input邊框一般用 border:none 就可以了，由于IE6在解析input樣式時的bug（優先級問題），在IE6下無效
23、有哪些方式可以對一個DOM設置它的CSS樣式？
- 外部樣式表，使用 <link>標簽引入一個外部CSS樣式
- 內部樣式表，將CSS代碼放在 <style> 標簽內部
- 內聯樣式，將CSS樣式直接定義在HTML元素內部
24、什么是外邊距重疊？重疊的結果是什么？
外邊距重疊就是margin-collapse；
在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距；
折疊結果計算規則：
- 兩個相鄰的外邊距都是正數時，折疊結果是他們兩者之間較大的值；
- 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值；
- 兩個外邊距一正一負時，折疊結果是兩者的相加的和
25、rgba() 和 opacity 的透明效果有什么不同？
- opacity 作用于元素，以及元素內的所有內容的透明度，rgba()只作用于元素的顏色或其背景色
- 設置rgba透明的元素的子元素不會繼承透明效果
26、CSS屬性content有什么作用？有什么應用？
css的content屬性專門應用在 after/before 偽元素上，用于插入生成內容，可以配合自定義字體顯示特殊符號。
總結
以上是生活随笔為你收集整理的HTML/CSS 常见面试题汇总的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 8X25Q充电部分软件梳理（CP侧）
- 下一篇： form.html,HTML表单form