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

前端框架（三件套）

news 2026/6/1 6:35:14

学习网站

HTML 系列教程（有广告）

HTML（超文本标记语言） | MDN (mozilla.org)（英文不太友好）

1.HTML5  &  CSS3

1.1HTML5表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table表格</title><style>p {text-align: center;}h1 {text-align: center;}table {margin: 0 auto;border-collapse: collapse; /* 合并边框，使边框线条更精细 */}td {text-align: center;vertical-align: middle;border: 1px solid black; /* 设置边框为 1 像素宽的实线黑线 */}</style>
</head>
<body>
<h1>三（1）班课程表</h1>
<p>2018学年度第一学期</p>
<!--输入文字用段落标签-->
<table border="1"><tr><th>     </th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr><td >早读<br>7:50 - 8:10</td><td >语文</td><td >数学</td><td >英语</td><td >语文</td><td >语文</td></tr><tr><td colspan="6">大课间    8:10 - 8:40</td></tr><tr><td>第一节<br><br>8:50 - 9:30</td><td>语文</td><td>数学</td><td>英语</td><td>语文</td><td>数学</td></tr><tr><td colspan="6">眼保健操   9:30 - 9:40</td></tr><tr><td>第二节<br><br>9:45 - 10:25</td><td>语文</td><td>体育</td><td>体育</td><td>语文</td><td>音乐</td></tr><tr><td>第三节<br><br>10:35 - 11:15</td><td>音乐</td><td>英语</td><td>数学</td><td>数学</td><td>体育</td></tr><tr><td colspan="6">午休    12:00 - 13:40</td>
<!--        colspan="6"横跨6列--></tr><tr><td>第四节<br><br>14:10 - 14:50</td><td>英语</td><td>科学</td><td>语文</td><td>科学</td><td>语文</td></tr><tr><td colspan="6">眼保健操    14:50 - 15:00</td></tr><tr><td>第五节<br><br>15:05 - 15:45</td><td>数学</td><td>语文</td><td>书法</td><td>美术</td><td>道德</td></tr><tr><td>第六节<br><br>15:55 - 16:35</td><td>少队</td><td>道德</td><td>美术</td><td>信息</td><td>综合</td></tr>
</table></body>
</html>

效果图：

注：<thead>、<tbody> 和 <tfoot> 元素不会影响表格的布局，但有必要。

1.2HTML5表单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Form</title><p>入职申请表单</p></head>
<body>
<form action=""><label for="name">名字：</label><input type="text" id="name" name="name"><br><br><label for="id_card">身份证号：</label><input type="number" id="id_card" name="id_card"><br><br><label for="photo">个人照片：</label><input type="file" id="photo" name="photo"><br><br><label for="address">住址：</label><input type="text" id="address" name="address" placeholder="请从地级市开始输入"><br><br><label for="birthdate">出生日期：</label><input type="date" id="birthdate" name="birthdate"><br><br><label for="yes">婚否：是： </label><input type="radio" id="yes" name="married"><label for="no">否：</label><input type="radio" id="no" name="married"><br><br>
<!--有for即可实现互斥--><label >已掌握的编程语言：</label><input type="checkbox"   value="0" />C/C++<input type="checkbox"   value="1" checked=" true"/>Java<input type="checkbox"   value="2" />python<br><br><label for="introduction">自我介绍：</label><textarea id="introduction" name="introduction" rows="5"></textarea><br><br><input type="submit" value="提交"><input type="reset" value="重置">
</form>
</body>
</html>

效果图

1.3CSS3

语法

选择器 {样式声明;样式声明;... ...
}

全局属性

局部属性优先全局属性

div.d.*6

空格有特殊作用

CSS外部引入<link>

  1. 几种 CSS 选择器：

    元素选择器（如 p）、类选择器（如 .class）、ID 选择器（如 #id）、后代选择器（如 div p）、子选择器（如 div > p）、相邻兄弟选择器（如 p + span）、通用兄弟选择器（如 p ~ span）等。
  2. CSS 的 3 种引入方式：
    • 内联样式，直接在 HTML 元素上添加 style 属性。
    • 内部样式表，在 <head> 中使用 <style> 标签。
    • 外部样式表，通过 <link> 标签链接外部的 CSS 文件。
  3. CSS 中表示颜色：

    可以使用颜色名称（如 red）、十六进制值（如 #ff0000）、RGB 值（如 rgb(255,0,0)）、RGBA 值（如 rgba(255,0,0,0.5)）等。
  4. CSS 的基本语法格式：
    选择器 {
      属性:
      值;
    }
  5. CSS 的优先规则：

    ID 选择器的优先级高于类选择器，类选择器的优先级高于元素选择器；内联样式的优先级最高；后出现的样式会覆盖前面相同属性的样式（除非前面的样式优先级更高）。

