web前端开发笔记01
HTML CSS（层叠样式表） JS 的含义及关系
HTML
全称：HyperText Markup Language（超文本标记语言）
核心作用：定义网页的结构和内容，相当于搭建房子的 “钢筋水泥框架”，决定网页里有什么（比如标题、文字、按钮、显示时间的盒子）。
CSS
全称：Cascading Style Sheets（层叠样式表）
核心作用：控制网页的样式和布局，相当于给房子装修（刷墙、铺地板、调整家具位置、设置字体颜色 / 大小），决定网页 “长什么样”。
JS
全称：JavaScript（没有官方的全称，常简称为 JS）
核心作用：实现网页的动态交互和逻辑处理，相当于给网页赋予 “行动力”，让静态的页面 “活起来”（比如点击按钮、实时更新数据、表单验证、动画效果等）。
三者的关系
HTML = 骨骼和器官（有什么结构：头、手、身体，对应网页的标题、盒子、文本区域）
CSS = 外貌和穿搭（长什么样：身高、肤色、衣服款式，对应网页的颜色、大小、布局）
JS = 行为和动作（能做什么：走路、说话、眨眼，对应网页的实时更新、点击响应、数据计算）
显示网页的方法
新建记事本，在记事本中输入，将文件扩展名改成HTML，（HTML高于HTM，但HTML和HTM作用一样 ）
HBuild软件
运用HBuilder制作网页（HBuilder下载链接：https://pan.sdbi.edu.cn/l/cuaFkj）
HB新建完会生成三个文件夹以及一个HTML文件，在新建文件所在位置还有一个.project文件
以一个显示时间的网页代码为例
<!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>/* 页面样式美化 */body {font-family: 'Arial', sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f2f5;}.time-container {background-color: white;padding: 40px 60px;border-radius: 12px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);text-align: center;}.time-title {color: #333;margin-bottom: 20px;font-size: 24px;}.current-time {font-size: 48px;font-weight: bold;color: #1677ff;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();const month = formatNumber(now.getMonth() + 1); // 月份从0开始，需+1const 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;}// 初始化：立即执行一次更新时间updateTime();// 设置定时器，每1000毫秒（1秒）更新一次时间setInterval(updateTime, 1000);</script>
</body>
</html>
以上代码效果如图
原代码中之间的代码为CSS，起到控制外观的作用，没有此部分代码仍样式有所变化如图
可用link关键字调用CSS外部文件代码如下 ：
<link rel="stylesheet" type="text/css" href="css/1.css"/>
原代码中之间代码为JS起到显示时间的作用去掉后效果如图
script src调用JS外部文件如下：
<script src="js/showTime.js" type="text/javascript" charset="utf-8"></script>
这种调用可以简化HTML文件使HTML文件更简洁，同时，W3C标准要求将以上两部分在HTML中用调用外部文件的形式体现