何謂 HTML ?

20 min readApr 18, 2019

目次：
1. Html 基本簡介
2. <body> 內標籤介紹
3. <head> 內標籤介紹
4. HTML Meta 標籤介紹
5. HTML Open Graph Data 標籤介紹

開始進入網頁排版的領域啦 d(`･∀･)b
之前就常常說一個網頁頁面的組成是由：Html、CSS、JavaScript 組成
透過 Html 將網頁內容分塊，再由 CSS 排版美化，JS 則能讓內容和格式更有互動性！
有一個很可愛的圖表示了他們三者的關係

https://internetingishard.com/html-and-css/introduction/

由此可知，HTML 是基本中的基本，沒有它定義網頁的區塊就無法搭建一個網頁
這篇會簡單講解一些 HTML 的標籤和介紹
日後再看會不會寫更多標籤的文章～

誰是 HTML ?

HTML —— HyperText Markup Language（超文字標示語言）
主要用於規劃網頁架構，透過標籤定義網頁的原生內容，比如：這行字是標題、這幾行是一塊、這行字是按鈕
這些動作可以幫助我們在寫 CSS 的時候套用樣式在指定區塊 (*´▽`*)
就能寫出美美的網頁啦～

首先，要認識 HTML ，要先了解他的結構
HTML 跟人一樣分為<head> <body>

<html> 標籤：包住頁面所有內容，有時也被稱作根元素
<head>標籤：放跟網頁有關的資訊，例如：顯示於搜尋結果的關鍵字、頁面說明、CSS等等
<body> 標籤：提供給使用者觀看的網頁內容，例如：文字、圖片、遊戲、可以播放的音樂或其他物件。

一般的配置長這樣：

<html>
    <head>    </head>
    <body>    </body>
</html>

誒？為什麼我看過的 HTML 文件比你打的多一行？

喔喔！這位同學是說 <!DOCTYPE html> 嗎？

<!DOCTYPE html> 通常寫在 <html> 之前，是一種宣告「這個文件為 HTML格式」的標籤
大概長醬：

<!DOCTYPE html>
<html>
    <head>    </head>
    <body>    </body>
</html>

