<h1>[FE101] 前端基礎：HTML</h1>
> [TOC]
:::spoiler Link
1. [壓縮圖片](https://tinypng.com/)
1. [Zeplin](https://zeplin.io/)
1. [網頁模版](https://html5up.net/)
:::
## 網頁背後到底是什麼？
網頁最根本的樣貌是純文字檔案。
> HTML → 瀏覽器 → 畫面
>
瀏覽器看的懂文字檔案，然後瀏覽器會轉成我們平常看的網頁畫面。
## HTML 基礎
HTML 全名: HyperText Markup Language
### HTML 基本組成
* 基本組成：`<html>`,`<head>`,`<body>`
* tag: `<html>` 與 `</html>`是start tag 與 end tag
* 簡單介紹
* `<head>`: 基本資訊
* `<meta charset="utf-8"/>`:
* `<title>網頁標題</title>`:
* `<body>`: 主要內容
```html
<!DOCTYPE HTML> <!--告訴瀏覽器：要 HTML 的格式去讀這個檔案-->
<html>
<head>
<!--基本資訊-->
<meta charset="utf-8"/> <!--'/'可代表'</meta>-->
<title>網頁標題</title>
</head>
<body>
<!--主要內容-->
<body>
</html>
```
:::spoiler Question
> **what is the meaning of chartset='utf-8'?**
> when you declare the "charset" as "UTF-8", you are telling your browser to use the UTF-8 character encoding, which is a method of converting your typed characters into machine-readable code.([More about Meta Charset](https://bitsofco.de/meta-charset/))
>
:::
<br>
### HTML 最早存在意義：Headers, Paragraph
* headers: 主標題、副標題、小標題
* paragraph: 文字段落
* Lorum ispum: 亂數假文，用於測試版面長相
<br>
### 常見的標籤：div, span
* `<div>`: 把同一個區塊的東西包起來，看起來 `<h2>` 和 `<p>` 是**同一組**。優點就是以後的 CSS 可以對某一個標籤修改背景顏色、字體顏色。
* `<span>`: 跨度。用在文字內
比較：`<div>` 內前後會空行隔開，`<span>` 不會前後左右隔開。
舉例如下：
> <div>
> <h3>H3 title</h3>
> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's <span><b>standard</b></span> dummy text ever <div><u>since</u></div>the 1500s</p>
> </div>
> <br>
> <b>說明:</b>
> <br>
> <!-其中<b>standard</b>被 span 包起來，<u>since</u> 被 div 包起來->
> <!-可以發現：div 內前後會空行隔開，span 不會前後左右隔開。->
<br>
### 顯示圖片： img
```html
<img alt='替代文字' title='滑鼠移過去圖片顯示的文字' src='網址'>
```
:::danger
* ~~`<img></img>`~~
```
<img src='' alt='' title>
```
:::
* 標籤(tag): `<img>`
* 屬性（attribute): `alt`、`title`、`src`
1. `<alt>`: 當圖片無法顯示時，會顯示文字來替代，`alt`就是替代文字的部分。
2. `<title>`: 當圖片滑鼠點上去的時候，會顯示圖的標題。
3. `<src>`: 圖片的來源(source)
<br>
### 顯示清單：ul, ol, li
* `<li>`: 清單項目
* `<ul>`: bullet 未排序圓點清單
* `<ol>`: 有順序的清單
### 保留完整格式：pre
* `<pre>`: 保留完整格式。
* `<br>`: 換行
### 表格必備標籤
* `<table>`: 表格
* `<tr>`: table row
* `<td>`: table cell
* `<th>`: table header
### anchor 錨點
`<a>`: anchor 錨點
`href`: **h**ypertext **ref**erence
**功能：** 超連結
1. 連到網頁外面的位置
> 舉例：
> <a href='www.google.com'>take me to google</a>
> ```htmlmixed
> <a href='www.google.com'>take me to google</a>
> ```
(1) 屬性：
a. `target='_self'` 為預設，會直接從此頁面連到新的頁面。
b. `target='_blank'` 會打開新的分頁。
2. 連到網頁內的位置
> <a href='#h1'>take me to heading 1</a>
> <!-HackMD `<a>` 移動到 h1 失敗，不知道是 HackMD 的問題還是 `<a>` 寫錯。->
> ```htmlmixed
> <a href='#h1'>take me to heading 1</a>
> ```
<br>
### 語意化標籤：main, nav, footer
語意化元素： semantic elements
* `<main>`:
* `<nav>`: navigation 導覽列
* `<footer>`: license copy right 網頁資訊等等。
人或機器，一眼從 html 檔案或者機器裡，就可以從標籤判斷。
> 補充連結：
> a. [MDN Semantics](https://developer.mozilla.org/en-US/docs/Glossary/Semantics)
> b. [New Semantic Elements in HTML5](https://www.w3schools.com/html/html5_semantic_elements.asp)
### 嵌入網頁 iframe
伺服器在裡面有設定`X-Frame-Options` 禁止不信任的人，存取網頁，因為有些人不想要讓別人有偷別人網頁的動作。所以`iframe` 不常使用，通常大網站都會擋住 iframe。
```htmlmixed=
<iframe src='www.google.com' width="100%" heigth='500px'>
<!--使用 google 網址的話，會空白一片，詳細說明如上-->
```
嵌入網頁的話，可以在網頁內做導覽。
注意事項：
### 表單 Form
以此為例：
```htmlmixed=
<form>
性別：<input type='radio' name='gender' id='male'></input><label for='male'>male</label>
<input type='radio' name='gender' id='female'></input><label for='female'>female</label>
<input type='radio' name='gender' id='others'></input><label for='others'>others</label>
</form>
```
* `<input type='text'>`
* **`text`**: 輸入文字
* **`password`**: 密碼不會顯示字母、數字
* **`email`**: 有信箱格式的自動檢查
* **`date`**: 選擇日期
* **`radio`**: 圓圈勾選
* **點選文字也可以勾選**：
再在`<input>`加入 `id` 屬性(attribute) 搭配 `<label for>`
* **選單框起來成為一個group**：
再在選單內的個別選項的`<input>`加入同一種 `name` 屬性(attribute)，就可以將選單內 group 起來。
* **`checkbox`**: 勾勾框
* 同 radio。
詳細舉例如下：
<iframe height="265" style="width: 100%;" scrolling="no" title="form demo" src="https://codepen.io/estella00911/embed/jOBMxbo?height=265&theme-id=dark&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/estella00911/pen/jOBMxbo'>form demo</a> by PinChun
(<a href='https://codepen.io/estella00911'>@estella00911</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
### 與SEO有關的標籤—— meta tag
> 目標：幫助搜尋引擎理解網頁，搜尋引擎更理解網頁，可以讓網頁在搜尋引擎排名更前面。
> 1. `<meta name='keywords'>`
> 2. `open Graph Protocal`: 另個協定，大多是 Facebook使用
> 3. `json-ld`: 通常是 google engine 在看（如下方圖r解說）。
> 4. `robots.txt`: 告訴網頁爬蟲哪些可以爬蟲，哪些不行
> 5. `Sitemap.xml`: 可以把網站中的每個網址放上去，搜尋引擎就知道需要爬蟲爬哪些網站。
> 6.`<link ... hreflang='en'>`：
> 7. `<meta property='al:ios:app_name'>`：
> 補充：
#### 幫助搜尋引擎理解網頁
SEO 全名：Search Engine Optimization 搜尋引擎優化。
目標：幫助搜尋引擎理解你的網頁
範例：[trip adviser 鼎泰豐101店]()
* `<meta name='keywords'>`
* `keywords`: 告訴搜尋引擎關鍵字有哪些，類似 hash tag。其中網頁的 title 也滿重要的。
* `description`: 告訴搜尋引擎簡介容
```htmlmixed=
<meta name="keywords" content="信義區鼎泰豐(101店), 餐廳, 餐廳評論, 食物, 用餐">
<meta name="description" content="鼎泰豐(101店)(信義區): 讀讀4,657則則關於鼎泰豐(101店)客觀公正的美食評論，在Tripadvisor的5分滿分評等中得4.5分，在信義區的1,557家餐廳中排第11名。">
```
#### og(open protocal)
* `<meta property='og:title'>`
* og 全名為 open protocal，幫助 SEO、爬蟲更瞭解網頁會用到的 tag，為了讓社群軟體更瞭解網頁。
* og 系列，大多是 Facebook 上在使用的，通常這個連結分享到 FaceBook 的時候，會有什麼圖片（og:image）、標題（og:title）、內容（og:description）
等的設定。
* `og:title`
* `og:description`
* `og:image`
* 等等
```htmlembedded=
<meta property="og:title" content="鼎泰豐(101店) (信義區) - 餐廳/美食評論 - Tripadvisor">
<meta property="og:description" content="鼎泰豐(101店)(信義區): 讀讀4,657則則關於鼎泰豐(101店)客觀公正的美食評論，在Tripadvisor的5分滿分評等中得4.5分，在信義區的1,557家餐廳中排第11名。">
<meta property="og:image" content="https://media-cdn.tripadvisor.com/media/photo-s/15/f6/bd/b4/must-try-soup-dumplings.jpg">
<meta property="og:image:width" content="550">
<meta property="og:image:height" content="413">
```
#### json-ld
* json-ld **`important`**
* json-ld 全名： JSON for Linking Data
* 目的：固定格式化的方法來描述網頁。因為機器看不懂我們一般看的網頁，需要解碼，如果今天使用的是機器提供的格式化，機器一看就看的懂結構與內容。可以用於描述餐廳、景點等等。
* 舉例：
```htmlembedded=
<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"FoodEstablishment",
"name":"鼎泰豐(101店)",
"url":"/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html",
"image":"https://media-cdn.tripadvisor.com/media/photo-s/15/f6/bd/b4/must-try-soup-dumplings.jpg",
"priceRange":"$$ - $$$",
"aggregateRating":{
"@type":"AggregateRating",
"ratingValue":"4.5",
"reviewCount":"4657"
},
"address":{
"@type":"PostalAddress",
"streetAddress":"市府路45號 B1",
"addressLocality":"信義區",
"addressRegion":"",
"postalCode":"110",
"addressCountry":{
"@type":"Country",
"name":"台灣"
}
}
}
</script>
```
###### 圖：通常 json-ld 給 google 看，如上圖紅色蠟筆框框
#### robots.txt
給網頁爬蟲看的檔案，通常放到根目錄底下。如：https://www.tripadvisor.com.tw/robots.txt
##### sitemap.xml
* sitemap: 爬蟲的時候，還要找有哪些網頁，這個 sitemap 提供整個網站的地圖，就不需要自己去找有哪些網頁。
* 舉例：mediam 某一天的 sitemap，檔案格式為 xml，把某一天所有的網址塞進 xml 檔案，確保網站上的每一個頁面，在 SEO 搜尋引擎上都搜尋的到。
#### `<link ... hreflang='en'>`
跟搜尋引擎說：這個網頁有分英文跟中文，利用這個 tag 跟搜尋引擎說這是同一個頁面，不同語言，所以在網頁裡面給的評分，就會加在一起，不會分開計算。
```htmlmixed=
<link rel="alternate" hreflang="en" href="https://www.tripadvisor.com/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html">
<link rel="alternate" hreflang="fr-CA" href="https://fr.tripadvisor.ca/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html">
<link rel="alternate" hreflang="ja" href="https://www.tripadvisor.jp/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html">
```
#### `<meta property='al:ios:app_name'>`
如果使用 iPhone safari 觀看 tripadvisor，可能看一看就會跳出「要不要下載 tripadvisor」的 app，
```htmlembedded=
<meta property="al:ios:app_name" content="TripAdvisor">
<meta property="al:ios:app_store_id" content="284876795">
<meta property="al:ios:url" content="tripadvisor://www.tripadvisor.com.tw/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html?m=33762">
```
在 iPad 或 iPhone 瀏覽的話，使用 twitter 瀏覽的話，
```htmlembedded=
<meta property="twitter:app:id:ipad" name="twitter:app:id:ipad" content="284876795">
<meta property="twitter:app:id:iphone" name="twitter:app:id:iphone" content="284876795">
<meta property="twitter:app:url:ipad" name="twitter:app:url:ipad" content="tripadvisor://www.tripadvisor.com.tw/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html?m=33762">
<meta property="twitter:app:url:ipad" name="twitter:app:url:ipad" content="tripadvisor://www.tripadvisor.com.tw/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html?m=33762">
```
補充：
* SEO team 和工程師相互配合
* 原生流量（流量從 SEO 獲得） v.s. 付費流量（付錢購買獲得的流量）
* SEO 補充先知道就好，以後公司要做 SEO 優化的話，再研究這些 tag。
### escape: 該怎麼顯示標籤？
想要在 html 上以純文字顯示標籤（ `<div>` ），但是在瀏覽器上會被解析為標籤（即 escape 跳脫），就是字元不見。以其他顯示顯示字元，而不是當作標籤。
舉例：
`<div></div>` 要讓這個標籤以純文字的形式，顯示在 html呢？
```htmlembedded=
<div></div>
```
###### tags: `MTR05` `Lidemy 學習筆記`
Sign in with Wallet
Connect another wallet