html

• label都有哪些作用，并舉相應的例子說明

  • input 和 label 互相關聯機制

  • label不會向用戶呈現任何特殊效果。但是當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。

    label 標簽的for屬性應當與相關元素的 ID 屬性相同

  • label 通常用來關聯一個表單控件

    <label for="hobby">愛好</label>
    <input id="hobby" type="checkbox" value="0">
    

  • 例1 利用 label 模擬 button 來解決不同瀏覽器原生 button 樣式不同問題

    <input type="button" id="btn">
    <label for="btn">Button</label>
    

  • 例二 結合checkbox、radio表單元素實現純CSS狀態(tài)切換。比如控制CSS動畫播放和停止

    <input type="checkbox" id="controller">
    <label class="icon" for="controller">
        <div class="play"></div>
        <div class="pause"></div>
    </label>
    
    <div class="animation"></div>
    <style>
    ....
    </style>
    

  • input 的 focus 事件會觸發(fā)錨點定位，可以利用label當觸發(fā)器實現選項卡切換效果

    <div class="box">
      <div class="list"><input id="one" readonly>1</div>
      <div class="list"><input id="two" readonly>2</div>
      <div class="list"><input id="three" readonly>3</div>
      <div class="list"><input id="four" readonly>4</div>
    </div>
    <div class="link">
      <label class="click" for="one">1</label>
      <label class="click" for="two">2</label>
      <label class="click" for="three">3</label>
      <label class="click" for="four">4</label>
    </div>
    
    <style>
    .box {
      width: 20em;
      height: 10em;
      border: 1px solid #ddd;
      overflow: hidden;
    }
    .list {
      height: 100%;
      background: #ddd;
      text-align: center;
      position: relative;
    }
    .list > input { 
      position: absolute; top:0; 
      height: 100%; width: 1px;
      border:0; padding: 0; margin: 0;
      clip: rect(0 0 0 0);
    }
    </style>
    

css

• 用css創(chuàng)建一個三角形，并簡述原理

  http://caibaojian.com/css-border-triangle.html

  利用盒模型的border，將盒子寬高設置為0，四個邊剩余三邊顏色設置為透明

js

• 寫一個去除制表符和換行符的方法

  • // 特殊符號
    \f 匹配一個換頁符
    \n 匹配一個換行符
    \t 匹配一個制表符
    \v 匹配一個垂直制表符
    \r 回車
    
    
    + 表示匹配前一個字符一次或者多次
    ^ 表示匹配輸入的開頭
    $ 表示匹配輸入的末尾
    g 全稱是global，全局匹配
    

  • function fn(str){
            let s = str.replace(/\t|\n|\v|\f|\r/g,'')
            return s;
    }