YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » HTML » WEB前端开发经验总结–XHTML语义化

WEB前端开发经验总结–XHTML语义化

做前端开发有几年时间,今天跟大家谈谈个人对WEB前端开发的一些经验:对于XHTML语义化的理解。当然都是个人的一些理解,有什么地方说的欠妥或不对的地方还请包含和指正。我们就先从WEB标准开始吧。

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。YAHOO的首页小1K,100W个人一起访问,那么带宽节约了多少?而且可以更充分的利用带宽。这么一算,节约的钱也等于是在赚钱啊。

而我们使用CSS来控制所有的页面元素的样式,现在想改网站的整体风格,你只需要花几分钟修改一下一个CSS文件,就可以轻松搞定了。维护的成本也下来了,省了不少钱了吧?还有就是你的用户打开个页面的速度会快很多啊(因为页面的体积小了),这个对用户来说,也节约了他的时间(时间=金钱)和流量费用。

最后,你可以想象一个让你等半分钟的才能打开的页面,除非里面的信息对你很有用,不然我们大家基本都没有太多的时间去用来等待的。页面请求等待的时间的减少,也会为你留住许多没有耐性的用户。

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

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

第一类:普通用户(每个访问我们网站的人);
第二类:搜索引擎;

采用WEB标准开发的页面,结构清晰,页面体积小,浏览器兼容性好。普通用户访问的时候,页面打开速度快,而且不管用户使用那种浏览器,都能够正常访问(显示)页面,且页面的结构清晰,要找的

数据可以很方便的浏览到。

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

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

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

合理的布局,充分的语义化

有朋友会开始问了,怎么不一开始就讲合理的布局了呢?呵呵,前面我们提到了一些知识点——“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”。这些东西,都是我们做了合理布局的结果。而且我个人觉得,我们采用WEB标准制作页面,一切的基础都是从这个知识点开始的。我认为一个前端工程师应该了解自身工作的意义和价值,能节约成本不是前端工程师唯一的价值,但是一个前端工程师连为什么使用WEB标准开发都不清楚,基本上我认为他就不是一个前端工程师,因为他都不清楚自己在做什么。

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

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

(图1)

不错,这是一个文章详细页,没有左右两栏布局,不过这里我要讲的重点是合理的布局,充分的语义化,这样一个页面就足够了。我这里先把代码写给大家看看(省略了部分代码):

<"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="yaohaixiaomailto: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 <h2><a href="yaohaixiao.comhttp://www.yaohaixiao.com">yaohaixiao.com</a></h2>, All rights reserved. Powered By: <a

href="Yaohaixiaomailto: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的英文字母缩写,我们的另外一个用户搜索引擎也可以很容易理解它。通过h1~h6,分析出你文章的层次结构,也可以了解到你网站的层次结构。看到了吧,一个充分结构化的页面,对用户是十分友好的。

p — Paragraph(段落)
ul — unorglized list (无序的列表)
ol — orglized list (有序的列表)
li — list item (列表项)
form — 表单
div — division (区域)

我这么一写,大家估计开始明白了,原来XHTML标签是有着自己的意义的(至于其他的标签的语意义,大家可以自己到W3C看看它的解释)。所以我们讲要语义化的意思,简单点说就是用合理的标签来显示相应结构的数据。比如前面提到的,如果是标题,就应该用h1~h6标签,如果是一个段落的介绍文字,那么就应该使用p标签,如果是显示的一个没有顺序的列表,就应该用ul标签,如此…

所以看下面这个两个例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <h2>Ajax标签导航实例详解</h2>
.title{
    font-size:18px;
    ...
}
<div class="title"><h2>Ajax标签导航实例详解</h2></div>

用h2标签显示标题就是很合理的,而这么写使用<div> + <h2>标签显示标题,就不好了,而且代码两也更多,虽然用了h2来强调说明这部分文字,但是还是没有h2标签来的直接明了。还有这么写:

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