图片，小了左上角截，多了重复平铺

<background>

伪类某一种状态，不单独使用

盒子模型

内容区
        width和height设置内容区大小的

内边距
        指的是内容区与边框线之间的距离，内边距共享背景
边框
        边框三要素
                颜色、风格、粗细
外边距
        外边距是透明的

相关文章：

前端框架（三件套）

学习网站 HTML 系列教程&#xff08;有广告&#xff09; HTML&#xff08;超文本标记语言&#xff09; | MDN (mozilla.org)&#xff08;英文不太友好&#xff09; 1.HTML5 & CSS3 1.1HTML5表格 <!DOCTYPE html> <html lang"en"> <head>…...

编程日记 2024/8/12 20:35:27

MemoryCache 缓存 实用

MemoryCache 缓存 实用,相关逻辑代码里已详细注释&#xff0c; 在Java中创建一个单例模式&#xff08;Singleton Pattern&#xff09;的MyMemoryCache类&#xff0c;可以采用多种方法&#xff0c;其中最常见的是使用“饿汉式”和“懒汉式”&#xff08;线程安全和非线程安全&am…...

编程日记 2024/8/12 20:33:25

Java设计模式（命令模式）

定义 将一个请求封装为一个对象&#xff0c;从而让你可以用不同的请求对客户进行参数化&#xff0c;对请求排队或者记录请求日志&#xff0c;以及支持可撤销的操作。 角色 抽象命令类&#xff08;Command&#xff09;&#xff1a;声明用于执行请求的execute方法&#xff0c;通…...

编程日记 2024/8/12 20:32:24

什么是 CI/CD？

什么是 CI/CD&#xff1f; CI/CD&#xff08;Continuous Integration/Continuous Deployment&#xff09;是一种软件开发实践&#xff0c;旨在通过自动化的方式频繁地构建、测试和发布软件。CI/CD 可以显著提高软件交付的速度和质量&#xff0c;使团队能够更快地响应市场变化和…...

编程日记 2024/8/12 20:31:23

【免费】最新区块链钱包和私钥的助记词碰撞器，bybit使用python开发

使用要求 1、用的是google里面的扩展打包成crx文件&#xff0c;所以在使用之前你需要确保自己电脑上有google浏览器&#xff0c;而且google浏览器版本需要在124之上。&#xff08;要注意一下&#xff0c;就是电脑只能有一个Chrome浏览器&#xff09; 2、在win10上用vscode开发…...

编程日记 2024/8/12 20:29:20

【苍穹外卖JAVA项目】第2天：新增员工

在EmployeeMapper.java中插入数据&#xff1a;一、新增员工 1.产品原型 2.接口设计 由于需要提交员工信息&#xff0c;用post请求方式&#xff0c;可以携带json数据 3.设计数据库的employee表 4.设计DTO 数据传输对象&#xff08;DTO&#xff09;&#xff1a;封装前端提交过…...

编程日记 2024/8/12 20:26:18

队列的实现及循环队列

一、队列的概念及结构 队列只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表。队列具有先进先出FIFO&#xff08;Fist In First Out&#xff09;。 入队列&#xff1a;进行插入操作的一端称为队尾。 出队列&#xff1a;进行删除操作的一端称为…...

编程日记 2024/8/12 20:25:17

docker部署zookeeper和kafka

docker部署zookeeper和kafka zookeeperkafkakafka-eagle zookeeper firewall-cmd --zonepublic --add-port2181/tcp --permanent firewall-cmd --reload docker pull zookeeper:3.4.14 docker run -d --name zk -p 2181:2181 zookeeper:3.4.14mkdir -p /root/zookeeper/data m…...

编程日记 2024/8/12 20:24:16

（13）zabbix的监控-1

前言&#xff1a;在上一次的基础上&#xff0c;完成实验。 1、添加一个空模板&#xff0c;方便 2、添加空模板到主机192.168.121.50 client-one里面模板是空的 4、在主机添加监控项和图形 5、自定义监控项&#xff0c;在客户端定义 [rootclient1 ~]# vim /etc/zabbix/zabbix_…...

编程日记 2024/8/12 20:22:14

Redis相关面试题（二）

一、Bit中不同命令使用的场景 二、什么是缓存击穿&#xff0c;缓存穿透&#xff0c;缓存雪崩&#xff1f; 缓存击穿&#xff1a;是指当某一个key的缓存过期时大并发量的请求同时访问key&#xff0c;瞬间击穿服务器直接访问到数据库&#xff0c;使得数据库处于负载情况 缓存穿透…...

编程日记 2024/8/12 20:20:12

Docker Compose与私有仓库

