面试题总结（1）-蒲公英云

1.所学的行内元素，块级元素

答：
行内元素：<a> <b> <br> <em> <i> <img> <input> <span> <small> <strong>
块级元素：<div> <filedest> <form> <hn> <hr> <menu> <ol> <p> <ul> <table>

2.标签上的alt和title属性的区别

答：alt属性和title属性的区别是前者是在图片无法加载的时候才会显示的其值，而title是在图片正常加载鼠标划上去显示的值，虽然alt也有后者的功能，但是只是在低版本的ie浏览器才支持，高版本及标准浏览器不支持这个功能了。

3.css引入的方式有几种？link和import的区别是什么？

答：有四种方式引入css
1.内联方式：内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

<div style="background: red"></div>

2.嵌入方式：在 HTML 头部中的

<head>
    <style> .content { background: red; } </style>
</head>

3.链接方式：使用 HTML 头部的标签引入外部的 CSS 文件。

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

4.导入方式：导入方式指的是使用 CSS 规则引入外部 CSS 文件。

<style> @import url(style.css); </style>

link和@improt的区别：
（1）：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
（2）：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
（3）：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
（4）：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

4.css的优先级

答：一般情况下，优先级如下：

（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style

有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

5.阅读下面程序

<style> .red{ background: red; } .blue{ background: blue; } </style>
<p class="bule red">eeeeeee</p>

背景颜色显示什么？答：红色

6.谈一下对盒子模型的理解

答：详见：html和css入门（3）

当你遵循ie盒子模型时，不管你如何设置padding和border（小于width/2），它只在盒子里面伸缩，不影响整体的宽高，这个border-box是不是在某些时候非常好用？但也不能盲目地用，因为它会影响content，如果padding和border太大，会把内容挤掉的。
现在还在用IE6以下的浏览器的用户已经很少了，所以目前浏览器大部分元素都是基于W3C标准盒子模型上。所以我们平常说的盒子模型一般就是标准
w3c 盒子模型（但对于input、button元素默认border-box ，还是基于传统的ie 盒子模型
）。一定有人会问，那我们怎样让我们的元素都遵循W3C标准盒子模型呢？看看你html的文件头部是不是有一个，有这个，就说明你已经遵循W3C标准盒子模型了。

详见：http://www.jianshu.com/p/2353c364318b

7.position的值，relative和absolute分别是相对于谁进行定位的？

答：relative是相对于原来位置定位的
absolute是相对于父元素定义的，如果没有父元素，那就是相对浏览器的左上角定位

8.行内元素float：left后是否变成块级元素

答：不会的，应该display：inline-block

9.b和strong，i和em有什么区别
<b>定义粗体文本
<strong>定义加重语气
<i>定义斜体文字
<em>定义着重文字

b和strong效果一样，i和em效果一样

10.都用什么浏览器测试页面？为什么？简单说一下内核的理解

答：chrome，firefox，safair，IE，opera。
五个浏览器包含了所有浏览器的样式。
主要分成两个部分：渲染引擎(Render Engine)和JS引擎。

渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎：解析和执行JavaScript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向与只指渲染引擎。

常见的浏览器内核有哪些？
Trident内核：IE，360，搜过浏览器；
Gecko内核：Netscape6及以上版本，
Presto内核：Opera
Blink内核：Opera；
Webkit内核：Safari，Chrome

11.怎么理解html语义化

答：
语义化，故名思意，就是Html结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为Html本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。那么，我们以后再开发的过程中，一定要注意了，尽量使用官方的有语义的标签，不要再使用一堆无意义的标签去堆你的结构。怎么知道，自己的页面结构是否语义化，那就要看你的HTML结构，在去掉CSS样式表之后，是否，依然能很好的呈现内容的结构，代码结构。也就是说，脱掉css的外衣，依然头是头，脚是脚。赤裸裸的完整的一篇文档。这也就是，语义化之后文档的效果。
所以我们：
尽可能少的使用没有语义的div和span元素。
在对语义要求不明显时，技能使用div也能使用p,那就使用p，以为p默认有上下边距，可以兼容特殊终端。
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b，因为没语义），em是斜体（不用i同b）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头标题用th，内容单元格用td。

12.什么叫优雅降级和渐进增强

答：渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

优雅降级和渐进增强只是看待同种事物的两种观点。优雅降级和渐进增强都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注于何处，以及这种关注如何影响工作的流程。

优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

渐进增强观点则认为应关注于内容本身。请注意其中的差别：我甚至连“浏览器”三个字都没提。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得渐进增强成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

13.meta标签的作用

答：<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。

14.h5的新特性，移除了哪些元素

答：纯表现的元素：

<basefont> 默认字体，不设置字体，以此渲染
<font> 字体标签
<center> 水平居中
<u> 下划线
<big> 大字体
<strike> 中横线
<tt> 文本等宽

框架集： <frameset> <noframes> <frame>

15.为什么要初始化css样式？

答：因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
初始化CSS样式主要是提高编码质量，如果不初始化整个页面做完很糟糕，重复的CSS样式很多。去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置。