Web前端：11个让你代码整洁的原则
- - 博客 - 伯乐在线写Web页面就像我们建设房子一样，地基牢固，房子才不会倒. 同样的，我们制作Web页面也一样，一个良好的HTML结构是制作一个美丽的网站的开始，同样的，良好的CSS只存在同样良好的HTML中，所以一个干净的，语义的HTML的优点很多，那么平时制作中，我们做到了这一点吗. 上图展示了两段代码，我想大家都只会喜欢第一种，我们先不说其语义，至少他的结构让我们看上去清爽，而第二种呢.
几个原则让前端代码更整洁
标签：
原则
前端
代码
| 发表时间：2013-05-01 07:36 | 作者：tigerdsh
出处：http://blog.csdn.net
在讲解今天的知识点之前，我想先展示两个片段的代码，让大家看看这两段代码有哪些地方是值得以后的项目实践中需要注意的，需要去改进的。
片段一
片段一
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 }
当然还有很多原则，希望大家多多交流。
作者：tigerdsh 发表于2013-5-1 7:36:16 原文链接
阅读：79 评论：0 查看评论
相关 [原则 前端 代码] 推荐：
[Web] 几个原则让前端代码更整洁
- - 博客园_首页 在讲解今天的知识点之前，我想先展示两个片段的代码，让大家看看这两段代码有哪些地方是值得以后的项目实践中需要注意的，需要去改进的. 片段一 1 . 片段二是对片段一的改进，下面就改进点进行详细的讲解. 片段二的第 1 行，添加了代码 .
几个原则让前端代码更整洁
- - CSDN博客研发管理推荐文章在讲解今天的知识点之前，我想先展示两个片段的代码，让大家看看这两段代码有哪些地方是值得以后的项目实践中需要注意的，需要去改进的. 片段二是对片段一的改进，下面就改进点进行详细的讲解. 片段二的第 1 行，添加了代码 . 编写HTML代码时，首先要使用"DOCTYPE"进行声明，这就像给你的代码以身份，HTML4.0.1或者XHTML1.0或者HTML5都有严格版本或者过度版本，这些都能很好的支持我们写的代码.
前端代码规范
- - Web前端 - ITeye博客1 结构、样式、行为三层分离；. 2 采用统一的缩进（两个或四个空格/Tab）；. 3 嵌套标签应当缩进一次，必须合理嵌套；. 4 HTML页面必须包含文档类型声明，采用HTML5文档类型声明；. 5 CSS样式全部采用外链的方式在标签中引入；禁用行内样式，复用已有的样式规则；. 6 所有标签和属性名称必须小写，标签的属性值全部使用双引号，不采用属性简写方式；.
代码重构方向原则指导
- - 外刊IT评论提示：如果您在阅读器里点击订阅本站的文章链接时发现有一个中转页，这说明你的订阅地址有误，本站的订阅地址(RSS)是：. http://www.aqee.net/feed/，请及时纠正. 重构是一种对软件进行修改的行为，但它并不改变软件的功能特征，而是通过让软件程序更清晰，更简洁和更条理来改进软件的质量.
代码的抽象三原则
- - 阮一峰的网络日志软件开发是 "抽象化"原则（Abstraction）的一种体现. 所谓"抽象化"，就是指从具体问题中，提取出具有共性的模式，再使用通用的解决方法加以处理. 开发软件的时候，一方面，我们总是希望使用别人已经写好的代码，另一方面，又希望自己写的代码尽可能重用，以求减少工作量. 要做到这两个目标，这需要"抽象化".
代码审查：github官方给出的代码审查指导原则
- - 外刊IT评论这篇文章的内容由github官方提供，指导你如何在github上进行代码审查和如果让别人审查自己的代码. 接受这样的事实：很多编程上的主张都是一种个人观点. 应该讨论它们的利与弊，提出你的倾向观点，迅速的达成一种解决方案. (“把这个变量命名成 :user_id你觉得怎样. (“我的”，“不是我的”，“你的”).
前端代码标准最佳实践：CSS
- - CSDN博客推荐文章上一篇《 前端代码标准最佳实践：javascript》发表后，大家讨论还是很热烈，从侧面体现了前端工程师对写标准的前端代码的重视程度很高. 这些最佳标准实践并不是那个权威组织发布的，而是由大量的前端工程师们在实践过程中的经验总结，目的在于提高代码的可读性，可维护性和性能. 那么接着上一篇，我们再来谈谈CSS代码的一些标准实践.
程序员，都去写一写前端代码吧
- - 四火的唠叨文章系本人原创，转载请保持完整性并注明出自 《四火的唠叨》. 你可以认为我是一个极端的人，就像有许多人专注于自己的领域而不屑于其它“肤浅”的工作范畴一样. 比如我见过不少认为做portal没有技术含量的判定，做工程都是充满苦逼行为的言论，最近则还有那些“大数据”崇拜者的疯狂吐槽……我的极端则有些不同，我的极端在于我认为绝大多数优秀的程序员，都要尝试多方面的事情.
推荐20个开源的不错前端低代码项目
- - SegmentFault 最新的文章近几年，在技术领域低代码是比较热门的话题，比如阿里云推出了易搭，通过简单的拖拽、配置，即可完成业务应用的搭建，腾讯云则是推出了微搭，通过行业化模板、拖放式组件和可视化配置快速构建多端应用. 低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式.