浏览器由结构层、表示层和行为层构成，分别是HTML、css和JavaScript，HTML实现页面结构的作用，css实现页面的风格和表现风格，如页面的颜色、元素的形状动画等，JavaScript是用来写页面的交互，比如轮播图，表单等与用户进行交互的功能和业务。

HTML5是包含了HTML、css、JavaScript在内的一套技术标准，是w3c它减少了浏览器插件，如flash依赖改善了用户体验，有利于开发者的开发

优：

• 文档类型的定义，放在文档的前面，告诉浏览器的解析器，用什么文档类型的规范来分析文档。

• 严格模式，又称标准模式，是按照w3c分析代码的标准，混合模式是指按照浏览器自己定义的方式分析代码。根据网页区分DTD直接相关。文档中有严格的doctype定义是以严格的模式分析文档 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——如果混合模式doctype不存在或形式不正确会导致文档以混合模式分析，HTML5没有DTD，没有严格的模式和混合模式。盒子模型的宽高分析不同。

• 统一规范，但改变现有规范 css，如果浏览器突然以正确的方式分析现有的，完全遵循标准或多或少会损坏许多旧网站。css，旧网站的显示必然会受到影响。因此，所有浏览器都需要提供两种模式：混合模式服务于旧规则，严格模式服务于标准规则。

例如语义元素：header、footer、article、section、nav

本地存储：localstorage、sectionstorage

图像：canvas

多媒体：video、audio

表单控件：date、time、tel、number、email、search、color等等，新属性：multiple、autofocus、placeholder等等

新的技术：webworker、websocket等等

去除的元素有：big、center、font、basefont，frame、frameset等等

IE：trident内核

firefox：gecko内核

Chrome：基于webkit的blink内核

Safari：webkit内核

Opera：以前是presto内核现在改成谷歌blink内核

web标准是一系列标准的集合，包括html、css、ECMAScript这些标准大多由万维网联盟起草发布。为了解决浏览器版本不同、设备软硬件不同等问题，需要开发多个版本的网页，w3c是万维网联盟，是一个web国际联盟开发

行内元素：span、a、i、img、input、code、br、textarea等

块级：div、p、h1~h6、hr、ol、ul、table等

空元素：br、hr

WebGL是一种3D绘图标准，是的js和OpenGL2.通过添加0的组合OpenGL的js绑定，WebGL可以为h5canvas提供硬件3D没有任何浏览器插件支持加速渲染

• cookies用于浏览器端存储数据，内存小，有条数限制，一般为4kb，将请求发送到服务器端，用于验证用户身份等操作http协议携带，有时间限制，服务端设置。
• sessionStorage是用于浏览器存储数据，内存比较大，只存储在本地不会发送到服务端，在浏览器窗口被关闭s时数据就会删除。
• localStorage的作用与sessionStorage同样，当浏览器窗口关闭时，数据将保存在硬盘中，不会被删除。只有用户删除缓存和手动删除

语义化更有利SEO，与搜索引擎建立良好的联系，为爬虫获取更有效的信息，方便团队开发和维护，语义代码更可读，让机器和人们理解。

相似之处:两者都是外部引入文件，区别在于link是HTML链接文件的标签，@import导入文件，link没有兼容性，@import只能导入css在载入时，文件link文件同时加载，@import页面加载后，用户体验可能不是很好。

svg基于可缩放矢量图，基于xml用于描述二维矢量图形的图形格式，用标签和属性绘制图形，如

<svg width="100" height="100">     <circle cx="0" cy="0" r="50%" fill="green"> </svg> 

特点是任意缩放，文本独立，文件较小，效果强，浏览器大多支持，IE8下载一个插件Adobe SVG就可以了

accesskey激活元素快捷键、class规定元素一个或多个类名、id规定元素的唯一id、lang规定元素内容的语言、style规定元素的css行内样式、title有关元素的额外信息、translate规定元素内容是否应该翻译

_blank：在新浏览器窗口打开链接
_self：在自身窗口打开链接，默认
_parent：在父级窗口打开链接
_top：在整个窗口打开链接

