javaweb之web入门基础

JavaWeb 之 Web 入门基础

简介

Java Web 是一种通过 Java 开发的应用程序，可通过互联网或局域网访问，具有可靠、安全和跨平台的特点，在互联网应用开发中具有广泛的应用。JavaWeb 主要分为三层：表现层、业务层、持久化层。其中，表现层主要负责用户交互和界面展示。

HTML 基础

HTML (Hypertext Markup Language) 是一种用于构建网页的语言，相比于其他语言，它更注重于网页的结构和内容。

HTML 元素

HTML 元素是构成网页的基本单元，由标签和内容组成。例如，<p> 和 </p> 就是一个段落的起始和结束标签。所有 HTML 元素都有起始和结束标签，除非是空元素，比如 <img> 和 <hr>。

HTML 属性

HTML 属性描述了 HTML 元素的额外信息，由名称和值组成。例如，<a href="https://www.baidu.com"> 中的 href 就是该元素的属性，属性值为 "https://www.baidu.com"。

示例：创建一个简单的网页

下面是一个最简单的 HTML 网页，它包含了一个标题和一个段落：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是我的第一个网页，欢迎访问。</p>
</body>
</html>

CSS 基础

CSS (Cascading Style Sheets) 是一种样式表语言，它用于为 HTML 文档添加样式和布局。CSS 和 HTML 一样，由 W3C 于 1996 年推出，是 Web 技术的重要组成部分。

CSS 语法

CSS 的基本语法由三部分组成，分别是选择器、属性和值。例如，下面的 CSS 代码可以将网页背景颜色设置为白色：

body {
    background-color: white;
}

CSS 样式选择器

样式选择器可用于指定要应用样式的 HTML 元素。例如，body 就是一个选择器，表示要将样式应用于网页的整个 body 元素。

此外，还有其他类型的选择器，如类选择器和 ID 选择器，它们可以应用于某些 HTML 元素。

示例：给网页添加样式

下面的 CSS 代码可以将网页中的段落文字颜色设置为红色，背景颜色设置为黄色：

p {
    color: red;
    background-color: yellow;
}

JavaScript 基础

JavaScript 是一种编程语言，主要用于为网页添加交互和动态效果。JavaScript 由 Netscape 公司于 1995 年首次推出，随后得到了广泛的应用和发展。它是一种动态、解释性的语言，与 HTML 和 CSS 一样，是 Web 技术的主要组成部分。

JavaScript 基本语法

JavaScript 的基本语法由表达式、变量和语句组成。例如，下面的 JavaScript 代码可以将网页弹出一个对话框，显示 "欢迎来到我的网页！"：

alert("欢迎来到我的网页！");

JavaScript 事件处理

JavaScript 可用于为网页添加交互和动态效果，其中事件处理非常重要。事件处理是指在 HTML 元素上定义某个事件，然后指定相应的 JavaScript 代码来处理该事件。

例如，下面的 JavaScript 代码可以在按钮被点击时将网页中段落的文字颜色设置为蓝色：

<button onclick="document.getElementById('myParagraph').style.color = 'blue'">改变文字颜色</button>
<p id="myParagraph">这是一段普通的文字。</p>

示例：HTML、CSS 和 JavaScript 的组合使用

下面的代码演示了如何使用 HTML、CSS 和 JavaScript 创建一个简单的网页，当鼠标移动到网页上时，该网页背景颜色将随机变化。具体实现细节详见注释：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个 JavaScript 网页</title>
    <style>
        /* 设置 body 元素的高度和背景色 */
        body {
            height: 100vh;
            background-color: #f0f0f0;
        }
    </style>
    <script>
        // 定义函数 changeBgColor，用于改变网页背景颜色
        function changeBgColor() {
            var r = Math.floor(Math.random() * 256); // 生成 0 到 255 之间的随机整数
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            var color = "rgb(" + r + "," + g + "," + b + ")"; // 将三个值组合起来，生成颜色字符串
            document.body.style.backgroundColor = color; // 将背景色设置为生成的颜色
        }
    </script>
</head>
<body onmousemove="changeBgColor()"> <!-- 当鼠标移动时，调用函数 changeBgColor -->
    <h1>欢迎来到我的网页</h1>
    <p>这是我的第一个网页，欢迎访问。</p>
</body>
</html>

总结

本文介绍了 JavaWeb 中 Web 入门基础，包括 HTML、CSS 和 JavaScript 三种技术的简介和基本语法，以及通过示例演示它们的应用。希望能够对初学者有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javaweb之web入门基础 - Python技术站