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

小灰灰 2023-09-24 14:39 22阅读 0赞

## html5-文本层次语义元素 ##

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

![3259f8085da542cca95a41bfd96aa005.png][]

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

#### 编程要求 ####

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

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

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

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

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

### 第3关\_cite元素和time元素 ###

#### 编程要求 ####

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

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

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

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

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

[3259f8085da542cca95a41bfd96aa005.png]: https://img-blog.csdnimg.cn/3259f8085da542cca95a41bfd96aa005.png
[https_data.educoder.net_api_attachments_1223388]: https://data.educoder.net/api/attachments/1223388