10 分钟，带你快速入门前端三大技术（HTML、CSS、JavaScript)

矫情吗；* 2023-07-05 10:17 7阅读 0赞

听到前端技术，不少朋友一定会感到有些陌生。但其实，前端，你每天都在接触。

你正在使用的APP，你正在浏览的网页，这些你能看到的界面，都属于前端。

而前端最重要的三大技术，**HTML，CSS，JavaScript**，则是每一个前端开发者必须具备的技能。

掌握这些技能，你可以快速地做出一个酷炫的APP界面或者一个简单大方的网站页面。因此，就让我们一起来快速学习一下这三门技术吧。

--------------------

**以下内容节选自课程[《Vue.js 和 Node.js 构建内容发布系统》][Vue.js _ Node.js]。**  
大家也可以点击课程[链接][Vue.js _ Node.js]，在实验楼提供的虚拟机环境下进行学习。

# 实验介绍 #

本实验主要介绍一下前端的基础知识，对比认识一下各个框架的代码编写方式，并介绍我们本次技术选型的主要思路。对于前端三大技术 HTML、CSS、JavaScript，简单的介绍了基本情况和常用语法。中间介绍了现代框架的一些情况，并通过实际的案例，用代码直观的认识一下各种框架的实现方式。最后分析一下项目的技术选型。

# 知识点 #

*  HTML、CSS、JavaScript 快速概览
 *  前端框架概览和选型
 *  后端选型
 *  数据库选型
 *  Web 服务器选型

# 前端技术简介 #

本节我们简单介绍一下前端最基础 HTML, CSS, JavaScript 三驾马车。虽然本课程预设的读者为零基础开发者，但是前端开发一定会这三种技术的运用有要求。建议抽空学习 [《 Web 前端工程师路径》][Web]中的阶段 1 甚至阶段 2。这里仅做语法介绍和基本使用的概览。

在此之前先认识一下实验环境。实验环境和 VS Code 使用体验基本一致。你可以启动一个终端，并在其中输入 Linux 命令。

![format_png][]

image

后面的命令无特殊说明的都是在此**终端命令行**中输入。大多数命令可以多开终端窗口分别执行。

那么下面我们就快速的了解一下。

# HTML #

HTML 全称超文本标记语言，几乎是从万维网和浏览器产生伊始就存在的。主要用于结构化信息来方便浏览器展示。

以标签对作为主要特征，如<p>这是一个段落</p>。这些标签会被浏览器解析成不同的模块，比如 p 标签就是一个段落，img 标签就是一个图片，a 标签就是一个超链接，标签名不区分大小写。

立刻就来尝试一下吧。首先通过命令行新建一个 demo 目录：

mkdir demo

然后命令行进入 demo 目录：

cd ./demo

![format_png 1][]

image

新建一个hello.html 文件，可以在实验环境左边的浏览框内在 demo 上右键选择 New File 然后命名为 hello.html；或者也可在命令行终端输入 touch hello.html，同样是新建文件。

在其中输入以下内容：

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>标题</title>
      </head>
      <body>
        正文
      </body>
    </html>
    前端学习裙：950.919.261

然后右击文件选择 Open With → Preview。

![format_png 2][]

image

看到了吗？其实我们就是新建了一个 **.html** 后缀的文本文件，然后浏览器就可以将其中的内容展示出来。你也可以在自己的桌面上新建一个，然后使用浏览器打开看看效果。

这里嵌套代码的缩进格式是为了美观和可读性，并无严格要求。

head 标签中是一些暂时无需用到的头部信息，渲染的主体是 body 标签。下面我们修改 body 标签里面的内容，填入一些常用标签来直观感受一下。

<body>
      <h1>页面标题</h1>
      <div>一个块容器</div>
      <div>又一个块容器</div>
      <p>这里是段落了，间距变大</p>
      <div>一个块容器</div>
      <div>
        <div>
          多层嵌套：
          <div>内部第一个</div>
          <div>内部第二个</div>
        </div>
      </div>
    </body>

