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

admin

1.网页背景色的设置
$ G* \4 F# ?3 B& J7 R3 @! |* J) k: q6 X9 Z
　　犯错机率：很大
/ p0 p7 ?8 j1 v* G/ ^　　普遍性：较广
9 j: ~8 a$ i( N　　犯错可能性：懒/不知道( N. Z- I  B  Y' s

. R( n2 O5 `- Q! p- u1 p4 j+ B　　约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Email通知了他们，自此之后这个问题我从没犯过。
" G8 T5 ^+ |: S7 T' k
' y) T. {( |; I　　绝大部分人的窗口背景颜色都是白色，但如果象我这样个性的人，就会把windows窗口的背景颜色改成灰色或其他色，这样一来，如果你没有设置网页的背景颜色的话，你以为正常的网页在我的电脑上看起来会是一团糟。+ `& u4 u8 P6 a4 e/ ]$ h

9 k. G* @1 U; c% f/ Y　　2.Align center（自动居中）的滥用% e, }" k- `; m1 q1 |* q2 A
9 ^, N, n. c) X; e4 O
　　犯错机率：非常大/ e6 g% G+ t( Q% o
　　普遍性：非常广
4 L6 K7 L) s6 A! T9 S% \　　犯错可能性：以为方便/以为好用. K$ E7 p0 O$ u5 E8 o

