前端（HTML+CSS）入門高頻面試題
阿新 • • 發佈：2020-12-09
前端（HTML+CSS）入門高頻面試題
HTML：
1.簡述<!doctype>的作用？
答：
- 幫助瀏覽器正確地顯示網頁
<!DOCTYPE>宣告叫做檔案型別定義(DTD)，宣告的作用是為了告訴瀏覽器該檔案的型別。讓瀏覽器解析知道應該用哪個規範來解析文件。
<!DOCTYPE>宣告必須在HTML文件的第一行，這並不是一個HTML標籤。
2.常見的瀏覽器及其核心？
答：
- pc端：
| chrome(谷歌) | firebox(火狐) | opero(歐朋) | IE(微軟) | sarfari |
|---|---|---|---|---|
| blink(webkit分支) | gecko（高版本相容谷歌核心） | presto（後來版本改成blink） | trident | webkit |
- 移動端：360、qq、UC、搜狗： 雙核心（blink&trident）
3.b 和strong(i和em)標籤的區別？
答：
-
以strong和b標籤為例：
b標籤僅僅只是給文字添加了加粗樣式，屬於UI層面的處理，除此之外沒有任何意義。你甚至就可以把它看作是加了font-size:bold的css樣式的span標籤。 -
strong標籤則是側重於標籤語義化，它是在告訴瀏覽器這是一段重點強調的內容。只不過它的預設樣式恰好也是加粗。
-
此外，針對SEO（搜尋引擎優化），strong標籤與b標籤相比更被搜尋引擎重視，內容更容易被抓取到。同理，em標籤也是語義化標籤，而i標籤只是僅僅加了斜體樣式，並且em標籤對SEO來說也更加友好。
4.談談對語義化的理解？
答：
- 概念：運用合適的標籤和特定的屬性去格式化文件（合適標籤和屬性要用在合適的場合）
優點：
- 易於開發和維護
- 使用者體驗比較好
- 易於seo,易於爬蟲抓取關鍵字，能和搜尋引擎建立良好的溝通。
- 即使在沒有css樣式的情況下，也能呈現良好的效果
CSS：
1.CSS引入方式有哪些？
答：
- 行內式
<div style="width: 200px;height: 200px;background-color: red;">1</div>- 特點：程式碼冗餘，結構層與表示層不分離。
- 內嵌式（文字內部引入）
- 只作用於當前文件
<head>
<style>
/* 標籤選擇器 */ - 特點：程式碼相對清晰，結構層與表示層不完全分離
- 外鏈式
- 可以作用於任何文件，需要link標籤引入
<link rel="stylesheet" href="./css/index.css">- 特點：程式碼非常清晰，結構層與表示層完全分離
2.CSS基本選擇器有哪些？
答：
萬用字元選擇器：
- 格式：
* {
屬性名:屬性值;
屬性名:屬性值;
}
標籤選擇器：
- 格式：
標籤 {
屬性名:屬性值;
屬性名:屬性值;
}
累選擇器：
- 格式：
.類名 {
屬性名:屬性值;
屬性名:屬性值;
}
id選擇器：
- 格式：
#id名 {
屬性名:屬性值;
屬性名:屬性值;
}
- 優先順序
- id選擇器>類選擇器>標籤選擇器>萬用字元選擇器
3.如何合併表格單元格
答：
-
合併列—colspan
-
合併行—rowspan
-
合併行的時候，比如rowspan=“2”，它的下一行tr會少一列；合併列的時候 colspan=“2”，此行的列會少一列
4.thead、tbody、tfoot有什麼用？
答：
<thead>標籤應該與<tbody>和<tfoot>標籤結合起來使用，用來規定表格的各個部分（表頭，主體，頁尾）。<thead>標籤用於組合HTML表格的表頭內容。<tbody>標籤用於組合HTML表格的主體內容。<tfoot>標籤用於組合HTML表格的頁尾內容。<thead>、<tbody>、<tfoot>標籤預設不會影響表格的佈局。