<!--
图像与多媒体文件
图像、滚动文字、背景音乐等多媒体文件在HTML使用的方法
2018.01.06
-->
<html>
<head>
<meta charset="UTF-8" />
<title>图像与多媒体文件</title>
<style type="text/css">
ul{
list-style-type:none;
}
li{
float:left;
padding:0 20px;
}
</style>
</head>
<body>
<!--
6.1 图像
6.1.1 插入图像
6.1.2 设置图像的替代文本
<img src="URL" alt="替代文字" >
--src、alt为必选属性,其余为可选属性
src,指source,图像的URL值
alt,规定图像的替代文字
属性名 值 说明
--------------------------------------------------------------
name text 规定图像的名称
height pixels、% 定义图像的高度
width pixels、% 定义图像的宽度
align top|middle|bottom|left|center|right 规定如何根据周围文本来排列图像,分水平、垂直两个方向
border pixels 定义图像周围的边框
hspace pixels 定义图像左侧和右侧的空白
vspace pixels 定义图像顶部和底部的空白
usemap URL 将图像定义为客户端图像的映射
-->
<h3>插入图像</h3>
<center>
<h4>网页中插入图像</h4>
<hr color="#66ff33" width="60%" />
<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度搜索" title="Baidu" ><br />
<img src="bd_logo1.png" alt="百度搜索" title="Baidu" >
<p align="center">验证代替文本</p>
</center>
<br />
<hr width="100%" size="50" color="#000" align="right" noshade />
<br />
<!--
6.1.3 设置图像的高度和宽度
<img src="URL" alt="" width="value" height="value">
6.1.4 设置图像的边框
<img src="URL" alt="" width="value" height="value" border="value1">
value1:为边框线的宽度,用数字表示,单位为像素
-->
<h3>图像的高度和宽度、边框</h3>
<h4 align="center">设置图像宽度、高度及边框</h4>
<hr color="#6600cc">
<ul>
<li><img src="https://www.baidu.com/img/bd_logo1.png" alt="原图"></li>
<li><img src="https://www.baidu.com/img/bd_logo1.png" alt="宽度为50px,高度为30px,边框为5" width="50px" height="30px" border="5"></li>
<li><img src="https://www.baidu.com/img/bd_logo1.png" alt="宽度为50px,高度为30px,边框为10" width="50px" height="30px" border="10"></li>
</ul>
</body>
</html>
HTML基础——图像与多媒体文件(一)
最新推荐文章于 2021-09-12 16:36:29 发布