Learning HTML5

HTML5 Introduction

What is HTML5?
How Did HTML5 Get Started?

cooperation between W3C and WHATWG1

DOCTYPE declaration

only one and it is very simple: <!DOCTYPE html>

Example

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title of the document</title>
    </head>
    <body>
        Content of the document......
    </body>
</html>
New Features

HTML5 New Elements

Why new elements?

The New <canvas> Element

New Media Elements

New Form Elements

New Semantic/Structural Elements

Removed Elements

HTML5 Semantic Elements

Semantic Elements

A semantic element clearly describes its meaning to both the browser and the developer

New Semantic Elements in HTML5

HTML5 Forms

HTML5 <input> Types

HTML5 Form Elements

<datalist>
<input list="browsers">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>
<keygen>
<form action="demo_keygen.asp" method="get">
    Username: <input type="text" name="usr_name">
    Encryption: <keygen name="security">
    <input type="submit">
</form>
<output>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range"  id="a" value="50">100 +
    <input type="number" id="b" value="50">=
    <output name="x" for="a b"></output>
</form>
0 100 + =
HTML5 Form Attributes

HTML5 Graphics

<Canvas>

only a container for graphics, you must use a script to actually draw the graphics

HTML5 Inline SVG

What is SVG?

SVG Advantages

Differences Between SVG and Canvas

Comparison of Canvas and SVG

HTML5 Media

HTML5 Video
<video width="512" height="288" controls>
    <source src="game-of-throne.mp4" type="video/mp4">
    <source src="fallback.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>
HTML5 Audio
<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

Audio Formats and Browser Support: MP3, Wav, and Ogg

HTML5 APIs

HTML5 Geolocation
<script>
var x = document.getElementById("demo");

function getLocation( ) {
    if ( navigator.geolocation ) {
        navigator.geolocation.getCurrentPosition( showPosition );
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: "  + position.coords.latitude +
              "<br>Longitude: " + position.coords.longitude;
}
</script>
HTML5 Drag and Drop

Make an Element Draggable(default): <img draggable="true">, see example

HTML5 Web Storage

With HTML5, web pages can store data locally within the user’s browser. Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website’s performance.

HTML5 Application Cache

What is Application Cache?

HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.

3 advantages: Offline browsing, Speed, Reduced server load

HTML5 Cache Manifest Example

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
The Manifest File
a simple text file, which tells the browser what to cache (and what to never cache)
has three sessions: CACHE MANIFEST + NETWORK + FALLBACK

Updating the Cache

HTML5 Web Workers
When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.
A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.
HTML5 Server-Sent Events
Server-Sent Events - One Way Messaging
A server-sent event is when a web page automatically gets updates from a server.
This was also possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically.

Refs

  1. W3C School
  2. HTML5 Introduction
  3. HTML5 New Elements
  4. HTML5 Semantic Elements
  5. HTML5 <input> Types
  6. HTML5 Form Elements
  7. HTML5 <Canvas>
  8. Canvas Reference
  9. HTML5 Inline SVG

  1. Web Hypertext Application Technology Working Group (WHATWG)


「Load Disqus | 加载评论」