VSCODE编辑器

插件	描述
Better Comments	自定义注释颜色
Dracula Official	吸血鬼主题
Live Server	html实时预览
markdown preview Enhanced	markdown实时预览
JetBrains Mono	等宽字体，免费

markdown语法

1.标题

# -> html标签的<h1>,一级标题
## -> html标签的<h2>,二级标题
### -> html标签的<h3>,三级标题
#### -> html标签的<h4>,四级标题
##### -> html标签的<h5>,五级标题

2.列表

2.1无序列表（-）

text1
text2
text3
- text3.1
- text3.2

2.2有序列表（1. ）

text1
text2
text3
1. text3.1
2. text3.2

3.代码（`,```）

单行： const box = document.querySelector('#box')
多行：
```
namespace core;
class Demo
{
 // ...
}
```

4.表格( | - )

id	name	email	salary
1	张老师	zhang@qq.com	124564
2	朱老师	zhu@qq.com	1515615
3	李老师	li@qq.com	5454455757

5.图片

语法:

链接：(< >)

个人博客：https://www.php.cn/blog/llc123.html

HTML文档描述

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

html标签注释

<!--文档类型-->
<!DOCTYPE html>
<!--根元素-->
<html lang="zh-cn">
<!--根元素只有两个子元素-->
<!--头元素：页面中不可见，用户看不到，也不在乎-->
<head>
    <!--元标签-->
    <meta charset="UTF-8">
    <!--兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--适配移动端-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--标题页面：显示在浏览器标签页-->
    <title>页面</title>
</head>
<!--主体元素:页面实际显示的内容，也是开发重点和用户真正关注的部分-->
<body>
    <!--标题元素，用<h1></h1>标签来表示-->
    <h1>hello word</h1>
</body>
</html>

markdown和html的初体验

VSCODE编辑器

markdown语法

1.标题

2.列表

2.1无序列表 （-）

2.2有序列表 （1. ）

3.代码 （`,```）

4.表格( | - )

5.图片

HTML文档描述

html标签注释

2.1无序列表（-）

2.2有序列表（1. ）

3.代码（`,```）