Docker Compose与私有仓库 docker-compose -v 查看版本信息 Docker Compose的应用 创建APACHE容器 vim docker-compose.yaml yaml文件缩进严格&#xff1b;冒号后有内容需要加空格&#xff0c;冒号后无内容一般不加空格 冒号后的内容中若包含路径‘/’或‘&#xff1a;’时…...

编程日记 2024/8/12 20:19:11

AI学习记录 - gpt如何进行token化，理论知识，以GPT2为举例

AI学习记录已经发了十几篇&#xff0c;大佬们可以看看&#xff0c;如果有帮助动动小手点赞 token入门版&#xff0c;有空会更新具体代码操作 GPT4当中&#xff0c;我们提问问题是按照token进行扣费的&#xff0c;那到底什么是token&#xff1f; 在不同的语言模型当中&#x…...

编程日记 2024/8/12 20:18:10

Java线程池和执行流程

在 Java 中&#xff0c;常见的四种线程池包括&#xff1a; 1. newFixedThreadPool&#xff08;固定大小线程池&#xff09; 应用场景&#xff1a;适用于需要限制线程数量&#xff0c;并且任务执行时间比较均匀的场景&#xff0c;例如服务器端的连接处理。优点&#xff1a;线程数…...

编程日记 2024/8/12 20:17:09

进程信号的产生与处理

目录 前言 一.信号的概念 二.信号的产生 1.键盘产生 2.系统调用 3.软件条件 4.异常 三.信号的保存 四.信号的处理 信号处理的方式 设定屏蔽信号 自定义处理信号 信号处理的时机 前言 进程信号&#xff08;Process Signals&#xff09;是操作系统与运行进程之间进行通…...

编程日记 2024/8/12 20:16:08

统一响应结果封装，Result类的实现【后端 06】

统一响应结果封装&#xff0c;Result类的实现 在开发Web应用或API接口时&#xff0c;如何优雅地处理并返回响应结果是每个开发者都需要考虑的问题。统一响应结果封装&#xff08;Unified Response Encapsulation&#xff09;作为一种广泛采用的实践&#xff0c;不仅提高了API的…...

编程日记 2024/8/12 20:14:06

明日周刊-第20期

本周异形新电影上映&#xff0c;开始期待起来了&#xff0c;毕竟这是一个经久不衰的ip。还有就是马上来临的黑神话悟空&#xff0c;属于我们自己的3A大作&#xff0c;接下去的每一天都是新的期待。 文章目录 科技短讯资源分享随便说说一点心情 科技短讯 科技创新与突破 人工智…...

编程日记 2024/8/12 20:13:05

深入剖析 Spring 常用注解：功能与差异的全景洞察

《深入剖析 Spring 常用注解&#xff1a;功能与差异的全景洞察》 在当今的 Java 开发领域&#xff0c;Spring 框架无疑是最广泛使用的框架之一。而在 Spring 中&#xff0c;注解的运用极大地简化了开发流程&#xff0c;提高了代码的可读性和可维护性。本文将深入探讨 Spring 中…...

编程日记 2024/8/12 20:12:04

【隐私计算篇】隐私计算使用不当也会泄露原始数据

1. 背景信息 有个有趣的问题&#xff0c;刚好最近有讨论到&#xff0c;在这里也抛一下&#xff0c;就是隐私计算中我们经常谈到主流的一些技术&#xff0c;比如联邦学习、多方安全计算、安全求交、匿踪查询、可信执行环境等&#xff0c;然后笼统地会称这些技术实现了对隐私…...

编程日记 2024/8/12 20:11:02

C++第一讲：开篇

C第一讲&#xff1a;开篇 1.C历史背景1.1C创世主--本贾尼1.2C版本更新1.3C的重要性1.4C书籍推荐 2.C的第一个程序3.命名空间3.1namespace是什么3.2namespace的使用3.3namespace使用注意事项3.4命名空间的使用 4.C输入和输出5.缺省参数6.函数重载7.引用7.1什么是引用7.2引用的定…...

编程日记 2024/8/12 20:10:01

OceanBase V4.2特性解析：MySQL模式下GIS空间表达式的场景及能力解析

1. 背景 1.1. OceanBase Mysql gis空间表达式的应用场景及能力 在OceanBase 4.1版本中&#xff0c;mysql模式下支持了gis数据类型以及部分空间对象相关的表达式&#xff0c;随着客户使用空间数据的需求日益增长&#xff0c;需要快速地补齐空间数据存储和计算分析的能力&#…...

编程日记 2024/8/12 20:09:00

智能手机相机光谱特性测量与多光谱成像技术

