HTML

HTML三层架构

网站前端三层(重要!!!)html 结构层    --html结构css   表现层     --决定html的样式javascript 动作层(逻辑层、行为层)    --决定html如何交互我们追求的不是完全最新的版本  而是适应 符合当前的 主流的版本

HTML规则

在做一个正式的网页或者是项目的时候
1.任何时候  文件 文件夹 图片 都不能有任何的中文,铁律,必须遵守
2.任何文件名称 或者类名 或者id名称,或者任何的变量,都必须是语义化
3.一个网站中必须有一个文件名称是“inedx.html”同时此文件需要放置在根目录
4.路径文件夹的命名不可以有大写

<></> 标签

块级元素与行级元素

块级元素

块级元素 可以设置宽高 独占一块区域	display:block;块级元素可以改变上下的, margin-top/bottom,padding-top/bottom,同时能改变height和line-heightul、li、p、h、div、hr、

行级元素

不可以设置宽高  但是默认宽度是auto(100%)	display:inline;行内元素只能改变左右的边距,margin-left/right,padding-left/right

行内块级元素

display:inline-block;  即是行内元素也是块级元素
占行内元素的位置,却可以实现块级元素的效果

特殊的行内元素

*行内块级元素  input标签  img标签
*内联元素	a标签

单标签

 <br /> <input /> <hr/> <img /> <frame/> <meta/>...
*单标签需要闭合  结尾要有单杠

img标签

插入图片

<img src="图片来源" alt="替换文本" title="全局属性每个标记都会有提示信息"  align="图片水平对齐方式left默认/right-----top/middle/bottom图片后面的文字的对齐方式" width="像素/百分比" height="" />*说明:路径分为:相对路径(从当前文档路径开始)绝对路径(从盘符开始)-少用
*src 图片的路径
1.返回上级   ../***/名称
2.打开下级   **/***/名称
*alt 图片无法显示时,显示的文本
*align 对齐方式
1.left 左对齐(默认)
2.center 居中对齐
3.right 右对齐
*width 宽度 可以用像素/百分比表示大小
*height 高度 可以用像素/百分比表示大小*清除图片之间的间隙
1.img标签放在一排写(适用于少量的img)
2.图片的父级设置font-size=0
3.图片左浮动
4.图片display:block
5.vertical-align:bottom (最好使用这一条解决)

embed 标签

多媒体标签

插入多媒体--插入音频.mp3 .midi 插入视频.avi要求:会用<embed/>插入音频即可<embed src="资源目录/文件名" hidden="是否隐藏" />

input标签

表单表单域

[onchange]: 当值改变时检查输入字段,属性适用于:、 以及 元素。

autocomplete  	开启/关闭 提示下拉框
novalidate		写在form标签中的域对象,使emal在提交时不需要验证
lable			可以用for来绑定email的id,再直接获取信息		type:
1.text			(文本)
2.password		(密码)
3.submit		(提交)
4.file			(文件	)
5.hidden		(隐藏域)
6.radio			(单选按钮)
7.checkbox		(多选按钮)
8.button		(按钮)
9.reset			(重置)
10.image		(将图片作为提交按钮)
---H5下面是新添加的表单---
11.email		(验证不完全,@后面有值就能过,不建议使用)
12.url			(只要有http就能通过,http:/https:  也是坑)
13.number		(用于选择数量 max min step value)
14.range		(滑动条 max min step value)
15.Date Pickers	(Date month week time datetime-local 兼容差)
16.search		(搜索域 和text的区别就在于鼠标上移又X,能清空文本)
17.color		(调色板)
18.date			(定义 date 控件(包括年、月、日,不包括时间))
19.datetime		(定义 date 和 time 控件包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)
20.datetime-local	(定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区))
21.month		(定义 month 和 year 控件(不带时区))
22.week			(定义 week 和 year 控件(不带时区))
23.tel			(定义用于输入电话号码的字段)type 选择input标签的样式
placeholder 默认提示信息 输入信息时消失 即文本框默认值
value 也是默认提示信息,但是需要手动删除提示信息再输入(不常用)
readonly 只读 不可修改信息/disabled 禁用 不可修改信息 有灰色背景色
size 输入框的长度

iframe标签

链接一个网页在现在的页面里(内联框架)src填写想要链接的网页
width 宽度
height 高度
frameborder 边框
name 自己定义该网页的名字
(通过a标签的target等于该网页的名字来实现跳跃)

hr标签

一条横线

<hr width="宽度" size="粗细" color="颜色" align="水平对齐方式left/center默认/right" > 

br标签

强制换行   非常不允许出现在制作的页面中	一般是由非程序员在‘不懂行’的情况下才大概率会出现

embed标签

标签定义嵌入的内容   比如插件	可以设置宽高	嵌入内容的类型	还有src

双标签

<font></font><h3></h3><p></p>等等
*双标签有同样的标签名,同时标签名前加上单杠,表示为结束标签

div标签

div		俗称盒子
现在的页面中出现最多的标签  经常用于各种布局

span标签

没有任何实际作用,而语义也是表示一段普通文本  我们经常用它来进行css操作
一个‘成熟的’‘好的’网页 基本都是有span和div完成所有的布局

p标签

文本

 <p align="水平对齐方式left默认/center/right"></p>
*一个p相当于一个回车换行,/p相当于一个回车换行

select标签

下拉菜单

[onchange]: 当值改变时检查输入字段,属性适用于:、 以及 元素。

<select name="" id="" size="" multiple></select>

ul标签

无序列表

[恢复列表项]: list-style-position:inside;与list-style-type:(任意);搭配使用。 原因:通配符将padding和margin清空所以不能够恢复或者使用简写list-style:disc(任意) inside(或者outside);同样能达到该效果
[改变符号颜色 ]: 可以在li标签中单独写个style例如:style=color: #fc6396

<ul type="项目符号disc/circle/square"><li>列表项</li>
</ul>disc : 默认值。实心圆 
circle : 空心圆 
square : 实心方块 
decimal : 阿拉伯数字 
lower-roman : 小写罗马数字 
upper-roman : 大写罗马数字 
lower-alpha : 小写英文字母 
list-style-position:inside(占位)\outside(不占位)

ol标签

有序列表

[恢复列表项]: list-style-position:inside;与list-style-type:(任意);搭配使用。 原因:通配符将padding和margin清空所以不能够恢复或者使用简写list-style:disc(任意) inside;同样能达到该效果

	<ol type="1/a/A/i/I" start="从第几项开始"><li></li></ol>

dl标签

自定义列表

	<dl><dt>定义</dt><dd>解释1</dd><dd>解释2</dd><dd>解释3</dd></dl>

textarea标签

文本域

table标签

表格

[cellpadding失效]: 在通配符选择器中的 padding:0; 会使th,td继承到的padding失效,所以此时需要在通配符清除padding中,使用not(th):not(td)排除th,td的padding清空效果。从而使cellpadding生效

