前端面试题(五)

• label 有哪些作用, 并举例说明

  • 首先最常用的是 label 与表单的关联

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

  • 方便鼠标点击使用，增强用户操作体验
  • 用来显示文字信息，可以固定也可以从数据库中读出信息绑定。

其实 label 标签有两个属性比较常用 一个是 for 一个是accesskey
for 属性:

表示这个label 是为哪个控件服务的,for 属性绑定的 html 元素的 id 或者 name 属性. 你点击这个标签的时候，所绑定的元素将获取焦点 ，点击label所包裹内容，自动指向for指定的id或name

accesskey 属性:

则定义了访问这个控件的热键( 所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键 )

---

• 用 css 创建一个三角形, 并说明其原理

  首先我们先看下实现的代码

      width: 0;
      height: 0;
      margin: 100px auto;
      border-top: 50px solid transparent;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 50px solid blue;

  效果如下:
  

  我们现在来分析一下这个是如何实现的

  这里我们对 border 可能有一下误解. 通常我们常用的就是做个边框 border: 1px solid 这样类似的.只是给图形一个1px 的边框.我们会误解为border 就是四边边框.
  但是其实并不是.其实元素的 border 是由三角形组成的.我们举个例子, 把边框的宽度变大一些

  div {
      width: 50px;
      height: 50px;
      border: 40px solid;
      border-color: orange blue red green;
  }

  效果如下:
  

  所以当我们把 div 的宽高设为 0 的时候 就完全用 border 撑起来就是如下样子

  

  这下就很明显了 想要得到四个三角形的哪个 就把其他边设为透明就可以啦
  这样是不是就很明了了!!!!!!!!

---

• 写一个去除制表符和换行符的方法

  通常这样的方法最简单的是使用正则表达式来筛选

  \f 匹配换页字符。
  \n 匹配换行字符。
  \r 匹配回车符字符。
  \t 匹配制表字符。
  \v 匹配垂直制表符。

  function fn(str) {
    return str.replace(/[\t\n]/g, '')
  }

  正则表达式的东西还是蛮多的 真正学起来正则可以很深很深.实不相瞒,我对正则就是属于一知半解的状态 每次使用都会去查表 毕竟其实实际用到的很少 都是封装一次到方法库里面了.... 尴尬

面试题摘自 Github