一,下载HBuilder
1.点击链接进入HBuilder官网:https://www.dcloud.io/
![](https://img-blog.csdnimg.cn/641a28bd466a44b4a303eb9b763124e1.png)
2.点击【Download for Windows】下载正式版压缩包。
![](https://img-blog.csdnimg.cn/62721d8ee7384d1e8315970a410ac235.png)
3.或者点击【more】展开选择Windows“正式版”,点击【.zip↓】下载压缩包。
【正式版】:指的就是已经发布过的版本,比较稳定。
【Alpha】:指的就是内侧版,就是未来可能会正式发布的,先让用户体验一下,还处于测试中,会不断的更新,相对于正式版不是很稳定。
【Windows】:指的是Windows操作系统。【MacOS】:指的是苹果操作系统。
![](https://img-blog.csdnimg.cn/de2f10560d464f7585fd833261127b6c.png)
二,安装HBuilderX
1.双击桌面的【此电脑】,点击【下载】找到HBuilderX压缩包。(仅供参考,每个解压软件都不同)
![](https://img-blog.csdnimg.cn/544861eac14a4c77a18bffbce01e0742.png)
2.鼠标左键单击选中“HBuilder文件压缩包”,然后右键单击找到【解压文件】。
![](https://img-blog.csdnimg.cn/262886038de24e9eb26c94924b3be0bb.png)
3.选择解压到“D盘”,然后点击【确定】。(建议新手不管是解压文件,还是安装软件都装在其他硬盘里,只要不安装在C盘里就行。)
![](https://img-blog.csdnimg.cn/0a04b5fee5444e51968e75156d7d7ab2.png)
4.去D盘里找到你刚解压完的“HBuilderX文件”,然后鼠标双击打开。 ![](https://img-blog.csdnimg.cn/cc31d6d014254768a31efa554717d0fe.png)
5.鼠标左键单击“HBuilderX”,然后右键单击找到【创建快捷方式】。
![](https://img-blog.csdnimg.cn/2641ddf6b1a241839ca87b8469a0898e.png)
6.然后把创建好的快捷方式拖到桌面,或者用快捷键Ctrl+X把【HBuilderX快捷方式】粘贴到桌面上,然后就双击打开“HBuilderX”软件就可以使用了。
![](https://img-blog.csdnimg.cn/0dcc0ec6ab724ad688469b3412a63261.png)
7.如果觉得快捷方式这几个字有点多余,可以鼠标右键单击【重命名】把“快捷方式”这几个字删掉,这个不会影响HBuilderX运行。
![](https://img-blog.csdnimg.cn/859862350a7f461bacbad52f21212214.png)
三、用HBuilder X编写HTML代码
1、双击桌面HBuilder X启动,点击左上角的“新建”按钮,然后选择.html文件。
![](https://img-blog.csdnimg.cn/a213c47c0f71403b80b78a281538545d.png)
或者点击右上角【文件】→【新建】→【html文件】。
![](https://img-blog.csdnimg.cn/c18a35c8ffcf43b3a1361e24cd77f0b4.png)
2、把"new_file"删掉,取名为“chapter01”(第一章的意思),名字可以随便取,取完名后,去D盘里新建一个文件夹取名为“HTML.homework”,名字也可以随便取,你只要知道这个文件夹是用来存放你以后编写html代码文件的存放地址就行了,点击浏览选择你刚刚创建好的文件,点击确定。然后点击【创建】。(D:/HTML.homework指的就是我的文件存放路径在D盘里HTML.homework文件夹里)
![](https://img-blog.csdnimg.cn/06fb455a2a1d4f9ab98667c2c65b555f.png)
3、在<body>标签里输入一下代码:
<h1>这是我的第一个html代码</h1>
![](https://img-blog.csdnimg.cn/24aa746d2b6a446baa150141d155ed6e.png)
4、输完代码后,点击左上角“保存”按钮保存文件或者按Ctrl+S快捷方式进行保存。
![](https://img-blog.csdnimg.cn/5a1c999eeeb7433387dc080c4d4b3b3a.png)
5、点击左上角的【运行】→【运行浏览器】→点击【Chrome】运行代码,选择哪个浏览器运行都行,【Chrome】是谷歌浏览器,【Firefox】是火狐浏览器,【IE】是IE浏览器,【Edge】是Edge浏览器。
![](https://img-blog.csdnimg.cn/07f0d0e800a04e5e987b1f007a87f169.png)
6、运行结果如下:
![](https://img-blog.csdnimg.cn/a616f4f42432419ebdb16b64d1999860.png)
感谢观文,有缘再见!