web前端入门到实战:纯HTML做出几个实用网页效果

分类:WEB服务     作者:     发布时间:2019-11-19

在咱们以往看到的页面作用中,许多作用是需求JS调配运用的,而今天在本文中,我将介绍怎么运用纯HTML打造归于自己的有用作用。

运用Details和Summary标签能够创立没有JavaScript代码的可折叠手风琴。

作用:

 

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 ,共享学习的办法和需求留意的小细节,不断更新最新的教程和学习办法

浏览器支撑:

该Meter和Progress的元素标签的基础上,你能够调整特点出现在屏幕上的进度条。前进有两个特点:max和value校准进度条,而Meter标签供给了更多的定制特点。

作用:

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;

浏览器支撑:

在界说输入元素时,您要知道现代浏览器现已答应您指定足够多的输入类型了。除了你应该现已知道text,email,password,number这些类型外,还有下面的这些。

作用:

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;}

各种新输入类型的MDN文档十分广泛且信息量很大。此外,查看移动输入类型以了解用户在移动浏览器上时这些输入元素的键盘行为。

video和audio元素尽管现在现已成为HTML标准的一部分,可是你相同会惊奇于你能够运用video标签在屏幕上烘托出一个别面的视频播放器。

 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 ,共享学习的办法和需求留意的小细节,不断更新最新的教程和学习办法

视频符号中值得留意的一些特点包含:

浏览器支撑:

 

当你想显现前史修改及校正的状况时,blockquote,del和ins元素标签能够派上用场了。

示例:

 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;

因为中英文引号的不同,运用 q 符号能够让您很好的处理这个问题,它可使你的内容在大多数浏览器上更一致地出现引号。

 

 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;
 font-style: italic;
 color: #000000bf;

kbd 标签应该是一个少为人知的冷门标签,但这个能运用更好的办法来阐明组合键的款式。

 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, 0 0 0 2px #FFF inset;
 white-space: nowrap;
web前端开发学习Q-q-u-n: 784783012 ,共享学习的办法和需求留意的小细节,不断更新最新的教程和学习办法

运用figcaption 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;

这篇文章也仅仅抛砖引玉,还有更多技巧,我们能够重视一下。