Introduction to HTML Foundation

前言

此篇文章有關 HTML（Hyper Text Markup Language）基本的架構與基礎標籤用法，最後面還有提到 SEO 基本的概念。內文中的 [1]、[2]、[3] ... 表示附有補充資料在文內最底。

不定時更新。

骨幹：HTML 最外圍的基礎架構

HTML 格式

<!DOCTYPE html>

首先先看第一行的這個標籤和其它標籤長得不太一樣，它的主要功用是：

「和瀏覽器宣告這一份 html 檔案要使用最標準的 HTML 格式去渲染畫面」。

此行非必要性，不過建議設定。

若不設定 <!DOCTYPE html>

因為瀏覽器有很多類型，假設不設定此行，瀏覽器會根據它自己本身的格式定義來渲染畫面，這有可能會造成一些非預期性的渲染結果發生，也就是格式可能會跑掉，非當初所設定的。

HTML 標籤三本柱

我們可以看到通常標籤都是成對的，也就是有頭 <XXX>，就有尾巴 </XXX>，而尾巴的部分要加上反斜線表示結尾標籤。頭尾標籤中間的部分就是讓我們塞標籤內容的地方，裡面可以再塞標籤或者是文字等等有的沒的。

<html>

html 這個標籤簡單說就是把要呈現在瀏覽器上的功能與內容都包在裡面，也就是說在標籤中間塞的內容都是會被瀏覽器處理的。html 標籤又分成兩個區塊：「head、body」。

<head>

head 標籤內容主要是在放一些給瀏覽器一些參數或者是描述性的東西（像網頁標題）。

<body>

在 body 標籤內所寫的任何東西，都和網頁的畫面呈現有關，也就是使用者在網頁上實際可以看到的內容。

在 head 裡加點東西

<meta charset="UTF-8"></meta> 這一行的意思是以 UTF-8 的編碼格式渲染畫面，也可用小寫 utf-8。 meta 開頭標籤裡面的 charset 稱作屬性（attribute），UTF-8 則是屬性的值（value）。

而 <title>I am the title</title> 的 title 標籤是網頁標題，什麼是網頁標題？就是像這個：

「I am the title 」就是會印出來在瀏覽器上方的網頁標題。

置空元素（Empty elements）

另外通常這種標籤中間沒有任何內容的標籤，會省略掉結尾標籤，就把開頭標籤當作頭尾標籤的合體，像是這樣：
這種標籤我們一律稱為「置空元素」，在 HTML5 後，最後加上「/」反斜線非必要，除非需要嚴謹的判定與驗證。

在 HTML 檔案裡加上註解

只要在任意地方輸入 就可以在中間加上單行或多行的註解。瀏覽器不會執行有註解的地方。

關於 body，關於你，關於我

標題 <h1> ~ <h6>

<h1>The title is good good</h1>
<h2>The title is good good</h2>
<h3>The title is good good</h3>
<h4>The title is good good</h4>
<h5>The title is good good</h5>
<h6>The title is good good</h6>

h1、h2、h3、h4、h5、h6 標籤當中， h是 head 的縮寫，作為標題的標籤。
h1 是字體最大的標題；h6 則是最小，如下：

段落 <p>

  <h1>The title is good good</h1>
  <p>hey,I'am paragraph</p>
  <h2>The title is good good</h2>
  <p>hey,I'am paragraph 2</p>

p 為 paragraph 的縮寫，顧名思義為段落，作為段落文字的標籤用。

分組：<div> 和 <span> 的差異

<div>

  <div> //區塊一
    <h1>The title is good good</h1>
    <p>hey,I'am paragraph</p>
  </div>

  <div> //區塊二
    <h2>The title is good good</h2>
    <p>hey,I'am paragraph 2</p>
  </div>

div 標籤全名為 division，分組、分段的意思，我們可以把 body 內的標籤內容藉由 div 來分區塊，這樣的好處是之後 CSS 在選擇時可以改到同一個區塊的內容同時不會影響到其它區塊的內容。

不過在上圖當中，會看到網頁內容和上方沒有加上 div 區塊的網頁內容根本毫無差異，也就是說 div 並不會直接影響網頁的內容，這個意思有點像是做一個標記在這個區塊，把它們歸類成同一區的，如果對這個區塊的標記（div）做 CSS 的樣式，被標記在同一區的內容就會一起被更改。

