前端seo，：合理的title,description,keywords,:搜索的权重依次减少，title值强调重点即可， 一：新增一些语义化标签 语义化：1:html语义化让页面的内容结构化，结构更清晰，便于对浏览器搜索引擎解析 2：在没有样式css时，也可以以一种文档格式显示，并且是容易阅读的， 3：搜索引擎爬虫也依赖于html标记来确定山下文和各个关键字的权重，有利于seo 4:使阅读源代码更容易将网站分块，便于阅读，维护，理解。 h5是不是基于sgml,因此不需要对dtd进行引用，需要doctype规定浏览器的行为，让浏览器安照应该的方式运行，h4基于sgml，所以需要对dtd进行引用，才能告知浏览器文档所使用的文档类型 header:头部区域，nav:导航区域， section:区块(语义化比div高)，article:文章区域，aside:侧边栏区域，footer:底部， time:标签提供了datetime属性，用于指明具体的时间， progress：进度条标签： mark：荧光笔的效果， 新的语义化的标签从ie9开始兼容的,ie8及以下兼容, 让部分标签兼容ie8及以下，可通过 [if lte ie8] document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer'); [endif] 或者使用js第三方库; 计量标签： 二：多媒体 视频 音频： 三：新增表单元素的类型(ie浏览器不支持)： type="email"电子邮箱， type="color" 拾色器， type="url" 网址 type="number"数字, type="range"，在某个范围内进行选择， type="search",搜索框type="tel"电话号码，type="date"日期组件，日期插件WdatePicker.js可以兼容所有的浏览器，type="time"时间组件，type="日期时间组件"，type="datetime-local"本地的日期和时间，type="week"：选择周，type="选择月" 四：新增api 1：拖拽：ie9及以上才支持， 给元素加上draggable="true"，就可以拖拽，图片和链接默认可以拖拽， 2：地理定位信息：if(window.navigator.geolocation){ //能力检测 enableHighAccuracy: false, //是否高精度访问地理信息 timeout: 30000, //过期时长，单位为毫秒 maximumAge: 60000 //重复获取地理信息时的时间间隔，对watchPosition() }; window.navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options); function successCallback(position){ var latitude=position.coords.latitude; //维度 var longitude=position.coords.longitude; //经度 }; //在百度地图上呈现， var map=new BMap.Map('container'); //生成地图并在id为container呈现 var point=new BMap.Point(latitude,longitude); //所在的经纬度给地图 var marker=new BMap.Marker(point); // map.addOverlay(marker); function errorCallback(e){ console.log(e); }; 3：判断网络状态： if(window.navigator.onLine){ //网络在线}; window.onoffline=function(){ //网络掉线}; window提供的事件 window.ononline=function(){ //网络上线 }window提供的事件 4：web存储： localstroage：本地存储：永久有效，窗口之间共享数据。 localStorage.键名=键值或locaoStorage.setItem('键名'，'键值') 取值：localStorage.键名 删除指定键值的存储localStorage.removeItem('key2') sessionStorage:回话存储，关闭窗口失效，同一窗口共享数据。 cookie:优点：兼容性好，缺点：能存cookie数少。 5：应用程序缓存： 6：dom，获取与元素自定义属性：
var info=document.getElementById('phone'); console.log(info.dataset,'ffffffff'); 7：doctype:不存在会导致文档以混杂模式呈现， 8：前端安全 1：基于反射的xss攻击，主要依靠站点服务端返回脚本，在客户端触发从而发起web 攻击， 开发安全措施：https会在请求数据之前进行一次握手使得客户端与服务端都有一个私钥， 服务端用这个撕咬加密，客户端用这个私钥解密。即使数据被截取了也是加密的数据。 2：同源策略 源：就是协议，主机，端口号， // 合并内容到第一个参数中，后续大部分功能都通过该函数扩展
// 通过jQuery.fn.extend扩展的函数，大部分都会调用通过jQuery.extend扩展的同名函数
jQuery.extend = jQuery.fn.extend = function() {};
// 在jQuery上扩展静态方法
jQuery.extend({
// ready bindReady
// isPlainObject isEmptyObject
// parseJSON parseXML
// globalEval
// each makeArray inArray merge grep map
// proxy
// access
// uaMatch
// sub
// browser
});
// 到这里，jQuery对象构造完成，后边的代码都是对jQuery或jQuery对象的扩展
return jQuery;
})();
window.jQuery = window.$ = jQuery;
})(window);
l jQuery对象不是通过 new jQuery 创建的，而是通过 new jQuery.fn.init 创建的
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}
n jQuery对象就是jQuery.fn.init对象
n 如果执行new jQeury(),生成的jQuery对象会被抛弃，最后返回 jQuery.fn.init对象；因此可以直接调用jQuery( selector, context )，没有必要使用new关键字
l 先执行 jQuery.fn = jQuery.prototype，再执行 jQuery.fn.init.prototype = jQuery.fn，合并后的代码如下：
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype
所有挂载到jQuery.fn的方法，相当于挂载到了jQuery.prototype，即挂载到了jQuery 函数上（一开始的 jQuery = function( selector, context ) ），但是最后都相当于挂载到了 jQuery.fn.init.prototype，即相当于挂载到了一开始的jQuery 函数返回的对象上，即挂载到了我们最终使用的jQuery对象上。
这个过程非常的绕，金玉其外“败絮”其中啊！
3.2 jQuery.fn.init
jQuery.fn.init的功能是对传进来的selector参数进行分析，进行各种不同的处理，然后生成jQuery对象。
类型（selector）
处理方式
DOM元素
包装成jQuery对象，直接返回
body（优化）
从document.body读取
单独的HTML标签
document.createElement
HTML字符串
document.createDocumentFragment
#id
document.getElementById
选择器表达式
.extend({}, object1, object2);
// 默认合并操作是不迭代的，即便target的某个属性是对象或属性，也会被完全覆盖而不是合并
// 第一个参数是true，则会迭代合并
// 从object原型继承的属性会被拷贝
// undefined值不会被拷贝
// 因为性能原因，JavaScript自带类型的属性不会合并
// jQuery.extend( target, [ object1 ], [ objectN ] )
// jQuery.extend( [ deep ], target, object1, [ objectN ] )
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;
// Handle a deep copy situation
// 如果第一个参数是boolean型，可能是深度拷贝
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
// 跳过boolean和target，从第3个开始
i = 2;
}
// Handle case when target is a string or something (possible in deep copy)
// target不是对象也不是函数，则强制设置为空对象
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
// extend jQuery itself if only one argument is passed
// 如果只传入一个参数，则认为是对jQuery扩展
if ( length === i ) {
target = this;
--i;
}
for ( ; i < length; i++ ) {
// Only deal with non-null/undefined values
// 只处理非空参数
if ( (options = arguments[ i ]) != null ) {
// Extend the base object
for ( name in options ) {
src = target[ name ];
copy = options[ name ];
// Prevent never-ending loop
// 避免循环引用
if ( target === copy ) {
continue;
}
// Recurse if we're merging plain objects or arrays
// 深度拷贝且值是纯对象或数组，则递归
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
// 如果copy是数组
if ( copyIsArray ) {
copyIsArray = false;
// clone为src的修正值
clone = src && jQuery.isArray(src) ? src : [];
// 如果copy的是对象
} else {
// clone为src的修正值
clone = src && jQuery.isPlainObject(src) ? src : {};
}
// Never move original objects, clone them
// 递归调用jQuery.extend
target[ name ] = jQuery.extend( deep, clone, copy );
// Don't bring in undefined values
// 不能拷贝空值
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
// Return the modified object
// 返回更改后的对象
return target;
};]()
10:
js动画控制能力很强，在动画播放过程中，对动画进行控制，开始，暂停，回放，终止，取消，都是可以做到的
动画效果比css动画丰富，有些效果如曲线运动，冲击闪烁，视差滚动效果，只有js动画可以完成，
css3动画有兼容问题
1：圆角属性，
2：阴影属性，
css3动画：ie10才支持
过渡动画：
transition:在默认元素上添加，
有值的可以发生动画，padding,margin,border,color,line-height,width,height
例子：图片居中，鼠标放上去后放大，
*{
margin:0;
padding:0;
}
div{
width:200px;
height:200px;
margin: 10px auto;
border:1px solid red;
text-align: center;
line-height: 200px;
}
img{
/display: block;/
vertical-align: middle;
transition:all 1s ease 0s;
}
div:hover img{
width:200px;
height:200px;
vertical-align: middle;
}
