腳本之家
你與百萬開發者在一起
源/web前端開發
接上《》這篇文章，今天把HTML與CSS的面試題分享給大家，里面有參考答案。
二、HTML
2.1、標簽上title屬性與alt屬性的區別是什么？
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。
這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。參考《alt和title屬性的區別及應用》
2.2、分別寫出以下幾個HTML標簽：文字加粗、下標、居中、字體
加粗：、
下標：
居中：
字體：、、參考《HTML標簽列表》
2.3、請寫出至少5個html5新增的標簽，并說明其語義和應用場景
：定義文檔中的一個章節
nav：定義只包含導航鏈接的章節
：定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。
：定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。
aside：定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。
參考《HTML5 標簽列表》
2.4、請說說你對標簽語義化的理解？
a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
c. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
d. 便于團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
2.5、作用? 嚴格模式與混雜模式如何區分？它們有何意義?
聲明位于文檔中的最前面，處于 標簽之前。告知瀏覽器以何種模式來渲染文檔。
嚴格模式的排版和 JS 運作模式是，以該瀏覽器支持的最高標準運行。
在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
不存在或格式不正確會導致文檔以混雜模式呈現。
2.6、你知道多少種文檔類型？
標簽可聲明三種 DTD 類型css設置a標簽居中，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：、 以及 。
XHTML 1.0 規定了三種 XML 文檔類型：、 以及 。
（標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，
（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。
2.7、HTML與XHTML——二者有什么區別
a. XHTML 元素必須被正確地嵌套。
b. XHTML 元素必須被關閉。
c. 標簽名必須用小寫字母。
d. XHTML 文檔必須擁有根元素。
參考《XHTML 與 HTML 之間的差異》
2.8、html5有哪些新特性、移除了那些元素？
a. HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。
b. 拖拽釋放(Drag and drop) API
c. 語義化更好的內容標簽（,nav,,aside,,）
d. 音頻、視頻API(audio,video)
e. 畫布() API
f. 地理() API
g. 本地離線存儲長期存儲數據，瀏覽器關閉后數據不丟失
h.的數據在頁面會話結束時會被清除
i. 表單控件，、date、time、email、url、
j. 新的技術,等
移除的元素：
a. 純表現的元素：，big，, s，，tt，u；
b. 對可用性產生負面影響的元素：frame，，；
2.9、的優缺點？
優點：
a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題
b. 無刷新文件上傳
c. 跨域通信
缺點：
a. 會阻塞主頁面的事件
b. 無法被一些搜索引擎索引到
c. 頁面會增加服務器的http請求
d. 會產生很多頁面，不容易管理。
參考《的一些記錄》
2.10、模式是什么？它和模式有什么區別？
在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是模式（怪癖模式，詭異模式，怪異模式）。
區別：總體會有布局、樣式解析和腳本執行三個方面的區別。
a. 盒模型：在W3C標準中css設置a標簽居中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在 模式下，IE的寬度和高度還包含了和。
b. 設置行內元素的高寬：在模式下，給等行內元素設置wdith和都不會生效，而在模式下，則會生效。
c. 設置百分比的高度：在模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用
d. 設置水平居中：使用:0 auto在模式下可以使元素水平居中，但在模式下卻會失效。
2.11、請闡述table的缺點
a.太深的嵌套，比如table>tr>td>h3，會導致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。
b. 靈活性差，比如要將tr設置等屬性，是不行的，得通過td
c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異常混亂
d. 混亂的與，用來布局時，頻繁使用他們會造成整個文檔順序混亂。
e. 不夠語義
參考《為什么說table表格布局不好？》
2.12、簡述一下src與href的區別
src用于替換當前元素；href用于在當前文檔和引用資源之間確立聯系。
src是的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置
href是 的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接
三、CSS
3.1、談談你對CSS布局的理解
3.2、請列舉幾種可以清除浮動的方法（至少兩種）
浮動會漂浮于普通流之上，像浮云一樣，但是只能左右浮動。正是這種特性，導致框內部由于不存在其他普通流元素了，表現出高度為0（高度塌陷）。
a. 添加額外標簽，例如
b. 使用br標簽和其自身的html屬性，例如
c. 父元素設置 ：；在IE6中還需要觸發，例如zoom：1；
d. 父元素設置 ：auto 屬性；同樣IE6需要觸發
e. 父元素也設置浮動
f. 父元素設置:table
g. 使用:after 偽元素；由于IE6-7不支持:after，使用 zoom:1觸發 。
在CSS2.1里面有一個很重要的概念，那就是 Block （塊級格式化上下文），簡稱BFC。
創建了BFC的元素就是一個獨立的盒子，里面的子元素不會在布局上影響外面的元素，同時BFC仍然屬于文檔中的普通流。
IE6-7的顯示引擎使用的是一個稱為布局（）的內部概念。
參考《那些年我們一起清除過的浮動》
3.3、請列舉幾種隱藏元素的方法
a. : ；這個屬性只是簡單的隱藏某個元素，但是元素占用的空間任然存在。
b. : 0；一個CSS3屬性，設置0可以使一個元素完全透明，制作出和一樣的效果。與相比，它可以被和
c. : ；使元素脫離文檔流，處于普通文檔之上，給它設置一個很大的left負值定位，使元素定位在可見區域之外。
d. : none；元素會變得不可見，并且不會再占用文檔的空間。
e. : scale(0)；將一個元素設置為無限小，這個元素將不可見。這個元素原來所在的位置將被保留。
f. HTML5 ；屬性的效果和:none;相同，這個屬性用于記錄一個元素的狀態
g. : 0; : ；將元素在垂直方向上收縮為0,使元素消失。只要元素沒有可見的邊框，該技術就可以正常工作。
h. : blur(0)；將一個元素的模糊度設置為0，從而使這個元素“消失”在頁面中。
參考《使用CSS隱藏HTML元素的4種常用方法》《通過HTML和CSS隱藏和顯示元素的4種方法》
3.4、如何讓一段文本中的所有英文單詞的首字母大寫
text-：
none| (將每個單詞的第一個字母轉換成大寫) | (將每個單詞轉換成大寫 ) | (將每個單詞轉換成小寫 )
3.5、請簡述CSS樣式表繼承
CSS樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素。會被繼承下去的屬性如下：參考《CSS樣式表繼承詳解》
文本相關：font-，font-size， font-style，font-，font-， font，-，line-，color
列表相關：list-style-image，list-style-，list-style-type， list-style
3.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:、E:hover、E:、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等
偽對象選擇器：E:first-/E::first-、E:first-line/E::first-line、E:/E::、E:after/E::after、E::
參考《選擇符列表》
3.7、CSS偽類與CSS偽對象的區別
CSS 引入偽類和偽元素的概念是為了描述一些現有CSS無法描述的東西
根本區別在于：它們是否創造了新的元素（抽象）
偽類：一開始用來表示一些元素的動態狀態，隨后CSS2標準擴展了其概念范圍，使其成為了所有邏輯上存在但在文檔樹中卻無須標識的“幽靈”分類
偽對象：代表了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻并不實際存在于文檔樹中
參考《CSS偽類與CSS偽元素的區別及由來》
3.8、請簡述CSS的權重規則
一個行內樣式+1000，一個id+100，一個屬性選擇器/class類/偽類選擇器+10，一個元素名/偽對象選擇器+1。
關系選擇器將拆分為兩個選擇器再計算。參考《CSS權重》
3.9、請寫出多種等高布局
a. 假等高列：使用背景圖片，在列的父元素上使用這個背景圖進行Y軸的鋪放，從而實現一種等高列的假像
b. 給容器div使用單獨的背景色（固定布局）（流體布局）：用元素中的最大高度撐大其他的容器高度
c. 創建帶邊框的兩列等高布局：用-left來做，只能使用兩列。
d. 使用正和負對沖實現多列布局方法：在所有列中使用正的上、下和負的上、下，并在所有列外面加上一個容器，設置:hiden把溢出背景切掉
e. 使用邊框和定位模擬列等高：但不能使用在多列
f.模仿表格布局等高列效果：兼容性不好，在ie6-7無法正常運行
3.10、在CSS樣式中常使用px、em，各有什么優劣，在表現上有什么區別？
px是相對長度單位，相對于顯示器屏幕分辨率而言的。
em是相對長度單位，相對于當前對象內文本的字體尺寸。
px定義的字體，無法用瀏覽器字體放大功能。
em的值并不是固定的，會繼承父級元素的字體大小，1 ÷ 父元素的font-size × 需要轉換的像素值 = em值。
3.11、CSS中 link 和@ 的區別是什么？
a. link屬于HTML標簽，而@是CSS提供的，且只能加載 CSS
b. 頁面被加載時，link會同時被加載，而@引用的CSS會等到頁面被加載完再加載
c. 只在IE5以上才能識別，而link是HTML標簽，無兼容問題
d. link方式的樣式的權重 高于@的權重
e. 當使用 控制 DOM 去改變樣式的時候，只能使用 link 方式，因為 @ 眼里只有 CSS ，不是 DOM 可以控制
3.12、的與fixed共同點與不同點
相同：
a. 改變行內元素的呈現方式，被置為block
b. 讓元素脫離普通流，不占據空間
c. 默認會覆蓋到非定位元素上
區別：
的”根元素“是可以設置的，而fixed的”根元素“固定為瀏覽器窗口。
當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。
3.13、的值， 和分別是相對于誰進行定位的？
：生成絕對定位的元素，相對于 定位以外的第一個祖先元素進行定位
fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。 （IE6不支持）
：生成相對定位的元素，相對于其在普通流中的位置進行定位
：默認值。沒有定位，元素出現在正常的流中
3.14、CSS3有哪些新特性？
CSS3實現圓角（-），陰影（box-），對文字加特效（text-），線性漸變（），變形（）
增加了更多的CSS選擇器 多背景 rgba，在CSS3中唯一引入的偽元素是::，媒體查詢，多欄布局
參考《CSS3中的動畫效果記錄》、《CSS3中-、box-與那點事兒》
3.15、為什么要初始化CSS樣式？
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
3.16、解釋下 CSS 原理，優缺點
CSS 其實就是把網頁中一些背景圖片整合到一張圖片文件中，
再利用CSS的“-image”，“- ”，“-”的組合進行背景定位，
-可以用數字精確的定位出背景圖片的位置。
優點：