關(guān)于HTML/HTML5（一）

學(xué)習(xí)HTML的最佳網(wǎng)站沒有之一http://www.w3school.com.cn/html/

關(guān)于HTML/HTML5（二） http://www.reibang.com/p/e03a8728a0bc

HTML/HTML5和CSS/CSS3還有JavaScript都是基礎(chǔ)中的基礎(chǔ)页徐，很多的框架翰苫、插件匣距，都是在這些“基礎(chǔ)”的基礎(chǔ)上實(shí)現(xiàn)的蚓胸。

常說的DIV+CSS布局幻馁，不是說會(huì)把HTML和CSS一起使用就夠了立美，而是在編寫頁面前厘唾，先布置頁面結(jié)構(gòu)（比如說 網(wǎng)頁大體分為頭部/頁眉皆看，導(dǎo)航欄，內(nèi)容颜说，底部/頁腳购岗，然后內(nèi)容又分為……，相類似的組件/結(jié)構(gòu)又可以將它統(tǒng)一為同一類結(jié)構(gòu)……）门粪，

也可以使用 HTML5 提供的新語義元素來布局網(wǎng)頁喊积，header定義文檔或節(jié)的頁眉，nav定義導(dǎo)航鏈接的容器玄妈，section定義文檔中的節(jié)乾吻，article定義獨(dú)立的自包含文章，aside定義內(nèi)容之外的內(nèi)容（比如側(cè)欄）拟蜻，footer定義文檔或節(jié)的頁腳绎签，details定義額外的細(xì)節(jié)，summary定義 details 元素的標(biāo)題酝锅。

然后再編寫代碼诡必。先思考，再動(dòng)手搔扁，否則會(huì)事倍功半爸舒。

HTML的簡(jiǎn)介：

超文本標(biāo)記語言 (HyperTextMarkupLanguage) 、

標(biāo)記語言(markup language)稿蹲、標(biāo)記標(biāo)簽(markup tag) 扭勉、

尖括號(hào)包圍的關(guān)鍵詞、成對(duì)出現(xiàn)苛聘、開始標(biāo)簽結(jié)束標(biāo)簽涂炎、開放標(biāo)簽閉合標(biāo)簽忠聚。

HTML 文檔 = 網(wǎng)頁（包含HTML標(biāo)簽和文本），Web 瀏覽器的作用是讀取 HTML 文檔唱捣，并以網(wǎng)頁的形式顯示出它們咒林。

開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容就是元素的內(nèi)容，

?HTML 元素具有空內(nèi)容（empty content）爷光，

空元素在開始標(biāo)簽中進(jìn)行關(guān)閉（以開始標(biāo)簽的結(jié)束而結(jié)束，比如<br />）澎粟，

大多數(shù) HTML 元素?fù)碛?i>屬性（為 HTML 元素提供附加信息蛀序，在開始標(biāo)簽中，以名稱/值對(duì)的形式出現(xiàn)活烙，比如name="value"）徐裸，始終為屬性值加引號(hào)，

大多數(shù) HTML 元素可以嵌套（可以包含其他 HTML 元素）啸盏，

HTML 標(biāo)簽對(duì)大小寫不敏感（推薦使用小寫）重贺。

當(dāng)顯示頁面時(shí)，瀏覽器會(huì)移除源代碼中多余的空格和空行回懦。所有連續(xù)的空格或空行都會(huì)被算作一個(gè)空格气笙。需要注意的是，HTML 代碼中的所有連續(xù)的空行（換行）也被顯示為一個(gè)空格怯晕。

所有瀏覽器潜圃，不論新舊，都會(huì)自動(dòng)把未識(shí)別元素當(dāng)做行內(nèi)元素來處理舟茶。

建議始終使用小寫

HTML里的Hello World谭期，每個(gè)人都敲過n遍。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>...</title>

</head>

<body>

<div>Hello World</div>

</body>

</html>

語言代碼：（HTML 的 lang 屬性可用于網(wǎng)頁或部分網(wǎng)頁的語言吧凉。這對(duì)搜索引擎和瀏覽器是有幫助的隧出。）

根據(jù) W3C 推薦標(biāo)準(zhǔn)，您應(yīng)該通過? 標(biāo)簽中的 lang 屬性對(duì)每張頁面中的主要語言進(jìn)行聲明阀捅，比如：

<html lang="en">

......

</html>

參考手冊(cè)：http://www.w3school.com.cn/tags/html_ref_language_codes.asp

不贊成使用的標(biāo)簽和屬性：

<center>標(biāo)簽（居中的內(nèi)容）

<font>標(biāo)簽和<basefont>標(biāo)簽（字體）

<s>標(biāo)簽和<strike>標(biāo)簽（刪除線文本）：使用<del>代替

<u>標(biāo)簽（下劃線文本）

<listing>標(biāo)簽<plaintext>標(biāo)簽<xmp>標(biāo)簽：使用<pre>代替

align屬性（對(duì)齊方式）

bgcolor屬性（背景顏色）

color屬性（文本顏色）

下面列出了適用于大多數(shù)HTML元素的屬性：

class屬性指定類名胀瞪，

id屬性指定唯一id，

style屬性指定行內(nèi)樣式饲鄙，

title屬性指定額外信息（可在工具提示中顯示）


必需的屬性：

如：1.圖像標(biāo)簽必須使用alt屬性赏廓，當(dāng)圖像無法顯示時(shí)該屬性很重要。

2.必須定義圖像尺寸傍妒，這樣做會(huì)減少閃爍幔摸，因?yàn)闉g覽器會(huì)在圖像加載之前為圖像預(yù)留空間。

對(duì)標(biāo)簽語義化有較好的理解颤练，就是認(rèn)識(shí)標(biāo)簽和屬性的用途和作用既忆。

文檔類型：<!DOCTYPE html>（這個(gè)是HTML5的聲明，聲明幫助瀏覽器正確地顯示網(wǎng)頁）

文檔：<html>

文檔頭部：<head>

（<head>內(nèi)的元素可以是：<title><meta><base><link><script><style>，一些搜索引擎會(huì)利用 meta 元素的 name 和 content 屬性來索引您的頁面患雇。）

文檔標(biāo)題：<title>

文檔描述：<meta>

（描述：<meta name="author/revised/generator/description/keywords" content="....">跃脊，

重定向：<meta http-equiv="Refresh" content="5;url=abc.com" />）

所有標(biāo)簽的打開方式：<base>（<base target="_blank" />）

引入外部樣式表：<link>

定義樣式：<style>

腳本：<script>

文檔主體：<body>

注釋：<!-- 內(nèi)容 -->

（條件注釋：只有IE執(zhí)行的注釋：<!--[if IE 8]> ....內(nèi)容.... <![endif]-->）

節(jié)/區(qū)域（塊級(jí)，如：h1苛吱，p酪术，ul，table）：<div>

行內(nèi)的小塊/區(qū)域（內(nèi)聯(lián)翠储，如b绘雁，td，a援所，img）：<span>

標(biāo)題：<h1> - <h6>（搜索引擎使用標(biāo)題為您的網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引庐舟，注意使用，應(yīng)該將 h1 用作主標(biāo)題（最重要的）住拭，其后是 h2（次重要的）挪略，再其次是 h3，以此類推滔岳。）

