WEB前端面试题

 

3.结合<span id="outer"><span id="inner">text</span></span>这段结构，谈谈innerHTML outerHTML innerText之间的区别。

innerHTML:对象里面的HTML内容，这里是<span id="inner">text</span>

outerHTML:对象里面包括对象本身的HTML内容，这里是<span id="outer"><span id="inner">text</span></span>

innerText:对象里面的文本内容，这里是text

 

4.说几条XHTML规范的内容。

 

1）标签名必须用小写字母。

2）所有标签都必须被关闭，包括空标签。

3）属性值必须加引号。

4）用Id属性代替name属性。

5）所有XHTML文档必须进行文件类型声明。

 

5.对Web标准化（或网站重构）知道哪些相关知识，简述几条你知道的Web标准？

 

为什么要使用web标准？

1）具有更好的兼容性。

2）易于代码维护和开发。

3）可增加网站的访问量。

4）标准的web文档更易被转换为其他格式。

5）更易被搜索引擎访问，也更易被准确索引。

6）更易被JavaScript和DOM代码访问。

 

W3C标准：HTML、XHTML、CSS、XML、XSL、DOM。

 

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

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

HTML Strict DTD

如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "

http://www.w3.org/TR/html4/strict.dtd">

HTML Transitional DTD

Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 HTML 的呈现特性时，请使用此类型：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

http://www.w3.org/TR/html4/loose.dtd">

Frameset DTD

Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "

http://www.w3.org/TR/html4/frameset.dtd">

 

  1. 2.        块级元素和行内元素都有哪些?

块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。   

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。   

 

  1. 2.          介绍CSS盒模型。

CSS盒子模型

　　网页设计中的每个元素都是长方形的盒子。怎样精确的计算盒子的尺寸？请看下面一幅图：

　　

　　盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。

　　如果你是一个Firebug的用户，就会很熟悉下面的图表了。这个图表很好地展示了作用于页面上任意盒子的数值。

　　

　　注意到上面两个例子中，margin都是白色的，margin 比较特别，它不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容，因此 margin 是盒模型的一个重要的组成部分。

 

HTML5新增结构元素

之前，我们只能用万能的div标签，并为其设置不同的id如header, footer, sidebar等来分别表达头部，底部或者侧栏等。而现在代码编写者不再需要为id的命名费尽心思，对于手机、阅读器等设备更有语义的好处。

HTML 5增加了新的结构元素来表达这些最常用的结构：

  1. section: 这可以表达书本的一部分或一章，或者一章内的一节
  2. header: 页面主体上的头部。并非head元素
  3. footer: 页面的底部（页脚），可以是一封邮件签名的所在
  4. nav: 到其他页面的链接集合
  5. article: 诸如blog, 杂志，纲要等之中的一条独立记录

 

二、HTML5新增块级元素

  1. aside: 定义页面内容之外的内容，比如侧边栏
  2. figure: 定义媒介内容的分组，以及它们的标题
  3. figcaption: 媒介内容的标题说明
  4. dialog: 定义对话（会话）

aside可以用以表达注记、贴士、侧栏、摘要、插入的引用等诸如作为补充主体的内容。比如这样表达blog的侧栏：

 

dialog元素用于表达人们之间的对话。在HTML 5中，dt用于表示说话者，而dd则用来表示说话者的内容。如：

三、HTML5新增行内语义标签元素

  1. mark: 定义有记号的文本
  2. time: 定义日期/时间
  3. meter: 定义预定义范围内的度量
  4. progress: 定义运行中的进度（进程）

mark元素用来标记一些不是那么需要着重强调的文本。

time元素如其名，用来表达时间。它需要一个datetime的特性来标明机器能够认识的时间，如：

meter元素表达特定范围内的数值。可用于薪水、百分比、分数等。比如：

可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。

四、HTML5新增行交互性标签元素

  1. details: 定义元素的细节
  2. datagrid: 定义树列表 (tree-list) 中的数据
  3. datalist: 定义选项列表
  4. menu: 定义菜单列表
  5. command: 定义命令按钮

details用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如点击）与legend交互才显示出来。这跟现在各种通过JavaScript隐藏一段内容，在点击后才显示出来的做法有些类似。比如：

datagriddatagrid用来控制数据，可以由用户或者脚本来更新，比如：

datalist 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被想显示出来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。

menu 在HTML 2就存在了，不过HTML 4把它废弃了。HTML 5废物利用，并在期内加上command元素。autosubmit为true时，表单控件改变时自动提交。label为菜单定义一个可见的标注，type是表现的方式，默认为list，还有context和toolbar。

 

