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

Web网页制作（静态网页）：千年之恋

article 2026/3/12 4:13:32

一、是用的PyCharm来写的代码

二、代码中所用到的知识点（无 js）

这段HTML代码展示了一个简单的注册页面，包含了多个HTML元素和CSS样式的应用。

这段HTML代码展示了一个典型的注册页面，包含了常见的HTML元素和表单控件。通过CSS样式表，可以进一步美化页面布局和样式。虽然代码中没有直接使用JavaScript，但可以通过添加JavaScript来实现更复杂的交互功能。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>千年之恋</title><link href="css/style06.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="head"><img src="images/logo.jpg"/>
</div>
<div id="nav_bg"><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">会员</a></li><li><a href="#">活动</a></li><li><a href="#">直播</a></li><li><a href="#">视频</a></li><li><a href="#" class="bg">注册</a></li></ul>
</div>
<div id="banner"><img src="images/banner.jpg"/>
</div>
<div id="content"><h2 class="step">注册步骤：</h2><form action="#" method="post" class="one"><h3>您的帐号信息：</h3><table class="content"><tr><td class="left">注册方式：</td><td><label for="one"><input type="radio" name="sex" id="one"/>E-mail注册</label>&nbsp;&nbsp;&nbsp;&nbsp;<label for="two"><input type="radio" name="sex" id="two"/>手机号码注册</label></td></tr><tr><td class="left">注册邮箱：</td><td><input type="text" class="right" /></td></tr><tr><td class="left">注册手机：</td><td><input type="text" class="right" /></td></tr><tr><td class="left">登陆密码：</td><td><input type="password" maxlength="8" class="right" /></td></tr><tr><td class="left">昵称：</td><td><input type="text" class="right" /></td></tr></table><h3>您的个人信息：</h3><table class="content"><tr><td class="left">性别：</td><td><label for="boy"><input type="radio" name="sex" id="boy" />男</label>&nbsp;&nbsp;&nbsp;&nbsp;<label for="girl"><input type="radio" name="sex" id="girl" />女</label></td></tr><tr><td class="left">学历：</td><td><select><option>-请选择-</option><option>中职/高中</option><option>专科/本科</option><option>硕士研究生</option><option>博士研究生</option></select></td></tr><tr><td class="left">所在城市：</td><td><select><option>-请选择-</option><option selected="selected">北京</option><option>上海</option><option>广州</option><option>深圳</option></select></td></tr><tr><td class="left">兴趣爱好：</td><td><input type="checkbox" />足球&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" />篮球&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" />游泳&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" />唱歌&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" />跑步&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" />瑜伽</td></tr><tr><td class="left">自我介绍：</td><td><textarea cols="60" rows="8">评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。</textarea></td></tr><tr><td colspan="2"><input type="button" class="btn" /></td></tr></table></form>
</div>
<div id="footer"><p>Copyright &copy 2020-2030 QIANNIANZHLIANcom, All rights reserved.<br />2020-2030,版权所有千年之恋 85CP 备 3333</p>
</div>
</body>
</html>

1. HTML文档结构

<!DOCTYPE html>：声明文档类型为HTML5。
<html lang="en">：定义HTML文档的根元素，并设置语言为英语。
<head>：包含文档的元数据，如字符集、标题和外部样式表链接。
<body>：包含网页的可见内容。

2. 元数据

<meta charset="UTF-8">：指定文档的字符编码为UTF-8。
<title>千年之恋</title>：设置网页的标题，显示在浏览器的标签页上。
<link href="css/style06.css" type="text/css" rel="stylesheet">：链接外部CSS样式表文件style06.css，用于定义页面的样式。

3. 页面结构

