面試題一 2018-01-03

時間 2019-11-17

原文原文鏈接

複習吧javascript

15 16 17 都不懂

HTML 

1 Doctype 做用？嚴格模式與混雜模式如何區分？它們有何意義?
  （1）、<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html> 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。
  （2）、標準模式的排版 和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。

2 HTML5 爲何只須要寫 <!DOCTYPE HTML>？
   HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；
   而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

3 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內：b strong i em sup sub u s span a img input select option textarea button iframe meta time mark label
塊級：h1 h6 div p hr pre table ul li ol dl dt dd form 
  （3）常見的空元素：
      <br> <hr> <img> <input> <link> <meta>
      不爲人知的是：
      <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

4 頁面導入樣式時，使用link 和@import有什麼區別？
  （1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;
  （2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
  （3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;

5 介紹一下你對瀏覽器內核的理解？
  主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
  渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。
  JS引擎則：解析和執行javascript來實現網頁的動態效果。
  最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

6 常見的瀏覽器內核有哪些？
  Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
  Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
  Presto內核：Opera7及以上。      [Opera內核原爲：Presto，現爲：Blink;]
  Webkit內核：Safari,Chrome等。   [ Chrome的：Blink（WebKit的分支）]

 7 html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
   * HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
        繪畫 canvas;
        用於媒介回放的 video 和 audio 元素;
        本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
        sessionStorage 的數據在瀏覽器關閉後自動刪除;
        語意化更好的內容元素，好比 article、footer、header、nav、section;
        表單控件，calendar、date、time、email、url、search;
        新的技術webworker, websocket, Geolocation;

    移除的元素：
        純表現的元素：basefont，big，center，font, s，strike，tt，u;
        對可用性產生負面影響的元素：frame，frameset，noframes；

  * 支持HTML5新標籤：
       IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
         能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
         瀏覽器支持新標籤後，還須要添加標籤默認的樣式。

       固然也能夠直接使用成熟的框架、好比html5shim;
       <!--[if lt IE 9]>
          <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
       <![endif]-->

  * 如何區分HTML5： DOCTYPE聲明\新增的結構元素\功能元素

8 簡述一下你對HTML 語義化的理解？
   用正確的標籤作正確的事情。
  html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
  即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的;
  搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;
  使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

9 HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？
   在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。
  原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。  如何使用：
  (1)、頁面頭部像下面同樣加入一個manifest的屬性；
  (2)、在cache.manifest文件的編寫離線存儲的資源；
      CACHE MANIFEST
      #v0.11
      CACHE:
      js/app.js
      css/style.css
      NETWORK:
      resourse/logo.png
      FALLBACK:
      / /offline.html
  (3)、在離線狀態時，操做window.applicationCache進行需求實現。
    詳細的使用請參考：
    HTML5 離線緩存-manifest簡介
    有趣的HTML5：離線存儲
    博客：https://www.cnblogs.com/shoestrong/p/6435169.html

10 瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？
  在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。
  離線的狀況下，瀏覽器就直接使用離線存儲的資源。
  詳細請參考：有趣的HTML5：離線存儲

11 請描述一下 cookies，sessionStorage 和 localStorage 的區別？
  cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。
  cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。
  sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

  存儲大小：
      cookie數據大小不能超過4k。
      sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

  有期時間：
      localStorage    存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
      sessionStorage  數據在當前瀏覽器窗口關閉後自動刪除。
      cookie          設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

12 iframe 有那些缺點？
  *iframe會阻塞主頁面的Onload事件；
  *搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;
  *iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
  使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript
  動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

13 Label 的做用是什麼？是怎麼用的？（加 for 或 包裹）
  label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。
  <label for="Name">Number:</label>
  <input type=「text「name="Name" id="Name"/>
  <label>Date:<input type="text" name="B"/></label>

14 HTML5的form 如何關閉自動完成功能？
給不想要提示的 form 或某個 input 設置爲 autocomplete=off。
或者：<input type="password" name="password1"  style="display:none"/>   
<input type="password" name="password" />  

