⽤HTML建⽴超链接（a）
HTML⽂件最重要的特征之⼀就是超链接，通过⽹页上所提供的连接功能，⽤户可以链接到⽹络上的其他⽹页。
4.1 设置基本⽂字超链接
建⽴超链接所使⽤的HTML标记为<a></a>标记。超链接最重要的有两个要素，设置为超链接的⽂本内容和超链接指向的⽬标地址。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
点击<a href="4.1.2.html"这⾥</a>连接到⼀个图⽚⽹页
</body>
</html>
注：在<a>和</a>标记之间的内容就是在⽹页中被设定为超链接的内容。hef属性是必要属性，⽤来放置超链接的⽬标地址，可以是本⽹站内部的某个HTML⽂件，也可以是外部⽹站某个⽹页的URL地址
4.1.1 URL的格式
每个⽂档在互联⽹上有唯⼀的地址，该地址的全称为统⼀资源定位器(Uniform Resource Laocator），简称URL。
URL由4个部分构成，即“协议”，“主机名”，“⽂件夹名”，“⽂件名”。
http:（协议）//www.aretch（主机名）/study（⽂件夹名）/index.htm（⽂件名）
注：RL可分为两种：
相对⽂档的URL，这种URL以链接的原⽂档为起点；
相对服务器的URL，这种URL以服务器的根⽬录为起点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
点击<a href="iblogs/EditPosts.aspx?opt=">链接01</a>链接到第⼀个⽹页<br>
点击<a href="3.4.html">链接02</a>链接到第2个⽹页
</body>
</html>
其中第1个使⽤的是绝对URL；第2个⽤的是服务器相对URL。
4.2 设置页⾯内部的特定⽬标的链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web学习向导</title>
</head>
<body>
<h1>Web学习向导</h1>
<p><a href="#first">第1本书</a><a href="#second">第2本书</a><a href="#third">第3本书</a>
</p>
<h2><a name="first">精通CSS+DIV⽹页样式与布局</a></h2>
<p>本书系统地讲解了……的省略部分</p>
<h2><a name="second">CSS设计彻底研究</a></h2>
<p>本书是⼀本深⼊……省略部分</p>
<h2><a name="third">CSS设计禅意花园</a></h2>
<p>本书作者是世界……省略部分</p>
</body>
</html>
4.3 设置图⽚的超链接
图⽚超链接的建⽴和⽂字超链接的建⽴基本类似，都是通过<a></a>标记来实现的。只需要把原来的连接⽂字换成相应的图⽚。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图⽚的超链接</title>
</head>
<body>
<a href="3.1.2html.html">
<img src="cat.jpg">
</a>
<br>点击图⽚放⼤</body>
</html>
注：注意代码中粗体显⽰的语句。为⼀个图⽚添加了超链接以后，浏览器会⾃动给图⽚加⼀个粗边框。如果想要去掉这个边框，只需要在<img>标记中设置border=“0”后就可以取消这个边框。
4.4 设置电⼦邮件链接
在某些⽹页中
---恢复内容结束---
HTML⽂件最重要的特征之⼀就是超链接，通过⽹页上所提供的连接功能，⽤户可以链接到⽹络上的其他⽹页。
4.1 设置基本⽂字超链接
建⽴超链接所使⽤的HTML标记为<a></a>标记。超链接最重要的有两个要素，设置为超链接的⽂本内容和超链接指向的⽬标地址。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
点击<a href="4.1.2.html"这⾥</a>连接到⼀个图⽚⽹页
</body>
</html>
注：在<a>和</a>标记之间的内容就是在⽹页中被设定为超链接的内容。hef属性是必要属性，⽤来放置超链接的⽬标地址，可以是本⽹站内部的某个HTML⽂件，也可以是外部
⽹站某个⽹页的URL地址
4.1.1 URL的格式
每个⽂档在互联⽹上有唯⼀的地址，该地址的全称为统⼀资源定位器(Uniform Resource Laocator），简称URL。URL由4个部分构成，即“协议”，“主机名”，“⽂件夹名”，“⽂件名”。
http:（协议）//www.aretch（主机名）/study（⽂件夹名）/index.htm（⽂件名）
注：RL可分为两种：
相对⽂档的URL，这种URL以链接的原⽂档为起点；
相对服务器的URL，这种URL以服务器的根⽬录为起点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
点击<a href="iblogs/EditPosts.aspx?opt=">链接01</a>链接到第⼀个⽹页<br>
点击<a href="3.4.html">链接02</a>链接到第2个⽹页
</body>
</html>
其中第1个使⽤的是绝对URL；第2个⽤的是服务器相对URL。
4.2 设置页⾯内部的特定⽬标的链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web学习向导</title>
</head>
<body>
<h1>Web学习向导</h1>
<p><a href="#first">第1本书</a><a href="#second">第2本书</a><a href="#third">第3本书</a>
</p>
<h2><a name="first">精通CSS+DIV⽹页样式与布局</a></h2>
<p>本书系统地讲解了……的省略部分</p>
<h2><a name="second">CSS设计彻底研究</a></h2>
<p>本书是⼀本深⼊……省略部分</p>
<h2><a name="third">CSS设计禅意花园</a></h2>
<p>本书作者是世界……省略部分</p>
</body>
</html>
4.3 设置图⽚的超链接
图⽚超链接的建⽴和⽂字超链接的建⽴基本类似，都是通过<a></a>标记来实现的。只需要把原来的连接⽂字换成相应的图⽚。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图⽚的超链接</title>
</head>
<body>
<a href="3.1.2html.html">
<img src="cat.jpg">
</a>
<br>点击图⽚放⼤</body>
</html>
注：注意代码中粗体显⽰的语句。为⼀个图⽚添加了超链接以后，浏览器会⾃动给图⽚加⼀个粗边框。如果想要去掉这个边框，只需要在<img>标记中设置border=“0”后就可以取消这个边框。
4.4 设置电⼦邮件链接
在某些⽹页中，当访问者点击某个链接之后，会⾃动打开电⼦邮件的客户端软件，如Outlook或Foxmail等，向某个特定的E-mail地址发送邮件，这个链接就是电⼦邮件链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邮件的链接</title>
</head>
<body>
：<a href="mailto:support@artech">给我们发送邮件</a>
</body>
</html>
4.5 设置新窗⼝以显⽰链接页⾯
在默认情况下，当点击链接的时候，⽬标页⾯还是在同⼀个窗⼝中显⽰。如果要在点击某个链接以后，打开⼀个新的浏览器窗⼝，在这个新窗⼝中显⽰⽬标页⾯，就需要在<a>标记中设置"target"属性。
将"target"属性设置为"_blank"，就会⾃动打开⼀个新窗⼝，显⽰⽬标页⾯。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>以新窗⼝⽅式打开</title>
</head>
<body>
以<a href="3.6.html" target="_blank">新窗⼝</a>⽅式打⼀个⽹页
</body>
</html>
4.7 框架之间的链接
4.7.1 建⽴框架与框架集（<frame>和<frameset>)
框架集的HTML标记为<frameset>，框架的HTML标记是<frame>。
注：<frameset>标记和</frameset>标记是与<body>和</body>是同级的，不要将<frameset>标记含在<body>标记中，否则<frameset>标记将⽆法正常使⽤。
4.7.2 ⽤cols属性将窗⼝分为左右两部分
窗⼝框架的分割⽅式有两种，⼀种是⽔平分割，另⼀种是垂直分割。在<frameset>标记中的cols属性和rows属性来控制窗⼝的分割⽅式。
cols属性可以将⼀个框架集分割为若⼲列，其语法结构“<frameset cols="n1,n2,···,*">”。
n1表⽰⼦窗⼝1的宽度，以像素或百分⽐为单位；
n2表⽰⼦窗⼝2的宽度，以像素或百分⽐为单位；
星号“*”表⽰分配给前⾯所有窗⼝后剩下的宽度，⽐如“<frameset cols="20%,30%,">”，那么“*”就表⽰50%的宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">创建html文件
<title>窗体分割</title>
</head>
<frameset cols="30%,*">
<frame>
<frame>
</frameset>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。