Explain in detail the confusion of alt and title attributes in CSS

Browser vendors may cause problems or at least confusion if they distort standards and do not follow the rules. One example is that some browsers process the alt attribute (generally known as the alt tag), such as Windows IE browsers with a large number of users.
The replace text is not used for prompt, or, more specifically, it does not provide additional instructions for the image. On the contrary, the title attribute should be used to provide additional information for the element. This information is displayed as a prompt in most Image browsers, although the manufacturer can render the title attribute text in any other way.
Many people seem confused about these two attributes (This problem has recently become more frequent in the Web Standards Group email list), so I wrote down my thoughts on how to use them.
Alt attribute
For a user agent (UA) that cannot display images, forms, or applets, the alt attribute is used to specify the replacement text. The language used to replace text is specified by the lang attribute. Source: How to specify alternate text.
Alt attributes (note that they are "attributes" rather than "tags") include replacement instructions, which are required for images and image hotspots. It can only be used in img, area, and input elements (including applet elements ). For the input element, the alt attribute is intended to replace the image of the submit button. For example, <input type = "image" src = "image.gif" alt = "Submit"/>.
The alt attribute is used to provide text instructions for those who cannot see the images in your document. This includes users who use browsers that do not support Image Display or that are disabled, users with visual impairment, and users who use screen readers. Replace text is used to replace images rather than provide additional instructions.
Think carefully before writing and replacing the text to ensure that the text does provide instructions for those who cannot see the image and make sense in the context. For decorative images, you can use null values (alt = "", there is no space in the quotation marks) instead of irrelevant replacement text such as "blue bulletaskcharacter spacer.gif ". Do not ignore it. If you ignore it, some screen readers will directly read the file names of image files, and those text browsers, such as Lynx, will display the file names of image files, and it will be useless for your viewers.
It is easiest to replace text with an image that contains text. Text contained in an image can generally be used as an alt attribute value.
For the length of the text to replace, see what WCAG 2.0 (website content availability Guide 2.0) says:
The Alt attribute must be less than 100 English characters in length or the user must ensure that the replacement text is as short as possible.
I understand it as "as short as possible and as long as possible ".
Even if you want it to be displayed as a tool tip, do not use the alt attribute for the text element. This is not its usage. So far, as far as I know, this method can only be used in Windows's IE browser and the old Netscape 4. * (windows version. A browser without a Mac will display it as a prompt ).