为什么所有网站都是以结构，风格和行为相结合的方式构建的
用来描述前端网站开发的一个常见类比是它就像一个三脚凳子。 这三条腿，也被称为网页开发的三层，是结构，风格和行为。
Web开发的三个层面
- 结构或内容层
- 网页的结构或内容层是该页面的底层HTML代码。 就像房子的框架为房子的其他部分建立了一个坚实的基础，HTML的坚实基础创建了一个可以创建网站的平台。 HTML结构可以由文本或图像组成，并且它包含访问者用于浏览该网站的超链接。
- 样式或表示层
- 行为
- 行为图层是网页的图层，可以响应不同的用户操作或根据一组条件对网页进行更改。 对于大多数Web页面，行为级别将是页面上的JavaScript交互。
为什么要分离图层？
在创建网页时，最好将图层尽可能分开。 应将结构分配给您的HTML，CSS的可视样式以及网站使用的任何脚本的行为。
分离图层的一些好处是：
- 共享资源
- 当您编写外部CSS文件或JavaScript文件时，您可以在网站上的任何页面上使用该文件。 如果您需要对该文件进行更改（也许更新网站上的某些印刷样式） ，那么每个使用该样式表的页面都将获得更改。 没有必要单独编辑网站的每个页面，对于大型网站来说，这可能是一件艰苦的事情。
- 更快的下载
- 一旦您的客户第一次下载了脚本或样式表，它将通过网页浏览器进行缓存。 由于这些共享资源现在包含在缓存中，因此浏览器中请求的其他页面加载速度更快，从而提高整体页面速度和性能。
- 多人团队
- 如果您有多个人同时在网站上工作，则可以使用用于“检入”和“检出”文件的系统，以确保团队中的每个人都能使用这些文件的最新版本。 如果风格和行为与结构文档交织在一起，这就更难做了。
- SEO
- 一个风格和结构明确分离的网站可能对搜索引擎更好，因为这些网站可以更有效地抓取该内容并理解该网页，而不会陷入视觉风格或行为信息之中。
- 无障碍
- 外部样式表和脚本文件更容易被人们和浏览器访问。 由于风格和结构的分离，像屏幕阅读器这样的软件可以更轻松地处理来自结构层的内容，而不会因为无法使用的样式而陷入困境。
- 向后兼容性
- 当您有一个设计了开发层的网站时，它将更向后兼容，因为无法使用某些CSS样式或禁用JavaScript的浏览器或设备仍可以查看HTML。 然后，您的网站可以通过支持它们的浏览器功能逐步增强。
HTML - 结构层
结构层是您存储客户想要阅读或查看的所有内容的地方。 这将用符合标准的HTML5编码，它可以包括文本和图像以及多媒体（视频，音频等）。 确保网站内容的每个方面都在结构图层中进行表示是非常重要的。 这允许关闭JavaScript的任何客户或者无法查看CSS仍然可以访问整个网站的客户，即使不是该网站的所有功能。
CSS - 样式图层
您将在外部样式表中为您的网站创建所有视觉样式。 您可以使用多个样式表，但请记住，每个单独的CSS文件都需要HTTP请求才能获取，从而影响网站的性能。
JavaScript - 行为层
JavaScript是行为层最常用的语言，但正如我之前提到的，CGI和PHP也可以生成网页行为。 也就是说，当大多数开发人员引用行为层时，他们指的是直接在Web浏览器中激活的图层 - 所以JavaScript几乎总是选择的语言。 您可以使用此图层直接与DOM或文档对象模型进行交互。 在内容层中编写有效的HTML对于行为层中的DOM交互也很重要。
在构建行为层时，应该像使用CSS一样使用外部脚本文件。 您可以获得使用外部样式表的所有优点。