从零开始学前端：HTML、CSS、JavaScript实战教程

HTML入门篇

HTML基础

HTML（HyperText Markup Language，超文本标记语言）是构建网页的基本语言。它使用一系列标签（如<html>、<body>、<title>等）来描述网页的内容结构。

标签结构

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

在上面的例子中，<!DOCTYPE html> 声明了文档类型，<html> 标签是整个文档的根元素，<head> 标签包含文档的元数据，如标题等，<body> 标签包含可见的网页内容。

常用标签

<h1> 到 <h6>：标题标签，<h1> 是最大的标题，<h6> 是最小的标题。
<p>：段落标签。
<a>：超链接标签。
<img>：图像标签。

HTML属性

HTML标签可以包含属性，属性提供了额外的信息。

属性示例

<a href="https://www.example.com" target="_blank">点击这里</a>

在上面的例子中，href 属性定义了链接的目标地址，target="_blank" 属性定义了链接在新窗口中打开。

CSS入门篇

CSS（Cascading Style Sheets，层叠样式表）用于描述HTML文档的样式。

CSS基础

CSS通过选择器来指定样式规则。

选择器

h1 {
    color: red;
}

在上面的例子中，h1 是选择器，它指定了所有<h1>标签的样式规则。

属性和值

h1 {
    color: red; /* 颜色 */
    font-size: 24px; /* 字体大小 */
}

在上面的例子中，color 和 font-size 是属性，red 和 24px 是对应的值。

CSS盒模型

CSS盒模型描述了元素在网页中的布局。

盒模型组成

内容（Content）
内边距（Padding）
边框（Border）
外边距（Margin）

盒模型示例

div {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}

在上面的例子中，div 元素具有宽度、高度、内边距、边框和外边距。

JavaScript入门篇

JavaScript是一种编程语言，用于控制网页的行为。

JavaScript基础

JavaScript代码通常写在<script>标签中。

变量和数据类型

let name = "张三";
console.log(name); // 输出：张三

在上面的例子中，let 关键字用于声明变量，name 是变量名，"张三" 是变量值。

控制结构

if (age >= 18) {
    console.log("成年");
} else {
    console.log("未成年");
}

在上面的例子中，if 和 else 关键字用于控制程序流程。

JavaScript事件处理

JavaScript可以响应网页上的事件，如鼠标点击、键盘按键等。

事件示例

<button onclick="alert('按钮被点击了！')">点击我</button>

在上面的例子中，onclick 属性定义了当按钮被点击时执行的JavaScript代码。

实战项目

通过学习HTML、CSS和JavaScript，你可以开始创建自己的网页和网页应用。

项目一：个人博客

使用HTML创建网页结构。
使用CSS设计网页样式。
使用JavaScript实现动态交互功能。

项目二：在线商城

使用HTML创建商品列表和购物车。
使用CSS设计商品列表和购物车样式。
使用JavaScript实现商品添加、删除和结算功能。

通过不断实践和学习，你将逐渐掌握前端开发的技能。祝你在前端开发的道路上越走越远！