H5常用标签

pubdreamcc 发布于2019-08-02 15:20 / 1593人阅读

摘要：清除默认自带小三角表单统一处理表单把一堆表单集合起来做统一的处理页面展示页面展示

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

GPU云服务器云服务器 h5新增标签 html常用标签 html常用单标签 html基本常用标签

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54060.html

从0开始接触html--第一天学习内容总结

摘要：第一天总结段落有序无序定义列表块级元素独占一行，行内元素共占一行和和和块级分区元素行内分区元素特殊字符空格小于号大于号图片图片不能正常显示的时候显示此内容路径鼠标悬停时显示的内容图片地图细节文本标签内容标题标第一天总结: h1-h6 p 段落 hr br 有序 ol li 无序 ul li 定义列表 dl dt dd 块级元素：独占一行，h1-h6 p hr div 行内元素：共占一行,...

changfeng1050 2019-04-23 13:26 评论0 收藏0
H5前端常见问题

摘要：走了程序媛这条路英式吐槽不经历风雨怎么有夏天岁月带走的是你的童年带不走的是藏在你内心深处的那颗童心其实程序员都挺幼稚得啦哈哈常用标签页面结构设置宽度，为一个正整数，或字符串设置高度，一般设置了宽度，会自动解析出高度，可以不用设置走了程序媛这条路英式吐槽：不经历风雨怎么有夏天2017.6.1岁月带走的是你的童年带不走的是藏在你内心深处的那颗童心Ps:其实程序员都挺幼稚得啦O(∩_∩)...

ityouknow 2019-08-29 12:39 评论0 收藏0
H5前端常见问题

摘要：走了程序媛这条路英式吐槽不经历风雨怎么有夏天岁月带走的是你的童年带不走的是藏在你内心深处的那颗童心其实程序员都挺幼稚得啦哈哈常用标签页面结构设置宽度，为一个正整数，或字符串设置高度，一般设置了宽度，会自动解析出高度，可以不用设置走了程序媛这条路英式吐槽：不经历风雨怎么有夏天2017.6.1岁月带走的是你的童年带不走的是藏在你内心深处的那颗童心Ps:其实程序员都挺幼稚得啦O(∩_∩)...

Sleepy 2019-08-20 16:57 评论0 收藏0