html静态网页制作教程-杰瑞科技汇

HTML静态网页制作全教程

本教程将分为以下几个部分：

第一部分：准备工作 - 理解基本概念
第二部分：创建你的第一个网页
第三部分：HTML核心标签详解
第四部分：CSS - 为网页穿上“衣服”
第五部分：JavaScript - 为网页注入“灵魂”
第六部分：实战演练 - 构建一个个人作品集页面
第七部分：进阶与资源推荐

第一部分：准备工作 - 理解基本概念

在开始之前,你需要了解几个核心概念：

HTML (HyperText Markup Language - 超文本标记语言)
- 作用：定义网页的，就像人体的骨骼，决定了哪里是头，哪里是身体,哪里是脚。
- 特点：由一系列的组成,这些标签告诉浏览器如何显示内容。
CSS (Cascading Style Sheets - 层叠样式表)
- 作用：描述网页的视觉表现，就像人体的衣服和妆容，决定了网页的颜色、字体、布局、间距等。
- 特点：与HTML分离,让你可以轻松地改变整个网站的外观。
JavaScript
- 作用：实现网页的交互和动态行为，就像人体的神经和肌肉，让网页能够响应用户的操作，比如点击按钮、弹出提示、制作动画等。
- 特点：是一种脚本语言,可以直接在浏览器中运行。

静态网页 vs. 动态网页

静态网页是固定的，无论谁来访问，看到的内容都一样,我们本教程制作的都是静态网页。
动态网页可以根据用户、时间、数据库等动态生成,比如你登录淘宝看到的首页。

你需要什么工具？

文本编辑器：用来编写代码，强烈推荐使用 Visual Studio Code (VS Code)，它是目前最流行、功能最强大的免费代码编辑器。
- 安装VS Code：访问 Visual Studio Code 官网下载并安装。
- 推荐插件：安装 Live Server 插件，它可以一键启动一个本地服务器，让你的网页在浏览器中实时刷新,非常方便。

第二部分：创建你的第一个网页

让我们动手创建一个最简单的网页。

创建项目文件夹 在你的电脑上创建一个新的文件夹，命名为 my-first-website,所有后续的文件都放在这个文件夹里。
创建HTML文件 在 my-first-website 文件夹中，创建一个新的文件，命名为 index.html。注意：文件后缀名必须是 .html。

编写基础HTML结构 用VS Code打开 index.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>
</head>
<body>
    <h1>你好，世界！</h1>
    <p>欢迎来到我的第一个HTML网页。</p>
</body>
</html>

预览网页
- 在VS Code中，右键点击 index.html 文件。
- 选择 Open with Live Server。
- 你的默认浏览器会自动打开,并显示你刚刚创建的网页。

恭喜！你已经成功创建了你的第一个网页！

代码解释：

<!DOCTYPE html>：告诉浏览器这是一个HTML5文档。
<html>：所有网页内容的根元素。
<lang="zh-CN">：指定网页的语言为中文,有助于搜索引擎优化。
<head>：包含网页的元数据，这些数据不会直接显示在页面上，但提供关于页面的信息。
- <meta charset="UTF-8">：确保网页能正确显示中文等特殊字符。
- <title>：显示在浏览器标签页上的标题。
<body>：包含所有在页面上可见的内容。
- <h1>,最重要的标题。
- <p>：段落标签。

第三部分：HTML核心标签详解

HTML由各种标签构成，我们来学习一些最常用、最重要的标签。

文本标签

名称	描述
`<h1>` - `<h6>`	`<h1>`最大，`<h6>`最小，用于构建文档层级。
`<p>`	段落	包含一段文本。
`<strong>` 或 `<b>`	加粗	`<strong>` 语义上更强调重要性，`<b>` 只是视觉上加粗。
`<em>` 或 `<i>`	斜体	`<em>` 语义上更强调语气，`<i>` 只是视觉上斜体。
`<br>`	换行	单标签，强制换行。
`<hr>`	水平线	单标签，创建一条分割线。

