当前位置：开心源码网 > 前台常见面试题（十二）@郝晨光

前台常见面试题（十二）@郝晨光

作者 : 开心源码 本文共4293个字，预计阅读时间需要11分钟 发布时间： 2022-05-12 共162人阅读

link和@import的区别

始终建议使用link，慎用@import

从属关系

  1. link：link是HTML提供的标签，不仅可以加载CSS，还可以定义rel等属性
  2. @import：@import是css提供的语法，只有导入样式表的作用

加载顺序

  1. link：link在页面加载时CSS同时被加载
  2. @import：引入的CSS要等页面加载完毕后再加载

兼容性问题

  1. link是HTML提供的语法，不存在兼容性问题
  2. @import是css2.1提供的语法，ie5以上才兼容

DOM可控性

  1. js控制DOM时，可以通过插入link标签来改变样式，不能通过@import改变

权重问题

  1. link标签引入的样式权重大于@import标签

HTML5为什么只要要写<!DOCTYPE HTML>？

  1. DTD的是W3C所发布的一个文档类型定义，简单的说，就是告诉浏览器你的这个HTML，是根据那个标准写的，解析的时候用哪个标准解析。

  2. HTML5 不基于 SGML，因而不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；

  3. 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

拓展：

SGML是标准通用标记语言

HTML是超文本标记语言，主要是用于规定怎样显示网页

XML是可扩展标记语言是未来网页语言的发展方向，可能会替代HTML，他和HTML都是由SGML延伸转变而来的，你可以了解SGML是最早的版本，但现在已经淘汰不用了

XML和HTML的最大区别就在于 XML的标签是可以自己创立的，数量无限多，而HTML的标签都是固定的而且数量有限。

还有一个是XHTML也是现在基本上所有网页都在用的标记语言，他其实和HTML没什么本质的区别标签都一样，用法也都一样，就是比HTML更严格，比方标签必需都用小写，标签都必需有闭合标签等。

Doctype作用，标准模式和兼容模式有什么区别

<!DOCTYPE html>公告位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。<!DOCTYPE html>不存在或者格式不正确会导致文档以兼容模式呈现。

标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

具体区别：

  1. 盒模型
    在严格模式中 ：width 是内容宽度 ，元素真正的宽度 = width;
    在兼容模式中 ：width 则是 = width+padding+border

  2. 兼容模式下能设置百分比的高度和行内元素的高宽
    在标准模式下，给 span 等行内元素设置 wdith 和 height 都不会生效，而在兼容模式下，则会生效。
    在标准模式下，一个元素的高度是由其包含的内容来决定的，假如父元素没有设置高度，子元素设置一个百分比的高度是无效的。

  3. 用margin:0 auto设置水平居中在IE下会失效
    使用margin:0 auto在标准模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性处理）
    body{text-align:center};#content{text-align:left}

  4. 兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效

请写出html5新添加的API

  1. document.querySelector()和document.querySelectorAll()方法

    • document.querySelector()：根据css选择器返回第一个匹配的元素，假如没有匹配返回null；
    • document.querySelectorAll("selector")：querySelectorAll返回的是元素数组，querySelector返回的是一个元素。假如querySelectorAll没有匹配的内容返回的是一个空数组。

  2. classList 属性

    • add(value)：将给定的字符串值增加到列表中。假如值已经存在，就不增加了。
    • contains(value)：表示列表中能否存在给定的值，假如存在则返回true，否则返回false。
    • remove(value)：从列表中删除给定的字符串。
    • toggle(value)：假如列表中已经存在给定的值，删除它；假如列表中没有给定的值，增加它。

  3. 自己设置数据属性(data-属性)

    • HTML5 规定可以为元素增加非标准的属性，但要增加前缀data-，目的是为元素提供与渲染无关的信息，或者者提供语义信息。这些属性可以任意增加、随意命名，只需以data-开头就可。
    • 可以通过 元素.dataset.属性来获取。
    •   <div id="myDiv" data-id="12345" data-name="myDiv"></div>  <script>    // 本例中使用的方法仅用于演示    var div = document.getElementById("myDiv");    // 获得自己设置属性的值    let divId = div.dataset.id; // 12345    let myName = div.dataset.name; // myDiv    // 设置值    div.dataset.id = 23456; // 23456    div.dataset.name = "hello world!"; // hello world!  </script>

  4. outerHTML属性

    • 在读模式下，outerHTML 返回调用它的元素及所有子节点的HTML 标签。
    • 在写模式下，outerHTML会根据指定的HTML 字符串创立新的DOM 子树，而后用这个DOM子树完全替换调用元素。
    •  <ul id="list">     <li>Item 1</li>     <li>Item 2</li>     <li>Item 3</li> </ul> <script>   let list = document.querySelector('#list');   const oldHTML = list.outerHTML;  // 返回 ul + li *3+内容   list.outerHTML = '<div><p>替换内容</p></div>'; // 将list整个替换成为当前的内容标签 </script>

  5. insertAdjacentHTML()方法

    • 新添加的插入标签元素的方法，它接收两个参数：插入位置和要插入的HTML 文本。
    • let div = document.querySelector('div');//作为前一个同辈元素插入div.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");//作为第一个子元素插入div.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>");//作为最后一个子元素插入div.insertAdjacentHTML("beforeend", "<p>Hello world!</p>");//作为后一个同辈元素插入div.insertAdjacentHTML("afterend", "<p>Hello world!</p>");

  6. webStorage浏览器存储

  7. canvas 画布

  8. fetch 与后端通信的新API，相似于ajax

  9. history 历史记录API。通过history可以实现前台路由

  10. webscoket 前后台双向通信

  11. geolocation 地理定位API

  12. exitFullscreen 全屏API

  13. video/audio 视频/音频API

  14. draggable 拖拽API

  15. visibilitychange 页面可见性API

