前端常見的HTML+CSS面試題（附答案）

HTML

1. <image>標籤上title屬性與alt屬性的區別是什麼？

alt屬性是爲了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少於100個英文字符或者用戶必須保證替換文字儘量的短。

這包括那些使用原本就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。

title屬性爲設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。參考《alt和title屬性的區別及應用》

2. 分別寫出如下幾個HTML標籤：文字加粗、下標、居中、字體

加粗：<b>、<strong>

下標：<sub>

居中：<center>

字體：<font>、<basefont>

3. 請寫出至少5個html5新增的標籤，並說明其語義和應用場景

section：定義文檔中的一個章節

nav：定義只包含導航連接的章節

header：定義頁面或章節的頭部。它常常包含 logo、頁面標題和導航性的目錄。

footer：定義頁面或章節的尾部。它常常包含版權信息、法律信息連接和反饋建議用的地址。

aside：定義和頁面內容關聯度較低的內容——若是被刪除，剩下的內容仍然很合理。

4. 請說說你對標籤語義化的理解？

a. 去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構

b. 有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；

c. 方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

d. 便於團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

5. Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

聲明位於文檔中的最前面，處於 標籤以前。告知瀏覽器以何種模式來渲染文檔。

嚴格模式的排版和 JS 運做模式是，以該瀏覽器支持的最高標準運行。

在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

6. 你知道多少種Doctype文檔類型？

標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。

HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，

Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。

7. HTML與XHTML——兩者有什麼區別

a. XHTML 元素必須被正確地嵌套。

b. XHTML 元素必須被關閉。

c. 標籤名必須用小寫字母。

d. XHTML 文檔必須擁有根元素。

8. html5有哪些新特性、移除了那些元素？

a. HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

b. 拖拽釋放(Drag and drop) API

c. 語義化更好的內容標籤（header,nav,footer,aside,article,section）

d. 音頻、視頻API(audio,video)

e. 畫布(Canvas) API

f. 地理(Geolocation) API

g. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失

h. sessionStorage 的數據在頁面會話結束時會被清除

i. 表單控件，calendar、date、time、email、url、search

j. 新的技術webworker, websocket等

移除的元素：

a. 純表現的元素：basefont，big，center, s，strike，tt，u；

b. 對可用性產生負面影響的元素：frame，frameset，noframes；

9. iframe的優缺點？

優勢：

a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

b. iframe無刷新文件上傳

c. iframe跨域通訊

缺點：

a. iframe會阻塞主頁面的Onload事件

b. 沒法被一些搜索引擎索引到

c. 頁面會增長服務器的http請求

d. 會產生不少頁面，不容易管理。

10. Quirks模式是什麼？它和Standards模式有什麼區別？

在寫程序時咱們也會常常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤爲是新功能不兼容舊功能時。IE6之前的頁面你們都不會去寫DTD，因此IE6就假定 若是寫了DTD，就意味着這個頁面將採用對CSS支持更好的佈局，而若是沒有，則採用兼容以前的佈局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區別：整體會有佈局、樣式解析和腳本執行三個方面的區別。

a. 盒模型：在W3C標準中，若是設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

b. 設置行內元素的高寬：在Standards模式下，給等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

c. 設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，若是父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用

d. 設置水平居中：使用margin:0 auto在standards模式下可使元素水平居中，但在quirks模式下卻會失效。

11. 請闡述table的缺點

a. 太深的嵌套，好比table>tr>td>h3，會致使搜索引擎讀取困難，並且，最直接的損失就是大大增長了冗餘代碼量。

b. 靈活性差，好比要將tr設置border等屬性，是不行的，得經過td

c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異常混亂

d. 混亂的colspan與rowspan，用來佈局時，頻繁使用他們會形成整個文檔順序混亂。

e. 不夠語義

12. 簡述一下src與href的區別

src用於替換當前元素；href用於在當前文檔和引用資源之間確立聯繫。

src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置

href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接

CSS

1. 談談你對CSS佈局的理解

常見的佈局方式：固定佈局、流式佈局、彈性佈局、浮動佈局、定位佈局、margin和padding

2. 請列舉幾種能夠清除浮動的方法（至少兩種）

浮動會漂浮於普通流之上，像浮雲同樣，可是隻能左右浮動。正是這種特性，致使框內部因爲不存在其餘普通流元素了，表現出高度爲0（高度塌陷）。

