当前位置: 首页 > 互联网, 翻译 > 正文

20个需要遵循的HTML最佳实践(二)

接一:20个需要遵循的HTML最佳实践(一)

11.使用无序列表(<ul>)做导航栏(菜单栏)

导航是网站设计很重要的环节,<ul>元素与CSS的结合会让你的导航菜单既有意义又非常美观,毕竟,导航菜单本身也是一个链接列表。

当然,一般来说,无序列表已经是导航菜单的公认标记。

无序列表代码示例:

[sourcecode language=”plain”]
<ul id="main_nav">
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
[/sourcecode]

下面的CSS能上面的列表显示成一个水平导航栏:

[sourcecode language=”plain”]#main_nav { position:absolute; right:30px; top:40px;}
#main_nav li { float:left; margin-left:2px; }
#main_nav li a{ font-size:16px; color:#fff; text-decoration:none; padding:8px 15px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;}
#main_nav li a.active,
#main_nav li a:hover{ background-color:#0b86cb; }[/sourcecode]

大家可以去试试结果:

12.闭标签完整

关闭所有的标签是W3C规范之一。虽然一些浏览器还可能正确渲染你的网页(宽松模式),但是没有关闭的标签对标准来说是无效的。

13.标记使用小写字母

保持标记语言使用小写字母是工业标准实践的结果。使用大写字母的标记也能工作,而且也并不影响网页的展现,但是这样的代码并不易于阅读。

坏的实践:

[sourcecode language=”plain”]<DIV>
<IMG SRC="images/sample.jpg" alt="sample"/>
<A HREF="#" TITLE="TEST">test</A>
<P>some sample text</P>
</DIV>[/sourcecode]

最佳实践:

[sourcecode language=”plain”]
<div id="test">
<img src="images/sample.jpg" alt="sample" />
<a href="#" title="test">test</a>
<p>some sample text </p>
</div>
[/sourcecode]

14.图片标记时使用alt属性

在插入<img>元素时,要为其加上一个有意义的alt属性,这样能让代码编写更有效,规范。

坏的实践:

[sourcecode language=”plain”]
<img id="logo" src="images/bgr_logo.png"/>
<!– has an alt attribute, which will validate, but alt value is meaningless –>
<img id="logo" src="images/bgr_logo.png" alt="brg_logo.png" />
[/sourcecode]

最佳实践:

[sourcecode language=”plain”]
<img id="logo" src="images/bgr_logo.png" alt="byhard Logo" />
[/sourcecode]

15.为链接加上Title属性(必要时)

正确使用锚元素上的title属性能增加链接的被访问性。title元素能增加链接标签的含义,因此理解它也非常重要。

坏的实践:

[sourcecode language=”plain”]
<!– Redundant title attribute –>
<a href="http://blog.com/all-articles" title="Click Here">Click here.</a>
[/sourcecode]

当访问者看到上面这个链接时,看到的是两次相同的文本。更坏的是,这个文本没有一点关于要链接访问页面的信息。

如果title仅仅是链接的文字,并且文字不能描述所链接的页面时,那么就不要使用它的title属性。

最佳实践:

[sourcecode language=”plain”]
<a href="http://www.byhard.com/all-articles" title="A list of all articles.">Click here.</a>
[/sourcecode]

16.在网页表单中使用FieldSet和Label标签

<label>元素用于指示输入的字段,区分输入字段的逻辑块用<fieldset>标签。用<legend>标签给<fieldset>命名。所有这些会让用户更加容易理解表单的含义,并提高代码的质量。

举个例子:

[sourcecode language=”plain”]
<fieldset>
<legend>Personal Details</legend>
<label for="name">name</label><input type="text" id="name" name="name" />
<label for="email">email</label><input type="text" id="email" name="email" />
<label for="subject">subject</label><input type="text" id="subject" name="subject" />
<label for="message" >message</label><textarea rows="10" cols="20" id="message" name="message" ></textarea>
</fieldset>
[/sourcecode]

17.使用模块化IE修复

对IE来说,如果你的网页有问题,可以使用条件注释。

IE 7 示例:

[sourcecode language=”plain”]
<!–[if IE 7]>
<link rel="stylesheet" href="css/ie-7.css" media="all">
<![endif]–>
[/sourcecode]

IE 6 示例:

[sourcecode language=”plain”]
<!–[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]–>
[/sourcecode]

当然,当老的IE版本不再支持时,要尽量让你的修复模块能通过未来的检验,只需要在某一处更新你的站点(比如:删除对ie-6.css样式表的引用)。

18.代码验证

代码验证不应该是代码好坏的最终价值评判。因为能通过验证的代码并不自然意味着这是好代码;相反不能完全通过验证的并不一定是差代码(如果你不信,去自动检测下Google或雅虎的网站)。

不过像W3C之类提供的免费代码验证是一个很有用的自动验证调试工具,能帮你识别网页生成时的错误。

当你写HTML网页时,要养成经常验证的习惯,这会让你远离那些很难定位(或需要重写)的冗长代码。

19. 编写格式化一致的代码

代码是否整洁规范则体现着设计者的职业素养,就好比你会时时考虑他人如何在你的代码上继续工作。

一开始就要写出整齐的代码,这会让你的代码更有可读性。

20.避免过多的注释

给代码写注释是为了让代码更加容易理解,因此合理的代码注释是一件非常好的事情,比如:在用PHP,JAVA或是C#编程时等等。

但是,标记语言往往是不言自明的,而且在HTML/XHTML中标注每行代码没有任何意义。如果发现你为HTML注释很多时,就应当从语义和命名约定上重新审查你的代码。

完。

翻译文章,如有异议,见原文

本文固定链接: http://www.byhard.com/?p=921 | 海纳百川

该日志由 byhard 于2013年03月27日发表在 互联网, 翻译 分类下,
原创文章转载请注明: 20个需要遵循的HTML最佳实践(二) | 海纳百川
关键字:

20个需要遵循的HTML最佳实践(二):目前有17 条留言

  1. 虽是一些基础,但还是挺重要的

    2013-03-27 14:24
    • byhard:

      嗯,当们学习东本的时候,往往还是会不时回到基础上来,基础就是基调,就是我们的指引方向,可能所有的扩展都是以基础而向外发展的。

      2013-03-27 16:17
  2. 基础不牢,地动山摇!

    2013-03-27 14:42
    • byhard:

      你这是回复楼上的吧。谢谢你的访问。

      2013-03-27 16:16
  3. 学习了!

    2013-03-27 17:52
    • byhard:

      欢迎光临啊,谢谢支持。

      2013-03-28 08:22
  4. 小白要怎么学啊!

    2013-03-27 20:35
    • byhard:

      选好书,慢慢学,慢慢练,都是这么过来的。

      2013-03-28 08:23
  5. 文章不错。

    2013-03-28 15:05
    • byhard:

      谢谢支持。加油啦。

      2013-03-28 20:47
  6. 挺有意思。顶下。

    2013-03-28 15:37
    • byhard:

      不仅要有意思,还要有知识,加油。

      2013-03-28 20:48
  7. 板凳
    淮海巷:

    上大学那会,心血来潮,看了一段时间代码,现在早已还给岁月了。支持下博主

    2013-03-28 19:54
    • byhard:

      不在其位,不学其术啊,你肯定学习其它东西啦。谢谢支持,欢迎再来。

      2013-03-28 20:52
  8. 网站好像有点乱码了,博主你查看一下,用搜狗的!

    2013-04-11 14:55
    • byhard:

      那些乱码是代码部分吗?我看看其它浏览器试试。

      2013-04-11 15:04