HTML 超链接



HTML 使用超级链接与网络上的另一个文档相连。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。


HTML 链接 - target 属性

使用 Target 属性,你可以定义被链接的文档在何处显示。


HTML 链接 - name 属性

name 属性规定锚(anchor)的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示,它对读者是不可见的。
当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。


HTML <a> 标签

定义和用法

<a> 标签定义超链接,用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性,它指示链接的目标。

charsetchar_encodingHTML5 中不支持。规定被链接文档的字符集。
coordscoordinatesHTML5 中不支持。规定链接的坐标。
downloadfilename规定被下载的超链接目标。
hrefURL规定链接指向的页面的 URL。
hreflanglanguage_code规定被链接文档的语言。
mediamedia_query规定被链接文档是为何种媒介/设备优化的。
namesection_nameHTML5 中不支持。规定锚的名称。
reltext规定当前文档与被链接文档之间的关系。
revtextHTML5 中不支持。规定被链接文档与当前文档之间的关系。
shape
  • default
  • rect
  • circle
  • poly
HTML5 中不支持。规定链接的形状。
target
  • _blank
  • _parent
  • _self
  • _top
  • framename
规定在何处打开链接文档。
typeMIME type规定被链接文档的的 MIME 类型。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表格演示3</title>
<style type="text/css">
table {
	width: 50%;
	border-color: #00ff00;
}

th,td {
	text-align: center;
	height: 30px;
	border: 2px solid #00FFFF;
}

p {
	text-indent: 2em;
	color: #FF0000;
	font-family: 华文行楷;
	font-size: 24pt;
}

span {
	color: #11FFEE;
}

td {
	background-color: #00ee00;
}
</style>
</head>
<body text="#0000ff">
<a href="http://www.baidu.com">到百度去看看</a>
<br/>
<a href="../HTML1/Demo3.html" target="blank">打开之前的一个网页</a> 
<a href="#end">跳到末尾</a> <br/>
<br/>
<h2><a name="t1">表格演示2</a></h2>
		
		<table border="1" cellspacing="0">
		  
		  <caption>表2 学生信息表</caption>
		  
		   <tr>
		      <th>姓名</th>  <th colspan="2">成绩</th>
		   </tr>
		   <tr>
		      <td rowspan="2">Jack,Tom</td>  <td>数学</td> <td>英语</td>
		   </tr>
		   <tr>
		      <td>80</td> <td>75</td>
		   </tr>
		   <tr>
		      <td>张三</td>  <td>68</td> <td>65</td>
		   </tr>
		    	</table>
           	<br/><br/><br/><br/>
           	<img alt="风景图" src="../imgs/bg-img.jpg" width="50px" border="2px" usemap="#mp">
           	<map name="mp">
           	 <area shape="rect" coords="50,59,116,104" href="table1.html">
           	  <area shape="circle" coords="118,203,40" href="table2.html" />
           	</map>
          
          <p>
		  <a name="t2">微视频</a>:新时代 致敬英雄<span>人民日报</span>:让崇尚英雄成时代风尚 我们家的报国故事
习近平生态文明思想引领美丽中国建设 中华生态文化习近平论担当 <font face="华文彩云" color="123456">激励广大干部</font>担当作为的重大举措特朗普遭遇重大打击 说了平生最无奈的一句话强配 两位副国级担任此机构正副总指挥我军驻福建部队臂章现眼镜蛇图案 蛇信直压台北(图)蔡当局拒绝国民党副主席赴大陆 理由振振有词(图)蔡当局拒绝国民党副主席赴大陆 理由振振有词(图)无印良品商品标注“原产国”台湾 被罚20万元向中国出口军事技术?美财长犹豫一下后作出保证
		</p>
		
		
		<hr color="blue"/>
		
		<h2>表格演示2</h2>
		<table border="1" cellspacing="0">
		  
		  <caption>表3 学生信息表</caption>
		  
		   <tr bgcolor="#ffff00">
		      <th>姓名</th>  <th colspan="2">成绩</th>
		   </tr>
		   <tr>
		      <td>Jack</td>  <td>数学</td> <td>英语</td>
		   </tr>
		   <tr>
		      <td>Tom</td> <td>80</td> <td>75</td>
		   </tr>
		   <tr>
		      <td>张三</td>  <td>68</td> <td>65</td>
		   </tr>
		</table>
		
		<a href="#t1">上部</a>   <a href="#t2">中部</a>
		<a name="end">网页末尾</a>
		<a href="thunder://d/sjkjk32ui23i2331212313212">下载电影</a>
</body>
</html>




版权声明:本文为lx678111原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lx678111/article/details/80445583