浅谈web前端技术作者：周凯工作单位：成都信息工程学院摘要最近几年 WEB 前端开发已经成为一个很专业的方向，从业大军也与日俱增，仅杭州的D2交流会上就有 500 多人参加，且不乏许多高中同学。
这说明前端开发行业在我国的兴起，已经是大势所趋。
因此学习和掌握WEB相关技术如HTML 、CSS、JavaScript在日后的学习生活和工作中将大有益处。
关键词：HTMLCSSJavaScriptAbstractIn recent years the WEB front-end development has become a very professional direction from industry main forces, also grow with each passing day, only the Hangzhou D2 exchange will have more than 500 people attended, and there are many high school students. The software development industry in our country is arisen, already represent the general trend. Therefore the study and mastery of WEB related technologies such as HTML 、CSS 、JavaScript study in future life and work will be helpful。
Keywords:HTML CSS JavaScriptweb前端开发技术：前端开发工程师是Web前端开发工程师的简称，是近五年才真正开始受到重视的一个新兴职业。
Web前端开发技术是一个先易后难的过程，主要包括三个要素：HTML、CSS和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
Web开发技术：World Wide Web（简称Web）是随着Internet的普及使用而发展起来的一门技术，它的发明极大地方便了人们对Internet上资源的组织和访问。
Web技术涉及的内容相当广泛，本书涵盖了其中诸多方面，如：HTML标识语言、Java、Applet、CGI、脚本语言、ASP和JSP技术等。
本书取材得当、覆盖面广、实例丰富、图文并茂，既可作为计算机专业本、专科学生学习和掌握Web技术的教科书，也可以作为广大 Web技术爱好者学习和应用Web技术的参考书，同时也有一些web开发技术的网站有时间去看看，比如久久技术网。
我的理解是一个不包含服务器后端开发，一个是客户端和服务器端的技术都包含。
Web前端的组成：现代在网页技术，分为三个层面：内容(HTML)+表现(CSS)+行为(JavaScript)，在这里我也把这三个技术分开来说。
1.内容(HTML)：1.1使用 XHTML 1.0 或 HTML5 规范的代码，网页最终是由浏览器来解析的，而浏览器又是根据Web规范来解析网页的，所以，遵守规范可以确保在各种浏览器中都能正确解析，但如果碰到了浏览器的Bug那就另外算了，那不是我们的错，是浏览器的错。
1.2布局采用先上下后左右的结构原则，尽量不要出现一个容器里面有上下左右多种布局的元素，这样可以减少各种浏览器的布局排版的差异，为什么呢？一个左右要浮动上下又要清除浮动，麻烦，二个，内容要修改的时候，发现一个高了或者矮了，不对齐了，又要调整几个块的。
那左中右怎么办？先分左右再从其中一个再分左右。
1.3全页布局，一般分为 Topbar(顶栏) ,Header(头部) ,Nav(导航栏) ,Content(内容) ,Footer(脚部)，也就是对于页面整体从上往下看。
如果还有横幅广告(Banner)和帮助栏(像淘宝那种)，就另外再加。
1.4整理自己的模板库，自己写过的代码Copy一份，以后就不用再重新写了，例如头部，注册表单，网银列表等。
2.表现(CSS)：2.1设定默认样式，每种浏览器都会为元素设定一套初始样式(默认样式)，设定默认样式可以减少各种浏览器渲染样式的差异。
常用的设置有：body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,form,input,textarea,p,th,td{margin :0;padding:0;} /* 默认内边距和外边距设置为0 */caption,th{text-align:left;} /* 默认对齐方式设置为左对齐 */img{border:0;} /* 去掉带链接图片的边框线 */ul{display:block;} /* 设置列表为块显示 */li{list-style:none;} /* 去掉默认添加的项目符号 */table{border-collapse:collapse;border-spacing:0;} /* 去掉表格的内边框线和单元格间隔 */body{font-family:Verdana, Geneva,sans-serif;font-size:12px;color:#000;line-height:12px;} /* 设置文本字体 */a:link, a:visited{font-size:12px;text-decoration:none;font-family:Verdana, Geneva, sans-serif;color:#000;line-height:12px;} /* 设置链接字体 */a:hover{text-decoration:underline;}2.2为元素赋予样式特征，尽量少用ID而用类来设定。
2.3不用内联样式，全部样式通过外部文件引用，并且放在<head>里面。
2.4合理分类，如公共样式、首页样式、分类页样式、搜索页样式，需要时才引用。
2.5模块化设定样式，一般规则是 ".mod_name .class_column tag" (模块名+布局名+元素名/类) ，如：.header 头部.header .left h1 头部左边的标题.search .keyword 搜索栏的关键词输入框.nav a 导航栏的链接.mod_good .good_name 产品模块的产品名.user_info a 用户信息的链接2.6有自己一套自定义元素类，例如表单控件有很多种，很多都是 input 元素，只对文本输入框设定样式怎么办？设一个自定义类 .input_text ，然后设定高度、宽度、圆角都行，加文本框的时候习惯加上自己的类。
2.7浮动问题，如果一个上下排列的容器，包含的内容全部是浮动，那么该容器就要清除浮动了(clear:both)，否则下面的容器有可能跑到右边去了。
另外，如果某元素设置了浮动，那么，最好给他一个宽度，否则，IE6下会变成竖排文字，但是，如果我要自适应宽度怎么办？很简单，里面的文字加一个<span>并设为块显示(display:block)。
2.8定位问题，相对定位(relative)能使元素变成一个定位容器，如果使用 left top 则可以相对于它本来的位置进行偏移，绝对定位(absolute)能使元素从文档流抽出作为一个独立的层(也是一个定位容器)，那么他就不再占用其容器的空间，再加上margin-left 和margin-top 则可以相对于原来的位置定位，如使用 left top right bottom 则可以相对于定位容器进行绝对定位，定位容器就是最近的祖先定位节点(relative or absolute)，如果没有则是document。
定位容器有自己的显示范围，如果内容超出范围则隐藏(这个特征有点像Flash的遮罩效果)。
常见的应用：头部里面的混排模块，弹出菜单，浮动按钮，浮动工具栏，焦点广告图。
2.9边距问题，由外至内，由前至后。
由外至内的方法是：父元素用内边距限制子元素，子元素用外边距限制兄弟元素，先设定内边距(padding)再设定外边距(margin)；由前至后的方法是：前一个元素用右边距(margin-right)和下边距(margin-bottom)限制后一个元素。
好处：模块调转顺序时不用再考虑谁排在最上面(左面)，而且能解决IE6的双边距Bug。
2.10溢出问题，凡是给元素设置块元素时，顺便设置上溢出隐藏(over-flow: hidden)，防止IE6的溢出撑开问题。
2.11整理自己的样式库，写过的样式Copy一份(包括图片)，下次再需要改改就行了。
3. 行为(JavaScript)3.1使用JavaScript框架，我本人就喜欢用jQuery，当然了，如果是简单的特效，还是可以写纯js的。
3.2整理自己的js库，这里不是叫你自己js框架，而是常用的特效，例如设为首页，加入收藏夹，表单检查，弹出菜单，广告图等。
需要留意的是：HTML5使用 HTML5 时候加上<!--[if lt IE 9]><scriptsrc="///svn/trunk/html5.js"></script><![endif]-->让 IE 正常识别 HTML5 标签，或者下载到自己网站引用也可以，当然了，Google 的服务器远比我们的快，做开发时才需要下载到本地。
CSS3目前的原则是：低端用户正常显示，高端用户更好享受。
因为IE8以下版本均不支持CSS3属性，所以CSS3在现时只能做优化处理，等到IE8以下都被淘汰了的时候就可以毫无顾虑的使用了。
当然了，你还可以用js检测IE8以下，提示用户升级，如果用户不在意外观享受的话那也不用管了。
现在能做的是，在CSS2的基础上再添加更好的效果，如圆角、阴影、动画效果(目前Webkit核心支持比较好)。
参考文献及部分参考网址HTML5 教学投影片HTML 5 Demos and Examples网站建设教程（金旭亮、吴彬），高等教育出版社；Flash ActionScript 3 殿堂之路（孙颖）电子工业出版社；站长之家 : ；站长网 : ；谢辞通过一个学期的选修课学习，我初步了解了WEB前端的相关技术，在这里谢谢任课老师的讲解以及相关同学、相关资料、网站的帮助，我学习到了很多专业课程学习不到的知识，知识面有了很大扩展,谢谢！。