史上最全高质量css+html面试题

不要秃头啊啊

已于 2023-07-14 08:12:51 修改

阅读量1.2k

点赞数 1

文章标签： css html 前端

于 2023-07-13 21:59:19 首次发布

本文链接：https://blog.csdn.net/m0_60676278/article/details/131673575

版权

这里写目录标题

1. 什么是盒模型（标准盒模型，怪异盒子模型/IE盒子模型）
- 盒子模型是什么
- 标准盒模型
- 怪异盒子模型/IE盒子模型
2. 行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？
3. CSS选择器有哪些，优先级怎么样
4. 简述src和href的区别
5. 什么是css Hack
6. 什么叫优雅降级和渐进增强
7.vw/vh、em、rem、px的区别？
8. HTML5 为什么只写`<!DOCTYPE HTML>`
9. 一次完整的HTTP事务是怎么一个过程
10. HTTPS是如何实现加密
11.HTTPS 有哪些优点？
12.Http 3.0 是基于 udp 的，那么它是如何保证传输可靠性的?
13.浏览器是如何渲染页面的
14.浏览器的内核有哪些？分别有什么代表的浏览器
15. 页面导入时，使用link和@import有什么区别
16. 如何优化图像，图像格式的区别
- 如何优化图像
- 图像格式的区别
17. 双飞翼布局和圣杯布局
18.列举你了解Html5. Css3 新特性
- html5的新特性？(记住有九大模块内容)
- CSS3中新添加的特性？（css3也有九大属性）
19.可以通过哪些方法优化css3 animation渲染
20.列举几个前端性能方面的优化
- 网络方面
- 渲染和DOM操作方面
21.前端兼容性问题
22.前端安全性问题
23. 如何实现同一个浏览器多个标签页之间的通信
24.浏览器的存储技术有哪些
25.css定位方式
26. 垂直上下居中的方法
27.清除浮动的方法
28.http协议和tcp协议
29.Http和https的区别
30.html和xhtml和xml的区别
31. 刷新页面，js请求一般会有哪些地方有缓存处理
32.如何对网站的文件和资源进行优化
33.你对网页标准和W3C重要性的理解
34.data-属性的作用
35.如何让Chrome浏览器显示小于12px的文字
36.哪些操作会引起页面回流（Reflow）
37.CSS预处理器的比较less sass
38.如何实现页面每次打开时清除本页缓存
39.meta 标签中的 viewport 相关属性：
40 .什么是Virtual DOM,为何要用Virtual DOM
41.伪元素和伪类的区别
42.http的几种请求方法和区别
43.前端需要注意哪些SEO
44.<img>的title和alt有什么区别
45.从浏览器地址栏输入url到显示页面的步骤
46.语义化的理解
47.HTML5的离线储存怎么使用，工作原理能不能解释一下？
48.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢
49.iframe有那些缺点？
50.WEB标准以及W3C标准是什么?
51.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
52.HTML全局属性(global attribute)有哪些
53.Canvas和SVG有什么区别？
54.如何在页面上实现一个圆形的可点击区域？
55.网页验证码是干嘛的，是为了解决什么安全问题
56.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
57. CSS选择器有哪些？哪些属性可以继承？
58.CSS优先级算法如何计算？
59.请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？
60.用纯CSS创建一个三角形的原理是什么？
61.为什么要初始化CSS样式
62.absolute的containing block计算方式跟正常流有什么不同？
63.CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？
64.display:none与visibility：hidden和opacity: 0的区别？
65.position跟display、overflow、float这些特性相互叠加后会怎么样？
66.对BFC规范(块级格式化上下文：block formatting context)的理解？
67.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
68.上下margin重合的问题
69.移动端的布局用过媒体查询吗？
70.CSS优化、提高性能的方法有哪些？
71.浏览器是怎样解析CSS选择器的？
72.在网页中的应该使用奇数还是偶数的字体？为什么呢？
73.margin和padding分别适合什么场景使用？
74.元素竖向的百分比设定是相对于容器的高度吗？
75.全屏滚动的原理是什么？用到了CSS的哪些属性？
76.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
77.视差滚动效果？
78.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
79.让页面里的字体变清晰，变细用CSS怎么做？
80.position:fixed;在android下无效怎么处理？
81.如果需要手动写动画，你认为最小时间间隔是多久，为什么？
82.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
83.display:inline-block 什么时候会显示间隙？
84.有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
85.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
86.style标签写在body后与body前有什么区别？
87.CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
88.阐述一下CSS Sprites(css精灵图)
89. 一行或多行文本超出隐藏
90.get和post区别

1. 什么是盒模型（标准盒模型，怪异盒子模型/IE盒子模型）

盒子模型是什么

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）

一个盒子由四个部分组成：content、padding、border、margin

margin(外边距)- 清除边框外的区域，外边距是透明的。
border(边框)- 围绕在内边距和内容外的边框。
padding(内边距)- 清除内容周围的区域，内边距是透明的。
content(内容)- 盒子的内容，显示文本和图像。

标准盒模型

标准盒模型又称W3C标准盒模型，标准盒模型的 width 或 height 决定 content 的宽或高。

计算盒子宽：width(content) + padding + border

计算盒子高：heigth(content) + padding + border

样式设置：box-sizing: content-box;

怪异盒子模型/IE盒子模型

怪异盒模型又称IE盒子模型，怪异盒子模型的 width 或 height 等于 content + padding + border 的宽或高。

