表格标签
首先通过一个简单的实例代码来看一下表格标签的基本使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table align="center" border="1" cellspacing="0" cellpadding="0" width="500" height="250">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
<tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="up.jpg"/></td>
<td>345</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百度</a></td>
</tr>
</tbody>
</table>
</body>
</html>
首先是最外层的<table>，它是一个双标签，表示我们要定义一个表格。在这个标签当中，我们还发现里面有一些属性，它们的具体作用如下
然后是内部第一层的<thead>和<tbody>，从名字上我们就能看出它们分别指表格的表头和主体部分，有时候我们需要将表格的表头和主体部分进行分离，这时候就需要这两个标签。这两个标签被称为表格的结构标签。
接着我们看到<tr>，这是用于定义表格行的标签，一个该标签定义一行表格。最后我们对比最里面的标签的时候发现了不同之处，一个是<th>，另一个是<td>。其实这两个都是单元格标签，中间就是单元格的内容，不同之处在于<th>是表头单元格，它里面的内容都会加粗居中显示，<td>就是普通的单元格啦！单元格里面除了文字，还可以添加图片等内容。
在实际应用当中，对于表格我们还有一个常用的操作，就是合并单元格，比如我们经常用到的登记表需要粘贴照片的位置一般都是合并了的单元格，合并单元格的一般步骤如下：
- 先确定是跨行还是跨列合并。
- 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>。
-
删除多余的单元格。
来看一个示例，新建一个3*3的表格并且合并单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合并单元格</title>
</head>
<body>
1.确定跨行还是跨列合并<br />
2.在目标单元格上书写命令<br />
3.删除多余单元格
<table border="1" width="500" height="250" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
这里需要注意的就是确定是跨行还是跨列合并，跨行就是最上面的是目标单元格，而跨列自然就是最左边的是目标单元格。选取对应的命令后，还要注意合并之后单元格数量改变，多余的单元格必须要删除。
列表标签
无序列表
基本语法格式如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
注意事项就是只能以<li></li>的形式向无序列表中添加数据，否则不能显示。无序，顾名思义就是各个<li>之间的元素是并列的，它们之间没有顺序排列的关系。
有序列表
有序列表语法与无序列表基本一致，不过它里面的元素就是有顺序的，有序列表会为我们自动生成排序，依照我们输入数据的顺序。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
自定义列表
自定义列表一般就是在对某个术语或名词进行说明的时候使用，比如这样
元素之前没有任何的符号，也都是并列关系
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
表单标签
表单域
表单常用来收集用户的信息，就比如我们经常都会遇见的注册页面，它会让我们填写各种各样的信息，比如用户名、密码、邮箱等等，这就是利用表单来实现的。
初始化一个表单使用的是<form>
<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>
后面的三个属性依次是接收数据的服务器程序地址、提交数据的方法、表单域的名字（区分表单）。
表单控件（表单元素）
首先是input，控制输入信息的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="xxx.php" method="get">
text 表示文本框，用户可以输入内容<br />
maxlength 限定输入的最大字符长度<br />
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"><br />
password 密码框，输入的内容被掩码<br />
密码:<input type="password" name="pwd"><br />
radio单选按钮<br />
对于这种只能选择一个的单选按钮，name要定为同一个值<br />
checked属性表示默认选中<br />
性别：<input type="radio" name="sex" value="男"> 男 <input type="radio" name="sex" checked="checked" value="女"> 女<br />
checkbox 复选框<br />
爱好：<input type="checkbox" name="hobby">看书 <input type="checkbox" name="hobby">打游戏<input type="checkbox" name="hobby"> 运动<br />
<input type="checkbox" checked="checked" >我同意使用以上信息
<br />
submit将数据提交到服务器<br />
<input type="submit" value="立即注册"><br />
reset还原表单为初始状态<br />
<input type="reset" value="重新填写"><br />
button 普通按钮，一般用来启动JS脚本<br />
<input type="button" value="发送验证码"><br />
file 文件域 用于上传文件<br />
<input type="file">
</form>
</body>
</html>
然后是<lable>，这是一个提升用户体验的表单的标签，有时候选择的按钮太小不方便单击，利用这个标签，直接点击按钮对应的文字或者图片就可以选中按钮了
<input type="radio" id="man" name="sex">
<label for="man">男</label>
<input type="radio" id="woman" name="sex">
<label for="woman">女</label>
接着有<select>和<textarea>：
<form>
籍贯：<select>
<option>北京</option>
<option>上海</option>
<option>哈尔滨</option>
<option selected="selected">重庆</option>
</select>
</form>
这个简单易懂，就是以一个下拉菜单，用户选择菜单里面我们预设的内容。这里最后一个选项里面有一个selected="selected"，他表示默认选项，页面打开时这个选项就会被默认选中。之前在input里面的checked也是这个功能。
<form>
留言：<textarea cols="20" rows="6">请输入您的留言
</textarea>
</form>
拓展
平时学习除了看视频和书，还要学会查阅文档，经常查阅有助于提高我们对新知识的熟悉程度和熟练利用的能力
百度: http://www.baidu.com（无所不能的度娘）
W3C : http://www.w3school.com.cn/（涵盖Web前端相关的几乎所有知识，推荐）
MDN: https://developer.mozilla.org/zh-CN/（直接上核弹！！！）
