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>