当前位置:首页 » 网页前端 » web前端初级试题1实操考试答案
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web前端初级试题1实操考试答案

发布时间: 2023-01-21 04:19:51

A. 腾讯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

B. 谁能给我出一两道 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(可以详细一点)

答案在参考资料里面可以找到,答案在参考资料里面可以找到,答案在参考资料里面可以找到

C. 《web前端开发基础》作业考核试题有答案

1
请为元素①⑤选择右例最合适的使用场景,将配对好的a-cô写到括号中
收集用户捅入的文字信息

D. 求web前端面试题库及答案

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)

E. 常见的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前端面试题的相关分享,希望对大家有所帮助,想要了解更多相关内容,请及时关注本平台并进行查看!

F. 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("哎呀,你又点我了~");
}
}

加油~

G. 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 的⽣命周期有⼏个阶段,简单说说它们的作用?

H. 腾讯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、其它元素都高。 ( × )

;