HTML中的属性和属性有什么区别？
在 jQuery 1.6.1 中进行更改之后，我一直在尝试定义 HTML 中的属性和属性之间的区别。
查看 jQuery 1.6.1 release notes 上的列表（靠近底部），似乎可以将 HTML 属性和属性分类如下：
属性：所有具有布尔值或 UA 计算的值，例如 selectedIndex。
属性：可以添加到既不是布尔值也不包含 UA 生成值的 HTML 元素的“属性”。
想法？
在编写 HTML 源代码时，您可以在 HTML 元素上定义属性。然后，一旦浏览器解析了你的代码，就会创建一个对应的 DOM 节点。该节点是一个对象，因此它具有属性。
例如，这个 HTML 元素：
<input type="text" value="Name:">
有 2 个属性（type 和 value）。
浏览器解析此代码后，将创建一个 HTMLInputElement 对象，该对象将包含数十个属性，例如：accept、accessKey、align、alt、attributes、autofocus、baseURI、checked、childElementCount、childNodes、children、classList、类名、客户端高度等。
对于给定的 DOM 节点对象，属性是该对象的属性，属性是该对象的 attributes 属性的元素。
当为给定的 HTML 元素创建 DOM 节点时，它的许多属性都与具有相同或相似名称的属性相关，但它不是一对一的关系。例如，对于这个 HTML 元素：
<input id="the-input" type="text" value="Name:">
相应的 DOM 节点将具有 id、type 和 value 属性（以及其他属性）：
id 属性是 id 属性的反射属性：获取属性读取属性值，设置属性写入属性值。 id 是一个纯粹的反射属性，它不会修改或限制值。
type 属性是 type 属性的反射属性：获取属性读取属性值，设置属性写入属性值。 type 不是纯粹的反射属性，因为它仅限于已知值（例如，输入的有效类型）。如果你有 ，那么 theInput.getAttribute("type") 给你 "foo" 但 theInput.type 给你 "text"。
相反， value 属性不反映 value 属性。相反，它是输入的当前值。当用户手动更改输入框的值时，value 属性会反映这种变化。因此，如果用户在输入框中输入“John”，那么： theInput.value // 返回“John” 而： theInput.getAttribute('value') // 返回“Name:” value 属性反映了当前的文本内容在输入框内，而 value 属性包含 HTML 源代码中 value 属性的初始文本内容。因此，如果您想知道文本框中当前的内容，请阅读该属性。但是，如果您想知道文本框的初始值是什么，请阅读属性。或者你可以使用 defaultValue 属性，它是 value 属性的纯粹反映： theInput.value // 返回 "John" theInput.getAttribute('value') // 返回 "Name:" theInput.defaultValue // 返回 "Name :"
有几个属性直接反映了它们的属性（rel、id），有些是名称略有不同的直接反映（htmlFor 反映了 for 属性，className 反映了 class 属性），许多反映其属性但有限制/修改（src、href、disabled、multiple）等。 The spec 涵盖了各种反射。
看了Sime Vidas的回答后，又搜索了一番，在angular docs里找到了一个非常直截了当、通俗易懂的解释。
HTML 属性与 DOM 属性 -------------------
属性由 HTML 定义。属性由 DOM（文档对象模型）定义。一些 HTML 属性与属性具有 1:1 的映射关系。 id 就是一个例子。一些 HTML 属性没有相应的属性。 colspan 就是一个例子。一些 DOM 属性没有对应的属性。 textContent 就是一个例子。许多 HTML 属性似乎映射到属性……但不是您想象的那样！最后一类是令人困惑的，除非你掌握了这个一般规则：属性初始化 DOM 属性，然后它们就完成了。属性值可以改变；属性值不能。例如，当浏览器渲染 时，它会创建一个对应的 DOM 节点，其 value 属性初始化为“Bob”。当用户在输入框中输入“Sally”时，DOM 元素值属性变为“Sally”。但是当您向输入元素询问该属性时，HTML value 属性保持不变：input.getAttribute('value') 返回“Bob”。 HTML 属性值指定初始值； DOM value 属性是当前值。
disabled 属性是另一个特殊的例子。默认情况下，按钮的 disabled 属性为 false，因此该按钮处于启用状态。当您添加 disabled 属性时，它的存在单独将按钮的 disabled 属性初始化为 true，因此按钮被禁用。添加和删除 disabled 属性会禁用和启用按钮。属性的值无关紧要，这就是为什么您不能通过编写 来启用按钮的原因。设置按钮的 disabled 属性可禁用或启用按钮。财产的价值很重要。 HTML 属性和 DOM 属性不是一回事，即使它们具有相同的名称。
colspan 属性具有 colSpan 属性。 ... 那么，现在哪个属性没有相关属性？
答案已经解释了如何以不同方式处理属性和属性，但我真的想指出这是多么疯狂。即使它在某种程度上是规范。
太疯狂了，让某些属性（例如 id、class、foo、bar）在 DOM 中只保留一种值，而某些属性（例如，checked、selected）保留两种值；即“加载时”的值和“动态状态”的值。 （难道 DOM 不应该完全代表文档的状态吗？）
绝对必要的是，两个输入字段（例如文本和复选框）的行为方式完全相同。如果文本输入字段不保留单独的“加载时”值和“当前，动态”值，为什么要勾选复选框？如果复选框的选中属性确实有两个值，为什么它的 class 和 id 属性没有两个值？如果您希望更改文本 *input* 字段的值，并且您希望 DOM（即“序列化表示”）发生变化并反映这种变化，那么您到底为什么不希望从输入字段在选中的属性上键入复选框？
“它是一个布尔属性”的区分对我来说没有任何意义，或者至少不是一个充分的理由。
checked 属性由 defaultChecked 属性表示（同样对于文本输入，value 属性由 defaultValue 属性表示）。需要第二个属性 checked 来表示复选框是否被选中，因为这是复选框功能的固有部分：它是交互式的并且可以更改（如果存在表单重置按钮，则重置为默认值）由用户以其他属性（例如 id）没有的方式。这与它是一个布尔属性无关。
forms 有一个 reset 方法，并且该 reset 方法需要从 HTML 属性中读取原始数据。
不同的 HTML 属性和属性：
在评估 HTML 中的区别之前，让我们先看看这些词的定义：
英文定义：
属性是指对象的附加信息。
属性描述对象的特征。
在 HTML 上下文中：
当浏览器解析 HTML 时，它会创建一个树形数据结构，它基本上是 HTML 的内存表示。它的树数据结构包含 HTML 元素和文本的节点。与此相关的属性和属性是以下方式：
属性是我们可以放入 HTML 以初始化某些 DOM 属性的附加信息。
属性是在浏览器解析 HTML 并生成 DOM 时形成的。 DOM 中的每个元素都有自己的一组属性，这些属性都是由浏览器设置的。其中一些属性的初始值可以由 HTML 属性设置。每当 DOM 属性发生影响渲染页面的变化时，页面将立即重新渲染
同样重要的是要认识到这些属性的映射不是一对一的。换句话说，并不是我们在 HTML 元素上赋予的每个属性都具有类似的命名 DOM 属性。
此外，不同的 DOM 元素具有不同的属性。例如，<input> 元素具有 <div> 属性中不存在的 value 属性。
例子：
让我们看下面的 HTML 文档：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- charset is a attribute -->
<meta name="viewport" content="width=device-width"> <!-- name and content are attributes -->
<title>JS Bin</title>
</head>
<body>
<div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes -->
</body>
</html>
然后我们在 JS 控制台中检查 <div>：
console.dir(document.getElementById('foo'));
我们看到以下 DOM 属性（chrome devtools，未显示所有属性）：
https://i.stack.imgur.com/0b6Hf.png
我们可以看到 HTML 中的属性 id 现在也是 DOM 中的 id 属性。 id 已由 HTML 初始化（尽管我们可以使用 javascript 更改它）。
我们可以看到 HTML 中的 class 属性没有对应的 class 属性（class 是 JS 中的保留关键字）。但实际上有 2 个属性，classList 和 className。
嗯，这些是由 w3c 指定的，什么是属性，什么是属性 http://www.w3.org/TR/SVGTiny12/attributeTable.html
但目前 attr 和 prop 并没有太大的不同，几乎相同
但他们更喜欢一些东西的道具
首选用法总结 .prop() 方法应该用于布尔属性/属性以及 html 中不存在的属性（例如 window.location）。所有其他属性（您可以在 html 中看到的属性）可以并且应该继续使用 .attr() 方法进行操作。
好吧，实际上，如果您使用 attr 或 prop 或两者都使用，则不必更改某些内容，两者都可以，但是我在自己的应用程序中看到 prop 在 atrr 没有的地方起作用，因此我采用了我的 1.6 应用程序 prop =)
更新我的回答这是来自 https://angular.io/guide/binding-syntax 的引用
HTML 属性和 DOM 属性
属性初始化 DOM 属性，您可以配置它们来修改元素的行为，但属性是 DOM 节点的功能。
一些 HTML 属性与属性具有 1:1 的映射关系；例如，身份证。
一些 HTML 属性没有对应的属性；例如，咏叹调-*。
一些 DOM 属性没有对应的属性；例如，文本内容。
请记住，HTML 属性和 DOM 属性是不同的东西，即使它们具有相同的名称。
示例 1：当浏览器呈现时，它会创建一个具有 value 属性的对应 DOM 节点，并将该值初始化为“Sarah”。
<input type="text" value="Sarah">
当用户在 中输入 Sally 时，DOM 元素的 value 属性变为 Sally。但是，如果您使用 input.getAttribute('value') 查看 HTML 属性值，您会看到该属性保持不变——它返回“Sarah”。
HTML 属性值指定初始值； DOM value 属性是当前值。
示例 2：禁用按钮 按钮的 disabled 属性默认为 false，因此该按钮处于启用状态。
添加 disabled 属性时，您将按钮的 disabled 属性初始化为 true ，这将禁用按钮。
<button disabled>Test Button</button>
添加和删除 disabled 属性会禁用和启用按钮。但是，该属性的值是无关紧要的，这就是为什么您不能通过编写 Still Disabled 来启用按钮的原因。
要控制按钮的状态，请改为设置 disabled 属性。
属性和属性比较 虽然您可以在技术上设置 [attr.disabled] 属性绑定，但值不同之处在于属性绑定必须是布尔值，而其对应的属性绑定取决于该值是否为空。考虑以下：
<input [disabled]="condition ? true : false">
<input [attr.disabled]="condition ? 'disabled' : null">
第一行使用 disabled 属性，使用布尔值。第二行使用 disabled 属性检查是否为空。
通常，使用属性绑定而不是属性绑定，因为布尔值易于阅读，语法更短，属性更高效。
关注公众号
不定期副业成功案例分享
for->htmlFor）以及类似地从属性中获取初始值但不反映它的属性列表（input.value）。我希望这会在像 github.com/Matt-Esch/virtual-dom 这样的库的源代码中的某个地方，但它并没有真正记录在案。