当前位置：首页 > article >正文

HTML Day04

article 2025/6/3 14:43:33

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> 

浏览器总是会截短 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 or m >$ 标签用于收集用户输入数据并提交给服务器。
$< l ab e l >$ 标签用于为表单控件（如输入框、复选框等）添加描述文本，提高表单的可访问性和用户体验。（点击标签时，自动聚焦或选中对应的控件（如输入框、复选框）。）
$< in p u t >$ 用于创建各种用户输入字段。
$< se l ec t >$ 用于创建下拉菜单或列表框，让用户从预定义的选项中选择一个或多个值。
$< o pt i o n >$ 用于定义 $< se l ec t > 、 < o pt g ro u p >$ 中的选项。是下拉菜单的基本单元。

2.1 表单标签

📍📍📍

表单标签

标签描述属性
$< f or m >$ 定义表单，收集用户输入数据并提交给服务器。 action，method，name，enctype，target，autocomplete
$< in p u t >$ 用于创建各种用户输入字段。 type，name，id，value，placeholder，required，disabled，readonly，autocomplete
$< t e x t a re a >$ 多行文本输入框 name, rows, cols, placeholder, required, disabled, readonly, maxlength
$< l ab e l >$ 用于为表单控件（如输入框、复选框等）添加描述文本，提高表单的可访问性和用户体验 for(必需有，绑定控件id),form
$< f i e l d se t >$ 将表单元素分组显示 disabled, form, name
$< l e g e n d >$ 为 $< f i e l d se t >$ 定义标题 disabled, form, name
$< se l ec t >$ 用于创建下拉菜单或列表框 name，id，mutiple，size，disabled，required
$< o pt g ro u p >$ 对 $< se l ec t >$ 中的选项进行分组 label, disabled
$< o pt i o n >$ 用于定义 $< se l ec t > 、 < o pt g ro u p >$ 中的选项。是下拉菜单的基本单元。 value（表单提交时的实际值（若未指定，则使用选项文本）），selected（默认选项）,disabled(禁用选项)
$< b u tt o n >$ 可点击按钮 type (submit/reset/button), disabled, form, formaction, formenctype, formmethod
$< d a t a l i s t >$ 为 $< in p u t >$ 提供预定义选项列表（自动完成）无
$< k ey g e n >$ 生成密钥对 name, challenge, keytype, disabled
$< o u tp u t >$ 显示计算或表单提交的结果 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 >$ 标签要链接外部网页的时候，必须连接到iframe，这样才能将外部
网页在iframe框架内显示。而连接iframe的就是iframe的name（记号）。

效果预览：

没有点击跳转链接：

点击跳转链接：

4. HTML颜色

🔲概述： HTML 颜色由红色、绿色、蓝色混合而成。有两种表达颜色的方法，16进制表达法和rgba表达法以及名称表达法。

4.1 16进制表示法

16进制表示法：#xxxxxx
#FF0000表示纯红色。#00FF00表示纯绿色。#0000FF表示纯蓝色。每个颜色都在0~FF之间调节。每种颜色有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 代码，用于实现动态交互、数据处理或修改页面内容。当浏览器解析到 $< scr i pt >$ 标签时会立即执行脚本。
脚本标签就是 $< scr i pt >$ 。因为还没学JavaScript，因此知道概述即可。

JavaScript：HTML 默认支持的脚本语言，用于增强网页的交互性和功能性。
脚本位置：可放在 $< h e a d > 、 < b o d y >$ 或外部文件中。
执行时机：浏览器解析到 $< scr i pt >$ 标签时会立即执行（除非设置了 defer 或 async）。

符号	描述	实体名称	实体编号
空格	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`'` (IE不支持)	`'`
¢	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

标签	描述	属性
$< f or m >$	定义表单，收集用户输入数据并提交给服务器。	action，method，name，enctype，target，autocomplete
$< in p u t >$	用于创建各种用户输入字段。	type，name，id，value，placeholder，required，disabled，readonly，autocomplete
$< t e x t a re a >$	多行文本输入框	name, rows, cols, placeholder, required, disabled, readonly, maxlength
$< l ab e l >$	用于为表单控件（如输入框、复选框等）添加描述文本，提高表单的可访问性和用户体验	for(必需有，绑定控件id),form
$< f i e l d se t >$	将表单元素分组显示	disabled, form, name
$< l e g e n d >$	为 $< f i e l d se t >$ 定义标题	disabled, form, name
$< se l ec t >$	用于创建下拉菜单或列表框	name，id，mutiple，size，disabled，required
$< o pt g ro u p >$	对 $< se l ec t >$ 中的选项进行分组	label, disabled
$< o pt i o n >$	用于定义 $< se l ec t > 、 < o pt g ro u p >$ 中的选项。是下拉菜单的基本单元。	value（表单提交时的实际值（若未指定，则使用选项文本）），selected（默认选项）,disabled(禁用选项)
$< b u tt o n >$	可点击按钮	type (submit/reset/button), disabled, form, formaction, formenctype, formmethod
$< d a t a l i s t >$	为 $< in p u t >$ 提供预定义选项列表（自动完成）	无
$< k ey g e n >$	生成密钥对	name, challenge, keytype, disabled
$< o u tp u t >$	显示计算或表单提交的结果	for, form, name

符号	描述	实体名称	实体编号
空格	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`'` (IE不支持)	`'`
¢	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

Day04

0.引言

1. HTML字符实体

2. HTML表单

2.1 表单标签

2.2 表单示例

3. HTML框架

4. HTML颜色

4.2 rgba表示法

5. HTML脚本

相关文章：

符号	描述	实体名称	实体编号
空格	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`'` (IE不支持)	`'`
¢	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`