HTML5+CSS3整体回顾

转载请声明原文链接

这篇文章主要总结H5的一些新增的功能以及一些基础归纳，这里只是一个提纲，并不是很详细，后面会一直完善补充新的内容，本文是一些笔记记录，放在这里供自己参考也供他人学习！

HTML5概览

第一课 HTML5结构

HTML5 是新一代的 HTML
DTD声明改变 <!DOCTYPE html>
- 新的结构标签
- 注意的地方
  - ie8 不兼容

一些总结--from-dunitian

常用的一些新的结构标签

结构标签

多媒体交互标签

补充说明
- hground如果有多级标题，这个元素可以将H元素进行分组
- mark这个元素可以显示特殊情况下的重要文字
- small 这个元素表示边栏评论，如附属细则
- cite这个元素可用于显示作品标题（图书、电影、诗歌等）
- adress这个元素显示article或整个文档的合同信息，且位于footer这个元素之中
- time显示人和机器可读的日期和时间，而且机器可读的时间戳是属性datetime的值第二个可选的是pubtime用于表示出版日期值

删除的`HTML`标签

纯表现的元素：
- basefont
- big
- center
- font
- s
- strike
- tt
- u
对可用性产生负面影响的元素：
- frame
- frameset
- noframes
- 产生混淆的元素：
- acronym
- applet
- isindex
- dir
重新定义的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,一种验证失败返回false
- oText.addEventListener("invalid",fn1,false)
- ev.preventDefault(): 阻止默认事件
- valueMissing: 当输入值为空的时候，返回true
- typeMismatch: 控件值与预期不吻合，返回true
- patternMismatch: 输入值不满足pattern正则，返回true
- cusomError
  - setCustomValidity()

第三课 css3选择器

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 属性选择器

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片段标识符指向的元素
  - :empty选择内容为空的元素
- :selection鼠标光标选择元素内容

第四课 CSS3新增文本属性

CSS文本属性复习
- white-space：对象内空格的处理方式
  - nowrap 控制文本不换行
  - pre 空白会被浏览器保留
  - pre-line 合并空白保留换行符
  - pre-wrap 保留空白正常换行
- direction：文本流的方向
  - ltr 文本从左向右
  - rtl 文本从右往左
- 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盒模型

CSS盒模型复习

标准盒子模型

IE盒子模型

CSS3弹性盒模型
- display:box或者display:inline-box; 设置给父元素
- box-orient定义盒模型的布局方向设置给父元素
  - horizontal 水平显示
  - vertical 垂直方向
- box-direction 元素排列顺序设置给父元素
  - normal 正序
  - reverse 反序
- box-ordinal-group 设置元素的具体位置设置子元素
flex布局语法篇

flex布局语法篇小结

拓展阅读
- flex布局语法篇
- 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：从border区域开始显示背景。
- 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新增颜色属性
- rgba()

名称	颜色	颜色	取值
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
- 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方框添加阴影
- 语法：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语法

属性	版本	简介
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
- 设置或检索对象的边框背景图的分割方式

border-image-repeat
- 用于指定边框背景图的重复方式
- 取值：
- stretch：指定用拉伸方式来填充边框背景图。 *默认的
- repeat：指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
- round：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。写本文档时仅Firefox能看到该效果

第九课 CSS3运动体系

过渡

过渡：给改变添加过程
- 什么是过渡
- 过渡效果由哪几部分组成
- 过渡可以干些什么
transition 过渡属性
transition: property duration timing-function delay;
- transition-property:过渡属性的名称
  - none 没有过渡属性
  - all 所有属性都过渡(默认值)
  - property 具体属性名称(property1,property2…)
- transition-duration:过渡属性花费的时间
  - time 秒或毫秒
- transition-timing-function:过渡效果速度曲线
  - time 秒或毫秒
- 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动画简介
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减小
扩展阅读
- 学会使用css3的box-sizing布局

第十课 transform 2D转换

Css3平面转换方法
- translate() 移动
- rotate() 旋转
- scale() 缩放
- skew() 翻转
- matrix() 矩阵
transform:
- rotate() 旋转函数 (deg)
  - deg 度数
- skew(X,Y) 倾斜函数 (deg)
  - skewX()
  - skewY()
- scale(X,Y) 缩放函数 (正数、负数和小数)
  - scaleX()
  - scaleY()
- translate(X,Y) 位移函数(px)
  - translateX()
  - translateY()
rotate() 旋转方法
- 用于旋转元素角度
- 例：rotate(30deg)
- 把元素顺时针旋转 30 度
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开源)
- 常见的音频格式
- 视频编码：ACC、MP3、Vorbis

