首页 > 教程 > 关键词  > 定义标题最新资讯  > 正文

定义标题的比较好方法

2007-03-22 15:40 · 稿源:w3cn.org

  方法一: 有意义吗?

  <span class="heading">文章标题</span>

  虽然在某些情况下<span>会是一个方便的标签,但它并不能表达出标题的完整含义。采用这个方法的一个好处是,我们可以对它附加一个CSS规则,分配其一个heading class,使其文字象标题一样显示。

  .heading {
  font-size: 24px;
  font-weight: bold;
  color: blue;
  }

  ok,现在所有的标题都用heading class标记成了大号的粗体字体,并且为蓝色。太棒了!但是这样做对吗?如果有人用一个不支持CSS的浏览器来观看,会怎样呢?

  举个例子,如果我们设置的这个外部样式表的规则不被老版本的浏览器支持,会怎样?又或者有视觉障碍的人用屏幕阅读器来阅读这个页面,又会怎样?一个访问者通过这些途径所看到(或听到)的应该和这个页面上正常的文本没有任何区别。

  尽管class="heading"为这个标签增加了一点意义,但<span>仍然只是一个普通的标签,可以被大多数浏览器的缺省样式所修改掉。

  搜索引擎检索这个页面时会略过<span>标签,就好象它不存在一样,不会对其可能包含的关键字给于一点额外的重视。在后面我们会更多的谈到搜索引擎和标题的关系。

  最后,由于<span>标签是一个内嵌元素,我们可能需要把它嵌套在一个额外的块级元素中,比如<p>标签或<div>标签,为的是使它能够形成单独的行,这会进一步被非必要的代码弄乱你的标签。而这些额外增加的标签却是必须的,这样才能使不支持CSS的浏览器显示出没有差别的文本。

  方法二:<p>和<b>组合

  <p><b>文章标题</b></p>

  使用一个段落标签,将会给我们带来块级的显示,<b>会把文本变成粗体。但是用这个方法标记一个重要的标题时,我们面对的是同样无意义的结果。

  不象方法A,<b>标签能在可视化的浏览器中把文字显示成粗体——甚至在不支持CSS的浏览器中。但是和<span>标签一样,搜索引擎也不会因为有一些东西在段落中被加粗了而给予更高的优先。

  难以设计样式

  用普通的<p>和<b>的组合,也带来了另一个缺憾——无法把这个标题设计成不同于其他段落的样式。我们可能想用一个特别的样式来突出标题,来使页面内容更清晰更具结构,但是用这个方法只能使其显示成粗体。

  方法三:样式加实质

  <h1>文章标题</h1>

  恩,多么好的标题定义。大多数的网页设计者对它都很熟悉。其实适当的使用它们,<Hn> 就能为页面内容提供灵活的、可索引的、以及可样式化的结构。

  这也是聪明的定义方法,你会发现它很简单。不再需要额外的标签,你可以说,这仅仅比另外两个方法节省了一点点的字节,可以忽略不计,但节省一点是一点。

  <h1>一直到<h6>,代表了标题的六个级别,从最重要的(<h1>)到最次要的(<h6>)。他们本身就是块级的,不需要增加其它元素来使其单独成行。简单,有效——就是好工具。

  轻松定制样式

  因为我们使用<h1>标签是唯一的,而<b>或<p>标签更适合使用在整个页面,所以我们可以用各种各样的CSS方法来样式化。

  更重要的是,尽管完全不用样式,一个标题标签也能明显的表示出一个标题!可视化的浏览器把 <h1>显示成更大的粗体。一个非样式化的页面将以被期望的那样显示文档结构,用适当的标题标签来传达意思。

  屏幕阅读器、PDA、手机、以及可视化的和非可视化的浏览器都会明白,碰到一个标题标签时该做的事情,正确的处理,比页面上的普通文本更重视的来对待。而使用<span>标签,那些不支持CSS的浏览器就不会特别的对待它。

  讨厌的默认样式

  以往,由于浏览器默认的缺省值非常的丑陋,设计者们也许会避免完全的使用标题标签。或者,因为缺省值的巨大尺寸而避免使用<h1>或<h2>,取而代之的是用更高数值的标题标签来实现更小的尺寸。

  然而,需要重点强调的是,我们可以很简单的用CSS来改变这些标题标签——举个例子,一个< ;h1>并非一定是占满大半屏幕的巨大标版。在后面,我将证明用CSS来样式化标题标签是多么的简单,希望可以帮助你减轻巨大的恐惧。

  对搜索引擎友好的

  这是一个巨大的好处。搜索引擎喜欢标题标签。另一方面,一个<span>标签或者普通的加粗的段落标签却在意味着次要一点。适当的用<h1>到<h6>标记你的标题,只需要你的一点点努力,然而却让搜索引擎更容易的检索到你的页面,让人们最终能找到它们。

  搜索引擎机器人会给予标题标签特别的关注——这是你可能放置一些关键词的地方。就象检索到 <title>和<meta>,它们会顺着标题标签往页面下面查找。如果你不使用这些标签,那么包含在里面的关键词将不会被认为是有价值的,从而被忽略掉。

  所以只要付出一点点的努力,你就能增加人们基于页面的内容找到你的站点的可能性。听上去不错,不是吗?

  关于标题的次序

  在范例中,这个特别的标题是页面中最重要的,因为它是文档的标题。因此,我们使用最重要的标题标签,<h1>。顺应W3C的规范,一些人认为跳过数个标题级是个不好的使用。举个例子,想象我们在下面的页面:

  <h1>文章标题</h1>

  我们接下去的标题(如果不是用另一个<h1>重复的话)应该是<h2>,然后是<h3 >,等等。你也许不应该在<h1>后面跳过一级,直接跟上<h3>。我倾向于同意以上的观点,顺着行文保持级别的连续性,来构造一个排版结构。这样的话,给一个已经存在的页面添加标题和样式就更容易了,你会减少因使用超出的数字而导致的错误。

  前面提到的,设计者也许会用<h4>来标签一个页面上最重要的标题,仅仅是因为它的缺省的字体尺寸不象<h1>那样令人生厌的巨大。但是记住,先结构,后设计。我们总是能用CSS来把标题样式化成任何我们喜欢的文字尺寸。

