2023-07-03 更新 2225 阅读
所支持常用语法汇总,做个备忘方便查阅。
注:文章页面有引入音乐或引入哔哔内容时,要在开头写入一段话。
音乐引用
网易云音乐引用
使用说明:
(414721)需要在网易云网页版播放歌曲,看网址song?id=后面的数值,实例如下
https://music.163.com/#/song?id=414721
源代码↓
[空も飛べるはず-スピッツ 网易云音乐引用-music](414721)
站内音乐引用、外站音乐.mp3链接引用
注:需要在后台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>
!!!
站内引用
哔哔页面引用、站内评论引用
使用说明: (332)需要在 胡言乱语 页面 按F12 元素里查找 li-comment 的 ID 值,实例如下:<li id="li-comment-332" class="comment-body comment-parent comment-even comment-by-author">
源代码↓
[哔哔页面引用示例-quote](332)
站内文章、独立页面引用
源代码↓
[关于博主-link](https://ccst.cc/about)
站外引用
站外网页引用
源代码↓
[咕咕三原·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)
特殊用法
合并表格
课表 | 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">足迹版块
- 引用自 ccst.cc ↩
评论已关闭