服務(wù)支持

020-39182790

技術(shù)文檔您現(xiàn)在的位置：首頁(yè) > 服務(wù)支持 > 技術(shù)文檔

網(wǎng)頁(yè)前端HTML、JS、CSS應(yīng)用的主要知識(shí)點(diǎn)

作者：織晶客服部發(fā)布于：2020/11/14 11:06:12 點(diǎn)擊量：來(lái)源：織晶網(wǎng)絡(luò)

1、前端頁(yè)面有哪三層構(gòu)成？前端頁(yè)面有哪三層構(gòu)成？ HTML結(jié)構(gòu)層、CSS表示層、JS行為層。

2、瀏覽器內(nèi)核(渲染引擎)

①I(mǎi)E內(nèi)核 -- Trident

②Firefox內(nèi)核 -- Gecko

③Safari內(nèi)核(曾經(jīng)Chrome內(nèi)核) -- Webkit

④現(xiàn)Chrome內(nèi)核 -- Blink

3、綁定事件的方式？

1、直接在dom里綁定： onclick="test(this)">

2、在js中通過(guò)onclick綁定：xxx.onclick=test;

3、通過(guò)事件綁定：dom.addEventListener("click", ele, boolean)

(拓展：js事件流模型？)

“事件冒泡”：事件由最具體的元素接收，然后逐級(jí)向上傳播；

“事件捕捉”：事件由最不具體的節(jié)點(diǎn)先接收，然后逐級(jí)向下，一直到最具體元素；

“dom事件流”：三個(gè)階段：事件捕捉，目標(biāo)階段，事件冒泡；

e.stopPropagation() 阻止冒泡
e.preventDefault() 阻止默認(rèn)事件

4、form表單提交與ajax提交什么區(qū)別？

1、Ajax在提交、請(qǐng)求、接收時(shí)都是異步進(jìn)行的，網(wǎng)頁(yè)不需要刷新；

而Form提交則是新建一個(gè)頁(yè)面，哪怕是提交給自己本身的頁(yè)面，也是需要刷新的。

2、Ajax在提交時(shí)是在后臺(tái)新建一個(gè)請(qǐng)求；Form卻是放棄本頁(yè)面，而后再請(qǐng)求。

3、Ajax在提交、請(qǐng)求、接收時(shí)整個(gè)過(guò)程都需要程序來(lái)對(duì)其數(shù)據(jù)進(jìn)行整理；

Form提交卻是根據(jù)表單結(jié)構(gòu)自動(dòng)完成，不需要代碼干預(yù)。

4、Ajax必須要使用JS來(lái)實(shí)現(xiàn)，不啟用JS的瀏覽器無(wú)法完成該操作；

Form卻是瀏覽器的本能，無(wú)論是否開(kāi)啟JS都可以提交表單。

5、為什么要用Ajax？

使用Ajax用戶體驗(yàn)會(huì)更“敏捷”：數(shù)據(jù)提交頁(yè)面不會(huì)閃屏；頁(yè)面局部更新速度快；網(wǎng)絡(luò)帶寬占用小

6、離線存儲(chǔ)--本地存儲(chǔ)和離線緩存及優(yōu)缺點(diǎn)

1.本地存儲(chǔ)--1) cookie 2) localStorage 3) sessionStorage

2.離線緩存--1) Application Cache (Manifest)

Cookie

優(yōu)點(diǎn)：

可控制過(guò)期時(shí)間，使其不會(huì)長(zhǎng)期有效

可擴(kuò)展、可用性比較好

可加密減少cookie被破解的可能性

缺點(diǎn)：

數(shù)量和長(zhǎng)度有限制，最多20條，最長(zhǎng)不能超過(guò)4k

請(qǐng)求頭上帶著數(shù)據(jù)安全性差

主要應(yīng)用：

購(gòu)物車、客戶端登錄

localStorage(本地存儲(chǔ))

