一、HTML 完全指南：從零開始構建網頁

文章目錄

- 前言
- 一、 HTML 結構
- - - 認識 HTML 標簽
    - HTML 文件基本結構
    - 標簽層次結構
    - 快速生成代碼框架
- 二、 HTML 常見標簽詳解
- - - 2.1 注釋標簽
    - 2.2 標題標簽 (`h1` - `h6`)
    - 2.3 段落標簽 (`p`)
    - 2.4 換行標簽 (`br`)
    - 2.5 格式化標簽
    - 2.6 圖片標簽 (`img`)
    - 2.7 超鏈接標簽 (`a`)
    - 2.8 表格標簽
    - - 基本使用
      - 合并單元格
    - 2.9 列表標簽
    - - 無序列表 (`ul`)
      - 有序列表 (`ol`)
      - 自定義列表（`dl`）
    - 2.10 表單標簽
    - - `form` 標簽
      - `input` 標簽
      - `label` 標簽
      - `select` 標簽
      - `textarea` 標簽
    - 2.11 無語義標簽：`div` 和 `span`
- 三、HTML 特殊字符
- 總結

前言

在現代互聯網的世界中，網站已經成為我們日常生活的一部分。從社交媒體到購物平臺，從博客到企業官網，每一個網站背后都依賴著一種技術——HTML（超文本標記語言）。作為構建網頁的核心語言，HTML不僅為網頁提供結構，還使得我們能夠在瀏覽器中看到文本、圖片、視頻和其他多媒體內容。

對于許多剛接觸網頁開發的人來說，HTML可能顯得陌生且復雜，但它的學習并不像想象中的那么困難, 希望我們可以耐心學習下去。本篇《HTML 完全指南：從零開始構建網頁》將帶領你從最基礎的HTML概念開始，逐步掌握網頁構建的核心技巧和最佳實踐。無論你是希望建立一個簡單的個人博客，還是準備開發一個企業網站，HTML都將是你最重要的起點。

在本篇博客中，我們將通過清晰的步驟和實用的示例，幫助你了解HTML的基本元素、標簽、屬性以及網頁布局的實現方式。即使你沒有任何編程經驗，也能輕松上手，構建出屬于自己的網頁。

通過本指南，你將不僅掌握HTML的基礎，還能學會如何將這些知識應用到實際開發中，打下扎實的前端開發基礎，邁出成為網頁開發者的第一步。
在這里插入圖片描述

一、 HTML 結構

認識 HTML 標簽

HTML（超文本標記語言）是構建網頁的基礎，幾乎所有的網頁元素都由 HTML 標簽來定義和描述。每個標簽都用于指定網頁的某一部分的內容或行為，所以我們一定要學好 HTML 標簽相關的知識。
這一部分我們先大致了解一些標簽，后面會一一講解每個標簽的具體用法。

常見的 HTML 標簽包括：

<h1> 至 <h6>：標題標簽，用于創建網頁中的標題，數字越小表示標題的層級越高，字體越粗越大。
<p>：段落標簽，用于標記文本段落。
<a>：鏈接標簽，用于創建超鏈接。
<img>：圖片標簽，用于顯示圖片。
<ul> 和 <ol>：無序列表和有序列表標簽，用于創建列表。
<li>：列表項標簽，用于指定列表中的每一項。

注意：

標簽名 (h1) 放到 <> 中。
大部分標簽成對出現，<h1> 為開始標簽，</h1> 為結束標簽。
少數標簽只有開始標簽，稱為“單標簽”。
開始標簽和結束標簽之間，寫的是標簽的內容。
開始標簽中可能帶有"屬性"，id 屬性相當于給這個標簽設置一個唯一的標識符（相當于我們的身份證號碼）

HTML 文件基本結構

每個 HTML 文件都有一個固定的結構，通常包括以下幾部分：

