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

admin

1.网页背景色的设置
9 m8 [% m+ [% V8 n. }8 P& ^
) Z( k* V9 G0 b9 n. J　　犯错机率：很大
6 F. y5 Z3 |* }% A  Q( F# J　　普遍性：较广
# O- n, B0 |) H  v　　犯错可能性：懒/不知道' M2 H  `4 Q3 o
. b" ~6 Q3 s" t  p9 {; G1 }
　　约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Email通知了他们，自此之后这个问题我从没犯过。/ x8 n9 p2 w1 c

! o0 o0 S: W: l$ v" D　　绝大部分人的窗口背景颜色都是白色，但如果象我这样个性的人，就会把windows窗口的背景颜色改成灰色或其他色，这样一来，如果你没有设置网页的背景颜色的话，你以为正常的网页在我的电脑上看起来会是一团糟。
3 n7 D0 o5 m: i6 m% p, _6 m
2 d9 Q% {' n9 b2 J4 q8 e& _　　2.Align center（自动居中）的滥用$ |; d$ z) _) a8 U

6 G6 z- S/ [4 Y5 `8 p! r　　犯错机率：非常大* M9 F4 J& X2 g! [  z( H
　　普遍性：非常广9 [. O" C" t+ C) `( u2 h
　　犯错可能性：以为方便/以为好用, s8 l' ~& _2 b+ `0 N* |& o0 Z: f

) A% k1 i7 {: T　　工作中，修改、维护别人的网页是家常便饭，发现不少人有一个陋习：
7 `3 n$ {# X, U# {" v　　在表格中的文字或图片，你是这样来令它居中、靠左或靠右过？; p/ }. c7 Q6 \" e6 N+ s& {
$ s2 \% [+ k  e4 s: H  I8 i
　　<div align="center">大家好啊！！</div>" S7 ], }& T3 O2 B9 N& W5 m
　　<div align="center"><img src="xx.gif"></div>
3 {$ q3 D0 A" \* ^- e( q9 v4 n! ]% p4 \& M# v
　　当有些表格很多、文字很多、内容分得很细的时候，爱用这种方法（它在DW里的快捷键是Ctrl+Alt+C，FP不知道是什么）的人往往会狂用，惨了，我一碰到这样的网页就头痛，为什么要用那么多<div>来居中呢？tell me why？难道表格没有居中属性吗？为什么要加入这些垃圾代码？特别修改的时候也不能把文字或图片删除了就能自动清除<div align="center">这个代码，还要手工去清除，在复杂点的网页中就会无故地浪费维护者一笔时间。* ~- H$ X4 N9 p

/ I* Y1 C& s% t2 e+ q' V  u　　建议使用<td align="center">来居中，当需要多重定位的时候，才考虑<div align="center">，因为这个代码并不好处理，所以能用表格代替就用表格替代。
/ _" R- ^. I( l% i) m# z5 F/ x$ S+ o: I
　　3.重复使用实现相同功能的代码、或杂七杂八的乱套代码
+ \$ \  [- ?+ F% X9 {2 e& f
' U1 U: s0 p6 q) A% i　　犯错机率：非常普遍
* g6 J2 e' k: O& c3 [9 a　　普遍性：非常普遍
0 p7 u) @$ s. q7 |  J1 _" }: q　　犯错可能性：复杂多样
  B9 S" s/ N) r/ x7 v2 q. ^' a" p; j# R) a
　　大家先来看一看下面的代码：
" v; N& g  K- Q+ j9 ]8 z2 A, c# |* }　　<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>1 F4 c/ w5 N5 ^5 O2 g: g- H

6 l& P) K! h6 f- r8 D　　我不知道读者有什么感觉，压根我一看到这样的代码就会先自我麻木十来秒，这十来秒目的是为了找一个能表达我的思想感情的词（我？你想反问我吗？sorry~~，我一般不犯，因为我做网页至少有一半以上的时间在浏览代码，代码中多了不该多的东西我一眼就能看出来。）。; Y! q& s: h0 I3 D. t( \

9 T( `. z: A' T　　看看上面的代码，使用了2个class，4个font来定义2个文本，其实这样的问题很多时候是在大家不断的修改中产生的，对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重，当然，事实上别人浏览这个网页的时候，是没有任何问题的，但维护的人就…………。
! f; u5 `9 Q( m9 x* g6 }这些多余的垃圾代码完全是可以省略掉的，其实上面的例子不够严重，更恐怖的我都见过。# ~# F5 @3 f0 t2 d9 ]

' G% [3 g3 {5 E8 ]1 j　　另外还有一个问题也要提提的，就是<p>...</p>和<center>...</center>，为什么要用它们呢？tell me why~~，有甚者是这样的：; u" W( X9 s8 |/ U

, a6 C+ U$ O6 k<td><div align="center" class="css_id">" D8 Y! w  u+ o8 `% d
<center>8 W' o) g& }$ Y# F; A
<p align="center"></p>
+ I* ^/ o. T1 r* Q< 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>
( T; ?3 f& J8 e- }' H, \  T7 f* M! ]8 l% R6 _
　　看到这样的代码我是会很无奈的（更无奈的是我经常看到，而且必须看），我来简化一下：
2 H) @; s/ X+ S: ~( ?< td align="center" class="css_id"><br><font color="#FFA76C" style ="font-size:14px;font-family:隶书">标题</font><br>你觉得这样的代码看起来感觉怎么样呢？</td>
: q5 N! f* |7 `. @, \1 Y- B
) d8 K$ R( N/ Z; @5 A　　是不是看起来觉得这个世界安静了很多？"标题"后面的文字完成可以定义在<td>的class里，就算不用css，再用多一个<.font>也没问题，一样很清爽。, L2 p) z- J3 y0 v# b/ U8 g

7 A5 K0 B- d7 T" ~$ C" V# r　　4.表格不正确嵌套
' q" @& D. c7 C" D) S
+ d% A, c* }$ q6 X6 e# m4 S　　犯错机率：一般
  A8 G4 t  d+ P6 p: a/ R; P　　普遍性：普遍. t/ c1 V/ Z5 f7 k( e0 ]* Z; d
　　犯错可能性：对这个不了解
1 }. V4 q8 V9 T' z3 B  z2 j' `1 u: I. {% ]# A
　　其实这是一个街知巷闻的问题了，但还是不断有人犯，不正确的嵌套表格，可能会令到你被老总叫到办公室里臭骂一顿，会令到你以为正常的网页用ADSL开2、3分钟都开不了。5 i0 T. X2 x" X* _2 ~$ A
8 J. ~6 h- A* h6 H2 Q" g7 Y9 K( C" V
　　先讲第一个问题，就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。
- W$ ?) i& S  p) k( @9 o7 y- f
- B# |8 m# `/ m( b　　第二个问题就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，嘻嘻，你猜有可能出现什么情况呢？其实也没什么大不了的，最严重的就是你的IE象死机了一样，什么都没显示。解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。" u8 O6 q. X* ]% ?
# u9 Z& U; P/ V, P5 K; A+ d
　　5.写代码缩进的时候，不是使用Tab而是使用空格
* N9 F8 q& Q% Y0 B
! b0 r$ Z2 K+ W! w. A5 Q. o　　犯错机率：一般
! R3 V. S  O4 D, [5 G- M3 E( R　　普遍性：较少% X1 g" m: b. }4 X! g
　　犯错可能性：不知道Tab更好用
. \, b" |) f4 v  \
. s/ }/ g, b# V  ^7 C　　这一个问题针对js、vbs、asp、php之类，html不能使用Tab会写一点程序的都知道什么叫缩进，怎么样缩进？有人使用空格，有人使用Tab，如果你是使用空格的，那么从现在起，改用Tab吧。
8 E: j% z+ `) N0 x; e$ Q8 R4 e
  t" m, ]( o& d) u- ?8 r. K　　使用空格有二大坏处：1、缩进速度慢、修改速度慢。2、增大网页体积，会影响速度。