读书笔记：《HTML5开发手册》--figure、time、details、mark
这是补充HTML5基础知识的系列内容，其他为：
- 一、HTML5-- 新的结构元素
- 二、HTML5-- figure、time、details、mark
- 三、HTML5-- details活学活用
- 四、HTML5-- 现存元素的变化
- 五、HTML5 -- Web表单
周日继续读《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小时制。
综合示例
下面利用上面两个HTML5标签，我们可以优化如下排版（该组件是模仿element的卡片组件）：
下面是布局：
<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
译者：廖望
出版社：人民邮电出版社