头部 (<div id="head">)
- 包含一个图片 (<img src="images/logo.jpg"/>)，用于显示网站的Logo。
导航栏 (<div id="nav_bg">)
- 使用无序列表 (<ul>) 创建导航栏，每个列表项 (<li>) 包含一个链接 (<a>)，指向不同的页面或功能。
- 最后一个链接 (<a href="#" class="bg">注册</a>) 有一个额外的类bg，可能是用于特殊样式。
横幅 (<div id="banner">)
- 包含一个图片 (<img src="images/banner.jpg"/>)，用于显示网站的横幅广告或宣传图。
内容区域 (<div id="content">)
- 包含一个表单 (<form>)，用于用户注册。
- 表单分为两个部分：
  - 账号信息：包括注册方式（邮箱或手机）、注册邮箱、注册手机、登录密码和昵称。
  - 个人信息：包括性别、学历、所在城市、兴趣爱好和自我介绍。
- 使用表格 (<table>) 来布局表单内容，每个表行 (<tr>) 包含表头 (<td class="left">) 和输入字段 (<td>)。
页脚 (<div id="footer">)
- 包含版权信息 (<p>)，显示网站的版权声明和备案信息。

4. 表单元素

单选按钮 (<input type="radio">)
- 用于选择注册方式（邮箱或手机）和性别（男或女）。
- name="sex" 用于将单选按钮分组，确保同一组中只能选择一个选项。
文本输入框 (<input type="text">)
- 用于输入注册邮箱、注册手机和昵称。
密码输入框 (<input type="password">)
- 用于输入登录密码，输入内容会被隐藏。
下拉菜单 (<select>)
- 用于选择学历和所在城市。
- <option> 定义下拉菜单中的选项，selected="selected" 设置默认选中的选项。
复选框 (<input type="checkbox">)
- 用于选择兴趣爱好，用户可以多选。
文本域 (<textarea>)
- 用于输入自我介绍，用户可以输入多行文本。
按钮 (<input type="button">)
- 用于提交表单，但当前代码中没有指定按钮的文本或功能。

5. CSS类

class="bg"：可能用于为“注册”链接添加特殊样式。
class="one"：可能用于为表单添加样式。
class="left" 和 class="right"：可能用于对齐表格中的内容。
class="btn"：可能用于为按钮添加样式。

6. HTML属性

id：用于唯一标识元素，如id="head"、id="nav_bg"等。
name：用于表单元素的名称，如name="sex"。
maxlength：限制输入框的最大字符数，如maxlength="8"限制密码长度为8个字符。
cols 和 rows：定义文本域的列数和行数。

7. HTML实体

©：显示版权符号（©）。
 ：表示不换行空格，用于在文本中插入空格。

8. CSS样式

虽然代码中链接了外部样式表 (style06.css)，但具体的样式规则没有在代码中展示。样式表可能定义了页面布局、颜色、字体等样式。

9. JavaScript交互

代码中没有直接使用JavaScript，但可以通过<input type="button">或其他事件触发JavaScript函数，实现表单验证或提交功能。

三、CSS代码（内有注释详解）

