HTML：图片，超链接，锚链接

知识总结：

HTML图片：

HTML路径：

相对路径：相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。

绝对路径：HTML绝对路径(absolute path)指带域名的文件的完整路径。

<img >标签中的alt属性：

HTML超链接：

<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@qq.com">反馈意见</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="https://v.qq.com/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="https://v.qq.com/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>

HTML：图片，超链接，锚链接相关推荐

前端(一)——HTML之基本标签、图片标签、超链接、锚链接
文章目录 1. 定义 2. 发展史及优势 2.1 发展史 2.2 优势 3. W3C标准 4. HTML的基本结构 5. 网站的基本标签 5.1 标题标签 5.2 段落标签 5.3 水平线标签 5.4 ...
HTML超链接、锚链接
超链接和锚链接的区别,就是超链接需要跳砖页面:锚链接不需要,在同一页面中跳转到某个位置. 不管是超链接,还是锚链接,都是用a元素. 超链接:超链接的使用就是在href中加入网址,如果是图片超链接就是在 ...
超链接的应用——锚链接
锚链接常用于目标页内容很多,需定位到目标页内容中的某个具体位置时.例如网上常见的某个学习教程,当单击教程的章节目录时,将跳到应对章节的内容介绍处. 实现从A页面的甲位置中转到本页中的乙位置,步骤如下: ...
什么是HTML超链接？锚链接？
什么是HTML超链接?锚链接? HTML超链接 1.超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分. 当把鼠标指针移动到网页中的某 ...
herf(超链接、锚链接)
HTML style="color: brown; font-family: 正体; font-size: xx-large; font-weight: bolder;" href ...
置顶图片代码加链接html,css图片怎么加链接？
css可以通过在图片前加标签实现为图片加链接,语法:.使用此方法引入图片即可为图片添加链接. 设定图片超链接,用css样式来实现,其实就是给这个图片的块添加超链接,我们可以通过在这个块的前面添加一个a ...
html中锚链接作用和特点,HTMLa标签作为锚链接
1. 什么是锚链接? 标签主要作为超链接和锚链接使用.超链接主要指不同html页面之间的跳转,而锚链接指的是同一页面之间的跳转. 锚链接的两种效果: 在当前页面中跳转.:通过元素的ID进行跳转网页中 ...
003图片，超级链接及其它
一.图片标签 1.1.图片标签及属性 img:img是行内标签,用来显示一张图片.主要的3个属性:src.alt.title. src:指定图片的路径(必选)source的意思,读音:[sɔːrs] ...
html和css的图片怎么加,css图片怎么加链接？
css可以通过在图片前加标签实现为图片加链接,语法:.使用此方法引入图片即可为图片添加链接. 设定图片超链接,用css样式来实现,其实就是给这个图片的块添加超链接,我们可以通过在这个块的前面添加一个a ...
figma button_如何在Figma中创建锚链接
figma button Anchor Links aren't the most exciting interaction to design, but they are a crucial des ...

HTML：图片，超链接，锚链接

HTML：图片，超链接，锚链接相关推荐

最新文章

热门文章