HTML知识积累及实践（二）

HTML知识及积累（二） - 标签样式

图片标签

img 元素向网页中嵌入一幅图像（技术上：是从网页上链接图像）

<1> 常见图片格式 ;

.jpg

.gif (Graphics Interchange Format)的原义是“图像互换格式”

特点一：支持无损耗压缩和透明度；

特点二：在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画，易于使用许多 GIF 动画程序创建。

缺点：详细的图片和写实摄影图像会丢失颜色信息

.png　

优点：PNG 支持高级别无损耗压缩（支持透明度，）；

缺点：ＩＥ６不支持透明

<2> 路径知识 (绝对路径、相对路径)

1 HTML相对路径(Relative Path)

同一个目录的文件引用：如果源文件和引用文件在同一个目录里，直接写引用文件名即可，

这时引用文件的方式就是使用相对路径。

2 HTML绝对路径(Absolute Path)

完整的描述文件位置的路径就是绝对路径不需要知道其他任何信息就可以根据绝对路径判断出文件的位置

<3> 链接；

HTML 标签 - img标签

img标签（img 元素向网页中嵌入一幅图像）：

＜１＞　并不会在网页中插入图像，而是从网页上链接图像。

＜２＞　标签创建的是被引用图像的占位空间。

图片的四要素：

src　,　alt　,　width　,　height

属性：id, class, title, style

img标签的应用

<1> 插入不同格式的图片;

<body>
<h1>图片标签</h1>
<h2>插入一张图片.jpg的图片，莫忘图片四要素<h2/>
<img src=images/cat_200_300.jpg alt="猫咪" width="200" height="300" />
<h2>插入一张gif动画</h2>
<img src="data:images/wangzhe.gif" alt="王者动图" width="499" height="279" />
<h2>插入一张png图片</h2>
<img src="data:images/hair.png" alt="发型" width="617" height="670" />
</body>

图片四要素一定要有，<img /> 必须要有空格反斜杠

路径：相对路径绝对路径
描述：描述是抓取的关键词，是给搜索引擎看的
width和height一定要给定，利于seo优化，单位是px，可以不写，简化代码，默认单位就是像素
title 能让用户的看得到的提示（可写可不写，不利于soe优化）

效果:

<2> 从不同的位置插入图片;

<3> 背景图片;

<4> 排列图片（align="bottom / middle / top"）;

图片排列顺序（其后文字的排列对齐方式）
align="bottom/middle/top"

bottom方式：

<img src=images/cat_200_300.jpg alt="猫咪" width="200" height="300" align="bottom" />bottom方式

效果：

middle方式：

<img src=images/cat_200_300.jpg alt="猫咪" width="200" height="300" align="middle" />middle方式

效果：

top方式：

<img src=images/cat_200_300.jpg alt="猫咪" width="200" height="300" align="top" />top方式

效果：

<5> 浮动图像（带有图像的一个段落，图像的 align 属性设置为 "left"图像将浮动到文本的左侧）;

<p><img src=images/cat_200_300.jpg alt="猫咪" width="200" height="300" align="left" />猫，属于猫科动物，分家猫、野猫，是全世界家庭中较为广泛的宠物。家猫的祖先据推测是起源于古埃及的沙漠猫，波斯的波斯猫，已经被人类驯化了3500年（但未像狗一样完全地被驯化）。
一般的猫：头圆、颜面部短，前肢五指，后肢四趾，趾端具锐利而弯曲的爪，爪能伸缩。夜行性。
以伏击的方式猎捕其他动物，大多能攀缘上树。猫的趾底有脂肪质肉垫，以免在行走时发出声响，捕猎时也不会惊跑鼠。行进时爪子处于收缩状态，防止爪被磨钝，在捕鼠和攀岩时会伸出来。这是一只小黑猫，他是用python自动抓取的图片,为什么下面的图片也会上来呢，我也不大清楚猫是善于攀爬跳跃的动物，它的体内各种器官的平衡功能比其它动物要完善，当它从高处跳下来时，身体失去平衡，神经系统会迅速的指挥骨骼肌以最快的速度运动，将失去平衡的身体调整到正常的位置。</p>

效果：

<6> 图片连接；

图片标签可以添加超链接，可以用a标签加超链接

<a href="http://www.baidu.com"><img src="data:images/wangzhe.gif" alt="王者动图" width="499" height="279" align="bottom"/></a>

效果：

点击图片之后进入链接的网址

图片标签在实际项目中的运用是很广泛的，使用google浏览器审查元素都可以看的出，基本网页上的图片都用了img图片标签

比如百度百科

可以看到这张图片就是使用的img标签，而且加了<a>标签，点击图片咳哟i跳转网址，这样提升了用户体验，关于target="_blank"

加此参数的话，超链接会在一个新的页面打开，否则将会是在当前页面打开

test

HTML标签 - img图片