您的位置: 首页  >  文章  >  前端面试整理********************************************************

前端面试整理********************************************************

分类: 文章 • 2024-06-25 18:50:58

 HTML语义化？

1、什么是HTML语义化？

<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>

　　根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2、为什么要语义化？

  • 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
  • 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
  • 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
  • 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3、写HTML代码时应注意什么？

  • 尽可能少的使用无语义的标签div和span；
  • 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
  • 不要使用纯样式标签，如：b、font、u等，改用css设置。
  • 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
  • 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
  • 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
  • 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

 4、HTML5新增了哪些语义标签，详述之。






MVC面试问题与答案

读这篇文章不意味着你一定要去并且能搞定MVC面试。这篇文章的目的是在面试之前让你快速复习MVC知识。这篇文章也不是MVC培训课程。

如果你想学习MVC，从这儿开始  Learn MVC ( Model view controller) step by step 7 days  ï¼Œæˆ–者是  step by step MVC (Model View Controller) video series from YouTube.  

什么是MVC (模型 视图 控制器)?

MVC是一个架构模式，它分离了表现与交互。它被分为三个核心部件：模型、视图、控制器。下面是每一个部件的分工：

  • 视图是用户看到并与之交互的界面。
  • 模型表示业务数据，并提供数据给视图。
  • 控制器接受用户的输入并调用模型和视图去完成用户的需求。

  • MVC

    的优缺点有？

     

     

     

     

    答：

     

     

    优点：

     

    ⑴产品结构清晰

       

    ⑵易于维护

      

    ⑶满足用户的需求

      

    ⑷

     

    有利于软件工程化管理

     

    缺点：

     

    ⑴增加了系统结构的复杂性

       

    ⑵视图与控制器间的过于紧密的链接

      

    ⑶视图对模型数据的

    低效率访问



    MVC的优缺点有？     答：  ä¼˜ç‚¹ï¼š  â‘´äº§å“ç»“构清晰   ⑵易于维护  â‘¶æ»¡è¶³ç”¨æˆ·çš„需求  â‘· 有利于软件工程化管理  
  • 缺点：  â‘´å¢žåŠ äº†ç³»ç»Ÿç»“构的复杂性   ⑵视图与控制器间的过于紧密的链接  â‘¶è§†å›¾å¯¹æ¨¡åž‹æ•°æ®çš„低效率访问

    MVC

    的优缺点有？

     

     

     

     

    答：

     

     

    优点：

     

    ⑴产品结构清晰

       

    ⑵易于维护

      

    ⑶满足用户的需求

      

    ⑷

     

    有利于软件工程化管理

     

    缺点：

     

    ⑴增加了系统结构的复杂性

       

    ⑵视图与控制器间的过于紧密的链接

      

    ⑶视图对模型数据的

    低效率访问



前端面试整理********************************************************

图: MVC (模型、视图、控制器)

下面是MVC（模型、视图、控制器）架构的控制流程：

  • 所有的终端用户请求被发送到控制器。
  • 控制器依赖请求去选择加载哪个模型，并把模型附加到对应的视图。
  • 附加了模型数据的最终视图做为响应发送给终端用户。

相比Windows应用，MVC架构更适用于Web应用。对于Windows应用，MVP(Model View Presenter )架构更好一点。如果你使用WPF和Silverlight，MVVM更适合。

MVC有两个大的好处：

  • 分离了关注点。后台代码被移到单独的类文件，我们可以最大限度的重复利用代码。
  • 自动化UI测试成为可能，因为后台代码移到了.NET类。这让我们更容易做单元测试和自动化测试。

MVC是三层传统架构的演变。三层架构和MVC有一些通用的组成部分。 显示如下：

功能性 三层 / 分层架构 Model view controller architecture
显示与交互 用户界面 视图
UI逻辑 用户界面 控制器
商业逻辑 / 验证 中间层 模型
请求首先发送给谁？ 用户界面 控制器
访问数据 数据链接层 数据链接层

前端面试整理********************************************************

图示: 三层架构

在写这篇文章时MVC已经发行了4个版本：MVC 1 , MVC 2, MVC 3, 和 MVC 4. 所以 MVC 4是最新版本。

下面的表格列出了详细的不同点。但是在面试中限于时间问题，很难去说出所有的东西。所以，我标出了所有重要区别。



前几天去面试了一家公司，整下改公司的面试题。

1.新的 HTML5 文档类型和字符集是？

HTML5 文档类型很简单：

<!doctype html>

HTML5 使用 UTF-8 编码示例：

<meta charset="UTF-8">

2.HTML5 中如何嵌入音频？

当前，audio 元素支持三种音频格式：

前端面试整理********************************************************

前端面试整理********************************************************
<!-- control 属性供添加播放、暂停和音量控件 -->
<!-- audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式 -->
<audio controls="controls">
    <source src=”jamshed.mp3″ type=”audio/mpeg”>
    <source src=”jamshed.ogg″ type=”audio/ogg”>
    Your browser does’nt support audio embedding feature.
</audio>
前端面试整理********************************************************

3.HTML5 中如何嵌入视频？

当前，video 元素支持三种视频格式：

前端面试整理********************************************************

<!-- 跟 audio 元素一样 -->
<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

4.除了 audio 和 vidio，HTML5还有哪些媒体标签？

<embed> 标签定义嵌入的内容，比如插件。

<embed src="helloworld.swf" />

<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

<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>

5.HTML5 存储类型有什么区别？

HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案：

  • localStorage - 没有时间限制的数据存储，数据永远不会过期，关闭浏览器也不会丢失
  • sessionStorage - 针对一个 session 的数据存储，同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

6.HTML5 canvas 元素有什么作用？

用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML5 上进行图形操作

前端面试整理********************************************************
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        var canvas=document.getElementById('canvas');
        var ctx=canvas.getContext('2d');
        ctx.fillStyle='#FF0000';
        ctx.fillRect(0,0,200,200);
    </script>
</body>
</html>
前端面试整理********************************************************

效果：

前端面试整理********************************************************

7.HTML5 有哪些新增的表单元素？

新的input类型：

前端面试整理********************************************************

新的表单元素：

前端面试整理********************************************************

8.HTML5 废弃了那些 HTML4 标签？

前端面试整理********************************************************

