前端知识学习笔记（重构版）

橙子小满

已于 2022-03-22 14:38:15 修改

阅读量1.1k

点赞数

分类专栏：笔记文章标签：前端

于 2022-01-26 16:54:48 首次发布

本文链接：https://blog.csdn.net/permi_yaxileni/article/details/121467716

版权

笔记专栏收录该内容

17 篇文章 1 订阅

订阅专栏

因为之前并没有好好写啦，最多是当个笔记记录下来，自己都看不下去，no heart working write file touch fish ing~

学习课程和笔记都是bilibili上的尚硅谷系列课程~

这边只是一个整理啦，网上有很多教程的，such ms 的官网文档和教程，但我总是觉得官方文档有些晦涩难懂，但他又很权威，所以我会选择主看官方文档，辅助csdn啊 bilibili 菜鸟教程等

强推一个博主——阮一峰我是阮老师舔狗，呲溜！呲溜！

（你已经是一个成熟的程序员了，要学会自己看官方文档哦！）

推荐IDE：VScode

推荐前端插件： Live Server

前端肯定是离不开三件套的

html 定义结构

css 定义表现

javascript 定义行为

学习前端的话，很推荐先学完基本用法和知识点就可以去github上看看别人做好的页面，看看在实际项目中这些组件是如何组合的，才能实现出那么漂亮的效果

html部分类型

文件后缀为.html

首先只需要一个 ! 回车就会出现默认板子了，其中 head组件下的title组件之间内容是web名

会显示在页面内部的是body组件里面

这部分代码基本已经把常用的组件介绍完了（除了from和table）


<header>这是头部</header>
<div>占一整行的盒子</div><!--多用于表示一个区块-->
<span>多个小盒子占同一行</span>
<span>2号小盒子</span>
<p>
    <!-- 这是一个不换行的段落 -->
    <strong>加粗</strong>
    <em>倾斜</em>
    <del>删除线</del>
    <ins>下划线</ins>
</p>
<!-- 这是6级标题大小字号 -->
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6><em>这是一个倾斜的标题</em></h6>
<!-- 这是一个新的段落 -->
<p>abaaba</p> 
<!-- 换行 -->
<br>
<!--
    列表 list
    1.有序列表 
    2.无序列表
    3.定义列表

    无序
    ul建立列表
    li为列表项

    有序
    ol建立列表
    
    定义
    dl 建立列表
    dt表示定义的内同
    dd表示内容的解释说明

    列表可互相嵌套
-->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
<dl>
    <dt>名词</dt>
    <dd>名词的解释</dd>
    <dt>名词2</dt>
    <dd>名词的解释</dd>
</dl>

<!--
    超链接
    可以从一个页面跳转到其他页面
    或者当前页面其他位置 比如给一个控件设置
-->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<!--href为链接地址(自己的页面的话就输入相对地址)， target为弹出方式，如果是_self就是当前窗口打开（默认值) _blank 就是新开一个窗口打开-->

<br>
<a href="#img1">跳到图片</a>
<!--  
    src处也可放链接地址 
    alt 图片无法加载时显示
-->
<img id="img1" loading="lazy" src="images/xyjy.jpg" width="258" height="180" alt="老婆" />
<!-- 
    audio 音频
    video 视频
    默认是用户不可以控制的   controls可以出现暂停开始选项，autoplay可以让视频自动播放
-->
<video src="./source/test.mp4" controls autoplay>test</video>

CSS笔记1

基础选择器语法（当然可以将你这个页面的css放入style组件中，但是我们总归是要干开发的不是么，所以请习惯文档分开的格式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入css配置文件 -->
    <link rel="stylesheet" href="../css/demo1.css">
</head>
<body>
    <p>test 标签选择器</p>
    <p id="iddemo">test id选择器</p>
    <p class="classdemo classdemo2">test class选择器</p>
    <!-- <div>统配选择器demo</div> -->
    <div class="demo1 demo2">交集选择器demo</div>
    <div>
        <h4>
            <span>这个不会变色哦</span>
        </h4>
        <span>这个会变色哦</span>
    </div>
</body>
</html>

demo1.css

