谷哥的小弟学前端(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
谷哥的小弟学前端(02)——HTML常用标签（2）的更多相关文章
- 谷哥的小弟学前端(01)——HTML常用标签（1）
探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架 ...
- 谷哥的小弟学前端(11)——JavaScript基础知识（2）
探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 具体解释Android主流框架不可或缺的基石 站在源代码的肩膀上全解Scroller工作机制 Android多分辨率适 ...
- 谷哥的小弟学前端(10)——JavaScript基础知识（1）
探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 具体解释Android主流框架不可或缺的基石 站在源代码的肩膀上全解Scroller工作机制 Android多分辨率适 ...
- 谷哥的小弟学后台(04)——MySQL（4）
探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 具体解释Android主流框架不可或缺的基石 站在源代码的肩膀上全解Scroller工作机制 Android多分辨率适 ...
- Python web前端 01 HTML常用标签
Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...
- 2020年12月-第01阶段-前端基础-HTML常用标签
1. HTML常用标签 首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了. 不会再给结构标签指定样式了. HTML标签有很多,这里我们学习最为常用的,后 ...
- [Web 前端] 005 html 常用标签补充
少废话,上例子 1. 正常的字 <br> <tt>小一点的字体</tt> <br> <small>变小</small> < ...
- 沃土前端系列 - HTML常用标签
html是什么 HTML是Hyper Text Markup Language的缩写,中文的意思是"超文本标记语言",它是制作网页的标准语言.由于网页中不仅包含普通文本,还包含超文 ...
- 前端02 /HTML标签
前端02 /HTML标签 目录 前端02 /HTML标签 1.特殊字符 2.标签分类 标签嵌套 1.块级标签(行内标签) 1.1div标签(块标签) 1.2p标签(块标签) 2.内联标签 2.1 sp ...
随机推荐
- html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。
html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素. 各版本html5shiv.js CDN网址:https://ww ...
- ES6对数组的扩展
ECMAScript6对数组进行了扩展,为数组Array构造函数添加了from().of()等静态方法,也为数组实例添加了find().findIndex()等方法.下面一起来看一下这些方法的用法. ...
- 安装cocoa pods
1.移除现有Ruby默认源 $gem sources --remove https://rubygems.org/ 2.使用新的源 $gem sources -a https://ruby.taoba ...
- Alpha 冲刺（6/10）
队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 测试服务器并行能力 学习MSI.CUDA ...
- POJ 2063 Investment 滚动数组+完全背包
题目链接: http://poj.org/problem?id=2063 题意: 你现在有现金m元,你要做n年的存款投资,给你k种投资方式,每种需要现金vi元,能获得xi元的理论,一年到期后你要利用拿 ...
- unix系统内核优点
1.可靠性高 unix的可靠性2.伸缩性强 unix的伸缩性3.开放性好 unix的开放性4.网络功能强 unix的网络功能这是UNIX系统的又一重要特色,特别是作为Internet网络技术基础的TC ...
- HashMap和HashTable源码分析
HashMap HashMap是一个实现了Map接口的Hash表.提供所有Map的操作,并且允许null key和null value.HashMap几乎等同于HashTable,只不过HashMap ...
- .NET Core 控制台中文乱码问题！
class Program { static void Main(string[] args) { Encoding.RegisterProvider(CodePagesEncodingProvide ...
- zuoyeQAQ
public class StringAPIDemo { /** * @param args */ public static void main(String[] args) { // TODO A ...
- 【第八周】beta阶段事后诸葛亮会议
本文由宫成荣,武志远共同编写 组名: 新蜂 组长: 武志远 组员: 宫成荣 谢孝淼 杨柳 李峤 项目名称: java俄罗斯方块NEO 会议时间:2016.11.15 18:00~18:40 会议地点: ...