HTML、CSS 和 JavaScript 常見用法及使用規范

一、HTML 深度剖析

1. 文檔類型聲明

HTML 文檔開頭的?<!DOCTYPE html>?聲明告知瀏覽器當前文檔使用的是 HTML5 標準。它是文檔的重要元信息，能確保瀏覽器以標準模式渲染頁面，避免怪異模式下的兼容性問題。

2. 元數據標簽

<meta>?標簽：用途廣泛，比如設置字符編碼?<meta charset="UTF-8">，保證頁面能正確顯示各種語言字符。還可用于設置頁面描述?<meta name="description" content="這是一個示例網頁的描述">，利于搜索引擎優化。
視口設置：<meta name="viewport" content="width=device-width, initial-scale=1.0">?可讓頁面在不同設備上正確縮放，實現響應式布局。

3. 超鏈接標簽

<a>?標簽：基本用法是?<a href="https://www.example.com">訪問示例網站</a>。此外，還能創建郵件鏈接?<a href="mailto:example@example.com">發送郵件</a>?和下載鏈接?<a href="example.pdf" download>下載 PDF 文件</a>。
錨點鏈接：用于頁面內跳轉，先在目標位置設置?<a id="section1"></a>，然后在鏈接處使用?<a href="#section1">跳轉到第一節</a>。

4. 列表標簽

無序列表：<ul>?標簽，每個列表項用?<li>?包裹，如?<ul><li>蘋果</li><li>香蕉</li></ul>。
有序列表：<ol>?標簽，同樣用?<li>?表示列表項，瀏覽器會自動為其編號。
定義列表：由?<dl>?包裹，包含?<dt>（定義術語）和?<dd>（術語定義），例如?<dl><dt>HTML</dt><dd>超文本標記語言</dd></dl>。

5. 表單標簽

<form>?標簽：用于收集用戶輸入，通過?action?屬性指定表單數據提交的 URL，method?屬性指定提交方式（GET?或?POST）。
輸入字段：常見的有?<input type="text">（文本輸入框）、<input type="password">（密碼輸入框）、<input type="radio">（單選框）、<input type="checkbox">（復選框）、<input type="submit">（提交按鈕）等。
下拉列表：使用?<select>?和?<option>?標簽創建，如?<select><option value="option1">選項 1</option></select>。
文本域：<textarea>?標簽用于輸入多行文本。

6. 多媒體標簽

<img>?標簽：用于顯示圖片，除了?src?和?alt?屬性，還可通過?width?和?height?屬性設置圖片尺寸。
<video>?標簽：可嵌入視頻，支持多種視頻格式，如?<video src="example.mp4" controls></video>，controls?屬性添加視頻控制條。
<audio>?標簽：用于播放音頻，用法與?<video>?類似，如?<audio src="example.mp3" controls></audio>。

7. 框架標簽

<iframe>?標簽：可在頁面中嵌入另一個網頁，例如?<iframe src="https://www.example.com" width="500" height="300"></iframe>。

8. HTML 實體

當需要顯示特殊字符（如?<、>、&?等）時，可使用 HTML 實體，如?<?表示?<，>?表示?>，&?表示?&。

9. 表單元素及屬性

表單?`<form>`

表單是 HTML 中用于收集用戶輸入數據的重要元素，以下是常見屬性：

屬性	描述	示例
`action`	指定表單數據提交的 URL	`<form action="submit.php">`
`method`	表單數據提交的方式，有?`GET`?和?`POST`?兩種	`<form method="POST">`
`enctype`	當表單包含文件上傳時，指定表單數據的編碼類型，常見值有?`application/x-www-form-urlencoded`、`multipart/form-data`?等	`<form enctype="multipart/form-data">`

除了基本的?action、method?和?enctype?屬性外，還可以使用?novalidate?屬性來禁用表單的默認驗證。

<form action="submit.php" method="POST" enctype="multipart/form-data" novalidate><!-- 表單內容 -->
</form>

文本框?`<input type="text">`

