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

网页前端开发（基础进阶1）

article 2025/9/20 18:58:15

颜色表示方法3种：

1.关键字：

color：green； gray red yellow

2.rgb表示法：红，绿，蓝三原色。rgb（r，g，b），r表示红色，g表示绿色，b表示蓝色。

color: rgb(87, 107, 149);

3.rgba表示法：是rgb表示法的进阶，rgb（r，g，b，a），r表示红色，g表示绿色，b表示蓝色，a表示透明度。（0表示完全透明，1表示完全不透明）

color: rgba(87, 107, 149,0.5);

4.十六进制表示法：rgb（r，g，b）的r范围在0--256之内。可以使用十六进制表示，范围00--ff。

color: ”#ff0000“;

文字处理 <p></p>表示一个段落

<body>

        <p>

                文本加粗
        <b>***网消息</b>

        <strong>***网消息</strong>

                文本加下划线

                <u>***网消息</u>

        <ins>***网消息</ins>

                文本倾斜

                <i>***网消息</i>

        <em>***网消息</em>

                文本加删除线

                <s>***网消息</s>

        <del>***网消息</del>

        </p>

</body>

文本加粗可使用<b>或者<strong>标签。

文本加下划线可使用<u>或者<ins>标签。

文本倾斜可使用<i>或者<em>标签。

文本加删除线可使用<s>或者<del>标签。

空格可使用 &nbsp；

< 可使用 &lt；

> 可使用 gt；

设置行高

<style>

p{

line-height:2;
}

</style>

对于段落，设置2倍行高。

首行缩进

<style>

p{

text-index：2em； //首行缩进2个字符
}

</style>

对于段落，首行缩进。

或直接使用&nbsp表示空格

<p>
<b>  ***网消息</b> //缩进两个空格

</p>

盒子模型

盒子：页面内所有元素（标签）都可以看作一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角，可以更方便的进行页面布局。

盒子模型的组成：内容区域（content），内边距区域(padding)，边框区域(border)，外边距区域(margin)。

常用的2种标签：

1.div标签

一行只显示一个div标签（独占一行）

宽度默认为父元素的宽度，高度默认撑开

可以设置宽高（width，height）

2.span标签

一行可以显示多个span标签

宽度和高度默认由内容撑开

不可以设置宽高（width，height）

盒子模型通常使用div标签包裹整个内容，统一调节其宽高以及各种边距。

示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>员工管理</title><style>#all{width: 80%;margin: 0 auto;}.navbar{background-color: rgb(170, 170, 170);display: flex;/*弹性布局*/justify-content: space-between;/*左右对齐*/align-items: center;/*垂直居中*/padding: 5px;}.navbar h1{margin: 0;/*去掉h1标签的默认间距*/font-weight: bold;/*加粗*/color: white;/*白色文字*/font-family: "楷体";}.navbar a{color: white;font-weight: bold;/*加粗*/text-decoration: none;/*取消下划线*/align-items: center;/*垂直居中*/}.search-from{display: flex;flex-wrap: nowrap;/*换行*/align-items: center;/*垂直居中*/gap: 10px;/*间距*/margin-top: 10px;margin-bottom: 10px;}.search-from input,select{padding: 5px;width: 220px;}table{width: 100%;border-collapse: collapse;}th,td{border: 1px solid rgb(0, 0, 0);/*边框*/padding: 5px;text-align: center;}.footer{background-color: #b5b3b3;color: white;text-align: center;padding: 10px 0;margin-top: 30px;}</style>
</head>
<body>
<div id="all"><div class="navbar"><h1>tlias 智能学习辅助系统</h1><a href="">退出登录</a></div><form class="search-from" action="/search" method="post"><label for="name">姓名：</label><input type="text" name="name" id="name" placeholder="请输入姓名"><label for="gender">性别：</label><select name="gender" id="genser"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">职位：</label><select name="position" id="position"><option value=""></option><option value="1">班主任</option><option value="2">讲师</option><option value="3">学工主管</option><option value="4">教研主管</option><option value="5">咨询师</option></select><button type="submit">查询</button><button type="reset">清空</button></form><table><!--  表头  --><thead><!-- 定义一行 --><tr><th>姓名</th><th>性别</th><th>头像</th><th>职位</th><th>入职日期</th><th>最后操作时间</th><th>操作</th></tr></thead><tbody><tr><td>张三</td><td>男</td><td><img src="img/y2.png"></td><td>班主任</td><td>2020-01-01</td><td>2025-01-01</td><td><button type="button">修改</button><button type="button">删除</button></td></tr><tr><td>李四</td><td>女</td><td><img src="img/y2.png"></td><td>讲师</td><td>2020-01-01</td><td>2025-01-01</td><td><button type="button">修改</button><button type="button">删除</button></td></tr><tr><td>王五</td><td>男</td><td><img src="img/y2.png"></td><td>班主任</td><td>2020-01-01</td><td>2025-01-01</td><td><button type="button">修改</button><button type="button">删除</button></td></tr></tbody></table><footer class="footer"><p>cyy有限公司</p><p>版权，时间2025.5.9</p></footer>
</div>
</body>
</html>