/* 全局样式：重置所有元素的外边距、内边距、列表样式、轮廓线、边框和背景 */
* {margin: 0; padding: 0; list-style: none; /* 去除列表项的项目符号 */outline: none; /* 去除元素聚焦时的轮廓线 */border: 0; /* 去除所有元素的边框 */background: none; /* 去除所有元素的背景 */
}/* 页面整体样式：设置默认字体和字体大小 */
body {font-family: "微软雅黑"; /* 设置页面默认字体为“微软雅黑” */font-size: 14px; /* 设置页面默认字体大小为14像素 */
}/* 链接样式：设置未访问和已访问链接的样式 */
a:link, a:visited {text-decoration: none; /* 去除链接的下划线 */color: #fff; /* 设置链接文字颜色为白色 */font-size: 16px; /* 设置链接文字大小为16像素 */
}/* 头部样式：设置页面头部的宽度、高度、居中和顶部内边距 */
#head {width: 980px; /* 设置头部宽度为980像素 */height: 70px; /* 设置头部高度为70像素 */margin: 0 auto; /* 水平居中 */padding-top: 20px; /* 设置顶部内边距为20像素 */
}/* 导航栏背景样式：设置导航栏背景的宽度、高度和背景颜色 */
#nav_bg {width: 100%; /* 宽度占满父容器 */height: 48px; /* 设置高度为48像素 */background: #fe668f; /* 设置背景颜色为粉色 */
}/* 导航栏内容样式：设置导航栏内容的宽度和居中 */
.nav {width: 980px; /* 设置宽度为980像素 */margin: 0 auto; /* 水平居中 */
}/* 导航栏列表项样式：设置列表项左浮动（横向排列） */
.nav li {float: left; /* 左浮动，使列表项横向排列 */
}/* 导航栏链接样式：设置链接的显示方式、高度、内边距和文字垂直居中 */
a {display: inline-block; /* 将链接设置为行内块元素 */height: 48px; /* 设置高度为48像素 */padding: 0 50px; /* 设置左右内边距为50像素 */line-height: 48px; /* 设置行高为48像素，使文字垂直居中 */
}/* 特殊链接样式：为特定链接（如“注册”）设置背景颜色 */
.bg {background: #fe9ab5; /* 设置背景颜色为浅粉色 */
}/* 链接悬停样式：设置鼠标悬停时链接的背景颜色 */
a:hover {background: #fe9ab5; /* 鼠标悬停时背景颜色变为浅粉色 */
}/* 横幅样式：设置横幅的宽度和居中 */
#banner {width: 980px; /* 设置宽度为980像素 */margin: 0 auto; /* 水平居中 */
}/* 内容区域样式：设置内容区域的宽度、高度、背景图片、居中和左侧内边距 */
#content {width: 830px; /* 设置宽度为830像素 */height: 934px; /* 设置高度为934像素 */background: url(../images/content_bg.jpg) no-repeat; /* 设置背景图片，不重复 */margin: 0 auto; /* 水平居中 */padding-left: 150px; /* 设置左侧内边距为150像素 */
}/* 注册步骤标题样式：设置标题的宽度、高度、字体大小、颜色、背景图片和文字垂直居中 */
.step {width: 454px; /* 设置宽度为454像素 */height: 80px; /* 设置高度为80像素 */font-size: 20px; /* 设置字体大小为20像素 */font-weight: 100; /* 设置字体粗细为100（较细） */color: #dd8787; /* 设置文字颜色为浅红色 */background: url(../images/step.jpg) center right no-repeat; /* 设置背景图片，居中靠右，不重复 */line-height: 80px; /* 设置行高为80像素，使文字垂直居中 */
}/* 表单标题样式：设置表单标题的宽度、高度、字体大小、颜色、下边框和文字垂直居中 */
h3 {width: 444px; /* 设置宽度为444像素 */height: 45px; /* 设置高度为45像素 */font-size: 20px; /* 设置字体大小为20像素 */font-weight: 100; /* 设置字体粗细为100（较细） */color: #dd8787; /* 设置文字颜色为浅红色 */line-height: 45px; /* 设置行高为45像素，使文字垂直居中 */border-bottom: 1px solid #dd8787; /* 设置底部边框为1像素浅红色实线 */
}/* 表格单元格样式：设置单元格的高度和文字颜色 */
td {height: 50px; /* 设置高度为50像素 */color: #dd8787; /* 设置文字颜色为浅红色 */
}/* 左侧单元格样式：设置左侧单元格的宽度和文字右对齐 */
.left {width: 120px; /* 设置宽度为120像素 */text-align: right; /* 文字右对齐 */
}/* 右侧输入框样式：设置右侧输入框的宽度、高度和边框 */
.right {width: 320px; /* 设置宽度为320像素 */height: 28px; /* 设置高度为28像素 */border: 1px solid #dd8787; /* 设置边框为1像素浅红色实线 */
}/* 输入框垂直对齐样式：设置输入框内容垂直居中 */
input {vertical-align: middle; /* 垂直居中 */
}/* 下拉菜单样式：设置下拉菜单的宽度、边框和文字颜色 */
select {width: 171px; /* 设置宽度为171像素 */border: 1px solid #dd8787; /* 设置边框为1像素浅红色实线 */color: #dd8787; /* 设置文字颜色为浅红色 */
}/* 文本域样式：设置文本域的宽度、边框、禁止调整大小、字体大小、颜色和内边距 */
textarea {width: 380px; /* 设置宽度为380像素 */border: 1px solid #dd8787; /* 设置边框为1像素浅红色实线 */resize: none; /* 禁止用户调整文本域大小 */font-size: 12px; /* 设置字体大小为12像素 */color: #aaa; /* 设置文字颜色为灰色 */padding: 20px; /* 设置内边距为20像素 */
}/* 按钮样式：设置按钮的宽度、高度和背景图片 */
.btn {width: 408px; /* 设置宽度为408像素 */height: 76px; /* 设置高度为76像素 */background: url(../images/btn.jpg) right center no-repeat; /* 设置背景图片，靠右居中，不重复 */
}/* 页脚样式：设置页脚的宽度、高度、背景颜色、文字颜色、居中和顶部内边距 */
#footer {width: 100%; /* 宽度占满父容器 */height: 68px; /* 设置高度为68像素 */line-height: 26px; /* 设置行高为26像素 */background: #fe668f; /* 设置背景颜色为粉色 */color: #fff; /* 设置文字颜色为白色 */text-align: center; /* 文字居中 */padding-top: 40px; /* 设置顶部内边距为40像素 */
}

四、运行出来的网页。

Web网页制作（静态网页）：千年之恋

一、是用的PyCharm来写的代码二、代码中所用到的知识点（无 js） 这段HTML代码展示了一个简单的注册页面，包含了多个HTML元素和CSS样式的应用。这段HTML代码展示了一个典型的注册页面，包含了常见的HTML元素和表单控件。通过CSS样…...

编程日记 2026/2/14 23:14:10

JVM 的不同组成部分分别有什么作用？

JVM（Java Virtual Machine）主要由以下几个核心组成部分构成： 1. 类加载器子系统 (Class Loader Subsystem): 作用： 加载类： 负责查找并加载 Java 类文件（.class 文件）到 JVM 中。类文件可以来…...

编程日记 2026/2/14 17:02:37

正则表达式 - 修饰符

正则表达式 - 修饰符正则表达式是一种强大的文本处理工具，它广泛应用于数据验证、文本搜索、替换、匹配等场景。在正则表达式中，修饰符是用于调整正则表达式行为的特殊字符。本文将详细解析正则表达式中的常用修饰符，帮助读者更好地理解和运用正则表达式。 1. 字符串定位…...

编程日记 2026/2/15 4:07:51

K8s 1.27.1 实战系列（十二）Ingress

一、Ingress介绍 1、Ingress 的核心概念 Ingress 是 Kubernetes 中管理外部流量访问集群内服务的 API 对象，通过 7 层（HTTP/HTTPS）协议实现流量路由、负载均衡和 SSL 终止。它弥补了传统 Service（如 NodePort 和 LoadBalancer）的不足，例如端口占用过多、不支持路径路由…...

编程日记 2026/3/10 1:30:27

tomcat应用的作用以及安装，以及tomcat软件的开机自启动。

一.tomcat介绍 1.作用 tomcat是一款用来部署网站服务器的一款软件。动态网站主流语言： PHP, lamp/lnmp平台 Java语言，运行在tomcat平台。【只要这个网站或者软件是Java语言写的，我们都可以在tomcat平台上去运行这个java程序。】网站是…...

编程日记 2026/3/8 10:43:25

Unity中WolrdSpace下的UI展示在上层

一、问题描述 Unity 中 Canvas使用World Space布局的UI，想让它不被3d物体遮挡，始终显示在上层。二、解决方案使用shader解决在 UI 的材质中禁用深度测试（ZTest），强制 UI 始终渲染在最上层。 Shader "Custo…...

编程日记 2026/3/11 13:46:03

