HTML 5 - 交互

HTML 5 也被稱為 Web Applications 1.0。為了實(shí)現(xiàn)這個目標(biāo)，增加了幾個為 Web 頁面提供交互體驗的新元素：

details

datagrid

command

這些元素都可以根據(jù)用戶的操作和選擇改變顯示的內(nèi)容，而不需要從服務(wù)器裝載新頁面。

details

details 元素表示在默認(rèn)情況下可能不顯示的詳細(xì)信息。可選的 legend 元素可以提供詳細(xì)信息的摘要。

details 元素的用途之一是提供腳注和尾注。例如：

The bill of a Craveri's Murrelet is about 10% thinner

than the bill of a Xantus's Murrelet.

<legend>[Sibley, 2000]</legend>

<p>Sibley, David Allen, The Sibley Guide to Birds,

(New York: Chanticleer Press, 2000) p. 247

</p>

</details>

沒有指定具體的顯示方式。瀏覽器可以選用腳注、尾注和工具提示等方式。

每個 details 元素可以有一個 open 屬性。如果設(shè)置了這個屬性，那么詳細(xì)信息在最初就顯示出來。如果沒有設(shè)置這個屬性，那么會隱藏它們，直到用戶要求顯示它們。無論是哪種情況，用戶都可以通過單擊一個圖標(biāo)或其他控件來顯示或隱藏詳細(xì)信息。

datagrid

datagrid 元素提供一個網(wǎng)格控件?？梢杂盟@示樹、列表和表格，用戶和腳本可以更新這些界面元素。與之相反，傳統(tǒng)的表格主要用來顯示靜態(tài)數(shù)據(jù)。

datagrid 從它的內(nèi)容（一個 table、select 或其他 HTML 元素）獲得初始數(shù)據(jù)。例如，代碼 9 中的 datagrid 包含一張成績表。在這個示例中，datagrid 的數(shù)據(jù)來自一個 table。更簡單的一維 datagrid 可以從 select 元素獲得數(shù)據(jù)。如果使用其他 HTML 元素，那么每個子元素成為網(wǎng)格中的一行。

<table>

<tr><td>Jones</td><td>Allison</td><td>A-</td><td>B </td><td>A</td></tr>

<tr><td>Smith</td><td>Johnny</td><td>A</td><td>C </td><td>A</td></tr>

<tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr>

<tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B </td><td>A</td></tr>

</table>

</datagrid>

這個元素與常規(guī)表格的區(qū)別在于，用戶可以選擇行、列和單元格；把行、列和單元格折疊起來；編輯單元格；刪除行、列和單元格；對網(wǎng)格排序；以及在客戶機(jī)瀏覽器中直接進(jìn)行其他數(shù)據(jù)操作?？梢杂?JavaScript 代碼監(jiān)視更新。Document Object Model（DOM）中增加了 HTMLDataGridElement 接口以支持這個元素（代碼 10　HTMLDataGridElement）。

interface HTMLDataGridElement : HTMLElement {

attribute DataGridDataProvider data;

readonly attribute DataGridSelection selection;

attribute boolean multiple;

attribute boolean disabled;

void updateEverything();

void updateRowsChanged(in RowSpecification row, in unsigned long count);

void updateRowsInserted(in RowSpecification row, in unsigned long count);

void updateRowsRemoved(in RowSpecification row, in unsigned long count);

void updateRowChanged(in RowSpecification row);

void updateColumnChanged(in unsigned long column);

void updateCellChanged(in RowSpecification row, in unsigned long column);

};

還可以使用 DOM 在網(wǎng)格中動態(tài)地裝載數(shù)據(jù)。也就是說，datagrid 可以不包含那些提供初始數(shù)據(jù)的子元素?？梢杂靡粋€ DataGridDataProvider 對象設(shè)置它（代碼 11　DataGridDataProvider）。這樣就可以從數(shù)據(jù)庫、XmlHttpRequest 或者 JavaScript 代碼能夠訪問的任何資源裝載數(shù)據(jù)。

interface DataGridDataProvider {

void initialize(in HTMLDataGridElement datagrid);

unsigned long getRowCount(in RowSpecification row);

unsigned long getChildAtPosition(in RowSpecification parentRow,

in unsigned long position);

unsigned long getColumnCount();

DOMString getCaptionText(in unsigned long column);

void getCaptionClasses(in unsigned long column, in DOMTokenList classes);

DOMString getRowImage(in RowSpecification row);

HTMLMenuElement getRowMenu(in RowSpecification row);

void getRowClasses(in RowSpecification row, in DOMTokenList classes);

DOMString getCellData(in RowSpecification row, in unsigned long column);

void getCellClasses(in RowSpecification row, in unsigned long column,

in DOMTokenList classes);

void toggleColumnSortState(in unsigned long column);

void setCellCheckedState(in RowSpecification row, in unsigned long column,

in long state);

void cycleCell(in RowSpecification row, in unsigned long column);

void editCell(in RowSpecification row, in unsigned long column, in DOMString data);

};

menu 和 command

menu 元素實(shí)際上在 HTML 2 中就出現(xiàn)了。在 HTML 4 中廢棄了它，但是 HTML 5 又恢復(fù)了它并指定了新的意義。在 HTML 5 中，menu 包含 command 元素，每個 command 元素引發(fā)一個操作。例如，代碼 12 HTML 5 菜單　是一個彈出警告框的菜單。

<menu>

<commandlabel="Do 1st Command"/>

<commandlabel="Do 3rd Command"/>

</menu>

