HTML5 Canvas入门学习教程_html5教程技巧

作者：匿名字体：[增加减小] 来源：互联网时间：2018-12-03

本文主要包含HTML5,Canvas等相关知识,匿名希望在学习及工作中可以帮助到您

HTML5

究竟什么是HTML5？在W3C HTML5的常见问题中，关于HTML5是这样说明的：HTML5是一个开放的平台下开发的免费许可条款。
具体来说，对这句话有以下两种理解：
“
指一组共同构成了未来开放式网络平台的技术。这些技术包括HTML5规范、CSS3、SVG、MATHML、地理位置、XmlHttpRequest、Context 2D、Web字体以及其他技术。这一套技术的边界是非正式的，且随时间变化的。
指HTML5规范，当然也是开放式网络平台的一部分。

”
Canvas的浏览器支持
以下我列出了最流行的Web浏览器以及它们开始支持Canvas元素的最小版本号。

Safari	Firefox	IE	Chrome	Opear	iOS Safari	Android Brower
3.2	3.5	9	9	10.6	3.2	2.1

这里我推荐使用Chrome。

简单的HTML5页面

>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>基础的HTML5页面title>
head>
<body> Hello Airing! body>
html>

演示运行结果如下：
2016317110813836.jpg (850×500)

HTML是由一个个形如尖括号<>的标签元素组成，这些标签通常是成对出现，并且标签之间只能嵌套不能交叉。
扩展：
成对出现的叫做闭合标签，单个出现的叫做单标签。不管怎样都是闭合的(单标签可以不闭合，但是在XHTML中严格要求了闭合)。闭合标签又分为开始标签和结束标签，如是开始标签，是结束标签。自标签如
等。
关于更多的标签，建议大家自行了解一下。推荐W3school平台自学。
这里我们着重讲一下上述代码中出现的标签。

这个标签说明 Web 浏览器将在标准模式下呈现页面。根据 W3C 定义的 HTML5 规范，这是 HTML5 文档所必需的。这个标签简化了长期以来在不同的浏览器呈现 HTML 页面时出现的奇怪差异。它通常为文档中的第一行。

<html lang="en">

这是包含语言说明的标签，例如，"en"为英语，"zh"为中文。

<head>...head>

