2022最新HTML和css常見面試題匯總

時間：2023-10-05 14:18:02 | 來源：網站運營

時間：2023-10-05 14:18:02 來源：網站運營

2022最新HTML和css常見面試題匯總：本文分享一些html+css的常見基礎面試題及答案，記住這些基礎，再去面試就有些底氣了。

1.XHTML和HTML有什么區(qū)別

• HTML是一種基本的WEB網頁設計語言，XHTML是一個基于XMl的置標語言
• 最主要的不同
• XHTML元素必須被正確地嵌套。
• XHTML元素必須被關閉
• 標簽名必須用小寫字母
• XHTMl文檔必須擁有根元素

2.什么是語義化的HTML？

• 直觀的認識標簽對于搜索引擎的抓取有好處，用正確的標簽做正確的事情！
• HTML語義化就是讓頁面的內容結構化，便于對瀏覽器，搜索引擎解析；
• 在沒有樣式css情況下也以一種文檔格式顯示，并且是容易閱讀。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于SEO。
• 在閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。

2（1）、簡述一下你對HTML語義化的理解？

• 1、用正確的標簽做正確的事情。
• 2、html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器，搜索引擎解析；
• 3、即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的；
• 4、搜索引擎的爬蟲也依賴于HTML標記確定上下文和各個關鍵字的權重，利用SEO;
• 5、使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。

3.常見的瀏覽器內核有哪些？

• Trident內核：IE,MaxThon,TT,The Word,360,搜狗瀏覽器等。[又稱為MSHTML]
• Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等；
• Presto內核：Opera7及以上。[Opera內核原為：Presto，現為：Blink]
• Webkit內核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

3(1).常見哪幾種瀏覽器測試？有哪些內核（Layout Engine）？

• 瀏覽器：IE、Chrome、FireFox、Safari、Opera
• 內核：Trident、Gecko、Presto、Webkit

4.HTML5有哪些新特性，移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分HTML和HTML5?

• HTML5現在已經不是SGML的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。
• 繪畫canvas
• 用于媒介回放的video和audio元素
• 本地離線存儲localStorage長期存儲數據，瀏覽器關閉后數據不丟失；
• sessionStorage的數據在瀏覽器關閉后自動刪除
• 語意化更好的內容元素，比如article,footer,header,nav,section
• 表單控件：calendar,date,time,email,url,search
• 新的技術webworker,websocktGeolocation
• 移除的元素
• 純表現的元素：basefont,big,center,font,s,strike,tt,u;
• 對可用性產生負面影響的元素：frame,frameset,noframes;
• 支持HTML5新標簽：
• IE8/IE7/IE6支持通過document,createElement方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式。

5.請描述一下cookies,sessionStorage（會話存儲）和localStrorage（本地存儲）的區(qū)別？

• cookie在瀏覽器和服務器間來回傳遞。sessionStorage和localStorage不會；
• sessionStorage和localStorage的存儲空間更大；
• sessionStorage和localStorage有更多豐富易用的接口；
• sessionStorage和localStorage各自獨立的存儲空間；

5、（1）請描述一下cookies、sessionStorage和localStorage區(qū)別？

• cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。
• cookie數據始終在同源的http請求中攜帶（即使不需要），即會在瀏覽器和服務器間來回傳遞。
• sessionStorage和localStorage不會自動把數據發(fā)給服務器，僅在本地保存
  存儲大小：
• cookie數據大小不能超過4K。
• sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
  有期時間：
• localStorage：存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；
• sessionStorage：數據在當前瀏覽器窗口關閉后自動刪除
• cookie：設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉

6.如何實現瀏覽器內多個標簽頁之間的通信？

• 調用localstorage,cookies等本地存儲方式
• WebSocket、SharedWorker
• localstroge另一個瀏覽器上下文被添加、刪除或修改時，它都會觸發(fā)一個事件，我們通過監(jiān)聽事件，控制它的值來進行頁面信息通信。
• 注意quirks:Safari在無痕跡模式下設置localstorge值拋出QuotExceededError的異常。

