前端笔记汇总

目录目录前端基础HTML1.基本标签2.页面结构分析3.高级标签CSS1.基础知识2.美化网页JS1.基础知识2.数据类型详解3.函数4.面向对象编程5.操作BOM对象(重点)6.操作DOM对象(重点）7.操作form表单8. jQuery9.总结前端基础课程听的是b站狂神说：狂神说笔记有些是借鉴：夜里的雨HTML1.基本标签<!DOCTYPE html><html...

JMzz

5723人浏览 · 2022-01-06 12:04:30

JMzz · 2022-01-06 12:04:30 发布

前端基础

课程听的是b站狂神说：狂神说 笔记有些是借鉴：夜里的雨

HTML

1.基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>

</head>
<body>

    


    <!--   换行标签br和p标签有区别，段落每行有一定间距 -->
    <P> 粗体：<strong>hello</strong> </P>
    <p> 斜体: <em>hello</em> </p>


    <!--  水平线标签  -->
    <hr/>

    <!--  特殊符号  -->
    空&nbsp;&nbsp;&nbsp;&nbsp;格
    &gt;大于号   <br/>
    &lt;小于号   <br/>

    &copy;版权符号  <br/>



</body>
</html>

img标签

<!--    src为路径，alt为没找到图片文字替代，title为鼠标悬停文字显示-->
<img src="../resources/image/01.jpg" alt="没找到图片" title="鼠标悬停显示文字">

超链接

<!--target属性为哪个窗口打开默认是在当前窗口打开-->
<a href="https://www.baidu.com" target="_blank">百度</a>

列表

<!--   有序-->
<Ol>
    <li>数学</li>
    <li>语文</li>
    <li>英语</li>
</Ol>

<br/>

<!-- 无序   -->
<ul>
    <li>数学</li>
    <li>语文</li>
    <li>英语</li>
</ul>

<!--  自定义列表  -->
<dl>

    <dt>学科</dt>
    <dd>数学</dd>
    <dd>语文</dd>
    <dd>英语</dd>

    <dt>成绩</dt>
    <dd>99</dd>
    <dd>96</dd>
    <dd>55</dd>
</dl>

表格table

border:加边框

rowspan跨行

colspan跨列

<!--  加边框  -->
 <table border="1px">


     <!--   rowspan跨行    -->
     <tr>
         <td colspan="3">学科及成绩</td>
     </tr>
     <tr>
         <td>java</td>
         <td>python</td>
         <td>c++</td>
     </tr>

     <tr>
         <td>99</td>
         <td>92</td>
         <td>80</td>
     </tr>

</table>

视频和音频

视频：video

src为路径，autoplay为播放控制(进度条暂停下载...),autoplay自动播放打开网页后

音频：audio

src为路径，autoplay为播放控制(进度条暂停下载...),autoplay自动播放打开网页后

2.页面结构分析

在这里插入图片描述

3.高级标签

iframe:内联标签

<iframe src="https://www.baidu.com" width="500px" height="400px"> </iframe>

CSS

1.基础知识

1.1简介

css1.0
css2.0 div + css,html与css分离思想，网页变得简单
css2.1 浮动加定位
css3.0 圆角，阴影，动画，浏览器兼容

练习格式：
在这里插入图片描述

1.2简单示例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/style.css">

</head>
<body>

    <h1>css测试</h1>

</body>
</html>

css

h1{
    color: chartreuse;
}

1.3三种基本选择器（重点)

标签选择器
例：p{ }
类选择器
好处：可以使多个不同标签分类
例：

 <!--html-->
 <p class="wmp">java</p>
 <p>c++</p>
	
 /*css*/
  .wmp{

     color: #a03493;
 }

- id选择器
好处：全局唯一，当只需要对一个标签特效时可以用
例子：#id{ }
不遵循就近原则
id选择器 > class选择器 > 标签选择器

1.4层次选择器

<body>

    <p>p1</p>
    <p>p2</p>
    <p>p3</p>

    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>


    </ul>

</body>

在这里插入图片描述
（1）后代选择器

/* body后面的p标签都选择 */
body p{
    
    color: chartreuse;
}

（2）子选择器

/*儿子一代，注意是>不是-> */
body>p{
    background-color: antiquewhite;
}

（3）相邻兄弟选择器
只有一个相邻的(向下相邻)

用加号 +

（4）通用选择器
选择向下的所有兄弟

用 ~

结构伪类选择器

/*ul标签里面的li标签的第一个和最后一个,也可以用id选择器*/
ul li:first-child{

    background-color: chartreuse;
}

ul li:last-child{
    background-color: aqua;

}

或者

