web前端中固定定位的英文

A. CSS中position屬性詳解

根據W3C的解釋為：position 屬性規定元素的定位類型，把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。

可能的值

absolute：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

relative：生成相對定位的元素，相對於其正常位置進行定位。

static：默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

inherit：規定應該從父元素繼承 position 屬性的值。

我們用的最多的absolute和relative，接下來可以通過具體例子來更加直觀地體現。

舉例

一：絕對定位

position: absolute；絕對定位：絕對定位是相對於元素最近的已定位的祖先元素（即是設置了絕對定位或者相對定位的祖先元素）。如果元素沒有已定位的祖先元素，那麼它的位置則是相對於最初的包含塊（body）。

絕對定位本身與文檔流無關，因此不佔空間，普通文檔流中的元素的布局就當絕對定位的元素不存時一樣，所以 它們可以覆蓋頁面上其他的元素，且可以通過z-index屬性來控制這些層的對方順序。

#box_relative {
position: absolute;
left: 30px;
top: 20px;
}

注意

position:absolute，float會隱式地改變display的類型（display：none除外）。即是當元素設置position:absolute、float:left、float:right中任意一個時，都會讓元素以display:inline-block的方式顯示（特點是：可以設置長寬，默認寬度不佔滿父元素）。這時，即使故意設置display:inline; display:block都是無效的。

但是float在IE6下的雙邊距bug就是用display:inline; 來解決的。position:relative不會隱式改變display的類型。

B. Web前端工程師應該掌握的英語詞彙有哪些

今天小編要跟大家分享的文章是關於Web前端工程師應該掌握的英語詞彙有哪些?熟悉編程工作的小夥伴都知道，英語並不會影響到你找到滿意的工作，升職與加薪。但程序員程序員編程是離不開英文和數字表達式的，所以掌握開發過程中常用的英語詞彙還是非常重要的。下面小編就來跟大家說一說Web前端工程師在工作中都會遇到哪些英語詞彙。讓我們一起來學習一下吧~

A:


appendChild放置到某元素最後attribute屬性addEventListener添加偵聽器assign賦值alert
彈出框append添加appendTo添加到absolute絕對的active活動的，激活的，標記的一個偽類align對齊alpha
透明度，半透明anchor錨記標記是這個單詞的縮寫anchor錨記a標記是這個單詞的縮寫arrow箭頭auto自動appName程序名
appCodeName程序代號appVersion程序版本appAgent程序代理abs取絕對值array數組


B:


back超過范圍的三次方緩動bounce指數衰減的反彈緩動before在...之前blur當輸入框失焦的時候觸發BOM
全稱BrowserObjectModel瀏覽器對象模型blur失焦bind綁定background背景border邊框border邊框
banner頁面上的一個橫條both二者都是clear屬性的一個屬性值both二者都是clear屬性的一個屬性值black黑色bottom
底部，是一個CSS屬性blink閃爍box盒子block塊br換行標記blue藍色bug軟體程序中的錯誤body主體，一個HTML
標記building建立bold粗體button按鈕break中斷bool布爾boolean布爾bubble冒泡


C:


cubic三次方的緩動circular圓形曲線的緩動chain當執行一種緩動效果後可以繼續使用另一個緩動效果createElement
創建新元素createTextNode創建文本節點childNodes返回子節點cancelBubble刪除冒泡click點擊事件change
內容發生改變，並失焦後才觸發該事件contextmenu右擊事件clientX游標相對於該網頁的水平位置clientY游標相對於該網頁的垂直位置
close關閉當前頁面confirm輸入框clientWidth獲取元素寬度clientHeight獲取元素的高度childNodes
獲取所有子節點children返回子元素cloneNode復制節點Clone克隆、復制chekbox復選框cell表格的單元格color
顏色center中間，居中connected連接的contact聯系child孩子content內容circle圓圈crosshair
十字叉絲class類別css層疊樣式表clear清除cursor滑鼠指針cm厘米centimeter厘米continue繼續
close關閉ceil向上取整charAt獲取某位置字元


D:


DOM全稱DocumentObjectModel文檔對象模型default不執行DOMMouseScroll在火狐瀏覽器中的滾輪事件
document文件，文檔dbclick雙擊dashed虛線display顯示，CSS的一個屬decimal十進制division
分區，div就是這個單詞的縮寫decoration裝飾document文檔default默認的definition定義dotted點線
double雙線design設計do做


E:


exponential指數曲線的緩動elastic指數衰減的正弦曲線緩動error錯誤過失element元素else否則


