盘点不怎么熟悉但十分有趣的html标签

Posted 2020-08-03. Updated 2024-07-07. 211 words. 2 min read. 0 views. 0 messages.

🌶 过期警告： 本页面距今已有 1434 天未更新，年久失修，内容可能有所偏颇，还请仔细甄别！

在网页开发中，很多的效果需要借助JavaScript才能实现，今天就和大家一起盘点一下一些你可能不太熟悉，但十分有趣的html标签

Input输入框

如果你需要一个取色器

1
<input type="color" />

拖动条

1
<input type="range" />

搜索框

1
<input type="search" />

时间和日期选择器

1
<input type="time" name="" id="" />
2
<input type="date" name="" id="" />
3
<input type="datetime-local" name="" id="" />
4
<input type="month" />

还可以在输入框里面给一些默认选项

1
<input list="emailList" />
2
<datalist id="emailList">
3
  <option value="@gmail.com"></option>
4
  <option value="@qq.com"></option>
5
</datalist>

进度条

1
<progress value="30" max="100" color=""></progress>
2
<progress></progress>
3
<meter value="20" min="0" max="100" high="60" optimum="50" low="30"></meter>
4
<meter value="50" min="0" max="100" high="60" low="30" optimum="50"></meter>
5
<meter value="100" min="0" max="100" high="60" optimum="50" low="30"></meter>

字体增强

1
<del>删除线</del>
2
<ins>下划线</ins>
3
<abbr title="这是一个提示语句">放置</abbr>
4
<mark>学到了</mark>
5
<details>
6
  <summary>点击可查看更多</summary>
7
  <p>这是隐藏内容</p>
8
</details>

图片

我们可以给图片添加描述信息，并且还可以根据不同的屏幕分辨率输出不同的图片

1
<!-- 图片描述 -->
2
<figure>
3
  <img
4
    src="https://pic.zcily.life/images/2021/09/20/AvatarMaker011d0472ceaf8014.png"
5
    width="200"
6
    height="200"
7
  />
8
  <figcaption>这是我的个人头像</figcaption>
9
</figure>
10
<!-- 响应式资源 -->
11
<picture>
12
  <source
13
    media="(max-width: 300px)"
14
    srcset="
15
      ![](https://cdn.jsdelivr.net/gh/Smart-Chou/webphoto/image/180530-958464.jpeg)/w100
12 collapsed lines
16
    "
17
  />
18
  <source
19
    media="(max-width: 600px)"
20
    srcset="
21
      ![](https://cdn.jsdelivr.net/gh/Smart-Chou/webphoto/image/180530-958464.jpeg)/w200
22
    "
23
  />
24
  <img
25
    src="![](https://cdn.jsdelivr.net/gh/Smart-Chou/webphoto/image/180530-958464.jpeg)/w300"
26
  />
27
</picture>

表单

1
<!-- 表单 -->
2
<!--表单组合 -->
3
<form>
4
  <fieldset>
5
    <legend>用户注册</legend>
6
    username：<input type="text" /> password：<input type="password" />
7
  </fieldset>
8
</form>
9
<!-- 必填字段 -->
10
<form action="">
11
  <input type="text" required />
12
  <input type="email" required />
13
  <input type="submit" value="发送" />
14
</form>
15
<!-- 发送邮件 -->
5 collapsed lines
16
<form action="MAILTO:1270799700@qq.com" method="post" enctype="text/plain">
17
  <!-- <input type="text" required>
18
     <input type="email" required> -->
19
  <input type="submit" value="发送" />
20
</form>

弹窗

自带的弹窗还挺好看的

1
<dialog id="dialog">
2
  <h2>提示：</h2>
3
  <p>这是一个可关闭弹窗</p>
4
  <button onclick="closeModal()">close</button>
5
</dialog>

我们还是需要一点JavaScript来启动它

1
<script>
2
    var dialog = document.getElementById("dialog");
3
    dialog.showModal();
4
    function closeModal() {
5
        this.dialog.close();
6
    }
7
</script>