by Kevin Kononenko

凯文·科诺年科(Kevin Kononenko)

通过构建城市来解释HTML，CSS和JavaScript之间的关系 (The relationship between HTML, CSS and JavaScript explained by building a city)

If you have ever visited a walkable city like New York, then you can understand the way that HTML, CSS and JavaScript work together.

如果您曾经去过纽约这样的步行城市，那么您可以了解HTML，CSS和JavaScript协同工作的方式。

When you start learning web development, you can usually try a series of basic challenges on the principles of HTML, CSS and JavaScript. However, each challenge happens in a sandbox environment, and does not test you on multiple languages at once.

当您开始学习Web开发时，通常可以尝试基于HTML，CSS和JavaScript原理的一系列基本挑战。 但是，每个挑战都在沙盒环境中发生，并且不会一次对多种语言进行测试。

For example, an “Intro to JavaScript” tutorial will usually focus on fundamentals like loops and ‘if’ statements, rather than using JavaScript alongside HTML.

例如，“ JavaScript入门”教程通常将重点放在诸如循环和“ if”语句之类的基础知识上，而不是将JavaScript与HTML一起使用。

After you get through these preliminary exercises, you reach the point where you need to set up your first full website. Even if this is a single-page, personal site that you never intend to release, you still face a series of new challenges like:

在完成这些初步练习之后，您将需要建立第一个完整的网站。 即使这是您永远不会发布的单页个人网站，您仍然会面临一系列新挑战，例如：

1. How do I connect the three different types of files?
   如何连接三种不同类型的文件？
2. After I connect them, how will they work together?
   连接它们之后，它们将如何一起工作？
3. How do I test all of this on my own computer?
   如何在自己的计算机上测试所有这些？

After thinking about this for awhile, I realized that these pieces work together in the same way that cities can still function. This applies even when businesses are constantly moving in or going out of business, or real estate developers are remaking certain neighborhoods.

考虑了一会儿之后，我意识到这些部分以城市仍然可以运行的相同方式协同工作。 即使企业不断迁入或倒闭，或者房地产开发商正在重建某些街区，这也适用。

So, I am going to show how you can set up your first development environment with these three pieces. In order to understand this tutorial, you just need to know the basic parts of HTML, CSS and JavaScript.

因此，我将向您展示如何使用这三部分来建立您的第一个开发环境。 为了理解本教程，您只需要了解HTML，CSS和JavaScript的基本部分。

Even if you have not written any code in your life, you still will be able to understand how to link the three languages.

即使您一生中没有编写任何代码，您仍然可以理解如何链接这三种语言。

HTML，CSS和JavaScript之间的区别 (The differences between HTML, CSS and JavaScript)

Let’s imagine that you are in charge of planning the layout of a new neighborhood in the city. This neighborhood will have some residential buildings, some eateries, a bank branch, and a mall.

假设您负责规划城市中新社区的布局。 该社区将有一些居民楼，一些餐馆，一个银行分行和一个购物中心。

This might seem one-dimensional. In other words, each building is just a point on a map, with no nuance. But when you dig a little deeper, you can see that each building actually has three parts you can change:

这似乎是一维的。 换句话说，每座建筑物只是地图上的一个点，没有任何细微差别。 但是，当您深入研究时，您会发现每个建筑物实际上都可以分为三个部分：

1. The structure of the building itself
   建筑物本身的结构
2. The interior and exterior decoration of the building
   建筑物的内部和外部装饰
3. The actual functions that visitors can perform in each building
   访客可以在每个建筑物中执行的实际功能

This corresponds to the three different types of files that you can use in your first website.

这对应于您可以在第一个网站中使用的三种不同类型的文件。

An HTML file contains the structure of the page itself. It is kind of like the structure of the building.

HTML文件包含页面本身的结构。 它有点像建筑物的结构。

A CSS file contains the styling of the page. It allows you to change colors, positioning and more. It is kind of like the design of the building itself.

CSS文件包含页面的样式。 它允许您更改颜色，位置等。 这有点像建筑物本身的设计。

A JavaScript file determines the dynamic and interactive elements on the page. It determines what happens when users click, hover, or type within certain elements. This is kind of like the functionality of the building.

一个JavaScript文件确定页面上的动态和交互式元素。 它确定当用户单击，悬停或在某些元素中键入内容时会发生什么。 这有点像建筑物的功能。

Let’s take the example of one of the houses. A house has two bedrooms, two bathrooms, and two stories. That is the HTML of the building.

让我们以其中一间房子为例。 一所房子有两间卧室，两间浴室和两层楼。 那就是建筑物HTML。

It is made of brick and has a solid wood door. That corresponds to the CSS of the building.

它由砖制成，并具有实木门。 这对应于建筑物CSS。

What can you do within the house? You can eat, sleep, make meals… anything that you do at home, really! That is the JavaScript of the building.

