目的

这些年硬件性能越来越好，HTML5、CSS3、ES6等新特性被越来越广泛的支持，前端开发变得越来越火。它简单易上手、效果华丽、跨平台，用作用户界面开发是非常合适的。这篇文章将先介绍一些入门的基础内容，文中涉及的代码等只做演示使用，不用搞懂，后面会另外介绍。

开发工具

前端开发对工具要求很低，有个浏览器和记事本就可以了，当然实际上不到万不得已不推荐这么干。

先说浏览器，浏览器一般用苹果设备上自带的浏览器、chrome浏览器、新版Edge浏览器、国内带极速模式的浏览器这些比较好。除非客户有需求，一般来说就不要用IE了，微软自己都放弃了。如果只是随便玩玩浏览器这块一般装个chrome就行，如果是需要正式上线使用可能需要安装很多浏览器测试兼容性。
在这里插入图片描述

开发工具的话可以用VS Code，好用、免费：https://code.visualstudio.com/
安装完VS Code后可以在VS Code中安装一个叫Live Server的插件，方便边修改边看代码效果：
在这里插入图片描述
除了上面的演示外Live Server还有个好处是不光能用本机调试，同一局域网下的其它设备也可以用于调试，只要打开浏览器输入 http:// + 本机IP + :5500/文件名 就可以访问了，并且也是支持实时刷新的。

基础说明

简单点说前端主要就是指网页，主要就是htm、html文件这些，通常双击这些文件时会通过浏览器打开（当然实际上要复杂一些，先从简单的开始讲）。这些文件都是可以右键用记事本打开的，打开都可以看到向上面演示中的代码那样的文本。

前端开发者根据一定的规则来编写文本（文档、代码），浏览器则会用同样的规则来解读这些文档，然后根据规则进行显示，最终就是我们看到的网页了。 这里的规则是由机构制定的，比如HTML5、CSS3、ES6这些。

前端从代码构成来说分为HTML、CSS、JS（JavaScript）三个部分，分别负责一个方面的功能：

HTML用来描述网页的文档结构，用来当作网页内容的容器。代码中包含 <> 或者 <>...</> 的都是HTML代码；
CSS用来描述网页的外观特征，比如排版、外形、颜色等；
JS主要两个功能：动态的控制网页 & 实现通信交互；（JS可以直接操作html和css，功能非常强大，所以在前端学习中js需要投入更多的精力）

打个比方来说HTML、CSS、JS三块相当于下面这个图所示：
在这里插入图片描述

上面内容可以算是前端最基础的内容了，这里再介绍下前端开发中两个大坑：

规则的制定往往会先于浏览器，加之用户并不会实时更新浏览器，所以很多新的规则特性经常会无法正确呈现；
浏览器虽然会依据规则来解析呈现，但是对于规则未规定的东西各个浏览器上表现并不统一；

为了解决上的一些问题实际前端代码中往往会加入很多冗余代码。

简单示例

这里先不讲具体的语法，先放几个简单的示例看看，熟悉下：

<!DOCTYPE html>
<html>
<head><!-- 当前文档为UTF-8格式 --><meta charset="UTF-8"><!-- 网页标题 --><title>这里是网页标题</title><!-- 网页图标 --><link rel="shortcut icon" href="favicon.ico"><!-- 用户网页的可视区域，移动端做响应式设计时需要加上这个标签 --><meta name="viewport" content="width=device-width, user-scalable=no"><style>/* 清除浏览器默认样式 */* {margin: 0;padding: 0;}</style>
</head>
<body>这里填充网页内容
</body>
</html>

上面是个最简单的示例，通常大部分网页都会由上面几个内容，其中“清除浏览器默认样式”方式很多，上面代码中的方式是比较常见的一种。

上面代码是最基本的结构了（当然实际上缺少其中的一些标签也没关系），我们可以在此基础上添加内容：
在这里插入图片描述
上面的示例看上去很简陋，和现在各种好看的页面相去甚远，因为没有CSS的加持，下面演示个带上CSS美化的示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><style>* {padding: 0;margin: 0;}/* 占满页面、内容以网格布局放最中间、背景色设置为e6e6e6 */body {width: 100vw;height: 100vh;display: grid;place-items: center;background-color: #e6e6e6;}/* 设置neumorphism类对象长宽、无边框、四周圆角、背景色、阴影样式 */.neumorphism {width: 200px;height: 100px;border: none;border-radius: 30px;background-color: #e6e6e6;box-shadow: 10px 10px 20px #c4c4c4, -10px -10px 20px #ffffff;}/* 光标在neumorphism类对象上的时候的样式 */.neumorphism:hover {}/* 设置neumorphism类对象活动时的样式，比如按钮被按下时 */.neumorphism:active {box-shadow: inset 10px 10px 20px #c4c4c4, inset -10px -10px 20px #ffffff;}/* 设置neumorphism类对象获取焦点时样式 */.neumorphism:focus {outline: none;}/* 设置neumorphism类对象内部span对象样式 */.neumorphism span {display: block;user-select: none;color: #a6a6a6;font-size: 32px;text-align: center;line-height: 100px;}/* 设置neumorphism类对象活动时它内部span对象样式 */.neumorphism:active span {transform: scale(0.95);}</style>
</head><body><!-- 按钮class设置为neumorphism --><button class="neumorphism"><span>BUTTON</span></button>
</body></html>

在这里插入图片描述
上面是一个用CSS实现的新拟物风格的按钮。上面代码中我用了网格布局将按钮居中，但是目前Edge浏览器还不支持网格布局，所以按钮没有被居中，在Chrome浏览器中就能显示为居中。当然这些兼容性问题大多好解决，这里就先不管了。

上面都是静态的示例，下面再来个带动画效果的：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><style>* {padding: 0;margin: 0;}body {width: 100vw;height: 100vh;display: grid;place-items: center;background-color: #323232;}/* 动画 */@keyframes anime-rotate {0% {transform: rotate(0);}100% {transform: rotate(360deg);}}/* 设置loading类对象宽高和动画 */.loading {width: 200px;height: 200px;animation: anime-rotate 2s infinite 0s;}/* 设置loading类对象中圆形所占大小、半径，边框颜色、宽度、开口，不填充*/.loading circle {cx: 50%;cy: 50%;r: 40%;stroke: red;/* (r * 3.14) / 2 */stroke-dasharray: 62.8%;stroke-width: 6%;stroke-linecap: round;fill: none;}</style>
</head><body><!-- 放置一个svg图形，class设置为loading --><svg class="loading"><circle></circle></svg>
</body></html>

在这里插入图片描述

总结

前端入门算是非常简单的了，前端开发就是按一定规则编写浏览器能解读的文档。
前端具体相关语法等内容比较多，但都比较简单，更多详细内容可以自行在CSDN、博客园、百度w3c、B站、慕课网等地方学习。前端的教程一抓一大把，基本上内容都差不多，重要的还是多看多练。

题外话

工作这些年一直在搞搞单片机、嵌入式这些，可以算是偏硬件开发的，但是对于客户来说他只管使用，经常没有开发界面的程序员的时候还得自己写个先对付着用。从早期的VB到后来C# WinForm再到后来C# WPF都用过，也用过官方工具开发过安卓应用。
学的杂七杂八样样都不精。其实想想一开始要是学QT就挺好，跨平台，用C/C++就可以开发。唯一的就是QT的版权问题搞不太懂。不过现在再学QT感觉倒也没太大必要，现在的Web前端足够做到我大部分的需求了，开发调试又方便，不得不说这个用起来是真的爽。