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

admin

1.网页背景色的设置
5 u- ^9 G; h. A% ?7 P' X+ q4 F8 C; p4 [
　　犯错机率：很大
, ?- ]# l+ R* {" `8 P　　普遍性：较广6 |4 R7 ]2 R/ `0 Y/ T  j6 N' A9 ]
　　犯错可能性：懒/不知道5 b! B' Q& H; e
3 u* N& g0 Y2 z* b/ [' c
　　约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Email通知了他们，自此之后这个问题我从没犯过。
; S5 L( C& d9 Y, G
: [$ }9 H4 D# s5 [　　绝大部分人的窗口背景颜色都是白色，但如果象我这样个性的人，就会把windows窗口的背景颜色改成灰色或其他色，这样一来，如果你没有设置网页的背景颜色的话，你以为正常的网页在我的电脑上看起来会是一团糟。
) W0 ~0 }! ^2 H$ c! |/ G1 T( ?" v# Y% x2 m5 J
　　2.Align center（自动居中）的滥用9 d8 U3 C' \& y5 ]' D; c
2 x% D! o" s0 W# I$ m5 Z
　　犯错机率：非常大8 F" b0 |- E- \' i+ @. t" |
　　普遍性：非常广
; ?/ b, H/ F% ]" Z. i　　犯错可能性：以为方便/以为好用
  v$ {6 i9 q6 }8 _7 T! V. _9 a" M- ~) G! h$ Y4 i: P& ]
