HTML+CSS+JavaScript 入门指南

本文介绍了构建现代 Web 应用程序的核心技术：HTML、CSS 和 JavaScript。通过学习这些技术，你将能够开发功能丰富且美观的网站。

一、HTML（超文本标记语言）

HTML 是构建 Web 页面结构的基础。它通过使用标签定义页面内容。

1.1 常见标签

<html>: 定义 HTML 文档。
<head>: 包含元信息（meta 信息）、标题和外部资源链接。
<body>: 定义页面的主要内容。

1.2 示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎来到我的网站</h1>
  <p>这是一个用 HTML 构建的简单页面。</p>
</body>
</html>

二、CSS（层叠样式表）

CSS 用于美化 HTML 页面内容。通过选择器和样式规则，你可以定义颜色、字体、布局等。

2.1 基本语法

选择器 {
  属性: 值;
}

2.2 常用选择器

标签选择器: 选择所有指定标签（如 p {}）。
类选择器: 选择具有特定类名的元素（如 .className {}）。
ID 选择器: 选择具有特定 ID 的元素（如 #idName {}）。

2.3 示例

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: #333;
}

p {
  line-height: 1.6;
}

2.4 引入方式

内联样式: 使用 style 属性直接定义在 HTML 标签内。
内部样式表: 使用 <style> 标签嵌入到 HTML 文档的 <head> 中。
外部样式表: 使用 <link> 标签链接外部 .css 文件。

三、JavaScript

JavaScript 是一种动态编程语言，用于添加交互性、操作 DOM（文档对象模型）和实现客户端逻辑。

3.1 基本语法

// 变量声明
let message = "Hello, World!";

// 函数定义
function greet(name) {
  return `Hello, ${name}!`;
}

// 调用函数
console.log(greet("Alice"));

3.2 常用功能

事件监听: 响应用户交互，如点击或输入。
DOM 操作: 动态修改 HTML 元素或样式。
数据操作: 处理用户输入和与服务器通信。

3.3 示例

// 点击按钮后显示警告框
document.querySelector("button").addEventListener("click", function () {
  alert("按钮被点击了！");
});

四、整合 HTML、CSS 和 JavaScript

HTML 提供结构，CSS 定义样式，JavaScript 添加功能。以下是一个完整示例。

4.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML+CSS+JS 示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: #f4f4f4;
    }

    button {
      padding: 10px 20px;
      background-color: #007BFF;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <h1>HTML + CSS + JS 示例</h1>
  <p>点击下面的按钮查看效果：</p>
  <button>点击我</button>

  <script>
    document.querySelector("button").addEventListener("click", function () {
      alert("你点击了按钮！");
    });
  </script>
</body>
</html>

五、总结

HTML 定义内容结构，CSS 提供样式美化，JavaScript 增加交互性。三者相辅相成，共同构建现代 Web 应用程序。

HTML、CSS 与 JavaScript：构建现代网页的基础