WEB前端开发经验总结--WEB标准篇

FutureInHands

浏览: 427279 次
性别:
来自: 深圳

最近访客更多访客>>

u012363178

wangyy

rentuo52

mointor

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web技术

Web CSS 搜索引擎 XHTML Ajax

WEB标准是什么？

呵呵，说是WEB标准，不过我这里主要是对XHTML1.1 和 CSS2.1的一些经验总结。因为WEB含盖的内容实在是太多了，“WEB标准”是一系列标准的总称，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下，WEB标准不是我们所说的DIV+CSS。

刚刚上面提到了——DIV+CSS，呵呵，这里要说明下，这样说其实是不正确的。DIV+CSS准确的说法（个人的理解）应该是：采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0样式表制作页面的方法，DIV应该指的是XHTML标签，而CSS显示是指的CSS样式表了。

采用WEB标准开发的好处

那么W3C为什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用WEB标准开发（个人理解的）相对以前TABLE布局的优势有哪些？

1、节约运营成本，省钱啊！

呵呵，能帮你省钱的东西，你会不会有兴趣？当然是十分的有兴趣了。看看我们的WEB标准制作方法是如何做到的？

采用WEB标准制作，我们可以做到表现很形式的分离，我们用XHTML来表现（数据），用CSS来控制（页面元素呈现的）形式。写的好的页面，XHTML代码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我们的CSS来控制。这样一来我们的（XHTML）页面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下，YAHOO的首页小1K，100W个人一起访问，那么带宽节约了多少？而且可以更充分的利用带宽。

而我们的CSS控制了，所有的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个CSS文件，就可以轻松搞定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面的速度会快很多啊，一个让你等半分钟的页面，除非里面的信息对你很有用，不然我们大家基本都没有太多的时间去用来等待的。

2、对用户友好更友好，且有机会获得更多的用户

现在来说说用户友好。首先我想把我们的用户来分下类。

第一类：普通用户（每个访问我们网站的人）；
第二类：搜索引擎；

采用WEB标准开发的页面，结构清晰，页面体积小，浏览器兼容性好。普通用户访问的时候，页面打开速度快，而且不管用户使用那种浏览器，都能够正常访问（显示）页面，且页面的结构清晰，要找的数据可以很方便的浏览到。

而对搜索引擎来说，一个好的采用WEB标准开发的页面，都是做过SEO优化的，它访问起来很友好，很容易理解你的页面中哪里是标题（H1~H6标签），哪里是段落（p标签），哪里是段落里要强调的内容（strong标签）等，它可以很容易的分析出来。而一个SEO好的站点，大家都知道，被搜索引擎收录的机会更多，这个也意味着您的网站会被更多的普通用户访问到，给你的站点带来更多的用户。

一个能帮我们省下大笔费用，提高工作效率。同时又能够提高页面浏览速度，对用户友好，甚至能够不花钱宣传，就能给你带来更多用户的技术。你说你会不会去使用它？呵呵，这个也正式我们的W3C推荐使用WEB标准开放网站的原因啊。而这个技术也得到了我们广大用户的认可，所以您现在需要学习WEB标准啊。^-^!

呵呵，温习完了基础课程，现在正式开始讲XHTML和CSS的技巧了。

合理的布局

有朋友会开始问了，怎么一开始就开始讲合理的布局了呢?呵呵,前面我们提到了一些知识点——“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”。这些东西，都是我们做了合理布局的结果。而且我个人觉得，我们采用WEB标准制作的一切都是从这个知识点开始的，所以我这里就先来说这个话题。

那么大家又会开始问，怎样的一个页面，才算是合理的布局的呢？恩，这个问题问题问得好，也是我们大家刚开始学用WEB标准的问得最多的问题之一，我也曾经常被这个问题所困扰，这里就说说我对合理布局的一些理解。

在开始讲合理布局的页面要达到的要素前，我们还是用个实例来讲解会更直观些。先来看看这个图片：

http://www.yaohaixiao.com/samples/myblog/index.htm

不错，这个是一个文章详细页，没有左右两栏布局，不过这里我重点要讲的是合理的布局，在稍后的文章中我会详细的介绍浮动元素。好，回到刚才的话题，大家看到了这个页面了。

我这里先把代码写给大家看看（省略了部分代码）：

复制内容到剪贴板

