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

接上 ?關(guān)于HTML/HTML5（一）http://www.reibang.com/p/33fc7840c079

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

HTML5簡介：

HTML5 是最新的 HTML 標(biāo)準(zhǔn)瞬女，它是專門為承載豐富的 web 內(nèi)容而設(shè)計(jì)的彰檬，并且無需額外插件撑蒜，它擁有新的語義、圖形以及多媒體元素龄恋，它提供的新元素和新的 API 簡化了 web 應(yīng)用程序的搭建，它是跨平臺(tái)的肘习，被設(shè)計(jì)為在不同類型的硬件（PC珠洗、平板、手機(jī)抄肖、電視機(jī)等等）之上運(yùn)行久信。

HTML5支持無屬性值（disabled），支持屬性值無引號(hào)漓摩，支持屬性值用單引號(hào)引起來裙士，支持屬性值用雙引號(hào)引起來。

以下 HTML 4.01 元素已從 HTML5 中刪除：

<~~acronym><~~applet><~~basefont><~~big><~~center><~~dir><~~font><~~frame><~~frameset><~~noframes><~~strike><tt>~~~~~~~~~~~~~~~~~~~~~~

HTML5支持：

- HTML5 中新的語義元素管毙。（如果使用 HTML4 的話腿椎，通過類屬性來設(shè)置頁面元素的樣式：header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...）

article 文檔內(nèi)的文章。規(guī)定獨(dú)立的自包含內(nèi)容夭咬，可以獨(dú)立于網(wǎng)站其他內(nèi)容進(jìn)行閱讀啃炸。應(yīng)用場景：論壇，博客，新聞，

aside 頁面內(nèi)容之外的內(nèi)容（比如側(cè)欄）稚矿。應(yīng)該與周圍內(nèi)容相關(guān)召庞。

details 用戶可查看或隱藏的額外細(xì)節(jié)。

footer 文檔或節(jié)的頁腳调塌，應(yīng)該提供有關(guān)其包含元素的信息滑燃。

頁腳通常包含文檔的作者次乓、版權(quán)信息筑公、使用條款鏈接雳窟、聯(lián)系信息等等∠宦牛可以在一個(gè)文檔中使用多個(gè)元素封救。

header 文檔或節(jié)的頁眉，應(yīng)該被用作介紹性內(nèi)容的容器耸采。一個(gè)文檔中可以有多個(gè)元素兴泥。

main 文檔的主內(nèi)容工育。

mark 重要或強(qiáng)調(diào)的內(nèi)容虾宇。

nav 文檔內(nèi)的導(dǎo)航鏈接。旨在定義大型的導(dǎo)航鏈接塊如绸。不過嘱朽，并非文檔中所有鏈接都應(yīng)該位于元素中！

section 文檔中的節(jié)怔接。（節(jié)（section）是有主題的內(nèi)容組搪泳，通常具有標(biāo)題），可以將網(wǎng)站首頁劃分為簡介扼脐、內(nèi)容岸军、聯(lián)系信息等節(jié)。

summary 是 details 元素的可見標(biāo)題瓦侮。

time 日期/時(shí)間艰赞。

figcaption 是figure元素的標(biāo)題。

figure 自包含內(nèi)容肚吏，比如圖示方妖、圖表、照片罚攀、代碼清單等党觅。

HTML5的figcaption元素和figure元素

在書籍和報(bào)紙中，與圖片搭配的標(biāo)題很常見斋泄。

標(biāo)題（caption）的作用是為圖片添加可見的解釋杯瞻。

通過 HTML5，圖片和標(biāo)題能夠被組合在<figure>元素中炫掐。

<img>元素定義圖像又兵，<figcaption>元素定義標(biāo)題。

注意：<article>和<section>

在 HTML5 標(biāo)準(zhǔn)中，<article>元素定義完整的相關(guān)元素自包含塊沛厨。<section>元素被定義為相關(guān)元素塊宙地。

我們能夠使用該定義來決定如何嵌套元素嗎？不能逆皮！

在因特網(wǎng)上宅粥，您會(huì)發(fā)現(xiàn)<section>元素包含<article>元素的 HTML 頁面，還有<article>元素包含<sections> 元素的頁面电谣。

您還會(huì)發(fā)現(xiàn)<section>元素包含<section>元素秽梅，同時(shí)<article>元素包含<article>元素。

注釋： Note Newspaper: The sports articles in the sports section, have a technical section in each article.

HTML4到HTML5改變的內(nèi)容：

參考手冊：http://www.w3school.com.cn/tags/html_ref_dtd.asp

1.文檔類型（<!DOCTYPE html>）

2.編碼（<meta charset="UTF-8">剿牺，為了確保恰當(dāng)?shù)慕忉屍罂眩约罢_的搜索引擎索引，在文檔中對語言和字符編碼的定義越早越好晒来，在<title>元素之前）

3.為IE添加支持的腳本/shiv （后面有講）

4.添加了語義化元素（<header>钞诡，<footer>，<section>湃崩，<article>荧降，<nav>等等）

除了以上元素，還增加了以下元素：

<bdi> 與其他文本不同的文本方向攒读。

<dialog> 對話框或窗口朵诫。

<enuitem> 用戶能夠從彈出菜單調(diào)用的命令/菜單項(xiàng)目。

<meter> 已知范圍（尺度）內(nèi)的標(biāo)量測量薄扁。

<progress> 任務(wù)進(jìn)度剪返。

<rp> 在不支持 ruby 注釋的瀏覽器中顯示什么。

<rt> 關(guān)于字符的解釋/發(fā)音（用于東亞字體）邓梅。

<ruby> ruby 注釋（用于東亞字體）脱盲。

<wbr> 可能的折行（line-break）。

- 可以向 HTML 添加新元素震放，并為其定義樣式（<
myHero>）（ JavaScript 語句document.createElement("myHero")宾毒，僅適用于 IE。）

Internet Explorer 的問題

