网页开发知识点列表

页面重构

基础

包含了HTML以及CSS的基本知识。

知识点

• HTML常用元素。
• HTML元素间嵌套关系。
• HTML元素语义性。
• CSS常用属性。
• CSS选择器。
• CSS选择器优先级。
• 两类盒模型的概念。
• 常见布局的实现。

常见问题

• h1~h6的区别是什么？ul、ol的区别呢？
• 有用过dl、dt、dd这三个元素吗？其表达的语义是什么？
• 如何实现定宽、自适应的两列、三列布局？
• float属性的的作用是什么？如何清除浮动？
• position属性的取值有哪些？各值的效果如何？
• display属性的取值有哪些？各值的效果如何？
• display:inline-block的特点？
• form元素的常用属性有哪些？
• input元素不给定type属性的情况下，会是什么样的？
• input type="image"元素的作用是什么？
• 标准盒模型是怎么样的？怪异盒模型呢？
• 如何控制浏览器进入怪异模式或者标准模式？
• 有使用过哪些CSS选择器？

兼容

考察包括Internet Explorer 6-8、Firefox 3.5+、Chrome 6+在内的各浏览器在HTML以及CSS方面的兼容性知识。

知识点

• HTML部分元素（如ul）在不同浏览器下的默认样式的差异。
• 部分HTML元素的使用上存在的差异，如引入flash的方式。
• 旧浏览器（如Internet Explorer 6）对部分CSS属性（如display:inline-block）支持程度。
• 部分CSS属性产生的问题（如双倍边距、3px边距等），以及如何修复。
• 旧浏览器不支持部分CSS属性（如position:fixed）的修复方案。
• 各浏览器使用的CSS Hack形式。

常见问题

• 有使用或制作过reset.css吗？请问该css中要包含哪些内容？
• 谈谈项目中遇到过的布局相关的兼容性问题，以及通过什么方式解决的？
• 浅谈一下IE中的hasLayout属性的作用，以及如何触发该属性。
• display:inline-block是一个非常好用的样式，但是IE6对其支持有限，能谈谈IE6是如何理解该样式的吗？如何在IE6下模拟出该样式的效果呢？
• 谈谈width和height样式在IE6下与其他浏览器的区别？
• 谈谈IE6对!imoprtant的样式声明的解析规则？
• 对于IE6不支持alpha透明的png的问题，是如何解决的？使用AlphaImageLoader会产生哪些问题？有没有解决的方法呢？
• 如何全浏览器兼容地设置某个元素的透明度为30%？

性能

考察页面重构的知识中与性能有关的各知识点，其考察以点状知识为主。

性能不仅仅是浏览器执行、解析的相关数值，也包括如何让用户更快地看到内容等方面的考量。

知识点

• CSS选择器的优化。
• HTML元素层面的优化。
• 流式布局与table布局之间的区别。

常见问题

• HTML元素到CSS选择器的匹配过程是如何进行的？
• 能否谈谈在制作CSS选择器时，要注意一些什么问题，保证性能的最优化？
• 为什么现在倡导流式布局，而不使用table布局？两者在性能方面是否有区别？

实践1

实现一个二级的菜单，其中一级菜单横向排列，当鼠标移动到一级菜单的某个菜单项上时，显示出该项关联的二级菜单。要求写出相关的HTML和CSS，并解释具体原理，并遵循以下规定：

• 不考虑浏览器兼容性问题，以现有最新标准为基础。
• 不得使用任何javascript或其他脚本，仅使用HTML和CSS。
• 二级菜单的展开方式使用动画可获得额外的认同。

实践2

实现一个3列布局，要求使用以下给出的HTML结构：

<div id="main"><!-- 内容 --></div>
<div id="nav"><!-- 内容 --></div>
<div id="sidebar"><!-- 内容 --></div>
<div id="footer"><!-- 内容 --></div>

并符合如下要求：

• body元素的padding和margin为0。
• #nav在左边，#main在中间，#sidebar在右边。
• #footer独立在下方，占满整行，其中内容居中。
• #nav宽度为15%，#sidebar宽度为20%，#main占用剩余空间。
• #main中的内容与#nav和#sidebar间隔10px。该条不要求兼容IE6。
• 不要求所有浏览器完全相同，但必须达到可用的程度。

javascript及BOM、DOM

基础

考核javascript语言相关的基础知识、ECMA262标准相关知识，以及浏览器提供的BOM模型的知识，和w3标准下的DOM相关知识。

知识点

