分享给某人的前端面试题库（一）

一张图阐述一下Web前端开发的概要

HTML/CSS部分

1、什么是盒子模型？

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框 （border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区 域。4个部分一起构成了css中元素的盒模型。

2、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

3、CSS实现垂直水平居中

一道经典的问题，实现方法有很多种，以下是其中一种实现：
HTML结构：

 

 

1 2 3

<div class="wrapper">     <div class="content"></div> </div>

CSS：

 

 

1 2 3 4 5 6 7 8 9 10 11

.wrapper{position:relative;}     .content{         background-color:#6699FF;         width:200px;         height:200px;         position: absolute;        //父元素需要相对定位         top: 50%;         left: 50%;         margin-top:-100px ;   //二分之一的height，width         margin-left: -100px;     }

4、简述一下src与href的区别

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

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚 本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此， 类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

5、什么是CSS Hack?

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// 1、条件Hack    <!--[if IE]>       <style>             .test{color:red;}       </style>    <![endif]-->    // 2、属性Hack     .test{     color:#0909; /* For IE8+ */     *color:#f00;  /* For IE7 and earlier */     _color:#ff0;  /* For IE6 and earlier */     }    // 3、选择符Hack     * html .test{color:#090;}       /* For IE6 and earlier */     * + html .test{color:#ff0;}     /* For IE7 */

6、简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

7、px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

8、什么叫优雅降级和渐进增强？

渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

9、浏览器的内核分别是什么?

IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)

JavaScript部分

1、怎样添加、移除、移动、复制、创建和查找节点？

1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

2、实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

