服務支持

020-39182790

技術文檔您現在的位置：首頁 > 服務支持 > 技術文檔

網頁前端HTML、JS、CSS應用的主要知識點

作者：織晶客服部發布于：2020/11/14 11:06:12 點擊量：來源：織晶網絡

1、前端頁面有哪三層構成？前端頁面有哪三層構成？ HTML結構層、CSS表示層、JS行為層。

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

①IE內核 -- Trident

②Firefox內核 -- Gecko

③Safari內核(曾經Chrome內核) -- Webkit

④現Chrome內核 -- Blink

3、綁定事件的方式？

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

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

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

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

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

“事件捕捉”：事件由最不具體的節點先接收，然后逐級向下，一直到最具體元素；

“dom事件流”：三個階段：事件捕捉，目標階段，事件冒泡；

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

4、form表單提交與ajax提交什么區別？

1、Ajax在提交、請求、接收時都是異步進行的，網頁不需要刷新；

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

2、Ajax在提交時是在后臺新建一個請求；Form卻是放棄本頁面，而后再請求。

3、Ajax在提交、請求、接收時整個過程都需要程序來對其數據進行整理；

Form提交卻是根據表單結構自動完成，不需要代碼干預。

4、Ajax必須要使用JS來實現，不啟用JS的瀏覽器無法完成該操作；

Form卻是瀏覽器的本能，無論是否開啟JS都可以提交表單。

5、為什么要用Ajax？

使用Ajax用戶體驗會更“敏捷”：數據提交頁面不會閃屏；頁面局部更新速度快；網絡帶寬占用小

6、離線存儲--本地存儲和離線緩存及優缺點

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

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

Cookie

優點：

可控制過期時間，使其不會長期有效

可擴展、可用性比較好

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

缺點：

數量和長度有限制，最多20條，最長不能超過4k

請求頭上帶著數據安全性差

主要應用：

購物車、客戶端登錄

localStorage(本地存儲)

優點：

localStorage拓展了cookie的4k限制

localStorage可以將第一次請求的5M大小數據直接存儲到本地，相比于cookie可以節約帶寬

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

缺點：

需要手動刪除，否則長期存在

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

localStorage只支持string類型的存儲，JSON對象需要轉換

localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡

特點：

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

應用場合：

數據比較大的臨時保存方案。如在線編輯文章時的自動保存。

sessionStorage(會話存儲)

特點：

同源策略限制、只在本地存儲、單標簽頁限制、存儲方式、存儲上限限制(大多數5MB以下)。

應用場合：

適合單頁應用程序，方便在各業務模塊進行傳值。

離線緩存--Application Cache (Manifest)

優勢：

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

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

減少服務器負載：瀏覽器只從服務器下載更新過的資源

使用方法：

在html標簽添加manifest屬性，屬性值為manifest文件的路徑

< !DOCTYPE HTML >

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

編寫manifest文件

manifest文件可分為三部分：

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

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

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

CACHE MANIFEST

#version 1.1 /*版本號*/

CACHE:

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

NETWORK:

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

FALLBACK:

html/index.html /*當頁面無法訪問時的回退頁面*/

HTML

1、HTML 塊級元素、行內元素
塊級元素：塊狀元素排斥其他元素與其位于同一行，可以設定元素的寬塊級元素：

①總是在新行開始；

②寬高，行高以及內外邊距都可控制；

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

④它可以容納內聯元素和其他塊元素

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

行內元素：

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

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

③內聯元素只能容納文本或者其他內聯元素

lable span a em

行內塊狀元素：

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

select textarea button

這三者可以通過 display 相互轉換。

2、表單標簽的readonly與disabled的區別

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

使用表單提交時會提交此元素，應用在用戶只讀同時需要提交數據的場景。

disabled 禁用，可用于所有表單標簽，使用表單提交時不會提交此元素。

3、H5 新特性

1、語義特性 -- 新增語義化標簽，例如 header section footer nav

2、本地存儲特性 -- 對本地離線存儲更好的支持，

例如 localStorage sessionStorage ApplicationCache應用程序緩存。

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

4、連接特性 -- Web Sockets

5、網頁多媒體特性 -- Audio 和 Video 標簽

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

1、JS是一門什么樣的語言及特點？
JavaScript是客戶端腳本語言,是一種動態、弱類型、基于原型的語言；

1.不需要編譯就可以由解釋器直接運行；

2.語法類似于常見的高級語言，如C和Java；

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

4. 面向對象的。

2、JS的數據類型

基本數據類型 String Number Boolean undefined null -- 指的是簡單的數據段，按值訪問。

引用數據類型 Object(Array Date Regxp Function) -- 可能有多個值構成的對象按引用訪問。

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

querySelector()
querySelectorAll()

節點指針
父節點.firstChild -- firstElementChild
父節點.lastChild -- lastElementChild
父節點.childNodes
兄弟節點.previousSibling -- previousElementSibling
兄弟節點.nextSibling -- nextElementSibling
子節點.parentNode

4、JS如何創建節點?
docuement.
createElement(元素標簽) 創建元素節點
createAttribute(元素屬性)
createTextNode(文本內容) 創建文本節點

5、JS如何操作節點(插入、替換、復制、刪除)？
插入
appendChild(添加的新子節點) 向子節點列表末尾添加新的子節點
insertBefore(插入當前節點的新節點,已知子節點) 在已知的子節點之前插入新的子節點

son.parentNode.insertBefore

替換節點
replaceChild(要插入的新元素, 將被替換的老元素)
刪除節點
removeChild(要刪除的節點)
復制節點
需要被復制的節點.cloneNode(true/false)
true -- 復制當前節點及其所有子節點
false -- 僅復制當前節點

