Shulou(Shulou.com)06/01 Report--

The knowledge of this article "how to use pure HTML to make a practical web page effect" is not understood by most people, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use pure HTML to make a practical web page effect" article.

1. Folding accordion

Use the Details and Summary tags to create a collapsible accordion without JavaScript code.

Effect:

HTML

Languages Used

This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSS

How it Works

Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element.

CSS

* {font-size: 1remt; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;} details {border: 1px solid # aaa; border-radius: 4px; padding: .5em .5em 0;} summary {font-weight: bold; margin: -. 5em-.5em 0; padding: .5em;} details [open] {padding: .5em } details [open] summary {border-bottom: 1px solid # aaa; margin-bottom: .5em;}

Browsers support:

two。 Progress bar

Based on the Meter and Progress element tags, you can adjust the attributes rendered on the screen in the progress bar. The progress has two attributes: max and value calibrate the progress bar, while the Meter tag provides more custom attributes.

Effect:

HTML:

Upload progress: at 50/100File progress: 70%

CSS:

Body {margin: 50px;} label {padding-right: 10px; font-size: 1rem; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}

Browsers support:

3. More input types

When defining input elements, you need to know that modern browsers have allowed you to specify enough input types. In addition to the types of text,email,password,number you should already know, there are some of the following.

Date will display the native date selector

Datetime-local 's richer date and time selector

Month friendly month selector

Tel will ask you to enter a phone number. Open it on a mobile browser and the pop-up keyboard will change, as will the same email.

Search sets the input text box to a friendly search style.

Effect:

HTML:

Enter date:Enter date & time:Enter month:Search for:Enter Phone:

CSS:

Input, label {display:block; margin: 5px;} input {margin-bottom:18px;}

MDN documents of various new input types are extensive and informative. In addition, check the mobile input type to understand the keyboard behavior of these input elements when the user is on the mobile browser.

4. Video and audio

The video and audio elements are now part of the HTML specification, but you'll still be surprised that you can use the video tag to render a decent video player on the screen.

Sorry, your browser doesn't support embedded videos.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.