html 标签简写_HTML缩写标签

最新推荐文章于 2022-03-27 22:00:14 发布

weixin_26742939

最新推荐文章于 2022-03-27 22:00:14 发布

阅读量280

点赞数

文章标签： html vue python ViewUI

原文链接：https://medium.com/swlh/html-abbr-tag-746865281273

版权

html 标签简写

Semantic HTML is a great way to convey meaning of your page. Mark up abbreviated content with the <abbr> tag. And when you pass a title, it will create a tooltip when hovered over. Nice! 👏

语义HTML是传达页面含义的好方法。用<abbr>标签标记缩写内容。当您传递标题时，将鼠标悬停在标题上时会创建一个工具提示。真好！ 👏

<abbr title="Today I learned">TIL</abbr> something awesome!

表中的内容 (Table of Content)

− Default Styling− Styling abbr Tag− Battle between abbr VS acronym ⚔️− Mixing abbr with dfn− Why Semantic HTML is important− Display HTML abbr on Mobile−− Solution 1: Display Non-abbreviated Term−− Solution 2: Display Non-abbreviated Term with Tap−− Solution 3: JavaScript Tooltip− Browser Support− Resources

− 默认样式 − 缩写样式标签 − 缩写VS缩写之间的争斗 − 将 dbn 与dfn混合使用 − 为什么语义HTML很重要 − 在移动设备上显示HTML缩写 − − 解决方案1：显示非缩写术语 − − 解决方案2：显示非缩写Tap的术语 - 解决方案3：JavaScript工具提示 - 浏览器支持 - 资源

默认样式 (Default Styling)

The default styling of <abbr> varies a bit from different browsers. In Chrome and Firefox, it will have an underline and when hovered it will a tooltip of the title value you passed.

<abbr>的默认样式因不同的浏览器而有所不同。在Chrome和Firefox中，它会带有下划线，并且在悬停时会显示您传递的title值的工具提示。

Image for post — Text of “TIL” being displayed as underlined

If you open this page on Safari, there will be no underline. Also, the underline is only present if you have a title attribute.

如果您在Safari上打开此页面，则不会出现下划线。此外，仅当您具有title属性时，才显示下划线。

样式缩写标签 (Styling abbr Tag)

With its unique tag, it also makes customization styling very easy. You can do something like this

凭借其独特的标签，它也使自定义样式非常容易。你可以做这样的事情

abbr {
  text-decoration: underline blue dotted;
  color: blue;
}abbr:hover {
  cursor: help;
}

Because of the cross-browser variations, I would recommend that you impose a custom styling for your <abbr> tag. That way you will have a consistent look between browsers 🤓

由于跨浏览器的差异，我建议您为<abbr>标签强加自定义样式。这样，您将在浏览器之间拥有一致的外观🤓

之间的战斗`abbr` VS `acronym` ⚔️ (Battle between `abbr` VS `acronym` ⚔️)

Back in 1997, there was this fierce debate about acronym vs abbr. The war began when Netscape created the <abbr> tag and Microsoft had the <acronym>. No side wanted to budge! And our mediator, W3C, refused to interfere and take a stand. The battle continued for many years, leading many developers confused and unsure which to use. Microsoft seems to have an edge with its dominating Internet Explorer presence. But then HTML5 landed...

早在1997年，有一个关于这个激烈争论acronym VS abbr 。当Netscape创建<abbr>标签并且Microsoft使用<acronym>时，战争开始了。没有一方愿意让步！我们的调解员W3C拒绝干预并表示立场。这场争斗持续了很多年，导致许多开发人员感到困惑和不确定该使用哪一个。微软似乎在其占主导地位的Internet Explorer中占有优势。但随后HTML5降落了...

W3C finally decided to step in and said, “Nobody wins when the family feuds, We all lose when the family feuds, What’s better than one billionaire? Two” … Opps, sorry that was the lyrics to Jay Z’s Family Feuds, but I’m pretty sure it was along that lines 😂

