HTML总结之form表单和table表格

HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元素。 HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是由 HTML 标签组成的描述性文本，HTML 文本可以说明文字、图形、动画、声音、表格、链接等。超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”和存在媒体文件（也就是超越了普通文本文件）。 HTML 的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。需要说明的是 HTML 不是编程语言，而是一种描述性的语言，用于描述超文本中内容的显示方式。比如，文字以什么颜色、大小显示，图片以什么尺寸、位置来显示等。这些描述都是用 HTML 标签来描述的。

1.1、HTML示例

1.2.示例展示

二、form表单

1.1表单如何定义？

正如器名字form表单就是用form来定义代码如下：

<form>
 .
form elements
 .
</form>

后续的内容在里面编写即可。

2.2form三个重要的属性

form标签类似于一个容器标签，有着3 个重要的属性，分别是"name","action","method"

"name":正如name的中文意思是给这个表单取名字一样，因为在后续的编写中需要对这个表格的样式进行改变之类的一些操作，所以需要给他名字才能定位到它。他的属性值是由字符串来的。

"action":它的作用是提交表单时执行的动作,他的意思是当提交表单时，向何处发送表单数据。所以他的属性值是文件路径。

“methond”:它的作用是规定在提交表单时所用的 HTTP 方式。下面也会讲述与http有关的知识。

还有许多属性在这就不过多介绍可以通过下表了解一下：

2.3http协议

http（超文本传输协议）是一个基于请求与响应模式的、无状态的、应用层的协议，常基于TCP的连接方式，HTTP1.1版本中给出一种持续连接的机制，绝大多数的Web开发，都是构建在HTTP协议之上的Web应用。

2.3.1.1http请求

http请求由三部分组成，分别是：请求行、消息报头、请求正文

1、请求行以一个方法符号开头，以空格分开，后面跟着请求的URI和协议的版本，格式如下： Method Request-URI HTTP-Version CRLF 其中 Method表示请求方法；Request-URI是一个统一资源标识符；HTTP-Version表示请求的HTTP协议版本；CRLF表示回车和换行（除了作为结尾的CRLF外，不允许出现单独的CR或LF字符）。

请求方法（所有方法全为大写）有多种，各个方法的解释如下：

GET 请求获取Request-URI所标识的资源

POST 在Request-URI所标识的资源后附加新的数据

HEAD 请求获取由Request-URI所标识的资源的响应消息报头

PUT 请求服务器存储一个资源，并用Request-URI作为其标识 DELETE 请求服务器删除Request-URI所标识的资源

TRACE 请求服务器回送收到的请求信息，主要用于测试或诊断

CONNECT 保留将来使用

OPTIONS 请求查询服务器的性能，或者查询与资源相关的选项和需求

应用举例：

GET方法：在浏览器的地址栏中输入网址的方式访问网页时，浏览器采用GET方法向服务器获取资源，

POST方法要求被请求服务器接受附在请求后面的数据，常用于提交表单

2.3.1.2http响应

HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文

1、状态行格式如下： HTTP-Version Status-Code Reason-Phrase CRLF

其中，HTTP-Version表示服务器HTTP协议的版本；Status-Code表示服务器发回的响应状态码；

Reason-Phrase表示状态代码的文本描述。

状态代码有三位数字组成，第一个数字定义了响应的类别，且有五种可能取值：

1xx：指示信息--表示请求已接收，继续处理

2xx：成功--表示请求已被成功接收、理解、接受

3xx：重定向--要完成请求必须进行更进一步的操作

4xx：客户端错误--请求有语法错误或请求无法实现

5xx：服务器端错误--服务器未能实现合法的请求常见状态代码、状态描述、说明：

200 OK //客户端请求成功

400 Bad Request //客户端请求有语法错误，不能被服务器所理解

401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用

403 Forbidden //服务器收到请求，但是拒绝提供服务

404 Not Found //请求资源不存在，eg：输入了错误的URL

500 Internal Server Error //服务器发生不可预期的错误

503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

2.3.2 get请求和post请求

1.get是从服务器上获取数据，post是向服务器传送数据。

2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER 内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

3.对于get方式，服务器端用Request.QueryString[]获取变量的值，对于post方式，服务器端用 Request.Form[]获取提交的数据。

4.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。

5.get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

建议：

1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；

2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

2.4表单元素

表单元素有三个标签组成input、 textarea、 select，它们都是用于写元素（文本框，密码框之类的），然后在html5中新扩展了datalist，keygen， output，button。

2.4.1input元素（文本框）

input表单元素的语法格式如下：

<input type="元素类型" name="元素名称" value=”元素值”id="客户端唯一标识">

一、输入类型

（1）text类型：定义供文本输入的单行输入字段

代码如下：


<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<br><br>
</form>
</body>
</html>