還可以用 checked="checked" 屬性將命令轉(zhuǎn)換為復(fù)選框。通過指定 radiogroup 屬性，可以將復(fù)選框轉(zhuǎn)換為單選按鈕，這個屬性的值是互相排斥的按鈕的組名。

除了簡單的命令列表之外，還可以使用 menu 元素創(chuàng)建工具欄或彈出式上下文菜單，這需要將 type 屬性設(shè)置為 toolbar 或 popup。例如，代碼　13. HTML 5 工具欄　顯示一個與 WordPress 等 blog 編輯器相似的工具欄。它使用 icon 屬性鏈接到按鈕的圖片。

<commandlabel="strong" icon="bold.gif"/>

<commandlabel="b-quote" icon="blockquote.gif"/>

<commandlabel="ul" icon="bullet.gif"/>

<commandlabel="ol" icon="number.gif"/>

<commandlabel="li" icon="item.gif"/>

</menu>

label 屬性提供菜單的標(biāo)題。例如，代碼14. HTML 5 Edit 菜單　顯示一個 Edit 菜單。

<commandlabel="Cut"/>

</menu>

菜單可以嵌套在其他菜單中，形成層次化的菜單結(jié)構(gòu)。

reamweaver的CSS面板分類

type(類型)

background(背景)

block(區(qū)塊)

box(方框) 或盒子意思

border(邊框)

list(列表)

positioning(定位)

extensions(擴(kuò)展)

共八個部分

1. type(類型)

type面板主要是對文字的字體，大小，顏色，效果等基本樣式進(jìn)行設(shè)置。

注意：屬性名帶*號的是指樣式效果不能在編輯文檔時顯示，要用瀏覽器打開才能看到效果。

(1)font-family：設(shè)置字體系列。什么叫字體系列呢?是指對文字設(shè)定幾個字體，當(dāng)遇到第一個字體不能顯示的文字時會自動用系列中的第二個

字體或后面的字體顯示。

注意:一般英文字體我們用"Verdana, Arial, Helvetica, sans-serif"這個系列比較好看。如果不用這些字體系列，你就需要自己編輯字體系列，

也可以直接手動在下拉框里寫字體名，字體之間用逗號隔開。中文網(wǎng)頁默認(rèn)字體是宋體, 一般就空著不要選取任何字體。

默認(rèn)值： not specified(取決于瀏覽器,系統(tǒng)默認(rèn)的字體, 如: 微軟雅黑)

注意：

1.如果有漢字, 那么我們要加引號

2.如果有多個英文字母組成的單詞, 我們也要加引號; "microsoft yahei" 中間用空格隔開

3.font-family:"黑體","宋體","華文隸書"; 首先找黑體, 沒有黑體找宋體...

為了避免在CSS中使用 font 或 font-family 設(shè)置中文字體時亂碼, 可以使用 Unicode 編碼來表示字體。

/* 示例:使用Unicode字體編碼設(shè)置字體為"微軟雅黑" */
font-family: "\5FAE\8F6F\96C5\9ED1";

(2)font-size：定義文字的大小。你可以通過選取數(shù)字和度量單位來選擇具體的字體大小，或者你也可以選擇一個相對的字體大小。

最好使用pixels作為單位，這樣不會在瀏覽器中文本變形。一般字體用比較標(biāo)準(zhǔn)的12px或14px, 默認(rèn)值為16px。

注意：CSS中長度的單位分絕對長度單位和相對長度單位:

絕對長度單位有：

pt：磅(point)

mm、cn、in、pc：(毫米、厘米、英寸、活字)根據(jù)顯示的實(shí)際尺寸來確定長度。

此類單位不隨顯示器的分辨率改變而改變。

相對長度單位有：

px：(像素)根據(jù)顯示器的分辨率來確定長度。

em：當(dāng)前文本的尺寸。例如：{font-size:2em}是指文字大小為原來的2倍。

比如自身font-size: 30px; 那么此時1em=30px;

ex：當(dāng)前字母"x"的高度，一般為字體尺寸的一半。

%：是以當(dāng)前文本的百分比定義尺寸。例如：{ font-size:300%}是指文字大小為原來的3倍。

small、large：表示比當(dāng)前小一個級別或大一個級別的尺寸。

默認(rèn)值：medium(標(biāo)準(zhǔn)大小)

(3)font-style：定義字體樣式為normal、italic、oblique。默認(rèn)設(shè)置為normal。

注意： italic 斜體 oblique 歪斜體 italic和oblique實(shí)際效果是一樣的。

默認(rèn)值:normal

(4)line-height：設(shè)置文本所在行的行高。默認(rèn)為normal?？梢允切袃?nèi)元素、行內(nèi)塊元素, 通常與height設(shè)置的高度值相同, 可以做到垂直居中的作用。

你也可以自己鍵入一個精確的數(shù)值并選取一個計量單位。

比較直觀的寫法用百分比, 例如140%是指行高等于文字大小的1.4倍。

最常用的方法: line-height:1.5em; /*行間距,相對數(shù)值,1.5倍行距,*/ 可有效的避免文字發(fā)生重疊

默認(rèn)值： normal

(5)text-decoration：在文本中添加underline(下劃線)、overline(上劃線)、line-through(中劃線)、blink(閃爍效果)。

這些效果可以同時存在，將效果前的復(fù)選框選定即可。

注意：鏈接的默認(rèn)設(shè)置是underline，我們可以通過選none去除下劃線。blink(閃爍效果)只在mozilla瀏覽器里可以看到, IE、opera不支持

默認(rèn)值： none

(6)font-weight：給字體指定粗體字的磅值。

normal 默認(rèn)值。定義標(biāo)準(zhǔn)的字符。

