HTML5 brief introduction

HTML

HTML5 yes HTML The latest revision ,2014 year 10 By the World Wide Web Consortium (W3C) Complete standard setting .

HTML5 Is designed to support multimedia on mobile devices .

HTML5 Easy to learn .


What is? HTML5?

HTML5 It's the next generation HTML Standard .

HTML , HTML 4.01 The last version of was born in 1999 year . Since then ,Web The world has undergone great changes .

HTML5 Still in the process of perfection . however , Most modern browsers already have some HTML5 support .


HTML5 How did you start ?

HTML5 yes W3C And WHATWG The result of cooperation ,WHATWG Means Web Hypertext Application Technology Working Group.

WHATWG betake web Forms and Applications , and W3C Focus on XHTML 2.0. stay 2006 year , The two sides decided to cooperate , To create a new version of HTML.

HTML5 Some interesting new features in :

  • Used for painting canvas element
  • For media playback video and audio element
  • Better support for local offline storage
  • New special content elements , such as article、footer、header、nav、section
  • New form control , such as calendar、date、time、email、url、search

HTML5 <!DOCTYPE>

<!doctype> Declaration must be located at HTML5 The first line in the document , Very simple to use :

< ! DOCTYPE html >

least HTML5 file

Here is a simple HTML5 file :

< ! DOCTYPE html > < html > < head > < meta charset = " utf-8 " > < title > Document title </ title > </ head > < body > Document content ...... </ body > </ html >

be careful : For Chinese web pages, you need to use <meta charset="utf-8"> Declaration code , Otherwise, there will be garbled code .


HTML5 Improvements in

  • New element
  • New properties
  • Fully support CSS3
  • Video and Audio
  • 2D/3D drafting
  • Local storage
  • Local SQL data
  • Web application

HTML5 Multi-Media

use HTML5 You can simply play in the web page video (video) With audio (audio) .


HTML5 application

use HTML5 You can simply develop applications

  • Local data storage
  • Access local files
  • Local SQL data
  • Cache references
  • Javascript worker
  • XHTMLHttpRequest 2

HTML5 graphical

use HTML5 You can simply draw graphics :


HTML5 use CSS3

  • New selector
  • New properties
  • Animation
  • 2D/3D transformation
  • fillet
  • Shadow effect
  • Downloadable fonts

Learn more CSS3 For knowledge, please check the website's CSS3 course .


Semantic elements

HTML5 Many semantic elements have been added, as shown below :

label Describe
<article> Define page independent content areas .
<aside> Define the sidebar content of the page .
<bdi> Allows you to set a paragraph of text , Set it away from the text direction of its parent element .
<command> Define command buttons , Like radio buttons 、 Check boxes or buttons
<details> Used to describe the details of a document or part of a document
<dialog> Define dialog , For example, the prompt box
<summary> Label contains details The title of the element
<figure> Specify independent stream content ( image 、 Chart 、 Photo 、 Code, etc ).
<figcaption> definition <figure> The title of the element
<footer> definition section Or document The footer .
<header> Defines the header area of the document
<mark> Define marked text .
<meter> Define measures . Only for measurements with known maximum and minimum values .
<nav> Define the part of the navigation link .
<progress> Define the progress of any type of task .
<ruby> definition ruby notes ( Chinese phonetic symbols or characters ).
<rt> Define characters ( Chinese phonetic symbols or characters ) Explanation or pronunciation of .
<rp> stay ruby Use... In comments , Definition does not support ruby The content displayed by the browser of the element .
<section> Define sections in the document (section、 Section ).
<time> Define date or time .
<wbr> Specify where line breaks are appropriate in the text .

HTML5 form

New form element , New properties , New input type , Automatic verification .


Element removed

The following HTML 4.01 The element is in HTML5 Has been deleted :

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>

Examples in each chapter

Through our HTML Editor , You can edit HTML, Then click the button to view the results .

example

< ! DOCTYPE HTML > < html > < head > < meta   charset = " utf-8 " >   < title > Programming tutorial (cdmana.com) </ title >   </ head > < body > < 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 video label . </ video > </ body > </ html >

Give it a try »

click " Give it a try " Button to view the online operation results .


HTML5 Browser support

The latest version of Safari、Chrome、Firefox And Opera Support some HTML5 characteristic .Internet Explorer 9 Some... Will be supported HTML5 characteristic .

IE9 The following versions are browser compatible HTML5 How to , Using the static resources of this site html5shiv package :

<!-- [if lt IE 9]> <script src="http://cdn.bcen.cdmana.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif] -->

After loading , Initialize the of the new tag CSS:

/* html5 */ article , aside , dialog , footer , header , section , nav , figure , menu { display: block }

HTML5 Reference manual

You can find information about HTML5 Label and attribute description of , For details, please click HTML5 Reference manual .