技術類文章

金魚也能學會寫網頁-換行、強調、插入圖片與連結

一開始只是興趣使然，寫了一篇關於網頁框架的簡單筆記，不過幾經思考後，還是想把它寫成網頁相關的系列筆記，希望在忘了一些東西時，能有個地方可以快速找回記憶。☺️

💡 Hint: 以下筆記內容所使用的作業系統為"Windows 10"

📝 換行

在 HTML 文件中有要換行的地方時，可以利用<br>元素來強制換行。

📓 <br>元素

  • <br>元素只有開始標籤而沒有結束標籤，像這樣的元素就稱為"空元素"或是"單標籤"
1
2
3
<p>範例文字1<br>範例文字2<br>範例文字3</p>

<p>範例文字1範例文字2範例文字3</p>

📝 強調重點

若有特別重要的字句，可以透過<strong>元素進行重點標示。

📓 <strong>元素

  • 多數瀏覽器會以"粗體"顯示<strong>元素內的字句
  • 不要為了顯示粗體字而刻意使用<strong>元素，這裡粗體的意義是凸顯出"重點"，要將文字以"粗體"顯示，另有其他方式
1
<strong>強調的字句內容</strong>

📝 插入圖片

在 HTML 文件中要插入圖片，可以使用<img>元素。

📓 <img>元素

  1. src 屬性: 標記圖檔的路徑
  2. width、height 屬性: 規範圖片的尺寸大小
  3. alt 屬性: 在圖片無法正常顯示時，會顯示的替代文字
1
2
<img src="https://bit.ly/3CaEZKg" width="320" height="320" alt="替代文字">
<img src="https://bit.ly/3CaEZKgd" width="320" height="320" alt="替代文字">

📝 設定連結

在 HTML 文件中要插入超連結，可以使用<a>元素。

📓 <a>元素

1. 網頁內部連結

  • 透過不同區塊上設定的 id 屬性名稱進行同一頁面上的跳轉
  • 以 #id名稱 的形式撰寫連結
1
2
3
4
5
<ul>
    <li><a href="#content1">項目一</a></li>
    <li><a href="#content2">項目二</a></li>
    <li><a href="#content3">項目三</a></li>
</ul>

2. 外部網站連結

  • 直接使用外部網站連結即可
  • 若想在新分頁開啟網頁，可設定target="_blank"
1
2
<a href="https://www.google.com.tw/">https://www.google.com.tw/</a><br><br>
<a href="https://www.google.com.tw/" target="_blank">https://www.google.com.tw/</a><br><br>

📝 版權宣告

網頁中的免責條款、法律規範、版權宣告等注意事項，通常會以較小的文字顯示，可以使用<small>元素進行標示。

📓 <small>元素

  • 若僅是要讓文字看起來比較小，而不是為了賦予文字特殊意義，則不建議使用<small>元素
1
<small>Copyright &copy; Xiang All Rights Reserved.</small>

🚀 BONUS: 絕對路徑與相對路徑

📓 絕對路徑

📓 相對路徑

  • 相對路徑是指"現在所在位置"與"目的檔案"之間的相對位置關係
路徑表示法 代表意義
../ 上一層
./ 同一層
/ 下一層

  • 假設檔案結構如下:

    從 folder1 出發到 C.html 的路徑是 folder2/folder3/C.html
    從 C.html 出發到 folder1 的路徑是 ../../../
    從 C.html 出發到 B.html 的路徑是 ../../B.html

  • 根目錄相對路徑: 固定從根目錄出發

分享到