是时候真的从HTML4转到HTML5了

作者: 缺月楼 | 来源:发表于2019-05-29 15:09 被阅读0次

是时候真的从HTML4转到HTML5了
是时候真的从HTML4转到HTML5了
HTML5 迁移
2018-05-31
html5对比
web
HTML各个版本
HTML5语义化标签
前端面试
html5

都9012年了，前端开发是时候开始拥抱HTML5了。

页面结构

常规写法

<div id="header">
  <div id="nav"></div>
</div>
<div id="content">
  <div class="section"></div>
  <div class="section"></div>
</div>
<div id="footer"></div>

HTML5写法

<header>
  <nav></nav>
</header>
<main>
  <section></section>
</main>
<footer></footer>

对比一下是不是很简洁，更加语义化！

图像的摆放

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

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

<img class="avatar" src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
<style>
  .avatar {
    width: 40px;
    height: 40px;
  }
</style>

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

<div  class="avatar" style="background: url(xxx.png)"></div>
<style>
  .avatar {
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
</style>

我们可以使用HTML5`的新属性

<img class="avatar"  src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg">
<style>
  .avatar {
    object-position: center center;
    object-fit: cover;
  }
</style>

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

图像卡片

在传统的写法中，实现一个包含图片的卡片，这个在开发中用的比较频繁，一般用如下写法：

<div class="item">
  <img src="http://cdn.jirengu.com/book.jirengu.com/img/25.jpg">
  <h2>商品标题</h2>
</div>

HTML5写法

<figure>
  <img src="http://cdn.jirengu.com/book.jirengu.com/img/25.jpg" alt="一个电饭煲图片">
  <figcaption>商品标题</figcaption>
</figure>

图像的另外一种应用场景

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

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

<picture>
    <source srcset="https://static.xiedaimala.com/10.webp">
    <source srcset="https://static.xiedaimala.com/10.svg">
    <img src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" />
</picture>

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

简单的下拉菜单

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

<details>
    <summary>为什么学前端？</summary>
    <p>喜欢～ 你咬我。 主要还是因为工资高拉～</p>
</details>

查看演示
参考MDN: details

表单

filedset

<form action="#">
  <fieldset disabled>
    <legend>Simple fieldset</legend>
    <input type="checkbox" id="checkbox1">
    <label for="checkbox1">Spirit of checkbox 1</label>
    <input type="checkbox" id="checkbox2">
    <label for="checkbox2">Spirit of checkbox 2</label>
  </fieldset>
</form>

其他

页面展示pdf

<object type="application/pdf"
    data="https://static.xiedaimala.com/test.pdf">
</object>

<style>
object {
  width: 100vw;
  height: 500px;
}
</style>