史上最全的web前端面試題匯總及答案Html&amp

史上最全的web前端面試題匯總及答案Html&Css（一）

者：櫻桃小丸子兒
來源：https://www.jianshu.com/p/2f7eb1ad7174

很早之前就在看web前端面試題，一直想總結一個比較全面又詳細的面試題庫，現在總結了一些，分享給大家，以后還會持續更新，有些題目有多種答案，本文只給出其中一種，哪里有問題的歡迎指出。

Html&CSS

1、談談你對web標準的理解

web標準的理解

2、列舉html中至少三個實體

&amp、&nbsp 、&lt、&gt、&reg、&copy

詳細請看w3schoolHTML實體符號參考手冊

w3schoolHTML實體符號參考手冊

3、cellpadding與cellspacing有何區別？

cellpadding：代表單元格邊框到內容之間的距離（留白）

cellspacing：cellspacing屬性用來指定表格各單元格之間的空隙。此屬性的參數值是數字，表示單元格間隙所占的像素點數。

4、CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增偽類有哪些？

1.id選擇器（ # myid）

2.類選擇器（.myclassname）

3.標簽選擇器（div, h1, p）

4.相鄰選擇器（h1 + p）

5.子選擇器（ul > li）

6.后代選擇器（li a）

7.通配符選擇器( *)

8.屬性選擇器（a[rel="external"]）

9.偽類選擇器（a: hover, li: nth - child）

**可繼承的樣式： **

font-size font-family color, UL LI DL DD DT;

不可繼承的樣式：

border padding margin width height

優先級

優先級就近原則，同權重情況下樣式定義最近者為準，載入樣式以最后載入的定位為準;

優先級為:

!important > id > class > tag

important 比內聯優先級高

CSS3新增偽類舉例

p:first-of-type 選擇屬于其父元素的首個<p> 元素的每個<p>元素。

p:last-of-type 選擇屬于其父元素的最后 <p>元素的每個<p>元素。

p:only-of-type 選擇屬于其父元素唯一的<p>元素的每個<p>元素。

p:only-child 選擇屬于其父元素的唯一子元素的每個<p>元素。

p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個<p>元素。

:enabled :disabled 控制表單控件的禁用狀態。

:checked 單選框或復選框被選中。

5、display與visibility有何異同？

display可以有很多值，visibility只有兩個常用值：visible、hidden。

當display為none、visibility為hidden時都會隱藏元素。但display會隱藏掉元素空間，visibility會保留元素空間。

6、怎么在網頁中實現絕對定位？

absolute

絕對定位與相對定位

7、table-layout、border-collapse有何用途？

①table-layout：設置表格是否自動調整寬高

②border-collapse：表格與單元格及單元格間的邊框是否融合在一起。

8、簡述盒模型

簡述盒模型

9、鏈接標記target屬性的_top、_parent、_blank、main、left、top各有何用處?

鏈接標記target與Dom，Bom

10、你對瀏覽器兼容怎么看？通常你都做哪些處理？

瀏覽器的兼容性

11、get和post的區別？

GET：一般用于信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，一般在2000個字符

POST：一般用于修改服務器上的資源，對所發送的信息沒有限制。

GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來獲取變量的值，也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。

然而，在以下情況中，請使用 POST 請求：

①無法使用緩存文件（更新服務器上的文件或數據庫）向服務器發送大量數據（POST 沒有數據量限制）。

②發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠。

12、xhtml和html有什么區別

①HTML是一種基本的WEB網頁設計語言,XHTML是一個基于XML的置標語言

②最主要的不同：

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

XHTML 元素必須被關閉。

標簽名必須用小寫字母。

XHTML 文檔必須擁有根元素。

13、行內元素有哪些?塊級元素有哪些?空(void)元素有那些？
行內元素和塊級元素的區別是什么？行內塊元素的兼容性使用？（IE8 以下）

塊級元素：div p h1 h2 h3 h4 form ul ol dl dt dd

行內元素: a b br i span input select image strong（強調的語氣）

常見空元素：

不常見空元素：

行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效。

塊級元素：各占據一行，垂直方向排列。從新行開始結束接著一個斷行。

兼容性：

display:inline-block;*display:inline;*zoom:1;

14、CSS引入的方式有哪些? link和@import的區別是?

CSS引入的方式包括內聯內嵌外鏈導入

link和@import的區別是：

①link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS；

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

③import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題；

④后者優先級更高

15、你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么?介紹一下你對瀏覽器內核的理解

Ie(Ie內核) 火狐（Gecko）谷歌（webkit） opera(blink)

對內核的理解：

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

①渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。

②JS引擎：解析和執行javascript來實現網頁的動態效果。

最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。

16、解釋css sprites，如何使用。