计算盒子宽：width(content + padding + border）

计算盒子高：heigth(content + padding + border)

样式设置：box-sizing: border-box

2. 行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？

行内元素有：a b span img input select strong
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
空元素：br hr img input link meta
行内元素不可以设置宽高，不独占一行
块级元素可以设置宽高，独占一行

3. CSS选择器有哪些，优先级怎么样

id选择器：权重100
类选择器：权重10
标签选择器
后代选择器
伪类选择器
伪元素选择器
属性选择器
属性选择器
子选择器
相邻同胞选择器
群组选择器

!important>内联>ID选择器>类选择器>标签选择器
!important > 内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器
!important > 行内样式（比重1000）> ID 选择器（比重100） > 类选择器（比重10） > 标签（比重1） > 通配符 > 继承 > 浏览器默认属性

4. 简述src和href的区别

href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。例如：

<link href="reset.css" rel=”stylesheet“/>

浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。

src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。例如

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

当浏览器解析到该元素时，会暂停浏览器的渲染，知道该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。

简而言之，src用于替换当前元素；href用于在当前文档和引用资源之间建立联系。

5. 什么是css Hack

CSS hack
是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

CSS hack
由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

CSS Hack常见的有三种形式：CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。

属性级Hack：比如IE6能识别下划线””和星号” * “但不能识别下划线””，而firefox都不能识别。

/* CSS属性级Hack */
color:red; /* 所有浏览器可识别*/
_color:red; /* 仅IE6 识别 */
*color:red; /* IE6、IE7 识别 */
+color:red; /* IE6、IE7 识别 */
*+color:red; /* IE6、IE7 识别 */
[color:red; /* IE6、IE7 识别 */
color:red9; /* IE6、IE7、IE8、IE9 识别 */
color:red; /* IE8、IE9 识别*/
color:red!important; /* IE6 不识别!important*/

选择符级Hack：比如IE7能识别*+html .class{}或者*:first-child+html .class{}。

/* CSS选择符级Hack */
*html #demo { color:red;} /* 仅IE6 识别 */
*+html #demo { color:red;} /* 仅IE7 识别 */
:root #demo { color:red9; } : /* 仅IE9识别 */
body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */

IE条件注释Hack：条件注释只有在IE浏览器下才能执行。

/* IE条件注释Hack */
<!--[if IE]>此处内容只有IE可见<![endif]--> 
<!--[if IE 6]>此处内容只有IE6.0可见<![endif]--> 
<!--[if IE 7]>此处内容只有IE7.0可见<![endif]--> 
<!--[if !IE]>此处内容只有非IE可见<![endif]-->
<!--[if gt IE 6]> IE6以上版本可识别,IE6无法识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if lte IE 7]> IE7以及IE7以下版本可识别<![endif]-->
<!--[if lt IE 7]> 低于IE7的版本才能识别，IE7无法识别。 <![endif]-->
<!--[if !IE 7]>此处内容只有IE7不能识别，其他版本都能识别，当然要在IE5以上。<![endif]-->

PS：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

6. 什么叫优雅降级和渐进增强

渐进增强（Progressive Enhancement）：

一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：

一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

7.vw/vh、em、rem、px的区别？

vw：表示视窗宽度的百分比，1vw等于视窗宽度的1%。
vh：表示视窗高度的百分比，1vh等于视窗高度的1%。
em：相对于元素的字体大小，如果没有设置字体大小，则相对于父元素的字体大小。1em等于当前元素的字体大小。
rem：相对于根元素（即<html>元素）的字体大小，1rem等于根元素的字体大小。
px：像素单位，表示固定的像素值。
vmin：表示视口宽度和高度中较小的那个值，在哪个尺寸上取最小值就是多少。例如，如果视口宽度比高度小，则 vmin 的值将等于视口宽度。
vmax：表示视口宽度和高度中较大的那个值，在哪个尺寸上取最大值就是多少。例如，如果视口宽度比高度大，则 vmax 的值将等于视口宽度

这些单位在网页开发中用于控制元素的尺寸和布局。vw和vh基于视窗大小，可以实现响应式设计；em和rem相对于字体大小，可以适应不同的层级关系；px是一个固定的像素值，用于具体的精确尺寸控制。选择使用哪个单位取决于具体的需求和设计要求。

8. HTML5 为什么只写`<!DOCTYPE HTML>`

SGML：标准通用标记语言
DTD：数据传输/传输设备

html5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）

而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

9. 一次完整的HTTP事务是怎么一个过程

1、域名解析
2、发起TCP的三次握手
3、建立TCP连接后发起http请求
4、服务器端响应http请求，浏览器得到html码
5、浏览器解析html代码，并请求html代码中的资源
6、浏览器对页面进行渲染并呈现给客户

10. HTTPS是如何实现加密

HTTPS在传输数据之前需要客户端（浏览器） 与服务端（网站之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL协议不仅仅是一套加密传输的协议，更是一件经过艺术家精心设计的艺术品，TLS/SSL中使用了非对称加密，对称加密以及HASH算法。

11.HTTPS 有哪些优点？

HTTPS并非绝对安全，掌握根证书的机构、掌握加密算法的组织同样可以进行中间人形式的攻击，但HTTPS仍是现行架构下最安全的解决方案，主要有以下几个好处：

使用 HTTPS 协议可认证用户和服务器，确保数据发送到正确的客户机和服务器。
HTTPS 协议是由SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，要比 HTTP 协议安全，可防止数据在传输过程中不被窃取、修改，确保数据的完整性。
HTTPS 是现行架构下最安全的解决方案，虽然不是绝对安全，相比于http，https可以提供更加优质保密的信息，保证了用户数据的安全性，此外https同时也一定程度上保护了服务端，使用恶意攻击和伪装数据的成本大大提高。
谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”

12.Http 3.0 是基于 udp 的，那么它是如何保证传输可靠性的?

HTTP 3.0 使用的底层传输协议 QUIC 是基于 UDP 的，因此需要在应用层实现可靠的数据传输。QUIC 协议使用了以下几种机制来保证数据的可靠性：

连接迁移：QUIC 允许在网络切换或 IP 变更时迁移连接，而不需要重新建立新的连接，从而避免了连接中断和数据丢失的问题。
可靠性流控制：QUIC 在每个流上都实现了可靠的流控制机制，可以根据发送方和接收方的负载情况动态调整数据发送速率，从而优化传输效率和可靠性。
数据重传：QUIC 中每个数据包都带有唯一标识符（Packet Number），接收方可以根据这个标识符进行数据包的确认和重传，以保证数据传输的可靠性。
拥塞控制：QUIC 采用了基于 TCP 的拥塞控制机制，可以根据网络拥塞程度自适应调整发送速率，以避免网络拥塞和丢包等问题。

在基于 UDP 的 HTTP/3 协议中，通过 QUIC 实现了多种机制来保证数据传输的可靠性，如连接迁移、可靠性流控制、数据重传、拥塞控制等，从而有效解决了 UDP 协议本身的可靠性问题，提高了传输效率和安全性。

13.浏览器是如何渲染页面的

浏览器从HTTP服务器获取html文档，到呈现页面给用户，会经过以下几个步骤：

解析文档构建DOM树

浏览器的解析内容可以分为三个部分：

HTML/XHTML/SVG：解析这三种文件后，会生成DOM树（DOM Tree）
CSS：解析样式表，生成CSS规则树（CSS Rule Tree）
JavaScript：解析脚本，通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，与用户进行交互。
以上三类文件的执行顺序会根据其在文档中的位置及其标签属性的不同而有异同，具体在后文进行讨论。

构建渲染树

解析文档完成后，浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上，并根据DOM Tree 和 CSS Rule Tree构造 Rendering Tree（渲染树）。此处需要注意：
Render Tree和DOM Tree的区别在于，类似Head或display：node之类的东西不会放在渲染树中；
将CSS Rule Tree匹配到DOM Tree需要解析CSS的选择器，为了提高该过程的性能，DOM树应该尽量小，CSS Selector应该尽量使用id和class，避免过度层叠。

布局与绘制渲染树

解析position, overflow, z-index等等属性，计算每一个渲染树节点的位置和大小，此过程被称为reflow。最后调用操作系统的Native GUI API完成绘制（repain）。

注意：
渲染树的节点，在Gecko中称为frame，而在webkit中称为renderer；
reflow和repaint是两个不同的概念，其区别会在后文进行探讨

14.浏览器的内核有哪些？分别有什么代表的浏览器

Trident内核：代表作品是IE
Gecko内核：代表作品是Firefox，即火狐浏览器。
Webkit内核：代表作品是Safari Chromewebkit、曾经的Chrome，是开源的项目。
Presto内核：代表作品是Opera ，Presto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了 Presto
Blink内核：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎，V8，使JS运行速度极大地提高了

15. 页面导入时，使用link和@import有什么区别

加载顺序：使用link标签时，外部样式表会在页面加载时同时加载，并且不会阻塞页面的渲染。而@import是在页面加载完毕后再加载样式表，会阻塞页面的渲染。
兼容性：link标签是HTML标签，几乎所有的浏览器都支持。而@import是CSS提供的语法规则，较老的浏览器可能不支持或支持不完全。
引入个数：link标签可以同时引入多个外部样式表，而@import只能引入一个外部样式表。
优先级：由于link标签是在页面加载时同时加载的，所以其定义的样式具有较高的优先级，可以覆盖其他样式。而@import是在页面加载完毕后再加载的，其定义的样式优先级较低。

基于以上区别，一般推荐使用link标签来导入外部样式表，因为它具有更好的兼容性，加载效率高，且可以同时引入多个样式表。而@import在特定情况下（例如需要根据条件动态加载样式）可以使用。

16. 如何优化图像，图像格式的区别

如何优化图像

不用图片，尽量用css3代替。比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。
使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！
使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。
- 基本上，内容图片多为照片之类的，适用于JPEG。
- 而修饰图片通常更适合用无损压缩的PNG。
- GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。
按照HTTP协议设置合理的缓存。
使用字体图标webfont、CSS Sprites等。
用CSS或JavaScript实现预加载。
WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。

图像格式的区别

矢量图：图标字体，如 font-awesome，svg

位图：gif，jpg(jpeg)，png

区别：
　　1、gif：是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。
　　2、JPEG格式：是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo，各种小图标icons等。
　　3、png：PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。

关于透明：PNG8支持索引透明和alpha透明；PNG24不支持透明；而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明；
优缺点：
1、能在保证最不失真的情况下尽可能压缩图像文件的大小。
2、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

17. 双飞翼布局和圣杯布局

双飞翼布局：

为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。多了1个div，少用大致4个css属性（圣杯布局中间div的padding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4）
以下是双飞翼布局的一种实现方式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双飞翼布局</title>
		<style>
			.col {
				float: left;
			}
			#main {
				width: 100%;
				height: 400px;
				background-color: #ccc;
			}
			#main-wrap {
				margin: 0 190px 0 190px;
			}
			#left {
				width: 190px;
				height: 400px;
				margin-left: -100%;
				background-color: #0000FF;
			}
			#right {
				width: 190px;
				height: 400px;
				margin-left: -190px;
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<!-- 双飞翼布局 -->
		<div id="container">
			<div id="main" class="col">
				<div id="main-wrap">
					#main
				</div>
			</div>
			<div id="left" class="col">
				#left
			</div>
			<div id="right" class="col">
				#right
			</div>
		</div>
	</body>
