前端知識總結

時間  2019-11-30
標籤 前端 知識 總結 简体版
原文   原文鏈接

1. 從 URL 輸入到頁面展示背後發生了什麼事？

解析：分爲如下幾個過程：1. DNS解析：將域名解析爲ip地址；2.TCP鏈接：三次握手；3.發送http請求；4.服務器處理請求並返回http報文；5.瀏覽器解析渲染頁面；6.斷開連接：四次揮手；javascript

一.什麼是URL？url全稱uniform resource locator（統一資源定位符），用於定位互聯網上的資源，俗稱網址。語法規則： scheme://host.domain:port/path/filename，各部分名詞解釋：css

scheme: 定義因特網服務的類型，好比http，https, ftp,file,其中最多見的http類型，https是進行加密的網絡傳輸協議。
host: 定義域主機，http默認的域主機是www
domain: 域名
port: 端口 path: 定義服務器上的路徑（若是省略，則文件必須位於網站的根目錄）
filename: 資源名稱html

二. 域名解析
瀏覽器並不能直接經過域名找到對應的服務器，而是經過ip地址。IP 地址是指互聯網協議地址，是 IP Address 的縮寫。IP 地址是 IP 協議提供的一種統一的地址格式，它爲互聯網上的每個網絡和每一臺主機分配一個邏輯地址，以此來屏蔽物理地址的差別。IP 地址是一個 32 位的二進制數，好比 127.0.0.1 爲本機 IP。前端

DNS: DNS 協議提供經過域名查找 IP 地址，或逆向從 IP 地址反查域名的服務。DNS 是一個網絡服務器，咱們的域名解析簡單來講就是在 DNS 上記錄一條信息記錄。 例如：html5

例如 baidu.com 220.114.23.56（服務器外網IP地址）80（服務器端口號）java

瀏覽器如何經過域名查詢ip？（就近原則）web

  • 瀏覽器緩存：瀏覽器會按照必定的頻率緩存 DNS 記錄。
  • 操做系統緩存：若是瀏覽器緩存中找不到須要的 DNS 記錄，那就去操做系統中找。
  • 路由緩存：路由器也有 DNS 緩存。
  • ISP 的 DNS 服務器：ISP 是互聯網服務提供商(Internet Service Provider)的簡稱，ISP 有專門的 DNS 服務器應對 DNS 查詢請求。
  • 根服務器：ISP 的 DNS 服務器還找不到的話，它就會向根服務器發出請求，進行遞歸查詢（DNS 服務器先問根域名服務器.com 域名服務器的 IP 地址，而後再問.baidu 域名服務器，依次類推）

三. TCP三次握手
在客戶端發送數據以前會發起 TCP 三次握手用以同步客戶端和服務端的序列號和確認號，並交換 TCP 窗口大小信息。具體過程以下：sql

  • 第一次握手，由瀏覽器發起，告訴服務器我要發送請求了
  • 第二次握手，由服務器發起，告訴瀏覽器我準備接受了，你趕忙發送吧
  • 第三次握手，由瀏覽器發送，告訴服務器，我立刻就發了，準備接受吧

謝希仁著《計算機網絡》中講「三次握手」的目的是「爲了防止已失效的鏈接請求報文段忽然又傳送到了服務端，於是產生錯誤」chrome

四，五略 六. 瀏覽器解析渲染頁面編程


瀏覽器解析渲染頁面分爲五個步驟：

  • 根據html頁面解析出dom樹（DOM 樹解析的過程是一個深度優先遍歷。即先構建當前節點的全部子節點，再構建下一個兄弟節點，注意：在讀取html頁面構建dom樹的過程當中遇到script標籤會停下來執行完腳本以後再繼續構建dom樹，前端優化的一個點就是讓script腳本放在最後）
  • 根據css解析生成css規則樹（解析css規則樹過程當中遇到script也會暫停，css規則樹渲染完成前不會渲染頁面）
  • 結合dom樹和css規則樹生成渲染樹（精簡 CSS，加快 CSS 規則樹的構建，從而加快頁面相應速度是前端優化的一個點）
  • 根據渲染樹計算每個節點的信息（佈局）（佈局：經過渲染樹中渲染對象的信息，計算出每個渲染對象的位置和尺寸；迴流：在佈局完成後，發現了某個部分發生了變化影響了佈局，那就須要倒回去從新渲染）
  • 根據計算好的信息繪製頁面（繪製階段：系統會遍歷呈現樹，並調用呈現器的「paint」方法，將呈現器的內容顯示在屏幕上；重繪：某個元素的背景顏色，文字顏色等，不影響元素周圍或內部佈局的屬性，將只會引發瀏覽器的重繪；迴流：某個元素的尺寸發生了變化，則需從新計算渲染樹，從新渲染；迴流必引發重繪，重繪不必定引發迴流）

