前端開發知識梳理

1. 盒模型

由內容區（content）、內邊距（padding）、邊框（border）和外邊距（margin）組成。

（1）標準盒模型（box-sizing默認值, content-box）：width/height = content(尺寸)，元素的總寬度/高度 = width/height + padding + border
（2）怪異盒模型（box-sizing: border-box）：width/height = content + padding + border(尺寸)，即元素的總寬度/總高度 = width/height

2. HTML5 新特性

HTML5 是 HTML 語言的第五個主要版本，引入了許多新特性，極大地增強了網頁的功能和表現力，以下是一些重要的新特性：

語義化標簽

HTML5 引入了一系列語義化標簽，使得代碼結構更加清晰，便于開發者理解和搜索引擎解析。

<header>：通常用于表示頁面或頁面中某個區域的頭部，包含網站標題、導航欄等內容。
<nav>：專門用于定義導航鏈接的區域，比如網站的菜單導航。
<article>：表示一個獨立的、完整的內容塊，可獨立于頁面其他部分被復用，如一篇博客文章、論壇帖子等。
<section>：用于對頁面進行分塊，將相關內容組織在一起，例如文章的章節。
<aside>：表示與頁面主要內容間接相關的部分，如側邊欄、廣告等。
<footer>：一般用于頁面或頁面中某個區域的底部，包含版權信息、聯系方式等。

表單增強

HTML5 為表單元素增加了許多新的屬性和輸入類型，提升了表單的用戶體驗和數據驗證能力。

新的輸入類型：如 email、url、number、date、range、color 等。例如，使用 email 類型時，瀏覽器會自動驗證輸入是否為有效的電子郵件地址。

<input type="email" placeholder="請輸入郵箱地址">

新的表單屬性：placeholder 用于在輸入框內顯示提示信息；required 表示該字段為必填項；pattern 可使用正則表達式對輸入內容進行驗證。

<input type="text" placeholder="請輸入用戶名" required pattern="[a-zA-Z]{3,}">

多媒體支持

HTML5 原生支持音頻和視頻播放，無需依賴第三方插件（如 Flash）。

<audio> 標簽：用于在網頁中嵌入音頻文件，支持多種音頻格式，如 MP3、OGG 等。

<audio controls><source src="example.mp3" type="audio/mpeg">您的瀏覽器不支持音頻播放。
</audio>

<video> 標簽：用于嵌入視頻文件，支持 MP4、WebM、OGG 等格式。

<video width="320" height="240" controls><source src="example.mp4" type="video/mp4">您的瀏覽器不支持視頻播放。
</video>

畫布（`<canvas>`）

<canvas> 元素提供了一個可以使用 JavaScript 進行繪圖的區域，可用于創建動態圖形、動畫、游戲等。

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');ctx.fillStyle = 'red';ctx.fillRect(10, 10, 50, 50);
</script>

上述代碼在畫布上繪制了一個紅色的矩形。

地理定位（Geolocation）

HTML5 的地理定位 API 允許網頁獲取用戶的地理位置信息，可用于開發地圖應用、附近商家推薦等功能。

if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(function(position) {const latitude = position.coords.latitude;const longitude = position.coords.longitude;console.log(`緯度: ${latitude}, 經度: ${longitude}`);}, function(error) {console.log(`定位失敗: ${error.message}`);});
} else {console.log('您的瀏覽器不支持地理定位功能。');
}

本地存儲

HTML5 提供了 localStorage 和 sessionStorage 兩種本地存儲方式，用于在瀏覽器中存儲數據。

localStorage：數據會永久存儲在瀏覽器中，除非手動刪除，否則不會過期。

// 存儲數據
localStorage.setItem('username', 'John');
// 獲取數據
const username = localStorage.getItem('username');
console.log(username);

sessionStorage：數據僅在當前會話期間有效，關閉瀏覽器窗口或標簽頁后數據會被清除。

// 存儲數據
sessionStorage.setItem('message', 'Hello, World!');
// 獲取數據
const message = sessionStorage.getItem('message');
console.log(message);

Web Workers

Web Workers 允許在瀏覽器中創建獨立于主線程的后臺線程，用于執行耗時的腳本，避免阻塞主線程，提高頁面的響應性能。

// main.js
if (typeof(Worker) !== "undefined") {const worker = new Worker('worker.js');worker.postMessage('開始計算');worker.onmessage = function(event) {console.log('計算結果: ' + event.data);};
} else {console.log('您的瀏覽器不支持 Web Workers。');
}// worker.js
onmessage = function(event) {let result = 0;for (let i = 0; i < 1000000; i++) {result += i;}postMessage(result);
};

WebSocket

WebSocket 提供了一種在瀏覽器和服務器之間進行實時雙向通信的機制，適用于實時聊天、實時數據更新等場景。

