篇一：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

…… …… 余下全文

篇二：Web前端基础总结

1.Js的基本类型：

Undefined:只有一个值undefined，它是变量未被赋值时的值，在JS中全局对象有一个undefined属性表示undefined，事实上undefined并非JavaScript的关键字，可以给全局的undefined属性赋值来改变它的值。

Null:只有一个值null,但是JavaScript为它提供了一个关键字null来表示这个唯一的值。Null类型的语义是“一个空的对象引用”。

Number:NaN是其一个特殊的属性值，typeof NaN // “number”);

String:其正式解释是一个16位无符号整数类型的序列，它实际上用来表示以UTF-16编码的文本信息。

Boolean:有两种取值true和false。0、NaN、空字符串、null、undefined转化为false，其余的全部为true。

Object:最为复杂的类型就是Object，它是一系列属性的无序集合，Function是实现了私有属性[[call]]的Object，JavaScript的宿主也可以提供一些特别的对象。typeof ['3','344']//‘Object’

关于null和undefined：null是关键字；undefined不是关键字，undefined是Global对象的一个属性。

运算时null与undefined都可以被类型转换为false，但不等值于false：
       document.writeln(!null, !undefined); // true,true
       document.writeln(null==false); // false
       document.writeln(undefined==false); // false

…… …… 余下全文

篇三：web前端面试总结

web前端面试笔试题+优化

前端是庞大的，包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等;第二类则是代码级别的优化，例如Javascript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。

一、页面级优化

1. 减少HTTP请求数

这条策略基本上所有前端人都知道，而且也是最重要最有效的。都说要减少HTTP请求，那请求多了到底会怎么样呢?首先，每个请求都是有成本的，既包含时间成本也包含资源成本。一个完整的请求都需要经过DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个“漫长”而复杂的过程。时间成本就是用户需要看到或者“感受”到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。另外，由于浏览器进行并发请求的请求数是有上限的(具体参见此处)，因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象，即使可能用户能看到的第一屏的资源都已经请求完了，但是浏览器的进度条会一直存在。

…… …… 余下全文

篇四：web前端开发知识点总结

HTML知识总结 span行级元素，多个同行块级元素，独占一行

块级元素，前后

保留一行

标题标签，h1~h6表6个等

级，加粗，前后保留一行

width：设置宽

度

height：设置高

度

alt：图片加载失

败显示的文本div文本类ph图片标签img

color：颜色

水平线

常用标签hrsize：高度（粗细）

width：宽度

（长度）

herf：超链接转

到的地址

超链接a

target_self:默认值，在当前页面打开

_blank:在新窗口

打开

带标题的框fieldsetlegend设置标题

disc：实心圆

无序列表

列表标签

有序列表ulsquare：小方块olcircle：空心圆

tr表示行th表示标题单元格，居中、加粗td

表格标签<table>caption表示一个单元格表示标题，定义在

第一行，居中

rowspan设置单元格占的行

数

colspan设置单元格占的列

数

action表单提交地址

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

带到服务器端

method

post：隐式提交参

数

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

下拉菜单<select>

<option>selected默认选中

multiple 设置下拉菜单为多选模式

表单项<form>

rows: 显示文本的行数(高度)

文本域<textarea>

cols: 显示文本的列

数(宽度)

name：参数名size：显示字符长度（控制文本框长

度）

maxlength：最大可

输入字符数

input文本框type=“text”placeholder：提示

内容

disabled：不会被提交到服务器readonly：只读（会被提交到服务

…… …… 余下全文

篇五：web前端面试总结

1. 什么是Semantic HTML（语义HTML）?

Semantic HTML是一种编码风格, 它通过添加能够被计算器所理解的语义(Meta data)，从而使HTML成为一个通用的信息交换媒介。在语义HTML中，<b></b>,<i></i>这类其中的内容不具有实际意义的标签是不应该被使用的，因为他们只是为了进行格式化，没有提供要表达的意义及页面结构。

2. DOCTYPE 有什么作用？

DOCTYPE主要作用是告诉浏览器这个网页是哪种HTML，浏览器根据这个标示进行页面渲染。如果DOCTYPE声明不当或没有声明，浏览器将会用quirks mode（怪异模式）对页面进行渲染。

3. 什么是quirks mode（怪异模式）？

怪异模式（英语：quirks mode）是指在计算机领域中，一些网页浏览器为了维持对较旧的网页设计的向后兼容性，而使用的一种技术，有别于严格遵循万维网联盟（W3C）与互联网工程任务组（IETF）标准而设计的“标准模式”。

4. 标准模式和怪异模式之间的区别是什么？

