Web前端：11个让你代码整洁的原则
- - 博客 - 伯乐在线写Web页面就像我们建设房子一样，地基牢固，房子才不会倒. 同样的，我们制作Web页面也一样，一个良好的HTML结构是制作一个美丽的网站的开始，同样的，良好的CSS只存在同样良好的HTML中，所以一个干净的，语义的HTML的优点很多，那么平时制作中，我们做到了这一点吗. 上图展示了两段代码，我想大家都只会喜欢第一种，我们先不说其语义，至少他的结构让我们看上去清爽，而第二种呢.
[Web] 几个原则让前端代码更整洁
标签：
web
原则
前端
| 发表时间：2012-10-14 22:04 | 作者：书生小C
出处：http://www.cnblogs.com/
在讲解今天的知识点之前，我想先展示两个片段的代码，让大家看看这两段代码有哪些地方是值得以后的项目实践中需要注意的，需要去改进的。
1 <html>
2 <head>
3 <title>A & B & C</title>
4 <style type="text/css">
5 body {background:pink;}
6 </style>
7 </head>
8 <body>
9 <a href="http://www.baidu.com"><h1>Go to Baidu web site.</h1></a>
10 <div id="topNav">
11 <ul id="bigBarNavigation">
12 <li><a href="/">HOME</a></li>
13 <li><a href="/">HELPER</a></li>
14 <li><a href="/">ABOUT US</a></li>
15 </ul>
16 </div>
17 </body>
18 </html>
2 <head>
3 <title>A & B & C</title>
4 <style type="text/css">
5 body {background:pink;}
6 </style>
7 </head>
8 <body>
9 <a href="http://www.baidu.com"><h1>Go to Baidu web site.</h1></a>
10 <div id="topNav">
11 <ul id="bigBarNavigation">
12 <li><a href="/">HOME</a></li>
13 <li><a href="/">HELPER</a></li>
14 <li><a href="/">ABOUT US</a></li>
15 </ul>
16 </div>
17 </body>
18 </html>
片段二
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>A & B & C</title>
6 <link rel="stylesheet" type="text/css" href="test.css"/>
7 </head>
8 <body>
9 <h1><a href="http://www.baidu.com">Go to Baidu web site.</a></h1>
10 <ul id="bigBarNavigation">
11 <li><a href="/">home</a></li>
12 <li><a href="/">helper</a></li>
13 <li><a href="/">about us</a></li>
14 </ul>
15 </body>
16 </html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>A & B & C</title>
6 <link rel="stylesheet" type="text/css" href="test.css"/>
7 </head>
8 <body>
9 <h1><a href="http://www.baidu.com">Go to Baidu web site.</a></h1>
10 <ul id="bigBarNavigation">
11 <li><a href="/">home</a></li>
12 <li><a href="/">helper</a></li>
13 <li><a href="/">about us</a></li>
14 </ul>
15 </body>
16 </html>
片段二是对片段一的改进，下面就改进点进行详细的讲解。
1. DOCTYPE的声明
片段二的第 1 行，添加了代码 <!DOCTYPE html>
编写HTML代码时，首先要使用"DOCTYPE"进行声明，这就像给你的代码以身份，HTML4.0.1或者XHTML1.0或者HTML5都有严格版本或者过度版本，这些都能很好的支持我们写的代码。我建议大家直接使用<!DOCTYPE html>，原因一方面是现在的布局基本舍弃了table布局，那么我们也就可以不考虑使用过渡型而使用严格型的"DOCTYPE"，另一方面考虑到向后兼容，我们可以直接使用HTML5的声明模式，即 <!DOCTYPE html>
2. 给页面设置字符集和编码字符
片段二中的第 4 行，添加了代码 <meta charset="utf-8">
片段二中的第 5 行，将片段一中的第 3 行中的 "&" 改为 "&"
在每个页面的开始中，我们都应该在 <head> 中设置了字符集，代码中我们一些特殊字符我们应该用字符编码来实现，大家可以在下面的网页进行查询 http://www.ascii-code.com/ 。
3. 正确的代码缩进
片段二中相对于片段一使用了代码缩进， 这可以极大的增强代码的可读性。标准程序的缩进应该是一个制表符或几个空格，这里我推荐使用几个空格。
4. 使用外链的方式带入CSS样式和JavaScript
片段二中相对于片段一，将css样式封装到test.css文件中，然后使用<link> 导入。
对于JavaScript，我们同样需要使用外链的方式。
6. 使用标签嵌套要正确
片段二中的第 9 行，<h1><a href="http://www.baidu.com">Go to Baidu web site.</a></h1>, 相对于片段一，我讲<h1>标签从<a>标签内部移至<a>标签外部。
<h1>是块元素，<a>是行内(inline)元素。我们不能将块元素放在行内(inline)元素
7. 删除不必要的标签
片段二中的第 10 ~ 14 行，相对于片段一中，将 <div id="topNav"><div> 删除。
div 和 ul 列表都是块元素，使用 div 来包裹 ul 根本没有起任何作用。虽然 div 的出现给我们制作 web 页面带来了极大的好处，但是我们没有必要到处乱用。
8. 尽量使用CSS控制样式
片段二中的第 11 ~ 13 行，相比较片段一中都并非直接使用大写字母，而是在test.css中定义样式
1 ul li a {
2 text-transform: uppercase;
3 }
2 text-transform: uppercase;
3 }
当然还有很多原则，希望大家多多交流。
相关 [web 原则 前端] 推荐：
[Web] 几个原则让前端代码更整洁
- - 博客园_首页 在讲解今天的知识点之前，我想先展示两个片段的代码，让大家看看这两段代码有哪些地方是值得以后的项目实践中需要注意的，需要去改进的. 片段一 1 . 片段二是对片段一的改进，下面就改进点进行详细的讲解. 片段二的第 1 行，添加了代码 .
Web前端优化
- - JavaScript - Web前端 - ITeye博客优点：直接使用浏览器内存的缓存数据，减少网站后台压力，用户体验（速度）好. 缺点：对于时时变化的动态页面，这种情况就不能容忍了，因为每次访问的都是第一次访问的内容，这样即使所请求的页面已经变化了，用户也不可能知道，所以此场景必须要消除这种缓存的影响. 延迟加载，将资源延迟到需要的时候的加载，例如detail页面，相关产品推荐，当用户浏览更多的信息往下拉动滚动时，才进行加载，异步加载可以大幅减少对后端资源的使用，在需要的时候加载，是资源合理使用常用的方式，但是也带来一个问题，当往下拉才去加载，如果性能不够好，用户的体验其实是不好的，“菊花”转动的时间会比较长，同时异步加载对前端性能的作用也是非常明显的，渲染的节点数量大幅减少.
Web 前端测试
- - Web前端 - ITeye博客Web 网站测试流程和方法（转载）. 进行正式测试之前，应先确定如何开展测试，不可盲目的测试. 一般网站的测试，应按以下流程来进行：. 1）使用HTML Link Validator将网站中的错误链接找出来；. 2）测试的顺序为：自顶向下、从左到右；. 3）查看页面title是否正确. （不只首页，所有页面都要查看）；.
Web 前端攻防（2014版）
- - 博客 - 伯乐在线外链会产生站外请求，因此可以被利用实施 CSRF 攻击. 目前国内有大量路由器存在 CSRF 漏洞，其中相当部分用户使用默认的管理账号. 通过外链图片，即可发起对路由器 DNS 配置的修改，这将成为国内互联网最大的安全隐患. 百度旅游在富文本过滤时，未考虑标签的 style 属性，导致允许用户自定义的 CSS.
web交互设计原则和模式
- shallwelin - 译言-原文作者：Bill Scott. 原文链接：Designing Web Interfaces Principles and Patterns for Rich Interaction. web界面设计（丰富交互设计的原则和模式）. (本书英文版大家可以到我blog下载：http://blog.youmila.com/?p=325).
华为内部的Web安全原则
- - 服务器运维与网站架构|Linux运维|X研究Web安全原则 1.认证模块必须采用防暴力破解机制，例如：验证码或者多次连续尝试登录失败后锁定帐号或IP. 说明：如采用多次连续尝试登录失败后锁定帐号或IP的方式，需支持连续登录失败锁定策略的“允许连续失败的次数”可配置，支持在锁定时间超时后自动解锁. 2.对于每一个需要授权访问的页面或servlet的请求都必须核实用户的会话标识是否合法、用户是否被授权执行这个操作，以防止URL越权.
Web开发的七个原则
- - JavaScript - Web前端 - ITeye博客Web(网站)开发的七个原则:. (1)能在前端校验的就尽量在前端校验. 比如上传图片,在后台也可以校验:判断MultipartFile 是否为空.但是也可以直接在前台js校验:. $('#tipsDiv').html(" 正在上传,请耐心等待...");.
Web前端优化最佳实践
- Jimmy - 中文热文榜|最新还有 Jason, Bixuan, 曦, 推荐，查看全部 8 个推荐. 博评 - Sting的网经发表于2010-08-08 08:41:10. Google的前端优化最佳实践
Yahoo的前端优化最佳实践. Web前端优化最佳实践之Content篇. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests).
Web前端浏览器兼容初探
- - 博客 - 伯乐在线浏览器兼容是前端开发人员必须掌握的一个技能，但是初入前端的同学或者其他后台web开发同学往往容易选择忽略，而形成两个极端：. 1 我最开始都是使用IE6，IE6上没问题，其它浏览器坑爹（多出现与前端后端一起搞的同学，小生2年前就这种状态，鼓励人家用ie6.. 2 我要遵循标准，我只要ff就好，IE就是坑爹的玩意，我不必去理他（小生一年前的心态.