H5增强的页面元素

最新推荐文章于 2021-08-10 19:05:04 发布

Judian6974

最新推荐文章于 2021-08-10 19:05:04 发布

阅读量1.1k

点赞数

分类专栏： H5增强的页面元素 html5

本文链接：https://blog.csdn.net/Judian6974/article/details/77937480

版权

html5 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

H5增强的页面元素

0 篇文章 0 订阅

订阅专栏

增强的页面元素

1、details元素和summary元素

details：语义：详情
summary语义：概要，简要
details元素可以实现类似显示/隐藏的功能，summary用于显示details的标题或者简介。
注意：（1）如果details下没有summary元素，浏览器会自动添加，同时内容是“详细信息”。
（2）details默认是关闭状态的，我们可以通过设置open属性让它打开。
（3）我们也可以通过JS获取details是否打开的状态。

<body>
<details id="hebiIntroduce">
    <summary>XX简介</summary>
    <p>XX，河南省省辖市，位于河南省北部，太行山东麓向华北平原过渡地带，北距首都北京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元素内部的内容将高亮显示（黄色的背景颜色）。

<p>鹤壁，河南省省辖市，位于河南省北部，太行山东麓向华北平原过渡地带，北距首都北京475公里，鹤壁是<mark>封神榜</mark>故事发生地，商朝首都朝歌、周朝第一大诸侯国卫国都...</p>

这里写图片描述

3、small元素

small语言：小的，不起眼的
特点：字体比普通字体小一点。
一般用法：用于放一些希望被忽略的内容。免责声明、注意事项
这里写图片描述

4、ol列表

ol列表添加了start和reversed属性
start：定义开始计数的系数。
reversed：计数的顺序，默认是从小到大，加上该属性之后从大到小。

5、progress列表

语言：进度、完成的进度
progress是行内标签。有2个常用属性
max：进度的最大值
value：当前进度的值
注意：看到的进度效果是value/max的比例

6、meter列表（IE浏览器不支持）

语义：度量衡
注意：一般情况，需要已知最大值和最小值。
这里写图片描述

7、cite元素

语义：引用，出自
用法：一般用于定义作品（书籍、电影、歌曲、电视节目、绘画）
注意：使用了该元素，内容变成斜体

8、figure和figcation
w3c赋予的定义：figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
实例代码：

<figure>
<p>黄浦江上的的卢浦大桥</p>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

figure用来代替原来li标签，P标签谁来取代呢？答案就是：figcaption

w3c赋予的定义：figcaption 标签定义 figure 元素的标题（caption）。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

那么上面的代码就变成了：

<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

Judian6974

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5增强的页面元素

增强的页面元素1、details元素和summary元素details：语义：详情 summary语义：概要，简要 details元素可以实现类似显示/隐藏的功能，summary用于显示details的标题或者简介。注意：（1）如果details下没有summary元素，浏览器会自动添加，同时内容是“详细信息”。（2）details默认是关闭状态的，我们可以通过设置open属性让它打开。
复制链接

扫一扫