当前位置：首页 > news >正文

自己开发一个网站系列之-网页开发初识

news 2026/3/30 17:25:13

自己开发一个网站系列之-网页开发初识

欢迎来到网页开发的世界！在这个教程中，我们将介绍网页开发的基本概念、工具和技术，让你能够从零开始创建自己的网页。

一、基础概念

1. 什么是网页？

网页是通过互联网进行访问的文档，它通常用 HTML（超文本标记语言）编写，并可以通过网页浏览器进行查看。网页可以包含文字、图片、视频和其他多种媒体。

2. 网页开发的主要组成部分

前端开发：涉及用户直接看到的部分，主要使用 HTML、CSS 和 JavaScript。
后端开发：涉及服务器和数据库的部分，通过处理前端发送的请求并返回数据。常用语言包括 Python、Java、PHP 等。
全栈开发：同时涉及前端和后端开发的技能。

二、工具与环境

1. 代码编辑器

选择一个代码编辑器来编写代码。推荐使用如下编辑器：

Visual Studio Code：功能强大且广泛使用，支持插件扩展。
Sublime Text：轻量级，易于使用。
Atom：由 GitHub 开发，支持多种现代化功能。

2. 网页浏览器

要查看你的网页，使用主流的浏览器，如：

Google Chrome
Mozilla Firefox
Microsoft Edge

3. 开发环境

为了开发和测试，你可以直接在本地计算机上工作。创建一个文件夹，用于存放你的网页项目。

三、前端开发

1. HTML 基础

HTML（超文本标记语言）是构建网页的基础。以下是一个简单的 HTML 示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一网页</title>
</head>
<body><h1>欢迎来到我的网页！</h1><p>这是我的第一段文字。</p>
</body>
</html>

常用 HTML 标签

<h1>至<h6>：标题标签，数字越大，等级越低。
<p>：段落标签。
<a>：链接标签。
<img>：图片标签。

2. CSS 基础

CSS（层叠样式表）用于美化网页。以下是一个简单的 CSS 示例：

body {background-color: #f0f0f0;
}h1 {color: #333;
}p {font-size: 16px;line-height: 1.5;
}

在 HTML 文件中可以通过以下方式引入 CSS：

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

常用 CSS 属性

color：文本颜色。
background-color：背景颜色。
font-size：字体大小。
margin 和 padding：外边距和内边距。

3. JavaScript 基础

JavaScript 是使网页具有交互性的编程语言。以下是一个简单的 JavaScript 示例：

<script>function greet() {alert('欢迎来到我的网页！');}
</script><button onclick="greet()">点击我</button>

常用 JavaScript 功能

事件处理：对用户操作（如点击、输入等）做出反应。
DOM 操作：动态修改网页内容和样式。

四、后端开发（简单概念）

虽然本教程主要集中在前端开发，但了解后端开发基本概念也很重要。

1. 常用后端语言

Python（Flask、Django）
Java（Spring Boot）
PHP（Laravel）
JavaScript（Node.js）

2. 数据库

用于存储数据。常用数据库有：

MySQL
MongoDB
PostgreSQL

五、项目实践

现在你已经掌握了网页开发的一些基本知识，让我们创建一个简单的项目。

1. 创建项目文件结构

my-website/
├── index.html
├── style.css
└── script.js

2. 编写 HTML 文件

在 index.html 中，加入基本的网页结构：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的网站</title><link rel="stylesheet" href="style.css">
</head>
<body><h1>欢迎来到我的网站！</h1><p>这是我的第一个项目。</p><button onclick="greet()">点击我</button><script src="script.js"></script>
</body>
</html>

3. 编写 CSS 文件

在 style.css 中，加入样式：

body {background-color: #f0f0f0;text-align: center;
}h1 {color: #2c3e50;
}button {padding: 10px 20px;font-size: 16px;background-color: #3498db;color: white;border: none;border-radius: 5px;cursor: pointer;
}

4. 编写 JavaScript 文件