15 如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)
  WebSocket、SharedWorker；
  WebSocket：https://www.w3cschool.cn/html5/html5-websocket.html
  也能夠調用localstorge、cookies等本地存儲方式；
  localstorge另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，
  咱們經過監聽事件，控制它的值來進行頁面信息通訊；
  window.addEventListener("storage",function(event){  
        $("#name").val(event.key+」=」+event.newValue);  
    }); 
  注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；
  WebSocket是HTML5開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議。
    在WebSocket API中，瀏覽器和服務器只須要作一個握手的動做，而後，瀏覽器和服務器之間就造成了一條快速通道。二者之間就直接能夠數據互相傳送。
    瀏覽器經過 JavaScript 向服務器發出創建 WebSocket 鏈接的請求，鏈接創建之後，客戶端和服務器端就能夠經過 TCP 鏈接直接交換數據。
    當你獲取 Web Socket 鏈接後，你能夠經過 send() 方法來向服務器發送數據，並經過 onmessage 事件來接收服務器返回的數據。
    如下 API 用於建立 WebSocket 對象。
    var Socket = new WebSocket(url, [protocal] );
    以上代碼中的第一個參數 url, 指定鏈接的 URL。第二個參數 protocol 是可選的，指定了可接受的子協議。

16 webSocket 如何兼容低瀏覽器？(阿里)
  Adobe Flash Socket 、
  ActiveX HTMLFile (IE) 、
  基於 multipart 編碼發送 XHR 、
  基於長輪詢的 XHR

17 頁面可見性（Page Visibility API）能夠有哪些用途？
  經過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
  在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻的播放；

18 如何在頁面上實現一個圓形的可點擊區域？
    參考：https://www.cnblogs.com/guorange/p/7155164.html
  一、map+area或者svg
  二、border-radius：先實現一個正方向區域，而後border-radius:50%;將直角變成圓角
  3、純js實現 須要求一個點在不在圓上簡單算法、獲取鼠標座標等等

19 實現不使用 border 畫出1px 高的線，在不一樣瀏覽器的Quirksmode（怪異模式） 和CSSCompat （標準模式）模式下都能保持同一效果。
<div style="height:1px;overflow:hidden;background:red"></div>

20 網頁驗證碼是幹嗎的，是爲了解決什麼安全問題？
  區分用戶是計算機仍是人的公共全自動程序。能夠防止惡意破解密碼、刷票、論壇灌水；
  有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試。

21 title 與h1的區別、b 與strong 的區別、i 與em 的區別？
  title屬性的話，當鼠標放上去，title會有懸浮；是元素的話，在head裏面，瀏覽器會以特殊的方式來使用標題，而且一般把它放置在瀏覽器窗口的標題欄或狀態欄上。一樣，當把文檔加入用戶的連接列表或者收藏夾或書籤列表時，標題將成爲該文檔連接的默認名稱。
  title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；
  strong是標明重點內容，有語氣增強的含義，使用閱讀設備閱讀網絡時：<strong>會重讀，而<B>是展現強調內容。
  i內容展現爲斜體，em表示強調的文本；
  b,strong都會加粗， i em都會字體傾斜；
  主要是語義化；



CSS

22 介紹一下標準的CSS 的盒子模型？低版本IE 的盒子模型有什麼不一樣的？
  （1）有兩種， IE 盒子模型、W3C 盒子模型；
  （2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
  （3）區  別： IE的content部分把 border 和 padding計算了進去;

24 CSS 選擇符有哪些？哪些屬性能夠繼承？
  *   1.id選擇器（ # myid）
      2.類選擇器（.myclassname）
      3.標籤選擇器（div, h1, p）
      4.相鄰選擇器（h1 + p）
      5.子選擇器（ul > li）
      6.後代選擇器（li a）
      7.通配符選擇器（ * ）
      8.屬性選擇器（a[rel = "external"]）
      9.僞類選擇器（a:hover, li:nth-child）
  *   可繼承的樣式： font-size font-family color, UL LI DL DD DT;
  *   不可繼承的樣式：border padding margin width height ;