bold 定義粗體字符。

bolder 定義更粗的字符。

lighter 定義更細(xì)的字符。

100

200

300

400

500

600

700

800

900

inherit 規(guī)定應(yīng)該從父元素繼承字體的粗細(xì)。

定義由粗到細(xì)的字符。400 等同于 normal, 而 700 等同于 bold。

默認(rèn)值: normal

(7)font-variant：允許你選取字體的變種, 選small-caps(小型大寫字母)時, 此樣式區(qū)域內(nèi)所有字母大寫。

normal表示正常的字體, 為默認(rèn)值；

默認(rèn)值: normal

(8)text-transform：將選區(qū)中每個單詞的第一個字母轉(zhuǎn)為大寫, 或者令單詞全部大寫或全部小寫。

參數(shù)：capitalize(單詞首字母大寫)、uppercase(轉(zhuǎn)換成大寫)、lowercase(轉(zhuǎn)換成小寫)、none(不轉(zhuǎn)換)。

默認(rèn)值：none

(9)color：定義文字顏色。包括對表單輸入的文字顏色。

CSS中顏色的值有三種表示方法：

#RRGGBB格式，是由紅綠藍(lán)三種顏色的值組合，每種顏色的值為"00 – FF"的兩位十六進(jìn)制正整數(shù)。

例如：#FF0000表示紅色，#FFFF00表示黃色。

rgb(R,G,B)格式, RGB為三色的值, 取0~255, 例如：rgb(255,0,0)表示紅色, rgb(255,255,0)表示黃色。

用顏色名稱。CSS可以使用已經(jīng)定義好的顏色名稱。例如：red表示紅色, yellow表示黃色。

顏色值的縮寫:

