HTML&CSS_html根据后端数据个数出现多个文本-CSDN博客

本文链接：https://blog.csdn.net/qq_42105648/article/details/104027455

HTML&CSS

HTML基础入门

1.HTML概述

HTML:超级文本标记语言（HyperText Markup Language）

“超文本”就是指页面内可以包含图片、链接等非文字内容。
“标记”就是使用标签的方法将需要的内容包括起来。例如：<a>www.baidu.com</a>

1.1HTML能干什么

HTML用于编写网页。平时上网通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问网页时，可以通过“右键/查看网页源代码”看到具体的html代码。
网页内容包含：HTML代码、CSS代码、JavaScript代码等内容。

HTML代码：用于展示需要显示的数据。
CSS代码：使显示的数据更佳好看。
JavaScript代码：使整个页面显示的数据具有动画效果。

网页根据内容是否改变分为：静态页面、动态页面

静态页面：编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。
动态页面：会根据不同的情况展示不同的内容。例如：登录成功后右上角显示用户名。

1.2HTML语言特点

HTML文件不需要编译，直接使用浏览器阅读即可
HTML文件的扩展名是*.html 或 *.htm
HTML结构都是由标签组成
- 标签名预先定义好的，我们只需要了解其功能即可。
- 标签名不区分大小写
- 通常情况下标签由开始标签和结束标签组成。例如：<a></a>
- 如果没有结束标签,建议以/结尾。例如:<img />
HTML结构包括两部分：头head和体body

1.3创建模板

在任意位置（F盘根目录），创建“文本文档”，重命名“1.html”
右键/打开方式/记事本，开发html文件，并编写如下内容

<html>
	<head>
		<title>这是标题</title>
	</head>
	<body>
		这里是正文
	</body>
</html>

以上使用的标签组成了HTML页面的基本结构，现将所有标签进行陈述：

<html> 整个页面的根标签，理论上一个页面只需要一个，由头和体组成。
- <head> 头标签，用于引入脚本、导入样式、提供元信息等。一般情况下头标签的内容在浏览器端都不显示。
- <title>子标签，用于显示浏览器标题。
<body>体标签，是整个网页的主体，我们编写的html代码基本都在此标签体内。

2.基本标签使用

2.1标题标签:

HTML提供<hn>系列标签,用于修饰标题,包含:<h1>,<h2>,<h3>,<h4>,<h5>,<h6>。<h1>定义最大的标题。<h6>定义最小的标题

2.2HTML 水平线:

<hr /> 标签在 HTML 页面中创建一条水平分隔线，用于定义内容中的主题变化。
size属性：水平线的高度，单位像素
noshade属性：没有阴影，取值：noshade，表示显示纯色

2.3字体标签:

<font> 用于设置字体尺寸、字体颜色等。
size属性：设置字体的大小。可能的值：从 1 到 7 的数字。浏览器默认值是 3。
color属性：设置字体的颜色

2.4格式化标签：

<b> 粗体
<i> 斜体

2.5段落化标签：

<p> 定义段落。p 标签会自动在其前后创建一些空白。
<br /> 插入单个换行。

2.6图片标签：<img>

<img> 在html页面中引用一张图片

src ：指定需要显示图片的URL（路径)
alt：图片无法显示时代替的文本
width ：设置图像的宽度
height ：定义图像的高度
title：鼠标移上显示

2.7列表标签：<ol><ul>

<ol>定义有序列表
- type列表类型,取值:a,A,I,i,1等
<ul>定义无序列表
- type符号的类型,取值:disc实心圆,square方块,circle空心圆
<li>定义列表项.是<ul>或<ol>的子标签

2.8超链接标签</a>

</a>标签是超链接，是在html页面提供一种可以访问其他位置的实现方式。

href：用于确定需要显示页面的路径（URL）
target：确定以何种方式打开href所设置的页面。常用取值：_blank、_self 等
_blank 在新窗口中打开href确定的页面。
_self 默认。使用href确定的页面替换当前页面。

2.9表格标签<table><tr><td>

HTML表格由<table>标签以及一个或多个<tr>、<th>或<td>标签组成。

<table> 是父标签，相当于整个表格的容器。
- border 表格边框的宽度
- width表格的宽度
- cellpadding单元边沿与其内容之间的空白
- cellspacing单元格之间的空白
- bgcolor表格的背景颜色
<tr>标签用于定于行
<td>标签用于定义表格的单元格(一个列)
- colspan 单元格可横跨的列数
- rowspan 单元格的可横跨的行数
- align 单元格内容的水平对齐方式,取值：left左，right右，center居中。
- nowrap单元格中的内容是否折行

