【前端】基础知识

最新推荐文章于 2023-07-05 21:29:09 发布

这里一小白

最新推荐文章于 2023-07-05 21:29:09 发布

阅读量118

点赞数 3

分类专栏：前端文章标签：大前端

本文链接：https://blog.csdn.net/ixiaobaii/article/details/109730893

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

1. H5新标签

举例
- header 头部标签
- nav 导航标签
- section 区域标签
- article 文章标签
- aside 侧边栏标签
- footer 脚部标签
- 媒体标签
  - video 视频标签
  - audio 音频标签
- 语义化标签旨在让标签有自己的含义

2. 内联和块级

行内元素(内联元素) display:inline相邻行内元素不换行
- span 常用内联容器，定义文本内区块
- input 输入框
  - button
  - checkbox(复选框)
  - password
  - radio(单选)
  - submit(提交)
  - reset(重置)
- a href超链接
- img src
- label 为input元素定义标注(标记)
- button
块级元素display:block
- div 常用块级容器
- h1 h2 h3 h4 标题
- table 表格
- ul 定义无序列表与li一起创建无序列表
- ol 定义有序列表与li一起创建有序列表
- p 段落
- H5新增的header、section、aside、footer等
两者区别
- 块级可以设置width、height，可以容纳其他内联或者块
- 内联不可以设置width、height，内联是被内容撑开

3. 了解常用标签

见HTML->内联和块级

CSS

1. 盒模型

由内到外 content内容 -> padding内边距 -> border边框 -> margin外边距
在设置background-color时，有颜色的是content以及padding

2. 3种常用定位的定义

相对定位relative
- relative相对于原位置移动(不脱离文档流)
绝对定位absolute
- 相对于设置了除static定位之外的定位的第一个祖先元素(脱离文档流)，存在在页面上方
固定定位fixed
- 相对于浏览器窗口定位(脱离文档流)，并且不会随着滚动条进行滚动

3. 居中的方法

水平居中
- 行内元素(内联元素)
  - 父元素是块级元素，直接给父元素设置text-align:center;
  - 父元素不是块级元素，则将父元素如下设置display:block;,text-align:center;
- 块级元素
  - 有具体宽度的：将要居中的标签设置margin: 0 auto;
  - 没有具体宽度的，将子元素转为行内元素display: inline[-block]，再给父元素text-align: center;
  - position：先将父元素设置为relative，再设置子元素为absolute，设置子元素left:50%
    - 定宽度：设置子元素margin-left: 元素宽度的一半px;或者transform: translateX(-50%);
    - 不定宽度：设置子元素transform: translateX(-50%);
  - flex
    - 给块级元素的父级元素添加display: flex; justify-content: center;
垂直居中
- 单行的行内元素
  - line-height: 盒子的高
- 多行的行内元素
  - 给父元素设置display: table-cell; vertical-align: middle;
- 块级元素
  - position：先设置父元素为relative，再设置子元素为absolute，设置子元素top: 50%(即让子元素左上角垂直居中)
    - 定高度：设置子元素margin-top: 元素高度的一半px;或者transform: translateY(-50%);
    - 不定高度：设置子元素transform: translateY(-50%);
  - flex：给块级元素的父元素添加display: flex; align-items: center;
水平垂直居中
- 已知高度和宽度的元素
  - 设置父元素为relative，子元素为absolute并且
    - top: 0; right: 0; bottom: 0; left: 0; margin: auto;或
    - left: 50%; top: 50%; margin-left: 该子元素宽度的一半px; margin-top: 该子元素高度的一半px;
- 未知高度和宽度的元素
  - 设置父元素为relative，子元素为absolute并且
    - left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
  - 设置父元素为flex定位：display: flex; justify-content: center; align-items: center;

4. 其他

替换元素与非替换元素
- 所谓替换元素就是根据元素内相关属性的不同，浏览器会有不同的解析展现。

JavaScript

1. 基本数据类型引用类型

基本数据类型 Undefined、Null、Boolean、Number、String
引用类型 Object、Array、RegExp、Date、Function

2. 数组方法

pop()从数组中删除最后一个元素，返回“被弹出”的值

push()方法（在数组结尾处）向数组添加一个新的元素，返回新数组的长度

shift()方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。

unshift() 方法（在开头）向数组添加新元素。

splice()方法

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi"); // 第一个参数表示在第几个位置插入新元素，第二个参数表示删除几个元素
console.log(fruits)

利用forEach打印数组中每个数+1的结果

