Web前端：11个让你代码整洁的原则

时间 2019-12-06

标签 web 前端让你代码整洁原则栏目 HTML 繁體版

原文原文链接

写Web页面就像咱们建设房子同样，地基牢固，房子才不会倒。一样的，咱们制做Web页面也同样，一个良好的HTML结构是制做一个美丽的网站的开始，一样的，良好的CSS只存在一样良好的HTML中，因此一个干净的，语义的HTML的优势不少，那么平时制做中，咱们作到了这一点吗？咱们一块儿来看一张图片： javascript

上图展现了两段代码，我想你们都只会喜欢第一种，咱们先不说其语义，至少他的结构让咱们看上去清爽，而第二种呢？一看就是糟糕的代码的代码，让人讨厌的代码。那么要怎么样才能写出一个好的代码，整洁的代码呢？下面咱们就从如下十二个方面一块儿来学习，只要你们之后在写代码的时候能坚持下面的十二个原则，保准你的代码质量能上去，并且你写的代码会人见人爱。 php

1、DOCTYPE的声明 css

若是咱们想作好一件事情，首先要知道咱们有哪些权利去作，就如“DOCTYPE”的声明，咱们没有必要去讨论是否使用HTML4.01或者XHTML1.0或者说如今的HTML5都提供了严格版本或者过渡版本，这些都能很好的支持咱们写的代码： html

因为咱们如今的布局不须要table布局也能作出很好的布局，那么咱们就能够考虑不使用过渡型而使用严格型的“DOCTYPE”，为了向后兼容，我建议使用HTML5的声明模式： java

<!DOCTYPE HTML> web

<html lang="en-US"> 浏览器

若是想了解更多这方面的知识，能够点击： app

2、字符集和编码字符 ide

在每一个页面的开始中，咱们都在<head>中设置了字符集，咱们这里都是使用“UTF-8” svn

  
 
   <meta charset="UTF-8" />

并且咱们在平时写页面中时，时常会碰到"&"这样的符号，那么咱们不该该直接在页面这样写“&”:

咱们应该在代码中使用字符编码来实现，好比说“&”咱们在代码中应该使用“&”来代替他。

若是想了解更多这方面的知识，能够点击：

3、正确的代码缩进

在页面编辑中，代码的缩进有没有正确，他不会影响你网站的任何功能，但要是你没有一个规范的缩进原则，让读你代码的人是很是的生气，因此说正确的代码缩进能够加强你的代码可读性。标准程序的缩进应该是一个制表符（或几个空格），形像一点的咱们来看下文章开头那张图，或者一块儿来看下面展现的这张图，你看后就知道之后本身的代码要怎么样书写才让人看了爽：

不用说，你们都喜欢下面的那种代码吧。这只是一我的的习惯问题，不过建议从开始作好，利人利已。有关于这方面的介绍，你们还能够参考：Clean up your Web pages with HTML TIDY。

4、外链你的CSS样式和Javascript脚本

页面中写入CSS样式有不少种方法，有些直接将样式放入页面的“<head>”中，这将是一个很很差的习惯，由于这样不只会搞乱咱们的标记，并且这些样式只适合这一个HTML页面。因此咱们须要将CSS单独提出，保存在外部，这样后面的页面也能够连接到这些样式，若是你页面须要修改，咱们也只须要修改样式文件就能够。正以下图所示：

上面咱们所说的只是样式，其实javascript脚本也和CSS样式是同同样的道理。图文并说，我最终想表达的意思是“在制做web页面中，尽可能将你的CSS样式和javascript脚本单独放在一个文件中，而后经过连接的方式引用这些文件，这样作的最大好处是，方便你的样式和脚本的管理与修改。”

5、正确的标签嵌套

咱们在写HTML时老是须要标签的层级嵌套来帮咱们完成HTML的书写，但这些HTML的嵌套是有必定的规则的，若是要细说的话，咱们可能要用几个章节来描述，那么我今天这里要说的是，咱们在写HTML时不该该犯如下这样的超级错误：

上图的结构咱们是常见的，好比说首页的标题，那么咱们就应该注意了，不能把“<h1>”放在“<a>”标签中，换句话说，就是不能么块元素和在行内元素中。上面只是一个例子，只是但愿你们在平时的制做中不该该犯这样的超级错误。

6、删除没必要要的标签

首先咱们一块儿来看一个实例的截图：