它是浏览器中一个最重要的模块，它的作用是将一切请求回来的资源转化为可视化的图像，也称渲染引擎。（一开始渲染引擎跟js引擎没有区分很明确，浏览器内核也就分为了js引擎和渲染引擎）

不同的浏览器采用不同的浏览器内核：

IE使用的是trident（IE、360、搜狗等也是这个）

Safari采用的是webkit

Chrome最早采用的是Chromium，后来转为webkit的分支引擎blink

Opera最早采用的是elektra排版引擎，后转为presto渲染引擎，如今采用的是webkit的分支引擎blink

Firefox采用的是gecko

了解较少

• 会产生很多页面，难管理
• 结构迷惑，用户体验不好
• 代码复杂，无法被搜索引擎搜索到，SEO不友好
• 兼容性差，移动设备看不全
• 会增加http请求，导致服务器压力大
• 现在都是用ajax代替iframe

label元素用来定义表单之间的控制关系，当用户点击这个元素时浏览器会自动将焦点转到和该元素相关的表单控件上。

<label for="Name">姓名：</label>
<input id="Name" type="text">

• websocket通讯
• 定时器setInterval+cookie
• 使用localstorage
• html5浏览器的新特性SharedWorker

https://www.jianshu.com/p/5f0e6d8fd36a

div+js点击事件

title是属性，可以用来显示鼠标放在元素上时的元素的信息，h3是标签，b和label都能使字体加粗，但是b是物理元素，label是逻辑元素，但是后者更语义化，对SEO友好。i和em都能使字体变斜体，i是物理元素，em是逻辑元素

<div style="width:100%;height:1px;background-color:black"></div>

src用于替换当前元素，href用于在当前文档与引用的资源之间确立关系，使用src会把指定资源下载到本文档内，并且会停止其他资源的下载和处理，会阻塞渲染。而href是下载资源时不会停止对当前文档的处理

canvas相当于一个画布，本身没有绘制能力，仅仅是图像的容器，通常通过js在上面绘图，可以实现flash完成的动画等功能。svg二维，canvas可以二维也可以三维

WebSocket是h5开始提供的一种浏览器与服务器间进行全双工通信的网络技术，依靠这种技术可以实现客户端与服务端的长连接，双向实时通信。特点是事件驱动，异步使用ws或wss协议的客户端socket能够实现真正意义上的推送功能，缺点是部分浏览器不支持

alt是用于图片无法加载时显示的信息，title是鼠标移到图片时显示的信息，一个是图片不能加载时显示，一个是图片显示成功后才可以显示

表单的组成部分有：表单标签，表单域比如文本框，密码框等等，表单按钮包括reset和submit，主要用途是用于网页的数据采集和向服务器传送数据。

get提交发送的get请求，是从服务端获取数据，发送的get请求信息可以在url的查询字符串中看到，安全性低。post提交发送的是post请求，是向服务端发送数据，在url上看不到数据内容，安全性高。

datalist：表单输入域选项列表，通过与input的list属性来绑定

output：提供不同类型输出，可以显示计算结果

frame、frameset、noframe、applet、big、center、basefont

多媒体API：audio、video的dom操作，比如play()、pause()、onplay()等等

客户端储存API：localStorage和sessionStorage的setItem、getItem、removeItem、clear等

requestAnimationFrame：关键帧动画，代替了setTimeout来实现，不会掉帧

history API：history的back、forward、go等

websocket、worker、file Reader等等

https://www.cnblogs.com/yangpeixian/p/11367193.html

应用程序缓存是 HTML5 的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如 HTML、CSS、图片以及 JavaScript。这个特性可以提高网站性能，它的实现借助于 manifest 文件，与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存

canvas元素用于在网页上绘制2D或3D图形，它可以直接在HTML上进行图形操作，

<canvas width="300px" height="200px"></canvas>

source：用来代替audio和video的src属性定义媒体资源，比如多个格式的时候

canvas：画布API

embed：定义外部可交互的内容或插件如flash等

<video src="../xxx" controls height="450px" width="300px"></video>

