（四）鏈接起來—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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。