HTML 5 自学第一天

作者: 吃屁的小栗子 | 来源:发表于2017-09-19 15:27 被阅读7次

扣丁学堂HTML5怎么学更快捷
HTML 5 自学第一天
自学HTML5多久能就业自学HTML5难度大吗
HTML5---01
html5和css3
web面试题
给大家分享一套零基础学习HTML5的教程，无门槛，用心就能学会
市场小白的html5之路-1
spring boot整合Websocket笔记
基础

准备工作——开发工具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>

效果图