七. 斷開鏈接

  • 當數據傳送完畢，須要斷開 tcp 鏈接，此時發起 tcp 四次揮手
  1. 第一次揮手：由瀏覽器發起的，發送給服務器，我請求報文發送完了，你準備關閉吧
  2. 第二次揮手：由服務器發起的，告訴瀏覽器，我請求報文接受完了，我準備關閉了，你也準備吧
  3. 第三次揮手：由服務器發起，告訴瀏覽器，我響應報文發送完了，你準備關閉吧
  4. 第四次揮手：由瀏覽器發起，告訴服務器，我響應報文接受完了，我準備關閉了，你也準備吧

2.一次完整的 HTTP 事務是怎麼一個過程？

  1. 域名解析；
  2. 發起TCP的3次握手；
  3. 創建TCP鏈接後發起http請求；
  4. 服務器響應http請求，瀏覽器獲得html代碼；
  5. 瀏覽器解析html代碼並請求html中的資源（js，css，圖片等）；
  6. 拼接好渲染樹以後，瀏覽器渲染頁面呈現給用戶。

3.TCP和HTTP的聯繫與區別？

  1. tcp是傳輸層協議，定義數據傳輸與鏈接方式的規範，握手過程當中傳送的包裏不包含數據，三次握手以後，客戶端和服務器才正式開始傳送數據
  2. http是應用層協議，定義傳送數據內容的規範；
  3. HTTP協議中的數據是利用TCP協議傳輸的，特色是客戶端發送的每次請求都須要服務器回送響應，它是TCP協議族中的一種，默認使用 TCP 80端口；

比如網絡是路，TCP是跑在路上的車，HTTP是車上的人。每一個網站內容不同，就像車上的每一個人有不一樣的故事同樣。

4.瀏覽器是如何渲染頁面的？

  1. 處理HTML標記並構建DOM樹
  2. 處理CSS標記並構建CSSOM樹
  3. 將DOM與CSSOM合併成一個渲染樹
  4. 根據渲染樹來佈局，計算每一個節點的佈局信息
  5. 將各個節點繪製到屏幕上

5.瀏覽器的內核有哪些？分別有什麼表明的瀏覽器？

  • 5大瀏覽器：ie ，firefox， chrome，safari，opera
  • 4大內核：trident, Gecko(開源),最先chrome使用webkit，2013年之後使用webkit分支blink

6.刷新頁面，js 請求通常會有哪些地方有緩存處理？

dns緩存，cdn緩存，瀏覽器緩存，服務器緩存。

7.doctype 有什麼做用？怎麼寫？

  • DOCTYPE是document type的簡寫，它並非 HTML 標籤，也沒有結束標籤，它是一種標記語言的文檔類型聲明，即告訴瀏覽器當前 HTML 是用什麼版本編寫的。DOCTYPE的聲明必須是 HTML 文檔的第一行，位於html標籤以前。

8.列出經常使用標籤，並簡單介紹使用場景