水平線：<hr />

換行：<br />

段落：<p>

鏈接：<a>杠娱，href 屬性指定鏈接的地址（電子郵件mailto:，例子：http://www.w3school.com.cn/tiy/t.asp?f=html_mailto或者h(yuǎn)ttp://www.w3school.com.cn/tiy/t.asp?f=html_mailto2）谱煤，

name 屬性創(chuàng)建文檔內(nèi)的書簽（HTML5 中不支持name屬性墨辛。規(guī)定錨的名稱，和href配合使用趴俘，可以用id屬性替換name屬性）睹簇，

target 屬性，被鏈接的文檔在何處顯示（比如_blank寥闪，_parent太惠，_self，_top）疲憋。

圖像：<img>凿渊，src屬性指定文件地址，width缚柳、height屬性指定圖像寬高埃脏，alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。usemap屬性引用 map 元素中的 "id" 或 "name" 屬性

帶有可點(diǎn)擊區(qū)域的圖像映射：<map>秋忙，

圖像映射中的區(qū)域：<area>彩掐，（area 元素總是嵌套在 標(biāo)簽中）alt屬性用來為圖像定義一串預(yù)備的可替換的文本。

（<img><map><area>例子：http://www.w3school.com.cn/tiy/t.asp?f=html_areamap）

表格：<table>灰追，border屬性指定表格邊框堵幽，cellpadding屬性指定單元格邊距狗超，cellspacing屬性指定單元格間距，background屬性指定背景朴下，frame屬性控制圍繞表格的邊框（box四周努咐，above上方，below下方殴胧，hsides上和下方渗稍，vsides左和右側(cè)）

（表頭：<th>，行：<tr>团滥，單元格：<td>竿屹，表格標(biāo)題：<caption>，頁眉：<thead>惫撰，主體：<tbody>，頁腳：<tfoot>躺涝，列屬性：<col>厨钻，列的組：<colgroup>）

橫跨兩列的單元格：colspan屬性/rowspan屬性為2即可

列表：無序列表：<ul>，type屬性指定項(xiàng)目符號(hào)列表（disc坚嗜，circle夯膀，square），苍蔬，列表項(xiàng)：<li>

有序列表：<ol>诱建，type屬性指定項(xiàng)目符號(hào)列表（A，a碟绑，I俺猿，i），列表項(xiàng)：<li>

自定義列表：<dl>格仲，列表項(xiàng)：<dt><dd>

表單：用于收集用戶輸入押袍。<form action="" method="" target="_blank" accept-charset="UTF-8" ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>

（action 屬性定義在提交表單時(shí)執(zhí)行的動(dòng)作，如果省略凯肋，則默認(rèn)設(shè)置為當(dāng)前頁面谊惭。method 屬性規(guī)定在提交表單時(shí)所用的 HTTP 方法（GET（默認(rèn)方法）或POST））

form屬性：

accept-charset 規(guī)定在被提交表單中使用的字符集（默認(rèn)：頁面字符集）。

action 規(guī)定向何處提交表單的地址（URL）（提交頁面）侮东。

autocomplete 規(guī)定瀏覽器應(yīng)該自動(dòng)完成表單（默認(rèn)：開啟）圈盔。

enctype 規(guī)定被提交數(shù)據(jù)的編碼（默認(rèn)：url-encoded）。

method 規(guī)定在提交表單時(shí)所用的 HTTP 方法（默認(rèn)：GET）悄雅。

name 規(guī)定識(shí)別表單的名稱（對(duì)于 DOM 使用：document.forms.name）驱敲。

novalidate 規(guī)定瀏覽器不驗(yàn)證表單。

target 規(guī)定 action 屬性中地址的目標(biāo)（默認(rèn)：_self）宽闲。


使用GET方法：（最適合少量數(shù)據(jù)的提交癌佩。瀏覽器會(huì)設(shè)定容量限制木缝。）

如果表單提交是被動(dòng)的（比如搜索引擎查詢），并且沒有敏感信息围辙。且表單數(shù)據(jù)在頁面地址欄中是可見的我碟。

使用POST方法：如果表單正在更新數(shù)據(jù)，或者包含敏感信息（例如密碼）姚建。POST 的安全性更加矫俺，因?yàn)樵陧撁娴刂窓谥斜惶峤坏臄?shù)據(jù)是不可見的。


如果要正確地被提交掸冤，每個(gè)輸入字段必須設(shè)置一個(gè) name 屬性厘托。


表單元素：<input>元素（根據(jù)type不同，有不同形態(tài)）

文本輸入：<input type="text" name="" value="" size="" maxlength="">

單選按鈕：<input type="radio" name="" value="" [checked]>

多選按鈕：<input type="checkbox" name="" value="" [checked]>

提交按鈕：<input type="submit" value="Submit">（與form的action有關(guān)）

密碼輸入：<input type="password" name="">

重置按鈕：<input type="reset">

隱藏按鈕：<input type="hidden">

下拉列表：<select name=""><option value="" [selected]>

（列表通常會(huì)把首個(gè)option選項(xiàng)顯示為被選選項(xiàng)稿湿。）

多行輸入/文本域：<textarea name="" rows="" cols="">

按鈕：<input type="button" value="">

按鈕：<button type="button">


用<fieldset>組合表單數(shù)據(jù)

<fieldset>元素組合表單中的相關(guān)數(shù)據(jù)

<legend>元素為<fieldset>元素定義標(biāo)題铅匹。

比如：

<form action="action_page.php">

<fieldset>

<legend>Personal information:</legend>

First name:

<input type="text" name="firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</form>


數(shù)字輸入：<input type="number" name="" min="" max="" step="10" value="30">

日期輸入：<input type="date" name="" max="2017-12-31" min="2000-01-02">

顏色輸入：<input type="color" name="">

滑塊控件：<input type="range" name="" min="" max="" step="" value="">

月份輸入：<input type="month" name="">（允許用戶選擇月份和年份。）

周/星期輸入：<input type="week" name="">（允許用戶選擇周和年饺藤。）

時(shí)間輸入：<input type="time" name="">

日期數(shù)據(jù)輸入：<input type="datetime" name="">（允許用戶選擇日期和時(shí)間（有時(shí)區(qū)）包斑。）

日期時(shí)間輸入：<input type="datetime-local" name="">（允許用戶選擇日期和時(shí)間（無時(shí)區(qū)）。）

郵件輸入：<input type="email" name="">

搜索輸入：<input type="search" name="">

電話輸入：<input type="tel" name="">

URL輸入：<input type="url" name="">


輸入限制（屬性）：（列出了一些常用的輸入限制涕俗，其中一些事HTML5中新增的）

disabled 規(guī)定輸入字段應(yīng)該被禁用罗丰。（disabled 屬性不需要值。它等同于 disabled="disabled"再姑。）

max 規(guī)定輸入字段的最大值萌抵。

maxlength 規(guī)定輸入字段的最大字符數(shù)。（如設(shè)置 maxlength 屬性元镀，則輸入控件不會(huì)接受超過所允許數(shù)的字符绍填。該屬性不會(huì)提供任何反饋。）

