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:\tomcat\webapps\hello\blabla\info.HTML假设index.HTML路径是：d:\tomcat\webapps\hello\blabla\index.HTML在info.HTML加入index.HTML超链接的代码应该这样写：
代码如下:
<a href = "index.HTML">index.HTML</a>直接写出文件名即可
如何表示上级目录../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。假设info.HTML路径是：d:\tomcat\webapps\hello\blabla\info.HTML假设index.HTML路径是：d:\tomcat\webapps\hello\index.HTML在info.HTML加入index.HTML超链接的代码应该这样写： 如果被插入文件的目录要多一级时，插入文件时需要用../表示返回上一即目录。
代码如下:
<a href = "../index.HTML">index.HTML</a>
假设info.HTML路径是：d:\tomcat\webapps\hello\blabla\wowstory\info.HTML假设index.HTML路径是：d:\tomcat\webapps\hello\index.HTML在info.HTML加入index.HTML超链接的代码应该这样写：
代码如下:
<a href = "../../index.HTML">index.HTML</a>
假设info.HTML路径是：d:\tomcat\webapps\hello\blabla\info.HTML假设index.HTML路径是：d:\tomcat\webapps\hello\wowstory\index.HTML在info.HTML加入index.HTML超链接的代码应该这样写：如果上一级目录不同则需要返回同一级后再表示出不同的目录
代码如下:
<a href = "../wowstory/index.HTML">index.HTML</a>
*引用下级目录的文件，直接写下级目录文件的路径即可。假设info.HTML路径是：d:\tomcat\webapps\hello\blabla\info.HTML假设index.HTML路径是：d:\tomcat\webapps\hello\blabla\HTML\index.HTML在info.HTML加入index.HTML超链接的代码应该这样写：
代码如下:
<a href = "HTML/index.HTML">index.HTML</a>
直接写出目录相同时的目录即可
假设info.HTML路径是：d:\tomcat\webapps\hello\blabla\info.HTML假设index.HTML路径是：d:\tomcat\webapps\hello\blabla\HTML\tutorials\index.HTML在info.HTML加入index.HTML超链接的代码应该这样写：
代码如下:
<a href = "HTML/tutorials/index.HTML">index.HTML</a>
绝对路径， 即从网页中通过域名找到的文件，即带域名的完整文件类型
当你注册域名时，并且申请一个虚拟主机，这时候便会给一个目录，则这个目录就是文件的根目录，再在这个根目录下放一个文件，则这个文件的路径就是域名加上文件名。
例：假设在www根目录下放了一个文件index.HTML，这个文件的绝对路径就是：
假设在www根目录下建了一个目录叫HTML_tutorials，然后在该目录下放了一个文件index.HTML，这个文件的绝对路径就是
*当存放图片时需要注意的格式：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>定义图片可点击的地方