a. 添加額外標籤，例如

<div style="clear:both"></div>

b. 使用br標籤和其自身的html屬性，例如

<br clear="all" />

c. 父元素設置 overflow：hidden；在IE6中還須要觸發hasLayout，例如zoom：1；

d. 父元素設置 overflow：auto 屬性；一樣IE6須要觸發hasLayout

e. 父元素也設置浮動

f. 父元素設置display:table

g. 使用:after 僞元素；因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

在CSS2.1裏面有一個很重要的概念，那就是 Block formatting contexts （塊級格式化上下文），簡稱 BFC。

建立了BFC的元素就是一個獨立的盒子，裏面的子元素不會在佈局上影響外面的元素，同時BFC仍然屬於文檔中的普通流。

IE6-7的顯示引擎使用的是一個稱爲佈局（layout）的內部概念。

3. 請列舉幾種隱藏元素的方法

a. visibility: hidden；這個屬性只是簡單的隱藏某個元素，可是元素佔用的空間任然存在。

b. opacity: 0；一個CSS3屬性，設置0可使一個元素徹底透明，製做出和visibility同樣的效果。與visibility相比，它能夠被transition和animate

c. position: absolute；使元素脫離文檔流，處於普通文檔之上，給它設置一個很大的left負值定位，使元素定位在可見區域以外。

d. display: none；元素會變得不可見，而且不會再佔用文檔的空間。

e. transform: scale(0)；將一個元素設置爲無限小，這個元素將不可見。這個元素原來所在的位置將被保留。

f. HTML5 hidden attribute；hidden屬性的效果和display:none;相同，這個屬性用於記錄一個元素的狀態

g. height: 0; overflow: hidden；將元素在垂直方向上收縮爲0,使元素消失。只要元素沒有可見的邊框，該技術就能夠正常工做。

h. filter: blur(0)；將一個元素的模糊度設置爲0，從而使這個元素「消失」在頁面中。

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沒法描述的東西

根本區別在於：它們是否創造了新的元素（抽象）

僞類：一開始用來表示一些元素的動態狀態，隨後CSS2標準擴展了其概念範圍，使其成爲了全部邏輯上存在但在文檔樹中卻無須標識的「幽靈」分類

僞對象：表明了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻並不實際存在於文檔樹中

8. 請簡述CSS的權重規則

一個行內樣式+1000，一個id+100，一個屬性選擇器/class類/僞類選擇器+10，一個元素名/僞對象選擇器+1。

關係選擇器將拆分爲兩個選擇器再計算.

9. 請寫出多種等高佈局

a. 假等高列：使用背景圖片，在列的父元素上使用這個背景圖進行Y軸的鋪放，從而實現一種等高列的假像

b. 給容器div使用單獨的背景色（固定佈局）（流體佈局）：用元素中的最大高度撐大其餘的容器高度

c. 建立帶邊框的兩列等高佈局：用border-left來作，只能使用兩列。

d. 使用正padding和負margin對衝實現多列布局方法：在全部列中使用正的上、下padding和負的上、下margin，並在全部列外面加上一個容器，設置overflow:hiden把溢出背景切掉

e. 使用邊框和定位模擬列等高：但不能使用在多列

f. 模仿表格佈局等高列效果：兼容性很差，在ie6-7沒法正常運行

10. 在CSS樣式中常使用px、em，各有什麼優劣，在表現上有什麼區別？

px是相對長度單位，相對於顯示器屏幕分辨率而言的。

em是相對長度單位，相對於當前對象內文本的字體尺寸。

px定義的字體，沒法用瀏覽器字體放大功能。

em的值並非固定的，會繼承父級元素的字體大小，1 ÷ 父元素的font-size × 須要轉換的像素值 = em值。

11. CSS中 link 和@import 的區別是什麼？

a. link屬於HTML標籤，而@import是CSS提供的，且只能加載 CSS

b. 頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載

c. import只在IE5以上才能識別，而link是HTML標籤，無兼容問題

d. link方式的樣式的權重 高於@import的權重

e. 當使用 Javascript 控制 DOM 去改變樣式的時候，只能使用 link 方式，由於 @import 眼裏只有 CSS ，不是 DOM 能夠控制

12. position的absolute與fixed共同點與不一樣點

相同：

a. 改變行內元素的呈現方式，display被置爲block

b. 讓元素脫離普通流，不佔據空間

c. 默認會覆蓋到非定位元素上

