转载请声明 原文链接
这篇文章主要总结H5的一些新增的功能以及一些基础归纳,并不是很详细,后面会一直完善补充新的内容,本文是一些笔记记录,放在这里供自己参考也供他人学习!
第一课 HTML5结构
-
HTML5
是新一代的HTML
-
DTD
声明改变
常用的一些新的结构标签
结构标签
多媒体交互标签
删除的HTML
标签
- 纯表现的元素:
basefont
big
center
font
s
strike
tt
u
- 对可用性产生负面影响的元素:
frame
frameset
-
noframes
acronym
applet
isindex
dir
-
重新定义的
HTML
标签-
代表内联文本,通常是粗体,没有传递表示重要的意思
-
代表内联文本,通常是斜体,没有传递表示重要的意思
-
可以同
details
与figure
一同使用,定义包含文本,ialog
也可用 -
可以同
details
与figure
一同使用,汇总细节,dialog
也可用 -
表示主题结束,而不是水平线,虽然显示相同 -
重新定义用户界面的菜单,配合
commond
或者menuitem
使用 -
表示小字体,例如打印注释或者法律条款
-
表示重要性而不是强调符号
-
-
崭新新的页面布局
传统的布局
HTML5标签布局
第二课 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:
是否保存用户输入值 -
formaction:
在submit
里定义提交地址 -
datalist:
输入框选择列表配合list
使用list
值为datalist
的id
值 -
output:
计算或脚本输出
表单验证
-
validity
对象,通过下面的valid
可以查看验证是否通过,如果八种验证都返回true
,一种验证失败返回false
oText.addEventListener("invalid",fn1,false)
-
ev.preventDefault()
: 阻止默认事件 -
valueMissing
: 当输入值为空的时候,返回true
-
typeMismatch
: 控件值与预期不吻合,返回true
-
patternMismatch
: 输入值不满足pattern
正则,返回true
-
cusomError
第三课 css3选择器
-
CSS3
发展史简介-
HTML
的诞生 20世纪90年代初 -
1996
年底,CSS
第一版诞生 -
1998
年5
月CSS2
正式发布 -
2004
年CSS2.1
发布 -
CSS3
的发布2002
2003
2004
2005
2007
2009
2010
-
-
模块化开发
-
CSS1
中定义了网页的基本属性: -
CSS2
中在CSS1
的基础上添加了高级功能- 浮动和定位、高级选择器等(子选择器、相邻选择器、通用选择器)
-
CSS3
遵循的是模块化开发。发布时间并不是一个时间点,而是一个时间段
-
-
CSS
选择器复习- 通用选择器:
*
选择到所有的元素 - 选择子元素:
>
选择到元素的直接后代 - 相邻兄弟选择器:
+
选择到紧随目标元素后的第一个元素 - 普通兄弟选择器:
~
选择到紧随其后的所有兄弟元素 - 伪元素选择器:
-
::first-line
匹配文本块的首行 -
::first-letter
选择文本块的首字母
-
- 伪类选择器:
-
:before
,:after
在元素内容前面、后面添加内容(相当于行内元素)
-
- 通用选择器:
CSS3结构选择器
Css3属性选择器
-
CSS3
伪类选择器-
UI伪类选择器:
-
:enabled
选择启用状态元素 -
:disabled
选择禁用状态元素 -
:checked
选择被选中的input
元素(单选按钮或复选框) -
:default
选择默认元素 -
:valid
、invalid
根据输入验证选择有效或无效的input
元素 -
:in-range
、out-of-range
选择指定范围之内或者之外受限的元素 -
:required
、optional
根据是否允许:required
属性选择input
元素
-
-
动态伪类选择器:
-
:link
选择链接元素 -
:visited
选择用户以访问的元素 -
:hover
鼠标悬停其上的元素 -
:active
鼠标点击时触发的事件 -
:focus
当前获取焦点的元素
-
-
其他伪类选择器:
-
:not(<选择器>)
对括号内选择器的选择取反 -
:lang(<目标语言>)
基于lang
全局属性的元素 -
:target
url
片段标识符指向的元素 -
:selection
鼠标光标选择元素内容
-
-
第四课 CSS3新增文本属性
-
CSS文本属性复习
-
white-space
:对象内空格的处理方式-
nowrap
控制文本不换行 -
pre
空白会被浏览器保留 -
pre-line
合并空白 保留换行符 -
pre-wrap
保留空白 正常换行
-
-
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
:文本的对齐方式css1
-
left
:默认值 左对齐 -
right
:右对齐 -
center
:居中 -
justify
: 内容两端对齐。 css3
-
start
:开始边界对齐 -
end
:结束边界对齐
-
text-transform
:文字的大小写-
css1
-
none
: 默认值 无转换 -
capitalize
: 将每个单词的第一个字母转换成大写 -
uppercase
: 转换成大写 -
lowercase
: 转换成小写
-
-
css3
-
full-width
: 将左右字符设为全角形式。不支持 -
full-size-kana
:将所有小假名字符转换为普通假名。不支持
-
-
-
text-decoration
:文本的装饰线,复合属性(只火狐支持)-
text-decoration-line
:- 指定文本装饰的种类。相当于
CSS1
时的text-decoration
属性
- 指定文本装饰的种类。相当于
-
text-decoration-style
: -
text-decoration-color
: -
blink
: 指定文字的装饰是闪烁。opera
和firefox
-
text-decoration
:#F00 double overline
CSS3
实例
-
-
text-shadow
:文本阴影- 取值:
x
y
blur
color
,......-
x
横向偏移 -
y
纵向偏移 -
blur
模糊距离(灰度) -
color
阴影颜色
-
- 取值:
-
text-fill-color
:文字填充颜色 -
text-stroke
:复合属性。设置文字的描边-
text-stroke-width
:文字的描边厚度 -
text-stroke-color
:文字的描边颜色
-
-
tab-size
:制表符的长度- 默认值为
8
(一个tab
键的空格字节长度),在pre
标签之内才会有显示
- 默认值为
-
word-wrap
:当前行超过指定容器的边界时是否断开转行-
normal
: 默认值 - 允许内容顶开或溢出指定的容器边界。
-
-
break-word
:
第五课 CSS3盒模型
标准盒子模型
IE盒子模型
-
CSS3弹性盒模型
-
display:box
或者display:inline-box
; 设置给父元素 -
box-orient
定义盒模型的布局方向 设置给父元素-
horizontal
水平显示 -
vertical
垂直方向
-
-
box-direction
元素排列顺序 设置给父元素 -
box-ordinal-group
设置元素的具体位置 设置子元素
-
flex布局语法篇小结
第六课 css3新增背景属性
-
CSS背景属性复习
-
background
:-
background-color
:背景颜色 -
background-image
:背景图片 -
background-repeat
:背景重复 -
background-position
:背景定位 -
background-attachment
:背景固定(scroll/fixed)
-
-
-
CSS3新增背景属性
-
background-size
背景尺寸background-size:x y
background-size:100% 100%
-
background-size:cover
比例放大 -
background-size:contain
包含(图片不溢出)
-
多背景
-
background:url() 0 0,url() 0 100%
; -
background-origin
背景区域定位 -
border-box
: 从borde
r区域开始显示背景。 -
padding-box
: 从padding
区域开始显示背景。 -
content-box
: 从content
内容区域开始显示背 -
background-clip
背景绘制区域 -
border-box
: 从border
区域向外裁剪背景。 -
padding-box
: 从padding
区域向外裁剪背景。 -
content-box
: 从content
区域向外裁剪背景。 -
text
:背景填充文本 -
no-clip
: 从border
区域向外裁剪背景
-
-
颜色渐变
-
线性渐变:
linear-gradient
(起点/角度,颜色 位置,...,)- 起点:
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');
-
- 起点:
-
径向渐变:
radial-gradient
(起点(圆心位置), 形状/半径/大小,颜色1,颜色2)- 起点:
left/top/right/bottom
或具体值/百分比 - 形状:
ellipse
(椭圆)、circle
(正圆) - 大小:具体数值或百分比,也可以是关键字(
closest-side
(最近端),closest-corner
最近角),farthest-side
(最远端), farthest-corner
(最远角),contain
(包含) ,cover
(覆盖));
- 起点:
-
第七课 css3新增颜色属性
-
CSS颜色属性复习
-
color name
颜色英文名称命名 -
HEX
方式 十六进制方式 -
rgb
方式 三原色配色方式
-
-
CSS3新增颜色属性
名称 | 颜色 | 颜色 | 取值 |
---|---|---|---|
r | red | 红色 | 0-255 |
g | green | 绿色 | 0-255 |
b | blue | 蓝色 | 0-255 |
a | alpha | 透明 | 0-1 |
-
HSL
模式HSLA
模式-
H
:Hue
(色调)。- 0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:
0 - 360
- 0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:
-
S
:Saturation
(饱和度)。取值为:0.0% - 100.0% -
L
:Lightness
(亮度)。取值为:0.0% - 100.0% -
A
:alpha
透明度 0~1之间 -
语法:
HSLA(H,S,L,A)
-
-
HSL色轮
HSL色轮
-
透明颜色:
transparent
-
透明度:
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
方框添加阴影-
语法:
box-shadow:x-shadow y-shadow blur spread color inset;
-
box-shadow的API
-
x-shadow
必需。水平阴影的位置。允许负值。 -
y-shadow
必需。垂直阴影的位置。允许负值。 -
blur
可选。模糊距离。 -
spread
可选。阴影的尺寸。 -
color
可选。阴影的颜色。请参阅CSS
颜色值 -
inset
可选。将外部阴影 (outset
) 改为内部阴影
-
- 实例:
box-shadow:10px 10px 5px 5px #888888;
-
边框系列-图片
属性 | 版本 | 简介 |
---|---|---|
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-repeat
- 用于指定边框背景图的重复方式
- 取值:
-
stretch
: 指定用拉伸方式来填充边框背景图。 *默认的 -
repeat
: 指定用平铺方式来填充边框背景图。当图片碰到边界时,如果超过则被截断。 -
round
: 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小 直至正好可以铺满整个边框。写本文档时仅Firefox能看到该效果
-
第九课 CSS3运动体系
过渡
-
过渡:给改变添加过程
- 什么是过渡
- 过渡效果由哪几部分组成
- 过渡可以干些什么
-
transition
过渡属性 -
transition: property duration timing-function delay
;-
transition-property:
过渡属性的名称-
none
没有过渡属性 -
all
所有属性都过渡(默认值) -
property
具体属性名称(property1
,property2
...)
-
-
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 color
-
inset
:投影方式 -
inset
:内投影 -
outset
:外投影 默认(不能设置) -
x
、y
:阴影偏移 -
blur
:模糊半径(灰度) -
spread
:扩展阴影半径 - 先扩展原有形状,再开始画阴影
color
-
CSS3
盒模型倒影 -
box-reflect
倒影- 方向
above|below|left|right;
- 距离
- 渐变(可选)
- 方向
-
CSS3其他盒模型
-
box-sizing
盒模型解析模式 -
content-box
标准盒模型(和css2
一样的计算) width/height=border+padding+content
-
border-box
怪异盒模型width/height
与设置的值一样 ,content
减小
-
-
扩展阅读
第十课 transform 2D转换
-
Css3
平面转换方法-
translate()
移动 -
rotate()
旋转 -
scale()
缩放 -
skew()
翻转 -
matrix()
矩阵
-
-
transform:
-
rotate()
旋转函数 (deg) -
skew(X,Y)
倾斜函数 (deg) -
scale(X,Y)
缩放函数 (正数、负数和小数) -
translate(X,Y)
位移函数(px)translateX()
translateY()
-
-
rotate()
旋转方法- 用于旋转元素角度
- 例:
rotate(30deg)
-
translate()
位置方法- 用于移动元素位置
- 例:
translate(50px,100px)
- 把元素从左侧移动 50 像素,从顶端移动 100 像素。
- 例:
- 其实有些类似于我们的相对定位
- 用于移动元素位置
-
scale()
尺寸方法- 方法用于改变元素尺寸
- 例:
scale(2,4)
- 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍
- 例:
- 方法用于改变元素尺寸
-
skew()
翻转方法- 通过
skew()
方法,元素翻转给定的角度- 例:
transform: skew(30deg,20deg);
- 把元素围绕
X
轴把元素翻转30
度,围绕Y
轴翻转20
度
- 把元素围绕
- 例:
- 通过
第十一课 transform 3D转换
-
Css3
立体转换-
transform-style(preserve-3d)
建立3D
空间 -
Perspective
视角 -
Perspective- origin
视角基点 -
transform-origin
:坐标轴基点
-
-
transform 新增函数
rotateX()
rotateY()
rotateZ()
translateZ()
scaleZ()
第十二课 视频音频
-
视频音频格式的简单介绍
- 常见的视频格式
- 视频的组成部分:画面、音频、编码格式
- 视频编码:H.264、Theora、VP8(google开源)
- 常见的音频格式
- 常见的视频格式
-
HTML5
支持的格式
-
HTML5
能在完全脱离插件的情况下播放音视频,但是不是所有格式都支持。 -
支持的视频格式:
-
Ogg=
带有Theora
视频编码+Vorbis
音频编码的Ogg
文件 -
MEPG4=
带有H.264视频编码+AAC
音频编码的MPEG4
文件 -
WebM=
带有VP8
视频编码+Vorbis
音频编码的WebM
格式
-
Video
的使用
-
单独用法
- 带提示用法
< video src="文件地址" controls="controls">
您的浏览器暂不支持video标签。播放视频
< video controls="controls" width="300">
您的浏览器暂不支持video标签。播放视频
属性 | 值 | 描述 |
---|---|---|
Autoplay | Autoplay | 视频就绪自动播放 |
controls | controls | 向用户显示播放控件 |
Width | Pixels(像素) | 设置播放器宽度 |
Height | Pixels(像素) | 设置播放器高度 |
Loop | Loop | 播放完是否继续播放该视频,循环播放 |
Preload | load{auto,meta,none} | 规定是否预加载视频。 |
Src | url | 视频url地址 |
Poster | Imgurl | 加载等待的画面图片 |
Autobuffer | Autobuffer | 设置为浏览器缓冲方式,不设置autoply才有效 |
方法 | 属性 | 事件 |
---|---|---|
play() | currentSrc | play |
pause() | currentTime | pause |
load() | videoWidth | progress |
canPlayType() | videoHeight | error |
第十三课 canvas
- 标签
-
绘制环境
-
getContext("2d")
;目前支持2d
的场景
-
-
绘制矩形
-
rect(L,T,W,H)
:创建一个矩形 -
fillRect(L,T,W,H)
:绘制填充的矩形 -
strokeRect(L,T,W,H)
绘制矩形(无填充)
-
-
设置绘图
-
fillStyle
:填充颜色(绘制canvas
是有顺序的) -
lineWidth
:线宽度,笔迹粗细 -
strokeStyle
:边线颜色
-
-
绘制路径
-
stroke
:绘制,划线(黑色默认) -
fill
:填充(黑色默认) -
rect(矩形区域)
-
clearRect
擦除一个矩形区域 -
save
进入到XXX(高逼格)状态 -
restore
退出xxx(高逼格)状态
-
-
绘制圆形
arc(x,y,半径,起始弧度,结束弧度,旋转方向)
-
x
,y
起始位置 - 弧度与角度:
弧度=角度 x π / 180
- 旋转方向:顺时针(默认:
false
),逆时针(true
)
-
绘制字体
-
font
:设置字体大小 -
fillText
:填充字体 -
strokeText
:绘制字体
-
- 扩展阅读
第十四课 SVG绘图
-
svg是什么
-
svg的引入方式
-
方式一:
- 方式二:
-
方式三:
-
circle
:圆形- 圆心坐标
cx
,cy
- 半径
r
-
fill
stroke
stroke-width
stlye
样式 fill = "none/transparent"
- 圆心坐标
-
ellipse:椭圆
-
cx
属性定义的椭圆中心的x坐标 -
cy
属性定义的椭圆中心的y坐标 -
rx
属性定义的水平半径 -
ry
属性定义的垂直半径
-
-
rect : 矩形
-
width
height
宽高 - 坐标
x
,y
- 圆角
rx
,ry
-
-
line
:线条-
x1
,y1
,x2
,y2
-
stroke-opacity
透明fill-opacity
-
-
polyline:折线
-
points
:点坐标(x1 y1 x2 y2...
)或(x1,y1,x2,y2....
)
-
-
polygon:多边形
- 折线闭合
fill-rule:evenodd/nonzero
;
- 折线闭合
-
path: 路劲
-
d
属性 -
M(起始坐标)
,L(结束坐标)
,H(水平线)
,V(垂直线)
,A(圆弧)
,Z(闭合路劲)
-
C
,S
,Q
,T
贝塞尔曲线 - 大写为绝对坐标(具体的坐标位置)
- 小写为相对坐标(相对起始坐标点的具体长度)
-
- A命令
-
x
半径y
半径 角度 弧长(0 小弧 1大弧) 方向(0逆时针 1顺时针) - 终点
(x y)
-
-
-
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命令:一次贝塞尔曲线
-
g
标签:组合元素 设置元素公共属性- 共用属性
transform = "translate(0,0)"
-
text
标签-
x
,y
,text-anchor
(对齐start end middle)font-size
-
-
image
标签-
x
,y
,width
height
-
xlink:href
(图片地址)
-
第十五课 地理信息与本地存储
地理位置
- 经度 : 南北极的连接线
-
纬度 : 东西连接的线
-
位置信息从何而来
-
IP
地址 -
GPS
全球定位系统 -
Wi-Fi
无线网络 - 基站
-
-
avigator.geolocation
- 单次定位请求 :
getCurrentPosition
(请求成功,请求失败,数据收集方式) -
请求成功函数
- 经度 :
coords.longitude
- 纬度 :
coords.latitude
- 准确度 :
coords.accuracy
- 海拔 :
coords.altitude
- 海拔准确度 :
coords.altitudeAcuracy
- 行进方向 :
coords.heading
- 地面速度 :
coords.speed
- 请求的时间:
new Date(position.timestamp)
- 经度 :
-
请求失败函数
- 失败编号 :
code
- 0 : 不包括其他错误编号中的错误
- 1 : 用户拒绝浏览器获取位置信息
- 2 : 尝试获取用户信息,但失败了
- 3 : 设置了
timeout
值,获取位置超时了
- 失败编号 :
-
数据收集 : json的形式
-
enableHighAcuracy
: 更精确的查找,默认false
-
timeout
: 获取位置允许最长时间,默认infinity
-
maximumAge
: 位置可以缓存的最大时间,默认0
-
-
多次定位请求* :
watchPosition
- 移动设备有用,位置改变才会触发
- 配置参数:
frequency
更新的频率 - 关闭更新请求 :
clearWatch
-
百度地图
API
- 单次定位请求 :
本地存储
-
Storage
-
sessionStorage
-
session
临时回话,从页面打开到页面关闭的时间段 - 窗口的临时存储,页面关闭,本地存储消失
-
-
localStorage
-
-
Storage
的特点- 存储量限制 ( 5M )
- 客户端完成,不会请求服务器处理
-
sessionStorage
数据是不共享、localStorage
共享
-
Storage API
-
setItem()
:- 设置数据,(
key
,value
)类型,类型都是字符串 - 可以用获取属性的形式操作
- 设置数据,(
-
getItem():
-
removeItem()
: -
clear()
:
-
-
存储事件:
- 当数据有修改或删除的情况下,就会触发
storage
事件 - 在对数据进行改变的窗口对象上是不会触发的`
-
Key
: 修改或删除的key
值,如果调用clear()
,key
为null
-
newValue
: 新设置的值,如果调用removeStorage()
,key
为null
-
oldValue
: 调用改变前的value
值 -
storageArea
: 当前的storage
对象 -
url
: 触发该脚本变化的文档的url - 注:
session
同窗口才可以,例子:iframe
操作
- 当数据有修改或删除的情况下,就会触发
第十六课 HTML5新增JS方法
-
新增选择器
-
document.querySelector()
选择单个元素 -
document.querySelectorAll()
选择所有的 -
document.getElementsByClassName()
通过类名选择
-
-
延迟加载JS
-
JS
的加载会影响后面的内容加载- 很多浏览器都采用了并行加载JS,但还是会影响其他内容
-
Html5
的defer
和async
-
defer=“defer ”
: 延迟加载,会按顺序执行,在onload
执行前被触发 -
async =“async”
: 异步加载,加载完就触发,有顺序问题
-
- 浏览器兼容性:
Labjs
库
-
-
获取
class
列表属性-
classList
-
length
:class
的长度 -
add()
: 添加class
方法 -
remove()
: 删除class
方法 -
toggle()
: 切换class
方法 -
contains()
: 判断类名是否存在返回bool
值
-
-
-
JSON
的新方法-
parse()
: 把字符串转成json
-
stringify()
: 把json
转化成字符串 -
与
eval
的区别-
eval()
:对任何的字符串进行解析变成js -
parse()
:字符串中的属性要严格的加上引号
-
- 其他浏览器兼容
-
-
历史管理
-
onhashchange
:改变hash值来管理 -
history
:- 服务器下运行
-
pushState
: 三个参数 :数据 标题(都没实现) 地址(可选) -
onpopstate
事件 : 读取数据event.state
-
- 服务器下运行
-
第十七课 HTML5拖拽事件
- 图片自带拖拽功能
- 其他元素可设置
draggable
属性 -
draggable :true
- 拖拽元素(被拖拽元素对象)事件 :
-
ondragstart
: 拖拽前触发 -
ondrag
:拖拽前、拖拽结束之间,连续触发 -
ondragend
:拖拽结束触发
-
- 目标元素(拖拽元素被拖到的对象)事件 :
-
ondragenter
:进入目标元素触发 -
ondragover
:进入目标、离开目标之间,连续触发 -
ondragleave
:离开目标元素触发 -
ondrop
:在目标元素上释放鼠标触发
-
- 拖拽元素(被拖拽元素对象)事件 :
-
拖拽兼容问题
-
火狐浏览器下需设置
dataTransfer
对象才可以拖拽除图片外的其他标签-
dataTransfer
对象 -
setData()
: 设置数据key
和value
(必须是字符串) -
getData()
: 获取数据,根据key
值,获取对应的value
-
effectAllowed
: 设置光标样式(none
,copy
,copyLink
,copyMove
,link
,linkMove
,move
,all
和uninitialized
) -
setDragImage
:三个参数(指定的元素,坐标X
,坐标Y
) -
files
: 获取外部拖拽的文件,返回一个filesList
列表-
filesList
下有个type
属性,返回文件的类型
-
-
-
-
读取文件信息
-
FileReader
(读取文件信息) - 参数为要读取的文件对象
-
onload
当读取文件成功完成的时候触发此事件 -
this. result
获取读取的文件数据
-
-
第十八课 跨文档操作
-
跨文档请求
-
同域跨文档
-
iframe
内页:- 父页面操作子页面:
contentWindow
- 子页面操作父页面:
window.top
(找到最顶级的父页面)/parent
(第一父页面) - 新窗口页:
- 父页面操作子页面:
window.open
- 子页面操作父页面:
window.opener
- 父页面操作子页面:
- 父页面操作子页面:
-
-
不同域跨文档
-
postMessage(“发送的数据”,”接收的域”)
-
message
事件监听 -
ev.origin
发送数据来源的域 -
ev.data
发送的数据
-
- 通过判断发送的数据来执行相应的需求
-
-
ajax跨域
-
XMLHttpRequest
新增功能- 跨域请求:修改服务端头信息
-
进度事件:
-
upload.onprogress(ev)
上传进度(实现文件上传进度条)-
ev.total
发送文件的总量 -
ev.loaded
已发送的量
-
-
FormData
构建提交二进制数据
-
-