F:


focus當輸入框聚焦的時候觸發firstChild第一個子節點firstElementChild返回第一個標簽節點function()
函數father父親float浮動filter濾鏡，過濾器font字體first第一個for在循環語句中的一個保留字fixed固定的
four4個function函數，功能


G:


getAttribute獲取屬性getElementsByClassName根據class標簽獲取元素getElementsByName
通過元素的Name屬性值getElementById通過元素Id，唯一性getElementsByTagName通過標簽名查找元素gif一種圖像格式
green綠色gray灰色


H:


history對象host主機height高度hover盤旋;徘徊;猶豫hidden()隱藏hack常用於CSS
中的一些招數，或者類似於偏方的技巧here這里hand手hidden被隱藏head頭部home首頁height高度horizontal
水平的help幫助hover滑鼠指針經過時的效果，或稱為「懸停狀態」


I:


input當輸入的時候實時觸發innerHeight內部高度innerWidth內部寬度in從0開始加速的緩動inOut
前半段從0開始加速，後半段減速到0的緩動infinity無線循環insertBefore插入到某元素前image圖像inline行內
important重要的inner內部的indent縮進italic義大利體，斜體index索引if如果int：整數
indexOf：判斷某字元的首次位置


J:


jpg一種圖像格式justify兩端對齊justify兩端對齊


K:


keyCode按鍵編碼keydown按下按鍵keyup按下按鍵抬起


L:


linear勻速lastChild返回最後一個子節點lastElementChild返回最後一個標簽節點language語言line
線last最後一個link鏈接left左邊list列表length長度lowercase小寫level級別


M:


mouseover移動到元素上mouseout從元素上移開mousemove移動滑鼠mousewheel在其他瀏覽器的滾輪事件
mousedown滑鼠按下事件mouseup滑鼠抬起事件margin外邊距millimeter毫米max最大的min最小的medium
中間model模型menu菜單move移動middle中間


N:


nextElementSibling返回下一個兄弟元素nextSibling返回下一個兄弟節點nextElementSibling
下一個兄弟元素nodeValue節點值nodeType節點類型nodeName標簽名稱navigation導航none無，不，沒有new
新的normal標准number數字null空，空值new新建


O:


outerHeight整個高度outerWIdth整個寬度open打開新頁面onscroll窗口滾動事件onresize
窗口大小監聽事件onload圖片載入事件offsetLeft獲取元素距離左側的距離offsetTop獲取元素距離頂部的距離offsetWidth
獲取元素自身寬度offsetHeigh獲取元素自身高度onload在裝載時onclick在點擊時ondblclick在雙擊時
onmouseover在滑鼠進入時onmouseout在滑鼠離開時onmousemove在滑鼠移動時onmousedown在滑鼠按下時
onmouseup在滑鼠抬起時onkeydown在按鍵按下時onkeyup在按鍵抬起時onkeypress在按鍵時onsubmit在提交時
onchange在改變時onfocus在獲得焦點時onblur在失去焦點時onscroll窗口滾動事件onresize窗口大小監聽事件out
減速到0的緩動onStart開始事件onComplete完成事件onStop停止事件onUpdate更新事件object對象
optional可選的oblique一種斜體orange橙色one一個outer外面的only僅僅overflow溢出open
打開


P:


previous前一個prevent阻止pageX游標相對於該網頁的水平位置pageY游標相對於該網頁的垂直位置port埠
protocol協議prompt提示框parentNode返回父級節點parentElementNode獲取已知節點的父節點
previousSibling返回上一個兄弟節點previousElementSibling返回上一個兄弟元素password密碼position
位置prepend預先padding內邊距progress進度point點public公開的pointer指針，指示器purple
紫色position定位，位置pop彈出push壓入open打開option選項


Q:


quadratic二次方的緩動quintic五次方的緩動quartic四次方的緩動querySelector根據標簽名獲取第一個元素
querySelectorAll獲取所有標簽名的元素


R:


repeat次數remove刪除當前節點replaceChild替換節點removeEventListener取消偵聽器reload
刷新removeAttribute刪除屬性removeChild刪除父節點的某個子節點radio視頻red紅色resize重新設置大小
relative相對的right右邊repeat重復，平鋪row行replacement替換return返回random隨機round
取整


S:


