前端基础学习笔记

最新推荐文章于 2023-07-27 21:17:40 发布

呆头呆脑的博子

最新推荐文章于 2023-07-27 21:17:40 发布

阅读量290

点赞数

文章标签：前端学习

本文链接：https://blog.csdn.net/weixin_52840684/article/details/129094214

版权

前端学习

一、HTML学习

//文本类型声明标签 //页面初始编写内容语言，中文为zh-CH

一个&nbsp代表一个空格，用空格键做出的空格无论有多少个在网页中只显示出一个

&+特定字符+;表示个各种字符

网页名

一、字体标签

1.和字体加粗

2.和字体倾斜

3.和加下划线

4.加删除线

特殊单标签：

分割线单标签

换行单标签

二、图片标签

图片要和html源码要在同一个文件夹下，否则无法调用

<img src=“images/微信图片_20210906212758.jpg”>相对路径

<img src=“C:\Users\��Ԥ�Լ�\Pictures\Saved Pictures”>绝对路径

<img src=“https://img0.baidu.com/it/u=869258624,1175080525&fm=26&fmt=auto”>网页路径URL

1.当图片无法显示时，alt会用文本信息提示图片内容

2.title:光标移动到图片上会有文本信息提示

3.border给图片添加边框，height\eidth给图片按照一定比例调整高度和长度

三、链接标签

<a href="path"target=“目标窗口位置”>链接文本或图片

图片链接

回到顶部锚链接

点击进入邮箱邮箱链接

href:要跳转到那个页面

2.target:页面在那里打开

3.blank:在新的窗口打开

4.self:在当前页面直接打开

四、列表标签

1.有序列表

2.无序列表

3.自定义列表

列表内容自定义列表的名称

五、表格标签

行列

colspan="a"跨a列 rowspan="b"跨b行

六、媒体元素

controls:视频、音频控制条

autoplay:自动播放

ifrname内联框架：

七、表单便签

表单form

邮箱

商品数量

URL

搜索

音量

action；表单提交的位置，可以是网站也可以是一个地址

method:提交方式，post,get两种，一般使用post,因为get方式在网页信息内可见

input:文本输入框，text可见，password不可见

value:文本框初始化默认值

MaxLength：能输入字符的最大长度

size:文本框的长度

radio；单选框，但要指定姓名（组），否则所有选项都可以选

label：增强鼠标可用性

readonly：只读

hideen：隐藏

disabled：禁用

placeholder:文本框内提示语句

required：为空提示，非空才可提交

pattern:正则表达式，使用正则表达式自定义判断，提高验证效果

二、CSS学习

行内样式<h1 style “color:green”>大字标题

内部样式h1{

color: red;

}

外部样式

样式优先级:行内>内部>外部

一、选择器

1.基本选择器

标签选择器:所有h1\p1标签全部为这种样式 -->
h1{
color: red;
}
类标签:可以对样式分组,方便复用
.name{
color: red;
}
id选择器:全局唯一,只能出现在特定位置
#name{
color: red;
}
优先级:id>类>标签

2.层次选择器

<style>

/*子代选择器: body下的子代同级p标签 /
body >p{
background-color:black;
}

/ 相邻兄弟选择器:只有p标签下面的第一行改变 */

/通用选择器: p向下所有同级兄弟/

<style> 
.active2 ~p{
      background-color: brown;
    }
<style>

3.结构伪类选择器

ul li:first-child{
background: crimson;
}
ul li:last-child{
background: darkblue;
}
/* 选中父元素下的第一个元素,不是p不发生变化,若是P根据内容产生指定效果,单纯按照顺序选择 */
p:nth-child(1){
background: darkcyan;
}
/*选中父元素下的第一个p元素,按照类型产生变化 */
p:nth-of-type(1){
background: firebrick;
}

··

4.属性选择器

选择器语法:a[id=x/id]{变化效果语句}

=:完全相等 -->

