Web前端笔试115道题带答案及解析

1、Web前端笔试115道题（带答案及解析）lshtml5 为什么只需要写? 答： html5不是基于sgml （标准通用标记语言），不需要对dtd 文件进行引用，但是需要doctype来规范浏览器的行为，否那么浏览器将开启怪异模式，而html4.01基于sgml. 需要弓I入dtd,才能告知浏览器文档使用的文档类型2、行内元素有哪些？块级元素有哪些？空（void）元素有哪 些？ 行内元素有：a b span img input select strong （强 调的语气）块级元素有：div ul ol li dl dt dd hl h2 h3 h4p知名的空元素: 3、链接导航问题。使用框架结构

2、时，你必须 保证正确设置所有的导航链接，如不然，会给访问者带来很 大的麻烦。比方被链接的页面出现在导航框架内，这种情 况下访问者便被陷住了，因为此时他没有其他地方可去。7、label的作用是什么？是怎么使用的？ Label中有两 个属性是非常有用的，一个是FOR、另外一个就是ACCESSKEY 了。FOR属性功能：表示Label标签要绑定的HTML元素，你点击这 个标签的时候，所绑定的元素将获取焦点。用法:姓名ACCESSKEY 属性：功能：表示访问Label标签所绑定的元素的热键，当您 按下热键，所绑定的元素将获取焦点。用法：姓名局限性：accessKey属性所设置的快捷键不能与浏览器 的快

3、捷键冲突，否那么将优先激活浏览器的快捷键。8、实现不使用border,画出lpx高的线，在不同浏览器下 的Quirksmode和CSSCompat模式下都能保持一致的效果？ & lt;/div9、网页验证码是干嘛的？是为了解决什么平安问题？网页验证码介绍：“验证码的英文表示为CAPTCHA (Completely Automated Public Turing test to tellComputers and Humans Apart),翻译过来就是“全自动区 分计算机和人类的图灵测试”，顾名思义，它是用来区分计 算机和人类的。在CAPTCHA测试中，作为服务器的计算机 会自动生成一个问题由

4、用户来解答。这个问题可以由计算机 生成并评判，但是必须只有人类才能解答。由于计算机无法 解答CAPTCHA的问题，所以回答出问题的用户就可以被认 为是人类。CAPTCHA是由计算机来考人类，而不是标准图 灵测试中那样由人类来考计算机，因此人们有时称CAPTCHA是一种反向图灵测试。验证码的原理：服务器端随机生成验证码字符串，保存在内 存中，并写入图片，发送给浏览器端显示，浏览器端输入验 证码图片上字符，然后提交服务器端，提交的字符和服务器 端保存的该字符比拟是否一致，一致就继续，否那么返回提示。 攻击者编写的robot程序，很难识别验证码字符，顺利的完 成自动注册，登录；而用户可以识别填写，所

5、以这就实现了 阻挡攻击的作用。而图片的字符识别，就是看图片上的干扰 强度了。就实际的效果来说，验证码只是增加攻击者的难度, 而不可能完全的防止。10、介绍一下标准的css的盒子模型？与低版本IE的盒子模 型有什么不同？ 盒子模型有两种，分别是ie盒子模型 和标准w3c盒子模型W3C盒子模型的范围包括margin、border、padding、 content,并且content局部不包含其他局部IE盒子模型的范围也包括margin、border、padding、 content,和标准W3C盒子模型不同的是：IE盒子模型的 content 局部包含了 border 和 pading11、如何居

6、中div,如何居中一个浮动元素？如何让绝对定 位的 div 居中？ a.margin:xpx auto;b.确定容器的宽高，这里宽度是必须的，高度可以不设, 设置外层的上外边距和左外边距分别是宽高的一半。实现居中关键在于margin设置与position:relative.div width:500px ;height:300px;margin: -150px 0 0 -250px;position:relative;left:50%;top:50%;c.position:absolute;top: 50%;left: 50%;只能把div定位在以红色圈为起点的位 置，加上 margin:-1

7、00px Opx Opx -10012、display有哪些值？说明他们的作用？block :块对象的默认值。用该值为对象之后添加新行none:隐藏对象。与visibility属性的hidden值不同，其 不为被隐藏的对象保存其物理空间inline :内联对象的默认值。用该值将从对象中删除行compact :分配对象为块对象或基于内容之上的内联对象marker:指定内容在容器对象之前或之后。要使用此参 数，对象必须和:after及before伪元素一起使用inline-table .将表格显示为无前后换行的内联对象或内联容器list-item :将块对象指定为列表工程。并可以添加可选项 目标志