25 CSS 優先級算法如何計算？
  *   優先級就近原則，同權重狀況下樣式定義最近者爲準;
  *   載入樣式以最後載入的定位爲準;
  優先級爲:
      同權重: 內聯樣式表（標籤內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。
      !important >  id > class > tag
      important 比 內聯優先級高

26 CSS3新增僞類有那些？
      舉例：
      p:first-of-type    選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
      p:last-of-type    選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
      p:only-of-type    選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
      p:only-child        選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
      p:nth-child(2)    選擇屬於其父元素的第二個子元素的每一個 <p> 元素。

      ::after            在元素以前添加內容,也能夠用來作清除浮動。
      ::before            在元素以後添加內容
      :enabled          
      :disabled         控制表單控件的禁用狀態。
      :checked        單選框或複選框被選中。

27 如何居中div ？
    水平居中：給div設置一個寬度，而後添加margin:0 auto屬性

     div{
         width:200px;
         margin:0 auto;
      }
    讓絕對定位的div居中

     div {
         position: absolute;
         width: 300px;
         height: 300px;
         margin: auto;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         background-color: pink;    /* 方便看效果 */
     }
    水平垂直居中一

     肯定容器的寬高 寬500 高 300 的層
     設置層的外邊距

     div {
         position: relative;        /* 相對定位或絕對定位都可 */
         width:500px;
         height:300px;
         top: 50%;
         left: 50%;
         margin: -150px 0 0 -250px;         /* 外邊距爲自身寬高的一半 */
         background-color: pink;         /* 方便看效果 */

      }
    水平垂直居中二

     未知容器的寬高，利用 `transform` 屬性

     div {
         position: absolute;        /* 相對定位或絕對定位都可 */
         width:500px;
         height:300px;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         background-color: pink;         /* 方便看效果 */

     }
    水平垂直居中三

     利用 flex 佈局
     實際使用時應考慮兼容性

     .container {
         display: flex;
         align-items: center;         /* 垂直居中 */
         justify-content: center;    /* 水平居中 */

     }
     .container div {
         width: 100px;
         height: 100px;
         background-color: pink;        /* 方便看效果 */
     } 
28 如何居中一個浮動元素？
29 如何讓絕對定位的div 居中？
30 display 有哪些值？說明他們的做用。
    block           塊類型。默認寬度爲父元素寬度，可設置寬高，換行顯示。
    none            缺省值。象行內元素類型同樣顯示。
    inline          行內元素類型。默認寬度爲內容寬度，不可設置寬高，同行顯示。
    inline-block  默認寬度爲內容寬度，能夠設置寬高，同行顯示。
    list-item       象塊類型元素同樣顯示，並添加樣式列表標記。
    table           此元素會做爲塊級表格來顯示。
    inherit         規定應該從父元素繼承 display 屬性的值。

31 position 的值relative 和absolute 定位原點是？
    absolute
      生成絕對定位的元素，相對於值不爲 static的第一個父元素進行定位。
    fixed （老IE不支持）
      生成絕對定位的元素，相對於瀏覽器窗口進行定位。
    relative
      生成相對定位的元素，相對於其正常位置進行定位。
    static
      默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 聲明）。
    inherit
      規定從父元素繼承 position 屬性的值。

32 CSS3有哪些新特性？
    新增各類CSS選擇器    （: not(.input)：全部 class 不是「input」的節點）
    圓角            （border-radius:8px）
    多列布局        （multi-column layout）
    陰影和反射    （Shadow\Reflect）
    文字特效        （text-shadow、）
    文字渲染        （Text-decoration）
    線性漸變        （gradient）
    旋轉             （transform）
    縮放,定位,傾斜,動畫,多背景
    例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

