web

用jquery获取浏览器获取高度和宽度的大小;
$(window).height();
$(window).height();

ie的css hack写法：
color:red          /所有的浏览器
color:yellow\9     /所有的ie浏览器
*color:green      /ie6和ie7
+color:orange     /ie7
_color:blue       /ie6



任何东西都可以塞进条件注释里：标签、JavaScript、js文件、css、内联样式：

条件注释：<!--[if ie]><link rel="stylesheet" href="xx" /><![endif]-->

<!--[if ie7]>
    <link rel="stylesheet" type="text/css" href="xx" />
<![endif]-->


<!--[if ie6]>
    <link rel="stylesheet" type="text/css" href="xxx" />
<![endif]-->

<!--[if lte IE 6]>
<p>这段文字仅显示在 IE6及IE6以下版本。</p>
<p>This message will only appear in versions of Internet Explorer less than or equal to version 6.</p>
<![endif]-->

<!--[if gte IE 6]>
<p>这段文字仅显示在 IE6及IE6以上版本。</p>
<p>This message will only appear in versions of Internet Explorer greater than or equal to version 6.</p>
<![endif]-->

<!--[if gt IE 6]>
<p>这段文字仅显示在 IE6以上版本（不包含IE6）。</p>
<p>This message will only appear in versions of Internet Explorer greater than version 6.</p>
<![endif]-->






1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

http://91sp.vido.ws/index.php


2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。


3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug


4.行内元素有哪些？块级元素有哪些？CSS的盒模型？
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding


5.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入   
区别 ：同时加载
       前者无兼容性，后者CSS2.1以下浏览器不支持
   Link 支持使用javascript改变样式，后者不可

6.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
标签选择符  类选择符 id选择符
继承不如指定   Id>class>标签选择
后者优先级高


7.前端页面有哪三层构成，分别是什么？作用是什么？
结构层 Html 表示层 CSS 行为层 js
结构层 表示层 行为层


8.css的基本语句构成是？
选择器{属性1:值1;属性2:值2;……}


10.写出几种IE6 BUG的解决方法
1.双边距BUG float引起的  使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px  
3.超链接hover 点击后失效  使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）


11.<img>标签上title与alt属性的区别是什么？
Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息

css的优先级：
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象


12.描述css reset的作用和用途。
Reset重置浏览器的css默认属性        浏览器的品种不同，样式不同，然后重置，让他们统一


13.解释css sprites，如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量


15.你如何对网站的文件和资源进行优化？期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用


1.javascript的typeof返回哪些数据类型
Object number function boolean underfind


2.例举3种强制类型转换和2种隐式类型转换？
强制（parseInt,parseFloat,number）
隐式（== - ===）

parseInt,

3.split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串

4.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加  shift()头部删除


8.ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的，一个是类似修改密码的

15.如何阻止事件冒泡和默认事件
canceBubble   return false

19.document load 和document ready的区别
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)


20.”==”和“===”的不同
前者会自动转换类型
后者不会

某种意义上float:left与display:inline-block属性的作用是一模一样的，所以类似于display:block; float:left;但并不等同。


Block formatting context 表现的很像普通的块框，那么它比较特殊的地方在哪里呢？
1. 可以包含浮动元素[包裹浮动元素]
2. 不被浮动元素覆盖
3. 阻止父子元素的 margin 折叠



BFC就是一种布局方式，在这种布局方式下，盒子们自所在的 containing block 顶部起一个接一个垂直排列，水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)。 developer center上面有对BFC的一段描述：
一个 block formatting context 是web页面可视化CSS渲染的一个部分，是一块 block boxes 排布以及 float 元素相互作用的区域。

可以理解为一个作用范围，在一个BFC里的布局与其之外的布局不相关或者说不相互影响。


IE Tab Plus