运行结果如下：

（2）password类型：定义密码字段：

代码如下：

<!DOCTYPE html>
<html>
<body>

<form action="">
User name:<br>
<input type="text" name="userid">
<br>
User password:<br>
<input type="password" name="psw">
</form>
</body>
</html>

运行结果如下：

与text的区别在于password 字段中的字符会被做掩码处理（显示为星号或实心圆）。

（3）submit类型：定义提交表单数据至表单处理程序的按钮。

代码如下：

<!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>submit类型</title>
</head>
<body>
    <form action="0.0">
         <input type="submit" value="提交" >
    </form>
</body>
</html>

运行结果如下：

如果您点击提交，表单数据会被发送到名为0.0的页面。

注意: 如果您省略了提交按钮的 value 属性，那么该按钮将获得默认文本

(4)radio类型：单选按钮允许用户仅从有限的选项中选择一个：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
<br><br>
</form> 
</body>
</html>

运行结果如下：

有checked会被选中。

(5)button类型:定义按钮

代码如下:

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</body>
</html>

运行结果如下：

点击按钮后就会显示Hello World!

(6)number类型：用于应该包含数字值的输入字段。

代码如下：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
  数量（1 到 5 之间）：
  <input type="number" name="quantity" min="1" max="5">
</form>
</body>
</html>

运行结果如下：

（7）剩下类型用法差不多就一并说了

date类型：用于应该包含日期的输入字段

color类型：用于应该包含颜色的输入字段。

range类型：用于应该包含一定范围内的值的输入字段。

month类型：允许用户选择月份和年份。

week类型：允许用户选择周和年

time类型：允许用户选择周和年

datetime类型：允许用户选择日期和时间（有时区）。

datetime-local类型：允许用户选择日期和时间（无时区）

email类型：用于应该包含电子邮件地址的输入字段。

search类型：用于搜索字段（搜索字段的表现类似常规文本字段）。

tel类型：用于应该包含电话号码的输入字段。

url类型：用于应该包含 URL 地址的输入字段。

代码如下：

<!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="">
    date类型：<input type="date" name="" id="">
    </br>
    color类型：<input type="color" name="" id="">
    </br>
    range类型：<input type="range" name="" id="">
    </br>
    month类型：<input type="month" name="" id="">
    </br>
    week类型：<input type="week" name="" id="">
    </br>
    time类型：<input type="time" name="" id="">
    </br>
    datetime类型：<input type="datetime" name="" id="">
    </br>
    datetime-local类型：<input type="datetime-local" name="" id="">
    </br>
    email类型：<input type="email" name="" id="">
    </br>
    search类型：<input type="search" name="" id="">
    </br>
    tel类型：<input type="tel" name="" id="">
    </br>
    url类型：<input type="url" name="" id="">
    </form>
</body>
</html>

运行结果如下：

二、输入属性

（1）readonly属性:属性规定输入字段为只读（不能修改）：

<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="text" name="" value ="你动不了我哦" readonly>
<br>
</form>
</body>
</html>

运行结果如下：

（2）disabled属性：属性规定输入字段是禁用的。

代码如下：

<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="text" name="" value ="我是禁止的捏" disabled>
<br>
</form>
</body>
</html>

运行结果如下：

（3）required属性：在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中会弹出提示文字。

代码如下：

<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="text" name="" value ="" required>
<br>
<input type="submit" name="" value="提交">
<br>
</form>
</body>
</html>

运行结果如下：

（4）autofocus：自动获得焦点。

代码如下：

<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="text" name="" value ="我被选中了捏" autofocus>
</form>
</body>
</html>

运行结果如下：

2.4.2select元素（选择框）

select表单元素的语法格式如下：

<select name="元素名称" multiple="multiple">
<option value=”值" selected>选项 1</option>
<option value=”值" >选项 2</option>
<option value=”值" >选项 3</option>
<option value=”值" >选项 4</option>
…
</select

基本运用如下；

<!DOCTYPE html>
<html>
<body>
<form action="">
    <select name="0.0" multiple="multiple">
        <option value="-1">请选择您的家庭地址</option>
        <option value="郑州">郑州</option>
        <option value="兰州" selected>兰州</option>
        <option value="杭州">杭州</option>
        <option value="苏州">苏州</option>
        </select>
</form>
</body>
</html>

运行结果如下：

注意：当select标签设置 multiple属性时，select以列表形式显示，当select标签不设置 multiple 属性时，以下拉框形式显示。列表框在选择时按住键盘的ctrl或shi

无multiple情况：

2.4.3textarea元素（文本域）

textarea表单元素的语法格式如下：

<textarea name="元素名称 " cols="文本框宽度" rows="文本框高度" >
内容
</textarea

基本运用如下：

