规范化你的网页

netscope · 发表于 2006-6-22 20:01:25

随着W3C标准的强势，不仅仅FIREFOX和OPERA采用，下个版本的IE7也将采用，这必然要求网站建设要考虑标准化，具体

地说也就是要求你的网页符合HTML代码规范。

1，什么是HTML规范

1.1拿DZ说，模板里打头就是版本类型声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

复制代码

这是传统的HTML 4.0标准，其实这个标准里也要求了很多方面，具体后面谈。

如果你使用DREAMWEAVER 8或者 GOLIVE CS2创建网页，软件为让你选择HTML版本然后自动加上声明。

1.2

<!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">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

两者均为现在流行的XHTML 1.0标准，前者为宽松型，后者为严格性，后者对代码的规范要求更严。

1.3

<link rel="alternate" type="application/rss+xml" title="RSS - Google 资讯中国版"
href="http://news.google.com/nwshp?hl=zh-CN&gl=us&output=rss">

复制代码

这是基于XML的RSS内容聚合的应用。

所以如果你的网站要避免以后一大串的代码替换问题，从现在起就有必要注意代码规范。

HTML （4.X）：超文本标记语言
XHTML （1.X）：可扩展超文本标记语言，目前的趋势
XML：可扩展标记语言

这是递进的关系，最终的目的是要XML化。当然这些标准的制定者都是W3C。

CSS：层叠样式表，用来定义可视化属性，达到结构和表现分离的高效率管理

具体概念：

结构标准语言

1、XML

　　XML是The Extensible Markup Language（可扩展标识语言）的简写。目前推荐遵循的是W3C于2000年10月 6日发布的XML1.0，参考W3C-XML。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语言。 XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。

2、XHTML

　　XHTML是The Extensible HyperText Markup Language（可扩展标识语言）的缩写。目前推荐遵循的是 W3C推荐XML1.0（参考http://www.w3.org/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。

表现标准语言

3、CSS是Cascading Style Sheets（层叠样式表）的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2 （参考

http://www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS

布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

W3C，万维网联盟，一个负责制订并维护着我们所熟悉的万维网的诸多标准和协议的组织（你可以通过
http://www.w3c.org 或者 http://www.w3.org 来访问它）在1999年12月24日在先前发布的HTML4.0版本的基础上修正发布了HTML4.01并将之作为建议标准。2000年1月26日在 HTML4.01的基础上发布了其XML版本XHTML1.0，并将之作为建议标准（之后发布的XHTML1.1作为候选建议标准）。

复制代码

2，XHTML1.x具体怎么规范？

2.1基本书写规范

1、确保所有的标签都使用小写字母

      <TABLE width="10">是不规范的，应当<table width="10">

2、确保所有的属性值都放在引号里

      <table width=10>是不规范的，应当<table width="10">

以上针对HTML4.X；

以下内容针对XHTML1.X，当然XHTML和XML也要遵守上面2条：

3、确保所有成对标签出现的顺序、不成对的标签都用/>结束, ”/”和”>”之间不要有空格

      <img src="images/fav.gif" border="0" alt="加入IE收藏">是不规范的，应当

      <img src="images/fav.gif" border="0" alt="加入IE收藏" />

4、粗体用<strong>粗体</strong>，不要用<b>粗体</b>

5、 script用<script type="text/javascript">代替<script language="JavaScript">

6、必须给img加上alt="图片注释"，哪怕为空

      <img src="images/fav.gif" border="0" />是不规范的，应当

      <img src="images/fav.gif" border="0" alt="" />

7、  align="absmiddle" 中的absmiddle属性在XHTML是不存在的，建议略去align=""属性，要么只能定义为

      baseline |sub | super |top |text-top |middle |bottom |text-bottom |length 中的一种

8、表单中的select和checked属性不能这样书写：

      <input name="s" type="radio" checked />
      应当
      <input name="s" type="radio" checked="checked" />

8、用<li></li>来罗列并列内容

9、用<p></p>来控制段落

  10、用背景来替代图片插入

  11、用id="XXX"、和class="XXX"来套用CSS属性

  12、用<span></span>来控制文字或者其他元素表达特殊属性，比如隐藏。

就想到这么多。

2.2采用DIV+CSS结构化网站来配合XHTML

目前广泛应用并被支持的是CSS2.0，你可以下载CSS2.0 中文手册和相关教程来学习。

下载： http://www.baidu.com/s?th=baidu&cl=3&word=CSS2.0+

具体怎么做你打开CSS2.0 手册和教程看一段时间就很容易明白，如果把它当作是学习一部分并且好好学的话，应当和

你在学校学习知识点的收获是一样的。

链接：HTML和XHTML常见问答http://www.transwiki.org/cn/xhtmlfaq.htm

说了这么多，比较乱，希望对你有所帮忙。

举例：

<div id="annouce">
<ul>
<li><a href="announcement.php?id=1#1">社区重要消息和公告第二部分1</a></li>
<li><a href="announcement.php?id=2#2">社区重要消息和公告第二部分2</a></li>
<li><a href="announcement.php?id=3#3">社区重要消息和公告第三部分3</a></li>
<li><a href="announcement.php?id=4#4">社区重要消息和公告第三部分4</a></li>
</ul>
</div>

复制代码

或者

<div id="annouce">
<ol>
<li><a href="announcement.php?id=1#1">社区重要消息和公告第二部分1</a></li>
<li><a href="announcement.php?id=2#2">社区重要消息和公告第二部分2</a></li>
<li><a href="announcement.php?id=3#3">社区重要消息和公告第三部分3</a></li>
<li><a href="announcement.php?id=4#4">社区重要消息和公告第三部分4</a></li>
</ol>
</div>

复制代码

<ul>是不标明数字顺序，<ol>表明数字顺序比如1,2,3...

这段代码肯定比你用table画4行一列简明扼要~

你要做的是在css里定义好#annouce { /* */}

[ 本帖最后由 netscope 于 2006-6-22 20:23 编辑 ]

netscope · 发表于 2006-6-22 20:03:27

uupp

PerfectWorks · 发表于 2006-6-22 20:05:36

谢谢，很有帮助

easonlee · 发表于 2006-6-22 21:05:08

		自动登录	找回密码
密码			立即注册

[展示] 规范化你的网页

good good