HTML簡介

2015/09/30 阮韞澂

<me>阮韞澂</me>

ㄖㄨㄢˇ ㄩㄣˋ ㄔㄥˊ

在IE6轉IE7的時代開始做網頁

透過天擇學會PHP

研習HTML5+CSS3後持續使用與研究

甚麼是網頁?

一種特殊格式的檔案

使用瀏覽器開啟

HTML,CSS,JavaScript

Try It!

右鍵>檢視網頁原始碼

HTML?

HyperText Markup Language

超文件標示語言

1982年由Timothy John Berners-Lee建立

由W3C維護

CSS?

Cascading Style Sheets

層疊樣式表

1996年發明

由W3C維護

and JavaScript?

一種直譯式程式語言

用於操控網頁元素

HTML 器官
CSS 肌肉、皮膚
JavaScript 神經

編輯器

  • 記事本
  • Sublime
  • Notepad++
  • 任何可以進行文字編輯的軟體

<HTML Tag>

  • 以<與>包夾
  • 網頁的基本元素
  • 單標籤<br>
  • 雙標籤<p></p>

標題

  • <h1></h1>

    ~
    <h6></h6>
  • 僅用於標題文字
  • 不要用於調整文字大小會被鄙視

段落

  • <p></p>
  • 用於內文段落
  • 一個段落用一組
  • 不要用於換行會被鄙視

換行

  • <br>
  • 用於換行
  • 不要打成BL，有人會興奮

分隔線

  • <hr>
  • 產生一條水平分隔線

特殊字元

  • 部分字元造成語法或保留字衝突
  • 無法直接顯示
  • 使用&xxx;表示特殊字元

常用特殊字元

字元 代號
空白 &nbsp;
< &lt;
> &gt;
& &amp;

強調文字

  • 雙標籤內文本
  • 可混用
  • 標籤需層層包裹，不可衝突
  • 可用CSS代替
功能 標籤
粗體 strong
斜體 em
底線 u
刪除線 del

Try It!


我很帥醜，可是我很溫柔，外表冷漠，內心狂熱，那就是我

試著在網頁中達到以上效果


Demo

Block與Inline

  • 元素的顯示方式
  • Block為區塊，會換行
  • Inline在行中，不換行
  • 預設為Inline
  • CSS display

項目清單

  • <ul><li></li></ul>
  • 用於條列項目
  • 就像這樣
  • 以ul表示清單，li表示清單中的項目
  • 使用CSS設定項目符號
  • 將ul換成ol表示數字清單

表格

  • <table>
      <tr><td></td></tr>
    </table>
  • tr表示一列(橫向)
  • td表示列中的一欄(縱向)
  • 用於展示大量有規律的資料
  • 不要用於排版會被鄙視