HTML 5 - 交互

HTML 5 也被稱為 Web Applications 1.0。為了實現這個目標，增加了幾個為 Web 頁面提供交互體驗的新元素：

details

datagrid

command

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

details

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

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 屬性。如果設置了這個屬性，那么詳細信息在最初就顯示出來。如果沒有設置這個屬性，那么會隱藏它們，直到用戶要求顯示它們。無論是哪種情況，用戶都可以通過單擊一個圖標或其他控件來顯示或隱藏詳細信息。

datagrid

datagrid 元素提供一個網格控件。可以用它顯示樹、列表和表格，用戶和腳本可以更新這些界面元素。與之相反，傳統的表格主要用來顯示靜態數據。

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

<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>

這個元素與常規表格的區別在于，用戶可以選擇行、列和單元格；把行、列和單元格折疊起來；編輯單元格；刪除行、列和單元格；對網格排序；以及在客戶機瀏覽器中直接進行其他數據操作。可以用 JavaScript 代碼監視更新。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 在網格中動態地裝載數據。也就是說，datagrid 可以不包含那些提供初始數據的子元素。可以用一個 DataGridDataProvider 對象設置它（代碼 11　DataGridDataProvider）。這樣就可以從數據庫、XmlHttpRequest 或者 JavaScript 代碼能夠訪問的任何資源裝載數據。

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 元素實際上在 HTML 2 中就出現了。在 HTML 4 中廢棄了它，但是 HTML 5 又恢復了它并指定了新的意義。在 HTML 5 中，menu 包含 command 元素，每個 command 元素引發一個操作。例如，代碼 12 HTML 5 菜單　是一個彈出警告框的菜單。

<menu>

<commandlabel="Do 1st Command"/>

<commandlabel="Do 3rd Command"/>

</menu>

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

除了簡單的命令列表之外，還可以使用 menu 元素創建工具欄或彈出式上下文菜單，這需要將 type 屬性設置為 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 屬性提供菜單的標題。例如，代碼14. HTML 5 Edit 菜單　顯示一個 Edit 菜單。

<commandlabel="Cut"/>

</menu>

菜單可以嵌套在其他菜單中，形成層次化的菜單結構。

TML 5 是最新的超文本標記語言 (HTML)，它是用于描述網頁內容和外觀的標準編程語言。如今，所有主要瀏覽器（Chrome、Safari、Firefox、Opera 和 IE）都提供 HTML5 支持，這使其成為當今使用的最新 HTML 技術。

下面列出了 HTML5 的一些驚人優勢：

1. 跨瀏覽器兼容性

HTML5 易于實現，并且可以與 CSS3 一起使用。今天所有的瀏覽器都支持 HTML5 標簽，甚至 IE6 也能理解標記 <!doctype html> 并且會正確地呈現頁面。

2. 新的 DOCTYPE 聲明：

關于 HTML 5 最重要的事實是 - HTML5 易于實現并且可以與 CSS3 一起使用

HTML5 的 DOCTYPE 聲明非常簡單：

<! DOCTYPE html>

是的，只有“DOCTYPE”和“html”這兩個詞，不再有長行充滿臟標簽的不可讀代碼。

3. 帶來可用性和用戶體驗的改進

可用性和用戶體驗與網站或應用程序的設計程度有關。我們都想要更好的動態網站和美觀的應用程序與用戶交互并允許用戶享受功能、內容等，而不僅僅是看它。HTML5 對 Web 具有多項技術增強和改進功能，并且使用 HTML5 代碼，Web 開發人員可以輕松設計更好的應用程序和動態網站，從而帶來更好的用戶體驗和可用性。

4. 替代 Flash 和 Silver light

HTML5超越Flash和Silver light而領先只是因為播放Flash文件和Silver light需要安裝Adobe Flash最新版本或Silver light插件，還需要注意設備和操作系統的兼容性. HTML 5 并非如此。因此，HTML5 如今在公司中變得越來越流行，因為它提供了大量的屬性和功能，可幫助 Web 開發人員以最少的工作量構建漂亮的網站和應用程序。

5. 大量用于移動應用和游戲

HTML5 在移動應用程序和游戲開發中的適應性隨著 HTML5 Web 應用程序工具在從用戶界面 (UI)、開發、使用腳本等開始的所有情況下為 Web 開發人員提供了更大的靈活性而增加。