let arr = [0, 1, 2, 3, 4, 5]
arr.forEach( item => {  // 等价于 arr.forEach(function (item) {
    item = item + 1
    console.log(item) // 输出1,2,3,4,5,6
})

将数组转为字符串的方法

// 法1 join
let arr = [0, 1, 2, 3, 4, 5]
console.log(arr.join('')) // 输出012345

// 法2 toString() 转为数组值的字符串
let arr = [0, 1, 2, 3, 4, 5]
console.log(arr.toString()) // 输出0,1,2,3,4,5

五种遍历方法

// 1、forEach() 用于遍历数组无返回值，会改变原来数组中的值 无返回值，直接改变原来的数组
let arr = [1, 3, 12, 2, 20, -1, 6, 17];
arr.forEach((item, index, array) => {
    array[index] = item * 2;
});
console.log(arr); // [2, 6, 24, 4, 40, -2, 12, 34]

// 2、map() 用于遍历数组，返回处理之后的新数组 会返回被处理之后的新数组
let arr = [1, 3, 12, 2, 20, -1, 6, 17];
let newArr = arr.map((item, index, array) => item * 2);
console.log(arr); // [1, 3, 12, 2, 20, -1, 6, 17]
console.log(newArr); // [2, 6, 24, 4, 40, -2, 12, 34]

// 3、filter() 用于筛选数组中满足条件的元素，返回一个筛选后的新数组 主要用于筛选，返回筛选后的一个新数组
let arr = [1, 3, 12, 2, 20, -1, 6, 17];
let newArr = arr.filter((item, index, array) => item < 5);
console.log(arr); // [1, 3, 12, 2, 20, -1, 6, 17]
console.log(newArr); // [1, 3, 2, -1]

// 4、every() 用于判断数组中的每一项元素是否都满足条件，返回一个布尔值 所有元素都满足条件返回true，只要有一个不满足则返回false
let arr = [1, 3, 12, 2, 20, -1, 6, 17];
let bool = arr.every((item, index, array) => item < 12);
console.log(bool); // false

// 5、some() 用于判断数组中是否存在满足条件的元素，返回一个布尔值 只要有一个满足条件的就返回true，如果所有都不满足则返回false
const arr = [1, 3, 12, 2, 20, -1, 6, 17];
const bool = arr.some((item, index, array) => item < 12);
console.log(bool); // true

3. 字符串方法

将字符串转为数组的方法

var str = 'ab+c+de';
var a = str.split('+'); // [ab, c, de]
var b = str.split(''); //[a, b, +, c, +, d, e]

4. 闭包

正常函数执行完毕后,里面声明的变量被回收处理掉
闭包可以让作用域里的变量在函数执行完之后依旧保持不被回收处理

闭包用途
- 读取函数内部的变量
- 让这些变量的值始终存在内存中

for (var i=0; i<4; i++) {
    setTimeout(function() {
        console.log(i);
    }, 300);
}
//输出4 4 4 4

//闭包解决
for (var i=0; i<4; i++) {
    (function(i) {
        setTimeout(function() {
            console.log(i);
        }, 300);
    })(i); // function外的括号是指创建匿名函数，最后一个分号前的(i)指的是传入参数调用该函数
} // 输出0 1 2 3

5. DOM

一些常用的 HTML DOM 方法：
- getElementById(id) - 获取带有指定 id 的节点（元素）
- getElementsByTagName()通过标签名获取一组元素节点对象例如
  等等
- getElementsByClassName()
- appendChild(node) - 插入新的子节点（元素）
- removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
- innerHTML - 节点（元素）的文本值用于获取元素内部的HTML代码，对于自结束标签来说，这个属性没有意义
- parentNode - 节点（元素）的父节点
- childNodes - 节点（元素）的子节点
- attributes - 节点（元素）的属性节点
- 如果需要读取元素节点属性，直接用元素.属性名
  - 例如：元素.id
  - 注意：class属性不能采用这种方式，读取class属性时需要使用元素.className
DOM增删改查
- document.creatElement( )
  - 可以用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据标签名创建元素节点对象，并将创建好的对象作为返回值返回
    - var li = document.creatElement(“li”) // 创建了一个li元素节点对象
- document.creatTextNode( )
  - 用来创建一个文本节点对象，需要一个文本内容作为参数，将会根据文本内容创建文本节点，并将新的节点返回
    - var gzText = document.creatTextNode(“广州”) // 创建一个广州文本节点
