CSDN--Markdown

最新推荐文章于 2024-09-23 19:49:13 发布

置顶 #法外狂徒张三

最新推荐文章于 2024-09-23 19:49:13 发布

阅读量493

点赞数 4

分类专栏： 1024 文章标签： html trigger buffer markdown CSDN

本文链接：https://blog.csdn.net/qq_43935020/article/details/115594473

版权

1024 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

九层妖塔起于垒土

在这里插入图片描述

0、链接

Markdown菜鸟教程
 HTML表格生成器

1、插入图片

阿里云开发指南-图片处理

代码插入居中

<p align="center"><img width="15%" src="图片链接" /></p>

表格图片并存-简历

<table>
    <tr>
        <td width="80%">
            <table>
                <tr>
                    <td align="right">姓名</td>
                    <td align="left">xxx</td>
                </tr>
                <tr>
                    <td align="right">性别</td>
                    <td align="left">xxx</td>
                </tr>
                <tr>
                    <td align="right">电话</td>
                    <td align="left">xxxx</td>
                </tr>
                <tr>
                    <td align="right">邮箱</td>
                    <td align="left">xxxxxxx@xxx</td>
                </tr>
            </table>
        </td>
        <td width="20%" height="100%">
            <img src="url" alt="我的照片" />
        </td>
    </tr>
</table>

姓名	xxx
性别	xxx
电话	xxxx
邮箱	xxxxxxx@xxx

图片居中并排显示

<center class="half">
    <img src="图片链接" width="200"/>
    <img src="图片链接" width="200"/>
    <img src="图片链接" width="200"/>
    <img src="图片链接" width="200"/>
</center>

图片左对齐并排显示

图片文字混合实现垂直居中

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML示例-垂直居中</title>
    <style type="text/css">
        .valign-middle-container {
            display: table-cell;
            vertical-align: middle;
        }
 
            .valign-middle-container img {
                vertical-align: middle;
            }
 
        .align-center-container {
            text-align: center;
        }
 
        #demo {
            width: 50%;
            height: 500px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div id="demo" class="valign-middle-container align-center-container">
        垂直居中
        <img src="https://i-blog.csdnimg.cn/blog_migrate/1c0f50efb422e8baf8ec8289832ab58b.gif" />
        <span>垂直居中</span>
        <img src="https://i-blog.csdnimg.cn/blog_migrate/1c0f50efb422e8baf8ec8289832ab58b.gif" />
        <span>垂直居中</span>
        <img src="https://i-blog.csdnimg.cn/blog_migrate/1c0f50efb422e8baf8ec8289832ab58b.gif" />
        <span>垂直居中</span>
        <img src="https://i-blog.csdnimg.cn/blog_migrate/1c0f50efb422e8baf8ec8289832ab58b.gif" />
        垂直居中
    </div>
</body>
</html>

HTML示例-垂直居中

垂直居中

去除水印

直接插入的默认就是有水印的：
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6f7ea5d709bab109af6b4ad6cfb9be20.jpeg#pic_center =260x300)