*=a:语句中包含a -->

^=a:以a开头

$=a:以a结尾

二、字体样式

body{
color:blue;//字体颜色
font-family:"楷体";//字体定义
font-size: large;//字号大小
font-weight:bolder;//字体粗细
    }
.p2{
     font:bolder 12px "仿宋体";//一行内统一修改
}

三、文本样式

 color:000000;RGB对应红，绿，蓝三种颜色，0~F表示不同的颜色
           color:rgb(0,255,255);自定义颜色
           color: rgba(0,255,255,0.8);0.8为透明度 
           text-align:center;文本居中 */
           text-decoration: line-through;中划线
           text-decoration: overline;上划线
           text-decoration: underline;下划线
           text-indent: 2em;首行缩进两个单位
           line-height: height;单行文字上下居中,行高和块的高度一致
           img,span{vertical-align:middle ;}文本与图片居中等高

四、超链接伪类

       a{
         text-decoration: none;
             color:000000;
        }
        鼠标悬浮在指定位置实现变化效果
        a:hover{
            color:rgb(0, 155, 155)
        }

五、列表

 ul li{
            list-style: none;
            height: 30px;
            text-indent: 1em;
            background: gray url(../images/you.png),200px,2px no-repeat;背景图片
            /* list-style: decimal;数字 */
            /* list-style: square;方块 */
            /* list-style: circle;空心圆 */

六、盒子模型(div)

1.内外边距

外边距：margin

margin-top：0px;//上外边距为零，其他为默认值

margin：0，0，0，0//上下左右全为零

内边距：padding

内边距与外边距同理

边框：border

border:1px solid red//边框修饰

系统会默认内外边框

行内“盒子”：>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p1bQ8xJ8-1676641051913)(C:/Users/呆预言家/AppData/Roaming/Typora/typora-user-images/image-20211217200839276.png)]

圆角边框

div{
            /* margin: 0 auto 内容居中，但有些情况可能不适用 */
            margin: 0 auto;
            width:100px;
            height: 100px;
            border: 1px solid red;
            /*  border-radius圆角，当数值为高度/宽度一半时就是一个圆形 */
            border-radius: 50px ;
            /* box-shadow: 10px 10px 100px green; */
}

2.display（可以实现行内元素排版但大多数不会使用）

 div{
         border: 1px solid black;
         width: 100px;
         height: 100px;
         display: inline-block;
     }
     span{
         border: 1px solid red;
         width: 100px;
         height: 100px;
         display:inline-block;
    }

3.float

<style>
          div{
               margin: 10px;
               padding: 5px;
          }
          #father{
              border:1px solid black;
          }
          .c1{
            border:1px #f0f dashed;
            display: inline-block;
          }
          .c2{
            border:1px #ff0 dashed;
            display: inline-block;
          }
          .c3{
            border:1px #0ff dashed;
            display: inline-block;
          }
          .c4{
              border:1px #000 dashed;
              font-size: 12px;
              line-height: 23px;
              float-right;//向右浮动
          }
    </style>
</head>
<body>
    <div id="father">
    <div class="c1">
         <img src="../images/wo - 副本(1).jpg" alt="">
    </div>
    <div class="c2">
        <img src="../images/zfz - 副本(1).jpg" alt="">
    </div>
    <div class="c3">
        <img src="../images/shu(1)(1).jpg" alt="">
    </div>
    <div class="c4">
       <p> 编程是爱好，恭喜你发现宝藏男孩一枚~希望你们关注我是因为喜欢我</p>
    </div>
</div>

clear

clear-left;//左侧不允许出现浮动
clear-right;//右侧不允许出现浮动
clear-none;//无限制
clear-both;//两侧不允许出现浮动

父级塌陷解决方法

1.给父级增加高度

#father{
              border:1px solid black;
              height: 800;
          }

2.在外面增加一个空的div，清除浮动