(1).表格的功能:--显示行列式数据(举例:课程表、成绩表、工资表、出勤表等等)--布局(定位,把你想定位的标记放到<td></td>这个容器中[<td>单元格</td>])
(2).表格标记:<table border="表格的边框" width="表格的宽度" height="表格的高度" bgcolor="表格的背景颜色" background="表格的背景图片"  cellspacing="单元格之间的间距" cellpadding="单元格里面的内容距离边框的距离" align="表格的水平对齐方式left/center/right"><caption>表名</caption><tbody><th>标题行</th>	//默认居中并且字体加粗<tr><td></td><td></td></td></td></tr></tbody></table>
(3).表格中的行:<tr align="单元格中内容水平对齐方式left/center/right" valign="单元格中内容垂直对齐方式top/middle/bottom"></tr>
(4).表格中单元格属性:<table><caption>表名</caption><tbody><th>标题行</th>	//默认居中并且字体加粗<tr><td align="单元格中内容水平对齐方式left/center/right" valign="单元格中内容垂直对齐方式top/middle/bottom" bgcolor="" background="" width="" height="" colspan="跨列合并单元格" rowspan="跨行合并单元格"></td></tr></tbody></table> *thead  表示标题行  页眉
*tbody  表示主题
*tfoot  表示表格页脚
(限制某一部分的区域 写动态生成的时候一定要写  虽然tbody不写会自动出现,但是会出现多个,会浪费浏览器启动的时间,所以是不合理的,一定要自己写    动态添加信息时在JS中添加,用到$符号)
*border 边框大小 (px(粗细)/solid(直线)/dashed(虚线)/颜色
*width 宽度
*height 高度
*bgcolor 背景颜色 可以用英文/RGB
*background 背景图片 需要用路径表示出图片所在 类似与url/src
*cellspacing 表格里单元格之间的间距
*cellpadding 表格里单元格边框与内容的距离
*align 水平对齐方式 用在table标签时表示表格的对齐方式,用在tr标签里时表示当前行的对齐方式 用在td标签时标签该单元格的对齐方式  left(默认)/center/right
*valign 垂直对齐方式 top(通常)/middle/bottom
*colspan 跨列合并单元格 几个
*rowspan 跨行合并单元格 几个
*padding 内边距 有上下左右四面
*margin 外边距 有上下左右四面 也可为负值
*col  表示一列
*colgroup  表示一组列
*caption  表示表格标题

pre标签

预格式化

文章段落格式化
保留源代码中空格以及换行符,不忽略源代码中的空格,与P标签相反,不怎么使用此标签

a标签

超链接

href是必须的 否则就是空元素 如果值是以http://开头的地址,就以为着点击跳跃

 <a href="链接的资源url#name锚点名字" title="每个标记都有的属性,全局属性,鼠标划上去显示一个小框提示" target="_self本窗口覆盖显示/_blank新窗口显示href资源"></a>*url 链接的资源
有相对路径和绝对路径  相对路径就是相对于链接页面的另一个页面路径  而绝对路径则是从磁盘符开始的完整链接属性(而绝对路径一旦发生改变,就会失效,所以一般不适用)
*name 定义的名字
*title 鼠标上移时提示的信息
*target 进入、打开链接的方式
1._self 在当前窗口打开
2._blank 在新的窗口打开 根据浏览器的不同 可能会出现新建一个浏览器的效果
3._top _parent 都是给予框架集页面的  _parent表示在父窗口打开文档 _top表示在顶层窗口打开文档(在h5中被废弃.只能使一个新的 iframe元素)

b、Strong标签

加粗文本 突出重点 是H5之前的元素 而H5为了更好的语义化 推出了Strong标签 两者同义

i、em、cite标签

文本斜体,但是em更加语义化 所以推荐在代码过程中是使用

cite实际作用也是倾斜 语义化来说是表示引用其他作品的标题

s、del标签

s标签处于在中间的删除线,从语义化来说表示不准确的删除 是h5之前的版本

del从语义上来说表示删除相关文字 h5的版本,更加语义化,推荐使用

u、ins标签

下划线 从语义上来说ins标签更加强调文本,所以推荐使用

small标签

相对父级字体较小

sub、sup标签

实际作用是数字中的上标(sup)和下标(sub)

code、var、samp、kdb标签

code表示计算机代码片段

var表示编程语言中的变量

samp表示程序或计算机的输出

kdb在当前的页面是不起作用的 属于英文范畴 哪天当它实现效果时 顶端一定是

abbr标签

表示缩写 没有什么实际的作用 就是简单的一段文本缩写

dfn标签

表示定义术语 就是一般的倾斜 从语义上来说就是一个词或者短语的文本

ruby、rp、rt标签

ruby是一个语言元素

rp包括rt包括拼音 而拼音中可以带音标 可以在页面上出现 当你需要使用的时候 就这一个方法 用来为非西方的语言提供支持

dbo标签

设置文字的方向 默认为横向从左至右显示 当dir="rtl"时从右至左显示 一般是做古文网站时才使用

mark标签

给文本加上一个黄色的背景 而且字体为黑色 从语义上来说上下文相关而突出的文本 用于记号 相当于你看书时用一个记号笔做记号

time标签

表示日期和时间 语义化标签

q标签

引用来自别的地方的内容 实际作用就是加上 双引号

marquee标签

移动标签(知道有这个就行,一般用不到)

su

重点抓取想要知道的内容 同样是一个标签,更加语义化更加被强调的文本更容易被看到 所以推荐使用更加语义化更加强调文本的标签写代码

语义化标签

main标签

主要的

section标签

定义文档中的节(section)。 章节、页眉、页脚或文档中的其他部分。 主要用于对网站或应用 程序中页面上的内容进行分块。

<section>
<h1>文档头部</h1>
<p>
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</p>
</section>

article标签

该标签表示文档、页面、应用程序或站点中的自包含成分所构成的一个页面的一部分,并且这部分专门用于独立的分类或复用。例如:一个博客的帖子、一篇文章、一个视频文件等。

<article><h1>标题标题标题</h1><p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p>
</article>

address标签

标签用来在文档中呈现联系信息,包括文档或文档维护者的名字、邮箱、电话号码等。一般包含版权数据、导航信息、备案信息、联系方式等内容

<address>浙江省杭州市下城区
</address>

nav标签

最好用来包含导航栏

<nav><a href="index.php">Home</a><a href="html5_meter.php">Previous</a><a href="html5_noscript.php">Next</a> 
</nav> 
说明:nav标签适用的板块包括普通的导航、侧边栏的导航、页内导航。

hgroup标签

标签是将标题及其子标题进行分组的标签,通常用于对网页或区段(section)的标题进行组合。常用于标题类组合,比如文章的标题与副标题。

<hgroup><h1>主标题</h1><h2>副标题</h2>
</hgroup>

header标签

包头部

标签定义文档的页眉(介绍信息)、标题、logo等。网页中不限制header标签的个数;header标签中可以包含多个”h1-h6”标签、hgroup标签、nav标签、form标签、table标签等。

<header><hgroup><h1>主标题</h1><h2>副标题</h2></hgroup>
</header>

fotter标签

标签包含了与页面、文章或是部分内容有关的信息,可以作为其上层父级内容区块或是一个根区块的脚注,通常包括其相关区块的脚注信息,比如说文章的作者或是日期。作为页面的页脚,其有可能包含了版权或其他重要的法律信息。使用次数无限制。

<footer><p>Copyright 2013 Acme United. All rights reserved.</p>
</footer>

cite标签

倾斜 同

但是兼容性没其他的好

Html5新增标签

figure标签

类似与div,但是比div多个上下18左右40个外边距,同时兼容性不好,不建议使用

figcaption标签

和figure配合使用

details标签

配合summary使用,类似于单击显示其简介、内容,兼容性一般,不常见

mark标签

用于定义带记号的文本,文本背景颜色可以设置为黄色(不能有别的颜色),兼容性也不是很好

progress

项目进度(类似进度条),有max,value两个值

max:最大值
value:当前值

meter标签

同样类似于进度条,表示范围已知,有min,max两个值

HTML5内容模型

HTML元素所能表达内容的描述以及这些元素如何相互关联的描述称为内容模型。(表达内容的描述指某个元素中间应该包含什么内容,互相作用则指的是该元素的前后或者里面能出现什么子或后代元素)内容模型分为大致分为七类

元数据式内容

元数据内容通常是指在head元素里面常常出现的那些元素,包括base、command、link、meta、noscript、script、style和title。

通常用于描述当前文档相关信息或描述当前文档和其他文档之间的关系。

流式内容

文档主体部分使用的大部分元素都是流式内容,几乎所有元素都是流式元素,只有部分元数据式元素不属于流式,它们是base和title

章节式内容

章节式内容可以成为区块式内容,它是用于定义标题及页脚范围的内容,包含article 、aside、nav和section

标题式内容

定义标题的元素h1-h6、hgroup

段落式内容

段落式内容不是用来描述段落的内容,而是描述段落内的内容,常见的a、abbr、img,而表示段落的p不属于段落式内容属于流式内容。

嵌入式内容

嵌入式内容是描述当前文档引用到的其他资源的内容,或者被插入到本文档中的其他伺候内容。例如,音频、视频等。audio、canvas、embed、iframe、img、math、object、svg、video

交互式内容

与用户发生交互的元素,例如,表单、菜单等

盒模型

IE盒模型 W3C盒模型(默认的)

外边距+外边框+内边距+内容

Html5插入音频视频

audio标签

音频

video标签

视频

preload=‘none’ 表示什么都不加载

preload=‘metadata’ 表示播放之前只能加载元数据 宽高 第一帧的画面

preload=‘auto’ 表示尽快下载整个视频

HTML命名规范

https://www.cnblogs.com/ipoplar/p/4539415.html

【布局】
文档 doc
头部 header(hd)
主体 body
尾部 footer(ft)
主栏 main
侧栏 side
容器 box/container
【通用部件】
列表 list
列表项 item
表格 table
表单 form
链接 link
标题 caption/heading/title
菜单 menu
集合 group
条 bar
内容 content
结果 result
【组件】
按钮 button(btn)
字体 icon
下拉菜单 dropdown
工具栏 toolbar
分页 page
缩略图 thumbnail
警告框 alert
进度条 progress
导航条 navbar
导航 nav
子导航 subnav
面包屑 breadcrumb(crumb)
标签 label
徽章 badge
巨幕 jumbotron
面板 panel
洼地 well
标签页 tab
提示框 tooltip
弹出框 popover
轮播图 carousel
手风琴 collapse
定位浮标 affix
【语义化小部件】
品牌 brand
标志 logo
额外部件 addon
版权 copyright
注册 regist(reg)
登录 login
搜索 search
热点 hot
帮助 help
信息 info
提示 tips
开关 toggle
新闻 news
广告 advertise(ad)
排行 top
下载 download
【功能部件】
左浮动 fl
右浮动 fr
清浮动 clear
【状态】
前一个 previous
后一个 next
当前的 current
显示的 show
隐藏的 hide
打开的 open
关闭的 close
选中的 selected
有效的 active
默认的 default
反转的 toggle
禁用的 disabled
危险的 danger
主要的 primary
成功的 success
提醒的 info
警告的 warning
出错的 error
大型的 lg
小型的 sm
超小的 xs
【通用】
最小宽度  warp

Html细节

*谷歌浏览器最小字体大小12px
HTML规范
*标记和属性全部小写
*属性值必须加""
*双标记必须双着用
*单标记必须关闭 <img /> <input />
*标记只能嵌套不能交叉
*文字修饰标记
1.加粗  <b></b> <strong></strong>
2.倾斜  <i></i>  <em></em>
3.下划线 <u></u>
4.删除线<del></del>
5.地址<address></address>	语义化标签
6.上标 <sup></sup>
7.下标 <sub></sub>
*块级元素和行内元素的区别
行内元素只能改变左右的边距,margin-left/right,padding-left/right 而块级元素可以改变上下的, margin-top/bottom,padding-top/bottom,同时能改变height和line-height
*通配符清除内外边距 *{paddming:0; margin:0} 
*父级用position:relative相对定位
同时子级使用position:absolute
*什么是盒子
1.一个盒子的宽度
border-left+padding-left+center+padding-right+border-right
2.盒图
margin-left+border-left+padding-left+center+padding-right+border-right+margin-right
*比例居中
margin:0 auto(避免缩放浏览器时内容发生变化)
一般用.wrap来命名
*清除浮动 解决塌陷
浮动部分写clear:both(清除上一部分的浮动,需要写在最后一个标签里)
最大的浮动对象下写overflow:hidden(解决塌陷,溢出隐藏)
*固定大小写入超出范围的内容时,可以用overflow:scroll,显示出滚动条可以拖动看内容,而值为auto时,则是自动辨别是否有内容溢出,有溢出则出现滚动条
(overflow:hidden 还会使超出边框大小(溢出)的部分,隐藏)
*文字溢出隐藏 使用该方法时 需要调整父级和自身的宽度(width) 同时还要将以下三条语句同时使用
overflow: hidden;
text-overflow: ellipsis;	文本溢出时显示省略号
white-space: nowrap;	文本不换行
*padding,margin的参数顺序:上右下左
*margin可以为负值,而且是大的值优先
*margin合并的解决方法
给父级设置border-top,margin-top,或者给子级display:inline-block
*菲ie图标
1.http://www.favicon-icon-generator.com/(ico图标在线制作)
2.尺寸 32*32/64*64
3.ico图标放在网站的根目录
4.在head标签里加入下方代码
<link rel="shortcot icon" href="(图片路径)">
*选择器
通配符(*) 标签(id) 类(class) 后代 子代 群组(,)
1.id 是唯一的 优先于class
*清除图片之间的间隙
1.img标签放在一排写(适用于少量的img)
2.图片的父级设置font-size=0
3.图片左浮动
4.图片display:block
*倾斜标签
<em> <i> <cite> <address>四个
*唯一的计算函数
calc,在计算符号的两边一定要加空格
*移动端自动判断分辨率,自适应字体
写移动端时可以设置html的字体大小,再设置body的字体大小单位为rem,则可根据手机分辨率,更改html的字体大小,从而body的字体大小在每部不同分辨率的手机上字体不同
*第一个子集的margin-top会影响到父级
1.给父级加一个overflow:hidden
2.用padding-top
*h1的次数
一个网页不要使用两次h1(对搜索引擎的优化不好)
font-weight:500是标准字体厚度
*层级设置
z-index:通常以9为层级,一个9两个9....
如果遇到z-index写了不生效的时候,可以通过浮动,定位来解决
*html的读条顺序
是从上往下一条一条的读取实行,同样的link外链的css,如果有相同的代码,那么,排在下面的css,会覆盖在上面的css
*根据屏幕改变的值
vw:根据屏幕改变宽度
vh:根据屏幕改变高度
*遮罩效果(父级透明 子级不透明)
父级使用background-color:rgba(0,0,0,0.4)  不会使子级透明度改变
*语义化标签的利弊
使用语义化标签确实能够提高网页的‘搜索排名’ 但是大多数的网站不过多使用语义化标签的原因是因为不能够确定用户的设备是否能够兼容  因为语义化标签是ie8 ie9开始实行的  如果是ie6之类的设备 则不能够兼容  所以写代码还是要多考虑细节
*乱速假文  vscode随机生成文字 jw**
*cellpadding失效 在通配符选择器中的 padding:0; 会使th,td继承到的padding失效,所以此时需要在通配符清除padding中,使用not(th):not(td)排除th,td的padding清空效果。从而使cellpadding生效   但同时,此方法也会将通配符的权重提升
*ul,ol恢复列表项 list-style-position:inside;与list-style-type:(任意);搭配使用。  原因:通配符将padding和margin清空所以不能够恢复  或者使用简写list-style:disc(任意) inside(outside);同样能达到该效果  为outside时 li与列表项分开独占位置  不会是内嵌形式
*文本元素中不能方文档元素  文档元素中不能放文本元素
*制作小三角形
border-top:10px solid #000;
border-left:10px solid transparent;
border-right:10px solid transparent;
向下的三角形
*大小铺满全屏
position:absolute;然后上下左右都为0;
*html的第一行代码代表告诉浏览器目前使用的html是最新版本的
*!important 重要的css样式  权限最重  同时写在此样式前的样式会不生效  在标准的css文件中写的话  会报错,scss less等编译文件会自动修复这个问题  但是不建议使用

CSS

权重

标签选择器=1

class=10

id=100

行内=1000

!important; //写在cssStyle里 分号里

在需要最大权重的后面,加上!important就可以权重最大化。(通常用于顶掉别人那拿来的的css)

多列式布局

p{columns:width count;column-gap:列间距 像素;column-rule:列边线 相当于边框线column-span:all全部跨列  none不跨列
}*width  宽度
*count  列数

CSS3布局

响应式布局

媒体查询

IE9+

media=’print’ 打印机 speech=‘屏幕阅读器’

all 所有

screen 电脑 平板 手机等

speech 屏幕阅读器等发生设备

建议先从移动端页面开始写

@media all and (min-width:1000px){body{background:skyblue;}
}

多列式布局

p{columns:width count;column-gap:列间距 像素;column-rule:列边线 相当于边框线column-span:all全部跨列  none不跨列
}*width  宽度
*count  列数

表格布局

04 05年时代的布局方式 一般是后台数据渲染的时候使用 因为在打开浏览器的时候 会等个3s~5s的时间 用户的体验不好所以被淘汰了

弹性布局

IE10-不兼容

旧版本

火狐4–火狐9/谷歌4–谷歌31

display:inline-box/box/flex/;
box-orient:horizontal(从左向右 旧版)/vertical(垂直 旧版)/inline-axis(沿着内联轴排列显示)/block-axis(沿着块级轴显示)
box-direction:normal(默认)/reverse(逆序)
box-pack:start(起点)/end(结束点)/center(中间)/justify(平均分布)
box-align:start(以顶部为基准,清楚下方的额外空间)/end(以底部为基准)/center(以中部为基准)/baseline(以项目为基准)/stretch(默认,即还原真实高度)
box-flex:1/2/3/...(设置每个项目的比例,可以单独给某一个写上)
box-ordinal-grop:给项目排位置(需要给每一个项目都写)*旧版的排版里不会换行 即使有box-lines属性  原因是不支持
*box-pack:justify;  会使内容不够的盒子把高度撑开至同类中的最高高度  可以用box-align:stretch来清理

新版本

垂直布局方式   display:flex(块级)/inline-flex(内联级);
flex-direction(排列方式):column(垂直)/column-reverse(从下向上)/row(从左向右 默认)/row-reverse(从右向左);  
flex-wrap(换行):wrap(当父容器无法容缩时  换行)/nowrap(不换行 默认)/wrap-reverse(换行 相反);
flex-flow(复合属性):排列方式和换行的简写方式
juslity-content(分列方式):center(中心点靠齐)/flex-start(以起点靠齐)/flex-end(以结束点靠齐)/space-between(两端对齐)/space-around(平均分布 但是两端保留一半空间)/space-evenly(平均分布 新增的);
align-items:flex-start(以顶部为基准,清理下部空间)/flex-end(以底部为基准)/center(清楚额外空间,以中间为基准)/baseline(以基准线清理额外空间)/stretch(默认 填充整个容器)*给元素写flex:1/2/3...时为给元素分配所占的比例
*给元素写order:1/2/3...时为给元素排序(和旧版一样 排序时需要给每个元素都写)
*当需要单独清楚一个子元素的额外空间时 align-self:center(属性和父元素的一样)
*display:inline-box  作为行内块级盒子
*display:box  把容器作为块级弹性盒子显示  09年07月  面向群体是早期浏览器的一些弹性布局方案 属于旧版  谷歌不启用*盒块布局方式
带前缀的兼容写上面  不带前缀的写最下面,因为上面的代码会覆盖下面的,所以带前缀的兼容写最上面。
*火狐 -moz-
*谷歌 -webkit-

CSS边框样式设置

box-sizing
border
border-radius设置一个值:border-radius:值;设置两个值: border-radius:top-left/bottom-right   top-right/bottom-left设置三个值:border-radius:top-left  top-right/bottom-left   bottom-right设置四个值:border-radius:top-left   top-right  bottom-right  bottom-leftborder-shadowsinset:阴影类型,可选值。如果不设置默认是外部阴影,设置为inset为内阴影。x-offset:阴影水平偏移量y-offset:阴影垂直偏移量blur-radius:阴影模糊半径,可选值color:阴影颜色,可选值box-shadow: [inset]<x-offset><y-offset>[blur-radius][color];border-width 设置边框粗细
border-color 设置边框颜色
name - 指定颜色的名称,如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"
border-style 设置边框样式:dashed: 定义一个虚线边框solid: 定义实线边框dotted: 定义一个点线边框double: 定义两个边框。 两个边框的宽度和 border-width 的值相同groove: 定义3D沟槽边框。效果取决于边框的颜色值ridge: 定义3D脊边框。效果取决于边框的颜色值inset:定义一个3D的嵌入边框。效果取决于边框的颜色值outset: 定义一个3D突出边框。 效果取决于边框的颜色值

CSS背景样式设置

[bcakground]: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

background-position:可以有px % left center right为值background-attachment:默认scroll,即原始状态  fixed只有这个值,可以使背景图片固定在页面上,同background-fixedbackground-color:设置背景颜色background-image:url("")设置背景图片 双引号可有可无background-repeat:设置图片是否平铺有repeat-x repeat-y no-repeat

图片精灵

background:url() px(纵坐标) px(横坐标) no-repeat;
取个小图标时用..两个px类似于取坐标

CSS新增

background-size:auto,length,percentage,cover,contain,background-origin有border-box,padding-box,content-box三个值
背景远点属性指定绘制背景图片的起点,兼容性没有background-position好background-clip背景裁切属性 border-box,padding-box,content-boxauto:默认值
length:以px为单位 可以自己设定背景图片大小,也可以设置为100%
cover:平铺图片,相当于100%,但是容易导致图片失真
contain:将背景图自适应放大到容器大小,但是不会铺满
border-box从border的外边缘开始显示背景图片
padding-box从内边框处开始显示,以外的全部裁剪
content-box从内容处开始显示,以外的全部裁剪

CSS文本溢出设置

文本溢出:
clip不显示省略标记
ellipsis文本溢出省略标记
文本换行:
word-wrap:break-word将内容在边界内换行(不截断英文单词换行)(不省空间)
word-break:break-all强行截断英文单词换行(达到词内换行效果)(省空间)

CSS空白符

while-space属性用于处理空白符normal:默认值 空白符会被浏览器忽略(成为一个空格)pre:空白符会被浏览器保留,类似于html中的<pre>标记nowrap:文本不会换行,文本会在同一行显示,直到碰到<br>为止

CSS定位元素

float:left(左)/right(右)
z-index:0(默认)/1++
position: absolute绝对定位/relative相对定位/fixed固定定位/static默认值/inherit*float浮动 为left时左浮动,为right时右浮动
*z-index层叠顺序 数值越大,显示优先级越高
*relative 相对于自己位置进行定位,原来的位置依然占用(不脱离文档流)
*fixed 将目标固定在页面中的位置,即使滚轮滚动,也不会改变位置
*absolute 相对于最近的父级进行定位 用margin/padding移动目标,原来位置不占用(脱离文档流)

CSS过渡

transition	过度属性 过渡时间  过渡函数  过渡动画(延迟)
1.transition-property	设置对象中参与过渡的属性(可同时写多个或all)
2.transition-duration	设置对象中过渡的时间(s)
3.transition-timing-function	设置对象中过渡的动画类型(过渡函数)
1)ease 由快到慢,再逐渐变慢(默认)
2)linear 	匀速
3)ease-in	加速
4)ease-out	减速
5)ease-in-out 	先加速后减速
4.transition-delay	设置对象延迟过渡的时间

