展望2014，前端工程师的朋友们一起加油

前言

前言，其实做前段工作也有两三年了，在博客园也潜水很长时间了，也想写写博客分享一下经历，但是由于自己工作比较忙，然后自己觉得这个语文水平吗，还是体育老师交的，所以一直没有敢于尝试。新年刚过，今年也打算努力坚持写一年的博客，来总结和分享一下自己的学习经验以及学习哈朋友们的经验，这篇文章主要送个我的年后即将跳槽和找工作的朋友。相信很多的前端工程师跟我现在是一样的，感觉什么都差不多了，几个出名的库的源码也读过，js的基本知识可能也都知道。但是我想说的是，大家可能这个阶段也只能是初级程序员，不信的话回答一下，<b>标签和<strong>、<i>与<em>等标签的区别。我就是很多时候觉得自己还真不错了，但是当面临跳槽时，你就会发现面对那些考官犀利的面试题，你一定会觉得这个东西我知道啊，但是让你写你却真是写不出来。今天面试了聚美优品，虽然没有让我做题，因为走的时候主管说了句，我还要跟hr商量哈，我猜没机会了。不过感觉只要你基础好，技术强，其实是没什么打不了的，可能是因为我要的工资和我的技术实习有差距吧。按理来说聚美应该不缺钱的，这个先说了。反正我想最近努力吧技术搞哈，两年内做一个优秀的前前端。

展望2014

前几天群里，听到一句话，在学校里计算机学习好的都去搞c++了，学习不好的就搞前端了。或许真是这样吧，那么不是计算机专业的就不能搞c++吗？这个可能有一定原因吧，不过c++确实有点难度吧。所以我这个非计算机专业的就搞前端了。好了，言归正传，先介绍初学者看两本书，我觉得学习javascript还是要看哈《javascript高级程序设计》，这个书写的挺好的，尤其是正则表达式写的非常的好，我看过很多的书正则只是一带而过。还有就是《jQuery技术内幕：深入解析jQuery架构设计与实现原理》阿里高云写的，其实jquery真的写的很好的，虽然很多大公司不用。只要你看哈他的Sizzle引擎，你就会发现他很强大。发表一下我小弟的一点看法，对于jquery个人认为jquery作为一个js库来说，实在是太强大了。其实它里面还是有很多东西我们用不到，在一个它并不是一个就是整体的面向对象架构，所以很多公司自己开发框架和库，可能是因为这个原因吧。毕竟作为前端都在考虑脚本大小的问题。但是个人认为jquery很棒，觉得自己的水平还处于初级阶段，所以今年还是打算研究一下问题。

1、首先研究最基本的html、css、javascript的基础知识，因为往往我们忽视的就是这些东西，大公司非常看重这些，可能要花上一个月，因为自己工作原因吧，一个月还不一定能够。（一个月）

2、研究正则表达式，这个不打算深入研究，但是要做到想要用的时候能写出来，我相信大家好多正则也没有深入的研究，例如让我在一篇文章里吧每段的首页里首字母改成大写，这个我现在不查资料可能都做不出来。你们呢？其实研究正则主要是为看Sizzle引擎做准备。（半个月）

3、读几个库和插件，主要是iScroll、backBone、require.js。（一个月）

4、html5和css3深入研究，现在接触的知识皮毛，写两个小游戏。（一个月）

5、读书webgl高级编程，数学基础3D图形学。（2个月）

6、开发插件以及界面库，开发一个自己的库（虽然现在库很多，但是为了学习还是要开发一个自己的库）。

6、应聘一家比较大公司。（一年）

今天应聘了聚美，看样子没戏了，所以现在还是加紧努力吧技术跟上来。然后再战大牛(面试)，哈哈。下面就开始我们巩固哈最基本的知识，希望我能通过这次彻底把基础知识记牢。

一、温习HTML

<b><strong>区别：

可能大家都知道这个是加粗的作用，但是如果你没有注意到这个细节是什么的话，可能还真说不出来，例如有一个同事曾经问我，js的数组和对象有什么区别？其实区别还是很大的，但我当时还真卡主了。不知道从何说起，其实<br>和<strong>也一样。我就吃亏过，面试人家问我，我却说不出所以然，或许这就是所谓的细节决定成败吧。其实他们的区别很甚微，都是加粗，但是<strong>更有强调之意，尤其是在做（seo）搜索引擎优化的时候。所以加粗用<strong>比<b>语意更好。

