`

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

阅读更多
开发者在写HTML代码的时候一定要仔细,并熟练掌握HTML规则,因为一不留神则可能出现一些微小的错误,但有可能会导致严重的后果。

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

错误1:嵌套错误



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

错误使用:
Html代码
  1. <div><p><a>This is my Smashing text</p></div></a>  

正确使用:
Html代码
  1. <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,其实这样的用法是错误的。

错误的使用:
Html代码
  1. <table><form><tr><td>..... </td></tr></form></table>  

正确的使用:
Html代码
  1. <form><table><tr>.... </tr></table></form>  


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



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

常见的块元素(Block Elements):
Html代码
  1. <div><h1><h6><p><ul><ol><dl><table><blockquote><form>   


常见的内联元素(Inline Elements):
Html代码
  1. <span><a><strong><em><img /><abbr><acronym>   


错误5:省略ALT属性

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

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

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

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

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

错误7:不必要的换行符

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

错误的用法:
Html代码
  1. This is my first paragraph  
  2. &lt;br /&gt;  
  3. &lt;br /&gt;  
  4. &lt;br /&gt;  
  5.   
  6. This will be my test description  

正确用法:
Html代码
  1. <p>This is my first paragraph</p>  
  2. <p>This will be my test description</p>  


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



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

错误9:内联样式

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

错误用法:
Html代码
  1. <p style="font-size: 14px;font-weight: bol">  

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

错误10:边框

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

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

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

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

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

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

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


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



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

相关推荐

    WEB前端开发常见问题

    本文将基于标题"WEB前端开发常见问题"以及标签"源码"和"工具",探讨一些常见的前端开发问题,并提供相应的解决策略。 1. **源码管理**: - **Git冲突**:在团队协作中,Git冲突是常见的问题。学习如何正确合并冲突...

    史上最全的前端开发工具

    本资源“史上最全的前端开发工具”显然是一个综合性的资料库,包含了多版本、多语言的前端API和教程,这对于前端开发者来说是一份极其宝贵的资源。下面将详细介绍其中可能涵盖的一些关键知识点: 1. HTML(超文本...

    常用php开发手册和前端开发手册

    【标题】:“常用php开发手册和前端开发手册”包含了丰富的编程资源,旨在为开发者提供便捷的离线参考。这些手册涵盖了PHP和前端开发的核心概念、语法以及最佳实践,是提升编程技能的重要工具。 【描述】:这个...

    myeclipse前端开发插件spket

    在前端开发领域,MyEclipse也有其独特的扩展插件,比如本文将重点讨论的"myeclipse前端开发插件Spket"。 Spket是一款专门针对JavaScript、HTML和CSS开发的插件,它为MyEclipse提供了一整套强大的前端开发工具集。这...

    阶段一:前端开发基础资料.zip

    在本压缩包“阶段一:前端开发基础资料.zip”中,包含了学习前端开发基础知识的珍贵资源,特别适合初学者入门。这个资料集可能涵盖了多个标签所代表的主题,如“黑马”可能指的是黑马程序员这一知名教育机构的教学...

    前端开发笔试题汇总

    在前端开发领域,笔试题是评估开发者技能的重要方式,...总的来说,前端开发的笔试题是对开发者全面能力的检验,涵盖从基础到高级的多个层面,只有扎实的理论基础和丰富的实践经验,才能在竞争激烈的笔试中脱颖而出。

    前端开发手册.pdf

    《前端开发手册》是一本面向Web前端开发者的实用指南,它集合了前端开发的基础知识和关键要点,覆盖了HTML、CSS、JavaScript等前端技术的核心内容。手册的设计初衷是为开发者提供一个查询和学习的便捷工具,而不是...

    WEB前端开发工程师面试题

    在IT行业中,Web前端开发是构建互联网应用的重要组成部分,它主要负责用户可见并交互的网站部分。本资源“WEB前端开发工程师面试题”包含了来自知名公司如百度、腾讯、海豚等的面试题目,旨在帮助求职者准备这些公司...

    1+x 证书 Web 前端开发初级实操考试.zip

    "1+x 证书 Web 前端开发初级实操考试"是一个针对初学者设计的实践考核,旨在检验学习者在Web前端开发领域的基础技能和理解程度。这个考核可能包括HTML、CSS、JavaScript等核心技术的运用,以及对网页布局、响应式...

    Web前端开发笔试题.pdf

    在提供的文件内容中,包含了Web前端开发相关的知识点考察,这些问题主要是关于HTML、CSS和JavaScript的常用语法和属性,以及它们在网页开发中的应用。正确理解和应用这些知识点,对通过Web前端开发笔试题非常重要。...

    Web前端开发经典面试题(附参考答案)

    ### Web前端开发经典面试题详解 #### CSS选择器的理解 1. **问题**: 下面有关CSS选择器的说法错误的是? - **选项**: - A. `.intro`---选择class="intro"的所有元素。 - B. `#firstname`---选择id="firstname...

    web前端开发各种规范

    以上这些规范是web前端开发中常见的实践,它们构成了一个良好的开发流程,帮助开发者创建出高质量、易维护的前端应用。通过持续学习和实践,开发者可以不断提升自己的技术水平,更好地适应快速发展的web技术环境。

    广东省职业技能等级认定证书试卷样题计算机程序员-Web前端开发(四级)A-01.docx

    九、Web前端开发常见问题 * 了解Web前端开发中常见的问题和解决方案 * 掌握Web前端开发中常见的错误和调试方法 * 熟悉Web前端开发中常见的优化和改进建议 十、Web前端开发职业发展 * 了解Web前端开发职业的发展...

    前端工程师必备前端开发资源必备.rar

    在构建一个成功的多媒体网站,如“多拉斯自媒体网站”时,前端开发扮演着至关重要的角色。前端工程师是连接设计与后端技术的关键人物,他们负责将网站的视觉设计转化为用户可以交互的实际网页。这个名为“前端工程师...

    定位为非前端开发同学,科普前端.zip

    前端开发是计算机科学领域的一个重要分支,主要负责创建和维护互联网上的用户界面。这个领域对非前端开发人员可能相对陌生,但了解其基本概念和技术对于跨领域的协作至关重要。本篇文章将深入浅出地科普前端开发的...

    web前端开发程序规范

    在 Web 前端开发中,命名规范是非常重要的。好的命名规范可以提高代码的可读性和维护性。本规范中,我们将介绍几种常用的命名规范。 1.1、camelCase(小驼峰式命名法) camelCase 是一种常用的命名规范,驼峰式...

    前端开发API

    在IT行业中,前端开发是构建Web应用程序不可或缺的一部分,它涉及到用户与网站交互的直接界面。本文将深入探讨前端开发API,HTML,CSS以及HTTP这四个关键知识点,旨在为开发者提供全面的理解和实用指导。 首先,...

    前端开源库-htmlcs

    在前端开发过程中,代码风格的统一至关重要,它有助于团队成员之间的协作,使得代码更易于理解和审查。htmlcs通过检查HTML文档中的标签使用、属性顺序、缩进、空格、注释等细节,确保开发者遵循预设的编码标准,如...

    软件工程中的前端开发与交互设计.pptx

    ### 软件工程中的前端开发与交互设计 #### 第一章:软件工程中的前端开发与交互设计 **1.1 前端开发与交互设计简介** 前端开发与交互设计是软件工程中的两个核心组成部分,它们共同作用于提高产品的用户体验。...

Global site tag (gtag.js) - Google Analytics