一、💻計算機基礎
🌟艾倫·麥席森·圖靈🌟 ?? 二戰時期，破譯了德軍的戰爭編碼——英格瑪。 🕊? 讓二戰提前2年結束，拯救了上千萬人的生命。 🏆 設立圖靈獎，被后人譽為："人工智能之父"。
💻約翰·馮·諾依曼💻 🔧 制訂了現代計算機標準——馮諾依曼體系結構。 📜 提出：計算機要采用二進制、明確計算機組成部分。 🏆 被后人譽為："現代計算機之父"。
1.分類
| 類別 | 項目/內容 |
|---|---|
| 🛠? 硬件 | 中央處理器 (CPU): 負責處理計算機中的各種指令和數據。 |
| 存儲器 | |
| - 📀 內存: 暫時性存儲，讀寫速度快。容量有4GB、8GB、16GB、32GB等。 | |
| - 🕸? 硬盤: 持久化存儲，容量較大，如512GB、1TB、2TB等（1024GB = 1TB）。 | |
| 輸入設備 | |
| - 🔑 鍵盤: 用于輸入文本和命令。 | |
| - 🖱? 鼠標: 用于控制光標和進行選擇操作。 | |
| 輸出設備 | |
| - 🎧 音箱: 輸出音頻信息。 | |
| - 🖥? 顯示器: 顯示圖像和文字信息。 | |
| 📚 軟件 | 系統軟件 |
| - 🪟 Windows | |
| - 🐧 Linux | |
| - 🍏 Mac | |
| - 🌀 Harmony | |
| 應用軟件 | |
| - 🎮 嗶哩嗶哩: 視頻平臺 | |
| - 💬 微信: 社交通訊工具 | |
| - 📸 美圖秀秀: 圖像編輯軟件 | |
| - 🎬 騰訊視頻: 視頻播放平臺 |
2.👨?💻應用軟件架構
| 類別 | 子類別 | 項目/內容 |
|---|---|---|
| 📚 應用軟件 | C/S 架構 | - 🎮 嗶哩嗶哩 - 💬 微信 - 📸 美圖秀秀 - 🎬 騰訊視頻 |
| 特點: ? 🔧 需要安裝 ? ? 偶爾更新 ? 🖥? 不跨平臺 | ||
| B/S 架構 | - 🕹? 英雄聯盟 - 🎨 After Effects - 🚀 航天相關 - 🛡? 軍事相關 | |
| 特點: ? ? 無需安裝 ? ? 無需更新 ? 🌐 可跨平臺 | ||
| 說明: 大型專業應用、安全性要求較高的應用，還要采用C/S架構 | ||
| 📚: 應用軟件 C/S: Client/Server（客戶端/服務器） B/S: Browser/Server（瀏覽器/服務器） |
3.🌍瀏覽器內核
| 瀏覽器 | 內核 | 備注 |
|---|---|---|
| 🌐 Chrome | 🔧 Blink | - 早期使用WebKit內核，現在使用Blink內核。 |
| 🍏 Safari | 🔧 WebKit | - 使用WebKit內核。 |
| 📱 IE | 🔧 Trident | - 使用Trident內核。 |
| 🦊 Firefox | 🔧 Gecko | - 使用Gecko內核。 |
| 🎭 Opera | 🔧 Blink | - 早期使用Presto內核（已放棄維護），現在使用Blink內核。 |
🛠? 常用快捷鍵
Ctrl + Shift + K：刪除當前行
Shift + Alt + ↑ / ↓：向上/向下復制當前行
鼠標滾輪 + 移動鼠標 或 Alt + 鼠標點擊： 選中某一列并修改該列內容。 不動鼠標時可按 ↑ / ↓ 移動光標。
📐 HTML 標簽使用規范：
h1 到 h6 標簽 不能嵌套使用
p 標簽中 不允許出現 h 標簽 p 標簽中 不允許出現 div 標簽
ol（有序列表）和 ul（無序列表）可以互相嵌套使用
?? 屬性簡寫規則 如果 屬性名 和 屬性值 相同，可以簡寫為只寫屬性名。
示例：<input required required> 可以簡寫為 <input required>
二、🐟語義化標簽
📌 HTML 標簽語義化原則 核心思想：
標簽的默認效果不重要（可以通過 CSS 修改）。 標簽的語義最重要（體現內容結構和含義）。 📝 舉例說明：
h1標簽：
默認效果：文字很大 ? ? 不重要 語義：網頁的主要標題 ? ? 非常重要
優勢:
| 優勢點 | 說明 |
|---|---|
| ? 代碼結構清晰、可讀性強 | 使用語義化標簽可以讓開發者更容易理解頁面結構。 |
| 🔍 有利于 SEO（搜索引擎優化） | 搜索引擎能更好地理解頁面內容，提升搜索排名。 |
| 📱 方便設備解析 | 如屏幕閱讀器、盲人閱讀器等輔助設備能更準確地解析內容，提升無障礙訪問體驗。 |
三、🟦塊級元素和行內元素
📚 HTML 元素分類與嵌套規則
| 類型 | 特點 | 示例 |
|---|---|---|
| 📘 塊級元素 | 獨占一行，通常用于構建頁面結構 | <div>, <p>, <h1>~<h6>, <ul>, <ol> 等 |
| 📘 行內元素 | 不獨占一行，用于頁面內的小內容展示 | <input>, <span>, <a>, <strong>, <em> 等 |
?? 嵌套使用規則
| 規則編號 | 嵌套說明 | 示例（?合法 / ?非法） |
|---|---|---|
| Rule 1 | ? 塊級元素中可以包含行內元素和塊級元素 | <div><p><input></p></div> ? |
| Rule 2 | ? 行內元素中不能包含塊級元素 | <span><div>非法</div></span> ? |
| Rule 3 | ? <h1> ~ <h6> 標簽之間不能互相嵌套 | <h1><h2>標題</h2></h1> ? |
| Rule 4 | ? <p> 標簽中不要寫塊級元素 | <p><div>不推薦</div></p> ? |
🧠 小結
塊級元素：能包“一切”（塊+行內），常用于布局。
行內元素：只能包行內，不能放塊級，適合包裹文字、鏈接等。
特殊限制：
h1~h6 不能互相嵌套。
<p> 標簽中不要放入塊級元素。
四、📓文本標簽
| 分類 | 說明 |
|---|---|
| 📌 用途 | 用于包裹 詞匯、短語 等小段文字內容 |
| 📁 使用位置 | 通常寫在 排版標簽（如 <p>、<div>、<h1>~<h6>）里面 |
| 📐 內容粒度 | 相比排版標簽更微觀： ? 排版標簽：大段文字（宏觀） ? 文本標簽：詞匯短語（微觀） |
| 🏷? 元素類型 | 大多數是 行內元素，不會獨占一行 |
? 總結一句話： 排版標簽負責整體結構，文本標簽聚焦細節內容；文本標簽通常是行內元素，適合包裹詞匯和短語。
📚 常用文本標簽
| 標簽名 | 標簽語義 | 單/雙標簽 |
|---|---|---|
| em | 📖 要著重閱讀的內容 | 雙 |
| strong | ?? 十分重要的內容（語氣比em要強） | 雙 |
| span | 📦 沒有語義，用于包裹短語的通用容器 | 雙 |
📝 生活中的例子 📦 大包裝袋: div 📦 小包裝袋: span
📚 不常用的文本標簽
| 標簽名 | 標簽語義 | 單/雙標簽 |
|---|---|---|
| cite | 📖 作品標題（書籍、歌曲、電影、電視節目、繪畫、雕塑） | 雙 |
| dfn | 🔍 特殊術語，或專屬名詞 | 雙 |
| del & ins | ? 刪除的文本 【與】 ? 插入的文本 | 雙 |
| sub & sup | ?? 下標文字 【與】 ?? 上標文字 | 雙 |
| code | 💻 一段代碼 | 雙 |
| samp | 📝 從正常的上下文中，將某些內容提取出來，例如：標識設備輸出 | 雙 |
| kbd | ?? 鍵盤文本，表示文本是通過鍵盤輸入的，經常用在與計算機相關的手冊中 | 雙 |
| abbr | 📏 縮寫，最好配合上 title 屬性 | 雙 |
| bdo | 🔄 更改文本方向，要配合 dir 屬性，可選值: ltr（默認值）、rtl | 雙 |
| var | 🟩 標記變量，可以與 code 標簽一起使用 | 雙 |
| small | 📑 附屬細則，例如：包括版權、法律文本。--- 很少使用 | 雙 |
| b | 🗞? 摘要中的關鍵字、評論中的產品名稱。--- 很少使用 | 雙 |
| i | 🤔 本意是：人物的思想活動、所說的話等等。 現在多用于：呈現字體圖標（后面要講的內容）。 | 雙 |
| u | ? 與正常內容有反差文本，例如：錯的單詞、不合適的描述等。--- 很少使用 | 雙 |
| q | 📢 短引用 --- 很少使用 | 雙 |
| blockquote | 📄 長引用 --- 很少使用 | 雙 |
| address | 📍 地址信息 | 雙 |
📝 備注
-
這些不常用的文本標簽，編碼時不用過于糾結（酌情而定，不用也沒毛病）。
-
blockquote與address是塊級元素，其他的文本標簽，都是行內元素。 -
有些語義感不強的標簽，我們很少使用，例如：
small，b，u，q，blockquote
-
HTML標簽太多了！記住那些：重要的、語義感強的標簽即可；截止目前，有這些：
h1~h6，p，div，em，strong，span
五、🧩圖片標簽
5.1圖片標簽
| 標簽名 | 標簽語義 | 常用屬性 | 單/雙標簽 |
|---|---|---|---|
| img | 🖼? 圖片 | - src: 圖片路徑（又稱：圖片地址）--- 圖片的具體位置 - alt: 圖片描述 - width: 圖片寬度，單位是像素，例如: 200px 或 200 - height: 圖片高度，單位是像素，例如: 200px 或 200 | 單 |
📝 總結
-
單位說明：
-
📏 像素 (
px) 是一種單位，學到 CSS 時，我們會詳細講解。
-
-
修改建議：
-
?? 盡量不同時修改圖片的寬和高，可能會造成比例失調。
-
-
元素分類：
-
📐 暫且認為
img是行內元素（學到 CSS 時，會認識一個新的元素分類，目前咱們只知道：塊、行內）。
-
-
alt屬性的作用：-
🔍 搜索引擎通過
alt屬性，得知圖片的內容。--- 最主要的作用。 -
🖥? 當圖片無法展示時候，有些瀏覽器會呈現
alt屬性的值。 -
🎧 盲人閱讀器會朗讀
alt屬性的值。
-
📚 5.2 路徑的分類
1.相對路徑 定義：以當前位置作為參考點，去建立路徑。
| 符號 | 含義 |
|---|---|
./ | 同級 |
/ | 下一級 |
../ | 上一級 |
2.絕對路徑 定義：以根位置作為參考點，去建立路徑。
| 類型 | 示例 | 說明 |
|---|---|---|
| 本地絕對路徑 | E:/a/a.jpg | 很少使用 |
| 網絡絕對路徑 | http://www.atguigu.com/images/index_new/logo.png |
注意點：
使用本地絕對路徑，一旦更換設備，路徑處理起來比較麻煩，所以很少使用。 使用網絡絕對路徑，確實方便，但要注意：若服務器開啟了防盜鏈，會造成圖片引入失敗。
📝 總結
| 路徑類型 | 定義 | 示例 | 特點與注意事項 |
|---|---|---|---|
| 相對路徑 | 以當前位置作為參考點 | ./, /, ../ | - ./ 可省略 - 文件位置變動需修改路徑 |
| 絕對路徑 | 以根位置作為參考點 | 本地、網絡絕對路徑 | - 本地路徑少用 - 網絡路徑需注意防盜鏈 |
📚 5.3圖片格式概述與特點
| 格式 | 擴展名 | 概述 | 主要特點 | 使用場景 |
|---|---|---|---|---|
| jpg | .jpg 或 .jpeg | 是一種有損的壓縮格式（把肉眼不容易觀察出來的細節丟棄了）。 | - 支持的顏色豐富 - 占用空間較小 - 不支持透明背景 - 不支持動態圖 | 對圖片細節沒有極高要求的場景，例如：網站的產品宣傳圖等。--- 該格式網頁中很常見。 |
| png | .png | 是一種無損的壓縮格式，能夠更高質量的保存圖片。 | - 支持的顏色豐富 - 占用空間略大 - 支持透明背景 - 不支持動態圖 | 想讓圖片有透明背景；想更高質量的呈現圖片；例如：公司logo圖、重要配圖等。 |
| bmp | .bmp | 不進行壓縮的一種格式，在最大程度上保留圖片更多的細節。 | - 支持的顏色豐富 - 保留的細節更多 - 占用空間極大 - 不支持透明背景 - 不支持動態圖 | 對圖片細節要求極高的場景，例如：一些大型游戲中的圖片。（網頁中很少使用） |
| gif | .gif | 僅支持256種顏色，色彩呈現不是很完整。 | - 支持的顏色較少 - 支持簡單透明背景 - 支持動態圖 | 網頁中的動態圖片。 |
| webp | .webp | 谷歌推出的一種格式，專門用來在網頁中呈現圖片。 | - 兼具上述幾種格式的優點 - 兼容性不太好，需解決兼容性問題 | 網頁中的各種圖片。 |
| base64 | N/A | 一串特殊的文本，要通過瀏覽器打開，傳統看圖應用通常無法打開。 | - 把圖片進行 base64 編碼，形成一串文本 - 直接作為 img 標簽的 src 屬性值 - 不受文件位置影響 | 一些較小的圖片，或者需要和網頁一起加載的圖片。 |
📝 總結
-
jpg 格式：適用于對圖片細節沒有極高要求的場景，如網站產品宣傳圖，因其占用空間小且顏色豐富。
-
png 格式：適用于需要透明背景或高質量圖片的場景，如公司logo和重要配圖，雖然占用空間略大但支持透明背景。
-
bmp 格式：適用于對圖片細節要求極高的場景，如大型游戲中的圖片，盡管占用空間極大但能保留更多細節。
-
gif 格式：適用于網頁中的動態圖片，支持簡單透明背景和動態圖，但色彩呈現有限。
-
webp 格式：適用于網頁中的各種圖片，具備多種優點但兼容性需注意，webp支持動態圖。
-
base64 格式：適用于一些較小的圖片或需要與網頁一起加載的圖片，不受文件位置影響。
六、🔗超鏈接
1. 跳轉到頁面
標簽屬性
| 標簽名 | 標簽語義 | 常用屬性 | 單/雙標簽 |
|---|---|---|---|
a | 超鏈接 | href | 雙 |
-
href: 要跳轉的具體位置。 -
target: 跳轉時如何打開頁面，常用值如下：-
_self: 在本頁簽中打開。 -
_blank: 在新頁簽中打開。
-
示例代碼
<!-- 跳轉到其他網頁 -->
<a href="https://www.jd.com/" target="_blank">🔗 去京東</a>
?
<!-- 跳轉到本地網頁 -->
<a href="./10_HTML排版標簽.html" target="_self">🔗 去看排版標簽</a>注意點
-
代碼中的多個空格、多個回車，都會被瀏覽器解析成一個空格！
-
雖然
a是行內元素，但a元素可以包裹除它自身外的任何元素！
2. 跳轉到文件
示例代碼
<!-- 瀏覽器能直接打開的文件 -->
<a href="./resource/自拍.jpg">📸 看自拍</a>
<a href="./resource/小電影.mp4">🎬 看小電影</a>
<a href="./resource/小姐姐.gif">👩 看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">💰 點我一夜暴富</a>
?
<!-- 瀏覽器不能打開的文件，會自動觸發下載 -->
<a href="./resource/內部資源.zip">📦 內部資源</a>
?
<!-- 強制觸發下載 -->
<a href="./resource/小電影.mp4" download="電影片段.mp4">🔽 下載電影</a>??注意點
-
若瀏覽器無法打開文件，則會引導用戶下載。
-
若想強制觸發下載，請使用
download屬性，屬性值即為下載文件的名稱。
3. 喚起指定應用
示例代碼
<!-- 喚起設備撥號 -->
<a href="tel:10010">📞 電話聯系</a>
?
<!-- 喚起設備發送郵件 -->
<a href="mailto:10010@qq.com">?? 郵件聯系</a>
?
<!-- 喚起設備發送短信 -->
<a href="sms:10086">💬 短信聯系</a>??注意點
-
通過
a標簽，可以喚起設備應用程序。
📓總結
-
<a>標簽主要用于創建超鏈接，實現頁面跳轉、文件下載和喚起設備應用等功能。 -
href屬性指定鏈接的目標位置，target屬性控制鏈接的打開方式。 -
download屬性可以強制觸發文件下載。 -
通過特定協議（如
tel:、mailto:、sms:）可以喚起設備應用。
七、列表
列表類型
| 類型 | 標簽 | 描述 |
|---|---|---|
| 有序列表 | <ol> | 有順序或側重順序的列表 |
| 無序列表 | <ul> | 無順序或不側重順序的列表 |
| 自定義列表 | <dl> | 包含術語名稱及術語描述的列表 |
1. 有序列表 (<ol>)
有序列表是有順序或側重順序的列表。
示例代碼
<h2>🔢 要把大象放冰箱總共分幾步</h2>
<ol><li>🚪 把冰箱門打開</li><li>🐘 把大象放進去</li><li>🔒 把冰箱門關上</li>
</ol>2. 無序列表 (<ul>)
無序列表是無順序或不側重順序的列表。
示例代碼
<h2>🌆 我想去的幾個城市</h2>
<ul><li>成都</li><li>上海</li><li>西安</li><li>武漢</li>
</ul>3. 列表嵌套
列表中的某項內容，又包含一個列表。
示例代碼
<h2>🗺? 我想去的幾個城市</h2>
<ul><li>成都</li><li><span>上海</span><ul><li>外灘</li><li>杜莎夫人蠟像館</li><li><a href="https://www.opg.cn/">東方明珠</a></li><li>迪士尼樂園</li></ul></li><li>西安</li><li>武漢</li>
</ul>??注意點
-
<li>標簽最好寫在ul或ol中，不要單獨使用。
4. 自定義列表 (<dl>)
自定義列表是一個包含術語名稱以及術語描述的列表。
示例代碼
<h2>📚 如何高效的學習？</h2>
<dl><dt>做好筆記</dt><dd>筆記是我們以后復習的一個抓手</dd><dd>筆記可以是電子版，也可以是紙質版</dd><dt>多加練習</dt><dd>只有敲出來的代碼，才是自己的</dd><dt>別怕出錯</dt><dd>錯很正常，改正后并記住，就是經驗</dd>
</dl>📓總結
-
HTML 提供了三種主要的列表類型：有序列表、無序列表和自定義列表。
-
使用
<ol>創建有序列表，使用<ul>創建無序列表，使用<dl>創建自定義列表。 -
列表可以嵌套使用，增強列表的層次感和組織性。
-
自定義列表適合用于術語和描述的展示。
八、表格
表格基本結構 🏗?
一個完整的表格由以下四部分組成：
-
表格標題 (
<caption>) 📑 -
表格頭部 (
<thead>) 👤 -
表格主體 (
<tbody>) 👥 -
表格腳注 (
<tfoot>) 👣
示例代碼 💻
<table><caption>📊 學生信息</caption><thead><tr><th>姓名</th><th>性別</th><th>年齡</th><th>民族</th><th>政治面貌</th></tr></thead><tbody><tr><td>張三</td><td>男</td><td>18</td><td>漢族</td><td>團員</td></tr><tr><td>李四</td><td>女</td><td>20</td><td>滿族</td><td>群眾</td></tr><tr><td>王五</td><td>男</td><td>19</td><td>回族</td><td>黨員</td></tr><tr><td>趙六</td><td>女</td><td>21</td><td>壯族</td><td>團員</td></tr></tbody><tfoot><tr><td colspan="5">共計：4人</td></tr></tfoot>
</table>表格涉及的標簽 🏷?
| 標簽名 | 標簽語義 | 常用屬性 | 單/雙標簽 |
|---|---|---|---|
table | 表格 | width, height, border, cellspacing | 雙 |
caption | 表格標題 | 雙 | |
thead | 表格頭部 | height, align, valign | 雙 |
tbody | 表格主體 | 常用屬性與 thead 相同 | 雙 |
tfoot | 表格腳注 | 常用屬性與 thead 相同 | 雙 |
tr | 行 | 常用屬性與 thead 相同 | 雙 |
th | 表頭單元格 | width, height, align, valign, rowspan, colspan | 雙 |
td | 普通單元格 | width, height, align, valign, rowspan, colspan | 雙 |
常用屬性 🎨
| 標簽名 | 標簽語義 | 常用屬性 | 單/雙標簽 |
|---|---|---|---|
table | 表格 | width, height, border, cellspacing | 雙 |
thead | 表格頭部 | height, align, valign | 雙 |
示例代碼 💻
<table width="100%" border="1" cellspacing="0"><thead><tr align="center" valign="middle"><th>姓名</th><th>性別</th><th>年齡</th><th>民族</th><th>政治面貌</th></tr></thead><tbody><tr><td>張三</td><td>男</td><td>18</td><td>漢族</td><td>團員</td></tr><!-- 更多行 --></tbody>
</table>常用標簽補充 🔖
| 標簽名 | 標簽含義 | 單/雙標簽 |
|---|---|---|
br | 換行 | 單 |
hr | 分隔 | 單 |
pre | 按原文顯示（一般用于在頁面中嵌入大段代碼） | 雙 |
注意點 ??
1.不要用 <br> 來增加文本之間的行間隔，應使用 CSS margin 屬性。
2.<hr> 的語義是分隔，如果不想要語義，只是想畫一條水平線，那么應當使用 CSS 完成。
總結 📝
-
HTML 表格由標題、頭部、主體和腳注四部分組成。
-
使用
<table>,<caption>,<thead>,<tbody>,<tfoot>,<tr>,<th>,<td>等標簽創建表格。 -
表格的樣式和布局可以通過 CSS 控制。
-
常用標簽如
<br>,<hr>,<pre>用于頁面布局和文本顯示。
九、表單
1. 基本結構 🏗?
表單 (<form>) 📋
-
action: 指定表單提交地址（與后端人員溝通確定）。
-
target: 控制表單提交后如何打開頁面，常用值：
-
_self: 在本窗口打開。 -
_blank: 在新窗口打開。
-
-
method: 控制表單的提交方式，暫時只需了解，在后續 Ajax 課程中會詳細講解。
輸入框 (<input>) ??
-
type: 設置輸入框的類型，常用值
text表示普通文本。 -
name: 指定提交數據的名字（需與后端人員溝通后確定）。
按鈕 (<button>) 🔘
-
本小節暫不涉及。
2. 常用表單控件 🛠?
文本輸入框 📄
<input type="text">-
name: 數據的名稱。
-
value: 輸入框的默認輸入值。
-
maxlength: 輸入框最大可輸入長度。
密碼輸入框 🔐
<input type="password">-
name: 數據的名稱。
-
value: 輸入框的默認輸入值（一般不用，無意義）。
-
maxlength: 輸入框最大可輸入長度。
單選框 📍
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男-
name: 數據的名稱，多個 radio 的 name 屬性值要保持一致。
-
value: 提交的數據值。
-
checked: 默認選中。
復選框 📌
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男-
name: 數據的名稱。
-
value: 提交的數據值。
-
checked: 默認選中。
隱藏域 🙈
<input type="hidden" name="tag" value="100">-
用戶不可見的輸入區域，用于提交表單時攜帶一些固定數據。
提交按鈕 🔔
<input type="submit" value="點我提交表單">
<button>點我提交表單</button>-
注意：
-
button標簽type屬性的默認值是submit。 -
button不要指定name屬性。 -
input標簽編寫的按鈕，使用value屬性指定按鈕文字。
-
重置按鈕 🔄
<input type="reset" value="點我重置">
<button type="reset">點我重置</button>-
注意：
-
button不要指定name屬性。 -
input標簽編寫的按鈕，使用value屬性指定按鈕文字。
-
普通按鈕 🔘
<input type="button" value="普通按鈕">
<button type="button">普通按鈕</button>-
注意：普通按鈕的
type值為button，若不寫type值是submit會引起表單的提交。
文本域 📝
<textarea name="msg" rows="22" cols="3">我是文本域</textarea>-
rows: 指定默認顯示的行數，影響文本域的高度。
-
cols: 指定默認顯示的列數，影響文本域的寬度。
下拉框 📊
<select name="from"><option value="黑">黑龍江</option><option value="瓊">海南</option><option value="粵">廣東</option><option value="桂" selected>廣西</option>
</select>-
name: 指定數據的名稱。
-
option value: 提交的數據值，如果沒有
value屬性，提交的數據是option中間的文字；如果設置了value屬性，提交的數據就是value的值（建議設置value屬性）。 -
option selected: 默認選中。
3. 禁用表單控件 🚫
給表單控件的標簽設置 disabled 即可禁用表單控件。
<input disabled>
<textarea disabled></textarea>
<button disabled></button>
<select disabled></select>4. label 標簽 🏷?
label 標簽可與表單控件相關聯，關聯之后點擊文字，與之對應的表單控件就會獲取焦點。
<label for="zhanghu">用戶名：</label>
<input id="zhanghu" type="text" name="account" maxlength="20">-
for: 與表單控件的
id相對應。 -
注意：把表單控件套在
label標簽的里面。
5. fieldset 與 legend 的使用 📚
fieldset 可以為表單控件分組，legend 標簽是分組的標題。
<fieldset><legend>個人信息</legend><label for="zhanghu">用戶名：</label><input id="zhanghu" type="text" name="account" maxlength="10"><br><label for="mima">密碼：</label><input id="mima" type="password" name="pwd" maxlength="6"><br><label>性別：</label><input type="radio" name="gender" value="male" id="nan">男<input type="radio" name="gender" value="female" id="nv">女
</fieldset>總結 📚
-
表單控件用于收集用戶輸入的數據。
-
使用
<input>,<textarea>,<select>,<button>等標簽創建表單控件。 -
表單控件的樣式和布局可以通過 CSS 控制。
-
label標簽用于增強表單控件的可訪問性。 -
fieldset和legend用于對表單控件進行分組。
Win+v打開歷史剪切板
🖼? 十、框架標簽 <iframe>
📌 功能與語義
-
功能：
-
<iframe>是 HTML 中的 內聯框架標簽，用于在當前網頁中嵌入另一個網頁或其他資源文件。 -
可以用來展示廣告、視頻、地圖、外部頁面等內容。
-
-
語義說明：
-
英文全稱：inline frame，即“內聯框架”。
-
屬于雙標簽，必須有開始和結束標簽（或使用自閉合寫法）。
-
?? 常用屬性
| 屬性名 | 說明 |
|---|---|
src | 設置要嵌入的頁面地址（必填項）。 |
name | 定義框架名稱，常與超鏈接的 target 屬性配合使用。 |
width | 設置框架寬度（可為像素值或百分比）。 |
height | 設置框架高度（可為像素值或百分比）。 |
frameborder | 是否顯示邊框，取值為 0（無邊框）或 1（有邊框）。 |
? 推薦使用
frameborder="0"來去除默認邊框，提升美觀性。
💡 實際應用場景
1. 嵌入廣告
-
將廣告代碼或廣告頁面通過
<iframe>引入到網頁中。
2. 與超鏈接或表單的 target 配合
-
利用
name和target屬性實現在指定框架中加載新內容。 -
示例：
<a href="demo02.html" target="frame">點擊打開</a> <iframe name="frame"></iframe>
🧪 示例代碼
<iframe src="https://demo.com" width="400" height="300" frameborder="0">
</iframe>🌐 此代碼將在網頁中嵌入一個寬度為 600px、高度為 400px 的網頁窗口，并隱藏邊框。
? 總結一句話：
<iframe>標簽是網頁中實現內容嵌套展示的重要工具，廣泛應用于廣告展示、跨域內容引入、模塊化布局等場景。
十一、HTML 實體🌐
🔍 什么是 HTML 實體？
-
定義：
-
在 HTML 中，某些字符具有特殊含義（如
<、>、&等），不能直接在代碼中使用。 -
如果想顯示這些特殊字符，必須使用一種特殊的表示方式，這種表示方式就是 HTML 實體（HTML Entity）。
-
-
使用場景：
-
當你想讓瀏覽器正確顯示某些特殊符號時（例如小于號、版權符號等），就要使用 HTML 實體。
-
-
組成結構：
-
以
&開頭 -
接實體名稱（如
lt表示小于號）或#+ 數字編號（如<） -
以分號;結尾
? 示例：
-
命名實體：
< -
數字實體：
<
-
-
📚 常見 HTML 實體對照表
| 描述 | 實體名稱 | 實體編號 | 示例展示 |
|---|---|---|---|
| 空格 | |||
| 小于號 | < | < | < |
| 大于號 | > | > | > |
| 和號 / 與符號 | & | & | & |
| 雙引號 | " | " | " |
| 反引號 / 撇號 | ′ | ′ | ′ |
| 分（cent） | ￠ | ￠ | ￠ |
| 英鎊（pound） | ￡ | ￡ | ￡ |
| 日元 / 人民幣（yen） | ￥ | ￥ | ￥ |
| 歐元（euro） | € | € | € |
| 版權符號 | ? | ? | ? |
| 注冊商標 | ? | ? | ? |
| 商標 / 未注冊商標 | ? | ? | ? |
| 乘號 | × | × | × |
| 除號 | ÷ | ÷ | ÷ |
💡 小貼士：
-
使用命名實體更便于記憶，如
<。 -
使用數字實體更通用，適用于沒有命名的字符，如
€。 -
實體對大小寫敏感，請注意書寫格式是否正確。
十二、全局屬性
📚 常用的全局屬性
| 屬性名 | 含義 |
|---|---|
| id | 🔍 給標簽指定唯一標識，注意：id 是不能重復的。 🌟 作用：可以讓 label 標簽與表單控件相關聯；也可以與 CSS、JavaScript 配合使用。 ?? 注意：不能在以下 HTML 元素中使用： <head>、<html>、<meta>、<script>、<style>、<title>。 |
| class | 🏷? 給標簽指定類名，隨后通過 CSS 就可以給標簽設置樣式。 |
| style | 🎨 給標簽設置 CSS 樣式。 |
| dir | ???? 內容的方向，值: ltr、rtl。 ?? 注意：不能在以下 HTML 元素中使用： <head>、<html>、<meta>、<script>、<style>、<title>。 |
| title | 💬 給標簽設置一個文字提示，一般超鏈接和圖片用得比較多。 |
| lang | 🌐 給標簽指定語言，具體規范和可選值請參考【10. HTML 設置語言】。 ?? 注意：不能在以下 HTML 元素中使用： <head>、<html>、<meta>、<script>、<style>、<title>。 |
十三、了解meta
🧾 <meta> 標簽常用功能歸納
| 功能 | 代碼示例 | 說明 |
|---|---|---|
| 🔤 配置字符編碼 | <meta charset="utf-8"> | 設置網頁使用 UTF-8 編碼格式，避免亂碼。 |
| 🖥? IE 瀏覽器兼容性配置 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | 讓 IE 瀏覽器以最高版本（Edge 模式）運行。 |
| 📱 移動端適配配置 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | 適配移動端設備，控制視口寬度和縮放比例。 |
| 🔑 配置網頁關鍵字 | <meta name="keywords" content="關鍵詞1,關鍵詞2,...（8-12個）"> | 幫助搜索引擎識別網頁主題關鍵詞。 |
| 📝 配置網頁描述信息 | <meta name="description" content="簡短描述（建議80字以內）"> | 提供給搜索引擎作為搜索結果中的摘要顯示。 |
| 🕵??♂? 控制搜索引擎爬蟲行為 | <meta name="robots" content="index,follow"> | 控制是否允許搜索引擎索引頁面或跟隨鏈接。 常見值：index, noindex, follow, nofollow, all, none, noarchive, nocache |
| 👤 配置網頁作者信息 | <meta name="author" content="tony"> | 標注網頁開發者或作者名稱。 |
| 🛠? 配置網頁生成工具 | <meta name="generator" content="Visual Studio Code"> | 表明網頁使用的開發工具。 |
| ? 配置網頁版權信息 | <meta name="copyright" content="2023-2027?版權所有"> | 標注網頁的版權歸屬信息。 |
| ? 配置網頁自動刷新 | <meta http-equiv="refresh" content="10;url=http://www.baidu.com"> | 頁面在10秒后自動跳轉到指定網址。 |
💡 常見 robots 屬性值說明
| 值 | 含義 |
|---|---|
index | 允許搜索引擎索引該頁面 |
noindex | 不允許搜索引擎索引該頁面 |
follow | 允許搜索引擎跟隨頁面上的鏈接 |
nofollow | 不允許搜索引擎跟隨頁面上的鏈接 |
all | 等同于 index, follow |
none | 等同于 noindex, nofollow |
noarchive | 不允許搜索引擎緩存該頁面內容 |
nocache | 同 noarchive，用于舊版瀏覽器兼容 |
? 總結一句話：
<meta>標簽雖然不直接顯示在網頁上，但對 SEO、瀏覽器兼容性、移動端適配等都非常重要，是 HTML 文檔中不可或缺的一部分。
)
