编程小贴士

给你的编程提供小点子


Web开发者不可不知的15条编码原则

HTML已经走过了近20的发展历程。从HTML4到XHTML,再到最近十分火热的HTML5,它几乎见证了整个互联网的发展。但是,即便到现在,有很多基础的概念和原则依然需要开发者高度注意。下面,向大家介绍这些应该遵循的开发原则。

 1、善用DIV来布局

当开发一个Web页面时,要考虑第一件事就是区分页面重点。将这些内容用DIV标签包含起来,页面的代码会呈现出整洁、缩进良好的风格。

1

2

3

4

5

6

<div id="header"></div>

<div id="body-container">

<div id="content"> <!-- Content -- > </div>

<div id="right-side-bar"> <!-- Right Side Bar Content Area -- ></div>

</div>

<div id="footer"></div>

 2、将HTML标签和CSS样式表分割开来

好的页面应该将HTML标签和CSS样式表分割开来。这是每一个Web开发者在首次接触Web开发时就应该知道的一条原则。然而,直到今天,仍然有很多开发者没有严格遵循这一原则。

不要在HTML标签里内嵌样式表代码。开发者应该养成习惯,单独建立文件,用以存放CSS样式表。而这也将方便其他开发者在修改你的代码时,能迅速完成工作。

1

2

<p style="color: #CCC; font-size:16px; font-family: arial">

    An example to illustrate inline style in html</p>

 3、优化CSS代码

现如今,为网站添加多个CSS文件的做法已经很普遍。但是,当网站包含的CSS文件过多时,会降低网站的响应速度。解决办法是:精简代码并对多 个CSS文件进行优化,将其合并成一个文件。这个办法能显著提升网站的加载速度。此外,有很多工具可以用来优化CSS文件,例如CSS Optimizer、Clean CSS等。

 4、优化Javascript文件,并将其放到页面底部

和CSS一样,为页面添加多个Javascript文件也是很普遍的做法。但这同样会降低网站的响应速度。为此,开发者应该精简、优化这些Javascript文件。

但有一点和CSS不同,浏览器通常不支持并行加载。这也就是说,当浏览器加载Javascript文件时,将不再同时加载其它内容。而这就导致了网页的加载速度好像变慢了。

一个好的解决办法是:将Javascript文件的加载顺序放在最后。为了实现这一目标,开发者可以把Javascript代码放在HTML文档的底部,而最好的位置是放在接近</body>标签的地方。

 5、善用标题元素

<h1> 到 <h6>这些元素用来突出页面的重点内容。这有助于用户更加关注页面的重点部分。对于博客,我(指本文作者)推荐使用<h1>标签来突出博客标题。因为,博客标题几乎是页面中最重要的部分。

1

2

3

<h1>This is the topmost heading</h1>

<h2>This is a sub-heading underneath the topmost heading.</h2>

<h3>This is a sub-heading underneath the h2 heading.</h3>

 6、在合适的地方使用合适的HTML标签

HTML标签是构造规范内容结构的关键。例如,<em>标签用来强调重点内容。<p>标签适用于突出文章段落。如果想要在段落间加空行,就不要使用<br />标签。

1

2

<em>emphasized text</em>

<strong>strongly emphasized text</strong>

对于一组相关的元素,建议使用<ul>、<ol>或 <dl>标签。但是,不要错误的使用<blockquote>标签,因为它原本是用来定义块应用的。

 7、避免滥用<div>标签

并不是所有块元素都应该用<div>标签来创建。例如,可以在内联元素的属性里添加display:block,将其以块元素的方式显示。

 8、使用列表创建导航

使用<ul>列表标签,再配以相应的CSS样式,可以创建美观的导航菜单。

 9、别忘了封闭标签

现在,每当我回忆起在大学里学到的关于Web开发的第一堂课时,教授提到的HTML结构的重要性总是浮现在我的脑海。根据W3C标准,标签应该 被封闭。那是因为,在一些浏览器下,如果没有按照标准来将标签封闭,会出现显示不正常的问题。而这一情况在IE6、7和8里尤为明显。

 10、标签小写语法