min 規(guī)定輸入字段的最小值栖疑。

pattern 規(guī)定通過其檢查輸入值的正則表達(dá)式沐兰。

readonly 規(guī)定輸入字段為只讀（無法修改）。（readonly 屬性不需要值蔽挠。它等同于 readonly="readonly"住闯。）

required 規(guī)定輸入字段是必需的（必需填寫）。

size 規(guī)定輸入字段的寬度（以字符計(jì)）澳淑。

step 規(guī)定輸入字段的合法數(shù)字間隔比原。

value 規(guī)定輸入字段的默認(rèn)值。

文本格式化：

HTML可定義很多供格式化輸出的元素杠巡，比如粗體和斜體字量窘。

粗體文本：<b>

加重語氣：<strong>

大號(hào)字：<big>（HTML5已刪除）

小號(hào)字：<small>

著重字體：<em>

斜體：<i>

上標(biāo)：<sup>

下標(biāo)：<sub>

插入字：<ins>

刪除字：<del>

“計(jì)算機(jī)輸出”：

計(jì)算機(jī)代碼：<code>

鍵盤碼/鍵盤格式：<kbd>

計(jì)算機(jī)代碼樣本：<samp>

打字機(jī)代碼：<tt>（HTML5中已刪除）

定義變量：<var>

預(yù)格式文本：<pre>

引用、引用和術(shù)語定義：

縮寫/縮略詞：<abbr>

首字母縮寫：<acronym>（HTML5中已刪除）

地址：<address>

文字方向：<bdo>（屬性dir="rtl"或者dir="ltr"）

長(zhǎng)的引用：<blockquote>

短的引用：<q>（文字外加“”）

引用氢拥、引證：<cite>

一個(gè)定義項(xiàng)目：<dfn>

（<dfn>用法：

1. 如果設(shè)置了 元素的 title 屬性蚌铜，則定義項(xiàng)目：http://www.w3school.com.cn/tiy/t.asp?f=html_formatting_dfn

2. 如果 元素包含具有標(biāo)題的 元素锨侯，則 title 定義項(xiàng)目：http://www.w3school.com.cn/tiy/t.asp?f=html_formatting_dfn_2

3. 否則， 文本內(nèi)容即是項(xiàng)目冬殃，并且父元素包含定義囚痴。http://www.w3school.com.cn/tiy/t.asp?f=html_formatting_dfn_3

注釋：如果您希望簡(jiǎn)而化之，請(qǐng)使用第一條审葬，或使用<abbr>代替深滚。）

字符實(shí)體（HTML 中的預(yù)留字符（比如小于號(hào)、大于號(hào)）必須被替換為字符實(shí)體（&entity_name; 或者 &#entity_number;）涣觉。）

參考手冊(cè)：http://www.w3school.com.cn/tags/html_ref_symbols.html

空格：&nbsp; 或 &#160;

小于號(hào)：&lt; 或 &#60;

大于號(hào)：&gt; 或 &#62;

與：&amp; 或 &#38;

雙引號(hào)：&quot; 或 &#34;

單引號(hào)：&apos;（IE不支持） 或 &#39;

版權(quán)：&copy; 或 &#169;

注冊(cè)商標(biāo)：&reg; 或 &#174;

商標(biāo)：&trade; 或 &#8482;

乘號(hào)：&times; 或 &#215;

除號(hào)：&divide; 或 &#247;

等等...http://www.w3school.com.cn/html/html_entities.asp

（HTML5中已刪除）

框架（此框架非彼框架痴荐，可以在同一個(gè)瀏覽器窗口中顯示不止一個(gè)頁面。每份HTML文檔稱為一個(gè)框架官册，并且每個(gè)框架都獨(dú)立于其他的框架生兆。）

框架結(jié)構(gòu)標(biāo)簽/框架集：<frameset>，rows屬性/columns 屬性的值規(guī)定了每行或每列占據(jù)屏幕的面積

框架標(biāo)簽：<frame>膝宁，noresize屬性設(shè)置無邊框值為"noresize"鸦难。

<frameset cols="25%,75%">

<frame src="a.html">

<frame src="b.html">

</frameset>

注意：為不支持框架的瀏覽器添加<noframes>標(biāo)簽。

重要提示：不能將<body>標(biāo)簽與<frameset> 標(biāo)簽同時(shí)使用昆汹！不過明刷，假如你添加包含一段文本的<noframes>標(biāo)簽婴栽，就必須將這段文字嵌套于<body>標(biāo)簽內(nèi)满粗。 標(biāo)簽，就必須將這段文字嵌套于 &lt;body&gt;&lt;/body&gt; 標(biāo)簽內(nèi)愚争。（在下面的第一個(gè)實(shí)例中映皆，可以查看它是如何實(shí)現(xiàn)的。）

<noframes>

<body>您的瀏覽器無法處理框架轰枝！</body>

</noframes>

（例子：使用框架導(dǎo)航跳轉(zhuǎn)至指定的節(jié)http://www.w3school.com.cn/tiy/t.asp?f=html_frame_navigation2）


內(nèi)聯(lián)框架（用于在網(wǎng)頁內(nèi)顯示網(wǎng)頁）：<iframe>捅彻，src屬性簇捍，width屬性凛剥，height屬性，frameborder屬性指定iframe的邊框蓝撇。

iframe 可用作鏈接的目標(biāo)（target）诚撵，鏈接的 target 屬性必須引用 iframe 的 name 屬性缭裆。

<iframe src="demo.html" name="iframe_a"></iframe>

<p><a href="xxxx.com" target="iframe_a">xxxx.com</a></p>

響應(yīng)式 Web 設(shè)計(jì)（Responsive Web Design），簡(jiǎn)稱RWD寿烟。

RWD能夠以可變尺寸傳遞網(wǎng)頁澈驼，對(duì)于平板和移動(dòng)設(shè)備是必需的。

1.純css設(shè)計(jì)

2.bootstrap（CSS 框架筛武，開發(fā)在任何尺寸都外觀出眾的站點(diǎn)：顯示器缝其、筆記本電腦挎塌、平板電腦或手機(jī)，另講）

（注意：<noscript>標(biāo)簽提供無法使用腳本時(shí)的替代內(nèi)容内边，比方在瀏覽器禁用腳本時(shí)榴都，或?yàn)g覽器不支持客戶端腳本時(shí)。

只有在瀏覽器不支持腳本或者禁用腳本時(shí)假残，才會(huì)顯示 noscript 元素中的內(nèi)容：<noscript>Your browser does not support JavaScript!</noscript>）

統(tǒng)一資源定位器/統(tǒng)一資源定位符（Uniform Resource Locator）

URL用于定位萬維網(wǎng)上的文檔（或其他數(shù)據(jù)）缭贡。

網(wǎng)址，比如http://www.w3school.com.cn/html/index.asp辉懒，遵守以下的語法規(guī)則：

scheme://host.domain:port/path/filename

解釋：

scheme - 定義因特網(wǎng)服務(wù)的類型阳惹。最常見的類型是 http

host - 定義域主機(jī)（http 的默認(rèn)主機(jī)是 www）

domain - 定義因特網(wǎng)域名，比如 w3school.com.cn

