html5情人節我愛你表白代碼

HTML5情人節我愛你表白代碼

<!DOCTYPE html>
<html>
<head>
<title>情人節我愛你</title>
<meta charset="UTF-8">
</head>
<body>
<h1>情人節我愛你</h1>
<p>我想對你說</p>
<pre></pre>
<textarea rows="12" cols="50" id="loveLetter"></textarea>
<pre></pre>
<button onclick="sendLoveLetter()">發送情書</button>
<script>
function sendLoveLetter() {
var loveLetter = document.getElementById("loveLetter").value;
alert("親愛的，我愛你，這是我的情書：\n" + loveLetter);
}
</script>
</body>
</html>

代碼解析

1. <!DOCTYPE html>：聲明文檔類型為HTML5。
2. <html>：HTML文檔的根元素。
3. <head>：文檔頭部，定義文檔的元數據和引用外部文件。
4. <title>：定義文檔的標題，顯示在瀏覽器的標題欄。
5. <meta charset="UTF-8">：定義文檔的字符編碼，UTF-8是常用的編碼方式。
6. <body>：文檔的主體部分，包含所有的可見內容。
7. <h1>：定義一個大標題。
8. <p>：定義一個文本段落。
9. <pre>：定義預格式化文本，將保留所有的空格和換行符。
10. <textarea>：定義文本輸入框，用戶可以在文本框內輸入內容。
11. rows="12"：指定文本框的行數。
12. cols="50"：指定文本框的列數。
13. id="loveLetter"：給文本框指定一個唯一的標識符，用于JavaScript中獲取文本框的內容。
14. onclick="sendLoveLetter()"：給按鈕添加一個點擊事件，點擊按鈕將執行sendLoveLetter()函數。
15. <script>：定義JavaScript代碼的開始標簽。
16. function sendLoveLetter()：定義一個名為sendLoveLetter的函數。
17. var loveLetter = document.getElementById("loveLetter").value;：獲取id為loveLetter的文本框的內容。
18. alert("親愛的，我愛你，這是我的情書：\n" + loveLetter);：彈出一個包含情書內容的提示框。
19. </script>：定義JavaScript代碼的結束標簽。

示例運行