前言
你好，我是月亮，一名前端开发者。
我猜，既然你点进了这篇文章，说明你想要走上前端开发这条路。
什么？！不是吗？那那那......或许你对前端感兴趣？
什么？！竟然也不感兴趣？好吧好吧，OKOK。
不感兴趣也别急着走呀，希望这篇文章，能够让你产生那么一点点兴趣。
我从小就很喜欢将自己学会的东西传授给别人，当一个受人尊敬的小老师应该很快乐吧。
这个系列，我将把自己掌握的前端知识从零开始毫无保留地传授出去。
在这里没有复杂的课程，没有麻烦的概论，只有一点一点的技术积累。我会告诉你什么是重要的什么是可以先跳过的，我所走过的坑都不会让你再走一遍，我希望你能够学习到最纯粹最通俗易懂的技术。
开始我们的前端之旅吧！
HTML
什么是HTML，官方的定义是“超文本标记语言......”，我不想教你这些俗套的。
背书太累了，既然是语言，那我们就直接开写。
创建一个记事本文件，会创建吧？随便在桌面或者文件夹一个地方点击鼠标右键然后新建文本文档。
然后打开文件，把下面的内容复制进去，你先不用考虑下面的是什么意思。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> 你好！世界！ </body> </html>
然后我们保存并将文件后缀改成 .html，表示它是一个html文件。
要记得想要改后缀我们必须要让自己的电脑文件能够显示出后缀，我们要确保打开了显示文件拓展名。
修改完成，一般文件就可以用浏览器打开了，我们直接双击文件或者右键选择浏览器打开。
你的第一个网页就完成了，很简单对吗？
你还可以右键文件使用记事本打开修改一下文字再刷新网页试试。
编辑器
你可能会问我。
“我写这么多乱七八糟的英文，最后就显示这么几个字啊？那我要开发一个网页不是写不完了？”
“你开头那一段那么多我又看不懂更记不住，我自己怎么写出来啊，总不能每次写代码都复制一遍吧？”
别急，我很负责任地告诉你，程序员不用写这些，我们也不用记事本写代码，我们用编辑器，这里我们安装一个最轻便的编辑器，VSCode，有了它你就可以很容易的写代码了。
你可以通过自己的电脑商城去下载或者百度下载，记得要注意下载对应自己电脑系统的版本，现在大多数人的都是windows-64，我随文章同步，也会在自己的csdn资源上传，下载不到也可以去我csdn资源处看看。
我们可以用VSCode打开我们的文件或者文件所在的文件夹位置，这里我们可以在桌面上新建一个文件夹，将前面的index.html放进去，再打开整个文件夹。
点击一下左侧的文件就可以在我们的编辑器中显示了，我们就可以通过编辑器编写代码了。
编辑器有什么好处？当然是各种懒人快捷键啦！
我们先将这个html文件内容全部删除，空空如也，这时候我们输入 ! （英文的，记得敲代码的符号必须全是英文）
下面出现了智能提示，你可以用鼠标选择，也可以回车选择，也可以Tab按键（快捷补全）
对，只需要一下，你就得到了html文件的模板，这些你都不需要自己手动去敲出来。
然后你可以试着在body标签里面输入任何你想输入的文字显示在网页上看看了。
标签？标签是什么？别急，很快就告诉你。
HTML标签
HTML都是由标签组成的，我们不妨来分析一下HTML文件的的模板。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
我先变个魔法把一些多余的内容去掉。
<html> <head> <title></title> </head> <body> </body> </html>
我们不难发现：
<html> 会对应一个 </html>,
<head> 会对应一个 </head>,
<title> 对应 </title>,
<body> 对应 </body>。
这一对对就是标签。
而且标签可以包裹另一个标签，就像 title 包裹在 head 里面，head 和 body都包裹在 html 里面。
html 标签一般作为 HTML 文件的根标签，说白了就是作为最外面的标签，不会被其他标签包裹。
</html> 是 <html> 的闭合标签。
当我们某个标签中间没有内容时，我们可以不写闭合标签，将标签末尾加上 / 表示一个标签，比如 <html/> 我们将其称之为自闭和标签，当然啦这里只是举例子，html 根标签一般是不可以自闭和的，中间肯定要有内容。
title 标签中间的内容可以展示在我们的网页标题。
而一般所有的网页展示内容都写在 body 中。
我再解释一下我去掉的部分内容，首先我去掉了开头第一行 <!DOCTYPE html>
它是用来解释这个文件是HTML文件用的，我们不必去在意为什么它能解释，它可以不算在HTML标签中。
然后是几个 meta 标签，这个标签比较特殊，它不需要闭合，一般保持默认就可以了，感兴趣可以去了解一下 meta 可以做什么，但是我这里就不展开介绍了，我们目前还涉及不到一些 meta 的用法。
另外，我还去掉了 html 标签的 lang 属性。
等等？属性？属性又是什么？
标签的属性
<html lang="en"></html> ，我们可以看到 html 标签多了一个 lang="en" ，这是什么意思呢？
这 lang 就是 html 标签的属性，被双引号包裹的 en 就是它的值。
一般标签的属性都有它特殊的功能，而值就决定了它属性的功能如何发挥作用。
lang 属性的全称是 language（语言），而 en 全称是 english（英文）。
意思很明显了，html 拥有一个属性 lang ，设置成 en 可以告诉浏览器该网页是英文网页。
每个标签都有自己特殊的一些属性，而标签也有许许多多个，基本是很难一口气记完的。
不停的记忆重复的东西非常打击人的学习积极性，因此正确的做法应该是：
我们要在学习中遇到哪个不会，再去学习哪个。
或者我们在学习中需要什么功能，再想办法查找资料，看看有没有什么标签和属性可以实现我们要的功能。
基本所有的学习都可以采取这种方式。
注释
最后再介绍一下比较简单的注释，所有语言都可以有注释，注释的内容不会在语言中生效。
所以我们可以注释掉我们暂时不需要用的代码，也可以使用注释来解释一下当前的内容，方便别人或者很久之后的自己能够看懂自己写的内容。
html语言中的注释是这样的：<!-- 注释内容 -->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 这是网页标题 --> <title>Document</title> </head> <body> <!-- 这是网页内容 --> 你好！世界！ </body> </html>
“不是吧？这注释符号也太难写了。”
别急，我们只用输入一段中文之后，使用快捷键 ctrl+/ 就可以自动变成注释了，再使用一次又可以去掉注释。
尾言
第一篇其实没有很多内容，只介绍了HTML的基本模板，还有它的标签、属性、注释，我们要学的肯定不止这些。
在下一篇我将会继续完善HTML的知识体系，比如必须掌握的一些标签属性等。
也希望能够通过本文得到一些零基础同学的建议，有没有什么问题都可以来群名片联系我与我交流。
我会不停完善本专栏的知识体系，争取让人人都可以轻松的学会前端开发。
如果本文对你有帮助的话，欢迎点赞收藏，感谢~