五、HTML5新增行多媒体标签元素

  1. video: 定义视频
  2. audio: 定义音频
  3. source: 媒介元素（比如 <video> 和 <audio>）定义媒介资源

video标签定义视频，比如电影片段或其他视频流：

audio标签定义声音，比如音乐或其他音频流：

 

层叠样式优先级可以表述为：!important >行内样式>ID样式>类别样式>标记样式

 

  1. CSS浏览器兼容性问题。

需要注意的一些兼容细节 

1, FF下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会. 

解决办法：给DIV设定IE、FF两个宽度，在IE的宽度前加上IE特有标记" * "号。 
2, 页面居中问题. 

body {TEXT-ALIGN: center;} 在IE下足够了，但FF下失效。 

解决办法：加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; " 

3, 有的时候在IE6上看见一些奇怪的间隙，可我们高度明明设好了呀。 

解决办法：试试在有空隙的DIV上加上"font-size:0px;" 

4, 关于手形光标. cursor: pointer. 而hand 只适用于 IE. 

5, 浮动IE6产生的双倍距离 

#box{ float:left;  
width:100px;  
margin:0 0 0 100px;  
}  
这种情况之下IE6会产生200px的距离 

解决办法：加上display:inline，使浮动忽略 

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);  
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 

6 页面的最小宽度 

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里 这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重 要的。 

解决办法：为了让这一命令在IE上也能用，可以把一个〈div〉 放到 〈body〉 标签下，然后为div指定一个类：  
然后CSS这样设计：  
#container{  
min-width: 600px;  
width:e­xpression(document.body.clientWidth 〈 600? “600px”: “auto” );  
}  
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 

 

CSS3中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。

2:圆角

 

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

在这里，我们添加了两行类似的代码，-moz-适用于Firefox浏览器，而-webkit-则是用于Safari/Chrome浏览器。

注:目前为止IE浏览器不支持border-radius属性，所以如果想让IE也有圆角效果，那么就要单独添加圆角了。

3:个别的圆角 

-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
4:以CSS3的方式修改不透明度

 

filter: alpha(opacity=30);//IE

            -moz-opacity: 0.3;

            -webkit-opacity: 0.3

            -khtml-opacity: 0.3;

            opacity: 0.3; 

5:阴影效果

 

 

以下为引用的内容：

-webkit-box-shadow: 3px 5px 10px #ccc;

 

下面我来解释一下这四个值都代表什么，第一个3px是指定阴影与div元素之间的水平(横向)距离，第二个5px指的是阴影与div之间的垂直(纵向)距离，第三个10px指的是阴影的模糊度(类似于photoshop中的羽化)，值越大越细腻。最后的值不说大家也知道，就是阴影的颜色。

6:调整大小

  

resize: both;

overflow: auto;

在这里主要说一下resize和overflow属性，resize:both;的意思就是所有边都可以调整尺寸，它的值还有horizontal和vertical，顾名思义，就是横向和纵向。而overflow是为了配合resize工作的，在这里使用auto.

 

 http（超文本传输协议）是一个基于请求与响应模式的、无状态的、应用层的协议，常基于TCP的连接方式

HTTP协议的状态消息都有哪些

200 OK

请求成功（其后是对GET和POST请求的应答文档。）

302 Found

所请求的页面已经临时转移至新的url。

404 Not Found

服务器无法找到被请求的页面。
  1. 2.           AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?

AJAX 指异步JavaScript 及XML,AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。

交互的基本过程包括：

l         创建XMLHttpRequest对象；

l         发送请求；

l         处理响应。

解决的办法，大概有如下几种：

1. 使用中间层过渡的方式（可以理解为“代理”）：

中间过渡，很明显，就是在AJAX与不同域的服务器进行通讯的中间加一层过渡，这一层过渡可以是PHP、JSP、c++等任何具备网络通讯功能的语言，由中间层向不同域的服务器进行读取数据的操作。

2. 使用＜script＞标签

这个方法是利用＜script＞标签中的src来query一个aspx获得response，因为＜script＞标签的src属性不存在跨域的问题。

同步与异步传输的区别

1,异步传输是面向字符的传输，以数据块为传输单位。每个数据块的头部和尾部都要附加一个特殊的字符或比特序列，标记一个数据块的开始和结束，一般还要附加一个校验序列。
2,异步传输的单位是字符而同步传输的单位是桢。
3,异步传输通过字符起止的开始和停止码抓住再同步的机会，而同步传输则是以数据中抽取同步信息。
4,异步传输对时序的要求较低，同步传输往往通过特定的时钟线路协调时序。
5,异步传输相对于同步传输效率较低。

  1. 4.           简述JavaScript封装。