/*选择当前li标签的父级标签的第一个子标签,并且是当前元素才生效*/
li:nth-child(1){

    background-color: #9c65a0;
}

1.5属性选择器（重点)

正则表达式
*= 存在
^= 以什么开头
$= 以什么结尾

/*a标签中有id的*/
a[id]{

    background-color: chartreuse;
}

/*a标签中id = name的*/
a[id=name]{

    background-color: antiquewhite;
}

/*通配，存在，因为class的名字可以有不同的多个，只用包含，不能绝对等于*/
a[class*="links"]{
    
    background-color: #9a74a0;
}

/*选中href标签中以http开头的元素*/
a[href^=http]{
    background-color: antiquewhite;
}

/*选中href标签中以pdf结尾的元素*/
a[href$=pdf]{
    
    background-color: antiquewhite;
}

2.美化网页

2.1 span标签

重点要突出的字，使用span标签套起来,然后用css样式美化

欢迎学习<span id="title1">java</span>

2.2字体样式

p{

    font-family: 楷体;
    font-size: 10px;
    font-weight: bold;
    color: antiquewhite;
}

2.3文本样式

p{

    text-align: center;  /*文本居中*/
    text-indent: 2em;  /*首行缩进2个英文字母*/
    line-height: 400px;
}

在这里插入图片描述

2.4 超链接伪类

a{

    text-decoration: none;  /*去掉下划线*/
    color: black;   /*默认颜色*/
}

a:hover{    /*鼠标浮动到超链接产生变化*/

    color: aqua;
    font-size: 40px;
}

2.5 列表样式练习

list-style: none; li标签前面的黑点去掉
list-style: circle; 空心圆
list-style:decimal ; 有序前面有数字

html代码：

<div id="nav">

    <h3 id="tytle1">主题市场</h3>
    <ul>
        <li><a href="#">女装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">内衣</a></li>
        <li><a href="#">童装玩具</a>&nbsp;&nbsp;<a href="#">箱包</a>&nbsp;&nbsp;<a href="#">配件</a></li>
        <li><a href="#">家电</a>&nbsp;&nbsp;<a href="#">数码</a>&nbsp;&nbsp;<a href="#">手机</a></li>
        <li><a href="#">美妆</a>&nbsp;&nbsp;<a href="#">洗护</a>&nbsp;&nbsp;<a href="#">保健品</a></li>
        <li><a href="#">珠宝</a>&nbsp;&nbsp;<a href="#">眼睛</a>&nbsp;&nbsp;<a href="#">手表</a></li>
        <li><a href="#">运动</a>&nbsp;&nbsp;<a href="#">户外</a>&nbsp;&nbsp;<a href="#">乐器</a></li>
        <li><a href="#">游戏</a>&nbsp;&nbsp;<a href="#">动漫</a>&nbsp;&nbsp;<a href="#">影视</a></li>
    </ul>


</div>

css代码

#nav{

    width: 300px;
    height: 500px;

}

#tytle1{

    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background-color: crimson;
}

/*

 list-style: none;   li标签前面的黑点去掉
 list-style: circle;    空心圆
 list-style:decimal ; 有序前面有数字


 */

ul{

    background-color: aliceblue;
}


ul li{
    height: 30px;
    list-style: none;   /*li标签前面的黑点去掉*/
}

a{

    text-decoration: none;
    color: black;
}

a:hover{

    color: chartreuse;

}

背景图片应用

ul li{
    height: 30px;
    list-style: none;   /*li标签前面的黑点去掉*/
    background-image: url("../image/01.jpg");
    background-repeat: no-repeat;
    background-position: 236px,2px;  /*定位图片位置*/
}

background-image:url("");/默认是全部平铺的/
background-repeat:repeat-x/水平平铺/
background-repeat:repeat-y/垂直平铺/
background-repeat:no-repeat/不平铺/

2.6盒子模型

(1)什么是盒子模型
在这里插入图片描述

margin：外边距
padding：内边距
border：边框

(2)边框border

border：粗细样式颜色
(3)外边距----妙用：居中

margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
/*例1：居中*/
margin:0 auto /*auto表示左右自动*/
/*例2：*/
margin:4px/*表示上、右、下、左都为4px*/
/*例3*/
margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/

盒子的计算方式：
margin+border+padding+内容的大小

(4)圆角边框
border-radius有四个参数（顺时针），左上开始,左下结束
圆圈：圆角=半径

2.7 浮动

使用浮动可以把行内元素变为块内元素
块级元素：独占一行 h1~h6 、p、div、列表…
行内元素：不独占一行 span、a、img、strong
行内元素可以包含在块级元素中，反之则不可以。

