前端开发中最常见的12个HTML标签错误(其实也不一定就错,只是这样写不太好)
开发者在写HTML代码的时候一定要仔细,并熟练掌握HTML规则,因为一不留神则可能出现一些微小的错误,但有可能会导致严重的后果。
http://www.iteye.com/news/26074
本文列举了一些在HTML中常见的错误,并且给出了如何避免错误的方法。相信这些方法会对前端开发者有一些帮助。
错误1:嵌套错误
正确使用HTML tag的结束标记非常重要,HTML tag的结束标记的顺序要和开始标记一致,而新手往往会忽视这点。如果顺序不对,系统会出现验证错误并且得不到预期的结果。因此,要注意避免这样的错误。
错误使用:
正确使用:
错误2:列表使用不当
在HTML中经常会用到排序列表(OL)和非排序列表(UL),它们不仅让条目显示更加灵活,还可以实现许多其他的功能。正确使用列表tag可以更方便的显示信息。但要注意避免在代码中使用换行符。搜索引擎会识别列表tag,因此要使用规范的HTML tag,这样可以减小黑客攻击的概率。
错误3:form tag使用不当
很多人都分不清form和table元素的区别,不知道应该先定义哪个,大多数人先定义table,其实这样的用法是错误的。
错误的使用:
正确的使用:
错误4:在内联元素(Inline Elements)中使用块元素(Block Elements)
HTML中的元素既可以在内联(Inline)区域中显示,也可以在块(Block)区域显示。默认情况下,每个Tag都是在内联元素或块元素中创建的。块元素包括文档中的段落和div,而内联元素需要放置在块区域内。因此,使用内联元素时,要注意将它们包含在块元素中使用。
常见的块元素(Block Elements):
常见的内联元素(Inline Elements):
错误5:省略ALT属性
网页中的图片显示,常常用到ALT属性。详细定义ALT属性可以更好的显示图片,也可以让网速慢或使用屏幕阅读器的用户快速了解图片内容。不要做出如下定义:alt="image" ,如果图片只是装饰品可以使用alt=" " 。
错误使用:
正确使用:
错误6:粗体和斜体使用错误
尽管<b>和<i>是常用的粗体和斜体标记,但实际上它们属于语义上的表象标签。因此,最好还是使用CSS格式中的多种样式。比如在文档中需要突出的位置可以使用<strong>和<em>。显示的效果和<b>、<i>相同,但是看起来更漂亮。
错误7:不必要的换行符
<br/>标记用在段落内部的换行,在下一行中继续该段落。而<p>则是段落标记。但许多人经常在元素之间使用换行符,这种用法是错误的。
错误的用法:
正确用法:
错误8:strik标签的错误使用
以前的<strike>和<s>常用来修订网页文本。但是现在它们更多的被当做弃用标记。已经出现新的tag代替它们,比如<ins>和<del>,分别用于显示文档中插入和删除的内容。
错误9:内联样式
许多人都抱怨内联样式不好用,原因是CSS和语义上的HTML都是关于样式和结构的内容,因此在HTML中直接使用样式并不是最佳选择。
错误用法:
正确的方法是使用样式表。
错误10:边框
要知道,边框属性只是表象显示。因此,它肯定会由于CSS发生改变。如果默认边框被打乱了,请不要觉得奇怪。
错误用法:
正确的方式是通过样式表来定义。
错误11:忽略标题标记<h>
标题标记用来划分文档结构和分隔区域,通常<h1> 和<h6>都是这样用的。标题标记根据需要放在合适的位置。最好的用法是根据1-6的规范格式来使用。
错误用法:
正确用法:
错误12:使用<marquee>和<blink>
可以这样说,<marquee>和<blink>唯一的作用就是让网页更丑。如果想让网页中的某些部分更醒目和引人注意,选择其他的解决方法也不要使用文本闪光的方法,因为这种方式真的很不受欢迎。
英文原文:12 Evil HTML Tag Mistakes You Really Should Avoid
http://www.iteye.com/news/26074
本文列举了一些在HTML中常见的错误,并且给出了如何避免错误的方法。相信这些方法会对前端开发者有一些帮助。
错误1:嵌套错误
![](http://dl.iteye.com/upload/attachment/0073/9906/11f32c70-32fc-3ee7-8c7f-12903fa88f6f.jpg)
正确使用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:列表使用不当
![](http://dl.iteye.com/upload/attachment/0073/9908/15fc3fee-94d6-3dee-ada7-d108ff6d8d44.jpg)
在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)
![](http://dl.iteye.com/upload/attachment/0073/9910/f7a363ca-732f-390d-9d12-f5a97d49d6d1.jpg)
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
- <br />
- <br />
- <br />
- This will be my test description
正确用法:
- <p>This is my first paragraph</p>
- <p>This will be my test description</p>
错误8:strik标签的错误使用
![](http://dl.iteye.com/upload/attachment/0073/9912/5547bfa3-206f-3565-9bb0-14e6a72aebec.jpg)
以前的<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>
![](http://dl.iteye.com/upload/attachment/0073/9914/a8dd4d1d-15dd-3f11-93ec-d4249bb26539.jpg)
可以这样说,<marquee>和<blink>唯一的作用就是让网页更丑。如果想让网页中的某些部分更醒目和引人注意,选择其他的解决方法也不要使用文本闪光的方法,因为这种方式真的很不受欢迎。
英文原文:12 Evil HTML Tag Mistakes You Really Should Avoid
内联元素中不能使用块元素的原因是“默认样式有可能造成混乱”,解释在这里:http://www.w3.org/html/wg/drafts/html/master/introduction.html#restrictions-on-content-models-and-on-attribute-values
但这个不是绝对的,起码在<a>中就可以使用块元素。
但这个不是绝对的,起码在<a>中就可以使用块元素。