在 script.js 中，加入交互逻辑：

function greet() {alert('欢迎来到我的网页！');
}

5. 运行项目

打开 index.html 文件，使用浏览器查看你创建的网页。

六、总结

通过本教程，你了解了网页开发的基本知识和工具。你可以继续深入学习，探索更复杂的功能和技术，例如响应式设计、框架（如 React、Vue.js）以及后端技术。

自己开发一个网站系列之-网页开发初识

自己开发一个网站系列之-网页开发初识欢迎来到网页开发的世界！在这个教程中，我们将介绍网页开发的基本概念、工具和技术，让你能够从零开始创建自己的网页。一、基础概念 1. 什么是网页？ 网页是通过互联网进行访问的文档&#…...

编程日记 2024/9/26 16:27:41

【代码随想录训练营第42期 Day61打卡 - 图论Part11 - Floyd 算法与A * 算法

目录一、Floyd算法与A * 算法 1、Floyd算法思想伪代码 2、 A * 算法思想伪代码二、经典题目题目一：卡码网 97. 小明逛公园题目链接题解：Floyd 算法题目二：卡码网 127. 骑士的攻击题目链接题解：A * 算法&a…...

编程日记 2024/9/26 16:26:40

docker和ufw冲突问题

在ubuntu上部署的docker映射的端口，开启防火墙ufw后，在未放通的状态下，还是可以访问解决办法： 在/etc/docker/daemon.json添加如下配置 {"iptables": false } 然后重启docker服务即可 systemctl daemon-reload s…...

编程日记 2024/9/26 16:22:36

Java（基本数据类型）（￣︶￣）↗

Java 基本数据类型是Java编程语言中用于存储数据值的基本单位。它们直接映射到硬件的处理器上，因此访问速度非常快。Java中的基本数据类型分为四大类：整型、浮点型、字符型、布尔型。每种类型都有其固定的范围和存储大小。一、整型 1）byte…...

编程日记 2024/9/26 16:18:32

283. 移动0

class Solution(object):def moveZeroes(self, nums):""":type nums: List[int]:rtype: None Do not return anything, modify nums in-place instead."""# 两个指针，left, right,中间夹的都是0，# 像个虫子一样一纵一纵的…...

编程日记 2024/9/26 16:15:28

Mysql删库跑路，如何恢复数据？

问题删库跑路，数据还能恢复吗？ 我们经常听说某某被领导训斥了，对领导心生痛恨，然后登录 Mysql 删库跑路。对于闲聊中经常听说过的一个段子，在现实生活中是否真的发生过，如果发生了，我们该如何解…...

编程日记 2024/9/26 16:14:26

【HarmonyOS】应用引用media中的字符串资源如何拼接字符串

【HarmonyOS】应用引用media中的字符串资源如何拼接字符串一、问题背景： 鸿蒙应用中使用字符串资源加载，一般文本放置在resoutces-base-element-string.json字符串配置文件中。便于国际化的处理。当然小项目一般直接引用字符串，不需要加载s…...

编程日记 2024/9/26 16:11:22

打开ffmpeg编码器的时候报错：avcodec_open2（）返回-22

[h264_v4l2m2m 0x555555617a00] Could not find a valid device [h264_v4l2m2m 0x555555617a00] cant configure encoder 前言：先做一个操作，查找编码器的时候，使用名字查找的方式： const AVCodec *avcodec_find_encoder_by_n…...

编程日记 2024/9/26 16:10:20

加载R包 # devtools::install_github("XiaoLuo-boy/ggheatmap")library(ggheatmap) library(tidyr)数据 set.seed(123) df <- matrix(runif(225,0,10),ncol 15) colnames(df) <- paste("sample",1:15,sep "") rownames(df) <- sapp…...

编程日记 2024/9/26 16:09:18

springboot实战学习（7）(JWT令牌的组成、JWT令牌的使用与验证)

