Html、CSS相关

BOM

location：

Location.assign():跟href一样，可以跳转页面（也称为重定向页面）记录浏览历史，所以可以实现后退功能

location.replace():替换当前页面，因为不记录历史，所以不能后退页面

location.reload():重新加载页面，当对于刷新按钮或者f5 如果参数为true 相当于强制刷新或者Ctrl+5

navigator

    console.log(navigator);
    // 属性
    // appCodeName	返回浏览器的代码名
    console.log(navigator.appCodeName);
    // appName	返回浏览器的名称
    console.log(navigator.appName);
    // appVersion	返回浏览器的平台和版本信息
    console.log(navigator.appVersion);
    // cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
    console.log(navigator.cookieEnabled);
    // platform	返回运行浏览器的操作系统平台
    console.log(navigator.platform);
    // userAgent	返回由客户机发送服务器的user-agent 头部的值
    console.log(navigator.userAgent);

    // 方法
    // javaEnabled()	指定是否在浏览器中启用Java
    console.log(navigator.javaEnabled());

history

History.pushState()：按指定的名称和 URL（如果提供该参数）将数据 push 进会话历史栈，数据被 DOM 进行不透明处理。
接收可以三个参数：状态对象、标题（被忽略）、URL（可选）
state对象：是一个 JavaScript 对象，它与创建的新历史记录条目相关联。每当用户导航到新状态时，popstate 都会触发事件，并且 state 事件的属性包含历史记录条目的状态对象的副本。
状态对象可以是任何可以序列化的对象。因为 Firefox 将状态对象保存到用户的磁盘，因此可以在用户重新启动浏览器后恢复它们，因此我们在状态对象的序列化表示强加了 640k 字符的大小限制。
title：Firefox 目前忽略了这个参数，虽然它可能在将来使用它。可以传入一个 null。
URL：此历史记录条目的 URL 由此参数指定。请注意，浏览器在调用后不会尝试加载此 URL，但可能会稍后尝试加载 URL，例如在用户重新启动浏览器之后。新 URL 不一定是绝对的；如果是相对的，则相当于当前 URL 进行解析。新 URL 必须与当前 URL 的源相同；否则，pushState() 将抛出异常。此参数可选，如果未指定，则将其设置为文档当前的 URL。

History.replaceState()：按指定的数据，名称和 URL（如果提供该参数），更新历史栈上最新的入口。这个数据被 DOM 进行了不透明处理。

图片懒加载

**原理：**一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。

思路和实现：

1.加载loading图片（html部分就实现）
2.判断哪些图片要加载：进入可视区的图片

el.getBoundingClientRect() 获取到当前元素与视口的位置关系**getBoundingClientRect 会触发浏览器的回流**

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括 padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括 padding、内容区的高度，不含边框，返回数值不带单位

3.隐形加载图片
4.替换真图片

//DOMContentLoaded比load快，它仅仅是把dom树加载好了
document.addEventListener("DOMContentLoaded", function() {
		    let lazyImages = [...document.querySelectorAll('img')];
            //Intersection Observer API提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。
		    if ("IntersectionObserver" in window) {
		        // 创建一个观察函数，以便待会调用   
		        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
		            entries.forEach(function(entry) {
		            if (entry.isIntersecting) {
		               let lazyImage = entry.target;
		               lazyImage.src = lazyImage.dataset.src;   // 替换 src URL
		               lazyImageObserver.unobserve(lazyImage);  // 解除观察
		            }
		            });
		        });
		        // 对所有需要懒加载的图片进行 “暗中观察”
		        lazyImageObserver.observe(lazyImages);
		       
		     }else{
		           alert('您的浏览器不支持 IntersectionObserver');
		     }
		});

onclick和addEventListener

1. on事件会被后面的on的事件覆盖，而addEventListener可以为同一对象设置多个事件不会覆盖，两个传函数都是用匿名函数function(){}，或者直接传函数名
2. addEventListener(type,listener[,useCapture])，第一个参数是指事件类型’click’、 'mouseUp’不写on，listener是事件处理函数，是函数名不是调用函数所以不写括号，最后一个参数true则处于捕获阶段（document->html->body），false则处于冒泡阶段（son->father->body->html）。

**注意：**有的事件没有冒泡，如onmouseover等

阻止事件冒泡:在son那里加e.stopPropagation();那么father……都不会触发

事件对象

div.onclick=function(event) {
    console.log(event);//event不是形参！若为函数，应该是function 函数名（形参）
}

//1. event就是一个事件对象写到我们侦听函数的小括号里面当形参来看
//2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
//3. 事件对象是我们事件的一系列相关数据的集合跟事件相关的比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息比如判断用户按下了那个键

