HTML5又迎元年影游聯動也許能救？

果要用一個詞來評價2015年HTML5的發展，探路或許是最合適的詞匯。這一年，HTML5游戲蓬勃發展，行業往多個方向發展，試圖找出一條新的道路，所以H5游戲廣告化，H5游戲渠道聯運的新策略層出不窮。探路自然需要人才，據基于招聘網站的統計資料顯示，2015年的就業需求量，同比2014年，有了60%甚至更高的增長。

同時，初生不久的HTML5游戲也經歷臺化和聯運方面的重挫。2015年11月，嘀嘀打車宣布關閉運營嘀嘀打車游戲中心，致使HTML5借助巨型APP推廣的策略被大眾所懷疑。有成功，有失敗，H5市場在2014年發出第一聲叫喊，在2015年用一整年去試驗想法，那么HTML5游戲在2016年到底會如何發展？2016年到底能不能真正的成為HTML5元年？

H5市場也進寒冬春天在哪里？

如果要說起H5游戲，那首先要說的，自然是《圍住神經貓》。2014年7月，就是這款簡單，甚至有些劣質的游戲以24小時突破1000萬瀏覽量、三天過億的成績，引發了H5游戲爆發式增長。然而，H5泡沫來得快去得也快，即使是大批投機者進入這個貌似藍海的領域，也沒有促使H5市場再復制一款爆款游戲。

H5市場在短暫的爆發后，進入積累階段。從上文中的圖片可以看，H5招聘人數在今年第四季度已有一個顯著的下滑，按照這個趨勢，2016年H5相關研發人數的招聘人數應該會進一步下降，招聘人數從側面顯示了H5行業的困境。

據相關調查報告顯示，在2015年Q3季度，H5游戲的首頁跳出率平均為51.47%，7日留存率平均只有1.96%。而這只能和手游的30日留存率相當。我們以角色扮演類型的H5游戲為例，Q3角色扮演類H5游戲的付費率大約為2.56%，ARPU值約為24.3。H5游戲數據相比起手機游戲的數據，只能用慘不忍睹來形容。

實際上，現在市面上的H5游戲已經很明顯的暴露出幾個弱點：第一，缺乏重量級游戲。第二，發行或者渠道用戶積累不足。第三，玩家對H5游戲認知不夠。在知名的H5游戲渠道，如4399上，我們能明顯的看出目前益智類輕度游戲仍然是H5游戲的主要陣容，業界呼喚的重度游戲并非沒有，不過少之又少。

曲線救國看似可行前途難以預料

現在玩家接觸的H5游戲，以廣告類的H5游戲居多。相信大家都在逢年過節時經歷過H5形式的廣告轟炸，其中互動性強的H5游戲是廠商首選。據搞趣網了解，由于重度化H5游戲無法獲得令人滿意的流水，不少公司將方向調整為外包型的小游戲制作業務。這種曲線救國的行為雖然合理，卻無法對整個業界產生正面影響。

畢竟，H5廣告型的小游戲大多制作時間極短，玩法也以模仿流行的輕度手游、頁游為主。游戲質量普遍不高，從業者只能像機器一樣日復一日的生產，無法實現作為創作者的藝術表達。從業者素質不提升，游戲質量怎么提升？可惜，國內游戲行業投機心態過重，在正面戰場需要大量資金培養的情況下，自然側面戰場上成本較低、流水穩定的業務，更受廠商的歡迎。

影游聯動或成未來

H5游戲之所以被業界看好，主要是其端游手游一體的多平臺特色，以及天然的營銷優勢。在2016年，這些優勢或許會被影游聯動的策略放大。因為目前熱門電視劇、動畫、電影等都依賴社交平臺推廣，借助游戲變現。H5適合PC也適合手機，還能快速傳播的能力無疑與影游聯動一拍即合。大型在線視頻網站提供入口，也能消除H5游戲渠道不足的弱勢。

理想雖好，還需要業界配合。白鷺引擎打造的《太極》《羋月傳》《新秦時明月》同名HTML5游戲也即將上線。這些游戲將為2016年H5游戲的發展開一個頭，至于是好是壞，我們可以用自己雙眼在未來驗證。

IT時報孫妍

