非零基础自学前端最后一遍一 HTML+CSS 1 你的第一个网页 1.3 VScode的安装-插件-配置

浅浅的花香味﹌ 2024-03-26 18:57 33阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  1 你的第一个网页
         *   *  1.3 VScode的安装-插件-配置
             *   *  1.3.1 开发工具选择
                 *  1.3.2 VSCode工具安装

![在这里插入图片描述][ad2b7838731a4937a6d6d55aefd4f492.png_pic_center]

#### 一 HTML+CSS ####

#### 1 你的第一个网页 ####

##### 1.3 VScode的安装-插件-配置 #####

###### 1.3.1 开发工具选择 ######

*  记事本可以开发一个网页吗？答案：可以。但是有很多的缺点：
    
     *  创建和管理文件不方便；
     *  没有颜色标识/没有智能提示/无法调试程序；
 *  专业的前端开发工具
    
     *  WebStorm、Sublime Text、Visual Studio Code、Atom、HBuilder、IntelliJ IDEA、Dreamweaver
     *  智能提示、高亮识别、语法检测、集成环境、开发效率高
 *  上课推荐开发工具：
    
     *  Webstorm
        
         *  优点：集成开发工具，包罗万象
         *  缺点：重（占用系统资源多），收费
     *  VSCode（上课使用）
        
         *  优点：轻（相当于一个编辑器），免费
         *  缺点：需要安装一些插件来辅助开发

###### 1.3.2 VSCode工具安装 ######

*  VSCode编辑器下载-安装：https://code.visualstudio.com/
    
    ![在这里插入图片描述][7a952cf2164a4675ac1f03cc590678eb.png_pic_center]
    
    ![在这里插入图片描述][cd997d7d304b4808b2d9647200b75c01.png_pic_center]
    
    直接下载
    
    ![在这里插入图片描述][0db5966c2002416d93e4e76046d7e1a8.png_pic_center]
    
    保存
    
    ![在这里插入图片描述][c6de3752f3e44a1db18e6002172d5f93.png_pic_center]
    
    等待下载完成
    
    ![在这里插入图片描述][3ab47845b57842da98b4948703de7ff5.png_pic_center]
    
    直接双击运行
    
    ![在这里插入图片描述][cb449eca2d3a4e32a146b75f3f314839.png_pic_center]
    
    我同意，下一步
    
    ![在这里插入图片描述][bf0a7e462b804fac944dbaa8cce5c803.png_pic_center]
    
    根据实际需要，修改安装位置，下一步
    
    ![在这里插入图片描述][0e19519312af4ef28b4c9c21bc2ddf05.png_pic_center]
    
    下一步
    
    ![在这里插入图片描述][fbd5ec74b6654263881555f115efec40.png_pic_center]
    
    下一步
    
    ![在这里插入图片描述][42cc34c7bd0f4eee9e9ba371a5670db6.png_pic_center]
    
    安装！
    
    ![在这里插入图片描述][23f728f927f34c76a2737f146164260a.png_pic_center]
    
    等待完成
    
    ![在这里插入图片描述][d70b8bd0dfc842f2b0cb24e276d73175.png_pic_center]
    
    完成
    
    ![在这里插入图片描述][659de1a1b25c4671adc58df74703815f.png_pic_center]
    
    当然笔者这里以前就装过，很多配置留下来了【账号配置】
 *  安装插件（增加功能）：右侧图标最后一项，Extensions，查找需要的插件（联网）
    
    ![在这里插入图片描述][6cc9ad19e6cb4190ae0fa500e1ee322b.png_pic_center]
    
    中文插件：Chinese
    
    ![在这里插入图片描述][a562b0148e3f4d88b5ad3044c39b2355.png_pic_center]
    
    颜色主题：atom one dark
    
    ![在这里插入图片描述][2a139ee4158f4d1890dd8f39d8f98cd9.png_pic_center]
    
    文件夹图标：VSCode Great Icons
    
    ![在这里插入图片描述][52cef34f458e40f8b30e8185e9d9af81.png_pic_center]
    
    在浏览器中打开网页
    
     *  open in browser
        
        ![在这里插入图片描述][d6047bc4648c41c08c2f7d829f21f3f9.png_pic_center]
     *  Live Sever
        
        ![在这里插入图片描述][8f70ad3b0b3d4815981b21ebaf7f22a2.png_pic_center]
    
    自动重命名标签：auto rename tag
    
    ![在这里插入图片描述][b5ec7457a7b94bdf9b21fce027709fa0.png_pic_center]
 *  VSCode的配置：
    
    Auto Save 自动保存
    
    ![在这里插入图片描述][5d6b7766e3934471abd21b87a10bd351.png_pic_center]
    
    Font Size 修改代码字体大小
    
    ![在这里插入图片描述][0bfadb66029648bdbc836bc50f1eaa74.png_pic_center]
    
    Word Wrap 代码自动换行
    
    ![在这里插入图片描述][31f35e49d1a64e558a82926e17962c90.png_pic_center]
    
    Render Whitespace 空格的渲染方式(个人推荐)
    
    ![在这里插入图片描述][40ff5f297db84ca3babeb0b645912a2b.png_pic_center]
    
    Tab Size 代码缩进，推荐2个空格（公司开发项目基本都是2个空格）
    
    ![在这里插入图片描述][699b2cf519f94741a7e018b71cbd4321.png_pic_center]
    
    ![在这里插入图片描述][904bb5d8282e4e738ea060eee94a49e7.png_pic_center]

