iT邦幫忙

2023 iThome 鐵人賽

DAY 5
0

1.絕對URL:
意思是網址包含完整路徑和位置,用於定位互聯網上的特定的資料。例如網頁、圖片、文件。
2.相對URL:
用於在網站內部連接不同頁面或資源,它們不需要包含完整的網址信息。
通常只包含資料夾和文件名稱。
相對URL的優點包括:
相對性:它們相對於當前文件的位置,因此不需要包含完整的網址,使得網站更容易維護和移植。
靈活性:當網站的結構發生變化時,相對URL可以較容易地適應變化,而無需修改完整的URL。
範例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>a</title>
    </head>
    <body>
        <!--絕對位置-->
        <ul>
            <li><a href="https://www.youtube.com/watch?v=s9hGDIpwfXw">匿名的好友</a></li>
        </ul>
        
        <!--相對位置-->
        <ul>
           <li> <a href="align.html">前往align頁面</a></li>
           
        </ul>
         <!--相對位置-->
        <ul> 
            <li><img src="OIP.jpg" alt="圖像"></li>
        </ul>
        
    </body>
</html>

呈現畫面:
https://ithelp.ithome.com.tw/upload/images/20230920/20163036kVobF9OCvq.png
3.指定相對路徑資訊<base>:
是 HTML 中的一個元素,它用來指定網頁中所有相對 URL 的基本 URL。
通常位於 <head> 部分,並且只能在一個 HTML 文件中出現一次。
作用是為相對 URL 提供一個基準點,以確定它們的完整 URL。

程式碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>網站首頁</title>
    <base href="file:///C:/Users/a0981/OneDrive/桌面/html/">
</head>
<body>
    <h1>歡迎來到網站</h1>
    <p>請參閱 <a href="hr.html">關於我們</a> 頁面。</p>
    <p>查看我們的 <a href="p.html">產品</a>。</p>
</body>
</html>

呈現畫面:
https://ithelp.ithome.com.tw/upload/images/20230920/20163036LCVTX4oT1p.png

  1. 書籤:
    在HTML中,可利用<a>來建立書籤,書籤通常是一種超連結,用於在同一頁面內快速跳轉到特定的位置。
    程式碼:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML書籤示例</title>
</head>
<body>
    <h1>HTML書籤示例</h1>
    
    <ul>
        <li><a href="#匿名的好友">匿名的好友</li>
        <li><a href="#會呼吸的痛">會呼吸的痛</li>
    </ul>
    <hr>

    <p><a name="匿名的好友">匿名的好友</a></p>
    <pre>杜松混合茉莉的風
        回憶裡被愛那股激動
        天色好紅 溫柔好濃
        在胸口浮現 你的臉容
        一起活在這城市迷宮
        提起你名字心還跳動 卻沒重逢

呈現畫面:

https://ithelp.ithome.com.tw/upload/images/20230920/20163036ayiIdXVcA3.png


上一篇
Day4區塊格式、文字格式、項目清單
下一篇
Day6圖片
系列文
學習網頁前端基本的技術,包含如何使用HTML標籤跟CSS做出基本的網頁版型,了解bootstrap template如何建置網頁架構。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言