本文詳細介紹HTML零基礎快速入門的基礎知識，包括HTML的介紹、語言的一些實際作用、語法規范注意，如標簽結構、標簽屬性、大小寫不敏感等，還介紹了HTML文件的具體書寫規則，如文件擴展名、文檔類型聲明和HTML結構以及具體的一些HTML標簽示例，標題、段落、列表、圖片、超鏈接、表格等等
本文目錄
- 1. HTML 編程語言介紹
- 1.1 基本定義
- 1.2 發展歷程
- 2. HTML 編程語言作用
- 2.1 網頁結構搭建
- 2.2 內容展示
- 2.3 頁面導航
- 3. HTML 編程語言語法規范
- 3.1 標簽結構
- 3.2 標簽屬性
- 3.3 大小寫不敏感
- 4. HTML 文件書寫規則
- 4.1 文件擴展名
- 4.2 文檔類型聲明
- 4.3 HTML 結構
- 5. HTML 常用標簽
- 5.1 標題標簽
- 5.2 段落標簽
- 5.3 列表標簽
- 5.4 圖片標簽
- 5.5 鏈接標簽
- 5.6 表格標簽
1. HTML 編程語言介紹
1.1 基本定義
HTML即超文本標記語言，它不是一種編程語言，而是一種用于創建網頁的標記語言。它通過各種標簽（tag）來描述網頁的結構和內容。
1.2 發展歷程
HTML 自誕生以來經歷了多個版本的發展，如 HTML 2.0、HTML 3.2、HTML 4.01，直至現在廣泛使用的 HTML5。HTML5 引入了許多新的特性和功能，增強了網頁的多媒體處理能力和交互性。
2. HTML 編程語言作用
2.1 網頁結構搭建
HTML 用于定義網頁的基本結構，如標題、段落、列表、鏈接、圖片等元素的位置和層次關系。在一些電商系統中，可用于構建商品列表頁、商品詳情頁、購物車頁等頁面的框架。
2.2 內容展示
將文本、圖片、視頻等各種形式的內容整合到網頁中，為用戶提供豐富的信息。例如在電商系統中展示商品的名稱、價格、圖片、描述等信息。
2.3 頁面導航
通過超鏈接（<a> 標簽）實現頁面之間的跳轉，方便用戶在不同頁面之間進行瀏覽。在電商系統中，用戶可以通過導航欄中的鏈接快速切換到不同的商品分類頁面或功能頁面。
3. HTML 編程語言語法規范
3.1 標簽結構
HTML 標簽通常由尖括號包圍，分為開始標簽和結束標簽，如 <p> 是段落的開始標簽，</p> 是段落的結束標簽。有些標簽是單標簽，如 <img>、<br> 等，不需要結束標簽。
3.2 標簽屬性
標簽可以包含屬性，用于提供關于標簽的額外信息。屬性通常以鍵值對的形式出現，如 <img src="product.jpg" alt="商品圖片"> 中，src 和 alt 是屬性，"product.jpg" 和 "商品圖片" 分別是它們的值。
3.3 大小寫不敏感
HTML 標簽和屬性名不區分大小寫，但建議使用小寫，以符合代碼規范和提高可讀性。
4. HTML 文件書寫規則
4.1 文件擴展名
HTML 文件的擴展名通常為 .html 或 .htm。
4.2 文檔類型聲明
每個 HTML 文件都應該以文檔類型聲明（DOCTYPE）開頭，用于告訴瀏覽器當前文檔使用的 HTML 版本。HTML5 的文檔類型聲明為 <!DOCTYPE html>。
4.3 HTML 結構
HTML 文件由 <html> 標簽包裹，內部包含 <head> 和 <body> 標簽。<head> 標簽用于包含頁面的元數據，如標題、字符編碼、引入的外部文件等；<body> 標簽用于包含頁面的可見內容。
5. HTML 常用標簽
5.1 標題標簽
使用 <h1> - <h6> 標簽定義不同級別的標題，<h1> 表示最高級別的標題，<h6> 表示最低級別的標題。在商品詳情頁中，可使用 <h1> 標簽顯示商品名稱。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>商品詳情</title>
</head><body><h1>智能手機</h1><p>這是一款高性能的智能手機。</p>
</body></html>
5.2 段落標簽
使用 <p> 標簽定義段落，用于展示文本內容。可使用 <p> 標簽描述商品的特點、功能等信息。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>商品詳情</title>
</head><body><h1>智能手機</h1><p>該手機采用了先進的處理器，性能強勁。</p><p>擁有高清屏幕，顯示效果出色。</p>
</body></html>
5.3 列表標簽
- 無序列表：使用
<ul>標簽和<li>標簽創建無序列表，常用于展示商品的特點、優勢等信息。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>商品詳情</title>
</head><body><h1>智能手機</h1><ul><li>高性能處理器</li><li>高清屏幕</li><li>大容量電池</li></ul>
</body></html>
- 有序列表：使用
<ol>標簽和<li>標簽創建有序列表，可用于展示商品的使用步驟、排名等信息。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>商品使用步驟</title>
</head><body><h1>智能手機使用步驟</h1><ol><li>開機</li><li>設置網絡連接</li><li>安裝應用程序</li></ol>
</body></html>
5.4 圖片標簽
使用 <img> 標簽插入圖片，通過 src 屬性指定圖片的路徑，alt 屬性提供圖片的替代文本，當圖片無法加載時顯示。用于展示商品的圖片。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>商品詳情</title>
</head><body><h1>智能手機</h1><img src="smartphone.jpg" alt="智能手機圖片"><p>這是一款高性能的智能手機。</p>
</body></html>
5.5 鏈接標簽
使用 <a> 標簽創建超鏈接，通過 href 屬性指定鏈接的目標地址。可用于導航欄、商品推薦等地方，實現頁面之間的跳轉。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>電商首頁</title>
</head><body><h1>歡迎來到電商平臺</h1><nav><a href="products.html">商品列表</a><a href="cart.html">購物車</a><a href="account.html">個人中心</a></nav>
</body></html>
5.6 表格標簽
使用 <table>、<tr>、<th> 和 <td> 標簽創建表格，用于展示結構化的數據。可用于展示商品的規格參數、價格比較等信息。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>商品規格參數</title>
</head><body><h1>智能手機規格參數</h1><table><tr><th>參數</th><th>詳情</th></tr><tr><td>處理器</td><td>驍龍 8 Gen 2</td></tr><tr><td>屏幕尺寸</td><td>6.7 英寸</td></tr><tr><td>電池容量</td><td>5000mAh</td></tr></table>
</body></html>
| ← 上一篇 AngularJS知識快速入門（上） | 記得點贊、關注、收藏哦！ | 下一篇 Ajax——在OA系統提升性能的局部刷新 → |
)
