整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
tml5中常用的结构标签
article 文章
header 头部
nav 导航
section 区域
aside 侧边栏
hgroup 区块的相关信息
figure 定义一组内容及标题
figcaption 定义figure元素的标题
footer 底部
dialog 对话框
使用习惯：
header/section/footer > aside/article/figure/hgroup/nav > div
embed可插入flash文件，但flash已经逐渐被淘汰，不建议使用
meter状态标签，可以定义电压
optimum是标准状态
low与high之间呈现绿色，其余呈现黄色
<meter value=”220” min=”20” max=”380” low=”200” high=”240” optimum=”220”></meter>自动计算百分比
<meter value="0.75">75%</meter>有步长的进度条
<progress value="30" max="100"></progress>不断加载的进度条
<progress max="100"></progress>datalist为input定义下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<input placeholder="请选择手机品牌" list="phoneList">
<datalist id="phoneList">
<option value="iphone">iphone</option>
<option value="samsung">samsung</option>
<option value="huawei">huawei</option>
<option value="oppo">oppo</option>
<option value="htc">htc</option>
</datalist>
</body>
</html>details定义元素的详细内容，配合summary
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<details>
<summary>HTML5</summary>
<p>HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。 [1-2] </p>
</details>
</body>
</html>ruby和rt进行拼音的注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
我们来<ruby>夼<rt>kuang</rt></ruby>一个话题
</body>
</html>兼容浏览器的写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
我们来<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp></ruby>一个话题
</body>
</html>mark黄色选中效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<p>妈妈叫我回家的时候顺路买一盒<mark>牛奶</mark>，需要很新鲜的那种。</p>
</body>
</html>output表单计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<form oninput="sum.value=parseInt(num1.value)*parseInt(num2.value)">
<input type="number" id="num1">*
<input type="number" id="num2">=<output name="sum" for="num1 num2"></output>
</form>
</body>
</html>date pickers在移动端效果比较好
week兼容性不好
datetime兼容性不好，推荐用datetime-local
time用来设置时间（小时和分钟）；
month用来设置年和月；
date用来设置年月日；
datetime用来设置年月日和时间；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
email:<input type="email" name="email"><br>
url:<input type="url" name="url"><br>
tel:<input type="tel" name="tel"><br>
number:<input type="number" name="number"><br>
date:<input type="date" name="date"><br>
month:<input type="month" name="month"><br>
week:<input type="week" name="week"><br>
time:<input type="time" name="time"><br>
datetime:<input type="datetime" name="datetime"><br>
datetime-local:<input type="datetime-local" name="datetime-local"><br>
range:<input type="range" name="range" min="1" max="10"><br>
search:<input type="search" name="search"><br>
color:<input type="color" name="color"><br>
</body>
</html>autocomplete属性规定form或input域拥有自动完成功能，该属性适用于<form>标签和<input>标签
autofocus自动获取焦点
multiple多选，适用于email和file，email中不同邮箱用,隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<form action="lesson2_1 autocomplete.html" autocomplete="on">
<input type="text" name="text" autofocus="autofocus" placeholder="您好，请在这里输入您的用户名！"><br>
<input type="email" name="email" autocomplete="off" multiple="multiple"><br>
<input type="file" name="file" multiple="multiple"><br>
<input type="submit">
</form>
</body>
</html><link>标签中，sizes属性可以规定被链接资源的尺寸的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="icon" href="icon.gif" type="image/gif" sizes="16x16">
<base href="http://localhost" target="_blank">
</head>
<body>
</body>
</html>script:
defer 页面已完成加载后再执行脚本
async 一旦脚本可用，则异步执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script async="async" type="text/javascript" src="async.js"></script>
<script defer="defer" type="text/javascript" src="defer.js"></script>
</head>
<body>
</body>
</html>ol有序列表倒序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ol</title>
</head>
<body>
<ol start="2" reversed="reversed">
<li>Html</li>
<li>Html5</li>
<li>Css</li>
<li>Css3</li>
<li>JavaScript</li>
</ol>
</body>
</html>html页面布局demo:
demo.html
----------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<a href="index.html"><img src="images/logo.png"></a>
<nav>
<a class="active" href="index.html">Home</a>
<a href="#">Course</a>
<a href="#">Actual</a>
<a href="#">Plan</a>
<a href="#">FAQ</a>
<a href="#">Notes</a>
</nav>
</div>
</header>
<section class="banner">
<ul>
<li class="active"><img src="images/banner/banner1.jpg"></li>
<li class="left"><img src="images/banner/banner3.jpg"></li>
<li class="right"><img src="images/banner/banner2.jpg"></li>
</ul>
</section>
<section class="main">
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><img src="images/Course/05_05.png"></dd>
<dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd>
</dl>
<dl>
<dt>Cascading Style Sheets</dt>
<dd><img src="images/Course/06_04.png"></dd>
<dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>
</dl>
<dl>
<dt>JavaScript</dt>
<dd><img src="images/Course/09_07.png"></dd>
<dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd><img src="images/Course/02_09.png"></dd>
<dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd>
</dl>
</aside>
<article>
<h1>Welcome to <samp>Massive Open Online Course!</samp></h1>
<p>We provide the latest knowledge to help you cope with the changing world!</p>
<img src="images/article.jpg">
<p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p>
<p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p>
</article>
</section>
<footer>
<div class="container">
<p>Copyright ? 2019 test.com All Rights Reserved.</p>
<span>
<img src="images/icon/weichat.png">
<img src="images/icon/sina.png">
<img src="images/icon/qq.png">
</span>
</div>
</footer>
</body>
</html>style.css
------------------------------------------
/* All tag */
* { font-family: Arial; font-size: 14px; margin: 0; padding: 0; border: none; }
a { text-decoration: none; }
ul { list-style: none; }
/* header */
header { position: relative; height: 80px; background: #000; }
header:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 7px; content: ''; background: #d6d6d6; }
header > .container { position: relative; z-index: 1; width: 1200px; margin: 0 auto; }
header > .container > a { display: block; float: left; margin: 5px 25px; }
header > .container > nav { float: right; }
/* nav */
nav > a { font-size: 24px; line-height: 73px; display: block; float: left; width: 110px; height: 73px; text-align: center; color: #fff; }
nav > a:nth-child(1) { background: #433b90; }
nav > a:nth-child(2) { background: #017fcb; }
nav > a:nth-child(3) { background: #78b917; }
nav > a:nth-child(4) { background: #feb800; }
nav > a:nth-child(5) { background: #f27c01; }
nav > a:nth-child(6) { background: #d40112; }
nav > a:hover,
nav > a.active { padding-bottom: 7px; }
/* banner */
.banner { position: relative; background: #eaeaea; }
.banner:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; content: ''; background: #d6d6d6; }
.banner > ul { position: relative; width: 1490px; height: 538px; margin: 0 auto; padding-top: 10px; }
.banner > ul > li { position: absolute; width: 610px; height: 300px; overflow: hidden; }
.banner > ul > li.active { z-index: 2; top: 37px; right: 0; left: 0; width: 960px; height: 460px; margin: auto; border: 1px solid #fff; box-shadow: 0 30px 140px 22px rgba(0, 0, 0, .35); }
.banner > ul > li.left { z-index: 1; top: 0; bottom: 0; left: 0; margin: auto; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35); }
.banner > ul > li.right { z-index: 1; top: 0; right: 0; bottom: 0; margin: auto; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35); }
.banner > ul > li > img { position: absolute; left: -30%; height: 100%; }
/* main */
.main { position: relative; width: 1200px; height: 473px; margin: 34px auto 0; }
.main h1 { font-size: 30px; font-weight: lighter; margin-bottom: 23px; }
.main h1 > samp { font-size: 30px; color: #7c7c7c; }
.main > aside { float: left; width: 450px; }
.main > aside > dl { position: relative; display: block; height: 74px; margin-bottom: 17px; }
.main > aside > dl > dt { position: absolute; top: -1px; left: 92px; font-size: 16px; font-weight: bold; line-height: 16px; text-decoration: underline; }
.main > aside > dl > dd:first-of-type { position: absolute; left: 0; }
.main > aside > dl > dd:last-of-type { position: absolute; top: 20px; left: 90px; }
.main > article { float: right; width: 720px; overflow: hidden; }
.main > article > p,
.main > article > img { margin-bottom: 20px; }
/* footer */
footer { position: relative; background: #000; }
footer:before { position: absolute; z-index: -1; top: -6px; left: 0; width: 100%; height: 6px; content: ''; background: #d6d6d6; }
footer > .container { width: 1200px; height: 64px; margin: 0 auto; }
footer > .container > p { line-height: 64px; float: left; color: #fff; }
footer > .container > span { float: right; margin: 14px 40px; }
footer > .container > span > img { margin-left: 4px; opacity: .7; }
footer > .container > span > img:hover { opacity: 1; cursor: pointer; }html页面布局demo2:
年初，当白鹭时代CEO陈书艺喊出“2017年HTML5游戏市场规模将突破30亿大关，最高可达到50亿”这一观点时，曾引起了业界的轰动。但在一大波“传奇类”HTML5游戏产品的带动下，50亿的市场规模已经不是天花板。明年HTML5游戏的市场规模突破百亿大关，也不再是痴人说梦。
为何手游那点事敢于作出这样的研判，这与当下HTML5游戏市场的“火爆”有着密切的关系。
当2015年年初《愚公移山》的月流水突破百万之时，不少从业者高呼HTML5游戏的春天已经到来；而一年后，当蝴蝶互动宣布《传奇世界》成为业界首款流水过千万的产品之时，引起业界一片哗然。
据手游那点事的了解，目前一款质量尚可的HTML5游戏，特别是传奇类，过千万的月流水已渐成常态。不少优质产品的月流水集中在一千至二千万这一区间。根据手游那点事收集到的信息，目前几款HTML5游戏市场的头部产品，月流水已经突破五千万，这一收入也超过原生手游市场上的大部分产品。
360游戏年初对于HTML5游戏的分析报告
随着产品收入的提高，市场也出现了不少新组建的HTML5游戏研发和发行团队。不少有实力的团队，在成立不到半年的时间内，月流水已经达到数百万的量级。更重要的是，它们实现了自负盈亏，这和过去两年不少“赔钱赚吆喝”的HTML5游戏企业形成了鲜明的对比。
而不少手游发行商，也在今年内或明或暗地进入了HTML5游戏领域。保守估计，仅在广州一地，HTML5业务月流水破两千万的手游发行商就不下5家，而月流水在千万级别的则有十数家之多。凭借在产品调优和买量上的丰富经验，这些手游发行商也迅速地成为了HTML5市场有力的竞争者。
在不少HTML5游戏从业者看来，虽然目前HTML5游戏的市场规模在迅速扩张，但是大部分增长的背后都指向了同一种方式，那就是“页游化”。这也是为何华南的游戏企业能在HTML5游戏业务上突飞猛进的重要原因。
早在2015年初，触控科技CEO陈昊芝就提出了“手机页游”这一概念，来代替HTML5游戏。或许令他自己也没有想到的是，两年后，HTML5游戏市场无论是产品属相还是市场打法，都在“页游化”的道路上越走越远。
首先是产品层面，页游化的标志，无疑是大量以“挂机+ARPG”为核心的传奇类HTML5游戏的出现。这类游戏最大的共通点就是拥有像素级的画面以及几乎不用玩家任何操作的玩法。有业内人士透漏，目前市面上百余款传奇类HTML5游戏，其实真正的源代码（数值）不超过10款，大部分都是换皮甚至只是换名字和icon的产品。
HTML5游戏大量重复的产品
其次是在入口方式上，与传统HTML5游戏“即玩即走，随处是入口”的特点不同，这些传奇类的HTML5游戏，往往有自己的包体，玩家需要通过下载才能进入游戏。不过这些的包体往往只有1-2m，对于用户而言，下载一个这样的包可以说毫无负担。但对于发行商来说，这样的做法不仅可以更好地留住用户，更为重要的是，他们可以通过买量，解决HTML5游戏渠道少、获取用户难等一系列问题。
最后自然是在市场打法上，正因为“微端”的特点，现阶段不少HTML5游戏正是通过疯狂买量的来获取大量的用户。有消息指，个别厂商在微端买量上的投入费用达到了千万规模，这也与过往页游主要获取用户的方式雷同。
通过对得到市场验证、成熟的产品（数值）进行换包、换皮等的手段快速上线，再通过大规模买量的模式来“洗”用户，这就是目前大部分传奇类HTML5游戏和发行商的商业逻辑。以至于有从业者表示：“一旦被页游公司盯上的话，（哪个行业）基本都是那套玩法了。”
但除却这些传奇类产品，其他类型的HTML5游戏则显得不温不火，这也是目前HTML5游戏市场最大的问题所在。
2017年上半年，能被业界所熟知的非传奇类HTML5游戏并不多，《猪来了》、《绝世神功》以及《原谅帽大作战》是当中为数不多的几款。而在今年4月腾讯UP发布会上公布、进入了“极光计划”的《疯狂雪球H5》，至今仍未正式上线。缺产品、特别是优质产品，依旧是HTML5游戏市场的主旋律。
《疯狂雪球H5》入选了腾讯的“”极光计划
此外，流量仍然是绕不过去的一道坎。有消息指，目前市场最大的流量入口腾讯对HTML5游戏的扶持力度并没有预期中那样大。在微信上，腾讯十分谨慎地选择了自研产品而非第三方产品作为第一波的尝试；而在手Q中，腾讯则对合作产品的类型和数量有着明确的要求，并且入口较深，不容易被发现。而腾讯体系以外的流量，也相对集中在头部的几个渠道当中，竞争相当激烈。
而由于传奇类HTML5游戏大火，迫于变现和KPI的压力，渠道也将更多的资源倾斜到这类型的游戏上。这也导致相较以往，非传奇类的产品需要更高的质量和更好的数据才能打动渠道。而这无疑令HTML5游戏的研发成本大为上升。据悉，单款非传奇类HTML5游戏的研发成本从今年年初的几十万，发展成当下的五六十万甚至过百万。
一方面是传奇类产品的持续火热带动整个HTML5游戏市场规模的高速发展；另一方面则是非传奇类产品（团队）在流量、资金上的吃紧。这一看似矛盾的现状，却的的确确发生在当下的HTML5游戏市场中。
可以预见，在没有大的冲击和改变的情况下，未来过百亿规模的HTML5游戏市场收入，恐怕大部分将落入到页游套路（挂机+买量）的公司的手中。
TML5增加标签：
1、结构标签
（1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；
（2）article：特殊独立区块，表示这篇页眉中的核心内容；
（3）aside：标签内容之外与标签内容相关的辅助信息；
（4）header：某个区块的头部信息/标题；
（5）hgroup：头部信息/标题的补充内容；
（6）footer：底部信息；
（7）nav：导航条部分信息
（8）figure：独立的单元，例如某个有图片与内容的新闻块。
2、表单标签
（1）email：必须输入邮件；
（2）url：必须输入url地址；
（3）number：必须输入数值；
（4）range：必须输入一定范围内的数值；
（5）Date Pickers：日期选择器；
a.date：选取日、月、年
b.month：选取月、年
c.week：选取周和年
d.time：选取时间（小时和分钟）
e.datetime：选取时间、日、月、年（UTC时间）
f.datetime-local：选取时间、日、月、年（本地时间）
（6）search：搜索常规的文本域；
（7）color：颜色
3、媒体标签
（1）video：视频
（2）audio：音频
（3）embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。
4、其他功能标签
（1）mark：标注（像荧光笔做笔记）
（2）progress：进度条；<progress max="最大进度条的值" value="当前进度条的值">
（3）time：数据标签，给搜索引擎使用；发布日期<time datetime="2014-12-25T09:00">9：00</time>更新日期<time datetime="2015-01-23T04:00" pubdate>4:00</time>
（4）ruby和rt：对某一个字进行注释；<ruby><rt>注释内容</rt><rp>浏览器不支持时如何显示</rp></ruby>
（5）wbr：软换行，页面宽度到需要换行时换行；
（6）canvas：使用JS代码做内容进行图像绘制；
（7）command：按钮；
（8）deteils ：展开菜单；
（9）dateilst：文本域下拉提示；
（10）keygen:加密；
ES6常用新特性总结
1.let && const
let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
const用于声明一个常量，设定后值不会再改变。
2.iterable类型（遍历器（Iterator）)
为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型，具有iterable类型的集合可以通过新的for … of循环来遍历。
3.箭头函数
ES6中新增箭头操作符用于简化函数的写法，操作符左边为参数，右边为具体操作和返回值。
箭头函数还修复了this的指向，使其永远指向词法作用域
4.类
ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类，与多数传统语言类似。
*请认真填写需求信息，我们会在24小时内与您取得联系。
