HTML

2019/11/28
林弘祥

課程簡介

  • HTML
  • Block Elements
    • div,table,ul,hr,...
  • Meta Data
  • In-line Elements
    • img,br,a
  • CSS

HTML

HyperText Markup Language 超文本標記語言

History
1980Tim Berners-LeeENQUIRE
1991Tim Berners-LeeHTML
1995IETFHTML 2.0
1997W3CHTML 3.0
1997W3CHTML 4.0
2014W3CHTML 5.0

標記語言

文字+其他相關資訊

<title>HTML</title>

Meta Data

  • 用來描述資料的資料
  • 不會顯示在網頁上
  • 給機器看的

常見的 Meta Data

  • description: 簡短描述
  • keywords: 關鍵字
  • author: 作者
  • generator: 編輯器
  • copyright: 網頁版權
  • distribution: 發布地區
  • charset: 網頁編碼
  • viewport: 視窗設定

Block Elements

常用的 Block Elements

  • 標題: <h1>,<h2>,...
  • 文字: <p>
  • 換行: <br>
  • 水平分隔線: <hr>
  • 表格: <table>
  • 清單: <ol>, <ul>
  • 區塊: <div>, <section>

Inline Elements

常用的 Inline Elements

  • 換行: <br>
  • 圖片: <img>
  • 超連結: <a>

CSS

Cascading Style Sheets

用途

  • 描述如何呈現HTML元素於畫面中
  • 一次控制大量元素/網頁的樣式

佈署

  • 使用 HTML 元素的 style 屬性
  • 在 <head>使用 <style>
  • 使用外部 CSS 文件

CSS Selector

套用最精準、最小單位、最後寫的選擇器

  • 對全部: * {}
  • 對特定標籤: ELEMENT {}
  • 對特定 class: .CLASSNAME {}
  • 對特定 id: #ID {}

CSS Box Model

盒子模型

  • margin
  • border
  • padding
  • content
margin: 0px;
#### Example ```css /* top / right / button / left */ margin: 0px, 0px, 0px, 0px; /* top / left & right / button */ margin: 0px, 0px, 0px; /* top & button / left & right */ margin: 0px, 0px; /* top & button & left & right */ margin: 0px; /* only top */ margin-top: 0px; ```

常用的樣式設定

  • 文字顏色: color
  • 字體: font-family
  • 字體大小: font-size
  • 字體變化: font-style
  • 背景顏色: background-color
  • 背景圖片: background-image