當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

关于HTML的面试题-html4/css2篇

發布時間：2023/12/2 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了关于HTML的面试题-html4/css2篇小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 什么是HTML？
2. 用過什么調試器（瀏覽器），編輯器？
3. HTML4.0 和 HTML5.0 的區別？
4. 手寫 HTML 代碼
5. 元素類型有哪些（display有哪些屬性）？塊元素、行元素和行內塊元素的區別？你能分別寫出多少個塊元素、行元素？
6. a標簽中的兩個重要屬性是什么，分別用來干什么？
7. 什么是相對路徑、絕對路徑？
8. form 中 name 有什么作用？
9. form 表單中 get 和 method 請求的區別？
10. 創建樣式表有哪幾種方式，分別怎么寫？
11. link 和 import 的區別
12. css 有哪些選擇器？這些選擇器的權重分別是多少？
13. 讓塊元素居中
14. 讓行元素居中
15. 讓圖片居中
16. overflow 有哪些屬性，默認屬性是什么？float 有哪些屬性？高度塌陷的解決辦法是什么？
17. px、em、rem之間的區別
18. background-repeat 有哪些屬性值？
19. 圖片常用格式以及區別？
20. 定位屬性有哪些？區別是什么？
21. 什么是“盒模型”？畫出盒模型，并寫出盒模型的寬。
22. 圖片整合的優勢有哪些？
23. 隱藏一個元素的方法有哪些？
24. 什么是 BFC，有什么作用？
25. 用代碼寫出幾種后臺布局（單飛、雙飛/圣杯、后臺管理）
26. 常用的瀏覽器及內核、兼容前綴
27. PC 瀏覽器前端優化策略
28.表格行分組有哪幾個標簽
29.怎么去除換行產生的空格？

1. 什么是HTML？

HTML 是超文本標記語言。XHTML 指可擴展超文本標記語言（標識語言）。HTML5 指的是HTML的第五次重大修改。

2. 用過什么調試器（瀏覽器），編輯器？

調試器：火狐瀏覽器（FireFox），谷歌瀏覽器（Chrome），IE瀏覽器。
編輯器：Dreamweaver、HBuild、vsCode

3. HTML4.0 和 HTML5.0 的區別？

（1）更簡單；
（2）標簽的語義化；
（3）語法更寬松；
（4）多設備跨平臺；
（5）自適應網頁設計；
（6）兼容性： html4+css2.0 兼容 ie6/7/8，html5不能兼容ie6/7。

4. 手寫 HTML 代碼

<!doctype html>  <html><head> <meta charset="UTF-8" /> <title></title> </head><body></body>  </html>

5. 元素類型有哪些（display有哪些屬性）？塊元素、行元素和行內塊元素的區別？你能分別寫出多少個塊元素、行元素？

（1）元素類型：
常用的有4中：不顯示元素（ none 默認），塊元素（block）、行元素（inline）、行內塊元素（inline-block）；

（2）區別以及標簽：

名稱塊元素行元素行內塊元素

區別	1. 天生能換行的元素，獨占一行，每一個塊狀元素都會從新的一行重新開始，從上到下排布； 2. 在不設置寬度的情況下，塊元素的寬度是它父級元素內容的寬度； 3. 在不設置高度的情況下，塊級元素的高度是它本身內容的高； 4. 可以直接控制寬度、高度以及盒子模型的相關css屬性	天生不能換行的元素	天生不能換行但能設置寬高的元素
標簽	h1-h6，<p>，<br/>，&nbsp，<hr/>，<ul>和<li>，<ol>和<li>，<dl> <dt> <dd>，div	<b>， <i>，<u>，<strong>，<em>，<s>，<span>，<a>	<img>，<input>，<textarea>

（3）元素轉換通過 display。

6. a標簽中的兩個重要屬性是什么，分別用來干什么？

<a href="www.baidu.com" target="_blank"></a>

7. 什么是相對路徑、絕對路徑？

a標簽的href屬性、img標簽的src屬性、

（1）絕對路徑： 絕對路徑就是你的主頁上的文件或目錄在硬盤上真正的路徑(URL和物理路徑)。
例如：C:\xyz\test.txt 代表了test.txt文件的絕對路徑。http://www.sun.com/index.htm也代表了一個URL絕對路徑。

（2）相對路徑： 相對于某個基準目錄的路徑。包含Web的相對路徑（HTML中的相對目錄）。
例如：在Servlet中，"/“代表Web應用的根目錄。物理路徑的相對表示，例如：”./" 代表當前目錄，"…/"代表上級目錄。這種類似的表示，也是屬于相對路徑。

/表示源文件的根目錄
./表示當前文件所在的目錄(可以省略)
../表示當前文件所在的目錄的上一級目錄

絕對路徑：由根目錄(/)為開始寫起的文件名或者目錄名稱，如/home/oldboy/test.py;
相對路徑：相對于目前路徑的文件名寫法。例如./home/oldboy/exam.py或…/…/home/oldboy/exam.py，簡單來說只要開頭不是/，就是屬于相對路徑