在面向对象的语言中，我们使用类来创建一个自定义对象。然而JavaScript中所有事物都是对象，那么用什么办法来创建自定义对象呢？

这就需要引入另外一个概念 - 原型（prototype），我们可以简单的把prototype看做是一个模版，新创建的自定义对象都是这个模版（prototype）的一个拷贝 （实际上不是拷贝而是链接，只不过这种链接是不可见，给人们的感觉好像是拷贝）。

让我们看一下通过prototype创建自定义对象的一个例子：

 

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

// 构造函数

   function Person(name, sex) {

       this.name = name;

       this.sex = sex;

   }

   // 定义Person的原型，原型中的属性可以被自定义对象引用

   Person.prototype = {

       getName: function() {

           return this.name;

       },

       getSex: function() {

           return this.sex;

       }

   }

 

这里我们把函数Person称为构造函数，也就是创建自定义对象的函数。可以看出，JavaScript通过构造函数和原型的方式模拟实现了类的功能。 
创建自定义对象（实例化类）的代码：

 

?

1

2

3

4

var zhang = new Person("ZhangSan", "man");

console.log(zhang.getName()); // "ZhangSan"

var chun = new Person("ChunHua", "woman");

console.log(chun.getName()); // "ChunHua"

 

当代码var zhang = new Person("ZhangSan", "man")执行时，其实内部做了如下几件事情：

  • ·创建一个空白对象（new Object()）。
  • ·拷贝Person.prototype中的属性（键值对）到这个空对象中（我们前面提到，内部实现时不是拷贝而是一个隐藏的链接）。
  • ·将这个对象通过this关键字传递到构造函数中并执行构造函数。
  • ·将这个对象赋值给变量zhang。

JavaScript继承有哪两种形式形式，进行描述。

1.   对象冒充

      对象冒失是在函数环境中使用this关键字后发展出来的一种继承方式。其原理如下：构造函数使用this关键字给所有属性和方法赋值（即采用类声明的构造 函数方式）。因为构造函数只是一个函数，所以可使ClassA的构造函数成为ClassB的方法，然后调用它。ClassB就会收到ClassA的构造函 数中定义的属性和方法。例如，用下面的方式定义ClassA和ClassB：

      function ClassA (sColor) {

          this.color = sColor;

          this.sayColor = funciton() {

              alert(this.sColor);

          };

      }

 

      function ClassB (sColor) {

      }

      还记得吗，关键字this引用的是构造函数当前创建的对象，不过在这个方法中，this指向的是所属的对象。这个原理是把ClassA作为常规函数来建立继承机制，而不是作为构造函数。如下使用构造函数ClassB可以实现继承机制：

      function ClassB (sColor) {

           this.newMethod = ClassA;

           this.newMethod(sColor);

           delete this.newMethod;

      }

      在这段代码中，位ClassA赋予了方法newMethod。然后调用该方法，传递给它的是ClassB的构造参数sColor。最后 一行代码删除了对ClassA的引用，这样以后就不能在调用它。所有的新属性和新方法都必须在删除了新方法的代码行后定义，否则，可能会覆盖超类的相关属 性和方法。

      有意思的是，对象冒充可以支持多重继承，也就是说，一个类可以继承多个超类。如，如果存在两个类ClassX和ClassY，ClassZ想继承这两个类，可以使用下面的代码：

       function ClassZ {

            this.newMethod = ClassX;

            this.newMethod();

            delete this.newMethod;

      

            this.newMethod = ClassY;

            this.newMethod();

            delete this.newMethod;

       }

       不过，这里存在一个弊端，如果ClassX和ClassY具有同名的属性或方法，ClassY具有高优先级，因为它从后面的类继承。

 

