Chapter 3 embedded elements-water source

Chapter 4 embedded elements-original learning points of water:

1. Embedded element Summary

2. Analysis of embedded Elements

Lecturer: Li Yanhui

This chapter mainly discusses embedded elements in HTML5. The main function of embedded elements is to insert some external resources into HTML.

1. Embedded element Summary

The elements listed here are not all involved in this lesson. For example, audio, video, dynamic image canvas, and media resource source and track will be explained in the following sections or quarterly.

Element name	Description
Img	Embedded Image
Map	Define the client partition response Diagram
Area	Area of the user client partition response Diagram
Audio	Indicates an audio resource.
Video	Indicates a video resource.
Iframe	Embed a document
Embed	Embed content in HTML using plug-ins
Canvas	Generate a dynamic graphic canvas
Meter	Graphical representation of embedded values in the permitted value range background
Object	Embed content in HTML documents
Param	The parameters that will be passed to the plug-in through the object element.
SS	Graphical representation of Embedded Target progress or task completion
Source	Media resources
Svg	Structured vector content
Track	Indicates the append track of a media set (for example, subtitles)

Ii. Analysis of embedded Elements

1.Embedded Image

Explanation: When an element is inserted into an external image, the path of the image is consistent with that of the hyperlink.

	Private attributes of img
Attribute name	Description
Src	URL of the embedded image
Alt	Additional content displayed when the image is not loaded
Width	Define the image length (in pixels)
Height	Define the image height (in pixels)
Ismap	Create server partition response Diagram
Usemap	AssociationElement

2.Create a partition response Diagram

Explanation: hyperlinks are made through hot spots in images. Here we use Dreamweaver to generate operations.

3.</Strong> <strong> embed another document </strong> </p> <p class = "cnblogs_code"> <pre> index | Baidu <br/> <iframe src = "http://www.ycku.com" width = "600" height = "500" name = "in">

Explanation:Embedded HTML document. The src attribute under it indicates the page displayed during initialization. width and height indicate the length and height of the embedded document, and name indicates the name used for the target. </P> <strong> 4. <embed> </strong> <strong> embedded plug-in content </strong> </p> <p class = "cnblogs_code"> <pre> <embed src =" http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf "Type =" application/x-shockwave-flash "width =" 480 "height =" 400 "> </embed> </pre> </p> <p> explanation: <embed> elements are the functions of the extended browser, most of which are used to add support for plug-ins. A flash video from Tudou is added here. Type indicates the type of the inserted content. All types are not listed here. If other types of files are encountered later, we will continue to explore them. width and height indicate width and height; src indicates the file path. </P> <strong> 5. <object> </strong> <strong> and </strong> <param> </strong> <strong> elements </strong> </p> <p align = "justify"> explanation: the elements of <object> are the same as those of <embed>, except that the object is the standard of html4. the embed is the standard of html5. Objects can not only be embedded in flash, but also embedded in images and other content. Because the images, audios, videos, and plug-ins are replaced by corresponding tag elements, we will not detail them here. </P> <strong> 6. <progress> </strong> <strong> display progress </strong> </p> <p class = "cnblogs_code"> <pre> <progress value = "30" max = "100"> </progress> </pre> </p> <p> explanation: the <progress> element displays a progress bar. Generally, internal values are controlled through JS. IE9 and earlier versions do not support this element. </P> <strong> 7. <meter> </strong> <strong> value in the display range </strong> </p> <p class = "cnblogs_code"> <pre> <meter value = "90 "min =" 10 "max =" 100 "low =" 40 "high =" 80 "optimum =" 60 "> </meter> </pre> </p> <p> explanation: <meter> the element displays values in a certain range. The following attributes are: min and max, indicating the range boundary. low indicates that the value smaller than it is too low. high indicates that the value greater than it is too high. optimum indicates the best value, but no effect is displayed. The IE browser does not support this element. </P> <p id = "MySignature"> </p> <p class = "clear">