DOCTYPE 聲明：告訴瀏覽器使用哪個 HTML 版本。現在我們常用的是 <!DOCTYPE html>，它表示該文件是 HTML5 格式。HTML 4 的聲明會比 HTML 5 的聲明復雜好多，相比之下 HTML 4 更方便記憶。
<html></html> 標簽：是整個 HTML 文檔的根元素（根標簽、最頂層標簽）。
<head></head> 標簽：包含了網頁的元數據，如字符集、頁面標題、外部鏈接等，主要是寫頁面的屬性。
<body></body> 標簽：網頁的主要內容區域，瀏覽器展示的內容都在這里。
<title></title> 標簽：中間的內容會在頁面標題中顯示出來

HTML 文件基本結構示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>網頁標題</title></head><body><h1>歡迎來到我的網站</h1><p>這是我的第一篇網頁。</p></body>
</html>

標簽層次結構

HTML 是一種層次化的語言，意味著標簽可以包含其他標簽。標簽的層次結構可以通過縮進來表示，以便我們清晰地了解各部分之間的關系。

包含與被包含我們可以叫做 父子關系。
同級的標簽我們可以叫做兄弟關系

例如，HTML 中的<ul>（無序列表）標簽可以包含多個 <li>（列表項）標簽，展示一個列表。每個標簽內的內容可以嵌套其他標簽。

標簽層次結構示例：

<html><head><title>我的頁面</title></head><body><ul><li>項目 1</li><li>項目 2<ul><li>子項目 1</li><li>子項目 2</li></ul></li><li>項目 3</li></ul></body>
</html>

在這個例子中，<ul> 包含了三個 <li>，其中一個 <li> 標簽內部又嵌套了一個新的 <ul>，展示了列表的嵌套結構。

其中：

head 和 body 是 html 的子標簽（html 就是 head 和 body 的父標簽）。
title 是 head 的子標簽，head 是 title 的父標簽。
head 和 body 之間是兄弟關系。

幫助：
可以使用 chrome 的開發者工具查看頁面的結構
F12 或者右鍵檢查，開啟開發者工具，切換到元素標簽，就可以看到頁面的 HTML 結構細節。

請添加圖片描述

標簽之間的結構，構成了一個 DOM 樹。

知識拓展：
什么是 DOM？
DOM（文檔對象模型，Document Object Model）是一個平臺和語言無關的接口，它提供了一種表示網頁結構的方式，使得網頁的結構。樣式和內容可以通過編程方式動態訪問和修改。簡單來說，DOM 是瀏覽器通過解析 HTML 和 XML 文檔創建的一個層次化的對象模型，網頁中的每一個元素、屬性和文本都被表示為一個對象，可以通過 JavaScript 來操作。
DOM 的作用

快速生成代碼框架

為了快速開始一個 HTML 項目，通常我們可以利用代碼編輯器（如 VS Code、Sublime Text 等）提供的快捷功能來生成 HTML 框架。例如，在 VS Code 中輸入 ! 然后按 Tab 鍵，便可以自動生成一個基本的 HTML 文件框架。

快速生成的 HTML 代碼框架：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

細節解釋：

<!DOCTYPE html> 稱為 DTD（文檔類型定義），描述當前的文件是一個 HTML 5 的文件。
<html lang="en"> 其中 lang 屬性表示當前頁面是一個"英語頁面"，這里暫時不用管（個別瀏覽器會根據此處的聲明提示是否進行自動翻譯）。
<meta charset="UTF-8"> 描述頁面的字符編碼方式，沒有這一行可能會導致中文亂碼。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
name="viewport" 其中 viewport 指的是設備的屏幕上能用來顯示我們的網頁的那一塊區域。
content=“width=device-width，initial-scale=1.0” 在設置可視區和設備寬度等寬，并設置初始縮放為不縮放。（這個屬性對于移動端開發更重要一些）。

二、 HTML 常見標簽詳解

2.1 注釋標簽

HTML 中的注釋標簽用于添加注釋，這些注釋不會顯示在瀏覽器中，僅供開發者參考。注釋可以幫助我們記錄代碼說明或暫時隱藏代碼。

注釋標簽：

<!-- 這是一個注釋 -->

Ctrl + / 快捷鍵可以快速進行注釋/取消注釋

注釋的原則

要和代碼邏輯一致。
盡量使用中文。
不要傳遞負能量

2.2 標題標簽 (`h1` - `h6`)

