[翻译]标记语言和样式手册 chapter 6 短语元素
作者:zhaozy 来源:3user.com 发布时间:2008-01-25 16:37:00
阅读上一章:chapter 5 表单
Chapter 6 <strong>,<em>与其他短语元素
在引言和前面的章节中,已经稍微提到过语义标签的概念,使用标签为文件标识意义,而不是单纯的以标签设定显示效果.设计完全使用语义标签的网页是个不错的点子.然而我觉得这个目标太理想化了.当然,没有完全达到目标并不代表努力过程毫无价值.至少朝着这个目标努力很有价值.
在现实情况下,经常有必要加上非语义标签,以便实现特定的设计目标,主要是因为现在著名的浏览器都无法百分之百支持标准的缘故.有些CSS规则在部分浏览器中无法显示正确的效果,而这不幸的让我们在达成某些设计目标的过程中必须使用额外的标签.
有个重要的概念必须放在心上:那就是尽量尝试撰写语义化结构将能带来实际的好处.同时,对标准的支持虽然没有达到百分之百,但也已经越过临界点让我们现在就能使用符合网络标准的方法撰写网页.有些时候必须做点牺牲,但是坚持撰写越多的符合标准的标签,未来的工作就会越轻松.
显示效果 VS 结构标签
本章节将会讨论显示效果与结构标签的不同,更确切的说,是讨论使用<strong>替换<b>,以及使用<em>替换<i>的差异.在本章稍后,我们也会讨论几个其他短语元素以及它们在符合标准,结构化标签语法内的重要性.
你或许听说过某些人建议在需要粗体文字时要用<strong>替换<b>,但是他却没有进一步告诉你为什么需要这样的替换.在不知道"为什么"的情况下,实在很难期待其他网页设计者只因为听过需要这样做就改变他们对标签的使用习惯.
为什么<strong>和<em>比<b>和<i>好?
去掉<b>和<i>标签,替换成<strong>和<em>到底是有什么好处呢?其实这一切都是为了表达语义和结构,而不是为了只是显示效果,本书的所有示例也都努力遵循这个概念.
看看专家怎么说
首先,来看看W3C在HTML4.01的短语元素规范里是怎么叙述<strong>和<em>的(http://www.w3.org/TR/html4/struct/text.html#h-9.2.1):
短语元素能在文字片段之内加上结构信息,常见的短语元素意义如下:
<em> 代表强调
<strong> 代表更强烈的强调
所以在此讨论的是两种不同程度的强调.举例来说,就是一个单字或者短语,念的时候应该比较大声,音调较高,念的快些,或者是...嗯,就是比一般文字内容更强调.
W3C接着还叙述了下面这段内容:
短语元素的展示效果随着浏览器的不同,一般来说可视化浏览器应该以斜体显示<em>的文字内容,以粗体显示<strong>的文字内容.语音合成软件则能配合内容改变合成参数,像是音量,音调与速度等等.
啊哈!最后一句特别有意思,语音合成软件(之前我们称之为屏幕阅读器)将会正确处理必须强调的文字,这的确是件好事.
相对之下,<b>或是<i>只是单纯的显示效果标签.如果我们的目标是将结构与显示效果分离的话,使用<strong>和<em>就是正确的选择,单纯想要显示粗体,斜体文字的时候用css就好了.本章稍后会讨论更多例子.
接着看两个标识示例,帮助我们了解它们的差异.
方法A
your order number for future reference is: <b>6474-82071</b>.
方法B
your order number for future reference is: <strong>6474-82071</strong>.
又粗又美丽
这个情况是使用<strong>比<b>更适合的完美例子,我们打算让句子内的特定文字显示的更加重要.除了粗体显示订单编号以外,我们也希望屏幕阅读器也改变它们表达这段内容的方式:提升音量,改变音调或速度.方法B能够同时达到这两个目的.
<em>又如何?
同样的,以<em>取代<i>,能够同时表达重要性,而不只单纯的以斜体显示文字内容.来看看这两个例子:
方法A
It took me not one,but <i>three</i> hours to shovel my driveway this morning.
方法B
It took me not one,but <em>three</em> hours to shovel my driveway this morning
强调语气
在前面的例子里(本书撰写时的真实情况),我的目的是使"three"这个字以强调语气表现,如同我大声念出这个字,视觉上,方法B在大多数浏览器里都会以斜体显示,而屏幕阅读器也会适当的调整音色,速度或音量.
猜你喜欢
- 很多网友在经典论坛里说自己的网站为什么色彩上总是有问题,总是看起来没什么精神,没办法吸引人注意。小毅观察了一些网友们设计的网站发现他们在用色
- 这个是我在蓝色看到的,楼主想实现图片按比例缩放的功能(缩略图),把图片固定在一定的宽高范围内,不会变形,失真。例如:缩略图的框是94px*9
- Javascript 中的闭包其实很改语言中很难理解的一部分。感谢 Stuart 提供了那么棒的 PPT,它深入浅出的解释了 Javascr
- 上个周末去书店时碰巧看到了AS3 CookeBook,我记得在apollo的alpha版快出来的时候,7yue就推荐过这个小册子,只不过我已
- Oracle 数据库启动Oracle shutdown的时候突然断电,导致使用sql/plus启动时无法连接到数据库,具体描述为: conn
- 错误代码错误消息说 明ASP0100Out of memory内存不足(不能分配要求的内存)ASP0101Unexpected
- 简介在SQL SERVER中,数据库在硬盘上的存储方式和普通文件在Windows中的存储方式没有什么不同,仅仅是几个文件而已.SQL SER
- 今天碰到这个极度郁闷的报错,搞了大半下午,才发现是ie的问题,忍不住大骂。例子是这样的:页面中有多处能出发菜单,并且菜单出现在触发点的旁边,
- 喜欢Gucci的优雅吗?或者痴迷美国普普艺术?谷歌中国最近改版的谷歌个性化首页iGoogle集中了近1500个主题,包括近120多位全球顶级
- 有两个服务器,装了两个数据库,一个是主的,一个是备用的,下面的的功能就将主数据库的数据库,实时同步到备份数据库上,使他们的数据内容,基本上保
- 在使用ORACLE的过程过,我们会经常遇到一些ORACLE产生的错误,对于初学者而言,这些错误可能有点模糊,而且可能一时不知怎么去处理产生的
- 在WEB2.0 网页充斥的年代,身边无时无刻都听到这样的声音:“拒绝海报式设计,要做有用的设计,要简洁,要清爽,要大气”产品经理
- 对大家推荐很好使用的MySql节点系统,像让大家对MySql节点系统有所了解,然后对MySql节点系统全面讲解介绍,希望对大家有用在向大家详
- 我们在做表单的时候经常会使用到这样的结构:<fieldset> <lege
- 在注册或购物车结帐的时候,需要用户填入个人资料,这个环节可以简练一下,我们只需客人填入邮政编码,然后就根据这个邮政编码,自动从数据库中取出相
- 一、查询条件精确,针对有参数传入情况 二、SQL逻辑执行顺序 FROM-->JOIN-->WHERE-->GROUP--&
- 一条语句搞定数据库分页select top 10 b.* from (select&nbs
- 很多SQL Server程序员对子查询(subqueries)的使用感到困惑,尤其对于嵌套子查询(即子查询中包含一个子查询)。现在,就让我们
- 原文:Five quick JavaScript tips真是五个很quick的小提示:1.只在<form>元素上使用submi
- 如何在聊天室实现趣味答题并计分功能?这个创意确实很好,我们可用在聊天室框架中加入一隐含帧(5分钟刷新一次)的做法来实现这一功能。questi