HTML5
究竟什么是HTML5?在W3C HTML5的常见问题中,关于HTML5是这样说明的:HTML5是一个开放的平台下开发的免费许可条款。
具体来说,对这句话有以下两种理解:
“
指一组共同构成了未来开放式网络平台的技术。这些技术包括HTML5规范、CSS3、SVG、MATHML、地理位置、XmlHttpRequest、Context 2D、Web字体以及其他技术。这一套技术的边界是非正式的,且随时间变化的。
指HTML5规范,当然也是开放式网络平台的一部分。
”
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。
简单的HTML5页面
XML/HTML Code复制内容到剪贴板
- >
-
- <html lang="zh">
-
- <head>
- <meta charset="UTF-8">
- <title>基础的HTML5页面title>
- head>
-
- <body> Hello Airing! body>
-
- html>
演示运行结果如下:
HTML是由一个个形如尖括号<>的标签元素组成,这些标签通常是成对出现,并且标签之间只能嵌套不能交叉。
扩展:
成对出现的叫做闭合标签,单个出现的叫做单标签。不管怎样都是闭合的(单标签可以不闭合,但是在XHTML中严格要求了闭合)。闭合标签又分为开始标签和结束标签,如
是开始标签,是结束标签。自标签如
等。
关于更多的标签,建议大家自行了解一下。推荐W3school平台自学。
这里我们着重讲一下上述代码中出现的标签。
XML/HTML Code复制内容到剪贴板
- >
这个标签说明 Web 浏览器将在标准模式下呈现页面。根据 W3C 定义的 HTML5 规范,这是 HTML5 文档所必需的。这个标签简化了长期以来在不同的浏览器呈现 HTML 页面时出现的奇怪差异。它通常为文档中的第一行。
XML/HTML Code复制内容到剪贴板
- <html lang="en">
这是包含语言说明的标签,例如,"en"为英语,"zh"为中文。
XML/HTML Code复制内容到剪贴板
- <head>...head>
这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。头部中最常用的标记符是
标记符和标记符。
以下表格列出了HTML head 元素下的所有标签和功能:
标签 |
描述 |
|
定义了文档的信息 |
|
定义了文档的标题 |
|
定义了页面链接标签的默认链接地址 |
|
定义了一个文档和外部资源之间的关系 |
|
定义了HTML文档中的元数据 |
|
定义了客户端的脚本文件 |
|
定义了HTML文档的样式文件 |
XML/HTML Code复制内容到剪贴板
- <meta charset="UTF-8">
这个标签说明 Web 浏览器使用的字符编码模式,这里通常设置为UTF-8。如果没有需要特别设置的没必要改变它。这也是 HTML5 页面需要的元素。
XML/HTML Code复制内容到剪贴板
- <title>...title>
这个标签说明在浏览器窗口展示的 HTML 的标题。这是一个很重要的标记,它是搜索引擎用来在 HTML 页面上收录内容的主要信息之一。
XML/HTML Code复制内容到剪贴板
- <body>...body>
网页中显示的实际内容均包含在这2个
之间。
综上,HTML5网页是由第一行的与部分组成,而主要分为两部分——由标签规定的头部部分,和由规定的主体部分。
这样,我们就把最简单的HTML网页的基本结构给捋出来了。
添加一个Canvas
在HTML中添加Canvas非常简单,只需要在HTML的
部分,添加上