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

13顶
0踩

2012-09-29 11:09 by 见习记者 csdn_0000 评论(13) 有15332人浏览

HTML tag web CSS

开发者在写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

查看图片附件

分享到：

13
顶

0
踩

评论共 13 条请登录后发表评论

13 楼 dohkoos 2013-03-10 21:08

form嵌套在table中时在firefox下会取不到值，导致这个问题的原因不了解。

内联元素中不能使用块元素的原因是“默认样式有可能造成混乱”，解释在这里：http://www.w3.org/html/wg/drafts/html/master/introduction.html#restrictions-on-content-models-and-on-attribute-values

但这个不是绝对的，起码在<a>中就可以使用块元素。

12 楼 jAmEs_ 2013-01-09 16:05

11 楼 mfkvfn 2012-10-08 09:30

有些太严格。
第一个现在一般用专门的开发工具写，如果有错误会提示出来的。一般不用太注意。
第三个，一般不会有人写成那种错误的用法吧？从来没见过这种超低级的错误。
第四个，内联元素为什么一定要在块元素内。难道<a><div>xxx</div></a>、<a><h1>标题</h1></a>这样的不可以吗？这是很常用也很实用的用法呀。
第七个。br有它的用途的，也不一定不要用。像p或h1~h6这种虽然可以达到换行的目的，但是它会在换行的前后加上行间距，也许并不是用户想要的，用户还得写样式减少行间距，还不如直接br
第九个，内联样式由于优先级较高，可以用来强制某个区域某样式不受css影响，而且写些来较方便，另外style样式性能据说比css要好。

总体来说总结得不错。但是这些不好的都不是“错误”，你所谓地好的也只应该是“推荐”

10 楼 haplone 2012-10-07 18:38

mark，很有价值

9 楼 Navee 2012-10-06 12:10

归纳的不错!

8 楼 ssy341 2012-10-04 21:39

确实是平时犯错误，但是有些没说清楚为什么是错的，比如form和table创建的先后顺序，这点有点不明白，希望解释一下

7 楼 akon405 2012-09-30 23:56

浅显易懂，归纳的不错

6 楼 tpei520 2012-09-30 19:40

前人开路，后人乘凉，谢谢分享。

5 楼 guozhen_168 2012-09-30 01:04

一些简单的问题，但不自己，也很容易错这这些地方~！

4 楼 freezingsky 2012-09-29 22:40

UI前端，让我觉得压力很大。

3 楼 thc1987 2012-09-29 18:01

不错的文章

2 楼 white_crucifix 2012-09-29 11:25

“可以这样说，<marquee>和<blink>唯一的作用就是让网页更丑”

哈哈！

1 楼 dianthus 2012-09-29 11:16

谢谢分享。

发表评论

您还没有登录,请您登录后再发表评论

13顶0踩