01HTML和CSS知识点总结（一）

[目录]

目录

• [目录]
  • 1、常见浏览器所用的内核
  • 2、Doctype的作用是什么？
  • 3、Quirks【扩科斯】模式是什么？它和Standards【斯坦尔德】模式有什么区别？
  • 4、div + css的布局较table布局有什么优点？
  • 5、img 的 alt 与 title 有何异同，strong 与 em 有何异同？
  • 6、渐进增强和优雅降级之间的区别是什么？
  • 7、为什么利用多个域名来存储网站资源会更有效？
  • 8、网页标准和标准制定机构的重要性是什么？
  • 9、cookie，sessionStorage和localStorage的区别是什么？
  • 10、src 和 href 的区别是什么？
  • 11、知道的网页制作会用到的图片格式有哪些？
  • 12、在前端构件中应该考虑微格式吗？
  • 13、从刷新网页开始，一般情况下一次js请求有哪些地方会有缓存处理？
  • 14、优化图片加载的方法有哪些？
  • 15、标准模式与兼容模式各有什么区别？
  • 16、HTML5为什么只需要写,而不需要引入DTD?
  • 17、SGML 、 HTML 、XML 和 XHTML 的区别？
  • 18、DTD 是什么？
  • 19、行内元素定义
  • 20、块级元素定义
  • 21、行内元素与块级元素的区别？
  • 22、HTML5 元素的分类
  • 23、空元素定义
  • 24、link 标签定义
  • 25、页面导入样式时，使用 link 和 @import 有什么区别？
  • 26、对浏览器的理解
  • 27、对浏览器内核的理解
  • 28、浏览器的渲染原理
  • 29、渲染过程中遇到 JS 文件怎么处理？（浏览器解析过程）
  • 30、 async 和 defer 的作用是什么？有什么区别？（浏览器解析过程）

1、常见浏览器所用的内核

• IE：trident内核
• Firefox：gecko内核
• Safari：webkit内核
• Opera：最初是自己的 Presto 内核，后来加入谷歌大军，从 Webkit 又到了 Blink 内核
• Chrome：统称为 Chromium 内核或 Chrome 内核，以前是 Webkit 内核，现在是 Blink内核，Blink（基于webkit，Google与Opera Software共同开发）
• 360浏览器、猎豹浏览器内核：IE + Chrome 双内核
• 搜狗、遨游、QQ 浏览器内核：Trident（兼容模式）+ Webkit（高速模式）
• 百度浏览器、世界之窗内核：IE 内核
• 2345浏览器内核：好像以前是 IE 内核，现在也是 IE + Chrome 双内核了
• UC 浏览器内核：这个众口不一，UC 说是他们自己研发的 U3 内核，但好像还是基于 Webkit 和 Trident ，还有说是基于火狐内核
• （Trident：这种浏览器内核是 IE 浏览器用的内核，因为在早期 IE 占有大量的市场份额，所以这种内核比较流行，以前有很多网页也是根据这个内核的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好。但是由于 IE 的高市场占有率，微软也很长时间没有更新 Trident 内核，就导致了 Trident 内核和 W3C 标准脱节。还有就是 Trident 内核的大量 Bug 等安全问题没有得到解决，加上一些专家学者公开自己认为 IE 浏览器不安全的观点，使很多用户开始转向其他浏览器。

Gecko：这是 Firefox 和 Flock 所采用的内核，这个内核的优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存。

Presto：Opera 曾经采用的就是 Presto 内核，Presto 内核被称为公认的浏览网页速度最快的内核，这得益于它在开发时的天生优势，在处理 JS 脚本等脚本语言时，会比其他的内核快3倍左右，缺点就是为了达到很快的速度而丢掉了一部分网页兼容性。

Webkit：Webkit 是 Safari 采用的内核，它的优点就是网页浏览速度较快，虽然不及 Presto 但是也胜于 Gecko 和 Trident，缺点是对于网页代码的容错性不高，也就是说对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。WebKit 前身是 KDE 小组的 KHTML 引擎，可以说 WebKit 是 KHTML 的一个开源的分支。

