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

    xiaoxiao2023-12-22  163

    本节书摘来自异步社区《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 >可以帮读者获取信息,例如当鼠标滑过画布时,可以获取定义指针的相对位置。

    相关资源:从入门到精通HTML5——PDF——网盘链接
    最新回复(0)