Answers:
通过查看官方规范可以最好地解决这些问题:
转到规范:https : //www.w3.org/TR/html5/
搜索“ a
元素”:https : //www.w3.org/TR/html5/text-level-semantics.html#the-a-element
检查“内容属性”,其中列出了a
元素的所有允许的属性:
- 全局属性
href
target
download
rel
hreflang
type
检查链接的“全局属性”:https : //www.w3.org/TR/html5/dom.html#global-attributes
如您所见,alt
该a
元素上不允许使用该属性。
另外,您还会注意到该src
属性也不被允许。
通过验证HTML,将向您报告此类错误。
请注意,以上内容适用于HTML5,这是2014年W3C的HTML标准。在2016年,HTML 5.1成为了下一个HTML标准。查找允许的属性的工作方式相同。您将看到a
元素可以在HTML 5.1中具有另一个属性:rev
。
您可以在W3C的HTML当前状态中找到所有HTML规范(包括最新标准)。
对于锚点,应改为使用标题。alt不是a的有效属性。参见http://w3schools.com/tags/tag_a.asp
“标题”在浏览器中广泛实现。尝试:
<a href="#" title="hello">asf</a>
title
HTML5规范,它不正确(即使大多数浏览器都可以实现)。
不可以,任何HTML规范或草稿中alt
的a
元素都不允许使用属性(应为属性,而不是标签)。而且似乎没有任何浏览器认为它具有任何意义。
那么,为什么人们尝试使用它有点神秘,但是可能的解释是,他们正在模拟使用元素alt
属性img
,并希望在鼠标悬停时看到“工具提示”。这有两点错误。首先,每个元素都有自己的属性,这些属性在每个元素的规范中定义。其次,alt
在某些古老的浏览器中,属性的“工具提示”呈现是/是古怪的,甚至是错误,而不是期望的。该alt
属性是应该呈现给用户,当且仅当图像本身不提出,无论出于何种原因。
要创建“工具提示”,请改用title
属性,或者最好使用Google的“ CSS工具提示”,并使用您偏爱的基于CSS的工具提示(它们的特征是隐藏的“层”,在鼠标悬停时可以看到)。
如果您希望像alt属性一样应用描述性信息,则应将title属性用于锚标记。title属性在锚标记上有效,除了提供有关链接页面的信息外,没有其他目的。
W3C建议title属性的值应与链接文档的title值匹配,但这不是强制性的。
http://www.w3.org/MarkUp/1995-archive/Elements/A.html
另外,您可能还可以使用ARIA可访问性属性aria-label
(不要与混淆aria-labeledby
),并且可能会更有利。 aria-label
与alt属性对图像的功能相同,但对非图像元素的功能相同,并且由于您针对屏幕阅读器进行了优化,因此还包含一些优化措施。
http://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_labels_for_objects
但是,如果您想描述锚标记,通常使用rel或rev标记是适当的,但是您限于特定的值,因此不应将其用于人类可读的描述。
Rel用于描述链接页面与当前页面的关系。(例如,如果链接页面是逻辑系列中的下一个页面,则它将为rel = next)
rev属性本质上是rel属性的反向关系。修订版描述了当前页面与链接页面的关系。
您可以在此处找到有效值的列表:http : //microformats.org/wiki/existing-rel-values
我很惊讶地看到所有答案都说明alt
在a
tag中使用attribute 无效。这是绝对错误的。
HTML不会使用任何属性来阻止您:
<a your-custom-attribute="value">Any attribute can be used</a>
如果您问在alt
属性上使用语义是否正确,a
那么我会说:
没有。用于设置图像描述<img alt="image description" />
。
这取决于您对属性的处理方式。这是一个例子:
a::after {
content: attr(color); /* attr can be used as content */
display: block;
color: white;
background-color: blue;
background-color: attr(color); /* This won't work */
display: none;
}
a:hover::after {
display: block;
}
[hidden] {
display: none;
}
<a href="#" color="red">Hover me!</a>
<a href="#" color="red" hidden>In some cases, it can be used to hide it!</a>
同样,如果您询问使用自定义属性在语义上是否正确,那么我会说:
否。将data-*
属性用于其语义用途。
糟糕,2013年有人问了这个问题。
title
属性中的a
属性,是否可以在中使用这样的title
属性a
?