html基础篇（第二篇）
上一篇 html 我们聊了初识 html 的基本常识和所用的浏览器内核以及基础的标签等等，这次我们再聊一聊 html 的表格和表单等语法。这是html基础偏的最后一讲，下次就到了前端重要的样式部分了！注意：本系列文章适合新手小白入门学习。文章如有疏漏请指正。
html中的表格
一般来讲表格是用来展示数据的，而列表是用来布局的，表单是用来收集用户所填写的数据。表格的功能也十分重要，在早期的html中基本上都是用表格来布局用户的数据填写和布局。创建表格的三步走
table：
用户定义表格的标签
tr：
用户定义表格中的行
td：
用户定义表格中的单元格
th：
表头的单元格（加粗显示，一般写在表头）
<table> // 如果是表头的话可以直接设置 th <th> <td>表头的标题</td> </th> // tr 表示表格行 <tr> // td 表示行下的第一格 <td>单元格内的文字</td> … </tr></table>表格属性
border：
设置表格的边框（默认border = “0” 为无边框）
cellspacing：
设置单元格与单元格边框之间的空白间距（默认为2像素）
cellpadding：
设置单元格内容与单元格边框之间的间距
width：
设置表格的宽度 height：
设置表格的高度
align：
设置表格在网页中的水平对齐方式：
left、（向左）right（向右）、center（居中）
caption：
表示表格的标题，随着表格整体开始动 以上的这些属性都是可以直接在table 表格中设定的。
见 图 1 所示
<table border width=”300″ height=”50″ align=”center” cellspacing=”10″ cellpadding=”5″ ><caption>我是表格的标题，我随着表格移动</caption> <tr> <td></td> …. </tr></table>
合并单元格
在表格中也可以有两种的合并操作，一个是跨行合并和跨列合并。
跨行合并：
rowspan = “2”（2表示合并的个数）
跨列合并：colspan = “2”（2表示合并的个数）如 图 2 所示
<table> <tr> <td>1</td> // 跨行合并 <td rowspan=2>1</td> </tr> <tr> <td>2</td> </tr> <tr> // 跨列合并 <td colspan=”2″>3</td> </tr> <tr> <td>4</td> <td>4</td> </tr></table>
表格总结
table：
表格标签
tr：
表格行标签
td：
单元格标签
th：
表头单元标签
caption：
表格标题标签
colspan：
跨列合并
rowspan：
跨行合并
表格的划分结构
再有一个关于表格小小的扩展，在表格中其实还有一种形式表示，这种表示形式容易对表格控制，分为三部分，表头、正文和注脚。这样在chrome 的开发者工具打开，你所看到的是 头部和内容以及尾部三个部分，容易进行管理。如 图3 所示
thead：
表头
tbody：
正文
tfoot：
注脚
<table> <thead> <tr> <td>表格的头部部分</td> </tr> </thead> <tbody> <tr> <td>表格的内容部分</td> </tr> </tbody> <tfoot> <tr> <td>表格的尾部部分</td> </tr> </tfoot></table>
html中的列表标签
在html中还有一种标签是 列表标签，在未来布局的大多数场景中也有大量的使用。特别是整个页面的末尾有大量用到列表标签。列表标签分为有序列表和无序列表。不过在未来css中都会对列表和p、div标签等等有一个初始化的css，对它们统一再修改。这在以后css中可以详细讲解。
ul-li：
无序列表
ol-li：
有序列表
dl-dt：
自定义列表见 图 4 所示“`javascript// 无序列表（使用频率很高）
1
2
// 有序列表
1
2
// 自定义列表
1
2
### 表单标签表单是为了收集用户的信息input：输入框标签“`javascript<input type = “属性值” value = “你好”>
在表单中value表示默认的文本值， type属性值有多种，分别有以下多种
text：
单行文本输入框
password：
密码输入框
radio：
单选按钮
checkout：
复选框
image：
图像形式的提交按钮
file：
文本域
<input type=”password” value=”请输入密码”>
除此之外，表单中还有checked的属性、button和 submit以及reset。
checked：
表示默认选中状态（常见在单选框和复选框中）
button：
普通按钮（普通按钮需要写value值，表示按钮上面的名字）
submit：
提交属性（提交不用写value值）
reset：
重置按钮
// checked 表示默认选中状态<input type=”radio” checked=”checked”>label标签
label：表示标记的标签，label标签不会在页面中有任何的展示。
<label> 用户名：<input type=”text” name=”userName”></input> </label>
textarea文本域
textarea：表示文本域的内容，通常用于留言板这类的情况。
select下拉框
select：表示下拉框
<select> <option>1</option> <option>2</option> <option>3</option></select>
但是随着现在ui框架的诞生，基本上都不用原生的select样式了，其一因为不好看，第二点就是select在不同的浏览器中展示出来的样式是不同的。所以一般都用div来充当select，当然这以后会讲，但是一定需要了解select是用来干什么的
form表单域
form表单域：
实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
action：
method：
get / post 用于设置表单数据的提交方式，取值为 get 或者 post
name：
名称用于指定表单的名称，以区分同一个页面的多个表单
结束语
在这一讲中，整个html就结束了，这一讲中主要介绍了html常用的属性，牵扯表格和表单等重要的属性，这在将来的工作中有大量的使用到。基础必须得扎实才能走的更远。除此之外，在html中还需要学会查文档，自己的理解不到位或者模糊的地方，一定需要查文档，学会分析问题和解决问题的能力在工作中也是必不可少的一部分。日常查文档一般都用 MDN，这个对于前端来说比较权威的网站。
MDN网站链接
