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

admin

1.网页背景色的设置
- p7 z, K$ k* K2 Y  [% u
- ?3 O" ~( z4 _; l; ^) E　　犯错机率：很大
! e( W. L. m9 ]0 i4 ~9 c　　普遍性：较广
/ X; R2 s( Y6 J! B% M　　犯错可能性：懒/不知道
0 f. O4 b$ O8 c' u! k' u. _7 \7 g. J! f& K4 j! B
　　约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Email通知了他们，自此之后这个问题我从没犯过。
5 S6 W) F. m) A8 ~' V8 g8 a; i2 a
& \5 u; z/ C3 g7 {2 F; S8 g% \) v　　绝大部分人的窗口背景颜色都是白色，但如果象我这样个性的人，就会把windows窗口的背景颜色改成灰色或其他色，这样一来，如果你没有设置网页的背景颜色的话，你以为正常的网页在我的电脑上看起来会是一团糟。! z* |3 H1 f" [8 k2 |2 E) w
- w4 I! F1 P- n; I
　　2.Align center（自动居中）的滥用
( f9 A# i" i! Z$ r6 d# ~3 h
* A, k3 q  @+ C% B  M- w　　犯错机率：非常大
+ g) C: n( ~" l9 c* p' E1 X: g　　普遍性：非常广
2 B; Q" q/ M3 }# I& B2 k7 D, V　　犯错可能性：以为方便/以为好用
0 X/ `+ O* {6 e- }  l6 J0 X
4 O% T& a9 g8 y' }/ e" R　　工作中，修改、维护别人的网页是家常便饭，发现不少人有一个陋习：
. D7 {; y" @1 S4 v　　在表格中的文字或图片，你是这样来令它居中、靠左或靠右过？* E  z. p, v# S! Q' K3 w4 U& Z+ ]5 B3 w
$ z: {; G& O0 Y' Q8 x+ s; o
　　<div align="center">大家好啊！！</div>
) y8 r- A2 I+ i, M　　<div align="center"><img src="xx.gif"></div>
. s7 K; q3 O' p+ s$ R7 M, w0 z$ y4 q" F) w' k( @5 {
　　当有些表格很多、文字很多、内容分得很细的时候，爱用这种方法（它在DW里的快捷键是Ctrl+Alt+C，FP不知道是什么）的人往往会狂用，惨了，我一碰到这样的网页就头痛，为什么要用那么多<div>来居中呢？tell me why？难道表格没有居中属性吗？为什么要加入这些垃圾代码？特别修改的时候也不能把文字或图片删除了就能自动清除<div align="center">这个代码，还要手工去清除，在复杂点的网页中就会无故地浪费维护者一笔时间。
* Z- T7 h- g4 H, B9 m5 z
  I! {! W+ M* b% t& b　　建议使用<td align="center">来居中，当需要多重定位的时候，才考虑<div align="center">，因为这个代码并不好处理，所以能用表格代替就用表格替代。
: u0 S, y( h( w8 D
' ~, W+ O/ T. P; P  V/ q# Q　　3.重复使用实现相同功能的代码、或杂七杂八的乱套代码
( T2 C% c/ U# e% |# _4 }8 j) ~- s& [# y
　　犯错机率：非常普遍$ ^6 C5 [+ `" a, P) V( D: q" V
　　普遍性：非常普遍! ~$ Q  T+ ?% y# _8 R
　　犯错可能性：复杂多样
+ `. Q: j, d# m* e) s, Y# I
6 a- w8 Y7 L( U# l' ]$ |) L　　大家先来看一看下面的代码：
# C# A5 r, A' o; q7 V! W　　<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>
  _% D/ X' p/ ?& F$ Q8 u
" t/ Z7 A) C, s! }0 d3 J3 P　　我不知道读者有什么感觉，压根我一看到这样的代码就会先自我麻木十来秒，这十来秒目的是为了找一个能表达我的思想感情的词（我？你想反问我吗？sorry~~，我一般不犯，因为我做网页至少有一半以上的时间在浏览代码，代码中多了不该多的东西我一眼就能看出来。）。. u: O" Y1 s  s' j

) o4 f6 }$ m) T# ^) h1 `0 l( l* H　　看看上面的代码，使用了2个class，4个font来定义2个文本，其实这样的问题很多时候是在大家不断的修改中产生的，对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重，当然，事实上别人浏览这个网页的时候，是没有任何问题的，但维护的人就…………。# n1 \: D0 j$ ^1 a# c
这些多余的垃圾代码完全是可以省略掉的，其实上面的例子不够严重，更恐怖的我都见过。
* H; B, j, Y% n6 ~( l3 h  d
3 T; U9 W, u' ^. L　　另外还有一个问题也要提提的，就是<p>...</p>和<center>...</center>，为什么要用它们呢？tell me why~~，有甚者是这样的：) D4 E1 K! k1 z+ X) f; }- N" J

# s  t& y. ]* p  G: `/ @# ^<td><div align="center" class="css_id">/ c8 ^4 A9 U2 c) X1 C
<center>+ S) x# I3 T" S9 S' [
<p align="center"></p>8 r* e0 u2 n7 H( @) s, K! k
< 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>
; R- [/ c& u) I+ y2 y
: A! [2 t) u) h; N9 g　　看到这样的代码我是会很无奈的（更无奈的是我经常看到，而且必须看），我来简化一下：- k! D+ g/ e( S4 u& ]) n
< td align="center" class="css_id"><br><font color="#FFA76C" style ="font-size:14px;font-family:隶书">标题</font><br>你觉得这样的代码看起来感觉怎么样呢？</td>
4 q6 L1 r* Q- B
( n  y; w/ D4 Y9 \# c2 V4 h. M/ P　　是不是看起来觉得这个世界安静了很多？"标题"后面的文字完成可以定义在<td>的class里，就算不用css，再用多一个<.font>也没问题，一样很清爽。. r2 V/ k8 n" v3 U7 }
: `! v8 |% G4 n; s+ X
　　4.表格不正确嵌套6 s% ?6 D5 q7 r: U: S6 ]: X- f
1 d% H3 F) C% z: g( k
　　犯错机率：一般
; n6 l  L# g. j　　普遍性：普遍
: ~0 g6 Q" b; _  R　　犯错可能性：对这个不了解( t6 F, U; x1 ^% H/ v

$ H* u. F* G, j! Z5 P　　其实这是一个街知巷闻的问题了，但还是不断有人犯，不正确的嵌套表格，可能会令到你被老总叫到办公室里臭骂一顿，会令到你以为正常的网页用ADSL开2、3分钟都开不了。$ b" I/ F# }) h4 Z$ r

7 w5 I! `# i/ Q5 K9 b1 U　　先讲第一个问题，就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。
& s1 A) I+ q+ F
( ^7 ]( S( O1 q  N) W& o　　第二个问题就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，嘻嘻，你猜有可能出现什么情况呢？其实也没什么大不了的，最严重的就是你的IE象死机了一样，什么都没显示。解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。
% S2 {# k5 S6 I
4 B4 Y3 y, @1 U- N' v& Y9 O' `) a　　5.写代码缩进的时候，不是使用Tab而是使用空格* x8 L2 ^4 _2 p7 t
- P8 l# z/ C- e7 Q
　　犯错机率：一般9 x& O; ]9 K  x2 i' o/ b4 W
　　普遍性：较少
3 d" g1 v* A9 [1 g% s& r9 `( d/ Q' j　　犯错可能性：不知道Tab更好用
7 x3 S) i: U& n+ H
; T9 [) u; {3 a" X, D7 _　　这一个问题针对js、vbs、asp、php之类，html不能使用Tab会写一点程序的都知道什么叫缩进，怎么样缩进？有人使用空格，有人使用Tab，如果你是使用空格的，那么从现在起，改用Tab吧。
3 [  `: N. x/ y
. `; p7 f9 X5 Y" M; w$ H- `　　使用空格有二大坏处：1、缩进速度慢、修改速度慢。2、增大网页体积，会影响速度。