sinusoidal正弦曲線的緩動start開始stop停止setinterval時間函數sibling兄弟scrollTop
獲取文檔滾動高度screenX游標相對於該屏幕的水平位置screenY游標相對於該屏幕的垂直位置setAttribute設置屬性
scrollHeight獲取文檔整體高度scrollTop獲取文檔滾動高度scrollLeft元素左邊界setAttribute設置節點上的屬性
submit提交scroll滾動shadow陰影silver銀色special特殊的size尺寸square方塊solid
固體，實線static靜態的solution方案strong強壯，加粗的son兒子style樣式span一個HTML標記switch
切換setInterval設置反復性定時器setTimeout設置一次性定時器srcElement源對象，事件源split分割substr
截取字元串substring截取字元串sqrt取開方status狀態sort排序slice切片，劃分splice鉸接，粘接


T:


textContent文本添加文字table表格title標題td單元格的HTML標記top頂部toLowerCase
轉換為小寫toUpperCase轉換為大寫text文本tr表格中「行」的HTML標記thick粗的transitional過渡的thin
細的two兩個three三個type類型through穿過this這個，當前typeof類型


U:


underline下劃線uppercase大寫upper上面的url網址


V:


vertical豎直的visited訪問過的var定義變數


W:


wrap包裹window窗口white白色width寬度while當...的時候write寫入


Y:


yellow黃色


以上就是小編今天為大家分享的關於Web前端工程師應該掌握的英語詞彙有哪些?的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助。想要了解更多Web相關知識記得關注北大青鳥Web培訓官網哦~


來源：張培躍

C. web前端怎麼用相對位置position

其實不難
這個有幾個屬性
有的默認定位
有是絕對定位
有的相對定位
還有固定定位
fixed 固定定位是針對body 體的 全屏定位
另兩個結合使用的
絕對正常是使用的相對內的
了爭更多，可以聯系我。。

D. 入門Web前端要學習的知識有哪些

今天小編要跟大家分享的文章是關於入門web前端要學習的知識有哪些?准備學習web前端知識的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。

1、HTML常用標簽


語言是什麼、Web前端開發語言、HTML超文本標記語言、網頁主體結構、常用標簽、超鏈接(a標簽)、Img圖片標簽


2、盒子模型


初探Div盒子模型、css樣式、簡單css樣式、盒子模型Border邊框講解、盒子模型外邊距
盒子模型內邊距、盒子模型佔位計算、ul無序列表、ol有序列表、dl定義列表、補充知識(css)


3、樣式初始化及display+外邊距合並


樣式初始化、元素類型轉換、內聯元素對於以下屬性特殊化、塊級元素和內聯元素的具體應用控制元素水平方向居中、盒子模型外邊距合並原則


4、元素選擇符+背景


HTML命名規范、行業命名規范、選擇器初級、background背景樣式


5、css樣式(Font+Text)+特殊符號


font字體樣式、text文本樣式、特殊符號、css樣式查詢表


6、選擇器高級及a偽類


css選擇器、a偽類


7、選擇器高級應用&樣式優先順序常用css3


選擇器優先順序、樣式的多種形式、樣式優先順序排序、常用css3


8、浮動


浮動概況、浮動的一般情況、浮動的特殊情況、浮動對文字的影響float浮動後的特徵和inlink-block
特徵對比、清除浮動、清除浮動的多種辦法、min-width的運用


9、定位


position定位概況、static、相對定位relative、絕對定位absolute、固定定位、z-index層的位置關系


10、vertical-alignimg特徵cursoropacity


img特徵、vertical-align垂直對齊方式、cursor指針樣式、opacity透明度


11、表單


form表單、form中的控制項


12、表格


table表格結構、table樣式重置、table的默認特徵、table單元格合並、display:table的特徵


13、frameset框架


iframe內聯框架、frameset框架集、frame子框架、自適應框架實例


14、阿里圖標+css高級應用


CSS繼承指的是、css重用、組件化開發：網頁中不同功能模塊，寫入不同的css文件、ico網站logo、阿里圖標


15、ps工具常用技巧


安裝PS、菜單欄介紹、工具欄工具名稱及快捷鍵、蒙版，鏈接圖層，圖層分組、圖層右鍵菜單、混合模式、菜單欄詳細講解


16、終結篇


網站上線(空間，域名)如何購買空間和域名，網站上傳工具ftp使用，最終實現網站上線


以上就是小編今天為大家分享的關於入門web前端要學習的知識有哪些的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利！

E. Web前端知識體系簡介

