html菜鸟教程之HTML新手如何快速入门及HTML类的概述[图]

一、html菜鸟教程，HTML新手如何快速入门
首先来认识一下HTML：
HTML是一种超文本标记语言，目前已经发展到了第五代：HTML5。
1993年起草了HTML1，到了1997年W3C推荐了HTML的标准，并延续到了HTML4。但是随着互联网的发展，前端页面的数据存储需求、调用系统内置功能的需求、以及富媒体甚至网页版的IDE、类操作系统应用等都需要搬到浏览器。这样HTML5的诞生，就解决了一大部分富媒体、富应用的难题。

第一：开发工具的选择
1、Nodepad++，作为一种文本编辑器，可以通过颜色标记各种html的标签，同时可以提示出来基本的html语法，但是缺点也比较明显：没有集成容器运行，同时也不支持自动补标签的功能。但是作为新手前期的开发IDE，能够帮助新手快速记忆打好基础。
2、SublimeText3，界面和功能，相对于Nodepad++有个更多的优化。支持代码自动缩进，格式化HTML代码，支持快捷键注释和自动保存。对于CSS和JS的引用，也能够快速的读取磁盘相对路径，进而自动补充。在写代码的效率上提升不少。
3、HBuilder，这个是后期专业做前端的开发工具，除了html以及js等的代码编写之外，还有自带了容器启动，页面可以随时浏览并刷新。可以开发APP、小程序等等，同时也支持Debug模式，支持在前端开发过程中的联调，作为html开发人员的晋级IDE工具。
第二、HTML入门基础
首先我们来介绍一下html的一些基本标签。
其中第1行代表了一种声明，声明当前超文本的规范，这里代表了声明当前页面为html5
第3行：为HTML页面标签的根元素，也就意味着从这里开始，正是为html代码的起点。

第5-9行为HTML的头部，会定义当前的网页编码格式（第6行），当前网页的title，也就是我们在浏览器打开页面的时候页签上显示的文字（第7行），当前页面所引用或者编写的样式（第8行），当然每个标签都是成对出现的，读书笔记摘抄（https://www.yuananren/dushubiji/）第9行我们就代表了整个HTML头部的结尾。接下来的body标签就代表了整个文本的内容，我们在浏览器中看到的内容，就是body中所包含的内容了。

而div则代表了一种容器，例如我们在浏览中看到的一个一个块状的内容，就是存放在div中。
body之后，是一些对于html的增强变成，例如JavaScript的编写，例如我们点击一个按钮会弹出来另外一个页面，这个动作通常都便携在script的标签内。
最后第16行就是html标签的结尾了，代表着整个HTML页面编写完成的终点。
这样编写完成之后，保存为cainiao.html，然后用浏览器打开，就可以看到我们刚刚编写的HTML代码效果了。这次，整个第一步学习已经完成，接下来入门之后，就需要更进一步地去学习JS、CSS甚至VUE等晋级内容了。
二、HTML类的概述
对HTML进行分类（设置类），使我们能够为元素的类定义CSS样式。
为相同的类设置相同的样式，或者为不同的类设置不同的样式。
实例
<!DOCTYPEhtml>
<html>
<head>
<style>
.cities{
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<divclass="cities">
<h2>London</h2>
<p>
LondonisthecapitalcityofEngland.
ItisthemostpopulouscityintheUnitedKingdom,
withametropolitanareaofover13millioninhabitants.
</p>
</div>
</body>
</html>