面试前十道

1.前端页面有哪三层构成，分别是什么？作用是什么?
结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面”内容是什么”的问题。

表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。

行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。

2.请简述盒模型
IE6盒子模型与W3C盒子模型

文档中的每个元素被描绘为矩形盒子。盒子有四个边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content

CSS3中有个box-siwzing属性可以控制盒子的计算方式

content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。（W3C盒子模型）

border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值。（IE6盒子模型）

3.标签上title属性与alt属性的区别是什么？
a. alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短, 下·不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等

b. title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息

4.简述一下src与href的区别
src用于替换当前元素

href用于在当前文档和引用资源之间确立联系

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

5.请阐述table的缺点
a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量

b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td

c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱

d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱

e. 不够语义

6.iframe的优缺点
优点：
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺点：
d. iframe会阻塞主页面的Onload事件
e. 无法被一些搜索引擎索引到
f. 页面会增加服务器的http请求
g. 会产生很多页面，不容易管理

7.html5有哪些新特性、移除了那些元素？（扩展）
新特性：
a. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加
b. 拖拽释放(Drag and drop) API
c. 语义化更好的内容标签（header,nav,footer,aside,article,section）
d. 音频、视频API(audio,video)
e. 画布(Canvas) API
f. 地理(Geolocation) API
g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
h. sessionStorage 的数据在页面会话结束时会被清除
i. 表单控件，calendar、date、time、email、url、search
j. 新的技术webworker, websocket等
移除的元素：
k. 纯表现的元素：basefont，big，center, s，strike，tt，u
l. 对可用性产生负面影响的元素：frame，frameset，noframes

8.谈谈你对CSS布局的理解
a. 固定布局

b. 流式布局

c. 弹性布局

d. 浮动布局

e. 定位布局

f. margin和padding

9.述CSS样式表继承
a. CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素，会被继承下去的属性：

b.文本相关：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color

c. 列表相关:list-style-image，list-style-position，list-style-type， list-style

10.请简述CSS的选择器
a. 元素选择器：* 、E、 E#id、 E.class

b. 关系选择器：E、F、E>F、E+F、E~F

c. 属性选择器：E[att]、E[att=“val”]、E[att~=“val”]、E[att^=“val”]、E[att$=“val”]、E[att*=“val”]、E[att|=“val”]

d. 伪类选择器：E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等

e. 伪对象选择器：E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection