前端学习知识整理

最新推荐文章于 2021-06-29 22:53:42 发布
最新推荐文章于 2021-06-29 22:53:42 发布
阅读量316 收藏 1
点赞数
分类专栏： 前后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45561357/article/details/113777858
版权

前端

HTML

标签

<h> <p> <br>   id
<a>            id  href   target
<div>          id
<input type=" ">
    text	password	radio	checkbox	file	email	button(按钮)	submit	reset
<textarea></textarea>    多行文本
select   option
form	要提交的内容放置在form
    -action    响应之后数据传到哪里
    -method
    -enctype   上传文件
<ul>
<table>
<iframe>  <fieldset>

其他标签

<hr>  <!--分隔内容-->
<p><b>这个是黑体字</b><i>这个是斜体字</i></p>
<p><em>这是着重文字</em><strong>这是强调语气</strong></p>
<p>正常大小<small>小一号字体</small>  
 <sub>下标</sub><sup>上标</sup>
 <ins>这是一个插入字</ins>  <del>这是一个删除字</del>  <kbd>键盘输入</kbd> </p>

<p><code>int a = 0;</code></p>

<center>这个文本居中对齐。</center>

在这里插入图片描述

table

<table style="text-align: center;border: 1;" border="1" cellpadding="2" cellspacing="0" align="center">
    <tr>
        <th>姓名</th>
        <th>学号</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>2018114777</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>2014754542</td>
    </tr>
</table>

其中，align让整个表居中

合并单元格

<table border="1">
    <thead>
    <tr>  <!--行-->
        <th colspan="2">标题1</th>    <!--合并单元格-->
        <th>标题2</th>
        <th>标题3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>第一列</td>
        <td>第二列</td>
        <td rowspan="2">第3列</td>
        <td>第4列</td>
    </tr>
    <tr>
        <td>第一列</td>
        <td>第二列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第一列</td>
        <td>第二列</td>
        <td>第3列</td>
        <td>第4列</td>
    </tr>
    </tbody>
</table>

CSS

存放位置

  1. 单独CSS文件

    div{
	background-color:red;
	color:white;
}
在HTML文件里：

    <title>CSS</title>
<link rel="stylesheet" href="CSSCommon.css">

  2. HTML head里面用

    <style>
    div{
        background-color:red;
        color:white;
    }
    	
</style>

  3. 标签属性 style

    <h1 style="background-color:cyan;font-family:fantasy;color:crimson;text-align: center;">标题</h1>

    text-align能够让文本居中

    优先级

    标签>头部>CSS文件

整体布局初探

其中.pg-body .body-content 里的内容多的话可以出现滚轮，但其他部分不产生影响

<html>
    <head>
        <meta charset="utf-8">
        <title>DIVDEMO布局</title>
        <style type="text/css">
            #container{
                background-color:aqua;
                width: 1000px;
                height: 600px;
            }
            #top{
				background-color: blue;
				width: 1000px;
				height: 100px;
			}
			#bottom{
				background-color:blueviolet;
				width: 1000px;
				height: 100px;
                float:inline-end
			}
			#left{
				background-color: antiquewhite;
				width: 100px;
				height: 400px;
				float: left;/*漂浮属性,让块状元素不换行*/
			}
			#main{
				background-color: aquamarine;
				width: 800px;
				height: 400px;
			}
			#right{
				background-color: #FF0000;
				width: 100px;
				height: 400px;
				float: right;
			}
            .pg-body .body-content{
            position: absolute;
            top: 44px;
            left: 200px;
            bottom: 0;
            right:  0;
            background-color: green;
            margin: 0;
            overflow: auto;       /*内容出了区域之后会有滚动条*/
        }
        </style>
    </head>
    <body>
        <center>
            <div id="container">
                <div id="top">
                    <p>顶部元素</p>
                    <p>ruguowoshiyizhiyu</p>
                </div>
                <div id="bottom">shiyiwhiss</div>
                <div id="right">riaght</div>
                <div id="left">left左边</div>
                <div id="main">中间部分</div>
            </div>
        </center>
    </body>
</html>

