当前位置:首页 » 网页前端 » web前端笔试题网易
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web前端笔试题网易

发布时间: 2022-12-10 08:37:07

❶ web前端笔试题

1. 设置元素浮动后,该元素的 display 值是多少( A )

    A.block B. 不变 C. inline D. inline-block

2. 以下不是 canvas 的⽅方法是( D )

    A.getContext() B. fill() C. stroke() D.controller

3. 不是 input 在 html5 新的类型的是( B )

    A.datetime B. file C. color D. range

4. 对权重排序正确的是( C )

a)  .list .box p

b)  #list .box div span

c)  .list span

d)  #list #box

e)  p:last-child

f)  style

A.f>d>b>a>c>e

C. f>d>b>a>c=e

B. f>d>b>a>e>c

D. f>b>d>a>c=e

5.对 document load 和 document ready 描述正确的是( B )

    A.$(document).ready()是当页⾯所有资源全部加载完成后,执

    ⾏⼀个函数

    B.如果图⽚资源较多加载时间较长,onload 后等待执⾏的函数

    需要等待较长时间,所以⼀些效果可能受到影响

    C.onload 是当 DOM ⽂档树加载完成后执⾏⼀个函数

    D.⼀般来说 load 会比$(document).ready()较快执⾏

6.["1", "2", "3"].map(parseInt) 答案是多少( A )

    A.[1, NaN, NaN]            B. [1, 2, NaN]

    C.[NaN, NaN, NaN]      D. [1, NaN]

7.以下对 Ajax 描述不正确的是( A )

    A.readyState 属性请求的状态,当值为 3 时是正在加载

    B.使用 XML 和 XSLT 进⾏行数据交换及相关操作

    C.总共有 8 种 callback

    D.abort()⽅法,停⽌当前请求

8.var temp=null,alert(typeof temp)弹出的结果是( B )

    A.Null     B. Object     C. Undefined     D. String

1. 对XMLHttpRequest对象的open⽅方法描述错误的是(BCD)

    A.在 IE 上使⽤的是 XMLHttpRequest 对象是 ActiveXObject

    B.在 Firefox 上使用的是 XMLHttpRequest 对象是ActiveXObject

    C.XMLHttpRequest 对象只能发送 get 请求

    D.XMLHttpRequest 对象只能发送 post 请求

2. 以下哪些是 javascript 的全局函数(ABC)

    A.parseFloat     B. eval     C. setTimeout     D. alert

3. 对 http 相关内容描述正确的是(BCD)

    A.301 状态码是临时重定向

    B.get ⽅方式只能⽀支持 ASCII 字符

    C.get 在从服务器上获取资源,post 重点在向服务器发送数据

    D.HTTPS 就是 HTTP 加上加密处理理

4. 以下结果正确的是(CD)

    A.typeof undefined= undefined 和 typeof null=null

    B.typeof “hello”==string typeof 0==Boolean

    C.typeof [1,2,3]=object typeof NaN=undefined

    D.typeof {name:“李华”,age:“23”}=object

5. 以下结果正确的是(AB)

    A.zepto.js 适合移动端的开发,jQuery 适合 PC 端的开发

    B.zepto.js 不支持 ie 浏览器器

    C.vue 属于 mvc 框架

    D.v-bind 实现双向绑定

6. 对 sass 描述错误的是(BD)

    A.sass 和 scss 其实是同⼀一种东⻄,都称之为 Sass

    B.sass 可以声明变量符号为&

    C.sass 最终都将转换成 css ⽂件才被引⽤

    D. sass 不可以扩展和继承

1. ⽗级⾼宽固定,子级⽔平垂直居中怎么实现(请用 2 种 flex ⽅

法实现)?

2. 写出⼀个简单的$.ajax()的请求方式?

3. 假如移动端设备的尺寸是320px要实现每1rem=16px怎么实

现?

4.使用 Javascript 打印出 1-10000 之间的所有对称数(例如 121

1331 等)

5. angular 框架之间的通信⽅式是什么,⾄少列出三种?

6. vue 的⽣命周期有⼏个阶段,简单说说它们的作用?

❷ 谁能给我出一两道 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 前端或者 JavaScript 面试笔试题