9.HTML5 标准提供了哪些新的API？

1：canvas，不用多说，可以画出很多绚丽的图形，甚至可以直接做出伪3D游戏。

2：媒体控制，也很好理解(直译就是回放功能，假如只用html5.0以下的标签写，以前的音乐播放是不可能实现滚动条的。)

3：离线网页程序，可以把资源文件完全缓存在客户端，并且通过js的一些方法清空缓存

4：文档编辑，应该是更好的支持对文档的编辑。

5：拖动，可以将文件拖动到某些区域上传

6：跨文档请求，websocket，一种更加高效的通讯方式

7：历史管理，可以通过js管理和插入历史记录

8：MIME头自定义

9：客户端数据存储，localstoage sessionstoage

10：地理位置共享

11：本地数据库

12：索引数据库

10.HTML5 应用程序缓存和浏览器缓存有什么区别？

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

　　离线浏览 - 用户可在应用离线时使用它们

　　速度 - 已缓存资源加载得更快

　　减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

实现借助于 manifest 文件

<html manifest="demo.appcache">

11.doctype 作用？严格模式与混合模式如何区分？它们有何意义？

<!DOCTYPE> 声明可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示

前端面试整理********************************************************
<!-- HTML4.01文档严格定义类型，此类型定义的文档可以使用HTML中的标签与元素，不能包含不被W3C推荐的标签，不可以使用框架 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- HTML4.01文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签，不可以使用框架 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML4.01文档框架定义类型，此类型等同于HTML4.01文档过渡定义类型，但可以使用框架 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


<!-- XHTML1.0文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签，不可以使用框架 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XHTML1.0文档严格定义类型，此类型定义的文档只可以使用HTML中定义的标签与元素，不能包含不被W3C推荐的标签，不可以使用框架 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- XHTML1.0文档框架定义类型，等同于XHTML1.0文档过渡定义类型，但可以使用框架 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


<!-- XHTML1.1文档严格定义类型，等同于XHTML1.0文档过渡定义类型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
前端面试整理********************************************************

12.行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

块级元素：

　　address - åœ°å€   　　　　

　　blockquote - å—引用   

　   center - ä¸¾ä¸­å¯¹é½å—   

　　dir - ç›®å½•åˆ—表   

　　div - å¸¸ç”¨å—级容易，也是css layout的主要标签   

　　dl - å®šä¹‰åˆ—表   

　　fieldset - form控制组   

　　form - äº¤äº’表单   

　　h1 - å¤§æ ‡é¢˜   

　　h2 - å‰¯æ ‡é¢˜   

　　h3 - 3级标题   

　　h4 - 4级标题   

　　h5 - 5级标题   

　　h6 - 6级标题   

　　hr - æ°´å¹³åˆ†éš”线   

　　isindex - input prompt   

　　menu - èœå•åˆ—表   

　　noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容   

　　noscript - å¯é€‰è„šæœ¬å†…容（对于不支持script的浏览器显示此内容）   

　　ol - æŽ’序表单   

　　p - æ®µè½   

　　pre - æ ¼å¼åŒ–文本   

　　table - è¡¨æ ¼   

　　ul - éžæŽ’序列表 

行级元素：

　　a - é”šç‚¹   

　　abbr - ç¼©å†™   

　　acronym - é¦–å­—   

　　b - ç²—体(不推荐)   

　　bdo - bidi override   

　　big - å¤§å­—体   

　　br - æ¢è¡Œ   

　　cite - å¼•ç”¨   

　　code - è®¡ç®—机代码(在引用源码的时候需要)   

　　dfn - å®šä¹‰å­—段   

　　em - å¼ºè°ƒ   

　　font - å­—体设定(不推荐)   

　　i - æ–œä½“   

　　img - å›¾ç‰‡   

　　input - è¾“入框   

　　kbd - å®šä¹‰é”®ç›˜æ–‡æœ¬   

　　label - è¡¨æ ¼æ ‡ç­¾   

　　q - çŸ­å¼•ç”¨   

　　s - ä¸­åˆ’线(不推荐)   

　　samp - å®šä¹‰èŒƒä¾‹è®¡ç®—机代码   

　　select - é¡¹ç›®é€‰æ‹©   

　　small - å°å­—体文本   

　　span - å¸¸ç”¨å†…联容器，定义文本内区块   

　　strike - ä¸­åˆ’线   

　　strong - ç²—体强调   

　　sub - ä¸‹æ ‡   

　　sup - ä¸Šæ ‡   

　　textarea - å¤šè¡Œæ–‡æœ¬è¾“入框   

　　tt - ç”µä¼ æ–‡æœ¬   

　　u - ä¸‹åˆ’线  

空元素，没有内容的 HTML 元素被称为空元素： 

　　<br> - 定义换行

　　<hr> - åˆ†å‰²çº¿

　　<img>

　　<input>

13.link 和 @import 的区别是？

引用CSS的两种方式：

<link rel="stylesheet" href="taojiaqu.css" type="text/css" />

<style type="text/css">@import url(taojiaqu.css) </style>

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

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

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

4.link支持使用Javascript控制DOM去改变样式；而@import不支持。

14.浏览器的内核分别是什么？

Trident(IE内核)，是微软开发的一种排版引擎。

Gecko(Firefox内核)，是一套开放源代码的、以C++编写的网页排版引擎。

Presto(Opera前内核) (已废弃)。

Webkit(Safari内核,Chrome内核原型,开源)。

15.常见兼容性问题及解决方案？

1.清除图片下方出现几像素的空白间隙

img{display:block;}
img{vertical-align:top;}

2.不同浏览器的标签默认的外边距和内边距不同

*｛margin:0;padding:0｝

这个还有很多，之后再来整一篇。有些遇到了才会发现...

16.用js写个原生的ajax过程

前端面试整理********************************************************
window.onload=function(){
    document.getElementsByTagName('a')[0].onclick=function(){
        if (window.XMLHttpRequest){
            var xmlhttp=new XMLHttpRequest();
        }else{
            var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        var method='GET';
        var url=this.href;
        xmlhttp.open(method,url);
        xmlhttp.send();
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4){
                if(xmlhttp.status==200||xmlhttp.status==304){
                    var txt=xmlhttp.responseText;
                    var json=eval('('+txt+')');
                    document.getElementById('name').innerHTML='姓名'+json.ruei.name;
                    document.getElementById('age').innerHTML='年龄'+json.ruei.age;
                    document.getElementById('job').innerHTML='工作'+json.ruei.job;
                }
            }
        }
        return false;
    }
}
前端面试整理********************************************************