優(yōu)點(diǎn)：

localStorage拓展了cookie的4k限制

localStorage可以將第一次請(qǐng)求的5M大小數(shù)據(jù)直接存儲(chǔ)到本地，相比于cookie可以節(jié)約帶寬

localStorage的使用也是遵循同源策略的，所以不同的網(wǎng)站直接是不能共用相同的localStorage

缺點(diǎn)：

需要手動(dòng)刪除，否則長(zhǎng)期存在

瀏覽器大小不一，版本的支持也不一樣

localStorage只支持string類型的存儲(chǔ)，JSON對(duì)象需要轉(zhuǎn)換

localStorage本質(zhì)上是對(duì)字符串的讀取，如果存儲(chǔ)內(nèi)容多的話會(huì)消耗內(nèi)存空間，會(huì)導(dǎo)致頁(yè)面變卡

特點(diǎn)：

同源策略限制、只在本地存儲(chǔ)、永久保存、同瀏覽器共享、存儲(chǔ)方式、存儲(chǔ)上限限制(大多數(shù)5MB以下)。

應(yīng)用場(chǎng)合：

數(shù)據(jù)比較大的臨時(shí)保存方案。如在線編輯文章時(shí)的自動(dòng)保存。

sessionStorage(會(huì)話存儲(chǔ))

特點(diǎn)：

同源策略限制、只在本地存儲(chǔ)、單標(biāo)簽頁(yè)限制、存儲(chǔ)方式、存儲(chǔ)上限限制(大多數(shù)5MB以下)。

應(yīng)用場(chǎng)合：

適合單頁(yè)應(yīng)用程序，方便在各業(yè)務(wù)模塊進(jìn)行傳值。

離線緩存--Application Cache (Manifest)

優(yōu)勢(shì)：

離線瀏覽：用戶可在應(yīng)用離線時(shí)使用它們

速度：已緩存資源加載速度塊

減少服務(wù)器負(fù)載：瀏覽器只從服務(wù)器下載更新過(guò)的資源

使用方法：

在html標(biāo)簽添加manifest屬性，屬性值為manifest文件的路徑

< !DOCTYPE HTML >

< html manifest=""demo.manifest"">< /html >

編寫(xiě)manifest文件

manifest文件可分為三部分：

(1) CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存

(2)NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存

(3)FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁(yè)面無(wú)法訪問(wèn)時(shí)的回退頁(yè)面（比如 404 頁(yè)面）

CACHE MANIFEST

#version 1.1 /*版本號(hào)*/

CACHE:

html/index.html /*需要緩存的文件*/

NETWORK:

js/jquery.js /*不需要緩存的文件*/

FALLBACK:

html/index.html /*當(dāng)頁(yè)面無(wú)法訪問(wèn)時(shí)的回退頁(yè)面*/

HTML

1、HTML 塊級(jí)元素、行內(nèi)元素
塊級(jí)元素：塊狀元素排斥其他元素與其位于同一行，可以設(shè)定元素的寬塊級(jí)元素：

①總是在新行開(kāi)始；

②寬高，行高以及內(nèi)外邊距都可控制；

③寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度。

④它可以容納內(nèi)聯(lián)元素和其他塊元素

from table ol ul dl div p h1-h6
nav、header、section、footer。

行內(nèi)元素：

①和其他元素都在一行上；

②寬高，行高及內(nèi)外邊距不可改變，除左右方向的外邊距margin、內(nèi)邊距padding；

③內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素

lable span a em

行內(nèi)塊狀元素：

綜合了行內(nèi)元素和塊狀元素的特性，顯示效果為行內(nèi)元素，但它擁有塊狀元素的屬性。

select textarea button

這三者可以通過(guò) display 相互轉(zhuǎn)換。

2、表單標(biāo)簽的readonly與disabled的區(qū)別

readonly 只讀，只用于文本輸入框，input type="text/password"、textarea；

