不用JS，教你只用纯HTML做出几个实用网页效果

<details>
summary>Languages Used</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>

>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. >

* {
    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; .5em;
}

details[open] {

details[open] summary {
    border-bottom:
    margin-bottom: .5em;
}

label for="upload">Upload progress:labelmeter id="upload" name
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
meterhr/>

="file">File progress:progress ="file" value="70"> 70% progress>

body {
  margin: 50px;
}

label {
    padding-right: 10px;浏览器支持：








date 将显示本机日期选择器
datetime-local 更丰富的日期和时间选择器
month 友好的月份选择器
tel会让你输入一个电话号码。在移动浏览器上打开它，弹出的键盘将发生变化，同样的email也是如此。
search 将输入文本框设置为友好的搜索样式。







="date">Enter date:input type="date" id="datetime">Enter date & time:="datetime-local"="month">Enter month:="month"="search">Search for:="search"="tel">Enter Phone:="tel"input,label {display:block; margin: 5px;}
input {margin-bottom:18px;}





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



poster 下载视频时要显示封面的URL
preload 是否在页面加载时预加载整个视频
autoplay 视频是否应该在页面加载后自动播放













blockquote
    There is del>nothing> ins>no code> either good or bad,but >thinking>running it makes it so.
>



del {
    text-decoration: line-through;
    background-color: #fbb;
    color: #555;
}

ins { none; #d4fcbc;
}

blockquote {
    padding-left: 15px;
    line-height: 30px;
    border-left: 3px solid #d7d7db;
    background: #eee;
    width: 200px;
}








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></>


/>

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."

q {
    font-style: italic; #000000bf;
}









>I know that kbd>CTRL>+>C> and >V> a are like the most used key combinations

kbd {
    display: inline-block; 0 .1em; .1em .6em; 11px; 1.4; #242729;
    text-shadow: 0 1px 0 #FFF; #e1e3e5; 1px solid #adb3b9; 3px;
    box-shadow: 0 1px 0 rgba(12,13,14,0.2),0 0 0 2px #FFF inset;
    white-space: nowrap;
}









figure>
  figcaption
      Defining a css code>color property for a class called 'golden'
  >
  
  pre>
    
      .golden {
        color: golden;
      }
    pre {
  background-color: #ffbdbd;
}