html中的超链接与框架

最新推荐文章于 2024-06-17 21:54:59 发布

able陈

最新推荐文章于 2024-06-17 21:54:59 发布

阅读量4.6k

点赞数 2

分类专栏： html 文章标签： html超链接

本文链接：https://blog.csdn.net/qq_42330141/article/details/86725061

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

关于hyper reference的学习笔记
超链接主要分为两种：基于文本的超链接，和基于图片

1基于文字的超链接

<a href=“url">文本</ a>格式
这里就将文本设置为了超链接，而url就是你需要连接到的地址
这里设置超链接方式比较简单，主要就是需要了解url名词
url(uniform resourse locator)统一资源定位器
结构:http://www.artech.cn/study/index.htm
其中http://开头代表了使用的协议：HTTP协议(超文本链接协议)
www.artec.cn:代表了主机名（ip地址或者域名)
/study/index.htm锁定目标文件

相对于文档的url

(a href="…/sub/03.htm" )(此处使用‘（’代表‘<’）：代表了此文档的父文档下的sub文件夹下面的03.htm文件，起始的地址为当前的文件

相对于服务器的url

(a href="/02.htm."):代表了当前服务器下的根目录下的02.html文件

也可以在页面内部设置超链接

/*标准格式:<a href="#name">文本</a>点击超链接之后就会跳转到
<a href="name">文本</a>  的地方
*/
<p><a href="#first">第一本书</a>
<h3><a name="first">精通css+div网页样式与布局</a></h3>
<p>.....................</p>

此处的点击"第一本书"这个超链接就会跳转到"精通css+div网页样式与布局"实现页面内跳转

图片的超链接

类似于文字的超链接，这里只做简单的笔记

<a href=url><img="路径"></a>

邮件的超链接

可以把邮件的超链接看作是超链接的一种类型，是链接到邮箱的一种

<a href="mileto:邮箱地址">联系我们</a>
/*当然可以把文本换成图片*/

创建热区区域

<img src="路径" usemap="#Map1">
	<map name="Map1">
		<area shape="rect' coords="23,28,111,81">
		/*矩形，前两个代表了左上角的坐标，后两个代表了右下角的坐标*/
		<area shape="circle' coords="187,57,33">
		/*圆形，前两的代表了圆心的坐标，后一个代表了半径*/
		<area shape="poly' coords="241,12,31,23,12,141">
		/*多边形 类似*/

frame和frameset

使用框架结构，可以使得同一个页面分割成为独立的多个窗口，同时，窗口之间可以相互联系

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>frame框架的复习</title>
</head>
<frameset cols="30%,*">
 <frame />
    <frameset rows="50%,*" />
    <frame />
    <frame  />
    </frameset><noframes></noframes>
</frameset>
</html>

在这里插入图片描述

target属性

使用target属性使得本来相互独立的窗口，联系在一起

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>frame框架的复习</title>
</head>
<frameset cols="30%,*">
 <frame />
    <frameset rows="50%,*" />
    <frame src="css控制背景.html"/>
    <frame  name="main"/>
    </frameset>
</frameset>
</html>

在这里插入图片描述

able陈

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
html中的超链接与框架

关于hyper reference的学习笔记超链接主要分为两种：基于文本的超链接，和基于图片1基于文字的超链接&amp;lt;a href=“url&quot;&amp;gt;文本&amp;lt;/ a&amp;gt;格式这里就将文本设置为了超链接，而url就是你需要连接到的地址这里设置超链接方式比较简单，主要就是需要了解url名词url(uniform resourse locator)统一资源定位器结构:http://w...
复制链接

扫一扫