HTML5 笔记1— details元素、mark元素、progress元素、meter元素

最新推荐文章于 2021-12-18 18:45:50 发布

erdouzhang

最新推荐文章于 2021-12-18 18:45:50 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： html5+css3

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/61194735

html5+css3 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了HTML5中新增的几个重要元素，包括detail、mark、progress和meter元素。通过这些元素，网页可以实现内容折叠、高亮显示、进度条展示及数值范围指示等功能，为用户提供更丰富的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本只有google支持

1.detail元素有`<summary>`

未点击前：

这里写图片描述

点击三角形展开内容：

这里写图片描述

<body>
  <details>
    <summary>HTML5+CSS3</summary>
    <p>标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后...</p>
  </details>
</body>

2detail元素没有`<summary>`

点击前：

这里写图片描述

点击后：

这里写图片描述

<body>
  <details>
    <p>标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后...</p>
  </details>
</body>

3.mark元素

这里写图片描述

mark元素用于高亮显示、突出显示的，主要目的吸引读者注意。

<body>
  <h2>以下是关于<mark>html5</mark>的简介</h2>
  <p><mark>HTML5</mark>赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。</p>
</body>

4.progress元素

这里写图片描述

<body>
 <p>
   当前任务完成进度：
     <progress value="85" max="100">85%</progress>
 </p>
</body>

5.meter元素

这里写图片描述

optimum的值小于low值时显示绿色，大于high值时显示红色；low和high之间是黄色。

<p>
   硬盘使用情况：<meter value="43" max="120" min="0">43/120</meter>GB
 </p>
 <p>
   硬盘使用情况：<meter value="43" max="120" min="0"  low="50" high="90" optimum="43">43/120</meter>GB
 </p>

HTML5 笔记1— details元素、mark元素、progress元素、meter元素

1.detail元素有<summary>

2detail元素没有<summary>

3.mark元素

4.progress元素

5.meter元素

1.detail元素有`<summary>`

2detail元素没有`<summary>`