H5常用标签

object-position 和 object-fit --- 图片不失真处理

图片写法 不管宽高怎么变 图片都不会失真和变形【不支持IE】

//css
.avatar{
    width:800px;
    height:200px;
    object-position:center center;
    object-fit:cover;
}

---

figure 和 figcaption --- 图像卡片

图像卡片

    
    
商品标题

---

picture & source --- 图片格兼容替换

图像的另外一种应用场景

webp是google开发的新的图片编码格式
在质量相同的情况下 webp格式图像的体积要比JPEG格式图像小40%
缺点是兼容性不好

可以使用下面的写法 当浏览器不支持时自动使用替换格式的链接

---

details & summary --- 下拉菜单

下拉菜单

传统写法使用js来实现
对要求不高的场景 可以用details summary标签

    
标题
 
    
内容。。。。。。

// css

//清除默认自带小三角
details summary::-webkit-details-marker{
    display:none;
}

---

fieldset & legend --- 表单统一处理

表单

把一堆表单集合起来 做统一的处理

    

        
 xxxxxx 
        
         aaaaaa1 
        
         aaaaaa2 
    

---

object --- 页面展示pdf

页面展示pdf