HTML：從 “小白” 到 “標簽俠” 的修煉手冊

一、HTML：網頁的 “骨架” 不是骷髏架

二、文本標簽：文字的 “華麗變身” 術

1. 標題標簽：文字界的 “領導班子”

2. 段落標簽：文字的 “專屬保姆”

3. 文本格式化標簽：給文字 “穿花衣”

三、鏈接標簽：網頁的 “傳送門”

四、圖像標簽：給網頁 “貼照片”

五、列表標簽：讓內容 “排好隊”

1. 無序列表：“一群沒序號的兄弟”

2. 有序列表：“排好隊，按號來”

3. 定義列表：“名詞解釋小專家”

六、表格標簽：數據的 “整齊家”

七、表單標簽：和用戶 “聊聊天”

1. 表單的基本結構

2. 常見的表單控件

八、div 和 span：網頁布局的 “萬能磚”

九、HTML5 新特性：讓網頁 “更聰明”

1. 語義化標簽

2. 新增的表單控件

3. 多媒體標簽

十、HTML 常見問題和小技巧

1. 注釋：代碼的 “說明書”

2. 字符實體：特殊字符的 “替身”

3. 文檔類型聲明

4. 編碼方式

5. 標簽的嵌套規則

十一、實戰演練：制作一個簡單的個人介紹頁

十二、總結：HTML 學習之路永無止境

各位未來的前端大俠們，準備好開啟一場爆笑又漲知識的 HTML 之旅了嗎？想象一下，當你在瀏覽器里敲下一串神秘代碼，屏幕上就跳出一個酷炫的網頁，那種成就感簡直比吃到最后一塊披薩還爽！今天，咱們就來扒一扒 HTML 的那些事兒，保證讓你從 “這啥呀” 變成 “so easy”！

一、HTML：網頁的 “骨架” 不是骷髏架

首先，咱得搞明白 HTML 到底是個啥。HTML，全稱 HyperText Markup Language，翻譯過來就是超文本標記語言。聽著挺唬人，其實說白了，它就是用來搭建網頁骨架的。就像蓋房子，得先有梁有柱有墻，HTML 就是干這個的。

你可別把它當成編程語言，它沒有那么多復雜的邏輯，就是一堆標簽的組合。這些標簽就像積木，你想搭成城堡還是小狗，全看你怎么拼。

咱們先來看一個最基礎的 HTML 文檔長啥樣：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>我的第一個網頁</title></head><body>你好，HTML！</body></html>

是不是看起來像那么回事兒了？咱們來逐個拆解一下。<!DOCTYPE html>就像是給瀏覽器的一張 “身份證”，告訴它：“嘿，哥們兒，我是 HTML5 文檔，按這個標準來解析我哈！”

<html>標簽就像是整個網頁的 “大別墅”，所有的內容都得住在里面。<head>標簽呢，相當于別墅的 “閣樓”，里面放的都是一些 “幕后英雄”—— 比如網頁的標題、編碼方式這些信息，它們不直接顯示在頁面上，但卻至關重要。<title>標簽就是網頁的 “名字牌”，會顯示在瀏覽器的標簽欄上，就像你的微信昵稱一樣，得起個響亮又好記的。

<body>標簽就是別墅的 “客廳”，所有想展示給用戶看的內容，比如文字、圖片、視頻啥的，都得放在這里。就像你家客廳里的沙發、電視、地毯，都是給客人看的嘛。

二、文本標簽：文字的 “華麗變身” 術

文字是網頁的 “主力軍”，怎么讓它們變得好看又規整呢？這就得靠文本標簽來幫忙了。

1. 標題標簽：文字界的 “領導班子”

標題標簽有<h1>到<h6>，就像公司里的董事長到實習生，級別越高（數字越小），字號越大，分量越重。

<h1>我是大老板（h1）</h1><h2>我是部門經理（h2）</h2><h3>我是小組長（h3）</h3><h4>我是老員工（h4）</h4><h5>我是新員工（h5）</h5><h6>我是實習生（h6）</h6>

在一個網頁里，<h1>通常只出現一次，就像一個公司只有一個董事長一樣，多了就亂套啦。

2. 段落標簽：文字的 “專屬保姆”