HTML5 還能夠處理多媒體內容，而無需安裝插件，我們可以使用該技術輕松開發交互式游戲。

6. 干凈的標記和改進的代碼

HTML5 帶有簡潔的標記和簡潔的代碼，使其比以前的版本更易于訪問。HTML 5 允許 Web 開發人員和 Web 設計人員使用更簡潔的代碼并刪除 div 標簽并將所有 div 標簽替換為新的 HTML 5 元素。

7. 離線瀏覽

HTML5 還提供離線瀏覽功能，這意味著訪問者可以在沒有有效互聯網連接的情況下加載網頁上的某些元素。假設你訪問了該站點，但不知何故你現在沒有連接到互聯網，或者互聯網連接發生故障。使用 HTML5 離線緩存，我們仍然可以加載網站的核心元素，你可以離線查看它們。

8. HTML5 在網站抓取和索引方面對 SEO 友好：

如今，為了在包括谷歌在內的不同搜索引擎中獲得并保持最高排名，必須小心優化網站和所有必要的 SEO 模塊。HTML 5 帶有各種屬性和模塊，使網絡爬蟲可以輕松搜索你的內容并使其正確編入索引，從而提高其在搜索引擎搜索結果頁面中的排名。HTML5 的技術提供了具有廣泛結構元素、語義、表單類型、新屬性和媒體元素的各種功能，使數字營銷專家和開發人員更容易專注于更好的搜索引擎優化技術并推動更多的自然搜索流量。

9. 視頻和音頻支持

借助 HTML5 技術，我們不再需要依賴第三方插件來渲染音頻和視頻。你可以忘記 Flash Player 和其他第三方媒體播放器和插件。你可以使用新的 HTML5 <video> 和 <audio> 標簽輕松訪問你的視頻和音頻。

以前你必須使用舊的 <embed> 和 <object> 標簽并分配大量參數，以顯示視頻可見并正常工作。但是使用 HTML5 的視頻和音頻標簽，我們可以將它們視為圖像； <video src=”url”/>。

我們只需要像任何其他 HTML 元素一樣在單行標簽中定義高度、寬度和自動播放等參數：<video src=”url” width=”800px” height=”500px”autoplay/>。

10. 地理位置支持

在地理定位的幫助下，我們可以輕松地找出我們在世界上的位置，并輕松地與人們分享這些信息。過去，如果我們想首先檢測客戶端設備的位置，我們必須查看客戶端 IP 地址、你的無線網絡連接、手機的基站和緯度和經度。但是對于 HTML5，已經開發了一組 API，它們可以有效地允許客戶端設備（即你的手機、IP 甚至你的桌面瀏覽器）使用你的 HTML5 兼容瀏覽器直接可用的 JavaScript 檢索地理定位信息。

HTML5 改進并增強了瀏覽體驗。那么為什么不為你的網站和移動應用程序采用 HTML 5 呢？

了解更多

5，既HTML 5技術，是一項網頁互動效果制作的技術集合。過去一年里，H5小游戲和各類“卡片式”營銷席卷了我們的微信朋友圈。以一款游戲的爆發為契機，人們見識到了其技術的巨大魅力和潛力。各類創新、創業公司紛紛投身H5藍海，欲再創奇跡。

3月29日下午，創業家“創客論沙龍”以“H5生態重建冷思考”為主題，邀請到騰訊、搜狐快站、云適配、白鷺游戲、火速輕、創新工場各位商業大佬進行分享，并與在場的相關從業者與興趣愛好者共同探討H5生態的現狀與未來。

過去一年里，H5小游戲和各類“卡片式”營銷席卷了我們的微信朋友圈。以《圍住神經貓》游戲的爆發為契機，人們見識到了HTML5技術的巨大魅力和潛力。各類創新、創業公司一夜間紛紛投身H5藍海，乘風破浪，欲再創奇跡。

殊不知，HTML5作為一項網頁互動效果制作的技術集合，已經歷超過10年的發展歷程。從2004年HTML5的提出與開發，到2014年10月29日，W3C正式宣布H5標準規范最終制定完成；在大眾視角之外，互聯網巨頭和創業型公司都在努力用實踐探索H5發展之路。國際環境下，H5發展經過高峰期和低谷期，正步入緩慢發展階段。國內領域，H5技術受到熱烈關注，卻也存在不少問題，H5生態的構建方興未艾。