代码:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Ajax标签导航实例详解</title>
<link href="css/article.css" rel="stylesheet" type="text/css" media="all" />
<script language="javascript" type="text/javascript" src="js/common.js"></script>
</head>
<body>
<div id="container">
<div id="topbar">
<h1><a href="http://www.yaohaixiao.com/" target="_blank" title="海啸的地盘--享受生活，享受每一天！">海啸的地盘--享受生活，享受每一天！</a></h1>
<div id="search-bar">
<form name="frmsearch" id="frmsearch"    action="" method="post">
<label for="keyword">站内搜索：</label>    
<select id="topics">
    <option value="0">全部主题</option>
    <option value="1">(X)HTML</option>
    <option value="2">CSS</option>
    <option value="3">Javascript</option>
    <option value="4">XML</option>
    <option value="5">ASP/ASP.NET</option>    
</select>
<input type="text" name="keyword" id="keyword" value="请输入搜索关键字" maxlength="60" />
<input type="reset" name="btnsearch" id="btnsearch" value="开始搜索" />
</form>        
</div>    
</div>
<ul id="nav">
    <li><a href="#2">ARTICLES</a></li>
    <li><a href="#2">TOPICS</a></li>
    <li><a href="#2">ABOUT</a></li>
    <li><a href="#2">CONTACT</a></li>
    <li><a href="#2">GESTBOOK</a></li>
    <li><a href="#2">FEED</a></li>    
</ul>    
<h2>Ajax标签导航实例详解</h2>
<div id="article-info">作者/程序设计：<a href="mailto:haixiao_yao@yahoo.com.cn">yaohaixiao</a>  来源：<a href="http://www.yaohaixiao.com" target="_blank">yaohaixiao.com</a>  发布时间：2008年4月28日</div>
<h3>代码篇</h3>
     <p>
     之前整理发表了<a href="http://www.yaohaixiao.com/article.asp?id=44" target="_blank">《XMLHTTPRequest的属性和方法简介》</a>,它Ajax要使用的核心的技术之一，现在就来实际运用它。这个Ajax标签导航，是我很久前就写的一个脚本，很实用的（还被很多网站收录了哦），现在拿它来做实例讲解吧！当然个人能力有限，有什么不对的地方还请多包含!
     </p>
     <p>
     演示地址：<a href="http://www.yaohaixiao.com/code/ajaxtab/index.htm" target="_blank">http://www.yaohaixiao.com/code/ajaxtab/index.htm</a>
     </p>
     <p>
     效果大家看到了，核心功能有：<br />
         1、将当前选中标签以特殊的样式显示<br />
         2、将异步加载的页面信息显示到指定的DOM节点中
     </p>
     <p>
     我们来看看处理脚本的代码吧：
     </p>
<div class="code-title">程序代码：ajaxtab.js</div>     
<div class="js code" name="code" id="js-code">
<!--<br />
// 判断是否支持ActiveX<br />
var useActiveX=(typeof ActiveXObject != "undefined"); <br />
// 判断是否支持DOM<br />
var useDom=document.implementation && document.implementation.createDocument;<br />
// 判断是否支持XMLHttpRequest对象<br />
var useXmlHttp=(typeof XMLHttpRequest != "undefined");<br />
// XMLHttpRequest对象版本<br />
var ARR_XMLHTTP_VERS = ["MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.3.0"];<br />
// DOM对象版本 <br />
var ARR_DOM_VERS = ["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.3.0"]; <br />
/* ===========================================================<br />
* 函数名称：$(i)<br />
* 参数说明：i - 目标节点名称<br />
* 函数功能：获取指定的目标DOM节点<br />
* 返 回 值：返回要搜索的目标DOM节点<br />
* 使用方法：$("frmSearch")<br />
============================================================ */<br />
function $(i){<br />
      if(!document.getElementById)return false;<br />
      if(typeof i==="string"){<br />
            if(document.getElementById && document.getElementById(i)) {<br />
               // W3C DOM<br />
              return document.getElementById(i);<br />
         }<br />
         else if (document.all && document.all(i)) {<br />
              // MSIE 4 DOM<br />
               return document.all(i);<br />
         }<br />
         else if (document.layers && document.layers[i]) {<br />
               // NN 4 DOM.. note: this won't find nested layers<br />
               return document.layers[i];<br />
         } <br />
         else {<br />
               return false;<br />
         }<br />
      }<br />
      else{return i;}<br />
}<br />
//-->
</div>
    <p>
