整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Java-WEB考点

、 HTTP协议请求报文以及响应报文

2、 JAVA Socket编程 Socket以及ServerSocket

3、 WEB服务器概念 Tomcat服务器目录结构和基本配置server.xml文件

4、 什么是Servlet? 怎样实现一个自定义Servlet?

5、 Servlet基本配置

6、 ServletAPI 包括HttpServlet、HttpServletRequest、HttpServletResponse、ServletConfig、ServletContext

7、 service方法以及doGet和doPost方法

8、 servlet生命周期

9、 怎样获取网页提交的参数?

10、 会话HttpSession和Cookie

11、 调用一个已定义好的Servlet有哪些方式

12、 表单提交数据到Servlet 中文乱码处理

13、 客户端页面向服务端servlet传递参数有哪些方式

14、 JSP的运行原理以及基本语法

15、 JSP隐式对象

16、 JavaScript基本语法

17、 JavaScript中的对象

18、 JavaScript与AJAX

19、 基于对象的Javascript以及继承的实现



客户端/服务器的优势在于:

服务器和客户端分摊任务,分别负责部分处理工作;

服务器可以同时为多台客户端服务;

多个客户端可以同时访问服务器上的相同数据。


IP

网络ID:网络ID标识了计算机或网络设备所在的网段;

主机ID:主机ID标识了特定的主机或网络设备


特殊IP地址:

0.0.0.0和127.0.0.1就是两个此类地址,第一个称为缺省路由,后一个是环回地址;

127.0.0.1被保留用于用户主机的本地IP话务,它被分配给一个特殊接口,即起到闭合电路作用的环回接口


端口

端口使用一个16位的数字来表示,它的范围是0~65535,1024以下的端口号保留给预定义的服务,如:http使用80端口;


java.net包

java.net包可以实现Java的网络功能,


InetAddress:

InetAddress getByName(String host) 在给定主机名的情况下确定主机的 IP 地址

注:host可以是主机名 IP地址 或者域名

InetAddress getLocalHost() 返回本地主机的InetAddress对象

InetAddress[] getAllByName(String host) 在给定主机名的情况下,根据系统上配置的名称服务返回其 IP 地址所组成的数组可能一个主机名对应多个服务器(负载均衡)


JAVA Socket编程

socket用于描述IP地址和端口,应用程序通过套接字向网络发出请求或者应答网络请求;

套接字会因为网络的连接中断而失效,所以对它的操作都有可能抛出IOException

Socket以及ServerSocket

客户端流程:向服务端请求,获取输入输出流,进行收发数据,关闭io流,关闭套接字


服务器流程:创建套接字,获得客户端请求,获得输入输出流,收发信息,关闭io流,关闭套接字

包装以提高效率(用BufferedReader包装输入流,用PrintWriter包装输出流)

BufferedReader in = new BufferedReader(new InputStreamReader(socket.getInputStream()));


PrintWriter(OutputStream out, boolean autoFlush) 利用现有的OutputStream构造格式打印流,由参数autoFlush指定是否带自动刷新缓存的功能


进程与线程的区别

进程是指系统中正在运行中的应用程序,它拥有自己独立的内存空间;

线程是指进程中一个执行流程,一个进程中允许同时启动多个线程,他们分别执行不同的任务;

线程与进程的主要区别在于:每个进程都需要操作系统为其分配独立的内存地址空间,而同一进程中的所有线程在同一块地址空间中,这些线程可以共享数据,因此线程间的通信比较简单,消耗的系统开销也相对较小。


在Java中实现线程有两种方式,分别是:

扩展java.lang.Thread类

实现java.lang.Runnable接口


线程start()调用run()方法,重写的是run()


线程生命周期


线程状态:

新建状态(New):使用new关键字创建线程对象,仅仅被分配了内存;

就绪状态(Ready):线程对象被创建后,等待它的start方法被调用,以获得CPU的使用权;

运行状态(Running):执行run方法,此时的线程的对象正占用CPU;

睡眠状态(Sleeping):调用sleep方法,线程被暂停,睡眠时间结束后,线程回到就绪状态,睡眠状态的线程不占用CPU;

死亡状态(Dead):run方法执行完毕后,线程进入死亡状态;

阻塞状态(Blocked):线程由于某些事件(如等待键盘输入)放弃CPU,暂停运行,直到线程重新进入就绪状态,才有机会转到运行状态;


Yield()和join()的不同


HTTP协议

HTTP (HyperText Transfer Protocol)协议即超文本传输协议,是基于网络应用层的协议,它建立在TCP/IP协议的基础上;

该协议使用可靠的TCP连接,默认端口是80;

HTTP协议基于客户端/服务器模式,客户端主动发出HTTP请求,服务器接收HTTP请求,返回HTTP响应结果。


HTTP协议是指超文本传输协议,专门用于在Internet上传输信息的协议,目前的版本是1.1;

HTTP是应用层的协议,它基于请求/响应模式;

HTTP协议默认使用80端口进行通讯;

HTTP协议是无状态的的协议。


请求报文实例:

请求报文是指客户端浏览器向网络服务器请求页面时,发送到服务器端的字符串,必须符合HTTP协议的格式要求,它可能包含如下组成部分:

GET /index.html HTTP/1.1

