端的面試題相對較多,霸哥結(jié)合網(wǎng)上的面試經(jīng)驗,整理了一份前端高頻面試題,猩碼學(xué)苑的學(xué)員也在用,歡迎伙伴們收藏觀看。
由于內(nèi)容過多,為了讓伙伴們更好的記憶和掌握,霸哥今天先出HTML部分內(nèi)容,后續(xù)每天會發(fā)一篇,直至發(fā)完。
前端開發(fā)經(jīng)典面試題及答案——HTML篇
一、cookie和WebStorage的區(qū)別與聯(lián)系?
二、link和@import的區(qū)別
link和@import是外部引入CSS的兩種方式。
結(jié)論:慎用@import方式。使用@import需要注意很多語法規(guī)則、引入順序、資源文件下載引起的http請求過多。
區(qū)別:
HTNL中CSS有四種引入方式:
三、瀏覽器如何實現(xiàn)不同標簽頁的通信?
瀏覽器內(nèi)多個標簽頁之間通信,簡言之,瀏覽器中開了多個窗口,其中一個窗口產(chǎn)生行為其他窗口不用刷新也有相關(guān)表現(xiàn)。
1、cookie+setInterval方式
將要發(fā)送的信息寫入cookie:
在另一個頁面讀取cookie:
2、websocket協(xié)議
新建webSocket文件夾,在該目錄下打開終端 → 運行npm init (npm安裝及配置步驟) → 初始化node項目(因為需要引入ws包) → 回車到結(jié)束 → 安裝ws包 → 依舊在當前目錄下終端運行npm i -save ws → 在webSocket目錄下新建sever.js、send.html、reveive.html文件
四、iframe的優(yōu)缺點
優(yōu)點:
1、能夠把嵌入的網(wǎng)頁原封不動的展示出來;
2、多個網(wǎng)頁調(diào)用iframe,只需要修改iframe的內(nèi)容,就能實現(xiàn)所有引用頁面的修改,方便快捷;
3、提升代碼的復(fù)用性;
4、可解決頁面加載緩慢的問題。
缺點:
1、不易管理;
2、鏈接書寫失誤會導(dǎo)致鏈接死循環(huán)
4、部分移動設(shè)備無法完全顯示,設(shè)備兼容性差。
5、增加服務(wù)器的http請求,對大型網(wǎng)站不友好。
五、canvas
1、canvas是什么?
是html5新標簽,屬于h5新特性。canvas標簽是一個圖形的容器,可以在上形狀,畫logo,通過javascript繪制。
2、canvas用于什么?
①制作web網(wǎng)頁游戲
②數(shù)據(jù)可視化(echarts就是基于canvas)
③廣告banner的動態(tài)效果
④內(nèi)嵌網(wǎng)頁
六、做項目用到哪些h5新特性?
七、localstorage和sessionStorage可以寫什么?
1、sessionStorage可用于寫臨時交流的留言板或是交流記錄
2、localStorage可用于寫記住用戶名和密碼的功能
八、如何解決頁面內(nèi)容加載緩慢的問題?
1、優(yōu)化圖片大小、格式
2、圖片懶加載
3、優(yōu)化CSS
4、網(wǎng)址后加/
5、標明寬度和高度
6、減少http請求
九、對H5新增的語義化標簽的理解?
為什么要用語義化標簽:
①使布局更加清晰,有利于瀏覽器對頁面的讀取
②用戶體驗良好
③有利于團隊開發(fā)和維護
④可讀性更強,減少差異化
十、頁面渲染過程
1、解析HMTML標簽,構(gòu)建DOM樹
2、解析CSS,構(gòu)建CSSOM樹
3、把DOM和CSSOM組合成渲染樹(render tree)
4.在渲染樹的基礎(chǔ)上進行布局,計算每個節(jié)點的幾何結(jié)構(gòu)
5、把每個節(jié)點繪制到屏幕上(painting)
十一、網(wǎng)頁上哪里可以看到請求的所有信息
此處霸哥以谷歌瀏覽器為例,打開控制臺,點擊netWork,參照下圖:
十二、如何在瀏覽器查看和清除localstrorage保存的數(shù)據(jù)?
打開控制臺 → 切換到 Application → 點擊Localstrorage即可查看
十三、頁面之間是怎么傳參數(shù)的?
以上就是霸哥今日整理的前端經(jīng)典面試題及答案HTML篇,如有疑問,歡迎私信霸哥!
HTML的世界里,一切都是由容器和內(nèi)容構(gòu)成的。容器,就如同一個個盒子,用來裝載各種元素;而內(nèi)容,則是這些盒子里的珍寶。理解了這一點,我們就邁出了探索HTML布局的第一步。
在HTML中,布局標簽主要用于控制頁面的結(jié)構(gòu)和樣式。本文將介紹一些常用的布局標簽及其使用方法,并通過代碼示例進行演示。
布局在我們前端開發(fā)中擔任什么樣的角色呢?想象一下,你面前有一堆散亂的積木,無序地堆放在那里。
而你的任務(wù),就是將這些積木按照圖紙拼裝成一個精美的模型。HTML布局標簽的作用就像那張圖紙,它指導(dǎo)瀏覽器如何正確、有序地顯示內(nèi)容和元素,確保網(wǎng)頁的結(jié)構(gòu)和外觀既美觀又實用。
下面我們就來看看在HTML中常用的基礎(chǔ)布局標簽有哪些,如何使用這些布局標簽完成我們的開發(fā)目標。
div標簽是一個塊級元素,它獨占一行,用于對頁面進行區(qū)域劃分。它可以包含其他HTML元素,如文本、圖片、鏈接等。通過CSS樣式可以設(shè)置div的布局和樣式。
示例代碼:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>這是一個div元素
</div>
</body>
</html>
運行結(jié)果:
span標簽是一個內(nèi)聯(lián)元素,它不獨占一行,用于對文本進行區(qū)域劃分。它主要用于對文本進行樣式設(shè)置,如字體、顏色等。與div類似,span也可以包含其他HTML元素。
示例代碼:
<!DOCTYPE html>
<html>
<head>
<style>
.text {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>這是一個<span>span元素</span>。</p>
</body>
</html>
運行結(jié)果:
table標簽用于創(chuàng)建表格,它包含多個tr(行)元素,每個tr元素包含多個td(單元格)或th(表頭單元格)元素。
<table> 定義一個表格,<tr> 定義表格中的行,而 <td> 則定義單元格。通過這三個標簽,我們可以創(chuàng)建出整齊劃一的數(shù)據(jù)表,讓信息的展示更加直觀明了。
需要注意的是:
示例代碼:
<!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>
運行結(jié)果:
<form>標簽的主要作用是定義一個用于用戶輸入的HTML表單。這個表單可以包含各種輸入元素,如文本字段、復(fù)選框、單選按鈕、提交按鈕等。
<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>
運行結(jié)果:
示例代碼:
<!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>
運行結(jié)果:
也可以使用CSS list-style-type屬性定義html無序列表樣式。
想要快速入門前端開發(fā)嗎?推薦一個前端開發(fā)基礎(chǔ)課程,這個老師講的特別好,零基礎(chǔ)學(xué)習(xí)無壓力,知識點結(jié)合代碼,邊學(xué)邊練,可以免費試看試學(xué),還有各種輔助工具和資料,非常適合新手!點這里前往學(xué)習(xí)哦!「鏈接」
示例代碼:
<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>
運行結(jié)果:
同樣也可以使用CSS list-style-type屬性定義html有序列表樣式。
<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>
運行結(jié)果:
以上就是HTML中常用的布局標簽及其使用方法。在實際開發(fā)中,還可以結(jié)合CSS和JavaScript來實現(xiàn)更復(fù)雜的布局和交互效果。
掌握了這些HTML常用布局標簽,你已經(jīng)擁有了構(gòu)建網(wǎng)頁的基礎(chǔ)工具。記住,好的布局不僅需要技術(shù),更需要創(chuàng)意和對細節(jié)的關(guān)注。現(xiàn)在,打開你的代碼編輯器,開始你的布局設(shè)計之旅吧!
1)圓角邊框在 CSS3 中,使用 border-radius 屬性來設(shè)置圓角邊框。
border-radius 屬性的值表示圓角的直徑,可以設(shè)置四個值,其值的順序為:左上角,右上角,右下角,左下角。
其語法格式為:
border-radius: 取值;
我們也可以分開設(shè)置四個角的屬性值,語法如下所示:
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 屬性來靈活變換元素的形狀了,大家快點發(fā)揮想象創(chuàng)造一些好看的圖形
(2)設(shè)置邊框顏色的屬性:border-color 屬性
border-color 屬性可以給元素設(shè)置上下左右四個邊框的顏色。
其語法結(jié)構(gòu)為:
border-color: 上邊框值 右邊框值 下邊框值 左邊框值;
也可分開設(shè)置邊框每條邊的屬性值。
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)設(shè)置邊框陰影的屬性:box-shadow 屬性
box-shadow 屬性可以用來設(shè)置一個或多個下拉陰影的框,視覺效果就像是盒子有了陰影一樣。
其語法格式為:
box-shadow: h-shadow v-shadow blur spread color inset;
其屬性值的意義如下所示:
值 | 說明 |
h-shadow | 必選,水平陰影的位置,允許負值。 |
v-shadow | 必選,垂直陰影的位置,允許負值。 |
blur | 可選,模糊距離。 |
spread | 可選,陰影的大小。 |
color | 可選,陰影的顏色。 |
inset | 可選,將外部陰影改為內(nèi)部陰影。 |
舉個例子來看看吧~
新建一個 index.html 文件,在其中寫入以下內(nèi)容。
<!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 設(shè)置了水平值為 10px,垂直值為 10px,模糊距為 5px,陰影顏色為 #6a29ac 的邊框陰影。
練習(xí):挑戰(zhàn)要求:新建一個 index1.html 文件。頁面上有一個高和寬均為 100px 的正圓形 div 元素,其元素帶有一個綠色的邊框陰影。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。