今天小編要跟大家分享的文章是關於Web前端知識體系簡介。Web前端技術由html、css和javascript三大部分構成，是一個龐大而復雜的技術體系，其復雜程度不低於任何一門後端語言。而我們在學習它的時候往往是先從某一個點切入，然後不斷地接觸和學習新的知識點，因此對於初學者很難理清楚整個體系的脈絡結構。本文將對Web前端知識體系進行簡單的梳理，對應的每個知識點點到為止，不作詳細介紹。目的是幫助大家審查自己的知識結構是否完善，如有遺漏或不正確的地方，希望共勉。下面來和小編一起看一看吧！

一、JAVASCRIPT篇


0、基礎語法


Javascript基礎語法包括：變數定義、數據類型、循環、選擇、內置對象等。


數據類型有string,number,boolean,null,undefined,object等。其中，string,number和boolean是基礎類型,null和undefined是JS中的兩個特殊類型,object是引用類型。
Javascript可以通過typeof來判斷基礎數據類型，但不能夠准確判斷引用類型,
因此需要用到另外一個方法，那就是Object的toString,關於數據類型及其判斷可以參考以下博客：數據類型詳解和判斷JS數據類型的四種方法


JS常用的內置對象有Date、Array、RegExp等。一般來講，Date和Array用的最頻繁，正則表達式RegExp是處理字元串的利器。
關於數據和正則表達式的用法可以參考博客：ES5對數組增強的9個API和JS正則表達式精簡


1、函數原型鏈


Javascript雖然沒有繼承概念，但Javascript在函數Function對象中建立了原型對象prototype，並以Function對象為主線，從上至下，在內部構建了一條原型鏈。


簡單來說就是建立了變數查找機制，當訪問一個對象的屬性時，先查找對象本身是否存在，如果不存在就去該對象所在的原型連上去找，直到Object對象為止，如果都沒有找到該屬性才會返回undefined。因此我們經常會利用函數的原型機制來實現JS繼承。關於函數原型鏈可參考博客：JS原型對象和原型鏈


2、函數作用域


函數作用域就是變數在聲明它們的函數體以及這個函數體嵌套的任意函數體內都是有定義的。在JS中沒有會塊級作用域，只有函數作用域，因此JS中還存在著另外一種怪異現象，那就是變數提升。關於作用域的介紹請參考博客：函數的作用域和作用域鏈


3、函數指針this


this存在於函數中，它指向的是該函數在運行時被調用的那個對象。在實際項目中，遇到this的坑比較多，因此需要對this作深入的理解。


Function對象還提供了call、apply和bind等方法來改變函數的this指向，其中call和apply主動執行函數，bind一般在事件回調中使用，而call和apply的區別只是參數的傳遞方式不同。關於call,apply和bind的用戶請參考博客：詳解JS的call,apply和bind


4、構造函數new


JS中的函數即可以是構造函數又可以當作普通函數來調用，當使用new來創建對象時，對應的函數就是構造函數，通過對象來調用時就是普通函數。


普通函數的創建有：顯式聲明、匿名定義、newFunction()等三種方式。


當通過new來創建一個新對象時，JS底層將新對象的原型鏈指向了構造函數的原型對象，於是就在新對象和函數對象之間建立了一條原型鏈，通過新對象可以訪問到函數對象原型prototype中的方法和屬性。new的詳細介紹請參考博客：理解JS中的new運算符


5、閉包


閉包其實是一個主動執行的代碼塊，這個代碼塊的特殊之處是可以永久保存局部變數，但又不污染全局變數，可以形成一個獨立的執行過程，因此我們經常用閉包來定義組件。


關於閉包的介紹請參考：干貨分享：讓你分分鍾學會JS閉包


6、單線程和非同步隊列


setTimeout和setInterval是JS內置的兩個定時器，使用很簡單，但這兩個方法背後的原理卻不簡單。


我們知道，JS是單線程語言，在瀏覽器中，當JS代碼被載入時，瀏覽器會為其分配一個主線程來執行任務(函數)，主線程會形成一個全局執行環境，執行環境採用棧的方式將待執行任務按順序依次來執行。


但在瀏覽器中有一些任務是非常耗時的，比如http請求、定時器、事件回調等，為了保證其他任務的執行效率不被影響，JS在執行環境中維護了一個非同步隊列(也叫工作線程)，並將這些任務放入隊列中進行等待，這些任務的執行時機並不確定，只有當主線程的任務執行完成以後，才會去檢查非同步隊列中的任務是否需要開始執行。


這就是為什麼setTimeout(fn,0)始終要等到最後執行的原因。關於單線程和非同步隊列問題請參考：setTimeout(0)


7、非同步通訊Ajax技術


