前端开发中最常见的12个HTML标签错误

标签: 前端 开发 常见 | 发表时间:2012-09-29 11:09 | 作者:
出处:http://www.iteye.com
开发者在写HTML代码的时候一定要仔细,并熟练掌握HTML规则,因为一不留神则可能出现一些微小的错误,但有可能会导致严重的后果。

本文列举了一些在HTML中常见的错误,并且给出了如何避免错误的方法。相信这些方法会对前端开发者有一些帮助。

错误1:嵌套错误



正确使用HTML tag的结束标记非常重要,HTML tag的结束标记的顺序要和开始标记一致,而新手往往会忽视这点。如果顺序不对,系统会出现验证错误并且得不到预期的结果。因此,要注意避免这样的错误。

错误使用:
<div><p><a>This is my Smashing text</p></div></a>

正确使用:
<div><p><a>This is my Smashing text</a></p></div>


错误2:列表使用不当



在HTML中经常会用到排序列表(OL)和非排序列表(UL),它们不仅让条目显示更加灵活,还可以实现许多其他的功能。正确使用列表tag可以更方便的显示信息。但要注意避免在代码中使用换行符。搜索引擎会识别列表tag,因此要使用规范的HTML tag,这样可以减小黑客攻击的概率。

错误3:form tag使用不当

很多人都分不清form和table元素的区别,不知道应该先定义哪个,大多数人先定义table,其实这样的用法是错误的。

错误的使用:
<table><form><tr><td>..... </td></tr></form></table>

正确的使用:
<form><table><tr>.... </tr></table></form>


错误4:在内联元素(Inline Elements)中使用块元素(Block Elements)



HTML中的元素既可以在内联(Inline)区域中显示,也可以在块(Block)区域显示。默认情况下,每个Tag都是在内联元素或块元素中创建的。块元素包括文档中的段落和div,而内联元素需要放置在块区域内。因此,使用内联元素时,要注意将它们包含在块元素中使用。

常见的块元素(Block Elements):
<div>, <h1>…<h6>, <p>, <ul>, <ol>, <dl>, <table>, <blockquote>, <form> 


常见的内联元素(Inline Elements):
<span>, <a>, <strong>, <em>, <img />, <abbr>, <acronym> 


错误5:省略ALT属性

网页中的图片显示,常常用到ALT属性。详细定义ALT属性可以更好的显示图片,也可以让网速慢或使用屏幕阅读器的用户快速了解图片内容。不要做出如下定义:alt="image" ,如果图片只是装饰品可以使用alt=" " 。

错误使用:
<img src="smiley.gif" alt="" />

正确使用:
<img src="smiley.gif" alt="Smiley face" width="42" height="42" />

错误6:粗体和斜体使用错误

尽管<b>和<i>是常用的粗体和斜体标记,但实际上它们属于语义上的表象标签。因此,最好还是使用CSS格式中的多种样式。比如在文档中需要突出的位置可以使用<strong>和<em>。显示的效果和<b>、<i>相同,但是看起来更漂亮。

错误7:不必要的换行符

<br/>标记用在段落内部的换行,在下一行中继续该段落。而<p>则是段落标记。但许多人经常在元素之间使用换行符,这种用法是错误的。

错误的用法:
This is my first paragraph
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;

This will be my test description

正确用法:
<p>This is my first paragraph</p>
<p>This will be my test description</p>


错误8:strik标签的错误使用



以前的<strike>和<s>常用来修订网页文本。但是现在它们更多的被当做弃用标记。已经出现新的tag代替它们,比如<ins>和<del>,分别用于显示文档中插入和删除的内容。

错误9:内联样式

许多人都抱怨内联样式不好用,原因是CSS和语义上的HTML都是关于样式和结构的内容,因此在HTML中直接使用样式并不是最佳选择。

错误用法:
<p style="font-size: 14px;font-weight: bol">

正确的方法是使用样式表。

错误10:边框

要知道,边框属性只是表象显示。因此,它肯定会由于CSS发生改变。如果默认边框被打乱了,请不要觉得奇怪。

错误用法:
<img src="smiley.gif" alt="" border="0" />

正确的方式是通过样式表来定义。

错误11:忽略标题标记<h>

标题标记用来划分文档结构和分隔区域,通常<h1> 和<h6>都是这样用的。标题标记根据需要放在合适的位置。最好的用法是根据1-6的规范格式来使用。

错误用法:
<strong>This is my Smashing Heading</strong><p>This is my xyz description.</p>

正确用法:
<h1>This is my Smashing Heading</h1><p>This is my xyz description.</p>