你在房子里能做什么？ 您可以吃饭，睡觉，做饭……实际上是您在家中所做的任何事情！ 那就是大楼JavaScript。

基本文件目录的示例 (An example of a basic file directory)

Since each of these three languages serves a different purpose, web developers generally use separate files for each one. This idea is called “separation of concerns” — each file should have a different function within the site as a whole.

由于这三种语言中的每种都有不同的用途，因此Web开发人员通常为每种语言使用单独的文件。 这个想法称为“ 关注点分离 ”-每个文件在整个站点内应具有不同的功能。

Although you could technically include all the code in one HTML file, that will eventually lead to repetitive code as you grow your site.

尽管从技术上讲，您可以将所有代码包含在一个HTML文件中，但是随着网站的扩大，最终将导致重复的代码。

Let’s look at the code needed to create one complete house. All three files must be in the same directory — a folder on your computer. In this case, let’s call the folder house. In our house folder, we will have one file of each type. I will call the main HTML file index, the main CSS file styles, and the main JavaScript file scripts.

让我们看看创建一个完整房屋所需的代码。 所有这三个文件必须位于同一目录中 -计算机上的文件夹。 在这种情况下，我们将其称为文件夹house 。 在我们的目录文件夹中，每种类型都有一个文件。 我将调用主要HTML文件索引 ，主要CSS文件样式和主要JavaScript文件脚本 。

Now we can cover the way that files become linked in code.

现在我们可以讨论文件在代码中链接的方式。

Our HTML file actually has three separate sections:

我们HTML文件实际上包含三个单独的部分：

1. The <head>, where you can include metadata and links to services like Google Fonts.

   <he ad>，您可以在其中包含元数据和指向诸如Google字体之类的服务的链接。

2. The <body>, where you include the actual HTML elements.

   <bo dy>，其中包含实际HTML元素。

3. The <script> tags, which can link to Google Analytics and JavaScript files

   <scri pt>标记，可以链接到Google Analytics(分析)和JavaScript文件

Right now, all three files are contained within one folder, so the file paths are pretty simple within the HTML file.

现在，所有三个文件都包含在一个文件夹中，因此HTML文件中的文件路径非常简单。

The <link> tag will allow you to create a separate stylesheet to use with all brick houses using the styles.css file.

<li nk>标记将允许您创建单独的样式表，以与样式 s.css文件一起用于所有砖房。

And the <script> tag allows you to create a set of functions that would apply to any type of home in the scripts.js file.

而<scri PT>标签允许你创建一组功能将适用于任何类型的家庭I N得离谱 pts.js文件。

方案1：一个新的比萨连锁店进来了(CSS文件更改) (Scenario 1: a new pizza chain moves in (CSS file change))

Let’s look at a real-world example. Imagine that in this neighborhood, one of the buildings is a pizza shop called Neighborhood Pizza (great name). But, Neighborhood Pizza is struggling, and Domino’s (a huge pizza chain) decides to buy the property and serve the neighborhood instead.

让我们看一个真实的例子。 想象一下，在这个社区中，其中一栋建筑物是一个名为“邻里比萨饼”(大名)的比萨饼店。 但是，邻里披萨正在挣扎中，多米诺(一家庞大的披萨连锁店)决定购买该物业并为邻里服务。

Do you know what this would mean in terms of code?

您知道这对代码意味着什么吗？

Well, let’s think through each of the three pieces.

好吧，让我们仔细考虑一下三个部分。

1. The structure of the building is the same. It’s still the same pizza place. That is the HTML.
   建筑物的结构是相同的。 仍然是同一个披萨店。 那就是HTML。
2. The functionality of the building is the same. It still exists in order to serve pizza, and when customers come in, that is the only thing they expect. That is the JavaScript.
   建筑物的功能相同。 为了提供披萨，它仍然存在，当顾客进来时，这是他们唯一的期望。 那就是JavaScript。
3. But the styling and branding of the building is different! That means the CSS is new.
   但是建筑物的样式和品牌有所不同！ 这意味着CSS是新的。

So, we have now created a new CSS file (let’s call it Dominos.css). We need to create a folder called pizza to show we are talking about a pizza place now, and substitute dominos.css for the old styles.css file.

因此，我们现在创建了一个新CSS文件(我们将其称为Dominos.css )。 我们需要创建一个名为pizza的文件夹，以表明我们现在正在谈论披萨店，并用dominos.css代替旧的styles.css文件。

方案2：新建公寓楼 (Scenario 2: a new apartment building)

Here’s another example. Let’s say your neighborhood is undergoing some gentrification. That means wealthier residents are moving in, and more expensive housing is being built. Some real estate developers decide to buy up a lot with a house on it, demolish the house, and put in some fancy apartments.

