Vai trò của HTML, CSS và JavaScript trong trang web
HTML (HyperText Markup Language) đóng vai trò tạo cấu trúc cơ bản cho trang web. Nó xác định các thành phần như tiêu đề, đoạn văn, hình ảnh, nút bấm, v.v.
<html>
<head>
<meta charset="UTF-8">
<title>Tiêu đề trang</title>
</head>
<body>
<!-- Nội dung trang -->
</body>
</html>CSS (Cascading Style Sheets) chịu trách nhiệm định dạng và làm đẹp giao diện. Nó kiểm soát màu sắc, bố cục, phông chữ và hiệu ứng trực quan.
<link rel="stylesheet" href="css/style.css">JavaScript cung cấp khả năng tương tác động với người dùng, xử lý sự kiện và thao tác DOM để tạo trải nghiệm động trên trang web.
<script src="js/app.js"></script>Hiển thị thời gian hệ thống theo thời gian thực bằng JavaScript
Đoạn mã sau tạo một trang web đơn giản hiển thị thời gian hiện tại và cập nhật mỗi giây:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hiển thị Thời Gian Thực</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f2f5;
}
.clock-box {
background: white;
padding: 40px 60px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
text-align: center;
}
.label {
font-size: 24px;
color: #333;
margin-bottom: 20px;
font-weight: 600;
}
#liveClock {
font-size: 48px;
color: #1677ff;
font-weight: bold;
letter-spacing: 2px;
}
</style>
</head>
<body>
<div class="clock-box">
<div class="label">Thời gian hệ thống</div>
<div id="liveClock"></div>
</div>
<script>
const clockElement = document.getElementById('liveClock');
function padZero(value) {
return String(value).padStart(2, '0');
}
function refreshClock() {
const now = new Date();
const dateString = `${now.getFullYear()} năm ${padZero(now.getMonth() + 1)} tháng ${padZero(now.getDate())} ngày`;
const timeString = `${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
clockElement.textContent = `${dateString} ${timeString}`;
}
refreshClock();
setInterval(refreshClock, 1000);
</script>
</body>
</html>