In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
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.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.