HTML链接及属性

做链接也是通过元素(element)实现的。做链接只需一个元素和一个属性就行了。下面是一个例子,它是一个指向jinanwangzhanjianshe.com的链接:

例1:

<a href="http://www.jinanwangzhanjianshe.com/">这是一个指向jinanwangzhanjianshe.com的链接</a>

该例在浏览器中将显示如下:

这是一个指向cnzz.cn的链接
 元素a代表“链接(anchor)”;属性href代表“超文本引用(hypertext reference)”,它用于指定链接指向何处——通常是一个因特网地址或者一个文件名。

在上例中,属性href的值为“http://www.jinanwangzhanjianshe.com”,这是www.jinanwangzhanjianshe.com网站的完整地址,也被称作URL(统一资源定位符)。注意,在URL里必须包含“http://”。“这是一个指向jinanwangzhanjianshe.com的链接”是这个链接在浏览器中显示出来的文本。记得在元素结尾处写上</a>。

如何在同一网站的网页之间添加相互链接?
 如果你要在同一网站的不同网页间做链接,那就不必拼写出网页的完整URL。举个例子,假如你有两个网页(比如说page1.htm和page2.htm),而且它们被存放在同一个文件夹中,那么你在做链接的时候,只要写出文件名就行了。这样,page1.htm到page2.htm的链接将如下所示:

例2:

<a href="page2.htm">点击这里转到第2页</a>

如果page2.htm被放在下一级文件夹中(比如“subfolder”),那么链接将是这样:

例3:

<a href="subfolder/page2.htm">点击这里转到第2页</a>

反过来,从page2.htm(在下级文件夹中)到page1.htm的链接将是这样:

例4:

<a href="../page1.htm">转到第1页</a>

“../”代表当前位置(即该链接所在文件所处的文件夹)的上一级文件夹。同理,当前位置的上上级文件夹可用“../../”表示。

明白其中的规则了吗?当然,如果给出完整URL也行。

如果要在一个网页内做链接怎么办呢?
 你也可以在一个网页的内部做链接——比如在网页开始处提供一个目录,在其中列出指向下面各章的链接。这可以通过使用id属性和“#”符号来实现。

用id属性标出要被指向的元素。例如:

<h1 id="heading1">标题1</h1>

然后通过在链接中利用“#”来指向那个元素。 “#”后面必须紧跟着一个id属性的值,表明链接指向该id属性被定义的地方。例如:

<a href="#heading1">转到标题1</a>

来看一个例子就明白了:

例5:

<html>
  
 <head>
 </head>

<body>

<p><a href="#heading1">转到标题1</a></p>
 <p><a href="#heading2">转到标题2</a></p>

<h1 id="heading1">标题1</h1>
 <p>一些文字。。。。</p>

<h1 id="heading2">标题2</h1>
 <p>一些文字。。。。</p>
  
 </body>

</html>

该例在浏览器中将显示如下(你可以试试看点击这两个链接):

转到标题1

转到标题2

标题1
一些文字。。。

标题2
一些文字。。。

(注:id属性必须以字母开头)

除了网页,链接还能指向什么?
 你还可以为e-mail地址做链接,方法跟为网页做链接差不多:

例6:

<a href=mailto:soft@dabaoku>给1234@jinanwangzhanjianshe.com发电子邮件</a>

该例在浏览器中将显示如下:

给soft@jinanwangzhanjianshe.com发电子邮件

与指向网页的链接的唯一区别在于:指向e-mail地址的链接必须以mailto:开头,然后紧接着写e-mail地址。当点击这个链接的时候,缺省的e-mail程序将新建一封邮件,其中的收件人地址为链接中指定的e-mail地址。注意:这一功能仅当你的计算机安装了e-mail程序后才起作用。试试看吧!

有其他我需要知道的属性吗?
 创建链接总要用到href属性。另外,你也可以在链接上使用title属性:

例7:

<a href="http://www.jinanwangzhanjianshe.com/" title="上网页制作济南网站建设学习HTML">jinanwangzhanjianshe.com</a>

该例在浏览器中将显示如下:

jinanwangzhanjianshe.com

title属性用于为该链接输入一个简短描述。当你把鼠标光标停留在该链接上(别点击它)时,提示文字“上网页制作济南网站建设学习HTML”便会出现。
许多元素都可以设置属性。

属性是什么?
 也许你还记得,HTML通过标签告诉浏览器如何展示网页(比如<br />告诉浏览器显示一个换行)。你可以为某些元素附加一些信息,这些附加信息被称为属性(attribute)。

例1:

<h2 style="background-color:#ff0000;">我跟HTML的友谊</h2>

属性应写在元素的首标签上。具体写法是:属性名称(attribute name)后紧跟一个等号(“=”),后面写上用双引号括起来的属性值(attribute value)。对于style属性的值,可以用分号(“;”)来分隔多个样式指令。这个后面会介绍。

这里涉及什么知识点?
 属性有许多,我们首先学习的是style属性,它用于为网页设定样式,比如设置背景颜色等。

例2:

<html>
  
   <head>
   </head>

  <body style="background-color:#ff0000;">
   </body>

</html>

该例将在浏览器中显示一个全是红色的页面——自己动手试试看。稍后我们会详细讲解颜色设置的原理。

注意,一些元素和属性的名称采用的是美式拼写,比如color(而不是colour)。请留意本教程中元素与属性名称的拼写,千万不要写错——否则浏览器将无法理解你的代码。而且,别忘了用双引号把属性值(attribute value)括起来。

为什么上面那个页面全是红的?
 在上例中,我们将网页的背景颜色设置为“#ff0000”,这个十六进制代码(HEX)代表红色。每个颜色都有其对应的十六进制代码。下面是一些例子:

