元素 (element)
給個顯示內容都需要給予一個標籤包住,此標籤就是元素
宣告
使用 <
與 >
將元素名稱包住
<div>Hello, world!</div>
宣告一個 div
元素,顯示內容為 Hello, world!
內容
顯示給使用者看的東西,稱為內容
只要元素有內容,就必須做關閉
<div>Hello, world!
這是錯誤的宣告,打開瀏覽器後會發現好像沒什麼差別
這是因為瀏覽器會幫你做補充的行為(本質上還是漏掉的)
補充一時爽,套版火葬場!
一定要再三檢查,該關閉的就要關閉
- 開啟
Chrome dev tools
查看元素頁籤 (補充行為) - 檢視原始碼查看
Command + Alt + u
屬性
描述元素,在宣告元素與 >
之間宣告
屬性不會顯示給使用者看,通常用於跟 CSS
與 JavaScript
串接使用
<div id="first-name" class="fullname">Lin</div>
宣告一個 div
元素,擁有屬性 id
值為 first-name
以及 class
值為 fullname
,顯示內容為 Lin
能夠口語化描述自己宣告的元素,表示知道自己在做什麼了
屬性格式
屬性跟屬性之間『至少』一個空格區分
錯誤
<div id="first-name"class="fullname">Lin</div>
正確
<div id="first-name" class="fullname">Lin</div>
<div id="first-name" class="fullname">Lin</div>
<div id="first-name" class="fullname">Lin</div>
屬性數值使用『雙引號』包起來
錯誤
<div id=first-name class=fullname>Lin</div>
<div id='first-name' class='fullname'>Lin</div>
正確
<div id="first-name" class="fullname">Lin</div>
使用單引號看似沒問題,但是不符合規範,在特定情境下一樣爆炸給你看!
同一屬性多個數值時,數值使用空格區分
錯誤
<div id="first-name" class="fullname" class="my-name">Lin</div>
<div id="first-name" class="fullnamemy-name">Lin</div>
正確
<div id="first-name" class="fullname my-name">Lin</div>
顯示方式
HTML
元素顯示基本上分為兩個
區塊 (block)
佔據整列,強制後面的元素換行
內聯 (inline)
『不會』佔據整列,後面的元素會接著顯示
元素跟元素之間會有小縫隙(要視為 Bug 或是 Feature 就看個人了)