HTML table、form表单标签的介绍

最新推荐文章于 2023-11-20 08:12:16 发布

霖霏晗

最新推荐文章于 2023-11-20 08:12:16 发布

阅读量402

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/xxz_best/article/details/45816261

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.<table>标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<table border=0 title="测试">
    <caption> 表格标题</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>22</td>
    </tr>
    <tr>
        <td><input type=text /></td>
        <td><input type=text /></td>
    </tr>
</table>
</body>
</html>

元素：

<caption></caption>：表头信息。

<tr></tr> ：定义一个表格行；

<th></th> ：定义一个表格头；若是纯文字，默认会以粗体的样式表现。

<tbody></tbody> ：可以理解为表格的内容区域，在Chrome、FF浏览器通过DOM进行表格动态插入行的时候，要使用这个。如果不进行DOM操作，可不用添加。

<td></td> ：定义一个单元格；

table 属性：
　　border ：定义表格的边框宽度，默认为0，即无边框。
　　title ：表格的提示信息，当鼠标移到表格上方时，所提示的信息。
th、td 属性：
　　colspan : 表示横向合并单元格 colspan 属性规定单元格可横跨的列数。<tr><td colspan="2">January</td></tr>
rowspan ：表示纵向合并单元格表格单元横跨两行的表格：

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100.00</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$10.00</td>
  </tr>
</table>

2. <form>标签
<form> 标签用于创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset和 label 元素等。
form主要属性说明：
action ：一个URL地址；指定form表单向何处发送数据。
enctype ：规定在发送表单数据之前，如何对表单数据进行编码。
　　指定的值有：application/x-www-form-urlencoded ：在发送前编码所有字符（默认为此方式）；
　　　　　　　　multipart/form-data ：不对字符编码。使用包含文件上传控件的表单时，必须使用该值
method ：指定表单以何种方式发送到指定的页面。
指定的值有：get ：from表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。
post ：from表单里所填的值，附加在HTML Headers上。

<form enctype="multipart/form-data" action="ashx/login.ashx" method="post">
    <table>
        <tr>
            <td><label for="txtname">账号：</label></td>
            <td><input type="text" id="txtname" name="login_username" /></td>
        </tr>
        <tr>
            <td><label for="txtpswd">密码：</label></td>
            <td><input type="password" id="txtpswd" name="login_pswd" /></td>
        </tr>
        <tr>
            <td colspan=2>
                <input type="reset" />
                <input type="submit" />
            </td>
        </tr>
    </table>
</form>

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