Shiny

一分鐘學前端(2):在 HTML 中加入圖片

October 07, 2019 #HTML#一分鐘學前端

圖片是網頁重要的元素之一,可以讓你的網頁變得非常豐富,就如同 第一篇文章 我的截圖一樣,可以先看到最後的成果,在了解怎麼達成的,要加入圖片在網頁中很簡單,完整的程式碼如下:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    HTML
    <img src="https://shinychang.net/static/4b01f6f30d7488a25755a71ca7d06b03/0f7c5/CleanShot%202019-10-05%20at%2019.09.52%402x.jpg" />
  </body>
</html>

可以看到我只有增加了一行

<img src="https://shinychang.net/static/4b01f6f30d7488a25755a71ca7d06b03/0f7c5/CleanShot%202019-10-05%20at%2019.09.52%402x.jpg" />

下載我的第二個網頁 HTML,然後在下載的資料夾裡面點兩下打開他,你就寫好了有圖有文的網頁了!(如下圖)

CleanShot 2019 10 07 at 16 10 38 2x

前一篇文章說到的標記正確的名詞是標籤(Tag),大多數得標籤需要是成對的,有開始有結束,但是少數標籤是不需要在開始與結束中間加入任何內容的,譬如說這次介紹的 <img /> 是屬於自我封閉(self-closing)的標籤。

另外也看到了新的寫法在 HTML 標籤上,格式如下

<Tag attribute="value" />
  • Tag 就像是 html, bodyimg 這類型的
  • attribute 就像是 src
  • value 就像是 https://shinychang.net/static/4b01f6f30d7488a25755a71ca7d06b03/0f7c5/CleanShot%202019-10-05%20at%2019.09.52%402x.jpg

每種標籤(Tag)都會有不同的屬性(attribute)可以設定,不過已經超出這次的範圍了,未來會在介紹一些常用的標籤以及屬性


Shiny

Experienced JavaScript / Node.js engineer & team lead.
Twitter Facebook Medium LinkedIn GitHub Email