1. Use element - img
Writing format:
<img src="" alt="" title=""/>
(1) src attribute: image link
(2) alt attribute: alternative text when the image cannot be displayed, the text is usually the description of the image, and the shrinking engine will recognize the content when shrinking. (3) title attribute: the description text displayed when the mouse hovers over the picture.
2. The whole image hyperlink
Writing format:
<a href=""> <img src="" alt="" title=""/></a>
The img tag can be referenced by nesting the image in the hyperlink a tag, and the hyperlink content of the a tag can be obtained by clicking the image on the page.
3. Create hyperlinks in different positions of the same image
Writing format:
<img usename="" src="" alt="" title=""/>
<map name(或id)="" >
<area shape="" coords="" href="" alt="">
</map>
(1) Use the name and id attributes of the label map to create a relationship with the usename attribute of the referenced image.
(2) The area tag is nested in the map tag. The shape attribute value of the area tag attribute is used to set the shape of the connection click area (rectangle: rectangle, ciule: circle, poly: polygon); the value of the area tag attribute coords attribute is used to specify the clickable area. The location of the area (rectangle: the coordinates of the two poles of the diagonal line; circle: coordinates of the center of the circle, radius; polygon: the coordinates of each point clockwise); the value of the attribute href is the address to connect to when specifying the clicked area. (3) After the webpage is generated, click the designated area on the picture to access the corresponding hyperlink.
4. Label figure and figcaption
Writing format:
<figure>
<img src="" alt="" title="">
<figcaption>图片关键字或说明</figcaption>
</figure>
These two labels are parent-child labels, which appear in pairs, figure is the parent, and figcaption is the child label, which is used to achieve the effect of adding text to pictures.