文本框用于接收用戶輸入的單行文本，常見屬性如下：

屬性	描述	示例
`name`	表單數據提交時的名稱	`<input type="text" name="username">`
`value`	文本框的初始值	`<input type="text" value="默認文本">`
`placeholder`	提示用戶輸入的文本，當文本框為空時顯示	`<input type="text" placeholder="請輸入用戶名">`
`readonly`	設置文本框為只讀，用戶不能修改其內容	`<input type="text" readonly>`
`disabled`	禁用文本框，用戶不能與之交互，且提交表單時該字段數據不會被發送	`<input type="text" disabled>`
`maxlength`	限制用戶輸入的最大字符數	`<input type="text" maxlength="20">`

自動完成：autocomplete?屬性可設置文本框是否啟用自動完成功能，值可以是?on?或?off。

<input type="text" name="email" autocomplete="off">

輸入模式：inputmode?屬性可以指定輸入的類型，如?numeric?表示只能輸入數字。

<input type="text" name="phone" inputmode="numeric">

密碼框?`<input type="password">`

密碼框用于輸入密碼，其屬性與文本框類似，輸入的內容會以星號或圓點顯示。

<input type="password" name="password" placeholder="請輸入密碼">

按鈕?`<input type="button">`、`<button>`

按鈕可用于觸發操作，常見屬性如下：

屬性	描述	示例
`value`	按鈕上顯示的文本（`<input type="button">`）	`<input type="button" value="點擊我">`
`disabled`	禁用按鈕，用戶不能點擊	`<button disabled>禁用按鈕</button>`
`onclick`	定義按鈕被點擊時執行的 JavaScript 代碼	`<button onclick="alert('按鈕被點擊')">點擊觸發事件</button>`

除了使用?onclick?事件，還可以通過?disabled?屬性動態控制按鈕的可用性。

<button id="myButton" disabled>禁用按鈕</button>
<script>const button = document.getElementById('myButton');// 模擬一段時間后啟用按鈕setTimeout(() => {button.disabled = false;}, 3000);
</script>

復選框?`<input type="checkbox">`

復選框允許用戶選擇多個選項，常見屬性如下：

屬性	描述	示例
`name`	表單數據提交時的名稱	`<input type="checkbox" name="hobbies">`
`value`	復選框選中時提交的值	`<input type="checkbox" value="reading">`
`checked`	設置復選框默認選中	`<input type="checkbox" checked>`

單選框?`<input type="radio">`

單選框允許用戶從一組選項中選擇一個，同一組單選框需使用相同的?name?屬性。

屬性	描述	示例
`name`	用于分組，同一組單選框使用相同名稱	`<input type="radio" name="gender">`
`value`	單選框選中時提交的值	`<input type="radio" value="male">`
`checked`	設置單選框默認選中	`<input type="radio" checked>`

可以使用 JavaScript 來控制復選框和單選框的選中狀態。

<input type="checkbox" id="check1"> 選項 1
<input type="checkbox" id="check2"> 選項 2
<button onclick="checkAll()">全選</button>
<script>function checkAll() {const checkboxes = document.querySelectorAll('input[type="checkbox"]');checkboxes.forEach(checkbox => {checkbox.checked = true;});}
</script>

列表框?`<select>`?和?`<option>`

列表框用于提供一組選項供用戶選擇，常見屬性如下：

屬性	描述	示例
`name`	表單數據提交時的名稱	`<select name="city">`
`multiple`	允許用戶選擇多個選項	`<select multiple>`
`size`	指定列表框中可見的選項數量	`<select size="3">`
`value`	`<option>`?標簽的屬性，指定該選項被選中時提交的值	`<option value="beijing">北京</option>`
`selected`	設置?`<option>`?默認選中	`<option selected>默認選項</option>`

10. 其他 HTML 元素和屬性

表格?`<table>`

表格用于展示數據，包含?<tr>（行）、<th>（表頭單元格）和?<td>（數據單元格）。

