【自學程式】HTML 屬性是什麼？解析常見 HTML 屬性用法
2021/06/15閱讀時間約 10 分鐘
在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
｜聯絡我：[email protected]
380會員
91內容數
留言0
查看全部