// 客戶端代碼
const socket = new WebSocket('ws://example.com/socket');
socket.onopen = function() {socket.send('Hello, server!');
};
socket.onmessage = function(event) {console.log('收到服務器消息: ' + event.data);
};
socket.onclose = function() {console.log('連接已關閉');
};

3. 響應式布局

px：像素，相對長度單位，它的大小取決于屏幕的分辨率，是一個固定值，不能夠自適應。
em：相對長度的單位，相對于當前對象內文本的字體尺寸，未設置則默認是瀏覽器默認字體尺寸。
rem：CSS3 中新增的一個相對長度單位，相對于根元素的 font-size 字體大小，根元素字體大小未設置，使用瀏覽器默認字體大小。
vw：相對于視口的寬度。視口被均分為100單位的 vw。
vh：相對視口高度，視口被均分為100單位的 vh。
vmin：相對于視口寬度或高度中較小的那個。其中最小的那個被均分為100單位的 vmin。
vmax：相對于視口寬度或高度中較大的那個。其中最大的那個被均分為100單位的 vmax。

(1)在移動端網頁開發中，頁面要做成響應式的，可使用 rem 配合媒體查詢實現。
原理： 通過媒體查詢，能夠在屏幕尺寸發生改變時，重置 html 根元素的字體大小；頁面中的元素都是使用rem 為單位設置的尺寸，因此只要改變根元素字體大小，頁面中的其他元素的尺寸就自動跟著修改。
(2)利用 vw 和rem實現響應式。
原理： 由于 vw 被更多瀏覽器兼容之后，在做移動端響應式頁面時， 通常使用 vw 配合 rem 。
原理是使用vw設置根元素 html 字體的大小，當窗口大小發生改變，vw 代表的尺寸隨著修改，無需加入媒體查詢，頁面中的其他元素仍使用rem為單位，就可實現響應式。

// 【(1)只使用rem示例】，需要一直通過媒體查詢分段設置html根元素的字體大小。
// 下面例子中，屏幕大于等于1025px，就一直根據16px來計算了。
html {font-size: 16px; /* 默認大小 */
}@media (max-width: 600px) {html {font-size: 14px; /* 小屏幕設備 */}
}@media (min-width: 601px) and (max-width: 1024px) {html {font-size: 15px; /* 中等屏幕設備 */}
}@media (min-width: 1025px) {html {font-size: 16px; /* 大屏幕設備 */}
}//頁面代碼
div{ width: 10rem;}

//【(2)rem+vw結合示例】，不需要在多個斷點處設置多個媒體查詢
html {font-size: calc(16px + 0.5vw); /* 基于視口寬度動態調整 */
}@media (max-width: 600px) {html {font-size: 14px; /* 小屏幕設備 */}
}

HTML 部分

簡述 HTML5 有哪些新特性？
HTML5 的語義化標簽有哪些，使用語義化標簽的好處是什么？（語義化標簽）
說說 <canvas> 元素的作用和使用場景。（<canvas> 元素）
<video> 和 <audio> 標簽的常見屬性有哪些？（音視頻標簽）
如何在 HTML 中實現文件上傳功能？（文件上傳）
簡述 HTML 中 meta 標簽的作用和常見用法。（meta 標簽）
如何在 HTML 中實現響應式圖片？（響應式圖片）
說說 <datalist> 標簽的用途。（<datalist> 標簽）
如何優化 HTML 代碼的性能？（性能優化）
簡述 HTML 中 noscript 標簽的作用。（noscript 標簽）
如何在 HTML 中創建一個表格并設置表頭和單元格樣式？（表格創建）
說說 HTML 中 iframe 的優缺點。（iframe 標簽）
如何在 HTML 中實現錨點鏈接？（錨點鏈接）
簡述 HTML 中 web storage（localStorage 和 sessionStorage）的區別和使用方法。（web storage）
如何在 HTML 中實現多列布局？（多列布局）
說說 HTML 中 form 表單的 enctype 屬性有哪些取值和用途。（表單 enctype 屬性）
如何在 HTML 中實現拖放功能？（拖放功能）
簡述 HTML 中 keygen 標簽的作用（雖然已被棄用）。（keygen 標簽）
如何在 HTML 中創建一個無序列表和有序列表，并設置列表樣式？（列表創建）
說說 HTML 中 ruby、rt 和 rp 標簽的作用。（ruby 相關標簽）
如何在 HTML 中實現模態框（彈出框）？（模態框實現）
簡述 HTML 中 wbr 標簽的用途。（wbr 標簽）
如何在 HTML 中實現分頁功能？（分頁功能）
說說 HTML 中 output 標簽的作用。（output 標簽）
如何在 HTML 中設置頁面的標題和圖標？（頁面標題和圖標）