当前位置：首页 > news >正文

html、css和js三者在页面中的作用是什么

news 2026/5/12 3:13:44

1.CSS层叠样式表

Cascading Style sheet

美化页面的作用

如何把样式联系到主文件里

<link rel="stylesheet" type="text/css" href="css/style01.css"/>

2.javascript作用：页面交互

<script src="js/js.js" type="text/javascript" charset="utf-8"></script>

3.html主文件：框架结构的作用

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body></body>
</html>

二、用js实时显示系统时间

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实时系统时间显示</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;}.time-container {background-color: #ffffff;padding: 40px 60px;border-radius: 12px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);text-align: center;}.time-title {font-size: 24px;color: #333333;margin-bottom: 20px;font-weight: 600;}.current-time {font-size: 48px;color: #1677ff;font-weight: 700;letter-spacing: 2px;}</style>
</head>
<body><div class="time-container"><div class="time-title">当前系统时间</div><div id="timeDisplay" class="current-time"></div></div><script>// 获取显示时间的DOM元素const timeDisplay = document.getElementById('timeDisplay');// 格式化数字，确保两位数（如 9 → 09）function formatNumber(num) {return num.toString().padStart(2, '0');}// 更新时间的核心函数function updateTime() {// 获取当前系统时间const now = new Date();// 提取年月日时分秒并格式化const year = now.getFullYear();const month = formatNumber(now.getMonth() + 1); // 月份从0开始，需+1const day = formatNumber(now.getDate());const hours = formatNumber(now.getHours());const minutes = formatNumber(now.getMinutes());const seconds = formatNumber(now.getSeconds());// 拼接成指定格式的时间字符串const timeString = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;// 更新页面显示timeDisplay.textContent = timeString;}// 初始化时立即执行一次，避免页面加载后有延迟updateTime();// 设置定时器，每秒更新一次时间（1000毫秒 = 1秒）setInterval(updateTime, 1000);</script>
</body>
</html>