国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

史上前端面試最全問答(附答案)

scola666 / 3202人閱讀

摘要:第四步本地服務器再向上一步返回的域名服務器發送請求,然后接受請求的服務器查詢自己的緩存,如果沒有該紀錄,則返回相關的下級的域名服務器的地址。第六步本地域名服務器把返回的結果保存到緩存,以備下一次使用,同時還將結果返回給客戶機。

史上前端面試最全知識點(附答案) 一.html & js & css

1.AMD和CMD是什么?它們的區別有哪些?

AMD和CMD是二種模塊定義規范。現在都使用模塊化編程,AMD,異步模塊定義;CMD,通用模塊定義。AMD依賴前置,CMD依賴就近。CMD的API職責單一,沒有全局require,AMD的一個API可以多用。

2.web開發常見的漏洞。

XSS(跨站腳本攻擊):其原理是攻擊者向有XSS漏洞的網站中輸入(傳入)惡意的HTML代碼,當其它用戶瀏覽該網站時,這段HTML代碼會自動執行,從而達到攻擊的目的。如,盜取用戶Cookie、破壞頁面結構、重定向到其它網站等。

SQL注入:用戶可以提交一段數據庫查詢代碼,根據程序返回的結果,獲得某些他想得知的數據,這就是所謂的SQL Injection,即SQL注入。

3.cookie和session

當你在瀏覽網站的時候,WEB 服務器會先送一小小資料放在你的計算機上,Cookie 會幫你在網站上所打的文字或是一些選擇,

都紀錄下來。當下次你再光臨同一個網站,WEB 服務器會先看看有沒有它上次留下的 Cookie 資料,有的話,就會依據 Cookie
里的內容來判斷使用者,送出特定的網頁內容給你。
?當程序需要為某個客戶端的請求創建一個session時,服務器首先檢查這個客戶端的請求里是否已包含了一個session標識
(稱為session id),如果已包含則說明以前已經為此客戶端創建過session,服務器就按照session id把這個session檢索出來
使用(檢索不到,會新建一個),如果客戶端請求不包含session id,則為此客戶端創建一個session并且生成一個與此session相
關聯的session id

4.MVC BFC

mvc是模型(model)-視圖(view)-控制器(controller)的縮寫,一種軟件設計典范使用MVC的目的是將M和V的實現代碼分離,從而使同一個程序可以使用不同的表現形式。MVC對應Html,CSS,js。

BFC全稱”Block Formatting Context”, 中文為“塊級格式化上下文”。流體特性:塊狀水平元素,如div元素(下同),在默認情況下(非浮動、絕對定位等),水平方向會自動填滿外部的容器;BFC元素特性表現原則就是,內部子元素不會影響外部的元素。

5.HTTP狀態碼:

 1.消息  2.成功 3.重定向 4.請求錯誤 5.服務器錯誤

 304:響應禁止包含消息體,如果客戶端發送了一個帶條件的 GET 請求且該請求已被允許,而文檔的內容(自上次訪問以來或者根據請求的條件)并沒有改變,則服務器應當返回這個狀態碼。
 305:被請求的資源必須通過指定的代理才能被訪問。
 400:語義有誤,當前請求無法被服務器理解。除非進行修改,否則客戶端不應該重復提交這個請求,或者請求參數有誤。
 403:服務器已經理解請求,但是拒絕執行它。
 404:請求失敗,請求所希望得到的資源未被在服務器上發現。
 500:服務器遇到了一個未曾預料的狀況,導致了它無法完成對請求的處理。一般來說,這個問題都會在服務器端的源代碼出現錯誤時出現。

6.HTML 5?增加了一項新功能是?自定義數據屬性?,也就是??data-?自定義屬性。在HTML5中我們可以使用以?data-?為前綴來設置我們需要的自定義屬性,來進行一些數據的存放。

// 使用getAttribute獲取 data- 屬性
var user = document . getElementById ( "user" ) ;
var userName =user . getAttribute ( "data-uname" ) ; // userName = "愚人碼頭"
var userId = user . getAttribute ( "data-uid" ) ; // userId = "12345"
?
使用setAttribute設置 data- 屬性
user . setAttribute ( "data-site" , "http://www.css88.com" ) ;

7.使div水平垂直都居中

知道DIV的自身長度和寬度,其實解決的思路是這樣的:首們需要position:absolute;絕對定位。而層的定位點,使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以二。[style="position: absolute;top:50%;left: 50%"]只能實現DIV離左邊框和上邊框的距離為屏幕的物理尺寸的一半,忽略了DIV本身的長度和寬度,所以不會實現DIV的水平垂直居中。
不知道DIV的本身長度和寬度時:

        $(window).load(function(){
            $(".mydiv").css({
                position: "absolute",
                left: ($(window).width() - $(".mydiv").width())/2,
                top: ($(window).height() - $(".mydiv").height())/2
            });
        });

8.Call()和apply()
構造函數:

 function showname(){
    this.name="zygg";
}
var qq=new showname();
console.log(qq.name);

我們發現apply()和call()的真正用武之地是能夠擴充函數賴以運行的作用域,可以改變函數體內部 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);//如果不這樣寫,對象myname是沒法調用函數 show()的。

二者作用類似,區別就是參數不同:
call(thisObj,Object)
apply(thisObj,[argArray])

