小贝学习html--图像

最新推荐文章于 2023-05-19 09:10:27 发布

脚本小子-小贝

最新推荐文章于 2023-05-19 09:10:27 发布

阅读量528

点赞数

分类专栏： xhtml 文章标签： xhtml 图片 html

本文链接：https://blog.csdn.net/u014795720/article/details/40018401

版权

xhtml 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

html_图像

导航
1.背景图案的设置
2.将图片插入到网页中去
3.用图像作为超链接
4.使用工具建立地图索引
5.为网站添加图标

1、背景图案的设置
格式：<body background=”URL”>

2、将图片插入到网页中去
格式:<img src="URL">
功能:将图片插入到网页中去 ,单一标签
<img>下的属性
属性名称属性值说明
src URL 图片的路径

图片的注解
   属性名称属性值说明
   alt 字符串给图片做注解
图象大小的设置
   属性名称属性值说明
   width 像素绝对设置,宽
   百分比相对设置,宽
   height 像素绝对设置,高
   百分比相对设置,高
图象边框的设置
   属性名称属性值说明
   border 数字图象边框
文字图象的排列
属性名称属性值说明
align left 图象靠左,文字靠右
      right 图片靠右,文字靠左
      top 文字往上靠
      middle 文字靠中
      bottom 文字靠下
空隙的设置
属性名称属性值说明
vspace 像素垂直上下两端与物件的距离
hspace 像素水平左右两段与物件的距离

3、用图像作为超链接
格式:<a href="URL"><img src="URL"></a>
注意点:边框的问题.

4、地图索引
格式:<map name="图象名称" id="图象名称">
<area shape="选取区块的形状 " coords="坐标" href="URL" alt="文
字说明">
</map>
<img src="URL" USEMAP="#图象名称">
<map>声明整张图使用地图链接方式进行连接.
name,id指此图的名称 .
<area>表示我们所要链接其中一点的区快
shape表示我们所选择的形状 ,如:rect矩形 circle圆 poly多边形
coords 表示地图的坐标位置

5、为网站添加图标

<span style="font-family:Courier New;font-size:14px;"><html>
<head>
	<meta name="keywords" content="HTML图像"/>
	<meta name="description" content="HTML图像"/>
	<meta name="author" content="xiaobei qq:2801616735"/>
	<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
	<title>2014-10-12 HTML图像</title>
</head>
<body>
	<ul>
    	<li>导航</li>
        <li>
        	<ul>
            	<li>标签背景图案的设置</li>
        		<li>将图片插入到网页</li>
                <li>用图像作为超链接</li>
        		<li>使用工具建立地图索引</li>
                <li>为网站添加图标</li>
            </ul>
        </li>
    </ul>
    <hr/>
	<h2>设置标签背景图片</h2>
<p style="background:url(a.gif); height:114px; width:125px;">dd</p>
    <hr/>
    <h2>将图片插入到网页_1</h2>
<img src="a.gif" alt="将图片插入到网页中" title="将图片插入到网页中" border="3"/>
    <hr/>
	<h2>将图片插入到网页_2_与其它元素组合_align_vspace_hspace</h2>
<p style="border:1px  dashed #F00;">
    <img src="a.gif" alt="将图片插入到网页中" title="将图片插入到网页中" border="3" align="middle" vspace="10" hspace="10"/>图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像
    </p>
    <hr/>
    <h2>用图像作为超链接</h2>
    <a href="http://www.baidu.com"><img src="a.gif"/></a>
    <hr/>
<h2>地图索引</h2>
    <img src="a.gif" usemap="#xiaobei" border="0"/>
    <map name="xiaobei" id="xiaobei1">
      <area shape="rect" coords="14,23,114,80" href="http://www.baidu.com">
    </map>
</body>
</html>
</span>

注意: 由于加载图片是需要时间的，所以我们的建议是：慎用图片。

注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。