2.10框架标签：<frameset>

<frameset> 标签，是多个窗口页面整合在一起的一个集合（框架集）。每一个页面（框架）都是单独文档，需要使用子标签来确定页面的位置。<frameset>通过列和行来确定整体布局，使用cols确定列数，使用rows确定行数。多个<frameset>可以嵌套使用。

<frameset>和<body>两个不能共存。
rows属性和cols属性取值：值1,值2,值3,…… 一个值表示一行（列），多值使用逗号分隔，值可以是 10px、10% 等，最后一个值如果不想计算可以使用*匹配剩余量。

2.11 框架子标签：<frame>

<frame>标签，用于设置<frameset>框架集中的一个页面（框架）。

src属性：确定页面的路径
noresize属性：框架分隔先不能移动
target属性：确定需要显示的页面在何处显示

2.12框架案例：<frameset>

框架.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

<!-- 页面进行分割,
	rows:行切 80,*
	上面部分80,下面全满
-->
<frameset rows="80,*"> 
	<!--上面部分,a.html -->
	<frame name="top" src="a.html"> 
	<!-- 页面进行分割, cols列分  -->
<frameset cols="150,*"> 
	<frame name="lower_left" src="b.html"> 
	<frame name="lower_right" src="c.html"> 
</frameset> 
</frameset> 

</html>

a.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		我是a.html
	</body>
</html>

b.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		我是b.html  <br />
		<!-- target 属性默认是 "_self"-->
		<a href="d.html" target="lower_right">点我是连接</a>
	</body>
</html>

c.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		我是c.html
	</body>
</html>

d.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		我是d.html
	</body>
</html>

2.13表单标签：<form>

<form> 表单标签，表单标签在浏览器上没有任何显示。

作用: 收集浏览器用户进行输入的数据, 并把数据发送到服务器端
属性
- action：表示用户输入的内容, 被发送到服务器端的路径
- method：表单数据发送方式。常用的取值：GET、POST

<body>
    <!--表单-->
    <form action="#" method="get">
        <!--此处的内容可以被表单收集, 提交到服务器-->
    </form>
    <!--此处的内容在<form>标签外，此处数据表单收集不到, 不能提交到服务器-->
</body>

2.14输入标签<input>

在这里插入图片描述
<input> 标签用于获得用户输入信息，type属性值不同，搜集方式不同。最常用的标签。

文本输入框:
属性type=“text” | value=“文本框的默认值” | placeholder=“输入框预期值的提示信息” | name：发送给服务器的名称
密码输入框:
属性type=“password” | placeholder=“输入框预期值的提示信息” | name：发送给服务器的名称
单选按钮:
属性type=“radio” | name=“定义名字”,同名的单选按钮可以保证单选 | checked=“checked” 默认选中属性.
复选按钮:
属性type=“checkbox” | checked=“checked” 默认选中属性
文件域:
属性type=“file” | 文件上传服务器
按钮:
- 普通按钮:
  属性 type=“button” | value=“按钮上显示文本”
  用于配合后面的技术JavaScript
- 重置按钮:
  属性 type=“reset”
- 提交按钮: 表单数据发送到服务器
  提交按钮: 属性 type=“submit”
  图片按钮: 属性 type=“image”

<form action="#" method="get">
    <!-- 文本输入框 -->
    用户名:<input type="text" value="" placeholder="请输入用户名" name="user"/> <br/>
    <!-- 密码输入框 -->
    密　码:<input type="password" placeholder="请输入密码" name="pass"/> <br/>
    <!-- 单选按钮 -->
    性　别:<input type="radio" name="gender" checked="checked"/>男
    	  <input type="radio" name="gender" />女 <br/>
    <!-- 复选按钮 -->
    爱　好:<input type="checkbox" checked="checked"/ name="hobby">抽烟
    	  <input type="checkbox" name="hobby"/>喝酒
    	  <input type="checkbox" name="hobby"/>打牌 <br />
    <!-- 文件域 -->		
    上传头像:<input type="file" /> <br />
    <!-- 普通按钮 -->
    <input type="button" value="点我提交"/>
    <!-- 重置按钮 -->
    <input type="reset" />
    <!-- 提交按钮 -->
    <input type="submit" />
    <input type="image" src="img/btn.jpg"/>
</form>

2.14下拉菜单

在这里插入图片描述