接着上篇博客的学习。上篇博客是在基本完成用户模块的注册接口的开发以及注册时的参数合法性校验的基础上，基本完成用户模块的登录接口的主逻辑以及提到了问题："用户未登录，需要通过登录，获取到令牌进行登录认证，…...

编程日记 2024/9/26 16:01:08

如何使用numpy反转数组

如何使用numpy反转数组 1、使用np.flip()函数可以使用flip(m, axisNone)函数来对数组进行反转： m:输入数组 axis:为None则行列都反转 axis:为0则反转行 axis:为1则反转列2、代码 import numpy as np# 创建一维数组 arr np.array([[1, 2, 3, 4, 5],[2, 2, 3, 4…...

编程日记 2024/9/26 16:00:07

Linux·进程概念(上)

1.操作系统任何计算机系统都包含一个基本的程序合集，称为操作系统(Operator System)。笼统的理解，操作系统包括： 内核(进程管理，内存管理，文件管理，驱动管理) 其他程序(函数库，shell程序) OS的…...

编程日记 2024/9/26 15:59:06

Javax Validation 自定义注解校验（身份证号校验）

一、场景分析我们使用 SpringMVC 在 Controller 层，对身份证号进行数据校验的话，经常采用以下方式： RestController RequiredArgsConstructor RequestMapping("member") public class MemberController {// 身份证号码正则表达式…...

编程日记 2024/9/26 15:58:05

nid修改orac库和实例名为jyc

由于库太大，并且要求修改源库的实例名，所以考虑采用nid方式重建控制文件，实现名称和路径的完美替换。 oracleJYCDB:/home/oracle/scripts> oracleJYCDB:/home/oracle/scripts>echo $ORACLE_SID orac oracleJYCDB:/home/oracle/scripts…...

编程日记 2024/9/26 15:55:02

无人机之模拟图传篇

无人机的模拟图传技术是一种通过模拟信号传输图像数据的方式，它通常使用无线电模块或专用通信协议进行数据传输。一、基本原理模拟图传技术的工作原理是将摄像头或相机设备采集到的图像数据，通过模拟信号的形式进行传输。这些模拟信号在传输过程中可能…...

编程日记 2024/9/26 15:54:01

Ubuntu 20.04安装pycharm2022及配置快捷方式

一、下载与安装 1. 下载在官网下载所需版本，如：下载 2022.3.3 - Linux (tar.gz) 2. 安装设置自定义安装路径(推荐在 /opt/ 路径下)并安装 mkdir -p ~/Documents/software/pycharm/ cd ~/Documents/software/pycharm/ mv ~/Downloads/pycharm-c…...

编程日记 2024/9/26 15:51:59

uni-app - - - - - 实现锚点定位和滚动监听功能（滚动监听功能暂未添加，待后续更新）

实现锚点定位和滚动监听功能 1. 思路解析2. 代码示例效果截图示例： 点击左侧menu，右侧列表数据实现锚点定位 1. 思路解析点击左侧按钮，更新右侧scroll-view对应的scroll-into-view的值，即可实现右侧锚点定位滚动右侧区域&am…...

编程日记 2024/9/26 15:48:55

wordpress迁移到别的服务器

wordpress论坛网站搭建于2023/11/16写的该文章一-配置环境配置LNMP（linuxnginxmysqlphpphpmyadmin）环境或者LAMP（apache） 可以选择集成了这些软件的套件下载链接：https://www.xp.cn/download.html 手动下载这…...

编程日记 2024/9/26 15:46:53

cefsharp新版本OnBeforeResourceLoad 禁止http自动跳转https显示404错误解决办法含代码

一、问题因项目需要，域名没有ssl证书，结果http访问时被强制定向到https前缀，结果会显示404 测试版本cefsharp126.x (x64) 框架 CefSharp.WinForms.NETCore 二、代码（核心代码）如果请求url是http，且目标是https时，则阻止请求 //判断请求变化 if (url.StartsWith(<…...

编程日记 2024/9/26 15:45:52