注意：此页面偶尔会存在CSS冲突问题!

博客搭建导航

说明

  Markdown 语法是完全兼容 Html 和 CSS 的。目前我测试的是不兼容 js 的，因为加入 js 内容好像总是失败了。同样的 js 代码放在 html 文件里运行正常，所以可能是 js 想调用 Markdown 文件中的元素，函数指令和 html 不同，总之感觉 js 指令无法指挥 markdown的元素。

  我们知道，在前端三件套里，我们知道，"Html"、"CSS"和"js"可以全部放在一起，放在 ".html" 文件里，也可以分开分别放在三类文件里。但是目前测试无法使用 "js"，同时为了直观和方便，我们把 "Html"、"CSS"语法直接放在 Markdown 文件里。

  引入 Html 相关标签是因为有些标签很好用，而 markdown 本身没有这个功能；或者是为了在博客文章里添加一些功能插件。所以在 markdown 语法里只会单独介绍实用的 Html 标签语法。

交叉引用

1
2
3
4
被引用位置：
<equal id= "equ1"></equal>
引用写法：
见[公式1](#equ1)。

被引用位置： 引用写法： 见公式1。

内联框架

  内联框架语法的关键字为 iframe。然而直接使用它的高度显示会有异常，因为高度100%是在父标签的高度下的。而宽度100%不存在这个问题，解决办法是引入容器关键字 container，方法指定容器的位置和大小，那么父标签就建立起来了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>  
.container1 {  
    width: 100%; /* 设置容器的宽度为90% */  
    margin: 0 auto; /* 水平居中容器 */  
    position: relative; /* 设置容器的定位方式为相对定位 */  
    padding-top: 50%; /* 设置容器的上内边距为容器宽度的一半 */  
    height: 0; /* 设置容器的高度为0，使其自适应内容的高度 */  
}  
  
.container-iframe {  
    position: absolute; /* 设置iframe的定位方式为绝对定位 */  
    top: 0; /* 将iframe定位到容器的顶部 */  
    left: 0; /* 将iframe定位到容器的左侧 */  
    width: 100%; /* 设置iframe的宽度为100% */  
    height: 100%; /* 设置iframe的高度为100% */  
    border: none; /* 可选：移除iframe的边框 */  
}
</style>

<div class="container1">  
    <iframe class="container-iframe" src="https://viewer.diagrams.net/?tags=%7B%7D&highlight=0000ff&edit=_blank&layers=1&nav=1&title=SystemBlockDiagramA#R7VpLc9owEP41PiZj4wf2MQGSTGeaZIaZNu0l49gKqAiLygJMfn0lLL9kORCICQzlgrReVvJ%2B%2B9IKzexNk1viz8bfcQiQ1tHDRDP7WqdjOI7BvjhllVI8w0oJIwJDwVQQhvANCKIuqHMYgrjCSDFGFM6qxABHEQhoheYTgpdVtleMqqvO%2FBGoEYaBj%2BrUnzCk45TqdroF%2FQ7A0Thb2XC89MnUz5iFiHjsh3iZktYvZw40s0cwpulomvQA4srL9JJq4Kbhab4xAiK61Q%2BeF3Yc2L8n0XSCkvHg9Uf4dCGkLHw0Fy8sNktXmQZAFF5xRbJZgPw4hoFmXo%2FpFDGCwYYEz6MQ8EV0NnvFERUoGg6b13cplgRhRfFiz7cATwElK8awLNRtC2MYlzSd0QhAPoWLKly%2BQH2Ui8tXeMSQ7aSjCws1hdZ0YZ%2BW6V26VSExnpMAiN%2BVFSyJsvSNoqhPRoDWRLFB6dUL0hrBD6DZUaDJ3M26eda611q3n85qCFcRXI4hBcOZH%2FCnS%2BbVVbi3BngBCAXJuxA3KS7DpGQCrsIELL0Z7YpqP6pHs0GPCdcjZU7TqEr2xrSqr5gSPAE9jDBhlAhHgCsRIiSRfARHEfcxpkfA6Ndcf5AFoivxYArDkC%2BjBGhHJ9weI9OUMNJz4y6h5ChQMttCqXvusctyJUxkh9g2ctnOBkEtxy13M5Ise874EJMBQiz5c0eYAQLZ0txb%2BiClPhakTYHsxQ8mo7UBPMwpghFoL8DV9KsIcNYhA5zXEOCuTytR2PoXJ4qsSj3fGCTXT7bhXdq7RaEaunVRLcchQ1UOc0%2BYax0H8cT%2BQirgOn%2FnvHxfo3YRr2G7YgyGM0vW2GXP2WjEv%2F%2FXD3kIdL1Lr%2FyxvraYMFS1816eDBJIn8QTPv7F6cyg01k%2FKbH1V9kkYu%2FyVDDy6a9MBp8UP1vPVh8FLPXFzZkhdbTNKftYopAnW9eOlVBe%2BeRnuO0qIWYX%2FqrENuMMcfOGbal0s6uHdzZIJX5ueFOda%2Faz8QZ71T%2FLXk%2FMDmVYzV0rcseWBBmtVeTf9P593PHCyd1QX%2F25n6CHB0PZF%2BIJa%2FpMzy1z2VKFYzr1orOtVKXE5tMz1anVnI7cL9rZyzYdoFv2svf7TGdYJTqGBIjxxb5mNSB0d9wH5ZphH7CjqtSjquFwVjHLlRHZ%2FZ7Bk7tJbd4zqKsDVduDO8LbuQYuVz6AHLQ9rgapqYaLzq%2BGc%2FUjq%2BFaOIrt0G7YqW3wXp4sH9eUfN2jCsrdTfceW4dk%2BRb5wIXkFldhJ32B4sptmQNeoKj9V1UYHncr5Uh8zrXzzLhvk6QuKreLvf2OTYu%2F5qTsxR%2BczME%2F" frameborder="0"></iframe>  
</div>
  1. padding-bottom 是容器下内边距的宽度，设置为 50%，意味着容器高度最大为宽度的 50%。所以只要知道内联框架的高宽比，就知道了这个值设置多少。
  2. 将容器的高度 height 设置为 0，以确保容器的高度仅由内部内容撑开。
  3. container-iframe 是容器内部内容。语法上可以直接用 iframe 做内容，但是是不行的，这样是无法撑开的，还是回到了父标签高度没有指定的错误。
  4. 通过 class 类将容器、容器内容与内联框架 iframe 进行指定说明。

参考：《卡尔曼滤波》“状态空间表达式”节的系统框图

  • 当使用多个演示动画时，一定要记得更改容器名称，否则容器大小都会受最后一次设置的控制。

设备屏宽

内联框架 iframe 的废案，但是有设备屏宽检测功能，这里就记录下来了。在渲染演示中可以很清晰地看到，在连续改变窗口的宽度时，容器的高度发生了两次跳变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
  @media screen and (max-width: 600px) {
    iframe {
      width: 100%;
      height: 231px;
    }
  }
  @media screen and (min-width: 601px) and (max-width: 1200px) {
    iframe {
      width: 100%;
      height: 476px;
    }
  }
  @media screen and (min-width: 1201px) {
    iframe {
      width: 100%;
      height: 644px;
    }
  }
</style>

<iframe src="https://www.geogebra.org/material/iframe/id/XxzCsAG7/width/924/height/637/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/false/rc/false/ld/false/sdz/false/ctl/false"></iframe>

图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% raw %}
<figure id="fig_matlab_varying_ell">

  <figure id="fig_cam_rotate">
    <img src="https://picture.adunas.top/Article/arXiv-2401.17117v1/fig_matlab_4.png" />
    <figcaption>**(a)** 子图a，内部图片容器</figcaption>
  </figure>

  <figure id="fig_matlab_pi_8"></figure>
  <img src="https://picture.adunas.top/Article/arXiv-2401.17117v1/fig_matlab_pi_8.png" />
  <figcaption>**(b)** 子图b，外部图片容器</figcaption>

<figcaption>**Figure 1.** 图1</figcaption>
</figure>
{% endraw %}
(a) 子图a，内部图片容器
(b) 子图b，外部图片容器
Figure 1. 图1

加粗

1
2
3
4
5
Figure 4.

{% raw %}
<b>Figure 4.</b>
{% endraw %}

Figure 4.

Figure 4.