简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

How to use interactive elements in html5

php中世界最好的语言
Release： 2017-11-23 16:00:58
Original
1953 people have browsed it

In H5, interactive elements are elements that interact with users. This part is very important, and unlike the previous JS control effect, H5 adds a lot of interactive elements compared to HTML, such as hiding and displaying footnotes. One of the interactive effects. 

<!DOCTYPE html>
<html>
<head>
       <meta charset="UTF-8">
       <title>交互元素<details>的使用</title>
       <style type="text/css">
              body{
                     font-size: 12px;
              }
              span{
                     font-weight: bold;
              }
              details{
                     overflow: hidden;
                     height: 0;
                     padding-left: 200px;
                     position: relative;
                     display: block;
              }
              details[open]{
                     height: auto;
              }
       </style>
</head>
<body>
       <span>隐藏脚注</span>
       <details open="open">
              本页面生成于 2016-010-21
       </details>
       <!--<span>显示注脚</span>
       本页面生成于 2016-010-21
       <details open="open">
       </details>
-->
</body>
</html>
Copy after login

There are so many ways to use interactive elements in html5. I believe you have learned a lot after our introduction. For more exciting content, please pay attention to other related articles on the php Chinese website!

Related reading:

Why do we need to set CSS styles for DIV?

How to use the HTML5

Related labels：
h5 html5 Instructions
source：php.cn
Previous article：Common drawing techniques in Canvas in HTML5 Next article：What are the language encodings of HTML?
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...
From 2024-04-05 12:57:00
0
1
456
What is the difference between enctype and formenctype in HTML5? I'm just wondering what's the difference between the attributes enctype and formenctype in...
From 2024-04-02 11:47:56
0
1
275
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！