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

更新 發佈閱讀 11 分鐘

在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

留言
avatar-img
留言分享你的想法!
avatar-img
Vivian Yeh - 跨領域轉職的軟體工程師
453會員
103內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶,不用腳踩十公分、連妝都可以不用化的職場人生,文組少女毅然決然踏上RD的養成日常。
2021/07/03
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。
Thumbnail
2021/07/03
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。
Thumbnail
2021/06/19
一開始接觸網頁開發的時候,可能會常常在切版時遇到一些奇奇怪怪的問題:版面總是無法貼齊,左右參差不齊;圖片或是版型變形,但都找不到問題,又或者是技術跟不上設計稿,怎麼切怎麼亂。 會有這樣的狀況主要是⋯⋯
Thumbnail
2021/06/19
一開始接觸網頁開發的時候,可能會常常在切版時遇到一些奇奇怪怪的問題:版面總是無法貼齊,左右參差不齊;圖片或是版型變形,但都找不到問題,又或者是技術跟不上設計稿,怎麼切怎麼亂。 會有這樣的狀況主要是⋯⋯
Thumbnail
2021/06/07
HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
Thumbnail
2021/06/07
HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
Thumbnail
看更多
你可能也想看
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用,建構子的作用,以及公開,私有,受保護(Protected)等不同訪問修飾符的概念。此外,還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
Thumbnail
本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用,建構子的作用,以及公開,私有,受保護(Protected)等不同訪問修飾符的概念。此外,還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
Thumbnail
本篇習作內容,除了練習六角預習影音內的常用語法章節外,也額外整理了其它常用於文本的 HTML 元素,希望能透過這樣的整理,在未來設計結構更複雜的網站介面內容時,能扎穩根基。
Thumbnail
本篇習作內容,除了練習六角預習影音內的常用語法章節外,也額外整理了其它常用於文本的 HTML 元素,希望能透過這樣的整理,在未來設計結構更複雜的網站介面內容時,能扎穩根基。
Thumbnail
display 是一種 CSS 屬性,指定「 是否 / 如何 」顯示元素,而每一個 HTML element 都有預設的 display value,然而在預設的情況下,新手如我在剛接觸時常踩入深不見底的盲區, 一起來釐清學會辨識吧!
Thumbnail
display 是一種 CSS 屬性,指定「 是否 / 如何 」顯示元素,而每一個 HTML element 都有預設的 display value,然而在預設的情況下,新手如我在剛接觸時常踩入深不見底的盲區, 一起來釐清學會辨識吧!
Thumbnail
相信透過之前的介紹,大家對於 CSS 選擇器(CSS selector)已經不陌生了,今天我們要來聊聊兩個在實務上非常好用的偽類(pseudo class )語法,他們分別是 :nth-child() 與 :nth-of-type(),在了解這兩個語法之前,我們首先要先來聊聊什麼是「偽類」呢?
Thumbnail
相信透過之前的介紹,大家對於 CSS 選擇器(CSS selector)已經不陌生了,今天我們要來聊聊兩個在實務上非常好用的偽類(pseudo class )語法,他們分別是 :nth-child() 與 :nth-of-type(),在了解這兩個語法之前,我們首先要先來聊聊什麼是「偽類」呢?
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
在HTML程式語言中,有一種能讓HTML元素與其他程式語言(CSS、JavaScript)運作的更加順利的語法,它叫做「HTML屬性(HTML Attribute)」。 那HTML屬性是怎麼運作的呢?
Thumbnail
在HTML程式語言中,有一種能讓HTML元素與其他程式語言(CSS、JavaScript)運作的更加順利的語法,它叫做「HTML屬性(HTML Attribute)」。 那HTML屬性是怎麼運作的呢?
Thumbnail
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
Thumbnail
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News