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

  通过避免下面这些小错误,可以使得我们的网站变得更为友好。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1、每个页面使用标准一致的模板链接到网站的主要部分。

  2、关键字要简单。设计应该美观简洁,这样用户在使用时才不会困惑。

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

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

  总结:通过识别这些常见的错误,web开发人员可以避免很多让其他人饱受煎熬的挫折。我们不仅需要承认错误,还应该清楚错误的影响,并采取措施避免错误,这样才能有更好的开发表现——并有信心完成任务!

Web前端必须规避的8个误区的更多相关文章

  1. web前端的学习误区

    web前端的学习误区  网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们 ...

  2. 新手学习WEB前端流程以及学习中常见的误区

    学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的,可是高薪不会那么轻易拿到,这是一个最简单的道理.没有付出就没有回报,在整个学习web前端编程技术的过程中,你需要付出时间.精力.金钱.废话不 ...

  3. Web前端开发学习误区,你掉进去了没?

    从接触网站开发以来到现在,已经有五个年头了吧,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时,勾起了在这网站开发道路上的一串串回忆,成功与喜悦.烦恼与纠结都历历在目,感慨颇多. 先 ...

  4. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  5. Web前端开发推荐阅读书籍

    前言 前端工程师在中国兴起也就5年左右,以前公司里没有专门前端工程师的这个职位,很多前端方面的任务都是由全栈工程师来完成,有的基础一点的后台或者设计的帮助分担一些.但是随着互联网的快速发展,特别是所谓 ...

  6. 关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)

    本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...

  7. Web前端框架与类库的思考

    说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技 ...

  8. 【转载】WEB前端开发规范文档

    本文转载自谈笑涧<WEB前端开发规范文档> 为 新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益 ...

  9. 淘宝前端工程师:国内WEB前端开发十日谈

    一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...

随机推荐

  1. WCF - NetCtP 双工错误列表

    1. 在服务 Transfer 实现的协定列表中找不到协定名称 "IMetadataExchange" 将 ServiceMetadataBehavior 添加到配置文件或直接添加 ...

  2. C++调用Matlab 注意事项

    前言:脑残的使用了C++调用Matlab,没想到Matlab的使用者的智商还真TMD不一般, 竟然有这样的 plot(x_Abnorm_index,Vec2(Abnorm_index),'sb','l ...

  3. POJ 2486 Apple Tree (树形dp 经典题)

    #include<cstdio> #include<cstring> #include<algorithm> using namespace std; const ...

  4. kernel相关前沿技术了解

    Intel MPX https://en.wikipedia.org/wiki/Intel_MPX SPDK http://aidaiz.com/spdk/ TCMalloc http://goog- ...

  5. parted分区流程操作

    parted不同于fdisk(<2T)它比fdiskf更加灵活,fdisk需保持后才能生效,而parted是分区后直接生效! 磁盘分区步骤: 1.parted /dev/sdb #进入磁盘分区 ...

  6. /etc/default/useradd文件内容及对应功能

    1.GROUP=100 #依赖于/etc/login.defs的USE RGRUUPS_ENAB参数,如果为no,则在此处控制 2.HOME=/home #把用户的家路径健在/home中 3.INAC ...

  7. pycharm 永久激活 序列码 破解版

    如今人工智能的概念相当火爆,很多想学习编程求得高薪岗位的同志纷纷学起了Python,自带的idle不够智能,推荐使用pycharm编辑运行Python程序. 然而小萌新在安装pycharm时才会意识到 ...

  8. Spring学习总结(16)——Spring AOP实现执行数据库操作前根据业务来动态切换数据源

    深刻讨论为什么要读写分离? 为了服务器承载更多的用户?提升了网站的响应速度?分摊数据库服务器的压力?就是为了双机热备又不想浪费备份服务器?上面这些回答,我认为都不是错误的,但也都不是完全正确的.「读写 ...

  9. ie固定table单元格宽度

    <table border="0" style="width:690px; table-layout:fixed;"> <tr> < ...

  10. 纯js编写验证信息提示正则匹配数字,字母,空值

    1.显示效果 2,html结构 <div class="border_bg"> <div id="upcCode" style="p ...