2021.3.13 今天学的很难受，也挺舒服的，矛盾。。。早一点点上传笔记好了，这两天重点就是看三元大神的博客和复习我的笔记。
1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE内核；
9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；
<source src="html_5.mp4" type="video/mp4">
<source src="html_5.ogv" type="video/ogg">
为同一个文件添加多种文件格式的原因：提供备份支持并解决媒体支持问题（适应浏览器版本，也保证自己的文件有多个备份。）
html5十大新特性的总结：
一、html5新特性之用于绘画的canvas元素
二、html5新特性之更加丰富强大的表单
三、html5新特性之用于媒介的video和audio元素
四、html5新特性之html5地理定位
五、html5新特性之html5拖放
六：html5新特性之html5 Web存储
七、html5新特性之html5应用程序缓存
八、html5新特性之html5 Web Workers
九、html5新特性之html5服务器发送事件
十、html5新特性之html5 WebSocket
<audio> 与</audio> 之间插入的内容是供不支持audio 元素的浏览器显示的
<video>标签中controls属性决定是否向用户显示控件
<datalist>标签可以和input标签配合进行使用，来显示列表
<progress>标签不填写max和value会自动滑动
slideUp()和slideDown都是jQuery函数，slideUp()通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。
1.canvas的确是绘制位图的，svg是绘制矢量图，矢量图放大了不失真，也就是放大了不模糊，而canvas画的放大了要变成撸多了的模式。之所以错是canvas不能动态渲染，说白了就是不能直接动DOM树，画了不能再通过js去修改，只能从源码修改。
2.只有HTML5能干掉flash和silverlight，而不是canvas
超链接的 URL。可能的值：
- 绝对 URL - 指向另一个站点
（比如 href="http://www.example.com/index.htm"） - 相对 URL - 指向站点内的某个文件（href="index.htm"）
- 锚 URL - 指向页面中的锚（href="#top"）
标签可以创建一个下拉菜单:
<select><option>baidu</option></select>
自关闭的斜线(/)对 ：area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr空标签无效，言即不再需要自闭合(/)这个小尾巴了，如果要写上也是可以的。
input是有一个image属性的，用来点击上传用的
HTML5的picture标签用于为不同设备提供图像
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
import和link：
1.从属关系区别 @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别 加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别 @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
5.权重区别 link引入的样式权重大于@import引入的样式。
<dl>、<dt>、<dd> 、<h>这些 标题标签 不推荐嵌套块级元素
dl定义的是列表，table定义的是表单
body标签的两个属性background和bgcolor，其中background只能写url表示背景图像,bgcolor写背景颜色
Html5不支持，Html4.01已废弃
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
内联式：即直接加在标签上的样式 如:<div style="width:100px;"></div>
导入样式：@import url("css/style.css")
嵌入式：即用<style>.classname {width: 100px;}</style>标签括起来写在页面中的样式
外部引用式：即将样式单独放到一个文件夹中，然后用link标签引入页面的形式，如：<link rel="stylesheet" type="text/css" href="Css.css" />
a超链接打开新窗口是打开新窗口 target=“_blank” 具体如下：
有 4 个保留的目标名称用作特殊的文档重定向操作：
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的<a>标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
提示：这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。
target="_new"始终在同一个新窗口（刷新）
target="_blank"始终产生不同的新窗口
箭头函数不能调用Funciton的bind、apply、call方法（Function类具有的方法），没有继承Function类
text-transform: uppercase;大写
声明必须位于 HTML5 文档中的第一行，也就是位于 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
doctype 声明不属于 HTML 标签；tag; 它是一条指令，告诉浏览器编写页面所用的标记的版本。
在所有 HTML 文档中规定 doctype 是非常重要的，这样浏览器就能了解预期的文档类型。
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
正确写法是：<!DOCTYPE html>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
//强制让文档的宽度与设备的宽度保持1:1，
//文档初始化缩放比例是1:1，
//不允许用户点击屏幕放大浏览，
//允许用户缩放到的最大比例，
//尤其要注意的是content里多个属性的设置一定要用逗号+空格来隔开，如果不规范将不会起作用。其他属性有：width;height; initial-scale; minimum-scale; maximum-scale; user-scalable;
<meta name="apple-mobile-web-app-capable" content="yes" />
//iPhone私有标签，它表示：允许全屏模式浏览
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
//iPhone私有标签，它指定的iPhone中safari顶端的状态条的样式
<meta name="format-detection" content="telephone=no; email=no" />
//不识别邮件和不把数字识别为电话号码
getCurrentPosition（）获取用户当前位置放入一个值中保存，
getLocation()地图定位
在js里面添加的属性名使用驼峰法，在css里面使用连接线
<q>定义短的引用 <ins>定义被插入的文本 <menu>定义命令的列表或菜单 html5中不再支持的元素(或者说是不支持使用的): <noframes>,<frameset>,<frame>,<applet>,<acronym>,<basefont>,<dir>,<tt>,<strike>,<big>,<blink>,<s>,<font而在html5中新加的元素是:(用手机写<>太费事，后面的省略了哈) canvas,audio,video,source,embed,track,datalist,keygen,output,article,aside,bdi, command,details,dialog,summary,figure,figcaption,footer,header,mark,meter,nav,progress,ruby,rt,rp,section,time,wbr(这些是按照一定顺序写的)
插入新节点有多种方法：
（reflow加repaint）通过循环方式创建新的li节点，并依次添加到#list中
（先隐藏的话，如果浏览器计算性能太差，插入100次要一段比较长的时间，视图就会出现卡顿影响用户体验，那个列表会消失一段时间，显然在插入的元素较多时不可采用）先将#list节点的display设置为none，通过循环方式创建新的li节点，并依次添加到#list中，最后再将#list节点的display设置为block
（可能存在xss攻击危险，sql注入的危险）取出#list中现有的li节点的html，将它与新增的li节点对应的html代码拼接成字符串，一次性插入到#list中
（最好的一种）
创建Fragment，通过循环方式创建新的li节点，添加到Fragment中，最后再将Fragment添加到#list中
跨文档已经是跨域的一种了。
display:none与visibility:hidden都可以用来隐藏某个元素
display:none在隐藏元素的时候，将其占位空间也去掉；而visibility:hidden只是隐藏了内容而已，其占位空间仍然保留。
HTML5中增加了两种全新的数据存储方式：WebStorage和WebSQLDatabase。 WebStorage可用于临时或永久保存客户端的少量数据，WebSQLDatabase是客户端本地化的一套数据库系统，可以将大量的数据保存在客户端，无须与服务器端进行交互，极大地减轻了服务器端的压力。 WebStorage存储是HTML5为数据存储在客户端提供的一项重要功能，分为两种：sessionStorage(保存会话数据)和loaclStorage(在客户端长期保存数据)。 sessionStorage对象 使用sessionStorage对象在客户端保存的数据时间非常短暂，该数据实质上还是被保存在session对象中。用户在打开浏览器时，可以查看操作过程中要求临时保存的数据，一旦关闭浏览器，所有使用sessionStorage对象保存的数据将全部丢失。 保存数据只需调用setItem()方法，格式：sessionStorage.setItem(key,value)。参数key表示被保存内容的键名，参数value表示被保存的内容。一旦键名设置成功，则不允许修改，不能重复，如果有重复的键名，只能修改对应的键值。 读取被保存的数据，应该调用sessionStorage对象中getItem()方法，格式：sessionStorage.getItem(key)。该方法将返回一个指定键名对应的键值，如果不存在，则返回一个null值。 localStorage对象 长期在客户端保存数据，应该使用localStorage对象，使用该对象可以将数据长期保存在客户端，直至人工清除为止。 保存数据调用对象中的setItem()方法，格式：localStorage.setItem(key,value)。与sessionStorage对象保存数据一样。 读取数据调用对象中的getItem()方法，格式：localStorage.getItem(key)。与sessionStorage对象读取数据一样。 localStorage对象可以将内容长期保存在客户端，即使是重新打开浏览器也不会丢失。如果需要清除localStorage对象保存的内容，应该调用该对象的另一个方法removeItem()，格式：localStorage.removeItem(key)。一旦删除成功，与键名对应的相应数据将全部被删除。
A：a 元素可以没有 href 属性，此时为超链接的一个占位符，则 A错误
B：target 属性可选有：_blank、_self、framename等值
C：rel 属性有多个值时，使用空格 " " 分隔
D：href 属性的可选有：
绝对路径（href = "https://www.baidu.com"）
相对路径（href = "index.html"）
锚（href = "#top"）
href和src的区别：https://blog.csdn.net/lhjuejiang/article/details/80795081
canvas绘制的图形不是dom元素，无法像操作dom一样操作修改。而svg是直接绘制dom元素，可以操作修改
IndexdDB 是 HTML5 的本地存储，把一些数据存储到浏览器（客户端）中，当与网络断开时，可以从浏览器中读取数据，用来做一些离线应用。
Cookie 通过在客户端 ( 浏览器 ) 记录信息确定用户身份，最大为 4 kb 。
url 参数用的是 get 方法，从服务器上获取数据，大小不能大于 2 kb 。
Session 是服务器端使用的一种记录客户端状态的机制 。
post 是向服务器传送数据，数据量较大。
local Storage 也是 HTML5 的本地存储，将数据保存在客户端中（一般是永久的）。
Bootstrap 框架的网格系统工作原理如下：
1 、数据行 (.row) 必须包含在容器（ .container ）中，以便为其赋予合适的对齐方式和内距 (padding) 。
如： <div class=" container ">
<div class=" row "></div>
</div>
2 、在行 (.row) 中可以添加列 (.column) ，但列数之和不能超过平分的总列数，比如 12 。
如： <div class="container">
<div class="row">
<div class="col-md- 4 "></div>
<div class="col-md- 8 "></div>
3 、具体内容应当放置在列容器（ column ）之内，而且只有列（ column ）才可以作为行容器 (.row) 的直接子元素
4 、通过设置内距（ padding ）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（ margin ）来抵消内距 (padding) 的影响
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
(SVG是HTML下的一个分支)
DHTML是Dynamic HTML的简称，就是动态的HTML(标准通用标记语言下的一个应用)，是相对传统的静态的html而言的一种制作网页的概念。
DHTML只是HTML、CSS和客户端脚本的一种集成，即一个页面中包括html+css+javascript(或其它客户端脚本)
html+css+javascript（或其他脚本）的优点：html确定页面框架，css和脚本决定页面样式、动态内容和动态定位。
在什么情况下系统会调用拷贝构造函数：（三种情况）
（1）用类的一个对象去初始化另一个对象时
（2）当函数的形参是类的对象时（也就是值传递时），如果是引用传递则不会调用
（3）当函数的返回值是类的对象或引用时
调用的是拷贝构造函数
<pre class="prettyprint">ClassA a1;
ClassA a2(a1);</pre> <br>
<pre class="prettyprint">ClassA a1;
ClassA a2=a1;</pre> <br>
在什么情况下系统会调用拷贝构造函数：（三种情况）
（1）用类的一个对象去初始化另一个对象时
（2）当函数的形参是类的对象时（也就是值传递时），如果是引用传递则不会调用
（3）当函数的返回值是类的对象或引用时
var ws = new WebSocket("wss://echo.websocket.org");
ws.onopen = function(evt) {
console.log("Connection open ...");
ws.send("Hello WebSockets!");
};
ws.onmessage = function(evt) {
console.log( "Received Message: " + evt.data);
ws.close();
};
ws.onclose = function(evt) {
console.log("Connection closed.");
};
CSS 百分比参照问题
参照父元素宽度的元素：padding margin width text-indent
参照父元素高度的元素：height
参照父元素属性:font-size line-height
特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度
为HTML标签使用fixed或absoult的position，那么修改他们的CSS是不会reflow的
解释是：都已经脱离文档流了，脱流了，哪还有流。
HTML结构为
parent {
display: table;
}
child {
display: table-cell;
vertical-align: middle;
}
parent {
display: flex;
align-items: center;
}
parent {
position: relative;
}
child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
地理定位是HTML5中新增的API特性，它允许JavaScript程序向浏览器询问用户真实的地理位置。识别地理位置的一些应用就可以使用它来显示地图、导航和其它一些与用户当前位置有关的信息。 Geolocation API存在于navigator对象中，只包含3个方法：
1、getCurrentPosition //当前位置。
2、watchPosition //监视位置。
3、clearWatch //清除监视。
HTML5 地理定位 API 允许您与您喜爱的 web 站点共享您的位置
一个 javascript 可以捕获你的纬度和经度，并可以发送到后端 Web 服务器，做一些奇特的位置感知的事情，比如找到本地企业或在地图上显示你的位置
如今，大多数浏览器和移动设备都支持地理定位 API
关于web页面级优化
减少请求
图片优化
雪碧图
SVG、PNG、WEPB、BASE64等（依具体场景进行选择）
部署在CDN上，根据设备分辨率加载不同尺寸图片
选择合适缓存策略
服务端渲染
减少回流（和重绘）
懒加载
节流与防抖
即：
减少HTTP请求的次数
进行资源合拼和压缩
Inline images
Inline-Images指的就是通过编码的字符串将图片内嵌到网页文本中
将外部脚本置于低端
减少不必要的HTTP跳转
在html中，帧元素（frameset）的优先级最高，表单元素比非表单元素的优先级要高。
表单元素包括：文本输入框，密码输入框，单选框，复选框，文本输入域，列表框等等；
非表单元素包括：连接（a），div,table,span等。
所有的html元素又可以根据其显示分成两类：有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。
有窗口元素包括：select元素，object元素，以及frames元素等等。
无窗口元素：大部分html元素都是无窗口元素。
html元素的优先级: 帧元素 > 表单元素 > 非表单元素
帧元素有: frameset
表单元素有: input、select、option、textarea、button等
非表单元素有: div ,span, p, a 等等, 绝大多数html标签都是
label只有两个属性for（规定 label 绑定到哪个表单元素）和form（规定 label 字段所属的一个或多个表单）
Vue需要通过添加Vue-resource来实现http请求
JSX是React自带的模板，Vue有它自带的模板，比如Vue单文件组件
radio 以name属性划分组，一组内有且仅有一个被选中，所以点击按钮2，原选中的按钮3会被取消
在 HTML 音频/视频 DOM 中
currentTime:设置或者返回视频播放的当前位置（以秒计）。当设置该属性时，播放会跳跃到指定的位置。
duration:规定造成过渡效果需要花费的时间
defaultPlaybackRate:设置或者返回音频或者视频播放的默认速度
PlaybackRate：设置或者返回视频当前的播放速度
浮动（float）、固定定位（fixed）和绝对定位（absolute）都会使元素脱离文档流
也就是说相对定位不会脱硫
manifest 属性规定文档的缓存 manifest 的位置。
manifest 属性应该被 Web 应用程序中您想要缓存的每个页面包含。
manifest 文件是一个简单的文本文件，列举出了浏览器用于离线访问而缓存的资源。
爱恨情仇。LOVE/HATE：
link，visit，hover，active。
然后focus在hover和active之间即可
<audio>支持mp3，wav，ogg
在 HTML 中，文档类型 doctype 的声明是必要的。在所有文档的头部，你都将会看到"" 的身影。这个声明的目的是防止浏览器在渲染文档时，切换到我们称为“怪异模式(兼容模式)”的渲染模式。“" 确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。
注释：根据 HTML5 规范，在没有其他合适标签更合适时，才应该把 <b标签作为最后的选项。HTML5 规范声明：应该使用 <h1- <h6来表示标题，使用 <em标签来表示强调的文本，应该使用 <strong标签来表示重要文本，应该使用 <mark标签来表示标注的/突出显示的文本。
Video/Audio中会触发的事件
方法：load() play() pause()
事件：play() playing() pause() seeked() seeking() abort()当音频/视频的加载已放弃时触发
css加载不会阻塞DOM树的解析
css加载会阻塞DOM树的渲染
css加载会阻塞后面js语句的执行
浙公网安备 33010602011771号