9.動態節點綁定事件

Live() delegate() bind()【處理文檔中的靜態部分,不用于。。。】
delegate()和live()作用類似,附加的事件處理程序適用于匹配選擇器的當前及未來的元素(比如由腳本創建的新元素)。但二者參數不一樣。
$(selector).delegate(childSelector,event,function)

$(selector).live(event,function)

$("div").delegate("p","click",function(){

$(this).slideToggle();

});//只有DIV內的p元素會被綁定事件。
$("p").live("click",function(){

$(this).slideToggle();

});//文檔內所有p元素都會被綁定事件
bind()可以向元素添加的一個或多個事件處理程序,以及當事件發生時運行的函數。
$(selector).bind(event,function)
$("button").bind("click",function(){

$("p").slideToggle();

});//bind【捆綁】

10.Position的四個屬性詳解

Position的四個屬性:static,fixed,absolute,relative
首先,static,是position屬性的默認值,也就是無特殊定位,遵循html定位規則。
然后,fixed,是相對于瀏覽器窗口進行定位,不隨頁面的上下翻動而移動,比如固定在頁面末端的二維碼等。
下來,就是absolute,它是相對于它的第一個父元素進行定位,如果你想讓這個div#demo里的一個子div#sub相對于#demo定位在右上角的某個地方,應該給#demo相對定位,#sub絕對定位。?此時,它的第一個父元素就是id=demo的div;否則它的父元素就是body,這樣它的位置在頁面中保持不變,但是隨著頁面移動會發生變化(區別fixed)。
最后,relative,relative是相對于自己來定位的,相對于其正常位置進行定位。例如:#demo{position:relative;top:-50px;},這時#demo會在相對于它原來的位置上移50px。?
P.S:采用左列left浮動,右列不浮動,采用margin-left定位的方式。

11.理解CSS盒子模型

什么是CSS的盒子模式呢?為什么叫它是盒子?先說說我們在網頁設計中常聽的屬性名:內容(content)、填充(padding)、邊框(border)、邊界(margin), CSS盒子模式都具備這些屬性。

CSS盒子模式
這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解,日常生活中所見的盒子也具有這些屬性,所以叫它盒子模式。那么內容就是盒子里裝的東西;而填充就是怕盒子里裝的東西(貴重的)損壞而添加的泡沫或者其它抗震的輔料;邊框就是盒子本身了;至于邊界則說明盒子擺放的時候的不能全部堆在一起,要留一定空隙保持通風,同時也為了方便取出嘛。在網頁設計上,內容常指文字、圖片等元素,但是也可以是小盒子(DIV嵌套),與現實生活中盒子不同的是,現實生活中的東西一般不能大于盒子,否則盒子會被撐壞的,而CSS盒子具有彈性,里面的東西大過盒子本身最多把它撐大,但它不會損壞的。而且填充只有寬度屬性。

12.區別onmouseover和mouseover

onmouseover是Event 對象的一個屬性,Mouseover是jQuery中的一個事件 。
推薦使用jQuery,直接執行方法$("#id").mouseover(function(){});
完全使用js則是如下寫法:document.getElementById("id").onmouseover=function(){};
document.getElementsByTagName("body")[0].style.backgroundColor="pink”; //注意不要忘了style,深刻理解DOM的本質。

13.一個簡單的AJAX 的請求




AJAX

14.Javascript 的addEventListener()及attachEvent()區別分析

addEventListener()和attachEvent()是一個偵聽事件并處理相應的函數,
可以動態的為網頁內的元素添加一個或多個事件。可以將事件和元素分離,這樣可編輯性就高了。
addEventListener的使用方式:?
target.addEventListener(type, listener, useCapture);?
target: 文檔節點、document、window 或 XMLHttpRequest。?
type: 字符串,事件名稱,不含“on”,比如“click”、“mouseover”、“keydown”等。?
listener :實現了 EventListener 接口或者是 JavaScript 中的函數。?
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.關于事件監聽

 比如,

16.事件監聽機制(冒泡和捕獲)

事件捕獲:事件從最上一級標簽開始往下查找,直到捕獲到事件目標(target)。
事件冒泡:事件從事件目標(target)開始,往上冒泡直到頁面的最上一級標簽。
假設一個元素div,它有一個下級元素p。


  

元素



這兩個元素都綁定了click事件,如果用戶點擊了p,它在div和p上都觸發了click事件,那這兩個事件處理程序哪個先執行呢??
如div先觸發,這就叫做事件捕獲。
如p先觸發,這就叫做事件冒泡。
IE只支持事件冒泡,其他主流瀏覽器兩種都支持。
程序員可以自己選擇綁定事件時采用事件捕獲還是事件冒泡,方法就是綁定事件時通過addEventListener函數,它有三個參數,第三個參數若是true,則表示采用事件捕獲,若是false,則表示采用事件冒泡。
事件的傳播是可以阻止的:
? 在W3c中,使用stopPropagation()方法
在捕獲的過程中stopPropagation();后,后面的冒泡過程也不會發生了~
propagation 【傳播,蔓延】
3.阻止事件的默認行為,例如click a標簽后的跳轉~
? 在W3c中,使用preventDefault()方法;
? 在IE下設置window.event.returnValue = false;

17.DNS的工作原理(遞歸和迭代)(應用層)

