HTML、CSS、JavaScript（JS）入门

风之吻网站开发 2025-02-19 522

HTML、CSS、JavaScript（JS）入门-第1张图片-风享汇

HTML(HyperText Markup Language)、CSS(Cascading Style Sheets)、JavaScript（JS）是构建现代网页的三大核心技术，它们各自有不同的作用，并通过相互配合创建出具有结构、样式和行为的网页。

1. HTML：网页的结构

HTML (HyperText Markup Language) 是用来描述网页内容的标记语言，类似于网页的骨架。所有网页的结构都是由 HTML 定义的。HTML 使用不同的标签来组织内容和元素。

1.1 HTML 的基本语法

每个 HTML 文件都包含以下基本结构：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <!-- 网页内容放在这里 -->
</body>
</html>

<!DOCTYPE html>：声明文档类型，表明当前网页使用的是 HTML5。
<html>：所有 HTML 标签都必须包含在这个标签内。
<head>：用于放置网页的元信息，例如编码、标题、外部资源引用等。
<title>：定义网页在浏览器标签上的标题。
<body>：包含网页的可视内容，所有页面展示的内容都会写在这里。

1.2 常见的 HTML 标签

标题标签：<h1>到<h6>，用来表示不同级别的标题，<h1> 是最大的标题，<h6> 是最小的标题。
段落标签：<p> 用来定义文本段落。
链接标签：<a> 用来创建超链接，<a href="url">链接文字</a>。
图片标签：<img> 用来插入图片，<img src="image.jpg" alt="描述文字">。
表单标签：<form> 用于创建表单，<input> 用于创建表单元素如文本框、按钮等。

1.3 HTML 示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落，包含了一些简单的文字内容。</p>
    <a href="http://hui.fzwqq.com">点击这里访问 Example</a>
    <img src="http://hui.fzwqq.com/image.jpg" alt="示例图片">
</body>
</html>

h1 创建了一个大标题。
p 用来展示段落文字。
a 标签创建了一个链接，点击后会跳转到 example.com。
img 标签插入了一张图片。

2. CSS：网页的样式

CSS (Cascading Style Sheets)，即层叠样式表，用来控制 HTML 页面元素的外观和布局。CSS 可以为 HTML 元素指定颜色、字体、布局、大小等，使网页更加美观。

2.1 CSS 的基本语法

CSS 的规则由选择器和声明组成，选择器指定要应用样式的 HTML 元素，声明则包括样式属性和值。

选择器 {
    属性: 值;
}

2.2 常见的 CSS 选择器

标签选择器：直接选择 HTML 标签，例如 h1。

类选择器：以 . 开头，选择具有特定类名的元素，例如 .class-name。

ID 选择器：以 # 开头，选择具有特定 ID 的元素，例如 #id-name。

2.3 CSS 示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>带有样式的网页</title>
    <style>
        body {
            background-color: #f4f4f4;
            font-family: Arial, sans-serif;
        }
 
        h1 {
            color: #3498db;
            text-align: center;
        }
 
        p {
            font-size: 16px;
            line-height: 1.5;
        }
 
        a {
            color: #e74c3c;
            text-decoration: none;
        }
 
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>我的样式化网页</h1>
    <p>这是一个带有 CSS 样式的网页。</p>
    <a href="#">点击这里查看更多内容</a>
</body>
</html>

body：设置网页的背景颜色为灰色，并应用 Arial 字体。
h1：将标题的颜色设置为蓝色，并使其居中对齐。
p：设置段落文字的大小为 16 像素，并增加行高，使内容更易读。
a：给链接定义了红色字体，并移除了下划线。当鼠标悬停时，链接会显示下划线。

2.4 内联、嵌入式和外部 CSS

2.4.1 内联样式

将样式直接写在 HTML 元素的 style 属性中。

<h1 style="color: red;">这是一个内联样式标题</h1>

2.4.2 嵌入式样式

将样式写在 HTML 文件的 <style> 标签内，位于 <head> 部分。

示例中已经展示。

2.4.3 外部样式表

将 CSS 样式写在独立的 .css 文件中，通过 <link> 引用。

<link rel="stylesheet" href="styles.css">

3. JavaScript：网页的行为

JavaScript 是一种脚本语言，允许网页具有动态交互功能。它可以处理用户输入、操作 DOM（Document Object Model）、与服务器通信等。

3.1 JavaScript 的基本语法

3.1.1 变量

用于存储数据。

var name = "张三";
let age = 25;
const country = "中国";

3.1.2 函数

用于封装可复用的代码块。

function greet() {
    alert("欢迎访问我的网站！");
}

3.1.3 事件

当用户与网页互动时触发的行为，例如点击、悬停等。

<button onclick="greet()">点击我</button>

3.2 JavaScript 操作 DOM

DOM 是网页的文档对象模型，JavaScript 可以操作 HTML 元素、改变内容或样式。

// 改变元素的文本内容
document.getElementById("example").innerHTML = "新的内容";
 
// 改变元素的样式
document.getElementById("example").style.color = "blue";

3.3 JavaScript 示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript 示例</title>
    <style>
        body {
            text-align: center;
            padding-top: 50px;
        }
 
        #box {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            margin: 0 auto;
        }
    </style>
</head>
<body>
 
    <h1>点击按钮改变颜色</h1>
    <div id="box"></div>
    <button onclick="changeColor()">更改颜色</button>
 
    <script>
        function changeColor() {
            var box = document.getElementById("box");
            var newColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
            box.style.backgroundColor = newColor;
        }
    </script>
 
</body>
</html>

点击按钮时会调用 changeColor() 函数。

函数会生成一个随机颜色，并将其应用到 box 的背景颜色上。

4. 示例：简单的 HTML + CSS + JS 入门示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单入门网页</title>
    
    <!-- CSS 样式部分 -->
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            text-align: center;
            padding-top: 50px;
        }
 
        h1 {
            color: #333;
        }
 
        #colorBox {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            margin: 20px auto;
            transition: background-color 0.5s ease;
        }
 
        button {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            cursor: pointer;
        }
 
        button:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
 
    <!-- HTML 结构部分 -->
    <h1>点击按钮更改颜色</h1>
    <div id="colorBox"></div>
    <button onclick="changeColor()">更改颜色</button>
 
    <!-- JavaScript 行为部分 -->
    <script>
        // 定义一个函数，当点击按钮时调用该函数
        function changeColor() {
            var colorBox = document.getElementById('colorBox');
            var newColor = '#' + Math.floor(Math.random() * 16777215).toString(16); // 随机生成一个颜色
            colorBox.style.backgroundColor = newColor; // 将颜色应用到colorBox
        }
    </script>
 
</body>
</html>

解析

HTML 部分：