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

admin

1.网页背景色的设置 2 S1 o( l8 C/ z( Y2 s

) d: H, ^0 r- l　　犯错机率：很大
1 G# d! r2 t2 [  G　　普遍性：较广
  M' B) d5 m% e' U; L5 l　　犯错可能性：懒/不知道
& H, _( `/ V4 p" g$ F' o7 f( w+ l
0 E+ i/ i2 r7 A& W0 Z! V9 G　　约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Email通知了他们，自此之后这个问题我从没犯过。
7 t) H& m. U# T  ^' R
! y# o4 g+ j6 \$ V5 V, i; S' r; @6 L　　绝大部分人的窗口背景颜色都是白色，但如果象我这样个性的人，就会把windows窗口的背景颜色改成灰色或其他色，这样一来，如果你没有设置网页的背景颜色的话，你以为正常的网页在我的电脑上看起来会是一团糟。1 n: O- O6 ?% \6 ]

- {6 |/ `' d" G1 I9 ~% R0 w" Q) j　　2.Align center（自动居中）的滥用/ E1 k5 X  C. T  _! E! l& ?
6 p3 I  y3 `5 Z* h6 s  @
　　犯错机率：非常大
0 ^* W$ g' v# E　　普遍性：非常广0 n* o& _: j0 U3 s- N% [# z: Z, A' I
　　犯错可能性：以为方便/以为好用( l+ M& N/ L! I) V0 ^  d8 f. C
; _; Z  R' [- V0 b
　　工作中，修改、维护别人的网页是家常便饭，发现不少人有一个陋习：
  S* H7 T" V0 i4 e! V+ A: e# ?　　在表格中的文字或图片，你是这样来令它居中、靠左或靠右过？
9 {0 E5 [1 Q3 a6 @8 k, n0 q5 r1 Y$ e  ^
　　<div align="center">大家好啊！！</div>; T8 A* m- ^- Z
　　<div align="center"><img src="xx.gif"></div>' ^; \2 d5 Z; g) Z. e+ n/ ^5 S2 [
( d/ Q- c: m* e- w5 E
　　当有些表格很多、文字很多、内容分得很细的时候，爱用这种方法（它在DW里的快捷键是Ctrl+Alt+C，FP不知道是什么）的人往往会狂用，惨了，我一碰到这样的网页就头痛，为什么要用那么多<div>来居中呢？tell me why？难道表格没有居中属性吗？为什么要加入这些垃圾代码？特别修改的时候也不能把文字或图片删除了就能自动清除<div align="center">这个代码，还要手工去清除，在复杂点的网页中就会无故地浪费维护者一笔时间。
9 K5 E% _- i5 Y6 Z) A6 A% W
! G9 H: n$ t1 _; y　　建议使用<td align="center">来居中，当需要多重定位的时候，才考虑<div align="center">，因为这个代码并不好处理，所以能用表格代替就用表格替代。
' u! X6 u) [* ~: ]  z! J" w+ k  L+ H9 F4 l+ s. u( k
　　3.重复使用实现相同功能的代码、或杂七杂八的乱套代码+ G8 R$ g9 C2 ~' H9 L' g
( F( P/ g0 j! r& g
　　犯错机率：非常普遍: _( L& B' Q9 I. s4 p" r
　　普遍性：非常普遍
: Q, O' q2 @% M2 {7 ]　　犯错可能性：复杂多样
- m) P$ @7 c: m& u- A3 G- U9 a3 {& U( M/ f5 n$ w( T$ V
　　大家先来看一看下面的代码：& ~' ]2 K* h, @: F
　　<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>$ F. ~8 R% L; j" p# I5 v& ?
4 L6 g% k8 A+ U* ?, T. h& ]
　　我不知道读者有什么感觉，压根我一看到这样的代码就会先自我麻木十来秒，这十来秒目的是为了找一个能表达我的思想感情的词（我？你想反问我吗？sorry~~，我一般不犯，因为我做网页至少有一半以上的时间在浏览代码，代码中多了不该多的东西我一眼就能看出来。）。
3 \) _% i, [+ l2 A# b4 J; j9 N! w! ^" c  X1 S* l; q& k
　　看看上面的代码，使用了2个class，4个font来定义2个文本，其实这样的问题很多时候是在大家不断的修改中产生的，对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重，当然，事实上别人浏览这个网页的时候，是没有任何问题的，但维护的人就…………。
6 |, B5 J7 @+ T( M- `& p这些多余的垃圾代码完全是可以省略掉的，其实上面的例子不够严重，更恐怖的我都见过。
% g" {# z0 I' f4 Z$ c, }8 \2 J$ x" t. W
　　另外还有一个问题也要提提的，就是<p>...</p>和<center>...</center>，为什么要用它们呢？tell me why~~，有甚者是这样的：( D& H& V9 A9 P1 g& U# P
8 B0 r! i: D6 F& X( h4 `
<td><div align="center" class="css_id">" C% A1 z% F; b8 N. f6 H
<center>6 l+ B/ o! j, m6 ?) q* g5 S
<p align="center"></p>( q* f3 u/ `* x* n5 S6 r
< 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>) t. ]9 I$ f% e- J

% k7 H, j. s! l　　看到这样的代码我是会很无奈的（更无奈的是我经常看到，而且必须看），我来简化一下：: Z! n8 L9 i1 {- g5 }3 ?$ o
< td align="center" class="css_id"><br><font color="#FFA76C" style ="font-size:14px;font-family:隶书">标题</font><br>你觉得这样的代码看起来感觉怎么样呢？</td>
8 _8 f  ]9 F+ q2 g2 Z* s+ G$ d+ e% Q: b
　　是不是看起来觉得这个世界安静了很多？"标题"后面的文字完成可以定义在<td>的class里，就算不用css，再用多一个<.font>也没问题，一样很清爽。  f* L; C# G* ]

1 j8 d6 G! t$ }9 k　　4.表格不正确嵌套
: O9 T$ M& z! ?4 n* `2 h& w( }, {( L6 ?
　　犯错机率：一般2 D( y, v' P9 K$ J8 t9 U6 `
　　普遍性：普遍( p' I/ x7 \" F# O. P- h# w
　　犯错可能性：对这个不了解9 a; [1 T( U5 w1 D% F* K
: c" t* R& ?( Z9 w
　　其实这是一个街知巷闻的问题了，但还是不断有人犯，不正确的嵌套表格，可能会令到你被老总叫到办公室里臭骂一顿，会令到你以为正常的网页用ADSL开2、3分钟都开不了。
* }+ ~% F% o/ y" U1 m
4 m& n% ?9 k2 T　　先讲第一个问题，就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。
5 b+ l  t/ @/ P) t1 y8 A" q1 h& q6 ?
　　第二个问题就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，嘻嘻，你猜有可能出现什么情况呢？其实也没什么大不了的，最严重的就是你的IE象死机了一样，什么都没显示。解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。
* k- E* ]$ c7 T- Q0 _9 X, ^& o, w8 G( B) ^9 y4 B* G2 Z) U+ R7 v/ h
　　5.写代码缩进的时候，不是使用Tab而是使用空格# ?) @# d8 }! k

3 e5 ~6 @. s( g) b4 P1 g　　犯错机率：一般9 i9 Q2 F7 k& D& k' f! V$ u( U
　　普遍性：较少! O$ z0 e; @- A8 O
　　犯错可能性：不知道Tab更好用
* L; O4 u* }  o7 u+ Q, \& {. U* @; c4 ]
　　这一个问题针对js、vbs、asp、php之类，html不能使用Tab会写一点程序的都知道什么叫缩进，怎么样缩进？有人使用空格，有人使用Tab，如果你是使用空格的，那么从现在起，改用Tab吧。
: C; a  ^4 {- E/ P. X  |, U* B- G  I/ g8 p. n; o
　　使用空格有二大坏处：1、缩进速度慢、修改速度慢。2、增大网页体积，会影响速度。