:port - 定義主機(jī)上的端口號(hào)（http 的默認(rèn)端口號(hào)是 80）

path - 定義服務(wù)器上的路徑（如果省略眶俩，則文檔必須位于網(wǎng)站的根目錄中）莹汤。

filename - 定義文檔/資源的名稱


以下是其中一些最流行的 scheme：

http （超文本傳輸協(xié)議） 以 http:// 開頭的普通網(wǎng)頁。不加密颠印。

https （安全超文本傳輸協(xié)議） 安全網(wǎng)頁纲岭。加密所有信息交換。

ftp （文件傳輸協(xié)議） 用于將文件下載或上傳至網(wǎng)站线罕。

file 您計(jì)算機(jī)上的文件止潮。


URL 字符編碼，URL 編碼會(huì)將字符轉(zhuǎn)換為可通過因特網(wǎng)傳輸?shù)母袷健?/b>

URL 只能使用ASCII 字符集來通過因特網(wǎng)進(jìn)行發(fā)送钞楼。

由于 URL 常常會(huì)包含 ASCII 集合之外的字符喇闸，URL 必須轉(zhuǎn)換為有效的 ASCII 格式。

URL 編碼使用 "%" 其后跟隨兩位的十六進(jìn)制數(shù)來替換非 ASCII 字符询件。

URL 不能包含空格燃乍。URL 編碼通常使用 + 來替換空格。

更多 ：http://www.w3school.com.cn/html/html_urlencode.asp宛琅，

http://www.w3school.com.cn/tags/html_ref_urlencode.html

Web Server刻蟹，如果希望向世界發(fā)布您的網(wǎng)站，那么您必須把它存放在 web 服務(wù)器上嘿辟。

更多：http://www.w3school.com.cn/html/html_webserver.asp

顏色：顏色值舆瘪，顏色名，安全色……

更多：http://www.w3school.com.cn/html/html_colors.asp

顏色名：http://www.w3school.com.cn/html/html_colornames.asp

XHTML

（XHTML 是以 XML 格式編寫的 HTML红伦，XHTML指的是可擴(kuò)展超文本標(biāo)記語言英古，它 與 HTML 4.01 幾乎是相同的，它是更嚴(yán)格更純凈的 HTML 版本色建，它是以 XML 應(yīng)用的方式定義的 HTML哺呜，它是2001 年 1 月發(fā)布的 W3C 推薦標(biāo)準(zhǔn)，它得到所有主流瀏覽器的支持箕戳，它是是一種必須正確標(biāo)記且格式良好的標(biāo)記語言某残。）

與HTML相比最重要的區(qū)別：

文檔結(jié)構(gòu)

XHTML DOCTYPE 是強(qiáng)制性的

<html>中的 XML namespace 屬性是強(qiáng)制性的

<html>国撵、<head>、<title>以及<body>也是強(qiáng)制性的 以及 <body> 也是<i>強(qiáng)制性的</i>

元素語法

XHTML 元素必須正確嵌套玻墅，必須始終關(guān)閉介牙，必須小寫，必須有一個(gè)根元素

屬性語法

XHTML 屬性必須使用小寫澳厢，必須用引號(hào)包圍环础，禁止屬性簡(jiǎn)寫（如：錯(cuò)誤：checked；正確：checked="checked"）

HTML5新的媒介元素：video && audio &&embed && source && track

audio 聲音或音樂內(nèi)容剩拢。

embed 外部應(yīng)用程序的容器（比如插件）线得。

video 視頻或影片內(nèi)容。

source <video>和<audio>的來源徐伐。

track <video>和<audio>的軌道贯钩。


多媒體：（詳細(xì)請(qǐng)看官方http://www.w3school.com.cn/html/html_media.asp）

視頻格式：（MP4 格式是一種新的即將普及的因特網(wǎng)視頻格式。HTML5 办素、Flash 播放器以及優(yōu)酷等視頻網(wǎng)站均支持它角雷。）

格式（文件擴(kuò)展名）

AVI（.avi），WMV（.wmv）性穿，MPEG（.mpg/.mpeg）勺三，QuickTime（.mov），RealVideo（.rm/.ram）需曾，F(xiàn)lash（.swf/.flv）吗坚，Mpeg-4（.mp4）


聲音格式：（WAVE 是因特網(wǎng)上最受歡迎的無壓縮聲音格式，所有流行的瀏覽器都支持它胯舷。如果您需要未經(jīng)壓縮的聲音（音樂或演講）刻蚯，那么您應(yīng)該使用 WAVE 格式绊含。

MP3 是最新的壓縮錄制音樂格式桑嘶。MP3 這個(gè)術(shù)語已經(jīng)成為數(shù)字音樂的代名詞。如果您的網(wǎng)址從事錄制音樂躬充，那么 MP3 是一個(gè)選項(xiàng)逃顶。）

格式（文件擴(kuò)展名）

MIDI（.mid/.midi），RealAudio（.rm/.ram）充甚，Wave（.wav）以政，WMA（.wma），MP3（.mp3/.mpga）


Object元素：<object>的作用是支持 HTML 助手（插件）伴找。（官方：http://www.w3school.com.cn/html/html_object.asp）

HTML 助手（插件）：大多數(shù)輔助應(yīng)用程序允許對(duì)音量設(shè)置和播放功能（比如后退盈蛮、暫停、停止和播放）的手工（或程序的）控制技矮。

例子：

- 使用QuickTime 來播放 Wave 音頻 元素

<object width="420" height="360"

classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

codebase="http://www.apple.com/qtactivex/qtplugin.cab">

<param name="src" value="bird.wav" />

<param name="controller" value="true" />

</object>


- 使用QuickTime 來播放 MP4 視頻

<object width="420" height="360"

classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

codebase="http://www.apple.com/qtactivex/qtplugin.cab">

<param name="src" value="movie.mp4" />

<param name="controller" value="true" />

</object>


- 使用 Flash 來播放 SWF 視頻

<object width="400" height="40"

classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://fpdownload.macromedia.com/

pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">

<param name="SRC" value="bookmark.swf">

<embed src="bookmark.swf" width="400" height="40"></embed>

</object>


- 使用 Windows Media Player 來播放 WMV 影片

<object width="100%" height="100%"

type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"

classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">

<param name="url" value="3d.wmv">

<param name="filename" value="3d.wmv">

<param name="autostart" value="1">

<param name="uiMode" value="full" />

<param name="autosize" value="1">

<param name="playcount" value="1">

<embed type="application/x-mplayer2" src="3d.wmv" width="100%"

height="100%" autostart="true" showcontrols="true"

pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>

</object>


嵌入音頻：

PS：不同的瀏覽器對(duì)音頻格式的支持也不同抖誉，如果不支持該文件格式殊轴，就無法播放√宦可以使用插件旁理。

使用<embed>元素（<embed>元素定義外部（非 HTML）內(nèi)容的容器。這是一個(gè) HTML5 標(biāo)簽我磁，在 HTML4 中是非法的孽文，但是所有瀏覽器中都有效）：

<embed height="100" width="100" src="song.mp3" />


使用<object>元素：

<object height="100" width="100" data="song.mp3"></object>