1999年，他用HTML5寫了一個棋牌類游戲平臺，令他3個月內賺了300萬。之后，他又開發了國內三大休閑游戲平臺之一的可樂吧，他就是Layabox的CEO謝成鴻。Layabox是一家為Flash程序員開發HTML5提供技術解決方案的公司，簡單地說，借助Layabox的解決方案，程序員可以直接在Flash環境下開發大型的重度HTML5游戲。

2010年，趙霏開始第二次創業——磊友科技，從手游行業轉向HTML5，就是因為喬布斯的一句話：“移動時代是低功耗設備、觸摸屏界和開放網絡標準的時代，Flash已經落伍?！痹谔O果、Facebook等科技巨頭們紛紛加入HTML5行業之時，趙霏和他的團隊開始著力開發HTML5的解析引擎和手機瀏覽器，同時也被李開復相中，成為創新工場孵化的第一個HTML5項目。

然而，到了2012年，HTML5從技術支持到產品都不見成效，自身的標準制定也分成了兩派，Facebook創始人馬克·扎克伯格更公開宣布放棄HTML5。這一年，趙霏和他的團隊把重心都放在了開發大型手機HTML5網頁游戲上。

2013年，磊友科技陸續推出的5款HTML5游戲都沒有獲得成功，團隊不斷有人出走，一直籠罩在“散伙”的陰影下。有的轉去做代計費的，有的轉去做iOS和Android開發，有的甚至離開了這個行業。幾近凋蔽，團隊只剩下了兩三個“元老”，但是趙霏仍舊沒有放棄HTML5。

HTML5就這樣一直在冰火兩重天里游走，誰也沒有想到，就在2014年8月，一個HTML5的小游戲《圍住神經貓》在微信朋友圈一夜爆紅，而南京泥巴怪公司其實只是為了拉點用戶，花了一天功夫就將它做了出來。自此以后，HTML5的“卡片”廣告、邀請函、互動游戲在朋友圈里盛傳，不管是營銷公司、游戲公司還是風投，都跟風研究起HTML5。

風口大型游戲借HTML5顛覆App？

近期，幾家游戲引擎公司、數據公司和分發平臺都紛紛發聲，預測HTML5游戲將在今年爆發。然而就輕量的HTML5游戲來說，繼《圍住神經貓》之后，就沒有再出現有一定影響力的游戲。而且，《圍住神經貓》一直為人詬病的就是，生命周期短，沒法將流量變現，而這兩點恰恰是游戲的命脈。

在謝成鴻看來，HTML5游戲的前景在于大型游戲。

但問題就來了，大型的HTML5游戲需要有高性能的瀏覽器適配，如若不然，卡頓、發熱就會成為硬傷，目前看來還沒有瀏覽器可以順暢地跑大型游戲。于是，就衍生出了做HTML5加速器的公司，Cocos、白鷺引擎和謝成鴻的Layabox儼然成三足鼎立之勢。

“Cocos和我們主要針對較大的游戲開發者，白鷺引擎主要面向小開發者，在HTML5游戲潛在客戶里，我們已經占有一半左右。”謝成鴻說道。據悉，國內20家主流頁游廠商中，已經有三分之一與Layabox合作。

“大型HTML5游戲在普通瀏覽器上跑不動，這是最大的問題?！彼f。于是，Layabox就做出了一套針對HTML5生態鏈的整體解決方案。

目前，Layabox有三個主要業務方向，在開發者端，基于Flash的開發環境較為成熟，所以Layabox為開發者提供在Flash環境下開發大型HTML5游戲的解決方案，夸張一點的理解就是一鍵轉換；在瀏覽器適配問題上，Layabox開發了自家的加速器，可以讓微信這樣的流量平臺也可以跑得動大型頁游。

幾年前，趙霏和他的團隊也都認為，PC上既然經歷了從端游到頁游的趨勢，說明用戶有使用場景上的需求，那么在移動設備上，應該也會有從App向HTML5轉移的傾向。在解決卡頓和發熱的前提下，畢竟HTML5游戲不用下載安裝，比起App更加方便，而且營銷成本將近比App要低10倍。

