EduCoder-Web程序设计基础-html5—分文本层次语义元素-第3关:cite元素和time元素

目录

  • 任务描述
  • 相关知识
  • 编程要求
  • 测试说明
  • 代码示例

任务描述

本关任务:运用HTML5的语义化元素设计一个带有时间语义和引用说明的程序。效果图如下:
文本语义效果图2

相关知识

为了完成本关任务,你需要掌握:1.time元素,2.cite元素。

time元素
time元素定义日期或时间,该元素能够在该元素的内容中未指定日期或时间时,让机器可读,比如用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。
time元素常用属性主要有datetime和pubdate。

datetime属性
datetime属性用于指定日期和时间,其取值格式为
YYYY-MM-DDThh:mm:ssTZ

YYYY:年
MM:月
DD:天
T:日期和时间的分隔符,设置时间的时候必须有。
hh:时
mm:分
ss:秒
Z:使用UTC标准时间
示例如下:
1.仅指定日期:

2.仅指定时间:

3.指定了日期和时间:

4.在时间后面加上“Z”表示给机器编码时使用UTC时间标准:

5.添加不同地区的时差:
中国时间2019年12月20日下午5点

pubdate属性
在 标签中添加pubdate属性,则表示一篇文章或一个文档页面的发布日期。
示例如下:

cite元素
元素创建一个引用标记,用来指明某内容的引用或参考源,如书籍或杂志或新闻报道等的标题,规范、报纸、法律文件,网络文章的URL等。cite元素引用的文本将以斜体显示。
示例如下:
—引自HTML5权威指南

编程要求

根据前面的效果图,在右侧编辑器中的Begin - End区域内补充代码,为该网页添加一个“今日分享”,具体要求是:
1.文字“今日分享:”需要特别强调(strong)
2.在“今日分享”文字后为搜索引擎指定日期(time),设置时间为2020-10-25.
3.在“今日分享:”文字下方插入下面的图像,图像的url为https://www.educoder.net/api/attachments/1256151
插图
4.在插图的下方,使用B标签加粗显示文本“盛年不再来,一日难再晨,及时当勉励,岁月不待人。”。
5.换行显示引用文字“ 出处:魏晋·陶渊明《杂诗》”(cite)。

测试说明

补充代码后,请点击测评,平台会对你编写的代码进行测试,如果正确则完成闯关任务。

越努力越幸运,祝你成功!

说点什么
代码文件
已保存
123456789101112131415161718192021

今日分享: EduCoder-Web程序设计基础-html5—分文本层次语义元素-第3关:cite元素和time元素_第1张图片 … 效果显示 测试结果

本关最大执行时间:120秒
本次评测耗时(编译、运行总时间):1.728 秒
上一关
9S

代码示例

DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
head>
<body>

<strong >今日分享:strong>
<time datetime="2020-10-25">time>
<img src="https://www.educoder.net/api/attachments/1256151">
<B>盛年不再来,一日难再晨,及时当勉励,岁月不待人。B>
<br>
<cite>出处:魏晋·陶渊明《杂诗》cite>






body>
html>

你可能感兴趣的:(前端,html5,html)