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

admin

1.网页背景色的设置
6 B- D  X$ f. w, |  H/ A# g; C) u2 v) l& J4 c5 A  R; l& h
　　犯错机率：很大
# N  [7 J' ^9 W$ A0 D　　普遍性：较广
6 @0 ]" H8 Q6 r0 Q　　犯错可能性：懒/不知道9 v9 \: p5 R* v

2 p1 s. h; B7 b6 N/ d% M& F' R　　约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Email通知了他们，自此之后这个问题我从没犯过。
' P: u0 e  ]6 h
3 u- [- F$ A& D　　绝大部分人的窗口背景颜色都是白色，但如果象我这样个性的人，就会把windows窗口的背景颜色改成灰色或其他色，这样一来，如果你没有设置网页的背景颜色的话，你以为正常的网页在我的电脑上看起来会是一团糟。
) j( M7 r  B7 J3 J* \3 E& S0 E$ J1 R% q  y. ?; X
　　2.Align center（自动居中）的滥用
: L# y6 V. D( U0 F( o, M4 g
0 E. v9 ?3 |, U( B) G' h　　犯错机率：非常大) L  V% u% Q! O. ]* z! g' Y( k; r
　　普遍性：非常广
4 s2 G9 S; t6 R4 X0 U/ I2 C) l　　犯错可能性：以为方便/以为好用
' j! X% D3 D* V6 [/ ~9 M; x# v
8 [8 h# w5 ?# z. h6 I2 d- I. |* a　　工作中，修改、维护别人的网页是家常便饭，发现不少人有一个陋习：6 A6 ]3 f5 K9 f7 N  w
　　在表格中的文字或图片，你是这样来令它居中、靠左或靠右过？; n/ g" d! o1 y/ ]6 C6 }1 P% j

) U1 Y4 i3 Q& c* m5 J" e5 q  _' h9 [; ?　　<div align="center">大家好啊！！</div>
0 y. D2 l3 }1 |, V2 l* m( f　　<div align="center"><img src="xx.gif"></div>5 c2 A' u( \7 z% a' t& C* m

' j  h3 p9 N4 m1 t: L　　当有些表格很多、文字很多、内容分得很细的时候，爱用这种方法（它在DW里的快捷键是Ctrl+Alt+C，FP不知道是什么）的人往往会狂用，惨了，我一碰到这样的网页就头痛，为什么要用那么多<div>来居中呢？tell me why？难道表格没有居中属性吗？为什么要加入这些垃圾代码？特别修改的时候也不能把文字或图片删除了就能自动清除<div align="center">这个代码，还要手工去清除，在复杂点的网页中就会无故地浪费维护者一笔时间。
* J5 k% O$ S/ X2 _, E. E  j" w4 w
& w0 B1 g$ s% k7 r9 C4 R　　建议使用<td align="center">来居中，当需要多重定位的时候，才考虑<div align="center">，因为这个代码并不好处理，所以能用表格代替就用表格替代。- L$ I' e8 J: ?+ q7 h! @

9 z3 f, m+ _. o  ^% |0 j+ m　　3.重复使用实现相同功能的代码、或杂七杂八的乱套代码
5 h) f/ |7 q4 T) v0 I
" `# _5 x4 D2 O0 j: d- E　　犯错机率：非常普遍
7 {/ |% j& ^0 I+ S, B! C　　普遍性：非常普遍4 x% _4 }2 a+ t/ e+ Q9 {
　　犯错可能性：复杂多样3 L1 I) l( ~( O1 E# i
1 Q" N/ W6 N' L& Y7 w  G
　　大家先来看一看下面的代码：
8 H, W* W# P" o: J0 U1 E+ m% j( p9 D　　<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>
. i& v6 S7 O8 x0 X/ E4 i
: o8 T3 K) h& S+ w' G. W: l7 n- ]　　我不知道读者有什么感觉，压根我一看到这样的代码就会先自我麻木十来秒，这十来秒目的是为了找一个能表达我的思想感情的词（我？你想反问我吗？sorry~~，我一般不犯，因为我做网页至少有一半以上的时间在浏览代码，代码中多了不该多的东西我一眼就能看出来。）。5 g% D# b: e4 C5 h
$ D/ w7 m6 t4 {0 U( r% O
　　看看上面的代码，使用了2个class，4个font来定义2个文本，其实这样的问题很多时候是在大家不断的修改中产生的，对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重，当然，事实上别人浏览这个网页的时候，是没有任何问题的，但维护的人就…………。2 v" Q  _7 [5 ]' k4 j
这些多余的垃圾代码完全是可以省略掉的，其实上面的例子不够严重，更恐怖的我都见过。9 K( i$ k* w- T7 x3 @+ v! x

# z) E% c# }8 k7 U- L* n　　另外还有一个问题也要提提的，就是<p>...</p>和<center>...</center>，为什么要用它们呢？tell me why~~，有甚者是这样的：
$ h) d/ J9 U& e9 N% l$ V  x: G$ Q
/ m4 }0 A9 K5 s" c) w<td><div align="center" class="css_id">
" M- j- _& q& g7 W0 |<center>
" U6 W8 E! }8 n* ~<p align="center"></p>
, U0 E% I3 k$ o# @< 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>2 ~2 {* u2 L' f0 W% N. X) K6 ^6 g
. N) ~8 y6 l: _* c1 n
　　看到这样的代码我是会很无奈的（更无奈的是我经常看到，而且必须看），我来简化一下：  Q- e0 o+ n& @; [% X' }+ `/ h, `
< td align="center" class="css_id"><br><font color="#FFA76C" style ="font-size:14px;font-family:隶书">标题</font><br>你觉得这样的代码看起来感觉怎么样呢？</td>
7 E6 f) Z1 X; A! C3 @, C# \, j3 u2 Y9 J& k4 M  C$ e. f6 H
　　是不是看起来觉得这个世界安静了很多？"标题"后面的文字完成可以定义在<td>的class里，就算不用css，再用多一个<.font>也没问题，一样很清爽。
5 D+ G/ Q( E2 [8 }7 O( z+ Z( w3 M1 {8 W; e
　　4.表格不正确嵌套+ I3 @5 i7 h  W2 {1 W3 Y
! B+ F# `4 O' y3 E' H1 w$ Q- k
　　犯错机率：一般) a4 \' j2 _8 @1 z' v8 a1 R* d
　　普遍性：普遍
+ v/ r' M! u9 H5 N! U* J( @; X; Q　　犯错可能性：对这个不了解
8 C7 Z% ~2 _  [& P, h
1 G8 d& h$ r  R" r, ?% H) K　　其实这是一个街知巷闻的问题了，但还是不断有人犯，不正确的嵌套表格，可能会令到你被老总叫到办公室里臭骂一顿，会令到你以为正常的网页用ADSL开2、3分钟都开不了。
# Y2 `* w) E: x; `
/ o1 l! s: |9 o　　先讲第一个问题，就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。1 g4 |. H9 e2 ^

- A7 A4 V. J$ t! ?- g: N" M2 \　　第二个问题就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，嘻嘻，你猜有可能出现什么情况呢？其实也没什么大不了的，最严重的就是你的IE象死机了一样，什么都没显示。解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。  Y. D+ t2 L* x# E
/ r2 L/ a8 A( X; Y  S. g
　　5.写代码缩进的时候，不是使用Tab而是使用空格: g4 o8 N% J" G3 ]- w6 U7 {

% ]7 P* M& {& }1 _8 P　　犯错机率：一般
1 e, `7 ~5 G4 W3 p( n　　普遍性：较少
" ^4 T8 `, N# V9 H0 {　　犯错可能性：不知道Tab更好用
' ]  U2 t: Y/ C+ }" g$ q
! H' N. a  C$ a( c+ {, B　　这一个问题针对js、vbs、asp、php之类，html不能使用Tab会写一点程序的都知道什么叫缩进，怎么样缩进？有人使用空格，有人使用Tab，如果你是使用空格的，那么从现在起，改用Tab吧。
  x; M0 J2 |- q5 a' u0 z
* Y2 x6 {$ u( A, d7 C) w　　使用空格有二大坏处：1、缩进速度慢、修改速度慢。2、增大网页体积，会影响速度。