[翻译]标记语言和样式手册 chapter 6 短语元素(4)
作者:zhaozy 来源:3user.com 发布时间:2008-01-25 16:37:00
概述
我想讨论这个主题十分必要,因此这是本书核心主题之一的良好范例:将内容与展示效果分开十分重要,很有好处:而将<b>与<i>标签换成结构上对等的标签(强调内容的时候)是个辅助达成这类分离目标的简单方法.
因此,下次当你听到某人提到"没错,你永远应该使用<strong>替换<b>"的时候,你就有足够的理由去支持这个论点了.
大多数情况下,很适合以<strong>或<em>传达强调语气,而当你只是要追求视觉上的粗体,斜体效果时,就用CSS吧.
技巧延伸
本章到目前为止,都把焦点集中在<strong>和<em>上,这两者只是W3C所谓的"短语元素"的一部分,在这本分我们来多看一些短语元素以及他们和标准之间的关系.
短语元素
除了<strong>和<em>之外,W3C HTML 4.01规范里完整的短语元素列表还包括:
<cite>: 包含其他引用,参考来源的资讯
<dfn>: 代表这是名词的定义示例
<code>: 代表一段代码
<samp>: 代表一段程序,script的输出示范
<kbd>: 代表要使用者输入的文字
<var>: 代表程序的变量
<abbr>: 代表缩写名词(像WWW,HTML,URL,Mass.等)
<acronym>: 代表略称(像WAC,radar等)
让我们深入地看几个标签,首先从<cite>开始:
<cite>的设计
<cite>是个值得讨论的有趣元素,在替换掉单纯指定显示效果的<i>标签时尤为重要.<cite>的用途是参照引用来源:标识作者或出版物.历史上来说,设计者或许会用<i>把书籍标题显示成斜体,但是在本章稍早的地方我们学到了CSS是指定显示效果的最佳工具.
你或许会建议用<em>表示出版物的标题,但是在引用书籍或其他出版物的时候,我们并不打算去强调,也就是将书籍标题显示成斜体(在印刷界也常使用下划线,但是这明显会和链接混淆).
于是就出现了为这个工作量身打造的<cite>标签,大多数浏览器甚至预设会以斜体显示<cite>标签中的内容.而我们也能加上CSS规则达成相同的目的.
规范
W3C的<cite>标签规范有点简略,在HTML 4.01规范中只简单提了(www.w3.org/TR/html4/struct/text.html#h-9.2.1):
<cite>: 包含其他引用,参考来源的资讯
这差不多是我们能掌握的说法了,但是我们也不清楚到底哪类资料可以放在<cite>中,但是从"来源"来看,我们至少可以把作者,出版物放进去.
让我们看看<cite>的用法:
The novel, <cite>The Scarlet Letter</cite> is set in Puritan Boston and like this book, was written in Salem, Massachusetts
使用了<cite>标签之后,标题The Scarlet Letter 在大多数浏览器中都显示成斜体,我们将加上下面这段十分简单的CSS规则,以便浏览器在没有预设的时候也显示出正确的效果.
cite {
font-style: italic;
}
回顾一下,我们把标题书籍,其他出版物标题的<i>标签替换成<cite>,在大多数浏览器中,仍然能得到斜体显示效果,也再度使页面内容变得结构化语义化.当然这个结构一样能发挥CSS,让我们一起来瞧一瞧.


猜你喜欢
- 本文主要介绍了webpack编译多页面vue项目的配置问题,分享给大家,具体如下:一般情况下,构建一个vue项目的步骤为: 1,
- 一、安装配置PHP1、下载Php的版本zip包之后,解压缩到指定目录。下载地址:http://www.php.net/downl
- 函数原型:getopt.getopt(args, shortopts, longopts=[])参数解释:  
- 实际项目中遇到python模块相互引用问题,查资料,终于算是弄明白了。首先交叉引用或是相互引用,实际上就是导入循环,关于导入循环的详细说明,
- 一、85%的广告没人看解读:如何挤进那15%的成功广告中去,吸引了读者就是成功了一半。Quester视角:反过来讲,只有不到1/5的广告能吸
- 一、使用loadVariables 一个例子简单的描述了如何通过GET方法向服务器端的ASP发送请求: _root. pushAc
- 也许自己真的就是有手残的毛病,你说好端端的环境配置好了,自己还在那里瞎鼓捣,我最不想看到的就是在安装一个别的模块的时候,自动卸载了本地的其他
- Golang开发环境搭建Go 语言开发包国外:https://golang.org/dl/国内(推荐): https://golang.go
- 1. 鼠标的哪个按键被点击?<html><head><script type="text/javas
- CNN(Convolutional Neural Networks) 卷积神经网络简单讲就是把一个图片的数据传递给CNN,原涂层是由RGB组
- 什么是标签平滑?在PyTorch中如何去使用它?在训练深度学习模型的过程中,过拟合和概率校准(probability calibration
- 通过exec可以执行动态Python代码,类似Javascript的eval功能;而Python中的eval函数可以计算Python表达式,
- 前言最近碰到了照片识别的场景,正好使用了face_recognition项目,给大家分享分享。face_recognition项目能做的很多
- #!/bin/ksh INTERVAL=5 PREFIX=$INTERVAL-sec-status touch /tmp/running R
- 摘要什么是python对象的标识python对象相等的判断自定义python对象相等的条件python对象的标识python对象标识就是py
- 一般情况下,用Mybatis的时候是先设计表结构再进行实体类以及映射文件编写的,特别是用代码生成器的时候。但有时候不想用代码生成器,也不想定
- 前言最近在新的环境配置pycharm的项目时候,发现pycharm不能连接到mysql数据库。由于安了java环境但是还没配置相关的库,并且
- 代码为:import matplotlib.pyplot as plt #用于显示图片import matplotlib.image as
- 废话不多说,直接上代码/** * lhgcalendar时间插件限制只能选择三个月 * @d 获取到的开始时间 * @m 要限制的时间的长度
- 我在使用python读取几十万行的文件中的数据,并构造字典,列表等数据结构时,再访问字典,列表时,一般都会出现内存不够的问题,然后只能循环读