1、label是什么标签,有什么作用?和for属性使用的作用?
- label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。
- label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label for="male">Male</label> <input type="radio" name="sex" id="male" /> <label for="male">Male</label> <input type="radio" name="sex" id="male" />
2、doctype作用?标准模式与兼容模式有什么区别
!doctype声明位于html文档中的第一行,处于标签之前,告知浏览器用什么文档解析这个文档,doctype不存在或者格式不正确会导致文档以兼容模式呈现
具体区别:
- 在标准模式中:width等于content的width;在兼容模式中width = content + padding + border;
- 用margin : 0 auto设置水平居中在ie模式中会失效
3、页面导入样式时,使用link和@import的区别
- link属于xhtml标签,除了加载css外,还能用于定义rss,定义rel连接属性等作用
- 页面被加载时,link会被同时加载,而@import引用的css会等到页面被加载完再加载
- link支持使用js控制dom去改变样式,而@import不支持
4、iframe有哪些缺点
- iframe会阻塞主页面的onload事件
- 搜索引擎的检索程序无法解读这种页面,不利于seo
- 解决方案:最好通过js动态给iframe添加src属性值
5、html5的form如何关闭自动完成功能
给该form或者某个input添加设置为autocomplete = off
6、如何实现浏览器内多个标签页之间的通信
- websocket通信:html5新增的协议,目的是在浏览器和服务器之间建立一个不受限的双向通信的通道。服务器可以在任意时刻发送信息给浏览器,传统的http协议是一个请求-相应协议,必须先由浏览器发送给服务器请求,服务器才能响应这个请求,再把数据发送给浏览器。
- 定时器setInterval + cookie : 在页面设置一个定时器不断刷新,检查cookies的值是否发生变化,如果变化就进行刷新的操作
- localStorage本地储存 : 是浏览器多个标签共用的存储空间,可以用来实现标签之间的通信(sessionStorage是会话级存储空间,每个标签页都是单独的);可以直接在window对象上添加监听;
window.onstorage = (e) => { console.log(e)}