首页 > 代码库 > W3C代码标准规范

W3C代码标准规范

2024-09-30 10:22:39   219人阅读

我们知道，HTML5添加了标签的容错性，在书写方面变得更灵活。不像XHTML那样，有严格的代码规范，不符合规范就不给我们解析。那么，我们在写代码时为什么还要刻意去符合哪些所谓的“规范”呢？

答案这一个就够了：利人利己，便于维护！如果你写的代码不符合“规范”，查找代码的错误时或者后期的维护会让你痛恨自己当初怎么会写出那么乱的代码。

有些规范我们也许平时不注意，但无形中也用了。为了避免漏掉一些规范，我这里就整理一下，以便以后有意识的去用。

 

1、<!DOCTYPE html >

现在是HTML5的时代，我们有必要去让浏览器也意识到XHTML的时代已经过去了，需要它用新的标准解析我们的标签。如果不声明这句话，有些浏览器可能还会怀念那个“怪异模式”的标准，也许会渲染出我们意想不到的效果。因此，在进行页面搭建时，一定要事先写上这一句！

 

2、定义语言编码

<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
现在已经是HTML5的时代，定义语言编码变得如此简单，但但但，一定还是要有的！

 

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

这里的所有指定的那些有闭合标签的，比如<div><p><span>...那些单标签的<meta><input>...自然就不用了。闭合标签的话，代码结构会显得清晰，便于攻城尸去检查，也利于浏览器的识别。何乐而不为呢。

 

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

虽然HTML5标签对大小写不敏感，但攻城尸对大小写还是多少敏感一些的，你说你都写成小写的看着多舒服，相信没人愿意看一连串的大写英文字母吧。


5、不要在注释内容中使用“--”
“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。
例如，下面的代码是无效的：<!--这里是注释-----------这里是注释-->
正确的应用等号或者空格替换内部的虚线。<!--这里是注释============这里是注释-->

 

6、所有的属性必须用引号""括起来
在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。
例如：<height=80>必须修改为：<height="80">。
特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用&apos;，例如：<alt="say&apos;hello&apos;">

 

7、所有的标记都必须合理嵌套
XHTML中要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：  
<p><b></p></b>必须修改为：<p><b></b></p>
就是说，一层一层的嵌套必须是严格对称。在HTML5中，不正确嵌套虽然也能解析出来，但往往会解析出让你意想不到的效果。

 

8、所有的属性必须用引号""括起来

还是那句话，虽然HTML5没要求，但这也是所谓的“规范”，你值得遵守！

 

9、把所有<和&特殊符号用编码表示
任何小于号（<），不是标签的一部分，都必须被编码为 &lt;
任何大于号（>），不是标签的一部分，都必须被编码为 &gt;
任何与号（&），不是实体的一部分的，都必须被编码为 &amp; 
错误：
http://club.china.alibaba.com/forum/thread/search_forum.html?action=SearchForum&doSearchForum=true&main=1&catcount=10&keywords=mp3
正确：
http://club.china.alibaba.com/forum/thread/search_forum.html?action=SearchForum&amp;doSearchForum=true&amp;main=1&amp;catcount=10&amp;keywords=mp3

 

10、图片添加有意义的alt属性
例如：<img src="http://www.mamicode.com/logo.gif" width="100" height="100" align="middle" boder="0" alt="阿里巴巴" />
尽可能的让作为内容的图片都带有属于自己的alt属性，这样，在加载不到图片的情况下用户也能知道这张图片是干嘛的。
同理：添加文字链接的title属性。
<a href="http://www.mamicode.com/#" target="_blank" title="新闻新闻新闻新闻">新闻新闻…</a>，在一些限定字数的内容展示尤为重要，帮助显示不完成的内容显示完整，而不用考虑页面会因此而撑大。

 

11、在form表单中增加lable，以增加用户友好度

例如：

<form action="http://somesite.com/prog/adduser" 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>

 

也许就是这些看似没什么太大用处的“规范”，如果你不注意的话，会给你带来不少的麻烦；如果你时刻注意着，会使你的开发顺风顺水。

 

W3C代码标准规范


联系
我们