id="news"      - news就是我们的导航标签的ID；<br />
id="newsCnt"   - newsCnt就是我们要写入信息的目标DOM节点；<br />
class="first"  - first当前(第一个)标签的样式；<br />
id="news-0"    - news-0 通过”-“分开，我们就分别可以得到news(导航标签ID)，0（标签[li]在导航标签中的索引值）<br />
<a href="news/news0.htm">网站重构</a> - 超链接<br />
<span></span>  - 标签间的分割线<br />
    </p>
    <p>
我罗列的这些东西，相信大家开始看出了些头绪了，呵呵，不过别急！在我们看处理的脚本之前，先让我们来看看导航标签的样式，主要是看看我们对分割线的处理(一点CSS处理的技巧)。   
    </p>
    <p>
本来想偷个懒，让大家看我上边说的那篇文章，想想也就是Ctrl+C&Ctrl+V,都贴出来吧！呵呵！！！
    </p>
    <p>
不过还没有完，最后要说的就是innerHTML这个特性，这里我们还要感谢微软啊，innerHTML就是它的专利，我们就是用它来改变指定DOM内的HTML字符串的，而不用刷新页面。详细的信息大家还是google一下吧，我也要休息下啊！！喝口茶先！！^-^！
    </p>
    <p>
以上讲了这么多，我们最后来看看，我们这个ajax标签导航都用到了那些技术吧：
    </p>
    <ol>
<li>XHTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>DOM</li>
<li>XMLHttpRequest对象</li>
<li>innerHTML</li>
    </ol>
    <p>
还有XML，我们这个例子没有涉及到。东西虽小，包含的（web前端开发）知识可是都用到了啊，我把我会的点东西都端出来了（要失业了），呵呵！
    </p>
    <p>
当然我很喜欢跟大家多交流，以后有时间，我们在来谈谈CSS的HACKS技巧，Javascript DOM编程等等的，今天就收工了，谢谢捧场先！！！ 
    </p> 
</div>
<p id="copyright">
      Copyright &copy; 2007-2008 <strong><a href="http://www.yaohaixiao.com">yaohaixiao.com</a></strong>, All rights reserved.    Powered By: <a href="mailto:haixiao_yao@yahoo.com.cn">Yaohaixiao</a>
</p>
</body>
</html>

看出来什么没有？（代码是很多，呵呵！）可能大家已经发现，整个页面里基本上都是用户要看的数据，其中只包含了很少（必要）的布局(XHTML)标签（请允许我这么说）。整个页面基本都是由最基础的h1~h6、p、ul、ol、li、form、div标签来实现的。

说到这里就要讲到我在前面提到的“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”，看看我的这个例子做到了没有？

结构清晰--也就是我们常说的，XHTML标签要结构化（语意化）。

什么叫结构化？

由于个人认为这个知识点是十分重要的，所以请允许我在这里多罗嗦几句，我们采用WEB标准的方法制作页面的优势就体现在页面结构清晰。我们以前用table布局的时候，我们的表现（数据）和形式（布局样式）是混在一起的，有很多冗余的数据混杂在一起，而大家再看看我上面给大家展示的代码，很明显，结构十分清晰。

呵呵，说了半天，还是没有说什么是结构化，什么才是结构清晰啊？不要急。还记得我刚才提到的那几个标签吗？

h1~h6--如果你要显示的数据是作为标题显示的时候，就用这些标签，因为这个标签的意思就是说，这个是一个标题，不仅我们的用户很容易理解h-head的英文字母缩写，我们的另外一个用户搜索引擎也可以很容易理解它。呵呵，看到了吧，一个充分结构化的页面，对用户是十分友好的。
p--Paragraph（段落）
ul--unorglized list(无序的列表)
ol--orglized list(有序的列表)
li--list item(列表项)
form--表单
div--division(区域)

我这么一写，大家估计开始明白了，原来XHTML标签是有着自己的意义的（至于其他的标签的语意义，大家可以自己到W3C看看它的解释，也可以查看语义化你的HTML标签和属性），所以我们讲要语意化的意思，就是用合理的标签来显示数据，比如前面提到的，是标题，就应该用h1~h6标签，如果是一个段落的介绍文字，那么就应该使用p标签，如果是显示的一个没有顺序的列表，就应该用ul标签，如此...

所以看这个例子里

复制内容到剪贴板

代码:

<h2>Ajax标签导航实例详解</h2>

这么写就是很合理的，h2标签就说明这里是个标题。而这么写：

