HTML：可能会用到的元素，整理好不用再找！

2020-07-12 本文已影响0人以气御码

进入我的主页，查看更多HTML的分享！

一. 结构标签

1. 页面布局：

<aside>定义页面内容之外的内容</aside>
<footer>定义文档或节的页脚</footer>
<header>定义文档或节的页眉</header>
<main>定义文档的主内容</main>
<nav>定义文档内的导航链接</nav>
<!-- 示例： -->
<header>我是导航栏</header>
<nav>我是导航栏</nav>
<aside>我是侧边栏</aside>
<main>我是内容</main>
<footer>我是页脚</footer>

2. details、summary（折叠）
可配合CSS实现漂亮的折叠面板。

<details>定义用户可查看或隐藏的额外细节</details>
<summary>定义 <details> 元素的可见标题</summary>
<!-- 示例： -->
<details>
  <summary>HTML 5</summary>
  这是展开后看到的内容
</details>

3. 进度条（progress）
可以实现行业占比显示、任务进度、动态进度条等。

<progress>定义任务进度</progress>
<!-- 示例： -->
<style>
progress {
    -webkit-appearance: none;
    width: 180px;
    height: 18px;
    background-color: transparent;
}
progress::-webkit-progress-bar {
    border-radius: 4px;
    background-color: #efefef;
    border: thin solid #efefef;
}
progress::-webkit-progress-value {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background: teal;
}
progress::-moz-progress-bar {
    background: #34538b;
}
progress::-ms-fill {
    background: #34538b;
}
</style>
<progress value="40" max="100"></progress>

4. dialog（弹窗）

close() 关闭
open() 打开（注意css样式的定位不变）
showModal() 打开（注意css样式的定位变为absolute，建议自定义样式）

<dialog>定义对话框或窗口</dialog>
<!-- 
  示例：
  与form配合，这时点击两个按钮都会自动关闭
  不与form配合，可手动调用close()关闭，从而避免自动关闭
-->
<style>
  dialog:not([open]) {
    display: none;
  }
  dialog{}
  dialog::backdrop{}
</style>
<dialog id="dialog">
  <form method="dialog">
    <p>
      要关闭？
    </p>
    <button type="submit" value="false">取消</button>
    <button type="submit" value="true">确定</button>
  </form>
</dialog>
<script>
  let d = document.getElementById("dialog");
  let s = d.showModal();
  d.addEventListener("close", function() {
    console.log(d.returnValue); //returnValue对应button上的value
  });
</script>

5. figcaption（包含的容器）

<figcaption>定义 <figure> 元素的标题</figcaption>
<figure>定义自包含内容，比如图示、图表、照片、代码清单等等</figure>
<!-- 示例： -->
<figure>
  <img src="" alt="" width="200" height="200" />
  <figcaption>我是图片的描述内容</figcaption>
</figure>

6. mark（标记）

<mark>定义重要或强调的内容</mark>
/*示例：*/
<style>
  mark {
    background-color: red;
    padding: 0 4px;
    margin: 0 4px;
    border-radius: 3px;
    font-size: 15px;
    color: #fff;
  }
</style>
<p>今天加班了，下班时记得<mark>打卡</mark></p>

7. meter
IE 浏览器不支持 meter 标签。

<meter>定义已知范围（尺度）内的标量测量</meter>
<!-- 示例： -->
<meter value="0.6"></meter> 
<meter value="6" min="0" low="5" max="10"></meter>

8. article、section
article：定义来自外部（引用）的论坛帖子、报纸文章、博客条目、用户评论等，通常包含标题、页脚等标签，对比<section>更具体。

<article>定义页面内的文章</article>
<section>定义文档中的节</section>
<!-- 示例： -->
<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>
<section>
<h1>WWF</h1>
  <p>
    The World Wide Fund for Nature (WWF) is an international organization working on 
    issues regarding the conservation, research and restoration of the environment, 
    formerly named the World Wildlife Fund. WWF was founded in 1961.
  </p>
</section>

9. 其它

/* 仅Firefox 8.0 以及更高的版本支持 */
<menuitem>定义用户能够从弹出菜单调用的命令/菜单项目</menuitem>

二、文本标签

1. h-（标题）

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2. bdo（方向）

<bdo dir="rtl">定义相反的的文本方向</bdo></p>

3. ruby、rp、rt（注释）

<rp>定义在不支持 ruby 注释的浏览器中显示什么</rp>
<rt>定义关于字符的解释/发音（用于东亚字体）</rt>
<ruby>定义 ruby 注释（用于东亚字体）</ruby>
<!-- 示例： -->
<ruby> 汉 <rp>(</rp><rt>Han</rt><rp>)</rp> 字 <rp>(</rp><rt>zi</rt><rp>)</rp> </ruby>

4. time

<time>定义日期/时间</time>
<!-- 示例： -->
<article>
<time datetime="2011-09-28" pubdate="pubdate"></time>
Hello world. This is an article....
</article>

5. wbr（单词换行时机）
IE不支持。

<wbr>定义可能的折行（line-break）</wbr>

6. abbr、acronym （缩写）
IE 6 或更早版本的 IE 浏览器不支持 <abbr> 标签

<abbr title=""></abbr>
<acronym title=""></acronym>

7. del（删除线）

<del>位于中间的删除线</del>

三、表单

1. fieldset（带标题的边框）

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

2. output（存放输出内容）
Internet Explorer 8 以及更早的版本不支持 <output> 标签。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">
   =<output name="x" for="a b"></output>
</form>

四、媒体

1. video（视频）

controls="controls"，控制面板
autoplay="autoplay"，自动播放
width、height 宽高
loop="loop" 无限循环，loop="1"只循环播放1次
muted="muted" 静音
poster="" 预览图（包括下载的文件）
preload 预加载，与autoplay冲突（只使用其中一个）

<video src="">
您的浏览器不支持 video 标签。
</video>

2. audio（音频）

controls="controls"，控制面板
autoplay="autoplay"，自动播放
loop="loop" 无限循环，loop="1"只循环播放1次
muted="muted" 静音
preload 预加载，与autoplay冲突（只使用其中一个）

<audio src="">
您的浏览器不支持 audio 标签。
</audio>

3. source（源文件****）
Internet Explorer 8 以及更早的版本不支持 <source> 标签。

<video controls>
   <source src="" type="video/mp4">
   <source src="" type="video/ogg">
 Your browser does not support the audio element.
</video>

五、文档

MDN(https://developer.mozilla.org/zh-CN/docs/Web/HTML)
W3Cschool(https://www.w3cschool.cn/html5)
菜鸟教程(https://www.runoob.com/html/html5-intro.html)
后续会完善，添加一些常用的元素（如input）；如果有补充内容，请在评论区留言。