本文是系列文章的一部分：Web 基础知识
所以您决定学习 Web 开发。
太棒了！但是，一旦你开始四处寻找教程、指南和其他资源，你很容易就会不知所措。Web 开发融合了许多不同的技术，它们共同构成了我们今天所知的互联网。
了解它们如何协同工作并非易事，尤其是在你刚开始 Web 开发之旅的时候。你应该先学习哪些？它们的作用是什么？它们都意味着什么？
好玩编程来帮你。让我们从头开始。
介绍
从最基本的层面来说，所有网站都由三种基础技术构建：HTML、CSS 和 JavaScript。所有其他与前端 Web 开发相关的概念或技术都基于这三种构建块之一，或者与其协同工作。 扎实掌握 HTML、CSS 和 JavaScript 对于理解 Web 开发以及学习如何创建自己的网站和 Web 应用程序至关重要。
HTML
HTML 是超文本标记语言 (HyperText Markup Language)的缩写，最新版本是 HTML5。HTML 是现代互联网的基础。您访问的每个网站或使用的每个 Web 应用程序都构建在 HTML 文档创建的结构之上。
一个直观地理解 HTML 功能的好方法是想象一座正在建造的建筑物。所有建筑物都有一个框架，无论是钢结构还是木质结构，它构成了从地基到屋顶的基本结构。这个结构决定了建筑物的大小和形状；无论建筑物竣工后是什么样子，也无论它用于什么用途，一切都将围绕着这个钢结构进行构建。
HTML 是用户与任何网站交互的框架。 它是网站构建的基础，它告诉你的浏览器如何构建你正在访问的网站。
就像房子建好后你看不到它的木框架一样，HTML 的结构部分通常也是隐藏的。你的 Web 浏览器会使用它以及 CSS 和 JavaScript 来构建网站，并以开发者想要的方式呈现给你。
HTML 赋予了网站结构。但它是如何做到这一点的呢？
元素
从最基本的层面来说，HTML 通过使用“元素”来构建网页结构，而这些元素通常对普通网站访问者来说是不可见的。但即使你看不到它们，通常也能猜出它们的位置。这是因为元素用于将网页划分为逻辑部分。当你看到导航栏、标题、文本段落或页脚时，你可以肯定至少有一个 HTML 元素与之关联。
如果说 HTML 就像建筑物的钢架，那么元素就像构成框架的一根根横梁。元素由一小段称为“标签”的文本定义，这些文本定义了元素的起始和终止位置。标签种类繁多，组织方式也多种多样——甚至可以嵌套标签——但需要记住的是，计算机上的 Web 浏览器会按照 HTML 文档的顺序从上到下读取这些标签。网站上的项目可以通过 CSS 或 JavaScript 进行视觉上的重新排列，但它们在页面上的初始位置由其在 HTML 文档本身中的位置决定。
如果您想查看网站的 HTML，您只需访问Chrome或Firefox中的开发人员工具。
HTML 也是残障人士访问网页的基础。屏幕阅读器允许盲人或视力低下的人以音频为主的格式使用互联网。它们的工作原理是直接读取 HTML，并根据其结构进行编程，以提取元素标签中包含的信息。对于现代网页开发者来说，遵循良好的网页无障碍标准至关重要，它能让网站更易于所有人使用。
CSS
CSS，即层叠样式表，是 Web 开发人员用来控制他们所创建的网站的外观和感觉的工具。
让我们回想一下之前关于建筑的类比。 我们有了钢结构框架——HTML——但建筑竣工后会是什么样子呢？外墙是砖墙、木板还是石材？应该刷漆吗？如果刷漆，刷什么颜色？ 这些都是 Web 开发者用 CSS 来解答的问题。
CSS 几乎可以控制网站的所有视觉元素。看看你正在浏览的网站。它上面的所有内容都由 CSS 控制（或者用行话来说就是“样式化”）。背景颜色、文本颜色、文本大小、图片或视频在页面上的显示位置、导航栏的位置，甚至一些动画都由 CSS 设置。
样式表
在现代 Web 开发中，CSS 是写在一个单独的文档中，称为“样式表”，该文档在 HTML 文档中使用链接元素引用。
样式表包含一系列 HTML 元素，这些元素由各种“选择器”标识，供开发者设置样式。每个元素可以包含任意数量的属性和属性值，用于设置该元素在 Web 浏览器中呈现给用户的样式。这些属性与页面样式的各个方面都有特定的映射关系。目前，只需了解 CSS 规则可以相互继承属性值，甚至在某些情况下可以相互覆盖即可。
CSS 是一个很大的话题，只要你从事 Web 开发，就很可能会不断学习更多相关知识。市面上有很多现成的框架、预处理器以及许多其他 CSS 相关的工具，可以在你学习新技能的过程中深入研究。最重要的是从一开始就学好基础知识，这样才能在编写自己的 CSS 样式表时有清晰的了解。
JavaScript
JavaScript 是互联网和 Web 浏览器的编程语言。当你在线购物时，JavaScript 正在运行。当你查看本地天气雷达时，JavaScript 正在运行。当你使用社交媒体时，JavaScript 也在运行。简而言之，JavaScript 赋予网站和 Web 应用程序实际执行操作的能力。
与 CSS 类似，JavaScript 通常写在单独的文件中，并通过引用 HTML 本身进行连接。JavaScript 是一种“解释型”语言，这意味着代码在浏览器激活时由浏览器运行。有些 JavaScript 代码设置为在页面加载时自动运行，而有些则处于休眠状态，等待用户输入后才执行。
正如我之前所说，JavaScript 是一门真正的编程语言。 这意味着它拥有数组、for 循环、if-else 语句以及许多其他与计算机科学相关的功能。
尽管如此，这门语言实际上对初学者非常友好。你不需要拥有计算机科学或深奥数学的学位就能开始学习这门编程语言，而且由于 JavaScript 与 Web 浏览器交互的方式，你很快就能做出一些令人惊叹的东西。
DOM
JavaScript 的独特之处在于它能够操作 DOM。文档对象模型 (DOM) 是一种 API（高级编程接口），它允许 JavaScript 在用户浏览页面和使用网站功能时操作网站的 HTML 和 CSS。简单来说，Web 浏览器可以读取 JavaScript 并实时更改页面的外观、风格甚至结构。
回到我们之前关于建筑的类比……嗯，现在开始变得难以理解了。想象一下，如果你能挥动一根魔杖，把建筑的木质墙板变成砖块。或者把建筑的颜色从灰色变成亮蓝色。还记得我们建筑内部由 HTML 的钢梁构成吗？通过使用 DOM，JavaScript 也可以改变这些钢梁！
JavaScript 是一款功能强大的工具，可用于创建各种内容，从实用的应用程序到便捷的购物体验，甚至游戏。JavaScript 非常复杂，需要学习的内容很多，但也有很多优秀的免费资源可供学习基础知识并从零开始编写代码。
结论
现在，你应该对主要的 Web 技术、它们的作用以及它们如何协同工作来创建我们每天看到和使用的互联网有了更深入的概念理解。一旦你学习了 HTML、CSS 和 JavaScript 的基础知识，你将拥有坚实的基础，可以在此基础上创建自己的网站和应用程序。