删除部分后得到无水印的：
![](https://i-blog.csdnimg.cn/blog_migrate/1b1e8158936f82f1249694480643ae8e.jpeg#pic_center =260x300)

有水印
在这里插入图片描述
无水印

缩放

=260x300

x-oss-process=image/resize,h_100

![](https://i-blog.csdnimg.cn/blog_migrate/0b1f92d875fd059d21b5831d8820269b.jpeg#pic_center )

裁剪

?x-oss-process=image/circle,r_150

![](https://i-blog.csdnimg.cn/blog_migrate/628270f9a758e9cd22b3da0478896a5d.jpeg#pic_center)

先裁剪再缩放

先缩放再裁剪

旋转

?x-oss-process=image/rotate,90

模糊化

/blur,r_5,s_5

2、居中显示的标题

<h1 align="center"> 标题名称 </h1>

谷歌

3、各种表格

文字表格

<table align="center">
  <tr>
    <td align="center">Google搜索</td>
    <td align="center">Chrome商店</td>
    <td align="center">Gmail邮箱</td>
    <td align="center">Google+</td>
  </tr>
</table>

Google搜索

Chrome商店

Gmail邮箱

Google+

图片表格

<table align="center">
  <tr>
    <td align="center"><img src="图片链接" /></td>
    <td align="center"><img src="图片链接" /></td>
    <td align="center"><img src="图片链接" /></td>
    <td align="center"><img src="图片链接" /></td>
  </tr>
</table>

图片文字表格

<table align="center">
  <tr>
    <td align="center"><img src="图片链接" /></td>
    <td align="center"><img src="图片链接" /></td>
    <td align="center"><img src="图片链接" /></td>
    <td align="center"><img src="图片链接" /></td>
  </tr>
  <tr>
    <td align="center">Google搜索</td>
    <td align="center">Chrome商店</td>
    <td align="center">Gmail邮箱</td>
    <td align="center">Google+</td>
  </tr>
</table>


Google搜索	Chrome商店	Gmail邮箱	Google+

4、个性文字

<kbd>Ctrl</kbd>+<kbd>C</kbd>  和 <kbd>Ctrl</kbd>+<kbd>V</kbd>

Ctrl+C 和 Ctrl+V

 **<center><font face="华文新魏" color=#DC143C size=7>九层妖塔&emsp;起于垒土</font> </center>**

九层妖塔起于垒土

<font face="华文新魏" color=	#FF69B4 size=4>奇异值出现的原因：</font>

奇异值出现的原因：

&emsp;&emsp;
&emsp;&emsp;
[<font face="华文新魏" color=#B22222 size=7>彩 蛋</font>](https://methadone-no1.blog.csdn.net/article/details/114642616)

彩蛋

<table><tr><td bgcolor=yellow>背景色yellow</td></tr></table>

背景色yellow

5、表格

Symbol |Pin| Description
----|-----|------
$\overline{OE}$|$1$|三态输出使能端
$LE$|$11$|锁存使能端
$D_n$|$2$~$9$|数据输入端
$Q_n$|$12$~$19$|状态输出端

Symbol	Pin	Description
$\overline{OE}$	$1$	三态输出使能端
$L E$	$11$	锁存使能端
$D_n$	$2$ ~ $9$	数据输入端
$Q_n$	$12$ ~ $19$	状态输出端

<table>
  <tr>
    <th rowspan="2" width=20%, bgcolor=yellow >操作模式</th>
    <th colspan="2"  width=40%, bgcolor=yellow> 控制</th>
    <th width=20%, bgcolor=yellow>输入</th>
    <th width=20%, bgcolor=yellow>输出</th>
  </tr>
  <tr>
    <td > OE' </td>
    <td>  LE </td>
    <td>  Dn</td>
    <td>  Qn</td>
 </tr>
  <tr>
    <td  rowspan="2"> 透明模式 </td>
    <td rowspan="2">  L</td>
    <td rowspan="2"> H </td>
    <td>   L</td>
    <td>   L</td>
  </tr>
  <tr>
    <td>  H</td>
   <td>   H</td>
  </tr>
    <tr>
    <td> 锁存模式</td>
   <td>   L</td>
   <td>   L</td>
   <td>   X</td>
   <td>    Q<SUB>0</SUB></td>
  </tr>
      <tr>
    <td> 禁用模式</td>
   <td>   H</td>
   <td>   X</td>
   <td>   X</td>
   <td>    Z</td>
  </tr>
</table>

操作模式	控制		输入	输出
操作模式	OE'	LE	Dn	Qn
透明模式	L	H	L	L
透明模式	L	H	H	H
锁存模式	L	L	X	Q₀
禁用模式	H	X	X	Z

6、流程图

//
```mermaid
flowchat
总线启动=>start: 总线启动

地址字节=>operation: 发送 地址字节 (写数据)
cond1=>operation: 发送 控制字节
cond2=>operation: 发送 数据字节 
总线停止=>end: 总线停止

总线启动->地址字节->cond1->cond2->总线停止

//```

7、跳转

文章内部跳转

[跳转到](#address)          //需要点击的地方写
<span id="address"></span> //需要跳转到的地方写

//例
[直接跳转到<font face="华文新魏" color=#B22222 size=5>三行代码</font> ](#address)

跳转到文章末尾

跳转到别的文章-超链接

[name](link)

戳我

跳转到别的文章指定地方

[name](link#address)      //需要点击的地方写
<span id="address"></span> //需要跳转到的地方写，别的文章里

[跳转到](https://methadone-no1.blog.csdn.net/article/details/114642616#address)

跳转到