《HTML5 canvas开发详解(第2版)》——1.2 基础的HTML5页面

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" >

时间: 2024-11-10 00:32:25

《HTML5 canvas开发详解(第2版)》——1.2 基础的HTML5页面的相关文章

《HTML5 Canvas开发详解》——第1章 HTML5 Canvas简介1.1 基础的HTML页面

第1章 HTML5 Canvas简介 HTML5是新一代的HTML,即超文本标记语言.HTML从1993年第一次标准化后,便奠定了万维网的基础.HTML通过使用将标签用尖括号(< >)括起来的方式定义Web页面内容. HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域.即时模式是指在画布上呈现像素的方式,HTML Canvas通过JavaScript调用Canvas API,在每一帧完全重绘屏幕上的位图.作为一个程序员,所要做的就是在每一帧渲染之前设置屏幕显示,

《HTML5 canvas开发详解(第2版)》——导读

前言第2版介绍自从本书第1版发行之后,在过去的两年里,HTML5 Canvas的使用有了突飞猛进的增长.本书的第1版可以称得上是第一批介绍Canvas的专著之一.在我们为自己的快速而感到自豪同时也意味着我们曾经独自进行了大量的研究和探索.早在2011年,只有极少数HTML5 Canvas应用的例子和教程.但在2013年情形发生了改变.现在有许多关于HTML5 Canvas的资源可供选择,从框架到API,有许多网站和书籍进行专门的阐述.为了编写第2版,我们进行了大量艰辛的工作来检查在第1版中哪些部

《HTML5 canvas开发详解(第2版)》——1.6 HTML5 Canvas版“Hello World!”

1.6 HTML5 Canvas版"Hello World!" 如前所述,将Canvas放入HTML5页面时第一件要做的事就是,看看整个页面是否已经加载,并且开始操作前是否所有HTML元素都已展现.在用Canvas处理图像和声音的时候,这点会非常重要. 为此,这里要使用JavaScript的事件.当定义的事件发生时,事件从对象发出.其他对象监听事件,这样就可以基于事件进行处理.用JavaScript可以监听对象的一些常见事件,包括键盘输入.鼠标移动以及加载结束. 第一个需要监听的事件是

《HTML5 canvas开发详解(第2版)》——第1章 HTML5 Canvas简介1.1 什么是HTML5

第1章 HTML5 Canvas简介 HTML5是新一代的HTML,即超文本标记语言.HTML从1993年第一次标准化后,便奠定了万维网的基础.HTML通过使用将标签用尖括号(< >)括起来的方式定义Web页面内容. HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域.即时模式是指在画布上呈现像素的方式,HTML Canvas通过JavaScript调用Canvas API,在每一帧中完全重绘屏幕上的位图.作为一名程序员,所要做的就是在每一帧渲染之前设置屏幕的显

《HTML5 Canvas开发详解》——1.5 HTML5 Canvas版“Hello World!”

1.5 HTML5 Canvas版"Hello World!" 如前所述,将Canvas放入HTML5页面时第一件要做的事,就是看看整个页面是否已经加载,并且开始操作前是否所有HTML元素都已展现.用Canvas处理图像和声音的时候这点会非常重要. 为此,这里要使用JavaScript的事件.当定义的事件发生时,事件从对象发出.其他对象监听事件,这样就可以基于事件进行处理.用JavaScript可以监听对象的一些常见事件,包括键盘输入.鼠标移动以及加载结束. 第一个需要监听的事件是wi

《HTML5 canvas开发详解(第2版)》——1.11 动画版本的Hello World

1.11 动画版本的Hello World "Hello World"和"猜字母"本身都是不错的示例,但是它们都没能回答出"为什么"--究竟为什么要使用HTML5 Canvas?自创立以来,静态的图像和文字就是HTML的领域,那么画布的不同之处在哪里呢?要回答这个问题,需要创建第二个"Hello World"示例.这个示例将介绍画布与HTML上的其他显示方式的最大不同之处:动画.在这个示例中,将为"Hello Wor

《HTML5 canvas开发详解(第2版)》——1.9 HTML5 Canvas对象

1.9 HTML5 Canvas对象 Canvas对象是通过在HTML页面的< body >部分中放置< canvas >标签创建的,也可以通过以下代码创建画布实例. var theCanvas = document.createElement("canvas"); Canvas对象有两个相关的属性和方法可以通过JavaScript访问:width和height.这些属性显示当前HTML页面创建的画布的宽度和高度.这里需要强调的是,这两个属性并不是只读的.例如,

《HTML5 canvas开发详解(第2版)》——1.8 2D环境及其当前状态

1.8 2D环境及其当前状态 通过调用Canvas对象的getContext()方法可以获得HTML5的2D环境对象(Canvas RenderingContext2D对象).所有操作都要通过该对象进行.CanvasRenderingContext2D对象包含了在画布上绘图所需的所有方法和属性.CanvasRenderingContext2D(简称环境,后同)采用画布左上角为原点(0,0)的笛卡尔坐标系,坐标轴向右.向下为正方向. 然而,所有这些属性和方法都与当前状态关联使用.当前状态是一个必须

《HTML5 canvas开发详解(第2版)》——2.14 内容预告

2.14 内容预告 本章讨论了很多基础内容,介绍了创建简单和复杂形状的方式,以及如何在画布上绘制和变换这些形状.本章还讨论了如何组合.旋转.缩放.平移.填充这些形状以及为它们创建阴影.不过,HTML5 Canvas探索之旅才刚刚开始.