错误12:使用<marquee>和<blink>



可以这样说,<marquee>和<blink>唯一的作用就是让网页更丑。如果想让网页中的某些部分更醒目和引人注意,选择其他的解决方法也不要使用文本闪光的方法,因为这种方式真的很不受欢迎。

英文原文: 12 Evil HTML Tag Mistakes You Really Should Avoid

感谢 csdn_0000 投递这篇资讯

已有 3 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [前端 开发 常见] 推荐:

前端开发中最常见的12个HTML标签错误

- - ITeye资讯频道
开发者在写HTML代码的时候一定要仔细,并熟练掌握HTML规则,因为一不留神则可能出现一些微小的错误,但有可能会导致严重的后果. 本文列举了一些在HTML中常见的错误,并且给出了如何避免错误的方法. 相信这些方法会对前端开发者有一些帮助. 正确使用HTML tag的结束标记非常重要,HTML tag的结束标记的顺序要和开始标记一致,而新手往往会忽视这点.

前端开发大众手册

- Ran - FeedzShare
来自: xilo's blog - FeedzShare  . 发布时间:2009年03月09日,  已有 3 人推荐. 一直觉得前端开发缺个手册,这是个体力活. 今天闲来无事,把一些工具(online和client的)、常用网址、以及经验总结等罗列出来和大家分享下. 这个标题起地大了点,肯定会有很多地方没列到,包括类目的分法也可能考虑不周,所以还请大家积极补充指正,可以直接留言,也可以发邮件给我.

前端开发 – 我们的职业

- aoao - 崔凯,前端开发
写给“正在纠结”、“准备纠结”的前端开发们,希望对大家求职有所帮助:. 很多人提出薪资要求的时候,会说:“现在房租是多少多少、吃饭要多少多少、泡妞会多少多少”,所以,至少拿多少多少的工资,才满足自己的需求. 如果说这些话的人,已经是公司的老员工,和老板私人关系很不错,那这么讲还凑合. 但如果是职场新人,首次过来应聘,谈这些就很不在点上.

CssGaga:前端开发和部署利器

- Anew - 前端观察
涛哥@ytzong 开发的cssgaga用了好久,确实是个好工具,早想把它推荐给大家用了. 今天就做个简介,涛哥网站有详细的介绍,这里不多说. (工作量)一般都能减少20%以上吧,没怎么统计. 一个极端的例子:某人使用了CssGaga后从原来早9点到晚11点下班,午休都在做到现在晚5点半下班,中午还能看一部完整电影 (via twitter).

前端开发流程自动化

- Lee - 《程序员》杂志官网
如今前端工程师需要维护的代码变得极为庞大和复杂,代码维护、打包、发布等流程上浪费的时间精力也越来越多. 精简流程、提高效率,是每一个前端团队都会遇到的问题. 大部分前端团队使用Ant脚本进行这一系列流程的自动操作. Ant主要用于代码构建、打包、部署的自动化操作. 早先主要用于Java开发,但由于它具有接口开放、便于配置、Java跨平台等特性,在前端流程自动化方面同样可以发挥强大的功用.

前端开发中的MCRV模式

- 亚威 - 百度泛用户体验
MCRV设计模式 Javascript MVC Web开发标准. 1.Web前端开发面临的问题. 早期的Web页开发(Web前端开发)中,Web页面较为简单,大多数Web页面的功能仅限于用HTML和简单样式展示静态信息,或向服务器发送数据,Web页面与用户的交互较少. 随着Web的发展,DHTML、CSS、javascript等技术出现,Web页不再仅限于展示静态信息,动态、交互成为Web页的主流功能之一.

关于前端开发这份工作

- paaboo - 小麦的自习教室
一直想写点关于前端开发职位本身的文字,但写了好几次都没发. 最近又在持续的招聘,对应聘和招聘有些感想,零散的写多少算多少吧. 关于“前端开发工程师”这个职位. 当一个词开始泛滥,就会被人忘记它的本意. 首先,它是“开发工程师”,也就是程序员. 所以,程序员应该具备的素质,比如逻辑能力,写代码的水平等等,算是它最最基础的要求.

前端开发大众手册

- Ease - 膘叔
很明显,这段内容是ctrl+c,ctrl+v而来的,做备份和资料查询用,挺好的. 原文来自:http://www.chencheng.org/blog/2008/10/25/f2e-manual/#f2e-manual-s1. 另外还搞了个Firefox插件《前端开发工具集》,把资源整合到一个菜单下,方便查询.