<p>標簽就是段落的 “保姆”，它會給文字自動加上換行和間距，讓文字整整齊齊的，看著就舒服。

<p>這是第一段文字，我要在這里講個小故事。從前有座山，山里有座廟，廟里有個老和尚在給小和尚講故事...</p><p>這是第二段文字，故事還沒講完呢。老和尚說，從前有座山，山里有座廟...</p>

要是沒有<p>標簽，兩段文字就會擠在一起，像一群沒睡醒的孩子，亂糟糟的。

3. 文本格式化標簽：給文字 “穿花衣”

想讓文字變粗、變斜、加下劃線？沒問題，文本格式化標簽來幫你！

<p>我是<strong>加粗</strong>的文字，是不是很醒目？</p><p>我是<em>斜體</em>的文字，是不是很優雅？</p><p>我是<u>下劃線</u>的文字，是不是很特別？</p><p>我是<del>刪除線</del>的文字，就像被劃掉的錯誤答案。</p>

<strong>和<b>都能讓文字變粗，但<strong>更強調語義上的重要性，搜索引擎會更重視它；<em>和<i>都能讓文字變斜，<em>也更強調語義。所以在實際開發中，推薦使用<strong>和<em>。

三、鏈接標簽：網頁的 “傳送門”

在網頁上，我們經常需要從一個頁面跳到另一個頁面，這就像在不同的房間之間穿梭，而鏈接標簽<a>就是那個 “傳送門”。

<a href="https://www.baidu.com">去百度逛逛</a><a href="page2.html">去頁面2看看</a><a href="#top">回到頂部</a>

href屬性就像是 “傳送門” 的目的地，它可以是一個網址、一個本地的 HTML 文件，或者是頁面內的一個錨點（就像上面例子里的#top，需要在頁面頂部定義一個<a name="top"></a>才能生效）。

默認情況下，點擊鏈接會在當前窗口打開新頁面。要是想在新窗口打開，只需加上target="_blank"屬性：

<a href="https://www.bilibili.com" target="_blank">去B站看視頻（新窗口打開）</a>

四、圖像標簽：給網頁 “貼照片”

光有文字太單調了，咱們給網頁加點圖片吧！<img>標簽就是干這個的。

<img src="cat.jpg" alt="一只可愛的小貓" width="300" height="200">

src屬性是圖片的 “住址”，告訴瀏覽器圖片在哪兒；alt屬性是圖片的 “備用說明”，當圖片加載不出來的時候，就會顯示這個文字，而且對搜索引擎也很友好；width和height分別是圖片的寬度和高度，可以用像素（px）或者百分比來設置。

這里有個小竅門：如果只設置寬度或者高度，圖片會按比例縮放，不會變形。要是兩個都設置，可得小心點，別把圖片拉變形了，不然就不好看啦。

還有哦，<img>標簽是個 “單身漢”，它沒有閉合標簽，不像其他標簽那樣需要成對出現。

五、列表標簽：讓內容 “排好隊”

有時候我們需要展示一系列相關的內容，比如購物清單、步驟說明等，這時候列表標簽就派上用場了。列表分為有序列表、無序列表和定義列表三種。

1. 無序列表：“一群沒序號的兄弟”

無序列表用<ul>標簽，里面的每個列表項用<li>標簽，默認前面會有個小圓點。

<h3>我的購物清單</h3><ul><li>蘋果</li><li>香蕉</li><li>牛奶</li><li>面包</li></ul>

你還可以通過type屬性改變前面的符號，比如disc（默認，實心圓）、circle（空心圓）、square（方塊）。

2. 有序列表：“排好隊，按號來”

有序列表用<ol>標簽，每個列表項也是<li>，默認前面是數字序號。

<h3>煮泡面的步驟</h3><ol><li>燒一壺水</li><li>把泡面放進碗里</li><li>倒入開水，沒過泡面</li><li>蓋上蓋子，等3分鐘</li><li>打開蓋子，放入調料，攪拌均勻</li></ol>

type屬性也能改變序號類型，比如1（數字，默認）、A（大寫字母）、a（小寫字母）、I（大寫羅馬數字）、i（小寫羅馬數字）。

3. 定義列表：“名詞解釋小專家”

