HTML5: Embedded content
Embedded content in HTML documents can be richer pages.
Embedded images use the img element to embed images in HTML documents. This element contains the following attributes:
1) src: displays the image URL;
2) alt: the alternative text of the image;
3) height: The image height;
4) width: The image width;
5) usemap: defines an image as a client-side image ing;
6) ismap: defines an image as a server-side image ing.
The following describes how to operate images. Embedded images can be embedded into an image using the src and alt attributes.
Src defines the image URL. The alt attribute defines the alternative text that the browser will display when the image cannot be displayed. The image cannot be displayed due to the following reasons:
1) The network speed is too slow;
2) errors in the src attribute;
3) Disable images in the browser;
4) The user uses a screen reader.
We strongly recommend that you use this attribute in each image so that when the image cannot be displayed, you can still see some information about the image. for the disabled, the alt attribute is the only way they know the image content.
The maximum length of the alt attribute is 1024 characters, including spaces and punctuation. It can contain entity references to special characters, but does not allow any form of tags.
Usage principles of alt text:
1) if the image contains information, use alt to describe the image;
2) If the image is in element a, use alt to describe the target link;
3) if the image is for decoration only, use alt = "".
The image is loaded only after the HTML Tag is processed. The browser usually does not know how much space should be reserved for the image. As a result, after the image is loaded, the browser needs to relocate the content on the screen to accommodate it, cause the screen to shake. You can specify the width and height attributes of the image to solve this problem. However, note that the width and height attributes are only used to tell the browser image size, but not to dynamically scale the image. Embed an image in a hyperlink and combine it with element a. the img element can generate an image-based hyperlink.
<a href="otherpage.html"> </a>
Then, when you click the image, the browser will navigate to the URL specified by the href attribute of parent Element. Apply the ismap attribute to the img element to create a server-side partition response diagram:
<A href = "otherpage.html"> </a>, the image clicking position will be appended to the URL. For example, if the clicking position is 4 pixels from the top of the image and 10 pixels on the left, the browser will navigate to the URL:
Http: // titan/listings/http://blog.csdn.net/tomato__/article/details/otherpage.html? 10, 4
The server partition response diagram usually means that the server will make a different response based on the user's clicks on the image area. Client partition response diagram client partition response diagram allows users to navigate to different URLs by clicking different regions of a graph, we need to use elements to define the various regions on the image and the behavior they represent. The elements needed include the map and area elements.
Map ElementThe map element defines a client-side image ing. The map element contains one or the area element, each representing the area on which the image can be clicked. Map elements usually contain attributes:
1) id: required. It defines a unique id for the map tag;
2) name: (optional) name.
Area ElementThe area element defines the area in the image ing. This element is always nested in the map element. The attributes of the area element are divided into two types. The first type is the URL that the browser will navigate to after the image area represented by the area is clicked by the user:
1) href: URL to be loaded by the browser after the region is clicked;
2) alt: Replace the content, which is the same as the corresponding attribute of the img element;
3) target: displays the browsing context of the URL, which corresponds to the attribute of the base element;
4) rel: describes the relationship between the current document and the target document. It corresponds to the link element;
5) media: media, which corresponds to the style element;
6) hreflang: language of the target document;
7) type: MIME type of the target document.
The second type includes the shape and coords attributes to indicate the image areas that users can click. The value of the shape attribute is as follows:
1) rect: represents a rectangular area. The corresponding coords attributes must consist of four integers separated by commas (,): a represents the left edge of the image and the left side of the rectangle; B Indicates the top edge of the image and the top side of the rectangle; c indicates the right side of the image and the right side of the rectangle; d indicates the bottom edge of the image and the bottom side of the rectangle;
2) circle: represents a circular area. The coords attribute must consist of three integers separated by commas (,): a represents the distance from the left edge of the image to the center of the center; B Represents the distance from the image edge to the center of the circle; c Represents the radius of the circle;
3) poly: represents a polygon. The coords attribute must contain at least six integers separated by commas. Each pair of numbers represents a vertex of a polygon;
4) default: the entire image is overwritten by default. The coords value is not required.
The following is an example:
<p></p> <map name="mymap"> <area href="swimpage.html" shape="rect" coords="3,5,68,62" alt="Swimming"/> <area href="cyclepage.html" shape="rect" coords="70,5,130,62" alt="Running"/> <area href="otherpage.html" shape="default" alt="default"/> </map>
Click other and navigate to http://blog.csdn.net/tomato#/article/details/otherpage.html. The iframe element of an embedded HTML document can be embedded into an existing HTML document. This element supports the following attributes:
1) src: the URL of the document displayed in iframe;
2) srcdoc: Specifies the HTML content of the page displayed in iframe;
3) name: Specifies the iframe name, which can be used in the target attribute of the browsing context and other elements (such as a, form, button, input, and base;
4) width: defines the iframe width;
5) height: Specifies the iframe height;
6) sandbox: additional restrictions on the content in iframe. Supported values include:
--- "": Apply all the following restrictions;
--- Allow-same-orgin: Allows iframe content to be viewed as having the same source as the rest of the document;
--- Allow-top-navigation: Allows links to the browsing context at the top level, so that the entire document can be replaced with another document, or a new tag and window can be created;
--- Allow-top-scripts: enables scripts;
--- Allow-forms: enables forms.
7) seamless: indicates that the browser displays the iframe content as an integral part of the main HTML document. By default, the iframe content has a border, if the content is larger than the size specified by the width and height attributes, a scroll bar appears. This attribute is used as follows (not supported by most browsers ):
<iframe src="demo_iframe.htm" seamless></iframe>
The following is a complete example of iframe:
Embedded Content object and embed elements through plug-ins are used to expand the browser capabilities and add plug-in support. The embed element defines the embedded content. The supported attributes are as follows: 1) height: Set the height of the embedded content; 2) src: URL of the embedded content; 3) type: define the MIME type of the embedded content so that the browser can know how to handle it; 4) width: Set the width of the embedded content.
Any other attribute of your application will be treated as a parameter of the plug-in or content. See the following example:
<embed src="http://www.youtube.com/v/qzA60hHca9s?version=3" type="application/x-shockwave-flash" width="560" height="340" allowfullscreen="true"/>
The allowfullscreen attribute is used to set whether to enable full-screen viewing. Object element
The object element is also used to define an embedded object, such as image, audio, video, PDF, and Flash. The object element can contain the standby content, which is displayed when the specified content is unavailable.
<object width="560" height="349" data="http://titan/myimaginaryfile"> <param name="allowFullScreen" value="true"/> <b>Sorry!</b> We can't display this content </object>
If the resource referenced by the data property does not exist, the content in the object element is displayed. The progress bar progress element indicates the progress bar. Supported attributes include: 1) max: indicates the maximum value of the task; 2) value: defines the current progress, between the values of the 0 and max attributes; 3) form: one or more forms.
When the max attribute is omitted, the range is 0 to 1, and the value Attribute uses a floating point to represent the progress. For example, 0.3 indicates 30%.
<progress id="myprogress" value="10" max="100"></progress> <p> <button type="button" value="30">30%</button> <button type="button" value="60">60%</button> <button type="button" value="90">90%</button> </p> <script> var buttons = document.getElementsByTagName('BUTTON'); var progress = document.getElementById('myprogress'); for(var i = 0;i < buttons.length; i++){ buttons[i].onclick = function(e) { progress.value = e.target.value; }; } </script>
The example above demonstrates how to click a different button to display different values in progress. The effect in chrome is as follows:
The value meter element in the display range shows a value in a certain range. Supported attributes include: 1) min and max: specifying the possible range only, floating point number can be used; 2) low: specifying the low value range, under which ownership is considered to be too low; 3) high: Specifies the high value range, and all values above it are considered to be too high; 4) optimum: Specifies the "best" value; 5) value: required, the current value of the measurement. 6) form: one or more forms to which the measurement belongs.
<meter id="mymeter" value="90" min="10" max="100" low="40" high="80"optimum="60"></meter> <p> <button type="button" value="30">30%</button> <button type="button" value="60">60%</button> <button type="button" value="90">90%</button> </p> <script> var buttons = document.getElementsByTagName('BUTTON'); var meter = document.getElementById('mymeter'); for(var i = 0;i < buttons.length; i++){ buttons[i].onclick = function(e) { meter.value = e.target.value; }; } </script>
When the value of the meter element is too low, too high, and the best value, the browser will present them in different ways.
