交互元素

是小鹿呀
223 阅读6分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

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

相关知识

progress元素

progress元素属于状态交互元素。用来表示页面中的某个任务完成的进度。progress元素具有max和value两个属性：

  • max:表示任务的总量，默认值为1.
  • value:表示已完成任务的数量。

应用中，可以有以下三种情况。 用法示例1： <progress max=100 value=20></progress> 用法示例2： <progress value=0.5></progress> 用法示例3： <progress></progress> 示例2中，没有设置max属性，则默认为1；示例3中max和value的属性都没有设置，则进度条处于左右自由滑动状态。 当进度条需要动态改变时，需要通过JavaScript来实现。

meter元素

meter元素属于状态交互元素。可用于投票系统中候选人各占比例情况、考试分数统计等。 meter元素具有如下属性：

  • form：规定meter元素所属的一个或多个表单，其取值为表单标签form所定义的id名。
  • value：设置或获取meter元素的当前值，其数值必须介于min和max值之间。
  • max:设置meter元素的最大值，默认为1.
  • min:设置meter元素的最小值，默认为0.
  • high:设置过高的阈值，当value值大于high并小于max时，显示过高的颜色。
  • low：设置过低的阈值，当value值小于low并大于min时，显示过低的颜色。
  • optimum:设置最优值。

用法示例：

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="UTF-8">
    </head>
    <body>
        <meter></meter>没有属性的meter<br/>
        <meter value="0.6"></meter>只有value属性的meter<br/>
        <meter value="40"  min="10" low="30" high="80" max="100" ></meter>value介于low和high之间，计量条绿色<br/>
        <meter value="20"  min="10" low="30" high="80" max="100" ></meter>value小于low的meter，计量条黄色<br/>
        <meter value="90"  min="10" low="30" high="80" max="100" ></meter>value大于high的meter，计量条黄色<br/>
        <meter value="40"  min="10" low="30" high="80" max="100"  optimum="90"></meter>value介于low和high之间，但optimum介于low和high之外，计量条黄色<br/>
        <meter value="20"  min="10" low="30" high="80" max="100"  optimum="60"></meter>value介于low和high之外，但optimum介于low和high之间，计量条黄色<br/>
        <meter value="20"  min="10" low="30" high="80" max="100"  optimum="90"></meter>value和optimum均介于low和high之外，计量条红色<br/>
        <meter value="90"  min="10" low="30" high="80" max="100"  optimum="20"></meter>value和optimum均介于low和high之外，计量条红色<br/>
    </body>
</html>

运行的效果如下图所示： meter效果图

details/summary元素

details元素用于用于描述文档或文档某个部分的细节。在特定的浏览器下(如Chrome、 Safari ）能够产生像手风琴一样展开和折叠的交互效果。summary元素通常作为details元素的标题部分，嵌套在details元素 中。应用时，details元素中标题内容是可见的，当单击标题时将会显示/隐藏details元素中的详细信息。 meter元素的属性主要就是open:

  • open:用于控制details元素是否显示,取值为true时，元素内部的子元素被展开显示，当open属性值为false时，其内部的子元素被收缩起来不显示。默认不显示。 用法示例：

    <details>  
    <summary>单击可显示/隐藏详细内容</summary>
    <p>这里详细介绍details元素所涉及的知识</p>
</details>

用法示例：

menu元素

menu元素用于创建上下文、工具栏和弹出菜单。目前的浏览器仅支持创建上下文的菜单。menuitem元素用于定义菜单项 menu元素主要有以下两个属性:

  • label:用于设置菜单的可见标签。

  • menu：用于设置菜单的类型，取值为context表示上下文菜单，取值为toolbar表示工具条，取值为popup表示弹出式菜单。 用法示例：

    <span contextmenu="myMenu">右击一下</span>
<menu type="context" id="myMenu">
    <menuitem label="单击一下"  onclick="alert('您单击了我一下')" ></menuitem>
</menu>

    command元素

    command元素用于定义各种类型的命令按钮。利用该标记的icon属性可以添加图片，并且实现图片按钮效果；另外，改变标记中的“type”属性值，还可以定义按钮类型。 command元素主要有以下属性：

  • icon:规定用于代表 command 元素的图像。

  • label：设置规定 command 元素的可见标签。

  • type：设置command 元素的类型，可以取checkbox（复选）、radio（单选）、command（操作按钮）。默认取 "command"。

  • radiogroup：设置radio 类型按钮的组名。

用法示例：

<command onclick="alert('您单击了我一下')">  请单击 </command>

目前主流浏览器还不能支持menu元素和command元素，也就是FireFox浏览器可以支持部分显示。

通关知识

1、下列选项中，用于显示进度效果的元素是（A）。
A、progress
B、meter
C、details 
D、datalist
​
2、下列选项中，（C）不是meter元素的属性。
A、form
B、value
C、open
D、max
​
3、关于meter元素的属性，下列说法正确的是（B）。
A、high用于设置meter元素的最大值。
B、max用于设置meter元素的最大值。
C、low用于设置meter元素的最小值。
D、optimum用于设置meter元素的当前值。
​
4、< details >元素是HTML5新增的元素，用于说明文档的详细信息。（A）
A、正确
B、错误
​
5、在一个容器中，< command >元素用于创建上下文、工具栏和弹出菜单。（B）
A、正确
B、错误

第2关：progress元素

相关知识

进度条的设置

HTML5中的交互元素progress可在网页中显示一个进度条，该元素有两个属性，属性max表示任务总量，属性value表示当前的任务量。

编程要求

在右侧编辑器中的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 max="100" value="30">进度显示</progress>
   <!-- ********* End ********* -->
 </body> 
</html>

第3关：meter元素

相关知识

meter元素及属性

HTML5中的交互元素meter可在网页中显示度量条，该元素的属性主要有：

  • value：当前值
  • max:最大值
  • min:最小值
  • high:：高阈值
  • low：低阈值
  • optimum:最优值

编程要求

在右侧编辑器中的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" max="100" min="0"></meter>
    <br>
    <meter value="30" max="100" min="0" high="90" low="50"></meter>
   <!-- ********* End ********* -->
</html>

第4关：details/summary元素

相关知识

details/summary元素的设置

HTML5中的交互元素details可在网页中描述文档或文档某个部分的细节，summary元素可设置details折叠时看到的标题内容。

编程要求

在右侧编辑器中的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>

\

avatar
文章
阅读
粉丝