標題標簽用于創建網頁的標題，h1 是最大標題，h6 是最小標題。它們通常用于展示章節、段落標題等信息，h1 應該用于頁面的主標題，而 h2 到 h6 可以用于子標題和小標題。

標題標簽示例：

<h1>主標題</h1>
<h2>副標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>

請添加圖片描述

2.3 段落標簽 (`p`)

當我們把一段比較長的文本粘貼到 html 中，會發現并沒有分成段落。
例如：

css中的1px并不等于設備的1px在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際情況卻并非如此，css中的像素只是一個抽象的單位，在不同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。后來隨著技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。其他品牌的移動設備也是這個道理。例如安卓設備根據屏幕像素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，分辨率也是五花八門，安卓設備上的一個css像素相當于多少個屏幕物理像素，也因設備的不同而不同，沒有一個定論。還有一個因素也會引起css中px的變化，那就是用戶縮放。例如，當用戶把頁面放大一倍，那么css中1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理像素也會減少一倍。關于這點，在文章后面的部分還會講到。在移動端瀏覽器中以及某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，它的官方的定義為：設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 /獨立像素。css中的px就可以看做是設備的獨立像素，所以通過devicePixelRatio，我們可以知道該設備上一個css像素代表多少個物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值為2，也就是說1個css像素相當于2個物理像素。但是要注意的是，devicePixelRatio在不同的瀏覽器中還存在些許的兼容性問題，所以我們現在還并不能完全信賴這個東西，具體的情況可以看下這篇文章。

在網頁上展示結果會變成：
請添加圖片描述

可以自己動手試試。

段落標簽用于定義網頁中的段落。文本會被包含在 <p> 和 </p> 標簽之間，瀏覽器會自動為每個段落添加空白行。

段落標簽示例：

<p>這是一個段落，內容可以是文本、圖片或者其他元素。</p>

請添加圖片描述

通過段落標簽我們來改進一下上面的文本

	<p>css中的1px并不等于設備的1px</p><p>在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際情況卻并非如此，css中的像素只是一個抽象的單位，在不同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。后來隨著技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。其他品牌的移動設備也是這個道理。例如安卓設備根據屏幕像素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，分辨率也是五花八門，安卓設備上的一個css像素相當于多少個屏幕物理像素，也因設備的不同而不同，沒有一個定論。</p><p>還有一個因素也會引起css中px的變化，那就是用戶縮放。例如，當用戶把頁面放大一倍，那么css中1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理像素也會減少一倍。關于這點，在文章后面的部分還會講到。</p><p>在移動端瀏覽器中以及某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，它的官方的定義為：設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 /獨立像素。css中的px就可以看做是設備的獨立像素，所以通過devicePixelRatio，我們可以知道該設備上一個css像素代表多少個物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值為2，也就是說1個css像素相當于2個物理像素。但是要注意的是，devicePixelRatio在不同的瀏覽器中還存在些許的兼容性問題，所以我們現在還并不能完全信賴這個東西，具體的情況可以看下這篇文章。</p>

展示結果為：
請添加圖片描述

注意：

p 標簽之間存在一個空隙（也就是上面說的瀏覽器會為每個段落之間添加空白行）。
當前的 p 標簽描述的段落，前面還沒有縮進。（未來 CSS 會學）。
自動根據瀏覽器寬度來決定排版。
html 內容首尾處的換行，空格均無效。
在 html 中文字之間輸入的多個空格只相當于一個空格。
在 html 中直接輸入換行不會真的換行，而是相當于一個空格。

2.4 換行標簽 (`br`)

br 是 break 的縮寫，代表這一行結束進行換行， <br/> 標簽用于在頁面中插入換行符。它是一個自閉合標簽，表示不需要結束標簽。當你希望在同一段落中換行時，可以使用 <br/>。

換行標簽示例：

<p>第一行<br>第二行<br>第三行</p>

請添加圖片描述

