图片标签

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>图像标签</title>
  6. </head>
  7. <body>
  9. <img src="xjj.jpg" alt="小姐姐" title="这是一个小姐姐哦" width="300" height="300">
  11. </body>
  12. </html>

src：图片的相对路径或者绝对路径；
alt：当图片路径错误或者图片不存在的时候显示的文字；
title：鼠标在图片上停留时显示的文字；
width和height：宽和高；
运行结果：
image.png
当找不到小姐姐的图片时：
image.png

连接标签

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>连接标签</title>
  6. </head>
  7. <body>
  9. <a href="https://www.google.com/search?sa=X&sxsrf=ALeKk026HWxSS3-0j37H2fXkk9Hj12a2FQ:1616087931892&source=un
  10. iv&tbm=isch&q=%E5%B0%8F%E5%A7%90%E5%A7%90%E5%9B%BE%E7%89%87&hl=zh-CN&ved=2ahUKEwjioezYrLrvAhWF1FkKHRwVDgcQjJk
  11. EegQIARAB&biw=1536&bih=722">点我有惊喜！！！</a>
  13. </body>
  14. </html>

运行结果：
image.png
image.png
除此之外，还可以把图片设置成超链接：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>连接标签</title>
  6. </head>
  7. <body>
  11. <a href="https://www.google.com/search?sa=X&sxsrf=ALeKk026HWxSS3-0j37H2fXkk9Hj12a2FQ:1616087931892&source=univ&tbm=isch&q=%E5%B0%8F%E5%A7%90%E5%A7%90%E5%9B%BE%E7%89%87&hl=zh-CN&ved=2ahUKEwjioezYrLrvAhWF1FkKHRwVDgcQjJkEegQIARAB&biw=1536&bih=722"><img src="xjj.jpg" alt="小姐姐" height="300" width="300" title="小姐姐的照片哦"></a>
  14. </body>
  15. </html>

点击小姐姐的图片就可以跳转到指定页面了

超链接之锚链接：
跳转到指定页面的指定地方，该地方可以设置一个标签，设置它的name属性，如：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>连接标签</title>
  6. </head>
  7. <body>
  9. <a name="top">顶部</a><br>
  11. <img src="xjj.jpg">
  13. <a href="#top">回到顶部</a>
  15. </body>
  16. </html>

运行结果:
image.png
点击之后：
image.png

超链接之邮件连接（点击可发送邮件）：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>连接标签</title>
  6. </head>
  7. <body>
  9. <a href="mailto:2691397780@qq.com">点击发送邮件给我</a>
  11. </body>
  12. </html>

运行结果省略了