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>
Copy after login
JavaScript uses id to find canvas elements:
var c=document.getElementById("myCanvas");
Copy after login
Then, create the context object:
var cxt=c.getContext("2d");
Copy after login
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:
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 of this Website
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
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
