VSCode编写第一个html

下载VSCode https://code.visualstudio.com/

在本地创建一个目录，然后从VSCode打开这个文件夹

 

需要安装两个插件 ，在Extensions查找两个插件 Live Server 和 Open in browser

插件生效是需要重启VSCode 的哦。。。

 

 

需要说明下  Live Server 是需要配置的 

在这个窗口 按ctrl+shift+P 进入命令面板（小白真的没找到。。。。）

然后再里面输入settings 找到 preference open settings

或者 直接点击下面的齿轮就好。

在搜索框输入 live server 就会进入到live server 的配置中，然后对live server的配置进行修改即可。

 

 

或者 点击 edit in settings.json 把下面这个复制过去就好。不用自己配置喽。。。

{

    "editor.suggestSelection": "first",

    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",

    "liveServer.settings.donotVerifyTags": true,

    "liveServer.settings.donotShowInfoMsg": true,

    "liveServer.settings.NoBrowser": true,

    "liveServer.settings.CustomBrowser": "chrome", #默认chrome浏览器哦  

    "liveServer.settings.port": 5500

}

 

创建  一个html 模板 

先要创建一个文件，默认为 Untitled-1 ,按ctrl +s 保存到第一步创建文件夹下 命名为 1.html

打开是个空文档 ，输入英文 ！  点击tab键盘，会自动生成html 模板 

在1.html 点击右键，Open with Live server, 就会在chrome浏览器中打开这个网页

如图：

在VSCode 把 <title>Document</title> 改为  <title>Document123456</title>

直接点击保存，然后去浏览器看下，神奇的事情发生喽，居然网页标题也变成Document123456 

这个就是Live server插件的妙用哦。。。。

觉得我写的还有用，请持续关注我的博客哦。。。(*^▽^*)