整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
tml5是指萬(wàn)維網(wǎng)的核心語(yǔ)言、 標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用 超文本標(biāo)記語(yǔ)言（ HTML）的第五次重大修改，2014年10月29日， 萬(wàn)維網(wǎng)聯(lián)盟宣布，經(jīng)過(guò)接近8年的艱苦努力，該標(biāo)準(zhǔn)規(guī)范終于制定完成。
HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。新的語(yǔ)法特征被引進(jìn)以支持這一點(diǎn)，如video、audio和canvas 標(biāo)記。HTML5還引進(jìn)了新的功能，可以真正改變用戶與文檔的交互方式，包括新的解析規(guī)則增強(qiáng)了靈活性、新屬性、淘汰過(guò)時(shí)的或冗余的屬性等。
HTML5賦予 網(wǎng)頁(yè)更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對(duì) RDFa的，微數(shù)據(jù)與 微格式等方面的支持，構(gòu)建對(duì)程序、對(duì)用戶都更有價(jià)值的數(shù)據(jù) 驅(qū)動(dòng)的Web。
本地存儲(chǔ)特性（Class: OFFLINE & STORAGE）
基于HTML5開(kāi)發(fā)的網(wǎng)頁(yè) APP擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲(chǔ)功能。Indexed DB（html5本地存儲(chǔ)最重要的技術(shù)之一）和 API說(shuō)明文檔。
設(shè)備兼容特性 (Class: DEVICE ACCESS)
從 Geolocation功能的API文檔公開(kāi)以來(lái)，HTML5為網(wǎng)頁(yè)應(yīng)用開(kāi)發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來(lái)了更多體驗(yàn)功能的優(yōu)勢(shì)。HTML5提供了前所未有的數(shù)據(jù)與 應(yīng)用接入開(kāi)放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)。
連接特性（Class: CONNECTIVITY）
更有效的連接工作效率，使得基于頁(yè)面的實(shí)時(shí)聊天，更快速的網(wǎng)頁(yè)游戲體驗(yàn)，更優(yōu)化的在線交流得到了實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-Sent Event和WebSockets就是其中的兩個(gè)特性，這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。
網(wǎng)頁(yè) 多媒體 特性(Class: MULTIMEDIA)
支持網(wǎng)頁(yè)端的Audio、Video等多媒體功能， 與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。
三維、圖形及特效特性（Class: 3D, Graphics & Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會(huì)驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺(jué)效果。
性能與集成特性（Class: Performance & Integration）
沒(méi)有用戶會(huì)永遠(yuǎn)等待你的Loading——HTML5會(huì)通過(guò) XMLHttpRequest2等技術(shù)，解決以前的跨域等問(wèn)題，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。
CSS3特性(Class: CSS3)
在不犧牲性能和語(yǔ)義結(jié)構(gòu)的前提下， CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果。此外，較之以前的Web排版，Web的開(kāi)放字體格式（ WOFF）也提供了更高的靈活性和控制性。
關(guān)于沿革
HTML5提供了一些新的元素和屬性，例如
（網(wǎng)站導(dǎo)航塊）和
。這種標(biāo)簽將有利于搜索引擎的索引整理，同時(shí)更好的幫助小屏幕裝置和視障人士使用，除此之外，還為其他瀏覽要素提供了新的功能，如
1、取消了一些過(guò)時(shí)的 HTML4標(biāo)記
其中包括純粹顯示效果的標(biāo)記，如< font>和<center>，它們已經(jīng)被CSS取代。
HTML5 吸取了 XHTML2 一些建議，包括一些用來(lái)改善文檔結(jié)構(gòu)的功能，比如，新的HTML 標(biāo)簽 header, footer, dialog, aside, figure 等的使用，將使內(nèi)容創(chuàng)作者更加語(yǔ)義地創(chuàng)建文檔，之前的開(kāi)發(fā)者在實(shí)現(xiàn)這些功能時(shí)一般都是使用 div。
2、將內(nèi)容和展示分離
b 和 i 標(biāo)簽依然保留，但它們的意義已經(jīng)和之前有所不同，這些標(biāo)簽的意義只是為了將一段文字標(biāo)識(shí)出來(lái)，而不是為了為它們?cè)O(shè)置粗體或斜體式樣。u，font，center，strike 這些標(biāo)簽則被完全去掉了。
3、一些全新的表單輸入對(duì)象
包括日期，URL，Email 地址，其它的對(duì)象則增加了對(duì)非拉丁 字符的支持。HTML5 還引入了微數(shù)據(jù)，這一使用機(jī)器可以識(shí)別的標(biāo)簽標(biāo)注內(nèi)容的方法，使語(yǔ)義Web 的處理更為簡(jiǎn)單。總的來(lái)說(shuō)，這些與結(jié)構(gòu)有關(guān)的改進(jìn)使內(nèi)容創(chuàng)建者可以創(chuàng)建更干凈，更容易管理的網(wǎng)頁(yè)，這樣的網(wǎng)頁(yè)對(duì)搜索引擎，對(duì)讀屏軟件等更為友好。
4、全新的，更合理的Tag
多媒體對(duì)象將不再全部綁定在 object或 embed Tag 中，而是視頻有視頻的Tag，音頻有音頻的 Tag。
5、本地?cái)?shù)據(jù)庫(kù)
這個(gè)功能將內(nèi)嵌一個(gè)本地的SQL 數(shù)據(jù)庫(kù)，以加速交互式搜索，緩存以及索引功能。同時(shí)，那些離線Web 程序也將因此獲益匪淺。不需要插件的豐富動(dòng)畫(huà)。
6、Canvas 對(duì)象
將給瀏覽器帶來(lái)直接在上面繪制 矢量圖的能力，這意味著用戶可以脫離Flash 和Silverlight，直接在瀏覽器中顯示圖形或動(dòng)畫(huà)。
7、瀏覽器中的真正程序
將提供 API 實(shí)現(xiàn)瀏覽器內(nèi)的編輯，拖放，以及各種 圖形用戶界面的能力。內(nèi)容修飾Tag 將被剔除，而使用CSS。
8、Html5取代Flash在移動(dòng)設(shè)備的地位。
9、其突出的特點(diǎn)就是強(qiáng)化了web頁(yè)的表現(xiàn)性,追加了本地?cái)?shù)據(jù)庫(kù),
我還在南方小島上玩兒的時(shí)候，一個(gè)朋友給我發(fā)了條語(yǔ)音信息（早上發(fā)的，我晚上才聽(tīng)，我讓你發(fā)語(yǔ)音）大概是說(shuō)，能不能幫忙聯(lián)系一個(gè)會(huì) HTML5 的團(tuán)隊(duì)，領(lǐng)導(dǎo)要求做一個(gè) HTML5 的活動(dòng)頁(yè)面。
看來(lái) HTML5 的浪潮又要讓我們的廣告客戶渾身濕透了。他們想要華麗的頁(yè)面，想要讓用戶覺(jué)得他們很酷。事實(shí)上，即使他們只做了一張很廉價(jià)的“活動(dòng)邀請(qǐng)函”頁(yè)面，用戶也覺(jué)得好棒好厲害。真相是，大部分用戶并不知道其中的奧秘。
HTML5是針對(duì)超文本語(yǔ)言HTML的第五次修訂。具體HTML是什么？我們先籠統(tǒng)地認(rèn)為它是一種用來(lái)創(chuàng)建網(wǎng)頁(yè)的手段就好。不過(guò)你不是科技從業(yè)者，也不是什么都要懂一點(diǎn)的極客。你會(huì)想：什么html、Input type=date、js線程、socket、標(biāo)準(zhǔn)擴(kuò)展embed、css3……這些都是什么鬼我根本不想知道快扔走！
這一切并不在你學(xué)習(xí)的范圍內(nèi)。你只關(guān)心這樣一個(gè)問(wèn)題：它會(huì)為你的生活帶來(lái)怎樣的變化？
? 你手機(jī)里的原生APP會(huì)變少。
原生APP，就是你到應(yīng)用商店里選一個(gè)應(yīng)用、等待下載、確認(rèn)權(quán)限、等待安裝，然后點(diǎn)擊打開(kāi)的那種移動(dòng)應(yīng)用，它專門(mén)針對(duì)某一類移動(dòng)操作系統(tǒng)生成，必須被完整安裝到手機(jī)里。而有一種“假”APP，它們打開(kāi)后基本利用手機(jī)中的瀏覽器來(lái)運(yùn)行，而且不需要下載后安裝，就能立即在手機(jī)界面中生成一個(gè)APP圖標(biāo)——HTML5就是生產(chǎn)這種“假”APP的利器。比如你玩《神經(jīng)貓》就不需要下載一個(gè)APP，而這個(gè)游戲正是用HTML5網(wǎng)頁(yè)實(shí)現(xiàn)的。
? 你那個(gè)當(dāng)程序員的男朋友（如果你有）就可以早點(diǎn)下班回家了。
HTML5是唯一一個(gè)通吃PC、Mac、iPhone、iPad、Android、Windows Phone等主流平臺(tái)的跨平臺(tái)語(yǔ)言。因?yàn)檫@種跨平臺(tái)的便利，程序員們只需要為之開(kāi)發(fā)一種類別的產(chǎn)品——說(shuō)白了就是一個(gè)萬(wàn)能的網(wǎng)頁(yè)。他再也不需要做一款只能在蘋(píng)果手機(jī)上運(yùn)行的APP后，再做一款也可以在三星、小米上使用的APP。
? 你的手機(jī)里沒(méi)有Flash了。
如果需要一個(gè)能夠集中展示視頻、音頻等各種媒體形式的插件，那就是Flash。這個(gè)部署在億萬(wàn)瀏覽器里的商業(yè)插件儼然成為事實(shí)上的網(wǎng)頁(yè)標(biāo)準(zhǔn)。但是，HTML5把這個(gè)標(biāo)準(zhǔn)打破了，這些媒體形式不再需要Flash這一插件就能分布在網(wǎng)頁(yè)當(dāng)中。HTML5可以讓我們不借助第三方插件實(shí)現(xiàn)多媒體。
? 正因?yàn)槟愕南到y(tǒng)需要運(yùn)行的第三方插件變少，瀏覽器占用的系統(tǒng)資源相對(duì)也會(huì)變少，有可能你會(huì)發(fā)現(xiàn)自己的手機(jī)電量變得更持久了。
? 當(dāng)你使用定位服務(wù)的時(shí)候，不用點(diǎn)“搜索”了，直接點(diǎn)“附近”。
這是因?yàn)镠TML5更好地實(shí)現(xiàn)了基于地理位置的功能，在從前那些使用舊語(yǔ)言編輯的網(wǎng)頁(yè)上，LBS（基于位置的服務(wù)）沒(méi)有獲得很好的支持，所以你需要在網(wǎng)頁(yè)上依次選擇全國(guó)、北京、朝陽(yáng)區(qū)、大望路……
? 網(wǎng)頁(yè)更美觀。
對(duì)網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)，HTML5重新定義了很多設(shè)計(jì)標(biāo)準(zhǔn)，這使得他們?cè)诠ぷ鞯臅r(shí)候遵循著更加科學(xué)的方法，再加上HTML5可以讓我們不借助第三方插件實(shí)現(xiàn)多媒體，網(wǎng)頁(yè)設(shè)計(jì)師得以發(fā)揮他們的創(chuàng)造力，你會(huì)看到更加酷炫的網(wǎng)頁(yè)界面。
視覺(jué)，這是最重要的。對(duì)用戶來(lái)說(shuō)，沒(méi)有什么比直接的體驗(yàn)更能說(shuō)明某種技術(shù)為世界帶來(lái)的改變。現(xiàn)在我用幾個(gè)騰訊新聞的手機(jī)頁(yè)面來(lái)舉例，和你在微信朋友圈看到的那些蹩腳的邀請(qǐng)函、抽獎(jiǎng)頁(yè)面相比，這些頁(yè)面嘗試用一種更有意思、更流暢的方式來(lái)講述事件。
APEC期間推出的《服裝秀》，截取的三個(gè)界面。在這個(gè)應(yīng)用中，新聞相關(guān)的人物將會(huì)變成試衣模特。例如你可以選擇奧巴馬當(dāng)你的模特，然后給他換上各種服裝。
上圖《再見(jiàn)2元的風(fēng)景》是針對(duì)北京地鐵票價(jià)調(diào)整制作的新聞專題頁(yè)。這個(gè)流傳甚廣的煽情專題，也是一個(gè)HTML5頁(yè)面，它提供了一種流暢的圖片瀏覽方式。
HTML5 同樣為網(wǎng)頁(yè)提供了更多交互的可能，比如你可以在同一個(gè)頁(yè)面中完成一個(gè)網(wǎng)頁(yè)調(diào)查，然后直接分享給你的朋友圈好友。
總之，HTML5 可以更有效地組織互聯(lián)網(wǎng)中的信息，并讓視頻、音頻等服務(wù)得到更好的支持；并在減輕開(kāi)發(fā)者的負(fù)擔(dān)的同時(shí)，讓用戶在不同的平臺(tái)上有更一致的體驗(yàn)。
沒(méi)有炫耀的意思，這些內(nèi)容出于個(gè)人對(duì)HTML5的好奇，導(dǎo)致我多看了一些材料，并且咨詢了行業(yè)的專家。大致上，我能保證這些內(nèi)容都是可信的，對(duì)普通人而言，這些已經(jīng)足夠：甲方或者乙方們?cè)僖膊粫?huì)輕易騙走你的巨額預(yù)算。
“你知道那你說(shuō)啊。”
烏云裝扮者包含了世界、黑色趣味和明亮內(nèi)心
微信號(hào)及新浪微博@DACLODS
TML 實(shí)例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥(niǎo)教程(runoob.com)</title></head><body><h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p></body></html>
實(shí)例解析
DOCTYPE 聲明了文檔類型
位于標(biāo)簽 <html> 與 </html> 描述了文檔類型
位于標(biāo)簽 <body> 與 </body> 為可視化網(wǎng)頁(yè)內(nèi)容
位于標(biāo)簽 <h1> 與 </h1> 作為一個(gè)標(biāo)題使用
位于標(biāo)簽 <p> 與 </p> 作為一個(gè)段落顯示
| <!DOCTYPE html> 在HTML5中也是描述了文檔類型。 |
什么是HTML?
HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。
HTML 指的是超文本標(biāo)記語(yǔ)言: HyperText Markup Language
HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言
標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)
HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容
HTML文檔也叫做 web 頁(yè)面
HTML 標(biāo)簽
HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)。
HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如 <html>
HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的，比如 <b> 和 </b>
標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
開(kāi)始和結(jié)束標(biāo)簽也被稱為開(kāi)放標(biāo)簽和閉合標(biāo)簽
<標(biāo)簽>內(nèi)容</標(biāo)簽>
HTML 元素
"HTML 標(biāo)簽" 和 "HTML 元素" 通常都是描述同樣的意思.
但是嚴(yán)格來(lái)講, 一個(gè) HTML 元素包含了開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽，如下實(shí)例:
HTML 元素:
<p>這是一個(gè)段落。</p>
Web 瀏覽器
Web瀏覽器（如谷歌瀏覽器，Internet Explorer，F(xiàn)irefox，Safari）是用于讀取HTML文件，并將其作為網(wǎng)頁(yè)顯示。
瀏覽器并不是直接顯示的HTML標(biāo)簽，但可以使用標(biāo)簽來(lái)決定如何展現(xiàn)HTML頁(yè)面的內(nèi)容給用戶：
HTML 網(wǎng)頁(yè)結(jié)構(gòu)
下面是一個(gè)可視化的HTML頁(yè)面結(jié)構(gòu)：
<html>
<head>
<title>頁(yè)面標(biāo)題</title>
</head>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。</p>
<p>這是另外一個(gè)段落。</p>
</body>
</html>
| 只有 <body> 區(qū)域 (白色部分) 才會(huì)在瀏覽器中顯示。 |
HTML版本
從初期的網(wǎng)絡(luò)誕生后，已經(jīng)出現(xiàn)了許多HTML版本:
| 版本 | 發(fā)布時(shí)間 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
<!DOCTYPE> 聲明
<!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁(yè)。
網(wǎng)絡(luò)上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網(wǎng)頁(yè)內(nèi)容。
doctype 聲明是不區(qū)分大小寫(xiě)的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
通用聲明
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
查看完整網(wǎng)頁(yè)聲明類型 DOCTYPE 參考手冊(cè)。
中文編碼
目前在大部分瀏覽器中，直接輸出中文會(huì)出現(xiàn)中文亂碼的情況，這時(shí)候我們就需要在頭部將字符聲明為 UTF-8。
HTML 實(shí)例
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>頁(yè)面標(biāo)題</title></head><body><h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p></body></html>
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
