Shulou(Shulou.com)06/01 Report--

This article mainly introduces the html picture tag how to use the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this html picture tag how to use the article will have a harvest, let's take a look.

1. Html img grammar

1. Img is a self-closing label.

Unlike the div tag to start with and end it

2. Introduction of img function

The important img in the html code is the tag that introduces the picture.

3. Img structure of the picture

The img tag must set the attribute to src (the attribute of the image path subconfiguration), and all other equipment can be set or not set.

Important: the src attribute in the img tag is required, and it is also the place where the equipment is set up by introducing the picture to the html.

4. Teaching diagram of img tag element structure analysis.

The following is an analysis of img picture tags:

Picture of html element img element elucidation diagram

5. Example code

Use the html picture img tag

The above code shows that the img tag setting equipment equipment picture element is in the HTML, the src picture location sets the internal URL picture address, the configuration description alt attribute, and there are no width, height and other attributes.

6. Screenshot

2. Img directly sets the style of equipment.

Picture Img in addition to the configuration of width, height to directly use the properties, but also roughly set the equipment decoration frame.

1. Border sets up equipment and installs picture frame.

The border attribute is 2, and the frame of the equipment is set to 2px.

Img plus border configuration border

From the above, we can see that the picture frame is black by default, and there will be some differences in the tones acquiesced by the consistent reader, so how to set the important frame of the equipment?

Governance of this requirement requires css implementation.

2. Img directly sets up the equipment and installs the css

Img, that is, if the equipment CSS is set in the tag, you need to use the style attribute value to configure it. The following code:

The style attribute is used within the img tag to set the border, and width.

3. Use style to set up equipment and install screenshots of CSS scores in the tag.

Screenshot of img Direct configuration css sample

3. Css set up img picture tips

The above introduction sets the equipment decoration style for the image, configures the CSS in the tag, and usually advocates the internal CSS to control the structure within the HTML, so that if there are more web pages, as soon as the independent CSS is changed, the HTML construction of the whole site will follow the tampering.

1. The internal CSS sets the equipment items for the pictures in the html.

Html Picture img setup equipment CSS pattern CSS5.imgcss {width:200px; height:100px; border:2px solid # F00} .wcss img {width:300px; border:3px dashed # 00F}

One of the above code directly uses class to introduce CSS to img, and the other one points to set up the CSS style of the equipment in the class=wcss object by pointing to the img. Both situations are often used, and you are determined to CSS the pictures according to your needs.

Of course, in order to facilitate the maintenance of CSS, the general CSS code is put in the CSS file, and then html uses link to introduce the CSS file, which is convenient for achievement examples, so put the CSS directly into the HTML for examples.

2. Screenshot

This is the end of the article on "how to use html Picture tags". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use html picture tags". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.