在 HTML 里面的 Style 属性他是一个字符串，同时我们可以使用 getAttribute 和 setAttribute 去取得和设置这个属性。但是如果我们用这个 Style 属性，我们就会得到一个 key 和 vaule 的结构。
Href 属性在 HTML 中 href 的 attribute 和 property 的意思就是非常相似的。但是它的 property 是经过 resolve 过的 url。
比如我们的 href 的值输入的是 “//m.taobao.com”。这个时候前面的 http 或者是 https 协议是根据当前的页面做的，所以这里的 href 就需要编译一遍才能响应当前页面的协议。
做过 http 到 https 改造的同学应该都知道，在让我们的网站使用 https 协议的时候，我们需要把所有写死的 http 或者 https 的 url 都要改成使用 // 。
所以在我们 href 里面写了什么就出来什么的，就是 attribute。如果是经过 resolve 的就是我们的 property 了。
<a href="https://m.taobao.com" ></a> <script> var a = document.getElementByTagName('a'); // 这个获得的结果就是 "http://m.taobao.com"， 这个 url 是 resolve 过的结果 // 所以这个是 Property a.href; // 而这个获得的是 "https://m.taobao.com", 跟 HTML 代码中完全一致 // 所以这个是 Attribute a.getAttribute('href'); </script>
在上面的代码中我们也可以看到，我们可以同时访问 property 和 attribute。它们的语义虽然非常的接近，但是它们不是一样的东西。
不过如果我们更改了任何一方，都会让另外一方发生改变。这个是需要我们去注意的现象。
Input 和 value这个是最神奇的一对，而 value 也是特别的坑。
我们很多都以为 property 和 attribute 中的 value 都是完全等效的。其实不是的，这个 attribute 中的 input 的 value 相当于一个 value 的默认值。不论是用户在 input 中输入了值，还是开发者使用 JavaScript 对 input 的 value 进行赋值，这个 input 的 attribute 是不会跟着变的。
而在 input 的显示上是会优先显示 property，所以 attribute 中的 value 值就相当于一个默认值而已。这就是一个非常著名的坑，早期同学们有使用过 JQuery 的话，我们会觉得里面的 prop 和 attr 是一样的，没想到在 value 这里就会踩坑。
所以后来 JQuery 库就出了一个叫 val 的方法，这样我们就不需要去想 attribute 还是 property 的 value，直接用它提供的 val 取值即可。
这里一方面是一起增强一下 HTML 的 property 和 attribute 的知识。另一方面就是让我们认识到，就算是非常顶级的计算机专家设计的标签系统，也出现两个差不多的属性不等效的问题。那么如果让我们去设计一个标签系统，我们会让 property 和 attribute 等效还是不等效呢？ 等学习完整个组件化的知识后，我们一起来回答一下这个问题。
如何设计组件状态这里我们来分析一下，property、attribute、state、config 在组件设计中都有什么区别。
这里 Winer 老师给我们整理了一个表格，分成了四个场景：
Markup set —— 用标签去设置
JavaScript Set —— 使用 JavaScript 代码去设置
JavaScript Change —— 使用 JavaScript 代码去改变
User Input Change —— 终端用户的输入而改变
Markup set
JavaScript set
JavaSscript Change
User Input Change
❌
✅
✅
❓
property
✅
✅
✅
❓
attribute
❌
❌
❌
✅
state
❌
✅
❌
❌
config
那么我们一个一个来讲述一下：
Property
❌ 它是不能够被 markup 这种静态的声明语言去设置的
✅ 但是它是可以被 JavaScript 设置和改变的
❓ 大部分情况下 property 是不应该由用户的输入去改变的，但是小数情况下，可能是来源于我们的业务逻辑，才有可能会接受用户输入的改变
Attribute
❓ 用户的输入就不一定会改变它，与 Property 同理
✅ 是可以由 markup，JavaScript 去设置的，同时也是可以被 JavaScript 所改变的
State