28道HTML基礎面試題及答案彙總

1、内元素和塊級元素的差別？

行内元素：不會獨立出現在一行，單獨使用的時候後面不會有換行符的元素。eg：span, strong, img, a 等。這些元素，預設的高寬，總是其内容的高寬。并且，margin和padding值，隻有左右有效。

塊級元素：獨立在一行的元素，他們後面會自動帶有換行符。eg：div , p ,form , ul , li , ol , dl 等。它們的出現，往往獨自占領一行。在沒有設定寬度的情況下，預設寬度總是其父元素的寬度。

行内元素轉換成塊元素，隻要設定其display屬性為block即可，display:block; 。塊元素轉換成行内元素，隻要将其display屬性設定為inline即可，display:inline;。

（1）行内元素有：a b span img input select

（2）塊級元素有：div p ul ol li dl dt dd h1-h6

（3）常見的空元素：br-換行，hr-水準分割線

2、Doctype作用？标準模式與混雜模式如何區分？

<!DOCTYPE>告訴浏覽器使用哪個版本的html規範來渲染文檔。DOCTYPE不存在或形式不正确會導緻html文檔以混雜模式呈現。

标準模式（Standards mode）以浏覽器支援的最高标準運作；混雜模式（Quirks mode）中頁面是一種比較寬松的向後相容的方式顯示。

3、引入樣式時，link和@import的差別？

連結樣式時，link隻能在HTML頁面中引入外部樣式

導入樣式表時，@import 既可以在HTML頁面中導入外部樣式，也可以在css樣式檔案中導入外部css樣式。

4、html5有哪些新特性？

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

(1)繪畫 canvas;

(2)用于媒介回放的 video 和 audio 元素;

(3)本地離線存儲 localStorage 長期存儲資料，浏覽器關閉後資料不丢失;

(4)sessionStorage 的資料在浏覽器關閉後自動删除;

(5)語意化更好的内容元素，比如 article、footer、header、nav、section;

(6)表單控件，calendar、date、time、email、url、search;

(7)新的技術webworker, websocket, Geolocation;

IE8/IE7/IE6支援通過document.createElement方法産生的标簽，可以利用這一特性讓這些浏覽器支援HTML5新标簽，浏覽器支援新标簽後，還需要添加标簽預設的樣式。當然也可以直接使用成熟的架構、比如html5shim

移除的元素：

純表現的元素：basefont big center font s strike tt u
性能較差元素：frame frameset noframes

區分：

DOCTYPE聲明的方式是區分重要因素
根據新增加的結構、功能來區分

5、介紹一下你對浏覽器核心的了解？

主要分成兩部分：渲染引擎(Layout Engine或Rendering Engine)和js引擎。

渲染引擎：負責取得網頁的内容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或列印機。浏覽器的核心的不同對于網頁的文法解釋會有不同，是以渲染的效果也不相同。

js引擎：解析和執行JavaScript來實作網頁的動态效果。

最開始渲染引擎和JS引擎并沒有區分的很明确，後來JS引擎越來越獨立，核心就傾向于隻指渲染引擎。

6、常見的浏覽器核心有哪些？

Trident( MSHTML )：IE MaxThon TT The World 360 搜狗浏覽器
Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
Presto：Opera7及以上(Opera核心原為：Presto，現為：Blink)
Webkit：Safari Chrome

7、簡述一下你對HTML語義化的了解？

去掉或丢失樣式的時候能夠讓頁面呈現出清晰的結構。

有利于seo和搜尋引擎建立良好溝通，有助于爬蟲抓取更多的資訊，爬蟲依賴于标簽來确定上下文和各個關鍵字的權重。

友善其它裝置解析。

便于團隊開發和維護，語義化根據可讀性。

8、label标簽的作用是什麼? 是怎麼用的?

去掉或丢失樣式的時候能夠讓頁面呈現出清晰的結構。

label标簽用來定義表單控件間的關系,當使用者選擇該标簽時，浏覽器會自動将焦點轉到和标簽相關的表單控件上。label 中有兩個屬性是非常有用的, FOR和ACCESSKEY。

FOR屬性功能：表示label标簽要綁定的HTML元素，你點選這個标簽的時候，所綁定的元素将擷取焦點。例如

