随手总结

1.a标签怎么去下划线以及实现点击前和点击后不变色
a:link { 
font-size: 12px; 
color: #000000; 
text-decoration: none; 
} 
a:visited { 
font-size: 12px; 
color: #000000; 
text-decoration: none; 
} 
a:hover { 
font-size: 12px; 
color: #999999; 
text-decoration: underline; 

} 

2.去掉superSlide.js里的默认效果 mouseover，mouseout换成click

jQuery(".slideTxtBox ").slide({trigger:click});

或者将jquery.superSlide.js里的源文件

trigger : " mouseover " -->trigger : "click".

3..ie7的z-index bug
加position：relative,absolute

other：

1.Doctype的作用？严格模式和混杂模式怎么区分？它们有何意义？

作用:DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

区分:严格模式的排版和JS 运作模式是 以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

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

行内元素：

a, b, span, img, input, strong, select, label, em, button, textarea

块级元素：

div, ul, li, dl, dt, dd, p, h1-h6, blockquote

空元素：

br, meta, hr, link, input, img

3.介绍一下CSS盒子模型

css模型：

  旧模型：content+padding*2+border*2

  新模型：width+border+padding=你设置的元素的宽度

  新盒子需要设置：-webkit-box-sizing:border-box

 

CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）

元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。

1.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有哪些？

CSS 选择符：

1)      id选择器(# myid)

2)      类选择器(.myclassname)

3)      标签选择器(div, h1, p)

4)      相邻选择器(h1 + p)

5)      子选择器(ul > li)

6)      后代选择器(li a)

7)      通配符选择器( * )

8)      属性选择器(a[rel = "external"])

9)      伪类选择器(a: hover, li:nth-child)

可继承的样式：

1)      font-size

2)      font-family

3)      color

4)      text-indent

不可继承的样式：

1)      border

2)      padding

3)      margin

4)      width

5)      height

优先级算法：

1)      优先级就近原则，同权重情况下样式定义最近者为准;

2)      载入样式以最后载入的定位为准;

3)      3.!important >  id > class > tag  

4)      important比 内联优先级高，但内联比id要高

CSS3新增伪类举例：

1)      p:first-of-type  选择属于其父元素的首个<p>元素的每个<p>元素。

2)      p:last-of-type  选择属于其父元素的最后<p>元素的每个<p>元素。

3)      p:only-of-type  选择属于其父元素唯一的<p>元素的每个<p>元素。

4)      p:only-child    选择属于其父元素的唯一子元素的每个<p>元素。

5)      p:nth-child(2)  选择属于其父元素的第二个子元素的每个<p>元素。

6)      :enabled :disabled控制表单控件的禁用状态。

7)      :checked        单选框或复选框被选中。

CSS3有哪些新特性？

1)    CSS3实现圆角（border-radius），阴影（box-shadow），

2)    对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

3)    transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

4)    增加了更多的CSS选择器 多背景rgba 

5)    在CSS3中唯一引入的伪元素是::selection.

6)    媒体查询，多栏布局

7)    border-image

 

2.如何居中div？如何居中一个浮动元素？(宽500，高400，垂直居中)

居中div :给div设置一个宽度，然后添加margin:0 auto属性

居中浮动元素 :

Div{

   Width:500px;

   Height:400px;

   Margin:200px 0 0 -250px;

   Position;absolute;

   Left:50%;

   Top:50%;

   Background:#000;

}

3.用过媒体查询，针对移动端的布局吗？

过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适合相应的设备显示；即响应式布局

@media screen and (min-width: 400px) and (max-width: 700px) { … }

@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

4.写出你知道的HTML5新特性和新标签

    HTML 5应用相比HTML 4更加成熟，总的来说HTML 5改进点有以下几个方面：

1、增强HTML表单功能、引入更多灵活的段落标签、新功能标签。

2、用户交互性增强，如details、datagrid、menu、command等属性，相关：网页编程中如何动态的添加删除表格行

3、引入<canvas>标签，并支持直接用脚本绘图。

4、沙盒机制，隔离潜在的威胁。可有效防止访问父页面DOM、读写Cookie、本地存储数据库等。

5、内建3D技术支持，无需插件即可将网页3D化，还规定了一套适合网页使用的3D图形接口界面，支持脚本化运行。

6、引入更多创建Web应用的API，如文件拖放、视频播放、音频播放、离线Web应用等。

 

    新标签 :

语意化更好的内容元素，比如 article、footer、header、nav、section

   CSS3新增伪类有哪些？

:first-of-type    p:first-of-type    选择属于其父元素的首个
 元素的每个
 元素。     
:last-of-type    p:last-of-type    选择属于其父元素的最后
 元素的每个
 元素。
:only-of-type    p:only-of-type    选择属于其父元素唯一的
 元素的每个
 元素。
:only-child    p:only-child    选择属于其父元素的唯一子元素的每个
 元素。
:nth-child(n)    p:nth-child(2)    选择属于其父元素的第二个子元素的每个
 元素。
:nth-last-child(n)    p:nth-last-child(2)    同上，从最后一个子元素开始计数。
:nth-of-type(n)    p:nth-of-type(2)    选择属于其父元素第二个
 元素的每个
 元素。   
:nth-last-of-type(n)    p:nth-last-of-type(2)    同上，但是从最后一个子元素开始计数。     
:last-child    p:last-child    选择属于其父元素最后一个子元素每个
 元素。  
