RD少女養成計畫
Vivian Yeh
更新於 2023/01/25閱讀時間約 10 分鐘

【自學程式】HTML 屬性是什麼？解析常見 HTML 屬性用法

在HTML程式語言中，有一種能讓 HTML 元素與其他程式語言（CSS、JavaScript）運作的更加順利的語法，它叫做「 HTML 屬性（HTML Attribute）」。
那HTML屬性是怎麼運作的呢？
在講解 CSS選擇器 的章節中，我們有提到如果想要將CSS的樣式，群組管理式套用在HTML上時，就必須搭配 HTML 類別（HTML Class），我們來看看HTML 是如何透過 HTML 類別，與 CSS 做溝通：
在 HTML 的程式碼中，HTML 類別Class = “color-red” 被塞在起始標籤內，且可以透過 CSS 選擇器來選到擁有該類別的 HTML 元素 p ，讓 p 元素變成紅色的。
而 HTML 類別實際上就是一種 HTML 屬性。
HTML屬性，是一種可以讓HTML元素更容易跟其他程式碼、傳遞訊息的語法。
HTML 屬性通常會以「屬性名稱 ＝”屬性值”」的方式呈現，最常聽到的術語為key = value，對於初學程式的人來說，屬性的呈現方式可能很難以理解。
但簡單來說，HTML 屬性就好像HTML元素上的更小的零件，如果 HTML 元素是車子輪胎，HTML 屬性就好像是輪胎的紋路、輪胎筐，這些小零件有固有的名稱，但你還是可以決定自己裡頭要怎麼樣的樣式。
像是我們可以為 HTML 類別命名，像是上方範例中的 Class = “color-blue”，類別的內容可以自定義，一種屬性可能會有不同的值（內容），class的名稱可能會有 color-orange 、任何你想要自定義的名稱。
但並不是所有的屬性值都可以自定義，有一些屬性會有自己預設的樣式，你只能從裡面選著用，達到不同的效果。
接下來我們就來看看有哪些常見的 HTML 屬性：

src 與 href 屬性

在 img 元素中，有一個必要存在的屬性 src，src 代表的意思就是英文的「來源（source）」縮寫，如在要在 HTML 文件中插入一張圖片，你就必須使用 src這個屬性，並在其中放入圖片的網誌或是圖片的路徑，沒有了 src 屬性，img元素就沒辦產生作用。
而 src 屬性不只有 img 才會有，我們常見要在 HTML 表尾引進 JavaScript 檔案的 script 元素，也一定用使用到 src 屬性，並在其中加入 JavaScript 檔案位置，才有辦法將 JavaScript 檔案與 HTML 文件連結，並產生操控網頁的效果。
與 src 類似功能的屬性還有 href（超連結：hyper reference），如果我們想要a標籤創造出超連結的效果，連到外部網站的內容，我們就需要使用到href的屬性，並在裡頭填入網址。
我們會發現，如果沒有在 a 元素加上href的屬性，它不會再游標移到連結上時出現點擊的圖示，甚至沒有預設的下底線樣式，即便有使用了 href 屬性，若是沒有正確填入網址，也沒有辦法真的連上任何一個外部的網站。
這裡可以討論一下，為什麼屬性 src 及 href 常常會變成debug時的盲點。
在做網頁開發時，很常會出現一些奇妙的小蟲子，初學者一開始在除錯的時候，常常去看「元素」本身是不是哪裡寫錯了，才沒有辦法讓效果好好呈現。
但最後都往往發現，可能是忘了加上 src 或是 href 的屬性，導致一些元素沒有辦法好好正確呈現。

type 屬性

在網頁開發中，還有另外一種網頁元素很常出現，那就是 input 標籤，藉由input 標籤，我們可以打造很多需要「輸入資料」的網頁效果，像是表單、按鈕、文字區塊等。
而要讓一個 input 標籤做出那麼多種變化，就少不了 html 裡的 type 屬性了。
透過 type 屬性，我們可以變更網頁元素的呈現方式。
根據 MDN文件 說明，type 屬性存在於八種html標籤裡，像是 button、input、embed、link、object、script、source 及 style 等可以更改元素資料種類的標籤。
這是什麼意思呢？舉我們常使用的 input 標籤來做範例。
在範例中我使用了五種不同的 type 屬性來呈現不一樣的 input 標籤效果，光是改變 type 屬性的值，就可以讓 input 標籤產生高達至少二十二種的變化，今天舉常見的五個例子來做說明。
在一個網頁中，我們會在 input 上加入 type=”text” 屬性，來創造能讓使用輸入文字的區塊，要注意的是，text 這種呈現 input 區塊的方式，可以讓使用者輸入任意形式的文字種類，可以作為留言、意見回饋等的功能。
但另外一種同樣作為文字區塊的 type=”email” 屬性值所代表的意義就不同了，當我們決定用 email 的值來呈現 input 元素，就代表使用者只能在這個這個區塊中輸入含有 @ 符號的電子信箱格式。
如果電子信箱格式不正確的話，瀏覽器會自動幫你做驗證，並告訴你你輸入的格式並不正確，相反地，光是使用 type=”text” 是沒不會幫你做驗證，不帶有其他含義，瀏覽器並不會曉得你要使用者在此欄位輸入什麼資料。
很多人在不熟悉 input 標籤的狀況下，通常會使用 type=”text” 一招打天下 但其實這個用法是不正確的。
另外和 type=”email” 屬性值類似的用法有：type=”tel” 屬性值，專門用來輸入電話號碼的欄位，又或者是 type=”number” 屬性值，只能在欄位中填入數字。
input 元素除了能創造出文字區塊，也能透過 type 屬性還建立出不一樣的效果：像是使用 type="checkbox" 創造出勾選欄位、 type="date" 創造出日期欄位，及使用 type="button" 創造出按鈕效果。
更多有關 input 元素中的 type 屬性值的更多用法，可以參考此官方文件。

