有趣的东西

发表于 更新于 分类于 阅读次数： Waline： 本文字数： 4.2k 阅读时长 ≈ 4 分钟

 将我遇到的一些有趣东西记录下来，方便用Tyopa来写博客，感觉比较好玩。

 注：如果时间越往后，文章里面可能会涉及到修改文件，所以不一定适合所有人。虽然我没做多大努力让搜索引擎知道我（我都没喂蜘蛛），但是当我有较多好东西时，总想分享给别人。
 感谢所有生产者。

来源

标题 链接 作者
盘点一些你不太熟悉但是十分有趣的HTML标签 https://www.bilibili.com/video/BV1za4y1E7oS lookroot
我和你 你和我 在一起
我爱你 你爱我 生一群

html

有趣的html

input

<input type="color" name="">

<input type="range" name="">

<input type="time" name="">

<input type="date" name="">

<input type="datetime-local" name="">

<input type="week" name="">

list

1
2
3
4
5
<input type="list" list="emaillist" name=""><br>
<datalist id="emaillist">
	<option value="@qq.com"></option>
	<option value="@gamil.com"></option>
</datalist>

progress

1
2
<progress value="" max=""></progress><br>
<progress value="30" max="100"></progress><br>

meter

1
2
3
<meter max="100" min="0" low="30" optimum="50" high="70" value="20"></meter><br>
<meter max="100" min="0" low="30" optimum="50" high="70" value="50"></meter><br>
<meter max="100" min="0" low="30" optimum="50" high="70" value="80"></meter><br>

小东西合在一起

  • <del>删除线</del>删除线typora-markdown:~~删除线~~删除线
  • <ins>下划线</ins>下划线<u>下划线</u>下划线(不推荐)
  • <abbr title="你放上来了">放上来</abbr>放上来
  • <mark>我学到了</mark>我学到了
  • <details><summary>点击查看更多</summary><p>没更多</p></details>
    点击查看更多

    没更多

图片

1
2
3
4
<figure>
	<img src="https://dwz.cn/NMaOCMyf" width="200" height="200">
	<figcaption>我是头像</figcaption>
</figure>
我是头像
1
2
3
4
5
<picture><!--可以实现响应式图片，应该需要服务器支持-->
    <source srcset="https://dwz.cn/NMaOCMyf" media="(max-width:300px)">
    <source srcset="https://dwz.cn/NMaOCMyf" media="(max-width:600px)">
    <img src="https://dwz.cn/NMaOCMyf" alt="">
</picture>

from

1
2
3
4
5
6
<form action="">
    <fieldset>
        <input type="text" name=""><br>
        <input type="password" name=""><br>
    </fieldset>
</form>
无聊
有趣
1
2
3
4
5
<form action="">
    <input type="text" name="" required><br>
    <input type="email" name="" required><br>
    <input type="submit" name="" value="提交"><br>
</form>
text-r
email-r

1
2
3
4
5
<form action="MAILTO:[email protected]" method="POST" enctype="text/plain">
    <input type="text" name=""><br>
    <input type="submit" name="" value="提交"><br>
</form>
<!-- 不建议 --》


### dialog 
1
2
3
4
5
<dialog id="dialog" open>
    <h2>提示</h2>
    <p>可以关的弹窗</p>
    <button onclick="javascript:document.getElementById('dialog').close()">关</button>
</dialog>

提示

可以关的弹窗

偶然了解

  • 2024年1月22日 23:43:02 html特性，每个标签都有一个title属性，可以用来显示信息。鼠标放上去就可以显示。

hexo-next

全文阅读

 read_more_btn: true阅读全文的按钮显示。

 excerpt_description: true如果true，则预览写在description:即可。如果false，则需要用<!-- more -->来分割。前者不好写复杂的东西，不能回车等，需要用html。后者则需要每次都写。

内容显隐

{% fold 点击显/隐内容 %}`
`{% endfold %}

1
2
3
4
5
6
7
8
9
10
11
<div>
    <div class="fold_hider">
        <div class="close hider_title">点击显示/隐藏代码</div>
    </div>
    <div class="fold">
        要隐藏的部分
        25338785
        54535
        2424
    </div>
</div>

思维导图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{% markmap 400px %}

- links
	--色的人
	--使得法国

- **inline** ~~text~~ *styles*

- multiline
	text

- `inline code`

- ```js代码块
	console.log('code block');
	console.log('code block');

- latex - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

{% endmarkmap %}

另一种用#的不展示了。另外高版本的mermaid支持思维导图。

画图

hexo和next文档

可以阅读到一些用法，比如标签插件、变量等。

FA