WEB前端开发经验总结（2）

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

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。只要把握我刚才说的原则，[b]使用合理的标签显示相应特征的数据。[/b]

其实我们的table标签是一个很好的用来显示二维数据的标签，而table标签也确实是设计出来用来显示数据的，而不是用来布局的，只是我们当时的设计师们都用table标签来布局了。

上面，我们讲到了要充分的语意化，其中我们提到了嵌套的问题，这个也是我们做到结构化的一个重要部分。个人认为一个最基本的原则就是[b]尽量减少嵌套[/b]。至于为什么这么做，我刚才也给大家做了一个简单的介绍，结构清晰，浏览器解析快。其实结构清晰（够简单，嵌套少），对我们的搜索引擎同样是做起到了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优化（当然只是我个人比较喜欢这个方法，可能有朋友跟我有不同观点。），做了关键字的优化。