html教程六、链接标志-用户支持中心基础知识-奇文软件

基础知识

html教程六、链接标志

发布者：转载

更新时间：12/29/2008

回复：0

分类：基础资料

标签：教程模版风格

html教程六、链接标志

1.<a href=""></a>
2.<a name=""></a>

教程六的内容不是很多，而且很简单。链接是Html语言的一大特色，正因为有了它，我们对内容的浏览才能够具有灵活性和网络性。

1.<a href=""></a>
    本标志对的属性href是无论如何不可缺少的，标志对之间加入需要链接的文本或图像(链接图像即加入<img src="">标志)。href的值可以是URL形式，即网址或相对路径，也可以是mailto:形式，即发送E-Mail形式。对于第一种情况，语法为<a href="URL"></a>，这就能创建一个超文本链接了，例如：
    <a href="http://www.bloghuman.com/">这是我的网站</a>
    对于第二种情况，语法为<a href="mailto:EMAIL"></a>，这就创建了一个自动发送电子邮件的链接，mailto:后边紧跟想要制动发送的电子邮件的地址(即E-Mail地址)，例如：
    <a href="mailto:haocong81@gmail.com">这是我的电子信箱(E-Mail信箱)</a>
    此外，<a href=""></a>还具有target属性，此属性用来指明浏览的目标帧，我们将在讲帧标志时作详细的说明，这里您只要知道如果不使用target属性，当浏览者点击了链接之后将在原来的浏览器窗口中浏览新的Html文档，若target的值等于“_blank”，点击链接后将会打开一个新的浏览器窗口来浏览新的Html文档。例如：
    <a href="http://www.bloghuman.com/" target="_blank">这是我的网站</a>

2.<a name=""></a>
    <a name=""></a>标志对要结合<a href=""></a>标志对使用才有效果。<a name=""></a>标志对用来在Html文档中创建一个标签(即做一个记号)，属性name是不可缺少的，它的值也即是标签名，例如：
    <a name="标签名">此处创建了一个标签</a>
    创建标签是为了在Html文档中创建一些链接，以便能够找到同一文档中的有标签的地方。要找到标签所在地，就必须使用<a href=""></a>标志对。例如要找到“标签名”这个标签，就要编写如下代码：
    <a href="#标签名">点击此处将使浏览器跳到“标签名”处</a>
    注意：href属性赋的值若是标签的名字，必须在标签名前边加一个“#”号。

下面是本教程的一个综合应用示例：

<html>
<head>
<title>HTML代码实例演示页面-HTML代码</title>
<meta name="keywords" content="HTML代码,HTML代码效果,HTML代码实例,HTML代码演示">
<meta name="description" content="HTML代码效果演示页面由黑色梦中的SEO博客制作,通过HTML代码实例帮大家全面了解html代码的使用教程及HTML代码使用规范。">
<meta name="classification" content="网页制作/编程代码/HTML代码">
<meta name="author" content="HTML代码效果演示">
</head>

<body>
<div align="center"><a name="Top"><h1 align="center">HTML代码实例演示页面</h1></a></div>
<div align="right">HTML代码演示由黑色梦中的SEO博客提供</div>
<br>
<h3>一.列表类HTML代码应用效果</h3>
<p>
<ul>
<li><a href="http://www.bloghuman.com/html/" target="_blank">点击这里返回HMTL教程</a></li>
<li><a href="http://www.bloghuman.com/" target="_blank">点击这里访问SEO博客</a></li>
</ul>
</p>
<h3>二.图片类html代码应用效果</h3>
<p>
<img src="http://www.google.com/intl/zh-CN_ALL/images/logo.gif"
alt="google logs" border="0" width="286" height="110">
</p>
<h3>三.超链接html代码应用效果</h3>
<p>
SEO Blog provides many content about search engine optimization:
<br>
<center>
<a href="http://www.bloghuman.com/category/website-optimization/" target=_blank>网站优化</a>
<a href="http://www.bloghuman.com/category/search-engine-optimization/" target=_blank>SEO优化</a>
<a href="http://www.bloghuman.com/category/search-engine-optimization-technology/" target=_blank>SEO技术</a>
<a href="http://www.bloghuman.com/category/search-engine-optimization-tool/" target=_blank>SEO工具</a>
<a href="http://www.bloghuman.com/category/search-engine-optimization-tutorial/" target=_blank>SEO教程</a>
<a href="http://www.bloghuman.com/category/search-engine-optimization-case/" target=_blank>SEO案例</a>
<a href="http://www.bloghuman.com/category/online-marketing/" target=_blank>网络营销</a>
<a href="</b>" target=_blank>WEB2.0</a>
<a href="http://bbs.meayoo.com/zhuantieqi/zhuantieqi.html" target=_blank>转贴工具</a>
</center>
</p>
<h3>四.网页制作中经常使用的Html代码</h3>
<p>
<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.bloghuman.com/html/html-effect.html');">设置本页为首页</a> | <a href="#" onClick="window.external.addFavorite('http://www.bloghuman.com/html/html-effect.html','HTML代码演示 - http://www.bloghuman.com/effect-html.html')" title="Add Favorite">添加到收藏夹</a> | <a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.bloghuman.com/html/html-effect.html');">Set Homepage</a> | <a href="#" onClick="window.external.addFavorite('http://www.bloghuman.com/html/html-effect.html','HTML代码演示 - http://www.bloghuman.com/effect-html.html')" title="Add Favorite">Add favorite</a>
</p>
<br>
<h3>五.电子邮箱的html代码应用效果：</h3>
<p>
My E-Mail：<a href="mailto:haocong81@gmail.com"><font color="#9C0000">haocong81@gmail.com</font></a>. Click it and send message to me!!!
</p>
<h3>六.锚链接html代码展示效果</h3>
<p>
<a href="#Top"><font color="blue">点击此处回到页面顶部</font></a> | <a href="#Top"><font color="blue">Top</font></a>
</p>
<h3>七.表格类html代码演示效果</h3>
<p>
<table border="1" width="300">
<tr>
<td colspan="2" align="center"><a href="http://linkswhere.com/live-work/" target="_blank">Live and Work</a></td>
</tr>
<tr>
<td><a href="http://linkswhere.com/live-work/adoption-law.htm" target="_blank">Adoption Law</a></td>
<td><a href="http://linkswhere.com/live-work/antique-art.htm" target="_blank">Antique Art</a></td>
</tr>
<tr>
<td><a href="http://linkswhere.com/live-work/candy-basket.htm" target="_blank">Candy Basket</a></td>
<td><a href="http://linkswhere.com/live-work/book-store.htm" target="_blank">Book Store</a></td>
</tr>
<tr>
<td><a href="http://linkswhere.com/live-work/cake-box.htm" target="_blank">Cake Box</a></td>
<td><a href="http://linkswhere.com/live-work/bridal-flower.htm" target="_blank">Bridal Flower</a></td>
</tr>
<tr>
<td><a href="http://linkswhere.com/live-work/calling-card.htm" target="_blank">Calling Card</a></td>
<td><a href="http://linkswhere.com/live-work/dog-clothes.htm" target="_blank">Dog Clothes</a></td>
</tr>
<tr>
<td colspan="2" align="right"><a href="http://linkswhere.com/" target="_blank">Links</a></td>
</tr>
</table>
</p>
</body>
</html>
本例在浏览器中显示的结果如下：Html代码效果演示

基础知识

html教程六、链接标志

0 条回复

回复