這個333系列文章送給初踏入前端的小白們
也送給想創立網頁的朋友們…
希望利用3分33秒（極短時間）就能輕鬆讓初學快速理解
小白們～ 我們共勉之
1. 什麼是 HTML? ＆ HTML 幹嘛用？
- HTML 是 Hyper Text Markup Language 的簡稱，中文為「超文字標記語言」
- 為「網頁的骨架」，專用來描述網頁長相（架構）[以便瀏覽器解讀如何呈現網站]
HTML 樣式 sample：
<!DOCTYPE html> <!--第五版 HTML 宣告方式--> <html> <body> <h1>小白們的 heading.</h1> <p>小白們的 paragraph.</p> </body> </html>
2. 在哪寫 HTML？ .. HTML 編輯器
- 最基本的話可以使用 Codepen
- 進階方便工具：VS Code ＆ Sublime Text 3（附提示字）
- 無腦瀏覽器開發模式：(Windows：F12；Mac 系統：Fn ＋ F12)
3. 怎麼看其他網站的 HTML？
- 點右鍵＋選「檢查」
- 在特定網站像是 Facebook 中不能使用以上功能（出現警訊）
4. HTML 基礎寫法：
a. 成對的 tag（標籤） Ex: <></> 用兩個包含開放/關閉tags 包夾要呈現內容
b. 兩大必備架構 tags：head（頭） 和 body （身體）
b-1: <head></head>：搜尋用標籤
範例： <head> 大標籤包夾 <meta>、<title>、<link> 小標籤
<head> <meta charset=”UTF-8”> <title>學 HTML 看這篇就夠</title> <!--頁籤--> <meta name=”keywords” content=”程式小白 Iris”> <!--搜尋關鍵字--> <meta name=”description” content=”學習建造網頁必學的 HTML 基礎技術”> <!--搜尋簡短描述--> <link rel=”stylesheet” type=”text/css” hef=”https://pse.is/TX322”> <!--導入連結--> </head>
b-2: <body></body>：真正會顯示在網頁上的內容
🧠 現在… 想像你在使用 Word 文件
字體：
<p></p> 一般文字 (paragraph)
<b></b> 粗體 (bold)
<i></i> 斜體 (italic)
<u></u> 底線 (underlined)
字體大小：
<h1> 最大字體
<h2>
<h3>
…
<h6> 最小
規格：
<pre> 完整包存所有格式，意即「空白鍵」（縮排），通常用於表現原始碼
<code> 等寬字體 全形的概念
c. 文本容器 （和 SEO 最相關）
c-1: <div></div>
c-2: <section></section>
c-3: <article></article>
（以上 3 者和文本大小、從屬無關）
c-4: <span></span> 小區塊
d. 列表
d-1: <ul> 無序列表 (unordered list)
d-2: <ol> 有序列表 (ordered list)
d-3: <li> 列點 (list)
範例： 巢狀結構 demo
<ol> <li> Iris 粉絲 <ul> <li>Willy</li> <li>Zan</li> </ul> </li> <li>粉絲留言</li> <ul> <li>讚唷</li> <li>不錯欸</li> </ul> </ol>
e. 表格
<table>
<thead> (表格標題 table header)
<tbody> (表格內容table body)
<tfoot> (表格註腳 table footer)
*補： <th> (table head; <tr> (table row) ; <td> (table data)
範例：
<table border="1"> <thead> <tr> <th>Iris 粉絲</th> <th>留言</th> </tr> </thead> <tbody> <tr> <td>Willy</td> <td>讚唷</td> </tr> <tr> <td>Zan</td> <td>不錯欸</td> </tr> </tbody> <tfoot> <tr> <th>total</th> <th>2</th> </tfoot> </table>
f. 插入媒體
f-1: 相片 <img>
f-2: 影片 <video>
f-3: 音檔 <audio>
f-4: 超連結 <a></a>
g. 功能
<break> 換行
<button></button> 按鈕
<textarea></textarea> 留言區（多行文字輸入框）
5. 時常看到的 ID 屬性是什麼鬼？
HTML 各種 tag 上都可以加入 id，譬如：<h1 id=”html”> HTML 簡單啦！</h1>。賦予獨一無二的 id 後，找尋 HTML 中元素就會變得更有效率。
說明：
撰寫 Javascript 時可以使用 getElemenyById，依循獨一無二的 id 位置對應找到元素
6. HTML 架構 ?
<header>、<main>、<footer>
總結：
HTML 概念和表示並不難，難的是如何把想像具體化體現在 HTML 中。因此，我們建造絢麗網頁不能只有最基礎的 HTML 知識（但 HTML 仍是基石，為非常重要的根本性存在），更需要一些妝點和修飾，否則你的網站就會猶如紙和黑筆的創作一般單調。所以緊接著在下一篇我們就會接續談談 CSS，幫我們的網頁上點妝！
如果你的入門還在單打獨鬥，歡迎來到快樂學程式找到志同道合的夥伴，你的自學之路不孤單。