使用表單提交時(shí)會(huì)提交此元素，應(yīng)用在用戶只讀同時(shí)需要提交數(shù)據(jù)的場(chǎng)景。

disabled 禁用，可用于所有表單標(biāo)簽，使用表單提交時(shí)不會(huì)提交此元素。

3、H5 新特性

1、語(yǔ)義特性 -- 新增語(yǔ)義化標(biāo)簽，例如 header section footer nav

2、本地存儲(chǔ)特性 -- 對(duì)本地離線存儲(chǔ)更好的支持，

例如 localStorage sessionStorage ApplicationCache應(yīng)用程序緩存。

3、設(shè)備訪問(wèn)特性 -- 地理位置API - 獲取用戶的地理位置 getCurrentPosition()。媒體訪問(wèn)API getUserMedia()

4、連接特性 -- Web Sockets

5、網(wǎng)頁(yè)多媒體特性 -- Audio 和 Video 標(biāo)簽

6、三維圖形特性 -- 可縮放矢量圖形 SVG。畫(huà)布 Canvas

1、JS是一門(mén)什么樣的語(yǔ)言及特點(diǎn)？
JavaScript是客戶端腳本語(yǔ)言,是一種動(dòng)態(tài)、弱類型、基于原型的語(yǔ)言；

1.不需要編譯就可以由解釋器直接運(yùn)行；

2.語(yǔ)法類似于常見(jiàn)的高級(jí)語(yǔ)言，如C和Java；

3. 變量松散定義，屬于弱類型語(yǔ)言；

4. 面向?qū)ο蟮摹?/span>

2、JS的數(shù)據(jù)類型

基本數(shù)據(jù)類型 String Number Boolean undefined null -- 指的是簡(jiǎn)單的數(shù)據(jù)段，按值訪問(wèn)。

引用數(shù)據(jù)類型 Object(Array Date Regxp Function) -- 可能有多個(gè)值構(gòu)成的對(duì)象按引用訪問(wèn)。

3、JS如何查找元素？
document
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()

querySelector()
querySelectorAll()

節(jié)點(diǎn)指針
父節(jié)點(diǎn).firstChild -- firstElementChild
父節(jié)點(diǎn).lastChild -- lastElementChild
父節(jié)點(diǎn).childNodes
兄弟節(jié)點(diǎn).previousSibling -- previousElementSibling
兄弟節(jié)點(diǎn).nextSibling -- nextElementSibling
子節(jié)點(diǎn).parentNode

4、JS如何創(chuàng)建節(jié)點(diǎn)?
docuement.
createElement(元素標(biāo)簽) 創(chuàng)建元素節(jié)點(diǎn)
createAttribute(元素屬性)
createTextNode(文本內(nèi)容) 創(chuàng)建文本節(jié)點(diǎn)

5、JS如何操作節(jié)點(diǎn)(插入、替換、復(fù)制、刪除)？
插入
appendChild(添加的新子節(jié)點(diǎn)) 向子節(jié)點(diǎn)列表末尾添加新的子節(jié)點(diǎn)
insertBefore(插入當(dāng)前節(jié)點(diǎn)的新節(jié)點(diǎn),已知子節(jié)點(diǎn)) 在已知的子節(jié)點(diǎn)之前插入新的子節(jié)點(diǎn)

son.parentNode.insertBefore

替換節(jié)點(diǎn)
replaceChild(要插入的新元素, 將被替換的老元素)
刪除節(jié)點(diǎn)
removeChild(要?jiǎng)h除的節(jié)點(diǎn))
復(fù)制節(jié)點(diǎn)
需要被復(fù)制的節(jié)點(diǎn).cloneNode(true/false)
true -- 復(fù)制當(dāng)前節(jié)點(diǎn)及其所有子節(jié)點(diǎn)
false -- 僅復(fù)制當(dāng)前節(jié)點(diǎn)