定義列表用<dl>標簽，里面包含定義術語（<dt>）和定義描述（<dd>），就像字典里的詞條和解釋。

<dl><dt>HTML</dt><dd>超文本標記語言，用于創建網頁的結構。</dd><dt>CSS</dt><dd>層疊樣式表，用于美化網頁的外觀。</dd><dt>JavaScript</dt><dd>一種編程語言，用于實現網頁的交互效果。</dd></dl>

六、表格標簽：數據的 “整齊家”

當我們需要展示一些結構化的數據，比如成績表、產品信息等，表格標簽就是最佳選擇。

<table border="1"><tr><th>姓名</th><th>語文</th><th>數學</th></tr><tr><td>小明</td><td>90</td><td>85</td></tr><tr><td>小紅</td><td>95</td><td>92</td></tr></table>

<table>標簽是整個表格的 “容器”；border屬性用于設置表格邊框的寬度，沒有這個屬性的話，表格邊框就不顯示了。<tr>標簽代表表格的一行，就像一條橫線；<th>是表頭單元格，文字會自動加粗居中；<td>是普通單元格，用來放具體的數據。

有時候我們需要合并單元格，這時候就要用到colspan（跨列合并）和rowspan（跨行合并）屬性了。

<table border="1"><tr><th colspan="2">個人信息</th></tr><tr><td>姓名</td><td>小明</td></tr><tr><td rowspan="2">聯系方式</td><td>電話：123456789</td></tr><tr><td>郵箱：xiaoming@example.com</td></tr></table>

這個例子里，“個人信息” 跨了兩列，“聯系方式” 跨了兩行，是不是很神奇？

七、表單標簽：和用戶 “聊聊天”

表單是網頁和用戶交互的重要方式，比如登錄頁面、注冊頁面、調查問卷等都離不開表單。

1. 表單的基本結構

表單用<form>標簽包裹，里面包含各種表單控件。

<form action="/submit" method="get"><!-- 表單控件放在這里 --><input type="submit" value="提交"></form>

action屬性指定表單數據提交的地址；method屬性指定提交方式，有get和post兩種。get方式會把數據顯示在 URL 里，適合提交少量數據；post方式不會顯示在 URL 里，更安全，適合提交大量數據或敏感信息。

2. 常見的表單控件

文本輸入框：<input type="text">，用來輸入單行文本。

<label for="username">用戶名：</label><input type="text" id="username" name="username" placeholder="請輸入用戶名">

label標簽和input標簽通過for和id關聯起來，點擊label也能聚焦到對應的輸入框，很方便。placeholder屬性是輸入框里的提示文字，用戶輸入后就會消失。

密碼輸入框：<input type="password">，輸入的內容會顯示為圓點或星號，保護隱私。

<label for="password">密碼：</label><input type="password" id="password" name="password" placeholder="請輸入密碼">

單選按鈕：<input type="radio">，讓用戶從多個選項中選一個。

性別：<input type="radio" id="male" name="gender" value="male" checked><label for="male">男</label><input type="radio" id="female" name="gender" value="female"><label for="female">女</label>

同一組單選按鈕的name屬性必須相同，這樣才能實現 “選一個” 的效果。checked屬性表示默認選中。

復選框：<input type="checkbox">，讓用戶從多個選項中選多個。

愛好：<input type="checkbox" id="reading" name="hobby" value="reading"><label for="reading">讀書</label><input type="checkbox" id="sports" name="hobby" value="sports" checked><label for="sports">運動</label><input type="checkbox" id="music" name="hobby" value="music"><label for="music">聽音樂</label>

下拉列表：<select>和<option>標簽組合使用。

<label for="city">城市：</label><select id="city" name="city"><option value="">請選擇城市</option><option value="beijing">北京</option><option value="shanghai" selected>上海</option><option value="guangzhou">廣州</option></select>

selected屬性表示默認選中的選項。

文本域：<textarea>，用來輸入多行文本。

<label for="intro">個人簡介：</label><textarea id="intro" name="intro" rows="5" cols="30" placeholder="請輸入個人簡介"></textarea>

rows和cols屬性分別設置文本域的行數和列數。

提交按鈕：<input type="submit">或<button type="submit">，點擊會提交表單。