• javascript中的原生类型、内置类型。
• javascript提供的基本类型的相关函数。
• javascript中的对象类型的判定方式。
• prototype的作用、类型创建、继承。
• ECMA基本语法，如分号插入规则、逗号运算符、括号的多义性等。
• BOM模型提供的对象，如location对象的组成、top/self/window/parent/opener的关系和区别等。
• DOM模型的相关函数、对象。
• DOM元素的创建、修改、删除等操作。
• 常用框架的熟悉程度。
• AJAX的运作过程。

常见问题

• javascript有哪些原生类型、哪些内置类型？null和undefined有什么区别？
• 当访问一个没有用var关键字定义过的对象时，会发生什么？
• Object、Array、RegExp的字面表达方式分别是什么？
• 如何判定一个对象是字符串？判断中的每一个分支在什么情况下成立？
• 在javascript中，通过什么方法能创建一个“类”，以及创建一个“类”的“子类”呢？
• eval('var a = 3;');和(0, eval)('var a = 3;');有什么区别？
• document.defaultView是什么？
• 谈谈Node和Element的区别？Node有哪几种？
• 有哪些函数可以用来获取一个或多个DOM元素？
• 有用过jQuery吗？能说说jQuery的选择器有哪些吗？请问#section~ul>li:gt(0):not(:empty)这个选择器表示什么？

兼容

考察各浏览器中脚本编写时的兼容性处理，主要在于DOM相关属性的兼容性等。

知识点

• DOM元素各属性设置时的兼容性问题。
• DOM元素事件的兼容性。
• 事件注册、注销、触发，事件对象的兼容性。
• 原生数据类型的部分兼容问题，如for...in循环输出的顺序。

常见问题

• 请问如何给一个元素设置float:left样式？
• 如何取得一个元素的内联style属性的字符串，如'color:red;font-size:16px;'？
• 各浏览器是怎么注册、注销、触发事件的？addEventListener的第三个参数有什么作用？捕获和冒泡的概念？
• 事件Event对象在各浏览器下有哪些兼容性的问题，如何处理？
• delete关键字有什么作用？在各浏览器之下有什么差别吗？
• 如何判断浏览器是处在标准模式的呢？
• 有遇上过position:fixed的需求吗？你是如何检测一个浏览器是否支持该定位方式的？对于不支持的浏览器，有什么好的修复方案吗？
• 是否遇上过IE6下背景图片频繁闪烁的问题？能说说原因以及解决方案吗？
• 能谈谈UA检测和特性检测的概念吗？你是如何在两者之间进行取舍的？
• 如何让AJAX请求可以使用“后退”和“前进”按钮？

性能

考察在DOM操作等方面的性能测量、优化等知识，重在考察一个分析的过程，教条主义的结论并不适用。

知识点

• DOM操作的基本优化原则。
• reflow和repaint的概念，如何减少这两个操作。
• Sizzle等框架的选择器的优化。

常见问题

• 请问我们经常听到的“javascript”执行很慢通常是因为什么引起的？如何能进行针对性的优化？
• 能谈谈reflow和repaint这两个概念吗？
• 在编写javascript的时候，有什么关于性能方面需要注意的问题吗？
• 往往为了性能，会损失代码的优雅性和规范性，那么在这方面，你是怎么取舍的呢？
• 有用过Google Closure Compiler吗？对它的高级模式有没有什么研究？
• 如果让你设计一个类似Google Closure Compiler的编译工具，你认为可以对javascript进行怎么样的优化呢？

实践1

使用原生的javascript，实现一个ajax请求的函数：

function ajax(options) { };

要求options中含有以下内容：

url

请求的地址。

method

请求用的HTTP Method。

data

可选参数，发送请求时的数据。

success

可选参数，请求成功时的回调函数，形式：function(xhr) {}。

error

可选参数，请求失败时的回调函数，形式：function(xhr) {}。

codeXxx

可选参数，Xxx为一个数字，当响应中的HTTP状态码为Xxx时触发，形式：function(xhr) {}。

实践2

使用原生的javascript，实现一个函数

function unique(array) { }

并符合以下要求：

• 当函数只有一个参数时，该参数为数组。
• 当函数有多个参数时，所有的参数合起来为一个数组。
• 函数去除数组中的重复元素，并返回一个仅包含相互不重复的元素的新的数组。
• 使用严格等于来判定两个元素是否重复。
• 考虑时间复杂度。

实践3

使用原生的javascript，实现一个获取某个名字的cookie值的函数：

function getCookie(name) { }

要求不存在名字为name的cookie项时，返回空字符串。

实践4

使用原生的javascript，实现一个jsonp函数：

function jsonp(url, callback) { }

仅要求处理服务器正确返回的情况，在服务器正确返回时，可调用callback函数。

同时，与服务器约定，url中可添加callback=xxx作为回调函数名称，服务器会根据此query值生成脚本。

其他部分

HTTP协议

