HTML笔记（form与table标签区别，区分利用ul,dl与table标签）

区分

• <form>封装要被提交服务器的表单内容（一系列控件）
  form不管到底嵌套了多少个table标签;它只关心范围内有多少个可提交的表单元素。
  主要用于向服务器传输数据；如常见的登录、注册页面。

• <table>以表格的形式布局展示内容
  主要用于创建表格，多与form标签一起用。

• 即：table仅用来布局用的，而form则是用来封装数据的。通常发挥作用的是form，但是form内那些无规则随意摆放的文本框需要一个form里嵌套table。

<form action='#'>
<table>
<tr>
<td>用户名：</td>
<td> <input type='text' /> </td>
<tr>
</table>
</form>

---

具体不同还可以往下看！

form标签

表单能够包含：文本字段、复选框、单选框、提交按钮; input ，menus、textarea、fieldset和 label 元素。。。

<form enctype="multipart/form-data" action="ashx/login.ashx" method="post">
        <!-- 可省为<form method="post"> -->
        <table>
            <tr>
                <td><label for="name">账号：</label></td>
                <td><input type="text" id="name" name="username"/></td>
            </tr>
            <tr>
                <td><label for="pswd">密码：</label></td>
                <td><input type="password" id="pswd" name="pswd"/></td>
            </tr>
            <tr>
                <td><input type="reset"/></td>
                <td><input type="submit"/></td>
            </tr>
        </table>
    </form> 

form标签属性：
1，action ：“一个URL地址”；指定form表单向何处发送数据
2，enctype ：{string}；规定如何对表单数据进行编码。

• application/x-www-form-urlencoded
  在发送前编码所有字符（默认为此方式）；
• multipart/form-data
  不进行字符编码。使用包含文件上传控件的表单时，必须使用该值
• text/plain

3，method ：{get/post}；指定表单以何种方式发送到指定的页面。

• get ：form表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。
• post ：form表单里所填的值，附加在HTML Headers上。

get 与 post 的区别（具体不同可有上例实验） 　　
1，数据的查询：比如浏览论坛时，URL一般包含了分类、页码数、每页记录数等信息。 get方式，能一目了然的看到所要查询的信息(条件)。 post 因为隐藏掉了这些信息，不方便进行检验查询条件。
2，敏感数据的提交(安全性)：对一项记录，进行更改、添加操作时，比如注册用户、更改用户资料等。get方式附加在URL上，会泄露掉敏感的消息。post 方式，能隐藏掉敏感的信息。 　　
3，大数据文本传递：get虽然方便查询，但由于是附加在URL上，各浏览器对URL也有个长度限制。IE ：2048字符。Chrome、FF 好像是8182字符。post 好像没此限制。

table标签

HTML的table标签

<table border=0 title="测试">
        <caption> 表格标题</caption>
       <tr><!-- 表行 -->
            <th>姓名</th><!-- 表头 -->
            <th>年龄</th>
        </tr>
        <tr>
            <td>张一</td>
            <td>21</td>
        </tr>
        <tr>
            <td><input type=text /></td>
            <td><input type=text /></td>
        </tr>
        <tr>
           <td colspan="2" align="center"><input type=submit /></td>
        </tr>       
    </table>

table标签 属性：
border ：定义表格的边框宽度，默认为0，即无边框。

• frame(框架)：单线框
  box(框)/above(上)/below(下)/hsides(上下)/vsides(左右)

title ：当鼠标移到表格上方时，表格的提示信息。

Cell padding(单元格边距)：单元格内容与其边框之间的空白。

<table border="1" cellpadding="10">

Cell spacing(单元格间距)：增加单元格之间的距离。

<table border="1" spacing="10">

th、td标签属性：
colspan : 横向合并单元格
rowspan ：纵向合并单元格

扩展属性：
table，td标签皆可用；

• bgcolor=“背景颜色”
• background=“背景图地址”

  <table bgcolor="red">First</table>
  <td background="#">Row</td>

表格的数据分组标签
<thead><tbody><tfoot>由行组成，分别表示页眉，数据主体，页脚 ，所以一般包含标签

dl标签与table标签

dl,dt,dd是一个解释型的列表

dl（definition list-自定义列表）标签: 定义一个列表
dt（自定义标题）标签: 列表的标题
dd（自定义描述）标签: 内容,能缩进,和ul，ol性质差不多

dl是自定义列表，和ul等同属于列表标签类（用于排序），一般用dl,dt,dd表示有标题的内容块；ol,ul,li 之类表示列表性的内容块。

<ul>
    <li>水果</li>
    <li>饮料</li>
</ul>
<ol>
    <li>水果</li>
    <li>饮料</li>
 
</ol>
<dl>
    <dt>水果</dt>
    <dd>苹果</dd> 
    <dt>饮料</dt>
    <dd>可乐</dd>
</dl>

效果图如下：

注意：
dd,dt都是块级元素，不能互相包含，并都要在dl内使用，更多dl标签美化css可参考dl,dt,dd标签的使用可实现如下类似效果！

dl与table标签与比较：

• dl标签便于后期调试与维护，降低开发与维护成本
• dl标签代码更简洁，代码语义化：table里的嵌套越多，速度越慢

应用场景总结：
ul最为常见，常适用于作网站导航条的链接、新闻网站的新闻列表、视频列表，或者电商网站商品导航目录的列表或者产品详细列表。
dl 一般用于图文混排、网站底部链接：电商网站底部-购物指南、支付方式。其中，大数据量数据表用table；小型数据量列表和表单用dl。

---

备注：c->colum->列；r->row->行；

如果想要居中对齐可参考：居中方法
为了美观表格，可参考更多HTML 表格样式