CSS优先级算法如何计算？

CSS优先级分为两个部分，一部分是引入优先级，第二部分是公告样式的优先级。

引入样式优先级

引入样式优先级一般是在外部样式、内部样式、内联样式之间应用同一个样式的情况是使用， 优先级如下：

外部样式 | 内部样式 < 内联样式

外部样式和内部样式，最后出现的优先级最高，例如：

<!-- 内联样式 --><span style="color:red;">Hello</span><style type="text/css">     /* 内部样式 */     h3{color:green;} </style><!-- 外部样式 style.css --><link rel="stylesheet" type="text/css" href="style.css"/>

因而，对于少量重置的样式集，比方normalize.css/reset.css必需写在所有样式的前面。

公告样式优先级

  1. 大致优先级
    !important > 内联 > ID选择器 > [class|属性|伪类]选择器 > 元素选择器 > 通配符选择器 > 继承
    :link、:visited、:hover、:active按照LVHA（LoVe HAte）顺序定义
  2. 优先级算法
    • !important 权重值：1,0,0,0；
    • ID选择器 权重值：0,1,0,0；
    • class选择器/属性选择器/伪类选择器 权重值：0,0,1,0；
    • 元素选择器 权重值：0,0,0,1；
    • 通配符选择器 权重值：0,0,0,0；
    • 每个等级的初始值为0，
    • 每个等级的叠加为选择器出现的次数相加
    • 不可进位，比方0,99,99,99
    • 依次表示为：0,0,0,0
    • 每个等级计数之间没关联
    • 等级判断从左向右，假如某一位数值相同，则判断下一位数值
    • 假如两个优先级相同，则最后出现的优先级高，!important也适用
    • 通配符选择器的特殊性值为：0,0,0,0
    • 继承样式优先级最低，通配符样式优先级高于继承样式
  1. 计算示例：
    • a{color: yellow;} /*特殊性值：0,0,0,1*/
    • div a{color: green;} /*特殊性值：0,0,0,2*/
    • .demo a{color: black;} /*特殊性值：0,0,1,1*/
    • .demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/
    • .demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/
    • #demo a{color: orange;} /*特殊性值：0,1,0,1*/
    • div#demo a{color: red;} /*特殊性值：0,1,0,2*/

CSS优先级算法

css优先级算法参考自：CSS优先级计算及应用 – 烈风裘

假如本文对您有帮助，可以看看本人的其余文章:
前台常见面试题（十一）@郝晨光
前台常见面试题（十）@郝晨光
前台常见面试题（九）@郝晨光

结言
感谢您的查阅，本文由郝晨光整理并总结，代码冗余或者者有错误的地方望不吝赐教；菜鸟一枚，请多关照

说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台常见面试题（十二）@郝晨光
分享到：

相关推荐

发表回复

  • 2289本站运营(天)
  • 184用户总数
  • 17288资源数(个)
  • 0近7天更新(个)
  • 1000资源大小(GB)
立即查看