HTML 基礎

網頁背後到底是什麼？

網頁一定要靠瀏覽器渲染，我們才能看得到畫面

絕對會用到的標籤：html、head 與 body

HTML 的全名是 HyperText Markup Language （超文本標記語言）
HTML 是一個「標記語言」，不是一個 programming language（程式語言）

標記語言就是：有很多標籤，有一定的格式
瀏覽器就可以根據這些格式，把該有的樣子渲染出來

在 HTML 中，像是 <meta charset="utf-8" /> 這種自己成對的標籤，最後面的那個反斜線可加可不加，因此寫成 <meta charset="utf-8"> 也是可以的，但自己是習慣都會加上 /

參考資料：HTML 5: br tag

保留完整格式：pre

當我想要在 html 裡面顯示一段 JS 的程式碼時，
html:

    <p>
      function greeting () {
        console.log('How are you?')
      }
    </p>

如果是使用 p 標籤，顯示出來的就會是這樣：
換行、縮排都不見了

這時，就需要使用到 <pre></pre> 標籤

<pre> 是 preformatted text 的簡寫，會幫我把文字「預先做好格式化（瀏覽器會自動加上一些樣式）」，把我在 html 裡面打的程式碼，原封不動地顯示出來
（記得要把 html 程式碼推到最左，這樣顯示出來也會靠齊左側）

    <pre>
function greeting () {
  console.log('How are you?')
}
    </pre>

要顯示一大堆空格也可以：

    <pre>
function                greeting () {
  console.log('How are you?')
}
    </pre>

表格

<table> 表格
<tr> table row
<td> table cell
<th> table header

<a> 標籤

<a> 就是 anchor（錨點）
href 就是 hypertext reference

直接用別人的網頁：iframe

用 iframe 可以嵌入網頁

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

參考資料 其他更多 input 種類

SEO 與相關標籤：meta tag

SEO 在意的點就是：要幫助搜尋引擎去理解你的網頁

以下會介紹有助於 SEO 的標籤：

如果沒有這些標籤，搜尋引擎當然也是可以去爬你的網頁，藉由網頁內容去猜到「網頁標題、關鍵字、網頁敘述」這些，但可能會猜不準，或是需要花費很多時間去猜

因此才會提供這些標籤，讓網頁開發者可以透過格式化的方式，主動讓搜尋引擎知道「這個網頁提供了什麼內容」，搜尋引擎就可以更了解你的網頁，網頁在搜尋結果的排名就可能會更好

這裡以 Tripadvisor 的鼎泰丰(101店) 為例，打開 view page source 來看他的 html 原始碼

meta 標籤的 keywords 和 description

<meta name="keywords" content="信義區鼎泰豐(101店), 餐廳, 餐廳評論, 食物, 用餐"/>
<meta name="description" content="鼎泰豐(101店)(信義區): 讀讀4,651則則關於鼎泰豐(101店)客觀公正的美食評論，在Tripadvisor的5分滿分評等中得4.5分，在信義區的1,472家餐廳中排第12名。"/>

meta 標籤的 og 系列

og 的全名是 Open Graph Protocol

因為要讓其他的 social media 更了解你的網頁，因此會有 Open Graph Protocol 的出現

<meta property="og:title" content="鼎泰豐(101店) (信義區) - 餐廳/美食評論 - Tripadvisor"/>
<meta property="og:description" content="鼎泰豐(101店)(信義區): 讀讀4,651則則關於鼎泰豐(101店)客觀公正的美食評論，在Tripadvisor的5分滿分評等中得4.5分，在信義區的1,472家餐廳中排第12名。"/>
<meta property="og:image" content="https://media-cdn.tripadvisor.com/media/photo-s/1a/4b/a8/19/101.jpg"/>
<meta property="og:image:width" content="338"/>
<meta property="og:image:height" content="450"/>
<meta property="og:type" content="restaurant"/>
<meta property="og:url" content="http://www.tripadvisor.com.tw/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html"/>
<meta property="og:site_name" content="Tripadvisor"/>

這些 og 系列的標籤，主要是給 facebook 看的，可以使用這個 facebook 分享偵錯工具

在網址列把網址貼上後，按下「Debug」，就會告訴你這個網頁被 facebook 看起來是什麼樣子

JSON-ld

底下這個 json 格式的東西叫做 JSON-ld，全名是 JSON for Linking Data

JSON-ld 的目的就跟 Open Graph Protocol 一樣：都是要讓你可以用一個格式化的方式來描述你的網頁

