2021-03-27

html

• label都有哪些作用，并举相应的例子说明

  • input 和 label 互相关联机制

  • label不会向用户呈现任何特殊效果。但是当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

    label 标签的for属性应当与相关元素的 ID 属性相同

  • label 通常用来关联一个表单控件

    爱好
    
    

  • 例1 利用 label 模拟 button 来解决不同浏览器原生 button 样式不同问题

    
    Button
    

  • 例二 结合checkbox、radio表单元素实现纯CSS状态切换。比如控制CSS动画播放和停止

  • input 的 focus 事件会触发锚点定位，可以利用label当触发器实现选项卡切换效果

    
      
    1
      
    2
      
    3
      
    4
    
    
      1
      2
      3
      4
    
    
    
    

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