在開發者工具裡觀察有無 div 的差異

從上圖中我們會發現到被 div 包在一起的 h1 和 p，當我選擇 div 的標籤會看到它們同時被選起來在同一個框框裡，如果是沒加 div 的，h1 和 p 則會各自成為一個框框。而 div 的這個特性，來自於它是區塊元素（block elements）[1]，區塊元素的特性是，整行（從網頁左邊到網頁右邊）都是這個區塊的作用區域（呈現內容的區域）。

<span>

  <div>
    <h1>The title is good good</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores at officiis vitae temporibus id est enim nobis,
      odit tenetur ducimus <span>corporis</span> modi nulla sit fugiat consequuntur non cum hic. Quisquam?</p>
  </div>

span 跟 div 一樣都是分組的概念，那它和 div 有什麼差別？上個段落我們談到 div 是個區塊元素，而 span 則是行內元素（inline elemnets），行內元素的意思是，它的元素區塊不是佔滿整行網頁，而是左右兩旁如果仍有空位還可以容下其它標籤的內容，像上面的程式碼結果會長這樣：

span 塞在 p 標籤的內容中間， p 標籤的內容卻沒有被更動，而且 span 的內容自成一格，變成那一行的一個小區塊。它這樣的特性可以用在單獨處理段落的某處文字，對這個 span 做 CSS 格式只會影響到被 span 包圍的小區塊文字。

那如果在段落中塞 div 呢？

如果我們把上面的 span 換成 div 就會變成這樣：

div 的地方被換行了，而且還自成一行，整行兩旁空空如也，因為它佔滿了一整行。

圖片<img>

  <img alt="photo" title="LOGO" src="https://avatars2.githubusercontent.com/u/49014468?s=88&v=4" />

img 為 image 的縮寫，顧名思義就是圖片的標籤，只要你要在內容裡插入圖片，就要使用這個標籤。另外要注意的是 img 是一個置空元素。

src 為 source 的縮寫，這個屬性的值為圖片網址，圖片網址是字串一定要用引號（""）包起來。
title 的作用在於當滑鼠移到圖片，會跑出一個小方框，小方框有一串字，那一串字就是 titel 的值。title 非必要設定。
alt 為 alternative 的縮寫，當圖片跑不出來時變成叉燒包所顯示的文字，即是 alt 的值。alt 非必要設定。

上方程式碼的結果（圖片的部份）：

清單：<iul>、<ol>、<ili>

<ul>

ul 為 unorder list 的縮寫，也就是無排序的清單。

  <ul>
    <li>apple</li>
    <li>mango</li>
    <li>banana</li>
    <li>toamto</li>
    <li>potato</li>
  </ul>

<ol>

ol 為 order list 的縮寫，也就是有排序的清單。這邊的排序指的不是幫你排順序，而是每個項目前面有1. 2. 3. 的標記。

  <ol>
    <li>apple</li>
    <li>mango</li>
    <li>banana</li>
    <li>toamto</li>
    <li>potato</li>
  </ol>

<li>

li 則為 list item 的縮寫，li 都會包在 ul 或 ol 裡面，當作每一個項目的標籤，有幾個 li 就有幾個項目。

預處理格式 <pre>

  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
    Error, at praesentium delectus itaque deserunt iusto illum. Rem pariatur ipsam sunt recusandae amet at aliquam
    beatae? Esse, optio. Molestiae, consequatur. Similique?
  </p>

如果以 p 標籤的格式來呈現這個段落，會發現該空格的地方沒有空格，空格再多的地方都只會空一格：

為了解決這個辦法，我們可以使用 pre（preformatted text）標籤，照字面的意思就是讓文字以最初在 html 檔案裡的樣子呈現出來。把上面的 p 改為 pre：

  <pre>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
    Error, at praesentium delectus itaque deserunt iusto illum. Rem pariatur ipsam sunt recusandae amet at aliquam
    beatae? Esse, optio. Molestiae, consequatur. Similique?
  </pre>

所呈現的結果：

