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

admin

1.网页背景色的设置
5 b! g# a+ d- v+ u/ q8 p; a. S
5 ?8 _2 O1 c4 s5 [4 h2 u　　犯错机率：很大
, k: N- [3 I  z  y　　普遍性：较广
1 ?1 h. Z, I. I% M/ S+ z0 e+ U　　犯错可能性：懒/不知道
8 y/ v. S: a2 w/ M& R; x
1 }2 \. M% i- G" q　　约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Email通知了他们，自此之后这个问题我从没犯过。
' C5 K1 s+ Q; i2 m" J' c) R4 X1 ?& e2 }% u
　　绝大部分人的窗口背景颜色都是白色，但如果象我这样个性的人，就会把windows窗口的背景颜色改成灰色或其他色，这样一来，如果你没有设置网页的背景颜色的话，你以为正常的网页在我的电脑上看起来会是一团糟。
! M$ B/ a6 i  ?9 N# i8 a6 y  a2 h$ D" n" {6 I: \
　　2.Align center（自动居中）的滥用+ p3 Q+ ^& Y0 a8 D$ Z3 s$ Y; V

; a0 H& W6 ?  ]( V: O5 O! o　　犯错机率：非常大( z6 d/ g! `$ _$ y. x% k0 o
　　普遍性：非常广  h/ n' @! H, i
　　犯错可能性：以为方便/以为好用/ }: x# S! U: M4 \# S

+ J$ ^& y* K) f1 n+ K　　工作中，修改、维护别人的网页是家常便饭，发现不少人有一个陋习：. q: J0 O: h( g9 ?: ]5 w) G& g$ L
　　在表格中的文字或图片，你是这样来令它居中、靠左或靠右过？6 U9 g7 J1 I" w" R6 E% O. P" s

- I% u4 E0 R2 t　　<div align="center">大家好啊！！</div>
6 s* k6 X3 F6 o) ~( k; i　　<div align="center"><img src="xx.gif"></div>4 [- L) V. |0 d8 E% l$ b

1 M- s8 ~" d( \/ [, a  c　　当有些表格很多、文字很多、内容分得很细的时候，爱用这种方法（它在DW里的快捷键是Ctrl+Alt+C，FP不知道是什么）的人往往会狂用，惨了，我一碰到这样的网页就头痛，为什么要用那么多<div>来居中呢？tell me why？难道表格没有居中属性吗？为什么要加入这些垃圾代码？特别修改的时候也不能把文字或图片删除了就能自动清除<div align="center">这个代码，还要手工去清除，在复杂点的网页中就会无故地浪费维护者一笔时间。$ \9 r6 `# l2 r' e
) U2 ]" ]) `- D* p* F2 R
　　建议使用<td align="center">来居中，当需要多重定位的时候，才考虑<div align="center">，因为这个代码并不好处理，所以能用表格代替就用表格替代。
. }8 R# a5 C# _" M; d
! s7 i  {& |* F2 c& m- i& o2 E: C　　3.重复使用实现相同功能的代码、或杂七杂八的乱套代码
2 |+ Y% C1 A. |% e& t5 h! }8 l+ u# [2 f/ V6 Z& u
　　犯错机率：非常普遍& u4 T) A6 U. ]) y5 W: f6 n6 Z
　　普遍性：非常普遍
: Q& U$ R4 }2 J# n4 n5 J　　犯错可能性：复杂多样9 k) I4 c/ d9 V4 _& [9 j. b

