定义标题的最好方法_CSS/HTML
时间：2021-07-01 10:21:17
帮助过：17人阅读
作者：阿宏 2005-4-15 20:45:18
原文：What is the Best Way to Mark up the Title of a Document?
说明：本文是 《Web Standards Solutions: The Markup and Style Handbook》一书中的一章。书号：ISBN:1590593812。我们会陆续翻译此书中有价值的章节。
原作者：Dan Cederholm
翻译：阿宏
一个文档标题，最好的定义方法是什么？要回答这个问题，先设想我们要在一个页面上定义文章的标题，通常我们有三个方法来实现这个简单目的：
方法一： 有意义吗？
文章标题
虽然在某些情况下会是一个方便的标签，但它并不能表达出标题的完整含义。采用这个方法的一个好处是，我们可以对它附加一个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>关于标题的次序<BR>在范例中，这个特别的标题是页面中最重要的，因为它是文档的标题。因此，我们使用最重要的标题标签，<h2>。顺应W3C的规范，一些人认为跳过数个标题级是个不好的使用。举个例子，想象我们在下面的页面：</P>
<P><h2>文章标题</h2> <BR>我们接下去的标题（如果不是用另一个<h2>重复的话）应该是<h2>，然后是<h3 >，等等。你也许不应该在<h2>后面跳过一级，直接跟上<h3>。我倾向于同意以上的观点，顺着行文保持级别的连续性，来构造一个排版结构。这样的话，给一个已经存在的页面添加标题和样式就更容易了，你会减少因使用超出的数字而导致的错误。</P>
<P>前面提到的，设计者也许会用<h4>来标签一个页面上最重要的标题，仅仅是因为它的缺省的字体尺寸不象<h2>那样令人生厌的巨大。但是记住，先结构，后设计。我们总是能用CSS来把标题样式化成任何我们喜欢的文字尺寸。 </div>
<div class="">
<ul class="m-news-opt fix">
<li class="opt-item">
<a href='/css-256524.html' target='_blank'><p>< 上一篇</p><p class="ellipsis">像table一样布局div_CSS/HTML</p></a>
</li>
<li class="opt-item ta-r">
<a href='/css-256526.html' target='_blank'><p>下一篇 ></p><p class="ellipsis">仿windows工具条样式_CSS/HTML</p></a>
</li>
</ul>
</div>
</div>
</div>
<div class="g-title fix">
<h2 class="title-txt">人气教程排行</h2>
</div>
<div class="m-rank u-dashed mb40">
<ul>
<li class="rank-item">
<a href="/css-260306.html" title='css文本属性有哪些？css文本属性的总结' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">107次</span>
<span class="g-sort-num top">1</span>
css文本属性有哪些？css文本属性的总结 </a>
</li> <li class="rank-item">
<a href="/css-260754.html" title='css实现弹出对话框的同时出现遮罩层' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">107次</span>
<span class="g-sort-num second">2</span>
css实现弹出对话框的同时出现遮罩层 </a>
</li> <li class="rank-item">
<a href="/css-258484.html" title='cssword-wrap属性的使用详解' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">107次</span>
<span class="g-sort-num third">3</span>
cssword-wrap属性的使用详解 </a>
</li> <li class="rank-item">
<a href="/css-261591.html" title='csstarget-new属性怎么用' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">107次</span>
<span class="g-sort-num ">4</span>
csstarget-new属性怎么用 </a>
</li> <li class="rank-item">
<a href="/css-261624.html" title='cssletter-spacing属性怎么用' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">106次</span>
<span class="g-sort-num ">5</span>
cssletter-spacing属性怎么用 </a>
</li> <li class="rank-item">
<a href="/css-259300.html" title='HTML5中的picture元素响应式处理图片方法' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">106次</span>
<span class="g-sort-num ">6</span>
HTML5中的picture元素响应式处理图片方法 </a>
</li> <li class="rank-item">
<a href="/css-259588.html" title='CSS实现自适应导航菜单' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">106次</span>
<span class="g-sort-num ">7</span>
CSS实现自适应导航菜单 </a>
</li> <li class="rank-item">
<a href="/css-258406.html" title='全部汇总函数定义与用法汇总' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">106次</span>
<span class="g-sort-num ">8</span>
全部汇总函数定义与用法汇总 </a>
</li> <li class="rank-item">
<a href="/css-258129.html" title='用CSS制作聊天框小尖角、气泡效果' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">106次</span>
<span class="g-sort-num ">9</span>
用CSS制作聊天框小尖角、气泡效果 </a>
</li> <li class="rank-item">
<a href="/css-257449.html" title='详解CSS的overflow属性防止float撑开div的使用方法' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">106次</span>
<span class="g-sort-num ">10</span>
详解CSS的overflow属性防止float撑开div的使用方法 </a>
</li> <li class="rank-item">
<a href="/css-261506.html" title='cssbackground-color属性怎么用？' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">105次</span>
<span class="g-sort-num ">11</span>
cssbackground-color属性怎么用？ </a>
</li> <li class="rank-item">
<a href="/css-258398.html" title='关于动画和变换的详细介绍' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">105次</span>
<span class="g-sort-num ">12</span>
关于动画和变换的详细介绍 </a>
</li> <li class="rank-item">
<a href="/css-258505.html" title='CSS中z-index属性是什么意思？' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">105次</span>
<span class="g-sort-num ">13</span>
CSS中z-index属性是什么意思？ </a>
</li> <li class="rank-item">
<a href="/css-259412.html" title='css修改下拉列表select默认样式的实例' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">105次</span>
<span class="g-sort-num ">14</span>
css修改下拉列表select默认样式的实例 </a>
</li> <li class="rank-item">
<a href="/css-258812.html" title='CSS3中关于box-shadow属性的使用详解' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">105次</span>
<span class="g-sort-num ">15</span>
CSS3中关于box-shadow属性的使用详解 </a>
</li> <li class="rank-item">
<a href="/css-259382.html" title='CSS3transition和transform实现跑马灯效果' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">105次</span>
<span class="g-sort-num ">16</span>
CSS3transition和transform实现跑马灯效果 </a>
</li> <li class="rank-item">
<a href="/css-258825.html" title='input[type=file]打开时慢、卡顿问题的解决办法' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">105次</span>
<span class="g-sort-num ">17</span>
input[type=file]打开时慢、卡顿问题的解决办法 </a>
</li> <li class="rank-item">
<a href="/css-258850.html" title='区别input框和按钮的方法' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">105次</span>
<span class="g-sort-num ">18</span>
区别input框和按钮的方法 </a>
</li> <li class="rank-item">
<a href="/css-259410.html" title='css使用relative模仿百度首页top' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">105次</span>
<span class="g-sort-num ">19</span>
css使用relative模仿百度首页top </a>
</li> <li class="rank-item">
<a href="/css-260203.html" title='CSS网格布局（Grid）的两种方式介绍（附代码）' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">105次</span>
<span class="g-sort-num ">20</span>
CSS网格布局（Grid）的两种方式介绍（附代码） </a>
</li>
</ul>
</div>
</div>
</div>
<!-- / 教程内容页 -->
</div>
</div>
<!-- 页尾 -->
<div class="footer">
本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！</div>
<!-- / 页尾 -->
<script type="text/javascript" src="/kan/js/read.js"></script>
<div style="display:none">
<div class="login-box" id="login-dialog">
<div class="login-top"><a class="current" rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div>
<div class="login-form" id="nav-signin">
<!-- <div class="login-ico"><a rel="nofollow" class="qq" id="qqlogin" target="_blank" href="/user-center-qqlogin.html"> QQ </a></div> -->
<div class="login-box-form" id="con_login_1">
<form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;">
<p class="int-text">
<input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p>
<p class="int-text">
<input class="password1" type="password" id="password" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" >
</p>
<p class="int-info">
<label class="ui-label"> </label>
<label for="agreement" class="ui-label-checkbox">
<input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000">
<input type="hidden" name="notforward" id="notforward" value="1">
<input type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label>
<a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p>
<p class="int-btn"><a rel="nofollow" id="loginbt" class="loginbtn"><span>登录</span></a></p>
</form>
</div>
<form id="regform" action="/user-center-reg.html" method="post">
<div class="login-reg" style="display: none;" id="con_login_2">
<input type="hidden" name="t" id="t"/>
<p class="int-text">
<input id="email" name="email" type="text" value="Email" onfocus="if(this.value=='Email'){this.value='';}" onblur="if(this.value==''){this.value='Email';};"></p>
<p class="int-text">
<input id="uname" name="username" type="text" value="用户名或昵称" onfocus="if(this.value=='用户名或昵称'){this.value='';}" onblur="if(this.value==''){this.value='用户名或昵称';};"></p>
<p class="int-text">
<input type="password" id="pwd" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';"> </p>
<p class="int-text1"><span class="inputbox">
<input id="validate" name="validate" type="text" value="验证码" onfocus="if(this.value=='验证码'){this.value='';}" onblur="if(this.value==''){this.value='验证码';};">
</span><span class="yzm-img"><img src="/user-checkcode-index" alt="看不清楚换一张" id="indexlogin"></p>
<p class="int-info">
<label>
<input value="" name="agreement" id="agreement" CHECKED="checked" type="checkbox">
我已阅读<a rel="nofollow" href="/user-center-agreement.html">用户协议</a>及<a rel="nofollow" href="/user-center-agreement.html">版权声明</a></label>
</p>
<p class="int-btn"><input type="hidden" name="dosubmit"/>
<a rel="nofollow" class="loginbtn" id="register"><span>注册</span></a></p>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/kan/js/foot_js.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6dc1c3c5281cf70f49bc0bc860ec24f2";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script type="text/javascript" src="/layui/layui.js"></script>
<script>
layui.use('code', function() {
layui.code({
elem: 'pre', //默认值为.layui-code
about: false,
skin: 'notepad',
title: 'php怎么实现数据库验证跳转代码块',
encode: true //是否转义html标签。默认不开启
});
});
</script>
</body>
</html>
