首页 > 博客列表 > VSCode 搭建与配置图文详解、Markdown 基础知识、HTML5入手初体验

博主信息

博文 2

粉丝 0

访问量 1600

专题推荐

更多>

1、VScode 搭建与配置图文详解

1.1 Vscode 安装

Vscode下载地址：https://code.visualstudio.com/

1.2 Vscode 插件安装

1.2.1 VScode汉化插件安装

Vscode 汉化

1.2.2 VScode主题插件安装

VScode主题

1.2.3 VScode 代码格式化插件设置

VScode代码格式化

1.3 VScode 通用插件

VScode 常用插件，平时基本上都可以用到的。

序号	名称	描述
1	`chinese(simplified ...)`	简体中文语言包
2	`live server`	html 实时预览
3	`prettier-code formatter`	最流行的代码格式化插件
4	`better comments`	自定义注释颜色
5	`path intellisense`	路径自动感知填充
6	`helium icon theme`	一款我喜欢的文件图标主题
7	`one dark pro`	经典的主题,使用者众多,很耐看
8	`material theme`	经典”材料”主题
9	`material theme icons`	常与`material theme`配置的文件图标
10	`shades of purple`	赛博朋克风格的一款主题,很明亮风骚
11	`dracula official`	经典的吸血鬼主题
12	`dracula at night`	个人更喜欢这款小众的吸血鬼暗黑版(教学用它)
13	`code runner`	几乎可以快速运行常见的所有语言,如`php,java,js...`
14	`codesnap`	快速生成苹果电脑风格的代码片断截图,分享时使用

markdown

序号	名称	描述
1	`markdown preview...`	markdown 实时预览
2	`markdownlint`	markdown 语法检查器

1.4 编程字体

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

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

字体安装成功后,还需要在 vscode 中进行配置: settings.json

# 将Fira Code 字体放在第一个
"editor.fontFamily": "'Fira Code',Consoles, 'Courier New', monospace",
# 打开允许连写开关
"editor.fontLigatures": true,

2、Markdown 基础知识

2.1 标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

测试

二级标题

三级标题

四级标题

五级标题

六级标题

2.2 列表

2.2.1 无序列表

test1
test2
test3
test4

2.2.2 有序列表

test1
test2
test3
1. ceshi1
2. ceshi2
3. ceshi3

2.3 代码

单行代码：<script>alert(/1/)</script>
多行代码：

import requests
resp = requests.get("https://www.baidu.com/")
print(resp.text)

2.4 表格

时间	工作任务	人员
0316	摸鱼	李刀仔
0316	php	李刀仔
0316	test	李刀仔
0316	learn	李刀仔

2.5 图片

语法: ![图片说明](图片URL)

2.6 链接

语法：这是一个链接 [php中文网](https://www.php.cn/)
这是一个链接 php中文网

2.7 区块

2.7.1 区块基础语法

区块引用
php中文网
学的不仅是技术更是梦想

2.7.2 区块中使用列表

区块中使用列表

第一项
第二项

第一项
第二项
第三项

3、HTML5入手初体验

3.1 HTML5源代码

<!-- !文档类型 -->
<!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>

3.2 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`)

学会在 Chrome 开发者工具->元素选项卡->查看 html 文档结构与 CSS

批改老师：

PHPz

批改状态：合格

老师批语：写的不错，加油

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

VSCode 搭建与配置图文详解、Markdown 基础知识、HTML5入手初体验

2022-03-18 03:25:58