</html>

圣杯布局：

为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
以下是圣杯布局的一种实现方式：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>圣杯布局</title>
    <style>
        .container {
            border: 1px solid yellow;
            padding: 0 300px;
        }

        .container div {
            float: left;
            position: relative;
        }

        /* 中间自适应 */
        .main {
            width: 100%;
            height: 300px;
            background: #FFFF00;
        }

        /* 左 */
        .left {
            height: 300px;
            width: 300px;
            background: darkcyan;
            margin-left: -100%;
            left: -300px;
        }

        /* 右 */
        .right {
            height: 300px;
            width: 300px;
            background: #0000FF;
            margin-left: -300px;
            right: -300px;
        }
    </style>
</head>

<body>
    <!-- 圣杯布局 -->
    <div class="container">
        <!-- 中间自适应 -->
        <div class="main">main</div>
        <!-- 两边定宽 -->
        <!-- 左 -->
        <div class="left">left</div>
        <!-- 右 -->
        <div class="right">right</div>
    </div>
</body>

</html>

18.列举你了解Html5. Css3 新特性

html5的新特性？(记住有九大模块内容)

添加了video，radio标签
添加了canvas画布和svg,渲染矢量图片
添加了一些列语义化标签header,footer,main,section,aside,nav等
input的type值新添加了很多属性（email，url，number，range，Date pickers (date, month, week, time, datetime, datetime-local)，search，color）
添加了地理位置定位功能 Geolocation API
添加了web存储功能，localStorage和sessionStorage
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
服务端事件推送（EventSource 对象用于接收服务器发送事件通知），所有主流浏览器均支持服务器发送事件，除了 Internet Explorer

CSS3中新添加的特性？（css3也有九大属性）

媒体查询（可以查询设备的物理像素然后进行自适应操作）
transform，transition，translate,scale,skelw，rotate等相关动画效果
box-shadow,text-shadow等特效
CSS3 @font-face 规则,设计师可以引入任意的字体了
CSS3 @keyframes 规则，可以自己创建一些动画等
2D、3D转换
添加了border-radius，border-image等属性
CSS3 创建多列（column-count规定文本可以以几列的方式布局）
CSS3 用户界面（resize，box-sizing，outline-offset）

19.可以通过哪些方法优化css3 animation渲染

尽可能多的利用硬件能力，如使用3D变形来开启GPU加速：

  -webkit\-transform: translate3d(0,0,0);
  -moz\-transform: translate3d(0,0,0);
  -ms\-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);

原因：

CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite
Paint通常是其中最花费性能的，尽可能避免使用触发paint的CSS动画属性，这也是为什么我们推荐在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em，因为left会额外触发layout与paint，而webkit-transform只触发整个页面composite（这也是为什么推荐在CSS动画中使用webkit-transform: translateX(500px)的方案代替使用left: 500px）；
如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden; 
 -webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

尽可能少的使用box-shadows与gradients

box-shadows与gradients往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们.
尽可能的让动画元素不在文档流中，以减少重排

position: fixed;
position: absolute;

20.列举几个前端性能方面的优化

网络方面

减少http请求：在YUI35规则中也有提到，主要是优化js、css和图片资源三个方面，因为html是没有办法避免的，可以做一下的几项操作：

合并js文件
合并css文件
雪碧图的使用(css sprite)（雪碧图是将多个小图标或图片合并到一张大图中的技术。它的原理基于 CSS 的背景定位（background-position）属性和盒模型。）
使用base64表示简单的图片

减小资源体积：可以通过以下几个方面进行实施：

gzip压缩（gzip压缩主要是针对html文件来说的，它可以将html中重复的部分进行一个打包，多次复用的过程）
js混淆（js的混淆可以有简单的压缩(将空白字符删除)、丑化(丑化的方法，就是将一些变量缩小)、或者可以使用php对js进行混淆加密）
css压缩（css压缩，就是进行简单的压缩）
图片压缩（图片的压缩，主要也是减小体积，在不影响观感的前提下，尽量压缩图片，使用png等图片格式，减少矢量图、高清图等的使用）

缓存：可以通过以下几个方面来描述：

DNS缓存（由于浏览器会在DNS解析步骤中消耗一定的时间，所以，对于一些高访问量网站来说，做好DNS的缓存工作，就会一定程度上提升网站效率）
CDN部署与缓存（CDN缓存，CDN作为静态资源文件的分发网络，本身就已经提升了，网站静态资源的获取速度，加快网站的加载速度，同时也给静态资源做好缓存工作，有效的利用已缓存的静态资源，加快获取速度。）
http缓存（http缓存，也是给资源设定缓存时间，防止在有效的缓存时间内对资源进行重复的下载，从而提升整体网页的加载速度。）

