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

2021-08-09 20:20:20

这是补充HTML5基础知识的系列内容，其他为：

周日继续读《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强调这些关键字，仅仅是为用户提供高亮而已。

![屏幕快照 2017-01-08 11.54.17](http://7mj4a6.com1.z0.glb.clouddn.com/2017-01-08-屏幕快照 2017-01-08 11.54.17.png)

五、总结

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

六、书籍信息

《HTML5开发手册》

HTML5 Developer's Cookbook

作者：[美]Chuck Hudson [英]Tom Leadbetter

译者：廖望

出版社：人民邮电出版社

码农公寓