前言

说起前端，我们常常会说前端三件套。想要入门前端的话，首先必不可少的学习便是学习前端三件套，当然还有一些框架可以学习！

前端三件套

我们都知道现在的网页由html编写，css修饰样式，JavaScript实现交互。

一般如果想在html中使用css，可以通过以下三种方式来实现，接下来用一些示例代码来体验一下如何使用css，一个盒子（背景色为粉色，w：200，w：200）的三种不同的写法

行内样式就是把 CSS 样式直接放在代码行内的标签中，一般都是放入标签的style属性中，由于行内样式直接插入标签中，故是最直接的一种方式，同时也是修改最不方便的样式。

<div style="background-color: pink; width: 200px;height: 200px;"></div>

内嵌样式通过将 CSS 写在网页源文件的头部，即在 <head> 和 <head> 之间，通过使用 HTML 标签中的 <style> 标签将其包围，其特点是该样式只能在此页使用，解决行内样式多次书写的弊端。

同理想要实现上述的css，只需要写在style标签中，需要注意的是它的语法。

<style>
        .box{
            background-color: pink;
            width: 200px;
            height: 200px;
        }
</style>

需要注意的是需要增加选择器，比如：

<div class="box"></div>

链接式通过 HTML 的<link>标签，将外部样式表文件链接到 HTML 文档中，这也是网络上网站应用最多的方式，同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性。

这时候需要重新创建一个文件：demo.css

这样就可以重复利用这个css代码，需要的时候只需要使用link引用即可，大大提高了代码的复用性

<link rel="stylesheet" href="./demo.css">

demo.css文件：

 .box{
            background-color: pink;
            width: 200px;
            height: 200px;
        }

是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画等等。一般可以通过操作dom来实现。

例如用JavaScript实现一个累加的函数add()：

function add() {
     sum+=1;
}

前端技术变换之快，我们需要不断的更新自己所学的知识，当然学好源生代码JavaScript会对后面学习框架有很大的帮助，希望我们都可以并肩前行！