元素 (element)

給個顯示內容都需要給予一個標籤包住，此標籤就是元素

宣告

使用 < 與 > 將元素名稱包住

<div>Hello, world!</div>

宣告一個 div 元素，顯示內容為 Hello, world!

內容

顯示給使用者看的東西，稱為內容

只要元素有內容，就必須做關閉

<div>Hello, world!

這是錯誤的宣告，打開瀏覽器後會發現好像沒什麼差別

這是因為瀏覽器會幫你做補充的行為（本質上還是漏掉的)

補充一時爽，套版火葬場！

一定要再三檢查，該關閉的就要關閉

demo

1. 開啟 Chrome dev tools 查看元素頁籤 (補充行為)
2. 檢視原始碼查看 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 就看個人了)

demo