itjob为你解答:
平时面试也会问道,好好加油吧!

HTML+CSS
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外
链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维
护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
最主要的不同:
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

3.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档
加入XMl声明可触发,解析方式更改为IE5.5 拥有IE5.5的bug

4.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素:div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容,border ,margin,padding

5.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 :同时加载
前者无兼容性,后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式,后者不可

6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高

7.前端页面有哪三层构成,分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js

8.css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}

9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

10.写出几种IE6 BUG的解决方法
1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 !Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)

11.标签上title与alt属性的区别是什么?
Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息

12.描述css reset的作用和用途。
Reset重置浏览器的css默认属性 浏览器的品种不同,样式不同,然后重置,让他们统一

13.解释css sprites,如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量

14.浏览器标准模式和怪异模式之间的区别是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式

15.你如何对网站的文件和资源进行优化?期待的解决方案包括:
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用

16.什么是语义化的HTML?
直观的认识标签 对于搜索引擎的抓取有好处

17.清除浮动的几种方式,各自的优缺点
1.使用空标签清除浮动 clear:both(理论上能清楚任何标签,,,增加无意义的标签)
2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)
3.是用afert伪元素清除浮动(用于非IE浏览器)

Javascript
1.javascript的typeof返回哪些数据类型
Object number function boolean underfind

2.例举3种强制类型转换和2种隐式类型转换?
强制(parseInt,parseFloat,number)
隐式(== – ===)

3.split() join() 的区别
前者是切割成数组的形式,后者是将数组转换成字符串

4.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

5.事件绑定和普通事件有什么区别

6.IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题

7.IE和标准下有哪些兼容性的写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

8.ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的,一个是类似修改密码的

9.call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

10.ajax请求时,如何解释json数据
使用eval parse 鉴于安全性考虑 使用parse更靠谱
11.b继承a的方法

12.写一个获取非行间样式的函数

function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}

13.事件委托是什么
让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!
http://www.webasily.com/?p=78 例子可见此链接

14.闭包是什么,有什么特性,对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。
http://blog.csdn.net/gaoshanwudi/article/details/7355794 此链接可查看(问这个问题的不是一个公司)

15.如何阻止事件冒泡和默认事件
canceBubble return false

16.添加 删除 替换 插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

17.解释jsonp的原理,以及为什么不是真正的ajax
动态创建script标签,回调函数
Ajax是页面无刷新请求数据操作

18.javascript的本地对象,内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等

19.document load 和document ready的区别
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法,jquery中有 $().ready(function)

20.”==”和“===”的不同
前者会自动转换类型
后者不会

21.javascript的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合

22.编写一个数组去重的方法
function oSort(arr)
{
var result ={};
var newArr=[];
for(var i=0;i<arr.length;i++)
{
if(!result[arr])
{
newArr.push(arr)
result[arr]=1
}
}
return newArr
}

❹ 有哪些经典的 Web 前端或者 JavaScript 面试笔试题

一、不定项选择题 (每题3分,共30分)
1. 声明一个对象,给它加上name属性和show方法显示其name值,以下代码中正确的是( D )
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:”zhangsan”,show:”alert(this.name)”};
C. var obj = {name:”zhangsan”,show:function(){alert(name);}};
D. var obj = {name:”zhangsan”,show:function(){alert(this.name);}};
2. 以下关于Array数组对象的说法不正确的是( CD )
A. 对数组里数据的排序可以用sort函数,如果排序效果非预期,可以给sort函数加一个排序函数的参数
B. reverse用于对数组数据的倒序排列
C. 向数组的最后位置加一个新元素,可以用pop方法
D. unshift方法用于向数组删除第一个元素
3. 要将页面的状态栏中显示“已经选中该文本框”,下列JavaScript语句正确的是( A )
A. window.status=”已经选中该文本框”
B. document.status=”已经选中该文本框”
C. window.screen=”已经选中该文本框”
D. document.screen=”已经选中该文本框”
4. 点击页面的按钮,使之打开一个新窗口,加载一个网页,以下JavaScript代码中可行的是( AD )
A. <input type=”button” value=”new”
onclick=”open(‘new.html’, ‘_blank’)”/>
B. <input type=”button” value=”new”
onclick=”window.location=’new.html’;”/>
C. <input type=”button” value=”new”
onclick=”location.assign(‘new.html’);”/>
D. <form target=”_blank”action=”new.html”>
<inputtype=”submit” value=”new”/>
</form>