33 請解釋一下CSS3的Flexbox （彈性盒佈局模型）, 以及適用場景？
   一個用於頁面佈局的全新CSS3功能，Flexbox能夠把列表放在同一個方向（從上到下排列，從左到右），並讓列表能延伸到佔用可用的空間。
   較爲複雜的佈局還能夠經過嵌套一個伸縮容器（flex container）來實現。
   採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱"容器"。
   它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱"項目"。
   常規佈局是基於塊和內聯流方向，而Flex佈局是基於flex-flow流能夠很方便的用來作局中，能對不一樣屏幕大小自適應。
   在佈局上有了比之前更加靈活的空間。
   具體：http://www.w3cplus.com/css3/flexbox-basics.html

34 用純CSS 建立一個三角形的原理是什麼？
  把上、左、右三條邊隱藏掉（顏色設爲 transparent）
  #demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
  }

35 一個滿屏 品 字佈局 如何設計? 
  簡單的方式：
      上面的div寬100%，
      下面的兩個div分別寬50%，
      而後用float或者inline使其不換行便可

36 常常遇到的瀏覽器的兼容性有哪些？緣由，解決方法是什麼，經常使用hack 的技巧 ？
      * png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.

      * 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

      * IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。

        浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

        這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

        漸進識別的方式，從整體中逐漸排除局部。

        首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。
        接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

        css
            .bb{
                background-color:red;/*全部識別*/
                background-color:#00deff\9; /*IE六、七、8識別*/
                +background-color:#a200ff;/*IE六、7識別*/
                _background-color:#1e0bd1;/*IE6識別*/
            }


      *  IE下,可使用獲取常規屬性的方法來獲取自定義屬性,
         也可使用getAttribute()獲取自定義屬性;
         Firefox下,只能使用getAttribute()獲取自定義屬性。
         解決方法:統一經過getAttribute()獲取自定義屬性。

      *  IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性;
         Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性。

      *  解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

      *  Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,
         可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

      超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:
      L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

37 li 與li 之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？
  行框的排列會受到中間空白（回車\空格）等的影響，由於空格也屬於字符,這些空白也會被應用樣式，佔據空間，因此會有間隔，把字符大小設爲0，就沒有空格了。