:root    :root    选择文档的根元素。   
:empty    p:empty    选择没有子元素的每个
 元素（包括文本节点）。  
:target    #news:target    选择当前活动的#news元素。
:enabled    input:enabled    选择每个启用的元素。  
:disabled    input:disabled    选择每个禁用的元素  
:checked    input:checked    选择每个被选中的元素。  
:not(selector)    :not(p)    选择非 元素的每个元素。
::selection    ::selection    选择被用户选取的元素部分。

      请描述一下cookies,sessionStorage,localStroage的区别？

共同点：都是保存在浏览器端，且同源的。

区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage的api 接口使用更方便。

    还有什么实现动画的方法？

css3动画有哪些实现方式？
Transitions 、transforms和Animations
Transitions特点：平滑的改变CSS的值
transforms特点：变换主要实现（拉伸，压缩，旋转，偏移）
Animations特点：适用于CSS2，CSS3

JavaScript部分

5.Jquery库，bind和live的区别，有没有更好的方法替代他们？

live方法其实是bind方法的变种，其基本功能就同bind方法的功能是一样的，都是为一个元素绑定某个事件，但是bind方法只能给当前存在的元素 绑定事件，对于事后采用JS等方式新生成的元素无效，而live方法则正好弥补了bind方法的这个缺陷，它可以对后生成的元素也可以绑定相应的事件。

 

（1）bind方法可以绑定任何JavaScript的事件，而live方法在jQuery1.3的时候只支持click, dblclick, keydown, keypress, keyup,mousedown, mousemove, mouseout, mouseover, 和 mouseup.在jQuery 1.4.1中，甚至也支持 focus 和 blue事件了（映射到更合适，并且可以冒泡的focusin和focusout上）。另外，在jQuery 1.4.1中，也能支持hover（映射 到"mouseenter mouseleave"）。

    （2）live() 并不完全支持通过DOM遍历的方法找到的元素。取而代之的是，应当总是在一个选择器后面直接使用 .live() 方法。

    （3）当一个元素采用live方法进行事件的绑定的时候，如果想阻止事件的传递或冒泡，就要在函数中return false,仅仅调用stopPropagation()是无法实现阻止事件的传递或者冒泡的

 

 

6.JS实现效果 点击li alert（）对应的下标

7.谈谈你对javascript继承的理解，用实例或者伪代码表示

8.谈谈this对象的理解

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。

但是总有一个原则，那就是this指的是调用函数的那个对象。

this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象

9.写一个事件委托的方法注意兼容性

var target = document.getElementById("ulele");

EventListener = {

addListener:function(target, type, handler){

if(document.addEventListener){

target.addEventListener(type, handler, false);

}else if(document.attachEvent){

target.attachEvent("on" + type, handler);

}else{

target["on" + type] = handler;

}

},

removeListener:function(target, type, handler){

if(document.removeEventListener){

target.removeEventListener(type, handler, false);

}else if(document.detachEvent){

target.detachEvent("on" + type, handler);

}else{

target["on" + type] = null;

}

}

}

EventListener.addListener(target, "click", clickHandler);

//EventListener.removeListener(target, "click", clickHandler);

function clickHandler(e){

var e = e || event, target = e.target || e.srcElement;

/* if (e.preventDefault) { e.preventDefault();//IE以外 } else { e.returnValue = false;} return false 只能取消元素 stopPropagation() cancelBubble()*/

if(target.nodeName.toLowerCase() == "li"){

alert("pageX:"+ (e.pageX || e.x)  + ";pageY:" + (e.pageY || e.y));

}

}

10.JS实现数组去重怎么实现？

 

11.如何处理HTMl新标签的浏览器兼容问题？如何区分HTML 和 HTML5？

处理兼容问题有两种方式：
1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
2.使用是html5shim框架
另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。

12.简述一下你对HTML语义化的理解？

语义化就是指用w3c规范中指定意义的标签包含相应的内容 就是语义化

 

13.简述几个csshack

cssHack包括

IE6    _width  下划线

IE7    *width   *    

IE8/9  width:100px

IE8/9 width:100px; 

IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。

 

14.iframe有哪些缺点？

1、页面样式调试麻烦，出现多个滚动条；
2、浏览器的后退按钮失效；
3、过多会增加服务器的HTTP请求；
4、小型的移动设备无法完全显示框架；
5、产生多个页面，不易管理；
6、不容易打印；
7、代码复杂，无法被一些搜索引擎解读。

18.请描述一下cookies，sessionStorage和localStorage的区别

localStorage    长期存储数据，浏览器关闭后数据不丢失；
sessionStorage  数据在浏览器关闭后自动删除。

cookie数据始终在同源的http请求中携带（即使不需要）

19.transform和animation的区别？

transfrom 是变换。transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形，对于做设计的人来说并不是很陌生，简单的来说就是css的图形变形工具。

animate 是动画里面的keyframes提供更多的控制，尤其是时间轴的控制，这点让css animation更加强大

20.link和@import的区别?

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

21.px，em，rem的区别

PX特点 像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的

1. IE无法调整那些使用px作为单位的字体大小；

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

EM特点 

1. em的值并不是固定的；

2. em会继承父级元素的字体大小。

REM特点:

rem是CSS3新增的一个相对单位（root em，根em），

Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值

2017.11.6

去掉h5页面点击时的背景阴影效果

-webkit-tap-highlight-color: rgba(255,255,255,0);