容器

容器的目的是把多個元素包裝起來，可以給予他們共同的設計
HTML提供兩個容器標籤，一個是區塊容器，一個是inline容器，以下分別說明

區塊容器

// 區塊容器div可以把不同的元素包裝為一個獨立的區塊
<div>
	<h1>asdfasdfasdf</h1>
	<p>
		Lorem ipsum dolor sit amet,  adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		</p>
</div>

因為沒有套用CSS，從結果看不太出容器的差別

inline容器

// inline容器可以把元素內的內容包裝為一個容器，並且不改變原來元素的區塊
<div>
	<h1>asdfasdfasdf</h1>
	<p>
		Lorem ipsum dolor sit amet, <span> consectetur </span> adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		</p>
</div>

從結果則完全看不出差別ＸＤ，等未來套用CSS應該會比較有感覺吧(煙

HTML Attribute

HTML Attribute是為了賦予標籤更多樣化的屬性，詳細的列表可以參考MDN，不要被數量嚇到，常用且需要記憶的屬性大概只有10~20種，其他則用到的時候再查表就好，以下配合標籤，介紹幾個常用的屬性

圖片

// <img>標籤可以顯示圖片，而這個標籤不需要結束標籤</img>
// 另外要用src屬性定義圖片的來源
<img src="https://media.nature.com/lw800/magazine-assets/d41586-020-01430-5/d41586-020-01430-5_17977552.jpg">

呈現的結果如下

超連結

// 標籤<a>是一個超連結標籤，並用 href 屬性定義超連結的位置
// 點擊超連結會轉頁到google首頁
<a href="https://google.com">Google</a>

呈現的結果如下