这是另一个例子。 假设您的邻居正在经历高档化 。 这意味着较富裕的居民正在搬进来，并且正在建造更昂贵的住房。 一些房地产开发商决定购买大量带有房屋的房屋，拆除房屋，并放置一些高档公寓。

Let’s think about what that would mean in terms of our file system.

让我们考虑一下这对我们的文件系统意味着什么。

1. The functionality is the same thing. It’s still a home. That means JavaScript is the same.
   功能是一回事。 仍然是家。 这意味着JavaScript是相同的。
2. The CSS must be different because there is no way that an apartment building can be styled in the same way as a house!
   CSS必须不同，因为无法以与房屋相同的方式来设计公寓大楼！
3. And the HTML file must be different, because the two buildings have completely different structures.
   而且HTML文件必须不同，因为两个建筑物的结构完全不同。

Let’s call the new building apartment.html, and the new CSS will be fancy.css. Since we have an entirely new HTML file, we are not simply linking up a new CSS file. The entire page is different. And it also links to a new CSS file.

我们将新建筑物命名为apartment.html ，新CSS将为fancy.css 。 由于我们拥有一个全新HTML文件，因此我们并不仅仅是链接一个新CSS文件。 整个页面是不同的。 并且它还链接到一个新CSS文件。

The CSS and JavaScript files simply modify the HTML. They need to be referenced in the HTML file in order to be loaded. That is why, in the diagram above, the folder itself is the same. But the HTML file and the code that links it to the other files are different.

CSS和JavaScript文件只需修改HTML。 需要在HTML文件中引用它们才能加载。 因此，在上图中，文件夹本身是相同的。 但是HTML文件和将其链接到其他文件的代码是不同的。

创建具有多个文件夹的文件目录 (Creating a file directory with multiple folders)

So far, we have covered just one type of building at a time. But that’s kind of like a website with just one page — very unusual. Even a personal website might have an “About” page, a “Portfolio” page, and so on. So what happens when there are multiple buildings? How can you structure your file directory?

到目前为止，我们一次只涉及一种建筑。 但这有点像只有一页的网站-非常不寻常。 即使是个人网站，也可能具有“关于”页面，“投资组合”页面等。 那么当有多个建筑物时会发生什么呢？ 您如何构建文件目录？

Let’s say that your neighborhood has a bank, a mall and a pizza place. That’s kind of like a website with three pages. Each one is an HTML file with a CSS file and JavaScript file linked to it.

假设您的附近有银行，购物中心和披萨店。 这有点像一个有三页的网站。 每个文件都是一个HTML文件，其中链接有CSS文件和JavaScript文件。

But, notice how we did not use three subfolders within a greater neighborhood folder! Although we certainly could have done that, many front-end developers like to create a separate scripts folder for all JS files, and a styles folder for all CSS files.

但是，请注意我们如何在更大的邻域文件夹中不使用三个子文件夹！ 尽管我们当然可以做到，但许多前端开发人员喜欢为所有JS文件创建一个单独的scripts文件夹，为所有CSS文件创建一个styles文件夹。

As your site grows, you will find that some pieces of CSS and JavaScript are reuseable, and can be linked to multiple HTML files. The scripts and styles folders allow you to organize your efforts and reduce redundant code.

随着网站的发展，您会发现一些CSS和JavaScript可重复使用，并且可以链接到多个HTML文件。 脚本和样式文件夹使您可以组织工作并减少冗余代码。

In our example, you can order a greasy slice of pizza in both a mall AND a pizza shop. So, you might expect that both would share one JavaScript file, but also have unique functionality in their own individual JavaScript files.

在我们的示例中，您可以在购物中心和比萨店订购一份油腻的比萨饼。 因此，您可能希望两者都共享一个JavaScript文件，但在各自JavaScript文件中也具有独特的功能。

Anyways, here is a potential layout of the whole file directory.

无论如何，这是整个文件目录的潜在布局。

Notice how the HTML files and folders are the same level of depth within the greater neighborhood folder. In order to reference files that are within folders at the same level, you need to start your filepath with the folder name instead of a file name. So, if you wanted to reference the bank.css file from within bank.html, you would use scripts/bank.css as the file path.

请注意，HTML文件和文件夹在更大的邻居文件夹中的深度如何相同。 为了引用同一级别的文件夹中的文件，您需要使用文件夹名称而不是文件名称来启动文件路径。 因此，如果您想从bank.html中引用bank.css文件，则可以使用scripts/bank.css作为文件路径。

获取最新教程 (Get the latest tutorials)

Did you enjoy this tutorial? Give it a “clap” and let me know in the comments. Or, get my latest web development explanations by signing up for my newsletter:

您喜欢本教程吗？ 给它一个“拍手”，并在评论中让我知道。 或者，通过注册新闻通讯来获取我的最新Web开发说明：

翻译自: https://www.freecodecamp.org/news/the-relationship-between-html-css-and-javascript-explained-by-building-a-city-a73a69c6343/