HTML5記事本頁面代碼
下面是關于使用HTML5實現(xiàn)的簡易記事本頁面代碼。該頁面包含了一個文本輸入框和一些常用的操作按鈕，比如保存、清空和打印等。該頁面代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5記事本</title>
</head>
<body>
<h1>HTML5記事本</h1>
<p><label for="textarea">輸入文字：</label></p>
<form>
<p><textarea id="textarea" name="textarea" rows="10" cols="80"></textarea></p>
<p>
<button type="button" onclick="saveNote()">保存</button>
<button type="button" onclick="clearNote()">清空</button>
<button type="button" onclick="printNote()">打印</button>
</p>
</form>
<script>
var textArea = document.getElementById("textarea");
// 保存
function saveNote() {
localStorage.setItem("note", textArea.value);
}
// 清空
function clearNote() {
textArea.value = "";
}
// 打印
function printNote() {
window.print();
}
// 加載已保存的筆記
function initialize() {
var note = localStorage.getItem("note");
if (note) {
textArea.value = note;
}
}
initialize();
</script>
</body>
</html>該頁面由 HTML 的基本結(jié)構(gòu)組成，包括聲明、html、head 和 body 標簽。其中，head 標簽中包含了必要的元數(shù)據(jù)信息。body 標簽中包含了頁面的主要內(nèi)容，包括一個文本輸入框和一些操作按鈕。這些按鈕的功能是通過 JavaScript 實現(xiàn)的，可以在頁面加載時初始化。
為了方便閱讀代碼，上面的 HTML 代碼使用了 pre 標簽進行排版，這樣可以將代碼格式化并保留空格和換行，使其更加格式化和易于閱讀。上一篇js和css的動畫