html标签详解（2）
http标签详解
声明 1:这里的文字都是我从我自己csdn账号拷贝过来，是本人学习总结的结晶，所以请尊重本作品。2：如要要转载本文章，则要说明文字的出处。3：如有哪里不对欢迎指出。
在上一篇文章中主要讲了，http的一些基础标签，比方说链接标签，图片标签，html框架等，那接下来主要针对表格标签，列表标签，表单标签做一个详细的讲解
1：表格标签
<table></table> 表格的标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!-- 原创作者：蜗牛 --> 5 <title>table标签</title> 6 </head> 7 <body> 8 <table border="1" width="360" height="240" 9 cellspacing="1" cellpadding="1" 10 align="center" bgcolor="red"> <!--这里的center表示该表格在页面的中间位置--> 11 <!--这里的背景色标签是bgcolor--> 12 <caption><h2>我的好朋友</caption> 13 14 <tr> 15 <th>姓名</th> 16 <th>性别</th> 17 <th>年龄</th> 18 <th>爱好</th> 19 </tr> 20 21 <tr align="center"> <!--这里的center表示的是表格里面的字体居中--> 22 <td>小红</td> 23 <td>女</td> 24 <td>20</td> 25 <td>跳舞</td> 26 </tr> 27 28 <tr align="center"> 29 <td>小舵</td> 30 <td>女</td> 31 <td>24</td> 32 <td>唱歌</td> 33 </tr> 34 35 </table> 36 </body> 37 </html>
注解：
<tr> </tr> 标签用于表示行
<td> </td> 标签用于表示列
<th> </th> 标签用于表示表格的标题，用法和 <td> </td>一样只是里面的内容会自动加大加粗
border 设置表格边框的宽度，单位为pixel
width 设置表格宽度，单位为pixel
height 设置表格高度，单位为pixel
cellspacing 设置单元格之间的距离,就指表格表格边框的间距
cellpadding 设置文字距离单元格边框的距离
bgcolor 设置表格的背景颜色
align 用于设置对齐方式，比如center，left，right
<caption> 表头名</caption>用于表示表头
（2）关于合并单元格
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>table中合并单元格</title> 5 </head> 6 <body> 7 <table border="1" width="300" height="200" 8 align="center" background="first.jpg" > <!--background代表的是背景图片，bgcolor代表背景色完全不一样--> 9 10 <tr align="center" width="100" > 11 <td>1</td> 12 <td colspan="2">占两列</td> <!--当colspan="2"表示在同一行中，两列并一列，那么在它下面少写一个<td></td>标签--> 13 <!-- 删除掉此<td></td> --> 14 <td>2</td> 15 </tr> 16 17 <tr align="center" width="100"> 18 <td rowspan="2">占两行</td> <!--当 rowspan="2"表示在同一列中 两行并一行，那么在同一列中删掉一个<td></td>标签--> 19 <td>3</td> 20 <td>4</td> 21 <td>5</td> 22 </tr> 23 24 <tr align="center" width="100" > 25 <!-- 删除掉此<td></td> --> 26 <td>6</td> 27 <td>7</td> 28 <td>8</td> 29 </tr> 30 </table> 31 </body> 32 </html>
运行结果如下：
2：列表标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>列表标签</title> 5 </head> 6 <body bgcolor="#FFFF00"> 7 <!-- 无序列表 --> 8 2017年心愿 9 <ul type="circle"> <!--无序序列<ul> ，无序有circle：圆点，square：小方块--> 10 <li>父母身体健康</li> 11 <li>宝宝健康成长</li> 12 <li>媳妇健健康康</li> 13 </ul> 14 15 <!-- 有序列表 --> 16 2017年大事件 17 <ol type="1" start="2"> <!--有序的标签是<ol>,有序有五种：1,A,a ,i,I，start代表从什么时候开始等于2代表从2开始--> 18 <li>老婆要生小孩了</li> 19 <li>自己换工作了</li> 20 <li>要卖掉一套房</li> 21 </ol> 22 23 <!-- 自定义列表 --> 24 <dl> <!--在自定义列表<dl> </dl>中使用<dt> </dt>表示小标题，使用<dd> </dd>表示列表项--> 25 <dt>时刻告诉自己</dt> 26 <dd>不抱怨</dd> 27 <dd>零负能量</dd> 28 <dd>该与不该</dd> 29 </dl> 30 </body> 31 </html>
运行结果如下：
3：表单
<form></form> 表单标签
1 <!DOCTYPE html> 2 <head> 3 <title>form表单</title> 4 </head> 5 <body> 6 <!--form 指的是表单标签 当前标签的内容在提交的时候都会被自动提交 action=""是指把当前表单提交的位置--> 7 <form action="Myservlet" method="post" onSubmit="return submitFun();"> <!--onSubmit只有当返回为true是才能提交表单--> 8 <fieldset> <!--主要会在相关表单元素周围绘制边框--> 9 <legend>用户注册</legend> <!--在上面绘制的边框绘制的位置写上“用户注册”--> 10 <!--input 一个输入框里 type 的当前输入框的类型 text 是指当前的类型是文本框name是用来区分不同的文本框--> 11 <!--的也是在表单提交后用来获取表单的内容 --> 12 用户名:<input type="text" name="username" /><br/><br/> 13 密码 :<input type="password" name="password"/><br/><br/> <!--password代表输入的文字显示为黑点--> 14 <!--value是指当前表单提交后 获取的值 checked设置默认选中的情况--> 15 性别:男性<input type="radio" name="sex" value="male" checked="checked"> <!--radio代表单选按钮--> 16 女性<input type="radio" name="sex" value="female"> <br/><br/> 17 学历: <select name="education"> <!--select代表下来列表--> 18 <option value="gz">博士</option> <!--option代表每一个值，取名gz为了后台获取--> 19 <option value="yjs">研究生</option> 20 <option value="bk" selected="selected">本科</option> <!--select代表默认选中，本科会显示到界面--> 21 <option value="zk">专科</option> 22 </select> <br/><br/> 23 兴趣爱好:<input type="checkbox" name="likes" value="bike" />骑车 <!--checkbox复选框--> 24 <input type="checkbox" name="likes" value="sleep" checked="checked" />睡觉 <!--checked代表默认选中--> 25 <input type="checkbox" name="likes" value="eat" />吃饭 26 <input type="checkbox" name="likes" value="daima" />敲代码 <br/> 27 备注:<textarea cols="40" rows="5" name="bz"></textarea> <br/><br/> <!--textarea文本域设置行和列--> 28 个人头像:<input type="file"><br> <!--代表可以在电脑上宣文件--> 29 <!--disabled代表不可编辑，我在测试中发现不可编辑状态后台是无法取到这个value值的，想要获得就要在提交时改变为可编辑--> 30 个人网站:<input type="url" value="www.baidu.com" disabled="disabled"> <br> 31 32 个人邮箱:<input type="email"><br> <!--邮箱格式--> 33 34 身体体重:<input type="number"><br> <!--代表只能输入数字--> 35 36 出生日期:<input type="date"><br> <!--可选年月日--> 37 38 详细时间:<input type="time"><br> <!--time--代表显示时分--> 39 40 隐藏项： <input type="hidden" value="你们看不到我"><br> <!--这个隐藏标签有很大的作用，可以不显示在界面，但后台可以获取值--> 41 42 <input type="button" value="填写完毕"> <!--普通的button按钮--> 43 <input type="reset" value="重置信息"> <!--reset代表一按重置所以信息清空--> 44 <input type="submit" value="完成注册"> <!--submi代表所以信息提交到后台,如果上面调用了onSubmit方法，那么返回为true才提交--> 45 <input type="image" src="first.jpg" height="20" width="40"> <!--image也可以进行表单的提交--> 46 47 </fieldset> 48 </form> 49 </body> 50 </html>
效果图如下：
