web app

1. 问题：手机端 click 事件会有大约 300ms 的延迟

   原因：手机端事件 touchstart --\> touchmove --> touchend or touchcancel --> click，因为在touch事件触发之后，浏览器要判断用户是否会做出双击屏幕的操作，所以会等待300ms来判断，再做出是否触发click事件的处理，所以就会有300ms的延迟

   解决方法：使用touch事件来代替click事件，如 zepto.js 的tap事件和fastClick，还有我自己也写了个移动端手势操作库mTouch，都有相应的事件可以代替click事件解决这个问题

2. 问题：在部分机型下（如小米4、小米2s、中兴） body 设置的 font-size 是用 rem 单位的话，若其他元素没有设置font-size，该font-size值继承于body，则会很高概率出现字体异常变大的情况

   原因：估计是跟app的webview默认设置有关，body的font-size使用rem单位，就是相对于当前根节点的font-size来确定的，可能在某些webview的设置下，body用的是webview设置的默认字体大小，因为在我给html设置了一个px单位的默认font-size时，还是会出现字体异常变大的情况，具体webview的一些细节就没有再研究了

   解决方法：body设置一个px单位的默认font-size值，不用rem，或者给字体会异常变大的元素设定一个px单位的font-size值

3. 问题：使用zepto的 tap 事件时会出现“点透”bug，比如：一个元素A绑定了tap事件，紧跟其后的元素B绑定了click事件，A触发tap事件时将自己remove掉，B就会自动“掉”到A的位置，接下来就是不正常的情况，因为这个时候B的click事件也触发了

   原因：因为tap事件是通过 touchstart 、touchmove 、touchend 这三个事件来模拟实现的，在手机端事件机制中，触发touch事件后会紧接着触发touch事件坐标元素的click事件，因为B元素在300ms内刚好“掉”回来A的位置，所以就触发了B的click事件，还有zepto的tap事件都是代理到body的，所以想通过e.preventDefault()阻止默认行为也是不可行的

   解决方法：（1）A元素换成click事件；（2）使用我写的库 mTouch 来给A绑定tap事件，然后在事件回调中通过e.preventDefault()来阻止默认行为，或者换用其他的支持tap事件的库

4. 问题 iOS自动识别数字为手机号码，导致部分设置好的样式无效（字体颜色等）

   原因 iOS自动识别数字后会给数字加上 <a href="tel:数字">数字</a> 标签，所以数字的部分样式继承了a标签的样式，导致部分样式无效

   解决方法：（1）meta 标签加上<meta name="format-detection" content="telephone=no" /> 阻止默认识别数字为电话；（2）设置样式的时候 css 选择器把a标签选上，如：

   <span class="number">123<span>
   // 原来样式
   .number{
   color: #f00;
   }
   // 修改后样式
   .number, .number a{
   color: #f00;
   }

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.csdn.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.csdn.net/21aspnet/article/details/166576

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

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

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 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式-->
<audiocontrols="controls"><sourcesrc=”jamshed.mp3″type=”audio/mpeg”><sourcesrc=”jamshed.ogg″type=”audio/ogg”>Your browser does’nt support audio embedding feature.</audio>

3.HTML5 中如何嵌入视频？

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

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

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

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

<embedsrc="helloworld.swf" />

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

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

<track> 播放带有字幕的视频：

<videowidth="320"height="240"controls="controls"><sourcesrc="forrest_gump.mp4"type="video/mp4" /><sourcesrc="forrest_gump.ogg"type="video/ogg" /><trackkind="subtitles"src="subs_chi.srt"srclang="zh"label="Chinese"><trackkind="subtitles"src="subs_eng.srt"srclang="en"label="English">
</video>

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

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

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

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

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

<!doctype html>
<htmllang="en">
<head><metacharset="UTF-8"><title>Document</title>
</head>
<body><canvasid="canvas"></canvas><script>varcanvas=document.getElementById('canvas');varctx=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 文件

<htmlmanifest="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的两种方式：