CSS选择器

#i1{ }  id选择器
.c1{ background-color: red;}   /*标签选择器  class="c1"*/
 /*层级选择器   很常用*/
.c2 div p a{color:darkmagenta;}
/*组合选择器   很常用*/
.c4,.c5,.c6{background-color: aqua;}

效果

display:none     这一部分没了  应用很广
		inline   变为内联标签（span）
		block	 变为块级标签
		inline-block 既有内联又有块级标签属性  span可以调整大小了

注：纯内联标签无法设置长宽

边距

margin   外边距	本身不增加
padding	 内边距	本身增加

漂浮

float: left   right
如果加边框
需要在本div后面加一句
<div style="width:500px ;border:solid red">
    <div style="width:20% ;background-color: red ;float:left">f20</div>
    <div style="width:80%;background-color: orange;float:left">f80</div>
    <div style="width:20% ;background-color: red ;float:left">f20</div>
    <div style="width:30%;background-color: orange;float:right">f80</div>
    <div style="width:50%;background-color: orange;float:right">f8011</div>
    <div style="clear: both"></div>   <!--把父级边界加回来-->
</div>

position

relative		单独的时候没效果，要与absolute结合
absolute		固定 滚动会移动	
fixed			固定（相对于浏览器的窗口 如：返回顶端操作）
relative + absolute
实例：

第一个返回是在某一个div的右下角（bottom: 0;right:0）；

第二个返回顶部是永远在当前界面右下角（bottom:0px;right: 100px）

<div style="height: 1000px;background-color: chartreuse;position: relative">
    <div style="position:absolute;bottom: 0;right:0;">返回</div>
</div>
<h2>fixed</h2>
<div style="position:fixed;bottom:0px;right: 100px;font-size: 100px">返回顶部</div>

制作首页抬头部分

<style>
    body{
        margin: 0;    /*整个页面与边界间没有空隙*/
    }
    .pg-header{
        height:44px;
        background-color: #2459a2;
        line-height: 44px;     /*整个高度为44，在这里面居中*/
    }
    .w{
        width:380px;
        margin: 0 auto;      /*居中    比较好用*/
        background-color: red;
    }
    ul{
        margin: 0;
        list-style-type: none;
    }
    ul li{
        float: left;
        padding: 0 8px 0 8px;   /*上 右 下 左*/
        margin:0 8px 0 8px;
        color: white;
        cursor: pointer;
    }
    ul li:hover{
        background-color:darkgray;      /*当鼠标移动到上面时会有什么变化*/
    }
</style>

<div class="pg-header">
    <div class="w">
        <ul>
            <li>菜单1</li>
            <li>菜单2</li>
            <li>菜单3</li>
            <li>菜单4</li>
        </ul>
    </div>
</div>
<div class="pg-body"></div>
<div class="pg-footer"></div>

JavaScript

1.一定在body内部最下面引用。
2.变量：
	var a = 123;  局部变量
    a = 123;	  全局变量

类型转换

转换：
	parserInt(a);   //将某值转换为数字，不成功则为NaN;
	parseFloat(a);	//将某值转换为浮点数，否则为NaN;
特殊值：
	NaN  		非数字 可用  isNaN(num) 判断
    Infinity 	无穷大 可用  isFinite(num)判断

var status = true;
var status = false;
/*
在js中进行比较时，需要注意：
    ==       比较值相等
    !=       不等于
    ===      比较值和类型相等
    !===     不等于
    ||        或
    &&        且
*/

字符串

var name = "wupeiqi";
var value = names[0]                    // 索引
var value = name.length                 // 获取字符串长度
var value = name.trim()                 // 去除空白
var value = name.charAt(index)          // 根据索引获取字符
var value = name.lastIndexOf()
var value = name.substring(start,end)   // 根据索引获取子序列
var value = name.split("i",name)

数组

