HTML5 中增强页面元素

时间:2022-11-23 17:12:22

增强的页面元素


1. details元素和summary元素

details详情

summary概要、简要

details元素,可以实现类似显示/隐藏的功能

summary用于显示details标题

注意:

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

2details默认是关闭状态的,我们可以通过设置open属性让他打开。

3)我们也可以通过JS获取details是否打开的状态

<detailsid="HeBiIntroduce">
    <!--<summary>
鹤壁简介</summary>-->
    <p>
鹤壁,河南省省辖市,位于河南省北部,太行山东麓向华北平原过渡地带,北距首都北京475公里,南至省会郑州110公里,京广铁路、京港高速铁路、京港澳高速公路、G1074条国道纵贯全境南北,国家西气东输工程、南水北调工程西傍城区而过。鹤壁是封神榜故事发生地,商朝首都朝歌、周朝第一大诸侯国卫国都城朝歌、战国七雄之赵国都城中牟均位于鹤壁市。境内浚县城是国家历史文化名城。</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>
鹤壁,河南省省辖市,位于河南省北部,太行山东麓向华北平原过渡地带,北距首都北京475公里, 南至省会郑州110公里,京广铁路、京港高速铁路、京港澳高速公路、G1074条国道纵贯全境南北,国家西气东输工程、南水北调工程西傍城区而过。鹤壁是<mark>封神榜</mark>故事发生地,商朝首都朝歌、周朝第一大诸侯国卫国都城朝歌、战国七雄之赵国都城中牟均位于鹤壁市。境内浚县城是国家历史文化名城。</p>

3.  small元素

Small语义:小的,不起眼的

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

一般用法:

用于放一些。希望被忽略的内容。(如免责声明、注意事项)

<body>
<h3>
鹤壁介绍</h3>
<p>
鹤壁,河南省省辖市,位于河南省北部,太行山东麓向华北平原过渡地带,北距首都北京475公里,
   
南至省会郑州110公里,京广铁路、京港高速铁路、京港澳高速公路、G1074条国道纵贯全境南北,
   
国家西气东输工程、南水北调工程西傍城区而过。鹤壁是封神榜故事发生地,商朝首都朝歌、周朝
   
第一大诸侯国卫国都城朝歌、战国七雄之赵国都城中牟均位于鹤壁市。<small>这些朝代都灭亡了</small>境内浚县城是国家历史文化名城。</p>
商场打折5.5<small></small>
</body>

4. ol列表

ol列表添加了startreversed属性

start:定义开始计数的系数

reversed:计数的顺序,默认是从小到大,加上该属性则是从大到小

5. progress

Progress:进度,完成的进度

Progress:行内标签,有两个标签

Max:进度最大值

Value:当前进度的值

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

<h2>progress的使用</h2>
<p>
   
完成的进度:<progress value="0"max="100"></progress> <span>0</span>%
</p>

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

meter语义:度量衡

注意:一般情况,需要一直最大值和最小值

 

7. cite

Cite :引用出自。

用法:一般用于定义作品(书籍、电影、歌曲、电视节目、绘画)

注意:使用了该元素,内容变成 斜体

 

8. figurefigcaption元素

figure:图像、图表、照片等
用法:figure元素的内容和主内容相关,但如果被删除,则不应对文档流产生影响。
figcaption:定义figure元素的标题(caption)
用法:figcaption元素应该被置于figure元素的第一个或最后一个子元素的位置。