[HTML element] embed another HTML document, embed content through plug-ins, and embed digital representations,
1. Embed another HTML document
The iframe element allows another document to be embedded in an existing HTML document. The following code demonstrates the use of the iframe element:
<! DOCTYPE html> Target = "myframe"> Products I Like </a> </li> <a href = "animated-menu.html"Target = "myframe"> Buttons I Like </a> </li> </ul> </nav> <Iframe name = "myframe" width = "600" height = "270"> </Iframe></Body>In this example, create an iframe with the name attribute of myframe. In this way, a file named myframe is created.Browsing Context. Then you can combine the browsing context with the target attributes of other elements (a, form, button, input, and base. Here, a pair of hyperlinks are created with element a. They load the specified URL in the href attribute into iframe. The following figure shows the effect:
The width and height attributes specify the pixel size. The src attribute specifies the URL that should be loaded and displayed at the beginning of iframe. The srcdoc attribute allows you to define an HTML document for Embedded display.
HTML5 introduces two new iframe element attributes. The first is seamless, which instructs the browser to display the iframe content as an integral part of the main HTML document. It can be seen that there is a border by default. if the content is larger than the size specified by the width and height attributes, a scroll bar will appear. The second attribute is sandbox, which restricts HTML documents. If this attribute is applied without any value, it is like this:
<iframe sandbox name="myframe" width="600" height="270"></iframe>The following elements are disabled:
1. Script
2. Form
3. Plug-ins
4. Links to other browsing contexts
In addition, iframe content is considered to be different from other sources in the HTML document, which will lead to additional security measures. You can enable various functions independently by defining the values of the sandbox attribute, as shown in the following figure:
<iframe sandbox="allow-forms" name="myframe" width="600" height="270"></iframe>Describes the values that can be used:
2. Embed content through plug-ins
The object and embed elements are initially used as a way to expand the browser capabilities. They are used to add plug-in support, while the plug-in can process content not directly supported by the browser.
2.1 use the embed element
The following code demonstrates the usage of the embed element.
<!DOCTYPE html>The src attribute specifies the content address, and the type attribute specifies the content MIME type, so that the browser will know how to handle it. The width and height attributes determine the space occupied by the embedded content on the screen. Any other attribute of the application will be used as a plug-in or content parameter. In this example, an attribute named allowFullScreen is applied, through which the Youku Video Player enables full-screen viewing. We can see how the browser renders this content.
2.2 Use object and param Elements
The object element achieves the same effect as the embed element, but it works in a slightly different way and has some additional functions.
The following code shows how to embed an object element into the Youku video in the previous example:
<!DOCTYPE html><object width="480" height="400" data="http://player.youku.com/player.php/sid/XMTYwMjY1MTE4OA==/v.swf" type="application/x-shockwave-flash"> <param name="allowFullScreen" value="true" /></object></body>The data attribute provides the content address. The type, width, and height attributes are consistent with the meaning in the embed element. The param element is used to define the parameters to be passed to the plug-in. Each parameter to be defined uses a param element.
2.3 specify backup content for an object
One of the major advantages of the object element is that it can contain the standby content, which is displayed when the specified content is unavailable. The following code provides a simple demonstration.
<!DOCTYPE html>In this example, the data property references a file that does not exist. The browser will try to load this nonexistent content. If it fails, it will display the content in the object element. The param element is ignored, and only the phrases and stream content are displayed, as shown in:
Note that the type attribute is removed from the code list. When the type attribute does not exist, the browser will try to determine its content type from the data itself. For specific plug-ins on Some browsers, the plug-ins are loaded even if the data does not exist. This means that a blank area is displayed on the screen, rather than the backup content.
3. Embedded digit representation
HTML5 has two new elements running in the representation of embedded values in the document.
3.1 display progress
The SS element can be used to represent the process of gradually completing a task. Local attributes include value, max, and form.
The value Attribute defines the current progress, which is within the range of the values of the 0 and max attributes. When the max attribute is omitted, the range is 0 to 1. The progress is represented by a floating point number, for example, 0.3 represents 30%.
The following code shows the progress elements and buttons. Press the button to update the value displayed by the progress element.
<!DOCTYPE html>As follows:
3.2 values in the display range
The meter element displays one of all possible values in a range. Its local attributes include value, min, max, low, high, optimum, and form.
The min and max attributes set the boundary of the possible values, which can be expressed by floating point numbers. The display of the meter element can be divided into three parts: low, high, and optimal. The low attribute sets a value, and all values under it are considered too low; the high attribute sets a value, and all values above it are considered too high; the optimum attribute specifies the "best" value. The following code applies these attributes to the meter element:
<!DOCTYPE html>In this example, several button elements set the value attribute of the meter attribute to a value that is too low or too high, and the best value. Shows how the browser displays them:
In the current implementation, the optimum attribute does not produce any visual effect on the appearance of the meter element. Browsers that support meter elements differ only in the values lower than low and higher than high values.
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