// 常见方法
var names = ['武沛齐', '肖峰', '于超']
names[0]                        // 索引
names.push(ele)                 // 尾部追加元素
var ele = names.obj.pop()       // 尾部移除一个元素
names.unshift(ele)              // 头部插入元素
var ele = obj.shift()           // 头部移除一个元素
names.splice(index,0,ele)       // 在指定索引位置插入元素    //非常好用！！！！！！！！
names.splice(index,1,ele)       // 指定索引位置替换元素      //非常好用！！！！！！！！   可以用于删除某个值
names.splice(index,1)           // 指定位置删除元素
names.slice(start,end)          // 切片
names.reverse()                 // 原数组反转
names.join(sep)                 // 将数组元素连接起来以构建一个字符串
names.concat(val,..)            // 连接数组
names.sort()                    // 对原数组进行排序

对于join：
python：
	a=["a","s"]
	"_".join(a)
JS:
	a=["a","s"];
	a.join("_");

字典与json 序列化

//json->string
var info = {name:'alex',age:19,girls:['钢弹','铁锤']}
var infoStr = JSON.stringify(info)

结果："{“name”:“alex”,“age”:19,“girls”:[“钢弹”,“铁锤”]}"

//string->json
var infoStr = '{"name":"alex","age":19,"girls":["钢弹","铁锤"]}'
var info = JSON.parse(infoStr)

结果：“name”:“alex”,“age”:19,“girls”:[“钢弹”,“铁锤”]

eval

相当于eval+exec
eval("alert(123)")

时间处理

d=new Date();
d.getHours();
d.getFullYear();
d.getUTCHours();
d.setMinutes(15);  //设置分钟是15分钟

语句

条件
var age = 18;
if(age <18){
}else if(age>=18 and 1 == 1){
}else if(age>=30){
}else{
}

var num = 18;
switch(num){
    case 10:
        console.log('未成年');
        break;
    case 18:
        console.log('成年');
        break;
    default:
        console.log('太大了');
}
循环
var names = ['武沛齐', '肖峰', '于超']
for(var index in names){
    console.log(index, names[index])
}

var names = ['武沛齐', '肖峰', '于超']
for(var i=0;i<names.lenght;i++){
    console.log(i, names[i])
}

var dic ={"k1":112,"k2":222};
for(var i in dic)
{
    console.log(dic[i]);
}
异常处理
try {
    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
    var name = ''
}
catch (e) {
    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}

//*********OR********//
throw new Error("错误！");

函数

  1. 一般函数

    function func(arg){
    return arg + 1;
}

  2. 匿名函数

    setInterval(function(){alert("123456789");},1000);

  3. 自执行函数

    (function(arg){alert(arg);})(123);

    自执行函数可以封装

JS没有块级作用域；是以函数为作用域；有作用域链； 作用域链在执行之前已经创建

制作滚动横幅

<body>
    <div id="i1" style="display: inline-block;background-color: green;color: white">欢迎领导莅临指导</div>
    <script>
        setInterval("f1()",1000)  //每一秒中执行一次f1函数
        function f1() {
            //获取某一标签
            var tag=document.getElementById('i1');
            //获取标签内容
            var text =tag.innerText;
            var a=text.charAt(0);
            var sub=text.substring(1,text.length);
            var new_str=sub+a;
            tag.innerText=new_str;
        }
    </script>
</body>

制作动态提示输入框

<body>
<input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur()">
<script>
    function Focus(){
        var tag = document.getElementById("i1");
        if(tag.value=="请输入关键字"){
            tag.value="";
        }
    }
    function Blur() {
        var tag = document.getElementById("i1");
        var tagvalue = tag.value;
        if(tagvalue.trim().length==0){
            tag.value="请输入关键字";
        }
    }
</script>
</body>

制作模态对话框

<head>
    <meta charset="UTF-8">
    <title>对话框</title>
    <style>
        .hide{
            display: none !important;
        }
        .modal{
            width:400px;
            height: 300px;
            background-color: aquamarine;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -150px;
            z-index: 10;   /*优先级*/
        }
        .shadow{
            position:fixed;
            background-color: black;
            top:0;
            bottom: 0;
            right: 0;
            left: 0;
            opacity: 0.6;    /*透明度*/
            z-index: 8;
        }
    </style>
