前端HTML+CSS面试题汇总一

目录

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

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

• 盒模型： 在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，设置的宽度和高度还包含了padding和border。

• 设置行内元素的高宽： 在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

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

• 用margin:0 auto设置水平居中： 使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

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

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

• 声明位于文档中的最前面的位置，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范( 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等元素。

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

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

那么浏览器会识别该文档为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%

想了解各种格式之间的区别 请点击查看我的另一篇博客：静态资源优化：图片优化

12.知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。
优点： 将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行google）

13.在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

dns缓存，cdn缓存，浏览器缓存，服务器缓存。

14.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

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

想了解更多图片优化方式 请点击查看我的另一篇博客：静态资源优化：图片优化

15.你如何理解HTML结构的语义化？　

什么是html语义化?
选择合适的html标签，便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为什么要语义化?

• 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
• 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
• 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
• 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

16.谈谈以前端角度出发做好SEO需要考虑什么？

了解搜索引擎如何抓取网页和如何索引网页
你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。

Meta标签优化
主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。

如何选取关键词并在网页中放置关键词
搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

了解主要的搜索引擎
虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。

主要的互联网目录
Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。

按点击付费的搜索引擎
搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。

搜索引擎登录
网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。

链接交换和链接广泛度（Link Popularity）
网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。

合理的标签使用

17.有哪项方式可以对一个DOM设置它的CSS样式？

• 外部样式表，引入一个外部css文件
  

• 内部样式表，将css代码放在 标签内部

  <head>
  	//...
     <style>
         #div1 {
             background-color: red;
         }
     </style>
  </head>
  

• 内联样式，将css样式直接定义在 HTML 元素内部
  

• 使用js动态设置

  • 直接设置style的属性 某些情况用这个设置 !important值无效
    element.style.height = '100px'
    如果属性有’-'号，就写成驼峰的形式（如textAlign）
    element.style.textAlign = 'center'
    如果想保留 - 号，就中括号的形式
    element.style['text-align'] = 'center'
  • 直接设置属性（只能用于某些属性，相关样式会自动识别）
    element.setAttribute("title", "提示")
  • 设置style的属性
    element.setAttribute('style', 'height: 100px !important');
  • 使用setProperty 如果要设置!important，推荐用这种方法设置第三个参数
    element.style.setProperty('height', '100px', 'important');
  • 修改class
  • 设置cssText
  • 创建引入新的css样式
  • 使用addRule、insertRule

想了解更多DOM操作: 请点击查看我的另一篇博客：DOM操作 ᕙ༼ ͝°益° ༽ᕗ 就是这么吊！

18.CSS都有哪些选择器？

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点。

1. 通配符选择器（所有浏览器支持）
   通用选择器用*来表示，用来选择所有元素，，也可以选择某个元素下的所有元素；

   *{
   	marigin: 0;
   	padding: 0;
   	font-size: 14px;
   }
   .demo * {
   	width: 50px;
   	height: 50px;
   }
   

2. 类选择器 （用一个样式类名申明；所有浏览器都支持类选择器）

   .demo{
   	width: 50px;
   	height: 50px;
   }
   

3. 元素选择器（所有浏览器支持）

   p{
   	color:red;
   }
   

4. ID选择器（用DOM的ID申明；所有浏览器都支持）

   #demo{
   	color:red;
   }
   

5. 群组选择器（利用逗号间隔，比如p,div,#a{ }; 所有浏览器都支持）

   p,li{
   	color: blue;
   }
   .demo1,.demo2{
   	color: #fff;
   }
   

6. 派生选择器（通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。）

   <li>
   	<strong>A</strong>
   	<em>
   		B 
   		<strong>C</strong>
   	</em> 
   </li>
   

   /* 后代选择器 */
   li strong {color:blue;}
   /* 子元素选择器 */
   h1 > strong {color:red;}
   /* 相邻兄弟选择器 */
   strong + em {color:yellow}
   

   派生选择器又包含：后代选择器，子元素选择器，相邻兄弟选择器

7. 属性选择器（属性选择器可以根据元素的属性及属性值来选择元素。）

   //如果您希望把包含标题（title）的所有元素变为红色，可以写作：
   *[title] {color:red;}
   

8. 伪类选择器(a: hover, li:nth-child)

注意：
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

19.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

最基本的：
设置display属性为none，或者设置visibility属性为hidden

技巧性：
设置宽高为0，设置透明度为0，设置z-index位置在-1000em

20.超链接访问过后hover样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不再具有hover和active了
解决方法是改变CSS属性的排列顺序
关于a标签的四种状态排序问题，有个简单好记的原则，叫做love hate原则 L-V-H-A（link,visited,hover,active）
代码示例：

<style>
	a:link{ background:red;}
	a:visited{background:green;}
	a:hover{background:blue;}
	a:action{background:white;}
</style>

好好学习 才能吃香的喝辣的！_(¦3」∠)_
下一篇：前端HTML+CSS初级面试题汇总二