2013/6/10
01.HTML5 Introduction
A. Dream Technology QQ Communication Group: credream:251572072
--------------------
A. Dream Technology QQ Communication Group: credream:251572072
HTML is the abbreviation for Hyper Text Markup language, a markup language used to describe a Web page document.
And HTML5 is the new standard for this markup language.
-----------------------------------------
B. Since the first edition of the June 1993 HTML release, by December 24, 1999, the release of HTML 4.01,
HTML is constantly being updated. But HTML4 didn't make much of a breakthrough in HTML, as the network
Rapid development, it is gradually unable to meet the needs of the network applications. January 26, 2000, Extensible Hypertext Banner
Statement (extensible Hyper Text Markup Language), that is, XHTML appears. The way XHTML behaves and
HTML is similar, but more restrictive in syntax. Because XHTML pays more attention to page specification and usability, the consortium
Bent on developing XHTML. But for a variety of reasons XHTML is progressing very slowly, mostly because of the XHTML2
Not compatible with any previous version of HTML. In this case, HTML5 appeared.
-----------------------------------------------
The predecessor of the draft C.HTML5 was named WEB Applications 1.0, presented in 2004 by WHATWG, 2007
The consortium accepted this standard and set up a new HTML team. HTML5 's first official draft in 2008
Announced on January 22 of the year. HTML5 is the result of the collaboration between the WHATWG and the consortium, which becomes HTML, XHTML
and the new standard for HTML DOM.
----------------------------------------
2013/6/10
A. Dream Technology QQ Communication Group: credream:251572072
New characteristics of 02.HTML5
------------------------
A.HTML5 has many exciting features and new features, such as enhanced performance of web pages and increased
The functions of WEB applications such as local databases, and image manipulation.
B.HTML5 in the image of the introduction of the canvas tag, through the canvas, users can dynamically generate a variety of graphic images,
Graphics and animations, instead of relying on plug-ins like Flash, Silverlight, and more.
C. In addition, HTML5 introduced the geolocation API in its geographic location, which is characterized by:
Not to obtain the user's location, but through Third-party interfaces, such as IP, GPS, WiFi and other means. /
Users can open and close at any time, when the program calls will first obtain the user's consent to ensure that the user's
Privacy.
D. At the same time, HTML5 also added a local database to the data store, using Websql to store data and
And the introduction of the Web Storage API to achieve the offline caching function, so as to replace the cookies, so that the data storage space more
Large and more secure.
E. Give a few examples to illustrate the advantages of HTML5
----------------------------------------------
1. Play the animation with the video label
<video width= "640" height= "360" preload= "Auto" poster= "Hoge.png" Controls autoplay>
<!--browser to play WEBM format animation-->
<source src= "HOGE.WEBM" Type= ' video/webm; Codecs= "VP8, Vorbis" ' >
<!--browser to play OGV format animation->
<source src= "HOGE.OGV" Type= ' Video/ogg; Codecs= "Theora, Vorbis" ' >
<!--browser to play MP4 format animation-->
<source src= "Hoge.mp4" Type= ' video/mp4; Codecs= "avc1.42e01e, mp4a.40.2" ' >
<!----> when the browser is unable to use the video label
<p> cannot play animation. <a href= "hoge.html" > Recommended environment please look here. </a></p>
</video>
-----------------------------------------------------------------
2. Use audio tag to play audio
<audio Controls Loop>
<!--browser for playback ogg format audio-->
<source src= "Hoge.ogg" >
<!--browser--> for playback of WAV format audio
<source src= "Hoge.wav" >
<!--browser for playback MP3 format audio-->
<source src= "Hoge.mp3" >
<!--when browsers are unable to use audio tags-->
<p> cannot play audio. <a href= "hoge.html" > Recommended environment please look here. </a></p>
</audio>
--------------------------------------------------------
3. Draw graphics using the canvas tag
<canvas id= "Canvas" width= "640" height= "360" ></canvas>
<script>
Get Context Object
var canvas = document.getElementById (' canvas ');
if (Canvas.getcontext) {
var context = Canvas.getcontext (' 2d ');
Set color
Context.fillstyle = ' rgb (255,0,0) ';
Starting with the coordinates (20,30), draw a rectangle of 64x36 size
Context.fillrect (20,30,64,36);
}
</script>
--------------------------------------------------
4. Easy to get the current position
<script>
Window.addeventlistener (' Load '. function () {
Judge the possibility of using geolocation
if (navigator.geolocation) {
Regular access to location
Navigator.geolocation.watchPosition (update);
}
}, False);
Gets the location and indicates
function Update (position) {
Latitude
var lat = position.coords.latitude;
Longitude
var lng = position.coords.longitude;
Show the latitude and longitude.
document.write (' Latitude: ' +lat+ ', Longitude: ' +lng ');
}
</script>
---------------------------------------------
5. Save a large amount of data on the client
<script>
Use Localstorage to save data
Localstorage.key = ' value to save ';
Remove the value from the Localstorage
var Hoge = Localstorage.key;
The value you want to save appears on the page
document.write (Hoge);
</script>
-----------------------------------
6.form of hardening
<!--Verify that the user input format is correct, simply change the type to-->
<input name= "Email" type= "Email" >
<!--for items that must be entered, simply add the Require attribute to the input tag-->
<input name= "text" type= "text" require>
<!--when the focus is lost, give the corresponding prompts, just add the placeholder attribute to the input tag-->
<input name= "text" type= "text" placeholder= "Example: Name >
-------------------------------------------------------------
7. Brand new Label Properties
Some obsolete HTML4 tags have been canceled in HTML5, including a purely display effect tag, such as
<font> and <center>, they have been replaced by CSS. HTML5 learned some suggestions for XHTML2, adding
Strong features to improve the structure of the document, such as introducing a new HTML tag header, footer, dialog, aside,
Fi gure and so on, making it easier for developers to create documents that were used by developers to implement these functions
Div. In addition, it also cancels a part of the old label, such as font settings fonts, center Settings Center, etc. A small number of labels
The meaning has also changed, such as bold style B and italic style I tag although still retained, but their meaning has been and to
Before, the meaning of these tags is just to identify a piece of text.
These are some of the new features of HTML5. It should be noted that although HTML5 has been accepted by the consortium, but now
It's just a draft, and its style may still change before the official release.
---------------------------------------------------------
