《HTML5 canvas开发详解（第2版）》——1.3　本书使用的基础HTML页面

本节书摘来自异步社区《HTML5 canvas开发详解（第2版）》一书中的第1章，第1.3节,作者： 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.3 本书使用的基础HTML页面

可以使用多个HTML标签来创建HTML页面，在HTML以前的版本中，需明确指示Web浏览器如何渲染HTML页面的标签（例如 font 和 center ）。然而，在过去10年中，浏览器的标准越来越严格，这类标签就被束之高阁了。CSS（层叠样式表）成为定义HTML内容样式的主要方式。因为本书不是关于如何创建HTML页面的（页面中不包含Canvas），因此这里不打算讨论CSS的内部工作原理。

本节将只关注两个最基本的HTML标签： div 和 canvas 。

1.3.1 div
div 是本书主要使用的一个HTML标签，用来定位 canvas 在HTML页面的位置。

例1-2使用 div 标签定义了“Hello World!”在屏幕上的位置，如图1-2所示。

例1-2 HTML5中的“Hello World！”

 !doctype html 

 html lang="en" 

 head 

 meta charset="UTF-8" 

 title CH1EX2: Hello World HTML Page With A DIV /title 

 /head 

 body 

 div 

Hello World!

 /div 

 /body 

 /html 

https://yqfile.alicdn.com/4e97e9fed2442183dd43257e348fe428d9303617.png"

——这段代码是在HTML页面中使用内联CSS的例子。它告诉浏览器呈现内容的绝对位置为：距离页面顶端50像素，并且距离页面左端50像素。

警告
这个 div 可以在浏览器中定位画布，但是对试图在画布上捕捉鼠标点击时则没有任何帮助。在第5章中，本书将讨论一种既能定位画布又能捕获正确的鼠标点击位置的方法。
1.3.2
利用对 div 进行绝对定位，有助于更好地使用 canvas 。把 canvas 放在 div 内， div 可以帮读者获取信息。例如，当鼠标滑过画布时，可以获取定义指针的相对位置。

【重构前端知识体系之HTML】讲讲对HTML5的一大特性——语义化的理解 在讲什么是语义化之前，先看看语义化的背景。 在之前的文章中提到HTML最重要的特性，那就是标签。但是项目一大，标签多的看不懂，一堆叠着一堆。一些命名奇奇怪怪，想维护被劝退，团队协作导致团战开始！ 因此语义化迫在眉睫！
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。