HTML 和 CSS

1. 浏览器的文档模式有哪些，如何开启这些文档模式？

标准模式和怪异模式，省略标签可以开启怪异模式

2. 常见的块级元素和行内元素有哪些？

块级：div、p、ul、li、dl….

行内：a、span、em、strong….

3. 介绍下css盒子模型

padding maring border content 有时会问：IE6-8对盒子模型渲染和现代浏览器的区别，一直认为没区别，找了些资料说是：IE5之前会有差异。

4. 请缩写以下代码：

1
2
3
4
5
6
7
.box {
     background-position: 10px 20px;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-color: red;
     background-image: url(box.png);
}

5. 介绍下你所知道的各种浏览器hack

IE6_+ IE7+ IE\9 -moz- -ms- -o- -webkit- !imorptant

6. 写出几个HTML5新增加标签和新增的FORM表单类型

header footer article section aside nav

7. web标准有哪几部分组成

网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）

8. 写出一个高度为1px的div。

1
2
3
4
5
.div {
    heigth: 1px;
    font-size: 0;
    overflow: hidden;
}

9. 如何让2个并列的div自动等高（不设高度），随便写出几个，写出思路也可。

答案不限，仅供参考

1
div.parent > div.left + div.right

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent {
    overflow: hidden;
}

.left {
    float: left;
    margin-bottom: -10000px;
    padding-bottom: -10000px;
}

.right {
    float: left;
    margin-bottom: -10000px;
    padding-bottom: -10000px;
}

背景平铺模拟法
使用table, td是永远等高的

10. 如何使用响应式web布局

web媒体查询 @media query
切图仔必杀技;

11. 你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计?

Javascript

1. js数据结构
种基本数据结构+引用类型

2. 简单阐述下ajax和前端如何跨域

js 完成get post 请求, 可同步，可异步

前端对于跨域的解决办法
(1) document.domain+iframe (2) 动态创建script标签(jsonp)

3. 如何判断一个JS外链已完全加载
只要指出IE下和其它现代浏览处理事件的方式不同就行，参考：

IE：onreadystatechange readyState loaded complete
chrome: script的load事件

4. 前端开发的优化

  1. 减少http请求次数：css spirit,data uri
  2. JS，CSS源码压缩
  3. 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存ajax
  4. css sprite
  5. 减少页面的重排和重绘
  6. 不污染全局变量，少用全局变量
  7. img/js/css 预加载和img惰性加载

…….还有好多。

5. 打印出1-7之间的随机数。

6. WEB应用从服务器主动推送Data到客户端有那些方式？

  • html5 websoket
  • WebSocket通过Flash
  • XHR长时间连接
  • XHR Multipart Streaming
  • 不可见的Iframe

本文地址 https://laoona.com/post/4c5a7f89.html