网页设计中HTML常范的五个错误

1.网页背景色的设置

犯错机率:很大

普遍性:较广

犯错可能性:懒/不知道

约2年前我曾发现21cn上出现过一次没有设置背景色的情况,当时我用Email通知了他们,自此之后这个问题我从没犯过。

绝大部分人的窗口背景颜色都是白色,但如果象我这样个性的人,就会把windows窗口的背景颜色改成灰色或其他色,这样一来,如果你没有设置网页的背景颜色的话,你以为正常的网页在我的电脑上看起来会是一团糟。

2.Align center(自动居中)的滥用

犯错机率:非常大

普遍性:非常广

犯错可能性:以为方便/以为好用

工作中,修改、维护别人的网页是家常便饭,发现不少人有一个陋习:

在表格中的文字或图片,你是这样来令它居中、靠左或靠右过?

<div align="center">大家好啊!!</div>

<div align="center"><img src="xx.gif"></div>

当有些表格很多、文字很多、内容分得很细的时候,爱用这种方法(它在DW里的快捷键是Ctrl+Alt+C,FP不知道是什么)的人往往会狂用,惨了,我一碰到这样的网页就头痛,为什么要用那么多<div>来居中呢?tell me why?难道表格没有居中属性吗?为什么要加入这些垃圾代码?特别修改的时候也不能把文字或图片删除了就能自动清除<div align="center">这个代码,还要手工去清除,在复杂点的网页中就会无故地浪费维护者一笔时间。

建议使用<td align="center">来居中,当需要多重定位的时候,才考虑<div align="center">,因为这个代码并不好处理,所以能用表格代替就用表格替代。

3.重复使用实现相同功能的代码、或杂七杂八的乱套代码

犯错机率:非常普遍

普遍性:非常普遍

犯错可能性:复杂多样

大家先来看一看下面的代码:

<center><p><font ><font ><font color="#CCCCCC"><font color="#FFA76C" style="font-size:14px;font-family:隶书">标 题</font></font></font><br></center>你觉得这样的代码看起来感觉怎么样呢?</font></p>

我不知道读者有什么感觉,压根我一看到这样的代码就会先自我麻木十来秒,这十来秒目的是为了找一个能表达我的思想感情的词(我?你想反问我吗?sorry~~,我一般不犯,因为我做网页至少有一半以上的时间在浏览代码,代码中多了不该多的东西我一眼就能看出来。)。

看看上面的代码,使用了2个class,4个font来定义2个文本,其实这样的问题很多时候是在大家不断的修改中产生的,对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重,当然,事实上别人浏览这个网页的时候,是没有任何问题的,但维护的人就…………。

这些多余的垃圾代码完全是可以省略掉的,其实上面的例子不够严重,更恐怖的我都见过。

另外还有一个问题也要提提的,就是<p>...</p>和<center>...</center>,为什么要用它们呢?tell me why~~,有甚者是这样的:

<td><div align="center" >

<center>

<p align="center"></p>

<p align="center"><font ><font ><font color="#CCCCCC"><font color="#FFA76C" style="font-size:14px;font-family:隶书">标 题</font></font></font><br></center></td>你觉得这样的代码看起来感觉怎么样呢?</font></p></center></div></td>

看到这样的代码我是会很无奈的(更无奈的是我经常看到,而且必须看),我来简化一下:

<td align="center" ><br><font color="#FFA76C" style="font-size:14px;font-family:隶书">标题</font><br>你觉得这样的代码看起来感觉怎么样呢?</td>

是不是看起来觉得这个世界安静了很多?"标题"后面的文字完成可以定义在<td>的class里,就算不用css,再用多一个<.font>也没问题,一样很清爽。

4.表格不正确嵌套

犯错机率:一般

普遍性:普遍

犯错可能性:对这个不了解

其实这是一个街知巷闻的问题了,但还是不断有人犯,不正确的嵌套表格,可能会令到你被老总叫到办公室里臭骂一顿,会令到你以为正常的网页用ADSL开2、3分钟都开不了。

先讲第一个问题,就是在一个大表格里不断地嵌套表格,这样会令到打开网页的速度变慢(虽然说现在的IE改善了这一问题,但还是不建议这样做),另一方面维护、修改也极不方便,一般来说简单的套用是没有问题的,甚至3、4层,但是不要把所有内容都放到一个表格里去。

第二个问题就是在一个大表格里放入所有内容,而其中包括一个免费的计数器代码,嘻嘻,你猜有可能出现什么情况呢?其实也没什么大不了的,最严重的就是你的IE象死机了一样,什么都没显示。解决方法就是把计数器单独放在一个表格里,别和其他内容一起放在同一表格。

5.写代码缩进的时候,不是使用Tab而是使用空格

犯错机率:一般

普遍性:较少

犯错可能性:不知道Tab更好用

这一个问题针对js、vbs、asp、php之类,html不能使用Tab会写一点程序的都知道什么叫缩进,怎么样缩进?有人使用空格,有人使用Tab,如果你是使用空格的,那么从现在起,改用Tab吧。

使用空格有二大坏处:1、缩进速度慢、修改速度慢。2、增大网页体积,会影响速度。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/417990.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mkdir与mkdirs的区别

项目中需要在代码中读取或创建文件保存路径&#xff0c;用到了mkdir&#xff0c;查看还有个mkdirs方法&#xff0c;这里记录一下两者的区别。 1、关于两者的说明如下&#xff1a; boolean mkdir() : 创建此抽象路径名指定的目录。 boolean mkdirs() : 创建此抽象路径名指定…

