【自學程式】HTML 屬性是什麼？解析常見 HTML 屬性用法
閱讀時間約 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
｜聯絡我：vivian.enlife@gmail.com
421會員
98內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議
分析兩位候選人政策利多/ 利空的板塊和股票
🤔為什麼團長的能力是死亡筆記本?
🤔為什麼像是死亡筆記本呢？
🤨作者巧思-讓妮翁死亡合理的幾個伏筆
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎，是台南地區一所特別的實驗學校。小學部分經營已經有七年，從一開始僅有八位學生到如今成長至七十多名學生，這樣的發展過程中，需要家長們慢慢了解並認同蒙特梭利的教育理念。
在這幾年的疫情風波中，學校經歷了許多挑戰，但已逐漸趨於穩定。上華蒙特梭利小
第二題練習題～應用的內容跟判斷質數差不多，甚至再更少一點（因為沒有要用到迴圈），所以這次寫起來就快很多，除了題目難度比較低之外，經過上次的洗禮之後，對於解題應該有再抓到更多感覺，所以寫這題比較有成就感一點XD
主題：宣告變數和判斷式的的綜合小應用
題目：每個人都有心目中夢想的身高，像小鳴就夢想著
從跟著教學影片把老師的程式抄過一遍，變成看到題目能把題目轉為程式，對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程，以及我解題的方法是什麼。（也順便紀錄一下自己的思路）
※主題：流程控制為主的綜合小應用
※題目：讓使用者輸入一個數字，並用程式判斷該數字是否為質數
網路上提到自學程式的文章，都會說自學程式非常地辛苦，而且要很自律，決心夠強；而當自己踏上這條路後，才發現何止是辛苦，根本是佈滿荊棘，常常寸步難行，且被刺地遍體鱗傷(喂～是不是有點太浮誇了），但在每個寫出程式豁然開朗的當下，卻又成就感滿滿，所以想藉著寫部落格紀錄一下自己的學習過程！
程式語言只是工具，更重要的是程式邏輯
【運算思維】
1.拆解: 將一個任務或問題拆解成數個步驟或部分。
2.找出規律: 預測問題的規律，並找出模式做測試。
3.歸納與抽象化: 找出最主要導致此模式的原則或因素。
4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
最近很多人私訊我他們自學遇到的瓶頸，有些人會覺得學不會程式，是自己太笨沒天分，或從小數理能力就差，才學不起來。但以我自己這些年自學程式並創業的經驗，我認為可能原因是自己操之過急了，因為想要快速達到像是轉職或是創業等等目標，所以覺得得學得越快越好。但這個領域需要的是長時間的磨練，慢慢一點點累積
設定好你的目標，做好目標分解，接下來就是學習與實作，在過程中，肯定會遇到各種問題需要debug，這應該是剛入門自學程式的人最痛苦的部分，可能看到bug不知道google要下甚麼關鍵字，也可能搜出一堆文章看得頭昏腦脹，所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程，是怎麼面對這種狀況的
之前跟大家分享【表現目標】和【學習目標】，有助於設定自學的終點，但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】，這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法，希望對剛入門自學程式的朋友有幫助
除了增進程式技術和技巧以外，我覺得建立起正確的【自學心態】更重要，保持正確的態度能讓你持續不斷的精進學習，不會半途而廢，也更能享受進步帶來的成就感，我從自己過去零基礎開始自學程式然後做出線上服務的經驗，整理出一些入門自學的朋友應該抱持的心態，相信會很有幫助
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議
分析兩位候選人政策利多/ 利空的板塊和股票
🤔為什麼團長的能力是死亡筆記本?
🤔為什麼像是死亡筆記本呢？
🤨作者巧思-讓妮翁死亡合理的幾個伏筆
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎，是台南地區一所特別的實驗學校。小學部分經營已經有七年，從一開始僅有八位學生到如今成長至七十多名學生，這樣的發展過程中，需要家長們慢慢了解並認同蒙特梭利的教育理念。
在這幾年的疫情風波中，學校經歷了許多挑戰，但已逐漸趨於穩定。上華蒙特梭利小
第二題練習題～應用的內容跟判斷質數差不多，甚至再更少一點（因為沒有要用到迴圈），所以這次寫起來就快很多，除了題目難度比較低之外，經過上次的洗禮之後，對於解題應該有再抓到更多感覺，所以寫這題比較有成就感一點XD
主題：宣告變數和判斷式的的綜合小應用
題目：每個人都有心目中夢想的身高，像小鳴就夢想著
從跟著教學影片把老師的程式抄過一遍，變成看到題目能把題目轉為程式，對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程，以及我解題的方法是什麼。（也順便紀錄一下自己的思路）
※主題：流程控制為主的綜合小應用
※題目：讓使用者輸入一個數字，並用程式判斷該數字是否為質數
網路上提到自學程式的文章，都會說自學程式非常地辛苦，而且要很自律，決心夠強；而當自己踏上這條路後，才發現何止是辛苦，根本是佈滿荊棘，常常寸步難行，且被刺地遍體鱗傷(喂～是不是有點太浮誇了），但在每個寫出程式豁然開朗的當下，卻又成就感滿滿，所以想藉著寫部落格紀錄一下自己的學習過程！
程式語言只是工具，更重要的是程式邏輯
【運算思維】
1.拆解: 將一個任務或問題拆解成數個步驟或部分。
2.找出規律: 預測問題的規律，並找出模式做測試。
3.歸納與抽象化: 找出最主要導致此模式的原則或因素。
4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
最近很多人私訊我他們自學遇到的瓶頸，有些人會覺得學不會程式，是自己太笨沒天分，或從小數理能力就差，才學不起來。但以我自己這些年自學程式並創業的經驗，我認為可能原因是自己操之過急了，因為想要快速達到像是轉職或是創業等等目標，所以覺得得學得越快越好。但這個領域需要的是長時間的磨練，慢慢一點點累積
設定好你的目標，做好目標分解，接下來就是學習與實作，在過程中，肯定會遇到各種問題需要debug，這應該是剛入門自學程式的人最痛苦的部分，可能看到bug不知道google要下甚麼關鍵字，也可能搜出一堆文章看得頭昏腦脹，所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程，是怎麼面對這種狀況的
之前跟大家分享【表現目標】和【學習目標】，有助於設定自學的終點，但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】，這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法，希望對剛入門自學程式的朋友有幫助
除了增進程式技術和技巧以外，我覺得建立起正確的【自學心態】更重要，保持正確的態度能讓你持續不斷的精進學習，不會半途而廢，也更能享受進步帶來的成就感，我從自己過去零基礎開始自學程式然後做出線上服務的經驗，整理出一些入門自學的朋友應該抱持的心態，相信會很有幫助