web前端面试总结

时间:2019-05-12 15:20:46下载本文作者:会员上传
简介:写写帮文库小编为你整理了多篇相关的《web前端面试总结》,但愿对你工作学习有帮助,当然你在写写帮文库还可以找到更多《web前端面试总结》。

第一篇:web前端面试总结

1.常用那几种浏览器测试?有哪些内核(Layout Engine)?(Q1)浏览器:IE,Chrome,FireFox,Safari,Opera。(Q2)内核:Trident,Gecko,Presto,Webkit。

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

(Q1)行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。

块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行。(Q2)兼容性:display:inline-block;*display:inline;*zoom:1;

3.清除浮动有哪些方式?比较好的方式是哪一种?(Q1)(1)父级div定义height。

(2)结尾处加空div标签clear:both。(3)父级div定义伪类:after和zoom。(4)父级div定义overflow:hidden。(5)父级div定义overflow:auto。(6)父级div也浮动,需要定义宽度。(7)父级div定义display:table。(8)结尾处加br标签clear:both。

(Q2)比较好的是第3种方式,好多网站都这么用。

4.box-sizing常用的属性有哪些?分别有什么作用?(Q1)box-sizing: content-box|border-box|inherit;(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

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

5.Doctype作用?标准模式与兼容模式各有什么区别?(Q1)告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

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

6.HTML5 为什么只需要写 ?

HTML5不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)。

而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

7.页面导入样式时,使用link和@import有什么区别?

(1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;(2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;(3)import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题。

8.介绍一下你对浏览器内核的理解?

主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、我们组建一大牛裙前面是4七一,整理讯息(例如加入CSS等),中间是零2七,以及计算网页的显示方式,后面是壹武四,是学习的就加,不是学习的请勿打扰。然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS引擎则:解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。

9.html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?(Q1)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;(Q2)IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim,

10.简述一下你对HTML语义化的理解? 用正确的标签做正确的事情。

html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

JavaScript----------------------------

1.介绍js的基本数据类型

Undefined、Null、Boolean、Number、String

2.js有哪些内置对象?

数据封装类对象:Object、Array、Boolean、Number 和 String 其他对象:Function、Arguments、Math、Date、RegExp、Error

3.this对象的理解

this总是指向函数的直接调用者(而非间接调用者); 如果有new关键字,this指向new出来的那个对象;

在事件中,this指向触发这个事件的对象,特殊的是,IE中的attachEvent中的this总是指向全局对象Window。

4.eval是做什么的?

它的功能是把对应的字符串解析成JS代码并运行;

应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)。由JSON字符串转换为JSON对象的时候可以用eval,var obj =eval('('+ str +')')。

5.DOM怎样添加、移除、移动、复制、创建和查找节点 // 创建新节点

createDocumentFragment()//创建一个DOM片段 createElement()//创建一个具体的元素 createTextNode()//创建一个文本节点 // 添加、移除、替换、插入 appendChild()removeChild()replaceChild()insertBefore()//在已有的子节点前插入一个新的子节点 // 查找

getElementsByTagName()//通过标签名称

getElementsByName()//通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)getElementById()//通过元素Id,唯一性

6.null和undefined的区别?

null是一个表示“无”的对象,转为数值时为0;undefined是一个表示“无”的原始值,转为数值时为NaN。undefined:

(1)变量被声明了,但没有赋值时,就等于undefined。

(2)调用函数时,应该提供的参数没有提供,该参数等于undefined。(3)对象没有赋值的属性,该属性的值为undefined。(4)函数没有返回值时,默认返回undefined。null:

(1)作为函数的参数,表示该函数的参数不是对象。(2)作为对象原型链的终点。

7.new操作符具体干了什么呢?(1)创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。(2)属性和方法被加入到 this 引用的对象中。

(3)新创建的对象由 this 所引用,并且最后隐式的返回 this。

8.JSON 的了解?

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。格式:采用键值对,例如:{'age':'12', 'name':'back'}

9.call()和 apply()的区别和作用?

apply()函数有两个参数:第一个参数是上下文,第二个参数是参数组成的数组。如果上下文是null,则使用全局对象代替。如:function.apply(this,[1,2,3]);call()的第一个参数是上下文,后续是实例传入的参数序列。如:function.call(this,1,2,3);

10.如何获取UA?

function whatBrowser(){

document.Browser.Name.value=navigator.appName;

document.Browser.Version.value=navigator.appVersion;

document.Browser.Code.value=navigator.appCodeName;

document.Browser.Agent.value=navigator.userAgent;

} 其他

----------------------------

1.HTTP状态码知道哪些?

Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息 200 OK 正常返回信息

201 Created 请求成功并且服务器创建了新的资源 202 Accepted 服务器已接受请求,但尚未处理

301 Moved Permanently 请求的网页已永久移动到新位置。302 Found 临时性重定向。

303 See Other 临时性重定向,且总是使用 GET 请求新的 URI。304 Not Modified 自从上次请求后,请求的网页未修改过。400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。

401 Unauthorized 请求未授权。403 Forbidden 禁止访问。

404 Not Found 找不到如何与 URI 相匹配的资源。500 Internal Server Error 最常见的服务器端错误。

503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。

2.你有哪些性能优化的方法?

(1)减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存,图片服务器。

(2)前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

(3)用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。(4)当需要设置的样式很多时设置className而不是直接操作style。(5)少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

(6)避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。(7)图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。

3.什么叫优雅降级和渐进增强?

优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效。渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。

4.哪些常见操作会造成内存泄漏?

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。

闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)。