移动端优化：使用以下几种方式来加快移动端网络方面的优化：

使用长cache，减少重定向（可以使得移动端的部分资源设定长期缓存，这样可以保证资源不用向服务器发送请求，来比较资源是否更新，从而避免304的情况。304重定向，在PC端或许并不会影响网页的加载速度，但是，在移动端网络不稳定的前提下，多一次请求，就多了一部分加载时间）
首屏优化，保证首屏加载数据小于14kb
不滥用web字体

渲染和DOM操作方面

优化网页渲染：

css的文件放在头部，js文件放在尾部或者异步
尽量避免內联样式

DOM操作优化：

避免在document上直接进行频繁的DOM操作
使用classname代替大量的内联样式修改
对于复杂的UI元素，设置position为absolute或fixed
尽量使用css动画
使用requestAnimationFrame代替setInterval操作
适当使用canvas
尽量减少css表达式的使用
使用事件代理

操作细节注意：

避免图片或者frame使用空src
在css属性为0时，去掉单位
禁止图像缩放
正确的css前缀的使用
移除空的css规则
对于css中可继承的属性，如font-size，尽量使用继承，少一点设置
缩短css选择器，多使用伪元素等帮助定位

移动端优化：

长列表滚动优化
函数防抖和函数节流
使用touchstart、touchend代替click
HTML的viewport设置
开启GPU渲染加速

数据方面

图片加载处理：

图片预加载
图片懒加载
首屏加载时进度条的显示

异步请求的优化：

使用正常的json数据格式进行交互
部分常用数据的缓存
数据埋点和统计

21.前端兼容性问题

不同浏览器的标签默认的margin和padding不同

解决办法：
body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }
在CSS文件开头，加*{margin: 0; padding: 0;}，把所有标签的margin和padding设置为0即可。

块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

清除浮动：

解决方案：万能公式在float的父元素上使用 .abc:after
{clear:both;content:‘.’;display:block;width: 0;height:
0;visibility:hidden;}

IE浮动边缘产生的双倍距离

#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略 }

透明度

IE：filter：alpha（opacity = 10）;
FF：不透明度：0.6;
FF：-moz-opacity：0.10;
最好两个都写，并将透明度属性放在下面

最小高度最小高度的实现（兼容IE6，IE7，FF）

#mrjin {
background:#ccc;
min-height:100px;
height:auto !important;
height:100px;
overflow:visible;
}

IE6下在使用margin:0 auto;无法使其居中**

解决办法：为其父容器设置text-align:center;

9，被点击过后的超链接不再具有hover和active属性

解决办法:按lvha的顺序书写css样 “:link”: a标签还未被访问的状态；

“:visited”: a标签已被访问过的状态；

“:hover”: 鼠标悬停在a标签上的状态；

“:active”: a标签被鼠标按着时的状态；

IE6下无法设置1px的行高**，原因是由其默认行高引起的

解决办法：为期设置overflow:hidden;或者line-height:1px;

在IE6，IE7等浏览器，标签高度小于10px时，实际的高度会超出设置的高度，这是因为浏览器给标签设置了一个默认的最小高度；

解决办法：设置{overflow: hidden;}，或者设置line-height小于你设置的高度

在某些浏览器中，图片有默认的间距(所有有文字属性的标签都会有边距，除非两个标签连在一起没有隔开)；

解决办法：使用float为img布局，因为所有标签设置float之后都会变成块级元素，块级元素浮动时会紧挨在一起，没有边距；此外可以让HTML的img标签紧挨在一起，不要隔开，但是会影响HTML文档的结构，不太美观

标签最低高度设置min-height不兼容问题；

解决办法：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto
!important; height:200px; overflow:visible;}。

IE9以下浏览器不能使用opacity；

解决办法：{opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);}。

两个块级元素，父元素设置了overflow:auto，子元素设置了position:relative ，且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

解决办法：父级元素设置position:relative。

22.前端安全性问题

前端安全性是一个重要的问题，以下是几种解决前端安全性问题的常用方法和使用案例：

输入验证（Input Validation）：
在前端表单中进行输入验证是一种重要的安全措施，可以防止用户输入恶意或非法数据。例如，对于用户的登录信息，可以使用正则表达式验证用户名和密码格式的合法性，防止SQL注入、XSS攻击等。

示例：在用户注册页面中，对于用户名和密码进行长度、字符类型等方面的验证，确保用户输入的内容合法。使用正则表达式来检验输入值是否符合规定的格式。

跨站脚本攻击防护（Cross-Site Scripting，XSS）：
XSS攻击是指攻击者通过在网页中插入恶意脚本代码来获取用户敏感信息或执行恶意操作。为了防止XSS攻击，需要对输入和输出的数据进行转义处理或过滤特殊字符。

示例：使用HTML编码或JavaScript函数进行转义处理，将用户输入的内容进行转义，确保不会被当作恶意脚本执行。

跨站请求伪造防护（Cross-Site Request Forgery，CSRF）：
CSRF攻击是指攻击者利用受信任用户的身份，在用户不知情的情况下完成恶意操作。为了防止CSRF攻击，可以使用CSRF令牌验证、同源策略等方式来确保请求来源的合法性。

示例：在每个表单或请求中添加一个CSRF令牌（Token），并在服务器端进行验证，确保请求的合法性。当请求不含有效的令牌或令牌验证失败时，拒绝处理该请求。

安全的网络通信（Secure Network Communication）：
在前端与后端之间的网络通信过程中，使用安全的协议和加密算法可以保护数据的机密性和完整性。常用的安全通信协议有HTTPS。

示例：通过使用HTTPS协议来加密前端与后端之间的通信数据，防止敏感信息被窃听或篡改。

客户端数据存储安全：
对于客户端存储的数据，如Cookie、localStorage等，需要注意数据的安全性，避免敏感信息泄露或篡改。可以对数据进行加密处理，并使用安全的存储方式。

示例：将敏感信息进行加密处理后再存储到客户端，同时设置相关的安全策略和限制，减少敏感信息泄露的风险。

请注意，每个场景的安全措施可能因具体情况而异。为了确保前端的安全性，建议参考安全编码标准和最佳实践，并根据具体需求综合选择适合的安全措施。

23. 如何实现同一个浏览器多个标签页之间的通信

websocket通讯

全双工(full-duplex)通信自然可以实现多个标签页之间的通信

定时器setInterval+cookie

在页面A设置一个使用 setInterval 定时器不断刷新，检查 Cookies 的值是否发生变化，如果变化就进行刷新的操作。

使用localstorage

localstorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信(ps：session是会话级的存储空间，每个标签页都是单独的）。

直接在window对象上添加监听即可：

window.onstorage = (e) => {console.log(e)}
// 或者这样
window.addEventListener('storage', (e) => console.log(e))

html5浏览器的新特性SharedWorker

普通的webworker直接使用new Worker()即可创建，这种webworker是当前页面专有的。然后还有种共享worker(SharedWorker)，这种是可以多个标签页、iframe共同使用的。
SharedWorker可以被多个window共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)