复制内容到剪贴板

代码:

.title{
   font-size:18px;
   ...
}
<div class="title"><strong>Ajax标签导航实例详解</strong></div>

虽然你用了strong来强调说明这部分文字，但是还是没有h2标签来的直接明了。

还有这么写

复制内容到剪贴板

代码:

<div class="ariticle-title"><h2>Ajax标签导航实例详解</h2></div>

也不是我们推荐的，可以不用嵌套层的地方，我们尽量不要去过多的嵌套层，减少嵌套会让我们的浏览器解析起来会更容易，速度更快。

所我们使用WEB标准开发页面，绝对不是单纯的把以前的table换成DIV就OK了。而采用标准制作页面，也不意味着我们就不使用table。只要把握我刚才说的原则，使用合理的标签显示相应特征的数据。

其实我们的table标签是一个很好的用来显示二维数据的标签，而table标签也确实是设计出来用来显示数据的，而不是用来布局的，只是我们当时的设计师们都用table标签来布局了。关于table标签的使用，大家也可以去看看上面提供那篇参考文章《语义化你的HTML标签和属性》。

上面，我们讲到了要充分的语意化，其中我们提到了嵌套的问题，这个也是我们做到结构化的一个重要部分。个人认为一个最基本的原则就是尽量减少嵌套。至于为什么这么做，我刚才也给大家做了一个简单的介绍，结构清晰，浏览器解析快。其实结构清晰（够简单，嵌套少），对我们的搜索引擎同样是做起到了SEO的效果。怎么讲？大家想想，嵌套N多层，跟我们以前使用table设计时，table套table的区别就不大了，而那种含有大量冗余信息的页面，搜索引擎解析的时候也很费力啊。所以我们现在有了WEB标准，就不要再去犯以前的错误了。

说到SEO优化，让我们来看看我的例子中对LOGO的处理，XHTML代码如下：

复制内容到剪贴板

代码:

<div id="topbar">
<h1><a href="http://www.yaohaixiao.com/" target="_blank" title="海啸的地盘--享受生活，享受每一天！">海啸的地盘--享受生活，享受每一天！</a></h1>
<div id="search-bar">
<form name="frmsearch" id="frmsearch"    action="" method="post">
<label for="keyword">站内搜索：</label>    
<select id="topics">
    <option value="0">全部主题</option>
    <option value="1">(X)HTML</option>
    <option value="2">CSS</option>
    <option value="3">Javascript</option>
    <option value="4">XML</option>
    <option value="5">ASP/ASP.NET</option>    
</select>
<input type="text" name="keyword" id="keyword" value="请输入搜索关键字" maxlength="60" />
<input type="reset" name="btnsearch" id="btnsearch" value="开始搜索" />
</form>        
</div>

呵呵，当大家用浏览器浏览时，可能会以为这里是一个<img />标签吧？其实我这里做了一个简单的SEO优化（当然只是我个人比较喜欢这个方法，可能有朋友跟我有不同观点。），做了关键字的优化。

对SEO有些了解的朋友都知道，搜索引擎搜索关键字的时候，是先对XHTML标签里的<meta>标签的keyword部分的文字，然后就是标题里的文字，接着就是正文中的h1~h6标签，然后是strong标签中的文字。而我们网站的名称，毫无疑问的会作为关键字的。

所以我这里用h1标签模拟了<img />标签的效果，将网站名称这个关键字在页面里出现了一次，而且是以正文中搜索引擎分析的优先级最好的h1标签，以说明该内容在页面中的关键性。具体的实现代码这里就直接写出来：

复制内容到剪贴板

代码:

#topbar h1{
  float:left;
  width:220px;
  height:58px;
  line-height:58px;
  overflow:hidden;
  font-size:18px;
  color:#060;
  text-indent:-999px;
  background-image:url(../img/logo.png);
}
#topbar h1 a:link,
#topbar h1 a:visited,
#topbar h1 a:hover{
    display:block;
    width:220px;
    height:58px;
    line-height:58px;
    overflow:hidden;
    background-color:transparent;
}
<h1><a href="http://www.yaohaixiao.com/" target="_blank" title="海啸的地盘--享受生活，享受每一天！">海啸的地盘--享受生活，享受每一天！</a></h1>