****/margin外边距负值时候/****


margin的移动：margin的位移并不是元素本身的位移，而是自身margin四个方向(top/right/bottom/left)的具体位置的位移。

当元素margin的top和left是负值时会引起元素的向上或向左位置移动。而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线。



何时应当使用margin：
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding：
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”


float相当于脱离了父元素的文档流，是没有高度的。所以常常我们浮动之后就会造成父元素的高度塌陷。[ 故常常在子元素浮动之后父元素要清除浮动，ie的话就要触发haslayout ]


记住块级元素的margin的参照基准是前一个元素即相对于自身之前的元素有margin距离。如果元素是第一个元素，则就是相对于父元素的margin距离（但第一个元素相对于父元素margin-top而父元素又没有设定padding-top/border-top的话要需要印证上面的垂直外边距合并的知识）


margin-top和margin-bottom对内联元素（对行）的高度没有影响，margin对于内联元素只能用margin-left和margin-right；对margin-top和margin-bottom是无效的；【很重要的，对于inline元素要使用margin-top和margin-bottom;一定要注意把inline元素转换成为block元素，一般用于小图标应用，span标签display:block,然后用margin-top，margin-bottom来改变其位置，而不是靠绝对定位。！】




分为几个css:1.base.css,2.common.css,3.page.css;page.css包含各个页面的详细部分css代码；common.css包含的是各个组件css。

很多有些是相同部分css的代码:应该把他们合并起来,减少代码的冗余.






网页采集标准三步：1、获得页面 2、正则匹配 3、入库存储


水平居中:
1.文本，图片等行内元素的水平居中；只要给父元素设置text-align:center就可以实现文本、图片等行内元素的水平居中

2.确定宽度的块级元素水平居中：
确定宽度的块级元素水平居中是通过设置margin-left:auto和margin-right:auto实现的

3.不确定宽度的块元素水平居中:
    有三种方式：1.改变块级元素的display:inline，然后用text-align:center;
                2.给父元素设置float,position:relative和left:50%;子元素设置position:relative和left:-50%来实现水平居中



垂直居中:
1.父元素高度确定的单行文本的垂直居中;通过给父元素设置line-height值和父元素的高度值相同

2.父元素高度确定的多行文本、图片、块级元素的垂直居中;








用jquery获取浏览器获取高度和宽度的大小;
$(window).height();
$(window).height();

ie的css hack写法：
color:red          /所有的浏览器
color:yellow\9     /所有的ie浏览器
*color:green      /ie6和ie7
+color:orange     /ie7
_color:blue       /ie6



任何东西都可以塞进条件注释里：标签、JavaScript、js文件、css、内联样式：

条件注释：<!--[if ie]><link rel="stylesheet" href="xx" /><![endif]-->

<!--[if ie7]>
    <link rel="stylesheet" type="text/css" href="xx" />
<![endif]-->


<!--[if ie6]>
    <link rel="stylesheet" type="text/css" href="xxx" />
<![endif]-->

<!--[if lte IE 6]>
<p>这段文字仅显示在 IE6及IE6以下版本。</p>
<p>This message will only appear in versions of Internet Explorer less than or equal to version 6.</p>
<![endif]-->

<!--[if gte IE 6]>
<p>这段文字仅显示在 IE6及IE6以上版本。</p>
<p>This message will only appear in versions of Internet Explorer greater than or equal to version 6.</p>
<![endif]-->

<!--[if gt IE 6]>
<p>这段文字仅显示在 IE6以上版本（不包含IE6）。</p>
<p>This message will only appear in versions of Internet Explorer greater than version 6.</p>
<![endif]-->






1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

http://91sp.vido.ws/index.php


2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。


3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug


4.行内元素有哪些？块级元素有哪些？CSS的盒模型？
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding


5.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入   
区别 ：同时加载
       前者无兼容性，后者CSS2.1以下浏览器不支持
   Link 支持使用javascript改变样式，后者不可

6.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
标签选择符  类选择符 id选择符
继承不如指定   Id>class>标签选择
后者优先级高


7.前端页面有哪三层构成，分别是什么？作用是什么？
结构层 Html 表示层 CSS 行为层 js
结构层 表示层 行为层


8.css的基本语句构成是？
选择器{属性1:值1;属性2:值2;……}


10.写出几种IE6 BUG的解决方法
1.双边距BUG float引起的  使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px  
3.超链接hover 点击后失效  使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）


11.<img>标签上title与alt属性的区别是什么？
Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息

css的优先级：
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象


12.描述css reset的作用和用途。
Reset重置浏览器的css默认属性        浏览器的品种不同，样式不同，然后重置，让他们统一


13.解释css sprites，如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量


15.你如何对网站的文件和资源进行优化？期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用


1.javascript的typeof返回哪些数据类型
Object number function boolean underfind


2.例举3种强制类型转换和2种隐式类型转换？
强制（parseInt,parseFloat,number）
隐式（== - ===）

parseInt,

3.split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串

4.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加  shift()头部删除


8.ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的，一个是类似修改密码的

15.如何阻止事件冒泡和默认事件
canceBubble   return false

19.document load 和document ready的区别
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)


20.”==”和“===”的不同
前者会自动转换类型
后者不会

某种意义上float:left与display:inline-block属性的作用是一模一样的，所以类似于display:block; float:left;但并不等同。


Block formatting context 表现的很像普通的块框，那么它比较特殊的地方在哪里呢？
1. 可以包含浮动元素[包裹浮动元素]
2. 不被浮动元素覆盖
3. 阻止父子元素的 margin 折叠



BFC就是一种布局方式，在这种布局方式下，盒子们自所在的 containing block 顶部起一个接一个垂直排列，水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)。 developer center上面有对BFC的一段描述：
一个 block formatting context 是web页面可视化CSS渲染的一个部分，是一块 block boxes 排布以及 float 元素相互作用的区域。

可以理解为一个作用范围，在一个BFC里的布局与其之外的布局不相关或者说不相互影响。


IE Tab Plus



****/margin外边距负值时候/****


margin的移动：margin的位移并不是元素本身的位移，而是自身margin四个方向(top/right/bottom/left)的具体位置的位移。

当元素margin的top和left是负值时会引起元素的向上或向左位置移动。而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线。



何时应当使用margin：
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding：
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”


float相当于脱离了父元素的文档流，是没有高度的。所以常常我们浮动之后就会造成父元素的高度塌陷。[ 故常常在子元素浮动之后父元素要清除浮动，ie的话就要触发haslayout ]


记住块级元素的margin的参照基准是前一个元素即相对于自身之前的元素有margin距离。如果元素是第一个元素，则就是相对于父元素的margin距离（但第一个元素相对于父元素margin-top而父元素又没有设定padding-top/border-top的话要需要印证上面的垂直外边距合并的知识）


margin-top和margin-bottom对内联元素（对行）的高度没有影响，margin对于内联元素只能用margin-left和margin-right；对margin-top和margin-bottom是无效的；【很重要的，对于inline元素要使用margin-top和margin-bottom;一定要注意把inline元素转换成为block元素，一般用于小图标应用，span标签display:block,然后用margin-top，margin-bottom来改变其位置，而不是靠绝对定位。！】




分为几个css:1.base.css,2.common.css,3.page.css;page.css包含各个页面的详细部分css代码；common.css包含的是各个组件css。

很多有些是相同部分css的代码:应该把他们合并起来,减少代码的冗余.






网页采集标准三步：1、获得页面 2、正则匹配 3、入库存储


水平居中:
1.文本，图片等行内元素的水平居中；只要给父元素设置text-align:center就可以实现文本、图片等行内元素的水平居中

2.确定宽度的块级元素水平居中：
确定宽度的块级元素水平居中是通过设置margin-left:auto和margin-right:auto实现的

3.不确定宽度的块元素水平居中:
    有三种方式：1.改变块级元素的display:inline，然后用text-align:center;
                2.给父元素设置float,position:relative和left:50%;子元素设置position:relative和left:-50%来实现水平居中



垂直居中:
1.父元素高度确定的单行文本的垂直居中;通过给父元素设置line-height值和父元素的高度值相同

2.父元素高度确定的多行文本、图片、块级元素的垂直居中;