HTML5-增强的页面元素

1 .details元素和summary



Details语义，详情

Summary语义，概要，摘要

Details元素可以实现类似显示/隐藏的功能，summary用于显示details的标题或者间接。

注意：

（1）如果details下没有summary元素，浏览器会自动添加，同时内容是“详细信息”。

（2）details默认是关闭状态的，我们可以通过设置open属性让它打开

（3）我们也可以通过js获取details是否打开的状态

<details
id="hebiIntroduce"
open>

    <summary>鹤壁简介</summary>

    <p>鹤壁，河南省省辖市，位于河南省北部，太行山东麓向华北平原过渡地带，北距首都北京475公里，南至省会郑州110公里。</p>
</details>
<button
onclick="getDetailsStatus()">获取状态</button>
</body>
<script>

    function getDetailsStatus(){

    var details
= document.getElementById("hebiIntroduce")

    var status
= details.open;

    alert(status);

    }
</script>

2.mark元素



mark 语义：标记、做记号、为了强调突出

mark元素的作用是为了突出页面的某一块内容。

特点：放在mark元素内部的内容将高亮显示（背景颜色黄黄的）

<h3>鹤壁介绍</h3>

    <p>鹤壁，河南省省辖市，位于河南省北部，<mark>太行山</mark>东麓向华北平
</p>

 

3.small

Small语义：小的，不起眼的

特点：字体比普通字体小一点

一般用法：用于放一些希望被忽略的内容。免责声明、注意事项

<p>鹤壁，河南省省辖市，位于河南省北部，太行山。<small>这些朝代都灭亡了</small>

  商场大打折5.5折 <small>起</small>
</p>

4.ol列表



Ol列表添加了start和reversed属性

Start：定义开始计数的系数。

Reversed：计数的顺序，默认是从小到大，加上该属性之后从大到小。

5.progress元素

语义：进步 进展

Progress是行内标签，有两个常用属性

Max：进度的对大值

Value：当前进度的值

注意：看到的进度效果是value/max的比例。

6.meter元素(IE浏览器不支持)



语义：度量衡

注意：一般情况，需要已知最大值 和最小值元素

7. cite元素

语义：引用、出自

用法：一般用于定义作品（书籍、电影、歌曲、电视节目、绘画）

注意：使用了该元素，内容会成 斜体