技術標籤：前端html

HTML5–筆記

4. HTML常用標籤
   4.6 影象標籤和路徑(重點)

   1. 影象標籤和路徑
      在HTML標籤中,標籤用於定義HTML頁面中的影象.
      
      單詞image的縮寫.
      src是標籤的必須屬性,它用於指定影象檔案的路徑和檔名.

      影象標籤的其他屬性:
      屬性 屬性值 說明
      src 圖片路徑 必須屬性
      alt 文字 替換文字.影象不能正常顯示時會顯示該文字
      title 文字 提示文字.滑鼠放到影象上,顯示的文字
      width 畫素 設定影象的寬度
      height 畫素 設定影象的高度
      border 畫素 設定影象的邊框粗細

      注意:

      1. 影象標籤可以擁有多個屬性,必須寫在標籤名的後面
      2. 屬性之間不分先後,標籤名與屬性,屬性與屬性之間均以空格分開
      3. 屬性採取鍵值對的形式
      4. 只設置width時(或height),圖片的height(或width)會等比例縮放,所以一般只設置這兩個屬性中的一個就可以.
      5. border一般在CSS裡面設定

   2. 路徑(前期鋪墊知識)
      (1) 目錄資料夾和根目錄:
      實際工作中,我們的檔案不能隨便亂放,否則用起來很難快速的找到他們,因此我們需要一個資料夾來管理他們.
      目錄資料夾:就是普通資料夾,裡面只不過存放了我們作業面所需要的的相關素材,比如html檔案,圖片等.
      根目錄:開啟目錄資料夾的第一層就是根目錄.

      相對路徑:
      以引用檔案所在位置為參考基礎,而建立出的目錄路徑.
      

      這裡簡單來說,圖片相對於HTML頁面的位置

      相對路徑分類 符號 說明
      同一級路徑 影象檔案位於HTML同一級 如
      下一級路徑 / 影象檔案位於HTML下一級 如
      上一級路徑 …/ 影象檔案位於HTML上一級 如

      絕對路徑:
      是指目錄下的絕對位置,直接到達目標位置,通常是從碟符開始的路徑.
      例如: src = “D:\web\img\logo.gif” 或者 完整的網路地址 src = “http://www.itcast.cn/images/logo.giif”

      注意: 相對路徑用 “/” 絕對路徑描述磁碟位置用"", 描述網路地址用"/".

4.7 超連結標籤(重點)

	兩個屬性的作用如下:
	屬性	作用
	href	用於指定連結目標的URL地址,(必須屬性)當為標籤應用href屬性時,它就具有了超連結的功能.
	target	用於指定連結頁面的開啟方式,其中_self為預設值,_blank為在新視窗中開啟.
2. 連結分類:
	1. 外部連結,例如 <a href = "http://www.baidu.com"> 百度 </a>
	2. 內部連結:網站內部頁面之間的相互連結,直接連結內部頁面相對地址即可,例如<a href = "index.html"> 首頁 </a>
	3. 空連線:如果當時沒有確定連結目標時, <a href = "#"> 首頁 </a>(不會彈出新頁面,只是一個超連結形式)
	4. 下載連結:如果href裡面地址是一個檔案或者壓縮包,會下載這個檔案
	5. 網頁元素連結:在網頁中的各種網頁元素,如文字,影象,表格,音訊,視訊等都可以新增超連結.
	6. 錨點連結:點選該連結,可以快速定位到頁面中的某個位置.
		在連線文字的href屬性中,設定屬性值為 #名字 的形式,如 <a href = "#two"> 第二集 </a>
		找到目標位置標籤,在裡面新增一個 id屬性 = 名字, 如 <h3 id = "two"> 第二集介紹 </h3>

5. HTML中的註釋和特殊字元
   5.1 註釋
   如果需要在HTML文件中新增一些便於閱讀和理解但又不需要顯示在頁面中的註釋文字,就需要使用註釋標籤.

    <!--註釋語句--> 快捷鍵 ctrl + /
    一句話:註釋標籤裡面的內容是給程式設計師看的,這個程式碼是不執行不顯示到頁面中的.
   

   5.2 特殊字元
   在HTML頁面中,一些特殊字元很難或者不方便直接使用,此時我們就可以使用下面的字元來代替.
   特殊字元 描述 字元的程式碼
   空格符
   < 小於號 <
   > 大於號 >
   & 和號 &
   [注意]在html文件中直接輸入多個空格,最終只會顯示一個空格.