什么是结构，样式，行为相分离？这样做的好处是什么？
结构就像是一颗大树的主体（HTML），样式就是树枝部分（CSS），行为就是外在因素（JS）。
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #i1{ 8 width: 300px; 9 height: 500px; 10 background-color: orangered; 11 margin: 0 auto; 12 } 13 </style> 14 </head> 15 <body> 16 <div id="i1">test div 1</div> 17 18 19 <script> 20 var tag = document.getElementById(‘i1‘); 21 tag.onclick = function () { 22 tag.style.backgroundColor = ‘red‘; 23 } 24 </script> 25 </body> 26 </html>
好处是：尽量减小文件的大小，提高页面加载速度。提高代码的重用性，减少多余代码，提高开发速度。提高代码的结构性，组织好代码结构更利于维护和应变特殊情况。
什么是语义化？为什么要语义化？
用最恰当的标签来标记内容就是语义化。
好处：如果在没有CSS的情况下，页面也能呈现出很好的内容结构和代码结构，便于团队的开发和维护，更具可读性。
什么是CSS？它的特点有哪些？
CSS：级联样式表，也称为“风格样式表”。
CSS可以让风格和页面分离，给相同的结构以不同的样式。使页面文件更易于阅读，代码更加简洁。利于搜索引擎优化，方便维护。
原文：https://www.cnblogs.com/sunhaobin/p/12007236.html