WEB前端学习笔记

最新推荐文章于 2024-04-22 16:45:06 发布

汤姆猫丶

最新推荐文章于 2024-04-22 16:45:06 发布

阅读量443

点赞数 1

分类专栏：前端学习笔记文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_39403545/article/details/104517217

版权

前端学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

[HTML学习笔记]

什么是 HTML5

HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。

HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用。我们甚至可以结合 Canvas 开发网页版游戏。

HTML5的广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器的呈现技术得到了飞跃发展和广泛支持，它包括：HTML5、CSS3、Javascript API在内的一套技术组合。

HTML5不等于 HTML next version。HTML5 包含： HTML的升级版、CSS的升级版、JavaScript API的升级版。

总结：HTML5是新一代开发 Web 富客户端应用程序整体解决方案。包括：HTML5，CSS3，Javascript API在内的一套技术组合。

HTML5 新增的内容

viewport 视口

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

解释：声明当前网页在移动端浏览器中展示的相关设置。我们在做移动 web 开发时，就用上面这行代码设置 viewport。

视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示。

需要注意的是：

目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
此属性为移动端页面视口设置，上方代码设置的值，表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）。

属性解释：

width:设置viewport的宽度。
initial-scale：初始化缩放比例。
minimum-scale:最小缩放比例。
maximum-scale:最大缩放比例。
user-scalable:是否允许用户手动缩放（值可以写成yes/no，也可以写成1/0）

PS：如果设置了不允许用户缩放，那么最小缩放和最大缩放就没有意义了。二者是矛盾的。

语义化的标签

语义标签对于我们并不陌生，如<p>表示一个段落、<ul>表示一个无序列表。标签语义化的作用：

能够便于开发者阅读和写出更优雅的代码。
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容。
更好地搜索引擎优化。

总结：HTML的职责是描述一块内容是什么（或其意义），而不是它长什么样子；它的外观应该由CSS来决定。

H5在语义上的改进

在此基础上，HTML5 增加了大量有意义的语义标签，更有利于搜索引擎或辅助设备理解 HTML 页面内容。HTML5会让HTML代码的内容更结构化、标签更语义化。

我们常见的 css+div 布局是：

在html5中，我们可以这样写：

传统的做法中，我们通过增加类名如class="header"、class="footer"，使HTML页面具有语义性，但是不具有通用性。

HTML5 则是通过新增语义标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以使其具有通用性。

参考链接：

语义化、表单、多媒体、dom操作

拖拽、历史、地理位置、全屏

Web存储、应用缓存

[CSS学习笔记]

CSS3介绍

CSS3在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

CSS3的现状

浏览器支持程度不够好，有些需要添加私有前缀
移动端支持优于PC端
不断改进中
应用相对广泛

应对的策略：渐进增强

（1）坚持渐进增强的原则：让低版本浏览器能正常访问页面，高版本的浏览器用户体验更好。【重要】

比如说，同样是一个头像，可能在低版本的浏览器中，头像方的；在高版本的浏览器中，头像是圆的。

（2）考虑用户群体。
（3）遵照产品的方案。

css选择器

     div 标签选择器

     .box 类名选择器

     #box　id选择器

     div p 后代选择器

     div.box 交集选择器

     div,p,span 并集选择器

     div>p 子代选择器

     * : 通配符

     div+p: 选中div后面相邻的第一个p

     div~p: 选中的div后面所有的p

CSS3属性选择器

属性选择器的标志性符号是 []。

匹配含义：

^：开头  $：结尾  *：包含

格式：