- `HTML5`支持的格式

HTML5能在完全脱离插件的情况下播放音视频,但是不是所有格式都支持。
支持的视频格式：
- Ogg=带有Theora视频编码+Vorbis音频编码的Ogg文件
- MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件
- WebM=带有VP8视频编码+Vorbis音频编码的WebM格式

`Video`的使用

单独用法
- <video src="文件地址" controls="controls"></video>
带提示用法

< video src="文件地址" controls="controls">您的浏览器暂不支持video标签。播放视频
</ video >

兼容用法

< video  controls="controls"  width="300"><source src="move.ogg" type="video/ogg" ><source src="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 的浏览器可以看到的内容
<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：绘制字体
扩展阅读
- canvas学习之API整理笔记（一）
- HTML5 API大盘点

第十四课 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
- 半径 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命令：一次贝塞尔曲线
- (x,y)结束点
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

<script src="http://api.map.baidu.com/api?v=2.0&ak=qZfInp9MaT9Qa0PoNy4Rmx3Y9W9ZXMfw"></script>

本地存储

Storage
- sessionStorage
  - session临时回话，从页面打开到页面关闭的时间段
  - 窗口的临时存储，页面关闭，本地存储消失
- localStorage
  - 永久存储（可以手动删除数据）
Storage的特点
- 存储量限制 ( 5M )
- 客户端完成，不会请求服务器处理
- sessionStorage数据是不共享、 localStorage共享
Storage API
- setItem():
  - 设置数据，(key,value)类型，类型都是字符串
  - 可以用获取属性的形式操作
- getItem():
  - 获取数据，通过key来获取到相应的value
- removeItem():
  - 删除数据，通过key来删除相应的value
- clear():
  - 删除全部存储的值