　　工作中，修改、维护别人的网页是家常便饭，发现不少人有一个陋习：
& ^/ @2 p- s6 @( _  Q' D+ K' r　　在表格中的文字或图片，你是这样来令它居中、靠左或靠右过？
" K: K9 _3 F: H& V( {% }
2 Q: L3 N6 f, |/ w3 [- V6 m6 @　　<div align="center">大家好啊！！</div>+ l3 {9 \. e4 R9 V3 l$ k
　　<div align="center"><img src="xx.gif"></div>
5 T, u$ A+ w% \
: J6 L- o6 ^; x$ V' D　　当有些表格很多、文字很多、内容分得很细的时候，爱用这种方法（它在DW里的快捷键是Ctrl+Alt+C，FP不知道是什么）的人往往会狂用，惨了，我一碰到这样的网页就头痛，为什么要用那么多<div>来居中呢？tell me why？难道表格没有居中属性吗？为什么要加入这些垃圾代码？特别修改的时候也不能把文字或图片删除了就能自动清除<div align="center">这个代码，还要手工去清除，在复杂点的网页中就会无故地浪费维护者一笔时间。/ M  \  f; t: ?- q8 ^
2 _7 i5 G; k3 u5 q3 W
　　建议使用<td align="center">来居中，当需要多重定位的时候，才考虑<div align="center">，因为这个代码并不好处理，所以能用表格代替就用表格替代。2 T9 ]) f. s0 c3 v4 w! X' X
; {. Z8 \$ `; b$ I8 g/ W: ]
　　3.重复使用实现相同功能的代码、或杂七杂八的乱套代码: m& H2 u9 y7 e# b1 D

9 S! G( N! N, y6 r, G9 h' c　　犯错机率：非常普遍
( l/ a* D; L- c/ r9 C　　普遍性：非常普遍: H# ?/ g5 s, p* ~* L0 }* b
　　犯错可能性：复杂多样" E' F( i# }1 d, `; U. W0 z
; n7 r& H2 O5 P8 b
　　大家先来看一看下面的代码：
% z- h8 u  O/ E" h- K　　<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>6 Y- l3 y, |  O8 ^: y% T
% A) g; T5 G) K) x+ K: r0 e' O. j
　　我不知道读者有什么感觉，压根我一看到这样的代码就会先自我麻木十来秒，这十来秒目的是为了找一个能表达我的思想感情的词（我？你想反问我吗？sorry~~，我一般不犯，因为我做网页至少有一半以上的时间在浏览代码，代码中多了不该多的东西我一眼就能看出来。）。1 G+ n! A0 x: n8 b2 J
9 H) f6 a2 }. E1 k
　　看看上面的代码，使用了2个class，4个font来定义2个文本，其实这样的问题很多时候是在大家不断的修改中产生的，对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重，当然，事实上别人浏览这个网页的时候，是没有任何问题的，但维护的人就…………。
+ G# V2 j0 ^, N7 y8 C3 X6 ]" ?" K4 x这些多余的垃圾代码完全是可以省略掉的，其实上面的例子不够严重，更恐怖的我都见过。: p/ C) r  L$ |. t
, G$ x$ }/ b$ v5 [8 ~
　　另外还有一个问题也要提提的，就是<p>...</p>和<center>...</center>，为什么要用它们呢？tell me why~~，有甚者是这样的：  U& I0 g9 ^; @! L
# p/ q# Q2 I& |
<td><div align="center" class="css_id">  y! J0 [$ J) j8 D
<center>2 M+ _- {4 Y8 |: p$ c. n# n- W
<p align="center"></p>
# A/ G6 e3 x6 E6 Z4 k1 M2 w+ l2 ~< 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>
( ~$ ]/ ~& b# g- p5 z. J. e% O$ g# k4 x3 T* N; b
　　看到这样的代码我是会很无奈的（更无奈的是我经常看到，而且必须看），我来简化一下：
+ D2 j. l( E8 y  l* `8 @4 o# b% k< td align="center" class="css_id"><br><font color="#FFA76C" style ="font-size:14px;font-family:隶书">标题</font><br>你觉得这样的代码看起来感觉怎么样呢？</td>
) x6 z' [5 z; p4 Q3 Q5 ]- M/ S" z4 X3 U* }
　　是不是看起来觉得这个世界安静了很多？"标题"后面的文字完成可以定义在<td>的class里，就算不用css，再用多一个<.font>也没问题，一样很清爽。
' D/ j+ z. K. k* ?$ h' j, c& o' S5 I" x6 _$ r
　　4.表格不正确嵌套
* U! w5 {! w+ N8 I" S( L& Y$ @2 W2 _5 q
　　犯错机率：一般
! J2 X! R" N# b" p  P　　普遍性：普遍
4 S" @, T! ^8 Y; P* h( t　　犯错可能性：对这个不了解
* i& n$ L2 L+ K9 k: `
  }4 H* }: _( @4 s4 w* D& ?( H( h. g　　其实这是一个街知巷闻的问题了，但还是不断有人犯，不正确的嵌套表格，可能会令到你被老总叫到办公室里臭骂一顿，会令到你以为正常的网页用ADSL开2、3分钟都开不了。- q1 J; M( Z. [. s
  k$ V$ I" x2 G  W% n
　　先讲第一个问题，就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。+ c% \0 W# e$ ^1 i

) E3 F. |- F& F6 [　　第二个问题就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，嘻嘻，你猜有可能出现什么情况呢？其实也没什么大不了的，最严重的就是你的IE象死机了一样，什么都没显示。解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。
. U, u3 E% i& K: U- ?+ X1 J) o+ z
　　5.写代码缩进的时候，不是使用Tab而是使用空格
" X& ?: q8 s6 Q4 y6 u3 U7 C$ Z9 w3 a" M! p. r1 q1 [6 [- E% Q
　　犯错机率：一般
2 q5 t( v; k, k9 Q3 v5 J　　普遍性：较少
& {8 ], s5 L. n2 W　　犯错可能性：不知道Tab更好用1 @! B* I/ s, d; y( q) x
, a3 q8 g' Y& V& [9 B* e) a
　　这一个问题针对js、vbs、asp、php之类，html不能使用Tab会写一点程序的都知道什么叫缩进，怎么样缩进？有人使用空格，有人使用Tab，如果你是使用空格的，那么从现在起，改用Tab吧。
% ?: R9 N$ Z6 i  T( [4 J0 x
4 i, Y- K- d8 f7 z8 N　　使用空格有二大坏处：1、缩进速度慢、修改速度慢。2、增大网页体积，会影响速度。