B11. 常见标记语言

HTML衍生于XML，属于标记语言的大家族。这些语言通过特定的字符使得线性的纯文本具备特殊的含义，因而在编程上具有深刻的意义。

1.1 Markdown的基本语法

学习了Markdown之后，你可以：
使用简洁的方式记录笔记、撰写说明。
在Github等技术平台上发表富文本内容。

Markdown的出现是为了解决HTML书写普通文档时遇到的问题：
过于繁琐，主要由HTML的标签结构导致；
难以验证安全性，主要因为其中可以嵌入JavaScript代码。
不够直观，直接看源代码比较眼花缭乱。
同时，与Word等软件相对立，Markdown倡导文件格式和编辑器的自由（即不被特定企业所专有），使纯文本也能以简单安全的形式表示格式。

为此，Markdown诞生了。Markdown文件的后缀名为.md。

Markdown文件一般可以导出为.html或.pdf用于分享。

但是由于Markdown形成初期标准规范（standard）不统一，导致不同程序处理同一段Markdown代码的结果并不一致，存在许多部分支持、部分不支持的特性。由于全球最大开源平台Github使用README.md作为说明文档，Github Flavoured Markdown变相成为了一定程度上的标准。

这个教程就是用Markdown编写的。你可以就地进行语法的练习。对于MarkText而言，Ctrl+E切换源码模式/渲染模式，Ctrl+J切换侧边栏，左上角的菜单按钮下的File有Open Recent可打开最近文件；Export可用于导出。

学习任务：