6、JS屬性操作？
獲取屬性 getAttribute
元素節(jié)點(diǎn).getAttribute(元素屬性名)

設(shè)置屬性 setAttribute
元素節(jié)點(diǎn).setAttribute(元素屬性名, 屬性值)

刪除屬性 removeAttribute
元素節(jié)點(diǎn).removeAttribute(元素屬性名)

7、什么是偽數(shù)組？
1、具有 length 屬性。
2、按索引方式存儲(chǔ)數(shù)據(jù)。
3、不具有數(shù)組的 push()、pop() 等方法或期望 length 屬性有什么特殊的行為。
比如 arguments 對(duì)象，調(diào)用 getElementsByTagName document.childNodes 之類的返回 NodeList對(duì)象都屬于偽數(shù)組。arguments可以通過(guò)Array.prototype.slice.call(fakeArray) 將偽數(shù)組轉(zhuǎn)換成真正的Array對(duì)象;
jQuery中的 $() 對(duì)象都是偽數(shù)組對(duì)象，保存的是DOM對(duì)象�；诖艘簿透芾斫� jQuery 的 this。

8、var that=this;
this 關(guān)鍵字代表函數(shù)運(yùn)行時(shí)自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，只能在函數(shù)內(nèi)部使用，指向調(diào)用函數(shù)的那個(gè)對(duì)象。
9、eval();
eval()函數(shù)就像是一個(gè)ECMAScript解析器，只接收一個(gè)參數(shù)，即執(zhí)行的ECMAScript字符串。將傳入的字符串當(dāng)作實(shí)際的語(yǔ)句來(lái)解析。
10、什么是Ajax和JSON，它們的優(yōu)缺點(diǎn)？
Ajax Asynchronous Javascript And XML/異步的javascript和xml
優(yōu)點(diǎn)：

可以使頁(yè)面不重載全部?jī)?nèi)容的情況下加載局部?jī)?nèi)容，降低數(shù)據(jù)傳輸量。

避免用戶不斷刷新或者跳轉(zhuǎn)頁(yè)面，提高用戶體驗(yàn)。

缺點(diǎn)：

對(duì)搜索引擎不友好。

要實(shí)現(xiàn)ajax下的前后退功能成本較大

可能造成請(qǐng)求數(shù)的增加

跨域問(wèn)題限制

JSON：1、一種輕量級(jí)的數(shù)據(jù)交換格式，占用帶寬小；

2、易閱讀編寫(xiě)解析；

3、支持復(fù)合數(shù)據(jù)類型；

4、基于純文本，跨平臺(tái)傳遞極其簡(jiǎn)單，Javascript原生支持，理想的數(shù)據(jù)交換格式；

缺點(diǎn)：相對(duì)xml通用性較差，數(shù)據(jù)可描述性較差

11、JSONP與JSON
跨域請(qǐng)求的概念同一域名不同端口不同協(xié)議(http~https) 不同二級(jí)域名域名和域名對(duì)應(yīng)ip
JSON是一種基于文本的數(shù)據(jù)交換方式 (不支持跨域)；
JSONP是一種非官方跨域數(shù)據(jù)交互協(xié)議

JSON

1、一種輕量級(jí)的數(shù)據(jù)交換格式，占用帶寬��；

2、容易閱讀編寫(xiě)解析；

3、支持復(fù)合數(shù)據(jù)類型；

4、基于純文本，跨平臺(tái)傳遞極其簡(jiǎn)單，Javascript原生支持，理想的數(shù)據(jù)交換格式；

沒(méi)辦法跨域直接獲取，就將json包裹在一個(gè)合法的js語(yǔ)句中作為js文件傳過(guò)去。json是想要的東西，jsonp是達(dá)到這個(gè)目的而普遍采用的一種方式

