简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > VSCode前端常用插件推荐和语义化结构元素简单使用
Blogger Information
Blog 54
fans 6
comment 31
visits 106635
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
VSCode前端常用插件推荐和语义化结构元素简单使用
吾逍遥
Original
1068 people have browsed it

一、VSCode前端常用插件推荐

基本插件

序号 插件名称 描述
1 Chinese Language… 中文简体语言包
2 Simple icons 小巧实用的文件图标集合
3 One Dark Pro 个人非常喜欢的一款主题
4 Local History 操作历史记录，可恢复指定时间点
5 Better Align 对齐插件，建议配合Source Code Pro等宽字体
6 TODO Tree TODO插件，可以标记需要修改完善的代码处
7 Project Manager 收录成常用工程，工程间切换利器
8 Settings Sync 同步利器，需要微软帐号或GitHub帐号

前端插件

序号 插件名称 描述
1 Auto Rename Tag 标签自动更名
2 HTML CSS Support 自动补全样式表
3 HTML Snippets html 代码片断
4 Prettier-Code Formatter 几乎支持所有前端代码的格式化
5 JavaScript(ES6) Code snippets js/es6 代码片断
6 Markdown Rreview Enhanced mardown 文件预览
7 Live Server 内置 web 服务器
8 Code Runner 支持常见的编程语言运行调试
9 Bracket pair colorizer 不同颜色表示不同层级括号
  • Auto Close Tag和Auto Complete Tag插件，感觉VSCode中不需要，其功能都已经含有
  • Markdownlint检查Markdown语法插件，实际使用过程中遇到VSCode闪屏，估计是它处理内容时一些Bug，卸载后就正常了。其实Markdown语法已经很简单了，不需要它检查。
    当然，欢迎来我的博客作客，我根据朱老师讲课总结了《Markdown语法使用》

二、Html语义化结构元素简单使用

在听这课之前，我认为网页结构仍然是采用div来分割的，后来也百度了下为什么增加结构化语义元素，个人感觉应该是为了便于搜索引擎收录，搜索引擎根据语义化元素标签更能理解某个页面所有表述内容，不用它再计算匹配了，当然更乐意收录这些页面。

常用结构元素

序号 标签 名称 描述
1 <h1>-<h6> 标题 通常用来划分或标注内容中的文本段落
2 <header> 页眉 一般是由导航, logo 等元素组成
3 <footer> 页脚 一般是由友情链接,联系方式,备案号,版权等信息组成
4 <nav> 导航 导航通常是由一个或多个链接标签<a>标签组成
5 <main> 主体 展示页面主体内容,建议一个页面,只出现一次
6 <article> 文档 本义是文档, 实际上可以充当其它内容的容器
7 <aside> 边栏 与主体无关的信息(广告位, 相关推荐, 阅读排行等)
8 <section> 区块 文档或主体中的通用小组件
9 <div> 容器 本身无任何语义,通过它的属性来描述用途

我的源代码

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Html语义化结构元素</title>
  5.     <style>
  6.       * {
  7.         margin: 0;
  8.         padding: 0;
  9.         box-sizing: border-box;
  10.       }
  11.       body {
  12.         width: 100vw;
  13.         height: 100vh;
  14.         display: grid;
  15.         grid-template-rows: 60px 1fr 60px;
  16.         gap: 10px;
  17.       }
  18.       header {
  19.         line-height: 60px;
  20.         background-color: green;
  21.       }
  22.       footer {
  23.         line-height: 60px;
  24.         background-color: aquamarine;
  25.       }
  26.       h1 {
  27.         text-align: center;
  28.       }
  29.       .container {
  30.         background-color: cadetblue;
  31.         display: grid;
  32.         grid-template-columns: 200px 1fr;
  33.         gap: 10px;
  34.         padding: 10px;   
  35.       }
  36.       aside {
  37.         background-color: chocolate;
  38.         display: grid;
  39.         align-items: center;
  40.       }
  41.       main {
  42.         background-color: white;
  43.         display: grid;
  44.         grid-template-rows: 1fr 100px;
  45.         gap: 10px;
  46.         padding: 5px;
  47.       }
  48.       article {
  49.         display: grid;
  50.         align-items: center;
  51.       }
  52.       .section {
  53.         display: grid;
  54.         grid-template-columns: 1fr 1fr;
  55.         gap: 10px;
  56.       }
  57.       section {
  58.         background-color: cornflowerblue;
  59.         display: grid;
  60.         align-items: center;
  61.       }
  62.     </style>
  63.   </head>
  64.   <body>
  65.     <!-- 头部 -->
  66.     <header>
  67.       <h1>&lt;Header&gt;</h1>
  68.     </header>
  69.     <!-- 主体 -->
  70.     <div class="container">
  71.       <aside>
  72.         <h1>&lt;Aside&gt;</h1>
  73.       </aside>
  74.       <main>
  75.         <article><h1>&lt;Main&gt;</h1></article>
  76.         <div class="section">
  77.           <section>
  78.             <h1>&lt;Section&gt;</h1>
  79.           </section>
  80.           <section>
  81.             <h1>&lt;Section&gt;</h1>
  82.           </section>
  83.         </div>
  84.       </main>
  85.     </div>
  86.     <!-- 底部 -->
  87.     <footer>
  88.       <h1>&lt;Footer&gt;</h1>
  89.     </footer>
  90.   </body>
  91. </html>

效果图

html结构化语义元素

为了学习课程我开通了Github，作为初学者，欢迎大家来指导GitHubhttps://github.com/woxiaoyao81

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：目前vscode插件数量已达到3万多个, 可以说90%的都是垃圾, 但精品也有不少, 对于3万来说,10%精品也有好几千了, 不是吗?
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
吾逍遥 2020-10-19 19:38:07
老师可以再推荐一些
1 floor
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！