</head>
<body>
    <div><input type="button" value="添加" onclick="showmodal()"></div>
    <div id="shade" class="shadow hide"></div>
    <div id="modal" class="modal hide">对话框 <br>
        <input />
        <input />
        <input />
        <input />
        <a href="javascript:void(0)" onclick="hidemodal();">返回</a>
    </div>

<script>
    function showmodal() {
        var t1 =document.getElementById('shade');
        var t2 =document.getElementById('modal');
        t1.classList.remove("hide");
        t2.classList.remove("hide");
    }
    function hidemodal() {
        var t1 =document.getElementById('shade');
        var t2 =document.getElementById('modal');
        t1.classList.add("hide");
        t2.classList.add("hide");
    }
</script>
</body>

DOM

查找

直接查找

document.getElementById(arg)             // 根据ID获取一个标签对象
document.getElementsByClassName(arg)     // 根据class属性获取标签对象集合
document.getElementsByName(arg)       // 根据name属性值获取标签对象集合
document.getElementsByTagName(arg)       // 根据标签名获取标签对象集合

间接查找

var tag = document.getElementById(arg);
tag.parentElement           // 找当前标签对象的父标签对象
tag.children                // 找当前标签对象的所有子标签对象
tag.firstElementChild       // 找当前标签对象的第一个子标签对象
tag.lastElementChild        // 找当前标签对象最后一个子标签对象
tag.nextElementtSibling     // 找当前标签对象下一个兄弟标签对象
tag.previousElementSibling  // 找当前标签对象上一个兄弟标签对象

操作

var tag = document.getElementById(arg);
var text = tag.innerText(tag);
value
innerHtml
class:
    className
    classList.add/.remove
