【Day02】甚麼是HTML? 以及HTML標籤div 、span、ol、ul、li介紹

根據MDN的定義，HTML(HyperText Markup Language)是一種標記語言，而非如C、Java等大家所熟知的程式語言，它會告訴瀏覽器如何呈現你的網頁。HTML包含一系列的元素(elements)，而元素包含了標籤(tags)與內容(content)，我們利用標籤來控制內容的呈現。例如字體大小、粗體等等。

例如與大家生活上密不可分的google搜尋引擎，用Chrome連上後按右鍵，檢視原始碼後可以發現，是由許多HTML標籤所構成的。

首先，讓我們來看看一個完整的HTML頁面它所包含的要素。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HelloWorld</title>
  </head>
  <body>
    Hello World!
  </body>
</html>

我們一起來看看這段HTML程式碼:

"!DOCTYPE html" 代表了文件類型（doctype）。目的是要告訴瀏覽器目前網頁所編寫的HTML、XHTML的標籤是採用什麼樣的版本。
"html" 元素，又被視為根元素（root element），包含了所有顯示在這個頁面上的內容。
"head" 表頭元素，裡面放的是你想涵括的重要資訊，但不會顯示於網頁瀏覽者眼前的。例如，顯示於搜尋結果的關鍵字、頁面說明、CSS、字元實體集...等。
"body" 元素，包含了所有會顯示於網頁瀏覽者眼前的內容。無論是文字、圖片、影面、互動遊戲...等。
" meta charset="utf-8"" — 這個元素指定了你的文件使用utf-8這種字元編碼，如果網頁有中文字的話，必須要透過編碼類型告訴瀏覽器要採用何種編碼來處理中文字，才能讓文字正確呈現，才不會產生亂碼。
"title" — 呈現於網頁瀏覽者眼前的網頁標題。

呈現效果如下:
https://jsfiddle.net/GRANTLI/4hosg7wr/

以上就是簡單的HTML介紹。
而在HTML中，最為重要的幾個標籤分別為"div"、"span"、"ol"、"ul"、"li"

首先，"div" tag

透過 DIV 標籤可以在網頁中創造各個不同的區塊，每個區塊內還可以增加更小的區塊，設計師也可以利用 HTML div 區塊來進行排版，對網路瀏覽器來說，每組 HTML div 標籤都是一個區塊級元素，設計師也可以透過 div 的屬性設定來調整呈現的樣貌，現在的 div 屬性設定都是採用之後會提到的 CSS 來設計。
```
<div style="background-color:#8282FF">
    Block1
</div>
<div style="background-color:#AC3BFF">
    Block2
</div>
```
呈現效果可以從剛剛的online html 編輯器中檢視，可以看出頁面被分割出了兩個區塊。
再來的， "span" 標籤，在 HTML 可以表示一個行元素，與 DIV 區塊的用法有點類似，但瀏覽器會將 span 標籤包起來的元素視為一行。

但與 div 標籤不同的是，一個 span 標籤組只會佔用自己本身的空間，不會像 DIV 標籤那樣一次佔掉一整行的空間，切板時可以用 DIV 標籤與 span 標籤互相搭配，用 DIV 標籤做大範圍的排版，再用 span 標籤進行細部美化。

最後，ol與ul是HTML中，用來條列品項的標籤，在網頁上可以用來陳列Item，兩者都是與 "li" 標籤做搭配，用起來幾乎相同，差別在於是否有自動排序項目的功能，"ul" 標籤預設僅有一個黑點的項目符號，類似「●」這樣(當然可以透過CSS遞換不同的呈現方法)，在不同的瀏覽器下可能呈現不同的效果，而 "ol" 標籤則具有數字排序的功能，也就是預設在每個項目前會有數字顯示，從 1 開始依序排列。
如:
```
<ul>
　  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ol>
　<li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>
```

以上就是Day2的文章，下一篇的文章，將會進入CSS的奇幻世界，要來介紹CSS的選擇器與優先權、網頁切版中最重要的Box model以及block、inline element。