浅谈web前端技术

浅谈web前端技术

作者：周凯工作单位：成都信息工程学院

摘要

最近几年 WEB 前端开发已经成为一个很专业的方向，从业大军也与日俱增，仅杭州的D2交流会上就有 500 多人参加，且不乏许多高中同学。这说明前端开发行业在我国的兴起，已经是大势所趋。因此学习和掌握WEB相关技术如HTML 、CSS、JavaScript在日后的学习生活和工作中将大有益处。

关键词：HTMLCSSJavaScript

Abstract

In 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 JavaScript

web前端开发技术：

前端开发工程师是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

不用内联样式，全部样式通过外部文件引用，并且放在里面。

2.4

合理分类，如公共样式、首页样式、分类页样式、搜索页样式，需要时才引用。

2.5

模块化设定样式，一般规则是 ".mod_name .class_column tag" (模块名+布局名+元素名/类) ，如：

.header 头部

.header .left h1 头部左边的标题

.search .keyword 搜索栏的关键词输入框

.nav a 导航栏的链接

.mod_good .good_name 产品模块的产品名