100道名企前端面试来咯~~HTML和CSSIE

100个知名企业前端面试都在这里了~

1. HTML 和 CSS

1. 您创建的页面在哪些浏览器中进行了测试？ 这些浏览器的核心是什么？

IE：三叉戟内核

Firefox：gecko 内核

Safari：webkit 内核

Opera：以前是presto内核，但Opera现在已经切换到Google Chrome的Blink内核。

Chrome：Blink（基于webkit，由Google和Opera Software联合开发）

2、每个HTML文件的开头都有一个非常重要的东西，Doctype。 你知道这是做什么用的吗？

声明首先放置在文档中，位于标签之前。 该标签告诉浏览器该文档使用哪种 HTML 或 XHTML 规范。 （重点：告诉浏览器按照哪个规范来解析页面）

3.什么是Quirks模式？它与Standards模式有什么区别？

从IE6开始，引入了标准模式。 在标准模式下，浏览器尝试在指定的浏览器中尽可能正确地处理符合标准的文档。

在IE6之前，CSS还不够成熟，所以以前的浏览器如IE5对CSS的支持很差。 IE6将为CSS提供更好的支持。 然而，这个时候问题就出现了，因为很多页面都是基于旧的布局。 方法，如果IE6支持CSS，这些页面将无法正常显示。 如何保证现有页面不被破坏并提供新的页面？

渲染机制又如何呢？

在编写程序时，我们经常会遇到这样的问题，如何保证原有界面不变并提供更强大的功能，尤其是当新功能与旧功能不兼容时。 遇到这类问题的常见做法是添加参数和分支，即当某个参数为真时，我们使用新函数，如果参数不为真，我们使用旧函数，这样就可以了不破坏原有程序提供新功能。 IE6 也做了类似的事情。 它将 DTD 视为此“参数”。 因为没有人会在以前的页面上写DTD，所以IE6假设如果写了DTD，就意味着这个页面将使用对CSS更好的支持。 布局，如果没有，则兼容之前的布局。 这就是Quirks模式（怪癖模式，怪异模式，怪异模式）。

总体来说，在布局、样式解析和脚本执行三个方面会有差异。

盒模型：在W3C标准中，如果设置元素的宽度和高度，则指的是元素内容的宽度和高度。 Quirks模式下，IE的宽度和高度还包括padding和border。

设置内联元素的高度和宽度：在Standards模式下，设置其他内联元素的宽度和高度不会生效，但在quirks模式下会生效。

设置百分比高度：在标准模式下，元素的高度由其包含的内容决定。 如果父元素没有设置百分比高度，子元素设置百分比高度是无效的。

margin:0 auto 设置水平居中：在标准模式下使用 margin:0 auto 可以使元素水平居中，但在怪异模式下会失败。 （还有很多，他回答什么并不重要，关键是看他回答的答案是来自自己的经历，还是从文章中读到的，甚至根本不知道。）

4、div+css布局相对于table布局有什么优势？

修改的时候直接修改css文件比较方便。

页面加载速度更快，结构清晰，页面显示简洁。

性能与结构分离。

易于优化（seo），搜索引擎更友好，更容易排名靠前。

5、img的alt和title有什么异同？ Strong和em有什么相同点和不同点？

a:alt（替代文本）：对于无法显示图像、表单或小程序的用户代理 (UA)，alt 属性用于指定替代文本。 替换文本的语言由 lang 属性指定。 （在IE浏览器中，当没有标题时，alt会改变。

显示为工具提示）

title（工具提示）：此属性为设置此属性的元素提供建议信息。

Strong：加粗强调标签，强调，表明内容的重要性

em：斜体强调标签，强调程度更强烈，表示内容的强调点

6. 您能描述一下渐进增强和优雅降级之间的区别吗？

渐进式增强：针对低版本浏览器构建页面，保证最基本的功能，然后针对高级浏览器完善效果、交互、添加功能，实现更好的用户体验。 优雅降级：从头构建完整的功能，然后针对低版本浏览器

兼容。

