HTML 基礎

網頁是透過瀏覽器渲染出來的結果。他背後的原理是，就是用一個瀏覽器看得懂的格式（文字檔）跑出來。

HTML

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

最基礎樣貌：

<!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

必須用雙引號" "括起來＝字串的意思

<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>
    <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

帶你到外面去

<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>

帶你到內頁的某段去

<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 New Semantic Elements in HTML5

直接用別人的網頁：iframe

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

<iframe src="url" width="100%" height="500px">
//可設定網頁大小

表單相關標簽：form、input、textarea

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

`type=" "`:

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

checkbox: 複選框

<form>
<div>
姓名：<input type="text" />
</div>
<div>
密碼：<input type="password" />
</div>
<div>
    <input type="submit" value="送出表單" />
</div>
</form>

若要只點擊文字就可選到框框，請加`<...id="xxx"/><label for="xxx">`

<div>
生理性別：<input type="radio" name="gender" id="male" /><label for="male">男性</label> 
<input type="radio" name="gender" id="female" /><label for="female">女性</label>
<input type="radio" name="gender" id="other" /><label for="other">其他</label>
</div>
<div>
興趣：<input type="checkbox" id="sports" /><label for="sports">運動</label>
<input type="checkbox" id="readind" /><label for="readind">閱讀</label>
<input type="checkbox" id="print" /><label for="print">畫畫</label>
</div>

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 系列通常是給 Facebook 用的
- 可用Facebook 偵錯工具-Facebook Debugger 偵查某個網頁在臉書看起來的樣子，而選擇你想要的圖片呈現模樣。
```
<meta property="og:title" content="xxx" />
```
JSON-ld (JSON for Linking Data)
- 跟 open grahp protocol 有點像，目的都是要讓人用格式化的東西去描述某樣東西，主要是因為人寫的看不等，機器必須用格式化的東西才會懂指令。
- 通常是給 Google 看的
```
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "FoodEstablishment"
...
...
}
```
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：該怎麼顯示標籤？

& => & < => < > => >

zuppachu / Joanne-s-Learning-Blog

[ FE101 ] HTML + [ MTR01 ] Lesson 2-1 前端基礎筆記 #7

HTML 基礎

HTML

`<div>` vs `<span>`

圖片顯示 img

保留完整格式 pre

表格必備標籤

超連結

語意化的 UI 標籤：main、nav、footer

直接用別人的網頁：iframe

表單相關標簽：form、input、textarea

`type=" "`:

若要只點擊文字就可選到框框，請加`<...id="xxx"/><label for="xxx">`

SEO 與相關標簽：meta tag

Escape：該怎麼顯示標籤？

瀏覽器運作原理

zuppachu / Joanne-s-Learning-Blog

[ FE101 ] HTML + [ MTR01 ] Lesson 2-1 前端基礎 筆記 #7

HTML 基礎

HTML

<div> vs <span>

圖片顯示 img

保留完整格式 pre

表格必備標籤

超連結

語意化的 UI 標籤：main、nav、footer

直接用別人的網頁：iframe

表單相關標簽：form、input、textarea

type=" ":

若要只點擊文字就可選到框框，請加<...id="xxx"/><label for="xxx">

SEO 與相關標簽：meta tag

Escape：該怎麼顯示標籤？

瀏覽器運作原理

[ FE101 ] HTML + [ MTR01 ] Lesson 2-1 前端基礎筆記 #7

`<div>` vs `<span>`

`type=" "`:

若要只點擊文字就可選到框框，請加`<...id="xxx"/><label for="xxx">`