8、run-in :分配对象为块对象或基于内容之上的内联对象table :将对象作为块元素级的表格显示13、position的值relative和absolute的定位原点是什么?Absolute, CSS 中的写法是：position:absolute;他的意思是 绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT（下面简称TRBL）进行定位，在没有设定TRBL, 默认依据父级的做标原始点为原始点。如果设定TRBL并且 父级没有设定position属性，那么当前的absolute那么以浏览 器左上角为原始点进行定位，位置将由TRBL决定。Relative, CSS中

9、的写法是：position:relative;他的意思是绝 对相对定位，他是参照父级的原始点为原始点，无父级那么以 BODY的原始点为原始点，配合TRBL进行定位，当父级内有 padding等CSS属性时，当前级的原始点那么参照父级内容区 的原始点进行定位。14、display设置为inline-block时，li 与li之间有看不见的空白间隔是什么原因引起的？有什么解决方法？ 行框的排列会受到中间空白（回车空格等等） 的影响，这些空白也会被应用样式，占据空间，所以会有间 隔解决:设置解决:设置ul的font-size为0,解决:设置ul的font-size为解决:设置ul的font-size

10、为0,缺陷是必须重新在H清除浮动的方式？ a.添加 鲜为人知的是： 3、页面导入样式时，使用link和import有什么区别？ 两者都是外部引用CSS的方式，但是存在一定的区别：区另|J1 ink是XHTML标签，除了加载CSS外，还可以 定义RSS等其他事务；import属于CSS范畴，只能加载 CSSo区别2 : link引用CSS时，在页面载入时同时加载；import需要页面网页完全载入以后加载。区别3 ： link是XHTML标签，无兼容问题；import是 在CSS2.1提出的，低版本的浏览器不支持。区别4 link支持使用Javascript控制DOM去改变样式； 而import不

11、支持。补充：import最优写法import的写法一般有以下几种：import style.css /Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 不识别import style.css /Windows IE4/ NS4, MacintoshIE4/NS4不识别import url(style.css) /Windows NS4, Macintosh NS4 不识别import url( style.css ) /Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 不识别import

12、url( style.css ) /Windows NS4, Macintosh NS4不识别由上分析知道，import url(style.css)和import url( style.css”)是最优的选择，兼容的浏览器最多。从字节优化的角度来看inAport url(style.css)最值得推荐。4、常见的浏览器内核有哪些？使用Trident内核的浏览 器：IE、Maxthons TT、The World 等；使用Gecko内核的浏览器：Netcape6及以上版本、FireFoxs MozillaSuite/SeaMonkey ；使用Presto内核的浏览器：Opera7及以上版本；使

13、用Webkit内核的浏览器:Safaris Chromeo5、html5有哪些新特性?移除了哪些元素？如何处理HTML5 新标签的浏览器兼容性问题？如何区分html和html5 ?新增的元素有绘画canvas ,用于媒介回放的video和 audio元素，本地离线存储localstorage长期存储数据，浏 览器关闭后数据不丧失，sessionstorage的数据在浏览器 关闭后自动删除，此外，还新增了以下的几大类元素。内容元素,article、footers header、nav、sectiono表单控件，calendar、date、time、emaik urk searcho控件元素， w

14、ebworker, websockt, Geolocationo移出的元素有以下这些：显现层元素：basefont, big, center, font, s, strike,tt, Uo性能较差元素：frame, frameset, noframeso如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5 ?处理兼容问题有两种方式：1.IE8/IE7/IE6支持通过document.方法产生的标签，利用 这一特性让这些浏览器支持HTML5新标签。2.使用是html5shim框架另夕卜，DOCTYPE声明的方式是区分HTML和HTML5标 志的一个重要因素，此外，还可以根

15、据新增的结构、功能元 素来加以区分。6、iframe有哪些优缺点？ 优点：.用来实现长连接，在websocket不可用的时 候作为一种替代,最开始由google创造。Comet :基于HTTP 长连接的“服务器推”技术.跨域通信。JavaScript跨域总结与解决方法， 类似的还有浏览器多页面通信，比方音乐播放器，用户如果 翻开了多个tab页，应该只有一个在播放。.历史记录管理，解决ajax化网站响应浏览器 前进后退按钮的方案，在html5的history api不可用时作为 一种替代。.纯前端的utf8和gbk编码互转。比方在utf8 页面需要生成一个gbk的encodeURIComponent字符串，可 以通过页面加载一个gbk的iframe,然后主页面与子页面通 信的方式实现转换，这样就不用在页面上插入一个非常巨大 的编码映射表文件了1s在网页中使用框架结构最大的弊病是搜 索引擎的“蜘蛛“程序无法解读这种页面。当“蜘蛛”程序 遇到由数个框架组成的网页时，它们只看到框架而无法找 到链接，因此它们会以为该网站是个死站点，并且很快转身 离去。对一个网站来说这无异于一场灾难。如果你想销售产品，你需要客户;如想得到客