存储事件:
- 当数据有修改或删除的情况下，就会触发storage事件
- 在对数据进行改变的窗口对象上是不会触发的`
- Key : 修改或删除的key值，如果调用clear(),key为null
- newValue : 新设置的值，如果调用removeStorage(),key为null
- oldValue : 调用改变前的value值
- storageArea : 当前的storage对象
- url : 触发该脚本变化的文档的url
- 注：session同窗口才可以,例子：iframe操作

第十六课 HTML5新增JS方法

H5在JavaScript中新增的方法一览

新增选择器
- 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()：字符串中的属性要严格的加上引号
- 其他浏览器兼容
- 去下载json2.js
历史管理
- onhashchange ：改变hash值来管理
- history ：
- 服务器下运行
  - pushState : 三个参数：数据标题(都没实现) 地址(可选)
  - onpopstate事件 : 读取数据 event.state

第十七课 HTML5拖拽事件

图片自带拖拽功能
其他元素可设置draggable属性
draggable ：true
- 拖拽元素(被拖拽元素对象)事件 :
  - ondragstart : 拖拽前触发
  - ondrag :拖拽前、拖拽结束之间，连续触发
  - ondragend :拖拽结束触发
- 目标元素(拖拽元素被拖到的对象)事件 :
  - ondragenter :进入目标元素触发
  - ondragover:进入目标、离开目标之间，连续触发
  - ondragleave :离开目标元素触发
  - ondrop :在目标元素上释放鼠标触发
    - 需要在ondragover事件里面阻止默认事件
拖拽兼容问题
- 火狐浏览器下需设置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(读取文件信息)
  - readAsDataURL
- 参数为要读取的文件对象
  - onload当读取文件成功完成的时候触发此事件
  - this. result 获取读取的文件数据

第十八课跨文档操作

跨文档请求
同域跨文档
- iframe内页：
  - 父页面操作子页面：contentWindow
  - 子页面操作父页面：window.top(找到最顶级的父页面)/parent(第一父页面)
  - 新窗口页：
    - 父页面操作子页面：window.open
    - 子页面操作父页面：window.opener
不同域跨文档
- postMessage（“发送的数据”,”接收的域”）
  - message事件监听
  - ev.origin发送数据来源的域
  - ev.data 发送的数据
- 通过判断发送的数据来执行相应的需求
ajax跨域
- XMLHttpRequest 新增功能
  - 跨域请求：修改服务端头信息
  - IE兼容：XDomaiRequest
- 进度事件：
  - upload.onprogress(ev) 上传进度(实现文件上传进度条)
    - ev.total 发送文件的总量
    - ev.loaded 已发送的量
  - FormData 构建提交二进制数据
拓展阅读
- HTML5 API 大盘点

附录一　HTML5速查表

可以查阅支持H5+CSS3的属性
HTML5 标签含义之元素周期表
HTML5标签速查表
展示 flexbox 属性的作用–推荐
Flexbox 视觉指南–更好更容易地理解 Flexbox 某个属性的作用

本文md文件-仅供参考

HTML5+CSS3整体回顾相关推荐

好看的html导航栏作品,精选10款超酷的HTML5/CSS3菜单
本文作者html5tricks,转载请注明出处今天向大家精选了10款超酷的 1.CSS3手风琴菜单下拉展开带弹性动画利用CSS3技术可以实现各种各样的网页菜单,我们之前也在CSS3菜单栏目中分享 ...
精选10款超酷的HTML5/CSS3菜单
今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单下拉展开带弹性动画利用CSS3技术可以实现各种各样的网页菜单,我们之前也 ...
html5超酷单页面,精选10款超酷的HTML5/CSS3菜单
原标题:精选10款超酷的HTML5/CSS3菜单今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单下拉展开带弹性动画利用 ...
7款外观迷人的HTML5/CSS3 3D特效按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮按钮实现非常简单之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
9款超绚丽的HTML5/CSS3应用和动画特效
HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验.今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单.按钮.图片 ...
前端 html5 css3 框架,UI,分享,CSS3,HTML5,前端框架
随着HTML5和CSS3以及网页设计布局的全面翻新创新改革.让很多网页设计者和界面设计师都知道一个道理.就是去掌握一套对应的工具包.这不仅仅是未来提高工作的效率,还能更好的去处理网页整体视觉效果.界面 ...
《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.4 　真正的HTML5
本节书摘来异步社区<移动网页设计与开发 HTML5+CSS3+JavaScript>一书中的第1章,第1.4节,作者:[英]Peter Gasston,更多章节内容可以访问云栖社区&quo ...
7款效果惊人的HTML5/CSS3应用
今天是周末,我为大家收集7个比较经典的HTML5/CSS3应用,每一个都提供源代码,效果非常惊人. 1.CSS3/jQuery创意盒子动画菜单作为前端开发者,各种各样的jQuery菜单见过不少,这款 ...
第一章前端开发——HTML5/CSS3
第一章前端开发学习--HTML5/CSS3 一.初识HTML 二.HTML5/CSS3基础三.页面组件四.页面布局五.CSS3新增功能一.初识HTML 什么是HTML(what): HTML ...

HTML5+CSS3整体回顾

第一课 HTML5结构

常用的一些新的结构标签

删除的`HTML`标签

第二课 HTML5智能表单

HTML4.01 form表单复习

HTML5智能表单

Input 类型 - Date Pickers（日期选择器）

HTML5新增表单属性

表单验证

第三课 css3选择器

第四课 CSS3新增文本属性

第五课 CSS3盒模型

第六课 css3新增背景属性

第七课 css3新增颜色属性

第八课 CSS3边框系列

圆角-阴影

边框系列-图片

第九课 CSS3运动体系

过渡

动画

第十课 transform 2D转换

第十一课 transform 3D转换

第十二课视频音频

- `HTML5`支持的格式

`Video`的使用

第十三课 canvas

第十四课 SVG绘图

第十五课地理信息与本地存储

地理位置

本地存储

第十六课 HTML5新增JS方法

第十七课 HTML5拖拽事件

第十八课跨文档操作

附录一　HTML5速查表

HTML5+CSS3整体回顾相关推荐

最新文章

热门文章

HTML5+CSS3整体回顾

第一课 HTML5结构

常用的一些新的结构标签

删除的HTML标签

第二课 HTML5智能表单

HTML4.01 form表单复习

HTML5智能表单

Input 类型 - Date Pickers（日期选择器）

HTML5新增表单属性

表单验证

第三课 css3选择器

第四课 CSS3新增文本属性

第五课 CSS3盒模型

第六课 css3新增背景属性

第七课 css3新增颜色属性

第八课 CSS3边框系列

圆角-阴影

边框系列-图片

第九课 CSS3运动体系

过渡

动画

第十课 transform 2D转换

第十一课 transform 3D转换

第十二课 视频音频

- HTML5支持的格式

Video的使用

第十三课 canvas

第十四课 SVG绘图

第十五课 地理信息与本地存储

地理位置

本地存储

第十六课 HTML5新增JS方法

第十七课 HTML5拖拽事件

第十八课 跨文档操作

附录一 HTML5速查表

HTML5+CSS3整体回顾相关推荐

最新文章

热门文章

删除的`HTML`标签

第十二课视频音频

- `HTML5`支持的格式

`Video`的使用

第十五课地理信息与本地存储

第十八课跨文档操作

附录一　HTML5速查表