* <a> 用於超連接。<a href="">some text</a>
* <article> 用於一篇文章。<article>a self-contained article</article>
* <aside> 用於頁面的側邊欄。<aside>some content</aside>
* <blockquote> 用於大段的引用內容。<blockquote>some big texts</blockquote>
* <body> 頁面上顯示的全部內容都被包含在<body></body>裏
* <br> 用於顯示一個換行
* <button> 用於顯示一個按鈕
* <code> 用於一包裹一段代碼內容
* <dd> 用於一個dl列表的某個dt名詞的描述
* <del> 用於刪除一些不須要的文字
* <div> 用於包裹住一些其餘的標籤，製造一個容器
* <dl> 用於製做一個名詞和對應解釋的列表
* <dt> 用於一個dl列表的某個dt名詞
* <em> 用於強調一些文本內容
* <figcaption> 用於一張圖表的說明文字
* <figure> 用於一張圖表
* <footer> 用於包裹頁面的底部內容
* <form> 用於製做一個表單
* <h1>-<h6> 用於標記標題，從h1到h6重要性依次遞減
* <head> 用於包裹頁面的元數據，如<meta>, <link>, <title>等
* <header> 用於包裹頁面的頭部內容
* <hr> 用於製造出一條分隔線
* <html> 整個 HTML 文檔的根元素，包裹住其餘全部的元素
* <iframe> 用於嵌入另外一個小頁面到一個頁面中
* <img> 用於顯示一張圖片
* <input> 用於顯示一個表格輸入控件
* <label> 用於給一個表格輸入控件打上一個標籤，說明輸入控件的做用
* <li> 用於<ul>和<ol>標籤，表明一個列表項
* <link> 用於連接外部CSS文件
* <mark> 用於高亮顯示某些文本
* <meta> 用於下達一些元數據指令，或者對頁面進行說明
* <nav> 用於包裹住一個導航條的內容
* <ol> 用於製做一個有序列表
* <p> 用於顯示一個段落
* <q> 用於一小段引用文字
* <script> 用於一段JavaScript腳本代碼，或者引入一個外部JavaScript腳本文件
* <section> 用於包裹一部分有邏輯關第的頁面內容
* <select> 用於製做一個下拉列表選框
* <span> 用於包裹住一小段文字，做爲一個容器
* <strong> 用於着重強調重要的文本內容
* <style> 用於給頁面元素加上樣式
* <sub> 用於下標文本
* <sup> 用於上標文本
* <table> 用於製做一個表格
* <tbody> 用於表格裏的主體部分
* <td> 用於表格裏的某一個單元格
* <textarea> 用於製做一大塊文本輸入框
* <tfoot> 用於表格裏的底部
* <th> 用於表格裏的表頭的單元格
* <thead> 用於表格裏的表頭
* <time> 用於頁面內容中的時間
* <title> 用於顯示整個頁面的標題（顯示在瀏覽器的tab上）
* <tr> 用於標記表格裏的一行
* <ul> 用於製做一個無序列表   
複製代碼

9.頁面出現了亂碼，是怎麼回事？如何解決？

  • 頁面編碼不對，html文件頭部設置編碼格式，通常設置爲utf-8

10.title 屬性和 alt 屬性分別有什麼做用？

  • alt屬性：使用alt屬性是爲了給那些不能看到你文檔中圖像的瀏覽者提供文字說明；
  • title屬性：
    1. title屬性爲設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。大部分的可視化瀏覽器在鼠標懸浮在特定元素上時顯示title文字爲提示信息（tool tip），然而這又由製造商來決定如何渲染title文字。
    2. title屬性有一個很好的用途，即爲連接添加描述性文字，特別是當鏈接自己並非十分清楚的表達了連接的目的。這樣就使得訪問者知道那些連接將會帶他們到什麼地方，他們就不會加載一個可能徹底不感興趣的頁面。另一個潛在的應用就是爲圖像提供額外的說明信息，好比日期或者其餘非本質的信息。
    3. title屬性能夠用在除了base，basefont，head，html，meta，param，script和title以外的全部標籤。可是並非必須的.

11.html註釋怎麼寫？

<!-- 註釋 -->
複製代碼

12.HTML5 爲何只寫 ？

  • HTML 4.01 中的 doctype 須要對 DTD 進行引用，由於 HTML 4.01 基於 SGML。而 HTML 5 不基於 SGML，所以不須要對 DTD 進行引用，可是須要 doctype 來規範瀏覽器的行爲.

13.data- 屬性的做用？

