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 (,
1. Painting canvas element
First create the canvas element and specify the id, width and height of the element:
<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:
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
5、Date pickers (date, month, week, time, datetime, datetime-local)
HTML5 拥有多个可供选取日期和时间的新输入类型
Date: type="date" name="user_date" />
6、search
search 类型用于搜索域,比如站点搜索或 Google 搜索。search 域显示为常规的文本域。
7、color颜色的选择
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn