迎小伙伴继续观看网页开发教程。该教程是基础有简单计算机基础，但是却没有网页开发基础的同学使用的。如果您毫无计算机基础，对于本教程的使用还是会有一点的难度。
以前的网页开发，我们通过自己手工创建记事本和网站结构的方式，深刻理解了网页开发原理，对我们进一步理解和后期开发起到非常重要的作用。
本节开始，我们来使用一个很不错的开发工具，使用软件开发工具，我们可以很大提高开发效率。
1.hbuilder介绍
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。[1] HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。
下载地址：
https://www.dcloud.io/hbuilderx.html
简单演示：
使用网页预览效果：
2.提示
代码提示
Alt + /
3.总结
1、注意点，浏览页面的时候，要点击左侧列表中的页面
2、下载时候，一般只要用到14M的轻量级来学习，可以用用来打基础
3、新建项目的时候，要注意可以选择模板
html源代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>刘金玉编程</title> <link rel="stylesheet" type="text/css" href="css/main.css" /> </head> <body> 欢迎随便来一段吧欢迎您来到刘金玉编程让我们一起努力，用编程创造城市。 </body> </html>
css源代码：
body{ color:blue; }
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)
