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
Recommend
The easiest way to install MySQL 5.7.20 using yum in CentOS 7
The default database of CentOS7 is mariadb, but m...
Hadoop 2.x vs 3.x 22-point comparison, Hadoop 3.x improvements over 2.x
Question Guide 1. How does Hadoop 3.x tolerate fa...
Introduction to several ways to introduce CSS in HTML
Table of contents 1. Embed CSS styles directly in...
Detailed explanation of the implementation of WeChat applet track playback and the pitfalls encountered
WeChat applet trajectory playback mainly uses pol...
CSS sets the box container (div) height to always be 100%
Preface Sometimes you need to keep the height of ...
The use of textarea in html and common problems and case analysis
The textarea tag is an HTML tag that we often use....
About the problem of writing plugins for mounting DOM in vue3
Compared with vue2, vue3 has an additional concep...
WeChat applet realizes multi-line text scrolling effect
This article example shares the specific code for...
How to parse the attribute interface of adding file system in Linux or Android
The first one: 1. Add key header files: #include ...
Solution to the problem that directly setting the width and height of a hyperlink does not work
It is not possible to use width and height directl...
Detailed explanation of execution context and call stack in JavaScript
Table of contents 1. What is the execution contex...
Detailed explanation of possible problems in converting floating point data to character data in MySQL
Preface This article mainly introduces a problem ...
How to set up PostgreSQL startup on Ubuntu 16.04
Since PostgreSQL is compiled and installed, you n...
js realizes the magnifying glass effect of shopping website products
This article shares the specific code of js to ac...
Windows system mysql5.7.18 installation graphic tutorial
MySQL installation tutorial for Windows system do...