谷哥的小弟学前端(02)——HTML常用标签（2）

探索Android软键盘的疑难杂症

 深入探讨Android异步精髓Handler

详解Android主流框架不可或缺的基石

 站在源码的肩膀上全解Scroller工作机制

Android多分辨率适配框架（1）— 核心基础

 Android多分辨率适配框架（2）— 原理剖析

 Android多分辨率适配框架（3）— 使用指南

自定义View系列教程00–推翻自己和过往，重学自定义View

自定义View系列教程01–常用工具介绍

 自定义View系列教程02–onMeasure源码详尽分析

 自定义View系列教程03–onLayout源码详尽分析

 自定义View系列教程04–Draw源码分析及其实践

 自定义View系列教程05–示例分析

 自定义View系列教程06–详解View的Touch事件处理

 自定义View系列教程07–详解ViewGroup分发Touch事件

 自定义View系列教程08–滑动冲突的产生及其处理

表格标签

在HTML中常用<table> </table>标签展示表格数据。

<table> </table>标签的结构

<table>
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

一个<table> </table>标签有三部分组成：

<thead> </thead> 表示表格的头部

<tbody> </tbody> 表示表格的主体

<tfoot> </tfoot> 表示表格的尾部

但由于某些浏览器并不支持该表格结构，所以在平常开发中亦不这样写。

<table> </table>标签的使用示例

请看如下示例代码：

    <!DOCTYPE html>
    <html>
        <head>
            <!-- 原创作者：谷哥的小弟 -->
            <!-- 博客地址：http://blog.csdn.net/lfdfhl -->
            <title>table标签</title>
            <meta charset="utf-8" >
        </head>
        <body>
            <table  border="1" width="600"  height="400"
                    cellspacing="0" cellpadding="0"
                    align="center" bgcolor="pink">

                    <caption><h2>我的女朋友们</h2></caption>

                     <tr>
                         <th>姓名</th>
                         <th>年龄</th>
                         <th>职业</th>
                         <th>城市</th>
                     </tr>

                     <tr align="center">
                         <td>小苍</td>
                         <td>18</td>
                         <td>空姐</td>
                         <td>东京</td>
                     </tr>

                     <tr align="center">
                         <td>小井</td>
                         <td>20</td>
                         <td>模特</td>
                         <td>大阪</td>
                     </tr>

                     <tr align="center">
                         <td>小空</td>
                         <td>23</td>
                         <td>教师</td>
                         <td>神户</td>
                     </tr>
                </table>
       </body>
    </html>

效果如图所示：

现就<table> </table>中的主要标签作如下说明：

<tr> </tr>标签用于表示行
<td> </td>标签用于表示列
<th> </th>标签用于表示表格的标题，用法和 <td> </td>一样
border 设置表格边框的宽度，单位为pixel
width 设置表格宽度，单位为pixel
height 设置表格高度，单位为pixel
cellspacing 设置单元格之间的距离
cellpadding 设置文字距离单元格边框的距离
bgcolor 设置表格的背景颜色
align 用于设置对齐方式，比如center，left，right
<caption> <h2>表头</h2></caption>用于表示表头

<table> </table>中合并单元格

先建立一个非常简单的4X4的表格

    <!DOCTYPE html>
    <html>
        <head>
            <!-- 原创作者：谷哥的小弟 -->
            <!-- 博客地址：http://blog.csdn.net/lfdfhl -->
            <title>table中合并单元格</title>
            <meta charset="utf-8" >
        </head>
        <body>
            <table  border="1" width="600"  height="400"
                    cellspacing="0" cellpadding="0"
                    align="center" bgcolor="green">

                      <tr >
                         <td></td>
                         <td></td>
                         <td></td>
                         <td></td>
                     </tr>

                     <tr >
                         <td></td>
                         <td></td>
                         <td></td>
                         <td></td>
                     </tr>

                      <tr >
                         <td></td>
                         <td></td>
                         <td></td>
                         <td></td>
                     </tr>

                      <tr >
                         <td></td>
                         <td></td>
                         <td></td>
                         <td></td>
                     </tr>
                </table>
       </body>
    </html>

合并行单元格：合并第一行的第二个和第三单元格，第四行的第一个和第二单元格

<!DOCTYPE html>
<html>
    <head>
        <!-- 原创作者：谷哥的小弟 -->
        <!-- 博客地址：http://blog.csdn.net/lfdfhl -->
        <title>table中合并单元格</title>
        <meta charset="utf-8" >
    </head>
    <body>
        <table  border="1" width="600"  height="400"
                cellspacing="0" cellpadding="0"
                align="center" bgcolor="green">

                  <tr >
                     <td></td>
                     <td colspan="2"></td>
                     <!-- 删除掉此<td></td> -->
                     <td></td>
                 </tr>

                 <tr >
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                 </tr>

                  <tr >
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                 </tr>

                  <tr >
                     <td colspan="2"></td>
                     <!-- 删除掉此<td></td> -->
                     <td></td>
                     <td></td>
                 </tr>
            </table>
   </body>
