html技巧

1. dialog

<div class="app">
  <dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>
</div>

2.data

<div class="app">
 <p>New Products:</p>
<ul>
    <li><data value="398">Mini Ketchup</data></li>
    <li><data value="399">Jumbo Ketchup</data></li>
    <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>
</div>
--------------------------

.app{
  width:200px;
  height:200px;
}
data:hover::after {
    content: ' (ID ' attr(value) ')';
    font-size: .7em;
}

3.meter

<p>Heat the oven to <meter min="200" max="500"
  value="350">350 degrees</meter>.</p>

3.output

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="b" value="50" /> +
    <input type="number" name="a" value="10" /> =
    <output name="result"></output>
</form>