H5常用标签

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

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

<!-- HTML -->
<img class='avatar' src = 'xxxxxxxxx' />

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

figure 和 figcaption — 图像卡片

图像卡片

<!-- HTML -->
<figure>
    <img src='xxxxxxxxx' alt='一张图片'/>
    <figcaption> 商品标题 </figcaption>
</figure>

picture & source — 图片格兼容替换

图像的另外一种应用场景

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

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

<!-- HTML -->
<picture>
    <source srcset='xxxxxx.webp'>
    <source srcser='xxxxxx.svg'>
    <img src='xxxxxx.jpg'/>
</picture>

<!-- 如果使用 vue 或者 react 之类的框架 可封装成组件 -->

details & summary — 下拉菜单

下拉菜单

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

<!-- HTML -->
<details>
    <summary> 标题 </summary> <!-- 自带小三角 -->
    <p> 内容。。。。。。</p>
</details>

// css

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

fieldset & legend — 表单统一处理

表单

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

<!-- HTML -->
<form action='#'>
    <fieldset disable>
        <legend> xxxxxx </legend>
        <input type='checkbox' id='checkbox1'>
        <label for='checkbox' id='checkbox2'> aaaaaa1 </label>
        <input type='checkbox' id='checkbox2'>
        <label for='checkbox2' id='checkbox2'> aaaaaa2 </label>
    </fieldset>
</form>

object — 页面展示 pdf

页面展示 pdf

<!-- HTML -->
<object type='application/pdf'>
    data='http://xxx.xxx.com/text.pdf'
</object>