1.html中的图片标记
img--图片标记
常见的属性:
1.src属性--设置图片路径
绝对路径---从操作系统的指定盘中的目录开始查找图片的路径。
缺点:1.如果图片保存目录太深,图片的操作路径就会很长.
2.当我们将网页\保存图片的文件夹移动之后,这个图片的路径就变化。图片无法正常显示。
相对路径---以当前网页为参照、为中心,对外开始查找图片的路径。
1.图片与当前网页在同一个目录下【src=”图片名称”】
2.图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名称”】
3.图片保存在当前网页所在目录的父文件夹中[..\上一层]
网络地址路径---【http://........】
2.width属性--设置图片的宽度【数字px】
3.height属性--设置图片的高度【数字px】
总结:1.一般情况下我们不使用绝对路径
2.如果需要的图片资源本地磁盘存在,使用相对路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1.html中的图片标记</title>
</head>
<body>
<h2>1.html中的图片标记</h2>
<h2>img--图片标记</h2>
<h2>1.src属性--设置图片路径</h2>
<h2>绝对路径--从操作系统的指定盘中的目录开始查找图片的路径。</h2>
<img src="F:\20201201\HTML\20210303html(2)\code\imgs\avatar.png"/>
<h2>1.如果图片保存目录太深,图片的操作路径就会很长</h2>
<h2>2.当我们将网页\保存图片的文件夹移动之后,这个图片的路径就变化。图片无法正常显示。
</h2>
<h2>相对路径--以当前网页为参照、为中心,对外开始查找图片的路径。</h2>
<img src="imgs\avatar.png"/>
<h2>1.图片与当前网页在同一个目录下【src=”图片名称”】</h2>
<img src="avatar2.png"/>
<h2>2.图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名称”】</h2>
<img src="imgs\avatar.png"/>
<h2>3.图片保存在当前网页所在目录的父文件夹中[..\上一层]【src=”..\子文件夹的名称\图片名
称”】</h2>
<img src="..\testimgs\avatar04.png"/>
<h2>3.使用网络地址【http://......】</h2>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1051452078,2851059078&fm=26&gp=0.jpg"width="200px" height="200px"/>
<h2>width属性--设置图片的宽度【数字px】</h2>
<h2>height属性--设置图片的高度【数字px】</h2>
</body>
</html>
2.设置网页的背景
bgcolor--设置背景颜色
background--设置背景图片
bgcolor/background属性出现在body开始标记中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置网页背景</title>
</head>
<!--<body bgcolor="red">-->
<body background="imgs/timg.jpg">
<h1>bgcolor--设置背景颜色</h1>
<h1>background--设置背景图片</h1>
<h1>bgcolor/background属性出现在body开始标记中</h1>
</body>
</html>
3.html中的超链接【链接\锚点】
a--html中的超链接【打开其他的文件】
常用属性:
1.href--设置连接地址【绝对路径/相对路径/网络地址】
2.target--属性设置被链接的资源打开方式【_blank[新窗口] _self[当前窗口]】
3.name--设置超链接的名称【本网页内部的链接】
超链接的链接方式:
1.连接本地资源
2.连接网络资源
3.本网页内部的链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html中的超链接</title>
</head>
<body>
<h2>a--html中的超链接【打开其他的文件】</h2>
<h2>常用属性</h2>
<h2>1.href--设置连接地址【绝对路径/相对路径/网络地址】</h2>
<h2>2.target--属性设置被链接的资源打开方式【_blank[新窗口] _self[当前窗口]】</h2>
<h2>3.name--设置超链接的名称【本网页内部的链接】</h2>
<h2>超链接的链接方式</h2>
<h2>1.连接本地资源</h2>
<a href="test2.html" target="_blank">打开test2.html</a>
<h2>2.连接网络资源</h2>
<a href="http://news.baidu.com/">打开百度新闻</a>
<h2>3.本网页内部的链接</h2>
<hr>
<a name="mulu">目录</a>
<h1>平凡的世界 第一部 第1章</h1>
<p>1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。
在这样雨雪交加的日子里,如果没有什么紧要事,人们宁愿一整天足不出户。因此,县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化,石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上,有时会偶尔走过来一个乡下人,破毡帽护着脑门,胳膊上挽一筐子土豆或萝卜,有气无力地呼唤着买主。唉,城市在这样的日子里完全丧失了生气,变得没有一点可爱之处了。
</p>
<h1>平凡的世界 第一部 第2章</h1>
<p>1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。
在这样雨雪交加的日子里,如果没有什么紧要事,人们宁愿一整天足不出户。因此,县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化,石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上,有时会偶尔走过来一个乡下人,破毡帽护着脑门,胳膊上挽一筐子土豆或萝卜,有气无力地呼唤着买主。唉,城市在这样的日子里完全丧失了生气,变得没有一点可爱之处了。
</p>
<h1>平凡的世界 第一部 第3章</h1>
<p>1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。
在这样雨雪交加的日子里,如果没有什么紧要事,人们宁愿一整天足不出户。因此,县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化,石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上,有时会偶尔走过来一个乡下人,破毡帽护着脑门,胳膊上挽一筐子土豆或萝卜,有气无力地呼唤着买主。唉,城市在这样的日子里完全丧失了生气,变得没有一点可爱之处了。
</p>
<h1>平凡的世界 第一部 第4章</h1>
<p>1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。
在这样雨雪交加的日子里,如果没有什么紧要事,人们宁愿一整天足不出户。因此,县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化,石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上,有时会偶尔走过来一个乡下人,破毡帽护着脑门,胳膊上挽一筐子土豆或萝卜,有气无力地呼唤着买主。唉,城市在这样的日子里完全丧失了生气,变得没有一点可爱之处了。
</p>
<h1>平凡的世界 第一部 第5章</h1>
<p>1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。
在这样雨雪交加的日子里,如果没有什么紧要事,人们宁愿一整天足不出户。因此,县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化,石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上,有时会偶尔走过来一个乡下人,破毡帽护着脑门,胳膊上挽一筐子土豆或萝卜,有气无力地呼唤着买主。唉,城市在这样的日子里完全丧失了生气,变得没有一点可爱之处了。
</p>
<h1>平凡的世界 第一部 第6章</h1>
<p>1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。
在这样雨雪交加的日子里,如果没有什么紧要事,人们宁愿一整天足不出户。因此,县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化,石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上,有时会偶尔走过来一个乡下人,破毡帽护着脑门,胳膊上挽一筐子土豆或萝卜,有气无力地呼唤着买主。唉,城市在这样的日子里完全丧失了生气,变得没有一点可爱之处了。
</p>
<h1>平凡的世界 第一部 第7章</h1>
<p>1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。
在这样雨雪交加的日子里,如果没有什么紧要事,人们宁愿一整天足不出户。因此,县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化,石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上,有时会偶尔走过来一个乡下人,破毡帽护着脑门,胳膊上挽一筐子土豆或萝卜,有气无力地呼唤着买主。唉,城市在这样的日子里完全丧失了生气,变得没有一点可爱之处了。
</p>
<h1>平凡的世界 第一部 第8章</h1>
<p>1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。
在这样雨雪交加的日子里,如果没有什么紧要事,人们宁愿一整天足不出户。因此,县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化,石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上,有时会偶尔走过来一个乡下人,破毡帽护着脑门,胳膊上挽一筐子土豆或萝卜,有气无力地呼唤着买主。唉,城市在这样的日子里完全丧失了生气,变得没有一点可爱之处了。
</p>
<h1>平凡的世界 第一部 第9章</h1>
<p>1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。
在这样雨雪交加的日子里,如果没有什么紧要事,人们宁愿一整天足不出户。因此,县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化,石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上,有时会偶尔走过来一个乡下人,破毡帽护着脑门,胳膊上挽一筐子土豆或萝卜,有气无力地呼唤着买主。唉,城市在这样的日子里完全丧失了生气,变得没有一点可爱之处了。
</p>
<p align="right"><a href="#mulu">回到目录</a></p>
</body>
</html>
4.html中的列表
1.有序列表
ol--有序列表
li--有序列表中的每一项
type属性--设置有序列表的标号【字母A/a 数字 1 罗马数字 i/I】
start属性--设置有序列表标号的起始值【数字】
2.无序列表
ul--无序列表
li--无序列表中的每一项
type属性--设置无序列表的标号【disc[小圆点] circle[小圆圈] square[小方块]】=
3.自定义列表
dl--自定义列表
dt--自定义列表主分类
dd--自定义列表中主分类下的次级分类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html中的列表</title>
</head>
<body>
<h1>1.有序列表</h1>
<ol type="i" start="3">
<li>ol--有序列表</li>
<li>li--有序列表中的每一项</li>
<li>type属性--设置有序列表的标号【字母A/a 数字 1 罗马数字 i/I】</li>
<li>start属性--设置有序列表标号的起始值【数字】</li>
</ol>
<h1>2.无序列表</h1>
<ul type="square">
<li>ul--无序列表</li>
<li>li--无序列表中的每一项</li>
<li>type属性--设置无序列表的标号【disc[小圆点] circle[小圆圈] square[小方块]】</li>
</ul>
<h1>3.自定义列表</h1>
<dl>
<dt>本地磁盘(C:)</dt>
<dd>Drivers</dd>
<dd>Windonws</dd>
<dd>用户</dd>
<dt>本地磁盘(D:)</dt>
<dd>java</dd>
<dd>mysql</dd>
<dd>dowload</dd>
</dl>
</body>
</html>
5.html中的表格
table--表格
tr-----表格中的行
td-----一行中的列
常用的属性:
1.border--设置表格边框[数字px]
2.width--设置表格宽度[数字px]
3.height--设置表格高度[数字px]
4.cellspacing--设置表格单元格之间的间距[数字px]
5.cellpadding--设置表格单元格与单元格中内容之间的距离[数字px]
6.align--如果出现在table中设置表格的水平对齐方式
如果出现在tr中设置表格当前行的水平对齐方式
如果出现在td中设置表格当前行的水平对齐方式
7.valign--如果出现在tr中设置表格当前行的垂直对齐方式
如果出现在td中设置表格当前行的垂直对齐方式
8.bgcolor--如果出现在table中设置表格的背景颜色
9.background--如果出现在table中设置表格的背景图片
关于表格的跨行和跨列:
跨列【左右合并单元格】---给td上设置colspan属性,需要跨几个列那么就写数字几。
跨行【上下合并单元格】---给td上设置rowspan属性,需要跨几个行那么就写数字几。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html中的表格</title>
</head>
<body>
<h2>table--表格</h2>
<h2>tr-----表格中的行</h2>
<h2>td-----一行中的列</h2>
<h2>常用的属性</h2>
<h2>1.border--设置表格边框[数字px]</h2>
<h2>2.width--设置表格宽度[数字px]</h2>
<h2>3.height--设置表格高度[数字px]</h2>
<h2>4.cellspacing--设置表格单元格之间的间距[数字px]</h2>
<h2>5.cellpadding--设置表格单元格与单元格中内容之间的距离[数字px]</h2>
<h2>6.align--如果出现在table中设置表格的水平对齐方式</h2>
<h2>如果出现在tr中设置表格当前行的水平对齐方式</h2>
<h2>如果出现在td中设置表格当前行的水平对齐方式</h2>
<h2>7.valign--如果出现在tr中设置表格当前行的垂直对齐方式</h2>
<h2>如果出现在td中设置表格当前行的垂直对齐方式</h2>
<h2>8.bgcolor--如果出现在table中设置表格的背景颜色</h2>
<h2>9.background--如果出现在table中设置表格的背景图片</h2>
<table border="1px" width="400px" height="200px"
cellspacing="10px" cellpadding="10px" background="imgs\timg.jpg">
<tr align="left" valign="top">
<td>1001</td><td>zhangsan</td><td>23</td><td>西安</td>
</tr>
<tr align="center" valign="middle">
<td>1002</td><td>lisi</td><td>24</td><td>北京</td>
</tr>
<tr align="right" valign="bottom">
<td>1003</td><td>王五</td><td>25</td><td>shanghai</td>
</tr>
</table>
<h2>跨列【左右合并单元格】---给td上设置colspan属性,需要跨几个列那么就写数字几。</h2>
<table border="1px" width="400px" height="200px"
cellspacing="10px" cellpadding="10px" background="imgs\timg.jpg">
<tr align="left" valign="top">
<td colspan="4">用户信息表</td>
</tr>
<tr align="left" valign="top">
<td>1001</td><td>zhangsan</td><td>23</td><td>西安</td>
</tr>
<tr align="center" valign="middle">
<td>1002</td><td>lisi</td><td>24</td><td>北京</td>
</tr>
<tr align="right" valign="bottom">
<td>1003</td><td>王五</td><td>25</td><td>shanghai</td>
</tr>
</table>
<h2>跨行【上下合并单元格】---给td上设置rowspan属性,需要跨几个行那么就写数字几。</h2>
<table border="1px" width="400px" height="200px"
cellspacing="10px" cellpadding="10px" background="imgs\timg.jpg">
<tr align="left" valign="top">
<td rowspan="3">用户信息表</td><td>1001</td><td>zhangsan</td><td colspan="2">23</td>
</tr>
<tr align="center" valign="middle">
<td>1002</td><td rowspan="2">lisi</td><td>24</td><td>北京</td>
</tr>
<tr align="right" valign="bottom">
<td>1003</td><td>25</td><td>shanghai</td>
</tr>
</table>
</body>
</html>
6.html中的表单
1.表单采集/收集用输入的信息,提交给后端处理程序处理【登陆/注册】
2.form--表示一个表单
常用属性:
action属性---设置后端处理程序的访问地址
method属性--设置表单的提交方式【get[默认]/post】
get方式---将采集的信息数据跟随在后端处理程序的访问地址之后。
有数据量限制255个字符
post方式---将采集的信息数据封装到网络协议中发送给后端处理程序。
没有数据量限制
enctype属性--规定在将表单数据发送到后台处理程序之前如何对其进行编码.
application/x-www-form-urlencoded | 默认。在发送前对所有字符进行编码(将空格转换为 "+" 符号,特殊字符转换为 ASCII HEX 值)。 |
multipart/form-data | 不对字符编码。当使用有文件上传控件的表单时,该值是必需的。 |
text/plain | 将空格转换为 "+" 符号,但不编码特殊字符。 |
如果使用表单实现文件上传,那么method属性一定post,enctype属性值一定是multipart/form-data。
表单元素:
名称 | 表现形式 | 注意 |
文本框 | <input type="text" name="wenbenkuang" value="默认值"/> |
|
密码框 | <input type="password" name="mimakuang" value="123456"/> |
|
单选按钮 | <input type="radio" name="sex" value="nan" checked="checked"/>男 | 有多个单选按钮时,为了保证每次只能选一个,要求name属性值要相同。 “男”给用户看的,value表提交到后台的数据值。 checked="checked"设置默认被选中。 |
复选框 | <input type="checkbox" name="fuxuankaung" value="book" checked="checked"/>看书 | 有多个复选框时,要求name属性值要相同. “看书”给用户看的,value值提交到后台的数据值。 checked="checked"设置默认被选中。 |
日期框 | <input type="date" name="riqikaung" /> |
|
文件 | <input type="file" name="filekaung"/> |
|
隐藏域 | <input type="hidden" name="hiddenkaung" value="111111"/> | value="111111"提交给后台处理程序的数据值 |
下拉列表 | <select name="xialaleibiao"> <option value="sx">陕西省 </option> <option value="gs">甘肃省</option> <option value="sc">四川省</option> <option value="hb">河北省</option> </select> | option--下拉列表中的每一项 value表示提交给后台处理程序的数据值 “陕西省”给用户看的
|
文本域 | <textarea cols="22" rows="5"></textarea> | cols--列数设置宽度,rows--行数设置高度 输入超过大小空间之后自带滚动条 |
普通按钮 | <input type="button" value="普通按钮"/> | value表示的是按钮上显示的文本值 |
表单提交按钮 | <input type="submit" value="表单提交按钮"/> | value表示的是按钮上显示的文本值 提交表单输入数据给后台处理程序 |
表单重置按钮 | <input type="reset" value="表单重置按钮"/> | value表示的是按钮上显示的文本值 恢复表单的输入到初始状态 |
颜色框 | <input type="color" name="yansekaung"/> |
|
邮箱 | <input type="email" name="emailkaung"/> | 提交是会被进行校验 |
电话 | <input type="tel" name="telkaung"/> |
|
网址 | <input type="url" name="urlkaung"/> | 提交是会被进行校验 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单元素</title>
</head>
<body>
<form action="/" method="get">
<table border="1px" width="800px" align="center">
<tr align="center">
<td>名称</td>
<td>表现形式</td>
<td>注意事项</td>
</tr>
<tr align="center">
<td>文本框</td>
<td>
<input name="wenbenkuang" type="text" value="默认值" />
</td>
<td></td>
</tr>
<tr align="center">
<td>密码框</td>
<td>
<input name="mimakuang" type="password" value="password" />
</td>
<td></td>
</tr>
<tr align="center">
<td>单选按钮</td>
<td>
<input name="sex" type="radio" value="nan"/>男
<input name="sex" type="radio" value="nv" checked="checked"/>女
</td>
<td>有多个单选按钮时,为了保证每次只能选一个,要求name属性值要相同。<br>
“男”给用户看的,value表提交到后台的数据值。<br>
checked="checked"设置默认被选中。
</td>
</tr>
<tr align="center">
<td>复选框</td>
<td>
<input name="fuxuan" type="checkbox" value="one"/>复选1
<input name="fuxuan" type="checkbox" value="two"/>复选2
<input name="fuxuan" type="checkbox" value="san"/ checked="checked">复选3
</td>
<td>有多个复选框时,要求name属性值要相同.<br>
“复选1”给用户看的,value值提交到后台的数据值。<br>
checked="checked"设置默认被选中。
</td>
</tr>
<tr align="center">
<td>日期框</td>
<td>
<input name="riqikuang" type="date"/>
</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 name="yingcang" type="hidden" value="java"/>
</td>
<td></td>
</tr>
<tr align="center">
<td>颜色框</td>
<td>
<input name="yansekuang" type="color"/>
</td>
<td></td>
</tr>
<tr align="center">
<td>邮箱</td>
<td>
<input name="youxiang" type="email"/>
</td>
<td>
提交是会被进行校验
</td>
</tr>
<tr align="center">
<td>电话</td>
<td>
<input name="dianhua" type="tel"/>
</td>
<td>
</td>
</tr>
<tr align="center">
<td>网址</td>
<td>
<input name="wangzhi" type="url"/>
</td>
<td>
提交是会被进行校验
</td>
</tr>
<tr align="center">
<td>普通按钮</td>
<td>
<input name="putonganniu" type="button" value="普通按钮"/>
</td>
<td>
value表示的是按钮上显示的文本值
</td>
</tr>
<tr align="center">
<td>表单提交按钮</td>
<td>
<input name="tijiao" type="submit" value="表单提交按钮"/>
</td>
<td>
value表示的是按钮上显示的文本值
</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>
<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="10"></textarea>
</td>
<td>
cols--列数设置宽度,rows--行数设置高度<br>
输入超过大小空间之后自带滚动条
</td>
</tr>
</table>
</form>
</body>
</html>
练习:完成一注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
</head>
<body>
<form action="/" method="post">
<table align="center" width="600px" cellpadding="7px" bgcolor="skyblue" >
<tr>
<td colspan="3" align="center"><font size="5
" color="white">欢迎注册</font></td>
</tr>
<tr>
<td align="right" width="150px"><font size="" color="white">用户名:</font></td>
<td>
<input type="text" name="" id="" value="" placeholder="45" style="width: 350px;height: 20px;"/>
</td>
</tr>
<tr>
<td align="right" width="150px"><font size="" color="white">请设置密码:</font></td>
<td>
<input type="password" name="" id="" placeholder="请输入密码" style="width: 350px;height: 20px;"/>
</td>
</tr>
<tr>
<td align="right" width="150px"><font size="" color="white">请确认密码:</font></td>
<td>
<input type="password" name="" id="" placeholder="请再次确认密码" style="width: 350px;height: 20px;"/>
</td>
</tr>
<tr>
<td align="right" width="150px"><font size="" color="white">电子邮箱:</font></td>
<td>
<input type="email" name="" id="" placeholder="请输入电子邮箱" style="width: 350px;height: 20px;"/>
</td>
</tr>
<tr>
<td align="right" width="150px"><font size="" color="white">验证手机:</font></td>
<td>
<input type="email" name="" id="" placeholder="请输入手机号码" style="width: 350px;height: 20px;"/>
</td>
</tr>
<tr>
<td align="right" width="150px"><font size="" color="white">短信验证码:</font></td>
<td>
<input type="email" name="" id="" placeholder="请输入手机号码" style="width: 175px;height: 20px;"/>
<input type="button" name="" id="" value="获取短信验证码" style="height: 26px;"/>
</td>
</tr>
<tr>
<td align="right" width="150px"><font size="" color="white">性别:</font></td>
<td>
<input type="radio" name="sex" id="" value="nan" checked="checked"/><font size="" color="white">男</font>
<input type="radio" name="sex" id="" value="nv" /><font size="" color="white">女</font>
</td>
</tr>
<tr>
<td align="right" width="150px"><font size="" color="white">联系地址:</font></td>
<td>
<input type="text" name="" id="" placeholder="请输入地址" style="width: 350px;height: 20px;"/>
</td>
</tr>
<tr>
<td></td>
<td align="left" valign="middle">
<input type="checkbox" name="" id="" value="" /><font size="2" color="white">我已阅读并同意</font>
<a href="http://zc.yy.com/license.html" target="_blank"><font size="1" color="black">《宝腾用户注册协议》</font></a>
</td>
</tr>
<tr>
<td></td>
<td align="left">
<input type="submit" name="tianjia" id="" value="立即注册" style="color: white;background-color: greenyellow;width: 355px;height: 26px;"/>
</td>
</tr>
<tr>
<td></td>
<td>
<font size="1" color="white">已有账号</font>
<a href="http://www.ankangcaifu.com/" target="_blank"><font size="0.5" color="black">直接登录</font></a>
</td>
</tr>
</form>
</table>
</body>
</html>