HTML 5 自学第一天
2017-09-19 本文已影响7人
吃屁的小栗子
准备工作——开发工具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
有待进一步了解学习。欢迎各位大神指出不足指出或者意见建议，或者自学的网站！感谢
