Web前端笔记记录
概念理解
1、网站
2、VS Code
3、html
html的超文本性
html的语言性
html的标记性
4、css
5、Web前端的三大核心技术
6、网站开发
实操
快捷键的使用
在VS Code里可以进行的操作(功能)
网页的编写
html初始代码
html注释
html语义化
标题与段落
文本修饰标签
图片标签
链接标签
跳转锚点
特殊符号
无序列表
有序列表
定义列表
表格标签
表格属性
表单标签
div与span的“爱恨情仇”
CSS的基础语言
CSS中的颜色表示法
CSS背景样式
backgrpund-image背景图片
background-repeat 背景平铺
background-position 背景位置
background-attachment:背景图随滚动条移动的方式
CSS边框样式
CSS文字样式
font-family
font-size:
font-weight
font-style
color
CSS的段落样式
text-decoration
text-transform
text-indent
text-align
line-height
字间距
CSS复合样式
CSS选择器
概念理解
1、网站
网站是由n多个网页组成的,每一个网页都是一个html.文件
2、VS Code
VS Code来自微软,是一个开源的、基于Electron的轻量代码编辑器。
3、html
html是一种超文本标记语言,通过标记符号来标记要显示的网页中的各个部分,可以说明文字,图形,动画,声音,表格,链接等。 html常见标签:周期表
html的超文本性
可以分为文本内容和非文本内容(图片、视频、音频等)。
html的语言性
是种编程语言。
html的标记性
标记也称标签(可以上下排列也可以组合嵌套): 例如: ”< header >“”< footer >"
写法
第一种:单标签 ”< header>“ 第二种:双标签”< header >< /header>“
4、css
CSS中文意思是“层叠样式表",它是一种标准的样式语言,主要作用是定义网页的样式(美化网页),对网页中元素的位置、字体、颜色、背景等属性进行精准控制。
5、Web前端的三大核心技术
html: 结构 CSS:样式 JavaScript:行为
6、网站开发
UI设计师:设计稿 Web前端开发工程师(H5开发)
设计稿—>代码 数据库里的数据—>显示到页面 HTML+CSS
实操
快捷键的使用
ctrl + m 静音 *ctrl + s 保存 ctrl + alt + a 截屏 ctrl + a 全选 ctrl + x 剪切 ctrl + c 复制 ctrl + alt + a 复制 ctrl + v 粘贴 ctrl + z 撤销 ctrl + y 前进 ctrl+d 选择相同元素的下一个 ctrl+/ 快速添加注释与删除注释
shift + home 从头选中一行 shift + end 从尾部选中一行 shift + alt +⬇ 快速复制一行 shift +alt +a 快速添加注释和删除注释 alt + a 复制 alt+左键 多光标
tab 向后缩进 tab + shift 向前缩进 tab + 输入的 创建标签(单双)
在VS Code里可以进行的操作(功能)
新建文件
点击该按钮可以新建一个编写的文件
新建文件夹
点击该按钮可以新建文件夹,点击文件及可以进行文件夹的重命名、删除等操作
商店
在最左侧的工具栏中有此”商店“选项,可以在此寻觅自己需要的文件,小功能。
搜索
在最左侧的工具栏有此”搜索“选项,可以在此输入一段字符(中、英…),可以帮助找出出现过该段字符的文件以及内容。
网页调试
可以在编写文件的同时,右键调出运行该文件下的网页。
网页的编写
html初始代码
每个.html文件都有的代码叫做初始代码,要符合html文件的规范写法。
/*文档声明:告诉浏览器这是个html文件
/*html文件的最外层标签:包裹着所有的html标签代码 lang=”en“表示这是一个英文网站
/*元信息:是编写网页中的一些赋值信息 charest=”UTF-8“国际编码,让网页不出现乱码的情况。
Document /*设置网页标题
/*显示网页内容的区域
html注释
写法:
< ! - - 注释内容 - - >
在浏览器中看不到,只能在代码中能看到注释
意义: 1、把暂时不用的代码注释起来,方便以后使用 2、对开发人员进行提示,方便后续人员理解
快捷添加注释与删除注释: 1、ctrl + /(my think is the best) 2、shift + alt + a
html语义化
所谓HTML语义化指的是,根据网页中内容的结构,选择合适的HTML标签进行编写。
好处: 1、在没有CSS的情况下,页面也能呈现出很好的内容结构。 2、有利于SEO,让搜索引擎爬虫(网络机器人)更好的理解网页。 3、方便其他设备解析(如屏幕保护器,盲人阅读器等)。 4、便于团队开发与维护。
标题与段落
标题 —>双标签 : < h1>< /h1>…< h6>< /h6>
在一个网页中,h1标题最重要(一级标题)并且一个.html文件中只能出现一次h1标签。 h5、h6标签在网页中不经常使用(h6是级别最小的标题,大小接近与正文)。
段落—> 双标签:< p>< /p>
文本修饰标签
强调—>双标签: < strong> 加粗文本< /strong> 例如: 加粗 < em>斜体文本< em> 例如:斜体
区别: 1、写法和展示效果是有区别的,一个加粗,一个斜体 2、strong的强调性更强,em的强调性稍弱
< sub>(下标) —— < sup>(上标) 例如:H2 O —— 52 =25 < del>(删除文本)—< ins>(插入文本)例如: 我是搞笑男 —— 我爱学习
注:一般情况下,删除文本都是和插入文本配合使用的。
图片标签
img—>单标签
src:引入图片的地址(有相对地址和绝对地址之分)
相对地址:分为同级,父级,子级(自己瞎编的没有文献支持) 同级可以直接引用 例如:< img src=“./dog.jpg” alt=“”> 父级需要前缀加“.”,再一层一层的输入地址文件 例如< img src=“…/img/animal/dog.ipg” alt=“”> 子级需要再次添加地址 例如< img src=“/img/animal/dog.jpg” alt=“”>
alt:当图片出现问题的时候,可以显示一段友好的提示(如果图片地址损坏或者不存在,会显示破损图片的标签并显示alt里的内容) title:提示信息 width、height :改变图片的大小
如果不加width和height,在网速很慢的情况下会出现图片出现之前一个样子,图片加载出以后又一个样子。 如果加了width和height,则不会出现这样的情况,显示的都是排版时的样子
链接标签
a—> 双标签 < a>< /a> href属性:链接的地址 target属性:可以改变链接打开的方式,默认情况下是当前页面打开。 _self 当前页面打开 _blank 新窗口打开
base—>单标签:作用是改变链接的默认行为 例如< base target=“_blank”>放在< head>…< /head>语句中就可以实现全部链接标签都是先新窗口打开。
跳转锚点
1、“#”加id属性
< a href=“#html”>HTML< /a> < h2 id=“html”>< /h2> 可以实现在前面点击“HTML”时跳入下面h2的地方
2、“#”加name属性
< a href=“#html”>HTML< /a> < a name=“html”>< /a>(该语句放在需要跳到的地方) 该语句同样可以实现点击前面的“HTML”时跳到下一语句存放的下一行的位置。
特殊符号
编写一些文本时,经常会遇到输入法无法输入的字符,如®(注册商标),©(版权符)等,还有往一段文字中加入多个空格时,页面并不会解析出多个空格。这些无法输入和空格符都是特殊字符,还有解决<>的冲突,在HTML中,为这些特殊字符准备了专门的代码
空格—————& nbsp; 版权符号©——& copy; 注册商标®——& reg; 小于号<——& lt; 大于号>——& gt; 和号&——& amp; 人民币¥——& yen; 摄氏度°——& deg;
无序列表
< ul>:列表最外层容器 < li>:列表项
注:< ul>< li>必须是组合出现的,他们之间是不能有其他的标间的
成品展示
前面的"小黑点"是可以通过"type"属性来改变前面标记的样式(后期一般是通过CSS去控制) 可以查询type属性查询栏了解更多关于"小黑点"的"故事"
有序列表
< ol>列表的最外层容器 < li>列表的列表项
第一项
第二项
第三项
成品展示
第一项
第二项
第三项
注:有序列表列表用的非常少,经常用的是无序列表,无序列表可以去代替有序列表(后期可以通过CSS实现)
有序列表前的各种符号同样可以用"type"属性来改变,详情可通过type属性查询栏来了解更多的"故事"。
定义列表
< dl>:定义列表 < dt>:定义专业术语或名词 < dd>:对名词进行解释和描述
HTML
超文本标记语言
CSS
层叠样式表
Javascript
网页脚本语言
成品展示
HTML
超文本标记语言
CSS
层叠样式表
Javascript
网页脚本语言
>
成品展示
注:列表之间可以互相嵌套,形成多层级的列表。
表格标签
< table>:表格的最外层容器 < tr>:定义表格行 < th>:定义表头 < td>:定义单元格 < caption>:定义表格标题 语义化标签(没多大效果,主要是规范):< tHead>头,< tBody>身,< tFood>尾
注:表格标签之间是有嵌套关系的,要符合嵌套规范。
天气之子
日期
天气情况
出行情况
2022年1月1日
晴
天气晴朗,适合出行
2022年1月2日
小雨
有小雨,出门请带伞
成品展示
表格属性
border ;表格边框 cellpadding:单元格内的空间 cellspacing:单元格之间的空间 rowspan:合并行 colspan:合并列 align:左右对齐方式 valign:上下对齐方式
border(加在< table>之中< table border=“1”>)
cellpadding(加在< table>之中< table border=“1” cellpadding=“30”>)
cellspaceing(加在< table>之中,< table border=“1” cellpadding=“30” cellspacing=“30”>) 单元格与单元格之间的距离
colspan(加在所需合并的几列的< td>标签里< td colspan=“2”>…< /td>)
rowspan()
表单标签
< form>:表单的最外层容器 < input>(单标签):标签用于收集用户信息,根据不同的type属性值,展示不同的控件, 如输入框、密码框、复选框等。
text :普通的输入框 password:密码输入框 checkbox:复选框 radio:单选框 file:上传文件 submit:提交按钮 reset:重置按钮 常见属性还有checked,diasabled,name,for
成品展示:
< textarea>:多行文本框 < select>、< option>:下拉菜单
成品展示
限时制作(仿制)
总体信息
用户注册
用户名:
密码:
成品展示
div与span的“爱恨情仇”
div:做一个区块的划分(图层或者划分领地范围) span:对文字进行修饰,内联(样式) div和span都是没有任何默认样式的,需要配合CSS才行
/*分为上下两个区域块*/
成品展示:
CSS的基础语言
格式:选择器(属性1:值一;属性2,值而…) (长度) 单位:px—>像素(pixel)、%—>百分比 基本样式:width(宽)、height(高)、background-color(背景色) CSS注释:/ * 巴拉巴拉 * /
举例:如下
Document
big surprise
成品展示
CSS样式引入的方式
1、内联样式 style属性 2、内部样式 style标签(上述例子便是内部样式)
区别:内部样式的代码可以复用、复合W3C的规范标准,进行让结构和样式分开处理
3、外部样式 引入一个单独的CSS文件,name.CSS
通过link标签引入外部资源,rel属性指定资源跟页面的关系,href属性资源的地址。 详情可通过点击link的爱恨情仇来了解
通过@import方式引入外部样式(这种方式有很多问题,强烈不建议使用)
这玩意叫内联
成品展示
CSS中的颜色表示法
1、颜色表示法 ,such as:blue、yellow、red
可以参照CSS单词颜色表示法
2、十六进制表示法
Document
aaaaaa
成品展示:
3、RGB三原色表示法: 表示法:RGB(255,255,255); 注:取值范围为0~255
提取颜色的方式: 1、下载提取颜色的软件,点击“颜色提取软件”下载使用(十六进制表示的)
小提示:使用软件的环境是真实的“网络”,存储在电脑中的照片无法提取颜色。
2、PS中的吸管工具同样可以实现颜色的提取(吸管提取之后可以在颜色板中查看)。
CSS背景样式
background-color:背景颜色 background-image:背景图片 background-repeat:背景图片的平铺方式 background-position:背景图片的位置 background-attachment:背景图随滚动条的移动方式
backgrpund-image背景图片
Document
/*划分了一个区域*/
成品展示:
background-repeat 背景平铺
repeat-x / * x轴平铺 * /
repeat-y/ * y轴平铺 * /
repeat(x,y) / * 都进行平铺 * /
no-repeat /* 都不平铺*/
background-position 背景位置
x ,y:number(px、%)|单词 x:left、center、right y:top、center、bottom
background-attachment:背景图随滚动条移动的方式
scroll:默认值(背景位置是按照当前元素进行偏移的) fixed(背景位置是按照浏览器进行偏移的)
注:建议进行尝试,言语难以描述清楚,眼睛无法进行实践
CSS边框样式
border-style:边框的样式
solid:实线 dashed:虚线 dotted:点线
border-width:边框的大小 border-color:边框的颜色
注:边框也可以针对莫一条边进行单独设置:border-left-style:中间是方向 left、right、top、bottom
三角形的实现
Document
成品展示
若需要特定的三角形则只需要将不需要的“三角形”的border-color属性值改成“transparent”(透明)即可。
CSS文字样式
font-family
font-family:文字类型
英文字体:Arial,‘Times New Roman’ 中文字体:微软雅黑(‘Microsoft YaHei’),宋体(SimSun)
注:1、英文样式加在中文上是无效的,等价的是中文样式加在英文上是无效的 2、可以在电脑中的“控制面板”–>“字体”中查看电脑所带的字体类型 3、字体引用的引号:当字体名称中带有空格符号则需要加单引号才能使用
Document
This is a text ('Times New Roman')
This is a text(默认样式)
这是一段文字(宋体)
这是一段文字(默认样式)
样式对比
font-size:
font-size:字体大小,16px为默认大小 写法:number(px)|| 单词 xx-small——最小 x-small——较小 small——小 medium——正常(默认值) large——大 x-large——较大 xx-large——最大
注:字体的大小一般为偶数
font-weight
font-weight:字体粗细 模式:正常(normal)& 加粗(bold) 写法:单词(normal、bold) | number(100 200 … 900 )
注:number写法中只显示两种模式,100 ~ 500是normal,600 ~ 900是bold
font-style
font-style:字体样式 模式:正常(normal) 斜体(italic) 写法:单词(normal、italic)
区别: 1、italic 带有倾斜属性的字体才可以设置倾斜操作 2、oblique没有倾斜属性的也可以进行倾斜操作 (oblique范围更广但是用的却很少,因为没有带有斜体属性的字体强加斜体属性"看起来"不规范,不好看——强扭的瓜不甜)
注:oblique也是表示斜体,用的比较少,一般了解即可
color
字体颜色,不多加解释
CSS的段落样式
text-decoration
text-decoration:文本装饰 下划线:underline 上划线:overline 删除线:line-through 不加任何装饰:none
注:可以添加多个文本装饰 写法如下: < style> div{ text-decoration:underline overline line-through }< /style>(中间用空格隔开,不一定是< div>里加,看需要的是在哪个“区域”)
text-transform
text-transform:文本大小写(只针对英文段落) 小写:lowercase 大写:uppercase 只针对单词首字母大小写:capitalize
text-indent
text-indent:文本缩进 首行缩进,写法text-indent: **px em单位:相对单位,1em永远都是跟字体大小写相同,无论字体大小怎么变化
text-align
text-align:文本对齐方式
对齐方式: 1、left——左对齐 2、right——右对齐 3、center——居中 4、justify——两端点对齐
line-height
line-height:定义行高 行高的定义:
默认行高:不是固定值,而是变化的,根据当前字体的大小在不断地变化着的 取值:1、number(px)| 2、scale(比例值,跟文字大小成比例关系)
字间距
letter-spacing;字之间的间距 word-spacing:词之间的间距(针对英文段落的)
英文和数字不自动折行的问题(当一个英文单词或者数字太长是,系统默认为一个整体,不会自动进行折行操作): 1、word-break : break-all;(非常强烈的折行) 2、word-wrap:break-word(不是那么强烈的折行,会产生一些空白区域)
CSS复合样式
一个CSS属性只控制一种样式,叫做单一样式 一个CSS属性控制多种样式,叫做复合样式
复合样式的写法:是通过空格的方式实现的,复合写法有的是不需要关心顺序,例如backgroun、border;有的是需要关心顺序的,例如font 1、background:red url() repeat 0 0 ; 2、border:1px red solid; 3、font(最少需要有两个值 ,size family):
weight style size family √ style weight family size √ weight style size/line-height family √ weight和style为一组,size和family是一组
注:尽量不要混写,如果非要混写,那么一定要先写复合样式再写单一样式,这样才不会被覆盖掉
CSS选择器
ID选择器
CSS:#elem{} Html:id=“elem” 多余的知识,div#“命名值”+tab键,额能够快速生成< div id=“命名值”>< /div>
注:1、在一个页面中,ID值是唯一的,不能够重复出现,出现多次是不符合规范的。 2、命名规范,“字母”“ _ ”“- ”“数字”(命名的第一位不能是数字)。 3命名方式,驼峰式、下划线、短线式。
驼峰写法:searchButton(小驼峰) SearchBotton(大驼峰)searchSmallButton(小驼峰) 短线写法:search-small-button 下划线写法:search_small_button
CLASS选择器
CSS:.elem{} Html: class=“elem”
注: 1、calss选择器是可以复用的 2、可以添加多个class样式。 3、多个样式的时候,样式的优先级根据CSS决定(在style中定义时的顺序),而不是class属性中的顺序 4、标签+类的写法 (例如p.贝勒贝莱,这样的话只有p标签可以使用“贝勒贝莱”样式)
你可能感兴趣的:(前端,javascript,css)
JavaScript-防抖和节流
好哈优学编程
javascript 开发语言
防抖(debounce):如果一个函数持续地触发,那么只在它停止触发的一段时间后才执行,如果在这段时间内又开始持续触发,则重新计算时间。防抖函数的实现如下:functiondebounce(func,wait){lettimeout;returnfunction(){clearTimeout(timeout);timeout=setTimeout(()=>{func.apply(this,argu
高版本Chrome网页直接播放海康威视大华RTSP流方案,不需服务器转码转流,支持H.265、H.264及2K/4K高清视频
bubailai
Chrome RTSP chrome rtsp vue.js 前端
近期公司在做一个智慧城市项目,需要在高版本Chrome网页播放海康威视、大华、或者华为摄像头RTSP流,于是在网上开始找对应的解决方案,没想到网上各种转码转流方案纷繁复杂,找到一款稳定商用满足需求的很难!目前网上有两种所谓无插件方案,即后端转码前端播放的方法和后端转流前端转码的方案,虽然无插件播放方案能够播放出画面,但是往往延迟很高,基本上都在数秒之久,在一些对延迟敏感的场合客户要求毫秒级延迟,显
springMVC笔记系列(19)——控制器实现详解(上)
weixin_34290390
java 测试 前端 ViewUI
2019独角兽企业重金招聘Python工程师标准>>>本文我们在前文基础上引入一个例子,边做边聊控制器。我们想实现一个课程查询的功能。首先大脑应该条件反射——如何定义MVC。M:课程(包含章节)——Course(包含Chapter)V:课程页面——course_overview.jspC:编写一个控制器接收springMVC前端控制器dispatcherServlet的请求转发——CourseCo
《React Hooks:让你的组件更灵活》
Envyᥫᩣ
react.js 前端 前端框架
前端开发中非常流行的React框架。React是一个用于构建用户界面的JavaScript库,尤其适用于构建复杂的单页应用。ReactHooks:让你的组件更灵活React是当今最受欢迎的前端JavaScript库之一,用于构建用户界面。自从React16.8版本开始,React引入了一种新的功能——Hooks,它为函数组件带来了更多的可能性。Hooks允许你在不编写类的情况下使用state和其他
js相关知识
623_54e8
JavaScript相关知识页面中添加JavaScript页面加载之前就会执行页面加载时候执行大多数情况,代码会增加到页面的head的部分,如果将代码增加到体的末尾,这会使性能稍有提升,不过只有确实需要深度优化页面性能时才有必要这么做。一件重要的事情,页面完全加载之后再执行JavaScript代码做法如下:页面完全加载之前不要打扰DOM1.浏览器加载页面创建文档的一个内部模型,包括标记的所有元素2
JavaScript练习(一)
浅笑心柔142
javascript 前端
练习1:定义变量存储以下信息,然后按如下格式在页面上输出姓名:张三年龄:21性别:男职业:学生住址:江苏南京电话:1234567varname="张三";varage="21";varsex="男";varjob="学生";varaddress="江苏南京";varphone="1234567";document.write("姓名:"+name+"");document.write("年龄:"+
【一文读懂】ECMAScript
热爱分享的博士僧
ecmascript
ECMAScript(通常简称为ES)是一种脚本语言的标准规范,由欧洲计算机制造商协会(ECMAInternational)制定。JavaScript是最著名的实现了ECMAScript规范的语言,广泛用于Web开发。ECMAScript定义了语言的核心语法和特性,但不包括任何关于图形界面、网络请求等与平台相关的API,这些通常是JavaScript运行时环境提供的额外功能,例如浏览器中的DOM(
基于vue-cli3,全局集成 scss | sass
PHP的点滴
Css的预处理器如果项目中没有scss预处理器,需要安装npminstall-Dsass-loadernode-sass修改配置文件vue.config.jsconstfs=require('fs')module.exports={css:{loaderOptions:{sass:{data:fs.readFileSync('src/assets/css/variable.scss','utf-8
css导入样式三种方式
Future728
css 前端
1.内部样式和内嵌样式测试css样式Stylesheets(这是内部样式表)你好世界!这是内嵌样式表2.导入外部样式有两种方式先创建自己的样式存在css文件内p{color:green;font-family:Impact}h1{color:red;font-family:Impact}①下面写入html文件的head标签内,地址为下面括号内下面是完整代码Title-->Stylesheets(外
小程序使用iconfont的方法.
adustdu2015
1.方法:在阿里巴巴图标库下载下来以后,将iconfont.ttf转换即可。转换地址:https://transfonter.org/这里贴一个简单的步骤:image.pngimage.pngimage.png将css文件在外部引入所要用的.wxss文件中即可(@import‘../../lib/style/lib.wxss’;)最后,就可以使用啦:.icon:after{font-family:
JavaScript 中,不同的赋值方式适用场景
前端小芬芬
javascript
在JavaScript中,不同的赋值方式适用于不同的场景。以下是每种赋值方式的详细解释和使用场景:1.使用扩展运算符...进行浅拷贝letobj={...data};功能:创建一个新的对象,并将data对象的所有可枚举属性复制到新对象中。适用场景:适用于简单对象的浅拷贝,特别是当对象的属性不包含嵌套对象或数组时。示例:letdata={a:1,b:2};letobj={...data};conso
打卡第60天------图论
感谢上Di_123
前端算法题 图论
加油!尽管前面的道路很困难,但是依然要坚持下去✊。在算法训练营我学到了很多东西,对于算法的方法来说真的是涨知识了,对于我一个非科班出身,半路转行的干IT的人来说真的给予了我很大的帮助。我会继续回头看代码随想录分享的那些干货的,温故而知新。接下来我就要开始去攻克前端的框架源码和底层原理了,技术深度不够,面试总是挂,要攻克薄弱点了。今天大家会感受到Bellman_ford算法系列在不同场景下的应用。建
【bug记录5】flex横向布局时子元素设置宽度无效
音仔小瓜皮
bug记录 CSS学习笔记 bug css css3
一、问题背景对父元素list使用了flex布局之后,尝试将其子元素item固定宽度,但发现宽度设置不生效并且实际宽度被压缩了。具体的css代码如下:.list{display:flex;align-items:center;justify-content:space-between;//没设置宽度,因为想适配子元素的总宽度height:64px;padding:16px15px;overflow-
CSS 自定义滚动条样式
MGLMONSTER
/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar{width:10px;height:10px;background-color:#F5F5F5;}/*定义滚动条轨道内阴影+圆角*/::-webkit-scrollbar-track{-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);border-radius:1
flaresolverr环境搭建
野生猕猴桃
FlareSolverr flareSolverr cloudflare爬虫 跳过cloudflare
FlareSolverr是一个基于浏览器自动化技术的反爬虫解决方案。它可以应对一些比较复杂的反爬虫策略,如Cloudflare、hCaptcha等,并提供了简单易用的API接口。具体来说,FlareSolverr就是一个被动式的浏览器渲染服务,它使用了HeadlessChrome和Puppeteer技术来模拟人工操作浏览器的行为,并通过自定义的JavaScript脚本和与浏览器进行交互,最终获取网
【软件测试】术语定义
Play_Sai
软件测试 自动化测试 性能测试 接口测试 术语定义 软件测试
1、接口测试接口测试概念:是测试系统组件间接口的一种测试方法接口测试的重点:检查数据的交换,数据传递的正确性,以及接口间的逻辑依赖关系接口测试的意义:在软件开发的同时实现并行测试,减少页面层测试的深度,缩短整个项目的测试周期接口测试能发现哪些问题:可以发现很多在页面上操作发现不了的bug、检查系统的处理异常能力、检查系统的安全性、稳定性、可以修改请求参数,突破前端页面输入限制2、性能测试并发用户数
HarmonyOS开发实战:Node-API扩展能力接口
小小煤球
鸿蒙开发 HarmonyOS OpenHarmony microsoft 鸿蒙 华为 harmonyos 前端 鸿蒙系统 开发语言
前言:扩展能力接口进一步扩展了Node-API的功能,提供了一些额外的接口,用于在Node-API模块中与JavaScript进行更灵活的交互和定制。这些接口可以用于创建自定义JavaScript对象等场景。基本概念在理解Node-API扩展能力接口之前,需要了解一些基本概念:模块:一个模块是一个可重用的、独立的代码单元。它封装了相关功能,并可以被其他模块引用和使用。命名空间:命名空间是一种用于组
python编写API接口实现数据筛选、查询与分页
唯余木叶下弦声
python 开发语言
目录一、背景二、代码一、背景由于系统上需要分页展示数据,并提供按字段筛选数据的功能,于是需要我写个接口,以供前端使用。接口可以通过pythonflask框架实现。Flask是一个轻量级的Web框架,它提供了足够的灵活性来构建定制的RESTfulAPI。开发者可以根据需求轻松地设计和实现接口。数据的查询可以通过pymysql连接MySQL数据库实现。数据的筛选和分页可以通过堆叠where条件、row
VUE3笔记
一介书生.
前端 javascript vue.js 前端
前端系列一、HTML5二、CSS3三、JavaScript四、jQuery五、BootStrap六、Element七、Ajax八、JSON九、VUE3第一章、基础一、vue简介1、学习阶段vue2基础vue-cli(vue的手脚架,专门做工程化开发)vue-router(实现前端路由的)vuex(vue存储数据的)element-ui(ui组件库)vue32、vue的特点采用组件化模式,提高代码复
前端性能优化-CSS性能优化
LYFlied
css 前端 css 性能优化 面试
文章目录一、内联首屏关键CSS二、异步加载CSS异步加载的几种方式1.js动态创建样式表link元素,并插入到DOM中。2.设置media属性3.设置rel属性4.rel="preload"三、文件压缩四、去除无用CSS五、有选择地使用选择器六、减少使用昂贵的属性七、优化重排与重绘1.减少重排2.避免不必要的重绘八、让元素及其内容尽可能独立于文档树的其余部分九、避免使用@import十、开启GPU
VUE学习笔记—Vue运行时渲染
前端姑娘
VUE vue.js 前端 javascript
前言有一个需求:能不能让用户自制组件,从而达到定制渲染某个区域的目的。在线DOME预览大致说一下项目的背景:我们做了一个拖拉拽生成界面的系统,通过拖拽内置的组件供用户定制自己的界面,但毕竟内置的组件有限,可定制性不高,那么给用户开放一个自定义代码组件,让用户自己通过写template+js+css的方式自由定制岂不是妙哉。那么该怎么实现呢?我们先来看一vue官方的介绍很多时候我们貌似已经忽略了渐进
vue3 路由的使用
前端不加班
vue3 vue.js javascript 前端
路由的使用在传统的Web开发过程中,当需要实现多个站内页面时,以前需要写很多个HTML页面,然后通过标签来实现互相跳转。在如今工程化模式下的前端开发,像Vue工程,可以轻松实现只用一个HTML文件,却能够完成多个站内页面渲染、跳转的功能,这就是路由。TIP从这里开始,所有包含到.vue文件引入的地方,可能会看到@xx/xx.vue这样的写法。@views是src/views的路径别名,@cp是sr
前端-JS进阶-API/WebAPI/DOM
知恩️
前端 javascript html
文章目录1.API与WebAPI2.DOM1.DOM树2.获取元素3.事件基础4.常见鼠标事件3.改变文本内容/元素属性1.改变文本内容2.改变元素属性4.改变表单属性5.改变CSS样式属性6.排他思想(算法)7.获取/修改/删除属性内容1.获取属性的值2.设置属性的值3.移除属性8.H5自定义属性9.节点操作1.父子节点2.兄弟节点3.创建/添加节点4.删除节点5.复制节点6.创建元素10.DO
问题解决:vue dev模式没问题,dist之后页面not found
Einstellung
前端 vue javascript koa2
导读:本菜鸡作为一个JavaScript的初学者,搞了一个Vue页面之后想将其在生产环境中部署。但是dist之后发现生成的静态页面只有首页访问正常,其余页面全部都是NotFound,百思不得其解。经过调查解决了问题。将自己学习和思考过程记录下来,供后来的人一个参考。SPA单页谈起要想解决dist之后notfound问题,首先要理解Vue的SPA单页特性,首先来看一下SPA定义:单页Web应用(si
速盾:cdn加速好还是整站加速好?
速盾cdn
网络 web安全 安全
CDN加速和整站加速都是在网站访问速度上的优化手段,但它们的实现原理和效果略有不同。CDN(ContentDeliveryNetwork)加速是利用分布在全球各地的服务器节点,将网站的静态资源(如图片、CSS、JavaScript等)缓存到离用户最近的节点上,从而提高用户访问这些资源的速度。CDN加速可以减轻源站的访问压力,提高网站的稳定性,并且有效地解决了不同地域用户访问速度慢的问题。此外,CD
谈谈nvm、nrm、pnpm的理解
段子君
nvm nrm pnpm 前端
谈一谈目前用的最多的也是主流的工具nvm、nrm以及pnpm的理解。nvm一般我们在公司开发,公司一般可能会有多个项目,可能有新项目也有老项目,不同的前端工程可能依赖的node版本不一样。这个时候就需要我们拥有多个node版本来开发不同的工程,如何安装多个node版本并可以随意的切换我们的node开发环境,这个时候nvm就能完美的发挥出自己的优势。nvm版本过低是不兼容vue3的项目的,我推荐1.
洛杉矶出差第17天
Bruce_9043
我是一个小小的外贸人,主要做服装类别,前端开发和设计刚刚开始,因此海外出差比较多;继去年117天的纽约常驻之后,今年我又来到了洛杉矶这个城市,今天是第17天的生活了,送走了日夜相处的同事,从今天开始,我便一个人要生活了,大概还有38天的日子要去过,而我在这里的任务也逐渐变得清晰明朗起来,但难度依然很大。我们住在洛杉矶的downtown,整体房间的环境还是比较好,到办公室也就20分钟左右的路程,这是
es6新增的内容与概念
勇敢的茂密
es6 前端 ecmascript
从头看到尾,不会的话干脆就回家放一只羊吧,放多了我怕你数不过来目录es6是什么?let和const关键字数组方法箭头函数新增数据类型Symbol新增数据结构set和map一、es6是什么?ES6的发布标志着JavaScript语言的一个重要演进,为开发者带来了更多便利和功能,并推动了JavaScript的发展和广泛应用。许多现代开发工具和框架已经支持ES6的语法和功能,使开发者能够更好地开发和维护
【javascript】数据精度丢失问题
芭拉拉小魔仙
js javascript 开发语言
一、为什么会出现精度丢失的问题JavaScript中存在小数点精度丢失的问题是由于其使用的浮点数表示方式。JavaScript采用的是双精度浮点数表示法,也称为IEEE754标准,它使用64位来表示一个数字,其中52位用于表示有效数字,而其他位用于表示符号、指数和特殊情况。由于使用有限的位数来表示无限的小数,JavaScript无法准确地表示某些小数。其中一个典型的示例是0.1,它在二进制中是一个
JavaScript 中的深拷贝新宠:structuredClone() 函数详解
芭拉拉小魔仙
js javascript 开发语言 ecmascript
在JavaScript中,处理对象拷贝时,我们经常会遇到浅拷贝(shallowcopy)和深拷贝(deepcopy)的概念。浅拷贝只复制对象的第一层属性,如果属性值是引用类型(如对象、数组等),则只复制引用而不复制对象本身,这可能会导致原始数据被意外修改。而深拷贝则递归地复制对象及其所有子属性,确保原始数据和拷贝数据完全独立。传统上,JavaScript没有内置直接进行深拷贝的函数,开发者通常需要
redis学习笔记——不仅仅是存取数据
Everyday都不同
returnSource expire/del incr/lpush 数据库分区 redis
最近项目中用到比较多redis,感觉之前对它一直局限于get/set数据的层面。其实作为一个强大的NoSql数据库产品,如果好好利用它,会带来很多意想不到的效果。(因为我搞java,所以就从jedis的角度来补充一点东西吧。PS:不一定全,只是个人理解,不喜勿喷)
1、关于JedisPool.returnSource(Jedis jeids)
这个方法是从red
SQL性能优化-持续更新中。。。。。。
atongyeye
oracle sql
1 通过ROWID访问表--索引
你可以采用基于ROWID的访问方式情况,提高访问表的效率, , ROWID包含了表中记录的物理位置信息..ORACLE采用索引(INDEX)实现了数据和存放数据的物理位置(ROWID)之间的联系. 通常索引提供了快速访问ROWID的方法,因此那些基于索引列的查询就可以得到性能上的提高.
2 共享SQL语句--相同的sql放入缓存
3 选择最有效率的表
[JAVA语言]JAVA虚拟机对底层硬件的操控还不完善
comsci
JAVA虚拟机
如果我们用汇编语言编写一个直接读写CPU寄存器的代码段,然后利用这个代码段去控制被操作系统屏蔽的硬件资源,这对于JVM虚拟机显然是不合法的,对操作系统来讲,这样也是不合法的,但是如果是一个工程项目的确需要这样做,合同已经签了,我们又不能够这样做,怎么办呢? 那么一个精通汇编语言的那种X客,是否在这个时候就会发生某种至关重要的作用呢?
&n
lvs- real
男人50
LVS
#!/bin/bash
#
# Script to start LVS DR real server.
# description: LVS DR real server
#
#. /etc/rc.d/init.d/functions
VIP=10.10.6.252
host='/bin/hostname'
case "$1" in
sta
生成公钥和私钥
oloz
DSA 安全加密
package com.msserver.core.util;
import java.security.KeyPair;
import java.security.PrivateKey;
import java.security.PublicKey;
import java.security.SecureRandom;
public class SecurityUtil {
UIView 中加入的cocos2d,背景透明
374016526
cocos2d glClearColor
要点是首先pixelFormat:kEAGLColorFormatRGBA8,必须有alpha层才能透明。然后view设置为透明glView.opaque = NO;[director setOpenGLView:glView];[self.viewController.view setBackgroundColor:[UIColor clearColor]];[self.viewControll
mysql常用命令
香水浓
mysql
连接数据库
mysql -u troy -ptroy
备份表
mysqldump -u troy -ptroy mm_database mm_user_tbl > user.sql
恢复表(与恢复数据库命令相同)
mysql -u troy -ptroy mm_database < user.sql
备份数据库
mysqldump -u troy -ptroy
我的架构经验系列文章 - 后端架构 - 系统层面
agevs
JavaScript jquery css html5
系统层面:
高可用性
所谓高可用性也就是通过避免单独故障加上快速故障转移实现一旦某台物理服务器出现故障能实现故障快速恢复。一般来说,可以采用两种方式,如果可以做业务可以做负载均衡则通过负载均衡实现集群,然后针对每一台服务器进行监控,一旦发生故障则从集群中移除;如果业务只能有单点入口那么可以通过实现Standby机加上虚拟IP机制,实现Active机在出现故障之后虚拟IP转移到Standby的快速
利用ant进行远程tomcat部署
aijuans
tomcat
在javaEE项目中,需要将工程部署到远程服务器上,如果部署的频率比较高,手动部署的方式就比较麻烦,可以利用Ant工具实现快捷的部署。这篇博文详细介绍了ant配置的步骤(http://www.cnblogs.com/GloriousOnion/archive/2012/12/18/2822817.html),但是在tomcat7以上不适用,需要修改配置,具体如下:
1.配置tomcat的用户角色
获取复利总收入
baalwolf
获取
public static void main(String args[]){
int money=200;
int year=1;
double rate=0.1;
&
eclipse.ini解释
BigBird2012
eclipse
大多数java开发者使用的都是eclipse,今天感兴趣去eclipse官网搜了一下eclipse.ini的配置,供大家参考,我会把关键的部分给大家用中文解释一下。还是推荐有问题不会直接搜谷歌,看官方文档,这样我们会知道问题的真面目是什么,对问题也有一个全面清晰的认识。
Overview
1、Eclipse.ini的作用
Eclipse startup is controlled by th
AngularJS实现分页功能
bijian1013
JavaScript AngularJS 分页
对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下,我们的数据会比较多,无法很好地显示在单个页面中。在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能。既然在整个应用中这是一种很常见的需求,那么把这一功能抽象成一个通用的、可复用的分页(Paginator)服务是很有意义的。
&nbs
[Maven学习笔记三]Maven archetype
bit1129
ArcheType
archetype的英文意思是原型,Maven archetype表示创建Maven模块的模版,比如创建web项目,创建Spring项目等等.
mvn archetype提供了一种命令行交互式创建Maven项目或者模块的方式,
mvn archetype
1.在LearnMaven-ch03目录下,执行命令mvn archetype:gener
【Java命令三】jps
bit1129
Java命令
jps很简单,用于显示当前运行的Java进程,也可以连接到远程服务器去查看
[hadoop@hadoop bin]$ jps -help
usage: jps [-help]
jps [-q] [-mlvV] [<hostid>]
Definitions:
<hostid>: <hostname>[:
ZABBIX2.2 2.4 等各版本之间的兼容性
ronin47
zabbix更新很快,从2009年到现在已经更新多个版本,为了使用更多zabbix的新特性,随之而来的便是升级版本,zabbix版本兼容性是必须优先考虑的一点 客户端AGENT兼容
zabbix1.x到zabbix2.x的所有agent都兼容zabbix server2.4:如果你升级zabbix server,客户端是可以不做任何改变,除非你想使用agent的一些新特性。 Zabbix代理(p
unity 3d还是cocos2dx哪个适合游戏?
brotherlamp
unity自学 unity教程 unity视频 unity资料 unity
unity 3d还是cocos2dx哪个适合游戏?
问:unity 3d还是cocos2dx哪个适合游戏?
答:首先目前来看unity视频教程因为是3d引擎,目前对2d支持并不完善,unity 3d 目前做2d普遍两种思路,一种是正交相机,3d画面2d视角,另一种是通过一些插件,动态创建mesh来绘制图形单元目前用的较多的是2d toolkit,ex2d,smooth moves,sm2,
百度笔试题:一个已经排序好的很大的数组,现在给它划分成m段,每段长度不定,段长最长为k,然后段内打乱顺序,请设计一个算法对其进行重新排序
bylijinnan
java 算法 面试 百度 招聘
import java.util.Arrays;
/**
* 最早是在陈利人老师的微博看到这道题:
* #面试题#An array with n elements which is K most sorted,就是每个element的初始位置和它最终的排序后的位置的距离不超过常数K
* 设计一个排序算法。It should be faster than O(n*lgn)。
获取checkbox复选框的值
chiangfai
checkbox
<title>CheckBox</title>
<script type = "text/javascript">
doGetVal: function doGetVal()
{
//var fruitName = document.getElementById("apple").value;//根据
MySQLdb用户指南
chenchao051
mysqldb
原网页被墙,放这里备用。 MySQLdb User's Guide
Contents
Introduction
Installation
_mysql
MySQL C API translation
MySQL C API function mapping
Some _mysql examples
MySQLdb
HIVE 窗口及分析函数
daizj
hive 窗口函数 分析函数
窗口函数应用场景:
(1)用于分区排序
(2)动态Group By
(3)Top N
(4)累计计算
(5)层次查询
一、分析函数
用于等级、百分点、n分片等。
函数 说明
RANK() &nbs
PHP ZipArchive 实现压缩解压Zip文件
dcj3sjt126com
PHP zip
PHP ZipArchive 是PHP自带的扩展类,可以轻松实现ZIP文件的压缩和解压,使用前首先要确保PHP ZIP 扩展已经开启,具体开启方法就不说了,不同的平台开启PHP扩增的方法网上都有,如有疑问欢迎交流。这里整理一下常用的示例供参考。
一、解压缩zip文件 01 02 03 04 05 06 07 08 09 10 11
精彩英语贺词
dcj3sjt126com
英语
I'm always here
我会一直在这里支持你
&nb
基于Java注解的Spring的IoC功能
e200702084
java spring bean IOC Office
java模拟post请求
geeksun
java
一般API接收客户端(比如网页、APP或其他应用服务)的请求,但在测试时需要模拟来自外界的请求,经探索,使用HttpComponentshttpClient可模拟Post提交请求。 此处用HttpComponents的httpclient来完成使命。
import org.apache.http.HttpEntity ;
import org.apache.http.HttpRespon
Swift语法之 ---- ?和!区别
hongtoushizi
? swift !
转载自: http://blog.sina.com.cn/s/blog_71715bf80102ux3v.html
Swift语言使用var定义变量,但和别的语言不同,Swift里不会自动给变量赋初始值,也就是说变量不会有默认值,所以要求使用变量之前必须要对其初始化。如果在使用变量之前不进行初始化就会报错:
var stringValue : String
//
centos7安装jdk1.7
jisonami
jdk centos
安装JDK1.7
步骤1、解压tar包在当前目录
[root@localhost usr]#tar -xzvf jdk-7u75-linux-x64.tar.gz
步骤2:配置环境变量
在etc/profile文件下添加
export JAVA_HOME=/usr/java/jdk1.7.0_75
export CLASSPATH=/usr/java/jdk1.7.0_75/lib
数据源架构模式之数据映射器
home198979
PHP 架构 数据映射器 datamapper
前面分别介绍了数据源架构模式之表数据入口、数据源架构模式之行和数据入口数据源架构模式之活动记录,相较于这三种数据源架构模式,数据映射器显得更加“高大上”。
一、概念
数据映射器(Data Mapper):在保持对象和数据库(以及映射器本身)彼此独立的情况下,在二者之间移动数据的一个映射器层。概念永远都是抽象的,简单的说,数据映射器就是一个负责将数据映射到对象的类数据。
&nb
在Python中使用MYSQL
pda158
mysql python
缘由 近期在折腾一个小东西须要抓取网上的页面。然后进行解析。将结果放到
数据库中。 了解到
Python在这方面有优势,便选用之。 由于我有台
server上面安装有
mysql,自然使用之。在进行数据库的这个操作过程中遇到了不少问题,这里
记录一下,大家共勉。
python中mysql的调用
百度之后能够通过MySQLdb进行数据库操作。
单例模式
hxl1988_0311
java 单例 设计模式 单件
package com.sosop.designpattern.singleton;
/*
* 单件模式:保证一个类必须只有一个实例,并提供全局的访问点
*
* 所以单例模式必须有私有的构造器,没有私有构造器根本不用谈单件
*
* 必须考虑到并发情况下创建了多个实例对象
* */
/**
* 虽然有锁,但是只在第一次创建对象的时候加锁,并发时不会存在效率
27种迹象显示你应该辞掉程序员的工作
vipshichg
工作
1、你仍然在等待老板在2010年答应的要提拔你的暗示。 2、你的上级近10年没有开发过任何代码。 3、老板假装懂你说的这些技术,但实际上他完全不知道你在说什么。 4、你干完的项目6个月后才部署到现场服务器上。 5、时不时的,老板在检查你刚刚完成的工作时,要求按新想法重新开发。 6、而最终这个软件只有12个用户。 7、时间全浪费在办公室政治中,而不是用在开发好的软件上。 8、部署前5分钟才开始测试。