使用<audio>元素：（這個(gè)例子使用了一個(gè) mp3 文件，這樣它在 Internet Explorer夺艰、Chrome 以及 Safari 中是有效的芋哭。為了使這段音頻在 Firefox 和 Opera 中同樣有效，添加了一個(gè) ogg 類型的文件郁副。如果失敗楷掉，會(huì)顯示錯(cuò)誤消息。）

<audio controls="controls" width="100" height="100">

<source src="song.mp3" type="audio/mp3" />

<source src="song.ogg" type="audio/ogg" />

Your browser does not support this audio format.

</audio>


最好的 HTML 解決方法（使用了兩個(gè)不同的音頻格式霞势。HTML5<audio>元素會(huì)嘗試以 mp3 或 ogg 來播放音頻烹植。如果失敗，代碼將回退嘗試 元素愕贡。） 元素會(huì)嘗試以 mp3 或 ogg 來播放音頻草雕。如果失敗，代碼將回退嘗試 元素固以。）

<audio controls="controls" height="100" width="100">

<source src="song.mp3" type="audio/mp3" />

<source src="song.ogg" type="audio/ogg" />

<embed height="100" width="100" src="song.mp3" />

</audio>


向網(wǎng)站添加音頻的最簡(jiǎn)單方法：雅虎的媒體播放器絕對(duì)算其中之一墩虹。它能播放 mp3 以及一系列其他格式。通過一行簡(jiǎn)單的代碼憨琳，您就可以把它添加到網(wǎng)頁中诫钓，輕松地將 HTML 頁面轉(zhuǎn)變?yōu)閷I(yè)的播放列表。

例子：（雅虎媒體播放器為您的用戶提供的是一個(gè)小型的播放按鈕篙螟，而不是完整的播放器菌湃。不過，當(dāng)您點(diǎn)擊該按鈕遍略，會(huì)彈出完整的播放器惧所。

請(qǐng)注意，這個(gè)播放器始終托餍樱靠在窗框底部下愈。只需點(diǎn)擊它，就可將其滑出蕾久。）

<a href="song.mp3">Play Sound</a> //只需簡(jiǎn)單地把 MP3 文件鏈接到您的 HTML 中势似，JavaScript 會(huì)自動(dòng)地為每首歌創(chuàng)建播放按鈕

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> ?//（使用雅虎播放器是免費(fèi)的。如需使用它，您需要把這段 JavaScript 插入網(wǎng)頁底部）


使用超鏈接：（如果網(wǎng)頁包含指向媒體文件的超鏈接履因，大多數(shù)瀏覽器會(huì)使用“輔助應(yīng)用程序”來播放文件辖佣。

以下代碼片段顯示指向 mp3 文件的鏈接。如果用戶點(diǎn)擊該鏈接搓逾，瀏覽器會(huì)啟動(dòng)“輔助應(yīng)用程序”來播放該文件）

<a href="song.mp3">Play the sound</a>


內(nèi)聯(lián)的聲音：（當(dāng)您在網(wǎng)頁中包含聲音卷谈，或者作為網(wǎng)頁的組成部分時(shí)，它被稱為內(nèi)聯(lián)聲音霞篡。

如果您打算在 web 應(yīng)用程序中使用內(nèi)聯(lián)聲音世蔗，您需要意識(shí)到很多人都覺得內(nèi)聯(lián)聲音令人惱火。同時(shí)請(qǐng)注意朗兵，用戶可能已經(jīng)關(guān)閉了瀏覽器中的內(nèi)聯(lián)聲音選項(xiàng)污淋。

我們最好的建議是只在用戶希望聽到內(nèi)聯(lián)聲音的地方包含它們。一個(gè)正面的例子是余掖，在用戶需要聽到錄音并點(diǎn)擊某個(gè)鏈接時(shí)寸爆，會(huì)打開頁面然后播放錄音。）


HTML 4.01 多媒體標(biāo)簽

<applet> ?不贊成盐欺。定義內(nèi)嵌applet赁豆。

<embed> ?HTML4 中不贊成，HTML5 中允許冗美。定義內(nèi)嵌對(duì)象魔种。

<object> ?定義內(nèi)嵌對(duì)象。

<param> ?定義對(duì)象的參數(shù)粉洼。

HTML 5 多媒體標(biāo)簽

<audio> ?標(biāo)簽定義聲音节预，比如音樂或其他音頻流。

<embed> ?標(biāo)簽定義嵌入的內(nèi)容属韧，比如插件安拟。


播放視頻：

（使用<embed>標(biāo)簽）

<embed src="movie.swf" height="200" width="200"/>


（使用<object>標(biāo)簽）

<object data="movie.swf" height="200" width="200"/>


（使用<video>元素）

<video width="320" height="240" controls="controls">

<source src="movie.mp4" type="video/mp4" />

<source src="movie.ogg" type="video/ogg" />

<source src="movie.webm" type="video/webm" />

Your browser does not support the video tag.

</video>


最好的 HTML 解決方法（HTML5 + <object> + <embed>，例子中使用了 4 中不同的視頻格式宵喂。HTML 5 <video>元素會(huì)嘗試播放以 mp4糠赦、ogg 或 webm 格式中的一種來播放視頻。如果均失敗樊破，則回退到 <embed> 元素愉棱。）

<video width="320" height="240" controls="controls">

<source src="movie.mp4" type="video/mp4" />

<source src="movie.ogg" type="video/ogg" />

<source src="movie.webm" type="video/webm" />

<object data="movie.mp4" width="320" height="240">

<embed src="movie.swf" width="320" height="240" />

</object>

</video>


優(yōu)酷解決方案：（在 HTML 中顯示視頻的最簡(jiǎn)單的方法是使用優(yōu)酷等視頻網(wǎng)站唆铐。如果您希望在網(wǎng)頁中播放視頻哲戚，那么您可以把視頻上傳到優(yōu)酷等視頻網(wǎng)站，然后在您的網(wǎng)頁中插入 HTML 代碼即可播放視頻）

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"

width="480" height="400"

type="application/x-shockwave-flash"></embed>


使用超鏈接（如果網(wǎng)頁包含指向媒體文件的超鏈接艾岂，大多數(shù)瀏覽器會(huì)使用“輔助應(yīng)用程序”來播放文件顺少。

以下代碼片段顯示指向 AVI 文件的鏈接。如果用戶點(diǎn)擊該鏈接，瀏覽器會(huì)啟動(dòng)“輔助應(yīng)用程序”脆炎，比如 Windows Media Player 來播放這個(gè) AVI 文件）

<a href="movie.swf">Play a video file</a>


關(guān)于內(nèi)聯(lián)視頻（當(dāng)視頻被包含在網(wǎng)頁中時(shí)梅猿，它被稱為內(nèi)聯(lián)視頻。

如果您打算在 web 應(yīng)用程序中使用內(nèi)聯(lián)視頻秒裕，您需要意識(shí)到很多人都覺得內(nèi)聯(lián)視頻令人惱火袱蚓。同時(shí)請(qǐng)注意，用戶可能已經(jīng)關(guān)閉了瀏覽器中的內(nèi)聯(lián)視頻選項(xiàng)几蜻。