7.HTML5為什么只需要寫！DOCTYPE HTML？

• HTMl5不基于SGML,因此不需要對DTD進行引用，但是需要doctype來規(guī)范瀏覽器的行為(讓瀏覽器按照它們應該的方式來運行)；而HTMl4.01基于SGMA，所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

8.Doctype作用？標準模式與兼容模式各種什么區(qū)別？

• ！Doctype聲明位于HTML文檔的第一行，處于html標簽之前。告知瀏覽器的解析器用什么文檔標準解析這個文檔。doctype不存在或格式不正確會導致文檔以兼容模式呈現。
• 標準模式的排版和JS運作模式都是該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式來顯示，模擬老式瀏覽器的行為以防止站點無法工作。

9.Doctype？嚴格模式與混雜模式如何觸發(fā)這兩種模式，區(qū)分它們有何意義？

• 用于聲明文檔使用哪種規(guī)范（html/Xhtml）一般為嚴格過渡基于框架的html文檔。
• 加入XML聲明可觸發(fā)，解析方式更改為IE5.5擁有IE5.5的Bug。

9(1)、HTML5為什么只需要寫？

• HTML5不基于SGML，因此不需要對DTD進行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應該的方式來進行）
• 而HTML4.01基于SGML，所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

10、html document是干嘛的？

• HTML即：超文本標記語言，標準通用標記語言的一個應用，“超文本”就是指頁面內可以包含圖片、鏈接、甚至音樂、程序等非文字元素。
• HTML Document即：HTML Document對象，每個載入瀏覽器的HTML文檔都會成為Document對象
• 由于Document對象是window對象的一部分，所以可通過window.document屬性對其進行訪問。

11、html5哪些操作可以SEO優(yōu)化

• title標簽；meta標簽；header標簽；footer標簽
• 元標簽（meta標簽）；導航標簽（nav標簽）；文章標簽（article標簽）；左或右側標簽（aside標簽）

12、css盒模型有哪些及區(qū)別content-box border-box padding-box

Q1

• IE盒子模型box-sizing:border-box;（怪異模式）
• W3C標準盒子模型 box-sizing:content-box;（標準模式）默認模式

Q2

• content-box:這是默認樣式指定CSS標準。測量width和height屬性只包括的內容，但不是border, margin, 或者 padding。
• padding-box:width和height屬性包括padding的大小，不包括border和margin
• border-box:width和height屬性包括padding和border，但不是margin。這是盒模型的文檔時，Internet Explorer使用Quirks模式。
• content-box不包含padding，border-box包含padding。所以如果你設置的大小是一樣的，content-box看起來，會比border-box大

13、行內元素和塊狀元素的區(qū)別？行內快元素的兼容性使用？（IE8以下）

• 行內元素：會在水平方向排列，不能包含快級元素，設置width無效，height無效（可以設置line-height），margin上下無效，padding上下無效
• 塊級元素：各占據一行，垂直方向排列。從新行開始結束接著一個斷行
• 兼容性：display:inline-block;display:inline;zoom:1;

14、頁面導入樣式時，使用link和@import有什么區(qū)別？

• 1.link屬于HTML標簽，除了加載CSS外，還能用于定義RSS，定義rel連接屬性等作用；而@import是CSS提供，只能加載CSS;
• 2.頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載；
• import是CSS2.1提出的，只在IE5以上才能被識別，而link是HTML標簽，無兼容問題；

14(1).css引入的方式有哪些？link和@import的區(qū)別是？

• 內聯(lián)，內嵌，外鏈，導入
• 區(qū)別：同時加載，
• 前者無兼容性，后者css2.1以下瀏覽器不支持
• link支持使用javascript改變樣式，后者不可。

15、介紹以下你對瀏覽器內核的理解？