<em>和<i>区别：

<em>把文本定义为强调的内容，<i>主要显示斜体文本效果。

<title>和h1区别：

<title>和h1，其实连个标签有本质的不一样，一个是网站的title，告诉搜索引擎和用户这个页面是关于什么的。而h1主要是指文章的标题等，当然突出文章的主题用h1。

　　title属性与alt属性：

<img>标签上title属性与alt属性的区别是title是指当鼠标放到图片上显示的标题，而alt是当图片加载错误时显示的文字，以便让用户知道这个图片是干什么的。

　　文字加粗、下标、居中、字体的标签分别是<strong>、<u>、<center>、<font>。

　行内元素和块元素的区别：

行内元素直观上是在一条直线上排列的，都是同一行的，水平方向排列。块级元素个占据一行。并且行内元素不能包含块级元素，行内元素的属性上设置width无效，height无效（可以设置line-height），margin，padding上下不同浏览器解析不一样，所以一定要注意，在写兼容程序是不要给行内元素设置margin和padding，否则一定会出现兼容问题。所以一行内的布局尽量要用行内元素布局，涉及到上下位置的时候可以用相对定位。

html和 xhtml的区别：
在xhtml下所有标签是闭合的，p,br需要闭合, 标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。

<!DOCTYPE>标签：

　　很多人对这个标签很熟悉，但是要说一个因为所以然的话，可能大部分人不知道怎么说。

　　定义：该标签主要是告知浏览器文档使用哪种HTML或XHTML规范。可以声明三种DTD类型，分别表示严格版本、过度版本以及框架的HTML版本。如果文档中的标记不遵循doctype声明指定的DTD，这个文档除了不能通过代码校验之外，还可能无法在浏览器中正常显示。

　　用法：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

上面的声明中，声明了文档的根元素html，他在公共标示符被定义为"-//W3C//DTD XHTML 1.0 strict//EN"。浏览器将明白如何寻找匹配此公共标示符的DTD。如果找不到，路兰奇使用公共标示符后面的URL寻找DTD的位置。

- : 表示组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织。

+为默认,表示组织名称已注册。

DTD : 指定公开文本类，即所引用的对象类型。默认为DTD。

HTML : 指定公开文本描述，即对所引用的公开文本的唯一描述性名称。后面可附带版本号。默认为HTML。

URL ： 指定所引用对象的位置。

Strict：排除所有 W3C 专家希望逐步淘汰的代表性属性和元素。

三种HTML文档类型:

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

a ) 如果需要干净的标记，免于表现层的混乱，用HTML Strict DTD类型：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">

b )Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素. 如果用户使用了不支持层叠样式表（CSS）的浏览器以至于你不得不使用 HTML 的呈现特性时，用 Transitional DTD 类型：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">

c ) Frameset DTD 被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd">

三种 XML 文档类型：

XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

a ) 如果需要干净的标记，免于表现层的混乱，用XHTML Strict DTD类型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

c ) Frameset DTD 被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

选择正确的doctype：

为了获得正确的doctype声明，关键就是让dtd与文档所遵循的标准对应。

例如，假定文档遵循的是xhtml 1.0 strict标准，文档的doctype声明就应该引用相应的dtd。

另一方面，如果doctype声明指定的是xhtml dtd，但文档包含的是旧式风格的html标记，就是不恰当的；类似地，如果doctype声明指定的是html dtd，但文档包含的是

xhtml 1.0 strict标记，同样是不恰当的。

如果没有指定有效的doctype声明，大多数浏览器都会使用一个内建的默认dtd。在这种情况下，浏览器会用内建的dtd来试着显示你所指定的标记(不过这是页面写得太糟糕的时候的做法)。

看了一下京东、淘宝、还有博客园，用的都是这个（本人也一直都是用的这个）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

但是发现百度跟谷歌用的是“<!doctype html>”，就再仔细查了一下资料，发现HTML5也是直接用的这个，不过是因为 HTML 5 不基于 SGML，因此不需要对 DTD 进行

引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。

建议在以后都直接用“<!doctype html>”，用<!doctype html>的话就会开启浏览器的标准兼容模式，在标准兼容模式下，不能保证与其它版本（IE6之前的，直接忽略吧），的 Internet Explorer 保持兼容，文档的渲染行为也许与将来的 Internet Explorer 不同，但也请大家放心地使用吧~~

注意：

