sololearn html5
26.1 introduction to html
<DOCTYPE HTML>
<meta charset="UTF-8">
27.1 content model
- Metadata
- Embedded
- Interactive
- Heading
- Phrasing
- Flow
- Sectioning
28.1 html5 structure
- header
- nav
- artcle
- section
- footer
29.1 header, nav, & footer
<body> <header> <h1>most important heading</h1> <h3>less important heading</h3> </header> </body>
<footer></footer>
<nav> <ul> <li><a href="#">home</a></li> <li><a href="#">services</a></li> <li><a href="#">about us</a></li> </ul> </nav>
30.1 article, section & aside
<article> <h1>the article title</h1> <p>contents of the article element</p> <section> <h1>heading</h1> <p>content or image</p> </section> <aside> <p>gift will be delivered to you whithin 24 hours</p> </aside> </article>
31.1 the audio element
<audio src="audio.mp3" controls> audio element not supported by your browser </audio> <audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="aduio.ogg" type="audio/ogg"> audio element not support by your browser </audio> <audio controls autoplay loop>
32.1 the video element
<video controls autoplay loop> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" tyoe="video/ogg"> vido is not supported by your browser </video>
33.1 the progress element
status: <progress min="0" max="100" value="35"> </progress>
34.1 web storage api
- local storage
- session storage
localstorage.setItem("key1","value1");
alert(localStorage.getItem("key1"));
localStorage.removeItem("key1");
localStorage.clear();
35.1 geolocation api
navigation.geolocation.getCurrentPossition();
36.1 drag&drop api
<img draggable="true" />
<!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData("text", ev.target.id); } function drop(ev){ ev.preventDefault(); var data = ev.dataTranafer.getData("text"); ev.target.appendchild(document.getElementById(data)); } </script> </head> <body> <div id="box" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px solid black; width:200px; height:200px"></div> <img id="image" src="sample.jpg" draggable="true" ondragstar="drag(event)" width="150" height="50" alt="" /> </body> </html>