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 > :active
22、經常遇到的瀏覽器兼容性有哪些？如何解決？
- 瀏覽器默認的 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 僞元素上，用於插入生成內容，可以配合自定義字體顯示特殊符號。