DNS的工作原理及過程分下面幾個步驟:
????????第一步:客戶機提出域名解析請求,并將該請求發送給本地的域名服務器。
????????第二步:當本地的域名服務器收到請求后,就先查詢本地的緩存,如果有該紀錄項,則本地的域名服務器就直接把查詢的結果返回。?
????????第三步:如果本地的緩存中沒有該紀錄,則本地域名服務器就直接把請求發給根域名服務器,然后根域名服務器再返回給本地域名服務器一個所查詢域(根的子域)?的主域名服務器的地址。
????????第四步:本地服務器再向上一步返回的域名服務器發送請求,然后接受請求的服務器查詢自己的緩存,如果沒有該紀錄,則返回相關的下級的域名服務器的地址。
????????第五步:重復第四步,直到找到正確的紀錄。
????????第六步:本地域名服務器把返回的結果保存到緩存,以備下一次使用,同時還將結果返回給客戶機。

18.什么是DOM事件處理程序?

? ???首先要理解什么是DOM?Dom是針對HTML文檔的一個API。什么是事件流?事件流分為:事件冒泡(IE的事件流)和事件捕獲。事件冒泡就是由最具體的元素開始接收,然后逐級向上;事件捕獲就是由不太具體的元素開始接收,逐級向下,最具體的元素最后才接收到事件。
DOM事件處理程序分為DOM0級、DOM2級。DOM0級具有簡單,跨瀏覽器的優勢,它是把函數賦值給一個事件的處理程序屬性。例如:btn.onlick=function(){。。。};DOM2級事件定義了兩個方法,用于處理指定和刪除事件處理程序的操作。addEventListener()和removeEventListener()。它們都接收三個參數,要處理的事件名、作為事件處理程序的函數和布爾值。布爾值為true表示在捕獲階段調用事件處理程序,布爾值為false是在冒泡處調用。注意:事件名要去掉“on”。通過addEventListener()添加的事件,只能由removeEventListener()刪除。IE存在兼容問題,可以用attachEvent()添加事件和detachEvent()刪除事件。接收兩個參數,事件處理程序的名稱和函數。注意:事件名此時要加”on”。

19.如果給一個元素同時綁定兩個事件,會怎么樣?

? ? Dom 0級和Dom 2級都可以給一個元素添加多個事件,Dom 0級的每個事件只支持一個事件處理程序,如果綁定同一個事件,那么后邊的那個事件,函數會覆蓋掉前邊的那個事件函數。Dom2級可以添加多個事件處理程序,他們會按照添加的順序觸發。

20.深入理解閉包

要理解閉包,首先必須理解Javascript特殊的變量作用域。我的理解是,閉包就是能夠讀取其他函數內部變量的函數。
示意圖:

既然函數b可以讀取函數a中的局部變量,那么只要把b作為返回值,我們不就可以在a外部讀取它的內部變量了嗎!

閉包可以用在許多地方。它的最大用處有兩個,一個是前面提到的可以讀取函數內部的變量,另一個就是讓這些變量的值始終保持在內存中。

                             來自于:http://www.jb51.net/article/24101.htm

21.jQuery源碼分析:

?選擇器 Sizzle引擎 回調對象 - Callbacks 事件綁定 - 綁定設計
DOM操作方法與核心 Ajax - 整體結構
?選擇器 Sizzle引擎:個人認為,sizzle選擇器是增強版的querySelectorAll 函數:返回指定元素節點的子樹中匹配selector的節點集合,采用的是深度優先預查找;如果沒有匹配的,這個方法返回空集合)?

22.設計模式:

一共有23種設計模式
1.觀察者模式
2.監聽模式

Factory Method(工廠方法):定義一個用于創建對象的接口,讓子類決定實例化哪一個類。就行構造函數

Abstract Factory(抽象工廠):。。。

Prototype(原型):當要實例化的類是在運行時刻指定時,例如,通過動態裝載。

......

23.CSS框架:

YUI、JQuery、Prototype,bootstrap。

24.幾個前端框架的區別:

jQuery?
核心js只有50K,小而精,占用帶寬小,側重于對js dom編程。有靈活便捷的Ajax請求和回調操作。
ExtJS?
一整套帶有UI的js庫,封裝得很多,核心js就600多K,這么大的東西門戶網站當然就別想了,里面的效果當然也不會運用到門戶網站,所以它是專門為管理系統而生的。
3、YUI?
或者是類似于網盤應用這種東東。?
4.Dojo?
Dojo是功能最為強大的javascript框架,刻意提醒一下:功能最強大。所以它幾乎包含了所有你可能想要用到的東西。)。 Dojo更適合企業應用和產品開發的需要,
5、Prototype?
最成熟的。但個人認為可以被Jquery取代。兩者相似度也比較高。

25.說說float和position

float:none|left|right|inherit
Inherit:規定應該從父元素繼承 float 屬性的值。

float是相對定位的,會隨著瀏覽器的大小和分辨率的變化而改變,而position就不行了,所以一般情況下還是float布局!在局部可能會用到position進行定位!既然是布局,就用float好,這個我比較常用。這個浮動是可以清除的,一般不會影響整體布局。 而position,定位,是不受約束的,這個貌似都談不上布局了,一般要是做什么特殊的定位或者浮動層的時候,可以考慮使用!float會影響后面的元素,而position不會影響后面的元素。