CSS动画

animation共有8个子属性
animation-name:设置对象所应用的动画名称 
animation-duration:设置对象动画的持续时间 默认为none,还有time值,为一次动画从0%到100%持续的时间
animation-timing-function:设置对象动画的过渡类型
animation-delay :设置对象动画延迟的时间
animation-iteration-count :设置对象动画的循环次数
animation-direction:设置对象动画在循环中是否反向运动
animation-fill-mode:设置对象动画时间之外的状态
animation-play-state:设置对象动画的状态。w3c正考虑是否将该属性移除,因为动画的状态可以通过其它的方式实现,比如重设样式

animation-name

设置对象所应用的动画名称 默认为none,使用时的值就是由@keyframes name创建的动画名称(名称最好不要语义化)@keyframes a{0%{width:200px;height:200px}30%{width:500px;height:500px}(可以有0%~100%的动画过程效果设定)(同样可以设定某一个值的效果同上一步的效果,以此达到动画过程中的暂停效果 )}

animation-duration

设置对象动画的持续时间 
默认值  none
time(s)   为一次动画从0%到100%持续的时间

animation-timing-function

设置对象动画的过渡类型	规定动画的速度曲线。默认是 "ease"。
linear	动画从头到尾的速度是相同的。	
ease	默认。动画以低速开始,然后加快,在结束前变慢。
ease-in	动画以低速开始。	
ease-out	动画以低速结束。	
ease-in-out	动画以低速开始和结束。	

