您的位置：首页 > Web前端 > HTML5

html5 标签img学习(待更新)

2015-12-11 00:20 901 查看

在 HTML 4.01 中，图像的 "align", "border", "hspace" 以及 "vspace" 不赞成使用。在 HTML5 中，不再支持这些属性。

一：基本属性

二：基本用法及注意事项

<!--
img标签
<img src="图片路径" alt="当图片无法打开时，替代的文字">
width 和 height 高和宽 分像素和百分比
width="100"//默认为像素px
height="50%" //百分比-相对于浏览器的宽度。如果设置了width百分比，height百分比设置无效没有意义，只能设置px
title="在鼠标放在图片上时提示的内容"
-->

<img src="a05.jpg" alt="美女" width="100" height="200" title="本图片是宽高为px设置">

三：实验案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>image元素练习</title>
</head>
<body bgcolor="#fff">
<h1 align="center">美图赏析</h1>
<hr>

<img src="a05.jpg" alt="美女" width="100" height="200" title="本图片是宽高为px设置">
<img src="a06.jpg" alt="美女" width="200" title="本图片是设置宽高度自适应">
<img src="a07.png" alt="美女" width="5%" title="本图片演示百分比效果">
<img src="a008.j" alt="错误" title="本图片地址错误">

<img src=""

alt="萌宠" title="本图片演示链接网络图片，如果该图片不存在或者路径错误，提示alt中文字信息">

</body>
</html>

用的360浏览器，alt提示没有出来。。。

四：小案例。利用段落<p>标签嵌套图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>image元素练习</title>
</head>
<body bgcolor="#fff">
<h1 align="center">美图赏析</h1>
<hr>
<p align="center" >

<img src="a06.jpg" alt="" title="美女" width="200" height="200">
<img src="a07.png" alt="" title="美女2" width="200" height="200">
<img src="a08.jpg" alt="" title="美女三" width="200" height="200">

</p>
<p align="center">
<img src="a05.jpg" alt="距离上部和下部" vspace="50">
</p>

</body>
</html>

感谢：http://www.html5china.com/manual/html5/html5_img.htm

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航