目录
一.配置环境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/29440/" title="【Java-LangChain:面向开发者的提示工程-8】聊天机器人" 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/29440/" title="【Java-LangChain:面向开发者的提示工程-8】聊天机器人">【Java-LangChain:面向开发者的提示工程-8】聊天机器人</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/16698/" title="【PyTorch】nn.Conv2d函数详解" 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/16698/" title="【PyTorch】nn.Conv2d函数详解">【PyTorch】nn.Conv2d函数详解</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/42155/" title="idea自动注释" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/d44d38ffc68f4f6e818fb6044f1eedfb.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/42155/" title="idea自动注释">idea自动注释</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/46571/" title="Mac使用adb调试安卓手机" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/c8a32c1e8e634296bb7a2bd1c55d5fc3.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/46571/" title="Mac使用adb调试安卓手机">Mac使用adb调试安卓手机</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/22133/" title="基于Python的海量豆瓣电影、数据获取、数据预处理、数据分析、可视化、大屏设计项目（含数据库）" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/d2081b6f6d8c426b80ffde680295ce4c.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/22133/" title="基于Python的海量豆瓣电影、数据获取、数据预处理、数据分析、可视化、大屏设计项目（含数据库）">基于Python的海量豆瓣电影、数据获取、数据预处理、数据分析、可视化、大屏设计项目（含数据库）</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/2648/" title="HiEngine：可媲美本地的云原生内存数据库引擎" 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/2648/" title="HiEngine：可媲美本地的云原生内存数据库引擎">HiEngine：可媲美本地的云原生内存数据库引擎</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/876/" title="使用 idea 插件 Easy Code 自定义 MybatisPlus 模板一键快速生成所需代码" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/d994cd3a8b8ac2c8e48fe7da353ea892.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/876/" title="使用 idea 插件 Easy Code 自定义 MybatisPlus 模板一键快速生成所需代码">使用 idea 插件 Easy Code 自定义 MybatisPlus 模板一键快速生成所需代码</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/13308/" title="springboot~关于md5签名引发的问题" data-bg="https://img.maxssl.com/uploads/?url=https://images.cnblogs.com/cnblogs_com/lori/237884/o_IMG_7144.JPG"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/13308/" title="springboot~关于md5签名引发的问题">springboot~关于md5签名引发的问题</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/4965/" title="Springboot实现HTML表单from简单的接收信息" data-bg="https://img.maxssl.com/uploads/?url=https://img2023.cnblogs.com/blog/2781030/202211/2781030-20221130174732510-1504018466.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/4965/" title="Springboot实现HTML表单from简单的接收信息">Springboot实现HTML表单from简单的接收信息</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/12229/" title="中国智慧家庭市场运营模式分析及发展趋势研究报告2022-2027年版" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/399543b5bbfd4ac2b829753874bba157.PNG?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUVFfMTEwNjcxNTU5OQ==,size_18,color_FFFFFF,t_70,g_se,x_16"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/12229/" title="中国智慧家庭市场运营模式分析及发展趋势研究报告2022-2027年版">中国智慧家庭市场运营模式分析及发展趋势研究报告2022-2027年版</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/14103/" title="聊一聊GIS之家团队数据案例源码共享以及在线体验" data-bg="https://img.maxssl.com/uploads/?url=https://images.xiaozhuanlan.com/photo/2023/1e66bdf93b1cf788f3b1a667ce9e7c32.jpg"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/14103/" title="聊一聊GIS之家团队数据案例源码共享以及在线体验">聊一聊GIS之家团队数据案例源码共享以及在线体验</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/38886/" title="记录–get请求参数放在body中？" data-bg="https://img.maxssl.com/uploads/?url=https://img2020.cnblogs.com/blog/2149129/202107/2149129-20210719144042684-15122820.jpg"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/38886/" title="记录–get请求参数放在body中？">记录–get请求参数放在body中？</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/22682/" title="报错：Parsing error: No Babel config file detected…的解决方案" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/df10ae3b636a4d6fad58d5df0790487f.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/22682/" title="报错：Parsing error: No Babel config file detected…的解决方案">报错：Parsing error: No Babel config file detected…的解决方案</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/23425/" title="云原生——什么是云原生数据库？" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/d19c8587c5884f1407d33f4b01a7a007.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/23425/" title="云原生——什么是云原生数据库？">云原生——什么是云原生数据库？</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":"7e525e970a","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>