Accept: image/gif, image/x-xbitmap, image/jpeg, …, */*

Accept-Language: zh-cn

UA-CPU: x86

Accept-Encoding: gzip, deflate

User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)

Host: www.163.com:80

Connection: Keep-Alive

<空行>


请求报文中的大部分项目是可选的,只有GET和Host部分是必需的;

GET部分的格式是:

GET<空格>/[请求的URL]<空格>HTTP/协议版本号

如:GET /index.html HTTP/1.1

Host部分的格式是:

Host:<空格>服务器域名或IP地址:端口号

如:Host: www.newer.com.cn:80

换言之,请求报文中只要包含以上两部分,就可以向网络站点服务器请求到页面。


//拼凑请求报文

String strHttp = "GET / HTTP/1.1\r\n";

strHttp += "Host: " + hostName + ":" + WEB_PORT + "\r\n";


响应报文实例:

响应报文是指网络服务器收到来自客户端的请求后,发回到客户端的字符串,它用来告诉客服端:服务器已经接受请求,随后跟随的是被请求的网页内容;

响应报文可能包含如下组成部分:

HTTP/1.1 200 OK

Date: Sat, 11 Aug 2007 11:58:37 GMT

Server: Apache/1.3.37(Unix)

Accept-Ranges: bytes

Content-Length: 11503

Content-Type: text/html

<空行>


响应报文中也有两部分是必需的:

HTTP/协议版本号<空格>状态码<空格>OK

状态码是一个3位整数,用来表示不同的状态,200表示响应成功,

如:HTTP/1.1 200 OK

状态码的具体描述请参阅本课件最后的附表。

Content-Type:<空格>text/html;<空格>charset=字符集编码

用来描述服务器发回响应的文件类型以及字符集编码,text/html说明是文本文件或超文本文件,

如:Content-Type: text/html; charset=GB2312


模拟:

out.println("Http/1.1 200 OK");

out.println("Content-Type:text/html; charset=GB2312");


状态码:


Web应用的优势

相对于传统的C/S结构(Client客户端/Server服务器)的应用程序而言,B/S结构的Web应用程序具备以下优势:

集中部署,无需安装客户端程序;

集中管理,业务逻辑在服务端进行维护;

数据共享,所有客户端访问同一服务器的数据;

覆盖面广,只要有Internet覆盖的区域都可通过浏览器享受服务;

更强的平台无关性,不必关心客户端的软硬件平台,只要遵循HTTP协议,都可获得支持。


WEB服务器概念

Web服务器可以解析(handles)HTTP协议。当Web服务器接收到一个HTTP请求(request),会返回一个HTTP响应(response),例如送回一个HTML页面。为了处理一个请求(request),Web服务器可以响应(response)一个静态页面或图片,进行页面跳转(redirect),或者把动态响应(dynamic response)的产生委托(delegate)给一些其它的程序例如CGI脚本,JSP(JavaServer Pages)脚本,servlets,ASP(Active Server Pages)脚本,服务器端(server-side)JavaScript,或者一些其它的服务器端(server-side)技术。无论它们(译者注:脚本)的目的如何,这些服务器端(server-side)的程序通常产生一个HTML的响应(response)来让浏览器可以浏览。



Tomcat服务器目录结构和基本配置server.xml文件

博客http://blog.csdn.net/mycomein/article/details/45798161


tomcat环境变量的设置:

首先添加TOMCAT_HOME的环境变量,值为d:\Program Files\tomcat7。

添加CATALINA_HOME环境变量,值为%TOMCAT_HOME%,

添加CATALINA_BASE环境变量,值为%TOMCAT_HOME%。


Tomcat是以面向对象的方式运作的;在执行期间,它会基于配置文件的设定动态地组建其对象结构。

Server.xml文件中的每个主要元素都会创建软件“对象”、排序及进程管道中设置的这些元素嵌套方,让您能执行过滤、分组等工作。


什么是Servlet? 怎样实现一个自定义Servlet?

Servlet是用Java语言编写的程序,它运行在Web服务器上,用以处理来自客户端的请求;

它一般会把处理的结果以为HTML的形式返回,在客户端形成动态网页

Servlet的优点

Servlet运行在Web服务器中,可以扩展服务器的功能;

Servlet可以和其他资源交互,从而生成返回给客户端响应的内容,即动态网页;

使用Java编写,所以能够跨平台;

Java的所有优点都可以在Servlet中体现;

Servlet很安全,因为访问Servlet的唯一途径是通过服务器;

只要符合Servlet规范的Servlet容器都可以运行Servlet。


自定义servlet

一个类继承HttpServlet,重写doGet()和doPost()方法,如果需要看到创建和销毁的过程,可以重写init()和destroy()方法。

Servlet基本配置

在web.xml中加入servlet的配置:

<servlet>

<servlet-name>LoginServlet</servlet-name>

<servlet-class>com.tkclm.servlet.LoginServlet</servlet-class>

</servlet

<servlet-mapping>

<servlet-name>LoginServlet</servlet-name>

<url-pattern>/login</url-pattern>

</servlet-mapping>将action与class对应起来


ServletAPI 包括HttpServlet、HttpServletRequest、HttpServletResponse、ServletConfig、ServletContext

HttpServletRequest


HttpServletResponse


Javaweb容器的四种作用域

几乎所有web应用容器都提供了四种类似Map的结构:application session request page,Jsp或者Servlet通过向着这四个对象放入数据,从而实现Jsp和Servlet之间数据的共享。

application:整个应用 对应servlet中ServletContext

session:会话    对应servlet中HttpSession

request:一次请求  对应servlet中的HttpServletRequest

page:当前页面

ServletConfig:此接口定义Servlet配置对象,以便于容器将信息传递给Servlet。

ServletContext:此接口定义了一组方法,用于Servlet与容器进行通信。

service方法以及doGet和doPost方法、

public void service(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException

service方法是接口中的方法,servlet容器把所有请求发送到该方法,该方法默认行为是转发http请求到doXXX方法中,如果你重载了该方法,默认操作被覆盖,不再进行转发操作!此方法用来调度客户端的请求,API文档中明确规定,请勿重写该方法

servlet生命周期


怎样获取网页提交的参数?

①String str=request.getParameter("参数名称")方法可以获得参数值。

对于复选框类的数据,可以通过
②String[] str=request.getParameterValues("参数名称")方法获得。

会话HttpSession和Cookie

Cookie通过在客户端记录信息确定用户身份Session通过在服务器端记录信息确定用户身份。Cookie由服务器产生,给客户端颁发的通行证,每一个Cookie只能保存一个变量,

若需要修改(包括删除)需要服务器重新颁发Cookie。

会话对象(它主要解决了HTTP协议是无状态的问题。)

所谓的会话是指:在一段时间内,某客户端与服务器之间的一连串的请求与响应;

会话对象可以使用户访问一个站点的多个页面时共享信息;

javax.servlet.http.HttpSession接口用来提供会话对象,如果我们在程序中需要操作会话,就可以使用它;

可以通过HttpServletRequest的getSession方法获得(或创建)HttpSession对象。


调用一个已定义好的Servlet有哪些方式

发送请求(包括表单() a标签 js的)重定向(重定向跟转发)

重定向:response.sendRedirect("success.jsp");
r转发:equest.getRequestDispatcher("success.jsp").forward(request,response);
1.转发在服务器端完成的;重定向是在客户端完成的
2.转发的速度快;重定向速度慢
3.转发的是同一次请求;重定向是两次不同请求
★4.转发不会执行转发后的代码;重定向会执行重定向之后的代码
★5.转发地址栏没有变化;重定向地址栏有变化
6.转发必须是在同一台服务器下完成;重定向可以在不同的服务器下完成


表单提交数据到Servlet 中文乱码处理

可以通过字符集转码来解决此问题:

对于get

new String(request.getParameter("name").getBytes("ISO-8859-1"), "UTF-8");

对于post

request.setCharacterEncoding("UTF-8");

客户端页面向服务端servlet传递参数有哪些方式

表单

a标签

Ajax即js

<jsp:param>

<%setAttributr();%>

JSP的运行原理以及基本语法

Jsp执行过程:


JSP 页面内容


JSP元素包括JSP脚本元素(包括注释,声明,表达式,scriptlet),指令元素(page,include,taglib),动作元素。


Jsp声明:

需求:某系统计算的金额中有两种形式,一种是带有两位小数的,另一种是整数,现在要求你在JSP页面将不带小数的金额转换为带两位小数的金额。

<%

String trans(String money){

Int index = money.indexOf(“.”);

If(index == -1){

Money = money +”.00”;

}

Retrun money;

}

%>

<%=trans(money)%>

Jsp注释<%-- comment--%>>不会显示在网页上,html<!-- comment-->注释会显示在网页中


Jsp指令包括 page,include,taglib

例:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ include file="../jsp/Header.jsp"%>

格式:<%@ 指令名称 属性1="属性值1" 属性2="属性值2" … 属性n="属性值n"%>


l page 指令用于设置JSP 页面的属性,这个属性将被用于和容器通信

<%@ page %>指令作用于整个JSP页面,同样包括静态的包含文件。

无论你把<% @ page %>指令放在JSP的文件的哪个地方,它的作用范围都是整个JSP页面。

[ language=“java” ]

主要指定JSP容器要用什么语言来编译JSP的元素

[ import=“{package.class | package.*}, ...” ]

JSP程序可以使用哪些包

[pageEncoding = “UTF-8”]

Jsp程序用什么编码格式编码


l include指令

用来在JSP文件被编译时导入一个指定的文件,语法形式

<%@ include file = ”relativeURLspec” %>

include 指令告诉编译器在编译当前的JSP程序时,将由relativeURLspec所指定的外部文件代码插入到include编译指令所在的位置,并把它作为当前JSP程序的一部分编译.如果被嵌入文件在包含它们的主JSP程序被装载到内存之后被修改,那么主JSP程序连同被嵌入的文件将在下一次请求产生时被重新编译.

这个包含的过程是静态的,而包含的文件可以是HTML文件、JSP页面、文本文件或是一段java程序


l Taglib指令

taglib 指令允许用户创建自定义标签 jstl

总结:

JSP 脚本由三个元素组成,即 JSP 表达式、JSP Scriptlet 和 JSP 指令

JSP 表达式包括在 <%= %>内; Scriptlet 包含在<% %>内;声明包含在<%! %>内

JSP 指令共有三种类型,即 page、include 和 taglib。JSP 指令包括在 <%@ 和 %>内

page 指令用于设置 JSP 页面的属性;include 指令用于在 JSP 页面嵌入其他文件

JSP隐式对象


l request表示客户端对网页的请求

l response实现 javax.servlet.http.HttpServletResponse 接口使用 HTTP 协议将响应发送给客户端

l out表示输出流

l Session

l Application 表示 JSP 页面所属的应用程序

l pageContext使用户可以访问页面作用域中定义的所有隐式对象它的作用范围是在同一页面

l Page使用 page 对象可以访问 Servlet 类的所有变量和方法

l config实现javax.servlet.ServletConfig接口,表示Servlet 的配置,其常用方法有:

getInitParameter() 获取初始化的参数

getServletContext() 获取环境

getServletName() 获取Servlet名字

l exception对象用于处理 JSP 页面中的错误

JavaScript基本语法

Js特点:脚本语言,基于对象,事件驱动,平台无关


将JavaScript嵌入网页(三种方式):

1.使用 <script>…</script> 标签将语句嵌入文档

2.将 外部JavaScript 源文件链接到 html 文档中

<script src= "test.js"></script>

可使多个网页共享一个脚本文件内的代码

一般在其中定义一系列在多个网页中都可能要用到的函数

3.作为网页元素的事件处理程序,当事件触发时自动运行

<marquee onmouseover=“this.stop()”>


JavaScript基本语法部分:

语句:一条由计算机完成的、帮助你达到某种目的的指令,JavaScript中的每一行都可认为是一条语句

变量:一个代表某个值的名字就是变量

表达式:A-1+B 就是表达式

函数:具有一定功能的程序段


数据类型:


变量

JS是弱类型的语言,即声明变量时不需指定数据类型,为它赋值时其类型才确定,而且再次为其赋值可改变它的数据类型.

变量的命名: 只能包含数字,字母,下划线("_"),但不能以数字开头,不能是保留字(关键字)

JS区分大小写

用var声明变量


函数的声明与调用

方式一、

function 函数名([参数[,参数...]]){
<语句组>
[return <表达式>;]
}

方式二、

函数名 = function ([参数[,参数...]]) {

}

方式三、(较不常用)

Function类

函数名 = new Function ([“参数名”[,“参数名”...]],“函数体”)


arguments对象

1:arguments是收到的实参副本
  在词法分析中, 首先按形参形成AO的属性,值为undefined
  当实参传来时, 再修改AO的相应属性.
  2:并把所有收到实参收集起来,放到一个arguments对象里
  t(a,b,c){},
  调用时: t(1,2,3,4,5) 5个参数
  此时 , AO属性只有a,bc,3个属性, arguments里有1,2,3,4,5, 所有的值

  对于超出形参个数之外的实参, 可以通过arguments来获得
  3:arguments 的索引 从 0, 1,2,....递增,与实参逐个对应
  4:arguments.length 属性代表实参的个数
  5:arguments一定不是数组, 是长的比较像数组的一个对象,虽然也有length属性
  6:arguments每个函数都会有,因此,arguemnts只会在内部找自身的arguments,
  无法引用到外层的arguments
  <script type="text/javascript">
  // 求圆形面积,矩形面积, 三角形面积
  function area () {
  if(arguments.length == 1) {
  alert(3.14 * arguments[0] * arguments[0]);
  } else if(arguments.length == 2) {
  alert(arguments[0] * arguments[1]);
  } else if(arguments.length == 3) {
  alert(arguments[0] + arguments[1] + arguments[2]);
  } else {
  return null;
  }
  }
  area(10,20,30);
  
  </script>

内部函数

function a( d){
var i=0;

Function c(){

//....

}
function b(){

c();
alert(++i);
}
return b;
}
var c = a();
c();

闭包:允许使用内部函数--即函数定义和函数表达式位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。


类型转换

强制类型转换,ECMAScript中可用的3种强制类型转换:
Boolean(value);
Number(value);
String(value);

NaN --- 不是一个数字类型

NaN 值非常特殊,因为它“不是数字”,所以任何数跟它都不相等,甚至 NaN 本身也不等于 NaN 。

isNaN(testValue) 计算一个参数,检查它是否为数值。


var iNum = 10;

var snum = iNum.toString(8); 12 进制

var iNum1= parseInt("12.6"); 12

var iNum2= parseInt("hello"); NaN

var iNum3= parseInt("123world");123

var fNum4= parseFloat("25.12.6");25.12

var b1 = Boolean("");false

var b2 = Boolean(undefined);false

var b3 = Boolean(0);false

var iNum = Number("25.12.6");NaN

var bl = isNaN(Number("13f"))true

JavaScript中的对象

本地对象

Object Function Array String Boolean Number Date RegExp Error EvalError RangeError TypeError ReferenceError SyntaxError URIError

内置对象

Global Math

宿主对象(自定义对象)


对象是用关键字new后跟要实例化的类的名字创建,例如:

var oObj = new Object();

如果构造 函数无参数,括号可省略

var oObj = new Object;


Object 对象:


可以对object对象增加函数属性


判断对象是否有某个属性:


alert(oPerson.hasOwnProperty(“age”));



字符串对象 String

属性:length


数组对象 Array

创建数组对象

myArr=new Array(); myArr [10]= “array”; //MyArray数组的长度为10

myArr=new Array(3); //可存放三个元素

myArr=new Array(“a”,”c”,”d”);//存放了三个元素的数组

myArr=[“a”,”b”,”c”]; //存放了三个元素的数组

下标从0开始编号


数学对象 Math

max(,,,,)方法:返回各个参数中最大的数

min(,,,)方法:返回各个参数中最小的数

abs()方法:返回绝对值

sin()方法:返回参数的正弦值,参数为弧度

sqrt()方法:求输入参数的平方根

round():四舍五入为整数

random():返回0-1的随机小数

返回 n 到 m之间的随机整数:

var iNum = Math.floor(Math.random() * (m-n+1) +n);

floor():取整,返回比参数小的最大整数

ceil():返回大于或等于参数的最近整数

Grobal对象:对象从不直接使用,并且不能用 new 运算符创建。它在 Scripting 引擎被初始化时创建,并立即使其方法和属性可用。


日期时间对象Date

日期对象的创建:

mydate=new Date()
创建代表当前日期时间的日期对象

mydate=new Date(“October 1,2005,12:00:00”)
创建代表2005年国庆午时的日期对象

Mydate=new Date(2005, 9, 1)

创建代表2005年10月1日的日期对象

日期对象以系统内存中以数值表示,以1970年1月1日0时0分0秒0毫秒为起始点,每过一毫秒增加一.

get方法组à从日期对象中分解出它所处的年月日,星期几,时分秒,毫秒值

getYear()à返回年份数

getMonth()à返回月份数:0-11,应加上1.

getDate()à返回当前Date对象的日期数:1-31

getDay()à返回星期几:0-6, 0代表星期日

getHours()à返回小时数:0-23

getMinutes()à返回分钟数:0-59

getSeconds()à返回秒数:0-59

getTime()à返回毫秒数:自起始时刻开始

set方法组à设置(改变)日期对象的某一部分

setYear()à设置年份数

setMonth()à设置月份数:参数0-11

setDate()à设置日期数:参数1-31

setHours()à设置小时数:参数0-23

setMinutes()à设置分钟数:参数0-59

setSeconds()à设置秒数:参数0-59


JavaScript与AJAX

1.1XMLHttpRequst对象的概述

  在使用XMLHttpRequest对象发送请求和处理响应之前,必须先调用JavaScript创建一个XMLHttpRequest对象。由于XMLHttpRequest不是一个W3C标准,所以可以采用很多JavaScript方法来创建XMLHttpRequest的实例,IE把XMLHttpRequest实现为一个ActiveX对象,其他浏览器则把它实现为一个本地的JavaScript对象,由于存在这些差别,JavaScript必须包含有关的逻辑,从而使用ActiveX技术与使用本地的JavaScript对象技术创建XMLHttpRequst的一个实例。

  很多人可能还记得从前的那段日子,那时不同浏览器上的JavaScript与DOM简直千差万别,听了这段话后有人可能不寒而栗。幸运的是,在这里为了明确该如何创建XMLHttpRequst对象的实例,并不需要那么详细的编写代码来区别浏览器的类型。你要做的只是检查浏览器是否提供对ActiveX对象的支持。如果浏览器支持ActiveX对象,就可以使用ActiveX对象来创建XMLHttpRequest对象。否则,就要使用本地的JavaScript对象技术来创建。下面的代码展示了编写跨浏览器的JavaScript代码来创建XMLHttpRequst是多么的简单。

  创建XMLHttpRequest的一个实例:

var xmlHttp; function createXMLHttpRequst(){ if(window.ActiveXObject){
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");     }
    else if(window.XMLHttpRequst){
      xmlHttp = new XMLHttpRequest();
    } }

  可以看到,创建一个XMLHttpRequest相当容易。首先,要创建一个全局作用域变量xmlHttp来保存这个对象的引用。createXMLHttpRequst方法完成创建XMLHttpRequst对象的具体工作。这个方法中只有简单的分支逻辑(选择逻辑)来确定如何创建对象。对window.ActiveXObject的调用会返回一个对象,也可能返回一个null,if语句会把调用返回的结果看作是true或false(如果返回对象则为true,返回null则为false),以此指示浏览器是否支持ActiveX控件,相应地得知浏览器是不是IE,如果确实是,则通过实例化一个ActiveX的一个新实例来创建XMLHttpRequst对象,并传入一个串指令指示要创建何种类型的ActiveX对象

。在这个例子中为构造函数提供的字符串是Microsoft。XMLHTTP,这说明你想创建一个XMLHttpRequst的一个实例。

  如果window.ActiveXObjec调用失败(返回null),JavaScript就会转到else语句的分支确定浏览器是否把XMLHttpRequst实现为一个本地的JavaScript对象。如果存在window.XMLHttpRequest,就会创建XMLHttpRequst的一个实例。

  由于ajax具有动态类型特性,而且XMLHttpRequst在不同浏览器上的实现是兼容的,所以可以用同样的方式访问XMLHttpRequst实例的属性和方法,而不论这个实例创建的方法是什么。这就大大地简化了开发过程,而且在JavaScript中也不必编写特定于浏览器的逻辑。

1.2方法和属性

  abort()  停止当前请求;

  getAllResponseHeaders()  把HTTP请求的所有响应首部作为键值对返回;

  getResponseHeader("header")  返回指定首部的串值;

  open("method","url")  建立对服务器的调用。method参数可以使GET POST 或PUT。url可以使相对url或绝对url,这个方法还包括三个可选的参数;

  send(content)  向服务器发送请求;

  setRequstHeader("header","value")  把指定首部设置为所提供的值。在设置任何首部之前必须先调用open();

  下面来更详细地讨论这些方法。

  void open(string method, string url, boolean asynch ,string usename ,string password); 这个方法会建立对服务器的调用。这是初始化一个请求的纯脚本方法。它有两个必要的参数三个可选的参数。要提供调用的特定方法(get/post/put),还要提供所调用资源的url。另外还可以传递一个Boolean值,这是这个调用是异步的还是同步的。默认值为true,表示本质上是异步的,如果这个参数为false,处理就会等待,知道服务器返回响应为止。由于异步调用是ajax主要优势之一,所以倘若这个参数设为false,从某种程度上讲与使用XMLHttpRequst对象的初衷不太相符。不过在某些情况下见这个参数设为fals也是有用的,比如持久存储页面之前可以先验证用户的输入。最后两个参数不说自明,允许你指定一个特定的用户名和密码。

  void send(content) 这个方法具体向服务器发送请求。如果请求声明为异步的,这个方法就会立即返回,否则它会等到直到接收到响应为止。可选参数可以是DOM对象的实例、输入流,或串。传入这个方法的内容会作为一个请求体的一部分发送。

  void setRequstHeader(string header,string value);这个方法为为HTTP请求中一个给定的首部设置值,它有两个参数,第一个串表示要设置的首部,第二个串表示要在首部中放置的值。注意,这个方法必须在调用opend()之后才能调用。

  在所有的这些方法中,最有可能用到的就是opend()和send()。XMLHttpRequest对象还有很多属性,在设计Ajax交互时这些属性非常有用。

  void abort() 顾名思义,这个方法就是要停止请求。

  string getAllResponseHeaders() 这个方法的核心功能对开发人员应该很熟悉,它返回一个串,其中包含HTTP请求的所有响应首部,首部包括Content-Length/Data和URI

  string getReponseHeader(string header) 这个方法与getAllResponseHeaders()是对应的,不过它有一个参数表示您希望的指定收不到的值,并把这个值作为串返回。除了这些标准方法,处理XMLHttpRequst可以大量使用这些属性。

  onreadystatechange 每个状态改变时都会触发这个事件处理器,通常会调用一个javacript函数;

  readyState 请求状态。有5个可取的值:0:=未初始化,1=正在加载,2=已加载,3=交互中,4=完成;

  responseText服务器的响应,表示为一个串;

  responseXML服务器的响应,表示为XML,这个对象可解释为DOM对象;

  status服务器HTTP状态码(200对应Ok 404对应 not found ,等)

  statusText HTTP状态码的相应文本(ok或not found等)

1.3AJAX交互设计

  1.一个客户端事件触发一个Ajax事件。从简单的onchange事件到某个特定的用户动作,很多这样的事都可以触发Ajax事件。

<input type="text" d="email" name="email" onblur="validateEmail()"/>


  2.创建XMLHttpRequst对象的一个实例。使用open()方法建立调用,并调用url及所希望的HTTP方法(通常是post/get)。请求实际上是通过一个send()方法调用触发,代码如下:

var xmlHttp; function validateEmail(){   var email = document.getElementById("email");
  var url = "validate?email="+escape(email.value);
  if(window.ActiveObject){
    xmlHttp = new ActiveObject("Microsoft.XMLHTTP");
  }
  else if(window.XMLHttpRequst){
    xmlHttp = new XMLHttpRequst();
  }
  xmlHttp.open("get",url);
  xmlHttp.onreadystatechange = callback;
  xmlHttp.send(null);
}

  3.向服务器做出请求。可能调用servlet、CGI脚本,或者任何服务器端技术。

  4.服务器可以做你想做的事情,包括访问时数据库,甚至访问另一个系统。

  5.请求返回到浏览器。content-type设置为text/xml ,XMLHttpRequst的对象只能处理text/html类型的结果。在另外一些更复杂的示例中

  6.在这个demo中,XMLHttpRequst对象配置为处理返回结果时要调用callback()函数,这个函数会检查XMLHttpRequst对象的readyState属性,然后查看服务器返回的状态码。如果一切正常,callback()函数就会在客户端做一些有意思的工作。一下就是一个典型的回调方法:

function callback(){   if(xmlHttp.readyState == 4){
    if(xmlHttp.status == 200){
      //do something interesting here
    }
  } }

  可以看到,正常的请求/响应模式有所不同,但对于web开发人员来说,并不是完全陌生的。显然,在创建和建立XMLHttpRequst对象时还可以做些事情,另外当“回调”函数完成状态检查之后也可以有所作为。一般的,你会把这些标准调用包装在一个库中,一便在整个应用中使用,或者可以使用web上提供的库


基于对象的Javascript以及继承的实现


关键字this

指向调用该方法的“当前”对象

this使用的几种场合:

用在对象的方法中

构造函数

事件处理函数

原型-prototype

objectName.prototype

objectName 是对象的名称。

objectName.prototype本身也是对象

用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。

prototype 对象是个模板,要实例化的对象都以这个为基础。

prototype 对象的任何属性和方法都被传递给那个类的所有实例

利用prototype修改本地对象

个本地对象也有prototype属性

通过prototype属性创建新方法

通过prototype属性重定义已有方法

var books = new Array("java","C","VB"); Array.prototype.hasItem = function(oItem){ for(i=0; i<books.length; i++){ if(oItem == books[i]){ return true; } } return false;}


var books = new Array("java","C","VB");


Array.prototype.pop = function(){

return "pop object";

}

var o = books.pop(); //原本为VB -à 重载后 pop object


自定义对象的4种方式

1.通过工厂方式创建

此工厂创建的对象各属性都一样

function createPerson(){

var oPerson = new Object();

oPerson.name = "张三";

oPerson.age = 22;

oPerson.showAge = function(){

alert(this.age);

}

return oPerson;

}

var oPerson1 = createPerson();

var oPerson2 = createPerson();

此工厂根据传参的不同 创建不同的属性

function createPerson(sName, iAge){

var oPerson = new Object();

oPerson.name = sName;

oPerson.age = iAge;

oPerson.showAge = function(){ //或者函数外定义

alert(this.age);

}


return oPerson;

}


var oPerson1 = createPerson("张三",22);

var oPerson2 = createPerson("李四", 20);

oPerson1.showAge();

oPerson2.showAge();

2.通过构造函数方式创建

function Person(sName, iAge){

this.name = sName;

this.age = iAge;

this.showAge = function(){ //或者函数外定义

alert(this.age);

}

}


var oPerson1 = new Person("张三",22);

var oPerson2 = new Person("李四", 20);

oPerson1.showAge();

oPerson2.showAge();

3.通过原型方式创建

function Person(){

}

Person.prototype.name = "张三";

Person.prototype.age = 22;

Person.prototype.showAge = function(){

alert(this.age);

}


var oPerson1 = new Person();

var oPerson2 = new Person();


function Person(){

}

Person.prototype.name = "张三";

Person.prototype.age = 22;

Person.prototype.books = new Array("java","C");

Person.prototype.showAge = function(){

alert(this.age);

}


var oPerson1 = new Person();

var oPerson2 = new Person();

oPerson1.books.push("VB");


alert(oPerson1.books); // java,C,VB

alert(oPerson2.books); // java,C,VB

4.混合的构造函数/原型方式创建

function Car(sColor, iDoors, iMpg) {

this.color = sColor;

this.doors = iDoors;

this.mpg = iMpg;

this.drivers = new Array("Mike", "Sue");

}

Car.prototype.showColor = function () {

alert(this.color);

};

var oCar1 = new Car("red", 4, 23);

var oCar2 = new Car("blue", 3, 25);


oCar1.drivers.push("Matt");


alert(oCar1.drivers); //outputs "Mike,Sue,Matt"

alert(oCar2.drivers); //outputs "Mike,Sue"



原型(prototype)链

prototype类似于模板,要实例化的对象都以这个模板为基础, prototype对象的任何属性和方法都被传递给类的所有实例。


所有 JavaScript 内部类的 prototype 属性都是只读的,所以:不能更改内部对象的 prototype ,只能为内部对象的原型添加或重载属性和方法


自定义对象可以更改其prototype ,即:

子类类名.prototype = 父类对象实例;


1、创建基类

function Polygon(iSides){ //多边形

this.iSides = iSides;

}

Polygon.prototype.getArea = function(){

return 0;

}


2、创建子类

function Triangle(iBase,iHeight){ //三角形对象

this.iBase = iBase;

this.iHeight = iHeight;

}

Triangle.prototype = new Polygon(3);

Triangle.prototype.getArea = function(){

return 0.5 * this.iBase * this.iHeight;

}


function Rectangle(iLength,iWidth){ //矩形对象

this.iLength = iLength;

this.iWidth = iWidth;

}

Rectangle.prototype = new Polygon(4);

Rectangle.prototype.getArea = function(){

return this.iLength * this.iWidth;

}


3、测试

var triangle = new Triangle(10,4);

var rectangle = new Rectangle(8,4);


alert(triangle.iSides);

alert(rectangle.iSides);


alert(triangle.getArea());

alert(rectangle.getArea());

td 对象

td 对象代表了 HTML 中数据单元。

在 HTML 表格中每个 <td> 标签都会创建一个 td 对象。

th 对象

th 对象代表了 HTML 标准中的表头单元。

HTML 中每个 <th> 标签都会创建一个 th 对象。

td/th 对象属性

W3C: W3C 标准。

属性描述W3C
abbr设置或返回单元格中内容的缩写版本。Yes
align已废弃。 设置或返回单元格内部数据的水平排列方式。D
axis设置或返回相关单元格的一个逗号分隔的列表。Yes
background已废弃。 设置或返回表格的背景图片。D
bgColor已废弃。 设置或返回表格的背景颜色D
cellIndex返回单元格在某行的单元格集合中的位置。Yes
ch设置或返回单元格的对齐字符。Yes
chOff设置或返回单元格的对齐字符的偏移量。Yes
colSpan单元格横跨的列数。Yes
headers置或返回 header-cell 的 id 值。Yes
height已废弃。 设置或返回数据单元的高度D
noWrap已废弃。 nowrap 属性规定表格单元格中的内容不换行。D
rowSpan设置或返回单元格可横跨的行数。Yes
vAlign设置或返回表格单元格内数据的垂直排列方式。Yes
width已废弃。设置或返回单元格的宽度。D

标准属性和事件

td/th 对象同样支持标准的 属性 和 事件。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

见浏览器兼容性问题与解决方案?

参考答案

(1)浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同

问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。

碰到频率:100%

解决方案:CSS里 {margin:0;padding:0;}

备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符来设置各个标签的内外补丁是0。

(2)浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)

解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性

备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

(3)浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度

问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度

碰到频率:60%

解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

(4)浏览器兼容问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug

问题症状:IE6里的间距比超过设置的间距

碰到几率:20%

解决方案 : 在display:block;后面加入display:inline;display:table;

备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

(5) 浏览器兼容问题五:图片默认有间距

问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。

碰到几率:20%

解决方案:使用float属性为img布局

备注 : 因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。(我的一个学生使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以我禁止他们使用)

(6) 浏览器兼容问题六:标签最低高度设置min-height不兼容

问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容

碰到几率:5%

解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important;

height:200px; overflow:visible;}

备注:在B/S系统前端开时,有很多情况下我们又这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

(7)浏览器兼容问题七:透明度的兼容CSS设置

一般在ie中用的是filter:alpha(opacity=0);这个属性来设置div或者是块级元素的透明度,而在firefox中,一般就是直接使用opacity:0,对于兼容的,一般的做法就是在书写css样式的将2个都写上就行,就能实现兼容

列出display的值并说明他们的作用?

参考答案

display: none | inline | block |

list-item | inline-block | table | inline-table |

table-caption | table-cell | table-row | table-row-group | table-column |

table-column-group | table-footer-group | table-header-group | run-in | box |

inline-box | flexbox | inline-flexbox | flex | inline-flex

默认值:inline

none: 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间

inline: 指定对象为内联元素。

block: 指定对象为块元素。

list-item:指定对象为列表项目。

inline-block: 指定对象为内联块元素。(CSS2)

table: 指定对象作为块元素级的表格。类同于html标签<table>(CSS2)

inline-table:指定对象作为内联元素级的表格。类同于html标签<table>(CSS2)

table-caption:指定对象作为表格标题。类同于html标签<caption>(CSS2)

table-cell:指定对象作为表格单元格。类同于html标签<td>(CSS2)

table-row:指定对象作为表格行。类同于html标签<tr>(CSS2)

table-row-group:指定对象作为表格行组。类同于html标签<tbody>(CSS2)

table-column:指定对象作为表格列。类同于html标签<col>(CSS2)

table-column-group: 指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2)

table-header-group: 指定对象作为表格标题组。类同于html标签<thead>(CSS2)

table-footer-group: 指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2)

run-in:根据上下文决定对象是内联对象还是块级对象。(CSS3)

box:将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)

inline-box:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)

flexbox:将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)

inline-flexbox:将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)

flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)

inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)

如何居中div, 如何居中一个浮动元素?

参考答案

(1)、非浮动元素居中:可以设置margin:0 auto 令其居中, 定位 ,父级元素text-algin:center等等

(2)、浮动元素居中:

方法一:设置当前div的宽度,然后设置margin-left:50%; position:relative; left:-250px;其中的left是宽度的一半。

方法二:父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对左移动-50%。

方法三:position定位等等。

CSS中link 和@import 的区别是?

参考答案

(1)、link属于HTML标签,而@import是CSS提供的;

(2)、页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;

(3)、import只在IE5以上才能识别,而link是HTML标签,无兼容问题;

(4)、link方式的样式的权重高于@import的权重.

请列举几种清除浮动的方法(至少两种)?

参考答案

(1)、父级div定义 height

原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。

优点:简单、代码少、容易掌握

缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

建议:不推荐使用,只建议高度固定的布局时使用

(2)、结尾处加空div标签 clear:both

原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度

优点:简单、代码少、浏览器支持好、不容易出现怪问题

缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好

建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法

(3)、父级div定义

伪类:after 和 zoom

原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题

优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)

缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。

建议:推荐使用,建议定义公共类,以减少CSS代码。

(4)、父级div定义 overflow:hidden

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度

优点:简单、代码少、浏览器支持好

缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。

建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

(5)、父级div定义 overflow:auto

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度

优点:简单、代码少、浏览器支持好

缺点:内部宽高超过父级div时,会出现滚动条。

建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

block,inline和inlinke-block细节对比?

参考答案

display:block

a、block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。

b、block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

c、block元素可以设置margin和padding属性。

• display:inline

a、inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

b、inline元素设置width,height属性无效。

c、inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left,

margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top,

margin-bottom不会产生边距效果。

• display:inline-block

a、简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

补充说明

a、一般我们会用display:block,display:inline或者display:inline-block来调整元素的布局级别,其实display的参数远远不止这三种,仅仅是比较常用而已。

b、IE(低版本IE)本来是不支持inline-block的,所以在IE中对内联元素使用display:inline-block,理论上IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表象。

什么叫优雅降级和渐进增强?

参考答案

优雅降级: Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强: 从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。

说说浮动元素会引起的问题和你的解决办法

参考答案

问题:

(1)父元素的高度无法被撑开,影响与父元素同级的元素

(2)与浮动元素同级的非浮动元素会跟随其后

(3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

解决方法:

使用CSS中的clear:both;属性来清除元素的浮动可解决问题(2)、(3),对于问题(1),添加如下样式,给父元素添加clearfix样式:

.clearfix:after{content: ".";display: block;height: 0;clear:

both;visibility: hidden;}

.clearfix{display: inline-block;} /* for IE/Mac */

