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

admin

1.网页背景色的设置
2 V/ h9 C- ^% ^2 }" @) H  D; p* x1 C- j4 j2 O7 ~& k
　　犯错机率：很大7 \1 v; |7 T. e6 x+ y4 x, Z' t8 C
　　普遍性：较广
9 L2 R7 G6 M$ {, @; U　　犯错可能性：懒/不知道
2 V1 L2 ]$ X( V3 \. Y/ @( H! Z# B/ ?
% ]5 m5 d  y8 Q; o' \" {　　约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Email通知了他们，自此之后这个问题我从没犯过。
, n1 {3 I/ t9 R" X" E; {/ C1 K& C
+ H4 d3 J  ?  G　　绝大部分人的窗口背景颜色都是白色，但如果象我这样个性的人，就会把windows窗口的背景颜色改成灰色或其他色，这样一来，如果你没有设置网页的背景颜色的话，你以为正常的网页在我的电脑上看起来会是一团糟。
: @( @5 d7 k. i' J
( P- n6 i& Y4 U* s5 y' r4 x8 e　　2.Align center（自动居中）的滥用
: Q8 h& l2 R7 P. Q2 ?
$ x: ^) o" _$ }& V: q: Q　　犯错机率：非常大
9 Y0 Q& s: Q& j$ ~1 b　　普遍性：非常广3 O( a9 {. u( U, N4 z
　　犯错可能性：以为方便/以为好用
2 J6 W4 [) }/ J+ \- @6 d! ?; q
- K& G# s: N4 l- d( N　　工作中，修改、维护别人的网页是家常便饭，发现不少人有一个陋习：
0 {( O7 w: w! V/ w( U　　在表格中的文字或图片，你是这样来令它居中、靠左或靠右过？
5 H0 X) G/ n0 s* q" W/ U5 o1 Q! I3 R
　　<div align="center">大家好啊！！</div>" N; V& d# Q4 X& E/ i+ ]
　　<div align="center"><img src="xx.gif"></div>
4 t: y: _4 n) w9 q. \
/ ]& X5 l. |# I* F$ A$ i" h  Q　　当有些表格很多、文字很多、内容分得很细的时候，爱用这种方法（它在DW里的快捷键是Ctrl+Alt+C，FP不知道是什么）的人往往会狂用，惨了，我一碰到这样的网页就头痛，为什么要用那么多<div>来居中呢？tell me why？难道表格没有居中属性吗？为什么要加入这些垃圾代码？特别修改的时候也不能把文字或图片删除了就能自动清除<div align="center">这个代码，还要手工去清除，在复杂点的网页中就会无故地浪费维护者一笔时间。7 y$ d  z, u+ g# n4 k
1 G$ J" p! ~# ~, _1 c
　　建议使用<td align="center">来居中，当需要多重定位的时候，才考虑<div align="center">，因为这个代码并不好处理，所以能用表格代替就用表格替代。: y. e5 U/ j9 N& x: e" c

$ Q1 e. P! y& f9 d, S　　3.重复使用实现相同功能的代码、或杂七杂八的乱套代码6 p4 h" \8 _" M' S1 a

' ^9 q3 m1 Z. _! A; A1 g　　犯错机率：非常普遍* k: [$ d6 K, i  l6 q, B& `+ H
　　普遍性：非常普遍& L5 l/ F9 y; a& h3 g
　　犯错可能性：复杂多样
8 {& r- }% C2 L
* Y; P8 C. Z3 b+ Z+ V  f5 o　　大家先来看一看下面的代码：, ^% ~3 i& i3 q' V/ Z
　　<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>
3 E- c6 l+ Q1 v3 C: J# `; f+ ~, a3 T3 L4 P; S: l/ L  ~! ^* w' X- t% Z
　　我不知道读者有什么感觉，压根我一看到这样的代码就会先自我麻木十来秒，这十来秒目的是为了找一个能表达我的思想感情的词（我？你想反问我吗？sorry~~，我一般不犯，因为我做网页至少有一半以上的时间在浏览代码，代码中多了不该多的东西我一眼就能看出来。）。
2 F6 H. }$ L4 B/ o/ x) ~4 d! X# G, ?1 q
　　看看上面的代码，使用了2个class，4个font来定义2个文本，其实这样的问题很多时候是在大家不断的修改中产生的，对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重，当然，事实上别人浏览这个网页的时候，是没有任何问题的，但维护的人就…………。5 {4 C1 v2 t" A2 }1 e. {
这些多余的垃圾代码完全是可以省略掉的，其实上面的例子不够严重，更恐怖的我都见过。. ?: [2 g7 ^! X% |- O: @

3 ^/ Y! o$ ~! N3 K5 r2 k　　另外还有一个问题也要提提的，就是<p>...</p>和<center>...</center>，为什么要用它们呢？tell me why~~，有甚者是这样的：  ?' k, C- H, s- P) z1 {& I

, b+ Y: Y7 V) d' M5 |" U<td><div align="center" class="css_id">1 ?9 v+ W8 W& e7 Z5 V/ B
<center>
( f4 K) r, x3 E5 o<p align="center"></p>2 x0 }, T# h# m+ u, U7 [$ X8 p
< 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>
. ?% W4 w+ g* |6 T5 _( J' s3 t6 m% S4 l- s' [+ l; p0 c  }; n/ P
　　看到这样的代码我是会很无奈的（更无奈的是我经常看到，而且必须看），我来简化一下：5 [  Y6 O. Y' U: r  _# j: I
< td align="center" class="css_id"><br><font color="#FFA76C" style ="font-size:14px;font-family:隶书">标题</font><br>你觉得这样的代码看起来感觉怎么样呢？</td>
  p4 V: ?  t' o! x3 C9 l9 G# b4 |1 ^( q5 `1 L( \
　　是不是看起来觉得这个世界安静了很多？"标题"后面的文字完成可以定义在<td>的class里，就算不用css，再用多一个<.font>也没问题，一样很清爽。
- a0 r5 L+ n# J  m$ l1 L7 R- D1 ~
　　4.表格不正确嵌套2 f: l9 p" H8 N6 z& n, d8 `4 q
* H( i5 _1 L3 x+ ^( y) N
　　犯错机率：一般
1 Z7 \7 B2 c! [& Y5 W　　普遍性：普遍$ C( j6 A+ t) ?: s& T  M
　　犯错可能性：对这个不了解. {+ q& H3 v( L; W( w+ M

( R+ q, }! q! t　　其实这是一个街知巷闻的问题了，但还是不断有人犯，不正确的嵌套表格，可能会令到你被老总叫到办公室里臭骂一顿，会令到你以为正常的网页用ADSL开2、3分钟都开不了。" o2 Z/ z. A8 I* R4 r( ?( x

2 g* @4 M$ }0 T' \0 y　　先讲第一个问题，就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。- g" J' C( K2 z
7 Z" S2 s: [1 F! Z
　　第二个问题就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，嘻嘻，你猜有可能出现什么情况呢？其实也没什么大不了的，最严重的就是你的IE象死机了一样，什么都没显示。解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。
. S) a7 z" D7 v6 z$ u1 y4 R
/ h# s2 q2 i# o* k/ F, P　　5.写代码缩进的时候，不是使用Tab而是使用空格
7 a# b' v# ?8 l  T5 I0 X9 L
2 x  i$ T, {$ W' q  e, [　　犯错机率：一般
( N6 x$ L4 r' z$ d2 L　　普遍性：较少
9 N: n" h0 z# y! r7 O　　犯错可能性：不知道Tab更好用0 I, V0 T7 O# O( |

- Y; L- n, j$ A( C( Z8 ~  ?! R　　这一个问题针对js、vbs、asp、php之类，html不能使用Tab会写一点程序的都知道什么叫缩进，怎么样缩进？有人使用空格，有人使用Tab，如果你是使用空格的，那么从现在起，改用Tab吧。6 b8 M% f, a8 L

# {$ r! [' n, X- T　　使用空格有二大坏处：1、缩进速度慢、修改速度慢。2、增大网页体积，会影响速度。