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

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

news 2026/5/18 0:26:03

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

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

一、基础概念

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）以及后端技术。

相关文章：

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

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

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

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

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

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

docker和ufw冲突问题

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

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

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

Java 基本数据类型是Java编程语言中用于存储数据值的基本单位。它们直接映射到硬件的处理器上&#xff0c;因此访问速度非常快。Java中的基本数据类型分为四大类&#xff1a;整型、浮点型、字符型、布尔型。每种类型都有其固定的范围和存储大小。 一、整型 1&#xff09;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."""# 两个指针&#xff0c;left, right,中间夹的都是0&#xff0c;# 像个虫子一样一纵一纵的…...

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

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

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

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

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

【HarmonyOS】应用引用media中的字符串资源如何拼接字符串 一、问题背景&#xff1a; 鸿蒙应用中使用字符串资源加载&#xff0c;一般文本放置在resoutces-base-element-string.json字符串配置文件中。便于国际化的处理。当然小项目一般直接引用字符串&#xff0c;不需要加载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 前言&#xff1a;先做一个操作&#xff0c;查找编码器的时候&#xff0c;使用名字查找的方式&#xff1a; const AVCodec *avcodec_find_encoder_by_n…...

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

R包：ggheatmap热图

加载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令牌的使用与验证)

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

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

如何使用numpy反转数组

如何使用numpy反转数组 1、使用np.flip()函数 可以使用flip(m, axisNone)函数来对数组进行反转&#xff1a; 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.操作系统 任何计算机系统都包含一个基本的程序合集&#xff0c;称为操作系统(Operator System)。笼统的理解&#xff0c;操作系统包括&#xff1a; 内核(进程管理&#xff0c;内存管理&#xff0c;文件管理&#xff0c;驱动管理) 其他程序(函数库&#xff0c;shell程序) OS的…...

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

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

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

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

nid修改orac库和实例名为jyc

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

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

无人机之模拟图传篇

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

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

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

一、下载与安装 1. 下载 在 官网 下载所需版本&#xff0c;如&#xff1a;下载 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. 代码示例 效果截图示例&#xff1a; 点击左侧menu&#xff0c;右侧列表数据实现锚点定位 1. 思路解析 点击左侧按钮&#xff0c;更新右侧scroll-view对应的scroll-into-view的值&#xff0c;即可实现右侧锚点定位滚动右侧区域&am…...

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

wordpress迁移到别的服务器

wordpress论坛网站搭建 于2023/11/16写的该文章 一-配置环境 配置LNMP&#xff08;linuxnginxmysqlphpphpmyadmin&#xff09;环境或者LAMP&#xff08;apache&#xff09; 可以选择集成了这些软件的套件 下载链接&#xff1a;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

RK 方案如何做到上电关机

针对RK方案&#xff0c;公版都是上电开机的&#xff0c;有时候有要求需要上电关机&#xff0c;按键开机&#xff0c;需要把PMU的VDC脚的相关电路去掉即可&#xff0c;只保留一个对地电容。这时候就是上电关机了。RP43/RP47/RP64 电阻都去掉。 沟通交流群QQ&#xff1a;71228861…...

编程日记 2024/9/26 15:43:49

终极免费离线OCR解决方案：Umi-OCR完整使用指南

终极免费离线OCR解决方案&#xff1a;Umi-OCR完整使用指南 【免费下载链接】Umi-OCR OCR software, free and offline. 开源、免费的离线OCR软件。支持截屏/批量导入图片&#xff0c;PDF文档识别&#xff0c;排除水印/页眉页脚&#xff0c;扫描/生成二维码。内置多国语言库。 …...

编程新知 2026/5/17 10:46:45

保姆级教程：在CentOS 7/8服务器上部署DrissionPage爬虫（含Chrome无头模式配置）

CentOS服务器上DrissionPage爬虫的工业级部署指南 1. 环境准备与Chrome浏览器安装 在CentOS服务器上部署基于DrissionPage的爬虫系统&#xff0c;首要任务是构建稳定可靠的浏览器运行环境。与个人开发环境不同&#xff0c;生产服务器通常需要面对无图形界面、资源受限等特殊场景…...

