TML5 建立的一些规则：

1. 新特性应该基于html、css、DOM以及JavaScript；
   

2. 减少对外部插件的需求（比如flash）；

3. 更优秀的错误处理；

4. 更多取代脚本的标记；

5. h5应该独立于设备；

6. 开发进程应对公众透明；

H5中新特性：

1. 用于绘画的canvas元素；

2. 用于媒介回放的video和audio元素；

3. 对本地离线存储的更好的支持；

4. 新的特殊内容元素，如header、nav、section、aside、article、footer。

5. 新的表单控件，如calender、date、time、email、url、search。

tml5中是怎么实现绘制图形？

html5中可以实现绘画图形的功能，需要注意的是html5只提供2D，不提供3D绘画功能。canvas元素是H5总新增的元素，它用来专门绘制图形。你也可以把canvas元素理解成一块“画布”，我们可以在其中绘制图形。在canvas元素中绘画不是拿鼠标来绘制图形，实际上在H5完成绘画功能，不仅仅需要canvas元素，而且需要JavaScript脚本来配合才能完成绘制图形。所以说把html5中的canvas元素理解成画布是是合适不过的。

html5中的canvas元素

canvas元素必须要指定id、width（宽）、height（高）属性，虽然canvas元素是H5中用来绘制的图形，但是它的放置放和其他的元素没有区别。比如说canvas id="myCanvas" width="200" height="100"是放置了一个200*100的canvas元素。

html5中的常用的绘制图形

绘制矩形

创建canvas元素→取得上下文（使用canvas对象的getcontent方法获得上下文）→填充绘制边框→设定样式→指定线宽、颜色。代码如下图：

可以用clearRect方法擦除指定区域的图形，使矩形区域颜色变透明，context.clearRect(x,y,width,height)。

绘制圆形

绘制圆形要比矩形复杂一点，需要使用到路径，创建图形路径→关闭路径→调用绘制方法、路径。代码如下：

cxt.beginPath();是开始创建路径，有几次是循环创建路径，每次开始都需要调用beginPath()函数。

cxt.arc(70,18,15,0,Math.PI*2,true);是是创建路径，使用了arc（）方法，它的语法如下：

cxt.closePath();cxt.fill();关闭绘画路径后调用绘制路径。最后给大家一个作业，你可以试试下面的代码在浏览器执行后会是什么图形？

关于“html5中绘制图形”先聊到这。每天学习一个知识点，每日寄语”人生之苦，苦在选择，人生之难，难在放弃”如转载清标明出处。

现在的App当中，我们经常需要在原生界面中插入HTML5页面，需要在两者之间交互，也就是原生代码和HTML5互调方法，一起来了解一下如何实现的吧！

1.原生代码调用HTML5页面方法

例如，app要调用HTML5页面的changeColor(color)的方法，来改变HTML5页面的颜色

1）HTML5

<script type="text/javascript">

2）Android

 wvMain.getSettings().setJavaScriptEnabled(true); //开启JavaScript支持

---------------分割线---------------

2.HTLM5页面调用原生方法

例如，点击HTML5页面的文字，回调原生代码中的callAndroidMethod方法

1）HTML5

 <a onClick="baobao.callAndroidMethod(100,100,'ccc',true)">CallAndroidMethod</a>

除此之外，

html5代码不完全整理

html5文件头

<_meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=no”>

<_meta name=”format-detection” content=”telephone=no”>

第二句是给苹果手机把数字都识别成手机号的功能的禁用代码，苹果数字都当成手机号拨打很恶心。

css部分

a,button,input,optgroup,select,textarea {

-webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/

}

注意下面这句非常有用，不写这句代码苹果手机下默认的圆角，代码重置css也无效。

button,input,optgroup,select,textarea {

-webkit-appearance:none; /*去掉webkit默认的表单样式*/

}

a,button,input,optgroup,select,textarea {

-webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/

}

body {

-webkit-text-size-adjust: 100%!important; /*禁止IOS调整字体大小*/

}

打电话，发短信、发邮件

<_a href=”tel:020-10086″>打电话给:020-10086

<_a href=”sms:10086″>发短信给: 10086

<_a href=”mailto:me@22278.club”>发送邮件: mine@ismyspace.com

css省略号：

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

备注：注意css 已经能够实现多行省略号，但是只能webkit用所以没太大意义不说。

css三角形

border-width: 10px 10px 10px 0; //左箭头

border-color: transparent #fff;

border-style: solid;

width: 0;

盒模型代码简写

盒模型外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。

拿margin示例：

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

1、如果top、right、bottom、left的值相同，如下面代码：

margin:10px 10px 10px 10px;

可缩写为：

margin:10px;

2、如果top和bottom值相同、left和 right的值相同，如下面代码：

margin:10px 20px 10px 20px;

可缩写为：

margin:10px 20px;