学习的好苗子

Appearance

HTML/CSS/JavaScript 基础 ​

在Java Web开发中，前端技术是不可或缺的一部分。虽然Java主要作为后端语言，但了解前端技术有助于我们更好地构建全栈应用。本章节将介绍HTML、CSS和JavaScript的基础知识，这些是Web开发的三大基石。

什么是前端技术？ ​

前端技术是指在浏览器中运行的技术，主要包括：

  • HTML (HyperText Markup Language)：负责网页的结构和内容
  • CSS (Cascading Style Sheets)：负责网页的样式和布局
  • JavaScript：负责网页的交互和动态效果

HTML基础 ​

HTML简介 ​

HTML是构建网页的标记语言，它使用标签来描述网页的结构。每个HTML文档都由一系列元素组成，这些元素通过标签来定义。

基本HTML结构 ​

一个基本的HTML文档结构如下：

html
<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

常用HTML标签 ​

  1. 标题标签：<h1>到<h6>
  2. 段落标签：<p>
  3. 链接标签：<a>
  4. 图像标签：<img>
  5. 列表标签：<ul>、<ol>、<li>
  6. 表格标签：<table>、<tr>、<td>、<th>
  7. 表单标签：<form>、<input>、<button>、<select>

CSS基础 ​

CSS简介 ​

CSS用于控制网页的外观和布局。它可以与HTML分离，使内容与样式分离，便于维护。

CSS引入方式 ​

  1. 内联样式：
html
<p style="color: red;">红色文本</p>
  1. 内部样式表：
html
<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
  1. 外部样式表：
html
<head>
    <link rel="stylesheet" href="styles.css">
</head>

CSS选择器 ​

  1. 元素选择器：p { color: red; }
  2. 类选择器：.className { color: blue; }
  3. ID选择器：#idName { color: green; }
  4. 后代选择器：div p { color: yellow; }

盒模型 ​

CSS盒模型是网页布局的基础，包括：

  • 内容区域（content）
  • 内边距（padding）
  • 边框（border）
  • 外边距（margin）

JavaScript基础 ​

JavaScript简介 ​

JavaScript是一种脚本语言，用于为网页添加交互性。它可以直接在浏览器中运行，无需编译。

JavaScript基础语法 ​

  1. 变量声明：
javascript
let name = "张三";
const age = 25;
var city = "北京";
  1. 函数：
javascript
function greet(name) {
    return "你好，" + name;
}
  1. 条件语句：
javascript
if (age >= 18) {
    console.log("成年人");
} else {
    console.log("未成年人");
}
  1. 循环语句：
javascript
for (let i = 0; i < 5; i++) {
    console.log(i);
}

DOM操作 ​

DOM（Document Object Model）是HTML文档的对象表示。通过JavaScript可以操作DOM来动态修改网页内容。

  1. 获取元素：
javascript
let element = document.getElementById("myId");
let elements = document.getElementsByClassName("myClass");
  1. 修改内容：
javascript
element.innerHTML = "新内容";
  1. 修改样式：
javascript
element.style.color = "red";

前端技术与Java的关系 ​

在Java Web开发中，前端技术主要用于：

  1. 创建用户界面
  2. 发送HTTP请求到后端Java服务
  3. 处理后端返回的数据并展示给用户

通过学习这些前端基础知识，Java开发者可以：

  • 更好地与前端开发人员协作
  • 独立开发简单的全栈应用
  • 理解前后端交互的原理

实践练习 ​

创建一个简单的HTML页面，包含以下元素：

  1. 一个标题
  2. 一个段落介绍自己
  3. 一个列表展示自己的兴趣爱好
  4. 一个表单用于收集用户信息
  5. 使用CSS美化页面样式
  6. 使用JavaScript添加简单的交互效果

总结 ​

掌握HTML、CSS和JavaScript基础对于Java Web开发者非常重要。这些技术是现代Web开发的基础，理解它们有助于我们构建更好的Web应用。在后续章节中，我们将学习如何使用Java技术（如Servlet和JSP）来处理前端发送的请求。