26.清除浮動:

父級div定義 height,父級div手動定義height,就解決了父級div無法自動獲取到高度的問題。 
結尾處加空div標簽 clear:both 

父級div定義 overflow:hidden /auto

27.前端性能優化

①對于頁面來說:盡量減少DOM元素的數量

              減少iframe的數量
              減少http的請求次數
              提前加載

②對于CSS來說:將樣式表置頂

              使用link代替@important

  區別1:link引用CSS時,在頁面載入時同時加載;@import需要頁面網頁完全載入以后加載。
  區別2:link是XHTML標簽,無兼容問題;@import是在CSS2.1提出的,低版本的瀏覽器不支持。link支持定義RSS(簡易信息聚合).
區別3:link支持使用Javascript控制DOM去改變樣式;而@import不支持。

③對于JS來說: 將腳本置底

              使用外部JS和CSS文件
              精簡JS和CSS文件,去除重復腳本

 目前,前端性能測試的執行工具也有很多,比如YSlow,Page Speed,dynaTrace AJAX Edition,webload等等。

28.HTML語義化

就是當你寫html時,要按照人們的思考邏輯寫。不但要自己能看懂,也要讓別人也能看懂,不要讓別人覺得你的代碼很亂。語義化的主要目的就是讓大家直觀的認識標簽(markup)和屬性(attribute)的用途和作用。

語義化的網頁的好處,最主要的就是對搜索引擎友好,有了良好的結構和語義你的網頁內容自然容易被搜索引擎抓取,你網站的推廣便可以省下不少的功夫。

語義 Web 技術有助于利用基于開放標準的技術,從數據、文檔內容或應用代碼中分離出意義。

29.可以談談自己對SEO和title和keywords堆砌問題。

30.說說jsonp,getJSON(),getScript():

Jsonp(解決跨域)

一種非正式傳輸協議,人們把它稱作JSONP,該協議的一個要點就是允許用戶傳遞一個callback參數給服務端,然后服務端返回數據時會將這個callback參數作為函數名來包裹住JSON數據,這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。

因為,

服務端:

 Var zy={“name”:”zygg”,
“age”:”22”
};

31.prototype屬性

每一個構造函數都有一個屬性叫做原型(prototype)。這個屬性非常有用:為一個特定類聲明通用的變量或者函數。prototype是一個對象,因此,你能夠給它添加屬性。你添加給prototype的屬性將會成為使用這個構造函數創建的對象的通用屬性。

32.js實現類:

構造函數方式:
由于js類的定義方法和函數的定義方法一樣,所以定義構造函數的同時就定義了類。構造函數內的方法和屬性也就是類中的方法和屬性。
原型方式?
? 該方式利用了對象的prototype屬性。首先定義了一個空函數,然后通過prototype屬性來定義對象的屬性。調用該函數時,原型的所有屬性都會立即賦予要創建的對象

33.js面向對象

? 面向對象的語言有一個標志,即擁有類的概念

34.構造函數

js創建對象的方式包括兩種:對象字面量和使用new表達式。對應代碼:

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繼承

繼承是指一個對象直接使用另一對象的屬性和方法
實現方法:
對象冒充,及call()Apply()參見上述call和apply的用法。
原型鏈方式:
js中每個對象均有一個隱藏的__proto__屬性,一個實例化對象的__proto__屬性指向其類的prototype方法,而這個prototype方法又可以被賦值成另一個實例化對象,這個對象的__proto__又需要指向其類,由此形成一條鏈。

那么__proto__是什么?我們在這里簡單地說下。每個對象都會在其內部初始化一個屬性,就是__proto__,當我們訪問一個對象的屬性 時,如果這個對象內部不存在這個屬性,那么他就會去__proto__里找這個屬性,這個__proto__又會有自己的__proto__,于是就這樣 一直找下去,也就是我們平時所說的原型鏈的概念。

36.js事件委托

“事件處理程序過多”問題的解決方案就是事件委托。
事件委托利用的是事件冒泡機制,只制定一事件處理程序,就可以管理某一類型的所有事件(使用事件委托,只需在DOM樹中盡量最高的層次上添加一個事件處理程序)。
這里要用到事件源:event 對象,需要用到target屬性,其 事件屬性可返回事件的目標節點(觸發該事件的節點)

oUl.onmouseover = function(ev){ 
            var target = ev.target 
            if(target.nodeName.toLowerCase() == "li"){
                target.style.background = "red";
            }
        }

37.js自定義事件:

