CSS3 and H5 notes finishing

H5 added feature semantic tagging such as section article meter footer progress etc.

HTML code

H5 added the function of important custom attributes;

Adding a custom attribute to a label must start with data-

Custom properties need to be obtained by dateset[] Way

such as the custom attribute Data-box

Get Custom Properties DataSet

Set custom properties dataset["box"];

<!--definition Data list

<datalist id= "Sex" >
    <option > Men </option>
    <option > Women </option>
    <option > Ominous </option>
</datalist>

<!-definition metric,

<label for= "#" >
    Metric: <meter value= "max=" "min=" 0 "low=" "high=" ></meter>
</label>

<!-Define progress bar,

<progress value= "max=" min= "0" ></progress>

<!-define phone pattern available regular

<label for= "" >
    Tel: <input type= "Tel" pattern= "1\d{10}"/>
</label>

<!--audio compatibility    autoplay: Auto Play    controls: Control bar    Loop: loop--

<audio Controls Loop>
    <source src= ">
    <source src= ""/>
    <source src= ""/>
    Sorry, your browser does not support audio tags!
</audio>

<!--similar tags in video-->

JS Code   

The Oninput event is  triggered when user input

The Oninvalid event is typically used to set hint text that is not validated by outdated

H5 adds a method similar to the jquery operation class name  Classlist

var box1=  document.queryselector ('. Box1 ');
       Add class Name
  Box1.classList.add (' active ');

       Delete class name
Box1.classList.remove (' active ');

       determine if a class name is included to  return the result true/false

  var f=box1.classlist.contains (' active ');

       Toggle Class Name   

Classlist.toggle (' active ');

CSS3 and H5 notes finishing