• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实战-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实战
2.1 内容交互元素

2.1 内容交互元素

HTML 5是一些独立特性的集合,它不仅新增了许多Web页面特征,而且本身也是一个应用程序(WebApplications)。对于应用程序而言,表现最为突出的就是交互操作。

HTML 5为操作新增了对应的交互体验元素,如details、summary、menu、command、key、meter、progress等,这些元素可以在不请求服务器任何资源的情况下,改变用户选择的内容与展现状态。

在HTML 5中,交互元素分为三类,分别为:

内容交互元素

菜单交互元素

状态交互元素

通过这些新增(或改良后的)交互元素,极大地改善了HTML 5页面的用户体验和功能。本章将通过实例介绍几个重要的交互元素的定义、属性与使用方法。

2.1 内容交互元素

在HTML 5中,<details>与<summary>元素属于新增的内容交互元素,主要用于文档的、标题、细节、内容的交互显示。

2.1.1 details元素

<details>是HTML 5中新增的一个标记,用于说明文档或某个细节信息的作用,常与<summary>元素配合使用。在默认情况下,标记中的内容是不显示的,当与<summary>标记配合使用时,单击<summary>标记后,才显示<details>元素中设置的内容。

<details>元素的常用属性及描述如表2-1所示。

表2-1 <details>元素的属性及描述

下面通过两个实例合别介绍使用CSS样式和JavaSeript代码控制<details>元素的“open”属性。

在HTML 5中,使用CSS样式控制页面元素的方法十分频繁,接下来先通过实例2-1介绍如何使用CSS样式代码,调用元素属性的方法。

2.1.2 summary元素

<summary>是HTML5中新增的一个标记,常包含于<details>元素中,配合<details>元素使用。在两者结合起来使用的代码中,<summary>元素说明文档的标题,<details>元素用于说明文档的详细信息。<summary>元素是<details>元素中的第一个子元素,二孝经常同时出现在页面中。

下面通过一个完整的实例2-3介绍<summary>元素与<details>元素结合使用的方法。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101