WEB前端开发经验总结 Ⅰ（4）

上面，我们讲到了要充分的语意化，其中我们提到了嵌套的问题，这个也是我们做到结构化的一个重要部分。个人认为一个最基本的原则就是尽量减少嵌套。至于为什么这么做，我刚才也给大家做了一个简单的介绍，结构清晰，浏览器解析快。其实结构清晰（够简单，嵌套少），对我们的搜索引擎同样是做起到了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属性，呵呵，模拟得够像吧。