前端初學者易忽略的基礎知識（彙總）

時間 2020-01-10

標籤前端初學者忽略基礎知識彙總简体版

原文原文鏈接

src與href的區別
src是 source 的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求 src 資源時會將其指向的資源下載並應用到文檔內，例如 js 腳本， img 圖片和 frame 等元素。
<script src ='js.js'></script>
當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。
href是 Hypertext Reference 的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，若是咱們在文檔中添加<link href='common.css' rel='stylesheet'/> 那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用 link 方式來加載 css ，而不是使用 @import 方式。
HTML5 文檔類型和字符集
HTML5 文檔類型：
<!doctype html>
HTML5 使用 UTF-8 編碼：
<meta charset=」 UTF-8 ″ >
CSS選擇器優先級
優先級
(1)同類型，同級別的樣式後者先於前者
(2)ID > 類樣式 > 標籤 > *
(3)內聯>ID選擇器>僞類=屬性選擇器=類選擇器>標籤選擇器>通用選擇器(*)>繼承的樣式
(4)具體 > 泛化的，特殊性即css優先級
(5)近的 > 遠的 (內嵌樣式 > 內部樣式表 > 外聯樣式表)
內嵌樣式：內嵌在元素中，<span style="color:red">span</span>
內部樣式表：在頁面中的樣式，寫在<style></style>中的樣式
外聯樣式表：單獨存在一個css文件中，經過link引入或import導入的樣式
(6)!important 權重最高，比 inline style 還要高
計算特殊性值
important > 內嵌 > ID > 類 > 標籤 | 僞類 | 屬性選擇 > 僞對象 > 繼承 > 通配符
特殊性計算法：
CSS樣式選擇器分爲4個等級，a、b、c、d
(1)若是樣式是行內樣式（經過Style=「」定義），那麼a=1，1,0,0,0
(2)b爲ID選擇器的總數 0,1,0,0
(3)c爲屬性選擇器，僞類選擇器和class類選擇器的數量。0,0,1,0
(4)d爲標籤、僞元素選擇器的數量 0,0,0,1
(5)!important 權重最高，比 inline style 還要高
好比結果爲：1093比1100，按位比較，從左到右，只要一位高於則當即勝出，不然繼續比較。
列出display的值並說明他們的做用？
display： none | inline | block | list-item | inline-block | table | inline- table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex
默認值：inline
none：隱藏對象。與visibility屬性的hidden值不一樣，其不爲被隱藏的對象保留其物理空間
inline：指定對象爲內聯元素。
block：指定對象爲塊元素。
list-item：指定對象爲列表項目。
inline-block：指定對象爲內聯塊元素。（CSS2）
table：指定對象做爲塊元素級的表格。類同於html標籤<table>（CSS2）
inline-table：指定對象做爲內聯元素級的表格。類同於html標籤<table>（CSS2）
table-caption：指定對象做爲表格標題。類同於html標籤<caption>（CSS2）
table-cell：指定對象做爲表格單元格。類同於html標籤<td>（CSS2）
table-row：指定對象做爲表格行。類同於html標籤<tr>（CSS2）
table-row-group：指定對象做爲表格行組。類同於html標籤<tbody>（CSS2）
table-column：指定對象做爲表格列。類同於html標籤<col>（CSS2）
table-column-group：指定對象做爲表格列組顯示。類同於html標籤<colgroup>（CSS2）
table-header-group：指定對象做爲表格標題組。類同於html標籤<thead>（CSS2）
table-footer-group：指定對象做爲表格腳註組。類同於html標籤<tfoot>（CSS2）
run-in：根據上下文決定對象是內聯對象仍是塊級對象。（CSS3）
box：將對象做爲彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
inline-box：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
flexbox：將對象做爲彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
inline-flexbox：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
flex：將對象做爲彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
inline-flex：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
清除浮動的方法
(1)父級div定義 height
原理：父級div手動定義height，就解決了父級div沒法自動獲取到高度的問題。
優勢：簡單、代碼少、容易掌握
缺點：只適合高度固定的佈局，要給出精確的高度，若是高度和父級div不同時，會產生問題
建議：不推薦使用，只建議高度固定的佈局時使用
(2)結尾處加空div標籤 clear:both
原理：添加一個空div，利用css提升的clear:both清除浮動，讓父級div能自動獲取到高度
優勢：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：很多初學者不理解原理；若是頁面浮動佈局多，就要增長不少空div，讓人感受很很差
建議：不推薦使用，但此方法是之前主要使用的一種清除浮動方法
(3)父級div定義僞類:after 和 zoom
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點相似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優勢：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：代碼多、很多初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持。
建議：推薦使用，建議定義公共類，以減小CSS代碼。
(4)父級div定義 overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優勢：簡單、代碼少、瀏覽器支持好
缺點：不能和position配合使用，由於超出的尺寸的會被隱藏。
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。
(5)父級div定義 overflow:auto
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度
優勢：簡單、代碼少、瀏覽器支持好
缺點：內部寬高超過父級div時，會出現滾動條。
建議：不推薦使用，若是你須要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。
浮動會產生的問題
一、父元素的高度沒法被撐開，影響與父元素同級的元素
二、非塊級元素同行排列，設爲浮動的元素會自動移到最前面，其餘在後面依次排列，浮動元素不會蓋住非塊級元素（例如文本）
三、塊級元素每一個元素獨佔一行，設爲浮動的元素不會對它前面的元素產生影響，它後面的元素會佔據它的位置並被它覆蓋
緩存
HTML5新增的元素
首先html5爲了更好的實踐web語義化，增長了header，footer，nav,aside,section等語義化標籤，在表單方面，爲了加強表單，爲input增長了color，emial,data ,range等類型，在存儲方面，提供了sessionStorage，localStorage,和離線存儲，經過這些存儲方式方便數據在客戶端的存儲和獲取，在多媒體方面規定了音頻和視頻元素audio和vedio，另外還有地理定位，canvas畫布，拖放，多線程編程的web worker和websocket協議。
csrf和xss的網絡攻擊及防範
CSRF：跨站請求僞造，能夠理解爲攻擊者盜用了用戶的身份，以用戶的名義發送了惡意請求，好比用戶登陸了一個網站後，馬上在另外一個ｔａｂ頁面訪問量攻擊者用來製造攻擊的網站，這個網站要求訪問剛剛登錄的網站，併發送了一個惡意請求，這時候CSRF就產生了，好比這個製造攻擊的網站使用一張圖片，可是這種圖片的連接倒是能夠修改數據庫的，這時候攻擊者就能夠以用戶的名義操做這個數據庫，防護方式的話：使用驗證碼，檢查https頭部的refer，使用token。
XSS：跨站腳本攻擊，是說攻擊者經過注入惡意的腳本，在用戶瀏覽網頁的時候進行攻擊，好比獲取cookie，或者其餘用戶身份信息，能夠分爲存儲型和反射型，存儲型是攻擊者輸入一些數據而且存儲到了數據庫中，其餘瀏覽者看到的時候進行攻擊，反射型的話不存儲在數據庫中，每每表現爲將攻擊代碼放在url地址的請求參數中，防護的話爲cookie設置httpOnly屬性，對用戶的輸入進行檢查，進行特殊字符過濾。
transition和animation的區別 Animation和transition大部分屬性是相同的，他們都是隨時間改變元素的屬性值，他們的主要區別是transition須要觸發一個事件才能改變屬性，而animation不須要觸發任何事件的狀況下才會隨時間改變屬性值，而且transition爲2幀，從from .... to，而animation能夠一幀一幀的。