前端设计原则 之 结构表现原则

前端三大基础，HTML+CSS+JavaScript：HTML 为结构，CSS 为表现，JavaScript 为行为。

前端设计需要遵循结构、表现、行为分离原则，此处的分离说的不仅仅是将文件分开来放置！！！

分离不单单是一种方法，更是一种思想，并不是网页设计最初就需要分离，而是随着技术满满发展，演变出更为复杂的需求，使得分离的原则必不可少。

分离原则：首先将重点放在 HTML 结构和语义化上面，其次考虑 CSS，JS 等，以便于后期维护和分析。

HTML 结构和语义化就相当于房子的结构，一个合理的结构，才能经得起后期的装修（当然房屋结构也有样式～但是结构一定是最基本的）。CSS 就相当于对房屋进行的后期装修。

一个网页如何能做到换肤效果呢？一定是 HTML 样式不变，改变 CSS 样式。所以如何来布局好网页？

一句话总结：

一般遵循原则: 先考虑文字内容和内容模块之间的关系，重点放在编写 HTML 结构和语义化，然后考虑布局和表现形式。

对同一个页面，会有不同的制作思路和方法，分为初级中级高级。

1. 初级的制作方式：div 层层嵌套
   1. 将页面切块
   2. 向不同的块中添加内容
   3. 从上到下编写各自的 CSS 样式
2. 中级的制作方式：去掉多余的 div，进行简化
   1. 将页面切块（有些单独的标签，会单独保留，不多切块）
   2. 向不同的块中添加内容（与初级不同的是，没有多余的容器）
   3. 从上到下编写各自的 CSS 样式（没有多余的容器，稍微简洁一些）
3. 高级的制作方式：最大化的简化 html 的结构
   1. 按照结构语义编写 HTML，不切块。
   2. 直接进行 CSS 样式设置，减少 HTML 与 CSS 的契合度。

BTW：很多复杂的网页，如果说不分块，会导致 CSS 样式过于复杂，所以我觉得，这种方式，适合在每个小的模块中间使用。小的模块内部，先编写结构，减少 HTML 与 CSS 契合度，这样大的模块之间的契合度也会随之减弱。

放在最后

如果您喜欢我的文章，拜托点赞+收藏+关注，博主会根据大家喜好来推出相关系列文章～

更多精彩内容也可以访问我的博客Aelous-BLog

本文地址：https://blog.csdn.net/Aelous_dp/article/details/107531110