上图明显是一个导航菜单的制做，在上图的实例中：有一个“div#topNav”包住了列表“ul#bigBarNavigation”，而“div”和“ul”列表都是块元素，加上“div”此处用来包“ul”根本就没有起到任何做用。虽然“div”的出现给咱们制做web页面带来了极大的好处，但咱们也没有必要处处这样的乱用，不知道你们平时有没有注意这样的细节呢？我是犯这样的错误，若是你也有过这样的经历，那么从今天开始，从如今开始，咱们一块儿努力来改正这样的错误。

有关于如何正确的使用标签，你们感兴趣的话能够点击：Divitis: what it is, and how to cure it.

7、使用更好的命名

这里所说的命名就是给你的页面中相关元素定义类名或者是ID名，不少同窗都有这栗的习惯，好比说有一个元素字体是红色的，给他加上“red”,甚至布局都写“left-sidebar”等，可是你有没有想过，若是这个元素定义了“red”后，过几天客户要求使用“蓝色”呢？或者又说，那时的“left-sidebar”边栏此时不想放在左边了，而是想放在右边，那么这样一来咱们前面的命名能够说是一点意义都没有了，正以下面的一个图所示：

那么定义一个好的名就很得要了，不但本身能看懂你的代码，并且别人也能轻松读懂你的代码，好比说一个好的类名和ID名“mainNav”、“subNav”、“footer”等，他能描述所包含的事情。很差的呢，好比前面所说的。

若是想了解更多这方面的知识，能够点击：

8、离开版本的CSS

咱们在设计菜单时，有时要求全部菜单选项的文本所有大写，你们平时是否是直接在HTML标签中就将他们设置成大写状态呢？若是是的话，我以为很差，若是为了未来具备更好的扩展性，咱们不该该在HTML就将他们设置为所有大写，更好的解决方法是经过CSS来实现：

9、定义<body>的类名或ID名

你们平时制做web页面时不知道有没有碰到这样的问题，就是整站下来，使用了相同的布局和结构，换句话说，你在页面的布局上使用了相同的结构，相同的类名，可是忽然你的上级主管说应客户的需求，有一个页面的布局须要边栏和主内容对换一下。此时你又不想为了改变一下布局而修改整个页面的结构，此时有一个很好的解决办法，就是在你的这个页面中的“<body>”中定义一个特殊的类名或ID名，这样来你就能够轻松的达到你所要的需求。这样的使用，不知道你们使用过没有：

给“<body>”定义独特的类和ID名称是很是强大的，不只仅是为了像上面同样帮你改变布局，最主要的是有时他能帮你实现页面中的某一部分达到特殊效果，而又不影响其它页面的效果。为何有这样的功能，不用我说我想你们都是知道的。由于每一个页面的内容都是“<body>”的后代元素。

若是想了解更多这方面的知识，能够点击：

10、验证你的代码

人难免会出错，咱们编写代码的时候也是同样的，你有时候总会小写或多写，好比说忘了关闭你的元素标签，不记得写上元素必须的属性，虽然有一些错误不会给你带来什么灾难性的后果，但也难免会给你带来你没法意估的错误。因此建议您写完代码的时候去验证你一下你的代码。验证后的代码老是比不验证的代码强：

为一有效的验证你的代码，咱们可使用相关的工具或者浏览器的插件来帮助咱们完成。若是你的代码没有任何错误，W3C验证工具会在大家面前呈现绿色的文字，这样让你是无比的激动人心，由于再次证实了你写的代码经得起W3Ｃ的标准。

若是想了解更多这方面的知识，能够点击：

11、逻辑顺序

这是一个不多见的错误状况，由于我想你们写页面都不会把逻辑顺序打乱，换句话说，若是可能的话，让你的网站具备一个前后逻辑顺序是最好的，好比说先写页头，在写页体，最后写页脚。固然有时也会碰到特殊状况，如何页脚部分在于咱们代码的边栏以上，这多是由于它最适合你的网站设计需求，这样或许是能够理解的，可是若是你有别的方式实现，咱们都应该把页脚是放在一个页面的最后，而后在经过特定的技术让它达到你的设计需求：

上面咱们一块儿讨论了多个如何让你开始写一个整洁的HTML代码。从一个项目的开始，这一切都是很是容易的，可是若是须要你去修复一个现有的代码，那多少都会有必定的难度。上面说这么多主要是告诉您将要如何学习编写一个良好的、整洁的HTML代码，而且一直坚持这样的编写。但愿读完这篇文章后，在你的下一个项目中，能从头开始，坚持写一个整洁的HTML代码。