HTML5学习笔记
HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、自定义图像）
HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、⾃定义图像）⼀、对 canvas 的理解 <canvas>标签是 HTML5 中的新标签，像所有的 dom 对象⼀样它有⾃⼰本⾝的属性、⽅法和事件。
canvas 是⽤来在⽹页上绘制图形的（我们通常称之为画布），canvas 只是图形容器，需要使⽤ js 脚本来绘制图形，可以绘制线条、矩形、多边形、圆形、圆环、组合图形、⽂字、⾃定义图像等。
浏览器⽀持注释：Internet Explorer 8 以及更早的版本不⽀持 <canvas> 标签。
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari ⽀持 <canvas>标签。
⼆、基本⽅法绘图环境： 语法 Canvas.getContext(contextID) 参数contextID指定了您想要在画布上绘制的类型。
当前唯⼀的合法值是 "2d"，它指定了⼆维绘图，并且导致这个⽅法返回⼀个环境对象，该对象导出⼀个⼆维绘图API。
【注】：getContext() ⽅法返回⼀个⽤于在画布上绘图的环境。
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的⽅法。
绘制图形样式style（⼀般在绘制图形前先进⾏样式设定）：context.fillStyle //填充样式context.strokeStyle //笔触颜⾊context.lineWidth //边框宽度绘制图像有两种⽅法：context.fill() //填充context.stroke() //绘制边框颜⾊的表⽰⽅式:颜⾊名称:"red" "green" "blue"⼗六进制颜⾊值: "#FFFFFF"三⾊值：rgb(1-255,1-255,1-255)四⾊值：rgba(1-255,1-255,1-255,透明度)三、使⽤ <canvas> Step1: ⾸先在html页⾯中添加<canvas>标签，规定好画布的id和尺⼨，代码如下：<!--规定了canvas元素的id名称为canvas、宽度为400px、⾼度为300px--><canvas id="myCanvas" width="400" height="300"/> Step2: 通过JavaScript来进⾏绘制： ⽅法⼀：<!--⽤⾕歌浏览器，获取canvas对象时需要先加载对象，所以要把该段代码放到body中，在js⽂件⾥进⾏绘制图像--><script src="canvas.js"></script> ⽅法⼆：<!--或者直接在body⾥编写代码--><script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "#FF0000"; context.fillRect(50,50,150,100);</script> 图解： Step3: Step2 分步骤： 通过id来捕获canvas元素 创建 context 对象 指定 fillStyle 填充颜⾊为红⾊指定 fillRect ：fillRect(起始点x轴坐标, 始点y轴坐标, 宽度, ⾼度);四、实例1--绘制线条： context.moveTo(x,y) context.lineTo(x,y)x:x坐标y:y坐标起点 moveTo 的点到终点 lineTo 的点之间画⼀条直线如果没有moveTo那么第⼀次lineTo的效果和moveTo⼀样每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前⼀次lineTo的结束点1 1 // 绘制对⾓线2 2 function demo1(id){3 3 var canvas = document.getElementById(id);4 4 var context = canvas.getContext("2d");5 5 6 6 context.strokeStyle = "#ff0000";7 78 8 context.moveTo(0,0);9 9 context.lineTo(200,100);10 10 context.stroke();11 11 }View Code实例结果：1// 绘制直⾓三⾓形2function demo1(id){3var canvas = document.getElementById(id);4 var context = canvas.getContext("2d");5 6 context.strokeStyle = "#ff0000";78 context.lineTo(20, 20);9 context.lineTo(20, 70);10 context.lineTo(70, 70);11 context.lineTo(20, 20);12 context.stroke();13 }View Code【注】：1. 三⾓形有三个点，但在连线的时候还需要连回顶点；2. 最后⼀定记得加上 stroke(); 初学时容易犯这个⽑病，这相当于你把点定好了，却没⽤线连起来，岂不......实例结果：CSS属性中有⼀圆⾓设置 radius，canvas画线段也要达到这种圆⾓匾额效果，我么也有相应的办法： lineJoin 属性,可以设置线的交汇处的样式，lineJoin有3个属性值：miter(尖⾓，默认)，bevel（斜⾓）,round（圆⾓） lineCap 属性，定义线条的端点。
HTML5学习笔记
1.HTML5简介什么是 HTML5？HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML 的上一个版本诞生于 1999 年。
自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。
然而，大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 是W3C 与WHATWG 合作的结果。
为 HTML5 建立的一些规则：•新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
•减少对外部插件的需求（比如 Flash）•更优秀的错误处理•更多取代脚本的标记•HTML5 应该独立于设备•开发进程应对公众透明新特性HTML5 中的一些有趣的新特性：•用于绘画的 canvas 元素•用于媒介回放的 video 和 audio 元素•对本地离线存储的更好的支持•新的特殊内容元素，比如 article、footer、header、nav、section •新的表单控件，比如 calendar、date、time、email、url、search 2.HTML5视频视频格式当前，video 元素支持三种视频格式：实例<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4">Your browser does not support the video tag.</video>3.HTML5音频音频格式当前，audio 元素支持三种音频格式：实例<audio controls="controls"><source src="song.ogg" type="audio/ogg"><source src="song.mp3" type="audio/mpeg">Your browser does not support the audio tag.</audio>4.HTML画布（Canvas）HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
HTML5培训应该学习的知识
HTML5培训应该学习的知识近年来HTML5培训开发非常的火爆，相比较其他编程语言，HTML5开发还是比较简单且受欢迎的，本篇文章小编就带大家看一下HTML5培训应该学习的知识有哪些。
1.HTMLHTML是网页最基本的元素，主要控制网页的结构、字体等，最初发明网页时只有HTML语言，并没有CSS语言，HTML常用的标签包括HTML结构、HTML表格、列表等。
2.CSS随着时代的发展，万恶的IE6终于退市了，市场份额占比渐渐少了，目前还有极少量的公司要求兼容IE6浏览器，但，渐渐的这些兼容需求会逐渐消失……对于IE6，小编的建议是，不要太纠结于每个bug，主要原因在于，IE6的问题通常源于两种原因，其一在于浏览器自身的问题，其二则在于容错性相对较差。
对于第一方面原因引发的问题，个人觉得没有什么太大的必要去研究了，而对于第二类问题，使IE6能够成为辅助我们检查自己代码质量的工具。
3.HTML5HTML5新标签包括header、nav、article、section、aside、footer，还是比较容易掌握的，但与CSS3结合起来使用，才能体现其强大。
4.CSS3CSS3在CSS基础上增加了不少属性，除了常用的属性(如圆角边框，阴影，过渡，变形，动画)之外，还有图像边框，多色彩边框，倒影，蒙版，跑马灯，渐变，分栏，弹性布局，滤镜等等。
但由于CSS3还比较新，因此，各个浏览器的兼容性也需要花费很大精力研究一番。
5.JS其实，JS中的知识是最多的，最基础的是原生js，还需要学习著名的node.js 与angular js等，js的框架比较多，从层出不穷的各种标题就可以发现，什么二十种优秀的图表制图框架，十种绚丽的大图滚动插件，八个值得你拥有的表单验证插件等。
但掌握框架后，确实可以给你的工作带来很多便利，善用框架，让开发变得更容易。
在HTML5培训中，基础知识大概涵盖这几类。
除了以上基本知识点以外，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理以及存在的各种Bug。
HTML5学习笔记--------》HTML5概要与新增标签！
HTML5学习笔记--------》HTML5概要与新增标签！⼀、HTML5概要1.1、为什么需要HTML5HTML4陈旧不能满⾜⽇益发展的互联⽹需要，特别是移动互联⽹。
为了增强浏览器功能Flash被⼴泛使⽤，但安全与稳定堪忧，不适合在移动端使⽤（耗电、触摸、不开放）。
HTML5增强了浏览器的原⽣功能，符合HTML5规范的浏览器功能将更加强⼤，减少了Web应⽤对插件的依赖，让⽤户体验更好，让开发更加⽅便，另外W3C从推出HTML4.0到5.0之间共经历了17年，HTML的变化很⼩，这并不符合⼀个好产品的演进规则。
1.2、什么是HTML5HTML5指的是包括HTML、CSS和JavaScript在内的⼀套技术组合。
它希望能够减少⽹页浏览器对于需要插件的丰富性⽹络应⽤服务（Plug-in-Based Rich Internet Application，RIA），例如：AdobeFlash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效加强⽹络应⽤的标准集。
HTML5是HTML最新版本，2014年10⽉由万维⽹联盟（W3C）完成标准制定。
⽬标是替换1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联⽹应⽤迅速发展的时候，使⽹络标准达到匹配当代的⽹络需求。
1.3、HTML5现状及浏览器⽀持⼤部分主流浏览器已经⽀持HTML5，但是各个浏览器⽀持的⽅式以及语法有所差异性。
⽀持Html5的浏览器包括Firefox（⽕狐浏览器），IE9 及其更⾼版本，Chrome（⾕歌浏览器），Safari，Opera等现代浏览器。
⽀持得分：如果想了解更多请看本⽂的兼容性那⼀节的内容。
PC端（总分555分）：平板（总分555分）：移动（总分555分）：1.4、HTML5特性HTML5 ⼋个特性类别对应的8个Logo 语义⽹、离线&存储、设备访问、通信多媒体、图形和特效、性能和集成、呈现（CSS3）1.4.1. 语义特性（Class：Semantic）HTML5赋予⽹页更好的意义和结构。
HTML5自学笔记
HTML/HTML5自学笔记Html 概述1、动态网页：PHP、ASP、JSP等，存放于服务器，执行数据操作生成HTML页面后发至浏览器执行。
2、静态网页：HTML标签及页面包含的JS代码，运行于客户端浏览器。
3、HTML标签对大小写不敏感4、从HTML4.0.1到XHTML到HTML5并非革命性的升级，而是规范向习惯的妥协。
主要有以下优势：a)解决跨浏览器问题，各浏览器厂商的支持b)部分替代了原来的JavaScript，通过增加一些属性即可完成原来JS的功能。
如：HTML5以前：document.getElementById(“price”).focus();HTML5以后：<input type=”text” name=”price” autofocus/>c)更明确的语义支持，加入了新的nav、article、section、aside、footer、time、marker等标记d)增强了web应用程序的功能，比如可以上传多个文件。
e)兼容性：在老版本的浏览器上也可以正常运行f)实用性：内部没有复杂的功能，仅封装了常用的简单功能5、HTML5的基本结构和语法变化a)页面最开始：<!DOCTYPE html>b)指定页面字符集：<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”/>c)不能在其间插入内容的标签序列：<html><head>和</head><body>和</body></html>；这几个标签可以完全省略不写。
d)允许省略属性值的属性：例如：checked checked=”checked”。
如果没有该属性则表明该值为false。
checked/readonly/disabled/selected/multiple/defer/ismap/nohref/noshade/nowrap/noresize。
HTML5-学习笔记
HTML5在HTML5中不区分关键字大小写，引号也不区分是单引号还是双引号。
第一章1.一旦你了解了HTML5,你就会改变审视web的方式虽然现在普遍使用的是HTML4和CSS2，但还可以做得更好！可以重组我们代码结构并能让我们的页面代码更富有语义化特性，还可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。
如今，HTML5和CSS3的技术和应用环境已经日趋成熟，它们将书写Web前端领域的新历史HTML5将成为新一代的Web技术标准，必定会改变整个Web应用领域的游戏规则，它在给新的Web应用带来无限可能性的同时，还能带来更快、更好、更炫的用户体验。
HTML5和CSS3已经成为全球各大互联网巨头必争之地2.在移动平台上，因为支持的很好，HTML5先行了一步，已经成为了iOS、Windows Phone 和Android移动互联网的唯一选择。
放眼望去，仿佛互联网充满着HTML5千秋万代一统江湖的高呼3.HTML4+CSS2与HTML5+CSS3区别互联网发展越来越快，有些东西总会要被取代，HTML4+CSS2将渐渐退出舞台，而HTML5+CSS3将取而代之HTML5规范是2004年新成立的WHATWG工作组创立的；2006年W3C加入HTML，并于2008年发布了HTML5工作草案，2009年，XHTML2工作组停运；2010年HTML5开始解决实际问题，渐渐的各大浏览器厂家开始升自己的产品以支持HTML5+CSS3，HTML5得到了持续的完善，2012年HTML5完成规范编写工作。
HTML5以HTML4为基础，对HTML4进行了大量的修改。
学习HTML5则需要掌握HTML5与HTML4在基本语法上有什么区别；了解在HTML5中新增了哪些元素和属性，删除了哪些HTML4中的元素和属性，为什么要删除这些元素，用什么元素或方法来取代这些被删除的元素和属性；还需要掌握什么是全局属性；4.第二章HTML5语法的改变HTML5的一个很大的目标就是提高浏览器之间的兼容性，需要有一个统一的标准，因些HTML5重新定义了一套在现有HTML4基础上修改而来的语法，使它运行在知名浏览器中都能够符合这个通用标准。
HTML5笔记
HTML笔记一、HTML常用元素与属性1.HTML保留的常用元素1.1基本元素<!--…-->：HTML注释<html>：HTML5文档根元素<head>：HTML5文档页面头部分，可省略<title>：HTML5文档页面标题<body>：HTML5文档页面主体部分<style>：引入样式定义，参考CSS章节介绍<h1>到<h6>：标题一到标题六<p>：定义段落<br>：换行，该标签可指定id、class、style等核心属性<hr>：定义水平线<div>：定义文档中的节，能包含<p>、<span>等大量内容，所以会被大量使用<span>：与<div>相似，但节不会换行注：<body>、<p>、<hr>、<div>、<span>该标签可指定id、class、style等核心属性，还可以指定onload、onunload……onclick、ondblclick等事件属性，这些属性用于指定JavaScript脚本1.2文本格式化元素<b>：粗体文本<i>：斜体文本<em>：强调文本，效果与斜体类似<strong>：粗体文本，与<b>相似<small>：小号字体文本<sup>：上标文本<sub>：下标文本<bdo>：文本显示方向，可指定dir属性，属性值只能是ltr，rtl注：以上标签可指定id、class、style等核心属性，还可以指定onload、onunload……onclick、ondblclick等事件属性，这些属性用于指定JavaScript脚本1.3语义相关元素<abbr>：用于表示一个缩写，可指定title属性：表示缩写的全称<address>：用于表示一个地址，以斜体字显示<blockquote>：用于定义一段长的引用文本，浏览器会以缩进的方式显示这段文本，可指定cite属性：指定该引用文本所引用的网址URL<q>：用于定义一段短的引用文本<cite>：用于表示作品的标题，以斜体字显示<code>：表示一段计算机代码<dfn>：用于定义一个专业术语，以斜体字显示<del>：定义文档中被删除文本，以中画线显示文本<ins>：定义文档中插入的文本，以下画线显示文本<pre>：表示该元素所包含的文本已经进行了“预格式化”，也就是所包含的空格、回车和其他格式都会被保留下来，但浏览器会处理大部分HTML元素<samp>：用于定义示范文本内容<kbd>：用于定义键盘文本<var>：用于表示一个变量，以斜体字显示1.4超链接和锚点<a…/>：定义超链接，可指定属性href：超链接所关联的另一资源，target：指定哪个框架来装载这个内容，属性值有_self、_blank、_top、_parent，media：指定目标URL所引用的媒体类型，默认all1.5列表相关元素<ul>：定义无序列表，该元素只能包含<li…/>子元素<ol>：定义有序列表，该元素只能包含<li…/>子元素<li>：定义列表项目，该元素可包含与<div>类似的内容<dl>：用于定义列表，该元素只能包含<dt…/>、<dd…/>子元素<dt>：定义标题列表项<dd>：定义普通列表项，该元素可包含与<div>类似的内容1.6 图像相关元素<img …/>：定义图像，可指定属性src ：图片路径，alt ：指定一段文本作为图片的提示信息，usemap ：让图片使用图片映射，属性值为#mapname<map>：定义图片映射，可包含多个<area …/>，不同区域链接不同URL<area>：定义图片映射内部区域，可指定属性shape ：区域形状，属性值有rect 、circle 、ploy ，coords ：多个坐标确定区域位置，href ：区域所链接资源，target ：指定哪个框架来装载这个内容，media ：指定目标URL 所引用的媒体类型1.7 表格相关元素<table>：定义表格 <caption>：表格标题<tr>：表格行，只包含<td>、<th><td>：单元格，属性colspan ：跨多少列，rowspan ：跨多少行 <th>：表格页眉单元格，与<td>用法一样 <tbody>：表格主体，只包含<tr>元素 <thead>：表格头，与<tbody>相似 <tfoot>：表格脚，与<tbody>相似2. HTML5新增通用属性2.1 contentEditable 属性可把<table>、<div>等元素变成可编辑状态，如果一个HTML 元素的父元素是可编辑的，那么默认也是可编辑的，除非显示指定contentEditable=“false ”2.2 designMode属性当designMode=’on ’时，页面上所有可支持designMode 属性的元素都变成可编辑状态2.3 hidden 属性为所有元素都提供一个hidden 属性，一旦元素的hidden 属性设为true ，则隐藏该元素，且浏览器不保留所占用的空间。
html5总结笔记
HTML5是一种标记语言，用于创建和设计网页的结构和内容。
它是一种标准化的语言，被广泛应用于Web开发中。
以下是一些关于HTML5的总结笔记：语义元素：HTML5引入了许多新的语义元素，如<header>、<footer>、<article>、<section>等，这些元素可以帮助改善网站的可访问性和SEO。
字符编码：HTML5默认使用UTF-8字符编码，这有助于支
持多种语言和字符集。
多媒体元素：HTML5引入了<audio>和<video>元素，使得在网页上嵌入音频和视频变得更加简单。
图形元素：HTML5提供了<canvas>元素，可以使用JavaScript 在网页上绘制图形和动画。
表单元素：HTML5提供了更多
的表单元素和属性，如placeholder、autofocus、required等，使得创建表单更加方便和用户友好。
语义化标签：HTML5
引入了更多的语义化标签，如<nav>、<header>、<footer>等，这些标签可以帮助搜索引擎更好地理解网页内容。
离线存储：HTML5提供了离线存储机制，可以将数据存储在客户端设
备上，以便在离线时使用。
性能和集成：HTML5提供了更
好的性能和集成能力，支持Web Worker、Web Sockets等技术，使得开发复杂的应用程序更加容易。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
ＨＴＭＬ５学习
为ＨＴＭＬ５建立的一些规则
●新特性应该基于ＨＴＭＬ、ＣＳＳ、ＤＯＭ以及ｊａｖａｓｃｒｉｐｔ
●减少对外部插件的需求
●更优秀的错误处理
●ＨＴＭＬ５应该独立于设备
●开发进程应对公众透明
ＨＴＭＬ５中的一些有趣的新特性：
●用于绘画的ｃａｎｖａｓ元素
●用于媒介回放的ｖｉｄｅｏ和ａｕｄｉｏ元素
●对本地离线存储的更好的支持
●新的特殊内容元素，比如a r t i c l e、ｆｏｏｔｅｒ、ｈｅａｄｅｒ、ｎａｖ、ｓｅｃｔｉｏｎ
●新的表单控件，比如ｃａｌｅｎｄａｒ、ｄａｔａ、ｔｉｍｅ、ｅｍａｉｌ、ｕｒｌ、ｓｅａｒｃｈ一、媒介回放的video和audio元素
Video实现代码：
<video width=”320” height=”240” controls=”controls”>
<source src=”movie.ogg” type=”video/ogg”>
<source src=”movie.mp4” type=”video/mp4”>
Your browser does not support the video tag.
</video>
需要注意的点：
●control属性供添加播放、暂停和音量控件。
●video元素允许多个source元素。
source元素可以连接不同的视频文件，浏览器将
使用第一个可识别的格式。
例如：上面代码中，先识别movie.ogg，然后识别
movie.mp4。
HTML<video>标签也可以使用DOM来控制。
它同样拥有属性、方法及事件。
Audio实现代码：
<audio controls=”controls”>
<source src=”song.ogg” type=”audio/ogg”>
<source src=”song.mp3” type=”audio/mp3”>
Your browser does not support the audio tag
</audio>
二、HTML5拖放操作
在HTML5中，拖放（Drag和Drop）是标准的一部分，任何元素都能够拖放。
拖放操作的代码实例：
<head>
<script type=”text/javascript”>
function allowDrop(ev){ ev.preventDefault(); }
function drag(ev){ ev.dataTransfer.setData(“Text”,ev.target.id); }
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(doucument.getElementById(data));
}
</script>
</head>
<body>
<div id=”div” ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>
<br/>
<img id=”drag” src=”flower.jpg” draggable=”true” ondragstart=”drag(event)”/>
</body>
需要注意的点：
●为了使元素可以拖动，需设置其属性draggable为true。
●打包被拖动的元素；即给元素的ondragstart属性设置事件，事件中取元素id并封装在
event对象中。
dataTransfer.setData()方法设置被拖动元素的数据类型和值。
●阻止元素的默认事件；比如说默认情况下，无法将数据/元素放置到其他元素上，可以
用event.preventDefault()方法阻止元素的默认事件（见下例）。
在被放置的元素的
ondragover属性上添加事件。
●将被拖动元素附加到指定元素上；这里调用preventDefault()来避免浏览器对数据的默认
处理，即drop事件的默认行为是以链接的方式打开。
通过被放置元素的ondrop属性实现元素的附加行为。
例：< a href=””>跳转</a> 默认处理事件是跳转到指定网页。
如果给它的onclick事件中加上代码event.preventDefault() 则该标签不会跳转。
三、HTML5画布
HTML5的canvas元素使用javascript在网页上绘制图像。
Canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
需要注意的是，canvas标签只是一种图形容器，该元素本身是没有绘图能力的。
canvas使用实例：
<canvas id=”myCanvas” width=”200” height=”100”></canvas>
<script type=”text/javascript”>
var mycanvas=document.getElementById(“myCanvas”);
var mycxt=mycanvas.getContext();
mycxt.fillstyle=”#FF0000”;
mycxt.fillRect(0,0,200,100);
</script>
需要注意的点：
●大部分Canvas绘图API都没有定义在<canvas>元素本身上，而是定义在通过画布的
getContext()方法获得的一个“绘图环境”对象上。
●可以通过event对象获得鼠标点的坐标值。