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

因为之前并没有好好写啦，最多是当个笔记记录下来，自己都看不下去，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）

这是头部
占一整行的盒子
多个小盒子占同一行
2号小盒子

    
    加粗
    倾斜
    删除线
    下划线


这是一个标题
这是一个标题
这是一个标题
这是一个标题
这是一个标题
这是一个倾斜的标题

abaaba
 





    
1
    
2
    
3


    
1
    
2
    
3


    
名词
    
名词的解释
    
名词2
    
名词的解释



百度一下




跳到图片

CSS笔记1

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

    
    
    
    
    
    


    
test 标签选择器
    
test id选择器
    
test class选择器
    
    
交集选择器demo
    

        

            这个不会变色哦
        
        这个会变色哦
    

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{}
*/

    
    
    
    
    


    
title is red
    
title existed
    
title is none
    访问过
    

    没访问过


    
i am a div 
    

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

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

    
    
    
    
    


    

        
span1span2
        
span3span4
    

/* 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编写位置

    
    
    
    
    


    

    点我
    

    这是个超链接

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

    
    
    
    
    
    



    
demo
    
enheng
    点击
    
JavaScript 验证输入
    
请输入 1 到 10 之间的数字：
    
    提交
    

同目录下的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一点点基本用法

    
    
    
    
    



    
点击文本!
    

    
try try
    
    
    按我
    

    输入你的名字: 
    
当你离开输入框后，函数将被触发，将小写字母转为大写字母。
    
    
blacks

React

一个框架

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

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

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

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

redux

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

这是别人的

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

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

HOOK