《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 style="position: absolute; top: 50px; left: 50px; ">
Hello World!
</div>
</body>
</html>


<a href=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 >可以帮读者获取信息。例如,当鼠标滑过画布时,可以获取定义指针的相对位置。

相关文章
|
23天前
使用HTML编写注册页面
使用HTML编写注册页面
12 1
|
1月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
34 0
|
1月前
|
数据采集 前端开发 JavaScript
html 页面里 noscript 标签的作用介绍
html 页面里 noscript 标签的作用介绍
29 0
|
1月前
|
XML 编解码 前端开发
编程笔记 html5&css&js 033 HTML SVG
编程笔记 html5&css&js 033 HTML SVG
|
9天前
错误或拦截页面的html代码
错误或拦截页面的html代码
13 0
错误或拦截页面的html代码
|
10天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
10天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
17天前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
18 0
|
1月前
六个好看实用的html简单登录页面源码
六个好看实用的html简单登录页面源码
19 0
六个好看实用的html简单登录页面源码
|
1月前
响应式个人二维码收款HTML页面源码
响应式个人二维码收款HTML页面源码
16 0
响应式个人二维码收款HTML页面源码