从属关系
link：link是HTML提供的标签，不仅可以加载CSS，还可以定义rel等属性@import：@import是css提供的语法，只有导入样式表的作用加载顺序
link：link在页面加载时CSS同时被加载@import：引入的CSS要等页面加载完毕后再加载兼容性问题
link是HTML提供的语法，不存在兼容性问题@import是css2.1提供的语法，ie5以上才兼容DOM可控性
@import改变权重问题
link标签引入的样式权重大于@import标签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 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会失效
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-属性)
元素.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属性
<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()方法
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优先级分为两个部分，一部分是引入优先级，第二部分是公告样式的优先级。
引入样式优先级一般是在外部样式、内部样式、内联样式之间应用同一个样式的情况是使用， 优先级如下：
外部样式 | 内部样式 < 内联样式
外部样式和内部样式，最后出现的优先级最高，例如：
<!-- 内联样式 --><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必需写在所有样式的前面。
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优先级计算及应用 - 烈风裘
假如本文对您有帮助，可以看看本人的其余文章:
前台常见面试题（十一）@郝晨光
前台常见面试题（十）@郝晨光
前台常见面试题（九）@郝晨光