24.浏览器的存储技术有哪些

cookie是什么：cookie是指存储在用户本地终端上的数据，同时它是与具体的web页面或者站点相关的。cookie数据会自动在web浏览器和web服务器之间传输，也就是说HTTP请求发送时，会把保存在该请求域名下的所有cookie值发送给web服务器，因此服务器端脚本是可以读、写存储在客户端的cookie的操作。
cookie的有效期：cookie默认情况下的有效期是很短暂的，一旦用户关闭浏览器，cookie保存的数据就会丢失。如果想要延长cookie的有效期，可以通过设置HTTP头信息中的cache-control属性的max-age值，或者修改HTTP头信息中的expires属性的值来延长有效期。
cookie的作用域：它是通过文档源和文档路径来确定的。该作用域通过cookie的path和domain属性也是可配置的。默认情况下，cookie和创建它的web页面有关，并对该页面以及和该页面同目录或者子目录的其他页面可见。有时候，你可能希望让整个网站都能够使用cookie的值，而不管是哪个页面创建它。要满足这样的需求可以设置cookie的路径(设置cookie的path属性)。cookie的作用域默认由文档源限制。但是，有的大型网站想要子域之间能够互相共享cookie。
cookie的数目和大小的限制：每个web服务器(域名)保存的cookie数不能超过50个，每个cookie保存的数据不能超过4KB，如果超过了4KB（IE6大约只能存储2K），服务器会处理不了。
cookie的优点：能用于和服务器端通信；当cookie快要过期时，可以重新设置而不是删除。
cookie的缺点：它会随着http头信息一起发送，增加了网络流量（文档传输的负载）；它只能储存少量的数据；它只能储存字符串；有潜在的安全问题。

另外，自从有了Web Storage API(Local and Session Storage)，cookie就不被推荐用于存储数据了~

localStorage

localStorage是什么：在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
localStorage的优点：

1）localStorage拓展了cookie的4K限制；

2）localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的；

3）localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

localStorage的缺点：

1）浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性；

2）目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换；

3）localStorage在浏览器的隐私模式下面是不可读取的；

4）localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡；

5）localStorage不能被爬虫抓取到。

sessionStorage

sessionStorage与localStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对就会被清空。

25.css定位方式

position 属性值的含义：

static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身

26. 垂直上下居中的方法

使用Flexbox布局：
将父元素的display属性设置为flex，然后使用align-items和justify-content属性将子元素在垂直和水平方向上都居中。

示例代码：

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 100vh; /* 设置容器高度 */
}

.content {
  /* 内容样式 */
}

使用绝对定位和transform属性：
将子元素设置为绝对定位，并使用transform属性进行位移，将元素相对于父元素进行垂直和水平方向的居中对齐。

示例代码：

.container {
  position: relative; /* 设置容器为相对定位 */
  height: 100vh; /* 设置容器高度 */
}

.content {
  position: absolute; /* 设置内容为绝对定位 */
  top: 50%; /* 相对于父元素顶部距离为50% */
  left: 50%; /* 相对于父元素左边距离为50% */
  transform: translate(-50%, -50%); /* 通过负的自身宽度和高度的一半来实现居中 */
}

使用表格布局：
将父元素的display属性设置为table，然后将子元素的display属性设置为table-cell，并使用vertical-align属性将内容垂直居中。

示例代码：

.container {
  display: table; /* 设置容器为表格布局 */
  height: 100vh; /* 设置容器高度 */
}

.content {
  display: table-cell; /* 设置内容为表格单元格 */
  vertical-align: middle; /* 垂直居中 */
  text-align: center; /* 水平居中 */
}

27.清除浮动的方法

使用overflow属性来清除浮动

.ovh{
overflow:hidden;
}

先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.
注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.

使用额外标签法

.clear{
　　clear:both;
}

在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
a.内部标签：会将这个浮动盒子的父盒子高度重新撑开.
b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.

使用伪元素来清除浮动

.clearfix::after{
    content:"";//设置内容为空
    height:0;//高度为0
    line-height:0;//行高为0
    display:block;//将文本转为块级元素
    visibility:hidden;//将元素隐藏
    clear:both//清除浮动
}
.clearfix{  
　　zoom:1;为了兼容IE
}

使用双伪元素清除浮动

.clearfix::before,.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix {
  zoom: 1;
}

28.http协议和tcp协议

TCP协议对应于传输层，而Http协议对应于应用层，从本质上讲，二者没有可比性，Http协议是建立在TCP协议之上的，当浏览器需要从服务器获取网页数据的时候，会发出一次Http请求。Http会通过tcp建立起一个到服务器的连接通道，当本次请求需要的数据完毕后,Http会立即将TCP连接断开，这个过程是很短的。所以Http连接是一种短连接，是一种无状态的连接。
所谓的无状态，就是指浏览器每次向服务器发起请求的时候，不是通过一个连接，而是每次都建立一个新的连接。如果是一个连接的的话，服务器进程中就能保持住这个连接并并且在内存中记住一些信息状态。而每次请求结束后，连接就关闭，相关的内容就释放了，所以记不住任何状态，成为无状态连接。

1、TCP连接
手机能够使用联网功能是因为手机底层实现了TCP/IP协议，可以使手机终端通过无线网络建立TCP连接。TCP协议可以对上层网络提供接口，使上层网络数据的传输建立在“无差别”的网络之上。
建立起一个TCP连接需要经过“三次握手”：

第一次握手：客户端发送syn包(syn=j)到服务器，并进入SYN_SEND状态，等待服务器确认；
第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；
第三次握手：客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=k+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。
握手过程中传送的包里不包含数据，三次握手完毕后，客户端与服务器才正式开始传送数据。理想状态下，TCP连接一旦建立，在通信双方中的任何一方主动关闭连接之前，TCP 连接都将被一直保持下去。断开连接时服务器和客户端均可以主动发起断开TCP连接的请求，断开过程需要经过“四次握手”（过程就不细写了，就是服务器和客户端交互，最终确定断开）

2、HTTP连接
HTTP协议即超文本传送协议(Hypertext Transfer Protocol )，是Web联网的基础，也是手机联网常用的协议之一，HTTP协议是建立在TCP协议之上的一种应用。

HTTP连接最显著的特点是客户端发送的每次请求都需要服务器回送响应，在请求结束后，会主动释放连接。从建立连接到关闭连接的过程称为“一次连接”。

1）在HTTP 1.0中，客户端的每次请求都要求建立一次单独的连接，在处理完本次请求后，就自动释放连接。
2）在HTTP 1.1中则可以在一次连接中处理多个请求，并且多个请求可以重叠进行，不需要等待一个请求结束后再发送下一个请求。
由于HTTP在每次请求结束后都会主动释放连接，因此HTTP连接是一种“短连接”，要保持客户端程序的在线状态，需要不断地向服务器发起连接请求。通常的做法是即时不需要获得任何数据，客户端也保持每隔一段固定的时间向服务器发送一次“保持连接”的请求，服务器在收到该请求后对客户端进行回复，表明知道客户端“在线”。若服务器长时间无法收到客户端的请求，则认为客户端“下线”，若客户端长时间无法收到服务器的回复，则认为网络已经断开。

