前端開發經典面試題及答案-HTML篇

端的面試題相對較多，霸哥結合網上的面試經驗，整理了一份前端高頻面試題，猩碼學苑的學員也在用，歡迎伙伴們收藏觀看。

由于內容過多，為了讓伙伴們更好的記憶和掌握，霸哥今天先出HTML部分內容，后續每天會發一篇，直至發完。

前端開發經典面試題及答案——HTML篇

一、cookie和WebStorage的區別與聯系？

二、link和@import的區別

link和@import是外部引入CSS的兩種方式。

結論：慎用@import方式。使用@import需要注意很多語法規則、引入順序、資源文件下載引起的http請求過多。

區別：

HTNL中CSS有四種引入方式：

三、瀏覽器如何實現不同標簽頁的通信？

瀏覽器內多個標簽頁之間通信，簡言之，瀏覽器中開了多個窗口，其中一個窗口產生行為其他窗口不用刷新也有相關表現。

1、cookie+setInterval方式

將要發送的信息寫入cookie：

在另一個頁面讀取cookie：

2、websocket協議

新建webSocket文件夾，在該目錄下打開終端 → 運行npm init （npm安裝及配置步驟） → 初始化node項目（因為需要引入ws包） → 回車到結束 → 安裝ws包 → 依舊在當前目錄下終端運行npm i -save ws → 在webSocket目錄下新建sever.js、send.html、reveive.html文件

四、iframe的優缺點

優點：

1、能夠把嵌入的網頁原封不動的展示出來；

2、多個網頁調用iframe，只需要修改iframe的內容，就能實現所有引用頁面的修改，方便快捷；

3、提升代碼的復用性；

4、可解決頁面加載緩慢的問題。

缺點：

1、不易管理；

2、鏈接書寫失誤會導致鏈接死循環

4、部分移動設備無法完全顯示，設備兼容性差。

5、增加服務器的http請求，對大型網站不友好。

五、canvas

1、canvas是什么？

是html5新標簽，屬于h5新特性。canvas標簽是一個圖形的容器，可以在上形狀，畫logo，通過javascript繪制。

2、canvas用于什么？

①制作web網頁游戲

②數據可視化（echarts就是基于canvas）

③廣告banner的動態效果

④內嵌網頁

六、做項目用到哪些h5新特性？

七、localstorage和sessionStorage可以寫什么？

1、sessionStorage可用于寫臨時交流的留言板或是交流記錄

2、localStorage可用于寫記住用戶名和密碼的功能

八、如何解決頁面內容加載緩慢的問題？

1、優化圖片大小、格式

2、圖片懶加載

3、優化CSS

4、網址后加/

5、標明寬度和高度

6、減少http請求

九、對H5新增的語義化標簽的理解？

為什么要用語義化標簽：

①使布局更加清晰，有利于瀏覽器對頁面的讀取

②用戶體驗良好

③有利于團隊開發和維護

④可讀性更強，減少差異化

十、頁面渲染過程

1、解析HMTML標簽，構建DOM樹

2、解析CSS，構建CSSOM樹

3、把DOM和CSSOM組合成渲染樹（render tree）

4.在渲染樹的基礎上進行布局，計算每個節點的幾何結構

5、把每個節點繪制到屏幕上（painting）

十一、網頁上哪里可以看到請求的所有信息

此處霸哥以谷歌瀏覽器為例，打開控制臺，點擊netWork，參照下圖：

十二、如何在瀏覽器查看和清除localstrorage保存的數據？

打開控制臺 → 切換到 Application → 點擊Localstrorage即可查看

十三、頁面之間是怎么傳參數的？

以上就是霸哥今日整理的前端經典面試題及答案HTML篇，如有疑問，歡迎私信霸哥！

HTML的世界里，一切都是由容器和內容構成的。容器，就如同一個個盒子，用來裝載各種元素；而內容，則是這些盒子里的珍寶。理解了這一點，我們就邁出了探索HTML布局的第一步。

在HTML中，布局標簽主要用于控制頁面的結構和樣式。本文將介紹一些常用的布局標簽及其使用方法，并通過代碼示例進行演示。

