整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          前端開發(fā)經(jīng)典面試題及答案-HTML篇

          前端開發(fā)經(jīng)典面試題及答案-HTML篇

          端的面試題相對較多,霸哥結(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ā)目標。

          二、常用的布局標簽

          1、div標簽

          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é)果:

          2、span標簽

          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é)果:

          3、table標簽

          table標簽用于創(chuàng)建表格,它包含多個tr(行)元素,每個tr元素包含多個td(單元格)或th(表頭單元格)元素。

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

          需要注意的是:

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

          示例代碼:

          <!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é)果:

          4、form標簽

          <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é)果:

          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>
          

          運行結(jié)果:


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

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

          2)有序列表

          • 指按照字母或數(shù)字等順序排列的列表項目。
          • 其結(jié)果是帶有前后順序之分的編號,如果插入和刪除一個列表項,編號會自動調(diào)整。
          • 始于<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>
          

          運行結(jié)果:


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

          3)自定義列表

          • 自定義列表不僅僅是一列項目,而是項目及其注釋的組合。
          • 以<dl>標簽開始。每個自定義列表項以<dt>開始。每個自定義列表項的定義以<dd>開始。
          • 用于對術(shù)語或名詞進行解釋和描述,自定義列表的列表項前沒有任何項目符號。
            基本語法:
          <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 屬性

          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 屬性

          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 元素,其元素帶有一個綠色的邊框陰影。


          主站蜘蛛池模板: 成人精品一区二区三区校园激情 | 亚洲福利视频一区二区| 欧亚精品一区三区免费| 日本不卡一区二区视频a| 内射女校花一区二区三区| 国产一区二区三区手机在线观看| 亚洲视频一区二区三区四区| 午夜福利一区二区三区高清视频 | 国产成人精品亚洲一区 | 国产福利电影一区二区三区久久久久成人精品综合 | 无码人妻视频一区二区三区| 国产一区二区内射最近更新| 亚洲图片一区二区| 一区高清大胆人体| 美女视频免费看一区二区| 一区二区三区四区国产| 久久se精品一区精品二区| 无码AV天堂一区二区三区| 亚洲av无码成人影院一区| 国产在线观看一区二区三区四区| 日本精品一区二区三区四区| 欧洲精品无码一区二区三区在线播放| 亚洲图片一区二区| 精品中文字幕一区在线| 99精品久久精品一区二区| 亚洲色偷偷偷网站色偷一区| 人妻精品无码一区二区三区| 亚洲熟女乱综合一区二区| 中文字幕日韩人妻不卡一区| 精品国产一区二区三区无码| 国产高清视频一区二区| 久久亚洲综合色一区二区三区| 精品无码人妻一区二区免费蜜桃| 国产日韩精品一区二区三区 | 无码一区二区三区免费视频| 国产一区二区三区91| 精品久久综合一区二区| 色窝窝无码一区二区三区| 波多野结衣一区二区三区88 | 国产激情精品一区二区三区 | 日韩精品一区二区三区中文精品|