web前端知識考點

2021-07-10 13:56:51 字數 4339 閱讀 9622

回到頂部

在網頁中,乙個元素占有空間的大小由幾個部分構成,其中包括元素的內容(content),元素的內邊距(padding),元素的邊框(border),元素的外邊距(margin)四個部分。這四個部分占有的空間中,有的部分可以顯示相應的內容,而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。

行內元素:a、b、span、img、input、strong、select、label、em、button、textarea

塊級元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素:即係沒有內容的html元素,例如:br、meta、hr、link、input、img

一道經典的問題,實現方法有很多種,以下是其中一種實現:

html結構:

class=

>

class=

"content"

>

div>

div>

css:

.content

href 是指向網路資源所在位置,建立和當前元素(錨點)或當前文件(鏈結)之間的鏈結,用於超連結。

一般來說是針對不同的瀏覽器寫不同的css,就是 css hack。

ie瀏覽器hack一般又分為三種,條件hack、屬性級hack、選擇符hack(詳細參考css文件:css文件)。例如:

// 1、條件hack

// 2、屬性hack

.test

// 3、選擇符hack

* html .test /* for ie6 and earlier */

* + html .test /* for ie7 */

同步是阻塞模式,非同步是非阻塞模式。

同步就是指乙個程序在執行某個請求的時候,若該請求需要一段時間才能返回資訊,那麼這個程序將會一直等待下去,直到收到返回資訊才繼續執行下去;

非同步是指程序不需要一直等下去,而是繼續執行下面的操作,不管其他程序的狀態。當有訊息返回時系統會通知程序進行處理,這樣可以提高執行的效率。

px和em都是長度單位,區別是,px的值是固定的,指定是多少就是多少,計算比較容易。em得值不是固定的,並且em會繼承父級元素的字型大小。

瀏覽器的預設字型高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em

漸進增強 progressive enhancement:

針對低版本瀏覽器進行構建頁面,保證最基本的功能,然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。

優雅降級 graceful degradation:

一開始就構建完整的功能,然後再針對低版本瀏覽器進行相容。

區別:a. 優雅降級是從複雜的現狀開始,並試圖減少使用者體驗的供給

b. 漸進增強則是從乙個非常基礎的,能夠起作用的版本開始,並不斷擴充,以適應未來環境的需要

c. 降級(功能衰減)意味著往回看;而漸進增強則意味著朝前看,同時保證其根基處於安全地帶

ie: trident核心

firefox:gecko核心

safari:webkit核心

opera:以前是presto核心,opera現已改用google chrome的blink核心

chrome:blink(基於webkit,google與opera software共同開發)

回到頂部

1)建立新節點

createdocumentfragment() //建立乙個dom片段

createelement() //建立乙個具體的元素

createtextnode() //建立乙個文字節點

3)查詢

getelementsbytagname() //通過標籤名稱

getelementsbyname() //通過元素的name屬性的值

getelementbyid() //通過元素id,唯一性

/**

* 物件轉殖

* 支援基本資料型別及物件

* 遞迴方法

*/function

clone

(obj)

else }

else

;for

(var

k in

obj) }}

break

;default

: o = obj;

break;}

return

o;}

// 方法一:

var arr1 =[1,2,2,2,3,3,3,4,5,6],

arr2 = ;

for(var i = 0,len = arr1.length; i< len; i++)

}document.write(arr2); // 1,2,3,4,5,6

偽陣列(類陣列):無法直接呼叫陣列方法或期望length屬性有什麼特殊的行為,但仍可以對真正陣列遍歷方法來遍歷它們。典型的是函式的argument引數,還有像呼叫getelementsbytagname,document.childnodes之類的,它們都返回nodelist物件都屬於偽陣列。可以使用array.prototype.slice.call(fakearray)將陣列轉化為真正的array物件。

function

log()

;

caller是返回乙個對函式的引用,該函式呼叫了當前函式;

callee是返回正在被執行的function函式,也就是所指定的function物件的正文。

sessionstorage用於本地儲存乙個會話(session)中的資料,這些資料只有在同乙個會話中的頁面才能訪問並且當會話結束後資料也隨之銷毀。因此sessionstorage不是一種持久化的本地儲存,僅僅是會話級別的儲存。而localstorage用於持久化的本地儲存,除非主動刪除資料,否則資料是永遠不會過期的。

web storage和cookie的區別

web storage的概念和cookie相似,區別是它是為了更大容量儲存設計的。cookie的大小是受限的,並且每次你請求乙個新的頁面的時候cookie都會被傳送過去,這樣無形中浪費了頻寬,另外cookie還需要指定作用域,不可以跨域呼叫。

除此之外,web storage擁有setitem,getitem,removeitem,clear等方法,不像cookie需要前端開發者自己封裝setcookie,getcookie。但是cookie也是不可以或缺的:cookie的作用是與伺服器進行互動,作為http規範的一部分而存在 ,而web storage僅僅是為了在本地「儲存」資料而生。

關於快排演算法的詳細說明,可以參考阮一峰老師的文章快速排序

"快速排序"的思想很簡單,整個排序過程只需要三步:

(1)在資料集之中,選擇乙個元素作為"基準"(pivot)。

(2)所有小於"基準"的元素,都移到"基準"的左邊;所有大於"基準"的元素,都移到"基準"的右邊。

(3)對"基準"左邊和右邊的兩個子集,不斷重複第一步和第二步,直到所有子集只剩下乙個元素為止。

var

str =

"aaaabbbccccddfgh"

;var

obj =

{};for

(var

i=0;i<

str.length

;i++)

else

; obj[v].count=1

; obj[v].value

= v;}}

for(key in

obj)

function

trim

(str)

}

回到頂部

基本流程:

a. 網域名稱解析

b. 發起tcp的3次握手

c. 建立tcp連線後發起http請求

d. 伺服器端響應http請求,瀏覽器得到html**

e. 瀏覽器解析html**,並請求html**中的資源

f. 瀏覽器對頁面進行渲染呈現給使用者

a. 前端是最貼近使用者的程式設計師,前端的能力就是能讓產品從 90分進化到 100 分,甚至更好

b. 參與專案,快速高質量完成實現效果圖,精確到1px;

c. 與團隊成員,ui設計,產品經理的溝通;

d. 做好的頁面結構,頁面重構和使用者體驗;

e. 處理hack,相容、寫出優美的**格式;

f. 針對伺服器的優化、擁抱最新前端技術。

WEB前端知識總結

1 css3中設定max width 為讓更好適應螢幕 2 position absolute 讓元素脫離,z index屬性可以改變堆疊順序 3 如何讓元素透明 background color transparent 4 設定透明度 opacity 0.5 5 後台頁面可以使用bootstrap...

web前端知識2

jquery 常用方法 ajax jquery中,d ocum ent rea dy 是什麼意 思?和w indo w.on load 的區別?還有其他 什麼寫法 或者替代 方法?document ready html結構已完全載入時,指令碼就可以執行。window.onload 直到所有的東西都載...

web前端知識(一)

http 協議 http協議 hypertext transfer protocol 叫超文字傳輸協議,使用在web伺服器和web瀏覽器上,在計算機能夠通過web交換資訊的一套規則和過程。web瀏覽器 web瀏覽器是乙個連線到web伺服器上,向web伺服器請求資訊,然後解析返回來的html標記,並將...