1. 程式人生 > >html圖像、絕對路徑和相對路徑,鏈接

html圖像、絕對路徑和相對路徑,鏈接

jpg 彈出 足夠 log 路徑和 文件的 加載失敗 索引 markdown

html圖像

<img>標簽可以在網頁上插入一張圖片,它是獨立使用的標簽,通過“src”屬性定義圖片的地址,通過“alt”屬性定義圖片加載失敗時顯示的文字,以及對搜索引擎和盲人讀屏軟件的支持。

<img src="images/pic.jpg" alt="產品圖片" />

絕對路徑和相對路徑

像網頁上插入圖片這種外部文件,需要定義文件的引用地址,引用外部文件還包括引用外部樣式表,javascript等等,引用地址分為絕對地址和相對地址。

絕對地址:相對於磁盤的位置去定位文件的地址
相對地址:相對於引用文件本身去定位被引用的文件地址

絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件,相對路徑就沒有這個問題。相對路徑的定義技巧:

“ ./ ” 表示當前文件所在目錄下,比如:“./pic.jpg” 表示當前目錄下的pic.jpg的圖片,這個使用時可以省略。

“ ../ ” 表示當前文件所在目錄下的上一級目錄,比如:“../images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。

html鏈接

<a>標簽可以在網頁上定義一個鏈接地址,通過src屬性定義跳轉的地址,通過title屬性定義鼠標懸停時彈出的提示文字框。

<a href="#"></a> <!--  # 表示鏈接到頁面頂部   -->
<a href="http://www.itcast.cn/" title="跳轉的傳智播客網站">傳智播客</a>
<a href="2.html">測試頁面2</a>

定義頁面內滾動跳轉

頁面內定義了“id”或者“name”的元素,可以通過a標簽鏈接到它的頁面滾動位置,前提是頁面要足夠高,有滾動條,且元素不能在頁面頂部,否則頁面不會滾動。

<a href="#mao1">標題一</a>
......
......
<h3 id="mao1">跳轉到的標題</h3>

html圖像、絕對路徑和相對路徑,鏈接