<div class="clear"></div>
clear{
    margin:0;
    padding:0;
    clear:both;
}

3.overflow

在父级中增添一个overflow-hidden;
扩展：overflow: scroll;//底/侧边划动栏

4.在父类添加一个伪类

 #father:after{
              content: '';
              display:block;
              clear:both;
          }

七、定位

相对定位：position: relative;

相对于原来的位置发生移动，left:100px;就是选中内容的原位置在移动后位置的左边100px

绝对定位: position: absolute;

默认相对浏览器绝对定位

固定定位:position: fixed;

即使页面滚动也依旧不动

八、杂记

`cursor`

cursor： CSS 属性设置光标的类型（如果有），在鼠标指针悬停在元素上时显示相应样式(也就是鼠标的图形形状)。

cursor: pointer;//手指

cursor: default;//箭头

transition

transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换

类似:hover，:active ，效果时间更长

box-sizing

调整盒子模型的宽度与高度以及内外边距，减少计算问题

官方解答:https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

a标签的4种状态及设置CSS

a:link 超链接的默认样式
a:visited 访问过的（已经看过的）链接样式
a:hover 鼠标处于鼠标悬停状态的链接样式
a:active 当鼠标左键按下时，被激活（就是鼠标按下去那一瞬间）的链接样式。

项目中可以这样用：

a {color:#252525; text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {color:#ba2636;text-decoration:underline;}
a:active {color:#ba2636;}

z-index(重叠元素)

在对元素进行定位时，它们可以与其他元素重叠。

z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。

元素可以设置正或负的堆叠顺序：

footer

页脚：标签定义文档或节的页脚，元素应当含有其包含元素的信息，通常包含文档的作者、版权信息、使用条款链接、联系信息等等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w52T6mLr-1676641051914)(C:/Users/呆预言家/AppData/Roaming/Typora/typora-user-images/image-20220313202744355.png)]

placeholder

input表单中的属性，提示性备注，在输入正式内容后自动褪去

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yGFN9j7Y-1676641051915)(C:/Users/呆预言家/AppData/Roaming/Typora/typora-user-images/image-20220313203041542.png)]

三、javasctipt学习

一、基础语法

<!-- <script src="js01.js"></script> 外部引入-->
//内部引入
    <script>
        'use strict'//严格检查模式
        //1.弹窗显示
        alert("Hello,World!")
        //2.变量：一切变量均用var定义，赋值是什么类型，变量就是什么类型
        // number类型
        var num=1，f=3.14,d=1.2222,x=-1;
        NaN：not a number表示无法计算的数值,通过isNaN()函数判断
        Infinity; Infinity表示无限大
        //字符串
        var name="zhangsan";
        //布尔值
        var t=ture;
         //null与undefined
         null表示一个“空”的值，它和0以及空字符串''不同，0是一个数值，''表示长度为0的字符串
         undefined表示值未定义
        //3.条件判断:与java中的条件相同
         if(2>num){
             alert("2");
             //嵌套
             if(name==="zhangsan"){
                 alert("true")
             }
             else
                 alert("flase");
         }
         //4.数组：数组内数据可以是任意类型
          var arr=[1,2,3,"true",3.14,[1,2.0,"flase"]];//常用
          new Array(1,2,3.14,"zhangsan");
          对数组长度赋值会改变数组的长度
          var arr=[1,2,3];
          arr.length=6;//此时数组长度为6，多余位置为undifined
          arr.length=2;//arr=[1,2]
          通过索引赋值时，索引超过了范围，同样会引起数组大小的变化
          arr[5]="ture";//arr=[1,2,3,undefined,"ture"]
         //5.对象
         var person{
             name:"zhangsan",
             age:18,
             id:0001,
             'school-name':"njlg"//变量命含有特殊符号时，要加'',且引用方式不同
         }
         //对象属性引用
         var str=person.name;
         var n=person["school-name"];
         //要检测person是否拥有某一属性，可以用in操作符,继承父类的属性也包含在内
          'name' in person;//true
          //要判断一个属性是否是person自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法
          //6.循环
          var i,j=0;
          for(i=0;i<100;i++){
              j++;
          }
          for...in 遍历对象属性的名称
          for(var key of arr){
              comsole.log(key);//数组下标 0，1，2
          }
          var person{
             name:"zhangsan",
             age:18,
             id:0001
          }
          for(var key in person){
              if(person.hasOwnProperty(key))//遍历自身属性
              console.log(key);//name,age,id
          }
          for...of  只遍历自身对象属性的值
          //Array也是一个对象，
         var arr=[1,2,3];
          for(var key of arr){
              comsole.log(key);//1，2，3
          }
          forEach()函数遍历
          var a=['a','c','b'];
          a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引(可以省略)
    // array: 指向Array对象本身（可以省略）
    console.log(element);
});
           var i=0,j=100;
          whlie(j>0){
              i++;
              j=j-2;
          } 

    </script>

