转载请声明 原文链接
这篇文章主要总结H5的一些新增的功能以及一些基础归纳，这里只是一个提纲，并不是很详细，后面会一直完善补充新的内容，本文是一些笔记记录，放在这里供自己参考也供他人学习！
HTML5概览
第一课 HTML5结构
HTML5是新一代的HTMLDTD声明改变<!DOCTYPE html>ie8不兼容
新的结构标签
注意的地方
一些总结--from-dunitian
常用的一些新的结构标签
结构标签
多媒体交互标签
特殊样式标签
兼容性不是很好的标签
补充说明
small这个元素表示边栏评论，如附属细则cite这个元素可用于显示作品标题（图书、电影、诗歌等）adress这个元素显示article或整个文档的合同信息，且位于footer这个元素之中time显示人和机器可读的日期和时间，而且机器可读的时间戳是属性datetime的值第二个可选的是pubtime用于表示出版日期值
删除的HTML标签
纯表现的元素：
basefontbigcenterfontsstrikettu
对可用性产生负面影响的元素：
acronymappletisindexdir
frameframesetnoframes产生混淆的元素：
重新定义的
HTML标签<b>代表内联文本，通常是粗体，没有传递表示重要的意思<i>代表内联文本，通常是斜体，没有传递表示重要的意思<dd>可以同details与figure一同使用，定义包含文本，ialog也可用<dt>可以同details与figure一同使用，汇总细节，dialog也可用<hr>表示主题结束，而不是水平线，虽然显示相同<menu>重新定义用户界面的菜单，配合commond或者menuitem使用<small>表示小字体，例如打印注释或者法律条款<strong>表示重要性而不是强调符号
崭新新的页面布局
传统的布局
HTML5标签布局
实例-from-dunitian
草图--from-dunitian
第二课 HTML5智能表单
HTML4.01 form表单复习
input表单type属性值type="text"单行文本输入框type="password"密码（maxlength=""）type="radio"单项选择（checked="checked"）type="checkbox"多项选择type="button"按钮type="submit"提交type="file"上传文件type="reset"重置
HTML5智能表单
input表单type属性值：type = "email"限制用户输入必须为Email类型type="url"限制用户输入必须为URL类型type="date"限制用户输入必须为日期类型type="datetime"显示完整日期 含时区type="datetime-local"显示完整日期 不含时区type="time"限制用户输入必须为时间类型type="month"限制用户输入必须为月类型type="week"限制用户输入必须为周类型type="number"限制用户输入必须为数字类型type="range"生成一个滑动条type="search"具有搜索意义的表单results="n"属性type="color"生成一个颜色选择表单type="tel"显示电话号码
Input 类型 - Date Pickers（日期选择器）
**
HTML5拥有多个可供选取日期和时间的新输入类型：date选取日、月、年month选取月、年week选取周和年time选取时间（小时和分钟）以下两个没有作用
datetime选取时间、日、月、年（UTC 时间）datetime-local选取时间、日、月、年（本地时间）
HTML5新增表单属性
required:required内容不能为空placeholder:表单提示信息autofocus:自动聚焦pattern:正则表达式 输入的内容必须匹配到指定正则范围autocomplete:是否保存用户输入值默认为
on，关闭提示选择off
formaction:在submit里定义提交地址datalist:输入框选择列表配合list使用list值为datalist的id值output:计算或脚本输出
表单验证
validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都返回true,一种验证失败返回falsesetCustomValidity()
oText.addEventListener("invalid",fn1,false)ev.preventDefault(): 阻止默认事件valueMissing: 当输入值为空的时候，返回truetypeMismatch: 控件值与预期不吻合，返回truepatternMismatch: 输入值不满足pattern正则，返回truecusomError
第三课 css3选择器
css3属性快速一览
css3属性快速一览
CSS3发展史简介HTML的诞生 20世纪90年代初1996年底，CSS第一版诞生1998年5月CSS2正式发布2004年CSS2.1发布CSS3的发布2002200320042005200720092010
模块化开发
浮动和定位、高级选择器等(子选择器、相邻选择器、通用选择器)
字体、颜色、基本选择器等
CSS1中定义了网页的基本属性：CSS2中在CSS1的基础上添加了高级功能CSS3遵循的是模块化开发。发布时间并不是一个时间点，而是一个时间段
CSS选择器复习:before,:after在元素内容前面、后面添加内容(相当于行内元素)
::first-line匹配文本块的首行::first-letter选择文本块的首字母
通用选择器：
*选择到所有的元素选择子元素：
>选择到元素的直接后代相邻兄弟选择器：
+选择到紧随目标元素后的第一个元素普通兄弟选择器：
~选择到紧随其后的所有兄弟元素伪元素选择器：
伪类选择器：
CSS3结构选择器
CSS3结构选择器
Css3属性选择器
Css3属性选择器
CSS3伪类选择器:not(<选择器>)对括号内选择器的选择取反:lang(<目标语言>)基于lang全局属性的元素:targeturl片段标识符指向的元素:selection鼠标光标选择元素内容
:empty选择内容为空的元素
:link选择链接元素:visited选择用户以访问的元素:hover鼠标悬停其上的元素:active鼠标点击时触发的事件:focus当前获取焦点的元素
:enabled选择启用状态元素:disabled选择禁用状态元素:checked选择被选中的input元素（单选按钮或复选框）:default选择默认元素:valid、invalid根据输入验证选择有效或无效的input元素:in-range、out-of-range选择指定范围之内或者之外受限的元素:required、optional根据是否允许:required属性选择input元素
UI伪类选择器：
动态伪类选择器：
其他伪类选择器：
第四课 CSS3新增文本属性
CSS文本属性复习
ltr文本从左向右rtl文本从右往左
nowrap控制文本不换行pre空白会被浏览器保留pre-line合并空白 保留换行符pre-wrap保留空白 正常换行
white-space：对象内空格的处理方式direction：文本流的方向unicode-bidi：用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
CSS3新增文本属性
color:rgba();text-overflow:是否使用一个省略标记（...）标示对象内文本的溢出text-align:文本的对齐方式text-transform:文字的大小写text-decoration:文本的装饰线，复合属性text-shadow:文本阴影text-fill-color:文字填充颜色text-stroke:复合属性。设置文字的描边tab-size:制表符的长度word-wrap:当前行超过指定容器的边界时是否断开转行word-break:规定自动换行的处理方法
text-overflow:是否使用一个省略标记（...）标示对象内文本的溢出clip： 默认值 无省略号ellipsis：当对象内文本溢出时显示省略标记（...）。注意：该属性需配合
over-flow:hidden属性(超出处理)还有white-space:nowrap(禁止换行)配合使用，否则无法看到效果
text-align:文本的对齐方式css1left:默认值 左对齐right:右对齐center:居中justify： 内容两端对齐。css3start:开始边界对齐end:结束边界对齐
text-transform:文字的大小写full-width： 将左右字符设为全角形式。不支持full-size-kana：将所有小假名字符转换为普通假名。不支持
例如：土耳其语
none： 默认值 无转换capitalize： 将每个单词的第一个字母转换成大写uppercase： 转换成大写lowercase： 转换成小写
css1css3
text-decoration:文本的装饰线，复合属性(只火狐支持)`指定文本装饰的颜色。
`指定文本装饰的样式。
指定文本装饰的种类。相当于
CSS1时的text-decoration属性
text-decoration-line：text-decoration-style：text-decoration-color：blink： 指定文字的装饰是闪烁。opera和firefoxtext-decoration:#F00 double overlineCSS3实例
text-shadow:文本阴影x横向偏移y纵向偏移blur模糊距离(灰度)color阴影颜色
取值：
xyblurcolor,......
text-fill-color:文字填充颜色text-stroke:复合属性。设置文字的描边text-stroke-width:文字的描边厚度text-stroke-color:文字的描边颜色
tab-size:制表符的长度默认值为
8(一个tab键的空格字节长度)，在pre标签之内才会有显示
word-wrap:当前行超过指定容器的边界时是否断开转行normal： 默认值允许内容顶开或溢出指定的容器边界。
break-word：内容将在边界内换行。如果需要，单词内部允许断行
第五课 CSS3盒模型
CSS盒模型复习
标准盒子模型
IE盒子模型
CSS3弹性盒模型
orderflex-growflex-shrinkflex-basisflexalign-self
flex-direction: row|row-reverse|column|column-reverse;flex-wrap: nowrap|wrap|wrap-reverse;flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrapjustify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-flow: <flex-direction> || <flex-wrap>;
justify-content: flex-start|flex-end|center|space-between|space-around;
align-items: flex-start|flex-end|center|baseline|stretch;
align-content: flex-start|flex-end|center|space-between|space-around|stretch;
flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content
以下6个属性设置在容器上
属性详解
以下6个属性设置在项目上
属性详解
align-self: auto|flex-start|flex-end|center|baseline|stretch;
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
flex布局语法篇小结
第六课 css3新增背景属性
CSS背景属性复习
background-color:背景颜色background-image:背景图片background-repeat:背景重复background-position:背景定位background-attachment:背景固定(scroll/fixed)
background:
CSS3新增背景属性
background-size背景尺寸background-size:x y水平 垂直方向的尺寸，像素/百分比/auto/…background-size:100% 100%background-size:cover比例放大background-size:contain包含（图片不溢出）
多背景
background-image:url(1.jpg),url(2.jpg);
background-origin背景区域定位border-box： 从border区域开始显示背景。padding-box： 从padding区域开始显示背景。content-box： 从content内容区域开始显示背
background-clip背景绘制区域border-box： 从border区域向外裁剪背景。padding-box： 从padding区域向外裁剪背景。content-box： 从content区域向外裁剪背景。
text:背景填充文本no-clip： 从border区域向外裁剪背景
颜色渐变
起点：
left/top/right/bottom或具体值/百分比形状：
ellipse(椭圆)、circle(正圆)大小：具体数值或百分比，也可以是关键字（
closest-side(最近端),closest-corner最近角),farthest-side(最远端), farthest-corner(最远角),contain(包含) ,cover(覆盖)）;
起点：
left/top/right/bottom/left top......默认top角度：逆时针方向
0-360度颜色 位置：
red 50%,blue 100%(红色从50%渐变到100%为蓝色)repeating-linear-gradient线性渐变重复平铺
IE低版本渐变(滤镜)：filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');
线性渐变：
linear-gradient(起点/角度，颜色 位置，...,)径向渐变：
radial-gradient(起点(圆心位置), 形状/半径/大小，颜色1，颜色2)
第七课 css3新增颜色属性
CSS颜色属性复习
color name颜色英文名称命名HEX方式 十六进制方式rgb方式 三原色配色方式
CSS3新增颜色属性
rgba()
| 名称 | 颜色 | 颜色 | 取值 |
|---|---|---|---|
| r | red | 红色 | 0-255 |
| g | green | 绿色 | 0-255 |
| b | blue | 蓝色 | 0-255 |
| a | alpha | 透明 | 0-1 |
HSL模式HSLA模式0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：
0 - 360
H：Hue(色调)。S：Saturation(饱和度)。取值为：0.0% - 100.0%L：Lightness(亮度)。取值为：0.0% - 100.0%A:alpha透明度 0~1之间语法:
HSLA(H,S,L,A)
HSL色轮
HSL色轮
透明颜色：
transparent实例：
border实现三角箭头、风车等
透明度：
opacity取值：
0-1之间注：低版本的
IE浏览器不兼容,需用IE浏览器的滤镜实现相同效果，filter:alpha(opacity=50)对于低版本的火狐浏览器需添加内核前缀，
-moz-opacity
第八课 CSS3边框系列
圆角-阴影
边框圆角
在
CSS2中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片在
CSS3中，创建圆角是非常容易的在
CSS3中，border-radius属性用于创建圆角
border-radius边框圆角写法border-radius: 2em 1em 4em / 0.5em 3em;等价于
border-top-left-radius: 2em 0.5em;border-top-right-radius: 1em 3em;border-bottom-right-radius: 4em 0.5em;border-bottom-left-radius: 1em 3em;
box-shadow方框添加阴影x-shadow必需。水平阴影的位置。允许负值。y-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊距离。spread可选。阴影的尺寸。color可选。阴影的颜色。请参阅CSS颜色值inset可选。将外部阴影 (outset) 改为内部阴影
语法：
box-shadow:x-shadow y-shadow blur spread color inset;box-shadow的API
实例：
box-shadow:10px 10px 5px 5px #888888;
边框系列-图片
border-image语法
| 属性 | 版本 | 简介 |
|---|---|---|
| border-image | CSS3 | 设置或检索对象的边框使用图像来填充 |
| border-image-source | CSS3 | 设置或检索对象的边框是否用图像定义样式或图像来源路径 |
| border-image-slice | CSS3 | 设置或检索对象的边框背景图的分割方式 |
| border-image-width | CSS3 | 设置或检索对象的边框厚度 |
| border-image-outset | CSS3 | 设置或检索对象的边框背景图的扩展 |
| border-image-repeat | CSS3 | 设置或检索对象的边框图像的平铺方式 |
border-image-slice设置或检索对象的边框背景图的分割方式
Paste_Image.png
border-image-repeatstretch： 指定用拉伸方式来填充边框背景图。 *默认的repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小 直至正好可以铺满整个边框。写本文档时仅Firefox能看到该效果
用于指定边框背景图的重复方式
取值：
第九课 CSS3运动体系
过渡
过渡：给改变添加过程
什么是过渡
过渡效果由哪几部分组成
过渡可以干些什么
transition过渡属性transition: property duration timing-function delay;time秒或毫秒
time秒或毫秒
none没有过渡属性all所有属性都过渡(默认值)property具体属性名称(property1,property2...)
transition-property:过渡属性的名称transition-duration:过渡属性花费的时间transition-timing-function:过渡效果速度曲线transition-delay:过渡效果延迟时间
transition-timing-function:过渡效果速度曲线linear:规定以相同速度开始至结束的过渡效果（等于cubic-bezier(0,0,1,1)）。ease:规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。ease-in:规定以慢速开始的过渡效果（等于cubic-bezier(0.42,0,1,1)）。ease-out:规定以慢速结束的过渡效果（等于cubic-bezier(0,0,0.58,1)）。ease-in-out:规定以慢速开始和结束的过渡效果（等于cubic-bezier(0.42,0,0.58,1)）。cubic-bezier(n,n,n,n):在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值。
过渡完成事件
过渡完成事件
Webkit内核：
obj.addEventListener('webkitTransitionEnd',function(){})标准:
obj.addEventListener('transitionend',function(){})动画
什么是
CSS3动画？通过
CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash动画以及JavaScript
动画接口
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画。 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 |
| animation-name | 规定 @keyframes 动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定动画何时开始。 |
| animation-iteration-count | 规定动画被播放的次数。 |
| animation-direction | 规定动画是否在下一周期逆向地播放。 |
| animation-play-state | 规定动画是否正在运行或暂停。 |
| animation-fill-mode | 规定对象动画时间之外的状态。 |
animation-timing-function速度曲线
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
在谷歌浏览器里面需要加上
-webkit-IE6,7,8,9不支持css3运动拓展阅读
CSS3盒模型阴影
box-shadow:inset x y blur spread colorinset：投影方式inset：内投影outset：外投影 默认(不能设置)x、y：阴影偏移blur：模糊半径（灰度）spread：扩展阴影半径先扩展原有形状，再开始画阴影
color
CSS3盒模型倒影box-reflect倒影方向
above|below|left|right;距离
渐变（可选）
CSS3其他盒模型
box-sizing盒模型解析模式content-box标准盒模型(和css2一样的计算)width/height=border+padding+contentborder-box怪异盒模型width/height与设置的值一样 ，content减小
扩展阅读
第十课 transform 2D转换
Css3平面转换方法translate()移动rotate()旋转scale()缩放skew()翻转matrix()矩阵
transform:
translateX()translateY()
scaleX()scaleY()
skewX()skewY()
deg度数
rotate()旋转函数 (deg)skew(X,Y)倾斜函数 (deg)scale(X,Y)缩放函数 (正数、负数和小数)translate(X,Y)位移函数(px)
rotate()旋转方法把元素顺时针旋转 30 度
用于旋转元素角度
例：
rotate(30deg)
translate()位置方法例：
translate(50px,100px)
把元素从左侧移动 50 像素，从顶端移动 100 像素。
用于移动元素位置
其实有些类似于我们的相对定位
scale()尺寸方法例：
scale(2,4)
把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍
方法用于改变元素尺寸
skew()翻转方法把元素围绕
X轴把元素翻转30度，围绕Y轴翻转20度
通过
skew()方法，元素翻转给定的角度例：
transform: skew(30deg,20deg);
第十一课 transform 3D转换
Css3立体转换值：具体的坐标值/百分比/(
left/right/center/top/bottom)
默认center center
值：取值类似于变换基准
transform-style（preserve-3d）建立3D空间（指定元素的子元素展示的场景是在3D场景还是平面(投影)场景）Perspective视角（指定观察者与z=0平面的距离，从而让元素及子元素看起来有3D透视位置效果
值：集体的带单位数值）Perspective- origin视角基点transform-origin：坐标轴基点（变换基准）
transform 新增函数
rotateX()rotateY()rotateZ()translateZ()scaleZ()
第十二课 视频音频
视频音频格式的简单介绍
视频编码：ACC、MP3、Vorbis
视频的组成部分：画面、音频、编码格式
视频编码：H.264、Theora、VP8(google开源)
常见的视频格式
常见的音频格式
HTML5支持的格式
HTML5能在完全脱离插件的情况下播放音视频,但是不是所有格式都支持。支持的视频格式：
Ogg=带有Theora视频编码+Vorbis音频编码的Ogg文件MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件WebM=带有VP8视频编码+Vorbis音频编码的WebM格式
Video的使用
单独用法
<video class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="文件地址" controls="controls"></video>
带提示用法
< video class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="文件地址" controls="controls"> 您的浏览器暂不支持video标签。播放视频</ video >
兼容用法
< video controls="controls" width="300"> <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="move.ogg" type="video/ogg" > <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="move.mp4" type="video/mp4" > 您的浏览器暂不支持video标签。播放视频 </ video >
Video的常见属性
| 属性 | 值 | 描述 |
|---|---|---|
| Autoplay | Autoplay | 视频就绪自动播放 |
| controls | controls | 向用户显示播放控件 |
| Width | Pixels(像素) | 设置播放器宽度 |
| Height | Pixels(像素) | 设置播放器高度 |
| Loop | Loop | 播放完是否继续播放该视频，循环播放 |
| Preload | load{auto,meta,none} | 规定是否预加载视频。 |
| Src | url | 视频url地址 |
| Poster | Imgurl | 加载等待的画面图片 |
| Autobuffer | Autobuffer | 设置为浏览器缓冲方式，不设置autoply才有效 |
Video的API方法
| 方法 | 属性 | 事件 |
|---|---|---|
| play() | currentSrc | play |
| pause() | currentTime | pause |
| load() | videoWidth | progress |
| canPlayType() | videoHeight | error |
第十三课 canvas
标签
<canvas>不支持
canvas的浏览器可以看到的内容默认宽度
300px，默认高度150px注意：
canvas宽高需要设置在标签中 否则绘制的东西可能出错
<canvas>绘制环境getContext("2d");目前支持2d的场景
<canvas width="" height="" id=""> 您的浏览器不支持canvas，请更换浏览器！</canvas>
绘制矩形
默认一像素黑色边框
rect(L,T,W,H):创建一个矩形fillRect(L,T,W,H):绘制填充的矩形clearRect(x,y,w,h)清除矩形选区strokeRect(L,T,W,H)绘制空心矩形(无填充)
设置绘图样式
fillStyle:填充颜色(绘制canvas是有顺序的)lineWidth:触笔宽度(线宽)strokeStyle:触笔颜色
绘制路径
beginPath():开始路径closePath():结束路径moveTo(x,y):将触笔移动到x,y点lineTo(x,y):绘制到x,y点stroke():触笔方法 画线 默认为黑色fill():填充方法rect(x,y,w,h):矩形路径save():保存绘图信息 并新开辟一个异次元空间restore():恢复路径
绘制曲线
贝塞尔曲线:
dx1,dy1控制点一dx2,dy2控制点二x1,y1结束坐标
贝塞尔曲线:
dx,dy控制点x1,y1结束坐标
x1,y1坐标一x2,y2坐标二 r圆弧半斤
arcTo(x1,y1,x2,y2,r)quadraticCurveTo(dx,dy,x1,y1)bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
绘制圆形
x，y起始位置弧度与角度：
弧度=角度值*Math.PI/180旋转方向：顺时针（默认：
false），逆时针（true）
arc(x,y,半径,起始弧度,结束弧度,旋转方向)
绘制文本
textAlign = "";文本左右对齐方式start center end left righttextBaseline文本上下对齐方式
alphabetic默认。文本基线是普通的字母基线。top文本基线是em方框的顶端。。hanging文本基线是悬挂基线。middle文本基线是em方框的正中。ideographic文本基线是表意基线。bottom文本基线是em方框的底端。measureText(文本).width;文本实际宽度(只有宽度值)
strokeText(文本,x,y); 绘制空心文本fillText(文本,x,y); 绘制实心文本font = "font-size font-family"注:尺寸 字体缺一不可
图形边界样式
butt(默认值),round(圆角),square(高度多出线宽一半)
miter(默认值),round(圆角),bevel(斜角)
lineJoin: 边界连接点样式lineCap: 端点样式
绘制图片
createPattern(img,平铺方式)平铺方式:
repeat,repeat-x,repeat-y,no-repeat
中调用drawImage(img,x,y,w,h);绘制图片(图片,坐标x,坐标y,宽度,高度)
图片预加载，获取图片文件
设置背景
canvas变换
translate(x,y)坐标基准点偏移 : 从起始点为基准，移动到当前位置
rotate(弧度): 旋转弧度公式 = 角度*PI/180scale(wb,hb)缩放比例(缩放canvas绘制的图片)
颜色渐变
x1,y1,r1内圆坐标及半径x2,y2,r2外圆坐标及半径addColorStop(位置,颜色) 位置:渐变点0-1之间 可多个
x1,y1起始坐标点x2,y2结束坐标点
线性渐变:
createLinearGradient(x1,y1,x2,y2)径向渐变:
createRadialGradient(x1,y1,r1,x2,y2,r2)
阴影
shadowOffsetX,shadowOffsetYx轴、y轴偏移shadowBlur阴影模糊度shadowColor阴影颜色 默认颜色:rgba(0,0,0,0)
像素
返回
ImageData对象，该对象为画布上指定的矩形复制像素数据putImageData(img,x2,y2)把图像数据（从指定的
ImageData对象）放回画布上
createImageData(sx,sy)创建新的、空白的ImageData对象getImageData(x1,y1,sx,sy)
合成
globalAlpha设置或返回绘图的当前alpha或透明值globalCompositeOperation设置或返回新图像如何绘制到已有的图像上source-over默认。在目标图像上显示源图像。source-atop在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。source-in在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。source-out在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。destination-over在源图像上方显示目标图像。destination-atop在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。destination-in在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。destination-out在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。lighter显示源图像 + 目标图像。copy显示源图像。忽略目标图像。xor使用异或操作对源图像与目标图像进行组合。
第十四课 SVG绘图
svg是什么
矢量图
与
canvas的区别
svg的引入方式
方式一：
<?xml version="1.1" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/ Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"></svg>
方式二：
图片、背景、框架
方式三:
html页面中添加svg
circle:圆形圆心坐标
cx,cy半径
rfillstrokestroke-widthstlye样式fill = "none/transparent"
ellipse:椭圆
cx属性定义的椭圆中心的x坐标cy属性定义的椭圆中心的y坐标rx属性定义的水平半径ry属性定义的垂直半径
rect : 矩形
widthheight宽高坐标
x,y圆角
rx,ry
line:线条x1,y1,x2,y2stroke-opacity透明fill-opacity
polyline:折线
points:点坐标（x1 y1 x2 y2...）或(x1,y1,x2,y2....)
polygon:多边形
折线闭合
fill-rule:evenodd/nonzero;
path: 路劲
x半径y半径 角度 弧长(0 小弧 1大弧) 方向(0逆时针 1顺时针)终点
(x y)
C,S,Q,T贝塞尔曲线大写为绝对坐标(具体的坐标位置)
小写为相对坐标(相对起始坐标点的具体长度)
d属性M(起始坐标),L(结束坐标),H(水平线),V(垂直线),A(圆弧),Z(闭合路劲)A命令
C命令：三次贝塞尔曲线
(x1,y1,x2,y2,x,y)x1,y1控制点一x2,y2控制点二x,y结束点
S命令：平滑贝塞尔曲线(自动对称一个控制点)
(x2,y2,x,y)x2,y2控制点 x,y结束点
Q命令：二次贝塞尔曲线
(x1,y1,x,y)x1,y1控制点 x,y结束点
T命令：一次贝塞尔曲线
(x,y)结束点
g标签:组合元素 设置元素公共属性共用属性
transform = "translate(0,0)"
text标签x,y,text-anchor(对齐start end middle)font-size
image标签x,y,widthheightxlink:href(图片地址)
第十五课 地理信息与本地存储
地理位置
经度 : 南北极的连接线
纬度 : 东西连接的线
位置信息从何而来
IP地址GPS全球定位系统Wi-Fi无线网络基站
avigator.geolocation移动设备有用，位置改变才会触发
配置参数：
frequency更新的频率关闭更新请求 :
clearWatch
enableHighAcuracy: 更精确的查找，默认falsetimeout: 获取位置允许最长时间，默认infinitymaximumAge: 位置可以缓存的最大时间，默认0
失败编号 ：
code
0 : 不包括其他错误编号中的错误
1 : 用户拒绝浏览器获取位置信息
2 : 尝试获取用户信息，但失败了
3 : 设置了
timeout值，获取位置超时了
经度 :
coords.longitude纬度 :
coords.latitude准确度 :
coords.accuracy海拔 :
coords.altitude海拔准确度 :
coords.altitudeAcuracy行进方向 :
coords.heading地面速度 :
coords.speed请求的时间:
new Date(position.timestamp)
单次定位请求 ：
getCurrentPosition(请求成功,请求失败,数据收集方式)请求成功函数
请求失败函数
数据收集 : json的形式
多次定位请求* :
watchPosition
examp01 getCurrentPosition
<button id="btn">请求位置信息</button><div id="box"></div>
var btn = document.getElementById("btn");var box = document.getElementById("box");
btn. = function(){
navigator.geolocation.getCurrentPosition(function(position){
box.innerHTML +="经度："+position.coords.longitude + "<br>";
box.innerHTML +="纬度："+position.coords.latitude + "<br>";
box.innerHTML +="海拔："+position.coords.accuracy + "<br>";
box.innerHTML +="海拔的准确度："+position.coords.altitudeAccuracy + "<br>";
box.innerHTML +="地面速度"+position.coords.speed + "<br>";
box.innerHTML +="行进方向"+position.coords.heading + "<br>";
box.innerHTML +="请求时间"+new Date(position.timestamp) + "<br>";
},function(err){
alert(err.code);
},{ enableHighAccuracy:false,//精确请求
timeout:5000,//设置超时
maximumAge:1000//缓存时间
});
}**examp02 **
var btn = document.getElementById("btn");var box = document.getElementById("box");
btn. = function(){
navigator.geolocation.watchPosition(function(position){
box.innerHTML +="经度："+position.coords.longitude + "<br>";
box.innerHTML +="纬度："+position.coords.latitude + "<br>";
box.innerHTML +="海拔："+position.coords.accuracy + "<br>";
box.innerHTML +="海拔的准确度："+position.coords.altitudeAccuracy + "<br>";
box.innerHTML +="地面速度"+position.coords.speed + "<br>";
box.innerHTML +="行进方向"+position.coords.heading + "<br>";
box.innerHTML +="请求时间"+new Date(position.timestamp) + "<br>";
},function(err){
alert(err.code);
},{ enableHighAccuracy:false,//精确请求
timeout:5000,//设置超时
maximumAge:1000//缓存时间
});
}example03 高德地图应用
#container { width:600px;
height: 300px; margin:40px auto; border:1px solid red;
}<div id="container"></div> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://webapi.amap.com/maps?v=1.3&key=278b7b8b4728ba302b7e566fc2a97b36"></script>
var map = new AMap.Map('container');examp04 搜索城市
#container {width:500px; height:500px; margin:100px auto;}
.menu{ width:100px; box-shadow: 0 0 5px #000; margin:auto; background:#fff;
}.menu ul li{ list-style:none; line-height:30px; text-align:center; cursor:pointer;
}#box{ width:400px; height:40px; position:absolute; top:150px; left:50%; margin-left:-200px; background:#fff; box-shadow:0 0 10px #000;
}input{ height:38px; width:300px; border:none; outline:none;
}#btn{ width:80px;
}<div id="container"></div> <div id="box"> <input type="text" id="city" placeholder="请输入城市..."> <input type="button" value="搜索" id="btn"></div><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://webapi.amap.com/maps?v=1.3&key=278b7b8b4728ba302b7e566fc2a97b36"></script>
var btn = document.getElementById("btn");var city = document.getElementById("city");var map = new AMap.Map('container');var toolBar,mouseTool,contextMenu;//在地图中添加操作toolBar插件、mouseTool插件map.plugin(["AMap.ToolBar","AMap.MouseTool"],function(){
toolBar = new AMap.ToolBar();
map.addControl(toolBar);
mouseTool = new AMap.MouseTool(map);
});var menuContext = document.createElement("div");
menuContext.innerHTML = "<div class=menu><ul><li ='zoomMenu(0)'>缩小</li>
<li ='zoomMenu(1)'>放大</li>
<li ='distanceMeasureMenu()'>距离量测</li>
<li = 'addMarkerMenu()'>添加标记</li></ul></div>";//创建一个自定义的右键菜单contextMenu = new AMap.ContextMenu({isCustom:true,content:menuContext});//给地图绑鼠标右键功能弹出右键菜单AMap.event.addListener(map,"rightclick",function(e){
contextMenu.open(map,e.lnglat);//e.lnglat鼠标点击的经纬度
contextMenuPosition = e.lnglat;
})//右键菜单缩放地图function zoomMenu(n){ if(n === 0){map.zoomOut();} if(n === 1){map.zoomIn();}
contextMenu.close();
}
contextMenu.close();//测量距离功能function distanceMeasureMenu(){
mouseTool.rule();
contextMenu.close();
}//添加标注功能function addMarkerMenu(){
mouseTool.close(); var marker = new AMap.Marker({ map: map, position: contextMenuPosition, //基点位置
offset: {x:-5,y:-10} //相对于基点位置
});
contextMenu.close();
}//搜索城市btn. = function(){ var val = city.value;
map.setCity(val);
}本地存储
Storage永久存储（可以手动删除数据）
session临时回话，从页面打开到页面关闭的时间段窗口的临时存储，页面关闭，本地存储消失
sessionStoragelocalStorage
Storage的特点存储量限制 ( 5M )
客户端完成，不会请求服务器处理
sessionStorage数据是不共享、localStorage共享
Storage API删除全部存储的值
删除数据，通过key来删除相应的
value
获取数据，通过
key来获取到相应的value
设置数据，(
key,value)类型，类型都是字符串可以用获取属性的形式操作
setItem():getItem():removeItem():clear():
存储事件:
当数据有修改或删除的情况下，就会触发
storage事件在对数据进行改变的窗口对象上是不会触发的`
Key: 修改或删除的key值，如果调用clear(),key为nullnewValue: 新设置的值，如果调用removeStorage(),key为nulloldValue: 调用改变前的value值storageArea: 当前的storage对象url: 触发该脚本变化的文档的url注：
session同窗口才可以,例子：iframe操作
第十六课 HTML5新增JS方法
H5在JavaScript中新增的方法一览
新增选择器
document.querySelector()选择单个元素document.querySelectorAll()选择所有的document.getElementsByClassName()通过类名选择
延迟加载JS
defer=“defer ”: 延迟加载，会按顺序执行，在执行前被触发async =“async”: 异步加载，加载完就触发，有顺序问题
很多浏览器都采用了并行加载JS，但还是会影响其他内容
JS的加载会影响后面的内容加载Html5的defer和async浏览器兼容性：
Labjs库
/**
* 动态加载script文件 （推荐方法） 只需请求一次 可加载多个JavaScript文件，减少请求次数以及页面的加载阻塞
*/function loadScript(url,callback){ var script = document.createElement("script");
script.type = "text/javascript"; if(script.readyState){//IE
script.onreadystatechange = function(){ if(script.readyState == "loaded" || script.readyState == "complete"){
onreadystatechange = null;
callback();
}
}
}else {
script. = function(){
callback();
}
}
script.src = url; document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript("js/defer.js",function(){ console.log("加载成功"); // 加载成功回调});
loadScript("js/async.js",function(){ console.log("加载成功"); // 加载成功回调});获取
class列表属性length:class的长度add(): 添加class方法remove(): 删除class方法toggle(): 切换class方法contains(): 判断类名是否存在返回bool值
classList
JSON的新方法eval()：对任何的字符串进行解析变成jsparse()：字符串中的属性要严格的加上引号
会自动的把双引号加上
字符串中的属性要严格的加上引号
parse(): 把字符串转成jsonstringify(): 把json转化成字符串与
eval的区别其他浏览器兼容
历史管理
服务器下运行
pushState: 三个参数 ：数据 标题(都没实现) 地址(可选)onpopstate事件 : 读取数据event.state
onhashchange：改变hash值来管理history：
第十七课 HTML5拖拽事件
图片自带拖拽功能
其他元素可设置
draggable属性draggable ：trueondragenter:进入目标元素触发ondragover:进入目标、离开目标之间，连续触发ondragleave:离开目标元素触发ondrop:在目标元素上释放鼠标触发
需要在
ondragover事件里面阻止默认事件
ondragstart: 拖拽前触发ondrag:拖拽前、拖拽结束之间，连续触发ondragend:拖拽结束触发
拖拽元素(被拖拽元素对象)事件 :
目标元素(拖拽元素被拖到的对象)事件 :
拖拽兼容问题
dataTransfer对象setData(): 设置数据key和value(必须是字符串)getData(): 获取数据，根据key值，获取对应的valueeffectAllowed: 设置光标样式(none,copy,copyLink,copyMove,link,linkMove,move,all和uninitialized)setDragImage：三个参数（指定的元素，坐标X，坐标Y）files： 获取外部拖拽的文件，返回一个filesList列表
filesList下有个type属性，返回文件的类型
火狐浏览器下需设置
dataTransfer对象才可以拖拽除图片外的其他标签
读取文件信息
当读取文件成功完成的时候触发此事件this. result获取读取的文件数据
readAsDataURL
FileReader(读取文件信息)参数为要读取的文件对象
examp01 拖拽案例
<div id="drap" draggable="true"></div><div id="box"></div>
#drap { width: 100px; height: 100px; background: red;
}#box { width: 500px; height: 500px; border: 2px solid blue; margin: 50px auto;
}//被拖拽元素事件drap.ondragstart = function(ev){ // 拖拽前
var ev = ev || window.event; //火狐浏览器下需设置dataTransfer对象才可以拖拽除图片外的其他标签
ev.dataTransfer.setData("key","poetries"); //effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove,move, all 和uninitialized)
ev.dataTransfer.effectAllowed = "copy"; //设置被拖拽的小元素 setDragImage ：三个参数（指定的元素，坐标X，坐标Y）
ev.dataTransfer.setDragImage(pic,25,25); this.style.background = "green";
}
drap.ondrag = function(){ // 拖拽过程中
this.innerText = "被拖拽中...";
}
drap.ondragend = function(){ // 拖拽结束
this.style.background = "red"; this.innerHTML = "";
}//目标元素事件box.ondragenter = function(){ //进入目标元素触发
this.innerHTML = "可将文件拖放到这里!";
}
box.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
var ev = ev || window.event;
ev.preventDefault();
this.style.background = "pink";
}
box.ondragleave = function(){ //离开目标元素触发
this.innerHTML = ""; this.style.background = "none";
}
box.ondrop = function(ev){//在目标元素上释放鼠标触发
//alert("拖放结束")
this.innerHTML = ev.dataTransfer.getData("key");
}example02 拖拽相册
<h1>请拖拽图片到红框中</h1><div id="box"><span>可以将文件拖放到这里！！</span></div><div id="dustbin">垃圾回收站</div>
#box{ position:relative; width:500px; height:500px; border:2px solid red; margin:100px auto 0px;
}#box span{ position:absolute; left:0; top:0; right:0; bottom:0; height:50px; width:192px; margin:auto; display:none;
}img{ width:100px;height:100px;
}#dustbin{ width:200px; height:100px; background:#000; color:#fff; font-size:40px; text-align:center; line-height:100px; margin:auto;
}var box = document.getElementById("box");var dusTbin = document.getElementById("dustbin");var span = box.getElementsByTagName("span")[0];//目标元素事件var img = '';
box.ondragenter = function(){//进入目标元素触发
span.style.display = "block";
}
box.ondragover = function(ev){//在目标元素上连续触发
var ev = ev||window.event;
ev.preventDefault();//阻止默认事件
span.style.display = "block";
}
box.ondragleave = function(){//离开目标元素
span.style.display = "none";
}
box.ondrop = function(ev){//在目标元素上面释放鼠标触发
//alert("拖拽结束！！");
var ev = ev||window.event;
ev.preventDefault();//阻止默认事件
span.style.display = "none"; var file = ev.dataTransfer.files; //alert(file[0].type);
for (var i=0; i<file.length ;i++ )
{ if (file[i].type.indexOf("image")!=-1)
{ var read = new FileReader();//新建一个读取文件对象
read.readAsDataURL(file[i]);//读取文件
read. = function(){//读取文件成功之后调用什么函数
var img = document.createElement("img"); //alert(this.result);
img.src = this.result;
box.appendChild(img); //获取img节点 实现删除功能
var oImg = document.getElementsByTagName("img"); if (oImg)
{ for (var j=0;j<oImg.length ;j++ )
{
oImg[j].ondragstart = function(ev){
ev.dataTransfer.setData("data",ev.target.innerHTML);
img = ev.target;
}
oImg[j].ondragend = function(ev){
ev.dataTransfer.clearData("data");//清楚数据
img = null;
}
}
} //实现删除功能(移除img节点)
dusTbin.ondragover = function(ev){
ev.preventDefault();
}
dusTbin.ondrop = function(){ if (img)
{
img.parentNode.removeChild(img);
}
}
}
}else{
alert("请上传图片！");
}
}
}example03 拖拽排序
<div class="wrap" id="wrap"> <ul id="box"> <li style="background:#f3f" draggable="true">1</li> <li style="background:#ff6" draggable="true">2</li> <li style="background:#c60" draggable="true">3</li> <li style="background:#903" draggable="true">4</li> <li style="background:#0f6" draggable="true">5</li> <li style="background:#636" draggable="true">6</li> <li style="background:#36f" draggable="true">7</li> <li style="background:#033" draggable="true">8</li> </ul></div>
.wrap{ width:500px; height:500px; margin:50px auto;
}ul li{ list-style:none; width:500px; height:50px; color:#fff; text-align:center; line-height:50px; font-size:40px; font-weight:bold;
}var oUl = document.getElementById("box");var oLi = oUl.getElementsByTagName("li");var curr = 0;function sort(){ for (var i = 0;i < oLi.length;i++) {
oLi[i].index = i;
oLi[i].ondragstart = function(ev){ var ev = ev || window.event;
ev.dataTransfer.setData("data",this.innerHTML); //this.innerHTML = "被拖拽中...";
curr = this.index;
}
oLi[i].ondragenter = function(){ for(var i = 0;i < oLi.length;i++){
oLi[i].style.border = "none";
} if(curr != this.index){ this.style.border = "2px solid #000";
}
}
oLi[i].ondragover = function(e){ var e = e || window.event;
e.preventDefault();
}
oLi[i].ondrop = function(ev){ //鼠标释放的时候
//oUl.insertBefore(oLi[curr],this);//insertBefore(新节点，目标节点)
inserAfter(oLi[curr],this); this.style.border = "none"; //oLi[curr].innerHTML = ev.DataTransfer.getData("data");
sort();
}
}
}
sort();function inserAfter(newItem,targerItem){ var parentItem = targerItem.parentNode; if(parentItem.lastChild == targerItem){
parentItem.appendChild(newItem);
}else {
parentItem.insertBefore(newItem,targerItem.nextSibling);
}
}第十八课 跨文档操作
跨文档请求
同域跨文档
父页面操作子页面：
contentWindow子页面操作父页面：
window.top(找到最顶级的父页面)/parent(第一父页面)新窗口页：
父页面操作子页面：
window.open子页面操作父页面：
window.opener
iframe内页：
不同域跨文档
message事件监听ev.origin发送数据来源的域ev.data发送的数据
postMessage（“发送的数据”,”接收的域”）通过判断发送的数据来执行相应的需求
ajax跨域
upload.onprogress(ev)上传进度(实现文件上传进度条)FormData构建提交二进制数据
ev.total发送文件的总量ev.loaded已发送的量
跨域请求：修改服务端头信息
I
E兼容：XDomaiRequest
XMLHttpRequest新增功能进度事件：
拓展阅读
附录一 css3响应式布局
媒体类型
*all所有媒体braille盲文触觉设备embossed盲文打印机*print手持设备projection打印预览*screen彩屏设备speech'听觉'类似的媒体类型tty不适用像素的设备tv电视
关键字
andnotnot关键字是用来排除某种制定的媒体类型onlyonly用来定某种特定的媒体类型
媒体特性
(max-width:600px)(max-device-width: 480px)设备输出宽度(orientation:portrait)竖屏(orientation:landscape)横屏(-webkit-min-device-pixel-ratio: 2)像素比devicePixelRatio设备像素比window.devicePixelRatio = 物理像素 / dips
样式引入
<link rel="stylesheet" href="css/index.css" media="print" />
@import url("css/demo.css") screen;
@media screen{ }<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)”href=”landscape.css”>
@media screen and (min-width:360px) and (max-width:500px) {}<link rel="stylesheet" type="text/css" href="indexA.css" media="screen and (min-width: 800px)">
<link rel="stylesheet" type="text/css" href="indexB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
<link rel="stylesheet" type="text/css" href="indexC.css" media="screen and (max-width: 600px)">
作者：poetries
链接：https://www.jianshu.com/p/c3e1e39890fb
共同学习，写下你的评论
评论加载中...
作者其他优质文章