Blink：谷歌在 Chromium Blog 上发表博客，称将与苹果的开源浏览器核心 Webkit 分道扬镳，在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。其实 Blink 引擎就是 Webkit 的一个分支，就像 webkit 是KHTML 的分支一样。Blink 引擎现在是谷歌公司与 Opera Software 共同研发，上面提到过的，Opera 弃用了自己的 Presto 内核，加入 Google 阵营，跟随谷歌一起研发 Blink。
）

2、Doctype的作用是什么？

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

（在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问。在 html5 之后不再需要指定 DTD 文档，因为 html5 以前的 html 文档都是基于 SGML 的，所以需要通过指定 DTD 来定义文档中允许的属性以及一些规则。而 html5 不再基于 SGML 了，所以不再需要使用 DTD。）

3、Quirks【扩科斯】模式是什么？它和Standards【斯坦尔德】模式有什么区别？

总体有布局、样式解析和脚本执行三个方面的区别

• 盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks模式下，IE的宽度和高度还包括padding和border
• 设置行内元素的高宽：在Standards模式下，给 span 等行内元素设置wdith和height都不会生效，而在Quirks模式下会生效
• 设置百分比的高度：在Standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的
• margin：0 auto 设置水平居中：使用margin：0 auto在Standards模式下可以使元素水平居中，但在Quirks模式下会失效

4、div + css的布局较table布局有什么优点？

• 改版的时候更加方便，只要改CSS
• 页面加载速度更快，结构化清晰，页面显示简洁
• 表现与结构相分离
• 易于优化搜索引擎，更友好，排名更容易靠前

5、img 的 alt 与 title 有何异同，strong 与 em 有何异同？

• alt (alt text)：当不能显示图像、窗体或applets的用户代理时，alt属性用来指定替换文字，替换文字由lang属性指定（在IE浏览器下会在没有title时把alt当成tool tip显示）
• title (tool tip)：设置该属性的元素提供建议性的信息
• strong：粗体强调标签，表示内容的重要性
• em：斜体强调标签，更强烈的强调，表示内容的强调点

6、渐进增强和优雅降级之间的区别是什么？

• 渐进增强(progressive enhancement)：针对低版本浏览器进行构件页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等的改进，并追加功能达到更好的用户体验
• 优雅降级(graceful degradation)：一开始就构件完整的功能，然后再针对低版本浏览器进行兼容
• 区别：优雅降级是从复杂的现状开始，并试图减少用户的体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级意味着往回看，而渐进增强则意味着朝前看，同时保证其根基处于安全地带

7、为什么利用多个域名来存储网站资源会更有效？

• CDN缓存更方便
• 突破浏览器并发限制
• 节约cookie带宽
• 节约主域名的连接数，优化页面的响应速度
• 防止不必要的安全问题

8、网页标准和标准制定机构的重要性是什么？

网页标准和标准制定机构都是为了能让web发展的更“健康”，开发者遵循统一的标准，降低开发难度、开发成本，SEO也会更好做，也不会因为滥用代码导致各种bug、安全问题，最终提高网站易用性

9、cookie，sessionStorage和localStorage的区别是什么？

浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage

• cookie 其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie 最多能存储 4 k 数据，它的生存时间由 expires 属性指定，并且 cookie 只能被同源的页面访问共享
• sessionStorage 是 html5 提供的一种浏览器本地存储的方法，它借鉴了服务器端 session 的概念，代表的是一次会话中所保存的数据。它一般能够存储 5M 或者更大的数据，它在当前窗口关闭后就失效了，并且 sessionStorage 只能被同一个窗口的同源页面所访问共享
• localStorage 也是 html5 提供的一种浏览器本地存储的方法，它一般也能够存储 5M 或者更大的数据。它和 sessionStorage 不同的是，除非手动删除它，否则它不会失效，并且 localStorage 也只能被同源页面所访问共享

上面几种方式都是存储少量数据的时候的存储方式，当我们需要在本地存储大量数据的时候，我们可以使用浏览器的 indexDB 这是浏览器提供的一种本地的数据库存储机制。它不是关系型数据库，它内部采用对象仓库的形式存储数据，它更接近 NoSQL 数据库

SessionStorage， LocalStorage， Cookie 这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别
在于前两者属于 HTML5 WebStorage，创建它们的目的便于客户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户
本地终端上的数据（通常经过加密）。cookie 数据始终在同源（协议、主机、端口相同）的 http 请求中携带（即使不需要），会
在浏览器和服务器间来回传递

• 存储大小：

1. cookie 数据大小不能超过4 k
   2.sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大

• 有期时间：
  1.localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
  2.sessionStorage 数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。
  3.cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。
• 作用域：
  1.sessionStorage 只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享。
  2.localStorage 在所有同源窗口中都是共享的。
  3.cookie 在所有同源窗口中都是共享的。

10、src 和 href 的区别是什么？

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系

• src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素

<script src="js.js"></script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到该资源加载、编译、执行完毕，图片和框架等元素也如此，类似将所指向资源嵌入当前标签内，这也是为什么将js脚本放在底部而不是头部的原因

• href是Hypertext Reference的缩写，指向网络资源的所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

<link href="css.css" rel="stylesheet"/>

那么浏览器会识别该文档为css文件，就回并行下载资源并且不会停止对当前文档的处理。这也是问什么建议使用link方式来加载css，而不是使用@importent方式

11、知道的网页制作会用到的图片格式有哪些？

png-8,png-24,jpeg,gif,svg

• 科普Webp:Webp格式，谷歌开发的一种旨在加快图片加载速度的图片格式，图片压缩的体积大约只有jpeg的2/3，并能节省大量的服务器带宽资源和数据空间，在质量相同的情况下，Webp格式图像的体积要比jpeg格式图像小40%

12、在前端构件中应该考虑微格式吗？

微格式是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准，是为特殊应用而制定的特殊格式

• 优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示

13、从刷新网页开始，一般情况下一次js请求有哪些地方会有缓存处理？

DNS缓存、cdn缓存、浏览器缓存、服务器缓存

14、优化图片加载的方法有哪些？

• 图片懒加载：在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载
• 如果为幻灯片相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载
• 如果图片为css图片，可以使用CSSsprite,SVGsprite,Iconfont,Base64等技术
• 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验
• 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先进行图片压缩，图片压缩后大小与展示一致

15、标准模式与兼容模式各有什么区别？

标准模式的渲染方式和js引擎的解析方式都是以浏览器支持的最高标准运行。在兼容模式中，页面可以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作

16、HTML5为什么只需要写,而不需要引入DTD?

HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。而 HTML4.01 基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型

17、SGML 、 HTML 、XML 和 XHTML 的区别？

• SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源
• HTML 是超文本标记语言，主要是用于规定怎么显示网页
• XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限
• XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML
  更严格，比如标签必须都用小写，标签都必须有闭合标签等

18、DTD 是什么？

DTD（ Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML 或 HTML 的特定版本中所有允许元素及它们的属性和层次关系的定义。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式（工作模式）

19、行内元素定义

HTML4 中，元素被分成两大类: inline （内联元素）与 block（块级元素）。一个行内元素只占据它对应标签的边框所包含的空间。

常见的行内元素有 a ，b ，span ，img ，strong ，sub ，sup ，button ，input ，label ，select ，textarea

20、块级元素定义

块级元素占据其父元素（容器）的整个宽度，因此创建了一个“块”。

常见的块级元素有 div ，ul ，ol ，li ，dl ，dt ，dd ，h1 ，h2 ，h3 ，h4 ，h5 ，h6 ，p

21、行内元素与块级元素的区别？

