在HTML5中，記事本應用是一個非常實用的功能。它可以讓用戶快速記錄自己的想法、心情以及日常工作的安排。下面介紹一個基于HTML5的簡單記事本的源代碼（此示例源代碼僅供學習參考）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5記事本</title>
<style>
body {
font-size: 14px;
line-height: 1.5;
}
#editor {
width: 100%;
height: 300px;
border: 1px solid #ccc;
padding: 10px;
font-size: 16px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<textarea id="editor"></textarea>
<script>
var editor = document.getElementById('editor');
editor.addEventListener('input', function() {
localStorage.setItem('text', editor.value);
});
var text = localStorage.getItem('text');
if (text != null) {
editor.value = text;
}
</script>
</body>
</html>這段代碼主要分為HTML和JavaScript兩部分。在HTML部分，我們定義了一個textarea元素，它用于用戶輸入記事本內容。在CSS樣式中，我們設置了文本編輯器的基本樣式，包括字體、邊框、填充等。
在JavaScript部分，我們使用了localStorage對象，它可以在瀏覽器中存儲數據。我們在輸入框的input事件上注冊一個回調函數，當用戶輸入文本時，觸發這個回調函數，并把文本存儲到localStorage中。當用戶再次打開記事本應用時，我們可以從localStorage中獲取之前保存的文本，將它再次展示在文本編輯器中。
這是一個基于HTML5的簡單記事本應用的源代碼。它利用了HTML5的localStorage功能以及JavaScript的事件監聽，實現了基本的文本輸入、保存、讀取功能。
上一篇html5角度旋轉代碼
下一篇html5計算器代碼下載