• 1、主要分成兩部分：渲染引擎（layout engineer或Rendering Engine）和JS引擎。
• 2、渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等）、以及計算網頁的顯示方式、然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同、所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其他需要編輯、顯示網絡內容的應用程序都需要內核
• 3、JS引擎則：解析和執(zhí)行javascript來實現網頁的動態(tài)效果。
• 4、最開始渲染引擎和JS引擎并沒有區(qū)分得很明確，后來JS引擎越來越獨立，內核九傾向于只指渲染引擎。

16、box-sizing常用的屬性有哪些？分別有什么作用？

• box-sizing：content-box|border-box|inherit
• content-box：寬度和高度分別應用到元素的內容框。

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、html5有哪些新特性？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分HTML和HTML5？

Q1

• HTML5現在已經不是SGML的子集，主要是關于圖像，位置，存儲，多任務等功能的增加；
• 1、繪畫canvas；
• 2、用于媒介回放的video和auto元素；
• 3、本地離線存儲localStorage長期存儲數據，瀏覽器關閉后數據不丟失；
• 4、sessionStorage的數據在瀏覽器關閉后自動刪除；
• 5、語意化更好的內容元素，比如article、footer、header、nav、section；
• 6、表單控件：calendar、date、time、url、search；
• 7、新的技術

Q2

• IE8/IE7/IE6支持通過document.createElement方法產生的標簽；

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

19、iframe的作用？

用法

• 1、iframe是用來在網頁中插入第三方頁面，早期的頁面使用iframe主要是用于導航欄這種很多頁面都相同的部分，這樣在切換頁面的時候避免重復下載。

優(yōu)點

• 1、便于修改，模擬分離，像一些信息管理系統(tǒng)會用到。
• 2、但現在基本不推薦使用。除非特殊需要，一般不推薦使用。

缺點

• 1、iframe的創(chuàng)建比一般的DOM元素慢了1-2個數量級
• 2、iframe標簽會阻塞頁面的的加載，如果頁面的onload事件不能及時觸發(fā)，會讓用戶覺得網頁加載很慢，用戶體驗不好，在Safari和Chrome中可以通過js動態(tài)設置iframe的src屬性來避免阻塞。
• 3、iframe對于SEO不友好，替換方案一般就是動態(tài)語言的Incude機制和ajax動態(tài)填充內容等。

20、box-sizing、transition、translate分別是什么？

• 1、box-sizing:用來指定模型的大小的計算方式。主要分為border-box(從邊框固定盒子大小)、content-box(從內容固定盒子大小)兩種計算方式。
• 2、transition:當前元素只要有”屬性”發(fā)生變化時，可以平滑的進行過渡。通過transition-propety設置過渡屬性；transition-duration設置過渡時間；transition-timing-function設置過渡速度；transition-delay設置過渡延時。
• 3、translate：通過移動改變元素的位置；有x,y,z三個屬性

21、選擇器優(yōu)先級是怎樣的？

• 1、！important>行內樣式>id選擇器>類選擇器>標簽選擇器>通配符>繼承
• 2、權重算法：(0,0,0,0)==》第一個0對應的是important的個數，第二個0對應的是id選擇器的個數，第三個0對應的類選擇器的個數，第四個0對應的是標簽選擇器的個數，就是當前選擇器的權重
• 3、比較：先從第一個0開始比較，如果第一個0大，那么說明這個選擇器的權重高，如果第一個相同，比較第二個，依次類推。

22、有一個導航欄在Chrome里面樣式完好？在IE里文字都聚到一起了，是哪個兼容性問題？

• 用了display：flex屬性，在IE10以下都是無效的。

23.CSS實現垂直水平居中

<div class="wrapper">
<div class="content"></div>
</div>

.wrapper{position:relative;}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相對定位
top: 50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085};
left: 50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085};
margin-top:-100px ; //二分之一的height，width
margin-left: -100px;
}

或：