38 爲何要初始化CSS 樣式?
      - 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。
      - 固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。
      最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）
      淘寶的樣式初始化代碼：
      body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
      body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
      h1, h2, h3, h4, h5, h6{ font-size:100%; }
      address, cite, dfn, em, var { font-style:normal; }
      code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
      small{ font-size:12px; }
      ul, ol { list-style:none; }
      a { text-decoration:none; }
      a:hover { text-decoration:underline; }
      sup { vertical-align:text-top; }
      sub{ vertical-align:text-bottom; }
      legend { color:#000; }
      fieldset, img { border:0; }
      button, input, select, textarea { font-size:100%; }
      table { border-collapse:collapse; border-spacing:0; }

39 css多列等高如何實現？
  利用padding-bottom|margin-bottom正負值相抵；
  設置父容器設置超出隱藏（overflow:hidden），這樣子父容器的高度就仍是它裏面的列沒有設定padding-bottom時的高度，
  當它裏面的任 一列高度增長了，則父容器的高度被撐到裏面最高那列的高度，
  其餘比這列矮的列會用它們的padding-bottom補償這部分高度差。

2018.01.03日複習這個，vue複習的半途，發現最近效率狀態很差，換一個：15 16 17 都不懂
HTML
1 Doctype 做用？嚴格模式與混雜模式如何區分？它們有何意義? （1）、<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html> 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。（2）、標準模式的排版和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。
2 HTML5 爲何只須要寫 <!DOCTYPE HTML>？ HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
3 行內元素有哪些？塊級元素有哪些？空(void)元素有那些？行內：b strong i em sup sub u s span a img input select option textarea button iframe meta time mark label塊級：h1 h6 div p hr pre table ul li ol dl dt dd form   （3）常見的空元素： <br> <hr> <img> <input> <link> <meta> 不爲人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
4 頁面導入樣式時，使用link 和@import有什麼區別？（1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS; （2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載; （3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;
5 介紹一下你對瀏覽器內核的理解？主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。 JS引擎則：解析和執行javascript來實現網頁的動態效果。最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。
6 常見的瀏覽器內核有哪些？ Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML] Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等 Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;] Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
7 html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？ * HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。繪畫 canvas; 用於媒介回放的 video 和 audio 元素; 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失; sessionStorage 的數據在瀏覽器關閉後自動刪除; 語意化更好的內容元素，好比 article、footer、header、nav、section; 表單控件，calendar、date、time、email、url、search; 新的技術webworker, websocket, Geolocation;
移除的元素：純表現的元素：basefont，big，center，font, s，strike，tt，u; 對可用性產生負面影響的元素：frame，frameset，noframes；
* 支持HTML5新標籤： IE8/IE7/IE6支持經過document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式。
固然也能夠直接使用成熟的框架、好比html5shim; 
* 如何區分HTML5： DOCTYPE聲明\新增的結構元素\功能元素
8 簡述一下你對HTML 語義化的理解？用正確的標籤作正確的事情。 html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析; 即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的; 搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO; 使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
9 HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。如何使用： (1)、頁面頭部像下面同樣加入一個manifest的屬性； (2)、在cache.manifest文件的編寫離線存儲的資源； CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html (3)、在離線狀態時，操做window.applicationCache進行需求實現。詳細的使用請參考：HTML5 離線緩存-manifest簡介有趣的HTML5：離線存儲博客：https://www.cnblogs.com/shoestrong/p/6435169.html
10 瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。離線的狀況下，瀏覽器就直接使用離線存儲的資源。詳細請參考：有趣的HTML5：離線存儲
11 請描述一下 cookies，sessionStorage 和 localStorage 的區別？ cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。 cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小： cookie數據大小不能超過4k。 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。
有期時間： localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據； sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。 cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉
12 iframe 有那些缺點？ *iframe會阻塞主頁面的Onload事件； *搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO; *iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript 動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。
13 Label 的做用是什麼？是怎麼用的？（加 for 或包裹） label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。 <label for="Name">Number:</label> <input type=「text「name="Name" id="Name"/> <label>Date:<input type="text" name="B"/></label>
14 HTML5的form 如何關閉自動完成功能？給不想要提示的 form 或某個 input 設置爲 autocomplete=off。或者：<input type="password" name="password1" style="display:none"/> <input type="password" name="password" />
15 如何實現瀏覽器內多個標籤頁之間的通訊? (阿里) WebSocket、SharedWorker； WebSocket：https://www.w3cschool.cn/html5/html5-websocket.html 也能夠調用localstorge、cookies等本地存儲方式； localstorge另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，咱們經過監聽事件，控制它的值來進行頁面信息通訊； window.addEventListener("storage",function(event){    $("#name").val(event.key+」=」+event.newValue);  });   注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常； WebSocket是HTML5開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議。在WebSocket API中，瀏覽器和服務器只須要作一個握手的動做，而後，瀏覽器和服務器之間就造成了一條快速通道。二者之間就直接能夠數據互相傳送。瀏覽器經過 JavaScript 向服務器發出創建 WebSocket 鏈接的請求，鏈接創建之後，客戶端和服務器端就能夠經過 TCP 鏈接直接交換數據。當你獲取 Web Socket 鏈接後，你能夠經過 send() 方法來向服務器發送數據，並經過 onmessage 事件來接收服務器返回的數據。如下 API 用於建立 WebSocket 對象。var Socket = new WebSocket(url, [protocal] );以上代碼中的第一個參數 url, 指定鏈接的 URL。第二個參數 protocol 是可選的，指定了可接受的子協議。
16 webSocket 如何兼容低瀏覽器？(阿里) Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、基於 multipart 編碼發送 XHR 、基於長輪詢的 XHR
17 頁面可見性（Page Visibility API）能夠有哪些用途？經過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等; 在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻的播放；
18 如何在頁面上實現一個圓形的可點擊區域？參考：https://www.cnblogs.com/guorange/p/7155164.html 一、map+area或者svg 二、border-radius：先實現一個正方向區域，而後border-radius:50%;將直角變成圓角三、純js實現須要求一個點在不在圓上簡單算法、獲取鼠標座標等等
19 實現不使用 border 畫出1px 高的線，在不一樣瀏覽器的Quirksmode（怪異模式）和CSSCompat （標準模式）模式下都能保持同一效果。<div style="height:1px;overflow:hidden;background:red"></div>
20 網頁驗證碼是幹嗎的，是爲了解決什麼安全問題？區分用戶是計算機仍是人的公共全自動程序。能夠防止惡意破解密碼、刷票、論壇灌水；有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試。
21 title 與h1的區別、b 與strong 的區別、i 與em 的區別？ title屬性的話，當鼠標放上去，title會有懸浮；是元素的話，在head裏面，瀏覽器會以特殊的方式來使用標題，而且一般把它放置在瀏覽器窗口的標題欄或狀態欄上。一樣，當把文檔加入用戶的連接列表或者收藏夾或書籤列表時，標題將成爲該文檔連接的默認名稱。 title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響； strong是標明重點內容，有語氣增強的含義，使用閱讀設備閱讀網絡時：<strong>會重讀，而<B>是展現強調內容。 i內容展現爲斜體，em表示強調的文本； b,strong都會加粗， i em都會字體傾斜；主要是語義化；

