上一篇 | 下一篇

Xhtml第6天：XHTML代码规范

发布: 2008-6-27 10:13 | 作者: admin | 来源: | 查看: 0次

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

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

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

和

  • 而不一定写对应的

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

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

    与html不一样，xhtml对大小写是敏感的，和<title>是不同的标签。xhtml要求所有的标签和属性的名字都必须使用小写。例如：<body>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onmouseover"也必须修改成"onmouseover"。</p> <p>3.所有的xml标记都必须合理嵌套</p> <p>同样因为xhtml要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：<p><b></p>/b></p> <p>必须修改为：<p><b></b>/p></p> <p>就是说，一层一层的嵌套必须是严格对称。</p> <p>4.所有的属性必须用引号""括起来</p> <p>在html中，你可以不需要给属性值加引号，但是在xhtml中，它们必须被加引号。例如:<height=80></p> <p>必须修改为：<height="80"></p> <p>特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：<alt="say'hello'"></p> <p>5.把所有<和&特殊符号用编码表示</p> <p>任何小于号（<），不是标签的一部分，都必须被编码为& l t ;</p> <p>任何大于号（>），不是标签的一部分，都必须被编码为& g t ;</p> <p>任何与号（&），不是实体的一部分的，都必须被编码为& a m p;</p> <p>注：以上字符之间无空格。</p> <p>6.给所有属性赋一个值</p> <p>xhtml规定所有属性都必须有一个值，没有值的就重复本身。例如：<td nowrap> <input type="checkbox" name="shirt" value="medium" checked></p> <p>必须修改为:<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked"></p> <p>7.不要在注释内容中使“--”</p> <p>“--”只能发生在xhtml注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的:<!--这里是注释-----------这里是注释--></p> <p>用等号或者空格替换内部的虚线。<!--这里是注释============这里是注释--></p> <p>以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。</p> <p>[</p> </div> <p id="articlectrl"> <span> 字号: <a href="javascript:doZoom('12');">小</a> <a href="javascript:doZoom('14');">中 </a> <a href="javascript:doZoom('16');">大</a> | <a href="javascript:;" onclick="showajaxdiv('/batch.common.php?action=emailfriend&itemid=5881', 400);">推荐给好友</a> </span> </p> </div> <div class="midmain" style="background-color: #F1F5F6;overflow: hidden;"> <div id="xspace-rates"> <div id="xspace-rates-bg"> <div id="xspace-rates-star" class="xspace-rates0"> </div> <div id="xspace-rates-a"> <a href="javascript:;" onmouseover="rateHover(-5);" onmouseout="rateOut();" onclick="setRateXML('-5', '5881');">-5</a> <a href="javascript:;" onmouseover="rateHover(-3);" onmouseout="rateOut();" onclick="setRateXML('-3', '5881');">-3</a> <a href="javascript:;" onmouseover="rateHover(-1);" onmouseout="rateOut();" onclick="setRateXML('-1', '5881');">-1</a> <a href="javascript:;" onmouseover="rateHover(0);" onmouseout="rateOut();" onclick="setRateXML('0', '5881');">-</a> <a href="javascript:;" onmouseover="rateHover(1);" onmouseout="rateOut();" onclick="setRateXML('1', '5881');">+1</a> <a href="javascript:;" onmouseover="rateHover(3);" onmouseout="rateOut();" onclick="setRateXML('3', '5881');">+3</a> <a href="javascript:;" onmouseover="rateHover(5);" onmouseout="rateOut();" onclick="setRateXML('5', '5881');">+5</a> </div> <input type="hidden" id="xspace-rates-value" name="rates" value="0" /> </div> <p>评分：<span id="xspace-rates-tip">0</span></p> </div> <div id="comment"> <h2>我来说两句</h2> <form id="postcomm" action="/index.php?action-viewcomment-itemid-5881-php-1" method="post"> <p><label for="message">内容:</label><textarea id="message" name="message" onfocus="showcode()"></textarea></p> <p><button type="submit" id="submitcomm" name="submitcomm" value="submit">发表评论</button></p> <input type="hidden" id="itemid" name="itemid" value="5881" /> </form> </div> </div> <div class="midside"> <!--相关资讯--> </div> </div> <div class="side"> <!--最新更新主题--><div class="block topblock"> <h3>最新更新</h3> <ul class="msgtitlelist"> <li><a href="/?action-viewnews-itemid-5901">背景音乐是如何插入的?...</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5900">表格边框的css语法</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5899">CSS滤镜之Mask属性(图)</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5898">CSS滤镜之blur属性(图)</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5897">CSS滤镜之Chroma属性(图)</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5896">CSS滤镜之DropShadow属性(图)</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5895">CSS滤镜之FlipH、FlipV属性...(图)</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5894">CSS滤镜之Glow属性(图)</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5893">CSS滤镜之Invert属性(图)</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5892">CSS滤镜之Shadow属性(图)</a> <span class="smalltxt">6-27</span></li> </ul> </div> <!--月度关注热点--><div class="block"> <h3>月度热点</h3> <ul class="msgtitlelist"> <li><a href="/?action-viewnews-itemid-5851">CSS 循序渐进（四）表里春秋（上）...(图)</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5838">CSS2盒模型的3D示意图(图)</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5837">XHTML代码规范(图)</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5836">CSS入门</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5835">网站首页head区代码规范...</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5834">精通 CSS 滤镜（四）(图)</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5833">精通 CSS 滤镜（三）(图)</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5832">精通 CSS 滤镜（二）(图)</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5831">精通 CSS 滤镜（一）(图)</a> <span class="smalltxt">6-27</span></li> <li><a href="/?action-viewnews-itemid-5830">使用DIV之后,什么时候使用TABLE?...</a> <span class="smalltxt">6-27</span></li> </ul> </div> </div> </div> <!-- /Content --> <script language="javascript" type="text/javascript"> <!-- addMediaAction('articlebody'); addImgLink("articlebody"); //--> </script> <!-- Footer --> <div class="content" id="footerlink"> <a href="/">编程库</a> | <a href="/bbs/" target="_blank">交流论坛</a> | <a href="/?action/site/type/panel">快捷面板</a> | <a href="/?action/site/type/map">站点地图</a> | <a href="/?action/site/type/link">友情链接</a> | <a href="/?action/spaces">空间列表</a> | <a href="/archiver/">站点存档</a> | <a href="mailto:admin@yourdomain.com">联系我们</a> </div> </div> <div id="footer"> <p id="copyright"> © 2006-2008 <a href="http://www.bcku.net" target="_blank">BCKU.NET</a> <script language="javascript" type="text/javascript" src="http://js.users.51.la/1973361.js"></script> <br /></p> </div> <!-- /Footer --> </body> </html> <script language="javascript"> <!-- var Modified = new Date(document.lastModified); var copyright = document.getElementById("xspace-copyright"); if(copyright) { copyright.innerHTML += "Last update: <a href=\"http://www.bcku.net/index.php?action/viewnews/itemid/5881/page/1/php/1\" title=\"点击可以立即更新本页面\">"+(Modified.getYear()<200?(Modified.getYear()+1900):Modified.getYear())+"-"+(Modified.getMonth()+1)+"-"+Modified.getDate()+" "+Modified.getHours()+":"+Modified.getMinutes()+":"+Modified.getSeconds() + "</a><br>"; } document.write('<script src="/batch.html.php?code=http%253A%252F%252Fwww.bcku.net%252Findex.php%253Faction%252Fviewnews%252Fitemid%252F5881%252Fpage%252F1%2F1214814064%2F300%2F0%2F5881%2Fviewnews&lastmodified=' + Modified.getTime() + '" type="text\/javascript" language="javascript"><\/script>'); //--> </script>