所支持常用语法汇总，做个备忘方便查阅。

注：文章页面有引入音乐或引入哔哔内容时，要在开头写入一段话。

音乐引用

网易云音乐引用

空も飛べるはず-スピッツ 网易云音乐引用-music

使用说明：
(414721)需要在网易云网页版播放歌曲，看网址song?id=后面的数值，实例如下
https://music.163.com/#/song?id=414721

源代码↓

[空も飛べるはず-スピッツ 网易云音乐引用-music](414721)

站内音乐引用、外站音乐.mp3链接引用

ひまわりの約束 - 秦基博-music

注：需要在后台Feng主题 设置外观 / 音乐 api 链接 / 设置解析API地址
自用api地址：https://ccst.cc/api/musicplayer/?type=url&id=

源代码↓

[ひまわりの約束 - 秦基博-music](https://cccimg.com/view.php/1f9adcdecd23e19941ecda1ed2e444a7.mp3)

视频引用

文章内本地视频引用

源代码↓

!!!
<div class="video-box">
<video src="https://cccimg.com/view.php/7b4204f074c528234ee82cd4c7dd504e.mp4" controls></video>
</div>
!!!

文章内B站视频引用

源代码↓

!!!
<div class="video-box">
<iframe src="//player.bilibili.com/player.html?aid=73585529&bvid=BV1cE411Y7kn&cid=125850710&page=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>
!!!

注：B站嵌入代码默认为自动播放。如需更改，需在...page=1后添加&autoplay=0即可。

哔哔页面本地视频引用

DEMO：测试页面

源代码↓

最近看到红米已经突破到300W快充，实现4100mAh 5分钟满电了。啥时候量产可以用上呀？#自言自语 

!!!
<div class="video-box">
<video src="https://cccimg.com/view.php/7b4204f074c528234ee82cd4c7dd504e.mp4" controls></video>
</div>
!!!

注：需要先在后台→设置→评论→允许使用的HTML标签和属性，添加所需的HTML标签和属性，具体如下：

<div class=""><video src="" controls></video></div><div class=""><iframe src="" scrolling="" border="" frameborder="" framespacing="" allowfullscreen=""></iframe></div>

哔哔页面B站视频引用

DEMO：测试页面

源代码↓

B站视频引用测试。#瞎折腾 

!!!
<div class="video-box">
<iframe src="//player.bilibili.com/player.html?aid=73585529&bvid=BV1cE411Y7kn&cid=125850710&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>
!!!

站内引用

哔哔页面引用、站内评论引用

哔哔页面引用示例-quote

使用说明： (332)需要在 胡言乱语 页面 按F12 元素里查找 li-comment 的 ID 值，实例如下:
<li id="li-comment-332" class="comment-body comment-parent comment-even comment-by-author">

源代码↓

[哔哔页面引用示例-quote](332)

站内文章、独立页面引用

关于博主-link

源代码↓

[关于博主-link](https://ccst.cc/about)

站外引用

站外网页引用

咕咕三原·Mihara-link

源代码↓

[咕咕三原·Mihara-link](https://咕咕三原.wang)

图集

😊 带尺寸-等高布局图集

源代码↓

![300x300-坐骑](https://i.mrju.cn/i/2022/12/15/wahwde-0.gif)
![1185x355-锦衣](https://i.mrju.cn/i/2022/12/15/wabb8d-0.gif)

🙂 不带尺寸-普通布局-统一为正方形布局

源代码↓

![壁纸4](https://i.mrju.cn/i/2022/12/24/tw1t9e-0.webp)
![请输入图片描述](https://i.mrju.cn/i/2022/12/24/tw1pse-0.webp)

特殊用法

合并表格

源代码↓

<table>
    <tr>
        <th rowspan="2">课表</th>
        <th>8:30-10:00</th>
        <th>10:20-11:55</th>
        <th>14:00-15:35</th>
    </tr>
    <tr>
        <td>高等数学</td>
        <td>计算机原理</td>
        <td>信号与系统</td>
    </tr>
    <tr>
        <th rowspan="2">课表</th>
        <th>8:30-10:00</th>
        <th>10:20-11:55</th>
        <th>14:00-15:35</th>
    </tr>
    <tr>
        <td>高等数学</td>
        <td>计算机原理</td>
        <td>信号与系统</td>
    </tr>
 </table>

脚注

引用内容¹

源代码↓

引用内容[^引用自 ccst.cc]

支持的html,css标签用法

页内跳转

来个页内跳转，跳转到文未的：<a id="jump_1">我是页内跳转到的位置</a> ,对应：id="jump_1"

源代码↓

<a href="#jump_1">来个页内跳转</a>，跳转到文未的：`<a id="jump_1">我是页内跳转到的位置</a>` ,对应：`id="jump_1"`
<a id="jump_1">我是页内跳转到的位置</a>

字体颜色、字号调整

先给点颜色你看看
再给点颜色你看看
试试改变字体大小
改变字体大小，再来个粗体又如何？

源代码↓

<span  style="color: #5bdaed; ">先给点颜色你看看</span>
<span  style="color: #AE87FA; ">再给点颜色你看看</span> 
<span  style="font-size:1.3em;">试试改变字体大小</span>
<span  style="font-size:1.3em;font-weight: bold;">改变字体大小，再来个粗体又如何？</span>

文本位置

试试内容居中

那内容居右呢？

来个综合的试试
第二行

源代码↓

<p style="text-align:center">
试试内容居中

</p>

<p style="text-align:right">
那内容居右呢？
</p>

<p style="text-align:center;color:#1e819e;font-size:1.3em;font-weight: bold;">
来个综合的试试
<br/>
第二行
</p>

复选框/任务列表

引入BILIBILI视频
引导页更改为跟随小圆圈动态鼠标样式
足迹版块

注： html语法：<input type="checkbox" disabled="disabled"> 这是未选中的复选框、<input type="checkbox" checked="checked" disabled="disabled">这是选中的复选框<code>。其中，不可勾选： disabled="disabled"，可勾选： readonly="readonly"。

源代码↓

<input type="checkbox" readonly="readonly">引入BILIBILI视频
<input type="checkbox" disabled="disabled">引导页更改为跟随小圆圈动态鼠标样式
<input type="checkbox" checked="checked" disabled="disabled">足迹版块

我是页内跳转到的位置