CSS
22 介紹一下標準的CSS 的盒子模型？低版本IE 的盒子模型有什麼不一樣的？（1）有兩種， IE 盒子模型、W3C 盒子模型；（2）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)；（3）區別： IE的content部分把 border 和 padding計算了進去;
24 CSS 選擇符有哪些？哪些屬性能夠繼承？ * 1.id選擇器（ # myid） 2.類選擇器（.myclassname） 3.標籤選擇器（div, h1, p） 4.相鄰選擇器（h1 + p） 5.子選擇器（ul > li） 6.後代選擇器（li a） 7.通配符選擇器（ * ） 8.屬性選擇器（a[rel = "external"]） 9.僞類選擇器（a:hover, li:nth-child） * 可繼承的樣式： font-size font-family color, UL LI DL DD DT; * 不可繼承的樣式：border padding margin width height ;
25 CSS 優先級算法如何計算？ * 優先級就近原則，同權重狀況下樣式定義最近者爲準; * 載入樣式以最後載入的定位爲準; 優先級爲: 同權重: 內聯樣式表（標籤內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。 !important > id > class > tag important 比內聯優先級高
26 CSS3新增僞類有那些？舉例： p:first-of-type選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。 p:last-of-type選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。 p:only-of-type選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。 p:only-child選擇屬於其父元素的惟一子元素的每一個 <p> 元素。 p:nth-child(2)選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
::after在元素以前添加內容,也能夠用來作清除浮動。 ::before在元素以後添加內容 :enabled :disabled 控制表單控件的禁用狀態。 :checked 單選框或複選框被選中。
27 如何居中div ？水平居中：給div設置一個寬度，而後添加margin:0 auto屬性
div{ width:200px; margin:0 auto; }讓絕對定位的div居中
div { position: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: pink;/* 方便看效果 */ }水平垂直居中一
肯定容器的寬高寬500 高 300 的層設置層的外邊距
div { position: relative;/* 相對定位或絕對定位都可 */ width:500px; height:300px; top: 50%; left: 50%; margin: -150px 0 0 -250px; /* 外邊距爲自身寬高的一半 */ background-color: pink; /* 方便看效果 */
}水平垂直居中二
未知容器的寬高，利用 `transform` 屬性
div { position: absolute;/* 相對定位或絕對定位都可 */ width:500px; height:300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: pink; /* 方便看效果 */
}水平垂直居中三
利用 flex 佈局實際使用時應考慮兼容性
.container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center;/* 水平居中 */
} .container div { width: 100px; height: 100px; background-color: pink;/* 方便看效果 */ } 28 如何居中一個浮動元素？29 如何讓絕對定位的div 居中？30 display 有哪些值？說明他們的做用。 block 塊類型。默認寬度爲父元素寬度，可設置寬高，換行顯示。 none 缺省值。象行內元素類型同樣顯示。 inline 行內元素類型。默認寬度爲內容寬度，不可設置寬高，同行顯示。 inline-block 默認寬度爲內容寬度，能夠設置寬高，同行顯示。 list-item 象塊類型元素同樣顯示，並添加樣式列表標記。 table 此元素會做爲塊級表格來顯示。 inherit 規定應該從父元素繼承 display 屬性的值。
31 position 的值relative 和absolute 定位原點是？ absolute 生成絕對定位的元素，相對於值不爲 static的第一個父元素進行定位。 fixed （老IE不支持）生成絕對定位的元素，相對於瀏覽器窗口進行定位。 relative 生成相對定位的元素，相對於其正常位置進行定位。 static 默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 聲明）。 inherit 規定從父元素繼承 position 屬性的值。
32 CSS3有哪些新特性？新增各類CSS選擇器（: not(.input)：全部 class 不是「input」的節點）圓角（border-radius:8px）多列布局（multi-column layout）陰影和反射（Shadow\Reflect）文字特效（text-shadow、）文字渲染（Text-decoration）線性漸變（gradient）旋轉（transform）縮放,定位,傾斜,動畫,多背景例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
33 請解釋一下CSS3的Flexbox （彈性盒佈局模型）, 以及適用場景？一個用於頁面佈局的全新CSS3功能，Flexbox能夠把列表放在同一個方向（從上到下排列，從左到右），並讓列表能延伸到佔用可用的空間。較爲複雜的佈局還能夠經過嵌套一個伸縮容器（flex container）來實現。採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱"容器"。它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱"項目"。常規佈局是基於塊和內聯流方向，而Flex佈局是基於flex-flow流能夠很方便的用來作局中，能對不一樣屏幕大小自適應。在佈局上有了比之前更加靈活的空間。具體：http://www.w3cplus.com/css3/flexbox-basics.html
34 用純CSS 建立一個三角形的原理是什麼？把上、左、右三條邊隱藏掉（顏色設爲 transparent） #demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; }
35 一個滿屏品字佈局如何設計?   簡單的方式：上面的div寬100%，下面的兩個div分別寬50%，而後用float或者inline使其不換行便可
36 常常遇到的瀏覽器的兼容性有哪些？緣由，解決方法是什麼，經常使用hack 的技巧？ * png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.
* 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。
浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)
漸進識別的方式，從整體中逐漸排除局部。
首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。
css .bb{ background-color:red;/*全部識別*/ background-color:#00deff\9; /*IE六、七、8識別*/ +background-color:#a200ff;/*IE六、7識別*/ _background-color:#1e0bd1;/*IE6識別*/ }

* IE下,可使用獲取常規屬性的方法來獲取自定義屬性, 也可使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性。解決方法:統一經過getAttribute()獲取自定義屬性。
* IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性。
* 解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。
* Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示, 可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
超連接訪問事後hover樣式就不出現了被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
37 li 與li 之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？行框的排列會受到中間空白（回車\空格）等的影響，由於空格也屬於字符,這些空白也會被應用樣式，佔據空間，因此會有間隔，把字符大小設爲0，就沒有空格了。
38 爲何要初始化CSS 樣式? - 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。 - 固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）淘寶的樣式初始化代碼： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }
39 css多列等高如何實現？利用padding-bottom|margin-bottom正負值相抵；設置父容器設置超出隱藏（overflow:hidden），這樣子父容器的高度就仍是它裏面的列沒有設定padding-bottom時的高度，當它裏面的任一列高度增長了，則父容器的高度被撐到裏面最高那列的高度，其餘比這列矮的列會用它們的padding-bottom補償這部分高度差。css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。