8. form 中 name 有什么作用？

（1）name 屬性用于對提交到服務器后的表單數據進行標識
（2）或者在客戶端通過 JavaScript 引用表單數據。
注釋：只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。

9. form 表單中 get 和 method 請求的區別？

method，傳輸方式，默認get。兩者的區別：
（1）get 通過地址欄傳輸，會將信息拼接到地址欄上。而 post 不會講信息拼接到地址欄上；
（2）post 的傳輸方式比 get 安全；
（3）post 能傳輸大量信息；
（4）get 傳輸速度比 post 快；( get 沒有加密 )
注意：常用 get 的傳輸方式。

10. 創建樣式表有哪幾種方式，分別怎么寫？

（1）內聯樣式表：<style type="text/css">css語法</style>**，最好寫在<head></head>中；
（2）外部樣式表：<link rel="stylesheet" type="text/css" href="路徑" /> 和 @import url(路徑);；
（3）內聯樣式表（嵌入式、行間、行內）：<div style=“height:100px;background:red;” ></div>

11. link 和 import 的區別

區別linkimport

1. 從屬關系	link是HTML提供的標簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等。	@import是 CSS 提供的語法規則，只有導入樣式表（加載CSS）的作用。
2. 加載順序	當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載。	而@import引用的CSS 會等到頁面全部被下載完再被加載，所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式。
3. 兼容性的差別	link標簽作為 HTML 元素，不存在兼容性問題。	@import是CSS2.1提出的，所以老的瀏覽器不支持，@import只t在IE5以上的才能識別。
4. 使用dom控制樣式時的差別	當使用javascript控制dom去改變樣式的時候，只能使用link標簽。	@import不是 dom 可以控制的。
5. 權重區別	link引入的樣式權重大于@import引入的樣式。

12. css 有哪些選擇器？這些選擇器的權重分別是多少？

（1）id 選擇符 0100
（2）class 選擇符 0010
（3）偽類選擇符 0010
（4）元素選擇符（類型選擇符）0001
（5）后代選擇符后代選擇符的權重之和
（6）群組選擇符
（7）通配符
內聯樣式表的權重最高：1000 ，繼承樣式的權重為：0000

13. 讓塊元素居中

（1）高度已知：
① margin: 0 auto;這是讓塊元素水平居中的手段，需要配合 width 一起使用：

② 定位 position:fixed 和 margin: auto; 水平垂直居中。

③ 使用定位 position:fixed 和平移 margin;

