春節過後，又是新的一年開始，很多要換行業換工作換崗位的都開始了新一輪的跳槽，那麼想要在衆多的求職者中讓自己脫穎而出呢？怎麼樣能使得自己更有效的拿到高薪的offer呢？今天×××老師給大家整理了各大廠常出現的web前端面試題，相信對於很多同學來說看完會有一定的幫助。
1. 請說明 HTML 文檔中 DTD 的意義和作用（酷訊）
DTD，文檔類型定義，是一種保證 html 文檔格式正確的有效方法，在解析網頁時，瀏覽器將使用 DTD 來檢查頁面的有效性（是否符合規範，元素和標籤使用是否正確）並且採取相應的措施。同時它還會影響瀏覽器的渲染模式（工作模式）。
2. 準確的指出以下代碼的顯示結果（酷訊）
<style> a{ position:relative; height:200px; width:500px; border:solid 1px #000; background:#FFF;
}
#b,#c{position:absolute; width:250px; height:90px;}
#b{top:30px; left:50px; background:#FF0000; z-index:1;}
#c{bottom:30px; right:50px; background:#0000FF;}
</style>
<div class="a">
<div id="b"></div> <div id="c"></div>
</div>
結果如圖所示：
1. 指出以下代碼的顯示結果（酷訊）
<table border=1 width=500 style="text-align:center;">
<tr>
<td rowspan=2 width=50% height=50>a</td>
<td width=50% eight=25>d</td>
</tr>
<tr><td width=50% height=25>b</td></tr>
<tr height=25><td colspan=2>c</td></tr>
</table>
顯示效果如圖：
1. 如何產生帶有數字列表符號的列表？（ ）
A. <ul>
B. <dl>
C. <ol> D. <list>
答案：C
5. 如何顯示沒有下劃線的超鏈接？（）
A. a {text-decoration:none}
B. a {text-decoration:no underline}
C. a {underline:none}
D. a {decoration:no underline}
答案：A
6. 以下一段 XHTML 代碼片段，它不符合 W3C 規範，請問出現了幾處錯誤？
<div id="newsmore">
<ul>
<li><img src="0967_ohmyrabbit.jpg" /></li>
<li>印度總理辛格訪華專題</li>
<li>
<ul id="newsmore">
<li>專訪辛格：早日解決邊界問題是戰略目標</li>
<li>辛格稱北京奧運將爲印度舉辦賽事提供靈感</li>
<li>印度總理辛格訪華參觀北京奧運場館建設</li>
</ul>
</li>
</ul>
</div>
有一處，div 和 ul 有一個相同的 id 屬性 newsmore。
1. 請描述出兩點以上 XHTML 和 HTML 最顯著的區別
(1).XHTML 必須強制指定文檔類型 DocType，HTML 不需要
(2).XHTML 所有標籤必須閉合，HTML 比較隨意
(3).XHTML 嚴格區分大小寫，所有標籤的元素和屬性的名字都必須使用小寫
(4).XHTML 要求所有的標記都必須要有一個相應的結束標記
(5).XHTML 規定所有屬性都必須有一個值，沒有值的就重複本身
1. 請問，div 和 span, p 標籤三者間的區別 (YG)
從語義化的角度來講，div和span標籤對於它們包含的元素是沒有意義的，而p標籤則是
一個語義化標籤，表示一個段落。所以div 和 span 一般是用來佈局。
從顯示的角度來講，span 是內聯的，用在一小塊的內聯 HTML 中，前後不斷行，div 元素是塊級的，等同於其前後有斷行，p 元素是塊級的，前後斷行，而且還要再隔一行，相當於斷兩行。
2. CSS 中 class 和 id 的區別(YG)
id：每個頁 ID 是唯一的不能重複。 class：可以設置多個 class 爲同一個值。
3. 請列舉幾個 meta 元素(YG)
<meta name="keywords" contect=""> //向搜索引擎說明你的網頁的關鍵詞
<meta name="description" contect=""> //告訴搜索引擎你的站點的主要內容
<meta name="author" contect="你的姓名"> //告訴搜索引擎你的站點的製作的作者
<meta http-equiv="Content-Type" contect="text/html";charset=utf-8"> //指定字符集
<meta http-equiv="refresh" contect="n;url="> //定時讓網頁在指定的時間 n 內跳轉
<meta http-equiv='refresh'contect="n;url">
<meta http-equiv="expires" contect="Mon,12 May 2001 00:20:00 GMT"> // 可以用於設定網頁的到期時間，一旦過期則必須到服務器上重新調用。需要注意的是必須使用 GMT 時間格式
<meta http-equiv="pragma" contect="no-cache"> //禁用緩存
<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT"> //cookie 設定，如果網頁過期，存盤的 cookie 將被刪除。需要注意的也是必須使用 GMT 時間格式
1. 怪異模式和 XHTML 模式下 IE 的寬的區別(YG)
所謂的標準模式是指，瀏覽器按 W3C 標準解析執行代碼；怪異模式則是使用瀏覽器自己的方式解析執行代碼，因爲不同瀏覽器解析執行的方式不一樣，所以我們稱之爲怪異模式。
瀏覽器解析時到底使用標準模式還是怪異模式，與你網頁中的 DTD 聲明直接相關，DTD 聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁並顯示，忽略 DTD 聲明,將使網頁進入怪異模式(quirks mode)。
在 XHTML 模式下，聲明一個元素的寬度，僅僅指的是在 css 中設置的 width，而在怪
異模式下，元素的寬度包括 width 和 padding。
1. 實現框架的標籤，使用舉例(YG)
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" /> <frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
2. 請寫出以下 html 標籤的含義：input form script style table b img （小米）
<input /> 標籤用於蒐集用戶信息。根據不同的 type 屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、複選框、掩碼後的文本控件、單選按鈕、按鈕等等。
<form> 標籤用於爲用戶輸入創建 HTML 表單。表單能夠包含 input 元素，比如文本字段、複選框、單選框、提交按鈕等等。
<script> 標籤用於定義客戶端腳本，比如 JavaScript。script 元素既可以包含腳本語句，也可以通過 src 屬性指向外部腳本文件。
<style> 標籤用於爲 HTML 文檔定義樣式信息。
<table> 標籤定義 HTML 表格。簡單的 HTML 表格由 table 元素以及一個或多個 tr、 th 或 td 元素組成。
<b>呈現粗體文本效果。
<img /> 元素向網頁中嵌入一幅圖像。
14. 用 css、html 編寫一個兩列布局的網頁，右側固定寬度 200px，左側自適應 （小米）方案 1：
HTML 結構：
CSS 樣式：
這種方案最簡單，但不支持 IE7 及 IE7 以下的瀏覽器。
方案 2：
HTML 結構
CSS 樣式
這種方案，兼容性好，但是會產生額外的標籤。
以上就是整合的面試題，大家覺得有幫助，就收藏保存吧！