HTML
9.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
浏览器内核主要指的是浏览器的渲染引擎，
渲染引擎决定了浏览器如何加载和显示网页的内容以及信息。我们主要用于测试的浏览器都有：IE、Chrome、Firefox、Safari、Opera、360浏览器。
IE：trident内核（IE内核）
Firefox：geoko内核，Mozilla自己开发的一套开放源代码、以C++编写的渲染引擎。
Safari：webkit内核，开源的浏览器引擎，源自于Linux平台上的一个引擎，经过Apple公司的修改可以支持Mac与Windows平台。
Chrome：Blink内核，Google和Opera Software共同研发。
Opera：以前是presto内核，现在改为Blink内核。
360浏览器： 兼容模式（trident内核）、极速模式（Blink内核）。
- 使用Trident内核的浏览器：IE、Maxthon、TT；
- 使用Gecko内核的浏览器：Netcape6及以上版本、FireFox；
- 使用Presto内核的浏览器：Opera7及以上版本；
- 使用Webkit内核的浏览器：Safari、Chrome。
10.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
声明处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。在制作网页时都需要定义文档类型。即doctype。如果不声明网页的文档类型，浏览器在解析时会以怪异模式解析网页代码，不同浏览器下，怪异模式解析的网页效果差别很大，会造成布局排版的错位，因此，在写html代码前有必要写明文档类型。 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。常用的DOCKTYPE声明包括：
HTML 5
HTML 4.01 Strict
11.quirks模式是什么？和standards模式有何区别？
标准模式（Standards Mode）和怪异模式 （Quirks Mode）
在Netscape Navigator和Microsoft Internet Explorer为数不多的浏览器盛行时，他们对网页有不同的实现方式，那个时候的网页都是针对这两个浏览器写的。随着各种浏览器的兴起，加上Web标准的制定，现在的浏览器不能继续使用以前的页面了，所以浏览器引入了标准模式和怪异模式来解决这一问题。
标准模式就是浏览器按照Web标准来渲染页面；为了解决浏览器还是能使用以前写的页面，所以怪异模式就产生了。怪异模式在不同的浏览器显示都是不一样的，因为他们都是按照自己的方式来渲染页面。
我们知道了标准模式和怪异模式，可是浏览器是怎么选择模式来渲染页面的呢？
我们经常在页面的开头看到<!DOCTYPE>声明，这是告诉浏览器选择哪个版本的HTML，对于渲染模式的选择，浏览器是根据DTD的声明。如果网页中有DTD标准文档的声明，那浏览器会按照标准模式来渲染网页；如果网页没有DTD声明或者HTML4以下的DTD声明，那浏览器就按照自己的方式渲染页面，页面进入怪异模式。
从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模式下，则会生效。
12.div+css的布局较table布局有什么优点？
改版更方便，只需要改CSS文件。页面加载速度更快、结构化清晰、页面显示简洁。表现与结构相分离。易于优化（SEO）搜索引擎更友好，排名更容易靠前。
一、div+css布局的好处：
1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。
2.布局精准，网站版面布局修改简单。
3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。
4.节约站点所占的空间和站点的流量。
5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。
二、table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）
1.容易上手。
2.可以形成复杂的变化，简单快速。
3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。
13.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斜体强调标签，更强烈强调，表示内容的强调点；
14.seo优化
定义：SEO（Search Engine Optimization）:汉译为搜索引擎优化。是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益；
主要工作：通过了解各类搜索引擎 抓取互联网页面、进行索引以及确定其对特定关键词搜索结果排名等技术，来对网页进行相关的优化，使其提高搜索引擎排名，从而提高网站访问量，最终提升网站的销售或宣传的效果。
15.渐进增强和优雅降级的区别？
渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级（graceful degradation）:一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往后看；而渐进增强则意味着超前看，同时保证其根基处于安全地带。
优雅降级观点
认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作拿牌在开发周期的最后阶段，并把测试对象限定在主流浏览器（如IE、Mozilla等）的前一个版本。在这种规范下，旧版浏览器被认为仅能提供“简陋却无妨（poor,but
passable）”的浏览体验。你可以做一些小的调整来适应某个特定浏览器。但由于他们并非我们关注重点，所以除了修复较大的错误之外，其他的差异将被直接忽略。
渐进增强观点
认为应关注内容本身。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都设计到内容。这使得渐进增强称为一种更合理的设计范例。这也是它立即被Yahoo!所采纳并用以构建其“分级式浏览器支持”策略的原因所在。
二者区别
1.）如果你采用渐进增强的开发流程，先做一个基本功能版，然后针对各个浏览器进行渐进增加，增加各种功能。相对于优雅降级来说，开发周期长，初期投入资金大。
你想一下不可能拿个基本功能版给客户看呀，多寒酸，搞不好一气之下就不找你做了，然后就炸了。但是呢，也有好处，就是提供了较好的平台稳定性，维护起来资金小，
长期来说降低开发成本。
2.）那采用优雅降级呢，这样可以在较短时间内开发出一个只用于一个浏览器的完整功能版，然后就可以拿给PM找客户谈呀，可以拿去测试，市场试水呀，对于功能尚未确定的
产品，优雅降级不失为一种节约成本的方法。
16.Src与href区别？
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是souce的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，图片和框架元素也如此，类似于将所有指向资源嵌入到当前标签内。这也是为什么将js脚本放到底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
<link href="common.css" rel="stylesheet"/>
那么浏览器会识别该css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css。而不使用@import方式。
17.网页制作用到的图片格式有？区别？
png-8，png-24，jpeg，gif，svg。 还有一个 WebP格式，谷歌（google）新推出的影像技术，它可让网页图档有效进行压缩，同时又不影响图片格式兼容与实际清晰度，进而让整体网页下载速度加快 。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。 在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%
三种格式的图片的区别如下：
JPEG图片不象GIF图片那样只能有256种颜色，它可以包含数百万种颜色，而且有极高的压缩率。这使得JPEG图片比较适合用来保存相片。JPEG是一种有损压缩的格式,JPEG不支持透明度。
GIF是一种调色板型，含有多达256种的颜色。每一个象素点都有一个对应的颜色值。是一种无损压缩的格式。
PNG是一种无损压缩的格式，而且它有很多种类。1.PNG8 2.真彩色PNG
在网站建设中到底应该用JPEG格式还是GIF格式？
方便记忆的简易准则：
1．如果图片是扫描的图画或照片时就用JPEG格式。
2．在你的电脑上制作的水平形式的条例、按钮以及动画图片，这些图片应该用GIF格式。
最后，我们总结一下：
1.JPEG格式比较适合用来存储照片
2.GIF格式可以用来做动画
3.PNG可以用来做小图标（icons），按钮，背景等。
18.大型网站优化图片加载有什么方法？
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
什么是图片懒加载？
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能会有很大的提升，也提高了用户体验。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为css图片，可以使用CSSsprinte，SVGsprite,Iconfont、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则应在服务端根据业务需要先进行图片压缩，图片压缩后大小与展示一致。
19.如何理解HTML结构的语义化？
去掉或丢失样式的时候，能让页面呈现清晰的结构：html本身是没有表现的，我们看到例如<h1>是粗体、<strong>是加粗的。不要认为这是htl的表现，这些其实html默认的css样式起的作用。浏览器都有默认样式，默认样式的目的也是为了更好的表达html的语义。
搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”，但现在它们实际上是极其宝贵的用户。没有它们的话，搜索引擎将无法索引你的网站，然后一般用户很难过来访问。
你的页面对爬虫容易理解非常重要，因为爬虫很大程度上会忽略用于表现的标记，而只注重语义标记。SEO主要还是靠你网站的内容和外部链接的。
20.为什么用多个域名存储网站资源更有效？
CDN缓存更方便。静态内容和动态内容分服务器存放，使用不同的服务器处理请求。处理动态内容的不处理静态内容。提高效率。
突破浏览器并发限制。节约主域名的链接数，从而提升客户端网络带宽的利用率，优化页面响应。因为老的浏览器（IE6是典型），针对同一个域名值允许同时保持两个HTTP链接。将图片等资源请求分配到其他域名商，避免大图片之类的并不一定重要的内容阻塞主域名上的其他资源链接。
节约cookie带宽。例如twitter的主战twitter.com每次访问，都会带上自己的cookie，挺大的。加入图片也放在主域名下，那么每次访问图片时，请求头也会携带cookie，而图片是不需要知道用户的cookie的，所有者部分带宽白白浪费了。
节约主域名的链接数，优化页面响应速度。
防止不必要的安全问题。对于UGC（user generated content）的内容和主站隔离，防止安全问题（上传js窃取主站cookie之类的）。正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。
（前端缓存分为浏览器缓存和cdn缓存，
cdn可以理解为一个普通缓存，如代理缓存或者说边缘缓存，即便不关心用户的具体地理位置，也应该考虑使用cdn的代理缓存来提高用户体验。
简单而言，代理缓存会缓存你网站的一些页面，通过缓存来传输静态内容非常的快
详细https://blog.csdn.net/guoyunyuhou/article/details/76664960）
21.请描述一下cookies，sessionStorage和localStorage的区别？
sessionStorage用于本地存储一个回话（session）中的数据，这个数据只有在同一个回话中的页面才能访问并且当回话结束后数据也随之销毁。
因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是用于不会过期的。
web storage和cookie区别
web storage的概念和cookie相似，区别是它是为了更大容器存储设计的。Cookie大小是受限的，并且每次你请求一个新页面的时候Cookie都会被发送过去，这无形浪费了带宽，另外cookie还需要还指定作用域，不可以跨域调用。
Cookie的作用是用于与服务器进行交互，作为http规划的一部分而存在，
而web storage仅仅是为了在本地存储数据而生。
22. 在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页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度。
23.谈谈以前端角度出发做好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（“冲浪”）。其他网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站外部连接数越多，会被搜索引擎认为它的重要性越大，从而给你更高排名。