前端入门系列--HTML（2）

这一篇主要讲html中的表格、列表、表单三剑客：
表格：让数据显示整齐规范
列表：让页面布局整齐规范
表单：用来收集用户信息

1、表格（table）相关

其用来展示显示表格式的数据，如：

（今天是20-2-26股市大跌的一天(╥﹏╥)）

1.1表格的基本代码

<table width="300" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

其中table用来包括一个表格，为一行，有多少个tr则该表格有多少行，为一个单元格，一对tr中包含多少个td则该行有多少个单元格

1.2表格的基本属性

其中，当border为0时border无边框线条；一般用的较多的是cellspacing以及cellpadding；
有时候想将单元格之间的距离cellspacing设置为0后会导致两个边框重叠处边框变粗，则设置border属性如下可解决问题table{ border-collapse:collapse; }
各属性位置如下图所示：
（以上属性、布局图片来自黑马程序员笔记，侵删~）

1.3表格标题

<table>
   <caption>我是表格标题</caption>
</table>

caption标签必须紧跟在table后面，标题会显示在表格上方居中加粗显示

1.4合并单元格

这个效果常见于各种简历表格中等等

1.4.1跨行合并

<td rowspan="3">   </td>

其会合并该td格子起向右（即从左向右）的三个格子，合并完后必须把被合并的另外两个格子代码删除

1.4.2跨列合并

<td colspan="3">   </td>

其会合并该td格子起向下（即从上向下）的三个格子，合并完后必须把被合并的另外两个格子代码删除

1.5复杂表格结构

1. <thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签
2. <tbody></tbody>：用于定义表格的主体。放数据本体 
3. <tfoot></tfoot>放表格的脚注之类

其实三者可以理解为方便看代码而已，其和直接在table中写tr、td一样
分开后可以单独为表头、主体、脚注分别设置css样式
注意thead要区别表格标题caption

2、列表相关

常见的样式如下图：
其虽然现实整齐但并非由上述的表格table写出来的而是另一个更加常用的列表写出来的
其中列表分为有序列表、无序列表以及自定义列表：

2.1无序列表

<ul>
  <li>内容1</li>
  <li>内容2</li>
  <li>内容3</li>
  ......
</ul>

但如果就这样写每一项前面会出现一个点，一般在全局的style中设置li样式：list-style: none;将该点去掉（后面css会详讲）
注意ul中必须嵌套li，内容放在li中；可以把li当作一个容器

2.2有序列表

<ol>
  <li>内容1</li>
  <li>内容2</li>
  <li>内容3</li>
  ......
</ol>

可以理解成无序列表是前面有个点而有序列表前面有顺序的标号123…

2.3自定义列表

<dl>
  <dt>帮助中心</dt>
  <dd>用户管理</dd>
  <dd>购物信息</dd>
    <dd>订单操作</dd>
  ...
  <dt>服务支持</dt>
  <dd>售后政策</dd>
  <dd>自助服务</dd>
  <dd>相关下载</dd>
  ...
</dl>

主要是dd是对dt中的更进一步解释说明
自定义列表一般用于网站最下方内容，其中蓝框的3项是其上红框的细分

3、表单相关

表单通常用于收集用户信息，如注册页面（其通常需要结合表格来做）中等等…

3.1input控件

<input type="属性值" value="你好">

其中value是控件上显示的信息（如输入账号文本框中显示请输入账号字样），而type是控件的类型，主要的类型如下图所示：
此外还有name属性用于区分页面中的不同表单（提交数据时用到，且对于单选按钮radio中给了同样的name值后只能被选一个），checked属性用于复选框是否选中，id则是用于唯一确定控件

**label标签的使用**
label标签用于对表单元素的选中（如在复选框中只要点击复选框文字即可选中复选框而不是非得点击复选框的小圆圈）

<label for="male">Male</label>
  <input type="radio" name="sex" id="male" />

通过for属性绑定了input的id，则点击Male文字时也会选中复选框

3.2文本域控件

<textarea >
  文本内容
</textarea>

常用于网页中输入评论部分需要大块文字的地方

3.3下拉列表控件

<select>
  <option selected="selected">选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

上面selecte属性表示默认选中；
一些网页中打开就显示一个 —请选择— 效果，则加一个option默认使用selected

3.4表单域相关

form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器（即form中包含了各种表单）

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

其相关属性如下：