零基础参加HTML5培训需要知道的技术点

2018-09-13 10:05:22 424浏览

在你没有基础但是还要参加HTML5培训的时候，你需要提前自学一下，这样才能跟上老师的进度，也能学习的更好。今天小编先来讲一讲HTML5必备知识的第一部分吧。

什么是HTML5？

HTML5是最新的HTML标准，他的主要目标是提供所有内容而不需要任何的像flash，silverlight等的额外插件，这些内容来自动画，视频，富GUI等。

HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（WHATWG）之间合作输出的。

为什么HTML5里面我们不需要DTD（DocumentTypeDefinition文档类型定义）？

HTML5没有使用SGML或者XHTML，他是一个全新的东西，因此你不需要参考DTD，对于HTML5，你仅需放置下面的文档类型代码告诉浏览器识别这是HTML5文档。

如果我不放入<!DOCTYPEhtml>，HTML5还会工作么？

不会，浏览器将不能识别他是HTML文档，同时HTML5的标签将不能正常工作

哪些浏览器支持HTML5？

几乎所有的浏览器Safari，Chrome，Firefox，Opera，IE都支持HTML5

HTML5的页面结构同HTML4或者更前的HTML有什么区别？

一个典型的WEB页面包含头部，脚部，导航，中心区域，侧边栏。现在如果我们想在在HTML4的HTML区域中呈现这些内容，我们可能要使用DIV标签。

但是在HTML5中通过为这些区域创建元素名称使他们更加清晰，也使得你的HTML更加可读。

我们如何使用Canvas来画一条简单的线？

定义Canvas区域

获取访问canvas上下文区域

绘制图形

?定义Canvas区域

定义Canvas区域你需要使用下面的HTML代码，这定义了你能进行绘图的区域。

<canvasid="mycanvas"

width="600"

height="500"

style="border:1pxsolid#000000;">

</canvas>

获取画布区域的访问。

在画布上进行绘图我们首先需要获取上下文区域的关联，下面是获取画布区域的代码。

varc=document.getElementById("mycanvas");

varctx=c.getContext("2d");

绘制图形

现在一旦你获取了访问上下文，我们就可以开始在上下文中绘制了。首先调用“move”方法并从一个点开始，使用线条方法绘制线条然后使用stroke方法结束。

ctx.moveTo(10,10);

ctx.lineTo(200,100);

ctx.stroke();

以下是完整的代码。

<bodyonload="DrawMe();">

<canvasid="mycanvas"width="600"

height="500"

style="border:1pxsolid#000000;">

</canvas>

</body>

<script>

functionDrawMe()

{

varc=document.getElementById("mycanvas");

varctx=c.getContext("2d");

ctx.moveTo(10,10);

ctx.lineTo(200,100);

ctx.stroke();

}

今天第一部分的知识点就分享到这里了，大家还有什么疑问可以留言哦，想要了解更多关于HTML5开发方面内容的小伙伴可以登录扣丁学堂官网咨询。扣丁学堂不仅有专业的HTML5培训班供大家学习，还有与时俱进的课程体系和大量的HTML5在线视频教程让学员免费观看学习，想要快速学习HTML5开发就到由专业老师授课的扣丁学堂学习吧。扣丁学堂H5技术交流群：559883758。

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>