标签采用小写语法是一项行业标准。虽然大写语法并不影响页面的显示效果,但是,代码的可读性很差。下面这段代码可读性就非常差:

1

2

3

4

5

<DIV>

<IMG SRC="images/demo_image.jpg" alt="demo image"/>

<A HREF="#" TITLE="click here">Click Here</A>

<P>some sample text</P>

</DIV>

 11、为图片标签添加alt属性

在<img>标签里,alt属性通常非常有用。因为搜索引擎通常无法直接抓取图片文件。但是,如果开发者在alt属性里添加了图片的描述内容,将会方便搜索引擎的抓取。

1

2

3

4

5

<!-- has an alt attribute, which will validate, but alt value is meaningless -- >

<img id="logo" src="images/bgr_logo.png" alt="brg_logo.png" />

<!-- The correct way -- >

<img id="logo" src="images/bgr_logo.png" alt="Anson Cheung - Web Development" />

 12、在表格里使用<label> 和 <fieldset>

为了提高代码质量,并让用户容易理解表格内容,我们应该用<label> 和 <fieldset>标签创建表格元素。

1

2

3

4

5

6

7

8

<fieldset>

<legend>Personal Particular</legend>

<label for="name">Name</label><input type="text" id="name" name="name" />

<label for="email">E-mail</label><input type="text" id="email" name="email" />

<label for="subject">Subject</label><input type="text" id="subject" name="subject" />

<label for="message" >Message Body</label>

  <textarea rows="10" cols="20" id="message" name="message" ></textarea>

</fieldset>

 13、将浏览器兼容代码标明信息并相互分开

对一名Web开发者来说,跨浏览器兼容是一个被重点关注的问题。通常,开发者会针对不同的浏览器来编码,也即是CSS hack。但是,如果开发者在编码时,能注明代码为哪一个版本的浏览器所写,会为以后的维护工作带来极大方便。下面就是一个很好的示例:

1

2

3

<!--[if IE 7]>

<link rel="stylesheet" href="css/ie-7.css" media="all">

<![endif]-->

1

2

3

4

5

6

7

<!--[if IE 6]>

<link rel="stylesheet" href="css/ie-6.css" media="all">

<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>

<script type="text/javascript">

DD_belatedPNG.fix('#logo');

</script>

<![endif]-->

 14、避免过度注释

作为一名开发者,在代码中添加注释是一个好习惯,能方便理解并易于维护。这在其它编程语言如PHP、JAVA 和 C#里很普遍。但是,HTML/XHTML是文本标记语言,非常容易理解。因此,无需为每行代码都添加注释。

 15、测试代码

推荐开发者使用W3C文本标记验证服务来测试代码。它是一个高效的测试工具,能帮助你发现页面中存在的错误。而且,它还能从页面错误出发,帮你定位到相应的代码。这一点通常在编码完成后很难做到。但开发者需要注意的是,验证通过的代码并非就是性能优异的代码。

