本文详细介绍了HTML中的几个重要元素：iframe用于在页面中嵌入其他HTML文件，div作为容器元素用于布局，span用于部分文本样式调整。此外，还讲解了字符实体的使用，以及HTML表单的基本概念，包括表单元素如文本框、密码框、单选按钮、复选框、时间日期选择等，以及表单的属性如action、method和enctype。最后，探讨了表单元素的提交方式及不同类型的输入类型。
html常见的标签
1.iframe---框架标记
在html文件中开辟一个区域，可以单独显示另一个html文件
src="URL"----另一个html文件访问路径
height 和 width 属性----定义iframe标签的高度与宽度。
frameborder 属性用于定义iframe表示是否显示边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe</title>
</head>
<body>
<h4>iframe---在html文件中开辟一个区域，可以单独显示另一个html文件</h4>
<h4>src="URL"----另一个html文件访问路径</h4>
<h4>height 和 width 属性----定义iframe标签的高度与宽度。</h4>
<h4>frameborder 属性用于定义iframe表示是否显示边框。</h4>
<iframe src="test1.html" width="500px" height="300px" frameborder="no"></iframe>
</body>
</html>
使用iframe来显示目标链接页面
1.<a>标提供target属性为iframe的name属性值
2、为iframe设置name属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe</title>
<style>
ul li{
list-style-type: none;
float: left;
padding-left: 30px;
}
ul li a{
text-decoration: none;
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<li><a href="test1.html" target="myiframe">用户管理</a></li>
<li><a href="iframe.html" target="myiframe">商家管理</a></li>
<li><a href="#" target="myiframe">员工管理</a></li>
<li><a href="#" target="myiframe">部门管理</a></li>
</ul>
<iframe name="myiframe" src="test1.html" width="100%" height="500px" frameborder="no"></iframe>
</body>
</html>
2.div---层，在html中开辟一块空白表区域，可以包含其他的html元素显示
因此<div>是一个容器元素。
与css结合使用可以制作页面布局
前后自动换行---块级元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div</title>
</head>
<body>
<div style="width: 300px; height: 150px; background-color: red;">
<h4>div---层，在html中开辟一块空白区域，可以包含其他的html元素显示</h4>
<p>
因此div是一个容器元素。<br>
与css结合使用可以制作页面布局<br>
前后自动换行---块级元素
</p>
</div>
<div style="width: 300px; height: 150px; background-color: blue;">
<h4>div---层，在html中开辟一块空白区域，可以包含其他的html元素显示</h4>
<p>
因此div是一个容器元素。<br>
与css结合使用可以制作页面布局
前后自动换行---块级元素
</p>
</div>
</body>
</html>
3.span---没有实际的含义[辅助]，与css一起可以改变某一段文本内容中的一部分
行内元素---在一行不会自动换行【img】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>span</title>
</head>
<body>
<h1>span---没有实际的含义[辅助]，与css一起可以改变某一段文本内容中的一部分</h1>
<h2><span style="color: red;">提莫</span>一级不打团</h2>
<h2>团战可以输，提莫必须死</h2>
</body>
</html>
4.字符实体---特殊符号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符实体</title>
</head>
<body>
<h1>字符实体--特殊符号</h1>
<table border="1px" width="300px" cellspacing="0px">
<tr align="center"><td>小于号</td><td><</td><td>大于号</td><td>></td></tr>
<tr align="center"><td>和号</td><td>&</td><td>引号</td><td>"</td></tr>
<tr align="center"><td>撇号(IE不支持) </td><td>'</td><td>分</td><td>¢</td></tr>
<tr align="center"><td>镑</td><td>£</td><td>人民币/日元</td><td>¥</td></tr>
<tr align="center"><td>欧元</td><td>€</td><td>小节</td><td>§</td></tr>
<tr align="center"><td>版权</td><td>©</td><td>注册商标</td><td>®</td></tr>
<tr align="center"><td>商标</td><td>™</td><td>乘号</td><td>×</td></tr>
<tr align="center"><td>除号</td><td>÷</td><td>空格</td><td>a b</td></tr>
</table>
html的标记都是用小于号和大于号加上字母组成的，如果需要显示一个html标记的文本描述，
就需要使用字符实体<br>
<html></html>
<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>----收集信息，提交发送给后端处理程序处理
登陆--用户名/密码--登录按钮--发送给后端处理程序处理
<form>表单的属性action---设置后端处理程序的访问地址
<form>表单的属性method---设置表单信息的提交方式。get/post
get---将表单信息跟随在后端处理程序访问地址的后面明码发送。
GET有数据量限制255个字符
文件上传时不使用GET方式
例如:login?username=zhangsan&password=123456
post---将表单信息封装在http协议中提交给后端处理程序，用户看不见。
POST没有数据量限制
文件上传时使用post方式
<form>表单的属性enctype----将表单数据发送到后台处理程序之前如何对其进行编码
application/x-www-form-urlencoded:在发送前对所有字符进行编码
（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）
multipart/form-data：不对字符编码
当使用有文件上传控件的表单时，该值是必需的。
text/plain:在发送前进行编码[将空格转换为 "+" 符号,但不编码特殊字符]
注意:文件上传时使用POST方式，且设置enctype为multipart/form-data,包含 <input name="wenjiankuang" type="file"/>
表单元素
1.不一定需要放在表单中，在需要提交给后端处理程序是要放在表单中。
2.我们将表单元素分成2大类【1.input类型的表单元素 2.非input类型的表单元素】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单和表单元素</title>
</head>
<body>
<form action="login" method="get" >
<table border="1px" width="100%" cellspacing="0px">
<tr>
<td>文本框</td>
<td><input type="text" name="wenbenkuang" value="默认值"></td>
<td>
文本框--inputd的type="text"<br>
name--为这个文本框给的名称，方便后端处理程序得到文本框中输入值<br>
value---默认值
</td>
</tr>
<tr>
<td>密码框</td>
<td><input type="password" name="mimakuang" value="默认密码"></td>
<td>
密码框--inputd的type="password"<br>
name--为这个密码框给的名称，方便后端处理程序得到密码框中输入的密码<br>
value---默认密码
</td>
</tr>
<tr>
<td>单选按钮</td>
<td>
<input type="radio" name="sex" value="nan">男
<input type="radio" name="sex" value="nv" checked="checked">女
</td>
<td>
单选按钮--inputd的type="radio"<br>
name--为这个单选按钮给的名称，方便后端处理程序得到单选按钮中选中的值<br>
value---最终提交给后端处理程序的值<br>
男/女---提示用户的选择文字【给你看的】<br>
name属性相同的元素表示属于同一组，只能选择其中一个<br>
checked--设置默认被选中
</td>
</tr>
<tr>
<td>复选框</td>
<td>
<input type="checkbox" name="fuxuan" value="book">看书
<input type="checkbox" name="fuxuan" value="play">游戏
<input type="checkbox" name="fuxuan" value="other" checked="checked">其他
</td>
<td>
复选框--inputd的type="checkbox"<br>
name--为这个复选框给的名称，方便后端处理程序得到复选框中选中的值<br>
value---最终提交给后端处理程序的值<br>
看书/游戏/其他---提示用户的选择文字【给你看的】<br>
name属性相同的元素表示属于同一组<br>
checked--设置默认被选中
</td>
</tr>
<tr>
<td>时间日期选择框</td>
<td>
<input type="datetime-local" name="mydatetime"><br>
<input type="date" name="mydate"><br>
<input type="time" name="mytime">
</td>
<td>
时间日期选择框--inputd的type="datetime-local"<br>
日期选择框--inputd的type="date"<br>
时间选择框--inputd的type="time"<br>
name--为这个时间日期选择框的名称，方便后端处理程序得到时间日期选择框中选中的值<br>
</td>
</tr>
<tr>
<td>颜色选择框</td>
<td>
<input type="color" name="mycolor"><br>
</td>
<td>
颜色选择框--inputd的type="color"<br>
name--为这个颜色选择框的名称，方便后端处理程序得到颜色选择框中选中的值<br>
</td>
</tr>
<tr>
<td>邮箱</td>
<td>
<input type="email" name="myemail"><br>
</td>
<td>
邮箱--inputd的type="email"<br>
name--为这个邮箱的名称，方便后端处理程序得到邮箱中选中的值<br>
提交时会被进行校验
</td>
</tr>
<tr>
<td>网址</td>
<td>
<input type="url" name="myurl"><br>
</td>
<td>
网址--inputd的type="url"<br>
name--为这个网址的名称，方便后端处理程序得到网址中选中的值<br>
提交时会被进行校验
</td>
</tr>
<tr>
<td>隐藏域</td>
<td>
<input type="hidden" name="myhidden" value="test"><br>
</td>
<td>
隐藏域--inputd的type="hidden"<br>
name--为这个隐藏域的名称，方便后端处理程序得到隐藏域中选中的值<br>
对用户不可见，可以向后端处理程序提交数据<br>
value--提交给后端的数据值
</td>
</tr>
<tr>
<td>文件选择框</td>
<td>
<input type="file" name="myfile" ><br>
</td>
<td>
文件选择框--inputd的type="file"<br>
name--为这个文件选择框的名称，方便后端处理程序得到文件选择框中选中的值<br>
</td>
</tr>
<tr>
<td>提交按钮</td>
<td><input type="submit" value="提交按钮"></td>
<td>
提交按钮--inputd的type="submit"<br>
value---按钮上显示的文字内容
</td>
</tr>
<tr>
<td>表单重置按钮</td>
<td><input type="reset" value="表单重置按钮"></td>
<td>
表单重置按钮--inputd的type="reset"<br>
value---按钮上显示的文字内容<br>
让表单中的元素恢复到默认状态
</td>
</tr>
<tr>
<td>普通按钮</td>
<td><input type="button" value="普通按钮"></td>
<td>
普通按钮--inputd的type="button"<br>
value---按钮上显示的文字内容<br>
</td>
</tr>
<tr>
<td>下拉列表</td>
<td>
<select name="guojia">
<option value="zg">中国</option>
<option value="yg">英国</option>
<option value="mg">美国</option>
<option value="eg">俄罗斯</option>
</select>
</td>
<td>
select--下拉列表<br>
option--下拉列表中的每一项<br>
option中的value---最终提交给后端处理程序的值
</td>
</tr>
<tr>
<td>文本域</td>
<td>
<textarea name="mytext" cols="50" rows="5"></textarea>
</td>
<td>
textarea--文本域<br>
cols--列数设置宽度,rows--行数设置高度<br>
输入超过大小空间之后自带滚动条<br>
制作富文本编辑器
</td>
</tr>
</table>
</form>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
