WEB前端：(3)HTML5②超链接及页面内跳转

@html5图像及路径

<img src="images/fruit.jpg" alt="水果显示不出来时你就只好看我啦..." width="800" height="375" align="bottom">

• src和alt称之为标签属性
• src是图片路径,这里用的是相对路径
• 相对路径用 ./代表当前文件夹，../代表上一级文件夹，当前路径是可以省略的

alt是图片加载失败（比如地址错误或没有网等等）时的替代方案

---

@超链接

文字超链接

<a>标签：<a></a>里面有3个属性

eg：<a href="http://www.baidu.com" title="跳转到百度的网站" target="_blank">新页面打开百度</a>

• herf ：链接到的地址
• title：鼠标覆盖时的提示文字，所有的标签都能设置title
• target：target="_self"   在当前页面打开链接      target="_blank"  在新页面打开链接

图片超链接

<a>标签内部没有放简单的文字，而是放了一张图片路径，点击图片会跳转到链接网页

eg：<a href="http://www.google.cn" title="谷歌一下，你就知道的太多了..."> <img src="images/logo.png" alt="im logo"> </a>

---

@页面内跳转

biaoti01 叫做锚记 通过点击锚记进行页面内跳转

top锚记代表页面的顶部，不需要声明

<!--任何一个标签都可以有id属性-->

<h1 id="biaoti01">久旱逢甘露</h1>

<!--跳转到id为xxx的地方--> 

<a href="#biaoti01">标题一</a> 

<a href="#biaoti02">标题二</a>

<a href="#biaoti03">标题三</a> 

<a href="#biaoti04">标题四</a>



<h1 id="biaoti02">他乡遇故知</h1>

<!--跳转到id为xxx的地方--> 

<a href="#biaoti01">标题一</a> 

<a href="#biaoti02">标题二</a>

<a href="#biaoti03">标题三</a> 

<a href="#biaoti04">标题四</a>