網頁程式設計學習紀錄(四) HTML 超連結與圖片包含以下九個部分： URI的類型 ... 當所要連結的文件和超超連結的文件位於相同伺服器或相同資料夾時，就 ...
關閉廣告
IvanKao的部落格
跳到主文
我把自己學習的歷程記錄在這個部落格。
喜歡自己研究，然後沉浸在失敗中除錯，也時常一邊學習一邊將網路上、書籍上的資訊整理起來，或許能幫助遇上同樣問題的朋友。
部落格全站分類：不設分類
相簿
部落格
留言
名片
Mar23Fri201816:52
網頁程式設計學習紀錄(四)HTML超連結與圖片
網頁程式設計學習紀錄(四)HTML超連結與圖片
包含以下九個部分：
URI的類型
標示超連結-元素
指定相對URL的路徑資訊-元素
指定文件之間的關聯-元素
建立書籤
嵌入圖片
影像地圖-
4.指定文件之間的關聯-元素
元素用來指定目前文件與其他文件之間的關聯，其中stylesheet表示連結外部的CSS樣式表檔案
常見關聯如以列表整理：
關聯
說明
appendix
附錄
alternate
替代表示方式
author
作者
contents
內容
index
索引
glossary
名詞解釋
copyright
版權宣告
next
下一頁(和rel=一起使用)
pre
上一頁(和rev=一起使用)
start
第一個文件
help
線上說明
bookmark
書籤
stylesheet
CSS樣式表
search
搜尋
top
首頁
元素要放在
元素裡面，並且沒有結束標籤
以下以列表整理其屬性：
屬性
說明
charset="..."
指定正在建立關聯之文件的字元編碼方式
href="uri"
指定正在建立關聯之文件的的相對或絕對位址
hreflang="language-code"
指定href屬性值的語系
name="..."
指定名稱給正在定義的關聯
rel="..."
指定目前文件到與其他文件的關聯
rev="..."
指定目前文件到與其他文件的反向關聯
target="..."
指定目標框架的名稱
type="content-type"
指定內容類型
media="{screen,print,projection,braille,speench,tv,handle,all}"
指定目的媒體類型(螢幕；印表機、投影機、點字機、聲音合成器、電視、可攜式裝置、全部)，預設值為all
5.建立書籤
當網頁內容超過一頁十，為了方便使用者瀏覽資料，可以針對網頁上的主題建立書籤
建立書籤分為兩個部分：
在終點使用
元素的name屬性指定書籤名稱
在起點使用元素的href屬性指定所連結的書籤名稱
以下為範例，點選跳轉後，頁面即會跳轉到書籤的位置：
點此跳轉
內容
內容
內容
內容
內容
內容
內容
內容
內容
內容
內容
內容
內容
內容
內容
內容
內容
書籤
內容
內容
內容
6.嵌入圖片
除了文字外，HTML文件還可以包含圖片、聲音、影片或其他HTML文件
![]()
元素在HTML文件中嵌入圖片，該元素沒有結束標籤
以下列表整理其屬性：
屬性
說明
src="uri"
指定圖片的相對或絕對位址
name="..."
指定圖片的名稱，供Scripts、Apples或書籤使用
alt="..."
指定圖片的替代文字
longdesc="uri"
指定圖片的說明文字
width="n"
指定圖片的寬度(n為像素數)
height="n"
指定圖片的高度(n為像素數)
align="{left,right,center,middel,bottom}"(Deprecated)
指定圖片的對齊方式
border='n"(Deprecated)
指定圖片的框線粗細(n為像素數)
hspace='n"(Deprecated)
指定圖片的水平間距(n為像素數)
vspace='n"(Deprecated)
指定圖片的垂直間距(n為像素數)
ismap
指定圖片為伺服器端的影像地圖
usemap="uri"
指定影像地圖所在的檔案位址及名稱
lowsrc="uri"
指定低解析度圖片的相對或絕對位址
crossorigin="..."
指定圖片允許跨文件存取
(1)圖片的高度、寬度、框線
使用src指定圖片的相對或絕對位置
還可以透過height、width、border屬性指定圖片的高度、寬度、框線
若沒有指定高度、寬度，會以原始大小來顯示
若沒有指定框線，通常預設值為沒有框線
(2)圖片的對齊方式
![]()
的align屬性提供了left(靠左)、right(靠右)、top(靠上)、bottom(靠下)等對齊方式
不過這些建議使用之後的CSS將之取代
7.影像地圖-