运行结果：

网页前端开发（基础进阶1）

颜色表示方法3种： 1.关键字： color：green； gray red yellow 2.rgb表示法：红，绿，蓝三原色。rgb（r，g，b），r表示红色，g表示绿…...

编程日记 2025/9/18 16:23:02

const ‘不可变’到底是值不变还是地址不变

const的基础规则声明时必须初始化 const a; // ❌ 报错：Missing initializer in const declaration const b 10; // ✅ 正确块级作用域（const 的作用域仅限于声明它的代码块） if (true) {const x 100; } console.log(x); // ❌ 报错…...

编程日记 2025/7/28 22:13:57

如何找到一条适合自己企业的发展之路？

一个创业型的企业，开始就需要面向市场，通过自己的服务或产品，帮助用户解决问题，为客户创造价值，通过为客户创造的价值，出创造一定的的现金流，让企业存活下来！ 企业的运营过程中&…...

编程日记 2025/9/18 17:07:10

Vue-数据监听

数据监听基础信息代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>数据监听</title><script type"text/javascript" src"../js/vue.js&qu…...

编程日记 2025/9/18 1:57:40

当前用户的Git全局配置情况：git config --global --list

通过config命令可以查询当前用户的全局配置情况。这些配置项定义了 Git 在全局范围内的行为，包括如何处理大文件、SSL 证书验证以及提交时的用户信息。 git config --global --list http.sslVerifyfalse 这个配置项禁用了 SSL 证书验证。这在与自签名证书的 Git 服…...

编程日记 2025/9/18 4:36:16

AI生态警报：MCP协议风险与应对指南（中）——MCP Server运行时安全

作为连接AI模型与外部工具的“USB-C接口”，MCP协议成为AI生态的核心枢纽，其安全风险已从理论威胁转化为实际攻击目标。 AI生态警报：MCP协议风险与应对指南（上）——架构与供应链风险https://blog.csdn.net/WangsuSecur…...

编程日记 2025/9/18 20:53:35

day15 leetcode-hot100-29（链表8）

19. 删除链表的倒数第 N 个结点 - 力扣（LeetCode） 1.暴力法思路 （1）先获取链表的长度L （2）然后再次遍历链表到L-n的位置，直接让该指针的节点指向下下一个即可。 2.哈希表思路 &#xff0…...

编程日记 2025/9/18 0:49:43

DeepSeek 赋能文化遗产数字化修复：AI 重构千年文明密码

目录一、引言二、文化遗产数字化修复概述2.1 文化遗产数字化修复的意义2.2 传统数字化修复方法与局限三、DeepSeek 技术剖析3.1 DeepSeek 技术原理与核心优势3.2 相比其他技术的独特之处四、DeepSeek 在文化遗产数字化修复中的应用4.1 破损文物的智能修复4.2 文化遗产的虚拟…...

编程日记 2025/8/24 21:35:17

MonitorSDK_性能监控（从Web Vital性能指标、PerformanceObserver API和具体代码实现）

性能监控性能指标在实现性能监控前，先了解Web Vitals涉及的常见的性能指标 Web Vitals 是由 Google 推出的网页用户体验衡量指标体系，旨在帮助开发者量化和优化网页在实际用户终端上的性能体验。Web Vitals 强调“以用户为中心”的度量，而不…...

