夯實前端基礎之HTML篇

知識點概覽

在這里插入圖片描述

HTML部分

1. DOM和BOM有什么區別？

DOM（Document Object Model）

當網頁被加載時，瀏覽器會創建頁面的對象文檔模型，HTML DOM 模型被結構化為對象樹

用途： 主要用于網頁內容的動態修改和交互，比如網頁的局部更新、表單驗證、創建動態列表等場景。

在這里插入圖片描述

什么是Shadow DOM？和普通DOM樹有什么區別？
- web component做到真正的組件化
- 原生規范，無需框架
- 天然與用戶隔離，真正意義上的CSS scope
- 比如常用的video標簽，我們通常只能在DOM結構中看到一個video標簽，但在設置中選擇顯示Shadow DOM的時候，能看到它真正的結構

在這里插入圖片描述

// 手動實現一個shadow DOM
<body><script>customElements.define("my-shadow-dom",class extends HTMLElement {connectedCallback() {const shadow = this.attachShadow({ mode: "open" });shadow.innerHTML = "this is my shadow DOM！";}});</script><my-shadow-dom></my-shadow-dom></body>

在這里插入圖片描述

BOM（Browser Object Model）

瀏覽器對象模型，document也是瀏覽器的對象

用途： 主要用于用于控制瀏覽器的行為，如頁面導航、獲取瀏覽器信息、管理瀏覽器窗口大小和位置等操作。

2. HTML中meta有什么作用？

HTML 標簽

作用：定義該html文檔的元數據（字符集、頁面描述、關鍵詞、文檔作者和視口設置等）

瀏覽器（如何顯示內容或重新加載頁面）、搜索引擎（關鍵詞）和其他網絡服務會用到元數據

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 它為瀏覽器提供了關于如何控制頁面尺寸和縮放比例的指令。 --><meta name="keywords" content="css, JavaScript, CSS3"><meta name="author" content="guoshouying"><meta name="description" content="this is my site."><meta http-equiv="refresh" content="10"><!-- 每 10 秒刷新一次文檔 -->
</head>

3. HTML5中語義化標簽有哪些及特性

優點：1、利于搜索引擎優化SEO，2、方便開發和維護，3、無障礙訪問(Accessibility)

在這里插入圖片描述

4. 如何檢查瀏覽器是否支持h5

檢測特定的html5標簽或者API，如 canvas,video,audio等標簽，看瀏覽器能否正確識別

var canvas = document.createElement('canvas'); 
if (canvas.getContext) { console.log("瀏覽器支持canvas"); 
} else { console.log("瀏覽器不支持canvas"); 
}

5. 哪些標簽可以優化SEO？

元標簽（meta）
語義化標簽（header，section，article等）- 這些標簽能夠讓搜索引擎更好地理解頁面的結構和內容。
鏈接標簽（a）
圖像標簽（img）- alt屬性是搜索引擎理解圖像內容與頁面相關性的重要依據。

6. 對target='_blank’的理解？有什么安全性問題？如何防范？

作用：在新的窗口中打開鏈接指向的內容

安全問題
- 釣魚攻擊風險：打開新的窗口后，通過window.opener可以訪問原始窗口對象，進而獲取到一些隱私信息，如登錄狀態，賬號信息等，從而進行釣魚攻擊。
- 跨站腳本攻擊（XSS）風險：如果新打開的頁面包含惡意腳本，并且能夠通過window.opener與原始頁面進行交互，就有可能將惡意腳本注入到原始頁面中，導致用戶信息泄露或者其他安全問題
防范措施

<a href="http://www.baidu.com" target="_blank" rel="norefferrer noopener">打開百度</a>

7. src和href的區別？