清除浮动的几种方法:

(1)、额外标签法,<div

style="clear:both;"></div>(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁。)

(2)、使用after伪类

parent:after{

content:" ";

height:0;

visibility:hidden;

display:block;

clear:both;

}

(3)、浮动外部元素

(4)、设置overflow为hidden或者auto

你有哪些性能优化的方法?

参考答案

回答一:

(1)、减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存

,图片服务器。

(2)、前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

(3)、用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。

(4)、当需要设置的样式很多时设置className而不是直接操作style。

(5)、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

(6)、避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。

(7)、图片预加载,将样式表放在顶部,将脚本放在底部加上时间戳。

回答二:

(1)、减少HTTP请求次数

(2)、使用CDN

(3)、避免空的src和href

(4)、为文件头指定Expires

(5)、使用gzip压缩内容

(6)、把CSS放到顶部

(7)、把JS放到底部

(8)、避免使用CSS表达式

(9)、将CSS和JS放到外部文件中

(10)、避免跳转

(11)、可缓存的AJAX

(12)、使用GET来完成AJAX请求

为什么要初始化CSS样式?

参考答案

因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

最简单的初始化方法就是: {padding: 0; margin: 0;} (不建议)

解释下浮动和它的工作原理?清除浮动的技巧?

参考答案

浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

(1)、使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

(2)、使用overflow。

给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

(3)、使用after伪对象清除浮动。

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;

CSS样式表根据所在网页的位置,可分为哪几种样式表?

参考答案

行内样式表,内嵌样式表,外部样式表

谈谈你对CSS中刻度的认识?

参考答案

在CSS中刻度是用于设置元素尺寸的单位。

a、特殊值0可以省略单位。例如:margin:0px可以写成margin:0

b、一些属性可能允许有负长度值,或者有一定的范围限制。如果不支持负长度值,那应该变换到能够被支持的最近的一个长度值。

c、长度单位包括:相对单位和绝对单位。

相对长度单位有: em, ex, ch, rem, vw, vh, vmax,

vmin

绝对长度单位有: cm, mm, q, in, pt, pc, px

绝对长度单位:1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

文本相对长度单位:em

相对长度单位是相对于当前对象内文本的字体尺寸,如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)

body { font-size: 14px; }

h1 { font-size: 16px; }

.size1 p { font-size: 1em; }

.size2 p { font-size: 2em; }

.size3 p { font-size: 3em; }

文本相对长度单位:rem

rem是CSS3新增的一个相对单位(root em,根em),相对于根元素(即html元素)font-size计算值的倍数

只相对于根元素的大小

浏览器的默认字体大小为16像素,浏览器默认样式也称为user agent stylesheet,就是所有浏览器内置的默认样式,多数是可以被修改的,但chrome不能直接修改,可以被用户样式覆盖。