/ v$ d/ V0 p0 h9 K8 ?　　大家先来看一看下面的代码：
2 E- {$ N9 ]- x$ h+ R: C$ N　　<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 J9 ^- Q! {9 @# S. g1 K8 Z
! k( F# `1 L+ J, W& V* `( @
　　我不知道读者有什么感觉，压根我一看到这样的代码就会先自我麻木十来秒，这十来秒目的是为了找一个能表达我的思想感情的词（我？你想反问我吗？sorry~~，我一般不犯，因为我做网页至少有一半以上的时间在浏览代码，代码中多了不该多的东西我一眼就能看出来。）。. D) d1 A: }+ H+ C1 u# n( q
. o. a/ L/ f$ B5 [9 a& d& A9 w
　　看看上面的代码，使用了2个class，4个font来定义2个文本，其实这样的问题很多时候是在大家不断的修改中产生的，对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重，当然，事实上别人浏览这个网页的时候，是没有任何问题的，但维护的人就…………。' E* e: a" x: a4 u4 ^1 v# k6 ~: n# N
这些多余的垃圾代码完全是可以省略掉的，其实上面的例子不够严重，更恐怖的我都见过。3 j; i& B0 v% N& J! D
. b6 [. B9 K  k( p% f
　　另外还有一个问题也要提提的，就是<p>...</p>和<center>...</center>，为什么要用它们呢？tell me why~~，有甚者是这样的：" J6 [4 L; X5 P! E* s6 _. G
3 L* a; |8 S  i9 Y0 s/ J: A
<td><div align="center" class="css_id">3 ~5 b  y2 _; z4 m- {+ G
<center>
7 R; v/ v1 W; j; x. C<p align="center"></p>% U0 `& p9 t; 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>
7 y) @; m) f. d  L# G
+ i2 r4 l" x' R: k9 o9 \1 v- f　　看到这样的代码我是会很无奈的（更无奈的是我经常看到，而且必须看），我来简化一下：- i- b# O! D! e/ I9 n# d
< td align="center" class="css_id"><br><font color="#FFA76C" style ="font-size:14px;font-family:隶书">标题</font><br>你觉得这样的代码看起来感觉怎么样呢？</td>8 ], @: |! Z0 y- j) n$ B
2 |7 i: S4 \9 O  C+ @7 i9 u
　　是不是看起来觉得这个世界安静了很多？"标题"后面的文字完成可以定义在<td>的class里，就算不用css，再用多一个<.font>也没问题，一样很清爽。
# {8 K5 U4 Y- p
% K) }5 z$ m5 ]' @1 Y0 S　　4.表格不正确嵌套
6 r! p. O$ ?9 A7 j; c( h) _. i9 \( M0 |; A& Y1 O
　　犯错机率：一般, m7 ~6 m7 U! z% G$ X
　　普遍性：普遍
, a0 Z& H* `- J6 L8 e　　犯错可能性：对这个不了解
- p( \/ K! G2 R! A; g! O% s$ ]9 w+ W; ?: {( K" B
　　其实这是一个街知巷闻的问题了，但还是不断有人犯，不正确的嵌套表格，可能会令到你被老总叫到办公室里臭骂一顿，会令到你以为正常的网页用ADSL开2、3分钟都开不了。0 Z% K- {6 ]" t# U2 ]

( |% \( L% ]7 e% O8 B　　先讲第一个问题，就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。
! O2 F1 s! G6 _5 l' o% g; Q3 U) B2 v0 b/ E1 Z
　　第二个问题就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，嘻嘻，你猜有可能出现什么情况呢？其实也没什么大不了的，最严重的就是你的IE象死机了一样，什么都没显示。解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。
3 P& v( C+ X" q& u$ C$ T9 h
3 Q( m/ S. S: r0 ~) q9 M% M　　5.写代码缩进的时候，不是使用Tab而是使用空格- f* }- p% B+ k" {
# k& m6 C( ^% o
　　犯错机率：一般$ t% j4 f; f/ o0 f6 x
　　普遍性：较少& {9 K8 h2 `' ~  X$ \7 j0 T8 b
　　犯错可能性：不知道Tab更好用
' {% ]* B; F! j( o& j
' \' E9 |. D' R/ Q. B$ S　　这一个问题针对js、vbs、asp、php之类，html不能使用Tab会写一点程序的都知道什么叫缩进，怎么样缩进？有人使用空格，有人使用Tab，如果你是使用空格的，那么从现在起，改用Tab吧。
6 G: u2 ^5 J4 w" E; C
4 K5 ]8 ^' Q8 ^# f1 A4 ~+ K* u　　使用空格有二大坏处：1、缩进速度慢、修改速度慢。2、增大网页体积，会影响速度。