2.    call()方法

       call()方法是与经典的对象冒充方法最相似的方法。它的第一个参数用作this的对象，其他参数都直接传递给函数自身。例如：

        function sayColor(sPrefix, sSuffix) {

              alert(sPrefix + this.color + sSuffix);

        }

 

        var obj = new Object();

        obj.color = "red";

        sayColor.call(obj, "Color is", ", a nice color");       // output: Color is red, a nice color

        在这个例子中，函数sayColor()在对象外定义，即使它不属于任何对象，也可以应用关键字this。对象obj的color属性等于"red"。调 用call()方法时，第一个参数是obj，说明应该赋予sayColor()函数中的this关键字值是obj。第二个和第三个参数是字符串。它们与 sayColor()函数中的参数sPrefix和sSuffix匹配。

        要与继承机制的对象冒充方法一起使用该方法，只需将前三行的赋值、调用和删除代码替换即可：

        function ClassB(sColor, sName) {

              //this.newMethod = ClassA;

              //this.newMethod();

              //delete this.newMethod;

              ClassA.call(this, sColor);

 

              this.name = sName;

              this.sayName = function() {

                   alert(this.name);

              };

        }

        这里，想让ClassA中的关键字this等于新创建的ClassB对象，因此this是第一个参数。第二个参数sColor对两个类来说都是唯一的参数。

 

3.    apply()方法

       apply()方法有两个参数，用作this的对象和要传递给函数的参数的数组。如：

        function sayColor(sPrefix, sSuffix) {

              alert(sPrefix + this.color + sSuffix);

        }

        var obj = new Object();

        obj.color = "red";

        sayColor.apply(obj, new Array("the color is ", ", a nice color"));

        这个例子与前面的例子相同，只是现在调用的是apply()方法。调用apply()方法时，第一个参数仍是obj，说明应赋予sayColor()中的 this关键字值obj。第二个参数是由两个字符串构成的数组，与sayColor()的参数sPrefix和sSuffix匹配。

        该方法也用于替换前三行的赋值、调用和删除新方法的代码：

         function ClassB(sColor, sName) {

               //this.newMethod = ClassA;

               //this.newMethod(sColor);

               //delete this.newMethod;

               ClassA.apply(this, new Array(sColor));

 

                this.name = sName;

                this.sayName = function() {

                      alert(this.name);

                };

          }

          同样的，第一个参数仍是this。第二个参数是只有一个值color的数组。可以把ClassB的整个arguments对象作为第二个参数传递给apply()方法：

          function ClassB(sColor, sName) {

                //this.newMethod = ClassA;

                //this.newMethod(sColor);

                //delete this.newMethod;

                ClassA.apply(this, arguments);

 

                 this.name = sName;

                 this.sayName = function() {

                       alert(this.name);

                 };

           }

           当然，只有超类中的参数顺序与子类中的参数顺序完全一致时才可以传递参数对象。如果不一致，就必须创建一个单独的数组，按照正确的顺序放置参数。

 

4.    原型链

       我们知道，prototype对象其实是个模板，要实例化的对象都以这个模板为基础，prototype对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能来实现继承机制。

       如果用原型方式重定义前面的例子中的类，它们将变为下列形式：

       function ClassA() {

       }

       ClassA.prototype.color = "red";

       ClassA.prototype.sayColor = function() {

               alert(this.color);

       };

       function ClassB() {

       }

       ClassB.prototype = new ClassA();

       这里，把ClassB的prototype属性设置成ClassA的实例，这样就可以得到ClassA的所有属性和方法。

       注意：调用ClassA的构造函数时，没有给它传递参数。这在原型链中时标准做法。要确保构造函数没有任何参数。

       与对象冒充相似，子类的所有属性和方法都必须出现在prototype属性被赋值后，因为在它之前赋值的所有方法都会被删除，因为prototype属性 被替换成了新对象，添加了新方法的原始对象将被销毁。所以，为ClassB类添加name属性和sayName()方法的代码如下：

        function ClassB() {

        }

        ClassB.prototype = new ClassA();

        ClassB.prototype.name = "";

        ClassB.prototype.sayName = function() {

                 alert(this.name);

        };

        此外，在原型链中，instanceof运算符的运行方式也很独特。对ClassB的所有实例，instanceof为ClassA和ClassB都返回true。

 

JQuery 源码：

append: function() {

                                return this.domManip(arguments, true, function( elem ) {

                                                if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {

                                                                this.appendChild( elem );

                                                }

                                });

                },

 

                prepend: function() {

                                return this.domManip(arguments, true, function( elem ) {

                                                if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {

                                                                this.insertBefore( elem, this.firstChild );

                                                }

                                });

                },

 

                before: function() {

                                return this.domManip( arguments, false, function( elem ) {

                                                if ( this.parentNode ) {

                                                                this.parentNode.insertBefore( elem, this );

                                                }

                                });

                },

 

                after: function() {

                                return this.domManip( arguments, false, function( elem ) {

                                                if ( this.parentNode ) {

                                                                this.parentNode.insertBefore( elem, this.nextSibling );

                                                }

                                });

                },

你可能感兴趣的:(web前端)