如何在一个页面进行到另一个页面的跳转呢
a标签的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a标签</title>
</head>
<body>
<h1>a标签</h1>
<h2>如何使用a标签跳转</h2>
<a href="http://www.baidu.com">跳转</a>
<!-- a标签设置超文本链接，点击链接可以从一张页面跳转到另一张页面 使用href属性描述链接的地址-->
<a href="http://www.baidu.com">一句话</a>
<a href="http://www.baidu.com"><img src="../img/seven.jpg" alt="第七班"></a>
<!-- 超链接可以是一个字、一个词、一句话、或一张图片。 -->
<a href="http://www.baidu.com" target="_blank">打开新窗口跳转</a>
<!-- 使用target属性定义跳转的链接在何处显示，此处_blank定义在新窗口打开页面 -->
<a href="http://www.baidu.com" target="_top">跳出框架</a>
<!-- 此处_top定义在本窗口打开新页面 -->
<h2>跳转到页面指定部分</h1>
<p>
<a href="#C4">查看章节 4</a>
<!-- 在href中使用“#”+“定义id名”跳转到指定部分 -->
</p>
<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>
<h2><a id="C4">章节 4</a></h2>
<!-- id属性可用于创建在一个HTML文档书签标记。 -->
<p>这边显示该章节的内容……</p>
<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 6</h2>
<p>这边显示该章节的内容……</p>
<a href="http://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>
<!-- 在跳转的链接后面增加书签标记可以跳到该网页的指定部分 -->
<h2>使用a标签发送邮件</h2>
<p>使用a标签发送邮件要使用关键字：mailto</p>
<a href="mailto:dreammx@163.com?subject=这是邮件的主题&body=这是邮件的内容" rel="nofollow">发送邮件</a>
<!--这样会调启系统默认的邮件程序发送给 dreammx@163.com，并且收件人那里已经填上了我邮箱的地址。-->
<a href="mailto:dreammx@163.com?cc=someoneelse@example.com;991453933@qq.com&bcc=andsomeoneelse@example.com&subject=这是邮件的主题&body=这是邮件的内容" rel="nofollow">抄送邮件</a>
<!--关于创建电子邮件链接时如何进行抄送，密送.
在进行抄送时，需要使用关键字：cc
在进行密送时，需要使用关键字：bcc -->
</body>
</html>
以上内容可以直接用html格式文件在浏览器上运行。
笔记
1.超文本链接在页面中的显示默认为：
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
可以为超链接设置 CSS 样式，展示样式会根据 CSS 的设定而显示。
2.发送邮件的参数说明
mailto:name@email.com 邮件接收地址
cc=name@email.com 抄送地址
bcc=name@email.com 密件抄送地址
subject=subject text 邮件主题
body=body text 邮件内容
? 第一个参数分隔符
& 其他参数分隔符
3.抄送和密件抄送
抄送：
英文名称：Carbon Copy，又简称为 CC。
在网络术语中，抄送就是将邮件同时发送给收信人以外的人，用户所写的邮件抄送一份给别人，对方可以看见该用户的 E-mail。
同收件人地址栏一样，不可以超过 1024 个字符。一般来说，使用"抄送"服务时，多人抄送的电子邮件地址使用 ; 分隔。
密件抄送：
英文名称：Blind Carbon Copy ，又称“盲抄送”，和抄送的唯一区别就是它能够让各个收件人无法查看到这封邮件同时还发送给了哪些人。
密件抄送是个很实用的功能，假如一次向成百上千位收件人发送邮件，最好采用密件抄送方式，
这样一来可以保护各个收件人的地址不被其他人轻易获得，二来可以使收件人节省下收取大量抄送的 E-mail 地址的时间。
4.nofollow
nofollow 是 HTML 页面中 a 标签的属性值。这个标签的意义是告诉搜索引擎"不要追踪此网页上的链接或不要追踪此特定链接"。
它的出现为网站管理员提供了一种方式，即告诉搜索引擎"不要追踪此网页上的链接"或"不要追踪此特定链接"。
这个标签的意义是告诉搜索引擎这个链接不是经过作者信任的，所以这个链接不是一个信任票。
HTML图像和图像映射
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML图像</title>
</head>
<body>
<img src="http://www.runoob.com/try/demo_source/smiley.gif" alt="Smiley face" width="32" height="32"></p>
<img src="http://www.runoob.com/try/demo_source/hackanm.gif" alt="Computer man" width="48" height="48"></p>
<!--<img>为插入图像标签，只要是支持的图片格式都可以显示在HTML页面中，源属性src 指 "source"。源属性的值是图像的 URL 地址。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
alt 属性用来为图像定义一串预备的可替换的文本。
不能排除意外情况导致图片无法正常显示，为了便于用户理解，图片无法显示时显示alt中的内容来告诉用户这里的图片内容
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
给图片添加宽度与高度属性是个好习惯，页面加载时会保留指定的尺寸，不会导致意外破坏HTML页面整体布局。
还便于seo优化，方便搜索引擎提前知道图片的大小便于查找-->
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2357999079,367187704&fm=27&gp=0.jpg" alt="火影忍者第七班" width="500" height="323" usemap="#map">
<!-- usemap属性为img创建图像映射,可以点击图片某区域进行链接跳转 属性值为'#'+对应map标签的name名称 -->
<map name="map">
<!-- 使用map标签来与需要创建图像映射的图片进行对应 -->
<area shape="rect" coords="10,90,181,321" alt="佐助" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551268239651&di=f9308598e54bd3318aabf1f24e4cb507&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201602%2F12%2F20160212091349_jZiNW.jpeg">
<!-- area标签创建一个图像映射，shape属性指定图像映射区域的形状(rect为矩形，circle为圆形,多边形为poly)，coords指定坐标系。
圆形使用x，y指定圆心第三个参数为半径r，例如coords='x,y,r'；
多边形指定各顶点坐标(x1,y1)、(x2,y2)、(x3,y3)......-->
<area shape="circle" coords="245,66,60" href="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3608738157,4239382776&fm=27&gp=0.jpg" alt="卡卡西">
</map>
</body>
</html>
这样一来就可以使用图片或图片某一区域进行页面跳转啦
6095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