/* 
css 基本语法：
    选择器：声明块   
一个组件只会应用第一次匹配上的css格式代码，之后的无效
*/
/* 
标签选择器
p标签的颜色都设置为red 字体大小都是60px 
当然这样选择很蠢，当不是完全没有用处
*/
p{
    color: red;
    font-size: 30px;
}
/*
id选择器
每个组件的id是unique
所以这个只能让一个组件改变格式 
只能说有用
*/
#iddemo{
    color: blue;
}
/*
class选择器(常用) class是可以重名的， 每个组件可以有多个class
*/
.classdemo{
    color: pink;
}
.classdemo2{
    font-size: 50px;
}
/* 
通配选择器 都会选择上
*/
/* {
    color: green;
} */
/* 
交集选择器
条件1条件2条件3
如果有标签选择器的话得放在最前面
*/
.demo1.demo2{
    color: aqua;
}
/* 并集选择器  条件1,条件2 no demo 懒*/
/* 
子元素选择器
父元素>子元素(当然可以多个嵌套啊)
*/
div>span{
    color:orange;
}
/* 
后代选择器
祖先元素 后代元素
*/
div span{
    font-size: 100px;
}
/* 
兄弟选择器
下一个兄弟会改变用+ 下面所有兄弟用~
p+span{}
p~span{}
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/demo2.css">
</head>
<body>
    <div title="red">title is red</div>
    <div title="demo2">title existed</div>
    <div>title is none</div>
    <a href="http://www.baidu.com" target="_blank">访问过</a>
    <br>
    <a href="http://www.google.com" target="_blank">没访问过</a>


    <div id="box1" class="red">i am a div </div>
    <div class="box2"></div>
</body>
</html>

demo2.css

/* 
属性选择器
什么标签含有什么值的属性会被选中
[属性名] 含有该属性名的都会被选中
[属性名=属性值] 该属性值相同的会被选中
[属性名^=属性值] 以属性值为开头
[属性名$=属性值] 以属性值结尾
[属性名*=属性值] 含有该属性值
就是正则呀
*/


div[title=red]{
    color: red;
}
/*伪类部分跳过，问就是懒得写 觉得没用*/

/* 访问过 */
a:visited{
    color: aqua;
}
/* 没访问过 */
a:link{
    color: red;
}
/* visited和link是a专属的 */
/* 鼠标移入 */
a:hover{
    color: orange;
}
/* 鼠标点击 */
a:active{
    color: yellowgreen;
}
/* 
当我们通过不同的选择器选择相同的元素，并且设置不同值时，
通过选择器的优先级决定
内联>id>类和伪类>元素
    #    .     div
如果是多个条件的选择器的话，只看最大的那个
*/
div{
    color: yellow;
}
.red{
    color: red;
    
    /* 颜色也可以用RGB来表示比如红色 rgb(255,0,0) 或者#f00（自动省略 =#ff0000）*/
}


/* 
宽度和高度也可以设置为百分比，这样可以在缩放页面时保持相对大小
*/
.box2{
    background-color: aquamarine;
    width: 200px;
    height: 200px;
}

上述都是基础知识，看的懂会用就好了

接下来是CSS的正片 layout

但是我记录的并不详细，就感觉这些知识很杂，而且很容易理解其实，所以这段建议多看看相关资料

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/layout.css">
</head>
<body>
    <div id="box1">
        <div style="background-color: blue;height: 50px;"><span>span1</span><span>span2</span></div>
        <div style="background-color:red; height: 800px;"><span>span3</span><span>span4</span></div>
    </div>
</body>
</html>

/* file name : layout.css */
/* 
盒子模型
每一个盒子都由以下几个部分组成
内容
内边距
边框
外边距
width 和 height 设置的是内容区大小

visibility用于设置元素的显示状态：
visible 默认值正常显示
hidden 不显示但依然有位置
*/
#box1{
    width: 800px;
    height: 200px;
    background-color: aquamarine;
    /* 边框为border 内边距改为padding即可 外边距为margin*/
    border-width: 10px;
    /* 等同于上下左右均为该数值 分开设置eg：border-left-width */
    border-color: yellow;
    border-style: solid; 
    /*
    style可选值有
    solid 实线
    dotted 点状虚线
    dashed 虚线
    double 双线
    none 默认值  不显示
    */

    margin-top: 100px;
    margin-left: 100px;
    /* 设置滚动条，当子元素超过边界时出现 */
    overflow: auto; 
}

CSS好难我只想抄作业哭了

就这样吧学CSS的事情下次一定

Javascript 笔记

重新介绍 JavaScript（JS 教程） - JavaScript | MDN 这个资料不错

首先这门语言是一门新的编程语言，与我们之前学的java并没有什么关系，语言学多了，发现很多功能都一个吊样的，接下来只会放一些不同的东西

demo——浏览器警告框和控制台输出(浏览器检查console位置)以及javascript编写位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //浏览器弹出一个警告框
        alert("this is my first js code")
        //向body里面写如string
        document.write("这将会呈现在网页主体部分")
        //控制台输出一个内容
        console.log("这将会呈现在控制台")
    </script>
