對(duì)于H5這個(gè)名詞大家可能已經(jīng)很熟悉了，筆者對(duì)于這個(gè)詞真是又愛(ài)又恨，愛(ài)的是html5終于被大家接受并如此的重視，恨的是怎么可以把html5簡(jiǎn)稱(chēng)做H5呢，那些這么去簡(jiǎn)稱(chēng)的人知道html5真正的意義嗎，知道html是什么東西嗎，作為一直關(guān)注html5的技術(shù)狗，筆者實(shí)在不能接受這樣的簡(jiǎn)稱(chēng)，html5本身就是簡(jiǎn)寫(xiě)了，還要弄出個(gè)H5來(lái)，不倫不類(lèi)!(以上純屬個(gè)人情感宣泄，如果傷害到某些人，筆者不表示道歉)
本篇原文作者就是些的h5,內(nèi)容還是不錯(cuò)的，忍不住與大家分享，但我必須給HTML5 正名。
然而這不是偶然，而是趨勢(shì)。在具體介紹HTML5 營(yíng)銷(xiāo)之前，我想和大家分享一份eMarketer的數(shù)據(jù)，其中顯示了2012年-2018年品牌在不同媒體渠道的預(yù)算比重：
相比電視、雜志、戶(hù)外廣告等傳統(tǒng)媒體呈逐年下降的趨勢(shì)，品牌營(yíng)銷(xiāo)在數(shù)字和移動(dòng)方面的投入在逐年上升。而且，在所有渠道預(yù)算中移動(dòng)技術(shù)的投入增長(zhǎng)最快，遠(yuǎn)遠(yuǎn)高于其他渠道的增長(zhǎng)。當(dāng)然，這樣的結(jié)論你應(yīng)該不會(huì)感到驚訝，因?yàn)槲覀冊(cè)缫蚜?xí)慣了24小時(shí)手機(jī)陪伴的生活，而品牌最關(guān)注的就是消費(fèi)者“在哪”的問(wèn)題。
據(jù)美國(guó)的調(diào)查數(shù)據(jù)顯示，我們每天要查看手機(jī)150次，44%的人睡覺(jué)都把手機(jī)放在身邊，9%的美國(guó)人承認(rèn)他們?cè)诤龠輹r(shí)使用手機(jī)……毫無(wú)疑問(wèn)，手機(jī)是有史以來(lái)最強(qiáng)大的媒介，從早上醒來(lái)到臨睡前的一秒，這個(gè)幾英寸的屏幕都在和我們“交流”。
顯然，移動(dòng)營(yíng)銷(xiāo)已是大勢(shì)所趨，我們可以看到已經(jīng)廣泛應(yīng)用的簽到、二維碼技術(shù)，正在興起的iBeacon、微信的Wifi連接，還有就是本文將與大家分享的HTML5 技術(shù)。文章有點(diǎn)長(zhǎng)，可能需要費(fèi)些時(shí)間閱讀，全文包括：HTML5 技術(shù)簡(jiǎn)介及其特性，怎么實(shí)現(xiàn)、有哪些應(yīng)用場(chǎng)景，以及如何推廣等內(nèi)容。
Part 1 什么是HTML5 ？
經(jīng)常有朋友找我咨詢(xún)HTML5 的問(wèn)題，但是在和他們溝通的過(guò)程中，我發(fā)現(xiàn)很多人對(duì)HTML5 的理解都是停留在用戶(hù)層面，邀請(qǐng)函、小游戲、品牌展示、抽獎(jiǎng)等等。其實(shí)如果上升到營(yíng)銷(xiāo)層面的話(huà)，僅在用戶(hù)層面去思考是遠(yuǎn)遠(yuǎn)不夠的，因?yàn)槿魏蝹鞑ザ家紤]有效性的問(wèn)題，如果100w pv帶來(lái)的只是刷屏效果，而對(duì)品牌帶不來(lái)任何有效轉(zhuǎn)化，這樣的傳播顯然是不成功的。
對(duì)于事物的理解，如果不能從多個(gè)角度去分析，我們很難跳出原有的思考框架去看問(wèn)題。因此，這篇文章我想以更原始的角度，從H5這項(xiàng)技術(shù)本身為出發(fā)點(diǎn)去闡述；事實(shí)上互聯(lián)網(wǎng)技術(shù)的發(fā)展本質(zhì)上也是需求驅(qū)動(dòng)的，程序語(yǔ)言其實(shí)是高于應(yīng)用層面的產(chǎn)品。以下的內(nèi)容希望不會(huì)太晦澀，也希望能對(duì)你有所啟發(fā)。
簡(jiǎn)單來(lái)說(shuō)，HTML5 就是一種高級(jí)網(wǎng)頁(yè)技術(shù)，我們平時(shí)看到那些邀請(qǐng)函、小游戲都是HTML5 網(wǎng)頁(yè)，確切來(lái)說(shuō)叫HTML 5（國(guó)外目前沒(méi)有H5的叫法），它跟我們平時(shí)上網(wǎng)看到的那些網(wǎng)頁(yè)本質(zhì)上沒(méi)有任何區(qū)別，只不過(guò)大家普遍接受的那個(gè)網(wǎng)頁(yè)技術(shù)版本是HTML4，而這個(gè)版本是在1997年發(fā)布的。
什么是HTML，我這里簡(jiǎn)單解釋一下——想象一下兩個(gè)計(jì)算機(jī)在溝通的場(chǎng)景，A如果要把一個(gè)圖文信息傳給B的時(shí)候，交流過(guò)程中B肯定會(huì)產(chǎn)生這樣的問(wèn)題：你給了我那么多信息，哪些是網(wǎng)頁(yè)標(biāo)題、哪些是正文、哪些又是圖片呢？于是，A和B商量了一個(gè)辦法，用一些符號(hào)來(lái)標(biāo)記不同類(lèi)型的內(nèi)容，而這些標(biāo)記的一整套規(guī)范就是HTML。
比如當(dāng)A要把圖文的標(biāo)題傳給B的時(shí)候，最終給B的表達(dá)是這樣的：
品牌HTML5 營(yíng)銷(xiāo)完全實(shí)戰(zhàn)指南</titile><br />如果設(shè)計(jì)HTML語(yǔ)言的人是中國(guó)人，那表達(dá)就會(huì)是這樣的：<br /><標(biāo)題 始>品牌HTML5 營(yíng)銷(xiāo)完全實(shí)戰(zhàn)指南<標(biāo)題 終><br />所以大家可以看到，HTML 其實(shí)是一項(xiàng)非常人性化的發(fā)明。關(guān)于HTML技術(shù)的詳解有興趣的讀者可以自行查閱，這里我主要跟大家介紹幾個(gè)營(yíng)銷(xiāo)人應(yīng)該關(guān)注的HTML5 特性，它能讓你對(duì)HTML5 能做成什么樣有個(gè)根本的認(rèn)識(shí)。<br />No.1 繪圖功能（Canvas、SVG）<br />這是H5一個(gè)非常重要的特性，你在很多H5中看到的動(dòng)畫(huà)效果就是用H5的繪圖功能做的，比較典型的例子是STC風(fēng)云榜分享的可口可樂(lè)的例子，有興趣可以點(diǎn)擊最后的“閱讀原文”看一下。<br />為了方便理解，你可以將HTML5 的繪圖功能類(lèi)比為Flash，但是唯一的決定性區(qū)別是，F(xiàn)lash做出來(lái)的動(dòng)畫(huà)無(wú)法在移動(dòng)端的瀏覽器中瀏覽，因?yàn)锳dobe早已在2012年就停止了對(duì)移動(dòng)端flash的開(kāi)發(fā)。毫無(wú)疑問(wèn)，未來(lái)的移動(dòng)網(wǎng)頁(yè)游戲和動(dòng)畫(huà)會(huì)是HTML5 的天下。<br />從技術(shù)實(shí)現(xiàn)的角度，HTML5 配合JS（一種程序語(yǔ)言）可以做出任何二維動(dòng)畫(huà)，并且因?yàn)槭蔷W(wǎng)頁(yè)元素，所有元素均可以監(jiān)測(cè)到用戶(hù)點(diǎn)擊的數(shù)據(jù)，也就是說(shuō)你可以知道用戶(hù)在HTML5 動(dòng)畫(huà)網(wǎng)頁(yè)中的所有交互行為。但是，具體到實(shí)際應(yīng)用，我們就要考慮周期、成本，和用戶(hù)體驗(yàn)的問(wèn)題，復(fù)雜的動(dòng)畫(huà)相應(yīng)的制作周期和成本會(huì)提高，同時(shí)也有可能影響加載速度等用戶(hù)體驗(yàn)相關(guān)的問(wèn)題。<br />以下這個(gè)網(wǎng)站是HTML5 繪圖功能的典型例子，非常強(qiáng)大。你可以選擇不同型號(hào)的毛筆、筆觸半徑以及墨水的顏色，整個(gè)繪圖過(guò)程非常順暢，而且還有一個(gè)模擬手握毛筆的人性化設(shè)計(jì)。<br />No.2 三維效果（css3 3D）<br />H5的華麗效果離不開(kāi)一種叫CSS的技術(shù)，形象的說(shuō)，如果把HTML5比作漫畫(huà)的素描稿，CSS就是上色用的，相當(dāng)于word界面上方的格式工具欄，如果沒(méi)有CSS我們看到的HTML5 網(wǎng)頁(yè)就只能以“素顏”見(jiàn)人了。如果你熟悉互聯(lián)網(wǎng)技術(shù)的命名規(guī)則你應(yīng)該能知道css3就是CSS的升級(jí)版本。<br />在css3中有個(gè)非?？岬墓δ苁侨S渲染，也就說(shuō)HTML5 中能做出3D動(dòng)畫(huà)甚至3D游戲。目前我們看到的H5中css3 3D的應(yīng)用較少，這個(gè)也許會(huì)是下一個(gè)營(yíng)銷(xiāo)類(lèi)HTML5 應(yīng)用的熱點(diǎn)，建議大家持續(xù)關(guān)注。<br />下面這兩個(gè)網(wǎng)頁(yè)游戲就是用HTML5 +css3 3D做的，第一個(gè)是俄羅斯方塊的3D版，想象一下在三維的空間里玩俄羅斯方塊是什么感覺(jué)，喜歡挑戰(zhàn)空間想象力的朋友可以試一下；第二個(gè)游戲是3D版坦克大戰(zhàn)，非常精致耐玩的游戲，一句話(huà)評(píng)價(jià)就是“根本停不下來(lái)”。<br /><p>No.3 離線(xiàn)存儲(chǔ)（HTML5 Web Storage）</p><br />HTML5 的另一個(gè)重要特性就是離線(xiàn)存儲(chǔ)，它能將用戶(hù)的資源文件保存在本地，這樣在頁(yè)面加載的時(shí)候網(wǎng)頁(yè)能使用本地資源，從而實(shí)現(xiàn)離線(xiàn)狀態(tài)下訪(fǎng)問(wèn)網(wǎng)頁(yè)應(yīng)用。舉個(gè)例子，通過(guò)離線(xiàn)存儲(chǔ)，你可以在沒(méi)有網(wǎng)絡(luò)的情況下閱讀公眾號(hào)的文章（當(dāng)然這只是技術(shù)上可行，微信目前沒(méi)有此功能）。<br />當(dāng)然離線(xiàn)存儲(chǔ)能容納的數(shù)據(jù)量是有限制，跟瀏覽器有關(guān)，目前Chrome支持5M。大家或多或少都知道cookie這個(gè)東西，它也是記錄用戶(hù)瀏覽數(shù)據(jù)的，比如百度那些根據(jù)你的搜索習(xí)慣給你推薦的廣告就是這種技術(shù)實(shí)現(xiàn)的，不過(guò)它的容量是4k。<br />技術(shù)細(xì)節(jié)大家可以忽略，但是關(guān)于離線(xiàn)存儲(chǔ)這個(gè)功能，大家可以發(fā)揮想象——假設(shè)離線(xiàn)存儲(chǔ)的容量是100個(gè)G甚至更多，瀏覽器就變成了一個(gè)超級(jí)應(yīng)用入口，所有網(wǎng)頁(yè)應(yīng)用都具備離線(xiàn)存儲(chǔ)和在線(xiàn)瀏覽的功能，這時(shí)候在線(xiàn)Office、在線(xiàn)記事本甚至在線(xiàn)PhotoShop都可以實(shí)現(xiàn)，我們的電腦只需要裝一個(gè)程序——瀏覽器。在這個(gè)假設(shè)中，瀏覽器將干掉Windows，一切用戶(hù)操作都在云端進(jìn)行！稍微有點(diǎn)難理解，大家可以仔細(xì)體會(huì)。<br />以下是運(yùn)用離線(xiàn)存儲(chǔ)的一個(gè)例子，這個(gè)提供在線(xiàn)便簽功能的網(wǎng)站無(wú)論有沒(méi)有網(wǎng)絡(luò)都可以訪(fǎng)問(wèn)，并且你記錄的所有便簽都會(huì)保存下來(lái)，很實(shí)用的網(wǎng)站，有興趣可以試一下。<br />科普先告一段落，雖然HTML5 有很多特性，但因?yàn)槠邢?，本文只能介紹跟營(yíng)銷(xiāo)有關(guān)的內(nèi)容，其他的特性很多是程序猿的事，如果大家反饋還要了解更多，我可以再寫(xiě)一篇具體介紹。<br />Part 2 HTML5 能怎么玩？<br />在了解完H5的一些基礎(chǔ)知識(shí)后，相信大家最關(guān)心的還是應(yīng)用層面的問(wèn)題——H5能做什么，有哪些玩法？接下來(lái)我將列舉一些典型的例子和大家探討：<br />幻燈片式玩法<br />以下這個(gè)特斯拉的例子相信很多人都看過(guò)，精美的圖片設(shè)計(jì)+簡(jiǎn)單的翻頁(yè)效果，在我的印象中大概3、4月份看到特斯拉這個(gè)HTML5 的時(shí)候，大家還不知道原來(lái)微信營(yíng)銷(xiāo)可以這么玩，記得那時(shí)候我們看到之后就在一周內(nèi)做了一個(gè)類(lèi)似的HTML5 ，用于STC的品牌展示。當(dāng)然，在這之后HTML5 就千樹(shù)萬(wàn)樹(shù)梨花開(kāi)了。<br />這是H5最早期也是最典型的玩法，因?yàn)楹?jiǎn)單、實(shí)用，所以至今還很流行。其效果就是簡(jiǎn)單的圖片展示&翻頁(yè)交互，最終整體的表現(xiàn)很像幻燈片展示。<br />其實(shí)幻燈片式的HTML5 現(xiàn)在已經(jīng)出現(xiàn)了很多在線(xiàn)制作軟件供大家使用，所以制作成本在現(xiàn)在看來(lái)幾乎是等于零的，而在之前這樣一個(gè)應(yīng)用的開(kāi)發(fā)可能要將近一萬(wàn)（再一次見(jiàn)證了互聯(lián)網(wǎng)思維的破壞力）。當(dāng)然啦，這對(duì)于品牌主來(lái)說(shuō)是一個(gè)好事，因?yàn)楹芏鄷r(shí)候這種簡(jiǎn)單的展示已經(jīng)能滿(mǎn)足需求了，不需要花不必要的錢(qián)。<br />★ 應(yīng)用場(chǎng)景<br />由于制作簡(jiǎn)單，周期短，這種HTML5 展現(xiàn)形式適用于頻繁、小型的需求。用在線(xiàn)編輯器的話(huà)，不需要任何開(kāi)發(fā)，你只需要要配備一名設(shè)計(jì)和文案。<br />總結(jié)得不全，幻燈片式HTML5 可能有以下的應(yīng)用場(chǎng)景：<br />1、定期發(fā)布的內(nèi)容，幾乎零預(yù)算。這些內(nèi)容相對(duì)而言比較常規(guī)，但是有時(shí)微信圖文又無(wú)法達(dá)到理想的效果，通過(guò)H5的形式會(huì)更易于傳播，當(dāng)然前提是要有好的設(shè)計(jì)。比如數(shù)據(jù)報(bào)告、頻繁上線(xiàn)的新產(chǎn)品或功能、小型線(xiàn)下活動(dòng)邀請(qǐng)、活動(dòng)相冊(cè)等等。<br />2、結(jié)合熱點(diǎn)的營(yíng)銷(xiāo)，周期極短。這種情況下，時(shí)效性是非常重要的，如果開(kāi)發(fā)一個(gè)HTML5 用了半個(gè)月，熱點(diǎn)想必也結(jié)冰了。所以，應(yīng)該以最快的速度推出才是明智的選擇，而這時(shí)候引起廣泛傳播的關(guān)鍵就在于文案和設(shè)計(jì)。<br />此外，大家不要輕視這種短頻快的傳播，有時(shí)候它要比很多大投入的傳播來(lái)得有效。沒(méi)有人能完全掌握受眾的興趣點(diǎn)，所以一次大投入的傳播不一定就能出效果，但是多次熱點(diǎn)傳播出效果的概率從統(tǒng)計(jì)學(xué)的角度也要高一些。如上文所述，我們可以實(shí)現(xiàn)用戶(hù)在HTML5 中所有交互行為的監(jiān)測(cè)，因此，如果短頻快的傳播能配合有效的數(shù)據(jù)監(jiān)測(cè)，便可以進(jìn)行持續(xù)優(yōu)化，降低不確定性。<br />交互式動(dòng)畫(huà)<br />可口可樂(lè)這個(gè)案例在之前的風(fēng)云榜中推薦過(guò)，是運(yùn)用HTML5 繪圖功能的典型例子。當(dāng)然這里面的交互還是比較簡(jiǎn)單的，只不過(guò)它基本體現(xiàn)了交互式動(dòng)畫(huà)的感覺(jué)。整個(gè)可口可樂(lè)的時(shí)間軸是隨著用戶(hù)向上滑動(dòng)頁(yè)面“繪制”出來(lái)的。<br />其實(shí)除了這種敘事型的HTML5 動(dòng)畫(huà)，我們能看到的大多數(shù)HTML5 游戲也都都屬于這一類(lèi)，比如神經(jīng)貓、打企鵝、2048等等。最近也有一個(gè)比較火的HTML5 游戲叫“財(cái)務(wù)包子鋪”，在這個(gè)游戲中用戶(hù)扮演包子鋪的創(chuàng)業(yè)老板，在事業(yè)發(fā)展的不同階段做出經(jīng)營(yíng)決策，最終登上人生巔峰。雖然游戲中植入了赤裸裸的產(chǎn)品推廣（知乎的一本新書(shū)），但最后還是取得了3天破300萬(wàn)PV的成績(jī)。<br />這些類(lèi)型各異的HTML5 應(yīng)用，本質(zhì)上都是基于H5的動(dòng)畫(huà)技術(shù)做的。它們所涉及的相關(guān)動(dòng)畫(huà)技術(shù)主要有HTML5 的Canvas/SVG，以及JS、css3，目前大部分HTML5 的動(dòng)畫(huà)效果還是用JS實(shí)現(xiàn)的，實(shí)現(xiàn)的效果類(lèi)似PPT中的動(dòng)畫(huà)功能，只能實(shí)現(xiàn)元素的平移、旋轉(zhuǎn)、隱現(xiàn)等等。事實(shí)上通過(guò)JS+Canvas/SVG+css3可以實(shí)現(xiàn)非常復(fù)雜的交互式動(dòng)畫(huà)，最直觀(guān)的就是HTML5 游戲，比如神經(jīng)貓，還有上文提到的3D版坦克大戰(zhàn)。<br />那么，HTML5 到底能實(shí)現(xiàn)什么樣的動(dòng)畫(huà)效果呢？我想這應(yīng)該是大家在做HTML5 時(shí)最頭疼的問(wèn)題，因?yàn)椴恢滥茏龀墒裁礃樱阋簿筒恢缽暮蜗率?。所以下面我給大家介紹一個(gè)網(wǎng)站：http://fff.cmiscm.com/，在這個(gè)網(wǎng)站中，你幾乎能看到所有HTML5 能夠?qū)崿F(xiàn)的動(dòng)畫(huà)效果，下次如果需要做HTML5 的時(shí)候就可以跟開(kāi)發(fā)說(shuō)“你看，就是這個(gè)效果”。<br />以下是該網(wǎng)站上幾個(gè)示例的截圖：<br />抓綿羊：你可以在奔跑的羊群中隨意抓取并放到任意位置<br />種樹(shù)：在屏幕任意地方點(diǎn)擊都會(huì)在相應(yīng)的地方種一顆樹(shù)，你可以看到樹(shù)的生長(zhǎng)過(guò)程。<br />3D罐頭：css3 3D的好展示，你可以看到三維罐頭的任意角度<br />照片處理：你可以把照片藝術(shù)化，圖示為處理過(guò)程截圖<br />★ 應(yīng)用場(chǎng)景<br />交互式動(dòng)畫(huà)類(lèi)型的HTML5 制作周期和成本比較高，需要提前規(guī)劃。除了創(chuàng)意、文案、設(shè)計(jì)這些以外，開(kāi)發(fā)周期較長(zhǎng)，優(yōu)質(zhì)的HTML5 大約在兩周到4周左右，也有可能更長(zhǎng)。<br />這種類(lèi)型的HTML5 要找靠譜的供應(yīng)商，因?yàn)閺?fù)雜交互做出來(lái)的效果，在用戶(hù)看來(lái)只有好和垃圾兩種層次，所以慎重。當(dāng)然如果你自己要花血本自建團(tuán)隊(duì)也不是不行——產(chǎn)品經(jīng)理、設(shè)計(jì)師、前端工程師、PHP工程師（涉及表單、登錄、評(píng)論等元素的時(shí)候需要），各一枚就夠了。<br />以下是總結(jié)的應(yīng)用場(chǎng)景：<br />1、中小型活動(dòng)/品牌事件的傳播，預(yù)算不多、周期較短。這種情況一般就是某些新品發(fā)布、企業(yè)招聘、公關(guān)事件、中型會(huì)議等的傳播。此時(shí)你需要權(quán)衡周期和成本的因素。<br />一般來(lái)說(shuō)一周以?xún)?nèi)的時(shí)間不太可能做出優(yōu)質(zhì)的HTML5 ，這時(shí)候你可能要考慮幻燈片式的簡(jiǎn)易開(kāi)發(fā)或者參考已有的作品，然后著重從設(shè)計(jì)和文案上下功夫。如果有一到兩周的時(shí)間可以嘗試做一些輕交互的HTML5 ，除了常見(jiàn)的那些平移、縮放、淡入淡出的動(dòng)效以外，在這里我比較建議大家嘗試一下css3 3D的效果，這是一個(gè)趨勢(shì)，當(dāng)然成本也會(huì)相應(yīng)的上升一個(gè)量級(jí)。<br />2、大型活動(dòng)/品牌事件的傳播，預(yù)算充足、計(jì)劃性強(qiáng)、周期較長(zhǎng)。一般大家看到的那些美輪美奐并且極具傳播性的HTML5 基本上都屬于這一類(lèi)，比如上文提到的可口可樂(lè)“分享快樂(lè)128年”，以及我們之前分享過(guò)的潘婷“一封來(lái)自1947年的明信片”。像這一類(lèi)在美學(xué)、交互和故事性上都表現(xiàn)突出的案例，都不是一兩周的功夫能做出來(lái)的，不計(jì)算創(chuàng)意、設(shè)計(jì)和文案的時(shí)間，光是開(kāi)發(fā)和調(diào)試也要小一個(gè)月。<br />因此大家看到好的作品要理性看待，不能覺(jué)得很?；蛘呃习逭f(shuō)好就想著也做一個(gè)，其實(shí)像這種交互與故事一體的應(yīng)用，如果時(shí)間不夠只完成一半，整個(gè)HTML5 基本是沒(méi)法用的，也就是所有之前的投入都是無(wú)用功。這也是為什么有很多供應(yīng)商無(wú)法在指定時(shí)間交付的原因，可能一開(kāi)始就在做一個(gè)完不成的任務(wù)。<br />功能型 HTML5<br />看一下以下的兩個(gè)例子，第一個(gè)是百度針對(duì)地鐵漲價(jià)做的HTML5 ，它可以計(jì)算你每天坐地鐵要多少錢(qián)并且實(shí)時(shí)顯示大家的評(píng)論；第二個(gè)是STC的社交移動(dòng)風(fēng)云榜，很簡(jiǎn)單，就是精品HTML5 的展示：<br />這兩個(gè)H5都有一個(gè)特點(diǎn)，除了針對(duì)受眾的熱點(diǎn)內(nèi)容傳播以外，它們很像一個(gè)“供用戶(hù)重復(fù)使用”的產(chǎn)品，這就是所謂的功能型H5。其實(shí)大家看到風(fēng)云榜可能會(huì)覺(jué)得它只是一個(gè)再簡(jiǎn)單不過(guò)的網(wǎng)頁(yè)，但如果從它滿(mǎn)足用戶(hù)需求并產(chǎn)生重復(fù)“使用”行為的角度，它其實(shí)是一個(gè)產(chǎn)品，事實(shí)上我們從一開(kāi)始就是把它當(dāng)產(chǎn)品來(lái)運(yùn)營(yíng)的，關(guān)注Social Talent的朋友可能會(huì)有所感受——每周更新、定期群發(fā)推薦HTML5 的圖文、欄目更新通知等等。<br />功能型HTML5 的獨(dú)特價(jià)值在于，除了具備傳播性以外，它通過(guò)用戶(hù)的重復(fù)使用行為使得HTML5 的傳播是一個(gè)持續(xù)不斷的過(guò)程，這一點(diǎn)是一般的HTML5 所不具備的。風(fēng)云榜首次發(fā)布時(shí)轉(zhuǎn)發(fā)6w+多，目前每月的訪(fǎng)問(wèn)量都在10w左右，不算多，但是給我們帶來(lái)的流量轉(zhuǎn)化都是精準(zhǔn)的，關(guān)注我們的大多還是從事?tīng)I(yíng)銷(xiāo)相關(guān)職業(yè)的朋友。<br />個(gè)人覺(jué)得web應(yīng)用肯定是未來(lái)發(fā)展的方向，就像上文所說(shuō)的，很有可能未來(lái)的操作系統(tǒng)將被瀏覽器所取代，服務(wù)和應(yīng)用將進(jìn)入完全的云世界。當(dāng)然距離這種假設(shè)還比較遠(yuǎn)，但唯一大家可以放心遵守的原則，就是聚焦于用戶(hù)需求。<br />我所說(shuō)的功能型HTML5 ，是同時(shí)聚焦于用戶(hù)需求并且注重傳播性的H5輕應(yīng)用，也就是在設(shè)計(jì)HTML5 的時(shí)候除了考慮傳播的問(wèn)題以外，也要思考如何把它變成一個(gè)持續(xù)運(yùn)營(yíng)的產(chǎn)品。這里面其實(shí)是思考角度的問(wèn)題，從“我要傳播什么”到“我希望用戶(hù)傳播什么”的轉(zhuǎn)變。<br />★ 應(yīng)用場(chǎng)景<br />輕交互重功能的功能型HTML5 制作周期較短、成本也不高，成功的關(guān)鍵不在于酷炫的交互，而在于用戶(hù)需求的把握以及后續(xù)的運(yùn)營(yíng)。<br />因此，這一類(lèi)HTML5 需要的是一名高水平的的產(chǎn)品經(jīng)理，而以設(shè)計(jì)、開(kāi)發(fā)為輔。功能型HTML5 目前沒(méi)有太多成熟的例子，不過(guò)我認(rèn)為離線(xiàn)存儲(chǔ)的技術(shù)可能會(huì)是功能型HTML5 的應(yīng)用重點(diǎn)，大家可以關(guān)注一下。<br />以下是總結(jié)的應(yīng)用場(chǎng)景：<br />1、品牌賬號(hào)的粉絲運(yùn)營(yíng)。功能型HTML5 由于具備一定的產(chǎn)品特性，其大的價(jià)值就是提高粉絲活躍度和忠誠(chéng)度。我們需要根據(jù)本身品牌的形象定位以及受眾的特性設(shè)計(jì)功能型HTML5 ，要將品牌或產(chǎn)品的功能性特征抽象到生活方式或者精神追求的層次。<br />舉個(gè)例子，賣(mài)洗手液的可以抽象為健康生活方式，設(shè)計(jì)一個(gè)改善生活健康狀態(tài)的功能型HTML5 ；服裝品牌可以抽象為追求時(shí)尚前沿，設(shè)計(jì)一個(gè)定期更新時(shí)尚潮流資訊的功能型HTML5 。事實(shí)上，以粉絲需求為中心的功能型HTML5 將潛移默化的提升品牌影響力，在提升忠誠(chéng)度的同時(shí)帶來(lái)持續(xù)的口碑傳播。<br />2、結(jié)合熱點(diǎn)內(nèi)容的品牌傳播。這種類(lèi)型的傳播是最常見(jiàn)的，但是往往很多結(jié)合熱點(diǎn)的HTML5 傳播都是一次性?shī)蕵?lè)消費(fèi)，大家看過(guò)就忘了。其實(shí)如果能從用戶(hù)需求挖掘和產(chǎn)品運(yùn)營(yíng)的角度去思考，許多針對(duì)熱點(diǎn)的HTML5 傳播都有很大提升的空間。<br />近來(lái)大家都喜歡報(bào)道習(xí)大大和彭麻麻的“私生活”或者非正式領(lǐng)導(dǎo)會(huì)晤之類(lèi)的，如果有人能做一個(gè)類(lèi)似微博“學(xué)習(xí)粉絲團(tuán)”那樣，定期更新“學(xué)習(xí)資訊”的功能型HTML5 ，想來(lái)必火。<br />Part 3 HTML5 如何推廣？<br />實(shí)際上HTML5 可以推廣的渠道有限，不像App的推廣有各類(lèi)應(yīng)用商店的流量。關(guān)于這個(gè)問(wèn)題可以說(shuō)的不多，我僅針對(duì)性的提出幾點(diǎn)建議：<br />1、從用戶(hù)角度挖掘HTML5 的價(jià)值點(diǎn)，寫(xiě)一篇軟文。通過(guò)圖文群發(fā)來(lái)推廣HTML5 無(wú)疑是最重要的方式，但是如果只是簡(jiǎn)單硬性推廣，比如宣布今天創(chuàng)新互聯(lián)上線(xiàn)了一個(gè)高大上云云的HTML5 ，然后就讓用戶(hù)點(diǎn)擊“閱讀原文”自己看，顯然這種新聞通稿式的推廣不會(huì)有太好的效果。<br />一個(gè)好的HTML5 一定具備打動(dòng)用戶(hù)的價(jià)值點(diǎn)，從一個(gè)角度切入寫(xiě)一篇軟文，無(wú)論通過(guò)投稿的方式還是大號(hào)轉(zhuǎn)發(fā)都能給你帶來(lái)意想不到的傳播效果。投入再大再精彩的HTML5 ，如果沒(méi)有好的推廣就只能孤芳自賞，所以哪怕是留點(diǎn)推廣預(yù)算也是值得的。<br />2、盡你所能利用所有能推廣HTML5 的渠道。目前比較常用的方式：通過(guò)公眾號(hào)的圖文群發(fā)推廣、微信群推廣、線(xiàn)下二維碼推廣，以及前面提到的KOL轉(zhuǎn)發(fā)和投稿等。這里主要說(shuō)一下有關(guān)微信群的幾點(diǎn)建議。<br />首先，你需要列出所有你能用到的資源，并發(fā)動(dòng)內(nèi)部人員轉(zhuǎn)發(fā)，當(dāng)然前提是HTML5 做得很棒。值得注意的一點(diǎn)是，每個(gè)微信群其實(shí)都有自己的定位——工作、生活或者閑聊扯淡，所以為了提升打開(kāi)率可以適當(dāng)?shù)臑椴煌奈⑿湃憾ㄖ妻D(zhuǎn)發(fā)的文案，比如以上文的STC風(fēng)云榜為例，對(duì)于工作學(xué)習(xí)為主的群可以是“品牌HTML5 做成這樣也是蠻拼的！”，如果是更加生活化的群就可以是“史上最好玩的HTML5 應(yīng)用，根本停不下來(lái)”之類(lèi)的，但是如果H5的調(diào)性實(shí)在和微信群的定位不搭，建議不要造成打擾。<br />3、充分利用“閱讀原文”和自定義菜單。由于微信的限制，圖文中唯一能跳轉(zhuǎn)的鏈接就是“閱讀原文”。關(guān)于如何利用好“閱讀原文”有三點(diǎn)小tips：<br />不要浪費(fèi)每一篇圖文的“閱讀原文”，可能的話(huà)對(duì)于每一篇圖文用不同的文案引導(dǎo)點(diǎn)擊；<br />如果你的目的是推廣HTML5 ，不要在閱讀原文的提示之后或者閱讀原文引導(dǎo)和正文之間插播公眾號(hào)的廣告；<br />通過(guò)字體或者顏色的視覺(jué)跳躍引起讀者的注意，而且不要長(zhǎng)期使用同一個(gè)格式，因?yàn)楫?dāng)用戶(hù)習(xí)慣了固定的格式之后會(huì)不自覺(jué)的忽略這些內(nèi)容。<br /><p>此外，自定義菜單也是需要充分利用的功能，一般來(lái)說(shuō)新增粉絲都會(huì)瀏覽一遍公眾號(hào)的菜單，根據(jù)我們的數(shù)據(jù)監(jiān)測(cè)，平均每個(gè)菜單項(xiàng)會(huì)有20%的新增粉絲點(diǎn)擊。假如你的賬號(hào)每天能有500個(gè)粉絲增長(zhǎng)，就會(huì)有100個(gè)人以上點(diǎn)擊了菜單的某一項(xiàng)，因?yàn)檫@是持續(xù)進(jìn)行的主動(dòng)行為，由此為HTML5 帶來(lái)的瀏覽量可能比圖文群發(fā)還要高。</p><br /><p>關(guān)鍵詞：創(chuàng)新互聯(lián),成都品牌<a ><strong>網(wǎng)站建設(shè)公司</strong></a>,<a ><strong>網(wǎng)站制作</strong>公司</a>,<a ><strong>重慶網(wǎng)站建設(shè)</strong></a>,<a href="http://www.rwnh.cn/"><strong>網(wǎng)站設(shè)計(jì)</strong></a>,網(wǎng)站建設(shè),手機(jī)<a ><strong>網(wǎng)站開(kāi)發(fā)</strong></a></p> <p>
本文標(biāo)題：<a href="http://www.rwnh.cn/news/170259.html">HTML5品牌營(yíng)銷(xiāo)實(shí)戰(zhàn)指南</a>
<br>
文章源于：<a href="http://www.rwnh.cn/news/170259.html">http://www.rwnh.cn/news/170259.html</a>
</p>
<p>
<a href="http://www.rwnh.cn/" target="_blank">成都網(wǎng)站建設(shè)公司</a>_<a target="_blank">創(chuàng)新互聯(lián)</a>，為您提供<a href="http://www.rwnh.cn/news/yidongjianshe/">移動(dòng)網(wǎng)站建設(shè)</a>、<a href="http://www.rwnh.cn/news/mbxdh/">面包屑導(dǎo)航</a>、<a href="http://www.rwnh.cn/news/keywordsseo/">關(guān)鍵詞優(yōu)化</a>、<a href="http://www.rwnh.cn/news/jingtai/">靜態(tài)網(wǎng)站</a>、<a href="http://www.rwnh.cn/news/xiangyingshi/">響應(yīng)式網(wǎng)站</a>、<a href="http://www.rwnh.cn/news/xiaochengxu/">小程序開(kāi)發(fā)</a> </p>
<p class="adpic">
<a href="http://www.rwnh.cn/service/ad.html" target="_blank" class="ad">廣告</a>
<a href="" target="_blank" class="adimg"><img src=""></a>
</p>
<p class="copy">
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：
<a href="http://www.rwnh.cn/" target="_blank">創(chuàng)新互聯(lián)</a>
</p>
</div>
<div id="rbfrvtb" class="newsmorelb">
<p>猜你還喜歡下面的內(nèi)容</p>
<ul>
<li>
<a href="/news/170254.html">強(qiáng)勢(shì)品牌建立 網(wǎng)站推廣企業(yè)三力闖市場(chǎng)</a>
<span>2022-06-21</span>
</li><li>
<a href="/news/170252.html">原創(chuàng)文章那點(diǎn)事兒，你知嗎？</a>
<span>2022-06-21</span>
</li><li>
<a href="/news/170250.html">字體與排版應(yīng)用指南</a>
<span>2022-06-21</span>
</li><li>
<a href="/news/170248.html">網(wǎng)站優(yōu)化的四種特性</a>
<span>2022-06-21</span>
</li><li>
<a href="/news/170240.html">成都軟件公司報(bào)價(jià)應(yīng)該怎么看</a>
<span>2022-06-21</span>
</li><li>
<a href="/news/170238.html">成都企業(yè)手機(jī)網(wǎng)站有必要制作嗎？</a>
<span>2022-06-21</span>
</li><li>
<a href="/news/170236.html">網(wǎng)站需要備案嗎？</a>
<span>2022-06-21</span>
</li><li>
<a href="/news/170234.html">如何做好手機(jī)網(wǎng)站seo優(yōu)化?</a>
<span>2022-06-21</span>
</li> </ul>
</div>
</div>
<div id="rpbdxfx" class="col-lg-3 noneb">
<a href="http://www.rwnh.cn/waimao.html" title="外貿(mào)網(wǎng)站制作" target="_blank"><img src="/upload/news/waimaowangzhanjianshe.png" alt="外貿(mào)網(wǎng)站制作" class="img-responsive"></a>
<div id="llvhrjx" class="bkright">
<p><a href="http://www.rwnh.cn/news/jianshe/">網(wǎng)站建設(shè)知識(shí)</a></p>
<ul>
<li>
<a class="text_overflow" href="/news/170255.html">Web前端構(gòu)建工具版本號(hào)管理方案思考</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170249.html">選擇網(wǎng)站域名常用哪些技巧?</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170239.html">企業(yè)網(wǎng)站如何防范勒索網(wǎng)站攻擊？</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170237.html">SEO優(yōu)化時(shí)如何準(zhǔn)確把握關(guān)鍵詞密度?</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170235.html">淺談百度蜘蛛IP的意義</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170233.html">慎重的使用向右的指向性符號(hào)</a>
<span>2022-06-21</span>
</li> <li>
<a class="text_overflow" href="/news/170232.html">交互式網(wǎng)頁(yè)設(shè)計(jì)之新手入門(mén)手冊(cè)</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170231.html">企業(yè)衡量網(wǎng)站SEO優(yōu)化工作成果好壞的標(biāo)準(zhǔn)具體是哪些？</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170230.html">網(wǎng)站推廣企業(yè)實(shí)施品牌戰(zhàn)略，受益良多!</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170229.html">創(chuàng)新互聯(lián)淺談什么是Web</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170228.html">網(wǎng)頁(yè)設(shè)計(jì)中7個(gè)令人抓狂的錯(cuò)誤</a>
<span>2022-06-21</span>
</li> </ul>
</div>
<div id="rrtpjzx" class="bkright tag">
<p><a href="http://www.rwnh.cn/hangye/" target="_blank">行業(yè)網(wǎng)站建設(shè)</a></p>
<ul>
<li id="xpdzjrz" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="http://www.rwnh.cn/hangye/sdgz/" target="_blank">水電改造</a>
</li><li id="nlfztbz" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="http://www.rwnh.cn/hangye/shipaifang/" target="_blank">石牌坊</a>
</li><li id="vlnhnlr" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="http://www.rwnh.cn/hangye/weilanhulan/" target="_blank">圍欄護(hù)欄</a>
</li><li id="ffzlnvv" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="http://www.rwnh.cn/hangye/gaokongche/" target="_blank">高空作業(yè)車(chē)租賃</a>
</li><li id="vlnptrz" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="http://www.rwnh.cn/hangye/hntjbg/" target="_blank">混凝土攪拌罐</a>
</li><li id="ddpzljr" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="http://www.rwnh.cn/hangye/iso/" target="_blank">iso認(rèn)證</a>
</li><li id="nvxtndb" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="http://www.rwnh.cn/hangye/qchs/" target="_blank">報(bào)廢汽車(chē)回收</a>
</li><li id="nlfrddl" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="http://www.rwnh.cn/hangye/baiwuyu/" target="_blank">白烏魚(yú)</a>
</li> </ul>
</div>
</div>
</div>
<footer>
<div id="ndxbvdd" class="carousel-inner footjz">
<div id="vtpjvbl" class="container">
<i class="icon iconfont zbw"></i>
高品質(zhì)定制 <i class="icon iconfont"></i>
跨終端自動(dòng)兼容 <i class="icon iconfont"></i>
節(jié)約開(kāi)發(fā)成本 <i class="icon iconfont"></i>
開(kāi)發(fā)周期短 <i class="icon iconfont"></i>
一體化服務(wù)
<button type="button" class="btn btn-default btn-lg" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 立即開(kāi)始2800定制網(wǎng)站建設(shè)</button>
<button type="button" class="btn btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 2800定制網(wǎng)站建設(shè)</button>
</div>
</div>
<div id="ffhdxvt" class="carousel-inner bqsy">
<div id="pfzdnnl" class="container">
<div id="fnxtfvl" class="lxfs">
<h4 class="yutelnone">028-86922220 13518219792</h4>
<h4 class="yutelblock"><a href="tel:02886922220">028-86922220</a> <a href="tel:13518219792">13518219792</a></h4>
<a class="btn btn-default" href="tencent://message/?uin=532337155&Site=&Menu=yes" role="button">網(wǎng)站建設(shè)<span>QQ</span>：532337155</a>
<a class="btn btn-default" href="tencent://message/?uin=631063699&Site=&Menu=yes" role="button">營(yíng)銷(xiāo)推廣<span>QQ</span>：631063699</a>
<a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" role="button">網(wǎng)站制作<span>QQ</span>：532337155</a>
<a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=631063699&version=1&src_type=web&web_src=oicqzone.com" role="button">營(yíng)銷(xiāo)推廣<span>QQ</span>：631063699</a>
<a class="btn btn-default nonea" href="tencent://message/?uin=1683211881&Site=&Menu=yes" role="button">售后QQ：1683211881</a>
<div id="xvxlnlb" class="dz">專(zhuān)注：
<a target="_blank">網(wǎng)站設(shè)計(jì)制作</a><a target="_blank">服務(wù)器托管</a><a target="_blank">定制網(wǎng)站建設(shè)</a><a target="_blank">成都網(wǎng)站設(shè)計(jì)</a><a target="_blank">成都制作網(wǎng)站</a> <address>地址：成都太升南路288號(hào)錦天國(guó)際A幢10樓</address>
</div>
</div>
<div id="pxrlflb" class="bzdh dz"><img src="../imges/bottom_logo.png" alt="創(chuàng)新互聯(lián)">
<p><a href="http://www.rwnh.cn/menu.html" target="_blank">成都創(chuàng)新互聯(lián)科技有限公司</a><br>
Tel：400-028-6601（7x24h）</p></div>
</div>
</div>
</footer>
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://www.rwnh.cn/" title="中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线">中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线</a>
<div class="friend-links">
</div>
</div>
</footer>
<a href="http://www.yygd.com.cn" target="_blank">衡山县</a>|
<a href="http://www.lkej.cn" target="_blank">安福县</a>|
<a href="http://www.cxxs.com.cn" target="_blank">肥东县</a>|
<a href="http://www.lkgs.com.cn" target="_blank">平舆县</a>|
<a href="http://www.qhdqc.com.cn" target="_blank">红河县</a>|
<a href="http://www.zbyyyy.cn" target="_blank">醴陵市</a>|
<a href="http://www.qhdqc.com.cn" target="_blank">荔浦县</a>|
<a href="http://www.ctrg.com.cn" target="_blank">宿松县</a>|
<a href="http://www.schcjc.cn" target="_blank">黄大仙区</a>|
<a href="http://www.tshdcy.cn" target="_blank">禹城市</a>|
<a href="http://www.fajue.net.cn" target="_blank">高邮市</a>|
<a href="http://www.wslqkj.cn" target="_blank">襄汾县</a>|
<a href="http://www.jkkkj.cn" target="_blank">贵阳市</a>|
<a href="http://www.hyjsp.cn" target="_blank">乃东县</a>|
<a href="http://www.grtl.net.cn" target="_blank">涞水县</a>|
<a href="http://www.whhqc.com.cn" target="_blank">沈阳市</a>|
<a href="http://www.hnjsll.cn" target="_blank">十堰市</a>|
<a href="http://www.yacm.cn" target="_blank">沅江市</a>|
<a href="http://www.renchuntang.cn" target="_blank">二手房</a>|
<a href="http://www.ehgy.cn" target="_blank">峡江县</a>|
<a href="http://www.hjbhj.cn" target="_blank">杂多县</a>|
<a href="http://www.dgzdm.cn" target="_blank">辽中县</a>|
<a href="http://www.cqqyny.cn" target="_blank">铁岭县</a>|
<a href="http://www.yingteer.net.cn" target="_blank">博野县</a>|
<a href="http://www.yututeng.cn" target="_blank">延津县</a>|
<a href="http://www.bdttw.cn" target="_blank">墨脱县</a>|
<a href="http://www.msmjt.com.cn" target="_blank">邢台市</a>|
<a href="http://www.quebanwang.cn" target="_blank">灯塔市</a>|
<a href="http://www.emars.com.cn" target="_blank">尼玛县</a>|
<a href="http://www.zbyyyy.cn" target="_blank">九龙坡区</a>|
<a href="http://www.soxx.com.cn" target="_blank">睢宁县</a>|
<a href="http://www.gzhyjt.net.cn" target="_blank">文山县</a>|
<a href="http://www.ghzm.com.cn" target="_blank">台南市</a>|
<a href="http://www.guqidapengu.cn" target="_blank">五莲县</a>|
<a href="http://www.gztyz.cn" target="_blank">汕尾市</a>|
<a href="http://www.apcg.cn" target="_blank">彩票</a>|
<a href="http://www.shxqg.cn" target="_blank">新昌县</a>|
<a href="http://www.dzkrt.cn" target="_blank">万安县</a>|
<a href="http://www.dashihua.cn" target="_blank">霸州市</a>|
<a href="http://www.czblj.cn" target="_blank">石屏县</a>|
<a href="http://www.nbpx.com.cn" target="_blank">石狮市</a>|
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="jtxbd" class="pl_css_ganrao" style="display: none;"><var id="jtxbd"></var><thead id="jtxbd"><video id="jtxbd"><pre id="jtxbd"><pre id="jtxbd"></pre></pre></video></thead><dl id="jtxbd"><em id="jtxbd"><th id="jtxbd"><var id="jtxbd"></var></th></em></dl><mark id="jtxbd"></mark><strong id="jtxbd"><legend id="jtxbd"><thead id="jtxbd"><video id="jtxbd"></video></thead></legend></strong><ol id="jtxbd"></ol><label id="jtxbd"><div id="jtxbd"><tt id="jtxbd"><nobr id="jtxbd"></nobr></tt></div></label><label id="jtxbd"><dl id="jtxbd"></dl></label><rp id="jtxbd"><strong id="jtxbd"></strong></rp><optgroup id="jtxbd"><sup id="jtxbd"><dl id="jtxbd"><meter id="jtxbd"></meter></dl></sup></optgroup><form id="jtxbd"><output id="jtxbd"></output></form><th id="jtxbd"><dl id="jtxbd"></dl></th><p id="jtxbd"></p><style id="jtxbd"></style><thead id="jtxbd"><font id="jtxbd"><dfn id="jtxbd"><strike id="jtxbd"></strike></dfn></font></thead><legend id="jtxbd"><legend id="jtxbd"><thead id="jtxbd"><optgroup id="jtxbd"></optgroup></thead></legend></legend><div id="jtxbd"><u id="jtxbd"><strong id="jtxbd"><legend id="jtxbd"></legend></strong></u></div><thead id="jtxbd"></thead><menuitem id="jtxbd"><small id="jtxbd"></small></menuitem><big id="jtxbd"><b id="jtxbd"><listing id="jtxbd"><pre id="jtxbd"></pre></listing></b></big><label id="jtxbd"><dl id="jtxbd"><em id="jtxbd"><label id="jtxbd"></label></em></dl></label><em id="jtxbd"><label id="jtxbd"></label></em><var id="jtxbd"><ol id="jtxbd"><progress id="jtxbd"><track id="jtxbd"></track></progress></ol></var><small id="jtxbd"><dfn id="jtxbd"></dfn></small><tt id="jtxbd"><u id="jtxbd"><legend id="jtxbd"><address id="jtxbd"></address></legend></u></tt><output id="jtxbd"><strong id="jtxbd"><thead id="jtxbd"><small id="jtxbd"></small></thead></strong></output><sub id="jtxbd"><rp id="jtxbd"></rp></sub><sup id="jtxbd"></sup><optgroup id="jtxbd"><sup id="jtxbd"><big id="jtxbd"><dfn id="jtxbd"></dfn></big></sup></optgroup><u id="jtxbd"></u><rp id="jtxbd"><legend id="jtxbd"></legend></rp><big id="jtxbd"></big><tt id="jtxbd"></tt><strong id="jtxbd"><ol id="jtxbd"><progress id="jtxbd"><track id="jtxbd"></track></progress></ol></strong><track id="jtxbd"></track><em id="jtxbd"></em><pre id="jtxbd"><sub id="jtxbd"><form id="jtxbd"><p id="jtxbd"></p></form></sub></pre><sup id="jtxbd"></sup><th id="jtxbd"><i id="jtxbd"><meter id="jtxbd"><b id="jtxbd"></b></meter></i></th><style id="jtxbd"></style><video id="jtxbd"></video><ol id="jtxbd"><span id="jtxbd"><small id="jtxbd"><dfn id="jtxbd"></dfn></small></span></ol><mark id="jtxbd"><output id="jtxbd"><ol id="jtxbd"><progress id="jtxbd"></progress></ol></output></mark><label id="jtxbd"><dl id="jtxbd"></dl></label><legend id="jtxbd"></legend><sup id="jtxbd"><big id="jtxbd"><video id="jtxbd"><pre id="jtxbd"></pre></video></big></sup><thead id="jtxbd"><font id="jtxbd"><track id="jtxbd"><ol id="jtxbd"></ol></track></font></thead><form id="jtxbd"><font id="jtxbd"><track id="jtxbd"><ol id="jtxbd"></ol></track></font></form><rp id="jtxbd"><label id="jtxbd"></label></rp><ol id="jtxbd"></ol></div>
</html>