Css 精靈把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量。

適用于以下情況：

①靜態圖片，不隨用戶信息的變化而變化

②小圖片，圖片容量比較小

③加載量比較大

17、清除浮動的幾種方式，各自的優缺點

（1）父級div定義height。

（2）結尾處加空div標簽clear:both。

（3）父級div定義偽類:after和zoom。

（4）父級div定義overflow:hidden。

（5）父級div定義overflow:auto。

（6）父級div也浮動，需要定義寬度。

（7）父級div定義display:table。

（8）結尾處加br標簽clear:both。

比較好的是第3種方式，好多網站都這么用。

18、Doctype作用？標準模式與兼容模式各有什么區別?

①<!DOCTYPE>告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。

②標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

注意點：

HTML5 只需要寫<!DOCTYPEHTML>不需要對DTD進行引用，因為HTML5不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）。

而HTML4.01基于SGML,所以需要對DTD進行引用,才能告知瀏覽器文檔所使用的文檔類型。

19、iframe有哪些缺點？

①iframe會阻塞主頁面的Onload事件，搜索引擎的檢索程序無法解讀這種頁面，不利于SEO；

②iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。

使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。

20、如何實現瀏覽器內多個標簽頁之間的通信?

①通過WebSocket、SharedWorker來實現；

②也可以調用localstorge、cookies等本地存儲方式。

localstorge另一個瀏覽上下文（另一個標簽頁）里被添加、修改或刪除時，它都會觸發一個事件，我們通過監聽事件，控制它的值來進行頁面信息通信。

注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常。

21、如何在頁面上實現一個圓形的可點擊區域？

①map+area或者svg

②border-radius

③純js實現需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等

22、CSS3有哪些新特性？

① CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px）；

② 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）；

③ transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);

//旋轉,縮放,定位,傾斜

④ 增加了更多的CSS選擇器多背景 rgba

CSS3新增屬性

、HTML中定義表格的寬度用80px和80%的區別是什么？

PX標識像素，%標識整個父標簽寬度百分比

2、CSS樣式定義優先級順序是？

內聯樣式最高優先權，然后是內部樣式，然后才是外部樣式

3、div和span的區別？

DIV 和 SPAN 元素最大的特點是默認都沒有對元素內的對象進行任何格式化渲染。主要用于應用樣式表（共同點）。

兩者最明顯的區別在于DIV是塊元素，而SPAN是行內元素(也譯作內嵌元素)。

詳解：1.所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行，測試一下下面的代碼你會有更形象的理解：

測試<span>緊跟前面的"測試"顯示</span><div>這里會另起一行顯示</div>

4、CSS選擇器包括？

1）類別選擇器用“.”來標識

2）標簽選擇器用HTML標簽來標識

3）ID選擇器用“#”號來標識

4）通配符選擇器用“*”號來標識

5、用css3語法中，如何實現一個矩形框的圓角效果和50%紅色透明效果？，請寫出關鍵腳本

<style>

div{

width:200px;

height:200px;

border-radius: 30px;

opacity: 0.5;/* 火狐 */

/* filter:alpha(opacity=50); IE */

background-color:red;

}

</style>

6、Div與Table的區別

1） div大大縮減頁面代碼，提高頁面瀏覽速度，table代碼量繁多，頁面瀏覽效率慢。

2） div結構清晰，可讀性非常強，也容易被搜索引擎搜索到，優化了搜索引擎，Table結構復雜，可讀性差。

3）div 縮短改版時間。只要簡單的修改幾個CSS文件就可以改變很多頁面。Table要想改變的話，需要一個頁面一個頁面的去修改。

4）div表現和內容相分離，非常符合w3c標準。

5）table制作效率高于div

6）table瀏覽器兼容性高于div，我們常用的IE6.0，IE7.0火狐Firefox瀏覽器對div css設置上非常挑剔。

7、行級標簽轉塊級標簽，塊級標簽轉行級標簽

行級轉塊級：display:block

塊級轉行級：float:left

evExpress WinForm擁有180+組件和UI庫，能為Windows Forms平臺創建具有影響力的業務解決方案。DevExpress WinForm能完美構建流暢、美觀且易于使用的應用程序，無論是Office風格的界面，還是分析處理大批量的業務數據，它都能輕松勝任！

注意：目前基于HTML & CSS的控件正在積極研發中，可以作為技術預覽提供，如果需要使用請下載最新版組件體驗哦~

DevExpress WinForms Subscription官方最新版免費下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網

一組控件和組件允許開發人員構建HTML格式的UI，并使用CSS樣式自定義UI元素的外觀設置、大小、填充和布局選項，不再需要處理自定義繪制事件或更改大量屬性來修改控件以匹配UI規范，可以使用HTML和CSS標記的知識為桌面應用程序構建布局。

