# 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 文 字程式碼，請敬請期待！！