交互元素

最新推荐文章于 2022-11-24 11:26:32 发布

静待花开︳

最新推荐文章于 2022-11-24 11:26:32 发布

阅读量400

点赞数

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

本文链接：https://blog.csdn.net/weixin_52184490/article/details/121671083

版权

educoder 同时被 2 个专栏收录

51 篇文章 10 订阅

订阅专栏

Web前端

35 篇文章 2 订阅

订阅专栏

第1关：交互元素相关概念

1、下列选项中，用于显示进度效果的元素是（）。 A

2、下列选项中，（）不是meter元素的属性。 A

3、关于meter元素的属性，下列说法正确的是（） C

4、< details >元素是HTML5新增的元素，用于说明文档的详细信息。 A

5、在一个容器中，< command >元素用于创建上下文、工具栏和弹出菜单。 B

第2关：progress元素

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是： 1.运用HTML5中的交互元素设计一个进度条(<progress>)。 2.progress标签之间说明文字为“进度显示”。 3.任务总量设置为100，当前的任务量为30。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>progerss元素的使用</title>
 </head>
 <body>
 	下载进度：
   <!-- ********* Begin ******* -->
  <progress value="30"max="100">进度显示</progress>
   <!-- ********* End ********* -->
 </body> 
</html>

第3关：meter元素

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是： 1.运用HTML5中的交互元素设计两个度量条(<meter>)。 2.第一个度量条的当前值为60，最大值为100，最小值为0 3.第二个度量条的当前值为30，最大值为100，最小值为0，高阈值为90，低阈值为50 4.第一个度量条和第二个度量条要分两行显示。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>meter元素的使用</title>
 </head>
 <body>
 	显示度量值：<br/>
   <!-- ********* Begin ******* -->
    <meter value="60"min="0"max="100"> </meter> 
    <br></br>
    <meter value="30"min="0"max="100"high="90"low="50"></meter>
   <!-- ********* End ********* -->
</html>

第4关：details/summary元素

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是： 1.运用HTML5中的交互元素设计一个具有折叠和展开内容的页面效果。(<details>)。 2.details元素折叠时，显示的标题内容为“第三章”(<summary>) 3.details元素展开时，详细内容由三个段落组成，第一个段落内容为“3.1结构元素”；第二个段落内容为“3.2页面结点”；第三个段落内容为“3.3交互元素”。(<p>)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>details/summary元素</title>
 </head>
 <body>
   <!-- ********* Begin ******* -->
    <details>
      <summary>第三章</summary>
      <p>3.1结构元素</p>
      <p>3.2页面结点</p>
      <p>3.3交互元素</p>
    
    
    </details>
    <!-- ********* End ********* -->
 </body> 
</html>

静待花开︳

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
交互元素

第1关：交互元素相关概念1、下列选项中，用于显示进度效果的元素是（）。 A2、下列选项中，（）不是meter元素的属性。 A3、关于meter元素的属性，下列说法正确的是（） C4、< details >元素是HTML5新增的元素，用于说明文档的详细信息。 A5、在一个容器中，< command >元素用于创建上下文、工具栏和弹出菜单。 B第2关：progress元素编程要求在右侧编辑器中的Begin - End区域内补充代码，具...
复制链接

扫一扫