Web(三)界面元素和属性-文本层次语义元素html5-文本层次语义元素

74 阅读 0 评论 49 点赞

我是靠谱客的博主慈祥牛排，最近开发中收集的这篇文章主要介绍Web(三)界面元素和属性-文本层次语义元素html5-文本层次语义元素，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

html5-文本层次语义元素

第1关_文本层次语义元素相关概念

第2关_文本层次语义元素

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

1.运用HTML5中的语义化元素设计一个文章区(<article>)。

2.文章区中的头部为文章的标题，标题文字为“茗茶推荐——祁门红茶”，要求为该标题文字设置三级标题（<h3>）。

3.文章区的内容使用段落标签（<p>)设置,文章内容为：“ 祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。”

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<!-- ********* Begin ******* -->
<strong>重要通知：</strong>
<span>定于<mark>明日上午9:00整</mark><def title="行勉楼C座">213</def>教室<em>开会</em>。</span>
<!-- ********* End ********* -->
</body>
</html>

第3关_cite元素和time元素

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

1.运用HTML5中的语义化元素设计一个图类显示区(<figure>)。

2.该区中插入的图像如下图所示：该图的URL为https://data.educoder.net/api/attachments/1223388

3.插图的下方用语义化元素figcaption添加图名称,图名称为：“ 茶道欣赏”

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<!-- ********* Begin ******* -->
<strong>今日分享：</strong>
<time datetime="2020-10-25"></time>
<figure><img src="https://www.educoder.net/api/attachments/1256151"></figure>
<b>盛年不再来，一日难再晨，及时当勉励，岁月不待人。</b>
<cite>出处：魏晋·陶渊明《杂诗》</cite>

<!-- ********* End ********* -->
</body>
</html>