W3C最终决定介入，并说： “一家人发生争执时没有人赢，当一家人发生争执时我们都输了，还有什么比一位亿万富翁更好？ 两个” …哦，抱歉，这是杰伊·Z(Jay Z)的《家庭仇恨》(Family Feuds )的歌词，但我很确定这是沿着这条思路

Anyways, long story short! <acronym> is deprecated, so use <abbr> 👍

总之，长话短说！ <acronym>已过时，请使用<abbr> 👍

将`abbr`与`dfn`混合 (Mixing `abbr` with `dfn`)

When you are defining a term, you can wrap it in the <dfn> tag. So if you're using an abbreviation plus you're explaining it, you can mix these tags like this:

定义术语时，可以将其包装在<dfn>标记中。因此，如果您使用的是缩写词并加以说明，则可以如下混合使用这些标签：

<p>
  <dfn>
    <abbr title="Hypertext Markup Language">HTML</abbr>
  </dfn>
  is the standard markup language for documents designed to be displayed in a
  web browser.
</p>

为什么语义HTML很重要 (Why Semantic HTML is important)

Semantic HTML is important because it allows you to convey meaning of your code. I remember when I first started learning programming, I’d just wrap all my text in <div> and then use CSS to apply the correct styling. For a visual person, it made no difference. The user would see what I want them to see 🤷‍♀️

语义HTML非常重要，因为它允许您传达代码的含义。我记得当我刚开始学习编程时，我只是将所有文本包装在<div> ，然后使用CSS来应用正确的样式。对于有视觉感的人来说，这没有什么区别。用户会看到我希望他们看到的内容

But wrapping everything in a <div> tag, even with styling, means nothing for a machine. So that means a machine such as a screen reader would not know how to take your text and properly communicate your content for a visually impaired person. Nor would a search engine bot, think SEO, know how to crawl your content, and properly rank your site. By the way, noticed what I did there, I wrapped my SEO in an <abbr> tag 😉 That's right! Got to always be applying them knowledge 😎

但是，即使使用样式将所有内容包装在<div>标记中，对于计算机而言也没有任何意义。因此，这意味着诸如屏幕阅读器之类的机器将不知道如何获取文本以及如何为视障人士正确传达您的内容。搜索引擎机器人也不会思考SEO，也不知道如何抓取您的内容并正确地对网站进行排名。顺便说一句，注意到我在那做的事，我将SEO包裹在<abbr>标签中😉是的！总是要运用他们的知识😎

As developers, it is our job to ensure our website or app is inclusive for everyone. And the way to do that is to use the proper semantic HTML tag 💛 Just like if you’re a restaurant, you wouldn’t turn away paying customers 😆 (that’s right, it’s all about the money! Utility ain’t paying themselves 🤑)

作为开发人员，确保我们的网站或应用程序对所有人都具有包容性是我们的工作。做到这一点的方法是使用适当的语义HTML标签if就像您是餐馆一样，您也不会拒绝向客户付款😆(是的，这全都是钱！公用事业不会自己付款🤑 )

在移动设备上显示HTML缩写 (Display HTML abbr on Mobile)

So far, I got you all pumped about using the HTML <abbr>. It's semantic and it has a nice tooltip when hovered. Before you break the champagne out...there is a little problem 😅

到目前为止，我已经让所有人都喜欢使用HTML <abbr> 。它具有语义，并且在悬停时具有很好的工具提示。在你把香槟打破之前...有一个小问题😅

The problem is with Mobile. The hover works great on desktop where there is a pointing device. But once you switch over to a mobile device, the hover tooltip won’t work. But no worries! I found some creative solutions 👏

问题出在手机上。悬停在有指针设备的桌面上效果很好。但是一旦切换到移动设备，悬停工具提示将不起作用。但是不用担心！我找到了一些创造性的解决方案

解决方案1：显示非缩写词 (Solution 1: Display Non-abbreviated Term)

Here’s a very simple solution. Let’s just display the full non-abbreviated term once they’re at a smaller screen size.

