解密HTML少为人知的一面-CFANZ编程社区

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

解密HTML少为人知的一面_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>

解密HTML少为人知的一面_懒加载_02

`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>

解密HTML少为人知的一面_html_03

滑块效果

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

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

解密HTML少为人知的一面_html_04

手风琴效果

<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>

解密HTML少为人知的一面_懒加载_05

重磅！前端实验室读者交流群已成立


公众号运营至今，离不开小伙伴们的支持。


为了给小伙伴们提供一个互相交流的平台，特地开通了读者交流群


群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~（群完全免费，不广告不卖课！）


需要进群的朋友，可以在下方公众号后台，回复 111