读书笔记：《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通常用来插入图片，但也可以是一段代码、图表、音频或者视频。通常情况下主要用于图片。
图片标题
建议无论如何在哪种情况下，都要为图片添加alt属性。
figure元素不仅仅可以包含一张图片，还可以包含多张图片：
图片描述
如果单纯的显示图片，使用普通的img标签即可，如果包含了额外信息，那么就应该使用figure和figcaption。
需要注意的是，figure只能包含一个figcaption。
下面练习一下，我们可以实现最常见的广告布局：
More from the Web
二、time元素插入日期和时间
使用time元素，能够插入计算机能够识别的时间和日期，同时又能以可读的方式显示给用户。利用该元素可以给内容添加如发布时间、事件发生时间等信息。
time有两个属性：
- datetime：计算机识别的时间为datetime属性，用户看到的时间是time标签中的内容
- pubdate：布尔值，代表最近的父article元素内容的发布时间，如果没有任何的父article元素，则指向整个文档，每个article只能有一个带pubdate属性的time元素。
下面是一个具体的示例：
需要注意的是：datetime属性时间格式必须是公历格式：YYYY-MM-DD，然后加上时间格式：T00:00，24小时制。
综合示例
下面利用上面两个HTML5标签，我们可以优化如下排版（该组件是模仿element的卡片组件）：
下面是布局：
我的卡片应用场景是：以图片为主，一个卡片主要用来介绍一组图片，像时间、操作是属于footer的内容，但标题不能算，标题是用来解释图片的，并不是footer的内容，尽管样式上看起来像上下结构。
三、details 创建可伸缩控件
details是个神奇的元素，在无需任何css、js的情况下，创建展开/收缩的开关效果。利用summary标签还可以创建内容的概述信息。
details有一个属性，open，表示默认是打开的。反之默认是关闭的样式。
summary是个可点击的部分，用来控制收缩或展开。
查看详细信息
details的应用场景就更加多了，比如mac下的查看文件属性布局，接下来会通过details实现更有意思的效果。
四、mark 元素高亮文本
利用mark元素，文档作者可以高亮当前文档的某些文本，以达到醒目的效果。
比如：搜索页面对搜索够关键字进行高亮显示。不选用strong或者em强调这些关键字，仅仅是为用户提供高亮而已。
五、总结
到目前为止，我们完全可以使用这些新的标签来布局我们的页面，更加语义化更加结构清晰。作为一名前端开发人员更应该将这些最基础的东西熟记下来，撸起袖子继续努力，开发出未来的web应用程序。
六、书籍信息
《HTML5开发手册》
HTML5 Developer's Cookbook
作者：[美]Chuck Hudson [英]Tom Leadbetter
译者：廖望
出版社：人民邮电出版社
浙公网安备 33010602011771号