目录
一.配置环境vscode
二.配置插件
三.vscode的实用小技巧
四.标题段落换行标签
五.格式化标签
一.配置环境vscode
vscode官网https://code.visualstudio.com/
点击右上角的download
根据不同的操作系统进行下载安装,我这里选的是Windows x64
安装好后打开,点击左上角的文件(Files)->打开文件夹(open folder)->创建新文件->选择
点击第一个图标,创建一个后缀名为.html的文件即可
二.配置插件
这里我们配置四个插件
大概说一下,第一个插件是为了保证我们在修改标签时同时修改这两个
第二个是配置汉语言包,可有可无
第三个是我们能够直接在vscode界面运行代码打开浏览器
第四个是我们再修改并保存代码后不用刷新浏览器
三.vscode的实用小技巧
1.快速生成代码大纲
!+回车即可
lang = ‘en’是默认语言为英语
charset=”UTF-8″是默认的解码规则为UTF-8,因为大部分浏览器的编码规则是UTF-8
name=”viewport” content=”width=device-width, initial-scale=1.0″
这个解释起来有点麻烦,不过通俗来讲是为了让你的程序在移动端也能运行
2.Ctrl+s
快速保存代码,代码只有保存后才能在浏览器上显示出来效果
3.Ctrl+/
批量注释代码,html的注释语言为
四.标题段落换行标签
事实上html语言本身就是一种数据结构–Dom树,通过编写代码实现对数据的增删查改,而html语言是有一个一个标签组成的,这些标签实际就是树的节点,而其中又通过缩进来区分不同的层级,是根,与同级
标题标签
<noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/1d961a296098499ea630324e9bbf6f13.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/1d961a296098499ea630324e9bbf6f13.png" /></p><p>在这个位置显示</p><p>段落标签</p><p><p><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/41d4c48eba934991a76f3fb49d92207c.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/41d4c48eba934991a76f3fb49d92207c.png" /><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/ff6247e1b1794ffd836b5e663ce4ffc2.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/ff6247e1b1794ffd836b5e663ce4ffc2.png" /></p><p>换行标签</p><p></p><p><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/84cf8f7663c54212ba79ee66cedbcb79.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/84cf8f7663c54212ba79ee66cedbcb79.png" /><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/cbef0295cce0481097c6019e8e116780.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/cbef0295cce0481097c6019e8e116780.png" /></p><h2>五.格式化标签</h2><p>1.加粗,strong,b</p><p>2.倾斜,em,i</p><p>3.删除线,del,s</p><p>4.下划线,ins,u</p><p>每种格式化标签都有两种代码表达方式,区别就是前者就有强调性</p><p><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/0caab1a665634f998ad64276d42aeb82.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/0caab1a665634f998ad64276d42aeb82.png" /><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/99fee9543ce144bfa6a2f45cbd1cb6c9.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/99fee9543ce144bfa6a2f45cbd1cb6c9.png" /></p></article></div><div class="related-posts"><h2 class="related-posts-title"><i class="fab fa-hive me-1"></i>相关文章</h2><div class="row g-2 g-md-3 row-cols-2 row-cols-md-3 row-cols-lg-4"><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/13036/" title="什么是web3？未来趋势？怎么学？" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/13036/" title="什么是web3？未来趋势？怎么学？">什么是web3？未来趋势？怎么学？</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/37154/" title="Java基础 – JDBC操作数据库（MySql）" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/5f03ff33425d4b7593d6e7df0ca15465.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/37154/" title="Java基础 – JDBC操作数据库（MySql）">Java基础 – JDBC操作数据库（MySql）</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/51444/" title="Java实现贫困地区人口信息管理系统 JAVA+Vue+SpringBoot+MySQL" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/3a01dc60e62c415b812015851343f1c0.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/51444/" title="Java实现贫困地区人口信息管理系统 JAVA+Vue+SpringBoot+MySQL">Java实现贫困地区人口信息管理系统 JAVA+Vue+SpringBoot+MySQL</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/48300/" title="AI 绘画Stable Diffusion 研究（九）sd图生图功能详解-老照片高清修复放大" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/0950bf3d9e064d5996200dd37acfebef.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/48300/" title="AI 绘画Stable Diffusion 研究（九）sd图生图功能详解-老照片高清修复放大">AI 绘画Stable Diffusion 研究（九）sd图生图功能详解-老照片高清修复放大</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/22154/" title="Android Studio实现内容丰富的安卓物业管理平台" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/0e2577abbf86404b9cacb726d83b48b6.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/22154/" title="Android Studio实现内容丰富的安卓物业管理平台">Android Studio实现内容丰富的安卓物业管理平台</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/24664/" title="低风险稳健套利策略" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/4a7ecc82b2054d7ea0d5c048643b8660.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/24664/" title="低风险稳健套利策略">低风险稳健套利策略</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/8659/" title="java多线程之线程安全(重点,难点)" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/dce250c12e324d288087913c0d7a1e45.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/8659/" title="java多线程之线程安全(重点,难点)">java多线程之线程安全(重点,难点)</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/13758/" title="Java8 教程_编程入门自学教程_菜鸟教程-免费教程分享" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/13758/" title="Java8 教程_编程入门自学教程_菜鸟教程-免费教程分享">Java8 教程_编程入门自学教程_菜鸟教程-免费教程分享</a></h2></div></article></div></div></div></div><div class="sidebar-wrapper col-md-12 col-lg-3 h-100" data-sticky><div class="sidebar"><div id="recent-posts-4" class="widget widget_recent_entries"><h5 class="widget-title">最新关注</h5><ul><li> <a href="https://www.maxssl.com/article/57859/">【MySQL】InnoDB存储引擎</a></li><li> <a href="https://www.maxssl.com/article/57858/">DB-GPT：强强联合Langchain-Vicuna的应用实战开源项目，彻底改变与数据库的交互方式</a></li><li> <a href="https://www.maxssl.com/article/57857/">TigerBeetle：世界上最快的会计数据库</a></li><li> <a href="https://www.maxssl.com/article/57856/">【SQL server】玩转SQL server数据库：第三章 关系数据库标准语言SQL（二）数据查询</a></li><li> <a href="https://www.maxssl.com/article/57855/">马斯克400条聊天记录被法院公开，原来推特收购是在短信上谈崩的</a></li><li> <a href="https://www.maxssl.com/article/57854/">戏精摩根大通：从唱空比特币到牵手贝莱德</a></li></ul></div><div id="ri_sidebar_posts_widget-2" class="widget sidebar-posts-list"><h5 class="widget-title">热文推荐</h5><div class="row g-3 row-cols-1"><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/31323/" title="【机器学习】集成学习Boosting" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/3e3114cea2274c6bb159a1f83086a6e5.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/31323/" title="【机器学习】集成学习Boosting">【机器学习】集成学习Boosting</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/8072/" title="C语言FILE详解（COME ON）" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/8072/" title="C语言FILE详解（COME ON）">C语言FILE详解（COME ON）</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/32947/" title="（基于安卓的毕业设计+b/s架构）外卖APP开发（附源码+论文）" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/ac428e8e5d5341dc8dd6c61d4521f9ae.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/32947/" title="（基于安卓的毕业设计+b/s架构）外卖APP开发（附源码+论文）">（基于安卓的毕业设计+b/s架构）外卖APP开发（附源码+论文）</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/27763/" title="The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/b39a429543424ce7a8bb85bcc0c3d75a.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/27763/" title="The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received">The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/46297/" title="全面回顾2022年加密行业大事件：破后而立方能绝处逢生" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/e63c89bc7dbd4173ac0fe761d6d8f78e.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/46297/" title="全面回顾2022年加密行业大事件：破后而立方能绝处逢生">全面回顾2022年加密行业大事件：破后而立方能绝处逢生</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/9921/" title="类文件具有错误的版本 61.0, 应为 52.0（问题记录）" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/9921/" title="类文件具有错误的版本 61.0, 应为 52.0（问题记录）">类文件具有错误的版本 61.0, 应为 52.0（问题记录）</a></h2></div></div></article></div></div></div></div></div></div></div></main><footer class="site-footer py-md-4 py-2 mt-2 mt-md-4"><div class="container"><div class="text-center small w-100"><div>Copyright © <script>today=new Date();document.write(today.getFullYear());</script> maxssl.com 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">浙ICP备2022011180号</a></div><div class=""><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7656930379472324"
crossorigin="anonymous"></script></div></div></div></footer><div class="rollbar"><ul class="actions"><li><a target="" href="https://www.maxssl.com/" rel="nofollow noopener noreferrer"><i class="fas fa-home"></i><span></span></a></li><li><a target="" href="http://wpa.qq.com/msgrd?v=3&uin=6666666&site=qq&menu=yes" rel="nofollow noopener noreferrer"><i class="fab fa-qq"></i><span></span></a></li></ul></div><div class="back-top"><i class="fas fa-caret-up"></i></div><div class="dimmer"></div><div class="off-canvas"><div class="canvas-close"><i class="fas fa-times"></i></div><div class="logo-wrapper"> <a class="logo text" href="https://www.maxssl.com/">MaxSSL</a></div><div class="mobile-menu d-block d-lg-none"></div></div> <script></script><noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://www.maxssl.com/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script><script src='//cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js' id='jquery-js'></script> <script src='//cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/highlight.min.js' id='highlight-js'></script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/vendor.min.js' id='vendor-js'></script> <script id='main-js-extra'>var zb={"home_url":"https:\/\/www.maxssl.com","ajax_url":"https:\/\/www.maxssl.com\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/www.maxssl.com\/wp-content\/themes\/ripro-v5","singular_id":"52023","post_content_nav":"0","site_notify_auto":"0","current_user_id":"0","ajax_nonce":"907a7c2666","gettext":{"__copypwd":"\u5bc6\u7801\u5df2\u590d\u5236\u526a\u8d34\u677f","__copybtn":"\u590d\u5236","__copy_succes":"\u590d\u5236\u6210\u529f","__comment_be":"\u63d0\u4ea4\u4e2d...","__comment_succes":"\u8bc4\u8bba\u6210\u529f","__comment_succes_n":"\u8bc4\u8bba\u6210\u529f\uff0c\u5373\u5c06\u5237\u65b0\u9875\u9762","__buy_be_n":"\u8bf7\u6c42\u652f\u4ed8\u4e2d\u00b7\u00b7\u00b7","__buy_no_n":"\u652f\u4ed8\u5df2\u53d6\u6d88","__is_delete_n":"\u786e\u5b9a\u5220\u9664\u6b64\u8bb0\u5f55\uff1f"}};</script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/main.min.js' id='main-js'></script> </body></html>