90 Responses to “ Web开发者不可不知的15条编码原则 ”

  1. me suba说道:

    TLTLQp very good put up, i definitely love this web site, carry on it

  2. It as best to participate in a contest for probably the greatest blogs on the web. I will recommend this site!

  3. Prior to the game for the Falcons to hold on

  4. Lung Health说道:

    Im thankful for the blog article.Thanks Again. Much obliged.

  5. There as definately a lot to find out about this subject. I love all of the points you ave made.

  6. Right here is the perfect webpage for everyone who would like to understand this topic.

  7. Nova 4 specs说道:

    There as certainly a lot to learn about this subject. I really like all of the points you have made.

  8. Click to read说道:

    There is definately a lot to learn about this issue. I really like all of the points you have made.

  9. Its fantastic as your other posts , thank you for putting up.

  10. webpage说道:

    Wow, superb blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is great, let alone the content!. Thanks For Your article about sex.

  11. w88world.com说道:

    Really enjoyed this post.Really looking forward to read more. Really Great.

  12. kivi na bitkoin说道:

    Thanks-a-mundo for the blog.Really looking forward to read more. Great.

  13. I think this is a real great article. Keep writing.

  14. pre booked说道:

    not operating correctly in Explorer but looks

  15. Very nice info and straight to the point. I am not sure if this is truly the best place to ask but do you folks have any ideea where to hire some professional writers? Thanks

  16. status online说道:

    Svens Bilder Laufen Marathon Triathlon Fotos

  17. WONDERFUL Post.thanks for share..more hold your fire..

  18. NIW说道:

    Thanks so much for the post.Thanks Again. Awesome.

  19. anchor说道:

    Thanks-a-mundo for the article post.Really thank you! Awesome.

  20. Nwokolo说道:

    I recommend them for sure What type of images am I аАа’аАТ‚аЂТ˜legally a allowed to include in my blog posts?

  21. klm promo code说道:

    I truly appreciate this blog post.Really looking forward to read more. Keep writing.

  22. ebay promo code说道:

    Wow! This could be one particular of the most helpful blogs We have ever arrive across on this subject. Basically Fantastic. I am also a specialist in this topic so I can understand your hard work.

  23. Very good post! We are linking to this particularly great article on our website. Keep up the good writing.

  24. junk removala说道:

    Major thanks for the blog.Really looking forward to read more. Want more.

  25. thuc an cho meo说道:

    Very good article.Much thanks again. Fantastic.

  26. Not many will think of Davis as the best of my possibilities, beyond my own shortcomings and biases.

  27. Thank you ever so for you blog article.Much thanks again. Want more.

  28. This website online is mostly a stroll-via for all of the info you wished about this and didn at know who to ask. Glimpse right here, and also you all undoubtedly uncover it.

  29. Wow, that as what I was looking for, what a stuff! present here at this website, thanks admin of this site.

  30. you ave got an you ave got an important blog here! would you wish to make some invite posts on my weblog?

  31. beauty说道:

    Only wanna comment that you have a very decent website , I like the style and design it actually stands out.

  32. This is very interesting, You are a very skilled blogger. I ave joined your rss feed and look forward to seeking more of your fantastic post. Also, I ave shared your website in my social networks!

  33. Im grateful for the blog post.Really looking forward to read more. Really Cool.

  34. Really enjoyed this blog post.Thanks Again. Really Cool.

  35. Tejido a crochet说道:

    Major thanks for the blog.Much thanks again. Awesome.

  36. Tejidos说道:

    Some truly wonderful content on this internet site , thanks for contribution.

  37. my page说道:

    Would you be considering exchanging links?

  38. red shoes说道:

    Wow, great blog article.Much thanks again. Much obliged.

  39. value说道:

    to start my own blog in the near future. Anyway, if you have any suggestions or techniques for new blog owners please

  40. we came across a cool site that you simply might delight in. Take a look should you want

  41. School admission说道:

    Terrific work! This is the type of information that should be shared around the web. Shame on the search engines for not positioning this post higher! Come on over and visit my web site. Thanks =)

  42. later than having my breakfast coming again to

  43. This is what good writing is made of; interesting, engaging, intelligent and well-written content. This is exactly what I see in your article. Thank you.

  44. Thanks for sharing this great piece. Very inspiring! (as always, btw)

  45. KENJI说道:

    Im thankful for the blog article.Much thanks again.

  46. Is not it superb any time you get a fantastic submit? Value the admission you given.. Fantastic opinions you might have here.. Truly appreciate the blog you provided..

  47. Perfectly indited content material , Really enjoyed reading.

  48. Lend money Payday Nice blog post Thank You!

  49. tm objection说道:

    We all talk just a little about what you should speak about when is shows correspondence to because Perhaps this has much more than one meaning.

  50. the check this site out in a single-elimination bracket and let people vote for their favorites.

  51. You have made some really good points there. I looked on the net for more info about the issue and found most individuals will go along with your views on this site.

  52. Just a smiling visitant here to share the love (:, btw great style. Individuals may form communities, but it is institutions alone that can create a nation. by Benjamin Disraeli.

  53. cris urzua说道:

    Really appreciate you sharing this blog post.Really thank you! Really Great.

  54. tips de ventas说道:

    Very good aftie i am a blogger as well. and i can see that you are a nice blogger as well,

  55. Wow, amazing blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your web site is fantastic, as well as the content!

  56. Thanks for sharing, this is a fantastic article. Awesome.

  57. Open Heavens说道:

    You made some respectable factors there. I seemed on the web for the problem and found most individuals will go together with with your website.

  58. My brother recommended I might like this web site. He was entirely right. This post truly made my day. You can not imagine simply how much time I had spent for this information! Thanks!

  59. You made some good points there. I looked on the internet for the subject and found most individuals will consent with your website.

  60. You ave got a great blog there keep it up. I all be watching out for most posts.

  61. Im grateful for the article post.Really looking forward to read more. Will read on…

  62. useful info with us. Please stay us up to date

  63. This is my first time go to see at here and i am in fact impressed to read everthing at single place.

  64. Billy graham说道:

    Really appreciate you sharing this blog.

  65. view说道:

    I truly appreciate this blog. Much obliged.

  66. free guest post说道:

    so much and I am looking forward to touch you. Will you please drop me a mail? my homepage candy crush saga cheats

  67. Im thankful for the blog post. Really Great.

  68. sale of fences说道:

    You, my friend, ROCK! I found just the info I already searched all over the place and simply couldn at locate it. What a perfect web site.

  69. over here说道:

    Wholesale NFL T Shirts Okay, nice to see a useful blogs. Thanks for the information.

  70. go to说道:

    Really informative blog.Much thanks again. Fantastic.

  71. check out说道:

    Very nice post and right to the point. I am not sure if this is actually the best place to ask but do you guys have any thoughts on where to get some professional writers? Thank you

  72. Very informative article.Much thanks again. Really Great.

  73. Well I definitely enjoyed studying it. This subject offered by you is very effective for correct planning.

  74. when it comes when it comes to tv fashion shows, i really love Project Runway because it shows some new talents in the fashion industry**

  75. I seriously delight in your posts. Many thanks

  76. Really interesting info! Perfect exactly what I was trying to find!

  77. pretty valuable material, overall I think this is worthy of a bookmark, thanks

  78. ugg boots uk ugg boots cheap ugg outlet sale genuine ugg boots ugg boots uk ugg australia pas cher cheap ugg boots sale ugg outlet

  79. have a look at说道:

    You made some clear points there. I did a search on the topic and found most guys will approve with your site.

  80. Major thanks for the article.Really looking forward to read more. Want more.

  81. bo dam说道:

    You could certainly see your expertise in the work you write. The world hopes for more passionate writers like you who aren at afraid to mention how they believe. All the time follow your heart.

  82. Marvelous, what a weblog it is! This weblog presents valuable information to us, keep it up.

  83. Merely a smiling visitant here to share the love (:, btw outstanding layout. Competition is a painful thing, but it produces great results. by Jerry Flint.

  84. Way cool! Some extremely valid points! I appreciate you writing this article and the rest of the website is really good.

  85. Woh I like Woh I like your articles , saved to fav!.

  86. You acquired a really useful blog page I have been here reading for about an hour. I am a newbie and your good results is extremely much an inspiration for me.

  87. check here说道:

    We are a bunch of volunteers and starting a brand new scheme in our community.

  88. go there说道:

    make men and women think. Also, thank you for permitting me to comment!

  89. I think you have remarked some very interesting details , appreciate it for the post.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>