1. 智能手机相机光谱特性测量基础智能手机相机的光谱灵敏度函数(Spectral Sensitivity Function, SSF)和透射率函数是计算摄影领域的核心参数&#xff0c;它们决定了设备对光信号的响应特性。准确获取这些参数对色彩还原、光谱重建和白平衡校准等任务至关重要。1.1 光谱灵敏度函…...

编程新知 2026/5/26 2:25:34

告别虚频困扰：用VASP+DynaPhoPy搞定高温材料声子谱的保姆级教程

高温材料声子谱计算实战&#xff1a;从虚频困境到非谐解决方案 引言&#xff1a;虚频问题的根源与突破路径 在计算材料学领域&#xff0c;声子谱分析是理解材料动力学稳定性和热力学性质的核心手段。然而许多研究者都遭遇过这样的困境&#xff1a;对实验合成的材料进行简谐近似…...

编程新知 2026/5/26 2:17:28

别再死记硬背Payload了！我用XSS-Game靶场，带你拆解18种过滤规则背后的绕过逻辑

从XSS-Game靶场实战中掌握18种过滤规则的逆向思维在网络安全领域&#xff0c;跨站脚本攻击&#xff08;XSS&#xff09;始终是Web应用面临的主要威胁之一。许多开发者虽然了解XSS的基本概念&#xff0c;但当面对各种复杂的过滤规则时&#xff0c;往往不知如何系统分析并构造有效…...

编程新知 2026/5/26 1:53:13

skills CANN开源社区贡献技能包开发指南

前言 开源社区的健康运转&#xff0c;不仅依赖核心代码的贡献&#xff0c;还需要降低贡献门槛、提供清晰的指南和自动化工具。skills仓库是CANN开源社区的"贡献技能包"&#xff0c;提供了一系列辅助脚本、代码模板、CI检查和文档生成工具&#xff0c;帮助新手快速上…...

编程新知 2026/5/25 23:27:16

深度解析DeTikZify：科研工作者的智能图表生成神器

深度解析DeTikZify&#xff1a;科研工作者的智能图表生成神器 【免费下载链接】DeTikZify Synthesizing Graphics Programs for Scientific Figures and Sketches with TikZ. 项目地址: https://gitcode.com/gh_mirrors/de/DeTikZify 在科研工作中&#xff0c;创建高质量…...

编程新知 2026/5/25 22:46:38

二十六.签名与脚本(1)--脚本介绍

1.区块链脚本介绍在之前的章节中&#xff0c;我们了解了签名与验证相关&#xff0c;但是btc的交易数据&#xff0c;签名和验证&#xff0c;不是单纯的&#xff0c;还有脚本深度参与其中。我们从开始来&#xff1a;bool SendMoney(CScript scriptPubKey, int64 nValue, CWalletT…...

编程新知 2026/5/25 21:23:41

氘可来昔替尼常见副作用为鼻咽炎头痛及腹泻，如何应对？

任何口服药物的临床价值&#xff0c;都必须在疗效与安全性的天平上找到精准的平衡点。氘可来昔替尼以PASI 75应答率的全面胜出证明了自己在银屑病治疗中的卓越地位&#xff0c;而其不良反应谱同样经过了严苛的临床验证。鼻咽炎、头痛和腹泻构成了这款药物最需关注的三大安全信号…...

编程新知 2026/5/25 20:57:14

Windows开机自动全屏打开指定网页？一个快捷方式参数就搞定（Chrome/Edge/Firefox教程）

Windows开机自动全屏展示网页的终极方案每次开机都要手动打开浏览器、输入网址、切换全屏模式&#xff1f;这种重复操作不仅浪费时间&#xff0c;还容易在重要演示时手忙脚乱。想象一下&#xff1a;电脑启动后自动全屏显示你的仪表盘、会议日程或是监控大屏&#xff0c;整个过程…...

编程新知 2026/5/25 20:14:00

OpenClaw 源码解析（六）：openclaw agent 如何触发一次 Agent 运行？

1. 本期要解决的问题 前几期我们已经从项目整体结构、CLI 命令体系、配置加载、Gateway 运行机制等角度理解了 OpenClaw 的基础框架。到了这一期&#xff0c;可以进一步进入 OpenClaw 最核心的使用动作&#xff1a;用户在终端中执行一条 openclaw agent --message "...&q…...

编程新知 2026/5/25 14:19:40

Godot4地图分层绘制实战：从图层混乱到专业场景管理的避坑指南

Godot4地图分层绘制实战&#xff1a;从图层混乱到专业场景管理的避坑指南当你第一次在Godot4中完成一个复杂场景的TileMap绘制时&#xff0c;那种成就感无与伦比。但随着场景复杂度提升&#xff0c;你是否遇到过这些头疼问题&#xff1a;角色明明站在树后却被树叶遮挡&#xff…...

编程新知 2026/5/25 14:10:50