js自定義事件用處較多,最主要的就是實現觀察者模式.
觀察者模式( 又叫發布者-訂閱者模式 )應該是最常用的設計模式之一。
平時接觸的dom事件. 也是js和dom之間實現的一種觀察者模式.
觀察者模式舉例:
div.onclick??=??function click (){
?
?? alert ( ""click" )
?
}
只要訂閱了div的click事件. 當點擊div的時候, function click就會被觸發.Div為發布者,click事件為訂閱者
自定義事件例子:


???  

on()是jQuery中的類似于bind(),live(),delegate()等綁定事件的方法。
trigger() 方法觸發被選元素的指定事件類型。先給固定元素綁定一個自定義事件”someclick”,然后必須通過trigger()來使自定義事件可以使用。
Trigger【引發,觸發;】

38.回調函數:

函數a有一個參數,這個參數是個函數b,當函數a執行完以后執行函數b。那么這個過程就叫回調。函數b是你以參數形式傳給函數a的,那么函數b就叫回調函數。回調函數可以繼續擴展一個函數的功能,可以是程序非常靈活。

 function zy(callback){
          alert("開始"); 
          callback();
      }
        function zygg(){
            alert("我是回調函數");
        }
       function test(){
           zy(zygg)
       }

39.說一說css中box和flex

恩恩,首先"box"吶是比較早的語法,使用它時需要帶上前綴,比如? display: -webkit-box; / Chrome 4+, Safari 3.1, iOS Safari 3.2+ /,而"flex"是2012年的語法,是css3新規定的,也將是以后標準的語法。將父元素的display屬性設置為-webkit-box(box),然后子元素通過屬性-webkit-box-flex來指定一個框的子元素是否是靈活的或固定的大小,如上,定義兩個靈活的p元素。如果父級box的總寬度為300px,#P1將有一個100px的寬度,#P2將有一個200px的寬度,也就是呈固定比例劃分。當然了,也可以這樣寫:

111111111111

22222222222

當然了css3規定了,一系列的有關box的屬性,比如?box-shadow。。。。。

40.JavaScript內置對象有以下幾種。?

 String對象:處理所有的字符串操作?
 Math對象:處理所有的數學運算?
 Date對象:處理日期和時間的存儲、轉化和表達?
 Array對象:提供一個數組的模型、存儲大量有序的數據?
 Event對象:提供JavaScript事件的各種處理信息?
 

41.JavaScript內置函數

①:escape( )escape() 函數可對字符串進行編碼,這樣就可以在所有的計算機上讀取該字符串。 eg:?=%3
②:eval( ) eval() 函數可計算某個字符串,并執行其中的的 JavaScript 代碼。
eg:eval("x=10;y=20;document.write(x*y)")
③:isFinite( )isFinite() 函數用于檢查其參數是否是無窮大。返回true或者false。
④:isNaN( ) isNaN( )?函數可用于判斷其參數是否是 NaN
⑤:parseFloat( )parseFloat() 函數可解析一個字符串,并返回一個浮點數。
⑥;parseInt( ) parseInt() 函數可解析一個字符串,并返回一個整數。
⑦:unescape( ) unescape() 函數可對通過 escape() 編碼的字符串進行解碼。

42.自適應問題

自適應指的就是指其長(寬)度可以根據瀏器窗口的大小自動改變其長(寬)度(隨瀏覽器長(寬)的改變而改變),而不會被瀏覽器遮住。
實現方法(以左側固定,右側自適應為例):
①采用左列 left 浮動,右列不浮動,采用 margin-left 定位的方式。
②左列使用絕對定位,右列使用 margin-left 定位。

43.我們給一個dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡,你來說下會執行幾次事件,然后會先執行冒泡還是捕獲!!!

44.jQuery的三種綁定事件方式:bind(),live(),delegate()

45.從輸入 URL 到頁面加載完的過程中都發生了什么事情?

①首先如果我們如果輸入的不是ip地址,而是域名的話,就需要IP解析,DNS域名解析(具體見DNS工作機制)。
②解析出來對應的IP后,如不包含端口號,http協議默認端口號是80;https(http+ssl(傳輸層))是430!然后向IP發起網絡連接,根據http協議要求,組織一個請求的數據包,里面包含大量請求信息。
③服務器響應請求,將數據返回給瀏覽器。數據可能是根據HTML協議組織的網頁,里面包含頁面的布局、文字。數據也可能是圖片、腳本程序等。
④開始根據資源的類型,將資源組織成屏幕上顯示的圖像,這個過程叫渲染,網頁渲染是瀏覽器最復雜、最核心的功能。
⑤將渲染好的頁面圖像顯示出來,并開始響應用戶的操作。

46.jQuery 選擇器種類

? ? ?

47.Unicode和ASCII的區別是什么回答

計算機發明后,為了在計算機中表示字符,人們制定了一種編碼,叫ASCII碼。
中國人利用連續2個擴展ASCII碼的擴展區域(0xA0以后)來表示一個漢字,該方法的標準叫GB-2312。因為各個國家地區定義的字符集有交集,因此使用GB-2312的軟件,就不能在BIG-5的環境下運行(顯示亂碼),反之亦然。

為了把全世界人民所有的所有的文字符號都統一進行編碼,于是制定了UNICODE標準字符集。UNICODE 使用2個字節表示一個字符(unsigned shor int、WCHAR、_wchar_t、OLECHAR)。

48.JS的數據類型:字符串、數字、布爾、數組、對象、Null、Undefined

Null和undefined的區別:
undefined表示變量聲明但未初始化時的值,javascript解釋器不知道這是什麼東西,會拋出"未定義"的錯誤
null表示準備用來保存對象,還沒有真正保存對象的值。從邏輯角度看,null值表示一個空對象指針,意思是你定義了它,但它沒有分配內存空間。

二.CSS(3)

css3總的說來大概就是邊框的一些特殊樣式,比如圓角,還有就是漸變,動畫。
在CSS3中border-radius屬性被用于創建圓角(前提是有邊框屬性):border-radius:10px;

 如果你在 border-radius 屬性中只指定一個值,那么將生成 4 個 圓角。

 其也可以這樣寫:border-radius:1px 2px 3px 4px [可以給四個角同時設置]

 也可以border-top/bottom-left/right-radius,給某個角給值。

  其值也可以這樣:  border-radius: 15px/50px;

                    border-radius: 50% ;【橢圓效果】

CSS3中的box-shadow屬性被用來添加陰影:box-shadow : 3px 3px 3px yellow;[上右下左]

有了CSS3的border-image屬性,你可以使用圖像創建一個邊框:

 -webkit-border-image : url(border.png) 30 30 round;

round : 圖像平鋪(重復)來填充該區域。

Stretch 這里,圖像被拉伸以填充該區域。

background-size指定背景圖像的大小。CSS3以前,背景圖像大小由圖像的實際大小決定。

 background-size:80px 60px;

background-Origin屬性指定了背景圖像的位置區域。
content-box, padding-box,和 border-box區域內可以放置背景圖像。

Eg:background-origin:border-box;

CSS3 允許你在元素,那個添加多個背景圖像。
background-image:url(img_flwr.gif),url(img_tree.gif);
CSS3?background-clip?屬性,類比background-origin[背景圖片]
作用:指定繪圖區的背景,也就是規定背景的真正作用區域。
語法:
background-clip: border-box|padding-box|content-box;

CSS3 定義了兩種類型的漸變(gradients):
?線性漸變(Linear Gradients)- 向下/向上/向左/向右/對角方向
?徑向漸變(Radial Gradients)- 由它們的中心定義
語法: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); 漸變呈對角線變化,從左上角開始。
漸變的方向上也可以做更多的控制,您可以定義一個角度,而不用預定義方向:
?background: -webkit-linear-gradient(180deg, red, blue);
也可以同時使用多個顏色節點:
background: -webkit-linear-gradient(red, green, blue);
CSS3 漸變也支持透明度(transparency),可用于創建減弱變淡的效果:
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
我們使用 rgba() 函數來定義顏色結點。rgba() 函數中的最后一個參數可以是從 0 到 1 的值,它定義了顏色的透明度:0 表示完全透明,1 表示完全不透明。r代表紅色,g代表綠色,b代表藍色,a代表透明度。
重復的漸變:
background: -webkit-repeating-linear-gradient(...);
為了創建一個徑向漸變,您也必須至少定義兩種顏色結點。
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
比例越大,”半徑越大”,它的默認形狀是橢圓。也可以自定義形狀;
background: -webkit-radial-gradient(circle, red, yellow, green);
CSS3的文本陰影:
text-shadow: 5px 5px 5px #FF0000;分別對應水平陰影,垂直陰影,模糊的距離,以及陰影的顏色.
CSS3文本的強制換行:
p {word-wrap:break-word;}

