Html5之基礎-5 HTML圖像、連接

1、URL

目錄結構

  （1） 目錄就是 Web 站點中文件夾的名稱

      - 包含多個目錄

      - 每一個目錄包含站點的不一樣部分

  （2） Web 站點的主目錄，稱爲 Web 站點的根目錄

      - 位於根目錄下的其餘文件夾，稱爲子目錄

      - 每一個子目錄下都會包含具體功能的下一級子目錄

URL

  （1） URL （Uniform Resource Locator）: 統一資源定位器，用來標識網絡中的任何資源

      - 文本、圖片、音視頻文件、段落，或其餘超文本

  （2） 即路徑，指從當前位置到目標位置鎖通過的路線

  （3） 路徑在 Web 頁面主要有三種形式

      - 絕對路徑

      - 相對路徑

      - 根相對路徑

絕對路徑

  （1） 指的是文件從高級目錄下開始的完整的路徑，不管當前路徑是什麼，使用絕對路徑老是能找到要連接的文件

  （2） 即完整的 URL 組成

      - 協議、主機名、目錄路徑、文件名

        http://www.w3c.org/TR/CSS/syndata.html

        http://          : 協議名稱（用://分隔）

        www.w3c.org      : 主機名

        /TR/CSS/         : 目錄路徑 

        syncdata.html    : 要連接的文件名

相對路徑

  （1） 相對路徑        

      - 指文件的位置是相對於當前文件的位置，它包括目錄名，或指向一個能夠從當前目錄出發找到該文件的路徑

2、圖像

圖像格式

  （1） JPEG(圖形 圖像聯合專家組，Join Photopraphic Experts Group)

      - 採用有損壓縮算法，壓縮比較大

  （2） GIF(圖形接口格式，Graphics Interface Format)

      - 使用256色的方法來壓縮圖像，色彩會有較大的失真

      - 主要用於線條爲主的圖像，或者圖像面幅很小時，另外GIF支持動畫和透明圖像    

  （3） PNG(可移植網絡圖形，Portable Network Graphic)

      - 採用無損壓縮，有8位，24位，32位三種形式

      - 支持透明色(PNG24位不支持)，但不支持動畫

      - 顯示顏色可達1670萬種

圖像元素<img>

  （1） 使用 <img> 元素將圖像添加到頁面

      - 空標記

  （2） 必須屬性: src

  （3） 經常使用屬性: width、height

        <img width="100" src="img/rose.jpg" /> 

3、連接

連接元素<a>

  （1） 使用 <a> 元素建立一個超級連接，語法以下:

  （2） <a href="" target="">文本</a> 

      - href   屬性: 連接 URL

      - target 屬性: 目標，可取值爲_blank、_self等

      - name   屬性: 錨點名稱

連接的表現形式

  （1） 目標文檔爲下載資源

        <a href="download.zip">下載</a>

  （2） 電子郵件連接

        <a href="mailto:jason@163.com">聯繫咱們</a>

  （3） 返回頁面頁頂部的空連接

        <a href="#">...</a>

  （4） 連接到 JavaScript

        <a href="javascript:...">JS 功能</a>

錨點

  （1） 錨點是文檔中某行的一個記號

      - 用於連接到文檔中的某個位置

  （2） 錨點是文檔中某行的一個記號

      - 定義錨點

        <a name="achorname1">錨點一</a>   

      - 連接到錨點：在錨點名前加上#

        <a href="#achorname1">...</a> 

                          若是文本/圖像與錨點存在同一個頁面

        <a href="頁面URL#achorname1">...</a> 

                          若是文本/圖像與錨點存在不一樣頁面

總結：本章內容主要介紹了下 HTML圖像、連接的使用方法。