</html>

在此利用了<td > </td>标签中的colspan属性合并单元格。

请注意在合并后应该保持原表格的宽高，所以在被合并的行中需要删掉一个了<td > </td>标签

合并列单元格：合并第一列的第二个和第三单元格，第四列的第一个和第二单元格

    <!DOCTYPE html>
    <html>
        <head>
            <!-- 原创作者：谷哥的小弟 -->
            <!-- 博客地址：http://blog.csdn.net/lfdfhl -->
            <title>table中合并单元格</title>
            <meta charset="utf-8" >
        </head>
        <body>
            <table  border="1" width="600"  height="400"
                    cellspacing="0" cellpadding="0"
                    align="center" bgcolor="green">

                      <tr >
                         <td></td>
                         <td></td>
                         <td></td>
                         <td rowspan="2"></td>
                     </tr>

                     <tr >
                         <td rowspan="2"></td>
                         <td></td>
                         <td></td>
                         <!-- 删除掉此<td></td> -->
                     </tr>

                      <tr >
                         <!-- 删除掉此<td></td> -->
                         <td></td>
                         <td></td>
                         <td></td>
                     </tr>

                      <tr >
                         <td></td>
                         <td></td>
                         <td></td>
                         <td></td>
                     </tr>
                </table>
       </body>
    </html>

在此利用了<td > </td>标签中的rowspan属性合并单元格。

请注意在合并后应该保持原表格的宽高，所以在被合并的行中需要删掉一个了<td > </td>标签

表单标签

在HTML中常用<form> </form>标签展示表单。

先来看一个综合小示例，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>form表单</title>
        <!-- 原创作者: 谷哥的小弟-->
        <!-- 博客地址: http://blog.csdn.net/lfdfhl-->
    </head>
    <body>
        <form action="test.php" method="post">
            <fieldset>
                <legend>用户注册信息</legend>
                <br>
                昵称:<input type="text" name="un" maxlength="15">
                <br>
                <br>
                密码:<input type="password" name="pd" maxlength="10">
                <br>
                <br>
                性别:<input type="radio" name="gender"
                            value="m" checked="checked">男
                     <input type="radio" name="gender" value="w">女
                <br>
                <br>
                籍贯:<select >
                     <option >北京</option>
                     <option >辽宁</option>
                     <option >吉林</option>
                     <option >云南</option>
                     <option selected="selected">广西</option>
                     </select>
                <br>
                <br>
                爱好:<input type="checkbox">读书
                     <input type="checkbox">写字
                     <input type="checkbox" checked="checked">弹琴
                <br>
                <br>
                个人简介:
                <br>
                <br>
                <textarea cols="30" rows="10"></textarea>
                <br>
                <br>
                个人头像:<input type="file">
                <br>
                <br>
                个人网站:<input type="url">
                <br>
                <br>
                个人邮箱:<input type="email">
                <br>
                <br>
                身体体重:<input type="number">
                <br>
                <br>
                出生日期:<input type="date">
                <br>
                <br>
                详细时间:<input type="time">
                <br>
                <br>
                <input type="button" value="填写完毕">
                <input type="reset" value="重置信息">
                <input type="submit" value="完成注册">
                <input type="image" src="sg.jpg">
            </fieldset>
        </form>
    </body>
</html>

效果图如下所示:

现就<form> </form>标签的常见用法作一个小结：

action：规定当提交表单时向何处发送表单数据
method：指定用于发送form-data的HTTP方法，例如post
<fieldset></fieldset>：设置表单边框
<legend></legend>：设置表单的名称
<input></input>：搜集用户信息。根据不同的type属性值，输入字段拥有很多种形式，比如：文本、单选框，复选框、单选按钮、按钮、邮件地址，网页地址，日期，时间等等。
在实现单选效果一定要给几个控件设置相同的名称，例如性别的选择
input type=”reset”将表单控件中的值恢复到默认值状态
input type=”image”也可以进行表单的提交

HTML标签语义化

至此，关于HTML中最基本，最常用的标签就介绍完了。在平常使用这些标签的时候请注意以下几点：

请尽量少用无语义的标签div和span。

这样两个标签常用于划分表单的区域，但无实际的语义意义
在语义不明显时若既可使用div也可使用p时，尽量采用有语义的p标签
尽量不使用纯样式标签；如：b、font、u等，请采用CSS设置样式
需要强调的文本请包含在strong或者em标签中，而不采用无语义的b和i

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl