HTML5 Basic Summary
Last Update:2016-07-03
Source: Internet
Author: User
<span id="Label3"></p><p><p>HTML5 is the fifth major version upgrade of the HTML language, with the following additions:<br>1. Add <strong><video>, <audio></strong> tag to play multimedia resources directly on the page;<br>2. Add the optional value of the Type property of the <input> tag, i.e. the <strong>new form control</strong> , such as date label, digital label, email address label, etc.;<br>3. Added <input> tag properties, support <strong>automatic focus</strong> and <strong>data validity check;</strong><br>4. The file upload has been enhanced, you can <strong>select more than one file</strong> at a time, you can specify the type of <strong>the upload file</strong> , you can read the <strong>content of the file to upload</strong> in the page;<br>5. <strong>The Drag-and-drop effect of the new element</strong> ;<br>6. Added <strong>drawing</strong> function;<br>7. Added <strong>local storage</strong> function: Window.localstorage.</p></p><p><p></p></p><p><p>I. Playing multimedia resources (audio and Video)</p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Video</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Controls</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Controls '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">AutoPlay</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' AutoPlay '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' height:100%;width:100%; '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Source</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">src</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' 01.mp4 '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Video</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Audio</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Controls</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Controls '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">AutoPlay</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' AutoPlay '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Source</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">src</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "02.mp3"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">=""</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Audio</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre><p><p></p></p><p><p>Two. New Form Controls</p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">form</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #000000;"><span style="color: #000000;">date:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Date '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Date '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">BR</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span><span style="color: #000000;">time <span style="color: #000000;">:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' time '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' time '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">BR</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span><span style="color: #000000;">number <span style="color: #000000;">:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' number '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' number '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">BR</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span><span style="color: #000000;"><span style="color: #000000;">range:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Range '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Range '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">min</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' 1 '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Max</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' 5 '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">BR</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span><span style="color: #000000;"><span style="color: #000000;">Search:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Search '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Search '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">BR</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span><span style="color: #000000;"><span style="color: #000000;">color:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Color '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Color '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">BR</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span> <span style="color: #008000;"><span style="color: #008000;"><!--</span></span><span style="color: #008000;"><span style="color: #008000;">The following label browsers may not support</span></span><span style="color: #008000;"><span style="color: #008000;"></span> -</span><span style="color: #000000;"><span style="color: #000000;">Email:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' email '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' email '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">BR</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span><span style="color: #000000;"><span style="color: #000000;">Url:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' url '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' url '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">BR</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span><span style="color: #000000;"><span style="color: #000000;">datetime:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' datetime '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' datetime '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">BR</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Submit '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">value</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Submit '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">form</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre><p><p></p></p><p><p>Three. new Label Properties (placeholder,required,pattern,autofocus,form)</p></p><pre><span style="color: #000000;"><span style="color: #000000;">form id= ' Form1 ' ></span></span><span style="color: #008000;"><span style="color: #008000;"><!--</span></span><span style="color: #008000;"><span style="color: #008000;">hint, required, Regular format</span></span><span style="color: #008000;"><span style="color: #008000;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' text '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' xx '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">placeholder</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Please enter a number '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Required</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Required '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">pattern</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' [0-9]* '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Autofocus</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Autofocus '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">form</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Form1 '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">BR</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "submit"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "sub"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">value</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Submit '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">form</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre><p><p></p></p><p><p>Four. Enhanced File Upload (supports multiple files, read files Locally)</p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Body</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' file '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' fileList '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' fileList '</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">multiple</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "multiple"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Accept</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "image/*"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">ul</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Imgul '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></</span></span><span style="color: #800000;"><span style="color: #800000;">ul</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' Imgdiv '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Body</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre><p><p>Can read file information and local preview of the file</p></p><pre><span style="color: #008080;"><span style="color: #008080;">1</span></span>Script type= ' Text/javascript ' ><span style="color: #008080;"><span style="color: #008080;">2</span></span>Window.onload=<span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(){</span></span><span style="color: #008080;"><span style="color: #008080;">3</span></span>document.getElementById ("fileList"). onchange=<span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(){</span></span><span style="color: #008080;"><span style="color: #008080;">4</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>FileList =<span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span><span style="color: #000000;"><span style="color: #000000;">. files;</span></span><span style="color: #008080;"><span style="color: #008080;">5</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></span> for</span>(<span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>i=0;i<filelist.length;i++<span style="color: #000000;"><span style="color: #000000;">){</span></span><span style="color: #008080;"><span style="color: #008080;">6</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>File =<span style="color: #000000;"><span style="color: #000000;">Filelist.item (i);</span></span><span style="color: #008080;"><span style="color: #008080;">7</span></span> <span style="color: #008080;"><span style="color: #008080;">8</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Display file information (file name, size, file Type)</span></span><span style="color: #008080;"><span style="color: #008080;">9</span></span> <span style="color: #008000;"><span style="color: #008000;">/*</span></span> <span style="color: #008080;"><span style="color: #008080;">Ten</span></span> <span style="color: #008000;"><span style="color: #008000;">var Ul=document.getelementbyid ("imgul");</span></span><span style="color: #008080;"><span style="color: #008080;"></span> one</span> <span style="color: #008000;"><span style="color: #008000;">var li=document.createelement ("li");</span></span><span style="color: #008080;"><span style="color: #008080;"></span> a</span> <span style="color: #008000;"><span style="color: #008000;">li.innerhtml=file.name+ "size:" + file.size + "type:" + file.type;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">Ul.appendchild (li);</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">*/</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Client file preview (slice Preview)</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Filereader=<span style="color: #0000ff;"><span style="color: #0000ff;">New</span></span><span style="color: #000000;"><span style="color: #000000;">FileReader ();</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>Filereader.onload=<span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(){</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span> <span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Div=document.getelementbyid ("imgdiv"<span style="color: #000000;"><span style="color: #000000;">);</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Img=document.createelement ("img"<span style="color: #000000;"><span style="color: #000000;">);</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span>Img.src=<span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span>. result;<span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">result for READ-BASE64 encoded data</span></span><span style="color: #008080;"><span style="color: #008080;"></span> a</span> <span style="color: #000000;"><span style="color: #000000;">Div.appendchild (img);</span></span><span style="color: #008080;"><span style="color: #008080;"></span> at</span> <span style="color: #000000;"><span style="color: #000000;"> };</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Filereader.readastext (file);</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>Filereader.readasdataurl (file);<span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Read file contents as Base64 data</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #000000;"><span style="color: #000000;"> }</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #000000;"><span style="color: #000000;"> };</span></span><span style="color: #008080;"><span style="color: #008080;"></span> in</span> <span style="color: #000000;"><span style="color: #000000;"> }</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span></script></pre><p><p></p></p><p><p>Five. element drag and drop effect</p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Body</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "div01"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "height:100px;width:100px;background-color:blue;"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">draggable</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">=true</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Aaa<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "div02"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "height:200px;width:200px;background-color:green;"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Bbb<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Body</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre><p><p>Drag-and-drop element handling: start Drag-and-drop Move-and-drop</p></p><pre><span style="color: #008080;"><span style="color: #008080;">1</span></span><script type= "text/javascript" ><span style="color: #008080;"><span style="color: #008080;">2</span></span>Window.onload=<span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(){</span></span><span style="color: #008080;"><span style="color: #008080;">3</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Start dragging elements</span></span><span style="color: #008080;"><span style="color: #008080;">4</span></span>document.getElementById ("div01"). ondragstart=<span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(){</span></span><span style="color: #008080;"><span style="color: #008080;">5</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Id=<span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span>. getattribute ("id"<span style="color: #000000;"><span style="color: #000000;">);</span></span><span style="color: #008080;"><span style="color: #008080;">6</span></span>Event.dataTransfer.setData ("id", id);<span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Passing Data</span></span><span style="color: #008080;"><span style="color: #008080;">7</span></span> <span style="color: #000000;"><span style="color: #000000;"> };</span></span><span style="color: #008080;"><span style="color: #008080;">8</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">cancels the default event and sets the element to be placed</span></span><span style="color: #008080;"><span style="color: #008080;">9</span></span>document.getElementById ("div02"). ondragover=<span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(){</span></span><span style="color: #008080;"><span style="color: #008080;">Ten</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">return</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">false</span></span><span style="color: #000000;"><span style="color: #000000;">;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> one</span> <span style="color: #000000;"><span style="color: #000000;"> };</span></span><span style="color: #008080;"><span style="color: #008080;"></span> a</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Drop event trigger, code handling placement Process</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>document.getElementById ("div02"). ondrop=<span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(){</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Id=event.datatransfer.getdata ("id");<span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Fetch Data</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Dragelement=<span style="color: #000000;"><span style="color: #000000;">document.getElementById (id);</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span><span style="color: #000000;"><span style="color: #000000;">. appendchild (dragelement);</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #000000;"><span style="color: #000000;"> };</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #000000;"><span style="color: #000000;"> }</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span></script></pre><p><p></p></p><p><p>Six. drawing function</p></p><p><p>Canvas Drawing.</p></p><p><p></p></p><p><p>Seven. Local Storage Window.localstorage</p></p><pre><pre><span style="color: #008080;">1</span> <script type= "text/javascript" ><span style="color: #008080;">2</span> <span style="color: #008000;">//</span> <span style="color: #008000;">Save data</span> <span style="color: #008080;">3</span> Window.localstorage.name= "wumiao"<span style="color: #000000;">;</span> <span style="color: #008080;">4</span> window.localstorage.age= ""<span style="color: #000000;">;</span> <span style="color: #008080;">5</span> <span style="color: #008080;">6</span> <span style="color: #008000;">//</span> <span style="color: #008000;">Fetch Data</span> <span style="color: #008080;">7</span> <span style="color: #000000;"> Alert (window.localStorage.name);</span> <span style="color: #008080;">8</span> <span style="color: #000000;"> Alert (window.localStorage.age);</span> <span style="color: #008080;">9</span> </script></pre></pre><p><p></p></p><p><p>HTML5 Basic Summary</p></p></span>