上述方案可用于所有新的 HTML5 元素殿遂，但是：

注意：Internet Explorer 8 以及更早的版本诈铛，不允許對未知元素添加樣式。

幸運(yùn)的是墨礁，Sjoerd Visscher 創(chuàng)造了 "HTML5 Enabling JavaScript","the shiv"：

<!--[if lt IE 9]>

<![endif]-->

以上代碼必須位于<head>元素內(nèi)幢竹。

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

建議始終使用小寫

表單：

HTML5中新增表單元素：<datalist>蹲坷，<keygen>，<output>

type ? ? ? IE ? ? ? Firefox ? ? ? Opera ? ? Chrome ? ? Safari

datalist ? ? No ? ? ? No ? ? ? ? ? ? 9.5 ? ? ? ? ? ? No ? ? ? ? ? No

keygen ? ? ?No ? ? ?No ? ? ? ? ? ? ?10.5 ? ? ? ? ?3.0 ? ? ? ? ?No

output ? ? ? ?No ? ? ?No ? ? ? ? ? ? ?9.5 ? ? ? ? ? ?No ? ? ? ? ? No

<datalist> 輸入控件的預(yù)定義選項(xiàng) / 規(guī)定輸入域的選項(xiàng)列表邑飒，列表是通過 datalist 內(nèi)的 option 元素創(chuàng)建的循签，option 元素永遠(yuǎn)都要設(shè)置 value 屬性。

例子：

<datalist>元素為<input>元素規(guī)定預(yù)定義選項(xiàng)列表疙咸。用戶會(huì)在他們輸入數(shù)據(jù)時(shí)看到預(yù)定義選項(xiàng)的下拉列表县匠。<input>元素的list屬性必須引用<datalist>元素的id屬性。

</datalist>

</form>

例子2：

datalist 元素規(guī)定輸入域的選項(xiàng)列表撒轮。列表是通過 datalist 內(nèi)的 option 元素創(chuàng)建的乞旦。

如需把 datalist 綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id：

Webpage: <input type="url"list="url_list"name="link" />

</datalist>

<keygen> 鍵對生成器字段（用于表單）题山。

<keygen>元素的作用是提供一種驗(yàn)證用戶的可靠方法兰粉，是密鑰對生成器（key-pair generator）。當(dāng)提交表單時(shí)顶瞳，會(huì)生成兩個(gè)鍵玖姑，一個(gè)是私鑰，一個(gè)公鑰浊仆。

私鑰（private key）存儲(chǔ)于客戶端客峭，公鑰（public key）則被發(fā)送到服務(wù)器豫领。公鑰可用于之后驗(yàn)證用戶的客戶端證書（client certificate）抡柿。

目前，瀏覽器對此元素的糟糕的支持度不足以使其成為一種有用的安全標(biāo)準(zhǔn)等恐。

例子：

Username: <input type="text" name="usr_name" />

Encryption:<keygen name="security" />

</form>

<output> 計(jì)算結(jié)果洲劣。（用于不同類型的輸出，比如計(jì)算或腳本輸出）

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

HTML5新增輸入類型：number课蔬，color囱稽，date，datetime二跋，datetime-local战惊，email，month扎即，range吞获，search，tel谚鄙，time各拷，url，week（注釋：老式 web 瀏覽器不支持的輸入類型闷营，會(huì)被視為輸入類型 text烤黍。）

（Opera 對新的輸入類型的支持最好知市。不過您已經(jīng)可以在所有主流的瀏覽器中使用它們了。即使不被支持速蕊，仍然可以顯示為常規(guī)的文本域嫂丙。）

type ? ? ? ? ?IE ? ? Firefox ? ? Opera ? ? ?Chrome ? ? ? Safari

email ? ? ? ? ?No ? ? ? ? 4.0 ? ? ? ? ?9.0 ? ? ? ? 10.0 ? ? ? ? ? No

url ? ? ? ? ? ? ?No ? ? ? ? ?4.0 ? ? ? ? ? 9.0 ? ? ? ? ? 10.0 ? ? ? ? No

number ? ? ? No ? ? ? ?No ? ? ? ? ? ?9.0 ? ? ? ? ? ?7.0 ? ? ? ? ?No

range ? ? ? ? ? No ? ? ? ? ?No ? ? ? ? ?9.0 ? ? ? ? ? 4.0 ? ? ? ? ?4.0

Date pickers ? No ? ? ? No ? ? ? ? ?9.0 ? ? ? ? ?10.0 ? ? ? ? ?No

search ? ? ? ? ?No ? ? ? ? 4.0 ? ? ? ? ? 11.0 ? ? ? ? ?10.0 ? ? ? No

color ? ? ? ? ? ? No ? ? ? ? No ? ? ? ? ? ?11.0 ? ? ? ? No ? ? ? ? ?No

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

PS：提示：iPhone 中的 Safari 瀏覽器支持 number 輸入類型，并通過改變觸摸屏鍵盤來配合它（顯示數(shù)字）规哲。

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

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

郵件輸入（會(huì)自動(dòng)驗(yàn)證 email 域的值）：<input type="email" name="">

PS：iPhone 中的 Safari 瀏覽器支持 email 輸入類型奢入，并通過改變觸摸屏鍵盤來配合它（添加 @ 和 .com 選項(xiàng)）。

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

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

URL輸入（會(huì)自動(dòng)驗(yàn)證 url 域的值）：<input type="url" name="">

PS：提示：iPhone 中的 Safari 瀏覽器支持 url 輸入類型媳叨，并通過改變觸摸屏鍵盤來配合它（添加 .com 選項(xiàng)）腥光。

Date Pickers：

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

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

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

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

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

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

HTML新增表單屬性：

新的<input>屬性：

autocomplete痘番，autofocus捉片，form，form overrides（formaction汞舱，formenctype伍纫，formmethod，formnovalidate昂芜，formtarget）莹规，height 和 width，list泌神，min 和 max良漱，step，multiple欢际，pattern (regexp)母市，placeholder，required

