---
# System prepended metadata

title: HTML
tags: [HTML]

---

# HTML
= Hypertext Markup Language（超文本標示語言），所以並不是個程式語言。

###### tags: `HTML`

最基礎樣貌：
```htmlembedded=
<!DOCUMENT html> //跟瀏覽器說：請給我標準模式（render 渲染）
<html>
    <head>
        <meta charset="utf-8" /> //給機器看的，利於 SEO  優化
        <!--   
        <meta> 裡面沒有內容 所以是一個自成一個標籤（`<meta/>`）
        屬性: charset  
        值(value): utf-8 
        -->  //  註解 <!-- --> 給人類看的
        <meta name="viewport" content="width=device-width, initial-scale=1">    //頁面大小設定
        <title>網頁的標題</title>
    </head> 
    <body>
    </body>
</html>
```

## `<div>` vs `<span>`
> 做分類、分類用的

`<div>`: division 自己佔滿一行
`<span>`：可以與其他元素放在同一行，通常用於讓文字或一個段落做變化用

## 圖片顯示 img
> 必須用雙引號" "括起來 ＝ 字串的意思

```htmlmixed=
<img alt="I am an image." title="圖片的標題" src="url" />
```

`alt` = "": 圖片不能顯示時的替代文字。
`src` = "url": 圖片來源：網址或目錄。
`title` = "": 圖片的標題，滑鼠移過去時顯示標題

保留完整格式 pre
* `<pre></pre>` preformatted text ：
   顯示出被格式化過的文字。
   可將內容原封不動顯示，有空格就有空格，有換行就有換行，有利於呈現程式語言。
* `<br>` line break 換行用。

## 表格必備標籤
* `<table></table>` 表格
* `<tr></tr>` table row
* `<td></td>` table cell
* `<th></th>` table header

這有快速鍵......

下面表格可以寫成這樣

`table>tr*3>td{姓名}+td{$分數}*2`
超級神奇的....


```htmlmixed=
<table>
    <tr>
        <th>姓名</th>
        <th>國文分數</th>
        <th>英文分數</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>70</td>
        <td>80</td>
    </tr>
    <tr>
        <td>小花</td>
        <td>89</td>
        <td>65</td>
    </tr>
</table>
```

## 超連結
<a> anchor 錨點，兩種用法：
href = hypertext refrence

1. 帶你到外面去
```htmlmixed=
<body>
    <a href="http://google.com">點我去google搜尋引擎</a>

    <a href="http://google.com" target="_self">google 搜尋引擎</a>
    //target= "_self" => 在原頁面上開啟網址

    <a href="http://google.com" target="_blank">google 搜尋引擎</a>
    //target="_blank" => 另開新分頁
</body>
```

2. 帶你到內頁的某段去
```htmlmixed=
<body>
    <a href="#p3"> 帶我到p3</a>
    <h1 id="p1"> 網頁前端1</h1>
    <p>........</p>
    <h1 id="p2"> 網頁前端2</h1>
    <p>........</p>
    <h1 id="p3"> 網頁前端3</h1>
    <p>.........</p>
    <a href="#p1"> 帶我到p1</a>
</body>
```
> 先設定 id="#p1" 然後再設定 `<a href="#p1">`點擊 『帶我到 p1』 立即跳到段落一。

## 語意化的 UI 標籤：main、nav、footer
= Semantic elements 語義化元素。

* `<main></main>` 網頁主要的部分
* `<nav>` navigation 導覽列
* `<footer>` 網頁的底部，通常有的一些資訊，例如：聯繫方式...etc.

其他資源：
[MDN Semantics](https://developer.mozilla.org/en-US/docs/Glossary/Semantics)
[New Semantic Elements in HTML5
](https://www.w3schools.com/html/html5_semantic_elements.asp)

## 直接用別人的網頁：iframe
iframe 嵌入網頁
一些大的網站通常會設定不給使用，怕被盜用內容。

```htmlmixed=
<iframe src="url" width="100%" height="500px">
//可設定網頁大小
```
## 表單相關標簽：form、input、textarea

* `<form>`: 表單
* `<input>`: 輸入框

* `type`=" ":
* `text`: 輸入文字。
* `submit`: 提交
* `password`: 變成 ********
* `email`: 有些瀏覽器會幫你做驗證。
* `date`: 可選取日期。
* `radio`: 單選框
* `checkbox`: 複選框

## SEO 與相關標簽：meta tag
* Search Engine Optimization (SEO) 搜尋引擎優化：幫助搜尋引擎理解你的網頁。
> 那如何幫助搜尋引擎理解呢？

* 放 <meta>: keywords or description

```
<head>
    <meta name="keywords" content="放關鍵字" />
    <meta name="description" content="放描述" />
</head>
```
* 放 og tag
  * Open Graph Protocol 給機器看的
  * [og系列](https://developers.facebook.com/tools/debug/)通常是給 Facebook 用的
  * 可用Facebook 偵錯工具-Facebook Debugger
偵查某個網頁在臉書看起來的樣子，而選擇你想要的圖片呈現模樣。

> <meta property="og:title" content="xxx" />

* JSON-ld [(JSON for Linking Data)](https://json-ld.org/)
  * 跟 open grahp protocol 有點像，目的都是要讓人用格式化的東西去描述某樣東西，主要是因為人寫的看不等，機器必須用格式化的東西才會懂指令。
  * 通常是給 Google 看的
  
```
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "FoodEstablishment"
    ...
    ...
}
```
* robots.txt: 給網頁爬蟲看的檔案，跟他說哪個檔案要爬，哪個別爬。(通常在根目錄底下ex:`https://www.tripadvisor.com.tw/robots.txt`)

* sitemap.xml: 網址的地圖
網站中的每個網址都放上去，搜尋引擎就知道要爬去哪。

* <link rel="alternate" hreflang="en" href="某語言版本的網址" />
告訴搜尋引擎：我們是同個頁面但是不同語言，所以搜尋引擎會自動幫你排在一起，不因不同網址而分散。

* ios 手機 app
在 ios 手機上用 safari 看頁面時，會跳出這個網頁有 app 版要不要下載。
```
<meta property="al:ios:app_name" content="TripAdvisor">
<meta property="al:ios:app_store_id" content="28478958">
```
小結：
其實這些標籤都不是給人看得，都是給機器看的。利用格式化的方式，讓搜尋引擎看得比較快且精確，主動讓搜尋引擎知道你的網頁提供什麼內容，進而影響你網頁的排名～

## Escape：該怎麼顯示標籤？

```htmlmixed=
<div>
    <div></div>
</div>
```
```htmlmixed=
<div>
    &lt;div&gt;&lt;/div&gt;
</div>
```

& => &amp;
< => &lt;
> => &gt;