難道HTML5真的能顛覆App？經過幾年的試水，趙霏開始不看好大型HTML5游戲在移動端的前景。因為他發現，用戶在手機上玩大型游戲時，還是會傾向于App。“用戶體驗的時間和場景都是不對的，舉個簡單的例子，當你想再玩一次HTML5網頁游戲時，會發現很難找到入口，但App至少在桌面上有個圖標?！彼麑Α禝T時報》記者說道。

模式流向變現還得傍上O2O

在海底撈，最壯觀的場景就是排隊等食，雖然已經使出了免費美甲、免費擦鞋等招數，但仍舊沒有緩解食客因為排隊而流失的情況。

這倒是激發了趙霏的靈感，于是磊友科技就為海底撈設計了一個HTML5的游戲營銷方案。食客在排隊時，可以通過掃描二維碼玩一個小游戲，如果能榮登排行榜，就可以領取海底撈的代金券。

今年1月份，這個HTML5游戲上線，在北京10家海底撈分店進行試玩，結果顯示，20%～30%的食客愿意參與進來，達到了30萬人次的訪問。

從海底撈的成功案例開始，寶潔、可口可樂、旺旺等公司都踏進了趙霏的門檻，目前已有將近100家企業讓他們定制游戲。一般這些小游戲都會被植入商家的微信公眾號內，玩游戲并分享至朋友圈來贏取代金券，又是用積分抽獎等方式幫電信運營商消耗積分。

那么，怎么解決用戶留存的問題呢？“HTML5的游戲營銷最重要的是考慮使用場景，比起橫幅、彈窗等互動性不強的移動營銷模式，效果更好。”趙霏說。

一般來說，在外面消費時，HTML5就顯示出了不用下載安裝的優勢。到酒店先連Wi-Fi是一個常見的使用場景，客人可以直接掃二維碼自動關注酒店微信號，同時取得連接Wi-Fi的權限，然后就能點開公眾號里的菜單，玩游戲贏取附近餐廳的代金券。

趙霏認為，HTML5小游戲如何能使流量變現，開發團隊應該換個思路，“之前我們做大型HTML5游戲時，考慮的是怎么從用戶那賺錢，通關、買裝備等?，F在從2C到2B，考慮的是怎么讓企業買單。社交性比較強，能使線上線下聯動的游戲更有市場。”

結合了HTML5和O2O兩個熱點之后，對趙霏來說，上門找融資已經不是一件難事了。他透露，今年六七月份，磊友科技就有B輪融資的計劃。

缺口工具和人才

趙霏曾談道：“研發完全自主內核的瀏覽器引擎的難度不亞于一個操作系統?！弊詈?，由于很難追趕蘋果Safari瀏覽器迭代速度等壁壘，他和團隊就放棄了HTML5瀏覽器引擎的商用，現在只用于團隊內部開發。

謝成鴻略帶自信地談道，“HTML5開發最大的問題就是工具的缺乏，因為它沒有像Flash一樣，有可控的開發語言，有成熟的開發環境。我們做Flash轉HTML5的解決方案就是想解決這些問題。”

HTML5缺乏成熟開發環境的表現之一，就是開發人才的缺失。上個月，招聘網站拉勾網發布報告顯示，HTML5開發成為了“職位多，人才少”的熱門崗位。就目前招聘的開發者市場水平來看，擁有1年左右工作經驗的HTML5程序員，月薪基本在2～3萬，然而，擁有4到5年工作經驗的AS程序員（基于Flash開發），月薪卻只有1.5萬。

“前盛大游戲CEO凌海的團隊，從去年到現在，竟然招不到一個專精于HTML5的程序員。這些天，他團隊的程序員就在我們這兒學習HTML5開發技術。”謝成鴻說道。

、選擇題（1-18題各3分19-36題各2分，共92分）

1.在HTML的<TD>標簽中，align 屬性的取值是（　C?。?/p>

A. top ; B. middle ; C. center ; D. bottom

<tr>

</tr>

<tr>

</tr>

</table>

2. CSS樣式表根據所在網頁的位置，可分為（ B ）

A.行內樣式表、內嵌樣式表、混合樣式表; B.行內樣式表、內嵌樣式表、外部樣式表;

C.外部樣式表、內嵌樣式表、導入樣式表; D.外部樣式表、混合樣式表、導入樣式表

行內樣式：

<html>

<body>

</body>

</html>

-----------------------------------------------------------------

內嵌樣式：

<html>

