目录
1. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
2. 每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
3. Quirks 模式是什么？它和 Standards 模式有什么区别
4. div+css 的布局较 table 布局有什么优点？
5. img 的 alt 与 title 有何异同？ strong 与 em 的异同？
12. 知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？
13. 在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理？
14. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
17. 有哪项方式可以对一个 DOM 设置它的 CSS 样式？、
19. CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？
20. 超链接访问过后 hover 样式就不出现的问题是什么？如何解决？
1. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
IE: trident 内核
Firefox：gecko 内核
Safari:webkit 内核
Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核
Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发)
2. 每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知
浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页
面）
3. Quirks 模式是什么？它和 Standards 模式有什么区别
从 IE6 开始，引入了 Standards 模式，标准模式中，浏览器尝试给符合标准的文档在规范
上的正确处理达到在指定浏览器中的程度。
在 IE6 之前 CSS 还不够成熟，所以 IE5 等之前的浏览器对 CSS 的支持很差， IE6 将对
CSS 提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写
的，而如果 IE6 支持 CSS 则将令这些页面显示不正常，如何在即保证不破坏现有页面，又
提供新的渲染机制呢？
在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功
能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，
即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这
样就能不破坏原有的程序，又提供新功能。IE6 也是类似这样做的，它将 DTD 当成了这个
“参数”。
这就是 Quirks 模式（怪癖模式，诡异模式，怪异模式）。
区别：
总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型：在 W3C 标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高
度，而在 Quirks 模式下，IE 的宽度和高度还包含了 padding 和 border。
设置行内元素的高宽：在 Standards 模式下，给<span>等行内元素设置 wdith 和
height 都不会生效，而在 quirks 模式下，则会生效。
设置百分比的高度：在 standards 模式下，一个元素的高度是由其包含的内容来决定的，
如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用
margin:0 auto 设置水平居中：使用 margin:0 auto 在 standards 模式下可以使元素水平
居中，但在 quirks 模式下却会失效。
（还有很多，答出什么不重要，关键是看他答出的这些是不是自己经验遇到的，还是说都
是看文章看的，甚至完全不知道。）
4. div+css 的布局较 table 布局有什么优点？
改版的时候更方便 只要改 css 文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。
5. img 的 alt 与 title 有何异同？ strong 与 em 的异同？
a:alt(alt text):为不能显示图像、窗体或 applets 的用户代理（UA），alt 属性用来指定替
换文字。替换文字的语言由 lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt 当
成 tool tip 显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
strong:粗体强调标签，强调，表示内容的重要性
6. 你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强（progressive enhancement） [prəu'ɡresiv][ɪnˈhɑːnsmənt]
：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级( graceful degradation)[ˈɡreɪsfl ,deɡrəˈdeɪʃn]：一开始就构建完整的功能，然后再针对低版本浏览器进
行兼容。
渐进增强的观点关注内容本身
优雅降级的观点更关注主流浏览器，一些特定的浏览器，除修复较大的错误外，其他的差异将会被直接忽略
7. 为什么利用多个域名来存储网站资源会更有效？
CDN 缓存更方便
突破浏览器并发限制
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题
8. 请谈一下你对网页标准和标准制定机构重要性的理解。
网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发者遵循统一的标准，
降低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各种 BUG、安全
问题，最终提高网站易用性。
9. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会
话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种
持久化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除
非主动删除数据，否则数据是永远不会过期的。
web storage 和 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 图片
和 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%
12. 知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？
微格式（Microformats）是一种让机器可读的语义化 XHTML 词汇的集合，是结构化数据
的开放标准。是为特殊应用而制定的特殊格式。
优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。
（应用范例：豆瓣，有兴趣自行 google）
13. 在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理？
dns 缓存，cdn 缓存，浏览器缓存，服务器缓存。
优化这些图片的加载，给用户更好的体验。
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶
端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优
先下载。
如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略
图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压
缩，图片压缩后大小与展示一致。
14. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
去掉或样式丢失的时候能让页面呈现清晰的结构：
html 本身是没有表现的，我们看到例如<h1>是粗体，字体大小 2em，加粗；<strong>
是加粗的，不要认为这是 html 的表现，这些其实 html 默认的 css 样式在起作用，所以去
掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的 HTML 结构的优点，但是浏览
器都有有默认样式，默认样式的目的也是为了更好的表达 html 的语义，可以说浏览器的
默认样式和语义化的 HTML 结构是不可分割的。
屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.
例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对
它完整发音.
PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对
CSS 的支持较弱）
使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任
务是符合设备本身的条件来渲染网页.
语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括
现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.
而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以
确信读取设备将根据其自身的条件来合适地显示页面.
15. 你如何理解 HTML 结构的语义化？
A:在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:裸奔时也好看；
B:用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
C:有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
D:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备），更好的方式来渲染网页；
E:便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
16. 谈谈以前端角度出发做好 SEO 需要考虑什么？
(1).维护网站，提高内容质量，保持更新
(2).网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。
(3).控制首页链接数量,要适中
(4).导航优化：
a:尽量采用文字方式
b:搭配图片导航，但是图片代码一定要进行优化，img标签必须添加“alt”和“title”属性
c:应该加上面包屑导航
(5).控制页面的大小:减少http请求，提高网站的加载速度
(6).适量的关键词和网页描述
title标题，强调重点即可，
meta keywords标签：关键词，列重要关键字即可
meta description标签：网页描述，要高度概括
body中的标签：尽量让代码语义化
a标签：页内链接，要加 “title” 属性加以说明
img应使用 “alt” 属性加以说明
strong、em标签 : 需要强调时使用
巧妙利用CSS布局
谨慎使用 display：none
保留文字效果
17. 有哪项方式可以对一个 DOM 设置它的 CSS 样式？、
外部样式表，引入一个外部 css 文件
内部样式表，将 css 代码放在 <head> 标签内部
内联样式，将 css 样式直接定义在 HTML 元素内部
18. CSS 都有哪些选择器？
选择器类型
(1)、ID #id
(2)、class .class
(3)、标签 p
(4)、通用 *
(5)、属性 [type="text"]
(6)、伪类 a: hover
(7)、伪元素 li: nth - child
(8)、子选择器（ul < li） 、相邻选择器（h1 + p）、后代选择器（li a）
权重计算规则
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
!important 比 内联优先级高
(1). 第一等：代表内联样式，如: style=””，权值为1000。
(2). 第二等：代表ID选择器，如：#content，权值为0100。
(3). 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
(4). 第四等：代表标签和伪元素选择器，如div p，权值为0001。
(5). 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
(6). 继承的样式没有权值。
(7).相同权重
优先级就近原则，样式定义最近者为准,载入样式以最后载入的定位为准;
继承性
可继承： font-size font-family color;
不可继承 ：border padding margin width height ;
CSS3 新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
19. CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？
最基本的：
设置 display 属性为 none，或者设置 visibility 属性为 hidden设置宽高为 0，设置透明度为 0，设置 z-index 位置在-1000em
20. 超链接访问过后 hover 样式就不出现的问题是什么？如何解决？
被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性
的排列顺序: L-V-H-A（link,visited,hover,active）
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
