code狂魔

V1

2022/09/21阅读:33主题:萌绿

你不知道的HTML

大家好,我是前端实验室的大师兄!

HTML作为前端基础中的基础,想必大家都很熟悉

网页中有一些特殊的效果不需要借助第三发组件库,使用纯HTML就能实现

接下来大师兄就带你见识见识HTML不为人知的一面

图片懒加载

普通的图片懒加载方式,就是使用JS代码计算滚动的高度,滚动到图片附近才开始加载图片

其实仅用HTML一个属性就能实现图片懒加载;使用该loading=lazy属性来推迟图像的加载,直到用户滚动到它们为止。

<img src='image.jpg' loading='lazy' >     

有序列表

我们都知道ol是从1开始的有序列表,但是我就是想让它从6开始,这该怎么办呢

这个时候就该start属性更改有序列表的起点。

<ol start="6">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
</ol>

meter元素

玩游戏的时候都有一个技能属性熟练程度;使用meter都可以设置

<label for="value1">HTML熟练程度</label>
<meter id="value1" min="0" max="100" low="30" high="75" optimum="80" value="100"></meter>
<br>
<label for="value2">CSS熟练程度</label>
<meter id="value2" min="0" max="100" low="30" high="75" optimum="80" value="50"></meter>
<br>
<label for="value3">JS熟练程度</label>
<meter id="value3" min="0" max="100" low="30" high="75" optimum="80" value="20"></meter>

滑块效果

可以使用 <input type="range"> 来创建滑块。 自己可以手动拖动滑块来设置

<label for="volume">Volume: </label>
<input type="range" id="volume" name="volume" min="0" max="20">

手风琴效果

<div class="wrapper">
    <details>
        <summary>
           点击就能看到我
        </summary>
         <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.27Um2wxHGKKmpTLatpmzYgHaKm?pid=ImgDet&rs=1"/>
        <p>哈哈哈</p>
        <p>哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈哈哈</p>

    </details>
</div>

关注【前端实验室】公众号回复: bbbb223

免费获取拉勾教育价值17999元的全套前端教程

分类:

前端

标签:

HTML

作者介绍

code狂魔
V1