<table><tr><th>姓名</th><th>年齡</th></tr><tr><td>張三</td><td>25</td></tr>
</table>

圖像?`<img>`

圖像元素用于顯示圖片，常見屬性如下：

屬性	描述	示例
`src`	圖片的 URL 地址	`<img src="image.jpg">`
`alt`	圖片無法顯示時顯示的替代文本	`<img alt="這是一張圖片">`
`width`?和?`height`	設置圖片的寬度和高度	`<img width="200" height="150">`

視頻?`<video>`

可以使用?preload?屬性來控制視頻的預加載策略，有?auto、metadata?和?none?三種值。

<video src="video.mp4" preload="metadata" controls></video>

音頻?`<audio>`

可以使用?loop?屬性讓音頻循環播放。

<audio src="audio.mp3" loop controls></audio>

二、CSS 深入探究

1. 盒模型

盒模型由內容區（content）、內邊距（padding）、邊框（border）和外邊距（margin）組成。可通過?width?和?height?屬性設置內容區大小，padding、border?和?margin?屬性分別控制內邊距、邊框和外邊距。

.box {width: 200px;height: 200px;padding: 20px;border: 1px solid black;margin: 20px;
}

2. 浮動與清除浮動

浮動：使用?float?屬性（left?或?right）可讓元素脫離正常文檔流，實現多列布局。但浮動元素會導致父元素高度塌陷。
清除浮動：可使用?clear?屬性（left、right?或?both）清除浮動影響，也可使用 BFC（塊級格式化上下文）來解決高度塌陷問題。

3. 定位

靜態定位：默認值，元素按照正常文檔流排列。
相對定位：position: relative，元素相對于其正常位置進行偏移，不會脫離文檔流。
絕對定位：position: absolute，元素相對于最近的已定位祖先元素進行定位，會脫離文檔流。
固定定位：position: fixed，元素相對于瀏覽器窗口固定位置，常用于創建固定導航欄等。
粘性定位：position: sticky，元素在滾動時固定在某個位置，直到滾動出特定區域。

4. 彈性布局（Flexbox）

彈性布局是一種一維布局模型，可輕松實現元素的水平和垂直對齊。

.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}

5. 網格布局（Grid）

網格布局是二維布局模型，可創建復雜的網格結構。

.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 三列布局 */grid-gap: 20px; /* 網格間距 */
}

6. 響應式設計

媒體查詢：使用?@media?規則根據不同的屏幕尺寸應用不同的樣式。

@media (max-width: 768px) {/* 當屏幕寬度小于等于 768px 時應用的樣式 */body {font-size: 14px;}
}

彈性單位：如?em、rem、vw、vh?等，可根據父元素或視口大小動態調整元素尺寸。

7. 動畫與過渡

過渡：使用?transition?屬性實現元素狀態的平滑過渡，如顏色、大小等的變化。

.button {background-color: blue;transition: background-color 0.3s ease;
}
.button:hover {background-color: red;
}

動畫：使用?@keyframes?規則定義動畫，然后通過?animation?屬性應用動畫。

@keyframes slide {from {transform: translateX(0);}to {transform: translateX(100px);}
}
.box {animation: slide 2s infinite;
}

1. 旋轉角度

使用?transform?屬性的?rotate()?函數可以實現元素的旋轉，單位可以是度（deg）、弧度（rad）、梯度（grad）或圈數（turn）。

.rotate-element {transform: rotate(45deg); /* 順時針旋轉 45 度 */
}

2. 縮放

使用?transform?屬性的?scale()?函數可以實現元素的縮放，參數可以是一個值（等比例縮放）或兩個值（分別指定水平和垂直方向的縮放比例）。

.scale-element {transform: scale(1.5); /* 等比例放大 1.5 倍 */
}

3. 傾斜

使用?transform?屬性的?skew()?函數可以實現元素的傾斜，參數分別指定水平和垂直方向的傾斜角度。