看了代码，我想大家也很明白了，我们这里利用了text-indent、overflow:hidden;属性以及display:block。我们把LOGO图片作为h1标签的背景，然后用text-indent设置一个超大的负值，然后结合overflow:hidden;属性，让h1标签里面的字都超出到它的布局范围内，overflow:hidden后就在h1标签里看不到文字了，而LOGO图片背景显示出来了。

接着一个关键就是将a标签模拟成图片链接的效果。我们首先将a标签display属性设置为block,强制将a标签显示成块级元素（块级元素和行内元素的知识我们下面马上给大家介绍），给它设置布局大小，这样我们a标签里就是一个块了，而这个块刚好是我们背景logo图片的大小，让你点击的时候感觉是点的一个图片链接，而我们的a标签是嵌套在h1标签里的，继承了H1的text-indent属性，里面的文字超出了a标签的布局范围，没有显示出来，而显示了图片（其实是背景图）。呵呵，图片链接就这样被我们模拟出来了，不过为了更像图片链接，我们又给a标签添加了title属性，来模仿img标签的alt属性，呵呵，模拟得够像吧。

上面介绍了，一个技巧，其实主要是利用我们的CSS控制来实现的，不过我这里还不打算介绍CSS的技巧，接着我们的结构化的话题说下去。看看，其实在制作一个结构化充分的页面的时候，我们同时也在做SEO的优化。

结构，结构，刚才我提到了标签有块级元素和行内元素之分的，要是不理解好这两个概念，我们也不会很好的了解怎么合理的结构化页面，现在就来介绍它们：

块级元素

块级元素生成一个元素框，（默认地）它会填充其父级元素的内容，旁边不能有其他元素。换句话说，他在元素框之前和之后生成了“分隔”符。我们最熟悉的HTML元素是p和div.

行内元素

行内元素在一个文本行内生成元素框，而不会打断这行文本。行内元素最好的例子就是XHTML中的a元素。strong和em也属于行内元素。这些元素不会在它本身之前或之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不会破坏其显示。

注意，尽管“块”和“行内”这两个词与HTML和XHTML中的块级和行内元素有很多共同点，但也存在一个重要的差别。在HTML和XHTML中，块级元素不能继承自行内元素（即不能嵌套在行内元素中）。但是CSS中，对于显示角色如何嵌套不存在任何限制。

恩，还是不能把CSS跟XHTML完全的分开谈，没办法。现在大家了解了什么是块级元素和什么是行内元素了吧。还是回过头来接着说我们的结构化吧，以上讲了这么多，我都是在讲XHTML标签要结构化，所以基本跟CSS关系不大，那么我们下面看看我写的这个页面的代码在没有CSS的情况想，是否结构清晰吧：

看看，页面是不是依旧很清晰，很容易看出，哪里是标题，哪里是导航，哪里是搜索表单？呵呵，其实我这么给大家看的页面，跟我们的搜索引擎查看页面的结构很接近了，到这里大家可能体会到一些搜索引擎友好的意思了吧？

其实让我们看看这个页面的DOM数状图，可能我们对一个简洁合理的结构化布局的页面有更直观的了解。

看看，是不是做到了我说的：XHTML标签充分的语意化、尽量少的嵌套、页面里基本只显示用户需要看的数据、对搜索引擎友好（没有CSS支持时，浏览页面时同样清晰，层次分明，十分容易查看的数据。），已做了基本的SEO优化

呵呵，说到这里我才回答了“怎样的一个页面才算是合理的布局的呢？”，做到上面4点，我个人觉得这个页面就已经做到了合理布局。而至于说要通过W3C的XHTML语法验证，只是很基础的开始。一个通过验证的页面和一个合理布局的页面是两码事的。

这里我再罗嗦一下，我一直都在说的是个人认为如何才算是一个合理布局的页面？要达到什么要求才能算合理布局？因为只有理解了这个，之后的CSS的技巧（浏览器的兼容处理等）都是围绕着让XHTML页面布局更合理来进行的。而不是单纯做到各个浏览器下都显示正常（一致）。所以请记住在开发时做到：

1、XHTML标签充分的语意化
2、尽量少的嵌套
3、页面里基本只显示用户需要看的数据（我们用CSS直接控制用户需要看的数据的显示的样式）
4、页面对搜索引擎友好（没有CSS支持时，浏览页面时同样清晰，层次分明，十分容易查看数据。），已做了基本的SEO优化

分享到：

WEB前端开发经验总结--实战篇 | JAVA String.format 方法使用介绍

2008-07-15 17:20
浏览 1432
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论