这是一个非常简单的解决方案。让我们以较小的屏幕尺寸显示完整的非缩写词。

<abbr title="Today I learned">TIL</abbr>

And with CSS, we take the non-abbreviated term indicated in the title attribute and output it on our page in brackets.

对于CSS，我们采用title属性中指示的非缩写术语，并将其输出到页面上的方括号中。

abbr[title]::after {
  content: ' (' attr(title) ')';
}

And we can also use media queries to get rid of the non-abbreviated term once it hits a bigger screen size.

而且，当非缩写词达到更大的屏幕尺寸时，我们也可以使用媒体查询来消除它。

@media screen and (min-width: 992px) {
  abbr[title]::after {
    content: '';
  }
}

Credit: Aurelio De Rosa

图片来源： Aurelio De Rosa

解决方案2：使用Tap显示非缩写词 (Solution 2: Display Non-abbreviated Term with Tap)

It’s nice that we display the non-abbreviated term on smaller screen sizes. But we all know how real estate is even more previous on mobile devices, so we might not want to clog our screen with unnecessary text. In that case, we can utilize our hover state to only show the non-abbreviated term only when tapped.

很高兴我们在较小的屏幕尺寸上显示非缩写词。但是我们都知道房地产在移动设备上的地位甚至更高，因此我们可能不想在屏幕上塞满不必要的文字。在这种情况下，我们可以利用hover状态仅在点击时显示非缩写词。

abbr[title]:hover::after {
  content: ' (' attr(title) ')';
}

We can even further improve on this by including keyboard support. We can indicate the abbr tag is focusable in sequential keyboard navigation with tabindex="0" and then trigger our non-abbreviated content when focused.

通过包含键盘支持，我们甚至可以进一步改进。我们可以使用tabindex="0"指示abbr标签在顺序键盘导航中是可聚焦的，然后在聚焦时触发非缩写内容。

<abbr title="Today I learned" tabindex="0">TIL</abbr>abbr[title]:focus::after {
  content: ' (' attr(title) ')';
}

Credit: Ire Aderinokun

图片来源： Ire Aderinokun

解决方案3：JavaScript工具提示 (Solution 3: JavaScript Tooltip)

Instead of using CSS, you can also simply use JavaScript to trigger a tooltip. If you’re using Bootstrap, you can use the Tooltips component.

除了使用CSS，您还可以仅使用JavaScript触发工具提示。如果您使用的是Bootstrap，则可以使用工具提示组件。

It definitely would be nice if there was a native solution to address the <abbr> issues in mobile or non-pointing device. Unfortunately at this time, there isn't 😔. But semantic HTML is still very important and as developers, we need to do our best to use it whenever possible. For now, we just have to understand the issues and use our creative juices to work around it. Semantic HTML all the way!!! 🏆

如果有本机解决方案来解决移动或非指向性设备中的<abbr>问题，那肯定会很好。不幸的是，这时没有😔。但是语义HTML仍然非常重要，作为开发人员，我们需要尽一切可能使用它。现在，我们只需要了解问题并使用我们的创新解决方案即可解决。一路语义HTML ！！！ 🏆

浏览器支持 (Browser Support)

Browser Support
浏览器支持

资源资源 (Resources)

Thanks for reading ❤To find more code tidbits, please visit samanthaming.com

感谢您阅读 ❤要查找更多代码花絮，请访问samanthaming.com

🎨 Instagram |🌟 Twitter | 👩🏻‍💻 SamanthaMing.com

🎨 的Instagram |🌟 微博 | 👩🏻💻 SamanthaMing.com

翻译自: https://medium.com/swlh/html-abbr-tag-746865281273

html 标签简写

weixin_26742939

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 标签简写_HTML缩写标签

html 标签简写Semantic HTML is a great way to convey meaning of your page. Mark up abbreviated content with the <abbr> tag. And when you pass a title, it will create a tooltip when hovered over. Nic...
复制链接

扫一扫