目的

这些年硬件性能越来越好，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前端足够做到我大部分的需求了，开发调试又方便，不得不说这个用起来是真的爽。

前端入门 01：基础入门相关推荐

Bootstrap响应式Web开发笔记01——基础入门
Bootstrap响应式Web开发笔记01--基础入门 Bootstrap响应式Web开发笔记02--移动端页面布局 Bootstrap响应式Web开发笔记03--Bootstrap栅格系统 Boot ...
PLC编程入门-01基础知识介绍
PLC编程入门-01基础知识介绍 PLC的组成结构 PLC编程语言: PLC输入输出的特点输入输出 PLC的组成结构简图明细图 CPU:控制器和运算器本身就是CPU主要组成部分,和PC的CPU ...
arduino 学习笔记及课件01基础入门
arduino 学习笔记及课件01基础入门以下学习笔记中图片部分由太极创客视频截图所得概论一. 引脚及信号 1.1引脚模式 INPUT:当Arduino没有使用上拉电阻或下拉电阻而直接与开放的开 ...
python爬虫教程入门-零基础入门Python爬虫不知道怎么学？这是入门的完整教程
原标题:零基础入门Python爬虫不知道怎么学?这是入门的完整教程这是一个适用于小白的Python爬虫免费教学课程,只有7节,让零基础的你初步了解爬虫,跟着课程内容能自己爬取资源.看着文章,打开电脑 ...
java基础入门ppt_Java基础入门.ppt
Java基础入门ppt课件 * 2.5.2 do while循环语句 do-while循环语句和while循环语句功能类似,其语法结构如下所示: 2.5 循环结构语句 2.5.2 do while循环 ...
python零基础入门pdf-零基础入门学习Python PDF 扫描版
给大家带来的一篇关于Python编程相关的电子书资源,介绍了关于Python.零基础.入门学习方面的内容,本书是由清华大学出版社出版,格式为PDF,资源大小59.3 MB,小甲鱼编写,目前豆瓣.亚马逊 ...
web前端开发零基础入门教程
端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动端 ...
前端学习01 HTML入门
PC端网页布局--学完这个系列的目标是完成一个静态网站, 精通网页布局 HTML5->CSS3----->H5C3提高->网页制作实际开发制作流程规范 HTML简介网页网页是构成 ...
01 基础入门：概念名词
1.域名由于IP地址具有不方便记忆并且不能显示地址组织的名称和性质等缺点,便设计出了域名,并通过网域名称系统来将域名和IP地址相互映射,使人更方便地访问互联网,而不用去记住能够被机器直接读取的IP地 ...
javascript基础入门_javascript基础入门学习第一篇
今天主要讲述js,在讲述今天的编程知识之前,我们要对C++做一个说明因为一些原因C的知识不做更新了,下面将讲述js的编程知识,首先需要了解的是js是一个脚本语言不是编程语言这两者的区别就是一个需要依附 ...

前端入门 01：基础入门

文章目录

目的

开发工具

基础说明

简单示例

相关拓展

第三方库与框架

打包成APP

后端开发

总结

题外话

前端入门 01：基础入门相关推荐

最新文章

热门文章