从html到JavaScript网站建设时应理清的三个层次

普通用户看到的网站，实际上包含了前端表现页面，和后端管理系统。诸如网站的设计、人机交互以及页面内容呈现等，都属于前端页面部分。而网站内容管理则属于后端，后端系统除去网站管理人员外，一般用户无法浏览接触，它包含了CMS系统和存放网站内容的数据库等。要系统讨论网站建设和网站制作知识，自然是一件复杂且耗时的事情，所以本文尝试从前端页面谈起，从html到JavaScript网站建设时应理清的三个层次谈起。那些在网站建设行业工作的人，把网站前端网站开发比作三条腿的凳子，其分别是网站开发的三个层次：包含了结构、样式和行为。

当您创建网页时，其结构应归属于HTML，视觉样式应归属于CSS，行为应归属于JavaScript脚本。分层的一些好处包括：

• 共享资源：当您编写外部CSS或JavaScript文件时，站点上的任何页面都可以使用该文件。如果您需要对该文件进行更改，可能是为了更新网站上的某些排版样式，则使用该样式表的每个页面都将获得更改。没有必要单独编辑网站的每一页，这对一个大型网站来说可能是一项艰巨的任务。

• 加载速度更快：一旦客户首次下载脚本或样式表，Web浏览器就会缓存该脚本或样式表。由于这些共享资源现在包含在浏览器的缓存中，因此在浏览器中请求的其他页面加载得更快，从而提高了总体页面速度和性能。

• 方便团队协作：如果您有多个人同时在一个网站上工作，您可以使用允许检入和检出文件的系统，以确保每个人都在使用最新版本。如果样式和行为与结构文档交织在一起，则很难做到这一点。

• 搜索引擎优化：对于搜索引擎来说，具有清晰的风格和结构分离的站点可能会表现得更好，因为它们可以更有效地抓取内容并理解页面，而不会陷入视觉样式和行为信息的泥潭。

• 可访问性更强：外部样式表和脚本文件更便于用户和浏览器访问。诸如屏幕阅读器之类的软件可以更轻松地处理来自结构层的内容，而无需处理他们无论如何都不能使用的样式。

• 兼容性更好：使用单独的开发层设计的站点更有可能是向后兼容的，因为不能使用特定CSS样式或禁用JavaScript的浏览器和设备仍然可以查看HTML。然后，您可以逐步增强您的网站与支持他们的浏览器的功能。

接下来，让我们一起梳理下并回顾下三个层次的知识点：

网页的结构或内容层是该网页的基础HTML代码。就像一栋房子的框架创建了一个坚实的基础，房子的其余部分是建立在上面一样，HTML的坚实基础创建了一个平台，在这个平台上可以创建一个网站。

结构层是存储客户想要阅读或查看的所有内容的地方。HTML结构可以由文本和图像组成，它包括访问者将用于在网站上导航的超链接。这是用符合标准的HTML5编码的，可以包括文本、图像和多媒体(视频、音频等)。站点内容的每个方面都应该在结构层中表示。这允许已关闭JavaScript或无法查看整个网站(如果不是全部功能)的CSS访问的客户。

这一层规定了结构化HTML文档对站点访问者的外观，并由CSS(层叠样式表)定义。这些文件包含有关如何在Web浏览器中显示文档的样式说明。样式层通常包括根据屏幕大小和设备更改站点显示的媒体查询。网站的所有视觉样式都应位于外部样式表中。您可以使用多个样式表，但是请记住，每个CSS文件都需要一个HTTP请求来获取它，这会影响站点性能。

行为层使网站具有交互性，允许页面响应用户操作或根据一组条件进行更改。JavaScript是行为层最常用的语言，但CGI和PHP也非常常用。当开发人员提到行为层时，大多数指的是直接在Web浏览器中激活的层。您可以使用该层直接与DOM(DocumentObjectModel，文档对象模型)交互。在内容层中编写有效的HTML对于行为层中的DOM交互非常重要。在行为层中构建时，应该使用外部脚本文件，就像使用CSS一样，以优化速度和性能。