VScode 常用插件：

vscode-icons : 方便展示各种后缀文件
View In Browser & Open in Browser : 右键使用浏览器打开文件
Live Server ： 模拟服务器方式打开文件
HTML CSS Support： 补全代码或提示css 样式

vs code 其他常用插件

1、Auto Rename Tag 修改html标签，自动帮你完成尾部闭合标签的同步修改，和webstorm一样。
2、Auto Close Tag 自动闭合HTML标签
4、Beautiful 格式化代码的工具
5、Ejs Snippets ejs 代码提示
6、ESLint 检查javascript语法错误与提示
7、File Navigator 快速查找文件
8、Git History(git log)查看git log
9、Gulp Snippets 写gulp时用到，gulp语法提示。
10、HTML Snippets 超级好用且初级的H5代码片段以及提示
11、Debug for Chrome让vs code映射chrome的debug功能，静态页面都可以用vscode来打断点调试
12、Document this Js的注释模板
13、jQuery Code Snippets jquery提示工具
14、Html2jade html模板转pug模板
15、JS-CSS-HTML Formatter 格式化
16、Npm intellisense require 时的包提示工具
17、Path Intellisense 自动路径补全、默认不带这个功能
18、Project Manager多个项目之间快速切换的工具
19、Pug(Jade) snippets pug语法提示
20、React Components 根据文件名创建反应组件代码。
21、React Native Tools reactNative工具类为React Native项目提供了开发环境。
22、Stylelintcss/sass代码审查
23、Typings auto installer 安装vscode 的代码提示依赖库，基于typtings的
24、VueHelper Vue2代码段（包括Vue2 api、vue-router2、vuex2）
25、Vue 2 Snippets vue必备vue代码提示
26、Vue-color vue语法高亮主题

VScode自定义快捷方式

ctrl + win + z ： 快速注释
shift+ctrl+alt+z：代码格式化
Alt + Shift + A :块注释

自动加载默认VScode 模板

英文状态下，输入!+tab

html元信息设置自适应语句


  #设置当前文档的视窗、视口的宽度直接就等同于浏览此也没得设备得宽度，并且初始化缩放比例为 1

html自定义代码片段方法：

位置： File --> Peference --> user Snippets
  编写规则：每个代码段都要以代码段名称进行定义，并具有前缀、范围、内容和描述几个重要参数。
         Print to console : 代码段名称，也就是自定义代码片段名称。
         scope： 范围，指定代码片段应用的语言范围。
         prefix：前缀，触发代码段的快捷键
         body：代码段内容
         $1, $2: 光标停留位置
         description： 该代码段的说明或概述
   示例：
    "snippets html5": {
        "prefix": "ht",
        "body" : [
        "",
        "",
        "",
        "\t",
        "\t${1:网页标题}",
        "\n",
        "\n",
        "\n",
        ""
        ],
        "description": "Most basic code for html5 doc"
    }

 html 格式化常见标签

文本双标签名称：h1/h2/h3/h4/h5/h6 -->标题
       p  --> 段落、正文
       strong/em  --> 重点强调/一般强调
       b/i   --> 粗体/斜体
       ul/ol/dl --> 列表区域
       li/dt/dd --> 列表项目
多媒体标签： a --> 超级链接
       img --> 图片
       audio --> 音频
       video -->  视频
       canvas --> 画布(可以绘制图形的区域)
表格表单标签：table --> 整体表格区域
       tr --> 表格内的行
       td --> 表格内的单元格
       form --> 整体表单区域
       input --> 表单中的组件元素
       button --> 表单中的按钮元素
       select --> 表单中的下拉列表
布局常见标签：div --> 通用的栏目、板块区域
       section --> 通用的栏目、板块区域（比div小的范围，“部分”的区域）
       span --> 通用的小组合区域(最小范围的)
       header --> 页面头部
       footer --> 页面底部
       aside --> 页面侧边栏
       nav --> 导航区域
       article --> 文本区域

Html关联css三种方式

行间引用 = html代码行中直接嵌套css
 原标题：老师留作业让孵小鸡，家长崩溃称“闻所未闻”

 
内联引用 = html页面建立专门的css代码区域进行关联

 
 
 持续推进更高水平的对外开放
 


外链引用 = html页面中从外部链接导入独立的css文件

    
    
    这是一遍好玩的新闻
    

CSS选择符优先级关系：

ID选择符优先级最高，因其具有唯一性。这种唯一性是至JS获取ID标签时，只对第一个ID元素生效。

类(class)是自定义的类别归纳，优先级其次。

标签选择符是html默认对象设置，优先级最低。

CSS常用选择符

通配选择符：*

* {
  margin: 0;
  padding: 0;

}  #协助消除内外边距默认值(UA)

后代选择符
article header h4 {
        color: black;
        font-size: 25px;
    }

子代选择符
header>h1 {
        color: white;
    }
后代 子代组合使用
body header > a {
        background:  green;
    }

群组选择符
 header, h1, h4 {

        color: azure;
    }
    
指定选择符
p.bg-yellow {
    font-size: 30px;
 }

CSS常用选择符优先级

权重值计算：STYLE ATTRIBUTE:1000;ID(#)标签选择符：100；CLASS(.)类选择符:10；元素(标签)选择符:1

html盒模型属性

width： 设置对象宽度；具有 min-width  和 max-width设定
height：设置对象高度；
padding： 设置对象内部边距
margin： 设置对象外部边距
border：设置对象的边框效果