Web 整合
HTML
span 行内元素
p 块级元素
br/ 强制换行
i em倾斜
b strong 加粗
u 下划线
mark 高亮
超链接 a :a href="链接地址" target="_blank" alt="可替文本" title="文字提示"
tartget:_self 自己界面打开 _blank在其他界面打开
<a id="tips"> 锚 调整位置 </a> <br /> // html5以前 使用name设定锚的名称 也是通过#name
<a href="#tips"> 锚 调转提示文字</a>
无序 列表:ul>li*n
有序列表 : ol>li*n
摘要概述 :details summary 一个details 通常含有一个summary
进度条:meter ,progress
表格: table 行: tr 标题行: th :普通列 td
cellspacing 单元框间距;
cellpadding单元框内间距
去除内空格: cellspacing="0" cellpadding="0"
[style] border-collapse:collapse;
border-spacing=0;
取消内边框: border="0" cellspacing="0"
居中:水平居中:text-align: center 垂直居中:line-height= 高
行合并:rowspan="n" 列合并:colspan="n" 注意:最后同行或同列的td个数要一致
表单:form
表单的属性【
text 单行文本框
password 密码
默认选择:checked{
radio 单选 , name 相等
checkbox 多选 , name 相等
}
select option下拉列表; selected="selected" 默认选择
textarea 多行文本域 (可通过拖拽改变大小)
Cols属性:每行的字符数
Rows属性:文本行数
button 按钮
range 滑动块 可通过 step 滑动跨度: min="10" max="100" step="10"
进度条(不可滑动,value 设置值):progress,meter
reset 重置
submit 提交
date 日期
color 颜色
email 邮箱
number 数字
tel 电话
】
表单的参数【
把标签变成不可编辑属性: contenteditable="true"
隐藏 类型 display:none 不占位
默认提示 placeholder="输入邮箱"
下拉框多选 multiple
提交时无需验证 novalidate
提交时验证必须填写 required
只读: disabled不可选颜色变浅;
readonly 可选但不可写样式不变
自动焦点: autofocus (多个自动焦点 会聚焦到第一个)
正则表达式 :pattern
】
CSS
选择器
元素选择器 : 元素名{}
id选择器:#id名{}
类/class选择器 : .class名{}
并集选择器:选择器1名,选择器2名{} 选择器1和选择器2
后代选择器: 选择器1名 选择器2名{} 针对的是 在选择器1里下的选择器2( 祖先)
子选择器 : 选择器1名>选择器2名{} 针对的是 在选择器1里的直接子元素中选择器2(父子)
属性选择器 : 例:input[type="text"]{ }
超链接伪类:
a:hover:鼠标悬浮其上
A:link:未单击访问时
A:active:鼠标单击未释放
A:visited:单击访问后
颜色
英文单词 red white
十六进制 #ffff00 【6个f 白 6个0 黑】
Rgb(255,0,0) 【 3 个0 黑,3个255 白】
Rgba(255,0,0,0.5)
背景
背景颜色:background-color:
背景图像:background-image:url(“路径”);
背景重复:background-repeat: no-repeat repeat-x/y
背景定位:background-position: 水平定位 竖直定位
水平定位:left right center px(正数向右,负数向左)
竖直定位:top bottom center px(正数向下负数向上)
简写:background: red url() no-repeat 20px center;
字体:
字体类型:font-family:’楷体’;
字体大小: font-size px
字体粗细:font-weight: 100-1000
normal :400 ; 正常
bold:700; 加粗
简写:font: 风格 粗细 大小 类型
文本:
颜色:color
文本对齐方式:text-align: left right center
文本修饰:text-decoration:none underline overline line-through
文本缩进:text-indent: px
行高:line-height
垂直对齐:vertical-align: top middle bottom
Css列表:
列表项类型:list-style-type:none disc实心圆 circle空心圆 decimal 阿拉伯数字 square 实心黑块
列表项图片:List-style-image:url()
列表项位置;list-stle-position:inside/outside(图标在li里/外)
盒子模型:
边距:border: 3px solid red;
solid,实线 , dotted,点线 dashed虚线
box-sizing: border-box; 将边框对内显示
阴影 : 水平(正为右) 垂直(下为正) 模糊度 颜色
盒子阴影:box-shadow:5px 5px 5px green;
文本阴影:text-shadow
首行缩进 : text-indent: 30px
/* 外边距 上 右 下 左(黄框的外面)*/
margin: 10px 10px 0px;
内边距 :padding
/* 背景 :背景颜色 背景图片路径 是否平铺 */
/*位于的位置(left 右正 top 下正 决定) /所占整体的比例*/
background: red url(../img/image1.jpg) no-repeat left top/100% 100%;
浮动:float 浮动 不在同一个层级上,任何元素都可以
浮动的特性:脱离标准文档流(可以与其他元素并排展示,可以设置宽高,如果不设置会默认内容的宽高)
浮动的元素互相贴靠:浮动元素会贴靠上一个浮动元素的边,如果宽度不够,则当前浮动元素会换行显示,换行后顶部不会超过上一个浮动元素的底部。
浮动元素有字围效果(标准文档流的文字不会被浮动元素遮挡,围绕浮动元素)
定位:position: relative 相对 位置还存在 相对于自己位移
position: absoule;绝对 位置不存在 , 相对于上一个定位的父级位移
position: fixed; /固定位置 与上级块无关 跟界面有关
属性z-index:定位时设置层级关系,数字越大越靠上
clear: both; 清除浮动 left both right 位置上
溢出处理: overflow-y: scroll
隐藏 : visibility: hidden; 位置存在
display: none; 不存在
Display:block行内元素转换为块元素
Display: inline设置块元素转行内元素
Display:inline-block:块元素横向排列同时保留块元素的特性
渐变:圆形: border-radius: 50%;
从内向外:background-image: radial-gradient(yellow,green);
从上到下: background-image: linear-gradient(yellow,green);
弹性布局:{
display: flex;(默认:从左到右,上端对齐 ,不换行)
从右到左: flex-direction: row-reverse;
从上到下 : flex-direction: column;
从下到上 : flex-direction: column-reverse;
自动换行 ,warp第一行在最上面:flex-wrap: wrap;
自动换行 ,warp第一行在最下面: flex-wrap: wrap-reverse;
对齐 : justify-content: flex-start;
右对齐 : justify-content: flex-end;
居中对其: justify-content: center;
两端对齐 : justify-content: space-between;
间隔相同 :justify-content: space-around;
下端对齐 : align-items: flex-end;
中间对齐 : align-items: center;
单独设置对齐方式 : align-self: flex-end;
排序顺序 order越小越靠前: order: 1;
}
JS:
var 类似全局变量
let 局部变量
const 常量
数据类型:typeof(变量)返回变量的数据类型
字符串 数字number 对象object 布尔
在网页输出 document.write("<h1>123</h1>");
控制台输出 console.log("hello world");
弹窗 alert(" tanC");
询问 confirm("are you already");
输入对话框prompt()
==和===区别 !==和!=区别
==比较的是内容
===比较的是内容和数据类型是否否相同
!=内容是否不同
!==内容和数据类型至少有一项不相同
常用事件:
Onclick:点击事件
Onblur:光标失去焦点
Onfocus:聚集焦点
Onsubmit:提交事件
Onmouseover:鼠标移入事件
Onmouseout:鼠标移出事件
常用的Js内置函数:
parseInt()把字符串解析成数字,并返回一个正数
parseFloat()把字符串解析成数字,并返回一个小数
IsNaN()判断是否是非数字
Number对象
toString():数字转字符串
toFIxed(n)保留n位小数 四舍五入 不足用0填充
计时函数
SetTImeout(”调用的函数“,等待的毫秒数):等待多长时间执行一次,如果要多次执行,让调用函数内容调用SetTImeout()
clearTimeout(setTImeout()返回的id值):清除setTimeout设置的定时
Setinerval(调用的函数,间隔的毫秒数):每隔多长时间执行一次
ClearInerval(setINerval()返回的id值):清除setInerval设置的定时
对象:String JS对象-String-CSDN博客
数组对象 JS对象-数组(Array)_lcatake的博客-CSDN博客JS对象-String-CSDN博客
日期对象的创建
Var date = new Date();//创建当前系统时间的日期对象
Var date = new Date(2023,9,13);//创建指定的年月日日期对象
Var date = new Date(2023,9,13,15,43,50);//创建指定的年月日时分秒日期对象
Var date = new Date(‘2023-9-13 15:44:20’);//创建指定的年月日时分秒日期对象
常用函数
getFullYear():从日期对象返回四位年份
getMonth()从日期对象中返回月份0-11实际月份=getMonth()+1
getDate()返回一个月中的某一天
getHours()返回日期对象的小时
getMinutes()返回日期对象的分钟
getSeconds();秒
getDay()返回一个星期中的某天(0-6)0:周末
getMIlliseconds()毫秒
getTime()返回从1970-1-1至今的毫秒数
以及对应的set方法
var rep1=new RegExp("正则表达式");
正则 :rep1.test(str) 查看 str中是否含有rep1 返回布尔类型
rep1.exec(str); 查看 str中是否含有rep1 有则返回rep1,无则返回str
获取、设置属性
.className:获取/设置Class属性
.style:获取/设置css样式
.getAttribute(属性名):获取属性的值
.setAttribute(属性名,属性值):设置属性的值
.hasAttribute(属性名):判断是否包含指定属性
.removeAttribute(属性名):删除指定属性
动态添加节点
创建一个节点 var node =doucument.createElement(“li”)
创建一个文本节点 var textnode = ‘hello’;
元素节点追加文本节点
node.appendChild(textnode);
找到父节点
Var father = document.getElementByTagNamr(‘ul’)[0];
父节点追加子节点 father.appendChild(node);
动态删除节点
找到要删除的节点
Var chilenode = document.getELementById(‘one’);
找到父节点
Var fathernode = document.getElementById(‘box’);
父节点上删除子节点
fathernode.removeChild(childnode);
JQ:
Jq的基本使用_lcatake的博客-CSDN博客
jq的动画
JS的动画_lcatake的博客-CSDN博客
相关文章:
Web 整合
HTML span 行内元素 p 块级元素 br/ 强制换行 i em倾斜 b strong 加粗 u 下划线 mark 高亮 超链接 a :a href"链接地址" target"_blank" alt"可替文本" title"文字提示" tartget:_self 自己界面打开 _…...
hasOwnProperty 方法解析
一、含义: hasOwnProperty 是 JavaScript 中的一个内置方法,用于检查对象是否具有指定名称的属性。 具体来说,hasOwnProperty 方法用于判断一个对象是否拥有某个指定的属性,而不是继承自原型链的属性。它是一个布尔值方法&#…...
使用 nohup 运行 Python 脚本
简介:在数据科学、Web 开发或者其他需要长时间运行的任务中,我们经常需要让 Python 脚本在后台运行。尤其是在远程服务器上,可能因为网络不稳定或需要执行多个任务,我们不希望 Python 脚本因为终端关闭而被终止。这时,…...
Django:五、登录界面实现动态图片验证码
一、下载包 pip install pillow 二、代码 这是一个函数,无输入,返回两个值。一个值是图片,一个值是图片中的数字及字母。 需要注意:font_fileMonaco.ttf 是一个验证码字体文件,如有需要,可三连私信。 …...
GPT,GPT-2,GPT-3,InstructGPT的进化之路
ChatGPT 火遍圈内外,突然之间,好多人开始想要了解 NLP 这个领域,想知道 ChatGPT 到底是个什么?作为在这个行业奋斗5年的从业者,真的很开心让人们知道有一群人在干着这么样的一件事情。这也是我结合各位大佬的文章&…...
firefox_dev_linux下载安装配置(部分系统自带包请看结尾)
download 从 Firefox 的官方网站下载 Firefox Developer Edition 的 tar 文件 firefox_dev_linux_download # 终端快速下载 wget https://download.mozilla.org/?productfirefox-devedition-latest-ssl&oslinux64&langen-US彻底删除自带原版 # apt系 sudo apt --pu…...
vim缓存-交换文件
Catf1agCTF靶场 web swp 题目链接:http://catf1ag.cn/ 个人博客:https://sword-blogs.com/ 题目考点: vim在编辑文档的过程中如果异常退出,会产生缓存文件 vim 交换文件名 参考文章:vim手册 https://yianwillis.…...
Hive 优化建议与策略
目录 编辑 一、Hive优化总体思想 二、具体优化措施、策略 2.1 分析问题得手段 2.2 Hive的抓取策略 2.2.1 策略设置 2.2.2 策略对比效果 2.3 Hive本地模式 2.3.1 设置开启Hive本地模式 2.3.2 对比效果 2.3.2.1 开启前 2.3.2.2 开启后 2.4 Hive并行模式 2.5 Hive…...
CentOS 7.5 centos failed to load selinux policy 错误解决方法
这是个 selinux 使能导致的, 关闭即可 在进入到内核选中界面,选中要启动的内核, 按键盘 e 就会进入启动参数界面 进入启动参数界面如图,按上下键找到 UTF8 UTF8如图, 添加 selinux0 添加完成如图, 按 ctr…...
注入之SQLMAP(工具注入)
i sqlmap是一个自动化的SQL注入工具,其主要功能是扫描,发现并利用给定的URL和SQL注入漏洞,其广泛的功能和选项包括数据库指纹,枚举,数据库提权,访问目标文件系统,并在获取操作权限时执行任…...
Linux学习资源Index
由于Linux是支撑“云计算”的最核心、最底层、最重要的技术,持续提升自已的Linux水平是必须的,这里将不断更新的Linux学习索引。 书籍 书籍首页 - Documentation (rockylinux.org) WWW链接 提定发行版 RockyLinux Rocky Linux Download Rocky | R…...
什么是SVG(可缩放矢量图形)?它与普通图像格式有何不同?
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是SVG?⭐ 与普通图像格式的不同⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚…...
求生之路2服务器搭建插件安装及详细的游戏参数配置教程windows
求生之路2服务器搭建插件安装及详细的游戏参数配置教程windows 大家好我是艾西,最近研究了下 l4d2(求生之路2)这款游戏的搭建以及架设过程。今天就给喜欢l4d2这款游戏的小伙伴们分享下怎么搭建架设一个自己的服务器。毕竟自己当服主是热爱游…...
React TypeScript 定义组件的各种方式
目录 举例说明1. 使用 class 定义2. 使用函数定义2.1 使用普通函数2.2 使用函数组件 举例说明 比如我们要定义一个计数器 Counter,它包含一个 label 和一个 button,计数器的初始值由外部传入,点击 button 计数加 1: 这虽然是个简单组件&…...
互联网摸鱼日报(2023-09-20)
互联网摸鱼日报(2023-09-20) 36氪新闻 国货美妆这五年:押注头部主播,追求极致流量中遭反噬 处于水深火热之中的奈飞该如何自救? 一头“灰犀牛”将冲击美国 年轻人花钱的样子变了 金V之后再推橙V,微博正试图重建创作者生态 …...
AWS入列CNCF基金会
7月27日,IT之家曾经报道,微软加入Linux旗下CNCF基金会,在这之后不到一个月的今天,亚马逊AWS也宣布,以铂金身份加入此基金会。 CNCF,全称Cloud Native Computing Fundation,该基金会旨在使得容器…...
岭回归与LASSO回归:解析两大经典线性回归方法
文章目录 🍋引言🍋岭回归(Ridge Regression)🍋实战---岭回归🍋LASSO回归(LASSO Regression)🍋实战---LASSO回归🍋岭回归和LASSO哪个更容易是直线🍋…...
数学建模——微分方程介绍
一、基础知识 1、一阶微分方程 称为一阶微分方程。y(x0)y0为定解条件。 其常规求解方法: (1)变量分离 再两边积分就可以求出通解。 (2)一阶线性求解公式 通解公式: 有些一阶微分方程需要通过整体代换…...
Minio入门系列【7】Spring Boot集成Minio
1 前言 之前介绍了如何使用Minio提供的JAVA SDK进行上传和下载文件,在此基础上,我们可以使用spring boot集成Minio JAVA SDK,添加自动配置、装配、客户端管理等功能,简化开发 2 Spring Boot集成Minio 2.1 环境搭建 首先我们搭…...
抖音视频下载.py(23年9月份可用)
声明:仅供学习交流使用!!! 抖音无水印视频下载; 首先登录抖音网页端 打开要下载的视频userId 然后编码实现下载 最后是完整代码,拿走就能用那种: # _*_ coding:utf-8 _*_import json import requests import time import randomheaders = """Accept: a…...
项目基本搭建流程
项目创立:webapp 设置maven 的和settings.xml 的地址 手动建立java文件夹和resource文件夹 一.分层 二.使用generator 来自动建立实体类dao 和dao接口,存放sql文件的xml;并复制到项目中(路径可能可以直接设置) 三. 配置文件&…...
学习pytorch11 神经网络-非线性激活
神经网络-非线性激活 官网文档常用1 ReLUinplace 常用2 Sigmoid 代码logs B站小土堆学习pytorch视频 非常棒的up主,讲的很详细明白 官网文档 https://pytorch.org/docs/stable/nn.html#non-linear-activations-weighted-sum-nonlinearity 常用1 ReLU 对输入做截断…...
Jenkins学习笔记2
Jenkins下载安装: 从清华源开源镜像站上下载jenkins的安装包: 安装的是这个版本。 关于软件的版本,尽量使用LTS,长期支持。 首先是安装openjdk: yum install fontconfig java-11-openjdk[rootlocalhost soft]# java …...
自动化测试:yaml结合ddt实现数据驱动!
在pythonunittestseleniumddt的框架中,数据驱动常见有以下几种方式实现: Csv/txtExcelYAML 本文主要给大家介绍测试数据存储在YAML文件中的使用场景。首先先来简单介绍一下YAML。 1. 什么是YAML 一种标记语言类似YAML,它实质上是一种通用…...
高效管理,轻松追踪——Chrono Plus for Mac任务管理工具
Chrono Plus for Mac是一款专注于任务管理和跟踪的应用程序。它提供了一种直观、清晰的界面,使您能够轻松创建、安排和分类任务。无论是个人项目还是团队合作,Chrono Plus都能为您提供一种有效组织和管理任务的方式。 这个应用程序具有多种强大的功能&a…...
python项目2to3方案预研
目录 官方工具2to3工具安装参数解释基本使用工具缺陷 future工具安装参数解释基本使用工具缺陷 python-modernize工具安装参数解释基本使用工具缺陷 pyupgrade工具安装参数解释基本使用工具缺陷 对比 官方工具2to3 2to3 是Python官方提供的用于将Python 2代码转换为Python 3代…...
MongoDB 是什么和使用场景概述(技术选型)
一、从NOSQL(Not Only SQL)说起 常见的数据库可以分为下面的两种类型: RDBMS(关系型数据库):常见的关系型数据库有 Oracle、DB2、Microsoft SQL Server、Microsoft Access、MySQL;NoSQL(非关系型数据库&a…...
打印 pyspark.sql.dataframe.DataFrame 有哪些列
在 PySpark 中,要打印 pyspark.sql.dataframe.DataFrame 的列,可以使用 columns 属性。以下是一个示例代码: from pyspark.sql import SparkSession# 创建 SparkSession spark SparkSession.builder.getOrCreate()# 假设您的 DataFrame 名称…...
什么是虚拟DOM(Virtual DOM)?它在前端框架中的作用是什么?
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是虚拟DOM(Virtual DOM)?⭐ 虚拟DOM 在前端框架中的作用⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦&…...
QT实现简易时钟
头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPaintEvent> #include <QDebug> #include <QPainter> #include <QTimerEvent> #include <QTimer> #include <QTime>QT_BEGIN_NAMESPACE namespace Ui { cl…...
广州地铁5号线/海南seo
目录 1.市场上常见的数据库 2.数据库语句 2.1DDL语句 2.2DML数据操作语句 2.3DQL语句 2.4DCL语句 3.数据约束 4.表关系 5.数据库的三范式 6.多表查询(有关系的表) 7.子查询 1.市场上常见的数据库 Oracle Mysql SQLServer 2.数据库语句 DD…...
做动车哪个网站查/东莞seo黑帽培训
什么是值传递?什么是引用传递?值传递是将要传递的值作为一副本传递.如int i4;int ji;这里相当于把14复制了一个副本给j,结果是i4,j4引用传递,传递的是引用对象的内存地址int *p,*p1;int j5; *pj; //这里是把j在内存当中的地址赋给了指针pp1p; //这里是把指针p中保存的地址(就…...
b2b免费信息平台/青岛官网seo
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid1106Problem Description输入一行数字,如果我们把这行数字中的‘5’都看成空格,那么就得到一行用空格分割的若干非负整数(可能有些整数以‘0’开头,这些头部的‘0…...
wordpress需求规划书/如何进行品牌营销
接上篇:实战 webpack 4 配置解析一 WEBPACK 配置的共同约定 我为所有 webpack 配置文件(webpack.common.js,webpack.dev.js 和webpack.prod.js)采用了一些约定,以便一致性。 每个配置文件都有两个内部配置ÿ…...
wordpress模板网站/河南网站网络营销推广
1.两个变量值的交换 let a 1, b 2; a [b, b a][0]; console.log(a); //2 console.log(b); //12.浮点数快速向下取整 let a 3.11564548; let b 3.61456484; console.log(a | 0); //3 console.log(~~b); //3这种方式要比同类的parseInt()和Math.round()要快ÿ…...
wordpress排版代码/中国新闻最新消息
在 微服务的服务间通信与服务治理 一文中,我们提到扇贝目前的 Service Mesh 架构是基于 Envoy 来做的。 本文的主角就是这个新秀 Envoy 抛弃了 Nginx, 选择了 Envoy 其实之前扇贝是大量使用 Nginx 的,无论是对于其部署,配置还是调优都更为有经…...