读书笔记：《HTML5开发手册》--figure、time、details、mark

周日继续读《HTML5开发手册》，并进行Demo练习，今天主要学习四个HTML5新增的元素：figure、time、details、mark。

不学不知道，原来这些平时不注意的元素都有着很大的功能。好了，下面开始吧。

一、figure、figcaption

在HTML5之前，插入图片时会通过另外的div来包裹图片备注，这样做的缺点在于图片和图注之间没有任何关联。

在HTML5中，可以用figure元素插入某张图片，用figcaption来添加图片备注。

figure通常用来插入图片，但也可以是一段代码、图表、音频或者视频。通常情况下主要用于图片。

<figure>
    <img src="" alt="">
    <figcaption>
        图片标题
    </figcaption>
</figure>

建议无论如何在哪种情况下，都要为图片添加alt属性。

figure元素不仅仅可以包含一张图片，还可以包含多张图片：

<figure>
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <figcaption>
        图片描述
    </figcaption>
</figure>

如果单纯的显示图片，使用普通的img标签即可，如果包含了额外信息，那么就应该使用figure和figcaption。

需要注意的是，figure只能包含一个figcaption。

<article>
  <section>
    <h1>More from the Web</h1>
    <figure>
      <img src="test1.jpg" alt="">
      <figcaption>You're Killing Your iPhone With These 7 Charging Mistakes</figcaption>
    </figure>
    <figure>
      <img src="test2.jpg" alt="">
      <figcaption>What Was Found After Beats Headphones Were Taken Apart</figcaption>
    </figure>
    <figure>
      <img src="test3.jpg" alt="">
      <figcaption>Why You Should Wrap Your Keys In Aluminum Foil</figcaption>
    </figure>
    <figure>
      <img src="test4.jpg" alt="">
      <figcaption>The Folding Gun That Looks Like a Smartphone is Worrying Police</figcaption>
    </figure>
  </section>
</article>

二、time元素插入日期和时间

使用time元素，能够插入计算机能够识别的时间和日期，同时又能以可读的方式显示给用户。利用该元素可以给内容添加如发布时间、事件发生时间等信息。

<time>2017-01-08 10:08</time>

time有两个属性：

datetime：计算机识别的时间为datetime属性，用户看到的时间是time标签中的内容
pubdate：布尔值，代表最近的父article元素内容的发布时间，如果没有任何的父article元素，则指向整个文档，每个article只能有一个带pubdate属性的time元素。

下面是一个具体的示例：

<article>
    <footer>
        <p>这篇文章发表自<time pubdate datetime="2012-12-24T16:00">2016年12月24日，下午4点。</time><p>
    </footer>
</article>

需要注意的是：datetime属性时间格式必须是公历格式：YYYY-MM-DD，然后加上时间格式：T00:00，24小时制。

综合示例

<section class="card card--offset">
    <figure>
        <img class="card__image" src="test.png" alt="好吃的汉堡">
        <figcaption class="card__caption">好吃的汉堡</figcaption>
    </figure>
    <footer class="card__footer">
        <p>
            <time datetime="2017-01-08T10:08" class="card__time">2017-01-08 10:08</time>
            <a href="#" class="card__operation">操作按钮</a>
        </p>
    </footer>
</section>

我的卡片应用场景是：以图片为主，一个卡片主要用来介绍一组图片，像时间、操作是属于footer的内容，但标题不能算，标题是用来解释图片的，并不是footer的内容，尽管样式上看起来像上下结构。

三、details 创建可伸缩控件

details是个神奇的元素，在无需任何css、js的情况下，创建展开/收缩的开关效果。利用summary标签还可以创建内容的概述信息。

details有一个属性，open，表示默认是打开的。反之默认是关闭的样式。

summary是个可点击的部分，用来控制收缩或展开。

<details open>
    <summary>查看详细信息</summary>
    <figure>
        <img src="xx" alt="xx">
        <figcaption>生活照片</figcaption>
    </figure>
</details>

details的应用场景就更加多了，比如mac下的查看文件属性布局，接下来会通过details实现更有意思的效果。

四、mark 元素高亮文本

利用mark元素，文档作者可以高亮当前文档的某些文本，以达到醒目的效果。

比如：搜索页面对搜索够关键字进行高亮显示。不选用strong或者em强调这些关键字，仅仅是为用户提供高亮而已。

五、总结

到目前为止，我们完全可以使用这些新的标签来布局我们的页面，更加语义化更加结构清晰。作为一名前端开发人员更应该将这些最基础的东西熟记下来，撸起袖子继续努力，开发出未来的web应用程序。

六、书籍信息

《HTML5开发手册》
HTML5 Developer's Cookbook
作者：[美]Chuck Hudson [英]Tom Leadbetter
译者：廖望
出版社：人民邮电出版社

文章转载自：http://www.cnblogs.com/yangyoucun/p/6261906.html