一、理解布局的重要性

布局在我們前端開發中擔任什么樣的角色呢？想象一下，你面前有一堆散亂的積木，無序地堆放在那里。

而你的任務，就是將這些積木按照圖紙拼裝成一個精美的模型。HTML布局標簽的作用就像那張圖紙，它指導瀏覽器如何正確、有序地顯示內容和元素，確保網頁的結構和外觀既美觀又實用。

下面我們就來看看在HTML中常用的基礎布局標簽有哪些，如何使用這些布局標簽完成我們的開發目標。

二、常用的布局標簽

1、div標簽

div標簽是一個塊級元素，它獨占一行，用于對頁面進行區域劃分。它可以包含其他HTML元素，如文本、圖片、鏈接等。通過CSS樣式可以設置div的布局和樣式。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>
</head>
<body>

<div>這是一個div元素

</div>

</body>
</html>

運行結果：

2、span標簽

span標簽是一個內聯元素，它不獨占一行，用于對文本進行區域劃分。它主要用于對文本進行樣式設置，如字體、顏色等。與div類似，span也可以包含其他HTML元素。
示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  .text {
    color: blue;
    font-size: 20px;
  }
</style>
</head>
<body>

<p>這是一個<span>span元素</span>。</p>

</body>
</html>

運行結果：

3、table標簽

table標簽用于創建表格，它包含多個tr（行）元素，每個tr元素包含多個td（單元格）或th（表頭單元格）元素。

<table> 定義一個表格，<tr> 定義表格中的行，而 <td> 則定義單元格。通過這三個標簽，我們可以創建出整齊劃一的數據表，讓信息的展示更加直觀明了。

需要注意的是：

<table>和</table>標記著表格的開始和結束。
<tr>和</tr>標記著行的開始和結束，幾組表示該表格有幾行。
<td>和</td>標記著單元格的開始和結束，表示這一行中有幾列。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
    border: 1px solid black;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>
</body>
</html>

運行結果：

4、form標簽

<form>標簽的主要作用是定義一個用于用戶輸入的HTML表單。這個表單可以包含各種輸入元素，如文本字段、復選框、單選按鈕、提交按鈕等。

<form>元素可以包含以下一個或多個表單元素：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>和<output>等。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  form {
    display: flex;
    flex-direction: column;
  }
</style>
</head>
<body>

<form>
  <label for="username">用戶名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密碼：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
</form>

</body>
</html>

運行結果：

5、列表標簽

1）無序列表

指沒有順序的列表項目
始于<ul>標簽，每個列表項始于<li>
type屬性有三個選項：disc實心圓、circle空心圓、square小方塊。默認屬性是disc實心圓。

示例代碼：

<!DOCTYPE html>
<htmml>
<head>
<meta charst="UTF-8">
<title>html--無序列表</title>
</head>
<body>
<ul>
<li>默認的無序列表</li>
<li>默認的無序列表</li>
<li>默認的無序列表</li>
</ul>
<ul>
<li type="circle">添加circle屬性</li>
<li type="circle">添加circle屬性</li>
<li type="circle">添加circle屬性</li>
</ul>
<ul>
<li type="square">添加square屬性</li>
<li type="square">添加square屬性</li>
<li type="squaare">添加square屬性</li>
</ul>
</body>
</html>

運行結果：

也可以使用CSS list-style-type屬性定義html無序列表樣式。

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！「鏈接」

2）有序列表

指按照字母或數字等順序排列的列表項目。
其結果是帶有前后順序之分的編號,如果插入和刪除一個列表項，編號會自動調整。
始于<ol>標簽，每個列表項始于<li>。

示例代碼：

<ol>
<li>默認的有序列表</li>
<li>默認的有序列表</li>
<li>默認的有序列表</li>
</ol>
<ol type="a" start="2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
<li value="20">第四項</li>
</ol>
<ol type="Ⅰ" start="2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
</ol>

運行結果：

同樣也可以使用CSS list-style-type屬性定義html有序列表樣式。

3）自定義列表

