吐槽改进日志

Markdown中内嵌HTML的一些操作

字数统计: 1.7k字   |   阅读时长: 7分
,

摘要: 本文记录一些在 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

合并单元格的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<table>
    <tr>
        <th colspan="3">计算机网络分层模型</th>
    </tr >
    <tr>
        <td >OSI七层模型</td>
        <td>TCP/IP四层模型</td>
        <td>TCP/IP五层模型</td>  
    </tr >
    <tr >
        <td>应用层</td>
        <td rowspan="3">应用层</td>
        <td rowspan="3">应用层</td>
    </tr>
    <tr>
        <td>表示层</td>
    </tr>
    <tr>
        <td>会话层</td>
    </tr>
    <tr>
        <td>传输层</td>
        <td>传输层</td>
       <td>传输层</td>
    </tr>
    <tr>
       <td>网络层</td>
        <td>网络层</td>
       <td>网络层</td>
    </tr>
    <tr>
        <td>数据链路层</td>
        <td rowspan="2">网络接口层</td>
       <td>数据链路层</td>
    </tr>
    <tr>
        <td>物理层</td>
        <td>物理层</td>
    </tr>
</table>
计算机网络分层模型
OSI七层模型 TCP/IP四层模型 TCP/IP五层模型
应用层 应用层 应用层
表示层
会话层
传输层 传输层 传输层
网络层 网络层 网络层
数据链路层 网络接口层 数据链路层
物理层 物理层

(3) <pre>

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

(4) <p>

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

这是一个段落。

Share