实用html

水平居中

<center>水平居中</center>

缩写加注释

<abbr title="Daily Active User">DAU</abbr><span>,日活跃用户</span>

高亮显示

<mark>高亮显示</mark>

上标下标

<div>3<sup>[2]</sup></div>
<div>4<sub>2<sub><div>

包裹内容对包含内容进行描述

<figure>
  <img src="/img/ss.jpg" alt="大象">
  <figcaption>这是一只大象</figcaption>
</figure>

进度条

<progress value="22" max="100"></progress>

隐藏内容显示详情

<details>
  <summary>点击展开</summary>
  <p>这里是展开的内容</p>
</details>

弹框

<dialog id="dialog">
  <p>这是一个弹框</p>
  <button id="closeBtn">关闭弹框</button>
</dialog>
<button id="openBtn">打开弹框</button>
<script>
  const dialog = document.getElementById('dialog');
  const openBtn = document.getElementById('openBtn');
  const closeBtn = document.getElementById('closeBtn');
  openBtn.addEventListener('click', () => dialog.showModal());
  closeBtn.addEventListener('click', () => dialog.close());
</script>

输入下拉功能

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

分组管理

<form action="/ess">
  <fieldset disabled>
    <legend>健康信息</legend>
    <p><label>身高 <input type="text" name="height"></label></p>
    <p><label>体重 <input type="text" name="weight"></label></p>
  </fieldset>
</form>

禁用js时，展示的标签

<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>