Markdown中内嵌HTML的一些操作

  |  

摘要: 本文记录一些在 Markdown 中嵌入 HTML 的常见操作

【对算法,数学,计算机感兴趣的同学,欢迎关注我哈,阅读更多原创文章】
我的网站:潮汐朝夕的生活实验室
我的公众号:算法题刷刷
我的知乎:潮汐朝夕
我的github:FennelDumplings
我的leetcode:FennelDumplings


在 Markdown 中,经常有一些需求不知道怎么写,例如当你需要更改图像的宽度时,使用 HTML 标签更方便些。此时可以直接写 HTML 本身。

如果要写 HTML,直接把 HTML 标签添加到 Markdown 文本中即可,


行级内联标签

在內联标签的范围内, Markdown 的语法是可以解析的。例如:

1
This **word** is bold. This <em>word</em> is italic.

This word is bold. This word is italic.

(1) <span>

  • <span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
  • <span> 元素包含的文本,可以使用 CSS 对它定义样式,或者使用 JavaScript 对它进行操作。
1
行内文本的一部分设置成<span style="color:blue">蓝色</span>

行内文本的一部分设置成蓝色

(2) <cite>

  • <cite> 标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题。
  • 人名不属于作品的标题。
1
行内文本的<cite>《书名》</cite> 以及 <cite>电影名</cite>

行内文本的《书名》 以及 电影名

(3) <del>

  • <del> 标签定义文档中已删除的文本。
  • <del><ins> 一起使用,描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线,在新插入文本下添加一条下划线。
1
一段带有<del>已删除部分</del><ins>新插入部分</ins>的文本。

一段带有已删除部分新插入部分的文本。

(4) <a>

使用 <a> 代替 markdown 的链接语法。

1
2
markdown语法:[支持公式](https://chengzhaoxi.xyz/2c55447f.html)  
`<a>` 标签: <a href="https://chengzhaoxi.xyz/2c55447f.html">支持公式</a>

markdown语法:支持公式
<a> 标签: 支持公式

(5) <img>

使用 <img> 代替 markdown 的图片语法。

1
2
markdown语法: ![冬天的三清山](https://chengzhaoxi.oss-cn-beijing.aliyuncs.com/resource/赣北单人旅行/7.jpeg)  
`<img>` 标签: <img src="https://chengzhaoxi.oss-cn-beijing.aliyuncs.com/resource/赣北单人旅行/7.jpeg" alt="冬天的三清山" width="50%" height="50%">

markdown语法: 冬天的三清山
<img> 标签: 冬天的三清山


区块标签

Markdown 语法在 HTML 区块标签中将不会被进行处理。例如无法在 HTML 区块内使用 Markdown 形式的强调

1
<p>This **word** is bold. This <em>word</em> is italic.</p>

This **word** is bold. This word is italic.

区块标签必须在前后加上空行,以便于内容区分。而且这些元素的开始与结尾标签,不可以用 tab 或是空白来缩进。Markdown 会自动识别这区块元素,避免在区块标签前后加上没有必要的 <p> 标签。

(1) <div>

  • <div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
  • <div> 元素经常与 CSS 一起使用,用来布局网页。
1
2
3
4
<div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>

这是一个在 div 元素中的标题。

这是一个在 div 元素中的文本。

(2) <table>

  • <table> 标签定义 HTML 表格
  • 一个 HTML 表格包括 <table> 元素,一个或多个 <tr><th> 以及 <td> 元素。
  • <tr> 元素定义表格行,<th> 元素定义表头,<td> 元素定义表格单元。
  • 更复杂的 HTML 表格也可能包括 <caption><col><colgroup><thead><tfoot> 以及 <tbody> 元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Month Savings
January $100
February $80

(3) <pre>

  • <pre> 标签可定义预格式化的文本。
  • 被包围在 <pre> 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
  • <pre> 标签的一个常见应用就是用来表示计算机的源代码。
1
2
3
4
5
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制

(4) <p>

  • <p> 标签定义段落。
  • <p> 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,也可以在样式表中规定。
1
<p>这是一个段落。</p>

这是一个段落。


Share