eg：当点击了屏幕一下，就会返回此时的操作是click、绑定的是div、鼠标点击的坐标是……可以不写成event，写成其他的，如e也没问题.e.target返回的是触发事件的对象，this是绑定事件的对象=currentTarget的值，e.type返回事件类型（不带on），阻止默认行为：e.preventDefault();(比如对于链接，暂时不让它点击了就跳转)。

当button写在了div中，给div绑定了监听事件，那么当点击button之后，除法了事件this=currentTarget=div，而target=button，button自己没有事件监听器处理，冒泡到div那儿。

canvas

h5出的，提供绘图api给客户端js使他能够动态的把内容绘制到一块画布上

1. 环境：getContext，获取2D环境
2. 默认透明，设置宽高后没有内容不会显示
3. 根据坐标系定位，画边框，填充颜色

html和xhtml

都是超文本标记语言，XHTML基于可扩展标记语言XML。HTML基于标准通用标记语言SGML。XML 指可扩展标记语言，XML 被设计用来传输和存储数据，标签 没有被预定义，需要自行定义标签，被设计为具有自我描述性，是W3C的推荐标准。

标签

id属性

任何一个节点都有id属性，不能重复。后期要通过javascript对html进行增删改，id则提供了方便。通过id在javascript中获取到该节点，然后对其进行操作，最终产生网页的动态效果。

iframe

应用：

1. 加载其他域的网页，可以跨域请求资源
2. 实现异步请求发送ajax
3. 加载广告
4. 提交表单：避免整个页面的刷新

缺点：

1. 阻塞页面加载，影响网页加载速度
2. 加载新页面，增加css与js文件的请求，即额外增加了HTTP请求，增加了服务器负担。
3. 不利于SEO，搜索引擎的爬虫无法解读iframe的页面。
4. 兼容性差

行内元素和块级元素

行内元素、块级元素和行内块级元素三种

行内元素：

• 元素在一行，不能指定宽高(line-height)
• 外边距对于水平方向有效，垂直方向无效。
• 内边距对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响。

块元素

• 封闭后自动换行。
• 默认宽度为100%。

行内块元素

• 可以指定宽度和高度。
• 元素排在一行，但是会有空白缝隙。

表格：

rowspan标签是两行的两个小单元合并，设置大小，colspan

表头用<thead>，主体部分用<tbody>包围，尾部用<tfoot>包围

超链接

href可以设置为id，target属性表示链接页面的内容在那里显示

• _blank:新窗口
• self:当前窗口
• _parent:当前窗口的父窗口
• top:当前窗口的顶级窗口

表单

label标签绑定一个表单元素：

绑定时label中的for属性，对应input标签中的id属性；id属性在页面中每个节点都不一样；一定要写name属性，不然就变成了两个单选框，可同时选。（name属性用于对提交到服务器后的表单数据进行标识或者在客户端通过JavaScript引用表单数据。

注释：只有设置了name属性的表单元素才能在提交表单时传递它们的值。）

select

size属性可以设置下拉列表一次最多可以显示的个数，mutiple属性可以实现多选

html5新特性

前端路由history

新增了两个API：history.pushState 和 history.replaceState

两个 API 都接收三个参数：

**1.状态对象（state object）：**一个 javascript对象，与用 pushstate()方法创建的新历史记录条目关联。监听window的onpopstate事件，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。

**2.标题（title）：**FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。

**3.地址（URL）：**新的历史记录条目的地址。浏览器不会再调用 pushState() 方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。新的URL不一定是绝对路径；如果是相对路径，它将以当前的URL为基准；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。

相同之处是两个API都会操作浏览器的历史记录，不会实际跳转。

不同之处在于pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录。

属性scrollRestoration定义恢复滚动的逻辑，值是auto会恢复页面上次滚动的位置，muutual则不会。

后端配置：要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

语义化标签

优点：
1. HTML结构清晰
2. 代码可读性较好
3. 无障碍阅读
4. 搜索引擎可以根据标签的语言确定上下文和权重问题
5. 移动设备能够更完美的展现网页（对css支持较弱的设备）
6. 便于团队维护和开发

header、footer、nav、section、article

• 代码具有可读性
• 代码维护更方便
• seo：有利于浏览器理解页面内容

多媒体标签

video、audio、source、embed、track

表单

input的type新增

email、url、date、time、monttel、number、color、search

表单属性

required、placeholder、autofocus、autocomplete、multiple

css

bgcolor和backgroud标签一个是背景色，一个是背景图片

实现两栏布局

1. 父盒子设置flex，孩子可以不设置高，左孩子设置宽度或flex:0 0 width，右孩子flex：1
2. 父盒子设置宽、高，左边的盒子左浮动，右边的盒子设置margin-left为做盒子的宽度，他俩都需要设置高度！或者右边的盒子用bfc即overflow：hidden
3. 利用position，利用left和margin