<head>

#div{width:100px;height:100px;background:red;}

</style>

</head>

<body>

</body>

</html>

--------------------------------------------------------------

外部樣式：

<html>

<head>

</head>

<body>

</body>

</html>

---------------------

css文件

#div{width:100px;height:100px;background:red;}

#和.區別

.點是使用class引用的，多個控件可以同時使用一個class，一個控件上也可以使用多個class，比如

.tdRed{border:solid 1px red;}

.tdBKBlue{background-color:blue;}

而ID是在一個頁面中唯一的

總得來說class表示泛性的，id表示個性的

比如你所有的按鈕都是一個顏色的

.normalButton{background-color:blue;border:solid 0px black;}

對于提交按鈕會要做的大一點

#submit{width:100px;height:100px;}

那么你的按鈕就是

普通的按鈕就是

3. 在插入圖片標簽中，對插入的圖片進行文字說明使用的屬性是（　D?。?/p>

A.name; B.id; C.src; D. alt

4. 對于<FORM action=″URL″ method=*>標簽，其中*代表GET或（　C　）

A.SET; B. PUT; C. POST ; D. INPUT

Get和post區別

安全性：POST比GET安全；

編碼方式：POST方式提交時可以通過HTML文檔中的<META>元素設置實體部分的編碼方式，而GET方式提交時URI默認的編碼方式為ISO-8859-1，不可以在頁面中設置；

傳輸文件大?。篜OST方式提交文件放在實體部分傳輸，大小無上限，而GET方式提交文件內容放在URI部分傳輸，最大為2KB;

請求速度：GET比POST快。

數據傳輸方式：GET：查詢字符串（名稱/值對）是在 GET 請求的 URL 中發送的，如：/test/demo_form.asp?name1=value1&name2=value2；POST:查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的。

5. 下列標簽可以不成對出現的是（　B?。?/p>

A.〈HTML〉〈/HTML〉 ; B.〈P〉〈/P〉; C.〈TITLE〉〈/TITLE〉 ; D.〈BODY〉〈/BODY〉

<p>是段落標簽。

在HTML4.01中某些標簽（<p><br>,<hr>,<img>, <input>,<link>等）允許不成對出現，但是不推薦。在現在的瀏覽器里，都會“兼容”這些單標簽。瀏覽器解釋<p>標簽后，碰到一個不對應的標簽時，會自動填補</p>。所以<p>標簽可以單標簽使用，但不推薦。

在HTML5中規定了元素必須始終關閉，也就是標簽必須成對出現。

6. 對于標簽〈input type=*〉，如果希望實現密碼框效果，*值是（ C ）

A. hidden; B.text ; C. password ; D. submit

7. HTML代碼<select name=“name”></select>表示？（ D ）

A. 創建表格 ; <table>

B. 創建一個滾動菜單; <marquee>

C. 設置每個表單項的內容;

D.創建一個下拉菜單

8. BODY元素用于背景顏色的屬性是（　C?。?/p>

A. alink ; B. vlink ; C. bgcolor; D. background

9. 在表單中包含性別選項，且默認狀態為“男”被選中，下列正確的是（　A　）

A. <input type=radio name=sex checked> 男 ; B.<input type=radio name=sex enabled>

C.<input type=checkbox name=sex checked>男；

D.nput type=checkbox name=sex enabled>男

性別(單選框)：<input type="radio" value="1" name="sex" checked="checked"/>男

<input type="radio" value="2" name="sex"/>女

角色（下拉框）：<select name="role">

</select>

10. 在CSS中下面哪種方法表示超鏈接文字在鼠標經過時，超鏈接文字無下劃線？（　B?。?/p>

A. A:link{TEXT-DECORATION: underline }; B. A:hover {TEXT-DECORATION: none};

C. A:active {TEXT-DECORATION: blink }; D. A:visited {TEXT-DECORATION: overline }

11. JavaScript代碼： 'abcdefg'.indexOf('D') 結果是（ B ）

A：0 B：-1 C：3 D：4

Js常用方法

1.substr

substr(start,length)表示從start位置開始，截取length長度的字符串。

var src="images/off_1.png";

alert(src.substr(7,3));

彈出值為：off

2.substring

substring(start,end)表示從start到end之間的字符串，包括start位置的字符但是不包括end位置的字符。