在上文中（點擊這里回顧：用DevExpress實現基于HTML&CSS的桌面應用程序的UI（二）)，我們為大家介紹了HTML-CSS標記的動態自定義項目、數據綁定等，本文將繼續為大家介紹如何使用外部控件和就地編輯器、按鈕的使用等，歡迎持續關注這個系列的文章哦~

HTML-CSS標記

外部控件和就地編輯器

<input>標記允許開發者向基于HTML的UI添加就地編輯器或外部控件，標簽支持以下控件：

HtmlContentControl

使用<input>標記作為想要在布局中顯示的外部控件和存儲庫項(就地編輯器)的占位符。

Data Grid Views (ItemsView, TileView和 WinExplorerView)

使用<input>標記作為Repository Items(就地編輯器)的占位符，不能使用此標記在數據網格視圖中顯示外部控件。

HTML

<input name="textEditEmail" class="field-input"/>
<input name="repositoryItemPictureEdit1" value="${ImageData}" class="editor"/>

按鈕

按照下面的步驟渲染一個按鈕：

定義一個呈現按鈕的HTML元素，指定元素的類(例如，將類名設置為“button”)。
在CSS代碼中，定義“button”類來指定元素的顯示屬性。
還為按鈕類定義懸停狀態，以便在元素懸停時突出顯示元素。

下面的示例使用<div> 標記來定義一個按鈕：

HTML

<div id="uploadBtn" class="centered button">Upload</div>
<div id="removeBtn" class="centered button">Remove</div>

CSS

.centered{
align-self:center;
}
.button {
width: 70px;
height: 20px;
min-width: 20px;
padding: 8px;
margin-left: 2px;
opacity: 0.5;
}
.button:hover {
border-radius: 4px;
background-color: #F2F2F2;
}

UI元素鼠標操作

開發者可以再控制級、HTML標記級和使用Fluent API時響應HTML UI元素上的鼠標操作。

控件的鼠標事件

支持HTML的控件公開可以處理的事件，以響應HTML UI元素上的鼠標動作，這些事件通常被稱為：

ElementMouseClick
ElementMouseDown
ElementMouseMove
ElementMouseOut
ElementMouseOver
ElementMouseUp

void htmlContentControl1_ElementMouseClick(object sender, DevExpress.Utils.Html.DxHtmlElementMouseEventArgs e) {
if(e.ElementId=="btnSend") {
//...
}
}

VB.NET

Sub HtmlContentControl1_ElementMouseClick(sender As Object, e As DevExpress.Utils.Html.DxHtmlElementMouseEventArgs) Handles HtmlContentControl1.ElementMouseClick
If e.ElementId="btnSend" Then
'...
End If
End Sub

HTML鼠標事件

HTML標記中支持以下鼠標事件：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove和onmouseout，開發者可以通過以下方式訂閱這些事件：

用下面的簽名在代碼后面定義一個方法：

void <MethodName>(object sender, DxHtmlElementMouseEventArgs args)

VB.NET

Sub <MethodName>(ByVal sender As Object, ByVal args As DxHtmlElementMouseEventArgs)

在HTML代碼中，將元素的事件設置為已定義方法的名稱。

HTML

<img onclick="<MethodName>" ... />

示例:

void OnPhoneClick(object sender, DxHtmlElementMouseEventArgs args) {
XtraMessageBox.Show("Phone!");
}

VB.NET

Sub OnPhoneClick(ByVal sender As Object, ByVal args As DxHtmlElementMouseEventArgs)
XtraMessageBox.Show("Phone!")
End Sub

HTML

<div class='buttonPanel'>
<img onclick="OnPhoneClick" src="PhoneCall" class="button" />
</div>

Fluent API

開發者可以使用Fluent API訂閱元素的鼠標單擊事件。

var fluent=context.OfType<ViewModel>();
fluent.BindCommandToElement(htmlContentControl, "btnPhone", x=> x.Phone);
//...
public class ViewModel {
public void Phone() {
//...
}
//...
}

VB.NET

Dim fluent=context.OfType(Of ViewModel)()
fluent.BindCommandToElement(htmlContentControl, "btnPhone", Sub(x) x.Phone())
'...
Public Class ViewModel
Public Sub Phone()
'...
End Sub
End Class
'...

HTML

<img id="btnPhone" src="PhoneCall" class="button" />

在線咨詢

上一篇：放棄 Electron，擁抱 WebView2！Ja
下一篇：Vuejs高度的改變動畫探索：折疊面板Collaps

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

史上最全的web前端面試題匯總及答案Html&amp

HTML-CSS標記

外部控件和就地編輯器

按鈕

UI元素鼠標操作

您的項目需求