空行 <br>

  <p>
    Lorem ipsum dolor sit,<br>amet consectetur adipisicing elit.
    Error, at praesentium delectus itaque deserunt iusto illum. Rem pariatur ipsam sunt recusandae amet at aliquam
    beatae? Esse, optio. Molestiae, consequatur. Similique?
  </p>

br 為 line break 的縮寫，字面意思就是斷行、空行。在段落的任意地方加上 br ，從 br 後面第一個字開始整個內容就會被換行。br 是置空元素。

表格 <table>

  <table>
    <tr>
      <th>Name</th>
      <th>sex</th>
      <th>City</th>
    </tr>
    <tr>
      <td>FaDaCai</td>
      <td>Male</td>
      <td>Kaohsiung</td>
    </tr>
    <tr>
      <td>HotSister</td>
      <td>Female</td>
      <td>Taipei</td>
    </tr>
  </table>

table 顧名思義就是表格，製作表格會用到的標籤，包在所有表格標籤的最外圍。

tr 為 table row，一行一行。
th 為 table head，表格標題，通常在第一行，表示每一列的資料統一的內容。以粗體表示。
td 為 table column，一列一列。

上方程式碼的結果：

可以看到資料按照著表格格式排列著。

錨點 <a>

<a href="https://youtube.com" target = "_blank">Website Link</a>
a 為 anchor 的縮寫，簡單說就是超連結。

href 為 hypertext reference，它的值為網站網址。
target 為點下去超連結後的頁面處理方式，預設是 "_self" 會直接在當前頁面連到超連結網頁，"_blank" 則是會跳出一個新分頁連到超連結的網頁。

其它功能

a 還有一種能在自身的頁面做導覽的功能。

現在有三個段落，我們可以在 Session 3 的標籤這麼做： <h2 id="S3">Session 3</h2>，新增一個 id = "S3" 的選擇器。

接著我們在頁面上方新增 <a href="#S3">To Session 3</a>，「#S3」意思就是選定 id 被設定成 S3 的地方，之後 CSS 都會用到這個概念來選擇有設定 id 的標籤。

可以看到頁面上方出現超連結：

之後我們只要點「 To Session 3」那個超連結，網頁畫面就會被帶到 Session 3 所在的位置。

語意元素（Semantic Elements）[2]

什麼是非語意元素？

像是 div、span 這種，元素本身沒有任何意思，它的缺點是如果只在 html 檔案中看那一段標籤內容會不曉得實際上是擺在網頁的哪邊或者是不曉得其功用，另外瀏覽器（機器）也會不知道它的意思。

有語意元素就用語意元素

語意元素好過非語意元素，語意元素不止可以讓我們閱讀 html 檔案的人能夠立刻明白那一段內容，瀏覽器（機器）也會曉得這個標籤就是代表放在哪個位置、有什麼功用。
div 通常用在區塊，而我們可以藉由其它表示區塊的語意元素（header、main、footer）來代替它；而 span 則相對於 p。

常見的語意元素

header：整個網頁的頂端，會放 LOGO、Website Name 等內容。
nav：navigation，網頁上方的導覽列。
main：網頁主要的內容都可以放在這裡面。
section：內容裡面一個一個的區塊。
footer：網頁最底下的區塊，通常會放一些版權、規章和一些網頁補充資訊的超連結。

圖片來源： w3school

借個網頁 <iframe>

<iframe src="https://dq.yam.com/" width=100% height=500px></iframe>

iframe 可以直接把其他網站的畫面放到本網站，並且能在本網站對那個網站進行操作。

但是一些網站會設定「X-Frame-Options」屬性不讓你這麼做，因此用這方式連到它們網站不會如期呈現畫面。

表單 <form>

  <form>
    <!--單行文字-->
    <div>
      Name:
      <input type="text" />
    </div>

    <!--密碼格式-->
    <div>
      Password:
      <input type="password" />
    </div>

    <!--Email格式-->
    <div>
      Email:
      <input type="email" />
    </div>

    <!--單一選項選擇-->
    <div>
      Choose:
      <input type="radio" name="politics" id="green" /><label for="green">明鏡洞</label>
      <input type="radio" name="politics" id="blue" /><label for="blue">購明洞</label>
    </div>

    <!--選項勾選-->
    <div>
      2020:
      <input type="checkbox" /><label>white</label>
      <input type="checkbox" /><label>green</label>
      <input type="checkbox" /><label>blue</label>
    </div>

    <!--提交按鈕-->
    <div>
      <input type="submit" value="送出" />
    </div>
  </form>

