⑴ 谁能给我出一两道 web前端笔试题 上机题啥的,呵呵,比较常考的
[面试题] 某企业前端开发面试题
【HTML & CSS】
1. Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
2. 行内元素有哪些?块级元素有哪些?CSS的盒模型?
3. CSS引入的方式有哪些? link和@import的区别是?
4. CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
5. 前端页面有哪三层构成,分别是什么?作用是什么?
6. css的基本语句构成是?
7. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?
8. 如何居中一个浮动元素?
9. 有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况!
10. 你怎么来实现下面这个设计图,主要讲述思路 (效果图省略)
11. 如果让你来制作一个访问量很高的大型网站,你会如何来管理所有CSS文件、JS与图片?
12. 你对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
【Javascript】
1. js是什么,js和html 的开发如何结合?
2. 怎样添加、移除、移动、复制、创建和查找节点
3. 怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别
4. 面向对象编程:b怎么继承a
5. 看看下面alert的结果是什么
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}
b(1, 2, 3);
如果函数体改成下面,结果又会是什么?
a = 10;
alert(arguments[2] );
6. 请编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象
var obj = parseQueryString(url);
alert(obj.key0) // 输出0
7. ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
8. 什么是闭包?下面这个ul,如何点击每一列的时候alert其index?
<ul id=”test”>
<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
</ul>
9. 最近看的一篇Javascript的文章是?
10. 常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?
11.说说YSlow(可以详细一点)
答案在参考资料里面可以找到,答案在参考资料里面可以找到,答案在参考资料里面可以找到
⑵ web前端笔试题(HTML/CSS篇)
web前端笔试题集锦(HTML/CSS篇)
导读:网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。以下是由我J.L为您整理推荐的前端开发笔试题目,欢迎参考阅读。
一、HTML/CSS
1,让一个input的背景颜色变成红色
2,div的高宽等于浏览器可见区域的高宽,浏览器滚动,div始终覆盖浏览器的整个可见区域
思路:
(1)先放置一个div1,浮动:position:absolute;top:0px;left:0px;
(2)再放置一个div2,浮动:position:absolute;top:0px;left:0px;width:100%;height:100%;
(3)在div2中放置一个div3,令其高度超过浏览器高度,使div2产生滚动条
(4)对html,body进行样式设置:width:100%;height:100%;overflow:hidden->不让浏览器产生滚动条,避免页面出现两个滚动条
(5)编写JavaScript,另div2的高度等于页面可见高度,宽度等于页面可见宽度,注意,在计算完可见高度height和可见宽度width后,要对这两个值做处理,可见宽度-div2的滚动条的宽度,滚动条的宽度我这里假设是20px
这样题目基本就完成了,不过浏览器的兼容性还不是很好。
3,IE、FF下面CSS的解释区别
(1) 让页面元素居中
ff{margin-left:0px;margin-right:0px;width:***}
ie上面的设置+text-align:center
(2) ff:不支持滤镜
ie:支持滤镜
(3) ff:支持!important
ie支持*,ie6支持_
(4) min-width,min-height
FF支持,IE不支持,IE可以用css expression来替代
(5) Css Expression
FF不支持,IE支持
(6) cursor:hand
IE下可以显示手指状,FF下不行
(7) UL的默认padding和margin
IE下ul默认有margin,FF下ul默认有padding
(8) FORM的默认margin
IE下FORM有默认margin,FF下margin默认为0
4,一个定宽元素在浏览器(IE6,IE7,Firefox)中横向居中对齐的布局,请写出主要的.HTML标签及CSS
思路:
IE6/7:text-align:center
Firefox:margin:0 auto(margin-top和margin-bottom也可以为其他数字,关键是margin-left,margin-right为auto)
5,CSS中margin和padding的区别
margin是元素的外边框,是元素边框和相邻元素的距离
Padding是元素的内边框,是元素边框和子元素的距离
6,最后一个问题是,如何制作一个combo选项,就是可以输入可以下拉菜单选择。
思路:
(1)布局select和input,让input覆盖select,除了select的下拉图标,以方便select选择
(2)编写JS,为select添加onchange事件,onchange时将input的value置成select选中的指
7,
中alt和tittle的区别
alt:图片显示不出来了就提示alt
title:鼠标划过图片显示的提示
8,用css、html编写一个两列布局的网页,要求右侧宽度为200px,左侧自动扩展。
在这里我使用了两种方式:
(1)使用position
HTML:
left
right
(2) 使用float
HTML:
固定宽度
自适应
二者的CSS公用,如下:
html,body{width:100%;height:100%;margin:0px;padding:0px;}
.container {width:100%;height:400px;position:relative;}
.fl1 {float:left;}
.left {width:100%;height:400px;background:#AFFFD0;position:absolute;}
.right {width:200px;height:400px;background:#F9AFFF;position:absolute;right:0px;top:0px;}
.clear {clear:both;overflow:hidden;height:0px;}
.container2 {width:100%;height:400px;margin-top:100px;}
.left2 {background:#afffd0;height:400px;width:200px;margin-right:-3px;}
.right2 {height:400px;background:#f9afff;}
9,解释document.getElementByIdx_x_x_x("ElementID").style.fontSize="1.5em"
em是相对长度单位,相当于当前对象内文本的字体尺寸,如果当前行内文本的字体尺寸未被指定,则相对于浏览器的默认字体尺寸。
该语句将id为ElementID的元素的字体设置为当前对象内文本的字体尺寸的1.5倍
10,Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? 行内元素有哪些?块级元素有哪些?CSS的盒模型?
DOCTYPE是文档类型,用来说明使用的HTML或者XHTML是什么版本,其中的DTD叫文档类型定义,里面包含了文档规则,浏览器根据定义的DTD来解析页面的标识并展现出来
DOCTYPE有两种用途:一个可以进行页面的有效性验证,另一个可以区分浏览器使用严格模式还是混杂模式来解析CSS。
严格模式和混杂模式是浏览器解析CSS的两种模式,目前使用的大部分浏览器对这两种模式都支持,但是IE5只支持混杂模式。
可那个过DOCTYPE声明来判断哪种模式被触发
(1) 没有DOCTYPE声明的网页采用混杂模式解析
(2) 对使用DOCTYPE声明的网页视不同浏览器进行解析
(3) 对于浏览器不能识别的DOCTYPE声明,浏览器采用严格模式解析
(4) 在ie6下,如果在DOCTYPE声明之前有一个xml声明比如
,采用混杂模式解析,在IE7,IE8中这条规则不生效。
(5) 在ie下,如果DOCTYPE之前有任何字符,都会导致它进入混杂模式,如:
区分这两种模式可以理解浏览器解析CSS的区别,主要是在盒模式的解释上。
常见的块级元素有:DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等
常见的内联元素:SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等
CSS盒模型用于描述为一个HTML元素形成的矩形盒子,盒模型还涉及元素的外边距,内边距,边框和内容,具体来讲最里面的内容是元素内容,直接包围元素内容的是内边距,包围内边距的是边框,包围边框的是外边距。内边距,外边距,边框默认为0。
11,CSS引入的方式有哪些? link和@import的区别?
引入css的方式有下面四种
(1) 使用style属性
(2) 使用style标签
(3) 使用link标签
(4) 使用@import引入
Link和@import区别:
(1) link属于XHTML标签,@import是CSS提供的一种方式。Link除了加载CSS外,还可以做很多事情,如定义RSS,rel连接属性等;@import只能加载CSS
(2)加载顺序不同,当页面被加载的时候,link加载的CSS随之加载,而@import引用的CSS会等到页面完全下载完之后才会加载
(3)兼容性差别,由于@import是CSS2.1提出的,所以老的浏览器不支持,IE系列的浏览器IE5以上才能识别,而link没有这个问题
使用DOM控制样式的差别,使用JavaScript控制DOM去改变样式的时候,只能操作link,@import不可以被DOM操作。
12,如何居中一个浮动元素?
一个浮动元素里面包含的元素可以水平居中,原理如下:
让浮动元素left相对于父元素container右移50%,浮动元素left的子元素left-child相对于left左移50%就可以实现left-child相对于container水平居中
垂直居中类似,不过操作的不是left而是top
13,HTML5和CSS3的了解情况
有所了解
HTML5和CSS3分别是新推出的HTML和CSS规范,前世是XHTML2和CSS2,目前还在草案阶段,不过得到了Apple,Opera,Mozilla,Google,Microsoft不同程度的支持,也开发出了不少基于他们的应用。
HTML5相对于原来的HTML规范有一些变化:
(1)DOCTYPE更简洁
(2)新增了一些语义化标签,如article,header,footer,dialog等
(3)新增了一些高级标签,如,,
CSS3相对于CSS2也新增了不少功能
(1) 选择器更加丰富
(2) 支持为元素设置阴影
(3) 无需图片能提供圆角
14,你怎么来实现下面这个设计图
(1) 切图
(2) 布局,采用两栏布局,分别左浮动
(3) 编写css代码
15,css 中id和class如何定义,哪个定义的优先级别高?
id:#***,***为HTML中定义的id属性
class:.***,***为HTML中定义的class属性
id比class的优先级高
16,用html实现如下表格(不如嵌套实用表格)
三行三列,其中第一行第一列和第二行第一列合并; 第二行第二列和第二行第三列合并(现场画表)
运行结果如下:
17,web标准网站有那些优点
(1) Web标准网站结构和布局分离,使网站的访问和维护更加容易
(2) Web标准网站结构,布局以及页面访问都标准化,使网站能在更多的web标准设备中访问,兼容性更好
(3) Web标准网站语义化更好,语义化的XHTML不仅对用户友好,对搜索引擎也友好。
;⑶ web前端的入门考试有哪些
如今Web前端开发是一门吃香的技术,更多的人选择了Web前端开发工程师的职业。想要掌握Web前端技术的内容,能够达到企业的就业要求,需要付出更多的时间及努力。只要真正不断提升自身的技能,才能走更远。
如果你想要快速学习Web前端技术,专业全面的学习方式比较好,一般费用在2W左右,4-6个月左右。专业学习适合零基础的小白迅速成长,学习曲线先快后慢,也适合有一定基础的学员进阶学习,巩固知识的基础上,稳步进步突破职业瓶颈。
⑷ web前端 基础 操作题
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>第一题</title>
<style>
html,body{width:100%;height:100%;}
body{position:relative;margin:0;}
button{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:100px;height:40px;color:#FFF;font-size:16px;font-family:"微软雅黑";border-radius:8px;background-color:#f49610;}
</style>
</head>
<body>
<formaction="">
<buttononclick="alert('你点我了~~')">点我</button>
</form>
</body>
</html>
第一题如上(保存文件为.html形式)
---------------------------------------------------------------------------
第二题如下(html部分保存文件为.html形式,JS部分保存为.js文件。两个文件放在同一个文件夹下,因为我的src路径是这样写的,你可以改)
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>第二题</title>
<scriptsrc="pulsate.js"></script>
<style>
html,body{width:100%;height:100%;}
body{position:relative;margin:0;}
button{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:100px;height:40px;color:#FFF;font-size:16px;font-family:"微软雅黑";border-radius:8px;background-color:#f49610;}
</style>
</head>
<body>
<formaction="">
<button>点我</button>
</form>
</body>
</html>
下面是第二题的,JS部分:
window.onload=function(){
varbtn=document.getElementsByTagName("button")[0];
btn.onclick=function(){
alert("哎呀,你又点我了~");
}
}
加油~
⑸ web前端初级考试得分标准是什么实操和理论都达到六十分才过吗
web前端初级考试得分标准是60分,实操和理论都达到60分才可以过关。
⑹ web前端开发面试流程是怎样的
首先投简历,等待hr通知面试,一般情况下先填资料,做测试题,接着开始第一面(一般问经你的个人情况,工作经历等),资料已经交给技术,等一面通过之后接着二面,二面一般是技术面试,问你开发相关的技术问题(例如布局问题,js,框架之类的),有些公司还需要上机操作(写一两个页面或者开发一个js方法等),有些公司是通过之后直接进行3面有些是改天再进行3面,3面一般就是项目经理或总经理问你一些各种各样的问题(随机应变就行,也有一些公司没有这个环节),如果3面都过了,基本上就是面试成功了,接下来就是4面,也就是人事主管和你谈工资待遇等问题了,这个谈好之后就会告诉你什么时候过来上班,要准备什么东西,当然一般还会有正式的工作邀请函发到你的邮箱。如果没有3面的公司,那人事这个环节就直接是3面了。
还有一些公司是一面之后等通知,通过的就通知你二面,然后再等通知,然后通过再三面(这样的公司我一般不会等,太浪费时间)
⑺ 有哪些经典的 Web 前端或者 JavaScript 面试笔试题
HTML、CSS部分
8.html5\CSS3有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,地理定位等功能的增加。
* 绘画 canvas 元素
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素,比如 article、footer、header、nav、section
表单控件,calendar、date、time、email、url、search
CSS3实现圆角,阴影,对文字加特效,增加了更多的CSS选择器 多背景 rgba
新的技术webworker, websockt, Geolocation
移除的元素
纯表现的元素:basefont,big,center,font, s,strike,tt,u;
对可用性产生负面影响的元素:frame,frameset,noframes;
* 是IE8/IE7/IE6支持通过document.createElement方法产生的标签,
可以利用这一特性让这些浏览器支持HTML5新标签,
浏览器支持新标签后,还需要添加标签默认的样式:
* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
9.你怎么来实现页面设计图,你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计?
* 首先划分成头部、body、脚部;。。。。。
*
实现效果图是最基本的工作,精确到2px;
与设计师,产品经理的沟通和项目的参与
做好的页面结构,页面重构和用户体验
处理hack,兼容、写出优美的代码格式
针对服务器的优化、拥抱 HTML5。
10.常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?
* 使用率较高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery,超过91%。
轻量级框架有Modernizr、underscore.js、backbone.js、Raphael.js等。
(理解这些框架的功能、性能、设计原理)
* Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。
* 城市选择插件,汽车型号选择插件、幻灯片插件。弹出层。(写过开源程序,加载器,js引擎更好)
JavaScript原型,原型链 ? 有什么特点?
* 原型对象也是普通的对象,是对象一个自带隐式的 __proto__ 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为null的话,我们就称之为原型链。
* 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链。
* JavaScript的数据对象有那些属性值?
writable:这个属性的值是否可以改。
configurable:这个属性的配置是否可以删除,修改。
enumerable:这个属性是否能在for…in循环中遍历出来或在Object.keys中列举出来。
value:属性值。
* 当我们需要一个属性的时,Javascript引擎会先看当前对象中是否有这个属性, 如果没有的话,就会查找他的Prototype对象是否有这个属性。
function clone(proto) {
function Dummy() { }
Dummy.prototype = proto;
Dummy.prototype.constructor = Dummy;
return new Dummy(); //等价于Object.create(Person);
}
function object(old) {
function F() {};
F.prototype = old;
return new F();
}
var newObj = object(oldObject);
12.列出display的值,说明他们的作用。position的值, relative和absolute定位原点是?
1. block 象块类型元素一样显示。
none 缺省值。向行内元素类型一样显示。
inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示,并添加样式列表标记。
2.
*absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
*fixed (老IE不支持)
生成绝对定位的元素,相对于浏览器窗口进行定位。
*relative
生成相对定位的元素,相对于其正常位置进行定位。
* static 默认值。没有定位,元素出现在正常的流中
*(忽略 top, bottom, left, right z-index 声明)。
* inherit 规定从父元素继承 position 属性的值。
13.页面重构怎么操作?
编写 CSS、让页面结构更合理化,提升用户体验,实现良好的页面效果和提升性能。
14.语义化的理解?
html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;
在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。
使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
15.HTML5的离线储存?
localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 数据在浏览器关闭后自动删除。
16.为什么要初始化CSS样式。
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
*最简单的初始化方法就是: * {padding: 0; margin: 0;} (不建议)
淘宝的样式初始化:
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
17.(写)描述一段语义的html代码吧。
(HTML5中新增加的很多标签(如:<article>、<nav>、<header>和<footer>等)
就是基于语义化设计原则)
< div id="header">
< h1>标题< /h1>
< h2>专注Web前端技术< /h2>
< /div>
语义 HTML 具有以下特性:
文字包裹在元素中,用以反映内容。例如:
段落包含在 <p> 元素中。
顺序表包含在<ol>元素中。
从其他来源引用的大型文字块包含在<blockquote>元素中。
HTML 元素不能用作语义用途以外的其他目的。例如:
<h1>包含标题,但并非用于放大文本。
<blockquote>包含大段引述,但并非用于文本缩进。
空白段落元素 ( <p></p> ) 并非用于跳行。
文本并不直接包含任何样式信息。例如:
不使用 <font> 或 <center> 等格式标记。
类或 ID 中不引用颜色或位置。
18.absolute的containing block计算方式跟正常流有什么不同?
19.position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?
20.对BFC规范的理解?(W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。)
21.iframe有那些缺点?
*iframe会阻塞主页面的Onload事件;
*iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript
动态给iframe添加src属性值,这样可以可以绕开以上两个问题。
22.css定义的权重
以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下例子是演示各种定义的权重值:
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现
23.eval是做什么的?
它的功能是把对应的字符串解析成JS代码并运行;
避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)。
23.写一个通用的事件侦听器函数
`// event(事件)工具集,来源:https://github.com/markyun
markyun.Event = {
// 页面加载完成后
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
},
// 视能力分别使用dom0||dom2||IE方式 来绑定事件
// 参数: 操作的元素,事件名称 ,事件处理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件类型、需要执行的函数、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function() {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEnentListener) {
element.removeEnentListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻止事件 (主要是事件冒泡,因为IE不支持事件捕获)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默认行为
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 获取事件目标
getTarget : function(event) {
return event.target || event.srcElement;
},
// 获取event对象的引用,取到事件的所有信息,确保随时能使用event;
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};
24.99%的网站都需要被重构是那本书上写的?
* 网站重构:应用web标准进行设计(第2版)
25.什么叫优雅降级和渐进增强?
优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。
26.Node.js的适用场景
高并发、聊天、实时消息推送
27.WEB应用从服务器主动推送Data到客户端有那些方式? html5 websoket
WebSocket通过Flash
XHR长时间连接
XHR Multipart Streaming
不可见的Iframe
<script>标签的长时间连接(可跨域)
⑻ web前端考试的多选只选一个有分吗
不得分,多选题只有全答对才得分,否则不得分,这是个难点,需要考生全面掌握相关知识以及分析考题,如果有一点错漏,将面临着白答的准备,所以考试时,多选题先答有把握的,没有把握的,等所有题答完后再答,防止浪费时间。
⑼ web前端开发技能等级证书怎么考需要学什么课程
web前端开发技能等级证书考试为上机考试,分为理论考试和实操考试两场,需要学习HTML5+CSS3、JS交互设计、Node开发、前端框架以及小程序与APP开发等课程。
web前端开发技能等级考试注意事项:
1、考生需要携带身份证原件并将本人准考证和身份证放在桌面指定位置以备监考人员核对;
2、考生迟到30分钟禁止进入考场,考试前20分钟根据监考人员的提示,考生录入个人信息,登录考试系统。
⑽ Web前端开发笔试题
Web前端开发笔试题集锦
Web前端开发笔试题集锦:
1,截取字符串abcdefg的efg
var str = "abcdefg";
if (/efg/.test(str)) {
var efg = str.substr(str.indexOf("efg"), 3);
alert(efg);
}
2, 判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母、数字、下划线,总长度为5-20
var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
reg.test("a1a__a1a__a1a__a1a__");
3,判断一个字符串中出现次数最多的字符,统计这个次数
//将字符串的`字符保存在一个hash table中,key是字符,value是这个字符出现的次数
var str = "abcdefgaddda";
var obj = {};
for (var i = 0, l = str.length; i < l; i++) {
var key = str[i];
if (!obj[key]) {
obj[key] = 1;
} else {
obj[key]++;
}
}
/*遍历这个hash table,获取value最大的key和value*/
var max = -1;
var max_key = "";
var key;
for (key in obj) {
if (max < obj[key]) {
max = obj[key];
max_key = key;
}
}
alert("max:"+max+" max_key:"+max_key);
4,IE与FF脚本兼容性 问题
(1) window.event:
表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象
(2) 获取事件源
IE用srcElement获取事件源,而FF用target获取事件源
(3) 添加,去除事件
IE:element.attachEvent(onclick, function) element.detachEvent(onclick, function)
FF:element.addEventListener(click, function, true) element.removeEventListener(click, function, true)
(4) 获取标签的自定义属性
IE:div1.value或div1[value]
FF:可用div1.getAttribute(value)
(5) document.getElementByName()和document.all[name]
IE;document.getElementByName()和document.all[name]均不能获取div元素
FF:可以
(6) input.type的属性
IE:input.type只读
FF:input.type可读写
(7) 是否可用id代替HTML元素
IE:可以用id来代替HTML元素
FF:不可以
(8) innerText textContent outerHTML
IE:支持innerText, outerHTML
FF:支持textContent
;