是时候真的从HTML4转到HTML5了

页面结构


常规写法


HTML5写法

图像的摆放


传统网页中经常会使用到图像




存在的问题: 如果图片大小不规范,难以调整图片大小和位置使图片合理的展示,比如图片会变形或者只展示一部分。

可以使用如下变通的方法,用背景图片代替图片。但这种方法但缺点是麻烦,语义化缺失。


我们可以使用HTML5的新属性




参考MDN:object-position) MDN: object-fit

图像卡片

在传统的写法中,实现一个包含图片的卡片,一般用如下写法

商品标题

可以替换为HTML5的写法

一个电饭煲图片
商品标题

图像的另外一种应用场景

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

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


    
    
    


如果使用vue或者react之类的框架,可封装成组件。

简单的下拉菜单


传统的写法是使用js来实现。对与要求不高对场景,我们完全可以使用HTML5的 details 和 summary标签

为什么学前端?

喜欢~ 你咬我。 主要还是因为工资高拉~

查看演示

参考MDN: details

表单


filedset

Simple fieldset

其他

页面展示pdf





你可能感兴趣的:(是时候真的从HTML4转到HTML5了)