.skew-element {transform: skew(20deg, 10deg); /* 水平傾斜 20 度，垂直傾斜 10 度 */
}

4. 平移

使用?transform?屬性的?translate()?函數可以實現元素的平移，參數分別指定水平和垂直方向的平移距離。

.translate-element {transform: translate(50px, 20px); /* 水平向右平移 50px，垂直向下平移 20px */
}

5. 過渡效果

使用?transition?屬性可以實現元素狀態變化時的平滑過渡，常見屬性如下：

屬性	描述	示例
`transition-property`	指定要過渡的 CSS 屬性	`transition-property: width;`
`transition-duration`	指定過渡的持續時間	`transition-duration: 0.5s;`
`transition-timing-function`	指定過渡的時間曲線，如?`ease`、`linear`?等	`transition-timing-function: ease-in-out;`
`transition-delay`	指定過渡的延遲時間	`transition-delay: 0.2s;`

.box {width: 100px;height: 100px;background-color: blue;transition: width 0.5s ease-in-out;
}
.box:hover {width: 200px;
}

6. 動畫效果

使用?@keyframes?規則定義動畫，然后通過?animation?屬性應用動畫。

@keyframes slide {from {transform: translateX(0);}to {transform: translateX(200px);}
}
.animated-element {animation: slide 2s infinite; /* 應用名為 slide 的動畫，持續 2 秒，無限循環 */
}

三、JavaScript 深度解讀

1. 數據類型

基本數據類型：包括?Number、String、Boolean、Null、Undefined、Symbol。
引用數據類型：如?Object、Array、Function?等。

2. 變量聲明

var：舊的變量聲明方式，存在變量提升和函數作用域問題。
let：塊級作用域變量聲明，避免了變量提升帶來的問題。
const：聲明常量，一旦賦值不能再重新賦值，但對于引用類型，其內部屬性可以修改。

3. 函數

函數聲明：function add(a, b) { return a + b; }
函數表達式：const add = function(a, b) { return a + b; };
箭頭函數：const add = (a, b) => a + b;

4. 作用域

全局作用域：變量在整個腳本中都可訪問。
函數作用域：變量只能在函數內部訪問。
塊級作用域：使用?let?和?const?聲明的變量在塊級作用域內有效。

5. 面向對象編程

構造函數：用于創建對象實例，如?function Person(name, age) { this.name = name; this.age = age; }
原型鏈：每個對象都有一個原型對象，通過原型鏈可以實現繼承。
類和繼承：ES6 引入了?class?關鍵字，可使用?extends?實現類的繼承。

