ok,今天準備學一下html，花費點時間整理一下：
HTML標簽的語法格式
HTML 中的標簽就像關鍵字一樣，每個標簽都有自己的語義（含義）。
HTML 標簽的語法格式
屬性↓
<div class="begin">cyx</div>↑ ↑ ↑
開始標簽 內容 結束標簽- 所有 HTML 標簽都必須放在尖括號
< >內； - 如果使用了某個標簽，則必須使用對應的結束標簽來結尾（自閉合標簽除外）。
- 自閉合標簽：是在開始標簽中添加
/來進行閉合。
<img src="./logo.png" alt="C語言中文網Logo" /> <!-- 圖像 -->
<hr /> <!-- 分割線 -->
<br /> <!-- 文本換行 -->
<input type="text" placeholder="請輸入內容" /> <!-- 文本輸入框 -->屬性
屬性（Attribute）?是添加在 HTML 標簽內部的額外信息，用于定義標簽的特性、行為或配置，幫助瀏覽器理解如何解析和展示標簽內容，或實現特定功能。
屬性有專有屬性和自定義屬性兩種：
專有屬性：
<img src="./logo.png" alt="TEST_Logo" width="100" height="50">
<img> 標簽中的 src 屬性用來定義圖像的路徑，alt 屬性用來定義圖像的描述信息，當圖像出現異常無法正常顯示時就會顯示 alt 中的信息。
<a href="http://baidu.com/" target="_blank">百度</a>
<a> 標簽的 href 屬性用來定義鏈接的地址，target 屬性用來定義新頁面在瀏覽器中的打開方式。自定義屬性
????????除了自帶的屬性，HTML 也允許我們自定義屬性，這些屬性雖然可以被瀏覽器識別，但是并不會添加什么特殊效果，我們需要借助 CSS 和?JavaScript?處理自定義屬性，為 HTML 標簽添加指定樣式或者行為。
通用屬性
????????在 HTML 中，通用屬性（Global Attributes）?是一類幾乎所有 HTML 標簽都能使用的屬性 ，不局限于特定標簽，主要用于定義標簽的基礎特性（如標識、樣式、交互提示等），是構建網頁時最常用的屬性類別。
1.id
????????為標簽定義「唯一標識」（整個頁面內不能重復），常用于 JavaScript 精準操作單個標簽
2.class
????????為標簽定義「類名」，用于批量關聯 CSS 樣式（一個標簽可多個類名，用空格分隔）或 JavaScript 選擇器
3.title
????????鼠標懸浮在標簽上時顯示的「提示文本」，常用于補充說明（如鏈接用途、圖片含義）
4.style
????????直接在標簽內寫「行內 CSS 樣式」（優先級高于外部 CSS 和內部 CSS），用于快速設置單個標簽樣式
標題標簽
????????標題標簽（Heading Tags）?是用于定義網頁中不同層級標題的標簽，共分為 6 級，從最高級的?<h1>?到最低級的?<h6>
1.層級不可跳過：必須按?<h1>→<h2>→<h3>→…→<h6>?的順序使用，不能跳過中間層級（如?<h1>?后直接寫?<h3>）。跳過層級會破壞內容的邏輯關系，屏幕閱讀器用戶可能無法理解內容結構。
2.頁面內?<h1>?唯一：一個 HTML 頁面建議只包含 1 個?<h1>，用于概括頁面核心主題（如博客文章的標題、產品詳情頁的產品名）。若出現多個?<h1>，會讓搜索引擎無法判斷頁面重點，也會打亂內容結構。
3.可嵌套通用屬性：標題標簽支持所有 HTML 通用屬性（如?class、id、title?等），可用于關聯 CSS 樣式、JavaScript 操作或添加提示信息。
代碼：
<!DOCTYPE html>
<html>
<head><title>標題標簽示例 - 我的旅行博客</title><style>/* 自定義標題樣式（覆蓋默認樣式，不改變語義） */h1 { color: #2c3e50; font-size: 28px; margin-bottom: 10px; }h2 { color: #34495e; font-size: 24px; margin: 20px 0 10px; }h3 { color: #7f8c8d; font-size: 20px; margin: 15px 0 8px; }h4 { font-size: 18px; color: #95a5a6; }/* 通用樣式 */body { max-width: 800px; margin: 0 auto; padding: 20px; }p { color: #333; line-height: 1.6; }</style>
</head>
<body><!-- 1級標題：頁面核心主題（唯一） --><h1>我的云南大理5日旅行攻略</h1><!-- 2級標題：主要板塊 --><h2>1. 旅行準備清單</h2><p>出發前需準備身份證、防曬霜、薄外套（大理晝夜溫差大）...</p><!-- 3級標題：板塊內子分類 --><h3>1.1 必備物品</h3><p>證件類：身份證、學生證（部分景點有優惠）...</p><!-- 4級標題：子分類下的細分 --><h4>1.1.1 衣物建議</h4><p>白天可穿短袖，晚上需加薄外套，鞋子推薦運動鞋（方便徒步）...</p><!-- 2級標題：另一主要板塊 --><h2>2. 每日行程安排</h2><!-- 3級標題：子分類（每日行程） --><h3>2.1 第一天：抵達大理古城</h3><p>下午抵達大理站，乘坐公交到大理古城，晚上逛古城夜景...</p><!-- 5級標題：更細致的內容（如景點說明） --><h5>2.1.1 古城必吃美食</h5><p>推薦鮮花餅、烤乳扇、大理米線，可去古城人民路覓食...</p><!-- 6級標題：最底層說明性標題 --><h6>2.1.1.1 美食店推薦</h6><p>“大理粑粑店”：招牌粑粑外酥里嫩，人均10元...</p>
</body>
</html>注意：
- 不要用標題標簽包裹非標題內容（如段落文本、圖片），僅用于 “標題文本”；
- 避免為了追求視覺效果濫用標題標簽（如用?
<h1>?包裹所有大字體文本）； - 配合 SEO：搜索引擎會優先抓取?
<h1>?內容，合理設置?<h1>?和其他標題的關鍵詞，有助于提升頁面搜索排名。 - 結合無障礙訪問：標題層級清晰的頁面，屏幕閱讀器用戶可通過 “跳轉標題” 快速導航，提升體驗；
段落標簽
????????段落標簽（<p>?標簽）?是專門用于定義文本段落的標簽，核心作用是將網頁中的文本內容劃分成獨立、結構化的段落，讓頁面排版更清晰易讀。瀏覽器會自動為?<p>?標簽包裹的內容添加上下邊距（默認間距），并在段落結束后自動換行，無需手動添加換行符（如?<br>）。
注意：瀏覽器內置的樣式會在段落的上下自動添加一定的空白區域（外邊距），您可以使用?屬性來設置空白區域的大小。
1.嵌套文本格式化標簽（如加粗、斜體、鏈接）
| 嵌套標簽 | 作用 | 示例代碼 |
|---|---|---|
<strong> | 文本加粗（強調語義） | <p>大理古城的<span><strong>白族民居</strong></span>極具特色，多為“三坊一照壁”結構。</p> |
<em> | 文本斜體（強調語義） | <p>洱海湖水清澈，<em>能見度可達10米以上</em>，是云南第二大淡水湖。</p> |
<a> | 文本鏈接 | <p>想要了解更多大理旅游攻略，可訪問<a href="https://lyj.yunnan.gov.cn" target="_blank">云南省文化和旅游廳官網</a>。</p> |
<span> | 文本分組（用于樣式） | <p>大理最佳旅游季節是<span style="color: #2563eb;">3-5月</span>和<span style="color: #2563eb;">9-11月</span>，氣候最為舒適。</p> |
2.手動換行（<br>?標簽）
????????若段落內需要強制換行（如詩歌、地址等特殊格式），可在需要換行的位置插入?<br>?單標簽（注意：<br>?僅用于段落內換行，不能替代?<p>?劃分段落）：
<p>大理著名詩句：<br>
“下關風，上關花，<br>
蒼山雪，洱海月。”<br>
這四句詩概括了大理最具代表性的四大景觀。</p>3.段落中的空白符
????????默認情況下，段落標簽會對文本中的空白符進行合并，將多個連續的空白符顯示為一個空格的效果，具體表現為：
- 如果段落中出現多個連續的空格，瀏覽器會忽略這些空格只保留一個；
- 如果段落中出現多個連續的換行，瀏覽器會將這些換行轉換成一個空格。
文本格式化
????????文本格式化（Text Formatting）?是通過特定標簽對文本進行樣式或語義上的修飾，以突出重點、區分內容類型（如強調、引用、代碼）或優化閱讀體驗。
HTML 中有許多用來格式化文本的標簽，如下表所示：
一、語義化強調標簽（突出內容重要性）
這類標簽核心作用是傳遞「內容優先級 / 情感傾向」，不僅改變樣式，還能被搜索引擎和屏幕閱讀器識別，優先用于需要強調的核心信息。
| 標簽 | 語義與作用 | 默認樣式 | 適用場景 | 示例代碼與效果 |
|---|---|---|---|---|
<strong> | 強強調：表示「非常重要」的內容 | 粗體（bold） | 警告、關鍵數據、核心結論 | <p>旅行前務必攜帶<strong>身份證和護照</strong>，否則無法入住酒店。</p>效果：旅行前務必攜帶身份證和護照，否則無法入住酒店。 |
<em> | 弱強調：表示「需要突出」的內容 | 斜體（italic） | 觀點、語氣強調、重點描述 | <p>這款咖啡的口感<em>格外醇厚</em>，適合喜歡濃郁風味的人。</p>效果：這款咖啡的口感格外醇厚，適合喜歡濃郁風味的人。 |
二、基礎樣式修飾標簽（純視覺調整）
這類標簽僅控制文本視覺效果，無額外語義，適合純裝飾性需求（如標注縮寫、區分普通文本），建議優先用 CSS 控制樣式，僅在簡單場景使用。
| 標簽 | 語義與作用 | 默認樣式 | 適用場景 | 示例代碼與效果 |
|---|---|---|---|---|
<b> | 無語義：僅文本加粗 | 粗體（bold） | 標題內關鍵詞、分類標注 | <p>產品分類：<b>電子產品</b> > 手機</p>效果：產品分類：電子產品?> 手機 |
<i> | 弱語義：表示「特殊標識」（非強調） | 斜體（italic） | 外文單詞、符號、術語 | <p>縮寫 <i>etc.</i> 源自拉丁語 <i>et cetera</i>（意為“等等”）。</p>效果：縮寫?etc.?源自拉丁語?et cetera（意為 “等等”）。 |
<small> | 語義：表示「次要內容」 | 字體縮小（約 80%） | 版權信息、備注、補充說明 | ? <p>? 2025 我的網站 <small>保留所有權利隱私政策</small></p> |
<ins> | 語義：表示「新增 / 插入」的內容 | 下劃線 | 修訂文檔、補充內容 | <p>會議時間：<ins>本周六下午2點</ins>（原時間：周五下午）</p>效果：會議時間：<ins>本周六下午 2 點</ins>（原時間：周五下午） |
<del> | 語義：表示「刪除 / 廢棄」的內容 | 刪除線 | 價格修改、過時內容 | <p>原價：<del>299元</del> 現價：199元</p>效果：原價：<del>299 元</del> 現價：199 元 |
三、特殊位置文本標簽（上下標）
專門用于數學公式、化學符號、引用標注等需要「特殊位置排版」的場景，語義明確且樣式固定。
| 標簽 | 語義與作用 | 默認樣式 | 適用場景 | 示例代碼與效果 |
|---|---|---|---|---|
<sup> | 上標：文本向上偏移縮小 | 字體縮小 + 上移 | 數學冪次、引用編號 | <p>勾股定理：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>效果：勾股定理：a2 + b2 = c2 |
<sub> | 下標：文本向下偏移縮小 | 字體縮小 + 下移 | 化學公式、注釋編號 | <p>水的化學式：H<sub>2</sub>O；硫酸：H<sub>2</sub>SO<sub>4</sub></p>效果：水的化學式：H?O；硫酸：H?SO? |
四、代碼與技術文本標簽（程序員專用）
針對代碼、命令、變量等「技術類內容」設計，默認使用等寬字體（保證格式統一），語義精準，是技術文檔的核心標簽。
| 標簽 | 語義與作用 | 默認樣式 | 適用場景 | 示例代碼與效果 |
|---|---|---|---|---|
<code> | 單行代碼片段：變量、函數、語句 | 等寬字體 | 代碼關鍵詞、簡短命令 | <p>定義變量：<code>let username = "小明";</code></p>效果：定義變量： let username = "小明"; |
<pre> | 多行代碼 / 保留格式文本：代碼塊 | 等寬字體 + 保留空格 / 換行 | 代碼段、日志輸出 | <pre><code>function add(a, b) {<br> return a + b;<br>}</code></pre>效果：<pre><code>function add(a, b) { return a + b; }</code></pre> |
<kbd> | 表示「用戶輸入的鍵盤按鍵 / 命令」 | 等寬字體 + 淺背景 | 快捷鍵、終端命令 | <p>復制文本：按 <kbd>Ctrl + C</kbd>；粘貼：按 <kbd>Ctrl + V</kbd></p>效果：復制文本：按 <kbd>Ctrl + C</kbd>；粘貼：按 <kbd>Ctrl + V</kbd> |
<samp> | 表示「程序 / 系統的輸出結果」 | 等寬字體 | 日志、報錯信息、運行結果 | <p>程序輸出：<samp>歡迎使用系統！當前用戶：admin</samp></p>效果：程序輸出：<samp>歡迎使用系統！當前用戶：admin</samp> |
<var> | 表示「數學 / 公式中的變量」 | 斜體 + 等寬字體 | 公式變量、參數占位符 | <p>求根公式：對于方程 <var>ax</var><sup>2</sup> + <var>bx</var> + <var>c</var> = 0</p>效果：求根公式：對于方程 <var>ax</var>2 + <var>bx</var> + <var>c</var> = 0 |
五、引用與標注標簽（文獻 / 說明專用）
????????用于引用外部內容、標注來源或解釋術語，語義上明確 “內容歸屬”，幫助用戶區分 “原創” 與 “引用”。
| 標簽 | 語義與作用 | 默認樣式 | 適用場景 | 示例代碼與效果 |
|---|---|---|---|---|
<blockquote> | 長引用：段落級外部引用（如名言、文章片段） | 左右縮進 + 上下邊距 | 引用大段文本（≥1 段） | <blockquote cite="https://example.com/article">旅行的意義不在于目的地，而在于沿途的風景和看風景的心情。</blockquote>效果：<blockquote>旅行的意義不在于目的地，而在于沿途的風景和看風景的心情。</blockquote> |
<q> | 短引用：行內級外部引用（如句子內引用） | 自動添加雙引號 | 引用短句（≤1 句，嵌入段落） | <p>古人云：<q>讀萬卷書，行萬里路</q>，正是旅行與學習的結合。</p>效果：古人云：“讀萬卷書，行萬里路”，正是旅行與學習的結合。 |
<cite> | 標注「引用內容的來源」（如書名、作者） | 斜體 | 文獻來源、作品名稱 | <p>引用自 <cite>《人類簡史》</cite>（尤瓦爾·赫拉利 著）</p>效果：引用自 <cite>《人類簡史》</cite>（尤瓦爾?赫拉利 著） |
<abbr> | 標注「縮寫詞 / 簡稱」，鼠標懸浮顯示全稱 | 底部虛線（部分瀏覽器） | 專業術語、機構縮寫 | <p>我們常用 <abbr title="HyperText Markup Language">HTML</abbr> 構建網頁結構。</p>效果：我們常用 <abbr title="HyperText Markup Language">HTML</abbr> 構建網頁結構（鼠標懸浮顯示全稱） |
<dfn> | 定義「術語 / 概念」，表示 “此處是術語解釋” | 斜體（部分瀏覽器） | 技術術語、專業概念的首次定義 | <p><dfn>前端開發</dfn> 是指構建網頁用戶界面的開發工作，包括HTML、CSS、JavaScript。</p>效果：<dfn>前端開發</dfn> 是指構建網頁用戶界面的開發工作，包括 HTML、CSS、JavaScript。 |
六、特殊功能標簽（方向 / 聯系信息）
用于控制文本方向或標注聯系信息，場景較特殊但實用性強。
| 標簽 | 語義與作用 | 默認樣式 | 適用場景 | 示例代碼與效果 |
|---|---|---|---|---|
<address> | 標注「聯系信息」（如作者、機構地址） | 斜體 | 網頁底部作者信息、公司地址 | <address>作者：小明<br>郵箱：xiaoming@example.com<br>地址：北京市朝陽區</address>效果：<address>作者：小明 郵箱：xiaoming@example.com 地址：北京市朝陽區</address> |
<bdo> | 控制「文本顯示方向」（雙向文本） | 按方向反轉文本 | 阿拉伯語、希伯來語等從右到左的語言 | <p>默認方向：Hello World</p><p>反轉方向：<bdo dir="rtl">Hello World</bdo></p>效果：默認方向：Hello World 反轉方向：<bdo dir="rtl">Hello World</bdo> |
區別
????????<strong>和<b>標簽之間的區別
????????在 HTML 中，<strong>?和?<b>?標簽都能讓文本呈現 “加粗” 的視覺效果，但二者的語義（即標簽傳遞的含義）和使用場景有本質區別，這直接影響網頁的無障礙訪問、SEO 優化和內容邏輯。
| 維度 | <strong>?標簽 | <b>?標簽 |
|---|---|---|
| 核心定位 | 「語義化標簽」：傳遞 “內容重要性” | 「純樣式標簽」：僅控制 “視覺加粗”，無額外語義 |
| 瀏覽器 / 工具識別 | 屏幕閱讀器（無障礙工具）會用 “強調語氣” 朗讀，搜索引擎會標記為 “核心內容” | 僅改變外觀，屏幕閱讀器和搜索引擎不識別其特殊含義 |
| 本質目的 | 告訴用戶 / 機器：“這段內容很重要，需要重點關注” | 僅告訴瀏覽器：“把這段內容顯示成粗體”，不附加任何邏輯意義 |
????????<em>和<i>標記之間的區別
????????在 HTML 中，<em>?和?<i>?標簽都能讓文本呈現 “斜體” 的視覺效果，但二者的語義定位（傳遞的含義）和使用場景存在根本差異，直接影響內容邏輯、無障礙訪問和機器對頁面的理解。
| 維度 | <em>?標簽 | <i>?標簽 |
|---|---|---|
| 核心定位 | 「語義化強調標簽」：傳遞 “內容需要被強調” 的邏輯含義 | 「弱語義標識標簽」：標記 “特殊類型的文本”，無 “強調重要性” 的含義 |
| 瀏覽器 / 工具識別 | 屏幕閱讀器會用 “語氣加重、語速變化” 的方式朗讀，讓用戶感知 “這段內容需要重點關注” | 屏幕閱讀器按普通文本朗讀（部分會提示 “特殊標識文本”），搜索引擎僅識別為 “特殊類型文本”，不視為 “核心重點” |
| 本質目的 | 告訴用戶 / 機器：“這段內容在語境中有強調意義（如觀點、情感、邏輯重點）” | 告訴用戶 / 機器：“這段文本屬于特殊類型（如外文、術語、符號）”，僅做 “分類標識”，不附加 “重要性” |
超鏈接標簽<a>
????????超鏈接標簽（<a>?標簽，全稱 Anchor anchor，意為 “錨點”）?是實現頁面間跳轉、鏈接外部資源或定位頁面內錨點定位的核心標簽，通過它可將分散的內容（如網頁、圖片、文檔）關聯起來，是構成互聯網 “網狀結構” 的基礎。
<a> 標簽的語法格式如下：
<a href="url" target="opentype">鏈接文本</a>其中，href 屬性用來指明要跳轉到的 url，target 屬性用來指明新頁面的打開方式，鏈接文本需要寫在 <a> 和 </a> 之間。
1. 必選核心屬性：href
href（Hypertext Reference，超文本引用）用于指定鏈接的目標地址，取值分 4 類常見場景：
| 目標類型 | href?取值格式 | 示例代碼 |
|---|---|---|
| 外部網頁 | 完整 URL（需包含?http://?或?https://） | <a href="https://www.baidu.com" target="_blank">訪問百度</a> |
| 內部網頁 | 相對路徑（基于當前頁面的文件路徑） | <a href="about.html">關于我們</a>（同文件夾下的?about.html） |
| 頁面內錨點 | #錨點ID（需先在目標位置定義?id?屬性） | <a href="#section1">跳轉到第一部分</a>（目標位置：<div id="section1">...</div>） |
| 郵件 / 電話 | 特殊協議（mailto:?郵件 /tel:?電話） | <a href="mailto:service@example.com">發送郵件</a><a href="tel:10086">撥打10086</a> |
2. 常用可選屬性
| 屬性名 | 作用說明 | 取值與示例 |
|---|---|---|
target | 控制鏈接在 “哪個窗口 / 框架” 打開 | -?_self（默認）：在當前窗口打開-? _blank：在新窗口打開（推薦加?rel="noopener"?提升安全性）-? _parent：在父框架打開（框架頁場景）示例： <a href="https://github.com" target="_blank" rel="noopener">GitHub（新窗口）</a> |
rel | 定義當前頁面與目標頁面的 “關系”，提升安全性和語義 | -?noopener：防止新窗口通過?window.opener?操控原窗口（配合?target="_blank"?搭配，必加！）-? nofollow：告訴搜索引擎 “不傳遞當前頁面權重到目標頁面”（如外鏈廣告）示例： <a href="https://ad.example.com" rel="nofollow noopener" target="_blank">廣告鏈接</a> |
title | 鼠標懸浮在鏈接上時顯示 “提示文本” | <a href="products.html" title="查看所有商品分類">商品列表</a>（鼠標懸浮顯示 “查看所有商品分類”） |
download | 點擊鏈接時 “下載目標資源”（而非跳轉） | - 直接寫屬性：<a href="report.pdf" download>下載PDF報告</a>（默認用原文件名）- 指定新文件名： <a href="photo.jpg" download="我的照片.jpg">下載圖片</a>（下載后文件名變為 “我的照片.jpg”） |
簡單舉個例子：
test.html:
<a href="https://www.baidu.com" target="_blank">訪問百度</a>
<a href="about.html" target="_self" rel="noopener">關于我們</a>這里，當我們同級目錄有該文件時，打開網頁，點擊，就會跳轉到目標鏈接或文件。
插入圖片：<img>標簽
<img> 標簽的語法格式如下：
<img src="url" alt="text">對屬性的說明：
- src 是必選屬性，它是 source 的簡稱，用來指明圖片的地址或者路徑。src 支持多種圖片格式，比如 jpg、png、gif 等。src 可以使用相對路徑，也可以使用絕對路徑。
- alt 是可選屬性，用來定義圖片的文字描述信息。當由于某些原因（例如圖片路徑錯誤、網絡連接失敗）導致圖片無法加載時，就會顯示 alt 屬性中的信息。
==========暫時更到這，有空再更===========
參考網站:HTML入門教程（非常詳細） - C語言中文網
)
