W3C网站代码标准规范大全.doc
W3C网站代码标准规范大全.doc
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- W3C 网站 代码 标准规范 大全
- 资源描述：
-
W3C网站代码标准规范 修订版本1.02 更新时间 2010-06-08 往链点点通共享资源，了解更多请登录www.WL W3C网站代码标准规范 目 录 目 录 1 一、目的: 为什么要遵循标准 2 二、目标 2 三、受众 2 四、标准内容 2 1、什么是DOCTYPE 3 2、名字空间 namespace 4 3、定义语言编码 4 4、Javascript定义 4 5、CSS定义 5 6、不要在注释内容中使“--” 5 7、所有标签的元素和属性的名字都必须使用小写 5 8、所有的属性必须用引号""括起来 6 9、把所有<和&特殊符号用编码表示 6 10、给所有属性赋一个值 6 11、所有的标记都必须要有一个相应的结束标记 7 12、所有的标记都必须合理嵌套 7 13、图片添加有意义的 alt 属性 7 14、在form表单中增加lable,以增加用户友好度 8 附录一 8 附录二 9 一、目的: 为什么要遵循标准 我们所处的角色 我们作为的生产者实际上只是位于中游，既不是上游的浏览器制造商,他们是标准的真正制定者，也不算是下游，他们是浏览器的终端使用者。 这个角色就意味着我们位于一个接口的位置：我们需要想办法满足下游的用户使用上游不同浏览器时看到的是同样的内容 用一个程序的语言说，我们是转换器……adapter，我们想方设法让我们的页面、我们的程序能够支持所有的浏览器、能够满足尽可能多的用户。虽然我们很累，但我们这么作的结果就是我们会满足尽可能多的用户 Exp： 目前市面上的DVD刻录盘有三种标准，可是目前世面上大部分的DVD刻录机都是尽可能地全部兼容---------Why ? 因为他们不想失去潜在客户，这就是我们在意标准的原因！我们要满足所有的客户，即使做不到，我们也要满足我们技术范围之内的所有用户。 二、目标 一个标准制作的网站，让你压根感觉不到跟标准有关。 三、受众 所有ui设计师、技术工程师、运营维护人员。 四、标准内容 抛弃声明：以后我们将抛弃font标签，新的页面中不应该再出现如<font color=”red”></font> 已经存在的老的页面也应该在修改时尽量替代，替代方法： <span class=”red_tex”></span> 一个标准XHTML头信息格式如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> <head> <title>慧聪网_中国领先的B2B电子商务平台、电子商务网站</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="description" content="慧聪网()是为中小企业提供B2B电子商务服务的网上贸易平台，是企业寻求电子商务网络贸易信息的首选行业门户.中小企业通过慧聪网可以快速发布产品供求信息并达成交易.慧聪网为您提供全面的B2B行业资讯,供应,求购,库存信息,努力让每个老板都成为B2B电子商务活动的一员." /> <meta name="keywords" content="B2B,hc360,电子商务,供求信息,加工,库存,二手,网上贸易,行业门户,商机,网上交易,行业资讯,在线交易,中小企业,供应,求购,商务网,商业贸易,贸易平台" /> </head> 注:一般如果项目或页面没有要求description和keywords描述的话,均采用中文站首页的mate信息。 1、什么是DOCTYPE DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。 其中的DTD(例如xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。 要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。 XHTML 1.0 提供了三种DTD声明可供选择： n 过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。 完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> n 严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。 完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> n 框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。 完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 注:DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。 2、名字空间 namespace <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 通常我们HTML4.0的代码只是<html>，这里的"xmlns"是什么呢？ 这个“xmlns”是XHTML namespace的缩写，叫做“名字空间”声明。 XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字空间都相同，就是"http://www.w3.org/1999/xhtml"。目前阶段我们只要照抄代码就可以了。 3、定义语言编码 <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” /> 为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312(简体中文)，制作多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定义。 注：如果忘记了定义语言编码,可能就会出现,你在DW做完一个页面,第二次打开时所有的中文变成了乱码 4、Javascript定义 Js必须要用<script language="javascript" type="text/javascript">来开头定义,而不是原来的<script language=javascript>或干脆直接<script>,并且需要加个注释符<!-- -->，以保证不在不支持js 的浏览器上直接显示出代码来。 例如： <script language="javascript" type="text/javascript"> //<![CDATA[ function show_layout(selObj){ var n = selObj.options[selObj.selectedIndex].value; document.getElementById('stylesheet').href = n; } //]]> </script> 注：具体参考js规范 5、CSS定义 CSS必须要用<style type=“text/css”>开头来定义,而不是原来的直接<style>，也不建议直接写在内容代码里如：<div style=”padding-left:20px;”></div>,并需要加个注释符<!-- --> 例如： <style type="text/css" media="screen"> <!-- body{margin:0px;padding:0px;font-size:12px;text-align:center} --> </style> 为保证各浏览器的兼容性，在写CSS请都写上数量单位，例如： 错误：.space_10{padding-left:10} 正确：.space_10 {padding-left:10px} 6、不要在注释内容中使“--” “--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。 例如下面的代码是无效的: <!--这里是注释-----------这里是注释--> 正确的应用等号或者空格替换内部的虚线。 <!--这里是注释============这里是注释--> 7、所有标签的元素和属性的名字都必须使用小写 与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。 8、所有的属性必须用引号""括起来 在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。 例如： <height=80> 必须修改为： <height="80"> 特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如： <alt="say'hello'"> 9、把所有<和&特殊符号用编码表示 n 任何小于号（<），不是标签的一部分，都必须被编码为 < n 任何大于号（>），不是标签的一部分，都必须被编码为 > n 任何与号（&），不是实体的一部分的，都必须被编码为 & 错误： 例: 正确:： 10、给所有属性赋一个值 XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如： <td nowrap> <input type="checkbox" name="shirt" value="medium" checked> 必须修改为： <td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked" /> 12、所有的标记都必须要有一个相应的结束标记 以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。 例如： <br /> <img height="80" alt="网页" title=”网页” src="logo.gif" width="200" /> 特殊结束标记 错误： Document.write(“<td width=\“300\”><a href=\“1.html\”>ok</a></td>”); 正确： Document.write(“<td width=\“300\”><a href=\“1.html\”>ok<\/a><\/td>”); 在js中，原已结束的标签需要再转义再结束 13、所有的标记都必须合理嵌套 同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码： <p><b></p></b> 必须修改为： <p><b></b></p> 就是说，一层一层的嵌套必须是严格对称。 错误： <table><tr><form><td></td></form></tr></table> 正确： <form><table><tr><td></td></tr></table></form> 14、图片添加有意义的 alt 属性 例如： <img src=“logo.gif” width=“100” height=“100” align=“middle” boder=“0” alt=“阿里巴巴” /> 尽可能的让作为内容的图片都带有属于自己的alt属性 同理： 添加文字链接的title属性 <a hrehf=”#” target=”_blank” title=”新闻新闻新闻新闻”>新闻新闻…</a>,在一些限定字数的内容展示尤为重要，帮助显示不完成的内容显示完整，而不用考虑页面会因此而撑大 15、在form表单中增加lable,以增加用户友好度 例如： <form action=" method="post"> <label for="firstname">first name: </label> <input type="text" id="firstname"> <label for="lastname">last name: </label> <input type="text" id="lastname"> </form> 实例:label_demo.html 附录一 n 1.XHTML校验 n 校验网址：http://validator.w3.org/ n 校验方式:网址校验、文件上传校验 n 一般选择"Show Source"和"Verbose Output"可以帮助你找到错误代码所在行和错误原因。 n XHTML校验常见错误原因对照表 1.No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定义DOCTYPE。 2.No Character Encoding Found! Falling back to UTF-8.--未定义语言编码。 3.end tag for "img" omitted, but OMITTAG NO was specified--图片标签没有加"/"关闭。 4.an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--属性值必须加引号。 5.element "DIV" undefined---DIV标签不能用大写，要改成小写div。 6.required attribute "alt" not specified---图片需要加alt属性。 7.required attribute "type" not specified---JS或者CSS调用的标签漏了type属性。 其中最最常见的错误就是标签的大小写问题了。通常这些错误都是关联的，比如忘记了一个</li>其他<li>标签都会报错，所以不要看到一堆的错误害怕，通常解决了一个错误，其他的错误也都没有了。 附录二 n 2.CSS2校验 n 校验网址：http://jigsaw.w3.org/css-validator/ n 校验方式:网址校验、文件上传校验、直接贴入代码校验 n 校验成功，会显示"恭喜恭喜，此文档已经通过样式表校验! "。 n 校验失败，会显示两类错误：错误和警告。错误表示一定要修正，否则无法通过校验；警告表示有代码不被W3C推荐,建议修改。 CSS2校验常见错误原因对照表 1.(错误)无效数字 : color909090 不是一个 color 值 : 909090 ---十六进制颜色值必须加"#"号，即#909090 2.(错误)无效数字 : margin-topUnknown dimension : 6pixels ---pixels不是一个单位值，正确写法6px 3.(错误)属性 scrollbar-face-color 不存在 : #eeeeee --- 定义滚动条颜色是非标准的属性 4.(错误)值 cursorhand不存在 : hand是非标准属性值，修改为cursor:pointer 5.(警告)Line : 0 font-family: 建议你指定一个种类族科作为最后的选择 --W3C建议字体定义的时候，最后以一个类别的字体结束，例如"sans-serif"，以保证在不同操作系统下，网页字体都能被显示。 6.(警告)Line : 0 can't find the warning message for otherprofile --表示在代码中有非标准属性或值，校验程序无法判断和提供相应的警告信息。 n 同样，通过检验后，可以放置一个CSS校验通过图标 往链点点通共享资源 ----------------------------- 资料说明 ----------------------------- 该资源由往链点点通搜索于网络公开资源，仅供网友浏览阅读，请勿用于商业用途； 往链点点通，是免费的新一代电脑管理、网络应用桌面软件。 通过简洁清爽并可随意切换的两种窗口操作界面，构建了用户、电脑、互联网之间顺畅的入口平台。为用户管理电脑、智能办公、快捷上网、玩转应用（如 游戏，），提供全方位一站式的服务。让用户只需通过往链点点通，就能便捷到达信息时代的各个角落。真正实现一键直达，点点就通。 往链快搜索：无论是搜索硬盘资源、查找网络资源，还是追踪热门应用，都能享受前所未所的快速度。如本地文件搜索，千万文件，零秒呈现；如网络搜索，只需输入一次关键词，便能同步打开百度、google等多个搜索引擎的结果页； 往链优应用：与某些软件相比，往链点点通追求绿色无广告的体验，精选最优质的网络应用，为用户提供纯净实在的生活、工作、学习、娱乐、休闲应用空间。 往链点点通，让您用windows的使用习惯享受苹果的操作体验！ 查看和分享更多优质资源，请进入www.WL 下载往链点点通，找到您的一切网络所需！ 往链网址导航大全 往链点点通，让您无障碍畅游网络世界！ 第10页/共10页展开阅读全文
咨信网温馨提示：1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前可先查看【教您几个在下载文档中可以更好的避免被坑】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时联系平台进行协调解决，联系【微信客服】、【QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”，意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：0574-28810668；投诉电话：18658249818。
实名认证
平台协调中心【客服】
自信AI助手
微信客服
客服QQ
发送邮件
意见反馈
链接地址：https://www.zixin.com.cn/doc/8865858.html