br 是一個單標簽（不需要結束標簽）
br 標簽不像 p 標簽那樣帶有一個很大的空隙
<br/> 是規范寫法，不建議寫成 <br>

 <p>在css中我們一般使用px作為單位，<br/>在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際情況卻并非如此，css中的像素只是一個抽象的單位，在不同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。后來隨著技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。其他品牌的移動設備也是這個道理。例如安卓設備根據屏幕像素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，分辨率也是五花八門，安卓設備上的一個css像素相當于多少個屏幕物理像素，也因設備的不同而不同，沒有一個定論。</p>

運行結果如下：
請添加圖片描述

2.5 格式化標簽

格式化標簽用于控制文本的樣式，如粗體、斜體等。這些標簽可以用來強調某些文本。

<b>：表示粗體文字
<i>：表示斜體文字
<u>：表示下劃線文字
<strong>：表示加重的文本，語義上強調重要性
<em>：表示斜體的強調文本，語義上強調重要性
s：表示刪除線文字
del：表示刪除的強調文本，語義上強調重要性
ins：表示下劃線的強調文本，語義上強調重要性

格式化標簽示例：

<strong>strong 加粗</strong>
<b>b 加粗</b><em>傾斜</em>
<i>傾斜</i><del>刪除線</del>
<s>刪除線</s><ins>下劃線</ins>
<u>下劃線</u>

請添加圖片描述

使用 CSS 也可以完成類似的效果，實際開發中以 CSS 方式為主。

2.6 圖片標簽 (`img`)

<img> 標簽用于在網頁中嵌入圖片。它是一個自閉合標簽，常用的屬性包括 src（圖片路徑）和 alt（圖片描述）。img 標簽必須帶有 src 屬性，表示圖片的路徑。圖片標簽沒有閉合標簽。

圖片標簽示例：

<img src="image.jpg" alt="描述圖片的文字" />

此時要把 image.jpg 這個圖片文件放到和 html 中的同級目錄中。

img 標簽的其他屬性：

alt：替換文本，當文本不能正確顯示的時候，會顯示一個替換的文字。
title：提示文本，鼠標放到圖片上，就會有提示。
width/height：控制寬度高度，高度和寬度一般改一個就行，另外一個會等比例縮放，否則就會圖片失衡。
boder：邊框，參數是寬度的像素，但是一般使用 CSS 來設定。

<img src="rose.jpg" alt="鮮花" title="這是一朵鮮花" width="500px" height="800px"border="5px">

注意：

屬性可以有多個，不能寫到標簽之前。
屬性之間用空格分隔，可以是多個空格，也可以是換行。
屬性之間不分先后順序。
屬性使用“鍵值對”的格式來表示

拓展知識：
關于目錄結構，對于一個復雜的網站，頁面資源很多，這種情況可以使用目錄把這些文件整理好。
（1）相對路徑：以 html 所在位置為基準，找到圖片的位置。
同級路徑：直接寫文件名即可（或者 ./）./ 代表當前路徑。
下一級路徑：需要添加文件夾然后再寫文件名（如：images/1.png）。
上一級路徑：../ 代表上一級路徑然后我們就可以這樣表示（如：../images/2.png）。
（2）絕對路徑：一個完整的磁盤路徑，或者網絡路徑，例如：
磁盤路徑：D:\rose.png
網絡路徑：https：//...

2.7 超鏈接標簽 (`a`)

超鏈接標簽用于創建網頁中的鏈接。通過 <a> 標簽，我們可以將用戶引導到其他網頁、文件或頁面上的某個位置。常用的屬性是 href，它定義了鏈接的目標地址。和 img 標簽一樣 href 也是必須要有的屬性，因為它代表點擊后會跳轉哪個頁面。target：打開方式，默認是 _self，在本標簽頁打開，如果是 _blank 則用新的標簽頁打開。

超鏈接標簽示例：

<a href="https://www.baidu.com">百度</a>

鏈接的幾種形式：

外部鏈接：href 引用其他網站網址。

<a href="https://www.baidu.com">百度</a>

內部鏈接：網站內部之間的鏈接，寫相對路徑即可。
在目錄中先創建一個 1.html，再創建一個 2.html

<!-- 1.html -->我是 1.html<a href="2.html">點我跳轉到 2.html</a><!-- 2.html -->我是 2.html<a href="1.html">點我跳轉到 1.html</a>

