HTML5新标签学习总结（网页结构）下

快来打我* 2022-09-25 01:18 100阅读 0赞

*   *   *  figure和figcaption
         *  details和summary
         *  progress
         *  meter
         *  ol

--------------------

### 1.`<figure>`和`<figcaption>`: ###

前者元素结合，例如图文结合；后者是`<figure>` 元素中的标题。  
例如：

--------------------

### 2.`<details>`和`<summary>`： ###

前者是收缩菜单的主组件；后者是`<details>`中的子菜单，包括收缩时显示的字  
例如：

注：火狐等部分浏览器不支持该标签

--------------------

### 3.`<progress>` ###

进度。属性value表示当前进度，max表示总进度  
例如：

当前任务完成进度：
    <progress value="80" max="100"></progress>

--------------------

### 4.`<meter>`： ###

控制范围，超过或低于某个值会出现不同反应。

例如：

<p>硬盘实际使用情况<meter value="120" max="120" min="0" low="20" high="100" optimum="30"></meter>GB</p>

属性解释： optimum 最适值，low最低限度值，high最高限度值，value当前值，max最大值，min最小值

--------------------

### 5.`<ol>`： ###

（有序）列表  
例如：

<ol start="1" type="A">
        <li><a href="#">有序列表A</a></li>
        <li><a href="#">有序列表B</a></li>
        <li><a href="#">有序列表C</a></li>
        <li><a href="#">有序列表D</a></li>
        <li><a href="#">有序列表E</a></li>
    </ol>

属性解释：start 从第几位开始，比如从第一位开始就是start=”1”  
reversed=”reversed” 倒序  
type 排序的类型 A表示字母（大小写区分）、1表示数字、 I表示罗马数字

--------------------