- 浏览: 833705 次
文章分类
- 全部博客 (365)
- java (124)
- spring mvc (21)
- spring (22)
- struts2 (6)
- jquery (27)
- javascript (24)
- mybatis/ibatis (8)
- hibernate (7)
- compass (11)
- lucene (26)
- flex (0)
- actionscript (0)
- webservice (8)
- rabbitMQ/Socket (15)
- jsp/freemaker (5)
- 数据库 (27)
- 应用服务器 (21)
- Hadoop (1)
- PowerDesigner (3)
- EJB (0)
- JPA (0)
- PHP (2)
- C# (0)
- .NET (0)
- html (2)
- xml (5)
- android (7)
- flume (1)
- zookeeper (0)
- 证书加密 (2)
- maven (1)
- redis (2)
- cas (11)
最新评论
-
zuxianghuang:
通过pom上传报错 Artifact upload faile ...
nexus上传了jar包.通过maven引用当前jar,不能取得jar的依赖 -
流年末年:
百度网盘的挂了吧???
SSO单点登录系列3:cas-server端配置认证方式实践(数据源+自定义java类认证) -
953434367:
UfgovDBUtil 是什么类
Java发HTTP POST请求(内容为xml格式) -
smilease:
帮大忙了,非常感谢
freemaker自动生成源代码 -
syd505:
十分感谢作者无私的分享,仔细阅读后很多地方得以解惑。
Nginx 反向代理、负载均衡、页面缓存、URL重写及读写分离详解
开发者在写HTML代码的时候一定要仔细,并熟练掌握HTML规则,因为一不留神则可能出现一些微小的错误,但有可能会导致严重的后果。
本文列举了一些在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>唯一的作用就是让网页更丑。如果想让网页中的某些部分更醒目和引人注意,选择其他的解决方法也不要使用文本闪光的方法,因为这种方式真的很不受欢迎。
本文列举了一些在HTML中常见的错误,并且给出了如何避免错误的方法。相信这些方法会对前端开发者有一些帮助。
错误1:嵌套错误
正确使用HTML tag的结束标记非常重要,HTML tag的结束标记的顺序要和开始标记一致,而新手往往会忽视这点。如果顺序不对,系统会出现验证错误并且得不到预期的结果。因此,要注意避免这样的错误。
错误使用:
Html代码
- <div><p><a>This is my Smashing text</p></div></a>
正确使用:
Html代码
- <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代码
- <table><form><tr><td>..... </td></tr></form></table>
正确的使用:
Html代码
- <form><table><tr>.... </tr></table></form>
错误4:在内联元素(Inline Elements)中使用块元素(Block Elements)
HTML中的元素既可以在内联(Inline)区域中显示,也可以在块(Block)区域显示。默认情况下,每个Tag都是在内联元素或块元素中创建的。块元素包括文档中的段落和div,而内联元素需要放置在块区域内。因此,使用内联元素时,要注意将它们包含在块元素中使用。
常见的块元素(Block Elements):
Html代码
- <div>, <h1>…<h6>, <p>, <ul>, <ol>, <dl>, <table>, <blockquote>, <form>
常见的内联元素(Inline Elements):
Html代码
- <span>, <a>, <strong>, <em>, <img />, <abbr>, <acronym>
错误5:省略ALT属性
网页中的图片显示,常常用到ALT属性。详细定义ALT属性可以更好的显示图片,也可以让网速慢或使用屏幕阅读器的用户快速了解图片内容。不要做出如下定义:alt="image" ,如果图片只是装饰品可以使用alt=" " 。
错误使用:
Html代码
- <img src="smiley.gif" alt="" />
正确使用:
Html代码
- <img src="smiley.gif" alt="Smiley face" width="42" height="42" />
错误6:粗体和斜体使用错误
尽管<b>和<i>是常用的粗体和斜体标记,但实际上它们属于语义上的表象标签。因此,最好还是使用CSS格式中的多种样式。比如在文档中需要突出的位置可以使用<strong>和<em>。显示的效果和<b>、<i>相同,但是看起来更漂亮。
错误7:不必要的换行符
<br/>标记用在段落内部的换行,在下一行中继续该段落。而<p>则是段落标记。但许多人经常在元素之间使用换行符,这种用法是错误的。
错误的用法:
Html代码
- This is my first paragraph
- <br />
- <br />
- <br />
- This will be my test description
正确用法:
Html代码
- <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中直接使用样式并不是最佳选择。
错误用法:
Html代码
- <p style="font-size: 14px;font-weight: bol">
正确的方法是使用样式表。
错误10:边框
要知道,边框属性只是表象显示。因此,它肯定会由于CSS发生改变。如果默认边框被打乱了,请不要觉得奇怪。
错误用法:
Html代码
- <img src="smiley.gif" alt="" border="0" />
正确的方式是通过样式表来定义。
错误11:忽略标题标记<h>
标题标记用来划分文档结构和分隔区域,通常<h1> 和<h6>都是这样用的。标题标记根据需要放在合适的位置。最好的用法是根据1-6的规范格式来使用。
错误用法:
Html代码
- <strong>This is my Smashing Heading</strong><p>This is my xyz description.</p>
正确用法:
Html代码
- <h1>This is my Smashing Heading</h1><p>This is my xyz description.</p>
错误12:使用<marquee>和<blink>
可以这样说,<marquee>和<blink>唯一的作用就是让网页更丑。如果想让网页中的某些部分更醒目和引人注意,选择其他的解决方法也不要使用文本闪光的方法,因为这种方式真的很不受欢迎。
发表评论
-
jQuery自动加载更多程序
2015-03-12 13:16 3831.1.1 摘要 现在,我们经常使用的 ... -
基于1.3.3版本tooltip的datagrid单元格tip实现
2014-07-23 09:00 686文章目录 [隐藏] 1实现代 ... -
jQuery easyUI动态获取表结构并显示表中的数据)
2014-07-23 08:36 7588问题描述一: 首先根据输入的sql语句获得相关的列 ... -
jQuery plugin: Autocomplete 参数及实例
2014-07-18 10:34 579此插件依赖于 jquery 1.2.6 --- jqu ... -
kindeditor4.0.6的使用方法(jsp+struts2)
2014-07-17 08:58 735最近在研究kindeditor4.0.6在struts框架下 ... -
js设置cookie
2013-12-12 14:53 481cookie 与 session 是网页开发中常用的信息存 ... -
根据内容宽度、高度自适应,垂直水平居中,内容高度超过窗体时,垂直居顶
2013-06-26 14:47 13791、CSS方法 <! ... -
jQuery 页面载入进度条 (必有一款适合你----综合搜集版)
2013-03-29 14:17 3320链接主题: 预加载图片 延迟加载图 ... -
js中两个感叹号的原理与用法分析
2013-02-18 12:53 1603在javascript中 ... -
Google Maps JavaScript API V3 根据坐标画正方型范围
2013-01-29 11:04 1469首先需要一个方法,是把传递过来的经纬度按照半径N公里扩散, ... -
Javascript工具包
2013-01-09 14:13 969是一个免费的开放的Javascript工具包,里面有很多 ... -
加入收藏设为首页代码(兼容各种浏览器)
2012-12-05 09:18 1228把页面设置为首页,加入收藏功能,支持ie,ff,chrome, ... -
js通过汉子转化汉语拼音首字母
2012-10-27 12:59 1187<script type="text/vbsc ... -
JS实现把汉字转换为拼音
2012-10-26 16:23 2776用人在知道里面提问,如何用javascript程序把汉 ... -
使用YUI Compressor压缩JS CSS文件。节省开销
2012-10-25 11:45 1657互联网使用JS CSS 等静态资源文件 压缩工具 让你的网站更 ... -
Ajax 实现级联菜单
2012-10-16 09:34 1027自己动手实现的一个Ajax级联菜单,开发平台:Eclipse, ... -
JS监控关闭浏览器操作
2012-10-15 14:50 1401需求如下: 用户关闭浏览器通知后台。 方案如下: 1 ... -
根据浏览者的IP切换成不同语言,新浪网易IP地区信息查询API接口调用方法
2012-09-30 10:26 1210工作需求,要根据浏览者的IP切换成不同语言的页面,记了 ... -
JS数组操作
2012-09-28 13:32 1133对于js来说,原生的Arr ... -
Javascript hasOwnProperty 方法 & in 关键字
2012-09-26 09:42 834/** * hasOwnPrope ...
相关推荐
前端开发中,有一个非常好用的工具,Visual Studio Code,简称VS code 用于在Google Chrome浏览器或支持Chrome DevTools协议的其他目标中调试JavaScript代码的VS Code扩展。自动帮你完成头部和尾部闭合标签的同步...
在常用 IDE 和编辑器中获得智能代码补全、实时错误反馈及其它反馈等特性。 完整开发故事 测试 使用 Karma 进行单元测试,让你在每次存盘时都能立即知道是否弄坏了什么。Protractor ...
大家都知道在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些HTML5头部<meta>标签常用的信息。有错误的,敬请留言指正,或...
WEB前端助手(FeHelper)_v6.2.crx FeHelper--弹出菜单 ...代码美化 包括Javascript代码美化、CSS代码美化、HTML代码...如果您的页面是基于栅格系统而开发的(如960gs),这个简单的工具能很好的帮助您分析栅格对齐是否规范
普通的一个网页在前端设计师 们眼中,不仅是单纯的文字图片,而是各种网页标签组成的结构图,但这些画面纯粹存在于设计师们的大脑中,X-Ray提供了一个让让它视觉化的方法,尤其是 在浏览别人的网站时尤其有用。...
最常用功能简介 SizerOne 通过这一4合1的构建集合ezai您的应用程序中增加缩放、标签和parsing的功能。 SizerOne是VS-OCX的最新版,包含两个缩放构件,可处理简单和复杂的缩放,一个可创建笔记本型和Outlook型的...
HapJ是一个面向UI的javascript框架,提供了前端开发过程中常见的问题的解决方案。诸如表单校验、延迟加载、异步处理、广告轮换、以及一系列UI交互体验优化的功能。 hapj.js是其中最核心的文件,包括了UI、日志、钩子...
assertion(断言)在软件开发中是一种常用的调试方式,很多开发语言中都支持这种机制。在实现中,assertion就是在程序中的一条语句,它对一个boolean表达式进行检查,一个正确程序必须保证这个boolean表达式的值为...
DbSite企业网站管理系统采用.Net构架,根据需求可配置多种数据库,全站基于SEO核心开发,界面与数据完全分离,内置多个常用网站模块:企业基础信息模块,新闻资讯模块,产品模块,在线留言模块,下载模块,招聘模块...
最常用功能简介 SizerOne 通过这一4合1的构建集合ezai您的应用程序中增加缩放、标签和parsing的功能。 SizerOne是VS-OCX的最新版,包含两个缩放构件,可处理简单和复杂的缩放,一个可创建笔记本型和Outlook型的...
最常用功能简介 SizerOne 通过这一4合1的构建集合ezai您的应用程序中增加缩放、标签和parsing的功能。 SizerOne是VS-OCX的最新版,包含两个缩放构件,可处理简单和复杂的缩放,一个可创建笔记本型和Outlook型的...
最常用功能简介 SizerOne 通过这一4合1的构建集合ezai您的应用程序中增加缩放、标签和parsing的功能。 SizerOne是VS-OCX的最新版,包含两个缩放构件,可处理简单和复杂的缩放,一个可创建笔记本型和Outlook型的...
最常用功能简介 SizerOne 通过这一4合1的构建集合ezai您的应用程序中增加缩放、标签和parsing的功能。 SizerOne是VS-OCX的最新版,包含两个缩放构件,可处理简单和复杂的缩放,一个可创建笔记本型和Outlook型的...
最常用功能简介 SizerOne 通过这一4合1的构建集合ezai您的应用程序中增加缩放、标签和parsing的功能。 SizerOne是VS-OCX的最新版,包含两个缩放构件,可处理简单和复杂的缩放,一个可创建笔记本型和Outlook型的...
最常用功能简介 SizerOne 通过这一4合1的构建集合ezai您的应用程序中增加缩放、标签和parsing的功能。 SizerOne是VS-OCX的最新版,包含两个缩放构件,可处理简单和复杂的缩放,一个可创建笔记本型和Outlook型的...
最常用功能简介 SizerOne 通过这一4合1的构建集合ezai您的应用程序中增加缩放、标签和parsing的功能。 SizerOne是VS-OCX的最新版,包含两个缩放构件,可处理简单和复杂的缩放,一个可创建笔记本型和Outlook型的...
最常用功能简介 SizerOne 通过这一4合1的构建集合ezai您的应用程序中增加缩放、标签和parsing的功能。 SizerOne是VS-OCX的最新版,包含两个缩放构件,可处理简单和复杂的缩放,一个可创建笔记本型和Outlook型的...
核心思想 5.1 分包 5.2 统一异常拦截 5.2.1 介绍 5.2.2 优点 5.2.3 关于性能 5.3 结果包装器 5.3.1 如何使用 5.3.2 ConstantFactory 5.4 前端思想 5.4.1 布局 5.4.2 标签 5.4.3 手动新增标签页 6. 常见问题答疑 6.1...
超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...