<input type="submit" value="提交"><button type="submit">提交表單</button>

重置按鈕：<input type="reset">，點擊會把表單控件恢復到默認值。

<input type="reset" value="重置">

八、div 和 span：網頁布局的 “萬能磚”

<div>和<span>是兩個非常常用的標簽，它們本身沒有特殊的含義，主要用來劃分網頁區域，方便后續用 CSS 進行樣式設置。

<div>是塊級元素，會獨占一行，就像一堵墻，把內容和其他元素隔開。

<div style="background-color: red; height: 100px; width: 100px;">我是一個div，我占一整行</div><div style="background-color: blue; height: 100px; width: 100px;">我是另一個div，我也占一整行</div>

<span>是行內元素，不會獨占一行，只會占據自身內容的寬度，就像一個標簽，貼在文字旁邊。

<p>這是一段文字，<span style="color: red;">這里的文字是紅色的</span>，其他文字是默認顏色。</p>

在實際開發中，我們經常用<div>來劃分大的區域，比如頭部、導航欄、內容區、底部等；用<span>來處理行內的局部內容。

九、HTML5 新特性：讓網頁 “更聰明”

HTML5 帶來了很多新的特性和標簽，讓網頁功能更強大，開發更方便。

1. 語義化標簽

以前我們都用<div>來劃分區域，但這樣的代碼語義不夠清晰。HTML5 新增了一些語義化標簽，讓代碼更易讀，也更利于搜索引擎解析。

<header>：頁面或區域的頭部，通常包含標題、logo、導航等。

<nav>：導航欄，包含鏈接列表。

<main>：頁面的主要內容區域，一個頁面通常只有一個<main>。

<article>：獨立的文章內容，比如博客文章、新聞報道等。

<section>：頁面中的一個區塊，通常包含一個標題和相關內容。

<aside>：側邊欄，和主要內容相關的輔助信息，比如廣告、推薦文章等。

<footer>：頁面或區域的底部，通常包含版權信息、聯系方式等。

<header><h1>我的博客</h1><nav><ul><li><a href="#">首頁</a></li><li><a href="#">文章</a></li><li><a href="#">關于我</a></li></ul></nav></header><main><article><h2>HTML5語義化標簽的好處</h2><p>...</p></article><aside><h3>推薦文章</h3><ul><li><a href="#">CSS布局技巧</a></li><li><a href="#">JavaScript入門</a></li></ul></aside></main><footer><p>? 2023 我的博客 版權所有</p></footer>

這樣的代碼是不是比全是<div>的代碼清晰多了？

2. 新增的表單控件

HTML5 新增了一些專門用途的表單控件，讓表單更強大。

郵箱：<input type="email">，會自動驗證輸入的內容是否符合郵箱格式。

網址：<input type="url">，驗證是否符合網址格式。

數字：<input type="number">，只能輸入數字，還可以通過min、max、step屬性限制范圍和步長。

日期：<input type="date">，會顯示日期選擇器。

顏色：<input type="color">，會顯示顏色選擇器。

<form><label for="email">郵箱：</label><input type="email" id="email" name="email"><br><label for="url">網址：</label><input type="url" id="url" name="url"><br><label for="age">年齡：</label><input type="number" id="age" name="age" min="0" max="120" step="1"><br><label for="birthday">生日：</label><input type="date" id="birthday" name="birthday"><br><label for="favcolor">喜歡的顏色：</label><input type="color" id="favcolor" name="favcolor"><br><input type="submit" value="提交"></form>

這些控件自帶驗證功能，省了我們不少事呢！

3. 多媒體標簽

HTML5 新增了<video>和<audio>標簽，讓在網頁中嵌入視頻和音頻變得非常簡單，不用再依賴第三方插件了。

視頻：<video>

<video src="movie.mp4" controls width="600" height="400">您的瀏覽器不支持視頻標簽。</video>

controls屬性會顯示播放控制按鈕（播放 / 暫停、音量、進度條等）。還可以通過source標簽提供多種視頻格式，瀏覽器會自動選擇支持的格式。

<video controls width="600" height="400"><source src="movie.mp4" type="video/mp4"><source src="movie.webm" type="video/webm">您的瀏覽器不支持視頻標簽。</video>

