準備工作——開發工具Webstorm
1.MacBooK 安裝
Webstorm 2016.2 破解版 傳送門
安裝介紹不太詳細，有的小伙伴會看不太懂。
推薦：【干貨技術貼】之-mac下如何安裝WebStorm + 破解 傳送門
2.簡單了解
新建項目之后稍微了解了一下常用標簽
隨便練練手，主要是標題、圖片、video、畫布等簡單操作
3.隨手練習的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CJLLearnHTML5</title>
<!--畫布-->
<!--id frame style 邊框 顏色-->
<canvas id="myCanvas" width="320" height="240" style="border: 1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.fillRect(0, 0, 160, 120);
var c = document.getElementById("myCanvas");
var cat = c.getContext("2d");
cat.fillStyle = "#48FF4C";
cat.fillRect(160, 120, 160, 120);
var c = document.getElementById("myCanvas");
var cct = c.getContext("2d");
cct.fillStyle = "#1614FF";
cct.fillRect(160, 0, 160, 120);
</script>
<text>hello world! </text>
<h1>1</h1>
<h2>2</h2>
</head>
<body>
<source style="text-align:center;">
<!--// 按鈕-->
<button onclick="palyPause()">我是播放按鈕</button>
<!--// 圖片 frame 路徑 拖拽 規定被拖動的數據-->
<img width="320" height="240" src="1.jpg" draggable="true"
ondragstart="drag(event)">
</img>
</div>
</body>
</html>
效果圖
H5.png
有待進一步了解學習。歡迎各位大神指出不足指出或者意見建議，或者自學的網站！感謝