5.线程与进程的区别

一个程序至少有一个进程,一个进程至少有一个线程。线程的划分尺度小于进程,使得多线程程序的并发性高。

另外,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率。

线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

第二篇:web前端个人简历

个人简历

个人信息

姓名:xxxx 性别:男

出生日期:1993.03 婚姻状况:未婚 工作所在地:北京 家庭所在地:湖北

联系电话:18xxxxxx

电子邮箱:xxxxxx@qq.com

专业技能

1、熟练使用Sublime、Photoshop等软件,掌握网站效果图的制作、切片以及HTML页面代码优化等技术;

2、精通HTML5+CSS3、DIV+CSS等网站前端技术;

3、能够熟练编写标准前端代码,熟悉浏览器兼容问题解决方案;

4、熟练掌握javascript语言,精通jQuery库、bootstrap库,能够实现网页的动态效果与页面交互;

5、熟练掌握响应式设计,能够开发移动端页面;熟练使用swiper手机端应用库;

6、了解node后台,熟练掌握Ajax技术;

7、了解gulp自动化构建工具,了解less,echarts图表库;

工作经验

2015.07– 至今 工作职责: 北京第嘉传媒文化有限公司 职位名称:前端开发工程师

负责公司产品或项目Web前端开发,根据产品需求和UI效果图利用sublime编程软件进行div/css标准网页制作,Js逻辑设计与开发、jQuery特效编写以及使用插件实现特效,解决主流浏览器兼容性问题,对网站用户体验性能进行优化,完成产品前端展示效果和交互功能。

2014.09– 2015.6

工作职责: 秦皇岛市金銮之巅科技开发有限公司

职位名称:前端开发工程师

负责公司项目的前端修改调试和开发工作,精确的将网站设计图重构成html 页面。从ps切图到div/css标准网页制作及主流浏览器兼容问题的解决,并与后台紧密配合,确保代码有效链接。

项目经历: PC端 中国智力运动网

http://www.xiexiebang.com)是由泰康人寿保险股份有限公司全资发起成立的大型互联网保险公司,产品涵盖意外险、理财险、健康险、旅游险等多种保险。

个人站

kafeihaoka.github.io

教育背景

2011.09-2015.06 燕山大学里仁学院 电子信息工程 本科 求职意向

职位:Web 前端开发 工作地点:北京

第三篇:Web前端工作总结