编程日记 2025/9/18 20:52:59

Spring Boot整合JWT实现认证与授权

概述 JSON Web Token (JWT) 是一种开放标准 (RFC 7519)，它定义了一种紧凑且自包含的方式，用于在各方之间安全地传输信息。在Web应用中，JWT常用于身份验证和信息交换。依赖配置首先需要在项目中添加JWT依赖： <!-- JWT依赖…...

编程日记 2025/7/3 22:11:20

在 Linux 系统上连接 GitHub 的方法 (适用2025年)

在2025年，使用 Linux 系统连接 GitHub 的推荐方式是通过 SSH (Secure Shell) 协议进行身份验证。这种方式不仅安全，还能免去每次操作时输入用户名和密码的繁琐。 🛠️ 步骤一：检查并安装 Git 首先，确保你的系统已安装…...

编程日记 2025/7/5 3:36:51

解决matlab两个库文件名冲突的问题

解决matlab两个库文件名冲突的问题 1、删除一个路径的文件（不推荐）2、改变优先级（让不想要的版本shadowed）3、更改文件名添加一个库，发现总是调用另一个库的同名文件，这是由于路径中优先级问题。 which -…...

编程日记 2025/8/11 4:22:22

PHP 垃圾回收机制解析与应用案例

PHP 垃圾回收机制解析与应用案例什么是 PHP 垃圾回收机制？ PHP 的垃圾回收（Garbage Collection, GC）机制是其内存管理的重要组成部分。它的主要职责是管理内存的分配与释放，尤其是处理复杂的循环引用问题，确保 PHP …...

编程日记 2025/8/6 19:33:42

es6 函数解构

对象的解构赋值是内部机制，先找回同名属性，再赋值给对应的变量，真正被赋值的是后者。 let node {type:Identifier,name:foo,loc:{start:{line:1,column:1},end:{line:1,column:4}},method:function(){console.log(method);},range:[0,3] };…...

编程日记 2025/9/9 22:26:46

offset三大家族

以下是关于 offset 三大家族的知识点总结： 1. offsetParent 定义：offsetParent 是距离目标元素最近的已定位（position 不为 static）的祖先元素。特点： 如果父级元素都没有定位，则 offsetParent 为 body。…...

编程日记 2025/7/27 23:30:22

RSTP介绍加实操

简介 STP协议虽然能够解决环路问题，但是收敛速度慢，影响了用户通信质量。如果STP网络的拓扑结构频繁变化，网络也会频繁失去连通性，从而导致用户通信频繁中断。IEEE于2001年发布的802.1w标准定义了快速生成树协议RSTP（R…...

编程日记 2025/7/6 4:31:36

Elasticsearch父子关系解析

引言在复杂业务场景中，数据关联查询是搜索与分析的核心需求。以电商订单、文章评论、客户关系等场景为例，传统关系型数据库通过外键实现的多表关联，在分布式搜索场景下面临性能与扩展性挑战。Elasticsearch通过父子关系（Parent-…...

编程日记 2025/7/6 3:03:57

33、请求处理【源码分析】Servlet API参数解析原理

33、请求处理【源码分析】Servlet API参数解析原理在 Spring Boot 中，请求处理过程中涉及到 **Servlet API 参数解析** 的核心机制，主要依赖于 HandlerMethodArgumentResolver 接口及其相关实现类。以下是其原理的详细分析： --- ### **1. 参…...

编程日记 2025/7/10 0:42:46

基于深度学习的三维图像生成项目开发方案

基于深度学习的三维图像生成项目开发方案一、项目概述本项目旨在开发一个基于生成对抗网络（GAN）的三维图像生成系统，能够从随机噪声中生成高质量的三维体素数据。该系统可应用于医学影像合成、游戏内容生成、材料科学等领域。二、技术架构 #mermaid-svg-JZqC6oWtS9sQ6…...

编程日记 2025/7/12 4:34:53

面试题——计算机网络：HTTP和HTTPS的区别？

HTTP（HyperText Transfer Protocol）：作为互联网上应用最广泛的网络通信协议，HTTP是基于TCP/IP协议族的应用层协议。它采用标准的请求-响应模式进行通信，通过简洁的报文格式（包含请求行、请求头、请求体等&a…...

