首页 > 代码库 > HTML面试题
HTML面试题
1.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
所谓的“浏览器内核”无非指的是一个浏览器最核心的部分-“Rendering Engine”，直译叫做“渲染引擎”，我们也常称为“排版引擎”、“解释引擎”。这个引擎的作用是帮助浏览器来渲染网页内容，将页面内容和排版代码转换为用户所见的视图。
但我们常常把所说的“浏览器内核”，包含了javascript引擎，例如Webkit，它由渲染引擎WebCore和javascript引擎JSCore组成。
下面我们看看各个浏览器使用的内核：
（1）.IE：IE浏览器诞生于1994年，当时微软为了抗衡网景浏览器，和Spyglass合作，并根据源代码实现了自己的IE内核Trident。每一次新的IE发布，也标志着Trident内核版本号的提升。
（2）.Safari：Safari所用浏览器内核是大名鼎鼎的Webkit。Webkit前身是KDE小组的KHTML引擎，可以说Webkit是KHTML的一个开源分之。Webkit可以说是苹果公司给开源世界的一大贡献，基于此开源引擎，衍生了很多Webkit分之，若Chrome浏览器引擎。
（3）.Chrome：从08年开始，google建立了chromium引擎，它是webkit的一个分之。但却把webkit代码梳理得可读性非常高，以前可能需要一天进行编译的代码，现在只需要两三个小时就能搞定。但从2013年开始，chrome放弃chromium引擎而使用最新的Blink引擎（基于Webkit2-苹果公司在2010年退出的新Webkit引擎）。
（4）.Opera：Opera浏览器是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览器。是夸平台浏览器可以在Windows、Mac、linux三个操作系统平台上运行。为了减少研发成本，Opera在2013年2月宣布放弃Presto引擎，转而跟随Chrome使用Webkit分之的Chromium引擎作为自家浏览器核心引擎。在Chrome与2013年推出Blink引擎后，Opera也紧跟其脚步表示将转而使用Blink作为浏览器核心引擎。
（5）.Firefox：Mozilla Firefox是一个开源网页浏览器。Firefox使用的是Gecko内核。Gecko是网景公司开发的引擎，但后来网景公司解散。Mozilla基金会继续推动着Gecko的发展。时至今日，Gecko任继续由Mozilla的雇员和义工所维护和发展。
2.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
<!DOCTYPE>声明处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。在制作网页时都需要定义文档类型。即doctype。如果不声明网页的文档类型，浏览器在解析时会以怪异模式解析网页代码，不同浏览器下，怪异模式解析的网页效果差别很大，会造成布局排版的错位，因此，在写html代码前有必要写明文档类型。
常用的DOCKTYPE声明包括：
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3.Quirks模式是什么？它和Standards模式有什么区别
从IE6开始，引入了Standards标准模式，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程序。
在IE6之前CSS还不够成熟，所有IE5等之前浏览器对CSS支持很差，IE6将对CSS提供更好的支持，然而很多页面时基于旧的布局方式写的，而如果IE6支持CSS则将令这些页面显示不正常，如果在即保证不破坏现有页面，也提供新的渲染机制?
遇到这种问题的一个常见做法就是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果不为真时就使用旧功能。IE6也是类型这样做的，它将DTD当成这个“参数”，因为以前的页面大家都不会写DTD，所以IE6就假定如果写了DTD就采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪异模式）。
区别：
总体会有布局、样式解析和脚本执行三个方面区别。
盒模型：在W3C标准中，如果设置一个元素宽度和高度，指的是元素内容的宽度和高度，而在Quirks模式下，IE的宽度和高度还包括碰padding和border。
设置行内元素高度：在standards模式下，给span元素设置width和height都不会生效，而在quirks模式下，则会生效。
4.div+css的布局较table布局有什么优点？
改版更方便，只需要改CSS文件。页面加载速度更快、结构化清晰、页面显示简洁。表现与结构相分离。易于优化（SEO）搜索引擎更友好，排名更容易靠前。
5.a：img的alt与title有何异同？b：strong与em的异同？
a:
含义不同，alt是当前图片不存在时的替代文字。而tittle是对图片的描述与进一步说明；
在浏览器中表现不同，在firefox和ie8中，当鼠标经过图片时title值会显示，而alt值不会显示；只有在ie6中，当鼠标经过图片时title和alt值都会显示；
对于网站seo优化来说，title与alt还有最重要一点：搜索引擎对图片意思的判断，主要靠alt属性。所有在图片alt属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。
b:
strong粗体强调标签，强调，表示内容的重要性；
em斜体强调标签，更强烈强调，表示内容的强调点；
6.你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级（graceful degradation）:一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往后看；而渐进增强则意味着超前看，同时保证其根基处于安全地带。
优雅降级观点
认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作拿牌在开发周期的最后阶段，并把测试对象限定在主流浏览器（如IE、Mozilla等）的前一个版本。在这种规范下，旧版浏览器被认为仅能提供“简陋却无妨（poor,but passable）”的浏览体验。你可以做一些小的调整来适应某个特定浏览器。但由于他们并非我们关注重点，所以除了修复较大的错误之外，其他的差异将被直接忽略。
渐进增强观点
认为应关注内容本身。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都设计到内容。这使得渐进增强称为一种更合理的设计范例。这也是它立即被Yahoo!所采纳并用以构建其“分级式浏览器支持”策略的原因所在。
7.为什么利用多个域名来存储网站资源会更有效？
CDN缓存更方便。静态内容和动态内容分服务器存放，使用不同的服务器处理请求。处理动态内容的不处理静态内容。提高效率。
突破浏览器并发限制。节约主域名的链接数，从而提升客户端网络带宽的利用率，优化页面响应。因为老的浏览器（IE6是典型），针对同一个域名值允许同时保持两个HTTP链接。将图片等资源请求分配到其他域名商，避免大图片之类的并不一定重要的内容阻塞主域名上的其他资源链接。
节约cookie带宽。例如twitter的主战twitter.com每次访问，都会带上自己的cookie，挺大的。加入图片也放在主域名下，那么每次访问图片时，请求头也会携带cookie，而图片是不需要知道用户的cookie的，所有者部分带宽白白浪费了。
节约主域名的链接数，优化页面响应速度。
防止不必要的安全问题。对于UGC（user generated content）的内容和主站隔离，防止安全问题（上传js窃取主站cookie之类的）。正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。
9.请描述一下cookies，sessionStorage和localStorage的区别？
sessionStorage用于本地存储一个回话（session）中的数据，这个数据只有在同一个回话中的页面才能访问并且当回话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是回话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是用于不会过期的。
web storage和cookie区别
web storage的概念和cookie相似，区别是它是为了更大容器存储设计的。Cookie大小是受限的，并且每次你请求一个新页面的时候Cookie都会被发送过去，这无形浪费了带宽，另外cookie还需要还指定作用域，不可以跨域调用。
Cookie的作用是用于与服务器进行交互，作为http规划的一部分而存在，而web storage仅仅是为了在本地存储数据而生。
10.简述一下src与href的区别
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是souce的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
<script src="http://www.mamicode.com/base.js"></script>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，图片和框架元素也如此，类似于将所有指向资源嵌入到当前标签内。这也是为什么奖js脚本放到底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
<link href="http://www.mamicode.com/common.css" rel="stylesheet"/>
那么浏览器会识别该css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css。而不使用@import方式。
11.在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？
dns缓存：如果你在短时间内多次访问了某个网址，DNS都要多次解析并返回给你的话，DNS就重复工作了。于是操作系统聪明地设计了一个本地“DNS缓存”，当你第一次访问a.com，DNS返回了正确的IP之后，系统就会将这个结果临时存储起来，这就是DNS缓存。并且它会为缓存设定一个失效时间，在失效时间内再次访问某个网站时，系统就会直接从你电脑本地的DNS缓存把结果交换给你，而不必再询问DNS服务器。
cdn缓存：CDN是Content Delivery Network简称，即“内容分发网络”的意思。一般我们所说的CDN加速，一般是指网站加速或者用户下载资源加速。
CDN可以理解为分布在每个县城的火车票代售点，用户在浏览网站的时候，CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求，这样海南移动用户请求就不会千里迢迢跑到北京电信机房的服务器上了。
CDN有事很明显，CDN节点解决了跨运营商和跨地域访问的问题，访问延时大大降低；另外一方面，大部分请求在CDN边缘节点王城，CDN起到了分流作用，减轻了源站的负载。
浏览器缓存：浏览器在用户资源磁盘上，对最新请求过的文档进行了存储。但是当网站发生了更新的时候（如替换css、js以及图片文件），浏览器本地保存着旧版本的而文件，从而导致无法预料后果。
服务器缓存：将需要频繁访问的web页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度。
12.个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。什么是图片懒加载？
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能会有很大的提升，也提高了用户体验。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为css图片，可以使用CSSsprinte，SVGsprite,Iconfont、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则应在服务端根据业务需要先进行图片压缩，图片压缩后大小与展示一致。
13.你如何理解HTML结构的语义化？
去掉或丢失样式的时候，能让页面呈现清晰的结构：html本身是没有表现的，我们看到例如<h1>是粗体、<strong>是加粗的。不要认为这是htl的表现，这些其实html默认的css样式起的作用。浏览器都有默认样式，默认样式的目的也是为了更好的表达html的语义。
搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”，但现在它们实际上是极其宝贵的用户。没有它们的话，搜索引擎将无法索引你的网站，然后一般用户很难过来访问。
你的页面对爬虫容易理解非常重要，因为爬虫很大程度上会忽略用于表现的标记，而只注重语义标记。SEO主要还是靠你网站的内容和外部链接的。
14.谈谈以前端角度出发做好SEO需要考虑什么？
了解搜索引擎如何抓取网页和如何索引网页。你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot或叫web crawler）如何工作，搜索引擎如何对搜索结果进行排序等等。
Meta标签优化。主要包括主题（Title）、网站描述（Description）、关键词（Keywords）。还有一些其他隐藏文字，比如Author（作者）、Category（目录）、Language(编码语种)等。
如何选择关键词并在网页中放置关键词。搜索就得用关键词，关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般5个左右），然后针对这些关键词进行优化，包括关键词密度（Density）、相关度（Relavancy），突出性（Prominency）等等。
了解主要的搜索引擎。虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google、Yahoo、Bing等；中文的有百度、搜狗、有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索引擎门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google搜索技术，MSN用的是Bing的技术。
搜索引擎登录。网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交到搜索引擎。
链接交换和链接广泛度（Link Popularity）。网页内容都是以超文本（Hypertext）的方式来相互链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其他网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站外部连接数越多，会被搜索引擎认为它的重要性越大，从而给你更高排名。
html和css面试：http://www.jb51.net/css/238279.html
javascript面试：http://www.jb51.net/article/56847.htm
HTML面试题