Ajax是瀏覽器專門用來和伺服器進行交互的非同步通訊技術，其核心對象是XMLHttpRequest,通過該對象可以創建一個Ajax請求。為了防止XSS攻擊，瀏覽器對Ajax做了限制，不允許Ajax跨域請求伺服器,就是只能訪問當前域名下的url。


當然，如果確信你的站點不存在跨域的風險，可以在服務端主動開啟跨域請求，也可以通過CORS或JSONP來實現。


JSONP是利用腳本(script)跨域能力來模擬Ajax請求。


CORS是一個W3C標准，全稱是"跨域資源共享"(Cross-originresource
sharing)。它允許瀏覽器向跨源伺服器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。關於CORS的介紹請參考：跨域資源共享
CORS詳解


8、DOM對象document


document對象里保存著整個Web頁面dom結構，在頁面上所有的元素最終都會映射為一個dom對象。
document也提供了很多api來查找特定的dom對象，比如getElementById,querySelector等等。


9、事件系統Event


事件是用戶與頁面交互的基礎，到目前為止，DOM事件從PC端的滑鼠事件(mouse)發展到移動端的觸摸事件(touch)
和手勢事件(guesture)


由於DOM結構可能會多層嵌套，因此也衍生出了兩種事件流：事件捕獲和事件冒泡，後者最常用。利用事件冒泡機制可以實現很多功能，比如頁面點擊統計。關於兩種事件流的介紹請參考：事件冒泡和捕獲


除此之外，在頁面初始化、滾動、隱藏、返回等操作時分別內置了onload/onDOMContentLoaded、onscroll、onvisibility和onhashchange等事件，如果想要捕獲這些事件，需要通過addEventLisener/attachEvent來進行綁定。


10、全局對象window


在JS中，當一段JS代碼在瀏覽器中被載入執行，JS引擎會在內容中構建一個全局執行環境，執行環境的作用是保證所有的函數能按照正確的順序被執行，而window對象則是這個執行環境中的一個全局對象，window對象中內置了很多操作api和對象，document對象就是其中一個。關於JS執行環境的介紹請參考博客：深入理解JS執行細節


二、CSS篇


css是用來對html進行修飾的一門語言。


1、選擇器


css的選擇器有很多種，常用的有類選擇器、標簽選擇器、ID選擇器、後代選擇器、群組選擇器、偽類選擇器(before/after)、兄弟選擇器(+~)、屬性選擇器等等。


2、定位


定位一般有相對定位(relative)、絕對定位(absolute)、固定定位(fixed),
relative和absolute在移動端用的最多，fixed在移動端的兼容性有問題，因此不推薦使用，在移動端替代fixed的方案是
absolute+內部滾動。


3、浮動


設置float為left或right，就能使該元素脫離文檔流，向左或向右浮動。一般在做宮格模式布局時會用到，如果子元素全部設置為浮動，則父元素是塌陷的，這時就需要清除浮動，清除浮動的方法也很多，常用的方法是在元素末尾加空元素設置clear:both,
更高級一點的就給父容器設置before/after來模擬一個空元素，還可以直接設置overflow:auto/hidden。除過浮動可以實現宮格模式，行內盒子(inline-block)和table也可以。


4、盒子模型


盒子模型是css最重要的一個概念，也是css布局的基石。
常見的盒子模型有塊級盒子(block)和行內盒子(inline-block)，盒子最關鍵的幾個屬性包括margin、border、padding和content,這幾個元素可以設置盒子和盒子之間的關系以及盒子和內容之間的關系。還有一個問題是計算盒子的大小，需要注意的是，box-sizing屬性的設置會影響盒子的width和height。只有普通文檔流中塊框的垂直外邊距才會發生外邊距合並。行內框、浮動框或絕對定位之間的外邊距不會合並。


5、Flex布局


Flex布局的容器是一個伸縮容器，首先容器本身會更具容器中的元素動態設置自身大小;然後當Flex容器被應用一個大小時(width和height)，將會自動調整容器中的元素適應新大小。Flex容器也可以設置伸縮比例和固定寬度，還可以設置容器中元素的排列方向(橫向和縱向)和是否支持元素的自動換行。有了這個神器，做頁面布局的可以方便很多了。注意，設為Flex布局以後，子元素的float、clear和vertical-align屬性將失效。


6、transition(過渡)和transform(旋轉)


應用transform可以對元素進行平移(translate)、旋轉(rotate)、放大縮小(scale)、傾斜(skew)等處理，而transition使css屬性值(包括transform)在一段時間內平滑的過渡。使用transition和transform就可以實現頁面的滑動切換效果。


