html中链接的使用方法及介绍

html 超链接：

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

• 一个未访问过的链接显示为蓝色字体并带有下划线
• 访问过的链接显示为紫色并带上下划线
• 点击链接时，链接显示为红色并带上下划线

html语法：

<a href="url">链接文本</a>

href 表示链接的目标

<a href="http://www.runoob.com/">访问菜鸟教程</a>

表示这句可以带到菜鸟教程的网页，并且链接文本不一定是文字，可以是图片或者html元素

*targt属性，可以使链接在任意窗口打开，

<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a>

上面语法是链接在新窗口打开该网页

ID属性

id属性可用于创建在一个HTML文档书签标记。

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

<a href="http://www.runoob.com/html-links.htm#tips">
访问有用的提示部分</a>

 

图片链接

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

语法

<img src="url" alt="some_text">

scr 是源属性

URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

alt  替换文本   在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

当连接图片时分为绝对路径和相对路径；

相对路径 即在同一个目录里；直接引用文件名即可，

假设info.HTML路径是：d: omcatwebappshellolablainfo.HTML 
假设index.HTML路径是：d: omcatwebappshellolablaindex.HTML 
在info.HTML加入index.HTML超链接的代码应该这样写：

 

代码如下:

 

<a href = "index.HTML">index.HTML</a>  直接写出文件名即可

如何表示上级目录 
../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。 

假设info.HTML路径是：d: omcatwebappshellolablainfo.HTML 
假设index.HTML路径是：d: omcatwebappshelloindex.HTML 
在info.HTML加入index.HTML超链接的代码应该这样写：     如果被插入文件的目录要多一级时，插入文件时需要用../表示返回上一即目录。

 

代码如下:

<a href = "../index.HTML">index.HTML</a> 

 

假设info.HTML路径是：d: omcatwebappshellolablawowstoryinfo.HTML 
假设index.HTML路径是：d: omcatwebappshelloindex.HTML 
在info.HTML加入index.HTML超链接的代码应该这样写： 

 

代码如下:

<a href = "../../index.HTML">index.HTML</a> 

假设info.HTML路径是：d: omcatwebappshellolablainfo.HTML 
假设index.HTML路径是：d: omcatwebappshellowowstoryindex.HTML 
在info.HTML加入index.HTML超链接的代码应该这样写：   如果上一级目录不同则需要返回同一级后再表示出不同的目录

 

代码如下:

<a href = "../wowstory/index.HTML">index.HTML</a> 

 

*引用下级目录的文件，直接写下级目录文件的路径即可。 

假设info.HTML路径是：d: omcatwebappshellolablainfo.HTML 
假设index.HTML路径是：d: omcatwebappshellolablaHTMLindex.HTML 
在info.HTML加入index.HTML超链接的代码应该这样写： 

 

代码如下:

<a href = "HTML/index.HTML">index.HTML</a> 直接写出目录相同时的目录即可

 

假设info.HTML路径是：d: omcatwebappshellolablainfo.HTML 
假设index.HTML路径是：d: omcatwebappshellolablaHTML utorialsindex.HTML 
在info.HTML加入index.HTML超链接的代码应该这样写： 

 

代码如下:

<a href = "HTML/tutorials/index.HTML">index.HTML</a> 

 

绝对路径， 即从网页中通过域名找到的文件，即带域名的完整文件类型

               当你注册域名时，并且申请一个虚拟主机，这时候便会给一个目录，则这个目录就是文件的根目录，再在这个根目录下放一个文件，则这个文件的路径就是域名加上文件名。

例：

     假设在www根目录下放了一个文件index.HTML，这个文件的绝对路径就是： http://www.jb51.net/index.html. 

     假设在www根目录下建了一个目录叫HTML_tutorials，然后在该目录下放了一个文件index.HTML，这个文件的绝对路径就是http://www.jb51.net/article/32759.htm。

*当存放图片时需要注意的格式：png，jpg，gif，svg，ico

png：       

PNG是目前保证最不失真的格式，它汲取了GIF和JPG二者的优点，存贮形式丰富，兼有GIF和JPG的色彩模式；它的另一个特点能把图像文件压缩到极限以利于网络传输，但又能保留所有与图像品质有关的信息，因为PNG是采用无损压缩方式来减少文件的大小，这一点与牺牲图像品质以换取高压缩率的JPG有所不同；它的第三个特点是显示速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像；第四，PNG同样支持透明图像的制作，透明图像在制作网页图像的时候很有用，我们可以把图象背景设为透明，用网页本身的颜色信息来代替设为透明的色彩，这样可让图像和网页背景很和谐地融合在一起。

PNG的缺点是不支持动画应用效果，如果在这方面能有所加强，简直就可以完全替代GIF和JPEG了

 

svg             

SVG是矢量图形。它是基于XML（Extensible Markup Language），严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有互交功能，并可以随时插入到HTML中通过浏览器来观看。

它提供了目前网络流行格式GIF和JPEG无法具备了优势：可以任意放大图形显示，但绝不会以牺牲图像质量为代价；字在SVG图像中保留可编辑和可搜寻的状态；平均来讲，SVG文件比JPEG和GIF格式的文件要小很多，因而下载也很快。

ipg/jpng      最适合于使用真彩色或平滑过渡式的照片和图片。该格式使用有损压缩来减少图片的大小，因此用户将看到随着文件的减小，图片的质量也降低了，当图片转换成.jpg文件时，图片中的透明区域将转化为纯色。

gif             

GIF（图形交换格式）最适合用于线条图（如最多含有256色）的剪贴画以及使用大块纯色的图片。该格式使用无损压缩来减少图片的大小，当用户要保存图片为.GIF时，可以自行决定是否保存透明区域或者转换为纯色。同时，通过多幅图片的转换，GIF格式还可以保存动画文件。但要注意的是，GIF最多只能支持256色

目前，网页上较普遍使用的图片格式为gif 和 jpg(jpeg)这两种图片压缩格式，因其在网上的装载速度很快，所有较新的图像软件都支持 GIF 、 JPG 格式，因此，要创建一张 GIF 或 JPG 图片，只需将图像软件中的图片保存为这两种格式即可。

 

ico       

图标有一套标准的大小和属性格式，且通常是小尺寸的。每个图标都含有多张相同显示内容的图片，每一张图片具有不同的尺寸和发色数。一个图标就是一套相似的图片，每一张图片有不同的格式。从这一点上说图标是三维的。图标还有另一个特性：它含有透明区域，在透明区域内可以透出图标下的桌面背景。在结构上图标其实和麦当劳的巨无霸汉堡差不多。

一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。

 

一般静态图片可使用.png保存

可设置高度和宽度

height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

  注意： 可根据align=“”来设置图片的位置，与文字顶对齐或是在文字中间，一般情况下默认为与文字底对齐。

            可根据style="float:right/left来设置图片浮动。若不设置浮动时一般在文字左边。

例：

<!DOCTYPE html>
<html>
<body>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> A paragraph with an image. The image will float to the left of this text.
</p>

</body>
</html>

即，该所插图片就在A paragraph with an image. The image will float to the left of this text.这句话的左边

创建图片超链接

<!DOCTYPE html>
<html>
<body>

<p>点击太阳或其他行星，注意变化：</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

即当你点击图片内容时，会在新窗口打开一张图片，利用map和area元素，

<img>定义图片

<map>定义图片地图

<area>定义图片可点击的地方