音頻：<audio>

<audio src="music.mp3" controls>您的瀏覽器不支持音頻標簽。</audio>

和視頻標簽類似，也可以用source標簽提供多種音頻格式。

十、HTML 常見問題和小技巧

1. 注釋：代碼的 “說明書”

在代碼中添加注釋，可以幫助自己和其他開發者理解代碼的含義，注釋不會被瀏覽器解析顯示。

<!-- 這是一個注釋，我是網頁的頭部區域 --><header><h1>我的網站</h1></header>

注釋可以單行，也可以多行：

2. 字符實體：特殊字符的 “替身”

在 HTML 中，有些字符有特殊含義，比如<和>是標簽的開始和結束，如果想在頁面上顯示這些字符，就需要用字符實體。

常見的字符實體：

<!--這是一個多行注釋我是網頁的主要內容區域包含文章和側邊欄--><main>...</main>

< 表示 <

> 表示 >

& 表示 &

  表示空格（不換行空格）

® 表示 ?（注冊商標符號）

<p>HTML標簽用&lt;和&gt;包裹，比如&lt;p&gt;是段落標簽。</p><p>這兩個詞之間有一個&nbsp;&nbsp;&nbsp;空格（三個不換行空格）。</p><p>&copy; 2023 我的網站 版權所有</p>

3. 文檔類型聲明

一定要在 HTML 文檔的第一行加上<!DOCTYPE html>，告訴瀏覽器這是一個 HTML5 文檔，讓瀏覽器按照正確的標準來解析頁面，避免出現兼容性問題。

4. 編碼方式

在<head>標簽里加上<meta charset="UTF-8">，指定文檔的編碼方式為 UTF-8，這樣可以正確顯示各種語言的文字，包括中文，避免出現亂碼。

5. 標簽的嵌套規則

標簽嵌套要合理，比如塊級元素可以包含行內元素或其他塊級元素，但行內元素一般不能包含塊級元素。還有，標簽要正確閉合，不能交叉嵌套。

錯誤的嵌套：

<p>這是一個錯誤的<span>嵌套</p></span>

正確的嵌套：

<p>這是一個正確的<span>嵌套</span></p>

十一、實戰演練：制作一個簡單的個人介紹頁

光說不練假把式，咱們來動手做一個簡單的個人介紹頁，把前面學的知識都用起來。

<!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><header><h1>你好，我是小明</h1><nav><ul><li><a href="#about">關于我</a></li><li><a href="#hobby">我的愛好</a></li><li><a href="#contact">聯系方式</a></li></ul></nav></header><main><section id="about"><h2>關于我</h2><div><img src="me.jpg" alt="我的照片" width="200" height="200"><p>大家好，我叫小明，是一名前端開發愛好者。我喜歡探索各種前端技術，夢想是成為一名優秀的前端工程師，做出漂亮又好用的網頁。</p><p>我目前正在學習HTML、CSS和JavaScript，計劃在半年內掌握這些基礎知識，然后學習一些流行的前端框架。</p></div></section><section id="hobby"><h2>我的愛好</h2><ol><li>編程：喜歡編寫代碼，解決各種技術問題。</li><li>閱讀：喜歡看技術書籍和科幻小說。</li><li>運動：喜歡打籃球和跑步，保持身體健康。</li><li>旅行：喜歡去不同的地方，感受不同的風土人情。</li></ol></section><section id="contact"><h2>聯系方式</h2><form action="/contact" method="post"><div><label for="name">你的名字：</label><input type="text" id="name" name="name" required></div><div><label for="message">想對我說的話：</label><textarea id="message" name="message" rows="4" cols="30" required></textarea></div><div><input type="submit" value="發送"></div></form><p>也可以通過以下方式聯系我：</p><ul><li>郵箱：xiaoming@example.com</li><li>微信：xiaoming123</li></ul></section></main><footer><p>&copy; 2023 小明的個人介紹頁 版權所有</p></footer></body></html>

這個頁面包含了頭部、導航、主要內容區（關于我、我的愛好、聯系方式）和底部，用到了我們學過的各種標簽：標題、段落、圖片、鏈接、列表、表單、語義化標簽等。是不是很有成就感？