區別：

absolute的」根元素「是能夠設置的，而fixed的」根元素「固定爲瀏覽器窗口。

當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。

13. position的值， relative和absolute分別是相對於誰進行定位的？

absolute：生成絕對定位的元素，相對於 static 定位之外的第一個祖先元素進行定位

fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。 （IE6不支持）

relative：生成相對定位的元素，相對於其在普通流中的位置進行定位

static：默認值。沒有定位，元素出如今正常的流中

14. CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），對文字加特效（text-shadow），線性漸變（gradient），變形（transform）

增長了更多的CSS選擇器 多背景 rgba，在CSS3中惟一引入的僞元素是::selection，媒體查詢，多欄佈局

15. 爲何要初始化CSS樣式？

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

16. 解釋下 CSS sprites原理，優缺點

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，

再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，

background-position能夠用數字精確的定位出背景圖片的位置。

優勢：

a. 減小網頁的http請求

b. 減小圖片的字節

c. 解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名

d. 更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。

缺點：

a. 在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片若是不夠寬，很容易出現背景斷裂

b. CSS Sprites在開發的時候，要經過photoshop或其餘工具測量計算每個背景單元的精確位置

c. 在維護的時候比較麻煩，若是頁面背景有少量改動，通常就要改這張合併的圖片

17. 解釋下浮動和它的工做原理？

a. 浮動元素脫離文檔流，不佔據空間（引發「高度塌陷」現象）

b. 浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

18. 浮動元素引發的問題

a. 父元素的高度沒法被撐開，影響與父元素同級的元素

b. 與浮動元素同級的非浮動元素會跟隨其後

c. 若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構

19. 什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

若是使用import方法對CSS進行導入，會致使某些頁面在Windows下的IE出現一些奇怪的現象：

以無樣式顯示頁面內容的瞬間閃爍，這種現象稱之爲文檔樣式短暫失效(Flash of Unstyled Content)，簡稱爲FOUC。

原理：當樣式表晚於結構性html加載，當加載到此樣式表時，頁面將中止以前的渲染。此樣式表被下載和解析後，將從新渲染頁面，也就出現了短暫的花屏現象。

解決方法：使用LINK標籤將樣式表放在文檔HEAD中。

20. line-height三種賦值方式有何區別？（帶單位、純數字、百分比）

帶單位：px不用計算，em則會使元素以其父元素font-size值爲參考來計算本身的行高

純數字：把比例傳遞給後代，例如父級行高爲1.5，子元素字體爲18px，則子元素行高爲1.5*18=27px

百分比：將計算後的值傳遞給後代

21. :link、:visited、:hover、:active的執行順序是怎麼樣的？

L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，即用喜歡和討厭兩個詞來歸納

22. 常常遇到的瀏覽器兼容性有哪些？如何解決？

a. 瀏覽器默認的margin和padding不一樣

b. IE6雙邊距bug

c. 在ie6，ie7中元素高度超出本身設置高度。緣由是IE8之前的瀏覽器中會給元素設置默認的行高的高度致使的

d. min-height在IE6下不起做用

e. 透明性IE用filter:Alpha(Opacity=60)，而其餘主流瀏覽器用 opacity:0.6

f. input邊框問題，去掉input邊框通常用border:none;就能夠，但因爲IE6在解析input樣式時的BUG(優先級問題)，在IE6下無效

23. 有哪項方式能夠對一個DOM設置它的CSS樣式？

a. 外部樣式表：經過

<link>

標籤引入一個外部css文件

b. 內部樣式表：將css代碼放在

<style>

標籤內部

c. 內聯樣式：將css樣式直接定義在 HTML 元素內部

24. 什麼是外邊距重疊？重疊的結果是什麼？

外邊距重疊就是margin-collapse。

在CSS當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊外邊距。

摺疊結果遵循下列計算規則：

a. 兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。

b. 兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。

c. 兩個外邊距一正一負時，摺疊結果是二者的相加的和。

25. rgba()和opacity的透明效果有什麼不一樣？

a. opacity做用於元素，以及元素內的全部內容的透明度，rgba()只做用於元素的顏色或其背景色。

b. 設置rgba透明的元素的子元素不會繼承透明效果！

26. css屬性content有什麼做用？有什麼應用？

css的content屬性專門應用在 before/after 僞元素上，用於來插入生成內容。

能夠配合自定義字體顯示特殊符號。