摘要:第四步本地服務(wù)器再向上一步返回的域名服務(wù)器發(fā)送請(qǐng)求,然后接受請(qǐng)求的服務(wù)器查詢自己的緩存,如果沒(méi)有該紀(jì)錄,則返回相關(guān)的下級(jí)的域名服務(wù)器的地址。第六步本地域名服務(wù)器把返回的結(jié)果保存到緩存,以備下一次使用,同時(shí)還將結(jié)果返回給客戶機(jī)。
史上前端面試最全知識(shí)點(diǎn)(附答案) 一.html & js & css
1.AMD和CMD是什么?它們的區(qū)別有哪些?
AMD和CMD是二種模塊定義規(guī)范。現(xiàn)在都使用模塊化編程,AMD,異步模塊定義;CMD,通用模塊定義。AMD依賴前置,CMD依賴就近。CMD的API職責(zé)單一,沒(méi)有全局require,AMD的一個(gè)API可以多用。
2.web開(kāi)發(fā)常見(jiàn)的漏洞。
XSS(跨站腳本攻擊):其原理是攻擊者向有XSS漏洞的網(wǎng)站中輸入(傳入)惡意的HTML代碼,當(dāng)其它用戶瀏覽該網(wǎng)站時(shí),這段HTML代碼會(huì)自動(dòng)執(zhí)行,從而達(dá)到攻擊的目的。如,盜取用戶Cookie、破壞頁(yè)面結(jié)構(gòu)、重定向到其它網(wǎng)站等。
SQL注入:用戶可以提交一段數(shù)據(jù)庫(kù)查詢代碼,根據(jù)程序返回的結(jié)果,獲得某些他想得知的數(shù)據(jù),這就是所謂的SQL Injection,即SQL注入。
3.cookie和session
當(dāng)你在瀏覽網(wǎng)站的時(shí)候,WEB 服務(wù)器會(huì)先送一小小資料放在你的計(jì)算機(jī)上,Cookie 會(huì)幫你在網(wǎng)站上所打的文字或是一些選擇,
都紀(jì)錄下來(lái)。當(dāng)下次你再光臨同一個(gè)網(wǎng)站,WEB 服務(wù)器會(huì)先看看有沒(méi)有它上次留下的 Cookie 資料,有的話,就會(huì)依據(jù) Cookie
里的內(nèi)容來(lái)判斷使用者,送出特定的網(wǎng)頁(yè)內(nèi)容給你。
?當(dāng)程序需要為某個(gè)客戶端的請(qǐng)求創(chuàng)建一個(gè)session時(shí),服務(wù)器首先檢查這個(gè)客戶端的請(qǐng)求里是否已包含了一個(gè)session標(biāo)識(shí)
(稱為session id),如果已包含則說(shuō)明以前已經(jīng)為此客戶端創(chuàng)建過(guò)session,服務(wù)器就按照session id把這個(gè)session檢索出來(lái)
使用(檢索不到,會(huì)新建一個(gè)),如果客戶端請(qǐng)求不包含session id,則為此客戶端創(chuàng)建一個(gè)session并且生成一個(gè)與此session相
關(guān)聯(lián)的session id
4.MVC BFC
mvc是模型(model)-視圖(view)-控制器(controller)的縮寫,一種軟件設(shè)計(jì)典范使用MVC的目的是將M和V的實(shí)現(xiàn)代碼分離,從而使同一個(gè)程序可以使用不同的表現(xiàn)形式。MVC對(duì)應(yīng)Html,CSS,js。
BFC全稱”Block Formatting Context”, 中文為“塊級(jí)格式化上下文”。流體特性:塊狀水平元素,如div元素(下同),在默認(rèn)情況下(非浮動(dòng)、絕對(duì)定位等),水平方向會(huì)自動(dòng)填滿外部的容器;BFC元素特性表現(xiàn)原則就是,內(nèi)部子元素不會(huì)影響外部的元素。
5.HTTP狀態(tài)碼:
1.消息 2.成功 3.重定向 4.請(qǐng)求錯(cuò)誤 5.服務(wù)器錯(cuò)誤 304:響應(yīng)禁止包含消息體,如果客戶端發(fā)送了一個(gè)帶條件的 GET 請(qǐng)求且該請(qǐng)求已被允許,而文檔的內(nèi)容(自上次訪問(wèn)以來(lái)或者根據(jù)請(qǐng)求的條件)并沒(méi)有改變,則服務(wù)器應(yīng)當(dāng)返回這個(gè)狀態(tài)碼。 305:被請(qǐng)求的資源必須通過(guò)指定的代理才能被訪問(wèn)。 400:語(yǔ)義有誤,當(dāng)前請(qǐng)求無(wú)法被服務(wù)器理解。除非進(jìn)行修改,否則客戶端不應(yīng)該重復(fù)提交這個(gè)請(qǐng)求,或者請(qǐng)求參數(shù)有誤。 403:服務(wù)器已經(jīng)理解請(qǐng)求,但是拒絕執(zhí)行它。 404:請(qǐng)求失敗,請(qǐng)求所希望得到的資源未被在服務(wù)器上發(fā)現(xiàn)。 500:服務(wù)器遇到了一個(gè)未曾預(yù)料的狀況,導(dǎo)致了它無(wú)法完成對(duì)請(qǐng)求的處理。一般來(lái)說(shuō),這個(gè)問(wèn)題都會(huì)在服務(wù)器端的源代碼出現(xiàn)錯(cuò)誤時(shí)出現(xiàn)。
6.HTML 5?增加了一項(xiàng)新功能是?自定義數(shù)據(jù)屬性?,也就是??data-?自定義屬性。在HTML5中我們可以使用以?data-?為前綴來(lái)設(shè)置我們需要的自定義屬性,來(lái)進(jìn)行一些數(shù)據(jù)的存放。
// 使用getAttribute獲取 data- 屬性
var user = document . getElementById ( "user" ) ;
var userName =user . getAttribute ( "data-uname" ) ; // userName = "愚人碼頭"
var userId = user . getAttribute ( "data-uid" ) ; // userId = "12345"
?
使用setAttribute設(shè)置 data- 屬性
user . setAttribute ( "data-site" , "http://www.css88.com" ) ;
7.使div水平垂直都居中
知道DIV的自身長(zhǎng)度和寬度,其實(shí)解決的思路是這樣的:首們需要position:absolute;絕對(duì)定位。而層的定位點(diǎn),使用外補(bǔ)丁margin負(fù)值的方法。負(fù)值的大小為層自身寬度高度除以二。[style="position: absolute;top:50%;left: 50%"]只能實(shí)現(xiàn)DIV離左邊框和上邊框的距離為屏幕的物理尺寸的一半,忽略了DIV本身的長(zhǎng)度和寬度,所以不會(huì)實(shí)現(xiàn)DIV的水平垂直居中。
不知道DIV的本身長(zhǎng)度和寬度時(shí):
$(window).load(function(){ $(".mydiv").css({ position: "absolute", left: ($(window).width() - $(".mydiv").width())/2, top: ($(window).height() - $(".mydiv").height())/2 }); });
8.Call()和apply()
構(gòu)造函數(shù):
function showname(){ this.name="zygg"; } var qq=new showname(); console.log(qq.name);
我們發(fā)現(xiàn)apply()和call()的真正用武之地是能夠擴(kuò)充函數(shù)賴以運(yùn)行的作用域,可以改變函數(shù)體內(nèi)部 this 的指向:
window.firstName = "diz"; window.lastName = "song"; var myname = { firstName: "my", lastName: "Object" }; function show() { console.log("Hello " + this.firstName + " " +this.lastName, " glad to meet you!"); } show(); show.call(myname);//如果不這樣寫,對(duì)象myname是沒(méi)法調(diào)用函數(shù) show()的。
二者作用類似,區(qū)別就是參數(shù)不同:
call(thisObj,Object)
apply(thisObj,[argArray])
9.動(dòng)態(tài)節(jié)點(diǎn)綁定事件
Live() delegate() bind()【處理文檔中的靜態(tài)部分,不用于。。。】
delegate()和live()作用類似,附加的事件處理程序適用于匹配選擇器的當(dāng)前及未來(lái)的元素(比如由腳本創(chuàng)建的新元素)。但二者參數(shù)不一樣。
$(selector).delegate(childSelector,event,function)
$(selector).live(event,function)
$("div").delegate("p","click",function(){
$(this).slideToggle();
});//只有DIV內(nèi)的p元素會(huì)被綁定事件。
$("p").live("click",function(){
$(this).slideToggle();
});//文檔內(nèi)所有p元素都會(huì)被綁定事件
bind()可以向元素添加的一個(gè)或多個(gè)事件處理程序,以及當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。
$(selector).bind(event,function)
$("button").bind("click",function(){
$("p").slideToggle();
});//bind【捆綁】
10.Position的四個(gè)屬性詳解
Position的四個(gè)屬性:static,fixed,absolute,relative
首先,static,是position屬性的默認(rèn)值,也就是無(wú)特殊定位,遵循h(huán)tml定位規(guī)則。
然后,fixed,是相對(duì)于瀏覽器窗口進(jìn)行定位,不隨頁(yè)面的上下翻動(dòng)而移動(dòng),比如固定在頁(yè)面末端的二維碼等。
下來(lái),就是absolute,它是相對(duì)于它的第一個(gè)父元素進(jìn)行定位,如果你想讓這個(gè)div#demo里的一個(gè)子div#sub相對(duì)于#demo定位在右上角的某個(gè)地方,應(yīng)該給#demo相對(duì)定位,#sub絕對(duì)定位。?此時(shí),它的第一個(gè)父元素就是id=demo的div;否則它的父元素就是body,這樣它的位置在頁(yè)面中保持不變,但是隨著頁(yè)面移動(dòng)會(huì)發(fā)生變化(區(qū)別fixed)。
最后,relative,relative是相對(duì)于自己來(lái)定位的,相對(duì)于其正常位置進(jìn)行定位。例如:#demo{position:relative;top:-50px;},這時(shí)#demo會(huì)在相對(duì)于它原來(lái)的位置上移50px。?
P.S:采用左列l(wèi)eft浮動(dòng),右列不浮動(dòng),采用margin-left定位的方式。
11.理解CSS盒子模型
什么是CSS的盒子模式呢?為什么叫它是盒子?先說(shuō)說(shuō)我們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)中常聽(tīng)的屬性名:內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin), CSS盒子模式都具備這些屬性。
CSS盒子模式
這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘I钪械暮凶樱ㄏ渥樱┥蟻?lái)理解,日常生活中所見(jiàn)的盒子也具有這些屬性,所以叫它盒子模式。那么內(nèi)容就是盒子里裝的東西;而填充就是怕盒子里裝的東西(貴重的)損壞而添加的泡沫或者其它抗震的輔料;邊框就是盒子本身了;至于邊界則說(shuō)明盒子擺放的時(shí)候的不能全部堆在一起,要留一定空隙保持通風(fēng),同時(shí)也為了方便取出嘛。在網(wǎng)頁(yè)設(shè)計(jì)上,內(nèi)容常指文字、圖片等元素,但是也可以是小盒子(DIV嵌套),與現(xiàn)實(shí)生活中盒子不同的是,現(xiàn)實(shí)生活中的東西一般不能大于盒子,否則盒子會(huì)被撐壞的,而CSS盒子具有彈性,里面的東西大過(guò)盒子本身最多把它撐大,但它不會(huì)損壞的。而且填充只有寬度屬性。
12.區(qū)別onmouseover和mouseover
onmouseover是Event 對(duì)象的一個(gè)屬性,Mouseover是jQuery中的一個(gè)事件 。
推薦使用jQuery,直接執(zhí)行方法$("#id").mouseover(function(){});
完全使用js則是如下寫法:document.getElementById("id").onmouseover=function(){};
document.getElementsByTagName("body")[0].style.backgroundColor="pink”; //注意不要忘了style,深刻理解DOM的本質(zhì)。
13.一個(gè)簡(jiǎn)單的AJAX 的請(qǐng)求
AJAX
14.Javascript 的addEventListener()及attachEvent()區(qū)別分析
addEventListener()和attachEvent()是一個(gè)偵聽(tīng)事件并處理相應(yīng)的函數(shù),
可以動(dòng)態(tài)的為網(wǎng)頁(yè)內(nèi)的元素添加一個(gè)或多個(gè)事件。可以將事件和元素分離,這樣可編輯性就高了。
addEventListener的使用方式:?
target.addEventListener(type, listener, useCapture);?
target: 文檔節(jié)點(diǎn)、document、window 或 XMLHttpRequest。?
type: 字符串,事件名稱,不含“on”,比如“click”、“mouseover”、“keydown”等。?
listener :實(shí)現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。?
useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);?
而attachEvent()則是,target.attachEvent(type, listener);?
注意:attachEvent()中的type: 字符串,事件名稱,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
15.關(guān)于事件監(jiān)聽(tīng)
比如, 就表示"你正在監(jiān)聽(tīng) click 事件", 而事件監(jiān)聽(tīng)器就是我們?yōu)榱艘憫?yīng)這個(gè)事件而寫的函數(shù)。至于事件監(jiān)聽(tīng)機(jī)制了,就是冒泡和捕獲。
16.事件監(jiān)聽(tīng)機(jī)制(冒泡和捕獲)
事件捕獲:事件從最上一級(jí)標(biāo)簽開(kāi)始往下查找,直到捕獲到事件目標(biāo)(target)。
事件冒泡:事件從事件目標(biāo)(target)開(kāi)始,往上冒泡直到頁(yè)面的最上一級(jí)標(biāo)簽。
假設(shè)一個(gè)元素div,它有一個(gè)下級(jí)元素p。
元素
17.DNS的工作原理(遞歸和迭代)(應(yīng)用層)
DNS的工作原理及過(guò)程分下面幾個(gè)步驟:
????????第一步:客戶機(jī)提出域名解析請(qǐng)求,并將該請(qǐng)求發(fā)送給本地的域名服務(wù)器。
????????第二步:當(dāng)本地的域名服務(wù)器收到請(qǐng)求后,就先查詢本地的緩存,如果有該紀(jì)錄項(xiàng),則本地的域名服務(wù)器就直接把查詢的結(jié)果返回。?
????????第三步:如果本地的緩存中沒(méi)有該紀(jì)錄,則本地域名服務(wù)器就直接把請(qǐng)求發(fā)給根域名服務(wù)器,然后根域名服務(wù)器再返回給本地域名服務(wù)器一個(gè)所查詢域(根的子域)?的主域名服務(wù)器的地址。
????????第四步:本地服務(wù)器再向上一步返回的域名服務(wù)器發(fā)送請(qǐng)求,然后接受請(qǐng)求的服務(wù)器查詢自己的緩存,如果沒(méi)有該紀(jì)錄,則返回相關(guān)的下級(jí)的域名服務(wù)器的地址。
????????第五步:重復(fù)第四步,直到找到正確的紀(jì)錄。
????????第六步:本地域名服務(wù)器把返回的結(jié)果保存到緩存,以備下一次使用,同時(shí)還將結(jié)果返回給客戶機(jī)。
18.什么是DOM事件處理程序?
? ???首先要理解什么是DOM?Dom是針對(duì)HTML文檔的一個(gè)API。什么是事件流?事件流分為:事件冒泡(IE的事件流)和事件捕獲。事件冒泡就是由最具體的元素開(kāi)始接收,然后逐級(jí)向上;事件捕獲就是由不太具體的元素開(kāi)始接收,逐級(jí)向下,最具體的元素最后才接收到事件。
DOM事件處理程序分為DOM0級(jí)、DOM2級(jí)。DOM0級(jí)具有簡(jiǎn)單,跨瀏覽器的優(yōu)勢(shì),它是把函數(shù)賦值給一個(gè)事件的處理程序?qū)傩浴@纾篵tn.onlick=function(){。。。};DOM2級(jí)事件定義了兩個(gè)方法,用于處理指定和刪除事件處理程序的操作。addEventListener()和removeEventListener()。它們都接收三個(gè)參數(shù),要處理的事件名、作為事件處理程序的函數(shù)和布爾值。布爾值為true表示在捕獲階段調(diào)用事件處理程序,布爾值為false是在冒泡處調(diào)用。注意:事件名要去掉“on”。通過(guò)addEventListener()添加的事件,只能由removeEventListener()刪除。IE存在兼容問(wèn)題,可以用attachEvent()添加事件和detachEvent()刪除事件。接收兩個(gè)參數(shù),事件處理程序的名稱和函數(shù)。注意:事件名此時(shí)要加”on”。
19.如果給一個(gè)元素同時(shí)綁定兩個(gè)事件,會(huì)怎么樣?
? ? Dom 0級(jí)和Dom 2級(jí)都可以給一個(gè)元素添加多個(gè)事件,Dom 0級(jí)的每個(gè)事件只支持一個(gè)事件處理程序,如果綁定同一個(gè)事件,那么后邊的那個(gè)事件,函數(shù)會(huì)覆蓋掉前邊的那個(gè)事件函數(shù)。Dom2級(jí)可以添加多個(gè)事件處理程序,他們會(huì)按照添加的順序觸發(fā)。
20.深入理解閉包
要理解閉包,首先必須理解Javascript特殊的變量作用域。我的理解是,閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。
示意圖:
既然函數(shù)b可以讀取函數(shù)a中的局部變量,那么只要把b作為返回值,我們不就可以在a外部讀取它的內(nèi)部變量了嗎!
閉包可以用在許多地方。它的最大用處有兩個(gè),一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量,另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中。
來(lái)自于:http://www.jb51.net/article/24101.htm
21.jQuery源碼分析:
?選擇器 Sizzle引擎 回調(diào)對(duì)象 - Callbacks 事件綁定 - 綁定設(shè)計(jì)
DOM操作方法與核心 Ajax - 整體結(jié)構(gòu)
?選擇器 Sizzle引擎:個(gè)人認(rèn)為,sizzle選擇器是增強(qiáng)版的querySelectorAll 函數(shù):返回指定元素節(jié)點(diǎn)的子樹中匹配selector的節(jié)點(diǎn)集合,采用的是深度優(yōu)先預(yù)查找;如果沒(méi)有匹配的,這個(gè)方法返回空集合)?
22.設(shè)計(jì)模式:
一共有23種設(shè)計(jì)模式
1.觀察者模式
2.監(jiān)聽(tīng)模式
Factory Method(工廠方法):定義一個(gè)用于創(chuàng)建對(duì)象的接口,讓子類決定實(shí)例化哪一個(gè)類。就行構(gòu)造函數(shù)
Abstract Factory(抽象工廠):。。。
Prototype(原型):當(dāng)要實(shí)例化的類是在運(yùn)行時(shí)刻指定時(shí),例如,通過(guò)動(dòng)態(tài)裝載。
......
23.CSS框架:
YUI、JQuery、Prototype,bootstrap。
24.幾個(gè)前端框架的區(qū)別:
jQuery?
核心js只有50K,小而精,占用帶寬小,側(cè)重于對(duì)js dom編程。有靈活便捷的Ajax請(qǐng)求和回調(diào)操作。
ExtJS?
一整套帶有UI的js庫(kù),封裝得很多,核心js就600多K,這么大的東西門戶網(wǎng)站當(dāng)然就別想了,里面的效果當(dāng)然也不會(huì)運(yùn)用到門戶網(wǎng)站,所以它是專門為管理系統(tǒng)而生的。
3、YUI?
或者是類似于網(wǎng)盤應(yīng)用這種東東。?
4.Dojo?
Dojo是功能最為強(qiáng)大的javascript框架,刻意提醒一下:功能最強(qiáng)大。所以它幾乎包含了所有你可能想要用到的東西。)。 Dojo更適合企業(yè)應(yīng)用和產(chǎn)品開(kāi)發(fā)的需要,
5、Prototype?
最成熟的。但個(gè)人認(rèn)為可以被Jquery取代。兩者相似度也比較高。
25.說(shuō)說(shuō)float和position
float:none|left|right|inherit
Inherit:規(guī)定應(yīng)該從父元素繼承 float 屬性的值。
float是相對(duì)定位的,會(huì)隨著瀏覽器的大小和分辨率的變化而改變,而position就不行了,所以一般情況下還是float布局!在局部可能會(huì)用到position進(jìn)行定位!既然是布局,就用float好,這個(gè)我比較常用。這個(gè)浮動(dòng)是可以清除的,一般不會(huì)影響整體布局。 而position,定位,是不受約束的,這個(gè)貌似都談不上布局了,一般要是做什么特殊的定位或者浮動(dòng)層的時(shí)候,可以考慮使用!float會(huì)影響后面的元素,而position不會(huì)影響后面的元素。
26.清除浮動(dòng):
父級(jí)div定義 height,父級(jí)div手動(dòng)定義height,就解決了父級(jí)div無(wú)法自動(dòng)獲取到高度的問(wèn)題。 結(jié)尾處加空div標(biāo)簽 clear:both
父級(jí)div定義 overflow:hidden /auto
27.前端性能優(yōu)化
①對(duì)于頁(yè)面來(lái)說(shuō):盡量減少DOM元素的數(shù)量
減少iframe的數(shù)量 減少http的請(qǐng)求次數(shù) 提前加載
②對(duì)于CSS來(lái)說(shuō):將樣式表置頂
使用link代替@important
區(qū)別1:link引用CSS時(shí),在頁(yè)面載入時(shí)同時(shí)加載;@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。
區(qū)別2:link是XHTML標(biāo)簽,無(wú)兼容問(wèn)題;@import是在CSS2.1提出的,低版本的瀏覽器不支持。link支持定義RSS(簡(jiǎn)易信息聚合).
區(qū)別3:link支持使用Javascript控制DOM去改變樣式;而@import不支持。
③對(duì)于JS來(lái)說(shuō): 將腳本置底
使用外部JS和CSS文件 精簡(jiǎn)JS和CSS文件,去除重復(fù)腳本 目前,前端性能測(cè)試的執(zhí)行工具也有很多,比如YSlow,Page Speed,dynaTrace AJAX Edition,webload等等。
28.HTML語(yǔ)義化
就是當(dāng)你寫html時(shí),要按照人們的思考邏輯寫。不但要自己能看懂,也要讓別人也能看懂,不要讓別人覺(jué)得你的代碼很亂。語(yǔ)義化的主要目的就是讓大家直觀的認(rèn)識(shí)標(biāo)簽(markup)和屬性(attribute)的用途和作用。
語(yǔ)義化的網(wǎng)頁(yè)的好處,最主要的就是對(duì)搜索引擎友好,有了良好的結(jié)構(gòu)和語(yǔ)義你的網(wǎng)頁(yè)內(nèi)容自然容易被搜索引擎抓取,你網(wǎng)站的推廣便可以省下不少的功夫。
語(yǔ)義 Web 技術(shù)有助于利用基于開(kāi)放標(biāo)準(zhǔn)的技術(shù),從數(shù)據(jù)、文檔內(nèi)容或應(yīng)用代碼中分離出意義。
29.可以談?wù)勛约簩?duì)SEO和title和keywords堆砌問(wèn)題。
30.說(shuō)說(shuō)jsonp,getJSON(),getScript():
Jsonp(解決跨域)
一種非正式傳輸協(xié)議,人們把它稱作JSONP,該協(xié)議的一個(gè)要點(diǎn)就是允許用戶傳遞一個(gè)callback參數(shù)給服務(wù)端,然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來(lái)包裹住JSON數(shù)據(jù),這樣客戶端就可以隨意定制自己的函數(shù)來(lái)自動(dòng)處理返回?cái)?shù)據(jù)了。
因?yàn)椋?script> 元素的這個(gè)開(kāi)放策略。
getJSON():
所以getJSON和ajax的方式(實(shí)際就是jsonp)想比較,也就是callback函數(shù)一個(gè)是自動(dòng)生成的函數(shù)名,一個(gè)是手工指定的函數(shù)名。
getScript():
客戶端:
服務(wù)端:
Var zy={“name”:”zygg”, “age”:”22” };
31.prototype屬性
每一個(gè)構(gòu)造函數(shù)都有一個(gè)屬性叫做原型(prototype)。這個(gè)屬性非常有用:為一個(gè)特定類聲明通用的變量或者函數(shù)。prototype是一個(gè)對(duì)象,因此,你能夠給它添加屬性。你添加給prototype的屬性將會(huì)成為使用這個(gè)構(gòu)造函數(shù)創(chuàng)建的對(duì)象的通用屬性。
32.js實(shí)現(xiàn)類:
構(gòu)造函數(shù)方式:
由于js類的定義方法和函數(shù)的定義方法一樣,所以定義構(gòu)造函數(shù)的同時(shí)就定義了類。構(gòu)造函數(shù)內(nèi)的方法和屬性也就是類中的方法和屬性。
原型方式?
? 該方式利用了對(duì)象的prototype屬性。首先定義了一個(gè)空函數(shù),然后通過(guò)prototype屬性來(lái)定義對(duì)象的屬性。調(diào)用該函數(shù)時(shí),原型的所有屬性都會(huì)立即賦予要?jiǎng)?chuàng)建的對(duì)象
33.js面向?qū)ο?/p>
? 面向?qū)ο蟮恼Z(yǔ)言有一個(gè)標(biāo)志,即擁有類的概念
34.構(gòu)造函數(shù)
js創(chuàng)建對(duì)象的方式包括兩種:對(duì)象字面量和使用new表達(dá)式。對(duì)應(yīng)代碼:
Var zy={ “name”:”zygg”, “age”:22 } function zy(name,age){ this.name=name; this.age=age; } zy.prototype.sex="male"; var zygg=new zy("bailu",18) console.log(zygg.name) //bailu
35.js繼承
繼承是指一個(gè)對(duì)象直接使用另一對(duì)象的屬性和方法
實(shí)現(xiàn)方法:
對(duì)象冒充,及call()Apply()參見(jiàn)上述call和apply的用法。
原型鏈方式:
js中每個(gè)對(duì)象均有一個(gè)隱藏的__proto__屬性,一個(gè)實(shí)例化對(duì)象的__proto__屬性指向其類的prototype方法,而這個(gè)prototype方法又可以被賦值成另一個(gè)實(shí)例化對(duì)象,這個(gè)對(duì)象的__proto__又需要指向其類,由此形成一條鏈。
那么__proto__是什么?我們?cè)谶@里簡(jiǎn)單地說(shuō)下。每個(gè)對(duì)象都會(huì)在其內(nèi)部初始化一個(gè)屬性,就是__proto__,當(dāng)我們?cè)L問(wèn)一個(gè)對(duì)象的屬性 時(shí),如果這個(gè)對(duì)象內(nèi)部不存在這個(gè)屬性,那么他就會(huì)去__proto__里找這個(gè)屬性,這個(gè)__proto__又會(huì)有自己的__proto__,于是就這樣 一直找下去,也就是我們平時(shí)所說(shuō)的原型鏈的概念。
36.js事件委托
“事件處理程序過(guò)多”問(wèn)題的解決方案就是事件委托。
事件委托利用的是事件冒泡機(jī)制,只制定一事件處理程序,就可以管理某一類型的所有事件(使用事件委托,只需在DOM樹中盡量最高的層次上添加一個(gè)事件處理程序)。
這里要用到事件源:event 對(duì)象,需要用到target屬性,其 事件屬性可返回事件的目標(biāo)節(jié)點(diǎn)(觸發(fā)該事件的節(jié)點(diǎn))
oUl.onmouseover = function(ev){ var target = ev.target if(target.nodeName.toLowerCase() == "li"){ target.style.background = "red"; } }
37.js自定義事件:
js自定義事件用處較多,最主要的就是實(shí)現(xiàn)觀察者模式.
觀察者模式( 又叫發(fā)布者-訂閱者模式 )應(yīng)該是最常用的設(shè)計(jì)模式之一。
平時(shí)接觸的dom事件. 也是js和dom之間實(shí)現(xiàn)的一種觀察者模式.
觀察者模式舉例:
div.onclick??=??function click (){
?
?? alert ( ""click" )
?
}
只要訂閱了div的click事件. 當(dāng)點(diǎn)擊div的時(shí)候, function click就會(huì)被觸發(fā).Div為發(fā)布者,click事件為訂閱者
自定義事件例子:
???
on()是jQuery中的類似于bind(),live(),delegate()等綁定事件的方法。
trigger() 方法觸發(fā)被選元素的指定事件類型。先給固定元素綁定一個(gè)自定義事件”someclick”,然后必須通過(guò)trigger()來(lái)使自定義事件可以使用。
Trigger【引發(fā),觸發(fā);】
38.回調(diào)函數(shù):
函數(shù)a有一個(gè)參數(shù),這個(gè)參數(shù)是個(gè)函數(shù)b,當(dāng)函數(shù)a執(zhí)行完以后執(zhí)行函數(shù)b。那么這個(gè)過(guò)程就叫回調(diào)。函數(shù)b是你以參數(shù)形式傳給函數(shù)a的,那么函數(shù)b就叫回調(diào)函數(shù)。回調(diào)函數(shù)可以繼續(xù)擴(kuò)展一個(gè)函數(shù)的功能,可以是程序非常靈活。
function zy(callback){ alert("開(kāi)始"); callback(); } function zygg(){ alert("我是回調(diào)函數(shù)"); } function test(){ zy(zygg) }
39.說(shuō)一說(shuō)css中box和flex
恩恩,首先"box"吶是比較早的語(yǔ)法,使用它時(shí)需要帶上前綴,比如? display: -webkit-box; / Chrome 4+, Safari 3.1, iOS Safari 3.2+ /,而"flex"是2012年的語(yǔ)法,是css3新規(guī)定的,也將是以后標(biāo)準(zhǔn)的語(yǔ)法。將父元素的display屬性設(shè)置為-webkit-box(box),然后子元素通過(guò)屬性-webkit-box-flex來(lái)指定一個(gè)框的子元素是否是靈活的或固定的大小,如上,定義兩個(gè)靈活的p元素。如果父級(jí)box的總寬度為300px,#P1將有一個(gè)100px的寬度,#P2將有一個(gè)200px的寬度,也就是呈固定比例劃分。當(dāng)然了,也可以這樣寫:
111111111111
22222222222
當(dāng)然了css3規(guī)定了,一系列的有關(guān)box的屬性,比如?box-shadow。。。。。
40.JavaScript內(nèi)置對(duì)象有以下幾種。?
String對(duì)象:處理所有的字符串操作? Math對(duì)象:處理所有的數(shù)學(xué)運(yùn)算? Date對(duì)象:處理日期和時(shí)間的存儲(chǔ)、轉(zhuǎn)化和表達(dá)? Array對(duì)象:提供一個(gè)數(shù)組的模型、存儲(chǔ)大量有序的數(shù)據(jù)? Event對(duì)象:提供JavaScript事件的各種處理信息?41.JavaScript內(nèi)置函數(shù)
①:escape( )escape() 函數(shù)可對(duì)字符串進(jìn)行編碼,這樣就可以在所有的計(jì)算機(jī)上讀取該字符串。 eg:?=%3
②:eval( ) eval() 函數(shù)可計(jì)算某個(gè)字符串,并執(zhí)行其中的的 JavaScript 代碼。
eg:eval("x=10;y=20;document.write(x*y)")
③:isFinite( )isFinite() 函數(shù)用于檢查其參數(shù)是否是無(wú)窮大。返回true或者false。
④:isNaN( ) isNaN( )?函數(shù)可用于判斷其參數(shù)是否是 NaN
⑤:parseFloat( )parseFloat() 函數(shù)可解析一個(gè)字符串,并返回一個(gè)浮點(diǎn)數(shù)。
⑥;parseInt( ) parseInt() 函數(shù)可解析一個(gè)字符串,并返回一個(gè)整數(shù)。
⑦:unescape( ) unescape() 函數(shù)可對(duì)通過(guò) escape() 編碼的字符串進(jìn)行解碼。42.自適應(yīng)問(wèn)題
自適應(yīng)指的就是指其長(zhǎng)(寬)度可以根據(jù)瀏器窗口的大小自動(dòng)改變其長(zhǎng)(寬)度(隨瀏覽器長(zhǎng)(寬)的改變而改變),而不會(huì)被瀏覽器遮住。
實(shí)現(xiàn)方法(以左側(cè)固定,右側(cè)自適應(yīng)為例):
①采用左列 left 浮動(dòng),右列不浮動(dòng),采用 margin-left 定位的方式。
②左列使用絕對(duì)定位,右列使用 margin-left 定位。43.我們給一個(gè)dom同時(shí)綁定兩個(gè)點(diǎn)擊事件,一個(gè)用捕獲,一個(gè)用冒泡,你來(lái)說(shuō)下會(huì)執(zhí)行幾次事件,然后會(huì)先執(zhí)行冒泡還是捕獲!!!
44.jQuery的三種綁定事件方式:bind(),live(),delegate()
45.從輸入 URL 到頁(yè)面加載完的過(guò)程中都發(fā)生了什么事情?
①首先如果我們?nèi)绻斎氲牟皇莍p地址,而是域名的話,就需要IP解析,DNS域名解析(具體見(jiàn)DNS工作機(jī)制)。
②解析出來(lái)對(duì)應(yīng)的IP后,如不包含端口號(hào),http協(xié)議默認(rèn)端口號(hào)是80;https(http+ssl(傳輸層))是430!然后向IP發(fā)起網(wǎng)絡(luò)連接,根據(jù)http協(xié)議要求,組織一個(gè)請(qǐng)求的數(shù)據(jù)包,里面包含大量請(qǐng)求信息。
③服務(wù)器響應(yīng)請(qǐng)求,將數(shù)據(jù)返回給瀏覽器。數(shù)據(jù)可能是根據(jù)HTML協(xié)議組織的網(wǎng)頁(yè),里面包含頁(yè)面的布局、文字。數(shù)據(jù)也可能是圖片、腳本程序等。
④開(kāi)始根據(jù)資源的類型,將資源組織成屏幕上顯示的圖像,這個(gè)過(guò)程叫渲染,網(wǎng)頁(yè)渲染是瀏覽器最復(fù)雜、最核心的功能。
⑤將渲染好的頁(yè)面圖像顯示出來(lái),并開(kāi)始響應(yīng)用戶的操作。46.jQuery 選擇器種類
? ? ?
47.Unicode和ASCII的區(qū)別是什么回答
計(jì)算機(jī)發(fā)明后,為了在計(jì)算機(jī)中表示字符,人們制定了一種編碼,叫ASCII碼。
中國(guó)人利用連續(xù)2個(gè)擴(kuò)展ASCII碼的擴(kuò)展區(qū)域(0xA0以后)來(lái)表示一個(gè)漢字,該方法的標(biāo)準(zhǔn)叫GB-2312。因?yàn)楦鱾€(gè)國(guó)家地區(qū)定義的字符集有交集,因此使用GB-2312的軟件,就不能在BIG-5的環(huán)境下運(yùn)行(顯示亂碼),反之亦然。為了把全世界人民所有的所有的文字符號(hào)都統(tǒng)一進(jìn)行編碼,于是制定了UNICODE標(biāo)準(zhǔn)字符集。UNICODE 使用2個(gè)字節(jié)表示一個(gè)字符(unsigned shor int、WCHAR、_wchar_t、OLECHAR)。48.JS的數(shù)據(jù)類型:字符串、數(shù)字、布爾、數(shù)組、對(duì)象、Null、Undefined
Null和undefined的區(qū)別:
二.CSS(3)
undefined表示變量聲明但未初始化時(shí)的值,javascript解釋器不知道這是什麼東西,會(huì)拋出"未定義"的錯(cuò)誤
null表示準(zhǔn)備用來(lái)保存對(duì)象,還沒(méi)有真正保存對(duì)象的值。從邏輯角度看,null值表示一個(gè)空對(duì)象指針,意思是你定義了它,但它沒(méi)有分配內(nèi)存空間。css3總的說(shuō)來(lái)大概就是邊框的一些特殊樣式,比如圓角,還有就是漸變,動(dòng)畫。
在CSS3中border-radius屬性被用于創(chuàng)建圓角(前提是有邊框?qū)傩裕篵order-radius:10px;如果你在 border-radius 屬性中只指定一個(gè)值,那么將生成 4 個(gè) 圓角。 其也可以這樣寫:border-radius:1px 2px 3px 4px [可以給四個(gè)角同時(shí)設(shè)置] 也可以border-top/bottom-left/right-radius,給某個(gè)角給值。 其值也可以這樣: border-radius: 15px/50px; border-radius: 50% ;【橢圓效果】CSS3中的box-shadow屬性被用來(lái)添加陰影:box-shadow : 3px 3px 3px yellow;[上右下左]
有了CSS3的border-image屬性,你可以使用圖像創(chuàng)建一個(gè)邊框:
-webkit-border-image : url(border.png) 30 30 round;round : 圖像平鋪(重復(fù))來(lái)填充該區(qū)域。
Stretch 這里,圖像被拉伸以填充該區(qū)域。
background-size指定背景圖像的大小。CSS3以前,背景圖像大小由圖像的實(shí)際大小決定。
background-size:80px 60px;background-Origin屬性指定了背景圖像的位置區(qū)域。
content-box, padding-box,和 border-box區(qū)域內(nèi)可以放置背景圖像。Eg:background-origin:border-box;
CSS3 允許你在元素,那個(gè)添加多個(gè)背景圖像。
background-image:url(img_flwr.gif),url(img_tree.gif);
CSS3?background-clip?屬性,類比background-origin[背景圖片]
作用:指定繪圖區(qū)的背景,也就是規(guī)定背景的真正作用區(qū)域。
語(yǔ)法:
background-clip: border-box|padding-box|content-box;CSS3 定義了兩種類型的漸變(gradients):
?線性漸變(Linear Gradients)- 向下/向上/向左/向右/對(duì)角方向
?徑向漸變(Radial Gradients)- 由它們的中心定義
語(yǔ)法:background: -webkit-linear-gradient(red, pink); 從上到下background: -webkit-linear-gradient(left, red , blue); 從左向右-moz代表firefox瀏覽器私有屬性
-ms代表IE瀏覽器私有屬性
-webkit代表chrome、safari(蘋果瀏覽器)私有屬性
-o代表opera(歐朋瀏覽器)的私有屬性background: -webkit-linear-gradient(left top, red , blue); 漸變呈對(duì)角線變化,從左上角開(kāi)始。
漸變的方向上也可以做更多的控制,您可以定義一個(gè)角度,而不用預(yù)定義方向:
?background: -webkit-linear-gradient(180deg, red, blue);
也可以同時(shí)使用多個(gè)顏色節(jié)點(diǎn):
background: -webkit-linear-gradient(red, green, blue);
CSS3 漸變也支持透明度(transparency),可用于創(chuàng)建減弱變淡的效果:
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
我們使用 rgba() 函數(shù)來(lái)定義顏色結(jié)點(diǎn)。rgba() 函數(shù)中的最后一個(gè)參數(shù)可以是從 0 到 1 的值,它定義了顏色的透明度:0 表示完全透明,1 表示完全不透明。r代表紅色,g代表綠色,b代表藍(lán)色,a代表透明度。
重復(fù)的漸變:
background: -webkit-repeating-linear-gradient(...);
為了創(chuàng)建一個(gè)徑向漸變,您也必須至少定義兩種顏色結(jié)點(diǎn)。
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
比例越大,”半徑越大”,它的默認(rèn)形狀是橢圓。也可以自定義形狀;
background: -webkit-radial-gradient(circle, red, yellow, green);
CSS3的文本陰影:
text-shadow: 5px 5px 5px #FF0000;分別對(duì)應(yīng)水平陰影,垂直陰影,模糊的距離,以及陰影的顏色.
CSS3文本的強(qiáng)制換行:
p {word-wrap:break-word;}CSS3 @font-face 規(guī)則,自定義字體。
CSS3?2D 轉(zhuǎn)換:
您將了解2D變換方法:
translate()
rotate()
scale()
skew()
matrix()
rotate()方法,在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)的元素。負(fù)值是允許的,這樣是元素逆時(shí)針旋轉(zhuǎn)。-webkit-transform:rotate(30deg); /* Safari and Chrome */ 注意是-webkit-transform :是冒號(hào)translate()方法,根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù),從當(dāng)前元素位置移動(dòng):
-webkit-transform:translate(50px,100px)scale()方法,該元素增加或減少的大小,取決于寬度(X軸)和高度(Y軸)的參數(shù)
-webkit-transform:scale(1,2); 也就是寬度和高度呈對(duì)應(yīng)的倍數(shù)增加。skew()方法,該元素會(huì)根據(jù)橫向(X軸)和垂直(Y軸)線參數(shù)給定角度:
skew(30deg,20deg)是繞X軸和Y軸周圍20度30度的元素。matrix 方法有六個(gè)參數(shù),包含旋轉(zhuǎn),縮放,移動(dòng)(平移)和傾斜功能。
rty 描述 CSS
transform 適用于2D或3D轉(zhuǎn)換的元素 3
transform-origin 允許您更改轉(zhuǎn)化元素位置 3
函數(shù) 描述
matrix(n,n,n,n,n,n) 定義 2D 轉(zhuǎn)換,使用六個(gè)值的矩陣。
translate(x,y) 定義 2D 轉(zhuǎn)換,沿著 X 和 Y 軸移動(dòng)元素。
translateX(n) 定義 2D 轉(zhuǎn)換,沿著 X 軸移動(dòng)元素。
translateY(n) 定義 2D 轉(zhuǎn)換,沿著 Y 軸移動(dòng)元素。
scale(x,y) 定義 2D 縮放轉(zhuǎn)換,改變?cè)氐膶挾群透叨取?br>scaleX(n) 定義 2D 縮放轉(zhuǎn)換,改變?cè)氐膶挾取?br>scaleY(n) 定義 2D 縮放轉(zhuǎn)換,改變?cè)氐母叨取?br>rotate(angle) 定義 2D 旋轉(zhuǎn),在參數(shù)中規(guī)定角度。
skew(x-angle,y-angle) 定義 2D 傾斜轉(zhuǎn)換,沿著 X 和 Y 軸。
skewX(angle) 定義 2D 傾斜轉(zhuǎn)換,沿著 X 軸。
skewY(angle) 定義 2D 傾斜轉(zhuǎn)換,沿著 Y 軸。CSS3?3D 轉(zhuǎn)換:
rotateX()
rotateY()
-webkit-transform:rotateX/Y(120deg); / Safari and Chrome /CSS3?過(guò)渡 : transition 屬性.
CSS3 過(guò)渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。
要實(shí)現(xiàn)這一點(diǎn),必須規(guī)定兩項(xiàng)內(nèi)容:
指定要添加效果的CSS屬性
指定效果的持續(xù)時(shí)間
Eg : -webkit-transition: -webkit-transform 3s;
-webkit-transition-delay 規(guī)定過(guò)渡效果何時(shí)開(kāi)始。默認(rèn)是 0。
CSS3 動(dòng)畫
當(dāng)在@keyframe創(chuàng)建動(dòng)畫,把它綁定到一個(gè)選擇器,否則動(dòng)畫不會(huì)有任何效果。
指定至少這兩個(gè)CSS3的動(dòng)畫屬性綁定向一個(gè)選擇器:
規(guī)定動(dòng)畫的名稱
規(guī)定動(dòng)畫的時(shí)長(zhǎng)
也可以這樣寫:
@-webkit-keyframes myfirst / Safari and Chrome /
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
其中不僅僅跟background屬性,可以跟一系列屬性。屬性 描述 CSS
@keyframes 規(guī)定動(dòng)畫。 3
animation 所有動(dòng)畫屬性的簡(jiǎn)寫屬性,除了 animation-play-state 屬性。 3
animation-name 規(guī)定 @keyframes 動(dòng)畫的名稱。 3
animation-duration 規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。 3
animation-timing-function 規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 "ease"。 3
animation-delay 規(guī)定動(dòng)畫何時(shí)開(kāi)始。默認(rèn)是 0。 3
animation-iteration-count 規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1。 3
animation-direction 規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。 3
animation-play-state 規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。默認(rèn)是 "running"。 3
通過(guò) CSS3多列,您能夠創(chuàng)建多個(gè)列來(lái)對(duì)文本進(jìn)行布局 - 就像報(bào)紙那樣!
在本章中,您將學(xué)習(xí)如下多列屬性:
column-count
column-gap
column-rulediv { -webkit-column-count:3; /* Safari and Chrome */ 將文章劃為3列 -webkit-column-gap:40px; /* Safari and Chrome */ 每列間的距離為40px -webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */ 設(shè)置列之間 的寬度,樣式和顏色 }三.Html5Html5新加了一些語(yǔ)義元素,畫布,拖放,web存儲(chǔ)(localstarge,sessionstrage)等。
1.HTML5 定了 8 個(gè)新的 HTML?語(yǔ)義(semantic)?元素。所有這些元素都是?塊級(jí)?元素。
為了能讓舊版本的瀏覽器正確顯示這些元素,你可以設(shè)置 CSS 的?display?屬性值為?block:
2.你可以為 HTML 添加新的元素。
fuck{
Font-family:simhei;
Color:pink
}
本例中,JavaScript 語(yǔ)句?document.createElement("myHero")?是為了為 IE 瀏覽器添加新的元素。Internet Explorer 8 及更早 IE 版本的瀏覽器不支持以上的方式。幸運(yùn)的是, Sjoerd Visscher 創(chuàng)建了 "HTML5 Enabling JavaScript", "?shiv":以上代碼是一個(gè)注釋,作用是在 IE 瀏覽器的版本小于 IE9 時(shí)將讀取 html5.js 文件,并解析它。
3.HTML5getContext() 方法返回一個(gè)用于在畫布上繪圖的環(huán)境。
設(shè)置fillStyle屬性可以是CSS顏色,漸變,或圖案。fillStyle 默認(rèn)設(shè)置是#000000(黑色)。
fillRect(x,y,width,height) 方法定義了矩形當(dāng)前的填充方式。
canvas 是一個(gè)二維網(wǎng)格。canvas 的左上角坐標(biāo)為 (0,0)
在Canvas上畫線,我們將使用以下兩種方法:
?moveTo(x,y) 定義線條開(kāi)始坐標(biāo)
?lineTo(x,y) 定義線條結(jié)束坐標(biāo)
然后使用 stroke() 方法來(lái)繪制線條:
在canvas中繪制圓形, 我們將使用以下方法: arc(x,y,r,start,stop)
ctx.arc(95,50,20,0,2*Math.PI);
參數(shù)分別為,圓心的橫坐標(biāo),縱坐標(biāo),半徑,起始角(以弧度記),結(jié)束角(以弧度記)
使用 canvas 繪制文本,重要的屬性和方法如下:
font - 定義字體
fillText(text,x,y) - 在 canvas 上繪制實(shí)心的文本
strokeText(text,x,y) - 在 canvas 上繪制空心的文本
漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。
以下有兩種不同的方式來(lái)設(shè)置Canvas漸變:
createLinearGradient(x,y,x1,y1) - 創(chuàng)建線條漸變
createRadialGradient(x,y,r,x1,y1,r1) - 創(chuàng)建一個(gè)徑向/圓漸變var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);將圖片畫在畫布上:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有損失
Canvas 與 SVG 的比較:
SVG 是一種使用 XML 描述 2D 圖形的語(yǔ)言。Canvas 通過(guò) JavaScript 來(lái)繪制 2D 圖形。
Svg支持事件處理器,canvas不支持事件處理器
在 SVG 中,每個(gè)被繪制的圖形均被視為對(duì)象,而canvas能夠以 .png 或 .jpg 格式保存結(jié)果圖像
如果 SVG 對(duì)象的屬性發(fā)生變化,那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。Html5的拖放功能、
HTML5 - 使用地理定位:請(qǐng)使用 getCurrentPosition() 方法來(lái)獲得用戶的位置。
Html5新的input類型:color
date
datetime
datetime-local
month
number
range
search
tel
time
url
WeekHTML5 新的表單元素:
Select和datalist的區(qū)別:
select:5個(gè)值里面選擇1個(gè);
datalist:你可以在文本框里填值,也可以在下面5個(gè)值里選1個(gè)。
元素的作用是提供一種驗(yàn)證用戶的可靠方法。 標(biāo)簽規(guī)定用于表單的密鑰對(duì)生成器字段。
當(dāng)提交表單時(shí),會(huì)生成兩個(gè)鍵,一個(gè)是私鑰,一個(gè)公鑰。
屬性 值 描述
for element_id 定義輸出域相關(guān)的一個(gè)或多個(gè)元素。
form form_id 定義輸入字段所屬的一個(gè)或多個(gè)表單。
name name 定義對(duì)象的唯一名稱。(表單提交時(shí)使用)
P.S:別忘了給range和number設(shè)置value屬性。
multiple 屬性是一個(gè) boolean 屬性. multiple 屬性規(guī)定 元素中可選擇多個(gè)值。例如同時(shí)選擇多個(gè)文件上傳。
14.pattern 屬性描述了一個(gè)正則表達(dá)式用于驗(yàn)證 元素的值。
15.placeholder 屬性提供一種提示(hint),描述輸入域所期待的值
16.required 屬性規(guī)定必須在提交之前填寫輸入域(不能為空)。
17.step 屬性為輸入域規(guī)定合法的數(shù)字間隔。
如果 step="3",則合法的數(shù)是 -3,0,3,6 等
語(yǔ)義元素:
一個(gè)語(yǔ)義元素能夠清楚的描述其意義給瀏覽器和開(kāi)發(fā)者。 無(wú)語(yǔ)義?元素實(shí)例:和 - 無(wú)需考慮內(nèi)容.語(yǔ)義元素實(shí)例: