2021-03-27

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状态切换。比如控制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 事件会触发锚点定位，可以利用label当触发器实现选项卡切换效果

    <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创建一个三角形，并简述原理

  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;
    }