<audio src="../xxx"></audio>

<!doctype html>
<meta charset="utf-8">

css盒模型由content、padding、border、margin组成，分为w3c标准盒模型和IE盒模型，w3c标准盒模型的width只包括content，而IE盒模型的width包括border+padding+content，在设置样式的box-sizing中可以设置content-box和border-box，分别对应这两种模型

• 元素选择器：div {}

• 类选择器：.className {}

• id选择器：#idName {}

• 属性选择器：a[href] {}

• 后代选择器：div p {}

• 子代选择器：div>p {}

• 相邻兄弟选择器：div+p {}

• 全兄弟选择器：div~p {}

• 交集选择器：div.one[title=“text”] {}

• 并集选择器：div, .one, [title] {}

优先级：

!important

内联样式

id选择器

类选择器/属性选择器/伪类选择器

元素选择器/伪元素

通配符

继承的样式

• 同类型同级别后面会覆盖前面的
• 内联样式>内部样式>外部样式

计算特殊值：

是从优先级最高开始算，优先级最高的一样就按有多少个

innerHTML和innerText

一个是可以解析标签，一个不能

• 不同浏览器的标签默认的外补丁和内补丁不同
  • CSS里 *{margin:0;padding:0;}
• 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
  • 在float的标签样式控制中加入 display:inline;将其转化为行内属性
• 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
  • 给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
• 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
  • 在display:block;后面加入display:inline;display:table;
• 图片默认有间距
  • 使用float属性为img布局
• 标签最低高度设置min-height不兼容
  • 如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
• 透明度的兼容CSS设置
  • 加上filter:alpha(opacity=0);和opacity:0

display: none|block|inline|inline-block|flex|normal

不显示|块级元素|行内元素|行内块元素|开启弹性布局|默认样式

给div设置一个宽度，margin:0 auto。

position:absolute top:50%,left:50% transform:translate(-50%，-50%)

父元素display: flex justify-content:center align-items:center

浮动元素：

设置当前div的宽度，然后设置margin-left:50%; position:relative; left:-50px;其中的left是自身宽度的一半

position定位：子绝父相

