一個精美、功能強大的網站能夠吸引大量用戶，提升品牌知名度和業務價值。而 HTML（HyperText Markup Language，超文本標記語言）作為網頁設計的基礎語言，掌握其代碼是打造優質網站的關鍵。本文將為你提供一份全面的網頁設計制作網站 HTML 代碼大全，助你輕松構建出理想的網頁。
一、基本網頁結構代碼
html
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>網頁標題</title>
</head>
<body>
<!– 網頁主體內容 –>
</body>
</html>
<!DOCTYPE html> 聲明文檔類型，確保瀏覽器以標準模式渲染頁面。
<html> 元素是網頁的根元素，lang 屬性指定網頁語言為中文。
<head> 包含網頁的元數據，如字符編碼 <meta charset=”UTF-8″>，視口設置 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> 用于適配不同設備屏幕，以及網頁標題 <title>。
<body> 包裹網頁的主體內容，如文本、圖片、鏈接等。
二、文本內容相關代碼
1. 標題
html
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<h1> 到 <h6> 用于定義不同級別的標題，數字越小級別越高，字體也越大，通常用于突出顯示網頁中的重要信息層次。
2. 段落
html
<p>這是一個段落文本。段落是網頁中用于組織文本內容的基本單位，可以包含多行文本，瀏覽器會自動在段落前后添加一些空白空間，使內容更加清晰易讀。</p>
<p> 標簽用于定義段落，有助于合理劃分文本內容，增強可讀性。
3. 強調文本
html
<strong>這是加粗文本</strong>
<em>這是斜體文本</em>
<b>這也是加粗文本（語義較弱）</b>
<i>這也是斜體文本（語義較弱）</i>
<strong> 和 <em> 分別用于強調文本，前者表示重要性較高的強調，后者表示語氣上的強調，它們在視覺上通常分別呈現為加粗和斜體，同時具有一定的語義價值。
<b> 和 <i> 也能實現加粗和斜體效果，但語義較弱，主要用于純粹的視覺效果。
4. 列表
無序列表
html
<ul>
<li>列表項一</li>
<li>列表項二</li>
<li>列表項三</li>
</ul>
<ul> 表示無序列表，其內部通過 <li>（列表項）標簽來定義各個列表項，通常在視覺上會以項目符號（如圓點）來標識每個列表項。
有序列表
html
<ol>
<li>列表項一</li>
<li>列表項二</li>
<li>列表項三</li>
</ol>
<ol> 表示有序列表，同樣使用 <li> 定義列表項，但列表項會自動按照順序編號，適用于有先后順序或重要性等級的內容展示。
5. 分隔線
html
<hr>
<hr> 用于創建一條水平分隔線，常用于在不同內容區塊之間進行視覺分隔，使頁面布局更加清晰。
三、圖片插入代碼
html
<img src=”圖片路徑.jpg” alt=”圖片描述”>
<img> 標簽用于插入圖片，src 屬性指定圖片文件的路徑，可以是本地路徑或網絡 URL；alt 屬性提供圖片的替代文本，當圖片無法顯示時，瀏覽器會顯示這個替代文本，同時也有利于搜索引擎優化和屏幕閱讀器讀取圖片信息。
四、超鏈接代碼
html
<a href=”鏈接地址”>鏈接文本</a>
<a> 標簽用于創建超鏈接，href 屬性指定鏈接的目標地址，可以是網頁地址、文件下載地址等；鏈接文本則是用戶點擊的文本內容，點擊后會跳轉到指定的鏈接地址。
五、表格代碼
html
<table>
<caption>表格標題</caption>
<thead>
<tr>
<th>表頭一</th>
<th>表頭二</th>
<th>表頭三</th>
</tr>
</thead>
<tbody>
<tr>
<td>單元格一</td>
<td>單元格二</td>
<td>單元格三</td>
</tr>
<tr>
<td>單元格四</td>
<td>單元格五</td>
<td>單元格六</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>總計</td>
<td>100</td>
<td>200</td>
</tr>
</tfoot>
</table>
<table> 定義表格，<caption> 用于添加表格標題，位于表格上方。
<thead> 包含表格的頭部行，通過 <tr>（表格行）和 <th>（表頭單元格）來定義表頭內容。
<tbody> 包含表格的主體內容，同樣使用 <tr> 和 <td>（表格數據單元格）來填充數據。
<tfoot> 用于定義表格的腳注部分，常用于放置總計、平均值等統計信息，其結構與 <thead> 和 <tbody> 類似。
六、表單代碼
1. 基本表單結構
html
<form action=”提交地址” method=”提交方法”>
<!– 表單內容 –>
</form>
<form> 標簽定義表單，action 屬性指定表單數據提交到的服務器地址，method 屬性定義提交方法，常見的有 get 和 post，其中 get 方法會將表單數據附加在 URL 中，適用于簡單的查詢操作；post 方法則將數據放在請求體中，適用于包含敏感信息或大量數據的提交。
2. 輸入框
html
<input type=”text” name=”用戶名” placeholder=”請輸入用戶名”>
<input type=”password” name=”密碼” placeholder=”請輸入密碼”>
<input type=”email” name=”郵箱” placeholder=”請輸入郵箱地址”>
<input type=”tel” name=”電話” placeholder=”請輸入電話號碼”>
<input type=”number” name=”數量” placeholder=”請輸入數量”>
<input type=”date” name=”日期”>
<input type=”checkbox” name=”愛好” value=”籃球”> 籃球
<input type=”radio” name=”性別” value=”男”> 男
<input type=”radio” name=”性別” value=”女”> 女
<input type=”file” name=”上傳文件”>
<input type=”submit” value=”提交”>
<input type=”reset” value=”重置”>
<input> 標簽用于創建各種類型的輸入框，type 屬性決定輸入框的類型，如文本框（text）、密碼框（password）、郵箱輸入框（email）、電話輸入框（tel）、數字輸入框（number）、日期選擇框（date）等；name 屬性為輸入框指定名稱，用于在服務器端識別該輸入框的數據；placeholder 屬性提供輸入框的提示文本。
單選按鈕（radio）和復選框（checkbox）也通過 <input> 標簽創建，通過 name 屬性關聯同一組選項，value 屬性指定每個選項的值。
文件上傳框（file）允許用戶選擇文件上傳，提交按鈕（submit）用于觸發表單提交，重置按鈕（reset）用于將表單恢復到初始狀態。
