當(dāng)前位置：
  1. 首頁
  2. 知識學(xué)院
  3. 正文

一、HTML 基礎(chǔ)結(jié)構(gòu)
一個基本的 HTML 頁面包含以下結(jié)構(gòu)：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
這里是頁面內(nèi)容
</body>
</html>

<!DOCTYPE html>聲明文檔類型，讓瀏覽器以 HTML5 標(biāo)準(zhǔn)解析頁面。<html>標(biāo)簽是頁面根元素，lang=”en”指定語言為英語，可按需更改。<head>部分包含頁面元信息，如<meta charset=”UTF-8″>定義字符編碼，<title>設(shè)置頁面標(biāo)題，顯示在瀏覽器標(biāo)簽欄。<body>內(nèi)放置所有可視化內(nèi)容。
二、文本排版
標(biāo)題：
<h1>一級標(biāo)題</h1>
<h2>二級標(biāo)題</h2>
<h3>三級標(biāo)題</h3>

標(biāo)題從<h1>到<h6>，重要性遞減，搜索引擎也會參考標(biāo)題層級理解頁面結(jié)構(gòu)。
2. 段落：
<p>這是一個段落，段落之間會自動換行，并且有一定的間距。</p>

<p>標(biāo)簽用于劃分段落，使文本布局清晰。
3. 換行：
<br>

<br>是單標(biāo)簽，用于在文本中強制換行，比如詩句排版時常用。
4. 文本格式：
<b>加粗文本</b>
<i>斜體文本</i>
<u>下劃線文本</u>

分別用于強調(diào)、特殊樣式展示等場景，不過在語義化設(shè)計中，<strong>比<b>、<em>比<i>更推薦，它們不僅有樣式還有語義含義。
三、鏈接與圖像
鏈接：
<a href=”https://www.example.com”>點擊跳轉(zhuǎn)至示例網(wǎng)站</a>

<a>標(biāo)簽的href屬性指定目標(biāo)鏈接地址，用戶點擊文本“點擊跳轉(zhuǎn)至示例網(wǎng)站”就會訪問對應(yīng)網(wǎng)址。還可以鏈接到頁面內(nèi)錨點，如：
<a href=”#section2″>跳轉(zhuǎn)到第二部分</a>

配合頁面內(nèi)有id=”section2″的元素使用。
2. 圖像：
<img src=”image.jpg” alt=”圖片描述”>

src指向圖片文件路徑，alt屬性在圖片無法加載時顯示替代文本，對搜索引擎優(yōu)化（SEO）和無障礙訪問很重要。
四、列表
無序列表：
<ul>
<li>列表項 1</li>
<li>列表項 2</li>
<li>列表項 3</li>
</ul>

<ul>表示無序列表，<li>是列表項，默認以圓點標(biāo)識。
2. 有序列表：
<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>

<ol>為有序列表，列表項按數(shù)字順序排列。
五、表格
<table>
<tr>
<th>表頭 1</th>
<th>表頭 2</th>
</tr>
<tr>
<td>單元格 1</td>
<td>單元格 2</td>
</tr>
</table>

<table>定義表格，<tr>是行，<th>用于表頭單元格，默認加粗居中，<td>為普通單元格，可用于數(shù)據(jù)展示、布局等，但現(xiàn)在 CSS 布局更靈活，表格多用于數(shù)據(jù)呈現(xiàn)場景。
六、表單
<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>創(chuàng)建表單，action指向處理表單數(shù)據(jù)的后端腳本，method可選post或get。<input>根據(jù)type屬性有不同功能，如text輸入文本，password隱藏輸入內(nèi)容，<label>關(guān)聯(lián)輸入框提升可用性，<input type=”submit”>用于提交表單數(shù)據(jù)。
七、多媒體
音頻：
<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>

類似音頻，設(shè)置width和height控制尺寸，多種格式適配不同瀏覽器兼容性。
以上只是 HTML 代碼的冰山一角，結(jié)合 CSS 樣式和 JavaScript 交互能構(gòu)建出豐富多彩、功能強大的網(wǎng)頁。不斷實踐與探索，才能熟練掌握網(wǎng)頁設(shè)計制作的精髓。