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 优先级计算及应用 - 烈风裘
如果本文对您有帮助, 可以看看本人的其他文章:
前端常见面试题 (十一)@郝晨光
前端常见面试题 (十)@郝晨光
前端常见面试题 (九)@郝晨光
结言
感谢您的查阅, 本文由郝晨光整理并总结, 代码冗余或者有错误的地方望不吝赐教; 菜鸟一枚, 请多关照
来源: http://www.jianshu.com/p/843ffdcc6baa