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


来源:网站优化外包 作者:坪山网站建设公司 日期:2019-01-17 浏览:

普通用户看到的网站,实际上包含了前端表现页面,和后端管理系统。诸如网站的设计、人机交互以及页面内容呈现等,都属于前端页面部分。而网站内容管理则属于后端,后端系统除去网站管理人员外,一般用户无法浏览接触,它包含了CMS系统和存放网站内容的数据库等。要系统讨论网站建设和网站制作知识,自然是一件复杂且耗时的事情,所以本文尝试从前端页面谈起,从html到JavaScript网站建设时应理清的三个层次谈起。那些在网站建设行业工作的人,把网站前端网站开发比作三条腿的凳子,其分别是网站开发的三个层次:包含了结构、样式和行为。
为什么要分隔这些层?
当您创建网页时,其结构应归属于HTML,视觉样式应归属于CSS,行为应归属于JavaScript脚本。分层的一些好处包括:
  • 共享资源:当您编写外部CSS或JavaScript文件时,站点上的任何页面都可以使用该文件。如果您需要对该文件进行更改,可能是为了更新网站上的某些排版样式,则使用该样式表的每个页面都将获得更改。没有必要单独编辑网站的每一页,这对一个大型网站来说可能是一项艰巨的任务。
  • 加载速度更快:一旦客户首次下载脚本或样式表,Web浏览器就会缓存该脚本或样式表。由于这些共享资源现在包含在浏览器的缓存中,因此在浏览器中请求的其他页面加载得更快,从而提高了总体页面速度和性能。
  • 方便团队协作:如果您有多个人同时在一个网站上工作,您可以使用允许检入和检出文件的系统,以确保每个人都在使用最新版本。如果样式和行为与结构文档交织在一起,则很难做到这一点。
  • 搜索引擎优化:对于搜索引擎来说,具有清晰的风格和结构分离的站点可能会表现得更好,因为它们可以更有效地抓取内容并理解页面,而不会陷入视觉样式和行为信息的泥潭。
  • 可访问性更强:外部样式表和脚本文件更便于用户和浏览器访问。诸如屏幕阅读器之类的软件可以更轻松地处理来自结构层的内容,而无需处理他们无论如何都不能使用的样式。
  • 兼容性更好:使用单独的开发层设计的站点更有可能是向后兼容的,因为不能使用特定CSS样式或禁用JavaScript的浏览器和设备仍然可以查看HTML。然后,您可以逐步增强您的网站与支持他们的浏览器的功能。
接下来,让我们一起梳理下并回顾下三个层次的知识点:
HTML:结构层
网页的结构或内容层是该网页的基础HTML代码。就像一栋房子的框架创建了一个坚实的基础,房子的其余部分是建立在上面一样,HTML的坚实基础创建了一个平台,在这个平台上可以创建一个网站。
结构层是存储客户想要阅读或查看的所有内容的地方。HTML结构可以由文本和图像组成,它包括访问者将用于在网站上导航的超链接。这是用符合标准的HTML5编码的,可以包括文本、图像和多媒体(视频、音频等)。站点内容的每个方面都应该在结构层中表示。这允许已关闭JavaScript或无法查看整个网站(如果不是全部功能)的CSS访问的客户。
CSS:样式图层
这一层规定了结构化HTML文档对站点访问者的外观,并由CSS(层叠样式表)定义。这些文件包含有关如何在Web浏览器中显示文档的样式说明。样式层通常包括根据屏幕大小和设备更改站点显示的媒体查询。网站的所有视觉样式都应位于外部样式表中。您可以使用多个样式表,但是请记住,每个CSS文件都需要一个HTTP请求来获取它,这会影响站点性能。
JavaScript:行为层
行为层使网站具有交互性,允许页面响应用户操作或根据一组条件进行更改。JavaScript是行为层最常用的语言,但CGI和PHP也非常常用。当开发人员提到行为层时,大多数指的是直接在Web浏览器中激活的层。您可以使用该层直接与DOM(DocumentObjectModel,文档对象模型)交互。在内容层中编写有效的HTML对于行为层中的DOM交互非常重要。在行为层中构建时,应该使用外部脚本文件,就像使用CSS一样,以优化速度和性能。
深圳市圣玺网络技术有限公司提供坪山区域的营销网站建设、品牌网站设计、企业网站改版制作、网站优化外包、网络营销推广、百度霸屏、SEO按天按效果付费等互联网广告服务!
本文由网上采集发布,不代表本站立场,转载联系作者并注明出处:http://www.webgaiban.cn/wzyh/1769.html

X

截屏,微信识别二维码

微信号:15019448256

(点击微信号复制,添加好友)

  打开微信