前端面试宝典（更新）

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

img标签其中的两个属性alt和title有相似的地方，但是在不同的情况下要使用不同的属性的。
alt属性和title属性相同点：
它们都会出现浮层，显示自己设置的图片相关的内容。
alt属性和title属性不同点：
alt属性:1.当图片加载不出来的时候，就会在图片未显示的地方出现一段alt设置的属性内容。这个属性的作用是为了给未加载的图片显示提示信息，即使在网络比较差的时候，用户也可以知道图片的内容，方便用户浏览网页。同时在程序员对网站维护的时候也能更快的查找到问题。2.浏览器的搜索引擎可以通过alt属性的文字描述来获取图片。
title属性：title属性可以用在任何的元素上，当用户把鼠标移动到元素上时，就会显示预先设置的title的内容，起到对图片说明的作用，实质上就是对图片的解释和备注。

img标签中引用的图片不论是否能够正常的显示，图片只设置了title属性后，当鼠标经过或者悬停在图片区域时，就能看到图片的文字的描述。当图片仅仅设置alt属性的时候啊，当鼠标悬停或者经过图片区域的时候，可以看到该图片设置的alt的属性的文字内容。如果图片设置了title属性和alt属性，鼠标悬停或者经过图片区域的时候，只会显示title属性设置的内容。

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

改版的时候更方便 只要改 css 文件。

页面加载速度更快、结构化清晰、页面显示简洁。

表现（css）与结构（div）相分离。 HTML结构CSS表现 JavaScript行为

易于优化（seo）搜索引擎更友好，排名更容易靠前

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

CDN 缓存更方便 (内容分发网络)

突破浏览器并发限制

节约 cookie 带宽 (cookie客户端会话技术，将数据保存到客户端)

节约主域名的连接数，从而提高客户端网络带宽的bai利用率,优化页面响应速度

防止不必要的安全问题

微格式

建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式（microformats.org官方定义）。

是把语义嵌入到HTML以便有助于分离式开发而制定的一些简单约定，是兼顾人机可读性设计的数据表达方式，对Web网页进行语义注解的方法。

这种方法依托于标准的Web页面写作技术，例如，XHTML，这样引入语义信息对浏览器等所有现存的Web技术冲击最小。采用Microformat的 Web页面，在XHTML文档中给一些标签（Tag）增加一些属性（attribute），这些属性对信息的语义结构进行注解，处理XHTML文档的软件，

<a href=”http://www.bbon.cn”>Web Design Blog</a>

<a href=”http://www.bbon.cn“ rel=”homepage”>Web Design Blog</a>
         //rel 属性用于指定当前文档与被链接文档的关系。

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

代码可读性：方便开发

去掉或css样式丢失的时候能让页面呈现清晰的结构：

img加title 和 alt 提示属性就属于语义化

MVC

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

MVC开始是存在于桌面程序中的，M是指业务模型，V是指用户界面，C则是控制器，使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。比如一批统计数据可以分别用柱状图、饼图来表示。C存在的目的则是确保M和V的同步，一旦M改变，V应该同步更新。

Http协议三次握手和四次挥手

三次握手：

1、浏览器需要先发送SYN码，客户端请求和服务器建立连接；

2、服务器接收到SYN码，再发送给客户端SYN+ACK码，我可以建立连接；

3、客户端接收到ACK码，验证这个ACK是否正确，如果正确则客户端和服务端则建立起数据连接；双方的数据发送通道都将开启；

四次挥手：

1、当客户端无数据要传输了，会发送FIN码告诉服务器，我发送完毕了；

2、当服务端接收完毕后，告诉客户端ACK码，告诉客户端你可以把数据通道关闭了；

3、当服务器发送完毕之后，也会发送FIN码，告诉浏览器，数据发送完毕；

4、当客户端接收完毕 之后，同样发送ACK码，告诉服务器，数据接收完毕，你可以关闭；

三次握手和四次挥手的好处：确保数据的安全和完整

transition和animation的区别：

1、animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；transition 是过渡，是样式值的变化的过程，只有开始和结束；

2、animation配合 @keyframe 可以不触发事件就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；

3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；

4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from … to，而animation可以一帧一帧的。

描述一个”reset“的css文件并如何使用它？知道normalize.css吗？你了解他们的不同之处吗？

Reset样式的目的就是清除某些浏览器的默认样式,方便css的书写：例如：*{margin:0;padding:0;list-style:none;}
normalize的理念与reset的不同，他并不是清除浏览器的默认样式，而是尽量将所有的浏览器的默认样式统一。

你知道strong和b;i和em的区别吗？

从页面显示效果来看，被 b 和 strong 包围的文字将会被加粗，而被 i 和 em 包围的文字将以斜体的形式呈现。
但是 b 和 i 是自然样式标签，分别表示无意义的加粗，无意义的斜体，表现样式为 { font-weight: bolder}，仅仅表示「这 里应该用粗体显示」或者「这里应该用斜体显示」
而 em 和 strong 是语义样式标签。 em 表示一般的强调文本，而 strong 表 示比 em 语义更强的强调文本。