animation-delay

设置对象动画延迟的时间 
默认值 0s

animation-iteration-count

设置对象动画的循环次数 
默认值 1
正整数    播放次数 
infinite    无限次循环播放

animation-direction

设置对象动画在循环中是否反向运动
normal:默认值,向前播放
reverse	动画反向播放。
alternate	动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。
alternate-reverse	动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放

animation-play-state

设置对象动画时间之外的状态
running:默认值,播放
paused    暂停

animation-fill-mode

设置对象动画的状态
none:默认值
forwards	动画在结束后,继续应用最后关键字的位置
backwards	动画在结束后,继续应用初始关键字的位置

transform

transform自身的变化translate:改变自身位置(x,y) 相对定位,分为translate(X,Y,Z)rotate:改变自身角度,旋转(±deg)scale:改变自身大小,分为scale(X,Y)skew:改变自身倾斜角度(Xdeg,Ydeg)

CSS3选择器

基本选择器

[指定标签类选择器]: css中在.class前加上标签,例如 p.box
[id选择器]: 在标签中用id定义,id是独特的,不可重复,但是可以有相同字符
[通用选择器]: 使用通配符*对所有的标签进行css样式设置,一般用于清除原有的内外边框
[伪类选择器]: a:hover(所有标签可用)a:link/a:active/a:visited

