整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
/滿滿都是愛
兩年前HTML5熱傳到中國，行業隨即掀起了Web App和Native App的生死論戰，然而HTML5游戲真正走紅其實是在2014年《圍住神經貓》、《看你有多色》等刷爆朋友圈的小游戲的流行開始的，因為這些小游戲都是基于HTML5(簡稱H5)制作而成。 H5游戲最大的好處就是“即點即玩” 上手方便，而不像傳統的 App 那樣需要從應用商店下載。當那只神經貓成功攪亂微信朋友圈的一池春水之后，類似的H5游戲就像病毒一樣蔓延開來。
H5游戲從輕度轉向中重度
所有人都知道，《圍住神經貓》、《看你有多色》及其各種山寨版都是“短命”貨，短則兩天、長則一周，這些小游戲就消失在人們的視野中。而在反復經歷此種循環后，游戲開發者們也逐漸掌握了游戲“病毒式”傳播的規律，以及在游戲生命周期短基礎上建立商業模式的方法。
由夢啟科技研發、指游方寸代理發行的無端手游《我欲封天web》6月5日登陸騰訊玩吧(手機QQ空間)，數據顯示，《我欲封天web》成績表現十分突出，或將成為HTML5(簡稱“H5”)游戲首款千萬級產品，領跑整個H5產業。截止6月8日，《我欲封天web》的次日留存率為18.9%，付費率為2.8%，ARPPU則高達100元。而據此前DataEye發布的H5相關報告顯示，H5游戲行業的次日留存平均值為10.01%，付費率平均值為1.35%，ARPPU平均值為13.92元。夢啟科技創新地定義了H5游戲的全新理念，借鑒卡牌手游核心精髓的同時，融合放置類手游的輕操作特性，并輔以內嵌數十種不同的活動和互動系統，推出全自動卡牌玩法，使玩家輕松上手享受游戲樂趣。
使用了H5領域最先進的白鷺引擎的《我欲封天web》取得此成績可謂是眾望所歸，《我欲封天web》上線后優異的數據預示它必將是H5領域的標桿游戲，將成為H5領域發展的領頭羊。
H5游戲的中重度化，適應市場需要
目前HTML5游戲，在類型方面占主導地位的依舊是益智休閑和角色扮演類，基本上占到80%，類型比較集中。2014年到2015年，益智休閑類游戲占比持續下降，角色扮演類的游戲比重大幅度提升，說明HTML5行業從業者對中重度游戲比較期待。產業人員結構方面，由于還處于發展階段，從業人員規模接近60%是30人以下的團隊。到目前為止HTML5游戲已經有了1.2億左右的用戶規模。
H5游戲能否在眾多游戲類型中脫穎而出，大家對此充滿了期待。目前H5游戲正在實現從單機到休閑游戲，再到中重度游戲的進化，并且在商業化落地上擁有了更多模式。這種進化模式也正表明了游戲玩家對游戲的品質要求越來越高，如此H5游戲從輕度向中重度化轉變已經成為趨勢。
H5游戲向中重度化改變面臨的挑戰
H5游戲在從輕度向中重度改變的過程中也存在著一些難以避免的問題，例如將來H5游戲的畫質是否能夠達到目前移動客戶端游戲一樣的高水準;H5游戲玩家之間是否可以同時在線交互一起游戲;在H5游戲里能否購買游戲道具，以及保存玩家信息等都是玩家們和游戲開發者所需要關注和解決的;此外，H5游戲從輕度游戲轉向重度游戲是否會增加H5游戲的開發成本，本身開發廉價的H5游戲在轉型的過程中如果增加了成本，對玩家體驗游戲的欲望度是否會有影響都是有必要考慮在內的。
如果能夠完美的解決這些問題，天生具備便捷特性的H5游戲發展將會更加順風順水，一定可以成為游戲界的新鮮勢力!
H5游戲從輕度轉向中重度的準備
2015年是游戲產業的一個重要的年份，新游戲形式不斷出現，用戶對于游戲的體驗要求也越來越高。面對龐大的人群和市場，HTML5游戲從輕度轉向中重度勢在必行。H5游戲從輕度轉向中重度轉變是一個充滿希望和挑戰的過程，因此需要加強業內合作交流，眾人拾柴火焰高，業內團結合作一定可以讓行業發展得更好。
由中國最大的開源游戲開發者社區和領先的移動開發平臺9秒聯合騰訊玩吧聯合主辦2015年HTML5游戲開發者大會(簡稱H5GDC)就是這樣一次為H5行業提交交流合作的重要行業會議。H5GDC大會同期還將舉辦“騰訊玩吧‘中國杯’H5游戲評選”活動，并將為評選獲獎游戲提供包括產品獨代、宣傳推廣資源和融資等方面的支持。此項活動不僅促進了HTML5的行業發展，同時也為HTML5在中國的市場開辟了新的合作方式。
可以預見，HTML5游戲的從輕度向中重度轉變一定是游戲的一次大變革。被業界寄以厚望的H5游戲必將在游戲市場開辟出一片新天地!
(本文由愛游戲提供)
關于H5GDC
2015年HTML5游戲開發者大會(簡稱H5GDC)由中國最大的開源游戲開發者社區和領先的移動開發平臺9秒(9miao.com)聯合騰訊玩吧聯合主辦。H5GDC旨在為 HTML5移動游戲發展提供助力，促進HTML5游戲開發的技術和產業健康發展。同時也為廣大移動互聯網創業者提供技術交流、商務合作和融資的平臺。大會同期舉辦“騰訊玩吧‘中國杯’H5游戲評選”活動，并將為評選獲獎游戲提供包括產品獨代、宣傳推廣資源和融資等方面的支持。大會定于2015年7月4日在北京JW萬豪酒店舉辦。可通過以下渠道了解詳情：
大會官方網站：http://h5.9miao.com/
參評HTML5游戲提交資料：http://h5.9miao.com/worksapply
大會免費報名通道:
http://dwz.cn/NFzur
http://dwz.cn/NRt42
http://dwz.cn/NRvEv
大會媒體合作請聯系： 趙家伊 QQ：1256126399 電話：010-64141533
H5游戲評選報名咨詢：李婷婷 QQ：962418144 電話: 010-64141012，
9秒官方微信二維碼：
在做前端，如果說自己不會h5，你很有可能被你的客戶嘲笑，說什么最新技術都不會！h5其實沒什么，只不過是html技術的進一步發展，主要是增加了一些新的元素而已。
<!doctype> 聲明必須位于 HTML5 文檔中的第一行,使用非常簡單,寫法：<!DOCTYPE html>
HTML5 中的一些有趣的新特性：
用于繪畫的 canvas 元素
用于媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支持
新的特殊內容元素，比如 article、footer、header、nav、section
新的表單控件，比如 calendar、date、time、email、url、search
HTML5 添加了很多語義元素如下所示：
| 標簽 | 描述 |
| <article> | 定義頁面獨立的內容區域。 |
| <aside> | 定義頁面的側邊欄內容。 |
| <bdi> | 允許您設置一段文本，使其脫離其父元素的文本方向設置。 |
| <command> | 定義命令按鈕，比如單選按鈕、復選框或按鈕 |
| <details> | 用于描述文檔或文檔某個部分的細節 |
| <dialog> | 定義對話框，比如提示框 |
| <summary> | 標簽包含 details 元素的標題 |
| <figure> | 規定獨立的流內容（圖像、圖表、照片、代碼等等）。 |
| <figcaption> | 定義 <figure> 元素的標題 |
| <footer> | 定義 section 或 document 的頁腳。 |
| <header> | 定義了文檔的頭部區域 |
| <mark> | 定義帶有記號的文本。 |
| <meter> | 定義度量衡。僅用于已知最大和最小值的度量。 |
| <nav> | 定義導航鏈接的部分。 |
| <progress> | 定義任何類型的任務的進度。 |
| <ruby> | 定義 ruby 注釋（中文注音或字符）。 |
| <rt> | 定義字符（中文注音或字符）的解釋或發音。 |
| <rp> | 在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內容。 |
| <section> | 定義文檔中的節（section、區段）。 |
| <time> | 定義日期或時間。 |
| <wbr> | 規定在文本中的何處適合添加換行符。 |
新表單元素, 新屬性，新輸入類型，自動驗證。
以下的 HTML 4.01 元素在HTML5中已經被刪除:
<acronym> 標記一個首字母縮寫，h5用abbr代替
<applet> 用object代替
<basefont>規定頁面上的默認字體顏色和字號：
<big>呈現大號字體效果。
<center> 這個...這么常用為什么去掉？？
<dir> 簽定義目錄列表。類似于ul
<font> //這個也是比較常用的，但是取消了
<frame> 標簽定義 frameset 中的一個特定的窗口（框架）
<frameset>定義一個框架集
<noframes> 元素可為那些不支持框架的瀏覽器顯示文本。noframes 元素位于 frameset 元素內部。
<strike>標簽可定義加刪除線文本定義。
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。
IE9 以下版本瀏覽器兼容HTML5的方法，使用的靜態資源的html5shiv包：（菜鳥教程）
<!--[if lt IE9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]-->
載入后，初始化新標簽的CSS：
/*html5*/article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
寫法：<video src="movie.ogg" controls="controls" width="320" height="240">文字</video>
control 屬性供添加播放、暫停和音量控件。
<video> 與 </video> 之間插入的內容是供不支持 video 元素的瀏覽器顯示的：
注意：要確保適用于 Safari 瀏覽器，視頻文件必須是 MPEG4 類型。所以video 元素允許多個 source 元素
所以寫成：
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video> 標簽的屬性
autoplay：值為：autoplay，如果出現該屬性，則視頻在就緒后馬上播放。
controls：值為：controls如果出現該屬性，則向用戶顯示控件，比如播放按鈕。height：pixels設置視頻播放器的高度。
loop：值為：loop，如果出現該屬性，則當媒介文件完成播放后再次開始播放。
preload：值為：preload，如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。
src：值為：url，要播放的視頻的 URL。
width：值為：pixels，設置視頻播放器的寬度。
同時還可以支持dom事件支持：play()，pause()，load()，canPlayType();
寫法：<audio src="song.ogg" controls="controls">Your browser does not support the audio tag.</audio>
control 屬性供添加播放、暫停和音量控件。
<audio> 與 </audio> 之間插入的內容是供不支持 audio 元素的瀏覽器顯示
當前，audio 元素支持三種音頻格式：mp3，mav和ogg，Safari 瀏覽器，音頻文件必須是 MP3 或 Wav 類型。多個 source 元素支持。
<audio> 標簽的屬性
| 屬性 | 值 | 描述 |
| autoplay | autoplay | 如果出現該屬性，則音頻在就緒后馬上播放。 |
| controls | controls | 如果出現該屬性，則向用戶顯示控件，比如播放按鈕。 |
| loop | loop | 如果出現該屬性，則每當音頻結束時重新開始播放。 |
| preload | preload | 如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。 |
| src | url | 要播放的音頻的 URL。 |
拖放（Drag 和 drop）是 HTML5 標準的組成部分。
draggable="true" 設置元素為可拖放 <img draggable="true" />
ondragstart 和 setData()規定當元素被拖動時，會發生什么
ondragoverondragover 事件規定在何處放置被拖動的數據。
Ondrop：當放置被拖數據時，會發生 drop 事件。
(說實話真心不好理解，看一下w3c給的案例吧：)
<script type="text/javascript">
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));//放置進去
}
</script>
<div id="div1" ondrop="drop(event)"ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"ondragstart="drag(event)" width="336" height="69" />
這個拖拽看起來比較費勁，一般我們也用不到，大家可以先收藏起來，如果需要用到的時候，再返回來直接套用案例！
未完待續.....
看不懂沒關系，多用幾次，平時寫網頁的時候，可以慢慢的增加使用h5標簽，因為除了ie8一下，大部分瀏覽器還是可以支持的！本教程是結合了w3c，菜鳥教程，慕課網的內容總結的，如果不妥多多指教！
言：萬物之始，大道至簡，演化至繁。水滴不染塵世浮華，方能純凈如冰川靈動如絲絨。落紅不逐春日絢爛，方有一年春盡一年春。
一、html5的介紹
1.1介紹
html號稱超文本標記語言，代表著瀏覽器技術發展的一個階段。html版本1到版本5的更新迭代都是由組織W3C管理的。當時到html4.1的時候，W3C組織就聲稱不再更新版本了。而改用XHTML。但是由于瀏覽器的各種不兼容的問題，于是乎W3C這個組織就和其他的瀏覽器產商一起聯合起來將這門語言再次更新到html5
比喻：
html5 >機器人的骨骼
css3 >機器人的外在修飾
js > 機器人的行為如行走、抬腿
Jquery > 封裝好的控制行為的庫，可以提高效率
1.2優勢
易用性
支持視頻和音頻
互動性高
支持移動設備
未來的趨勢
1.3開發工具
HBuild、WebStrom、sublime Text
二、代碼規范
2.1代碼規范
新建一個Web項目
相比html4來說，html5的語法更加簡潔并且在規定上也更加寬松。
單標簽不用寫關閉符號
雙標簽省略結束標簽
html、head、body、colgroup、tbody可以完全省略
刪除其中一些，打開瀏覽器的檢查元素功能，也不會報錯
三、各類標簽
3.1文本標簽
b標簽：表示關鍵字和產品名稱。<b>html</b>其實它的實際作用就是將一段文字加粗。但是并不是特別強調它的重要性。比如說：在一段文字當中出現的某些關鍵字或者產品的名稱就可以用b標簽
strong標簽：表示比較重要的文字<strong>html</strong>它的作用也是加粗，只是它在強調一段比較重要的文本
br單標簽：換行
wbr標簽：安全換行you've no idea how worried <wbr> i was當用戶對網頁進行縮放的時候可能會有一些單詞被擠到下一行。如果不行某個單詞被分離的話，可以使用安全換行標簽
i標簽：傾斜。em標簽語義一樣，但em表示強調<i>傾斜標簽</i>它用于表示外文詞匯或科技術語
s標簽：刪除線。del標簽表示強調。<s>html</s>刪除線
u標簽：給文字加下劃線。ins標簽表示強調<u>html</u>下劃線
small標簽：添加小號字體<small>放小一號</small>將文本放小一號。通常用于免責聲明和澄清聲明。
sub和sup標簽：添加上標和下標X<sub>5</sub>和Y<sup>2</sup>（sub和sup長差不多，這個要如何去記憶呢？大家可以看到b的肚子在下面，所以呢它是下標，而p的頭部在上方，所以記錄是上標。那這樣一來是不是就感覺清晰了許多呢）
q標簽：引用來自其它出處的內容<q>有朋自遠方來</q>
ruby標簽：語言元素。常用于幫助讀者正確發音。<ruby>夔<rp>（</rp><rt>kui</rt><rp>）</rp></ruby><rp><rt>用來幫助讀者掌握表意語言文字的正確發音。比如說漢語拼音在文字的上方。
bdo標簽：設置文字方向<bdo dir="rtl">設置文字方向</bdo>dbo必須使用屬性dir才可以設置，一共兩個值：rtl從右到左和ltr從左到右。一般默認是ltr。還有一個bdi元素也是處理方向的，由于是特殊語言的效果，并且主流瀏覽器有些不支持，所以可以忽略。
mark標簽：突出顯示文本<mark>突出顯示文本</mark>加上一個黃色的背景，黑色的字。從語義上來看，與上下文相關而突出的文本，用于記號。
a標簽：超鏈接a元素屬于文本元素，有一些私有屬性。
href屬性 <a >百度</a> 這個屬性是必須的，否則a元素就變得毫無意義。它的屬性值意味著點擊跳轉到指定的外部網站去。
target屬性<a target="_blank">百度</a> 這個屬性告訴瀏覽器希望打開的新窗口顯示在哪里。_blank表示在新窗口中打開文檔。_self表示在當前窗口打開文檔。默認_self。(_parent和_top這些要結合框架來使用，但是基本上用得已經很少了。)
錨點設置：用于將同一個文檔中的另一個元素移入視野。說通俗一點就是通過點擊這個錨點定位到頁面中的某個位置。
<a href="#1">第一節</a>
<a href="#2">第二節</a>
<a href="#3">第三節</a>
</br>
==========以下全都是分隔符============</br>
==========以下全都是分隔符============</br>
==========以下全都是分隔符============</br>
<a name="1">第一節的內容 我?應該說點啥的。
==========以下全都是分隔符============</br>
==========以下全都是分隔符============</br>
==========以下全都是分隔符============</br>
</a>
==========以下全都是分隔符============</br>
==========以下全都是分隔符============</br>
……以上省略一萬行……
==========以下全都是分隔符============</br>
<a name="2">第二節的內容 我?應該說點啥的。
==========以下全都是分隔符============</br>
==========以下全都是分隔符============</br>
==========以下全都是分隔符============</br>
</a>
3.2分組標簽
顧名思義，分組元素就是用來組織相關內容的html元素，對它們進行清晰有效的分類。
p標簽：表示段落<p>這是一個段落</p> <p>這是一個段落</p>p標簽就是將內部包含的文本形成一個段落。它們可以自動換行，而且段落與段落之間保持一定量的空隙。
div標簽：通用分組<div>這是一個塊標簽</div> <div>這是另一個塊標簽</div>在早期的版本中經常用到，用div將其他數據或標簽包裹起來，進而進行布局。但是在html5中，漸漸被其他元素替代。（它與p標簽的區別就是兩段文本間沒有空隙。空隙間隔和br標簽換行一樣）
blockquite標簽：引用大段其他地方的內容<blockquote>引用別人的內容的輔導費打發打發可以換行哦他也有首尾縮進的效果</blockquote>有段落空隙的功能，還包含了首尾縮進的功能。
pre標簽：按照原格式展示數據<pre> 我就是 長這樣的 參差不齊 </pre>（有時候某些文字就想要按照原來的格式顯示出來就要用到pre標簽。它就是將數據原封不動的顯示出來）
hr標簽：單標簽。添加一條分割線。
ul和li標簽：添加無限列表
<ul>
<li>貂蟬</li>
<li>大喬</li>
<li>小喬</li>
<li>孫尚香</li>
</ul>
ul標簽表示無序列表（就像咱們平時說的無符號整形，在前面也是加了一個u），而li標簽則表示內部的列表項
ol和li：表示有序列表
start屬性：表示從第幾個序列開始統計。<ol start="2">
reversed屬性：是否倒序排列。<ol reversed>（不過這個屬性有很多的瀏覽器不支持，所以要謹慎使用）
type屬性：表示列表的編號的類型 <ol type="A">
value屬性：這是屬于li的屬性。表示強行設置某個項目的編號。<li value="7">安琪拉</li>
dl、dt、dd：列表標簽
<dl>
<dt>第一份內容</dt>
<dd>第一行詳細內容</dd>
<dd>第二行詳細內容</dd>
<dl>
雖然說這三個標簽是一個整體，但是dt和dd標簽并非都必須出現
figure和figcaption標簽：使用插圖的意思。一般用于圖片的布局。
<figure>
<figcaption>這里有一張圖哦</figcaption>
<img src="img.png">
</figure>
3.3表格標簽
表格的用途是以網格的形式顯示二維數據。開發者可以對表格中的元素標簽設置不同的屬性如邊框寬度、顏色等使表格呈現出不同的效果。
3.3.1 標簽
table：表示表格標簽
tr：代表某一行
td：代表一個單元格。
<table border="1" style="width:300px;">
<tr> <!--相當于行-->
<td>王昭君</td> <!--相當于每行中的每一列-->
<td>沉魚落雁</td>
<td>法師</td>
</tr>
<tr> <!--相當于行-->
<td>貂蟬</td> <!--相當于每行中的每一列-->
<td>羞花閉月</td>
<td>刺客</td>
</tr>
</table>
th：代表標題單元格。代表標題，作用是將內部文字居中且加粗。
<tr>
<th>姓名</th>
<th>特征</th>
<th>職業</th>
</tr>
thead：代表表頭。（某些時候，網頁上的表頭是由js動態生成的。有可能沒按照先后的順序排列，如此一來表頭就有可能顯示到第二行、第三行甚至是表尾。用thead將tr括起來可以讓數據永遠顯示在第一行）
<thead>
<tr>
<th>姓名</th>
<th>特征</th>
<th>職業</th>
</tr>
tfoot:表示表尾：與表頭相反
tbody:表示表格的主體部分
(這里非常建議用分主體、表頭、表尾的方式寫。因為到后期使用CSS樣式的時候只要拿到某個標簽就可以設置總體的樣式了，這樣就會非常方便)
caption:添加表格的標題
colgroup:群組。用于設置列的屬性。默認設置第一個（有的時候需要設置單獨列的屬性，如果說我只想設置第二列的屬性，則需要把第一列的設置成白色）
<!--<table border="1" style="width:300px;">-->
<colgroup style="background:white;" span="1"></colgroup> <!--設置第一個顏色為白-->
<colgroup style="background:red;" span="1"></colgroup> <!--設置第二個顏色為紅 span代表一列-->
col：群組的子標簽。更加靈活的設置列屬性。通過占位符設置不需要的屬性。
<colgroup>
<col> <!--占位，表示第一列不設置-->
<col style="background: pink;">
</colgroup>
3.3.2屬性
border:表示邊框的寬度 <table border="1"></table>
style:通用屬性。在css中做詳解。
colspan：合并列 <td colspan="3">統計</td>這句代碼表示共占三個單元格
rowspan:合并行
<tr>
<th rowspan="4">學員</th>
<th>姓名</th>
<th>特征</th>
<th>職業</th>
</tr>
3.3文檔元素
文檔元素的主要作用是劃分各個不同的內容，讓整個布局更加清晰。 進入代替div。讓整個布局元素都具有語義。
header標簽：表示頁面頭部。通常包括標題或導航等內容。下面內容會換行（在頁面中一般會用樣式將它設置到居中）
footer標簽:表示頁面的尾部，一般用于版權聲明、友情鏈接等。
h1-h6標簽：標題標簽，有字體加粗的效果。從1-6字號依次減小
<h1>這里是一個大標題</h1> <h3>這里是一個副標題</h3>
hgroup:組合標題。hgroup的作用就是當多個標題出現，干擾到一對或多個本身需要整合的標題。
<header>
<hgroup>
<h1>這里是一個大標題</h1>
<h3>這里是一個副標題</h3>
</hgroup>
</header>
<footer>
<h4>這里是尾部的副標題</h4>
這里存放頁面的尾部：如版權聲明，友情鏈接
</footer>
如上面那段代碼，頭部的h4標題就能與h1綁定起來，從而和尾部的h4分離。
section標簽: 定義一個文檔的主題內容
nav標簽: 給文檔頁面添加一個導航
aritcle標簽：添加一個獨立成篇的文檔（像平常看到的論壇，貼吧，評論都有自己的頭、尾和內容等）
<article>
<header>
<nav>……</nav>
</header>
</article>
aside標簽：生成注釋欄。
<aside>這是一個注釋欄</aside>
address表示文檔或者是article元素的聯系信息
<address>聯系信息</address>
本身有傾斜的效果。如果是在article元素下表示其下的聯系信息，如果是在body元素下表示整個文檔的聯系信息
3.4嵌入元素
嵌入元素主要功能是把外部的一些資源插入到html中。
img標簽：用于顯示圖片
src：嵌入圖像的url
alt：（如果圖片能正常顯示則沒有任何效果。若圖片加載不成功會出現備用內容）
width/height:定義圖片的寬度和高度,單位是像素<img src="img.png" alt="風景圖" width="320" height="400"/>
ismap:獲取到圖片區域的像素點加入了ismap屬性之后，點擊圖片在瀏覽器中就會獲得圖片被點擊的地方的像素點。（把文件在目錄中打開，講文件拷貝到谷歌瀏覽器打開就能看見）
<a href="index.html">
<img ismap src="img_5.jpg" alt="風景圖">
</a>
usemap:創建分區的響應圖。比如說點擊圖片的某一部分，可以跳轉到某一個網頁。（當點擊了coords這塊區域時，跳轉到指定的網頁）
<img src="img_5.jpg" usemap="#Map" />
<map name="Map">
<area shape="circle" coords="31,28,112,100" target="_blank" alt="方形">
</map>
iframe標簽：嵌入另一個文檔。表示在一個頁面內建立一個區域引入另一個頁面。
<a href="index.html" >index</a>
<a target="in">百度</a>
<iframe src="http://www.baidu.com" width="300" heigth="300" name="in"></iframe>
progress標簽：用于顯示進度
該標簽會產生一個進度條，一般我們會用js代碼來控制其內部的值。(當前值用value來表示，而最大值用max來表示)
<progress value="30" max="100"></progress>
meter標簽：顯示范圍里的值（類似于進度條,可以規定最大值和最小值max/min。low值規定它的值過低，high表示值過高。而optimun表示最佳值，但是這個屬性是呈現不出效果的）
<meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>
3.5音頻和視頻標簽
音頻和視頻文件其實都只是一個容器文件。視頻文件包含了音頻軌道、視頻軌道和其他一些元數據。視頻播放時，音頻軌道和視頻軌道是綁定在一起的。元數據包含了視頻的封面、標題字幕等信息。在網頁實現中，有很多的瀏覽器廠商都有自己的標準，所以html5規范也沒有強制指定編解碼器了。所以在網頁上嵌入視頻和音頻時，最好提供mp4格式和webM格式的視頻。否則有可能由于瀏覽器不兼容的問題導致視頻不能播放。
video標簽: 視頻標簽屬性：
src:視頻資源的url
width：視頻寬度
height:視頻高度
<video src="test.mp4" width="320" height="400"></video>
controls:設置后顯示播放控件（未設置這個屬性時，視頻就像一張圖片，設置controls之后才能顯示視頻播放控件）
<video src="test.mp4" width="320" height="400" controls></video>
autoplay:表示立即播放視頻
loop:反復播放視頻（也就是說在播放結束之后會重新播放視頻）
muted:設置之后，視頻會處于靜音狀態
poster:指定視頻數據載入時顯示的圖片。（相當于視頻的一個封面）
<video src="test.mp4" width="320" height="400" controls
poster="img_5.jpg"></video>
preload:預加載。不設置會在第一次播放自動緩存。如果值為none會直到用戶點擊時再加載視頻。如果值為metadata表示播放之前只加載第一幀。auto是默認的，表示要求瀏覽器盡快的加載視頻。
兼容多個瀏覽器 source標簽
<video src="test.mp4" width="320" height="400" controls poster="img_5.jpg">
<source src="test.webm"/>
<source src="test.mp4"/>
</video>
audio標簽：用于嵌套音頻內容。屬性與視頻元素類似。只是沒有寬高設置和圖片。
<audio src="test.mp3" controls></audio>
3.6表單標簽
表單標簽是用于獲取用戶的輸入數據的。
form標簽：表示定義html表單。用該標簽包含的標簽具有提交功能。也就是說，在瀏覽器的地址欄里面能獲取到用戶的信息。(如果不定義表單，那么它是無法提交數據的)
<form>
用戶名：<input name="user">
<button>提交</button>
</form>
屬性
action:表示表單提交到的頁面(也就是要把數據傳入到哪個頁面中)
method:表示表單的提交方式。默認是get。而get和post請求的區別就是post后面不跟請求體。也就是用戶信息。相對來說更加的安全。（一般來說，get是用于超鏈接提交居多，post用作表單提交居多）
<form method="post" action="http://www.haosou.com"></from>
enctype:表示瀏覽器對發送給服務器的數據采用的編碼格式。有三種格式。默認是不能將文件上傳到服務器”application/x-www-form-urlencoded“、multipart/form-data用于將文件上傳到服務器、text/plain不建議使用
name:設置表單名稱，以便程序調用
target:提交的目標，與超鏈接無異
autocomplete:設置瀏覽器記錄用戶輸入的信息。分為on和off兩個值。默認為on。
novalidate：設置是否執行客戶端數據有效性檢查
input標簽：表示用來收集用戶輸入數據的控件。它默認會出現一個單行的文本框。
type:文本框的類型。值為text時表示單行文本框；值為password表示密碼框；值為search時，除了火狐瀏覽器的其他瀏覽器外，會顯示一個叉來取消搜索內容，值為number時，表示只限于數字輸入；值為range時，生成一個數值范圍文本框；當type為date系列時，可以獲取日期和時間的值，有六種形態date、month、time、week、datetime、datetime-local；當值為color代表可以獲取不同的顏色；當值為checkbox、radio時表示復選框和單選。單選的name值必須一樣。checked表示默認勾選狀態值為img是表示產生一張圖片按鈕，后面可以接src,alt,width等熟悉值為email,tel,url時表示輸入電子郵件、電話和網址格式值為hidden時，生成一個隱藏控件（看不見，但提交的時候會顯示，一般用于關聯主鍵id提交）值為file的時候，表示上傳文件。accept屬性表示限制文件<input type="text">
音樂<input type="checkbox" checked>
體育<input type="checkbox">
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
<input type="hidden" value="1" name="id">
<input type="file" accept="image/gif">
maxlength:設置文本框最大字符長度
readonly:設置文本框為只讀狀態。可以提交但是不能修改文本框的值。
placeholder:占位符
size:設置文本框的寬度
required:表明用戶必須輸入一個值，否則無法通過輸入驗證
<input type="text" list="abc" required>
autofocus:讓光標聚焦在某個input元素上，方便用戶直接輸入。<input name="user" autofocus>
disabled:禁止input元素 （連點擊都不能）
list：為文本框提供建議值
<form>
<input type="text" list="abc">
<button>提交</button>
</form>
<datalist id="abc">
<option value="1">湖南</option>
<option value="2">海南</option>
</datalist>
value:默認在輸入框內出現的值
form：與表單外的數據掛鉤一遍提交
<form id="register" name="reg" action="index.html">
用戶名：<input name="user">
<button>提交</button>
</form>
年齡：<input name="age" form="register">
label標簽:把文字和input標簽包裹起來可以方便設置樣式，并且當用戶點擊文字的時候，光標會自動移入到對應的input框。（如果只是設置了文字用label包裹，又想點擊文字將標簽自動移入對應的框，可以將label的屬性for的值設置成與input的id設置成一樣）
<label for="user"> 用戶名：</label>
<input id="user" name="user">
fieldset標簽:對表單進行編組。三個屬性name、form、disabled
legend標簽：添加分組說明的標簽（也就是說給分組加上一個標題）
<fieldset>
<legend>注冊分組</legend>
<label for="user"> 用戶名：</label>
<input id="user" name="user">
<button>提交</button>
</fieldset>
button標簽:創建一個按鈕。type屬性有三個值，submit表示提交，reset表示重置，也就是把input的值變成初始值。button表示一個普通的按鈕。
select標簽：下拉列表。需要和option標簽配合使用。
name屬性：設定提交時的名稱
disabled屬性：將下拉列表禁用
form屬性：將表單外部與內部掛鉤
size屬性：下拉列表的個數
multiple屬性：設置是否可以多選
required:選擇驗證，必須選擇后才能通過
<select name="fruit" size="5" multiple >
<!--value值是真正要提交上去的值，而后面的是顯示到頁面的值-->
<option value="1">花花菇涼</option>
<option value="2">文小喵</option>
</select>
optgroup標簽:對列表進行分組選擇。
<form action="http://www.baidu.com">
<select name="fruit" multiple size="5">
<optgroup label="表情包">
<option value="1">花花菇涼</option>
<option value="2">文小喵</option>
</optgroup>
<optgroup label="書">
<option value="4" selected>微微一笑很傾城</option>
<option value="5">神雕俠侶</option>
</optgroup>
</select>
<button>提交</button>
</form>
textarea標簽:生成一個可變大小的多行文本框
<!--wrap表示是否插入換行符 有soft和hard兩種。hard提交之后在地址欄可以看見%插入的隱藏換行符-->
<textarea name="content" rows="20" cols="30" wrap="hard"></textarea>
pattern：正則表達式。開頭和結尾用^和$ novalidate屬性表示不要驗證該表單
<input type="text" placeholder="請輸入區號和座機" pattern="^[\d]{2,4}\-[\d]{6,8}$">
html對網頁頁面的布局或者是表單驗證等功能都相對簡陋，并且不同的瀏覽器支持的成熟度是不盡相同的。因此在大部分情況下，還是要借助js或jqury等前端庫，來呈現豐富多彩的驗證效果。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
