TML5 建立的一些規(guī)則：

1. 新特性應(yīng)該基于html、css、DOM以及JavaScript；
   

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

3. 更優(yōu)秀的錯誤處理；

4. 更多取代腳本的標記；

5. h5應(yīng)該獨立于設(shè)備；

6. 開發(fā)進程應(yīng)對公眾透明；

H5中新特性：

1. 用于繪畫的canvas元素；

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

3. 對本地離線存儲的更好的支持；

4. 新的特殊內(nèi)容元素，如header、nav、section、aside、article、footer。

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

tml5中是怎么實現(xiàn)繪制圖形？

html5中可以實現(xiàn)繪畫圖形的功能，需要注意的是html5只提供2D，不提供3D繪畫功能。canvas元素是H5總新增的元素，它用來專門繪制圖形。你也可以把canvas元素理解成一塊“畫布”，我們可以在其中繪制圖形。在canvas元素中繪畫不是拿鼠標來繪制圖形，實際上在H5完成繪畫功能，不僅僅需要canvas元素，而且需要JavaScript腳本來配合才能完成繪制圖形。所以說把html5中的canvas元素理解成畫布是是合適不過的。

html5中的canvas元素

canvas元素必須要指定id、width（寬）、height（高）屬性，雖然canvas元素是H5中用來繪制的圖形，但是它的放置放和其他的元素沒有區(qū)別。比如說canvas id="myCanvas" width="200" height="100"是放置了一個200*100的canvas元素。

html5中的常用的繪制圖形

繪制矩形

創(chuàng)建canvas元素→取得上下文（使用canvas對象的getcontent方法獲得上下文）→填充繪制邊框→設(shè)定樣式→指定線寬、顏色。代碼如下圖：

可以用clearRect方法擦除指定區(qū)域的圖形，使矩形區(qū)域顏色變透明，context.clearRect(x,y,width,height)。

繪制圓形

繪制圓形要比矩形復(fù)雜一點，需要使用到路徑，創(chuàng)建圖形路徑→關(guān)閉路徑→調(diào)用繪制方法、路徑。代碼如下：

cxt.beginPath();是開始創(chuàng)建路徑，有幾次是循環(huán)創(chuàng)建路徑，每次開始都需要調(diào)用beginPath()函數(shù)。

cxt.arc(70,18,15,0,Math.PI*2,true);是是創(chuàng)建路徑，使用了arc（）方法，它的語法如下：

cxt.closePath();cxt.fill();關(guān)閉繪畫路徑后調(diào)用繪制路徑。最后給大家一個作業(yè)，你可以試試下面的代碼在瀏覽器執(zhí)行后會是什么圖形？

關(guān)于“html5中繪制圖形”先聊到這。每天學(xué)習(xí)一個知識點，每日寄語”人生之苦，苦在選擇，人生之難，難在放棄”如轉(zhuǎn)載清標明出處。

現(xiàn)在的App當中，我們經(jīng)常需要在原生界面中插入HTML5頁面，需要在兩者之間交互，也就是原生代碼和HTML5互調(diào)方法，一起來了解一下如何實現(xiàn)的吧！

1.原生代碼調(diào)用HTML5頁面方法

例如，app要調(diào)用HTML5頁面的changeColor(color)的方法，來改變HTML5頁面的顏色

1）HTML5

<script type="text/javascript">

2）Android

 wvMain.getSettings().setJavaScriptEnabled(true); //開啟JavaScript支持

---------------分割線---------------

2.HTLM5頁面調(diào)用原生方法

例如，點擊HTML5頁面的文字，回調(diào)原生代碼中的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”>

第二句是給蘋果手機把數(shù)字都識別成手機號的功能的禁用代碼，蘋果數(shù)字都當成手機號撥打很惡心。

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調(diào)整字體大小*/

}

打電話，發(fā)短信、發(fā)郵件

<_a href=”tel:020-10086″>打電話給:020-10086

<_a href=”sms:10086″>發(fā)短信給: 10086

<_a href=”mailto:me@22278.club”>發(fā)送郵件: mine@ismyspace.com

css省略號：

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

備注：注意css 已經(jīng)能夠?qū)崿F(xiàn)多行省略號，但是只能webkit用所以沒太大意義不說。

css三角形

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

border-color: transparent #fff;

border-style: solid;

width: 0;

盒模型代碼簡寫

盒模型外邊距(margin)、內(nèi)邊距(padding)和邊框(border)設(shè)置上下左右四個方向的邊距是按照順時針方向設(shè)置的：上右下左。

拿margin示例：

margin:10px 15px 12px 14px;/*上設(shè)置為10px、右設(shè)置為15px、下設(shè)置為12px、左設(shè)置為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;