34道常見的HTML+CSS面試題（附答案）

眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java(100G) Python(80G) 大數據區塊鏈測試 PPT JS(40g+300教程) HTML 簡歷領取相關學習資料！

一、HTML

1、<image>標簽上title屬性與alt屬性的區別是什么？

alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。

這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。

title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。參考《alt和title屬性的區別及應用》

2、分別寫出以下幾個HTML標簽：文字加粗、下標、居中、字體

加粗：<b>、<strong>

下標：<sub>

居中：<center>

字體：<font>、<basefont>、參考《HTML標簽列表》

3、請寫出至少5個html5新增的標簽，并說明其語義和應用場景

section：定義文檔中的一個章節

nav：定義只包含導航鏈接的章節

header：定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。

footer：定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。

aside：定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。

參考《HTML5 標簽列表》

4、請說說你對標簽語義化的理解？

a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構

b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；

c. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

d. 便于團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

5、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

聲明位于文檔中的最前面，處于標簽之前。告知瀏覽器以何種模式來渲染文檔。

嚴格模式的排版和 JS 運作模式是，以該瀏覽器支持的最高標準運行。

在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。

6、你知道多少種Doctype文檔類型？

標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。

HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，

Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。

7、HTML與XHTML——二者有什么區別

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

b. XHTML 元素必須被關閉。

c. 標簽名必須用小寫字母。

d. XHTML 文檔必須擁有根元素。

參考《XHTML 與 HTML 之間的差異》

8、html5有哪些新特性、移除了那些元素？

a. HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

b. 拖拽釋放(Drag and drop) API

c. 語義化更好的內容標簽（header,nav,footer,aside,article,section）

d. 音頻、視頻API(audio,video)

e. 畫布(Canvas) API

f. 地理(Geolocation) API

g. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失

h. sessionStorage 的數據在頁面會話結束時會被清除

i. 表單控件，calendar、date、time、email、url、search

j. 新的技術webworker, websocket等

移除的元素：

a. 純表現的元素：basefont，big，center, s，strike，tt，u；

b. 對可用性產生負面影響的元素：frame，frameset，noframes；

9、iframe的優缺點？

優點：

a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

b. iframe無刷新文件上傳

c. iframe跨域通信

缺點：

a. iframe會阻塞主頁面的Onload事件

b. 無法被一些搜索引擎索引到

c. 頁面會增加服務器的http請求

d. 會產生很多頁面，不容易管理。

參考《iframe的一些記錄》

10、Quirks模式是什么？它和Standards模式有什么區別？

在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區別：總體會有布局、樣式解析和腳本執行三個方面的區別。

a. 盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

b. 設置行內元素的高寬：在Standards模式下，給等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

c. 設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用

d. 設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。

11、請闡述table的缺點

a. 太深的嵌套，比如table>tr>td>h3，會導致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。

b. 靈活性差，比如要將tr設置border等屬性，是不行的，得通過td

c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異?；靵y

d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。

e. 不夠語義

參考《為什么說table表格布局不好？》

12、簡述一下src與href的區別

src用于替換當前元素；href用于在當前文檔和引用資源之間確立聯系。

src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置

href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接

公眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java Python 大數據區塊鏈測試 PPT JS HTML 簡歷領取相關學習資料！

天開始小編將會給大家講解HTML的入門知識以及做項目會遇到的某些問題以及如何解決此類問題的方法。說道網頁設計，HTML是我們必不可少的一部分。基礎網頁的構成，無論怎么變幻，都是由原聲的HTML代碼組成構成網頁。

下面我就根據工作中所用和看過的書籍一點一點總結下我們常用的HTML格式和代碼。

一、什么是HTML。

HTM不是一段編程語言，而是一款標記語言，本身不能顯示在瀏覽器中。經過瀏覽器的編釋和編譯，才能正確反映HTML標記語言的內容。HTML從1.0到5.0經歷了巨大的變化，從單一的文本顯示功能到多功能互動，已經成為了一款非常成熟的標記語言。