<select> 下拉列表。可以进行单选或多选。需要使用子标签指定列表项
- 属性name：发送给服务器的名称 | multiple属性：不写默认单选，取值为“multiple”表示多选。| size属性：多选时，可见选项的数目。

<option> 子标签：属于下拉列表中的一个选项（一个条目）。
- 属性selected ：勾选当前列表项 | value ：发送给服务器的选项值

<form action="#" method="get">
    <!-- 下拉列表 -->
    <select name="city" multiple="multiple" size="5">
        <!-- 列表项 -->
        <option value ="beijing">北京</option>
        <option value ="shanghai">上海</option>
        <option value ="guangzhou">广州</option>
        <option value ="shenzhen">深圳</option>
        <option value ="hangzhou">杭州</option>
        <option value ="tianjin">天津</option>
    </select>

    <input type="submit" />
</form>

2.15多行文本域

在这里插入图片描述
<textarea> 文本域。多行的文本输入控件。

cols属性：文本域的列数
rows属性：文本域的行数

<form action="#" method="get">
    <!-- 多行文本域 -->
    <textarea name="area" cols="50" rows="8"></textarea>

    <input type="submit" />
</form>

2.16提交方式区别

在这里插入图片描述
服务器提交方式GET和POST区别

GET:
表单提交的参数,放在浏览器地址栏, 暴露敏感数据; 浏览器的地址栏数据有限的,不适合提交过大的数据
?user=tom&pass=123&gender=女&hobby=抽烟&hobby=喝酒
数据的格式 k=v 多个键值对使用 & 分割
服务器获取提交的数据,依靠是键
POST:
表单提交的参数,不会显示在地址栏上; 不会暴露敏感信息; 没有数据大小的限制

HTTP协议区别:

GET: 参数放在请求行
POST: 参数放在请求体

<form action="#" method="post">
    用户名<input type="text"  placeholder="请输入用户名" name="user"/><br />
    密　码<input type="password" placeholder="请输入密码" name="pass" /> <br />
    性　别<input type="radio" name="gender" checked="checked" value="男"/> 男 
    	 <input type="radio" name="gender" value="女"/> 女 <br />

    爱　好<input type="checkbox" name="hobby" checked="checked" value="抽烟"/>抽烟
    	 <input type="checkbox" name="hobby" value="喝酒"/>喝酒
    	 <input type="checkbox" name="hobby" value="打牌"/>打牌 <br />

    <input type="submit" />
</form>

3.DIV+CSS

3.1div标签span标签

div标签: div 块级元素标签
- 霸占屏幕的一行, 就是页面中的一个行
- 配合CSS样式表使用
span标签: span 行级元素标签
- 不会占屏幕一行
- 配合CSS样式表

<body>
    <div>123</div>
    <span>我是span标签</span>4
</body>

3.2css样式作用和语法

CSS (Cascading Style Sheets) ：指层叠样式表. 指使用不同的添加方式，给同一个HTML标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签。

主要用于设置HTML页面中的文本内容（字体、大小、对其方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。
作用: 美化页面作用. HTML负责显示数据, CSS负责美化效果

语法结构

选择器{
    属性名:属性值;
    属性名:属性值;
}

选择器: 指定对HTML的哪个标签起作用

div {
    width: 200px;
    height: 200px;
    border: red 1px solid;
}

3.3css引入方式

css引入方式一_行内

行内样式:
- 在HTML标签中添加属性 style=“属性:属性值”
- 作用域最小,作用当前标签; 行内样式的优先级最高

<body>
    <h3 style="color: red;">h3标签</h3>
    <h3>哈哈</h3>
</body>

css引入方式二_内部

内部样式:
- 在HTML页面里面写CSS代码, 一般写在中, 使用标签 style , 属性: type=“text/css”
- 作用是当前整个页面有效

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            h3{color: chocolate;}
        </style>
    </head>
    <body>
        <h3>h3标签</h3>
        <h3>哈哈</h3>
    </body>
</html>

css引入方式三_外部

外部样式:
- CSS样式定义在另一个文件中,后缀名.css (文本文件)
- 在HTML页面中,引入样式表, 使用link标签写在head中
  - 属性: href=“css文件路径” | type=“text/css” | rel=“引入的文件和当前页面是什么关系”
- 作用范围最大,哪个页面引入,哪个有效

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="css/1.css"  type="text/css" rel="stylesheet"/>
	</head>
	<body>
		<h3>h3标签</h3>
		<h3>哈哈</h3>
	</body>
</html>

css/1.css

h3{
	color: blue;
}

3.4css选择器