29.Http和https的区别

一、HTTP和HTTPS的基本概念

HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。

HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。
二、HTTP与HTTPS有什么区别？

HTTP协议传输的数据都是未加密的，也就是明文的，因此使用HTTP协议传输隐私信息非常不安全，为了保证这些隐私数据能加密传输，于是网景公司设计了SSL（Secure
Sockets Layer）协议用于对HTTP协议传输的数据进行加密，从而就诞生了HTTPS。

简单来说，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。

HTTPS和HTTP的区别主要如下：
1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

30.html和xhtml和xml的区别

HTML、XHTML 和 XML 是三种不同的标记语言，它们之间的区别如下：

用途：HTML（超文本标记语言）主要用于创建网页和定义其结构和内容。它包含了一些预定义的标签和属性，用来表示文本、图像、链接等等。XHTML（可扩展超文本标记语言）是对HTML进行了严格化和XML化的重新定义，强调在编写页面时应遵循较为严格的规范和语法。XML（可扩展标记语言）则是一种通用的标记语言，用于存储和传输结构化的数据，没有预定义的标签，需要根据具体需求自定义标签。
语法要求：HTML相对较宽松，允许一些灵活性和不规范的写法，比如忽略一些闭合标签、大小写混合的元素名等。而XHTML对语法要求更严格，需要使用正确的XML语法，所有标签必须被正确地闭合，属性值必须使用引号括起来，并且元素名必须使用小写字母。XML也对语法要求很严格，要求严格的标签闭合和正确的嵌套关系。
结构关系：HTML和XHTML都是基于树形结构的标记语言，使用标签对表示各种元素以构建层次化的页面结构。XML也是树形结构，但不仅限于用于网页，可以用来表示任意结构化数据。
预定义标签：HTML和XHTML都具有一些预定义的标签和属性，比如<div>、<p>、<img>等，用于表示特定的内容和功能。而XML没有预定义标签，需要根据具体需求自定义标签。
严谨性和可扩展性：XHTML和XML相对于HTML更严格和规范，强调代码的正确性和质量。XHTML在HTML的基础上进行了严格化和XML化的改进，使得其更为严谨和可扩展。XML则是一种通用的标记语言，非常灵活和可扩展，适用于各种领域和应用。

总体来说，HTML主要用于创建网页和定义其结构和内容，XHTML是对HTML进行了重新定义和严格化，而XML则是一种通用的标记语言，用于存储和传输结构化数据，没有预定义的标签。

31. 刷新页面，js请求一般会有哪些地方有缓存处理

DNS缓存：短时间内多次访问某个网站，在限定时间内，不用多次访问DNS服务器。
CDN缓存：内容分发网络（人们可以在就近的代售点取火车票了，不用非得到火车站去排队）
浏览器缓存：浏览器在用户磁盘上，对最新请求过的文档进行了存储。
服务器缓存：将需要频繁访问的Web页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度。

32.如何对网站的文件和资源进行优化

1.文件合并（目的是减少http请求）：使用css sprites合并图片，一个网站经常使用小图标和小图片进行美化，但是很遗憾这些小图片占用了大量的HTTP请求，因此可以采用sprites的方式把所有的图片合并成一张图片，可以通过相关工具在线合并，也可以在ps中合并。

2.使用CDN（内容分发网络）加速，降低通信距离。

3.缓存的使用，添加Expire/Cache-Control头。

4.启用Gzip压缩文件。

5.将css放在页面最上面。

6.将script放在页面最下面。

7.避免在css中使用表达式。

8.将css, js都放在外部文件中。

9.减少DNS查询。

10.文件压缩：最小化css, js，减小文件体积。

11.避免重定向。

12.移除重复脚本。

13.配置实体标签ETag。

14.使用AJAX缓存，让网站内容分批加载，局部更新。

33.你对网页标准和W3C重要性的理解

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

34.data-属性的作用

data-为H5新增的为前端开发者提供自定义的属性，
这些属性集可以通过对象的 dataset 属性获取，
不支持该属性的浏览器可以通过 getAttribute 方法获取 :

需要注意的是：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。所有主流浏览器都支持 data-* 属性。
即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。

35.如何让Chrome浏览器显示小于12px的文字

在 Chrome 浏览器中，默认情况下是不允许显示小于 12px 的文字的，这是为了保证最佳的可读性和用户体验。不过，您可以通过一些 CSS 技巧来实现在 Chrome 浏览器中显示小于 12px 的文字，例如：

使用 transform 属性：应用缩放变换将文本缩小。请注意，这可能会导致文本的质量降低。

.my-text {
  transform: scale(0.8);
}

使用 font-size 缩放：通过设置字体大小小于 12px，并结合使用 transform 或 zoom 属性将文本缩小。同样，这可能会降低文本质量。

.my-text {
  font-size: 10px;
  transform: scale(0.8);
  zoom: 0.8;
}

请注意，尽管可以使用上述技巧来在 Chrome 浏览器中强制显示小于 12px 的文字，但这可能会影响可读性和用户体验。建议仔细考虑字体大小和排版，以确保最佳的阅读体验，并在必要时改变设计或选择更大的字体大小。

36.哪些操作会引起页面回流（Reflow）

1、什么是reflow?
reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。
因为回流可能导致整个Dom树的重新构造,所以是性能的一大杀手。
以下操作会引起回流：
① 改变窗口大小
② font-size大小改变
③ 增加或者移除样式表
④ 内容变化（input中输入文字会导致）
⑤ 激活CSS伪类（:hover）
⑥ 操作class属性，新增或者减少
⑦ js操作dom
⑧ offset相关属性计算
⑨ 设置style的值
…
reflow与repaint是减缓js的几大主要原因，尤其是reflow更是性能杀手，所以我们应该想法避免。

37.CSS预处理器的比较less sass

两者的相同点

首先sass和less都是css的预编译处理语言，
他们引入了mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript赋值等
加快了css开发效率,
当然这两者都可以配合gulp和grunt等前端构建工具使用

两者的区别

less是基于JavaScript的在客户端处理所以安装的时候用npm
sass是基于ruby所以在服务器处理

两者的优缺点
- less缺点：因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。
- less优点：less 简单,易上手;属于css的基础拓展;less更适合静态界面写样式时
- sass的缺点：复杂对于新手比较不友好
- sass的优点：功能强大,更加丰富的拓展sass适合游戏或者其他做效果时需要逻辑来更换不同样式

38.如何实现页面每次打开时清除本页缓存

（1）用HTML标签设置HTTP头信息

<meta http-equiv="Pragma" content="no-cache">
header("Cache-Control: no-cache, must-revalidate")
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires"  content="0">

