万物知汇 - 从零开始学习HTML/CSS

网页制作入门指南

网页制作是构建互联网的基础技能。现代网页由三个核心技术组成：HTML（结构）、CSS（样式）和JavaScript（行为）。本指南将带你了解这些技术的基础知识和应用。

HTML基础

超文本标记语言（HTML）是网页的骨架，用于定义页面结构和内容。

使用标签定义内容元素
创建标题、段落、列表等
添加链接和图片
构建表格和表单
语义化标签的重要性

CSS样式

层叠样式表（CSS）控制网页的视觉表现，实现美观的页面设计。

选择器和样式规则
盒模型的理解
布局技术（Flexbox, Grid）
响应式设计原则
动画和过渡效果

JavaScript基础

JavaScript为网页添加交互功能，实现动态内容和用户体验。

变量和数据类型
函数和作用域
DOM操作
事件处理
异步编程基础

HTML代码示例

下面是一个基本的HTML页面结构示例：

index.html 基本HTML结构

                    <!DOCTYPE html>

                    <html lang="zh-CN">

                    <head>

                      <meta charset="UTF-8">

                      <meta name="viewport" content="width=device-width, initial-scale=1.0">

                      <title>我的第一个网页</title>

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

                    </head>

                    <body>

                      <header>

                        <h1>欢迎来到我的网站</h1>

                      </header>

                      <main>

                        <section>

                          <h2>关于我们</h2>

                          <p>这是一个简单的段落文本示例...</p>

                        </section>

                      </main>

                      <footer>

                        <p>© 2023 我的网站</p>

                      </footer>

                      <script src="script.js"></script>

                    </body>

                    </html>

CSS代码示例

下面是一个基本的CSS样式表示例：

styles.css 基本CSS样式

                    /* 基础重置和全局样式 */

                    * {

                      margin: 0;

                      padding: 0;

                      box-sizing: border-box;

                    }

                    body {

                      font-family: 'Segoe UI', Tahoma, sans-serif;

                      line-height: 1.6;

                      color: #333;

                      background-color: #f5f5f5;

                    }

                    /* 容器样式 */

                    .container {

                      width: 90%;

                      max-width: 1200px;

                      margin: 0 auto;

                    }

                    /* 头部样式 */

                    header {

                      background-color: #4361ee;

                      color: white;

                      padding: 1.5rem 0;

                    }

                    /* 卡片样式 - 使用Flexbox布局 */

                    .card-container {

                      display: flex;

                      flex-wrap: wrap;

                      gap: 20px;

                    }

                    .card {

                      background: white;

                      border-radius: 10px;

                      box-shadow: 0 3px 10px rgba(0,0,0,0.1);

                      flex: 1;

                      min-width: 250px;

                      padding: 20px;

                    }

交互练习区

尝试修改下面的HTML和CSS代码，实时查看效果：

HTML练习

index.html

<!DOCTYPE html> <html> <head> <title>我的练习页面</title> <style> body { font-family: Arial, sans-serif; text-align: center; padding: 20px; } h1 { color: #3a86ff; } </style> </head> <body> <h1>欢迎来到我的网站</h1> <p>尝试编辑这段文本</p> <button>点击我</button> </body> </html>

CSS练习

styles.css

/* 尝试修改这些样式 */ body { background-color: #f0f0f0; } h1 { color: #ff006e; font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); } button { background: #3a86ff; color: white; border: none; padding: 10px 25px; border-radius: 5px; cursor: pointer; font-size: 1rem; transition: all 0.3s ease; } button:hover { background: #2667cc; transform: scale(1.05); }

学习资源

以下是一些优秀的学习资源和工具，帮助你更好地学习网页制作：

从零开始学习网页制作