Ch1 HTML5简介

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

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

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

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

    具体来说，对这句话有以下两种理解：

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

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

    这里我推荐使用Chrome。

    简单的HTML5页面

    演示 1-1

    运行结果如下：

    示例1-1

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

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

    <!doctype html>
    <html lang="en">

    这是包含语言说明的标签，例如，”en”为英语，”zh”为中文。

    <head>…</head>

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

    <meta charset="UTF-8">

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

    <title>…</title>

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

    <body>…</body>

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

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

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

    好的，接下来就让我们的主角Canvas登场吧！不过，在此之前，建议大家自行了解一下~