目录索引查看索引创建删除索引修改数据库时区索引查看索引 select * from pg_indexes where tablenamet_table_data; 或者 select * from pg_statio_all_indexes where relnamet_table_data; 创建 CREATE INDEX ix_table_data_time ON t_table_data (id, crea…...

编程日记 2026/1/26 19:27:00

Redis的缓存雪崩、缓存击穿、缓存穿透与缓存预热、缓存降级

一、缓存雪崩： 1、什么是缓存雪崩： 如果缓在某一个时刻出现大规模的key失效，那么就会导致大量的请求打在了数据库上面，导致数据库压力巨大，如果在高并发的情况下，可能瞬间就会导致数据库宕机。这时候如果…...

编程日记 2026/3/11 14:13:24

【SpringMVC】常用注解：@RequestParam

1.作用如果控制器标注的方法的参数名称与前端传递过来的参数名称不一致，使得SpringMVC无法自动启动，那么我们可以使用该注解实现前后端参数的绑定。 2.相关属性 value/name：这两个属性都是一个作用，都是描述参数的名称&#x…...

编程日记 2026/2/27 12:53:13

JVM垃圾收集器相关面试题（1）

垃圾收集与内存管理摘要一.核心垃圾收集算法对比算法原理优点缺点适用场景标记-清除两次遍历（标记存活对象→清除未标记对象）实现简单内存碎片化、双遍历效率低老年代（结合整理）标记-复制内存对半分，存活对象复制到…...

编程日记 2026/2/14 19:13:10

详解SQL数据查询功能

数据查询一、单表查询1. 选择表中的若干列2. 选择表中的若干元组3. ORDER BY 子句4. 聚合函数5. GROUP BY 子句6. LIMIT 子句综合示例： 二、多表查询1. 等值连接查询 (Equi-Join)2. 非等值连接查询 (Non-Equi Join)3. 自然连接查询 (Natural Join)4. 复合条件连接…...

编程日记 2025/7/24 7:50:36

车载以太网测试-11【网络层-ICMP协议】

目录 1 摘要2 ICMP协议帧结构2.1 IP头部2.2 ICMP头部2.3 ICMP数据部分2.4 示例：ICMP回显请求（Ping请求） 3 ICMP协议在车载以太网的应用3.1 为什么需要ICMP？3.1.1 网络连通性测试3.1.2 错误报告3.1.3 网络性能监测3.1.4 路径MTU发现…...

编程日记 2026/2/16 4:29:02

leetcode:728. 自除数（python3解法）

难度：简单自除数是指可以被它包含的每一位数整除的数。例如，128 是一个自除数 ，因为 128 % 1 0，128 % 2 0，128 % 8 0。自除数不允许包含 0 。给定两个整数 left 和 right ，返回一个列表&#xff…...

编程日记 2026/3/11 13:17:44

【QT】-一文读懂抽象类

抽象类（Abstract Class）是面向对象编程中的一个概念，指的是无法被实例化的类，它通常作为其他类的基类。抽象类的作用是定义一个接口（或约定），让派生类（继承自抽象类的类）来实现具体的功能。抽象类的特点：包含纯虚函数（Pure Virtual Function）：抽象类通常包含一…...

编程日记 2026/2/15 7:50:49

vue3-computed计算属性和reactive响应式系统结合使用

1.前言 vue3中使用reactive函数创建一个响应式对象，当对象数据发生变化的时候，依赖这些数据的计算属性和模板会自动的更新。 2.实例 2.1 简写 <template><div><p>用户名: {{ userName }}</p><p>用户名的大写形式: {{ u…...

编程日记 2026/3/10 1:49:05

Dubbo请求调用本地服务

文章目录前言配置 Dubbo 本地调用方法一：application.yml 中配置方法二：DubboReference 注解中指定注意个人简介前言在微服务架构中，Apache Dubbo 作为一款高性能、轻量级的 RPC 框架，被广泛应用于分布式系统。通常&#xff…...

编程日记 2026/3/5 5:34:29

Pycharm 社区版安装教程

找到安装包双击安装文件---点击下一步一般路径是：C:\Rambo\Software\Development 选择完成后就是如下地址： C:\Rambo\Software\Development\PyCharm Community Edition 2024.3.3 点击上述3个位置就可以了----下一步等待安装就可以了---完成后点击完成…...

编程日记 2026/2/15 8:24:06

Linux红帽：RHCSA认证知识讲解（六）创建、管理和删除本地用戶和组

Linux红帽：RHCSA认证知识讲解（六）创建、管理和删除本地用戶和组前言一、用户和组概念用户类型对比表格主要组和补充组对比表格： 二、本地用户账户增删改查三、本地组账户前言上篇博客我们详细了解了从红帽和 DNF 软件仓库下载…...

编程日记 2026/2/25 16:26:09

在虚拟环境里面配置Linux系统

Linux系统有很多版本，常用的有Ubantu乌班图，和CentOS 不同的版本在使用的时候，有部分执行方式的不同安装的流程都一样首先，想要安装Ubantu，要去它的官网，找下载连接，然后下载iso后缀的安装…...

编程日记 2026/3/11 21:25:00

React开发指南：核心、实践与案例

文章目录一、React核心架构与设计哲学1.1 虚拟DOM与Diff算法1.2 JSX编译原理1.3 组件化设计模式1.4 Fiber架构解析1.5 组件生命周期（类组件） 二、React核心特性详解2.1 数据流管理2.2 Hooks革命2.3 Context API进阶2.4 自定义Hooks设计模式三、React 1…...

编程日记 2026/3/6 20:19:23

分享vue好用的pdf 工具实测

vue3-pdf-app： 带大纲，带分页，带缩放，带全屏，带打印，带下载，带旋转下载依赖： yarn add vue3-pdf-appornpm install vue3-pdf-app 配置类： 创建文件 pdfConfig.ts /…...

编程日记 2026/3/12 4:11:27

Redis分布式锁深度剖析：从原理到Redisson实战，破解脑裂与高并发锁难题

一、📌 分布式锁的核心应用场景场景类型典型案例风险说明🚀 高并发场景电商秒杀、票务抢购库存超卖风险⏰ 定时任务场景集群日志清理、数据统计任务重复执行🔄 幂等场景支付接口重试、订单创建资金重复扣款二、🔧 Redis分布式锁…...

编程日记 2026/2/14 18:22:34

Markdown Poster – 免费Markdown转图片工具｜优雅图文海报制作与社交媒体分享

Markdown Poster是什么 Markdown Poster 是一款高效的 Markdown 转图片工具，利用灵活编辑和实时预览功能帮助用户轻松制作优雅的图文海报。该工具内置丰富的海报模板和多种主题选项，支持导出为图片和 HTML 代码，适用于社交媒体分享、网站集成…...

编程日记 2026/2/14 18:21:30

掌握市场先机：9款销售渠道管理工具深度测评

本文主要介绍了以下9款销售渠道管理工具：1.纷享销客； 2.销帮帮； 3.小满CRM； 4.有赞； 5.Oracle NetSuite； 6.Salesforce Sales Cloud； 7.Cin7； 8.Pipedrive； 9.BigCommerc…...

编程日记 2026/2/24 9:09:21

OpenCV图像加权函数：addWeighted

1 addWeighted函数在OpenCV 里，addWeighted 函数的作用是对两个图像进行加权求和，常用于图像融合、图像过渡等场景。函数如下： cv2.addWeighted(src1, alpha, src2, beta, gamma[, dst[, dtype]])2 参数解释 src1：第一个输入图…...

编程日记 2026/3/11 20:39:31

直方图（信息学奥赛一本通-1115）

【题目描述】给定一个非负整数数组，统计里面每一个数的出现次数。我们只统计到数组里最大的数。假设 Fmax（Fmax<10000）是数组里最大的数，那么我们只统计{0,1,2.....Fmax}里每个数出现的次数。【输入】第一行n是数组的大小。…...

编程日记 2026/2/14 18:27:53

docker桌面版启动redis，解决无法连接

docker run -d --name redis -p 6379:6379 -v E:\2\redis\redis.conf:/usr/local/etc/redis/redis.conf redis redis-server /usr/local/etc/redis/redis.conf 在本地创建一个目录，里面有个redis.conf文件，内容如下，启动时绑定这个配置文件目…...

编程日记 2026/3/11 11:40:15