错误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. 启动tomcat部署项目时 ContainerBase.addChild: start:

    严重: ContainerBase.addChild: start: org.apache.catalina.LifecycleException: Failed to start component ...

  2. C++ int与string的转化

    int本身也要用一串字符表示,前后没有双引号,告诉编译器把它当作一个数解释.缺省情况下,是当成10进制(dec)来解释,如果想用8进制,16进制,怎么办?加上前缀,告诉编译器按照不同进制去解释.8进制 ...

  3. 泛型数组列表 ArrayList

    为什么使用泛型数组列表而不使用普通数组? 1.普通数组经常会发生容量太大以致浪费的情况 2.普通数组无法动态更改数组 基本概念: 1.采用[类型参数]的[类]---->[泛型类] 2.[泛型类型 ...

  4. mySQL 50个查询系列

    http://bubufx.com/detail-1749088.html http://www.jb51.net/article/67932.htm Student(S#,Sname,Sage,Ss ...

  5. dubbo & zookeeper & springMVC

    一.安装准备 1.环境简介 名称 版本 OS Mac OS X 10.11.5 JDK 1.8.0_51 dubbo 2.5.4 tomcat 8.0.35 Zookeeper 3.4.8 maven ...

  6. System.Data.SqlClient.SqlError:无法对过程'XXX' 执行 删除,因为它正用于复制。消息 3724,级别 16

    遇到这么一个错误,想对[northwindcs]这个数据库搭建复制,从B服务器发布订阅到C服务器,采用备份还原进行初始化,但是在数据库还原时,报无法对过程‘XXX’执行删除,因为它正用于复制.表面上一 ...

  7. C++编程小知识随手记

    C++编程小知识点: (1)queue和vector类型: 加入元素 : queue是queue.push(),vector是vector.push_back(), 删除元素: queue是queue ...

  8. 【oracle】 oracle学习笔记1--安装与登录

    由于机器配置原因,加上也是自学,所以就没必要安装专业版的oracle,于是就安装的oracle xe版本 下载地址:http://www.oracle.com/technetwork/database ...

  9. webStorage和cookie的区别

    共同点:         都是保存在浏览器端,且同源的   cookie有什么缺点? Cookie数量和长度的限制.每个domain最多只能有20条cookie,每个cookie长度不能超过4KB 安 ...

  10. ArcGIS发布服务时缓存切片设置

    [文件]>[共享]>[服务]>[覆盖原有服务]或[创建新服务] 设置好相关参数后,会弹出"服务编辑框": 进入"缓存" 1."绘制此 ...