说明：HTTP头信息“Expires”和“Cache-Control”为应用程序服务器提供了一个控制浏览器和代理服务器上缓存的机制。HTTP头信息Expires告诉代理服务器它的缓存页面何时将过期。HTTP1.1规范中新定义的头信息Cache-Control可以通知浏览器不缓存任何页面。当点击后退按钮时，浏览器重新访问服务器已获取页面。如下是使用Cache-Control的基本方法：

no-cache:强制缓存从服务器上获取新的页面
no-store: 在任何环境下缓存不保存任何页面

HTTP1.0规范中的Pragma:no-cache等同于HTTP1.1规范中的Cache-Control:no-cache，同样可以包含在头信息中。

（2）在需要打开的url后面增加一个随机的参数：
增加参数前：url=test/test.jsp
增加参数后：url=test/test.jsp?ranparam=random()

39.meta 标签中的 viewport 相关属性：

initial-scale 属性用于设置页面初始的缩放比例，缩放比例为理想视口与视觉视口的比值。
width: 页面宽度，正整数或 device-width(设备宽度)，定义视口的宽度，单位为像素。
height: 页面高度，正整数或 device-height(设备高度)，定义视口的高度，单位为像素（很少用）。
initial-scale: [0.0-10.0] 设置页面的初始缩放。
minimum-scale: [0.0-10.0] 设置最小的缩小程度，它必须小于或等于maximum-scale设置。
maximum-scale: [0.0-10.0] 设置最大的放大程度，它必须大于或等于minimum-scale设置。
user-scalable: yes / no 设置为 no 时禁用缩放，默认值 yes。

若设置：width=device-width iPhone 横屏有 bug。
若设置：initial-scale=1 页面的初始缩放为1，Windows Phone IE 横屏产生 BUG。
若设置：width=device-width,initial-scale=1 兼容 iPhone and Safari of iPad and IE of Windows Phone 横屏 BUG。
若设置：initial-scale=0.1 @media 下的 css 将失效。

40 .什么是Virtual DOM,为何要用Virtual DOM

Virtual DOM的概念有很多解释，分别是：一个对象，两个前提，三个步骤。

一个对象指的是Virtual DOM是一个基本的JavaScript对象，也是整个Virtual DOM树的基本。
两个前提分别是JavaScript很快和直接操作DOM很慢，这是Virtual DOM得以实现的两个基本前提。
得益于V8引擎的出现，让JavaScript可以高效地运行，在性能上有了极大的提高。
直接操作DOM的低效和JavaScript的高效相对比，为Virtual DOM的产生提供了大前提。
三个步骤指的是Virtual DOM的三个重要步骤，分别是：生成Virtual DOM树、对比两棵树的差异、更新视图。这三个步骤的具体实现也是本文将简述的一大重点。

生成Virtual DOM树
一个DOM节点包含了很多的内容，但是一个抽象出一个DOM节点却只需要三部分：节点类型，节点属性、子节点。所以围绕这三个部分，我们可以使用JavaScript简单地实现一棵DOM树，然后给节点实现渲染方法，就可以实现虚拟节点到真是DOM的转化。
对比两棵树的差异
比较两棵DOM树的差异是Virtual DOM算法最核心的部分，这也是我们常说的的 Virtual DOM的diff算法。在比较的过程中，我们只比较同级的节点，非同级的节点不在我们的比较范围内，这样既可以满足我们的需求，又可以简化算法实现。
比较“树”的差异，首先是要对树进行遍历，常用的有两种遍历算法，分别是深度优先遍历和广度优先遍历，一般的diff算法中都采用的是深度优先遍历。对新旧两棵树进行一次深度优先的遍历，这样每个节点都会有一个唯一的标记。在遍历的时候，每遍历到一个节点就把该节点和新的树的同一个位置的节点进行对比，如果有差异的话就记录到一个对象里面。
更新视图
在第二步得到整棵树的差异之后，就可以根据这些差异的不同类型，对DOM进行针对性的更新。与四种差异类型相对应的，是更新视图时具体的更新方法，分别是：replaceChild()，appendChild()/removeChild()，setAttribute()/removeAttribute()，textContent

41.伪元素和伪类的区别

相同之处：

伪类和伪元素都不出现在源文件和文档树中。也就是说在html源文件中是看不到伪类和伪元素的。

不同之处：

伪类其实就是基于普通DOM元素而产生的不同状态，他是DOM元素的某一特征。
伪元素能够创建在DOM树中不存在的抽象对象，而且这些抽象对象是能够访问到的。

42.http的几种请求方法和区别

http请求中的8种请求方法

1、GET方法

发送一个请求来取得服务器上的某一资源
2、POST方法

向URL指定的资源提交数据或附加新的数据
3、PUT方法

跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有
4、HEAD方法

只请求页面的首部
5、DELETE方法

删除服务器上的某资源
6、OPTIONS方法

它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息
7、TRACE方法

TRACE方法被用于激发一个远程的，应用层的请求消息回路
8、CONNECT方法

把请求连接转换到透明的TCP/IP通道

43.前端需要注意哪些SEO

合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
重要内容不要用js输出：爬虫不会执行js获取内容
少用iframe：搜索引擎不会抓取iframe中的内容
非装饰性图片必须加alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标

44.的title和alt有什么区别

title通常当鼠标滑动到元素上的时候显示
alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

45.从浏览器地址栏输入url到显示页面的步骤

浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。

46.语义化的理解

用正确的标签做正确的事情！
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

47.HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
如何使用：
- 页面头部像下面一样加入一个manifest的属性；
- 在cache.manifest文件的编写离线存储的资源
- 在离线状态时，操作window.applicationCache进行需求实现

48.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

49.iframe有那些缺点？

iframe会阻塞主页面的Onload事件
搜索引擎的检索程序无法解读这种页面，不利于SEO
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题

50.WEB标准以及W3C标准是什么?

标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离

51.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档
严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

52.HTML全局属性(global attribute)有哪些

class:为元素设置类标识
data-*: 为元素增加自定义属性
draggable: 设置元素是否可拖拽
id: 元素id，文档内唯一
lang: 元素内容的的语言
style: 行内css样式
title: 元素相关的建议信息

53.Canvas和SVG有什么区别？

svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布
svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿

54.如何在页面上实现一个圆形的可点击区域？

svg
border-radius
纯js实现需要求一个点在不在圆上简单算法、获取鼠标坐标等等

55.网页验证码是干嘛的，是为了解决什么安全问题

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

56.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
- cookie数据大小不能超过4k
- sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有期时间：
- localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
- sessionStorage数据在当前浏览器窗口关闭后自动删除
- cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

57. CSS选择器有哪些？哪些属性可以继承？

CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=“external”]）、伪类选择器（a:hover, li:nth-child）

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

58.CSS优先级算法如何计算？

元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000

!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。

59.请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

60.用纯CSS创建一个三角形的原理是什么？

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

61.为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

62.absolute的containing block计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
否则,则由这个祖先元素的 padding box 构成。

如果都找不到，则为 initial containing block。

补充：

static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
absolute: 向上找最近的定位为absolute/relative的元素
fixed: 它的containing block一律为根元素(html/body)

63.CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

chrome中，使用collapse值和使用hidden没有区别。
firefox，opera和IE，使用collapse值和使用display：none没有什么区别。

