javascript - HTML 和 javascript 之间的关系。前端开发基础

标签 javascript html css

主要从事企业应用服务端层(Java EE、Spring框架)

现在,我正在尝试了解(只是了解,而不是掌握)客户端技术。在书籍和在线资料中阅读有关 HTML 和 CSS 的内容)。我想研究的下一个技术是 java-script。

我很难理解我们如何将所有这些技术结合起来制作一个“页面”。例如,如果我创建 somepage.html,它可以有 HTMLCSSJavaScript(和扩展名仍然是 .html)。就像把各种技术“混合”起来,这怎么可能?

是不是因为页面最终被浏览器读取,所以混合是可能的?

谁能简单的帮我解开这些疑惑?

最佳答案

一点理论

这有助于想象您在浏览器中看到的 HTML 页面由三个部分组成:

  1. DOM(实际的 HTML 元素)
  2. CSS(浏览器使用这些规则并决定如何呈现 #1)
  3. JavaScript(浏览器可以理解的编程语言。可以操作#1 和#2,还可以执行其他一些动态操作)

至于您的问题 #1 为什么可以混合,您是对的,因为所有这三个最终都会在浏览器中呈现以形成您所谓的“页面”。

认为随着您从#1 > #2 > #3 开始,您会逐步增强 页面,这会有所帮助。

HTML 和 CSS 不是编程语言。所以你没有结合任何东西。

  • HTML 是一组规范,用于描述页面的元素。

  • CSS 是一组规则,用于告诉浏览器如何显示这些元素。

  • JavaScript 是这三种语言中唯一的编程语言。用于动态更改页面的行为显示交互

这三个都相互配合使用,以在用户看到的页面上获得所需的行为。

那么浏览器如何使用这三个

当在浏览器中输入/单击 URL 时,浏览器会从服务器请求“内容”。服务器通过发回初始 HTML 页面进行响应,该页面通常包括 DOM、CSS(作为链接标签)和 JavaScript 作为(脚本)标签。

  1. 浏览器首先读取 HTML 以创建所谓的 content tree .

  2. 然后它“查看”CSS 并将 CSS“应用”到 content tree并创建所谓的 render tree .这添加了样式信息。

  3. 终于通过了 layout过程,其中每个 HTML 元素都被分配了精确的物理窗口坐标以显示。

  4. 最后,所有内容都已“绘制”完毕,您会看到风格化的 HTML 页面。

  5. JavaScript 由浏览器单独解析,因为它在 <script> 中遇到。标签。 JavaScript 可以添加/删除/修改 dom 的现有组件并更改 CSS 对其应用的方式。它还可以进行新的网络调用。

这是一个描述 WebKit 浏览器这一过程的图表 (source)

enter image description here

Article如果您有兴趣进一步阅读,可以详细描述此过程。

文件扩展名

关于您的问题 #2 为什么 .html扩大。从技术上讲,.html 扩展名只是操作系统文件系统的延续,浏览器不关心!浏览器关心的是所谓的 mime-type。并且通常由 Web 服务器返回。 当浏览器看到特定的 mime 类型时,它们被“教导”以特定的方式行事。一些常见的是 text/htmlimage/png等..

关于javascript - HTML 和 javascript 之间的关系。前端开发基础,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38834375/

相关文章:

javascript - 使用 moment.js #javascript 将时间舍入到最接近的 30 分钟

javascript - 单击特定链接的功能

html - 将图标垂直对齐到第一行文本的中心

css - chrome 开发工具中的元素尺寸与 css 中设置的元素尺寸不同

javascript - window.getMatchedCSSRules 用于所有规则,包括其伪元素和伪类规则

html - 使用*通用选择器和html有什么区别?

javascript - 当另一个元素属性更改时更新元素的文本

javascript - React.js 和 webpack - 为什么它不允许 var、let、const?

javascript - 如何使 DIV 向上扩展而不是向下扩展?

javascript - 如何在表单中应用 checkValidity()?