页面控制台操作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IKpTYFyw-1676641051916)(C:/Users/呆预言家/AppData/Roaming/Typora/typora-user-images/image-20220220225800171.png)]

console.log(num)直接在控制台打印出变量的值

语句末尾自动添加‘；’机制

function f(){
    var a
        b
        c
    return
         a
}
运行时，每行语句后会被自动添加‘；’导致代码错误

二、函数

1.定义函数

所有函数都用function定义，function+函数名（参数）{函数体}

 function abs(x){
            if(x>0){
                return x;
            }
            else{
                return -x;
            }
        }

可以将一个匿名函数赋值给变量，效果相同，但不推荐使用

 var abs=function(x){
            if(x>0){
                return x;
            }
            else{
                return -x;
            }
        }

注意：函数体内部的语句在执行时，一旦执行到return时，函数就执行完毕，并将结果返回，如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined

JavaScript允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题，即使函数内部并不需要这些参数，所以创建函数时要对参数进行判断

function abs(x) {
    if (typeof x !== 'number') {
        throw 'Not a number';
    }
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

rest参数

function display(a,b,...rest){
    conlose.log(a);
    conlose.log(b);
    conlose.log(rest);
}
display(1,2,3,4,5)//1,2,[3,4,5]
dispaly(1)//1,bundefined,[]

2.变量作用域

1.两个函数内的变量即使相同但作用域不同不会相互影响

2.JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行

3.JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部：

function f() {
    var x = 'Hello, ' + y;
    console.log(x);
    var y = 'Bob';
}
f();
//实际效果
function f() {
    var y; // 提升变量y的申明，此时y为undefined，只提升变量但不会赋值
    var x = 'Hello, ' + y;
    console.log(x);
    y = 'Bob';
}

所以统一规定一个var在代码开头申明函数内部用到的所有变量

function f() {
    var
        x = 1, // x初始化为1
        y = x + 1, // y初始化为2
        z, i; // z和i为undefined
    // 其他语句:

4.不在任何函数内定义的变量就具有全局作用域。JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性,最常见的alert（）实际上是window.alert();

5.为解决块内局部作用域中变量存在的问题，ES6引入了let，另外也新加了常量const

function f() {
    for (var i=0; i<100; i++) {
        console.log(i)
    }
    i += 100; // 仍然可以引用变量i
}

改为let后将不会出现问题

function foo() {
    for (let i=0; i<100; i++) {
        console.log(i);
    }
    i += 100; //报错
}

6.解构赋值

1.一对一多对赋值
var [x, y, z] = ['hello', 'JavaScript', 'ES6'];
2.指定位置赋值
let [, , z] = ['hello', 'JavaScript', 'ES6']
3.给对象指定属性赋值
var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678',
    school: 'No.4 middle school'
};
var {name, age, passport} = person;
4.对应层次多项赋值
let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
5.使用默认值
var {name, single=true} = person;