[Html/html5]6 using Images

6.1 image as the foreground element of a Web page

With the IMG element, you can add images to your Web pages. IMG is an abbreviation for image. You can display an image on a Web page by simply adding the SRC (source abbreviation) attribute to the IMG element and setting the appropriate value for the property.

1 <  src= "photo.jpg">  <!-- --

The value of the SRC attribute should contain the correct path name and location of the file.

If you want to use an image that is not in the same folder as the current HTML page, you need to tell the browser which folder the image is in. For example, if the image is in a folder higher than the current HTML page's directory, you should use src=. /photo.jpg ", wherein: /Tell the browser to move up one level of directory before looking up the image file.

If you want to refer to a picture in another Web site, you must first obtain permission from the owner of the image, and then you can use the src= "Www.websitename.com/images/photo.jpg" to refer to the picture, The URL in the device is the full name of the other site image.

6.1.1 the height and width of the specified image

After you add a few pictures to a Web page, you may notice that the images in the page sometimes cause the browser to wait a few seconds before the browser displays the page. This is because the browser does not know the size of the image, and some browsers will actually wait until all the images have been downloaded before displaying the Web page.

As a result, the height and Width properties in the IMG tag tell the browser the size of the picture to help the browser speed up the display of the Web page.

1 <  src= "Photo.jpg"  width= "391px"  height= "274px"  >

You can also use the height and Width properties to change the size of the image displayed on the page. The browser redraws the image according to the newly specified size. This is not recommended because it may slow down the display of web pages and may cause the image to lose the correct aspect ratio. It is best to create images according to the dimensions you need in your Web page.

6.1.2 providing alternate text and captions for images

Using the Alt attribute in the tag, you can set an alternate text for the image.

The value of the ALT attribute is a piece of text that appears in a box in place of the picture, which is displayed in place of the image when the browser cannot find the image, or if the browser is set to not display the image.

1 <  src= "Art-turtle"  height= "  width=" 412 " alt  = "Drawing of a Turtle">

In addition to the ALT attribute, it is a good idea to add the title attribute to the tag. When the browser is unable to load the image, display important information in the prompt box near the mouse pointer. In addition, the title property can be added to the tag as well as to links and other page elements. The title attribute is used as a quick tip for the user to simply interpret the contents of the page element.

6.1.3 linking images to other content on the Web site
You can use a text phrase as a linked label to let the user click the link. You can also use an image as a linked label, either with a text label or without any text label.

To use the entire picture as a link, simply add <a> and </a> around .

 1  <  a  href  = "www.baidu.com"  ><  img  src  = "Art-turtle"   height  = ""  width  = "412"   alt  = "drawing of a turtle"   title  = "Drawing of a turtle"  ></ a  >  

6.1.4 Add a picture title
Before HTML5, there was no simple way to define an image title for an actual image in a semantic way. Fortunately, figure elements and figcaption elements can be used in HTML5.

1 < Figure>2 <imgsrc= "Fabric-banner.jpg"alt= "Fabric Banner">3 <figcaption>4 Fabric Banner Handmade by the women of Nueva Imagen5 </figcaption>6 </ Figure>

In addition to images, you can use the figure and figcaption elements to define the associated headings for other elements. If you create a table that provides a reference, and you want to put it in a larger block of text. You can place the table or other chart in a figure element, and then add a figcaption element to the figure element to define a caption that interprets the chart.

6.2 Defining a style for a foreground picture

6.2.1 Image Border

In the new HTML specification, the Border attribute in IMG was canceled, and it is recommended to use a style sheet to adjust the display of the border, which provides more control over the border.

Style sheet properties related to borders:

• Border-style: The line style used to set the border, the default value is None (no border), so the border does not appear when the Border-style value is not specified.
• Border-width: Controls the width of the border, either individually setting the width of each edge of the border (Border-left-width, Border-right-width, and so on), or you can set the width (border-width) of four edges at a time.
• Border-color: You can specify a 1~4 value that controls the color of the border. When you specify two values, the first value is up or down, the second value is around, and when you specify three values, the second value is around the first value, the third value is under, and the top or bottom is the value when you specify four values.
• Border-radius: You can specify a 1~4 value that controls the rounded effect of the 4 corners of the border. To create a fillet effect for the border of an image, simply set the Border-radius property to a value greater than 0.

Style sheets provide a powerful feature for setting the individual properties of a border, either by setting the 4 edges of the border as a whole or by setting each edge individually. To set an edge individually, simply add the edge's name to the border property (top, right, bottom, or left).

