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

HTML+CSS基础笔记——链接与图像篇

2017-03-25 14:55 435 查看

前言：

html链接：其实就是关于<a>标签及其属性的一些用法。

html图像：一般我们常用的是插入图片、将图片设为背景、将图片作为链接。

HTML链接：

一、给文字和图片添加超链接：

超链接要用到href属性。
1、为文字添加链接到另一个网页页面或另外的html文件：
①链接到网页：

<html>
<head>
<title>为文字添加链接到网页</title>
</head>
<body>
<p>
<a href="http://blog.csdn.net/CatherineAnya">我的博客</a>
</p>
</body>
</html>

②链接到另外的html文件：

<html>
<head>
<title>链接到另外的html文件</title>
</head>
<body>
<p>
<a href="Link.html">html文件</a>
</p>
</body>
</html>

2、为图片添加链接到另一个网页页面：
图片地址要用到src属性。注意：<img />标签是单标签，不要忘了' / '。

<html>
<head>
<title>为图片添加链接</title>
</head>
<body>
<p>
<a href="http://blog.csdn.net/CatherineAnya"><img src="picture.png" /></a>
</p>
</body>
</html>

二、超链接的打开方式：

打开方式要用到target属性。
1、在本页打开(覆盖本页)：(默认方式) target属性值是：_self

<html>
<head>
<title>本页覆盖</title>
</head>
<body>
<p>
<a href="http://blog.csdn.net/CatherineAnya" target="_self">我的博客</a>
</p>
</body>
</html>

2、在新窗口打开：target属性值是：_blank

<html>
<head>
<title>新窗口打开</title>
</head>
<body>
<p>
<a href="http://blog.csdn.net/CatherineAnya" target="_blank">我的博客</a>
</p>
</body>
</html>

三、为超链接添加提示文字：

提示文字要用到title属性：

<html>
<head>
<title>添加提示文字</title>
</head>
<body>
<p>
<a href="http://blog.csdn.net/CatherineAnya" title="跳转到博客">我的博客</a>
</p>
</body>
</html>

四、超链接实现书签：

锚(anchor)：用于在单个页面内不同位置的跳转。
有锚就要用到name属性。注意：不要忘记下面的' # '。

<html>
<head>
<title>书签</title>
</head>
<body>
<p>
<a href="#跳转目的地的名称">跳转起始字符</a>
</p>
<h1>
<a name="跳转目的地的名称">跳转目的地字符</a>
</h1>
</body>
</html>

五、使用mailto在网页中链接email地址：

访问者可以便捷的向网站管理者发送电子邮件：

<html>
<head>
<title>用mailto发送电子邮件</title>
</head>
<body>
<p>
<a href="mailto:管理者邮箱">发送邮件</a>
</p>
</body>
</html>

mailto还可以做许多其他事情：(图片来自慕课网)

注意：如果mailto后面同时有多个关键字的话，第一个关键字必须以' ?'开头，后面的关键字每一个都以' &'分隔。

HTML图像：

一、插入图片：

插入图片需要用到<img />标签和src属性。

1、调整图片的对齐方式，需要用到align属性。
对齐方式有：①字体与图片底部对齐：align="bottom"(默认方式)；
②字体与图片顶部对齐：align="top"；
③字体与图片中部对齐：align="middle"；
④相对字体左右对齐有left、right(默认方式)。

2、调整图片尺寸，需要用到width属性和height属性。
如：

<html>
<head>
<title>插入图片</title>
</head>
<body>
<p>
<img src="路径+文件名" align="对齐方式" width="宽度" height="高度" />
</p>
</body>
</html>

二、将图片设为背景：

设背景需要background属性。

<html>
<head>
<title>设图片为背景</title>
</head>
<body background="路径+文件名">
<p>......</p>
</body>
</html>

三、将图片作为链接：

上面的HTML链接中已经提到一种常用方法，这里不再赘述。

第二种方法是创建图像映射：可以在一张图片上创建带有可以点击的区域，称为图像地图；每个区域都是一个超链接。
需要用到<map>标签、<area>标签、usemap属性、name属性、s
4000
hape属性、coords属性、href属性、id属性(可省略)、还可以添加target属性。

<html>
<head>
<title>图像映射</title>
</head>
<body>
<p>
<img src="路径+文件名" usemap="#图片名" />
<map name="图片名" id="图片名">
<area shape="形状" coords="坐标" href="链接地址" target="打开方式"></area>
</map>
</p>
</body>
</html>

注意：一个<area>...</area>元素映射一个区域。

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

标签： html css

相关文章推荐

新的分享

章节导航