错误1:表单的label标签跟表单字段没有关联

利用“for”属性允许用户单击label也可以选中表单中的内容。这可以扩大复选框和单选框的点击区域,非常实用。

错误2:logo图片没有链接到主页

点击网站logo就能转到主页已经成为了网民的条件反射。此外,值得一提的是,logo是指定放于左上角的。

错误3:不能区分是否已经访问过该链接

访问过的连接状态应该与没有访问过的有所区别,以便于让用户直观地明白哪个链接已经点击过了。

错误4:没有突出当前选中激活的表单项

可以使用“focus”展现选中的文本区域处于动态中。也可以使用CSS样式,例如,突出的边框或者略有变化的背景色。

错误5:图片中没有alt图片描述信息

你可能会觉得无关紧要,但是这是必要的!请记住添加一个说明性的alt属性到你的图片上,除非这张图片很明显是用作装饰的,那么这个alt属性才可以为空(但仍然存在!)。如果是使用图片作为链接点,那么可以输入链接地址。

错误6:背景图片后面没有设置背景色

在内容文字后面使用背景图片是很普遍的,但是我们同时要考虑到如果背景图片被客户端所禁用的情况,所以最好背景图后面再设置一个相似色调的背景颜色,以免文本变得不可阅读。

错误7:不一致的界面设计

矫枉过正大概就是这个意思了。有些设计师为了提高网页水平,故而为网站中的每个网页都创建了不同的设计。但是这只会混淆用户,使他们不知所措。记住,无论一个网站有多么的优秀和有吸引力,如果它的整体外观和感觉并不一致,那么用户就很难记住它。建议如下:

  • 1.每个页面使用标准一致的模板链接到网站的主要部分。
  • 2.关键字要简单。设计应该美观简洁,这样用户在使用时才不会困惑。

错误8:下划线的内容并不是链接

众所周知,带有下划线的内容很容易被当成链接。不要随随便便地在文字中来一个下划线,这样会让人困惑。如果真的想强调某个单词,不妨试试加粗或者加大字体。

译文链接:http://www.codeceo.com/article/8-mistakes-web-programming.html
英文原文:SMALL MISTAKES IN WEB PROGRAMMING NOT TO IGNORE
翻译作者:码农网 – 小峰

Web开发中最致命的8个小错误的更多相关文章

  1. (转)Web开发中最致命的小错误

    Web开发中最致命的小错误 现在,有越来越多所谓的“教程”来帮助我们提高网站的易用性.本文收集了一些在 Web 开发中容易出错和被忽略的小问题,并且提供了参考的解决方案,以便于帮助 Web 开发者更好 ...

  2. 移动web开发中自己遇到的三个小题及解决方法

    大家好! 这是我第二次写随笔感想,有不足之处希望大家提出,我也算的上一个小白,自己进入前端行业也刚刚半年,在这里半年里我遇到一个技术大牛的好领导,让我在项目中学到很多,想和大家分享一下! 一. 移动端 ...

  3. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

  4. Web 开发中很实用的10个效果【附源码下载】

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...

  5. WEB开发中的字符集和编码

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  6. Web 开发中很实用的10个效果

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...

  7. Web开发中管理ipad屏幕的方向变化

    Web开发中,我们会遇到在手机垂直或水平视角时展示不同状态的情况.下面我来总结一下检测移动设备方向变化的一些方法. 1 使用javascript 直接看代码: <script type=&quo ...

  8. 今日推荐:10款在 Web 开发中很有用的占位图片服务

    设计网站时,将要使用的图像在一开始通常还不存在,这个时候布局是最重要的.然而,图像的尺寸通常是预先设置,实用一些占位图像可以帮助我们更好地预览和分析布局. 如今,有免费的占位图片自动生成工具可以使用, ...

  9. Web 开发中应用 HTML5 技术的10个实例教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

随机推荐

  1. PHP5.5.13 + Apache2.4.7安装配置流程详解

    ---恢复内容开始--- 自学PHP的这段时间里,真是倍感辛酸,相信广大的菜鸟们应该很我感同身受吧,在查阅了网上和众多数资料后,总结出来想当比较全面的安装方法,拿出来与广大的编程爱好者一起分享哈. 首 ...

  2. 启动windows bat文件出现错误,直接关闭

    如果执行运行run.bat,提示错误直接退出后,可以直接使用cmd命令进入当前目录,运行,会显示错误信息.

  3. angular学习input输入框筛选

    学习angular,看到 angular-phonecat测试用例,照着教程运行了一遍,对于初学者有点不是很理解angular 帅选代码的意思,于是找教材,参考资料,明白了input筛选原来这么简单. ...

  4. Android 四大组件之四(ContentProvider)

    ContentProvider调用关系: ContentProvider(数据提供者)是应用程序之间共享数据的一种接口机制,是一种更为高级的数据共享方法. ContentProvider可以指定需要共 ...

  5. .net(C#)在vs2010版本下的MVC如何配置才能切换静态页面(html)

    由于vs2010用的人比较多,虽然建mvc项目vs2010可能还不成熟,但鉴于每个人的成长有限,每个地方的资源有限,最主要的是为了解决问题,所以先不管那么多了. 用vs2010为公司网站建站,要求js ...

  6. Lander-Waterman model

    参考: Lander-Waterman Model 这个模型是鸟枪法测序和基因组装的最基本的理论模型,它揭示了测序深度与覆盖度之间的关系. 该模型回答了一个最基本的问题:How many reads ...

  7. CI 3.0.6 控制器打印base_url 地址不为 localhost的解决方法

    1.在application\config\autoload.php 第92行 加载url    $autoload['helper'] = array('url'); 2.application\c ...

  8. Mysql导入导出非常慢解决办法

    MySQL导出的SQL语句在导入时有可能会非常非常慢,经历过导入仅45万条记录,竟用了近3个小时.在导出时合理使用几个参数,可以大大加快导入的速度. -e 使用包括几个VALUES列表的多行INSER ...

  9. NodeJS中的异步I/O、事件驱动

    nodejs的主要特点是单线程.异步I/O.事件驱动.让我们先大概了解一下这些名词的意思. 单线程 单线程是任务按照顺序执行的,并且每次只执行一个任务,只有前面的任务执行完成以后,后面的任务才执行.在 ...

  10. 自己建二维obj

    经常用到啊 在项目流程管理里面用到