In the past, we see page effects, the effect is a lot of need to use with JS, and today in this article, I'll show you how to use pure HTML to create practical effect of their own.
1. ** folded accordion **
Use Details and Summary tab to create a collapsible accordion no JavaScript code.
effect:
HTML
<details>
<summary>Languages Used</summary>
<p>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</p>
</details>
<details>
<summary>How it Works</summary>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. </p>
</details>
CSS
* { font-size: 1rem; 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;
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）Browser support:
2. ** progress bar **
The basic elements of the label and Progress Meter on, you can adjust the properties presented on screen progress bar. Progress has two properties: maxand valuecalibration progress bar, and Meter labels provide more custom attributes.
effect:
HTML:
<label for="upload">Upload progress:</label>
<meter id="upload" name="upload"
min="0" max="100"
low="33" high="66" optimum="80"
value="50">
at 50/100
</meter>
<hr/>
<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>
CSS:
body {
margin: 50px;
}
label {
padding-right: 10px;
font-size: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
Browser support:
3. More Input Type
When defining input elements, you have to know that modern browsers allow you to specify the type of input enough. You should already know that in addition to text, email, password, number of these types, there are those below.
- The machine will display the date date selector
- datetime-local richer date and time picker
- month-friendly selector month
- tel will let you enter a phone number. Open it on your mobile browser, the pop-up keyboard will change, the same is true of email.
- Enter the search text box to search for a friendly style.
effect:
HTML:
<label for="date">Enter date:</label>
<input type="date" id="date"/>
<label for="datetime">Enter date & time:</label>
<input type="datetime-local" id="datetime"/>
<label for="month">Enter month:</label>
<input type="month" id="month"/>
<label for="search">Search for:</label>
<input type="search" id="search"/>
<label for="tel">Enter Phone:</label>
<input type="tel" id="tel">
CSS:
input, label {display:block; margin: 5px;}
input {margin-bottom:18px;}
A variety of new input types MDN documentation is very extensive and a great amount of information. Also, check to see keyboard input type mobile user behavior when these input elements on the mobile browser.
4. Video and Audio
videoAnd audioelements although it has become part of the HTML standard, but as you will be amazed at you can use the videotag to render a decent video player on the screen.
<video controls>
<source src="https://addpipe.com/sample_vid/short.mp4"
poster="https://addpipe.com/sample_vid/poster.png">
Sorry, your browser doesn't support embedded videos.
</video
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）Some attribute the video tag worthy of note include:
- poster to be displayed when downloading video URL cover
- preload whether pre-loaded when the page loads the entire video
- Whether autoplay video should play automatically when the page loads
Browser support:
** The proof text **
When you want to display historical circumstances editing and proofreading of blockquote, deland inselement tags can come in handy.
Example:
HTML：
<blockquote>
There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>
CSS：
del {
text-decoration: line-through;
background-color: #fbb;
color: #555;
}
ins {
text-decoration: none;
background-color: #d4fcbc;
}
blockquote {
padding-left: 15px;
line-height: 30px;
border-left: 3px solid #d7d7db;
font-size: 1rem;
background: #eee;
width: 200px;
}
6. The more unified quotes
Due to the different quotes in English, using the <q>tag can make you a good solution to this problem, it can make your content more consistently presented quotes on most browsers.
HTML：
Don Corleone said <q cite="https://www.imdb.com/title/tt0068646/quotes/qt0361877">I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party.</q></p>
<hr/>
Don Corleone said <i>"I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party."</i>
CSS：
body {
margin: 50px;
}
q {
font-style: italic;
color: #000000bf;
}
7. Keyboard tab
<kbd>The label should be a lesser-known popular label, but this could use a better way to illustrate the style key combinations.
HTML：
<p>I know that <kbd>CTRL</kbd>+<kbd>C</kbd> and <kbd>CTRL</kbd>+<kbd>V</kbd> a are like the most used key combinations</p>
CSS：
body {
margin: 50px;
}
kbd {
display: inline-block;
margin: 0 .1em;
padding: .1em .6em;
font-size: 11px;
line-height: 1.4;
color: #242729;
text-shadow: 0 1px 0 #FFF;
background-color: #e1e3e5;
border: 1px solid #adb3b9;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
white-space: nowrap;
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）8. HTML code sharing
usefigcaption pre code``标签，您可以使用纯``HTML``和``CSS``呈现出不错的代码片段。
HTML：
<figure>
<figcaption>
Defining a css <code>color</code> property for a class called 'golden'
</figcaption>
<pre>
<code>
.golden {
color: golden;
}
</code>
</pre>
</figure>
CSS：
pre {
background-color: #ffbdbd;
}
This article only initiate, there are more ways we can look at.