Web前端学习总结

一.名词解释 1.横切

在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切 2.留白 两个容器或碎片之间的上、下、左、右的空白距离 3.继承

元素可以从其父级元素中获得一些可为自己使用的属性或值。4.图片定位

把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中,利用CSS中对图片进行遮罩属性,多用于页面中的修饰图 5.底图

页面中在标签中使用的背景图 6.齐底(图)线 用于区分横切或碎片结束的线或图 7.页面结构

页面的基础框架,由横切、布局元素组成 8.焦点区(图)最易注意的区域 9.导航

在页面中具有导向性的链接集合 10.头图 页面主题图片 11.间距

碎片或文字间的距离 12.行高

文字段落中行与行之间的距离 13.首行缩进 文字段落首行缩进 14.浮动

使被定义的区域脱离正常的页面文档流 15.碎片 由文字、图片组合成的内容区域 16.通栏广告 与页面内容区同宽的广告区域 17.功能按钮 具有交互属性的按钮 18.私有样式

当前页面独立使用的样式,不具备公用性 19.水平(垂直)居中

在页面中的某个元素处于父级的上下或左右的相同距离 20.标准头(尾)定义相同的页面头或尾元素集合 二.文本格式化 1.段落:p 2.斜体:address(联系信息)em(强调)i(突出不同)cite(引用)dfn(首次定义术语)3.粗体:strong(重要)b(提醒)4.图片块:figure 5.引述文段,段落缩进:blockquote 6.背景颜色:mark 7.虚线下划线:abbr 8.上标下标:sub/sup 9.下划线:ins 10.删除线:del(标记已删除内容)s(标记不准确内容)11.等宽字体:code 12.预格式化:pre 13.字号减小,表注释:small 14.时间:time 15.换行:br 16.html5定义区块:header nav article section aside footer div span 三.表单表格

1.

...
2.表单元素的组织:
...
...
3.创建各种框: 注:text→password/url/tel/email Id:为了让对应的标签识别,添加CSS Name:为了让服务器和脚本识别,通常与id设为一样 Size:文本框大小 Maxlength:能输入的最大字符数 Pattern:正则表达式

4.添加标签: 5.单(多)选按钮:

注:id各自唯一,name必须相同。checked:默认选择 6.下拉框:

注:size:选择框的高度 multiple:允许多选 selected:默认选择 用„对选择框进行分组 7.上传文件: 注:size:输入路径和文件名的字段的宽度 8.禁用表单元素: 9.创建提交按钮: 创建带图像的提交按钮: 创建图像按钮: Submit→reset重置

10.文本区域: 11.表格 :