<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">

9、HTML5的form如何關閉自動完成功能？

TML的輸入框可以擁有自動完成的功能，當你往輸入框輸入内容的時候，浏覽器會從你以前的同名輸入框的曆史記錄中查找出類似的内容并列在輸入框下面，這樣就不用全部輸入進去了，直接選擇清單中的項目就可以了。

但有時候我們希望關閉輸入框的自動完成功能，例如當使用者輸入内容的時候，我們希望使用AJAX技術從資料庫搜尋并列舉而不是在使用者的曆史記錄中搜尋。

方法：

在IE的internet選項菜單中裡的自動完成裡面設定
設定form輸入框的autocomplete為on或者off來來開啟輸入框的自動完成功能

11、title與h1的差別、b與strong的差別、i與em的差別？

title屬性沒有明确意義，隻表示标題；h1表示層次明确的标題，對頁面資訊的抓取也有很大的影響

strong标明重點内容，語氣加強含義；b是無意義的視覺表示

em表示強調文本；i是斜體，是無意義的視覺表示

視覺樣式标簽：b i u s

語義樣式标簽：strong em ins del code

12、元素的alt和title有什麼異同？

在alt和title同時設定的時候，alt作為圖檔的替代文字出現，title是圖檔的解釋文字.

13、浏覽器頁面有哪三層構成，分别是什麼，作用是什麼?

浏覽器頁面構成：結構層、表示層、行為層

分别是：HTML、CSS、JavaScript

作用：HTML實作頁面結構，CSS完成頁面的表現與風格，JavaScript實作一些用戶端的功能與業務。

14、div+css的布局有什麼優點？

（1）改版的時候更友善隻要改css檔案。

（2）頁面加載速度更快、結構化清晰、頁面顯示簡潔。

表現與結構相分離。

（3）易于優化（seo）搜尋引擎更友好，排名更容易靠前。

15、網頁制作會用到的圖檔格式有哪些？

Webp：WebP格式，谷歌（google）開發的一種旨在加快圖檔加載速度的圖檔格式。

并能節省大量的伺服器帶寬資源和資料空間。Facebook Ebay等知名網站已經開始測試并使用WebP格式。

Apng：是PNG的位圖動畫擴充，可以實作png格式的動态圖檔效果，有望代替GIF成為下一代動态圖示準。

16、簡述一下src與href的差別

src用于替換目前元素，href用于在目前文檔和引用資源之間确立聯系

17、從浏覽器位址欄輸入url到顯示頁面的步驟

浏覽器根據請求的URL交給DNS域名解析，找到真實IP，向伺服器發起請求；

伺服器交給背景處理完成後傳回資料，浏覽器接收檔案（HTML、JS、CSS、圖象等）；

浏覽器對加載到的資源（HTML、JS、CSS等）進行文法解析，建立相應的内部資料結構（如HTML的DOM）；

載入解析到的資源檔案，渲染頁面，完成。

18、HTML全局屬性(global attribute)有哪些

class:為元素設定類辨別

data-*: 為元素增加自定義屬性

draggable: 設定元素是否可拖拽

id: 元素id，文檔内唯一

lang: 元素内容的的語言

style: 行内css樣式

title: 元素相關的建議資訊

19、Canvas是什麼？怎樣寫Canvas？

Canvas是HTML5的一個元素，它使用JavaScript在網頁上繪制圖形。Canvas是一個矩形區域。它的每一個像素都可以由HTML5語言來控制。使用Canvas繪制路徑、框、圓、字元和添加圖像有幾種方法。

如果要在我們的HTML文檔中添加Canvas标簽，我們需要ID、寬度和高度。下面是如何将基本Canvas标簽寫入HTML文檔的示例。

<canvas id="myFirstCanvas" width="100" height="100"> </canvas>

20、你能列出HTML5中新的輸入類型屬性嗎？

search：用于搜尋域，比如站點搜尋或 Google 搜尋，域顯示為正常的文本域。

url ：用于應該包含 URL 位址的輸入域在送出表單時，會自動驗證 url 域的值。

email：用于應該包含 e-mail 位址的輸入域，在送出表單時，會自動驗證 email 域的值。

datetime：選取時間、日、月、年（UTC 時間）