CSS3 @font-face 規則,自定義字體。

CSS3?2D 轉換:
您將了解2D變換方法:
translate()
rotate()
scale()
skew()
matrix()
rotate()方法,在一個給定度數順時針旋轉的元素。負值是允許的,這樣是元素逆時針旋轉。

-webkit-transform:rotate(30deg); /* Safari and Chrome */ 注意是-webkit-transform :是冒號

translate()方法,根據左(X軸)和頂部(Y軸)位置給定的參數,從當前元素位置移動:

 -webkit-transform:translate(50px,100px)

scale()方法,該元素增加或減少的大小,取決于寬度(X軸)和高度(Y軸)的參數

 -webkit-transform:scale(1,2); 也就是寬度和高度呈對應的倍數增加。

skew()方法,該元素會根據橫向(X軸)和垂直(Y軸)線參數給定角度:

 skew(30deg,20deg)是繞X軸和Y軸周圍20度30度的元素。

matrix 方法有六個參數,包含旋轉,縮放,移動(平移)和傾斜功能。
rty 描述 CSS
transform 適用于2D或3D轉換的元素 3
transform-origin 允許您更改轉化元素位置 3
函數 描述
matrix(n,n,n,n,n,n) 定義 2D 轉換,使用六個值的矩陣。
translate(x,y) 定義 2D 轉換,沿著 X 和 Y 軸移動元素。
translateX(n) 定義 2D 轉換,沿著 X 軸移動元素。
translateY(n) 定義 2D 轉換,沿著 Y 軸移動元素。
scale(x,y) 定義 2D 縮放轉換,改變元素的寬度和高度。
scaleX(n) 定義 2D 縮放轉換,改變元素的寬度。
scaleY(n) 定義 2D 縮放轉換,改變元素的高度。
rotate(angle) 定義 2D 旋轉,在參數中規定角度。
skew(x-angle,y-angle) 定義 2D 傾斜轉換,沿著 X 和 Y 軸。
skewX(angle) 定義 2D 傾斜轉換,沿著 X 軸。
skewY(angle) 定義 2D 傾斜轉換,沿著 Y 軸。

CSS3?3D 轉換:
rotateX()
rotateY()
-webkit-transform:rotateX/Y(120deg); / Safari and Chrome /