请你说说em与rem的区别?

参考答案

rem

rem是CSS3新增的一个相对单位(root em,根em),相对于根元素(即html元素)font-size计算值的倍数

只相对于根元素的大小

rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。

作用:利用rem可以实现简单的响应式布局,可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化,以前的天猫tmall就使用这种办法

em

文本相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)

em(font size of the element)是指相对于父元素的字体大小的单位。它与rem之间其实很相似,区别在。(相对是的HTML元素的字体大,默认16px)

em与rem的重要区别: 它们计算的规则一个是依赖父元素另一个是依赖根元素计算

请你说说box-sizing属性的的用法?

参考答案

设置或检索对象的盒模型组成模式

a、box-sizing:content-box: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即( Element width = width + border + padding,但占有页面位置还要加上margin ) 此属性表现为标准模式下的盒模型。

b、box-sizing:border-box: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即( Element width = width ) 此属性表现为怪异模式下的盒模型。

浏览器标准模式和怪异模式之间的区别是什么?

参考答案

在“标准模式”(Standards Mode) 页面按照 HTML 与 CSS 的定义渲染,而在“怪异模式”(Quirks Mode)就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循W3C 标准的网页而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式;如果存在一个完整的DOCTYPE则浏览器将会采用标准模式,而如果它缺失则浏览器将会采用怪异模式。

