在编写HTML源代码时，可以在HTML元素上定义属性。然后，一旦浏览器解析了您的代码，就会创建相应的DOM节点。该节点是一个对象，因此它具有属性。

例如，这个HTML元素:

<input type="text" value="Name:">

有2个属性(类型和值)。

一旦浏览器解析了这段代码，一个HTMLInputElement对象将被创建，这个对象将包含几十个属性，如:accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight等。

对于给定的DOM节点对象，属性是该对象的属性，而属性是该对象的attributes属性的元素。

为给定的HTML元素创建DOM节点时，它的许多属性与具有相同或相似名称的属性相关，但这不是一对一的关系。例如，对于这个HTML元素:

<input id="the-input" type="text" value="Name:">

相应的DOM节点将具有id、类型和值属性(以及其他属性):

The id property is a reflected property for the id attribute: Getting the property reads the attribute value, and setting the property writes the attribute value. id is a pure reflected property, it doesn't modify or limit the value. The type property is a reflected property for the type attribute: Getting the property reads the attribute value, and setting the property writes the attribute value. type isn't a pure reflected property because it's limited to known values (e.g., the valid types of an input). If you had <input type="foo">, then theInput.getAttribute("type") gives you "foo" but theInput.type gives you "text". In contrast, the value property doesn't reflect the value attribute. Instead, it's the current value of the input. When the user manually changes the value of the input box, the value property will reflect this change. So if the user inputs "John" into the input box, then: theInput.value // returns "John" whereas: theInput.getAttribute('value') // returns "Name:" The value property reflects the current text-content inside the input box, whereas the value attribute contains the initial text-content of the value attribute from the HTML source code. So if you want to know what's currently inside the text-box, read the property. If you, however, want to know what the initial value of the text-box was, read the attribute. Or you can use the defaultValue property, which is a pure reflection of the value attribute: theInput.value // returns "John" theInput.getAttribute('value') // returns "Name:" theInput.defaultValue // returns "Name:"

有几个属性直接反映了它们的属性(rel, id)，一些是名称略有不同的直接反映(htmlFor反映了for属性，className反映了class属性)，许多反映了它们的属性，但有限制/修改(src, href, disabled, multiple)，等等。该规范涵盖了各种反射。

更新我的答案，这是来自https://angular.io/guide/binding-syntax的引用

HTML属性和DOM属性

属性初始化DOM属性，您可以配置它们来修改元素的行为，但属性是DOM节点的特性。

一些HTML属性与属性有1:1的映射关系;例如，id。 一些HTML属性没有相应的属性;例如aria-*。 一些DOM属性没有相应的属性;例如，textContent。

请记住，HTML属性和DOM属性是不同的东西，即使它们具有相同的名称。

例1:an 当浏览器呈现时，它会创建一个具有value属性的相应DOM节点，并将该值初始化为“Sarah”。

<input type="text" value="Sarah">

当用户将Sally输入到时，DOM元素值属性就变成了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。禁用]属性绑定，值的不同在于属性绑定必须是一个布尔值，而其对应的属性绑定依赖于该值是否为null。考虑以下几点:

<input [disabled]="condition ? true : false">
<input [attr.disabled]="condition ? 'disabled' : null">

第一行使用了disabled属性，使用了一个布尔值。第二行使用disabled属性检查是否为空。

通常，使用属性绑定而不是属性绑定，因为布尔值更容易读取，语法更短，属性更性能。

在阅读了Sime Vidas的回答后，我又搜索了更多，在angular文档中找到了一个非常直接易懂的解释。

HTML属性vs. DOM属性 -------------------------------

Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model). A few HTML attributes have 1:1 mapping to properties. id is one example. Some HTML attributes don't have corresponding properties. colspan is one example. Some DOM properties don't have corresponding attributes. textContent is one example. Many HTML attributes appear to map to properties ... but not in the way you might think! That last category is confusing until you grasp this general rule: Attributes initialize DOM properties and then they are done. Property values can change; attribute values can't. For example, when the browser renders <input type="text" value="Bob">, it creates a corresponding DOM node with a value property initialized to "Bob". When the user enters "Sally" into the input box, the DOM element value property becomes "Sally". But the HTML value attribute remains unchanged as you discover if you ask the input element about that attribute: input.getAttribute('value') returns "Bob". The HTML attribute value specifies the initial value; the DOM value property is the current value.

The disabled attribute is another peculiar example. A button's disabled property is false by default so the button is enabled. When you add the disabled attribute, its presence alone initializes the button's disabled property to true so the button is disabled. Adding and removing the disabled attribute disables and enables the button. The value of the attribute is irrelevant, which is why you cannot enable a button by writing <button disabled="false">Still Disabled</button>. Setting the button's disabled property disables or enables the button. The value of the property matters. The HTML attribute and the DOM property are not the same thing, even when they have the same name.

