Educoder Web练习题---文本层次语义元素

最新推荐文章于 2024-07-25 15:03:56 发布

是小鹿啊

最新推荐文章于 2024-07-25 15:03:56 发布

阅读量259

点赞数 2

分类专栏： Educoder 前端文章标签：前端 html5

来自是小鹿啊的博客

本文链接：https://blog.csdn.net/m0_51511286/article/details/121769756

版权

前端同时被 2 个专栏收录

40 篇文章 2 订阅

订阅专栏

Educoder

35 篇文章 2 订阅

订阅专栏

文本层次语义元素

文章目录

文本层次语义元素

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

通关知识

1、下列元素中，（C）可用于把文本定义为语气更强的强调的内容。
A、B
B、em
C、strong
D、bolder

2、下列选项中，用于定义计算机代码文本的元素是（A）。
A、code
B、samp
C、cite
D、dfn

3、下列选项中，不具有语义的元素是（D）。
A、mark
B、time
C、kbd
D、span

4、在HTML文本层次语义元素中，用于对参考文献的引用进行定义的是（B）。
A、strong
B、cite
C、var
D、mark

5、HTML文本层次语义元素<samp>用于定义键盘文本，它表示文本是从键盘上键入的。（B）
A、正确
B、错误

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

文字“重要通知：”需要特别强调（strong）
文字“明日上午9:00整”需要醒目显示（mark）
文字“213”需要定义为术语（def），并且需要为该文本添加鼠标悬停显示说明文字的效果（title)，说明文字内容为“行勉楼C座”。
文字“开会”需要斜体强调（em）。

效果图如下：

文本层次语义效果图

通关代码

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

注意事项

在上边的通关例子中，没有明确需要改变的文字也可以不加标签，就是加了<span>标签的部分完全可以不写标签，但是不可以写<p>标签，因为<p>标签是一个行级元素，会把整行代码变不一样，大家可以稍微试一试，以加深印象。

第3关：cite元素和time元素

编程要求

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

文字“今日分享：”需要特别强调（strong）
在“今日分享”文字后为搜索引擎指定日期（time),设置时间为2020-10-25.
在“今日分享：”文字下方插入下面的图像，图像的url为https://www.educoder.net/api/attachments/1256151
在插图的下方，使用B标签加粗显示文本“盛年不再来,一日难再晨,及时当勉励,岁月不待人。”。 5.换行显示引用文字“ 出处：魏晋·陶渊明《杂诗》”（cite)。

效果图如下：

文本语义效果图2

通关代码

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

是小鹿啊

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Educoder Web练习题---文本层次语义元素

文本层次语义元素文章目录文本层次语义元素第1关：文本层次语义元素相关概念相关知识常用文本层次语义元素及其应用通关知识第2关：文本层次语义元素相关知识相关元素说明编程要求通关代码注意事项第3关：cite元素和time元素相关知识time元素datetime属性pubdate属性cite元素编程要求通关代码第1关：文本层次语义元素相关概念相关知识常用文本层次语义元素及其应用em和strongem和strong都是HTML5中定义的带有加强语义的元素，页面呈现加粗显示效果。em:把文本定义为强
复制链接

扫一扫