64.display:none与visibility：hidden和opacity: 0的区别？

“display: none”、"visibility: hidden"和"opacity: 0"都是用于隐藏元素的CSS属性，它们有不同的行为和效果：

display: none：
- 该属性会完全从文档流中移除元素，并且不会占据任何空间。
- 隐藏的元素无法与其他元素交互，也不会触发任何事件。
- 具有display: none的元素不会被屏幕阅读器读取。
- 可以通过修改CSS属性或使用JavaScript来将元素重新显示出来。
- （回流+重绘）
visibility: hidden：
- 该属性将元素设为隐藏，但仍然占据相应的空间。
- 隐藏的元素无法与用户交互，也不会触发鼠标事件，但可以被键盘焦点选中并接收到键盘事件。
- 具有visibility: hidden的元素仍然会被屏幕阅读器读取。
- （重绘）
opacity: 0：
- 该属性使元素完全透明，但在布局上保持其原始空间。
- 透明的元素仍然可以与用户交互，并且会触发鼠标和键盘事件。
- 具有opacity: 0的元素会被屏幕阅读器读取。

总结：

使用"display: none"可以完全从文档流中移除元素并释放空间，对交互、事件和屏幕阅读器都没有影响。
使用"visibility: hidden"隐藏元素，但仍然占据空间，并且可以通过键盘访问。
使用"opacity: 0"使元素透明，但仍保留空间和交互能力。

65.position跟display、overflow、float这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；
position属性规定元素的定位类型；
float属性是一种布局方式，定义元素在哪个方向浮动。

类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

66.对BFC规范(块级格式化上下文：block formatting context)的理解？

BFC规定了内部的Block Box如何布局。
定位方案：

内部的Box会在垂直方向上一个接一个放置。
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box 的左边，与包含块border box的左边相接触。
BFC的区域不会与float box重叠。
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算BFC的高度时，浮动元素也会参与计算。

满足下列条件之一就可触发BFC

根元素，即html
float的值不为none（默认）
overflow的值不为visible（默认）
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

67.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题：

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

父级div定义height
最后一个浮动元素后加空div标签并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。使用 overflow 属性清除浮动：将父元素的 CSS 属性 overflow 设置为 auto 或 hidden，可以触发 BFC（块级格式化上下文）从而清除浮动。
父级div定义zoom

68.上下margin重合的问题

在重合元素外包裹一层容器，并触发该容器生成一个BFC。

<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>

 .aside {
            margin-bottom: 100px;  
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;
            height: 200px;
            background: #fcc;
        }
         .text{
            /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
            overflow: hidden;  //此时已经触发了BFC属性。
        }

69.移动端的布局用过媒体查询吗？

是的，媒体查询在移动端布局中非常常见和重要。媒体查询是一种CSS技术，用于根据设备的特性（如屏幕宽度、屏幕方向、分辨率等）来应用不同的样式规则。通过使用媒体查询，可以根据不同设备的屏幕大小和特征，为移动端提供更好的用户体验和适应性。

以下是一个示例，展示了在不同屏幕尺寸下应用不同的样式：

/* 适用于小于等于 600px 宽度的屏幕 */
@media (max-width: 600px) {
  /* 移动端样式规则 */
  body {
    font-size: 14px;
  }
}

/* 适用于大于 600px 宽度的屏幕 */
@media (min-width: 601px) {
  /* 非移动端样式规则 */
  body {
    font-size: 16px;
  }
}

在上述示例中，@media 是媒体查询的关键词，括号内的条件 (max-width: 600px) 表示屏幕宽度小于等于 600px 时应用该样式规则；(min-width: 601px) 则表示屏幕宽度大于 600px 时应用另一套样式规则。

媒体查询是响应式网页设计的重要组成部分，它可以根据不同设备的特性灵活地适应不同屏幕尺寸和设备类

70.CSS优化、提高性能的方法有哪些？

避免过度约束
避免后代选择符
避免链式选择符
使用紧凑的语法
避免不必要的命名空间
避免不必要的重复
最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
避免！important，可以选择其他选择器
尽可能的精简规则，你可以合并不同类里的重复规则

71.浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

72.在网页中的应该使用奇数还是偶数的字体？为什么呢？

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

73.margin和padding分别适合什么场景使用？

何时使用margin：

需要在border外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白，需要相互抵消时。

何时使用padding：

需要在border内侧添加空白
空白处需要背景颜色
上下相连的两个盒子的空白，希望为两者之和。

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决

74.元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

75.全屏滚动的原理是什么？用到了CSS的哪些属性？

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
属性：

overflow：hidden；
transition：all 1000ms ease；

76.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。

<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no'/>

77.视差滚动效果？

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

CSS3实现
优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器
jQuery实现
通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
优点：能兼容到各个版本的，效果可控性好
缺点：开发起来对制作者要求高
插件实现方式
例如：parallax-scrolling，兼容性十分好

78.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

79.让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

80.position:fixed;在android下无效怎么处理？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

81.如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

82.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：

可以将代码全部写在一排
浮动li中float：left
在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

83.display:inline-block 什么时候会显示间隙？

有空格时候会有间隙解决：移除空格
margin正值的时候解决：margin使用负值
使用font-size时候解决：font-size:0、letter-spacing、word-spacing

84.有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0

85.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。大多数地方都可以用。
jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

86.style标签写在body后与body前有什么区别？

页面加载自上而下当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

87.CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。

88.阐述一下CSS Sprites(css精灵图)

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

89. 一行或多行文本超出隐藏

一行省略实现,用css:

overflow:hidden; //超出文本隐藏
white-space:nowrap; //溢出不换行
text-overflow:ellipsis; //溢出省略号显示

两行或多行省略实现,用css3:

overflow:hidden; //超出文本隐藏
text-overflow:ellipsis; //溢出省略号显示
display:-webkit-box; //将对象作为弹性伸缩盒子
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式-从上到下垂直排列
-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，数组代表显示的行数,如2,3,4....

原理是超出第二行就增加三个点点点,后面的内容依然输出页面,只是超出隐藏了;

所以需要注意如果在有的情况下第二行显示…了但是后面依旧接有内容,就检查你的line-height是不是更改小了.

90.get和post区别

get请求参数的大小存在限制，而post请求的参数大小是无限制的。

注意
实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下面几点:

HTTP 协议未规定 GET 和POST的长度限制
GET的最大长度显示是因为浏览器和 web服务器限制了 URI的长度
不同的浏览器和WEB服务器，限制的最大长度不一样
要支持IE，则最大长度为2083byte，若只支持Chrome，则最大长度 8182byte

get请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。
post不同，post做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此get请求适合于请求缓存。

不要秃头啊啊

关注

1
点赞
踩
41

收藏

觉得还不错? 一键收藏
0
评论
史上最全高质量css+html面试题

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）contentpaddingbordermarginmargin(外边距)- 清除边框外的区域，外边距是透明的。border(边框)- 围绕在内边距和内容外的边框。padding(内边距)- 清除内容周围的区域，内边距是透明的。content(内容)- 盒子的内容，显示文本和图像。CSS hack。
复制链接

扫一扫