首页 > 网页制作 > WEB标准

XHTML(div css)编码七条基本规范

编程基地 WEB标准 2018-11-14 19:24:00 0 0 XML(40) html(21) 的(15) Web(15)
一、所有的标记都必须要有一个相应的结束标记   -   TOP
以前在HTML中,XHTML(指div css开发)要求有严谨的结构标签结构,所有标签必须关闭闭合,而且闭合必须结构正确。
比如:

一、所有的标记都必须要有一个相应的结束标记   -   TOP

以前在HTML中,XHTML(指div css开发)要求有严谨的结构标签结构,所有标签必须关闭闭合,而且闭合必须结构正确。

比如:

1、普通闭合

  1.  
  2.  
  3.  
  4.  

以上上常用标签开始与闭合示例。

2、多层次嵌套,必要闭合错误。

2.1错误演示

  1.  
  2.      
 
  •      
  • 以上代码,div与span明显闭合错误。

    2.2正确闭合演示

    1.  
    2.      
     

    如果是单独不成对的标签,在标签最后加一个"/"来关闭它。例如:

    1.  
    2.  

    二、所有标签的元素和属性的名字都必须使用小写   -   TOP

    与HTML不一样,XHTML对大小写是敏感的,和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如:<BODY>必须写成<body> 。大小写夹杂也是不被认可的,通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。</p> <h3 class="title-b">三、所有的XHTML标记都必须合理嵌套   -   <u>TOP</u></h3> <p>同样因为XHTML要求有严谨的结构,因此所有的嵌套都必须按顺序,以前我们这样写的代码:</p> <pre><ol class="dp-xml"><li class="alt"><p><b></p>/b> </li></ol></pre> <p>必须修改为:</p> <pre><ol class="dp-xml"><li class="alt"><p><b></b>/p>  </li></ol></pre> <p>就是说,一层一层的嵌套必须是严格对称。</p> <h3 class="title-b">四、所有的属性必须用引号""括起来   -   <u>TOP</u></h3> <p>在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。例如:</p> <pre><ol class="dp-xml"><li class="alt"><div style=height:80px></div> </li><li><div class=abc></div> </li></ol></pre> <p>必须修改为:</p> <pre><ol class="dp-xml"><li class="alt"><div style="height:80px"></div> </li><li><div class="abc"></div> </li></ol></pre> <h3 class="title-b">五、把所有<和&特殊符号用编码表示   -   <u>TOP</u></h3> <p>任何小于号(<),不是标签的一部分,都必须被编码为& l t ; <br /> 任何大于号(>),不是标签的一部分,都必须被编码为& g t ; <br /> 任何与号(&),不是实体的一部分的,都必须被编码为& a m p; <br /> 注:以上字符之间无空格。</p> <h3 class="title-b">六、不要在注释内容中使“–”   -   <u>TOP</u></h3> <p>“–”只能发生在XHTML注释的开头和结束,也就是说,在内容中它们不再有效。例如下面的代码是无效的:</p> <pre><ol class="dp-xml"><li class="alt"><!–这里是注释———–这里是注释–>  </li></ol></pre> <p>用等号或者空格替换内部的虚线。</p> <pre><ol class="dp-xml"><li class="alt"><!–这里是注释============这里是注释–>  </li></ol></pre> <p>以上这些规范有的看上去比较奇怪,但这一切都是为了使我们的代码有一个统一、唯一的标准,便于以后的数据再利用。</p><p> </div> <div class="pagebar"> </div> <div class="pcd_ad"><script src="/static/js/thea18.js"></script></div> <div class="mbd_ad"> <table width="100%" height="90" style="background-color: #d43d3d;"> <tr align="center"> <td style="color: #fff;">后台-系统设置-扩展变量-手机广告位-内容正文底部</td> </tr> </table> </div> <div class="rights"> <h5>版权声明</h5> <p>本文仅代表作者观点,不代表本站立场。<br> 本文系作者授权发表,未经许可,不得转载。<br> 本文地址:http://www.7y6y.com/webwangyezhizuo/webbzhun/2018-11-14/204.html</p> </div> </div> <div class="related"> <h4>相关文章</h4> <ul> </ul> </div> <div class="post_comments"> <script src="/e/extend/lgyPl2.0/?id=204&classid=71"></script> </div> <div class="pcd_ad"><script src="/static/js/thea22.js"></script></div> <div class="mbd_ad"> <table width="100%" height="90" style="background-color: #d43d3d;"> <tr align="center"> <td style="color: #fff;">后台-系统设置-扩展变量-手机广告位-评论底部广告位</td> </tr> </table> </div> </div> <!--@ mainl--> <div class="mainr"> <div class="widget widget_ad"> <script src="/static/js/thea14.js"></script> </div> <div class="widget widget_hotpost"> <h4>热门文章</h4> <ul> <li><i class="red">1</i><a href="/webwangyezhizuo/webbzhun/2018-11-14/173.html" target="_blank">初学XML的基础知识</a></li> <li><i class="red">2</i><a href="/webwangyezhizuo/webbzhun/2018-11-14/157.html" target="_blank">解释如何解决画布图像getImageData,toDataURL跨域问题</a></li> <li><i class="red">3</i><a href="/webwangyezhizuo/webbzhun/2018-11-14/158.html" target="_blank">百度新闻开放协议XML文档制作方法</a></li> <li><i>4</i><a href="/webwangyezhizuo/webbzhun/2018-11-14/159.html" target="_blank">小语种上网也能更轻松,万维网联盟将扩张Web标准</a></li> <li><i>5</i><a href="/webwangyezhizuo/webbzhun/2018-11-14/160.html" target="_blank">标准Web系统的架构分层</a></li> <li><i>6</i><a href="/webwangyezhizuo/webbzhun/2018-11-14/161.html" target="_blank">Web应用程序的类型:从静态Web页面到渐进式Web应用程序</a></li> <li><i>7</i><a href="/webwangyezhizuo/webbzhun/2018-11-14/162.html" target="_blank">历数Firefox2.0对XML处理的改进</a></li> <li><i>8</i><a href="/webwangyezhizuo/webbzhun/2018-11-14/163.html" target="_blank">XML将机器内码转换为人们容易理解的信息</a></li> <li><i>9</i><a href="/webwangyezhizuo/webbzhun/2018-11-14/164.html" target="_blank">了解WEB页面工具语言XML(五)</a></li> <li><i>10</i><a href="/webwangyezhizuo/webbzhun/2018-11-14/165.html" target="_blank">了解WEB页面工具语言XML(六)</a></li> </ul> </div> <div class="widget widget_ad"> <script src="/static/js/thea15.js"></script> </div> <div class="widget widget_previous"> <h4>最近发表</h4> <ul> <li><a href="/webwangyezhizuo/webbzhun/2018-11-14/204.html">XHTML(div css)编码七条基本规范</a></li> <li><a href="/webwangyezhizuo/webbzhun/2018-11-14/205.html">XML与Web服务和SOA有何关联</a></li> <li><a href="/webwangyezhizuo/webbzhun/2018-11-14/206.html">XML模式:XForms和客户发票</a></li> <li><a href="/webwangyezhizuo/webbzhun/2018-11-14/207.html">Web新标准:指纹和面容识别可取代登录密码</a></li> <li><a href="/webwangyezhizuo/webbzhun/2018-11-14/208.html">注意规范您的css命名的大小写</a></li> <li><a href="/webwangyezhizuo/webbzhun/2018-11-14/209.html">不知xml和html有什么区别?它们不同在哪?</a></li> <li><a href="/webwangyezhizuo/webbzhun/2018-11-14/210.html">html标准主要注意重点</a></li> <li><a href="/webwangyezhizuo/webbzhun/2018-11-14/211.html">XML基础:什么是XML?</a></li> <li><a href="/webwangyezhizuo/webbzhun/2018-11-14/212.html">支持XML的公司和它们的开发工具</a></li> <li><a href="/webwangyezhizuo/webbzhun/2018-11-14/213.html">CSS属性之间用小写分号隔开</a></li> </ul> </div> <div class="widget widget_ad"> <script src="/static/js/thea16.js"></script> </div> <div class="widget widget_tags"> <h4>标签列表</h4> <ul> <li class="submenu tagbgc1"><a target="_blank" href="/e/tags/?tagname=创业" title="1个话题">创业</a></li> <li class="submenu tagbgc3"><a target="_blank" href="/e/tags/?tagname=移动端" title="7个话题">移动端</a></li> <li class="submenu tagbgc7"><a target="_blank" href="/e/tags/?tagname=3333" title="1个话题">3333</a></li> <li class="submenu tagbgc7"><a target="_blank" href="/e/tags/?tagname=3333333333333333" title="1个话题">3333333333333333</a></li> <li class="submenu tagbgc0"><a target="_blank" href="/e/tags/?tagname=c扩展方法原理" title="1个话题">c扩展方法原理</a></li> <li class="submenu tagbgc9"><a target="_blank" href="/e/tags/?tagname=c" title="10个话题">c</a></li> <li class="submenu tagbgc9"><a target="_blank" href="/e/tags/?tagname=linq是什么" title="1个话题">linq是什么</a></li> <li class="submenu tagbgc1"><a target="_blank" href="/e/tags/?tagname=c的linq" title="1个话题">c的linq</a></li> <li class="submenu tagbgc9"><a target="_blank" href="/e/tags/?tagname=taskyield" title="1个话题">taskyield</a></li> <li class="submenu tagbgc7"><a target="_blank" href="/e/tags/?tagname=task_yield" title="1个话题">task_yield</a></li> <li class="submenu tagbgc3"><a target="_blank" href="/e/tags/?tagname=task.yield" title="1个话题">task.yield</a></li> <li class="submenu tagbgc7"><a target="_blank" href="/e/tags/?tagname=计时器实现方法" title="1个话题">计时器实现方法</a></li> <li class="submenu tagbgc8"><a target="_blank" href="/e/tags/?tagname=计时器" title="1个话题">计时器</a></li> <li class="submenu tagbgc2"><a target="_blank" href="/e/tags/?tagname=connection" title="1个话题">connection</a></li> <li class="submenu tagbgc1"><a target="_blank" href="/e/tags/?tagname=使用connection连接数据库" title="1个话题">使用connection连接数据库</a></li> <li class="submenu tagbgc7"><a target="_blank" href="/e/tags/?tagname=string" title="2个话题">string</a></li> <li class="submenu tagbgc6"><a target="_blank" href="/e/tags/?tagname=stringbuilder" title="2个话题">stringbuilder</a></li> <li class="submenu tagbgc8"><a target="_blank" href="/e/tags/?tagname=string和stringbuilder" title="1个话题">string和stringbuilder</a></li> <li class="submenu tagbgc7"><a target="_blank" href="/e/tags/?tagname=sql" title="3个话题">sql</a></li> <li class="submenu tagbgc5"><a target="_blank" href="/e/tags/?tagname=dataadapter" title="1个话题">dataadapter</a></li> <li class="submenu tagbgc3"><a target="_blank" href="/e/tags/?tagname=dataadapter数据适配" title="1个话题">dataadapter数据适配</a></li> <li class="submenu tagbgc9"><a target="_blank" href="/e/tags/?tagname=使用sql" title="2个话题">使用sql</a></li> <li class="submenu tagbgc0"><a target="_blank" href="/e/tags/?tagname=dataset数据集" title="1个话题">dataset数据集</a></li> <li class="submenu tagbgc6"><a target="_blank" href="/e/tags/?tagname=datareader" title="1个话题">datareader</a></li> <li class="submenu tagbgc6"><a target="_blank" href="/e/tags/?tagname=用sql" title="1个话题">用sql</a></li> <li class="submenu tagbgc0"><a target="_blank" href="/e/tags/?tagname=datareader访问数据" title="1个话题">datareader访问数据</a></li> <li class="submenu tagbgc2"><a target="_blank" href="/e/tags/?tagname=DEDECMS" title="2个话题">DEDECMS</a></li> <li class="submenu tagbgc9"><a target="_blank" href="/e/tags/?tagname=整站源码" title="1个话题">整站源码</a></li> <li class="submenu tagbgc4"><a target="_blank" href="/e/tags/?tagname=安装" title="1个话题">安装</a></li> <li class="submenu tagbgc7"><a target="_blank" href="/e/tags/?tagname=织梦" title="3个话题">织梦</a></li> </ul> </div> <div class="widget widget_ad"> <script src="/static/js/thea21.js"></script> </div> </div> </div> </div> <script type="text/javascript"> // JavaScript Document function goTopEx(){ var obj=document.getElementById("goTopBtn"); function getScrollTop(){ return document.documentElement.scrollTop || document.body.scrollTop; } function setScrollTop(value){ if(document.documentElement.scrollTop){ document.documentElement.scrollTop=value; }else{ document.body.scrollTop=value; } } window.onscroll=function(){getScrollTop()>0?obj.style.display="":obj.style.display="none"; var h=document.body.scrollHeight - getScrollTop() - obj.offsetTop - obj.offsetHeight; obj.style.bottom=0+"px"; if(h<350){ obj.style.bottom=340+"px"; obj.style.top="auto"; } } obj.onclick=function(){ var goTop=setInterval(scrollMove,10); function scrollMove(){ setScrollTop(getScrollTop()/1.1); if(getScrollTop()<1)clearInterval(goTop); } } } </script> <!--向上 --> <div id="jz52top" > <span> <DIV style="DISPLAY: none" id="goTopBtn" ><a title="返回顶部" class="jz52topa" ><b>返回顶部</b></a></DIV> </span> <SCRIPT type=text/javascript>goTopEx();</SCRIPT> <span> <ul id="navmenu"> <li><a title="QR Code" class="jzqr" ><b>QR Code</b></a> <ul> <div id="jzqrn"> <img src="/static/picture/weixin.png" width="228" height="228" /> <p>打开手机扫描上面的二维码</p> </div> </ul> </li> </ul> </span> </div> <!--向上完 --> <!-- 底部广告--> <!-- 底部广告--> <!--底部信息 --> <div class="ft_wp"> <div id="ft" class="wp cl ftddd" > <div class="ft_info" > <div class="ft_z1"> <p>编程基地网</p> <p>http://www.7y6y.com/</p> <h3 class="ft_z_zdxx_zx"> 统计代码 <span class="pipe"> | </span> 宁ICP备15001160号-4</h3> <h2 class="ft_z_zdxx_zx"> <p style="font-size:12px;">Powered By <a href="http://www.7y6y.com/" title="编程基地网" target="_blank">编程基地网</a> 信息来自互联网</p> </h2> </div> <div class="ft_z2"> <p><a target="_blank" href="/datesql/ban">数据库其它</a></p> <p><a target="_blank" href="/datesql/ban">数据库文摘</a></p> <p><a target="_blank" href="/datesql/Access">Access</a></p> <p><a target="_blank" href="/datesql/Redis">Redis</a></p> </div> <div class="ft_z2"> <p><a target="_blank" href="/mobilephone/feng">刷机教程</a></p> <p><a target="_blank" href="/mobilephone/">手机评测</a></p> <p><a target="_blank" href="/mobilephone/">安卓手机</a></p> <p><a target="_blank" href="/mobilephone/gui">苹果手机</a></p> </div> <div class="ft_z2"> <p><a target="_blank" href="/Designer/chou">平面其它</a></p> <p><a target="_blank" href="/Designer/Indesign">Indesign</a></p> <p><a target="_blank" href="/Designer/Freehand">Freehand教程</a></p> <p><a target="_blank" href="/Designer/Painter">Painter教程</a></p> </div> <div class="ft_z2"> <p><a target="_blank" href="/sm">网站声明</a></p> <p><a target="_blank" href="/linkus">联系我们</a></p> <p><a target="_blank" href="/support">广告合作</a></p> <p><a target="_blank" href="/about">关于我们</a></p> </div> <div class="ft_bx"style="left:335px;"> </div> <div class="ft_bx ft_t1"> </div> <div class="ft_bx ft_t2"> </div> <div class="ft_bx ft_t3"> </div> <div class="ft_bx ft_t4"> </div> <div class="ft_z3"> <dd> <span><img src="/static/picture/weixin.png" width="75" height="72.2" /></span> <p> <!-- 引用官方图标 --> <div class="ft_y_dsftb bdsharebuttonbox "style="float:left;"> <a href="portal.php-mod=rss" tppabs="http://www.macfee.cn/newinfo/portal.php?mod=rss" class="RSS"style="margin-left:0px;"></a> <a title="分享到豆瓣网" href="#" class="bds_douban" data-cmd="douban"></a><a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a> <a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a><a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a> <a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["douban","renren","qzone","tqq","tsina"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> <!-- 引用官方图标 --> </p> <p>使用手机软件扫描微信二维码</p> <p>关注我们可获取更多热点资讯</p> <p>感谢网游提供格友情技术支持</p> </dd> </div> </div> </div> </div> <div class="clear"></div> <div class="clear"></div> <!--底部信息完 --> <script type="text/javascript"> window.onload = function(){ $('.clicknum').each(function(i){ var url="/e/public/ViewClick?&down=0&nojs=1&classid="+$(this).attr("data-class")+"&id="+$(this).attr("data-id"); $(this).load(url); }); } </script> <script src="/static/js/common.min.js" type="text/javascript"></script> </body> </html>