列表标签

名称	描述
`<ul>`	无序列表	列表项前有圆点或方块。
`<ol>`	有序列表	列表项前有数字或字母。
`<li>`	列表项	用于 `<ul>` 或 `<ol>` 中。

示例：

<!-- 无序列表 -->
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>
<!-- 有序列表 -->
<ol>
    <li>第一步：准备材料</li>
    <li>第二步：开始烹饪</li>
    <li>第三步：享用美食</li>
</ol>

链接和图片标签

属性	描述
`<a>`	`href`	创建超链接。`href`指定链接地址。
`<img>`	`src`, `alt`	插入图片。`src`是图片路径，`alt`是图片无法显示时的替代文本（非常重要！）。

示例：

<!-- 链接到另一个网站 -->
<a href="https://www.google.com" target="_blank">访问谷歌</a>
<!-- target="_blank" 在新标签页中打开链接 -->
<!-- 插入本地图片 -->
<img src="images/my-cat.jpg" alt="我可爱的猫咪照片">
<!-- 插入网络图片 -->
<img src="https://placekitten.com/200/300" alt="一只小猫">

注意：你需要先在项目文件夹里创建一个 images 文件夹，并把图片放进去,路径才能正确。

容器标签

名称	描述
`<div>`	分区	一个通用的块级容器，用于布局和分组内容。
`<span>`	内联容器	一个通用的内联容器，用于对文本的一部分进行样式化。

示例：

<div style="border: 1px solid black; padding: 10px;">
    <p>这是一个 <span style="color: red;">红色</span> 的词。</p>
    <p>这个div盒子有边框和内边距。</p>
</div>

表单标签

表单用于收集用户输入。 | 标签 | 名称 | 描述 | | :--- | :--- | :--- | | <form> | 表单 | 表单的容器。action属性指定提交地址，method指定提交方法（GET/POST）。 | | <input> | 输入框 | 最 versatile 的表单元素。type属性决定其类型（text, password, email, submit, button等）。 | | <label> | 标签 | 为表单元素提供标签，点击标签可以聚焦到输入框。 | | <textarea> | 文本域 | 用于输入多行文本。 | | <button> | 按钮 | 创建一个可点击的按钮。 |

示例：

<form action="/submit-form" method="post">
    <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required>
    </div>
    <br>
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
    </div>
    <br>
    <div>
        <label for="message">留言：</label>
        <textarea id="message" name="message" rows="4" cols="30"></textarea>
    </div>
    <br>
    <button type="submit">提交</button>
    <button type="button">取消</button>
</form>

第四部分：CSS - 为网页穿上“衣服”

现在我们的网页结构有了，但看起来很朴素,让我们用CSS来美化它。

如何引入CSS

有三种方式，推荐使用外部样式表。

外部样式表（最佳实践）
1. 在项目文件夹中创建一个 style.css 文件。
2. 在 index.html 的 <head> 部分添加以下代码：
```
<link rel="stylesheet" href="style.css">
```

内部样式表 将CSS代码直接写在HTML文件的 <head> 部分的 <style> 标签里。

<head>
    ...
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: white;
            text-align: center;
        }
    </style>
    ...
</head>

内联样式 直接在HTML标签上使用 style 属性。（不推荐,因为难以维护）
```
<h1 style="color: blue; text-align: center;">这是一个标题</h1>
```

CSS基础语法

CSS规则由选择器和声明块组成。

selector {
  property1: value1;
  property2: value2;
}

选择器：告诉浏览器要给哪个元素应用样式。
属性：你想要设置的样式（如 color, font-size）。
值：属性的值（如 red, 16px）。

常用CSS属性

属性类别	常用属性	示例
文本	`color`, `font-size`, `font-family`, `text-align`	`color: #333;`
背景	`background-color`, `background-image`	`background-color: #f0f0f0;`
盒模型	`width`, `height`, `margin` (外边距), `padding` (内边距), `border` (边框)	`margin: 20px auto;` `padding: 10px;` `border: 1px solid black;`
布局	`display`, `float`, `position` (较复杂)	`display: block;` `float: left;`

