blocks|key|284083|text|要使用title=属性，实际上不需要使用<abbr>标记。您可以将其应用于许多事情，包括<span>标记。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|284084|使用示例：|284085|<span+title="This+is+my+explanation+here.">Confusing+text</span>|code-block|syntax|javascript|284086|来自w3schools.com:通过标记缩写，您可以向浏览器、拼写检查器、翻译系统和搜索引擎索引器提供有用的信息。|284087|换句话说，如果不正确地使用<abbr>标记，就会在没有理由的情况下向搜索引擎提供误导性的信息。|284088|entityMap^0|3|6|K|6|18|6|0|0|0|0|D|6|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|R|$]]

<p>You actually don't need to use the <code>&lt;abbr&gt;</code> tag to use the <code>title=</code> attribute. You can apply it to many things, including <code>&lt;span&gt;</code> tags.</p>

<p>Example of use:</p>

<pre><code>&lt;span title="This is my explanation here."&gt;Confusing text&lt;/span&gt;
</code></pre>

<p>From w3schools.com: By marking up abbreviations you can give useful information to browsers, spell checkers, translation systems and search-engine indexers.</p>

<p>In other words, you'll provide misleading information to search engines when there is no reason to, by incorrectly using the <code>&lt;abbr&gt;</code> tag.</p>


blocks|key|500833|text|如果你想让搜索引擎更好地理解你的内容，你应该使用标签来解释你网页中令人困惑的文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|500834|仅仅出于设计目的使用它并不是坏事，但是如果浏览器没有对它的支持，那么您的用户将受到影响。对于一般用途，简单的<span+title="Explanation">Abbr</span>效果更好；当然，您需要添加一些带有漂亮的CSS规则的样式;)|offset|length|style|CODE|500835|entityMap^0|0|1I|11|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>If you want the Search Engines to understand your content better, you should use the  tag for explaining confusing text inside your webpage.</p>

<p>It is not evil to use it only for designing purposes, but if a browser has no support for it your users will suffer. For general use, a simple <code>&lt;span title="Explanation"&gt;Abbr&lt;/span&gt;</code> works better; of course you will need to add some styles with a beautiful CSS rule ;)</p>


blocks|key|284219|text|HTML元素定义缩写或首字母缩写。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|284220|标记缩写可以为浏览器、翻译系统和搜索引擎提供有用的信息。|284221|喜欢|284222|<p>+<abbr+title="Unknown+Flying+Object">+UFO+</abbr>|code-block|syntax|javascript|284223|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>The HTML  element defines an abbreviation or an acronym.</p>

<p>Marking abbreviations can give useful information to browsers, translation systems and search-engines.</p>

<p>like </p>

<pre><code>&lt;p&gt; &lt;abbr title="Unknown Flying Object"&gt; UFO &lt;/abbr&gt;
</code></pre>


blocks|key|284257|text|Bootstrap+4将使用虚线边框底部和帮助光标设置HTML+元素的样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|284258|​|284259|<link+rel="stylesheet"+href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script+src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script+src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<p>You+can+use+<abbr+title="Cascading+Style+Sheets"+class="text-info+font-italic+initialism">CSS</abbr>+to+style+your+<abbr+title="HyperText+Markup+Language"+class="text-info+font-italic+initialism">HTML</abbr>.</p>|code-block|syntax|javascript|284260|284261|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Bootstrap 4 will style the HTML <a href="https://getbootstrap.com/docs/4.2/content/typography/#abbreviations" rel="nofollow noreferrer"><code>&lt;abbr&gt;</code></a> element with a dotted border bottom and help cursor:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;p&gt;You can use &lt;abbr title="Cascading Style Sheets" class="text-info font-italic initialism"&gt;CSS&lt;/abbr&gt; to style your &lt;abbr title="HyperText Markup Language" class="text-info font-italic initialism"&gt;HTML&lt;/abbr&gt;.&lt;/p&gt;</code></pre>
</div>
</div>
</p>


<p>Is it bad form to use the <code>&lt;abbr&gt;</code> tag to explain words that are not actually abbreviations but to produce a "hover over" explanation of content?</p>

<p>If it is, why is it bad form, and what is a good HTML alternative?</p>


Using HTML <abbr> tag to explain content

使用<abbr>标签来解释那些实际上不是缩写的单词，而是产生内容的“悬停”解释，这是不是不好的形式？如果是，为什么它是糟糕的形式，什么是一个好的HTML替代品？

问使用超文本标记语言<abbr>标签解释内容
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用超文本标记语言<abbr>标签解释内容EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用超文本标记语言<abbr>标签解释内容
EN