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

admin

1.网页背景色的设置   g& P- e, {8 c
6 {  {: X4 p4 n8 o4 c6 C/ s
　　犯错机率：很大5 _9 H# ]) A9 x8 {! `0 @+ Q5 Z
　　普遍性：较广0 [7 Z# X) }+ N" s
　　犯错可能性：懒/不知道
! B/ c4 Q0 q/ S  {7 X' M: i) s( X
  |& y8 W* p7 p3 Z　　约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Email通知了他们，自此之后这个问题我从没犯过。' p1 s3 F2 _  Y& L! K8 L+ g
9 L1 \( @: F+ u  _
　　绝大部分人的窗口背景颜色都是白色，但如果象我这样个性的人，就会把windows窗口的背景颜色改成灰色或其他色，这样一来，如果你没有设置网页的背景颜色的话，你以为正常的网页在我的电脑上看起来会是一团糟。. J4 E9 a" \4 J$ ~* M

4 \  [# B. p, }3 ^1 B* J& I# i# Y　　2.Align center（自动居中）的滥用* `% n% A. F" i7 Y0 m" k" H
. A% P" A( F0 e/ A$ Q
　　犯错机率：非常大
. j  @( f6 \) G( U1 H3 G　　普遍性：非常广$ o- N! `, S9 {0 h9 ~/ c; ^
　　犯错可能性：以为方便/以为好用. l1 ^* s; I1 z7 r, j$ x8 C& b
9 }) n- I1 l6 \" g9 b
　　工作中，修改、维护别人的网页是家常便饭，发现不少人有一个陋习：' X4 b" w8 d) t
　　在表格中的文字或图片，你是这样来令它居中、靠左或靠右过？
6 L; |3 j  s2 c5 l, Q
( p" ^8 o+ V" Y) i# E& P3 v( O　　<div align="center">大家好啊！！</div>
7 V' L8 g# K" z  v7 |" _6 O: a　　<div align="center"><img src="xx.gif"></div>" j/ Z! d0 m$ @0 A

$ ~2 z5 h7 f/ Z! h　　当有些表格很多、文字很多、内容分得很细的时候，爱用这种方法（它在DW里的快捷键是Ctrl+Alt+C，FP不知道是什么）的人往往会狂用，惨了，我一碰到这样的网页就头痛，为什么要用那么多<div>来居中呢？tell me why？难道表格没有居中属性吗？为什么要加入这些垃圾代码？特别修改的时候也不能把文字或图片删除了就能自动清除<div align="center">这个代码，还要手工去清除，在复杂点的网页中就会无故地浪费维护者一笔时间。* z. i. s# @% V8 H( I, I: Q: d

) T* S5 G- c* l  C' Y/ h( M　　建议使用<td align="center">来居中，当需要多重定位的时候，才考虑<div align="center">，因为这个代码并不好处理，所以能用表格代替就用表格替代。9 b4 U( l& {) I( h) h5 N

" _* K+ H6 }* Y0 q" L　　3.重复使用实现相同功能的代码、或杂七杂八的乱套代码: M6 Y$ s  Z& G/ @3 ?
: s2 y' {4 a9 Z1 d( [. p( y1 G$ R5 H
　　犯错机率：非常普遍  E& j& I2 u8 }3 U) i
　　普遍性：非常普遍
7 ~; D- G* I9 `. Q4 B5 C/ v2 @　　犯错可能性：复杂多样$ c& A. K& f; l" b/ N$ M
3 r) s0 |& t) P# a( {% i
　　大家先来看一看下面的代码：
- V; ^. B$ h6 }" o: w, u& m　　<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>( U2 G! o' F3 f# y- t' S! J
. Q: Z; V4 t6 v5 H7 D+ d, i
　　我不知道读者有什么感觉，压根我一看到这样的代码就会先自我麻木十来秒，这十来秒目的是为了找一个能表达我的思想感情的词（我？你想反问我吗？sorry~~，我一般不犯，因为我做网页至少有一半以上的时间在浏览代码，代码中多了不该多的东西我一眼就能看出来。）。% e1 M! U/ v" I) g8 Q0 d3 K
& m, h0 k% }  L  z; m
　　看看上面的代码，使用了2个class，4个font来定义2个文本，其实这样的问题很多时候是在大家不断的修改中产生的，对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重，当然，事实上别人浏览这个网页的时候，是没有任何问题的，但维护的人就…………。
7 z* {- x4 C' i4 d这些多余的垃圾代码完全是可以省略掉的，其实上面的例子不够严重，更恐怖的我都见过。
  A! C& ^1 y2 v
( r$ s* l! T/ }. M& O　　另外还有一个问题也要提提的，就是<p>...</p>和<center>...</center>，为什么要用它们呢？tell me why~~，有甚者是这样的：
) f/ Y, n: Q& e+ t/ D5 Q2 V9 s3 |' V* w! u
<td><div align="center" class="css_id">
9 \& E1 z: m$ P3 t<center>7 b  S, q* @3 `1 s( e7 }8 G
<p align="center"></p>& I1 v3 n$ F. B8 a0 k' f! h' C
< 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>; X4 l1 z+ q0 a9 X$ Q2 ^" T

# c" t8 S, |/ }7 I/ {7 z/ N　　看到这样的代码我是会很无奈的（更无奈的是我经常看到，而且必须看），我来简化一下：
* ~' H0 _8 d  i8 X# ?% _/ f< td align="center" class="css_id"><br><font color="#FFA76C" style ="font-size:14px;font-family:隶书">标题</font><br>你觉得这样的代码看起来感觉怎么样呢？</td>0 F' E2 o1 k& ]2 U/ L: ]( m

4 E0 j/ P! H$ N+ s( _　　是不是看起来觉得这个世界安静了很多？"标题"后面的文字完成可以定义在<td>的class里，就算不用css，再用多一个<.font>也没问题，一样很清爽。% w; ^1 r+ y! o- m+ U$ L9 B
" M5 S% P. q. v% \1 U  c' I5 d
　　4.表格不正确嵌套
7 X' G1 c: @# `7 ?
1 I9 Q/ W1 X# Y　　犯错机率：一般# W) l  q% k4 ~2 _+ K
　　普遍性：普遍+ Q# m# P  B0 N: M* u. _
　　犯错可能性：对这个不了解
" ]3 b! [2 @! _' d6 |, U
# s& s' @: B, }8 J+ s+ ?$ H' U7 y　　其实这是一个街知巷闻的问题了，但还是不断有人犯，不正确的嵌套表格，可能会令到你被老总叫到办公室里臭骂一顿，会令到你以为正常的网页用ADSL开2、3分钟都开不了。
" [& a  k( [2 m4 Z/ \0 R* X4 K5 J
5 g- ~1 L' O6 n/ G/ n　　先讲第一个问题，就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。
: M; w& h% `6 j) r) v; v6 r3 T
. I- ~) n6 y' L: ~2 ^" ^# {2 U* a　　第二个问题就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，嘻嘻，你猜有可能出现什么情况呢？其实也没什么大不了的，最严重的就是你的IE象死机了一样，什么都没显示。解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。
6 y$ c, I7 Q/ P+ D
! K% i% {: {( O. m4 h5 J　　5.写代码缩进的时候，不是使用Tab而是使用空格
5 m1 @1 l3 s. i0 I# A: i) }0 @8 h
  f0 g0 e( ?6 I8 S& V　　犯错机率：一般" A- m: `, O6 ~, H4 J
　　普遍性：较少
4 M+ g9 Z5 `( l+ }7 e& C　　犯错可能性：不知道Tab更好用
3 Z, ]/ J) o' r' b6 W% G' V$ E( {4 b4 i# `, E
　　这一个问题针对js、vbs、asp、php之类，html不能使用Tab会写一点程序的都知道什么叫缩进，怎么样缩进？有人使用空格，有人使用Tab，如果你是使用空格的，那么从现在起，改用Tab吧。
* r  B8 v1 T/ n7 _( E; L3 D- K* {. D. X7 l6 Y1 Y0 m+ ^( Y
　　使用空格有二大坏处：1、缩进速度慢、修改速度慢。2、增大网页体积，会影响速度。