一起來實作響應式網頁設計：一探HTML世界 Day2

2023 iThome 鐵人賽

DAY 2

影片教學

一起來實作響應式網頁設計系列第 2 篇

15th鐵人賽 html html5 html教學 #html

Ericostco

2023-09-17 23:35:21

274 瀏覽

分享至

影片教學

教學重點回顧

HTML全名為HyperText Markup Language，HyperText表示非一般純文字，而是能藉由文字導向到其他網頁。而Markup中文為標記，也是HTML的重點，透過標記來讓搜尋引擎了解網頁內容所代表的意義。

至於要用什麼來做標記呢?一個網頁可由數個元件(Elements)組成，而元件又為標籤+屬性之組成。透過元素的標記，可以讓搜尋引擎得知網頁中各個內容所代表的東西。

範例程式

<!DOCTYPE html> <!--html5 第一行必須的文件類型定義，前不能有空行，不能省略，否則可能導致html5不會正常運作 -->

<html> <!--根元素-->
  <head> <!--標頭-->
    <meta charset="utf-8" /> <!-- 指定編碼方式:utf-8 -->
    <title>網頁程式設計</title>
  </head>

  <body>
    <!--主體 網頁內容呈現的地方-->
    <h1>大標題</h1>
    <h2>中標題</h2>
    <h3>小標題</h3>
    <p>
      我是段落<br>
      我是下一行
    </p>
    <p>
      我是第二段落<br>
      我是下一行
    </p>
  </body>
</html>

一切的撰寫都是由根元素開始，以樹狀結構撰寫，在內有兩大元素及，會存放一些資訊，是不會顯示在網頁的，例如：編碼資訊、連結檔案資訊等。則是網頁主體呈現的地方。

以上是今天的教學，感謝大家觀看。