HTML之五:插入图片与超链
原创
©著作权归作者所有:来自51CTO博客作者Diesel的原创作品,请联系作者获取转载授权,否则将追究法律责任
HTML之五:超链接与图像插入
网页中有很多文字都有链接,当指针变小手时,点击便会连接到另一个网页。网页中也有很多图片来装饰。下面说说图片插入与超链接。
图像插入:
<img src=”图像文件地址” /> 当然还有很多属性:alt width height border vspace hspace align 。所表示的意思以及属性值分别是:alt=”当指向图片时显示的文字”, width=”” height=””分别设置图片的宽度和高度,border=””设置图片的边框,默认值为1.,vspace hspace分别设置图片的垂直边距、水平边距,align=””的属性值为middle left right top bottom,分别表示为居中、居左、居右、居上、居下。示例如下:
<html>
<head>
<title></title>
</head>
<body>
<img src="wolf.jpg" border="2" align="middle" alt="月亮和狼"/>
</body>
</html>
图片说明:显示你所要插入的图片,边框为2像素,当指向图片不动时,便显示“月亮和狼”四个字。
超链接:
<a href=””></a>,把想设置连接的东东加入其中就可以了。 其他属性:title指向链接显示的文字。target打开方式,属性值:-blank –self –top –parent,分别是新打开一个窗口、自身打开、同一窗口上方框架打开、本身所在主框架打开。name特定位置名称标记。示例如下:
<html>
<head>
<title></title>
</head>
<body>
<a href="wolf.jpg">狼的图片</a>
</body>
</html>
图片如下:(点击便会进入设置链接的图片)
图片和超链接都会了,那么给图片加超链接就很easy了。示例如下:
<html>
<head>
<title></title>
</head>
<body>
<a href="wolf.jpg" target="-blank"><img src="wolf.jpg" /></a>
</body>
</html>
图片说明:用img设置的图片便会出现在网页中,指向时显示小手状,点击出现你要链接的图片。
下面说说锚点,锚点:就是网页中一个位置,这个位置你自己指定、命名。我们用<a name=””></a>来创建锚点。但必须结合<a href=””></a>使用才有效果哦。href属性赋的值若是标签的名字,必须在前面加一个“#”。比如网页中看电子书,一个网页中纵向的列出了一百多章节,必须向下翻很多页才能看到第九十九章。这是我们可以给第九十九章一个name(名字),再用href=”#name”就可以直接转到第九十九章。示例如下:(我们先定义锚点,然后再链接。)
<html>
<head>
<title></title>
</head>
<body>
<a href="#99">转到第99章</a>
<br>
第1章<br>第2章<br>.........<a name="99">第99章</a> <br>第100章<br>.........
</body>
</html>
图片如下:
图片说明:点击“转到第99章”就会转到99章,如图所示:
上一篇:HTML之四:段落
下一篇:HTML之六:图像的热区连接
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
img标签插入图片下方有空隙,怎么解决?
页面中的img标签插入图片后,与下方元素有空隙,有什么快速解决的方法呢?
css 静态页面 插入图片 img