【问题标题】：Relationship between HTML and javascript. The basics of frontend developmentHTML 和 javascript 之间的关系。前端开发的基础
【发布时间】：2016-12-14 12:48:40
【问题描述】：

我主要工作在企业应用程序的服务器端层（Java EE、Spring 框架）。

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

我很难理解我们如何结合所有这些技术并制作一个“页面”，例如如果我创建somepage.html，它可以有HTML、CSS、JavaScript（和扩展名仍然是 .html）。这就像“混合”各种技术，这怎么可能？

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

谁能用简单的话帮助我澄清这些疑问？

【问题讨论】：

javascript 嵌入到带有脚本标签的 html 中。如果你打开一个原始的 javascript 文件，浏览器不会执行它，它只会显示代码。和将资源导入java项目一样。
HTML 提供结构和语义，如 XML，CSS 提供表示、颜色、字体等。JavaScripts 提供花里胡哨，使按钮做一些事情，如发送信息、交互、ajax、msnipulating DOM 等。

标签： javascript html css

【解决方案1】：

一点理论

想想你在浏览器中看到的由三个组件组成的 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 等。

【讨论】：

有趣的是，从技术上讲，CSS 的最新版本已经完成，因此可以说它是一种编程语言。只是不是一个非常有效的;)
同意！它只是有助于以这种方式解释初学者。我以艰难的方式学到了很多教训，所以只是尝试为 OP 简化它。 :)
@Shaunak 非常感谢您的详细回复，很有道理。
感谢您提供的额外信息，真的很有帮助。
哈哈，我希望 :)。谢谢，希望这个答案可以帮助其他在开始使用 Web 技术时遇到类似问题的人。

【解决方案2】：

HTML 可以通过 JavaScript 的 <script> 标签和 CSS 的 <link rel="stylesheet"> 标签链接到外部资源。浏览器理解这些文件扩展名旨在增强 HTML 页面。

JavaScript 负责您通常认为的页面代码。您可以通过 DOM 查询响应 HTML 标记中的事件（传统上通过 document.getElementById() 之类的函数或 jQuery 之类的外部库来完成）。 DOM 只是您的 HTML 在浏览器中的表示。

最后，CSS 可以通过选择器为标记中的内容设置样式。这些选择器旨在匹配 HTML 元素，然后对其进行一些视觉更改。

这是放在一起的样子。

HTML

<script src="myjavascript.js"></script>
<link rel="stylesheet" href="mycss.css">
<div id="foo">
   Hello World!
</div>

JavaScript (myjavascript.js)

document.getElementById("foo").addEventListener('click', function () {
    alert('Hey, you clicked the div!');
});

CSS (mycss.css)

#foo {
   color: red;
}

【讨论】：

非常感谢您提供的详细信息，了解它的中心思想。

【解决方案3】：

浏览器具有 HTML 解析器，它读取 html 文本并将其转换为 DOM TREE

浏览器也有 CSS praser，它可以读取 <style> 标签或外部 css 文件中的样式。然后将 css 的选择器与 html DOM 树结合起来，生成一个同时具有 css 和 html 的RENDER Tree。

浏览器然后根据渲染树进行屏幕布局并在屏幕上绘制像素。

浏览器也有一个JS引擎，这个引擎读取它的script标签里面的javascript，或者在一个单独的js文件中，然后在代码完全加载后执行javascript。

最好将 HTML、CSS 和 JS 文件分别放在自己的文件中，分别为 CSP compliance

我给你标题主题，因为你只需要一个小的介绍。请随时要求我详细说明。

更新

简介：像素到屏幕的管道

在每一帧上，浏览器都会执行以下步骤以在屏幕上呈现页面。

JavaScript。通常，JavaScript 用于处理会导致视觉变化的工作，无论是 jQuery 的动画功能、对数据集进行排序还是向页面添加 DOM 元素。不过，触发视觉变化的不一定是 JavaScript：CSS 动画、过渡和 Web 动画 API 也很常用。
样式计算。这是根据匹配选择器确定哪些 CSS 规则适用于哪些元素的过程，例如.headline 或 .nav > .nav__item。从那里，一旦知道规则，就会应用它们并计算每个元素的最终样式。
布局。一旦浏览器知道哪些规则适用于一个元素，它就可以开始计算它占用了多少空间以及它在屏幕上的位置。 Web 的布局模型意味着一个元素可以影响其他元素，例如元素的宽度通常会影响其子元素的宽度等，因此会影响浏览器的整个过程。
油漆。绘画是填充像素的过程。它涉及绘制文本、颜色、图像、边框和阴影，基本上是元素的每个视觉部分。绘图通常在多个表面上完成，通常称为图层。
合成。由于页面的各个部分可能被绘制到多个图层中，因此需要以正确的顺序将它们绘制到屏幕上，以便页面正确呈现。这对于与另一个重叠的元素尤其重要，因为错误可能会导致一个元素错误地出现在另一个元素的顶部。

