5.2 Electronic References (Hyperlinks) Using <a>使用<a>的电子参考文献（超链接）
Hyperlinks are probably one of the most important elements of HTML because they make it possible to move from one website to another. You’ll need hyperlinks, often just called links or references, to structure your project and implement references to other content.超链接可能是HTML最重要的元素之一，因为它们可以从一个网站移动到另一个网站。你需要超链接，通常简称为链接或引用，来构建你的项目并实现对其他内容的引用。 Starting from your main page, you often need links to other subpages and perhaps also links that return you to the main page. Only if you link multiple files does your website become a meaningfully usable website. Besides linking your own content, you can create links to other websites or other documents located elsewhere on the internet.从主页开始，您通常需要指向其他子页面的链接，也可能需要返回主页的链接。只有链接多个文件，你的网站才能成为一个有意义的可用网站。除了链接自己的内容外，您还可以创建指向其他网站或位于互联网其他地方的其他文档的链接。
You can create a link in HTML using the 您可以使用a element (a = anchor). a元素（a = anchor）在HTML中创建链接。The text you write between 您在<a> and </a> is called link text or reference text and is activated by using the href attribute in the opening <a> tag. <a>和</a>之间写入的文本称为链接文本或引用文本，通过使用开头<a>标记中的href属性激活。The link text can be any text you want to write, but it isn’t always helpful to simply write 链接文本可以是您想写的任何文本，但简单地写“请单击此处”并不总是有帮助的。一个有意义的链接文本可以帮助您的访问者更快地到达他们想去的地方，并帮助访问者使用屏幕阅读器。Please click here. A meaningful link text can help your visitors get where they want to go faster, as well as help visitors with screen readers. Elements other than text can be placed between 文本以外的元素可以放置在<a> and </a>, such as a graphic as a link.<a>和</a>之间，例如作为链接的图形。
What Is Allowed between <a> and </a>?<a>和</a>之间允许什么？
As mentioned earlier, you can use other HTML elements besides text, such as graphics between 如前所述，除了文本之外，您还可以使用其他HTML元素，例如<a> and </a>. <a>和</a>之间的图形。You’re even allowed to use grouping elements such as paragraphs, lists, articles, and block sets. 您甚至可以使用分组元素，如段落、列表、文章和块集。As a matter of fact, you can use almost anything between 事实上，除了链接、表单元素以及音频和视频等交互元素外，您几乎可以使用<a> and </a>, apart from interactive elements such as links, form elements, and audio and video. <a>和</a>之间的任何内容。That said, I recommend you don’t put too much content into a single link between 也就是说，我建议你不要在<a> and </a>. <a>和</a>之间的单个链接中添加太多内容。Screen readers will read the text aloud multiple times, and visitors might be overwhelmed by this because they are used to activating individual links in the traditional link style. 屏幕阅读器会多次大声朗读文本，访问者可能会对此感到不知所措，因为他们习惯于以传统的链接风格激活单个链接。Of course, this depends on the content of the website. I don’t want to go into more detail here, but you now know that more HTML elements are available to you for links in HTML. 当然，这取决于网站的内容。我不想在这里详细介绍，但你现在知道，更多的HTML元素可用于HTML中的链接。If you’ve put an extreme amount of content between 如果你在<a> and </a> and are no longer sure if it’s still valid, you can validate the source code.<a>和</a>之间放置了大量内容，并且不再确定它是否仍然有效，你可以验证源代码。
The most important attribute used with the 和a element is the href attribute. You can use the href attribute to specify the link users will be taken to when they click on the link text.a元素一起使用的最重要的属性是href属性。您可以使用href属性指定用户单击链接文本时将被带到的链接。
Figure 5.13
Classic Structure of a Hyperlink超链接的经典结构
A link text is commonly underlined by the web browser (usually in blue). If the link has already been visited, it will have a different color (usually purple). 链接文本通常由网络浏览器加下划线（通常为蓝色）。如果链接已经被访问过，它将具有不同的颜色（通常是紫色）。The color of links and visited links may vary depending on the web browser used, so there is no standard link color in this regard as each web browser has its own default stylesheet. 链接和访问链接的颜色可能因使用的web浏览器而异，因此在这方面没有标准的链接颜色，因为每个web浏览器都有自己的默认样式表。You can change both at any time with CSS. Usually, when you move with the mouse pointer over the link, the cursor changes its shape into a hand, with the index finger pointing to the link. 您可以随时使用CSS更改两者。通常，当您将鼠标游标移动到链接上时，游标会变为手形，食指指向链接。Most web browsers additionally display the address at the bottom left where the browser would land after a mouse click on the link.大多数网络浏览器还会在左下角显示地址，鼠标点击链接后浏览器将在此处着陆。
If the link has been clicked, the web browser searches for the address (also called URL) specified in the link, loads it into the browser window, and replaces the old web page. 如果链接已被单击，web浏览器将搜索链接中指定的地址（也称为URL），将其加载到浏览器窗口中，并替换旧网页。If the address of the specified link can’t be found, an error message will display, such as 404 - web page not found. 如果找不到指定链接的地址，将显示错误消息，例如“404-找不到网页”。When the new web page has been loaded into the browser window, you can use the Back button to go back to the previous page.新网页加载到浏览器窗口后，您可以使用“回退”按钮返回上一页。
Further Reading进一步阅读
I’ve already described the specification of terms; directory name; directory structure; and full, absolute, and relative paths in Chapter 3, Section 3.3. You can refer to that section if you have problems with the terms used in the following sections.我已经描述了术语的规范；目录名称；目录结构；以及第3章第3.3节中的完整、绝对和相对路径。如果您对以下章节中使用的术语有疑问，可以参考该章节。
5.2.1 Inserting Links to Other HTML Documents on Your Own Website在您自己的网站上插入其他HTML文档的链接
When you create your website, these links are likely to be the first links you use to structure the loose collections of HTML documents into a coherent website—more precisely, to create the navigation of the website. 当你创建网站时，这些链接可能是你用来将松散的HTML文档集合组织成一个连贯的网站的第一个链接，更确切地说，是用来创建网站的导航。If you want to provide a link to another page on the same website, you usually don’t need to include the full domain name, but instead use a relative URL. 如果你想提供指向同一网站上另一个页面的链接，通常不需要包含完整域名，而是使用相对URL。The directory structure shown in Figure 5.14 should serve as an example.图5.14所示的目录结构应作为示例。
The linking for the start page, index.html, to the other pages, links.html, about.html, and legalnotes.html, looks as follows:起始页indexhtml与其他页面links.html、about.html和legalnotes.html的链接如下：
...
<nav>
Blog |
<a href="pages/links.html">Links</a> |
<a href="pages/about.html">About me</a> |
<a href="pages/legalnotes.html">Legal Notes</a>
</nav>
<h1>My Blog</h1>
<p>Latest reports on HTML</p>
...
Listing 5.8 /examples/chapter005/5_2_1/index.html
Figure 5.14
Directory Structure for an Example of Links to Other Pages on the Same Website指向同一网站上其他页面的链接示例的目录结构
Figure 5.15
Thanks to Linking via a Relative URL, Any Page Can Be Visited and Viewed within the Pages of the Same Website由于通过相对URL链接，可以在同一网站的页面内访问和查看任何页面
Of course, you also need to adjust the links to the other pages, such as links.html, about. html, and legalnotes.html, in this example. 当然，您还需要调整指向其他页面的链接，例如在这个例子中有links.html、about html和legalnotes.html。When specifying the relative URL (see Figure 5.14), you must make sure that the pages (in this example) are located in a subfolder called pages. 指定相对URL时（见图5.14），您必须确保页面（在本例中）位于名为pages的子文件夹中。With regard to the links.html page, the specifications for the 关于links.html页面，href attribute would look as follows:href属性的规格如下：
...
<nav>
<a href="../index.html">Blog</a> |
Links |
<a href="about.html">About me</a> |
<a href="legalnotes.html">Legal Notes</a>
</nav>
...
Listing 5.9 /examples/chapter005/5_2_1/pages/links.html
Figure 5.16 HTML Document links.html
Here you can see how to navigate from the pages subfolder (here ../index.html) with ../ to the parent folder in which index.html is located. 在这里，您可以看到如何从pages子文件夹使用../（此处为../index.html）导航到index.html所在的父文件夹。The other two files, about.html and legalnotes.html, are located in the same folder as links.html, so it’s sufficient to specify only the file name. 另外两个文件about.html和legalnotes.html与links.html位于同一文件夹中，因此只需指定文件名就足够了。Both the about.html and legalnotes.html files need to be linked in the same way.about.html和legalnotes.html文件都需要以相同的方式链接。
5.2.2 Inserting Links to Other Websites插入其他网站的链接
Links to other websites must be written in the same way as the links to the pages of the same website, the only difference being that you must specify the complete address, that is, the absolute URL, to that page in the 指向其他网站的链接必须以与指向同一网站页面的链接相同的方式编写，唯一的区别是您必须在href属性中指定该页面的完整地址，即绝对URL。href attribute. For this purpose, here’s a simple example in which links to external pages are included (see Listing 5.10).为此，这里有一个简单的示例，其中包含指向外部页面的链接（参见清单5.10）。
Figure 5.17
Many Web Browsers Display the Link’s Destination Address at the Bottom of the Status Bar When You Hover over It当您将鼠标悬停在链接上时，许多Web浏览器会在状态栏底部显示链接的目标地址
...
<article>
<header>
<h2>Recommendation on HTML</h2>
</header>
<p>As previously reported, the
<a href="http://www.w3.org/">World Wide Web Consortium
</a> has published
<a href=" https://www.w3.org/TR/html53/">
a new recommendation</a> for HTML,...
</p>
<aside>
<h3>Further links</h3>
<nav>
<ul>
<li>
<a href="https://www.w3.org/TR/html53/">
HTML Recommendation</a></li>
<li><a href="http://www.w3.org/">W3C</a></li>
<li><a href="http://www.whatwg.org/">WHATWG</a></li>
</ul>
</nav>
</aside>
</article>
...
Listing 5.10 /examples/chapter005/5_2_2/index.html
Figure 5.18
When You Activate the Link, the Destination Address Gets Loaded into the Web Browser and Displayed激活链接时，目标地址将加载到Web浏览器中并显示
5.2.3 Opening Links with the “target” Attribute in a New Window在新窗口中打开具有“target”属性的链接
You can use the HTML attribute 您可以使用target of the a element to open a reference target in a new window or tab. a元素的HTML属性target在新窗口或选项卡中打开引用目标。To do so, you only need to pass the attribute value 为此，您只需将属性值_blank to target, for example:_blank传递给target，例如：
<p>As previously reported, the
<a target="_blank" href="http://www.w3.org/">W3C</a> has
published a new draft for HTML,...
</p>
If you activated the link text 如果在此示例中激活了链接文本W3C in this example, the target address (here, www.w3.org) is actually opened and loaded in a new window or tab. W3C，则目标地址（此处为www.w3.org）实际上会打开并加载到新窗口或选项卡中。The primary goal of using 当然，使用target="_blank" is, of course, to avoid “losing” visitors to the page but to leave the page open so that they’ll return to it when they have finished reading the page in the newly opened window or tab.target="_blank"的主要目标是避免“失去”页面的访问者，但要保持页面打开，以便他们在新打开的窗口或选项卡中阅读完页面后返回。
In addition to the most commonly used attribute value 除了最常用的属性值_blank, you can also use _self (= current window), _parent (= parent window), _top (= top window level), and names of windows that can be processed with JavaScript._blank外，您还可以使用_self（=当前窗口）、_parent（=父窗口）、_top（=顶级窗口级别）以及可以用JavaScript处理的窗口名称。
Using or Not Using the Attribute "target="_blank""?使用或不使用属性“target=”_blank“”？
Even though some websites are quite fond of using this attribute, you shouldn’t open a new window for every link, come hell or high water. In practice, you should leave it up to the user to decide whether or not to open a new page for a link. 尽管一些网站非常喜欢使用这个属性，但你不应该为每个链接打开一个新窗口，不管怎样。在实践中，您应该让用户决定是否为链接打开新页面。Even though you may be used to having countless tabs and multiple websites open at the same time, you should think about the more inexperienced visitors who just aren’t or don’t want to be that much into the World Wide Web. 即使你可能习惯于同时打开无数标签和多个网站，你也应该考虑那些没有经验的访问者，他们只是不想或不想太多地进入万维网。Use the 谨慎使用target="_blank" attribute sparingly, and, if possible, let visitors know that a new window or tab will open when they activate the link.target="_blank"属性，如果可能的话，让访问者知道当他们激活链接时将打开一个新窗口或选项卡。
5.2.4 Email Links with “href=mailto: . . .”
You certainly also know the sort of links where the email application opens with a specific email address when you activate it. 您当然也知道当您激活电子邮件应用程序时，它会以特定的电子邮件地址打开的链接类型。These links are also created via the 这些链接也是通过a element and the href attribute. Those email references start at href with mailto: and are followed by the desired email address, for example:a元素和href属性创建的。这些电子邮件引用以href开头，带有mailto:，后面是所需的电子邮件地址，例如：
...
<footer>
<a href="mailto:1@woafu.de">Send email</a>
</footer>
...
Listing 5.11 /examples/chapter005/5_2_4/index.html
Figure 5.19
When You Hover Your Mouse over the Link, You’ll Usually See the Email Address Associated with That Link in the Status Bar当您将鼠标悬停在链接上时，通常会在状态栏中看到与该链接关联的电子邮件地址
Figure 5.20
When You Activate the Link, the Email Application often Opens, an Email Gets Created Automatically, and the Email Address Is Entered as the Recipient当您激活链接时，电子邮件应用程序通常会打开，自动创建电子邮件，并输入电子邮件地址作为收件人
The Functionality of a “mailto” Reference Isn’t Reliable“mailto”引用的功能不可靠
Unfortunately, there is no guarantee that a 不幸的是，不能保证mailto link will actually work. mailto链接确实有效。To make sure that it works, either the web browser must support the email creation and dispatch, or a local email application must be launched when a 为了确保其正常工作，网络浏览器必须支持电子邮件创建和发送，或者在实现mailto reference is implemented. mailto引用时必须启动本地电子邮件应用程序。If a visitor doesn’t use or hasn’t set up a local email application, but only uses the classic webmail in the web browser, the 如果访问者不使用或没有设置本地电子邮件应用程序，而只在web浏览器中使用经典的webmail，则mailto reference will only work if the web browser has been configured accordingly. mailto引用只有在相应配置了web浏览器的情况下才能工作。In addition, there are web browsers that you can’t configure in this way at all. 此外，有些网络浏览器根本无法以这种方式配置。It’s therefore useful and recommended to also provide the email address in readable form, so that visitors who can’t execute the mail reference can still send you an email.因此，建议以可读的形式提供电子邮件地址，这样无法执行邮件引用的访问者仍然可以向您发送电子邮件。
Beware of Spam!当心垃圾邮件！
Due to the publication of email addresses on a website, you’ll eventually have to face unsolicited commercial emails (spam) because there are web crawlers that scan websites for email addresses. 由于网站上公布了电子邮件地址，您最终将不得不面对未经请求的商业电子邮件（垃圾邮件），因为有网络爬虫可以扫描网站的电子邮件地址。You even have the obligation to name the email address in the legal notes. The only protection in this regard consists of avoiding mentioning the email address in the source code.您甚至有义务在法律说明中注明电子邮件地址。在这方面，唯一的保护措施是避免在源代码中提及电子邮件地址。
The first way to do that would be to include it as a graphic. However, this would be leave out people who rely on screen readers, and, furthermore, a “graphic email address” is also legally questionable. 第一种方法是将其作为图形包含在内。然而，这将排除依赖屏幕阅读器的人，此外，“图形电子邮件地址”在法律上也是有问题的。Often, obfuscation versions are still in use, in which the @ sign is replaced by (at) (e.g., webmaster (at) donald-bear.com). 通常，混淆版本仍在使用中，其中@符号被(at)替换（例如，webmaster (at) donald-bear.com）。Likewise, the dot is written out as (dot) (e.g., webmaster (at) donald-bear (dot) com). Of course, this means the visitor has to enter the email address manually.同样，点也写为（dot）（例如，webmaster (at) donald-bear (dot) com）。当然，这意味着访问者必须手动输入电子邮件地址。
JavaScript obfuscation is another solution. There are many approaches to this. An interesting website with information about how you can hide your email address with JavaScript, for example, can be found at http://alistapart.com/article/gracefulemailobfuscation.JavaScript混淆是另一种解决方案。对此有很多方法。例如，您可以在以下网址找到一个有趣的网站，其中包含有关如何使用JavaScript隐藏电子邮件地址的信息：http://alistapart.com/article/gracefulemailobfuscation。
Google’s reCAPTCHA module, which ensures that the email address gets displayed or forms are submitted by a human being, has also proven useful. 谷歌的reCAPTCHA模块也被证明是有用的，该模块可确保电子邮件地址显示或表单由人类提交。However, this also entails extra work for the website visitor, who may have to type words or solve an image task. 然而，这也给网站访问者带来了额外的工作，他们可能不得不打字或解决图像任务。You can find more information on this topic, including an introductory video, at http://google.com/recaptcha/intro/index.html.您可以在以下网址找到有关此主题的更多信息，包括介绍视频http://google.com/recaptcha/intro/index.html。
5.2.5 Setting Links to Other Types of Content设置指向其他类型内容的链接
If you set links to other document types not commonly used on the web, such as Word, Excel, or PDF documents, it depends on the web browser to handle those document types further. As a web developer, you have no influence on this. Here, the general recommendation is first to use widely used formats. 如果您设置了指向web上不常用的其他文档类型（如Word、Excel或PDF文档）的链接，则进一步处理这些文档类型取决于web浏览器。作为一名web开发人员，您对此没有任何影响。在这里，一般建议首先使用广泛使用的格式。For example, a link to a PDF document is more likely to cause the web browser to launch a corresponding PDF reader and open the document within it than if the content type link is a platform-dependent or vendor-specific document (e.g., a Word document). Let’s look at a simple example:例如，与内容类型链接是依赖于平台或特定于供应商的文档（例如Word文档）相比，指向PDF文档的链接更有可能导致web浏览器启动相应的PDF阅读器并在其中打开文档。让我们来看一个简单的例子：
...
<h1>Reference to other content types</h1>
<p>Open a PDF document: <a href="document.pdf">PDF</a></p>
<p>Open a MOV movie: <a href="ganges.mov">MOV</a></p>
<p>Open a Word document: <a href="worddocument.doc"
type="application/msword">DOC</a></p>
...
Listing 5.12 /examples/chapter005/5_2_5/index.html
Figure 5.21
Three Links to Different Types of Content三个链接到不同类型的内容
What will happen with the three links used in the example can’t be completely predicted as it depends on the web browser. The PDF document shouldn’t be a problem because the web browser should know how to handle it. 示例中使用的三个链接的情况无法完全预测，因为这取决于网络浏览器。PDF文档应该不是问题，因为网络浏览器应该知道如何处理它。It might be more difficult with the movie in MOV format, because that usually requires a QuickTime plug-in from Apple. Some web browsers offer the option to download and install the appropriate plug-in; others, however, don’t.使用MOV格式的电影可能会更困难，因为这通常需要苹果的QuickTime插件。一些网络浏览器提供下载和安装相应插件的选项；然而，其他人则不然。
The same applies to the Word document. If Word is installed on your computer, the web browser often provides a dialog box to open the document with Microsoft Word, or at least the option to select a corresponding application with which you want to open this document. 这同样适用于Word文档。如果您的计算机上安装了Word，则web浏览器通常会提供一个对话框，用于使用Microsoft Word打开文档，或者至少提供选择要打开此文档的相应应用程序的选项。Most of the time, however, only the option to download the document is provided. This again depends on how you’ve set the web browser.然而，大多数时候，只提供下载文档的选项。这再次取决于您如何设置web浏览器。
Including the Content Type包括内容类型
For special types of content, you can provide the web browser with the multipurpose internet mail extension (MIME) type in the 对于特殊类型的内容，您可以在开type attribute within the opening <a> tag, which is what I did in the example with application/msword for a Word document. <a>标记的type属性中为web浏览器提供多用途互联网邮件扩展名（MIME）类型，这就是我在Word文档的application/msword示例中所做的。The information is very useful for the web browser and also other web clients. It almost always makes sense to specify the file format if the link target isn’t an HTML document. 这些信息对网络浏览器和其他网络客户端非常有用。如果链接目标不是HTML文档，指定文件格式几乎总是有意义的。
Inform Visitors about What Is behind a Link告知访问者链接背后的内容
If you use non-HTML documents, you should definitely inform the visitor what is hiding behind the link and possibly how big the specific file is. 如果你使用非HTML文档，你一定要告诉访问者链接背后隐藏了什么，以及特定文件的大小。You can use the global为此，您可以在打开 title attribute in the opening a element for this purpose, but it’s recommended to mention more precise details directly with the link text. a元素时使用全局title属性，但建议直接在链接文本中提及更精确的细节。An example of how you don’t want to do that looks like the following:下面是一个你不想这样做的例子：
<a href="annualrevenue.pdf">Annual Revenue 2020</a>
The visitor will only see the link text 访问者在此处只会看到链接文本“2020年年度收入”，可能会混淆此链接是否指向可能需要更长时间加载的PDF文档。因此，最好写下以下内容：Annual Revenue 2020 here and may be confused about whether this link is to a PDF document that may take a little longer to load. For this reason, it’s better to write the following:
<a title="Opens the PDF file with the annual revenue in 2020"
href="annual-revenue.pdf">
Annual Revenue 2020 (PDF, 3.9 MB)
</a>
5.2.6 Adding Download Links Using the “download” Attribute使用“下载”属性添加下载链接
You can also add links as download references irrespective of the content type (i.e., MIME type) of the link target. 您还可以添加链接作为下载引用，而不管链接目标的内容类型（即MIME类型）如何。For this purpose, you want to use the 为此，您希望在开download attribute in the opening <a> tag. <a>标签中使用download属性。Here, we use the same HTML code from example /examples/chapter005/5_2_5/index.html, but now all three files are provided for download using the 在这里，我们使用/examples/chapter005/5_2_5/index.html中的相同HTML代码，但现在所有三个文件都使用download attribute:download属性提供下载：
...
<h1>Reference to other content types</h1>
<p>Download a PDF document:
<a href="document.pdf" download>PDF</a></p>
<p>Download a MOV movie:
<a href="ganges.mov" download="movie.mov">MOV</a></p>
<p>Download a Word document: <a href="worddocument.doc"
download="worddocument.doc">DOC</a></p>
<p>Download an HTML document: <a href="website.html"
download="website.html">HTML</a></p>
...
Listing 5.13 /examples/chapter005/5_2_6/index.html
The 下载属性允许您指示web浏览器提供此文件进行下载，即使它可以显示文件本身或知道相应的插件或附加组件来执行此操作，它通常会用于此类内容类型。download attribute allows you to instruct a web browser to provide this file for download, even if it could display the file itself or knows the appropriate plug-in or add-on to do so, which it would usually use for such a content type.
You can use the 您可以将download attribute as a standalone attribute, as shown in the first example with the PDF document. download属性用作独立属性，如PDF文档的第一个示例所示。The name of the file that gets downloaded matches the specification in 下载的文件名与href (here, document.pdf). href（此处为document.pdf）中的规范相匹配。If the link in 如果href doesn’t contain a meaningful name, you can also assign a different name to the download attribute, as is the case in the example with the MOV movie whose actual document name is ganges.mov, but the download name of the file is movie.mov. href中的链接不包含有意义的名称，您还可以为download属性分配一个不同的名称，就像MOV电影的例子一样，它的实际文档名称是ganges.mov，但文件的下载名称是movie.mov。The example with the HTML document is only intended to demonstrate that even typical web browser content types such as an HTML document with the attribute HTML文档的示例仅旨在证明，即使是典型的web浏览器内容类型，如具有属性download are really only provided for download. Note, however, that this attribute only works if you try the example online.download的HTML文档，实际上也只提供下载。但是请注意，此属性仅在您在线尝试示例时有效。
Informing Visitors about What Gets Downloaded通知访问者下载的内容
As is the case with linking to non-HTML documents, you should let readers know what they are downloading and what they can use to view or reuse the document. For example, if you provide Excel spreadsheets with an annual revenue report for download, you should inform the reader what software they need to view the spreadsheet.与链接到非HTML文档的情况一样，您应该让读者知道他们正在下载什么，以及他们可以使用什么来查看或重用文档。例如，如果您提供带有年度收入报告的Excel电子表格供下载，您应该告知读者他们需要什么软件来查看电子表格。
The same applies to ZIP archives. Here, too, you should add an additional note on how to unpack such an archive or a link to the relevant software. ZIP档案也是如此。在这里，您也应该添加一个关于如何解压缩此类存档的额外说明或相关软件的链接。Keep in mind that many visitors don’t know what to do with file extensions such as *.odt, *.xls, *.zip, *.tar.bz, and so on. 请记住，许多访问者不知道如何处理文件扩展名，如*.odt、*.xls、*.zip、*.tarbz等。You mustn’t take this for granted just because you deal with countless data formats every day. 你不能仅仅因为每天处理无数数据格式就认为这是理所当然的。It’s recommended to include the file size when downloading. You could thus note the download of a large ZIP archive as follows:建议在下载时包含文件大小。因此，您可以注意到大型ZIP存档的下载如下：
...
<a title="Annual revenue in Excel format packed into a ZIP archive".
href="archive.zip" download="annualrevenue2020.zip">
Annual revenue 2020 (ZIP archive; 2.5 MB)</a>
<small>(To unpack the ZIP archive, you need a
packing program such as 7-Zip. The annual revenue figures are
maintained in Excel format and thus require
software that can view Excel spreadsheets.)
</small>
...
Next to the 在title attribute, I’ve specified the file format (here, a ZIP archive) as well as the file size. In addition, I’ve written some small-print information between <small> and </small>.title属性旁边，我指定了文件格式（这里是ZIP存档）以及文件大小。此外，我在<small>和</small>之间写了一些小字信息。
5.2.7 Setting Links to Specific Parts of a Web Page设置指向网页特定部分的链接
Nothing can be more annoying for visitors than reading a long scientific treatise of a specific topic on a web page and having to scroll up and down for a long time to get to a specific section. 对于访问者来说，没有什么比在网页上阅读一篇关于特定主题的长篇科学论文更烦人的了，而且必须长时间上下滚动才能到达特定的部分。For those cases, you can set anchors with the global attribute 对于这些情况，您可以使用全局属性id, which you can jump to via an ordinary link in the a element. id设置锚点，您可以通过a元素中的普通链接跳转到该锚点。For an example of such target anchors, view any Wikipedia page’s table of contents of a topic. 要查看此类目标锚点的示例，请查看任何维基百科页面的主题目录。To link to a specific section of a web page, you only need the following:要链接到网页的特定部分，您只需要以下内容：
-
An anchor (jump marker) that you can create with the您可以使用id="anchorname"attribute, for example:id="anchorname"属性创建锚点（跳转标记），例如：<h1 id="anchorname">Heading xyz</h1>
-
A link pointing to the anchor via用href="#anchorname". For this purpose, the hash character#is written in front of the anchor name, for example:href="#anchorname"创建指向锚点的链接。为此哈希字符#写在锚点名称前面，例如：<a href="#anchorname">Go to heading xyz</a>
Here’s a simple example of how you can set and use such jump markers in practice:以下是一个简单的示例，说明如何在实践中设置和使用此类跳转标记：
...
<h1 id="top">Table of contents</h1>
<ul>
<li><a href="#intro">Introduction to HTML</a></li>
<li><a href="#syntax">The Syntax of HTML</a></li>
<li><a href="#versions">Versions of HTML</a></li>
<li><a href="#techniques">Techniques around HTML</a></li>
<li><a href="#practice">Getting Started</a></li>
</ul>
<h1 id="intro">Introduction to HTML</h1>
<p>Lorem ipsum dolor sit amet ... <p>
<p><a href="#top">To Table of Contents</a></p>
<h2 id="syntax">The Syntax of HTML</h2>
<p>Lorem ipsum dolor sit amet ... <p>
<p><a href="#top">To Table of Contents</a></p>
<h2 id="versions">Versions of HTML</h2>
<p>Lorem ipsum dolor sit amet ... <p>
<p><a href="#top">To Table of Contents</a></p>
<h2 id="techniques">Techniques around HTML</h2>
<p>Lorem ipsum dolor sit amet ... <p>
<p><a href="#top">To Table of Contents</a></p>
<h2 id="practice">Getting Started</h2>
<p>Lorem ipsum dolor sit amet ... <p>
<p><a href="#top">To Table of Contents</a></p>
...
Listing 5.14 /examples/chapter005/5_2_7/index.html
Figure 5.22 shows the example in the web browser. Thanks to jump markers, you can reach the desired section more quickly here.图5.22显示了web浏览器中的示例。借助跳跃标记，您可以在此处更快地到达所需的部分。
Figure 5.22
Jump Markers Are Provided for Users to Reach Desired Sections Quickly为用户提供跳转标记，以便快速到达所需的部分
For example, if you activate the Techniques around HTML link, it will jump directly to the corresponding section with the jump marker, as you can see in Figure 5.23. 例如，如果您激活Techniques around HTML链接，它将直接跳转到带有跳转标记的相应部分，如图5.23所示。Another link to jump back to the table of contents has also been added below each section.每个部分下方还添加了另一个跳转回目录的链接。
Figure 5.23
Clicking the “Techniques around HTML” Link Jumps the User Directly to the Corresponding Section点击“HTML技术”链接，用户可以直接跳转到相应的部分
Setting Anchors Using the “id” Attribute使用“id”属性设置锚点
Before you can create a link to a specific part within a web page, you must set the jump marker (or an anchor) using the global 在创建指向网页中特定部分的链接之前，必须在打开的HTML标记中使用全局id attribute (id="anchorname") within an opening HTML tag. id属性（id="anchorname"）设置跳转标记（或锚点）。In the example, this was done for the main headings 在这个例子中，这是针对主标题<h1> and <h2> (e.g., <h2 id="techniques">). <h1>和<h2>完成的（例如，<h2 id="techniques">）。The attribute value of id的属性值必须以字母或下划线（绝不是数字）开头，并且不能包含任何空格。建议使用描述性名称，以避免迷失方向。id must start with a letter or an underscore (never a number) and mustn’t contain any spaces. It’s also advisable to use a descriptive name to avoid losing track. You shouldn’t use meaningless designations such as 您不应该使用无意义的名称，如anchor1, anchor2, and so on. Also note that this is case-sensitive.anchor1、anchor2等。还要注意，这是区分大小写的。
Referencing an Anchor Using “#anchorname”使用“#anchorname”引用锚点
To use a link to the anchors, you need to specify the attribute value for the anchor in 要使用指向锚点的链接，您需要在开头href in the opening <a> tag. <a>标签的href中指定锚点的属性值。For example, if the anchor is 例如，如果锚点是<h2 id="techniques">, you want to write the hash character # in front of the anchor name (here, "techniques"). <h2 id="techniques">，你想在锚点名称前写下哈希字符#（这里是"techniques"）。With reference to our example, you’d have to write this as follows:参考例子，你必须这样写：
<li><a href="#techniques">Techniques around HTML</a></li>
If you activate this link, the HTML document will jump to the element where the value of the 如果您激活此链接，HTML文档将跳转到id attribute is "techniques". id属性值为"techniques"的元素。In this example, that would be the 在这个例子中，这将是标题为“围绕HTML的技术”的h2 element with the heading Techniques around HTML.h2元素。
Creating Links to a Specific Section of Another Website创建指向其他网站特定部分的链接
Likewise, you can create a link to a section of another HTML document. This requires that the other HTML document contains a corresponding anchor. If the anchor is in another document, you can create a reference to it as follows:同样，您可以创建指向另一个HTML文档某个部分的链接。这要求其他HTML文档包含相应的锚点。如果锚点位于另一个文档中，则可以按如下方式创建对它的引用：
<a href="tech.html#techniques">Techniques around HTML</a>
This would cause a jump to the section with the 这将导致跳转到位于同一目录中的另一个HTML文档中带有#techniques anchor in another HTML document located in the same directory and whose filename is tech.html.#technologies锚点的部分，该文档的文件名为tech.html。
If the file with the anchor is even on another website, you must specify the complete URL there:如果带有锚点的文件甚至在另一个网站上，您必须在那里指定完整的URL：
<a href="http://www.domain.com/path/tech.html#techniques">...</a>
Of course, it’s also possible to use a link to parts of third-party websites. However, it goes without saying that you can’t set an anchor here, but only link existing anchors. For example, here’s a link to an anchored section of a Wikipedia page:当然，也可以使用第三方网站的部分链接。然而，不用说，你不能在这里设置锚点，而只能链接现有的锚点。例如，这里有一个指向维基百科页面锚定部分的链接：
<a href="https://en.wikipedia.org/wiki/HTML#Versions">...</a>
Here, you’d jump directly to the Wikipedia page with the entry 在这里，您可以直接跳转到维基百科页面，其中包含HTML to the #Versions anchor. #Versions锚点的HTML条目。This is based on the assumption that the anchor exists—which was still the case when the book went to press, but could change at any time. 这是基于锚存在的假设——这本书付印时仍然如此，但随时都可能改变。If the anchor no longer exists or is wrong, the website will be called, and the anchor will get ignored as if 如果锚点不再存在或错误，则将调用网站，并且锚点将被忽略，就像链接到#anchorname hadn’t been specified when linking to the a element.a元素时没有指定#anchorname一样。
5.2.8 Creating Links to Phone Numbers创建电话号码链接
Because more and more users mostly go online with a mobile device, you can also create a link to a phone number. When the user taps on it, this number can be called directly from the website. 因为越来越多的用户大多使用移动设备上网，你也可以创建一个电话号码的链接。当用户点击它时，可以直接从网站拨打这个号码。However, the respective web browser must also support this function. This is shown in the following example:但是，相应的web浏览器也必须支持此功能。如下例所示：
…
<p>
Customer Service Rheinwerk Publishing:
<a href="tel:+1.781.228.5070.200">+1.781.228.5070 Ext. 200</a>
</p>
…
Listing 5.15 /examples/chapter005/5_2_8/index.html
The phone reference starts with 电话号码以tel: followed by the number. It’s recommended to use the plus sign and the country code and to omit the leading 0 in the area code. tel:开头，后跟号码。建议使用加号和国家代码，并省略区号中的前导0。Spaces can be written as a period. Because it depends on the web browser whether or not the number gets dialed immediately, you should also list the phone number.空格可以写成句点。因为这取决于网络浏览器是否会立即拨打号码，所以您还应该列出电话号码。
You can also set other services such as Skype as a link, which allows you to start a Skype session with one click. The prerequisite for this is, of course, that the user also uses Skype. A Skype example is shown here:您还可以将Skype等其他服务设置为链接，这样您就可以一键启动Skype会话。当然，前提是用户也使用Skype。Skype示例如下：
…
<p>
Start a Skype call:
<a href="skype:pronix74">Skype: pronix74</a>
</p>
…
Listing 5.16 /examples/chapter005/5_2_8/index.html
Again, there’s no guarantee that the web browser will start a Skype session, so you should also list the appropriate data. The same applies to FaceTime.同样，不能保证网络浏览器会启动Skype会话，因此您还应该列出相应的数据。FaceTime也是如此。
Automatic 自动的“tel:”
There are mobile web browsers, such as Safari, which automatically recognize a phone number and generate a tel: link from it. 有一些移动网络浏览器，如Safari，可以自动识别电话号码并从中生成tel: link。This is convenient, but perhaps not always desirable, especially when the number in question isn’t a phone number at all. 这很方便，但可能并不总是可取的，尤其是当所讨论的号码根本不是电话号码时。There are 有meta tags available for this, which you can use to instruct the web browser not to use this feature on the web page.meta标签可用于此，您可以使用它来指示web浏览器不要在网页上使用此功能。
For Safari:
<meta name="format-detection" content="telephone=no">
For BlackBerry:
<meta http-equiv="x-rim-auto-match" content="none">
5.2.9 HTML Attributes for the HTML Element <a>HTML元素<a>的HTML属性
Finally, the HTML attributes for the links should be explained here, which can be quite useful for search engines, among other things. 最后，这里应该解释链接的HTML属性，这对搜索引擎等非常有用。In Table 5.2, you can see an overview of all existing attributes for the 在表5.2中，您可以看到a element. You already know some of them.a元素的所有现有属性的概述。你已经知道其中一些了。
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Table 5.2
Attributes for Links with the <a> Element带有<a>元素的链接的属性