网站优化之规范HTML代码
查看( 11 ) /
评论( 0 )
规范化的Html代码对一个网站有诸多好处，比如：改版方便、代码容易维护、代码量小、网站打开速度快、适合更多人群阅读等，这里就不一一列举。单从网站优化的角度看，规范化的Html代码更有利用搜索引擎排名。但是很多站长却没有认识到这一点，影响网站在搜索引擎上的排名。 我爱贵溪M f}-AR,_
我爱贵溪:W b0oq*n W*G S
我爱贵溪1i{#\,k4D9E G
我爱贵溪}'J&\.F @
下面，我们就开始对我们的网站进行初级改善：
1n9^ [,y_O&r8b(nv0我爱贵溪?vM+I?P o
l.B-y|M R0我爱贵溪 xRO {&Vz[ B+X$v'D
给网页添加 DOCTYPE我爱贵溪l$c@ f\ AP Hm `
我爱贵溪 n mW%Z#n y0m$p
我爱贵溪0P @7|;s C io/A
我爱贵溪k%TNZ4d
什么是DOCTYPE？DOCTYPE是Document Type的简写，明白什么是DOCTYPE了吧！DOCTYPE就是文档类型，用来说明你的HTML或XHTML是什么版本，浏览器会根据您DOCTYPE中定义的DTD（Document Type Definition）来解释页面代码，可想而知，错误的DOCTYPE会出现什么结果。 我爱贵溪:Lv5o)b&}Hd$X*W%y
我爱贵溪 IW;nG.h
我爱贵溪d?(b8{4|-g/w ?
|-| mBd A9XL0XHTML1.0为我们提供了三种DOCTYPE： 我爱贵溪L"F b};LO
我爱贵溪 a)b3Jz ?3d
B*msd e pz0
Td a2hO0sL01. 过渡型（Transitional） 我爱贵溪:NA}$FB2z/IZ v5G
我爱贵溪4\nH X%c,?6?4F
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">我爱贵溪 YL/kXy$cO B9rO
我爱贵溪*x&JU y6{d9Z
我爱贵溪-R\*q7d6}
我爱贵溪 E d W _:Q!a
2. 严格型（Strict） 我爱贵溪o/i`[.~%Zhd R
_9F L3t]2`3S9T0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
U,`(go4F%]w0我爱贵溪Hhq^-EX b
,t)wE [|;v0b6~:?0我爱贵溪 M"ie_:e+|
3. 框架型（Frameset）
M*i)[,^ L$j0我爱贵溪(z9Y0h'lH8sFV EZ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">我爱贵溪*o,\ v\u st
%k#IL+`)uarOH0
i t P0pVN.H0我爱贵溪0q0tn }6b S$t|
过渡型兼容表格、标识等，对于初学者来说，选择过渡型就可以啦！
%S]k {^$[0我爱贵溪.} Ed I4dw"FB
/E/w1_*J qF"y8hu$o*t0
4g H l4g E Iy7PV+q0设定一个名字空间
k-SV!t(M&f3l3E*iV0
,s d Gj e q L;^ YA0我爱贵溪 Ul2Y3k l)UJ,S g9x
:uKg?3F'DSU0在DOCTYPE后面添加如下代码即可：
;BhUXL:FyJ0
j S5nt*Mb._L0<html xmlns="http://www.w3.org/1999/xhtml">我爱贵溪"D fZ"c$YY.h2n
P N-]:P,L!ZH m8[0Xmlns是XHTML namespace的简写，叫做“名字空间”，通常我们的网页只有<html>，这里为什么会出现xmlns呢？名字空间就是给文档做一个标识，说明这个文档规范是属于谁的。明白了吗？不明白就Pass。 我爱贵溪*QX @x'u/v
我爱贵溪l U&qKV
我爱贵溪)[3_da K&e9GF
我爱贵溪0M e7},Lys
声明语言编码 我爱贵溪?T#Y D._3|O
我爱贵溪4v;D6n V h7~(Wq
,r;\-{)y On,w"V2o(^0
3cz A"w#GL:I;~A0简体中文网站可定义为：
0?+q{ n o.B P sR5[0我爱贵溪0? eY Q@ CW
<meta. http-equiv="Content-Type" c/>
T;A(@-XyND0我爱贵溪i!vX"\em1B8t
英文网站可定义为：
O/m.e$}!Q#y0我爱贵溪0C ryv SsA j T
<meta. http-equiv="Content-Type" c/>
y,r't0n:}$NG#T k0
I5T'Cr(A3{w&|0
3V6} l\ z/bl0
5bF k7g}.I(p0<Head></Head>之间的其他设置
T;n)^;u6n @K0
sY-mg&\5V0
B(\I!N7wp0b)Gu6v0我爱贵溪'l0@/G%Jk s"Z
1. 收藏夹小图标 我爱贵溪6g0|-Y?3sVz+l6w
我爱贵溪U_hx6T3X A3R2\WmZ
制作一个16*16的ico图标，命名为favicon.ico，放到网站根目录下，然后把下面的代码放到<Head></Head>之间即可。 我爱贵溪`7E[9t+gh#CQo8i
我爱贵溪 f]SHSof
<link rel="icon" href="/favicon.ico" type="image/x-icon"/>我爱贵溪f4BW S;B K\#Q%UY
0K G^ P[3Y _9p0<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
Nr&@;P K/qJ3T0
g?F{_+K|&p{ eM0我爱贵溪m7~&j[` Z]
!Q [$I-i d+EY"H-X d5x02. 作者与版权信息
_6z7wg s RNs5O0
h6V7| C#Y {6ko0<meta. name="author" c/>
U:L1D {k8?0我爱贵溪x5A2f)?M_M[
<meta. name="copyright" c/>我爱贵溪+IxC'?vA6B-C
j$^Y7q {0
`*F,] D [n0
#o;?2WKR5h s03. 站点介绍
5Q*]1E8e1S']B J0
dV2p$A1g'C0<meta. name="description" c />
+W:F$v9r }5n ^3V0我爱贵溪#Yj1YFQsV:I T
我爱贵溪 q j/?7ia
我爱贵溪$?3D-C)M xE
4. 站点关键词 我爱贵溪q+A*b U r'~3|(lk
t-`9@ ~T`3x ? t0<meta. c name="keywords"/>我爱贵溪D+D'f@BTQ k/N
我爱贵溪 Y-Td O0_a o
e+eC&GQw;M*a0
6{"z'b6Ny)Z3{*]0关闭所有的标签 我爱贵溪:GMBn-e7H!X c K^ J(@!f
e2h&pn&L#Q0
L.y,] u RWHAo0
+i(JP3l.u0打开的标签必须关闭，例如<p>www.intohard.com</p>，当然还有一种关闭方式，如：<br/>我爱贵溪I {8oH(y\ W)t
2e-{ fT&q8`'g ]0我爱贵溪 ^!v?'A!I q6tGiA
x_0] c.{^e4Ao0属性值用“”括起来
MR L'^&I XSn0
Ny1X(b1D0我爱贵溪X wa0UR hB&x
&j PZ!q}mS!Z7U;Y/{_0例如：<img height= "80 "……/>我爱贵溪-N+lu0h:Qz
我爱贵溪2\)@5|:L5s*a2h
我爱贵溪 t*iY6q;G2];Q)J(~!|7T
我爱贵溪V7@-t1zg f:E x?8d
给所有的属性赋值 我爱贵溪&TM AQJ(p
8zB"e ?'SA@c0
f0W:Yv8P(D;OB5L0我爱贵溪X6d j;K9udx
不正确的写法：<input …… checked/>我爱贵溪^b Ear5xG
a?7z ed h`X0正确的写法为：<input …… checked= "checked"/>
p'dh)c/]1e ^0
VRw7i4E0
p;R+]7S&SFC T L k8n ?0
#U/eX C ?(pa0所有的XHTML元素及其属性名称用小写
K&H f.J5Ume!Z ]0
nf2h#O}c3}1~0我爱贵溪1LS6u+Ut'R7[c4W
L0[ E1n9j JfQv6I0XHTML是大小写敏感的 我爱贵溪 xl9N o Ph2u G)Uf
(z@-b!v9dr-W/`0错误的写法为：<TITLE>www.intohard.com</TITLE>我爱贵溪?NZ*{0U1QI3Q[%BO
我爱贵溪)|M q:Os
标准的写法为：<title>www.intohard.com</title>我爱贵溪9a p;_#R N0l%n"j"_ D)W
我爱贵溪{X5\2i?;f
O x*[ Uo @ r0我爱贵溪 cr+Qh!Ve5x
标签要合理嵌套
a6z"D.Un yO1xL0
"C'C4ku4\!f0我爱贵溪1p Ur'D9c xP#\iB
7i9d?lD0不正确的写法：<div><h1>www.intohard.com</div></h1>
T&c?iuN?}0
4sTc%i}8_ l0正确的写法为：<div><h1>www.intohard.com</h1></div>我爱贵溪 N%Xq ]8LR6?B
)szLW6y&@#I2l Q L0
b0` P2b,bDP0
(A6d Ue&^}L5s+A0特殊字符用编码标识
m(Cw/w8q,~'j0
e)oxQhi5d0
w/|q&D?%v2~R-E j G0
{9r ew |:p+f#p M0如 " <" 用 "<"表示，" >" 用 ">"表示。
%L Lh+\x5~F lY|d0我爱贵溪*[%U5C1VeCr&NJ
)c9[9T%d.YQ'C0我爱贵溪JQ ta TZ
为图片增加alt属性 我爱贵溪 r8^~XZ
am { f0Gd*u0
%Q&|n7EJ-z'G0
V4D@ f"e9|0alt属性指定了当图片不能显示的时候就显示供替换文本。 我爱贵溪$~9MSJ KX#_ y
我爱贵溪.`4xE l w6f8A
如：<img src="images/logo.gif" alt="intohard为您服务"/>
]}'S#F~T"Cc0我爱贵溪;t!S/J D'z
KO|#_ S0我爱贵溪]x8e f f9Gd,tP*a
用结构化的元素输出内容
P|/~C Yg.am0
6uN+s-I t D#WT Q0我爱贵溪Z5I y(l7IZA2^
[%k6S!U S8U!YM0例如：你想输入三行文本，可以用：
-eCF&F {e aZ3`0我爱贵溪+b;a/CQtM
www.intohard.com<br/>www.intohard.com<br/>www.intohard.com我爱贵溪cTO$J_tC-g7J
X[mi4D{s0我建议用下面的方式代替上面的方式：
`&R n5jE#I4c"JJ0
F*`!Iq]Nhm)z0<ul>
0M v2p A'KFc"C x0我爱贵溪{$Y,i$^ L8e(L
<li>www.intohard.com</li>
't*[e JWG0我爱贵溪s1H2F+r(j JL(b
<li>www.intohard.com</li>我爱贵溪.i)dx vY)n3i
我爱贵溪{ _ b?9w D'R7Iw'S
<li>www.intohard.com</li>我爱贵溪Y/d!t SU9s6N
.V9P I5W3R1ZQz)h9P'Bjy0</ul>
B+[5p@l2c$s0我爱贵溪5SK(Q8xo6n*l9F
以上这些规范可以对您的网站进行初级改善，提高搜索引擎对你的网站的评分。看了这个多罗罗嗦嗦的东西，头脑是不是懵了，喝杯茶，Good Luck！
我爱贵溪:W b0oq*n W*G S
我爱贵溪1i{#\,k4D9E G
我爱贵溪}'J&\.F @
下面，我们就开始对我们的网站进行初级改善：
1n9^ [,y_O&r8b(nv0我爱贵溪?vM+I?P o
l.B-y|M R0我爱贵溪 xRO {&Vz[ B+X$v'D
给网页添加 DOCTYPE我爱贵溪l$c@ f\ AP Hm `
我爱贵溪 n mW%Z#n y0m$p
我爱贵溪0P @7|;s C io/A
我爱贵溪k%TNZ4d
什么是DOCTYPE？DOCTYPE是Document Type的简写，明白什么是DOCTYPE了吧！DOCTYPE就是文档类型，用来说明你的HTML或XHTML是什么版本，浏览器会根据您DOCTYPE中定义的DTD（Document Type Definition）来解释页面代码，可想而知，错误的DOCTYPE会出现什么结果。 我爱贵溪:Lv5o)b&}Hd$X*W%y
我爱贵溪 IW;nG.h
我爱贵溪d?(b8{4|-g/w ?
|-| mBd A9XL0XHTML1.0为我们提供了三种DOCTYPE： 我爱贵溪L"F b};LO
我爱贵溪 a)b3Jz ?3d
B*msd e pz0
Td a2hO0sL01. 过渡型（Transitional） 我爱贵溪:NA}$FB2z/IZ v5G
我爱贵溪4\nH X%c,?6?4F
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">我爱贵溪 YL/kXy$cO B9rO
我爱贵溪*x&JU y6{d9Z
我爱贵溪-R\*q7d6}
我爱贵溪 E d W _:Q!a
2. 严格型（Strict） 我爱贵溪o/i`[.~%Zhd R
_9F L3t]2`3S9T0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
U,`(go4F%]w0我爱贵溪Hhq^-EX b
,t)wE [|;v0b6~:?0我爱贵溪 M"ie_:e+|
3. 框架型（Frameset）
M*i)[,^ L$j0我爱贵溪(z9Y0h'lH8sFV EZ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">我爱贵溪*o,\ v\u st
%k#IL+`)uarOH0
i t P0pVN.H0我爱贵溪0q0tn }6b S$t|
过渡型兼容表格、标识等，对于初学者来说，选择过渡型就可以啦！
%S]k {^$[0我爱贵溪.} Ed I4dw"FB
/E/w1_*J qF"y8hu$o*t0
4g H l4g E Iy7PV+q0设定一个名字空间
k-SV!t(M&f3l3E*iV0
,s d Gj e q L;^ YA0我爱贵溪 Ul2Y3k l)UJ,S g9x
:uKg?3F'DSU0在DOCTYPE后面添加如下代码即可：
;BhUXL:FyJ0
j S5nt*Mb._L0<html xmlns="http://www.w3.org/1999/xhtml">我爱贵溪"D fZ"c$YY.h2n
P N-]:P,L!ZH m8[0Xmlns是XHTML namespace的简写，叫做“名字空间”，通常我们的网页只有<html>，这里为什么会出现xmlns呢？名字空间就是给文档做一个标识，说明这个文档规范是属于谁的。明白了吗？不明白就Pass。 我爱贵溪*QX @x'u/v
我爱贵溪l U&qKV
我爱贵溪)[3_da K&e9GF
我爱贵溪0M e7},Lys
声明语言编码 我爱贵溪?T#Y D._3|O
我爱贵溪4v;D6n V h7~(Wq
,r;\-{)y On,w"V2o(^0
3cz A"w#GL:I;~A0简体中文网站可定义为：
0?+q{ n o.B P sR5[0我爱贵溪0? eY Q@ CW
<meta. http-equiv="Content-Type" c/>
T;A(@-XyND0我爱贵溪i!vX"\em1B8t
英文网站可定义为：
O/m.e$}!Q#y0我爱贵溪0C ryv SsA j T
<meta. http-equiv="Content-Type" c/>
y,r't0n:}$NG#T k0
I5T'Cr(A3{w&|0
3V6} l\ z/bl0
5bF k7g}.I(p0<Head></Head>之间的其他设置
T;n)^;u6n @K0
sY-mg&\5V0
B(\I!N7wp0b)Gu6v0我爱贵溪'l0@/G%Jk s"Z
1. 收藏夹小图标 我爱贵溪6g0|-Y?3sVz+l6w
我爱贵溪U_hx6T3X A3R2\WmZ
制作一个16*16的ico图标，命名为favicon.ico，放到网站根目录下，然后把下面的代码放到<Head></Head>之间即可。 我爱贵溪`7E[9t+gh#CQo8i
我爱贵溪 f]SHSof
<link rel="icon" href="/favicon.ico" type="image/x-icon"/>我爱贵溪f4BW S;B K\#Q%UY
0K G^ P[3Y _9p0<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
Nr&@;P K/qJ3T0
g?F{_+K|&p{ eM0我爱贵溪m7~&j[` Z]
!Q [$I-i d+EY"H-X d5x02. 作者与版权信息
_6z7wg s RNs5O0
h6V7| C#Y {6ko0<meta. name="author" c/>
U:L1D {k8?0我爱贵溪x5A2f)?M_M[
<meta. name="copyright" c/>我爱贵溪+IxC'?vA6B-C
j$^Y7q {0
`*F,] D [n0
#o;?2WKR5h s03. 站点介绍
5Q*]1E8e1S']B J0
dV2p$A1g'C0<meta. name="description" c />
+W:F$v9r }5n ^3V0我爱贵溪#Yj1YFQsV:I T
我爱贵溪 q j/?7ia
我爱贵溪$?3D-C)M xE
4. 站点关键词 我爱贵溪q+A*b U r'~3|(lk
t-`9@ ~T`3x ? t0<meta. c name="keywords"/>我爱贵溪D+D'f@BTQ k/N
我爱贵溪 Y-Td O0_a o
e+eC&GQw;M*a0
6{"z'b6Ny)Z3{*]0关闭所有的标签 我爱贵溪:GMBn-e7H!X c K^ J(@!f
e2h&pn&L#Q0
L.y,] u RWHAo0
+i(JP3l.u0打开的标签必须关闭，例如<p>www.intohard.com</p>，当然还有一种关闭方式，如：<br/>我爱贵溪I {8oH(y\ W)t
2e-{ fT&q8`'g ]0我爱贵溪 ^!v?'A!I q6tGiA
x_0] c.{^e4Ao0属性值用“”括起来
MR L'^&I XSn0
Ny1X(b1D0我爱贵溪X wa0UR hB&x
&j PZ!q}mS!Z7U;Y/{_0例如：<img height= "80 "……/>我爱贵溪-N+lu0h:Qz
我爱贵溪2\)@5|:L5s*a2h
我爱贵溪 t*iY6q;G2];Q)J(~!|7T
我爱贵溪V7@-t1zg f:E x?8d
给所有的属性赋值 我爱贵溪&TM AQJ(p
8zB"e ?'SA@c0
f0W:Yv8P(D;OB5L0我爱贵溪X6d j;K9udx
不正确的写法：<input …… checked/>我爱贵溪^b Ear5xG
a?7z ed h`X0正确的写法为：<input …… checked= "checked"/>
p'dh)c/]1e ^0
VRw7i4E0
p;R+]7S&SFC T L k8n ?0
#U/eX C ?(pa0所有的XHTML元素及其属性名称用小写
K&H f.J5Ume!Z ]0
nf2h#O}c3}1~0我爱贵溪1LS6u+Ut'R7[c4W
L0[ E1n9j JfQv6I0XHTML是大小写敏感的 我爱贵溪 xl9N o Ph2u G)Uf
(z@-b!v9dr-W/`0错误的写法为：<TITLE>www.intohard.com</TITLE>我爱贵溪?NZ*{0U1QI3Q[%BO
我爱贵溪)|M q:Os
标准的写法为：<title>www.intohard.com</title>我爱贵溪9a p;_#R N0l%n"j"_ D)W
我爱贵溪{X5\2i?;f
O x*[ Uo @ r0我爱贵溪 cr+Qh!Ve5x
标签要合理嵌套
a6z"D.Un yO1xL0
"C'C4ku4\!f0我爱贵溪1p Ur'D9c xP#\iB
7i9d?lD0不正确的写法：<div><h1>www.intohard.com</div></h1>
T&c?iuN?}0
4sTc%i}8_ l0正确的写法为：<div><h1>www.intohard.com</h1></div>我爱贵溪 N%Xq ]8LR6?B
)szLW6y&@#I2l Q L0
b0` P2b,bDP0
(A6d Ue&^}L5s+A0特殊字符用编码标识
m(Cw/w8q,~'j0
e)oxQhi5d0
w/|q&D?%v2~R-E j G0
{9r ew |:p+f#p M0如 " <" 用 "<"表示，" >" 用 ">"表示。
%L Lh+\x5~F lY|d0我爱贵溪*[%U5C1VeCr&NJ
)c9[9T%d.YQ'C0我爱贵溪JQ ta TZ
为图片增加alt属性 我爱贵溪 r8^~XZ
am { f0Gd*u0
%Q&|n7EJ-z'G0
V4D@ f"e9|0alt属性指定了当图片不能显示的时候就显示供替换文本。 我爱贵溪$~9MSJ KX#_ y
我爱贵溪.`4xE l w6f8A
如：<img src="images/logo.gif" alt="intohard为您服务"/>
]}'S#F~T"Cc0我爱贵溪;t!S/J D'z
KO|#_ S0我爱贵溪]x8e f f9Gd,tP*a
用结构化的元素输出内容
P|/~C Yg.am0
6uN+s-I t D#WT Q0我爱贵溪Z5I y(l7IZA2^
[%k6S!U S8U!YM0例如：你想输入三行文本，可以用：
-eCF&F {e aZ3`0我爱贵溪+b;a/CQtM
www.intohard.com<br/>www.intohard.com<br/>www.intohard.com我爱贵溪cTO$J_tC-g7J
X[mi4D{s0我建议用下面的方式代替上面的方式：
`&R n5jE#I4c"JJ0
F*`!Iq]Nhm)z0<ul>
0M v2p A'KFc"C x0我爱贵溪{$Y,i$^ L8e(L
<li>www.intohard.com</li>
't*[e JWG0我爱贵溪s1H2F+r(j JL(b
<li>www.intohard.com</li>我爱贵溪.i)dx vY)n3i
我爱贵溪{ _ b?9w D'R7Iw'S
<li>www.intohard.com</li>我爱贵溪Y/d!t SU9s6N
.V9P I5W3R1ZQz)h9P'Bjy0</ul>
B+[5p@l2c$s0我爱贵溪5SK(Q8xo6n*l9F
以上这些规范可以对您的网站进行初级改善，提高搜索引擎对你的网站的评分。看了这个多罗罗嗦嗦的东西，头脑是不是懵了，喝杯茶，Good Luck！
相关阅读:
- 解密.htm.html.shtm.shtml的区别与联系 (传说, 2007-11-30)
- Dead-Links免费网站坏链接检查工具 (传说, 2007-11-30)
- MySQL查询的性能优化 (传说, 2007-11-30)
- 网站建设新技术SHTML (传说, 2007-11-30)
- FLY Windows XP Pro SP2 精简优化版 v1.9 (传说, 2007-12-01)
- MYSQL出错代码列表 (传说, 2007-12-04)
- MySQL查询的性能优化 (传说, 2007-12-04)
- 屏蔽(禁止)鼠标右键代码 (传说, 2007-12-06)
- 如何找出IIS中隐藏的网站 (传说, 2007-12-07)
- 国家预防腐败局官网开通十天 反腐谏言挤瘫网站 (传说, 2007-12-28)
