HTML 基礎


Posted by saffran on 2021-02-06

網頁背後到底是什麼?

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

絕對會用到的標籤: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>

作法:利用這些跳脫符號

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

因此,就會變成這樣:

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

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


#html







Related Posts

使用 Prometheus 和 Grafana 打造 Flask Web App 監控預警系統

使用 Prometheus 和 Grafana 打造 Flask Web App 監控預警系統

用 Python 自學資料科學與機器學習入門實戰:Matplotlib 基礎入門

用 Python 自學資料科學與機器學習入門實戰:Matplotlib 基礎入門

GIT Github

GIT Github


Comments