是所有HTML标签都支持name属性,还是只有少数标签可以使用name属性?此外,是否所有标签都支持 title 属性?
我问的原因是因为我需要在这些属性中存储有关当前元素的信息。下面是一个示例:
<img src="example-image.jpg" alt="Example Image" title="Additional Information" name="Even more info"/>
<div class="example-word" title="Information about this tag" name="More information about this tag">Word</div>
我存储在属性中的这些附加信息将通过javascript获取。
根据MDN name
正式仅适用于以下元素: <a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, and <textarea>
- 基本上是表单字段,链接和插件对象。
如果要使用元素存储其他信息(元数据),则应查看data-
属性。这是HTML5的推荐方法,但也适用于较旧的浏览器。这也意味着您可以根据需要存储尽可能多的不同额外数据。
<img src="example-image.jpg" alt="Example Image" title="Additional Information"
data-name="Even more info" data-other-info="Some other information" />
<div class="example-word" title="Information about this tag"
data-name="More information about this tag">Word</div>
您可以添加自己的标签并通过javascript读取它们。这些标签必须以data-
开头:
<div data-whatever="Information the world needs"></div>
标签不"支持"任何东西。HTML 规范定义哪些属性对哪些元素有效。对于 name
属性和 title
属性,这取决于 HTML 版本。
浏览器不太关心规格。如果您的标记包含属性 foo=bar
,它们很乐意将foo
包含在元素节点的 attributes
属性中。它们可能会也可能不会使foo
成为节点本身的属性。对于title
来说,这种情况发生了,即"现代浏览器支持所有元素的title
",这也意味着大多数浏览器将该属性实现为"工具提示",这是可用性的噩梦,但我跑题了。对于name
,某些元素(但不是全部)都会发生这种情况,对于表单内的控件,该属性也具有特殊含义(它会影响控件的值是否包含在表单数据中的问题)。
存储数据的推荐方法是使用 data-*
属性,因为它们保证在脚本或样式表中指定的内容之外没有任何意义和效果。
您确实应该使用 data-
属性存储它,但您可以随时使用 name
并像这样访问它:
obj.getAttribute('name'); //Pure JavaScript
$(obj).attr('name'); //jQuery
但实际上,坚持data-
.