HTML - 图片

图像是在网页中非常重要的。 因此，必须以正确的方式使用它们。使用标签插入图片。 <img/>.

html<img alt="html image example" src="/assets_tutorials/img/image.jpg"  />

Demo

HTML - img src

“SRC”是“Source”的缩写。 该属性用于指示该图像位置。 如在说明 链接的教程 你可以使用任何URL指向该文件。

您还得解决完整的URL。 例如

htmlscr="http://www.tutorialehtml.com/assets_tutorials/img/image.jpg"

URL模式是不建议，因为如果你要更改域名，你将不得不改变所有图像文件的地址。 或者，图像存储于另一个域使用。 scr="http://www.domain.com/image.jpg".

事实上存储图像在一个服务器上，如果起空白提供给您的域是有限的，会呈现出一个很大的优势。

HTML - 图片的“另类”属性

被用来以你的浏览器的某些原因代替图像显示文本的属性“Alt”是不可显示其图片，或当用户具有“ShowImage”选项时未被选择。

html<img alt="HTML图像的例子" src="/assets_tutorials/img/image.jpg" />

Demo

HTML - 图像的高度和宽度

以确定图像的高度和宽度被使用“高度”和“宽度”属性。是逻辑的，不！

html<img alt="HTML图像的例子" src="/assets_tutorials/img/image.jpg"  width="120" height="75" />

Demo

HTML - 图像的水平和垂直对齐

为了这我们将会使用align和valign属性。此选项是由这些属性被提出的:

1.水平对齐(horizontal)

• 右
• 左
• 中

2. 垂直对齐(horizontal)(vertical)

• 上
• 下
• 中

html<img alt="" align="right" src="/assets_tutorials/img/image.jpg" /> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

HTML - 以链接使用图片

这只是个介绍, 我对这在下一教程里将会谈得更多. 这图片作为链接非常有用而形成如下东西。

html<a href="http://www.tutorialehtml.com/" title="HTML link image example">
	<img alt="HTML图像例子" src="/assets_tutorials/img/image.jpg" 宽度="120" 高度="75" />
</a>

Demo

上述的图像将发送到主页面。你可改变它到你的开始页面而在这儿你以一个链接拥有一个图片到你的开始页面

HTML - 缩图

缩图是图像的缩小版本具有一个充分高的质量。要制作一个缩图将其图片以低质量的保存而再恢复。然后链接这个小图片到原来的高质量图片。

html<a href="/assets_tutorials/img/image.jpg"  title="HTML链接图像缩图例子">
	<img alt="html image example" src="/assets_tutorials/img/image.jpg" width="66" height="49" />
</a>

Demo