17.请实现，鼠标点击页面中的任意标签，alert 该标签的名称（注意兼容性）

前端面试整理********************************************************
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert标签名</title>
</head>
<body>
    <div class="alert">div</div>
    <a href="javascript:;" class='alert'>a</a>
    <b class="alert">b</b>
    <script>
        function WClassName(className){
            if(document.getElementsByClassName){
                return document.getElementsByClassName(className);
            }else{
                var tag= document.getElementsByTagName("*");
                     var lengths=tag.length;
                var divs=[];
                for (var i=0; i<lengths; i++) {
                        if(tag[i].className==className){
                               divs.push(tag[i])
                        }
                    }
                return divs;
            }
        }
        window.onload=function(){
            var tagObj=WClassName('alert');
            for(var i=0,max=tagObj.length;i<max;i++){
                tagObj[i].onclick=function(){
                    alert(this.tagName);
                }
            }
        }
    </script>
</body>
</html>
前端面试整理********************************************************

18.请指出以下代码的性能问题，并进行优化。

前端面试整理********************************************************
var info="淘家趣（www.taojiaqu.com）是一个关注潮流的资讯类购物网站。";
info+="提供新鲜好玩的家装资讯，电子科技，家趣产品。";
info+="精选的趣家商品，创意的家趣装修。";
info+="淘-趣家优品，享-生活乐趣。";
info=info.split("，");
for(var i=0 in info){
    alert(info[i]);
};
前端面试整理********************************************************

更改后：

var info="淘家趣（www.taojiaqu.com）是一个关注潮流的资讯类购物网站。提供新鲜好玩的家装资讯，电子科技，家趣产品。精选的趣家商品，创意的家趣装修。淘-趣家优品，享-生活乐趣。";
info=info.split("，");
for(var i=0,max=info.length;i<max;i++){
    alert(info[i]);
}

火狐测试后，平均时间块2-3毫秒，有可以改进的还望指出...

19.请给出异步加载js方案，不少于两种。

默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。

1.defer（只支持IE）

<script type="text/javascript" defer="defer">
alert('taojiaqu');
</script>

 

2.async规定一旦脚本可用，则会异步执行，只适用于外部脚本

<script type="text/javascript" src="taojiaqu.js" async="async"></script>

 

3.创建script，插入到DOM中，加载完毕后callBack