新的<form>屬性：

autocomplete损趋，novalidate

type ? ? ? ? ? ? ? ? ? ? ? ?IE ? ? ?Firefox ? ? Opera ? ?Chrome ? ? ?Safari

autocomplete ? ? ? ? 8.0 ? ? ? ?3.5 ? ? ? ? ?9.5 ? ? ? ? 3.0 ? ? ? ? ? ?4.0

autofocus ? ? ? ? ? ? ? No ? ? ? ? No ? ? ? ? 10.0 ? ? ? ? 3.0 ? ? ? ? ? 4.0

form ? ? ? ? ? ? ? ? ? ? ? No ? ? ? ? ?No ? ? ? ? ? 9.5 ? ? ? ? ?No ? ? ? ? ?No

form overrides ? ? ? ?No ? ? ? ? No ? ? ? ? ? 10.5 ? ? ? ? ?No ? ? ? ?No

height and width ? ? 8.0 ? ? ? ?3.5 ? ? ? ? ? ?9.5 ? ? ? ? ? 3.0 ? ? ? 4.0

list ? ? ? ? ? ? ? ? ? ? ? ? ? No ? ? ? No ? ? ? ? ? ? 9.5 ? ? ? ? ? No ? ? ? ?No

min, max and step ? No ? ? ? No ? ? ? ? ? ?9.5 ? ? ? ? ? 3.0 ? ? ? ?No

multiple ? ? ? ? ? ? ? ? ? ?No ? ? ?3.5 ? ? ? ? ? ? No ? ? ? ? ? 3.0 ? ? ? ?4.0

novalidate ? ? ? ? ? ? ? ?No ? ? ?No ? ? ? ? ? ? ?No ? ? ? ? ? No ? ? ? ? No

pattern ? ? ? ? ? ? ? ? ? ? No ? ? ?No ? ? ? ? ? ? ?9.5 ? ? ? ? ? 3.0 ? ? ? ? No

placeholder ? ? ? ? ? ? ?No ? ? No ? ? ? ? ? ? ? ?No ? ? ? ? ?3.0 ? ? ? ? 3.0

required ? ? ? ? ? ? ? ? ? No ? ? ?No ? ? ? ? ? ? ? 9.5 ? ? ? ? ?3.0 ? ? ? ? No

autocomplete 屬性規(guī)定form或input域是否應(yīng)該自動(dòng)完成患久。autocomplete 屬性適用于<form>以及如下<
input>類型：text、search浑槽、url蒋失、tel、email括荡、password高镐、datepickers、range 以及 color畸冲。（值為on/off）

autofocus屬性嫉髓，規(guī)定在頁面加載時(shí)观腊，域自動(dòng)地獲得焦點(diǎn)，適用所有<input>類型算行。（值為true/false）梧油。

form屬性，規(guī)定輸入域所屬的一個(gè)或多個(gè)表單州邢。適用所有<input>標(biāo)簽的類型儡陨。如需引用一個(gè)以上的表單，請使用空格分隔表單 id 列表量淌。

例子：輸入字段位于 HTML 表單之外（但仍屬表單）：

First name: <input type="text" name="fname"><br>

</form>

Last name: <input type="text" name="lname" form="form1">

表單重寫屬性（form override attributes）允許重寫 form 元素的某些屬性設(shè)定骗村，有：

formaction 重寫表單的action屬性

formenctype 重寫表單的enctype屬性

formmethod 重寫表單的method屬性

formnovalidate 重寫表單的novalidate屬性

formtarget 重寫表單的target屬性

表單重寫屬性適用于以下類型的<input>標(biāo)簽：submit 和 image。

formaction屬性規(guī)定當(dāng)提交表單時(shí)處理該輸入控件的文件的 URL呀枢。適用于 type="submit" 以及 type="image"胚股。（如"demo_admin.asp"）

formenctype屬性規(guī)定當(dāng)把表單數(shù)據(jù)（form-data）提交至服務(wù)器時(shí)如何對其進(jìn)行編碼（僅針對 method="post" 的表單）。適用于type="submit" 以及 type="image"裙秋。（如設(shè)置為"multipart/form-data"）

formmethod屬性定義用以向 action URL 發(fā)送表單數(shù)據(jù)（form-data）的 HTTP 方法琅拌。適用于 type="submit" 以及 type="image"。（如post）

formnovalidate屬性摘刑，如果設(shè)置进宝，則規(guī)定在提交表單時(shí)不對 <input> 元素進(jìn)行驗(yàn)證〖纤。可用于 type="submit"党晋。（值為true/false）

formtarget屬性規(guī)定的名稱或關(guān)鍵詞指示提交表單后在何處顯示接收到的響應(yīng)』钭穑可與 type="submit" 和 type="image" 使用隶校。（如"_blank"）

height 和 width屬性漏益，用于 image 類型的 input 標(biāo)簽的圖像高度和寬度蛹锰。（注釋：請始終規(guī)定圖像的尺寸。）

list屬性绰疤，引用的<datalist>元素中包含了<input>元素的預(yù)定義選項(xiàng)铜犬。list 屬性適用于以下類型的 <input>標(biāo)簽：text, search, url, telephone, email, date pickers, number, range 以及 color。（值為<datalist>的id）

min 轻庆、max和step屬性癣猾，用于為包含數(shù)字或日期的 input 類型規(guī)定限定（約束）。規(guī)定<input>元素的最小值和最大值以及合法數(shù)字間隔余爆。適用于以下類型的 <input> 標(biāo)簽：date pickers纷宇、number 以及 range。

multiple屬性蛾方，規(guī)定輸入域中可選擇多個(gè)值像捶。適用于以下輸入類型：email 和 file上陕。（值為true/false）

pattern (regexp)屬性，規(guī)定用于驗(yàn)證 input 域的正則表達(dá)式拓春。適用于以下輸入類型：text释簿、search、url硼莽、tel庶溶、email和 password。（提示：請使用全局的 title 屬性對模式進(jìn)行描述以幫助用戶懂鸵。）

