Web开发中最致命的8个小错误
错误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个小错误的更多相关文章
- (转)Web开发中最致命的小错误
Web开发中最致命的小错误 现在,有越来越多所谓的“教程”来帮助我们提高网站的易用性.本文收集了一些在 Web 开发中容易出错和被忽略的小问题,并且提供了参考的解决方案,以便于帮助 Web 开发者更好 ...
- 移动web开发中自己遇到的三个小题及解决方法
大家好! 这是我第二次写随笔感想,有不足之处希望大家提出,我也算的上一个小白,自己进入前端行业也刚刚半年,在这里半年里我遇到一个技术大牛的好领导,让我在项目中学到很多,想和大家分享一下! 一. 移动端 ...
- 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践
提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...
- Web 开发中很实用的10个效果【附源码下载】
在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...
- WEB开发中的字符集和编码
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- Web 开发中很实用的10个效果
在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...
- Web开发中管理ipad屏幕的方向变化
Web开发中,我们会遇到在手机垂直或水平视角时展示不同状态的情况.下面我来总结一下检测移动设备方向变化的一些方法. 1 使用javascript 直接看代码: <script type=&quo ...
- 今日推荐:10款在 Web 开发中很有用的占位图片服务
设计网站时,将要使用的图像在一开始通常还不存在,这个时候布局是最重要的.然而,图像的尺寸通常是预先设置,实用一些占位图像可以帮助我们更好地预览和分析布局. 如今,有免费的占位图片自动生成工具可以使用, ...
- Web 开发中应用 HTML5 技术的10个实例教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
随机推荐
- Kanzi Q&A
Q:为什么我的kanzi studio安装完后无法编译apk? A:请安装jdk,并设置环境变量,并更新thirdpartsdk. Q:为什么使用路径无法读取到列表listbox内的列表项? A:列表 ...
- Linux C++线程池
.为什么需要线程池? 部分应用程序需要执行很多细小的任务,对于每个任务都创建一个线程来完成,任务完成后销毁线程,而这就会产生一个问题:当执行的任务所需要的时间T1小于等于创建线程时间T2和销毁线程时间 ...
- Mac 安装 MySQL
在 Mac 下用 Homebrew 安装 MySQL, 网上的教程倒是很多,不过大多数都很默契地雷同.如果稍有点定制要求,就无从下手了. 我先也不免俗,从基本的开始: 一.首先安装 Homebrew ...
- (原创)Linux跟Window共享文件的两个简单方法
第一中种方法: Linux中启动shell,输入如下命令: mount -t cifs -o username="my-pc-name",password="my-pas ...
- easyui 随笔
问题1:easyui-datagrid中,如果装载datagrid的表格通过javascript 或者 jquery 来resize,那么将会reload重新加载数据.这样当我们调整的时候不得不重新发 ...
- 14TH本周工作量及进度统计
14TH本周工作量及进度统计 本周psp: C(类别) C(内容) S(开始时间) ST(结束时间) I(中断时间) T(实际时间) 活动 本周会议 1 ...
- Goppa code
上面的公式定义了长度为n的Goppa码[1].n=2^m, 其维度 k≥n- t·m. 最小距离d≥ 2t+1. 存在运行时间与 n·t 成正比的快速译码算法. 从形式上看,右边是分式,相当于线性分组 ...
- [阅读笔记]Zhang Y. 3D Information Extraction Based on GPU.2010.
1.立体视觉基础 深度定义为物体间的距离 视差定义为同一点在左图(reference image) 和右图( target image) 中的x坐标差. 根据左图中每个点的视差得到的灰度图称为视差图. ...
- 使用Asp.Net Core Identity给用户添加及删除角色
基于Asp.Net Core编制一个项目,需要给用户添加及删除角色的功能,于是使用到了Identity中的UserManager. 先后解决了几个问题,终于实现了设想. 1. 环境条件 Asp.Net ...
- SQL函数之---DECODE函数
Decode函数是oracle/SQL提供的特有函数计算方式,语法:DECODE(value,if1,then1,if2,then2,if3,then3,...else),通常我们在写语句的时候可能会 ...