html知识加强总结3
内嵌标签：
iframe
src ：可显示得网页资源路径
可以本地（相对路径）也可以网络资源（URL）
注意：
默认当前页面打开及加载src指向的资源
width ：显示区域的宽度
height ：显示区域的高度
name ：设置内嵌区域的名字，结合超链接标签的target属性使用。
作用：
在当前网页中加载其他网页的资源，达到不同网页资源之间互不干扰，并且能在同一个页面显示给用户。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内嵌标签</title>
</head>
<body>
<h3>内嵌标签</h3>
<hr>
<a href="http://www.jd.com" target="_jd">京东</a>
<a href="http://www.taobao.com" target="_tb">淘宝</a><br>
<iframe src="" frameborder="0" height="400px" width="49%" name="_jd"></iframe>
<iframe src="" frameborder="0" height="400px" width="49%" name="_tb"></iframe>
<br>
<a href="http://www.baidu.com" target="_bd">百度一下</a>
<a href="http://www.so.com" target="_ss">360搜索</a><br>
<iframe src="" frameborder="0" height="400px" width="49%" name="_bd"></iframe>
<iframe src="" frameborder="0" height="400px" width="49%" name="_ss"></iframe>
</body>
</html>
四搜效果显示
图片.png
框架标签(已经过时 用div加iframe代替)
登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆页面</title>
</head>
<body>
<h3 align="center">欢迎访问框架主页面</h3>
<hr>
<form action="10框架标签.html" method="get" >
<table bgcolor="#7fffd4" border="0" cellpadding="0" cellspacing="10" align="center">
<tr height="50px">
<td width="100">手机号：</td>
<td width="100">
<input type="text" name="phone">
</td>
</tr>
<tr height="50px">
<td>密码：</td>
<td>
<input type="password" name="psw">
</td>
</tr>
<tr height="50px">
<td>
<input type="checkbox" name="agree">记住密码
</td>
<td align="right">
<input type="hidden" name="hidden">忘记密码？
</td>
</tr>
<tr height="50px">
<td colspan="2" align="center" >
<input type="submit" value="登录">
</td>
</tr>
</table>
</form>
</body>
</html>
框架标签主页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架标签</title>
</head>
<frameset rows="10%,*,10%">
<frame src="frameset/top.html">
<frameset cols="10%,*">
<frame src="frameset/left.html" >
<frame src="frameset/right.html" name="_right">
</frameset>
<frame src="frameset/bottom.html">
</frameset>
</html>
top退出页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>top</title>
</head>
<body>
<a href="../登录页面.html" target="_top">退出</a>
</body>
</html>
left选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left</title>
</head>
<body>
<ul>
<li><a href="http://www.baidu.com/" target="_right">百度一下</a> </li>
<li><a href="http://www.taobao.com/" target="_right">淘宝网</a></li>
<li><a href="http://www.jd.com/" target="_right">京东网</a></li>
</ul>
</body>
</html>
right网页显示页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>right</title>
</head>
<body>
<ul>网页显示页面</ul>
<li>请点击左侧超链接进行选择</li>
</body>
</html>
效果显示
图片.png
点击登录后
图片.png
点击左侧百度一下
图片.png
表单标签
form表单标签：
作用：收集并提交数据给指定服务器
属性：
action：收集数据提交地址，也就是URL
method：收集数据的提交方式
get：适合小量数据，表单数据以？展开拼接在URL后面，不同的键值对使用&符号隔开，不安全。
post：适合大量数据，安全，隐式提交。
注意1：表单数据的提交，要提交的表单必须拥有name属性值，否则不会提交
提交的表单项数据为键值对，键为name属性的值，值为用户输入的数据
注意2：form标签会收集其标签内部的数据
注意3：form表单的数据提交需要依赖于submit提交按钮
form表单域标签
作用：给用户提供可以进行数据书写或者选择的标签
使用：
文本框：
input
type：
text 收集少量数据的文本数据，用户可见
password 手机用户的密码数据
name：
数据提交的键，也会被js使用
value：默认值
单选框：
input
type:
radio
name: name属性值相同的単迭框只能选择一项数据
value:要提交的数据
checked: checked使用此属性的单选默认是选择状态
多选框:
input:
type:
checkbox
name:一一个多选组需要使用相同的name属性值
value :要提交的数据
checked:checked使用此属性的多选框默认是选择状态
单选下拉框:
select :
name :数据提交的键名,必须声明
子标签
option:一个opt ion标签表示一个下拉选项
value:要提交的数据
文本域:
textarea :声明一个可以书写大量文字的文本区域
name :数据提交的键名, js和CSS也会使用
rows :声明文本域的行数
cols :声明文本域的列数
普通按钮:
input :
type:
button
value :
隐藏标签:
input :
type:
hidden
name :
value :
注意：表单数据提交的表单域标签的value值
form表单标签的使用：
在点击数据提交时，form标签会将其内部所有的form表单标签中的用户书写的数据按照method指明的提交方式
提交给action属性指明的提交地址。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签学习</title>
</head>
<body>
<h3>表单标签</h3>
<from action="#" method="get">
用户名：<input type="text" name="uname" value="王五"><br>
密码：<input type="password" name="upwd"><br>
性别：男<input type="radio" name="sex" checked="checked">女 <input type="radio" value="0" name="sex"> <br>
籍贯：<br>
<select name="address" >
<option value="" >---请选择---</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">厦门</option>
<option value="5" selected="selected">深圳</option><!--selected 默认选择-->
</select>
<br>
文本域：<br>
<textarea name="intro" cols="30" rows="10"></textarea><br>
普通按钮：<br>
<input type="button" value="普通按钮"><br>
隐藏按钮：<br>
<input type="hidden" name="hidden" value="haha">
<input type="submit" value="登录">
</from>
</body>
</html>
效果显示
图片.png
模拟百度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟百度</title>
</head>
<body>
<h3>模拟百度</h3>
<form action="https://www.baidu.com/s" method="get"><!--action是？之前的提交地址，method的get是获取的？后面的键值对-->
<input type="text" name="wd"><!--wd是输入的字符串对应的键，而我们输入的字符串为值-->
<input type="submit" value="百度一下"><!--提交给action-->
</form>
<br>
<h3>模拟360</h3>
<form action="https://www.so.com/s" method="get">
<input type="text" name="q">
<input type="submit" value="搜索">
</form>
</body>
</html>
效果显示
图片.png
登录注册页面制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<h3 align="center">注册页面</h3>
<hr>
<form action="#" method="get" >
<table border="0px" align="center" cellspacing="0" cellpadding="5" bgcolor="#7fffd4">
<tr height="35px">
<td>用户名：</td>
<td>
<input type="text" name="tet" >
</td>
</tr>
<tr height="35px">
<td>密码：</td>
<td>
<input type="password" name="psw">
</td>
</tr>
<tr height="35px">
<td>邮箱：</td>
<td>
<input type="text" name="mail">
</td>
</tr>
<tr height="35px">
<td>手机号：</td>
<td>
<input type="text" name="phone">
</td>
</tr>
<tr height="35px">
<td>性别：</td>
<td>
男<input type="radio" value="1" name="sex" checked="checked">
女 <input type="radio" value="2" name="sex">
</td>
</tr>
<tr height="35px">
<td>爱好：</td>
<td>
<input type="checkbox" value="1" name="hobby">唱歌
<input type="checkbox" value="2" name="hobby">打球
<input type="checkbox" value="3" name="hobby">打游戏
<input type="checkbox" value="4" name="hobby">跳舞
</td>
</tr>
<tr height="35px">
<td>籍贯：</td>
<td>
<select name="address">
<option value="">--请选择--</option>
<option value="1" >成都</option>
<option value="2">重庆</option>
<option value="3">厦门</option>
<option value="4">上海</option>
<option value="5">西安</option>
<option value="6">深圳</option>
<option value="7">广西</option>
</select>
</td>
</tr>
<tr height="35px">
<td>个人介绍：</td>
<td>
<textarea name="intro" cols="23" rows="5"></textarea>
</td>
</tr>
<tr height="35px" align="center">
<td colspan="2">
<input type="checkbox" value="0" name="agree">是否同意本公司的协议
</td>
</tr>
<tr height="35px" align="center">
<td colspan="2" >
<input type="submit" value="登录">
</td>
</tr>
</table>
</form>
</body>
</html>
效果显示
图片.png
html复习超链接页面显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html复习</title>
<meta name="keyword" content="HTML,sxt">
<meta name="description" content="HTML学习,特别简单">
<meta name="author" content="lx">
<meta http-equiv="refresh" content="5" url="http://www.baidu.com">
</head>
<body>
<h3>html学习</h3>
<hr>
<p>
生活一种相遇，沒有预约，更在 <b>心</b>上，无论岁月变迁，<br>
有情相随，<del>心就不觉寒冷</del>， 因为有情，不言，心相通，<br>
有爱相伴，路上不会 <i>孤单</i> ，因为有爱，不语，也倾情，<br>
情在，片片飞花潜入梦，相逢，<u>爱就前世缘</u>，心心相印，<br>
情在，片片飞花潜入梦，相逢，爱就前世缘，心心相印，<br>
心若相知，彼此默契，人生，也可简单随意，爱就有缘，<br>
情若相眷，心生怜惜，感情，也可默然相对，缘来有情。<br>
</p>
<dl>
<dt><b> html复习笔记及其代码：</b></dt>
<dd><a href="01html标签.html" target="_blank">html标签复习</a></dd>
<dd><a href="02Head标签.html" target="_blank">head标签复习</a></dd>
<dd><a href="03文字标签.html" target="_blank">body文字标签复习</a></dd>
<dd><a href="04列表标签_有序无序.html" target="_blank">列表标签复习</a></dd>
<dd><a href="06图片标签.html" target="_blank">图片标签复习</a></dd>
<dd><a href="07超链接标签.html" target="_blank">超链接标签复习</a></dd>
<dd><a href="08表格标签.html" target="_blank">表格标签复习</a></dd>
<dd><a href="08简历表格制作.html" target="_blank">简历作业复习</a></dd>
<dd><a href="09内嵌标签.html" target="_blank">内嵌标签</a></dd>
<dd><a href="10登录页面.html" target="_blank">登录框架页面复习</a></dd>
<dd><a href="11表单标签.html" target="_blank">表单标签</a></dd>
<dd><a href="12模拟百度.html" target="_blank">表单标签模拟百度作业</a></dd>
<dd><a href="13注册页面制作.html" target="_blank">注册页面制作</a></dd>
</dl>
</body>
</html>
显示效果
图片.png
网友评论