在HTML中，属性(property)和特性(attribute)通常是一组有关元素的描述和规则，学习它们的不同点会有助于我们更好的理解和使用HTML。在本文中，我们将详细解说这两种不同属性类型的区别和用法。
一、属性(Property)是什么？
属性是指HTML标签中元素对象的属性值，可以通过JavaScript设置或获取。例如：
<input type="text" name="username" id="username">
在上面的代码中，type、name、id等都是input元素对象的属性值，可以通过JavaScript进行操作。
在HTML中，属性可以给元素附带不同的属性值，如：class、readonly、value等。可以使用以下形式来访问它们：
//获取属性
element.getAttribute("attrName")
//设置属性
element.setAttribute("attrName", "attrValue")
例如：
<input type="text" id="txtUsername">
<script>
//设置属性
document.getElementById("txtUsername").setAttribute("value", "Tom");
//获取属性
var value = document.getElementById("txtUsername").getAttribute("value");
alert(value); //输出"Tom"
</script>
二、特性(Attribute)是什么？
特性是HTML标签中元素对象的特性，指的是元素在HTML中的表现形式。可以通过修改HTML文档中的属性来改变特性的值。在HTML里，特性值分为布尔型和非布尔型。
比如在以下代码中，class和readonly就是特性：
<input type="text" class="form-control" readonly>
除此之外，在HTML中还有几个默认的特性。例如：href、src等指向URL的特性，style用于设置CSS
三、Property vs Attribute的区别
1、属性和特性是如何不同的？
属性和特性的本质区别是一个是JavaScript的编程接口，另一个是HTML的文档级别的描述。在更细致的区分上，属性是指HTML标签中的元素属性对象，而特性表示在HTML文档中所声明的元素的特征，包括这个元素的命名空间URI等信息。
属性是通过编程界面来进行设置和访问的，而特性，作为HTML文档的一部分，有时施加了一些语义规则内容，以确保文档编写的正确性。
2、Property和Attribute之间存在什么联系？
在大多数情况下，属性和特性是相同的，但是有时并不是这样。例如：<input type="checkbox" checked>，在HTML中checked就是特性，但在JavaScript中则是属性。所以，我们需要使用get/setAttribute()或property进行访问。
3、属性和特性操作应该如何选择？
对于多数情况下，属性和特性是相同的值，不同的是它们的设置方式。属性是通过JS及DOM进行访问和设置，而特性在HTML中声明。所以在选择时，需要了解操作属性和特性的最佳途径，以便于在不同情况下进行使用。
需要注意的是，在修改DOM元素的特性或属性时，应该考虑到与文档级属性之间的差异。因为属性是一种JavaScript对象的表现形式，而特性是文档中HTML元素的表现形式。因此，在使用set/getAttribute时要注意属性的正确性，不要给特性添加属性，也不要给属性添加特性（如将"checked"当做属性而非特性）。正确的做法应该是使用property操作属性，使用Attribute操作特性。
四、属性和特性的代码演示：
1、操作特性
<input type="text" id="txtUsername">
<script>
//设置特性
document.getElementById("txtUsername").readOnly = true;
//获取特性
var readOnly = document.getElementById("txtUsername").readOnly;
alert(readOnly); //输出"true"
</script>
2、操作属性
<input type="checkbox" id="chkBox" checked>
<script>
//设置属性
document.getElementById("chkBox").checked = false;
//获取属性
var checkedValue = document.getElementById("chkBox").checked;
alert(checkedValue); //输出"false"
</script>
3、通过get/setAttribute操作特性
<input type="text" id="txtUsername">
<script>
//设置特性
document.getElementById("txtUsername").setAttribute("readonly", "readonly");
//获取特性
var readOnlyAttr = document.getElementById("txtUsername").getAttribute("readonly");
alert(readOnlyAttr); //输出"readonly"
</script>
4、通过property操作属性
<input type="checkbox" id="chkBox" checked>
<script>
//设置属性
document.getElementById("chkBox").checked = false;
//获取属性
var checkedProp = document.getElementById("chkBox").checked;
alert(checkedProp); //输出"false"
</script>
总结：
本文详细讲解了属性和特性的概念和区别，以及操作不同的最佳途径。特别是我们需要注意的是，属性和特性不是相互可替换的概念，但在某些情况下可能会相同。正确地操作属性和特性是编写可靠网页的重要一步。
