本节书摘来自异步社区《HTML5 canvas开发详解(第2版)》一书中的第1章,第1.2节,作者: 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.2 基础的HTML5页面
在开始讲解Canvas前,需要谈论一下HTML5的相关标准——这里将使用HTML5来创建Web页面。
HTML是用于在互联网上构建页面的标准语言。本书不会将很多时间花费在讲解HTML上,但HTML是< canvas >的基础,所以不能完全跳过它。
一个基本的HTML页面分成几个部分,通常有< head >和< body >,新的HTML5规范增加了一些新的部分,例如< nav >、< article >、< heade r>和< footer >。
< head >标签通常包含与使用< body >标签来创建HTML页面相关的信息。将JavaScript函数放在< head >中是约定俗成的,稍后讨论< canvas >标签时也会这样做。虽然有理由把JavaScript函数放在< body >中,但是简单起见,最好把JavaScript函数放在< head >中。
基本的HTML页面如例1-1所示。
例1-1 简单的HTML页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH1EX1: Basic Hello World HTML Page</title>
</head>
<body>
Hello World!
</body>
</html>
1.2.1 < !doctype html >
这个标签说明Web浏览器将在标准模式下呈现页面。根据W3C定义的HTML5规范,这是HTML5文档所必需的。这个标签简化了长期以来在不同的浏览器呈现HTML页面时出现的奇怪差异。它通常为文档中的第一行。
1.2.2 < html lang="en" >
这是包含语言说明的< html >标签:例如," en "为英语。下面是一些常见的语言值:
中文——lang= " zh ";
法语——lang= " fr ";
德语——lang=" de ";
意大利语——lang=" it ";
日语——lang= " ja ";
韩语——lang= " ko ";
波兰语——lang= " pl ";
俄语——lang= "ru ";
西班牙语——lang = " es "。
1.2.3 < meta charset="UTF-8" >
这个标签说明Web浏览器使用的字符编码模式。如果没有需要特别设置的选项,一般没必要改变它。这也是HTML5页面需要的元素。
1.2.4 < title >… title >
这个标签说明在浏览器窗口展示的HTML的标题。这是一个很重要的标记,它是搜索引擎用来在HTML页面上收录内容的主要信息之一。
**
1.2.5 一个简单的HTML5页面**
现在,在浏览器中看看这个页面(这是一个伟大的时刻,可以准备好工具开始开发代码了)。打开所选择的文本编辑器以及Web浏览器——Safari、FireFox、Opera、Chrome或IE。
(1)在文本编辑器中,输入例1-1中的代码。
(2)选择路径,保存为CH1EX1.html。
(3)在Chrome、Safari或Firefox的File菜单中,找到Open File命令,单击它,将看到一个能够打开文件的对话框(在Windows下用Chrome时,也可以按Ctrl+O键来打开文件)。
(4)找到刚刚创建的CH1EX1.html。
(5)单击“打开”按钮。
可以看到图1-1所示的结果。
https://yqfile.alicdn.com/f549f8f8982e684707bb9d079d2b40ddee44831c.png" >