自定義列表不僅僅是一列項目，而是項目及其注釋的組合。
以<dl>標簽開始。每個自定義列表項以<dt>開始。每個自定義列表項的定義以<dd>開始。
用于對術語或名詞進行解釋和描述，自定義列表的列表項前沒有任何項目符號。
基本語法：

<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>

<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
</dl>

<dl>即“definition list（定義列表）”，
<dt>即“definition term（定義名詞）”，
而<dd>即“definition description（定義描述）”。

示例代碼：

<dl>
<dt>計算機</dt>
<dd>用來計算的儀器</dd>

<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置</dd>
</dl>

運行結果：

以上就是HTML中常用的布局標簽及其使用方法。在實際開發中，還可以結合CSS和JavaScript來實現更復雜的布局和交互效果。

掌握了這些HTML常用布局標簽，你已經擁有了構建網頁的基礎工具。記住，好的布局不僅需要技術，更需要創意和對細節的關注。現在，打開你的代碼編輯器，開始你的布局設計之旅吧！

1）圓角邊框在 CSS3 中，使用 border-radius 屬性來設置圓角邊框。

border-radius 屬性的值表示圓角的直徑，可以設置四個值，其值的順序為：左上角，右上角，右下角，左下角。

其語法格式為：

border-radius: 取值;

我們也可以分開設置四個角的屬性值，語法如下所示：

border-top-left-radius: 取值;
border-top-right-radius: 取值;
border-bottom-right-radius: 取值;
border-bottom-left-radius: 取值;

例子，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            background-color:rgb(163, 161, 161);
            border-radius: 140px 20px 30px 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

border-radius:左上右上右下左下（都是直徑px）

可以使用 border-radius 屬性來靈活變換元素的形狀了，大家快點發揮想象創造一些好看的圖形

（2）設置邊框顏色的屬性：border-color 屬性

知識點

border-color 屬性

border-color 屬性可以給元素設置上下左右四個邊框的顏色。

其語法結構為：

border-color: 上邊框值 右邊框值 下邊框值 左邊框值;

也可分開設置邊框每條邊的屬性值。

border-top-color: 取值;
border-right-color: 取值;
border-bottom-color: 取值;
border-left-color: 取值;

例子，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:400px;
            height:400px;
            border-style: solid;
            border-color: rgb(255, 182, 182) rgb(123,234,234) rgb(84, 105, 163) rgb(255, 238, 107);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

border-color: 上右下左

（3）設置邊框陰影的屬性：box-shadow 屬性

知識點

box-shadow 屬性

box-shadow 屬性可以用來設置一個或多個下拉陰影的框，視覺效果就像是盒子有了陰影一樣。

其語法格式為：

box-shadow: h-shadow v-shadow blur spread color inset;

其屬性值的意義如下所示：

值	說明
h-shadow	必選，水平陰影的位置，允許負值。
v-shadow	必選，垂直陰影的位置，允許負值。
blur	可選，模糊距離。
spread	可選，陰影的大小。
color	可選，陰影的顏色。
inset	可選，將外部陰影改為內部陰影。

舉個例子來看看吧～

新建一個 index.html 文件，在其中寫入以下內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            text-align:center;
            background-color:rgb(218, 255, 131);
            box-shadow: 10px 10px 5px #6a29ac
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

頁面上有一個寬為 200px、長為 100px 且具有綠色背景顏色的 div 元素，我們使用 box-shadow: 10px 10px 5px #26ad8c 設置了水平值為 10px，垂直值為 10px，模糊距為 5px，陰影顏色為 #6a29ac 的邊框陰影。

練習：挑戰要求：新建一個 index1.html 文件。頁面上有一個高和寬均為 100px 的正圓形 div 元素，其元素帶有一個綠色的邊框陰影。

在線咨詢

您的項目需求

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

整合營銷服務商

前端開發經典面試題及答案-HTML篇

一、理解布局的重要性

二、常用的布局標簽

1、div標簽

2、span標簽

3、table標簽

4、form標簽

5、列表標簽

1）無序列表

2）有序列表

3）自定義列表

知識點

知識點

您的項目需求