placeholder屬性偏螺，提供一種提示（hint），描述輸入域所期待的值匆光。該提示會(huì)在用戶輸入值之前顯示在輸入字段中砖茸，在輸入域獲得焦點(diǎn)時(shí)消失。適用于以下輸入類型：text殴穴、search凉夯、url、tel采幌、email 以及 password劲够。

required屬性，必須在提交之前填寫輸入域（不能為空）休傍。適用于以下輸入類型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file征绎。（值為true/false）

novalidate屬性，規(guī)定在提交表單時(shí)不應(yīng)該驗(yàn)證 form 或 input 域磨取。適用于 <form> 以及以下類型的 <input> 標(biāo)簽：text, search, url, telephone, email, password, date pickers, range 以及 color人柿。

HTML5圖像：canvas && svg（Scalable Vector Graphics）

canvas（畫布，使用 JavaScript 的圖像繪制忙厌。）

svg（可伸縮矢量圖形凫岖，使用 SVG 的圖像繪制。）

參考手冊：http://www.w3school.com.cn/tags/html_ref_canvas.asp

canvas畫布是一個(gè)矩形區(qū)域逢净，您可以控制其每一像素哥放，它擁有多種繪制路徑、矩形爹土、圓形甥雕、字符以及添加圖像的方法。

- 創(chuàng)建canvas元素（規(guī)定元素的 id胀茵、寬度和高度）：

<canvas id="myCanvas" width="200" height="200">此處編寫文字社露，當(dāng)瀏覽器不支持canvas時(shí)會(huì)顯示這些文字。</canvas>

- 通過 JavaScript 來繪制（canvas 元素本身是沒有繪圖能力的）：

var canvas = document.getElementById('myCanvas");? //使用id來尋找canvas元素琼娘，

var ctx = canvas.getContext("2d");? //然后創(chuàng)建context對象峭弟，getContext("2d") 對象是內(nèi)建的 HTML5 對象赁濒，擁有多種繪制路徑、矩形孟害、圓形拒炎、字符以及添加圖像的方法。

ctx.fillStyle = "#F00";? //fillStyle 方法將其染成紅色

ctx.fillRect(0,0,150,75); //fillRect 方法規(guī)定了形狀挨务、位置和尺寸击你，參數(shù)意義：從畫布的(0,0)開始畫150*75的矩形。這兩行代碼繪制一個(gè)紅色的矩形

</script>

其他實(shí)例：

- 線條（移去(10,10)谎柄；畫到(150,50)丁侄；畫到(10,50)；stroke()才真正的畫朝巫，前面繪制的是路徑）

ctx.moveTo(10,10);

ctx.lineTo(150,50);

ctx.lintTo(10,50);

ctx.stroke();

- 圓形（填充樣式鸿摇；開始路徑；在畫布(70,18)畫一個(gè)半徑為15的弧度為0到Math.PI*2的圓劈猿，true逆時(shí)針畫拙吉，false順時(shí)針畫；關(guān)閉路徑揪荣；fill()才真正的畫筷黔，前面繪制的是路徑）

ctx.fillStyle="#FF0000";

ctx.beginPath();

ctx.arc(70,18,15,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

- 漸變（創(chuàng)建線性的漸變對象，漸變從(0,0)開始仗颈，(175,50)結(jié)束佛舱；添加顏色位置；填充樣式挨决；繪制矩形 / 作為矩形的填充樣式）

var grd=cxt.createLinearGradient(0,0,175,50);

grd.addColorStop(0,"#FF0000");

grd.addColorStop(1,"#00FF00");

cxt.fillStyle=grd;

cxt.fillRect(0,0,175,50);

- 圖像（創(chuàng)建img元素请祖，源文件路徑，(0,0)畫圖像）

var img=new Image()

img.src="flower.png"

ctx.drawImage(img,0,0);

更多canvas用法可以看官方文檔：http://www.w3school.com.cn/tags/html_ref_canvas.asp

也可以看我寫的另外的文章：http://hiuman.iteye.com/blog/2335334

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

svg介紹：

Internet Explorer 9脖祈、Firefox肆捕、Opera、Chrome 以及 Safari 支持內(nèi)聯(lián) SVG撒犀。

SVG 用于定義用于網(wǎng)絡(luò)的基于矢量的圖形福压，它使用 XML 格式定義圖形，且SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有損失

優(yōu)勢（與其他圖像格式相比（比如JPEG和GIF））：

SVG 圖像可通過文本編輯器來創(chuàng)建和修改或舞，它可被搜索、索引蒙幻、腳本化或壓縮映凳，而且是可伸縮的，它可在任何的分辨率下被高質(zhì)量地打印邮破，也可在圖像質(zhì)量不下降的情況下被放大诈豌。

例子：（按順序畫出(100,10)(40,180)(190,60)(10,60),(160,180)仆救，結(jié)果是一個(gè)五角星，閉合的地方填充紅色矫渔，繪制的線條藍(lán)色彤蔽，線寬3，填充規(guī)則(evenodd/nonzero) ）

</svg>

Canvas 與 SVG 的比較：

Canvas

依賴分辨率

不支持事件處理器

弱的文本渲染能力

能夠以 .png 或 .jpg 格式保存結(jié)果圖像

最適合圖像密集型的游戲庙洼，其中的許多對象會(huì)被頻繁重繪

SVG

不依賴分辨率

支持事件處理器

最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）

復(fù)雜度高會(huì)減慢渲染速度（任何過度使用 DOM 的應(yīng)用都不快）

不適合游戲應(yīng)用

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

audio 聲音或音樂內(nèi)容顿痪。

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

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

source 是<video>和<audio>的來源蚁袭。

track 是<video>和<audio>的軌道。

參考手冊：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

多媒體：（詳細(xì)請看官方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）

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

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

在HTML5中顯示視頻：（control 屬性供添加播放官觅、暫停和音量控件。）

<video src="movie.ogg" controls="controls" width="320" height="240">

供不支持 video 元素的瀏覽器顯示的

</video>

此時(shí)阐污，僅適用于Firefox休涤、Opera 以及 Chrome 瀏覽器。

要確保適用于 Safari 瀏覽器，視頻文件必須是 MPEG4 類型功氨。

Your browser does not support the video tag.

</video>

而IE序苏，Internet Explorer 8 不支持 video 元素。在 IE 9 中捷凄，將提供對使用 MPEG4 的 video 元素的支持忱详。

<video>標(biāo)簽的屬性：（除了width，height跺涤，src匈睁，其他的屬性值均為屬性名）

autoplay 如果出現(xiàn)該屬性，則視頻在就緒后馬上播放钦铁。

controls 如果出現(xiàn)該屬性软舌，則向用戶顯示控件，比如播放按鈕牛曹。

loop 如果出現(xiàn)該屬性佛点，則當(dāng)媒介文件完成播放后再次開始播放。

preload 如果出現(xiàn)該屬性黎比，則視頻在頁面加載時(shí)進(jìn)行加載超营，并預(yù)備播放。

如果使用 "autoplay"阅虫，則忽略該屬性演闭。

width 視頻播放器的寬

height 視頻播放器的高

src 視頻URL

HTML5<video> - 方法、屬性以及事件（在所有屬性中颓帝，只有 videoWidth 和 videoHeight 屬性是立即可用的米碰。在視頻的元數(shù)據(jù)已加載后，其他屬性才可用购城。）

方法：play()吕座，pause()，load()瘪板，canPlayType

屬性：currentSrc吴趴，currentTime，videoWidth侮攀，videoHeight锣枝，duration，ended兰英，error撇叁，paused，muted箭昵，seeking税朴，volume，height家制，width

事件：play正林，pause，progress颤殴，error觅廓，timeupdate，ended涵但，abort杈绸，empty，emptied矮瘟，waiting瞳脓，loadedmetadata

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

音頻：

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中顯示音頻：（control 屬性供添加播放澈侠、暫停和音量控件劫侧。）

<audio src="song.ogg" controls="controls">

供不支持 audio元素的瀏覽器顯示的

</audio>

此時(shí)，僅適用于Firefox哨啃、Opera 以及 Chrome 瀏覽器烧栋。

要確保適用于 Safari 瀏覽器，音頻文件必須是 MP3 或 Wav 類型拳球。

Your browser does not support the audio tag.

</audio>

而IE审姓，Internet Explorer 8 不支持 audio 元素。在 IE 9 中祝峻，將提供對 audio 元素的支持魔吐。

<audio>標(biāo)簽的屬性

autoplay 如果出現(xiàn)該屬性，則音頻在就緒后馬上播放莱找。

controls 如果出現(xiàn)該屬性酬姆，則向用戶顯示控件，比如播放按鈕宋距。

loop 如果出現(xiàn)該屬性轴踱，則每當(dāng)音頻結(jié)束時(shí)重新開始播放。

preload 如果出現(xiàn)該屬性谚赎，則音頻在頁面加載時(shí)進(jìn)行加載淫僻，并預(yù)備播放。

如果使用 "autoplay"壶唤，則忽略該屬性雳灵。

src 音頻URL

地理定位略，回顧HTML/HTML5（一）已描述闸盔。

拖放是 HTML5 標(biāo)準(zhǔn)的組成部分：任何元素都是可拖放的悯辙。

拖放（Drag 和 Drop）是很常見的特性。即抓取對象以后拖到另一個(gè)位置。

Internet Explorer 9躲撰、Firefox针贬、Opera 12、Chrome 以及 Safari 5 支持拖放拢蛋。

注釋：在 Safari 5.1.2 中不支持拖放桦他。

官方例子：http://www.w3school.com.cn/tiy/t.asp?f=html5_draganddrop

部分代碼：

function allowDrop(ev) {

ev.preventDefault();

}

function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id);

}

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));

}

