一、HTML 基礎結構
一個基本的 HTML 頁面包含以下結構：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>網頁標題</title>
</head>
<body>
這里是頁面內容
</body>
</html>
<!DOCTYPE html>聲明文檔類型，讓瀏覽器以 HTML5 標準解析頁面。<html>標簽是頁面根元素，lang=”en”指定語言為英語，可按需更改。<head>部分包含頁面元信息，如<meta charset=”UTF-8″>定義字符編碼，<title>設置頁面標題，顯示在瀏覽器標簽欄。<body>內放置所有可視化內容。
二、文本排版
標題：
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
標題從<h1>到<h6>，重要性遞減，搜索引擎也會參考標題層級理解頁面結構。
2. 段落：
<p>這是一個段落，段落之間會自動換行，并且有一定的間距。</p>
<p>標簽用于劃分段落，使文本布局清晰。
3. 換行：
<br>
<br>是單標簽，用于在文本中強制換行，比如詩句排版時常用。
4. 文本格式：
<b>加粗文本</b>
<i>斜體文本</i>
<u>下劃線文本</u>
分別用于強調、特殊樣式展示等場景，不過在語義化設計中，<strong>比<b>、<em>比<i>更推薦，它們不僅有樣式還有語義含義。
三、鏈接與圖像
鏈接：
<a href=”https://www.example.com”>點擊跳轉至示例網站</a>
<a>標簽的href屬性指定目標鏈接地址，用戶點擊文本“點擊跳轉至示例網站”就會訪問對應網址。還可以鏈接到頁面內錨點，如：
<a href=”#section2″>跳轉到第二部分</a>
配合頁面內有id=”section2″的元素使用。
2. 圖像：
<img src=”image.jpg” alt=”圖片描述”>
src指向圖片文件路徑，alt屬性在圖片無法加載時顯示替代文本，對搜索引擎優化（SEO）和無障礙訪問很重要。
四、列表
無序列表：
<ul>
<li>列表項 1</li>
<li>列表項 2</li>
<li>列表項 3</li>
</ul>
<ul>表示無序列表，<li>是列表項，默認以圓點標識。
2. 有序列表：
<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
<ol>為有序列表，列表項按數字順序排列。
五、表格
<table>
<tr>
<th>表頭 1</th>
<th>表頭 2</th>
</tr>
<tr>
<td>單元格 1</td>
<td>單元格 2</td>
</tr>
</table>
<table>定義表格，<tr>是行，<th>用于表頭單元格，默認加粗居中，<td>為普通單元格，可用于數據展示、布局等，但現在 CSS 布局更靈活，表格多用于數據呈現場景。
六、表單
<form action=”submit.php” method=”post”>
<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>
<form>創建表單，action指向處理表單數據的后端腳本，method可選post或get。<input>根據type屬性有不同功能，如text輸入文本，password隱藏輸入內容，<label>關聯輸入框提升可用性，<input type=”submit”>用于提交表單數據。
七、多媒體
音頻：
<audio controls>
<source src=”music.mp3″ type=”audio/mpeg”>
您的瀏覽器不支持音頻播放。
</audio>
controls屬性提供播放控制條，<source>指定音頻源，瀏覽器按順序嘗試支持的格式播放。
2. 視頻：
<video width=”320″ height=”240″ controls>
<source src=”video.mp4″ type=”video/mp4″>
您的瀏覽器不支持視頻播放。
</video>
類似音頻，設置width和height控制尺寸，多種格式適配不同瀏覽器兼容性。
以上只是 HTML 代碼的冰山一角，結合 CSS 樣式和 JavaScript 交互能構建出豐富多彩、功能強大的網頁。不斷實踐與探索，才能熟練掌握網頁設計制作的精髓。