1 . Headsot{2 Border-style:Double;3 Border-left-style:None;4 Border-right-style:None;5 Border-width:10px;6 Border-left-width:0px;7 Border-right-width:0px;8 Border-color:#c00;9}

6.2.2 Floating
When you add an image to a block of text, you sometimes want to change the alignment of the image so that the image is no longer simply displayed above or below the text, but floats in the text stream. That is, use the Float property of CSS and set its value to left or right.

(1) Picture in floating text

The function of the float property is to tell the browser to place the floating element at the nearest edge of the specified browser and then float the rest of the page content. In other words, the content will flow automatically along the right side of the left-floating (left-floated) picture, or along the left side of the picture with the right float (right-floated) set. Possible values for the Float property include: Left, right, and none.

1 <  src= "photo.jpg"  style= "float:left;" >

(2) Clear floating

This is sometimes the case when you actually need to stop or clear the float. If you want to split a longer text into two paragraphs, then just let the first paragraph surround the image. The second paragraph still occupies the width of the entire page. To implement this layout, you must use the Clear property in the second paragraph to "clear float." the possible values for the clear property are: Left, right, both, and none.

1 <  style= "clear:left;" > Remaining paragraph of text. </ P >

(3) Floating picture Group

If the page contains many images, if all the images have the same size, then using the Float property makes it easy for the browser to automatically display the images on the same line as the page.

1 <!DOCTYPE HTML>2 <HTML>3 <Head>4     <title>Test</title>5     <MetaCharSet= "Utf-8">6     <styletype= "Text/css">7  Figure{8 float: Left;9         }Ten Figure Figcaption{ One text-align:Center; A font-family:' Microsoft Ya Black '; -         } -     </style> the </Head> - <Body> -     < Figure> -         <imgsrc= "F://img/test.png"title= "Q version Jinmu"width= "300px"Height= "300px"> +         <figcaption>Kanagi</figcaption> -     </ Figure> +     < Figure> A         <imgsrc= "F://img/test.png"title= "Q version Jinmu"width= "300px"Height= "300px"> at         <figcaption>Kanagi</figcaption> -     </ Figure> -     < Figure> -         <imgsrc= "F://img/test.png"title= "Q version Jinmu"width= "300px"Height= "300px"> -         <figcaption>Kanagi</figcaption> -     </ Figure> in </Body> - </HTML>

6.2.3 internal margins and margins

You can also apply the Padding property and the margin property to an image to define margins that surround the inside of the image and the margins, and you can declare an edge, two edges, and three edges or four edges.

1 <  src= "F://img/test.png"  title= "Q version Jinmu"  width= "300px"  height= "300px"  style= "margin:100px;" >

1 <  src= "F://img/test.png"  title= "Q version Jinmu"  width= "300px"  height= "300px"  style= "padding:  100px;" >

6.2.4 Center

　　having the left and right margins of an element exactly equal can result in centering, provided that the browser is told to process the image as a block-level element. in CSS, block-level elements are automatically populated with the entire free space. Therefore, if the image is set to a block-level element, its margins are automatically extended until the edge of the browser window is encountered.

1 img.centered {Display:block; margin-left:auto; margin-right:auto;}

6.3 Use an image as a background element for a Web page
There is another role for the image in the Web page, which is the background picture of the Web page. That is, in the style declaration of the BODY element, add the Background-image property:

1 Body {background-image:url ("piture.jpg");}

There is a huge benefit to the background property in the stylesheet that you can apply a background image to all the page elements, from paragraphs, lists to cells in the table, and can be defined in the same way that you define the background of the BODY element.

1 P {background-image:url ("piture.jpg");}

You can force the background image to remain stationary by adding the Background-attachment property to the page style sheet.

When the value of the Background-attachment property is set to fixed, the background image remains in a fixed state.

When the value of the Background-attachment property is set to scroll, the background image scrolls as the page scrolls.

Similarly, you can also use the Background-repeat property to tell the browser whether to repeat the background image. The possible values for the Background-repeat property are:

• Repeat: The background image is repeated in both horizontal and vertical two directions;
• Repeat-x: The background image is displayed only in the horizontal direction;
• Repeat-y: The background image is displayed only in the vertical direction;
• No-repeat: Background image is not displayed repeatedly.

1 Body {2    background-image: url ("f://img/test2.jpg");  3    background-repeat: no-repeat;  4    background-attachment: fixed;  5 }

[Html/html5]6 using Images