Web(三)界面元素和属性-结构元素

原创已于 2022-11-25 13:16:26 修改 · 364 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html #前端

于 2022-11-24 11:30:40 首次发布

Web practice of Educoder 专栏收录该内容

36 篇文章

订阅专栏

本文档介绍了HTML5中的结构元素使用，包括<header>、<article>、<strong>、<mark>、<def>、<time>、<figure>、<figcaption>等元素。通过实例展示了如何创建‘重要通知’和‘今日分享’，强调文字、添加术语定义、设置时间、插入图像、添加引用等操作，以帮助理解HTML5在网页结构构建中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html5_结构元素

第1关_文档结构元素相关概念

第2关_header元素和article元素的应用

编程要求

根据前面的效果图，在右侧编辑器中的Begin - End区域内补充代码，为该网页添加一个“重要通知”，具体要求是：

1.文字“重要通知：”需要特别强调（strong）

2.文字“明日上午9:00整”需要醒目显示（mark）

3.文字“213”需要定义为术语（def），并且需要为该文本添加鼠标悬停显示说明文字的效果（title)，说明文字内容为“行勉楼C座”。

4.文字“开会”需要斜体强调（em）。

<!DOCTYPE html>
<html>
<head>
  <title>页面结构</title>

  <style type="text/css">
    header{border-bottom:4px double #eee;
      text-align:center;
      font-size :20px
    }
  </style>
</head>
<body>
<!-- ********* Begin ******* -->
<article>
  <header><h3>茗茶推荐——祁门红茶</h3></header>
  <p>
    祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。
  </p>
</article>
<!-- ********* End ********* -->
</body>
</html>

第3关_figure元素和figcaption元素的应用

编程要求

根据前面的效果图，在右侧编辑器中的Begin - End区域内补充代码，为该网页添加一个“今日分享”，具体要求是：

1.文字“今日分享：”需要特别强调（strong）

2.在“今日分享”文字后为搜索引擎指定日期（time),设置时间为2020-10-25.

3.在“今日分享：”文字下方插入下面的图像，图像的url为https://data.educoder.net/api/attachments/1256151

4.在插图的下方，使用B标签加粗显示文本“盛年不再来,一日难再晨,及时当勉励,岁月不待人。”。

5.换行显示引用文字“ 出处：魏晋·陶渊明《杂诗》”（cite)。

<!DOCTYPE html>
<html>
<head>
  <title>页面结构2</title>
  <style type="text/css">
    header{border-bottom:4px double #eee;
      text-align:center;
      font-size:20px
    }
  </style>
</head>
<body>
<article>
  <header>
    <h3>茗茶推荐——祁门红茶</h3>
  </header>
  <meta charset="UTF-8">
  <p>祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。</p>
  <!-- ********* Begin ******* -->
  <figure>
    <img src="https://www.educoder.net/api/attachments/1223388">
    <figcaption>茶道欣赏</figcaption>
  </figure>
  <!-- ********* End ********* -->
</article>
</body>
</html>