HTML5 Skills

HTML5 Tutorial : http://www.w3schools.com/html5/default.asp




1. HTML5 doctype

<!DOCTYPE html>


2. Figure
<figure>
    <img src="http://kbs.kimbs.cn/img/php5-zce-logo-new.gif" alt="About image" />
    <figcaption>
        <p>This is an image.</p>
    </figcaption>
</figure>


3. Small
<small>© Copyright</small>


4. No “type” any more
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>


5. Unnecessary quotes (different from XHTML)
<p class=myClass id=someId> Start the reactor. </p>


6. Content editable
<ul contenteditable="true">
    <li> Break mechanical cab driver. </li>
    <li> Drive to abandoned factory </li>
    <li> Watch video of self </li>
</ul>


7. Email field
<form action="" method="get">
    <label for="email">Email:</label>
    <input id="email" name="email" type="email" />
    <button type="submit"> Submit Form </button>
</form>


8. Placeholder
<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />


9. Local Storage (no time limit)
<script>
// the localStorage object
alert(localStorage);

// page visit count in local storage
if (localStorage.pagecount) {
    localStorage.pagecount = Number(localStorage.pagecount) + 1;
} else {
    localStorage.pagecount = 1;
}
document.write("Visits " + localStorage.pagecount + " time(s).");
</script>


10. Session Storage (clear when closing brower)

<script>
// the sessionStorage object
alert(sessionStorage);

// page visit count in current session storage
if (sessionStorage.pagecount) {
    sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
} else {
    sessionStorage.pagecount = 1;
}
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script>


11. Header and Footer
<header>
this is the header
</header>
body
<footer>
this is the footer
</footer>


12. HTML5 and IE (announce those elements)
header, footer, article, section, nav, menu, hgroup {
    display: block;
}

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");


13. The h group
<header>
    <hgroup>
        <h1> Recall Fan Page </h1>
        <h2> Only for people who want the memory of a lifetime. </h2>
    </hgroup>
</header>


14. Required attribute
<form method="post" action="">
    <label for="someInput"> Your Name: </label>
    <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required="required" />
    <button type="submit">Go</button>
</form>


15. Autofocus
<input type="text" name="someInput" placeholder="Douglas Quaid" autofocus="autofocus" />


16. Audio
<audio autoplay="autoplay" controls="controls">
    <source src="audiofile.ogg" />
    <source src="audiofile.mp3" />
    <a href="file.mp3">Download this file. (for compatibility)</a>
</audio>


17. Video
<video>
    <source src="videofile.ogg" />
    <source src="videofile.mp4" />
</video>


18. Video preload
<video preload="preload">
    <source src="largevideo.ogg" />
    <source src="largevideo.mp4" />
</video>


19. Video controls
<video preload="preload" controls="controls">
    <source src="largevideo.ogg" />
    <source src="largevideo.mp4" />
</video>


20. Pattern
<form action="" method="post">
    <label for="username">Create a Username: </label>
    <input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required />
    <input type="submit" />
</form>


21. Attributes support checking
<script>
if (!'pattern' in document.createElement('input') ) {
    alert("Your brower does not support this attribute!");
    // do client/server side validation
}
</script>


22. Mark
<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>


23. Articles
<article>
    <a href="http://blog.netscape.com/2007/12/28/end-of-support-for-netscape-web-browsers">Netscape is dead</a>
    <br />
    AOL has a long history on the internet, being one of the first companies to really get people online.....
</article>


24. navigation
<nav>
    <a href="default.php">Home</a>
    <a href="previous.php">Previous</a>
    <a href="next.php">Next</a>
</nav>


25. Use descriptive tags instead of <div> for layout
<header>
    header
</header>

<nav>
    the navigation
</nav>

<aside>
    extra information or related links
</aside>

<article>
    main content
</article>

<footer>
    footer
</footer>


26. Canvas API
<canvas id="myCanvas"></canvas>

<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0,0,80,100);
</script>


27. Price range
<input type="range" name="price" min="100" max="10000" />



Resources :

HTML5 Grayscale Image Hover


end

Posted in DHTML | Tagged | Leave a comment