我們最好的建議是只在用戶希望看到內(nèi)聯(lián)視頻的地方包含它們喇潘。一個(gè)正面的例子是，在用戶需要看到視頻并點(diǎn)擊某個(gè)鏈接時(shí)梭稚，會(huì)打開頁面然后播放視頻颖低。）


HTML 4.01 多媒體標(biāo)簽

<applet>? 不贊成。定義內(nèi)嵌 applet弧烤。

<embed>? 不贊成忱屑。定義內(nèi)嵌對(duì)象。（HTML5 中允許）

<object>? 定義內(nèi)嵌對(duì)象暇昂。

<param>? 定義對(duì)象的參數(shù)莺戒。

HTML 5 多媒體標(biāo)簽

<video>? 標(biāo)簽定義聲音，比如音樂或其他音頻流急波。

</embed>? 標(biāo)簽定義嵌入的內(nèi)容脏毯，比如插件。


PS：當(dāng)前幔崖，video 元素支持三種視頻格式：

格式 ? ? ? ? ? ? IE ? ? ?Firefox ? ?Opera ? Chrome ? Safari

Ogg ? ? ? ? ? ? No ? ? ?3.5+ ? ? ? ? 10.5+ ? ? 5.0+ ? ? ? No

MPEG 4 ? ? ?9.0+ ? ? No ? ? ? ? ? ?No ? ? ? ?5.0+ ? ? ? 3.0+

WebM ? ? ? ? ?No ? ? ?4.0+ ? ? ? ? ?10.6+ ? ? ?6.0+ ? ? ?No


PS：當(dāng)前食店，audio 元素支持三種音頻格式：

類型 ? ? ? ? ?IE 9 ?Firefox 3.5 ?Opera 10.5 ? Chrome 3.0 ?Safari 3.0

Ogg Vorbis ?NO ? ? ? ?√ ? ? ? ? ? ? ? ? ?√ ? ? ? ? ? ? ? ? ? ? √ ? ? ? ? ? ? ? NO

MP3 ? ? ? ? ? ? √ ? ? ? ? NO ? ? ? ? ? ? ? ?NO ? ? ? ? ? ? ? ? ?√ ? ? ? ? ? ? ? ?√

Wav ? ? ? ? ? ?NO ? ? ? ?√ ? ? ? ? ? ? ? ? ? ?√ ? ? ? ? ? ? ? ? ? ?NO ? ? ? ? ? ? ?√

地理定位：（HTML5 Geolocation（地理定位）用于定位用戶的位置。鑒于該特性可能侵犯用戶的隱私赏寇，除非用戶同意吉嫩，否則用戶位置信息是不可用的。）


Internet Explorer 9嗅定、Firefox自娩、Chrome、Safari 以及 Opera 支持地理定位渠退。

注釋：對(duì)于擁有 GPS 的設(shè)備忙迁，比如 iPhone，地理定位更加精確碎乃。


- 使用地理定位（getCurrentPosition() 方法來獲得用戶的位置姊扔。可返回用戶位置的經(jīng)度和緯度）

<script>

var x=document.getElementById("demo");

function getLocation()?

?{?

if (navigator.geolocation)? //檢測(cè)是否支持地理定位

? {??

? navigator.geolocation.getCurrentPosition(showPosition);? //如果getCurrentPosition()運(yùn)行成功梅誓，則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個(gè)coordinates對(duì)象

? }?

?else{x.innerHTML="Geolocation is not supported by this browser.";}?

?}

function showPosition(position)? //showPosition() 函數(shù)獲得并顯示經(jīng)度和緯度

?{?

?x.innerHTML="Latitude: " + position.coords.latitude +? "
Longitude: " + position.coords.longitude;?

?}

</script>


處理錯(cuò)誤和拒絕：（getCurrentPosition() 方法的第二個(gè)參數(shù)用于處理錯(cuò)誤恰梢。它規(guī)定當(dāng)獲取用戶位置失敗時(shí)運(yùn)行的函數(shù)）

function showError(error)

{

switch(error.code)

{

case error.PERMISSION_DENIED:? //用戶不允許地理定位

x.innerHTML="User denied the request for Geolocation."

break;

case error.POSITION_UNAVAILABLE:? //無法獲取當(dāng)前位置

x.innerHTML="Location information is unavailable."

break;

case error.TIMEOUT:? //操作超時(shí)

x.innerHTML="The request to get user location timed out."

break;

case error.UNKNOWN_ERROR:

x.innerHTML="An unknown error occurred."

break;

}

}


在地圖中顯示結(jié)果：（您需要訪問可使用經(jīng)緯度的地圖服務(wù)佛南，比如谷歌地圖或百度地圖，例子中使用返回的經(jīng)緯度數(shù)據(jù)在谷歌地圖中顯示位置（使用靜態(tài)圖像））

function showPosition(position)

{

var latlon=position.coords.latitude+","+position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="

+latlon+"&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML="";

}

官方（使用的是谷歌地圖）：http://www.w3school.com.cn/tiy/t.asp?f=html5_geolocation_map_script


給定位置的信息嵌言，可以用在 更新本地信息嗅回，顯示用戶周圍的興趣點(diǎn)，交互式車載導(dǎo)航系統(tǒng) (GPS)


getCurrentPosition() 方法 - 返回?cái)?shù)據(jù)（若成功摧茴，則 getCurrentPosition() 方法返回對(duì)象绵载。始終會(huì)返回 latitude、longitude 以及 accuracy 屬性苛白。如果可用尘分，則會(huì)返回其他下面的屬性。）

coords.latitude ?十進(jìn)制數(shù)的緯度

coords.longitude ?十進(jìn)制數(shù)的經(jīng)度

coords.accuracy ?位置精度

coords.altitude ?海拔丸氛，海平面以上以米計(jì)

coords.altitudeAccuracy ?位置的海拔精度

coords.heading ?方向培愁，從正北開始以度計(jì)

coords.speed ?速度，以米/每秒計(jì)

timestamp ?響應(yīng)的日期/時(shí)間


Geolocation 對(duì)象 - 其他有趣的方法

watchPosition() - 返回用戶的當(dāng)前位置缓窜，并繼續(xù)返回用戶移動(dòng)時(shí)的更新位置（就像汽車上的 GPS）定续。

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一臺(tái)精確的 GPS 設(shè)備來測(cè)試該例（比如 iPhone）：

<script>

var x=document.getElementById("demo");

function getLocation()?

?{?

?if (navigator.geolocation)??

? { ?

? navigator.geolocation.watchPosition(showPosition);??

? }?

?else{x.innerHTML="Geolocation is not supported by this browser.";}?

?}

function showPosition(position)?

?{?

?x.innerHTML="Latitude: " + position.coords.latitude +? "

Longitude: " + position.coords.longitude;?

?}

</script>

HTTP狀態(tài)消息：（當(dāng)瀏覽器從 web 服務(wù)器請(qǐng)求服務(wù)時(shí)禾锤，可能會(huì)發(fā)生錯(cuò)誤私股。）

從而有可能會(huì)返回下面的一系列狀態(tài)消息：

1xx: 信息，2xx: 成功恩掷，3xx: 重定向倡鲸，4xx: 客戶端錯(cuò)誤，5xx: 服務(wù)器錯(cuò)誤