<div id="box" data-name='ghostwu' data-age='22' , data-sex='man'>ghostwu tell you how to learn html5</div>
    <script>
        var oBox = document.querySelector("#box");
        console.log( oBox.dataset ) ;
        var myName = oBox.dataset.name;
        var myAge = oBox.dataset.age;
        var mySex = oBox.dataset.sex;
        if( oBox.dataset.name ) {
            console.log( oBox.dataset.name );
        }
    </script>
複製代碼
  • HTML5規定能夠爲元素添加非標準的屬性，但要添加前綴 data- ，目的是爲元素提供與渲染無關的信息，或者提供語義信息。這些屬性能夠任意添加、隨便命名，只要以 data- 開頭便可添加了自定義屬性以後，能夠經過元素的 dataset 屬性來訪問自定義屬性的值。

14. 的 title 和 alt 有什麼區別？

  • 有兩個必需的屬性，src和alt；
  • alt屬性是爲了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的；
  • title是對圖片的說明和額外補充，若是須要在鼠標通過圖片時出現文字提示應該用屬性title

15.WEB 標準以及 W3C 標準是什麼？

  • web標準簡單來講能夠分爲結構，表現，行爲，web標準是三部分分開，使其模塊化；但通常產生行爲時，就會有結構和表現的變化，使三者界限不那麼清晰。
  • W3C對web標準提出了規範化的要求，也就是在實際編程中的一些代碼規範：包含以下幾點：
  1. 標籤字母要小寫；
  2. 標籤要閉合；
  3. 標籤不容許隨意嵌套；
  4. css和js
    （1）儘可能使用外鏈css樣式表和js腳本； （2）樣式儘可能少用行間樣式表，使結構與表現分離，標籤的id和class等屬性命名要作到見文知義，標籤越少，加載越快，用戶體驗提升，代碼維護簡單，便於改版； （3）不須要變更頁面內容，即可提供打印版本而不須要複製內容，提升網站易用性。

16.嚴格模式與混雜模式如何區分？它們有何意義?

  • 嚴格模式：又稱標準模式，是指瀏覽器按照 W3C 標準解析代碼。
  • 又稱怪異模式或兼容模式，是指瀏覽器用本身的方式解析代碼

注意：DOCTYPE 不存在或形式不正確會致使文檔以混雜模式呈現

17.HTML 全局屬性（global attribute）有哪些？

accesskey   設置訪問元素的鍵盤快捷鍵。
class   規定元素的類名（classname）
contenteditable 規定是否可編輯元素的內容。
contextmenu 指定一個元素的上下文菜單。當用戶右擊該元素，出現上下文菜單
data-*  用於存儲頁面的自定義數據
dir 設置元素中內容的文本方向。
draggable   指定某個元素是否能夠拖動
dropzone    指定是否將數據複製，移動，或連接，或刪除
hidden  hidden 屬性規定對元素進行隱藏。
id  規定元素的惟一 id
lang    設置元素中內容的語言代碼。
spellcheck  檢測元素是否拼寫錯誤
style   規定元素的行內樣式（inline style）
tabindex    設置元素的 Tab 鍵控制次序。
title   規定元素的額外信息（可在工具提示中顯示）
translate   指定是否一個元素的值在頁面載入時是否須要翻譯
複製代碼

18.如何在 html 頁面上展現 div div 這幾個字符？

  • 使用轉義符號,/無需轉義