6、JS屬性操作？
獲取屬性 getAttribute
元素節點.getAttribute(元素屬性名)

設置屬性 setAttribute
元素節點.setAttribute(元素屬性名, 屬性值)

刪除屬性 removeAttribute
元素節點.removeAttribute(元素屬性名)

7、什么是偽數組？
1、具有 length 屬性。
2、按索引方式存儲數據。
3、不具有數組的 push()、pop() 等方法或期望 length 屬性有什么特殊的行為。
比如 arguments 對象，調用 getElementsByTagName document.childNodes 之類的返回 NodeList對象都屬于偽數組。arguments可以通過Array.prototype.slice.call(fakeArray) 將偽數組轉換成真正的Array對象;
jQuery中的 $() 對象都是偽數組對象，保存的是DOM對象。基于此也就更能理解 jQuery 的 this。

8、var that=this;
this 關鍵字代表函數運行時自動生成的一個內部對象，只能在函數內部使用，指向調用函數的那個對象。
9、eval();
eval()函數就像是一個ECMAScript解析器，只接收一個參數，即執行的ECMAScript字符串。將傳入的字符串當作實際的語句來解析。
10、什么是Ajax和JSON，它們的優缺點？
Ajax Asynchronous Javascript And XML/異步的javascript和xml
優點：

可以使頁面不重載全部內容的情況下加載局部內容，降低數據傳輸量。

避免用戶不斷刷新或者跳轉頁面，提高用戶體驗。

缺點：

對搜索引擎不友好。

要實現ajax下的前后退功能成本較大

可能造成請求數的增加

跨域問題限制

JSON：1、一種輕量級的數據交換格式，占用帶寬小；

2、易閱讀編寫解析；

3、支持復合數據類型；

4、基于純文本，跨平臺傳遞極其簡單，Javascript原生支持，理想的數據交換格式；

缺點：相對xml通用性較差，數據可描述性較差

11、JSONP與JSON
跨域請求的概念同一域名不同端口不同協議(http~https) 不同二級域名域名和域名對應ip
JSON是一種基于文本的數據交換方式 (不支持跨域)；
JSONP是一種非官方跨域數據交互協議

JSON

1、一種輕量級的數據交換格式，占用帶寬小；

2、容易閱讀編寫解析；

3、支持復合數據類型；

4、基于純文本，跨平臺傳遞極其簡單，Javascript原生支持，理想的數據交換格式；

沒辦法跨域直接獲取，就將json包裹在一個合法的js語句中作為js文件傳過去。json是想要的東西，jsonp是達到這個目的而普遍采用的一種方式

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

13、get 與 post

1、get參數通過url傳遞，post 放在request body 中。

2、get請求在url中傳遞的參數是有長度限制的(2048個字符)，post沒有。

3、get比post更不安全，因為參數直接暴露在url中，所以不能用來傳遞敏感信息。

4、get產生一個TCP數據包，post產生兩個TCP數據包。

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

14、http與https

*HTTP*是超文本傳輸協議，定義了客戶端與服務器端之間文本傳輸的規范。

HTTP協議以明文方式發送內容，不提供任何方式的數據加密，如果攻擊者截取Web瀏覽器和網站服務器之間的傳輸報文，就可以直接讀取其中的信息，所以不適合傳輸一些敏感信息，比如：信用卡號，密碼支付信息。
HTTP默認使用80端口，這個端口指的是服務端的端口，而客戶端使用的端口是動態分配的。當我們沒有指定端口訪問時，瀏覽器會默認幫我們添加80端口。

*https*

為了解決HTTP協議的這一缺陷，需要使用另一種協議：安全套接字層超文本傳輸協議HTTPS，為了數據傳輸的安全，HTTPS在HTTP的基礎上加入了SSL協議，SSL依靠證書來驗證服務器的身份，并為瀏覽器和服務器的之間的通信加密。
主要作用可以分為兩種：一種是建立一個信息安全通道，來保證數據傳輸的安全；另一種就是確認網站的真實性。

1. HTTPS協議需要到ca申請證書，一般免費證書較少，因而需要一定費用。

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

3. HTTP的連接很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸，身份認證的網絡協議，比HTTP協議安全。

ES6

1、ES6

1、塊級作用域

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

不存在變量提升、不允許重復聲明。

let 命令

暫時性死區(let聲明變量a，但在這聲明之前對a聲明、賦值會報錯)，typeof不再是一個百分之百安全的操作

const 命令

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

ES6 聲明變量的六種方法

var、function(ES5)

let、const、import、class

2、字符串

靜態字符串一律使用單引號或反引號，不使用雙引號。動態字符串使用反引號。

3、解構賦值 -- 對應關系賦值

使用數組成員對變量賦值時，優先使用解構賦值。

4、對象

①單行定義的對象，最后一個成員不以逗號結尾。多行定義的對象，最后一個成員以逗號結尾。

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

5、數組

①使用擴展運算符（...）拷貝數組。

②使用 Array.from 方法，將類似數組的對象轉為數組(ES5 -- Array.prototype.slice.call)。

6、箭頭函數 -- 匿名函數的簡寫 -- 比如setTimeout

不綁定this與arguments，不能用作構造器，也沒有prototype屬性，隱式返回值。立即執行函數可以寫成箭頭函數的形式

簡單的、單行的、不會復用的函數，建議采用箭頭函數。如果函數體較為復雜，行數較多，還是應該采用傳統的函數寫法。

7、Map、Set

8、Class

9、模塊

①使用import取代require。

②使用export取代module.exports。

10、使用ESLint

一個語法規則和代碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的代碼。

CSS

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