*HTML5的概述 视频、动画、音频、图像—>标准化
进化过程：HTML2.0—>3.3—>4.0—>4.01—>5
*HTML5的优势
1.解决了垮浏览器问题
2.新增了多个新特性
3.用户优先的原则
4.化繁为简的优势
*HTML的结构
HTML 标准结构由三大部分组成
1.文档声明（DOCTYPE）
作用：告诉浏览器这是 HTML5 文档
写法：
2.根标签
整个网页的最外层容器
包含： +
3..两大核心区域
<head> （头部）：存放页面元信息标题 、字符集 、CSS、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: "Microsoft YaHei", sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.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;
}
.current-time {
font-size: 48px;
color: #165DFF;
font-weight: bold;
letter-spacing: 2px;
}
</style>
</head>
<body>
<div class="time-container">
<h2 class="time-title">当前系统时间</h2>
<div id="timeDisplay" class="current-time"></div>
</div>
<script>
// 获取显示时间的DOM元素
const timeDisplay = document.getElementById('timeDisplay');
// 格式化时间函数：补零操作（确保个位数显示为两位数，如 9 → 09）
function formatNumber(num) {
return num < 10 ? `0${num}` : num;
}
// 更新时间的核心函数
function updateTime() {
// 创建当前时间对象
const now = new Date();
// 提取年月日时分秒
const year = now.getFullYear(); // 年（4位数）
const month = formatNumber(now.getMonth() + 1); // 月（0-11，需+1）
const day = formatNumber(now.getDate()); // 日
const hour = formatNumber(now.getHours()); // 时
const minute = formatNumber(now.getMinutes()); // 分
const second = formatNumber(now.getSeconds()); // 秒
// 拼接成指定格式的时间字符串
const timeStr = `${year}年${month}月${day}日 ${hour}:${minute}:${second}`;
// 将时间显示到页面上
timeDisplay.textContent = timeStr;
}
// 1. 页面加载时立即执行一次，避免初始空白
updateTime();
// 2. 设置定时器，每1000毫秒（1秒）更新一次时间，实现实时效果
setInterval(updateTime, 1000);
</script>
</body>
</html>
此代码的结构为
html
head body
meta title style div script
h2
浙公网安备 33010602011771号