前端面试整理********************************************************
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert标签名</title>
</head>
<body>
    <script>
    function loadScript(url, callback){
        var script = document.createElement("script")
        script.type = "text/javascript";
        if (script.readyState){ //IE
            script.onreadystatechange = function(){
                if (script.readyState == "loaded" || script.readyState == "complete"){
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else { //Others: Firefox, Safari, Chrome, and Opera
            script.onload = function(){
                callback();
            };
        }
        script.src = url;
        document.body.appendChild(script);
    }

    loadScript('http://www.taojiaqu.com/resource/public/jquery/jquery-1.11.2.min.js',function(){
        alert('ok');
    })
    </script>
</body>
</html>
前端面试整理********************************************************

 

20。请写出jquery绑定事件的方法，不少于两种。

.bind()是直接绑定在元素上

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。(live由于性能原因已经被废弃)

.delegate()则是更精确的小范围使用事件代理，性能优于.live()

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

1.无论使用bind、on、delegate、click(function())都是重复绑定，即绑定的同类型事件被放到一个事件队列中，依次执行，后绑定的事件不会替换之前绑定的，对于on使用off，delegate用undelegate，bind及click使用unbind来解除绑定，例如unbind(type)传递为事件类型，如果不传type则解出所有事件绑定；需要注意的是元素本身自带的事件无法unbind（如button1）

2.要绑定自定义事件，如'open'，以上函数都可以使用，但**需要使用trigger

3.建议使用on函数

前端面试整理********************************************************
$('.myClass').on({
    click:function(eleDom){ 
        ...do someting
    }, 
    dbclick:function(eleDom){ 
        ...do someting    
    } 
})
前端面试整理********************************************************

 



知识有限，写的东西有不足或者错误信息还望各路大神指点指点，共勉进步。
目前一直致力于淘家趣(www.taojiaqu.com)开发和完善。开发完善中我会不定时分享我的心得和体会。。
所谓成功，就是不停地经历失败，并且始终保持热情...

网页制作的中的一些工具代码

1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键
<table border oncontextmenu=return(false)><td>no</table> 可用于Table

2. <body onselectstart="return false"> 取消选取、防止复制

3. onpaste="return false" 不准粘贴

4. oncopy="return false;" oncut="return false;" 防止复制

5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

7. <input style="ime-mode:Disabled"> 关闭输入法

8. 永远都会带着框架
<script language="javascript"><!--
if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页
// --></script>

9. 防止被人frame
<SCRIPT LANGUAGE=javascript><!-- 
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>

10. <noscript><iframe src=*.html></iframe></noscript> 网页将不能被另存为

11. <input type=button value=查看网页源代码 
onclick="window.location = 'view-source:'+ 'http://www.****.net/'">

12. 怎样通过asp的手段来检查来访者是否用了代理
<% if Request.ServerVariables("HTTP_X_FORWARDED_FOR")<>"" then
response.write "<font color=#FF0000>您通过了代理服务器，"& _
"真实的IP为"&Request.ServerVariables("HTTP_X_FORWARDED_FOR")
end if
%>

13. 取得控件的绝对位置

//javascript
<script language="javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
</script>

//VBScript
<script language="VBScript"><!--
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName<>"BODY"
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
wend
msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"
end function
--></script>

14. 光标是停在文本框文字的最后
<script language="javascript">
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" onfocus="cc()">

15. 判断上一页的来源
asp:
request.servervariables("HTTP_REFERER")

java script:
document.referrer

16. 最小化、最大化、关闭窗口
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> 
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> 
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" value="Close"></OBJECT>

<input type=button value=最小化 onclick=hh1.Click()>
<input type=button value=最大化 onclick=hh2.Click()>
<input type=button value=关闭 onclick=hh3.Click()>
本例适用于IE

17. 
<%
'定义数据库连接的一些常量
Const adOpenForwardOnly = 0 '游标只向前浏览记录，不支持分页、Recordset、BookMark
Const adOpenKeyset = 1 '键集游标，其他用户对记录说做的修改将反映到记录集中，但其他用户增加或删除记录不会反映到记录集中。支持分页、Recordset、BookMark
Const adOpenDynamic = 2 '动态游标功能最强，但耗资源也最多。用户对记录说做的修改，增加或删除记录都将反映到记录集中。支持全功能浏览(ACCESS不支持)。
Const adOpenStatic = 3 '静态游标，只是数据的一个快照，用户对记录说做的修改，增加或删除记录都不会反映到记录集中。支持向前或向后移动

Const adLockReadOnly = 1 '锁定类型，默认的，只读，不能作任何修改
Const adLockPessimistic = 2 '当编辑时立即锁定记录，最安全的方式
Const adLockOptimistic = 3 '只有在调用Update方法时才锁定记录集，而在此前的其他操作仍可对当前记录进行更改、插入和删除等
Const adLockBatchOptimistic = 4 '当编辑时记录不会被锁定，而更改、插入和删除是在批处理方式下完成的

Const adCmdText = &H0001
Const adCmdTable = &H0002
%>

18. 网页不会被缓存
HTM网页
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者<META HTTP-EQUIV="expires" CONTENT="0">
ASP网页
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.cachecontrol = "no-cache"
PHP网页
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");

怎样让表单没有凹凸感？
<input type=text style="border:1 solid #000000"> 
或
<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom: 1 solid #000000"></textarea>

<div><span>&<layer>的区别？ 
<div>(division)用来定义大段的页面元素，会产生转行 
<span>用来定义同一行内的元素，跟<div>的唯一区别是不产生转行 
<layer>是ns的标记，ie不支持，相当于<div>


让弹出窗口总是在最上面:
<body onblur="this.focus();">

不要滚动条? 
让竖条没有: 
<body style='overflow:scroll;overflow-y:hidden'> 
</body> 
让横条没有: 
<body style='overflow:scroll;overflow-x:hidden'> 
</body> 
两个都去掉？更简单了 
<body scroll="no"> 
</body> 

怎样去掉图片链接点击后，图片周围的虚线？
<a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a>

电子邮件处理提交表单
<form name="form1" method="post" action="mailto:****@***.com" enctype="text/plain"> 
<input type=submit>
</form>

在打开的子窗口刷新父窗口的代码里如何写？
window.opener.location.reload()

如何设定打开页面的大小
<body onload="top.resizeTo(300,200);">

在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动 
<html><head> 
<STYLE> 
body 
{background-image:url(logo.gif); background-repeat:no-repeat; background-position:center } 
</STYLE> 
</head> 
<body bgproperties="fixed" > 
</body> 
</html> 

19. 检查一段字符串是否全由数字组成
<script language="javascript"><!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
// --></script>

20. 获得一个窗口的大小
document.body.clientWidth,document.body.clientHeight

21. 怎么判断是否是字符
if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");
else alert("全是字符");

22.TEXTAREA自适应文字行数的多少
<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">
</textarea>

23. 日期减去天数等于第二个日期
<script language=javascript>
function cc(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
}
cc("12/23/2002",2)
</script>

24. 选择了哪一个Radio
<HTML><script language="vbscript">
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
</script><BODY>
<INPUT name="radio1" type="radio" value="style" checked>Style
<INPUT name="radio1" type="radio" value="barcode">Barcode
<INPUT type="button" value="check" onclick="checkme()">
</BODY></HTML>

25.获得本页url的request.servervariables("")集合
Response.Write "<TABLE border=1><!-- Table Header --><TR><TD><B>Variables</B></TD><TD><B>value</B></TD></TR>"
for each ob in Request.ServerVariables
Response.Write "<TR><TD>"&ob&"</TD><TD>"&Request.ServerVariables(ob)&"</TD></TR>"
next
Response.Write "</TABLE>"

26.
本机ip<%=request.servervariables("remote_addr")%>
服务器名<%=Request.ServerVariables("SERVER_NAME")%>
服务器IP<%=Request.ServerVariables("LOCAL_ADDR")%>
服务器端口<%=Request.ServerVariables("SERVER_PORT")%>
服务器时间<%=now%>
IIS版本<%=Request.ServerVariables"SERVER_SOFTWARE")%>
脚本超时时间<%=Server.ScriptTimeout%>
本文件路径<%=server.mappath(Request.ServerVariables("SCRIPT_NAME"))%>
服务器CPU数量<%=Request.ServerVariables("NUMBER_OF_PROCESSORS")%>
服 务器解译引擎<%=ScriptEngine & "/"& ScriptEngineMajorVersion &"."&ScriptEngineMinorVersion&"."& ScriptEngineBuildVersion %>
服务器操作系统<%=Request.ServerVariables("OS")%>

27.ENTER键可以让光标移到下一个输入框
<input onkeydown="if(event.keyCode==13)event.keyCode=9">

28. 检测某个网站的链接速度：
把如下代码加入<body>区域中:
<script language=javascript>
tim=1
setInterval("tim++",100)
b=1

var autourl=new Array()
autourl[1]="www.njcatv.net"
autourl[2]="javacool.3322.net"
autourl[3]="www.sina.com.cn"
autourl[4]="www.nuaa.edu.cn"
autourl[5]="www.cctv.com"

function butt(){
document.write("<form name=autof>")
for(var i=1;i<autourl.length;i++)
document.write("<input type=text name=txt"+i+" size=10 value=测试中……> =》<input type=text name=url"+i+" size=40> =》<input type=button value=GO onclick=window.open(this.form.url"+i+".value)><br>")
document.write("<input type=submit value=刷新></form>")
}
butt()
function auto(url){
document.forms[0]["url"+b].value=url
if(tim>200)
{document.forms[0]["txt"+b].value="链接超时"}
else
{document.forms[0]["txt"+b].value="时间"+tim/10+"秒"}
b++
}
function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl[i]+"/"+Math.random()+" width=1 height=1 onerror=auto('http://"+autourl[i]+"')>")}
run()</script>

