New features in HTML5

If XHTML has begun to seek to replace HTML, then the practicality of HTML5 is that it integrates the two syntaxes and uses the same effective way to express HTML's abstract DOM representation. The HTML5 specification combines HTML4, XHTML1, and DOM level 2HTML, and is updated accordingly.

HTML5 replaces XHTML 1 as the XML serialization format of the HTML specification. Developers can format HTML5 documents using either relaxed HTML syntax or strict XML syntax.

HTML5 includes the following new and updated features:

1. Added a new HTML document type:
2. Added some new structural markup elements (

,

,

,

, etc.)
3. Backwards compatible HTML and XHTML parsing rules
4. Added

1. Painting canvas element

　 Methods for defining graphics, drawing paths, rectangles, circles, characters and adding images.

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

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

　然后通过javas来绘制。Canvas元素本身没有绘图能力，所有的绘制工作必须在javascript内部完成渐变。

　　　　　　<script type="text/javascript">
　　　　　　　　　　var c=document.getElementById("myCanvas");
　　　　　　　　　　var cxt=c.getContext("2d");
　　　　　　　　　　cxt.fillStyle="#FF0000";
　　　　　　　　　　cxt.fillRect(0,0,150,75);
　　　　　　</script>

　JavaScript uses id to find canvas elements:

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

　Then, create the context object:

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

　The getContext("2d") object is a built-in HTML5 object with multiple methods for drawing paths, rectangles, circles, characters, and adding images.

The following two lines of code draw a red rectangle:

　　　　　　cxt.fillStyle="#FF0000";
　　　　　　cxt.fillRect(0,0,150,75); 

　The fillStyle method dyes 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);

　What do these attribute values ​​correspond to? 70 and 18 are the X-axis and Y-axis respectively, 15 is the radius of the circle, 0 is the angle, Math.PI*2 is the pi ratio, false means clockwise and true means counterclockwise.

The gradient effect of color can also be achieved:

　　

　　　　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 some other effects:

　　Curve quadraticCurreTo

　　Font fillText

2. Audio audio and video video

　 Video also supports multiple source elements to link to different video files. The browser will use the first recognized format
　 Attribute value:
　Play

　preload="preload"

　muted="mute"

　　Volume-=0.1 volume decrease

　　Volume+=0.1 volume plus

　　currentTime+=10 Fast forward 10 seconds

　　currentTime-=10 Go back 10 seconds

　　playbackRate=1 accelerate playback (default playback speed)

　The attribute value of audio is the same as that of video

3. Storage

　HTML5 provides two new ways to store data on the client side:

　　localStorage - data storage without time limit

　　There is no time limit on the data stored by the localStorage method. The data is still available after the next day, week or year.

　　sessionStorage - data storage for a session

　　The sessionStorage method stores data for a session. The data is deleted when the user closes the browser window.

4. Semantic tags

　　

tag defines external content (structural element)

　　

defines content outside of page content. The content of aside is related to the content of article. (Structural element)
　

Defines a grouping of media content and their titles. (Structural element)
　The

tag defines a section (section) in the document. Like chapters, headers, footers or other parts of the document (structural elements)

5. New form type

1. email

　　　　email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。

　　　　E-mail: type="email" name="user_email" />

　　2、url

　　　　url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

　　　　Homepage: type="url" name="user_url" />

　　3、number

　　　　number 类型用于应该包含数值的输入域。还能够设定对所接受的数字的限定：

　　　　Points: type="number" name="points" min="1" max="10" />

　　4、range

　　　　range 类型用于应该包含一定范围内数字值的输入域。

　　　　range 类型显示为滑动条。还能够设定对所接受的数字的限定：

　　　　<input>type="range" name="points" min="1" max="10" />

　　5、Date pickers (date, month, week, time, datetime, datetime-local)

　　　　HTML5 拥有多个可供选取日期和时间的新输入类型

　　　　Date: type="date" name="user_date" />

　　6、search

　　　　search 类型用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域。

　　7、color颜色的选择