本篇主要介紹 table、form標(biāo)簽以及表單提交方式。

目錄

1.?

標(biāo)簽：在HTML 中定義表格布局。

2.?

標(biāo)簽：用于創(chuàng)建 HTML 表單。

3.?表單提交方式：介紹get、post方法。

?

1. 標(biāo)簽 1.1 說明

在HTML 中定義表格布局。

1.2格式

　　 　　 　　 　　　　 　　　　 　　

?

1.3 包含的元素

：表頭信息。

：定義一個表格行；

：定義一個表格頭；若是純文字，默認(rèn)會以粗體的樣式表現(xiàn)。

：可以理解為表格的內(nèi)容區(qū)域，在Chrome、FF瀏覽器通過DOM進(jìn)行表格動態(tài)插入行的時候，要使用這個。如果不進(jìn)行DOM操作，可不用添加。

：定義一個單元格；

?

1.4 屬性

table?屬性：

　　border?：定義表格的邊框?qū)挾?，默認(rèn)為0，即無邊框。

　　title?：表格的提示信息，當(dāng)鼠標(biāo)移到表格上方時，所提示的信息。

th、td?屬性：

　　colspan?: 表示橫向合并單元格 (?)

　　rowspan?：表示縱向合并單元格 (??)

?

1.5 示例

    
 表格標(biāo)題
    

        
姓名
        
年齡
    
    

        
張三
        
22
    
    

        

        

    

?

?

2.? 標(biāo)簽 2.1 說明

標(biāo)簽用于創(chuàng)建 HTML 表單。

表單能夠包含?input 元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。

表單還可以包含?menus、textarea、fieldset和?label 元素?等。

?

2.2 屬性

action?{URL}：一個URL地址；指定form表單向何處發(fā)送數(shù)據(jù)。

enctype?{string}：規(guī)定在發(fā)送表單數(shù)據(jù)之前，如何對表單數(shù)據(jù)進(jìn)行編碼。

指定的值有：application/x-www-form-urlencoded ：在發(fā)送前編碼所有字符（默認(rèn)為此方式）；

　　　　　　multipart/form-data ：不對字符編碼。使用包含文件上傳控件的表單時，必須使用該值

method?{get/post}：指定表單以何種方式發(fā)送到指定的頁面。

指定的值有：get ：form表單里所填的值，附加在action指定的URL后面，做為URL鏈接而傳遞。

　　　　　　post ：form表單里所填的值，附加在HTML Headers上。

?

2.3 示例

?

    

        

            
賬號：
            

        
        

            
密碼：
            

        
        

            

                
                
            
        
    
?

?

?

2.4 應(yīng)用場景

表單主要用于向服務(wù)器傳輸數(shù)據(jù)；如常見的登錄、注冊頁面。

?

3.?form 表單提交方式 3.1 get 方式 3.1.1 說明

form表單里所填的值，附加在action指定的URL后面，做為URL鏈接而傳遞。

3.1.2 示例

在上面的form代碼中輸入如下：

賬號：admin?

密碼：123456

點擊提交后：URL變?yōu)椋?/p>

http://localhost:4778/ashx/login.ashx?login_username=admin&login_pswd=123456

變量提交的樣式為：html元素的name屬性=提交的值。多個變量，以?&?符號隔開。

?

3.2 post 方式 3.2.1 說明

form表單里所填的值，附加在HTML Headers上。

3.2.2 示例

同上面get方式一樣。

賬號：admin?

密碼：123456

點擊提交后：URL變?yōu)?/p>

http://localhost:4778/ashx/login.ashx

可看到只是action指定的URL，參數(shù)并沒有附加在URL后面。

通過Fiddler軟件，可以查看到HTML Header區(qū)域：有個名為WebKitFormBoundary2T7xmZEtMRQeAhNh?的對象

?查看【Raw】區(qū)域，可看見里面包含了提交的變量

?

3.3 get 與 post 的區(qū)別

　　①數(shù)據(jù)的查詢：比如瀏覽論壇時，URL一般包含了分類、頁碼數(shù)、每頁記錄數(shù)等信息。?get?方式，能一目了然的看到所要查詢的信息(條件)。?post?因為隱藏掉了這些信息，不方便進(jìn)行檢驗查詢條件。

　　②敏感數(shù)據(jù)的提交(安全性)：對一項記錄，進(jìn)行更改、添加操作時，比如注冊用戶、更改用戶資料等。get?方式附加在URL上，會泄露掉敏感的消息。?post?方式，能隱藏掉敏感的信息。

　?、鄞髷?shù)據(jù)文本傳遞：get?雖然方便查詢，但由于是附加在URL上，各瀏覽器對URL也有個長度限制。IE ：2048字符。Chrome、FF 好像是?8182字符。post?好像沒此限制。

?

==================================系列文章==========================================

本篇文章：1.5??table、form表單標(biāo)簽的介紹

Web開發(fā)之路系列文章

1.HTML

　　1.1?HTML頁面源代碼布局介紹

　　1.2?HTML基礎(chǔ)控件介紹

　　1.3?iframe 和?frameset 的區(qū)別

　　1.4?name、id、class 的區(qū)別

　　1.5?table、form表單標(biāo)簽的介紹以及get和post提交方式

　　1.6?HTML kbd鍵盤元素

　　1.7?HTML 鼠標(biāo)坐標(biāo)和元素坐標(biāo)

2.CSS 層疊樣式表

　　2.1?CSS 選擇器及各樣式引用方式

　　2.2?CSS HTML元素布局及Display屬性

　　2.3?CSS Float 浮動屬性

　　2.4?CSS Position 定位屬性

3.JavaScript介紹

　　3.1?JavaScript var關(guān)鍵字、變量的狀態(tài)、異常處理、命名規(guī)范等介紹

　　3.2?JavaScript function函數(shù)種類

　　3.3?JavaScript Array對象

　　3.4?JavaScript Date對象

　　3.5?JavaScript Math和Number對象

　　3.6?JavaScript String對象

　　3.7?JavaScript Object對象

　　3.8?JavaScript 自定義對象

　　3.9?JavaScript 對象屬性介紹

　　3.10?JavaScript?開發(fā)規(guī)范

4.BOM

　　4.1?HTML BOM Browser對象

　　4.2?HTML 獲取屏幕、瀏覽器、頁面的高度寬度

　　4.3?HTML URL地址解析

5.DOM

　　5.1?HTML DOM 介紹

　　5.2?HTML DOM 對象

　　5.3?HTML 事件(一) 事件的介紹

　　5.4?HTML 事件(二) 事件的注冊與注銷

　　5.5?HTML 事件(三) 事件流與事件委托

　　5.6?HTML 事件(四) 模擬事件操作

6.HTML5

　　6.1?HTML5 介紹

?　 ?6.2?HTML5 語義元素(一)頁面結(jié)構(gòu)

?　 ?6.3?HTML5 語義元素(二)文本內(nèi)容

　　6.4?HTML5 input元素新的特性

　　6.5?HTML5 progress和meter控件?

　　6.6?HTML5 sessionStorage會話存儲

　　6.7?HTML5?localStorage本地存儲?

　　6.8?HTML5 元素屬性介紹

7.ExtJS 4.2

　　7.1?ExtJS 4.2 介紹

　　7.2?ExtJS 4.2 第一個程序

　　7.3?ExtJS 4.2 組件介紹

　　7.4?ExtJS 4.2 組件的查找方式

　　7.5?ExtJS 4.2 業(yè)務(wù)開發(fā)(一)主頁搭建

　　7.6?ExtJS 4.2 業(yè)務(wù)開發(fā)(二)數(shù)據(jù)展示和查詢

　　7.7?ExtJS 4.2 業(yè)務(wù)開發(fā)(三)數(shù)據(jù)添加和修改

　　7.8?ExtJS 4.2?Grid組件的單元格合并

　　7.9?ExtJS 4.2 Date組件擴(kuò)展：添加清除按鈕

　　7.10?ExtJS 4.2 評分組件

8.CSS 3

　　8.1?CSS3 border-radius邊框圓角

　　8.2?CSS3?background-image背景圖片相關(guān)介紹

?

只是記錄了自己在學(xué)習(xí)、使用Web前端內(nèi)容時的心得和碰到的問題。

參考文獻(xiàn)：

1）http://www.w3school.com.cn/

2）《JavaScript權(quán)威指南(第六版)》