代碼分析：

把元素設(shè)置為可拖放：（img元素的draggable 屬性設(shè)置為 true）

拖放的內(nèi)容 - ondragstart 和 setData()：（規(guī)定當(dāng)元素被拖動(dòng)時(shí)發(fā)生的事情。

例子中谆棱，ondragstart 屬性調(diào)用了一個(gè) drag(event) 函數(shù)快压，規(guī)定拖動(dòng)什么數(shù)據(jù)。

dataTransfer.setData() 方法設(shè)置被拖動(dòng)數(shù)據(jù)的數(shù)據(jù)類型和值）

function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id);

}

在例子中垃瞧，數(shù)據(jù)類型是 "text"蔫劣，而值是這個(gè)可拖動(dòng)元素的 id ("drag1")。

拖到何處 - ondragover：（規(guī)定被拖動(dòng)的數(shù)據(jù)能夠被放置到何處个从。

默認(rèn)地脉幢，數(shù)據(jù)/元素?zé)o法被放置到其他元素中。為了實(shí)現(xiàn)拖放信姓，我們必須阻止元素的這種默認(rèn)的處理方式鸵隧。由 ondragover 事件的 event.preventDefault() 方法完成）

進(jìn)行放置 - ondrop：（當(dāng)放開被拖數(shù)據(jù)時(shí)意推，會(huì)發(fā)生 drop 事件豆瘫。）

ondrop 屬性調(diào)用了一個(gè)函數(shù)，drop(event)：

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));

}

代碼解釋：

調(diào)用 preventDefault() 來阻止數(shù)據(jù)的瀏覽器默認(rèn)處理方式（drop 事件的默認(rèn)行為是以鏈接形式打開）

通過 dataTransfer.getData() 方法獲得被拖的數(shù)據(jù)菊值。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)

被拖數(shù)據(jù)是被拖元素的 id ("drag1")