src（Souce）
- 常用于img, script, iframe等標簽，用于指定要加載到當前元素中的外部資源的位置。加載時，瀏覽器會停止對HTML文檔的解析，直到獲取并加載完指定的資源，然后再繼續HTML解析。
href（hypertext reference）
- 常用于a（超鏈接），link標簽（鏈接樣式表），用于指定目標資源的位置，這個資源和當前文檔是引用關系，瀏覽器不會暫停HTML解析去執行它。a標簽中只有點擊的時候才執行加載該頁面。對于<link rel="stylesheet" href="styles.css">，瀏覽器會在后臺異步加載樣式表，不會阻塞 HTML 文檔的解析。
- href=“javascript:void(0) " 和 href=”#" 有什么區別？
  - href="javascript:void(0) "：表示死鏈接,通常用于需要在點擊鏈接時執行 JavaScript 代碼，但不希望頁面有任何跳轉或刷新的情況：<a href="javascript:void(0)" onclick="doSomething()">點擊我</a>，如果頁面javascript被禁用，將不工作。
  - href="#"：錨點，默認是#top,頁面會向上滾動，如果頁面javascript被禁用，仍然工作。

8. script標簽中的defer和async的區別？

相同點
- 都是實現腳本的異步加載，不會阻塞瀏覽器對HTML文檔的解析，在后臺下載腳本，提高網頁性能及用戶體驗。
不同點
- defer：腳本加載完后不會立即執行，等HTML解析完按順序執行腳本。適用于腳本間有依賴順序，或者需要操作DOM的場景。
- async：腳本加載完立即執行，且不按照順序，哪個下載完的快先執行哪個。適用于不操作DOM的獨立腳本，比如廣告腳本，第三方統計腳本。

9. 什么是canvas & 什么時候用？

概念
- h5提供的標簽，允許用JavaScript在畫布上繪圖（形狀、線條、曲線、方框、文本和圖像，以及顏色、旋轉、透明度和其他像素操作）
- canvas是基于像素的，有一個二維的網格系統，原點為（0，0）在左上角，x軸水平向右，y軸垂直向下。
- 與SVG相比，SVG是可縮放矢量圖形，使用XML來描述圖形，可以方便的縮放，修改。canvas繪制的圖形基于像素修改比較困難。
使用場景
- 游戲開發：簡單的休閑游戲，如連連看，繪制圖形。
- 可視化開發：柱狀圖，折線圖等各種圖表。
- 圖像處理和特效：例如，實現圖像的灰度化、模糊處理、旋轉、縮放等效果。
- 動畫制作：加載動畫，粒子動畫（比如模擬雪花飄落、煙花綻放等效果）等。
代碼實現 Canvas API

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvss</title>
</head>
<body><!-- 創建canvas元素 --><canvas id="myCanvas" width="500" height="500"></canvas><script>const canvasElem = document.getElementById('myCanvas');// 創建繪圖上下文context對象const ctx = canvasElem.getContext('2d');ctx.fillStyle = "#ff0000";   // 設置填充顏色ctx.fillRect(0, 0, 200, 100); // 繪制矩形，fillRect(x, y, width, height)ctx.clearRect(10, 10, 50, 50); // 清除矩形區域，clearRect(x, y, width, height)ctx.strokeStyle = "red";   // 設置邊框顏色   ctx.strokeRect(0, 102, 100, 50); // 繪制矩形邊框，strokeRect(x, y, width, height)ctx.beginPath(); // 開始繪制路徑ctx.moveTo(0,220); // 將畫筆移動到指定的坐標點，不進行繪制，主要用于確定線條的起始點ctx.lineTo(150, 220); // 畫一條線段到指定位置ctx.stroke(); // 繪制線段// 繪制圓形// x和y是圓心的坐標，radius是半徑，startAngle和endAngle是起始角度和結束角度（以弧度為單位），counterclockwise是一個布爾值，用于指定是否逆時針繪制。ctx.beginPath();ctx.arc(100, 300, 50, 0, Math.PI * 2, true); // arc(x, y, radius, startAngle, endAngle, counterclockwise)ctx.stroke();</script>
</body>
</html>

svg和canvas畫出的圓形區別

在這里插入圖片描述

10. 漸進增強和優雅降級之間的區別？

