方法一： 有意义吗？
文章标题
虽然在某些情况下会是一个方便的标签，但它并不能表达出标题的完整含义。采用这个方法的一个好处是，我们可以对它附加一个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="news-detail-ft">
<p>
<span>上一篇：</span>
<a href="/wz/938.html" target="_blank">_blank开新窗口不符合标准?</a>
</p>
<p>
<span>下一篇：</span>
<a href="/wz/940.html" target="_blank">CSS中的滑动门技术</a>
</p>
</div>
</div>
<div class="conbox switch_template">
<div class="block-title3">
<h3 class="title active"><b>相关阅读</b></h3>
</div>
<div class="news-list3">
<ul class="active">
<li>
<a class="tit" href="/wz/1407.html" target="_blank">Title标题的描写没有最好 只有更好</a>
<span class="time">2009-06-01</span>
</li>
<li>
<a class="tit" href="/wz/4046.html" target="_blank">标题栏里多段标题文字的替换显现</a>
<span class="time">2009-06-18</span>
</li>
<li>
<a class="tit" href="/wz/18205.html" target="_blank">php定义常量方法的区别</a>
<span class="time">2022-06-08</span>
</li>
<li>
<a class="tit" href="/wz/2478.html" target="_blank">关于百度标题的小测验 SEO标题的注意事项</a>
<span class="time">2009-06-06</span>
</li>
<li>
<a class="tit" href="/wz/3998.html" target="_blank">让你的标题栏文字动起来，标题也动了</a>
<span class="time">2009-06-17</span>
</li>
<li>
<a class="tit" href="/wz/18278.html" target="_blank">PHP中define定义常量的方法</a>
<span class="time">2022-05-10</span>
</li>
</ul>
</div>
</div>
<!-- 人气下载推荐 -->
<div class="conbox">
<div class="block-title3">
<h3 class="title"><b>人气下载推荐</b></h3>
</div>
<div class="soft-list hot">
<ul>
<li>
<a href="/app/182033.html" title="捕食日中文版">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebddd7450ce1.png" alt="捕食日中文版">
<div class="tit">捕食日中文版</div>
<div class="btn">查 看</div>
</a>
</li>
<li>
<a href="/app/182034.html" title="捕食日最新版本">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdde14380b1.png" alt="捕食日最新版本">
<div class="tit">捕食日最新版本</div>
<div class="btn">查 看</div>
</a>
</li>
<li>
<a href="/app/182035.html" title="我要上厕所最新版">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebddec731941.png" alt="我要上厕所最新版">
<div class="tit">我要上厕所最新版</div>
<div class="btn">查 看</div>
</a>
</li>
<li>
<a href="/app/182036.html" title="隐秘的原罪1最新版">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebddf8051d41.png" alt="隐秘的原罪1最新版">
<div class="tit">隐秘的原罪1最新版</div>
<div class="btn">查 看</div>
</a>
</li>
<li>
<a href="/app/182037.html" title="和平精英体验服安装">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebde031a6c01.png" alt="和平精英体验服安装">
<div class="tit">和平精英体验服安装</div>
<div class="btn">查 看</div>
</a>
</li>
<li>
<a href="/app/182038.html" title="黑子的篮球街球对决">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebde0eaf1ce1.png" alt="黑子的篮球街球对决">
<div class="tit">黑子的篮球街球对决</div>
<div class="btn">查 看</div>
</a>
</li>
<li>
<a href="/app/182039.html" title="战地玩具兵吃鸡手机版">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebde194c14e1.jpg" alt="战地玩具兵吃鸡手机版">
<div class="tit">战地玩具兵吃鸡手机版</div>
<div class="btn">查 看</div>
</a>
</li>
<li>
<a href="/app/182040.html" title="死亡城市僵尸入侵">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebde2440c711.jpg" alt="死亡城市僵尸入侵">
<div class="tit">死亡城市僵尸入侵</div>
<div class="btn">查 看</div>
</a>
</li>
<li>
<a href="/app/182042.html" title="苏打地牢2">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebde3adbfe61.png" alt="苏打地牢2">
<div class="tit">苏打地牢2</div>
<div class="btn">查 看</div>
</a>
</li>
<li>
<a href="/app/182043.html" title="纳西妲掘地求升">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebde45647e21.png" alt="纳西妲掘地求升">
<div class="tit">纳西妲掘地求升</div>
<div class="btn">查 看</div>
</a>
</li>
<li>
<a href="/app/182044.html" title="酿造物语安卓">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebde50283fd1.jpg" alt="酿造物语安卓">
<div class="tit">酿造物语安卓</div>
<div class="btn">查 看</div>
</a>
</li>
<li>
<a href="/app/182045.html" title="樱花校园3最新版">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebde5b0e6a21.png" alt="樱花校园3最新版">
<div class="tit">樱花校园3最新版</div>
<div class="btn">查 看</div>
</a>
</li>
<li>
<a href="/app/182046.html" title="银河袭击独立行动">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebde71427de1.jpg" alt="银河袭击独立行动">
<div class="tit">银河袭击独立行动</div>
<div class="btn">查 看</div>
</a>
</li>
<li>
<a href="/app/182047.html" title="嗷呜谷子app">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebde7ab97eb1.png" alt="嗷呜谷子app">
<div class="tit">嗷呜谷子app</div>
<div class="btn">查 看</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content-r fr">
<!-- 相关应用 -->
<div class="conbox">
<div class="block-title3">
<h3 class="title red">相关应用</h3>
</div>
<div class="soft-list2">
<a class="item" href="/download/5530.html">
<img class="pic" lazy-src="/index/images/80_80.png" alt="自定义输入框">
<div class="tit">自定义输入框</div>
<div class="txt">C++Builder(BCB)</div>
<div class="txt">2023-04-18</div>
<div class="btn">查看</div>
</a>
<a class="item" href="/app/109994.html">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20230629/logo_649d470413a551.gif" alt="自定义世界">
<div class="tit">自定义世界</div>
<div class="txt">休闲益智</div>
<div class="txt">2023-06-30</div>
<div class="btn">查看</div>
</a>
</div>
</div>
<!-- 热门文章 -->
<div class="conbox">
<div class="block-title3">
<h3 class="title red">热门文章</h3>
</div>
<div class="news-list2">
<ul>
<li>
<a class="tit" href="/wz/945.html" target="_blank">w3c技术架构介绍</a>
</li>
<li>
<a class="tit" href="/wz/944.html" target="_blank">CSS hack浏览器兼容一览表</a>
</li>
<li>
<a class="tit" href="/wz/943.html" target="_blank">如何以及何时使用sIFR</a>
</li>
<li>
<a class="tit" href="/wz/942.html" target="_blank">在IE中为abbr标签加样式</a>
</li>
<li>
<a class="tit" href="/wz/941.html" target="_blank">alt属性和title属性</a>
</li>
<li>
<a class="tit" href="/wz/937.html" target="_blank">CSS的十八般技巧</a>
</li>
<li>
<a class="tit" href="/wz/936.html" target="_blank">常用CSS缩写语法总结</a>
</li>
<li>
<a class="tit" href="/wz/935.html" target="_blank">同一个页面用多个id有什么影响</a>
</li>
<li>
<a class="tit" href="/wz/934.html" target="_blank">使用DIV之后,什么时候使用TABLE</a>
</li>
<li>
<a class="tit" href="/wz/933.html" target="_blank">经典样式表大赛中web标准应用存在的问题</a>
</li>
</ul>
</div>
</div>
<!-- 推荐游戏 -->
<div class="conbox posbox js-change">
<div class="block-title3">
<h3 class="title red">推荐游戏</h3>
<span class="btn btn-change">换一换</span>
</div>
<div class="soft-list like js-tab-cont on">
<ul>
<li>
<a class="item" href="/app/181997.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdc1f3fd501.png" alt="奇妙美食总动员">
</div>
<div class="tit">奇妙美食总动员</div>
</a>
</li>
<li>
<a class="item" href="/app/181998.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdc29cbf531.png" alt="奇妙农场宝宝巴士">
</div>
<div class="tit">奇妙农场宝宝巴士</div>
</a>
</li>
<li>
<a class="item" href="/app/181999.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdc40856351.png" alt="飞镖大作战正版">
</div>
<div class="tit">飞镖大作战正版</div>
</a>
</li>
<li>
<a class="item" href="/app/182000.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdc4b628f11.jpg" alt="Elroi">
</div>
<div class="tit">Elroi</div>
</a>
</li>
<li>
<a class="item" href="/app/182001.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdc566cf081.jpg" alt="艾洛伊防卫战争最新版">
</div>
<div class="tit">艾洛伊防卫战争最新版</div>
</a>
</li>
<li>
<a class="item" href="/app/182002.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdc704259f1.png" alt="梦幻家居设计">
</div>
<div class="tit">梦幻家居设计</div>
</a>
</li>
<li>
<a class="item" href="/app/182003.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdc7ac56dd1.png" alt="梦幻家居设计手机版">
</div>
<div class="tit">梦幻家居设计手机版</div>
</a>
</li>
<li>
<a class="item" href="/app/182004.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdc850df761.png" alt="节奏盒子CuRsEdBoX2">
</div>
<div class="tit">节奏盒子CuRsEdBoX2</div>
</a>
</li>
<li>
<a class="item" href="/app/182005.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdc90e73651.png" alt="Resurrection">
</div>
<div class="tit">Resurrection</div>
</a>
</li>
</ul>
</div>
<div class="soft-list like js-tab-cont">
<ul>
<li>
<a class="item" href="/app/182006.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdc9bcde7a1.png" alt="救赎抉择正式版">
</div>
<div class="tit">救赎抉择正式版</div>
</a>
</li>
<li>
<a class="item" href="/app/182007.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdca6cb0481.png" alt="动感解压模拟器">
</div>
<div class="tit">动感解压模拟器</div>
</a>
</li>
<li>
<a class="item" href="/app/182008.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdcb11940c1.png" alt="僵尸前线3正版">
</div>
<div class="tit">僵尸前线3正版</div>
</a>
</li>
<li>
<a class="item" href="/app/182009.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdcb56f3481.png" alt="步添好运app">
</div>
<div class="tit">步添好运app</div>
</a>
</li>
<li>
<a class="item" href="/app/182011.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdcd1d02961.png" alt="大炮涂色最新版">
</div>
<div class="tit">大炮涂色最新版</div>
</a>
</li>
<li>
<a class="item" href="/app/182012.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdcdc9e2af1.png" alt="地摊食神原版">
</div>
<div class="tit">地摊食神原版</div>
</a>
</li>
<li>
<a class="item" href="/app/182013.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdce892e5a1.png" alt="地摊食神">
</div>
<div class="tit">地摊食神</div>
</a>
</li>
<li>
<a class="item" href="/app/182014.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdcf3c3f4a1.png" alt="大炮涂色正版">
</div>
<div class="tit">大炮涂色正版</div>
</a>
</li>
<li>
<a class="item" href="/app/182015.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdcfed1cc61.png" alt="飞镖大作战">
</div>
<div class="tit">飞镖大作战</div>
</a>
</li>
</ul>
</div>
<div class="soft-list like js-tab-cont">
<ul>
<li>
<a class="item" href="/app/182016.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdd098b47b1.jpg" alt="宝宝美食派对手机版">
</div>
<div class="tit">宝宝美食派对手机版</div>
</a>
</li>
<li>
<a class="item" href="/app/182017.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdd149508c1.jpg" alt="宝宝美食派对">
</div>
<div class="tit">宝宝美食派对</div>
</a>
</li>
<li>
<a class="item" href="/app/182018.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdd1f480db1.png" alt="DungeonSquad">
</div>
<div class="tit">DungeonSquad</div>
</a>
</li>
<li>
<a class="item" href="/app/182019.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdd348427c1.png" alt="钓鱼佬净化海洋最新版">
</div>
<div class="tit">钓鱼佬净化海洋最新版</div>
</a>
</li>
<li>
<a class="item" href="/app/182020.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdd3ebe5e51.png" alt="MysticGuardian">
</div>
<div class="tit">MysticGuardian</div>
</a>
</li>
<li>
<a class="item" href="/app/182021.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdd4a1fc071.png" alt="神秘守护者手机版">
</div>
<div class="tit">神秘守护者手机版</div>
</a>
</li>
<li>
<a class="item" href="/app/182022.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdd54115d01.png" alt="画个车手机版">
</div>
<div class="tit">画个车手机版</div>
</a>
</li>
<li>
<a class="item" href="/app/182023.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdd5f35d6e1.png" alt="滑雪大冒险2手机版">
</div>
<div class="tit">滑雪大冒险2手机版</div>
</a>
</li>
<li>
<a class="item" href="/app/182024.html">
<div class="pic-wrap">
<img class="pic" lazy-src="https://images.downcodes.com/uploads/20240919/logo_66ebdd6a7ea071.jpg" alt="宝宝欢乐小家2">
</div>
<div class="tit">宝宝欢乐小家2</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div id="copyright">
<a href="javascript:void(0)" >关于本站</a> |
<a href="javascript:void(0)" >版权声明</a> |
<a href="javascript:void(0)" >合作联系</a> |
<a href="/download/allcategory.html" >网站地图</a> |
<a href="javascript:void(0)" >帮助中心</a>
<br/>
Copyright © 2006-2024 downcodes.com |联系：ymdowncodes@163.com <p class="text_info"><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">湘ICP备2022016001号-1</a></p><br />
</div> </div>
<div class="back-top" id="backTop"><i class="icon icon-totop"></i></div>
</div>
<script type="text/javascript" src="/index/js/base.js"></script>
<script type="text/javascript" src="/index/js/lazy.js"></script>
<script type="text/javascript">
$(".switch_template .block-title3 .title").hover(function(){
var className = $(this).attr("class");
var index = $(this).index();
if(className.indexOf("active") < 0){
$(this).addClass("active").siblings().removeClass("active")
$(this).parent().next().find("ul").eq(index).addClass("active").siblings().removeClass("active")
}
})
seajs.use('common', function(fn) {
fn.init({});
fn.newsDetail();
})
</script>
<div style="display:none;">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?3fb2e807f8eede5f018d457448d4759a";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div></body>
</html>