[ad2b7838731a4937a6d6d55aefd4f492.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/db90b473a4c9400d9f3a466e7e95d25f.png
[7a952cf2164a4675ac1f03cc590678eb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4821cfd433a0422baae9baef648c62a9.png
[cd997d7d304b4808b2d9647200b75c01.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2d0c76cc6e0247c8bbfb01a0a4efb4c3.png
[0db5966c2002416d93e4e76046d7e1a8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e3a70a8e36ad4da88cabc861e1048e2a.png
[c6de3752f3e44a1db18e6002172d5f93.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1543f06bdd2945e7ad650304c4ce1fcb.png
[3ab47845b57842da98b4948703de7ff5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9b9d0884b53b4b19a3762d66d5bc9fd2.png
[cb449eca2d3a4e32a146b75f3f314839.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/06552359b7e242e7a10717373a828ff0.png
[bf0a7e462b804fac944dbaa8cce5c803.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3815ea37afc8408e8ace6e82be2820df.png
[0e19519312af4ef28b4c9c21bc2ddf05.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/63ae53a5dd774475b07fb48f6a3990dd.png
[fbd5ec74b6654263881555f115efec40.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3040dc3e482e4477a75ba6d0e3832b76.png
[42cc34c7bd0f4eee9e9ba371a5670db6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2effa8d4b3a64bee8baa8280409ca608.png
[23f728f927f34c76a2737f146164260a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f85f0ae8a1564c1db89e886f1abea3be.png
[d70b8bd0dfc842f2b0cb24e276d73175.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9b4ee934cd7c45bea51562b7b23e8b85.png
[659de1a1b25c4671adc58df74703815f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/82e41be52b7b4329abff5a8946a24cfc.png
[6cc9ad19e6cb4190ae0fa500e1ee322b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6a99d64cf36f480a9d9194b6ed1a8d6d.png
[a562b0148e3f4d88b5ad3044c39b2355.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a9b91c61984c4590bbcb9823a30ab2a3.png
[2a139ee4158f4d1890dd8f39d8f98cd9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/cf5aa9c89ad34754a98e9877e7a03669.png
[52cef34f458e40f8b30e8185e9d9af81.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/22ac64f7db144f3dbaa20d4965404f60.png
[d6047bc4648c41c08c2f7d829f21f3f9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/521d051fb5fc465dac85600cf1cb304e.png
[8f70ad3b0b3d4815981b21ebaf7f22a2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/39f420dc980445d59f82cc7a7a84894f.png
[b5ec7457a7b94bdf9b21fce027709fa0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f9bce068dec9472080fd174ae2518e99.png
[5d6b7766e3934471abd21b87a10bd351.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/648a64b814394554a45c546a7a3d94e4.png
[0bfadb66029648bdbc836bc50f1eaa74.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6fa26560646744ccbfc181d2ed9effd0.png
[31f35e49d1a64e558a82926e17962c90.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/465cdf36e6594894af3f0b1122ec58a9.png
[40ff5f297db84ca3babeb0b645912a2b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/972031e494294ef69cf9b4de129c8fb4.png
[699b2cf519f94741a7e018b71cbd4321.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/de8f6d51e3bd43b0bc3be8c93f2c380b.png
[904bb5d8282e4e738ea060eee94a49e7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2d1df8eb164f4a2fae1055b139819794.png