JSON-ld 通常是給 Google 看的，Tripadvisor 必須主動提供這些 JSON-ld 的資訊，Google 才可以在搜尋結果幫 Tripadvisor 的網站顯示更多資訊（下圖紅色框框處），有了這些資訊，也更容易吸引消費者點進去，讓網站排名上升

如果沒有這些固定格式和架構的話，搜尋引擎還需要特別去做一些資料分析才能讀懂你的網頁

<script type="application/ld+json">
{
"@context":"http:\u002F\u002Fschema.org",
"@type":"FoodEstablishment",
"name":"\u9F0E\u6CF0\u8C50(101\u5E97)",
"url":"\u002FRestaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html",
"image":"https:\u002F\u002Fmedia-cdn.tripadvisor.com\u002Fmedia\u002Fphoto-s\u002F1a\u002F4b\u002Fa8\u002F19\u002F101.jpg",
"priceRange":"$$ - $$$",
"aggregateRating":{
"@type":"AggregateRating",
"ratingValue":"4.5",
"reviewCount":"4651"},
"address":{
"@type":"PostalAddress",
"streetAddress":"\u5E02\u5E9C\u8DEF45\u865F B1",
"addressLocality":"\u4FE1\u7FA9\u5340",
"addressRegion":"",
"postalCode":"110",
"addressCountry":{
"@type":"Country",
"name":"\u53F0\u7063"
}
}
}
</script>

robots.txt

robots.txt 是「給網頁爬蟲看的檔案」（是一個純文字檔），通常都是放在根目錄底下，因此我只要在網址列輸入 https://www.tripadvisor.com.tw/robots.txt

就可以看到 Tripadvisor 的 robots.txt 檔案了：

• 「Disallow:」代表：Tripadvisor 在跟網頁爬蟲說「不要爬我這些開頭底下的網頁」
• 「Allow:」代表：Tripadvisor 在跟網頁爬蟲說「可以爬我這些開頭底下的網頁」

這就是 robots.txt 檔案的作用

Sitemap.xml

Sitemap 會是一個 XML 格式的檔案

Sitemap.xml 的作用是：把網站中每一個頁面的網址都列出來，讓搜尋引擎把這些網址都爬下來（搜尋引擎就不用自己一個一個去找網頁有哪些頁面）

可以確保：讓搜尋引擎知道網站中每一個頁面的存在

提供其他語言

標籤的用途是：
跟搜尋引擎說「我這個網站有提供給其他國家用的語言」

假設這個網頁有中文版、英文版，同一個頁面但會有中文版和英文版兩個頁面，這時就可以利用這個標籤跟搜尋引擎說「其實這兩個頁面是同一個頁面，只是不同語言」

這樣的話，搜尋引擎給這個頁面的分數就可以集合在一起，不會因為被分成中文、英文版兩個頁面而分散掉

例如 "en-GB" 就是給 British English 用的版本，網址就是 href 寫的那段

<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="en-GB" href="https://www.tripadvisor.co.uk/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html" />

底下的標籤是在跟搜尋引擎說「我這個網頁有 ios app，app 的名稱是 TripAdvisor，在 app store 的 ID 是 284876795」

加上這個標籤後，如果 user 是用 ios 的瀏覽器（safari）看 TripAdvisor 的網頁，瀏覽器就會跳出一個 banner 問 user 要不要下載 TripAdvisor 的 ios app

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

底下的標籤也是一樣，用 twitter 瀏覽 TripAdvisor 的網頁，就會有其他效果

<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:iphone" name="twitter:app:url:iphone" content="tripadvisor://www.tripadvisor.com.tw/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html?m=33762"><meta name="keywords" content="信義區鼎泰豐(101店), 餐廳, 餐廳評論, 食物, 用餐"/><meta name="description" content="鼎泰豐(101店)(信義區): 讀讀4,651則則關於鼎泰豐(101店)客觀公正的美食評論，在Tripadvisor的5分滿分評等中得4.5分，在信義區的1,472家餐廳中排第12名。"/>

Escape：該怎麼顯示標籤？

Escape（跳脫）所代表的情況就是：這個字元本身有代表一個意思，但是我想把它當成純文字顯示出來

意思就是：會用其他方式來顯示這個字元，而不是把它當成「一組 html 標籤」來使用

例如：
在 div 標籤裡面，我想要把 <h1></h1> 當成純文字顯示在網頁上

    <div>
      <h1></h1>
    </div>

作法：利用這些跳脫符號

& 用 & 取代
< 用 &lt; 取代
> 用 &gt; 取代

因此，就會變成這樣：

    <div>
      &lt;h1&gt;&lt;/h1&gt;
    </div>

網頁上就會顯示出 <h1></h1> 了