(1)display
这也是一种实现行内元素排列的方式，但是我们很多情况用float
行内元素只占一行，改变height和width不起作用，可以在span标签里加display: inline-block;

block：块元素
inline：行内元素
inline-block：是块元素，但是可以内联，在一行

div{

    height: 100px;
    width: 100px;
    border: 1px solid red;

}
span{
    height: 100px;
    width: 100px;

    border: 1px solid red;
}

（2）float
父级边框塌陷
clear：
right：右侧不允许有浮动元素
left：左侧不允许有浮动元素
both：两侧不允许有浮动元素
none：
在这里插入图片描述 解决父级边框塌陷的方法：
方案一：增加父级元素的高度；
方案二：增加一个空的div标签，清除浮动

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

方案三:在父级元素中增加一个overflow：hidden

overflow:hidden/*隐藏*/
overflow：scoll/*滚动*/

方案四：父类添加一个伪类:after

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

小结：

浮动元素增加空div----》简单、代码尽量避免空div
设置父元素的高度-----》简单，元素假设没有了固定的高度，就会超出
overflow----》简单，下拉的一些场景避免使用
父类添加一个伪类:after（推荐）----》写法稍微复杂，但是没有副作用，推荐使用


display：方向不可以控制
float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。

2.8 定位

（1）相对定位
相对定位：positon：relstive；
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留

positon：relstive；
top:-20px;
left:20px;
bottom:-10px;
right:20px;

例子:实现如下
在这里插入图片描述
html

<div id="box">
    <a href="#" class="a1">链接1</a>
    <a href="#" class="a2">链接2</a>
    <a href="#" class="a3">链接3</a>
    <a href="#" class="a4">链接4</a>
    <a href="#" class="a5">链接5</a>
</div>

#box{

    height: 300px;
    width: 300px;
    border: 1px red solid;
    padding: 10px;
}
a{
    width: 100px;
    height: 100px;
    text-decoration: none;
    background: #a05775;
    line-height: 100px;
    text-align: center;
    color: aliceblue;
    display: block;
}

a:hover{

    background: chartreuse;
}

.a2,.a4{

    position: relative;
    left: 200px;
    top:-100px

}

.a5{

    position: relative;
    left: 100px;
    top:-300px

}

(2)绝对定位
定位：基于xxx定位，上下左右~
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
总结：相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

（3）固定定位fixed

div{
		width: 50px;
        height: 50px;
        background: yellow;
        position: fixed;
        right: 0;
        bottom: 0;
}

视野拓展
canvas动画

JS

JavaScript是一门世界上最流行的脚本语言
一个合格的后端人员,必须要精通 JavaScript

1.基础知识

1.1显示hello

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

   <script src="js/wmp.js"></script>
</head>
<body>

</body>
</html>

alert("hello");

在这里插入图片描述

1.2基础语法

定义变量 var a = 10;
条件控制

if(1<2){
    alert("true");
}

1.3调试js代码

console.log()在浏览器控制台打印
在这里插入图片描述
调试器可以调试

1.4数据类型

数值，文本，图形，音频，视频…

NaN   //not a number
Infinity   //最大的数

'abc' 
"abc"

注意（==和 ===)

==  //只要内容一样，不管类型是否一样 例如："1" == 1为真
===   //绝对等于  "1" === 1为假

比较一定要用 ===

NaN === Nan 为false,只能通过isNaN(NaN)

java中数组一定要相同类型，js中可以不同
例：

var arr = [1,2,3,"a",false];
new Array(1,2,3,'a');

数组越界会undefine

对象
在这里插入图片描述

1.5严格检查模式

在js代码开头加上 'user strict'(引号不能少)，局部变量建议用let定义，不用 var

2.数据类型详解

2.1字符串

（1）模板字符串

let name = "wmp";

let msg = `你好呀,${name}`;    //注意：这里是电脑Tab键上面的反单引号

console.log(msg)

（2）字符串不可变

2.2数组

常用的方法slice（截取），push（压入），pop（弹出），shift（压入首部），unshift（弹出首部），concat（拼接）

2.3对象

在这里插入图片描述

（1）使用不存在的对象，不会报错，undefine
（2）可以动态删减属性
在这里插入图片描述

(3)判断属性在不在对象中
在这里插入图片描述

2.4流程控制

if,while,for和java一样，forEach如下

var arr = [1,2,"wmp"];

// 函数
arr.forEach(function (value) {
    console.log(value)

})

2.5map和set

ES6出来的
map
(1)基本使用

var map = new Map([['tom',100],['wmp',0]]);
var value = map.get('wmp');
console.log(value);

（2）新增
在这里插入图片描述
(3)删除

map.delet('lmy');

set
无序不重复

2.6 迭代器

ES6的新特性~

