整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
/满满都是爱
两年前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 href="http://www.baidu.com">百度</a> 这个属性是必须的，否则a元素就变得毫无意义。它的属性值意味着点击跳转到指定的外部网站去。
target属性<a href="http://www.baidu.com" 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" href="http://www.baidu.com" target="_blank" alt="方形">
</map>
iframe标签：嵌入另一个文档。表示在一个页面内建立一个区域引入另一个页面。
<a href="index.html" >index</a>
<a href="http://www.baidu.com" 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小时内与您取得联系。
