Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What new features have been added to html5

2025-01-23 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/02 Report--

This article will explain in detail what features have been added to html5. Xiaobian thinks it is quite practical, so share it with you as a reference. I hope you can gain something after reading this article.

HTML5 new features: 1, semantic tags (header, footer, nav, etc.);2, webStorage storage mechanism;3, history objects;4, form types (email, tell, date, etc.);5, media elements video and audio;6, canvas.

Operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

HTML5 is the next generation of HTML and will be the new standard for HTML, XHTML and HTML DOM.

HTML5 is a collaboration between W3C and WHATWG.

Some rules established for HTML5:

New features should be based on HTML, CSS, DOM, and JavaScript.

Reduce the need for external plug-ins (e.g. Flash)

Better error handling

More tags instead of scripts

HTML5 should be device independent

The development process should be transparent to the public

browser support

The latest versions of Chrome, Firefox, Safari, and Opera support certain HTML5 features. Internet Explorer 9 will support some HTML5 features. Maxthon, as well as 360 browser, Sogou browser, QQ browser, Cheetah browser and other domestic browsers based on IE or Chromium (engineering version or experimental version of Chrome) also have the ability to support HTML5.

new features

Some interesting new features added to HTML5:

1. Semantic labeling

header footer, nav, aside, section, meau, template, article, audio, video, canvas, etc.

webStorage sessionStorage and localStorage

webStorage: Use HTML5 to store user browsing data locally. Earlier, cookies were used for local storage. But Web storage needs to be more secure and fast. This data is not stored on the server, but is only used by users to request website data. It can also store large amounts of data without affecting the performance of the website. The data exists as key/value pairs, and the data for a web page is only accessible for use by that page.

Web Storage is divided into two categories: sessionStorage and localStorage, which are instances of Storage. From the literal meaning, it can be clearly seen that sessionStorage stores data in session and disappears when the browser is closed, while localStorage keeps data locally on the client. The API provides the following methods:

setItem (key, value) --holds data, storing information as key-value pairs. getItem (key) --Get the data, pass the key value, and get the corresponding value. removeItem (key) --deletes a single item of data, removing the corresponding information according to the key. clear () --Delete all data key (index) --Get the key of an index

localStorage: data storage with no time limit

The lifecycle of localStorage is permanent. If localStorage is used to store data, closing the browser will not cause the data to disappear unless the data is actively deleted, using the method shown above. localStorage has a length attribute to see how many records it has. The method of use is as follows:

var storage = null; //Determine if the browser supports localStorage if(window.localStorage){ storage.setItem("name", "Rick"); //Call setItem method to store data alert(storage.getItem("name")); //Call getItem method, pop-up box shows name Rick storage.removeItem("name"); //Call removeItem method to remove data alert(storage.getItem("name")); //Call getItem method, pop-up box shows name is null }

sessionStorage: Data storage for a session

The lifecycle of sessionStorage is before the browser closes. In other words, the data exists until the entire browser is closed. sessionStorage also has a length attribute, and its basic judgment and usage methods are consistent with localStorage usage. The following points need to be noted:

(1)Page refresh does not erase data;

(2)Only links open on the current page can access sessionStorage data;

(3)Use window.open to open the page and change the location.href mode to get the data inside sessionStorage;

3. History object

The history object holds the user's online history from the moment the window was opened.

Use the go( ) method to jump anywhere in the user's history, either backward or forward.

This method takes an integer value representing the number of pages to jump backward or forward.

Negative numbers indicate a backward jump (similar to the standalone browser's Back button)

Positive numbers mean forward jumps (similar to the "Forward" button in standalone browsers)

history.go(-1) //Back one page history.go(1) //Forward one page history.go(2) //Forward two pages

You can also pass a string argument to the go () method, which jumps the browser to the first location in the history that contains the string-either forward or backward. See which location is closest. If the string is not contained in the history, then this method does nothing

history.go wrox.com//Go to the nearest wrox.com page

You can also use the two shorthand methods back( ) and forward( ) instead of go( ). Both methods mimic the browser's Back and Forward buttons.

history.back() //back one page history.forward() //forward one page

4. Upgrade of form elements

Traditional form elements: form, laber, textarea, select, button...

input(text、password、radio、checkbox、file、submit、reset、button)

Html5 adds new types to input (search, email, number, tell, range, color, date)

Upgrade: Add placeholder attribute to form element

Upgrade: New drop-down box options are available

5. Multimedia

Video and audio elements for playback

6. Canvas for painting

Define shapes, draw paths, rectangles, circles, characters, and methods for adding images.

First create the canvas element and specify the id, width, and height of the element.

Then draw it through javas. The Canvas element itself has no drawing capabilities, all drawing work must be done within javascript gradients.

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

JavaScript uses id to find canvas elements:

var c=document.getElementById("myCanvas");

Then, create the context object:

var cxt=c.getContext("2d");

getContext("2d") objects are built-in HTML5 objects with multiple ways to draw paths, rectangles, circles, characters, and add images.

The following two lines draw a red rectangle:

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

The fillStyle method colors it red, and the fillRect method specifies the shape, position, and size.

The following two lines of code draw a straight line:

cxt.moveTo(100,100);

cxt.lineTo(200,200);

The following line of code draws a circle:

cxt.arc(70,18,15,0,Math.PI*2,false);

70, 18 are the X and Y axes, 15 is the radius of the circle, 0 is the angle,Math.PI*2 is the circumference, false is clockwise and true is counterclockwise.

Color gradient effects are also achievable:

var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50);

There are other effects:

curve quadraticCurreTo

font fillText

About "html5 what new features" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report