css基本选择器
选择器就是对HTML标签设置样式作用

标签元素选择器
用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
其基本语法格式如下：标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
ID选择器
id选择器使用“#”进行标识，后面紧跟id名.
其基本语法格式如下：#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
需要在html标签上,添加属性id=“选择器名”, 配合ID选择器进行使用
class选择器,类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名
其基本语法格式如下：.类名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
需要在html标签上,添加属性class=“选择器名”, 配合class选择器进行使用

 注意:
	 尽量不要使用ID选择器,如果需要使用ID选择器. 要保证：ID的属性值具有唯一性
	 因为后面学习的JavaScript技术中: 对象document中的方法getElementById("one"), 会把标签变成对象,只要找到第一个了,后面就不找了. 所以,ID的属性值要唯一.
  	 当使用ID选择器和class选择器, 对同一个标签设置相同属性时, ID选择器 优先级高于 class选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*标签元素选择器,选择器名字和标签名相同*/
            h1{
                color: red;
            }
            /*ID选择器*/
            #one{
                color: blue;
            }
            /*class选择器*/
            .two{
                color: yellow;
            }
        </style>
    </head>
    <body>
        <h1>123</h1>
        <h1>456</h1>       
        <h2 id="one">789</h2> 
        <h2 class="two">789</h2>
    </body>
</html>

css属性选择器

属性选择器，在标签后面使用中括号标记

