Web前端2019年各大廠經典面試題整理分享

春節事後，又是新的一年開始，不少要換行業換工做換崗位的都開始了新一輪的跳槽，那麼想要在衆多的求職者中讓本身脫穎而出呢？怎麼樣能使得本身更有效的拿到高薪的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 樣式

 

 

 

 

這種方案，兼容性好，可是會產生額外的標籤。

以上就是整合的面試題，你們以爲有幫助，就收藏保存吧！

​