主要从事企业应用服务端层(Java EE、Spring框架)
现在,我正在尝试了解(只是了解,而不是掌握)客户端技术。在书籍和在线资料中阅读有关 HTML 和 CSS 的内容)。我想研究的下一个技术是 java-script。
我很难理解我们如何将所有这些技术结合起来制作一个“页面”。例如,如果我创建 somepage.html
,它可以有 HTML
、CSS
、JavaScript
(和扩展名仍然是 .html)。就像把各种技术“混合”起来,这怎么可能?
是不是因为页面最终被浏览器读取,所以混合是可能的?
谁能简单的帮我解开这些疑惑?
最佳答案
一点理论
这有助于想象您在浏览器中看到的 HTML 页面由三个部分组成:
- DOM(实际的 HTML 元素)
- CSS(浏览器使用这些规则并决定如何呈现 #1)
- JavaScript(浏览器可以理解的编程语言。可以操作#1 和#2,还可以执行其他一些动态操作)
至于您的问题 #1 为什么可以混合,您是对的,因为所有这三个最终都会在浏览器中呈现以形成您所谓的“页面”。
认为随着您从#1 > #2 > #3 开始,您会逐步增强 页面,这会有所帮助。
HTML 和 CSS 不是编程语言。所以你没有结合任何东西。
HTML 是一组规范,用于描述页面的元素。
CSS 是一组规则,用于告诉浏览器如何显示这些元素。
JavaScript 是这三种语言中唯一的编程语言。用于动态更改页面的行为、显示和交互。
这三个都相互配合使用,以在用户看到的页面上获得所需的行为。
那么浏览器如何使用这三个
当在浏览器中输入/单击 URL 时,浏览器会从服务器请求“内容”。服务器通过发回初始 HTML 页面进行响应,该页面通常包括 DOM、CSS(作为链接标签)和 JavaScript 作为(脚本)标签。
浏览器首先读取 HTML 以创建所谓的
content tree
.然后它“查看”CSS 并将 CSS“应用”到
content tree
并创建所谓的render tree
.这添加了样式信息。终于通过了
layout
过程,其中每个 HTML 元素都被分配了精确的物理窗口坐标以显示。最后,所有内容都已“绘制”完毕,您会看到风格化的 HTML 页面。
JavaScript 由浏览器单独解析,因为它在
<script>
中遇到。标签。 JavaScript 可以添加/删除/修改 dom 的现有组件并更改 CSS 对其应用的方式。它还可以进行新的网络调用。
这是一个描述 WebKit 浏览器这一过程的图表 (source)
这Article如果您有兴趣进一步阅读,可以详细描述此过程。
文件扩展名
关于您的问题 #2 为什么 .html
扩大。从技术上讲,.html 扩展名只是操作系统文件系统的延续,浏览器不关心!浏览器关心的是所谓的 mime-type。并且通常由 Web 服务器返回。
当浏览器看到特定的 mime 类型时,它们被“教导”以特定的方式行事。一些常见的是 text/html
或 image/png
等..
关于javascript - HTML 和 javascript 之间的关系。前端开发基础,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38834375/