<前端小白> 前端网页知识点总结
HTML
标签
1. 标题标签 h1到h6
2. 段落标签 p
3. 换行 br 水平线 hr
4. 加粗 strong 倾斜 em 下划线 ins 删除 del
5. 图像标签
img src-图像的位置 alt- 图片加载失败显示的文字 替换文本
title--- 鼠标放到图片上显示的文字 提示文本
width 宽 heigh 高
6.路径 ./ 或者 ../
7.超链接
a herf --点击后就会跳转的地址
target = “_blank” 点击后会打开一个新的网页
8.音频标签
audio src --音频的位置
controls 显示音频控制面板
loop循环播放
autoplay 自动播放 浏览器设置调
9.视频
video src 位置
loop autoplay muted静音播放
10. 无序列表
ul嵌套li
11. 有序列表
ol嵌套li
12. 表格 感觉没啥迪奥用 不写了
13. 输入框
input type=“ text文本框 password密码 radio单选框 checkbox多选框 file上传文件”
加上 placeholder 使提示的文本
单选框外边加上label 这个让它成为label的子类 扩大其点击范围
14.单选框的单选属性 name 弄相同的 只能选一个 checked使默认选中
15.多文件上传 加 mutiple
16.多选框 checkbox
17.下拉菜单 selection嵌套option selected默认显示
18. 文本域 textarea
19.label 标签 某个标签的说明文本 增大点击范围
20. 按钮 button
submit 把数据提交到后台
resert 重置 一般用于注册
button 普通标签
按钮应该放在 form action 中 form表单空间 action 提交地址
21。标签布局 div span
div 独占一行
span 不换行
22. 字符实体 小于号 <;
大于号 >;
空格  ;
23. 以下是CSS内容
写法 style标签
link + rel(类型) + herf(路径)
24. 类选择器 . 类名{}
然后在标签名后边加 class=“类名”
25. id选择器 #类名{}
标签后边加id = “id名" 和类选择器差不多 和js搭配使用
26. 通配符选择器 对于所有标签进行同一个操作 *{ }
用于清除格式
27.画盒子 宽 width
高height
背景色 background-color
28.字体 大小 font-size
粗细 font-weight 一般400细 700粗
倾斜 font-style normal italic
行高文字之间 line-height 让文本垂直居中 就让行高值等于盒子的高度的值 只适用单行文字
字体样式: font-family
字体复合样式: font : 是否倾斜 是否加粗 字体间行高(必写) 字体(必写)
29. 文本缩进 text-indent 加 数字px em(字号大小)
30. 文本对齐 text-align 左对齐 默认 left
水平居中 center
右对齐 right
31. 图片对齐 图片放在父级标签中 进行text-align
32.修饰线 text-decoration 无none
下划线 underline
删除线 line-through
顶划线 over-line
33.文字颜色 color + 颜色 或 调色板 rgb(红绿蓝) rgba(红绿蓝 ,透明度) 或 十六进制
34. 复合选择器
后代选择器 选择器1 然后空格 选择器2 父代 空格 子代
相当于选择使用选择器1的标签里边的使用选择器2的标签 对他进行操作
子代选择器 选择器1>选择器2 父代 > 子代
并集 和 交集懒得写了
伪类选择器 表示元素状态
选择器:hover{CSS属性} 这个是对于超链接啥的设置的鼠标悬停状态
这个会变色 只是截图接不出来
伪类超链接 : 按顺序写 LVHA
:link 访问前
:visited 访问后
: hover 悬停
:active 点击时
35.CSS的特性
继承性: 对于父代的所有操作会影响子代
层叠性: 相同的属性往后写的话会进行覆盖 不同的属性会增加
优先级 能选择的范围越大优先级就会越低 懒得写
36. 背景属性 背景色: background-color 前边提到过
背景图 : background-img
平铺方式: 默认是平铺的 repeat
取消平铺: background-repeat: no-repeat
根据水平 垂直方向平铺 background-repeat: repeat-x;
background-repeat: repeat-y;
背景图的位置: 见下图
背景图的缩放 : bckground-size
cover 全屏 但是图片可能会覆盖不全
contain 宽高有一个存在相等的 就会停止
背景图的固定: 就是上下滚动鼠标图不动 然后文字会随鼠标上下滚动
background-attachment: fixed;
背景图的复合属性:就空格隔开就行 对于缩放要前边加上 /
37. 块级元素 行内元素 行内块元素
块级元素:
-
独占一行,前后会自动换行
-
默认宽度和父元素相同 (是父元素宽度的100%)
-
可以包含其他块级元素和行内元素
-
可以设置宽度(width)、高度(height)、内外边距(margin/padding)
-
常见的
<div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>,
行内元素
-
不会独占一行,与其他行内元素排在同一行
-
默认宽度由内容决定
-
设置宽度(width)、高度(height)无效
-
水平方向的内外边距有效,垂直方向的外边距无效
-
只能包含文本和其他行内元素
-
常见的
<span>, <a>, <strong>, <em>, <img>, <input>, <label>, <br>
行内块元素
-
结合了块级和行内元素的特性
-
不独占一行,与其他元素排在同一行
-
可以设置宽度(width)、高度(height)、内外边距(margin/padding)
-
默认宽度由内容决定
-
常见的:
<img>, <input>, <button>, <select>, <textarea>
转换: diplay: 块级 block 行内块 inline-block 行内: inline
38. 结构伪类选择器 就是对一个父级里边的多个相同的子级标签单独拿出来操作
子级::first-child :last-child :nth-child(5)第五个
39.伪元素选择器: before after 不知道有damn用??
40.盒子模型: 内容区域 用width height
内边距 padding -left -right -bottom -top 多值顺时针转动
外边距 margin -left -right -bottom -top 多值顺时针转动
边框线 border 粗细 样式solid dashed dotted 颜色
41.清除默认样式
对于边距和无序列表
42.元素溢出: 控制溢出元素的显示方式
overflow : 隐藏hidden
scroll 无论溢出不溢出都有滚动条 水平加垂直
auto 没有水平的
43.合并现象: 对于两个同级标签 当同时在垂直方向时 两者之间的相交的margin取较大的
44.塌陷问题: 子级加上了外边距导致父级往下移动了
解决: 1 子级不加margin 父级加内边距
2 父级加 overflow:hidden
3 父级 加边框
45。行内元素的垂直位置 line-height 和28文字那点一样
46. 圆角效果 头像啥的用
border-radious 也是顺时针转
头像 : 正方形 前提 然后 值写 50%
胶囊 : 高度写成盒子高度的一半
先写到这里 2025.5.18 过几天学完学透彻再来再来
相关文章:
<前端小白> 前端网页知识点总结
HTML 标签 1. 标题标签 h1到h6 2. 段落标签 p 3. 换行 br 水平线 hr 4. 加粗 strong 倾斜 em 下划线 ins 删除 del 5. 图像标签 img src-图像的位置 alt- 图片加载失败显示的文字 替换文本 title--- 鼠标放到图片上显示的文字 提示…...
【Linux驱动】Linux 按键驱动开发指南
Linux 按键驱动开发指南 1、按键驱动开发基础 1.1. 按键驱动类型 Linux下的按键驱动主要有两种实现方式: 输入子系统驱动:最常用,通过input子系统上报按键事件 字符设备驱动:较少用,需要自己实现文件操作接口 1.…...
AI日报 - 2025年05月19日
🌟 今日概览 (60秒速览) ▎🤖 大模型前沿 | GPT-5传闻再起,将基于全新模型构建,与GPT-4彻底分离;Claude 3.7 Sonnet系统提示泄露,揭示其主动引导对话、多语言支持及安全新特性;研究指出直接复用…...
BUUCTF——ReadlezPHP
BUUCTF——ReadlezPHP 进入靶场 看了看框架和源码信息 没有什么可以利用的地方 爆破一下目录看看 结果只出来个index.php 看了一下Findsomthing 报了个路径 /time.php?source拼接访问一下 出了个php代码 <?php #error_reporting(0); class HelloPhp {public $a;pub…...
java集合相关的api-总结
简介 集合是存储数据的容器,集合相关的API提供了不同的数据结构,来满足不同的需求。这里是对常见集合API的使用场景和相关源码的一个总结,在实际开发中,如果不知道该选择什么集合,这篇文章也许可以参考一下。 集合相…...
FloodFill算法:洪水般的图像处理艺术
简单来说就是一场洪水(雨水)会把低洼的地方淹没 也就是一道题,你要找出所有为负数的连通块,对角线不能连通,所以上述图有两个 其实也很简单,就是你扫描的过程,发现一个负数,就以这…...
【开源分享】健康饮食管理系统(双端+论文)
💻技术栈 前后端分离项目,PC双端(管理端用户端) 后端:Javaspringboot 前端:vue 数据库:mysql 💡运行效果图 1. 管理端: 2. 用户端: 📕源码获…...
【图像生成大模型】CogVideoX-5b:开启文本到视频生成的新纪元
CogVideoX-5b:开启文本到视频生成的新纪元 项目背景与目标模型架构与技术亮点项目运行方式与执行步骤环境准备模型加载与推理量化推理 执行报错与问题解决内存不足模型加载失败生成质量不佳 相关论文信息总结 在人工智能领域,文本到视频生成技术一直是研…...
C++学习:六个月从基础到就业——C++20:协程(Coroutines)
C学习:六个月从基础到就业——C20:协程(Coroutines) 本文是我C学习之旅系列的第五十篇技术文章,也是第三阶段"现代C特性"的第十二篇,继续介绍C20引入的新特性,本篇重点是协程(Coroutines)。查看完整系列目录…...
【DAY22】 复习日
内容来自浙大疏锦行python打卡训练营 浙大疏锦行 仔细回顾一下之前21天的内容 作业: 自行学习参考如何使用kaggle平台,写下使用注意点,并对下述比赛提交代码 kaggle泰坦里克号人员生还预测...
tauri2项目使用sidcar嵌入可执行文件并使用命令行调用
Sidecar 是 Tauri 框架中的一个功能,允许你将现有的命令行程序(CLI)打包并分发到你的 Tauri 应用程序中。以下是它的主要作用和用法。集成命令行工具:将现有的 CLI 程序无缝集成到你的 Tauri 应用中。跨平台分发:确保你…...
选择合适的AI模型:解析Trae编辑器中的多款模型及其应用场景
在当今数字化时代,人工智能技术飞速发展,各种AI模型层出不穷,为人们的工作和生活带来了极大的便利。Trae编辑器作为一款集成了多种先进AI模型的工具,为用户提供了丰富的选择,以满足不同场景下的多样化需求。本文将深入…...
超越想象:利用MetaGPT打造高效的AI协作环境
前言 在人工智能迅速发展的今天,如何让多个大语言模型(LLM)高效协同工作成为关键挑战。MetaGPT 作为一种创新的多智能体框架,成功模拟了一个真实软件公司的运作流程,实现了从需求分析到代码实现的全流程自动化&#x…...
BOM知识点
BOM(Browser Object Model)即浏览器对象模型,是用于访问和操作浏览器窗口的编程接口。以下是一些BOM的知识点总结: 核心对象 • window:BOM的核心对象,代表浏览器窗口。它也是全局对象,所有全…...
IDE/IoT/搭建物联网(LiteOS)集成开发环境,基于 LiteOS Studio + GCC + JLink
文章目录 概述LiteOS Studio不推荐?安装和使用手册呢?HCIP实验的源码呢? 软件和依赖安装软件下载软件安装插件安装依赖工具-方案2依赖工具-方案1 工程配置打开或新建工程板卡配置组件配置编译器配置-gcc工具链编译器配置-Makefile脚本其他配置编译完成 …...
常见的 HTTP 接口(请求方法)
一:GET 作用:从服务器获取资源(查询数据)。特点: 请求参数通过 URL 传递(如https://api.example.com/users?id123),参数会显示在地址栏中。不修改服务器数据,属于幂等操…...
墨水屏显示模拟器程序解读
程序如下:出处https://github.com/tsl0922/EPD-nRF5?tabreadme-ov-file // GUI emulator for Windows // This code is a simple Windows GUI application that emulates the display of an e-paper device. #include <windows.h> #include <stdint.h>…...
【图像生成大模型】Step-Video-T2V:下一代文本到视频生成技术
Step-Video-T2V:下一代文本到视频生成技术 引言Step-Video-T2V 项目概述核心技术1. 视频变分自编码器(Video-VAE)2. 3D 全注意力扩散 Transformer(DiT w/ 3D Full Attention)3. 视频直接偏好优化(Video-DPO…...
【Java学习笔记】【第一阶段项目实践】房屋出租系统(面向对象版本)
房屋出租系统(面向对象版本) 整体思想:采用数组存储房屋信息,深刻体会面向对象的好处和过程 一、实现需求 (1)用户层 系统菜单显示 提示用户输入对应的数字选择功能 各个功能界面操作提示(底…...
18. 结合Selenium和YAML对页面继承对象PO的改造
18. 结合Selenium和YAML对页面继承对象PO的改造 一、架构改造核心思路 1.1 改造前后对比 #mermaid-svg-ziagMhNLS5fIFWrx {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ziagMhNLS5fIFWrx .error-icon{fill:#5522…...
Vue-监听属性
监听属性 简单监听 点击切换名字,来回变更Tom/Jerry,输出 你好,Tom/Jerry 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>监听属性</title><!-- …...
AI写PPT可以用吗?我测试了3款AI写PPT工具,分享感受
上周五临下班,领导突然让我周末赶出一份季度营销报告 PPT,还要求周一晨会展示。看着空荡荡的 PPT 页面,我满心都是绝望 —— 周末不仅泡汤,搞不好还得熬夜到凌晨。好在同部门的前辈给我推荐了几款 AI 写 PPT 工具,没想…...
FreeSWITCH 简单图形化界面43 - 使用百度的unimrcp搞个智能话务台,用的在线的ASR和TTS
FreeSWITCH 简单图形化界面43 - 使用百度的unimrcp搞个智能话务台 0、一个fs的web配置界面预览1、安装unimrcp模块2、安装完成后,配置FreeSWITCH。2.1 有界面的配置2.1.1 mod_unimrcp模块配置2.1.2 mod_unimrcp客户端配置 2.2 无界面的配置 3、呼叫规则4、编写流程4…...
C 语言学习笔记(函数)
内容提要 函数 函数的概述函数的分类函数的定义形参和实参函数的返回值 函数 函数的概述 **函数:**实现一定功能的,独立的代码模块,对于函数的使用,一定是先定义,后使用。 使用函数的优势: ①我们可以…...
数据结构 -- 树形查找(二)平衡二叉树
平衡二叉树 定义 平衡二叉树(AVL树) – 树上的任意一点的左子树和右子树的高度之差不超过1 节点的平衡因子 左子树高-右子树高 平衡二叉树的结点的平衡因子的值只可能是-1、0、1 //平衡二叉树结点 typedef struct AVLNode{int key; //数据域int bal…...
day 29
类装饰器 类有修饰器,他的逻辑:接收一个类,返回一个修改后的类。例如 1. 添加新的方法或属性(如示例中的 log 方法)。 2. 修改原有方法(如替换 __init__ 方法,添加日志)。 3. 甚…...
Java 并发编程
黑马程序员深入学习Java并发编程 进程与线程 预备知识 java8,pom.xml <dependencies><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.10</version></depe…...
windows笔记本连接RKNN3588网络配置解析
这几天拿到了一块RKNN3588的板子,准备做视觉和Ros开发用,但是拿到后就蒙蔽了,不知道怎么ssh连到板子上去,更甚者不知道怎么配置网络让RKNN能够联网更新环境,这里记录一下整个过程。主要包括以下两个内容: 1.adb连接RKNN3588开发 2. 网口连接RKNN更新板子环境开发 adb连…...
C++ asio网络编程(8)处理粘包问题
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 粘包问题一、粘包原因总结: 二、如何处理粘包处理方法 三、完善消息节点MsgNode代码部分细节详解memcpy(_data, &max_len, HEAD_LENGTH);_data…...
【架构美学】Java 访问者模式:解构数据与操作的双重分发哲学
一、模式定义与核心思想 访问者模式(Visitor Pattern)是一种行为型设计模式,其核心目标是将数据操作与数据结构分离。通过定义一个独立的访问者类,使得新增对数据结构中元素的操作时,无需修改元素本身的类结构&#x…...
UE5无法编译问题解决
1. vs编译 2. 删除三个文件夹 参考...
Java可变参数与Collections工具类详解
Java可变参数与Collections工具类详解 一、可变参数(Variable Arguments) 1.1 基本概念 可变参数是Java 5引入的特性,允许在方法中定义数量可变的形参。其核心特点是:形参个数可以动态变化(0个、1个、多个ÿ…...
Git版本管理命令reset
目录 命令 git reset 场景一只回退 工作区代码 场景二回退暂存库与工作区 场景三回退暂存库,工作区,版本库内容 命令 git reset git reset --[soft/mixed(默认)/hard] [文件] soft:只回退版本库中内容 mixed:回退暂存区&…...
改进模糊C均值时序聚类+编码器状态识别!IPOA-FCM-Transformer组合模型
改进模糊C均值时序聚类编码器状态识别!IPOA-FCM-Transformer组合模型 目录 改进模糊C均值时序聚类编码器状态识别!IPOA-FCM-Transformer组合模型效果分析基本描述程序设计参考资料 效果分析 基本描述 1.创新未发表!研究亮点!时序…...
Zookeeper入门(三)
Zookeeper Java 客户端 项目构建 ookeeper 官方的客户端没有和服务端代码分离,他们为同一个jar 文件,所以我们直接引入 zookeeper的maven即可, 这里版本请保持与服务端版本一致,不然会有很多兼容性的问题 1 <dependency>…...
使用Redission来实现布隆过滤器
简述布隆过滤器 布隆过滤器是一种概率型数据结构,它可以用来判断一个元素是否在一个集合中。我们当时使用的是Redisson实现的布隆过滤器。它的底层原理是,先初始化一个比较大的数组,里面存放的是二进制0或1。一开始都是0,当一个k…...
Seata源码—6.Seata AT模式的数据源代理一
大纲 1.Seata的Resource资源接口源码 2.Seata数据源连接池代理的实现源码 3.Client向Server发起注册RM的源码 4.Client向Server注册RM时的交互源码 5.数据源连接代理与SQL句柄代理的初始化源码 6.Seata基于SQL句柄代理执行SQL的源码 7.执行SQL语句前取消自动提交事务的源…...
Spring-Beans的生命周期的介绍
目录 1、Spring核心组件 2、Bean组件 2.1、Bean的定义 2.2、Bean的生命周期 1、实例化 2、属性填充 3、初始化 4、销毁 2.3、Bean的执行时间 2.4、Bean的作用域 3、常见问题解决方案 4、与Java对象区别 前言 关于bean的生命周期,如下所示: …...
目标检测新突破:用MSBlock打造更强YOLOv8
文章目录 YOLOv8的现状与挑战YOLO-MS的MSBlock简介MSBlock的工作原理MSBlock的优势 利用MSBlock改进YOLOv8替换YOLOv8主干网络中的部分模块代码实现:替换CSP模块为MSBlock 在YOLOv8的颈部(Neck)中插入MSBlock代码实现:在颈部区域插…...
[SpringBoot]Spring MVC(4.0)
获取Header 传统获取 header 从 HttpServletRequest 中获取 RequestMapping("/r8")public String r8(HttpServletRequest request) {String userAgent request.getHeader("User-Agent");return "userAgent: "userAgent;}使用浏览器访问后&…...
Linux概述:从内核到开源生态
Linux概述:从内核到开源生态 Linux 是当今计算机领域最核心的开源操作系统内核,其影响力已渗透到服务器、嵌入式设备、云计算甚至超级计算机等各个领域。本章将深入解析Linux的本质、核心架构及其背后的开源哲学。 1. Linux的本质:不只是“操…...
【ubuntu24.04】pycharm 死机结束进程
windows 远程pycharm到ubuntu执行程序 pycharm 在调试过程中,内存耗尽,然后死机了 pycharm 进程 (base) rootk8s-master-pfsrv:/home/zhangbin/下载# ps -ef | grep pycharm root 121245 3230568 0 5月14 pts/8 00:00:00 /bin/bash --rcfile …...
【PRB】深度解析GaN中最浅的受主缺陷
2025 年 1 月 16 日,Virginia Commonwealth University 的 M. A. Reshchikov 和 SUNY–Albany 的 B. McEwen 等人在《Physical Review B》期刊发表了题为《Identity of the shallowest acceptor in GaN》的文章,基于对 50 多个 Be 掺杂 GaN 样品的光致发光实验以及 Heyd-Scus…...
Flink CEP是什么?
Apache Flink 的 CEP(Complex Event Processing,复杂事件处理) 是 Flink 提供的一个库,用于在无界数据流中检测符合特定模式的事件组合。 🎯 一、什么是 CEP? ✅ 定义: CEP 是一种从连续的数据…...
基于STM32的多传感器融合的设施农业小型搬运机器人避障控制系统设计
一、系统总体设计目标 针对设施农业场景中狭窄通道、障碍物多样(如农机具、作物植株、水管)的特点,设计一款基于 STM32 的小型搬运机器人避障控制系统。系统通过多传感器融合实现 360 环境感知,采用模糊 PID 控制算法实现平滑避障,满足温室、大棚等场景的搬运需求。 二、…...
从零开始实现大语言模型(十六):加载开源大语言模型参数
1. 前言 预训练大语言模型的难点不在于算法,而在于数据和算力,绝大多数企业和机构都没有预训练大语言模型的算力资源。在工业界的大语言模型应用实践中,通常会使用领域数据微调开源大语言模型参数,以构建领域大语言模型。 本文介…...
Spark,数据提取和保存
以下是使用 Spark 进行数据提取(读取)和保存(写入)的常见场景及代码示例(基于 Scala/Java/Python,不含图片操作): 一、数据提取(读取) 1. 读取文件数据&a…...
java19
1.集合体系结构 注意: 2.collection遍历之迭代器遍历 一次循环只能一次next方法的原因: 原因:集合长度是单数就报错 3.collection遍历之增强for遍历 如何代码简写呢:集合名.for回车 4.collection遍历之Lambda表达式遍历 5.使用多态…...
从0到1吃透卷积神经网络(CNN):原理与实战全解析
一、开篇:CNN 在 AI 领域的地位 在当今人工智能(AI)飞速发展的时代,卷积神经网络(Convolutional Neural Network,简称 CNN)无疑是深度学习领域中最为耀眼的明星之一 。它就像是 AI 世界里的超级…...
建一个结合双向长短期记忆网络(BiLSTM)和条件随机场(CRF)的模型
构建一个结合双向长短期记忆网络(BiLSTM)和条件随机场(CRF)的模型,通常用于序列标注任务,如命名实体识别(NER)、词性标注(POS Tagging)等。下面我将通过口述的…...