强烈建议阅读加深理解:怪异模式(Quirks Mode)对 HTML 页面的影响,这里列下浏览器标准模式和怪异模式的区别:

(1)盒模型:

在怪异模式下,盒模型为IE盒模型而非标准模式下的W3C 盒模型:在 IE 盒模型中,

box width = content width + padding left + padding right + border left + border

right,

box height = content height + padding top + padding bottom + border top +

border bottom。

而在 W3C 标准的盒模型中,box 的大小就是 content 的大小。

(2)图片元素的垂直对齐方式:

对于inline元素和table-cell元素,在 IE Standards Mode 下 vertical-align 属性默认取值为baseline。而当inline元素的内容只有图片时,如table的单元格table-cell。在 IE Quirks Mode 下,table单元格中的图片的 vertical-align 属性默认为bottom,因此,在图片底部会有几像素的空间。

(3)<table>元素中的字体:

CSS 中,描述font的属性有font-family,font-size,font-style,font-weigh,上述属性都是可以继承的。而在IE Quirks Mode 下,对于table 元素,字体的某些属性将不会从body或其他封闭元素继承到table中,特别是 font-size属性。

(4)

内联元素的尺寸:

在 IE Standards Mode 下,non-replaced inline 元素无法自定义大小,而在IE Quirks Mode 下,定义这些元素的width和height 属性,能够影响该元素显示的大小尺寸。

(5)

元素的百分比高度:

a、CSS 中对于元素的百分比高度规定如下,百分比为元素包含块的高度,不可为负值。如果包含块的高度没有显式给出,该值等同于“auto”(即取决于内容的高度)。所以百分比的高度必须在父元素有声明高度时使用。

b、当一个元素使用百分比高度时,在IE Standards Mode 下,高度取决于内容的变化,而在Quirks Mode 下,百分比高度则被正确应用。

(6)

元素溢出的处理:

在 IE Standard Mode 下,overflow取默认值 visible,即溢出可见,这种情况下,溢出内容不会被裁剪,呈现在元素框外。而在Quirks Mode 下,该溢出被当做扩展box来对待,即元素的大小由其内容决定,溢出不会被裁剪,元素框自动调整,包含溢出内容。

怪异Quirks模式是什么,它和标准Standards模式有什么区别?

参考答案

从IE6开始,引入了Standards模式,标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。

在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差, IE6将对CSS提供更好的支持,然而这时的问题就来了,因为有很多页面是基于旧的布局方式写的,而如果IE6 支持CSS则将令这些页面显示不正常,如何在即保证不破坏现有页面,又提供新的渲染机制呢?

在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能,尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支,即当某个参数为真时,我们就使用新功能,而如果这个参数 不为真时,就使用旧功能,这样就能不破坏原有的程序,又提供新功能。IE6也是类似这样做的,它将DTD当成了这个“参数”,因为以前的页面大家都不会去写DTD,所以IE6就假定 如果写了DTD,就意味着这个页面将采用对CSS支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是Quirks模式(怪癖模式,诡异模式,怪异模式)。