.clearfix:after{ 
        /*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{ 
        
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

---------------------------------- .clear { 
        
    clear: both;
}
<div class="clear"></div>

https://blog.csdn.net/h_qingyi/article/details/81269667

第一种方法:

div.box{ 
        

weight:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置，距离上、左都为50%-->

left:50%;

top:50%;

<!--设置元素的左外边距、上外边距为宽高的负1/2-->

margin-left:-100px;

margin-top:-200px;

}

*兼容性好;缺点:必须知道元素的宽高

-------------

第二种方法：

div.box{ 
        

weight:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置，距离上、左都为50%-->

left:50%;

top:50%;

<!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->

transform:translate(-50%,-50%);

}

*这是css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器

---------------

第三种方法

div.box{ 
        

width:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置，距离上、下、左、右都为0-->

left:0;

right:0;

top:0;

bottom:0;

<!--设置元素的margin样式值为 auto-->

margin:auto;

}

*兼容性较好，缺点:不支持IE7以下的浏览器

---------------

第四种方法

.out { 
        
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    height: 500px;
}
.inn { 
        
    height: 100px;
    width: 100px;
    background-color: red;
}

• display：inline

  不占一行，宽度随元素内容变化，设置height和width属性无效，水平方向的padding和margin设置有效，但是竖直方向设置无效

• display：block

  独占一行，可以设置宽高，即使设置了宽，依然会独占一行，可以设置margin和padding属性

• display：inline-block

  结合了block和inline的特性，不独占一行而且可以设置宽高和margin，padding

优雅降级：一开始构建完整功能，再根据低版本浏览器进行兼容。渐进增强是针对低版本浏览器进行构建页面，保证最基本的功能，然后针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

问题：

• 父元素的高度无法被撑开，父元素因为子级元素浮动引起的内部高度为0的问题，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素会跟随其后
• 如果它不是第一个元素浮动，那么它之前的元素也需要浮动，不然的话会被覆盖掉

解决方法：

使用完后清浮动

清浮动的几种方法：

1. 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

2. 父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

3. 使用after伪元素清除浮动（推荐使用）

   .clear-all::after { 
             
       content: "";
       display: block;
       clear: both;
       height: 0;
       visibility: hidden;
   }
   .clear-all { 
             
       *zoom: 1;
   }
   

4. 使用before和after双伪元素清除浮动

   .clearfix:after,.clearfix:before{ 
             
       content: "";
       display: table;
   }
   .clearfix:after{ 
             
       clear: both;
   }
   .clearfix{ 
             
       *zoom: 1;
   }
    
   <div class="fahter clearfix">
       <div class="big">big</div>
       <div class="small">small</div>
   </div>
   <div class="footer"></div>
   

网页内容：

1.减少http请求: http协议是无状态的应用层协议，意味着每次http请求都要建立通信链路、进行数据传输。

减少http的主要手段是合并css、合并javascript、合并图片。

2.减少DNS查询次数

3.避免页面跳转

4.使用浏览器缓存：缓存AJAX

5.延迟加载：LazyLoad Images。刚加载的时候减少http请求。

6.提前加载

7.减少DOM元素数量

8.根据域名划分内容

9.减少iframe数量

10.避免404

服务器：

1.使用CDN 2.添加Expires或Cache-Control报文头 3.Gzip压缩传输文件

4.配置ETags 5.使用GET AJAX请求 6.避免空的图片src

cookie：

1.减少cookie的大小和传输次数 2.页面内容实用无cookie域名

CSS：

1.将样式表放在head中：网页会在全部加载完成CSS后渲染页面。

2.避免CSS表达式 3.用代替@import 4.避免使用Filters

Javascript：

1.脚本置底 2.使用外部的Javascript和CSS文件 3.精简Javascript和CSS

4.去除重复脚本 5.减少DOM访问 6.使用智能事件处理

7.慎用with 8.减少作用域查找

图片：

1.优化图片 2.使用CSS Sprites 3.不要在HTML中缩放图片

4.使用小且可缓存的favicon.ico

1.浏览器差异

不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异

2.提高编码质量

如果不初始化，整个页面做完会很糟糕，重复的css样式很多

最简单的初始化：*{padding: 0;margin: 0;}（不建议）

浮动元素脱离文档流，不占据空间，浮动元素碰到包含它的边框或者浮动元素的边框停留。

BFC触发条件以及规则

触发条件：

1.float的值不为none

2.overflow的值不为visible

3.display的值为table-cell、tabble-caption和inline-block之一

4.position的值不为static或则releative中的任何一个

规则：

1.浮动的元素会被父级计算高度（父级触发了BFC）

2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）

3.margin不会传递给父级（父级触发了BFC），两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）

巧妙用法：

清除浮动；

非浮动元素盖住浮动元素，可依靠触发BFC来解决

margin合并情况，在其中一个元素父级触发BFC，将不会合并margin

什么是BFC，如何触发BFC BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC的布局规则 一、内部的Box会在垂直方向，一个接一个地放置。 二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置） 三、每个元素的margin box的左边， 与包含块border box的左边相接触 四、BFC的区域不会与float box重叠。 五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 六、计算BFC的高度时，浮动元素也参与计算

哪些元素或属性能触发BFC 根元素(html) float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible

BFC的应用 1、自适应两栏布局 2、清除内部浮动 3、防止margin上下重叠

• 0可以省略单位
• 长度单位包括相对长度单位和绝对长度单位
  • 相对长度单位有：em（相对于该元素或父元素的font-size），rem（相对于根元素的font-size），ex，ch，%
  • 绝对长度单位有：px，cm

标准模式是w3c标准解析执行代码，怪异模式则是使用浏览器自己的方式解析执行代码，区别标准模式和怪异模式是看文档的DTD声明是有没有或者定义规不规范。

外边距折叠：margin-top和margin-botton会折叠成一个，正值以大的边距为准，负值以绝对值大的为准，有正负以相加为准，margin一般用来设置兄弟之间的关系，padding一般用来设置父子之间的关系

解决传递？

​ 1. 给box加一个padding

​ 2. 给box加一个border

​ 3. 触发BFC，盒子格式化：

​ ** overflow: 加一个除了visible的属性*

    * 浮动

display: none;  //不会占据原来的位置
visibility: hidden;  //会占据原来的位置
opacity: 0; //透明度为0，看不见，但是可以操作绑定事件
z-index: -1;  //遮盖
transform: translateX(-100%)  //相对自己左移100%
使用HTML5的新增属性hidden="hidden" //不占据原来的位置

h1,h2,div,body…{margin: 0;padding: 0}

a {text-decoration: none;color: black;}

ul,ol{list-style: none;}等等

(1)、什么是BFC与IFC a、 BFC (Block Formatting Context)即“块级格式化上下文” IFC (Inline Formatting Context)即行内格式化上下文。常规流(也称标准流、普通流)是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用。 b、BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。 C、在普通流中的Box(框)属于一种 formatting context(格式化上下文)，类型可以是block，或者是 inline，但不能同时属于这两者。并且，Block boxes(块框)在block formatting context(块格式化上下文)里格式化，Inline boxes(块内框)则在 Inline Formatting Context(行内格式化上下文)里格式化。 (2)、如何产生BFC 当一个HTML元素满足下面条件的任何一点，都可以产生BlockFormatting Context: a、float的值不为none b、overflow的值不为visible c、display的值为table-cell, table-caption,inline-block中的任何一个 d、position的值不为relative和static CSS3触发BFC方式则可以简单描述为：在元素定位非static，relative的情况下触发，float也是一种定位方式。 (3)、BFC的作用与特点 a、不和浮动元素重叠，清除外部浮动，阻止浮动元素覆盖 如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个重叠的现象。常规流（也称标准流、普通流)是一个文档在被显示时最常见的布局形态，当float不为none时，position为absolute.fixed时元素将脱离标准流。

使用css布局position主要有下面的值：

static：静态的，遵循标准流，使用left、right、top、bottom无效

relative：相对定位，相对于自己，遵循标准流，使用left、right、top、bottom都是参照自身位置进行偏移

absolute：绝对定位，相对于离自己最近的非static的祖先元素进行定位，没有则参照body，脱离标准流

fixed：固定定位，一窗口为参考

center：以定位祖先元素为中心点参考

page：

sticky：relative和fixed的集合

1. js数据类型
   • null、undefined、Boolean、string、number、symbol、object、bigint（Chrome 67）
2. css盒模型
   • content、padding、border、margin
3. css选择器
   1. id选择器、类选择器、标签选择器、属性选择器、子选择器、子代选择器、兄弟选择器、通用选择器、交集并集选择器、伪类选择器、伪元素选择器
   2. 优先级
      • ！important
      • id选择器
      • 类选择器/属性/伪类
      • 标签/伪元素
      • 通用
4. 箭头函数与普通函数的区别
   1. 箭头函数是匿名函数，不能作为构造函数
   2. this指向永远指向上下文，不随call和apply的this改变
   3. 不能使用new关键字
   4. 没有arguments，使用rest参数
5. 跨域及解决方案：access-control-allow-origin： *；jsonp
6. 闭包：函数及函数内部能够访问到的变量
7. typeof返回数据类型：Boolean、object、string、number、function、undefined
8. 判断是否为数组：array.isArray()、array instanceof Array、array.constructor === Array、Object.prototype.toString.call(array) === [‘object Array’]
   1. v-show本质就是通过设置css中的display设置为none，控制隐藏
   2. v-if是动态的向DOM树内添加或者删除DOM元素
9. 字符串的方法：
   1. charAt、charCodeAt、concat、indexof、lastIndexOf、match、replace、slice、split、substr、substring、toLowerCase、toUpperCase、toString
10. 数组方法：
    1. push、pop、shift、unshift、slice、splice、join、find、indexOf、lastIndexOf、concat、split、sort、reverse、map、filter、every、some、reduce、keys