前端三大技术 HTML、CSS、JavaScript 快速入门手册

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

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

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

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

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

实验介绍

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

知识点

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

前端技术简介

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

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

image

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

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

HTML

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

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

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

mkdir demo

然后命令行进入 demo 目录：

cd ./demo

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>

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

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 里排了一下版，按了几个回车。

image

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

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

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

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

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

<h4>4 级标题</h4>

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

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

<div>
  <img
    src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg"
    alt=""
    width="200"
  />
</div>

image

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

同时 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>

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

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 标签，添加引入类型和地址：

<style type="text/css">
  div {
    border: 1px solid blue;
    padding: 2px;
    margin: 10px;
  }
</style>
<link rel="stylesheet" href="hello.css" />

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

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

行间样式

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

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

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 标签内增加一个代码块：

    <link rel="stylesheet" href="./hello.css">
    <script>
      let message = "字符串提示";
      function showMSG(msg) {
        alert(msg);
      }
    </script>

修改 hello.html 的 h1 标签为：

<h1 onclick="showMSG(message)">页面标题</h1>

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

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 = "修改一下字符串";

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

<script src="./demo.js"></script>

image

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

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

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

这三门前端技术先了解到这里，想要更深入学习如何使用前端技术构建内容发布系统，比如做个高逼格的博客，搭建一个交流社区，或者为企业制作官网等，可以在这门《Vue.js 和 Node.js 构建内容发布系统》课程中继续学习噢。

该课程会提供完整的虚拟机环境，手把手教大家如何从头构建实现一个前后端分离的内容发布系统，包括了前端页面、后端服务、数据库等。

posted @ 2020-02-13 18:30  蓝桥云课  阅读(1044)  评论(0)  编辑  收藏  举报