绿岛之北

好读书,不求甚解;每有会意,便记下笔记。

导航

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

这是补充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
译者:廖望
出版社:人民邮电出版社

posted on 2017-01-08 13:51  绿岛之北  阅读(641)  评论(0编辑  收藏