1.HTML中的框架
<iframe>--表示一个框架，在html文件中开辟一个区域，可以单独显示另一个html文件
【html中嵌套另一个html文件】
src="URL"---另一个html文件的访问路径
hright 和width 属性----定义iframe标签的高度与宽度。可以使用百分比数字
frameborder 属性用于定义iframe表示是否显示边框。【默认有边框，{0/1 ，yes/no}】
例如：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>ifram
</title>
-
</head>
-
<body>
-
<iframe src="E:\wangxing\HBuilderX.code\2021.09.09htmllianxi\jisuanji2.html" width="80%" height="30%">
</iframe>
-
<h5>src -另一个
</h5>
-
<h5>height 和width 属性---定义iframe标签的高度与宽度。可以使用百分比数字
</h5>
-
<h5> frameboder 属性用于定义iframe表示是否显示边框。【默认有边框，{0/1，yes/no}】
</h5>
-
</body>
-
</html>
使用iframe来显示链接页面、
用点击<a>标记，切换显示iframe中显示的内容
1.<a>标提供target属性为iframe得name属性值
2.为iframe设置name属性值
例如：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>
</title>
-
</head>
-
<body>
-
<ul>
-
<li>
<a href="E:\wangxing\HBuilderX.code\2021.09.09htmllianxi\jisuanji2.html">计算器1
</a>
</li>
-
<li>
<a href="E:\wangxing\HBuilderX.code\2021.09.09htmllianxi\jisuanji2.html">计算器2
</a>
</li>
-
<li>
<a href="E:\wangxing\HBuilderX.code\2021.09.09htmllianxi\jisuanji2.html">计算器3
</a>
</li>
-
</ul>
-
</body>
-
</html>
*点击就可以切换显示内容
2.HTML中的<div>
<div></div>---在html中开辟一块空白表区域，可以包含其他的html元素显示，因此<div>是一个容器元素。
与css结合使用可以制作页面布局
例如：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>div 标记
</title>
-
</head>
-
<body>
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>div
</title>
-
</head>
-
<body>
-
<div style="width: 500px;height: 400px;background-color: yellow;" >
-
<h4>标题标记
</h4>
-
<p>段落标记
</p>
-
<img src="imgs/avatar2.png" alt="">
-
</div>
-
</body>
-
</html>
-
-
</body>
-
</html>
3.HTML中的<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>
4.HTML字符实体
字符实体----特殊符号，在html中有一些特殊的符号与文字结合就成一个html标记，在显示的时候这些特殊符号不会显示，而是被解释成一个标记，如果我们需要显示出这个特殊符号就要使用字符实体
| 显示结果 | 描述 | 实体名称 | 实体编号 |
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 人民币/日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
例如：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>字符实体
</title>
-
</head>
-
<body>
-
<table border="1px">
-
<tr>
-
<td>实体名称
</td>
<td>显示结果
</td>
<td>实体名称
</td>
<td>显示结果
</td>
-
</tr>
-
<tr>
-
<td>空格
</td>
<td>空
格
</td>
<td>小于号
</td>
<td>
<
</td>
-
</tr>
-
<tr>
-
<td>大于号
</td>
<td>
>
</td>
<td>和号
</td>
<td>
&
</td>
-
</tr>
-
<tr>
-
<td>双引号
</td>
<td>
"
</td>
<td>单引号
</td>
<td>
' (IE不支持)
</td>
-
</tr>
-
<tr>
-
<td>镑
</td>
<td>
£
</td>
<td>人民币/日元
</td>
<td>
¥
</td>
-
</tr>
-
<tr>
-
<td>欧元
</td>
<td>
€
</td>
<td>版权
</td>
<td>
©
</td>
-
</tr>
-
<tr>
-
<td>注册商标
</td>
<td>
®
</td>
<td>商标
</td>
<td>
™
</td>
-
</tr>
-
<tr>
-
<td>乘号
</td>
<td>
×
</td>
<td>除号
</td>
<td>
÷
</td>
-
</tr>
-
</table>
-
<hr>
-
<h4>显示html文件结构
</h4>
-
<!DOCTYPE html
>
<br>
-
<html
>
<br>
-
<head
>
<br>
-
<meta charset="utf-8"
>
<br>
-
<title>字符实体
>/title
>
<br>
-
< /head
>
<br>
-
<body
>
<br>
-
</body
>
<br>
-
</html
>
<br>
-
</body>
-
</html>
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 | 将空格转换为 "+" 符号，但不编码特殊字符。 |
例如：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>表单
</title>
-
</head>
-
<body>
-
<form action="login" method="get">
-
用户名：
<input type="text" name="username" />
<br>
-
密码：
<input type="password" name="password" id="" value="" />
-
<input type="submit" value="登录" />
-
-
</form>
-
-
</body>
-
</html>
表单元素
1.不一定需要放在表单中，在需要提交给后端处理程序是需要放在表单中。
2.我们将表单元素分成2大类【1.input类型表单元素 2.非input类型表单元素】
input类型的表单---使用input标记通过type属性的取值表示不同的表单元素
非inpu类型的表单元素---不使用input标记的表单元素
例如：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>表单元素
</title>
-
</head>
-
<body>
-
<form action="login" method="post">
-
<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>
-
</td>
-
<td>name属性后端处理程序得到日期时间选择框中值的名称
</td>
-
</tr>
-
<tr align="center">
-
<td>颜色框
</td>
-
<td>
<input name="yansekuang" type="color">
<br>
</td>
-
<td>name属性后端处理程序得到颜色框选中的值的名称
</td>
-
</tr>
-
<tr align="center">
-
<td>邮箱
</td>
-
<td>
<input type="email" name="youxiang" />
<br>
</td>
-
<td>提交时会被检验
</td>
-
</tr>
-
<tr align="center">
-
<td>网址
</td>
-
<td>
<input type="url" name="网址" />
<br>
</td>
-
<td>提交时会被检验
</td>
-
</tr>
-
<tr align="center">
-
<td>隐藏域
</td>
-
<td>
<input type="hidden" name="yincangyu" value="java" />
<br>
</td>
-
<td>
</td>
-
</tr>
-
<tr align="center">
-
<td>文件选择框
</td>
-
<td>
<input type="file" name="wenjiankuang" />
<br>
</td>
-
<td>
</td>
-
</tr>
-
<tr align="center">
-
<td>表单提交按钮
</td>
-
<td>
<input type="submit" value="表单提交按钮" />
<br>
</td>
-
<td>
</td>
-
</tr>
-
<tr align="center">
-
<td>表单重置按钮
</td>
-
<td>
<input type="reset" value="表单重置按钮" name="chongzhi" />
<br>
</td>
-
<td> value表示的是按钮上显示的文本值
</td>
-
</tr>
-
<tr align="center">
-
<td>普通按钮
</td>
-
<td>
<input type="button" value="普通按钮" name="putong" />
<br>
</td>
-
<td> value表示的是按钮上显示的文本值
</td>
-
</tr>
-
<tr align="center">
-
<td colspan="3">非input类型的表单元素
</td>
-
</tr>
-
<tr>
-
<td>下拉列表
</td>
-
<td>
<select name="xialaliebiao">
-
<option value="sx">陕西省
</option>
-
<option value="sc">四川省
</option>
-
<option value="gz">广州省
</option>
-
<option value="gx">广西省
</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>
扫一扫
2122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