❺ 经典的 Web 前端或者 JavaScript 面试笔试题有哪些

一、不定项选择题 (每题3分,共30分)
1. 声明一个对象,给它加上name属性和show方法显示其name值,以下代码中正确的是( D )
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:”zhangsan”,show:”alert(this.name)”};
C. var obj = {name:”zhangsan”,show:function(){alert(name);}};
D. var obj = {name:”zhangsan”,show:function(){alert(this.name);}};
2. 以下关于Array数组对象的说法不正确的是( CD )
A. 对数组里数据的排序可以用sort函数,如果排序效果非预期,可以给sort函数加一个排序函数的参数
B. reverse用于对数组数据的倒序排列
C. 向数组的最后位置加一个新元素,可以用pop方法
D. unshift方法用于向数组删除第一个元素
3. 要将页面的状态栏中显示“已经选中该文本框”,下列JavaScript语句正确的是( A )
A. window.status=”已经选中该文本框”
B. document.status=”已经选中该文本框”
C. window.screen=”已经选中该文本框”
D. document.screen=”已经选中该文本框”
4. 点击页面的按钮,使之打开一个新窗口,加载一个网页,以下JavaScript代码中可行的是( AD )
A. <input type=”button” value=”new”
onclick=”open(‘new.html’, ‘_blank’)”/>
B. <input type=”button” value=”new”
onclick=”window.location=’new.html’;”/>
C. <input type=”button” value=”new”
onclick=”location.assign(‘new.html’);”/>
D. <form target=”_blank”action=”new.html”>
<inputtype=”submit” value=”new”/>
</form>
5. 使用JavaScript向网页中输出<h1>hello</h1>,以下代码中可行的是( BD )
A. <scripttype=”text/javascript”>
document.write(<h1>hello</h1>);
</script>
B. <scripttype=”text/javascript”>
document.write(“<h1>hello</h1>”);
</script>
C. <scripttype=”text/javascript”>
<h1>hello</h1>
</script>
D. <h1>
<scripttype=”text/javascript”>
document.write(“hello”);
</script>
</h1>
6. 分析下面的代码:
<html>
<head>
<script type=”text/javascript”>
function writeIt (value) { document.myfm.first_text.value=value;}
</script>
</head>
<body bgcolor=”#ffffff”>
<form name=”myfm”>
<input type=”text” name=”first_text”>
<input type=”text” name=”second_text”>
</form>
</body>
</html>
以下说法中正确的是( CD )
A. 在页面的第二个文本框中输入内容后,当鼠标离开第二个文本框时,第一个文本框的内容不变
B. 在页面的第一个文本框中输入内容后,当鼠标离开第一个文本框时,将在第二个文本框中复制第一个文本框的内容
C. 在页面的第二个文本框中输入内容后,当鼠标离开第二个文本框时,将在第一个文本框中复制第二个文本框的内容
D. 在页面的第一个文本框中输入内容后,当鼠标离开第一个文本框时,第二个文本框的内容不变
7. 下面的JavaScript语句中,( D )实现检索当前页面中的表单元素中的所有文本框,并将它们全部清空
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==”text”)
form1.elements.value=”";}
B. for(vari=0;i<document.forms.length;i++) {
if(forms[0].elements.type==”text”)
forms[0].elements.value=”";
}
C. if(document.form.elements.type==”text”)
form.elements.value=”";
D. for(vari=0;i<document.forms.length; i++){
for(var j=0;j<document.forms.elements.length; j++){
if(document.forms.elements[j].type==”text”)
document.forms.elements[j].value=”";
}
}
8. 在表单(form1)中有一个文本框元素(fname),用于输入电话号码,格式如:010-82668155,要求前3位是010,紧接一个“-”,后面是8位数字。要求在提交表单时,根据上述条件验证该文本框中输入内容的有效性,下列语句中,( A )能正确实现以上功能
A. var str= form1.fname.value;
if(str.substr(0,4)!=”010-”|| str.substr(4).length!=8 ||
isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码!”);
B. var str= form1.fname.value;
if(str.substr(0,4)!=”010-” && str.substr(4).length!=8 &&
isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码!”);
C. var str= form1.fname.value;
if(str.substr(0,3)!=”010-”|| str.substr(3).length!=8 ||
isNaN(parseFloat(str.substr(3))))
alert(“无效的电话号码!”);
D. var str= form1.fname.value;
if(str.substr(0,4)!=”010-”&& str.substr(4).length!=8 &&
!isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码!”);
9. 关于正则表达式声明6位数字的邮编,以下代码正确的是( C )
A. var reg = /\d6/;
B. var reg = \d{6}\;
C. var reg = /\d{6}/;
D. var reg = new RegExp(“\d{6}”);
10. 关于JavaScript里的xml处理,以下说明正确的是( BCD )
A. Xml是种可扩展标记语言,格式更规范,是作为未来html的替代
B. Xml一般用于传输和存储数据,是对html的补充,两者的目的不同
C. 在JavaScript里解析和处理xml数据时,因为浏览器的不同,其做法也不同
D. 在IE浏览器里处理xml,首先需要创建ActiveXObject对象
二、问答题
1. 列举浏览器对象模型BOM里常用的至少4个对象,并列举window对象的常用方法至少5个 (10分)
对象:Window document location screen history navigator
方法:Alert() confirm() prompt() open() close()
2. 简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明 (10分)
Document.getElementById 根据元素id查找元素
Document.getElementByName 根据元素name查找元素
Document.getElementTagName 根据指定的元素名查找元素
三、程序题
1、补充按钮事件的函数,确认用户是否退出当前页面,确认之后关闭窗口; (10分)
<html>
<head>
<script type=”text/javascript” >
function closeWin(){
//在此处添加代码
if(confirm(“确定要退出吗?”)){
window.close();
}
}
</script>
</head>
<body>
<input type=”button”value=”关闭窗口”onclick=”closeWin()”/>
</body>
</html>
2、写出简单描述html标签(不带属性的开始标签和结束标签)的正则表达式,并将以下字符串中的html标签去除掉(15分)
var str = “<div>这里是div<p>里面的段落</p></div>”;
//
<scripttype=”text/javascript”>
varreg = /<\/?\w+\/?>/gi;
varstr = “<div>这里是div<p>里面的段落</p></div>”;
alert(str.replace(reg,”"));
</script>
3、完成foo()函数的内容,要求能够弹出对话框提示当前选中的是第几个单选框。(10分)
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
</head>
<body>
<script type=”text/javascript” >
function foo() {
//在此处添加代码
var rdo =document.form1.radioGroup;
for(var i =0 ;i<rdo.length;i++){
if(rdo.checked){
alert(“您选择的是第”+(i+1)+”个单选框”);
}
}
}
</script>
<body>
<form name=”form1″ >
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”submit”/>
</form>
</body>
</html>
4、完成函数showImg(),要求能够动态根据下拉列表的选项变化,更新图片的显示 (15分)
<body>
<script type=”text/javascript” >
function showImg (oSel) {
//在此处添加代码
var str = oSel.value;
document.getElementById(“pic”).src= str+”.jpg”;
}
</script>
<img id=”pic”src=”img1.jpg”width=”200″ height=”200″ />
<br />
<select id=”sel”>
<option value=”img1“>城市生活</option>
<option value=”img2“>都市早报</option>
<option value=”img3“>青山绿水</option>
</select></body>

❻ 腾讯WEB前端笔试题和面试题答案

如下分享是一份完整的腾讯WEB前端笔试题,大家有空可以练一练!
一、耐心填一填!(每空4分,共24分)

1. 为span设置类a与b,应编写HTML代码_

_

_________。

2. 设置CSS属性clear的值为_both___________时可清除左右两边浮动。

3. ____li________标签必须直接嵌套于ul、ol中。

4. CSS属性_____margin_______可为元素设置外补丁。

5. 设置CSS属性float的值为___none_________时可取消元素的浮动。

6. 文字居中的CSS代码是____text-align:center________。

二、精心选一选!(每题4分,共16分)

1. 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度( C )

A. display:inline B. display:none C. display:block D. display:inheric

2. 选出你认为最合理的定义标题的方法( C )

A. 文章标题

B.

文章标题

C.

文章标题

D. 文章标题

3. br标签在XHTML中语义为( A )

A.换行 B.强调 C.段落 D.标题

4. 不换行必须设置( AC )

A.word-break B.letter-spacing C.white-space D.word-spacing

5. 在使用table表现数据时,有时候表现出来的会比自己实际设置的宽度要宽,为此需要设置下面哪些

属性值( AD )

A. cellpadding=”0″ B. padding:0 C. margin:0 D. cellspacing=”0″

三、判断对或错!(每题4分,共24分)

1. CSS属性font-style 用于设置字体的粗细。 ( × )

2. CSS属性overflow用于设置元素超过宽度时是否隐藏或显示滚动条。 ( √ )

3. 在不涉及样式情况下,页面元素的优先显示与结构摆放顺序无关。 ( × )

4. 在不涉及样式情况下,页面元素的优先显示与标签选用无关。 ( √ )

5. display:inline兼容所有的浏览器。 ( √ )

6. input属于窗体元素,层级显示比flash、其它元素都高。 ( × ) 1 2

❼ 常见的web前端面试题及答案分享

1、 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)


答:行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行。兼容性:display:inline-block;*display:inline;*zoom:1。



2、box-sizing常用的属性有哪些?分别有什么作用?


答:box-sizing: content-box|border-box|inherit。content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。


border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。


3、Doctype作用?标准模式与兼容模式各有什么区别?


答:告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。


标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。


4、html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?


答:HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。


(1)绘画 canvas;


(2)用于媒介回放的 video 和 audio 元素;


(3)本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;


(4)sessionStorage 的数据在浏览器关闭后自动删除;


(5)语意化更好的内容元素,比如 article、footer、header、nav、section;


(6)表单控件,calendar、date、time、email、url、search;


(7)新的技术webworker, websocket, Geolocation;


IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim。


以上就是环球青藤小编关于web前端面试题的相关分享,希望对大家有所帮助,想要了解更多相关内容,请及时关注本平台并进行查看!

❽ 腾讯WEB前端笔试题和面试题答案

腾讯WEB前端笔试题和面试题答案

能进入腾讯工作是多少人的梦想,下面我为大家搜集的一篇“腾讯WEB前端笔试题和面试题答案”,供大家参考借鉴,希望可以帮助到有需要的朋友!

一、 耐心填一填!(每空4分,共24分)

1. 为span设置类a与b,应编写HTML代码_________。

2. 设置CSS属性clear的值为_both___________时可清除左右两边浮动。

3. ____li________标签必须直接嵌套于ul、ol中。

4. CSS属性_____margin_______可为元素设置外补丁。

5. 设置CSS属性float的值为___none_________时可取消元素的浮动。

6. 文字居中的CSS代码是____text-align:center________。

二、 精心选一选!(每题4分,共16分)

1. 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度( C )

A. display:inline B. display:none C. display:block D. display:inheric

2. 选出你认为最合理的定义标题的方法( C )

A. 文章标题

B.

文章标题

C.

文章标题

D. 文章标题

3. br标签在XHTML中语义为( A )

A.换行 B.强调 C.段落 D.标题

4. 不换行必须设置( AC )

A.word-break B.letter-spacing C.white-space D.word-spacing

5. 在使用table表现数据时,有时候表现出来的'会比自己实际设置的宽度要宽,为此需要设置下面哪些属性值( AD )

A. cellpadding=”0″ B. padding:0 C. margin:0 D. cellspacing=”0″

三、判断对或错!(每题4分,共24分)

1. CSS属性font-style 用于设置字体的粗细。 ( × )

2. CSS属性overflow用于设置元素超过宽度时是否隐藏或显示滚动条。 ( √ )

3. 在不涉及样式情况下,页面元素的优先显示与结构摆放顺序无关。 ( × )

4. 在不涉及样式情况下,页面元素的优先显示与标签选用无关。 ( √ )

5. display:inline兼容所有的浏览器。 ( √ )

6. input属于窗体元素,层级显示比flash、其它元素都高。 ( × )

;