</head>
<body>
    <br>
    <button onclick="alert('讨厌')">点我</button>
    <br>
    <a href="javascript:alert('讨厌，还点我干嘛')">这是个超链接</a>
</body>
</html>

但是在实际开发中我们依然选择这样引入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--外部引入js文件-->
    <script type="text/javascript" src="script.js">
       //内部继续编写命令并不会执行
    </script>
</head>

<body>
    <p id="demo">demo</p>
    <p id="duanluo1">enheng</p>
    <button onclick="test()">点击</button>
    <h1>JavaScript 验证输入</h1>
    <p>请输入 1 到 10 之间的数字：</p>
    <input id="numb">
    <button type="button" onclick="myFunction()">提交</button>
    <!-- <img loading="lazy" id="myimage" onclick="changeimg()" src="/images/pic_bulboff.gif" width="100" height="180"> -->
</body>

</html>

同目录下的script.js文件如下


function test(){
    x=document.getElementById("duanluo1");
    x.innerHTML = "改变~就是好事"+Date();
    document.getElementById("demo").innerHTML = person.fullName();
}
function myFunction() {
    var x, text;
    // 获取 id="numb" 的值
    x = document.getElementById("numb").value;
    // 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "输入错误";
    } else {
        text = "输入正确";
    }
    alert(text);
}
/*
function changeimg()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
*/

标明一些不一样的点

首先javascript的变量类型为var 你可以把他看做是C++的auto

还有const指定常量

后续还有let（和var差不多）

其余基本语法其实和python很像

还有一个就是这里面是没有类和对象的demo的，因为在后续的学习中发现html5支持了class，所以object就没用那么多了

ok在上面这个例子中还有一个很重要的东西DOM document object model

就是javascript是如何联系上这些组件节点的

介绍DOM就得分为

1.拿到节点

document.getElementById(id); //id是唯一的，所以拿到的节点是准确的

document.getElementsByTagName(div);// 会拿到所有的div节点

document.getElementsByClassName(classname);//这里就和css的class选择器规则一毛一样

2.操作节点

(1).更新

node = document.getElementById(id);

node.innerHTML = '新内容';

node.style.color = 'red'

(2).插入

node = document.getElementById(id);

newNode = document.createElement('div')

newNode.innerHTML = '?'修改文本

node.appendChild(newNode); // 默认最后一个

插入到某一个之前的语法

parentElement.insertBefore(newElement, referenceElement);

(3).删除

parentElement.removeChile(node)

demo一点点基本用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //通过id来找html元素
        var x = document.getElementById("p1");
        //通过类名来select html元素
        var red = document.getElementsByClassName("red");
        //通过标签名来select html元素
        var ppp = document.getElementsByTagName('P');
        //当然对象不仅可以是document中的类型，也可以从之前挑选的大类中继续select
        //现在我们来尝试完成一个时间显示器
    </script>
</head>

<body>
    <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
    <p id="p1" class="red"></p>
    <p id="p2">try try</p>
    <script>
        function time_now() {
            x = document.getElementById("p1");
            x.innerHTML = Date();
            x.style.color = "red";
        }
        setInterval("time_now()", 1000);
    </script>
    <script>
        function myFunction() {
            var x = document.getElementById("fname");
            x.value = x.value.toUpperCase();
        }
    </script>
    <button onclick="document.getElementById('p2').style.color='blue'">按我</button>
    <br>
    输入你的名字: <input type="text" id="fname" onchange="myFunction()">
    <p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
    <!--onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。-->
    <p onmouseover="this.innerHTML='red'" onmouseout="this.innerHTML='balck'">blacks</p>
</body>

</html>

React

一个框架

内容太多太杂了，而且很多特性我目前并不会用到，而且我自己的笔记有点乱，我不想再搞了很累耶！！！所以就放点新东西吧！

其实就是一个提供自定义组件的方式啦

哎！内容太多，下次一定记

完结撒花，继第一个粗略学完后，发现了很多不足，于是就二刷，今天完结了redux系列

redux

教程+课件
链接：https://pan.baidu.com/s/1hS746pu37B78glu5u-TaPw
提取码：1dz2

这是别人的

我自己当然也写了，只是有一个优化一直不行，而且我司的文件结构和他推荐的不一样我就用我司的文件结构写demo了

最近有task了，不忙的时候一定来写点笔记放在这里，当然也有可能吧react+redux+hook挪出去，解耦嘛，不然一篇看着太长了

HOOK

橙子小满

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端知识学习笔记（重构版）

前置知识：HTML，CSS<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