| 阿七 |
2006-04-03 13:40 |
网页设计中HTML常犯的五个错误1.网页背景色的设置 ,\a L v
;)P=WS:=
9d(#/n
IXR'JZ?fH
犯错机率：很大 qfxEo76'
(~E-=+R[$&
t+] 1D@h v
`<| <1,
普遍性：较广 x#
zj0vI-8
1\Pjz
Lj
~kSO YvK$'
UX<-j Y#'V
犯错可能性：懒/不知道 J2!
Q09 }5
vNl)ltzJF
BGwD{6`U
,R3TFVV!?
约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Email通知了他们，自此之后这个问题我从没犯过。 8"-=+w.CZ
u U> L (
(c^ { T)
k.o8!aCm
绝大部分人的窗口背景颜色都是白色，但如果象我这样个性的人，就会把windows窗口的背景颜色改成灰色或其他色，这样一来，如果你没有设置网页的背景颜色的话，你以为正常的网页在我的电脑上看起来会是一团糟。 [{[m)Z^
pPo(nH|<
d!Gy#<H
3(,m(+J[S
2.Aligncenter（自动居中）的滥用 P3Lsfi.
vTK8t:JQ~
Ak kF6d+
4\ *:Lc,-
犯错机率：非常大 /4c
`[
T6=|)UTe1
Q JrXn6`
Iz . h
普遍性：非常广 H.' 9] *
W;UPA~nT~
r^<,f[yH
V\{@c%xW
犯错可能性：以为方便/以为好用 *i:8g(
t!6uz
p I
8z.JD
UXdc'i g
工作中，修改、维护别人的网页是家常便饭，发现不少人有一个陋习： x>TIx[ x
Cb? !+U
X1a~l|$h
]BbV\#
在表格中的文字或图片，你是这样来令它居中、靠左或靠右过？ mI4GBp
vo\'ycPv
qCfEv4
Q[K$f %>
<divalign="center">大家好啊！！</div> eLORG(;h4
r0lI&25w
D zE^FY
eaDZ^Z
Er
<divalign="center"><imgsrc="xx.gif"></div> 'l~7u ({u
]1d)jW G
A> upT'
kwT)j(pp<
当有些表格很多、文字很多、内容分得很细的时候，爱用这种方法（它在DW里的快捷键是Ctrl+Alt+C，FP不知道是什么）的人往往会狂用，惨了，我一碰到这样的网页就头痛，为什么要用那么多<div>来居中呢？tellmewhy？难道表格没有居中属性吗？为什么要加入这些垃圾代码？特别修改的时候也不能把文字或图片删除了就能自动清除 |^U QVNJ
;7?oJH;
Ea<\a1Tl43
[qRww]g;P|
建议使用<tdalign="center">来居中，当需要多重定位的时候，才考虑<divalign="center">，因为这个代码并不好处理，所以能用表格代替就用表格替代。 .*njgAq7
$poIWJM c
Qu=b -9
=CD6x=
l6
3.重复使用实现相同功能的代码、或杂七杂八的乱套代码 KO#kI M-
kJf0..J[#<
hOZTD 0
2 SD
Z
犯错机率：非常普遍 Tb?X KO,
ineSo8| @
wk8fa
FO^6c
普遍性：非常普遍 %pOz%v~
dazML|1ow
2(3Q#3V
urx?p ^c
犯错可能性：复杂多样 #'%ii,;w Q
3-:^mRPJ
?;P6#ByR
]3*w3Y!XK
大家先来看一看下面的代码： RPeH [M^
dZ(Z]`L,B
k}< H
=#9#unvE!
<center><p><fontclass="css_id"><fontclass="font11"><fontcolor="#CCCCCC"><fontcolor="#FFA76C"style="font-size:14px;font-family:隶书">标题</font></font></font> !] uB4
k n>qX{W
'G % ]/'_U
mM
Z{W+"[f
</center>你觉得这样的代码看起来感觉怎么样呢？</font></p> 5TuwXz 1v
^znUf4N1
.{8[o[w
=
Y_y!$jd(N
我不知道读者有什么感觉，压根我一看到这样的代码就会先自我麻木十来秒，这十来秒目的是为了找一个能表达我的思想感情的词（我？你想反问我吗？sorry~~，我一般不犯，因为我做网页至少有一半以上的时间在浏览代码，代码中多了不该多的东西我一眼就能看出来。）。 MH'%E^n `
*:
FS/ ir
RXAE
jzf
@]~.-(IMh
看看上面的代码，使用了2个class，4个font来定义2个文本，其实这样的问题很多时候是在大家不断的修改中产生的，对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重，当然，事实上别人浏览这个网页的时候，是没有任何问题的，但维护的人就…………。 ceks~[rP
!f Av xR
A ?V- Sz#
{RI^zNgs[
这些多余的垃圾代码完全是可以省略掉的，其实上面的例子不够严重，更恐怖的我都见过。 Y+23 jlgb
sXPva@8_
Kz q^f=p
OMjPC_
另外还有一个问题也要提提的，就是<p>...</p>和<center>...</center>，为什么要用它们呢？tellmewhy~~，有甚者是这样的： 3*%+NQIj
/[>_Ry,
.c<U5/
_/P ;`@
<td><divalign="center"class="css_id"> . tfal9
& _;=]t s
p</t##]3ks
Iy*Q{H3[
<center> \+U;$.)3
c%b|+4
}x
|p*cI @
d<Od QvW.
<palign="center"></p> kl1 Q :
ea$. +
0;`FS /[(f
# 7d vT=
<palign="center"><fontclass="css_id"><fontclass="font11"><fontcolor="#CCCCCC"><fontcolor="#FFA76C"style="font-size:14px;font-family:隶书">标题</font></font></font> ]QHZ [C
K9ih(fh)
vzSjfv
bY,dWNS:
</center></td>你觉得这样的代码看起来感觉怎么样呢？</font></p></center></div></td> G;/>
N'#
^P [#YO
6yYd~|T.Fl
s` , g4ce`
看到这样的代码我是会很无奈的（更无奈的是我经常看到，而且必须看），我来简化一下： 6=Q6J
c-.F {~
Q-G8Fo%#,E
3_
E}XQd
<tdalign="center"class="css_id"> ~pI`_3
zh?B-"O=5
qOyS8tA.H
r}|)oG,=
<fontcolor="#FFA76C"style="font-size:14px;font-family:隶书">标题</font> ^pfM/LQ@
v {1g`E
:m'(8s8
%%wngiz\
你觉得这样的代码看起来感觉怎么样呢？</td> 0T$ `;~
q9^.f9-
8) `
h"2^`
)!u
是不是看起来觉得这个世界安静了很多？"标题"后面的文字完成可以定义在<td>的class里，就算不用css，再用多一个<.font>也没问题，一样很清爽。 >:
@\SU
DEfh R?v
xA n|OSe
)k KeA
4.表格不正确嵌套 Xh~oDnP
&XhxkN$8
5rA>2<\pQ
geqx":gpx9
犯错机率：一般 =7 -k D3
Ut2x4$9
bX% 4[BKP
to\$'2F"q
普遍性：普遍 k.Z? BNP
*9r 32]i;
,z Bc-Cm
y dzvj p=
犯错可能性：对这个不了解 qNkX:|
j
M|$A)D1
}L5;=A']S
g87M"kQKA
其实这是一个街知巷闻的问题了，但还是不断有人犯，不正确的嵌套表格，可能会令到你被老总叫到办公室里臭骂一顿，会令到你以为正常的网页用ADSL开2、3分钟都开不了。 先讲第一个问题，就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。 第二个问题就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，嘻嘻，你猜有可能出现什么情况呢？其实也没什么大不了的，最严重的就是你的IE象死机了一样，什么都没显示。解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。 %NL7XU[~
,#.^2O9-^
@c ,=c+-
5pE@ Ww
5.写代码缩进的时候，不是使用Tab而是使用空格 Oo
%%f+
"9H#pj -
3 SOrM
C2
!F
犯错机率：一般 -n$hm +S
r*ry8QA
D_I_=0qNd
7I6&
*I
普遍性：较少 tpKQ$) ed
&) Iue<&2
{E>(%v
D
p:|p ?
犯错可能性：不知道Tab更好用 wQ9fPOm
Cx`?}A\%
%|?PG i@5
_&F*4t!
n_
这一个问题针对js、vbs、asp、php之类，html不能使用Tab会写一点程序的都知道什么叫缩进，怎么样缩进？有人使用空格，有人使用Tab，如果你是使用空格的，那么从现在起，改用Tab吧。 |
|