前端HTML+CSS面试题汇总一

你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
Quirks模式是什么？它和Standards模式有什么区别
Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
div+css的布局较table布局有什么优点？
img的alt与title有何异同？ strong与em的异同？
你能描述一下渐进增强和优雅降级之间的不同吗?
为什么利用多个域名来存储网站资源会更有效？
请谈一下你对网页标准和标准制定机构重要性的理解。
请描述一下cookies，sessionStorage和localStorage的区别？
简述一下src与href的区别。
知道的网页制作会用到的图片格式有哪些？
知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？
在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？
一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
你如何理解HTML结构的语义化？
谈谈以前端角度出发做好SEO需要考虑什么？
有哪项方式可以对一个DOM设置它的CSS样式？
CSS都有哪些选择器？
CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？
超链接访问过后hover样式就不出现的问题是什么？如何解决？
下一篇：前端HTML+CSS初级面试题汇总二

1. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

浏览器	内核
IE	trident内核
Firefox（火狐）	gecko内核
Safari	webkit内核
Opera	以前是presto内核，现已改用Google Chrome的Blink内核
Chrome	Blink内核（基于webkit, Google与Opera Software共同开发）

2.Quirks模式是什么？它和Standards模式有什么区别?

Quirks模式（怪癖模式，诡异模式，怪异模式）

Quirks模式和Standards模式的区别：
首先，严格模式（又称标准模式，Standards模式）和混杂模式（Quirk模式）都是指浏览器的呈现模式，要与Doctype的两种风格区别开来（严格（ strict ）和过渡（ transitional ），过渡 DOCTYPE 的目的是帮助开发人员从老版本迁移到新版本）。

严格模式下：页面排版及JS解析是以该浏览器支持的最高标准来执行
混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

而浏览器究竟是使用严格模式还是混杂模式呈现页面与网页中的 DTD （文件类型定义）直接相关。

注意： DTD（文档类型定义）
作用是定义 XML 文档的合法构建模块。它使用一系列的合法元素来定义文档结构。列如：<!DOCTYPE 根元素 [元素声明]>

两种模式的一些差别案列如下：

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

诸如此类的，还有很多。有根据经验遇到的，也有文章上看到的，大家自行摸索吧。。。

3. Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

<!DOCTYPE>声明位于文档中的最前面的位置，处于 <html>标签之前。告知浏览器的解析器，用什么文档类型规范( HTML或 XHTML)来解析这个文档。

对于 HTML 4.01 文档，
包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。
包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。
但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现。
DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。

对于HTML5文档，
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

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

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

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

alt属性: 在图片无法加载时，才会显示的值
title属性: 在图片正常加载时，鼠标划上去显示的值

注意： alt也有后者的功能，但是只是在低版本的ie浏览器才支持，高版本及标准浏览器不支持这个功能了。

strong: 粗体强调标签，强调，表示内容的重要性
em: 斜体强调标签，更强烈强调，表示内容的强调点

6.你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别： 优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

“优雅降级”观点
认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点
认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

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

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

8.请谈一下你对网页标准和标准制定机构重要性的理解。

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

9.请描述一下cookies，sessionStorage和localStorage的区别?

特性	Cookie	LocalStorage	sessionStorage
数据的生命周期	一般由服务器生成，可设置失效时间。如果在浏览器生成，默认是关闭浏览器之后失效	除非被清除，否则永久保存	仅在当前会话有效，关闭页面或浏览器后被清除
存放数据大小	4KB	一般5MB	一般5MB
与服务端通信	每次都会携带在`HTTP`头中，如果使用`cookie`保存过多数据会带来性能问题	仅在客户端中保存，不参与和服务器的通信。	同`LocalStorage`
用途	一般由服务器端生成，用于标识用户身份	用于浏览器缓存数据	同`LocalStorage`
共享	在同源且符合`path`规则的文档之间共享	在同源文档之间共享	不能共享
相同点	三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对	同上	同上

更多详情，请点击我的这篇博客查看：٩(๑❛ᴗ❛๑)۶
cookie localStorage sessionStorage (¦3」∠) 看完你居然就懂了！！！

10.简述一下src与href的区别

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

src(source)指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
<script src ="js.js"></script>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href(Hypertext Reference)指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
<link href="common.css" rel="stylesheet"/>
那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

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

png-8，png-24，jpeg，gif，svg
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）

科普一下Webp： WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

想了解各种格式之间的区别