也不是我们推荐的,可以不用嵌套层的地方,我们尽量不要去过多的嵌套层,减少嵌套会让我们的浏览器解析起来会更容易,速度更快。当然,有些地方是一个标题区域,那么上面这么写又是合理的了。在了解基本的语义化之后,我们可以很明确的知道,使用WEB标准开发页面,绝对不是单纯的把以前的table换成DIV就OK了。而采用标准制作页面,也不意味着我们就不使用table。只要把握我刚才说的原则,使用合理的标签显示相应特征的数据。其实,我们的table标签是一个很好的用来显示二维数据的标签,而table标签也确实是设计出来用来显示数据的,而不是用来布局的,只是我们当时的设计师们都用table标签来布局了。

上面我们讲到了要充分的语义化,其中我们提到了嵌套的问题,这个也是我们做到充分结构化的一个重要部分。个人认为一个最基本的原则就是尽量减少嵌套。至于为什么这么做,我刚才也给大家做了一个简单的介绍,结构清晰,浏览器解析快。其实结构清晰(够简单,嵌套少),对我们的搜索引擎同样是做起到了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"><span class="bm_keywordlink"><a href="http://www.yaohaixiao.com/?cat=4" target="_blank">CSS</a></span></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>

当大家用浏览器浏览时,可能会以为这里是一个<img alt=”” />标签吧?其实我这里做了一个简单的SEO优化(当然只是我个人比较喜欢这个方法,可能有朋友跟我有不同观点。),做了关键字的优化。 对SEO有些了解的朋友都知道,搜索引擎搜索关键字的时候,大致是先对XHTML标签里的标签的keyword部分的文字,然后就是标题里的文字,接着就是正文中的h1~h6标签,然后是h2标签中的文字。而我们网站的名称,毫无疑问的会作为关键字的。

所以我这里用h1标签模拟了<img alt=”” />标签的效果,将网站名称这个关键字在页面里出现了一次,而且是以正文中搜索引擎分析的优先级最好的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的优化。

上文提到了标签有块级元素和行内元素之分的,要是不理解好这两个概念,我们也不会很好的了解怎么合理的结构化页面,现在就来介绍它们(注释:定义摘录自《CSS权威指南》):

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

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

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

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

(图2)

看看,页面是不是依旧很清晰,很容易看出,哪里是标题,哪里是导航,哪里是搜索表单?其实我给大家看的页面,跟我们的搜索引擎查看页面的结构很接近了,到这里大家可能体会到一些搜索引擎友好的意思了吧?让我们看看这个页面的DOM数状图,可能我们对一个简洁合理的结构化布局的页面有更直观的了解。

(图3)

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

说到这里我才回答了“怎样的一个页面才算是合理的布局的呢?”,做到上面4点,我个人觉得这个页面就已经做到了合理布局。而至于说要通过W3C的XHTML语法验证,只是很基础的开始。一个通过验证的页面和一个合理布局的页面是两码事的。这里我再罗嗦一下,我一直都在说的是如何才算是一个合理布局的页面?要达到什么要求才能算合理布局?因为只有理解了这个,之后的CSS的技巧(浏览器的兼容处理等)都是围绕着让XHTML页面布局合理的基础之上来进行的。而不是单纯用CSS做到各个浏览器下都显示正常(一致)。所以请记住在在开发页面时请做到:

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

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:WEB前端开发经验总结–XHTML语义化

« »

1 条评论

  • 前端开发的基础就从拥有良好结构的 XHTML 代码开始。XHTML 结构优化好了,页面必然体积小,嵌套少,CSS 写起来也更容易,JavaScript 编程也更容易,页面也做了简单的 SEO,对搜索引擎友好,可以更好的体现你网站的目录结构,页面加载速度更快。

    所以,打好坚实的基础十分重要。XHTML 语义化非常重要,一定要真正理解透彻。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)