总纲：前端面试知识点大全
目录
4.浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么？
7.请解释 script的特性，以及async和defer的区别。
8.为什么通常推荐将 CSS 的link标签放置在head标签之间，而将script标签放置在 body闭合标签之前？你知道有哪些例外吗？
9.什么是渐进式渲染 (progressive rendering)？
1.DOCTYPE（文档类型）的作用是什么？
参考https://witcher42.github.io/2014/05/28/doctype/
用于激活浏览器的渲染模式
2.DOCTYPE（文档类型）有哪些？
1. 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
2. HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
3. XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
4. Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
到了HTML5，因为不是用的SGML（标准通用标记语言），而是HTML5标准，所以只需要<! DOCTYPE html>
3.XHTML和HTML的区别
XHTML比HTML更加严格.
1）标签必须闭合
2）标签名必须小写
3）标签元素必须正确嵌套
4）必须要有根元素
4.浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么？
标准模式是基于W3C标准的解析渲染；怪异模式(混杂模式)是基于各个浏览器自身的标准进行解析渲染，所以存在不同，显得怪异。
4.1 产生的历史原因
答案：由于早先各个厂商未按照W3C标准进行浏览器的渲染设置，导致各个浏览器的解析渲染方式不同，后面W3C进行统一，于是浏览器开始实现两套解析渲染方式，一套是W3C标准，一套是坚持自己本来的。
4.2 怪异模式有哪些怪异的行为
1）最主要的比如IE与W3C的盒子模型不同（也就是目前浏览器兼容的问题）；
2）可以设置行内元素的高宽，在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
3）可设置百分比的高度，在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
4）用margin:0 auto设置水平居中在IE下会失效 使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性: body{text-align:center};#content{text-align:left}
5）quirk模式下设置图片的padding会失效
6）quirk模式下Table中的字体属性不能继承上层的设置
7）quirk模式下white-space:pre会失效
5.使用 data- 属性的好处是什么？
data-*是为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取。
PS：需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格
例子：<div id="myID" data-my-attr = “test”></div>，获取属性值
使用dataset，getElementById("myID").dataset.myAttr
使用getAttribute方法，getElementById("myID").getAttribute('data-my-attr')
6.cookies、sessionStorage 和localStorage 的区别
这一部分，我之前有单独发一篇博客。
可以参考我的个人博客：https://blog.csdn.net/sinat_36521655/article/details/79992155
6.1 cookie的几种常见属性
key=value;
expires=失效时间;
path=路径;
domain=域名;
secure=true or false true表示只有https才会传输这个cookie
httponly=true or false true表示JS不能通过document.cookie访问，只能http使用cookie
6.2 cookie的保存方式
cookie以字符串的形式保存在浏览器中。
document.cookie即可访问本地cookie。
Cookie的作用域。Cookie有两个很重要的属性:Domain和Path，用来指示此Cookie的作用域：
1、Domain告诉浏览器当前要添加的Cookie的域名归属，如果没有明确指明则默认为当前域名，比如通过访问www.vinceruan.info添加的Cookie的域名默认就是www.vinceruan.info,通过访问blog.vinceruan.info所生成的Cookie的域名就是blog.vinceruan.info
2、Path告诉浏览器当前要添加的Cookie的路径归属，如果没有明确指明则默认为当前路径，比如通过访问www.vinceruan.info/java/hotspot.html添加的Cookie的默认路径就是/java/,通过blog.vinceruan.info/java/hotspot.html生成的Cookie的路径也是/java/
6.3 cookie提交
浏览器提交的Cookie需要满足以下两点：
1.当前域名或者父域名下的Cookie；
2.当前路径或父路径下的Cookie
6.4 本地存储的使用
window.localStorage和window.sessionStorage读取本地Storage
document.cookie访问本地cookie
7.请解释 script的特性，以及async和defer的区别。
这一部分，我之前有单独发一篇博客。
可以参考我的个人博客：https://blog.csdn.net/sinat_36521655/article/details/80059594
8.为什么通常推荐将 CSS 的link标签放置在head标签之间，而将script标签放置在 body闭合标签之前？你知道有哪些例外吗？
<link>放置在<head></head>是因为浏览器要先渲染页面呈现给用户，在渲染时需要构建dom树(html标签内容)和render渲染树(css样式)，这样才能完整呈现，所以推荐放在头部，优先加载。而JS脚本文件比较大，且一般是后期JS引擎运行，渲染引擎会将控制权交给JS引擎而停止渲染，如果JS文件较大，会导致长时间白屏，影响用户体验，所以才会有JS<script>放在</body>之前。或者上一个问题中提到的优化加载的方式。
9.什么是渐进式渲染 (progressive rendering)？
页面第一次呈现速度稍快. 第一次只加载一个页面, 以及第一个页面所需要的文件,速度很快.但是每一次加载的速度基本相同的. 可用缓存进行优化 用户在网站中,停留时时间较长,点击较多时, 就会体现出劣势.
类似于懒加载，一开始先加载首屏显示的内容，之后再随着时间或者滚动页面才进行后面的加载
10.HMTL5新标签
东西其实挺多的，这里只是罗列一部分，每个部分都需要自行了解。
1）新的特殊内容元素，比如 article、footer、header、nav、section
2）新的表单控件，比如 calendar、date、time、email、url、search
3）用于媒介回放的 video 和 audio 元素
4）用于绘画的 canvas 元素
5）对本地离线存储的更好的支持
6）浏览器异步的webWorker
11.<meta>标签
元数据（Metadata）是数据的数据信息。
<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。
META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
注意点：
1、<meta> 标签通常位于 <head> 区域内。
2、元数据通常以 名称/值 对出现。
3、如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。
可以参考菜鸟教程：http://www.runoob.com/tags/tag-meta.html
12.条件注释
12.1 常用注释
<!--xxx -->
12.2 条件注释
1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
2. <!--[if IE]> 所有的IE可识别 <![endif]-->
3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
4. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
6. <!--[if IE 6]> 仅IE6可识别 <![endif]-->
7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
9. <!--[if IE 7]> 仅IE7可识别 <![endif]-->
10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
13.src和href的区别
13.1 src
source的简写，表示“源”，可以理解为【引用一个资源】，它用来代替自己本身的内容。如img、script、iframe。它们如果不写src，那么本身没有内容，script会不存在脚本代码，img会显示x，iframe会显示空白页。例如<script type="text/javascript" src="b.js">alert(1)</script>，b.js:alert(2); 标准的浏览器里会显示2，因为本身的内容已经被替代了；另一方面，当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js放置在底部而不是头部。
13.2 href
Hypertext Reference的缩写，表示“超链接”， 目的不是为了引用一个资源，而是为了建立一个“通道”，让当前标签能够链接到目标地址上，并不是为了把目标拉进页面本身内来替换本身的内容，例如a标签的href不会被当做一个资源替换自身，link标签本身并不包含实际的元素意义来做内容，它需要rel明确的表示被【被连接的文档是做什么的】。例如：<link href="head.css" rel="stylesheet"/>，当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。
扫一扫
1097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
