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

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

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

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

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

实验介绍

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

知识点

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

前端技术简介

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

在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】每天更新最新技术文章干货。

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

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

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

HTML

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

以标签对作为主要特征，如

这是一个段落，这些标签会被浏览器解析成不同的模块，比如 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><imgsrc="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg"alt=""width="200"/>
</div>

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

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

这就是 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 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 = "修改一下字符串";</pre>

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

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

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

JavaScript 就是为什么网页可以做那么多交互的源头了。掌握起来任重道远。这三门前端技术先了解到这里

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

网关是什么，一文带你快速入门腾讯技术工程
今天来开门见山地讲讲网关是一个怎么样的组件,网关在做什么事情.网关这个词其实到处都在用,它可以工作在硬件层面,也可以工作在网络层,还可以工作在应用层. 网关快速入门网关在做什么? 我们今天讲的实际上 ...
《Web前端开发技术(HTML+CSS+JavaScript)》题库附答案
什么是Web技术? 答:Web即全球广域网(World Wide Web),也称为万维网,它是一种基于超文本和HTTP的.全球性的.动态交互的.跨平台的分布式图形信息系统.它是建立在Internet上 ...
sp烘焙流程_3分钟带你快速入门substance painter 贴图制作
先看下基本效果预览: 我也是萌新菜鸡,不喜勿喷哦~ 下面是具体步骤: 1.导出模型: 在确保UV和光滑组分好的前提下进行高低模导出,为了确保烘焙时候模型之间的穿插不出现错误,我们需要对高低模进行分组, ...
【HTTP】10分钟带你快速了解HTTP中常见的状态码（内附大量实例）
目录前言 ▶ 为什么要了解状态码? 正题 ▶ 状态码的类别 ▶ 状态码--200(OK) ▶ 状态码--204(Not Content) ▶ 状态码--206(Partial Content) ▶ ...
javascript---001-运行原理01_前端三大技术_JS重要性_Atwood定律_JS应用_JS让人迷惑_TypeScript会取代JS吗_JS是一门编程语言_浏览器工作原理_浏览器内核
javascript-001-运行原理01 1.前端三大技术 HTML CSS Javascript 2.Javascript的重要性 (1)javascript是很多框架的基础,Vue,React, ...
10分钟带你了解python_10分钟Python入门系列教程及学习资源分享
本期分享笔记内容归档此前入门教程文章,方便查看 10分钟带你Python入门的特点简单谈下如何寻找Python学习资源关于分享Python学习资源的分享问题本人对于Python学习创建了一个小 ...
前端三大技术 HTML、CSS、JavaScript 快速入门手册
听到前端技术,不少朋友一定会感到有些陌生.但其实,前端,你每天都在接触. 你正在使用的APP,你正在浏览的网页,这些你能看到的界面,都属于前端. 而前端最重要的三大技术,HTML,CSS,JavaSc ...
【效率】超详细！手把手带你快速入门 GitHub！
作者:Peter 编辑:JackTian 来源:公众号「杰哥的IT之旅」快速入门GitHub GitHub在程序开发领域家喻户晓,现在几乎整个互联网的开发者都将版本管理工具GitHub作为版 ...
java编程石头剪刀布图片_石头、剪刀、布！10分钟带你打开深度学习大门，代码已开源...
原标题:石头.剪刀.布!10分钟带你打开深度学习大门,代码已开源沉沉发自宇宙中心量子位出品 | 公众号 QbitAI 深度学习技术的不断普及,越来越多的语言可以用来进行深度学习项目的开发,即 ...

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

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

最新文章

热门文章