当前位置：Gxlcms > css > 第6天:XHTML代码规范_基础教程

第6天:XHTML代码规范_基础教程

时间：2021-07-01 10:21:17 帮助过：39人阅读

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

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

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

和

  • 而不一定写对应的

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


    网页设计师

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

    与HTML不一样，XHTML对大小写是敏感的，和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。</P> <H3>3.所有的XML标记都必须合理嵌套</H3> <P>同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：</P><SPAN class=code><p><b></p>/b></SPAN> <P>必须修改为：</P><SPAN class=code><p><b></b>/p></SPAN> <P>就是说，一层一层的嵌套必须是严格对称。</P> <H3>4.所有的属性必须用引号""括起来</H3> <P>在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如:</P><SPAN class=code><height=80></SPAN> <P>必须修改为：</P><SPAN class=code><height="80"></SPAN> <P>特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：</P><SPAN class=code></SPAN> <H3>5.把所有<和&特殊符号用编码表示</H3> <UL> <LI>任何小于号（<），不是标签的一部分，都必须被编码为<SPAN class=code>& l t ;</SPAN> <LI>任何大于号（>），不是标签的一部分，都必须被编码为<SPAN class=code>& g t ;</SPAN> <LI>任何与号（&），不是实体的一部分的，都必须被编码为<SPAN class=code>& a m p;</SPAN> </LI></UL> <P>注：以上字符之间无空格。</P> <H3>6.给所有属性赋一个值</H3> <P>XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：</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> <H3>7.不要在注释内容中使“--”</H3> <P>“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的:</P><SPAN class=code><!--这里是注释-----------这里是注释--></SPAN> <P>用等号或者空格替换内部的虚线。</P><SPAN class=code><!--这里是注释============这里是注释--></SPAN> <P>以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。 </div> <div class=""> <ul class="m-news-opt fix"> <li class="opt-item"> <a href='/css-256461.html' target='_blank'><p>< 上一篇</p><p class="ellipsis">详细解读SilverlightLine对象使用技巧</p></a> </li> <li class="opt-item ta-r"> <a href='/css-256463.html' target='_blank'><p>下一篇 ></p><p class="ellipsis">ShapeType给VML制作模版_VML相关</p></a> </li> </ul> </div> </div> </div> <div class="g-title fix"> <h2 class="title-txt">人气教程排行</h2> </div> <div class="m-rank u-dashed mb40"> <ul> <li class="rank-item"> <a href="/css-260306.html" title='css文本属性有哪些？css文本属性的总结' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">107次</span> <span class="g-sort-num top">1</span> css文本属性有哪些？css文本属性的总结 </a> </li> <li class="rank-item"> <a href="/css-260754.html" title='css实现弹出对话框的同时出现遮罩层' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">107次</span> <span class="g-sort-num second">2</span> css实现弹出对话框的同时出现遮罩层 </a> </li> <li class="rank-item"> <a href="/css-258484.html" title='cssword-wrap属性的使用详解' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">107次</span> <span class="g-sort-num third">3</span> cssword-wrap属性的使用详解 </a> </li> <li class="rank-item"> <a href="/css-261591.html" title='csstarget-new属性怎么用' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">107次</span> <span class="g-sort-num ">4</span> csstarget-new属性怎么用 </a> </li> <li class="rank-item"> <a href="/css-261624.html" title='cssletter-spacing属性怎么用' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">106次</span> <span class="g-sort-num ">5</span> cssletter-spacing属性怎么用 </a> </li> <li class="rank-item"> <a href="/css-259300.html" title='HTML5中的picture元素响应式处理图片方法' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">106次</span> <span class="g-sort-num ">6</span> HTML5中的picture元素响应式处理图片方法 </a> </li> <li class="rank-item"> <a href="/css-259588.html" title='CSS实现自适应导航菜单' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">106次</span> <span class="g-sort-num ">7</span> CSS实现自适应导航菜单 </a> </li> <li class="rank-item"> <a href="/css-258406.html" title='全部汇总函数定义与用法汇总' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">106次</span> <span class="g-sort-num ">8</span> 全部汇总函数定义与用法汇总 </a> </li> <li class="rank-item"> <a href="/css-258129.html" title='用CSS制作聊天框小尖角、气泡效果' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">106次</span> <span class="g-sort-num ">9</span> 用CSS制作聊天框小尖角、气泡效果 </a> </li> <li class="rank-item"> <a href="/css-257449.html" title='详解CSS的overflow属性防止float撑开div的使用方法' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">106次</span> <span class="g-sort-num ">10</span> 详解CSS的overflow属性防止float撑开div的使用方法 </a> </li> <li class="rank-item"> <a href="/css-261506.html" title='cssbackground-color属性怎么用？' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">105次</span> <span class="g-sort-num ">11</span> cssbackground-color属性怎么用？ </a> </li> <li class="rank-item"> <a href="/css-258398.html" title='关于动画和变换的详细介绍' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">105次</span> <span class="g-sort-num ">12</span> 关于动画和变换的详细介绍 </a> </li> <li class="rank-item"> <a href="/css-258505.html" title='CSS中z-index属性是什么意思？' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">105次</span> <span class="g-sort-num ">13</span> CSS中z-index属性是什么意思？ </a> </li> <li class="rank-item"> <a href="/css-259412.html" title='css修改下拉列表select默认样式的实例' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">105次</span> <span class="g-sort-num ">14</span> css修改下拉列表select默认样式的实例 </a> </li> <li class="rank-item"> <a href="/css-258812.html" title='CSS3中关于box-shadow属性的使用详解' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">105次</span> <span class="g-sort-num ">15</span> CSS3中关于box-shadow属性的使用详解 </a> </li> <li class="rank-item"> <a href="/css-259382.html" title='CSS3transition和transform实现跑马灯效果' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">105次</span> <span class="g-sort-num ">16</span> CSS3transition和transform实现跑马灯效果 </a> </li> <li class="rank-item"> <a href="/css-258825.html" title='input[type=file]打开时慢、卡顿问题的解决办法' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">105次</span> <span class="g-sort-num ">17</span> input[type=file]打开时慢、卡顿问题的解决办法 </a> </li> <li class="rank-item"> <a href="/css-258850.html" title='区别input框和按钮的方法' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">105次</span> <span class="g-sort-num ">18</span> 区别input框和按钮的方法 </a> </li> <li class="rank-item"> <a href="/css-259410.html" title='css使用relative模仿百度首页top' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">105次</span> <span class="g-sort-num ">19</span> css使用relative模仿百度首页top </a> </li> <li class="rank-item"> <a href="/css-260203.html" title='CSS网格布局（Grid）的两种方式介绍（附代码）' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">105次</span> <span class="g-sort-num ">20</span> CSS网格布局（Grid）的两种方式介绍（附代码） </a> </li> </ul> </div> </div> </div> <!-- / 教程内容页 --> </div> </div> <!-- 页尾 --> <div class="footer"> 本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！</div> <!-- / 页尾 --> <script type="text/javascript" src="/kan/js/read.js"></script> <div style="display:none"> <div class="login-box" id="login-dialog"> <div class="login-top"><a class="current" rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div> <div class="login-form" id="nav-signin"> <!-- <div class="login-ico"><a rel="nofollow" class="qq" id="qqlogin" target="_blank" href="/user-center-qqlogin.html"> QQ </a></div> --> <div class="login-box-form" id="con_login_1"> <form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;"> <p class="int-text"> <input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p> <p class="int-text"> <input class="password1" type="password" id="password" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" > </p> <p class="int-info"> <label class="ui-label"> </label> <label for="agreement" class="ui-label-checkbox"> <input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000"> <input type="hidden" name="notforward" id="notforward" value="1"> <input type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label> <a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p> <p class="int-btn"><a rel="nofollow" id="loginbt" class="loginbtn"><span>登录</span></a></p> </form> </div> <form id="regform" action="/user-center-reg.html" method="post"> <div class="login-reg" style="display: none;" id="con_login_2"> <input type="hidden" name="t" id="t"/> <p class="int-text"> <input id="email" name="email" type="text" value="Email" onfocus="if(this.value=='Email'){this.value='';}" onblur="if(this.value==''){this.value='Email';};"></p> <p class="int-text"> <input id="uname" name="username" type="text" value="用户名或昵称" onfocus="if(this.value=='用户名或昵称'){this.value='';}" onblur="if(this.value==''){this.value='用户名或昵称';};"></p> <p class="int-text"> <input type="password" id="pwd" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';"> </p> <p class="int-text1"><span class="inputbox"> <input id="validate" name="validate" type="text" value="验证码" onfocus="if(this.value=='验证码'){this.value='';}" onblur="if(this.value==''){this.value='验证码';};"> </span><span class="yzm-img"><img src="/user-checkcode-index" alt="看不清楚换一张" id="indexlogin"></p> <p class="int-info"> <label> <input value="" name="agreement" id="agreement" CHECKED="checked" type="checkbox"> 我已阅读<a rel="nofollow" href="/user-center-agreement.html">用户协议</a>及<a rel="nofollow" href="/user-center-agreement.html">版权声明</a></label> </p> <p class="int-btn"><input type="hidden" name="dosubmit"/> <a rel="nofollow" class="loginbtn" id="register"><span>注册</span></a></p> </div> </form> </div> </div> </div> </div> <script type="text/javascript" src="/kan/js/foot_js.js"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6dc1c3c5281cf70f49bc0bc860ec24f2"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript" src="/layui/layui.js"></script> <script> layui.use('code', function() { layui.code({ elem: 'pre', //默认值为.layui-code about: false, skin: 'notepad', title: 'php怎么实现数据库验证跳转代码块', encode: true //是否转义html标签。默认不开启 }); }); </script> </body> </html>