flex：1

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。(可以定义某个盒子是3，那么其他默认是1了)

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

实现三栏布局

1. position左右都设置宽度，和top、left等值，mid设置margin
2. 父盒子设置宽高，左右盒子设置float，中间的盒子设置margin
3. flex

优先级

!important>内联>ID选择器>伪类=属性选择器=类选择器>标签选择器=伪元素选择器

css预处理器

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题。

变量

你可以在CSS预处理中声明变量，并在整个样式单中使用，支持任何类型的变量，例如：颜色、数值（是否包含单位）、文本。然后你可以任意的调取和使用该变量。

Sass的变量名由$开始，less的由@开始。

Stylus对变量名没有任何限定，你可以是$开始，也可以是任意字符，而且与变量值之间可以用冒号、空格隔开。

mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
body
  color mainColor
  border 1px $borderStyle mainColor
  max-width siteWidth

作用域scope

sass中调用变量基本没有局部作用域的概念，所以调用时要仔细

less他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止。

Stylus同less，支持冒泡。

混合(Mixins)

Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。Mixins被当作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。

sass(像函数)

/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){
  border:$borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  @include error();/*直接调用error mixins*/
}
.login-error {
  @include error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}	

less（像class）

/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
  border:@borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  .error();/*直接调用error mixins*/
}

stylus（没有符号）

对比less少了一个.

嵌套

/*css写法*/
ul li{}
/*预处理器*/
ul{
  li{ }
  &:hover{ }
}

继承

/*css写法*/
p,li,a{}
/*sass和stylus预处理器但解析后和之前的差不多，
而less写法不加extend符号，也把样式在每个选择器中重复产生*/
.block{}
p{
@extend .block;
...
}
li{
 @extend .block;
}

运算

颜色函数

lighten($color, 10%); /* 返回的颜色在$color基础上变亮10% */
$color: #0982C1;
h1 {
 background: $color;
 border: 3px solid darken($color, 50%);/*边框颜色在$color的基础上变暗50%*/
} 

导入(import)

@import "file.{type}";

注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突。

条件语句

sass和stylus中使用if/else

less用when，还有一些isNumber，iscolor等的检查函数

for循环

sass和stylus有，less用when来模拟

高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

脱离文档流

将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。

造成的原因：

1. float，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。
2. absolute，相当于父盒子进行定位
3. fixed，脱离文档流，相对于浏览器窗口进行定位。
4. display？

清除浮动

1. 父级盒子添加overflow属性，将其属性值设置为hidden、auto或scroll，或者display：table或者为父元素也添加float 属性来清除浮动。

2. 在浮动的盒子后面加个空的块级标签，并给一个style清除浮动clear:both。

3. 父级添加after伪元素

   /*类名加在标签原本的类名之后，用空格隔开*/
   .clearfix:after{
        content:".";        
        display:block;        
        height:0;        
        clear:both;        
        visibility:hidden;        
   
   }
   /*为了兼容IE6、7*/
   .clearfix{
         zoom:1
   }
   

文字单位

1. px。像素，是应用最为广泛的一种css单位，相对长度单位，相对于不同显示器屏幕的分辨率而言。

2. em。相对长度单位，相对于当前对象内文本的字体尺寸，如果当前文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸而言。 px 和 em 的区别：px是固定的，em是不固定的，em会继承父级元素的字体大小。

3. rem。css3新增单位，多用于响应式布局，作用于非根元素时，相对于根元素字体大小，作用于根元素时，相对于其初始字体大小。 em 和 rem 的区别：em是相对于父级元素而言的，rem是根据 根元素(html)字体大小而言的。

4. vw/vh。视窗宽度/视窗高度， 1vw=视窗宽度的百分之一 1vh=视窗高度的百分之一 。

5. rpx。rpx是微信小程序中为了解决自适应屏幕尺寸而使用的一个单位 1rem = （750/20）rpx = 37.52px

居中

1. 行内元素或行内块元素水平居中给其父元素添加text-align：center

2. 针对块级盒子用固定宽度加外边距自动实现水平居中margin:0 auto

3. 有文本的，垂直居中line-height：height

4. 定位：有绝对定位的盒子需要居中，加了绝对定位的盒子不能通过margin：0 auto水平居中，可以通过以下计算方法实现。

   小算法：left走50%，即父容器宽度的一半；用margin负值，往左边走自己盒子宽度的一半。或者用tansform

5. flex布局，垂直居中align-items：center，水平居中justify-content：center

margin和padding

如果父元素和子元素都有上边距的情况下，父元素会塌陷较大的外边距值（对标准流来讲，只在父子之间存在，两个同级之间不会存在），因为本来他们两个块是贴在一起的。