CSS选择器

元素选择器：根据HTML标签选择。
```
p { color: green; }
```

类选择器：根据元素的 class 属性选择，最常用，前面加一个点。

<p class="highlight">这段文字会高亮。</p>

.highlight { background-color: yellow; }

ID选择器：根据元素的 id 属性选择，ID在页面中是唯一的，前面加一个井号。
```
<p id="main-title">这是主标题。</p>
```
```
#main-title { font-size: 24px; }
```

第五部分：JavaScript - 为网页注入“灵魂”

让我们让网页动起来，我们将使用JavaScript来添加一个简单的交互功能：点击按钮,改变一段文字。

如何引入JavaScript

同样,推荐使用外部文件。

在项目文件夹中创建一个 script.js 文件。
在 index.html 的 </body> 标签之前添加以下代码：
```
<script src="script.js"></script>
```
为什么放在 </body> 前？：这样可以确保在脚本执行前,页面的所有HTML元素都已经加载完毕。

一个简单的交互示例

修改你的 index.html,添加一个按钮和一个段落：

<body>
    <h1>我的第一个网页</h1>
    <p id="demo">这是一个段落。</p>
    <button id="myButton">点击我</button>
    <script src="script.js"></script>
</body>

在 script.js 文件中写入以下代码：

// 1. 获取按钮和段落元素
const button = document.getElementById("myButton");
const paragraph = document.getElementById("demo");
// 2. 为按钮添加一个点击事件监听器
button.addEventListener("click", function() {
    // 3. 当按钮被点击时，改变段落的内容和颜色
    paragraph.textContent = "你点击了按钮！";
    paragraph.style.color = "blue";
});

保存文件，并在浏览器中刷新 index.html，当你点击按钮时,段落的内容和颜色就会改变。

第六部分：实战演练 - 构建一个个人作品集页面

让我们综合运用所学知识,构建一个简单的个人作品集页面。

项目结构：

my-portfolio/
├── index.html
├── style.css
├── script.js
└── images/
    └── profile.jpg

`index.html`

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">张三 - 前端开发者</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>张三</h1>
            <p>前端开发者 & UI设计师</p>
        </div>
    </header>
    <main class="container">
        <section id="about">
            <h2>关于我</h2>
            <p>你好！我是一名充满热情的前端开发者，热爱创造美观且功能强大的网页...</p>
        </section>
        <section id="projects">
            <h2>我的项目</h2>
            <div class="project-list">
                <div class="project-item">
                    <h3>项目一：在线购物网站</h3>
                    <p>一个响应式的电商网站前端项目。</p>
                </div>
                <div class="project-item">
                    <h3>项目二：任务管理应用</h3>
                    <p>一个使用原生JavaScript构建的待办事项应用。</p>
                </div>
            </div>
        </section>
    </main>
    <footer>
        <div class="container">
            <p>&copy; 2025 张三. All rights reserved.</p>
        </div>
    </footer>
    <script src="script.js"></script>
</body>
</html>

`style.css`

/* 全局样式 */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: #f4f4f4;
    color: #333;
}
.container {
    width: 80%;
    max-width: 1100px;
    margin: auto;
    overflow: hidden;
    padding: 0 2rem;
}
/* 头部样式 */
header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}
header h1 {
    margin: 0;
    font-size: 2.5rem;
}
区域 */
main {
    margin: 2rem auto;
}
section {
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
section h2 {
    border-bottom: 2px solid #333;
    padding-bottom: 0.5rem;
    margin-top: 0;
}
/* 项目列表样式 */
.project-list {
    list-style: none;
    padding: 0;
}
.project-item {
    background: #f9f9f9;
    padding: 1rem;
    margin-bottom: 1rem;
    border-left: 3px solid #333;
}
/* 页脚样式 */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
}