<linkrel="stylesheet"href="taojiaqu.css"type="text/css" /><styletype="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.οnlοad=function(){document.getElementsByTagName('a')[0].οnclick=function(){if(window.XMLHttpRequest){var xmlhttp=newXMLHttpRequest();}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>
<htmllang="en">
<head><metacharset="UTF-8"><title>alert标签名</title>
</head>
<body><divclass="alert">div</div><ahref="javascript:;"class='alert'>a</a><bclass="alert">b</b><script>functionWClassName(className){if(document.getElementsByClassName){returndocument.getElementsByClassName(className);}else{vartag=document.getElementsByTagName("*");varlengths=tag.length;vardivs=[];for(vari=0; i<lengths; i++) {if(tag[i].className==className){divs.push(tag[i])}}returndivs;}}window.onload=function(){vartagObj=WClassName('alert');for(vari=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 ininfo){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>functionloadScript(url, callback){var script = document.createElement("script")script.type= "text/javascript";if (script.readyState){ //IEscript.onreadystatechange = function(){if (script.readyState == "loaded" || script.readyState == "complete"){script.onreadystatechange= null;callback();}};}else { //Others: Firefox, Safari, Chrome, and Operascript.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){ ...dosometing}, dbclick:function(eleDom){ ...dosometing    }
})

知识有限，写的东西有不足或者错误信息还望各路大神指点指点，共勉进步。

目前一直致力于淘家趣(www.taojiaqu.com)开发和完善。开发完善中我会不定时分享我的心得和体会。。

所谓成功，就是不停地经历失败，并且始终保持热情...

前端面试题杂烩part1相关推荐

1. 「前端面试题系列7」Javascript 中的事件机制（从原生到框架）

   前言 这是前端面试题系列的第 7 篇,你可能错过了前面的篇章,可以在这里找到: 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法 伪类与伪元素的区别及实战 如何实现一个圣杯布局? ...

2. 前端面试题整理（定期更新）

   前言 因为面试的原因,最近又开始关注前端面试题,浏览过网上很多面试题集合,有很多小伙伴整理的很全面,但是我发现其中有很多技术点在当下已不再流行,而面试题一般都是映射开发中常遇到的一些技能和问题,再结合 ...

3. JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二（二）...

   作者:樱桃小丸子儿 链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...

4. noah的前端面试题（三）｜掘金技术征文

   上一篇 前端面试题(二) 1.JavaScript对于cookie的读.写操作 写入 cookie function setCookie(cName, cValue, days) { var expi ...

5. 应届生web前端面试题_2020最新Web前端经典面试题试题及答案（持续更新）

   Web前端面试题 Web前端面试题:说说你对webpack的看法 解析:webpack是一个模块打包工具,可以使用webpack管理你的模块依赖,并编译输出模块们所需要的静态文件.能很好的管理.打包w ...

6. 前端面试题（html篇）

   前端面试题(html篇) 转载于:https://www.cnblogs.com/mc67/p/5311613.html

7. java 前端页面传过来的值怎么防止篡改_答对这40道经典web前端面试题，想不拿到offer都难！...

   想成功就业web前端工程师,想要能高薪就业,那么除了好的web前端技能以外,还得有好的面试技巧,如果提前就了解更多企业的面试要求及面试题目,那么可以让我们的面试成功的几率大大的提高. 今天小编就整理了 ...

8. 下面有关html5标签说法错误的有,前端面试题（2016含答案）

   标签定义命令按钮,比如单选按钮.复选框或按钮 8) 下述有关css属性position的属性值的描述,说法错误的是? a. b. c. d. static:没有定位,元素出现在正常的流中 fixed: ...

9. 前端攻城狮学习笔记七：常见前端面试题之HTML/CSS部分（二）

   前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面"内容是什么"的问题. 2.表示层:由 ...

最新文章

1. 用户查看订单信息php,php – 以编程方式获取用户刚刚在Ubercart中完成的订单
2. spring mvc相关问题
3. EasyUI权限系统
4. C#与.NET程序员面试宝典 1.3.1 网络应聘（图）
5. 神经网络可视化，真的很像神经元！
6. C#中HttpClient使用注意：预热与长连接
7. mysql数据库项目化教程郑小蓉_MySQL数据库项目化教程（高等职业教育“十三五”规划教材（软件技术专业））...
8. 转-聚合查询变慢-详解Elasticsearch的Global Ordinals与High Cardinality
9. 开源开放 | 细粒度可循证医学文档知识融合表示和推理（CCKS2021）
10. ssas 分区 设置_分区SSAS多维数据集的好处
11. 源码编译安装screen
12. 方舟代码_源代码丢失的方舟
13. java中打印俄罗斯方块游戏_java实现俄罗斯方块小游戏
14. Confluence: A Robust Non-IoU Alternative to Non-Maxima Suppression in Object Detection 论文阅读翻译
15. 5大原因告诉你，Python程序员为何如此难招！
16. Chrome源码剖析
17. ContextMenu(上下文菜单)的用法
18. node-red教程 5.4 context global与函数节点的其它功能
19. 冯诺依曼体系结构计算机
20. STEP 7-MicroWIN SMART软件在打开时报错“软件停止”以及界面显示“？？？”的解决办法

热门文章

1. 晶振及其内部电路详解
2. 2018-8-10-控件
3. 关闭 Gatekeeper
4. BUCT-2021年ACM竞赛班训练（一）2021.3.25-问题 A: 大佬的高级IDLE-题解
5. Android-实现邮箱格式的验证
6. 通过LY-WIFI-1智能WiFi模块实现手机APP控制LED灯————uno端
7. bboss quartz定时任务使用案例介绍
8. R计算两列数据的相关系数_Python+pandas计算数据相关系数(person、Kendall、spearman)...
9. PKI学习系列-基本概念
10. xmanager调出图形安装oracle,Xmanager快速连接Linux图形界面教程