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.<img>标签上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