HTML uses a hyperlink to link to another document on the Web.
HTML使用超联去连接WEB上其他的文件。

Examples
实例

Create hyperlinks
建立一个超级链接
This example demonstrates how to create links in an HTML document.
演示了怎样在一个HTML文档中去创建一个超级链接。

An image as a link
使用图片的链接
This example demonstrates how to use an image as a link.
演示怎样让一个图片成为一个链接。

The Anchor Tag and the Href Attribute
锚标签和Href属性

HTML uses the <a> (anchor) tag to create a link to another document.
HTML使用<a>（锚）标签来建立一个链接。

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
一个锚可以指向任意一个WEB上的资源：一个HTML页面，一个图片，一段声音文件，一部电影，等等。

The syntax of creating an anchor: 
锚标签语法：

Text to be displayed

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
<a>标签是连接的外框架，href属性则是指明连接目的地的，在标签中的文字则是会显示成为一个链接。

This anchor defines a link to W3Schools:
这就有个连接到的ruanchen的链接：

Visit ruanchen.com

The line above will look like this in a browser:
上面的代码在浏览器中就会显示成下面这个样子：

Visit ruanchen.com

The Target Attribute
目标属性

With the target attribute, you can define where the linked document will be opened.
target(目标)属性，可以让你定义你的连接在哪打开。

The line below will open the document in a new browser window:
这行代码就让连接在新窗口打开：

The Anchor Tag and the Name Attribute
名称属性

The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.
名称属性给连接添加了名称。使用被命名的连接我们可以让它跳转到页面中某一个特别的位置，而不是用滚轴去找到那个位置。

Below is the syntax of a named anchor:
一个被命名的链接语法：

Text to be displayed

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.
命名名称不固定。

The line below defines a named anchor:
下面是个命名了的连接：

Useful Tips Section

You should notice that a named anchor is not displayed in a special way.
一个命名了的连接与其他连接在外表上并无差别。

To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this:
连接转向到“tips"位置，在URL地址尾部加上#符号然后加上名称，像：

Jump to the Useful Tips Section</a>

A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this: 
在 html_links.asp这个页面上看这个链接效果和这个是一样的：

Jump to the Useful Tips Section

Basic Notes - Useful Tips
实用提示

Always add a trailing slash to subfolder references. If you link like this: href="http://www2.ruanchen.com/tech/school/html", you will generate two HTTP requests to the server, because the server will add a slash to the address and create a new request like this: href=http://www2.ruanchen.com/tech/school/html/
链接到子文件夹时, 记得在链接的地址后面加个斜杠. 假如你写成这样 href="http://www2.ruanchen.com/tech/school/html", 服务器收到这个请求后(不知道这个地址是文件还是文件夹, )就会自动尝试加上斜杠象这样 href="http://www2.ruanchen.com/tech/school/html/", 从而多生成一条请求(, 造成服务器的负担).

Named anchors are often used to create "table of contents" at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document.
命名的链接经常用在那些”表格内容“有大量文档的地方。在每个章节中添加一个命名的链接，然后在文档头部做个连接的总和目录（方便导航以及查找相关的内容）

If a browser cannot find a named anchor that  has been specified, it goes to the top of the document. No error occurs. 
如果浏览器找不到命名连接那它就会显示文档的头部而不会报错。

More Examples
更多的例子

Open a link in a new browser window
在新窗口打开一个连接
This example demonstrates how to link to another page by opening a new window, so that the visitor does not have to leave your Web site.
演示如何在一个新窗口打开一个连接，以便让浏览者继续待在你的站点。

Link to a location on the same page
同一页面内转向连接
This example demonstrates how to use a link to jump to another part of a document.
演示了在同一个窗口下连接到另一个文档

Break out of a frame
脱离框架
This example demonstrates how to break out of a frame, if your site is locked in a frame.
如果你的站点是锁定在一个框架[frame]中的,该例子将演示如何脱离框架。

Create a mailto link
邮件连接
This example demonstrates how to link to a mail message (will only work if you have mail installed).
在你有邮箱，并且它还在工作中时，演示了怎么样连接到一个邮箱信息的方法。

Create a mailto link 2
邮件连接的第二种形式
This example demonstrates a more complicated mailto link.
这个例子演示怎么样连接许多邮箱。

Link Tags
链接标签

HTML 实体字符 HTML 框架

评论 (0) All