date：選取日、月、年

month：選取月、年

week：選取周和年

time：選取時間（小時和分鐘）

datetime-local：選取時間、日、月、年（本地時間）

number：用于應該包含數值的輸入域，您還能夠設定對所接受的數字的限定。

range：用于應該包含一定範圍内數字值的輸入域，類型顯示為滑動條。

21、簡述幾個css hack?

(1) 圖檔間隙

在div中插入圖檔，圖檔會将div下方撐大3px。hack1：将<div>與<img>寫在同一行。hack2：給<img>添加display：block；

dt li 中的圖檔間隙。hack：給<img>添加display：block；

(2) 預設高度，IE6以下版本中，部分塊元素，擁有預設高度（低于18px）

hack1：給元素添加：font-size：0；

hack2：聲明：overflow：hidden；

表單行高不一緻

hack1：給表單添加聲明：float：left；height：；border： 0；

滑鼠指針

hack：若統一某一進制素滑鼠指針為手型：cursor：pointer；

當li内的a轉化塊元素時，給a設定float，IE裡面會出現階梯狀

hack1：給a加display：inline-block；

hack2：給li加float：left；

22、viewport 所有屬性？

(1)width :設定layout viewport的寬度，為一個正整數，或字元串'device-width';

(2)initial-scale:設定頁面的初始縮放值，為一個數字，可以帶小數。

(3)minimum-scale:允許使用者的最小縮放值，為一個數字，可以帶小數。

(4)maximum-scale:允許使用者的最大縮放值，為一個數字，可以帶小數。

(5)height:設定layout viewport的高度，這個屬性對我們并不重要，很少使用

(6)user-scalable:是否允許使用者進行縮放，值為‘no’或者‘yes’。

安卓中還支援：target-densitydpi，表示目标裝置的密度等級，作用是決定css中的1px 代表多少實體像素

(7)target-densitydpi:值可以為一個數值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個字元串中的一個

23、meta标簽的name屬性值？

name 屬性主要用于描述網頁，與之對應的屬性值為content，content中的内容主要是便于搜尋引擎機器人查找資訊和分類資訊用的。

meta标簽的name屬性文法格式是：＜meta name="參數" content="具體的參數值"＞。

其中name屬性主要有以下幾種參數：

A 、Keywords(關鍵字)說明：keywords用來告訴搜尋引擎你網頁的關鍵字是什麼。

B 、description(網站内容描述) 說明：description用來告訴搜尋引擎你的網站主要内容。

C 、robots(機器人向導)說明：robots用來告訴搜尋機器人哪些頁面需要索引，哪些頁面不需要索引。

content的參數有all,none,index,noindex,follow,nofollow,預設是all。

舉例：＜meta name="robots" content="none"＞D 、author(作者)

24、px/em/rem有什麼差別？為什麼通常給font-size 設定的字型為62.5%

相對于目前對象内文本的字型尺寸。如目前對行内文本的字型尺寸未被人為設定，則相對于浏覽器的預設字型尺寸。

1、em的值并不是固定的；

2、em會繼承父級元素的字型大小。使用rem為元素設定字型大小時，仍然是相對大小，但相對的隻是HTML根元素。

這個機關可謂集相對大小和絕對大小的優點于一身，通過它既可以做到隻修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。

rem是相對于浏覽器進行縮放的。1rem預設是16px，在響應式布局中，一個個除來轉換成rem，太麻煩，是以重置rem

body{font-size=62.5% } 此時1rem = 10px;若是12px則是1.2rem.

25、a标簽中 active hover link visited 正确的設定順序是什麼?

a标簽的link、visited、hover、active是有一定順序的

a:link

a:visited

a:hover

a:active

26、a标簽中如何禁用href 跳轉頁面或定位連結

e.preventDefault();
href="javascript:void(0);

27、手機端上圖檔長時間點選會選中圖檔，如何處理?

onselect=function() {
  return false
}

28、video标簽的幾個屬性方法

src：視訊的URL
poster：視訊封面，沒有播放時顯示的圖檔
preload：預加載
autoplay：自動播放
loop：循環播放
controls：浏覽器自帶的控制條
width：視訊寬度
height：視訊高度

學習更多技能

請點選下方公衆号