Later, I checked its processing method and analyzed it. Let's take a look!
The CSS code is as follows:
Copy content to clipboard
Code:
Body. index h1 {width: 30%; height: 130px; margin-left: 0; background: url (/files/theme/branding-h1.png) no-repeat 50% 50%; text-indent: -9999px ;}
Body. index h1 a {display: block; height: 130px ;}
XHTML code
Copy content to clipboard
Code:
<H1> <a href = "/" title = "The Web Standards Project"> The Web Standards Project </a>
Do you see the key? Right, that is, text-indent:-9999px ;.
We know that text-indent is used to set the position where the first word at the beginning of a paragraph is left white. Here it is set to-9999px. Naturally, in H1
Width: 30%; height: 130px;
Such a range class, the word is out of the display area, can not see, and then display its background url (/files/theme/branding-h1.png) no-repeat 50% 50%, the next step is to set the label to display: block; height: 130px; our A label is A block, which displays the background image. When you click the label, as if we were clicking an image.
So what are the benefits of using the img label to display images?
This is a good question. Why? I think you must have heard that another good way to write a standard page is to be friendly to search engines. when we create keywords, we need to see the number of times the keywords you write appear on your page. the search engine is not so intelligent at present, mainly searching text on pages. the search text priority (my personal opinion), is to first look at your page in the h1-h6 label, then strong label.
Because the word H1 tag and strong tag (default) are both bold, it indicates that in this article section, the content between the tags is what you want to emphasize, is more important. well, do you understand? Well, you have not only made reasonable intentions, but also optimized SEO.