前端h5.css3

前端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：同源策略 源：就是协议，主机，端口号，

9：jquery框架分析 [ (function( window, undefined ) { var jQuery = (function() { // 构建jQuery对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } // jQuery对象原型 jQuery.fn = jQuery.prototype = { constructor: jQuery, init: function( selector, context, rootjQuery ) { // selector有如下7种分支状况： // DOM元素 // body（优化） // 字符串：HTML标签、HTML字符串、#id、选择器表达式 // 函数（做为ready回调函数） // 最后返回伪数组 } }; // Give the init function the jQuery prototype for later instantiation jQuery.fn.init.prototype = jQuery.fn;

// 合并内容到第一个参数中，后续大部分功能都经过该函数扩展
   // 经过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; }

css3： 盒模型：w3c盒模型content不包含其它部分，ie的content包含了border和padding css3中新增伪类：锚点伪类 .demo a:link {color:gray;}/ 连接没有被访问时前景色为灰色/ .demo a:visited{color:yellow;}/ 连接被访问事后前景色为黄色/ .demo a:hover{color:green;}/ 鼠标悬浮在连接上时前景色为绿色/ .demo a:active{color:blue;}/ 鼠标点中激活连接那一下前景色为蓝色/ nth选择器 nth:first-child nth:last-child css中与字体有关的属性能够继承，!important声明的样式优先级最高 css中div居中 text-align: center margin-left:auto,margin-right:auto 具体： www.runoob.com/css/css-pse… 二维变型： ie9带前缀支持， 旋转变型： 响应式web设计