標題：h5 CSS3 js代碼示例
隨著互聯網的發展和普及，網頁設計變得越來越多樣化，HTML5(HTML5 is the latest version of HTML)和CSS3(CSS3 is a special CSS version that allows us to style our web page in more advanced ways)已經成為了網頁設計的主流技術。在網頁設計中，使用CSS3可以幫助我們更加精確地控制頁面的布局、樣式和顏色，同時也可以讓我們使用JavaScript(JavaScript is a language that can be used to add interactivity to a web page)來實現更加復雜的功能。
下面是一個簡單的H5 CSS3 js代碼示例，它實現了一個帶有按鈕的表單，當用戶點擊按鈕時，會彈出一個提示框顯示一個文本框中的內容。
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<title>H5 CSS3 js 示例</title>
<style>
#form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
#form input[type="text"], #form input[type="password"] {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: none;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
color: #333;
font-size: 16px;
text-align: center;
#form input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
#form input[type="submit"]:hover {
background-color: #3e8e41;
</style>
</head>
<body>
<h5>H5 CSS3 js 示例</h5>
<form>
<input type="text" id="form-input" placeholder="請輸入文本">
<input type="password" id="form-password" placeholder="請輸入密碼">
<input type="submit" value="提交">
</form>
<script>
document.getElementById('form-input').addEventListener('click', function() {
document.getElementById('form-password').value = document.getElementById('form-input').value;
});
</script>
</body>
</html>
這個示例中，我們使用了H5(HTML5)和CSS3(CSS3的一種特殊版本)來實現頁面的布局和樣式。CSS3可以幫助我們更加精確地控制頁面的樣式，包括顏色、字體、邊框和背景等。H5還添加了一些新的特性，例如事件監聽，當用戶點擊按鈕時，會調用JavaScript函數來修改文本框中的內容。
在JavaScript中，我們使用了document.getElementById()方法來獲取HTML表單中的所有輸入框，并使用addEventListener()方法來監聽輸入框的點擊事件。當用戶點擊輸入框時，我們會將輸入框中的內容賦值給另一個變量，以便在下一次點擊事件時進行更新。
這個H5 CSS3 js代碼示例只是一個簡單的示例，實際應用中需要根據實際需求進行修改和完善。通過使用CSS3和JavaScript，我們可以實現更加復雜、美觀和實用的網頁設計。