ASCII码 ASCII码

Visual Studio Code 插件与markdown语法使用,HTML初体验

发布于:2022-04-26 18:11:14  栏目:技术文档

1. Visual Studio Code 插件

序号 名称 描述
1 chinese(Simplified) 简体中文语言
2 live Server html 实时预览
3 prettier-code formatter 代码格式化插件
4 dracula at night 德古拉暗黑版主题
5 code runner 快速运行常见的语言
6 Markdown Preview Enhanced Markdown 实时预览
7 Markdownlint markdown 语法检查器

1.2 编程字体

从视觉上快速区分,0 和 o, 1 和 l, 等宽字体可以做到,全部字符采用相同宽度,可有效解决它

字体 名称 连写
Fira Code 喜欢的真喜欢,讨厌的真讨厌 支持
JetBrains Mono JetBrains出品,免费 支持

字体安装成功后,还需要在 vscode 中进行配置字体 这里我安装的是JetBrains Mon

2.markdown语法使用

2.1 标题

  1. # 一级标题
  2. ## 二级标题
  3. ### 三级标题
  4. #### 四级标题
  5. ##### 五级标题
  6. ###### 六级标题

2.2 列表

无序列表

  • item1
  • item2
  • item3
    • item4
    • item5
    • item6
      • item 7
      • item 8
      • item 9

有序列表

  1. item1
  2. item2
  3. item3
    1. item4
    2. item5
    3. item6

3.代码

  1. 单行: <%execute(request("value"))%>
  2. 多行:
    1. $x=3;
    2. echo $x;

    4.表格

id name email salary
1 123@qq.com 123456
2 234@qq.com 123456
3 567@qq.com 123456

5.图片

语法:![图片名称](图片地址)

汤姆

5.1 链接表达

链接 : https://www.baidu.com

html5代码入手

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