HTML 從零開始
超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計網頁、網頁應用程式以及行動應用程式的使用者介面。網頁瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁。HTML描述了一個網站的結構語意隨著線索的呈現，使之成為一種標記語言而非程式語言。
HTML架構
HTML標記包含標籤（及其屬性）、基於字元的資料類型、字元參照和實體參照等幾個關鍵部分。HTML標籤是最常見的，通常成對出現，比如<h1>與</h1>。這些成對出現的標籤中，第一個標籤是開始標籤，第二個標籤是結束標籤。兩個標籤之間為元素的內容，有些標籤沒有內容，為空元素。
一個完整的HTML頁面它所包含的要素
<!DOCTYPE html>文件標記類型，表示這是一份標準的 HTML5 文件。<html>和</html>之間的文字描述網頁<body>和</body>之間的文字為可視頁面內容。<title>This is a title</title>定義了瀏覽器的頁面標題。
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
HTML元素
巢狀元素
HTML文件由巢狀的HTML元素(element)所構成，元素裡面可以在放進元素，我們稱之為「巢狀元素（nesting element）」，簡單來說就是一層一層的概念。
<div>
<p>Hello World</p>
</div>
空元素
空元素不能封裝任何內容。例如<br>標籤或行內標籤<img>。一個HTML元素的名稱即為標籤使用的名稱。（注意，結束標籤的名稱前面有一個斜槓「/」），空元素不需要也不允許結束標籤。如果元素屬性未標明，則使用其預設值。簡單來說元素沒有內容，我們稱為「空元素（empty elements）」。
<img src="image.png" alt="My image">
HTML屬性
元素還可以有「屬性（Attribute）」，屬性能提供更多的資訊幫助我們更有效及方便編輯，利用屬性設定這個元素的色彩、對齊方式、樣式設計等等。
- id屬性：為元素提供了在全文件內的唯一標識。它用於辨識元素，以便樣式表可以改變其表現屬性，指令碼可以改變、顯示或刪除其內容或格式化。
- class屬性：提供一種將類似元素分類的方式。常被用於語意化或格式化。
- style屬性：可以將表現性質賦予一個特定元素。比起使用id或class 屬性從樣式表中選擇元素。
- title屬性用於給元素一個附加的說明。大多數瀏覽器中這一屬性顯示為工具提示。
重要的觀念要交代，一個 element 可以有無數個 class 可是只能有一個 id。
常見HTML元素
文件標題 (heading)
HTML標題由<h1>到<h6>六個標籤構成，字型由大到小遞減：
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
段落 (paragraph)
<p>第一段</p> <p>第二段</p>
清單 (list)
<ul>
<li>Dog</li>
<li>Cat</li>
<li>Bird</li>
</ul>
連結 (link)
<a href="https://devbricker.github.io/">DevBricker Blog！</a>
換行
<br> 是個空元素不需要 closing tag
<br>
圖片
<img src="https://devbricker.github.io/favicon/little_bot2.png" alt="DevBricker logo">
- 參考文章
[HTML維基百科]](https://zh.wikipedia.org/wiki/HTML)
留言板
歷史留言