placeholder 屬性

在同一個範例中，在可以看到我在文字區塊中加入了 placeholder 的屬性，透過placeholder 屬性，我們可以為文字區塊創造出預設文字的效果。
此預設文字的效果，會在使用者輸入文字後就消失，且預設文字的內容也可以透過更改 placeholder 屬性值來做到。
大部分我們所看到的網頁預設文字效果，基本上都是由此屬性來創造，才不會明明都是不同的 input 效果，卻讓使用者不曉得要填入什麼。

id 屬性

在html中，有個屬性常常會讓初學者搞混，就是我們的id屬性。
很多人會因為id屬性的css權重較高，而在css選擇器中大量使用覆蓋前人或是其他權重較高的程式碼。
然而 id 屬性的的作用並不是拿來改變 css 樣式的，id 屬性就是英文 indentity 的縮寫，也就是「獨一無二的身份」意思。
在一個網頁中，id 屬性值只能使用一次，也不能跟其他人重複，就好像人的身分證一樣。
id 屬性的作用通常是用做「錨點」，可以在id名稱前加入半形的「#」井字號，來作為 src 或是 href 的屬性值，專門用來做網頁定位，舉例來說：
我們在 a 連結上的 href 值加上「#id」的值，點一下它就會跳轉到網頁最下方帶有 id 屬性值 id 的嗨區塊，這就是錨點的使用方式。
近年來，許多公司會在一次性的行銷活動中，採用一頁式的 landing page，但是一頁式的網頁通常「很長」，要怎麼樣讓使用者一下子找到他有興趣的欄位呢？
通常這時候就可以在表頭加入導覽列，並在該導覽列的連結上使用 id 屬性，在想要跳轉欄位上加入 id 的屬性值，這樣就可以做到欄位之間的跳轉。

HTML 屬性的學習方式

通常初學 HTML、CSS 甚至是 JavaScript 時，都會遇到自己看不太懂 HTML 屬性，導致不太會操控元素的狀況。
這種時候，建議大家可以學會該怎麼「看官方文件」。
程式語言的學習資源在近年來越來越豐富，但還是遇到很多讀者，買了課程但依然不曉得該怎麼學習 HTML 的狀況。
其實學程式語言並沒有那麼困難，即便你找到了一個資深的工程師詢問問題，如果他知道答案也許會直接告訴你問題出在哪，如果他也不知道的話，有九成九的機率會先去找官方文件閱讀，真的讀不懂就會上論壇找答案，最後一個選擇才會是找人詢問。
很多人在問我自學程式會不會很難。
但事實上⋯⋯
自我學習是身為一名工程師的基本素養。
如果連看文件都沒有辦法了解程式的使用方式的話，可能要思考自己的學習心態、方式是不是哪裡出了問題，或是你在初學程式時「找錯老師」，沒有學會真正程式開發的精髓及該如何解決自己的問題。
而學會如何提問，又是另外一個故事了。
今天的文章，主要是來跟大家分享「什麼是 HTML 屬性」，案例的解說並不多，但有了屬性的基礎觀念後，未來就會來跟大家分享更多進階的屬性用法。
今天的章節，主要是要讓初學者認識 CSS 選擇器，在之後的章節，才會與大家分享有關更多 CSS 常見的屬性類別，及搭配 HTML 元素實作不一樣的效果。
其他的網頁技術的問題，或是想要了解更多有關網頁開發的小技巧，歡迎你下方留言跟我討論與交流：）
希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！
我是Vivian，我們下次見。
關於網頁開發你可能會想知道：
關於我：
2019年從英文系畢業，2021下定決心開啟轉職工程師的新生活，相信不斷學習會有成長的一天。
｜Instagram: Vivian Yeh｜vivian_enlife
｜聯絡我：vivian.enlife@gmail.com
分享至
成為作者繼續創作的動力吧！
RD少女養成計畫
追蹤
RD少女養成計畫
追蹤
從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

Vivian Yeh - 跨領域轉職的軟體工程師 的其他內容

你可能也想看

發表回應

成為會員 後即可發表留言
© 2024 vocus All rights reserved.