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