漸進增強（Progressive Enhancement）
- 一種網頁設計和開發理念。它強調從最基本的、能在所有瀏覽器和設備上正常工作的核心內容和功能開始構建網頁。然后，根據瀏覽器的能力和設備的特性，逐步添加更高級的樣式、交互功能和性能優化。
- 例如，先構建一個只包含純文本內容和基本鏈接的網頁，確保它在最古老的瀏覽器或功能受限的設備（如一些低性能的移動設備）上能夠正常訪問和理解。之后，再為支持 CSS3 和 JavaScript 的現代瀏覽器添加樣式（如漸變背景、動畫效果）和交互功能（如表單驗證、下拉菜單的動態效果）。
- 兼容性好，易于維護和擴展
優雅降級（Graceful Degradation）
- 優雅降級的理念與漸進增強相反。它是從一個功能齊全、具有高級特性（如復雜的 CSS 樣式、大量的 JavaScript 交互）的網站開始構建，然后考慮當瀏覽器或設備不支持某些高級特性時，如何讓網站 “優雅地” 降級，即仍然能夠提供基本的、可接受的用戶體驗。
- 用戶體驗優化在先，靈活性。

11. 什么是回流和重繪？

回流（重排）Reflow
- 瀏覽器重新計算頁面中元素的幾何屬性（如位置，大小等）
  - 修改元素的尺寸、位置、邊距、填充等屬性.
  - 添加或刪除可見的 DOM 元素.
  - 改變元素的字體大小.
  - 頁面的尺寸變化（如窗口大小調整）.
  - 獲取元素的幾何屬性（如 offsetWidth、offsetHeight 等）.
- 比如排隊前面的一個人走了，后面所有人都要向前走一步，或者有人插隊，后面所有人都要向后退，這就是回流
重繪 Repaint
- 瀏覽器重新繪制元素的過程
  - image的寬高定了，只是換了src
  - 改變元素的顏色，邊框等屬性
  - 修改元素可見性（display:none改為block）
- 比如排隊有人替你占位置，你來了，替你的那個人走了，不影響到后面的人，這就是重繪
優化策略
- 使用虛擬DOM：現代化前端框架像 React、Vue.js 等都使用了虛擬 DOM 來優化 DOM 更新。當數據發生變化時，框架會先在虛擬 DOM 上進行操作，計算出新舊虛擬 DOM 的差異（這個過程稱為 “diffing”），然后只將真正需要更新的部分應用到真實 DOM 上。這樣可以避免不必要的 DOM 操作，從而減少回流和重繪。因為在虛擬 DOM 層面，可以高效地比較和計算出最小的更新范圍，而不是像直接操作真實 DOM 那樣，每次小的修改都可能引發大面積的布局重新計算和重繪。
- 避免內聯樣式的頻繁修改： 內聯樣式（通過style屬性修改樣式）會導致瀏覽器立即重新計算樣式和布局。如果需要頻繁地修改元素的樣式，最好使用類名切換或者外部 CSS 樣式表來控制樣式變化。
- 使用display:none代替visibility:hidden：缺點：在合適的場景下才能用。
- 脫離文檔流（使用position:absolute或position:fixed）：需要謹慎使用，可能會帶來布局上的復雜性。

12. iframe有哪些應用？如何處理iframe通信？

應用
- 最常見的一種微前端手段
- 利用iframe開發低代碼平臺
- 嵌入第三方內容（如廣告，地圖，AI助手等）
- 跨域
通信： window.postMessage方法

iframeA.html

<body>這是頁面A<button onclick="onClick()">點擊我</button><iframe id="iframe" src="./iframeB.html"></iframe><script>//向iframe發送消息const iframe = document.getElementById("iframe");function onClick() {iframe.contentWindow.postMessage("hello b頁面", "*");}//監聽iframe里的頁面發出的消息window.addEventListener("message", (val) => {console.log("message", val);});</script></body>

iframeB.html

<body>這是頁面B<button onclick="onClick()">點擊我</button><script>//向父頁面發送消息function onClick() {window.parent.postMessage("message", "*");}//接受父頁面傳來的消息window.addEventListener("message", (val) => {console.log("valll", val);});</script></body>