一、VSCODE
1.VSCODE的安装
程序员写代码的编辑器有很多种，例如 Adobe Dreamweaver 、Atom 、WebStorm 11 、Notepad++ 、Sublime Text 、VSCODE等等。这些编辑器都有各的好处，也有各的缺点。这些都是看个人习惯来选择，个人使用过这 DW 、webstorm 、Sublime Text以及VSCODE这三个编辑器，当然还有phpstorm编辑器。但这几款编辑器使用下来的话还是觉得VSCODE这款编辑器使用起来最方便、最顺手。所以力推VSCODE编辑器。
首先就是VSCODE这款编辑器它是微软出的一款免费的编辑器。是的，完全免费。就这一点就已经值得绝大多数程序员下载下来尝试了。不像其他编辑器一样，要下载编辑器还要去找各种破解版，而且下下来还有一堆步骤去破解非常麻烦，甚至等你破解好后发现有些功能无法使用，那真的是对人心的一种折磨。VSCODE这款编辑器可以直接官网下载，安装直接可以使用，就非常nice！
附上官网链接：https://code.visualstudio.com/
2.VSCODE的插件安装
第二点就是这款编辑器有海量的插件支持，根本不怕说有的程序员转编辑器不习惯的问题。可能有的人一安装好后打开编辑器全是英文傻眼了，不要急，说了有海量插件支持，那肯定就有中文插件供你安装。如下图所示，在搜索框中输入chinese即可显示可安装的插件，安装好后重启编辑器就是中文的了。同样的你需要的插件也可以在这里搜索安装。而且还有各种主题插件可以给你选择，换各种颜色，再也不用怕写代码的时候屏幕反光看到自己秃秃的头顶。(只要看不到，那我就还有头发！！)
二、HTML基础标签
1.标题标签 (双标签)
这里说的不是<title></title>标签，说的是<h1></h1>这一系列标签。
这个系列标签一共有6个，分别是<h1></h1>、<h2></h2> …<h6></h6>。
这六个标签的显示区别就是字号以及粗细不同，常用的是前3个<h1></h1>、<h2></h2>、<h3></h3>;
<h1>这是标题 1</h1><h2>这是标题 2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6>
代码运行结果如下：
2.超链接<a>标签（双标签）
引用天蓬老师一句：“<a>标签是互联网中的灵魂”。确实如此<a>标签控制了各种跳转，包括页内跳转以及页外跳转。
<a>标签有好几个属性，常用的是 href 以及 target 属性;
href : 规定链接指向的页面的 URL。也可以指向当前页面的锚点;
target ：控制在何处打开链接文档。默认的话是当前窗口;
<a href="http://www.php.cn" target="_blank">PHP中文网</a>
代码运行结果如下：
3.内框架<iframe>标签（双标签）
<iframe> 元素会创建包含另外一个文档的内联框架（即行内框架）。
<iframe> 大白话就是在你当前页面规定区域再访问一个新页面。打开一个新页面也就是等同欲说也是支持html代码的。常用的属性是 src 以及 name 属性;
src : 规定在 <iframe> 中显示的文档的 URL;
name：规定这个 <iframe> 的名称;
<a href="http://www.baidu.com" target="_blank">百度网</a><br><iframe src="http://www.baidu.com" width="1903px;" height="400px;"></iframe>
代码运行结果如下：
也可以通过<a>标签的 target 属性以及<iframe>标签的 name 属性 达成点击 打开百度 后再显示的效果；
<a href="http://www.baidu.com" target="baidu">打开百度</a><br><iframe src="" name="baidu" width="1903px;" height="400px;"></iframe>
代码运行结果如下：
3.<img>标签（单标签）
<img> 元素向网页中嵌入一幅图像。
请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
<img> 标签有两个常用属性 src 以及 alt 属性；
src ： 规定显示图像的 URL。
alt ： 规定图像的替代文本。如果图片加载失败会显示，加载成功则不显示
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607855964906&di=946217a3fcbf0c4b86f058ed716116d8&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F27%2F67%2F01300000921826141299672233506.jpg" alt="哈士奇">
代码运行结果如下：
！！！上文有些句子来源于w3school！！！