内容、体现和行为分离
内容、体现和行为分离是前端页面根本准则，下面对此准则做一下简略论述。
一.网页的组成局部：
运用于名目中的网页通常有如下几个局部造成：
（1）.经过HTML构造创建的构造与填写的文本，它是页面根本框架与本质内容。
（2）.CSS代码局部，担任对HTML构造和其中的文本内容停止丑化润色，也就是网页的体现局部。
（3）.JavaScript代码局部，担任对内容添加一些动态效果，可能称之为行为。
上述三个局部的联合可能使网页愈加美观有动感，交互才能也愈加强大，当你的网页也可能只要内容局部，不需求CSS与JavaScript，这当然是可能的，这是这样的网页很难满足实践名目标须要。
二.内容、体现和行为分离：
在文章起始地位已经提到过，内容、体现和行为分离是前端页面根本准则。
也就是将HTML构造与内部的文本内容、CSS代码和JavaScript分分开，首先看一段代码：
[HTML] 纯文本查看 复制代码运行代码
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="" /> <title>HELLO素材网</title> </head> <body> <div><b>HELLO素材网</b></div> <div style="color:red;font-size:14px">HELLO素材网一</div> <di style="color:blue" onclick="this.style.color='green'">HELLO素材网二</div> </body> </html>上面代码汇总，CSS与JavaScript代码嵌套进HTML中，并且对"HELLO素材网"加粗采用<b>标签。
如此简略的代码就让人感觉十分混乱，可能设想，假设代码量庞大的话，页面代码会如许臃肿。
修正页面的样式和行为十分艰巨，首先在HTML中找到对应的地位，然后再修正代码，程序员心坎应该是解体的。
并且对搜查引擎优化也很不好友，由于搜查引擎真正想要的是页面中的内容，而不是嵌套的CSS代码和js代码。
代码修正如下：
[HTML] 纯文本查看 复制代码运行代码
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="" /> <title>HELLO素材网</title> <style> .a{font-weight:bold} .b{ color:red; font-size:14px; } .c{color:blue} </style> <script> window.onload=function(){ let odiv=document.getElementsByClassName("c")[0]; odiv.onclick=function(){ this.style.color='green'; } } </script> </head> <body> <div class="a">HELLO素材网</div> <div class="b">HELLO素材网一</div> <div class="c">HELLO素材网二</div> </body> </html>上面代码在肯定完成三者分离效果，内容十分的繁复，无论对于程序员还是对于搜查引擎都比较敌对。
代码较少情况下，是不错抉择，假设代码量较大，页面依然会十分的臃肿，引入外部js和css文件是不错的抉择。
上述代码修正如下：
[HTML] 纯文本查看 复制代码运行代码
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="" /> <title>HELLO素材网</title> <link rel="stylesheet" href="css.css"> <script src="js.js"></script> </head> <body> <div class="a">HELLO素材网</div> <div class="b">HELLO素材网一</div> <div class="c">HELLO素材网二</div> </body> </html>上面代码仅仅是一个引入演示，并没有对应的js和css文件。
上述模式，假设要修正样式和行为，甚至不需求去触碰这些HTML代码，只有要去修正CSS和js文件即可。
次要规则如下：
（1）.CSS和js代码尽量不要嵌入HTML中。
（2）.页面中尽量保持一个js文件引入，假设有多个，可能在部署时紧缩为一个。
（3）.CSS代码尽能够不实用内联样式，代码量小可能利用内部样式表。
（4）.尽量利用css属性替代标签规定文本的体现，比如尽量避免利用<b>, <u>, <center>, <font>和<b>等。
关于内联样式与内部样式可能参阅HTML运用CSS代码模式一章节。
三.简略代码演示:
咱们规划页面的最终目标是在于用户有良好交互与视觉体验的前提下，可以做到页面以十分繁复的方式展如今开发者和搜查引擎面前，以便于代码开发维护和搜查引擎的抓取。
所以，不要引入一些特定的HTML 构造来处理一些视觉设计成绩，代码片段如下：
[HTML] 纯文本查看 复制代码
<span class="text-box"> <span class="square"></span> 后面是一个矩形框。 </span>上面经过一个span元素在文本后面减少一个矩形框。
CSS润色代码如下：
[CSS] 纯文本查看 复制代码
.text-box > .square { display: inline-block; width: 1rem; height: 1rem; background-color: red; }上面是对span矩形框的一个样式设置。
其实代码可能愈加简化，让HTML构造愈加简略，代码片段如下：
[HTML] 纯文本查看 复制代码
<span class="text-box"> 后面是一个矩形框。 </span>CSS润色代码如下：
[CSS] 纯文本查看 复制代码
.text-box:before { content: ""; display: inline-block; width: 1rem; height: 1rem; background-color: red; }经过伪元素抉择器在文本后面减少一个伪元素，然后设置其样式。
这样是不是HTML构造就愈加繁复了，当然并不能一律而论，依据详细需求。