7、動畫Animation


Animation首先需要設置一個動畫函數，然後以這個動畫的方式來改變元素的css屬性之的變化，動畫可以被設置為永久循環演示。
和transition相比，animation設置動畫效果更靈活更豐富，二者還有一個區別是：transition只能通過主動改變元素的css值才能觸發動畫效果，而animation一旦被應用，就開始執行動畫。


8、Sprite圖


對於大型站點，為了減少http請求的次數，一般會將常用的小圖標排到一個大圖中，頁面載入時只需請求一次網路，然後在css中通過設置background-position來控制顯示所需要的小圖標。


9、字體圖標iconfont


所謂字體圖標就是將常用的圖標轉化為字體資源存在文件中，通過在CSS中引用該字體文件，然後可以直接通過控制字體的css屬性來設置圖標的樣式。


三、HTML篇


1、Web語義化和SEO


html
常規標簽有html,head,body,div,span,table,ul,ol,dl,p,b,h1~h6,strong,form,input,img,em,i
等等，另外html5還新增了很多語義化的標簽，比如header,acticle,aside,section,footer,audio,radio
等等。


Web語義化是指使用語義恰當的標簽，使頁面有良好的結構，頁面元素有含義，能夠讓人和搜索引擎都容易理解。


SEO是指在了解搜索引擎自然排名機制的基礎之上，對網站進行內部及外部的調整優化，改進網站在搜索引擎中關鍵詞的自然排名，獲得更多的展現量，吸引更多目標客戶點擊訪問網站，從而達到互聯網營銷及品牌建設的目標。


搜索引擎通過爬蟲技術獲取的頁面就是由一堆html標簽組成的代碼,，人可以通過可視化的方式來判斷頁面上哪些內容是重點，而機器做不到。但搜索引擎會根據標簽的含義來判斷內容的權重，因此，在合適的位置使用恰當的標簽，使整個頁面的語義明確，結構清晰，搜索引擎才能正確識別頁面中的重要內容，並予以較高的權值。比如h1~h6這幾個標簽在SEO中的權值非常高，用它們作頁面的標題就是一個簡單的SEO優化。


2、本地存儲


本地存儲最原始的方式就是cookie,cookie是存放在本地瀏覽器的一段文本，數據以鍵值對的形式保存，可以設置過期時間。但是cookie
不適合大量數據的存儲，因為每次請求一次頁面，cookie都會發送給伺服器，這使得cookie
速度很慢而且效率也不高。因此cookie的大小被限制為4k左右(不同瀏覽器可能不同,分HOST)，如下所示：


·Firefox和Safari允許cookie多達4097個位元組，包括名(name)、值(value)和等號。


·Opera允許cookie多達4096個位元組，包括：名(name)、值(value)和等號。


·InternetExplorer允許cookie多達4095個位元組，包括：名(name)、值(value)和等號。


在所有瀏覽器中，任何cookie大小超過限制都被忽略，且永遠不會被設置。


html5提供了兩種在客戶端存儲數據的新方法：localStorage和sessionStorage,它們都是以key/value
的形式來存儲數據，前者是永久存儲，後者的存儲期限僅限於瀏覽器會話(session),即當瀏覽器窗口關閉後，sessionStorage中的數據被清除。


localStorage的存儲空間大約5M左右(不同瀏覽器可能不同，分
HOST)，這個相當於一個5M大小的前端頁面的資料庫，相比於cookie可以節約帶寬，但localStorage在瀏覽器隱私模式下是不可讀取的，當存儲數據超過了localStorage的存儲空間後會拋出異常。


此外，H5還提供了逆天的Websql和indexedDB,允許前端以關系型資料庫的方式來存儲本地數據，相對來說，這個功能目前應用的場景比較少，此處不作介紹。


3、瀏覽器緩存機制


瀏覽器緩存機制是指通過HTTP協議頭里的Cache-Control(或Expires)和Last-Modified(或
Etag)等欄位來控制文件緩存的機制。


Cache-Control用於控制文件在本地緩存有效時長。最常見的，比如伺服器回包：Cache-Control:max-age=600
表示文件在本地應該緩存，且有效時長是600秒(從發出請求算起)。在接下來600秒內，如果有請求這個資源，瀏覽器不會發出HTTP
請求，而是直接使用本地緩存的文件。


Last-Modified是標識文件在伺服器上的最新更新時間。下次請求時，如果文件緩存過期，瀏覽器通過If-Modified-Since
欄位帶上這個時間，發送給伺服器，由伺服器比較時間戳來判斷文件是否有修改。如果沒有修改，伺服器返回304告訴瀏覽器繼續使用緩存;如果有修改，則返回200，同時返回最新的文件。


