-
<iframe></iframe>框架标签
<iframe> 表示一个框架,在html文件中开辟一个区域，可以单独显示另一个html文件【html文件中嵌套另一个html文件】
| src="URL" | 另一个html文件访问路径 |
| height/width | 定义iframe标签的高度与宽度，可以使用百分比数字。 |
| frameborder | 用于定义iframe表示是否显示边框。【默认有边框，{0/1 yes/no}】 |
| name="if的名字" | 作为这个iframe内嵌页面的window对象名，同时也是提供链接的target |
例：代码👇
<body>
<ul>
<li>
<a href="./demo/index.html" target="myiframe">首页</a>
</li>
<li>
<a href="./demo/home.html" target="myiframe">个人中心也</a>
</li>
<li>
<a href="./demo/constrol.html" target="myiframe">管理中心</a>
</li>
</ul>
<iframe src="./demo/index.html"width="500px" height="200px"
frameborder="1" name="myiframe"></iframe>
</body>例：图解👇
2.div标签
<div></div>---在html中开辟一块空白表区域，可以包含其他的html元素显示，因此<div>是一个容器元素，与css结合使用可以制作页面布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div</title>
</head>
<body>
<div style="width: 500px;height: 400px;background-color: red;" >
<h4>标题标记</h4>
<p>段落标记</p>
<img src="imgs/avatar2.png" alt="">
</div>
</body>
</html>3.span标签
<span>---没有实际的含义，与css一起可以改变某一端文本内容中的一部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>span</title>
</head>
<body>
<h4>我是<span style="color: red;font-size: 30px;">中国人</span>，
<span style="color: yellow;font-size: 30px;">黄皮肤</span>，黑头发。</h4>
</body>
</html>
3.HTML 字符实体
字符实体----特殊符号，在html中有一些特殊的符号与文字结合就成一个html标记，在显示的时候这些特殊符号不会显示，而是被解释成一个标记，如果我们需要显示出这个特殊符号就要使用字符实体
| 显示结果 | 描述 | 实体名称 | 实体编号 |
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | '(IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 人民币/日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | &trade | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
5.HTML 表单
<form>---表示一个表单
表单作用：采集用户信息，发送给后端处理程序处理
action----设置后端处理程序访问地址【后端开发者提供的访问接口】
method----设置表单信息的提交方式。
取值1:GET----将表单信息跟随在后端处理程序访问地址的后面明码发送。
GET有数据量限制255个字符
文件上传时不使用GET方式
例如:login?username=zhangsan&password=123456
取值2:POST----将表单信息封装在http协议中提交给后端处理程序，用户看不见。
POST没有数据量限制
文件上传时使用POST方式enctype---规定在将表单数据发送到后台处理程序之前如何对其进行编码
application/x-www-form-urlencoded
默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）。
multipart/form-data
不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain
将空格转换为 "+" 符号，但不编码特殊字符。
注意:文件上传时使用POST方式，且设置enctype为multipart/form-data,包含<input name="wenjiankuang" type="file"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="login" method="POST">
用户名:<input type="text" name="username"/><br>
密码:<input type="password" name="password"/><br>
<input type="submit" value="登陆"/>
</form>
</body>
</html>6.表单元素
| 名称 | 表现形式 | 注意事项 |
| 文本框 | <input type="text" /> |
|
| 密码框 | <input type="password" /> |
|
| 单选按钮 | <input type="radio" name= "sex"value = '0'>男 <input type="radio" name= "sex"value = '1'>女 |
有多个单选按钮时，为了保证每次只能选一个，要求name属性值要相同 checked表示默认被选中 |
| 复选框 | <input type="checkbox" name="checkbox" value="shuxue" checked="checked" />数学 <input type="checkbox" name="checkbox" value="yingyu"/>英语 |
有多个复选框时,要求name属性值要相同 checked表示默认被选中 |
| 时间日期选择框[html5] | <input type="date" name="date"> | name属性后端处理程序得到时间日期选择框选中值的名称 |
| 颜色框[html5] | <input name="yansekuang" type="color"/> | name属性后端处理程序得到颜色框选中值的名称 |
| 邮箱[html5] | <input name="youxiang" type="email" /> | 提交时会被进行校验 |
| 网址[html5] | <input name="wangzhi" type="url"/> | 提交时会被进行校验 |
| 隐藏域 | <input name="yingcang" type="hidden" value="java"/> | 无 |
| 文件选择框 | <input name="wenjian" type="file"/> | 无 |
| 表单提交按钮 | <input type="submit" value="表单提交按钮" /> | 无 |
| 表单重置按钮 | <input name="chongzhi" type="reset" value="表单重置按钮"/> | value表示的是按钮上显示的文本值 |
| 普通按钮 | <input name="putong" type="button" value="普通按钮"/> | value表示的是按钮上显示的文本值 |
| 下拉列表 | <select name="xialaleibiao"> <option value="sx">陕西</option> <option value="gs">甘肃</option> <option value="sc">四川</option> <option value="hb">河北省</option> </select> | option：下拉列表中的每一项 value：提交给后台处理程序的数据值
标签中的文本给用户看例如 “陕西”给用户看的 |
| 文本域 | <textarea cols="32" rows="5"></textarea> | cols--列数设置宽度,rows--行数设置高度（输入超过大小空间之后自带滚动条） 制作富文本编辑器 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单元素</title>
</head>
<body>
<form action="login" method="GET">
<table border="1px" width="100%">
<tr align="center">
<td>名称</td><td>表现形式</td><td>注意事项</td>
</tr>
<tr align="center">
<td colspan="3">input类型的表单元素</td>
</tr>
<tr align="center">
<td>文本框</td>
<td><input type="text" name="wenbenkuang" value="默认值"></td>
<td>
name属性后端处理程序得到文本框输入值的名称<br>
value属性表示默认值
</td>
</tr>
<tr align="center">
<td>密码框</td>
<td><input type="password" name="password" value="默认值"></td>
<td>
name属性后端处理程序得到>密码框输入值的名称<br>
value属性表示默认值
</td>
</tr>
<tr align="center">
<td>单选按钮</td>
<td>
<input type="radio" name="radio" value="nan" checked="checked">男
<input type="radio" name="radio" value="nv">女
</td>
<td>
name属性后端处理程序得到单选按钮选中值的名称<br>
value属性提交给后端处理程序的具体值<br>
"男"/"女"是提供给用户方便用户知自己所选的内容<br>
有多个单选按钮时，为了保证每次只能选一个，要求name属性值要相同<br>
checked表示默认被选中
</td>
</tr>
<tr align="center">
<td>复选框</td>
<td>
<input type="checkbox" name="checkbox" value="yuwen" checked="checked">语文
<input type="checkbox" name="checkbox" value="shuxue">数学
<input type="checkbox" name="checkbox" value="yingyu">英语
<input type="checkbox" name="checkbox" value="tiyu">体育
</td>
<td>
name属性后端处理程序得到复选框选中值的名称<br>
value属性提交给后端处理程序的具体值<br>
"数学"/"英语"是提供给用户方便用户知自己所选的内容<br>
有多个复选框时,要求name属性值要相同<br>
checked表示默认被选中
</td>
</tr>
<tr align="center">
<td>时间日期选择框[html5]</td>
<td>
<input type="date" name="date"><br>
<input type="time" name="time"><br>
<input type="datetime-local" name="datetimelocal">
</td>
<td>
name属性后端处理程序得到时间日期选择框选中值的名称<br>
</td>
</tr>
<tr align="center">
<td>颜色框[html5]</td>
<td>
<input name="yansekuang" type="color"/>
</td>
<td>
name属性后端处理程序得到颜色框选中值的名称<br>
</td>
</tr>
<tr align="center">
<td>邮箱[html5]</td>
<td>
<input type="email" name="youxiang" />
</td>
<td>
提交时会被进行校验
</td>
</tr>
<tr align="center">
<td>网址[html5]</td>
<td>
<input type="url" name="wangzhi" />
</td>
<td>
提交时会被进行校验
</td>
</tr>
<tr align="center">
<td>隐藏域</td>
<td>
<input name="yingcang" type="hidden" value="java"/>
</td>
<td>
</td>
</tr>
<tr align="center">
<td>文件选择框</td>
<td>
<input name="wenjiankuang" type="file"/>
</td>
<td></td>
</tr>
<tr align="center">
<td>表单提交按钮</td>
<td>
<input type="submit" value="表单提交按钮" />
</td>
<td></td>
</tr>
<tr align="center">
<td>表单重置按钮</td>
<td>
<input name="chongzhi" type="reset" value="表单重置按钮"/>
</td>
<td>
value表示的是按钮上显示的文本值
</td>
</tr>
<tr align="center">
<td>普通按钮</td>
<td>
<input name="putong" type="button" value="普通按钮"/>
</td>
<td>
value表示的是按钮上显示的文本值
</td>
</tr>
<tr align="center">
<td colspan="3"非input类型的表单元素</td>
</tr>
<tr align="center">
<td>下拉列表</td>
<td>
<select name="xialaleibiao">
<option value="sx">陕西省</option>
<option value="gs">甘肃省</option>
<option value="sc">四川省</option>
<option value="hb">河北省</option>
</select>
</td>
<td>
option--下拉列表中的每一项<br>
value表示提交给后台处理程序的数据值<br>
“陕西省”给用户看的
</td>
</tr>
<tr align="center">
<td>文本域</td>
<td>
<textarea cols="32" rows="5"></textarea>
</td>
<td>
cols--列数设置宽度,rows--行数设置高度<br>
输入超过大小空间之后自带滚动条<br>
制作富文本编辑器
</td>
</tr>
</table>
</form>
</body>
</html>例图👇
无奈源于不够强大
拾荒人⚪
2427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