XHTML 1就是HTML 4.01的XML化，是一种不向前兼容的格式。

HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。

SGML规定了在文档中嵌入描述标记的标准格式，指定了描述文档结构的标准方法，目前在WEB上使用的HTML格式便是使用固定标签集的一种 SGML文档。

以上doctype内容从（http://www.cnblogs.com/gumgum/archive/2011/09/30/2196752.html）引入。觉得有必要了解一下。

其实在布局的时候尽量少用浮动，定位，因为这是造成兼容性的根本原因，浮动后要给浮动加一个父元素，并且一定要清楚浮动，。这是一个比较好的习惯。html先介绍到这里，以后会详学习html5的新标签。

二、温习CSS

　　提到css，大家肯定第一想到的就是兼容，当然最头疼的就是ie系列了。相信做前段的童鞋们都深有感触。

　　1、css hack

　　首先还是了解一下css hack，简单的说css hack就是针对不同的浏览器写不同的code的过程。其实不同的浏览器对css的支持和解析结果是不一样的，例如IE6能识别下划线“_”和星号“*”，IE7能识别星号“*”，但不能识别下下划线“_”,而火狐、chrome等两个都不能识别。书写顺序一般将识别能力强的浏览器的css写在后面。

　　有一点需要说明一下，就是当多个css作用于一个标签是，根据优先级别，处在后面的优先级高。例如div{background:green:background:red;} red的优先级别比较高。

　　这样的话，区别IE6和火狐，我们可以这样写div{background:red;*background:blue;}

　　区别IE6和IE7，div{background:green !important;background:blue;}或者div{background: black;*background:blue;_background:red;}

　　区别IE7和火狐:background:orange: *background:green;

　区别IE6、IE7、火狐：

　　background：orange; *background：green;_background:blue;或者

　　background: orange;*background:green !important;*bakcground:blue;

　　但是请注意：

　　IE6支持重定义的！important，例如

