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

admin

1.网页背景色的设置
  `" r# i! d# z9 e0 k
5 |6 m: d, W; \0 O; M$ g8 V2 w6 m　　犯错机率：很大3 S1 n; D/ t, t: q( G! t
　　普遍性：较广: s% m2 g& D. U- ]. ^0 q" W
　　犯错可能性：懒/不知道
- w1 i; o0 n& }5 a: V* q, [
% T2 i6 R, G$ d3 }# o4 \　　约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Email通知了他们，自此之后这个问题我从没犯过。& E8 p7 g- B/ z2 K4 W4 k

% f( T  L& b* r# {　　绝大部分人的窗口背景颜色都是白色，但如果象我这样个性的人，就会把windows窗口的背景颜色改成灰色或其他色，这样一来，如果你没有设置网页的背景颜色的话，你以为正常的网页在我的电脑上看起来会是一团糟。
% m: m; Q( Z% r8 y9 c
! u& x8 `! x! G. q  b; z5 D　　2.Align center（自动居中）的滥用6 v" B2 T( L- u. m
1 |( w/ c$ @6 h! ]' n* ]
　　犯错机率：非常大$ Z! _) S# ~! ]! l5 f
　　普遍性：非常广( c1 {- c8 f% z1 I& d9 R* N% u
　　犯错可能性：以为方便/以为好用) \) s, l# A( i6 q

