标题: 网页设计中HTML常范的五个错误 [打印本页]

---

作者: admin    时间: 2008-1-19 23:40     标题: 网页设计中HTML常范的五个错误

1.网页背景色的设置 # U8 W. Y, M; @  A! y* [

& ?! B( }1 e3 }0 O# v4 |8 N　　犯错机率：很大
2 M+ u) ~/ h& e7 a7 F. `4 {- K6 \　　普遍性：较广
% n3 @- l; Q# f5 N( h! g　　犯错可能性：懒/不知道
# p7 f; X! g4 N$ X6 a5 k
8 W! y/ B1 i/ n! G2 H2 T5 ~6 f　　约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Email通知了他们，自此之后这个问题我从没犯过。
& c( r; H& A9 u+ d% I4 G0 @. x- w( U* `% c( I, l
　　绝大部分人的窗口背景颜色都是白色，但如果象我这样个性的人，就会把windows窗口的背景颜色改成灰色或其他色，这样一来，如果你没有设置网页的背景颜色的话，你以为正常的网页在我的电脑上看起来会是一团糟。
8 f) c1 r" }$ Z/ ^  K3 s/ s
: U5 m1 s$ c. \9 O' ]2 D　　2.Align center（自动居中）的滥用
6 f& u  S( N2 E) v  V( p5 F: O0 q$ z9 [' @4 K$ N) O) u# m1 G
　　犯错机率：非常大8 a6 ]0 z" {# U9 U
　　普遍性：非常广
" t! p+ q7 t  E. u　　犯错可能性：以为方便/以为好用3 w, F" F3 k! R+ Q

$ j; a5 w( K$ i" j5 r" g　　工作中，修改、维护别人的网页是家常便饭，发现不少人有一个陋习：
) ?. n$ s) B! |  a　　在表格中的文字或图片，你是这样来令它居中、靠左或靠右过？3 d; P7 P3 ?/ e: L5 k, h* Y
4 s9 v1 G" ?4 q
　　<div align="center">大家好啊！！</div>
0 \; h8 j3 q# I( u& C　　<div align="center"><img src="xx.gif"></div>
$ p( s8 K9 P3 S$ h5 d0 G
* r3 Z) E( v9 m% E% h& @　　当有些表格很多、文字很多、内容分得很细的时候，爱用这种方法（它在DW里的快捷键是Ctrl+Alt+C，FP不知道是什么）的人往往会狂用，惨了，我一碰到这样的网页就头痛，为什么要用那么多<div>来居中呢？tell me why？难道表格没有居中属性吗？为什么要加入这些垃圾代码？特别修改的时候也不能把文字或图片删除了就能自动清除<div align="center">这个代码，还要手工去清除，在复杂点的网页中就会无故地浪费维护者一笔时间。
2 r7 B" E8 C5 [  U' s2 S. _/ @1 l8 s' C# B- \
　　建议使用<td align="center">来居中，当需要多重定位的时候，才考虑<div align="center">，因为这个代码并不好处理，所以能用表格代替就用表格替代。
6 {5 U$ D; r. b8 N) ?, ?2 H! c$ u/ J' @$ e
　　3.重复使用实现相同功能的代码、或杂七杂八的乱套代码
: \- C- G8 e8 B. b
* r3 j% O: T6 Q) [  H　　犯错机率：非常普遍
% o8 T4 i' b$ F" s: M; b, F, e　　普遍性：非常普遍/ u" k5 G. V# r4 s! m. |
　　犯错可能性：复杂多样( S3 E2 R6 e  R' g
" f: ?) P5 X: D+ b5 m7 g
　　大家先来看一看下面的代码：
; s5 Y+ P0 g% {1 F! n4 G　　<center><p><font class="css_id"><font class="font11"> <font color="#CCCCCC"><font color="#FFA76C" style="font-size:14px; font-family:隶书">标 题</font></font></font><br> </center>你觉得这样的代码看起来感觉怎么样呢？</font></p>
9 {! h5 o+ X# ^" J# q# C; Y- ~7 e! r2 D
　　我不知道读者有什么感觉，压根我一看到这样的代码就会先自我麻木十来秒，这十来秒目的是为了找一个能表达我的思想感情的词（我？你想反问我吗？sorry~~，我一般不犯，因为我做网页至少有一半以上的时间在浏览代码，代码中多了不该多的东西我一眼就能看出来。）。
; y( G+ c, R  H& B. Z) k
" r/ U$ ^/ f8 [9 C# ~　　看看上面的代码，使用了2个class，4个font来定义2个文本，其实这样的问题很多时候是在大家不断的修改中产生的，对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重，当然，事实上别人浏览这个网页的时候，是没有任何问题的，但维护的人就…………。9 g0 \% y9 k9 x$ ?, n( q. [
这些多余的垃圾代码完全是可以省略掉的，其实上面的例子不够严重，更恐怖的我都见过。
, F9 @3 e. R/ w" l+ d5 H1 S4 M, h3 B5 q3 O
　　另外还有一个问题也要提提的，就是<p>...</p>和<center>...</center>，为什么要用它们呢？tell me why~~，有甚者是这样的：% Z% b, a2 T* o; J5 \. n

/ |9 W) |$ s' b7 D2 [% h3 a<td><div align="center" class="css_id">7 K7 i& g2 T& ~6 e
<center>
' y) e1 O8 s; i/ g( ?<p align="center"></p>( Z& G2 g% ?! A
< p align="center"><font class="css_id"><font class="font11"> <font color="#CCCCCC"><font color="#FFA76C" style="font-size:14px; font-family:隶书">标 题</font></font></font><br> </center></td>你觉得这样的代码看起来感觉怎么样呢？</font></p>< /center></div></td>
3 f( q2 \1 s5 m/ ]6 ]
. f) s9 K6 |( D" }$ E　　看到这样的代码我是会很无奈的（更无奈的是我经常看到，而且必须看），我来简化一下：
1 t$ f7 s; e1 S. x5 A! P< td align="center" class="css_id"><br><font color="#FFA76C" style ="font-size:14px;font-family:隶书">标题</font><br>你觉得这样的代码看起来感觉怎么样呢？</td>
# V( S; C% D- d+ e" q) G7 I: g+ R6 f( j+ ^2 y
　　是不是看起来觉得这个世界安静了很多？"标题"后面的文字完成可以定义在<td>的class里，就算不用css，再用多一个<.font>也没问题，一样很清爽。$ C- {+ ]3 c! W

/ z0 t4 o2 V2 f5 q" U　　4.表格不正确嵌套, n9 X) g1 d0 D6 g5 \0 K( I' V

# O9 t. P; @) O" H. O, x( ~8 u% ^& i　　犯错机率：一般
% ~( P6 m; k  P5 c( U+ I+ p3 o　　普遍性：普遍
9 s: f& u; w6 v2 B" v0 c; B% l　　犯错可能性：对这个不了解
$ q' M8 P8 Z) X' |2 M  u. q
, w- P  w6 O2 h4 q( |　　其实这是一个街知巷闻的问题了，但还是不断有人犯，不正确的嵌套表格，可能会令到你被老总叫到办公室里臭骂一顿，会令到你以为正常的网页用ADSL开2、3分钟都开不了。( a; X% \% X- @* `! q
% V$ ~  J" h. d5 f" w; `
　　先讲第一个问题，就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。* C4 n+ B9 I# L! `. m

$ @- ?1 Y6 Q) O7 H+ n　　第二个问题就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，嘻嘻，你猜有可能出现什么情况呢？其实也没什么大不了的，最严重的就是你的IE象死机了一样，什么都没显示。解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。
) T9 Q$ a9 A: L+ m7 y1 w
6 |" B2 z( N% G- i) ~　　5.写代码缩进的时候，不是使用Tab而是使用空格* y: o, N- M4 M: m  _3 M; J
! Q# N2 I& x' I
　　犯错机率：一般
4 G5 s, y2 R6 s9 X　　普遍性：较少; ~7 B0 }1 l/ f* P6 R7 o
　　犯错可能性：不知道Tab更好用( U5 k. S) e" l5 x( [/ E

+ U. i9 e8 r5 h  J3 T& y　　这一个问题针对js、vbs、asp、php之类，html不能使用Tab会写一点程序的都知道什么叫缩进，怎么样缩进？有人使用空格，有人使用Tab，如果你是使用空格的，那么从现在起，改用Tab吧。' [% D' E& u$ M- S7 l
9 Q$ M$ K% k2 r2 m1 r) k/ p
　　使用空格有二大坏处：1、缩进速度慢、修改速度慢。2、增大网页体积，会影响速度。

---

欢迎光临 捌玖网络工作室 (http://89w.org/)

Powered by Discuz! 7.2