Posted on
2026-03-14 12:32
欣慕凱
阅读(
0)
评论()
收藏
举报
*HTML的结构
HTML 标准结构由三大部分组成
1.文档声明（DOCTYPE）
作用：告诉浏览器这是 HTML5 文档
写法：
2.根标签
整个网页的最外层容器
包含： +
3..两大核心区域
<head> （头部）：存放页面元信息
标题
、字符集 <meta charset="UTF-8"> 、CSS、JS 等</p><body> （主体）：存放页面可见内容
<p>文字、图片、按钮、表格、布局等</p>
<p>以以下代码为例</p>
<pre><code class="language-HTML"><!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></code></pre>
<p>此代码的结构为</p>
<p><img src="C:%5CUsers%5Clenovo%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20260314121637837.png" alt="image-20260314121637837" loading="lazy"></p>
<p>*HTML5的概述 视频、动画、音频、图像—>标准化</p>
<p>进化过程：HTML2.0—>3.3—>4.0—>4.01—>5</p>
<p>*HTML5的优势</p>
<p>1.解决了垮浏览器问题</p>
<p>2.新增了多个新特性</p>
<p>3.用户优先的原则</p>
<p>4.化繁为简的优势</p>
