标记语言——短语元素
互联网 发布时间:2008-10-17 18:55:15 作者:佚名
我要评论
点击这里返回网页教学网 HTML教程 栏目.
上文:标记语言——表单
原文出处
Chapter 6 <strong>,<em>与其他短语元素
在引言和前面的章节中,已经稍微提到过语义标签的概念,使用标签为文件标识意义,而不是单纯的以标签设定显示效果.设计完
<abbr>和<acronym>
我还想提出两个短语元素,就是<abbr>(缩写名词)和<acronym>(略称).使用这些标签能够为缩写名词提供定义,让所有使用者看懂内容,提升网页的易用性.
让我们从新看看W3C在HTML4.01规范内定义的<abbr>和<acronym>用途: <abbr> 代表缩写名词(像WWW,HTTP,URL,Mass.等) <acronym> 代表略称(像WAC,radar等)
配合适当的title属性是这些元素能帮助不了解特定名词的使用者,举例来说,在标识"XHTML"缩写的时候,我们能这样使用<abbr>标签:
<abbr title="eXtensible HyperText Markup Language">XHTML</abbr>
在这里使用<abbr>会使屏幕阅读器拼出缩写内容(X-H-T-M-L),而不是念出完整内容,相对的,使用<acronym>的话则会让他念出完整内容,而不是缩写.
使用<acronym>标签的示例如下:
<acronym title="North Atlantic Treaty Organization">NATO</acronym>
我们也能使用两条听觉CSS规则,再次强调这些差异:
abbr {
speak:spell-out;
}
acronym {
speak:normal;
}
听觉样式让作者能特别为屏幕阅读器指定朗读方式,这能修改页面的听觉表达方式,引导标记结构,改变音调,音色等,让页面朗读的效果与视觉效果更一致. 定义一次
许多人都建议只定义一次在页面内反复出现的缩写,略称,他们认为每次名词出现时重复定义太浪费空间了,而最好只在首次出现的时候加上title属性,我认为这么做有些道理,虽然当使用者被导引到页面特定段落时,可能因为看不到页首展开缩写,略称,从而无法从定义中获利.
利用你的判断力,决定何时(以及要多频繁)定义放在<abbr>和<acronym>内的名词吧. 显示效果
要在视觉上吸引读者,有些浏览器预设会在<abbr>和<acronym>下面加上1像素的点状底部边线,引诱使用者将鼠标移到缩写名词,略称上面,当鼠标移到上面后,浏览器就会以"工具提示"的方式显示title属性提供的定义内容.
对那些不预设显示点状底部边线的浏览器来说,可以通过定义CSS达到同样的效果.
abbr, acronym {
border-bottom: 1px dotted;
cursor: help;
}
我们也加上额外的规则,把光标转成"求助"(大多数浏览器都会支持),帮助使用者看出这不是可以点选的链接,而是以"工具提示"显示的定义内容(Mark Newhouse,"Real World Style:CSS Help",http://realworldstyle.com/css_help.html).
图6-4就是浏览器的显示效果,将"XHTML"扩展成定义文字,以及点状底部边线,求助光标:
图6-4.一般浏览器显示<abbr>的示例 兼容性问题
值得一提的是,在本书撰写的时候,windows版的Internet Explorer还不支持为<abbr>标签指定样式,显示工具提示. IE/Win支持<acronym>标签,这是为了鼓励某些设计者只使用<acronym>处理缩写名词与略称.
这么做或许很有吸引力,但是为了解决现实问题而使用错误的元素并不是件好事,对这个特定问题来说,我偏好根据规范表示名词,让正确支持的浏览器处理<abbr>标签的样式.让我们很快地看看几个还没提到的短语元素.
我还想提出两个短语元素,就是<abbr>(缩写名词)和<acronym>(略称).使用这些标签能够为缩写名词提供定义,让所有使用者看懂内容,提升网页的易用性.
让我们从新看看W3C在HTML4.01规范内定义的<abbr>和<acronym>用途: <abbr> 代表缩写名词(像WWW,HTTP,URL,Mass.等) <acronym> 代表略称(像WAC,radar等)
配合适当的title属性是这些元素能帮助不了解特定名词的使用者,举例来说,在标识"XHTML"缩写的时候,我们能这样使用<abbr>标签:
<abbr title="eXtensible HyperText Markup Language">XHTML</abbr>
在这里使用<abbr>会使屏幕阅读器拼出缩写内容(X-H-T-M-L),而不是念出完整内容,相对的,使用<acronym>的话则会让他念出完整内容,而不是缩写.
使用<acronym>标签的示例如下:
<acronym title="North Atlantic Treaty Organization">NATO</acronym>
我们也能使用两条听觉CSS规则,再次强调这些差异:
abbr {
speak:spell-out;
}
acronym {
speak:normal;
}
听觉样式让作者能特别为屏幕阅读器指定朗读方式,这能修改页面的听觉表达方式,引导标记结构,改变音调,音色等,让页面朗读的效果与视觉效果更一致. 定义一次
许多人都建议只定义一次在页面内反复出现的缩写,略称,他们认为每次名词出现时重复定义太浪费空间了,而最好只在首次出现的时候加上title属性,我认为这么做有些道理,虽然当使用者被导引到页面特定段落时,可能因为看不到页首展开缩写,略称,从而无法从定义中获利.
利用你的判断力,决定何时(以及要多频繁)定义放在<abbr>和<acronym>内的名词吧. 显示效果
要在视觉上吸引读者,有些浏览器预设会在<abbr>和<acronym>下面加上1像素的点状底部边线,引诱使用者将鼠标移到缩写名词,略称上面,当鼠标移到上面后,浏览器就会以"工具提示"的方式显示title属性提供的定义内容.
对那些不预设显示点状底部边线的浏览器来说,可以通过定义CSS达到同样的效果.
abbr, acronym {
border-bottom: 1px dotted;
cursor: help;
}
我们也加上额外的规则,把光标转成"求助"(大多数浏览器都会支持),帮助使用者看出这不是可以点选的链接,而是以"工具提示"显示的定义内容(Mark Newhouse,"Real World Style:CSS Help",http://realworldstyle.com/css_help.html).
图6-4就是浏览器的显示效果,将"XHTML"扩展成定义文字,以及点状底部边线,求助光标:
图6-4.一般浏览器显示<abbr>的示例 兼容性问题
值得一提的是,在本书撰写的时候,windows版的Internet Explorer还不支持为<abbr>标签指定样式,显示工具提示. IE/Win支持<acronym>标签,这是为了鼓励某些设计者只使用<acronym>处理缩写名词与略称.
这么做或许很有吸引力,但是为了解决现实问题而使用错误的元素并不是件好事,对这个特定问题来说,我偏好根据规范表示名词,让正确支持的浏览器处理<abbr>标签的样式.让我们很快地看看几个还没提到的短语元素.
相关文章
文章介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,本文主要给大家介绍HTML img标签和超链2025-06-20- HTML meta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引,本文给大家介绍HTML中meta2025-06-20
input 标签主要用于接收用户的输入,随 type 属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTML input 标签,感兴趣的朋友一起看看吧2025-06-20
这篇文章主要介绍了html 滚动条滚动过快会留下边框线的解决方案,解决方法很简单,可以将 dialog 单独拿出来别放在 transform 的子元素里,需要的朋友可以参考下2025-06-09- 本文将介绍如何使用<img>标签在 HTML 中添加图片,并展示一些常见的用法和技巧,通过本文的介绍,应该掌握了在 HTML 中添加和调整图片的基础知识,感兴趣的朋友一起看2025-05-16
- HTML表格用于在网页上展示数据,通过标签及其相关标签来创建,表格由行和列组成,每一行包含一个或多个单元格,单元格可以包含文本、图像、链接等元素,本文将详细介绍HTML表格2025-03-12
- 本文介绍了三种禁止HTML页面滚动的方法:通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点,感兴2025-02-24
在 Web 开发中,文本的视觉效果是提升用户体验的重要因素之一,通过 CSS 技巧,我们可以创造出许多独特的效果,例如文字镂空效果,本文将带你一步一步实现一个简单的文字镂空2024-11-17
在Html中,a标签默认的超链接样式是蓝色字体配下划线,这可能不满足所有设计需求,如需去除这些默认样式,可以通过CSS来实现,本文给大家介绍Html去除a标签的默认样式的操作代码2024-09-25- 在HTML中,可以通过设置CSS的resize属性为none,来禁止用户手动拖动文本域(textarea)的大小,这种方法简单有效,适用于大多数现代浏览器,但需要在老旧浏览器中进行测试以确保2024-09-25






最新评论