定义标题的最好方法_CSS/HTML
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了定义标题的最好方法_CSS/HTML，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5571字，纯文字阅读大概需要8分钟。
内容图文
作者：阿宏 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来把标题样式化成任何我们喜欢的文字尺寸。<a href="http://www.laitingfm.com" /></a>
<a href="https://curl.qcloud.com/kfoLTs9R" /></a>
</article>
</div>
<div class="w310 r">
<a href="https://www.gxlcms.com/server-467421.html" target="_blank"> <img src="http://www.gxlcms.com/Public/aiod/ts.jpg" /></a>
<div class="youclmt">
<h3>css热搜</h3> </div>
<div class="langmubt">
<ul>
<li><a href="/css-259310.html" target="_blank">五种CSS利用table实现常用布局的方法</a></li><li><a href="/css-259311.html" target="_blank">利用css隐藏input的光标方法</a></li><li><a href="/css-259316.html" target="_blank">HTML5WebWorker的使用实例教程</a></li><li><a href="/css-259318.html" target="_blank">CSS3实现头像旋转效果实例分享</a></li><li><a href="/css-259321.html" target="_blank">CSS3font-feature-settings特性减除字体动画震颤效果实例分享</a></li><li><a href="/css-259322.html" target="_blank">纯CSS实现手风琴效果示例详解</a></li><li><a href="/css-259324.html" target="_blank">5种CSS垂直水平居中的最佳方案</a></li><li><a href="/css-259326.html" target="_blank">使用CSS给表单必选项添加星号实例分享</a></li><li><a href="/css-259328.html" target="_blank">css3实现冲击波效果</a></li><li><a href="/css-259334.html" target="_blank">四种引入css的方式总结</a></li><li><a href="/css-259335.html" target="_blank">canvas的视频遮罩插件实例分享</a></li><li><a href="/css-259336.html" target="_blank">CSS使用Grid布局构建网站首页</a></li><li><a href="/css-259341.html" target="_blank">CSS命名规范节约Debug时间解答</a></li><li><a href="/css-259347.html" target="_blank">Dreamweaver网页怎么添加弹出窗口信息详解</a></li><li><a href="/css-259349.html" target="_blank">html5Canvas实现图片旋转</a></li><li><a href="/css-259350.html" target="_blank">html+css+js实现拍照预览上传图片功能实例分享</a></li><li><a href="/css-259351.html" target="_blank">css3做0.5px的细线实例分享</a></li><li><a href="/css-259358.html" target="_blank">CSS圆形缩放动画实现代码分享</a></li><li><a href="/css-259359.html" target="_blank">CSS定位实例讲解</a></li><li><a href="/css-259364.html" target="_blank">判断滚动条滑到底部触发事件实例分享</a></li><li><a href="/css-259366.html" target="_blank">CSS使用position:sticky实现粘性布局实例详解</a></li><li><a href="/css-259375.html" target="_blank">CSS的经典三栏布局如何实现</a></li><li><a href="/css-259392.html" target="_blank">css3实现鼠标跟随导航效果</a></li><li><a href="/css-259398.html" target="_blank">CSS3通过@keyframes创建动画</a></li><li><a href="/css-259404.html" target="_blank">css实现右侧固定宽度左侧宽度自适应</a></li> </ul>
</div>
<a href="https://curl.qcloud.com/I8w1gZa8" target="_blank"> <img src="http://www.gxlcms.com/ad/tx500x500.jpg" /></a>
</div>
</div>
</div>
</div>
<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: '定义标题的最好方法_CSS/HTML代码块',
encode: true //是否转义html标签。默认不开启
});
});
</script>
<link rel="stylesheet" type="text/css" href="/kan/css/basezb.css">
<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="/?s=user-center-qqlogin.html"> QQ </a></div> -->
<div class="login-box-form" id="con_login_1">
<form id="loginform" action="/?s=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="/?s=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="/?s=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="/?s=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="/?s=user-center-agreement.html">用户协议</a>及<a rel="nofollow" href="/?s=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>
<div id="footer">
<div class="w1200">
<p class="tips_text">本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！
<a href="/?s=gb-show-p-1.html" title="合作方式" target="_blank">合作方式</a></p>
<p class="tips_text">Copyright © 2004-2018 https://www.gxlcms.com/. All Rights Reserved.<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?afb4873a3fbaa95f710a04306bfb4a0b";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<a href="http://beian.miit.gov.cn/" target="_blank">豫ICP备19030742号</a></p>
</div>
</div>
<link rel="stylesheet" href="/Public/del/css/list.css"> </body>
</html>
内容总结
以上是互联网集市为您收集整理的定义标题的最好方法_CSS/HTML全部内容，希望文章能够帮你解决定义标题的最好方法_CSS/HTML所遇到的程序开发问题。
如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
来源：【匿名】