上面的 HTML 呈現的畫面長這樣：

表單最外層需要包覆著 form 的標籤，而 form 裡面有許多 input 的樣式分別代表不同的功能，以下介紹每個 input 的功能。

單行文字（text）

    <div>
      Name:
      <input type="text" />
    </div>

type 屬性輸入 text 的值即單行文字，單行文字可輸入相對應的純文字資料，比如帳號、姓名、地址等等表單常見的資料。前方的 Name:只是單純表示這行要輸入的主題文字，如果說前方這個文字要設定成和 input 框框有關聯，可以這麼設定：

    <div>
      <label for="name">Name:</label>
      <input type="text" id="name"/>
    </div>

label 裡面 for 屬性的值要和 input 裡面 id 屬性的值一樣，這樣子點到文字也可以輸入框框，變成不一定只有按框框才能開始輸入，有點抽象，就像下圖這樣：

（點到 Name 文字，框框也有「l」，表示可以開始在框框內輸入文字了。）

密碼格式（password）

    <div>
      Password:
      <input type="password" />
    </div>

type 屬性輸入 password 的值即密碼格式，在框框裡面輸入值會變成這樣：

Email 格式（email）

    <div>
      Email:
      <input type="email" />
    </div>

type 屬性輸入 email 的值即 Eamil 的格式，這個框框內的資料必須是 Email 的格式，否則會出現：

單一選項選擇（radio）

    <div>
      Choose:
      <input type="radio" name="politics" id="green" /><label for="green">明鏡洞</label>
      <input type="radio" name="politics" id="blue" /><label for="blue">購明洞</label>
    </div>

type 屬性輸入 radio 的值即為這種在多選項中只能選擇一個的格式。 name 的屬性功用等同群組，相同 name 值的 radio 即為同一組，在同一組當中，只能從中選擇一個選項，依照這個例子，要嘛只能選明鏡洞；不然就是購明洞。label for 屬性的作用前面的單行文字有提到。

選項勾選（checkbox）

    <div>
      2020:
      <input type="checkbox" /><label>white</label>
      <input type="checkbox" /><label>green</label>
      <input type="checkbox" /><label>blue</label>
    </div>

type 屬性輸入 checkbox 的值即為選項勾選的格式，這種格式和 radio 不同的地方是可以多選，可以在每個選項做打勾與取消：

提交按鈕

    <div>
      <input type="submit" value="送出" />
    </div>

type 屬性輸入 submit 的值即為提交按鈕，在表單中應該可以說是必備，沒有這顆按鈕使用者無法送出資料。value 的屬性可以更改按鈕上的文字。另外，按鈕發送後，所有在框框內輸入的資料都會被清空。

另外還有很多 input 的格式與其它詳細的功能，詳見補充資料_[3]_。

SEO 的相關標籤

SEO（Search Engine Optimization）

搜尋引擎優化的意思就是想辦法讓搜尋網站（機器）能夠精準地找到你的網站，且在搜尋網站中的曝光排在最前面（第一頁），這樣你的網站自然而然曝光率高會比較容易被使用者點擊，等於是免費的廣告，省去向搜尋網站購買關鍵字的支出。

通常一間公司重視 SEO 的話，會有專門的 SEO Team 處理這塊，前端工程師的職責就是和 SEO Team 的人合作並且把需求（加上關鍵字、標籤）給放到 HTML 上。

能 SEO 的一些 tag 與方式

以下的原始碼為 TripAdvisor 這個網站。

第一招：新增 meta name 的屬性

<meta name="keywords" content="假期, 渡假, 旅遊套裝行程, 自由行, 旅行, 規劃, 飯店, 汽車旅館, 民宿, 指南, 評論, 受歡迎, 人氣, 計畫, 機票, 優惠, 折扣, 景點, 建議, 餐廳, 推薦, 評價"/>
<meta name="description" content="全球最大旅遊網站。 600000000 則以上不偏頗的旅客評論。 搜尋 200 個以上的網站，查詢最優惠飯店價格。"/>