3月29日下午，創業家“創客論沙龍”以“H5生態重建冷思考”為主題，邀請到騰訊X5瀏覽服務產品負責人楊三金、搜狐快站產品負責人翁曉奇、云適配創始人兼CEO陳本峰、白鷺游戲引擎聯合創始人張翔、火速輕應用創始人兼CEO趙九州、創新工場投資總監姜證嚴等嘉賓進行分享，并與在場的H5相關從業者與興趣愛好者共同探討H5生態的現狀與未來。

PC時代，瀏覽器是獲取用戶獲取信息的唯一入口。20年前，網景開啟瀏覽器時代。如今，移動互聯網時代，WEB信息瀏覽發生變化，瀏覽器在APP生態中權重降低。用戶獲取信息不斷碎片化到各個APP中，同時利用社交網絡傳播信息更快更廣。

然而，移動時代，WEB場景不減反增，淘寶、微信、QQ等應用體系，都是基于H5技術的Web來承載的。移動端的未來不再是狹義的“瀏覽器”時代，而是“大瀏覽時代”。移動瀏覽的大量需求使得WEB生態發展更加迅猛，很多及時通訊和信息傳播都是WEB承載的，不過呈現出來的是APP外殼而已。

然而手機APP中的瀏覽技術能力卻支撐不足，存在適配成本高、不安全、不穩定、耗流量、速度慢等一系列問題。QQ瀏覽器的X5內核致力于探索解決WEB技術和體驗上的困局。X5目前已廣泛應用于微信、手機QQ、QQ空間和QQ瀏覽器等騰訊四款用戶量最大的產品中，每天接受超過60億次PV考驗。第三方APP只需接入60K的SDK即可實現X5內核的引擎共享。

針對H5行業普遍關注的閉環變現問題，楊三金的思考思路是：用戶產生-用戶運營-獲取盈利。他認為H5的用戶產生渠道遠大于原生應用，跨平臺及易傳播性可以快速獲取用戶。至于H5應用普遍存在的用戶留存問題，他認為基于更好的用戶體驗和強運營，經過推廣發力，可以精準用戶實現留存和盈利。

隨著移動終端爆發式普及、消耗碎片時間成為常態，移動時代全面來臨，用戶指數超5億（2013年數據）。移動發展史經歷了門戶WAP大潮、SIS大潮、APP大潮和公眾大潮后，即將迎來HTML5大潮。在硬件成熟促成H5體驗提升、端能力提高將“端+云”成為主流的情況下，未來H5領域會出現系統級入口。

后移動時代，全入口、多載體、跨平臺為移動發展現狀，H5+App+多種入口成為主流玩法。從產業格局上講，內容、技術、渠道、設備應各司其職，促進用戶更好實現H5生態體驗。

搜狐快站，目前作為內容技術供應商，通過在線可視化頁面編輯器簡單生成自己移動端站點。試圖解決轉碼流、微信流和定制流無法完成的“最后一公里”難題：三分鐘建站，一鍵生成獨立APP，并支持安卓和蘋果系統。通過多渠道分發、移動營銷和其他功能實現一站式解決方案。與各行業商家深入合作，并與微信公眾號打通、與百度直達號深度合作等，達到“一處建站，全網營銷”。

作為HTML5標準制定的參與者及W3C中國區HTML5布道官，陳本峰將原生APP比作飛機，而H5應用比作汽車。他認為目前的情況下，原生APP開發時間長、成本高，但速度快、界面操作流暢、省流量。而H5應用則有跨平臺、易開發、可搜索、無需下載升級等優點。兩種產品形態各有利弊，無法徹底替代。

他認為，以少量高頻的原生APP帶動海量低頻的H5應用將是未來一段時間移動生態的發展情況。以應用商店為分發渠道App客戶端為主要應用形式的現狀，未來會發生變化，基于瀏覽內核的超級App會成為分發平臺，H5 WEB APP會成為主要應用形態。

為了充分利用H5跨平臺的優勢，云適配致力于實現“一次開發、多處運行”，打造H5跨屏應用。即任何終端設備上，用戶始終可通過同一個網址訪問該應用，并獲得一致的內容及最適合當前設備或平臺的使用體驗。同時，Amaze UI可幫助企業自主開發跨屏應用。

