前端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設計