在 HTML 的 head 裡加上 meta 這個標籤，並賦予 name 屬性兩個值：keywords、description，在 content 裡面的內容就是寫給搜尋引擎找的，也就是使用者在搜尋網站輸入「假期」，出現 TripAdvisor 這個網站的機會就增加。

第二招：The Open Graph Protocol

The Open Graph Protocol 是一個搜尋引擎優化的一個協定，主要是以 Facebook 的視角去看其它網站會是什麼樣子。只要在 meta 標籤加上和協定一樣的格式，就會優化網站的搜尋。

<meta property="og:title" content="TripAdvisor： 閱讀評論、比較價格和預訂"/>
<meta property="og:description" content="全球最大旅遊網站。 600000000 則以上不偏頗的旅客評論。 搜尋 200 個以上的網站，查詢最優惠飯店價格。"/>
<meta property="og:image" content="https://static.tacdn.com/img2/branding/rebrand/TA_brand_logo.png"/>
<meta property="og:image:width" content="550"/><meta property="og:image:height" content="370"/>
<meta property="og:type" content="website"/><meta property="og:url" content="http://www.tripadvisor.com.tw/"/>
<meta property="og:site_name" content="TripAdvisor"/>

在 HTML 的 head 加上這些 meta 標籤，賦予 property 的屬性，含有「og」的值都是這種協定。

第三招： JSON-ld

全名 JSON for Linking Data。以 JSON 格式建立的資料，通常是 google 的搜尋引擎會看這些資料。

<script type="application/ld+json">
{"@context":"http://schema.org","@type":"FoodEstablishment","name":"統一星巴克(台中遠百門市)","url":"/Restaurant_Review-g13808534-d12118291-Reviews-Starbucks_Taichung-Xitun_Taichung.html","image":"https://media-cdn.tripadvisor.com/media/photo-s/0f/7c/56/6e/2017-05-24-17-39-10-largejpg.jpg","priceRange":"$$ - $$$","aggregateRating":{"@type":"AggregateRating","ratingValue":"4.5","reviewCount":"17"},"address":{"@type":"PostalAddress","streetAddress":"西屯區臺灣大道三段251號11樓","addressLocality":"","addressRegion":"","postalCode":"407","addressCountry":{"@type":"Country","name":"台灣"}}}
</script>

加上一個 script 的標籤，type 屬性的值輸入「"application/ld+json"」，內容資料皆以 JSON 格式呈現。

第四招：robots.txt

在網站首頁的域名後面加上「robots.txt」，像這樣：https://www.tripadvisor.com.tw/robots.txt
就會到像這個畫面的地方來：

通常這個網頁是給「網頁爬蟲」看的，告知網頁爬蟲的人什麼資料可以爬，什麼不可以爬。
基本上網頁會分這四個部份：簡介、sitemap、disallow、allow。

簡介：簡單介紹這邊是在做什麼，然後附上一些資訊。
sitemap：照字面翻意思就是網站地圖，這個網站地圖等於是把網站所有頁面的網址都包在裡面。
disallow：不給爬的資料。
allow：給爬的資料。

第五招：sitemap.xml

就是上面有提到的網站地圖，裡面涵蓋網站的所有頁面網址，有付這個地圖並且越完整的話，搜尋引擎就能越清楚知道你的網站有什麼樣的資訊與東西。下面為 Medium 的網站地圖：

還有超多網址在下方。

可以不用這些招式嗎？

可以，今天就算不使用 SEO ，搜尋引擎還是有辦法找到你的資料。

而 SEO 的目的就是轉守為攻，我們主動提供搜尋引擎我們網站的關鍵字，這樣搜尋引擎可以很方便且快速地找到我們網站的相關資訊。

結語

以上內容僅介紹最基礎的幾個 HTML 標籤與其基礎用法，每個標籤都還有其它可能的用法與屬性，詳細資訊可以上各大網站搜尋。

補充資料

[1] 區塊元素與行內元素參考資料：w3school

[2] 語意元素：MDN、w3school

[3] form、input：MDN form、MDN input

rz-huang / about-html Goto Github PK

about-html's People

Contributors

Stargazers

Watchers

about-html's Issues

前言