解密HTML少为人知的一面

2022-12-02 10:02:05 浏览数 (1)

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

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

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

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

图片懒加载

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

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

代码语言：javascript复制
<img src='image.jpg' loading='lazy' >

有序列表

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

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

代码语言：javascript复制
<ol start="6">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
</ol>

meter元素

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

代码语言：javascript复制
<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"> 来创建滑块。自己可以手动拖动滑块来设置

代码语言：javascript复制
<label for="volume">Volume: </label>
<input type="range" id="volume" name="volume" min="0" max="20">

手风琴效果

代码语言：javascript复制
<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 网站

0 人点赞