JSONP是怎么產(chǎn)生的
1、 Ajax直接請(qǐng)求普通文件存在跨域無(wú)權(quán)限訪問(wèn)的問(wèn)題
2、Web頁(yè)面擁有"src"屬性的標(biāo)簽都擁有跨域的能力
dataType: "jsonp",
jsonp: "callback",//傳遞給請(qǐng)求處理程序或頁(yè)面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback)
jsonpCallback:"flightHandler",//自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)
12、js中的同步和異步
JS 是一門(mén)“單線程”的語(yǔ)言，就像一條流水線，不能同時(shí)進(jìn)行多個(gè)任務(wù)和流程。
差別就在于這條流水線上各個(gè)流程的執(zhí)行順序不同。
同步任務(wù)指的是，在主線程上排隊(duì)執(zhí)行的任務(wù)，形成一個(gè)執(zhí)行棧（execution context stack），只有前一個(gè)任務(wù)執(zhí)行完畢，才能執(zhí)行后一個(gè)任務(wù)；
異步任務(wù)指的是，不進(jìn)入主線程、而進(jìn)入"任務(wù)隊(duì)列"（task queue）的任務(wù)，只有等主線程任務(wù)執(zhí)行完畢，"任務(wù)隊(duì)列"通知主線程請(qǐng)求執(zhí)行任務(wù)，該任務(wù)才會(huì)進(jìn)入主線程執(zhí)行。
最基礎(chǔ)常見(jiàn)的異步是setTimeout和setInterval函數(shù)。

13、get 與 post

1、get參數(shù)通過(guò)url傳遞，post 放在request body 中。

2、get請(qǐng)求在url中傳遞的參數(shù)是有長(zhǎng)度限制的(2048個(gè)字符)，post沒(méi)有。

3、get比post更不安全，因?yàn)閰?shù)直接暴露在url中，所以不能用來(lái)傳遞敏感信息。

4、get產(chǎn)生一個(gè)TCP數(shù)據(jù)包，post產(chǎn)生兩個(gè)TCP數(shù)據(jù)包。

HTTP1.0定義了三種請(qǐng)求方法： GET, POST 和 HEAD方法。
HTTP1.1新增了五種請(qǐng)求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法

14、http與https

*HTTP*是超文本傳輸協(xié)議，定義了客戶端與服務(wù)器端之間文本傳輸?shù)囊?guī)范。

HTTP協(xié)議以明文方式發(fā)送內(nèi)容，不提供任何方式的數(shù)據(jù)加密，如果攻擊者截取Web瀏覽器和網(wǎng)站服務(wù)器之間的傳輸報(bào)文，就可以直接讀取其中的信息，所以不適合傳輸一些敏感信息，比如：信用卡號(hào)，密碼支付信息。
HTTP默認(rèn)使用80端口，這個(gè)端口指的是服務(wù)端的端口，而客戶端使用的端口是動(dòng)態(tài)分配的。當(dāng)我們沒(méi)有指定端口訪問(wèn)時(shí)，瀏覽器會(huì)默認(rèn)幫我們添加80端口。

*https*

為了解決HTTP協(xié)議的這一缺陷，需要使用另一種協(xié)議：安全套接字層超文本傳輸協(xié)議HTTPS，為了數(shù)據(jù)傳輸?shù)陌踩?/span>HTTPS在HTTP的基礎(chǔ)上加入了SSL協(xié)議，SSL依靠證書(shū)來(lái)驗(yàn)證服務(wù)器的身份，并為瀏覽器和服務(wù)器的之間的通信加密。
主要作用可以分為兩種：一種是建立一個(gè)信息安全通道，來(lái)保證數(shù)據(jù)傳輸?shù)陌踩�；另一種就是確認(rèn)網(wǎng)站的真實(shí)性。

1. HTTPS協(xié)議需要到ca申請(qǐng)證書(shū)，一般免費(fèi)證書(shū)較少，因而需要一定費(fèi)用。