易支付系统源码_刷脸支付系统源码,插件源码合作模式有哪些,采购源码需要注意什么...

对刷脸支付比较关注的朋友&#xff0c;应该都知道源码。当拥有这个&#xff0c;就意味着有了独立的系统。也意味着可以打造自己的品牌&#xff0c;转化自己资源&#xff0c;获取更多的利润。但是想拥有一套源码也是不简单的&#xff0c;不仅因为编写的难度和价格&#xff0c;也…

网吧修改

Windows Registry Editor Version 5.00 (打开任务管理器) [HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Policies\System]"DisableTaskMgr"dword:00000000 (恢复桌面右键菜单) [HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Poli…

SpringMVC源码-不同类型的参数解析

随便写一个demo: RequestMapping("/car/{id}")public Map<String, Object> getCar(PathVariable("id") Integer id,RequestParam("type") String type,RequestParam("hobby") List<String> hobby){Map<String, Object&…

Gym 100917J---Judgement(01背包+bitset)

题目链接 http://codeforces.com/gym/100917/problem/J Description standard input/outputStatementsThe jury of Berland regional olympiad in informatics does not trust to contest management systems, so the Berland regional programming contest is judged by the n…

raid5 合适 多少块硬盘_raid1 raid2 raid5 raid6 raid10如何选择使用?各需要几块硬盘?...

我们在做监控项目存储时&#xff0c;经常会用到磁盘阵列&#xff0c;什么是磁盘阵列呢&#xff1f;那为什么要做磁盘阵列呢&#xff1f;raid1 raid2 raid5 raid6 raid10各有什么优势&#xff1f;本期我们来看下。一、什么是Raid&#xff1f;它有什么作用&#xff1f;1、什么是R…

常用设置

Windows Registry Editor Version 5.00 (加快程序运行速度)[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystem]"NtfsDisable8dot3NameCreation"dword:00000000"Win31FileSystem"dword:00000000"Win95TruncatedExtensions"dword:…

SpringMVC 源码学习 返回值处理

SpringMVC中对返回值的数据基本分为两类&#xff1a; 1、响应数据 2、响应页面 一、响应数据 响应数据大多数都是将返回值的格式转换为JSON格式然后展示在页面或者保存i起来。 第一步&#xff1a;在SpringBoot中需要引入json场景 <dependency><groupId>org.sprin…

洛谷10月月赛Round.1| P3399 丝绸之路 [DP]

题目背景 张骞于公元前138年曾历尽艰险出使过西域。加强了汉朝与西域各国的友好往来。从那以后&#xff0c;一队队骆驼商队在这漫长的商贸大道上行进&#xff0c;他们越过崇山峻岭&#xff0c;将中国的先进技术带向中亚、西亚和欧洲&#xff0c;将那里的香料、良马传进了我国。…

body div js 放大图片_jquery图片放大插件鼠标悬停图片放大效果

都知道jquery都插件是非常强大的&#xff0c;最近分享点jquery插件效果&#xff0c;方便效果开发使用。一、HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> …

MySQL数据库的优化

MySQL数据库的优化 http://www.vpser.net/opt/vps-mysql-opt.html转载于:https://www.cnblogs.com/carbon3/p/5930868.html

我的博客html

我——龙天宇 <table><tr><td width150 align"right"><DIV style"FILTER: Glow(color#4A7AC9,strength50); WIDTH: 149px; HEIGHT: 119px" aligncenter><br><img height89 width119 src"http://img.blog.163.com/p…

预览docx_Windows-快速预览文件-QuickLook

开源、免费的文件快速预览工具&#xff0c; 支持图片、文档、音视频、代码文本、压缩包等多种格式。获得 Mac OS 空格键快速预览文件相同的体验效果图文件夹音视频 浏览压缩包&#xff0c;文本支持的格式&#xff1a;图片&#xff1a;.png, .jpg, .bmp, .gif, .psd, .apng&…

html简单样式

1.外部样式表 link rel"stylesheet" type"text/css" href"bbb.css"> 2.内部样式表 <style type"text/css"> p{ color: bisque; }</style> 3.内联样式表 <a style"color: blueviolet">hhh…

json 微信小程序 筛选_微信小程序学习记录

全局配置app.json 文件用来对微信小程序进行全局配置。pages 类型为 String Array 是 页​面路径列表&#xff0c;创建目录和更改时会自动更改文件。用于指定小程序由哪些页面组成&#xff0c;每一项都对应一个页面的 路径文件名 信息。window 用于设置小程序的状态栏、导航条、…

前端学习(2146):vue中TypeError: this.getResolve is not a function

可能是加载顺序的问题 const path require(path) module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, dist),filename: bund.js},module: {rules: [{test: /\.css$/,use: [style-loader, style-loader]}]} }

驱动思想之机制和策略

驱动程序的角色 作为一个程序员, 你能够对你的驱动作出你自己的选择, 并且在所需的编程时间和结果的灵活性之间, 选择一个可接受的平衡. 尽管说一个驱动是"灵活"的, 听起来有些奇怪, 但是我们喜欢这个字眼, 因为它强调了一个驱动程序的角色是提供机制, 而不是策略. 机…

vba 执行网页javascript_JavaScript秘密笔记 第一集

1. 什么是JavaScript2. 如何使用JavaScript3. *变量4. *数据类型谁记得笔记越多&#xff0c;谁学的越烂&#xff01;1. 什么是JavaScript:前端三大语言:HTML: 专门编写网页内容的语言CSS: 专门编写网页样式的语言问题: 使用HTML和CSS做出的网页&#xff0c;只能看不能用——静态…