|
Oct
19
|
|
|
Categories: Techniques
| Tags: W3C
| Views: 3,104
|
W3C已经不是什么新的话题，什么是W3C，通过W3C验证的好处，我已经不想在这里赘述。
我只想说一下我们写代码的时候需要纠正的散慢的习惯(针对Transitional)
1. 记得引号！
可能我们会常常为了方便，这样简单地来突出一些字符，如：
<font color=red>text</font>
那么从今天起，不要再这么做了，至少，不要忘掉了引号
<font color="red">text</font>
更好的做法：先定义样式
<style type="text/css"> .red{ color:#ff0000; } </style> <!--样式定义在head中或者单独的css文件-->; <font class="red">text</font> <!--同样，别忘了引号-->
这样，在你某一天，觉得你要突出的字符的颜色太过刺眼，或者你需要加粗，那么你不需要一处处地去修改你的样式或者HTML代码，你只需要修改你事先定义的样式就OK了
.red{ color:#ff9900; font-weight:bold; }
2. 为你的<a>加上title，<img>加上alt
养成这样的习惯是必要的，如果有一天，你的图片不再有效了，那至少不影响整个页面的阅读性。
这样做也有利于搜索引擎的搜索，因为搜索引擎毕竟是机器，它是看不懂图片的。
3. 别忘了type=text/javascript
如果你还习惯于这样：
<script language="javascript" src="XX.js"></script>那么请使用：
<script type="text/javascript" src="XX.js"></script>4. 样式表，脚本调用，禁止“漫游”！
乖乖地把它们写在head里吧。
5. 行内样式，脚本，禁止“裸奔”！
正确的写法：
<style type="text/css"> <!-- a{text-decoration:none;} --></style> <script type="text/javascript"> <!-- //do something ... //--> </script>
如果你的脚本中含有特殊字符，如 ; : > 那请这样写
<script type="text/javascript"> //<![CDATA[ //do something ... //]]> </script>
6. 链接中多个参数的连接，你还在直接用&吗？
请使用&吧，如果要显示<,>等，请使用< >
7. 你注意到有id重复了吗？
同一id只能使用一次，id，顾名思义，身份的标识，不能重复利用。选择器可以通知class来实现
8. 你页面的头部是否标准？
标准的写法是这样的：
<head> <meta content="text/html; charset=gb2312" http-equiv="content-type"> <meta content="zh-cn" http-equiv="content-language"> <meta content="..." name="keywords"> <meta content="..." name="description"> <title>...</title> </head>
9. 别让你的标签“豪放”，它们必须”收敛“！
你是不是还在为了方便直接敲入了这样的换行：
<br>
No， 从今天开始，不要吝啬你的斜杠：<br />
因为所有的标签都必须是关闭的，如果不成对，请加上斜杠
10. 元素标识名：小写！
这样的代码就不要再出现了<HTML> <TITLE> <HEAD> <BODY>
正确的写法：<html> <title> <head> <body>
11. 属性值：请快快现身！
这样的代码写过没：
<option selected /> <!--also--> <input id="textfield" readonly="readonly" name="textfield" type="text">
这样是无法通过验证的，所有的属性必须要有值：
<option selected = "selected" /> <!--also--> <input id="textfield" readonly="readonly" name="textfield" type="text">
12. 不要在li之间加上其他标签
<ul> <li>1</li> <li>2</li> <br style="clear: both;"> <li>3</li> <li>4</li> </ul>
对不起，br，不允许你横插一刀！
13. absmiddle居中对齐？NO！
有时候喜欢给图片加上这样一个属性align=absmiddle，这样图片看起来和文字有一个水平线上，不过可惜，无法通过w3c验证。
替代方法有很多，像使用上层容器的vertical-align，图片的margin等，但没有这个直接，并且也不是所有的浏览器都会给你面子。
本来已经罗列完了，是值得注意的，但并不是w3c标准的全部，这些只是平时容易忽略的情况而已。
我想再顺便说一下的是 W3C!=DIV+CSS
我不想陷入这样的口水仗中去，这没有任何的意义。DIV+CSS是有它的优势，应该说有很大的优势，这种模式下，BS程序分工就很明确了，每一部分，甚至都能成为一个项目（HTML，CSS，JS）。但是它并不是万能的，目前这样的模式还并不成熟。
同样，W3C也不等于放弃TABLE，我甚至看到有人这样认为过，所谓的W3C就是不用TABLE。我不禁真的要为TABLE喊一下冤，TABLE怎么了，不就是衣服穿得厚一点么？
其实当我刚接触到DIV+CSS的时候，我发现这真是一个好东西，把HTML和CSS剥离得很干净。就像我当初不再在标签的属性中写
onclick="alert(1)"
一样，而是给这个标签一个id=’hello’，把这些事件都写到一个js文件里一样：
document.getElementById(‘hello’).onclick=function(){alert(1);};
我曾经对这样的事件是乐此不疲，对于DIV+CSS也是一样，我也一度想，表格这样的东西相对于DIV+CSS来说，真的是太丑了，我已经打算把它放在箱底。
然而，当我在使用DIV.DIV.DIV…….+CSS的时候，特别是在需要分列的时候，就感到有些繁琐了。利用float，display，width是可以实现功能的，抛开浏览器的兼容性问题不说，觉得还是没有表格来得直接。
当然，如果你的功底深厚，表格，自然能不用就不用。
RELATED POSTS:
我已经放弃用DW来编辑了，因为DW的模板没有一个是符合W3C标准的，我晕啊
@万戈:我用DW，也只用代码视图，极少用到设计视图。不知道DW能不能自定义模板，这个倒是没有研究过。
W3C这东西。我是一窍不通。
@小搓板:你可以去百度Google一下~
看到您的文章，受益匪浅，我就要准备去面试前端开发工程师了
@minipeach:目前为止，我只是一个业余爱好者。加油~
不是吧，业余爱好者都这么强啊，佩服哦
@minipeach:当某种东西沦为你吃饭的工具的时候，你的激情就会消失殆尽。
很有道理，那你是什么职业呢额
@minipeach:Technology中有一个分类就是我现在的专业