复合标签
列表标签
<!-- 无序列表 type为类型：disc实心圆（默认）square实心方块 circle空心圆-->
<ul type="square">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>PHP</li>
</ul>
<!--- ol有序列表 -->
<!-- type的值为：1(默认) a A I i -->
<!-- start为从type的第几个值开始，reversed为是否逆序排列 -->
<ol type="I" start=5 reversed>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ol>
表格table
<table width="200px" align="center" cellspacing=0 cellpadding="5px" border="1">
<caption>学生信息表</caption>
<!-- bgcolor为背景颜色 -->
<tr bgcolor="aliceblue">
<!-- th默认居中 -->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr align="center">
<td>zs</td>
<td>男</td>
<!-- rowspan为跨行合并，合并的时候注意将下一行对应的列数删除 -->
<td rowspan=2>18</td>
</tr>
<tr align="center">
<td>ls</td>
<td>男</td>
</tr>
运行结果
表单form
作用：收集信息
input输入框
<form action="#" method="get" name="fr"><br />
用户名：<input type="text" name="uname" placeholder="请输入用户名"/><br />
密码：<input type="passsword" name="pwd" placeholder="请输入密码"><br />
性别：<input type="radio" name="sex" value="0">男 <input type="radio" name="sex" value="1">女<br />
喜欢的水果：<input type="checkbox" name="fruit" value="0">苹果
<input type="checkbox" name="fruit" value="1">香蕉<br />
<input type="reset" value="重置" /><br />
<input type="submit" value="提交" /><br />
</form>
运行结果
注意：input中还有其它type值：email(提交的时候会校验格式) color number(可设置min和max) range hidden(隐藏输入框) file 大家可以自行测试
按钮
<!-- button按钮也可以实现提交功能 -->
<button>提交</button>
下拉选项
<!-- size表示显示的option的数目，multiple表示可以一次选多个 -->
<select name="province" size=2 multiple>
<option value="0">北京</option>
<option value="0">上海</option>
<option value="0">四川</option>
<option value="0">甘肃</option>
</select>
多行文本框
<!-- cols表示多少列，rows表示多少行 -->
<textarea name="tex" cols="30" rows="10">简单介绍</textarea>
表单外边框
<fieldset>
<legend>登录信息</legend>
蓝
</fieldset>
运行结果
练习1：利用table标签完成简历，效果如下图
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>个人简历表</title>
</head>
<body>
<table border="1" width="500px" cellspacing="0" align="center">
<caption>个人简历表</caption>
<tr align="center">
<td>求职意向</td>
<td colspan="6"></td>
</tr>
<tr bgcolor="#94CB54">
<th colspan="7">基本信息</th>
</tr>
<tr align="center">
<td>姓名</td>
<td> </td>
<td>性别</td>
<td></td>
<td>民族</td>
<td> </td>
<td rowspan="4">照片</td>
</tr>
<tr align="center">
<td>出生日期</td>
<td></td>
<td>政治面貌</td>
<td></td>
<td>婚否</td>
<td></td>
</tr>
<tr align="center">
<td>籍贯</td>
<td></td>
<td>现所在地</td>
<td></td>
<td>学历</td>
<td></td>
</tr>
<tr align="center">
<td>毕业院校</td>
<td colspan="2"></td>
<td>所学专业</td>
<td colspan="2"></td>
</tr>
<tr align="center">
<td>电子邮件</td>
<td colspan="2"></td>
<td>手机号码</td>
<td colspan="3"></td>
</tr>
<tr bgcolor="#94CB54">
<th colspan="7">教育背景</th>
</tr>
<tr align="center">
<td colspan="2">起止时间</td>
<td colspan="2">毕业院校/教育机构</td>
<td colspan="3">专业课程</td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"></td>
<td colspan="3"></td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"></td>
<td colspan="3"></td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"></td>
<td colspan="3"></td>
</tr>
<tr bgcolor="#94CB54">
<th colspan="7">工作经历</th>
</tr>
<tr align="center">
<td colspan="2">起止时间</td>
<td colspan="2">公司名称及职位</td>
<td colspan="3">工作内容</td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"></td>
<td colspan="3"></td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"></td>
<td colspan="3"></td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"></td>
<td colspan="3"></td>
</tr>
<tr height="85px" align="center">
<td>技能/爱好</td>
<td colspan="6"></td>
</tr>
<tr height="85px" align="center">
<td>自我评价</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
练习2：利用table和form表单及表单域下中的各种控件完成注册页面的编程，效果图如下
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>个人简历表</title>
</head>
<body>
<form action="#">
<table width="400px" bgcolor="#9CD2A3" border="1" align="center">
<tr>
<th colspan="2">会员注册</td>
</tr>
<tr>
<td align="right">用户名:</td>
<td><input type="text" name="uname"/></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td><input type="password" name="sPwd"/></td>
</tr>
<tr>
<td align="right">性别:</td>
<td><input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="1"/>女
</td>
</tr>
<tr>
<td align="right">爱好：</td>
<td>
<input type="checkbox" name="hobby" value="0" />体育
<input type="checkbox" name="hobby" value="1" />音乐
<input type="checkbox" name="hobby" value="2" />文学
<input type="checkbox" name="hobby" value="2" />其他
</td>
</tr>
<tr>
<td align="right">所在城市</td>
<td>
<select name="city">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
</select>
</td>
</tr>
<tr>
<td align="right">照片：</td>
<td>
<input type="file" name="img"/>
</td>
</tr>
<tr>
<td align="right">备注：</td>
<td><textarea name="beizhu" rows="4"></textarea></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