空鏈接：使用 # 在 href 中占位。

<a fref="#">空鏈接</a>

下載鏈接：href 對應的路徑是一個文件。（可以使用 zip 文件）

<a href="test.zip">下載文件</a>

網頁元素鏈接：可以給圖片等任何元素添加鏈接（把元素放到 a 標簽中）

<a href="http://www.sogou.com"><img src="rose.jpg" alt=""></a>

錨點鏈接：可以快速定位到頁面中的位置。

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集劇情 <br>
第一集劇情 <br>...
</p><p id="two">
第二集劇情 <br>
第二集劇情 <br>
...
</p><p id="three">
第三集劇情 <br>
第三集劇情 <br>
...
</p>

禁止 a 標簽跳轉：<a href="javascript:void(0);"> 或者 <a href="javascipt:;">

2.8 表格標簽

表格標簽用于在網頁中創建表格。表格通常由 <table> 標簽定義，表格的行由 <tr> 標簽定義，表格的單元格由 <td> 標簽定義，表頭單元格由 <th> 標簽定義。

基本使用

<table><tr><th>表頭1</th><th>表頭2</th></tr><tr><td>數據1</td><td>數據2</td></tr><tr><td>數據3</td><td>數據4</td></tr>
</table>

table 標簽：表示整個表格。
tr 標簽：表示表格的一行。
td 標簽：表示一個單元格。
th 標簽：表示表頭單元格，會居中加粗。
thead 標簽：表格的頭部區域（注意和 th 區分，范圍是比 th 要大的）
today 標簽：表格得到主體區域。

table 包含 tr，tr 包含 td 或者 th

表格標簽有一些屬性可以用于設置大小邊框等，但是一般使用 CSS 方式來設置。
這些屬性都要放到 table 標簽中：

align 是表格相對于周圍元素的對齊方式。align="center"（不是內部元素的對齊方式）
border ：表示邊框。1 表示有邊框（數字越大，邊框越粗），"" 表示沒邊框。
cellpadding：內容距離邊框的距離，默認 1 像素。
cellspacing：單元格之間的距離，默認為 2 像素。
width/height：設置尺寸。
注意這幾個屬性，vscode 都提示不出來。

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"height="500"><tr><td>姓名</td><td>性別</td><td>年齡</td></tr><tr><td>張三</td><td>男</td><td>10</td></tr><tr><td>李四</td><td>女</td><td>11</td></tr>
</table>

合并單元格

可以使用 colspan 屬性來合并列，使用 rowspan 屬性來合并行。

<table><tr><th colspan="2">合并兩列的表頭</th></tr><tr><td rowspan="2">合并兩行的單元格</td><td>數據1</td></tr><tr><td>數據2</td></tr>
</table>

步驟：

先確定跨行還是跨列。
找好目標單元格（合并列，左側是目標單元格；合并行，上方是目標單元格）。
刪除的多余的單元格。

2.9 列表標簽

列表標簽用于創建有序列表（<ol>）和無序列表（<ul>）。列表項用 <li> 標簽定義。
主要使用來布局的，整齊好看。

無序列表[重要]ul li。
有序列表[用的不多]ol li。
自定義列表[重要]dl 總標簽 dt 小標題 dd 圍繞標題來說明，上面有幾個小標題，下面有幾個圍繞著標題來展開。
自定義列表（參考小米官網下方）

注意：

元素之間的是并列關系。
ul/ol 中只能放 li 不能放其他標簽，dl 中只能放 dt 和 dd。
li 中可以放其他標簽。
列表帶有自己的樣式，可以使用 CSS 來修改。（例如前面的小圓點都會去掉）

無序列表 (`ul`)

<ul><li>項目1</li><li>項目2</li><li>項目3</li>
</ul>

有序列表 (`ol`)

<ol><li>第一項</li><li>第二項</li><li>第三項</li>
</ol>

自定義列表（`dl`）

<dl><dt>我的老婆們</dt><dd>咬人貓</dd><dd>兔總裁</dd><dd>阿葉君</dd>
</dl>

請添加圖片描述

2.10 表單標簽

