HTML 中的＜abbr＞标签与 role 属性

2024-05-11 19:53:15

昨日浏览CSS Zen Garden网页源码，看到 html 文档中很有意思的 abbr 标签，和其他标签中的 role 属性。记录一下并做个知识点小结。

<abbr>

属性

HTML 缩写元素（<abbr>）用于代表缩写，有一个可选属性 title。可以通过此属性提供完整的描述。注：若使用 title 属性，则它必须且仅可包含完整的描述内容。

<p>
You can use
<abbr title="Cascading Style Sheets">CSS</abbr>
to style your
<abbr title="HyperText Markup Language">HTML</abbr>
.
</p>

You can use CSS to style your HTML .

用法

常见用法

为缩写在文档流外提供一段扩展或定义的时候.
定义一个读者可能不太熟悉的缩写时.
当文本中出现需要进行语义上的标注的缩写词时，<abbr>元素可用于依次将其作用样式和脚本。

特殊用法

可以将 <abbr> 与 <dfn> 配合使用来建立缩写或首字母缩略词的定义。

<p>
<dfn id="html">
<abbr title="HyperText Markup Language">HTML</abbr>
</dfn>
is a markup language used to create the semantics and structure of a web page.
</p><p>
A
<dfn id="spec">Specification</dfn>
(<abbr title="Specification">spec</abbr>)
is a document that outlines in detail how a technology or API is intended to function and how it is accessed.
</p>

HTML is a markup language used to create the semantics and structure of a web page.

A Specification (spec) is a document that outlines in detail how a technology or API is intended to function and how it is accessed.

默认样式

在 CSS 中，默认 <abbr> 元素为行内元素，但在不同浏览器中有微小的差别。

IE及其他一些浏览器，对它的添加的样式和 <span> 元素的样式完全相同。
Opera、Firefox 和其他一些浏览器给这个元素的内容添加一条点状下划线。
一些浏览器不仅添加点状下划线，而且还把元素的内容添加小写大写字母的样式。若要避免，在 CSS 中添加 font-variant: none

浏览器兼容性

扩展阅读

高级文字格式 - 使用 <abbr> 元素

role

role 属性可增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。

作用

描述一个非标准的 tag 的实际作用。

代码示例

注：代码来源–CSS Zen Garden

<div class="summary" id="zen-intro" role="article">……</div>

<header role="banner">……</header>

<p role="contentinfo">……</p>

<aside class="sidebar" role="complementary">……</aside>

HTML 中的＜abbr＞标签与 role 属性相关推荐

php中的method是什么意思,HTML中的form标签的method属性怎么用？这里有method属性的用法介绍...
本篇文章主要的介绍了关于HTML中的form标签的method属性的定义及其用法解释,做了详细的解释,后面还有两个常见的问答和method属性的实例,现在就让我们一起看下去吧首先我们来看看HTML中 ...
html5定义页脚标签,使用 HTML5 中的新标签和新属性
新标签主要分成三个部分:语义化标签.功能性标签及新的输入控件类型语义化标签 .. . ....... 这些新的语义化标签目前得到了大部分主流浏览器的支持,建议直接使用:如果是在IE 8及以下版本,无 ...
前端中关于HTML标签label的属性for的理解
First:<label>的说明: 1.<label>标签为input元素定义标注(标识) 2.label元素不会像用户呈现任何特殊的效果,仅作为显示扩展:不过,它为鼠标用户 ...
html a title显示,HTML中关于a标签的title属性怪事
HTML的a标签用于建立超链接,其title属性规定关于超链接元素的额外信息,即提供额外的提示信息.有代码如下: 无标题文档看看啊!第一层第二层看看啊!第一层第二层看看啊!第一层第二层看 ...
jstl中Core标签库c:out标签的escapeXml属性
jstl中<c:out>标签的escapeXml属性讲解例1: <c:out vlaue="AAA"> <p>BBB</p> &l ...
HTML标签和说明属性
HTML  注释标签标签定义及使用说明所有主流浏览器都支持  注释标签.  注释标签用来在源文档中插 ...
iOS 7.1 的 Safari 为 meta 标签新增 minimal-ui 属性，在网页加载时隐藏地址栏与导航栏...
在过去,用 Safari 打开一个网页后是这样的: 是不是十分不爽?因为顶部的地址栏与底部的导航栏让页面显得非常拥挤,所以用户常常会马上伸手触屏滑动让它们隐藏起来. 始终强调人性化设计的苹果当然注意到 ...
ie8 html 语音标签,让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本在里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. ②又要无休止的找ie8的解决方法,自 ...
php 替换指定标签中的内容,php如何根据不同的条件替换html代码中的img标签
这篇文章给大家介绍的内容是关于php根据不同的条件替换一段html代码中的不同的img标签,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.需求这次的需求是获取到一段html代码 ...
HTML中ul等标签的用法
1. 基本用法: ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol> <li& ...

最新文章

热门文章