HTML

Hypertext Markup Language，中文翻譯是「超文字標示語言」，是構成網頁最重要也是必要的部份。構成網頁有三大部分：HTML、CSS、JavaScript，HTML 就如同人的骨骼、CSS 就像穿在身上的衣服而 JavaScript 就是賦予它動作的肌肉。

HTML 使用元素來描述頁面的結構，每一個元素都有開始標記和結束標記，而標記的功用就像容器，描述了介於開始標記和結束標記之間的資訊。

HTML的架構：一個完整的 HTML 頁面，它所包含的要素：

<!DOCTYPE html> : 文件類型（doctype），指定用 html 標準模式渲染(render)這個網頁。
<html></html> : 包含了所有顯示在這個頁面上的內容。
<head></head> : 裡面放的是你想涵括的重要資訊，但不會顯示於網頁瀏覽者眼前的。
<meta charset="utf-8"> : 編碼設定。這個元素指定了你的文件使用 utf-8 這種字元編碼，能避免出現亂碼的可能。
<title></title> : 呈現在瀏覽器上的網頁標題。
<body></body> : 包含了所有會顯示於網頁瀏覽者眼前的內容。
```

```

<!DOCTYPE html>

網頁的標題

H1的標題

文字的段落

google.com

span


參考資料：[HTML 基礎 - 學習該如何開發 Web | MDN](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics)

---

## Open Graph Protocol
>是 Facebook 在 2010 年提出，規格化定義的 HTML Meta 屬性提供網頁的標題、縮圖、描述等等資訊，Facebook 本身也藉由讀取 Open Graph Protocol 中的資訊將網址以內容摘要的型態顯示出來。
1. \<meta name="og:title" content="網頁標題">
2. \<meta neme="og:description" content="網頁描述">
3. og:type, og:image...

如果需要確認網頁 Open Graph 的內容，你可以使用 [Facebook Debugger](https://developers.facebook.com/tools/debug/)；將網址貼入 Debugger 後它便會把抓到的 Open Graph Metadata 與縮圖顯示出來，這裡就完全跟動態牆上會看到的一樣了喔！

enter3017sky / mentor-program-2nd-blog

[筆記][MTR01]Lesson 2-1 HTML #15

HTML

HTML的架構：一個完整的 HTML 頁面，它所包含的要素：

H1的標題