今日課程大綱

1、HTML 與 CSS 簡介

HTML

• HyperText Markup Language（超文字標記語言）

• 用來描述網頁的內容與結構，讓瀏覽器知道每個部分的意義

• 透過標籤（tag）包住內容，例如：

  <p>This is a sentence</p>
  

• 標籤分為起始標籤與結束標籤，結束標籤前有 /

• 元素：由起始標籤、結束標籤、內容所組成（元素還可以有「屬性（Attribute）」）

• 元素裡面可以再放進元素，稱為巢狀元素（nesting element）：

  <p>My cat is <strong>very</strong> grumpy.</p>
  

• 有些元素沒有內容，稱為空元素（empty element）:

  <img src="images/firefox-icon.png" alt="My test image">
  

  （兩個屬性、沒有結束標籤，結尾不需要有 tag 將內容包住）

CSS

• Cascading Style Sheets（階層式樣式表）

• 用來描述網頁的外觀與呈現方式，讓瀏覽器知道每個元素該如何顯示

• 透過選擇器（selector）找到要設定樣式的 HTML 元素，並用宣告（declaration）定義樣式，例如：

  p {
    color: blue;
    font-size: 16px;
  }
  

• CSS 規則（rule）：由選擇器與大括號 {} 包住的一組或多組宣告組成

• 宣告（declaration）：由屬性（property）**與值（value）**組成，例如：color: blue;

• 一個規則中可以有多個宣告：

  h1 {
    color: red;
    text-align: center;
    background-color: yellow;
  }