第 2 章 HTML

2.1 何為HTML(Hypertext Markup Language )?

是一種Markup language，即標記語言的意思，透過這些標記來說明排要求、字體大小、位置等等。標記（tag）的適用範圍多是以<標記>...</標記>來表示。

  • 標記名稱：內容在文件代表的地位。
  • HTML即是由許多有角色訂義的元素所構成，這些有義意的元素叫Semantic elements(elements with a meaning)。

2.2 典型html檔結構

<!DOCTYPE html>
<html lang="en">
  <head>
    網頁文檔屬性、相關資訊(meta, data of data)
    風格設計(style)
    其他外部引入的資源。
  </head>

  <body>
    網頁內容主體
  </body>
  
</html>

  • 一個html檔形成一個webpage（網頁）。

  • 數個串連在一起的web page形成一個website（網站）。

2.3 網頁內容主體<body>

  • 典型主體架構

Semantic Elements

2.4 tag：<p>與<h1> to <h6>

2.4.1 練習1

由經濟學人文章進行 codepen練習。

2.5 tag: 文章<article>、小節<section>

  • 說明

    • <article>

    • <section>
      • A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

  • 範例

2.5.1 練習2

延續上個練習參考經濟學人文章加入<article>及<section>標籤。

2.6 tag: 標頭<header>

  • 說明: …introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.

    • A <header> typically contains at least (but not restricted to) one heading tag (<h1> – <h6>).
    • 小心不要跟<head>搞混。
  • 範例1

  • 範例2

2.6.1 練習3

延續上個練習參考經濟學人文章加入標頭。

2.8 tag: 相關訊息<aside>

  • 說明：should be used for content tangentially related to the content surrounding it, such as related reading links and glossaries.
    • 「母區塊」的相關訊息。
  • 範例

2.8.1 練習4

使用白經濟文章：金融危機十週年—簡介與借鏡，在codepen加入<footer>及<aside>。

2.9 元素所佔空間

元素依照它「內定」會不會佔一整行分成：
  1. 塊級(block)元素
  2. 行內(inline)元素

2.9.1 萬用block element:<div>

  • 說明
  • 遇到需要block，但目前block element沒有任何一個符合它的意義。

2.9.2 萬用inline element: <span>

2.10 tag: 其他幾個常見元素

2.10.1 列點listing

  • 說明
    • 有排序<ol>加<li>
    • 無排序<ul>加<li>
    • 定義、描述列點(description lists)<dl>加description term<dt>及description definition<dd>.

2.10.2 表Table

2.10.3 圖像Image

  • 說明
  • 用法：<img src="圖像來源" alt="圖片連結失靈時的替代文字">
    • 注意這標籤沒有closing tag，也就是沒有</img>。
    • 是inline element。如果要自成一行，可以包在block element裡，如:<figure>（可搭配<figurecaption>加註圖標）。

2.10.4 影片Video

2.10.5 聲音Audio