html5 embedded content

Embedding content in the HTML document can make your page richer.

Using IMG elements can be embedded in images in HTML documents. This element contains the following attributes:

1) SRC: Show the URL of the image;

2) ALT: Equipment text;

3) Height: The height of the image;

4) Width: The width of the image;

5) UseMap: Define the image as a client image mapping;

6) ISMAP: The image is defined as the server image mapping.

The following specifically introduces the operation of the image.

A image can be embedded with SRC and Alt properties.

 <IMG SRC = Triathlon.png <IMG SRC = Triathlon.png </a>

In this way, after clicking the image, the browser will be navigated to the URL specified by the HREF property of the parent element A. The ISMAP attribute to IMG element creates a server -side partition response diagram:

 <A HREF = Otherpage.html> <IMG SRC = Triathlon.png </a>

In this way, the position of the clicks of the image will be attached to the URL. For example, if the click position is 4 pixels from the top of the image and 10 pixels on the left, the browser will navigate to the URL:

http: //bjpowerNode/listings/otherpage.html? 10,4

The response diagram of the server partition usually means that the server responds to the user's different clicks on the image on the image.

The client partition response diagram supports the user to navigate the browser to different URL by clicking different areas of a certain diagram. We need to use elements to define the various areas on the image and the behaviors they represent. The required elements include MAP Elements and Area elements.

The role of MAP elements is to define a client image mapping. MAP elements contain one or AREA element. They each represent a area where the image can be clicked on. MAP elements usually contain attributes:

1) ID: It must define the unique logo for the MAP label;

2) name: optional, name.

Area element defines the area in the image mapping, which is always nested in the MAP element. The attributes of Area element are divided into two categories. The first type of processing is the image area represented by Area by the URL that the browser will be navigated by the user:

1) HREF: The URL that the browser should be loaded after this area is clicked;

2) ALT: substitution content, corresponding attributes to the IMG element;

3) Target: Display URL's browsing context, the corresponding attributes of the base element;

4) REL: Describe the relationship between the current document and the target document, and the corresponding attributes of the Link element;

5) Media: medium, corresponding attributes of the style element;

6) HREFLANG: The language of the target document;

7) Type: MIME type of target document.

The second category contains attributes: Shape and Coords attributes, which are used to indicate each image area that users can click. The value of the Shape attribute is as follows:

1) RECT: It represents a rectangular area. The corresponding coords attribute must be composed of four integer separations (A, B, C, D) separated by a comma: A represents the left side of the left edge and rectangle of the image; The right side of the image and the right side of the rectangle; D represents the lower side and the lower side of the rectangle of the image;

2) Circle: It represents a circular area. Coords attributes must be composed of three integers separated by comma (A, B, C): A represents the distance from the left edge of the image to the round heart; B represents the distance from the edge of the image to the round heart;

3) POLY: Represents a polygon. Coords attributes must contain at least six integers separated by comma, each pair of numbers represent one of the apex of the polygon;

4) Default: The default area, which covers the entire picture. There is no need to provide Coords value.

The following is an example:

 <p> <IMG SRC = TRIATHLON.PNG USEMAP =#MyMap <Map Name = MyMap> <rea Href = Swimpage.html Shape = RECT COORDS = 3,5,68,62 ml shape = RECT COORDS = 70,5,130,62 <rea href = otherpage.html shape = default </map>

The script above defines that if the user clicks the swimming part of the picture, the browser is navigated to the swimpage.html. If the user clicks on the cycling part on the image, the browser will navigate to CyclePage.html. Essence

Iframe element can be embedded in another document in the existing HTML document. The attribute supported by this element is as follows:

1) SRC: URL of the document displayed in iframe;

2) SRCDOC: specifies the HTML content of the page displayed in the pages displayed in iframe;

3) name: The name of iframe can be used in the target of the context and other elements (such as A, Form, Button, Input, and Base).

4) Width: Define the width of iframe;

5) Height: Standard the height of iframe;

6) Sandbox: The additional limit of the content in iframe, the value of support includes:

