HTML's img tag

Source: Internet
Author: User

  I found out why I would not develop, or do not want, I feel because I will not be the front end, I think that the perfect backstage display is not used, in order to solve this problem, the author added HTML columns, and we share the exchange.

One. IMG must have SRC and ALT attributes

  The src attribute specifies the URL of the image to be displayed, and the browser initiates an HTTP GET request for the URL.

The ALT attribute specifies an alternative text for the image that is displayed in the browser instead of the image when the image cannot be displayed or when the user disables the display of the image.

But I found that, in fact, you do not add the ALT attribute will not error, but I think the addition of words so that even if the image can not be displayed, the user will be able to see some of the relevant information, thereby greatly improving the user-friendliness of the page.

Two. I found that with two img The picture is up and down, there is no direction in the left and right, how to solve it

  I first put two addresses separated by a comma in a src, found completely unable to display, and then I found that because of the display problem, two IMG written together, the default is left and right side;

The width value is too large to allow your page to host only so many properties of the extra properties will be displayed on your next line, to have a precise layout to make their own effect.

2.1 I have a solution.

 The first width is 50%, the second occupies the remaining width, I remember is "*%", and later found not; two are set to 50%, found or up and down display, the second simply do not fill out, showing the effect of the second chapter of the picture. So I decisively put the first IMG tag preceded by some space " ", now is the third effect, is my blog right sidebar.

2.2 Legacy issues

 Control occupies the remaining width, how to say?

What is the difference between HTML and XHTML in 3. tags?

  The former does not need to end the flag, after which the face must be closed properly.

4. Why should I specify height and width?

  When you browse the Web, you may experience this situation: as the image on the page loads and displays successfully, the content on the page moves erratically, affecting your reading. This is because the image on the page does not have the height and width properties defined.

If the height and width properties of the image are not defined, then the browser needs to download the image first, then parse out the height and width of the image, and leave the screen space in the display window so that the browser will continually recalculate/adjust the layout of the page, in order to display each loaded image. This may delay the display of the document and cause the page to redraw.

Therefore, I recommend using the height and Width properties to specify the size of the image. This allows the browser to make room for the image before it is downloaded, speeding up the display of the document, and preventing the page from being redrawn by moving the contents of the document.

5. tag of the Onload/onerror/onabort event, under what circumstances will be triggered?

  OnLoad: The event occurs immediately after the image is loaded.

OnError: Event is triggered when an error occurs during document or image loading.

Onabort: event occurs when an image load is interrupted. For example, the user clicks the browser's Stop button, or during an image download.

6. How do I know if a user is forbidden to browse pictures?

  Users can set the browser not to display pictures, especially on mobile devices, users in order to save traffic, often prohibit the display of pictures. So, how do you know if users are forbidden to browse pictures?

In the StackOverflow is to set the complete property of SRC, I do not use, no matter, I suddenly feel that this is a browser thing, do not display it does not show it, will appear alt, the user knows, so I think this problem is not necessary to tube.

7. Harvest 7.1 Harvest 1

  Stupid method is the best method, in fact, it is not the method of stupidity, but they do not think, in the final analysis is their impetuous, not practical.

7.2 Harvest 2

Do not want to study, I decisively go back to sleep, play games.

8. References

Http://www.cnblogs.com/hencehong/archive/2012/10/06/something_interesting_about_image.html

HTML's img tag

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.