web前端开发面试题(附答案)-2

1、label是什么标签，有什么作用？和for属性使用的作用？

• label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
• label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
• 标签的 for 属性应当与相关元素的 id 属性相同。
  
  点击文本标记之一，就可以触发相关控件(点击Male就可以选择单选框)

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

7、实现不使用border画出1px高的线，并且在不同浏览器的标准模式和怪异模式下都能保持一致的效果

8、css选择器有哪些？哪些属性可以继承

• 选择器
  
  1、id选择器（#demo）
  
  2、类选择器（.demo)
  
  3、标签选择器（div）
  
  4、相邻选择器（h1 + p)
  
  5、子选择器（ul > li)
  
  6、后代选择器（li a)
  
  7、通配符（*）
  
  8、属性选择器（input[type = "radio"])
  
  9、伪类选择器（a:hover)
• 可继承的样式：font-size、font-family、color
• 不可继承的样式：border、padding、margin、height、width

8、css优先级算法如何计算

css选择器	权重
！important	infinity(无穷）
行间样式	1000
id选择器	0100
class选择器、属性选择器、伪类	0010
标签和伪元素	0001
通配符	0000

9、display常用的有哪些值以及作用

inline	默认。此元素会被显示为内联元素，元素前后没有换行符，不可设置宽高、同行显示
none	元素不显示，并从文档流中移除
block	块类型。默认宽度为父元素宽度，可设置宽高，换行显示
inherit	规定应该从父元素继承display属性的值
inline-block	行内块元素，可以设置宽高，同行显示

10、简述position有哪些属性值

• absolute：生成绝对定位的元素，相对与static定位以外的第一个父元素进行定位（脱离了正常的文档流）。
• relative：生成相对定位的元素，相对于其在文档流中正常的位置进行定位。
• fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
• static：默认值。没有定位，元素出现在正常的文档流中。
• inherit：规定应该从父元素中继承position的属性值。