/** * 对象克隆 * 支持基本数据类型及对象 * 递归方法 */ function clone(obj) {     var o;     switch (typeof obj) {         case "undefined":             break;         case "string":             o = obj + "";             break;         case "number":             o = obj - 0;             break;         case "boolean":             o = obj;             break;         case "object": // object 分为两种情况 对象（Object）或数组（Array）             if (obj === null) {                 o = null;             } else {                 if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {                     o = [];                     for (var i = 0; i  obj.length; i++) {                         o.push(clone(obj[i]));                     }                 } else {                     o = {};                     for (var k in obj) {                         o[k] = clone(obj[k]);                     }                 }             }             break;         default:             o = obj;             break;     }     return o; }

3、如何消除一个数组里面重复的元素？

 

 

1 2 3 4 5 6 7 8 9

// 方法一： var arr1 =[1,2,2,2,3,3,3,4,5,6],     arr2 = []; for(var i = 0,len = arr1.length; i< len; i++){     if(arr2.indexOf(arr1[i]) < 0){         arr2.push(arr1[i]);     } } document.write(arr2); // 1,2,3,4,5,6

4、想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）。

5、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的 argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回 NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array 对象。

 

 

1 2 3 4 5 6 7

function log(){       var args = Array.prototype.slice.call(arguments);   //为了使用unshift数组方法，将argument转化为真正的数组       args.unshift('(app)');         console.log.apply(console, args); };

6、Javascript中callee和caller的作用？

caller是返回一个对函数的引用，该函数调用了当前函数；

callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

7、请描述一下cookies，sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也 随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主 动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装 setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

8、手写数组快速排序

关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序
“快速排序”的思想很简单，整个排序过程只需要三步：
（1）在数据集之中，选择一个元素作为”基准”（pivot）。
（2）所有小于”基准”的元素，都移到”基准”的左边；所有大于”基准”的元素，都移到”基准”的右边。
（3）对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。

9、统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var str = "aaaabbbccccddfgh"; var obj  = {}; for(var i=0;istr.length;i++){     var v = str.charAt(i);     if(obj[v] & obj[v].value == v){         obj[v].count = ++ obj[v].count;     }else{         obj[v] = {};         obj[v].count = 1;         obj[v].value = v;     } } for(key in obj){     document.write(obj[key].value +'='+obj[key].count+' '); // a=4  b=3  c=4  d=2  f=1  g=1  h=1 }

10、写一个function，清除字符串前后的空格。（兼容所有浏览器）

 

 

1 2 3 4 5

function trim(str) {     if (str & typeof str === "string") {         return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符     } }

其他

1、一次完整的HTTP事务是怎样的一个过程？

基本流程：

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求，浏览器得到html代码

e. 浏览器解析html代码，并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

2、对前端工程师这个职位你是怎么样理解的？

a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好

b. 参与项目，快速高质量完成实现效果图，精确到1px；

c. 与团队成员，UI设计，产品经理的沟通；

d. 做好的页面结构，页面重构和用户体验；

e. 处理hack，兼容、写出优美的代码格式；

f. 针对服务器的优化、拥抱最新前端技术。

JavaScript的类型转换

JavaScript是一种无类型语言，类型转换分为显式转换和隐式转换

隐式转换

通过运算符进行转换，在一些运算中，Javascript也会进行自动类型转换

显式转换

通过手动进行类型转换，Javascript提供了以下转型函数：

转换为数值类型：Number(mix)、parseInt(string,radix)、parseFloat(string)
转换为字符串类型：toString(radix)、String(mix)
转换为布尔类型：Boolean(mix)

JavaScript的原型与继承

Js所有的函数都有一个prototype属性，这个属性引用了一个对象，简称原型，javascript中的继承是通过原型链来体现的，访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着__proto__这条链向上找，这就是原型链。

B.prototype = new A();，此时B.prototype.constructor就是构造对象A，随后使用B.prototype.constructor = B;将B原型的构造器重新指向B构造函数在进行原型继承后，要进行修正操作。

JavaScript的闭包

闭包函数类似于Java等OO语言中的getter和setter函数，即因为变量作用域的原因，在函数外部无法读取函数内的局部变量。闭包就是能够读取其他函数内部变量的函数。父对象的所有变量，对子对象都是可见的，反之则不成立。闭包就是将函数内部和函数外部连接起来的一座桥梁。

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。   闭包会在父函数外部，改变父函数内部变量的值。

HTTP中Get和Post

get是从服务器上获取数据，post是向服务器传送数据。

GET请求，请求的数据会附加在URL之后，以?分割URL和传输数据，多个参数用&连接。POST请求：POST请求会把请求的数据放置在HTTP请求包的包体中。

即GET请求的数据会暴露在地址栏中，而POST请求则不会。

对于GET，特定的浏览器和服务器对URL的长度有限制。因此，在使用GET请求时，传输数据会受到URL长度的限制。数据量不能大于2KB

对于POST，由于不是URL传值，理论上是不会受限制的，但是实际上各个服务器会规定对POST提交数据大小进行限制，理论上，IIS4中最大量为80KB，IIS5中为100KB。

POST的安全性比GET的高。在FORM提交的时候，如果不指定Method，则默认为GET。

JavaScript事件绑定

IE的attachEvent()

elemObject.attachEvent("eventName", functionReference);

eventName 参数的值是表示事件名称的字符串，比如onclick（含on）。functionReference 参数是一个不带括号的函数引用

W3C DOM 的addEventListener()

nodeReference.addEventListener("eventType", listenerReference, captureFlag);

用 W3C DOM 规范中的行话来说，addEventListener() 方法为指定的结点注册了一个事件，表示该结点希望处理相应的事件。

第一个参数是一个声明事件类型的字符串，比如click，mousedown。（不含on）

第二个参数可以和早些时候描述过的函数引用同样对待。

第三个参数则是一个Boolean值，指明该结点是否以DOM中的捕捉模式来侦听事件。

JavaSciprt事件冒泡以及目标元素。

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

目标元素: 任何一个事件的目标元素都是最开始的那个元素，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，并且可以很方便地得知这个事件是从哪个元素开始的。

JavaScript图片轮播

1.全局变量等

定义初始index，图片总数

2.自动切换定时器处理

设置自动切换时间，自动切换后修改index

3.为左右箭头添加事件处理

滑入清除定时器，滑出则重置定时器，根据curIndex进行上/下一个图片处理

4.为右下角的li 按钮绑定事件处理

用css来隐藏img，用siblings而不是先hide全部在fadein，使用siblings来处理这样的情况速度会比较快。简单来讲siblings就是除开当前显示的这个以外的所有统计图片全部fadeOut

JavaScript网页前进和后退的代码

前进: history.forward();=history.go(1);

后退: history.back();=history.go(-1);

cookie和session的区别

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。

2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗，考虑到安全应当使用session。

3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用COOKIE。

4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

CSS 优先级法则

1.、 选择器都有一个权值，权值越大越优先，当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

2、 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；

3、继承的CSS 样式不如后来指定的CSS 样式，在同一组属性设置中标有“!important”规则的优先级最大

CSS选择器

 

浏览器兼容性问题

javascript兼容性问题

1、在标准的事件绑定中绑定事件的方法函数为 addEventListener,而IE使用的是attachEvent

2、事件处理中非常有用的event属性获得亦不相同，标准浏览器是作为参数带人，而ie是window.event方式获得，获得目标元素ie为e.srcElement 标准浏览器为e.target

3、然后在ie中是不能操作tr的innerHtml

4、然后ie日期函数处理与其它浏览器不大一致，比如： var year= new Date().getYear(); 在IE中会获得当前年，但是在firefox中则会获得当前年与1900的差值。

5、获得DOM节点的方法有所差异，其获得子节点方法不一致。

css兼容性问题

1、不同浏览器的标签默认的外补丁和内补丁不同，解决方案：用通配符*来设置各个标签的内外补丁是0。

2、div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字

3、margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 

Ajax是什么

ajax是异步的 JavaScript 和 XML。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax的交互模型

 1--启动  获取XMlHttpRequest对象
 2--open 打开url通道，并设置异步传输 
3--send 发送数据到服务器

4--服务器接受数据并处理，处理完成后返回结果 
5--客户端接收服务器端返回

同步和异步的区别

同步：脚本会停留并等待服务器发送回复然后再继续

异步：脚本允许页面继续其进程并处理可能的回复

Ajax跨域的解决方法

如果在A网站中，我们希望使用Ajax来获得B网站中的特定内容，如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。

IE对于跨域访问的处理是，弹出警告框，提醒用户。如果用户将该网站纳入可信任网站，或者调低安全级别，那么这个问题IE就不会在提醒你。

FireFox等其它非微软的浏览器遇到跨域访问，则解决方案统一是拒绝访问

几个可行的方案：

1、Web代理的方式。

2、on-Demand方式

3、iframe方式。

4、用户本地转储方式

什么是PHP

超级文本预处理语言 Hypertext PreProcessor，是一种用来开发动态网站的服务器端脚本语言。

PHP字符串翻转

echo strrev($a);

PHP支持多继承吗？

不支持。PHP中只允许单继承，父类可以被一个子类用关键字“extends”继承。

echo(),print(),print_r()的区别

echo是PHP语句, print和print_r是函数,语句没有返回值,函数可以有返回值

echo输出一个或者多个字符串

print()只能打印出简单类型变量的值(如int,string) 

print_r()  可以打印出复杂类型变量的值(如数组,对象) 

在PHP中如何定义常量

使用define () 来定义常量，比如define (“Newconstant”, 30);

语句include和require的区别，如何避免多次包含同一文件

require是无条件包含，也就是如果一个流程里加入require,无论条件成立与否都会先执行require 

include有返回值，而require没有(可能因为如此require的速度比include快) 包含文件不存在或者语法错误的时候require是致命的,include不是

使用 require_once() 和 include_once()可以避免多次包含同一文件以避免函数重定义，变量重新赋值等问题。 返回值和include() 相同。如果文件已被包含，本函数返回 TRUE。

HTTP协议1.0及1.1的区别，并简单说下HTTP协议
HTTP，超文本传输协议。它定义了浏览器和服务器的通信规则。HTTP协议是基于TCP/IP的TCP协议上，现在万维网使用的是HTTP1.1版本，其特点包括，C/S模式，请求简单(GET/POST/HEAD),灵活(可以传输任何类型的数据HTML、XML、JSON、自定义等)，无连接(每次连接只处理一个请求，从发出请求到收到200状态为止断开连接)，无状态。

HTTP协议主要包括，响应消息格式、请求消息格式、状态码知识点。

什么是MVC？
MVC，即Model（数据层），View（视图层），Controller（控制层）。

PHP中的MVC模型是一种有效将代码分成三层的管理办法，

Model表示着应用中的数据信息

View负责将应用中的数据信息展现出来

Controller控制着如何将数据信息读出。

Spring MVC工作原理
1. 客户端请求提交到DispatcherServlet
2. 由DispatcherServlet控制器查询一个或多个HandlerMapping，找到处理请求的Controller
3. DispatcherServlet将请求提交到Controller
4. Controller调用业务逻辑处理后，返回ModelAndView
5. DispatcherServlet查询一个或多个ViewResoler视图解析器，找到ModelAndView指定的视图
6. 视图负责将结果显示到客户端

为什么要用Spring 
1、Spring能很好的与各大框架进行集成
2、创建对象时，如果我们不用spring需要用工厂模式来创建，这个spring相当于工厂模式已经帮我们做了创建对象的功能(IOC、依赖注入)。
3、在用Hibernate的时候，如果不用spring每次都要写事务的提交代码，有了spring可以通过AOP帮助我们管理事务 
4、面向切面编程（AOP）在要记录日志的时候添加一条记录后需要在数据里同时添加一条添加成功了或失败的记录，那么就可以用Spring的Aop来处理，虽然不用Aop也能做但是不用Spring的Aop就会写很多重复的代码。

Spring中的IOC和AOP

IOC依赖注入，即用接口编程，在程序中不出现new关键字，用接口来命名引用，然后通过某种方式把接口的某个实现类的实例注入到引用里，从而实现接口与具体实现类的松耦合。

AOP面向方面的编程，即，是一种编程技术，它允许程序员对横切关注点或横切典型的职责分界线的行为（例如日志和事务管理）进行模块化。AOP 的核心构造是方面，它将那些影响多个类的行为封装到可重用的模块中。

Spring bean生命周期

实例化——填充属性——

调用BeanNameAware的setBeanName()方法

调用BeanFactoryAware的setBeanFactory()方法

调用ApplicationContextAwar的setApplicationContext()方法

调用BeanPostprocessore的预初始化方法

调用InitialzingBean的afterPropertiesSet()方法

调用定制的初始化方法——调用Beanprocessors的后初始化方法——

bean可以使用——容器关闭——

调用DisposableBean的destroy()方法——

调用定制的销毁方法——结束

1.    BeanFactoyPostProcessor实例化

2.    Bean实例化，然后通过某些BeanFactoyPostProcessor来进行依赖注入

3.    BeanPostProcessor的调用.Spring内置的BeanPostProcessor负责调用Bean实现的接口: BeanNameAware, BeanFactoryAware, ApplicationContextAware等等，等这些内置的BeanPostProcessor调用完后才会调用自己配置的BeanPostProcessor

4.     Bean销毁阶段

SSH整合 
SSH：Struts（表示层）+Hibernate（持久层）+Spring（业务层）
Struts是一个表示层框架，主要作用是界面展示，接收请求，分发请求。
Hibernate是一个持久层框架，它只负责与关系数据库的操作。
Spring是一个业务层框架，是一个整合的框架，能够很好地黏合表示层与持久层。

Spring的事务管理 
事务就是对一系列的数据库操作进行统一的提交或回滚操作，如果插入成功，那么一起成功，如果中间有一条出现异常，那么回滚之前的所有操作。这样可以防止出现脏数据，防止数据库数据出现问题。

开发中为了避免这种情况一般都会进行事务管理。Spring中也有自己的事务管理机制，一般是使用TransactionMananger进行管理，可以通过Spring的注入来完成此功能。

数据库连接池

开源数据库连接池主要有c3p0、dbcp、proxool三种

DBCP是Apache上的一个 java连接池项目，也是 tomcat使用的连接池组件。由于建立数据库连接是一个非常耗时耗资源的行为，所以通过连接池预先同数据库建立一些连接，放在内存中，应用程序需要建立数据库连接时直接到连接池中申请一个就行，用完后再放回去。dbcp没有自动的去回收空闲连接的功能。

各种排序算法的比较

 

二叉树

1.在二叉树的第I层上至多有2i-1个结点。
2.深度为k的二叉树至多有2k-1个结点(k>=1)
3.在任意一个二叉树中，度为0的结点总是比度为2的结点多一个；
4.具有n 个结点的二叉树，其深度至少为[log2n]+1。

B树平衡多路查找树

1.所有非叶子结点至多拥有两个儿子（Left和Right）；

2.所有结点存储一个关键字；

3.非叶子结点的左指针指向小于其关键字的子树，右指针指向大于其关键字的子树；

4.所有的叶子结点都位于同一层。

搜索：从根结点开始，如果查询的关键字与结点的关键字相等，那么就命中；

否则，如果查询关键字比结点关键字小，就进入左儿子；如果比结点关键字大，就进入

右儿子
Dijkstra 算法

在无向图 G=(V,E) 中，假设每条边 E[i] 的长度为 w[i]，找到由顶点 V0 到其余各点的最短值。

把顶点集合V分成两组：

1.S：已求出的顶点的集合（初始时只含有源点V0）

2.V-S=T：尚未确定的顶点集合

将T中顶点按递增的次序加入到S中，保证：

1.从源点V0到S中其他各顶点的长度都不大于从V0到T中任何顶点的最短路径长度

2.每个顶点对应一个距离值

html

1. <!DOCTYPE>标签的定义与用法

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

<!DOCTYPE>是HTML5的声明，所有的浏览器都支持它，对大小写不敏感，没有结束标签。

1. 块级元素和行内元素有哪些？

块级元素：<div> <d>l <dt> <dd> <form> <h1>……<h6> <ol> <ul> <li> <p>  我自己常用的

行内元素：<a> <b> <big> <em> <i> <img> <input> <small> <span> <strong> <textarea>

块级元素与行内元素的区别：

1. 1. 行内元素会在一行内，直线排列，水平方向的排列；块级元素个占据一行，垂直排列；
   2. 块级元素可以包含行内元素和块级元素，但是行内元素不能包含块级元素；
   3. 块级元素与行内元素主要是盒模型属性不同：行内元素width height 无效，margin padding上下无效；
2. 你真的了解HTML吗？

（这真是一个蛋疼的问题，可以不回答嘛）

问：display有几个值？

有17个值，但是常用的有block inline inline-block none;

CSS相关

1. 介绍所知道的CSS hack技术

CSS hack就是针对不同的浏览器不同的浏览器版本写相应的CSS code的过程，叫做CSS hack。

条件注释法、属性前缀法、选择器前缀法三种不同的方式。（妈蛋的那么多的各版本的不同，挺费脑容量啊，具体再用的时候再查）

1. 介绍CSS盒子模型

具有外边距、内边距、边框、内容属性的盒子模型。

1. CSS层叠是什么，介绍一下。

CSS层叠就是针对同一元素配置同一属性，权重高的选择器配置的值覆盖权重低的选择器配置的值。

1. 都知道那些CSS浏览器兼容问题。

内外边距、IE6边距大于实际设置值、min-height不兼容、图片默认有边距、IE中图片默认有边框、IE6和IE7设置小于10px的高度时候不受控制等

具体看收藏的文章。

JavaScript基础相关

1. HTTP的状态消息都有那些？（如200 302对应的描述）

2开头成功状态、3开头重定向、4开头请求错误、5或6开头服务器错误

1. AJAX是什么？AJAX的交互模型（流程）？AJAX跨域的解决办法？

使用javascript向服务器发出请求并处理响应而不阻塞用户的技术。

触发事件——创建对象——发送请求——服务器响应——处理返回数据

使用script标签可以跨域访问的特性来达到跨域交互的目的

1. 同步和异步的区别

同步：脚本会停留并等待服务器发送回复然后在继续

异步：脚本允许页面进行其进程并处理可能的回复

1. 什么是闭包

闭包是有权限访问另一函数作用域的变量的函数；闭包的作用：自执行函数、缓存、封装、实现面向对象中的对象

1. 什么是事件委托？

事件委托就是事件目标本身不处理事件，而是将事件处理委托给其父元素或其祖父元素。

JQuery相关

1. 你使用过那些javascript库
2. 你是否研究过你所使用的JS库或框架的源代码
3. 什么是哈希表
4. ‘undefined’变量和‘undeclared’变量分别指什么

undefined 为空，undeclared 未声明；

h5新标签以及用法

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

</script>

6、<command>   定义命令按钮  (只有ie9支持这个标签)

<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>
没觉得与button有什么区别啊

7、<datalist>     定义下拉列表（配合input使用）

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

这个应该比较下与select有什么区别:

select：5个值里面选择1个；
datalist：你可以在文本框里填值，也可以在下面5个值里选1个。

8、<details>   定义元素的细节:页面只显示summary里的内容，点击之后才显示p里的内容

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

9、<dialog>   定义对话框或窗口

<table border="1">
<tr>
  <th>一月 <dialog open>这是打开的对话窗口</dialog></th>
  <th>二月</th>
  <th>三月</th>
</tr>
<tr>
  <td>31</td>
  <td>28</td>
  <td>31</td>
</tr>
</table>

没太明白这个有什么作用

10、<embed>  定义外部交互内容或插件

<embed src="helloworld.swf" />

11、<figcaption>   定义figure元素的标题

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

12、<figure>  定义媒介

   用作文档中插图的图像：

<figure>
  <p>黄浦江上的的卢浦大桥</p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

13、<footer>   定义section或page的页脚

<footer>
  <p>Posted by: W3School</p>
  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

14、<header>  定义section或page的页眉

<header>
  <p>Posted by: W3School</p>
  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</header>

15、<keygen>  定义生成密钥

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

16、<mark>  定义有记号的文本

<p>Do not forget to buy <mark>milk</mark> today.</p>

17、<meter>  定义预定义范围内的度量

<meter value="3" min="0" max="10">十分之三</meter>

<meter value="0.6">60%</meter> 

18、<nav>  定义导航链接

<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>

19、<output>   定义输出的一些类型

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">
   =<output name="x" for="a b"></output>
</form> 

20、<progress>  定义任何类型的任务的进度 ：这个进度条和那个meter感觉没什么区别呢

 正在进行的下载：

<progress value="22" max="100"></progress> 

21、<rp>  定义若浏览器不支持ruby元素显示的内容

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

22、<rt>   定义ruby注释的解释

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

23、<ruby>  定义ruby注释

　　　　<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。

　　　　ruby 注释是中文注音或字符。

　　　　在东亚使用，显示的是东亚字符的发音。

　　　　与 <ruby> 以及 <rt> 标签一同使用：

　　　　ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

24、<section>   定义section

　　　　<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

25、<source>   定义媒介源

　　拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）：

　　<audio controls>
   　　<source src="horse.ogg" type="audio/ogg">
   　　<source src="horse.mp3" type="audio/mpeg">
 　　　　　　Your browser does not support the audio element.
　　</audio> 

26、<summary>  为<details>元素定义可见的标题

<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>

27、<time>  定义日期/时间

　　如何定义时间和日期：

　　<p>我们在每天早上 <time>9:00</time> 开始营业。</p>

　　<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

28、<track>  定义用在媒体播放器中的文本轨道

　　播放带有字幕的视频：

　　<video width="320" height="240" controls="controls">
  　　<source src="forrest_gump.mp4" type="video/mp4" />
  　　<source src="forrest_gump.ogg" type="video/ogg" />
  　　<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
  　　<track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
　　</video>

　　<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。

　　用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

29、<video>  定义视频，比如电影片段或其他视频流。

　　一段简单的 HTML5 视频：

　　<video src="movie.ogg" controls="controls">
　　您的浏览器不支持 video 标签。
　　</video>

30、<wbr>   定义视频

<p>
如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>

用法：

Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。

提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 <wbr> 元素来添加 Word Break Opportunity（单词换行时机）。

这是w3school里的所有h5新增标签

html5与html4的区别，如何一眼区分

1、更简单的doctype声明是HTML5里众多新特征之一。现在，只需要写<!doctype html>就好了。HTML5的语法兼容HTML4和XHTML1，但不兼容SGML。简短清晰明了。

2、html5新增加了一些元素：  header（头部）、footer（底部）、menu（普通的菜单）、nav（导航链接部分）、section（内容区域块，等同于div）、article（文章内容板块，等同于div）、aside（一般用于侧边栏）、hgroup（一般用于一个标语的组合）、figure（一般表示为一个单独的元素）等等，语义的标签更利于网站的seo，同时也使项目的结构更清晰

3、添加了新的功能媒体标记标签：audio、video这俩个标签用来嵌入音频与视频

4、表单的全新输入类型：email、url、number、range、date pickers、search、color

5、html5删除了一些元素：b、font、frame、center、big

6、html5新增了一个最有特点的东西：cavers （拥有多种绘制途径、矩形、圆形、字符、以及图像的方法）

7、h5   还新增了地理定位的功能：使用 getCurrentPosition() 方法来获得用户的位置  

<script>
var x=document.getElementById("demo");
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position){
x.innerHTML="Latitude: " + position.coords.latitude + 
"<br />Longitude: " + position.coords.longitude;
}
</script>

8、新增了存储功能，localstrage、seeionstrage等等

基本算法（pascal）

1.数论算法 
求两数的最大公约数 
function gcd(a,b:integer):integer; 
begin 
if b=0 then gcd:=a 
else gcd:=gcd (b,a mod B); 
end;  

求两数的最小公倍数 
function lcm(a,b:integer):integer; 
begin 
if a< b then swap(a,B); 
lcm:=a; 
while lcm mod b >0 do inc(lcm,a); 
end; 

素数的求法 
A.小范围内判断一个数是否为质数： 
function prime (n: integer): Boolean; 
var I: integer; 
begin 
for I:=2 to trunc(sqrt(n)) do 
if n mod I=0 then begin 
prime:=false; exit; 
end; 
prime:=true; 
end; 

B.判断longint范围内的数是否为素数（包含求50000以内的素数表）： 
procedure getprime; 
var 
i,j:longint; 
p:array[1..50000] of boolean; 
begin 
fillchar(p,sizeof(p),true); 
p[1]:=false; 
i:=2; 
while i< 50000 do begin 
if p[i] then begin 
j:=i*2; 
while j< 50000 do begin 
p[j]:=false; 
inc(j,i); 
end; 
end; 
inc(i); 
end; 
l:=0; 
for i:=1 to 50000 do 
if p[i] then begin 
inc(l);pr[l]:=i; 
end; 
end;{getprime} 

function prime(x:longint):integer; 
var i:integer; 
begin 
prime:=false; 
for i:=1 to l do 
if pr[i] >=x then break 
else if x mod pr[i]=0 then exit; 
prime:=true; 
end;{prime} 

2． 

3． 


4.求最小生成树 
A.Prim算法： 
procedure prim(v0:integer); 
var 
lowcost,closest:array[1..maxn] of integer; 
i,j,k,min:integer; 
begin 
for i:=1 to n do begin 
lowcost[i]:=cost[v0,i]; 
closest[i]:=v0; 
end; 
for i:=1 to n-1 do begin 
{寻找离生成树最近的未加入顶点k} 
min:=maxlongint; 
for j:=1 to n do 
if (lowcost[j]< min) and (lowcost[j]< >0) then begin 
min:=lowcost[j]; 
k:=j; 
end; 
lowcost[k]:=0; {将顶点k加入生成树} 
{生成树中增加一条新的边k到closest[k]} 
{修正各点的lowcost和closest值} 
for j:=1 to n do 
if cost[k,j]< lwocost[j] then begin 
lowcost[j]:=cost[k,j]; 
closest[j]:=k; 
end; 
end; 
end;{prim} 

B.Kruskal算法：(贪心) 
按权值递增顺序删去图中的边，若不形成回路则将此边加入最小生成树。 
function find(v:integer):integer; {返回顶点v所在的集合} 
var i:integer; 
begin 
i:=1; 
while (i< =n) and (not v in vset[i]) do inc(i); 
if i< =n then find:=i else find:=0; 
end; 

procedure kruskal; 
var 
tot,i,j:integer; 
begin 
for i:=1 to n do vset[i]:=[i];{初始化定义n个集合，第I个集合包含一个元素I} 
p:=n-1; q:=1; tot:=0; {p为尚待加入的边数，q为边集指针} 
sort; 
{对所有边按权值递增排序，存于e[I]中，e[I].v1与e[I].v2为边I所连接的两个顶点的序号，e[I].len为第I条边的长度} 
while p >0 do begin 
i:=find(e[q].v1);j:=find(e[q].v2); 
if i< >j then begin 
inc(tot,e[q].len); 
vset[i]:=vset[i]+vset[j];vset[j]:=[]; 
dec(p); 
end; 
inc(q); 
end; 
writeln(tot); 
end; 


5.最短路径 
A.标号法求解单源点最短路径： 
var 
a:array[1..maxn,1..maxn] of integer; 
b:array[1..maxn] of integer; {b[i]指顶点i到源点的最短路径} 
mark:array[1..maxn] of boolean; 

procedure bhf; 
var 
best,best_j:integer; 
begin 
fillchar(mark,sizeof(mark),false); 
mark[1]:=true; b[1]:=0;{1为源点} 
repeat 
best:=0; 
for i:=1 to n do 
If mark[i] then {对每一个已计算出最短路径的点} 
for j:=1 to n do 
if (not mark[j]) and (a[i,j] >0) then 
if (best=0) or (b[i]+a[i,j]< best) then begin 
best:=b[i]+a[i,j]; best_j:=j; 
end; 
if best >0 then begin 
b[best_j]:=best；mark[best_j]:=true; 
end; 
until best=0; 
end;{bhf} 

B.Floyed算法求解所有顶点对之间的最短路径： 
procedure floyed; 
begin 
for I:=1 to n do 
for j:=1 to n do 
if a[I,j] >0 then p[I,j]:=I else p[I,j]:=0; {p[I,j]表示I到j的最短路径上j的前驱结点} 
for k:=1 to n do {枚举中间结点} 
for i:=1 to n do 
for j:=1 to n do 
if a[i,k]+a[j,k]< a[i,j] then begin 
a[i,j]:=a[i,k]+a[k,j]; 
p[I,j]:=p[k,j]; 
end; 
end; 

C. Dijkstra 算法： 
类似标号法，本质为贪心算法。 
var 
a:array[1..maxn,1..maxn] of integer; 
b,pre:array[1..maxn] of integer; {pre[i]指最短路径上I的前驱结点} 
mark:array[1..maxn] of boolean; 
procedure dijkstra(v0:integer); 
begin 
fillchar(mark,sizeof(mark),false); 
for i:=1 to n do begin 
d[i]:=a[v0,i]; 
if d[i]< >0 then pre[i]:=v0 else pre[i]:=0; 
end; 
mark[v0]:=true; 
repeat {每循环一次加入一个离1集合最近的结点并调整其他结点的参数} 
min:=maxint; u:=0; {u记录离1集合最近的结点} 
for i:=1 to n do 
if (not mark[i]) and (d[i]< min) then begin 
u:=i; min:=d[i]; 
end; 
if u< >0 then begin 
mark[u]:=true; 
for i:=1 to n do 
if (not mark[i]) and (a[u,i]+d[u]< d[i]) then begin 
d[i]:=a[u,i]+d[u]; 
pre[i]:=u; 
end; 
end; 
until u=0; 
end; 

D.计算图的传递闭包 
Procedure Longlink; 
Var 
T:array[1..maxn,1..maxn] of boolean; 
Begin 
Fillchar(t,sizeof(t),false); 
For k:=1 to n do 
For I:=1 to n do 
For j:=1 to n do T[I,j]:=t[I,j] or (t[I,k] and t[k,j]); 
End; 


6.0-1背包问题（部分背包问题可有贪心法求解：计算Pi/Wi) 
数据结构： 
w[i]:第i个背包的重量； 
p[i]:第i个背包的价值； 
(1)0-1背包： 每个背包只能使用一次或有限次(可转化为一次)： 
A.求最多可放入的重量。 
NOIP2001 装箱问题 
有一个箱子容量为v(正整数，o≤v≤20000)，同时有n个物品(o≤n≤30)，每个物品有一个体积 (正整数)。要求从 n 个物品中，任取若千个装入箱内，使箱子的剩余空间为最小。 
l 搜索方法 
procedure search(k,v:integer); {搜索第k个物品，剩余空间为v} 
var i,j:integer; 
begin 
if v< best then best:=v; 
if v-(s[n]-s[k-1]) >=best then exit; {s[n]为前n个物品的重量和} 
if k< =n then begin 
if v >w[k] then search(k+1,v-w[k]); 
search(k+1,v); 
end; 
end; 

l DP 
F[I,j]为前i个物品中选择若干个放入使其体积正好为j的标志，为布尔型。 
实现:将最优化问题转化为判定性问题 
F[I,j]=f[i-1,j-w[i]] (w[I]< =j< =v) 边界：f[0,0]:=true. 
For I:=1 to n do 
For j:=w[I] to v do F[I,j]:=f[I-1,j-w[I]]; 
优化：当前状态只与前一阶段状态有关，可降至一维。 
F[0]:=true; 
For I:=1 to n do begin 
F1:=f; 
For j:=w[I] to v do 
If f[j-w[I]] then f1[j]:=true; 
F:=f1; 
End; 

B.求可以放入的最大价值。 
F[I,j]= 


C.求恰好装满的情况数。 

　

(2)每个背包可使用任意次： 
A.求最多可放入的重量。 
状态转移方程为 
f[I,j]=max{f[i-w[j] 

　


B.求可以放入的最大价值。 
USACO 1.2 Score Inflation 
进行一次竞赛，总时间T固定，有若干种可选择的题目，每种题目可选入的数量不限，每种题目有一个ti（解答此题所需的时间）和一个si（解答此题所得的分数），现要选择若干题目，使解这些题的总时间在T以内的前提下，所得的总分最大，求最大的得分。 
*易想到： 
f[i,j] = max { f [i- k*w[j], j-1] + k*v[j] } (0< =k< = i div w[j]) 
其中f[i,j]表示容量为i时取前j种背包所能达到的最大值。 
*优化： 
Begin 
FillChar(problem,SizeOf(problem),0); 
Assign(Input,'inflate.in'); 
Reset(Input); 
Readln(M,N); 
For i:=1 To N Do 
With problem[i] Do 
Readln(point,time); 
Close(Input); 

FillChar(f,SizeOf(f),0); 
For i:=1 To M Do 
For j:=1 To N Do 
If i-problem[j].time >=0 Then 
Begin 
t:=problem[j].point+f[i-problem[j].time]; 
If t >f[i] Then f[i]:=t; 
End; 

Assign(Output,'inflate.out'); 
Rewrite(Output); 
Writeln(f[M]); 
Close(Output); 
End. 
C.求恰好装满的情况数。 
Ahoi2001 Problem2 
求自然数n本质不同的质数和的表达式的数目。 
思路一，生成每个质数的系数的排列，在一一测试，这是通法。 
procedure try(dep:integer); 
var i,j:integer; 
begin 
cal; {此过程计算当前系数的计算结果，now为结果} 
if now >n then exit; {剪枝} 
if dep=l+1 then begin {生成所有系数} 
cal; 
if now=n then inc(tot); 
exit; 
end; 
for i:=0 to n div pr[dep] do begin 
xs[dep]:=i; 
try(dep+1); 
xs[dep]:=0; 
end; 
end; 

思路二，递归搜索效率较高 
procedure try(dep,rest:integer); 
var i,j,x:integer; 
begin 
if (rest< =0) or (dep=l+1) then begin 
if rest=0 then inc(tot); 
exit; 
end; 
for i:=0 to rest div pr[dep] do 
try(dep+1,rest-pr[dep]*i); 
end; 

思路三：可使用动态规划求解 
USACO1.2 money system 
V个物品，背包容量为n，求放法总数。 
转移方程： 

Procedure update; 
var j,k:integer; 
begin 
c:=a; 
for j:=0 to n do 
if a[j] >0 then 
for k:=1 to n div now do 
if j+now*k< =n then inc(c[j+now*k],a[j]); 
a:=c; 
end; 
{main} 
begin 
read(now); {读入第一个物品的重量} 
i:=0; {a[i]为背包容量为i时的放法总数} 
while i< =n do begin 
a[i]:=1; inc(i,now); end; {定义第一个物品重的整数倍的重量a值为1，作为初值} 
for i:=2 to v do 
begin 
read(now); 
update; {动态更新} 
end; 
writeln(a[n]);

7.排序算法 
A.快速排序： 
procedure sort(l,r:integer); 
var i,j,mid:integer; 
begin 
i:=l;j:=r; mid:=a[(l+r) div 2]; {将当前序列在中间位置的数定义为中间数} 
repeat 
while a[i]< mid do inc(i); {在左半部分寻找比中间数大的数} 
while mid< a[j] do dec(j);{在右半部分寻找比中间数小的数} 
if i< =j then begin {若找到一组与排序目标不一致的数对则交换它们} 
swap(a[i],a[j]); 
inc(i);dec(j); {继续找} 
end; 
until i >j; 
if l< j then sort(l,j); {若未到两个数的边界，则递归搜索左右区间} 
if i< r then sort(i,r); 
end;{sort}  
　

B.插入排序： 
procedure insert_sort(k,m:word); {k为当前要插入的数，m为插入位置的指针} 
var i:word; p:0..1; 
begin 
p:=0; 
for i:=m downto 1 do 
if k=a[i] then exit; 
repeat 
If k >a[m] then begin 
a[m+1]:=k; p:=1; 
end 
else begin 
a[m+1]:=a[m]; dec(m); 
end; 
until p=1; 
end;{insert_sort} 
l 主程序中为： 
a[0]:=0; 
for I:=1 to n do insert_sort(b[I],I-1); 

C.选择排序： 
procedure sort; 
var i,j,k:integer; 
begin 
for i:=1 to n-1 do begin 
k:=i; 
for j:=i+1 to n do 
if a[j]< a[k] then k:=j; {找出a[I]..a[n]中最小的数与a[I]作交换} 
if k< >i then begin 
a[0]:=a[k];a[k]:=a[i];a[i]:=a[0]; 
end; 
end; 
end; 

D. 冒泡排序 
procedure sort; 
var i,j,k:integer; 
begin 
for i:=n downto 1 do 
for j:=1 to i-1 do 
if a[j] >a[i] then begin 
a[0]:=a[i];a[i]:=a[j];a[j]:=a[0]; 
end; 
end; 

E.堆排序： 
procedure sift(i,m:integer);{调整以i为根的子树成为堆,m为结点总数} 
var k:integer; 
begin 
a[0]:=a[i]; k:=2*i;{在完全二叉树中结点i的左孩子为2*i,右孩子为2*i+1} 
while k< =m do begin 
if (k< m) and (a[k]< a[k+1]) then inc(k);{找出a[k]与a[k+1]中较大值} 
if a[0]< a[k] then begin a[i]:=a[k];i:=k;k:=2*i; end 
else k:=m+1; 
end; 
a[i]:=a[0]; {将根放在合适的位置} 
end; 

procedure heapsort; 
var 
j:integer; 
begin 
for j:=n div 2 downto 1 do sift(j,n); 
for j:=n downto 2 do begin 
swap(a[1],a[j]); 
sift(1,j-1); 
end; 
end; 

F. 归并排序 
{a为序列表，tmp为辅助数组} 
procedure merge(var a:listtype; p,q,r:integer); 
{将已排序好的子序列a[p..q]与a[q+1..r]合并为有序的tmp[p..r]} 
var I,j,t:integer; 
tmp:listtype; 
begin 
t:=p;i:=p;j:=q+1;{t为tmp指针，I,j分别为左右子序列的指针} 
while (t< =r) do begin 
if (i< =q){左序列有剩余} and ((j >r) or (a[i]< =a[j])) {满足取左边序列当前元素的要求} 
then begin 
tmp[t]:=a[i]; inc(i); 
end 
else begin 
tmp[t]:=a[j];inc(j); 
end; 
inc(t); 
end; 
for i:=p to r do a[i]:=tmp[i]; 
end;{merge} 

procedure merge_sort(var a:listtype; p,r: integer); {合并排序a[p..r]} 
var q:integer; 
begin 
if p< >r then begin 
q:=(p+r-1) div 2; 
merge_sort (a,p,q); 
merge_sort (a,q+1,r); 
merge (a,p,q,r); 
end; 
end; 
{main} 
begin 
merge_sort(a,1,n); 
end. 


G.基数排序 
思想：对每个元素按从低位到高位对每一位进行一次排序 


8.高精度计算 
A. 
B. 
C. 
D. 

9.树的遍历顺序转换 
A. 已知前序中序求后序 
procedure Solve(pre,mid:string); 
var i:integer; 
begin 
if (pre='') or (mid='') then exit; 
i:=pos(pre[1],mid); 
solve(copy(pre,2,i),copy(mid,1,i-1)); 
solve(copy(pre,i+1,length(pre)-i),copy(mid,i+1,length(mid)-i)); 
post:=post+pre[1]; {加上根，递归结束后post即为后序遍历} 
end; 

B.已知中序后序求前序 
procedure Solve(mid,post:string); 
var i:integer; 
begin 
if (mid='') or (post='') then exit; 
i:=pos(post[length(post)],mid); 
pre:=pre+post[length(post)]; {加上根，递归结束后pre即为前序遍历} 
solve(copy(mid,1,I-1),copy(post,1,I-1)); 
solve(copy(mid,I+1,length(mid)-I),copy(post,I,length(post)-i)); 
end; 

C.已知前序后序求中序 

function ok(s1,s2:string):boolean; 
var i,l:integer; p:boolean; 
begin 
ok:=true; 
l:=length(s1); 
for i:=1 to l do begin 
p:=false; 
for j:=1 to l do 
if s1[i]=s2[j] then p:=true; 
if not p then begin ok:=false;exit;end; 
end; 
end; 

procedure solve(pre,post:string); 
var i:integer; 
begin 
if (pre='') or (post='') then exit; 
i:=0; 
repeat 
inc(i); 
until ok(copy(pre,2,i),copy(post,1,i)); 
solve(copy(pre,2,i),copy(post,1,i)); 
midstr:=midstr+pre[1]; 
solve(copy(pre,i+2,length(pre)-i-1),copy(post,i+1,length(post)-i-1)); 
end; 

10.求图的弱连通子图(DFS) 
procedure dfs ( now,color: integer); 
begin 
for i:=1 to n do 
if a[now,i] and c[i]=0 then begin 
c[i]:=color; 
dfs(I,color); 
end; 
end; 


11.拓扑排序 
寻找一数列，其中任意连续p项之和为正，任意q 项之和为负，若不存在则输出NO. 


12.进制转换 
A.整数任意正整数进制间的互化 

NOIP1996数制转换 
设字符串A$的结构为: A$='mp' 
其中m为数字串(长度< =20),而n,p均为1或2位的数字串(其中所表达的内容在2-10之间) 
程序要求:从键盘上读入A$后(不用正确性检查),将A$中的数字串m(n进制)以p进制的形式输出. 
例如:A$='48< 10 >8' 
其意义为:将10进制数48,转换为8进制数输出. 
输出结果:48< 10 >=60< 8 > 

B.实数任意正整数进制间的互化 
C.负数进制： 
NOIP2000 
设计一个程序，读入一个十进制数的基数和一个负进制数的基数，并将此十进制数转换为此负 进制下的数：-R∈{-2，-3，-4,....-20} 

13.全排列与组合的生成 
排列的生成：（1..n） 
procedure solve(dep:integer); 
var 
i:integer; 
begin 
if dep=n+1 then begin writeln(s);exit; end; 
for i:=1 to n do 
if not used[i] then begin 
s:=s+chr(i+ord('0'));used[i]:=true; 
solve(dep+1); 
s:=copy(s,1,length(s)-1); used[i]:=false; 
end; 
end; 
组合的生成(1..n中选取k个数的所有方案) 
procedure solve(dep,pre:integer); 
var 
i:integer; 
begin 
if dep=k+1 then begin writeln(s);exit; end; 
for i:=1 to n do 
if (not used[i]) and (i >pre) then begin 
s:=s+chr(i+ord('0'));used[i]:=true; 
solve(dep+1,i); 
s:=copy(s,1,length(s)-1); used[i]:=false; 
end; 
end; 

　

14 递推关系 
计算字串序号模型 
USACO1.2.5 StringSobits 
长度为N (N< =31)的01串中1的个数小于等于L的串组成的集合中找出按大小排序后的第I个01串。 


数字划分模型 
*NOIP2001数的划分 
将整数n分成k份，且每份不能为空，任意两种分法不能相同(不考虑顺序)。 
d[0,0]:=1; 
for p:=1 to n do 
for i:=p to n do 
for j:=k downto 1 do inc(d[i,j],d[i-p,j-1]); 
writeln(d[n,k]); 

*变形1：考虑顺序 
d[ i, j] : = d [ i-k, j-1] (k=1..i) 
*变形2：若分解出来的每个数均有一个上限m 
d[ i, j] : = d [ i-k, j-1] (k=1..m) 


15.算符优先法求解表达式求值问题 
const maxn=50; 
var 
s1:array[1..maxn] of integer; {s1为数字栈} 
s2:array[1..maxn] of char; {s2为算符栈} 
t1,t2:integer; {栈顶指针} 

procedure calcu; 
var 
x1,x2,x:integer; 
p:char; 
begin 
p:=s2[t2]; dec(t2); 
x2:=s1[t1]; dec(t1); 
x1:=s1[t1]; dec(t1); 
case p of 
'+':x:=x1+x2; 
'-':x:=x1-x2; 
'*':x:=x1*x2; 
'/':x:=x1 div 2; 
end; 
inc(t1);s1[t1]:=x; 
end; 

procedure work; 
var c:char;v:integer; 
begin 
t1:=0;t2:=0; 
read&copy;; 
while c< >';' do 
case c of 
'+','-': begin 
while (t2 >0) and (s2[t2]< >'(') do calcu; 
inc(t2);s2[t2]:=c; 
read&copy;; 
end ; 
'*','/':begin 
if (t2 >0) and ((s2[t2]='*') or (s2[t2]='/')) then calcu; 
inc(t2);s2[t2]:=c; 
read&copy;; 
end; 
'(':begin inc(t2); s2[t2]:=c; read&copy;; end; 
')':begin 
while s2[t2]< >'(' do calcu; 
dec(t2); read&copy;; 
end; 
'0'..'9':begin 
v:=0; 
repeat 
v:=10*v+ord&copy;-ord('0'); 
read&copy;; 
until (c< '0') or (c >'9'); 
inc(t1); s1[t1]:=v; 
end; 
end; 
while t2 >0 do calcu; 
writeln(s1[t1]); 
end;

16.查找算法 
折半查找 
function binsearch(k:keytype):integer; 
var low,hig,mid:integer; 
begin 
low:=1;hig:=n; 
mid:=(low+hig) div 2; 
while (a[mid].key< >k) and (low< =hig) do begin 
if a[mid].key >k then hig:=mid-1 
else low:=mid+1; 
mid:=(low+hig) div 2; 
end; 
if low >hig then mid:=0; 
binsearch:=mid; 
end;  
树形查找 
二叉排序树：每个结点的值都大于其左子树任一结点的值而小于其右子树任一结点的值。 
查找 
function treesrh(k:keytype):pointer; 
var q:pointer; 
begin 
q:=root; 
while (q< >nil) and (q^.key< >k) do 
if k< q^.key then q:=q^.left 
else q:=q^.right; 
treesrh:=q; 
end; 


17．KMP算法 

18．贪心 
*会议问题 
（1） n个活动每个活动有一个开始时间和一个结束时间，任一时刻仅一项活动进行，求满足活动数最多的情况。 
解：按每项活动的结束时间进行排序，排在前面的优先满足。 

（2）会议室空闲时间最少。 

（3）每个客户有一个愿付的租金，求最大利润。 

（4）共R间会议室，第i个客户需使用i间会议室，费用相同，求最大利润。 

附录1 常用技巧 
1.带权中位数 
我国蒙古大草原上有N（N是不大于100的自然数）个牧民定居点P1（X1，Y1）、P2（X2，Y2）、 …Pn（Xn，Yn），相应地有关权重为Wi，现在要求你在大草原上找一点P（Xp，Yp），使P点到任 一点Pi的距离Di与Wi之积之和为最小。 　　 
　　 即求 D=W1*D1+W2*D2+…+Wi*Di+…+Wn*Dn 有最小值 　　 
结论：对x与y两个方向分别求解带权中位数，转化为一维。 
设最佳点p为点k，则点k满足： 
令W为点k到其余各点的带权距离之和，则 
sigema( i=1 to k-1) Wi*Di < = W/2 
sigema( i=k+1 to n) Wi*Di < = W/2 
同时满足上述两式的点k即为带权中位数。 

2．求一序列中连续子序列的最大和 
begin 
maxsum:=-maxlongint; 
sum:=0; 
for i:=1 to n do begin 
inc(sum,data[i]); 
if sum >maxsum then maxsum:=sum; 
if sum< 0 then sum:=0; 
end; 
writeln(maxsum); 
end;