前端三大技术 HTML、CSS、JavaScript

前端三大技术 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 命令。

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

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

HTML

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

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

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

mkdir demo

然后命令行进入 demo 目录：

cd ./demo

新建一个 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。

看到了吗？其实我们就是新建了一个 .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 里排了一下版，按了几个回车。

因为我们没有对显示样式进行修改，那是 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>

最后的链接标签 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>

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

这就是 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>

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

!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>

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

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>

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

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

以上内容节选自实验楼训练营课程《Vue.js 和 Node.js 构建内容发布系统》。

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

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

碗不过冈！三份资料，都是精选！请笑纳！

1. 字节跳动大佬的Python自学笔记

这是我的一个朋友自学资料包，通过这个资料包自学拿到了字节跳动的Offer，

下面是他之前入门学习Python时候的学习资料，非常全面，从Python基础、到web开发、数据分析、机器学习、深度学习、金融量化统统都有，该手册是HTML版本，左侧是目录，可以点击，右侧是对目录知识点的讲解，适合Python学习者，对某些知识点不熟悉的话，将页面保存到浏览器书签，可以快速在没网的情况下查找知识点，总计有200多页！

Python知识手册

Linux知识手册

网络编程、正则、mysql知识手册

爬虫查询手册

数据分析知识手册：

机器学习知识手册：

深度学习知识手册：

2. Python繁琐工作自动化

背景介绍

如今，人们面临的大多数任务都可以通过编写计算机软件来完成。通过Python编程，我们能够解决现实生活中的很多任务。

本书是一本面向实践的Python编程实用指南。本书的目的，不仅是介绍Python语言的基础知识，而且还通过项目实践教会读者如何应用这些知识和技能。

主要内容

本书的首部分介绍了基本Python编程概念，第二部分介绍了一些不同的任务，通过编写Python程序，可以让计算机自动完成它们。第二部分的每一章都有一些项目程序，供读者学习。

书籍短评

我可能要爱上这个作者了。作为入门书籍非常棒，从实用的例子来练习熟悉，章节顺序安排合理，跟着练下来可以信心十足的明确自己会做哪些，还能做哪些。包括最开始介绍的如何排查错误，其思路也可以运用到很多事物上。--有事起奏

这本书也非常好，而且udemy上还有本书作者制作的配套教程，质量很高。--行简

电子书下载

获取步骤如下： ↓ ↓ ↓

引用外部文件(如超链接或者插入图片)时，经常会遇到我们的页面文件跟要引用的目标文件不在同一目录下的情况，这个时候，就带来了文件引用路径的问题。通常情况下，我们将引用的路径分为两种情况，绝对路径和相对路径。

绝对路径

概念

绝对路径是指文件在硬盘上真正存在的路径，即物理路径。例如“bg.jpg”这个图片是存放在硬盘的“D:\work\code\imgs”目录下，那么， “bg.jpg”这个图片的绝对路径就是：

应用

通常我们使用绝对路径，更多应用是在定位网络资源上，

如：https://image.so.com/i?ie=utf-8&src=hao_360so&q=%E6%95%85%E5%AE%AB%E7%BB%9D%E7%BE%8E%E9%9B%AA%E6%99%AF

使用绝对路径的缺点

在实际开发中，我们很少会使用绝对路径，如果使用“D:\work\code\imgs\bg.jpg”来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了。因为上传到Web服务器上时，可能整个网站并没有放在Web服务器的D盘，有可能是E盘或H盘。即使放在Web服务器的D盘里，Web服务器的E盘里也不一定会存在“D:\work\code\imgs\bg.jpg”这个目录，因此在浏览网页时是不会显示图片的

相对路径

为了不同设备存放路径不一致的这种情况，通常在网页中指定文件时，都会选择使用相对路径。所谓相对路径，就是相对于当前文件的位置。关于相对路径，有以下三种情况：

同级查找

当图像文件和HTML文件位于同一文件夹时，只需输入图像文件的名称即可，如：

查找下一级

当图像文件位于HTML文件的下一级文件夹，输入文件夹名和文件名，之间用“/”隔开，如：

查找上一级

当图像文件位于HTML文件的上一级文件夹，在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如：

在线咨询

上一篇：手机自动化测试IDE - 手把手教你用Airtest
下一篇：不会android也能玩转SensorTile上位机

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商