Day04
- 0.引言
- 1. HTML字符實體
- 2. HTML表單
- 2.1 表單標簽
- 2.2 表單示例
- 3. HTML框架
- 4. HTML顏色
- 4.1 16進制表示法
- 4.2 rgba表示法
- 4.3 名稱表達法
- 5. HTML腳本
0.引言
????剛剛回顧了前面幾篇博客，感覺寫的內容倒是很詳細，每個知識點都做了說明。但是感覺在知識組織結構上很混亂，應該按照同一個流程順序來寫，更加邏輯清楚。從這次開始，將會更加注重組織結構。
內容清單：
1. HTML字符實體?
2. HTML表單?
3. HTML框架?
4. HTML顏色?
5. HTML腳本?
1. HTML字符實體
🔲概述： HTML 中，預留字符（Reserved Characters）是指那些被瀏覽器解釋為 HTML 語法一部分的特殊符號。比如想要 > , < >,< >,<這兩個符號，但是瀏覽器會將其解讀為HTML語法導致無法正確表達意思。所以需要用字符實體來代替這些字符。
示例：
<p>5 < 10 是正確的</p> <!-- 瀏覽器會嘗試解析 "< 10" 為標簽，導致錯誤 -->
瀏覽器總是會截短 HTML 頁面中的空格。如果您在文本中寫 10 個空格，在顯示該頁面之前，瀏覽器會刪除它們中的 9 個。
如需在頁面中增加空格的數量，您需要使用 字符實體。
| 符號 | 描述 | 實體名稱 | 實體編號 |
|---|---|---|---|
| 空格 | 空格 | |   |
| < | 小于號 | < | < |
| > | 大于號 | > | > |
| & | 和號 | & | & |
| " | 引號 | " | " |
| ’ | 撇號 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| ￡ | 鎊 | £ | £ |
| ￥ | 人民幣/日元 | ¥ | ¥ |
| € | 歐元 | € | € |
| § | 小節 | § | § |
| ? | 版權 | © | © |
| ? | 注冊商標 | ® | ® |
| ? | 商標 | ™ | ™ |
| × | 乘號 | × | × |
| ÷ | 除號 | ÷ | ÷ |
2. HTML表單
🔲概述： HTML 表單表示文檔中的一個區域，此區域包含交互控件（比如輸入框，選擇框，提交按鍵等），將用戶收集到的信息發送到 Web 服務器。
Part1：代碼及預覽
💻代碼（帶注釋）：
<body><h2>表單</h2><form action="/" method="post"> <!form元素用于創建表單，action屬性是指定表單提交的ULR,method屬性定義提交數據的HTTP方法><!-- 文本輸入框 --><label for="name">用戶名:</label> <!label標簽用于給表單添加標簽說明，表示這是什么表單><!for屬性用于把標簽和表單控件關聯起來。在這里點擊“用戶名”等價于點擊輸入框><input type="text" id="name" name="name" required> <!input用于創建輸入框，type屬性定義輸入框類型><!id屬性用于關聯label元素，在表單提交時，name 屬性作為數據的鍵（key），用戶輸入的值作為值（value），二者一起被發送到服務器。><!required屬性是防止用戶端沒有填寫，沒有填寫無法提交表單><br><!-- 密碼輸入框 --><label for="password">密碼:</label><input type="password" id="password" name="password" required> <!name屬性將會和input的輸入框內容一起作為一對鍵值對發送給瀏覽器，id是此標簽元素的錨點><br><!-- 單選按鈕 --><label>性別:</label><input type="radio" id="male" name="gender" value="male" checked> <!radio是單選框><label for="male">男</label> <!如上面所說，for屬性是關聯性屬性，和id=male的標簽關聯起來，點擊此label就等價于點擊id=male的標簽><input type="radio" id="female" name="gender" value="female"><label for="female">女</label><br><!-- 復選框 --><input type="checkbox" id="subscribe" name="subscribe" checked> <label for="subscribe">訂閱推送信息</label><br><!-- 下拉列表 --><label for="country">國家:</label><select id="country" name="country"><option value="cn">CN</option><option value="usa">USA</option><option value="uk">UK</option></select><br><!-- 提交按鈕 --><input type="submit" value="提交"> <!點擊提交后，會將表單數據發送服務器，通常是表單的 action 屬性指定的 URL></form>
</body>
🔍 效果預覽:
Part2：標簽說明
- < f o r m > <form> <form>標簽用于收集用戶輸入數據并提交給服務器。
- < l a b e l > <label> <label>標簽用于為表單控件（如輸入框、復選框等）添加描述文本，提高表單的可訪問性和用戶體驗。（點擊標簽時，自動聚焦或選中對應的控件（如輸入框、復選框）。）
- < i n p u t > <input> <input>用于創建各種用戶輸入字段。
- < s e l e c t > <select> <select>用于創建下拉菜單或列表框，讓用戶從預定義的選項中選擇一個或多個值。
- < o p t i o n > <option> <option>用于定義 < s e l e c t > 、 < o p t g r o u p > <select>、<optgroup> <select>、<optgroup> 中的選項。是下拉菜單的基本單元。
2.1 表單標簽
📍📍📍
| 標簽 | 描述 | 屬性 |
|---|---|---|
| < f o r m > <form> <form> | 定義表單，收集用戶輸入數據并提交給服務器。 | action，method，name，enctype，target，autocomplete |
| < i n p u t > <input> <input> | 用于創建各種用戶輸入字段。 | type，name，id，value，placeholder，required，disabled，readonly，autocomplete |
| < t e x t a r e a > <textarea> <textarea> | 多行文本輸入框 | name, rows, cols, placeholder, required, disabled, readonly, maxlength |
| < l a b e l > <label> <label> | 用于為表單控件（如輸入框、復選框等）添加描述文本，提高表單的可訪問性和用戶體驗 | for(必需有，綁定控件id),form |
| < f i e l d s e t > <fieldset> <fieldset> | 將表單元素分組顯示 | disabled, form, name |
| < l e g e n d > <legend> <legend> | 為 < f i e l d s e t > <fieldset> <fieldset> 定義標題 | disabled, form, name |
| < s e l e c t > <select> <select> | 用于創建下拉菜單或列表框 | name，id，mutiple，size，disabled，required |
| < o p t g r o u p > <optgroup> <optgroup> | 對 < s e l e c t > <select> <select> 中的選項進行分組 | label, disabled |
| < o p t i o n > <option> <option> | 用于定義 < s e l e c t > 、 < o p t g r o u p > <select>、<optgroup> <select>、<optgroup> 中的選項。是下拉菜單的基本單元。 | value（表單提交時的實際值（若未指定，則使用選項文本）），selected（默認選項）,disabled(禁用選項) |
| < b u t t o n > <button> <button> | 可點擊按鈕 | type (submit/reset/button), disabled, form, formaction, formenctype, formmethod |
| < d a t a l i s t > <datalist> <datalist> | 為 < i n p u t > <input> <input> 提供預定義選項列表（自動完成） | 無 |
| < k e y g e n > <keygen> <keygen> | 生成密鑰對 | name, challenge, keytype, disabled |
| < o u t p u t > <output> <output> | 顯示計算或表單提交的結果 | for, form, name |
??????
表單的標簽和元素很多，所以手寫一遍有個初步印象，實際上還是用到的時候再找。
2.2 表單示例
示例1：帶邊框的表單
💻代碼（帶注釋）：
<body><form action="demo-form.php" method="post"> <!action為空表示表單會提交到本頁面，如果不為空，將會把表單發送到指定URL，方法是post將會在挑戰頁面的URL隱藏表單信息，如果是get將會顯示信息并以?作為分隔符>
<fieldset> <!將表單元素分組顯示>
<legend>個人信息:</legend> <!為fieldset定義標題>
姓名: <input type="text" name="姓名" size="30"><br>
郵箱: <input type="text" name="郵箱" size="30"><br>
<input type="submit" value="提交">
</fieldset>
</form>
<p>點擊"提交"按鈕，表單數據將被發送到服務器上的“demo-form.php”。</p>
</body>
🔍 效果預覽:
看到method=post，URL上沒有顯示表單信息。
如果method=get，那么就會顯示信息。
示例2：發送郵件表單
💻代碼（帶注釋）：
<body>
<h3>發送郵件到 someone@example.com:</h3><form action="MAILTO:example@domain.com" method="post" enctype="text/plain"><!MAILTO:用戶填寫表單并點擊提交。瀏覽器不向服務器發送數據，而是調用用戶設備上的郵件客戶端（如 Outlook、QQ 郵箱 App）。
郵件客戶端自動創建一封新郵件，收件人設為 MAILTO: 后的郵箱（example@domain.com），并將表單數據填充到郵件正文中。
用戶在郵件客戶端中點擊 "發送"，郵件才會真正發出。><!post指的是 HTTP POST 方法，表單數據會包含在表單體內然后發送給服務器，用于提交敏感數據，如用戶名與密碼等><!enctype="text/plain"指定表單數據以純文本格式編碼，確保郵件內容可讀。>
<fieldset><legend>郵箱</legend>
Name:<br>
<input type="text" name="name" value="your name"><br> <!value 屬性用于定義按鈕上顯示的文本>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="發送"> <!點擊后觸發表單提交，調用郵件客戶端并填充表單數據>
<input type="reset" value="重置"> <!點擊后將所有輸入框重置為默認值>
</fieldset></form>
</body>
🔍 效果預覽:
3. HTML框架
🔲概述： HTML可以通過使用框架，在同一個瀏覽器窗口中顯示不止一個頁面。
示例代碼（帶注釋）：
<body><iframe src="demo_iframe.htm" name="iframe_a"></iframe> <!iframe是 HTML 中用于在當前頁面嵌入另一個網頁的標簽，這里初始化網頁demo_iframe.htm>
<p><a href="https://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p> <!當點擊runoob.com的時候，iframe的src將會被替換成a標簽元素的鏈接，并在框架內顯示><p><b>注意：</b> 因為 a 標簽的 target 屬性是名為 iframe_a 的 iframe 框架，所以在點擊鏈接時頁面會顯示在 iframe框架中。</p></body>代碼說明：
!iframe是 HTML 中用于在當前頁面嵌入另一個網頁的標簽。它的屬性src指定要嵌入的網頁 URL。
其內的屬性name是給iframe一個記號，當 < a > <a> <a>標簽要鏈接外部網頁的時候，必須連接到iframe，這樣才能將外部
網頁在iframe框架內顯示。而連接iframe的就是iframe的name（記號）。
效果預覽：
沒有點擊跳轉鏈接：
點擊跳轉鏈接：
4. HTML顏色
🔲概述： HTML 顏色由紅色、綠色、藍色混合而成。有兩種表達顏色的方法，16進制表達法和rgba表達法以及名稱表達法。
4.1 16進制表示法
16進制表示法：#xxxxxx
#FF0000表示純紅色。#00FF00表示純綠色。#0000FF表示純藍色。每個顏色都在0~FF之間調節。每種顏色有256種變化。所以一共有 256 ? 256 ? 256 256*256*256 256?256?256種顏色=1600萬種不同顏色
4.2 rgba表示法
🔴RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上擴展包括了 “alpha” 通道，運行對顏色值設置透明度。相對于使用 rgb(255,255,0)，使用 rgba(255,255,0,0.5) 可以實現設置顏色透明度的功能，這里的 0.5 表示透明度，范圍 0~1，0 表示全透明。
4.3 名稱表達法
顧名思義，就是對應顏色的名稱，和使用其它兩種方法的效果是一樣的。
5. HTML腳本
🔲概述： 腳本（Script）指的是嵌入在網頁中的JavaScript 代碼，用于實現動態交互、數據處理或修改頁面內容。當瀏覽器解析到 < s c r i p t > <script> <script> 標簽時會立即執行腳本。
腳本標簽就是 < s c r i p t > <script> <script>。因為還沒學JavaScript，因此知道概述即可。
- JavaScript：HTML 默認支持的腳本語言，用于增強網頁的交互性和功能性。
- 腳本位置：可放在 < h e a d > 、 < b o d y > <head>、<body> <head>、<body> 或外部文件中。
- 執行時機：瀏覽器解析到 < s c r i p t > <script> <script> 標簽時會立即執行（除非設置了 defer 或 async）。
)
)