目前國內H5市場，游戲行業算是發展比較快、產業鏈比較健全的領域。也是眾多創業者積極投身嘗試的領域，被期待最早實現閉環變現。H5游戲有著用戶進入門檻低、方便營銷、易開發、及時更新等特點。H5游戲打破了渠道為王的格局，或許將爆發出巨大價值。

以《圍住神經貓》游戲聲名鵲起的白鷺游戲引擎，卻希望大家對H5游戲的理解不要停留于此。他們相信H5技術將可以實現更重的、炫酷的、甚至3D大型游戲。現在白鷺引擎已經支持3D。作為游戲引擎平臺，白鷺希望H5游戲行業要保持正面積極的態度，也要客觀冷靜看待市場。相信市場潛力長遠，積極投入、不斷嘗試，共建生態會解決留存率和付費率的問題。白鷺引擎下一步計劃海外布局。

智能機人口紅利消退下的互聯網技術趨勢，解決單一領域需求的低頻次個體應用會逐漸融入大平臺。火速輕應用通過深度研究移動端用戶習慣，發現產品去本地化、內容去中心化、場景去搜索化成為移動互聯網新的需求。HTML 5技術將不僅局限于應用層的創新、而將實現重構信息傳播形態。

H5在重新定義APP、Minisite和游戲的概念，在產品力、傳播力和表現力上體現突出特點。同時H5也面臨一系列問題。比如，商業化進程過早過熱：在H5環境尚未成熟時，進行拔苗助長式的商業變現不利于用戶體驗和提供更好內容。

作為H5領域渠道平臺的研究者，趙九州提出了關于H5行業的幾項獨特見解：

1.H5不是一個技術驅動型產業：內容和運營驅動有利于用戶習慣從APP切換到H5的時間培養；

2.O2O可能不是H5的最佳賽道：H5先要變革獲取信息的方式，其次才是改變用戶生活方式；

3.H5不應只有商業化內容：行業需要一起做生態，別急著賺快錢；

4.云來模式可能只是個過渡形態；

5.H5游戲爆發的關鍵點——社交：依附于大渠道強推、做手游換皮是不可能出現爆款的；

6.鼓吹H5顛覆APP為時尚早：創新與顛覆總是從邊緣再到核心，H5與APP將長期處于共生互補狀態。

7.H5可能不是個產業：和LBS、博客一樣，會成為整個互聯網的基礎建設。

火速輕應用作為移動互聯網第一款H5內容分發平臺，專注于Web App與H5游戲的聚合分發。致力于成為下一代手機娛樂中心，成為微信以外第二個超級App。

作為投過H5領域兩家公司——磊友科技與火速網絡的創新工場，從資本方的角度為大家現場剖析了H5行業的創業前景。

H5產業鏈可以簡單分為3部分：渠道、工具、產品。資本市場對于新技術崛起的領域，會考慮一定的風險性，VC們早期傾向布局工具和渠道。然而，等行業發展一定階段，基礎工作完成后，投資點應該發生在產品領域。這是真正好的創業機會。之前的渠道與工具，在做一個基礎的工作。整個行業的爆發需要殺手級的應用，引領產業發展。

姜證嚴建議，當下H5領域創業者，可以將更多關注重點放在H5的產品和技術。他相信如果這個時間點，在產品層面有非常好的想法，更容易獲得資本的認可。

等好產品出來，提煉、抽取，也可以轉到后端做引擎或重新考慮做渠道，這樣創業的成功流程會更高。他提醒大家，當下的時間點，在渠道與工具領域創業要慎重，除非有特別好的點實現。

可以預測，當下及未來一段時間，H5會一直成為創新創業的熱點，在生態重建和產業鏈不斷完善的過程中，也會有更好的發展和更廣泛的應用。

本次創客論沙龍的各位重量級嘉賓從技術、行業、內容、資本等方面進行了專業且實用的分享。多角度為現場的H5領域從業者及興趣愛好者解讀H5的現狀與發展。希望有志于在H5領域有所作為的創業者能夠獲得更多啟發，理性看待H5行業發展，并努力共建H5良性生態。

在線咨詢

上一篇：一度登頂卻終將退場，微軟宣布將于明年6月15日停用I
下一篇：2017不能錯過的幾款思維導圖軟件！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML 5 - 交互

您的項目需求