Question

它们是html图像中的属性和alt之间的任何区别。如果有的话我怎么显示它们。这个问题的例子 “在.mdc-card__primary-action DIV中，创建一个具有data-card-type属性的IMAGE，并将其SRC设置为https://i.stack.imgur.com/YX1WX.png。该IMAGE将用于显示基于系列的信用卡类型用户输入的数字”如何显示图像属性“ DATA-CARD-TYPE”。

我已经做到了，但这给了我一个错误 <div class="mdc-card__primary-action"> <img src="http://placehold.it/120x60.png?text=Card" alt="data-card-type"/> </div>

Answer 1

alt和data-card-type（以及src）都是属性。

<img 
    src="http://placehold.it/120x60.png?text=Card"
    alt="A text replacement for the image"
    data-card-type="some value">

alt和data-card-type彼此不能替代。它们具有不同的含义。

alt用于为图像提供文本替换（以使看不见图像的用户-例如，因为他们的网络太不可靠，或者他们依赖屏幕阅读器，或者他们是搜索引擎索引漫游器-可以了解图像传达的信息）。已故的艾伦·弗拉维尔（Alan Flavell）写道some excellent advice on writing alt text。

data-*属性没有标准含义。提供它们是为了使网站可以在HTML文档中嵌入有关元素的自定义数据。该网站自己的JavaScript最常使用此功能。因此，我们无法知道data-card-type属性的用途，我们不了解上下文。（顾名思义，它虽然与替代文本并不遥远）。

HTML图像中属性和替代项之间的区别

1 个答案: