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

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

news 2025/7/6 21:32:43

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

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

一、基础概念

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

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/6/16 11:04:37

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/6/17 5:20:48

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/7/6 12:46:50

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

编程新知 2025/7/5 22:22:50

解读《网络安全法》最新修订，把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

编程新知 2025/7/6 16:26:21

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

编程新知 2025/6/16 18:14:24

【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

编程新知 2025/7/4 20:41:08

uniapp 小程序 学习（一）

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...

编程新知 2025/7/5 3:16:22

【大厂机试题解法笔记】矩阵匹配

题目 从一个 N * M&#xff08;N ≤ M&#xff09;的矩阵中选出 N 个数&#xff0c;任意两个数字不能在同一行或同一列&#xff0c;求选出来的 N 个数中第 K 大的数字的最小值是多少。 输入描述 输入矩阵要求&#xff1a;1 ≤ K ≤ N ≤ M ≤ 150 输入格式 N M K N*M矩阵 输…...

编程新知 2025/7/6 3:29:37

关于 ffmpeg设置摄像头报错“Could not set video options” 的解决方法

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/148515355 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…...

编程新知 2025/7/6 9:11:46