HTML——链接&图像

一、链接

1.新页面打开链接

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

2.本页面，name为"C4"处打开链接

<p>
<a href="#C4">查看 Chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

3.跳出框架

<a href="/index.html"
target="_top">请点击这里！</a>

4.发送邮件链接

<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>

5.复杂的邮件链接

<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>

　　

二、图像

1.图片背景

<body background="/i/eg_background.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p>
</body>

2.图片位置

文本中位置：bottom(默认)、middle、top

段落中浮动：left、right

<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>

3.图片替换文本

<img src="/i/eg_goleft123.gif" alt="向左转" />

4.图片链接　　

<a href="/example/html/lastpage.html">
　　<img border="0" src="/i/eg_buttonnext.gif" />
</a>

5.创建图像映射

img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），

所以我们同时向 map 元素添加了 "id" 和 "name" 属性

map该name元素，获取图片圆形区域，添加链接。

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

</map>

6.把图像转换为图像映射

<p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p>
<a href="/example/html/html_ismap.html">
<img src="/i/eg_planets.jpg" ismap />
</a>

图像标签：　　

<img> 定义图像。
<map> 定义图像地图。
<area> 定义图像地图中的可点击区域

　　

　　

　　

　　

posted @ 2016-07-09 12:23  cysummery  阅读(387)  评论(0)  编辑  收藏  举报