《HTML5 Canvas开发详解》——1.2　本书中使用的基础HTML页面

最新推荐文章于 2018-03-30 22:36:48 发布

weixin_33881140

最新推荐文章于 2018-03-30 22:36:48 发布

阅读量74

点赞数

原文链接：https://yq.aliyun.com/articles/97057

版权

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

1.2　本书中使用的基础HTML页面

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

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

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

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

https://yqfile.alicdn.com/c6ae44567a9c34d3fa6603a5dbc9373a8272d1ae.png" >

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

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

1.2.2　< canvas >
利用对< div >进行绝对定位，有助于更好地使用< canvas >。把< canvas >放在< div >内，< div >可以帮读者获取信息，例如当鼠标滑过画布时，可以获取定义指针的相对位置。

weixin_33881140

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《HTML5 Canvas开发详解》——1.2　本书中使用的基础HTML页面

本节书摘来自异步社区《HTML5 Canvas开发详解》一书中的第1章，第1.2节,作者：【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。1.2　本书中使用的基础HTML页面可以使用多个HTML标签来创建HTML页面，在HTML以前的版本中，需明确指示Web浏览器如何渲染HTML页面...
复制链接

扫一扫