方法一： 有意义吗？
文章标题
虽然在某些情况下会是一个方便的标签，但它并不能表达出标题的完整含义。采用这个方法的一个好处是，我们可以对它附加一个CSS规则，分配其一个heading class，使其文字象标题一样显示。
.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}
ok，现在所有的标题都用heading class标记成了大号的粗体字体，并且为蓝色。太棒了！但是这样做对吗？如果有人用一个不支持CSS的浏览器来观看，会怎样呢？
举个例子，如果我们设置的这个外部样式表的规则不被老版本的浏览器支持，会怎样？又或者有视觉障碍的人用屏幕阅读器来阅读这个页面，又会怎样？一个访问者通过这些途径所看到（或听到）的应该和这个页面上正常的文本没有任何区别。
尽管class="heading"为这个标签增加了一点意义，但仍然只是一个普通的标签，可以被大多数浏览器的缺省样式所修改掉。
搜索引擎检索这个页面时会略过标签，就好象它不存在一样，不会对其可能包含的关键字给于一点额外的重视。在后面我们会更多的谈到搜索引擎和标题的关系。
最后，由于标签是一个内嵌元素，我们可能需要把它嵌套在一个额外的块级元素中，比如标签或
标签，为的是使它能够形成单独的行，这会进一步被非必要的代码弄乱你的标签。而这些额外增加的标签却是必须的，这样才能使不支持CSS的浏览器显示出没有差别的文本。
方法二:
和组合
文章标题
使用一个段落标签，将会给我们带来块级的显示，会把文本变成粗体。但是用这个方法标记一个重要的标题时，我们面对的是同样无意义的结果。
不象方法A，标签能在可视化的浏览器中把文字显示成粗体――甚至在不支持CSS的浏览器中。但是和标签一样，搜索引擎也不会因为有一些东西在段落中被加粗了而给予更高的优先。
难以设计样式
用普通的
和的组合，也带来了另一个缺憾――无法把这个标题设计成不同于其他段落的样式。我们可能想用一个特别的样式来突出标题，来使页面内容更清晰更具结构，但是用这个方法只能使其显示成粗体。
方法三:样式加实质
文章标题
恩，多么好的标题定义。大多数的网页设计者对它都很熟悉。其实适当的使用它们， 就能为页面内容提供灵活的、可索引的、以及可样式化的结构。
这也是聪明的定义方法，你会发现它很简单。不再需要额外的标签，你可以说，这仅仅比另外两个方法节省了一点点的字节，可以忽略不计，但节省一点是一点。
一直到，代表了标题的六个级别，从最重要的（）到最次要的（）。他们本身就是块级的，不需要增加其它元素来使其单独成行。简单，有效――就是好工具。
轻松定制样式
因为我们使用
标签是唯一的，而或
标签更适合使用在整个页面，所以我们可以用各种各样的CSS方法来样式化。
更重要的是，尽管完全不用样式，一个标题标签也能明显的表示出一个标题！可视化的浏览器把
显示成更大的粗体。一个非样式化的页面将以被期望的那样显示文档结构，用适当的标题标签来传达意思。
屏幕阅读器、PDA、手机、以及可视化的和非可视化的浏览器都会明白，碰到一个标题标签时该做的事情，正确的处理，比页面上的普通文本更重视的来对待。而使用标签，那些不支持CSS的浏览器就不会特别的对待它。
讨厌的默认样式
以往，由于浏览器默认的缺省值非常的丑陋，设计者们也许会避免完全的使用标题标签。或者，因为缺省值的巨大尺寸而避免使用
或，取而代之的是用更高数值的标题标签来实现更小的尺寸。
然而，需要重点强调的是，我们可以很简单的用CSS来改变这些标题标签――举个例子，一个< ;h1>并非一定是占满大半屏幕的巨大标版。在后面，我将证明用CSS来样式化标题标签是多么的简单，希望可以帮助你减轻巨大的恐惧。
对搜索引擎友好的
这是一个巨大的好处。搜索引擎喜欢标题标签。另一方面，一个标签或者普通的加粗的段落标签却在意味着次要一点。适当的用到标记你的标题，只需要你的一点点努力，然而却让搜索引擎更容易的检索到你的页面，让人们最终能找到它们。
搜索引擎机器人会给予标题标签特别的关注――这是你可能放置一些关键词的地方。就象检索到
和<meta>，它们会顺着标题标签往页面下面查找。如果你不使用这些标签，那么包含在里面的关键词将不会被认为是有价值的，从而被忽略掉。</p>
<p> 所以只要付出一点点的努力，你就能增加人们基于页面的内容找到你的站点的可能性。听上去不错，不是吗？</p>
<p> 关于标题的次序</p>
<p> 在范例中，这个特别的标题是页面中最重要的，因为它是文档的标题。因此，我们使用最重要的标题标签，<h1>。顺应W3C的规范，一些人认为跳过数个标题级是个不好的使用。举个例子，想象我们在下面的页面：</p>
<p> <h1>文章标题</h1> </p>
<p> 我们接下去的标题（如果不是用另一个<h1>重复的话）应该是<h2>，然后是<h3 >，等等。你也许不应该在<h1>后面跳过一级，直接跟上<h3>。我倾向于同意以上的观点，顺着行文保持级别的连续性，来构造一个排版结构。这样的话，给一个已经存在的页面添加标题和样式就更容易了，你会减少因使用超出的数字而导致的错误。</p>
<p> 前面提到的，设计者也许会用<h4>来标签一个页面上最重要的标题，仅仅是因为它的缺省的字体尺寸不象<h1>那样令人生厌的巨大。但是记住，先结构，后设计。我们总是能用CSS来把标题样式化成任何我们喜欢的文字尺寸。</p></div><div class="t_c"> </div>
</div>
<div id="gg468" class="t_c"></div>
<br/><br/>
<div class="t_r info">
<a href="/school/html/"><img src="/ui/2008/i_6.gif" width="15" height="10" alt=""/> 分类:HTML/XHTML</a>
<a href="javascript:window.scrollTo(0,0);"><img src="/ui/2008/i_13.gif" width="16" height="16" align="middle" alt=""/> 阅读:<span id="hits">92</span></a>
<a href="#comment"><img src="/ui/2008/i_4.gif" width="16" height="16" align="middle" alt="查看/发表评论"/> 评论:<span id="comments">0</span></a>
</div>
</div>
<div class="b_8"> </div>
<div class="mb" style="background:#FAFAFA;">
<div><iframe src=" /comment/index.php?keyid=2&itemid=5367&itemurl=http%3A%2F%2Fwww.master8.net%2Fschool%2Fhtml%2Fshow-5367.html&title=%B6%A8%D2%E5%B1%EA%CC%E2%B5%C4%D7%EE%BA%C3%B7%BD%B7%A8" name="comment" id="comment" style="width:654px;height:0px;" scrolling="no" frameborder="0"></iframe></div>
</div><a name="comment"></a>
<div class="b_8"> </div>
<div class="mb" style="background:#FAFAFA;">
<br/><br/><br/><br/>
<div class="c_b">
<center>
<input type="button" value="返回列表" class="btnd" onclick="window.location='/school/html/';"/>
<input type="button" value="发布主题" class="btnd" onclick="window.location='/school/myitem.php?action=add&catid=13';"/>
<input type="button" value="加入收藏" class="btnd" onclick="Fav();"/>
<input type="button" value="告诉好友" class="btnd" onclick="Tell();" />
<input type="button" value="关闭窗口" class="btnd" onclick="window.close();"/>
<input type="button" value="跳至顶部" class="btnd" onclick="window.scrollTo(0,0);"/>
</center>
</div>
<br/><br/><br/>
<div><center title="添加到文摘"><script type="text/javascript" src="/ui/2008/wz.js"></script></center>
</div>
<br/><br/><br/>
<div id="copyright" class="copyright"> </div>
<br/><br/><br/>
</div>
</div>
<div class="mn"> </div>
<div class="mr">
<div class="mb" style="width:298px;overflow:hidden;">
<!-- Search Google -->
<center>
<form method="get" action="http://www.google.cn/search" target="google_window">
<table bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left">
<table bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></img></a>
<label for="sbi" style="display: none">输入您的搜索字词</label>
<input type="text" name="q" size="18" maxlength="255" value="" id="sbi"></input>
<label for="sbb" style="display: none">提交搜索表单</label>
<input type="submit" name="sa" value="搜 索" id="sbb" class="btn"></input>
<input type="hidden" name="client" value="pub-4033383233178129"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="prog" value="aff"></input>
<input type="hidden" name="channel" value="0403244999"></input>
<input type="hidden" name="ie" value="GB2312"></input>
<input type="hidden" name="oe" value="GB2312"></input>
<input type="hidden" name="hl" value="zh-CN"></input>
</td></tr></table>
</td></tr><tr><td nowrap="nowrap" valign="top" align="left">
<script type="text/javascript"><!--
google_ad_client = "pub-4033383233178129";
google_ad_format = "350x30_sdo";
google_link_target = 2;
google_color_bg = "ffffff";
google_color_link = "000000";
google_encoding = "GB2312";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td></tr></table>
</form>
</center>
<!-- Search Google --></div>
<div class="b_8"></div>
<div class="mb">
<div class="mu">
<ul>
<!--20080811/20090311/309671654-->
<li><a href="http://www.cnkuai.cn/host.htm" target="_blank" title="虚拟主机,网站空间,ASP空间,空间"><font color="red"><b>虚拟主机</b></font></a>
<a href="http://www.cnkuai.cn/domain.htm" target="_blank" title="中文域名,中文域名注册,中文域名申请"><font color="red"><b>中文域名</b></font></a></li>
<li><span class="px10">AD:</span> <a href="/service/adv.html"><span class="f_red">全站广告位预定QQ4908220</span></a></li>
</ul>
</div>
</div>
<div class="b_8"></div>
<table width="100%" cellpadding="0" cellspacing="0">
<tr align="center">
<td height="22" width="70" class="tab_on" id="tab_1"><a href="http://bbs.master8.net/" target="_blank"><strong>论坛精华</strong></a></td>
<td class="tab_out"> </td>
</tr>
</table>
<div style="border:#CAD9EA 1px solid;border-top:none;">
<div id="cont_1" class="mu">
<ul>
<li><a href="http://bbs.master8.net/?show-8596.html" title="日期:2008-09-03 22:56
浏览:279" target="_blank">国外译文：域名停放全攻略</a></li>
<li><a href="http://bbs.master8.net/?show-8581.html" title="日期:2008-09-03 11:40
浏览:274" target="_blank">谷歌推出开源网络浏览器Chrome</a></li>
<li><a href="http://bbs.master8.net/?show-8566.html" title="日期:2008-09-02 21:57
浏览:264" target="_blank">网管员安全训练营--让FTP服务器更安全</a></li>
<li><a href="http://bbs.master8.net/?show-8440.html" title="日期:2008-08-28 23:08
浏览:387" target="_blank">我的网站用户，你在哪里？</a></li>
<li><a href="http://bbs.master8.net/?show-8407.html" title="日期:2008-08-28 11:49
浏览:500" target="_blank">【*经验之谈*】：服务器托管必用的10大工具</a></li>
</ul>
</div>
</div>
<div class="b_8"></div>
<div class="mb">
<div class="mt">
<span class="f_r"><script type="text/javascript">cMore(1);</script></span>
<a href="/manage/" target="_blank"><strong>网站运营</strong></a></div>
<div class="mu" id="c_1"><ul><li>[<a href="/manage/it/">IT看台</a>] <a href="/manage/it/show-10791.html" title="By:年华 At:2008-10-09" target="_blank">人民日报：领导如何面对网络时代</a></li>
<li>[<a href="/manage/webmaster/">HI! 站长</a>] <a href="/manage/webmaster/show-10790.html" title="By:小资 At:2008-10-08" target="_blank">中国广东核电集团 2009校园招聘启动仪式10月12日将隆重举行</a></li>
<li>[<a href="/manage/it/">IT看台</a>] <a href="/manage/it/show-10789.html" title="By:小资 At:2008-09-26" target="_blank">4200万中小企业 10%企业邮局使用率</a></li>
<li>[<a href="/manage/it/">IT看台</a>] <a href="/manage/it/show-10788.html" title="By:小资 At:2008-09-19" target="_blank">高端技术行业领跑 代理市场前景广阔</a></li>
<li>[<a href="/manage/it/">IT看台</a>] <a href="/manage/it/show-10787.html" title="By:年华 At:2008-09-18" target="_blank">BitTorrent第三轮融资获投1700万美元</a></li>
<li>[<a href="/manage/it/">IT看台</a>] <a href="/manage/it/show-10786.html" title="By:年华 At:2008-09-18" target="_blank">谷歌CEO：与雅虎合作无需征得政府额外同意</a></li>
</ul></div>
</div>
<div class="b_8"></div>
<div class="mb">
<div class="mt">
<span class="f_r"><script type="text/javascript">cMore(2);</script></span>
<a href="/school/" target="_blank"><strong>站长学院</strong></a></div>
<div class="mu" id="c_2"><ul><li>[<a href="/school/iis/">IIS</a>] <a href="/school/iis/show-10582.html" title="By:年华 At:2008-10-09" target="_blank">服务器轻松架 IIS7.0安装/调试全攻略</a></li>
<li>[<a href="/school/photoshop/">PhotoShop</a>] <a href="/school/photoshop/show-10581.html" title="By:年华 At:2008-10-09" target="_blank">Photoshop鲜为人知的75个技巧</a></li>
<li>[<a href="/school/software/">软件应用</a>] <a href="/school/software/show-10580.html" title="By:年华 At:2008-10-09" target="_blank">Windows2000/XP系统文件受损的修复方法</a></li>
<li>[<a href="/school/mssql/">MSSQL</a>] <a href="/school/mssql/show-10579.html" title="By:年华 At:2008-10-09" target="_blank">浅析SQL Server 2008企业级新特性</a></li>
<li>[<a href="/school/software/">软件应用</a>] <a href="/school/software/show-10578.html" title="By:年华 At:2008-10-09" target="_blank">GHOST使用详解</a></li>
<li>[<a href="/school/linux/">Linux/BSD</a>] <a href="/school/linux/show-10577.html" title="By:年华 At:2008-10-09" target="_blank">linux系统下设置IP地址并激活方法</a></li>
</ul></div>
</div>
<div class="b_8"></div>
<div class="mb">
<div class="mt1"><a href="/mail/" target="_blank"><strong>文章订阅</strong></a></div>
<div style="height:85px;">
<form action="/mail/index.php" method="post">
<ul style="margin:0 0 0 13px;">
<li class="li1">
<input type="checkbox" id="ck2" name="cktypeid[2]" checked="checked"/> <a href="/manage/" target="_blank">运营</a>
<input type="checkbox" id="ck3" name="cktypeid[3]" checked="checked"/> <a href="/school/" target="_blank">学院</a> [邮件订阅]
</li>
<li class="li1"><input name="email" type="text" size="25" value="请输入Email地址" onclick="if(this.value=='请输入Email地址') this.value='';" class="inp"/>
<input type="submit" name="dosubmit" value="订阅" class="btn" />
<input type="submit" name="dologout" value="退订" class="btn" />
</li>
<li class="li1">
<img src="/ui/2008/rss.gif" width="15" height="15" alt="模板RSS订阅"/> <a href="/manage/rss.xml">运营RSS订阅</a>
<img src="/ui/2008/rss.gif" width="15" height="15" alt="文摘RSS订阅"/> <a href="/school/rss.xml">学院RSS订阅</a>
</li>
</ul>
</form>
</div>
</div>
</div>
<div class="mn"> </div>
</div>
<div class="dsn" id="g300">
<script type="text/javascript"><!--
google_ad_client = "pub-4033383233178129";
/* 300x250, 创建于 08-3-28 */
google_ad_slot = "5872611396";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div class="dsn" id="g468">
<script type="text/javascript"><!--
google_ad_client = "pub-4033383233178129";
/* 468x60, 创建于 08-3-31 */
google_ad_slot = "5937090241";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<script type="text/javascript">
$('gg300').innerHTML = $('g300').innerHTML;
$('gg468').innerHTML = $('g468').innerHTML;
</script>
<script type="text/javascript" src="/ui/2008/content.js"></script>
<script type="text/javascript" src="/school/show_js.php?itemid=5367"></script>
<div style="display:none;">
<div id="member_js"><script type="text/javascript" src="http://bbs.master8.net/member.js.php"></script></div>
</div>
<div class="m">
<div class="b_8"> </div>
<div class="footer"><div class="f_r c_p"><img src="/ui/2008/spacer.gif" height="25" width="30" title="报告错误(本页最后更新时间:2008-10-09 11:45:48)" alt="" onclick="window.location='/about/contact.html';"/><img src="/ui/2008/spacer.gif" height="25" width="30" title="告诉好友" alt="" onclick="Tell();"/><img src="/ui/2008/spacer.gif" height="25" width="40" title="返回顶部" alt="" onclick="window.scrollTo(0,0);"/></div><a href="/" target="_blank">站长吧首页</a>
| <a href="/service/" target="_blank">建站服务</a>
| <a href="http://www.master8.net/service/adv.html" target="_blank">广告服务</a>
| <a href="http://www.master8.net/about/contact.html" target="_blank">联系方式</a>
| <a href="http://www.master8.net/about/agreement.html" target="_blank">使用协议</a>
| <a href="http://www.master8.net/about/copyright.html" target="_blank">版权和隐私</a>
| <a href="http://www.master8.net/sitemap/index.html" target="_blank">网站地图</a>
| <a href="/member/register.php" target="_blank">新会员注册</a>
</div>
<div class="c_b">
<div class="foot"><span class="f_r"><select onchange="if(this.value) window.location=this.value;">
<option>--快速通道--</option>
<option value="/">网站首页</option>
<option value="/member/">会员中心</option>
<option value="http://home.master8.net/">会员列表</option>
<option value="http://bbs.master8.net/">站长论坛</option>
<option value="/manage/">网站运营</option>
<option value="/school/">技术学院</option>
<option value="/tool/">站长工具</option>
<option value="/service/">建站服务</option>
</select> </span>
©2005-2008 站长吧 Master8.NET All Rights Reserved 陕ICP备05010609号</div>
<div class="foot c_b"><a href="http://www.hosting.czm.cn/" target="_blank" title="九州未来科技，专业的主机提供商">九州未来科技提供服务器支持</a> | <a href="http://www.hosting.czm.cn/" target="_blank" title="网站空间">网站空间</a> | <a href="http://www.hosting.czm.cn/" target="_blank" title="虚拟主机">虚拟主机</a></div>
</div>
<br/>
</div>
<script type="text/javascript" src="/ui/2008/foot.js"></script>
<script type="text/javascript" src="/task.js.php?channelid=2&catid=13&itemid=5367&page=0"></script>
</body>
</html>
来源: