WEB标准教程第6天：XHTML代码规范-脚本在线

AI智能体脚本智能办公脚本自动化游戏脚本浏览器自动化脚本服务器脚本

WEB标准教程第6天：XHTML代码规范

作者：互联网

2009-05-31

WEB标准化

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

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

和

而不一定写对应的

和

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

　　
网页设计师

2.所有标签的元素和属性的名字都必须使用小写
　　
　　与HTML不一样，XHTML对大小写是敏感的，和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。</p> <p>　　3.所有的XML标记都必须合理嵌套</p> <p>　　同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：</p> <p>　　<p><b></p></b> </p> <p>　　必须修改为：</p> <p>　　<p><b></b></p> </p> <p>　　就是说，一层一层的嵌套必须是严格对称。</p> <p>　　4.所有的属性必须用引号""括起来</p> <p>　　在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如:</p> <p>　　<height=80> <br /> 　　<br /> 　　必须修改为：</p> <p>　　<height="80"> </p> <p>　　特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：</p> <p>　　<alt="say'hello'"> </p> <p>　　5.把所有<和&特殊符号用编码表示<br /> 　　<br /> 　　任何小于号（<），不是标签的一部分，都必须被编码为& l t ; </p> <p>　　任何大于号（>），不是标签的一部分，都必须被编码为& g t ; </p> <p>　　任何与号（&），不是实体的一部分的，都必须被编码为& a m p; </p> <p>　　注：以上字符之间无空格。</p> <p>　　6.给所有属性赋一个值</p> <p>　　XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：</p> <p>　　<td nowrap> <input type="checkbox" name="shirt" value="medium" checked> <br /> 必须修改为：</p> <p>　　<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked"> </p> <p>　　7.不要在注释内容中使“--”</p> <p>　　“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的:</p> <p>　　 <br /> 　　<br /> 　　用等号或者空格替换内部的虚线。</p> <p>　　 </p> <p>　　以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。</p> </div> <div class="artmoretabs flexRow"> <p>相关标签:</p> <div class="mtbs flexRow"> <span class="mtbsa flexRow check" title="WEB标准">WEB标准</span> </div> </div> <div class="lastanext flexRow"> <a class="lastart flexRow" href="/wz/976.html" ><span>上一篇：</span><span>WEB标准教程第5天：head区的其他设置</span></a> <a class="nextart flexRow" href="/wz/978.html" ><span>下一篇：</span><span>WEB标准教程第7天：CSS入门</span></a> </div> </div> <div class="dtl-xgtj"> <div class="jb-titles flexRow"> <div class="jbtle-left flexRow"><b></b><p>相关推荐</p></div> </div> <div class="tjlist flexRow"> <div class="tj-item "> <div class="tjitemd"> <div class="tjimd-top flexRow"> <a class="imdta flexRow" href="/wz/366146.html" > <img src="https://images.jiaoben.net/uploads/20260417/logo_69e223d2c22a91.jpeg" > </a> <div class="imdt-right flexColumn"> <a class="imdtra flexRow overflowclass" href="/wz/366146.html" >你的 Vue 3 defineEmits()，VuReact 会编译成什么样的 React？</a> <a class="imdtrap flexRow overflowclass" href="/wz/366146.html" > VuReact 是一个能将 Vue 3 代码编译为标准、可维护 React 代码的工具。今天就带大家直击核心：Vue 中常见的 defineEmits 宏经过 VuReact 编译会变成什么React </a> </div> </div> <div class="tjimd-down flexRow"> <div class="imdd-tab flexRow"> <p class="imddt-time flexRow"><b></b><span>2026-04-17</span></p> </div> <a href="/wz/366146.html" class="imdd-more flexRow flexcenter" >立即查看</a> </div> </div> </div> <div class="tj-item "> <div class="tjitemd"> <div class="tjimd-top flexRow"> <a class="imdta flexRow" href="/wz/366126.html" > <img src="https://images.jiaoben.net/uploads/20260417/logo_69e222a81aa1d1.jpeg" > </a> <div class="imdt-right flexColumn"> <a class="imdtra flexRow overflowclass" href="/wz/366126.html" >Vue3 + TS 企业级工程化项目全套实战（Vue3 + Vite + Pinia + VueRouter + Element Plus）</a> <a class="imdtrap flexRow overflowclass" href="/wz/366126.html" > 一、项目背景与技术栈选型这是一个面向中大型后台管理系统的 Vue3 工程化全套方案。你可以直接用于项目脚手架、面试准备或技术博客。核心技术栈 Vue3（Composition API） Vite </a> </div> </div> <div class="tjimd-down flexRow"> <div class="imdd-tab flexRow"> <p class="imddt-time flexRow"><b></b><span>2026-04-17</span></p> </div> <a href="/wz/366126.html" class="imdd-more flexRow flexcenter" >立即查看</a> </div> </div> </div> <div class="tj-item "> <div class="tjitemd"> <div class="tjimd-top flexRow"> <a class="imdta flexRow" href="/wz/365889.html" > <img src="https://images.jiaoben.net/uploads/20260417/logo_69e2154a6080c1.jpeg" > </a> <div class="imdt-right flexColumn"> <a class="imdtra flexRow overflowclass" href="/wz/365889.html" >Vue 3 defineOptions 宏，用 VuReact 编译成 React 长什么样？</a> <a class="imdtrap flexRow overflowclass" href="/wz/365889.html" > 今天我们继续拆解核心 API：Vue 3 <script setup> 里的 defineOptions 宏，经过 VuReact 编译后在 React 中如何呈现？ </a> </div> </div> <div class="tjimd-down flexRow"> <div class="imdd-tab flexRow"> <p class="imddt-time flexRow"><b></b><span>2026-04-17</span></p> </div> <a href="/wz/365889.html" class="imdd-more flexRow flexcenter" >立即查看</a> </div> </div> </div> <div class="tj-item "> <div class="tjitemd"> <div class="tjimd-top flexRow"> <a class="imdta flexRow" href="/wz/365738.html" > <img src="https://images.jiaoben.net/uploads/20260417/logo_69e207bad35511.jpeg" > </a> <div class="imdt-right flexColumn"> <a class="imdtra flexRow overflowclass" href="/wz/365738.html" >Vue3 KeepAlive 深度揭秘：组件缓存的魔法是如何实现的？</a> <a class="imdtrap flexRow overflowclass" href="/wz/365738.html" > Vue3 KeepAlive 深度揭秘：组件缓存的魔法是如何实现的？ ? 文章导航 1. 为什么需要 KeepAlive？ 2. KeepAlive 基础使用 3. 核心属性详解 4. 专属生命周期钩 </a> </div> </div> <div class="tjimd-down flexRow"> <div class="imdd-tab flexRow"> <p class="imddt-time flexRow"><b></b><span>2026-04-17</span></p> </div> <a href="/wz/365738.html" class="imdd-more flexRow flexcenter" >立即查看</a> </div> </div> </div> </div> </div> </div> <div class="cd-right dtlcd-right"> <div class="dtl-ht"> <div class="jb-titles flexRow"> <div class="jbtle-left flexRow"><b></b><p>专题</p></div> </div> <div class="dtlht-list "> <div class="htl-item flexRow"> <div class="htmitem-left"> <div class="htiteml-top flexRow"> <a href="/wz/zt-69351.html" >#数据可视化</a> <span></span> </div> <a class="htiteml-down flexRow" href="/wz/zt-69351.html" >数据可视化（Data Visu</a> </div> <p class="htmitem-right flexRow flexcenter gz" data-id="69351" >+ 收藏</p> </div> <div class="htl-item flexRow"> <div class="htmitem-left"> <div class="htiteml-top flexRow"> <a href="/wz/zt-69342.html" >#自然语言处理</a> <span></span> </div> <a class="htiteml-down flexRow" href="/wz/zt-69342.html" >自然语言处理（Natural</a> </div> <p class="htmitem-right flexRow flexcenter gz" data-id="69342" >+ 收藏</p> </div> <div class="htl-item flexRow"> <div class="htmitem-left"> <div class="htiteml-top flexRow"> <a href="/wz/zt-68363.html" >#Excel公式</a> <span></span> </div> <a class="htiteml-down flexRow" href="/wz/zt-68363.html" >Excel公式就是：用函数 +</a> </div> <p class="htmitem-right flexRow flexcenter gz" data-id="68363" >+ 收藏</p> </div> <div class="htl-item flexRow"> <div class="htmitem-left"> <div class="htiteml-top flexRow"> <a href="/wz/zt-68355.html" >#Excel技巧</a> <span></span> </div> <a class="htiteml-down flexRow" href="/wz/zt-68355.html" >Excel是日常生活中必不可</a> </div> <p class="htmitem-right flexRow flexcenter gz" data-id="68355" >+ 收藏</p> </div> <div class="htl-item flexRow"> <div class="htmitem-left"> <div class="htiteml-top flexRow"> <a href="/wz/zt-68081.html" >#蛋仔派对</a> <span></span> </div> <a class="htiteml-down flexRow" href="/wz/zt-68081.html" >蛋仔派对最新官方活动、关卡速</a> </div> <p class="htmitem-right flexRow flexcenter gz" data-id="68081" >+ 收藏</p> </div> <div class="htl-item flexRow"> <div class="htmitem-left"> <div class="htiteml-top flexRow"> <a href="/wz/zt-68000.html" >#人工智能</a> <span></span> </div> <a class="htiteml-down flexRow" href="/wz/zt-68000.html" >人工智能（AI），简单说，就</a> </div> <p class="htmitem-right flexRow flexcenter gz" data-id="68000" >+ 收藏</p> </div> </div> </div> <div class=" dtl-zt"> <div class="jb-titles flexRow"> <div class="jbtle-left flexRow"><b></b><p>最新数据</p></div> </div> <div class="wkch-downs"> <div class="weekch-top flexRow"> <a class="wktpa flexRow" href="/wz/983.html" > <img src="/jiaoben/image/noimg.png" > </a> <div class="wktpa-right flexColumn"> <a class="wktpara flexRow overflowclass" href="/wz/983.html" >学习Div+CSS从何入手技术</a> <a class="wktparp flexRow overflowclass" href="/wz/983.html" > 引言：引用一本书中的一 </a> </div> </div> <div class="weekch-list"> <div class="weekch-con flexRow"> <div class="weekch-icon flexRow"><b></b></div> <a href="/wz/982.html" class="weekcha flexRow flexcenter overflowclass" >CSS网页标准制作关于网页表单语义结构实例</a> </div> <div class="weekch-con flexRow"> <div class="weekch-icon flexRow"><b></b></div> <a href="/wz/981.html" class="weekcha flexRow flexcenter overflowclass" >符合WEB标准的滚动文字特效的实现方法</a> </div> <div class="weekch-con flexRow"> <div class="weekch-icon flexRow"><b></b></div> <a href="/wz/980.html" class="weekcha flexRow flexcenter overflowclass" >WEB标准教程第9天：第一个CSS布局实例</a> </div> <div class="weekch-con flexRow"> <div class="weekch-icon flexRow"><b></b></div> <a href="/wz/979.html" class="weekcha flexRow flexcenter overflowclass" >WEB标准教程第8天：CSS布局入门</a> </div> <div class="weekch-con flexRow"> <div class="weekch-icon flexRow"><b></b></div> <a href="/wz/975.html" class="weekcha flexRow flexcenter overflowclass" >WEB标准教程第4天：调用样式表</a> </div> <div class="weekch-con flexRow"> <div class="weekch-icon flexRow"><b></b></div> <a href="/wz/974.html" class="weekcha flexRow flexcenter overflowclass" >WEB标准教程第3天：定义语言编码</a> </div> <div class="weekch-con flexRow"> <div class="weekch-icon flexRow"><b></b></div> <a href="/wz/973.html" class="weekcha flexRow flexcenter overflowclass" >WEB标准教程第2天：什么是名字空间</a> </div> <div class="weekch-con flexRow"> <div class="weekch-icon flexRow"><b></b></div> <a href="/wz/972.html" class="weekcha flexRow flexcenter overflowclass" >采访Eric Meyer的10个问题</a> </div> <div class="weekch-con flexRow"> <div class="weekch-icon flexRow"><b></b></div> <a href="/wz/971.html" class="weekcha flexRow flexcenter overflowclass" >CSS比表格更难吗？</a> </div> </div> </div> </div> <div class=" dtl-wz"> <div class="jb-titles flexRow"> <div class="jbtle-left flexRow"><b></b><p>相关文章</p></div> </div> <div class="blog-list"> <a href="/wz/13787.html" class="bloga flexRow over"><p class="overflowclass">IE6.0下PNG透明最简洁解决方案</p><div class="blogtime"><span>11/</span>12</div></a> <a href="/wz/13786.html" class="bloga flexRow over"><p class="overflowclass">再谈IE6之Fixed定位</p><div class="blogtime"><span>11/</span>12</div></a> <a href="/wz/13553.html" class="bloga flexRow over"><p class="overflowclass">IE6.0下PNG透明最简洁解决方案</p><div class="blogtime"><span>10/</span>14</div></a> <a href="/wz/13525.html" class="bloga flexRow over"><p class="overflowclass">再谈IE6之Fixed定位</p><div class="blogtime"><span>10/</span>12</div></a> <a href="/wz/13517.html" class="bloga flexRow over"><p class="overflowclass">HTML5 WebSockets基础使用教程</p><div class="blogtime"><span>10/</span>07</div></a> <a href="/wz/13483.html" class="bloga flexRow over"><p class="overflowclass">ajaxSubmit插件jQuery1.4.2版JSON问题</p><div class="blogtime"><span>09/</span>09</div></a> <a href="/wz/13482.html" class="bloga flexRow over"><p class="overflowclass">HTML5 创建一个Web网页便利贴</p><div class="blogtime"><span>09/</span>09</div></a> <a href="/wz/13481.html" class="bloga flexRow over"><p class="overflowclass">关于CSS 我们是不是已经走得太远？</p><div class="blogtime"><span>09/</span>09</div></a> <a href="/wz/13345.html" class="bloga flexRow over"><p class="overflowclass">HTML5标记省略语法规则</p><div class="blogtime"><span>08/</span>24</div></a> <a href="/wz/13125.html" class="bloga flexRow over"><p class="overflowclass">HTML5标记省略语法规则</p><div class="blogtime"><span>08/</span>08</div></a> </div> </div> <div class="cdr-ai"> <div class="jb-titles flexRow"> <div class="jbtle-left flexRow"><b></b><p>AI精选 </p></div> <a class="jbtitle-more flexRow" href="/category/list_344_1.html" title=""><span>更多</span><b></b></a> </div> <div class="ai-list"> <div class="ail-top flexRow"> <a href="/wz/366175.html" title="" class="ailta "> <img src="https://images.jiaoben.net/uploads/20260417/logo_69e224cf789341.jpg" > <p ><span>赛博朋克 K-Pop 动画</span></p></a> <a href="/wz/366174.html" title="" class="ailta "> <img src="https://images.jiaoben.net/uploads/20260417/logo_69e224c9eb4481.jpg" > <p ><span>冰川星球大逃亡</span></p></a> </div> <div class="ail-down"> <a class="ali-con flexRow" href="/wz/366173.html" title=""> <div class="alicon-left flexRow"><span>精选</span></div> <p class="aliconp overflowclass">皮克斯/迪士尼风格 X (Twitter) 个人资料卡片提示</p> </a> <a class="ali-con flexRow" href="/wz/366167.html" title=""> <div class="alicon-left flexRow"><span>精选</span></div> <p class="aliconp overflowclass">蝴蝶群化作空灵舞者循环动画</p> </a> <a class="ali-con flexRow" href="/wz/366165.html" title=""> <div class="alicon-left flexRow"><span>精选</span></div> <p class="aliconp overflowclass">抱着泰迪熊的男士写实肖像</p> </a> <a class="ali-con flexRow" href="/wz/366163.html" title=""> <div class="alicon-left flexRow"><span>精选</span></div> <p class="aliconp overflowclass">滑雪旅行自拍视角提示</p> </a> <a class="ali-con flexRow" href="/wz/366152.html" title=""> <div class="alicon-left flexRow"><span>精选</span></div> <p class="aliconp overflowclass">天鹅绒运动服中的超逼真肖像</p> </a> <a class="ali-con flexRow" href="/wz/366136.html" title=""> <div class="alicon-left flexRow"><span>精选</span></div> <p class="aliconp overflowclass">外卖配送狂奔电影感提示词</p> </a> <a class="ali-con flexRow" href="/wz/365746.html" title=""> <div class="alicon-left flexRow"><span>精选</span></div> <p class="aliconp overflowclass">MCP协议设计与实现-第13章 Streamable HTTP：远程流式传输</p> </a> <a class="ali-con flexRow" href="/wz/365745.html" title=""> <div class="alicon-left flexRow"><span>精选</span></div> <p class="aliconp overflowclass">从零开发一个 MCP 服务器 + OpenCode Skill：让 AI 学会审查你的代码</p> </a> </div> </div> </div> <div class="cdr-blog"> <div class="jb-titles flexRow"> <div class="jbtle-left flexRow"><b></b><p>脚本推荐</p></div> </div> <div class="blog-list"> <a href="/wz/zt-49225.html" title="" class="bloga flexRow over"><p class="overflowclass">SeeDance 2.0 Video Creator专区</p></a> <a href="/wz/zt-49224.html" title="" class="bloga flexRow over"><p class="overflowclass">OpenClaw AI专区</p></a> <a href="/wz/zt-49223.html" title="" class="bloga flexRow over"><p class="overflowclass">cowork专区</p></a> <a href="/wz/zt-49222.html" title="" class="bloga flexRow over"><p class="overflowclass">claude code skills专区</p></a> </div> </div> </div> </div> </div> </div> </main> <script> $(function() { // “+ 收藏”按钮点击事件 $(document).on('click', '.htmitem-right, .ztop-right', function(e) { // 仅针对包含 “+ 收藏” 文字的按钮 if ($(this).text().indexOf('+ 收藏') === -1) return; e.preventDefault(); const id = $(this).data('id'); if (!id) { layer.msg('该项暂无有效ID，无法收藏'); return; } // 构造收藏 URL: 当前域名 + /wz/zt- + id + / const bookmarkUrl = window.location.origin + '/wz/zt-' + id + '.html'; // 获取收藏标题 (优先从同级元素获取话题名称，否则使用页面标题) let bookmarkTitle = $(this).closest('.htl-item, .zttopd').find('a:first, span.overflowclass').text().trim() || document.title; if (bookmarkTitle.startsWith('#')) bookmarkTitle = bookmarkTitle.substring(1); // 浏览器收藏逻辑 (带 Fallback) try { if (window.sidebar && window.sidebar.addPanel) { // Firefox < 23 window.sidebar.addPanel(bookmarkTitle, bookmarkUrl, ""); } else if (window.external && ('AddFavorite' in window.external)) { // IE window.external.AddFavorite(bookmarkUrl, bookmarkTitle); } else { // Chrome, Safari, Firefox 23+, etc. const isMac = /Mac/i.test(navigator.userAgent); const keyStr = isMac ? 'Command + D' : 'Ctrl + D'; layer.confirm('由于浏览器安全限制，请使用 <b>' + keyStr + '</b> 手动添加收藏。<br><br>收藏地址：<br><small>' + bookmarkUrl + '</small>', { title: '收藏提示', btn: ['复制链接', '知道了'], yes: function(index) { copyToClipboard(bookmarkUrl).then(() => { layer.msg('链接已复制，请手动添加到收藏夹'); }).catch(() => { layer.msg('复制失败，请手动选择复制'); }); layer.close(index); } }); } } catch (err) { layer.msg('收藏失败，请手动添加'); } }); // 兼容非 HTTPS 的复制函数 function copyToClipboard(text) { if (navigator.clipboard && window.isSecureContext) { return navigator.clipboard.writeText(text); } else { let textArea = document.createElement("textarea"); textArea.value = text; textArea.style.position = "fixed"; textArea.style.left = "-999999px"; textArea.style.top = "-999999px"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); return new Promise((res, rej) => { document.execCommand('copy') ? res() : rej(); textArea.remove(); }); } } }); </script> <footer> <div class="foot "> <div class="foot-top flexRow"> <div class="foot-left"> <div class="ftl-top flexRow"><span class="flexRow flexcenter">脚本</span>在线</div> <p class="ftl-down"> 智能赋能梦想，脚本构筑现实。我们致力于链接AI智能指令与传统自动化，为您提供一站式、高效率的脚本资产与生成服务。 </p> </div> <div class="foot-right flexRow"> <div class="ftr-list flexColumn"> <p>核心板块</p> <span>AI脚本库</span> <span>自动化仓库</span> <span>脚本实验室</span> </div> <div class="ftr-list flexColumn"> <p>关于我们</p> <a href="/category/list_229_1.html" >最新游戏</a> <span>商务合作</span> <span>隐私政策</span> </div> <div class="ftr-list flexColumn"> <p>社区支持</p> <span >API文档</span> <a href="/category/list_334_1.html" >攻略资讯</a> <span>违规举报</span> </div> </div> </div> <div class="foot-down flexColumn"> <p>© 2026 jiaoben.net | 脚本在线 | 联系：jiaobennet2026@163.com</p> <p>备案：<a style="color: #7F7F7F;" href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">湘ICP备18025217号-11</a> </p> </div> </div> </footer> <div style="display:none;"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?5d3cfe1f36b1988029fe82a0d475b20d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </body> </html>