19.你是如何理解 HTML 語義化的？

  • 講到語義化，咱們首先來聊聊html語義化的背景，HTML結構語義化，是最近幾年才提出來的，之前的html結構，都是一堆的沒有語義的冷冰冰的標籤。最氾濫的就是div+css,之前的頁面，你一打來就是一堆的div+css, 爲了改變這種這種情況，開發者們和官方提出了讓HTML結構語義化的概念，而且官方w3c，也在HTML5給出了幾個新的語義化的標籤。
  • 1， 首先、語義化，故名思意，就是你寫的HTml結構，是用相對應的有必定語義的英文字母（標籤）表示的，標記的，由於HTML自己就是標記語言。不只對本身來講，容易閱讀，書寫。別人看你的代碼和結構也容易理解，甚至對一些不是作網頁開發的人來講，也容易閱讀。那麼，咱們之後再開發的過程當中，必定要注意了，儘可能使用官方的有語義的標籤，不要再使用一堆無心義的標籤去堆你的結構。怎麼知道，本身的頁面結構是否語義化，那就要看你的HTML結構，在去掉CSS樣式表以後，是否，依然能很好的呈現內容的結構，代碼結構。也就是說，脫掉css的外衣，依然頭是頭，腳是腳。赤裸裸的完整的一篇文檔。這也就是，語義化以後文檔的效果。 2，其次、其實語義化，也無非就是本身在使用標籤的時候多使用有英文語義的標籤，好比標籤，覺得head(頭)，在HTML中就是就是用來定義標題，還有p標籤，英文是pagrapph段落，table表格標籤,等等。

20.前端須要注意哪些 SEO?

  1. 合理的title,description,keyword;
  2. html語義化標籤，符合w3c標準；
  3. 最重要的html代碼放在最前面；
  4. 重要的內容不要用js輸出，爬蟲不會獲取js獲取內容；
  5. 少用iframe，由於搜索引擎不會抓取iframe中的內容；
  6. 非裝修性的圖片必須加alt；
  7. 提升網站速度，網站速度是搜索引擎排序的一個重要指標；

21.post 和 get 方式提交數據有什麼區別？

  • 其實，GET和POST本質上二者沒有任何區別。他們都是HTTP協議中的請求方法。底層實現都是基於TCP/IP協議。上述的所謂區別，只是瀏覽器廠家根據約定，作得限制而已。
  • 冪等性本來是數學上的概念，即便公式：f(x)=f(f(x)) 可以成立的數學性質。用在編程領域，則意爲對同一個系統，使用一樣的條件，一次請求和重複的屢次請求對系統資源的影響是一致的。 冪等性是分佈式系統設計中十分重要的概念，具備這一性質的接口在設計時老是秉持這樣的一種理念：調用接口發生異常而且重複嘗試時，老是會形成系統所沒法承受的損失，因此必須阻止這種現象的發生。
  1. OPTIONS 返回服務器所支持的請求方法
  2. GET 向服務器獲取指定資源
  3. HEAD 與GET一致，只不過響應體不返回，只返回響應頭
  4. POST 向服務器提交數據，數據放在請求體裏
  5. PUT 與POST類似，只是具備冪等特性，通常用於更新
  6. DELETE 刪除服務器指定資源
  7. TRACE 回顯服務器端收到的請求，測試的時候會用到這個
  8. CONNECT 預留，暫無使用

22.HTTP狀態碼

  • HTTP協議中提供了好多狀態碼，列舉咱們經常使用的：
  1. 200 返回正常
  2. 304 服務端資源無變化，可以使用緩存資源
  3. 400 請求參數不合法
  4. 401 未認證
  5. 403 服務端禁止訪問該資源
  6. 404 服務端未找到該資源
  7. 500 服務端異常

23.在 input 裏，name 有什麼做用？

  • 用途1： 做爲可與服務器交互數據的HTML元素的服務器端的標示，好比input、select、textarea、和button等。咱們能夠在服務器端根據其Name經過Request.Params取得元素提交的值。

  • 用途2： HTML元素Input type='radio'分組，咱們知道radio button控件在同一個分組類，check操做是mutex的，同一時間只能選中一個radio，這個分組就是根據相同的Name屬性來實現的。

  • 用途3： 創建頁面中的錨點，咱們知道link是得到一個頁面超級連接，若是不用href屬性，而改用Name，如：，咱們就得到了一個頁面錨點。

  • 用途4： 做爲對象的Identity，如Applet、Object、Embed等元素。好比在Applet對象實例中，咱們將使用其Name來引用該對象。

  • 用途5： 在IMG元素和MAP元素之間關聯的時候，若是要定義IMG的熱點區域，須要使用其屬性usemap，使usemap="#name"(被關聯的MAP元素的Name)。

  • 用途6： 某些特定元素的屬性，如attribute，meta和param。例如爲Object定義參數或Meta中。