3 o- p$ R  v! |% L) Y8 H　　工作中，修改、维护别人的网页是家常便饭，发现不少人有一个陋习：; M' g  z" o# h8 ?
　　在表格中的文字或图片，你是这样来令它居中、靠左或靠右过？
: b& n4 L# F- v% A5 r
9 k8 P1 w! ?; z' z  d) S: V9 t　　<div align="center">大家好啊！！</div>
2 [. b4 E0 f8 T: P4 X1 Q! h　　<div align="center"><img src="xx.gif"></div>
* ~) b$ F- L7 {, H: {6 S: C+ T7 v/ `* m6 ]# O! F
　　当有些表格很多、文字很多、内容分得很细的时候，爱用这种方法（它在DW里的快捷键是Ctrl+Alt+C，FP不知道是什么）的人往往会狂用，惨了，我一碰到这样的网页就头痛，为什么要用那么多<div>来居中呢？tell me why？难道表格没有居中属性吗？为什么要加入这些垃圾代码？特别修改的时候也不能把文字或图片删除了就能自动清除<div align="center">这个代码，还要手工去清除，在复杂点的网页中就会无故地浪费维护者一笔时间。* K# q- _; a* p: v9 [
7 `1 I# U6 y7 f4 R) Z0 N7 X
　　建议使用<td align="center">来居中，当需要多重定位的时候，才考虑<div align="center">，因为这个代码并不好处理，所以能用表格代替就用表格替代。
8 `: z' n% S4 C5 W9 d2 V
4 }, C; T2 e. c& @( k" h) N% X　　3.重复使用实现相同功能的代码、或杂七杂八的乱套代码
7 g9 Z3 e7 M( M+ f2 ?% S2 [0 p/ I$ Z; T( w" t" o& C, _( n
　　犯错机率：非常普遍
2 a0 ^6 `% q, b  q' I　　普遍性：非常普遍
- O1 c2 {9 l9 q$ O　　犯错可能性：复杂多样
' f, b6 S. ^- L1 Z' o) p- N/ Y6 r& }# q; |  @- i; _. H, F
　　大家先来看一看下面的代码：
8 G" k: `" v. V1 J　　<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>$ {' d7 Z, ~% u% J5 b' e' c

  l! S9 H% c/ I! u- M4 j　　我不知道读者有什么感觉，压根我一看到这样的代码就会先自我麻木十来秒，这十来秒目的是为了找一个能表达我的思想感情的词（我？你想反问我吗？sorry~~，我一般不犯，因为我做网页至少有一半以上的时间在浏览代码，代码中多了不该多的东西我一眼就能看出来。）。
. q% q! O' n; Q  p$ Q8 d* o% B4 _/ b8 |/ c8 j* u3 d4 o
　　看看上面的代码，使用了2个class，4个font来定义2个文本，其实这样的问题很多时候是在大家不断的修改中产生的，对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重，当然，事实上别人浏览这个网页的时候，是没有任何问题的，但维护的人就…………。) g' D# g7 j8 j- V4 ~
这些多余的垃圾代码完全是可以省略掉的，其实上面的例子不够严重，更恐怖的我都见过。% p. S- O& y: g' k; G$ _
5 L. |* t2 Z0 }/ q9 w
　　另外还有一个问题也要提提的，就是<p>...</p>和<center>...</center>，为什么要用它们呢？tell me why~~，有甚者是这样的：
4 N3 m& ~- k! `5 k5 X5 V' b/ s1 J
' D& [- b4 P+ Q1 Z& v$ g<td><div align="center" class="css_id">) r9 ~% x" e8 e& `1 z  x; t7 p
<center>7 z$ |" f( A0 _! |5 @% [
<p align="center"></p>
) l2 `7 e& D& ~6 S< 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>- m8 S. y7 N7 \0 ~! S( E

# Y. j( B' N: Y　　看到这样的代码我是会很无奈的（更无奈的是我经常看到，而且必须看），我来简化一下：
+ x, B1 l1 Q7 M5 e' @# [6 B< td align="center" class="css_id"><br><font color="#FFA76C" style ="font-size:14px;font-family:隶书">标题</font><br>你觉得这样的代码看起来感觉怎么样呢？</td>
: d+ e" _$ ?1 m5 S; s) ]% b
+ n, n# G8 E% g/ t1 ~4 @　　是不是看起来觉得这个世界安静了很多？"标题"后面的文字完成可以定义在<td>的class里，就算不用css，再用多一个<.font>也没问题，一样很清爽。
8 R- `; H- R9 C( {& J0 P! h& o4 \" G! G* P( U
　　4.表格不正确嵌套( c* e: i' D& G6 G: B. D4 U# m

9 N3 T' \: T% }1 n1 i　　犯错机率：一般
  j& ]1 {; q$ i' ^3 F　　普遍性：普遍6 X9 W8 `! h% i# R* p" }$ j
　　犯错可能性：对这个不了解
" j+ v3 s; [/ ^; T1 y, l) f: E! p9 d5 S* ~$ O
　　其实这是一个街知巷闻的问题了，但还是不断有人犯，不正确的嵌套表格，可能会令到你被老总叫到办公室里臭骂一顿，会令到你以为正常的网页用ADSL开2、3分钟都开不了。0 M/ o1 x0 v& e/ }  B) H

" `: k! k8 K0 Q2 Z* L7 V, a) M" \　　先讲第一个问题，就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。4 x& ?8 e+ t) h% n: e8 J
' \4 s$ r8 [0 Q. U
　　第二个问题就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，嘻嘻，你猜有可能出现什么情况呢？其实也没什么大不了的，最严重的就是你的IE象死机了一样，什么都没显示。解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。
6 C. p* B" s$ `" Q! f2 t
# P! A) _6 y) K: j　　5.写代码缩进的时候，不是使用Tab而是使用空格2 q% x: Z# f6 Y+ d" E9 v& H  s. l

& k. O' z, a) c. K　　犯错机率：一般
5 A& Y5 ?# o* ?; n7 c- y" Q　　普遍性：较少" B; t( C& |( v- a3 h
　　犯错可能性：不知道Tab更好用  i9 o' `+ }6 _6 a
4 J1 X; l* f" K4 z& {  }: c' C
　　这一个问题针对js、vbs、asp、php之类，html不能使用Tab会写一点程序的都知道什么叫缩进，怎么样缩进？有人使用空格，有人使用Tab，如果你是使用空格的，那么从现在起，改用Tab吧。
2 k: C/ Q( h1 a5 b6 Q% D  c
% F9 e/ K1 Y) G5 c　　使用空格有二大坏处：1、缩进速度慢、修改速度慢。2、增大网页体积，会影响速度。