二、HTML文件的基本結構

<!doctype html>

<html>文件開始標記

<head>文件頭開始的標記

</head>文件頭結束

<body>文件主題的內容

</body>文件主題的結束

</html>文件結束的標記

這里主要說明title和meta(元信息)

三、HTML主要常用標簽

3.1標題

3.2 標題字對齊屬性align

默認情況下，標題文字是左對齊的。在網頁制作過程中，常常需要選擇對其他的方式，這時我們就需要用到align屬性。

3.3 段落標記p

段落標記是文檔中最常見的標記，<p>用來起始的一個段落。

3.3 換行標記

換行標記<br>作用是在不另起一段的情況下將當前文本強制換行。

3.4 不換行標記nobr

<nobor>表示的是不換行的標記</nobor>

3.5 水平線

<hr/>

四、建立超鏈接

與自身網站頁面有關的連接被稱為內部連接

4.1絕對路徑

絕對路徑是包括服務器規范在內的完全路徑。絕對路徑不管源文件在什么位置都可以非常精確地找到，除非是目標文檔的位置發生變化，否則連接不會失效。

4.2相對路徑

為了避免絕對路徑的缺陷，對于在同一站點之中的連接來說，使用相對路徑是一個很好的方法。

4.3 內部連接

屬性值

含義

-self在當前頁面中打開連接

-blank在一個全新的空白窗口中打開連接

-top在頂層框架中打開連接，也可以理解為在根框架中打開連接

-parent在當前框架的上一層里打開連接

4.4 錨點連接

錨點到本頁面中的位置

<a neme="2">XX產品特點</a>

錨點到其他頁面的位置

<a href="index.html#1"></a>對應連接到index.html中name=1的位置

4.5 連接到外部網站

在設置友情鏈接時，需要打開HTTP協議進行外部連接訪問。

4.6 連接到E-mail

4.7 連接到FTP

FTP代表文件傳輸協議，一個FTP站點通常包含一些上傳和下載文件的文件目錄。

大部分FTP網站需要使用用戶名和密碼來登錄。

當然還有其他的一些連接方式，例如文件下載，連接到Telnet等。這些都會可以用a標簽實現。

HTML基礎就先講到這里，后面退出DIV設計網頁格式已經網頁分框的實現。

、選擇題（1-18題各3分19-36題各2分，共92分）

1.在HTML的<TD>標簽中，align 屬性的取值是（　C　）

A. top ; B. middle ; C. center ; D. bottom

<tr>

</tr>

<tr>

</tr>

</table>

2. CSS樣式表根據所在網頁的位置，可分為（ B ）

A.行內樣式表、內嵌樣式表、混合樣式表; B.行內樣式表、內嵌樣式表、外部樣式表;

C.外部樣式表、內嵌樣式表、導入樣式表; D.外部樣式表、混合樣式表、導入樣式表

行內樣式：

<html>

<body>

</body>

</html>

-----------------------------------------------------------------

內嵌樣式：

<html>

<head>

#div{width:100px;height:100px;background:red;}

</style>

</head>

<body>

</body>

</html>

--------------------------------------------------------------

外部樣式：

<html>

<head>

</head>

<body>

</body>

</html>

---------------------

css文件

#div{width:100px;height:100px;background:red;}

#和.區別

.點是使用class引用的，多個控件可以同時使用一個class，一個控件上也可以使用多個class，比如

.tdRed{border:solid 1px red;}

.tdBKBlue{background-color:blue;}

而ID是在一個頁面中唯一的

總得來說class表示泛性的，id表示個性的

比如你所有的按鈕都是一個顏色的

.normalButton{background-color:blue;border:solid 0px black;}

對于提交按鈕會要做的大一點

#submit{width:100px;height:100px;}

那么你的按鈕就是

普通的按鈕就是

3. 在插入圖片標簽中，對插入的圖片進行文字說明使用的屬性是（　D?。?/p>