class Animal {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a noise.`);}
}
class Dog extends Animal {speak() {console.log(`${this.name} barks.`);}
}

6. 事件處理

事件綁定：可使用?addEventListener?方法為元素添加事件監聽器，支持多種事件類型，如?click、mouseover、keydown?等。

const button = document.getElementById('myButton');
button.addEventListener('click', function() {alert('Button clicked!');
});

事件冒泡和捕獲：事件在 DOM 樹中傳播有冒泡和捕獲兩個階段，可通過?addEventListener?的第三個參數控制。

7. 異步編程

回調函數：是最基本的異步處理方式，但容易出現回調地獄問題。

function getData(callback) {setTimeout(() => {const data = { message: 'Hello' };callback(data);}, 1000);
}
getData((data) => {console.log(data.message);
});

Promise：用于處理異步操作，避免回調地獄，有?pending、fulfilled?和?rejected?三種狀態。

const promise = new Promise((resolve, reject) => {setTimeout(() => {resolve('Success');}, 1000);
});
promise.then((result) => {console.log(result);
});

async/await：是基于 Promise 的語法糖，使異步代碼看起來更像同步代碼。

async function fetchData() {const response = await fetch('https://api.example.com/data');const data = await response.json();return data;
}
fetchData().then((data) => {console.log(data);
});

8. 模塊化

ES6 模塊：使用?import?和?export?關鍵字實現模塊的導入和導出。

// module.js
export const add = (a, b) => a + b;// main.js
import { add } from './module.js';
console.log(add(1, 2));

9. DOM 操作

JavaScript 可以通過 DOM（文檔對象模型）操作 HTML 元素，常見方法如下：

方法	描述	示例
`document.getElementById()`	根據元素的 ID 獲取元素	`const element = document.getElementById('myElement');`
`document.getElementsByTagName()`	根據元素的標簽名獲取元素集合	`const elements = document.getElementsByTagName('p');`
`document.getElementsByClassName()`	根據元素的類名獲取元素集合	`const elements = document.getElementsByClassName('myClass');`
`document.querySelector()`	根據 CSS 選擇器獲取第一個匹配的元素	`const element = document.querySelector('.myClass');`
`document.querySelectorAll()`	根據 CSS 選擇器獲取所有匹配的元素集合	`const elements = document.querySelectorAll('p');`
`element.innerHTML`	獲取或設置元素的 HTML 內容	`element.innerHTML = '<p>新內容</p>';`
`element.style`	獲取或設置元素的樣式	`element.style.color = 'red';`

10. 事件處理

JavaScript 可以監聽 HTML 元素的各種事件，如點擊、鼠標移動等。常見事件和綁定方法如下：

事件	描述	綁定方法
`click`	元素被點擊時觸發	`element.addEventListener('click', function() { /* 處理代碼 */ });`
`mouseover`	鼠標懸停在元素上時觸發	`element.addEventListener('mouseover', function() { /* 處理代碼 */ });`
`keydown`	按下鍵盤按鍵時觸發	`document.addEventListener('keydown', function(event) { /* 處理代碼 */ });`

11. 表單驗證

在用戶提交表單之前，可以使用 JavaScript 對表單數據進行驗證，確保數據的有效性。

<form id="myForm"><input type="text" id="username" required><input type="submit" value="提交">
</form>
<script>const form = document.getElementById('myForm');form.addEventListener('submit', function(event) {const username = document.getElementById('username').value;if (username.length < 3) {alert('用戶名長度不能少于 3 個字符');event.preventDefault(); // 阻止表單提交}});
</script>

12. 異步編程

JavaScript 中的異步操作可以避免阻塞主線程，提高程序的性能。常見的異步編程方式有回調函數、Promise 和 async/await。

回調函數

function getData(callback) {setTimeout(() => {const data = { message: 'Hello' };callback(data);}, 1000);
}
getData((data) => {console.log(data.message);
});

Promise

const promise = new Promise((resolve, reject) => {setTimeout(() => {const success = true;if (success) {resolve('成功');} else {reject('失敗');}}, 1000);
});
promise.then((result) => {console.log(result);
}).catch((error) => {console.error(error);
});

async/await

async function fetchData() {try {const response = await fetch('https://api.example.com/data');const data = await response.json();return data;} catch (error) {console.error(error);}
}
fetchData().then((data) => {console.log(data);
});

13. 事件委托

事件委托是一種利用事件冒泡原理，將事件處理程序綁定到父元素上，從而處理子元素事件的技術。

<ul id="myList"><li>列表項 1</li><li>列表項 2</li>
</ul>
<script>const list = document.getElementById('myList');list.addEventListener('click', function(event) {if (event.target.tagName === 'LI') {console.log('點擊了列表項：', event.target.textContent);}});
</script>

14. 本地存儲

JavaScript 提供了?localStorage?和?sessionStorage?對象，用于在瀏覽器中存儲數據。

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

15. 定時器

使用?setTimeout()?和?setInterval()?函數可以實現定時任務。

// 延遲 2 秒后執行函數
setTimeout(() => {console.log('2 秒后執行');
}, 2000);// 每隔 1 秒執行一次函數
const intervalId = setInterval(() => {console.log('每秒執行一次');
}, 1000);// 停止定時器
clearInterval(intervalId);

16. AJAX 請求

使用?XMLHttpRequest?或?fetch?API 可以實現異步數據請求。

// 使用 fetch API
fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));