解决办法：1. 给父级块加个padding（把其和子的隔开）

2. 给父元素定义上边框，可以为父元素添加overflow:hidden

display和visibility、opacity

display：none ，不占据空间，页面重新渲染，引起页面回流与重绘，性能消耗大，不支持transition动画
visibility：hidden 占据空间，不能触发点击事件，只造成本元素的重绘，性能消耗较少，子元素集成了修改属性值就会重新显示其他两个不会
opacity：0 ，占据空间，仍可触发点击事件，只造成本元素的重绘，性能消耗较少

display:none;隐藏相应的元素。元素在文档布局中不再给它分配空间，它的各边会合拢，就当它不存在。css修改自己的css树，还在dom树中，render树上不在了！
visibility:hidden;隐藏相应元素。元素在文档布局中仍保留原来的空间。

position

定位=定位模式+边偏移

边偏移：top、bottom、left和right

相对定位relative

特点：它的移动位置参照它以前的位置；原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）

绝对定位absolute

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。

特点：如果没有父元素或父元素没有定位，则以浏览器为准定位；如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动元素； 绝对定位不再占有原先的位置（脱标）

固定定位fixed

固定定位是元素固定于浏览器可视区的位置。（页面滚动时，其位置不会改变）

特点：以浏览器的可视窗口（浏览器边界）为参照点移动元素。（没有父元素，即使页面滚动，它的位置不会变；不再占有原先的位置。（可看作一种特殊的绝对定位）

animate和transition

​ animation 可以用 name 设置动画的名称，用 duration 设置动画完成的周期，用 timing-function 设置动画的速度曲线，delay 设置动画什么时候开始，iteration-count 设置动画播放的次数，direction 规定下一个周期是否逆向的播放，play-state 动画是否正在进行或者暂停，fill-mode 设置动画停了之后位置什么状态

transition 用 property 去设置过渡效果的属性名称，duration 设置过渡效果的周期，timing-function 规定速度效果的速度曲线，delay 设定过渡效果什么时候开始；

区别：

1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；

2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；

3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；

4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；

5、在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了；

CSS3新特性

1. 属性选择器
2. 结构伪类选择器（根据文档结构来选择）E：first-child E：first-of-type nth-child(n) n的值可以是even|odd，可以是表达式，可以是n，也可以是具体数值
3. 伪元素选择器（利用css创建新的标签，不在html中显示，简化结构）必须有content属性，它们的权重和标签选择器一样，使用场景：iconfont、土豆的mask、清除浮动
4. 盒子模型：通过box-sizing来指定盒模型，默认为content-box，而修改为border-box的话就不会因为padding而撑开盒子了
5. 过渡transition
6. 属性transform（旋转，缩放，倾斜或平移给定元素，这是通过修改CSS视觉格式化模型的坐标空间来实现的。不会影响其他元素的位置。）
7. 3D转换translate3D，透视perspective：npx（要实现3d效果必须加透视）
8. 媒体查询，可以根据不同的屏幕尺寸为页面设置不同的样式

移动端常见布局

流式布局（百分比布局）

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。

max-width最大宽度( max-height最大高度)
min-width最小宽度 ( min-height最小高度)

flex弹性布局

采用flex布局的元素，称为Flex容器，它的所有子元素自动成为容器成员，Flex项目，且所有元素自动在一行上显示。

display:flex;

BFC

BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用，在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。即如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。

形成BFC的条件

1、浮动元素，float 除 none 以外的值；
2、绝对定位元素，position（absolute，fixed）；
3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）

应用

1. 未设置高度的符合里面的子元素浮动，高度塌陷
2. 被浮动元素覆盖了内容
3. 外边距重叠，垂直方向上的mergin会取大值，用bfc解决
4. 自适应布局

实现动画

1. javascript直接实现；一般都会引起页面重绘重排

2. SVG（可伸缩矢量图形）；

3. CSS3 transition；在移动端开发中，直接使用transition动画会让页面变慢甚至卡顿。所以我们通常添加transform:translate3D(0,0,0)或transform:translateZ(0)来开启移动端动画的GPU加速，让动画过程更加流畅。

4. CSS3 animation；@keyframes关键帧

5. Canvas动画；Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况，完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画。

6. requestAnimationFrame；requestAnimationFrame是另一种Web API，原理与setTimeout和setInterval类似，都是通过javascript持续循环的方法调用来触发动画动作。但是requestAnimationFrame是浏览器针对动画专门优化形成的APi，在性能上比另两者要好。

   通常，我们将执行动画的每一步传到requestAnimationFrame中，在每次执行完后进行异步回调来连续触发动画效果。