A.name; B.id; C.src; D. alt

4. 對于<FORM action=″URL″ method=*>標簽，其中*代表GET或（　C?。?/p>

A.SET; B. PUT; C. POST ; D. INPUT

Get和post區別

安全性：POST比GET安全；

編碼方式：POST方式提交時可以通過HTML文檔中的<META>元素設置實體部分的編碼方式，而GET方式提交時URI默認的編碼方式為ISO-8859-1，不可以在頁面中設置；

傳輸文件大?。篜OST方式提交文件放在實體部分傳輸，大小無上限，而GET方式提交文件內容放在URI部分傳輸，最大為2KB;

請求速度：GET比POST快。

數據傳輸方式：GET：查詢字符串（名稱/值對）是在 GET 請求的 URL 中發送的，如：/test/demo_form.asp?name1=value1&name2=value2；POST:查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的。

5. 下列標簽可以不成對出現的是（　B　）

A.〈HTML〉〈/HTML〉 ; B.〈P〉〈/P〉; C.〈TITLE〉〈/TITLE〉 ; D.〈BODY〉〈/BODY〉

<p>是段落標簽。

在HTML4.01中某些標簽（<p><br>,<hr>,<img>, <input>,<link>等）允許不成對出現，但是不推薦。在現在的瀏覽器里，都會“兼容”這些單標簽。瀏覽器解釋<p>標簽后，碰到一個不對應的標簽時，會自動填補</p>。所以<p>標簽可以單標簽使用，但不推薦。

在HTML5中規定了元素必須始終關閉，也就是標簽必須成對出現。

6. 對于標簽〈input type=*〉，如果希望實現密碼框效果，*值是（ C ）

A. hidden; B.text ; C. password ; D. submit

7. HTML代碼<select name=“name”></select>表示？（ D ）

A. 創建表格 ; <table>

B. 創建一個滾動菜單; <marquee>

C. 設置每個表單項的內容;

D.創建一個下拉菜單

8. BODY元素用于背景顏色的屬性是（　C?。?/p>

A. alink ; B. vlink ; C. bgcolor; D. background

9. 在表單中包含性別選項，且默認狀態為“男”被選中，下列正確的是（　A?。?/p>

A. <input type=radio name=sex checked> 男 ; B.<input type=radio name=sex enabled>

C.<input type=checkbox name=sex checked>男；

D.nput type=checkbox name=sex enabled>男

性別(單選框)：<input type="radio" value="1" name="sex" checked="checked"/>男

<input type="radio" value="2" name="sex"/>女

角色（下拉框）：<select name="role">

</select>

10. 在CSS中下面哪種方法表示超鏈接文字在鼠標經過時，超鏈接文字無下劃線？（　B　）

A. A:link{TEXT-DECORATION: underline }; B. A:hover {TEXT-DECORATION: none};

C. A:active {TEXT-DECORATION: blink }; D. A:visited {TEXT-DECORATION: overline }

11. JavaScript代碼： 'abcdefg'.indexOf('D') 結果是（ B ）

A：0 B：-1 C：3 D：4

Js常用方法

1.substr

substr(start,length)表示從start位置開始，截取length長度的字符串。

var src="images/off_1.png";

alert(src.substr(7,3));

彈出值為：off

2.substring

substring(start,end)表示從start到end之間的字符串，包括start位置的字符但是不包括end位置的字符。

var src="images/off_1.png";

alert(src.substring(7,10));

彈出值為：off

3.indexOF

indexOf() 方法返回某個指定的字符串值在字符串中首次出現的位置（從左向右）。沒有匹配的則返回-1，否則返回首次出現位置的字符串的下標值。

var src="images/off_1.png";

alert(src.indexOf('t'));

alert(src.indexOf('i'));

alert(src.indexOf('g'));

彈出值依次為：-1,0,3

4.lastIndexOf

lastIndexOf()方法返回從右向左出現某個字符或字符串的首個字符索引值（與indexOf相反）

var src="images/off_1.png";

