##总结
- 从这两天的课程里，我学到html简单的一个编年史，以及标签语义化最最有益是便于SEO及对盲人设备友好。也知道的风靡一时的flash为什么会被html5打败。
- HTML5新增了很多功能和标签，尤为突出的就是canvas和SVG，video的功能也很亮眼。说实在的能按着方法写出东西，但是觉得还是很生疏，计算坐标之类的不能很快反应出来。
- 不过这两天，学到很多实现需求的思维和技巧，每晚完成作业之后也会自己写写，琢磨琢磨。
- 比如创建一个文件夹把可能经常复用的函数放在里面
- 灵活的分析不同需求使用结合的方式来实现效果（泡泡用对象，对SVG验证码的字符串拼接等等）
- 需要养成习惯性举一反三的思维，分析本质更好总结出解决的方法（比如经过分析常用的产生随机数的方法，来总结出一个公式，便可以封装一个随机数函数任意使用）
- 如果以上技巧使用得当，可大大提升代码效率
***
##html编年史
- HTML4 （最早）
- XML (规范严格)
- XHTML 1.0 （沿用XML的规范）1.1（降低规范，过渡版本）
- HTML5
- WHATWG (组织，制定HTML5，最后转回W3C)
##标签
- 语义化
- 利于SEO
- 对盲人设备友好
## flash（Adobe）
- 被html5打败 （乔布斯）
##新增
- video
- controls 特殊属性，显示控制按钮
- redio
## canvas
- 画布 canvas标签
- 画笔：pen=getContext（“2d”）
- 示例
- 矩形
- pen.fillstyle=“red”；
- pen.fillRext（）// x，y，高，宽
- pen.strokeStyle="blue"
- pen.strokeRect()//
- arc（50，110，50，0，2* Math.PI）
- 方法
- .fill 填充
- stroke 路径
- beginPath 重新开始路径
- colsePath
- 绘图
` let img=new Image（）；
img.src="image/1.jpg";
let cs=document.getbyid("cs")
let ctx=cs.getContext("2d");
img.οnlοad=function(){
ctx.rotate(Math.PI/180 * 10); 旋转10度
ctx.drawImage(img,0,0,200,200);
}`
- 默认情况下，旋转是围绕左上角00点旋转的
- 注意，图片加载是异步，或其他on
- ctx. translate（100，100） 改变画布的原点 （自转）
- 还原方法 （不影响后面的元素）
- ctx.save(); 保存当前状态
- resotore（）;回到原来的状态
- scle
- 擦除拖影
- clearRect（0，0，800，600）； 后面参数整个画布 （矩形）
***
#SVG
##图片分类
- 矢量图：通过算法计算，矢量图方法缩小不会失真，无法做到非常逼真的色彩。 应用场景：设计，建筑图。
- 位图：颜色丰富逼真，但是会失真。应用场景：游戏、其他...
##拖拽
拖拽
over里用e.preventDefalut(); 阻止默认行为
ondrop才能出现
***
##本地存储
- cookie HTML5 以前 翻译/点心
- 保存服务器发给浏览器的信息
- 精准推送
- 问题
- 大小有限制，不能超过过4KB 4000英文，2000中文
- 安全问题
- localStorage 永久
- sessionStorage 一次会话 （打开一个浏览器，关闭）
- 访问方法一样，本地存储服务器，区别在于存储时间
- 存进去的数据会被转成字符串
- 注意：存之前转成字符串
- 方法：JSON.stringify（[11，23，47，20]）//数组转JSON
- 方法：JSON.parse(); //JSON转数组