搭建高效的开发环境、markdown语法、与常用HTML术语 - 第十九期_php

首页 > 博客列表 > 搭建高效的开发环境、markdown语法、与常用HTML术语

博主信息

博文 38

粉丝 0

访问量 25738

专题推荐

更多>

1.1 编辑器——vscode

下载：https://code.visualstudio.com/

配置：

一、主题（theme：Dracula official，Dracula at night）

二、插件：

 1. Markdown Preview Enhanced
 2. live server(页面实时预览) 可以在本机创建一个本地web服务器，可以实时的预览html页面
 3. better comments(帮助注释标记)
 4. prettier-code formatter （vs设置 - default format - 选择即可）

1.2 markdown常用语法

markdown 语法

1. 标题

# level 1 headline
## level 2 headline
### level 3 headline
#### level 4 headline
##### level 5 headline
###### level 6 headline

2. 列表

2.1 无序列表

item1
item2
item3
- subItem3-1
- subItem3-2
- subItem3-3

2.2 有序列表

item1
item2
item3
1. subItem3-1
2. subItem3-2
3. subItem3-3

3. 代码

单行: const box = document.querySelector("#box")
多行（```后添加语言会高亮）

namespace core;
class Demo
{
    // ...
}

4. 表格

id	name	email	salary
1	朱老师	zhu@qq.com	123456
2	王老师	wang@qq.com	323456
3	张老师	zhang@qq.com	553456

5. 图片

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

image viewer

链接：

git命令: https://dave-xi.github.io/

关于 VSCODE 插件, 会分享列表,供同学们参考, 不必全部导入,根据进度确定

1.3. 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 语法检查器

html / css

序号	名称	描述
1	`auto close tag`	标签自动关闭
2	`auto rename tag`	标签自动更名
3	`indent-rainbow`	以不同颜色显示代码缩进
4	`css peek`	查看并跳转到 css 定义位置
5	`html css support`	css 自动智能补齐
6	`intellsense for css ...`	html 中的 css 智能提示
7	`easy less`	less 实时编译
8	`px-to-viewport`	px 自动转 vw
9	`svg preview`	svg 预览器
10	`tailwind css ...`	无需离开 html 就可快速构建出现代网页
11	`tabout`	按 tab 就可快速跳到下一下,或跳出/越过括号等

js / es6 / node / vue

序号	名称	描述
1	`bracket pair ...`	括号高亮配对提示
2	`javascript(es6) code snippets`	常用 js 代码片断
3	`node-snippets`	常用 node 代码片断
4	`quokka.js`	js/es6 代码语法实时检查/执行器(续命法宝)
5	`rest client`	可不离开 vscode 环境进行 api 请求测试
6	`eslint`	js 代码质量智能分析器
7	`vetur`	vue 语法高亮,智能感知,emmet 等
8	`vue3 snippets`	vue3 常用代码片断
9	`vue-helper`: vue-helper	在扩展中使用的 vue 提示,如 element ui

php

序号	名称	描述
1	`php intelephense`	php 语法提示/自动补齐
2	`php intellisense`	php 代码跟踪/重构/自动完成
3	`php debug`	php 代码调试器
4	`php docbloker`	php 生成块级注释
5	`vscode-database`	vscode 数据库 SQL 支持插件

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. HTML文档结构、常用术语与概念

1.5. http 基础

序号	名称	描述
1	http	(Hyper Text Transfer Protocol)超文本传输协议
2	超文本	使用标签描述内容,并且具有层级结构的文本,最常见的就是`html`文档
3	用途	专用于从 WWW 服务器传输”超文本”到用户本地”浏览器”的专用传输协议
4	原理	基于`请求`与`响应`,每一次`请求`必然对应一个`响应`
4	特点	无状态,每一次请求对服务来说都是全新,尽管这些请求来自同一个客户端同一个客户

1. 常用术语

序号	名称	描述
1	客户端	能发起 http 请求的终端,例如浏览器,命令行,js 脚本等
2	服务器	能接受 http 请求,并响应服务的设备,远程/本地,只要安装了服务器软件即可
3	相对路径	从当前路径开始查询, `./`当前路径, `../`:上级,可多次使用,如`../../..`
4	绝对路径	忽略当前位置,从根路径开始,查询效率高,但不够灵活
5	URI	统一资源标识符,表示网络中唯一且可用的资源,如 html,图片,视频,程序等
6	URL	统一资源定位符,是 URI 子集,用来描述 URI 资源的”字符串”
7	url	https://www.php.cn:443/course/1345.html
8	语法	协议://主机名:端口号/路径/文件名
9	协议	http/https/ftp/file/…
10	端口	http(80), https(443), ftp(21),sftp(22),email(25)…
11	端口	类似你所在地政务中心的办事窗口,每个窗口可接受请求,并提供不同的服务
12	主机名	最常见的就是域名,也可以用 IP 地址表示,如`61.164.119.121`
13	本地 IP	`127.0.0.1`,linux/macos`0.0.0.0`,主机名/域名: `localhost`

更多 http 知识:https://developer.mozilla.org/zh-CN/docs/Web/HTTP

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

2. code示例

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

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

搭建高效的开发环境、markdown语法、与常用HTML术语

2022-03-24 12:50:45