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

admin

1.网页背景色的设置
5 F* G$ g0 w0 @" T4 D9 \# _/ R7 D0 E3 p: p+ E
　　犯错机率：很大& X9 u- s  N& _# x$ {4 S
　　普遍性：较广
$ f5 a4 V. C  t+ W　　犯错可能性：懒/不知道
  l; R7 {* {& E
' ]& h5 s9 y# y8 f5 w, ^　　约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Email通知了他们，自此之后这个问题我从没犯过。
, J% I) a" v4 h  C3 X1 a+ N* X' W& _  b
　　绝大部分人的窗口背景颜色都是白色，但如果象我这样个性的人，就会把windows窗口的背景颜色改成灰色或其他色，这样一来，如果你没有设置网页的背景颜色的话，你以为正常的网页在我的电脑上看起来会是一团糟。- T7 B/ s" o; x3 [; O$ {, E5 [. t

' ]+ M- b8 u- I) I5 T/ \2 {　　2.Align center（自动居中）的滥用
2 @+ k! c) W' M& ^+ n+ S7 P" s0 o6 e0 U' A
　　犯错机率：非常大
7 Q# ?" o6 N* w* n! H2 F. w1 D　　普遍性：非常广
4 O/ e% H# V6 M9 ?( s1 D3 q8 k1 ]　　犯错可能性：以为方便/以为好用
9 }& p* t' X7 p  l  ^! ~: Z( w2 k7 i) Y' W; o5 P  E, _
　　工作中，修改、维护别人的网页是家常便饭，发现不少人有一个陋习：% N0 H. \* z, q  h
　　在表格中的文字或图片，你是这样来令它居中、靠左或靠右过？& j" Q) P! ^! t. x& L
5 z0 ?+ I( d+ x" S  v
　　<div align="center">大家好啊！！</div>
3 [6 c# h+ C& Y- o8 Q　　<div align="center"><img src="xx.gif"></div>2 d, a9 \) w( K! n: u/ a1 }5 I2 |

' ?+ {, Z9 ~8 H$ h+ b) [, g　　当有些表格很多、文字很多、内容分得很细的时候，爱用这种方法（它在DW里的快捷键是Ctrl+Alt+C，FP不知道是什么）的人往往会狂用，惨了，我一碰到这样的网页就头痛，为什么要用那么多<div>来居中呢？tell me why？难道表格没有居中属性吗？为什么要加入这些垃圾代码？特别修改的时候也不能把文字或图片删除了就能自动清除<div align="center">这个代码，还要手工去清除，在复杂点的网页中就会无故地浪费维护者一笔时间。
' m/ m+ F5 b, H" Y1 u% u$ L" J3 `' `- k- }
　　建议使用<td align="center">来居中，当需要多重定位的时候，才考虑<div align="center">，因为这个代码并不好处理，所以能用表格代替就用表格替代。
; x2 B+ l! h/ n( Z& s- X1 @) E. |9 j
3 U: t! _) q" Z. ?3 r# w　　3.重复使用实现相同功能的代码、或杂七杂八的乱套代码
) D0 c% i* P6 m2 W
& \: M( V4 L: w6 c1 e　　犯错机率：非常普遍( y; u: Q* C; ]% K* y  o) w
　　普遍性：非常普遍
3 K+ V* n6 d  X　　犯错可能性：复杂多样; y, J* v3 [2 ]# R' i

% e; o  k! e$ u7 w. g3 C' V　　大家先来看一看下面的代码：
9 n+ @" y# y4 \* r7 k2 Q% w　　<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>/ T( @6 m$ G# g6 c; A) i5 Y* |# c
" n% x  D. s7 z, r  ^, L$ I/ m
　　我不知道读者有什么感觉，压根我一看到这样的代码就会先自我麻木十来秒，这十来秒目的是为了找一个能表达我的思想感情的词（我？你想反问我吗？sorry~~，我一般不犯，因为我做网页至少有一半以上的时间在浏览代码，代码中多了不该多的东西我一眼就能看出来。）。
3 V& S% E( z6 I) V  y; O5 o0 G1 W; l' N& c% Q+ \
　　看看上面的代码，使用了2个class，4个font来定义2个文本，其实这样的问题很多时候是在大家不断的修改中产生的，对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重，当然，事实上别人浏览这个网页的时候，是没有任何问题的，但维护的人就…………。4 @& A( }% ^5 p' X% R# Z
这些多余的垃圾代码完全是可以省略掉的，其实上面的例子不够严重，更恐怖的我都见过。7 e6 h: W( C# R; K% l% A, h3 Z# H

$ V( k& p5 v2 F; |- J　　另外还有一个问题也要提提的，就是<p>...</p>和<center>...</center>，为什么要用它们呢？tell me why~~，有甚者是这样的：
# n( K$ j6 I: N* I2 l& h7 i8 Z/ K; B5 ?  H
<td><div align="center" class="css_id">: ~1 d, q' j' G! U
<center>
- Y# W3 {. x# l9 n( X$ d<p align="center"></p>
. E8 M5 ^1 V) x< 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>
5 S3 R( O; m7 v) Q8 H; R1 }  I$ z" Y3 _
　　看到这样的代码我是会很无奈的（更无奈的是我经常看到，而且必须看），我来简化一下：
: k( i* u5 p2 s! ~* [6 _< td align="center" class="css_id"><br><font color="#FFA76C" style ="font-size:14px;font-family:隶书">标题</font><br>你觉得这样的代码看起来感觉怎么样呢？</td>" W1 I5 ?6 [- ]0 p( M

2 ~* L6 B- t/ _4 W! o' m% E　　是不是看起来觉得这个世界安静了很多？"标题"后面的文字完成可以定义在<td>的class里，就算不用css，再用多一个<.font>也没问题，一样很清爽。
& x. V( ~: P# I- G' p: Q7 e% m7 @/ ]
" F! @- \% ^2 A! e$ t) l" Q　　4.表格不正确嵌套
% C8 L, {/ _9 y( |, g( Z# P
$ U  K! ?$ T% }# w' a- }0 [0 d, F　　犯错机率：一般+ [0 u. G- U6 s. V. j- X
　　普遍性：普遍& U# [  x6 _2 c1 F) X( ]
　　犯错可能性：对这个不了解% T; g8 V# D4 ?4 K
$ P8 H) P8 {- S3 H5 u# {
　　其实这是一个街知巷闻的问题了，但还是不断有人犯，不正确的嵌套表格，可能会令到你被老总叫到办公室里臭骂一顿，会令到你以为正常的网页用ADSL开2、3分钟都开不了。
6 X5 s+ F. x3 C2 ^3 C) K: J) }+ O3 Q( n1 @, c' g/ Q
　　先讲第一个问题，就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。# ~* X$ C) E, I$ m0 @0 B, E4 t
" b1 z) c% A2 M( k9 g! K
　　第二个问题就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，嘻嘻，你猜有可能出现什么情况呢？其实也没什么大不了的，最严重的就是你的IE象死机了一样，什么都没显示。解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。4 m4 `+ O  A* S. _5 N- ?
! M7 `; S( y/ ]
　　5.写代码缩进的时候，不是使用Tab而是使用空格! d4 ~3 F. o3 g
4 m# z) u0 g! T6 d1 J! j) \9 w# s
　　犯错机率：一般
8 Q% ]" n' ^  W8 G( N　　普遍性：较少
5 X9 k7 ?6 q; Q+ b; H, ^　　犯错可能性：不知道Tab更好用6 Z$ b, W5 e3 k
9 L7 B3 u1 u# n9 x  c
　　这一个问题针对js、vbs、asp、php之类，html不能使用Tab会写一点程序的都知道什么叫缩进，怎么样缩进？有人使用空格，有人使用Tab，如果你是使用空格的，那么从现在起，改用Tab吧。; m# T2 l! n7 R0 {+ E, M
7 w- S" \4 i) M# ~4 O3 Q" r. i6 _  x
　　使用空格有二大坏处：1、缩进速度慢、修改速度慢。2、增大网页体积，会影响速度。