CSS3?過渡 : transition 屬性.
CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。
要實現這一點,必須規定兩項內容:
指定要添加效果的CSS屬性
指定效果的持續時間
Eg : -webkit-transition: -webkit-transform 3s;
-webkit-transition-delay 規定過渡效果何時開始。默認是 0。
CSS3 動畫
當在@keyframe創建動畫,把它綁定到一個選擇器,否則動畫不會有任何效果。
指定至少這兩個CSS3的動畫屬性綁定向一個選擇器:
規定動畫的名稱
規定動畫的時長

也可以這樣寫:
@-webkit-keyframes myfirst / Safari and Chrome /
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
其中不僅僅跟background屬性,可以跟一系列屬性。

屬性 描述 CSS
@keyframes 規定動畫。 3
animation 所有動畫屬性的簡寫屬性,除了 animation-play-state 屬性。 3
animation-name 規定 @keyframes 動畫的名稱。 3
animation-duration 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。 3
animation-timing-function 規定動畫的速度曲線。默認是 "ease"。 3
animation-delay 規定動畫何時開始。默認是 0。 3
animation-iteration-count 規定動畫被播放的次數。默認是 1。 3
animation-direction 規定動畫是否在下一周期逆向地播放。默認是 "normal"。 3
animation-play-state 規定動畫是否正在運行或暫停。默認是 "running"。 3
通過 CSS3多列,您能夠創建多個列來對文本進行布局 - 就像報紙那樣!
在本章中,您將學習如下多列屬性:
column-count
column-gap
column-rule

div
{
-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 */  設置列之間
的寬度,樣式和顏色
} 
三.Html5

Html5新加了一些語義元素,畫布,拖放,web存儲(localstarge,sessionstrage)等。
1.HTML5 定了 8 個新的 HTML?語義(semantic)?元素。所有這些元素都是?塊級?元素。
為了能讓舊版本的瀏覽器正確顯示這些元素,你可以設置 CSS 的?display?屬性值為?block:
2.你可以為 HTML 添加新的元素。
fuck{
Font-family:simhei;
Color:pink
}
本例中,JavaScript 語句?document.createElement("myHero")?是為了為 IE 瀏覽器添加新的元素。Internet Explorer 8 及更早 IE 版本的瀏覽器不支持以上的方式。幸運的是, Sjoerd Visscher 創建了 "HTML5 Enabling JavaScript", "?shiv":以上代碼是一個注釋,作用是在 IE 瀏覽器的版本小于 IE9 時將讀取 html5.js 文件,并解析它。
3.HTML5 元素用于圖形的繪制,通過腳本 (通常是JavaScript)來完成.
標簽只是圖形容器,您必須使用腳本來繪制圖形。Ie8以及以前不支持、

getContext() 方法返回一個用于在畫布上繪圖的環境。
設置fillStyle屬性可以是CSS顏色,漸變,或圖案。fillStyle 默認設置是#000000(黑色)。
fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。
canvas 是一個二維網格。canvas 的左上角坐標為 (0,0)
在Canvas上畫線,我們將使用以下兩種方法:
?moveTo(x,y) 定義線條開始坐標
?lineTo(x,y) 定義線條結束坐標
然后使用 stroke() 方法來繪制線條:
在canvas中繪制圓形, 我們將使用以下方法: arc(x,y,r,start,stop)
ctx.arc(95,50,20,0,2*Math.PI);
參數分別為,圓心的橫坐標,縱坐標,半徑,起始角(以弧度記),結束角(以弧度記)
使用 canvas 繪制文本,重要的屬性和方法如下:
font - 定義字體
fillText(text,x,y) - 在 canvas 上繪制實心的文本
strokeText(text,x,y) - 在 canvas 上繪制空心的文本
漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。
以下有兩種不同的方式來設置Canvas漸變:
createLinearGradient(x,y,x1,y1) - 創建線條漸變
createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變

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 圖像在放大或改變尺寸的情況下其圖形質量不會有損失

Canvas 與 SVG 的比較:
SVG 是一種使用 XML 描述 2D 圖形的語言。Canvas 通過 JavaScript 來繪制 2D 圖形。
Svg支持事件處理器,canvas不支持事件處理器
在 SVG 中,每個被繪制的圖形均被視為對象,而canvas能夠以 .png 或 .jpg 格式保存結果圖像
如果 SVG 對象的屬性發生變化,那么瀏覽器能夠自動重現圖形。

Html5的拖放功能、

HTML5 - 使用地理定位:請使用 getCurrentPosition() 方法來獲得用戶的位置。
Html5新的input類型:

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
Week

HTML5 新的表單元素:



Select和datalist的區別:
select:5個值里面選擇1個;
datalist:你可以在文本框里填值,也可以在下面5個值里選1個。


    
    

元素的作用是提供一種驗證用戶的可靠方法。
標簽規定用于表單的密鑰對生成器字段。
當提交表單時,會生成兩個鍵,一個是私鑰,一個公鑰。
元素用于不同類型的輸出,比如計算或腳本輸出:

0 100 + =

屬性 值 描述
for element_id 定義輸出域相關的一個或多個元素。
form form_id 定義輸入字段所屬的一個或多個表單。
name name 定義對象的唯一名稱。(表單提交時使用)

P.S:別忘了給range和number設置value屬性。

新屬性:

autocomplete
novalidate

