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

来源：互联网发布：ppt软件图标编辑：程序博客网时间：2024/05/21 15:10

探索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

2 0