![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
文章平均质量分 90
高鹏飞白羊
从事自动化测试,接口测试,安全测试,性能测试
展开
-
根据HTML切割,排序,返回给HTML文件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div> <ul id="ul1"> &...原创 2019-10-25 15:57:10 · 127 阅读 · 0 评论 -
切割str.split()
1,简单切割str.split("")<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> var e...原创 2019-10-24 11:15:14 · 165 阅读 · 0 评论 -
去掉前后空格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> //删除字符串开头的空字符 function...原创 2019-10-24 11:09:07 · 137 阅读 · 0 评论 -
string字符串替换API
替换字符串replace var str=""; var str=str.replace(/正则/ig,"**");<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></he...原创 2019-10-15 18:02:53 · 622 阅读 · 0 评论 -
string正则表达式使用查找字符串的API
查找1,查找一个固定的关键词出现的位置var i=str.indexOf(“关键词”,start)在str中,从start位置开始找下一个关键词的位置,如果省略start,则默认从0位置开始找返回:关键词第一个字所处位置的下标如果找不到返回-1<!DOCTYPE html><html lang="en"><head> <meta c...原创 2019-10-15 17:40:16 · 470 阅读 · 0 评论 -
正则表达式
正则表达式用于:1,验证字符2,查找敏感词定义正则表达式字符集电话号:车牌号码匹配空字符选择和分组身份证号码指定匹配位置去前后空格匹配首字母...原创 2019-10-15 16:01:19 · 63 阅读 · 0 评论 -
Bootstrap全局样式
简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。中文镜像:www.bootcss.com英文官网:http://getbootsratp.com用于开发响应式布局、移动端优先的web按钮相关样式...原创 2019-10-14 15:48:03 · 107 阅读 · 0 评论 -
css基础概念
常用的样式:内部样式<!doctype html><html> <head> <title></title> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="max-age=3600"> <style>...原创 2019-09-16 17:36:31 · 100 阅读 · 0 评论 -
css盒子模型
box-sizing属性指定框模型的计算方式#d1{width:200px;height:200px;background:#f00;padding:10px;margin:10px;border:5px solid #000;box-sizing:border-box; }box-sizing:border-box;边框以内包含边框实际占地宽度=左外边距+...原创 2019-09-17 16:13:21 · 62 阅读 · 0 评论 -
css背景
背景颜色background-color:背景图片:background-image:url();背景图片平铺:background-repeat:repeat-x;#d1{width:800px;height:800px;background-color:#aff;border:5px solid #f00;background-image:url("…/img/tu....原创 2019-09-18 14:13:52 · 77 阅读 · 0 评论 -
CSS复杂选择器
兄弟选择器具备相同腹肌元素的平级元素之间称为兄弟元素注意:兄弟选择器,只能往后,不能往前找1,相邻兄弟选择器,获取紧紧挨着某元素后面的兄弟元素选择器1+选择器2{}<!doctype html><html> <head> <title></title> <meta charset="utf-8"> <...原创 2019-10-08 10:32:55 · 203 阅读 · 0 评论 -
xml文件
1,顶端声明<?xml version="1.0" encoding="utf-8"?>2,所有的标签必须成对出现,没有单标签3,严格区分大小写4,xml允许全套,注意嵌套顺序tom5,每个标签允许自定义属性,格式与HTML一直,属性值,必须使用""括起来6,每一个xml文档,有且只有一个根元素xml文件<?xml version="1.0" encodin...原创 2019-09-12 17:56:22 · 95 阅读 · 0 评论 -
ajax输入一个值带出符合项实践
服务器文件//服务器端的文件const express=require('express');//psotconst bodyParser=require('body-parser');const demoRouter=require('./routers/demo.js');const ajaxRouter=require('./routers/ajax.js');var serv...原创 2019-09-12 16:01:50 · 88 阅读 · 0 评论 -
ajax之post实践
服务器文件//服务器端的文件const express=require('express');//psotconst bodyParser=require('body-parser');const demoRouter=require('./routers/demo.js');const ajaxRouter=require('./routers/ajax.js');var serv...原创 2019-09-12 15:36:30 · 107 阅读 · 0 评论 -
ajax实践get方法
服务器文件://服务器端的文件const express=require('express');//psotconst bodyParser=require('body-parser');const demoRouter=require('./routers/demo.js');const ajaxRouter=require('./routers/ajax.js');var ser...原创 2019-09-12 14:45:39 · 130 阅读 · 0 评论 -
AJAX简单
1,同步在一个任务进行中不能开启其他任务同步访问:浏览器向服务器发送请求时,浏览器只能等待服务器的响应,不能做娶她事情出现场合:地址栏网页访问a标签跳转submit提交2,异步在一个任务进行中可以开启其他任务出现场合:用户名验证搜索词条股票走势3,异步请求的步骤1,创建异步对象2,绑定监听事件(接受请求)3,打开连接(创建请求)4,发送请求4,创建异步对象标准...原创 2019-09-11 18:35:46 · 88 阅读 · 0 评论 -
简易dom操作
获取元素对象1,document.getElementById(“d1”);2,d1,d2获取/修改双标签d1.innerHTMLd1.innerHTML=“”获取/修改单标签in1.valuein1.value=“123”;HTML事件1,单击事件onclick事件,2,获取焦点事件onfocus3,失去焦点事件onblur<!doctype html>...原创 2019-09-11 16:37:59 · 107 阅读 · 0 评论 -
文本格式化
字体的属性1,自定义字体的类型font-family:gigi,snap itc,黑体,华为彩云;2,字体大小font-size:10px;3,字体加粗font-weightbold 加粗lighter 细一些bolder 加粗nomal 正常无单位的整数,最大10004,字体样式font-style:italic;斜体font-style:nomal;5,小型大写字...原创 2019-09-19 09:16:24 · 447 阅读 · 0 评论 -
css表格
1,表格的常用属性边距属性padding(margin无效)边框属性border尺寸width height––文本格式font text line-height背景,颜色,图片,渐变background指定单元格数据的垂直对齐方式vertical-align:middle/top/bottom;––2,表格特有属性1...原创 2019-09-19 11:25:37 · 93 阅读 · 0 评论 -
css定位
普通流定位浮动定位float:left/right;<!doctype html><html> <head> <title></title> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="max-age=36...原创 2019-09-19 18:32:06 · 72 阅读 · 0 评论 -
响应式布局
官网:https://www.bootcss.com/响应式布局responsive web page自适应布局可以根据不同设备而自适应更改布局,图片,文字效果,不会影响用户体验响应式必须做到:1,布局:不能使用固定的宽高,必须是流式布局(浮动)2,文字和图片大小随着容器大小而改变3,媒体查询技术响应式布局的编写1,必须写:viewport:视口width=device-w...原创 2019-10-10 16:51:15 · 169 阅读 · 0 评论 -
CSS动画
将多个过度效果结合在一起就是动画动画是通过关键帧开控制动画的每一步关键帧1,动画执行的时间点2,在该点上的样式动画的使用步骤1,声明关键帧@keyframes change{0%{background:#f00;border-radius:0%;}25%{background:#ff0;border-radius:50%;}50%{background:pink;border-...原创 2019-10-09 18:15:42 · 95 阅读 · 0 评论 -
CSS过度
1,transition:默认为all2,transition-durationtims<!doctype html><html> <head> <title></title> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content...原创 2019-10-09 16:30:27 · 59 阅读 · 0 评论 -
CSS转换
改变元素在页面中位置,大小,角度以及形态的一种方法2D转换:只在x轴和y轴上发生转换效果3D转换:增加了z轴的转换效果转换的属性transform:取值: none 默认值 无任何转换效果transform-function 一个活多个转换函数,多个的中间用空格隔开transform-origin转换原点取值: px数字的%关键字 left center right top ...原创 2019-10-09 14:20:13 · 91 阅读 · 0 评论 -
弹性布局
弹性布局主要解决:一个元素中的子元素的布局方式,为布局提供最大的灵活性<!doctype html><html> <head> <title></title> <meta charset="utf-8"> <!--引入外部样式--> <style> #parent{ bor...原创 2019-10-09 09:44:28 · 147 阅读 · 0 评论 -
CSS伪元素选择器
attr:first-line{}第一行字体样式attr:first-letter{}第一个字体样式attr::selection{}选中字体样式,只支持背景颜色和字体颜色<!doctype html><html> <head> <title></title> <meta charset="utf-8">...原创 2019-10-08 14:57:27 · 89 阅读 · 0 评论 -
CSS伪类选择器
:link :visited :hover :active :focus1,目标伪类(锚点)突出显示活动的HTML锚点标签,匹配被激活的锚点元素element:target{}<!doctype html><html> <head> <title></title> <meta charset="utf-8">...原创 2019-10-08 13:01:19 · 112 阅读 · 0 评论 -
定位
css定位1,定位属性:position值static:默认值,静态------》默认文档流relative 相对定位absolute 绝对定位fixed 固定定位元素的position设置为relative/absolute/fixed中任意一个值,该元素被称为已定位元素2,偏移属性top/bottom/right/leftleft:100px 距离左边100个像素top:...原创 2019-09-23 08:47:35 · 67 阅读 · 0 评论 -
css显示
1,显示方式display:none:隐藏,不显示元素block:让元素的表现形式和块级元素一样特点:独占一行,可设置宽高,垂直外边距inline:让元素的表现形式和行内元素一样特点:多个元素公用一行,不能设置宽高和垂直外边距inline-block:让元素的表现适合和行内元素一样特点:多个元素公用一行,不能设置宽高和垂直外边距table:让元素的表现适合和table一样特点...原创 2019-09-19 19:19:24 · 99 阅读 · 0 评论 -
H5中新提出的表单控件
1,电子邮件表单提交时,会验证是否符合Email的规范2,搜索类型 <input type="search"><br>提供了快速清除的功能3,URL类型验证数据是否符合URL规范(http://*****)4,电话号码类型 <input type="tel"><br>在移动端设备中,显示拨号键盘5,数字类型 ...原创 2019-09-11 10:14:53 · 118 阅读 · 0 评论 -
文本域和下拉和其他元素
文本域允许录入多行数据的文本框 <textarea name="pl" cols="3" rows="3" placeholder="文本域"></textarea>下拉显示select标签name 定义名称value 下拉属性值size 定义显示的选项数量,默认1如果大于1,元素表现为滚动列表multiple 多选,无值属性,注意name变为数组...原创 2019-09-11 09:03:59 · 190 阅读 · 0 评论 -
表单
1,作用提供可视化的输入控件,收集用户信息并提交给服务器2,表单的组成部分后端部分:对提交数据进行处理的接口(user.js)前段部分:提供表单控件,与用户交互的可视化控件3,表单标签属性**1,action**定义表单被提交时动作,通常定义的是服务器处理程序的地址(URL/接口)默认提交给本页**2,method**指定表单数据提交方式get:默认值 明文提交,提交的...原创 2019-09-10 18:12:45 · 70 阅读 · 0 评论 -
nodejs路由器
商品模块(product)列表 /product/list 详情/product/detail 删除 /product/delete用户模块(user)列表 /user/list 详情 /user/detail 删除 /user/delete路由器路由在使用过程中,不同的模块产生相同的URL,同一模块下的所有的路由挂载到特定的前缀例如:商品模块下的路由挂载到product,...原创 2019-09-05 16:35:51 · 491 阅读 · 0 评论 -
路由传参
//:lid接受浏览器传递的数据,名称为lidreq.params,获取浏览器传递的参数,格式为对象server.get(’/detail/:lid’,(req,res)=>{req.params}const express=require(‘express’);var server=express();server.listen(8888);//:lid接受浏览器传递的数据,名...原创 2019-09-05 14:24:59 · 72 阅读 · 0 评论 -
express之获取浏览器端数据
js文件1, get 方法const express=require(‘express’);var server=express();server.listen(8888);//通过表单传递数据到服务器端//请求的方法是get//发送一个文件mylogin.html到浏览器server.get(’/login’,(req,res)=>{//res.sendFile(__d...原创 2019-09-05 10:23:19 · 823 阅读 · 0 评论 -
express框架
基于NODEJS,用于构建web服务器的框架。**官网:**http://www.expressjs.com.cn**安装:**npm install express1,引入第三方模块const express=require(‘express’);2,创建web服务器var server=express();3,监听端口server.listen(8888);(1)路由浏览器...原创 2019-09-04 16:42:59 · 85 阅读 · 0 评论 -
nodejs创建web服务器
**var server=http.createServer();**创建服务器**server.listen(8888);**监听8888端口const http=require(‘http’);//创建web服务器var server=http.createServer();//监听端口server.listen(8888,()=>{console.log(‘创建web服务...原创 2019-09-04 15:58:01 · 200 阅读 · 0 评论 -
nodejs查询天气网数据
//引入http模块const http=require(‘http’);//请求一个接口URL,通过接口可以获取数据http.get(‘http://www.weather.com.cn/data/sk/101010100.html’,(res)=>{console.log(res.statusCode);res.on(‘data’,(buf)=>{console.log...原创 2019-09-04 11:34:10 · 628 阅读 · 0 评论 -
http模块之模拟浏览器
可以模拟浏览器向服务器端发送请求;也可以创建web服务器http.get(url,callback)URL 请求的URLcallback 回调函数,用来获取服务器端的响应res 响应的对象res.statusCode 响应的状态码res.on 通过事件来获取服务器端的数据,当有数据传递的时候,自动调用回调函数,把数据放入到buffer中,格式为buffer//引入http模块con...原创 2019-09-04 11:15:30 · 436 阅读 · 0 评论 -
http协议
是浏览器和web服务器之间的通信协议(1)通用头信息Request URL:请求URL,向服务器端获取的内容Request Method: 请求方法:get/postStatus Code:请求状态码:响应的状态码,200系列:服务器端成功响应300系列:响应的重定向400系列:客户端错误500系列:服务器端错误Remote Address: 服务器端的IP及端口Referre...原创 2019-09-03 17:29:35 · 314 阅读 · 0 评论