WEB前端涉及的布局、结构化和标准化

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

最新评论