2. HTTP是超文本傳輸協(xié)議，信息是明文傳輸，HTTPS則是具有安全性的SSL加密傳輸協(xié)議。

3. HTTP的連接很簡(jiǎn)單，是無(wú)狀態(tài)的；HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸，身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，比HTTP協(xié)議安全。

ES6

1、ES6

1、塊級(jí)作用域

ES5 只有全局作用域和函數(shù)作用域，let、const 實(shí)際上為JS 新增了塊級(jí)作用域

不存在變量提升、不允許重復(fù)聲明。

let 命令

暫時(shí)性死區(qū)(let聲明變量a，但在這聲明之前對(duì)a聲明、賦值會(huì)報(bào)錯(cuò))，typeof不再是一個(gè)百分之百安全的操作

const 命令

聲明一個(gè)只讀的常量且必須賦值。一旦聲明，常量的值就不能改變。如果是對(duì)象則不能改變對(duì)象的引用，或可以增加屬性。

ES6 聲明變量的六種方法

var、function(ES5)

let、const、import、class

2、字符串

靜態(tài)字符串一律使用單引號(hào)或反引號(hào)，不使用雙引號(hào)。動(dòng)態(tài)字符串使用反引號(hào)。

3、解構(gòu)賦值 -- 對(duì)應(yīng)關(guān)系賦值

使用數(shù)組成員對(duì)變量賦值時(shí)，優(yōu)先使用解構(gòu)賦值。

4、對(duì)象

①單行定義的對(duì)象，最后一個(gè)成員不以逗號(hào)結(jié)尾。多行定義的對(duì)象，最后一個(gè)成員以逗號(hào)結(jié)尾。

②對(duì)象盡量靜態(tài)化，不得隨意添加新的屬性。如果添加屬性不可避免，要使用Object.assign方法。

5、數(shù)組

①使用擴(kuò)展運(yùn)算符（...）拷貝數(shù)組。

②使用 Array.from 方法，將類似數(shù)組的對(duì)象轉(zhuǎn)為數(shù)組(ES5 -- Array.prototype.slice.call)。

6、箭頭函數(shù) -- 匿名函數(shù)的簡(jiǎn)寫(xiě) -- 比如setTimeout

不綁定this與arguments，不能用作構(gòu)造器，也沒(méi)有prototype屬性，隱式返回值。立即執(zhí)行函數(shù)可以寫(xiě)成箭頭函數(shù)的形式

簡(jiǎn)單的、單行的、不會(huì)復(fù)用的函數(shù)，建議采用箭頭函數(shù)。如果函數(shù)體較為復(fù)雜，行數(shù)較多，還是應(yīng)該采用傳統(tǒng)的函數(shù)寫(xiě)法。

7、Map、Set

8、Class

9、模塊

①使用import取代require。

②使用export取代module.exports。

10、使用ESLint

一個(gè)語(yǔ)法規(guī)則和代碼風(fēng)格的檢查工具，可以用來(lái)保證寫(xiě)出語(yǔ)法正確、風(fēng)格統(tǒng)一的代碼。

CSS

1、CSS選擇器？引用CSS的方式？CSS 優(yōu)先級(jí)如何計(jì)算？盒模型？
①通配選擇符、標(biāo)簽名選擇符、類選擇符、ID選擇符、后代選擇符(包含)、子選擇符、相鄰選擇符、兄弟選擇符、屬性選擇符、偽類、偽對(duì)象。
②行內(nèi)樣式、內(nèi)嵌式、link鏈接式、import導(dǎo)入式。
③!import 》行內(nèi)樣式》ID》class 》標(biāo)簽名選擇符，選擇符越具體等級(jí)就越高。
④Margin、border、padding、content。
box-sizing: border-box; // content-box
// 定義瀏覽器應(yīng)該如何計(jì)算一個(gè)元素的總寬高；更改元素默認(rèn)的 CSS 盒子模型