（四）链接起来—Web镇之旅

时间 2019-11-12

标签链接起来 web 之旅栏目 HTML 繁體版

原文原文链接

1.关于域名，域名是一个用来定位网站的、惟一名字。例如域名："www.starbuzzcoffee.com"中，其中，"www"是域中一个特定服务器的名字，“starbuzzcoffee.com”是域名，".com"是域名后缀，其余后缀还有".net、.cn"等css

2.注意域名和网站的区别，相似"www.starbuzzcoffee.com"、"corporate.starbuzzcoffee.com"等都是网站，而域名是"starbuzzcoffee.com"，因此域名能够用于多个网站。html

3.大多数web托管公司都支持FTP传输文件。用FTP向web服务器传送文件简单操做方法以下：web

①使用FTP软件链接到服务器，须要托管公司提供的账号和密码。浏览器

②使用'cd'命令把当前目录切换到须要传输文件的目标目录，也就是在传输文件以前确保当前目录是服务器上正确的、须要传输文件的目录。服务器

③使用"put"命令把文件上传到服务器。app

④使用"mkdir"能够在服务器上建立新目录ide

⑤用"get"命令能够从服务器下载至本地计算机oop

⑥其余常见命令："dir"，获得当前目录的文件列表；"pwd"显示当前目录；网站

4.在浏览器中输入的地址统称为URL（Uniform Resource Locators, 统一资源定位符是一个全局地址，能够定位HTML页面、音频、视频和不少其余形式的web内容）。对于一个形如"http://www.starbuzzcoffee.com/index.html"的URL来讲，第一部分即"http"指用来获取资源的协议，第二部分"www.starbuzzcoffee.com"是网站名，第三部分"index.html"是从根文件夹到目标资源的绝度路径。url

5.当浏览器向服务器请求一个目录而不是文件时，则服务器会把目录的默认文件返回给浏览器，默认文件一般为index.html或者default.htm。对于末尾没有'/'的目录请求，浏览器会自动补充。

***路径练习：

A. http://www.earlsautos.com/index.html 或 http://www.earlsautos.com/ 或 http://www.earlsautos.com
B. http://www.earlsautos.com/directions.html
C. http://www.earlsautos.com/cars/new/index.html 或 http://www.earlsautos.com/cars/new 或 http://www.earlsautos.com/cars/new/
D. http://www.earlsautos.com/cars/used/inventory.html
E. http://www.earlsautos.com/cars/new/images/minicooper.gif

6.url能够在HTML中使用，好比增长一个到其余网页的超连接，可使用<a>元素指定href属性：

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

7.使用相对连接连接同一网站中的页面，使用URL连接其余网站上的页面

8.A. <a>元素能够增长一个属性title显示连接的更多信息，用法以下：

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

运行效果：

B. 利用"id"属性容许直接访问页面的一个特定点。具体来讲，须要找到页面中须要直接访问的锚点位置，一般是标题，为其选择一个标识符名（必须是页面中惟一的标识符），并在元素的开始标记中插入id属性。例如要连接到Buzz网站的Coffee部分，步骤以下：

①首先查看Buzz网站Coffee部分的id，在浏览器中右键通常可查看源代码，找到相应位置及相应id属性,如图

能够看到Coffee部分的标识符是Coffee。

②用id连接到元素只须要在连接最后加一个＃和标识符，不管是URL仍是相对路径，因此能够在index.html中作出以下修改：

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

C.若是元素里有多个属性，则顺序是可有可无的

D.使用<a>元素的target属性，能够设置打开新链接是在新的窗口打开而不是覆盖原来的窗口：

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

9.完善连接的技巧：

①保证连接标签简洁，大段的文字或句子不要放在连接里，能够在title属性中额外提供

②保证连接的标签是有意义的

③不要把连接放在一块儿

填字练习：

本章代码：

index.html:

<html>
  <head>
    <title>Starbuzz</title>
    <style type="text/css">
        body {
              background-color: #d2b48c;
              margin-left: 20%;
              margin-right: 20%;
              border: 2px dotted black;
              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
        <em>Mexico, Bolivia, and Guatemala.</em>
    </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>Chai Tea, $ 1.85</h2>
    <p>
        A spicy dring made with black tea, spices,
        milk, and honey.
    </p>
	<p>
	  <a target="_blank" href="mission.html"
	     title="Read more about Starbuzz Coffee's important mission">our mission</a>
	  <br>
	  Read the <a target="_blank" href="http://wickedlysmart.com/buzz/index.html#Coffee"
	              title="Read all about caffeine on the Buzz">Caffeine Buzz</a>.
	</p>
  </body>
</html>

mission.html:

<html>
  <head>
    <title>Starbuzz Coffee's Mission</title>
    <style>
      body {
            background-color: #d2b48c;
            margin-left: 20%;
            margin-right: 20%;
            border: 2px dotted black;
            padding: 10px 10px 10px 10px;
            font-family: sans-serif
      }
    </style>
  </head>
  <body>
    <h1>Starbuzz Coffee's Misson</h1>
    <p>
        To provide all the caffeine that you need to power your life.
    </p>
    <p>
        Just drink it.
    </p>
  </body>
</html>