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


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

    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的属性值。
  • 相关阅读:
    [扩展推荐] Laravel 中利用 GeoIP 获取用户地理位置信息
    10 个优质的 Laravel 扩展推荐
    5 个非常有用的 Laravel Blade 指令,你用过哪些?
    PHP 7.3 我们将迎来灵活的 heredoc 和 nowdoc 句法结构
    使用 Swoole 来加速你的 Laravel 应用
    一个成功的 Git 分支模型(适用于商业应用开发)
    github搜索语法
    python协程爬虫-aiohttp+aiomultiprocess使用
    python-协程、多线程、多进程性能比较
    functools模块-为函数预设args/kwargs参数
  • 原文地址:https://www.cnblogs.com/meijiang/p/11569879.html
Copyright © 2020-2023  润新知