这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标记符和<meta>标记符。<br /></p> <p>以下表格列出了HTML head 元素下的所有标签和功能：<br /> <table> <thead> <tr> <th style="TEXT-ALIGN: center">标签</th> <th style="TEXT-ALIGN: center">描述</th> </tr> </thead> <tbody> <tr> <td style="TEXT-ALIGN: center"><code><head></code></td> <td style="TEXT-ALIGN: center">定义了文档的信息</td> </tr> <tr> <td style="TEXT-ALIGN: center"><code><title></code></td> <td style="TEXT-ALIGN: center">定义了文档的标题</td> </tr> <tr> <td style="TEXT-ALIGN: center"><code><base></code></td> <td style="TEXT-ALIGN: center">定义了页面链接标签的默认链接地址</td> </tr> <tr> <td style="TEXT-ALIGN: center"><code><link></code></td> <td style="TEXT-ALIGN: center">定义了一个文档和外部资源之间的关系</td> </tr> <tr> <td style="TEXT-ALIGN: center"><code><meta></code></td> <td style="TEXT-ALIGN: center">定义了HTML文档中的元数据</td> </tr> <tr> <td style="TEXT-ALIGN: center"><code><script></code></td> <td style="TEXT-ALIGN: center">定义了客户端的脚本文件</td> </tr> <tr> <td style="TEXT-ALIGN: center"><code><style></code></td> <td style="TEXT-ALIGN: center">定义了HTML文档的样式文件</td> </tr> </tbody> </table> <br /></p> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">charset</span><span>=</span><span class="attribute-value">"UTF-8"</span><span class="tag">></span><span> </span></span> </li> </ol> <p>这个标签说明 Web 浏览器使用的字符编码模式，这里通常设置为UTF-8。如果没有需要特别设置的没必要改变它。这也是 HTML5 页面需要的元素。<br /></p> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">title</span><span class="tag">></span><span>...</span><span class="tag"></</span><span class="tag-name">title</span><span class="tag">></span><span> </span></span> </li> </ol> <p>这个标签说明在浏览器窗口展示的 HTML 的标题。这是一个很重要的标记，它是搜索引擎用来在 HTML 页面上收录内容的主要信息之一。<br /></p> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">body</span><span class="tag">></span><span>...</span><span class="tag"></</span><span class="tag-name">body</span><span class="tag">></span><span> </span></span> </li> </ol> <p>网页中显示的实际内容均包含在这2个<body>之间。<br />综上，HTML5网页是由第一行的<!doctype html>与<html>部分组成，而<html>主要分为两部分——由<head>标签规定的头部部分，和由<body>规定的主体部分。<br />这样，我们就把最简单的HTML网页的基本结构给捋出来了。</p> <p><strong>添加一个Canvas<br /></strong>在HTML中添加Canvas非常简单，只需要在HTML的<body>部分，添加上<canvas>标签就可以了！可以参考下面的代码。<br /></p> <ol class="dp-xml"> <li class="alt"><s <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-format="fluid" data-ad-layout="in-article" data-ad-client="ca-pub-3021903444118463" data-ad-slot="2749611331"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div>  <div class="art_xg"> <h4>您可能想查找下面的文章:</h4><ul> <li><a href="/web_design/html5/20178/157575.html" title="HTML5知识点总结" target="_blank">HTML5知识点总结</a></li><li><a href="/web_design/html5/20178/157598.html" title="HTML5的本地存储" target="_blank">HTML5的本地存储</a></li><li><a href="/web_design/html5/20178/158669.html" title="HTML5本地存储之IndexedDB" target="_blank">HTML5本地存储之IndexedDB</a></li><li><a href="/web_design/html5/20178/158672.html" title="Html5实现文件异步上传功能" target="_blank">Html5实现文件异步上传功能</a></li><li><a href="/web_design/html5/20178/158673.html" title="Html5新标签datalist实现输入框与后台数据库数据的动态匹配" target="_blank">Html5新标签datalist实现输入框与后台数据库数据的动态匹配</a></li><li><a href="/web_design/html5/20178/158674.html" title="详解HTML5 window.postMessage与跨域" target="_blank">详解HTML5 window.postMessage与跨域</a></li><li><a href="/web_design/html5/20178/158675.html" title="HTML5拖放API实现拖放排序的实例代码" target="_blank">HTML5拖放API实现拖放排序的实例代码</a></li><li><a href="/web_design/html5/20178/158676.html" title="解决html5中video标签无法播放mp4问题的办法" target="_blank">解决html5中video标签无法播放mp4问题的办法</a></li><li><a href="/web_design/html5/20178/158678.html" title="HTML5新特性多线程（Worker SharedWorker）" target="_blank">HTML5新特性多线程（Worker SharedWorker）</a></li><li><a href="/web_design/html5/20178/158679.html" title="Html5新增标签有哪些" target="_blank">Html5新增标签有哪些</a></li> </ul> </div> <div class="relatedarticle clearfix mt5"> <H2>相关文章</H2> <ul> <li><span>2018-12-03</span><a href="/web_design/html5/201812/248010.html" title="Html5游戏开发之乒乓Ping Pong游戏示例(二)_html5教程技巧" target="_blank">Html5游戏开发之乒乓Ping Pong游戏示例(二)_html5教程技巧</a></li><li><span>2018-12-03</span><a href="/web_design/html5/201812/244652.html" title="如何在HTML5中使用SVG" target="_blank">如何在HTML5中使用SVG</a></li><li><span>2017-08-06</span><a href="/web_design/html5/20178/159101.html" title="用canvas实现图片滤镜效果附演示" target="_blank">用canvas实现图片滤镜效果附演示</a></li><li><span>2018-12-03</span><a href="/web_design/html5/201812/245124.html" title="nodejs的爬虫框架superagent" target="_blank">nodejs的爬虫框架superagent</a></li><li><span>2017-08-06</span><a href="/web_design/html5/20178/158964.html" title="html5绘制时钟动画" target="_blank">html5绘制时钟动画</a></li><li><span>2018-12-03</span><a href="/web_design/html5/201812/247928.html" title="HTML5 新旧语法标记对我们有什么好处_html5教程技巧" target="_blank">HTML5 新旧语法标记对我们有什么好处_html5教程技巧</a></li><li><span>2018-12-03</span><a href="/web_design/html5/201812/245186.html" title="H5的多线程（Worker SharedWorker）使用详解" target="_blank">H5的多线程（Worker SharedWorker）使用详解</a></li><li><span>2018-12-03</span><a href="/web_design/html5/201812/245179.html" title="H5文件异步上传" target="_blank">H5文件异步上传</a></li><li><span>2018-12-03</span><a href="/web_design/html5/201812/245632.html" title="分享webpack实例教程" target="_blank">分享webpack实例教程</a></li><li><span>2018-12-03</span><a href="/web_design/html5/201812/247816.html" title="混合移动开发框架详解" target="_blank">混合移动开发框架详解</a></li> </ul> </div> </div> </div>  <div class="w300 fr"> <div class="subcate bord"> <div class="asidetit cl"><h3>文章分类</h3></div> <div class="subcatec"> <ul> <li><a href='/web_design/html/html.html' title="html/xhtml">html/xhtml</a></li><li><a href='/web_design/html5/html5.html' title="html5">html5</a></li><li><a href='/web_design/css/css.html' title="CSS">CSS</a></li><li><a href='/web_design/xml/xml.html' title="XML/XSLT">XML/XSLT</a></li><li><a href='/web_design/dreamweaver/dreamweaver.html' title="Dreamweaver教程">Dreamweaver教程</a></li><li><a href='/web_design/frontpage/frontpage.html' title="Frontpage教程">Frontpage教程</a></li><li><a href='/web_design/xinde/xinde.html' title="心得技巧 ">心得技巧 </a></li><li><a href='/web_design/bootstrap/bootstrap.html' title="bootstrap">bootstrap</a></li><li><a href='/web_design/vue/vue.html' title="vue">vue</a></li><li><a href='/web_design/angularjs/angularjs.html' title="AngularJS">AngularJS</a></li><li><a href='/web_design/hbuilder/hbuilder.html' title="HBuilder教程">HBuilder教程</a></li><li><a href='/web_design/css3/css3.html' title="css3">css3</a></li><li><a href='/web_design/compatibility/compatibility.html' title="浏览器兼容">浏览器兼容</a></li><li><a href='/web_design/divcss/divcss.html' title="div/css">div/css</a></li><li><a href='/web_design/editor/editor.html' title="网页编辑器">网页编辑器</a></li><li><a href='/web_design/axure/axure.html' title="axure">axure</a></li> <div class="clearfix"></div> </ul> </div> </div> <div class="tabTitleBar mt10 bgf borderTblue"> <div class="borderTnone pb10 YaHei"> <h4 class="blue">最近更新的内容</h4> <ul class="newsListA"> <ul> <li><a href="/web_design/html5/20178/159208.html" title="HTML5中微数据概述及在搜索引擎中的使用举例" target="_blank">HTML5中微数据概述及在搜索引擎中的使用举例</a></li> <li><a href="/web_design/html5/201812/246377.html" title="HTML5学习笔记（一）-认识HTML5" target="_blank">HTML5学习笔记（一）-认识HTML5</a></li> <li><a href="/web_design/html5/201812/247569.html" title="HTML 5-块级元素" target="_blank">HTML 5-块级元素</a></li> <li><a href="/web_design/html5/201812/247683.html" title="HTML5的互动股票图形数据HumbleFinance" target="_blank">HTML5的互动股票图形数据HumbleFinance</a></li> <li><a href="/web_design/html5/201812/248344.html" title="深入探究HTML5的History API_html5教程技巧" target="_blank">深入探究HTML5的History API_html5教程技巧</a></li> <li><a href="/web_design/html5/201812/248396.html" title="解析HTML5中的新功能本地存储localStorage_html5教程技巧" target="_blank">解析HTML5中的新功能本地存储localStorage_html5教程技巧</a></li> <li><a href="/web_design/html5/201812/246818.html" title=" 小强的HTML5移动开发之路（18）——HTML5地理定位" target="_blank"> 小强的HTML5移动开发之路（18）——HTML5地理定位</a></li> <li><a href="/web_design/html5/201812/244923.html" title="利用Canvas模仿百度贴吧客户端loading小球的方法" target="_blank">利用Canvas模仿百度贴吧客户端loading小球的方法</a></li> <li><a href="/web_design/html5/201812/245949.html" title="IE8不兼容rgba()的处理方法详解" target="_blank">IE8不兼容rgba()的处理方法详解</a></li> <li><a href="/web_design/html5/201812/245317.html" title="font-weight:blod的跳动问题怎样用CSS解决" target="_blank">font-weight:blod的跳动问题怎样用CSS解决</a></li> </ul> </ul> </div> </div> </div> </div> </div> <div id="footer"> <div class="main clearfix"> <p> <a href="http://www.linkedu.com/about/about.html" target="_blank">关于我们</a> - <a href="http://www.linkedu.com/about/linkus.html" target="_blank">联系我们</a> - <a href="http://www.linkedu.com/about/disclaimer.html" target="_blank">免责声明</a> - <a href="http://www.linkedu.com/about/index.html" target="_blank">网站地图</a> </p> <p>©2020-2025 All Rights Reserved. linkedu.com 版权所有 </p> </div> </div> <script type=text/javascript src="/template/js/common.js"></script>  </div> </body> </html>