上一章学习了前端开发的基本常识,这章我学习的是前端开发工具。莫振杰的书中用的是HBuilder,我用的是Sublime Text3。稍有不同而已,不用介意。

第二章 开发工具

1、前端开发工具

前端开发工具很多,Dreamweaver、Sublime Text、Atom、HBuilder、Vscode和Webstorm等都很常用,其中HBuilder上手最简单,Sublime Text、Vscode和Webstorm更适合实战要求。作者在书中用了HBuilder,我用的是Sublime Text 3。

sublime text如何生成html(HTML学习笔记2用SublimeText3建立html文件并在浏览器预览)(1)

2、用Sublime Text新建一个HTML文档

打开Sublime后,点击file栏,再点击new file即可。

sublime text如何生成html(HTML学习笔记2用SublimeText3建立html文件并在浏览器预览)(2)

这时候会出来一个未命名文件,你输入“<ht”后面就有提示了。

sublime text如何生成html(HTML学习笔记2用SublimeText3建立html文件并在浏览器预览)(3)

然后点击回车,就会出来一个完整的html文件结构。

sublime text如何生成html(HTML学习笔记2用SublimeText3建立html文件并在浏览器预览)(4)

写好我们需要的文件内容后,点击file→save或者save as保存就OK了。

sublime text如何生成html(HTML学习笔记2用SublimeText3建立html文件并在浏览器预览)(5)

3、用Sublime text打开保存好的文件

点击file,再点击Open file,找到你要的文件,打开即可。

sublime text如何生成html(HTML学习笔记2用SublimeText3建立html文件并在浏览器预览)(6)

4、用浏览器打开刚才保存的html文件

打开你保存的文件夹,双击目标文件就会在浏览器上输出了。这是在浏览器上输出的效果:

sublime text如何生成html(HTML学习笔记2用SublimeText3建立html文件并在浏览器预览)(7)

5、作者提示:各种文件的命名不要用中文,可能会无法识别。不过我刚才用中文命名的html文件,并没有问题。既然有这个提示,估计出过问题。

6、没有找“预览”功能,网上说需要安装插件 view-in-browser。暂时就放一下吧,反正也能自己用浏览器手动打开。

这一章也是学习愉快!欢迎大家踊跃拍砖,本人脸皮的厚度没有问题,抗击打能力那是杠杠滴!

,