- appendChild（）
  - 向一个父节点添加一个新的子节点
  - 用法：父节点.appendChild(子节点）
    - li.appendChild(gzText); // 创建完成
- insertBefore( )
  - 可以在指定的子节点插入新的子节点
  - 语法：父节点.insertBefore(新节点,旧节点)
- replacechild( )
  - 可以使用指定的子节点替换已有的子节点
  - 语法：父节点.replace(新节点，旧节点）
- removechild( )
  - 删除子节点
  - 语法：父节点.removeChild(要删除的节点)

6. 事件

onclick 鼠标单击
onkeydown 按下键盘某按键时触发
onkeypress 按下键盘某按键时触发
onkeyup 键盘按键被松开时触发
onfocus 某元素获得焦点时触发
onload 页面加载完成时触发

7. 其他

sort对数字进行升序排序

arr = [1,5,1,123,2332,1,3,4]
mySort = (a,b) => { // function mySort(a,b) {
    return a-b
}
console.log(arr.sort(mySort)) // [1, 1, 1, 3, 4, 5, 123, 2332]

事件点击后会alert一个弹窗 js文件

<html>
<head>
<script type="text/javascript">
function display_alert() {
    alert("I am an alert box!!")
}
</script>
</head>
<body>
    <input type="button" onclick="display_alert()" value="Display alert box" />
</body>
</html>

const声明一个数组，push一个数字进来并不会报错，因为a指向的是地址，地址没变，所以不报错
```
const a = [1,2,3]
a.push(2)
console.log(a) // [ 1, 2, 3, 2 ]
```

在Object中删除一个属性

delete Object['属性名']
// or
delete document.getElementById("Id名").属性名

DOM举例

<html>
<head>
<script type="text/javascript">
function getValue() {
    var x=document.getElementById("myHeader")
    console.log(x.innerHTML)
    console.log(document.getElementsByTagName('p').length)
}
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">这是标题</h1>
<p>点击标题，会提示出它的值。</p>
<p>123</p>

</body>
</html>

Node.js

1. 常用模块

require导入
export导出

fs.readFile()

var fs = require("fs");

fs.readFile('input.txt', function (err, data) {
   if (err) {
       return console.error(err);
   }
   console.log("异步读取: " + data.toString());
});

fs.open()

var fs = require("fs");

// 异步打开文件
console.log("准备打开文件！");
fs.open('input.txt', 'r+', function(err, fd) {
   if (err) {
       return console.error(err);
   }
  console.log("文件打开成功！");     
});

fs.writeFile()

var fs = require("fs");

console.log("准备写入文件");
fs.writeFile('input.txt', '我是通 过fs.writeFile 写入文件的内容',  function(err) {
   if (err) {
       return console.error(err);
   }
   console.log("数据写入成功！");
   console.log("--------我是分割线-------------")
   console.log("读取写入的数据！");
   fs.readFile('input.txt', function (err, data) {
      if (err) {
         return console.error(err);
      }
      console.log("异步读取文件数据: " + data.toString());
   });
});

os
- os.type()
- os.cpus()
path 文件路径相关
http 服务器的搭建
- get是完整的
- post是加密的

2. 简单业务逻辑

Vue.js

1. 生命周期

beforeCreate
- el和data并未初始化
created
- 组件未挂载，看不到页面
- 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成试图
beforeMount
- 创建虚拟DOM
mounted
- 真实DOM，渲染数据
beforeUpdate
update
beforeDestroy
destroyed

2. v-if和v-show computed和watch

v-if
- 页面中不存在这个dom元素，以此达到隐藏的效果
- 如果很少用到切换，或者元素可能永远都不会显示出来的话，就使用v-if
v-show
- 无论你的初始条件是什么，元素都会被渲染，就是dom元素始终是存在的
- 如果元素需要进行比较频繁的切换的话，推荐使用v-show
computed
- 是计算属性，依赖其他属性值计算值，并且支持缓存，只有当计算值变化才会返回内容
watch
- 只要数据发生变化就会发生回调
methods
- 用来定义函数，需要手动调用才能执行

3. vue-router

4. 简单业务逻辑

这里一小白

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【前端】基础知识

HTML1. H5新标签举例header 头部标签nav 导航标签section 区域标签article 文章标签aside 侧边栏标签footer 脚部标签媒体标签video 视频标签audio 音频标签语义化标签旨在让标签有自己的含义2. 内联和块级行内元素(内联元素) display:inline相邻行内元素不换行span 常用内联容器，定义文本内区块input 输入框buttoncheckbox(复选框)p
复制链接

扫一扫