开发者与设计师速查表

中英双语的快速开发参考卡，包含 Markdown 标准语法、常用正则表达式以及 CSS 布局属性速查。

Markdown 常用语法速查

文档元素	Markdown 语法书写	视觉展示效果
一级标题	`# Heading 1`	一级标题效果
二级标题	`## Heading 2`	二级标题效果
加粗文本	`Bold text`	加粗文本
斜体文本	`Italic text`	斜体文本
无序列表	`- Item 1 - Item 2`	Item 1 Item 2
单行代码	`const x = 10;`	`const x = 10;`
超链接	`[Google](https://google.com)`	Google
引用区块	`> Quote message`	引用内容示例

正则表达式常用匹配元字符

正则元字符	匹配功能与含义定义	匹配实例参考
`.`	匹配除换行符外的任意单个字符	`a.b`匹配`axb`, `a9b`
`\d`	任何数字字符（等价于`[0-9]`)	`\d{3}`匹配`123`, `985`
`\w`	任何字母、数字以及下划线字符	`\w+`匹配`hello_1`
`\s`	任何空白字符（空格、制表符、换行符）	`a\sb`匹配`a b`
`*`	匹配前面的子表达式零次或多次	`ab*`匹配`a`, `ab`, `abbb`
`+`	匹配前面的子表达式一次或多次	`ab+`匹配`ab`, `abbb` (no `a`)
`?`	匹配前面的子表达式零次或一次（可选元素）	`ab?`匹配`a`, `ab`
`^` / `$`	匹配字符串的开始位置 / 结束位置	`^abc$` matches exactly `abc`

CSS Grid 和 Flexbox 属性对照

CSS 布局属性名	布局模型中的功能描述	常用可选属性取值
`display`	定义容器的布局流动模型上下文。	`flex` \| `grid` \| `inline-flex`
`flex-direction`	定义 Flexbox 中子项的排列方向（行/列）。	`row` \| `column` \| `row-reverse`
`justify-content`	在容器内沿主轴（通常为水平）对齐子项。	`center` \| `space-between` \| `flex-end`
`align-items`	在容器内沿交叉轴（通常为垂直）对齐子项。	`center` \| `stretch` \| `flex-start`
`grid-template-columns`	指定网格布局中列的数量与每列的宽度尺寸。	`repeat(3, 1fr)` \| `100px 1fr`
`gap`	定义 flex 或 grid 各个单元格之间的间距。	`16px` \| `1rem 2rem`