29. 各种样式的光标
auto ：标准光标
default ：标准箭头
hand ：手形光标
wait ：等待光标
text ：I形光标
vertical-text ：水平I形光标
no-drop ：不可拖动光标
not-allowed ：无效光标
help ：?帮助光标
all-scroll ：三角方向标
move ：移动标
crosshair ：十字标
e-resize
n-resize
nw-resize
w-resize
s-resize
se-resize
sw-resize
上面的错误
<body oncontextmenu="return false"> 将彻底屏蔽鼠标右键

这个是彻底的！但是在下觉得都是自欺欺人的东西
<script language="javascript">
<!--

if (window.Event) 
document.captureEvents(Event.MOUSEUP); 

function nocontextmenu() 
{
event.cancelBubble = true
event.returnvalue = false;

return false;
}

function norightclick(e) 
{
if (window.Event) 
{
if (e.which == 2 || e.which == 3)
return false;
}
else
if (event.button == 2 || event.button == 3)
{
event.cancelBubble = true
event.returnvalue = false;
return false;
}

}

document.oncontextmenu = nocontextmenu; // for IE5+
document.onmousedown = norightclick; // for all others
//-->
</script>





彻底禁止右键快捷菜单的出现呢？其实只要将上述代码做如下修改即可。 

< Script Language=javascript> 
function Click(){ 
alert('版权所有(C)2001 XXX工作室'); 
window.event.returnvalue=false; 
} 
document.oncontextmenu=Click; 
< /Script> 

这 样无论采取什么方式点击鼠标，都不会再出现快捷菜单了。不过值得注意的是，如果访问者直接在浏览器地址栏中键 入"javascript:alert(document.oncontextmenu='')"，就可以解除对右键菜单的屏蔽。对这类访问者怎样防范 呢？其实，把地址栏隐藏掉就可以了，具体方法见本文介绍的"屏蔽窗口菜单栏查看方式"。



屏蔽窗口菜单栏查看方式 

制作过网页的朋友都知道，对新打开窗口的各种属性可以进行控制，具体包括控制菜单栏、滚动条及地址栏是否可见等。如果把父窗口关闭，并将新打开窗口的菜单栏和地址栏隐藏，不就可以屏蔽窗口菜单栏查看方式了吗？实现代码如下: 