样式：
tag=.....
tag.style.color = "red";
锃光瓦亮的枕小路
关注
专栏目录
html中splice向数组添加元素,splice()数组元素的插入删除与替换
weixin_29410963的博客
06-28 2471
面试的时候如果主考官让你使用JavaScript来实现对数组元素进行插入、删除、替换操作。如果不知道Array.prototype.splice的使用的方法那很有可能就要被扣分了。使用javascript数组类型内置的splice方法仅需一行代码即可轻松实现对数组元素进行插入、删除、替换操作。方法名：Array.prototype.splice(index,count[,elm1,elm2...n...
前端知识点整理
老余的博客
10-27 1512
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。参考链接：BOM主要对象属性方法总结。
html函数splice,前端知识总结
weixin_42417004的博客
06-29 958
一、CSS面试篇1、盒子模型css中的盒子模型包括IE盒子模型和标准的W3C盒子模型。其盒子模型还是要归宗于box-sizing的属性,盒子模型对应的分被为border-box,content-box。所谓的标准盒子模型(border-box):width = 左右border+左右padding+contentwidth，而我们的IE盒子模型(border-box): width = conte...
html中splice向数组添加元素,JavaScript splice 方法：插入、删除或替换数组的元素...
weixin_39898248的博客
06-28 342
JavaScript splice 方法splice 方法用于插入、删除或替换数组的元素。语法如下：array_object.splice(start, num, element1, element1, ...)参数说明:参数说明array_object要操作的数组(对象)start必需。开始添加/删除元素的下标数字。num可选。规定应该删除多少元素，数字。可以是 "0"，如果省略则删除从 sta...
html函数splice,js splice方法怎么用？
weixin_39908616的博客
06-29 441
js splice()方法splice() 方法用于添加或删除数组中的元素，然后返回被删除的元素。注意：这种方法会改变原始数组。语法：arrayObject.splice(index,howmany,item1,.....,itemX)参数：index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。howmany 必需。要删除的项目数量。如果设置为 0，则不会删...
html中splice向数组添加元素,js中splice()的强大(删除，插入或替换数组的元素)
weixin_30695203的博客
06-28 958
1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数)2.插入-向数组指定位置插入任意项元素。三个参数,第一个参数(其实位置),第二个参数(0),第三个参数(插入的项)3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数。第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项)代码：var lang = ["php"...
Java学习阶段的前端知识整理
12-19
在Java学习过程中，掌握前端知识是非常重要的，因为这有助于理解Web应用的整体架构。前端开发主要涉及HTML、CSS和JavaScript三个核心部分。以下是对这些基础知识的详细解析： **HTML（Hyper Text Markup Language）...
前端学习资源整理
12-14
这个名为"前端学习资源整理"的压缩包文件显然集合了多种前端技术的学习资料，旨在帮助初学者或有经验的开发者巩固和提升他们的技能。以下是对这些技术的详细介绍： 1. **JavaScript基础知识**：JavaScript是一种...
整理综合所学习的前端知识网络.zip
11-02
这个名为"整理综合所学习的前端知识网络.zip"的压缩包文件，很可能是对前端开发中的各种概念、技术和工具的一个系统性整理。以下是对其中可能包含的内容进行的详细解读： 首先，前端开发是构建Web应用程序的客户端...
前端知识点总结前端知识点总结
最新发布
08-09
在前端开发中，掌握各种知识点是至关重要的。...总之，前端开发涉及的知识点广泛且深入，持续学习和实践是成为优秀前端工程师的关键。熟悉这些核心概念和技术，能帮助我们更好地构建功能丰富、性能优良的Web应用。
html函数splice,JS array splice()
weixin_34401008的博客
06-29 231
splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。var months = ['Jan', 'March', 'April', 'June'];months.splice(1, 0, 'Feb');// inserts at index 1console.log(months);// expected output: Ar...
splice()的用法
热门推荐
anshuangxin6666的博客
12-07 3万+
1、删除功能，第一个参数为第一项位置，第二个参数为要删除几个。 array.splice(index,num)，返回值为删除内容，array为结果值。 eg： ? 1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE html>
JS的splice
思维小刀
06-06 1766
用来替换删除数组元素的 // 添加 // 为0时不删除项目直接添加数组项，不为0时会删除指定位置指定个数的项目然后再添加新项目 var spliceArr0 = ["aaa","bbb"]; var spliceArr1 = spliceArr0.splice(1,0,"xx"); 结果：spliceArr0: [aaa,xx,bbb]; spliceArr1: [] // 删除数组...
使用js的splice（）从数组中随机抽出几个元素
weixin_30861797的博客
03-24 366
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。 注释：该方法会改变原始数组。 语法 arrayObject.splice(index,howmany,item1,.....,itemX) 参数描述 index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 howmany 必需。要删除的项目数量。如果设置为 0，...
js中 splice() 方法
爱的天空的博客
04-25 1万+
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。 语法： arrayObject.splice(index,howmany,item1,.....,itemX) 参数 描述 index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 i...
js splice()方法
x386277405的专栏
12-01 3450
splice()方法有3中方法： 1.删除:可以删除任意数量的项，只要指定两个参数：要删除的第一项的位置和删除的项数。例如：splice(0,2)会删除数组中的前两项。 var colors=["red","green","blue","black","white"]; colors.splice(0,2); console.log(colors); // ["blue", "black",
js splice
qq_32563571的博客
09-14 1469
splice(删除数组第几个,删除几个数据) splice(从第几个新增,如果设置为 0，则不会删除项目。,'新增的对象')
JavaScript中splice的用法
Quincy.Coder的博客
12-13 9705
JavaScript中的splice主要用来对JS中的数组进行操作，包括删除，添加，替换等，原来的数组会被改变； 删除： array.splice(index,num)，返回值为删除内容，array为结果值。index为起始项，num为删除元素的的个数。 eg: var array = [‘a’,’b’,’c’,’d’]; var removeArray = array.sp
JavaScript中的 函数splice() 的使用。
andangti0058的博客
10-07 127
　　大二接触JavaScript初期，学习函数中有一道题： 定义一个2个参数的函数。第1个参数是一个数组，第2个参数是需要删除的元素。函数功能，在第1个实参数组中查找第2个实参提供的值，找到则删除该元素（有几个删除几个），如果删除的元素不是最后一个元素，需要把后边的元素依次向前移动。输出删除前后形参数组和实参数组中的所有元素。实参数组【3,78,34,123,4,5,66,34，55】...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值