Cache-Control通常與Last-Modified一起使用。一個用於控制緩存有效時間，一個在緩存失效後，向服務查詢是否有更新。


Cache-Control還有一個同功能的欄位：Expires。Expires的值一個絕對的時間點，如：Expires:Thu,10Nov
201508:45:11GMT，表示在這個時間點之前，緩存都是有效的。


Expires是HTTP1.0標准中的欄位，Cache-Control是HTTP1.1
標准中新加的欄位，功能一樣，都是控制緩存的有效時間。當這兩個欄位同時出現時，Cache-Control是高優化級的。


Etag也是和Last-Modified一樣，對文件進行標識的欄位。不同的是，Etag
的取值是一個對文件進行標識的特徵字串。在向伺服器查詢文件是否有更新時，瀏覽器通過If-None-Match
欄位把特徵字串發送給伺服器，由伺服器和文件最新特徵字串進行匹配，來判斷文件是否有更新。沒有更新回包304，有更新回包200。Etag和
Last-Modified可根據需求使用一個或兩個同時使用。兩個同時使用時，只要滿足基中一個條件，就認為文件沒有更新。


另外有兩種特殊的情況：


·
手動刷新頁面(F5)，瀏覽器會直接認為緩存已經過期(可能緩存還沒有過期)，在請求中加上欄位：Cache-Control:max-age=0，發包向伺服器查詢是否有文件是否有更新。


·
強制刷新頁面(Ctrl+F5)，瀏覽器會直接忽略本地的緩存(有緩存也會認為本地沒有緩存)，在請求中加上欄位：Cache-Control:no-cache(或
Pragma:no-cache)，發包向服務重新拉取文件。


4、HTML5離線緩存


HTML5離線緩存又叫Application
Cache，是從瀏覽器的緩存中分出來的一塊緩存區，如果要在這個緩存中保存數據，可以使用一個描述文件(manifest
file)，列出要下載和緩存的資源。


manifest文件是簡單的文本文件，它告知瀏覽器被緩存的內容(以及不緩存的內容)。manifest文件可分為三個部分：


-CACHEMANIFEST-在此標題下列出的文件將在首次下載後進行緩存


-NETWORK-在此標題下列出的文件需要與伺服器的連接，且不會被緩存


-FALLBACK-在此標題下列出的文件規定當頁面無法訪問時的回退頁面(比如404頁面)


離線緩存為應用帶來三個優勢：


·離線瀏覽-用戶可在應用離線時使用它們


·速度-已緩存資源載入得更快


·減少伺服器負載-瀏覽器將只從伺服器下載更新過或更改過的資源。


5、Canvas和SVG


Canvas通過Javascript來繪制2D圖形。Canvas是逐像素進行渲染的。在Canvas
中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。


SVG是一種使用XML描述2D圖形的語言。SVG基於XML，這意味著SVGDOM中的每個元素都是可用的。你可以為某個元素附加
JavaScript事件處理器。在SVG中，每個被繪制的圖形均被視為對象。如果SVG對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。


Canvas和SVG相比，canvas更依賴於解析度，不支持事件處理器，文本渲染能力弱，比較適合密集型游戲，其中的許多對象會被頻繁繪制，而svg則比較適用於類似谷歌地圖帶有大型渲染區域的應用程序。


以上就是小編今天為大家分享的Web前端知識體系簡介的文章，希望本篇文章能夠對正在從事Web工作和學習Web前端知識的小夥伴們有所幫助。想要了解更多Web前端知識記得關注北大青鳥Web培訓官網。最後祝願小夥伴們工作順利！


原文地址：#/onepixel/p/7021506.html

F. Web前端中關於url、href、src的知識匯總

今天小編要跟大家分享的文章是Web前端中關於url、href、src的知識匯總。熟悉web前端的小夥伴們一定不會對這三個內容陌生。但是對於剛剛接觸web的小夥伴肯定不是很了解，今天小編就為大家准備了這篇文章讓我們一起來看一看關於url、href、src的知識匯總。

一、URL的概念


統一資源定位符(或稱統一資源定位器/定位地址、URL地址等，英語：UniformResource
Locator，常縮寫為URL)，有時也被俗稱為網頁地址(網址)。如同在網路上的門牌，是網際網路上標準的資源的地址(Address)。


二、URL的格式


2.1標准格式


