HTML&CSS基础篇之八：链接

来源：互联网发布：微博个性域名二次修改编辑：程序博客网时间：2024/05/31 11:04

代码：

<html>  <head>    <title>Starbuzz Coffee</title>    <style type="text/css">      body {        background-color: #d2b48c;        margin-left: 20%;        margin-right: 20%;        border: 1px dotted gray;        padding: 10px 10px 10px 10px;        font-family: sans-serif;      }    </style>  </head>  <body>    <h1>Starbuzz Coffee Beverages</h1>    <h2>House Blend, $1.49</h2>    <p>A smooth, mild blend of coffees from Mexico,           Bolivia and Guatemala.</p>    <h2>Mocha Cafe Latte, $2.35</h2>    <p>Espresso, steamed milk and chocolate syrup.</p>    <h2>Cappuccino, $1.89</h2>    <p>A mixture of espresso, steamed milk and foam.</p>    <h2><a id="chai">Chai Tea, $1.85</a></h2>    <p>A spicy drink made with black tea, spices,            milk and honey.</p>    <p>      Read about <a href="mission.html" title="Read more about Starbuzz Coffee's important mission">our Mission</a>      <br>      Read the <a target="_blank" href="http://buzz.headfirstlabs.com#Coffee" title="Read all about caffeine on the Buzz">Caffeine Buzz</a>    </p>  </body></html>

域名

www.starbuzzcoffee.com

www 域中的特定服务器
starbuzzcoffee.com 域名
不同的用途的域的结尾也不同 .com,.org,.gov,.edu。
不同国家的域: .co.uk, co.jp之类

域名由一家权威机构（ICANN）控制。

区别：
starbuzzcoffee.com 是域名
www.starbuzzcoffee.com 是网站名

URL (Uniform Resource Locators,统一资源定位符）

URL是一个全球性地址，用于定位网上的资源，包括HTML页、音频、视频，以及其他形式的网上内容。
为了指定资源的位置，URL同时也包含用于接收资源的协议名。

http://www.starbuzzcoffee.com/index.html

http:// URL的开头部分告诉用来接收资源的协议。通过http协议传输数据。
www.starbuzzcoffee.com 网站名。
/ 代表根目录。
index.html 网页文件名。从根目录到资源的绝对路径。

HTTP协议

HTTP是超文本传输协议（HyperText Transfer Protocol)。也就是说，是网上传送超文本文件的一致方法（协议）。
HTTP是个简单的请求-响应协议。

绝对路径

绝对路径是URL中的部分。
就是协议（http）和网站名之后的部分。
绝对路径告诉浏览器如何从根目录去获取特定的页面或文件。

组装URL

通过根目录开始
添加每个你经过的文件夹
在文件夹名称之间添加“/”来分隔。
添加文件名。

协议部分告诉浏览器获取资源的方式

网站名部分们（由服务器名+域名组成）告诉浏览器从互联网上哪台计算机获取资源。

绝对路径告诉浏览器你在寻找什么页面。

当你点击一个相对链接时，浏览器会在后台根据相对路径和你所点击的网页的路径生成一个绝对路径。

请求目录

当Web服务器接收到这类目录请求时，它会尝试在目录中定位默认文件。通常默认文件名为”index.html或者”default.htm”。如果服务器找到其中的一个文件，它会把此文件返回给浏览器显示。默认文件由你的主机代理商所用的服务器类型而定。

如果访问没有结尾斜杠，服务器会为你添加一个斜杠。

默认网页如何工作

用户在浏览器中输入http://www.starbuzzcoffee.com/drinks/
HTTP请求：我可以获得文件”/drinks/”吗
服务器说：“这看起来像一个目录，这个目录下有默认文件吗？
服务器在drinks目录下定位到默认文件 “index.html”
HTTP响应：你请求一个目录，但是我在该目录下找到“index.html,所有我返回了该文件。

怎么链接到其他网页

<a href="http://buzz.headfirstlabs.com">Caffeine Buzz</a>

链接到网上的资源，只需要该资源的URL，把它放在<a>元素中作为href属性的值。

两种途径链接到页面

相对路径只能用于链接同一网站内的页面。
URL通常用来链接到其他网站。

使用URL缺陷

1.可读性降低。长难编辑
2.可维护性降低。移动网站或者修改网站名时，使用URL很难维护，相对路径在这种情况下一般不需要修改。

补充：

其他协议：file:/// 是浏览器从你的电脑中读取文件时用的。注意：在文件中输入URL要三个斜线，而不是像HTTP那样的两个斜线。FTP，Mail 端口：如果网站名像个地址，那么端口就像该地址的邮箱号码HTTP默认为80端口。

添加标题使得链接更易理解

<a href="mission.html" title="Read more about Starbuzz Coffee's important mission">our Mission</a>

通常我们建议title的值应该和你链接的网页上的<title>元素值一致，但非硬性要求。

完善链接指南

让链接标签简短些。不要用整个句子或者大段文字来做链接标签。通常来说，几个词就好了。在title属性内添加附加信息。
注意链接标签要有提示性。绝不要使用类似:click here;this page这样无意义的标签。用户会先尝试从网页中寻找链接，然后在浏览网页。提供有意义的链接会增进网页的可用性。
避免把链接紧挨在一起：链接靠的太近的话，用户不易区别。

链接到一个页面

<a>元素有两种作用：

跳跃性，从一个页面到另外一个页面；
在页面中设置登录点或者链接的目的地。

使用`<a>`元素创建目的地

创建目标锚，三步骤

找到需要创建登录点的地方。可以是文本中的任意位置，不过通常是文章标题的一小部分。
用<a>元素把文本包围起来。
选择目的地的标识名，比如 “coffee”，并在<a>元素中插入id属性

<a id="chai">Chai Tea, $1.85</a>

如何链接到目的锚

无论是相对链接还是URL链接，都要在链接后边添加#，后边再加目标锚标识符。

相对链接

<a href="index.html">See Chai Tea</a>

URL链接

<a href="http://buzz.headfirstlabs.com#Coffee" title="Read all about caffeine on the Buzz">Caffeine Buzz</a>

补充：

关于属性顺序在任何元素中， 属性顺序都不重要。可以在id 属性中混用大小写字母，但是在href属性和目标锚id中，要确保字母大小写一致。在某文件中添加一个到该文件某目标锚的链接例子：在网页底部定义一个目标锚"top",在网页的底部有一个名叫"back to top"的链接。```<a href="#top">Back to top</a>```id 名字的规则：以一个字母开始，后面跟着字母、数字、连字符、下划线、冒号或者句号。不能使用空格。

使用target属性

<a target="_blank" href="http://buzz.headfirstlabs.com#Coffee" title="Read all about caffeine on the Buzz">Caffeine Buzz</a>

target属性告诉浏览器在哪里打开href属性指定的网页。
如果没有target,浏览器会在同一个窗口打开链接。
如果target是”_blank”,浏览器会在新的窗口打开链接。

补充：

如果全部`<a>`元素中的对象名都是"_blank"的话，那么每一个链接都会在新的空白窗口打开。要点：你不需要把所有对象那个都起名为"_blank"，如果你给它起另外一个名字，例如“coffee”，所有对象名为"coffee"的链接都会在相同的窗口打开，原因是当你给对象一个特定名称如"coffee"时，就为显示链接页的新窗口起好名字了。_blank是一个特例，它告诉浏览器总是使用一个新窗口。

要点

通常将网页发布到网上的最佳途径是找一家主机代理商
域名是一个独一无二的名字，用来标识网站的
主机代理商可以为你的域创建一个或者多个web服务器，服务器名字通常为“www”
FTP（文件传输协议）是一种把网页和内容传送到服务器上的常用方法。
FTP应用程序，提供图形用户界面让FTP的使用更加简单。
URL代表 uniform Resource Locator(统一资源定位符），或者叫网址，用于标识网络上的资源。
通常URL由一个协议，一个网站名和到资源的绝对路径组成。
HTTP是一种用于Web服务器和浏览器之间传送网页的请求/响应协议。
浏览器用文件协议从你的电脑中读取网页。
绝对路径是从根目录到文件的路径。
“index.html”和“default.htm” 都是默认页面。如果你只指定了目录而没有文件名，Web服务器会寻找默认页面返回给浏览器。
可以在<a>元素的href属性中使用相对路径或者URL链接到其他网页，要链接到自己的网站的其他页面，最好还是使用相对路径，对外部链接则使用URL。
使用id属性在页面中创建目标锚。在#后边跟目标锚id，用以链接到页面的特定位置。
要提高可读性，使用title属性来提供对<a>元素中的链接的描述。
使用target属性在新窗口中打开链接。同时,target属性可能会给使用不用设备和浏览器的用户带来问题。
基于Head First HTML 整理

阅读全文

0 0