.content{
position:absolute;
left:50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085};
top:50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085};
width:200px;
height:200px;
background:red;
-webkit-transform:translate(-50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085},-50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085});
-moz-transform:translate(-50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085},-50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085});
-o-transform:translate(-50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085},-50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085});
-ms-transform:translate(-50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085},-50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085});
transform:translate(-50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085},-50{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085});
}

24.display有哪些值？說明它們的作用。

• block 塊類型。默認寬度為父元素寬度，可設置寬高，換行顯示。
• none 缺省值。像行內元素類型一樣顯示。
• inline 行內元素類型。默認寬度為內容寬度，不可設置寬高，同行顯示。
• inline-block 默認寬度為內容寬度，可以設置寬高，同行顯示。
• list-item 像塊類型元素一樣顯示，并添加樣式列表標記。
• table 此元素會作為塊級表格來顯示。
• inherit 規(guī)定應該從父元素繼承display屬性的值。

25.行內元素有哪些？塊級元素有哪些？css的盒模型？

• 塊級元素：div ,p,h1,form,ul,li
• 行內元素：span,a,label,input,img,strong,em;
• css盒模型：內容，border,margin,padding;

26、寫一下audio標簽中，如何實現音樂的暫停和播放

• play()開始,pause()暫停

26（1）、寫出video標簽中預加載視頻用到的屬性是什么

• preload

27.css選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？內聯(lián)和important哪個優(yōu)先級高？

• 標簽選擇符；類選擇符；id選擇符
• id>class>標簽選擇
• important優(yōu)先級高

28.css清除浮動的幾種方法？

• 使用帶clear屬性的空標簽；
• 使用css的overflow屬性；
• 使用css的：after偽元素；
• 同時為了兼容 IE6，7 同樣需要配合zoom使用 .clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;} .clear{zoom:1;}
• 使用鄰接元素處理；
• 父級設置成inline-block；
• br清浮動
• 以浮制浮（父級同時浮動）
• 給浮動元素父級設置高度
• 給父元素添加overflow：hidden 清除浮動方法；
• 問題：需要配合 寬度 或者 zoom 兼容IE6 IE7； overflow: hidden; *zoom: 1;

29、px、em、rem的區(qū)別？

• 1、px像素。絕對單位，像素px是相對于顯示器屏幕分辨率而言的，是一個虛擬單位。是計算機系統(tǒng)的數字化圖像長度單位，如果px要換算成物理長度，需要指定精度DPI。
• 2、em是相對長度單位，相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，因此并不是一個固定的值。
• rem是CSS3新增的一個相對單位(root em,根em),使用rem為元素設定字體大小事，仍然是相對大小但相對的只是HTML根元素。
• 4、區(qū)別：IE無法調用那些使用px作為單位的字體大小，而em和rem可以縮放，rem相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優(yōu)點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器已支持rem。

30、CSS3新特性有哪些？

• 1、顏色：新增RGBA、HSLA模式
• 2、文字陰影(text-shadow)
• 3、邊框：圓角（border-radius）邊框陰影：box-shadow
• 4、盒子模型：box-sizing
• 5、背景：background-size設置背景圖片的尺寸，background-origin設置背景圖片的原點，background-clip設置背景圖片的裁剪區(qū)域，以“，”分隔可以設置多背景，用于自適應布局
• 6、漸變：linear-gradient、radial-gradient
• 7、過渡：transition可實現動畫
• 8、自定義動畫
• 9、在CSS3中唯一引入的偽元素是::selection
• 10、多媒體查詢、多欄布局
• 11、border-image
• 12、2D轉換：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
• 13、3D轉換

31、標簽上title與alt屬性的區(qū)別是什么？

• Alt當圖片不顯示時，用文字代表
• Title為該屬性提供信息

32、描述css reset的作用和用途？

• Reset重置瀏覽器的css默認屬性，瀏覽器的品種不同，樣式不同，然后重置，讓他們統(tǒng)一。

33、解釋css sprites,如何使用？

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

33（1）、為什么要使用css sprites