把被拖元素追加到放置元素中

另：來回拖放圖片：http://www.w3school.com.cn/tiy/t.asp?f=html5_draganddrop2

本地存儲(chǔ) / web存儲(chǔ)（Local Storage）

IE 8.0 Chrome 4.0 FF3.5 Safari 4.0 Opera 11.5

之前外驱，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲(chǔ)腻窒，因?yàn)樗鼈冇擅總€(gè)對服務(wù)器的請求來傳遞昵宇，這使得 cookie 速度很慢而且效率也不高。

在 HTML5 中儿子，數(shù)據(jù)不是由每個(gè)服務(wù)器請求傳遞的瓦哎，而是只有在請求時(shí)使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲(chǔ)大量數(shù)據(jù)成為可能柔逼。

對于不同的網(wǎng)站蒋譬，數(shù)據(jù)存儲(chǔ)于不同的區(qū)域，并且一個(gè)網(wǎng)站只能訪問其自身的數(shù)據(jù)。

HTML5 使用 JavaScript 來存儲(chǔ)和訪問數(shù)據(jù)。

HTML 本地存儲(chǔ)提供了兩個(gè)在客戶端存儲(chǔ)數(shù)據(jù)的對象：

window.localStorage - 沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)

window.sessionStorage - 針對一個(gè) session 的數(shù)據(jù)存儲(chǔ)（當(dāng)關(guān)閉瀏覽器標(biāo)簽頁時(shí)數(shù)據(jù)會(huì)丟失）

在使用本地存儲(chǔ)時(shí)猫胁，請檢測 localStorage 和 sessionStorage 的瀏覽器支持：

if (typeof(Storage) !== "undefined") {

// 針對 localStorage/sessionStorage 的代碼

} else {

// 抱歉！不支持 Web Storage ..

}

localStorage 對象：（存儲(chǔ)的是沒有截止日期的數(shù)據(jù)剂买。當(dāng)瀏覽器被關(guān)閉時(shí)數(shù)據(jù)不會(huì)被刪除惠爽，在下一天、周或年中瞬哼，都是可用的婚肆。）

// 存儲(chǔ)? 創(chuàng)建 localStorage 名稱/值對

localStorage.setItem("lastname", "Gates");

// 取回? 取回 "lastname" 的值

document.getElementById("result").innerHTML = localStorage.getItem("lastname");

或者這么寫：

// 存儲(chǔ)

localStorage.lastname = "Gates";

// 取回

document.getElementById("result").innerHTML = localStorage.lastname;

//刪除

localStorage.removeItem("lastname");

注釋：名稱/值對始終存儲(chǔ)為字符串。如果需要請記得把它們轉(zhuǎn)換為其他格式倒槐！

例子：

下面的例子對用戶點(diǎn)擊按鈕的次數(shù)進(jìn)行計(jì)數(shù)旬痹。在代碼中附井，值字符串被轉(zhuǎn)換為數(shù)值讨越，依次對計(jì)數(shù)進(jìn)行遞增：

if (localStorage.clickcount) {

localStorage.clickcount = Number(localStorage.clickcount) + 1;

} else {

localStorage.clickcount = 1;

}

document.getElementById("result").innerHTML = "您已經(jīng)點(diǎn)擊這個(gè)按鈕 " + localStorage.clickcount + " 次。";

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

sessionStorage 對象：（針對一個(gè) session 進(jìn)行數(shù)據(jù)存儲(chǔ)永毅。如果用戶關(guān)閉具體的瀏覽器標(biāo)簽頁把跨，數(shù)據(jù)也會(huì)被刪除。）

創(chuàng)建并訪問一個(gè) sessionStorage：

sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname);

下例在當(dāng)前 session 中對用戶點(diǎn)擊按鈕進(jìn)行計(jì)數(shù)：

if (sessionStorage.clickcount) {

sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;

} else {

sessionStorage.clickcount = 1;

}

document.getElementById("result").innerHTML = "在本 session 中沼死，您已經(jīng)點(diǎn)擊這個(gè)按鈕 " + sessionStorage.clickcount + " 次着逐。";

應(yīng)用程序緩存：（通過創(chuàng)建 cache manifest 文件，可輕松創(chuàng)建 web 應(yīng)用的離線版本意蛀。）可對 web 應(yīng)用進(jìn)行緩存耸别，并可在沒有因特網(wǎng)連接時(shí)進(jìn)行訪問。

Chrome 4.0 IE10.0 FF3.5 Safari 4.0 Opera 11.5

應(yīng)用程序緩存為應(yīng)用帶來三個(gè)優(yōu)勢：

離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們

速度 - 已緩存資源加載得更快

減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過或更改過的資源

例子：（展示了帶有 cache manifest 的 HTML 文檔（供離線瀏覽）http://www.w3school.com.cn/tiy/t.asp?f=html5_html_manifest）

<!DOCTYPE html>

<html manifest="demo.appcache">

<body>

文檔內(nèi)容....

</body>

</html>

每個(gè)指定了 manifest 的頁面在用戶對其訪問時(shí)都會(huì)被緩存县钥。如果未指定 manifest 屬性秀姐，則頁面不會(huì)被緩存（除非在 manifest 文件中直接指定了該頁面）。

manifest 文件的建議文件擴(kuò)展名是：".appcache"若贮。

注意：manifest 文件需要設(shè)置正確的 MIME-type省有，即 "text/cache-manifest"。必須在 web 服務(wù)器上進(jìn)行配置谴麦。

Manifest 文件：（是簡單的文本文件蠢沿，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。）

Manifest文件可分為三個(gè)部分：

CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存

NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接匾效，且不會(huì)被緩存

FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時(shí)的回退頁面（比如 404 頁面）

CACHE MANIFEST：（第一行舷蟀，CACHE MANIFEST，是必需的）

CACHE MANIFEST

/theme.css

/logo.gif

/main.js

