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

admin

1.网页背景色的设置 8 O( O- |0 H" \3 L

% w% W% x5 W. s- T- Z. L* E* r' k　　犯错机率：很大
& O' E) I6 n6 [5 f　　普遍性：较广5 W* F1 N+ C6 @. o( }% |  s
　　犯错可能性：懒/不知道1 R$ x. p/ @. z- d! G: \! \
, T1 n5 U* Q3 t
　　约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Email通知了他们，自此之后这个问题我从没犯过。
" [" K, d& n, ?1 e" I+ [/ x# `7 `: `& ?$ O, Z; p1 A$ U
　　绝大部分人的窗口背景颜色都是白色，但如果象我这样个性的人，就会把windows窗口的背景颜色改成灰色或其他色，这样一来，如果你没有设置网页的背景颜色的话，你以为正常的网页在我的电脑上看起来会是一团糟。, N. M2 u1 q" J8 y. q# V

! i$ l+ G$ y  t6 e9 X+ Y! M/ W　　2.Align center（自动居中）的滥用; w" F2 s* T  ]9 l
3 a3 Z; y% v% }: l! ~; M3 L* P
　　犯错机率：非常大; }- ~$ T) T! I
　　普遍性：非常广
1 W6 l3 j: H9 J* ~+ A1 H9 n3 i　　犯错可能性：以为方便/以为好用' s* f. z/ w+ P: W7 b
* o# G: h9 H9 b. p2 \6 y: _
　　工作中，修改、维护别人的网页是家常便饭，发现不少人有一个陋习：7 q$ X, y* q. M
　　在表格中的文字或图片，你是这样来令它居中、靠左或靠右过？
% R9 y  m& S: ~( V  m
! ^: B- e$ Q  V8 Z& N　　<div align="center">大家好啊！！</div>
' W! f3 T; K, O: o# ~　　<div align="center"><img src="xx.gif"></div>
, e& n* ?2 H% Y% L4 @3 V( b* z8 L8 D
　　当有些表格很多、文字很多、内容分得很细的时候，爱用这种方法（它在DW里的快捷键是Ctrl+Alt+C，FP不知道是什么）的人往往会狂用，惨了，我一碰到这样的网页就头痛，为什么要用那么多<div>来居中呢？tell me why？难道表格没有居中属性吗？为什么要加入这些垃圾代码？特别修改的时候也不能把文字或图片删除了就能自动清除<div align="center">这个代码，还要手工去清除，在复杂点的网页中就会无故地浪费维护者一笔时间。
  V- N" H5 G; w3 M- M3 C
& b3 f$ N$ y$ l* Q: L! i( a6 \3 _　　建议使用<td align="center">来居中，当需要多重定位的时候，才考虑<div align="center">，因为这个代码并不好处理，所以能用表格代替就用表格替代。
* y% }; M7 w) E& p9 ?, q3 H& j. o" _9 n9 g: Y
　　3.重复使用实现相同功能的代码、或杂七杂八的乱套代码6 a0 W$ ^( i& _5 J9 I$ [5 R
* U- W! Z0 v1 x1 M
　　犯错机率：非常普遍1 t& o9 k/ o/ w. A7 W; A
　　普遍性：非常普遍
2 O( s; X- o3 m) x! Y6 X　　犯错可能性：复杂多样
+ E6 _' Q5 Q' U' k( a  c
! X! ]  O4 t6 s' {4 P7 G　　大家先来看一看下面的代码：, V; F. c8 ^5 G& N* d
　　<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>4 t8 B4 s. U( Z! F2 R( \
: ^: i: K6 ]. T2 H. P
　　我不知道读者有什么感觉，压根我一看到这样的代码就会先自我麻木十来秒，这十来秒目的是为了找一个能表达我的思想感情的词（我？你想反问我吗？sorry~~，我一般不犯，因为我做网页至少有一半以上的时间在浏览代码，代码中多了不该多的东西我一眼就能看出来。）。
% j0 ?6 a- q( j/ Y) q& f+ r1 `# E8 {: M9 R$ ^' s
　　看看上面的代码，使用了2个class，4个font来定义2个文本，其实这样的问题很多时候是在大家不断的修改中产生的，对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重，当然，事实上别人浏览这个网页的时候，是没有任何问题的，但维护的人就…………。
' G( ^- A! x* q5 J% \  T6 d4 @这些多余的垃圾代码完全是可以省略掉的，其实上面的例子不够严重，更恐怖的我都见过。
5 n" e5 ^0 M3 V: T# c
1 d: r( |+ P1 {) D) R, S* t　　另外还有一个问题也要提提的，就是<p>...</p>和<center>...</center>，为什么要用它们呢？tell me why~~，有甚者是这样的：5 Z% D- x. {/ y5 ~

7 ~$ D! s- I* k<td><div align="center" class="css_id">4 a8 r+ A. P: \
<center>% t( |. n* L# ]& `3 ^3 D9 T' v
<p align="center"></p>
3 o* w8 h& K$ z" B< 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>- q2 u0 A9 T' c  J1 e

+ r5 _' ]  l+ j9 n; h# q9 F& M　　看到这样的代码我是会很无奈的（更无奈的是我经常看到，而且必须看），我来简化一下：" i# l4 w2 }4 F1 J  w+ p% ~
< td align="center" class="css_id"><br><font color="#FFA76C" style ="font-size:14px;font-family:隶书">标题</font><br>你觉得这样的代码看起来感觉怎么样呢？</td>7 E' a7 Z, n/ ^( D8 K

2 x  g/ {& ^2 l5 ?2 }, w: z* W　　是不是看起来觉得这个世界安静了很多？"标题"后面的文字完成可以定义在<td>的class里，就算不用css，再用多一个<.font>也没问题，一样很清爽。
/ V! t0 V3 A, h# M  K
( @: }5 D" p$ s; k　　4.表格不正确嵌套0 z6 v: t6 i" R; y) Q& D
- C& d8 q6 w1 `
　　犯错机率：一般
( J8 a" {# p6 v( k) Q& ~　　普遍性：普遍
, ^* I. I, _/ F　　犯错可能性：对这个不了解' g2 M$ q6 l! F4 i- V
: E4 [$ T& x4 s
　　其实这是一个街知巷闻的问题了，但还是不断有人犯，不正确的嵌套表格，可能会令到你被老总叫到办公室里臭骂一顿，会令到你以为正常的网页用ADSL开2、3分钟都开不了。
* _' L! ^1 Z  B8 [# C8 r
3 Z& q3 v5 ~' ~* J" l% X9 O　　先讲第一个问题，就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。, J1 l; O, `: B# c$ w% I: u
/ L* E) V) ^$ b# Q  U+ G- d' v! s" {
　　第二个问题就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，嘻嘻，你猜有可能出现什么情况呢？其实也没什么大不了的，最严重的就是你的IE象死机了一样，什么都没显示。解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。, ?* b3 b9 \0 j, g! a8 q

9 _0 g9 G! N. e! r; {　　5.写代码缩进的时候，不是使用Tab而是使用空格/ i" C" e; [8 y7 E% ]7 e
, f# Y: k9 h! p
　　犯错机率：一般. ]2 U0 ^. K, a4 S
　　普遍性：较少
; a) p2 I; m3 K  I. D, {　　犯错可能性：不知道Tab更好用
5 n/ D2 m+ H# B7 G( F( \
# f4 c; x! [0 d, b1 [  F" Z% G　　这一个问题针对js、vbs、asp、php之类，html不能使用Tab会写一点程序的都知道什么叫缩进，怎么样缩进？有人使用空格，有人使用Tab，如果你是使用空格的，那么从现在起，改用Tab吧。7 M, o4 `1 u2 J1 T
& L" d2 i& q3 \2 F0 ?/ }
　　使用空格有二大坏处：1、缩进速度慢、修改速度慢。2、增大网页体积，会影响速度。