编程新知 2026/5/17 10:07:48

从日志到环境变量：根治 Android Studio AVD 启动报错“The emulator process has terminated”

1. 从错误弹窗到日志分析&#xff1a;定位问题的第一步 当你兴冲冲地打开Android Studio准备启动AVD&#xff08;Android Virtual Device&#xff09;时&#xff0c;突然弹出一个冰冷的提示框&#xff1a;"The emulator process has terminated"&#xff0c;这感觉就…...

编程新知 2026/5/17 10:01:30

手把手教你给STM32MP157开发板接上HDMI显示器（基于Sii9022A芯片与设备树配置）

STM32MP157开发板HDMI显示实战&#xff1a;从硬件连接到设备树配置全解析 引言 当你第一次拿到STM32MP157开发板时&#xff0c;最令人兴奋的莫过于看到图形界面在屏幕上亮起的那一刻。但现实往往很骨感——手头可能没有配套的LCD屏幕&#xff0c;而HDMI显示器却是大多数开发者桌…...

编程新知 2026/5/17 9:59:21

如何通过Jellyfin Android TV客户端打造家庭影院级媒体体验？

如何通过Jellyfin Android TV客户端打造家庭影院级媒体体验&#xff1f; 【免费下载链接】jellyfin-androidtv Android TV Client for Jellyfin 项目地址: https://gitcode.com/gh_mirrors/je/jellyfin-androidtv 想要在智能电视上享受专业的媒体管理体验吗&#xff1f;…...

编程新知 2026/5/17 9:42:49

用Keras和MNIST数据集，5分钟搞定一个图像去噪的CNN自编码器（附完整代码）

5分钟实战&#xff1a;用Keras构建图像去噪自编码器的极简指南 当一张布满噪点的老照片在AI处理后重现清晰画面时&#xff0c;这种"数字魔法"背后往往是自编码器在发挥作用。作为深度学习领域的瑞士军刀&#xff0c;自编码器不仅能用于图像去噪&#xff0c;还在数据压…...

编程新知 2026/5/17 9:35:58

AI Agent执行链路的安全机制：权限控制与沙箱隔离方案

AI Agent执行链路安全深度解析：权限控制与沙箱隔离全栈落地方案 摘要/引言 你有没有遇到过这些场景：刚上线的企业内部运维Agent被恶意Prompt注入后，直接调用了删除生产库的工具；你做的数据分析Agent被诱导执行了恶意Python代码，把公司的用户隐私数据传到了境外黑客服务器…...

编程新知 2026/5/17 9:33:56

Free-NTFS-for-Mac深度剖析：打破macOS与Windows文件系统壁垒的完整解决方案

Free-NTFS-for-Mac深度剖析&#xff1a;打破macOS与Windows文件系统壁垒的完整解决方案 【免费下载链接】Free-NTFS-for-Mac Nigate: An open-source NTFS utility for Mac. It supports all Mac models (Intel and Apple Silicon), providing full read-write access, mountin…...

编程新知 2026/5/17 9:22:50

NVIDIA Profile Inspector完整指南：200+隐藏设置解锁显卡极致性能

NVIDIA Profile Inspector完整指南&#xff1a;200隐藏设置解锁显卡极致性能 【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector 还在为游戏画面撕裂、输入延迟过高而烦恼吗&#xff1f;想要彻底掌控NVIDIA…...

编程新知 2026/5/17 8:34:37

从零构建本地化AI代码助手：架构、微调与工程实践

1. 项目概述&#xff1a;从零构建你自己的Claude代码助手最近在开发者社区里&#xff0c;一个名为“build-your-claude-code-from-scratch”的项目引起了我的注意。这个标题本身就充满了吸引力——它暗示着一种可能性&#xff1a;我们是否能够不依赖任何现成的、闭源的商业API&…...

编程新知 2026/5/17 7:44:39