JavaWeb 30 天入门：第二天 —— 前端基础进阶（CSS 与 JavaScript）

经过第一天的学习，我们已经搭建好了 JavaWeb 开发的基础环境，并且初步认识了 HTML—— 这个构建网页骨架的语言。今天，我们将继续深入前端领域，学习让网页 “穿新衣” 的 CSS 和让网页 “动起来” 的 JavaScript。这两门技术与 HTML 并称为前端三巨头，是 JavaWeb 开发中不可或缺的前端技能，掌握它们能让我们开发出更美观、更具交互性的网页。

CSS：给网页穿上漂亮的外衣

什么是 CSS？

CSS（Cascading Style Sheets，层叠样式表）是一种用来描述 HTML 文档样式的语言。如果说 HTML 是网页的骨架，那么 CSS 就是网页的皮肤。它可以控制网页中元素的布局、颜色、字体、间距等外观样式，让单调的 HTML 页面变得美观且富有层次感。

举个简单的例子，没有 CSS 的 HTML 页面就像一件没有任何装饰的白衬衫，而有了 CSS，我们可以给这件衬衫染上颜色、换上花纹、调整版型，让它更符合我们的审美需求。

CSS 的引入方式

在 HTML 中引入 CSS 主要有以下三种方式，各有其适用场景：

内联样式：直接在 HTML 标签的style属性中编写 CSS 代码。这种方式的优先级最高，但仅对当前标签有效，不利于代码复用和维护。

示例：

这是一段红色的文字

内部样式表：在 HTML 文档的标签内，使用标签包裹 CSS 代码。这种方式仅对当前 HTML 页面有效，适合单个页面的样式设置。

示例：


    
        p {
            color: blue;
            font-size: 16px;
        }
    
这是一段蓝色的文字

外部样式表：将 CSS 代码编写在一个独立的.css文件中，然后在 HTML 文档中通过标签引入。这种方式是实际开发中最推荐的，它可以实现样式的复用，便于多个页面统一风格和后期维护。

示例：

首先创建style.css文件：

h1 {
    color: green;
    text-align: center;
}

然后在 HTML 中引入：


    
这是一个居中的绿色标题

CSS 选择器

要使用 CSS 控制 HTML 元素，首先需要准确地选中目标元素，这就需要用到 CSS 选择器。常用的选择器有：

元素选择器：根据 HTML 元素的标签名来选择元素。

示例：

/* 选中所有p标签，设置文字颜色为灰色 */
p {
    color: #888888;
}

类选择器：通过元素的class属性来选择元素，以.开头。一个类可以应用到多个元素上。

示例：

这是一段需要高亮的文字
这是一个需要高亮的div

/* 选中所有class为highlight的元素，设置背景色为黄色 */
.highlight {
    background-color: yellow;
}

ID 选择器：通过元素的id属性来选择元素，以#开头。一个 ID 在一个 HTML 文档中是唯一的，只能应用到一个元素上。

示例：

这是页头

/* 选中id为header的元素，设置高度为80px */
#header {
    height: 80px;
}

后代选择器：选择某个元素的后代元素，使用空格分隔。

示例：

/* 选中ul标签下的所有li标签，设置左边距为20px */
ul li {
    margin-left: 20px;
}

CSS 常用样式

掌握一些常用的 CSS 样式能让我们快速美化网页，以下是一些基础且常用的样式：

颜色（color）：可以使用颜色名称（如 red）、十六进制值（如 #ff0000）、RGB 值（如 rgb (255,0,0)）来设置文字颜色。

字体（font-family）：设置文字的字体，如font-family: “Microsoft YaHei”, sans-serif;。

字体大小（font-size）：设置文字大小，常用单位有 px（像素）、em（相对单位）等。

背景（background）：可以设置背景颜色（background-color）、背景图片（background-image）等。

边框（border）：设置元素的边框，包括边框宽度、样式和颜色，如border: 1px solid #ccc;。

边距（margin 和 padding）：margin 是元素外部的间距，padding 是元素内部的间距，都可以分别设置上、右、下、左四个方向的值。

宽度和高度（width 和 height）：设置元素的宽度和高度。

示例：

.box {
    width: 300px;
    height: 200px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    padding: 20px;
    margin: 10px auto; /* 水平居中 */
    font-family: "Arial", sans-serif;
    font-size: 14px;
    color: #333;
}

JavaScript：让网页动起来

什么是 JavaScript？

JavaScript（简称 JS）是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。它可以在网页上实现复杂的交互功能，是网页的 “行为” 层。有了 JavaScript，我们可以实现表单验证、动态内容更新、页面元素的动画效果等，让网页从静态变为动态。

例如，当我们在登录页面输入错误的密码时，页面能即时提示 “密码错误”；当我们点击一个按钮时，页面能弹出一个对话框，这些都是 JavaScript 的功劳。

JavaScript 的引入方式

和 CSS 类似，JavaScript 在 HTML 中的引入也有多种方式：

内联脚本：直接在 HTML 标签的事件属性中编写 JavaScript 代码，如onclick、onload等。这种方式耦合度高，不推荐大量使用。

示例：

