Web前端技巧_HTML+CSS+JavaScript

f9yx0du

看这篇文案前，你首要要对Web前端的重点技术有必定的认识，例如 HTML、CSS、JavaScript。

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 制品模块的制品名

.user_info a 用户信息的链接

2.6 有自己一套自定义元素类，例如表单控件有非常多种，非常多都是 input 元素，只对文本输入框设定样式怎么办？设一个自定义类 .input_text ，而后设定高度

qzmjef

你的见解真是独到，让我受益匪浅。