HTML Day04
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）。
