【前端学习整理】HTML(2):跳转链接:a标签的作用和用图片跳转链接

如何在一个页面进行到另一个页面的跳转呢

  • a标签的使用
  • HTML图像和图像映射

a标签的使用


<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="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>
   			
   			<a href="http://www.baidu.com" target="_top">跳出框架a>
   			
   		
   		<h2>跳转到页面指定部分h1>
   			<p>
   				<a href="#C4">查看章节 4a>
   				
   			p>

   			<h2>章节 1h2>
   			<p>这边显示该章节的内容……p>

   			<h2>章节 2h2>
   			<p>这边显示该章节的内容……p>

   			<h2>章节 3h2>
   			<p>这边显示该章节的内容……p>

   			<h2><a id="C4">章节 4a>h2>
   			
   			<p>这边显示该章节的内容……p>

   			<h2>章节 5h2>
   			<p>这边显示该章节的内容……p>

   			<h2>章节 6h2>
   			<p>这边显示该章节的内容……p>
   			<a href="http://www.runoob.com/html/html-links.html#tips">访问有用的提示部分a>
   			
   		
   		<h2>使用a标签发送邮件h2>
   			<p>使用a标签发送邮件要使用关键字:mailtop>
   			<a href="mailto:[email protected]?subject=这是邮件的主题&body=这是邮件的内容" rel="nofollow">发送邮件a>
   			
   			<a href="mailto:[email protected][email protected];[email protected][email protected]&subject=这是邮件的主题&body=这是邮件的内容" rel="nofollow">抄送邮件a>
   				
   body>
html>

以上内容可以直接用html格式文件在浏览器上运行。

笔记

1.超文本链接在页面中的显示默认为:
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时,链接显示为红色并带有下划线。
可以为超链接设置 CSS 样式,展示样式会根据 CSS 的设定而显示。

2.发送邮件的参数说明
mailto:[email protected] 邮件接收地址
[email protected] 抄送地址
[email protected] 密件抄送地址
subject=subject text 邮件主题
body=body text 邮件内容
? 第一个参数分隔符
& 其他参数分隔符

3.抄送和密件抄送
抄送:
英文名称:Carbon Copy,又简称为 CC。
在网络术语中,抄送就是将邮件同时发送给收信人以外的人,用户所写的邮件抄送一份给别人,对方可以看见该用户的 E-mail。
同收件人地址栏一样,不可以超过 1024 个字符。一般来说,使用"抄送"服务时,多人抄送的电子邮件地址使用 ; 分隔。
密件抄送:
英文名称:Blind Carbon Copy ,又称“盲抄送”,和抄送的唯一区别就是它能够让各个收件人无法查看到这封邮件同时还发送给了哪些人。
密件抄送是个很实用的功能,假如一次向成百上千位收件人发送邮件,最好采用密件抄送方式,
这样一来可以保护各个收件人的地址不被其他人轻易获得,二来可以使收件人节省下收取大量抄送的 E-mail 地址的时间。

4.nofollow
nofollow 是 HTML 页面中 a 标签的属性值。这个标签的意义是告诉搜索引擎"不要追踪此网页上的链接或不要追踪此特定链接"。
它的出现为网站管理员提供了一种方式,即告诉搜索引擎"不要追踪此网页上的链接"或"不要追踪此特定链接"。
这个标签的意义是告诉搜索引擎这个链接不是经过作者信任的,所以这个链接不是一个信任票。

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 src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2357999079,367187704&fm=27&gp=0.jpg" alt="火影忍者第七班" width="500" height="323" usemap="#map">
		
		<map name="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="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>

这样一来就可以使用图片或图片某一区域进行页面跳转啦

你可能感兴趣的:(HTML,前端入门,页面跳转)