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

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

news 2026/2/9 16:22:19

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

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

一、基础概念

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

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/11/16 19:06:23

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/12/3 20:14:32

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/2/7 5:37:17

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/12/12 0:56:22

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/28 11:11:03

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

编程新知 2026/1/31 5:30:51

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/11/15 1:41:43

系统掌握PyTorch：图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

编程新知 2026/2/7 23:15:50

【WebSocket】SpringBoot项目中使用WebSocket

1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖&#xff0c;添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...

编程新知 2025/9/20 3:28:39

C++_哈希表

本篇文章是对C学习的哈希表部分的学习分享 相信一定会对你有所帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、基础概念 1. 哈希核心思想&#xff1a; 哈希函数的作用&#xff1a;通过此函数建立一个Key与存储位置之间的映射关系。理想目标&#xff1a;实现…...

编程新知 2026/1/28 11:27:52