What are new features of HTML5 and new features of HTML5?
This article will share some interesting new features of html5, which are very practical. If you are interested in the new features of html5.
I. Some interesting new features in HTML5:
Canvas elements used for painting
Video and audio elements used for media playback
Better support for local offline storage
New special content elements, such as article, footer, header, nav, section
New Form controls, such as calendar, date, time, email, url, and search
Ii. HTML5 video <video>
1. Video Format
Ogg = Ogg file with Theora video encoding and Vorbis Audio Encoding
MPEG4 = MPEG 4 files with H.264 video encoding and AAC audio encoding
WebM = A WebM file with VP8 video encoding and Vorbis Audio Encoding
2. <video> tag attributes
* The <source> label specifies multiple multimedia resources.
3. Instance
(1)
The Code is as follows:
<! DOCTYPE html PUBLIC "-// WC // dtd xhtml. Transitional //" http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd ">
<Html xmlns = "http://www.w.org//xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-"/>
<Title> video </title>
</Head>
<Body>
<Video src = ". HTML audio and video-codec tool. mp" controls = "controls" width = "px" height = "px"> </video>
</Body>
</Html>
Effect:
(2) HTML5 <video>-use DOM for control (use JS to control video playback, pause, zoom in, and zoom out)
<Tips: enter console. log ("hello") in the JS function to output hello in the browser console. If the console can output hello, the function can be called.
The Code is as follows:
<! DOCTYPE html PUBLIC "-// WC // dtd xhtml. Transitional //" http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd ">
<Html xmlns = "http://www.w.org//xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-"/>
<Title> video </title>
</Head>
<Body>
<Video id = "video" src = ". HTML audio and video-codec tool. mp" width = "px" height = "px"> </video>
<Button onclick = "clickA ()"> play/pause </button>
<Button onclick = "clickBig ()"> zoom in </button>
<Button onclick = "clickSmall ()"> zoom out </button>
<Script> <! -- If this JS part is written in Var a = document. getElementById ("video ");
Function clickA (){
If (a. paused) a. play ();
Else a. pause ();
}
Function clickBig (){
A. width =;
A. height =;
}
Function clickSmall (){
A. width =; <! -- Px cannot be written here; otherwise, an error occurs. You can write it as a. width = + "px"; -->
A. height =;
}
</Script>
</Body>
</Html>
Effect:
Clicking zoom in or zoom out will change accordingly.
Iii. audio <audio>
1. Audio Format
2. <audio> label attributes
The control attribute allows you to add playback, pause, and volume controls. The content inserted between <audio> and </audio> is displayed by browsers that do not support the audio element. (The same is true for videos)
Iv. HTML 5 Canvas)
1. What is Canvas?
The canvas element is used to draw images on a webpage.
* The canvas Element of HTML5 uses JavaScript to draw images on webpages. The canvas Element itself is incapable of drawing images. All the painting work must be completed inside JavaScript.
* The canvas is a rectangular area, and you can control each pixel.
* Canvas has multiple ways to draw paths, rectangles, circles, characters, and add images.
2. Related JS knowledge:
(1) getContext ("2d") is a built-in HTML5 object. It has multiple ways to draw paths, rectangles, circles, characters, and add images.
(2) The fillStyle method is used to dye it. The fillRect method specifies the shape, position, and size. [FillRect method has parameters ). Draw a rectangle of 150x75 on the canvas, starting from the upper left corner (0, 0 )]
3. Instance
(1) hover the mouse over the rectangle to see the coordinates.
The Code is as follows:
<! DOCTYPE html PUBLIC "-// WC // dtd xhtml. Transitional //" http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd ">
<Html xmlns = "http://www.w.org//xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-"/>
<Title> canvas </title>
<Script type = "text/javascript">
Function cnvs_getCoordinates (e)
{
X = e. clientX; <! -- ClientX event property returns the horizontal coordinates of the mouse pointer to the browser page (or customer area) when the event is triggered -->
Y = e. clientY;
Document. getElementById ("xycoordinates"). innerHTML = "Coordinates: (" + x + "," + y + ")";
}
Function cnvs_clearCoordinates ()
{
Document. getElementById ("xycoordinates"). innerHTML = "";
}
</Script>
</Head>
<Body style = "margin: px;">
<P> hover the mouse over the rectangle below to see the coordinates: </p>
<Div id = "coordiv" style = "float: left; width: px; height: px; border: px solid # ccc"
Onmousemove = "cnvs_getCoordinates (event)" onmouseout = "cnvs_clearCoordinates ()"> </div>
<Div id = "xycoordinates"> </div>
</Body>
</Html>
Knowledge point:
* The clientX event property returns the horizontal coordinates of the mouse pointer to the browser page (or customer area) when the event is triggered. The customer zone refers to the current window.
* Both innerText and innerHTML can add relevant information to the TAG body.
Effect:
(2) draw lines
The Code is as follows:
<! DOCTYPE html PUBLIC "-// WC // dtd xhtml. Transitional //" http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd ">
<Html xmlns = "http://www.w.org//xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-"/>
<Title> canvas </title>
</Head>
<Body>
<Canvas id = "myCanvas" width = "" height = "" style = "border: px solid # ccc;">
Your browser does not support the canvas element.
</Canvas>
<Script type = "text/javascript">
Var c = document. getElementById ("myCanvas ");
Var cxt = c. getContext ("d ");
Cxt. moveTo (,);
Cxt. lineTo (,);
Cxt. lineTo (,);
Cxt. stroke ();
</Script>
</Body>
</Html>
Knowledge point:
* Moveto is to move to a coordinate, and lineto is to link from the current coordinate to a coordinate. The two functions add up to draw a straight line. To draw a line with a "pen", MoveToEx () will fix the starting position of the pen to draw (x, y) and then use the LineTo function to determine the Ending position (xend, yend), so a line is drawn. Each time it is connected to the previous coordinate.
* The stroke () method actually draws the path defined by the moveTo () and lineTo () methods. The default color is black.
Effect:
(3) Draw a circle
* Fill the current image (PATH) with the fill () method ). The default color is black.
* Arc () method creates an arc/curve (used to create a circle or a part of a circle): context. arc (x, y, r, sAngle, eAngle, counterclockwise );
Center: arc (1.5, * Math. PI, * Math. PI)
Starting angle: arc (1.5, 75, 50, 0, * Math. PI)
Endpoint: arc (1.5, * Math. PI, * Math. PI)
* Cxt. beginPath (): the path is enabled. After the path is enabled, you can set related properties again. Cxt. closePath (): close a path.
The Code is as follows:
<! DOCTYPE html PUBLIC "-// WC // dtd xhtml. Transitional //" http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd ">
<Html xmlns = "http://www.w.org//xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-"/>
<Title> canvas </title>
</Head>
<Body>
<Canvas id = "myCanvas" width = "" height = "" style = "border: px solid # ccc;"> </canvas> <! -- It cannot be placed after the JS Code; otherwise, the effect will be merged. -->
<Script type = "text/javascript">
Var c = document. getElementById ("myCanvas ");
Var cxt = c. getContext ("d ");
Cxt. fillStyle = "# FF ";
Cxt. beginPath ();
Cxt. arc (, Math. PI *, true );
Cxt. closePath ();
Cxt. fill ();
</Script>
</Body>
</Html>
Effect:
(4) color gradient
* The createLinearGradient () method creates a linear gradient object. A gradient can be used to fill a rectangle, circle, line, text, and so on. Use the addColorStop () method to specify different colors and where to locate colors in the gradient object. JS Syntax: context. createLinearGradient (x0, y0, x1, y1 ):
* The addColorStop () method specifies the color and position of the gradient object. JS Syntax: gradient. addColorStop (stop, color );
The Code is as follows:
<! DOCTYPE html PUBLIC "-// WC // dtd xhtml. Transitional //" http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd ">
<Html xmlns = "http://www.w.org//xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-"/>
<Title> canvas </title>
</Head>
<Body>
<Canvas id = "myCanvas" width = "" height = "" style = "border: px solid # ccc;"> </canvas>
<Script type = "text/javascript">
Var c = document. getElementById ("myCanvas ");
Var cxt = c. getContext ("d ");
Var grd = cxt. createLinearGradient (,,,);
Grd. addColorStop (, "# FF ");
Grd. addColorStop (, "# FF ");
Cxt. fillStyle = grd;
Cxt. fillRect (,,,);
</Script>
</Body>
</Html>
Effect:
(5) place an image on the canvas.
* The drawImage () method draws an image, canvas, or video on the canvas. You can also plot certain parts of an image and/or increase or decrease the image size.
* JS Syntax 1: locate the image on the canvas: context. drawImage (img, x, y );
* JS syntax 2: locates the image on the canvas and specifies the width and height of the image: context. drawImage (img, x, y, width, height );
* JS syntax 3: Cut the image and locate the cut part on the canvas: context. drawImage (img, sx, sy, swidth, sheight, x, y, width, height );
The Code is as follows:
<! DOCTYPE html PUBLIC "-// WC // dtd xhtml. Transitional //" http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd ">
<Html xmlns = "http://www.w.org//xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-"/>
<Title> canvas </title>
</Head>
<Body>
<Canvas id = "myCanvas" width = "" height = "" style = "border: px solid # ccc;"> </canvas>
<Script type = "text/javascript">
Var c = document. getElementById ("myCanvas ");
Var cxt = c. getContext ("d ");
Var img = new Image ();
Img. src = ". png ";
Cxt. drawImage (img ,,);
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
