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 οnclick="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元素
语义:引用、出自
用法:一般用于定义作品(书籍、电影、歌曲、电视节目、绘画)
注意:使用了该元素,内容会成 斜体