24.label 有什麼做用？如何使用？

  • Label標籤有兩個屬性，一個是for，一個是 accesskey。 for功能：表示這個Label是爲哪一個控件服務的，Label標籤要綁定了for指定HTML元素的ID或name屬性，你點擊這個標籤的時候，所綁定的元素將獲取焦點 ，點擊label所包裹內容，自動指向for指定的id或name accesskey則定義了訪問這個控件的熱鍵( 所設置的快捷鍵不能與瀏覽器的快捷鍵衝突，不然將優先激活瀏覽器的快捷鍵)
<label for="username">姓名</label><input id="username" type="text">
<label for="username" accesskey＝"N">姓名</label><input id="username" type="text">
複製代碼

25.radio 如何分組？

<form>
    <input type="radio" name="sex" value="male"> 男 <br>
    <input type="radio" name="sex" value="female"> 女<br>
    <input type="radio" name="age" value="adult"> 已成年<br>
    <input type="radio" name="age" value="child"> 未成年
  </form>
複製代碼

26.placeholder 屬性有什麼做用？

placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。
該提示會在輸入字段爲空時顯示，並會在字段得到焦點時消失。
註釋：placeholder 屬性適用於如下的 <input> 類型：text, search, url, telephone, email 以及 password。
複製代碼

27.type=hidden 隱藏域有什麼做用？舉例說明

  • 一、隱藏域在頁面中對於用戶是不可見的，在表單中插入隱藏域的目的在於收集或發送信息，以利於被處理表單的程序所使用。瀏覽者單擊發送按鈕發送表單的時候，隱藏域的信息也被一塊兒發送到服務器。
  • 二、有些時候咱們要給用戶一信息，讓他在提交表單時提交上來以肯定用戶身份，如sessionkey，等等．固然這些東西也能用cookie實現，但使用隱藏域就簡單的多了．並且不會有瀏覽器不支持，用戶禁用cookie的煩惱。
  • 三、有些時候一個form裏有多個提交按鈕，怎樣使程序可以分清楚到底用戶是按那一個按鈕提交上來的呢？咱們就能夠寫一個隱藏域，而後在每個按鈕處加上 onclick="document.form.command.value="xx""而後咱們接到數據後先檢查command的值就會知道用戶是按的那個按鈕提交上來的。
  • 四、有時候一個網頁中有多個form，咱們知道多個form是不能同時提交的，但有時這些form確實相互做用，咱們就能夠在form中添加隱藏域來使它們聯繫起來。
  • 五、javascript不支持全局變量，但有時咱們必須用全局變量，咱們就能夠把值先存在隱藏域裏，它的值就不會丟失了。
  • 六、還有個例子，好比按一個按鈕彈出四個小窗口，當點擊其中的一個小窗口時其餘三個自動關閉．但是IE不支持小窗口相互調用，因此只有在父窗口寫個隱藏域，當小窗口看到那個隱藏域的值是close時就本身關掉

28.CSRF 攻擊是什麼？如何防範？

  • 咱們首先來認識一下CSRF。CSRF（Cross-site request forgery）也被稱爲 one-click attack或者 session riding，中文全稱是叫跨站請求僞造。通常來講，攻擊者經過僞造用戶的瀏覽器的請求，向訪問一個用戶本身曾經認證訪問過的網站發送出去，使目標網站接收並誤覺得是用戶的真實操做而去執行命令。經常使用於盜取帳號、轉帳、發送虛假消息等。攻擊者利用網站對請求的驗證漏洞而實現這樣的攻擊行爲，網站可以確認請求來源於用戶的瀏覽器，卻不能驗證請求是否源於用戶的真實意願下的操做行爲。
    1. 驗證 HTTP Referer 字段
    2. 使用驗證碼
    3. 在請求地址中添加token並驗證
    4. 在HTTP 頭中自定義屬性並驗證

29.網頁驗證碼是幹嗎的？是爲了解決什麼安全問題？

  • 防止惡意註冊和暴力破解,爲了網絡安全。

