link和@import的区别
始终建议使用link，慎用@import
从属关系
-
link：link是HTML提供的标签，不仅可以加载CSS，还可以定义rel等属性 -
@import：@import是css提供的语法，只有导入样式表的作用
加载顺序
-
link：link在页面加载时CSS同时被加载 -
@import：引入的CSS要等页面加载完毕后再加载
兼容性问题
-
link是HTML提供的语法，不存在兼容性问题 -
@import是css2.1提供的语法，ie5以上才兼容
DOM可控性
- js控制DOM时，可以通过插入link标签来改变样式，不能通过
@import改变
权重问题
-
link标签引入的样式权重大于@import标签
HTML5为什么只需要写<!DOCTYPE HTML>？
-
DTD的是W3C所发布的一个文档类型定义，简单的说，就是告诉浏览器你的这个HTML，是根据那个标准写的，解析的时候用哪个标准解析。
-
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
-
而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运作模式都是以该浏览器支持的最高标准运行。
在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
具体区别：
-
盒模型
在严格模式中 ：width是内容宽度 ，元素真正的宽度 =width;
在兼容模式中 ：width则是 =width+padding+border -
兼容模式下可设置百分比的高度和行内元素的高宽
在标准模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。
在标准模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。 -
用
margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在标准模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）
body{text-align:center};#content{text-align:left} -
兼容模式下
Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效
请写出html5新增的API
-
document.querySelector()和document.querySelectorAll()方法-
document.querySelector()：根据css选择器返回第一个匹配的元素，如果没有匹配返回null； -
document.querySelectorAll("selector")：querySelectorAll返回的是元素数组，querySelector返回的是一个元素。如果querySelectorAll没有匹配的内容返回的是一个空数组。
-
-
classList属性-
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。 -
contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。 -
remove(value)：从列表中删除给定的字符串。 -
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
-
-
自定义数据属性(
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>
-
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>
-
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>");
-
webStorage浏览器存储 -
canvas画布 -
fetch与后台通信的新API，类似于ajax -
history历史记录API。通过history可以实现前端路由 -
webscoket前后端双向通信 -
geolocation地理定位API -
exitFullscreen全屏API -
video/audio视频/音频API -
draggable拖拽API -
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必须写在所有样式的前面。
声明样式优先级
- 大致优先级
!important > 内联 > ID选择器 > [class|属性|伪类]选择器 > 元素选择器 > 通配符选择器 > 继承
:link、:visited、:hover、:active按照LVHA（LoVe HAte）顺序定义 - 优先级算法
- !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
- 继承样式优先级最低，通配符样式优先级高于继承样式
- 计算示例：
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优先级计算及应用 - 烈风裘
如果本文对您有帮助，可以看看本人的其他文章:
前端常见面试题（十一）@郝晨光
前端常见面试题（十）@郝晨光
前端常见面试题（九）@郝晨光
网友评论