区别:总体会有布局、样式解析和脚本执行三个方面的区别。

盒模型: 在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border。

设置行内元素的高宽: 在Standards模式下,给<span>等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。

设置百分比的高度: 在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。

(还有很多,答出什么不重要,关键是看他答出的这些是不是自己经验遇到的,还是说都是看文章看的,甚至完全不知道。)

说说你对边距折叠的理解?

参考答案

外边距折叠: 相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距(margin)

相邻: 没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系

垂直方向外边距合并计算:

a、参加折叠的margin都是正值:取其中 margin 较大的值为最终 margin 值。

b、参与折叠的margin 都是负值:取的是其中绝对值较大的,然后,从0 位置,负向位移。

c、参与折叠的margin 中有正值,有负值:先取出负 margin 中绝对值中最大的,然后,和正margin 值中最大的 margin 相加。

内联与块级标签有何区别?

参考答案

Html中的标签默认主要分为两大类型,一类为块级元素,另一类是行内元素,许多人也把行内称为内联,所以叫内联元素,其实就是一个意思。为了很好的布局,必须理解它们间的区别。

说说隐藏元素的方式有哪些?

参考答案

a、使用CSS的display:none,不会占有原来的位置

b、使用CSS的visibility:hidden,会占有原来的位置

c、使用HTML5中的新增属性hidden="hidden",不会占有原来的位置

为什么重置浏览器默认样式,如何重置默浏览器认样式?

参考答案

每种浏览器都有一套默认的样式表,即user agent stylesheet,网页在没有指定的样式时,按浏览器内置的样式表来渲染。这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。但这样会有很多兼容问题。

a、最简单的办法:(不推荐使用)*{margin: 0;padding: 0;}。

b、使用CSSReset可以将所有浏览器默认样式设置成一样。

c、normalize:也许有些cssreset过于简单粗暴,有点伤及无辜,normalize是另一个选择。bootstrap已经引用该css来重置浏览器默认样式,比普通的cssreset要精细一些,保留浏览器有用的默认样式,支持包括手机浏览器在内的超多浏览器,同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。

天猫 使用的css reset重置浏览器默认样式:

@charset

"gb2312";body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd,

ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td

{margin: 0;padding: 0}body, button, input, select, textarea

{font: 12px "microsoft yahei";line-height: 1.5;-ms-overflow-style: scrollbar}h1,

h2, h3, h4, h5, h6 {font-size: 100%}ul, ol {list-style: none}a

{text-decoration: none;cursor:pointer}a:hover

{text-decoration: underline}img {border: 0}button, input, select,

textarea {font-size: 100%}table {border-collapse: collapse;border-spacing: 0}.clear

{clear:both}.fr {float:right}.fl {float:left}.block

{display:block;text-indent:-999em}

谈谈你对BFC与IFC的理解?(是什么,如何产生,作用)

参考答案

(1)、什么是BFC与IFC

a、BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格式化上下文。常规流(也称标准流、普通流)是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文,你可以把BFC想象成一个大箱子,箱子外边的元素将不与箱子内的元素产生作用。

b、BFC是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。

c、在普通流中的Box(框) 属于一种 formatting context(格式化上下文) ,类型可以是 block ,或者是 inline ,但不能同时属于这两者。并且,Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化, Inline boxes(块内框) 则在 Inline Formatting Context(行内格式化上下文) 里格式化。

(2)、如何产生BFC

当一个HTML元素满足下面条件的任何一点,都可以产生Block Formatting Context:

a、float的值不为none

b、overflow的值不为visible

c、display的值为table-cell, table-caption, inline-block中的任何一个

d、position的值不为relative和static

CSS3触发BFC方式则可以简单描述为:在元素定位非static,relative的情况下触发,float也是一种定位方式。

(3)、BFC的作用与特点

a、不和浮动元素重叠,清除外部浮动,阻止浮动元素覆盖

如果一个浮动元素后面跟着一个非浮动的元素,那么就会产生一个重叠的现象。常规流(也称标准流、普通流)是一个文档在被显示时最常见的布局形态,当float不为none时,position为absolute、fixed时元素将脱离标准流。

说说你对页面中使用定位(position)的理解?

参考答案

使用css布局position非常重要,语法如下:

position:static | relative | absolute | fixed |

center | page | sticky

默认值:static,center、page、sticky是CSS3中新增加的值。

(1)、static

可以认为静态的,默认元素都是静态的定位,对象遵循常规流。此时4个定位偏移属性不会被应用,也就是使用left,right,bottom,top将不会生效。

(2)、relative

相对定位,对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

(3)、absolute

a、绝对定位,对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。

b、元素定位参考的是离自身最近的定位祖先元素,要满足两个条件,第一个是自己的祖先元素,可以是父元素也可以是父元素的父元素,一直找,如果没有则选择body为对照对象。第二个条件是要求祖先元素必须定位,通俗说就是position的属性值为非static都行。

(4)、fixed

固定定位,与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。

(5)、center

与absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。(CSS3)

(6)、page

与absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3)

(7)、sticky

对象在常态时遵循常规流。它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)

如何解决多个元素重叠问题?

参考答案

使用z-index属性可以设置元素的层叠顺序

z-index属性

语法:z-index: auto | <integer>

默认值:auto

适用于:定位元素。即定义了position为非static的元素

取值:

auto:元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文,除非它是根元素。

整数: 用整数值来定义堆叠级别。可以为负值。 说明:

检索或设置对象的层叠顺序。

z-index用于确定元素在当前层叠上下文中的层叠级别,并确定该元素是否创建新的局部层叠上下文。

当多个元素层叠在一起时,数字大者将显示在上面。