区别在于：优雅降级从复杂的现状开始，试图减少用户体验的供给，而渐进增强从一个非常基本的、功能性的版本开始，不断扩展它以适应未来环境的需求。 退化（功能衰退）意味着向后看； 渐进增强意味着向前看，同时将其根源保持在安全区域。

文件:///C:\\Users\\ADMINI~1\\AppData\\Local\\Temp\\ksohtml\\wps979F.tmp.pngfile:///C:\\Users\\ADMINI~1\\AppData\\Local\\Temp\\ksohtml\\wps97B0。 tmp.pngfile:///C:\\Users\\ADMINI~1\\AppData\\Local\\Temp\\ksohtml\\wps97B1.tmp.png

“优雅降级”的视角

“优雅降级”观点认为，网站应该针对最先进、最完整的浏览器进行设计。 对被认为“过时”或功能缺失的浏览器的测试安排在开发周期的最后阶段，测试对象仅限于主流浏览器的以前版本（如IE、Mozilla等）。

在这种设计范式下，旧版浏览器被认为只能提供“较差但还过得去”的浏览体验。 您可以进行一些小的调整以适应特定的浏览器。 但由于它们不是我们关注的焦点，因此除了修复较大的错误之外，其他差异将被忽略。

“渐进增强”观点

“渐进增强”观点认为应关注内容本身。

内容是我们建立网站的动力。 有的网站展示它，有的网站收集它，有的网站寻找它，有的网站运营它，有的网站甚至包括所有这些，但相同的是，它们都涉及内容。 这使得“渐进增强”成为更加合理的设计范式。 这就是为什么它立即被雅虎采用的原因！ 并用于构建其“分级浏览器支持（Graded Browser Support）”策略。

那么问题来了。 现在产品经理看到IE6、7、8的网页效果比高版本现代浏览器的圆润度要差很多。

阴影（CSS3），要求兼容性（使用图像背景，放弃CSS3），你将如何说服他？

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

CDN缓存更方便

突破浏览器并发限制

节省 cookie 带宽

节省主域名连接数，优化页面响应速度

防止不必要的安全问题

8. 请谈谈您对网络标准和标准制定组织的重要性的理解。

Web标准和标准制定组织都是为了让Web的发展更加“健康”。 开发者遵循统一的标准，降低开发难度和开发成本，SEO会更好，也不会因为滥用代码而导致各种Bug。 、安全问题，最终提高网站的可用性。

9. 请描述cookie、sessionStorage和localStorage之间的区别？

sessionStorage 用于在会话中本地存储数据。 这些数据只能被同一个会话中的页面访问，并在会话结束时被销毁。因此sessionStorage不是持久化的

file:///C:\\Users\\ADMINI~1\\AppData\\Local\\Temp\\ksohtml\\wps97C4.tmp.png的本地存储只是会话级存储。而localStorage用于持久性本地存储，除非主

自动删除数据，否则数据永远不会过期。

网络存储和 cookie 之间的区别

Web Storage的概念与cookie类似，只不过它是为更大容量的存储而设计的。 cookie的大小是有限的，每次请求新页面时都会发送cookie，这很浪费时间。

另外，cookie需要指定范围，不能跨域调用。

另外，Web Storage还有setItem、getItem、removeItem、clear等方法。 与cookie不同的是，前端开发者需要自己封装setCookie和getCookie。 但 Cookie 也是不可或缺的：Cookie 用于与服务器交互，并作为 HTTP 规范的一部分而存在，而 Web Storage 只是为了在本地“存储”数据而创建的。

10、简述src和href的区别。

src 用于替换当前元素，href 用于在当前文档和引用的资源之间建立链接。

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

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

href是Hypertext Reference的缩写，它指向网络资源的位置，建立到当前元素（锚点）或当前文档（链接）的链接。 如果我们添加

然后浏览器会将文档识别为css文件，并行下载资源并且不停止处理当前文档。

这就是为什么建议使用link方法来加载css而不是使用@import方法。

未完待续，每日更新~