保存之后切换到浏览标签看一看，有没有感觉被忽悠了？嵌套没嵌套根本没体现出来，就像 Word 里排了一下版，按了几个回车。

![format_png 3][]

image

因为我们没有对显示样式进行修改，那是 CSS 的事。HTML 主要管内容的组织结构。

**这里有一点针对学习的小建议，本课程中给到的全部代码请手动输入，忘记复制和粘贴快捷键。**

**而且最好不要机械的一个字符一个字符照着抄，尽量看过一行或一小段代码之后，靠短暂的印象去输出，别怕出错，只有过脑子并输出实践，才是最快掌握一项技能的捷径。**

以上两句话是本课程中**最有价值**内容之一。

下面我们接着修改刚才的代码，再给 body 中添加几个常用标签。每次修改和保存之后记得到预览页看看样式的变化。

<ul>
      <li>
        HTML
      </li>
      <li>
        CSS
      </li>
      <li>
        JavaScript
      </li>
    </ul>

<div>
      <a href="https://www.shiyanlou.com" target="_blank"
        >点击超链接跳转至实验楼首页</a
      >
    </div>

![format_png 4][]

image

最后的链接标签 a 和图片标签 img 出现了标签属性，属性为 attr="value" 格式，可以给标签增加更丰富的信息。

同时 img 标签还是一个单标签，不需要在后面添加 </img> 配合使用。

至此对 HTML 的简要介绍告一段落。

互联网上看到的各种五彩缤纷网页都是由这些 HTML 组成的，但是为什么我们写的这么难看？下一节我们就要学习一下如何用 CSS 美化页面。

# CSS #

CSS 全称层叠样式表，是专门用来修饰 HTML 样式的一种语言。我们修改一下上节的 hello.html 文件来直观感受一下。

**内部代码块引入**

在 head 标签内部增加以下 style 代码块：

<head>
      <meta charset="UTF-8" />
      <title>标题</title>
      <style type="text/css">
        div {
          border: 1px solid blue;
          padding: 2px;
          margin: 10px;
        }
      </style>
    </head>

这是再切换到预览页，发现没那么平铺直叙了。

![format_png 5][]

image

这就是 CSS 的第一种引入方式，HTML 内置代码块。

大括号外面的 div 是标签选择器，这里选中了本页面中的所有 div 元素。大括号里面是属性名与赋值，属性名都是固定的关键字，并已规定好了值的类型和可选范围。

读代码也就大概知道了，我们将 div 的边框设置为 1 像素宽、固体（单线型）、蓝色，填充（内边距）2 像素，边缘空白（外边距）10 像素。现在可以练习调整一下各个数字，预览看看发生了什么？

再说点题外话，懂一些英文对程序员来说非常必要，除了可以凭感觉就读懂没学过的代码，还可以在面向 Google 编程、面向 Stack Overflow 编程、面向 Github Issues 编程时游刃有余。

**外部文件引入**

然后我们再试一下外部文件引入，在 hello.html 的同级目录新建 hello.css，输入以下内容保存：

div {
      color: green;
      border: 2px dotted red;
    }

然后修改 hello.html，在 style 标签后面增加一行 link 标签，添加引入类型和地址：

预览看看，文字颜色变为绿色，边框的样式也被更新为 2 像素宽、点线型红色。

同样是 div 选择器，为什么边框的样式被覆盖了呢？注意 CSS 在同样条件下会后面代码覆盖前面，可以尝试交换 link 标签和 style 标签块的顺序看看。

**行间样式**

最后一种叫行间样式，这个结构更简单。修改 hello.html 中的 <div>内部第一个</div> 为

<div style="margin: 60px 0 10px 30px ;color:purple;">内部第一个</div>

![format_png 6][]

image

样式覆盖前两种方式了，因为行间样式的优先级较高。这里涉及到选择器权重，先给一个简单公式了解一下。

**!important > 行间样式 > ID > class | 伪类 | 属性选择 > 标签 > 继承 | 通配符。**

