HTML进阶--如何使用Sublime Text来创建网页 -------16岁的小前端

时间:2024-04-05 07:22:19

前期的文章中讲到了使用Windows自带的【记事本】来创建网页;

【记事本】在写代码的时候有很多的不便捷,可读性可较差;

所以我们在前端开发的时候都会使用一款【文本编辑器】(例如editplus,Sublime Text,Visual Studio Code等);来帮助我们的开发;

这篇文章就使用【Sublime Text】来创建一个网页;

1.  双击打开【sublime Text】

                          HTML进阶--如何使用Sublime Text来创建网页 -------16岁的小前端        HTML进阶--如何使用Sublime Text来创建网页 -------16岁的小前端

2.  点击左上角【文件】

         HTML进阶--如何使用Sublime Text来创建网页 -------16岁的小前端

          HTML进阶--如何使用Sublime Text来创建网页 -------16岁的小前端

3.点击【新建文件】

            此时默认在sublime text的暂存盘创建了一个text文件

            HTML进阶--如何使用Sublime Text来创建网页 -------16岁的小前端

4.  按下【Ctrl】+【S】保存

         HTML进阶--如何使用Sublime Text来创建网页 -------16岁的小前端

5.  选择一个位置进行保存

            选择一个自己想要文件存储的位置,我这里是选择了桌面 ;

           HTML进阶--如何使用Sublime Text来创建网页 -------16岁的小前端

6.  写【文件名】,拓展名写【html】或【htm】

          在这样一个输入框中输入自己想要给文件的名字;文件拓展名直接写成【HTML】或【htm】

            HTML进阶--如何使用Sublime Text来创建网页 -------16岁的小前端

           我这里取名为了【index.HTML】;

         然后点击【保存】

      HTML进阶--如何使用Sublime Text来创建网页 -------16岁的小前端

        这是我们就可以在上面看到文件已经创建成功并打开了;

        接下来我们就可以在其中写HTML代码了;

7.  首先对浏览器的渲染引擎说【我要做网页】

            HTML进阶--如何使用Sublime Text来创建网页 -------16岁的小前端

8.  写出HTML的基本结构

           HTML进阶--如何使用Sublime Text来创建网页 -------16岁的小前端

9.  保存,这个习惯一定要培养;

      【Ctrl】+【S】 ;任何操作编辑之后要显示之前都要保存;平时过一会按一下保存;否则万一有什么突发情况辛辛苦苦写了几百行的代码,结再打开时就几行;

        

10.  然后我们用浏览器看一下显示效果

       我们不需要再找到刚刚创建文件的位置去打开,

        直接在墨绿色的面板的任意位置鼠标右击;点击【open in browser】

        【open in browser】翻译过来就是【在浏览器中打开】;

         这个工具会帮你直接在默认的浏览器中去打开;

       HTML进阶--如何使用Sublime Text来创建网页 -------16岁的小前端HTML进阶--如何使用Sublime Text来创建网页 -------16岁的小前端

      

 

                                                                    ------------------16岁的小前端