alert(src.lastIndexOf('/'));

alert(src.lastIndexOf('g'));

彈出值依次為：6,15

5.split

將一個字符串分割為子字符串，然后將結果作為字符串數組返回。

以空格分割返回一個子字符串返回

var s, ss;

var s = "1,2,3,4";

ss = s.split(",");

alert(ss[0]);

alert(ss[1]);

12. <img src="name">的意思是？（ A ）

A. 圖像相對于周圍的文本左對齊; B. 圖像相對于周圍的文本右對齊;

C. 圖像相對于周圍的文本底部對齊; D. 圖像相對于周圍的文本頂部對齊

13. 點擊按鈕，在ID為“Link”的DIV標簽內顯示東軟實訓超鏈接, 下面對該按鈕的onClick事件函數描述正確的是：C

A. Link.innerText='<a ;

B. Link.outerText='<a ;

C. Link.innerHTML='<a ;

D. Link.outerHTML='<a

innerHTML 設置或獲取位于對象起始和結束標簽內的

HTML

outerHTML 設置或獲取對象及其內容的 HTML 形式

innerText 設置或獲取位于對象起始和結束標簽內的文本

outerText 設置(包括標簽)或獲取(不包括標簽)對象的文本

innerText和outerText在獲取時是相同效果，但在設置時，innerText僅設置標簽內的文本，而outerText設置包括標簽在內的文本

14.(“24.7” + 2.3 ) 的計算結果是（ C ）

A. 27 ; B. 24.7 2.3; C. 24.72.3; D. 26.7

15. （ B ）事件處理程序可用于在用戶單擊按鈕時執行函數

A. onSubmit; B. onClick; C. onChange; D. onExit

屬性當以下情況發生時，出現此事件onabort圖像加載被中斷onblur元素失去焦點onchange用戶改變域的內容onclick鼠標點擊某個對象ondblclick鼠標雙擊某個對象onerror當加載文檔或圖像時發生某個錯誤onfocus元素獲得焦點onkeydown某個鍵盤的鍵被按下onkeypress某個鍵盤的鍵被按下或按住onkeyup某個鍵盤的鍵被松開onload某個頁面或圖像被完成加載onmousedown某個鼠標按鍵被按下onmousemove鼠標被移動onmouseout鼠標從某元素移開onmouseover鼠標被移到某元素之上onmouseup某個鼠標按鍵被松開onreset重置按鈕被點擊onresize窗口或框架被調整尺寸onselect文本被選定onsubmit提交按鈕被點擊onunload用戶退出頁面

16. 用戶更改表單元素 Select 中的值時，就會調用（ D ）事件處理程序

A. onClick; B. onFocus; C. onMouseOver; D. onChange

17.onMouseUp 事件處理程序表示（ A ）

A. 鼠標被釋放; B. 鼠標按下; C. 鼠標離開某個區域; D. 鼠標單擊

18. 下列哪一項表示的不是按鈕（ C ）

A. type="submit"; B. type="reset"; C. type="image"; D. type="button"

19.下面哪一項是換行符標簽？（ C ）

A. <body>; B. <font>; C. <br>; D. <p>

font規定文本字體、大小和顏色：

20. 下列哪一項是在新窗口中打開網頁文檔。（ B ）

A. _self; B. _blank; C. _top; D. _parent

_blank在新窗口中打開被鏈接文檔；

_self是指在本身這個網頁窗口來打開新的網頁鏈接；

_top表示在頂層窗口打開網頁鏈接，即在整個窗口中打開被鏈接文檔；

_parent表示在父窗口打開網頁鏈接；

<a target="_blank">Visit W3School!</a>onclick="javascript：window.open('Default.aspx','_blank');"

21. 下面說法錯誤的是( D )

A. CSS樣式表可以將格式和結構分離;

B. CSS樣式表可以控制頁面的布局;

C. CSS樣式表可以使許多網頁同時更新;

D. CSS樣式表不能制作體積更小下載更快的網頁