.. ..
.. .. ..
四.文本格式化 1.{font:(斜体 粗体 小型大写字母)字体大小(必有)行距 字体集(必有);} 2.文本背景:{ background:#foc url(1.jpg)repeat-x scroll 0 0;} 3.字间距:word-spacing:12px;4.字偶距:letter-spacing:12px;5.缩进增加:text-indent:12px;6.小型大写字母: font-variant:small-caps;7.文本对齐:text-align:left;适用于block,inline-block 8.单词大小写: text-transform:capitalize(单词首字母大写)/uppercase(大写)/lowercase(小写)9.文本上的线:text-decoraion:underline/overline/line-through;11.空格:white-space:pre(显示所有空格回车)/nowrap(非断行空格); 12.h3—16px;h5—12px;verdana,Geneva,sans-serif;13.列表属性: li{list-style:url(1.jpg)inside square;} 五.CSS布局

1.width:不包括padding,border,margin;max-width设置外围限制; 2.浮动:float:left;清除浮动:clear:both;3.设置边框: border:dotted 4px red;(dotted点状、dashed虚线、solid实线)4.使元素对齐:vertical-align:baseline/middle/text-bottom..5.显示:display:black/inline/inline-block;6.显示:visibility:visible/hiddle;7.相对定位:{position:relative;top:5px;} 相对于该元素的原始位置 8.绝对定位:{position:absolute;top:5px;} 相对于body或离他最近定位的祖先元素 9.三维位置:{z-index:50;} 越大的在最上面

10.厂商前缀:-webkit-(safari)–moz-(firefox)–ms-(IE)–o-(opera)11.创建圆角: {-moz-border-radius-topleft:50px;-webkit-border-top-left-radius:50px;border-top-left-radius:50px;}(左上角,角的半径是50px){border-radius:50px;}(所有角简写)12.创建椭圆角:{„ „ border-radius:40px/20px;}(x半径/y半径)13.创建圆形:{„ „ border-radius:50px;} 50px为元素半径大小 14.文本加阴影:{text-shadow: 2px 5px 5px #999;} x/y/模糊半径

15.元素加阴影:{(-moz-/-webkit-)box-shadow:(inset内阴影)2px 5px 5px #999;5px 10px 2px #555(多重阴影);} 16.多重背景:{background:#000 url(1.png)50% 102% no-repeat,#222 url(2.png)12px-150px repeat-x;} 17.透明度: {opacity:.5;} 0→1 透明→不透明

18.渐变背景:{background:linear-gradient(left,#000,#999);}(left :渐变线沿逆时针方向转至水平线的角度)六.html5视频音频

1.html5支持3种视频:.ogg/.ogv.mp4/.m4v.webm 2.添加视频: 视频属性:src autoplay controls muted loop poster width height preload 3.为视频添加多个来源: 4.html5支持5中音频:.ogg.mp3.wav.aac.mp4 5.添加音频: 音频属性:src autoplay controls muted loop preload。多个来源同video。七.一些约定

我们结合常用的一些命名习惯,再结合CSS的实际应用,整理出一些较好的命名习惯。1.样式名称首字母统一为小写字母,不能为数字,下划线及特殊字符;

3.设置边框: border:dotted 4px red;(dotted点状、dashed虚线、solid实线)4.使元素对齐:vertical-align:baseline/middle/text-bottom..5.显示:display:black/inline/inline-block;6.显示:visibility:visible/hiddle;7.相对定位:{position:relative;top:5px;} 相对于该元素的原始位置 8.绝对定位:{position:absolute;top:5px;} 相对于body或离他最近定位的祖先元素 9.三维位置:{z-index:50;} 越大的在最上面

10.厂商前缀:-webkit-(safari)–moz-(firefox)–ms-(IE)–o-(opera)11.创建圆角: {-moz-border-radius-topleft:50px;-webkit-border-top-left-radius:50px;border-top-left-radius:50px;}(左上角,角的半径是50px){border-radius:50px;}(所有角简写)12.创建椭圆角:{„ „ border-radius:40px/20px;}(x半径/y半径)13.创建圆形:{„ „ border-radius:50px;} 50px为元素半径大小 14.文本加阴影:{text-shadow: 2px 5px 5px #999;} x/y/模糊半径

15.元素加阴影:{(-moz-/-webkit-)box-shadow:(inset内阴影)2px 5px 5px #999;5px 10px 2px #555(多重阴影);} 16.多重背景:{background:#000 url(1.png)50% 102% no-repeat,#222 url(2.png)12px-150px repeat-x;} 17.透明度: {opacity:.5;} 0→1 透明→不透明

18.渐变背景:{background:linear-gradient(left,#000,#999);}(left :渐变线沿逆时针方向转至水平线的角度)六.html5视频音频

1.html5支持3种视频:.ogg/.ogv.mp4/.m4v.webm 2.添加视频: 视频属性:src autoplay controls muted loop poster width height preload 3.为视频添加多个来源: 4.html5支持5中音频:.ogg.mp3.wav.aac.mp4 5.添加音频: 音频属性:src autoplay controls muted loop preload。多个来源同video。七.一些约定

我们结合常用的一些命名习惯,再结合CSS的实际应用,整理出一些较好的命名习惯。1.样式名称首字母统一为小写字母,不能为数字,下划线及特殊字符; 2.样式名尽量语义化或简写; 3.样式名需要组合拼写时,采用全部小写拼写并使用下划线连接,即:all_keyword; 4.使用px(像素)为基本计量单位; 5.页面中空格的使用:全角:中文空格 半角;  6.项目完成包中,文件夹及文件名称全部采用小写字母,不使用中文文件名; 7.减少DIV的嵌套层数;

8.给重要图片加上alt属性;给重要的元素和截断的元素加上title; 9.使用正确的注释方法(详见“注释”章节); 10.特殊情况下要求表现和内容分离,代码中不要涉及任何表现的元素,例如:style、font 等;

11.双标记签都要有开始和结束标签,单标记标签的后面一定要加“ /”,例如:
等,并且有正确的层次; 12.其它特殊符号: 1)<(<)2)>(>)八.命名空间

8.1外挂样式名称 全局:public.css 全局样式为全站公用,为页面样式基础,页面中必须包含。结构:layout.css 页面结构类型复杂,并且公用类型较多时使用。多用在首页级页面和产品类页面中。私有:style.css 独立页面所使用的样式文件,页面中必须包含。模块 module.css 产品类页面应用,将可复用类模块进行剥离后,可与其它样式配合使用。默认 default.css 文章 article.css 图片 photo.css 下载 soft.css 主题 themes.css 实现换肤功能时应用。补丁 mend.css 基于以上样式进行的私有化修补。8.2 常用名称(1)页面结构 容器: container 页头:header 内容:content/container/content(A)页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 浮左浮右:fl fr 清除浮动 clear(2)导航 导航:nav 主导航:mainbav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu 标题:title 摘要:summary 路径:path(3)模块化命名 模块头部:hd 模块内容部分:bd 模块底部:ft(4)各内容页对应 标题:title 副标题:subtitle 属性:properties 简介:infor 内容:content 分页:page 插入广告:insert_ad 表情:expression 功能选项:options 上下篇:up_down 评论:comments 相关内容:related 下载地址:download 播放地址:play_add(5)功能 标志:logo 广告:banner 登陆:login 登录条:loginbar 注册:regsiter 搜索:search 日期:date 功能区:shop 标题:title 加入:joinus 状态:status 按钮:btn 滚动:scroll 标签页:tab 文章列表:list 提示信息:msg 当前的:current 小技巧:tips 图标:icon 注释:note 指南:guild 服务:service 热点:hot 新闻:news 下载:download 投票:vote 合作伙伴:partner 友情链接:link 版权:copyright 九.基本设置-public.css 9.1 全局设置

上下边距(margin、padding):0(px)左右边距(margin):auto(自动)底色(background):#FFF(白色)字体(font-family)、字号(font-szie)、字色(color):”宋体” 12px #666 代码: /* 全局CSS定义 */ body{margin:0 auto;padding:0;background:#FFF;color:#666;font:12px ‘宋体';} div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;} h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;} ul,ol,li{list-style:none} table,td,input,textarea{font-size:12px} 9.2 页面标签初始化设置 1.常用基本标div,form,ul,ol,li,span,p,dl,dt,dd,img 设置基本标签的间距、边框默认值为0。2.h1~h6标题

默认标题内字号12px,内外间距为0px,文字不加粗。3.ul,ol,li 列表 默认不显示项目符号。4.h2 栏目标题

说明:h2标签被定义为栏目标题特殊使用,在标签中非标题文字默认居右显示,主标题文字使用span标签包含,居左显示。5.默认链接颜色

常态下不显示文字下划线,颜色为灰(#333),鼠标悬浮时:显示文字下划线,颜色变为暗红(#ccc)。6.状态:a:link{未点} a:visited{已点} a:focus{键盘选中} a:hover{指针停留} a:active{正在点} 9.3 页面宽度 默认页面宽(命名规范):按栅格化进行 9.4.clear 结束容器内各元素的浮动属性,使相邻容器或元素节点正常显示。以下是清除浮动的几种方法 方法一.clear { clear:both;height:0;font-size:0;line-height:0 } 或.clear { border-top: 1px solid transparent!important;margin-top:-1px!important;border-top: 0px;margin-top: 0px;height: 0px;clear: both;background: none;font-size: 0px;visibility: hidden;} 或.clear{ clear:both;font-size:1px;width:1px;height:0;visibility:hidden;margin-top:0px!important;*margin-top:-1px;line-height:0 } 使用方法:

第四篇:腾讯实习生WEB前端面试经历

在腾讯面试之前我申请了淘宝的前端,可是笔试就被淘宝鄙视了。这之前还有一个百度内推的,二面已经结束了,不过还真的不知道结果,人家给我答案是这周之内,如果没有过的话,还有三面,如果过了的话,直接就可以拿offer。

相比之下腾讯是很人性化的,不放过一个有才能的人。

从笔试就可以看出来,我当时网申了,但是没有申请岗位所以最后只能去霸笔。到了那里以后才发现霸笔的人真的不少啊!笔试完以后晚上就听说有同学收到面试的通知了,我那个心里着急啊,不过后面一个牛人告诉我说大家都过了,那时候开心啊!然后去网站上查看了一下自己的面试时间和地点,唉那个悲剧啊。我本人做一些兼职给一群中学生上课,每次星期天都要上到下午六点回来,面试时间居然是下午5点,我也顾不了多少了,直接请假,唉!被那个负责人批了一大堆。由于去那里的时候在路上我一直用手机看面经,有时候看着我都想吐了。下午四点多我就带上了笔记本(这里强调一下,如果是技术的最好带上自己的作品,那样可能面试的时候主动权会掌握在自己手里)赶去了华工。

一面

一面的人还真的很多呀,在面试地点看到了很多牛人,比如说我的研究所师兄,我们班的百度牛人。签到完以后我就走到了一个房间门口,乍一看,哇那么多人在排队,最后一个MM告诉我她们面试的是产品的,幸好,不然会等死人的。我面试的是前端js,大概5点左右的时候一个gg把我叫了进去,进去以后就感觉一种亲切感没有之前的紧张感,然后面试官叫我等等,估计他还有些事情处理,之后我看到我的笔试成绩丢人啊(不好意思说了)!然后面试官叫我自我介绍一下,然后我就balabala的说了一下自己对web开发的兴趣以及一些自己开发的项目,然后我就把笔记本带来的项目一一介绍给他看,似乎他只看我运行的结果。然后就开始问我一些简历上的问题.面试官:你讲一下你的学生实践工作吧。然后我就说了一下自己担任过学生处助理、院的团委副部长,然后就是讲了一下自己的学生工作的体验和感受。

面试官:你有学过数据结构是吗?那我就问你一些问题。

然后他问了我一些基本的:二叉树是什么、平衡二叉树是什么、有哪些排序算法、讲解一个你最熟悉的排序算法、还有就是二分查找。

然后我就向面试官借笔,给他说了上面的问题比如说什么是二叉树等,然后在讲解快排的时候我囧了,自己给自己出难题,我列举了一组数据然后有两个相同的数字,忽然忘记相同数字怎么处理了,最后我就说去掉相同的,然后给他讲解了一下基本思路。他说:嗯嗯,最后就那样说了一下,这些还是很基本的东东的,最后就没有问其他方面的问题了,大概整个面试时间为40分钟,然后我就很安静的走了。

二面

一直都在等二面,等的我好着急,大概是第二天晚上左右吧,听到有同学说收到了二面的通知了,我那个心里着急啊,难道又被鄙视了,感觉自己还行的,我就一直等到晚上11点30

左右,看到手机来短信了,一打开那个高兴啊(下午17:20华工大学城酒店),然后又是一阵翻看面经。27号我怕路上堵车就早早的到了华工,一直在门口等。在外面的时候偷窥了一下里面,发现那个面试官好严,而且一看就是那种技术总监类型的人。门口遇到两个华工的同学,他们有一个同学被刷了,另外一个同学也来面试前端js方向的,听他们说我们这个岗位方向的二面的同学只有6个人,顿时感觉压力好大啊。差不多4:30的时候忽然接到一个网易的电话,叫我去网易大厦笔试,当时看到电话还以为是百度的呢。当时在外面的时候很紧张,刚开始听里面华工同学介绍还以为这一面不是技术面,不过后面告诉我这就是技术面,而且很严格。里面有两个同学,一个同学在面试,另一个同学一直在写代码,似乎他做不出来一直被面试官压着。5:30左右我进去了,开始很有礼貌的寒暄了几句。然后他告诉叫我自我介绍一下,这里我就是根据一面的时候的介绍说了大概3分钟。他就开始问我技术问题了。第一个,PHP是怎么跑起来的。刚开始我那个纠结呀,难道是问我PHP在历史上是怎么跑起来的?应该不会吧,然后我就问了他说:您说的是PHP是历史吗?然后他就说我问的是:如何运行起来的。这下我明白了,我说:通过配置本地服务器apache+wampserver,然后这个问题就大致过了,很囧的是这里的apache读错了。第二个问题:你认为java和javascript有什么关系吗?这些我还是明白的,我说:java和javascript是两种完全不同的语言,例如javascript数据类型只有number、string、object、array而java就有int、folat等等,javascript是一种web前端开发的脚本语言,与java完全不同。第三个问题:你有一个项目是“中山大学三余社网站”,能不能介绍一下。这个东西,这个项目我还是很清楚的,毕竟这个项目是我和另外两位大牛做的,然后就balabala的说了一大堆。最后他就要我写代码,题目是这样的,如果有一个双相链表,你如何确认这个双相链表是否断链。对于这个问题我还是真的有些糊涂,然后就问题,断链的意思,是不是说,这个双相链表断了一条还是两条都断,他说:不知道。唉,当时那个囧啊,那只有自己好好想了,开始我认为断链了就很有可能是指向了NULL,所以我分别从左和右遍历链表,找到最后一个指向空的指针,如何是从头开始遍历那么最后一个如果不是双相链表的最后一个元素那么就说明断链了,从右边开始遍历,如果最后一个指向空的指针不是head那么也是断链了。给他看了代码以后,他说:你怎么知道,断链了就一定指向空的呢。当时我好纠结啊,最后我想到了,分为三种情况,1,next指针断开,指向其他指针;2,pre指针断开指向其他指针;3,next和pre同时断开。分为这三种情况以后问题就得到解决了。最后就是问了我一个数据库的问题,他说如果海量数据的时候你应该用什么方法来处理查找的问题。然后我就说:使用hash表存储。他就说:怎么用hash存储和查找。我说:使用一种相应的规则定义hash,然后根据输入插入到数据库中,查找的时候也使用hash查找。然后他问我:如果遇到hash冲突的话应该怎么办。我就说:如果两边没有记录那就插入到两边。显然他对这个不满意,然后我就说可以再次使用hash,然后他就没说什么啦。最后他就说:那就这样吧,你们是不是还有三面的?但是那个心里挺高兴的,我说是丫。然后就很安静的走了出去,第二天下午5点就收到了三面的hr面试通知。

三面

很纠结,三面的前一晚上一直到3点都没有睡着,早上6点钟就醒了,不过人还挺精神的。差不多10:20左右到了华工参加三面。三面是HR面试,大家都在想HR会不会刷人,都很担心,我自己也是非常的担心。在门口也遇到了很多熟人,比如说嘉聪、沛轮小俩口、二面的一个华工的同学、信科院的一个同学。进去HR面试的同学出来以后都是满脸的轻松愉快,当时紧张的心里倒也平静了许多。大概11:00左右吧,两个面试产品的同学在三面挂了,想参加HR面试,可是前台签到的JJ不告诉他们产品的面试地点,当时也觉得他们产

品的真不容易啊,1000多个人笔试只招个位数,那个竞争压力真大啊。11:30的时候轮到我面试,我进去以后,轻轻的把门关上(这个细节大家以后也稍稍的注意一下,是看以前师兄师姐面经看到的)。之后他同样让我自我介绍,我又是根据一面、二面的经验简单的介绍了一下。然后他就开始问我,你对腾讯了解多少?我就借用腾讯的Webqq发展过程,简单说了一下现在的webqq已经深入人心,而且由最初的基本功能上升到现在PC化的web网页,实在是令web开发的技术人员佩服。他继续说:你还了解腾讯的哪些产品?我说:腾讯的QQ空间,有一个板块专门显示一些和你相识度非常大的用户,可以很方便的让用户联系到那些同学、朋友,另外一个就是腾讯的输入法(这个也不是很清楚,只是简单给他说了一下)等等。他说:你开电脑的第一件事情是干什么?我果断的说:登qq。HR:你上qq隐身多还是在线多。很果断的说:隐身多。HR:你上qq都隐身,为什么还要登qq呢。我:首先因为我经常的会使用腾讯的微博,偶尔发一下微博,还有就是经常的会逛逛qq空间,查看一些同学的签名啊,日志啊,还有就是因为隐身的时候会偶尔有人找我。HR:你是哪里人?我:江西人(很干脆说完了)。HR:那你在大学期间,兴趣爱好是什么呢?我:我喜欢玩玩qq游戏(四国军旗、斗地主)、打篮球、看看格言、听听音乐等等。HR:那你为什么要来腾讯呢,是不是腾讯工资很高啊?我:不是的,我主要是想通过实习能够学会更多的知识,来提高自己的能力,能够通过在高技术的公司学会更多技术方面的东西。看着他点头,感觉应该回答的还行。他还问了我一些技术的问题,HR:你是不是开发了一些项目,能简单介绍一下你们的分工是怎么样的吗?我就简单的介绍了一下。HR:你上网的时候经常做些什么事情呢?我:经常的看一些最近的新闻,比如说qq就会经常的弹出一些最新关注问题,还有就是查看一些资料啊,看一些论坛发布的最新的技术问题。然后大概就是这么多,他还问了我有没有女朋友,女朋友是干啥的。差不多20分钟的面试时间吧,感觉总体来说还是比较轻松的,不过在面试的时候最好就是不要说假话,因为HR阅人无数,就不要在他面前显示什么啦,最好就是有什么说什么。基本上不会问你技术问题,大部分都是一些你的性格爱好,以及对于腾讯的了解之类的问题。

虽然offer还没有拿到,不过这些天真的很不容易。写出来只是希望大家以后有个参考,并不是显摆,说我有多厉害。我们班的牛人是很多,不过我真的不是牛人,我只是菜鸟一个。你们都懂的。

第五篇:web前端开发知识点总结

HTML知识总结

span

行级元素,多个

同行块级元素,独占

一行块级元素,前后

保留一行

标题标签,h1~h6表6个等级,加粗,前后保留一行width:设置宽

度height:设置高

度alt:图片加载失败显示的文本

div

文本类

p

h

图片标签img

color:颜色

水平线常用标签

hr

size:高度(粗

细)width:宽度(长度)herf:超链接转到的地址

超链接a

target

_self:默认值,在当前页面打开_blank:在新窗口

打开

带标题的框fieldsetlegend设置标题

disc:实心圆

无序列表

列表标签

有序列表

ul

square:小方块

olcircle:空心圆

tr表示行

th

表示标题单元格,居中、加粗

td

表格标签

caption

表示一个单元格

表示标题,定义在第一行,居中

rowspan

设置单元格占的行

colspan

设置单元格占的列

action表单提交地址

get:显示提交参数,将参数用?和&拼接到url上

带到服务器端

method

post:隐式提交参

数optgroup 表示分组,分组不能选,只能选分组中的option

下拉菜单