举报

  • 相关推荐
  • 小米汽车APP大升级:遥控钥匙更新自定义按键

    最近小米汽车OTA升级之后,有车主发现小米汽车APP遥控钥匙界面有些不一样了。 原来,在最近的OTA升级中,小米汽车更新了遥控钥匙”中的自定义按键”功能。 在完成升级后,车主可以通过小米汽车APP自定义遥控钥匙第四按键的车控功能。 操作比较简单,打开小米汽车APP,点击车辆钥匙遥控钥匙自定义按键”,就能给第四按键设置功能了。

  • 小米YU7零重力座椅支持自定义调节位置:但主副驾驶有区别

    小米汽车发布了最新一期答网友问”,回应了YU7前排零重力座椅的相关内容。 据悉,小米YU7全系车型可付费选装主驾、副驾零重力座椅,零重力座椅不仅可以实现更舒适的零重力状态,还配备了十点式按摩。 座椅在完成零重力状态调节后,用户仍可对靠背、座垫、腿托位置进行自定义调节。 调节完成后,在中控屏弹窗点击保存此位置”即可记忆零重力座椅位置,从而在下�

  • 省心又省钱!格之格大容量易加粉2.0重新定义高性价比打印

    随着消费升级,打印耗材需求从单一功能转向多维度综合标准。格之格大容量易加粉2.0通过技术创新实现三大突破:采用5A级碳粉提升转印率至95%;蓝钻鼓芯技术实现稳定加粉3次以上;页产量提升50%满足高频打印需求。搭配升级版碳粉PRO+,在提升打印质量的同时解决兼容性问题,并通过瓶体设计优化加粉速度30%。产品精准把握用户痛点,以技术积累和用户洞察为基础,持续引领行业变革,提供高性价比的打印解决方案。

  • 追觅加湿空气净化器PM30 “净化+加湿+灭菌”重新定义健康空气标准

    追觅科技发布全新PM30加湿空气净化器,以"净润同步"为核心,通过8重净化杀菌技术与无雾冷蒸发加湿的创新融合,解决传统加湿器易滋生细菌、产生"白粉"污染的问题。产品采用5L大容量水箱,1小时可提升50m³空间湿度至39%,配备UV灯和电解次氯酸技术实现水路深度杀菌。风路系统采用UVC紫外线和等离子发生器,可杀灭10类细菌病毒。针对母婴家庭特别设计多重防护体系,包括甲醛分解滤网和32dB静音运行。PM30还搭载AI智能调控系统,能自动感知人体移动并调节送风角度,满足不同场景需求。该产品已在官方商城开启预售,有望成为高端家电市场新标杆。

  • TCL华星×三星联合发布玄龙骑士电竞显示器新品,定义沉浸式电竞新未来

    8月1日至4日,第二十二届中国国际数码互动娱乐展览会(ChinaJoy)在上海举办。三星与TCL华星联合发布玄龙骑士系列电竞显示器新品G90XF、G75F及G70F,搭载前沿显示技术,包括165Hz刷新率、1ms响应时间等配置。其中G90XF采用3D显示技术,实现无眼镜沉浸体验;G75F配备40英寸超宽屏;G70F支持4K180Hz与FHD360Hz双模式。同时展出的Neo G9双4K显示器采用Mini LED技术,具备1000R曲率和HDR1000认证。

  • 医工结合技术交流会成功举办,YOUMAGIC舒立缇定义射频抗衰技术新标准

    7月25日,YOUMAGIC舒立缇联合清华大学工程物理系举办"重返校园·共启新程"医工结合技术交流会。活动汇聚百余位医学专家、学者及产业代表,探讨医工结合的深层价值。会上发布《新一代单极射频技术蓝皮书》,为行业树立技术新标准。清华教授分享了医工融合实践经验,指出高校在跨学科科研生态中的关键作用。威脉医疗旗下YOUMAGIC舒立缇作为医工结合实践成果,通�

  • Dedecms 5.5 实现自定义标题处理(附采集规则)

    Dedecms 5.5 实现自定义标题处理,在 {dede:function}@me=‘64edu.com’.@me{/dede:function}中添加自定义的处理方法,就可以实现自定义dedecms5.5 5.3的接口处理效果

  • 世俱杯“绿色赛场”的科技赋能:科龙空调低碳技术定义节能新高度

    科龙空调作为2025年FIFA世俱杯官方指定空调,在青岛举办全民沙滩足球赛致敬顶级赛事。活动现场设立"低碳科技体验区",展示静省电Max等节能产品,让大众体验赛事同款绿色科技。科龙通过将高效节能技术应用于观赛场景,实现顶级赛事与家庭环境的无缝连接。其静省电Max系列APF值达5.5,超国家一级能效标准30%,8月还将推出能效超6.0的旗舰产品。科龙贯彻全生命周期环保理念,采用R32环保冷媒,搭载双排冷凝器等创新技术,并通过AI智能调控实现精准节能。这一系列举措深化了体育IP合作价值,以"科技为民"理念连接顶级赛事与美好生活。

  • 奇富科技信贷智能体:用 AI 重新定义金融智能体的 “专家级” 边界

    奇富科技通过AI驱动的金融智能体技术,正在重塑银行业信贷流程。其自主研发的Deepbank平台整合AI营销助手、审批官、决策助手和合规助手四大模块,将传统3天的数据分析流程压缩至1小时,实现从"经验依赖"到"智能驱动"的转变。该技术融合700+模型和7000+策略模块,覆盖99%小微企业群体,信用评估准确率达98%。通过与广东华兴银行等机构合作,奇富将"专家级"信贷能力注入银行系统,推动全流程智能化转型。这一创新不仅提升审批效率、降低合规风险,更重新定义了行业竞争维度——从技术比拼转向业务价值创造,助力银行在普惠金融和精准风控间找到平衡点。

  • 从复古到未来欧拉汽车好猫GT2025款 定义个性出行新方式

    欧拉汽车推出2025款好猫GT,延续品牌个性化设计语言,在细节处全面升级。新车采用复古轮毂、圆形大灯与低矮车头组合,新增暗夜机甲猫配色,搭配熏黑蜂窝矩阵格栅和"机甲猫耳"空气导流槽,视觉冲击力十足。内饰采用麂皮材质与Alcantara面料交织的运动座椅,配备12.3英寸悬浮式中控屏与7.25英寸全液晶仪表,支持语音交互和双模式互联。动力方面提供双功率版本,采用蜂巢短刀电池2.0,CLTC工况续航430公里。在10-15万级纯电市场竞争中,好猫GT凭借差异化定位,精准切入年轻用户对个性与性能的双重需求。