• css精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量
• css sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用css的”background-image”,”background-position”的組合進行背景定位，這樣可以減少。
• 很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以并發(fā)，但是如果請求太多會給服務器增加很大的壓力。

34、在新窗口打開鏈接的方法是？

• target:_blank

35、合理的頁面布局中常聽過結構與表現分離，那么結構是什么？表現是什么？

• 結構是html,表現是css

36、簡述對Web語義化的理解？

• 就是讓瀏覽器更好的讀懂你寫的代碼，在進行HTML結構、表現、行為設計時，盡量使用語義化的標簽，使程序代碼簡潔明了，易于進行web操作和網站SEO，方便團隊的一種標準，以圖實現一種“無障礙”的web開發(fā)。

37、display:none;與visibility:hidden的區(qū)別是什么？

• display:none;使用該屬性后，HTML元素（對象）的寬高，高度等各種屬性值都將“丟失”；
• visibility:hidden;使用該屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在，也即是說它仍然具有高度，寬度等屬性值。

38、請用css定義p標簽，要求實現以下效果；字體顏色在IE6下為黑色（#000000）；IE7下為紅色（#ff0000）;而其他瀏覽器下為綠色（#00ff00）

p{
color:green;
*color:blue;
_color:black;
}

39、前端頁面有哪三層構成，分別是什么？作用是什么？

• 結構層、表示層、行為層
• 結構層（structural layer）：由HTML或XHTML之類的標記語言負責創(chuàng)建。
• 表示層（presentation layer）:由css負責創(chuàng)建。
• 行為層（behaviorlayer）:負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM主宰的領域。

40、實現布局中間自適應寬度，左右兩欄固定寬度

<style>
.box{
display:flex;
}
.left{
width: 200px;
height: 600px;
background:red;
}
.right{
width: 200px;
height: 600px;
background:red;
}
.center{
width: 100{46ef1d7cfbdffc0db57029f974d30095d18ea60dba1d7b2ffaf442b213727085};
height:600px;
background:green;
}
</style>
</head>
<body>
<div class="box" >
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>

41、如何在頁面上實現一個圓形的可點擊區(qū)域？

• 1、map+area或者svg
• 2、border+radius
• 3、純js實現需要求一個點在不在圓上簡單算法，獲取鼠標坐標等等

42、介紹一下標準css的盒子模型？低版本IE的盒子模型有什么不同的？

• 1、有兩種：IE盒子模型、W3c盒子模型
• 2、盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)。
• 3、區(qū)別：IE的content部分把border和padding計算了進去

43、你如何對網站的文件和資源進行優(yōu)化？期待的解決方案包括：

• 文件合并
• 文件最小化/文件壓縮
• 使用CDN托管
• 緩存的使用

44、IE8以下版本的瀏覽器中盒模型有什么不同？

• IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內邊劇和邊距

45、寫出幾種IE6 BUG的解決方法

• 1、雙邊距BUG float引起的 使用display
• 2、3像素問題使用float引用的使用display:inline -3px;
• 3、超鏈接hover后點擊失效，使用正確的書寫順序 link visited hover active
• 4、le z-index問題給父級添加position:relative
• 5、png 透明使用js代碼改
• 6、min-height最小高度 ！important解決
• 7、select 在ie6下遮蓋 使用iframe嵌套
• 8、為什么沒有辦法定義1px左右的寬度器（IE6默認的行高造成的，使用over:hidden,zoom:0.08,line-height:1px）

46、css選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？內聯(lián)和important哪個優(yōu)先級高？

• css選擇符：類選擇器、標簽選擇器、ID選擇器、后代選擇器（派生選擇器）、群組選擇器
• 可以繼承：類選擇器、標簽名選擇器、后代選擇器（派生選擇器）、群組選擇器
• 優(yōu)先級算法：
• 標簽內直接定義：1000
• ID選擇器：100
• 類選擇器：1
• 內聯(lián)和important中，important優(yōu)先級高

47、css的基本語句構成是？

• 選擇符、屬性、值