基础语法学习（Markdown 基本语法 | Markdown 教程）
- ⭐⭐⭐段落（Markdown 段落语法 | Markdown 教程）在源代码中，我们不希望一行文本过于冗长；然而，我们也不希望“独句成段”。为此，Markdown设计出了一套方案：一个换行符（即连续两行）在渲染时仍为同一段落，两个换行符（即中间有一个空白行）才表示两个段落。这也就是有些文章复制之后中间会出现换行符的原因。
- ⭐⭐⭐标题（Markdown 标题语法 | Markdown 教程） Markdown使用特殊符号代替冗长的标签格式。#用于标题。标题必须单独成段，即前后必须都有一个空行；井号的个数表示标题的级数：即#对应<h1>，##对应<h2>，######对应<h6>等。井号后须添加空格分隔。不需要结束符。
- ⭐⭐粗体和斜体（Markdown 强调语法 | Markdown 教程）粗体和斜体嵌入在段落之内，因此需要开始和结束符号。使用星号*标记：*内容*为斜体，**内容**为粗体，***内容***为加粗并且倾斜。若失效考虑在星号外侧添加空格，并且使星号内侧不留空格，并且不要包含句号。如a *big black* wolf。
- ⭐引用块（Markdown 引用语法 | Markdown 教程）使用> content表示引用块，可以连续多行，内部可以嵌套其他样式。
- ⭐⭐列表（Markdown 列表语法 | Markdown 教程）使用1.、2.等序号标识有序列表；- 、+ 等符号标识无序列表，通过缩进可以嵌套。
- ⭐⭐⭐行内代码（Markdown 代码语法 | Markdown 教程）使用````表示行内代码的嵌套。
- 分隔线语法（Markdown 分隔线语法 | Markdown 教程）使用---表示分隔线。
- ⭐⭐⭐链接语法（Markdown 链接语法 | Markdown 教程）使用[content](url)表示链接，其中content为内容，可以嵌套其他格式。
- ⭐⭐⭐图片语法（Markdown 图片语法 | Markdown 教程）使用![alt](src)表示图片，可以嵌套在链接内部。
- 转义字符语法（Markdown 转义字符语法 | Markdown 教程）使用\转义有特殊标记意义的字符本身。如3*3*3可以写为3\*3\*3。
Github支持的扩展语法
- ⭐⭐⭐代码块（Markdown 围栏代码块 | Markdown 教程）使用三个反引号`````围起代码，许多编辑器支持高亮功能，只需在三个反引号后输入语言名称即可。
- ⭐⭐任务列表语法（Markdown 任务列表语法 | Markdown 教程）使用- [ ]表示未完成的任务，- [x]表示已经完成。
- ⭐表格（Markdown 表格 | Markdown 教程）语法复杂，建议使用辅助功能生成，比如MarkText中可用Ctrl+Shift+T。

总结内容参见：Markdown Cheat Sheet | Markdown Guide

衍生于Markdown的项目有很多，比如Markmap可以制作思维导图，Slidev可以制作幻灯片，MDN文档也是使用Markdown书写的。

1.2 LaTeX可书写数学公式

学习LaTeX之后，你可以：
解决Word公式编辑过于繁琐的问题。
获得理科类论坛的必备技能。
为理工科论文的数学公式输入打下基础。

在Word中，我们是如何输入公式吗？相信有一部分同学没有自己输入过数学公式，和同学交流时也只是用“平方²、根号√”等字符代替；还有一部分同学使用Word的“公式”功能，但是极其繁琐；也有一部分同学可能听说过MathType等专业软件。
但Word和MathType也是属于专有软件，只能使用特定的编辑器，修改时更为麻烦。其实1989年TeX（ $T E X$ ）已经基本成型，作为科技论文的排版软件，一直作为规范沿用至今。笔者的数学建模就是使用它完成的，使用TexLive（4G之大）可以将其编译为一个格式标准的PDF。

我们仅作为入门，以两个式子为例简要介绍 $T E X$ 的衍生物 $L A T E X$ （简化格式，可内嵌于Markdown文件之中）的语法。

顺便说一句，LaTeX的入门门槛仍然很高，因此在使用前期需要反复查询表格也是非常正常的现象。可以通过LaTeX 备忘清单 & latex cheatsheet & Quick Reference查询。

接下来以这个式子为目标： $A = {y | y = \frac{x^{2}}{x + 1}, x \in \R}$
- ⭐在Markdown中，将LaTeX代码嵌入在$$内部即可，例如 $A$ 会显示为 $A$ 。所以，能够直接在键盘上打出的符号就打为符号本身。在本式中有 $A$ 、 $=$ 、 $|$ 、 $,$ 、 $+$ 、 $1$ 、 $x$ 、 $y$ 。
- ⭐⭐另一些不影响排版的特殊符号，我们使用\identifier（identifier：标识符）来输入。例如，\in表示属于 $\in$ ，\R表示实数集 $\R$ （对于部分不支持的，可以输入\mathbb{R}）。
- ⭐⭐而能够影响排版的符号，则有更加复杂的语法。例如平方，也就是二次方，上标使用的是和Excel统一的符号^。此例中即为x^2。若要输入 $x^{12}$ 、 $a^{b + c}$ 等超过一个字符的指数，指数需要用大括号{}括起以防歧义。因此，属于集合的{}符号就需要用转义字符实现，代码即\{...\}，效果为 ${}$ 。
- ⭐⭐⭐更复杂的是分数。分数的语法为\frac{numerator}{denominator}，先分子后分母。这种格式叫做命令（command），在两个或一个、多个式子的基础上组合出新的式子。因此，我们就写出了：\frac{x^2}{x+1}，即 $\frac{x^{2}}{x + 1}$ 。
- 将上述组合，我们就得到了最终的式子：A={y|y=\frac{x^2}{x+1},x\in\R}。
这是我们的第二个实现目标：

\begin{aligned} Δ & = b^{2} - 4 a c \\ x_{1}, x_{2} & = \frac{- b \pm \sqrt{Δ}}{2 a} \end{aligned}

⭐首先，Markdown使用下面的语法包裹多行公式块：

markdown

$$
Equations
$$

在Equations中书写公式即可。

⭐⭐我们先来看第一行，它具有一个希腊字母 $Δ$ 。它的英文名为delta，所以用小写\delta表示 $δ$ ，用大写的\Delta表示 $Δ$ 。因此有\alpha， $α$ ；\theta， $θ$ 。
所以第一行就是\Delta =b^2-4ac。
⭐第二行出现了下标。和上标类似，只是把^换成了_。（一个在上，一个在下，是不是很形象？）。因此x_1就是 $x_{1}$ ，同理\epsilon_r就是 $ϵ_{r}$ 。
⭐还出现了加减。加减也是一个特殊符号，\pm（取自plus/minus）。
⭐⭐还出现了根号。这也是一种命令，不过内部只有一个表达式。其语法为\sqrt{}。此处为\sqrt{\Delta}（取自Squared Root，平方根）即 $\sqrt{Δ}$ 。顺便说一句， $n$ 次根号就是\sqrt[n]{}，例如 $\sqrt[3]{2} - 1$ 。再顺便说一句， $Δ$ 相当于一个字符，因此省略sqrt的{}也是可以的。
还出现了颜色。颜色的语法和分数类似，为\textcolor{color}{}，color即为颜色的英文单词，常见有red、blue、yellow等。因此我们就有了\textcolor{blue}{\frac{-b\pm\sqrt{\Delta}}{2a}}，即 $\frac{- b \pm \sqrt{Δ}}{2 a}$ 。
⭐两行写完之后，如何换行？答案很简单，使用\\即可。
⭐注意到，这个等式是等号对齐的，并且右端有括号标识的等式序号。这涉及到对齐环境（env）。环境以\begin{}开头，\end{}结尾，大括号内写上相同的环境名，相当于一对标签。“对齐”的环境名就是align。在对齐环境中，每一行使用&来标识对齐点，统一放置在等号前即可。

最终我们得到了：

latex

\begin{align}
\Delta &=b^2-4ac\\
x_1,x_2&=\textcolor{blue}{\frac{-b\pm\sqrt{\Delta}}{2a}}
\end{align}

（选修）甚至我们还可以使用\ce{}命令来写化学方程式，例如：
- $ClO^{-} + CO_{2} + H_{2} O = = = HClO + HCO_{3}^{-}$
- $CH_{2} = CH_{2} + H_{2} O \to_{加压加热}^{催化剂} CH_{3} CH_{2} OH$
Word也支持LaTeX的大部分语法。Alt+Space插入公式后，在左上角选择“LaTeX”。键入公式，按下Ctrl+=可使公式显示为LaTeX形式。若想要回过来修改，点击箭头选择“线性（L）”即可。

1.3 SVG可表示矢量图

学习SVG之后，你可以：
理解常见矢量图的信息表示方式。
学会引用SVG作为网页资源。

SVG，全名可伸缩向量图形（Scalable Vector Graphics），是矢量图最常见的实现方式。它完全基于XML，因此可以直接以svg元素的形式嵌入HTML中。

让我们先来看一下一张最简单的SVG图片，它只有一个圆，撑满了整张画布：

xml

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64">
  <circle cx="32" cy="32" r="32" fill="red" />
</svg>

svg元素上可以设置许多属性：
- xmlns指定了XML标准（命名空间），属于格式性规范
- width和height指定了图片宽高，单位同样为像素px。
- viewBox的四个数值“建立了平面直角坐标系”，例如0 0 64 64表示内部以左上角（即(0,0)）为原点，横坐标共分为64格，纵坐标也分为64格。
圆用一个circle元素生成，其中也有许多属性：
- cx 和 cy：圆心（center）的x和y坐标。（注：计算机中，向右、向下为正方向）
- r：圆的半径。
- fill：填充颜色。
你可以在SVG Playground - Free SVG diagram viewer & editor | SVG TO PNG | TRANSFORM SVG TO REACT中粘贴代码并预览效果，也可以将文件存为.svg后用浏览器打开。

当然还有一些元素如：

<rect>：矩形。
<line>：直线。
<polygon>：多边形。
<polyline>：折线。
这些元素的语法可以通过在SVG cheat sheet · Web Dev Topics · Learn the Web中学习。
最高级的是path元素，它可以通过d属性定义复杂的路径，大部分图标库中的SVG格式用的都是它。例如我们可以用它画一个光标（Modified，By mingcute，Apache 2.0 Licensed）：

xml

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="24" height="24" fill="white"/>
  <g fill="none" fill-rule="evenodd">
    <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/>
    <path fill="black" d="M6.682 3.396a1.088 1.088 0 0 1 1.807-.745l9.951 8.827c.724.642.312 1.84-.655 1.9l-3.117.191l2.092 4.999a2 2 0 0 1-1.062 2.612l-.868.37a2 2 0 0 1-2.626-1.061l-2.226-5.262l-2.323 2.007c-.73.63-1.858.07-1.797-.892z"/>
  </g>
</svg>

通过上面这些介绍我们可以知道，SVG只交代了图的“画法”，而没有交代“效果”。
- 优势：信息冗余很少，文件较小，且放大不会造成损失，只需重绘即可；不过若是遇到色彩变化丰富的照片，SVG也比不过JPG和PNG的压缩。
- 缺点：它依赖于浏览器的渲染，也正因如此很多场景下由于整个渲染器或部分特性的缺失导致兼容性的问题。

知识梳理

Markdown、LaTeX和SVG都属于标记语言，用纯文本的内容表达出了格式信息。
Markdown
1. Markdown文件的后缀名为.md，可以用软件导出为HTML或PDF以分享。
2. MarkText是一款开源代码编辑器
  1. File菜单下常用Open Recent/Export
  2. Ctrl+E切换源代码模式
  3. Ctrl+J切换侧边栏
3. Markdown使用特殊字符表示标记
  1. 规范不统一，Github flavoured Markdown最为流行
  2. 原则：源码上，需要分行的二者之间，最好使用两个换行符（即一个空行）来分隔。
  3. 基础语法 Markdown 基本语法 | Markdown 教程
  4. 扩展语法 Markdown 围栏代码块 | Markdown 教程
  5. 总结：Markdown Cheat Sheet | Markdown Guide
LaTeX
1. 衍生于 $T E X$ ，门槛较高，但格式规范，为论文标准沿用至今。
2. $L A T E X$ 可以内嵌在Markdown中
  1. 使用$$括起行内公式
  2. 使用$$$$（需要换行）括起多行公式
3. 符号参考：LaTeX 备忘清单 & latex cheatsheet & Quick Reference
4. 书写原则：
  1. 键盘上直接能打出来的符号在键盘上打
  2. {}须转义，使用\{、\}
  3. 特殊符号使用\identifier，如\alpha、\Delta、\pm
  4. 上标下标使用^、_，若有多个字符需要用{}括起
  5. 改变排版使用命令，如根号使用\sqrt[n]{}，[n]可省略；分数使用\frac{}{}，先分子后分母
  6. 多行公式使用\\进行换行
  7. 环境以\start{}开始，以\end{}结束，大括号内为相同的环境名；默认居中对齐，可用align对齐环境调整，每行&标记对齐点
SVG
1. SVG基于XML，是矢量图的常见实现方式。
2. SVG中每一个图形使用一个元素，例如circle
3. 由于path的通用性，大多数图标库都使用path实现。
4. 本质：交代画法而不交代画的结果
  1. 优点：
    1. 容易内嵌在HTML文件中
    2. 信息冗余少，文件小
    3. 放大不会造成损失
  2. 缺点：
    1. 不适合表示颜色变化丰富的现实照片
    2. 依赖于浏览器（或其他软件）的渲染，兼容性较差。

课后习题

（多选）以下后缀名的文件，哪些是用标记语言写成的？

A. .html
B. .xml
C. .js
D. .py
E. .md
F. .svg
G. .docx
H. .pptx

（不定项）关于Markdown和LaTeX，哪些说法是正确的？

A. 都属于广义的标记语言家族。
B. 都需要编译，编译产物可以在网页展示，也可以转换为PDF。
C. 都具有统一的规范。

在下面四种文件中，表示一个简单的非渐变几何图标，大小为128x128，理论上文件大小最大的是____，最小的是____，最依赖于软件支持的是____。

A. JPG
B. PNG
C. SVG
D. BMP

（不定项）下列哪些元素可以直接用于将svg图片嵌入或导入HTML内：

A. <b>
B. <img>
C. <div>
D. <svg>

用Markdown梳理“扩展语法·代码块”中的内容。
用 $L A T E X$ 表示 $\log_{2} 64 = 8$ ：____（提示：log也是一个命令）。
用 $L A T E X$ 打出一个基本不等式：____（提示：\ge表示大于等于，取自Greater than or Equal，le表示小于等于）。

🧱 A1. HTML 入门

🎨 A2. CSS 入门

⚡ A3. JavaScript 入门

🌐 B1. Web 通识及工具

🧱 B2. HTML 进阶

🎨 B3. CSS 进阶

⚡ B4. JavaScript 初级

⚡ C1. JavaScript 进阶

📦 C2. 环境搭建与网页部署

🛡️ C3. TypeScript 基础

🔧 C4. Vue 基础

🎨 C5. CSS 高级

💡 D1. 算法基础

🛡️ D2. Typescript 进阶

🔧 D3. Vue 进阶

⚙️ D4. 前端原理

☁️ E1. 服务器基础

☁️ E2. Express.js 基础

B11. 常见标记语言

1.1 Markdown的基本语法

1.2 LaTeX可书写数学公式

1.3 SVG可表示矢量图

知识梳理

课后习题

B11. 常见标记语言 ​

1.1 Markdown的基本语法 ​

1.2 LaTeX可书写数学公式 ​

1.3 SVG可表示矢量图 ​

知识梳理 ​

课后习题 ​

B11. 常见标记语言

1.1 Markdown的基本语法

1.2 LaTeX可书写数学公式

1.3 SVG可表示矢量图

知识梳理

课后习题