---
# System prepended metadata

title: Day 22 阿嬤帶你探索 HTML！（上）

---

#  Day 22 阿嬤帶你探索 HTML！（上）

呦嗨
來簡單介紹一下 HTML 吧！
 HTML (HyperText Markup Language）是一種描述超文件的註記語言 SGML (Standard Generalized Markup Language)所制訂出的一種網頁語，基本上，幾乎所有的瀏覽器都支持 HTML 現在 HTML 被廣泛的運用在各種廣大平台，包括我們常看的：Facebook、YouTube、Instagream 等知名部落格網頁，也可以在 HTML 中加入支援的元素，例如：表單、表格、文字、圖片等。
 
## 安裝 HTML 編輯器

這次我們用到的基本上都是文字編輯器（text editor）下面會針對每一個系統推薦好用的 HTML 文字
編輯器： 
```
  Sublime Text 是一個同時支持 Windows、Mac OS 和 Linux 的文字編輯器。可以免費下載
但是在用一陣子過後，他就會會要求你買一個軟體許可證，但如果你不想購買，你可以選擇免費的方案

  Notepad++ 適宜 Microsoft、Windows 系統的你
  
  TextWrangler 適宜 Mac OS 系統的果粉
  
以上就是一些好用的文字編輯器。
```
## 編寫 HTML 文字

下載好 HTML 文字編輯器後，我們就可以開始來玩 HTML 啦！但要怎麼玩呢？看我操作不就好嗎：

```
<!DOCTYPE html>
<html>
<head>
  <title>示例</title>
</head>
<body>
  <h1>講解專用</h1>
</body>
</html>
```

在上例中，`<title>`表示這整個程式碼的標題 ，`<h1>`表示這個網頁的主標題，就像這樣：

![](https://i.imgur.com/1hZv1Ro.png)

h 後面的數字就等於這個主標題的字體大小，例如我把他變成 5，就會變這樣：

![](https://i.imgur.com/Z118fba.png)

吼，跟前面的字體大小差很多齁。而`</h1>`代表著整個主標題的結束，就像我們寫作文時的
「。」JavaScript 的「；」這樣大概能理解了吧。

你也可以試著添加好多的主標題，就像下面這樣：

![](https://i.imgur.com/miqz3al.png)

要怎麼達成這樣的效果呢？
就只需要這幾句程式碼，即可達成這樣的效果

```
<h1>講解專用</h1>
<h2>講解專用</h2>
<h3>講解專用</h3>
<h4>講解專用</h4>
<h5>講解專用</h5>
```

對的沒錯，就是添加跟第一句一樣的程式碼，然後修改 h 後面的數字而已，真的不難！！
不會的話來我家我教你吧。偷告訴你們，h 後面的數字越靠近 0，字的大小就會越大（不包含0）
相反，h 後面的數字越遠於 0，字的大小就會越小，有點像數學中的「負數」。

## 小總結

這章我們認識了網頁架構之一 HTML，還知道了他的基礎概念，下一章我們會講到進階版的 HTML 文
字程式碼，請敬請期待！！