基本上現行瀏覽器已經不需要再這樣宣告了，除了 IE8 以外！
且如果網站有支援 IE8 以下的瀏覽器，還需宣告 HTML 的版本
IE 果然非常麻煩呢 (´･_･`)

這樣有沒有對 HTML 有多一點的認識了呢？
但要寫出一個簡單的網頁，除了了解這些還遠遠不夠呢
既然已經了解基本架構，接下來就來認識幾個常用標籤吧～

HTML 標籤

認識標籤前，要先了解標籤的架構
從上一段的例子可以發現標籤好像都是成雙成對的？！
沒錯呢～構成一個 HTML 的「元素」需要三格部分構成：
起始標籤、內容、結束標籤

https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Getting_started

一般 HTML 的標籤分為：塊級元素、內聯元素、空元素

塊級元素：會自成一行或一塊，例如：<p></p> <div></div> <footer></footer>
內聯元素：通常內嵌在塊級元素，不會產生新行或區塊在網頁中，例如：<p><a herf></p> <p><strong> </strong></p>
空元素：單標籤組成，例如：<img src=" " alt=" ">
屬性：屬性包含元素的額外訊息，這些訊息不會出現在實際的內容中，需有 =和 "”，例如： <img src=" " alt=" " > <p class=" " >

了解標籤後就來看一些常見的標籤～

<body> 內的標籤

塊級元素

Paragraph

https://internetingishard.com/html-and-css/basic-web-pages/

<html>
  <head>  </head>
  <body>
    <p>First, we need to learn some basic HTML.</p>
  </body>
</html>

一個網頁最基本的就是句子，在 HTML 中最基本的標籤就是 <p> ，用來標明這些文字是一個句子

<p> 這樣是不會
有換行效果的</p><p>這樣才會</p>
<p>有換行效果</p>

Headings

<html>
  <head>  </head>
  <body>
    <h1>Interneting Is Easy!</h1>
    <p>First, we need to learn some basic HTML.</p>

    <h2>Headings</h2>
    <p>Headings define the outline of your site. There are six levels of headings.</p>  </body>
</html>

透過 Heading 可以標注此行為標題，並調整大小 & 加粗
Heading 標籤不只一個，從最大的 <h1> 一直到字體最小的 <h6>

但要注意一點！

使用 Heading 標籤的重點並非透過標籤調整大小

字體調整，套用 CSS 的樣式就做得到了，還能更客製化
Heading 標籤主要是來標注大標小標的層級關係，協助你分類內容層級關係

Unordered List

<html>
  <head>  </head>
  <body>    <h2>Lists</h2>

    <p>This is how you make an unordered list:</p>

    <ul>
      <li>Add a "ul" element (it stands for unordered list)</li>
      <li>Add each item in its own "li" element</li>
      <li>They don't need to be in any particular order</li>
    </ul>  </body>
</html>

List 也是非常常用的標籤，適合用來表示產品功能或比較等
無序清單還可透過 CSS 製作成網頁的導覽列呢！

用 HTML 與 CSS 製作簡單的導覽列（上）

導覽列 (navbar) 是網頁很常見的元素。學會 HTML 和 CSS 基本的語法後，來試著做一個簡單的 navbar 看看吧！

medium.com

Ordered List

<html>
  <head></head>
  <body>    <h2>Lists</h2>

    <p>This is how you make an unordered list:</p>

    <ul>
      <li>Add a "ul" element (it stands for unordered list)</li>
      <li>Add each item in its own "li" element</li>
      <li>They don't need to be in any particular order</li>
    </ul>    <p>This is what an ordered list looks like:</p>

    <ol>
      <li>Notice the new "ol" element wrapping everything</li>
      <li>But, the list item elements are the same</li>
      <li>Also note how the numbers increment on their own</li>
      <li>You should be noticing things is this precise order, because this is an ordered list</li>
    </ol>  </body>
</html>

適合表示步驟、說明，可透過 CSS 常用來製做成表格

div

div 是塊級元素的大宗，用於規劃區塊

<html>
  <head></head>
  <body>
<div>
  <h1>Interneting Is Easy!</h1>
  <h2>Lists</h2>
</div>
<div>
    <p>This is how you make an unordered list:</p>

    <ul>
      <li>Add a "ul" element (it stands for unordered list)</li>
      <li>Add each item in its own "li" element</li>
      <li>They don't need to be in any particular order</li>
    </ul>

    <p>This is what an ordered list looks like:</p>

    <ol>
      <li>Notice the new "ol" element wrapping everything</li>
      <li>But, the list item elements are the same</li>
      <li>Also note how the numbers increment on their own</li>
      <li>You should be noticing things is this precise order, because this is an ordered list</li>
    </ol>
</div>
<div>
    <h2>Inline Elements</h2>

      <p><em>Sometimes</em>, you need to draw attention to a particular word or phrase.</p>
      <p>Regards,<br/>
         The Authors</p>
  <div>
     <hr/>

     <p>P.S. This page might look like crap, but we'll fix that with some CSS soon.</p>
  </div>  </body>
</html>

id、class 是一種屬性，用來標註塊級元素套用特定的 CSS 樣式

透過 id、class 屬性標注區塊，可讓 CSS 選擇到該區塊進行排版，例如：並排、橫排、固定….等，或是一些樣式變化。

https://internetingishard.com/html-and-css/css-box-model/

例如：

<div class=" group "> <p id = "123">

在 CSS 上就可以透過語法標註塊級元素

.group { ....} #123 {...}

關於 CSS selector 下一篇文章會仔細說明

2. inline element

內聯元素有很多種這裡就簡單介紹一下：

em 斜體

<h2>Inline Elements</h2>

<p><em>Sometimes</em>, you need to draw attention to a particular word or
phrase.</p>

strong 強調

<p>Other times you need to <strong>strong</strong>ly emphasize the importance of a word or phrase.</p>

內聯元素也可以包住行內元素，但不能包塊級元素

<p><em><strong>And sometimes you need to shout!</strong></em></p>

一定要記得！

使用強調和斜體的重點並非透過標籤調整樣式

在使用強調和斜體時，千萬要記得 HTML 的本質！
改變樣式不是 HTML 的工作，HTML 是標示語言，是用來標示文字賦予它意義讓瀏覽器看懂的
CSS 才是改變樣式的主要手段，千萬不要搞錯了！

a 連結

a 為 anchor 是錨的意思，通常會跟的一個屬性叫：herf，表示 a 指向的地方（網址、頁面或段落）

<p>This example is about links and <a href='images.html'>images</a>.</p>

<a herf='images.html（檔名路徑）'> ：連結到網站的其他頁面
<a herf='https://www.medium.com（網址）'> ：連結到另一個網站
<a herf='#123（要連結段落的 id ）'> ：連結到另一個段落

第三項是一個十分好用的方式，medium 也可以透過這個方式做段落超連結喔！

Medium 使用技巧#1：如何點擊文字跳至特定段落或標題？文章內連結設置

想成為 Medium 的高效能作者？長篇文章建立架構、快速檢索的必備技巧，讓讀者能快速前往特定文字段落！

medium.com

3. empty element

image

<img> 標籤通常用於放置圖片，可支援 JPG 、PNG 、 GIF 、 SVG

https://internetingishard.com/html-and-css/links-and-images/

<!-- In JPGs section -->
<img src='images/mochi.jpg' width='75' alt='A mochi ball in a bubble'/>

<!-- In GIFs section -->
<img src='images/mochi.gif' width='75' alt='A dancing mochi ball'/>

<!-- In PNGs section -->
<img src='images/mochi.png' width='75' alt='A mochi ball'/>

<!-- In SVGs section -->
<img src='images/mochi.svg' alt='A mochi ball with Bézier handles'/>

src 、width 和 alt 是 <img>的屬性
src 是放檔案路徑，width 是調整檔案寬度，alt 是圖片的說明

alt 可以友善視障人士了解圖片內容，且當出現死圖也可以說明圖片內容
可以提升網站 SEO

<head> 內的標籤

簡單介紹完 body 後，要來介紹一下 <head> 內有什麼標籤

<head> 標籤在加載網頁時，內容不會顯示在瀏覽器中
因此 <head> 通常是放：

瀏覽器頁籤的標題和圖示
網頁的 Metadata（作者、關鍵字、Open Graph Data…..）
連結的檔案（CSS、JS）

title

顧名思義，用於更改網頁頁籤文字

https://internetingishard.com/html-and-css/basic-web-pages/#page-titles

<html>
  <head>
    <title>Interneting Is Easy!</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

Meta 標籤

為敘述網頁的標籤，包含作者、文字編碼、網站說明文字、關鍵字….等
常用的屬性有： charset 、 name 、 content 、 http-equiv

charset

<meta charset="utf-8"> 設定文字編碼

utf-8 為最通用的文字編碼，又稱萬國碼，可支援各語系文字
每個語系有自己的文字編碼，像是繁體中文就叫做 Big-5
但如果使用 Big-5 碼，解譯其他語言就會變成亂碼，如下圖
因此使用 utf-8 會最為合適

<html>
  <head>
    <title>Interneting Is Easy!</title>
    <meta charset='UTF-8'/>  
  </head>
  <body>
    <h2>Character Sets</h2>

       <p>You can use UTF-8 to count in Turkish:</p>

       <ol>
         <li>bir</li>
         <li>iki</li>
         <li>üç</li>
         <li>dört</li>
         <li>beş</li>
       </ol>
  </body>
</html>

2. name & content

name & content 的應用十分多元，像是：

作者
<meta name="author" content="Kion">
網頁摘要
<meta name="description" content="這是顯示在搜尋結果中，網頁標題下的網頁摘要">

meta description 的內容也會成為搜尋的關鍵字之一，但並非是網站排名的因素之一
若沒有特別撰寫，則會從網頁上的內容抓取

Link 標籤

Link 標籤十分常見，凡事要引入 CSS或是外部資源，皆需要透過 Link 標籤連接，應用十分多元

連接 CSS
<link rel="stylesheet" type="text/css" href="css.css">
但注意，JS 不是用 <link> 喔
<script type="text/javascript" src="script.js"></script>
設置網頁頁籤 Icon
我 Icon 的圖檔是在這裡轉的：http://tw.faviconico.org/
轉好圖檔後，在 head 引入檔案
<link rel="Shortcut Icon" type="image/x-icon" href="filename.ico">
引入 Icon
我使用的網站是：https://fontawesome.com/
使用方法很簡單，如果你沒有課金就選一個免費的 Icon
記得在 head 引入來源

<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity=”sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay” crossorigin=”anonymous”>

接著只要在你再插入圖示的那一行，複製該圖示的程式碼
例如：

<i class=”fab fa-angellist”></i>

就可以插入 Icon 了！
當然也可以客製化 Icon 大小、顏色喔

Font Awesome 5 Sizing Icons

Learn how to use Font Awesome 5 to add vector icons and social logos to your website, desktop design, or project.

fontawesome.com

Open Graph Data 標籤

主要用於該網站 URL 被轉貼在社交軟體上，顯示的標題、內容圖片、簡介
甚至可以調整大小

例如：
1. 圖片

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">

2. 連結文字描述

<meta property="og:description" content="The Mozilla Developer Network (MDN) provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">

3. 標題

<meta property="og:title" content="Mozilla Developer Network">

參考連結：Open Graph protocol

Facebook 也有出相關文件，內容包含：

基本標籤介紹
測試工具

以上就是簡單的 HTML 介紹～
還有很多很多標籤，有興趣或是要查詢的話，可以去 w3c school 、 MDN 學習喔～

HTML Tutorial

Well organized and easy to understand Web-building tutorials with lots of examples of how to use HTML, CSS, JavaScript…

www.w3schools.com

: The Document-level Metadata element

The HTML meta element represents metadata that cannot be represented by other HTML meta-related elements, like base…

developer.mozilla.org

當然實際寫一個簡單的網頁，不僅可以練習標籤，效果也會比做練習題更好

一樣如果有不明白或寫錯的都可以在底下留言 (⁎⁍̴̛ᴗ⁍̴̛⁎)

我要來寫拖稿很久的 CSS Selector 了哈哈

拍個手讓我知道，這個文章對你們有幫助 ♥(´∀` )人
可以拍五次喔！快來瘋狂擊掌！