----: Apply all the restrictions below;

--- Allow-Same-ORGin: Allow iframe content is considered the same source as the rest of the document;

--- Allow-Top-Navigation: Allow the link to the top-level browsing context, so that you can replace the current entire document with another document, or create a new label and window; --Allow-Forms: Enable forms.

7) Seamless: Instructed the browser to display the content of iframe like an overall component of the main HTML document; by default, the content of iframe will have a border. A rolling bar appears. The use of this attribute is as follows (most browsers of this attribute are not yet supported):

 <iframe src = demo_iframe.htm seamless> </iframe>

Below is a complete example of iframe:

 <header> <h1> Things I like </h1> <nav> <ul> <li> <a href = fruits.html target = myFrame> FRUITS Ilike </a> </li> <li> <a href = Activities.html target = MyFrame> Activities Ilike </a> </li> </ul> </nav> </header> <iframe name = myframe width = 300 height = 100/>

Object elements and EMBED elements are used to expand the capacity of the browser and add plug -in support.

Embed element defines the content embedded, the support attributes are as follows:

1) Height: Set the height of the embedded content;

2) SRC: The URL of the content;

3) Type: Define the mime type of embedded content so that the browser knows how to deal with it;

4) Width: Set the width of the embedded content.

Any other attributes you apply will be regarded as a parameter of a plug -in or content. Look at the example below:

 <emBed src = http://www.youtube.com/v/qza60hca9s? Version = 3 Type = Application/X-SHOCKWAVE-FLASH WIDTH = 560 HEIGHT = 340 AllowFullScreen = true/>

The AllowFullScreen attribute is used above to set whether to enable the full screen viewing function.

Object elements are also used to define an embedded object, such as: images, audio, video, PDF, Flash, etc. Object elements can contain spare content, which are displayed when the specified content is not available.

 <object width = 560 height = 349 data = http: // titan/myIimaginaryFile> <Param name = allowfulScreen value = true/> </b> we can't display content </object>

If the resources referenced by the data attribute do not exist, the content in the Object element is displayed.

Progress element represents the progress bar. Support attributes include:

1) MAX: indicates the maximum value of the task;

2) Value: Define the current progress, between the values ​​of the 0 and MAX attributes;

3) FORM: One or more forms that belong to.

When the MAX attribute is omitted, the range is 0 to 1, and the value attribute uses float -point numbers to represent progress, such as 0.3 indicates 30%.

 <progress id = myprogress value = 10 max = 100> </progress> <p> <Button type = Button value = 30> 30%</Button> <Button Type = Button = 60> 60%</Butt on> < Button Type = Button value = 90> 90%</Button> </P> <Script> VAR Buttons = DOCUMENT.GetelementsBytagName ('Button'); TBYID ('Myprogress'); for (VAR I = 0; I <Buttons.length; I ++) {Buttons [i] .onClick = Function (E) {Progress.value = E.Target.Value;};} </script>

The example given above demonstrates the different values ​​to display different button to display different values. The effect in chrome is as follows:

Meter element shows a certain value within a certain range. Support attributes include:

1) Min and MAX: Specify the range of only the scope, you can use floating points;

2) LOW: Specify the low -value range, the ownership under it is considered too low;

3) HIGH: Specify the high value range, all values ​​above it are considered too high;

4) Optimum: Specify the best value;

5) Value: must, the current value of measurement;

6) FORM: One or more forms that belong to.

 <Meter ID = mymeter value = 90 min = 10 max = 100 Low = 40 high = 80optimum = 60> </Meter> <p> <Button Type = 30> 30%</Button> utton Value = 60> 60%</Button> <Button Type = Button Value = 90> 90%</Button> </P> <Script> Var Buttons = Document.Getelementsbytagname); VAR ME Ter = document.GetelementByid ('mymeter'); for (var I = 0; I <xTTONS.Length; I ++) {Buttons [i] .onClick = Function (e) {meter.value = e.target.value;} </script "

When the value of the Meter element is too low and too high, and the best value, the browser will present them in different ways