100 Continue服務(wù)器僅接收到部分請(qǐng)求黄娘，但是一旦服務(wù)器并沒有拒絕該請(qǐng)求峭状，客戶端應(yīng)該繼續(xù)發(fā)送其余的請(qǐng)求。

101 Switching Protocols服務(wù)器轉(zhuǎn)換協(xié)議：服務(wù)器將遵從客戶的請(qǐng)求轉(zhuǎn)換到另外一種協(xié)議逼争。


200 OK請(qǐng)求成功（其后是對(duì)GET和POST請(qǐng)求的應(yīng)答文檔优床。）

201 Created請(qǐng)求被創(chuàng)建完成，同時(shí)新的資源被創(chuàng)建誓焦。

202 Accepted供處理的請(qǐng)求已被接受胆敞，但是處理未完成。

203 Non-authoritative Information文檔已經(jīng)正常地返回杂伟，但一些應(yīng)答頭可能不正確移层，因?yàn)槭褂玫氖俏臋n的拷貝旧蛾。

204 No Content沒有新文檔桨昙。瀏覽器應(yīng)該繼續(xù)顯示原來的文檔艘虎。如果用戶定期地刷新頁面雕沉，而Servlet可以確定用戶文檔足夠新，這個(gè)狀態(tài)代碼是很有用的摄欲。

205 Reset Content沒有新文檔摸吠。但瀏覽器應(yīng)該重置它所顯示的內(nèi)容侮叮。用來強(qiáng)制瀏覽器清除表單輸入內(nèi)容喧笔。

206 Partial Content客戶發(fā)送了一個(gè)帶有Range頭的GET請(qǐng)求帽驯，服務(wù)器完成了它。


300 Multiple Choices多重選擇书闸。鏈接列表尼变。用戶可以選擇某鏈接到達(dá)目的地。最多允許五個(gè)地址浆劲。

301 Moved Permanently所請(qǐng)求的頁面已經(jīng)轉(zhuǎn)移至新的url嫌术。

302 Found所請(qǐng)求的頁面已經(jīng)臨時(shí)轉(zhuǎn)移至新的url。

303 See Other所請(qǐng)求的頁面可在別的url下被找到牌借。

304 Not Modified未按預(yù)期修改文檔度气。客戶端有緩沖的文檔并發(fā)出了一個(gè)條件性的請(qǐng)求（一般是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔）膨报。服務(wù)器告訴客戶磷籍，原來緩沖的文檔還可以繼續(xù)使用。

305 Use Proxy客戶請(qǐng)求的文檔應(yīng)該通過Location頭所指明的代理服務(wù)器提取现柠。

306Unused此代碼被用于前一版本院领。目前已不再使用，但是代碼依然被保留够吩。

307 Temporary Redirect被請(qǐng)求的頁面已經(jīng)臨時(shí)移至新的url比然。


400 Bad Request服務(wù)器未能理解請(qǐng)求。

401 Unauthorized被請(qǐng)求的頁面需要用戶名和密碼周循。

402 Payment Required此代碼尚無法使用强法。

403 Forbidden對(duì)被請(qǐng)求頁面的訪問被禁止。

404 Not Found服務(wù)器無法找到被請(qǐng)求的頁面湾笛。

405 Method Not Allowed請(qǐng)求中指定的方法不被允許拟烫。

406 Not Acceptable服務(wù)器生成的響應(yīng)無法被客戶端所接受。

407 Proxy Authentication Required用戶必須首先使用代理服務(wù)器進(jìn)行驗(yàn)證迄本，這樣請(qǐng)求才會(huì)被處理硕淑。

408 Request Timeout請(qǐng)求超出了服務(wù)器的等待時(shí)間。

409 Conflict由于沖突嘉赎，請(qǐng)求無法被完成置媳。

410 Gone被請(qǐng)求的頁面不可用。

411 Length Required"Content-Length" 未被定義公条。如果無此內(nèi)容拇囊，服務(wù)器不會(huì)接受請(qǐng)求。

412 Precondition Failed請(qǐng)求中的前提條件被服務(wù)器評(píng)估為失敗靶橱。

413 Request Entity Too Large由于所請(qǐng)求的實(shí)體的太大寥袭，服務(wù)器不會(huì)接受請(qǐng)求路捧。

414 Request-url Too Long由于url太長(zhǎng)，服務(wù)器不會(huì)接受請(qǐng)求传黄。當(dāng)post請(qǐng)求被轉(zhuǎn)換為帶有很長(zhǎng)的查詢信息的get請(qǐng)求時(shí)杰扫，就會(huì)發(fā)生這種情況。

415 Unsupported Media Type由于媒介類型不被支持膘掰，服務(wù)器不會(huì)接受請(qǐng)求章姓。

416服務(wù)器不能滿足客戶在請(qǐng)求中指定的Range頭。

417 Expectation Failed


500 Internal Server Error請(qǐng)求未完成识埋。服務(wù)器遇到不可預(yù)知的情況凡伊。

501 Not Implemented請(qǐng)求未完成。服務(wù)器不支持所請(qǐng)求的功能窒舟。

502 Bad Gateway請(qǐng)求未完成系忙。服務(wù)器從上游服務(wù)器收到一個(gè)無效的響應(yīng)。

503 Service Unavailable請(qǐng)求未完成惠豺。服務(wù)器臨時(shí)過載或當(dāng)機(jī)银还。

504 Gateway Timeout網(wǎng)關(guān)超時(shí)。

505 HTTP Version Not Supported服務(wù)器不支持請(qǐng)求中指明的HTTP協(xié)議版本耕腾。

HTTP方法：兩種最常用的 HTTP 方法是：GET 和 POST见剩。

GET- 從指定的資源請(qǐng)求數(shù)據(jù)。

POST- 向指定的資源提交要被處理的數(shù)據(jù)


介紹：

超文本傳輸協(xié)議（HTTP）的設(shè)計(jì)目的是保證客戶機(jī)與服務(wù)器之間的通信扫俺。

HTTP 的工作方式是客戶機(jī)與服務(wù)器之間的請(qǐng)求-應(yīng)答協(xié)議苍苞。

web 瀏覽器可能是客戶端，而計(jì)算機(jī)上的網(wǎng)絡(luò)應(yīng)用程序也可能作為服務(wù)器端狼纬。

舉例：客戶端（瀏覽器）向服務(wù)器提交 HTTP 請(qǐng)求羹呵；服務(wù)器向客戶端返回響應(yīng)。響應(yīng)包含關(guān)于請(qǐng)求的狀態(tài)信息以及可能被請(qǐng)求的內(nèi)容疗琉。


GET 方法

請(qǐng)注意冈欢，查詢字符串（名稱/值對(duì)）是在 GET 請(qǐng)求的 URL 中發(fā)送的：

/test/demo_form.asp?name1=value1&name2=value2

有關(guān) GET 請(qǐng)求：

GET 請(qǐng)求可被緩存

GET 請(qǐng)求保留在瀏覽器歷史記錄中

GET 請(qǐng)求可被收藏為書簽

GET 請(qǐng)求不應(yīng)在處理敏感數(shù)據(jù)時(shí)使用