表單標簽用于創建交互式的用戶輸入界面。通過表單，用戶可以輸入數據，提交給服務器處理。
分成兩個部分：

表單域：包含表單元素的區域。重點是 form 標簽。
表單控件：輸入框，提交按鈕等。重點是 input 標簽。

`form` 標簽

<form> 標簽用于創建一個表單。

<form action="/submit" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name"><input type="submit" value="提交">
</form>

描述了要把數據按照什么方式，提交到哪個頁面中。

關于 form 需要結合服務器 & 網絡編程來進一步理解，后面再詳細研究。

`input` 標簽

<input> 標簽用于定義表單控件，如文本框、按鈕、復選框等。

<input type="text" placeholder="請輸入姓名">
<input type="password" placeholder="請輸入密碼">
<input type="checkbox"> 同意條款
<input type="radio"> 男
<input type="radio"> 女

type（必須有），取值種類有很多，button 、checkbox、text、file、image、password、radio 等。
name：給 input 起了個名字，尤其對于單選按鈕，具有相同的 name 才能多選一。
value：input 中的默認值。
checked：默認被選中，（用于單選按鈕和多選按鈕）。
maxlength：設定最大長度。

（1）文本框

<input type="text">

（2）密碼框

<input type="password">

（3）單選框

性別：
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

注意：單選框之間必須具備相同的 name 屬性，才能實現多選一效果。

（4）復選框

愛好：
<input type="checkbox">吃飯
<input type="chechbox">睡覺
<input type="checkbox">打游戲

（5）普通按鈕

<input type="button" value="我是個按鈕">

當點擊了沒反應，需要搭配 JavaScript 使用（后面會重點研究）

（6）提交按鈕

<form action="test.html"><input type="text" name="username"><input type="submit" value="提交">
</form>

提交按鈕必須放到 form 標簽內，點擊后就會嘗試給服務器發送。

（7）清空按鈕

<form action="test.html"><input type="text" name="username"><input type="submit" value="提交"><input type="reset" value="清空">
</form>

清空按鈕必須放在 form 中，點擊后會將 form 內所有用戶輸入內容重置。

（8）選擇文件

<input type="fiel">

點擊選擇文件，會彈出對話框，選擇文件

`label` 標簽

<label> 標簽用于定義表單控件的標簽，增強表單可訪問性。
搭配 input 使用，點擊 lable 也能選中對應的單選/復選框，能夠提升用戶體驗。

for 屬性：指定當前 label 和哪個相同 id 的 input 標簽對應。（此時點擊才是有用的）

<label for="username">用戶名：</label>
<input type="text" id="username" name="user">

`select` 標簽

<select> 標簽用于創建下拉列表。

option 中定義 select="selected"表示默認選中

<select><option value="1">選項1</option><option value="2">選項2</option><option value="3" selected="selected">選項3</option>
</select>

注意！如果不設置默認第一個為默認選項

`textarea` 標簽

<textarea> 標簽用于創建多行文本框，適用于輸入較長的文本。

文本域中的內容，就是默認內容，注意，空格也會有影響。
rows 和 cols 也都不會直接使用，都是用 CSS 來改的。

<textarea rows="4" cols="50">請輸入內容...</textarea>

2.11 無語義標簽：`div` 和 `span`

<div>：用于將網頁內容分組，是一個無語義的塊級元素，通常用于布局和樣式調整。
<span>：是一個無語義的行內元素，常用于對部分文本進行樣式設置。

這里簡單說明：塊級元素會獨占一行，行內元素不會。

div 和 span 示例：

<div><p>這是一個段落。</p><span>這是行內元素。</span>
</div>

三、HTML 特殊字符

有些特殊的字符在 html 文件中是不能直接表示的，例如：
空格： 
小于號：<
大于號：>
按位與：&

html 標簽就是用 < > 表示的，因此如果內容中如果存在 < >，就會發生混淆
其他的特殊參考字符可以參考HTML特殊字符編碼對照表

總結

如果看完這篇文章對 html 仍然想要更加深度學習

使用 HTML 構建 Web - 學習 Web 開發 | MDN
HTML（超文本標記語言） | MDN]