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>

运行结果如下：

注意：当你在表格的每个单元格中输入不同内容是，你的的内容长度不同内容会变，要想每个单元格保持一样大有两种方法1；比如当你的表格总hight为400，你设置4行，那么在每个<tr>标签中添加属性：hight=100；就相当于平均分配，同样宽度用同样方法。2：会比第一种简便，就是设置css样式，把tr和td大小固定

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='/images/loading.gif' data-original="first.jpg" height="20" width="40">    <!--image也可以进行表单的提交-->4647     </fieldset>     48   </form>49 </body>50 </html>

效果图如下：