30.常見 web 安全及防禦原理？

  1. sql 注入；
  2. Xss攻擊；
  3. CSRF攻擊

31.CSS 加載方式有幾種？

  • 外部樣式表
  1. 經過link引用css；
  2. 導入樣式 @important；
  • 內部樣式表
  • 內聯樣式

32.@import 有什麼做用？如何使用？

  • @import（url），@import先加載html，後加載css；link先加載css再加載html，如今通常都採用link的方式。

33. CSS 選擇器常見的有幾種？

  1. 標籤；
  2. 類；
  3. id；
  4. 通用；
  5. 並集；
  6. 交集；
  7. 後代；
  8. 子代；
  9. 僞類；

34.id 選擇器和 class 選擇器的使用場景分別是什麼？

  • 同一個html頁面中，id惟一，class不惟一

35. @charset 有什麼做用？

  • 在外部樣式表文件內使用。指定該樣式表使用的字符編碼。

36.簡述 src 和 href 的區別？

  • src用於替換當前元素，是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。href用於在當前文檔和引用資源之間確立聯繫，是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。

37.僞類選擇器有哪些？

:active
:any
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited
複製代碼

38.僞元素選擇器有哪些？

::after
::before
::first-letter
::first-line
::selection
::backdrop
複製代碼

39.僞類與僞元素區別？

  • 在選擇器系列文章的第三篇中，咱們討論僞選擇器，該選擇器不是選擇元素，而是元素的某些部分，或僅在某些特定上下文中存在的元素。它們有兩種主要類型 ： 僞類和僞元素。
  • 僞類：一個 CSS 僞類（pseudo-class） 是一個以冒號(:)做爲前綴，被添加到一個選擇器末尾的關鍵字，當你但願樣式在特定狀態下才被呈現到指定的元素時，你能夠往元素的選擇器後面加上對應的僞類（pseudo-class）。你可能但願某個元素在處於某種狀態下呈現另外一種樣式，例如當鼠標懸停在元素上面時，或者當一個複選框被禁用或被勾選時，又或者當一個元素是它在 DOM 樹中父元素的第一個子元素時。
  • 僞元素：僞元素（Pseudo-element）跟僞類很像，但它們又有不一樣的地方。它們都是關鍵字，但此次僞元素前綴是兩個冒號 (::) ， 一樣是添加到選擇器後面去選擇某個元素的某個部分

40.選擇器的優先級是如何計算的？

  • 第一優先級：無條件優先的屬性只須要在屬性後面使用！important。它會覆蓋頁面內任何位置定義的元素樣式。ie6不支持該屬性。
  • 第二優先級：在html中給元素標籤加style，即內聯樣式。該方法會形成css難以管理，因此不推薦使用。
  • 第三優先級：由一個或多個id選擇器來定義。例如，#id{margin:0;}會覆蓋.classname{margin:3pxl}
  • 第四優先級：由一個或多個類選擇器、屬性選擇器、僞類選擇器定義。如.classname{margin:3px}會覆蓋div{margin:6px;}
  • 第五優先級：由一個或多個類型選擇器定義。如div{marigin:6px;}覆蓋*{margin:10px；}
  • 第六優先級：通配選擇器，如*{marigin:6px;}

41.什麼是 CSS 繼承？哪些屬性能繼承，哪些不能？

  • CSS繼承可定義爲特定的css屬性向下傳遞到子孫元素，就是指被包在內部的標籤將擁有外部標籤的樣式，即子元素能夠繼承父元素的屬性。
  • 能夠繼承的屬性：
  1. 字體系列屬性：font,font-family,font-weight,font-size,font-style;
  2. 文本系列屬性：
  • 內聯元素：color,line-height,word-space,letter-space,text-transform;
  • 塊級元素：text-indent,text-align
  1. 元素可見性：visibility
  2. 表格佈局屬性: caption-side、border-collapse、border-spacing、empty-cells、table-layout;
  3. 列表佈局屬性: list-style
  4. 生成內容屬性: quotes
  5. 光標屬性: cursor
  6. 頁面樣式屬性: page、page-break-inside、windows、orphans;
  7. 聲音樣式屬性: speak、speech-rate、volume、voice-family、pitch、stress、elevation;
  • 不能夠繼承的屬性：
  1. display： 規定元素應該生成的框的類型；
  2. 文本屬性： vertical-align、text-decoration;
  3. 盒子模型的屬性：width、height、margin 、border、padding;
  4. 背景屬性：background、background-color、background-image;
  5. 定位屬性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip;
  6. 生成內容屬性：content、counter-reset、counter-increment（實現標籤添加序號）;
  7. 輪廓樣式屬性：outline-style、outline-width、outline-color、outline;
  8. 頁面樣式屬性：size、page-break-before、page-break-after;
  9. 聲音樣式屬性：pause、cue、play-during;