E[title] 选中页面的E元素，并且E存在 title 属性即可。
E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc。
E[attr~=val] 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。
E[attr|=val] 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。
E[title^="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。
E[title$="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。
E[title*="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。

静态伪类和动态伪类

（1）静态伪类：只能用于超链接的样式。如下：

:link 超链接点击之前
:visited 链接被访问过之后

PS：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

CSS的继承性和层叠性

参考链接

CSS的盒子模型

参考链接

CSS层叠性：权重计算的问题大总结（非常重要）

上面这个图非常重要，我们针对这个图做一个文字描述：

选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。

标准文档流的特性

空白折叠现象
高矮不齐，底边对齐
自动换行，一行写不满换行写

浮动的特性

浮动的元素脱标
浮动的元素互相贴靠
浮动的元素有“字围”效果
自动收缩为内容的宽度

浮动布局优点

这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等。

浮动布局缺点

最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

清除浮动的方法

给浮动元素的祖先元素加高度（有高度的盒子才能关住浮动）
使用clear:both;
隔墙法，在这两个div中间用一个新的div隔开
使用overflow:hidden;

CSS 效果

我们可以利用 CSS 实现各种效果，常见的效果属性有：

box-shadow：盒子的阴影
text-shadow：文本的阴影
border-radius
background
clip-path

如何让一个块级元素水平垂直居中

方式一：绝对定位 + margin（需要指定子元素的宽高，不推荐）
方式二：绝对定位 + translate（无需指定子元素的宽高，推荐）
方式三：flex 布局 + justify-content + align-items（待改进）
方式四： flex 布局 + margin: auto（推荐）

BFC是什么

MDN 对 BFC 的描述：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

形成BFC的条件

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible

BFC的特性

BFC 内部的子元素，在垂直方向，边距会发生重叠。
BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。
BFC区域不与旁边的float box区域重叠。（可以用来清除浮动带来的影响）。
计算BFC的高度时，浮动的子元素也参与计算。

BFC的作用

1 清除浮动

2 解决margin穿透和margin折叠

3 解决margin穿透：父元素形成BFC，父元素加border，父元素加padding

4 解决margin折叠：使两个元素不在同一个BFC里

[JS学习笔记]

JS动画三大家族和一个事件对象

三大家族：offset/scroll/client。也叫三大系列。
事件对象/event（事件被触动时，鼠标和键盘的状态）（通过属性控制）。

三大家族 offset/scroll/client 的区别

区别1：宽高

offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 内容宽度（不包含border）
scrollHeight = 内容高度（不包含border）
clientWidth = width + padding
clientHeight = height + padding

区别2：上左

offsetTop/offsetLeft：

调用者：任意元素。(盒子为主)
作用：距离父系盒子中带有定位的距离。

scrollTop/scrollLeft：

调用者：document.body.scrollTop（window调用）(盒子也可以调用，但必须有滚动条)
作用：浏览器无法显示的部分（被卷去的部分）。

clientY/clientX：

调用者：event
作用：鼠标距离浏览器可视区域的距离（左、上）。

原型规则

原型规则是学习原型链的基础。原型规则有五条，下面来讲解。

规则1

所有的引用类型（数组、对象、函数），都具有对象特性，都可以自由扩展属性。null除外。

规则2

所有的引用类型（数组、对象、函数），都有一个_proto_属性，属性值是一个普通的对象。_proto_的含义是隐式原型。

规则三

所有的函数（不包括数组、对象），都有一个prototype属性，属性值是一个普通的对象。prototype的含义是显式原型。（实例没有这个属性）

规则四

所有的引用类型（数组、对象、函数），_proto_属性指向它的构造函数的prototype值。

规则五

当试图获取一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的_proto_中寻找（即它的构造函数的prototype）。

描述 new 一个对象的过程

（1）创建一个新对象

（2）this 指向这个新对象

（3）执行代码（对this 赋值）

（4）返回this

闭包

闭包就是能够读取其他函数内部数据（变量/函数）的函数。

只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。

产生闭包的条件

1.函数嵌套
2.内部函数引用了外部函数的数据(变量/函数)。

常见的闭包

1.将一个函数作为另一个函数的返回值
2.将函数作为实参传递给另一个函数调用

闭包的作用

作用1. 使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)
作用2. 让函数外部可以操作(读写)到函数内部的数据(变量/函数)

闭包的生命周期

产生: 嵌套内部函数fn2被声明时就产生了(不是在调用)
死亡: 嵌套的内部函数成为垃圾对象时。（比如f = null，就可以让f成为垃圾对象。意思是，此时f不再引用闭包这个对象了）

闭包的应用：定义具有特定功能的js模块

将所有的数据和功能都封装在一个函数内部(私有的)，只向外暴露一个包含n个方法的对象或函数。
模块的使用者, 只需要通过模块暴露的对象调用方法来实现对应的功能。

call()和apply()的作用

改变this的指向
实现继承。Father.call(this)

bind()

都能改变this的指向
call()/apply()是立即调用函数
bind()是将函数返回，因此后面还需要加()才能调用。

this的指向

解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象。

根据函数的调用方式的不同，this会指向不同的对象：【重要】

1.以函数的形式调用时，this永远都是window。比如fun();相当于window.fun();
2.以方法的形式调用时，this是调用方法的那个对象
3.以构造函数的形式调用时，this是新创建的那个对象
4.使用call和apply调用时，this是指定的那个对象

let 和 const 的作用【重要】

let 和 const 的作用如下：

禁止重复声明
支持块级作用域
控制修改

相反，用var声明的变量：可以重复声明、没有块级作用域、不能限制。

什么是Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js使用了一个事件驱动、非阻塞式I/O的模型（ Node.js的特性），使其轻量级又高效。
Node.js 的包管理器 npm 是全球最大的开源库生态系统。
Node.js是 JavaScript 语言在服务器端的运行环境（平台）。

NPM的概念

一层含义是 Node 的开放式模块登记和管理系统，亦可以说是一个生态圈，一个社区。
另一层含义是 Node 默认的模块管理器，是一个命令行下的软件，用来安装和管理 Node 模块。

模块化的好处

避免命名冲突，减少命名空间污染
降低耦合性；更好地分离、按需加载
高复用性：代码方便重用，别人开发的模块直接拿过来就可以使用，不需要重复开发类似的功能。
高可维护性：软件的声明周期中最长的阶段其实并不是开发阶段，而是维护阶段，需求变更比较频繁。使用模块化的开发，方式更容易维护。
部署方便

模块化规范

服务器端规范：

CommonJS规范：是 Node.js 使用的模块化规范。

CommonJS 就是一套约定标准，不是技术。用于约定我们的代码应该是怎样的一种结构。

浏览器端规范：

AMD规范：是 RequireJS 在推广过程中对模块化定义的规范化产出。

- 异步加载模块；

- 依赖前置、提前执行：require([`foo`,`bar`],function(foo,bar){});   //也就是说把所有的包都 require 成功，再继续执行代码。

- define 定义模块：define([`require`,`foo`],function(){return});

CMD规范：是 SeaJS 在推广过程中对模块化定义的规范化产出。淘宝团队开发。

  同步加载模块；

  依赖就近，延迟执行：require(./a) 直接引入。或者Require.async 异步引入。   //依赖就近：执行到这一部分的时候，再去加载对应的文件。

  define 定义模块， export 导出：define(function(require, export, module){});