规范HTML代码可以节省修改代码的时间

2016-02-20 00:20 17 1 收藏

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享规范HTML代码可以节省修改代码的时间,希望可以对大家能有小小的帮助。

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)如果你是一个喜欢什么都用div来标签的人,那么这个教程一定很适合你.在这个教程里着重讲如何规范的来写HTML代码让它更加的有意义.你有没有经历过这样的场景:在编缉别人的模版时发现那些语意不明的标签,你的感觉是什么样子的.学完这个教程后你会发现规范的代码不仅仅为你以后修改代码省下时间,特别是当你调试一个大的项目时你会发现,原来规范代码之后是那么的有用.

1.清除不必要的div标签

很多人都喜欢用div来包裹form和ul来建立菜单列表.你有没有想过这样一个多余的div是不是需要的.你可以使用css规则来实现同样的效果.

Example 1:

这个例子展示如何删除form中的div.

Example 2:

有时候我们会给内容添加一个额外的div标签来以示这是一个内容.在事例中用了div class="sidebox"来包括内容区.如果一个内容有一个标题的话(如:h4),那么我们就可以把这个h4来代替div.

2.使用有语义的标签

用有语义的标签来编写你的HTML文档(如:h1为标题;p为段落;ul为列表.)那么即使用户不支持css的话,那你的文档也被正确的读出来.

Example:

这个例子很好的说明了,使用有语义标签的好处.

3.尽量减少使用div

你有没有见过那么混乱的模板,到处都可以看到div标签,看到这些,你的头有没有变大了.你是否因为少用/div来结束标签,或者因为多用了div标签而把一个布局弄乱了.我想大多数初学者都有这样的经历.所以尽可能的少使用div,它会使调试和编辑更加的容易.

Example 1:

使用p来代替div来创建导航.

Example 2:

看如何使用span来代替div实现同样的效果.

4.格式(缩进)代码

你应该格式源代码(即缩进嵌套元素),以便于容易阅读和修改.如果你使用DW来编写代码的话,那么你就可以很方便的格式代码.

5.在/div标签之后添加注解.

你有没有见过在一些模版在/div之后有注明这一部分是什么.(如:header;contant;footer.)所以你可以在/div之后加入一个!--  footer --.这样别人就可以知道这是一个页脚结束点.

写完代码累了,那就轻松一下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160220/1631684.html

延伸阅读
标签: Web开发
HTML是 HyperText Tarkup Language的缩写,即超文本标记语言,是在WWW上建立超文本文件的语言,它通过标记和属性对一段文本的语言进行描述,它提供超文本连接,可以指向网络中另一台计算机的文件,HTML还支持在文本中镶入图象,声音,动画等不同格式的文件,HTML还具有强大的排版功能,利用HTML可以制作出任意版面的主页。 HTML有什么...
标签: Web开发
[a-zA-Z][^]*\son\w+=(\w+|'[^']*'|""[^""]*"")[^]* [^]* Source= SRegExp.Replace(Source,"") SRegExp.Pattern="" Source= SRegExp.Replace(Source,"")
标签: Web开发
说明 !-- *** -- (浏览器不会显示) 档案型态声明 !DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN" 3.0 档案型态声明 !DOCTYPE HTML PUBLIC "-//W3O//DTD W3 HTML 3.0//EN" 可搜寻 ISINDEX (指示可搜寻的索引项) N1.0 提示 ISINDEX PROMPT="***" (要求输入的提示文字) 送出搜寻条件 A HREF="URL?***"/a ...
标签: Web开发
把w3c的原文放在这里并不是想吓唬任何人,只是觉得应该告诉大家学习一门语法的方法。在能力允许的范围内尽可能自己去查阅原版的官方文档,这样你不仅可以拿到最完整的信息,而且这是一个高手成长之路。翻译的东西多半掺有个人想法,以及个人能力的有限都造成这样一种局面:很难在翻译的教材里面找到完整的相关信息,从而使个人的技术水平一...
标签: Web开发
textarea的value是html文件源代码,如何把源代码存成html文件??      如      html      head      meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312" &...

经验教程

643

收藏

30
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部