简单学习HTML

　　最近突然就对静态页面很有兴趣，主要是看到几个比较酷炫的页面效果，也想自己做一下，但是我的前端页面就是菜鸡，还停留在html+css+jquery的简单使用上，而且还忘记得差不多了！

　　而且我感觉前端比后端麻烦一点，可能是我没有什么审美吧，自己做的页面总是很丑陋，哈哈哈！就记录一下学习html的过程吧！学习主要是参考菜鸟教程，链接：https://www.runoob.com/html/html-tutorial.html 

1.EditPlus编辑器的简单使用

　　写前端页面还是有一款编辑器比较好，就好像写java需要IDEA或者eclipse一样，虽然你也可以一直用记事本写，那估计会劝退n多新人，用编辑器对新人比较友好，等以后变牛了之后再用记事本写吧！

　选择适合自己的编辑器，这里推荐几个，可以自行下载：

• Notepad++：https://notepad-plus-plus.org/
• Sublime Text：http://www.sublimetext.com/
• VS Code：https://code.visualstudio.com/

　　我看了很多的编辑器，最终用了一款叫做EditPlus的软件，为什么呢？因为简单，不需要什么插件，而且最初我是将这个软件当作是打开各种格式文件的工具来用的，今天才发现居然还能用于写很多变成语言编写代码，而且功能上也支持代码补全（功能比较弱，不支持代码提示），下载的话随便下载吧！貌似正版是需要收费，我下载的刚好就是正版（有的时候嫌找破解版太麻烦了），打开会出现下面这个提示（记住，别点击任何按钮），我们只需要用鼠标左键将这个框框拖到屏幕看不见的位置，OK了，这个软件照用不误，现在可以正常使用了。。。。

             

 

 

　　下面我们就简单说说这个编辑器常用的用法，点击下面这个地方：

 

　　　几个常用的设置，我们现在重点看看代码自动补全，后期可以根据我们的需要设置文件模板；

 

 

　　随意看看HTML补全代码：

 

　　我们就以h1标签为例，我们只需要输入h1,不区分大小写，然后回车（空格键也行）就会自动补全，貌似还有更牛的代码补全方式，一下子可以补全一大块代码，我们现在不需要，后面用到的时候再说

 

 

　　代码补全之后我们就需要测试一下标签有没有用，这里就会用到浏览器渲染（记住，千万不要用EditPlus默认的浏览器，默认的好像的IE浏览器，比较坑爹）：

　　

　　简单测试一下：

 

 

 　　结果如下：

 

 

　　注意：用这个EditPlus这个编辑器有点不舒服的地方，就是用空格键也会自动补全，所以打出类似

这样的代码，在h1后面的那个空格会打不出来，查了好半天都没办法移除空格这个快捷键，emmmm。。。。暂时只能用下面这种方式，如果有其他的方式请在评论区告诉我，谢谢！

 

 2.认识静态页面

　　记得最开始学html静态页面的时候学了好久都没入门，始终都是一脸蒙逼，始终都在想html和css、js到底有什么关系呢？举个很简单的例子，我们看的动漫一般是怎么制作出来的呢？首先，我们要用素描画出人物的全貌，然后进行上色，最后就是想办法让它动起来，这里的三个步骤就对应于html，css和js；

　　那么问题来了，什么是静态页面呢？我们用浏览器打开的一个页面很好看，就比如百度，下图所示，可以看作是由很多小块组成的，这些小块对应于HTML中是对应一个标签，也就是类似

这样的，我们可以在标签内部继续插入标签、图片、文字等等，然后我们可以用css对这些div标签进行染色和移动位置等，最后我们还可以添加一些特效让这个页面有些动画的特效，后面我们简单做一个类似这个百度首页的页面吧，就当练练手！

 

 3.简单介绍HTML页面

 　　我们可以看到每一个新建的HTML文档都有一些相同的东西，那就是最简单的标签，下图所示：最上面的表示这是一个html文档，然后整个文档都由一个标签包着,在每一个html标签中，包括两个大标签，头（head）和身体（body），就跟一个人一样有头和身体；

　　在头部中有个