HTML4中，元素被分成两大类：inline （内联元素）与 block （块级元素）

• 格式上，默认情况下，行内元素不会以新行开始，而块级元素会新起一行
• 内容上，默认情况下，行内元素只能包含文本和其他行内元素。而块级元素可以包含行内元素和其他块级元素
• 行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置 width 无效，height 无效（可以设置 line-height），设置 margin 和 padding 的上下不会对其他元素产生影响

22、HTML5 元素的分类

HTML4中，元素被分成两大类: inline（内联元素）与 block（块级元素）。但在实际的开发过程中，因为页面表现的需要，前端工程师经常把 inline 元素的 display 值设定为 block （比如 a 标签），也经常把 block 元素的 display 值设定为inline 之后更是出现了 inline-block 这一对外呈现 inline 对内呈现 block 的属性。因此，简单地把 HTML 元素划分为inline 与 block 已经不再符合实际需求。

HTML5中，元素主要分为7类：Metadata ，Flow ，Sectioning ，Heading ，Phrasing ，Embedded ，Interactive

23、空元素定义

标签内没有内容的 HTML 标签被称为空元素。空元素是在开始标签中关闭的。

常见的空元素有：br ，hr ，img ，input ，link ，meta

24、link 标签定义

• link 标签定义文档与外部资源的关系。
• link 元素是空元素，它仅包含属性。 此元素只能存在于 head 部分，不过它可出现任何次数。
• link 标签中的 rel 属性定义了当前文档与被链接文档之间的关系。常见的 stylesheet 指的是定义一个外部加载的样式表。

25、页面导入样式时，使用 link 和 @import 有什么区别？

• 从属关系区别： @import 是 CSS 提供的语法规则，只有导入样式表的作用；link 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性、引入网站图标等
• 加载顺序区别：加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载
• 兼容性区别：@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标签作为 HTML 元素，不存在兼容性问题
• DOM 可控性区别：可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用 @import 的方式插入样式

26、对浏览器的理解

• 浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是 HTML，也包括 PDF、image 及其他格式。用户用 URI（Uniform Resource Identifier 统一资源标识符）来指定所请求资源的位置。
• HTML 和 CSS 规范中规定了浏览器解释 html 文档的方式，由 W3C 组织对这些规范进行维护，W3C 是负责制定 web 标准的组织
• 但是浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为 web 开发者带来了严重的兼容性问题
• 简单来说浏览器可以分为两部分，shell 和 内核
• 其中 shell 的种类相对比较多，内核则比较少。shell 是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。也有一些浏览器并不区分外壳和内核。从 Mozilla 将 Gecko 独立出来后，才有了外壳和内核的明确划分

27、对浏览器内核的理解

主要分成两部分：渲染引擎和 JS 引擎。

• 渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式。
• JS 引擎：解析和执行 javascript 来实现网页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

28、浏览器的渲染原理

首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。然后对 CSS 进行解析，生成 CSSOM 规则树。根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些 DOM 元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

29、渲染过程中遇到 JS 文件怎么处理？（浏览器解析过程）

JavaScript 的加载、解析与执行会阻塞文档的解析，也就是说，在构建 DOM 时，HTML 解析器若遇到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎，等 JavaScript 引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性。

30、 async 和 defer 的作用是什么？有什么区别？（浏览器解析过程）

• 脚本没有 defer 或 async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。
• defer 属性表示延迟执行引入的 JavaScript，即这段 JavaScript 加载时 HTML 并未停止解析，这两个过程是并行的。当整个 document 解析完毕后再执行脚本文件，在 DOMContentLoaded 事件触发之前完成。多个脚本按顺序执行。
• async 属性表示异步执行引入的 JavaScript，与 defer 的区别在于，如果已经加载好，就会开始执行，也就是说它的执行仍然会阻塞文档的解析，只是它的加载过程不会阻塞。多个脚本的执行顺序无法保证。

---

参考：https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Html/Html.md