多个选择器作用时权重相加。这里算 CSS 里有点复杂的部分，暂时不展开。

这里还有个小知识点是内外边距 margin 和 padding 接受的完整的值是四个，顺序固定为“上 右 下 左”。如果省略参数则从末尾计算对向合并。比如：

*  margin:40px 20px 50px; 三个参数时，左右同为 20px。
 *  margin:40px 20px; 两个参数时 上下同为 40px, 左右同为 20px。
 *  margin:40px; 一个参数时呢？**请自行尝试理解。**

CSS 先讲这么多，虽然没有把我们的页面变多好看，但最起码知道努力的方向了。

# JavaScript #

制作 JavaScript 的快速入门简直非常伤脑筋。比起前两种技术 HTML 和 CSS，这是货真价实的编程语言了。

也是我们后面要用到的 Vue.js 和 Node.js 中的根基，一下子又很难讲很多，所以还是希望同学们能重视起来系统学习一下，最起码读到后面的代码时不至于陷入“这是啥这又是啥”的窘境。

来段代码直观认知一下，还是先内部代码块引入。

在 hello.html 的 head 标签内增加一个代码块：

修改 hello.html 的 h1 标签为：

保存预览，点击“页面标题”，会弹出提示框。

![format_png 7][]

image

JavaScript 代码加载之后就会执行，不存在编译阶段。行末的分号绝大多数时候可以省略。

我们先定义了一个变量 message，并赋值为“字符串提示”。定义变量关键字原是 var，ES6 新增关键字 let 有更清晰的作用域，可替代使用。

**学习 JavaScript 经常会碰到 ES6、ES7 之类的名词，实际上是 ECMAScript 标准的版本号的意思。可以简单理解为新版标准为 JavaScript 添加特定新特性。**

然后我们定义了一个函数 showMSG，并添加一个形参 msg。在函数体内部调用浏览器弹框方法，显示 msg 的值。function 是定义函数的关键字，暂时先把它当做一个功能封闭的盒子，当函数调用时，执行函数体内的代码。

调用部分是先给 h1 标签添加了 onclick 点击事件，被点击时触发 showMSG(message)，也就是把 message 传给了 msg。

之后再试一下调用外部 js 文件，新建 demo.js 文件，写入下面内容并保存。

message = "修改一下字符串";</pre>

然后修改 hello.html 文件，在 script 代码块后面增加一行：

![format_png 8][]

image

这次保存预览，点击“页面标题”，可以看到弹窗的文字变了。这个演示了 script 代码块在页面可以同时存在多个，也是顺序调用，而且互相之间可以直接访问。文件命名也没有要求，希望不会逼死强迫症。

JavaScript 就是为什么网页可以做那么多交互的源头了。掌握起来任重道远。

**以上内容节选自课程[《Vue.js 和 Node.js 构建内容发布系统》][Vue.js _ Node.js]。**

作者：实验楼  
链接：https://www.jianshu.com/p/e6238144c6ef  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[Vue.js _ Node.js]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.shiyanlou.com%2Fcourses%2F1505
[Web]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.shiyanlou.com%2Fpaths%2F12%2F
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY2NjItNjNlZjhhNjRlZTk1YTJiOD9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzY0MC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY2NjItMzZkOWE4Nzg4ZjdiZjhkND9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzYzOC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY2NjItMjY4NWJjNzM5YWYyZDZmMz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzUxNi9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY2NjItNjhkMjExYjVlYjdlMzY1Yz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzU0MC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY2NjItN2I2ZGYwNTRiMjZjOTk5Yj9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzUwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY2NjItY2RlNmI1MjQyZGFlNDAzMT9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzM2NC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY2NjItZjQwYzc1NjdkN2JkZTYxNT9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzY0MC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY2NjItMzMzNGI4MDViNmUxYjQ2Nj9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzY0MC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY2NjItMDNlYTVjM2M2MzNjMzJiYz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzY0MC9mb3JtYXQvd2VicA?x-oss-process=image/format,png