谷哥的小弟学前端(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
最新文章
- hibernate学习笔记之四 Hibernate的增删改查
- 自定义JSP标签入门
- [mysql]max_allowed_packet ,centos
- elixir 高可用系列(三) GenEvent
- keepalived程序包
- duapp获取mysql用户名密码等等……
- 设置TabBarItem选中时的图片及文字颜色
- c++ 信号量
- Sublime Text 3 安装及简单配置
- 【转】bt协议的详细分析
- block的是发送信号的线程,又不是处理槽函数的线程
- EGE图形库配置(Dev-C++ 5.10 , TDM GCC 4.8.1)
- Archlinux中卸载 Slim
- 4层板的pcb创建
- 【洛谷3047】[USACO12FEB]附近的牛Nearby Cows
- win 10 和 CentOS 7 双系统安装
- C语言中数组使用负数值的标记
- C#版(打败97.89%的提交) - Leetcode 202. 快乐数 - 题解
- 解决 gem 添加sources的时候提示 too many connection resets的问题
- java与xml转换 -- XStreamAlias