详情和来源：https://developers.google.com/web/fundamentals/performance/rendering/?hl=en

【讨论】：

非常感谢您的回复，对此有所了解。如果您对此有更多信息，那就太好了。但是，我明白了这一点。

【解决方案4】：

您在浏览器中看到的网页可能是结构 (HTML)、样式 (CSS) 和交互性 (JAVASCRIPT) 的组合。这些工作由 3 种不同的技术承担，即 HTML、Javascript 和 CSS，您的浏览器知道如何解释这些技术。

HTML 将内容标记为不同的结构类型，如段落、块、列表、图像、表格、表格、cmets 等。 CSS 告诉浏览器应如何显示每种类型的元素，这可能因不同的媒体（如屏幕、打印或手持设备）而异 JavaScript 告诉浏览器如何更改网页以响应发生的事件（例如单击某物，或更改表单输入中的值）

不同的浏览器使用不同的渲染引擎默认情况下，渲染引擎可以显示 HTML 和 XML 文档和图像。可以通过插件或扩展显示其他类型的数据；例如，使用 PDF 查看器插件显示 PDF 文档。渲染引擎将开始解析 HTML 文档并将元素转换为名为“内容树”的树中的 DOM 节点。引擎将解析外部 CSS 文件和样式元素中的样式数据。样式信息和 HTML 中的视觉指令将用于创建另一棵树：渲染树。

【讨论】：

【解决方案5】：

用最小和简单的方式解释你：

HTML 用于添加按钮、表单、段落、div 等元素，这些元素包含内容，但 html 的样式选项并不多。

CSS 纯粹用于设置元素的样式和在 html 页面中放置元素。示例：如果您想设置某个元素的宽度、高度或颜色，可以使用 CSS 来实现。

Javascript 用于添加与元素的交互，例如，如果您单击某个删除按钮，您会希望用户获得确认模式（覆盖）来确认删除数据. Javascript 用于与 DOM（文档对象模型）元素（即页面中的 html 元素）交互或动态更改 css/html 元素的属性。

html是写在里面的

CSS 可以通过以下方式完成：

内联： 在 html 标记本身内。例如：

&lt;div style = "width: 100px; height: 100px; background-color: teal"&gt;I am a div&lt;/div&gt;

使用外部文件

/*This is the css file*/

.customDiv{
    width: 100px;
    height: 100px;
    background-color: teal;
  }

<!-- following shows the linking to your css file -->
<!-- href in the link tag is where you specify the path to your css file -->
<link type = "text/css" rel = "stylesheet" href = "myStyles.css"/>

<div class = "customDiv"> This is a div</div>

Javascript 可以包含在 html 中的 <script></script> 标记内，也可以通过在 src 属性 <script type="text/javascript" src="myCustonJS.js"></script> 中指定 js 文件的路径来加载

例子

document.getElementById("myDiv").onclick = function (){alert("JS DID THIS!!")};

#myDiv{
    width: 100px;
    height: 100px;
    background-color: teal;
  }

&lt;div id = "myDiv"&gt;This is a div&lt;/div&gt;

【讨论】：

非常感谢您的回复，很有帮助。
乐于助人 :D

【解决方案6】：

HTML 页面是中心组件。这就是浏览器要处理的内容。

在 HTML 中，您可以有 <script></script> 块和/或 <style></style> 块。这些块告诉浏览器，我内部的一切都是 Javascript (<script>) 或 CSS (<style>)。

大多数人更喜欢将文件分开，而是链接到外部 .js 和 .css 文件，但这并不是必需的（只是最佳实践）。即便如此，您仍然使用 HTML 通过<script src="someJsFile.js"></script> 或<link rel="stylesheet" href="someCssFile.css"> 告诉浏览器它们

【讨论】：