XHTML代码规范

?在开始正式内容制作之前，我们必须先了解一下web标准有关代码的规范。了解这些规范可以帮助你少走弯路,尽快通过代码校验。

1.所有的标记都必须要有一个相应的结束标记

以前在HTML中，你可以打开许多标签，例如

和

而不一定写对应的

和< /li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个 "/"来关闭它。例如:

2.所有标签的元素和属性的名字都必须使用小写

与HTML不一样，XHTML对大小写是敏感的，和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常<a href="http://www.blue1000.com/bkhtml/c11/" title="Dreamweaver教程">Dreamweaver</a>自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。</P> <H3><FONT size=2>3.所有的<a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>标记都必须合理嵌套</FONT></H3> <P>同样因为X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：</P><SPAN class=code><p><b></p>/b></SPAN> <P>必须修改为：</P><SPAN class=code><p><b></b>/p></SPAN> <P>就是说，一层一层的嵌套必须是严格对称。</P> <H3><FONT size=2>4.所有的属性必须用引号""括起来</FONT></H3> <P>在<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如:</P><SPAN class=code><height=80></SPAN> <P>必须修改为：</P><SPAN class=code><height="80"></SPAN> <P>特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：</P><SPAN class=code><alt="say'hello'"></SPAN> <H3><FONT size=2>5.把所有<和&特殊符号用编码表示</FONT></H3>任何小于号（<），不是标签的一部分，都必须被编码为<SPAN class=code>& l t ;</SPAN> <BR>任何大于号（>），不是标签的一部分，都必须被编码为<SPAN class=code>& g t ;</SPAN> <BR>任何与号（&），不是实体的一部分的，都必须被编码为<SPAN class=code>& a m p;</SPAN> <P>注：以上字符之间无空格。</P> <H3><FONT size=2>6.给所有属性赋一个值</FONT></H3> <P>X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>规定所有属性都必须有一个值，没有值的就重复本身。例如：</P><SPAN class=code><td nowrap></SPAN> <SPAN class=code><input type="checkbox" name="shirt" value="medium" checked></SPAN> <P>必须修改为：</P><SPAN class=code><td nowrap="nowrap"></SPAN> <SPAN class=code><input type="checkbox" name="shirt" value="medium" checked="checked"></SPAN> <P></P> <H3><FONT size=2>7.不要在注释内容中使“--”</FONT></H3> <P>“--”只能发生在X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的:</P> <P><SPAN class=code></SPAN> </P> <P>用等号或者空格替换内部的虚线。</P> <P><SPAN class=code></SPAN> </P> <P>以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。</P> </div> <div><script type="text/javascript" src="../../bkad/undercontent.js"></script></div> </div> <div style="padding-right:20px;text-align:right;clear:both"> 阅读：<span id="news_hits"></span> 次<br/> 录入：<br/><br/> 【 <a href="../../mail.aspx?ID=3548" target="_blank">推荐</a> 】【 <a href="javascript:doPrint()">打印</a> 】 </div> <div style="padding-left:20px;clear:both"> 上一篇：<a href="../../bkhtml/2005-04/3549.htm">CSS入门</a><br/> 下一篇：<a href="../../bkhtml/2005-04/3547.htm">CSS2盒模型的3D示意图</a><br/> <script type="text/javascript" src="../../bkad/underpreandnext.js"></script> </div> </div> </div> <div class="bl"></div> <div class="br"></div> <div class="bm"></div> </div> <div class="mframe"> <div class="tl"></div> <div class="tr"></div> <div class="tm"> <span class="tt">相关新闻</span> </div> <div class="wrapper"> <div class="ml"></div> <div class="mr"></div> <div class="mm"> </div> </div> <div class="bl"></div> <div class="br"></div> <div class="bm"></div> </div> <div class="mframe"> <div class="tl"></div> <div class="tr"></div> <div class="tm"> <span class="tt">本文评论</span> <a href="../../remark.aspx?id=3548" target="_blank" style="cursor:hand">全部评论</a> </div> <div class="wrapper"> <div class="ml"></div> <div class="mr"></div> <div class="mm"> </div> </div> <div class="bl"></div> <div class="br"></div> <div class="bm"></div> </div> <div class="mframe"> <div class="tl"></div> <div class="tr"></div> <div class="tm"> <span class="tt">发表评论</span> </div> <div class="wrapper"> <div class="ml"></div> <div class="mr"></div> <div class="mm"> <form id="remarkForm" action="../../remark.aspx?id=3548" method="post" onsubmit="return checkRemark();" style="padding:5px"> <div style="width:220px;float:right;height:140px;overflow:auto"> <ul style="list-style-type:square;;margin-left:1em;line-height:150%"> <li>尊重网上道德，遵守中华人民共和国的各项有关法律法规</li> <li>承担一切因您的行为而直接或间接导致的民事或刑事法律责任</li> <li>本站管理人员有权保留或删除其管辖留言中的任意内容</li> <li>本站有权在网站内转载或引用您的评论</li> <li>参与本评论即表明您已经阅读并接受上述条款</li> </ul> </div> <script type="text/javascript" language="javascript"> function checkRemark() { var form=document.getElementById("remarkForm"); var remarkSize = 200; if (form.body.value=="") { alert("请填写评论内容"); form.body.focus(); return false; } if (form.username.value=="") { alert("请填写姓名"); form.username.focus(); return false; } if (form.body.value.length>remarkSize) { form.body.value = form.body.value.substr(0,remarkSize); showLen(form.body); form.body.focus(); alert("评论内容不可以超过"+remarkSize+"字,已帮你删除多余部分"); return false; } if (form.username.value.length>10) { alert("姓名不可以超过10个字"); form.username.focus(); return false; } form.submit.disabled=true; form.vcode.value = VCode("XHTML代码规范"); return true; } function showLen(obj) { document.getElementById("bodyLen").value=obj.value.length; } </script> <input type="radio" name="face" value="1" checked="checked"/><img src="../../pic/face1.gif" alt=""/><input type="radio" name="face" value="2"/><img src="../../pic/face2.gif" alt=""/><input type="radio" name="face" value="3"/><img src="../../pic/face3.gif" alt=""/><input type="radio" name="face" value="4"/><img src="../../pic/face4.gif" alt=""/><input type="radio" name="face" value="5"/><img src="../../pic/face5.gif" alt=""/><input type="radio" name="face" value="6"/><img src="../../pic/face6.gif" alt=""/><input type="radio" name="face" value="7"/><img src="../../pic/face7.gif" alt=""/><input type="radio" name="face" value="8"/><img src="../../pic/face8.gif" alt=""/><input type="radio" name="face" value="9"/><img src="../../pic/face9.gif" alt=""/><br/> <input type="radio" name="face" value="10"/><img src="../../pic/face10.gif" alt=""/><input type="radio" name="face" value="11"/><img src="../../pic/face11.gif" alt=""/><input type="radio" name="face" value="12"/><img src="../../pic/face12.gif" alt=""/><input type="radio" name="face" value="13"/><img src="../../pic/face13.gif" alt=""/><input type="radio" name="face" value="14"/><img src="../../pic/face14.gif" alt=""/><input type="radio" name="face" value="15"/><img src="../../pic/face15.gif" alt=""/><input type="radio" name="face" value="16"/><img src="../../pic/face16.gif" alt=""/><input type="radio" name="face" value="17"/><img src="../../pic/face17.gif" alt=""/><input type="radio" name="face" value="18"/><img src="../../pic/face18.gif" alt=""/><br/> <div style="padding-top:5px"> 点评： <textarea name="body" cols="36" rows="4" onkeydown="showLen(this)" onkeyup="showLen(this)"></textarea> 字数<input type="text" id="bodyLen" size="3" readonly="readonly" style="border-width:0;background:transparent;"/> </div> <div style="padding-top:5px"> 姓名： <input type="text" id="i_username" name="username" value="" maxlength="15" size="10"/> <input type="submit" name="submit" id="i_submit" value=" 发表 "/> </div> <script type="text/javascript"> var remarkmember = false; var allowremark = true; if (remarkmember){ document.getElementById("i_username").readonly=true; document.write("(限会员登录后发表评论)"); } if (!allowremark){ document.getElementById("i_submit").disabled=true; } </script> <script type="text/javascript" src="../../inc/clientDate.js"></script> <input type="hidden" name="vcode" value=""/> </form> </div> </div> <div class="bl"></div> <div class="br"></div> <div class="bm"></div> </div> <iframe src="../../frm_hit.aspx?id=3548&disp=1" style="visibility:hidden;height:0;width:0"></iframe> </td><td width="230" style="padding-left:5px" valign="top"> <div class="lframe"> <div class="tl"></div> <div class="tr"></div> <div class="tm"> <span class="tt">Advertisement</span> </div> <div class="wrapper"> <div class="ml"></div> <div class="mr"></div> <div class="mm"> <script type="text/javascript" src="../../bkad/contentrighttop.js"></script> </div> </div> <div class="bl"></div> <div class="br"></div> <div class="bm"></div> </div> <div class="lframe"> <div class="tl"></div> <div class="tr"></div> <div class="tm"> <span class="tt">内容查询</span> </div> <div class="wrapper"> <div class="ml"></div> <div class="mr"></div> <div class="mm" style="text-align:center; padding:10px;"> <form method="get" action="../../search.aspx" name="frmSearch" style="display:inline;"> <input type="text" name="keyword" class="inputbg" size="20" style="margin-bottom:5px"/><br/> <select name="where"> <option value="title">标题</option> <option value="content">内容</option> <option value="writer">作者</option> </select> <script type="text/javascript" src="../../inc/clientDate.js"></script> <input type="submit" value="搜索"/><br/> </form> </div> </div> <div class="bl"></div> <div class="br"></div> <div class="bm"></div> </div> <div class="lframe"> <div class="tl"></div> <div class="tr"></div> <div class="tm"> <span class="tt">Advertisement</span> </div> <div class="wrapper"> <div class="ml"></div> <div class="mr"></div> <div class="mm"> <script type="text/javascript" src="../../bkad/contentrightmid.js"></script> </div> </div> <div class="bl"></div> <div class="br"></div> <div class="bm"></div> </div> <div class="lframe"> <div class="tl"></div> <div class="tr"></div> <div class="tm"> <span class="tt">本周热门内容</span> </div> <div class="wrapper"> <div class="ml"></div> <div class="mr"></div> <div class="mm"> <ul class="nl"> <li><a href="../../bkhtml/2006-04/44861.htm" target="_blank">CSS入门教程</a></li> <li><a href="../../bkhtml/2006-06/45263.htm" target="_blank">30余个CSS导航菜单效果及下载</a></li> <li><a href="../../trans.aspx?id=27492" target="_blank">CSS2 中文手册</a></li> <li><a href="../../bkhtml/2007-04/51458.htm" target="_blank">稀为人知的几个有用的Css技巧</a></li> <li><a href="../../bkhtml/2006-06/45259.htm" target="_blank">CSS经典技巧十则</a></li> <li><a href="../../bkhtml/2008-05/56967.htm" target="_blank" title="全国哀悼日：网站哀悼色-中国站长自己的哀悼方式">全国哀悼日：网站哀悼色-中国站长</a></li> <li><a href="../../bkhtml/2006-02/43628.htm" target="_blank">CSS布局入门</a></li> <li><a href="../../bkhtml/2007-03/50620.htm" target="_blank">如何用CSS控制图片自适应大小？</a></li> <li><a href="../../bkhtml/2006-06/45257.htm" target="_blank">CSS超级技巧大放送合集</a></li> <li><a href="../../bkhtml/2006-05/45150.htm" target="_blank">UL-LI 标签结合CSS的运用</a></li> </ul> </div> </div> <div class="bl"></div> <div class="br"></div> <div class="bm"></div> </div> </td></tr> </tbody> </table> <div id="footer"> <br /><font color="#005c96"><strong>BK网络学院</strong>主要内容：<strong>平面设计教程,网站开发在线教程,网页制作教程,服务器教程,网络编程,数据库教程</strong>等。<br />产业部：</font><a href="http://www.miibeian.gov.cn/"><font color="#0000ff">沪ICP备05019380号陇ICP备05004709号</font></a><font color="#0000ff"> 公安局：GR6201030003<br />Copyright © </font><a href="/"><font color="#0000ff">BK设计</font></a><font color="#0000ff"> Powered by <a href="/">BK网络学院</a></font> <script src="http://s15.cnzz.com/stat.php?id=54594&web_id=54594" language="JavaScript"></script> <script type="text/javascript">setTimeout("ImgLoad(document.getElementById('content'));",500);</script> <div class="menuskin" id="popmenu" onmouseover="clearhidemenu();highlightmenu(event,'on')" onmouseout="highlightmenu(event,'off');dynamichide(event)" style="Z-index:100"></div> <script type="text/javascript" src="../../inc/menu.js" charset="gb2312"></script> <script type="text/javascript"> jsdone=true; </script> </div> </div> </body> </html>