两者之间突出的不同是对 CSS IE盒模型缺陷的处理。在IE6之前，Internet Explorer 曾经使用一种决定一个元素的盒模型的宽度和高度的，与 CSS 规范所指定相冲突的算法，而且由于 Internet Explorer 的流行，很多依赖于这种不正确的算法的网页被创建。而在IE 6, Internet Explorer 在标准模式下渲染时使用了 CSS 规范的算法，而在 quirks 模式下使用先前的，不规范的算法。
另一个值得一提的不同点是某些行内 (inline) 元素的垂直对齐；很多早期的浏览器对齐图片至包含它们的盒子的下边框，虽然 CSS 的规范要求它们被对齐至盒内文本的基线。标准模式下，基于 Gecko 的浏览器将会对齐至基线，而在 quirks 模式下它们会对齐至底部。

…… …… 余下全文

篇六：web前端框架总结

1.选择器：

1.1基本选择器：

* 匹配所有的元素

#i1 匹配id为i1的元素；

.class1 匹配class为c1的元素；

s1 匹配元素名为s1的元素

s1，s2 匹配元素名为s1和元素名为s2的元素，一并返回（满足任意一个元素名即可）

1.2层次选择器：

s1 s2 匹配祖先元素名为s1所有后代元素名为s2的元素；（祖先--后代）

s1>s2 匹配父元素名为s1子元素名为s2的元素；（父子关系）

区别在于<div><span><span>则

第一种3个标签的内容均显示，

第二种只显示前2个标签，最后一个标签的内容不显示。

S1.next（）、匹配与s1并列位置的下一个元素 = s1+（s1的标签名）

S1.nextAll（）匹配与s1并列位置以下的所有元素 = s1 ~ （s1的标签名）

S1.sibling（“s2”）匹配与s1所有并列位置的所有s2元素

...

2.操作DOM

2.1 attr(key)获取元素属性为key的属性值

设置元素属性key的属性值为value

删除元素属性

…… …… 余下全文

篇七：腾讯web前端开发工程师笔试题及答案

腾讯web前端开发工程师笔试题及答案

1、如何实现事件委托？

首先要知道什么是事件委托。考虑一个列表，在li的数量非常少的时候，为每一个li添加事件侦听当然不会存在太多性能方面的问题，但是当列表非常的长，长到上百上千甚至上万的时候（当然只是一个解释，实际工作中很少遇到这么多li的情况），为每个li添加事件侦听就会对页面性能产生很大的影响。

就像下面这段代码：

<!DOCTYPE HTML>

<html>

<head>

<title>js性能优化</title>

</head>

<body>

<li>精通css</li>

<li>精通html</li>

......

</ul>

</body>

</html>

(function(){

var a=document.getElementById('list');

var b=a.getElementsByTagName('li');

for(var i=0;i<b.length;i++){

b[i].addEventListener('click',function(e){

var c = e.target;

alert(c.innerHTML);

},false);

}

…… …… 余下全文

篇八：web前端工程师招聘要求魏前 20xx-03-12

岗位名称：

1， WEB前端工程师

2， WEB前端程序员

3，网站前端工程师

4，网站前端程序员

职位描述:

1. 熟悉HTML/HTML5特性，使用Div+Css+Javascript 准确地进行代码构建，实现产品所需的交互效果；

2. 负责前端开发工作，进行系统优化，设计并完善前端基础服务架构；

3. 使用 html/css 熟练地进行页面维护，有效地解决浏览器兼容问题并监督实施浏览器兼容测试标准，保证页面兼容性；

4. 与后台技术开发保持良好沟通，快速理解、消化各方需求，并落实为具体的开发工作。

职位要求：

1,精通JavaScript(js),CSS3,HTML5基本原理并能熟练手写，熟练使用Jquery等Javascript前端开发技术；

2,熟悉ajax/xml/json等网络通信技术和数据交换格式；

3,熟练切图，将UI设计转化为符合W3C规范的DIV+CSS静态页面，确保浏览器及平台的性能和兼容性；

4，熟悉JQuery ,EasyUI、ExtJS、Bootstrap、Angular.js等框架、有美工设计经验者优先。

5,具有良好的团队合作精神，能与相关人员沟通合作，有较强的自学、沟通表达能力及吃苦耐劳的工作精神，责任心强；

5,熟悉PHP/.net开发、有大型网站前端开发经验者优先；

6,对前端技术有浓厚兴趣，平时能关注前沿的技术，例如web新标准、css3、html5、siverlight等；

7,代码规范强迫症患者优先；

8,无学历经验要求，只要你自信胜任以上工作。

…… …… 余下全文

WEB前端工作总结