目錄
- 一、HTML 是什么？
- 二、HTML 的基本結構
- ? 簡要說明：
- 三、常見 HTML 標簽講解
- 3.1 標題標簽 `<h1> ~ <h6>`
- 3.2 段落和換行
- 3.3 超鏈接
- 3.4 圖像插入
- 3.5 列表
- 無序列表：
- 有序列表：
- 3.6 表格結構
- 四、HTML 語義化標簽詳解
- 五、HTML 表單基礎
- 六、常見問題 Q&A
- Q: HTML 是否區分大小寫？
- Q: `<div>` 和 `<section>` 有什么區別？
- Q: 頁面打不開是為什么？
- 七、總結與學習建議
一、HTML 是什么？
HTML（HyperText Markup Language，超文本標記語言）是構建網頁的基礎。它并不是編程語言，而是一種標記語言，用于告訴瀏覽器頁面內容和結構。
簡單理解：HTML 負責“骨架”結構，CSS 負責“樣式”，JavaScript 負責“交互”。
二、HTML 的基本結構
一個完整的 HTML 文檔大致結構如下：
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><title>我的第一個網頁</title></head><body><h1>歡迎來到我的網站</h1><p>這是一個段落。</p></body>
</html>
? 簡要說明：
<!DOCTYPE html>：聲明文檔類型為 HTML5<html>：所有 HTML 內容的根節點<head>：放元信息（如編碼、標題、引入樣式）<body>：網頁的可見內容區域
三、常見 HTML 標簽講解
3.1 標題標簽 <h1> ~ <h6>
<h1>一級標題</h1>
<h2>二級標題</h2>
...
<h6>六級標題</h6>
3.2 段落和換行
<p>這是一個段落。</p>
<br /> <!-- 換行 -->
3.3 超鏈接
<a href="https://www.baidu.com" target="_blank">訪問百度</a>
3.4 圖像插入
<img src="https://cdn.example.com/logo.png" alt="網站 Logo" width="200" />
3.5 列表
無序列表：
<ul><li>蘋果</li><li>香蕉</li>
</ul>
有序列表：
<ol><li>第一步</li><li>第二步</li>
</ol>
3.6 表格結構
<table border="1"><thead><tr><th>姓名</th><th>年齡</th></tr></thead><tbody><tr><td>小明</td><td>18</td></tr></tbody>
</table>
四、HTML 語義化標簽詳解
語義化標簽能夠讓瀏覽器和開發者更好地理解頁面結構，有利于 SEO 和可維護性。
| 標簽 | 說明 |
|---|---|
<header> | 頁眉區域 |
<footer> | 頁腳區域 |
<nav> | 導航欄 |
<main> | 頁面主體 |
<article> | 獨立內容塊 |
<section> | 內容分組區塊 |
<aside> | 側邊欄 |
? 示例：
<main><article><h2>文章標題</h2><p>正文內容...</p></article>
</main>
五、HTML 表單基礎
用于用戶輸入數據的場景：
<form action="/submit" method="POST"><label>用戶名：<input type="text" name="username" /></label><br /><label>密碼：<input type="password" name="password" /></label><br /><button type="submit">提交</button>
</form>
六、常見問題 Q&A
Q: HTML 是否區分大小寫？
A: 標簽名和屬性名通常不區分大小寫，但推薦小寫寫法以保持規范。
Q: <div> 和 <section> 有什么區別？
A: <div> 是無語義容器，而 <section> 表示有意義的內容分組。
Q: 頁面打不開是為什么？
A: 常見問題包括：缺失 <html> 結構、拼寫錯誤、路徑不對、標簽不閉合等。
七、總結與學習建議
- HTML 是前端開發的第一步，理解其結構是進階的基礎
- 建議配合 MDN HTML 文檔 閱讀更詳細的說明
- 多練習寫結構頁面，加深理解標簽的作用
到這里，這篇文章就和大家說再見啦！我的主頁里還藏著很多 篇 前端 實戰干貨，感興趣的話可以點擊頭像看看，說不定能找到你需要的解決方案～
創作這篇內容花了很多的功夫。如果它幫你解決了問題，或者帶來了啟發，歡迎：
點個贊?? 讓更多人看到優質內容
關注「前端極客探險家」🚀 每周解鎖新技巧
收藏文章?? 方便隨時查閱
📢 特別提醒：
轉載請注明原文鏈接，商業合作請私信聯系
感謝你的閱讀！我們下篇文章再見～ 💕
