HTML+CSS + 正则—— 笔记（2021-08-25）

*****************************

**********  HTML  *********

*****************************

1、页面自动跳转
　　<meta http-equiv="refresh" content="5" url="http://www.baidu.com">
　　　　　　　　　　　　刷新 　　　　 秒 　　 新地址

2、https引用http资源的兼容性
　　在https的网站中引用http路径的js或css会导致不起作用，其形如：<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
　　解决办法：将http:去掉，改为　<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

 

*****************************

**********  CSS  ***********

*****************************

1、css动画：

　　参考文档：https://www.cnblogs.com/xiaohuochai/p/7372665.html

　　实践方法：

　　　　引用——<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">　　　     

//旋转：         　　　　
transform: translate(50px,100px);  //偏移
transform: rotate(30deg);  //旋转
transform: scale(2,4);//长宽尺寸比例缩放

// transition过度：
div:hover{padding-left:10px;}
div{transition: all 1s linear 0s;}

//animate动画:
animation: myfirst 5s;

@keyframes myfirst{
    from {background: red;}
    to {background: yellow;}
}

@keyframes myfirst1 {
    0% {background: red;}
    25% {background: yellow;}
    50% {background: blue;}
    100% {background: green;}
}

2、css打字效果：https://www.cnblogs.com/xiaohuochai/p/7521282.html

//html:
<p>核心思路就是让容器的宽度成为动画</p>
//css:
@keyframes typing{0%{width:0;}}
@keyframes caret{50%{border-color:transparent;}}
p{
　　width:17em;
　　animation:typing 9s steps(17) infinite ,caret .5s steps(1) infinite;
　　white-space: nowrap;
　　overflow: hidden;
　　border-right:1px solid;
}

3、div标签

display:flex;
align-items:center;//垂直居中
justify-content: space-around;/center;//水平均匀分布/居中

//自适应宽度：
//父级：display:flex;
//子级：flex:1;

//好看的背景渐变
.div_gradient{
　　width:500px;
　　height:100px;
　　background: linear-gradient(25deg, rgb(79, 107, 208), rgb(98, 141, 185), rgb(102, 175, 161), rgb(92, 210, 133)) rgb(182, 228, 253);
}

4、p标签

//省略号....：
    white-space:nowrap; //文本不会换行
    text-overflow:ellipsis; //显示省略符号来代表被修剪的文本
    overflow:hidden;//内容会被修剪，并且其余内容是不可见的

text-indent：10px;//首行缩进
letter-spacing：10px;//字与字间距
text-align: justify;//两端对齐

//文字渐变效果实现
.text_signature {
　　-webkit-background-clip: text;
　　-webkit-text-fill-color: transparent;
　　background-image: linear-gradient(to right, #ec2239, #40a4e2,#ea96f5);
　　width: 320px;
}
//CSS不同单位的运算，实现不同单位的加减运算
.div{
　　width: calc(100% - 50px);
}

5、input标签

input{
    text-transform: uppercase;//字符大小写转换
}

6、阴影

//边框阴影
box-shadow: 10px 10px 5px #888888;//横向偏移  纵向偏移  模糊度  颜色
box-shadow: 0px 0px 13px 1px rgba(51, 51, 51, 0.1);

//文本阴影
text-shadow: 5px 5px 5px #FF0000;

7、自定义字体

@font-face {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
    url('Sansation_Light.eot'); /* IE9+ */
}

div {
    font-family:myFirstFont;
}

8、解决IOS页面滑动卡顿

body,html{
    -webkit-overflow-scrolling: touch;
}

9、css 绘制三角形

div {
    width: 0;
    height: 0;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent red;
    transform: rotate(90deg);
}

10、

 

 

*****************************

**********  正则  ***********

*****************************

 1、正则表达式中/i,/g,/ig,/gi,/m的区别和含义

/i (忽略大小写)
/g (全文查找出现的所有匹配字符)
/m (多行查找)
/gi(全文查找、忽略大小写)
/ig(全文查找、忽略大小写)

2、正则表达式匹配含义：

[0-9]{0,4}：
[0-9]表示0-到9的数字，{0,4}表示0到4个

5//正则表达式：
obj.value = obj.value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字而不是
obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数

//字符串：
"asdasdasd".match(/[a-m]/g)匹配指定字母--//["a", "d", "a", "d", "a", "d"]
"asdasdasd".match(/[^a-m]/g)不匹配指定字母--//["s", "s", "s"] 有中括号
"asdasdasd".match(/asd/g)匹配指定字母--//["asd", "asd"] 没有中括号

//匹配字符和下一个字符
var regExp=/[-_]\w/ig;

例子：把-或_的下一个字符变成大写：
toCamelCase("the-stealth-warrior") // returns "theStealthWarrior"
function toCamelCase(str){
　　var regExp=/[-_]\w/ig;
　　return str.replace(regExp,function(match){
　　　　return match.charAt(1).toUpperCase();
　　});
}