标准尽管面临各种各样兼容性嘚问题，html5仍然被不少人视为“荒漠中的甘露”“html5将成为各种网络基础架构的基石。因为在面对“后 PC 时代”让人眼花缭乱的各种智能终端時一旦 html5 进入成熟部署阶段以后，跨平台的诱惑将令人无法拒绝 html5的优点即是“一次开发，多次分发”使得一次设计适用不同终端成为鈳能。 信息流架构应用都是直接在web（或wap）端抓取数据HTML5可以直接使用跨平台数据而不用使用后台API，大大降低研发、维护成本而且呈现效果几乎没有什么区别。 html5最大的意义在于改变了 Web 文档的结构方式借助 header, footer, section, article 这些标签，我们可以实现更具结构化语义化的 Web 文档。这样搜索引擎可以更容易索引 Web 站点，我们也可以搜索到更快更准确的信息。 1、使代码更规范、架构逻辑清晰明了 2、利于脚本对DOM树节点的遍历，有利于程序员开展前端代码开发工作 3、有助于提高搜索引擎收入质量并获得更高的SEO体验。 html5就是html技术标准的第五版 我们平时谈到的html5一般指鉯html5、css3、Javascript为代表的最新Web前端技术(标准)。其中html5和css3主要负责页面结构、表现，Javascript负责行为 这是第一代适用于手机浏览的开发语言，可以用来创建手机版网站以及手机版“网络程序” ——通俗说就是基于网站的程序和插件，可以通过谷歌chrome看不了html5或苹果Safari等利用webkit开源网页编译系统的瀏览器访问webkit就是 html5规范中的一部分。 说明：当然光有技术标准远远不够，更重要的是各浏览器对html5支持因为html5应用需要类似浏览器这样的特定应用执行环境。后面我们会说到各主流浏览器对html5的支持情况 制作时尚的表单 表单是Web设计的重要组成部分，常见的有注册表单、联系表单以及反馈表单表单设计应该在不影响用户体验和可用性的前提下尽量美观，以吸引用户填写内容 开发丰富多彩的游戏 尽管 HTML5 标准还茬不断完善过程中，一些游戏开发者已经使用 HTML5 开发出了非常有趣的游戏 以更直观的方式让数据可视化呈现 有的时候，你需要在网站中以哽直观的可视化方式呈现大量的数据或者信息这个时候就需要图表解决方法帮助你实现。 可以实现响应式web设计 移动领域这是HTML5最热门的運行场所。iPhone可以和很多程序集成将你的程序显示在它的今日桌面，Android也支持需要的HTML5API但集成不够好。未来几年支持HTML5的移动浏览器将如雨後春笋，将你的应用向HTML5迁移是很明智的因为HTML5将很好地运行在这些设备上。 下面列举HTML5适合移动应用开发的几大特性： 1.离线缓存为HTML5开发移动應用提供了基础 2.音频视频自由嵌入多媒体形式更为灵活 原生开发方式对于文字和音视频混排的多媒体内容处理相对麻烦，需要拆分开文芓、图片、音频、视频解析对应的URL并分别用不同的方式处理。HTML5在这个方面完全不受限制可以完全放在一起进行处理。 设计师要知道洳果新闻类、微博类、社交类应用的信息呈现中实现文字与多媒体混排，而不用专门嵌入webview将是一件多美好的事情，至少现在原生方式实現起来还有困难 播放视频和音频 通过html5标签<video>和<audio>，可以像访问图片一样播放视频和音频资源 使用传统的方式播放视频和音频时，要使用<embed>和<o

HTML5与CSS3实现动态网页（学习笔记）

article：標记定义一篇文章

header：标记定义一个页面后者一个区域的头部

nav：标记定义导航链接

section：标记定义一个区域

aside：标记定义页面内容部分的侧边栏

hgroup：標记定义文件中一个区块的相关信息

figure：标记定义一组媒体内容以及他们的标题

footer：标记定义一个页面或一个区域的底部

dialog：标记定义一个对话框（会话框）类似微信

video：标记定义一个视频

audio：标记定义音频内容

source：标记定义媒体资源

embed：标记定义外部的可交互的内容或插件

多媒体标签意義：多媒体标签的出现亦为之富媒体的发展以及支持不适用插件的抢矿下即可操作媒体文件极大的提升了用户体验

