首页 > web前端 > H5教程 > 零基础学习HTML5

零基础学习HTML5

PHP中文网
发布: 2017-06-21 10:28:43
原创
3996 人浏览过

1个HTML5基础入门教程,4个HTML5小项目教程,带你零基础入门学习HTML5。

【HTML5基础入门】

教程将会介绍HTML5中的新特性,包括结构标签、新型表单标签、文件操作、Canvas、本地存储等。适合对前端编程有兴趣,已经学了HTML的人学习。

实验列表:

image.png

【基于 HTML5 实现本地图片裁剪】

该项目实现利用 HTML5 的 canvas 技术,结合 HTML5 的 File AP I来实现图片的本地裁剪。通过该项目将学习到如何结合 HTML5 与 JavaScript 编写简单的单页应用。项目难度一般,适合刚入门前端的同学,需要了解 cavas 并且有 JavaScript 基础。

效果图:

HTML5剪裁图片效果图1.gif

【基于HTML5 Canvas实现小游戏】

该项目基于 HTML5 的 canvas 实现了一个小游戏,着重介绍了 HTML5 游戏开发的流程及游戏开发中需要处理的东西。对 Web 游戏开发感兴趣的同学可以通过这个项目实践 HTML5 及 JavaScript 基础知识。

效果图:

canvas小游戏.gif

【基于 HTML5 实现刮刮乐效果 】

该项目使用 HTML5 来完成 “刮刮乐” 的刮奖效果。HTML5 是 HTML 的第5代版本,也是目前最新的版本,同时项目还用到 JavaScript 相关技术来完成。学习项目有助于巩固前端知识。

效果图:

刮刮乐.png

【HTML5两步实现拼图游戏】

该项目基于 HTML+CSS+JavaScript 实现网页版的拼图游戏。实现过程中将用到 HTML5,CSS3 及 JavaScript 相关知识。完成这个项目,可以进一步扎实前端基础知识。

效果图:

拼图游戏_副本.jpg

最后:

  • 想要查看更多前端教程,点击这里进行查看哦;

  • 前端学习路径学习,点击这里进行查看学习;

以上是零基础学习HTML5的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板