<!DOCTYPE html>
<html>
<body>
<form action="">
<textarea name="comment" rows="10" cols="30">
您的建议或者意见
</textarea>
</form>
</body>
</html>

运行结果如下：

三、table表格

1.1table表格如何定义

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）即多少列。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

基本代码如下：

<!DOCTYPE html>
<html>
<body>
    <table border="1">
        <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
        </tr>
        <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
        </tr>
        </table>
</body

运行结果如下：

1.2表格的属性

1.2.1表格的边框属性

边框属性用border="n"在table力定义n为任何整数。

代码如下

<!DOCTYPE html>
<html>
<body>
    <table border="10">
        <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
        </tr>
        <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
        </tr>
        </table>
</body>
</html>

1.2.2表格的表头

表格的表头使用 <th> 标签进行定义。

<!DOCTYPE html>
<html>
<body>
    <table border="1">
        <tr>
            <th>我是表头捏</th>
        </tr>
        <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
        </tr>
        <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
        </tr>
        </table>
</body>
</html>

运行结果如下：

1.2.3表格的宽和高

宽和高分别由width、height来定义

代码如下：

<!DOCTYPE html>
<html>
<body>
    <table border="1" width="100" height="100">
        <tr>
        </tr>
        <tr>
        <td></td>
        <td></td>
        </tr>
        <tr>
        <td></td>
        <td></td>
        </tr>
        </table>
</body>
</html>

运行结果如下

1.2.4表格对齐

对齐方式有左对齐，居中，右对齐，分别由left、center、right来进行定义

代码如下：

<!DOCTYPE html>
<html>
<body>
    <table border="1" width="100" height="100" align="left">
        <tr>
        </tr>
        <tr>
        <td></td>
        <td></td>
        </tr>
        </table>
        <br>
        <table border="1" width="100" height="100" align="center">
            <tr>
            </tr>
            <tr>
            <td></td>
            <td></td>
            </tr>
            </table>
            <br>
            <table border="1" width="100" height="100" align="right">
                <tr>
                </tr>
                <tr>
                <td></td>
                <td></td>
                </tr>
                </table>
</body>
</html>

运行结果如下：

1.2.5表格的背景

bgcolor 属性表示表格的背景颜色，Background 属性表示表格的背景图像

代码如下：

<!DOCTYPE html>
<html>
<body>
    <table border="1" width="100" height="100" bgcolor="red">
        <tr>
        </tr>
        <tr>
        <td></td>
        <td></td>
        </tr>
        </table>
        <br>
        <table border="1" width="100" height="100" background="..\\images\bg.jpg" >
            <tr>
            </tr>
            <tr>
            <td></td>
            <td></td>
            </tr>
            </table>
            <br>
</body>
</html>

运行结果如下：

1.2.6表格的填充和边距

cellpadding 表示表格的边距，cellspacing 表示表格的间距。边距是指单元格内的元素距离单元格边缘的距离，间距是指单元格与单元格之间的距离

<!DOCTYPE html>
<html>
<body>
    <table border="1" width="100" height="100">
        <tr>
        </tr>
        <tr>
        <td></td>
        <td></td>
        </tr>
        </table>
        <br>
    <table border="1" width="100" height="100" cellpadding="10">
        <tr>
        </tr>
        <tr>
        <td></td>
        <td></td>
        </tr>
        </table>
        <br>
        <table border="1" width="100" height="100" cellspacing="10">
            <tr>
            </tr>
            <tr>
            <td></td>
            <td></td>
            </tr>
            </table>
            <br>
</body>
</html>

运行结果如下：

如果不设置 cellpadding 和 cellspacing ，它们的默认值是 2px

注意：以上的属性也适用于行和列也就是tr和td他们同样可以设置宽和高（width、height）也可以设置背景颜色和背景图像（bgcolor、background）

代码如下：

<!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 border="1" height="100" width="100">
        <tr>
            <td height="200">我设置了高</td>
            <td width="100">我设置了宽</td>
        </tr>
    </table>
    <table border="1" height="100" width="100">
        <tr>
            <td bgcolor="red">我是背景颜色</td>
            <td background="D:\web前端\images\bg.jpg">我是背景图像</td>
        </tr>
    </table>
</body>
</html>

运行结果如下：

1.3表格的合并

单元格可以通过rowspan、colspan进行单元格的跨行合并和单元格跨列合并。

代码如下

<!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 border="1" height="100" width="100">
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
    <br>
    <table border="1" height="100" width="100">
        <tr>
            <td rowspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
    </table>
    <br>
    <table border="1" height="100" width="100">
        <tr>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

运行结果如下：

总结

以上就是今天要讲的内容，本文仅仅简单介绍了html，重点讲解了form表格和table标签的用法和使用，希望大家能够对此更加了解。