上面的 manifest 文件列出了三個(gè)資源：一個(gè) CSS 文件面哼，一個(gè) GIF 圖像野宜，以及一個(gè) JavaScript 文件。當(dāng) manifest 文件被加載后精绎，瀏覽器會(huì)從網(wǎng)站的根目錄下載這三個(gè)文件速缨。然后，無論用戶何時(shí)與因特網(wǎng)斷開連接代乃，這些資源依然可用旬牲。

NETWORK：

下面的 NETWORK 部分規(guī)定文件 "login.php" 永遠(yuǎn)不會(huì)被緩存仿粹，且離線時(shí)是不可用的：

NETWORK:

可以使用星號(hào)來指示所有其他其他資源/文件都需要因特網(wǎng)連接：

NETWORK:

FALLBACK：

下面的FALLBACK部分規(guī)定如果無法建立因特網(wǎng)連接，則用 "offline.html" 替代 /html/ 目錄中的所有文件：

FALLBACK:

/html/ /offline.html

注釋：第一個(gè) URI 是資源原茅，第二個(gè)是替補(bǔ)吭历。

更新緩存：

一旦應(yīng)用被緩存，它就會(huì)保持緩存直到發(fā)生下列情況：

- 用戶清空瀏覽器緩存

- manifest 文件被修改（參閱下面的提示）

- 由程序來更新應(yīng)用緩存

例子：（完整的 Cache Manifest 文件）

CACHE MANIFEST

# 2012-02-21 v1.0.0

/theme.css

/logo.gif

/main.js

NETWORK:

FALLBACK:

/html/ /offline.html

（提示：以 "#" 開頭的是注釋行擂橘，但也可滿足其他用途晌区。應(yīng)用的緩存只會(huì)在其 manifest 文件改變時(shí)被更新。如果您編輯了一幅圖像通贞，或者修改了一個(gè) JavaScript 函數(shù)朗若，這些改變都不會(huì)被重新緩存。更新注釋行中的日期和版本號(hào)是一種使瀏覽器重新緩存文件的辦法昌罩。）

關(guān)于應(yīng)用程序緩存的注意事項(xiàng)：

請留心緩存的內(nèi)容哭懈。

一旦文件被緩存，則瀏覽器會(huì)繼續(xù)展示已緩存的版本茎用，即使您修改了服務(wù)器上的文件遣总。為了確保瀏覽器更新緩存，您需要更新 manifest 文件轨功。

注釋：瀏覽器對緩存數(shù)據(jù)的容量限制可能不太一樣（某些瀏覽器的限制是每個(gè)站點(diǎn) 5MB）旭斥。

Web Workers：（是運(yùn)行在后臺(tái)的 JavaScript，獨(dú)立于其他腳本古涧，不會(huì)影響頁面的性能垂券。您可以繼續(xù)做任何愿意做的事情：點(diǎn)擊、選取內(nèi)容等等蒿褂，而此時(shí) web worker 運(yùn)行在后臺(tái)圆米。）

Chrome4.0 IE10.0 FF3.5 Safari4.0 Opera11.5

官方例子（在后臺(tái)計(jì)數(shù)）：http://www.w3school.com.cn/tiy/t.asp?f=html5_webworker

檢測 Web Worker 支持：

if (typeof(Worker) !== "undefined") {

// 是的！支持 Web worker啄栓！

} else {

// 抱歉娄帖！不支持 Web Worker！

}

創(chuàng)建Web Worker 文件（在一個(gè)外部 JavaScript 文件中創(chuàng)建）：

創(chuàng)建了計(jì)數(shù)腳本昙楚。該腳本存儲(chǔ)于 "demo_workers.js" 文件中：

var i = 0;

function timedCount() {??

i = i + 1;

postMessage(i);

setTimeout("timedCount()",500);

}

timedCount();

以上代碼中重要的部分是 postMessage() 方法 - 它用于向 HTML 頁面?zhèn)骰匾欢蜗ⅰ?br>

注釋:web worker 通常不用于如此簡單的腳本近速，而是用于更耗費(fèi) CPU 資源的任務(wù)。

創(chuàng)建 Web Worker 對象：（已經(jīng)有了 web worker 文件堪旧，我們需要從 HTML 頁面調(diào)用它削葱。）

下面的代碼行檢測是否存在 worker，如果不存在淳梦，- 它會(huì)創(chuàng)建一個(gè)新的 web worker 對象析砸，然后運(yùn)行 "demo_workers.js" 中的代碼：

if (typeof(w) == "undefined") {

w = new Worker("demo_workers.js");

}

然后我們就可以從 web worker 發(fā)生和接收消息了。

向 web worker 添加一個(gè) "onmessage" 事件監(jiān)聽器：

w.onmessage= function(event){? ??

document.getElementById("result").innerHTML = event.data;

};

當(dāng) web worker 傳送消息時(shí)爆袍，會(huì)執(zhí)行事件監(jiān)聽器中的代碼首繁。來自 web worker 的數(shù)據(jù)會(huì)存儲(chǔ)于 event.data 中作郭。

終止 Web Worker：

當(dāng)創(chuàng)建 web worker 后，它會(huì)繼續(xù)監(jiān)聽消息（即使在外部腳本完成后）直到其被終止為止弦疮。

如需終止 web worker夹攒，并釋放瀏覽器/計(jì)算機(jī)資源，請使用 terminate() 方法：

w.terminate();

復(fù)用 Web Worker：

如果您把 worker 變量設(shè)置為 undefined胁塞，在其被終止后咏尝，可以重復(fù)使用該代碼：w =undefined;

完整的代碼：http://www.w3school.com.cn/tiy/t.asp?f=html5_webworker

Web Worker 和 DOM

由于 web worker 位于外部文件中，它們無法訪問下例 JavaScript 對象：

window 對象啸罢，document 對象编检，parent 對象

Server-Sent 事件（允許網(wǎng)頁從服務(wù)器獲得更新。）：

Chrome6.0 IE不支持 FF6.0 Safari5.0 Opera11.5