关系选择器

CSS3新增选择器

伪类选择器

伪元素

伪元素一种存在,在CSS2.1中看到的:first-line、first-letter、:before和:after。CSS3中对伪元素进行了一些调整,在一起的基础上增加了一个冒号就变成了::first-line、::first-letter、::before、::after,另外伪元素新增加一个::selection。

after和before默认是行内元素,直接加上宽高是不生效的,content=“”是必要的(也可以不为空,自己赋值),可以用绝对定位,且它的父级自动是添加的匹配元素

结构化伪类

子元素伪类选择器

p:nth-child(1) :必须要是p标签,且p标签排在1的位置,只要前面有标签,就会计数

UI元素状态伪类选择器

E:hover  鼠标指针移动到某个文本框控件上的样式;   
E:active 元素被激活(鼠标在元素上按下还没有松开)时使用的样式;   
E:focus  元素获得光标焦点时使用的样式,主要是在文本框控件获得焦点并进行文字输入的时候使用(配合input使用);    例如1: UI元素状态伪类选择器.html例如2: UI元素状态伪类选择器.html
E:enabled  指定当元素处于可用状态时的样式;   
E:disabled 指定当元素处于不可用状态时的样式;       
E:read-only  指定当元素处于只读状态时的样式;   
E:read-write 指定当元素处于非只读状态时的样式; 
E:default  指定当页面打开时默认处于选取状态的样式;      
E::selection 指定当元素处于选中状态时的样式; 

CSS细节

首行缩进  text-indent:2em  2em代表的是2×font-size  相对于父级的文字大小
加粗文字  font-weight: bold
文本行高  line-height:
字符间距  letter-spacing:
字体斜体  font-style:italic;
取消斜体  font-style:normal;
边框圆角  border-radius:
目标定位  position:
最小宽度  min-width:
行内转块  display:inline-block
转为块级  display:block
伪类样式  transition:
按钮边框  outline:none(去除)
鼠标上移  标签:hover{}
css隐藏	display:none
css显示	display:block
阴影效果   box-shadow:(px(横坐标),px(纵坐标),px(模糊度),px(阴影宽度),颜色,inset(内阴影))
透明度		opecity
根元素(大小)    rem(写移动端时可以设置html的字体大小,再设置body的字体大小单位为rem,则可根据手机分辨率,更改html的字体大小,从而body的字体大小在每部不同分辨率的手机上字体不同)
旋转角度	transform:rotate(0deg)
更改位置    transform-origin: rem rem;
改变边距    border-width:
线性渐变	background:linear-garident(rgba(0,0,0,0),rgba(0,0,0,0)for(),to())
CSS3渐变	  background: -webkit-linear-gradient(left, red, blue);
背景图不重复   	background:url("")no-repeat
背景图大小拉伸  	background-size: 100% 100%;
保留空格	white-space:pre
边框内减  box-sizing:border-box (自动计算因css改变的盒子大小,并进行修改,不会因改变padding\border而改变原来设置的盒子大小)
清楚额外空间  align-items:center;
鼠标变小手  cursor: pointer;
黑白图片	filter:grayscale(100%);
全透明速记	transparent;

JavaScript

JavaScript由三个部分组成:{核心ECMAScript,由ECMA-262定义,提供核心语言功能文档对象型DOM,提供访问和操作网页内容的方法和接口浏览器对象型BOM,提供与浏览器交互的方法和接口
}通过 对象名.innerHTML = ‘’ 改变该对象的文本
通过 this.src来获取当前对象的src路径

鼠标交互细节

onMouseDown 按下鼠标时触发
onMouseOver 鼠标经过时触发
onMouseUp 按下鼠标松开鼠标时触发
onMouseOut 鼠标移出时触发
onMouseMove 鼠标移动时触发
onMouseLeave  鼠标指针移除触发
onMouseEnter 鼠标指针移动到对象内时触发
placeholder 占位符

检测类型

typeof

typeof 检测返回基本类型 弱检测 检测对象时只会返回Object

instanceof

检测引用类型 检测会返回当前实例是否是属于某个构造函数 不可用于检测基本类型给(检测不到)

执行环境及作用域

及某个变量的能够起到作用的区域 即全局变量或局部变量

[window]: 所有的全局变量都属于window的变量和方法 全局变量可以在函数内被访问到 且一直保留到浏览器、网页关闭时才销毁;而局部变量则是在调用使用完后,立即销毁; 局部变量可以在当前区域中访问获取变量并且可以替换全局变量,但是全局变量不可以访问获取局部变量

JavaScript细节

1.var a  = document.documentElement.scrollTop || document.body.scrollTop;		//通过此方法获取浏览器中滚动条向下移动的距离  键盘按键'↑''↓',按一次都是移动40的值,鼠标滚轮向上向下滚动一次是100的值,这个值不是像素,就是个数值。 可通过判断这个值是否达到某个数值点,从而实现滚动条下滑至某个节点的时候实现某个功能					        ———— scroll-test.html
2.document.body.innerHTML = 'xxx'  与  document.write('xxx')  之间的区别:	前者是给body的内容中添加xxx  后者是覆盖整个文档中的东西
3.*任何时候都不要设置全局变量  唯独排除和团队沟通过之后  整个项目拥有的几个全局变量
*一般函数之间的嵌套有3层就够了	如果到了3、4、5层还实现不了	那大概就是思路、想法出了问题
*当一个函数被调用时加上'()'的话  会是被直接调用其结果执行,而不会经过过程	不写括号是个函数体,有过程
*return break 之后写的代码都不生效  因为会终端循环  如果需要  则写在它们之前
*不论做什么事情  接收参数时一定要做参数判断	否则难免有别的参数通过隐式转换之后也能成功通过验证
*arguments	类数组	大多用来针对同个方法多处调用并且传递参数个数不一样时进行使用。根据arguments的索引来判断执行的方法。
*对象下的函数名称  称作'方法'	生命周期直到网页关闭;	而通过 var 出来的变量 使用完之后立即销毁 但是它还是能够是使用方法  引用类型 值相等
*虽然变量有 基本类型 和 引用类型的区分  但是传参都是按值传递的  不会按引用传递	但是如果两个变量引用的是同一个对象 也能达到类似于引用传值的	因为这个变量是全局变量;php中可以按引用传递
*所有的全局变量都属于window的变量和方法	全局变量可以在函数内被访问到	且一直保留到浏览器、网页关闭时才销毁;而局部变量则是在调用使用完后,立即销毁;	局部变量可以在当前区域中访问获取变量并且可以替换全局变量,但是全局变量不可以访问获取局部变量;		在局部变量中的变量如果没有用var、let声明  那么系统会自动将这个变量给'升级'至全局变量
*虽然JS的内存是自动清除的,但是之后的闭包确实需要一点自己来清除的功能	可以给对象赋值一个 null 来解除占用

矢量图标

iconfont

方法一:下载至本地

载入iconfont项目包的时候,需要link引入

同时需要用到标签,i标签的i正好类似于icon,所以一般用i标签

i标签中 class定义iconfont这是一定要有的

而iconfont中下载的iconfont字体,则由class定义icon-xiaomi(xxx为字体的名称)

当需要hover改变其颜色时,css样式代码如下:

.icon-xiaomi:hover:before{transition: all ,3s;color:red;(鼠标上移时改变颜色)font-size:20px(鼠标上移时改变大小)bcakground-color:skyblue(改变背景颜色)
}

方法二:在线链接

link的目标改为网站里下载来的链接,剩余操作同方法一,不过免去了下载