其基本语法格式如下：标签名[标签属性=’标签属性值’] {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			input[type="text"]{
				color: red;
			}
			
			input[type="password"]{
				background-color: green;
			}
		</style>
	</head>
	<body>
		用户名<input type="text" /><br />
		密　码<input type="password" />
	</body>
</html>

包含选择器

包含选择器，两个标签之间使用空格，给指定父标签的后代标签设置样式，可以方便在区域内编写样式。
其基本语法格式如下：父标签后代标签{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div span{
				color: red;
			}
		</style>
	</head>
	<body>
        <div>哈哈</div>
        <div>
        	<span>div中的span</span>
        </div>
        <span>就是span</span>
	</body>
</html>

css伪元素选择器

CSS伪元素用于将特殊的效果添加到某些选择器。例如: 超链接的不同状态都可以指定不同的效果.

四个状态: 没点过,点过,鼠标悬浮,激活
样式: 固定顺序 l-v-h-a

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a:link{color: #333333; text-decoration: none;}/*没点过*/
			a:visited{color: #333333;text-decoration: none;}/*点过*/
			a:hover{color: red;text-decoration: none;}/*鼠标悬浮*/
			a:active{color: green;text-decoration: none;}/*激活*/
		</style>
	</head>
	<body>
        <a href="http://www.itheima.com">黑马</a>
        <a href="http://www.baidu.com">百度</a>
	</body>
</html>

3.5css常用属性

css边框属性

border ：设置边框的样式
- 格式：宽度样式颜色
- 例如：style=”border:1px solid #ff0000” ，1像素实边红色。
- 样式取值：solid 实线，none 无边，double 双线等
width、height：用于设置标签的宽度、高度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                /*设置边框 粗细,样式(实线,虚线,点划线,双实线),颜色*/
                /*border-right: 5px  solid yellow;*/
                border: 10px solid  cyan;
            }
        </style>
    </head>
    <body>
        <div>我是div</div>
    </body>
</html>

css转换属性

语法格式: 选择器{display:属性值}
常用的属性值：

inline：此元素将显示为行内元素（行内元素默认的display属性值）, 常见行内元素有: <span>、<a>
block：此元素将显为块元素（块元素默认的display属性值）,常见块元素有:<div>、<h1>、<ul>
none：此元素将被隐藏，不显示，也不占用页面空间。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
		<div style="display: inline;">我是div</div> 2
		<span style="display: block;">我是span</span>3
		<div style="display: none;">我是隐藏的div</div>
    </body>
</html>

css字体属性

常用的属性值：

font-size:文本大小
font-family: 字体
color: 颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				font-family: 楷体;
				font-size: 32px;
				color: red;
			}
		</style>
	</head>
	<body>
        <div>我是div</div>
	</body>
</html>

css背景属性

常用的属性值：

background-color 背景色
background-image 背景图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			body{
				background-color: red;
				background-image: url(img/btn.jpg);
			}*/
			
			div{
				width: 200px;
				height: 200px;
				
				background-image: url(img/btn.jpg);
				background-color: blue;
			}
		</style>
	</head>
	<body>
        <div>我是div</div>
	</body>
</html>

css浮动属性

通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动
在这里插入图片描述

使用浮动: 选择器{float:属性值;}
常用属性值：left：元素向左浮动 | right：元素向右浮动 | none：元素不浮动（默认值）

由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。如果要避免影响，需要使用clear属性进行清除浮动。

清除浮动: 选择器{clear:属性值;}
常用属性值：
- left：不允许左侧有浮动元素（清除左侧浮动的影响）
- right：不允许右侧有浮动元素（清除右侧浮动的影响）
- both：同时清除左右两侧浮动的影响

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	CSS浮动属性
        	float: 两个div在同一行出现
        	  div1 漂浮起来
        	清除浮动: clear  不会跟随上一个元素浮动
        -->
        <div>
        	<div style="float: left;">div1</div>
        	<div style="float: left;">div2</div>
        	<div style="clear: both;">div3</div>     	
        </div>
	</body>
</html>

css盒子模型

在这里插入图片描述
什么是盒子模型: CSS的框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

边框 border
- 也可以使用下面四个单端的属性, 分别设置上、右、下、左的边框：
- border-top-style | border-right-style | border-bottom-style | border-left-style
外边距：margin, 设置不同元素之间, 它们边框与边框之间的距离
- 也通过使用下面四个单独的属性，分别设置上、右、下、左的外边框：
- margin-top | margin-right | margin-bottom | margin-left
内边距 padding, 设置元素边框与元素内容之间的距离
- 也通过使用下面四个单独的属性，分别设置上、右、下、左的内边距：
- padding-top | padding-right | padding-bottom | padding-left

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				/* 边框 */
				border: 1px solid red;
				/* 外边距 */
				margin-top: 50px;
				margin-left: 100px;
				/* 内边距 */
				padding-top: 5px;
				padding-left: 10px;
			}
		</style>
	</head>
	<body>
		<!--
        	盒子模型:处理边距的
        -->
        
        <div>我是div</div>
	</body>
</html>

css盒子模型框模型 (Box Model) 多属性值使用:

margin: 50px; 上下左右
margin: 10px 50px; 上下 10 , 左右50
margin: 10px 20px 30px; 上10 ,左右20, 下30
margin: 10px 20px 30px 40px; 顺时针上右下左
margin: 0 auto; 上下0, 左右距离自动调整(居中)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				border: red 1px solid;
			}
			.top {
				width: 600px;
			}
			.bottom {
				width: 600px;
				clear: both;
                /* margin: 0 auto; 上下0, 左右距离自动调整(居中) */
				margin: 0 auto;
			}
			.box {
				float: left;
			}
			/* css盒子模型框模型 (Box Model) 多属性值使用 */
			.box_model {
				float: left;
				/* margin: 50px; 上下左右 */
				/* margin: 10px 50px;  上下 10 , 左右50 */
				/* margin: 10px 20px 30px; 上10 ,左右20, 下30 */
				/* margin: 10px 20px 30px 40px;  顺时针 上 右  下 左 */
			}
				
		</style>
	</head>
	<body>
		<div class="top">上边div</div>
		<div class="box">左边div</div>
		<div class="box_model"><img src="img/btn.jpg"/></div>
		<div class="box">右边div</div>
		<div class="bottom">下边div</div>
	</body>
</html>

4.注册页面实战

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				background-image: url(img/bg.jpg);
			}
			/*注册div*/
			.form{
				width: 550px;
				height: 400px;
				border: 1px solid black;
				background-color: white;
				margin: 0 auto;
				margin-top: 100px;
			}
			
			.form span{
				color: blue;
				font-size: 22px;

				margin-left: 100px ;
			
			}
		</style>
	</head>
	<body>
		<div class="form">
			<br />
			<br />
			<br />
			<span>用户注册</span><b> USERREGiSTER</b>
		  <form action="#" method="post">	
			<table align="center">
				<tr>
					<td>用户名</td>
					<td><input type="text"></td>
					<td></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password"></td>
					<td></td>
				</tr>
				<tr>
					<td>性别</td>
					<td><input type="radio" name="gender">男<input type="radio" name="gender">女</td>
					<td></td>
				</tr>
				<tr>
					<td>验证码</td>
					<td><input type="text"></td>
					<td><img src="img/checkcode.jpg"></td>
				</tr>
				<tr>
					<td  align="center" colspan="3"><input type="image" src="img/btn.jpg"></td>
					<!--<td></td>
					<td></td>-->
				</tr>
			</table>
			</form>
		</div>
	</body>
</html>