一、HTML中的框架
<iframe>—表示一个框架,在html文件中开辟一个区域，可以单独显示另一个html文件
【html文件中嵌套另一个html文件】
src=”URL”—-另一个html文件访问路径
height 和 width 属性—-定义iframe标签的高度与宽度。可以使用百分比数字
frameborder 属性用于定义iframe表示是否显示边框。【默认有边框，{0/1 yes/no}】
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中的框架</title>
</head>
<body>
<!--
src---另一个html文件访问路径
height 和 width 属性----定义iframe标签的高度与宽度。可以使用百分比数字
frameborder 属性用于定义iframe表示是否显示边框。【默认有边框，{0/1 yes/no}】
-->
<iframe width="500px" height="400px" frameborder=1 src="../work/zhuce.html"></iframe>
</body>
</html>
使用iframe来显示目标链接页面
用过点击<a>标记，切换显示iframe中显示的内容
1.<a>标提供target属性为iframe得name属性值
2.为iframe设置name属性值
例如;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用iframe来显示目标链接页面</title>
</head>
<body>
<ul>
<li><a href="../work/baiogebuju.htnl.html" target="yemian">首页</a></li>
<li><a href="../work/divbuju.htnl.html" target="yemian">员工管理</a></li>
<li><a href="../work/zhuce.html" target="yemian">部门管理</a></li>
</ul>
<iframe width="500px" height="400px" frameborder=1 name="yemian"></iframe>
</body>
</html>
二、HTML中的<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="../testimgs/avatar2.png">
</div>
</body>
</html>
三、HTML中<span>
<span>—没有实际的含义，与css一起可以改变某一端文本内容中的一部分。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>span</title>
</head>
<body>
<h4>我们都有中国魂，我们都是<span style="font-size: 30px;color: red;">中国人
</span>，<span style="color: yellow;font-size: 30px;">黄皮肤</span>。</h4>
</body>
</html>
面试题:区块元素与内联元素[行内元素]的区别?
Html中的元素有两大类区块元素与内联元素[行内元素]；
块级元素在浏览器显示时，通常会以新行来开始（和结束）。常见的：<h1>, <p>, <ul>, <table>,<div>
内联元素在显示时通常不会以新行开始。常见的：<b>, <td>, <a>, <img>,<span>
四、HTML字符实体
字符实体—-特殊符号，在html中有一些特殊的符号与文字结合就成一个html标记，在显示的时候这些特殊符号不会显示，而是被解释成一个标记，如果我们需要显示出这个特殊符号就要使用字符实体
|
显示结果 |
描述 |
实体名称 |
实体编号 |
空格 |
|||
< |
小于号 |
< |
< |
|
> |
大于号 |
> |
> |
|
& |
和号 |
& |
& |
|
“ |
引号 |
“ |
“ |
|
‘ |
撇号 |
‘ (IE不支持) |
‘ |
|
￠ |
分 |
¢ |
¢ |
|
£ |
镑 |
£ |
£ |
|
¥ |
人民币/日元 |
¥ |
¥ |
|
€ |
欧元 |
€ |
€ |
|
§ |
小节 |
§ |
§ |
|
© |
版权 |
© |
© |
|
® |
注册商标 |
® |
® |
|
™ |
商标 |
™ |
™ |
|
× |
乘号 |
× |
× |
|
÷ |
除号 |
÷ |
÷ |
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符实体</title>
</head>
<body>
<table border="1">
<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>
<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>
<tr>
<td>乘号</td>
<td>×</td>
<td>除号</td>
<td>÷</td>
</tr>
</table>
</body>
</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>
<!--1.action--设置后端处理程序访问地址
2.POST--设置表单信息的提交方式
-->
<form action="" method="POST">
用户名：<input type="text" name="username"/><br>
密码：<input type="password" name="mima"/><br>
<input type="submit" value="登录"/>
</form>
</body>
</html>
表单元素
1.不一定需要放在表单中，在需要提交给后端处理程序是要放在表单中。
2.我们将表单元素分成2大类【1.input类型的表单元素 2.非input类型的表单元素】
input类型的表单元素—-使用input标记通过type属性的取值表示不同的表单元素
非input类型的表单元素—不使用input标记的表单元素
例如;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单元素</title>
</head>
<body>
<form action="" method="GET" >
<table border="1px" width="100%" cellspacing="0" align="center">
<tr>
<th>名称</th>
<th>表现形式</th>
<th>注意事项</th>
</tr>
<tr>
<td colspan="3" align="center">input类型的表单元素</td>
</tr>
<tr>
<td>文本框</td>
<!--placeholder--设置文本框开始显示文字在用户输入时自动消失
-->
<td><input type="text" name="wenbenkuang" value="" placeholder="请输入"></td>
<td>name属性后端处理程序得到文本框输入值的名称<br>value属性表示默认值<br>placeholder设置文本框开始显示文字在用户输入时自动消失</td>
</tr>
<tr>
<td>密码框</td>
<td><input type="password" name="password" value="默认值"></td>
<td>
name属性后端处理程序得到>密码框输入值的名称<br>
value属性表示默认值
</td>
</tr>
<tr>
<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>
<td>复选框</td>
<td>
<input type="checkbox" name="checkbox" value="yuwen" checked="checked">语文
<input type="checkbox" name="checkbox" value="shuxue" checked="checked">数学
<input type="checkbox" name="checkbox" value="yingyu" checked="checked">英语
<input type="checkbox" name="checkbox" value="tiyu" checked="checked">体育
</td>
<td>
name属性后端处理程序得到复选框选中值的名称<br>
value属性提交给后端处理程序的具体值<br>
"数学"/"英语"是提供给用户方便用户知自己所选的内容<br>
有多个复选框时,要求name属性值要相同<br>
checked表示默认被选中
</td>
</tr>
<tr>
<td>时间日期选择框</td>
<td>
<input type="date" name="date"><br>
<input type="time" name="time"><br>
<input type="datetime-local" name="datetime"><br>
</td>
<td>
name属性后端处理程序得到时间日期选择框选中值的名称<br>
</td>
</tr>
<tr>
<td>颜色框</td>
<td>
<input type="color" name="yansekuang">
</td>
<td>name属性后端处理程序得到颜色框选中值的名称</td>
</tr>
<tr>
<td>邮箱框</td>
<td>
<input type="email" name="youxiang">
<td>提交时会被进行校验</td>
</td>
</tr>
<tr>
<td>隐藏域</td>
<td><input type="hidden" name="yingcang" value="jaba"/></td>
<td> </td>
</tr>
<tr>
<td>文件选择框</td>
<td>
<input type="file" name="xuanze">
</td>
<td></td>
</tr>
<tr>
<td>表单提交按钮</td>
<td>
<input type="submit" value="提交" name="tijiao">
<td></td>
</td>
</tr>
<tr>
<td>重置按钮</td>
<td>
<input type="reset" name="chongzhi" value="重置按钮">
</td>
<td></td>
</tr>
<tr >
<td>普通按钮</td>
<td>
<input name="putong" type="button" value="普通按钮"/>
</td>
<td>
value表示的是按钮上显示的文本值
</td>
</tr>
<tr>
<td colspan="3">非input类型的表单元素</td>
</tr>
<tr>
<td>下拉列表</td>
<td>
<select name="xialaliebiao">
<option name="sx">陕西省</option>
<option name="gs">甘肃省</option>
<option name="sc">四川省</option>
</select>
</td>
<td>
option--下拉列表中的每一项<br>
value表示提交给后台处理程序的数据值<br>
“陕西省”给用户看的
</td>
</tr>
<tr>
<td>文本域</td>
<td>
<textarea cols="32" rows="5"></textarea>
</td>
<td>
cols--列数设置宽度,rows--行数设置高度<br>
输入超过大小空间之后自带滚动条<br>
制作富文本编辑器
</td>
</tr>
</table>
</form>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79875.html
