安装vscode及插件

字体设置

{
“workbench.colorTheme”: “Dracula At Night”,
“liveServer.settings.donotShowInfoMsg”: true,
“editor.formatOnPaste”: true,
“editor.formatOnSave”: true,
“files.autoSave”: “onFocusChange”,
“editor.defaultFormatter”: “JetBrains Mono ExtraLight,esbenp.prettier-vscode”
}

html文档中的每一个标签的功能

序号	名称	描述
1	结构化	像一根倒置的”树”,从根到叶子,具有明显的层次
2	DOM	html 结构使用”文档对象模型”来描述(`document objet model`)
3	元素	html 文档中的元素,如根节点,头部, 主体等,使用`<标签>`来描述
4	标签	用来描述元素,通常具有一定语义,例如`<head>,<body>`,也有通用无语义的,如`<div><span>`
5	属性	描述元素特征或行为,写在标签/起始标签中,如`<meta charset="UTF-8">`
6	html	文档大小写不敏感的,`<BODY>`与`<body>`完全没有区别,但推荐全部小写,除约定外(`UTF-8`)

<!-- !文档类型 -->
<!DOCTYPE html>
<!-- ?根元素: lang 页面语言 -->
<html lang="zh-CN">
<!-- 头元素: 页面描述,供浏览器或搜索引擎解析时参考 -->
<head>
    <!-- //元标签meta: charset 默认字符集,utf8可表示世界上几乎所有已知语言字符 -->
    <meta charset="UTF-8" />
    <!-- 浏览器兼容,原用于IE8适配,可确保按IE最高版本来解析页面,可有可无,现在微软也采用了Chrome内核啦 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- *视口适配控制: 极其重要,这涉及到三个"视口"类型之间的转换与适配,后面讲到移动端布局更细说 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 页面标题: 显示在浏览器标签页,用于描述页面信息 -->
    <title>Document</title>
    <!-- 引入外部样式表 -->
    <link rel="stylesheet" href="style.css" />
    <!-- 引入外部脚本 -->
    <script src="outer.js"></script>
</head>
<!-- 主体元素: 页面实际显示的内容,也是开发重点和用户真正关注的部分 -->
<body>
    <h1 style="color: red">hello world</h1>
    <h1>今晚大家很认真</h1>
    <img src="xxx.jpg" alt="" />
    <!-- 单标签: 通常用于引用外部资源
    双标签: 内容来自开发者提供 -->
</body>
</html>