+ ^! U' @- P0 j. {　　工作中，修改、维护别人的网页是家常便饭，发现不少人有一个陋习：' M6 S) Q+ T9 C  h% z& I8 {2 a
　　在表格中的文字或图片，你是这样来令它居中、靠左或靠右过？
( U6 T, l& K2 B
7 [1 W6 ~3 Y' Q) z5 W　　<div align="center">大家好啊！！</div>
' {3 o: o; y$ d! G2 l0 e　　<div align="center"><img src="xx.gif"></div>
2 ]6 ]( A: f9 @6 ~9 W5 y$ L% M; u
8 w6 j, H# Z2 U: o% x　　当有些表格很多、文字很多、内容分得很细的时候，爱用这种方法（它在DW里的快捷键是Ctrl+Alt+C，FP不知道是什么）的人往往会狂用，惨了，我一碰到这样的网页就头痛，为什么要用那么多<div>来居中呢？tell me why？难道表格没有居中属性吗？为什么要加入这些垃圾代码？特别修改的时候也不能把文字或图片删除了就能自动清除<div align="center">这个代码，还要手工去清除，在复杂点的网页中就会无故地浪费维护者一笔时间。8 ~2 R! o. S- ^$ D+ T

; h0 w. Z0 U3 Y  |1 l8 q- t　　建议使用<td align="center">来居中，当需要多重定位的时候，才考虑<div align="center">，因为这个代码并不好处理，所以能用表格代替就用表格替代。
/ ?5 S& \4 p- [" ?9 ?4 s( n4 b, A+ o
, o. L4 f5 ~$ R　　3.重复使用实现相同功能的代码、或杂七杂八的乱套代码
) @- I/ i3 U. `' m* m. U2 e6 z# q8 ~- h* D" u
　　犯错机率：非常普遍7 g0 k* K8 s5 ?9 |
　　普遍性：非常普遍& |; F4 u6 Z* y8 ?1 W# _" \
　　犯错可能性：复杂多样
& y! f; y& A% B8 Z7 S4 D" T5 U, H" u, p# L. P# M7 m$ @! }
　　大家先来看一看下面的代码：
0 f1 Y- o9 o* J5 v! y& B( o　　<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>& K: O4 \% ?4 e8 `
# g2 k" h; W' b6 Y5 L5 @
　　我不知道读者有什么感觉，压根我一看到这样的代码就会先自我麻木十来秒，这十来秒目的是为了找一个能表达我的思想感情的词（我？你想反问我吗？sorry~~，我一般不犯，因为我做网页至少有一半以上的时间在浏览代码，代码中多了不该多的东西我一眼就能看出来。）。' D+ Z- @/ F6 }+ J) T1 y* t
. S* y6 [% C1 b) P
　　看看上面的代码，使用了2个class，4个font来定义2个文本，其实这样的问题很多时候是在大家不断的修改中产生的，对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重，当然，事实上别人浏览这个网页的时候，是没有任何问题的，但维护的人就…………。
4 Z& V  p8 j: x& [这些多余的垃圾代码完全是可以省略掉的，其实上面的例子不够严重，更恐怖的我都见过。
% t1 ]+ d$ a/ n7 ~, ?& U1 ~* ?" ]6 @' S1 N6 \$ K6 p
　　另外还有一个问题也要提提的，就是<p>...</p>和<center>...</center>，为什么要用它们呢？tell me why~~，有甚者是这样的：8 P+ N7 V) x, T2 W- x; u& Y& p# I

. }- q' ~) K  Z$ B) U4 f* i* d<td><div align="center" class="css_id">0 v, [- K4 X1 V
<center>2 e) i! U- Z: S9 l3 Y
<p align="center"></p>! ^1 H; @' ?- `3 H& y) E
< 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>
! }3 a; V  m! f) T! J1 @% `$ L: _9 a, A/ i9 h9 U% u2 x
　　看到这样的代码我是会很无奈的（更无奈的是我经常看到，而且必须看），我来简化一下：: b  M" v/ V1 c" ^$ E& P7 ^  i9 i3 N
< td align="center" class="css_id"><br><font color="#FFA76C" style ="font-size:14px;font-family:隶书">标题</font><br>你觉得这样的代码看起来感觉怎么样呢？</td>+ |  p) D& v* N- T1 q
: I. r' I+ d, K/ N
　　是不是看起来觉得这个世界安静了很多？"标题"后面的文字完成可以定义在<td>的class里，就算不用css，再用多一个<.font>也没问题，一样很清爽。6 i: |: q0 h3 a1 ?

7 H1 y" B' h9 v$ D: ^4 A% J$ |　　4.表格不正确嵌套
/ M, d/ P4 c$ H" ?# ?0 b$ I1 D0 m9 i: A. z2 b' Y) E
　　犯错机率：一般
9 I- @" T% X  I5 X3 O( G　　普遍性：普遍3 [" }  t6 w( a7 |/ @% H9 }
　　犯错可能性：对这个不了解$ B6 o/ A/ M9 S; L0 b) I, f

: w* Y9 ]+ K0 B" o$ l' C4 C　　其实这是一个街知巷闻的问题了，但还是不断有人犯，不正确的嵌套表格，可能会令到你被老总叫到办公室里臭骂一顿，会令到你以为正常的网页用ADSL开2、3分钟都开不了。
) z0 l" a  t' }  \9 V
; G% X0 _! M/ [7 ~1 m3 ~; o: \　　先讲第一个问题，就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。* j( g9 g* v+ e! ^: m9 h
8 ^+ M: Z# ~3 D) D7 x% D8 v6 L
　　第二个问题就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，嘻嘻，你猜有可能出现什么情况呢？其实也没什么大不了的，最严重的就是你的IE象死机了一样，什么都没显示。解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。6 y$ G) t- q1 J6 ^+ h
$ ]: H! `( F. `* S9 F! r: `- Q. O
　　5.写代码缩进的时候，不是使用Tab而是使用空格  h0 ^/ Z3 N& x/ t; s  d. y
3 M* ~% c% i& [! |% ?6 E
　　犯错机率：一般# t- l( {. K8 T- t' L* B  k6 W
　　普遍性：较少. C, J' F! w( w4 S; O2 t* G5 l
　　犯错可能性：不知道Tab更好用+ h0 z( q0 F0 s  h: h% ]3 g
- ]3 F2 R  i/ E% t
　　这一个问题针对js、vbs、asp、php之类，html不能使用Tab会写一点程序的都知道什么叫缩进，怎么样缩进？有人使用空格，有人使用Tab，如果你是使用空格的，那么从现在起，改用Tab吧。
  W% \' f* ?' _" i7 p( W, J& {* d6 [, V: e$ V" r
　　使用空格有二大坏处：1、缩进速度慢、修改速度慢。2、增大网页体积，会影响速度。