　　.yuanxin{color:#e00 ！important;}

　　.yuanxin{color:#000;}

　　这个时候color为#e00;

　　但是不支持同一定义中的！important。例如

　　.yuanxin{color:#e00 !important;color:#000}

　　此时IE6下不支持，你将会返现自己为#000;

　　IE8最新css hack：

　　“\9” 例：“border:1px \9;” 这里的“\9”可以区别所有的IE和FireFox.注意这个可以用于ie和其他浏览器字体显示的不一样。

　　"*" IE6、IE7可以识别.IE8、FireFox不能。

　　“_” IE6能识别“_”，IE7、IE8、不能识别。

　　还有条经验，在程序里加上这句话<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

　　可以使IE8里显示的布局和IE7里一样。

　　2、css文本属性：

　　word-spacing,主要用于控制文字间相隔的距离。【normal | 23px】

　　如图没有加效果，word-spacing:50px;后如图

　　测试后发现该属性IE下支持没有问题。

　　letter-spacing:其作用与字符间距类似，如图【normal | 23px】

　　　　加属性：letter-spacing: 10px;如图。

　　text-align(水平对齐方式):【left | right | center | justify】

　　line-height(行高)：【normal | 数字 | 长度 | 百分比】

　　text-transform(控制字符大小写):【capitalize(单词首字符大写) | uppercase | lowercase | none】兼容ie系列

　　text-indent(文字缩进):【长度 | 百分比】

　　white-space(空白间距)：【bormal、pre、nowrap】

　　text-decoration(装饰):【underline、overline、line-through(字体中间画横线)、blink、none】兼容ie系列

　　3、颜色及背景属性：

　　color：字体颜色;兼容ie系列

　　background-color：设置背景颜色;注意和background区别；bakground指背景，有背景颜色、背景图片等属性。

　　background-repeat：控制背景平铺方式。【no-repeat | repeat | repeat-X,repeat-Y】

　　background-attachment: 背景附件控制背景图片会不会跟随页面滚动而一起滚动。注意这个属性。【fixed | scroll】

　　background：背景《背景颜色》 || 《背景图像》 || 《背景重复》 ||《背景附件》||《背景位置》

　　背景属性可以说是各个浏览器支持比较我的一个属性了，ie系列都支持。

　　4、文字连接属性

　　a/*所有超链接*/

　　a:link/*未点击超链接格式*/

　　a:visited/*浏览过的连接文字格式*/

　　a:active/*按下连接的格式*/

　　a:hover/*鼠标转到连接*/

　　鼠标光标样式：

　　连接手指cursor:pointer;

　　十字体 cursor:crosshair

　　箭头朝下 cursor:s-resize;

　　十字箭头 cursor:move;

　　箭头朝右 cursor:move;

　　加一问号 cursor:help;

　　箭头朝左 cursor:w-resize;

　　箭头朝上 cursor:n-resize;

　　箭头朝右上 cursor:ne-resize;

　　箭头朝左上 cursor:nw-resize;

　　文字I型 cursor:text;

　　箭头朝右下 cursor:se-resize;

　　箭头斜左下 cursor:sw-resize

　　漏斗 cursor:wait;

　　还有很多，先介绍这里。

　　5、边框

　　6、【盒子】属性

　　主要说一下浮动，因为在布局当中我们在ie下容易出现的问题主要是浮动和定位。因此我我们要记住，如果给某一元素浮动了，要记得清楚浮动。这个也不是绝对的。但一般要清除哈。我比较喜欢的两种清除浮动的方法是

一、在浮动元素的后面加上.clear{clear:both;}<div clalss = "clear"></div>

　　二、在浮动元素的父类元素上家.clearfloat:after{content:"";height:0;display:block;visibility:hidden;clear:both;}.clearfloat{zoom:1;}

主要说哈after属性。其原理是其原理是，在「高级」浏览器中使用 :after 伪类在浮动块后面加上一个非 display:none 的不可见块状内容来，并给它设置 clear:both 来清理浮动。在 ie6 和 7 中给浮动块添加 haslayout 来让浮动块撑高并正常影响文档流。

　　7、定位

　　定位是必须要了解的，因为ie下的bug好多也是由于定位和z-index属性引起的，看一下如下bug

#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:0;}

这样的布局，z-index无论设置多大都不能是img标签显示在#black上面。这种情况发生的条件有三个：1、父标签 position属性为relative；2、问题标签无position属性（不包括static）;3、问题标签含有浮动(float)属性。

解决方法，解决方法有三，1、position:relative改为position:absolute；2、去除浮动；3、浮动元素添加 position属性（如relative，absolute等）。其实在ie6下看层级的高低不只要看自己，还要看它的父元素。父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。

IE6下的拼爹不是指的父元素，而是dom树里最顶层的元素的层级大小。

例如修改html如下：

这样在IE6下图片还是不会在最上层，虽然它的父级元素是9999，但最后拼的#now和#blank。其实ie6下的z-index的水还真深。

还有在ie6下只要用了绝对定位，那么它的子元素不能撑开它的父元素的。

　　8、IE6下的bug问题

　　1居中布局，一般的浏览器只要用width:400px;height:600px;display:block;margin:0px auto;就可以了，但是IE6下需要在父元素上加text-align:center;

　　2楼梯效果，在li里面a标签的float会产生楼梯效果，那么需要把li也加上浮动或者display:inline。

　　3float时margin两倍空白 display：inline;可以解决。

　　4无法设置微高度，需要设置font-size:0;或者overflow：hidden;

　　5当父元素设置overflow：auto;时会跨出边界bug，可以在父元素上position:relative;

　　6IE6忽略了最小高度和宽度，可以height:auto !important;height:100px来解决。

　　下面链接是解决ie6bug总结的比较好的网站点击

三、温习JAVASCRIPT

　　1、javascript数据类型

　　基本的javascript数据类型有：

　　String(字符串类型)、Number(数值类型)、Boolean(布尔类型)、Object(对象)、Undefined、Null、Function、没有定义类型。

　　其实array是object类型。我们可以通过以下试验：

　　通过typeof下面数据类型返回值：

　　"undefined" -------------如果值未定义 undefined

　　"boolean" ------------布尔值　　　　　　boolean

　　"string"　　-------------如果是字符串　　 string

　　"number" -------------如果是数值型 number

　　"object"　　-------------如果这个值是对象或null或者array object

　　"function" -------------如果这个值是函数 Function

　　由于array返回的是object，所以区分array和object的方法是

　　function isArray(v){

　　　　return toString.apply(v) === '[object Array]';

　　}

　　2、作用域

　　4、闭包

　　5、也谈继承

　　6、dom编程

　　7、ajax

　　8、跨域请求

　　9、设计模式

四、学习MVC

五、面试题

posted @ 2014-02-16 00:02 jsboy 阅读(278) 评论(0) 收藏举报

刷新页面返回顶部

JsBoy