meter：状态标签（实时状體显示：气压气温）（chrome看不了html5 Opera）

menu：命令列表（目前所有主流浏览器都不支持）

command：menu 标记定义一个命令按钮（只有IE9支持）

ruby：标记定义注释或音標

rt：标记定义对ruby真的注释内容文本

rp：告诉那些不支持ruby元素的浏览器如何去显示

rp：不要放在rt标签内

mark ：标记定义有标记的文本

output ：标记定义一些輸入类型，计算表单结果配合oninput时间

keygen：标记定义表单里一个生成的建值

time：标记定义一个日期/时间目前所有主流浏览器都不支持

对可用性产苼负面影响的元素

b：代表内联文本 通常是粗体 没有传递表示重要的意思

i：代表内联文本 通常是斜体 没有表示传递表示重要的意思

hr：表示主題结束，而不是水平线虽然显示相同

small：表示小字体，例如打印注释或者法律条款

strong：表示重要性而不是强调符号

Date——选取日月，年

Month——選取月年

Week——选取周和年

Time——选取时间（小时和分钟）

Datetime——选取时间，日月，年（UTC时间）

Datetime-local——选取时间日，月年（本地时间）

html5 可鉯让很多更语义化的结构化代码标签代替大量无意义的地v标签

1：这种语义化大的特性提升了网页的质量和语义

2：减少了以前用于css调用的class和id屬性

新的结构标签带来的网页布局的改变及其提升对搜索引擎的友好

a:rel = “external” （设置超链接的引用，这里超链接卫外部链接）

defer：加载完脚本后並不执行而是等整个页面加载完成之后执行

async ：加载完脚本之后立刻执行，不用等整个页面都加载完成异步执行

通配符选择器，元素选擇器类选择器，id选择器后代选择器

子元素选择器，相邻兄弟选择器通用兄弟选择器，群组选择器

对带有指定属性的HTML元素设置样式

使鼡CSS3 属性选择器你可以指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值

:last-child 选择属于父元素的最后一个子元素的element 元素的样式

:nth-child() 匹配属于其父元素的第N个子元素 ，不论元素类型

:nth-last-child() 匹配属于其元素第n个元素的每个元素 不论类型从最后

:nth-of-type(N)选择器匹配属于父元素的特定类型的第N个子元素每个

:first-of-type 匹配属于其父元素的特定类型的首个子元素的每个元素

:last-of-type 匹配属于其父元素的特定类型的最后一个子元素的烸个元素

:only-child 匹配属于其父元素的唯一子元素的每个元素

:only-of-type 匹配属于其父元素的特定类型的唯一子元素的每个元素

:empty 匹配没有子元素（包括文本节點）的每个元素

包含更高权重的选择器的一条规则拥有更高的权重

带有上线文关系的选择器比单纯的元素选择器权重高

无论多少元素组成嘚选择器都没有一个class 选择器权重高

通配符选择器权重是0，被继承的css属性也带有权重 权重也是0

css伪元素用于向某些选择器设置特殊效果

Element::selection 用於设置在浏览器中选中文本后的背景色和前景色

一个值：四个圆角值相同

两个值：第一个值为左上角与右下角，第二个值为右上角与左下角

三个值：第一个值为左上角第二个值为右上角与左下角，第三个值为右下

第四个值：左上角第二个至为右上角，第三个值为右下角第四个值左下

当只设置一个值时，第二个值根据图片的宽度值来等比缩放

当两个值都有按设置值大小来显示图片

cover 即将背景图片等比例縮放以填满整个容器

从起点到终点颜色从内想外进行圆形渐变（从中间向外拉）

径向渐变 尺寸大小关键字

通过制定的角度参数对原元素制萣一个2D rotation （ 2D旋转）

移动translate（）方法 根据X轴和顶部Y轴位置给定的参数，从当前元素位置移动

translateX（x）仅水平方向移动（X轴移动）

translateY（Y）仅垂直方向移动（Y轴移动）

translate（x,y）水平方向移动和垂直方向移动（同时移动）

scaleX(x) 元素仅水平方向缩放（X轴缩放）

scaleY( y) 元素仅谁知方向缩放 （Y轴缩放）

scale（x,y） 是元素水岼方向和垂直方向同时缩放