Server-Sent 事件 - One Way Messaging單向消息傳遞：

Server-Sent 事件指的是網(wǎng)頁自動(dòng)從服務(wù)器獲得更新伺糠。

以前也可能做到這一點(diǎn)蒙谓，前提是網(wǎng)頁不得不詢問是否有可用的更新。通過 Server-Sent 事件训桶，更新能夠自動(dòng)到達(dá)。

例如：Facebook/Twitter 更新酣倾、股價(jià)更新舵揭、新的博文、賽事結(jié)果躁锡，等等午绳。

接收 Server-Sent 事件通知：

EventSource 對象用于接收服務(wù)器發(fā)送事件通知：

例子：

var source = new EventSource("demo_sse.php");

source.onmessage = function(event) {

document.getElementById("result").innerHTML += event.data + "<br>";

};

例子解釋：

創(chuàng)建一個(gè)新的 EventSource 對象，然后規(guī)定發(fā)送更新的頁面的 URL（本例中是 "demo_sse.php"）

每當(dāng)接收到一次更新映之，就會(huì)發(fā)生 onmessage 事件

當(dāng) onmessage 事件發(fā)生時(shí)拦焚，把已接收的數(shù)據(jù)推入 id 為 "result" 的元素中

檢測 Server-Sent 事件支持：

在 TIY 實(shí)例中，我們編寫了一段額外的代碼來檢測服務(wù)器發(fā)送事件的瀏覽器支持：

if(typeof(EventSource) !== "undefined") {

// 是的杠输！支持服務(wù)器發(fā)送事件赎败！

} else {

// 抱歉！不支持服務(wù)器發(fā)送事件蠢甲！

}

服務(wù)器端代碼實(shí)例：

為了使上例運(yùn)行僵刮，您需要能夠發(fā)送數(shù)據(jù)更新的服務(wù)器（比如 PHP 或 ASP）。

服務(wù)器端事件流的語法非常簡單鹦牛。請把 "Content-Type" 報(bào)頭設(shè)置為 "text/event-stream"「愀猓現(xiàn)在，您可以開始發(fā)送事件流了曼追。

PHP 中的代碼 (demo_sse.php)：

<?php

header('Content-Type: text/event-stream');

header('Cache-Control: no-cache');

$time = date('r');

echo "data: The server time is: {$time}\n\n";

flush();

ASP 中的代碼 (VB) (demo_sse.asp)：

Response.ContentType = "text/event-stream"

Response.Expires = -1

Response.Write("data: The server time is: " & now())

Response.Flush()

代碼解釋：

把報(bào)頭 "Content-Type" 設(shè)置為 "text/event-stream"

規(guī)定不對頁面進(jìn)行緩存

輸出要發(fā)送的日期（始終以 "data: " 開頭）

向網(wǎng)頁刷新輸出數(shù)據(jù)

EventSource 對象：

在上例中窍仰，我們使用 onmessage 事件來獲取消息。不過還可以使用其他事件：

事件描述

onopen ?當(dāng)通往服務(wù)器的連接被打開

onmessage ?當(dāng)接收到消息

onerror ?當(dāng)發(fā)生錯(cuò)誤

HTML標(biāo)簽：

http://www.w3school.com.cn/tags/html_ref_byfunc.asp（功能排序）

HTML全局屬性：

http://www.w3school.com.cn/tags/html_ref_standardattributes.asp

最后編輯于：2017.12.06 00:29:42

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末礼殊，一起剝皮案震驚了整個(gè)濱河市驹吮，隨后出現(xiàn)的幾起案子鲫忍，更是在濱河造成了極大的恐慌，老刑警劉巖钥屈，帶你破解...
沈念sama閱讀 219,366評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件悟民，死亡現(xiàn)場離奇詭異，居然都是意外死亡篷就，警方通過查閱死者的電腦和手機(jī)射亏，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,521評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來竭业，“玉大人智润，你說我怎么就攤上這事∥戳荆” “怎么了窟绷？”我有些...
開封第一講書人閱讀 165,689評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長咐柜。經(jīng)常有香客問我兼蜈，道長，這世上最難降的妖魔是什么拙友？我笑而不...
開封第一講書人閱讀 58,925評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任为狸，我火速辦了婚禮，結(jié)果婚禮上遗契，老公的妹妹穿的比我還像新娘辐棒。我一直安慰自己，他們只是感情好牍蜂，可當(dāng)我...
茶點(diǎn)故事閱讀 67,942評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布漾根。她就那樣靜靜地躺著，像睡著了一般鲫竞。火紅的嫁衣襯著肌膚如雪辐怕。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,727評論 1贊 305
城市分裂傳說
那天贡茅，我揣著相機(jī)與錄音秘蛇，去河邊找鬼。笑死顶考，一個(gè)胖子當(dāng)著我的面吹牛赁还，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播驹沿，決...
沈念sama閱讀 40,447評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼艘策，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了渊季？” 一聲冷哼從身側(cè)響起朋蔫，我...
開封第一講書人閱讀 39,349評論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤罚渐，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后驯妄，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體荷并，經(jīng)...
沈念sama閱讀 45,820評論 1贊 317
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,990評論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年青扔，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了源织。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 40,127評論 1贊 351
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡微猖，死狀恐怖谈息，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情凛剥，我是刑警寧澤侠仇，帶...
沈念sama閱讀 35,812評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站犁珠，受9級特大地震影響逻炊，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜盲憎，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,471評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一嗅骄、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧饼疙，春花似錦、人聲如沸慕爬。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,017評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽医窿。三九已至磅甩，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間姥卢，已是汗流浹背卷要。一陣腳步聲響...
開封第一講書人閱讀 33,142評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留独榴，地道東北人僧叉。一個(gè)月前我還...
沈念sama閱讀 48,388評論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長得像棺榔，于是被迫代替她去往敵國和親瓶堕。傳聞我的和親對象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,066評論 2贊 355

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

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