轮播图框架

链接:轮播图框架

下载swiper 里面的demo

使用时复制js、css文件夹 并且删除里面的.map文件

loop:true 设置无限循环属性 属于js

查看全文
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!

相关文章

  1. 基于SSM的e律通管理系统

    律师管理系统分为三个角色:管理员、律师、客户 在后端管理界面有两个角色使用:管理员和律师管理员:管理首页轮播图、管理事务所新闻、管理客户、律师、历史案件律师:可以查看客户向我发出的咨询,并且可以选择是否接单;律师可以查看用户给我的留言、律师可以给用户会消息客…...

    2024/3/26 8:02:42
  2. MySQL管理工具MySQL Utilities — MySQL Utilities结构详解

    管理和维护MySQL数据库有时会复杂化,有时任务需要繁琐甚至重复操作,鉴于这些因素,MySQL Utilities扩展是为了帮助初学者和经验丰富的数据库管理员执行常见任务。 MySQL Utilities内部 MySQL Utilities被设计成易于使用Python脚本,可以组合来提供更强大的功能。在内部,脚本…...

    2024/3/26 8:02:46
  3. LinkedHashMap 学习总结

    文章目录LinkedHashMap简介LinkedHashMap源码分析总结双向链表 LinkedHashMapEntryput(K k, V v) 添加数据并构建双向链表get(K key) 访问数据remove(key) 删除指定key 的节点总结问题 LinkedHashMap简介 我们知道 HashMap 是 数组+链表/红黑树 的存储结构,它不能保证遍历顺序…...

    2024/3/26 8:02:46
  4. 8Manage PMO:如何有效进行多项目管理?

    随着企业的扩张,业务往来日益增多,企业同时开展多个项目是不可避免的,如何有效进行多项目管理,是许多企业急需解决的问题。这一趋势导致多项目管理角色的兴起。它与项目高效和谐地配合,为企业的快速发展提供了动力。 如今,大多数企业参与到多项目管理中,但他们仍然在寻找…...

    2024/3/26 8:02:49
  5. vant-weapp 中checkbox radio @change时需携带参数

    van-radio中@change方法默认携带参数event: 默认传参及方法调用: <view><van-radio-group v-bind:value="item.selectSexID" @change="radioChange"><van-radio name="1" checked-color="#f2ae40">有性生活<te…...

    2024/3/26 8:02:51
  6. 经验分享之Jmeter-接口压测

    一、概述 JMeter是Apache下一款在国外非常流行和受欢迎的开源性能测试工具,JMeter可用于模拟大量负载来测试一台服务器,网络或者对象的健壮性或者分析不同负载下的整体性能。 1、压测不同的协议和应用Web - HTTP, HTTPS (Java, NodeJS, PHP, ASP.NET, …)SOAP / REST Webserv…...

    2024/3/29 2:55:08
  7. 你真的了解Spring-AOP?

    继上一篇自研实现Spring-IOC之后,今天又来复盘完善一下Spring-AOPSpring-AOP AOP就是面向切面编程,具体概念性的东西,我就不多解释,不了解的可以上网找找相关的文章说说我理解的Spring-AOPSpring-AOP是建立在IOC之上的,有了IOC容器才能实现AOP功能,那AOP有什么用了,这里…...

    2024/3/26 8:02:54
  8. JVM加载class文件原理

    文章目录1 简单介绍1.1 跨平台运行1.2 编译机制2 类加载机制2.1 加载方式2.2 加载过程2.2.1 加载2.2.2 链接2.2.2.1 验证2.2.2.1.1 文件格式验证2.2.2.1.2 元数据验证2.2.2.1.3 字节码验证2.2.2.1.4 符号引用验证2.2.2.2 准备2.2.2.3 解析2.2.3 初始化2.2.4 类加载总结2.3 类加…...

    2024/3/26 8:02:57
  9. 大学证书含金量排名

    大学证书含金量排名 1:【英bai语证书】 大学英语四、六级证书(CET-4,CET-6):极du其重要; 专业zhi八级:只有英语专业才有资格考,但很多职位dao要求,如翻译或者外籍主管的助理; 大学英语四、六级口语证书:证书不重要,能力重要,面试的表达重要; 英语中高级口译:含金…...

    2024/3/26 8:03:00
  10. 做了两年前端开发,平时就是拿 Vue 写写页面和组件,简历的项目经历应该怎么写得好看?

    无意间在知乎看见的,感觉讲得很有道理。看原文点这里 ------> 做了两年前端开发,平时就是拿 Vue 写写页面和组件,简历的项目经历应该怎么写得好看?在实习期间的几个月工作,我会因为自己复制粘贴、简单修改原有代码而实现自己的功能而开心好久,也没有认真的去想这个到…...

    2024/3/26 8:03:02
  11. Spring常见面试题总结

    1、Spring是什么?Spring是一个轻量级的IoC和AOP容器框架。是为Java应用程序提供基础性服务的一套框架,目的是用于简化企业应用程序的开发,它使得开发者只需要关心业务需求。常见的配置方式有三种:基于XML的配置、基于注解的配置、基于Java的配置。 主要由以下几个模块组成:…...

    2024/3/26 8:03:06
  12. 最长“假期”的网课生活之大一下

    大一下学期走起 !!!最长寒假 大一上学期结束啦 ! ! ! 40多天的假期啊!这次可以玩过瘾了哟!毕竟高考之前寒假最长也不到一个月。 小时候总是感觉玩的时间永远不会够、东西永远不够吃、钱永远都不够花、过年总是一年当中最快乐的时光…… 但,随着年龄的增长,我渐渐的发现过…...

    2024/3/26 8:03:08
  13. 用js模拟一个简单敏感词过滤器

    1、用js模拟一个简单敏感词过滤器 (用户输入的内容中的敏感词替换为*) 例:“今天有个傻子在旁边大喊大叫,影响了我的操作。”, 过滤后:“今天有个在旁边大喊大叫,影响了我的作。”。html代码: <input type="text" placeholder="请输入一句话" id…...

    2024/3/26 8:03:40
  14. HM软件学习日记(第2天)

    在ubuntu20.04系统之下的HM16.20软件包软件包的树结构使用说明campat//兼容性README//“读我”COPYING//版权doc// 帮助文件HM.xcodeproj//“xcode项目”精简之后的文件结构 软件包的树结构 使用说明之前在build文件夹之下除了linux文件夹之外还有VS2015等文件夹,目前只保留了…...

    2024/3/26 8:03:43
  15. NEXUS搭建maven私服

    NEXUS搭建maven私服 一、搭建nexus私服的目的 为什么要搭建nexus私服,原因很简单,有些公司都不提供外网给项目组人员,因此就不能使用maven访问远程的仓库地址,所以很有必要在局域网里找一台有外网权限的机器,搭建nexus私服,然后开发人员连到这台私服上,这样的话就可以通…...

    2024/3/28 11:58:41
  16. 那些不得不说的性能优化套路

    你有没有想过,为什么跨行转账要告诉你2小时内到账,而不是立即到账?为什么抖音那么多用户同时在使用,却很少出现崩溃的情况?电商网站是如何支撑住双十一全国人民买买买的? 性能优化对一个产品的重要性不言而喻,它直接影响网站的用户留存率,APP在商店的评分和用户粘性。一…...

    2024/3/26 8:04:12
  17. Exoplayer学习笔记1——使用方法

    1 Adding ExoPlayer as a dependency Add repositories 在项目根目录的build.gradle中添加:repositories { google() jcenter() }Add ExoPlayer modules 在App的build.gradle中添加:implementation ‘com.google.android.exoplayer:exoplayer:2.X.X’2.X.X是exoplayer的版本,…...

    2024/3/26 8:04:49
  18. java Lambda表达式

    示例class MyRunnable implements Runnable {@Overridepublic void run() {System.out.println("多线程程序启动了");} } public static void main(String[] args) {//实现类的方式实现需求 // MyRunnable my = new MyRunnable(); // Thread t = new …...

    2024/3/29 8:11:21
  19. R语言Logist回归

    Logist回归 Logistic回归又称Logistic回归分析,是一种广义的线性回归分析模型,常用于数据挖掘,疾病自动诊断,经济预测等领域。当通过一系列连续型和/或类别型预测变量来预测二值结果型变量时,Logistic回归是一个非常有用的工具。 研究数据 该数据集为AER包中的Affairs数据…...

    2024/3/26 8:05:39
  20. python所有库。开源

    环境管理管理 Python 版本和环境的工具p – 非常简单的交互式 python 版本管理工具。pyenv – 简单的 Python 版本管理工具。Vex – 可以在虚拟环境中执行命令。virtualenv – 创建独立 Python 环境的工具。virtualenvwrapper- virtualenv 的一组扩展。 包管理管理包和依赖的工…...

    2024/3/29 2:42:02

最新文章

  1. 【八大排序】一篇文章搞定所有排序

    文章目录 1.排序的概念2.常见排序算法的实现2.1 插入排序2.1.1直接插入排序2.1.2希尔排序 2.2选择排序2.2.1直接选择排序:2.2.2堆排序 2.3交换排序2.3.1冒泡排序2.3.2快速排序Hoare法前后指针法挖坑法非递归版本 2.4归并排序递归版本非递归版本 2.5计数排序3.排序的比较 1.排序…...

    2024/3/29 20:13:11
  2. 梯度消失和梯度爆炸的一些处理方法

    在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言&#xff0c;在此感激不尽。 权重和梯度的更新公式如下&#xff1a; w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...

    2024/3/20 10:50:27
  3. 机器学习-可解释性机器学习:支持向量机与fastshap的可视化模型解析

    一、引言 支持向量机(Support Vector Machine, SVM)作为一种经典的监督学习方法&#xff0c;在分类和回归问题中表现出色。其优点之一是生成的模型具有较好的泛化能力和可解释性&#xff0c;能够清晰地展示特征对于分类的重要性。 fastshap是一种用于快速计算SHAP值&#xff08…...

    2024/3/28 23:30:07
  4. 如何使用极狐GitLab 自定义 Pages 根域名

    本文作者&#xff1a;徐晓伟 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 本文主要讲述了极狐GitLab Pages …...

    2024/3/28 6:59:08
  5. 416. 分割等和子集问题(动态规划)

    题目 题解 class Solution:def canPartition(self, nums: List[int]) -> bool:# badcaseif not nums:return True# 不能被2整除if sum(nums) % 2 ! 0:return False# 状态定义&#xff1a;dp[i][j]表示当背包容量为j&#xff0c;用前i个物品是否正好可以将背包填满&#xff…...

    2024/3/29 17:40:09
  6. 【Java】ExcelWriter自适应宽度工具类(支持中文)

    工具类 import org.apache.poi.ss.usermodel.Cell; import org.apache.poi.ss.usermodel.CellType; import org.apache.poi.ss.usermodel.Row; import org.apache.poi.ss.usermodel.Sheet;/*** Excel工具类** author xiaoming* date 2023/11/17 10:40*/ public class ExcelUti…...

    2024/3/28 4:39:34
  7. Spring cloud负载均衡@LoadBalanced LoadBalancerClient

    LoadBalance vs Ribbon 由于Spring cloud2020之后移除了Ribbon&#xff0c;直接使用Spring Cloud LoadBalancer作为客户端负载均衡组件&#xff0c;我们讨论Spring负载均衡以Spring Cloud2020之后版本为主&#xff0c;学习Spring Cloud LoadBalance&#xff0c;暂不讨论Ribbon…...

    2024/3/28 5:03:31
  8. TSINGSEE青犀AI智能分析+视频监控工业园区周界安全防范方案

    一、背景需求分析 在工业产业园、化工园或生产制造园区中&#xff0c;周界防范意义重大&#xff0c;对园区的安全起到重要的作用。常规的安防方式是采用人员巡查&#xff0c;人力投入成本大而且效率低。周界一旦被破坏或入侵&#xff0c;会影响园区人员和资产安全&#xff0c;…...

    2024/3/28 19:59:46
  9. VB.net WebBrowser网页元素抓取分析方法

    在用WebBrowser编程实现网页操作自动化时&#xff0c;常要分析网页Html&#xff0c;例如网页在加载数据时&#xff0c;常会显示“系统处理中&#xff0c;请稍候..”&#xff0c;我们需要在数据加载完成后才能继续下一步操作&#xff0c;如何抓取这个信息的网页html元素变化&…...

    2024/3/28 21:57:52
  10. 【Objective-C】Objective-C汇总

    方法定义 参考&#xff1a;https://www.yiibai.com/objective_c/objective_c_functions.html Objective-C编程语言中方法定义的一般形式如下 - (return_type) method_name:( argumentType1 )argumentName1 joiningArgument2:( argumentType2 )argumentName2 ... joiningArgu…...

    2024/3/29 17:40:03
  11. 【洛谷算法题】P5713-洛谷团队系统【入门2分支结构】

    &#x1f468;‍&#x1f4bb;博客主页&#xff1a;花无缺 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 花无缺 原创 收录于专栏 【洛谷算法题】 文章目录 【洛谷算法题】P5713-洛谷团队系统【入门2分支结构】&#x1f30f;题目描述&#x1f30f;输入格…...

    2024/3/29 19:08:41
  12. 【ES6.0】- 扩展运算符(...)

    【ES6.0】- 扩展运算符... 文章目录 【ES6.0】- 扩展运算符...一、概述二、拷贝数组对象三、合并操作四、参数传递五、数组去重六、字符串转字符数组七、NodeList转数组八、解构变量九、打印日志十、总结 一、概述 **扩展运算符(...)**允许一个表达式在期望多个参数&#xff0…...

    2024/3/28 21:57:50
  13. 摩根看好的前智能硬件头部品牌双11交易数据极度异常!——是模式创新还是饮鸩止渴?

    文 | 螳螂观察 作者 | 李燃 双11狂欢已落下帷幕&#xff0c;各大品牌纷纷晒出优异的成绩单&#xff0c;摩根士丹利投资的智能硬件头部品牌凯迪仕也不例外。然而有爆料称&#xff0c;在自媒体平台发布霸榜各大榜单喜讯的凯迪仕智能锁&#xff0c;多个平台数据都表现出极度异常…...

    2024/3/29 10:46:22
  14. Go语言常用命令详解(二)

    文章目录 前言常用命令go bug示例参数说明 go doc示例参数说明 go env示例 go fix示例 go fmt示例 go generate示例 总结写在最后 前言 接着上一篇继续介绍Go语言的常用命令 常用命令 以下是一些常用的Go命令&#xff0c;这些命令可以帮助您在Go开发中进行编译、测试、运行和…...

    2024/3/29 18:06:05
  15. 用欧拉路径判断图同构推出reverse合法性:1116T4

    http://cplusoj.com/d/senior/p/SS231116D 假设我们要把 a a a 变成 b b b&#xff0c;我们在 a i a_i ai​ 和 a i 1 a_{i1} ai1​ 之间连边&#xff0c; b b b 同理&#xff0c;则 a a a 能变成 b b b 的充要条件是两图 A , B A,B A,B 同构。 必要性显然&#xff0…...

    2024/3/28 19:51:36
  16. 【NGINX--1】基础知识

    1、在 Debian/Ubuntu 上安装 NGINX 在 Debian 或 Ubuntu 机器上安装 NGINX 开源版。 更新已配置源的软件包信息&#xff0c;并安装一些有助于配置官方 NGINX 软件包仓库的软件包&#xff1a; apt-get update apt install -y curl gnupg2 ca-certificates lsb-release debian-…...

    2024/3/28 19:36:32
  17. Hive默认分割符、存储格式与数据压缩

    目录 1、Hive默认分割符2、Hive存储格式3、Hive数据压缩 1、Hive默认分割符 Hive创建表时指定的行受限&#xff08;ROW FORMAT&#xff09;配置标准HQL为&#xff1a; ... ROW FORMAT DELIMITED FIELDS TERMINATED BY \u0001 COLLECTION ITEMS TERMINATED BY , MAP KEYS TERMI…...

    2024/3/29 19:36:32
  18. 【论文阅读】MAG:一种用于航天器遥测数据中有效异常检测的新方法

    文章目录 摘要1 引言2 问题描述3 拟议框架4 所提出方法的细节A.数据预处理B.变量相关分析C.MAG模型D.异常分数 5 实验A.数据集和性能指标B.实验设置与平台C.结果和比较 6 结论 摘要 异常检测是保证航天器稳定性的关键。在航天器运行过程中&#xff0c;传感器和控制器产生大量周…...

    2024/3/29 9:27:12
  19. --max-old-space-size=8192报错

    vue项目运行时&#xff0c;如果经常运行慢&#xff0c;崩溃停止服务&#xff0c;报如下错误 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 因为在 Node 中&#xff0c;通过JavaScript使用内存时只能使用部分内存&#xff08;64位系统&…...

    2024/3/29 12:34:40
  20. 基于深度学习的恶意软件检测

    恶意软件是指恶意软件犯罪者用来感染个人计算机或整个组织的网络的软件。 它利用目标系统漏洞&#xff0c;例如可以被劫持的合法软件&#xff08;例如浏览器或 Web 应用程序插件&#xff09;中的错误。 恶意软件渗透可能会造成灾难性的后果&#xff0c;包括数据被盗、勒索或网…...

    2024/3/28 19:58:12
  21. JS原型对象prototype

    让我简单的为大家介绍一下原型对象prototype吧&#xff01; 使用原型实现方法共享 1.构造函数通过原型分配的函数是所有对象所 共享的。 2.JavaScript 规定&#xff0c;每一个构造函数都有一个 prototype 属性&#xff0c;指向另一个对象&#xff0c;所以我们也称为原型对象…...

    2024/3/28 21:57:45
  22. C++中只能有一个实例的单例类

    C中只能有一个实例的单例类 前面讨论的 President 类很不错&#xff0c;但存在一个缺陷&#xff1a;无法禁止通过实例化多个对象来创建多名总统&#xff1a; President One, Two, Three; 由于复制构造函数是私有的&#xff0c;其中每个对象都是不可复制的&#xff0c;但您的目…...

    2024/3/29 11:55:06
  23. python django 小程序图书借阅源码

    开发工具&#xff1a; PyCharm&#xff0c;mysql5.7&#xff0c;微信开发者工具 技术说明&#xff1a; python django html 小程序 功能介绍&#xff1a; 用户端&#xff1a; 登录注册&#xff08;含授权登录&#xff09; 首页显示搜索图书&#xff0c;轮播图&#xff0…...

    2024/3/29 8:23:18
  24. 电子学会C/C++编程等级考试2022年03月(一级)真题解析

    C/C++等级考试(1~8级)全部真题・点这里 第1题:双精度浮点数的输入输出 输入一个双精度浮点数,保留8位小数,输出这个浮点数。 时间限制:1000 内存限制:65536输入 只有一行,一个双精度浮点数。输出 一行,保留8位小数的浮点数。样例输入 3.1415926535798932样例输出 3.1…...

    2024/3/28 9:26:43
  25. 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...

    解析如下&#xff1a;1、长按电脑电源键直至关机&#xff0c;然后再按一次电源健重启电脑&#xff0c;按F8健进入安全模式2、安全模式下进入Windows系统桌面后&#xff0c;按住“winR”打开运行窗口&#xff0c;输入“services.msc”打开服务设置3、在服务界面&#xff0c;选中…...

    2022/11/19 21:17:18
  26. 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。

    %读入6幅图像&#xff08;每一幅图像的大小是564*564&#xff09; f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...

    2022/11/19 21:17:16
  27. 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...

    win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面&#xff0c;在等待界面中我们需要等待操作结束才能关机&#xff0c;虽然这比较麻烦&#xff0c;但是对系统进行配置和升级…...

    2022/11/19 21:17:15
  28. 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...

    有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows&#xff0c;请勿关闭计算机”的提示&#xff0c;要过很久才能进入系统&#xff0c;有的用户甚至几个小时也无法进入&#xff0c;下面就教大家这个问题的解决方法。第一种方法&#xff1a;我们首先在左下角的“开始…...

    2022/11/19 21:17:14
  29. win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...

    置信有很多用户都跟小编一样遇到过这样的问题&#xff0c;电脑时发现开机屏幕显现“正在配置Windows Update&#xff0c;请勿关机”(如下图所示)&#xff0c;而且还需求等大约5分钟才干进入系统。这是怎样回事呢&#xff1f;一切都是正常操作的&#xff0c;为什么开时机呈现“正…...

    2022/11/19 21:17:13
  30. 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...

    Win7系统开机启动时总是出现“配置Windows请勿关机”的提示&#xff0c;没过几秒后电脑自动重启&#xff0c;每次开机都这样无法进入系统&#xff0c;此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一&#xff1a;开机按下F8&#xff0c;在出现的Windows高级启动选…...

    2022/11/19 21:17:12
  31. 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...

    有不少windows10系统用户反映说碰到这样一个情况&#xff0c;就是电脑提示正在准备windows请勿关闭计算机&#xff0c;碰到这样的问题该怎么解决呢&#xff0c;现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法&#xff1a;1、2、依次…...

    2022/11/19 21:17:11
  32. 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...

    今天和大家分享一下win7系统重装了Win7旗舰版系统后&#xff0c;每次关机的时候桌面上都会显示一个“配置Windows Update的界面&#xff0c;提示请勿关闭计算机”&#xff0c;每次停留好几分钟才能正常关机&#xff0c;导致什么情况引起的呢&#xff1f;出现配置Windows Update…...

    2022/11/19 21:17:10
  33. 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...

    只能是等着&#xff0c;别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚&#xff0c;只能是考虑备份数据后重装系统了。解决来方案一&#xff1a;管理员运行cmd&#xff1a;net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...

    2022/11/19 21:17:09
  34. 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?

    原标题&#xff1a;电脑提示“配置Windows Update请勿关闭计算机”怎么办&#xff1f;win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢&#xff1f;一般的方…...

    2022/11/19 21:17:08
  35. 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...

    关机提示 windows7 正在配置windows 请勿关闭计算机 &#xff0c;然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;关机提示 windows7 正在配…...

    2022/11/19 21:17:05
  36. 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...

    钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...

    2022/11/19 21:17:05
  37. 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...

    前几天班里有位学生电脑(windows 7系统)出问题了&#xff0c;具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面&#xff0c;长时间没反应&#xff0c;无法进入系统。这个问题原来帮其他同学也解决过&#xff0c;网上搜了不少资料&#x…...

    2022/11/19 21:17:04
  38. 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...

    本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法&#xff0c;并在最后教给你1种保护系统安全的好方法&#xff0c;一起来看看&#xff01;电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中&#xff0c;添加了1个新功能在“磁…...

    2022/11/19 21:17:03
  39. 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...

    许多用户在长期不使用电脑的时候&#xff0c;开启电脑发现电脑显示&#xff1a;配置windows更新失败&#xff0c;正在还原更改&#xff0c;请勿关闭计算机。。.这要怎么办呢&#xff1f;下面小编就带着大家一起看看吧&#xff01;如果能够正常进入系统&#xff0c;建议您暂时移…...

    2022/11/19 21:17:02
  40. 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...

    配置windows update失败 还原更改 请勿关闭计算机&#xff0c;电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;配置windows update失败 还原更改 请勿关闭计算机&#x…...

    2022/11/19 21:17:01
  41. 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...

    不知道大家有没有遇到过这样的一个问题&#xff0c;就是我们的win7系统在关机的时候&#xff0c;总是喜欢显示“准备配置windows&#xff0c;请勿关机”这样的一个页面&#xff0c;没有什么大碍&#xff0c;但是如果一直等着的话就要两个小时甚至更久都关不了机&#xff0c;非常…...

    2022/11/19 21:17:00
  42. 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...

    当电脑出现正在准备配置windows请勿关闭计算机时&#xff0c;一般是您正对windows进行升级&#xff0c;但是这个要是长时间没有反应&#xff0c;我们不能再傻等下去了。可能是电脑出了别的问题了&#xff0c;来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...

    2022/11/19 21:16:59
  43. 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...

    我们使用电脑的过程中有时会遇到这种情况&#xff0c;当我们打开电脑之后&#xff0c;发现一直停留在一个界面&#xff1a;“配置Windows Update失败&#xff0c;还原更改请勿关闭计算机”&#xff0c;等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢&#xff0…...

    2022/11/19 21:16:58
  44. 如何在iPhone上关闭“请勿打扰”

    Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...

    2022/11/19 21:16:57