是否可以向HTML标记添加自定义属性，如下所示？
<tag myAttri="myVal" />Answers:
您可以修改！DOCTYPE声明（即DTD）以允许它，以便[XML]文档仍然有效：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
<!ATTLIST tag myAttri CDATA #IMPLIED>
]>#IMPLIED表示它是可选属性，或者您可以使用#REQUIRED，等等。
有关更多信息，请参见DTD属性。
<meta http-equiv="content-type" content="application/xhtml+xml" />。
data-。
您可以随意向元素添加自定义属性。但这会使您的文档无效。
在HTML 5中，您将有机会使用以开头的自定义数据属性data-。
|css中不允许这样做href，但这就是Google字体所必需的
不，这会破坏验证。
在HTML 5中，您可以/将能够添加自定义属性。像这样：
<tag data-myAttri="myVal" />在HTML5中：是：使用data-属性。
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul> 是的，您可以，您在问题本身中做到了：<html myAttri="myVal"/>。
var demo = document.getElementById("demo")
console.log(demo.dataset.myvar)
// or
alert(demo.dataset.myvar)
//this will show in console the value of myvar<div id="demo" data-myvar="foo">anything</div>是的，您可以做到！
具有下一个HTML标签：
<tag key="value"/>我们可以通过以下方式访问它们的属性JavaScript：
element.getAttribute('key'); // Getter
element.setAttribute('key', 'value'); // SetterElement.setAttribute()HTML如果不存在，则将属性放入标记中。因此，HTML如果要使用设置它，则无需在代码中声明它JavaScript。
key：可以是您希望属性使用的任何名称，而尚未用于当前标签。
value：始终是包含所需内容的字符串。
这是示例：
document.getElementsByTagName("html").foo="bar"这是另一个示例，如何将自定义属性设置为body标签元素：
document.getElementsByTagName('body')[0].dataset.attr1 = "foo";
document.getElementsByTagName('body')[0].dataset.attr2 = "bar";然后通过以下方式读取属性：
attr1 = document.getElementsByTagName('body')[0].dataset.attr1
attr2 = document.getElementsByTagName('body')[0].dataset.attr2您可以在DevTools的控制台中测试上述代码，例如
使用任何数据，我经常使用它们
<aside data-area="asidetop" data-type="responsive" class="top">data-*从JavaScript 获取价值？
另一种干净的方法将使文档保持有效，该方法是将所需的数据连接到另一个标签（例如id）中，然后使用split在需要时获取所需的内容。
<html>
<script>
function demonstrate(){
var x = document.getElementById("example data").querySelectorAll("input");
console.log(x);
for(i=0;i<x.length;i++){
var line_to_illustrate = x[i].id + ":" + document.getElementById ( x[i].id ).value;
//concatenated values
console.log("this is all together: " + line_to_illustrate);
//split values
var split_line_to_illustrate = line_to_illustrate.split(":");
for(j=0;j<split_line_to_illustrate.length;j++){
console.log("item " + j+ " is: " + split_line_to_illustrate[j]);
}
}
}
</script>
<body>
<div id="example data">
<!-- consider the id values representing a 'from-to' relationship -->
<input id="1:2" type="number" name="quantity" min="0" max="9" value="2">
<input id="1:4" type="number" name="quantity" min="0" max="9" value="1">
<input id="3:6" type="number" name="quantity" min="0" max="9" value="5">
</div>
<input type="button" name="" id="?" value="show me" onclick="demonstrate()"/>
</body>
</html>您可以添加，但随后还必须编写一行JavaScript代码，
document.createElement('tag');确保一切都准备就绪。我的意思是Internet Explorer :)
<tag ...>这里的“标签”一词显然意味着任何HTML标签。
好！您实际上可以通过将数据属性伪装成您想要的内容来创建一堆自定义HTML属性。
例如。
[attribute='value']{
color:red;
}<span attribute="value" >hello world</span>显然可以，但是这会使您的文档失效，除非您必须使用JScript，否则无需使用JScript来拥有自定义属性甚至元素，您只需要像对待新属性一样对待新的Formulated（custom）属性即可。 “数据”属性
记住 “无效”并不代表任何意思。该文档将始终加载正常。某些浏览器实际上仅通过DOCTYPE ......的存在来验证您的文档，您实际上知道我的意思。
您可以执行以下操作从JavaScript中提取所需的值而不是属性：
<a href='#' class='click'>
<span style='display:none;'>value for JavaScript</span>some text
</a><input type="hidden" value="...">。但是，请考虑一下，放入各种属性的数据类型与可能放入隐藏字段的数据之间的差异。为了维护一个元数据而将<span>（所有事物）隐藏起来<a>并不是一个好办法。它对您的站点来说是特殊的，并且非常依赖JS（优雅的降级功能，人员）。