白色: #ffffff
黑色: #000000
红色: #ff0000
兰色: #0000ff
绿色: #00ff00
黄色: #ffff00

十六进制代码由“#”打头,后面跟六位数字或字母。由于这样的十六进制代码太多,不便记住哪个代码对应哪个特定颜色。为此,我们为最常用的216个颜色制作了一张表,供大家参阅:216个网页安全颜色表<见文章底部>。

除此以外,对于一些最常用的颜色(比如白色、黑色、红色、兰色、绿色及黄色等),你还可以使用它们的英语名称。

例3:

<body style="background-color: red;">

关于颜色就讲这么多了。让我们继续学习属性。

哪些元素可以使用属性?
 不同元素使用不同的属性。

有些元素(比如body等)被添加属性的机会比较大,而有些元素(比如br等)则较小、甚至不会被添加属性。

HTML里有很多元素,同样也有很多属性。有些属性仅用于个别元素,有些属性可用于很多元素。反之亦然:有些元素只能使用个别属性,有些元素可以使用较多的属性。

听起来这也许很令人困惑,不过一旦你熟悉了各个属性,就会感到很简单,并觉得它们很有用处。

本教程将介绍大多数重要属性。

一个元素包括哪些部分?
 一般来说,一个元素包括一个首标签(start tag)、零或多个属性(attribute)、一些内容和一个尾标签(end tag)。就这么简单。

时间: 2024-10-27 15:44:44

HTML链接及属性的相关文章

wordpress中设置评论链接重定向跳转且加Nofollow属性

WordPress设置评论链接重定向跳转 首先:在主题目录下的函数模板<functions.php>的最后?>位置添加如下代码:  代码如下 复制代码 //comments link redirect // 以下是我添加的wordpress设置评论链接重定向跳转 add_filter('get_comment_author_link', 'add_redirect_comment_link', 5); add_filter('comment_text', 'add_redirect_co

十八 链接的可用性

链接 这篇文章让你的网页链接更富有可用性. Tabbing 那些不能使用指定装置可以通过链接"tab",比如,链接应该有合乎逻辑的tabbing顺序.tabindex属性允许你定义这个顺序,尽管html是线性的,就算它可能是,一个合乎逻辑的tabbing顺序应该自动到达地方. Accesskeys 访问健 Accesskey允许更易用的导航即通过指派键盘按键到链接(当用户使用"alt"或"ctrl"+Accesskeys获得链接焦点).方便那些不

图解CSS(10):链接、继承、放缩、鼠标指针、其他

fa:link {未访问链接} a:hover {鼠标悬停} a:active {鼠标点下} a:visited {已访问链接} 很多属性(不是所有)都可以 inherit(继承), 测试: zoom: normal(默认).比例值.

如何给自己的网站加入自助友情链接的功能(PHP)

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 大家都知道,网站有大量的外部链接,对自己的网站排名非常重要,也能够带来一定的流量. 今天我给自己的网站 http://xikc.com 添加了自助链接功能,用php写的.功能类似于网上大量的自助友情链接网站,如果一个网站的首页上放了我站的链接,点击链接到 http://xikc.com ,此网站的链接就会出现在我站友情链接页的第一名 http

Android TextView中文字通过SpannableString来设置超链接、颜色、字体等属性

在Android中,TextView是我们最常用的用来显示文本的控件.   一般情况下,TextView中的文本都是一个样式.那么如何对于TextView中各个部分的文本来设置字体,大小,颜色,样式,以及超级链接等属性呢?下面我们通过SpannableString的具体实例操作来演示一下.    res-layout-main.xml [html] view plaincopy <?xml version="1.0" encoding="utf-8"?>

SQL Server 远程链接服务器详细配置

原文:SQL Server 远程链接服务器详细配置[转载] http://hi.baidu.com/luxi0194/blog/item/a5c2a9128a705cc6c2fd7803.html 远程链接服务器详细配置--建立连接服务器EXEC sp_addlinkedserver  '远程服务器IP','SQL Server'--标注存储EXEC sp_addlinkedserver@server = 'server', --链接服务器的本地名称.也允许使用实例名称,例如MYSERVER\S

android TextView中文字通过SpannableString设置属性

在Android中,TextView是我们最常用的用来显示文本的控件.   一般情况下,TextView中的文本都是一个样式.那么如何对于TextView中各个部分的文本来设置字体,大小,颜色,样式,以及超级链接等属性呢?下面我们通过SpannableString的具体实例操作来演示一下. [java] view plaincopy //创建一个 SpannableString对象       SpannableString msp = new SpannableString("字体测试字体大小

Android TextView中文字通过SpannableString设置属性用法示例_Android

本文实例讲述了Android TextView中文字通过SpannableString设置属性的方法.分享给大家供大家参考,具体如下: 在Android中,TextView是我们最常用的用来显示文本的控件. 一般情况下,TextView中的文本都是一个样式.那么如何对于TextView中各个部分的文本来设置字体,大小,颜色,样式,以及超级链接等属性呢?下面我们通过SpannableString的具体实例操作来演示一下. //创建一个 SpannableString对象 SpannableStri

王玉娟:友情链接交换四大金规与十大戒律

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 自始以来,友情链接一直在SEO排名中起着重要作用,推动了网页关键词在百度及其他搜索引擎的排名,今天11545.html">我们有幸采访了山东资深SEO专家王玉娟女士关于友情链接交换的方法及注意事项,下面将访谈内容整理如下: 友情链接交换四大金规: 规则一:快照第一的原则,交换之前,先预览快照时间,优化哪一个搜索引擎即对照这个搜