p{color:#000000} 可以縮寫為：p{color:#000}

p{color:#336699} 可以縮寫為：p{color:#369}

默認(rèn)值： not specified

color: transparent; 透明色

rgba() 解釋: rgba(紅0-255, 綠0-255, 藍(lán)0-255, 透明度0-1)

注意: 如果文字的顏色通過單獨(dú)的類選擇去設(shè)置沒有改變顏色, 則應(yīng)該通過組合選擇器(.header .top .topR .blue)去設(shè)置, 改變它的優(yōu)先級。

2. background(背景)

background面板主要是對元素的背景進(jìn)行設(shè)置，包括背景顏色、背景圖象、背景圖象的控制。

一般是對body(頁面)、table(表格)、div(區(qū)域)的設(shè)置。

(1)background-color：設(shè)置元素的背景色。包括對input表單輸入框的背景顏色;

默認(rèn)值: transparent(背景顏色為透明)

rgba() 解釋: rgba(紅0-255, 綠0-255, 藍(lán)0-255, 透明度0-1) 一般用于背景色

(2)background-image：設(shè)置元素的背景圖像。

默認(rèn)值:none

CSS3支持多重背景圖,只要加上一個url指定圖片路徑,并用逗號(,)將兩組url分隔就可以了

background-image:url(a.jpg),url(b.jpg);

base64使用

background-image: url("data:image/png;base64,iVBORw0KGgo=...");

(3)background-repeat：確定背景圖像是否以及如何重復(fù)。

repeat 默認(rèn)值。背景圖像將在垂直方向和水平方向重復(fù)。

repeat-x 背景圖像將在水平方向重復(fù)。

repeat-y 背景圖像將在垂直方向重復(fù)。

no-repeat 背景圖像將僅顯示一次。

inherit 規(guī)定應(yīng)該從父元素繼承background-repeat屬性的設(shè)置。

注意：如果定義的元素的body，可以控制頁面背景是否重復(fù)。

默認(rèn)值: repeat

(4)background-attachment：固定背景圖像或者跟隨內(nèi)容滾動。

參數(shù)fixed表示固定背景(不隨屏幕滾動而滾動，決定背景圖像是否要固定在原來的位置), scroll表示跟隨內(nèi)容滾動的背景。

注意：如果定義的元素的body, 可以使頁面背景固定。

默認(rèn)值: scroll

(5)background-position(X)：指定背景圖像的水平位置。

可以指定為left(左邊), center(居中)，right(右邊)；

也可以指定數(shù)值，如20px是指背景距離左邊20象素。

background-position(Y)：指定背景圖像的垂直位置。

可以指定為top(頂部), center(居中), bottom(底部)；也可以指定數(shù)值。

background-position屬性值:

left top

center top

right top

left center

center center

right center

left bottom

center bottom

right bottom

如果您僅規(guī)定了一個關(guān)鍵詞，那么第二個值將是"center"。

注意:采用英文單詞的水平位置和垂直位置的屬性值可以調(diào)換

x% y% 第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規(guī)定了一個值，另一個值將是 50%。

xpos ypos 第一個值是水平位置，第二個值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。

如果您僅規(guī)定了一個值，另一個值將是50%。

您可以混合使用 % 和 position 值。

默認(rèn)值：0% 0%

. HTTP請求格式

做過Socket編程的人都知道，當(dāng)我們設(shè)計一個通信協(xié)議時，“消息頭/消息體”的分割方式是很常用的，消息頭告訴對方這個消息是干什么的，消息體告訴對方怎么干。HTTP協(xié)議傳輸?shù)南⒁彩沁@樣規(guī)定的，每一個HTTP包都分為HTTP頭和HTTP體兩部分，消息體是可選的，而消息頭是必須的。每當(dāng)我們打開一個網(wǎng)頁，在上面點(diǎn)擊右鍵，選擇“查看源文件”，這時看到的HTML代碼就是HTTP的消息體，那么消息頭可以通過瀏覽器的開發(fā)工具或者插件可以看到，如果火狐的Firebug，IE的Httpwatch。

客戶端通過發(fā)送 HTTP 請求向服務(wù)器請求對資源的訪問。它向服務(wù)器傳遞了一個數(shù)據(jù)塊，也就是請求信息，HTTP 請求由三部分組成：請求行、請求頭和請求正文。

請求行：請求方法 URI 協(xié)議/版本

請求頭(Request Header)

請求正文

下面是一個HTTP請求的數(shù)據(jù)：

POST /index.php HTTP/1.1

Host: localhost

User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: zh-cn,zh;q=0.5

Accept-Encoding: gzip, deflate

Connection: keep-alive

Referer: http://localhost/

Content-Length：25

Content-Type：application/x-www-form-urlencoded

username=aa&password=1234

1、請求行：請求方法URI協(xié)議/版本

請求的第一行是“方法 URL 協(xié)議/版本”，并以回車換行作為結(jié)尾。請求行以空格分隔。格式如下：

POST /index.php HTTP/1.1

以上代碼中“GET”代表請求方法，“//ndex.php”表示URI，“HTTP/1.1代表協(xié)議和協(xié)議的版本。

根據(jù)HTTP標(biāo)準(zhǔn)，HTTP請求可以使用多種請求方法。例如：HTTP1.1支持7種請求方法：GET、POST、HEAD、OPTIONS、PUT、DELETE和TARCE。在Internet應(yīng)用中，最常用的方法是GET和POST。

URL完整地指定了要訪問的網(wǎng)絡(luò)資源，通常只要給出相對于服務(wù)器的根目錄的相對目錄即可，因此總是以“/”開頭，最后，協(xié)議版本聲明了通信過程中使用HTTP的版本。

請求方法

在 HTTP 協(xié)議中，HTTP 請求可以使用多種請求方法，這些方法指明了要以何種方式來訪問 Request-URI 所標(biāo)識的資源。HTTP1.1 支持的請求方法如下表所示：

HTTP1.1 中的請求方式：

方法

作用

GET

請求獲取由 Request-URI 所標(biāo)識的資源

POST

請求服務(wù)器接收在請求中封裝的實(shí)體，并將其作為由 Request-Line 中的 Request-URI 所標(biāo)識的資源的一部分

HEAD

請求獲取由 Request-URI 所標(biāo)識的資源的響應(yīng)消息報頭

PUT

請求服務(wù)器存儲一個資源，并用 Request-URI 作為其標(biāo)識符

DELETE

請求服務(wù)器刪除由 Request-URI 所標(biāo)識的資源

TRACE

請求服務(wù)器回送到的請求信息，主要用于測試或診斷

CONNECT

保留將來使用

OPTIONS

請求查詢服務(wù)器的性能，或者查詢與資源相關(guān)的選項和需求

重點(diǎn)介紹 GET、POST 和 HEAD 三個方法：

（1）GET

GET 方法用于獲取由 Request-URI 所標(biāo)識的資源的信息，常見的形式是：

GET Request-URI HTTP/1.1

GET方法是默認(rèn)的HTTP請求方法，例如當(dāng)我們通過在瀏覽器的地址欄中直接輸入網(wǎng)址的方式去訪問網(wǎng)頁的時候，瀏覽器采用的就是 GET 方法向服務(wù)器獲取資源。

我們可以使用GET方法來提交表單數(shù)據(jù)，用GET方法提交的表單數(shù)據(jù)只經(jīng)過了簡單的編碼，同時它將作為URL的一部分向服務(wù)器發(fā)送，因此，如果使用GET方法來提交表單數(shù)據(jù)就存在著安全隱患上。例如：

Http://localhost/login.php?username=aa&password=1234

從上面的URL請求中，很容易就可以辯認(rèn)出表單提交的內(nèi)容。（？之后的內(nèi)容）另外由于GET方法提交的數(shù)據(jù)是作為URL請求的一部分所以提交的數(shù)據(jù)量不能太大。這是因為瀏覽器對url的長度有限制

各種瀏覽器也會對url的長度有所限制，下面是幾種常見瀏覽器的url長度限制:(單位:字符)

IE : 2803

Firefox:65536

Chrome:8182

Safari:80000

Opera:190000

（2）POST

POST方法是GET方法的一個替代方法，它主要是向Web服務(wù)器提交表單數(shù)據(jù)，尤其是大批量的數(shù)據(jù)。在請求頭信息結(jié)束之后的兩個回車換行之后（實(shí)際是空一行），就是表單提交的數(shù)據(jù)。如上面提到的post表單數(shù)據(jù)：

username=aa&password=1234

POST方法克服了GET方法的一些缺點(diǎn)。通過POST方法提交表單數(shù)據(jù)時，數(shù)據(jù)不是作為URL請求的一部分而是作為標(biāo)準(zhǔn)數(shù)據(jù)傳送給Web服務(wù)器，這就克服了GET方法中的信息無法保密和數(shù)據(jù)量太小的缺點(diǎn)。因此，出于安全的考慮以及對用戶隱私的尊重，通常表單提交時采用POST方法。

　從編程的角度來講，如果用戶通過GET方法提交數(shù)據(jù)，則數(shù)據(jù)存放在QUERY＿STRING環(huán)境變量中，而POST方法提交的數(shù)據(jù)則可以從標(biāo)準(zhǔn)輸入流中獲取。

GET與POST方法有以下區(qū)別：

1、在客戶端，Get方式在通過URL提交數(shù)據(jù)，數(shù)據(jù)在URL中可以看到；POST方式，數(shù)據(jù)放在HTTP包的body中。

2、 GET方式提交的數(shù)據(jù)大小有限制（因為瀏覽器對URL的長度有限制），而POST則沒有此限制。

3、安全性問題。正如在（1）中提到，使用 Get 的時候，參數(shù)會顯示在地址欄上，而 Post 不會。所以，如果這些數(shù)據(jù)是中文數(shù)據(jù)而且是非敏感數(shù)據(jù)，那么使用 get；如果用戶輸入的數(shù)據(jù)不是中文字符而且包含敏感數(shù)據(jù)，那么還是使用 post為好。

4.、服務(wù)器取值方式不一樣。GET方式取值，如php可以使用$_GET來取得變量的值，而POST方式通過$_POST來獲取變量的值。

（3）HEAD

HEAD 方法與 GET 方法幾乎是相同的，它們的區(qū)別在于 HEAD 方法只是請求消息報頭，而不是完整的內(nèi)容。對于 HEAD 請求的回應(yīng)部分來說，它的 HTTP 頭部中包含的信息與通過 GET 請求所得到的信息是相同的。利用這個方法，不必傳輸整個資源內(nèi)容，就可以得到 Request-URI 所標(biāo)識的資源的信息。這個方法通常被用于測試超鏈接的有效性，是否可以訪問，以及最近是否更新。

要注意的是，在 HTML 文檔中，書寫 get 和 post，大小寫都可以，但在 HTTP 協(xié)議中的 GET 和 POST 只能是大寫形式。

2. 請求頭

每個頭域由一個域名，冒號（:）和域值三部分組成。域名是大小寫無關(guān)的，域值前可以添加任何數(shù)量的空格符，頭域可以被擴(kuò)展為多行，在每行開始處，使用至少一個空格或制表符。

HTTP最常見的請求頭如下：

Transport 頭域

Connection：

作用：表示是否需要持久連接。

如果服務(wù)器看到這里的值為“Keep-Alive”，或者看到請求使用的是HTTP 1.1（HTTP 1.1默認(rèn)進(jìn)行持久連接）,它就可以利用持久連接的優(yōu)點(diǎn)，當(dāng)頁面包含多個元素時（例如Applet，圖片），顯著地減少下載所需要的時間。要實(shí)現(xiàn)這一點(diǎn)，服務(wù)器需要在應(yīng)答中發(fā)送一個Content-Length頭，最簡單的實(shí)現(xiàn)方法是：先把內(nèi)容寫入 ByteArrayOutputStream，然后在正式寫出內(nèi)容之前計算它的大??；

例如：　Connection: keep-alive 當(dāng)一個網(wǎng)頁打開完成后，客戶端和服務(wù)器之間用于傳輸HTTP數(shù)據(jù)的TCP連接不會關(guān)閉，如果客戶端再次訪問這個服務(wù)器上的網(wǎng)頁，會繼續(xù)使用這一條已經(jīng)建立的連接

例如： Connection: close 代表一個Request完成后，客戶端和服務(wù)器之間用于傳輸HTTP數(shù)據(jù)的TCP連接會關(guān)閉，當(dāng)客戶端再次發(fā)送Request，需要重新建立TCP連接。

Host（發(fā)送請求時，該報頭域是必需的）

Host請求報頭域主要用于指定被請求資源的Internet主機(jī)和端口號，它通常從HTTP URL中提取出來的。

eg：http://；localhost/index.html

瀏覽器發(fā)送的請求消息中，就會包含Host請求報頭域，如下：

Host：localhost

此處使用缺省端口號80，若指定了端口號8080，則變成：Host：localhost:8080

Client 頭域

Accept：

作用：瀏覽器可以接受的媒體類型（MIME類型）,

例如： Accept: text/html 代表瀏覽器可以接受服務(wù)器回發(fā)的類型為 text/html 也就是我們常說的html文檔, 如果服務(wù)器無法返回text/html類型的數(shù)據(jù)，服務(wù)器應(yīng)該返回一個406錯誤(non acceptable)。

通配符 * 代表任意類型。例如 Accept: */* 代表瀏覽器可以處理所有類型，(一般瀏覽器發(fā)給服務(wù)器都是發(fā)這個)

Accept-Encoding：

作用：瀏覽器申明自己接收的編碼方法，通常指定壓縮方法，是否支持壓縮，支持什么壓縮方法（gzip，deflate），（注意：這不是只字符編碼）;

例如： Accept-Encoding: gzip, deflate。Server能夠向支持gzip/deflate的瀏覽器返回經(jīng)gzip或者deflate編碼的HTML頁面。許多情形下這可以減少5到10倍的下載時間，也節(jié)省帶寬。

Accept-Language：

作用：瀏覽器申明自己接收的語言。

語言跟字符集的區(qū)別：中文是語言，中文有多種字符集，比如big5，gb2312，gbk等等；

例如： Accept-Language:zh-cn 。如果請求消息中沒有設(shè)置這個報頭域，服務(wù)器假定客戶端對各種語言都可以接受。

User-Agent：

作用：告訴HTTP服務(wù)器，客戶端使用的操作系統(tǒng)和瀏覽器的名稱和版本.

我們上網(wǎng)登陸論壇的時候，往往會看到一些歡迎信息，其中列出了你的操作系統(tǒng)的名稱和版本，你所使用的瀏覽器的名稱和版本，這往往讓很多人感到很神奇，實(shí)際上，服務(wù)器應(yīng)用程序就是從User-Agent這個請求報頭域中獲取到這些信息User-Agent請求報頭域允許客戶端將它的操作系統(tǒng)、瀏覽器和其它屬性告訴服務(wù)器。

例如： User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; CIBA; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; InfoPath.2; .NET4.0E)

Accept-Charset：

作用：瀏覽器申明自己接收的字符集，這就是本文前面介紹的各種字符集和字符編碼，如gb2312，utf-8（通常我們說Charset包括了相應(yīng)的字符編碼方案）；

例如：Accept-Charset:iso-8859-1,gb2312.如果在請求消息中沒有設(shè)置這個域，缺省是任何字符集都可以接受。

Authorization：授權(quán)信息，通常出現(xiàn)在對服務(wù)器發(fā)送的WWW-Authenticate頭的應(yīng)答中；

Authorization請求報頭域主要用于證明客戶端有權(quán)查看某個資源。當(dāng)瀏覽器訪問一個頁面時，如果收到服務(wù)器的響應(yīng)代碼為401（未授權(quán)），可以發(fā)送一個包含Authorization請求報頭域的請求，要求服務(wù)器對其進(jìn)行驗證。

Cookie/Login 頭域

Cookie:

作用：最重要的header, 將cookie的值發(fā)送給HTTP 服務(wù)器

Entity頭域

Content-Length

作用：發(fā)送給HTTP服務(wù)器數(shù)據(jù)的長度。即請求消息正文的長度；

例如： Content-Length: 38

Content-Type：

作用：

例如：Content-Type: application/x-www-form-urlencoded

Miscellaneous 頭域

Referer:

作用：提供了Request的上下文信息的服務(wù)器，告訴服務(wù)器我是從哪個鏈接過來的，比如從我主頁上鏈接到一個朋友那里，他的服務(wù)器就能夠從HTTP Referer中統(tǒng)計出每天有多少用戶點(diǎn)擊我主頁上的鏈接訪問他的網(wǎng)站。

例如: Referer:http://translate.google.cn/?hl=zh-cn&tab=wT

Cache 頭域

If-Modified-Since：

作用：把瀏覽器端緩存頁面的最后修改時間發(fā)送到服務(wù)器去，服務(wù)器會把這個時間與服務(wù)器上實(shí)際文件的最后修改時間進(jìn)行對比。如果時間一致，那么返回304，客戶端就直接使用本地緩存文件。如果時間不一致，就會返回200和新的文件內(nèi)容?？蛻舳私拥街螅瑫G棄舊文件，把新文件緩存起來，并顯示在瀏覽器中。

例如：If-Modified-Since: Thu, 09 Feb 2012 09:07:57 GMT。

If-None-Match：

作用: If-None-Match和ETag一起工作，工作原理是在HTTP Response中添加ETag信息。當(dāng)用戶再次請求該資源時，將在HTTP Request 中加入If-None-Match信息(ETag的值)。如果服務(wù)器驗證資源的ETag沒有改變（該資源沒有更新），將返回一個304狀態(tài)告訴客戶端使用本地緩存文件。否則將返回200狀態(tài)和新的資源和Etag. 使用這樣的機(jī)制將提高網(wǎng)站的性能

例如: If-None-Match: "03f2b33c0bfcc1:0"

Pragma：

作用：防止頁面被緩存，在HTTP/1.1版本中，它和Cache-Control:no-cache作用一模一樣

Pargma只有一個用法，例如： Pragma: no-cache

注意: 在HTTP/1.0版本中，只實(shí)現(xiàn)了Pragema:no-cache, 沒有實(shí)現(xiàn)Cache-Control

Cache-Control：

作用: 這個是非常重要的規(guī)則。這個用來指定Response-Request遵循的緩存機(jī)制。各個指令含義如下

Cache-Control:Public 可以被任何緩存所緩存（）

Cache-Control:Private 內(nèi)容只緩存到私有緩存中

Cache-Control:no-cache 所有內(nèi)容都不會被緩存

2. HTTP響應(yīng)格式

在接收和解釋請求消息后，服務(wù)器會返回一個 HTTP 響應(yīng)消息。與 HTTP 請求類似，HTTP 響應(yīng)也是由三個部分組成，分別是：狀態(tài)行、消息報頭和響應(yīng)正文。如：

HTTP/1.1 200 OK

Date: Sun, 17 Mar 2013 08:12:54 GMT

Server: Apache/2.2.8 (Win32) PHP/5.2.5

X-Powered-By: PHP/5.2.5

Set-Cookie: PHPSESSID=c0huq7pdkmm5gg6osoe3mgjmm3; path=/

Expires: Thu, 19 Nov 1981 08:52:00 GMT

Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0

Pragma: no-cache

Content-Length: 4393

Keep-Alive: timeout=5, max=100

Connection: Keep-Alive

Content-Type: text/html; charset=utf-8

<html>

<head>

<title>HTTP響應(yīng)示例<title>

</head>

<body>

Hello HTTP!

</body>

</html>

1、狀態(tài)行

狀態(tài)行由協(xié)議版本、數(shù)字形式的狀態(tài)代碼，及相應(yīng)的狀態(tài)描述組成，各元素之間以空格分隔，結(jié)尾時回車換行符，格式如下：

HTTP-Version Status-Code Reason-Phrase CRLF

HTTP-Version 表示服務(wù)器 HTTP 協(xié)議的版本，Status-Code 表示服務(wù)器發(fā)回的響應(yīng)代碼，Reason-Phrase 表示狀態(tài)代碼的文本描述，CRLF 表示回車換行。例如：

HTTP/1.1 200 OK (CRLF)

狀態(tài)代碼與狀態(tài)描述

狀態(tài)代碼由 3 位數(shù)字組成，表示請求是否被理解或被滿足，狀態(tài)描述給出了關(guān)于狀態(tài)碼的簡短的文字描述。狀態(tài)碼的第一個數(shù)字定義了響應(yīng)類別，后面兩位數(shù)字沒有具體分類。第一個數(shù)字有 5 種取值，如下所示。

1xx：指示信息——表示請求已經(jīng)接受，繼續(xù)處理
2xx：成功——表示請求已經(jīng)被成功接收、理解、接受。
3xx：重定向——要完成請求必須進(jìn)行更進(jìn)一步的操作
4xx：客戶端錯誤——請求有語法錯誤或請求無法實(shí)現(xiàn)
5xx：服務(wù)器端錯誤——服務(wù)器未能實(shí)現(xiàn)合法的請求。

常見狀態(tài)代碼、狀態(tài)描述、說明：

200 OK //客戶端請求成功

400 Bad Request //客戶端請求有語法錯誤，不能被服務(wù)器所理解

401 Unauthorized //請求未經(jīng)授權(quán)，這個狀態(tài)代碼必須和WWW-Authenticate報頭域一起使用

403 Forbidden //服務(wù)器收到請求，但是拒絕提供服務(wù)

404 Not Found //請求資源不存在，eg：輸入了錯誤的URL

500 Internal Server Error //服務(wù)器發(fā)生不可預(yù)期的錯誤

503 Server Unavailable //服務(wù)器當(dāng)前不能處理客戶端的請求，一段時間后可能恢復(fù)正常

2、響應(yīng)正文

響應(yīng)正文就是服務(wù)器返回的資源的內(nèi)容，響應(yīng)頭和正文之間也必須用空行分隔。如：

<html>
<head>
<title>HTTP響應(yīng)示例<title>
</head>
<body>
Hello HTTP!
</body>
</html>

3 、響應(yīng)頭信息

HTTP最常見的響應(yīng)頭如下所示：

Cache頭域

Date：

作用：生成消息的具體時間和日期，即當(dāng)前的GMT時間。

例如：　Date: Sun, 17 Mar 2013 08:12:54 GMT

Expires：

作用: 瀏覽器會在指定過期時間內(nèi)使用本地緩存，指明應(yīng)該在什么時候認(rèn)為文檔已經(jīng)過期，從而不再緩存它。

例如: Expires: Thu, 19 Nov 1981 08:52:00 GMT　　

Vary

作用：

例如: Vary: Accept-Encoding

Cookie/Login 頭域

P3P

作用: 用于跨域設(shè)置Cookie, 這樣可以解決iframe跨域訪問cookie的問題

例如: P3P: CP=CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR

Set-Cookie

作用：非常重要的header, 用于把cookie 發(fā)送到客戶端瀏覽器，每一個寫入cookie都會生成一個Set-Cookie.

例如: Set-Cookie: PHPSESSID=c0huq7pdkmm5gg6osoe3mgjmm3; path=/

Entity實(shí)體頭域：

實(shí)體內(nèi)容的屬性，包括實(shí)體信息類型，長度，壓縮方法，最后一次修改時間，數(shù)據(jù)有效性等。

ETag：

作用: 和If-None-Match 配合使用。（實(shí)例請看上節(jié)中If-None-Match的實(shí)例）

例如: ETag: "03f2b33c0bfcc1:0"

Last-Modified：

作用：用于指示資源的最后修改日期和時間。（實(shí)例請看上節(jié)的If-Modified-Since的實(shí)例）

例如: Last-Modified: Wed, 21 Dec 2011 09:09:10 GMT

Content-Type：

作用：WEB服務(wù)器告訴瀏覽器自己響應(yīng)的對象的類型和字符集,

例如:

Content-Type: text/html; charset=utf-8

　　Content-Type:text/html;charset=GB2312

　　Content-Type: image/jpeg

Content-Length：

指明實(shí)體正文的長度，以字節(jié)方式存儲的十進(jìn)制數(shù)字來表示。在數(shù)據(jù)下行的過程中，Content-Length的方式要預(yù)先在服務(wù)器中緩存所有數(shù)據(jù)，然后所有數(shù)據(jù)再一股腦兒地發(fā)給客戶端。

　　例如: Content-Length: 19847

Content-Encoding：

作用：文檔的編碼（Encode）方法。一般是壓縮方式。

WEB服務(wù)器表明自己使用了什么壓縮方法（gzip，deflate）壓縮響應(yīng)中的對象。利用gzip壓縮文檔能夠顯著地減少HTML文檔的下載時間。

例如：Content-Encoding：gzip

Content-Language：

作用： WEB服務(wù)器告訴瀏覽器自己響應(yīng)的對象的語言者

例如： Content-Language:da

Miscellaneous 頭域

Server：

作用：指明HTTP服務(wù)器的軟件信息

例如:Apache/2.2.8 (Win32) PHP/5.2.5

X-Powered-By：

作用：表示網(wǎng)站是用什么技術(shù)開發(fā)的

例如： X-Powered-By: PHP/5.2.5

Transport頭域

Connection：

Location頭域

Location：

作用：用于重定向一個新的位置，包含新的URL地址

實(shí)例請看304狀態(tài)實(shí)例

HTTP協(xié)議是無狀態(tài)的和Connection: keep-alive的區(qū)別

　　無狀態(tài)是指協(xié)議對于事務(wù)處理沒有記憶能力，服務(wù)器不知道客戶端是什么狀態(tài)。從另一方面講，打開一個服務(wù)器上的網(wǎng)頁和你之前打開這個服務(wù)器上的網(wǎng)頁之間沒有任何聯(lián)系。

　　HTTP是一個無狀態(tài)的面向連接的協(xié)議，無狀態(tài)不代表HTTP不能保持TCP連接，更不能代表HTTP使用的是UDP協(xié)議（無連接）。

　　從HTTP/1.1起，默認(rèn)都開啟了Keep-Alive，保持連接特性，簡單地說，當(dāng)一個網(wǎng)頁打開完成后，客戶端和服務(wù)器之間用于傳輸HTTP數(shù)據(jù)的TCP連接不會關(guān)閉，如果客戶端再次訪問這個服務(wù)器上的網(wǎng)頁，會繼續(xù)使用這一條已經(jīng)建立的連接。

　　Keep-Alive不會永久保持連接，它有一個保持時間，可以在不同的服務(wù)器軟件（如Apache）中設(shè)定這個時間。

3. 瀏覽器緩存

瀏覽器緩存：包括頁面html緩存和圖片js，css等資源的緩存。如下圖，瀏覽器緩存是基于把頁面信息保存到用戶本地電腦硬盤里。

1、緩存的優(yōu)點(diǎn)：

1）服務(wù)器響應(yīng)更快：因為請求從緩存服務(wù)器（離客戶端更近）而不是源服務(wù)器被相應(yīng)，這個過程耗時更少，讓服務(wù)器看上去響應(yīng)更快。

2）減少網(wǎng)絡(luò)帶寬消耗：當(dāng)副本被重用時會減低客戶端的帶寬消耗；客戶可以節(jié)省帶寬費(fèi)用，控制帶寬的需求的增長并更易于管理。

2、緩存工作原理

頁面緩存狀態(tài)是由http header決定的，一個瀏覽器請求信息，一個是服務(wù)器響應(yīng)信息。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。其中Pragma: no-cache由HTTP/1.0規(guī)定，Cache-Control由HTTP/1.1規(guī)定。

工作原理圖：

從圖中我們可以看到原理主要分三步：

第一次請求：瀏覽器通過http的header報頭，附帶Expires，Cache-Control，Last-Modified/Etag向服務(wù)器請求，此時服務(wù)器記錄第一次請求的Last-Modified/Etag
再次請求：當(dāng)瀏覽器再次請求的時候，請求頭附帶Expires，Cache-Control，If-Modified-Since/Etag向服務(wù)器請求
服務(wù)器根據(jù)第一次記錄的Last-Modified/Etag和再次請求的If-Modified-Since/Etag做對比，判斷是否需要更新，服務(wù)器通過這兩個頭判斷本地資源未發(fā)生變化，客戶端不需要重新下載，返回304響應(yīng)。常見流程如下圖所示：

與緩存相關(guān)的HTTP擴(kuò)展消息頭

Expires：設(shè)置頁面過期時間，格林威治時間GMT

Cache-Control：更細(xì)致的控制緩存的內(nèi)容

Last-Modified：請求對象最后一次的修改時間用來判斷緩存是否過期通常由文件的時間信息產(chǎn)生

ETag：響應(yīng)中資源的校驗值，在服務(wù)器上某個時段是唯一標(biāo)識的。ETag是一個可以與Web資源關(guān)聯(lián)的記號（token），和Last-Modified功能才不多，也是一個標(biāo)識符，一般和Last-Modified一起使用，加強(qiáng)服務(wù)器判斷的準(zhǔn)確度。

Date：服務(wù)器的時間

If-Modified-Since：客戶端存取的該資源最后一次修改的時間，用來和服務(wù)器端的Last-Modified做比較

If-None-Match：客戶端存取的該資源的檢驗值，同ETag。

Cache-Control的主要參數(shù)

Cache-Control: private/public Public 響應(yīng)會被緩存，并且在多用戶間共享。 Private 響應(yīng)只能夠作為私有的緩存，不能再用戶間共享。

Cache-Control: no-cache：不進(jìn)行緩存

Cache-Control: max-age=x：緩存時間以秒為單位

Cache-Control: must-revalidate：如果頁面是過期的則去服務(wù)器進(jìn)行獲取。

2、關(guān)于圖片，css，js，flash的緩存

這個主要通過服務(wù)器的配置來實(shí)現(xiàn)這個技術(shù)，如果使用apache服務(wù)器的話，可以使用mod_expires模塊來實(shí)現(xiàn)：

編譯mod_expires模塊：

Cd /root/httpd-2.2.3/modules/metadata

/usr/local/apache/bin/apxs -i -a -c mod_expires.c //編譯

編輯httpd.conf配置：添加下面內(nèi)容

ExpiresActive on

ExpiresDefault "access plus 1 month"

ExpiresByType text/html "access plus 1 months"

ExpiresByType text/css "access plus 1 months"

ExpiresByType image/gif "access plus 1 months"

ExpiresByType image/jpeg "access plus 1 months"

ExpiresByType image/jpg "access plus 1 months"

ExpiresByType image/png "access plus 1 months"

EXpiresByType application/x-shockwave-flash "access plus 1 months"

EXpiresByType application/x-javascript "access plus 1 months"

#ExpiresByType video/x-flv "access plus 1 months"

</IfModule>

解釋：第一句--開啟服務(wù)

第二句--默認(rèn)時間是一個月

在下面是關(guān)于各種類型的資源的緩存時間設(shè)置

在線咨詢

上一篇：你應(yīng)該要知道的，前端開發(fā)過程中的HTML規(guī)范
下一篇：IT兄弟連 HTML5教程多媒體應(yīng)用 HTML圖像地圖

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML 5 - 交互

您的項目需求