var src="images/off_1.png";

alert(src.substring(7,10));

彈出值為：off

3.indexOF

indexOf() 方法返回某個指定的字符串值在字符串中首次出現的位置（從左向右）。沒有匹配的則返回-1，否則返回首次出現位置的字符串的下標值。

var src="images/off_1.png";

alert(src.indexOf('t'));

alert(src.indexOf('i'));

alert(src.indexOf('g'));

彈出值依次為：-1,0,3

4.lastIndexOf

lastIndexOf()方法返回從右向左出現某個字符或字符串的首個字符索引值（與indexOf相反）

var src="images/off_1.png";

alert(src.lastIndexOf('/'));

alert(src.lastIndexOf('g'));

彈出值依次為：6,15

5.split

將一個字符串分割為子字符串，然后將結果作為字符串數組返回。

以空格分割返回一個子字符串返回

var s, ss;

var s = "1,2,3,4";

ss = s.split(",");

alert(ss[0]);

alert(ss[1]);

12. <img src="name">的意思是？（ A ）

A. 圖像相對于周圍的文本左對齊; B. 圖像相對于周圍的文本右對齊;

C. 圖像相對于周圍的文本底部對齊; D. 圖像相對于周圍的文本頂部對齊

13. 點擊按鈕，在ID為“Link”的DIV標簽內顯示東軟實訓超鏈接, 下面對該按鈕的onClick事件函數描述正確的是：C

A. Link.innerText='<a ;

B. Link.outerText='<a ;

C. Link.innerHTML='<a ;

D. Link.outerHTML='<a

innerHTML 設置或獲取位于對象起始和結束標簽內的

HTML

outerHTML 設置或獲取對象及其內容的 HTML 形式

innerText 設置或獲取位于對象起始和結束標簽內的文本

outerText 設置(包括標簽)或獲取(不包括標簽)對象的文本

innerText和outerText在獲取時是相同效果，但在設置時，innerText僅設置標簽內的文本，而outerText設置包括標簽在內的文本

14.(“24.7” + 2.3 ) 的計算結果是（ C ）

A. 27 ; B. 24.7 2.3; C. 24.72.3; D. 26.7

15. （ B ）事件處理程序可用于在用戶單擊按鈕時執行函數

A. onSubmit; B. onClick; C. onChange; D. onExit

屬性當以下情況發生時，出現此事件onabort圖像加載被中斷onblur元素失去焦點onchange用戶改變域的內容onclick鼠標點擊某個對象ondblclick鼠標雙擊某個對象onerror當加載文檔或圖像時發生某個錯誤onfocus元素獲得焦點onkeydown某個鍵盤的鍵被按下onkeypress某個鍵盤的鍵被按下或按住onkeyup某個鍵盤的鍵被松開onload某個頁面或圖像被完成加載onmousedown某個鼠標按鍵被按下onmousemove鼠標被移動onmouseout鼠標從某元素移開onmouseover鼠標被移到某元素之上onmouseup某個鼠標按鍵被松開onreset重置按鈕被點擊onresize窗口或框架被調整尺寸onselect文本被選定onsubmit提交按鈕被點擊onunload用戶退出頁面

16. 用戶更改表單元素 Select 中的值時，就會調用（ D ）事件處理程序

A. onClick; B. onFocus; C. onMouseOver; D. onChange

17.onMouseUp 事件處理程序表示（ A ）

A. 鼠標被釋放; B. 鼠標按下; C. 鼠標離開某個區域; D. 鼠標單擊

18. 下列哪一項表示的不是按鈕（ C ）

A. type="submit"; B. type="reset"; C. type="image"; D. type="button"

19.下面哪一項是換行符標簽？（ C ）

A. <body>; B. <font>; C. <br>; D. <p>

font規定文本字體、大小和顏色：

20. 下列哪一項是在新窗口中打開網頁文檔。（ B ）

A. _self; B. _blank; C. _top; D. _parent

_blank在新窗口中打開被鏈接文檔；

_self是指在本身這個網頁窗口來打開新的網頁鏈接；

_top表示在頂層窗口打開網頁鏈接，即在整個窗口中打開被鏈接文檔；

_parent表示在父窗口打開網頁鏈接；

