一、html5:
html5是html4的升级版本，设计的目的是为了在移动设备上支持多媒体。
html5引入了新的标签<audio><vedio><canvas><nav><aside><time><article><section>等等
新设置可拖放功能:draggable="true"
简化的语法:例如doctype的声明只需写<! doctype html>就行
<canvas>标签代替flash。Flash播放需要一大堆插件和代码，canvas只要一个标签就能和用户产生UI交互
新增header footer标签可以直接创建页眉页脚，以前需要用div来创建。
删除了许多冗余、淘汰的标签<frame><center><big>不记得上次是什么时候使用这些标签了。
离线编辑：用的就是manifest文件，包括三个部分。
①cache manifest：在此标题下列出的文件将在首次下载后缓存。
②network：在此标题下列出的文件需要连接服务器，且不会被缓存。
③fallback:在此标题下列出的文件规定当页面无法访问时的回退页面。
二、CSS3
最主要变化就是将CSS3分成一系列模块。主要包括盒子模型、列表模快、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模快。
弹性盒子：flex box由弹性容器（Flex container）和弹性子元素(Flex item)组成。
弹性容器通过设置display属性：flex 或者inline-flex将其定义为弹性容器。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
盒子变形：新增transform特性，共包含四个函数：位移translate,缩放scale,旋转rotate，倾斜skew.
边框特性：圆角边框:border-radius,图片边框:border-image。
CSS3允许使用多背景图:background-image:url(image),url(image);
颜色与透明度:增加了RGBA、HSL新的颜色格式，不再局限于RGB和十六进制，还可以根据需要设置透明度opacity(0-1);
CSS3多列布局：colum-count：用来设置列数，column-gap:规定列之间的间隔,column-rule:规定列之间的宽度，颜色，样式。
过渡与动画：transition(过渡)实现简单的动画效果。
动画效果:animation实现复杂的样式变换。infinite
http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms-animation-introduction/这篇文章专门介绍transform，animation,transition这几个动画相关的区别。
transition平滑的改变css的样式。无论是点击事件，焦点事件，还是鼠标hover，只要值改变了，就是平滑的，就是动画。
transiton属性是下面几个属性的缩写：
1.transition-property
指定过渡的属性值，比如transition-property:opacity就是只指定opacity属性参与这个过渡。
transition-duration
指定这个过渡的持续时间
transition-delay
延迟过渡时间
transition-timing-function
2.transform指变换，使用过photoshop的人应该知道里面的Ctrl+T自由变换。transform就是指的这个东西，拉伸，压缩，旋转，偏移。
3.transform和transition可以结合使用。animation则比较全面，自成一家。animation最先安家于Safari浏览器，与transition和transform有老死不相往来之感，但是要说单挑的话，animation要比transition厉害些。
三、补充：html页面加载和渲染机制
1.用户输入网址，浏览器向服务器发送请求，服务器返回html文件。
2.浏览器解析html代码，顺序从上到下，渲染顺序也是从上到下。
3.遇到嵌入的css,js文件时，浏览器会启用单独的链接下载他们。(这时渲染机制会暂时停止)
4.下载完成后，将所有的样式表一起进行解析，解析完成后对所有元素重新渲染。
~~~~
网页的生成过程，大致可以分成五步。
1.HTML代码转化成DOM
2.CSS代码转化成CSSOM（CSS Object Model）
3.结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
4.生成布局（layout），即将所有渲染树的所有节点进行平面合成
5.将布局绘制（paint）在屏幕上
~~~~以下三种情况，会导致网页重新渲染。
1.修改DOM
2.修改样式表
3.用户事件（比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等）
重新渲染，就需要重新生成布局和重新绘制。前者叫做"重排"（reflow），后者叫做"重绘"（repaint）。
重排和重绘会不断触发，这是不可避免的。但是，它们非常耗费资源，是导致网页性能低下的根本原因。
~~~~~提高性能的九个技巧
第一条，DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。
第二条，如果某个样式是通过重排得到的，那么最好缓存结果。避免下一次用到的时候，浏览器又要重排。
第三条，不要一条条地改变样式，而要通过改变class，或者csstext属性，一次性地改变样式。
第四条，尽量使用离线DOM，而不是真实的网面DOM，来改变元素样式。比如，操作Document Fragment对象，完成后再把这个对象加入DOM。再比如，使用 cloneNode() 方法，在克隆的节点上进行操作，然后再用克隆的节点替换原始节点。
第五条，先将元素设为display: none（需要1次重排和重绘），然后对这个节点进行100次操作，最后再恢复显示（需要1次重排和重绘）。这样一来，你就用两次重新渲染，取代了可能高达100次的重新渲染。
第六条，position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响。
第七条，只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。
第八条，使用虚拟DOM的脚本库，比如React等。
第九条，使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染。
关于渲染机制详细请戳：网页性能管理详解 - 阮一峰的网络日志
四、AJAX
简介：ajax是异步的js和xml的集合，是一种无需重载整个页面，能够实现局部刷新的技术。通过在后台与服务器进行少量的数据交换，实现局部刷新。
主要用到的是XmlHttpRequest对象。用法var xmlhttp=new XmlHttpRequest();
1.如需将请求发送到服务器，使用XmlHttpRequest对象的open和send方法。
xmlhttp.open('GET','test1.txt',true);
xmlhttp.send();将请求发送到服务器。
2.如需将数据发送到后台，需使用SetRequestHeader()来添加HTTP头，然后在send方法中规定数据。
xmlhttp.open('GET','test1.txt',true);
xmlhttp.setRequestHeader（)；
xmlhttp.send();将请求发送到服务器。
3.如需获得服务器的响应，请使用XmlHttpRequest的responseText或responseXml属性。
responseText获得字符串形式的响应数据。
responseXml获得XML形式的响应数据。
4.当请求发送到服务器之后，会执行一系列响应:此时就要用到onreadyStateChange()事件。
当readyState为4且statue=200时表示响应就绪，此时执行成功回调，否则返回error。
五、⑴W3C标准：不是某一个标准，而是一系列标准的集合。
1、图片的alt="" 属性必须每张图片都加上，而且对齐属性用CSS来定义。不加不能通过XHTML 1.0的验证。
2、每个文档必须加上DTD声明。
3.同一个页面当中，同名的ID会产生冲突。所以以ID定义样式的必须改成类引用。
4、标签之间不可错位嵌套。
5.所有的样式全部写在外部文件。用类名定义。在使用的地方引用。
⑵web语义化:
3
简单来说就是让机器能够读懂人类写的语言，加快机器的处理速度。很多时候你写出来的代码，很多人一眼就看出来该是什么效果，但是计算机处理出来的页面却是另外一个效果，这就是没有处理好web语义化。
包含两个方面：html语义化及css命名语义化。
html语义化：不要所有标签都用div，虽然也可以写出来视觉效果很好的页面，只要你灵活运用CSS。但是那样的话只是视觉上达到了要求，整个页面一点语义都没有，搜索引擎还是看不懂。所以，要记住：
结构(html)才是重点，样式(css)是用来修饰结构的。要先确定html，确定标签，再来选用合适的css。
CSS类名的语义化：
1.为CSS类名定义的时候，尽量使用小写字母，如果有两个以上的单词，在每个单词之间使用”-“符或单词首字母大写(第一个单词除外)。如:”main-content”或”mainContent”。
2.优化CSS代码，仅创建关键主要的CSS类并重新为子元素使用符合HTML标准的标签(h1, h2, p, ul, li, blockquote,…)
ES规范自2015年起每年都会发布一个版本。现在是ES8，新加的一个字符串填充功能:
str.padStart(targetLength [, padString])填充到字符串的开头
str.padEnd(targetLength [, padString])填充到字符串的结尾
这些函数的第一个参数是targetLength，即所得到的字符串的总长度。 第二个参数是可选的padString，它是用于填充源字符串的字符串。 不写默认值为空格。
JS
JS继承的实现方式：详情请看
// 定义一个动物类
function Animal (name) {
// 属性
this.name = name || 'Animal';
// 实例方法
this.sleep = function(){
console.log(this.name + '正在睡觉！');
}
}
// 原型方法
Animal.prototype.eat = function(food) {
console.log(this.name + '正在吃：' + food);
};
1.原型继承：将父类的实例作为子类的原型。
function Cat(){};
var Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
//Test测试
var cat = new cat();
console.log(cat.name);
2.构造继承:使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
3、实例继承
核心：为父类实例添加新特性，作为子类实例返回
function Cat(name){
var instance = new Animal();
instance.name = name || 'Tom';
return instance;
}
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false
map()方法将调用的数组的每个元素传递给指定的函数，并返回一个数组，它包含该函数的返回值。
网友评论