首先就來了解網路的運作吧！點圖看影片

How The Internet Works：

HTML是什麼

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計網頁、網頁應用程式以及行動應用程式的使用者介面[3]。網頁瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁。HTML描述了一個網站的結構語意隨著線索的呈現，使之成為一種標記語言而非程式語言。
擷取自wikipedia

現今的網站需要很多技術才能做出來，但絕對少不了HTML，HTML是網頁的基石。HTML的開發，是源自研究機構為了能夠在網路上分享文件，藉以梳理文章結構，比較好閱讀。演變至現在我們上網，就是在瀏覽一個一個HTML檔。

如果沒有用HTML的元素(element)來指定文章的結構，單純用enter來分行，瀏覽器是不會理會的，顯示在瀏覽器上依然沒有斷行，也沒有大小字區分，不知道標題、副標題是哪個，文章沒有段落。

番茄炒蛋食譜
材料
牛番茄 2顆
雞蛋 3顆
蔥花 少許
鹽 適量
做法
1. 生蛋拌勻，下鍋炒到香嫩即取出備用。
2. 番茄下鍋切塊炒出香味，再放入炒好的嫩蛋，加入鹽巴調味，稍微拌炒勻即可。
3. 起鍋前撒上蔥花

上面沒有HTML元素的內容，轉到瀏覽器變這樣。這樣是要怎麼看啊？

如果指定HTML的元素，瀏覽器就會讀取，並顯示在頁面上(又稱渲染)：

<h1>番茄炒蛋食譜</h1>
<h3>材料</h3>
<ul>
  <li>牛番茄 2顆</li>
  <li>雞蛋 3顆</li>
  <li>蔥花 少許</li>
  <li>鹽 適量</li>
</ul>
<h3>做法</h3>
<p>1. 生蛋拌勻，下鍋炒到香嫩即取出備用。</p>
<p>2. 番茄下鍋切塊炒出香味，再放入炒好的嫩蛋，加入鹽巴調味，稍微拌炒勻即可。</p>
<p>3. 起鍋前撒上蔥花</p>

嗯～這樣就比較好讀了～

元素element

HTML就是依靠元素來對文檔產生作用。而元素是開始標籤跟結束標籤構成的，中間可以輸入內容，以p跟h元素為例子。

寫成文檔是這樣：

<h1>我的第一個標題</h1>
<p>我的第一個段落</p>

也有不需要結束標籤的元素，像是img：

<img src="./image/cute_pig.png"> 

• 點看更多HTML元素

屬性attribute ＆ 值value

但上述的img元素沒有給予屬性，他在瀏覽器是不會有圖片的，所以必須給予屬性跟設定值。src屬性是來源，value值為檔案路徑。

HTML的世界裡，有非常多屬性，屬性可以用在不同的元素裡，但並不是每個元素都能用。

• 點看HTML屬性列表，會有全部屬性的作用和可用在什麼元素上。

inline元素 & block元素

HTML用元素來結構文章，讓文章好閱讀，而每個元素主要就用兩個性值來讓文章產生結構：inline & block。

block元素

垂直排列。佔滿整個瀏覽器頁面，從左到右。

<h1>我是標題</h1><p>我是文章</p> 

上列指令h1跟p在文檔裡寫在同一行，可是顯示在瀏覽器上卻是分行。因為它們都是block元素，會從左到右佔滿寬度，垂直往下排列，所以在文章的結構上就會被清楚劃分出兩塊不同的段落。

*兩個block有重疊的區塊，叫margin(外邊距)重疊，該概念會在進到CSS筆記時介紹。

inline元素

水平排列。不換行，直到寬度容不下才會被擠到下一行。

<span>姓名：</span>
<input type:text> <!--這行是輸入框-->
<button>介紹我自己</button>

雖然指令是分行寫，但是給予inline元素，三個元素會水平排列，而在畫面上看起來三個元素的內容物都在同一行。

• 點看inline與block元素清單

使用限制

block元素可以包含inline元素，但inline元素不可包含block元素。這邊所指的inline與block都是指元素，到了CSS時，樣式指定可以改變元素的顯示方式，到時候inline元素可以用block的排列方式，而block也可以換成inline的排列，咦？不知道在說什麼？總之，期待到時候的筆記吧(眼睛發亮)～

*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。