HTML5 学习笔记整理

HTML5 是HTML4.0的升级版。它的出现解决HTML4.0很多问题，比如视频，音频，动画，安全等

问题。

HTML5 兼容移动端，PC端等。目前支持HTML5的浏览器有：safari、opera、chrome、firefox、ie(ie 10)。

Audio 音频技术:

<audio>

<source type="audio/mp3" src=""></source>

</audio>

支持音频文件类型：

1、mp3: audio/mp32、ogg: audio/ogg 3、wav: audio/wav

controls 控件面板autoplay　自动播放 preload 预加载loop 循环播放 video 视频控件

<video>

<source type="video/mpeg" src="xx.mp4"></source>

</video>

支持音频文件类型：

1、mp4: video/mpeg2、ogg: video/ogg 3、WebM: video/webm

controls 控件面板autoplay　自动播放 preload 预加载loop 循环播放 width 控件宽度height 控件高度

audio播放

必须重新加载

document.getElementById("audio").load();

播放

document.getElementById("audio").play();

暂停

document.getElementById("audio").pause();

Cookie相关笔记：

Cookie：网络存储数据重要途径之一。没有Cookie，就没有网站，每一个网站都有一个独立的cookie,Cookie是存储数据的。存储位置在浏览器。存储大小最大为4KB。Cookie不安全，因为每次客户端请求服务端，都需要传递参数Set-Cookie,而且Cookie默认是明文的。

cookie的形式：

cookie名=cookie值,expire=;

Cookie的主要方法：

1、document.cookie 获取当前网站cookie。

2、split 通常用它来获取某个cookie的值

3、document.cookie = "a=b"; 设置cookie

4、可以设置cookie的存在时间。

Date 函数。JS Date函数。

1、JS 作为客户端脚本语言。Date时间是从本地取的，因此准确性不可以保证。

2、new Date().getFullYear() 获取完整的年份。

3、new Date().getMonth() 获取月份(需要+1)

4、new Date().getDate() 获取日

5、new Date().getHours() 获取小时

6、new Date().getMinutes() 获取分钟

7、new Date().getSeconds() 获取秒数

8、new Date().getDay() 获取星期几

9、new Date().getTime() 获取时间戳

对比Cookie已老？HTML5中一般用WebStorage HTML5 存储。

WebStorage 分为：localStorage 和 sessionStorage

1、webStorage 可以通过key-value的形式直接设置或者获取。

setItem("键","值")； 设置

getItem("键") 获取

length() 长度

clear() 清空所有的storage

removeItem("移除键") 移除

2、webStorage 可以很大程序节省你的网络请求，因为Storage是不需要在请求中放入storage。

3、webStorage 因为不需要放入数据，因为可以节省处理时间。

4、webStorage 最大存储限制5MB。

HTML5 表单：

1、type=number 数字 min 最小值, max 最大值,step 步长

2、type=range 区间，区间范围。

3、type=color 颜色面板

4、type=date 日期控件

5、type=email 电子邮件

6、type=url 链接

7、type=tel 电话号码

8、type=file multiple 多文件上传

9、required 必填项

10、novalidate 不验证，(一般用于表单)

11、placeholder 输入框的提示信息

12、<p contenteditable="true">文字</p> 可编辑段落

13、<input type="text" list="data"/>

<datalist id="data"> 数据列表

<option value=""></option>

</datalist>

SVG笔记：

SVG是一种基于XML中描述二维图形的语言。SVG基于XML，意味着DOM每一个元素都是可用的，也就是在SVG中，每一个图形都是对象，如果有一个对象发生改变，那么全局重新生成图形。

Canvas

1、能够画二维图片，但是基于JS 2、能够根据像素重新生成。

但是注意：在Canvas中一旦生成该图片，就会被浏览器所抛弃。只要图形位置发生改变，通常情况下Canvas会覆盖上一个图形。

Canvas：依赖分辨率，不支持事件处理器。可以保存PNG图片。最适合做游戏，做动画。

SVG：不依赖分辨率，支持事件处理器。不可以保存图片。比较适合做地图更新。

SVG：

1、矩形： rect

<rect width="300" height="300" style="stroke-width: 3px; stroke:blue;fill:red"></rect>

2、线段： line (x1,y1,x2,y2) 起始坐标 结束坐标

<line x1="100" y1="200" x2="450" y2="200" width="300" height="200" style="stroke:blue;stroke-width:3"></line>

3、文字：text

<text font-family="微软雅黑" font-size="100" x="100" y="150">H</text>

4、圆：circle

<circle cx="100" cy="100" r="50" fill="red"></circle>

5、椭圆：ellipse

<ellipse cx="横坐标" cy="纵坐标" rx="x轴长度" ry="y轴长度" fill="red">

6、折线： polyline

<polyline points="0,0,0,20 20,20 20,40 40,40"fill="red" stroke-width="3" stroke="orange"></polyline>

7、多边形：polygon 注意(x,y)表示每个角的坐标

<polygon points="100,10 40,180, 190,60 10,60 160,180" fill="red" stroke-width="3" stroke="orange"></polygon>

8、路径： path

path: 就是画线，可以很轻松的像笔一样画线。
path的指令：
M：MoveTo(x,y) 将线放到指定坐标上
L：LineTo(x,y) 画直线到指定坐标
H: Horizontal(x,y)画水平线到指定的坐标位置。
V: vertical(x,y)画垂直线到指定的坐标位置
q: 画二次贝赛曲线
c: 画三次贝赛曲线
S: 光滑三次贝赛曲线

<path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />

SVG Animation : SMIL 结合形成动画。

SMIL: 同步多媒体集成的语言。

1、改变动画元素的数值属性 x y

2、动画属性变换(平移，旋转)

3、动画颜色属性改变

4、沿着特定路线走

1、<set> 闪现

<g>

<text font-family="微软雅黑" font-size="120" y="130" x="100">猴塞利<set attributeName="x" attributeType="XML" to="500" begin="2s"/>//attributeName 方向。attributeType 类型 to 移动距离 begin 几秒开始移动

</text>

</g>

2、<animate> 过渡效果

<g>

<text font-family="微软雅黑" font-size="50" y="130" x="100">猴

<animate attributeName="x" from="100" to="700" begin="0s"dur="6s" repeatCount="indefinite"></animate>

//from 起始位置 to 结束位置 begin 多少秒后开始 dur 执行时间repeatCount 重复次数 indefinite 为循环。

</text>

</g>

3、<animateColor> 暂不用

4、<animateTransform> 旋转等特定效果

<animateTransform from="0 160 160" to="360 160 160" attributeName="transform" begin="0s" dur="1s" type="rotate"repeatCount="indefinite">

</animateTransform>

//from 起始角度 圆心角度

放大缩小，type=scale 注意：from=1 原始大小 to=倍数大小

<animateTransform attributeName="transform" from="1" to="30" begin="0s" dur="50s" type="scale" repeatCount="indefinite"></animateTransform>

5、<animateMotion> Path效果

<path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />