Add Images to your Website(添加网站图片)

Add Images to your Website

说明:

使用img元素来为你的网站添加图片,使用src属性指向一个图片的具体地址。

举例如下:

<img src="https://www.your-image-source.com/your-image.jpg">

注意:img元素是自关闭元素,不需要结束标记。

用以下图片来测试:

/images/relaxing-cat.jpg

原始代码:

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }
</style>

<h2 class="red-text">我家的猫咪</h2>

<p class="red-text">猫咪猫咪我就喜欢你</p>
<p class="red-text">深深地爱上你</p>
<p class="red-text">没有理由没有原因</p>
<p class="red-text">从见到你的那一天起</p>
<p class="red-text">你知道我在等你吗?</p>
<p class="red-text">你如果真的在乎我</p>
<p class="red-text">又怎会让无尽的夜陪我度过</p>
<p class="red-text">猫咪猫咪我就喜欢你</p>
<p class="red-text">深深地爱上你</p>
<p class="red-text">在黑夜里倾听你的声音</p>

调试代码:

<link href="https://fonts.gdgdocs.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }
</style>

<h2 class="red-text">我家的猫咪</h2>
<img src="/images/relaxing-cat.jpg">
<p class="red-text">猫咪猫咪我就喜欢你</p>
<p class="red-text">深深地爱上你</p>
<p class="red-text">没有理由没有原因</p>
<p class="red-text">从见到你的那一天起</p>
<p class="red-text">你知道我在等你吗?</p>
<p class="red-text">你如果真的在乎我</p>
<p class="red-text">又怎会让无尽的夜陪我度过</p>
<p class="red-text">猫咪猫咪我就喜欢你</p>
<p class="red-text">深深地爱上你</p>
<p class="red-text">在黑夜里倾听你的声音</p>

Last updated