整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML5 建立的一些規則：
新特性應該基于html、css、DOM以及JavaScript；
減少對外部插件的需求（比如flash）；
更優秀的錯誤處理；
更多取代腳本的標記；
h5應該獨立于設備；
開發進程應對公眾透明；
H5中新特性：
用于繪畫的canvas元素；
用于媒介回放的video和audio元素；
對本地離線存儲的更好的支持；
新的特殊內容元素，如header、nav、section、aside、article、footer。
新的表單控件，如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文件頭
<_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;
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
