如何将<img>图片插入html元素中

本章节简单介绍一下如何将一个图片插入html元素中，这个属于最基础的html知识，适合于初学者，下面做一下简单介绍。

代码如下:

<code>&lt;</code><code>div</code><code>&gt;&lt;</code><code>img</code> <code>src</code><code>=</code><code>"mytest/demo/tree.jpg"</code> <code>width</code><code>=</code><code>"100"</code> <code>height</code><code>=</code><code>"100"</code> <code>border</code><code>=</code><code>"1"</code><code>/&gt;&lt;/</code><code>div</code><code>&gt;</code>

以上代码可以在div中插入一个图片，并设置图片的尺寸和边框宽度，图片的尺寸和边框宽度最好用css设置。

完整代码如下:

<code>&lt;!DOCTYPE html&gt;    </code>

<code>&lt;</code><code>html</code><code>&gt;    </code>

<code>&lt;</code><code>head</code><code>&gt;    </code>

<code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>" utf-8"</code><code>&gt;    </code>

<code>&lt;</code><code>title</code><code>&gt;蚂蚁部落&lt;/</code><code>title</code><code>&gt; </code>

<code>&lt;</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>&gt;</code>

<code>img{</code>

<code>  </code><code>width:100px;</code>

<code>  </code><code>height:100px;</code>

<code>  </code><code>border:1px solid blue;</code>

<code>}</code>

<code>&lt;/</code><code>style</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>div</code><code>&gt;&lt;</code><code>img</code> <code>src</code><code>=</code><code>"mytest/demo/tree.jpg"</code> <code>/&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

更推荐使用以上方式设置设置图片的样式。

原文发布时间为：2017-2-13

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落