HTML2

最新推荐文章于 2023-06-11 23:59:49 发布

blake2

最新推荐文章于 2023-06-11 23:59:49 发布

阅读量235

点赞数

文章标签： html

原文链接：https://blog.csdn.net/weixin_53371536/article/details/114326762

版权

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>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。
		   在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上，有时会偶尔走过来一个乡下人，破毡帽护着脑门，胳膊上挽一筐子土豆或萝卜，有气无力地呼唤着买主。唉，城市在这样的日子里完全丧失了生气，变得没有一点可爱之处了。
		</p>
		<h1>平凡的世界 第一部 第2章</h1>
		<p>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。
		   在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上，有时会偶尔走过来一个乡下人，破毡帽护着脑门，胳膊上挽一筐子土豆或萝卜，有气无力地呼唤着买主。唉，城市在这样的日子里完全丧失了生气，变得没有一点可爱之处了。
		</p>
		<h1>平凡的世界 第一部 第3章</h1>
		<p>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。
		   在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上，有时会偶尔走过来一个乡下人，破毡帽护着脑门，胳膊上挽一筐子土豆或萝卜，有气无力地呼唤着买主。唉，城市在这样的日子里完全丧失了生气，变得没有一点可爱之处了。
		</p>
		<h1>平凡的世界 第一部 第4章</h1>
		<p>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。
		   在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上，有时会偶尔走过来一个乡下人，破毡帽护着脑门，胳膊上挽一筐子土豆或萝卜，有气无力地呼唤着买主。唉，城市在这样的日子里完全丧失了生气，变得没有一点可爱之处了。
		</p>
		<h1>平凡的世界 第一部 第5章</h1>
		<p>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。
		   在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上，有时会偶尔走过来一个乡下人，破毡帽护着脑门，胳膊上挽一筐子土豆或萝卜，有气无力地呼唤着买主。唉，城市在这样的日子里完全丧失了生气，变得没有一点可爱之处了。
		</p>
		<h1>平凡的世界 第一部 第6章</h1>
		<p>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。
		   在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上，有时会偶尔走过来一个乡下人，破毡帽护着脑门，胳膊上挽一筐子土豆或萝卜，有气无力地呼唤着买主。唉，城市在这样的日子里完全丧失了生气，变得没有一点可爱之处了。
		</p>
		<h1>平凡的世界 第一部 第7章</h1>
		<p>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。
		   在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上，有时会偶尔走过来一个乡下人，破毡帽护着脑门，胳膊上挽一筐子土豆或萝卜，有气无力地呼唤着买主。唉，城市在这样的日子里完全丧失了生气，变得没有一点可爱之处了。
		</p>
		<h1>平凡的世界 第一部 第8章</h1>
		<p>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。
		   在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上，有时会偶尔走过来一个乡下人，破毡帽护着脑门，胳膊上挽一筐子土豆或萝卜，有气无力地呼唤着买主。唉，城市在这样的日子里完全丧失了生气，变得没有一点可爱之处了。
		</p>
		<h1>平凡的世界 第一部 第9章</h1>
		<p>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。
		   在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上，有时会偶尔走过来一个乡下人，破毡帽护着脑门，胳膊上挽一筐子土豆或萝卜，有气无力地呼唤着买主。唉，城市在这样的日子里完全丧失了生气，变得没有一点可爱之处了。
		</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>

blake2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML2

1.html中的图片标记 img--图片标记常见的属性: 1.src属性--设置图片路径绝对路径---从操作系统的指定盘中的目录开始查找图片的路径。缺点:1.如果图片保存目录太深，图片的操作路径就会很长. 2.当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化。图片无法正常显示。相对路径---以当前网页...
复制链接

扫一扫