2023-07-03 更新 2420 阅读

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

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

音乐引用

网易云音乐引用

空も飛べるはず-スピッツ 网易云音乐引用-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即可。

哔哔页面本地视频引用

972x734-本地视频引用测试页面截图

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站视频引用

969x737-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-坐骑
1185x355-锦衣

源代码↓

![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
请输入图片描述

源代码↓

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

特殊用法

合并表格

课表 8:30-10:00 10:20-11:55 14:00-15:35
高等数学 计算机原理 信号与系统
课表 8:30-10:00 10:20-11:55 14:00-15:35
高等数学 计算机原理 信号与系统

源代码↓

<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>

脚注

引用内容1

源代码↓

引用内容[^引用自 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">足迹版块

我是页内跳转到的位置


  1. 引用自 ccst.cc