< Head> 
< Object id=closes type="application/x-oleobject" 
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"> 
< Param name="Command" value="Close"> 
< /Object> 
< /Head> 
< Body> 
< Script Language=javascript> 
closes.Click() 
window.open("XXX.htm","","menubar=no,location=no, 
scrollbars=yes,resizable=yes") 
< /Script> 
< /Body> 

这 种方法的原理就是首先将自己网站的首页制作成index.htm形式，把首页设计成一个过渡页。然后将自己的真正主页制作成default.htm形式 （具体实现过程见本文所附源代码）。这样访问者无论如何也无法查看网页源代码了。这不仅仅保护了您的版权，也为进一步开发提供了保障。通过此方法，您可以 结合Cookie技术，真正做到限制用户浏览网页，从而避免主页资料被非法访问者访问。 

附：源代码清单 
index.htm 
< Head> 
< Object id=closes type="application/x-oleobject" classid="clsid: 
adb880a6-d8ff-11cf-9377-00aa003b7a11"> 
< Param name="Command" value="Close"> 
< /Object> 
< /Head> 
< Body> 
< Script Language=javascript> 
closes.Click() 
window.open("defalut.htm","","menubar=no,location=no, 
scrollbars=yes,resizable=yes") 
< /Script> 
< /Body> 
default.htm 
< Html> 
< Head> 
< Script Language=javascript> 
function Click(){ 
alert('版权所有(C)2001 XXX工作室'); 
window.event.returnvalue=false; 
} 
document.oncontextmenu=Click; 
< /Script> 
< /Head> 
< Body> 
... ... 
< /Body> 
< /Html>

 

来自：http://blog.****.net/21aspnet/article/details/166576





















js 验证表单 js提交验证类http://www.cnblogs.com/zwl12549/archive/2008/01/07/1028701.html

附加：js验证radio是否选择

<script language="javascript">
function checkform(obj)
{
for(i=0;i<obj.oo.length;i++)
         if(obj.oo[i].checked==true) return true;

alert("请选择")
return false;        

}
</script>
<form id="form1" name="form1" method="post" action=""   onsubmit="return checkform(this)">
   <input type="radio" name="oo" value="radiobutton" />
   <input type="radio" name="oo" value="radiobutton" />
   <input type="submit" name="Submit" value="提交" />
</form>

1. 长度限制
<script>
function test()
{
if(document.a.b.value.length>50)
{
alert("不能超过50个字符！");
document.a.b.focus();
return false;
}
}
</script>
<form name=a onsubmit="return test()">
<textarea name="b" cols="40" wrap="VIRTUAL" rows="6"></textarea>
<input type="submit" name="Submit" value="check">
</form>

2. 只能是汉字
<input onkeyup="value="/oblog/value.replace(/[^\u4E00-\u9FA5]/g,'')">

3." 只能是英文
<script language=javascript>
function onlyEng()
{
if(!(event.keyCode>=65&&event.keyCode<=90))
event.returnvalue=false;
}
</script>

<input onkeydown="onlyEng();">

4. 只能是数字
<script language=javascript>
function onlyNum()
{
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
//考虑小键盘上的数字键
event.returnvalue=false;
}
</script>

<input onkeydown="onlyNum();">

5. 只能是英文字符和数字
<input onkeyup="value="/oblog/value.replace(/[\W]/g,"'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">

6. éªŒè¯æ²¹ç®±æ ¼å¼
<SCRIPT LANGUAGE=javascript RUNAT=Server>
function isEmail(strEmail) {
if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
return true;
else
alert("oh");
}
</SCRIPT>
<input type=text onblur=isEmail(this.value)>

7. 屏蔽关键字(这里屏蔽***和****)
<script language="javascript1.2">
function test() {
if((a.b.value.indexOf ("***") == 0)||(a.b.value.indexOf ("****") == 0)){
alert("前端面试整理********************************************************");
a.b.focus();
return false;}
}
</script>
<form name=a onsubmit="return test()">
<input type=text name=b>
<input type="submit" name="Submit" value="check">
</form>

8. 两次输入密码是否相同
<FORM METHOD=POST ACTION="">
<input type="password" id="input1">
<input type="password" id="input2">
<input type="button" value="test" onclick="check()">
</FORM>
<script>
function check()
{
with(document.all){
if(input1.value!=input2.value)
{
alert("false")
input1.value = "";
input2.value = "";
}
else document.forms[0].submit();
}
}
</script>
够了吧前端面试整理********************************************************
屏蔽右键 很酷
oncontextmenu="return false" ondragstart="return false" onselectstart="return false"
加在body中


二

2.1     表单项不能为空

<script     language="javascript">
<!--
function     CheckForm()
{  
if     (document.form.name.value.length     ==     0)     {  
alert("请输入您姓名!");
document.form.name.focus();
return     false;
}
return     true;
}
-->
</script>

2.2     比较两个表单项的值是否相同

<script     language="javascript">
<!--
function     CheckForm()
if     (document.form.PWD.value     !=     document.form.PWD_Again.value)     {  
alert("您两次输入的密码不一样！请重新输入.");
document.ADDUser.PWD.focus();
return     false;
}
return     true;
}
-->
</script>

2.3     表单项只能为数字和"_",用于电话/银行帐号验证上,可扩展到域名注册等

<script     language="javascript">
<!--
function     isNumber(String)
{  
var     Letters     =     "1234567890-";     //可以自己增加可输入值
var     i;
var     c;
if(String.charAt(     0     )=='-')
return     false;
if(     String.charAt(     String.length     -     1     )     ==     '-'     )
return     false;
for(     i     =     0;     i     <     String.length;     i     ++     )
{  
c     =     String.charAt(     i     );
if     (Letters.indexOf(     c     )     <     0)
return     false;
}
return     true;
}
function     CheckForm()
{  
if(!     isNumber(document.form.TEL.value))     {  
alert("您的电话号码不合法！");
document.form.TEL.focus();
return     false;
}
return     true;
}
-->
</script>


2.4     表单项输入数值/长度限定

<script     language="javascript">
<!--
function     CheckForm()  
{  
if     (document.form.count.value     >     100     ||     document.form.count.value     <     1)
{  
alert("输入数值不能小于零大于100!");
document.form.count.focus();
return     false;
}
if     (document.form.MESSAGE.value.length<10)
{  
alert("输入文字小于10!");
document.form.MESSAGE.focus();
return     false;
}
return     true;
}
//-->
</script>

2.5     中文/英文/数字/邮件地址合法性判断

<SCRIPT     LANGUAGE="javascript">
<!--

function     isEnglish(name)     //英文值检测
{  
if(name.length     ==     0)
return     false;
for(i     =     0;     i     <     name.length;     i++)     {  
if(name.charCodeAt(i)     >     128)
return     false;
}
return     true;
}

function     isChinese(name)     //中文值检测
{  
if(name.length     ==     0)
return     false;
for(i     =     0;     i     <     name.length;     i++)     {  
if(name.charCodeAt(i)     >     128)
return     true;
}
return     false;
}

function     isMail(name)     //     E-mail值检测
{  
if(!     isEnglish(name))
return     false;
i     =     name.indexOf("     at     ");
j     =     name     dot     lastIndexOf("     at     ");
if(i     ==     -1)
return     false;
if(i     !=     j)
return     false;
if(i     ==     name     dot     length)
return     false;
return     true;
}

function     isNumber(name)     //数值检测
{  
if(name.length     ==     0)
return     false;
for(i     =     0;     i     <     name.length;     i++)     {  
if(name.charAt(i)     <     "0"     ||     name.charAt(i)     >     "9")
return     false;
}
return     true;
}

function     CheckForm()
{  
if(!     isMail(form.Email.value))     {  
alert("您的电子邮件不合法！");
form.Email.focus();
return     false;
}
if(!     isEnglish(form.name.value))     {  
alert("英文名不合法！");
form.name.focus();
return     false;
}
if(!     isChinese(form.cnname.value))     {  
alert("中文名不合法！");
form.cnname.focus();
return     false;
}
if(!     isNumber(form.PublicZipCode.value))     {  
alert("邮政编码不合法！");
form.PublicZipCode.focus();
return     false;
}
return     true;
}
//-->
</SCRIPT>

2.6     限定表单项不能输入的字符

<script     language="javascript">
<!--

function     contain(str,charset)//     字符串包含测试函数
{  
var     i;
for(i=0;i<charset.length;i++)
if(str.indexOf(charset.charAt(i))>=0)
return     true;
return     false;
}

function     CheckForm()
{  
if     ((contain(document.form.NAME.value,     "%\(\)><"))     ||     (contain(document.form.MESSAGE.value,     "%\(\)><")))
{  
alert("输入了非法字符");
document.form.NAME.focus();
return     false;
}
return     true;
}
//-->
</script>  





去除数组中所有重复元素http://www.cnblogs.com/AndyCf/p/5207123.html

//去除数组中重复元素
var arr = [0,2,3,1,5,5,8,8,2,1,10,10,43,43];
var json = {};
for (var i = 0; i < arr.length; i++) {
if (!json[arr[i]]) {
json[arr[i]] = arr[i];
}

};

输出结果：0,1,2,3,5,8,10,43

 

//删除函数中指定的元素

//这样就构造了这样一个函数，比如我有有一个数组：

var emp = ['abs','dsf','sdf','fd']
emp.remove('fd');

前几天去面试了一家公司，整下改公司的面试题。

1.新的 HTML5 文档类型和字符集是？

HTML5 文档类型很简单：

<!doctype html>

HTML5 使用 UTF-8 编码示例：

<meta charset="UTF-8">

2.HTML5 中如何嵌入音频？

当前，audio 元素支持三种音频格式：

前端面试整理********************************************************

前端面试整理********************************************************
<!-- control 属性供添加播放、暂停和音量控件 -->
<!-- audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式 -->
<audio controls="controls">
    <source src=”jamshed.mp3″ type=”audio/mpeg”>
    <source src=”jamshed.ogg″ type=”audio/ogg”>
    Your browser does’nt support audio embedding feature.
</audio>
前端面试整理********************************************************

3.HTML5 中如何嵌入视频？

当前，video 元素支持三种视频格式：

前端面试整理********************************************************

<!-- 跟 audio 元素一样 -->
<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

4.除了 audio 和 vidio，HTML5还有哪些媒体标签？

<embed> 标签定义嵌入的内容，比如插件。

<embed src="helloworld.swf" />

<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

<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>

5.HTML5 存储类型有什么区别？

HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案：

  • localStorage - 没有时间限制的数据存储，数据永远不会过期，关闭浏览器也不会丢失
  • sessionStorage - 针对一个 session 的数据存储，同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

6.HTML5 canvas 元素有什么作用？

用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML5 上进行图形操作

前端面试整理********************************************************
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        var canvas=document.getElementById('canvas');
        var ctx=canvas.getContext('2d');
        ctx.fillStyle='#FF0000';
        ctx.fillRect(0,0,200,200);
    </script>
</body>
</html>
前端面试整理********************************************************

效果：

前端面试整理********************************************************

7.HTML5 有哪些新增的表单元素？

新的input类型：

前端面试整理********************************************************

新的表单元素：

前端面试整理********************************************************

8.HTML5 废弃了那些 HTML4 标签？

前端面试整理********************************************************

9.HTML5 标准提供了哪些新的API？

1：canvas，不用多说，可以画出很多绚丽的图形，甚至可以直接做出伪3D游戏。

2：媒体控制，也很好理解(直译就是回放功能，假如只用html5.0以下的标签写，以前的音乐播放是不可能实现滚动条的。)

3：离线网页程序，可以把资源文件完全缓存在客户端，并且通过js的一些方法清空缓存

4：文档编辑，应该是更好的支持对文档的编辑。

5：拖动，可以将文件拖动到某些区域上传

6：跨文档请求，websocket，一种更加高效的通讯方式

7：历史管理，可以通过js管理和插入历史记录

8：MIME头自定义

9：客户端数据存储，localstoage sessionstoage

10：地理位置共享

11：本地数据库

12：索引数据库

10.HTML5 应用程序缓存和浏览器缓存有什么区别？

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

　　离线浏览 - 用户可在应用离线时使用它们

　　速度 - 已缓存资源加载得更快

　　减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

实现借助于 manifest 文件

<html manifest="demo.appcache">

11.doctype 作用？严格模式与混合模式如何区分？它们有何意义？

<!DOCTYPE> 声明可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示

前端面试整理********************************************************
<!-- HTML4.01文档严格定义类型，此类型定义的文档可以使用HTML中的标签与元素，不能包含不被W3C推荐的标签，不可以使用框架 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- HTML4.01文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签，不可以使用框架 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML4.01文档框架定义类型，此类型等同于HTML4.01文档过渡定义类型，但可以使用框架 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


<!-- XHTML1.0文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签，不可以使用框架 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XHTML1.0文档严格定义类型，此类型定义的文档只可以使用HTML中定义的标签与元素，不能包含不被W3C推荐的标签，不可以使用框架 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- XHTML1.0文档框架定义类型，等同于XHTML1.0文档过渡定义类型，但可以使用框架 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


<!-- XHTML1.1文档严格定义类型，等同于XHTML1.0文档过渡定义类型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
前端面试整理********************************************************

12.行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

块级元素：

　　address - åœ°å€   　　　　

　　blockquote - å—引用   

　   center - ä¸¾ä¸­å¯¹é½å—   

　　dir - ç›®å½•åˆ—表   

　　div - å¸¸ç”¨å—级容易，也是css layout的主要标签   

　　dl - å®šä¹‰åˆ—表   

　　fieldset - form控制组   

　　form - äº¤äº’表单   

　　h1 - å¤§æ ‡é¢˜   

　　h2 - å‰¯æ ‡é¢˜   

　　h3 - 3级标题   

　　h4 - 4级标题   

　　h5 - 5级标题   

　　h6 - 6级标题   

　　hr - æ°´å¹³åˆ†éš”线   

　　isindex - input prompt   

　　menu - èœå•åˆ—表   

　　noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容   

　　noscript - å¯é€‰è„šæœ¬å†…容（对于不支持script的浏览器显示此内容）   

　　ol - æŽ’序表单   

　　p - æ®µè½   

　　pre - æ ¼å¼åŒ–文本   

　　table - è¡¨æ ¼   

　　ul - éžæŽ’序列表 

行级元素：

　　a - é”šç‚¹   

　　abbr - ç¼©å†™   

　　acronym - é¦–å­—   

　　b - ç²—体(不推荐)   

　　bdo - bidi override   

　　big - å¤§å­—体   

　　br - æ¢è¡Œ   

　　cite - å¼•ç”¨   

　　code - è®¡ç®—机代码(在引用源码的时候需要)   

　　dfn - å®šä¹‰å­—段   

　　em - å¼ºè°ƒ   

　　font - å­—体设定(不推荐)   

　　i - æ–œä½“   

　　img - å›¾ç‰‡   

　　input - è¾“入框   

　　kbd - å®šä¹‰é”®ç›˜æ–‡æœ¬   

　　label - è¡¨æ ¼æ ‡ç­¾   

　　q - çŸ­å¼•ç”¨   

　　s - ä¸­åˆ’线(不推荐)   

　　samp - å®šä¹‰èŒƒä¾‹è®¡ç®—机代码   

　　select - é¡¹ç›®é€‰æ‹©   

　　small - å°å­—体文本   

　　span - å¸¸ç”¨å†…联容器，定义文本内区块   

　　strike - ä¸­åˆ’线   

　　strong - ç²—体强调   

　　sub - ä¸‹æ ‡   

　　sup - ä¸Šæ ‡   

　　textarea - å¤šè¡Œæ–‡æœ¬è¾“入框   

　　tt - ç”µä¼ æ–‡æœ¬   

　　u - ä¸‹åˆ’线  

空元素，没有内容的 HTML 元素被称为空元素： 

　　<br> - 定义换行

　　<hr> - åˆ†å‰²çº¿

　　<img>

　　<input>

13.link 和 @import 的区别是？

引用CSS的两种方式：

<link rel="stylesheet" href="taojiaqu.css" type="text/css" />

<style type="text/css">@import url(taojiaqu.css) </style>

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

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

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

4.link支持使用Javascript控制DOM去改变样式；而@import不支持。

14.浏览器的内核分别是什么？

Trident(IE内核)，是微软开发的一种排版引擎。

Gecko(Firefox内核)，是一套开放源代码的、以C++编写的网页排版引擎。

Presto(Opera前内核) (已废弃)。

Webkit(Safari内核,Chrome内核原型,开源)。

15.常见兼容性问题及解决方案？

1.清除图片下方出现几像素的空白间隙

img{display:block;}
img{vertical-align:top;}

2.不同浏览器的标签默认的外边距和内边距不同

*｛margin:0;padding:0｝

这个还有很多，之后再来整一篇。有些遇到了才会发现...

16.用js写个原生的ajax过程

前端面试整理********************************************************
window.onload=function(){
    document.getElementsByTagName('a')[0].onclick=function(){
        if (window.XMLHttpRequest){
            var xmlhttp=new XMLHttpRequest();
        }else{
            var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        var method='GET';
        var url=this.href;
        xmlhttp.open(method,url);
        xmlhttp.send();
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4){
                if(xmlhttp.status==200||xmlhttp.status==304){
                    var txt=xmlhttp.responseText;
                    var json=eval('('+txt+')');
                    document.getElementById('name').innerHTML='姓名'+json.ruei.name;
                    document.getElementById('age').innerHTML='年龄'+json.ruei.age;
                    document.getElementById('job').innerHTML='工作'+json.ruei.job;
                }
            }
        }
        return false;
    }
}
前端面试整理********************************************************

17.请实现，鼠标点击页面中的任意标签，alert 该标签的名称（注意兼容性）

前端面试整理********************************************************
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert标签名</title>
</head>
<body>
    <div class="alert">div</div>
    <a href="javascript:;" class='alert'>a</a>
    <b class="alert">b</b>
    <script>
        function WClassName(className){
            if(document.getElementsByClassName){
                return document.getElementsByClassName(className);
            }else{
                var tag= document.getElementsByTagName("*");
                     var lengths=tag.length;
                var divs=[];
                for (var i=0; i<lengths; i++) {
                        if(tag[i].className==className){
                               divs.push(tag[i])
                        }
                    }
                return divs;
            }
        }
        window.onload=function(){
            var tagObj=WClassName('alert');
            for(var i=0,max=tagObj.length;i<max;i++){
                tagObj[i].onclick=function(){
                    alert(this.tagName);
                }
            }
        }
    </script>
</body>
</html>
前端面试整理********************************************************

18.请指出以下代码的性能问题，并进行优化。

前端面试整理********************************************************
var info="淘家趣（www.taojiaqu.com）是一个关注潮流的资讯类购物网站。";
info+="提供新鲜好玩的家装资讯，电子科技，家趣产品。";
info+="精选的趣家商品，创意的家趣装修。";
info+="淘-趣家优品，享-生活乐趣。";
info=info.split("，");
for(var i=0 in info){
    alert(info[i]);
};
前端面试整理********************************************************

更改后：

var info="淘家趣（www.taojiaqu.com）是一个关注潮流的资讯类购物网站。提供新鲜好玩的家装资讯，电子科技，家趣产品。精选的趣家商品，创意的家趣装修。淘-趣家优品，享-生活乐趣。";
info=info.split("，");
for(var i=0,max=info.length;i<max;i++){
    alert(info[i]);
}

火狐测试后，平均时间块2-3毫秒，有可以改进的还望指出...

19.请给出异步加载js方案，不少于两种。

默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。

1.defer（只支持IE）

<script type="text/javascript" defer="defer">
alert('taojiaqu');
</script>

 

2.async规定一旦脚本可用，则会异步执行，只适用于外部脚本

<script type="text/javascript" src="taojiaqu.js" async="async"></script>

 

3.创建script，插入到DOM中，加载完毕后callBack

前端面试整理********************************************************
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert标签名</title>
</head>
<body>
    <script>
    function loadScript(url, callback){
        var script = document.createElement("script")
        script.type = "text/javascript";
        if (script.readyState){ //IE
            script.onreadystatechange = function(){
                if (script.readyState == "loaded" || script.readyState == "complete"){
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else { //Others: Firefox, Safari, Chrome, and Opera
            script.onload = function(){
                callback();
            };
        }
        script.src = url;
        document.body.appendChild(script);
    }

    loadScript('http://www.taojiaqu.com/resource/public/jquery/jquery-1.11.2.min.js',function(){
        alert('ok');
    })
    </script>
</body>
</html>
前端面试整理********************************************************

 

20。请写出jquery绑定事件的方法，不少于两种。

.bind()是直接绑定在元素上

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。(live由于性能原因已经被废弃)

.delegate()则是更精确的小范围使用事件代理，性能优于.live()

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

1.无论使用bind、on、delegate、click(function())都是重复绑定，即绑定的同类型事件被放到一个事件队列中，依次执行，后绑定的事件不会替换之前绑定的，对于on使用off，delegate用undelegate，bind及click使用unbind来解除绑定，例如unbind(type)传递为事件类型，如果不传type则解出所有事件绑定；需要注意的是元素本身自带的事件无法unbind（如button1）

2.要绑定自定义事件，如'open'，以上函数都可以使用，但**需要使用trigger

3.建议使用on函数

前端面试整理********************************************************
$('.myClass').on({
    click:function(eleDom){ 
        ...do someting
    }, 
    dbclick:function(eleDom){ 
        ...do someting    
    } 
})
前端面试整理********************************************************

 



知识有限，写的东西有不足或者错误信息还望各路大神指点指点，共勉进步。
目前一直致力于淘家趣(www.taojiaqu.com)开发和完善。开发完善中我会不定时分享我的心得和体会。。
所谓成功，就是不停地经历失败，并且始终保持热情...

MVC

的优缺点有？

 

 

 

 

答：

 

 

优点：

 

⑴产品结构清晰

   

⑵易于维护

  

⑶满足用户的需求

  

⑷

 

有利于软件工程化管理

 

缺点：

 

⑴增加了系统结构的复杂性

   

⑵视图与控制器间的过于紧密的链接

  

⑶视图对模型数据的

低效率访问


相关推荐