`script.js` (可选)

你可以添加一些简单的JavaScript,比如平滑滚动或一个动态的时间戳。

// 示例：在页脚添加一个动态更新的年份
const footerYear = document.querySelector('footer p');
const currentYear = new Date().getFullYear();
footerYear.innerHTML = `&copy; ${currentYear} 张三. All rights reserved.`;

第七部分：进阶与资源推荐

恭喜你！你已经掌握了制作一个基本静态网页的所有核心技能。

下一步可以学习什么？

响应式设计：让你的网页在手机、平板、电脑上都能完美显示，学习使用 CSS Flexbox 和 CSS Grid 布局，以及媒体查询 @media。
CSS框架：学习使用像 Bootstrap 或 Tailwind CSS 这样的框架,它们能让你更快地构建出美观且响应式的界面。
版本控制：学习使用 Git 和 GitHub，这是所有开发者的必备技能,用于代码管理和团队协作。
前端构建工具：学习 Webpack 或 Vite，它们可以帮助你更高效地管理项目、处理CSS和JavaScript文件。

推荐资源：

MDN Web Docs (Mozilla Developer Network)：https://developer.mozilla.org/zh-CN/
- 最权威、最全面的Web技术文档，当你遇到任何问题时,首先应该来这里查找答案。
W3Schools：https://www.w3schools.com/
一个非常友好的在线教程和参考网站,有大量实例可以在线运行和修改。
freeCodeCamp：https://www.freecodecamp.org/chinese/
提供免费的、互动式的编程课程，项目驱动,非常适合系统学习。
Codecademy：https://www.codecademy.com/
另一个优秀的互动学习平台。

记住最重要的一点：多动手，多练习，多模仿。 找一个你喜欢的网站，尝试用HTML和CSS去模仿它的布局和样式，这是提升最快的方式,祝你学习愉快！

html静态网页制作教程

HTML静态网页制作全教程

第一部分：准备工作 - 理解基本概念

第二部分：创建你的第一个网页

第三部分：HTML核心标签详解

文本标签

列表标签

链接和图片标签

容器标签

表单标签

第四部分：CSS - 为网页穿上“衣服”

如何引入CSS

CSS基础语法

常用CSS属性

CSS选择器

第五部分：JavaScript - 为网页注入“灵魂”

如何引入JavaScript

一个简单的交互示例

第六部分：实战演练 - 构建一个个人作品集页面

`index.html`

`style.css`

`script.js` (可选)

第七部分：进阶与资源推荐

99ANYc3cd6

add binary python

Centos系统安装教程步骤详解？

Java字符串用法有哪些核心要点？

foreach 数组 java

java调用sqlserver

Java Socket编程实例具体怎么实现？

MacBook Pro装双系统教程，难不难？

Axure RP 7.0教程从哪学？新手入门怎么学？

Java webservice post如何正确调用与传参？

delicious retouch教程是什么？

Python socket client如何实现高效通信？

Python interpreter下载哪里找？

Python的readline模块如何正确使用？

Java基础篇第八版课后答案哪里找？

Access教程如何快速上手数据库管理？

MySQL与Java时间戳如何转换？

html静态网页制作教程

HTML静态网页制作全教程

第一部分：准备工作 - 理解基本概念

第二部分：创建你的第一个网页

第三部分：HTML核心标签详解

文本标签

列表标签

链接和图片标签

容器标签

表单标签

第四部分：CSS - 为网页穿上“衣服”

如何引入CSS

CSS基础语法

常用CSS属性

CSS选择器

第五部分：JavaScript - 为网页注入“灵魂”

如何引入JavaScript

一个简单的交互示例

第六部分：实战演练 - 构建一个个人作品集页面

index.html

style.css

script.js (可选)

第七部分：进阶与资源推荐

相关推荐

Java Socket编程实例具体怎么实现？

`index.html`

`style.css`

`script.js` (可选)