GET 請(qǐng)求有長(zhǎng)度限制

GET 請(qǐng)求只應(yīng)當(dāng)用于取回?cái)?shù)據(jù)

= = = = = = = = = = = =

POST 方法

請(qǐng)注意，查詢字符串（名稱/值對(duì)）是在 POST 請(qǐng)求的 HTTP 消息主體中發(fā)送的：

POST /test/demo_form.asp HTTP/1.1

Host: w3schools.com

name1=value1&name2=value2

有關(guān) POST 請(qǐng)求：

POST 請(qǐng)求不會(huì)被緩存

POST 請(qǐng)求不會(huì)保留在瀏覽器歷史記錄中

POST 不能被收藏為書簽

POST 請(qǐng)求對(duì)數(shù)據(jù)長(zhǎng)度沒有要求

= = = = = = = = = = =

比較 GET 與 POST：

后退按鈕/刷新：

GET方法無害盈简，

POST方法數(shù)據(jù)會(huì)被重新提交（瀏覽器應(yīng)該告知用戶數(shù)據(jù)會(huì)被重新提交）凑耻。


書簽：

GET方法可收藏為書簽，

POST方法不可收藏為書簽


緩存：

GET方法能被緩存柠贤，

POST方法不能緩存


編碼類型：

GET方法：application/x-www-form-urlencoded香浩，

POST方法：application/x-www-form-urlencoded 或 multipart/form-data。為二進(jìn)制數(shù)據(jù)使用多重編碼臼勉。


歷史：

GET方法參數(shù)保留在瀏覽器歷史中邻吭。

POST方法參數(shù)不會(huì)保存在瀏覽器歷史中。


對(duì)數(shù)據(jù)長(zhǎng)度的限制：

GET方法限制長(zhǎng)度宴霸。當(dāng)發(fā)送數(shù)據(jù)時(shí)囱晴，GET 方法向 URL 添加數(shù)據(jù)膏蚓；URL 的長(zhǎng)度是受限制的（URL 的最大長(zhǎng)度是 2048 個(gè)字符）。

POST方法無限制畸写。


對(duì)數(shù)據(jù)類型的限制：

GET方法只允許 ASCII 字符驮瞧。

POST方法沒有限制。也允許二進(jìn)制數(shù)據(jù)艺糜。


安全性

GET方法：與 POST 相比剧董，GET 的安全性較差幢尚，因?yàn)樗l(fā)送的數(shù)據(jù)是 URL 的一部分破停。

在發(fā)送密碼或其他敏感信息時(shí)絕不要使用 GET ！

POST方法：POST 比 GET 更安全尉剩，因?yàn)閰?shù)不會(huì)被保存在瀏覽器歷史或 web 服務(wù)器日志中真慢。


可見性：

GET方法：數(shù)據(jù)在 URL 中對(duì)所有人都是可見的。

POST方法：數(shù)據(jù)不會(huì)顯示在 URL 中理茎。

= = = = = = = = =

其他 HTTP 請(qǐng)求方法

HEAD與 GET 相同黑界，但只返回 HTTP 報(bào)頭，不返回文檔主體皂林。

PUT上傳指定的 URI 表示朗鸠。

DELETE刪除指定資源。

OPTIONS返回服務(wù)器支持的 HTTP 方法础倍。

CONNECT把請(qǐng)求連接轉(zhuǎn)換到透明的 TCP/IP 通道烛占。


HTML實(shí)例：http://www.w3school.com.cn/example/html_examples.asp

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市沟启，隨后出現(xiàn)的幾起案子忆家，更是在濱河造成了極大的恐慌，老刑警劉巖德迹，帶你破解...
    沈念sama閱讀 206,126評(píng)論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件芽卿，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡胳搞，警方通過查閱死者的電腦和手機(jī)卸例，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評(píng)論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來肌毅，“玉大人筷转，你說我怎么就攤上這事⊙刻冢” “怎么了旦装？”我有些...
    開封第一講書人閱讀 152,445評(píng)論 0贊 341
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)摊滔。 經(jīng)常有香客問我阴绢，道長(zhǎng)店乐，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 55,185評(píng)論 1贊 278
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任呻袭，我火速辦了婚禮眨八，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘左电。我一直安慰自己廉侧，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,178評(píng)論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布篓足。 她就那樣靜靜地躺著段誊，像睡著了一般。 火紅的嫁衣襯著肌膚如雪栈拖。 梳的紋絲不亂的頭發(fā)上连舍，一...
    開封第一講書人閱讀 48,970評(píng)論 1贊 284
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音涩哟，去河邊找鬼索赏。 笑死，一個(gè)胖子當(dāng)著我的面吹牛贴彼，可吹牛的內(nèi)容都是我干的潜腻。 我是一名探鬼主播，決...
    沈念sama閱讀 38,276評(píng)論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼器仗，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼融涣！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起青灼，我...
    開封第一講書人閱讀 36,927評(píng)論 0贊 259
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤暴心，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后杂拨，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體专普，經(jīng)...
    沈念sama閱讀 43,400評(píng)論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,883評(píng)論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年弹沽，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了檀夹。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 37,997評(píng)論 1贊 333
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡策橘，死狀恐怖炸渡，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情丽已，我是刑警寧澤蚌堵，帶...
    沈念sama閱讀 33,646評(píng)論 4贊 322
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站，受9級(jí)特大地震影響吼畏，放射性物質(zhì)發(fā)生泄漏督赤。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,213評(píng)論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一泻蚊、第九天 我趴在偏房一處隱蔽的房頂上張望躲舌。 院中可真熱鬧，春花似錦性雄、人聲如沸没卸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評(píng)論 0贊 19
  • 一樁弒父案秒旋，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽约计。三九已至，卻和暖如春滩褥，著一層夾襖步出監(jiān)牢的瞬間病蛉，已是汗流浹背炫加。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評(píng)論 1贊 260
  • 情欲美人皮
    我被黑心中介騙來泰國(guó)打工瑰煎， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人俗孝。 一個(gè)月前我還...
    沈念sama閱讀 45,423評(píng)論 2贊 352
  • 代替公主和親
    正文 我出身青樓酒甸，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親赋铝。 傳聞我的和親對(duì)象是個(gè)殘疾皇子插勤，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,722評(píng)論 2贊 345

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,728評(píng)論 1贊 92
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理革骨，服務(wù)發(fā)現(xiàn)农尖，斷路器，智...
    卡卡羅2017閱讀 134,599評(píng)論 18贊 139
  • 接上 關(guān)于HTML/HTML5（一）http://www.reibang.com/p/33fc7840c079 學(xué)...
    Amyyy_閱讀 778評(píng)論 0贊 4
  • - (BOOL)application:(UIApplication *)application didFinis...
    TikBai閱讀 742評(píng)論 0贊 1
  • 悠悠歲月難掩歷史遺跡良哲，靄靄遠(yuǎn)山愈彰英雄本色盛卡。歷來人們街談巷議：時(shí)勢(shì)造英雄，抑或是英雄成就一個(gè)時(shí)代筑凫。由我觀之滑沧，英雄乃...
    潭潭交通閱讀 287評(píng)論 0贊 0