09-阐述内容、样式和行为分离

这是面试时候可能遇到的一道题

---

一、先说观点

• 我认为内容、样式和行为分离，根据W3C标准来说，就是html负责内容，CSS负责样式，JS负责行为。

二、提供论据

• 类似这样的题目，如果正面不好回答的情况下，可以尝试反着回答，如人为什么要吃饭，答：如果人不吃饭就会饿死！

---

1. 假设html控制样式，如图
   
   

   html控制样式

• 用标签把文字居中，然后用加粗文字。
• 这样的写法把原本简单的逻辑结构变得复杂话，不利于代码的维护。
• 如果html也负责样式的话，使得内容的结构有很多无用的标签，有的标签表示内容，有的标签表示样式，这样我就很难区分内容的逻辑结构

2. 假设用CSS写内容
   
   

   CSS写内容

• 这样写会导致用户选取不到文字
• 而且JS取不到这里的文本内容
• 假如用CSS控制行为，那么CSS里面有很复杂的逻辑，会导致CSS很慢，最终影响页面加载速度

3. 假设用JS控制样式

• 还没写$div.hiden()之前
  
  
• 写了$div.hiden()之后，文字就被隐藏
  
  
• 加上$div.show()文字又出现
  
  
  
  那么问题来了
• 在$div.show()之后，div的属性为display: block;，那么有可能在$div.hiden()之前,原本的div标签属性是display: flex;，经过$div.show()改变了属性的值为block，那么页面的flex布局就会全局炸掉。

三、总结

---

• 为了以后改版时更方便，直接修改样式，而不动HTML的内容。更方便易于阅读样式和内容，便于项目的维护。
• 网页的内容直接暴露在搜索引擎面前，这样有利于搜索引擎抓取网页的内容。