新屬性:

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step
①. autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。
當用戶在自動完成域中開始輸入時,瀏覽器應該在該域中顯示填寫的選項。有on(開),off(關)。
②.novalidate 屬性規定在提交表單時不驗證 form 或 input 域輸入元素的合法性。
③.autofocus 屬性是一個 boolean 屬性.autofocus 屬性規定在頁面加載時,域自動地獲得焦點,就是進去就可以直接輸入。
④.form 屬性規定輸入域所屬的一個或多個表單。Eg:

First name:



Last name:
"Last name" 字段沒有在form表單之內,但它也是form表單的一部分。
⑤The formaction 屬性用于描述表單提交的URL地址.
⑥formenctype 屬性描述了表單提交到服務器的數據編碼 (只對form表單中 method="post" 表單)
⑦formmethod 屬性定義了表單提交的方式。
⑧novalidate屬性描述了 元素在表單提交時無需被驗證。
⑨formtarget 屬性指定一個名稱或一個關鍵字來指明表單提交數據接收后的展示。

10.height 和 width 屬性規定用于 image 類型的 標簽的圖像高度和寬度。
這種形式寫在表單里,可以實現點擊圖片提交表單。
11.list 屬性規定輸入域的 datalist。datalist 是輸入域的選項列表。結合datalist標簽使用。
12.min、max 和 step 屬性用于為包含數字或日期的 input 類型規定限定(約束)。
13.

   multiple 屬性是一個 boolean 屬性.
  multiple 屬性規定 元素中可選擇多個值。例如同時選擇多個文件上傳。

14.pattern 屬性描述了一個正則表達式用于驗證 元素的值。
15.placeholder 屬性提供一種提示(hint),描述輸入域所期待的值
16.required 屬性規定必須在提交之前填寫輸入域(不能為空)。

17.step 屬性為輸入域規定合法的數字間隔。

如果 step="3",則合法的數是 -3,0,3,6 等
語義元素:

一個語義元素能夠清楚的描述其意義給瀏覽器和開發者。
無語義?元素實例: 
- 無需考慮內容.

語義元素實例:

, , and "; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events..."; }

服務器代碼:

關鍵字:EventSource對象 flush();

PS:新加一些問題,小伙伴們都會不會呀,不會趕緊去惡補呦。

1.html的doctype作用?嚴格模式和混雜模式都是什么?

2.列舉js異步編程的方法

3.Css選擇器(符)有哪些?哪些可繼承?優先級如何?

4.setTimeout()的時間參數最小可以是多少?為什么?

5.class_a .class_b(中間有空格) 和 .class_a.class_b 和.class_a,.class_b三者區別是什么?

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/84935.html

相關文章

  • 上前端面最全問答答案

    摘要:第四步本地服務器再向上一步返回的域名服務器發送請求,然后接受請求的服務器查詢自己的緩存,如果沒有該紀錄,則返回相關的下級的域名服務器的地址。第六步本地域名服務器把返回的結果保存到緩存,以備下一次使用,同時還將結果返回給客戶機。 史上前端面試最全知識點(附答案) 一.html & js & css 1.AMD和CMD是什么?它們的區別有哪些? AMD和CMD是二種模塊定義規范。現在都使用...

    SHERlocked93 評論0 收藏0
  • 上前端面最全問答答案

    摘要:第四步本地服務器再向上一步返回的域名服務器發送請求,然后接受請求的服務器查詢自己的緩存,如果沒有該紀錄,則返回相關的下級的域名服務器的地址。第六步本地域名服務器把返回的結果保存到緩存,以備下一次使用,同時還將結果返回給客戶機。 史上前端面試最全知識點(附答案) 一.html & js & css 1.AMD和CMD是什么?它們的區別有哪些? AMD和CMD是二種模塊定義規范。現在都使用...

    eternalshallow 評論0 收藏0
  • 前端最強面經匯總

    摘要:獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼,也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素,方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。 花了很長時間整理的前端面試資源,喜歡請大家不要吝嗇star~ 別只收藏,點個贊,點個star再走哈~ 持續更新中……,可以關注下github 項目地址 https:...

    wangjuntytl 評論0 收藏0
  • 三年Java后端面經歷

    摘要:前言三年后端開發經驗,面的目標崗位是的高級后端開發。面試結束,應該沒有后續。 前言 三年Java后端開發經驗,面的目標崗位是20k-35k的高級后端Java開發。 第一場,基本裸面,關于曾經的項目部門答的不好,所以還是得好好準備。 某C輪在線旅游公司 筆試 先做半個小時的筆試題,一共六個題目,兩道go語言的基礎題,一道斐波那契相關,一道數據庫行列轉置,一道實現一個棧,還有一道是百萬計...

    darry 評論0 收藏0
  • 重磅!Uber發布上最簡單的深度學習框架Ludwig!

    摘要:通用性一種新的基于數據類型的深度學習模型設計方法,使該工具可以跨許多不同的應用領域使用。可理解性深度學習模型內部通常被認為是黑匣子,但是該庫提供標準的可視化來理解它們的性能并比較它們的預測。 昨日,Uber官網重磅宣布新開源深度學習框架Ludwig,不需要懂編程知識,讓專家能用的更順手,讓非專業人士也可以玩轉人工智能,堪稱史上最簡單的深度學習框架!Ludwig是一個建立在TensorFlow...

    zhichangterry 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看

          <