编程日记 2025/8/19 22:42:23

Flutter 包依赖升级指南：让项目保持最新状态

在 Flutter 开发过程中，依赖项管理是确保项目顺利运行和持续优化的关键环节。依赖项是项目中不可或缺的外部库，它们提供了各种功能，从 UI 组件到数据处理工具，帮助开发者快速构建应用。然而，随着时间的推移&#xff0c…...

编程日记 2025/8/12 5:44:59

LeeCode 98. 验证二叉搜索树

给你一个二叉树的根节点 root ，判断其是否是一个有效的二叉搜索树。有效二叉搜索树定义如下： 节点的左子树只包含小于当前节点的数。节点的右子树只包含大于当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。提示： 树中节…...

编程日记 2025/9/18 0:49:15

JVM类加载高阶实战：从双亲委派到弹性架构的设计进化

前言作为Java开发者，我们都知道JVM的类加载机制遵循"双亲委派"原则。但在实际开发中，特别是在金融支付、插件化架构等场景下，严格遵循这个原则反而会成为系统扩展的桎梏。本文将带你深入理解双亲委派机制的本质，并分享…...

编程日记 2025/9/18 1:57:17

[网页五子棋][用户模块]数据库设计和配置(MyBatis)、约定前后端交互接口、服务器开发

文章目录数据库数据库设计配置 MyBatis1. Spring 配置2. 创建实体类3. 创建 Mapper 接口4. 使用 MyBatis 约定前后端交互接口登录接口注册接口获取用户信息服务器开发loginregistergetUserInfo完整代码数据库数据库设计完成注册登录以及用户分数管理使用数据库来保存上…...

编程日记 2025/8/6 13:23:26

maven编译时跳过test过程

如果代码里有无法在打包环境中测试的部分，则直接运行mvn clean package，因为测试失败，会导致打包失败。目前有两种方式可以跳过测试： 1. mvn clean package -DskipTests，这会跳过执行阶须，但仍会生成测试所…...

编程日记 2025/9/18 3:02:56

threejsPBR材质与纹理贴图

1. PBR材质简介本节课没有具体的代码，就是给大家科普一下PBR材质，所谓PBR就是，基于物理的渲染(physically-based rendering)。 Three.js提供了两个PBR材质相关的APIMeshStandardMaterial和MeshPhysicalMaterial,MeshPhysicalMaterial是Mes…...

编程日记 2025/9/18 13:46:53

深兰科技董事长陈海波受邀出席2025苏商高质量发展(常州)峰会，共话AI驱动产业升级

5月29日，2025苏商高质量发展峰会在常州隆重开幕。本次峰会聚焦新质生产力培育与产业创新转型，汇聚了众多江苏省内知名企业家、专家学者及政府代表。深兰科技创始人、董事长陈海波作为人工智能领域的领军企业代表，受邀出席盛会并参与重要活动环…...

编程日记 2025/9/18 21:00:41

【计算机网络】子网划分

文章目录【计算机网络】子网划分（知识点详细）一、子网划分基础概念1. **为什么需要子网划分？**2. **关键术语** 二、子网划分核心原理1. **借位规则**2. **子网划分步骤** 三、子网划分实战案例案例1：标准C类网划分（等…...

编程日记 2025/9/18 12:41:28

Git入门到精通：30分钟掌握核心技巧

目录一、基础理论片 Git简介 Git安装 Git仓库 Git基本命令用法仓库别名二、实操命令篇远程分支分支的新建和合并实操演示 1 本地新建仓库 2 gitee新建仓库 3 建立关系 4 新建分支 5 开发新功能 6 推送新分支 7 合并新分支到主分支三、可视化工具篇 G…...

编程日记 2025/9/7 7:21:17

Redis7底层数据结构解析

redisObject 在 Redis 的源码中，Redis 会将底层数据结构（如 SDS、hash table、skiplist 等）统一封装成一个对象，这个对象叫做 redisObject，也简称 robj。 typedef struct redisObject {unsigned type : 4; // 数…...

编程日记 2025/9/11 12:41:35

相关文章：