考查HTTP协议的认知程度和基本知识。

知识点

• HTTP协议的概念，HTTP请求、响应的组成。
• 常见HTTP Method表达的意思，不仅仅是GET和POST。
• HTTP状态码的表意区间，常见HTTP状态码表达的意义。
• 浏览器与服务器对cookie的交互方式。
• 浏览器对外部资源，如样式表、脚本文件、图片、flash的加载顺序和限制。
• 基于资源瀑布图的分析和优化。

常见问题

• 请说说HTTP协议中的请求及响应的组成部分。
• 请简单阐述一下，当使用一个input type="file"进行文件上传时，怎么从请求流中找出该文件的内容和相关信息？
• 请指出HTTP状态码中的200、302、304、404、500、503表示的意义。
• HTTP状态码301和302有什么区别？
• 在HTTP头中，关于缓存的有哪几个？分别起什么作用？
• 在一次AJAX请求中，怎么判断请求已经结束，并且服务器成功执行了请求并给出了正确的响应？
• 为什么使用CTRL+F5刷新浏览器可以避免本地缓存呢？
• 服务器是如何得到浏览器中的cookie的？又如何向浏览器设置某个cookie呢？
• 为什么要将样式放在关部，而将脚本放在页面底部呢？
• 将一个外部样式表通过link元素引入，则该元素在“页面的head的底部”与“页面的body的头部”有什么区别？

安全相关

考查前端及系统安全方面的知识，需要对各种攻击手段和防范措施有基本的了解。

知识点

• HTML转义符号、脚本转义符号。
• 常见的XSS漏洞，及其避免方式。
• 常见的其他安全攻击方式，及其应对措施。
• 与flash交互过程中的安全事项。

常见问题

• 有一段用户输入的文字，现在要通过一定的方法显示在一个id为output的div元素中，请问如何做？
• 请问什么是XSS漏洞？从你的角度看，HTML片段中有哪些关键字可能导致输出后会执行一段javascript脚本？
• 有没有听过中间人攻击？请问对于中间人攻击，有没有什么有效的防范措施呢？
• 如何防止flash在页面中执行javascript呢？

新技术

考核对HTML5及CSS3、Javascript 1.6的相关知识的吸收程度，借以考察对前端技术的关注度及兴趣。

知识点

• HTML5新增元素的语义。
• HTML5表单的增加。
• HTML5中Geolocation、LocalStorage、IndexDB、WebSQL、WebSocket等技术的概念。
• CSS3的选择器。
• box-shadow、text-shadow等CSS3新增样式。
• CSS3 Transform和CSS3 Animation的应用。
• dataURI的概念。
• javascript 1.6的新增功能。

常见问题

• 对HTML5有所了解吗？能说说HTML5新增加的元素有哪一些吗？
• 能谈谈就你来看，HTML5的意义以及其设计的原则吗？
• HTML5中对表单进行了不少的增强，能谈谈你对这方面的了解吗？
• HTML5扩展了不少浏览器对象，包括地理位置、本地存储等，能谈谈你的了解吗？
• 有了解过box-shadow这个样式吗？请问box-shadow设置的阴影处于标准盒模型的哪一层中？
• CSS3中你最喜欢的特性是什么？为什么呢？
• 能说说dataURI的概念吗？其具体的编码格式是什么？你认为怎么样的情况下适于使用dataURI？
• 使用javascript 1.6，是否可以给对象定义一个属性，并且使得这个属性无法被for...in语句枚举出来？
• 有接触过javascript的strict模式吗？请问怎么进入strict模式，strict模式与普通模式有什么区别？我们为什么要使用strict模式呢？

实践1

现有一个页面的代码如下：

<!DOCTYPE html>
<html>
    <head>
        <!-- head内容 -->
    </head>
    <body>
        <p id="message"><%= Request.QueryString["errorMessage"] %></p>
    </body>
</html>

该系统使用Session存放登录用户的信息，使用cookie中的session_id项来对应服务器的Session。

请设计一个攻击方案，使攻击者可以在不使用社会工程学的前提下，获得用户的帐号并成功登录到系统中。

实践2

现有一个简单的购物系统，有以下数据结构：

• Product : { id, category, name, price }
• User : { id, name, password }
• BuyRecord : { productId, userId, price, time }

有以下的功能需求：

• 用户可以登录。
• 可以按照category浏览Product。
• 可以按照id查看单个Product的详细信息。
• 可以购买单个Product，此操作会形成一个BuyRecord。
• 可以查看自己的BuyRecord。

请根据上面的信息，请设计以下功能的url结构以及相应的HTTP Method，url中的参数使用{xxx}的形式表示：

要求尽可能使每个URL语义化，便于用户的记忆和分享。