<style>div{width:300px; height:200px; background:#f0f;position:fixed; top:50%; left:50%; margin:-100px 0 0 -150px;} </style> <body><div>box</div> </body>

④ 2D 居中：使用定位 position:fixed 和平移 transform: translate(水平, 垂直);

<style>div{width:300px; height:200px; background:#f0f;position:fixed; top:50%; left:50%; transform: translate(-150px, -100px);} </style> <body><div>box</div> </body>

（2）高度未知：
① 2D 居中：使用定位 position:fixed 和平移 transform: translate(水平, 垂直);

<style>div{width:300px; background:#f0f;position:fixed; top:50%; left:50%; tansform: translate(-50%, -50%);} </style> <body><div>盒子高度未知，定位之后，使用translate平移自身的一半距離</div> </body>

14. 讓行元素居中

（1）text-align:center 讓一個 span 標簽中的文本水平居中：將該 span 標簽套在一個塊元素中

（2）line-height: 高度px; 文本垂直居中。

15. 讓圖片居中

（1）使用 line-height 和 vertical-align。 只在html5中生效，XHTML1.0是不生效的。

（2）虛擬一個行內塊元素，讓圖片和這個元素的對齊點都在中心。

（3）使用偽元素，類似（2）。

16. overflow 有哪些屬性，默認屬性是什么？float 有哪些屬性？高度塌陷的解決辦法是什么？

（1）overflow

overflow:visible;/*默認值*/ overflow:hidden;/*溢出隱藏*/ overflow：scroll;/*滾動*/ overflow:auto;/*自動出現滾動條*/

（2）float

float: none; //默認不浮動 float: left; //左浮動 float: right; //右浮動

（3）高度塌陷的解決辦法
① 給父元素足夠高度；缺點：無法做到高度自適應；
② overflow: hidden; ；缺點：溢出的部分（子元素超出父元素）會被隱藏；
③ 在最后一個浮動元素之后添加一個塊元素，這個塊元素寫樣式 clear:both; 來清除浮動。
④ 萬能清除法：配合第三種方式通過偽元素來實現

//zoom:1;一條解決ie疑難雜癥（比如浮動）的神奇屬性 // visibility: visible/hidden;可見/隱藏 //父元素:before{content: ""; display:table;} 解決第一個塊元素 margin-top 向上傳遞問題。父元素{zoom:1;} 父元素:after{display: block; content: ""; clear: both; visibility: hidden;} 父元素:before{content: ""; display:table;}

16. 用代碼寫出下三角

哪個方向的三角形，就將哪個方向的邊框設置 border-方向: 大小 solid 顏色，相鄰的邊框顏色設置成白色（消失色），對邊的邊框設置為 0；

17. px、em、rem之間的區別

名稱pxemrem

介紹	px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。	em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。	rem是CSS3新增的一個相對單位（root em，根em）。
特點	1. IE無法調整那些使用px作為單位的字體大小； 2. 國外的大部分網站能夠調整的原因在于其使用了em或rem作為字體單位； 3. Firefox能夠調整px和em，rem，但是96%以上的中國網民使用IE瀏覽器(或內核)。	1. em的值并不是固定的； 2. em會繼承父級元素的字體大小。	使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。
注意		任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。

px 與 rem 的選擇？

對于只需要適配少部分手機設備，且分辨率對頁面影響不大的，使用px即可。
對于需要適配各種移動設備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設備。

18. background-repeat 有哪些屬性值？

repeat //默認平鋪 repeat-x //橫向平鋪 repeat-y //縱向平鋪 no-repeat //不平鋪

19. 圖片常用格式以及區別？

格式.jpg.png.gif

區別

圖片有損質量，但肉眼難分辨，用來減小圖片大小，圖片非鏤空使用。

圖片有損質量，但肉眼分辨不出，用來減小圖片大小，圖片鏤空使用。

圖片有損質量嚴重，肉眼容易分辨，常用做動圖。

20. 定位屬性有哪些？區別是什么？

postion: static（默認）、absolute（絕對定位）、relative（相等定位）、fixed（固定定位）定位屬性position屬性值staticrelativeabsolutefixed

稱呼	默認不定位	相對定位	絕對定位	固定定位
區別	沒有定位，元素出現在正常的流中.	根據自身初始所在位置來定位；不破壞原有元素的特性。	自動向上檢索，根據最近的定位元素作為父元素，如果檢索不到就以 html 來定位。	始終根據 html 來定位；
是否占文檔流	占文檔流	占文檔流	不占文檔流，完全脫離文檔流	不占文檔流，完全脫離文檔流
特點或用法		特點：因為相對定位占文檔流，在沒有設置 left、top 屬性下的效果和static 默認是一樣的。	用法：①向上檢索定位的元素作為父框； ②多個定位元素使用 z-index 來定義層級。	特點：位置不隨著滾動條滾動而發生變化。
適用場合		微調距離時可以用此屬性。可以使用left，top，right，bottom等。	通常用于做重疊效果。	網頁遮罩。

21. 什么是“盒模型”？畫出盒模型，并寫出盒模型的寬。

盒模型的組成分為：外邊距、邊框、內邊距、內容區；

盒子實際寬度（高度）=內容（content）+邊框（border）+間隙（padding）+間隔（margin）；

IE盒模型，也叫怪異盒模型，具體可以查看 html筆記（四）彈性盒+響應式

22. 圖片整合的優勢有哪些？

（1）減少對服務器的請求次數，從而提高頁面加載速度；
（2）減少圖片體積;

23. 隱藏一個元素的方法有哪些？

（1）display:none; 完全消失，且不占文檔流
（2）visibility:hidden; css消失，占文檔流
（3）opacity:0; 透明，占文檔流
（4）postion:relative;left:-99999px; 相對定位，占文檔流
（5）postion:absolute;left:-99999px; 絕對定位，不占文檔流

24. 什么是 BFC，有什么作用？

BFC（Block fomatting content）塊級格式化上下文。是 w3c css2.1 規范中的一個概念。它是頁面中的一塊渲染區域，且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。

具有 BFC 特性的元素看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，并且 BFC 具有普通容器所沒有的一些特性。

具體：html筆記（二）html4+css2.0（元素類型、css精靈、寬度自適應、BFC、瀏覽器相關概述、css統籌）

25. 用代碼寫出幾種后臺布局（單飛、雙飛/圣杯、后臺管理）

代碼太長了，我放到HTML+css實現的效果里面了。

26. 常用的瀏覽器及內核、兼容前綴

瀏覽器內核兼容前綴

IE瀏覽器	Trident	-ms-
火狐Firefox瀏覽器	Gecko	-moz-
原谷歌現蘋果	Webkit	-webkit-
現在Opera和谷歌	Blink（由Google和Opera 開發的瀏覽器排版引擎）
原Opera	Presto（迅速的，但是缺乏兼容性）	-o-

27. PC 瀏覽器前端優化策略

28. 表格行分組有哪幾個標簽：

表頭： <thead></thead>
表體： <tbody></tbody>
表尾： <tfoot></tfoot>

29. 怎么去除換行產生的空格？

（1）方案一：不換行；
（2）方案二：在給父元素設置：font-size:0;，子元素再設置 font-size 大小。案例示范

總結

以上是生活随笔為你收集整理的关于HTML的面试题-html4/css2篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： html笔记（五）2D、3D、3D动画
下一篇：关于HTML的面试题-html5/css