如果你正在学习网络开发，你会遇到HTML、CSS和JavaScript这样的术语。这些通常被称为网络的组成部分。
这三种工具主导着网络开发。每个库或工具似乎都围绕着HTML、CSS和JS。因此，如果你想成为一名网络开发者，你需要好好学习它们。
你还会发现，网站大多是由这三种语言构建的。
但你可能想知道每一种是什么，它到底有什么用处。是什么让这些语言如此特别和重要？又是什么让它们如此无处不在，以至于你不能不在每一个基于网络开发的教程和主题中看到它们？
那么，现在你不需要再想了。
在这篇文章中，我将解释什么是HTML、CSS和JavaScript的基本知识，它们是如何使网络工作的，以及它们自己的作用。
什么是互联网？
互联网只是一个由计算机组成的网络，它们相互通信，发送和接收数据（信息）。
互联网上的每台计算机都可以通过一个独特的数字来区分和定位，这个数字叫做**IP地址。**一个IP地址看起来像这样。168.212.226.204
什么是网络？
网络是互联网的一个子集。
像其他所有的计算机网络一样，网络由两个主要部分组成：网络浏览器客户端和网络服务器。
客户端请求数据，而服务器则分享 或提供 其数据。为了实现这一点，双方必须建立一个协议。该协议被称为应用程序设计接口 ，或简而言之，API。
但是，这些数据必须被安排和格式化为具有广泛技术经验和能力的终端用户所能理解的形式。
这就是HTML、CSS、JavaScript和整个网络开发概念发挥作用的地方。
什么是HTML？
HTML是超文本标记语言的缩写。
Dictionary.com对Markup的定义是。
一套详细的指令，通常写在要排版的手稿上，涉及字体的风格、页面的构成等等。
因此，你可以把HTML看作是在网页被打印（展示给你）之前，用于创建有关风格、类型、格式、结构和构成的详细指示的语言。
但在网页开发的背景下，我们可以用 "渲染 "来代替 "打印 "这个术语，因为它是一个更准确的术语。
HTML帮助你将页面结构化为各种元素，如段落、章节、标题、导航栏等等。
为了说明一个页面是什么样子的，让我们创建一个基本的HTML文档。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./styles.css">
<title>Document</title>
</head>
<body>
<h1>This is a first level heading in HTML. With CSS, I will turn this into red color</h1>
<h2>This is a second level heading in HTML. With CSS, I will turn this into blue color</h2>
<h3>This is a third level heading in HTML. With CSS, I will turn this into green color</h3>
<p>This is a <em>paragragh</em> As you can see, I placed an empahisis on the word "paragraph". Now, I will change also
the background color of the word "paragraph" to black, and its text color to green, all with just CSS.</p>
<p>The main essence of this tutorial is to:</p>
<ul>
<li>Show you how to format a web document with HTML</li>
<li>Show you how to design a web page with CSS</li>
<li>Show you how to program a web document with JavaScript</li>
</ul>
<p>Next, I am going to add the following two numbers and display the result, all with JavaScript<p/>
<p>First number:<span id= "firstNum">2</span> <br></p>
<p>Second number: <span id= "secondNum">7</span> </p>
<p>Therefore, the sum of the two of those numbers is: <span id= "answer">(placeholder for the answer)</span></p>
<input type="button" id="sumButton" value="Click to add!">
</body>
</html>
index.html
这就是你如何只用HTML来格式化和结构化一个文档。正如你所看到的，这个标记包含了一些网络元素，如：。
- 第1级标题
h1 - 第2级标题
h2 - 第三级标题
h3 - 一个段落
p - 一个带有子弹头的无序列表
ulli - 一个按钮输入
input - 以及整个页面的主体
body
这就是上面的标记在网络浏览器上的显示效果。
localhost:3000/index.html
你也可以给这些元素添加属性，你可以用它们来识别这些元素，并从网站的其他地方访问它们。
在我们的例子中，我们为所有三个span 元素设置了id 属性。这将有助于我们从我们的JavaScript中访问它们，你将在后面看到。
把这个属性想象成与你的社交媒体用户名相同的方式。有了这个名字，别人可以在社交媒体上找到你。而且，别人也可以用这个名字提及你或提到你（你可以在一个帖子中被标记，等等）。
不过，这个页面非常基本，没有吸引力。如果你正在建立任何东西，而不是一个演示，你将需要添加一些基本的风格，使其更有吸引力。而我们恰恰可以用CSS来做到这一点。
想了解更多关于HTML的知识吗？你可以从freeCodeCamp的响应式网页设计认证和Beau Carnes的这个全新的完整HTML课程 开始。
什么是CSS？
HTML是一种用于格式化/结构化网页的标记语言，而CSS则是一种设计语言，你可以用它来使你的网页看起来很好，很有表现力。
CSS是层叠样式表（Cascading Style Sheets）的缩写，你用它来改善网页的外观。通过添加体贴的CSS样式，你可以使你的网页更有吸引力，让终端用户更喜欢浏览和使用。
想象一下，如果人类只是被做成骨架和光秃秃的骨头--那会是什么样子？如果你问我，那就不妙了。所以，CSS就像我们的皮肤、头发和一般的身体外观。
你还可以使用CSS来布局元素，将它们定位在页面的指定区域。
要访问这些元素，你必须 "选择 "它们。你可以选择一个或多个网页元素，并指定你希望它们的外观或定位方式。
管理这一过程的规则被称为CSS选择器。
通过CSS，你可以设置元素的颜色和背景，以及字体、边距、间距、填充等等。
如果你还记得我们的HTML页面示例，我们有一些元素是不言自明的。例如，我说我要把第一级标题h1 的颜色改为红色。
为了说明CSS的工作原理，我将分享将三级标题的背景色分别设置为红色、蓝色和绿色的代码。
h1 {
background-color: #ff0000;
}
h2 {
background-color: #0000FF;
}
h3 {
background-color: #00FF00;
}
em {
background-color: #000000;
color: #ffffff;
}
localhost:3000/styles.css
应用上述样式后，我们的网页外观就会变成这样。
很酷，对吗？
我们通过 "选择 "它们来访问我们想要处理的每个元素。h1 选择页面中的所有一级标题，h2 选择二级元素，以此类推。你可以选择你想要的任何单一的HTML元素，并指定你想要的外观或定位方式。
想了解更多关于CSS的知识吗？你可以查看freeCodeCamp的响应式网页设计认证的第二部分来开始学习。
什么是JavaScript？
现在，如果HTML是标记语言，CSS是设计语言，那么JavaScript就是编程语言。
如果你不知道什么是编程，想想你在日常生活中采取的某些行动。
当你感觉到危险时，你就跑。当你饿的时候，你就吃。当你累了，你就睡觉。当你冷的时候，你就去寻找温暖。当穿过一条繁忙的道路时，你会计算车辆离你的距离。
你的大脑已经被编程，每当有事情发生时就会以某种方式做出反应或做某些事情。以同样的方式，你可以对你的网页或个别元素进行编程，使其在其他事情（事件）发生时以某种方式作出反应并做一些事情。
你可以对行动、条件、计算、网络请求、并发任务和许多其他种类的指令进行编程。
你可以通过文档对象模型API（DOM）访问任何元素，并使它们以你想要的方式变化。
DOM是被载入浏览器的网页的一种树状表示。
网页上的每个元素都在DOM上得到体现
由于DOM的存在，我们可以使用像getElementById() 这样的方法来访问我们网页上的元素。
JavaScript允许你让你的网页**"思考和行动"，**这就是编程的全部内容。
如果你还记得我们的HTML网页的例子，我提到我要把页面上显示的两个数字相加，然后把结果显示在占位文本的位置。一旦按钮被点击，计算就会运行。
点击 "获取总和 "按钮将显示2和7的总和
这段代码说明了你如何用JavaScript进行计算。
function displaySum() {
let firstNum = Number(document.getElementById('firstNum').innerHTML)
let secondNum = Number(document.getElementById('secondNum').innerHTML)
let total = firstNum + secondNum;
document.getElementById("answer").innerHTML = ` ${firstNum} + ${secondNum}, equals to ${total}` ;
}
document.getElementById('sumButton').addEventListener("click", displaySum);
还记得我告诉你的关于HTML属性及其用途吗？这段代码就显示了这一点。
displaySum 是一个函数，它从网页上获取这两个项目，将它们转换为数字（用Number方法），将它们相加，并将它们作为内部值传入另一个元素。
我们之所以能够在我们的JavaScript中访问这些元素，是因为我们对它们设置了独特的属性，以帮助我们识别它们。
所以要感谢这个。
// id attribute has been set in all three
<span id= "firstNum">2</span> <br>
...<span id= "secondNum">7</span>
...... <span id= "answer">(placeholder for the answer)</span>
我们能够做到这一点。
//getElementById will get all HTML elements by a specific "id" attribute
...
let firstNum = Number(document.getElementById('firstNum').innerHTML)
let secondNum = Number(document.getElementById('secondNum').innerHTML)
let total = firstNum + secondNum;
document.getElementById("answer").innerHTML = ` ${firstNum} + ${secondNum}, equals to ${total}` ;
最后，点击按钮后，你会在新更新的页面上看到这两个数字的总和。
2加7等于9
如果你想开始学习JavaScript，你可以查看freeCodeCamp的JavaScript算法和数据结构认证。而且你可以用这个很好的JS入门课程来补充你的学习。
如何把HTML、CSS和JavaScript放在一起
我们一起使用这三种语言来格式化、设计和编程网页。
而当你把一些带有超链接的网页，以及它们在服务器计算机上的所有资产，如图片、视频等链接在一起时，它就会被渲染成一个网站。
这种渲染通常发生在前端，用户可以看到正在显示的内容并与之互动。
另一方面，数据，特别是像密码这样的敏感信息，是由网站的后端部分存储和提供的。这是网站的一部分，只存在于服务器计算机上，不在前端浏览器上显示。在那里，用户无法看到或轻易访问这些信息。
总结
作为一名网络开发人员，我们用来建立网站的三种主要语言是HTML、CSS和JavaScript。
JavaScript是编程语言，我们使用HTML来构建网站，并使用CSS来设计和布局网页。
这些天来，CSS已经不仅仅是一种设计语言了。你实际上可以只用CSS来实现动画和平滑过渡。
事实上，你也可以用CSS做一些基本的编程。这方面的一个例子是，当你使用媒体查询时，你为不同类型的屏幕（分辨率）定义不同的样式规则。
JavaScript也已经超越了只在浏览器中使用的范围。由于Node.js的出现，我们现在在服务器上使用它。
但基本事实依然存在。HTML、CSS和JavaScript是网络的主要语言。
就这样吧。网络语言的基本术语解释。我真的希望你从这篇文章中得到一些有用的东西。
作为本文的结尾，我有一些东西要分享。我最近开始了一个每周编码挑战系列，旨在教初学者如何用JavaScript编程。请在我的博客上查看。
谢谢你的阅读，再见。
P/S:如果你正在学习JavaScript，我创建了一本电子书，用手绘的数字笔记教授JavaScript的50个主题。在这里看看吧。
21岁，写网络开发方面的文章。热爱阅读。我的目标是帮助人们以简单和有趣的方式理解软件开发的主题。我的博客在：ubahthebuilder.tech
如果你读到这里，请发推特给作者，向他们表示你的关心。鸣谢
免费学习代码。freeCodeCamp的开源课程已经帮助超过40,000人获得开发工作。开始吧
