假設今天學校或者工作要做的第一個互動式網站是待辦清單的話，你會怎麼做。如果都毫無頭緒 html, css, javascript 是什麼都不會，要怎樣刻出來呢？我覺得最簡單的就是 google 看看有沒有人寫過，先 copy 一份下來再說 XD。但可惜在工作上，很難說網路上流傳的網頁功能彈性會符合以後需求的改變。交功課可能還可以，但需求的改變和增加，可能一下子這份 code 就不能用了。但既然已經有人做過了，也不妨看看別人怎麼做的，好好學習一下，以後才比較好改善！
先交上程式碼，我想用先使用仿間教學上最簡單的寫法來做個開始，以下程式碼是我從 w3cschools 拿來再做一點小修改
第一次前端網頁最快的學習途徑就是看別人怎麼寫，然後開始做修改，今天先研究這份 code 的寫法吧！
先附上 Todo List - codepen
<div class="header">
<h2 >待辦清單</h2>
<input type="text" id="todo-input" placeholder="待辦事項">
<button onclick="addTodo()" class="addBtn">新增</button>
</div>
<ul id="todo-list">
<li>第一個工作</li>
<li class="checked">先完成這個</li>
</ul>
超文件標示語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標示語言。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計令人賞心悅目的網頁、網頁應用程式以及行動應用程式的使用者介面[3]。網頁瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁。HTML描述了一個網站的結構語意隨著線索的呈現，使之成為一種標示語言而非程式語言。
wikipedia html
我覺得 wikipedia 上描述 html 講得很好，有興趣可以詳讀
如果對於 HTML 不了解，又想快速讀，建議讀這幾個部分
<!DOCTYPE html> 意思是告訴瀏覽器要使用 html5
quirk mode (怪異模式 - 向下兼容)code
最一開始的 div 有一個 header 的 class; input 的部分，他帶有 todo-input 的 id。
id 是獨一無二的
id 像是這整個 html 只能出現一個 todo-input
id
class 是可以重複的
class 像是這整個 html 可以出現多個 header
class ，像是這個 div 他可以有多個 class 例如 onclick 的 event ，HTML 規範提供這個簡便的方法讓開發者可以直接讓節點使用 windows 上的資源todo list 為例，<button> 被註冊了一個 onclick 的 event
windows.addTodo() 就會被執行event 可以被使用如果有興趣的話可以去 w3cshool 的 HTML events了解更多喔！Codepen 上 JS 是怎麼回事
codepen 會幫忙把 JS 包好放在 的節點裡
像是這樣
<html>
<body>
your todo list html
</body>
<script>
JS is here
</script>
</html>
瀏覽器看到這個 就會讓 JS 引擎跑裡面的 javascript ，所以頁面才會跟著 TodoList 改變
今天熟悉了 html 的結構和了解到 html 中 id 與 class 中的差異，然後 html event 會去參考 window 上的 property 。
看到這樣會不會感到好奇為什麼瀏覽器看到這個 Markup 會呈現出畫面 codepen 上的樣子?
明天就來好好研究吧！
iThome鐵人賽
看影片追技術