使用iterator来迭代Map和Set

var arr = [1,2,3];
for(let x of arr){

    console.log(x)
}
//map set一样

3.函数

3.1 函数定义

两种定义，方法二是匿名函数

function fun(x) {
    
}

var fun = function (x) {
    
}

调用：fun(10)；
js可以传任意个参数，不会报错
最好提前判断传入参数类型，用

if(typeof x != 'number'){

	throw 'Not a Number'
}

3.2 方法

js中也有const(和c++一样的作用)

定义方法

var person = {

    name:'wmp',
    age:12,
    birth:2000,

    now:function () {

        return this.age + this.birth;
    }


};

内部对象
(1) Date

var now = new Date();

console.log(now.getHours());

注意now.getMonth();为0-11月

（2）JSON对象
在这里插入图片描述

在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示
在这里插入图片描述

4.面向对象编程

4.1 继承

（1）原来的继承

在这里插入图片描述

（2）ES6之后
在这里插入图片描述

5.操作BOM对象(重点)

BOM:浏览器对象模型

5.1 window

代表浏览器窗口

(1)浏览器内外高宽
在这里插入图片描述

5.2 screen

获取屏幕宽高
在这里插入图片描述

5.3 location

获取当前页面URL信息

Location https://www.baidu.com/index.php?tn=monline_3_dg

5.4 document

document代表当前页面

document.title = '大火狐'
"大火狐"

可以获取文档树节点

<div id="app">
	......
</div>

<script>
	val div = document.getElementById('app')
</script>

在这里插入图片描述

6.操作DOM对象(重点）

DOM：文档对象模型
在这里插入图片描述

6.1 获取节点（后用jQuery()）;

<div class="father">
    <h1>标题一</h1>
    <P id="p1">p1</P>
    <p class="p2">p2</p>
</div>

//获取对应css选择器
var h1 = document.getElementsByTagName('h1');  //通过标签拿
var p1 = document.getElementById('p1');  //通过id获取
var p2 = document.getElementsByClassName('p2');   //通过class获取
var father = document.getElementsByClassName('father');

var children = father.children();   //获取父节点的子节点

6.2 更新Dom节点

在这里插入图片描述

6.3删除节点

先获得父节点再删除
在这里插入图片描述
注意，删除多个节点的时刻，children是在时刻变化的，删除节点的时候一定要注意。

6.4插入节点

（1）追加
在这里插入图片描述

7.操作form表单

如果我们获得了一个节点的引用，就可以直接调用value获得对应的用户输入值：

// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'

7.1 表单提交验证

<body>
<P>
    <span>用户名：</span><input type="text" id="username">
</P>
<p>
    <span>密  码：</span><input type="password" id="password">
</P>
<p>

    <!--   绑定事件onclick  被点击进入bbb()函数 -->
    <button type="button" οnclick="bbb()">提交</button>
</p>

<script>
    function bbb() {

    var username=document.getElementById("username").value;  //注意一定要加.value属性
    alert(username);
    }

</script>
</body>

7.2 md5密码加密

在 < head >标签里面加

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

8. jQuery

存在大量的js函数

获取jQuery - 公式：$(selector).action()

公式：$(选择器).** 事件(函数)**

注意开头要引入：

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

具体引入方法可以看下面网站
点击

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<a href="#" id="test">点我</a>

<script>

    $('#test').click(function () {

        alert("hello world");

    })
</script>
</body>
</html>

文档工具站jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

8.1 事件

在这里插入图片描述

获取鼠标位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>

mouse: <span id="mouseMove"></span>
<div id="divMove">
    在这里移动试试：
</div>
<script>

    //$(选择器).text可以修改文本
    //$(选择器).html可以html代码
    $(function(){
        $('#divMove').mousemove(function(e){
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    });

</script>
</body>
</html>

操作DOM

在这里插入图片描述

9.总结

9.1、巩固JS

看jQuery源码
看游戏源码

9.2、巩固HTML

CSS —> 扒网站，全部下载下来，修改对应位置的样式，看效果

9.3.相关文档

jQuery
相关前后端模板和游戏：源码之家

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

以智能致世界 | 操作系统大会2024议程全览

开放原子开发者工作坊

开放原子开源基金会新增捐赠人（2024年9月）

2024年9月，新增以下单位成为开放原子开源基金会及旗下项目捐赠人。

开放原子开发者工作坊

2024开放原子开发者大会议题征集正式开启

2024开放原子开发者大会（以下简称“大会”）将于12月中旬重磅来袭,2024开放原子开发者大会议题征集正式开启!

开放原子开发者工作坊

所有评论(0)

查看更多评论

JMzz

@weixin_45740811

已为社区贡献3条内容