img標籤使用方法
<img src="路徑/文件名.圖片格式" width="屬性值" height="屬性值" border="屬性值" alt="屬性值">
<img>標記的屬性
src :圖片的地址
border:圖片的邊框
width/height:寬高,默認爲圖片的元素高度。
alt:圖片未加載成功,顯示的文本。 用於搜索引擎獲取圖片信息
title:圖片提示。
align:對齊方式,left,right,bottom,top,center
其中left和right用來設置圖片在水平方向上的對齊方式,bottom,top,center屬於垂直方向上對齊方式
left 靠左對齊
right 靠右對齊
top 頂部對齊
bottom 底部對齊
center 居中對齊
注意:我們在網頁中,只是指定了圖片的路徑,源文件的大小不會受影響。
相對路徑和絕對路徑
絕對路徑:絕對路徑是指文件在硬盤上真正存在的路徑,例如:D:\wamp\lagou\abc.jpg
相對路徑:所謂相對路徑,就是相對於自己的目標文件位置?
如果在同一級目錄下 直接引用? 不管是文件夾還文件
如果在下一級目錄 img/1.jpg
如果在上一級 ../1.jpg
如果在上一級文件夾 ../img/1.jpg
注意:在 相對路徑裏常使用“../”來表示上一級目錄。如果有多個上一級目錄,可以使用多個“../”
a標籤-超鏈接使用
基本語法
a標籤 表示超鏈接
<a href="地址 網址 " target="打開標籤的位置"></a>
Target屬性有兩個值 :_self 表示在本頁面打開網址
_blank 表示在一個新瀏覽器標籤中打開
錨點作用: 作用是在本頁面鏈接
錨點用法: 在頁面標籤中(這個標籤不只是a標籤 其他標籤頁可以)設置name屬性 例如 name=“這裏寫值比如top”
具有name屬性的標籤就是a標籤中 href值中的地址 例如<a href="#top" ></a>
具體代碼:
<span name="top">位置1</span>
<a href="#top">點擊跳轉到位置1</a>
以上代碼執行過程 鼠標點擊a標籤位置 直接跳轉到具有name值等於top的標籤 也就是span