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