JavaWeb（4）——HTML、CSS、JS 快速入门
发布人：shili8
发布时间：2024-12-08 12:07
阅读次数：0
**Java Web快速入门系列第四篇：HTML、CSS、JS**
在前面的文章中，我们已经学习了Java Web的基本概念、Servlet和JSP的使用。今天我们要讲的是HTML、CSS和JavaScript，这三个是Web开发中的基础技术。
### HTML（超文本标记语言）
HTML是一种用来描述网页结构和内容的标记语言。它定义了网页中各个元素的位置、大小和样式等信息。
#### HTML基本结构一个简单的HTML页面通常包含以下几个部分：
* **头部**（head）：包含元信息，如标题、关键词等。
* **主体**（body）：包含网页内容，如文本、图片、表格等。
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
#### HTML常用元素* **h1-h6**：标题元素，用于表示重要信息。
* **p**：段落元素，用于表示普通文本。
* **img**：图片元素，用于插入图片。
* **a**：超链接元素，用于连接到其他网页或资源。
html<h1>这是一个标题</h1> <p>这是一个段落</p> <img src="image.jpg" alt="图片"> <a href=" />
### CSS（层叠样式表）
CSS是一种用来描述网页样式和布局的样式语言。它定义了网页中各个元素的外观、大小和位置等信息。
#### CSS基本结构一个简单的CSS文件通常包含以下几个部分：
* **选择器**：用于选择要应用样式的元素。
* **属性**：用于描述元素的样式，如颜色、字体等。
* **值**：用于指定属性的具体值。
cssbody {
background-color: #f2f2f2;
}
h1 {
color: #00698f;
}
#### CSS常用选择器* **元素选择器**：用于选择特定元素，如`h1`、`p`等。
* **类选择器**：用于选择具有特定类的元素，如`.header`、`.footer`等。
* **ID选择器**：用于选择具有特定ID的元素，如`#header`、`#footer`等。
css.header {
background-color: #f2f2f2;
}
.footer {
color: #00698f;
}
### JavaScriptJavaScript是一种用来描述网页交互逻辑和动态效果的脚本语言。它定义了网页中各个元素的行为、事件等信息。
#### JavaScript基本结构一个简单的JavaScript代码通常包含以下几个部分：
* **变量**：用于存储数据。
* **函数**：用于封装逻辑和执行操作。
* **事件**：用于响应用户交互或其他事件。
javascriptlet name = 'John Doe';
function sayHello() {
console.log(`Hello, ${name}!`);
}
sayHello();
#### JavaScript常用函数* **alert()**：用于弹出警告框。
* **confirm()**：用于弹出确认对话框。
* **prompt()**：用于弹出输入对话框。
javascriptalert('Hello, World!');
confirm('Are you sure?');
let name = prompt('What is your name?');
### 总结在本篇文章中，我们学习了HTML、CSS和JavaScript的基本概念和使用方法。这些技术是Web开发中的基础，掌握它们可以帮助你更好地理解网页结构、样式和交互逻辑。
### 参考资料* [MDN Web Docs]( />* [W3Schools](
粤公网安备 44011102002787号