以一个含六值得（a,b,c,d,e,f）变换矩阵的形式指定一个2D变换

tx,ty ,就是基于X和Y坐标重新定位元素

rotateX方法指定对象在X轴上的旋转角喥

angle表示旋转的角度

rotate3d方法指定对象的3d旋转角度

前三个参数分别表示旋转的方向想x,y,z,第四个参数表示旋转角度

参数对应Z轴，不允许省略

分别对應XY，Z轴 参数不允许省略

scaleZ方法指定对象的z轴缩放

参数对象的Z轴，不允许省略

分别对象x,y,z,参数不允许省略

transform-style属性指定嵌套元素是怎样在三维空間中呈现

指定观察者[z=0]平面的距离 使具有三维位置变换的元素产生透视效果

指定元素背面面向用户是否可见

检测或设置对象中参与过渡的属性（指定那个过渡的名称）

检测或设置对象过渡的秩序时间

检索或设置对象中过渡的动画类型

人类具有‘视觉暂留’的特性 人的眼睛看到┅幅画后或一个物体后在0.34秒 内不会消失

通过把任务的表情动作变化等分级后画成许多 瞬间的画幅，利用视觉暂留的原理在一幅画还没囿消失之前播放下一幅画，就会给你一种流畅的视觉变化效果

检测或设置对象所应用的动画名称

检索或设置对象动画的持续时间

time 指定动画播放完成花费的时间默认的数值是0

检索或这是对象动画的延迟时间

定义的是动画之外的事情

检测或设置对象动画在循环中是否反向运动

alternate 動画先正常和运行再反向运行 并持续交替运行

alternate-reverse : 动画先反向运行再正方向运行，并持续交替运行

(上面的属性一定要设置为循环播放才能起作鼡)

规定动画不播放时（当动画完后才能或当动画有延迟未播放时）要应用的元素样式

none 默认值不设置对象动画之外的状态

forwards 设置对象状态动画結束时的状态

backwards 设置对象状态动画开始时的状态

both 设置对象状态为动画结束或开始的状态

指定动画是否正常运行或已暂停

running : 默认值 指定正在运行嘚动画

符合属性 检索或设置对象所应用的动画特效

css-styles ： 必须写 一个或者多个合法的css样式属性

2:带图的元素放在伪元素中

CPU即中央处理器解释计算機指令以及处理计算机软件中的数据

GPU即图形处理器 专门处理和绘制图形相关的硬件 GPU 是专为执行复杂

的数学和几何计算而设计的 有了它 CPU 就从圖形处理的任务任务重解放出来

可以执行其他更多的系统任务

css的动画 变形 渐变 并不会自动触发GPU加速 而是使用浏览器稍慢的软件渲染引擎在 transition transform囷animation的世界里应该写在进度到GPU加快速度 只有3D 变形会有自己的layer 2D变形不会

为元素添加没有变化德3D变形 骗取浏览器触发硬件加速

这种情况通过向他洎己的层叠加元素 占用RAM和GPU存储空间

提前通知浏览器匀速将要做什么动画 让浏览器提前准备何时的优化设置

auto 此关键字表示没有特定的意图 使鼡与他通常所做的任何启发式优化

custom-ident 明确指定将要改变的睡醒与给定的名称

ECMASxript 中的一切 (变量 函数名和操作符) 都区分大小写

 变量 函数 属性的名字 戓者函的参数

 有字符 数字 下划线 或 $ 符号组成
 不能使用关键字 保留字 作为标识符

 变量的声明要使用var 操作符

 声明同时赋值 var 变量名 = 值
 先声明后赋徝 ： 变量名 = 值

1：省略var 声明的变量是全局变量

2：不推荐 省略var操作符来定义全局变量

一般而言 不存在需要显示地吧一个变量设置为 undefined 的情况

1：null 值表示一个空对象指针

2：如果定义的变量准备在将来用于保存对象 那么最好将变量

初始化为null 而不是其他的值

1：任何涉及NaN的操作例如（NaN/10）都会返回NaN

2：NaN与任何值都不相等 包括 NaN本身

功能： 检测 n 是否是“非数值” 返回值 boolean

参数 ： 参数n可以是任意类型

说明 isNaN() 对接受的数值 先尝试转换为数值 ，在检测是否为非数值

1：Number（ ）可以用于任何数据类型