CSS樣式表能為我們實現些什么樣的功能?

1、你可以將格式和結構分離。

2、你可以以前所未有的能力控制頁面布局。

3、你可以制作體積更小下載更快的網頁。

4、你可以將許多網頁同時更新，比以前更快更容易。

5、瀏覽器將成為你更友好的界面

將格式和結構分離

HTML從來沒打算控制網頁的格式或外觀。這種語言定義了網頁的結構和各要素的功能，而讓瀏覽器自己決定應該讓各要素以何種模樣顯示。但是網頁設計者要求的更多。所以當 Netscape推出新的可以控制網頁外觀的HTML標簽時，網頁設計者無不歡呼雀躍。我們可以用<FONT FACE>、<I>包在<P>外邊控制文章主體的外觀等等。然后我們將所有東西都放入表格，用隱式GIF空格產生一個20象素的邊距。一切都變得亂七八糟。編碼變得越來越臃腫不堪，要想將什么內容迅速加到網頁中變得越來越難。串接樣式表通過將定義結構的部分和定義格式的部分分離使我們能夠對頁面的布局施加更多的控制。HTML仍可以保持簡單明了的初衷。CSS代碼獨立出來從另一角度控制頁面外觀。

以前所未有的能力控制頁面的布局

<FONT SIZE>能使我們調整字號，表格標簽幫助我們生成邊距，這都沒錯。但是，我們對HTML總體上的控制卻很有限。我們不可能精確地生成80象素的高度，不可能控制行間距或字間距，我們不能在屏幕上精確定位圖象的位置。但是現在，樣式表使這一切都成為可能。

可以制作出體積更小下載更快的網頁還有更好的消息：

樣式表只是簡單的文本，就象HTML那樣。它不需要圖象，不需要執行程序，不需要插件，不需要流式。它就象HTML指令那樣快。有了CSS之后，以前必須求助于GIF的事情現在通過CSS就可以實現。還有，正如我先前提到的，使用串接樣式表可以減少表格標簽及其它加大HTML體積的代碼，減少圖象用量從而減少文件尺寸。

可以更快更容易地維護及更新大量的網頁

沒有樣式表時，如果我想更新整個站點中所有主體文本的字體，我必須一頁一頁地修改每張網頁。即便站點用數據庫提供服務，我仍然需要更新所有的模板，而且更新每一模板中每一個實例實例的 <FONT FACE>。樣式表的主旨就是將格式和結構分離。利于樣式表，我可以將站點上所有的網頁都指向單一的一個CSS文件，我只要修改CSS文件中某一行，那么整個站點都會隨之發生變動。

瀏覽器將成為你更友好的界面

不象其它的的網絡技術，樣式表的代碼有很好的兼容性，也就是說，如果用戶丟失了某個插件時不會發生中斷，或者使用老版本的瀏覽器時代碼不會出現雜亂無章的情況。只要是可以識別串接樣式表的瀏覽器就可以應用它。

22. 要使表格的邊框不顯示，應設置border的值是( B )

A. 1; B. 0; C. 2; D. 3

23. 如果要在表單里創建一個普通文本框，以下寫法中正確的是( A )

A. <INPUT>; B. <INPUT type="password">;

C. <INPUT type="checkbox">; D. <INPUT type="radio">

24. 以下有關按鈕的說法中，錯誤的是( B )

A. 可以用圖像作為提交按鈕; B. 可以用圖像作為重置按鈕;

C. 可以控制提交按鈕上的顯示文字; D. 可以控制重置按鈕上的顯示文字。

function fangfa(){

document.formname.submit();

document.formname.reset();

}

在線咨詢

上一篇：戴爾筆記本有多少擴展位？原來這個秘密就藏在官網里
下一篇：學用系列｜BookxNote更新1.0.0.67，閱讀思維圖支持樣式切換

您的項目需求

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

整合營銷服務商

34道常見的HTML+CSS面試題（附答案）

您的項目需求