内部脚本：在 HTML 文档的或标签内，使用标签包裹 JavaScript 代码。

示例：


    // 页面加载完成后执行
    window.onload = function() {
        alert('页面加载完成了');
    }

外部脚本：将 JavaScript 代码编写在一个独立的.js文件中，然后在 HTML 文档中通过标签的src属性引入。这种方式便于代码复用和维护，是实际开发中的首选。

示例：

首先创建script.js文件：

console.log('这是外部JS文件中的内容');

然后在 HTML 中引入：

JavaScript 基础语法

变量声明：使用var、let或const声明变量。var是 ES5 中的语法，存在变量提升等问题；let和const是 ES6 中新增的，let用于声明可修改的变量，const用于声明不可修改的常量。

示例：

let name = "JavaWeb";
const age = 30;
name = "前端开发"; // 可以修改
// age = 20; // 会报错，常量不能修改

数据类型：包括字符串（String）、数字（Number）、布尔值（Boolean）、数组（Array）、对象（Object）、null、undefined 等。

示例：

let str = "Hello";
let num = 123;
let isTrue = true;
let arr = [1, 2, 3];
let obj = {name: "张三", age: 20};
let n = null;
let u; // undefined

函数：使用function关键字定义函数，函数是实现特定功能的代码块。

示例：

// 定义一个计算两数之和的函数
function add(a, b) {
    return a + b;
}
// 调用函数
let result = add(3, 5);
console.log(result); // 输出8

事件：JavaScript 通过事件来响应用户的操作，常见的事件有click（点击）、mouseover（鼠标悬停）、keydown（按键按下）等。

示例：



    // 获取按钮元素
    let btn = document.getElementById("myBtn");
    // 给按钮绑定点击事件
    btn.onclick = function() {
        alert("按钮被点击了");
    }

总结与实践

知识点回顾

今天我们学习了 CSS 和 JavaScript 的基础知识：

CSS 用于美化网页，包括三种引入方式（内联样式、内部样式表、外部样式表）、常用选择器（元素选择器、类选择器、ID 选择器、后代选择器）以及一些常用样式。

JavaScript 用于实现网页的交互功能，包括三种引入方式（内联脚本、内部脚本、外部脚本）、基础语法（变量声明、数据类型、函数、事件）。

实践任务

请大家完成以下实践任务，巩固今天所学的知识：

创建一个 HTML 页面，使用外部 CSS 文件为页面中的标题、段落、按钮等元素设置样式，要求标题居中且颜色为深蓝色，段落文字大小为 16px 且行高为 1.5 倍，按钮有灰色背景和圆角边框，鼠标悬停时背景色变为浅蓝色。

在上述页面中添加 JavaScript 代码（使用外部 JS 文件），实现点击按钮后，在页面上显示当前时间（格式如：2024-05-20 15:30:20）。

参考答案

HTML文件 (index.html)




    

时间显示页面
        当前时间显示器
        点击下方按钮显示当前日期和时间

CSS文件 (styles.css)

/* 全局样式 */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    text-align: center;
    padding: 30px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 90%;
}

/* 标题样式 - 居中且深蓝色 */
h1 {
    color: #00008B; /* 深蓝色 */
    text-align: center; /* 确保标题居中 */
    margin-bottom: 20px;
}

/* 段落样式 - 16px字体大小，1.5倍行高 */
p {
    font-size: 16px;
    line-height: 1.5; /* 1.5倍行高 */
    color: #333;
    margin-bottom: 25px;
}

/* 按钮基础样式 */
#timeBtn {
    background-color: #cccccc; /* 灰色背景 */
    color: #333;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    border-radius: 8px; /* 圆角边框 */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* 按钮悬停效果 */
#timeBtn:hover {
    background-color: #add8e6; /* 浅蓝色 */
}

/* 时间显示区域样式 */
#timeDisplay {
    margin-top: 25px;
    font-size: 20px;
    font-weight: bold;
    color: #2c3e50;
    min-height: 30px;
}

JavaScript文件 (script.js)

document.addEventListener('DOMContentLoaded', function() {
    // 获取按钮和时间显示元素
    const timeBtn = document.getElementById('timeBtn');
    const timeDisplay = document.getElementById('timeDisplay');
    
    // 添加按钮点击事件监听器
    timeBtn.addEventListener('click', function() {
        // 获取当前时间
        const now = new Date();
        
        // 格式化日期和时间（YYYY-MM-DD HH:MM:SS）
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        
        // 组合成要求的格式
        const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        
        // 在页面上显示时间
        timeDisplay.textContent = formattedTime;
    });
});

文章来源于互联网:JavaWeb 30 天入门：第二天 —— 前端基础进阶（CSS 与 JavaScript）

相关推荐: 解锁AIGC产品经理转型秘籍–大模型知识

在过去的几十年中，人工智能（AI）从科幻电影中的异想天开，已经逐渐走进了我们的现实生活，以AI为核心的内容生成技术（AIGC）正在掀起一场创作领域的革命。以下内容源于个人对AI相关领域的自学知识总结，如有专业人士还请指点。让我们开启一场沉浸式的AI之…