HTML background image and background color_PowerNode Java Academy

1. HTML Image <img>

1. The <img> tag and its src attribute

In HTML, images are defined by the <img> tag. <img> is an empty tag, meaning that it contains only attributes and has no closing tag (it ends directly with "/>"). To display an image on a page, you need to use the source attribute (src). src means "source". The value of the source property is the URL address of the image. The syntax for defining an image is: <img src="url" />, where URL refers to the location where the image is stored. The browser displays the image in the document where the image tag appears.

<!--Only the img with the src attribute specified-->
<img src="images/bjpowernode.jpg" />

2. Other attributes of the <img> tag

alt attribute: used to define a string of prepared replaceable text for the image. When the image cannot be displayed, the text defined by the alt attribute will be displayed. When the image is displayed normally, there will be a floating prompt when the mouse is placed on it, such as "Click to see a larger image." It is a good habit to add alternative text attributes (alt) to images on the page. This helps to better display information and is very useful for those who use text-only browsers. Moreover, the XHTML1.0 standard now mandates the use of the alt attribute. When the <img> tag does not have an alt attribute, the following prompt will appear in VS.

Title attribute: used to display the text when the mouse is placed on the image. It is an explanatory text for the image. For example, many websites now have a “click to jump to the next page” feature when browsing pictures.

The difference between the alt attribute and the title attribute: the alt attribute of the <img> tag is an alternative language provided to browsing users when the image is not displayed due to browser compatibility, loading failure or address error. Its nature is a substitute for the image; while the title attribute of the img tag expresses some additional information about the image. Its nature is a remark or annotation, and the text is displayed when the mouse passes over it.

border attribute: specifies the border, border="0" does not display the border.

Width and height attributes: specify the display size of the image. If not specified, the original size of the image is used. It is best to specify the width and height, even if it is the original size, because if the size is not specified, the image will not take up any space on the page. If the image is resized after downloading, the page layout will be messy. If width and height are specified, the image will be used even if it has not yet been loaded.

<img src="images/1499417200939140562.jpg" />
 <!--Specify the alt attribute of the image-->
<img src="images/1499417200939140562.jpg" alt="A beautiful picture" />
<!--Specify the image with title attribute-->
<img src="images/1499417200939140562.jpg" alt="A beautiful picture" title="Haha" />
 <!--Set the width and height of the image-->
<img src="images/xxxx.gif" title="img" alt="img" width="454" height="340" />

3. <img> as a hyperlink

<img> as a hyperlink (i.e. image hyperlink) means that the <img> tag is used as the link object of the <a></a> tag. Note: When <img> is used as a hyperlink object, IE browser will automatically add a blue border (border="1") to <img>. This is often not what we want. You can cancel the border by setting border="0".

<!--Image hyperlink, use the img tag as the hyperlink object-->
<a href="../HTMLHyperlink.html" title="HTML Hyperlink Syntax">
<img src="http://www.bjpowernode.com/image/m.jpg" border="0" alt="Image link" />
</a>

2. HTML Background

1. Background color (Bgcolor)

The background-color property sets the background to a certain color. The property value can be a hexadecimal number, RGB value, or color name.

<body bgcolor="#000000"> <!--Hexadecimal color value-->
<body bgcolor="rgb(0,0,0)"> <!--rgb color value-->
<body bgcolor="black"> <!--Color name-->

2. Background

The background property sets the background to an image. The attribute value is the URL of the image. If the image size is smaller than the browser window, the image will be duplicated across the entire browser window. Note: To speed up the display of web pages and improve the friendliness of the website, the background image size should not exceed 10k.

<body background="clouds.gif"> <!--Relative URL-->
<body background="http://www.bjpowernode.com /clouds.gif"> <!--Absolute URL-->

Note: In the new standard, the background color (bgcolor) and background image (background) attributes of HTML elements have been abandoned. Instead, CSS is used to set the background color and background image of the element.

3. Color

1. Color

Color is a mixture of red, green, and blue. Color value: A color is defined by a hexadecimal notation consisting of red, green, and blue values (RGB). The minimum value for each color is 0 (hexadecimal: #00). The maximum value is 255 (hexadecimal: #FF). For example, the color name of black is black, its hexadecimal representation is #000000, and its RGB value is rgb (0,0,0).

2. Color name

There are only 16 color names supported by the W3C's HTML 4.0 standard. They are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. If you need to use other colors, you need to use hexadecimal color values.

3. Web-safe colors

Several years ago, when most computers supported only 256 colors, a set of 216 Web-safe colors was proposed as a Web standard. The reason for this is that Microsoft and Mac operating systems use 40 different reserved fixed system colors (roughly 20 each). 4.216 Cross-platform colors

Originally, 216 cross-platform web-safe colors were used to ensure that all computers would display all colors correctly when using a 256-color palette.

<<: Detailed explanation of how to deploy and install the Chinese version of Redash in Docker

>>: MySQL 8.0.22 winx64 installation and configuration graphic tutorial