《HTML5 canvas开发详解（第2版）》——1.3 本书使用的基础HTML页面
本節(jié)書摘來自異步社區(qū)《HTML5 canvas開發(fā)詳解（第2版）》一書中的第1章，第1.3節(jié),作者： 【美】Steve Fulton , Jeff Fulton 更多章節(jié)內(nèi)容可以訪問云棲社區(qū)“異步社區(qū)”公眾號查看。
1.3 本書使用的基礎(chǔ)HTML頁面
可以使用多個HTML標簽來創(chuàng)建HTML頁面，在HTML以前的版本中，需明確指示W(wǎng)eb瀏覽器如何渲染HTML頁面的標簽（例如< font >和< center >）。然而，在過去10年中，瀏覽器的標準越來越嚴格，這類標簽就被束之高閣了。CSS（層疊樣式表）成為定義HTML內(nèi)容樣式的主要方式。因為本書不是關(guān)于如何創(chuàng)建HTML頁面的（頁面中不包含Canvas），因此這里不打算討論CSS的內(nèi)部工作原理。
本節(jié)將只關(guān)注兩個最基本的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頁面中使用內(nèi)聯(lián)CSS的例子。它告訴瀏覽器呈現(xiàn)內(nèi)容的絕對位置為：距離頁面頂端50像素，并且距離頁面左端50像素。
警告
這個< div >可以在瀏覽器中定位畫布，但是對試圖在畫布上捕捉鼠標點擊時則沒有任何幫助。在第5章中，本書將討論一種既能定位畫布又能捕獲正確的鼠標點擊位置的方法。
1.3.2
利用對< div >進行絕對定位，有助于更好地使用< canvas >。把< canvas >放在< div >內(nèi)，< div >可以幫讀者獲取信息。例如，當鼠標滑過畫布時，可以獲取定義指針的相對位置。
總結(jié)
以上是生活随笔為你收集整理的《HTML5 canvas开发详解（第2版）》——1.3 本书使用的基础HTML页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何安装透明窗口主题Emerald在Ub
- 下一篇： 《Oracle数据库管理与维护实战》——