# web前端开发笔记
## HTML CSS（层叠样式表） JS 的含义及关系
**全称**：HyperText Markup Language（超文本标记语言）
是用于创建网页的标准标记语言。它通过一系列标签（Tags） 来定义网页的结构和内
**核心作用**：定义网页的**结构和内容**，相当于搭建房子的 “钢筋水泥框架”，决定网页里有什么（比如标题、文字、按钮、显示时间的盒子）。
**全称**：Cascading Style Sheets（层叠样式表）
### JS
**全称**：JavaScript（没有官方的全称，常简称为 JS）
**核心作用**：实现网页的**动态交互和逻辑处理**，相当于给网页赋予 “行动力”，让静态的页面 “活起来”（比如点击按钮、实时更新数据、表单验证、动画效果等）。
### 显示网页的方法
新建记事本，在**记事本**中输入，将**文件扩展名改成HTML**，（*HTML高于HTM，但HTML和HTM作用一样* ）
### HBuild软件
运用HBuilder制作网页（HBuilder下载链接：https://pan.sdbi.edu.cn/l/cuaFkj）
HB新建完会生成三个文件夹以及一个HTML文件，在新建文件所在位置还有一个.project文件
以一个显示时间的网页代码为例
```javascript
<!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开始，需+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;
}
// 初始化：立即执行一次更新时间
updateTime();
// 设置定时器，每1000毫秒（1秒）更新一次时间
setInterval(updateTime, 1000);
</script>
</body>
</html>
```
以上代码效果如图
原代码中<u>**<style>与</style>**</u>之间的代码为**CSS**，起到**控制外观**的作用，没有此部分代码仍样式有所变化如图
可用**link**关键字调用**CSS外部文件**代码如下 ：
```javascript
<link rel="stylesheet" type="text/css" href="css/1.css"/>
```
原代码中<u>**<script></script>**</u>之间代码为**JS**起到**显示时间**的作用去掉后效果如图
**script src**调用**JS外部文件**如下：
```javascript
<script src="js/showTime.js" type="text/javascript" charset="utf-8"></script>
```
*这种调用可以简化HTML文件使HTML文件更简洁，同时，W3C标准要求将以上两部分在HTML中用调用外部文件的形式体现