11个让你代码整洁的原则 - jerrylsxu-html教程-PHP中文网

首页

web前端

html教程

11个让你代码整洁的原则 - jerrylsxu

PHP中文网

May 22, 2016 pm 05:19 PM

写Web页面就像我们建设房子一样，地基牢固，房子才不会倒。同样的，我们制作Web页面也一样，一个良好的HTML结构是制作一个美丽的网站的开始，同样的，良好的CSS只存在同样良好的HTML中，所以一个干净的，语义的HTML的优点很多，那么平时制作中，我们做到了这一点吗？我们一起来看一张图片： <img src="/static/imghwm/default1.png" data-src="http://www.admin10000.com/UploadFiles/Document/201207/13/20120713140824123808.PNG" class="lazy" alt=""> 　　上图展示了两段代码，我想大家都只会喜欢第一种，我们先不说其语义，至少他的结构让我们看上去清爽，而第二种呢？一看就是糟糕的代码的代码，让人讨厌的代码。那么要怎么样才能写出一个好的代码，整洁的代码呢？下面我们就从以下十二个方面一起来学习，只要大家以后在写代码的时候能坚持下面的十二个原则，保准你的代码质量能上去，而且你写的代码会人见人爱。 　　一、DOCTYPE的声明 　　如果我们想做好一件事情，首先要知道我们有哪些权利去做，就如“DOCTYPE”的声明，我们没有必要去讨论是否使用HTML4.01或者XHTML1.0或者说现在的HTML5都提供了严格版本或者过渡版本，这些都能很好的支持我们写的代码： <img src="/static/imghwm/default1.png" data-src="http://www.admin10000.com/UploadFiles/Document/201207/13/20120713140824641125.PNG" class="lazy" alt=""> 　　由于我们现在的布局不需要table布局也能做出很好的布局，那么我们就可以考虑不使用过渡型而使用严格型的“DOCTYPE”，为了向后兼容，我建议使用HTML5的声明模式： 　　如果想了解更多这方面的知识，可以点击： <ol class=" list-paddingleft-2"> <li><a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html" target="_blank">W3C: Recommended DTDs to use in your Web document</a></li> <li><a href="http://www.alistapart.com/stories/doctype/" target="_blank">Fix Your Site With the Right DOCTYPE!</a></li> <li><a href="http://www.456bereastreet.com/archive/200609/no_more_transitional_doctypes_please/" target="_blank">No more Transitional DOCTYPEs， please</a></li> </ol> 　　二、字符集和编码字符 　　在每个页面的开始中，我们都在 <table border="0"><tbody><tr class="firstRow"> <td class="gutter">1</td> <td class="code"> <code class="xml plain"><</code><code class="xml keyword">meta</code> <code class="xml color1">charset</code><code class="xml plain">=</code><code class="xml string">"UTF-8"</code> <code class="xml plain">/></code> </td> </tr></tbody></table> 　　而且我们在平时写页面中时，时常会碰到"&"这样的符号，那么我们不应该直接在页面这样写“&”: <img src="/static/imghwm/default1.png" data-src="http://www.admin10000.com/UploadFiles/Document/201207/13/20120713140824467393.PNG" class="lazy" alt=""> 　　我们应该在代码中使用字符编码来实现，比如说“&”我们在代码中应该使用“&”来代替他。 　　如果想了解更多这方面的知识，可以点击： <ol class=" list-paddingleft-2"> <li><a href="http://en.wikipedia.org/wiki/UTF-8" target="_blank">Wikipedia: UTF-8</a></li> <li><a href="http://www.cs.tut.fi/~jkorpela/chars.html" target="_blank">A tutorial on character code issues</a></li> <li><a href="http://www.ascii-code.com/" target="_blank">The Extended ASCII table</a></li> </ol> 　　三、正确的代码缩进 　　在页面编辑中，代码的缩进有没有正确，他不会影响你网站的任何功能，但要是你没有一个规范的缩进原则，让读你代码的人是非常的生气，所以说正确的代码缩进可以增强你的代码可读性。标准程序的缩进应该是一个制表符（或几个空格），形像一点的我们来看下文章开头那张图，或者一起来看下面展示的这张图，你看后就知道以后自己的代码要怎么样书写才让人看了爽： <img src="/static/imghwm/default1.png" data-src="http://www.admin10000.com/UploadFiles/Document/201207/13/20120713140824239583.PNG" class="lazy" alt=""> 　　不用说，大家都喜欢下面的那种代码吧。这只是一个人的习惯问题，不过建议从开始做好，利人利已。有关于这方面的介绍，大家还可以参考：<a href="http://www.w3.org/People/Raggett/tidy/" target="_blank">Clean up your Web pages with HTML TIDY</a>。 　　四、外链你的CSS样式和Javascript脚本 　　页面中写入CSS样式有很多种方法，有些直接将样式放入页面的“ <img src="/static/imghwm/default1.png" data-src="http://www.admin10000.com/UploadFiles/Document/201207/13/20120713140824009862.PNG" class="lazy" alt=""> 　　上面我们所说的只是样式，其实javascript脚本也和CSS样式是同一样的道理。图文并说，我最终想表达的意思是“在制作web页面中，尽量将你的CSS样式和javascript脚本单独放在一个文件中，然后通过链接的方式引用这些文件，这样做的最大好处是，方便你的样式和脚本的管理与修改。” 　　五、正确的标签嵌套 　　我们在写HTML时总是需要标签的层级嵌套来帮我们完成HTML的书写，但这些HTML的嵌套是有一定的规则的，如果要细说的话，我们可能要用几个章节来描述，那么我今天这里要说的是，我们在写HTML时不应该犯以下这样的超级错误： <img src="/static/imghwm/default1.png" data-src="http://www.admin10000.com/UploadFiles/Document/201207/13/20120713140824325977.PNG" class="lazy" alt=""> 　　上图的结构我们是常见的，比如说首页的标题，那么我们就应该注意了，不能把“ <h1>”放在“<a>”标签中，换句话说，就是不能么块元素和在行内元素中。上面只是一个例子，只是希望大家在平时的制作中不应该犯这样的超级错误。</a> </h1> 　　六、删除不必要的标签 　　首先我们一起来看一个实例的截图： <img src="/static/imghwm/default1.png" data-src="http://www.admin10000.com/UploadFiles/Document/201207/13/20120713140824722293.PNG" class="lazy" alt=""> 　　上图明显是一个导航菜单的制作，在上图的实例中：有一个“p#topNav”包住了列表“ul#bigBarNavigation”，而“p”和“ul”列表都是块元素，加上“p”此处用来包“ul”根本就没有起到任何作用。虽然“p”的出现给我们制作web页面带来了极大的好处，但我们也没有必要到处这样的乱用，不知道大家平时有没有注意这样的细节呢？我是犯这样的错误，如果你也有过这样的经历，那么从今天开始，从现在开始，我们一起努力来改正这样的错误。 　　有关于如何正确的使用标签，大家感兴趣的话可以点击：<a href="http://csscreator.com/?q=pitis" target="_blank">Divitis: what it is, and how to cure it.</a> 　　七、使用更好的命名 　　这里所说的命名就是给你的页面中相关元素定义类名或者是ID名，很多同学都有这栗的习惯，比如说有一个元素字体是红色的，给他加上“red”,甚至布局都写“left-sidebar”等，但是你有没有想过，如果这个元素定义了“red”后，过几天客户要求使用“蓝色”呢？或者又说，那时的“left-sidebar”边栏此时不想放在左边了，而是想放在右边，那么这样一来我们前面的命名可以说是一点意义都没有了，正如下面的一个图所示： <img src="/static/imghwm/default1.png" data-src="http://www.admin10000.com/UploadFiles/Document/201207/13/20120713140824526317.PNG" class="lazy" alt=""> 　　那么定义一个好的名就很得要了，不但自己能看懂你的代码，而且别人也能轻松读懂你的代码，比如说一个好的类名和ID名“mainNav”、“subNav”、“footer”等，他能描述所包含的事情。不好的呢，比如前面所说的。 如果想了解更多这方面的知识，可以点击： <ol class=" list-paddingleft-2"> <li><a href="http://www.techrepublic.com/article/standardizing-css-class-and-id-names/5286783" target="_blank">Standardizing CSS class and id names</a></li> <li><a href="http://sixrevisions.com/css/css-tips/css-tip-2-structural-naming-convention-in-css/" target="_blank">CSS Tip #2: Structural Naming Convention in CSS</a></li> <li><a href="http://woork.blogspot.com/2008/11/css-coding-semantic-approach-in-naming.html" target="_blank">CSS coding: semantic approach in naming convention</a></li> <li><a href="http://www.realdealmarketing.net/docs/css-coding-style.php" target="_blank">CSS Naming Conventions and Coding Style</a></li> </ol> 　　八、离开版本的CSS 　　我们在设计菜单时，有时要求所有菜单选项的文本全部大写，大家平时是不是直接在HTML标签中就将他们设置成大写状态呢？如果是的话，我觉得不好，如果为了将来具有更好的扩展性，我们不应该在HTML就将他们设置为全部大写，更好的解决方法是通过CSS来实现： <img src="/static/imghwm/default1.png" data-src="http://www.admin10000.com/UploadFiles/Document/201207/13/20120713140824730389.PNG" class="lazy" alt=""> 　　九、定义 　　大家平时制作web页面时不知道有没有碰到这样的问题，就是整站下来，使用了相同的布局和结构，换句话说，你在页面的布局上使用了相同的结构，相同的类名，但是突然你的上级主管说应客户的需求，有一个页面的布局需要边栏和主内容对换一下。此时你又不想为了改变一下布局而修改整个页面的结构，此时有一个很好的解决办法，就是在你的这个页面中的“ <img src="/static/imghwm/default1.png" data-src="http://www.admin10000.com/UploadFiles/Document/201207/13/20120713140824585989.PNG" class="lazy" alt=""> 　　给“ 　　如果想了解更多这方面的知识，可以点击： <ol class=" list-paddingleft-2"> <li><a href="http://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/" target="_blank">ID Your Body For Greater CSS Control and Specificity</a></li> <li><a href="http://www.37signals.com/svn/archives2/case_study_reusing_styles_with_a_body_class.php" target="_blank">Case study: Re-using styles with a body class</a></li> </ol> 　　十、验证你的代码 　　人不免会出错，我们编写代码的时候也是一样的，你有时候总会小写或多写，比如说忘了关闭你的元素标签，不记得写上元素必须的属性，虽然有一些错误不会给你带来什么灾难性的后果，但也不免会给你带来你无法意估的错误。所以建议您写完代码的时候去验证你一下你的代码。验证后的代码总是比不验证的代码强： <img src="/static/imghwm/default1.png" data-src="http://www.admin10000.com/UploadFiles/Document/201207/13/20120713140824410337.PNG" class="lazy" alt=""> 　　为一有效的验证你的代码，我们可以使用相关的工具或者浏览器的插件来帮助我们完成。如果你的代码没有任何错误，W3C验证工具会在你们面前呈现绿色的文字，这样让你是无比的激动人心，因为再次证明了你写的代码经得起W3Ｃ的标准。 　　如果想了解更多这方面的知识，可以点击： <ol class=" list-paddingleft-2"> <li><a href="http://validator.w3.org/" target="_blank">The W3C Markup Validation Service</a></li> <li><a href="http://xhtml-css.com/" target="_blank">XHTML-CSS Validator</a></li> <li><a href="http://freesitevalidator.com/" target="_blank">Free Site Validator (checks entire site, not just one page)</a></li> </ol> 　　十一、逻辑顺序 　　这是一个很少见的错误情况，因为我想大家写页面都不会把逻辑顺序打乱，换句话说，如果可能的话，让你的网站具有一个先后逻辑顺序是最好的，比如说先写页头，在写页体，最后写页脚。当然有时也会碰到特殊情况，如何页脚部分在于我们代码的边栏以上，这可能是因为它最适合你的网站设计需求，这样或许是可以理解的，但是如果你有别的方式实现，我们都应该把页脚是放在一个页面的最后，然后在通过特定的技术让它达到你的设计需求： <img src="/static/imghwm/default1.png" data-src="http://www.admin10000.com/UploadFiles/Document/201207/13/20120713140824742405.PNG" class="lazy" alt=""> 　　上面我们一起讨论了多个如何让你开始写一个整洁的HTML代码。从一个项目的开始，这一切都是非常容易的，但是如果需要你去修复一个现有的代码，那多少都会有一定的难度。上面说这么多主要是告诉您将要如何学习编写一个良好的、整洁的HTML代码，并且一直坚持这样的编写。希望读完这篇文章后，在你的下一个项目中，能从头开始，坚持写一个整洁的HTML代码。 以上就是11个让你代码整洁的原则 - jerrylsxu的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中创建列表？May 06, 2025 am 12:01 AM

toCreateAlistinHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulleTedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。

HTML行动：网站结构的示例May 05, 2025 am 12:03 AM

HTML用于构建结构清晰的网站。1)使用标签如、、定义网站结构。2)示例展示了博客和电商网站的结构。3)避免常见错误如标签嵌套不正确。4)优化性能通过减少HTTP请求和使用语义化标签。

您如何将图像插入HTML页面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

HTML的目的：启用Web浏览器可以显示内容May 03, 2025 am 12:03 AM

HTML的核心目的在于让浏览器理解并展示网页内容。1.HTML通过标签定义网页结构和内容，如、到、等。2.HTML5增强了多媒体支持，引入了和标签。3.HTML提供了表单元素，支持用户交互。4.优化HTML代码可提升网页性能，如减少HTTP请求和压缩HTML。

为什么HTML标签对Web开发很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）heSdefinElayout，语义和互动性。2）SemantictagsiCtagSimproveCacsibilitieAndseo.3）pose poseriblesibilityAndseoandseo.3）poser