HTML5 Learning Notes

A, HTML 5

New HTML5 features:

• Canvas element for drawing
• Video and audio elements for media playback
• Better support for local offline storage
• Semantic elements such as article, footer, header, nav, section
• New form controls such as Calendar, Date, Time, email, URL, and Search
• Using CSS 3

DOCTYPE

HTML 5
declaration, which must be in the first line of the document, is short for Document Type and tells the browser’s parser which HTML or XHTML specification to use to parse the page.

Browser support

The latest versions of Safari, Chrome, Firefox, Opera, and Internet Explorer 9 support some HTML5 features.

New elements of HTML5

Semantic elements: can clearly describe their meaning to browsers and developers

1, the < canvas >

The

element is used to draw the graph. The tag is just a container for the graph and you must use JavaScript to draw the graph.

<canvas id="myCanvas" width="200" height="100"></canvas>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");GetContext (" 2D ") is a built-in HTML5 object with multiple methods for drawing paths, rectangles, circles, characters, and adding images.

// Draw a rectangle
ctx.fillStyle="#FF0000"; // CSS colors, gradients, or patterns
ctx.fillRect(0.0.150.75);// Defines how the rectangle is currently filled

// Draw the path
ctx.moveTo(0.0);
ctx.lineTo(200.100);
ctx.stroke();
Copy the code

More methods to Canvas

2. Inline SVG

SVG refers to scalable vector graphics. Using XML format, images can be scaled up or resized without loss of graphics quality.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10, 40,180, 190,60, 10,60, 160,180"
  style="fill:lime; stroke:purple; stroke-width:5; fill-rule:evenodd;">
</svg>
Copy the code

Differences between SVG and Canvas

3. Drag and Drop

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">function allowDrop(ev) { ev.preventDefault(); // By default, data/elements cannot be placed in other elements. } function drag(ev) {ev.datatransfer.setData ("Text",ev.target.id);} function drag(ev) {ev.datatransfer.setdata ("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); Var data= ev.datatransfer.getData ("Text"); var data= ev.datatransfer.getData ("Text"); ev.target.appendChild(document.getElementById(data)); }Copy the code

4. Geographical positioning

The Geolocation API is used to obtain a user’s location, which can be located only with the user’s permission. The navigator. Geolocation. GetCurrentPosition ()

<! -- Introducing baidu API,"ak="Add your own requested secret key --><script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>

function getLocation() {
    var geolocation = new BMap.Geolocation();// Create a Baidu location instance instead of navigator. Geolocation
    geolocation.getCurrentPosition(function(e) {
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            x.innerHTML = 'Latitude:' + e.point.lat + 

 Longitude: ' + e.point.lng;
        } else {
            x.innerHTML = 'failed' + this.getStatus(); }}); }Copy the code

5, <video> and <audio>

Theelement supports multipleelements that can link to different video files. The browser will use the first recognizable format.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">Your browser does not support HTML5 video tags.</video>
Copy the code

Control using DOM:

The methods, properties, and events of the

  <button onclick="playPause()"</button><button onclick="makeBig()">amplification</button><video id="video1" width="420"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video tags. </video> var myVideo = document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width = 560; }Copy the code

<form> and <input>

HTML5 has several new form input types that provide better input control and validation. The value of type can be color, date, datetime, datetime-local, email, month, number, range, search, tel, time, URL, and week.

3. New HTML5 features

1, Web storage (localStorage and sessionStorage)

Web storage makes local storage of user data more secure and fast, data will not be stored on the server, can store a large amount of data, without affecting the performance of the website. Data exists in key/value pairs and is only allowed to be accessed by that web page.

• LocalStorage: Used to store the data of the entire website for a long time. The saved data does not expire until manual removal.
• SessionStorage: Used to temporarily store data of the same window (or TAB), which will be deleted after the window or TAB is closed

Common apis:

• SetItem (key,value) to save data.
• Read data: localstorage.getitem (key);
• Delete a single item: localstorage.removeItem (key);
• Delete all data: localstorage.clear ();
• Get the key of an index: localstorage.key (index);

When the data is stored in a more complex format (such as an object), you can use serialized json.stringify to convert the object to a string store, which can then be retrieved and deserialized through json.parse ().

2. Web SQL database

The Web SQL database API is not part of the HTML5 specification, but it is a separate specification that introduces a set of APIs for manipulating client databases using SQL.

Core approach:

• OpenDatabase: Creates a database object using an existing database or a new database.

// Database name, version number, description text, database size, create callback
var db = openDatabase('mydb'.'1.0'.'Test DB'.2 * 1024 * 1024);
Copy the code

• Transaction: Allows us to control a transaction and perform a commit or rollback based on that situation.
• ExecuteSql: Used to execute actual SQL queries.

var db = openDatabase('mydb'.'1.0'.'Test DB'.2 * 1024 * 1024);

db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, 2)');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});

db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM LOGS'[],function (tx, results) {
        var len = results.rows.length,msg=' '
        for (let i = 0; i < len; i++) {
            msg += results.rows.item(i).log 
        }
    }, null);
});
Copy the code

3. Application caching

Application cache

4, Web Workers

Web Workers

5, Server-sent Events

SSE

6, WebSocket

WebSocket