目录
一.配置环境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/27883/" title="海学会读《乡村振兴战略下传统村落文化旅游设计》2023年度许少辉八一新书" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/5a3346f940244101bb0ad3b8d911d8bd.jpeg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/27883/" title="海学会读《乡村振兴战略下传统村落文化旅游设计》2023年度许少辉八一新书">海学会读《乡村振兴战略下传统村落文化旅游设计》2023年度许少辉八一新书</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/32396/" title="Java 中 Map 初始化的几种方法" 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/32396/" title="Java 中 Map 初始化的几种方法">Java 中 Map 初始化的几种方法</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/18659/" title="Web 前端常用正则校验规则" data-bg="https://img.maxssl.com/uploads/?url=https://images.cnblogs.com/cnblogs_com/yuzhihui/2271962/o_230208065807_gzh-qrcode.jpeg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/18659/" title="Web 前端常用正则校验规则">Web 前端常用正则校验规则</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/36919/" title="java.lang.ClassNotFoundException: org.bouncycastle.jce.provider.BouncyCastle" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/de51672012cc489c9929f3af1a89ff97.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/36919/" title="java.lang.ClassNotFoundException: org.bouncycastle.jce.provider.BouncyCastle">java.lang.ClassNotFoundException: org.bouncycastle.jce.provider.BouncyCastle</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/29952/" title="主成分分析（PCA）详解" data-bg="https://img.maxssl.com/uploads/?url=https://img.maxssl.com/uploads/?url=https://latex.csdn.net/eq"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/29952/" title="主成分分析（PCA）详解">主成分分析（PCA）详解</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/38496/" title="10 个免费的 AI 图片生成工具分享" 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/38496/" title="10 个免费的 AI 图片生成工具分享">10 个免费的 AI 图片生成工具分享</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/52137/" title="Spring Boot 整合 JPA项目中使用的 JPA 版本与数据库不兼容。" 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/52137/" title="Spring Boot 整合 JPA项目中使用的 JPA 版本与数据库不兼容。">Spring Boot 整合 JPA项目中使用的 JPA 版本与数据库不兼容。</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/52618/" title="前端excel带样式导出 exceljs 插件的使用" data-bg="https://img.maxssl.com/uploads/?url=https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/66136ee010964a95a140990b0a330383.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/52618/" title="前端excel带样式导出 exceljs 插件的使用">前端excel带样式导出 exceljs 插件的使用</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/3289/" title="【Linux】进程控制 (万字）" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/0f029bf484da41b39e8370774e462f95.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/3289/" title="【Linux】进程控制 (万字）">【Linux】进程控制 (万字）</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/46772/" title="Spring-Security实现登录接口" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/deae9371d6e449b3bb52acc94c87dbe9.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/46772/" title="Spring-Security实现登录接口">Spring-Security实现登录接口</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/40017/" title="MySQL存在这么多的数据引擎 , 所有的引擎都在使用吗" data-bg="https://img.maxssl.com/uploads/?url=https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/5d155ce7b975330cda506c6c1baa0d3c.webp"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/40017/" title="MySQL存在这么多的数据引擎 , 所有的引擎都在使用吗">MySQL存在这么多的数据引擎 , 所有的引擎都在使用吗</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/49732/" title="【Redis】Spring Boot下使用Redis，配置多个database数据源" 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/49732/" title="【Redis】Spring Boot下使用Redis，配置多个database数据源">【Redis】Spring Boot下使用Redis，配置多个database数据源</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/45490/" title="c# 人脸识别的思路" 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/45490/" title="c# 人脸识别的思路">c# 人脸识别的思路</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/35420/" title="Example: use raspberry pi 4 control multiple motors(tb660)" 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/35420/" title="Example: use raspberry pi 4 control multiple motors(tb660)">Example: use raspberry pi 4 control multiple motors(tb660)</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":"fc04a3d279","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>
