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

admin

1.网页背景色的设置
% ]/ n2 I* b1 E. Q  j3 t! m0 _# Z, F+ @% i4 t4 e, B/ Z8 p3 G
　　犯错机率：很大& V4 k; m: _, _* u' L
　　普遍性：较广# J/ m7 ^  V! |# p' i$ ~' X2 z
　　犯错可能性：懒/不知道+ L& a: b; X9 y' `+ m# X% E, N3 a

' A& a( q1 F3 q2 F4 a+ W, P- Q! F6 a　　约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Email通知了他们，自此之后这个问题我从没犯过。6 C" h! V; J2 d. h* G8 G

0 F9 g' g' U( G. _" R9 p　　绝大部分人的窗口背景颜色都是白色，但如果象我这样个性的人，就会把windows窗口的背景颜色改成灰色或其他色，这样一来，如果你没有设置网页的背景颜色的话，你以为正常的网页在我的电脑上看起来会是一团糟。- T: Q% A# b. Z: F

1 F; I2 B* S/ @" ~3 i: c% a　　2.Align center（自动居中）的滥用
; N1 H: K0 V! m. N. o" E
2 z! L/ ^' z- C" V. p) |　　犯错机率：非常大& J& Y# D; C- K& p+ y, S
　　普遍性：非常广
* X9 R1 V& S  g　　犯错可能性：以为方便/以为好用
' D) R# M& M/ u7 U! ^
& {0 u: @6 x- i& Y( @! N- k, }　　工作中，修改、维护别人的网页是家常便饭，发现不少人有一个陋习：" b% d3 }# n# R
　　在表格中的文字或图片，你是这样来令它居中、靠左或靠右过？4 l! t$ L# T: Y  @9 [; T$ m

; e7 p1 T: E. ^6 _2 i) f. }1 ?0 [. t　　<div align="center">大家好啊！！</div>' m6 {+ ^, S, C
　　<div align="center"><img src="xx.gif"></div>
6 {; e  A; X: I9 V) a* ?
  V6 F; X/ n7 O. w8 [* b# T% d& T　　当有些表格很多、文字很多、内容分得很细的时候，爱用这种方法（它在DW里的快捷键是Ctrl+Alt+C，FP不知道是什么）的人往往会狂用，惨了，我一碰到这样的网页就头痛，为什么要用那么多<div>来居中呢？tell me why？难道表格没有居中属性吗？为什么要加入这些垃圾代码？特别修改的时候也不能把文字或图片删除了就能自动清除<div align="center">这个代码，还要手工去清除，在复杂点的网页中就会无故地浪费维护者一笔时间。. k$ j; X4 @% F
* T) l" }( Z- S0 z/ z3 d
　　建议使用<td align="center">来居中，当需要多重定位的时候，才考虑<div align="center">，因为这个代码并不好处理，所以能用表格代替就用表格替代。
7 t3 n3 e) E1 D& O
* s. y# i+ E; X3 c　　3.重复使用实现相同功能的代码、或杂七杂八的乱套代码/ e2 k( I7 z. y. E7 p: r
" B  f! m6 N+ }9 n! O+ q
　　犯错机率：非常普遍
: E% r: v! U8 J! x; w8 I- o! B+ m　　普遍性：非常普遍
! d7 c2 H; m. s, |/ B+ f$ R　　犯错可能性：复杂多样
4 p2 b3 |2 _8 j& k* H
& u7 N/ \6 f  A$ H6 [　　大家先来看一看下面的代码：* v1 g6 m! [3 ]+ F; j' N0 ?
　　<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>3 y3 P" z0 n; r( b+ n
5 y5 K4 j+ K% C- S
　　我不知道读者有什么感觉，压根我一看到这样的代码就会先自我麻木十来秒，这十来秒目的是为了找一个能表达我的思想感情的词（我？你想反问我吗？sorry~~，我一般不犯，因为我做网页至少有一半以上的时间在浏览代码，代码中多了不该多的东西我一眼就能看出来。）。
5 _8 ?0 S# n. U5 f" K% C. W- I1 F( c
　　看看上面的代码，使用了2个class，4个font来定义2个文本，其实这样的问题很多时候是在大家不断的修改中产生的，对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重，当然，事实上别人浏览这个网页的时候，是没有任何问题的，但维护的人就…………。2 g2 N6 _+ n8 c# o0 G, T+ ~/ W
这些多余的垃圾代码完全是可以省略掉的，其实上面的例子不够严重，更恐怖的我都见过。
7 a  l* `# d: ^2 i, J0 l
( \8 ^& C6 O( I' h! @( }　　另外还有一个问题也要提提的，就是<p>...</p>和<center>...</center>，为什么要用它们呢？tell me why~~，有甚者是这样的：
+ c2 A4 d- ?/ T7 Q& t( ?. L5 n
: y2 N  S% v6 d0 Z. J<td><div align="center" class="css_id">
+ U7 ~$ S# p- y5 e6 q1 i<center>/ ^3 W: g& B) E" P3 u, P, k
<p align="center"></p>' f0 K- k3 G: S# W- S3 B; Y
< 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>, u9 B' S$ c% q  q8 e& h
) Q3 m7 ~- [$ d+ \# J. u- A: |( s
　　看到这样的代码我是会很无奈的（更无奈的是我经常看到，而且必须看），我来简化一下：
; C" f' J0 e6 W< td align="center" class="css_id"><br><font color="#FFA76C" style ="font-size:14px;font-family:隶书">标题</font><br>你觉得这样的代码看起来感觉怎么样呢？</td>
/ T; X; ?7 r6 E3 D5 e: |
7 ?1 H3 V1 ]5 J/ c- A" q) k　　是不是看起来觉得这个世界安静了很多？"标题"后面的文字完成可以定义在<td>的class里，就算不用css，再用多一个<.font>也没问题，一样很清爽。( A* x4 w! I9 ~
. D2 r4 P7 j( Y) O0 P, M
　　4.表格不正确嵌套
% i* g( I+ ~: f
3 o( ]4 j3 u: Z$ Y7 g* D* `　　犯错机率：一般8 V  w/ I$ e" a2 S7 E' V
　　普遍性：普遍
* R" t5 p( v! B" X  s+ V, t- ?7 ~- X( C　　犯错可能性：对这个不了解$ L: L5 @4 T6 Q* ^) D/ P+ ~
+ K( J  N! s$ y1 z! g2 t% z' ?
　　其实这是一个街知巷闻的问题了，但还是不断有人犯，不正确的嵌套表格，可能会令到你被老总叫到办公室里臭骂一顿，会令到你以为正常的网页用ADSL开2、3分钟都开不了。( `# d. w# {$ y6 ?1 [0 O. e
, x  k0 K7 Q- O: G+ ^
　　先讲第一个问题，就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。. W' o- f7 m: ]: m) h- O6 I
( l& `, M5 m6 L+ k" W9 z4 R+ t
　　第二个问题就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，嘻嘻，你猜有可能出现什么情况呢？其实也没什么大不了的，最严重的就是你的IE象死机了一样，什么都没显示。解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。" u. {4 o2 \0 Z% d7 Z

3 a& o$ K) p% \' y. g7 [　　5.写代码缩进的时候，不是使用Tab而是使用空格
: w3 w8 C% h* B$ f
* m/ U! j, [- n$ O, N　　犯错机率：一般
9 ^+ T, J: j5 o　　普遍性：较少
+ Z( s7 H/ S! m; s　　犯错可能性：不知道Tab更好用
7 e# l; D$ H" y7 K0 D! M1 W' x4 b) T  O( H, u) z" e( e6 I
　　这一个问题针对js、vbs、asp、php之类，html不能使用Tab会写一点程序的都知道什么叫缩进，怎么样缩进？有人使用空格，有人使用Tab，如果你是使用空格的，那么从现在起，改用Tab吧。
$ c1 D& n$ T0 U$ |3 e; V% \. X4 @# @$ ^# ^7 T0 ?% P, |7 E
　　使用空格有二大坏处：1、缩进速度慢、修改速度慢。2、增大网页体积，会影响速度。