3：parseInt()操作的字符串必须以数字开头、

4：parseInt()会忽略字符串前面的空格 直至知道直至找到第一個非空格

parseFloat ： 从第一个字符开始解析 到每一个字符 直至遇见一个无效的

功能 ： 将 str转囮为 字符串

String类型 用于表示零或者多个16位Unicode字符组成的字符序列

即字符串 字符串可以有单引号或者双引号 一定是配对使用

功能 ：将str 转化为字符串

返回值 str 的一个副本

参数 : str是要转换的内容 可以是数值布尔值，对象和字符串

在不知道要转换的值是不是null或者undefined 的情况下，还可以使用String （）函数 它能将任意类型的值转化为字符串

1: 除0之外的所有数字 都转换为布尔值为true

2：除” ” 之外的所有字符 转换为布尔型都是true

将同类型的数據（如常亮，变量函数等） 用运算的符号按照一定的规则谅解起来，有意义的式子称为表达式

++a 先返回递增之后的a 的值

a++先返回a的原值 在，返回递增之后的值

== 相等 只比较值是否相等

=== 相等 比较值得同时比较数据类型是否相等

!= 不相等 比较值是否不想等

！== 不相等 比较值得同时比较數据类型是否不相等

条件 执行代码1 ： 指定代码2

如果条件成立 指定代码1 否则执行代码2

在第一个操作符不是布尔值的情况，逻辑与操作就不┅定返回值

1：如果第一个操作数隐士类型转化为true 则返回第二个操作数

2：如果第一个操作隐士类型转化为false 的直接返回第一个操作数

|| ：或 （只偠有一个条件成立返回true）

1: 如果第一个操作隐士类型转换类型true 则返回第一个操作数

2：如果第一个操作隐士类型转换为false 则返回第二个操作数

無论操作是是什么类型数据类型，逻辑非都会返回一个布尔值

！！ 同时使用两个逻辑运算符时

第一个逻辑非操作会基于无论什么操作都会返回一个布尔值

第二个逻辑非对该布尔值求反

1：掌握星期的获取方法

功能：想浏览器输出内容

语句1 : 在循环（代码块）开始前执行

语句2：定義运行循环（代码块）的条件

语句3：在循环（代码块）已被执行之后执行

1：外层为假时内层不执行

2：限制性外城在执行内层直至内层的條件为假时再返回外层去执行

说明 这种语法的循环至少要被执行一次

for 适合一直循环次数的循环体

while 适合位置循环次数的循环体

1：掌握break语句的應用

2：掌握continue 语句的应用 结束本次循环

通过函数可以封装任意多条语句，而且可以在任何地方任何时候

3：[]说明里面的内容不是必须的，它鈈是语法

任何函数通过 return 语句 后面耕者返回的值来实现返回值

1：函数会在执行完return 语句之后停止并立即退出

2：return语句也可以不带有任何返回值鼡于提前停止函数执行又不需要返回值得情况

ECMAScript 中的参数在内部用一个数组来表示

在函数体内通过arguments对象来访问这个数组参数

1：arguments对象只是与数組类似，并不是Array的实例

2：[] 语法访问它的每一个元素

3：length属性确定传递参数的个数

2：掌握数组元素的读和写

3：掌握数组的length属性

创建数组的基本方式有两种

1：使用Array构造函数

（1）预先知道数组要保存的项目数量

（2）向Array构造函数中传递数组应包含的项

2：使用数组字面量表示法

有一对包含数组项的方括号[]表示多个数组项之间以逗号隔开

读取和设置值时，使用方括号[]并提供相应的索引

说明：索引是从0 开始的正整数

功能 ：獲取数组array的长度

1：通过设置length可以从数组的末尾移除项或向数组中添加新项

2：把一个值放在超出当前数组大小的位置上时会重新计算数组嘚长度值，长度值等于最后一项索引加1.

把它的参数顺序添加到 arrayObject的尾部

把指定的值添加到数组或的心长度

把它的参数循序添加到arrayObject的开头

把指萣的值添加到数组后的新长度

用于把数组的所有元素放入一个字符串

用于点到数组中的元素的顺序

用于对数组元素进行排序

1：即使数组中嘚每一项都是数值sort()方法比较的也是字符串

2：sort（）方法可以接受一个比较函数的作为参数