<a target="_blank">Visit W3School!</a>onclick="javascript：window.open('Default.aspx','_blank');"

21. 下面說法錯誤的是( D )

A. CSS樣式表可以將格式和結構分離;

B. CSS樣式表可以控制頁面的布局;

C. CSS樣式表可以使許多網頁同時更新;

D. CSS樣式表不能制作體積更小下載更快的網頁

CSS樣式表能為我們實現些什么樣的功能?

1、你可以將格式和結構分離。

2、你可以以前所未有的能力控制頁面布局。

3、你可以制作體積更小下載更快的網頁。

4、你可以將許多網頁同時更新，比以前更快更容易。

5、瀏覽器將成為你更友好的界面

將格式和結構分離

HTML從來沒打算控制網頁的格式或外觀。這種語言定義了網頁的結構和各要素的功能，而讓瀏覽器自己決定應該讓各要素以何種模樣顯示。但是網頁設計者要求的更多。所以當 Netscape推出新的可以控制網頁外觀的HTML標簽時，網頁設計者無不歡呼雀躍。我們可以用<FONT FACE>、<I>包在<P>外邊控制文章主體的外觀等等。然后我們將所有東西都放入表格，用隱式GIF空格產生一個20象素的邊距。一切都變得亂七八糟。編碼變得越來越臃腫不堪，要想將什么內容迅速加到網頁中變得越來越難。串接樣式表通過將定義結構的部分和定義格式的部分分離使我們能夠對頁面的布局施加更多的控制。HTML仍可以保持簡單明了的初衷。CSS代碼獨立出來從另一角度控制頁面外觀。

以前所未有的能力控制頁面的布局

<FONT SIZE>能使我們調整字號，表格標簽幫助我們生成邊距，這都沒錯。但是，我們對HTML總體上的控制卻很有限。我們不可能精確地生成80象素的高度，不可能控制行間距或字間距，我們不能在屏幕上精確定位圖象的位置。但是現在，樣式表使這一切都成為可能。

可以制作出體積更小下載更快的網頁還有更好的消息：

樣式表只是簡單的文本，就象HTML那樣。它不需要圖象，不需要執行程序，不需要插件，不需要流式。它就象HTML指令那樣快。有了CSS之后，以前必須求助于GIF的事情現在通過CSS就可以實現。還有，正如我先前提到的，使用串接樣式表可以減少表格標簽及其它加大HTML體積的代碼，減少圖象用量從而減少文件尺寸。

可以更快更容易地維護及更新大量的網頁

沒有樣式表時，如果我想更新整個站點中所有主體文本的字體，我必須一頁一頁地修改每張網頁。即便站點用數據庫提供服務，我仍然需要更新所有的模板，而且更新每一模板中每一個實例實例的 <FONT FACE>。樣式表的主旨就是將格式和結構分離。利于樣式表，我可以將站點上所有的網頁都指向單一的一個CSS文件，我只要修改CSS文件中某一行，那么整個站點都會隨之發生變動。

瀏覽器將成為你更友好的界面

不象其它的的網絡技術，樣式表的代碼有很好的兼容性，也就是說，如果用戶丟失了某個插件時不會發生中斷，或者使用老版本的瀏覽器時代碼不會出現雜亂無章的情況。只要是可以識別串接樣式表的瀏覽器就可以應用它。

22. 要使表格的邊框不顯示，應設置border的值是( B )

A. 1; B. 0; C. 2; D. 3

23. 如果要在表單里創建一個普通文本框，以下寫法中正確的是( A )

A. <INPUT>; B. <INPUT type="password">;

C. <INPUT type="checkbox">; D. <INPUT type="radio">

24. 以下有關按鈕的說法中，錯誤的是( B )

A. 可以用圖像作為提交按鈕; B. 可以用圖像作為重置按鈕;

C. 可以控制提交按鈕上的顯示文字; D. 可以控制重置按鈕上的顯示文字。

function fangfa(){

document.formname.submit();

document.formname.reset();

}

在線咨詢

上一篇：記錄：學習html(二)：標簽
下一篇：多頁面項目webpack打包實踐

您的項目需求

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

整合營銷服務商

HTML5又迎元年 影游聯動也許能救？

您的項目需求

HTML5又迎元年影游聯動也許能救？