42.你有沒有使用過視網膜分辨率的圖形？當中使用什麼技術？

43.addEventListener用法詳解

  • target.addEventListener(type, listener, useCapture); target 文檔節點、document、window 或 XMLHttpRequest。 type 字符串，事件名稱，不含「on」，好比「click」、「mouseover」、「keydown」等。 listener 實現了 EventListener 接口或者是 JavaScript 中的函數。 useCapture 是否使用捕捉，看了後面的事件流一節後就明白了，通常用 false。
  • addEventListener－事件流

說到 addEventListener 不得不說到事件流，先說事件流對後面的解釋比較方便。

當一個事件發生時，分爲三個階段：

捕獲階段 從根節點開始順序而下，檢測每一個節點是否註冊了事件處理程序。若是註冊了事件處理程序，而且 useCapture 爲 true，則調用該事件處理程序。（IE 中無此階段。）

目標階段 觸發在目標對象自己註冊的事件處理程序，也稱正常事件派發階段。

冒泡階段 從目標節點到根節點，檢測每一個節點是否註冊了事件處理程序，若是註冊了事件處理程序，而且 useCapture 爲 false，則調用該事件處理程序。

舉例

<div id="div1">
  <div id="div2">
    <div id="div3">
      <div id="div4">
      </div>
    </div>
  </div>
</div>
複製代碼

若是在 d3 上點擊鼠標，事件流是這樣的：

捕獲階段 在 div1 處檢測是否有 useCapture 爲 true 的事件處理程序，如有，則執行該程序，而後再一樣地處理 div2。

目標階段 在 div3 處，發現 div3 就是鼠標點擊的節點，因此這裏爲目標階段，如有事件處理程序，則執行該程序，這裏不論 useCapture 爲 true 仍是 false。

冒泡階段 在 div2 處檢測是否有 useCapture 爲 false 的事件處理程序，如有，則執行該程序，而後再一樣地處理 div1。

注意，上述捕獲階段和冒泡階段中，實際上 div1 之上還應該有結點，好比有 body，但這裏不討論。

  • addEventListener 有三個參數：第一個參數表示事件名稱（不含 on，如 "click"）；第二個參數表示要接收事件處理的函數；第三個參數爲 useCapture，本文就講解它。
<div id="outDiv">
  <div id="middleDiv">
    <div id="inDiv">請在此點擊鼠標。</div>
  </div>
</div>
<div id="info"></div>
var outDiv = document.getElementById("outDiv");
var middleDiv = document.getElementById("middleDiv");
var inDiv = document.getElementById("inDiv");
var info = document.getElementById("info");
outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);
複製代碼

上述是咱們測試的代碼，根據 info 的顯示來肯定觸發的順序，有三個 addEventListener，而 useCapture 可選值爲 true 和 false，因此 222，能夠得出 8 段不一樣的程序。

全爲 false 時，觸發順序爲：inDiv、middleDiv、outDiv； 全爲 true 時，觸發順序爲：outDiv、middleDiv、inDiv； outDiv 爲 true，其餘爲 false 時，觸發順序爲：outDiv、inDiv、middleDiv； middleDiv 爲 true，其餘爲 false 時，觸發順序爲：middleDiv、inDiv、outDiv； …… 最終得出以下結論：

true 的觸發順序老是在 false 以前； 若是多個均爲 true，則外層的觸發先於內層； 若是多個均爲 false，則內層的觸發先於外層。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程