Canvas教程(1)——HTML5简介

前言

今后的一个月内会连载详细的Canvas教程,从零基础开始,到Canvas API,再到基本动画与高级动画的实现,还会介绍视音频的处理、移动应用,最后如果有时间会扩展说一说3D、多人应用、游戏制作等。所以本课程虽说是Canvas教程,但其实就是详细的介绍Canvas API,之后基于Canvas实现其他更高级的功能。

如果你学过HTML4,或者CSS、Javascript,那么相信你入手起来会很快;如果你啥都没学过,属于零基础,那就更好了。因为你保有对这个未知领域的好奇心,这一切都会激发你更加努力的向前。而且零基础的童鞋也不用担心,本教程会在用到其他知识的时候会有详细的扩展说明,以Canvas为线索,学完它你基本上一系列的知识也都学会了,买一送一简直不能更赚了!其中也会穿插讲解数学、物理学、运动学的一些简单的知识,每个知识点都会提供案例,每个案例都会提供页面演示,源文件可以去我托管在github上的一个开源项目上下载。

提示:本教程中有链接的地方都不妨点一点 :)

好了,是不是摩拳擦掌、迫不及待准备上了?那就让我们开始走进HTML5的世界吧!

HTML5介绍

HTML5是新一代的HTML(Hyper Text Markup Language),即超文本标记语言,于去年10月28日正式发布,它是全新的、互联网上构建页面的标准语言。

那么究竟什么是HTML5?在W3C HTML5的常见问题中,关于HTML5是这样说明的:HTML5是一个开放的平台下开发的免费许可条款。

具体来说,对这句话有以下两种理解:

  • 指一组共同构成了未来开放式网络平台的技术。这些技术包括HTML5规范、CSS3、SVG、MATHML、地理位置、XmlHttpRequest、Context 2D、Web字体以及其他技术。这一套技术的边界是非正式的,且随时间变化的。
  • 指HTML5规范,当然也是开放式网络平台的一部分。

Canvas的浏览器支持

主流浏览器

由于课程的主要内容是Canvas,以下我列出了最流行的Web浏览器以及它们开始支持Canvas元素的最小版本号。

Safari Firefox IE Chrome Opear iOS Safari Android Brower
3.2 3.5 9 9 10.6 3.2 2.1

这里我推荐使用Chrome。

所以在学习本课程之前,赶快给你的电脑装上最新版的Chrome吧!

基础的HTML5页面

简单的HTML5页面

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>基础的HTML5页面</title> 
</head>
<body>
Hello Airing! 
</body> 
</html>

演示 1-1

运行结果如下:

示例1-1

HTML是由一个个形如尖括号<>的标签元素组成,这些标签通常是成对出现,并且标签之间只能嵌套不能交叉

扩展:

成对出现的叫做闭合标签,单个出现的叫做单标签。不管怎样都是闭合的(单标签可以不闭合,但是在XHTML中严格要求了闭合)。闭合标签又分为开始标签和结束标签,如<body>是开始标签,</body>是结束标签。自标签如<input/> <br/>等。

关于更多的标签,建议大家自行了解一下。推荐W3school平台自学。

这里我们着重讲一下上述代码中出现的标签。

<!doctype html>

这个标签说明 Web 浏览器将在标准模式下呈现页面。根据 W3C 定义的 HTML5 规范,这是 HTML5 文档所必需的。这个标签简化了长期以来在不同的浏览器呈现 HTML 页面时出现的奇怪差异。它通常为文档中的第一行。

<html lang="en">

这是包含语言说明的<html>标签,例如,"en"为英语,"zh"为中文。

<head>...</head>

这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。头部中最常用的标记符是<title>标记符和<meta>标记符。

以下表格列出了HTML head 元素下的所有标签和功能:

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件
<meta charset="UTF-8">

这个标签说明 Web 浏览器使用的字符编码模式,这里通常设置为UTF-8。如果没有需要特别设置的没必要改变它。这也是 HTML5 页面需要的元素。

<title>...</title>

这个标签说明在浏览器窗口展示的 HTML 的标题。这是一个很重要的标记,它是搜索引擎用来在 HTML 页面上收录内容的主要信息之一。

<body>...</body>

网页中显示的实际内容均包含在这2个<body>之间。

综上,HTML5网页是由第一行的<!doctype html><html>部分组成,而<html>主要分为两部分——由<head>标签规定的头部部分,和由<body>规定的主体部分。

这样,我们就把最简单的HTML网页的基本结构给捋出来了。

好的,接下来就让我们的主角Canvas登场吧!不过,在此之前,建议大家自行了解一下HTML的常用标签及其功能~


如果您喜欢本书,请使用支付宝扫描下面的二维码捐助作者。

二维码

谢谢您的支持!也欢迎您订阅本书。

如果书中有疏漏或错误之处,敬请您指出,期待您的pull request。如果有任何疑问也可以发送issue。

本人邮箱:airing@ursb.me

本人博客:http://ursb.me

本书地址:http://airingursb.gitbooks.io/canvas

本书github:http://github.com/airingursb/canvas

Canvas--Draw on the Web
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 4,087评论 1 25
  • 问答题1 /72浏览器页面有哪三层构成,分别是什么,作用是什么?参考答案构成:结构层、表示层、行为层分别是:HTM...
    _Yfling阅读 1,232评论 0 23
  • 1. 浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层、表示层、行为层分别是:HTML、CSS、Ja...
    程序猿人王小贱阅读 1,894评论 1 11
  • 1. 介绍 浏览器可能是最广泛使用的软件。本书将介绍浏览器的工作原理。我们将看到,当你在地址栏中输入google....
    康斌阅读 2,061评论 7 18
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92