協議類型:[//伺服器地址[:埠號]][/資源層級UNIX文件路徑]文件名?查詢


2.2完整格式


協議類型:[//[訪問資源需要的憑證信息@]伺服器地址[:埠號]][/資源層級UNIX文件路徑]文件名?查詢


其中【訪問憑證信息@;:埠號;?查詢;#片段ID】都屬於選填項。


三、URL的語法規則


比如網址#/html/index.asp，必須遵守以下的語法規則：


scheme://host.domain:port/path/filename


3.1說明


(1)scheme-定義網際網路服務的類型。最常見的類型是http(2)host-定義域主機(http的默認主機是www)
(3)domain-定義網際網路域名，比如w3school.com.cn(4):port-定義主機上的埠號(http的默認埠號是80)
(5)path-定義伺服器上的路徑(如果省略，則文檔必須位於網站的根目錄中)。(6)filename-定義文檔/資源的名稱


3.2URLSchemes


以下是其中一些最流行的scheme：


Scheme訪問用於...


http超文本傳輸協議以http://開頭的普通網頁。不加密。


https安全超文本傳輸協議安全網頁。加密所有信息交換。


ftp文件傳輸協議用於將文件下載或上傳至網站。


file您計算機上的文件。


四、URL的類型


4.1絕對URL


絕對URL(absoluteURL)顯示文件的完整路徑，這意味著絕對URL本身所在的位置與被引用的實際文件的位置無關。


4.2相對URL


相對URL(relativeURL)以包含URL本身的文件夾的位置為參考點，描述目標文件夾的位置。


一般來說，對於同一伺服器上的文件，應該總是使用相對URL，它們更容易輸入，而且在將頁面從本地系統轉移到伺服器上時更方便，只要每個文件的相對位置保持不變，鏈接就仍然是有效地。


以下為建立路徑所使用的幾個特殊符號，及其所代表的意義。


(1).：代表目前所在的目錄，相對路徑。如：文本或/>


(2)..：代表上一層目錄，相對路徑。如：文本或/>


(3)../../：代表的是上一層目錄的上一層目錄，相對路徑。如：


(4)/：代表根目錄，絕對路徑。如：[文本](/abc)或


五、href的概念


5.1規范解釋


href(Hypertext
Reference)指定網路資源的位置，從而在當前元素或者當前文檔和由當前屬性定義的需要的錨點或資源之間定義一個鏈接或者關系。


5.2通俗理解


href目的不是為了引用資源，而是為了建立聯系，讓當前標簽能夠鏈接到目標地址。


六、src的概念


source(縮寫)，指向外部資源的位置，指向的內容將會應用到文檔中當前標簽所在位置。


七、href和src的區別


7.1請求資源類型不同


(1)href指向網路資源所在位置，建立和當前元素(錨點)或當前文檔(鏈接)之間的聯系。


(2)在請求src資源時會將其指向的資源下載並應用到文檔中，比如JavaScript腳本，img圖片;


7.2作用結果不同


(1)href用於在當前文檔和引用資源之間確立聯系;


(2)src用於替換當前內容;


7.3瀏覽器解析方式不同


(1)若在文檔中添加，瀏覽器會識別該文檔為CSS文件，就會並行下載資源並且不會停止對當前文檔的處理。這也是為什麼建議使用link方式載入
CSS，而不是使用@import方式。


(2)當瀏覽器解析到
，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等也如此，類似於將所指向資源應用到當前內容。這也是為什麼建議把js
腳本放在底部而不是頭部的原因。


八、link和@import的區別


兩者都是外部引用CSS的方式，但是存在一定的區別：


(1)link是XHTML標簽，除了能夠載入CSS，還可以定義RSS等其他事務;而@import屬於CSS范疇，只可以載入CSS。


(2)link引用CSS時，在頁面載入時同時載入;@import需要頁面完全載入以後再載入。


(3)link是XHTML標簽，無兼容問題;@import則是在CSS2.1提出的，低版本的瀏覽器不支持。


(4)link支持使用Javascript控制DOM改變樣式;而@import不支持。


以上就是小編今天為大家分享的關於Web前端中關於url、href、src的知識匯總的文章，希望本篇文章能夠對正在從事web學習和工作的小夥伴們有所幫助，想要了解更多web相關知識記得關注北大青鳥web培訓官網哦~


作者：WEBING


#/a/1190000013845173


*聲明：內容與圖片均來源於網路(部分內容有修改)，版權歸原作者所有，如來源信息有誤或侵犯權益，請聯系我們刪除或授權事宜。