不同的HTML属性和属性:

在评估它们在HTML中的区别之前，让我们先看看这些词的定义:

英语的定义:

属性是指对象的附加信息。 属性描述对象的特性。

在HTML上下文中:

当浏览器解析HTML时，它创建了一个树数据结构，它基本上是HTML的内存表示。它的树数据结构包含的节点是HTML元素和文本。属性和属性与此相关的方式如下:

属性是我们可以放入HTML中的附加信息 初始化某些DOM属性。 属性在浏览器解析HTML并生成DOM时形成。DOM中的每个元素都有自己的一组属性，这些属性都是由浏览器设置的。其中一些属性的初始值可以由HTML属性设置。每当DOM属性发生变化并对所呈现的页面产生影响时，页面将立即重新呈现

认识到这些属性的映射不是1对1也是很重要的。换句话说，并不是HTML元素上的每个属性都有类似的命名DOM属性。

此外，不同的DOM元素具有不同的属性。例如，<input>元素的value属性在<div>属性中是没有的。

例子:

让我们以以下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，不是所有的属性):

我们可以看到，HTML中的属性id现在也是DOM中的id属性。id已经被HTML初始化(尽管我们可以用javascript改变它)。 我们可以看到，HTML中的class属性没有相应的class属性(class是JS中的保留关键字)。实际上有两个属性，classList和className。

答案已经解释了属性和属性的不同处理方式，但我真的想指出这是多么疯狂。即使它在某种程度上是规范。

有些属性(例如id, class, foo, bar)在DOM中只保留一种值，而有些属性(例如checked, selected)保留两种值，这是疯狂的;即“加载时”的值和“动态状态”的值。(DOM不应该代表文档的全部状态吗?)

It is absolutely essential, that two input fields, e.g. a text and a checkbox behave the very same way. If the text input field does not retain a separate "when it was loaded" value and the "current, dynamic" value, why does the checkbox? If the checkbox does have two values for the checked attribute, why does it not have two for its class and id attributes? If you expect to change the value of a text *input* field, and you expect the DOM (i.e. the "serialized representation") to change, and reflect this change, why on earth would you not expect the same from an input field of type checkbox on the checked attribute?

“这是一个布尔属性”的区别对我来说没有任何意义，或者至少不是一个充分的理由。

在编写HTML源代码时，可以在HTML元素上定义属性。然后，一旦浏览器解析了您的代码，就会创建相应的DOM节点。该节点是一个对象，因此它具有属性。

例如，这个HTML元素:

<input type="text" value="Name:">

有2个属性(类型和值)。

一旦浏览器解析了这段代码，一个HTMLInputElement对象将被创建，这个对象将包含几十个属性，如:accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight等。

对于给定的DOM节点对象，属性是该对象的属性，而属性是该对象的attributes属性的元素。

为给定的HTML元素创建DOM节点时，它的许多属性与具有相同或相似名称的属性相关，但这不是一对一的关系。例如，对于这个HTML元素:

<input id="the-input" type="text" value="Name:">

相应的DOM节点将具有id、类型和值属性(以及其他属性):

The id property is a reflected property for the id attribute: Getting the property reads the attribute value, and setting the property writes the attribute value. id is a pure reflected property, it doesn't modify or limit the value. The type property is a reflected property for the type attribute: Getting the property reads the attribute value, and setting the property writes the attribute value. type isn't a pure reflected property because it's limited to known values (e.g., the valid types of an input). If you had <input type="foo">, then theInput.getAttribute("type") gives you "foo" but theInput.type gives you "text". In contrast, the value property doesn't reflect the value attribute. Instead, it's the current value of the input. When the user manually changes the value of the input box, the value property will reflect this change. So if the user inputs "John" into the input box, then: theInput.value // returns "John" whereas: theInput.getAttribute('value') // returns "Name:" The value property reflects the current text-content inside the input box, whereas the value attribute contains the initial text-content of the value attribute from the HTML source code. So if you want to know what's currently inside the text-box, read the property. If you, however, want to know what the initial value of the text-box was, read the attribute. Or you can use the defaultValue property, which is a pure reflection of the value attribute: theInput.value // returns "John" theInput.getAttribute('value') // returns "Name:" theInput.defaultValue // returns "Name:"

有几个属性直接反映了它们的属性(rel, id)，一些是名称略有不同的直接反映(htmlFor反映了for属性，className反映了class属性)，许多反映了它们的属性，但有限制/修改(src, href, disabled, multiple)，等等。该规范涵盖了各种反射。