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

2024-04-15 18:41:51

本节书摘来自异步社区《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 style="position: absolute; top: 50px; left: 50px; ">
Hello World!
</div>
</body>
</html>

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

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

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

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

《HTML5 canvas开发详解（第2版）》——1.9　HTML5 Canvas对象
本节书摘来自异步社区<HTML5 canvas开发详解(第2版)>一书中的第1章,第1.9节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社 ...
《HTML5 Canvas开发详解》——1.7　2D上下文及其当前状态
本节书摘来自异步社区<HTML5 Canvas开发详解>一书中的第1章,第1.7节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区&quo ...
《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节
本节书摘来自异步社区<Web前端开发精品课--HTML5 Canvas开发详解>一书中的第1部分,第2章,作者:莫振杰著,更多章节内容可以访问云栖社区"异步社区"公众 ...
《HTML5 Canvas开发详解》——导读
https://yqfile.alicdn.com/bc81e95aba389209ecb7176965c56b0ba2d9c780.png" > 前言 HTML5 Canvas为开发 ...
《Linux设备驱动开发详解(第2版)》隆重出版
Linux设备驱动开发详解(第2版)(前一版狂销3万册,畅销书最新升级) [新品] 点击看大图基本信息 * 作者: 宋宝华 * 出版社:人民邮电出版社 * ISBN:97 ...
linux设备驱动总结,《Linux设备驱动开发详解(第3版)》海量更新总结
本博实时更新<Linux设备驱动开发详解(第3版)>的最新进展. 2015.2.26 几乎完成初稿. [F]是修正或升级:[N]是新增知识点:[D]是删除的内容第1章 <Linux ...
linux设备驱动开发详解第三版,《Linux设备驱动开发详解(第3版)》进展同步更新...
2014.8.25 目前初步完成2-11章以及第22章 <Linux设备驱动的调试>,相对于第2版,这几章主要的变更. 本博实时更新<Linux设备驱动开发详解(第3版)>的最 ...
《Linux设备驱动开发详解(第3版)》（即《Linux设备驱动开发详解：基于最新的Linux 4.0内核》）进展同步更新
本博实时更新<Linux设备驱动开发详解(第3版)>的最新进展. 目前已经完成稿件. 2015年8月9日,china-pub开始上线预售: http://product.china-pub ...
Linux设备驱动开发详解第3版（即 Linux设备驱动开发详解基于最新的Linux 4 0内核）前言
Linux从未停歇脚步.Linus Torvalds,世界上最伟大的程序员之一,Linux内核的创始人,Git的缔造者,仍然在没日没夜的合并补丁,升级内核.做技术,从来没有终南捷径,拼的就是坐冷板凳的 ...

最新文章

热门文章