知识总结：
HTML图片：
HTML路径：
相对路径：相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。
绝对路径：HTML绝对路径(absolute path)指带域名的文件的完整路径。
<img >标签中的alt属性：
HTML超链接：
<a herf = " ">内容</a>
<a>标签中的属性介绍：
1. href:超链接地址，可以是内部链接，外部链接；href用来设置链接指向的页面的 URL。
2. target规定在何处打开链接文档。<a>标签的target属性一共有这几个值：_blank、_self、_top，还有一个特殊的framename，也就是在指定的框架中打开被链接文档。
其中：
_self：在当前窗口打开；
_blank：在新窗口打开；
_parent：在父框架集中打开被链接文档；
_top：在整个窗口中打开被链接文档。
3. title用title 属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。
4. name规定锚的名称。
HTML锚：
锚的作用是，目录同一页面或外部页面的跳转
HTML链接扩展功能：
实践代码：
项目1:电影链接
html文件1:
<!DOCTYPE html><html><head><title></title><meta charset="utf-8"></head><body><!--锚定义：锚的定义<a href="#锚名">，要搭配<a name="锚名">标签，才能准确跳转到name所在处--><pre>目录：<a href="#superman">超人</a> <a href="#batman">蝙蝠侠</a> <a href="#spiderman">蜘蛛侠</a> <a href="超人链接.html#superman">跳转超人播放链接</a><a href="">刷新页面</a> <a href="mailto:494637236@">反馈意见</a> <a href="img.zip">文件下载</a></pre><!--绝对路径：脚本在电脑中的绝对位置--><!--超链接分为：1.站内部链接：写相对路径；2.外部链接：写绝对路径--><!--相对路径：脚本和图片的相对位置；target属性_self打开链接在本窗口--><a href="超人链接.html" target="_self" name ="superman"><img src="/Users/zhangziwei/Desktop/超人.jpg"/></a><h2>超人电影</h2><p>克拉克·肯特（Clark Kent）即超人（Superman），是美国DC漫画旗下超级英雄，首次登场于《动作漫画》（Action Comics）创刊号（1938年6月），由杰瑞·西格尔（Jerry Siegel）和乔·舒斯特（Joe Shuste）联合创造。</p><p>克拉克·肯特原名卡尔-艾尔（Kal-El），出生于氪星（Krypton）。在氪星面临毁灭之际，他的父母将尚在襁褓中的卡尔用飞船送到了地球。飞船坠落在美国堪萨斯州的斯莫维尔（Smallville），卡尔被农场主肯特夫妇拾获，并以克拉克·肯特（Clark Kent）的地球名字抚养长大。 成人后，克拉克来到大都会（Metropolis），成为《星球日报》 的一名记者。他有着与生俱来的超能力和极强的正义感与同情心，每在危难时刻，便穿上蓝色紧身衣，披上红色斗篷，化身超人挺身而出，行侠仗义，拯救世人。在DC电影宇宙中，由亨利·卡维尔出演。</p><hr/><!--绝对路径：网址；target属性_blank打开链接在新窗口--><a href="/x/cover/1b117d3s47s9rwx.html" target="_blank" name="batman"><img src="蝙蝠侠.jpg" alt="蝙蝠侠图片" width="20%" height="30%"/></a><!--alt主要用于图片无法正常加载现实--><h2>蝙蝠侠电影</h2><p>布鲁斯·韦恩（Bruce Wayne）即蝙蝠侠（Batman），是美国DC漫画旗下超级英雄，初次登场于《侦探漫画》（Detective Comics）第27期（1939年5月），由鲍勃·凯恩（Bob Kane）和比尔·芬格（Bill Finger）联合创造，是漫画史上第一位没有超能力的超级英雄。布鲁斯·韦恩出生在哥谭市四大家族之一的韦恩家族中。一天晚上，父母带着年幼的布鲁斯看完电影《佐罗》回家，途经一条小径时遭遇歹徒抢劫。歹徒当着布鲁斯的面，枪杀了他的父母。</p><p>从此，布鲁斯便产生了亲手铲除罪恶的强烈愿望，为了不让其他人再遭受到与自己同样的悲剧，布鲁斯凭借过人天赋，用几十年时间游历世界各地，拜访东西方顶级或传说中的格斗大师，学习各流派格斗术。<p><p>后回到美国，利用强大的财力制造各种高科技装备。此后在白天，他是别人眼中的富二代、花花公子；夜晚，他是令罪犯闻风丧胆的黑暗骑士——蝙蝠侠（Batman）。 [1] 在DC电影宇宙中，由本·阿弗莱克饰演蝙蝠侠这个角色。</p><hr/><!--高度和宽度可以用：1.使用%表示数据，相对的是父元素；2.像素表示：px,固定大小的像素--><a name="spiderman"></a><!--锚定位，不一定要依赖于文字或者图片，可以单独存在--><img src="蜘蛛侠.jpg"/ width="100px" height="80px"><a href="#" title="超凡蜘蛛侠第一部"><h2>蜘蛛侠电影</h2></a><p>蜘蛛侠（Spider-Man）是美国漫威漫画旗下超级英雄，由编剧斯坦·李和画家史蒂夫·迪特科联合创造，初次登场于《惊奇幻想》（Amazing Fantasy）第15期（1962年8月），因为广受欢迎，几个月后，便开始拥有以自己为主角的单行本漫画。他本名彼得·本杰明·帕克（Peter Benjamin Parker），是住在美国纽约皇后区的一名普通高中生，由于被一只受过放射性感染的蜘蛛咬伤，因此获得了蜘蛛一样的超能力，后自制了蛛网发射器，化身蜘蛛侠（Spider-Man）守卫城市。</p><p>这是美国漫画第一次以一个青少年为主角，在之前的漫画作品里他们一般是充当超级英雄的助手角色。这在当时是一个突破，也让那些年轻读者很容易产生共鸣。身为一个青少年，彼得除了面对那些超级英雄该肩负的责任，同时也必须应付一些青春期时普遍会遇到的麻烦。同时，在一系列漫画作品中，蜘蛛侠也在成长，从一个害羞的高中生到一个苦恼但外向的大学生，接着并结婚而且成为了自己高中母校的老师，并成为了超级英雄战队复仇者联盟的一员。</p><!--空链接用#--><!--title属性后面的字，当鼠标停止在超链接上几秒后，会显示提示内容--></body></html>
html文件2:
<!DOCTYPE html><html><head><title></title><meta charset="utf-8"></head><body><img src="超人.jpg"/ width="100px" height="80px"><!--对文字加超链接--><a href="/x/cover/ahb2n3kymwj15zn.html" name ="superman"><h2>超人电影链接</h2></a></body></html>
运行效果：
项目2，锚跳转项目：
1. 同页跳转
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><title></title></head><body><dl><dt><a name="top">这里是顶部</a</dt>><dd><a href="Hello.html#friut">水果</a></dd><dd><a href="Hello.html#vegetable">蔬菜</a></dd><dd><a href="Hello.html#sports">运动</a></dd></dl><a name="friut"><h1>水果</h1></a><ul type="dics"><li>香蕉 </li><li>苹果 </li><li>葡萄 </li><li>梨</li><li>西瓜</li><li>樱桃</li><li>菠萝</li><li>橙子</li><li>柚子</li><li>芒果</li></ul><a href="#top"><p>返回顶部</p></a><a name="vegetable"><h1>蔬菜</h1></a><ul type="dics"><li>西红柿</li><li>黄瓜</li><li>土豆</li><li>芹菜</li><li>蒜苔</li><li>西葫芦</li><li>香菇</li><li>菠菜</li><li>豆角</li><li>油菜</li></ul><a href="#top"><p>返回顶部</p></a><a name="vegetable"><h1>运动</h1></a><ul type="dics"><li>跑步</li><li>跳绳</li><li>乒乓球</li><li>羽毛球</li><li>蒜苔</li><li>足球</li><li>篮球</li><li>游泳</li><li>跳远</li><li>跳高</li><li>排球</li></ul><a href="#top"><</body></html>
运行效果：
2. 锚转页跳转：
目录.html
<!doctype html><head><meta charset="UTF-8" /><title></title></head><body><dl><dt><a name="menu">目录</a</dt>><dd><a href="菜单.html#friut">水果</a></dd><dd><a href="菜单.html#vegetable">蔬菜</a></dd><dd><a href="菜单.html#sports">运动</a></dd></dl></body></html>
菜单.html
<!doctype html><head><meta charset="UTF-8" /><title></title></head><body><a name="friut"><h1>水果</h1></a><ul type="dics"><li>香蕉 </li><li>苹果 </li><li>葡萄 </li><li>梨</li><li>西瓜</li><li>樱桃</li><li>菠萝</li><li>橙子</li><li>柚子</li><li>芒果</li></ul><a href="目录.html#menu"><p>返回目录</p></a><br/><br/><br/><br/><br/><br/><br/><br/><br/><a name="vegetable"><h1>蔬菜</h1></a><ul type="dics"><li>西红柿</li><li>黄瓜</li><li>土豆</li><li>芹菜</li><li>蒜苔</li><li>西葫芦</li><li>香菇</li><li>菠菜</li><li>豆角</li><li>油菜</li></ul><a href="目录.html#menu"><p>返回目录</p></a><br/><br/><br/><br/><br/><br/><br/><br/><br/><a name="sports"><h1>运动</h1></a><ul type="dics"><li>跑步</li><li>跳绳</li><li>乒乓球</li><li>羽毛球</li><li>蒜苔</li><li>足球</li><li>篮球</li><li>游泳</li><li>跳远</li><li>跳高</li><li>排球</li></ul><a href="目录.html#menu"><p>返回目录</p></a><br/><br/><br/><br/><br/><br/><br/><br/><br/></body></html>
