1. src 和 href 的區(qū)別
src 用于替換當前元素（引入），href 用于在當前文檔和引用資源之間確立聯(lián)系（引用）
（1）src（source）
指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；
在請求 src 資源時會將其指向的資源下載并應用到文檔內，例如 js 腳本，img 圖片和 frame 等元素。
<script src =”js.js”></script>當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將 js 腳本放在底部而不是頭部。
（2）href（Hypertext Reference）
指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果在文檔中添加
<link href=”common.css” rel=”stylesheet”/>那么瀏覽器會識別該文檔為 css 文件，就會并行下載資源并且不會停止對當前文檔的處理。 這也是為什么建議使用 link 方式來加載 css，而不是使用 @import 方式。
2. @import 和 link 區(qū)別
同：都為外部引用 CSS 的方式
異：
- link 還能定義 RSS 等其他事務；@import 只能加載 CSS；
- link 在頁面載入時同時加載；@import 需要頁面完全加入之后加載；
- link 無兼容問題；@import 在 CSS 2.1 提出，低版本不支持；
- link 支持使用 JS 控制 DOM 區(qū)改變樣式，@import 不支持
推薦文章： link 和 @import 區(qū)別
3. 對 HTML 語義化的理解
通俗來講就是用正確的標簽做正確的事情。
包括 內容語義化（內容結構化） 和 代碼語義化（選擇合適的標簽）。
語義化的優(yōu)點：
- 樣式丟失時候還能讓頁面呈現(xiàn)清晰的結構
- 讀屏軟件，根據(jù)文章可以自動生成目錄
- 有利于SEO
- 對開發(fā)者友好，增強了可讀性，結構更加清晰，開發(fā)者能清晰的看出網頁的結構，便于團隊的開發(fā)與維護。
常見的語義化標簽：
<header></header> 頭部
<nav></nav> 導航欄
<section></section> 區(qū)塊（有語義化的div）
<main></main> 主要區(qū)域
<article></article> 主要內容
<aside></aside> 側邊欄
<footer></footer> 底部4. DOCTYPE(文檔類型 - document type) 的作?，嚴格模式與混雜模式如何區(qū)分？它們有何意義?
DOCTYPE 是 HTML5 中一種標準通用標記語言的文檔類型聲明；
它的作用是告訴瀏覽器（解析器）應該以什么樣（html或xhtml）的文檔類型定義來解析文檔，不同的渲染模式會影響瀏覽器對 CSS 代碼甚至?JavaScript 腳本的解析；
它必須聲明在HTML文檔的第一行。
瀏覽器渲染頁面的兩種模式（可通過document.compatMode獲?。?/span>
- CSS1Compat：標準模式（Strick mode），默認模式，瀏覽器使用W3C的標準解析渲染頁面。在標準模式中，瀏覽器以其支持的最高標準呈現(xiàn)頁面。
- BackCompat：怪異模式(混雜模式)(Quick mode)，瀏覽器使用自己的怪異模式解析渲染頁面。在怪異模式中，頁面以一種比較寬松的向后兼容的方式顯示。
<!doctype html>的作用：<!doctype html> 的作用就是讓瀏覽器進入標準模式，使用最新的 HTML5 標準來解析渲染頁面；如果不寫，瀏覽器就會進入混雜模式。
嚴格模式與混雜模式的區(qū)分：
- 嚴格模式： 又稱為標準模式，指瀏覽器按照W3C標準解析代碼；
- 混雜模式： 又稱怪異模式、兼容模式，是指瀏覽器用自己的方式解析代碼。混雜模式通常模擬老式瀏覽器的行為，以防止老站點無法工作；
區(qū)分：網頁中的DTD，直接影響到使用的是嚴格模式還是瀏覽模式，可以說DTD的使用與這兩種方式的區(qū)別息息相關。
- 如果文檔包含嚴格的DOCTYPE ，那么它一般以嚴格模式呈現(xiàn)（嚴格 DTD ——嚴格模式）；
- 包含過渡 DTD 和 URI 的 DOCTYPE ，也以嚴格模式呈現(xiàn)，但有過渡 DTD 而沒有 URI （統(tǒng)一資源標識符，就是聲明最后的地址）會導致頁面以混雜模式呈現(xiàn)（有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式）；
- DOCTYPE 不存在或形式不正確會導致文檔以混雜模式呈現(xiàn)（DTD不存在或者格式不正確——混雜模式）；
- HTML5 沒有 DTD ，因此也就沒有嚴格模式與混雜模式的區(qū)別，HTML5 有相對寬松的 法，實現(xiàn)時，已經盡可能大的實現(xiàn)了向后兼容(HTML5 沒有嚴格和混雜之分)。
總之，嚴格模式讓各個瀏覽器統(tǒng)一執(zhí)行一套規(guī)范兼容模式保證了舊網站的正常運行。
5. script 標簽中 defer 和 async 的區(qū)別
如果沒有 defer? 或 async?? 屬性，瀏覽器會立即加載并執(zhí)行相應的腳本。它不會等待后續(xù)加載的文檔元素，讀取到就會開始加載和執(zhí)行，這樣就阻塞了后續(xù)文檔的加載。
下圖可以直觀的看出三者之間的區(qū)別:
其中藍色代表js腳本網絡加載時間，紅色代表 js 腳本執(zhí)行時間，綠色代表 html 解析。
defer 和 async 屬性都是去異步加載外部的 JS 腳本文件，它們都不會阻塞頁面的解析，其區(qū)別如下：
defer：
HTML 5 規(guī)范要求按出現(xiàn)順序執(zhí)行且在 DOMContentLoaded 事件之前執(zhí)行，但實際并沒有按照規(guī)范執(zhí)行；
async：
不保證按出現(xiàn)次序執(zhí)行，可在 DOMContentLoaded 之前或之后執(zhí)行
6. 常用的 meta 標簽有哪些
meta 標簽由 name 和 content 屬性定義，用來描述網頁文檔的屬性，比如網頁的作者，網頁描述，關鍵詞等，除了HTTP標準固定了一些name作為大家使用的共識，開發(fā)者還可以自定義name。
常用的meta標簽：
（1）charset，用來描述HTML文檔的編碼類型：
<meta charset="UTF-8" >（2） keywords，頁面關鍵詞：
<meta name="keywords" content="關鍵詞" />（3）description，頁面描述：
<meta name="description" content="頁面描述內容" />（4）refresh，頁面重定向和刷新：
<meta http-equiv="refresh" content="0;url=" />（5）viewport，適配移動端，可以控制視口的大小和比例：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">其中，content 參數(shù)有以下幾種：
- width viewport ：寬度(數(shù)值/device-width)
- height viewport ：高度(數(shù)值/device-height)
- initial-scale ：初始縮放比例
- maximum-scale ：最大縮放比例
- minimum-scale ：最小縮放比例
- user-scalable ：是否允許用戶縮放(yes/no）
（6）搜索引擎索引方式：
<meta name="robots" content="index,follow" />其中，content 參數(shù)有以下幾種：
- all：文件將被檢索，且頁面上的鏈接可以被查詢；
- none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
- index：文件將被檢索；
- follow：頁面上的鏈接可以被查詢；
- noindex：文件將不被檢索；
- nofollow：頁面上的鏈接不可以被查詢。
7. HTML5 有哪些更新
1. 語義化標簽
- header：定義文檔的頁眉（頭部）；
- nav：定義導航鏈接的部分；
- footer：定義文檔或節(jié)的頁腳（底部）；
- article：定義文章內容；
- section：定義文檔中的節(jié)（section、區(qū)段）；
- aside：定義其所處內容之外的內容（側邊）；
2. 媒體標簽
（1） audio：音頻
<audio src='' controls autoplay loop='true'></audio>屬性：
- controls 控制面板
- autoplay 自動播放
- loop='true' 循環(huán)播放
（2）video視頻
<video src='' poster='imgs/aa.jpg' controls></video>屬性：
- poster：指定視頻還沒有完全下載完畢，或者用戶還沒有點擊播放前顯示的封面。默認顯示當前視頻文件的第一針畫面，當然通過poster也可以自己指定。
- controls 控制面板
- width
- height
（3）source 標簽
<video>
<source src='aa.flv' type='video/flv'></source>
<source src='aa.mp4' type='video/mp4'></source>
</video>因為瀏覽器對視頻格式支持程度不一樣，為了能夠兼容不同的瀏覽器，可以通過source來指定視頻源。
3. 表單
表單類型：
- email ：能夠驗證當前輸入的郵箱地址是否合法
- url ： 驗證URL
- number ： 只能輸入數(shù)字，其他輸入不了，而且自帶上下增大減小箭頭，max屬性可以設置為最大值，min可以設置為最小值，value為默認值。
- search ： 輸入框后面會給提供一個小叉，可以刪除輸入的內容，更加人性化。
- range ： 可以提供給一個范圍，其中可以設置max和min以及value，其中value屬性可以設置為默認值
- color ： 提供了一個顏色拾取器
- time ： 時分秒
- date ： 日期選擇年月日
- datatime ： 時間和日期(目前只有Safari支持)
- datatime-local ：日期時間控件
- week ：周控件
- month：月控件
表單屬性：
- placeholder ：提示信息
- autofocus ：自動獲取焦點
-
autocomplete=“on” 或者 autocomplete=“off” 使用這個屬性需要有兩個前提：
- 表單必須提交過
- 必須有name屬性。
- required：要求輸入框不能為空，必須有值才能夠提交。
- pattern=" " 里面寫入想要的正則模式，例如手機號patte="^(+86)?\d{10}$"
- multiple：可以選擇多個文件或者多個郵箱
- form=" form表單的ID"
表單事件：
- oninput 每當input里的輸入框內容發(fā)生變化都會觸發(fā)此事件。
- oninvalid 當驗證不通過時觸發(fā)此事件。
4. 進度條、度量器
- progress 標簽：用來表示任務的進度（IE、Safari不支持），max 用來表示任務的進度，value 表示已完成多少
-
meter 屬性：用來顯示剩余容量或剩余庫存（IE、Safari不支持）
- high/low：規(guī)定被視作高/低的范圍
- max/min：規(guī)定最大/小值
- value：規(guī)定當前度量值
設置規(guī)則：min < low < high < max
5.DOM查詢操作
- document.querySelector()
- document.querySelectorAll()
它們選擇的對象可以是標簽，可以是類(需要加點)，可以是ID(需要加#)
6. Web存儲
HTML5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法：
- localStorage - 沒有時間限制的數(shù)據(jù)存儲
- sessionStorage - 針對一個 session 的數(shù)據(jù)存儲
7. 其他
-
拖放：拖放是一種常見的特性，即抓取對象以后拖到另一個位置。設置元素可拖放：
<img draggable="true" /> -
畫布（canvas ）： canvas 元素使用 JavaScript 在網頁上繪制圖像。畫布是一個矩形區(qū)域，可以控制其每一像素。canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
<canvas id="myCanvas" width="200" height="100"></canvas> - SVG：SVG 指可伸縮矢量圖形，用于定義用于網絡的基于矢量的圖形，使用 XML 格式定義圖形，圖像在放大或改變尺寸的情況下其圖形質量不會有損失，它是萬維網聯(lián)盟的標準
- 地理定位：Geolocation（地理定位）用于定位用戶的位置?！?/span>
拖放效果（黑色箭頭指代鼠標）：
總結：
（1）新增語義化標簽：nav、header、footer、aside、section、article
（2）音頻、視頻標簽：audio、video
（3）數(shù)據(jù)存儲：localStorage、sessionStorage
（4）canvas（畫布）、Geolocation（地理定位）、websocket（通信協(xié)議）
（5）input標簽新增屬性：placeholder、autocomplete、autofocus、required
（6）history API：go、forward、back、pushstate
移除的元素有：
- 純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;
- 對可用性產生負面影響的元素：frame，frameset，noframes；
7. img 的 srcset 屬性的作用？
不同屏幕密度下，img 會自動加載不同的圖片。用法如下：
<img src="image-128.png" srcset="image-256.png 2x" />使用上面的代碼，就能實現(xiàn)在屏幕密度為1x的情況下加載image-128.png, 屏幕密度為2x時加載image-256.png。
按照上面的實現(xiàn)，不同的屏幕密度都要設置圖片地址，目前的屏幕密度有1x,2x,3x,4x四種，如果每一個圖片都設置4張圖片，加載就會很慢。所以就有了新的srcset標準。代碼如下：
<img
src="https://cloud4.gogoing.site/files/2020-08-21/bbc63bf5-6f56-4d0a-a996-72fff804725c.png"
sizes="(max-width: 376px) 375px, (max-width: 769px) 768px, 1024px"
srcset="
https://cloud3.gogoing.site/files/2020-08-21/bbc63bf5-6f56-4d0a-a996-72fff804725c.png 375w,
https://cloud2.gogoing.site/files/2020-08-21/69d2679d-eefe-434a-8755-7f8b09166bf3.png 768w,
https://cloud1.gogoing.site/files/2020-08-21/291087d7-beda-402f-9c28-b23e71beb32e.png 1024w"
>其中 srcset 指定圖片的地址和對應的圖片質量。sizes用來設置圖片的尺寸零界點。對于 srcset 中的 w 單位，可以理解成圖片質量。如果可視區(qū)域小于這個質量的值，就可以使用。瀏覽器會自動選擇一個最小的可用圖片。文章來源：http://www.zghlxwxcb.cn/news/detail-693833.html
- 在普通的PC電腦上，屏幕像素比是1，sizes屬性計算值為375px，那么，img的實際寬度為375*1=375w，因此，瀏覽器會加載375px這張圖片。
- 在iphone678這類機型中，屏幕像素比是2，sizes屬性計算值為375px，那么，img的實際寬度為375*2=750w，此時，375w < 750w < 768w, 因此，瀏覽器會加載768px這張圖片。
- iphone plus 和iphone X這類機型中，屏幕像素比是3，sizes屬性計算值為375px，那么，img的實際寬度為375*3=1125w，此時，瀏覽器會加載1024px這張圖片。
sizes語法如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-693833.html
sizes="[media query] [length], [media query] [length] ... "8. 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
- 行內元素：
- 一個行內元素只占據(jù)它對應標簽的邊框所包含的空間。
- a b span img input select strong；
- 塊級元素有：
- 塊級元素占據(jù)其父元素（容器）的整個空間，因此創(chuàng)建了一個“塊”。
- div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；
- 行內元素和塊級元素的對比：
- 內容：
- 一般情況下，行內元素只能包含數(shù)據(jù)和其他行內元素。
- 塊級元素可以包含行內元素和其他塊級元素。
- 格式：
- 默認情況下，行內元素不會以新行開始，而塊級元素會新起一行
- 內容：
- 空元素，即沒有內容的HTML元素?？赵厥窃陂_始標簽中關閉的，也就是空元素沒有閉合標簽：
- 常見的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
- 鮮見的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。
到了這里，關于2023 最新前端面試題 （HTML 篇）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
